簡(jiǎn)約至上-談簡(jiǎn)約網(wǎng)頁(yè)設計

簡(jiǎn)約設計就是用簡(jiǎn)單的方法直截了當的達到設計目的。用詞總覺(jué)得不夠精確，再補充，“簡(jiǎn)單”不是少，是不多、適當、合適；“直截了當”是減少冗余的修飾；“設計目的”是要解決的問(wèn)題。為什么要強調“簡(jiǎn)單是不多”？因為我們每個(gè)人都脫離不了貪婪的人性，愛(ài)占有，潛意識里引導著(zhù)喜歡多，喜歡無(wú)限制的添加。這里還有一個(gè)重要問(wèn)題，就是評判標準，不是我們自己說(shuō)它夠簡(jiǎn)單夠直截了當就是如此，“用戶(hù)”，用戶(hù)是終的審判官。這就有扯出了以用戶(hù)為中心的設計理念，原則，任何設計不能脫離了使用者而意淫的存在。

舉個(gè)栗子，設計一個(gè)鼠標，首先明確其設計的目的——解決電腦的操控，可能包含“移動(dòng)光標”、“選擇”、“拖拽”、“顯示快捷菜單”、“目標切換”等等。如果“直譯”目的，那我們就可以在鼠標上設置很多的按鍵，每個(gè)需求一個(gè)，按鍵太多，不好看了，那我們就把每個(gè)按鍵裝飾成一顆顆彩色的糖果狀，然后OK，設計完成，非常beautiful！但這明顯不是一個(gè)簡(jiǎn)約的設計。

反面的例子太多，因為我們身邊到處存在著(zhù)復雜不堪的設計。幾十個(gè)按鍵的游戲鼠標、裝滿(mǎn)了鉆石的汽車(chē)。還有嗎？

正面的例子也很多，王者必是apple。Mac、iMac、MacBook、iPhone，從電腦到Mac，從手機到iPhone，你所感受到的就是簡(jiǎn)約設計。你可感受到什么是恰到好處，什么到什么是去除冗余。還有一個(gè)具有代表性的是日本設計，日本人追求極簡(jiǎn)的態(tài)度從國旗就可以看出來(lái)。原研哉的“這樣就好”，撇棄多余的裝飾。更甚的wabi-sabi概念。

我們更關(guān)注的多媒體設計：iOS，從初的擬物（相對于當時(shí)環(huán)境，也算比較簡(jiǎn)潔的設計了。）到目前的扁平化；android設計進(jìn)化史，從初的粗糙堆砌，到Material design的簡(jiǎn)單直觀(guān)容易理解；小米官網(wǎng)的一次次改版。這些都是跟隨著(zhù)“簡(jiǎn)約設計”的引導。

啰嗦很多，必須進(jìn)入正題了。我們?yōu)槭裁匆x擇簡(jiǎn)約設計？

 毋庸置疑的，簡(jiǎn)單事情容易上手，簡(jiǎn)約的設計更容易使用。

當整個(gè)屏幕只有一個(gè)按鈕的時(shí)候，你會(huì )做什么？?jì)蓚€(gè)呢？十個(gè)呢？

回想一下，你是怎么教你的爸媽使用電腦的（假如有這個(gè)場(chǎng)景存在），“點(diǎn)擊開(kāi)始，哦，不是手指，是鼠標，哦，不是不是，是鼠標這個(gè)小箭頭，直接用鼠標點(diǎn)會(huì )砸壞顯示器的……”

還記不記得很早以前買(mǎi)手機都會(huì )有一本厚厚的使用說(shuō)明書(shū)？而現在，你買(mǎi)一部iPhone還有去看使用數碼書(shū)嗎？

簡(jiǎn)約的設計會(huì )更清晰，主題傳達明確

由于減少了多余的裝飾，簡(jiǎn)約的設計能更清晰傳達產(chǎn)品意圖。在以?xún)热轂橹?，通過(guò)合理的排版、交互，沒(méi)有干擾，用戶(hù)可以更高效理解掌握產(chǎn)品目的。

蘋(píng)果官網(wǎng)首頁(yè)，你所接收到的信息，就是蘋(píng)果所希望傳遞出來(lái)的——產(chǎn)品。

我們進(jìn)入一個(gè)應用下載頁(yè)面，屏幕上有兩個(gè)按鈕，一個(gè)按鈕寫(xiě)著(zhù)“點(diǎn)擊下載”，一個(gè)寫(xiě)著(zhù)“輕輕松松獲取，瀟瀟灑灑玩耍?！蹦銜?huì )點(diǎn)哪個(gè)？簡(jiǎn)約設計就是在內容與形式上都直觀(guān)明確的表達目的。

簡(jiǎn)約設計在視覺(jué)上能更持久的符合大眾審美

這點(diǎn)應該結合“時(shí)尚、流行”來(lái)說(shuō)。大多數的流行的東西，是通過(guò)表象的修飾設計來(lái)達到的，當你盡可能的較少修飾，也就避免了“過(guò)時(shí)”。我們還用蘋(píng)果說(shuō)事。

蘋(píng)果這個(gè)官網(wǎng)持續使用了多久？可以肯定的說(shuō)“很久了”。然真的一直沒(méi)有過(guò)時(shí)。隨著(zhù)iOS7的出現，它改版，變的更簡(jiǎn)約，請相信，新版本也會(huì )持續使用很久。

簡(jiǎn)約標準的設計，可以降低設計后期維護成本

這個(gè)“標準”的出現，絕對不是抱大腿，而是因為“標準”是簡(jiǎn)單的一個(gè)維度。簡(jiǎn)約的設計是標準的設計，它有自己的設計規范，有自己的設計原則。你看了iOS7/iOS8設計規范了嗎？你了解Metro設計規范嗎？你熟悉google新的Material Design設計理念了嗎？如果否定的回答太多，請相信，你不是一個(gè)合格的UI設計師，請迅速補課。

有了這么多的標準化設計，后續更換設計師維護會(huì )不會(huì )非常輕松？

簡(jiǎn)約設計更好看，更有韻味

在寫(xiě)這一條的時(shí)候，猶豫很久。作為一個(gè)設計師，一直覺(jué)得好看是一個(gè)非常主觀(guān)的事情，所以不太喜歡用好看來(lái)說(shuō)事。但作為一個(gè)設計師，去引導大眾接受美的事物是其不可推卸的責任（感覺(jué)自己悠然高大了起來(lái)）。記得iOS7剛出來(lái)，很多人吐槽難看，甚至用行動(dòng)抵制，慶幸，自己義無(wú)反顧的維護了它的美麗。很喜歡日本的設計（標注，骨子里對日本還是很敵對的態(tài)度，但設計確實(shí)值得學(xué)習。），簡(jiǎn)單中蘊含著(zhù)優(yōu)雅韻味。題外話(huà)，日本字體太零散，但日本人就是把這么難看的日文字體設計的不得不承認其優(yōu)秀。簡(jiǎn)約設計更容易通過(guò)留白、疏密產(chǎn)生自然韻律。

簡(jiǎn)單的設計更容易跨平臺平移，滿(mǎn)足當下多平臺表現的需求

現在的互聯(lián)網(wǎng)產(chǎn)品，基本都要PC和移動(dòng)端的標配，用簡(jiǎn)約的設計，更能同時(shí)滿(mǎn)足多平臺的設計表現需求。google的Material Design設計理念之一就是滿(mǎn)足跨平臺的需要。

簡(jiǎn)約設計更具有前瞻性

有沒(méi)有見(jiàn)過(guò)科幻電影里未來(lái)的世界？處處是“屏幕”，處處是光影。我曾經(jīng)討論過(guò)iOS為什么忽然變的如此“扁平”的設計，理由之一就是這個(gè)。想想，一面面虛擬的屏幕，上面顯示著(zhù)豐富的信息；一個(gè)由光影投射形成的虛擬人物站在你的面前；這些都是在空氣中光影組成，假如加入更多的修飾，可行嗎？至少在它廣為應用的前期是完全不可行的，隨著(zhù)技術(shù)的發(fā)展，后面再慢慢地發(fā)展到細膩、裝飾、完全擬真的情況也是完全合適的。

當然，簡(jiǎn)約設計的好處絕對不止我所羅列的這些，希望你的挖掘和發(fā)現。


說(shuō)這么多簡(jiǎn)約設計的好處，我們現在來(lái)聊聊怎樣才能做出簡(jiǎn)約的設計。
任何事情都有一定的規則或原則，比如做人（不是男女之間的事情，淡定。），每個(gè)人都應該有自己的做人原則，不能今天信誓旦旦的說(shuō)“民主黨”好，明天就高調的加入了“共和黨”；今天我是你的朋友，明天就面對面捅我一刀。

做簡(jiǎn)約設計，學(xué)習下這些原則會(huì )有比較大的幫助。

一、模擬產(chǎn)品

準確的說(shuō)不是模擬，是分析。要分析產(chǎn)品意圖，產(chǎn)品目的。做到每一個(gè)像素點(diǎn)都有理有據的服務(wù)于產(chǎn)品目的。我做一個(gè)app產(chǎn)品，目的是讓用戶(hù)點(diǎn)擊我加在里面的廣告，用戶(hù)的留存率活躍度美譽(yù)度等等一概不考慮，那首先就要取一個(gè)霸氣的名字，一定要熱門(mén)，要和色情掛鉤，要讓用戶(hù)以為點(diǎn)擊下載還可以賺錢(qián)…… app產(chǎn)品設計肯定是廣告面積大，做一些錯誤的鏈接，做一些不點(diǎn)廣告就無(wú)法關(guān)閉的彈窗…… 很多設計師會(huì )僅僅做一個(gè)“美工”的工作，只是把文字改改大小，調調顏色，根本沒(méi)有自己的思想，所以，要試著(zhù)去了解產(chǎn)品熟悉產(chǎn)品，明白產(chǎn)品意圖。

二、簡(jiǎn)單明確

所有表達要直接明了，避免讓用戶(hù)產(chǎn)生疑惑。除非產(chǎn)品特殊需要。

場(chǎng)景切換的時(shí)候，如果載入需要一段時(shí)間，那么必須簡(jiǎn)單明確的告訴用戶(hù)正在載入中，不能靜默的后臺數據載入，讓用戶(hù)無(wú)法明確當前所處狀態(tài)。數據提交成功，簡(jiǎn)單明確的告訴用戶(hù)“成功”，失敗則告訴失敗，而不是直接跳轉到下一個(gè)發(fā)展狀態(tài)。在整個(gè)流程的結尾尤其如此。

三、統一的設計理念

產(chǎn)品的各個(gè)組成部分，用相同的設計理念，而不是每個(gè)局部一個(gè)設計理念。包括排版方式、顏色、交互方式等等。這也是我們在設計時(shí)，會(huì )先設計若干組成部分（比如網(wǎng)站的幾個(gè)代表性頁(yè)面），再提煉出設計規范，后用這個(gè)規范設計完成剩余所有設計。

另外，一般情況下，我們會(huì )選擇用戶(hù)已經(jīng)養成的習慣，比如紅色為警告提醒，綠色為鼓勵安全，灰色為可以但不鼓勵等作為貫穿產(chǎn)品的一致設計理念。

四、用戶(hù)傻瓜模式

當然不是用戶(hù)是傻瓜，是要有模擬新用戶(hù)的思維。大多數情況用戶(hù)對產(chǎn)品認知是空白的，不要理所當然的認為用戶(hù)“應該知道這么用”，“應該知道點(diǎn)這個(gè)按鈕就是開(kāi)始”。所以要避免以自己的喜好和“專(zhuān)業(yè)”角度來(lái)做僅僅自己喜歡和好用的設計。

可能還會(huì )有些原則，但原則也是一個(gè)普遍的情況，偶爾產(chǎn)品允許的情況下也是可以“違反”這些原則的。比如游戲為了渲染氣氛，用很多筆墨裝飾背景環(huán)境，讓用戶(hù)有身臨其境的感覺(jué)。比如有些產(chǎn)品的主色調就是紅色，這時(shí)候紅色可能就不具有警告功能了。


原則只是一個(gè)方向，我們接下來(lái)說(shuō)說(shuō)怎么基于這些原則來(lái)做簡(jiǎn)約設計的方法。
這個(gè)方法僅僅是個(gè)人總結，基本是在GOMS原型基礎上衍生出來(lái)。（站在巨人的肩膀，不會(huì )錯的太多。）

step1：明確產(chǎn)品設計目的

與上邊的原則相輔，在設計開(kāi)始之前，必須詳細分析設計目的。明確了目的，才能朝著(zhù)爭取的方向進(jìn)行。很多入門(mén)設計師完全忽略這個(gè)步驟，接到一個(gè)網(wǎng)頁(yè)設計任務(wù)，便一頭扎入苦苦設計，基本功好的后能做出一個(gè)漂亮但不是提出方想要的設計，基本功差的就只能做出一坨比原型還糟糕的東西。這個(gè)明確產(chǎn)品設計目的的過(guò)程大多數是和設計提出方（產(chǎn)品經(jīng)理）溝通來(lái)完成的，有時(shí)候設計師全程參與產(chǎn)品進(jìn)程的則可以自己來(lái)明確目的。

step2：分析解決辦法

這個(gè)過(guò)程就是設計基本素養體現的時(shí)候了。不是告訴你一句話(huà)兩句話(huà)就能提高或解決問(wèn)題的。

但大體思路依然是圍繞設計目的，想各種的表現形式，各種的展現方法，各種的技巧使用，各種的參考案例。設計基礎是一門(mén)積累的手藝，看的多了，做的多了，思考的多了，也就差不到哪里去了。每次設計都是需要一次次的試錯（大神級別的更多的是腦子里的試錯，我們普通級別的腦子了試錯后，設計出來(lái)還可能不是一個(gè)優(yōu)秀方案，就只能是又證明了一個(gè)錯誤的方向。），從試錯中尋找一個(gè)佳設計方案。這也是為什么老板都喜歡設計師提供多個(gè)方案，因為太多設計師根本沒(méi)有在腦子試錯，一條道走到底出來(lái)一個(gè)第一關(guān)就該被踩死的設計方案。

step3：選擇排除方案

對于大神來(lái)說(shuō)根本沒(méi)有這個(gè)過(guò)程，我們只討論普通上進(jìn)好學(xué)有潛力帥氣漂亮的設計師。我們做出了兩個(gè)或多個(gè)方案出來(lái)，接下來(lái)可以邀請產(chǎn)品經(jīng)理、其他設計師、路人甲等來(lái)圍觀(guān)，旁觀(guān)者清，讓他/她們給你提供更進(jìn)一步的已經(jīng)和建議。終選擇定稿。

step4：再設計（redesign）

其實(shí)上一步已經(jīng)完成了正常的設計過(guò)程，但為一個(gè)有抱負有理想的設計師，每次的設計不能僅僅為了完成任務(wù)，而是要每次都能提升自己，從中學(xué)習進(jìn)步。扯大了，真實(shí)的說(shuō)，我是為了引出標題中的《簡(jiǎn)約至上》，因為我太喜歡這本書(shū)了?！逗?jiǎn)約至上》提供了四個(gè)方法來(lái)讓一個(gè)設計變的簡(jiǎn)單：刪除、組織、隱藏、轉移。不愧是一本設計的好書(shū)，簡(jiǎn)單的四個(gè)方法幾乎可解決任何“復雜”設計的瘦身。


總算記得住的都說(shuō)完了，還有些想說(shuō)的但沒(méi)記住的也就只能先憋著(zhù)了。
說(shuō)了這么多，真的是應了那句話(huà)：簡(jiǎn)約，不簡(jiǎn)單

。
另外，感受簡(jiǎn)約，可以用下LOFTER，它們自詡崇尚簡(jiǎn)約。也可以多研究BAT的產(chǎn)品，多數可算簡(jiǎn)約設計。


后，還有一個(gè)話(huà)題，很感興趣，希望以后可以繼續探討——“流行”。

不要輕視流行，很多人眼里，流行就是惡俗、沒(méi)品位的代名詞。其實(shí)流行的東西是符合“當下”的人性反饋，它在時(shí)間維度和空間維度上變遷。