談簡(jiǎn)約設(shè)計(jì)

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

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

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

還記不記得很早以前買手機(jī)都會(huì)有一本厚厚的使用說明書？而現(xiàn)在，你買一部iPhone還有去看使用數(shù)碼書嗎？

• 簡(jiǎn)約的設(shè)計(jì)會(huì)更清晰，主題傳達(dá)明確
  

由于減少了多余的裝飾，簡(jiǎn)約的設(shè)計(jì)能更清晰傳達(dá)產(chǎn)品意圖。在以內(nèi)容為主，通過合理的排版、交互，沒有干擾，用戶可以更高效理解掌握產(chǎn)品目的。

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

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

• 簡(jiǎn)約設(shè)計(jì)在視覺上能更持久的符合大眾審美
  

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

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

• 簡(jiǎn)約標(biāo)準(zhǔn)的設(shè)計(jì)，可以降低設(shè)計(jì)后期維護(hù)成本
  

這個(gè)“標(biāo)準(zhǔn)”的出現(xiàn)，絕對(duì)不是抱大腿，而是因?yàn)椤皹?biāo)準(zhǔn)”是簡(jiǎn)單的一個(gè)維度。簡(jiǎn)約的設(shè)計(jì)是標(biāo)準(zhǔn)的設(shè)計(jì)，它有自己的設(shè)計(jì)規(guī)范，有自己的設(shè)計(jì)原則。你看了iOS7/iOS8設(shè)計(jì)規(guī)范了嗎？你了解Metro設(shè)計(jì)規(guī)范嗎？你熟悉google新的Material Design設(shè)計(jì)理念了嗎？如果否定的回答太多，請(qǐng)相信，你不是一個(gè)合格的UI設(shè)計(jì)師，請(qǐng)迅速補(bǔ)課。

有了這么多的標(biāo)準(zhǔn)化設(shè)計(jì)，后續(xù)更換設(shè)計(jì)師維護(hù)會(huì)不會(huì)非常輕松？

• 簡(jiǎn)約設(shè)計(jì)更好看，更有韻味
  

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

• 簡(jiǎn)單的設(shè)計(jì)更容易跨平臺(tái)平移，滿足當(dāng)下多平臺(tái)表現(xiàn)的需求
  

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

• 簡(jiǎn)約設(shè)計(jì)更具有前瞻性
  

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

說這么多簡(jiǎn)約設(shè)計(jì)的好處，我們現(xiàn)在來聊聊怎樣才能做出簡(jiǎn)約的設(shè)計(jì)。

任何事情都有一定的規(guī)則或原則，比如做人（不是男女之間的事情，淡定。），每個(gè)人都應(yīng)該有自己的做人原則，不能今天信誓旦旦的說“民主黨”好，明天就高調(diào)的加入了“共和黨”；今天我是你的朋友，明天就面對(duì)面捅我一刀。

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

一、模擬產(chǎn)品

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

二、簡(jiǎn)單明確

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

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

三、統(tǒng)一的設(shè)計(jì)理念

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

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

四、用戶傻瓜模式

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

可能還會(huì)有些原則，但原則也是一個(gè)普遍的情況，偶爾產(chǎn)品允許的情況下也是可以“違反”這些原則的。比如游戲?yàn)榱虽秩練夥眨煤芏喙P墨裝飾背景環(huán)境，讓用戶有身臨其境的感覺。比如有些產(chǎn)品的主色調(diào)就是紅色，這時(shí)候紅色可能就不具有警告功能了。

原則只是一個(gè)方向，我們接下來說說怎么基于這些原則來做簡(jiǎn)約設(shè)計(jì)的方法。

這個(gè)方法僅僅是個(gè)人總結(jié)，基本是在GOMS原型基礎(chǔ)上衍生出來。（站在巨人的肩膀，不會(huì)錯(cuò)的太多。）

step1：明確產(chǎn)品設(shè)計(jì)目的

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

step2：分析解決辦法

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

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

step3：選擇排除方案

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

step4：再設(shè)計(jì)（redesign）

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

總算記得住的都說完了，還有些想說的但沒記住的也就只能先憋著了。

說了這么多，真的是應(yīng)了那句話：簡(jiǎn)約，不簡(jiǎn)單。

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

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

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