藍(lán)藍(lán)設(shè)計這個教程中我們將使用Photoshop CS6設(shè)計一個簡單、干凈、三列的作品集時間軸。在這個過程中，我們將著眼于自定義網(wǎng)格，排版樣式，并利用不同的顏色和對比度實現(xiàn)我們想要的美感。

同學(xué)們可以從這個教程學(xué)習(xí)如何在一個頁面平衡不同的元素，使整個界面設(shè)計富有韻律感與呼吸感。快畢業(yè)的童鞋們可以嘗試這樣展示你的作品集喲。

上效果圖：

如果要在一個UI設(shè)計師的眾多作品當(dāng)中挑選一個最接近該設(shè)計師的界面設(shè)計思想及風(fēng)格的，那么這個作品基本上就是設(shè)計師的個人網(wǎng)站設(shè)計。因為設(shè)計師個人網(wǎng)站在某種意義上來說可以不用顧及任何受眾群體，不用考慮任何商業(yè)約束之類的，基本上是一種隨心所欲的完全自我風(fēng)格的呈現(xiàn)。

因此，UI設(shè)計師們的個人網(wǎng)站設(shè)計成為了另一抹艷麗的風(fēng)景，來欣賞藍(lán)藍(lán)設(shè)計今天為您帶來的這道靚麗風(fēng)景線吧。

Sushi & Robots

在這個浩瀚的互聯(lián)網(wǎng)里，web項目越來越多，那么就需要大量的網(wǎng)絡(luò)設(shè)計人才和程序開發(fā)專員。所以，近幾年UI設(shè)計獅和程序猿越來越多，更為難能可貴的是，有很多有想法的同學(xué)們會在日后的工作中惺惺相惜，雙宿雙飛！彼此互補，組合起來成立自己的工作室，或者相互之間幫助搭建個人站點。

那么今天藍(lán)藍(lán)設(shè)計就要分享的是類似這樣的個人站點和工作室。他們之中有圖形界面設(shè)計師、開發(fā)人員、網(wǎng)絡(luò)藝術(shù)作家、和其他數(shù)碼創(chuàng)意者。
這是一個巨大的網(wǎng)頁設(shè)計畫廊，琳瑯滿目的釋放著這些設(shè)計人的靈感創(chuàng)意。

Mathew Helme

藍(lán)藍(lán)設(shè)計強烈推薦：這些超贊的色塊化、模塊化網(wǎng)頁設(shè)計！
Web設(shè)計的8大趨勢中，其中就包含了色塊設(shè)計、超大號的圖片、聚焦簡潔、響應(yīng)式設(shè)計、視差滾動、強調(diào)字體。
辣！這些鮮活靈動的界面設(shè)計案例，絕對會有打動你的一個！在這個激動人心的周五，會心收藏吧！

Mercer Tavern

藍(lán)藍(lán)設(shè)計與你分享一位優(yōu)秀的交互設(shè)計師的成長過程與想法。

1. 交互設(shè)計師應(yīng)當(dāng)具備的能力

如果我們簡單的將用戶體驗領(lǐng)域涉及到的技能分為：用戶研究、產(chǎn)品（概念/功能）設(shè)計、交互設(shè)計、視覺設(shè)計、工程技術(shù)，我認(rèn)為任何一個交互設(shè)計師和視覺設(shè)計師等等，都應(yīng)該具有整體的復(fù)合技能，只是哪部分更多哪部分更少的問題。

1) 用戶研究：對于交互設(shè)計師，不具備基本的用戶研究能力，無法吸收來自用戶的「信息營養(yǎng)」，如何做出真正以用戶為重心的設(shè)計呢？觀察法、訪談法、問卷法、可用性測試、行為數(shù)據(jù)分析等等，這些基本的方法應(yīng)該要有所掌握。

2) 產(chǎn)品（概念/功能）設(shè)計和交互設(shè)計：這方面不必多說，交互設(shè)計師必須有大局觀，能夠真正的理解產(chǎn)品的思路和方向，從交互的角度實現(xiàn)產(chǎn)品層面的意圖。這也是很多交互設(shè)計師轉(zhuǎn)向產(chǎn)品設(shè)計師、產(chǎn)品經(jīng)理的原因，在很多方面有交叉。

每當(dāng)談到網(wǎng)頁設(shè)計這個話題時，我總會想到這些年我見過的一些常見的錯誤，尤其是發(fā)生在年輕UI設(shè)計師身上的。所以今天藍(lán)藍(lán)設(shè)計整理了一些資料，算是我這些年總結(jié)的經(jīng)驗吧，主要是教大家怎樣做好網(wǎng)頁界面設(shè)計。我認(rèn)為每一個網(wǎng)頁設(shè)計新手在開始一個項目之前都應(yīng)該了解這些知識，在項目開展中也應(yīng)該注意。

這些概念不僅僅是網(wǎng)頁設(shè)計方面的，還包括現(xiàn)實中的工作流問題，它可以幫你更好的完成工作。如果你能將這些知識融會貫通，假以時日，做一個專業(yè)的網(wǎng)站界面設(shè)計布局就不是問題啦~

01.將你的想法先在紙上畫出來

在中國清朝，明黃色的衣服只有皇子才有資格穿，慢慢的黃色在中國就成了高貴的顏色。在人們的色彩印象中，黃色界面設(shè)計也表現(xiàn)為暫停。所以當(dāng)你的網(wǎng)頁設(shè)計采用黃色的時候，會讓人們在你的網(wǎng)頁前停留。今天藍(lán)藍(lán)設(shè)計就推薦一些國外黃色網(wǎng)站設(shè)計，希望對UI設(shè)計師們有所幫助！

黃色，就像橙色和紅色，黃色也是一個暖色。它有大自然、陽光、春天的涵義，而且通常被認(rèn)為是一個快樂和有希望的色彩。不過話雖如此，它可能是一個難以應(yīng)付的色彩，而且貌似并不像之前討論的那幾種色彩流行。黃色是所有色相中最能發(fā)光的顏色，給人輕快，透明，輝煌，充滿希望的色彩印象。

如果你是一個APP狂熱分子，你會花大量的時間在各種APP界面設(shè)計的嘗鮮中，你會明顯感受到一些APP在采用著某種風(fēng)格鮮明的設(shè)計語言，來標(biāo)榜自己的獨特之處，形成自己的界面設(shè)計風(fēng)格，甚至引領(lǐng)設(shè)計風(fēng)向。去年我們關(guān)注到隨著Metro設(shè)計風(fēng)格的影響和iOS7的發(fā)布，APP明顯都開始嘗試扁平化的設(shè)計語言了，除此之外，還有哪些顯性化的設(shè)計語言嶄露頭角呢？

在這篇文章里，藍(lán)藍(lán)設(shè)計想分享一些日益顯性的UI設(shè)計語言，讓人一眼就記住它的風(fēng)格，有一些已經(jīng)隨著優(yōu)秀設(shè)計師的摸索，融入到國內(nèi)移動產(chǎn)品設(shè)計里了，而有一些，確實是剛剛在萌芽階段，需要更進(jìn)一步的摸索和嘗試。

一、唯一主色調(diào) | Simple color schemes

為什么我們要定義一個界面多種顏色？僅僅用一個主色調(diào)，是不是就能夠很好的表達(dá)界面層次、重要信息，并且能展現(xiàn)良好的視覺效果？事實上也正是如此，隨著iOS7的發(fā)布，我們看到越來越多唯一主色調(diào)風(fēng)格的設(shè)計，會采用簡單的色階，配套灰階來展現(xiàn)信息層次，但是絕不采用更多的顏色。

對話框（Dialog）是個好用又方便的工具，通常用來再三確認(rèn)使用者的操作動作與決策，以避免一時的手誤或誤會操作動作的意思，常用于重要動作的確認(rèn)，例如：「你確定要刪除這個聯(lián)絡(luò)人嗎？」，但若對話框搭配了不適當(dāng)?shù)幕貞?yīng)選項文字，反而可能會造成使用者的困擾與誤解，有時還可能做了錯誤的決定。

對話框界面設(shè)計最常見的不當(dāng)UI設(shè)計就是選項上的文字出現(xiàn)：「是（YES）與否（NO）」，回想在學(xué)生時期考試的時候，O與X在是非題中是唯二的兩個答案，而出題者會透過文字?jǐn)⑹錾险吹恼`導(dǎo)，來測驗學(xué)生是否真的清楚了解，先不論這樣的測驗方式到底對學(xué)習(xí)以及知識的建立到底有沒有明顯的幫助，使用者可不想在開心的使用你的程式或服務(wù)時，還要小心翼翼的了解你對話框的內(nèi)容。

我們當(dāng)然可以細(xì)心的UI設(shè)計對話框中的文字，讓使用者清楚明了對話框的訊息，但是在大部分的情況下，我們幾乎根本不會逐字去閱讀訊息的內(nèi)容。你必須要假設(shè)使用者除了對話框上的按鈕外，不會閱讀任何其他訊息（對話框的標(biāo)題或是訊息內(nèi)容）。 – John Gruber of Daring Fireball

毋庸置疑，造成用戶跳出率高的真正殺手是網(wǎng)站設(shè)計元素的雜亂和干擾。 總而言之，網(wǎng)站上任何惱人的元素都有可能造成用戶蜻蜓點水般離去，這些干擾可能是任何不和諧因素，包括過多的動畫效果、過于雜亂的配色設(shè)計。只有層次分明、清晰明了的網(wǎng)站設(shè)計才能讓用戶把視線聚集在網(wǎng)站內(nèi)容的價值上，從而達(dá)到網(wǎng)站建設(shè)的目的。而用戶的煩惱就在于網(wǎng)站不合時宜的排版、不恰當(dāng)?shù)膶?dǎo)航以及錯誤的信息把用戶統(tǒng)統(tǒng)拒之門外。

優(yōu)秀的網(wǎng)站設(shè)計是能最大化降低用戶跳出率，并提供良好的用戶體驗和有價值的信息。為了避免界面設(shè)計的悲劇，藍(lán)藍(lán)設(shè)計總結(jié)了六大要素試圖降低網(wǎng)站跳出率：

1. 良好的用戶界面