簡潔素雅：如何實現簡約網頁設計

在(exist)生(born)活中，人(people)們(them)常常被包圍在(exist)不(No)需要(want)的(of)功能中，比如某些手機，炫酷功能不(No)勝枚舉：雙攝像頭拍照，眼神翻頁，Group Play（好幾台手機同步一(one)首歌）等等。但從使用(use)頻率和(and)效果來(Come)說略顯雞肋。這(this)些類似的(of)功能可能會拖累整個(indivual)産品，在(exist)使用(use)時(hour)分散用(use)戶注意力，使用(use)戶無法聚焦到(arrive)核心功能。尤其是(yes)用(use)戶在(exist)幹擾很多的(of)場合，來(Come)不(No)及仔細研究和(and)思考的(of)情況下，簡單可控制無疑是(yes)用(use)戶最需要(want)的(of)。同時(hour)簡約也是(yes)一(one)種風格，帶有其特有的(of)美感。那麽如何去做呢？

用(use)戶分類
首先我(I)們(them)把軟件的(of)相關人(people)員分爲(for)三類：管理人(people)員，開發人(people)員和(and)普通用(use)戶。複雜往往是(yes)在(exist)他(he)們(them)之前轉移的(of)，就像算法中時(hour)間成本和(and)空間成本的(of)權衡一(one)樣，對用(use)戶簡單了(Got it)，可能開發難度和(and)管理難度就變大(big)了(Got it)。我(I)們(them)這(this)裏關注的(of)是(yes)對普通用(use)戶的(of)簡約。
其次我(I)們(them)把用(use)戶分爲(for)三類：
專家型用(use)戶：他(he)們(them)對你産品感興趣，舍得花時(hour)間研究探索産品的(of)新功能。
随意型用(use)戶：他(he)們(them)可能使用(use)過類似産品，能接受新功能，但是(yes)得足夠簡單。
主流用(use)戶：不(No)會因爲(for)你的(of)技術而使用(use)你的(of)産品，使用(use)你産品的(of)目的(of)是(yes)完成某項任務。他(he)們(them)會掌握一(one)些重要(want)功能的(of)使用(use)方法，但永遠不(No)會産生(born)學會所有功能的(of)想法。這(this)些人(people)的(of)口頭禅就是(yes)：“我(I)的(of)手機隻要(want)能打電話、能發短信就行了(Got it)。”大(big)多數人(people)屬于(At)這(this)一(one)類。
我(I)們(them)産品設計應該關注的(of)是(yes)大(big)多數的(of)主流用(use)戶。對于(At)專家用(use)戶，或許他(he)們(them)能細數你的(of)功能，和(and)你溝通起來(Come)沒有障礙，三句話說到(arrive)你心裏，而且是(yes)那麽通情達理，毫不(No)猶豫就升級到(arrive)最新版本，但他(he)們(them)的(of)想法會讓主流用(use)戶感到(arrive)太複雜。

四策略
簡約的(of)設計意味着你得追求極端的(of)目标，達到(arrive)其次的(of)效果。我(I)認爲(for)能從兩個(indivual)方面來(Come)下手：複雜度的(of)減少和(and)複雜度的(of)轉移。在(exist)“四策略”中，“删除”和(and)“組織”更多在(exist)作(do)用(use)于(At)前者，“隐藏”和(and)“轉移”更多的(of)是(yes)作(do)用(use)于(At)後者。
删除
1、僅滿足核心需求，造出(out)有設計感的(of)輕量級産品，如tumblr。
2、不(No)要(want)死扣“假如用(use)戶…… ”，假設用(use)戶的(of)所有可能使用(use)情況并滿足，會産生(born)一(one)些少部分用(use)戶低頻使用(use)的(of)功能。
3、删去界面的(of)小細節。比如簡化布局，精簡按鈕和(and)鏈接樣式，減少廣告位數量，去掉分隔線等。
4、不(No)給用(use)戶提供可選項。比如用(use)戶在(exist)購物平台在(exist)結賬時(hour)，屏蔽到(arrive)所有能指向其他(he)地(land)方的(of)鏈接，或是(yes)可選項，順着點點就結完賬，不(No)給用(use)戶分心猶豫的(of)機會。
5、删減文字，精簡句子。使用(use)簡潔文案，突出(out)有價值的(of)信息。
6、解決視覺混亂。一(one)些技巧可以(by)借鑒：删去分隔标志，使用(use)輕微的(of)背景色來(Come)劃分界面；少使用(use)強調；删去較多的(of)信息層次，比如隻使用(use)标題，子标題和(and)正文；減少元素，比如按鈕的(of)形狀和(and)樣式等。
7、消除錯誤來(Come)源。再小的(of)錯誤都會讓用(use)戶感到(arrive)心煩，所以(by)盡可能去優化那些容易出(out)錯的(of)步驟吧。
删除某些功能是(yes)一(one)味比較猛良藥，誰都不(No)喜歡給了(Got it)的(of)東西又拿回去，包括用(use)戶。從短期來(Come)看可能會造成一(one)定負面效果，但這(this)或許是(yes)産品能長期發展，脫穎而出(out)的(of)一(one)個(indivual)必須經過的(of)階段。
組織
1、分模塊，7±2是(yes)人(people)瞬時(hour)能接受的(of)一(one)個(indivual)模塊範圍。
2、按照用(use)戶的(of)行爲(for)規律，時(hour)間和(and)空間順序來(Come)組織，慎用(use)字母表和(and)格式統一(one)與否來(Come)組織。
3、分類盡可能明确，相互之間交叉盡可能的(of)少。比如某銀行手機app，生(born)活繳費功能并未劃在(exist)“生(born)活”業務标簽中，而是(yes)歸在(exist)“一(one)卡通”業務範圍内，這(this)樣會造成較長的(of)查詢時(hour)間。
4、對内容有效的(of)組織之後再去考慮搜索，很多時(hour)候搜索功能并不(No)能改善無效率的(of)組織。
5、通過大(big)小和(and)位置的(of)組織來(Come)區别不(No)同的(of)重要(want)性。
6、使用(use)分層，有如下技巧：少量的(of)層；兩層差别盡可能大(big)；用(use)高明度和(and)高飽和(and)度的(of)顔色突出(out)重點；相同重要(want)可亮度和(and)大(big)小相同，區别色調。
7、合理使用(use)色标。用(use)戶對色标的(of)學習成本和(and)使用(use)收益應呈現合适的(of)比例。比如一(one)個(indivual)長時(hour)間使用(use)的(of)大(big)型應用(use)，那麽用(use)戶對于(At)自成體系的(of)色标也不(No)會那麽介意，因爲(for)使用(use)到(arrive)後面隻會越來(Come)越方面。
如果說删除是(yes)革命，那麽組織就是(yes)改革。通過重新的(of)組合，也能降低整體的(of)複雜度。
隐藏
1、不(No)常用(use)的(of)但不(No)能少的(of)，比如個(indivual)性化設置。
2、讓用(use)戶自定義界面，選擇隐藏，可非專家用(use)戶會喜歡這(this)種方式麽？值得讨論。
3、分段展現。讓用(use)戶不(No)是(yes)一(one)次的(of)去接受所有信息，而是(yes)采取逐漸分步的(of)方式。比如用(use)戶注冊時(hour)隻需填寫較少信息，降低流失率，而處理到(arrive)一(one)定業務的(of)時(hour)候，再讓他(he)去完善個(indivual)人(people)信息。
4、巧妙的(of)設置提示與線索。比如蘋果的(of)MacBook展示頁，像宣傳畫冊一(one)樣，滿足了(Got it)主流用(use)戶，而在(exist)右上(superior)角提供了(Got it)一(one)個(indivual)技術規格，讓想了(Got it)解的(of)專家用(use)戶去點開查詢。
隐藏不(No)能從根本上(superior)減少複雜度，可以(by)看做一(one)種迂回策略，甚至你想隐藏某項功能的(of)時(hour)候你需要(want)考慮：“是(yes)不(No)是(yes)需要(want)删去它？”我(I)們(them)在(exist)設計隐藏機制，使産品看上(superior)去簡約的(of)同時(hour)，也需要(want)讓它在(exist)适當的(of)時(hour)候出(out)現。
轉移
1、跨設備的(of)轉移某些功能，比如蘋果表上(superior)的(of)功能在(exist)iPhone上(superior)具體處理，微信公衆号的(of)詳細設置需要(want)在(exist)電腦上(superior)完成。
2、把系統的(of)工作(do)轉移到(arrive)用(use)戶那。信任用(use)戶，讓用(use)戶做擅長的(of)事情，比如計劃，想象，估算，辨别信息等；而讓産品負責精确的(of)記錄，計算，具體執行等工作(do)。比如，讓一(one)個(indivual)組件有多種用(use)處，讓用(use)戶去決定在(exist)什麽時(hour)候使用(use)哪一(one)個(indivual)。
前三個(indivual)策略可以(by)完美的(of)結合：删除不(No)必要(want)的(of)，組織要(want)提供的(of)、隐藏非核心的(of)。轉移相對獨立，涉及到(arrive)對界面進行重新布局。

結語
運用(use)删除，組合的(of)策略将整本書的(of)要(want)點“簡約”出(out)來(Come)，加上(superior)自己的(of)思考結合到(arrive)了(Got it)一(one)篇文章當中，也算“簡約”的(of)實戰了(Got it)吧。就像書中所說，“簡約設計”就像打地(land)鼠一(one)樣，你打了(Got it)這(this)頭，那頭就起來(Come)了(Got it)。我(I)認爲(for)，更多的(of)時(hour)候，複雜是(yes)在(exist)各個(indivual)維度之間轉移的(of)，确定哪個(indivual)維度是(yes)你關注的(of)，就盡可能的(of)将複雜移出(out)那個(indivual)維度。天知道谷歌爲(for)了(Got it)讓我(I)們(them)的(of)搜索界面簡潔到(arrive)隻有一(one)個(indivual)框，面對了(Got it)多少的(of)複雜。