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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. 良好的用戶界面

每個(gè)人的所接觸的人、事、物不同，接受的教育背景文化也都不同，發(fā)生意見分歧是非常正常的一件事情，然而作為UI設(shè)計(jì)師的我們本身對設(shè)計(jì)作品都有那么點(diǎn)“潔癖”，遇上類似的事情時(shí)，心里總會有“觸動”，情緒難免有些起伏。

面對別人的意見其實(shí)不用過于抵觸，意見也可能并不是因?yàn)椴缓枚岢?，是從其它角度提出?dāng)前沒有考慮到的事情，這不定是壞事，不同角度，不同觀點(diǎn)，能讓作品變得更出色也說不定。藍(lán)藍(lán)設(shè)計(jì)分享UI設(shè)計(jì)師遇到意見太多時(shí)的方法，希望對朋友們界面設(shè)計(jì)工作有所幫助！

接受意見前，先正“三觀”

人非圣賢，孰能無過，情緒來的時(shí)候，總會有些激動，所以先改變一下自己的“三觀”，帶著抵觸情緒很難去對待意見。:)

1. 正面看待別人的意見

積極看待別人的意見，如果意見能夠幫助自己做出更好的作品，是種多贏。當(dāng)然對那些不靠譜的意見或者鉆牛角尖的人，還是要分別對待。

一篇小文，若干貼士，幫你幫我?guī)痛蠹矣幸鉄o意的培養(yǎng)意識形態(tài)，爭做有同理心的好UI設(shè)計(jì)師。走著。
這里進(jìn)入譯文。優(yōu)秀的用戶體驗(yàn)界面設(shè)計(jì)師應(yīng)該具有出眾的同理心，也就是站在他人的角度看待和理解事物的能力。同理心與同情心是兩碼事，你不必真心同意或接受他人的觀點(diǎn)，但必須對他們的狀態(tài)感同身受，從主觀上理解他們看待事物的角度。
出于以下這些原因，我(英文原文作者)相信同理心可以使我們成為更好的界面設(shè)計(jì)師：

• 同理心可以讓我們更自然更真誠的去思考怎樣幫助用戶解決他們的實(shí)際問題，使我們的設(shè)計(jì)決策能更好的聚焦于用戶目標(biāo)。
• 同理心可以幫助我們與用戶、團(tuán)隊(duì)成員及利益相關(guān)者構(gòu)建更好的人際關(guān)系，為人與人的交流提供開放、互信、更具建設(shè)性的基礎(chǔ)。
• 同理心有助于個(gè)人整體的塑造。這不僅僅是一項(xiàng)職業(yè)技能，在工作中逐漸培養(yǎng)和挖掘出來的同理心同樣可以運(yùn)用到生活的其他方面。

接下來藍(lán)藍(lán)設(shè)計(jì)和大家分享一些能夠在日常工作和生活中幫助我們提升同理心的小方法。

1.發(fā)現(xiàn)日常生活中的痛

音樂是人類的靈魂，相信大部分的UI設(shè)計(jì)師在做界面設(shè)計(jì)時(shí)，都會開著音樂激發(fā)靈感，陶冶情操。那些歌兒或激烈、或?qū)庫o……
音樂的本質(zhì)是耳朵的享受，但是在優(yōu)設(shè)，我們肯定不能讓眼球落寞，那么今天就來一起看看藍(lán)藍(lán)設(shè)計(jì)這些與音樂相關(guān)的網(wǎng)站設(shè)計(jì)吧。推薦收藏起來，以后肯定會用到的喲：）

76 Synthesizer

你是一名網(wǎng)頁設(shè)計(jì)師或者一個(gè)想學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的人嗎？
如果你的回答是”Yes”，那么你最初想學(xué)習(xí)網(wǎng)頁界面設(shè)計(jì)的原因是什么呢？
有些人夢想創(chuàng)造出偉大的設(shè)計(jì)并因此聞名于世；有些人則把網(wǎng)頁設(shè)計(jì)作為自己的事業(yè)并為之奮斗一生；而有些人，或許僅僅是為了賺錢養(yǎng)家。

那么你呢？

OK，無論你為何想學(xué)習(xí)網(wǎng)頁UI設(shè)計(jì)，現(xiàn)在我要向你介紹一種一箭三雕的方法，能讓你在學(xué)習(xí)網(wǎng)頁設(shè)計(jì)的同時(shí)，變得更受歡迎，還能賺些錢。正所謂，生財(cái)有道！這聽起來很棒，不是嗎？你一定開始期待我要講些關(guān)于網(wǎng)頁界面設(shè)計(jì)的技術(shù)了吧。很遺憾，我要講的跟這個(gè)毫無關(guān)系，這可不是一篇通常的講網(wǎng)頁設(shè)計(jì)相關(guān)技術(shù)的文章。

估計(jì)你還沒有頭緒?

產(chǎn)品經(jīng)理和UI設(shè)計(jì)師之間最常見也是最尖銳的矛盾就是，UI設(shè)計(jì)師把花了很多心血做出來的稿子放到產(chǎn)品經(jīng)理面前，產(chǎn)品看了一下，覺得非常陌生和超出預(yù)期，說：“這都是些什么啊”。

(- -#)，(- -’)，此處無聲勝有聲。倒不是說這里面誰對誰錯(cuò)，都挺辛苦的其實(shí)，但為什么總會落得如此尷尬呢。

世上配合最好的其實(shí)就是自己的手配合自己的腦袋。腦袋怎么想，手就怎么畫，畫出來的丁老頭再丑也覺得很親切，恩恩，是我的好作品（星星眼）。只是等到兩個(gè)人合作的時(shí)候，就有些麻煩了。因?yàn)?，讓“設(shè)計(jì)師的手”精致地受控于“產(chǎn)品經(jīng)理的腦袋”，每次畫完看一看，覺得對就繼續(xù)畫、錯(cuò)就改的敏捷調(diào)控是不現(xiàn)實(shí)的。

禍起，在于一些溝通中有很多弊端，唯有解決這些問題，才能讓團(tuán)隊(duì)和諧地高唱“同一個(gè)夢想”。藍(lán)藍(lán)設(shè)計(jì)分享一下UI設(shè)計(jì)師如何做不出產(chǎn)品經(jīng)理想要的設(shè)計(jì)的方法！希望對朋友們界面設(shè)計(jì)工作有所幫助！

一、產(chǎn)品沒有意識到要講的其實(shí)是故事

常見的產(chǎn)品經(jīng)理提需求的方式往往都是在需求文檔里直接寫“在Feed上增加一個(gè)轉(zhuǎn)載按鈕，點(diǎn)擊后可以填寫轉(zhuǎn)載理由”。這種描述方式其實(shí)已經(jīng)是一個(gè)很具象的解決方案了。然后這份包含數(shù)十條如此描述需求的文檔會被貼到內(nèi)部需求管理網(wǎng)站上，或者通過郵件發(fā)給設(shè)計(jì)師。