設計“簡單直觀”的產品，纔是好產品

在產品設計中要做到“簡單直觀”，首先要讓產品概念淺顯易懂，其次是要打造最直觀的交互方式，最後一點就是產品對於用戶的操作要有反饋。只有設計“簡單直觀”的產品，纔是好產品。

今天談一談產品設計中的一個原則——“簡單直觀”。

這個原則聽起來也很“簡單直觀”，但是它既是一個最低、最基礎的要求，也是做產品最高的境界。要真正做到這一點，其實並不容易。

所謂“簡單直觀”，就是：要讓產品做到憑直覺就能理解並上手使用。

無論是日常生活用品、社會公共設施，還是高科技的軟件、硬件產品，都應該符合這個原則。

下面，先從我們辦公室裏放置的一臺普通的飲水機說起（如左圖所示）。

這臺飲水機看起來不錯，但卻有一個問題，那就是它不符合“簡單直觀”的設計原則。當你按下右側的熱水按鈕，憑直覺用杯子在下面接水時，會被從左邊流出的熱水給嚇到，一不小心就會被燙傷。

相比之下，右圖的這臺飲水機儘管看起來不夠高端大氣，但其設計卻很“簡單直觀”。冷熱水開關和相應的出水口連在一起，並且用紅藍兩種”直觀的“顏色來進行區分。

這樣，一般情況下是不會搞錯的。

在這個飲水機的例子中，體現出了一條讓產品“簡單直觀”最基本的設計策略，就是“讓功能相關的元素，在位置上也相近”。

這也是平面設計的基本原則之一。在羅賓·威廉姆斯的《寫給大家看的設計書》中，他將優秀設計的祕訣歸納爲“對比、重複、對齊和親密性”四條基本原則。其中，“親密性”就是在說這一點。

除了飲水機，我們經常能在日常生活當中看到，很多物品的設計都不符合“簡單直觀”的原則。

比如：很多門把手的設計就有問題——你每次都要想一下應該是推還是拉。一種好的設計就是推的那一面根本就沒有把手，只有一個方塊區域引導你去推，這樣你就不會搞錯了。

如此簡單的設計問題司空見慣，唐納德·A·諾曼博士在其著名的《設計心理學》一書中，就有過專門的論述。

再舉個例子：如果讓你設計車輛座椅的“頭枕、靠背和坐墊”調節按鈕，你該怎麼做呢？

最“直觀”的想法，恐怕就是挨個放上“頭枕向前/向後、靠背向前/向後、坐墊向前/向後/上升/下降”等八個按鈕吧？

這個沒錯，但太複雜了，一點都不夠“簡單直觀”。而好的設計就類似下圖這樣，把按鈕做成座椅的形狀，那就容易理解、很好操作了。

除了生活當中的物品之外，在注重設計、強調用戶體驗的IT/互聯網產品領域，“簡單直觀”這個設計原則也非常關鍵。

比如：在整個人機交互（HCI）技術的發展史中，就一直體現着不斷趨向直觀化的演進路線。

在最早期，輸入方式是打孔紙帶，後來出現鍵盤命令行輸入（CLI）、圖形化界面（GUI）+鼠標輸入。可以看到，輸入方式越來越直觀。

近些年出現的觸摸屏、語音、肢體動作識別等輸入技術，則是到達了一個更高的階段。

可以說，最簡單直觀的交互和輸入方式，就是利用人類數萬年前就進化出的機能（觸摸、說話、動作）來進行輸入，而不需要再借用任何中間設備，或者預先學習輸入方法和指令纔行。

直觀的交互方式，就是當年iPad一問世就大獲成功的原因之一。因爲我們會驚奇地看到，對於從來沒有摸過電腦的老人和小孩，給他一臺iPad，他就會很直觀地進行“滑動解鎖、左右滑動屏幕、點擊圖標打開應用、用手指旋轉和縮放照片”等一系列操作。

我兒子也是在兩歲多的時候，就可以熟練操作各式智能手機了。當我使用筆記本電腦進行工作的時候，他還經常會下意識地用手指在屏幕指指點點，企圖搗亂，儘管這並不是觸控屏。

由此可見，“觸摸”這樣交互方式，是多麼的簡單和直觀。

當然，越是直觀的交互方式，需要更高的技術來實現。

這是因爲，輸入輸出技術本質上是人與計算機之間的橋樑。然而，作爲生物體的人，與計算機內在的二進制的、電子的裝置差異很大。因此，要讓計算機直接識別人類的“觸摸、說話、動作”這些生物信號，難度就很大。於是，之前的種種交互技術，比如鍵盤、鼠標什麼的，都是在中間做橋接。

再來說說手機軟件，我們也能看到很多簡單直觀的設計。

比如：微信“搖一搖”就是一個很好的例子。

微信在幾年前就引入了“搖一搖”，來讓用戶以揮動手機這種非常簡單直觀、非常有參與感的交互方式，尋找同一時刻搖一搖的有緣人，或者識別當前正在播放的歌曲和電視節目，並與之互動。

現在，很多產品和H5互動都效仿微信，用搖一搖的方式來參與抽獎、添加好友等。其實“搖一搖”這個觸發產品功能的方法，換成點擊某個按鈕或菜單的話完全一樣，這也是最常見交互方式。但由於“搖一搖”參與起來非常有喜感，特別是非常簡單直觀，不用做任何多餘的解釋大家都能懂，因而更受歡迎。

相比之下，支付寶的“咻一咻”就不夠簡單直觀了。因爲它完全是一個生造的交互方式，不像任何小孩和大人都能懂、都會做的“搖一搖”。用戶大腦當中絲毫沒有什麼“咻一咻”的概念，無法聯想到“咻一咻”是自然界哪種熟知的生物發出的聲響、做出的動作。

最後，看看老羅的錘子手機。儘管這把錘子最終並沒有砸碎其他競爭對手，但其產品中確實有不少簡單直觀的設計，值得研究和學習。

比如：手機附帶的計時器工具，就很不錯。拉出手環來設置時長（錶盤的指針會隨之轉動），鬆開拉環就啓動計時。在計時進行的過程中，隨時可以拉動拉環來調整時長，以及關閉計時。工具雖小，但確實很好用。

再對主題做一下進一步的總結和延伸，要打造“簡單、直觀”的產品，需要從以下幾個方面來考慮：

1. 概念要簡單

概念簡單，產品才能簡單；概念複雜，產品必然複雜。

“搖一搖、掃一掃”，都是非常淺顯易懂的概念，它把複雜的技術實現隱藏起來，讓用戶都能顧名思義、立刻理解。

其實，不光在設計某一個具體的產品功時要考慮概念上的簡單，我們在做任何一個複雜產品的整體設計之前，都應該先把該產品的概念體系設計出來。

然而，在具體實踐當中我們經常看到，產品經理一做起產品設計，首先想到的MRD、PRD，就去畫具體的頁面原型，跳入到種種細枝末節當中。

結果是：在產品評審時頻頻被挑戰——要麼是概念不一致，同一個東西一會兒叫這個名字一會兒叫那個；要麼是體系結構不一致（把不同級別的功能並列在了一起）、流程不順暢（出現斷裂或者死循環）。

我推薦的做法是：先把這個產品裏面的所有概念和功能模塊列出來，從概念的命名和數量上，都確保極簡。正所謂，如無必要，勿增實體。

其次，把所有的東西畫一個完整腦圖出來。按照產品功能的層級，一級一級列出來，然後不斷去梳理，在腦海當中演練整個產品的所有功能和流程。這個腦圖的結構，就對應產品的架構層級、導航層級，以及具體的頁面和基本概念模塊。

最後，把這個腦圖翻譯成頁面原型即可。

先在大腦中構建，再在電腦上繪製。

2. 交互須直觀

再解決了概念的問題之後，對於每一個頁面模塊，我們要確保交互是直觀的——用戶一眼看過去，基本上就知道該怎麼做了。

要打造直觀的交互方式，可以考慮如下的原則：

多采用“觸摸（包括指紋）、語音”等直觀的交互方式。
在交互設計上，讓“功能相關的元素，在位置上也要相近”。
在色彩的選用上，也要遵循常理。比如：紅色代表代表熱、藍色代表冷；紅色代表停止、綠色代表啓動；紅色和黃色代表危險、警示等等。
按照操作對象本身的特點來設計相應的交互方式。例如：對於類似知識圖譜實體關係這樣網狀的、結構化的數據，儘量用可視化的拖拖拽拽的交互來表達，而不是讓用戶通過填寫複雜的表單來構建這樣的對象。
避免用戶誤操作。比如：接口設計要能防插反。我們注意到，在內存、CPU插槽、SIM卡插槽等設計上，都有防止插反的設計——反了是插不進去的。但最好的設計是，根本就不區分正反。你看，安卓和蘋果最新的手機充電線插頭，都採用這樣的設計，非常方便。