簡約至上-談簡約網頁設計

簡約設計就是用簡單的方法直截了當的達到設計目的。用詞總覺得不夠精确，再補充，“簡單”不是少，是不多、适當、合适；“直截了當”是減少冗餘的修飾；“設計目的”是要解決的問題。爲什麼(me)要強調“簡單是不多”？因爲我們每個人都(dōu)脫離不了貪婪的人性，愛占有，潛意識裡(lǐ)引導著(zhe)喜歡多，喜歡無限制的添加。這(zhè)裡(lǐ)還(hái)有一個重要問題，就是評判标準，不是我們自己說它夠簡單夠直截了當就是如此，“用戶”，用戶是終的審判官。這(zhè)就有扯出了以用戶爲中心的設計理念，原則，任何設計不能(néng)脫離了使用者而意淫的存在。

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

反面(miàn)的例子太多，因爲我們身邊到處存在著(zhe)複雜不堪的設計。幾十個按鍵的遊戲鼠标、裝滿了鑽石的汽車。還(hái)有嗎？

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

我們更關注的多媒體設計：iOS，從初的拟物（相對(duì)于當時環境，也算比較簡潔的設計了。）到目前的扁平化；android設計進(jìn)化史，從初的粗糙堆砌，到Material design的簡單直觀容易理解；小米官網的一次次改版。這(zhè)些都(dōu)是跟随著(zhe)“簡約設計”的引導。

啰嗦很多，必須進(jìn)入正題了。我們爲什麼(me)要選擇簡約設計？

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

當整個屏幕隻有一個按鈕的時候，你會做什麼(me)？兩(liǎng)個呢？十個呢？

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

還(hái)記不記得很早以前買手機都(dōu)會有一本厚厚的使用說明書？而現在，你買一部iPhone還(hái)有去看使用數碼書嗎？

簡約的設計會更清晰，主題傳達明确

由于減少了多餘的裝飾，簡約的設計能(néng)更清晰傳達産品意圖。在以内容爲主，通過(guò)合理的排版、交互，沒(méi)有幹擾，用戶可以更高效理解掌握産品目的。

蘋果官網首頁，你所接收到的信息，就是蘋果所希望傳遞出來的——産品。

我們進(jìn)入一個應用下載頁面(miàn)，屏幕上有兩(liǎng)個按鈕，一個按鈕寫著(zhe)“點擊下載”，一個寫著(zhe)“輕輕松松獲取，潇潇灑灑玩耍。”你會點哪個？簡約設計就是在内容與形式上都(dōu)直觀明确的表達目的。

簡約設計在視覺上能(néng)更持久的符合大衆審美

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

蘋果這(zhè)個官網持續使用了多久？可以肯定的說“很久了”。然真的一直沒(méi)有過(guò)時。随著(zhe)iOS7的出現，它改版，變的更簡約，請相信，新版本也會持續使用很久。

簡約标準的設計，可以降低設計後(hòu)期維護成(chéng)本

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

有了這(zhè)麼(me)多的标準化設計，後(hòu)續更換設計師維護會不會非常輕松？

簡約設計更好(hǎo)看，更有韻味

在寫這(zhè)一條的時候，猶豫很久。作爲一個設計師，一直覺得好(hǎo)看是一個非常主觀的事(shì)情，所以不太喜歡用好(hǎo)看來說事(shì)。但作爲一個設計師，去引導大衆接受美的事(shì)物是其不可推卸的責任（感覺自己悠然高大了起(qǐ)來）。記得iOS7剛出來，很多人吐槽難看，甚至用行動抵制，慶幸，自己義無反顧的維護了它的美麗。很喜歡日本的設計（标注，骨子裡(lǐ)對(duì)日本還(hái)是很敵對(duì)的态度，但設計确實值得學(xué)習。），簡單中蘊含著(zhe)優雅韻味。題外話，日本字體太零散，但日本人就是把這(zhè)麼(me)難看的日文字體設計的不得不承認其優秀。簡約設計更容易通過(guò)留白、疏密産生自然韻律。

簡單的設計更容易跨平台平移，滿足當下多平台表現的需求

現在的互聯網産品，基本都(dōu)要PC和移動端的标配，用簡約的設計，更能(néng)同時滿足多平台的設計表現需求。google的Material Design設計理念之一就是滿足跨平台的需要。

簡約設計更具有前瞻性

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

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


說這(zhè)麼(me)多簡約設計的好(hǎo)處，我們現在來聊聊怎樣(yàng)才能(néng)做出簡約的設計。
任何事(shì)情都(dōu)有一定的規則或原則，比如做人（不是男女之間的事(shì)情，淡定。），每個人都(dōu)應該有自己的做人原則，不能(néng)今天信誓旦旦的說“民主黨”好(hǎo)，明天就高調的加入了“共和黨”；今天我是你的朋友，明天就面(miàn)對(duì)面(miàn)捅我一刀。

做簡約設計，學(xué)習下這(zhè)些原則會有比較大的幫助。

一、模拟産品

準确的說不是模拟，是分析。要分析産品意圖，産品目的。做到每一個像素點都(dōu)有理有據的服務于産品目的。我做一個app産品，目的是讓用戶點擊我加在裡(lǐ)面(miàn)的廣告，用戶的留存率活躍度美譽度等等一概不考慮，那首先就要取一個霸氣的名字，一定要熱門，要和色情挂鈎，要讓用戶以爲點擊下載還(hái)可以賺錢…… app産品設計肯定是廣告面(miàn)積大，做一些錯誤的鏈接，做一些不點廣告就無法關閉的彈窗…… 很多設計師會僅僅做一個“美工”的工作，隻是把文字改改大小，調調顔色，根本沒(méi)有自己的思想，所以，要試著(zhe)去了解産品熟悉産品，明白産品意圖。

二、簡單明确

所有表達要直接明了，避免讓用戶産生疑惑。除非産品特殊需要。

場景切換的時候，如果載入需要一段時間，那麼(me)必須簡單明确的告訴用戶正在載入中，不能(néng)靜默的後(hòu)台數據載入，讓用戶無法明确當前所處狀态。數據提交成(chéng)功，簡單明确的告訴用戶“成(chéng)功”，失敗則告訴失敗，而不是直接跳轉到下一個發(fā)展狀态。在整個流程的結尾尤其如此。

三、統一的設計理念

産品的各個組成(chéng)部分，用相同的設計理念，而不是每個局部一個設計理念。包括排版方式、顔色、交互方式等等。這(zhè)也是我們在設計時，會先設計若幹組成(chéng)部分（比如網站的幾個代表性頁面(miàn)），再提煉出設計規範，後(hòu)用這(zhè)個規範設計完成(chéng)剩餘所有設計。

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

四、用戶傻瓜模式

當然不是用戶是傻瓜，是要有模拟新用戶的思維。大多數情況用戶對(duì)産品認知是空白的，不要理所當然的認爲用戶“應該知道(dào)這(zhè)麼(me)用”，“應該知道(dào)點這(zhè)個按鈕就是開(kāi)始”。所以要避免以自己的喜好(hǎo)和“專業”角度來做僅僅自己喜歡和好(hǎo)用的設計。

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


原則隻是一個方向(xiàng)，我們接下來說說怎麼(me)基于這(zhè)些原則來做簡約設計的方法。
這(zhè)個方法僅僅是個人總結，基本是在GOMS原型基礎上衍生出來。（站在巨人的肩膀，不會錯的太多。）

step1：明确産品設計目的

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

step2：分析解決辦法

這(zhè)個過(guò)程就是設計基本素養體現的時候了。不是告訴你一句話兩(liǎng)句話就能(néng)提高或解決問題的。

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

step3：選擇排除方案

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

step4：再設計（redesign）

其實上一步已經(jīng)完成(chéng)了正常的設計過(guò)程，但爲一個有抱負有理想的設計師，每次的設計不能(néng)僅僅爲了完成(chéng)任務，而是要每次都(dōu)能(néng)提升自己，從中學(xué)習進(jìn)步。扯大了，真實的說，我是爲了引出标題中的《簡約至上》，因爲我太喜歡這(zhè)本書了。《簡約至上》提供了四個方法來讓一個設計變的簡單：删除、組織、隐藏、轉移。不愧是一本設計的好(hǎo)書，簡單的四個方法幾乎可解決任何“複雜”設計的瘦身。


總算記得住的都(dōu)說完了，還(hái)有些想說的但沒(méi)記住的也就隻能(néng)先憋著(zhe)了。
說了這(zhè)麼(me)多，真的是應了那句話：簡約，不簡單

。
另外，感受簡約，可以用下LOFTER，它們自诩崇尚簡約。也可以多研究BAT的産品，多數可算簡約設計。


後(hòu)，還(hái)有一個話題，很感興趣，希望以後(hòu)可以繼續探讨——“流行”。

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