扁平化設計中，按鈕是如何讓人有點擊欲的？

---

瀉藥。這是一個好問題啊。聽眾雖少，也要認真把歌唱完。

扁平和非扁平的按鈕有啥區別？

基本沒區別。

但是，扁平化的極簡設計對設計師提出了更高要求：

• 精鍊內容
• 真正地思考主要任務，讓用戶專註於主要任務
• 重複上兩點來不斷迭代
• 勇敢地重新設計

其實題主提出的這個問題等於「如何設計出優秀和有效的行為召喚」。有的同學可能會覺得扁平按鈕不夠突出，就做不到有效的行為召喚，其實那是全局設計有問題。我所理解的「全局設計」在非扁平的界面里包含這些東西：

• 對比：顏色、大小、位置；
• 上下文：例如按鈕的作用類型、使用場景；
• 文案：各種動賓短語，活動口號；或者識別度高的icon；
• 各種反饋：填寫校檢；懸停狀態；
• 有愛

以上東西沒做好，就算你的按鈕再「擬物」，用戶也沒有點擊慾望。

字多會悶，舉些圖例來說明吧：

圖1：扁平 vs 非扁平 (廣義上的) 圖片來源：LukeW | Designing for iOS7: Perils Pluses

請注意：「扁平化」的 iOS 7 的鍵盤按鈕也是有陰影的哦。

圖2：扁平 vs 非扁平 (廣義上的) 圖片來源：同上

圖3： 扁平 vs 非扁平 (廣義上的)

圖4：新浪微盤按鈕，很好地詮釋了「對比」的重要性

圖5：iOS 7 絕大多數情況都具有良好的上下文，當然也專註於讓用戶一次只做一個任務

在有上下文關聯的情況下，就算是簡單的「文字鏈接」也會很容易被識別。當然左圖的「Agree」按鈕也使用了加粗的對比效果。

圖6：上下文、單一任務

登錄時非常美好——簡單的表單，還記住我上次登錄的賬戶名，大大的藍色「登錄」按鈕。

但成功登錄卻給我一個「廣告」頁面，還要來個與任務無關的推廣按鈕——我用手機來登錄你的網頁版，還能指望我先下載你的app？流量、網速、使用環境都不幫用戶考慮一下？跟新浪微盤有啥區別。

圖7：吸引的文案

Mailchimp 用簡單大方的產品介紹設計出良好的上下文環境，然後加上一句簡單的「Sign Up free」來搞定用戶。

圖8：很多時候識別度高的圖標能幫你節省很多空間，並能提升美觀度和一致性

圖9：自動校檢，未填寫東西就不讓你點擊按鈕。那麼明顯的變化很容易吸引用戶眼球，這個場景稍微複雜。

圖10：不可用狀態的滑鼠hover反饋（Bootstrap 的 CSS 3 樣式）

圖11：知乎的按鈕

非常低的對比，為啥？為了減少用戶寫作的干擾源。

圖12：什麼叫有愛？知乎還沒支持Gif啊！！！大家自己去試試 Tumblr

最後奉上一個比較完美的按鈕設計：

MapBox | Fast and beautiful maps 我要Gif！！！！

Are u watching closely?

至於扁平與擬物孰劣孰優的爭論，我就不多說了，全球包括知乎都有海量的討論。 我的理解是這樣的：

趨勢是視覺上越來越扁平，交互上越來越擬物。

---

扁平化設計不需要刻意去引導用戶往按鈕上點擊。智能手機發展了這麼多年，用戶已經習慣了屏幕上哪裡可以點擊，沒必要再通過擬物來提示。在這種前提下扁平化才發展起來的。

個人認為這是一個技術和審美髮展的過程。

放在觸屏技術剛剛發展起來的時候，人們還習慣於實體按鍵，大腦里對於屏幕里的圖形的第一直覺還停留在「壁紙」的感覺，直覺上意識不到什麼是可點擊的。那時候iphone4和安卓手機們的UI界面還是擬物按鈕為主流，看上去舒服自然，可點擊的圖標通過漸變、陰影等效果產生視覺上的一個「突起」感，讓人注意到他的不同，從而明白這是一個按鈕。

隨著智能手機的普及，人們已經適應了什麼地方能點擊，就不必通過特效來「提示」了。並且在於信息爆炸的時代，冗餘的東西讓人開始感覺不適，這種失去提示意義的特效漸漸就沒有了存在的價值了，取而代之的是簡約清爽的扁平化風格。事實上，扁平化嘗試剛剛開始時，還有很多反對的聲音，認為這種圖形看起來很不自然，反直覺，是一種偷懶行為；但時代的潮流不可阻擋，隨著大眾的認知能力和審美水平的發展，簡約的扁平化風格就越來越深入人心了。現在大家看見一個扁平化的設計（如app界面、PPT等）會感覺清爽舒適；但把同樣一份設計放在十年前，估計會被噴：「什麼玩意兒，偷工減料吧，就幾個簡簡單單的方塊我幾分鐘就能做出來」。這很正常。前幾星期，網上把Win98時代的PPT風格拿出來調侃了一番，亮眼的背景+各種gif jpg四處亂入+小喇叭+酷炫的藝術字+四處亂飛的動畫效果，樂呵樂呵地覺得特別low；但在當時，可沒什麼人跳出來說這種PPT很low的，這完全是取決於特定時期技術和審美的發展程度而已。

從簡單——&>複雜——&>簡約，不光是設計，很多事情都遵循這種規律。起初技術水平低，只能做簡單的東西，這是任何事情剛起步時的狀態；後來越做越複雜，功能和信息越來越集成化，看起來就顯得很複雜不明覺厲，這是技術的積累階段；再後來把信息歸類整理，把功能模塊化規範化，從而提升用戶體驗，這是技術的整合和反思階段。而審美只是伴隨著技術發展的一種相應的認知行為而已，必然也隨之發展，可能會依舊對舊的習慣和審美有所迷戀，但卻很難超時代去理解超越當前時代技術的審美標準，就像十幾年前的人很可能會對扁平化不屑一顧一樣。

---

---

最後一句話印象深刻：3

---

推薦閱讀：