在產(chǎn)品設(shè)計(jì)中要做到“簡單直觀”，首先要讓產(chǎn)品概念淺顯易懂，其次是要打造最直觀的交互方式，最后一點(diǎn)就是產(chǎn)品對于用戶的操作要有反饋。只有設(shè)計(jì)“簡單直觀”的產(chǎn)品，才是好產(chǎn)品。

今天談一談產(chǎn)品設(shè)計(jì)中的一個(gè)原則——“簡單直觀”。

這個(gè)原則聽起來也很“簡單直觀”，但是它既是一個(gè)最低、最基礎(chǔ)的要求，也是做產(chǎn)品最高的境界。要真正做到這一點(diǎn)，其實(shí)并不容易。

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

無論是日常生活用品、社會公共設(shè)施，還是高科技的軟件、硬件產(chǎn)品，都應(yīng)該符合這個(gè)原則。

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

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

相比之下，右圖的這臺飲水機(jī)盡管看起來不夠高端大氣，但其設(shè)計(jì)卻很“簡單直觀”。冷熱水開關(guān)和相應(yīng)的出水口連在一起，并且用紅藍(lán)兩種”直觀的“顏色來進(jìn)行區(qū)分。

這樣，一般情況下是不會搞錯(cuò)的。

在這個(gè)飲水機(jī)的例子中，體現(xiàn)出了一條讓產(chǎn)品“簡單直觀”最基本的設(shè)計(jì)策略，就是“讓功能相關(guān)的元素，在位置上也相近”。

這也是平面設(shè)計(jì)的基本原則之一。在羅賓·威廉姆斯的《寫給大家看的設(shè)計(jì)書》中，他將優(yōu)秀設(shè)計(jì)的秘訣歸納為“對比、重復(fù)、對齊和親密性”四條基本原則。其中，“親密性”就是在說這一點(diǎn)。

除了飲水機(jī)，我們經(jīng)常能在日常生活當(dāng)中看到，很多物品的設(shè)計(jì)都不符合“簡單直觀”的原則。

比如：很多門把手的設(shè)計(jì)就有問題——你每次都要想一下應(yīng)該是推還是拉。一種好的設(shè)計(jì)就是推的那一面根本就沒有把手，只有一個(gè)方塊區(qū)域引導(dǎo)你去推，這樣你就不會搞錯(cuò)了。

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

再舉個(gè)例子：如果讓你設(shè)計(jì)車輛座椅的“頭枕、靠背和坐墊”調(diào)節(jié)按鈕，你該怎么做呢？

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

這個(gè)沒錯(cuò)，但太復(fù)雜了，一點(diǎn)都不夠“簡單直觀”。而好的設(shè)計(jì)就類似下圖這樣，把按鈕做成座椅的形狀，那就容易理解、很好操作了。

除了生活當(dāng)中的物品之外，在注重設(shè)計(jì)、強(qiáng)調(diào)用戶體驗(yàn)的IT/互聯(lián)網(wǎng)產(chǎn)品領(lǐng)域，“簡單直觀”這個(gè)設(shè)計(jì)原則也非常關(guān)鍵。

比如：在整個(gè)人機(jī)交互（HCI）技術(shù)的發(fā)展史中，就一直體現(xiàn)著不斷趨向直觀化的演進(jìn)路線。

在最早期，輸入方式是打孔紙帶，后來出現(xiàn)鍵盤命令行輸入（CLI）、圖形化界面（GUI）+鼠標(biāo)輸入?？梢钥吹剑斎敕绞皆絹碓街庇^。

近些年出現(xiàn)的觸摸屏、語音、肢體動(dòng)作識別等輸入技術(shù)，則是到達(dá)了一個(gè)更高的階段。

可以說，最簡單直觀的交互和輸入方式，就是利用人類數(shù)萬年前就進(jìn)化出的機(jī)能（觸摸、說話、動(dòng)作）來進(jìn)行輸入，而不需要再借用任何中間設(shè)備，或者預(yù)先學(xué)習(xí)輸入方法和指令才行。

直觀的交互方式，就是當(dāng)年iPad一問世就大獲成功的原因之一。因?yàn)槲覀儠@奇地看到，對于從來沒有摸過電腦的老人和小孩，給他一臺iPad，他就會很直觀地進(jìn)行“滑動(dòng)解鎖、左右滑動(dòng)屏幕、點(diǎn)擊圖標(biāo)打開應(yīng)用、用手指旋轉(zhuǎn)和縮放照片”等一系列操作。

我兒子也是在兩歲多的時(shí)候，就可以熟練操作各式智能手機(jī)了。當(dāng)我使用筆記本電腦進(jìn)行工作的時(shí)候，他還經(jīng)常會下意識地用手指在屏幕指指點(diǎn)點(diǎn)，企圖搗亂，盡管這并不是觸控屏。

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

當(dāng)然，越是直觀的交互方式，需要更高的技術(shù)來實(shí)現(xiàn)。

這是因?yàn)?，輸入輸出技術(shù)本質(zhì)上是人與計(jì)算機(jī)之間的橋梁。然而，作為生物體的人，與計(jì)算機(jī)內(nèi)在的二進(jìn)制的、電子的裝置差異很大。因此，要讓計(jì)算機(jī)直接識別人類的“觸摸、說話、動(dòng)作”這些生物信號，難度就很大。于是，之前的種種交互技術(shù)，比如鍵盤、鼠標(biāo)什么的，都是在中間做橋接。

再來說說手機(jī)軟件，我們也能看到很多簡單直觀的設(shè)計(jì)。

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

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

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

相比之下，支付寶的“咻一咻”就不夠簡單直觀了。因?yàn)樗耆且粋€(gè)生造的交互方式，不像任何小孩和大人都能懂、都會做的“搖一搖”。用戶大腦當(dāng)中絲毫沒有什么“咻一咻”的概念，無法聯(lián)想到“咻一咻”是自然界哪種熟知的生物發(fā)出的聲響、做出的動(dòng)作。

最后，看看老羅的錘子手機(jī)。盡管這把錘子最終并沒有砸碎其他競爭對手，但其產(chǎn)品中確實(shí)有不少簡單直觀的設(shè)計(jì)，值得研究和學(xué)習(xí)。

比如：手機(jī)附帶的計(jì)時(shí)器工具，就很不錯(cuò)。拉出手環(huán)來設(shè)置時(shí)長（表盤的指針會隨之轉(zhuǎn)動(dòng)），松開拉環(huán)就啟動(dòng)計(jì)時(shí)。在計(jì)時(shí)進(jìn)行的過程中，隨時(shí)可以拉動(dòng)拉環(huán)來調(diào)整時(shí)長，以及關(guān)閉計(jì)時(shí)。工具雖小，但確實(shí)很好用。

再對主題做一下進(jìn)一步的總結(jié)和延伸，要打造“簡單、直觀”的產(chǎn)品，需要從以下幾個(gè)方面來考慮：

1. 概念要簡單

概念簡單，產(chǎn)品才能簡單；概念復(fù)雜，產(chǎn)品必然復(fù)雜。

“搖一搖、掃一掃”，都是非常淺顯易懂的概念，它把復(fù)雜的技術(shù)實(shí)現(xiàn)隱藏起來，讓用戶都能顧名思義、立刻理解。

其實(shí)，不光在設(shè)計(jì)某一個(gè)具體的產(chǎn)品功時(shí)要考慮概念上的簡單，我們在做任何一個(gè)復(fù)雜產(chǎn)品的整體設(shè)計(jì)之前，都應(yīng)該先把該產(chǎn)品的概念體系設(shè)計(jì)出來。

然而，在具體實(shí)踐當(dāng)中我們經(jīng)?？吹剑a(chǎn)品經(jīng)理一做起產(chǎn)品設(shè)計(jì)，首先想到的MRD、PRD，就去畫具體的頁面原型，跳入到種種細(xì)枝末節(jié)當(dāng)中。

結(jié)果是：在產(chǎn)品評審時(shí)頻頻被挑戰(zhàn)——要么是概念不一致，同一個(gè)東西一會兒叫這個(gè)名字一會兒叫那個(gè)；要么是體系結(jié)構(gòu)不一致（把不同級別的功能并列在了一起）、流程不順暢（出現(xiàn)斷裂或者死循環(huán)）。

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

其次，把所有的東西畫一個(gè)完整腦圖出來。按照產(chǎn)品功能的層級，一級一級列出來，然后不斷去梳理，在腦海當(dāng)中演練整個(gè)產(chǎn)品的所有功能和流程。這個(gè)腦圖的結(jié)構(gòu)，就對應(yīng)產(chǎn)品的架構(gòu)層級、導(dǎo)航層級，以及具體的頁面和基本概念模塊。

最后，把這個(gè)腦圖翻譯成頁面原型即可。

先在大腦中構(gòu)建，再在電腦上繪制。

2. 交互須直觀

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

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

• 多采用“觸摸（包括指紋）、語音”等直觀的交互方式。
• 在交互設(shè)計(jì)上，讓“功能相關(guān)的元素，在位置上也要相近”。
• 在色彩的選用上，也要遵循常理。比如：紅色代表代表熱、藍(lán)色代表冷；紅色代表停止、綠色代表啟動(dòng)；紅色和黃色代表危險(xiǎn)、警示等等。
• 按照操作對象本身的特點(diǎn)來設(shè)計(jì)相應(yīng)的交互方式。例如：對于類似知識圖譜實(shí)體關(guān)系這樣網(wǎng)狀的、結(jié)構(gòu)化的數(shù)據(jù)，盡量用可視化的拖拖拽拽的交互來表達(dá)，而不是讓用戶通過填寫復(fù)雜的表單來構(gòu)建這樣的對象。
• 避免用戶誤操作。比如：接口設(shè)計(jì)要能防插反。我們注意到，在內(nèi)存、CPU插槽、SIM卡插槽等設(shè)計(jì)上，都有防止插反的設(shè)計(jì)——反了是插不進(jìn)去的。但最好的設(shè)計(jì)是，根本就不區(qū)分正反。你看，安卓和蘋果最新的手機(jī)充電線插頭，都采用這樣的設(shè)計(jì)，非常方便。

3. 狀態(tài)有反饋

用戶看到了直觀的交互，他按照預(yù)想的、下意識的方式去操作了。

然后，我們要將系統(tǒng)的狀態(tài)展示出來，對用戶的操作要有相應(yīng)的反饋。讓用戶知道我在哪里、我將要去哪里、我做了什么、系統(tǒng)處于什么狀態(tài)。這樣，用戶才不會焦慮，才不會誤操作。

這里，我們以電梯的設(shè)計(jì)來舉例。

大家經(jīng)常可以看到，有些電梯按鈕按下去，并沒有操作反饋或者給用戶的反饋很微弱，其背景或者邊框的亮光很不清楚。這樣，用戶就以為沒有按下去，就再去按一遍。

有時(shí)候，我們按下按鈕，在等電梯的時(shí)候還是感到很著急，這往往是因?yàn)殡娞輿]有樓層指示，沒有顯示這部電梯運(yùn)行到哪一層。這樣，即使電梯距離本層并不遠(yuǎn)，但因?yàn)榭床坏綘顟B(tài)，用戶就很茫然、很焦慮，這個(gè)等待時(shí)長在心理上也會被放大。

總之，無論是面對何種產(chǎn)品，無論其結(jié)構(gòu)和原理多么復(fù)雜，產(chǎn)品設(shè)計(jì)者都應(yīng)該想方設(shè)法用最簡單最直觀的方式來進(jìn)行設(shè)計(jì)。

簡單、直觀的產(chǎn)品，才是好產(chǎn)品。

#專欄作家#

朱百寧，微信公眾號：八點(diǎn)三十五，人人都是產(chǎn)品經(jīng)理專欄作家。前百度品牌總監(jiān)，著有《自傳播》一書，現(xiàn)在專注于人工智能以及產(chǎn)品設(shè)計(jì)等領(lǐng)域。個(gè)人微信：izhubaining，歡迎添加進(jìn)行交流。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于CC0協(xié)議。