前言
提到交互設(shè)計,很多人可能覺得它是設(shè)計師的活,跟我們產(chǎn)品無甚關(guān)系。實際上在設(shè)計原型的過程中,我們已經(jīng)無形地將交互考慮進去了,這無可避免,畢竟產(chǎn)品是我們的娃,他長成啥樣我們得上心。遵從一些交互設(shè)計原則,這樣使得我們的產(chǎn)品設(shè)計更加規(guī)范,也更少和UI小姐姐(也可能是giegie)吵架哦。
交互設(shè)計是什么?
在設(shè)計部門我們經(jīng)常聽到UID、UED、IxD,那他們分別代表什么呢?
UID: User Interface Design 用戶界面設(shè)計
就是我們常說的UI,廣義來說UI設(shè)計會包含交互設(shè)計,和一些動效設(shè)計。不過現(xiàn)在拆分得比較細的崗位,會有專人來只設(shè)計用戶界面,就是考量怎樣將界面設(shè)計得漂亮,易用。
UED: User Experience Design 用戶體驗設(shè)計
用戶體驗是個人主觀感受,但是共性的體驗是可以經(jīng)由良好的設(shè)計提升的,用戶體驗設(shè)計旨在提升用戶使用產(chǎn)品的體驗。
IxD:Interaction design 交互設(shè)計
交互設(shè)計的對象主要是人機界面,是人和機器互動的過程。交互設(shè)計需要了解人的心理、行為、使用目標和期望。不僅設(shè)計界面,還要使流程清楚,使得產(chǎn)品的易用性更好。
交互設(shè)計原則
1. 一致性原則
之所以將一致性放在最前面來寫,因為它是你還未開始設(shè)計時就應(yīng)該定下的風(fēng)格,是產(chǎn)品的調(diào)性。不僅是設(shè)計上的,包括運營推廣,都應(yīng)該遵從一致性,是你產(chǎn)品的基因。
一致性可以給我們帶來的好處:
- 外部:降低用戶學(xué)習(xí)成本,給用戶樹立品牌形象,增強易用性。
- 內(nèi)部:資源復(fù)用性更高,提高工作效率,也能確保大家朝著一個方向發(fā)力。
本文既然是交互設(shè)計,那么在交互設(shè)計上從哪些方面可以做到一致性呢?
- 視覺:配色、字體、圖標、頁面布局、插畫、操作流程
- 交互:頁面加載、動畫專場、人機交互反應(yīng)
來看個大廠的例子:
**網(wǎng)盤


整體界面風(fēng)格清新簡潔,icon和按鈕配色圓角規(guī)范,讓人一看就知道是一個系列的產(chǎn)品。
2. 界面清晰
2.1 信噪比
來源于通信,指一個電子設(shè)備在一個電子系統(tǒng)中,信號與噪聲的比例。通常,信噪比越大,表示噪聲混在信號中的比例越小,聲音越清晰。
對應(yīng)到設(shè)計中,信號就是重要信息,噪聲則是干擾項即不重要信息。提高重要信息占比,突出重點,能幫助用戶快速定位有效信息。
2.2 幾何法則
在界面設(shè)計中,我們通常遵從幾何規(guī)律,任何控件,都有其相關(guān)的幾何形象。

在幾何形中,識別的符合大致為:圓形≈矩形≤凸多邊形<凹多邊形。
2.3 臨近性原則
彼此靠近的元素傾向于被視為一個組。

這樣的布局我們就可以簡單分組,頂部導(dǎo)航欄、二級導(dǎo)航欄、歌單、廣告等。
在設(shè)計時,適當(dāng)對元素進行分組,使得界面清晰有規(guī)律。
2.4 相似性原則
(1)相似的元素被認為是一個組。
圖片已刪除
功能相同的商品卡片,樣式都一樣,上圖下文。如果每一個商品的卡片有上文下圖,上圖下文,左圖右文,瀏覽起來就很困難。因此一個模塊的樣式應(yīng)該是一種風(fēng)格。
(2)但需要注意的是,相似并不等于高度重復(fù)。
如在一些文字類APP中,使用高度重復(fù)的樣式,會增加閱讀的壓力,可讀性很差。

(3)異常突出,表示不同
那么反面來說,相似性被歸為一個組,那么需要突出某個元素,就是讓他脫離這個相似性。如激活的顏色,一般與周圍不相同,引起用戶注意。

2.5 米勒定律
我愿稱之為“組塊”定律,這個定律講的是在短時記憶中,人平均只能記憶7 (±2) 個項目;即:人們最多只能夠記住 7(±2) 個項目組成的一組。
(1)入口的選項不超過9個
-
頂部或底部的tab
在IOS官方建議中,一行tabbar最多只有5個。
米勒定律的影響
手機的收藏夾也遵從著這樣的設(shè)計

(2)信息組塊處理
有些文字信息,如地址、銀行卡號、電話號碼這類比較長的,需要進行分塊組合。

(3)選項分塊
常見在個人中心或者下拉菜單中有許多操作,如果不分塊,就是以下這樣:

分塊的選項:

2.6 費茨定律
與操作難度有關(guān),定律中有三個關(guān)鍵參數(shù),時間、距離、大小。任意一點移動到目標位置所需要的時間,與目標距離正相關(guān),距離越長所需時間越長,與目標大小負相關(guān),體積越大越寬所需時間越短。


在這類地圖應(yīng)用中,搜索和選項都集中在底部靠近手的好操作的位置。
2.7 奧卡姆剃刀定律
定律的內(nèi)容是:如無必要,勿增實體。
本意是刪繁就簡,剔除界面中誤用的雜項,或者把一些項收起來。
比較著名的例子是iPhone的設(shè)計,最開始時iPhone是有一個Home鍵實體的,后來把這個實體也拿掉了,通過手勢來控制回到主頁的操作,后來許多手機廠商都使用了這樣的設(shè)計。
2.8 系列位置效應(yīng)
用戶更容易記住系列中的出現(xiàn)的第一項 (首因效應(yīng)) 和最后一項 (近因效應(yīng))。
這讓我想起了上學(xué)的時候,老師總讓我們早上起來讀書,晚上睡前復(fù)習(xí)。因為早上起來沒有前置影響,睡前沒有后置影響。當(dāng)然,這和首因效應(yīng)或者近因效應(yīng)也許無關(guān),就是想到了隨口一提。
有個例子,在大多數(shù)網(wǎng)頁和APP的設(shè)計中,logo總是放在第一屏,最左邊的位置,比如簡書的logo:

正是對首因效應(yīng)的運用。
再比如近因效應(yīng),文章看到這,你不一定記得中間講了什么內(nèi)容,但你一定知道剛剛那點講的是首因效應(yīng),因為你最后看到的是它,如果記不住,那當(dāng)我沒說。
3. 讓用戶少思考
3.1 席克定律
簡單來說就是讓選擇更少,它具有數(shù)量和時間兩個參數(shù),當(dāng)面臨的選項越多,需要作出決策的時間就越長。
幫助用戶精簡選擇,減少用戶的反應(yīng)時間。一個最明顯的變化就是遙控器,曾幾何時,我們的遙控器還是布滿了各種功能鍵,現(xiàn)在已經(jīng)精簡到只有一些基本的操作。



3.2 易學(xué)性
功能簡單易用,用戶群體可以快速上手。
如果具有一定專業(yè)性,則需要做新手教程,確保新用戶來有地方下手。
3.3 符合用戶操作習(xí)慣
有些時候說起來有點抽象,比如一個產(chǎn)品剛設(shè)計時怎么能夠知道用戶習(xí)慣呢?如果行業(yè)已經(jīng)成熟,是會有成熟的競品的,參考他們的操作習(xí)慣即可。
或者參考實物操作,如現(xiàn)實中轉(zhuǎn)轉(zhuǎn)盤是先用手轉(zhuǎn)動轉(zhuǎn)盤,指針會停在某一格,那設(shè)計時就需要一個觸發(fā)轉(zhuǎn)動的按鈕和一個指針。
3.4 使用用戶能懂的詞
我們在思考時,可能站在自己的角度上,覺得自己能懂某些用詞,但是用戶可能根本不理解意思。
避免使用專業(yè)用詞在系統(tǒng)中,使用更加簡單易懂的詞,用戶使用起來會更加簡單。
3.5 步驟提示,減少焦慮
為了讓用戶對自己的行為有個預(yù)期,將需要進行的步驟展示出來是有必要的。最初的設(shè)計許多要填寫的信息都在一個步驟里面,看著密密麻麻的輸入框,瞬間喪失繼續(xù)下去的動力。將步驟拆分后,每個步驟都只需要填寫部分信息。

說句題外話,如果哪個不是必須用的C端有這么多步驟,用戶早不知道在哪步就流失了。
4. 掌握
用戶在使用產(chǎn)品時,分為主導(dǎo)型和被動引導(dǎo)型,不管是哪種類型,都需要讓用戶感受到產(chǎn)品是在自己的操作掌握中。
4.1 及時有效的反饋
用戶在產(chǎn)品中的操作是一個流程,從上一個流程到下一個流程,每個流程都有狀態(tài)。用戶需要知道自己的操作狀態(tài),上一個操作有沒有成功,當(dāng)前正在做什么,接下來要做什么。
簡單舉一個例子:

在提交按鈕中,不同狀態(tài)下給用戶的反饋不同,讓用戶知道自己的操作結(jié)果如何。
4.2 避免干擾和打斷
看到干擾和打斷,我總想起無數(shù)的彈窗,或者浮動窗口,小氣泡之類的。每當(dāng)我正開心地瀏覽時,突然一個誘導(dǎo)彈窗彈出,我又不小心點擊了,此時我就會問候產(chǎn)品經(jīng)理。
當(dāng)然,很多營銷手段要靠這樣的彈窗達成,但我個人不喜歡這樣的設(shè)計,對用戶的體驗太不友好了。
4.3 容錯
生活中經(jīng)常沒有后悔藥可以吃,但是在產(chǎn)品中,可以滿足這樣的想象。好了扯遠了,那么在產(chǎn)品中容錯主要需要做到“預(yù)防”+“撤銷”,即可提升產(chǎn)品的容錯率,給用戶一種包容性很強的感覺。
(1)預(yù)防
在一些重要步驟之前,給出二次,或者反復(fù)提示。比如,支付,我們一般都會要求安全驗證和身份認證以確保用戶真實支付意愿和支付安全。類似的二次操作還有,修改、刪除等。
(2)撤銷
在有一些操作為了減少用戶操作麻煩,或者這個操作本身就不重要,沒有進行二次確認。用戶可能會誤操作,那么此時,就需要給用戶提供“后悔”的選項,比如撤銷。這類場景經(jīng)常用在,取消收藏,如一個用戶將一篇文章誤取消收藏了,會有一行小toast提示,并附帶撤銷操作,讓用戶方便地回退。

寫在最后
在產(chǎn)品經(jīng)理生涯中,最開始,我們常拘泥于設(shè)計細節(jié),認為自己可以創(chuàng)造出獨一無二的交互,甚至不屑參考別人的設(shè)計,認為那是抄襲。但是最后用戶可能并不買賬,因為他們已經(jīng)習(xí)慣了大眾的操作。大多數(shù)的設(shè)計都是服從用戶,當(dāng)然也有敢為人先的設(shè)計,他們創(chuàng)造了用戶習(xí)慣!
說這么多,其實想引用一句話,譽為交互設(shè)計之父的阿蘭·庫珀(Alan cooper)說過的:除非有更好的選擇,否則就遵從標準。這些被前人總結(jié)出來的定律,或者經(jīng)驗,都將成為我們的基礎(chǔ)儲備,在以后的設(shè)計中融會貫通。

參考文檔
http://www.woshipm.com/ucd/4838200.html
http://www.woshipm.com/pd/4449756.html
https://www.zhihu.com/question/19812118
http://www.woshipm.com/pd/4505156.html
