編輯導(dǎo)語：我們都知道，在設(shè)計(jì)過程中要滿足一定的交互設(shè)計(jì)原則，這直接決定了用戶使用你的產(chǎn)品過程中的體驗(yàn)，其重要性不言而喻。那么在我們?cè)O(shè)計(jì)交互行為方式的時(shí)候，應(yīng)該遵循什么原則呢？本文作者為大家總結(jié)出來了7條交互設(shè)計(jì)原則，歡迎大家討論交流。

產(chǎn)品交互設(shè)計(jì)在大廠會(huì)有專門崗位的同學(xué)完成，但是對(duì)于職責(zé)分工還沒有那么明確的公司來說，這部分的工作可能就是產(chǎn)品經(jīng)理來兼職完成了，甚至也有研發(fā)來兼職完成的。

這里往往會(huì)出現(xiàn)一些問題，非交互專業(yè)的人設(shè)計(jì)完產(chǎn)品之后，我們想要實(shí)現(xiàn)的功能是可以滿足的，但是用戶體驗(yàn)可能會(huì)大打折扣。如果設(shè)計(jì)者沒有刻意地去學(xué)習(xí)一些這方面的知識(shí)，設(shè)計(jì)出的原型可能免不了被一頓吐槽。

在閑暇時(shí)，看了一些UX的書籍，這邊總結(jié)出幾點(diǎn)原則和大家討論一下。

一、不要讓用戶思考

在之前寫過的一篇文章說到一個(gè)觀點(diǎn)，意志力是易耗品，思考本身就會(huì)消耗人的能量，那么用戶在用你的產(chǎn)品過程中，需要經(jīng)歷復(fù)雜的思考的話，一定體驗(yàn)不怎么樣。

這里要排除一些特殊情況，比如券商的產(chǎn)品，用戶打開APP考慮要不要滿倉買入，這種情況的思考不屬于產(chǎn)品層面帶來的思考。同樣的case，以券商的產(chǎn)品舉例，如果用戶下定決心今天滿倉，但是發(fā)現(xiàn)使用的券商App找不到買入入口，花了很長時(shí)間思考、摸索才完成買入，那這個(gè)產(chǎn)品一定會(huì)讓用戶非常嫌棄，甚至換一個(gè)券商。

我翻了翻手機(jī)里的App，選了幾個(gè)大家可以感受一下使用起來是否需要思考。

微信讀書，下廚房。啟動(dòng)App，首頁就是搜索欄，要看什么書，想做什么菜，通過搜索直接滿足用戶需求，整個(gè)環(huán)節(jié)不超過三步，幾乎不需要用戶去思考；抖音，更加簡單粗暴的例子。毫無學(xué)習(xí)成本的App，點(diǎn)開就開始刷，一步到位。這種交互是非常容易觸達(dá)到用戶爽點(diǎn)的。

仔細(xì)想一下，這些和讓用戶即時(shí)滿足有一點(diǎn)類似。上述舉例的產(chǎn)品功能相對(duì)簡單單一，可以從功能上就做到不讓用戶思考，對(duì)于復(fù)雜一些的產(chǎn)品，會(huì)從按鈕設(shè)計(jì)，UI設(shè)計(jì)上減少用戶思考的情況。

比如SaaS產(chǎn)品的注冊(cè)頁面，是不是可以做到讓用戶盡量少填寫內(nèi)容，提前錄入好企業(yè)用戶的信息，企業(yè)員工注冊(cè)時(shí)候，輸入工號(hào)就可以彈出員工的信息；比如頁面按鈕擺放的位置，關(guān)鍵按鈕的形狀和樣式是否突出，按鈕的提示是否明確。

按鈕設(shè)計(jì)對(duì)比

給一個(gè)平時(shí)工作的例子，上面是產(chǎn)品的設(shè)計(jì)，下面是UX同學(xué)改過之后的。第一個(gè)設(shè)計(jì)，從用戶視角來看，開關(guān)控件關(guān)閉代表的是隱藏還是不隱藏，需要用戶思考揣摩。而在第二個(gè)設(shè)計(jì)，加上了文字說明，就可以瞬間消除用戶的疑惑，避免了用戶思考。

二、萬不得已，讓用戶線性思考

我們剛聊到的一些產(chǎn)品功能相對(duì)簡單，如果提升一些產(chǎn)品復(fù)雜度，可能就沒法做到不讓用戶思考了，那可以考慮讓用戶線性思考。線性思考，是指思考過程有一根主線，產(chǎn)品做到讓用戶線性思考，用戶能夠更容易理解產(chǎn)品。

其實(shí)這和我們平時(shí)用思維導(dǎo)圖的初衷一樣，如果是一個(gè)“蜘蛛網(wǎng)導(dǎo)圖”，相信你肯定腦子很混亂。而我們常用的思維導(dǎo)圖，基于一個(gè)點(diǎn)去蔓延到一條線，再蔓延到多條線，這符合人腦的思考方式，也更容易記住。我們下面看一下線性思考和網(wǎng)狀思考。

思維導(dǎo)圖的線性思考

蜘蛛網(wǎng)圖的網(wǎng)狀思考

上面兩張圖是說一樣的內(nèi)容，但是當(dāng)你腦海里是網(wǎng)狀的認(rèn)知，你是沒辦法掌握全局的。而如果用思維導(dǎo)圖輔助思考，將網(wǎng)狀的內(nèi)容變成線性，由一個(gè)點(diǎn)去發(fā)散，我們就會(huì)更好的理解現(xiàn)狀，這也是思維導(dǎo)圖的作用。

回到產(chǎn)品設(shè)計(jì)，比如電商產(chǎn)品的設(shè)計(jì)，淘寶、拼多多、京東。產(chǎn)品本身的功能是相對(duì)復(fù)雜的，商城里的單品也非常多。

京東首頁，菜單欄

大家可以設(shè)想一下，假設(shè)電商產(chǎn)品菜單欄不分類也沒有搜素會(huì)怎樣？用戶體驗(yàn)一定只有兩個(gè)字，極差。所以產(chǎn)品里的分類引導(dǎo)，其實(shí)就是在給用戶提供用于思考的那根線。

三、無法做到前兩條的情況，設(shè)計(jì)教程輔助用戶思考

產(chǎn)品根據(jù)自身的屬性不同，上手難易程度也天差地別。對(duì)于上手難度很高的產(chǎn)品，免不了出現(xiàn)要用戶深度思考的情況。為了應(yīng)對(duì)這類情況，產(chǎn)品的交互上也有解決方案。

大家第一次打開墨刀的時(shí)候，一定會(huì)注意到有很多Tips告訴你這一步的功能是什么，下一步應(yīng)該做什么。像墨刀這類產(chǎn)品有比較強(qiáng)的工具屬性。這類產(chǎn)品的產(chǎn)品設(shè)計(jì)過程中，除了要提供產(chǎn)品給用戶，一定要附帶提供的就是產(chǎn)品說明書了。

outsystems啟動(dòng)引導(dǎo)

上面是國際低代碼工具龍頭公司outSystems的產(chǎn)品，坦白說，這個(gè)產(chǎn)品真的上手難度很高，所以可以看到他們提供了非常細(xì)致的操作引導(dǎo)，同時(shí)提供了很多公開課教用戶如何用outSystems搭建應(yīng)用。這部分很值得國內(nèi)的一些同類產(chǎn)品學(xué)習(xí)。

對(duì)于復(fù)雜的產(chǎn)品，用戶打開產(chǎn)品的一刻，就像處于一個(gè)完全陌生的空間，完全失去了方向感，這種用戶體驗(yàn)本身是非常糟糕的。所以提供引導(dǎo)就像虛擬空間里的指路牌，幫助用戶逐漸清晰的找回新產(chǎn)品空間里的所在位置。

四、為掃描設(shè)計(jì)，不為閱讀設(shè)計(jì)

產(chǎn)品設(shè)計(jì)的時(shí)候也要考慮到，用戶通常非常忙。不會(huì)有時(shí)間和耐心去閱讀有大量文字的頁面。而且用戶們也默認(rèn)知道，不看完頁面所有內(nèi)容并不會(huì)有嚴(yán)重的影響，大家都學(xué)會(huì)了跳躍式的閱讀。

就像一篇論文會(huì)有標(biāo)題、小標(biāo)題、引言、摘要、正文、結(jié)尾這些組成，我們通過標(biāo)題，引言，摘要，結(jié)尾論斷就能大概知道，這篇文章所寫的內(nèi)容是不是我需要的，應(yīng)不應(yīng)該花時(shí)間仔細(xì)閱讀。

在產(chǎn)品設(shè)計(jì)的時(shí)候也是一樣，你見過產(chǎn)品打開就是滿頁的免責(zé)聲明的設(shè)計(jì)么？必要的大段文字是不是大部分都是很小的入口。

用戶通常是點(diǎn)開頁面飛快的掃描關(guān)鍵信息，你可以回想一下，你刷知乎的姿勢是怎樣的？

一種方式是：目標(biāo)明確的進(jìn)去搜索。找到自己想要的答案；另一種方式是：在推薦欄里不停的滑動(dòng)，滑到有意思的標(biāo)題停下來，點(diǎn)進(jìn)去。

所以，一旦知道這個(gè)原則，再回過頭看知乎的設(shè)計(jì)。知乎的回答內(nèi)容是折疊一部分，并把標(biāo)題和回答者簡介突出。在一個(gè)頁面上，你快速掃描的時(shí)候，也就能看清4到 5個(gè)標(biāo)題回答，以及各個(gè)回答的作者。

五、設(shè)計(jì)搜索框很重要

我們?cè)谥醯睦永镎f到，用戶刷知乎的時(shí)候兩種姿勢。一種是搜索，一種是無目的滑頁面。這個(gè)映射到現(xiàn)實(shí)世界里，刷知乎就像逛商場。無目的滑頁面就像在商場里閑逛，而在知乎里搜索，就像在商場里找服務(wù)人員直接詢問某個(gè)店在哪個(gè)位置。

那么如果商場一個(gè)服務(wù)人員都沒有的話，是不是很可能會(huì)流失一些客戶。同樣，在產(chǎn)品里，沒有搜索的話，用戶帶著明確目的打開產(chǎn)品，會(huì)花很長時(shí)間也不見得達(dá)到他目的。消磨用戶的時(shí)間和耐心可不是個(gè)好現(xiàn)象。

六、在已有的用戶習(xí)慣上謹(jǐn)慎創(chuàng)新

在產(chǎn)品的使用過程中，會(huì)有非常多的習(xí)慣用法。比如搜索欄的標(biāo)志是一個(gè)放大鏡，比如微軟Office的撤銷快捷鍵是Ctrl+Z，比如關(guān)閉按鈕一般在頁面右上角等等。

習(xí)慣能夠成為習(xí)慣，一定有背后的邏輯。不好用的習(xí)慣可能在演進(jìn)的過程中就已經(jīng)消失了。而要改變一個(gè)積累了很久才形成的習(xí)慣，一定是要付出非常大的能量。就像衛(wèi)星在既定軌道繞地球運(yùn)轉(zhuǎn)，他是不怎么耗能的，但是如果需要他換一個(gè)對(duì)地軌道，那需要的能量可就非常大了。

你可以試想一下，一款產(chǎn)品，搜索欄標(biāo)志是一顆衛(wèi)星，撤銷的快捷鍵是Ctrl+V，頁面關(guān)閉的按鈕在左下角。是不是用起來會(huì)想摔電腦。

七、體系的思考增刪改查

這一點(diǎn)B端產(chǎn)品會(huì)接觸的多一些，在對(duì)表單進(jìn)行設(shè)計(jì)的時(shí)候，需要有整體考慮的思維。我們?cè)谡f麥肯錫的互相獨(dú)立，完全窮盡的時(shí)候，會(huì)談到把功能盡可能細(xì)分，達(dá)到功能和功能之間完全獨(dú)立。

但是有拆分的能力也要有統(tǒng)一的能力，否則就會(huì)出現(xiàn)，設(shè)計(jì)了增加按鈕，但是沒設(shè)計(jì)刪除按鈕，設(shè)計(jì)了刪除按鈕，沒設(shè)計(jì)修改按鈕等等。表單里的增刪改查，在設(shè)計(jì)上其實(shí)是統(tǒng)一考慮的。

這一點(diǎn)是從研發(fā)小伙伴身上學(xué)習(xí)的，他們的視角里所有的功能都會(huì)變成一行一行的代碼實(shí)現(xiàn)，當(dāng)發(fā)現(xiàn)有一個(gè)地方代碼實(shí)現(xiàn)起來有漏洞了，他們會(huì)反推功能是不是夠完整，不夠全面。經(jīng)常會(huì)提很多Corner Case給到產(chǎn)品。

久而久之，對(duì)于一個(gè)模塊，體系地思考其功能再進(jìn)行設(shè)計(jì)，就成為了一種習(xí)慣。設(shè)計(jì)增加的時(shí)候，是不是一定會(huì)想到刪除應(yīng)該怎么刪，刪除之后現(xiàn)有表單的數(shù)據(jù)應(yīng)該怎么處理，修改數(shù)據(jù)允許改動(dòng)哪些，是改字段類型，還是改表里的值？

產(chǎn)品交互確實(shí)是一個(gè)非常難的學(xué)問，可能涉及到心理學(xué)，傳播學(xué)等等知識(shí)?，F(xiàn)在市場上產(chǎn)品設(shè)計(jì)的時(shí)候可以參考的依據(jù)是非常多的，那么在對(duì)優(yōu)秀產(chǎn)品的學(xué)習(xí)中，我們借鑒他們?cè)O(shè)計(jì)的同時(shí)，也應(yīng)該能夠知道他們?cè)O(shè)計(jì)背后的邏輯。

也許背后邏輯會(huì)映射到今天總結(jié)的一些原則里，也許有那些優(yōu)秀產(chǎn)品經(jīng)理自身更獨(dú)特的思考。但是我們要知道的是，在設(shè)計(jì)產(chǎn)品交互的時(shí)候，是能夠有一套方法論去指導(dǎo)我們?cè)O(shè)計(jì)的。這套方法論也不會(huì)違背創(chuàng)新。

斯坦福大學(xué)最受歡迎的創(chuàng)意課里提到，創(chuàng)新是可以由一套規(guī)則批量創(chuàng)造的。那在我們?nèi)粘ＴO(shè)計(jì)產(chǎn)品的之后，熟悉交互設(shè)計(jì)的方法論，相信也會(huì)在其中找到屬于自己的創(chuàng)新。

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

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