7條交互設(shè)計(jì)原則,和你一起重新設(shè)計(jì)產(chǎn)品!

0 評(píng)論 11709 瀏覽 37 收藏 14 分鐘

編輯導(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)鍵按鈕的形狀和樣式是否突出,按鈕的提示是否明確。

7條交互設(shè)計(jì)原則,和你一起重新設(shè)計(jì)產(chǎ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)狀思考。

7條交互設(shè)計(jì)原則,和你一起重新設(shè)計(jì)產(chǎn)品!

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

7條交互設(shè)計(jì)原則,和你一起重新設(shè)計(jì)產(chǎn)品!

蜘蛛網(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ù)雜的,商城里的單品也非常多。

7條交互設(shè)計(jì)原則,和你一起重新設(shè)計(jì)產(chǎn)品!

京東首頁,菜單欄

大家可以設(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)品說明書了。

7條交互設(shè)計(jì)原則,和你一起重新設(shè)計(jì)產(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)粘TO(shè)計(jì)產(chǎn)品的之后,熟悉交互設(shè)計(jì)的方法論,相信也會(huì)在其中找到屬于自己的創(chuàng)新。

 

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

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!