很多沒(méi)有接觸過(guò)交互體驗(yàn)的設(shè)計(jì)師小伙伴們,總有會(huì)面臨一個(gè)坎,那就是看別人做交互和體驗(yàn)的方案總是特別簡(jiǎn)單,一個(gè)流程或原型別人做出來(lái)之后,我們心里總會(huì)想,那不就是這樣嘛?換我也能做,但是只要自己一上手就不行了。
為什么?因?yàn)槲覀兛偸?strong style="outline:0px;margin:0px;padding:0px;">看著別人的結(jié)果下結(jié)論,而忽略了中間的思考過(guò)程。
就好像是吃著別人做的番茄炒蛋,你會(huì)覺(jué)得不就是番茄和雞蛋一起炒一下,然后放點(diǎn)鹽和糖就好了嘛,我們只看到了結(jié)果,而忽略了對(duì)食材的選擇、處理、順序、結(jié)合。
1.示能
當(dāng)我們看到一個(gè)控件,你覺(jué)得它不就應(yīng)該在那里嘛,但輪到自己開(kāi)始做,就壓根想不到要去用那個(gè)控件,甚至是信息布局、流程節(jié)點(diǎn)、整體結(jié)構(gòu)都規(guī)劃不出來(lái)。不知道大家有沒(méi)有看上一篇原創(chuàng)文章結(jié)尾那個(gè)作業(yè),如果做過(guò)的小伙伴可以發(fā)我交流一下。傳送門(mén)--》
所以很多UI設(shè)計(jì)師覺(jué)得做純執(zhí)行的工作很沒(méi)有意思沒(méi)有價(jià)值。因?yàn)榉桨甘莿e人做好的,思考過(guò)程也是別人的,而商業(yè)設(shè)計(jì)師的核心是解決問(wèn)題,解決業(yè)務(wù)和用戶(hù)的問(wèn)題,既然解決問(wèn)題的角色都是UI的上游,那么UI設(shè)計(jì)如何體現(xiàn)價(jià)值呢?當(dāng)然就是把交互體驗(yàn)的核心底層概念搞懂,和交互設(shè)計(jì)一樣從設(shè)計(jì)側(cè)去思考問(wèn)題,賦能業(yè)務(wù)。
OK,那么來(lái)我們先來(lái)講:示能
1.1示能
心理學(xué)家吉普森將示能描述為:“關(guān)于有形物品如何傳達(dá)出人們與它們互動(dòng)的重要信息,這個(gè)特性被吉普森命名為“示能”。
用很直白的話來(lái)講,意思就是:事物通過(guò)自己外在的形態(tài),向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打開(kāi)的門(mén),告訴人們可以進(jìn)出、通過(guò)。一張椅子,人可以坐、可以靠。
假如,你面前有一扇門(mén),門(mén)上有一個(gè)把手,這扇門(mén)告訴我可以利用這個(gè)把手與我進(jìn)行互動(dòng),你可以用手、可以用腳,也可以用舌頭,但手是最方便的。如果只是單扇門(mén),那么我們可以利用推或者拉的動(dòng)作打開(kāi),但如果是兩扇門(mén)并排,兩個(gè)把手在中央靠近,那么這時(shí)候門(mén)展示出來(lái)的意思就是兩扇門(mén)都可以推或拉。但如果門(mén)把手在門(mén)的靠外兩側(cè),那么意思就變了,變成了將門(mén)側(cè)滑后才可以通過(guò)。
那門(mén)為什么要設(shè)計(jì)成不同樣式來(lái)展示不同示能呢?這個(gè)留給大家思考,這三種門(mén)設(shè)計(jì)的初衷是什么。
在我們數(shù)字產(chǎn)品中可以有什么體現(xiàn)呢?例如一個(gè)開(kāi)關(guān)控件(switch),開(kāi)關(guān)本身具有兩種互斥的屬性和功能:開(kāi)/關(guān)、啟動(dòng)/禁用,看到開(kāi)關(guān)控件的外在樣式,我們可以判斷當(dāng)前開(kāi)關(guān)所屬模塊以及意符指示內(nèi)容的狀態(tài)是屬于打開(kāi)還是關(guān)閉。
開(kāi)關(guān)在現(xiàn)實(shí)生活中的表現(xiàn)樣式有很多,例如一側(cè)翹起的開(kāi)關(guān)、可以撥動(dòng)的開(kāi)關(guān)、具有段落的按壓開(kāi)關(guān)、分型控制的開(kāi)關(guān)、旋鈕開(kāi)關(guān)等
大家別看開(kāi)關(guān)看起來(lái)簡(jiǎn)單,但是在設(shè)計(jì)起來(lái)會(huì)遇到不少的問(wèn)題,因?yàn)?strong style="outline:0px;margin:0px;padding:0px;">狀態(tài)和意符形態(tài)在我們?nèi)粘V羞^(guò)中很難成為一個(gè)標(biāo)準(zhǔn),例如最常見(jiàn)的一側(cè)翹起的開(kāi)關(guān),如果不加意符,我們不知道讓哪邊翹起才是開(kāi)/關(guān)。如果你的房間就一盞燈,那么很簡(jiǎn)單,我閉著眼睛去按就行了,燈滅著那肯定就是關(guān),再按一下那就是開(kāi)。但如果在客廳中有多個(gè)并聯(lián)的開(kāi)關(guān)怎么辦,一個(gè)燈可能收到2處甚至3處開(kāi)關(guān)的控制,而每處開(kāi)關(guān)的數(shù)量會(huì)在3-5個(gè),這個(gè)時(shí)候不用意符去標(biāo)識(shí),就很麻煩了。
回到數(shù)字產(chǎn)品上,開(kāi)關(guān)的示能就簡(jiǎn)單多了,有顏色的狀態(tài)表示開(kāi),灰色狀態(tài)表示關(guān),但是開(kāi)關(guān)控件在剛用在數(shù)字產(chǎn)品上的時(shí)候,很多人經(jīng)常誤以為是滑動(dòng)交互來(lái)控制開(kāi)關(guān),雖然滑動(dòng)也可以,但本身依靠更簡(jiǎn)單的點(diǎn)擊觸碰就可以了。但如果控件做的很長(zhǎng),那么滑動(dòng)的示能就會(huì)更明顯。
開(kāi)關(guān)比較讓人產(chǎn)生歧義的地方來(lái)自于意符,因?yàn)楹芏嘈氯藢⒁恍┛丶膶傩哉J(rèn)為是有重疊關(guān)系,可以混用的,那就大錯(cuò)特錯(cuò)了,等會(huì)講。
1.2.反示能
和示能相反,指的是任何物體之間不能進(jìn)行怎樣的互動(dòng)。
例如我們經(jīng)常做的人體工學(xué)椅,你可以靠坐在椅子上,并把手放在扶手上,但你無(wú)法在椅子上蹦跳,因?yàn)橐巫訜o(wú)法支撐劇烈晃動(dòng)。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設(shè)計(jì)師通過(guò)設(shè)計(jì)他的形狀、大小、材質(zhì),幫助我們?nèi)ナ⒎乓恍┬∥锛?,例如鑰匙、手機(jī)、卡片,但是筆記本電腦你塞不進(jìn)去,一頭豬更塞不進(jìn)去。
數(shù)字產(chǎn)品中也會(huì)遇到一些有很明顯反示能的控件,例如segment Controls(分段控件/分段選擇器/分段選擇控件),它是iOS的原生控件之一,該控件的反示能就是無(wú)法通過(guò)左右滑動(dòng)界面切換不同標(biāo)簽的視圖,和tab不同。
并且在該控件的描述中,seg通常數(shù)量只能在5個(gè)以?xún)?nèi),并且5個(gè)標(biāo)簽分別屬于同類(lèi)型的數(shù)據(jù)分割,只支持點(diǎn)擊切換。它不能展開(kāi)、不能滑動(dòng)、不能移動(dòng)、不能懸浮、不能進(jìn)入二級(jí)頁(yè)面也不能翻轉(zhuǎn)。
那有沒(méi)有一種可能,或者一個(gè)場(chǎng)景需要這兩種控件同時(shí)具備一些屬性呢?是有的,例如這樣
在標(biāo)簽下是列表,而列表也支持輕掃的交互進(jìn)行刪除,如果使用tab則會(huì)產(chǎn)生沖突,而使用seg則在視覺(jué)上太重了,和產(chǎn)品調(diào)性不符。那么我們可以在示能上做一些調(diào)整,讓這個(gè)控件看上去不能左右滑動(dòng),又不至于太繁瑣。
所以反示能將告訴我們,事物有哪些不具備的功能。同時(shí)反示能也是相對(duì)的,遇到多樣化的場(chǎng)景和業(yè)務(wù)需求時(shí),我們依然要學(xué)會(huì)變通。
1.3.不同場(chǎng)景中示能的變化
一張桌子放在教室中,我們知道它是用來(lái)學(xué)習(xí)的,桌面上可以放書(shū)本、筆等,如果一個(gè)桌子放在戶(hù)外,并且靠著墻壁,墻壁上有個(gè)洞,那么這個(gè)桌子當(dāng)前示能表示為什么呢?一個(gè)肌肉發(fā)達(dá)的男人在健身房秀肌肉大家紛紛羨慕,但是如果不穿上衣走在馬路上估計(jì)很多人會(huì)罵他變態(tài)。
下方圖標(biāo)+文字形式的一個(gè)按鈕,放在卡片的左側(cè)和右側(cè)大家感知一下,表現(xiàn)出來(lái)的示能有所區(qū)別。
左側(cè)更像是這個(gè)模塊的標(biāo)題,而放在右邊才能讓人覺(jué)得可點(diǎn)擊交互。如果覺(jué)得不夠明顯我們?cè)儆萌齻€(gè)點(diǎn)舉例,放在不同位置的3個(gè)點(diǎn)小圖標(biāo),所表達(dá)的示能相差巨大。再例如紅色在彈窗中顯示給人警示,但在活動(dòng)頁(yè)和價(jià)格數(shù)字上顯示則給人感覺(jué)熱鬧的氛圍和強(qiáng)烈的指引。
這就是不同場(chǎng)景中同樣事物表現(xiàn)出來(lái)的示能區(qū)別。所以設(shè)計(jì)師在設(shè)計(jì)方案的時(shí)候除了要將方案本身屬性表達(dá)正確以外,也要考慮到場(chǎng)景的影響。
1.4.相同示能的不同表現(xiàn)方式與含義
這里有一個(gè)概念叫做同構(gòu)異型,說(shuō)的是結(jié)構(gòu)相同,形式不同。例如我們經(jīng)常用到的tab與其視圖的呈現(xiàn),tab的本質(zhì)就是利用多個(gè)標(biāo)簽來(lái)切換標(biāo)簽下的視圖,所以標(biāo)簽除了用tab的形式,還可以用下拉展開(kāi)成為菜單的形式,只不過(guò)一個(gè)是平鋪,一個(gè)是點(diǎn)開(kāi)后再列表選擇。
再舉個(gè)例子,例如篩選控件,如果我們需要一個(gè)實(shí)時(shí)篩選的功能,那么我們一般會(huì)這么做,在b端web設(shè)計(jì)中,會(huì)將一系列篩選條件橫向擺放,每一個(gè)篩選條件都可以下拉展開(kāi)進(jìn)行篩選,但如果遷移到移動(dòng)端中,因?yàn)闄M向距離受阻,就會(huì)縱向標(biāo)簽展開(kāi)式的篩選模式,從結(jié)構(gòu)上來(lái)說(shuō),這倆方案其實(shí)是一樣的,都是在多個(gè)篩選條件中分別篩選出不同的標(biāo)簽。
再例如一個(gè)父子集共生的內(nèi)容卡片
同構(gòu)異形在設(shè)計(jì)樣式上會(huì)有很多種,例如列表,例如上文說(shuō)到的單控開(kāi)關(guān),雖然樣式很多,但原理上單控開(kāi)關(guān)都是一樣的。
對(duì)于初學(xué)者來(lái)說(shuō),不同控件理解的比較片面,所以就會(huì)導(dǎo)致一些控件的使用錯(cuò)誤。
說(shuō)到同構(gòu)異形那就不得不提到同形異構(gòu),例如一塊素牛肉,外觀和紅燒牛肉一樣,但是它是豆制品。我們?cè)賮?lái)看下面兩個(gè)模塊,根據(jù)整體來(lái)判斷,兩邊的加號(hào)都是反映出可以點(diǎn)擊添加的示能,但如果我們繼續(xù)考慮交互之后的邏輯和流程就會(huì)發(fā)現(xiàn)問(wèn)題所在了。前者添加的是標(biāo)簽,添加完后會(huì)顯示在相關(guān)的區(qū)域,添加按鈕不變。
這里可以用一個(gè)比較形象的比喻,我有4張椅子,其中3張坐了人,第四張椅子的示能為:只要這張椅子坐了人,邊上就會(huì)出現(xiàn)新的椅子,最多不超過(guò)8張,如果沒(méi)有人坐則只顯示一張椅子。
但第二個(gè)模塊中的添加按鈕結(jié)合整體來(lái)看是和其他內(nèi)容毫無(wú)相關(guān)的添加入口,就好像是第四張椅子上面坐的不是人而是套了一個(gè)大箱子,椅子不見(jiàn)了,原本應(yīng)該和其他內(nèi)容保持一致的外觀也不見(jiàn)了,出現(xiàn)了一個(gè)新的東西,出現(xiàn)了新的示能。所以如果我們要按照第一種規(guī)則玩,那么這里就不能套箱子,如果要放箱子,就需要放在其他的地方。
所以,初學(xué)者要警惕同型帶來(lái)的使用誤區(qū),有時(shí)候長(zhǎng)的很像的兩個(gè)人,可能完全沒(méi)有血緣關(guān)系。
小結(jié)
示能的概念大家已經(jīng)了解了,對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō),盡量去搞懂更多事物在不同場(chǎng)景中的示能和反示能,需要解決問(wèn)題的時(shí)候可以針對(duì)性的運(yùn)用各種方案。
2.意符
咱們上一篇講到了第一個(gè)概念:示能,如果忘了或者沒(méi)看的同學(xué)可以再去看一下。
今天我們要來(lái)講意符,意符在外面日常與事物的交互過(guò)程中,非常重要。
以下文字比較干,部分需要大家仔細(xì)閱讀動(dòng)腦,覺(jué)得難懂的小伙伴可以聯(lián)系我交流
2.1意符的類(lèi)型與表現(xiàn)形式
示能決定可能進(jìn)行哪些操作,意符則點(diǎn)明操作的位置以及如何操作。
設(shè)計(jì)師往往會(huì)說(shuō),我設(shè)計(jì)了一個(gè)很好的方案,它將告訴你產(chǎn)品的用途,但是用戶(hù)卻不知所措,雖然知道產(chǎn)品就在那里,但無(wú)法下手,因?yàn)?/strong>意符不明確。例如我們最常用的人體工學(xué)椅,可以調(diào)節(jié)高低和后仰角度,調(diào)節(jié)的控制器是兩個(gè)把柄。如果沒(méi)有意符加入,我們經(jīng)常會(huì)記不清哪一個(gè)控制器控制的是后仰角度,哪一個(gè)控制的是座椅高度,需要去做更多的嘗試。
所以意符告訴我們對(duì)事物的正確操作方式以及任何可感知的標(biāo)識(shí)。說(shuō)白了就是一個(gè)能夠表達(dá)事物具體操作的符號(hào)。
大家還記得上一篇文章舉的一個(gè)門(mén)的例子嗎?在日常生活中,雙開(kāi)門(mén)通常在商場(chǎng)、大型會(huì)議場(chǎng)館內(nèi)看見(jiàn),因?yàn)榭紤]到人流量比較多,于是在門(mén)上就會(huì)出現(xiàn)推/拉兩個(gè)文字意符,避免兩側(cè)的人同時(shí)推或者拉,引導(dǎo)人們正確通行。我們可以使用推/拉,但不可以用“按”,因?yàn)槲覀儫o(wú)法通過(guò)“按”的交互來(lái)操控門(mén)的開(kāi)關(guān)。
如何判斷一個(gè)設(shè)計(jì)是否優(yōu)秀,那么我們會(huì)觀察其本身的示能和意符傳達(dá)是否自然,如果意符表現(xiàn)的太過(guò)刻意或者畫(huà)蛇添足那就是很糟糕的設(shè)計(jì),例如在兩扇透明的玻璃門(mén)上再添加推/拉的標(biāo)識(shí),就顯得有點(diǎn)多余了。再例如切換短視頻和翻頁(yè)電子小說(shuō),我們不會(huì)用一個(gè)翻頁(yè)按鈕而是通過(guò)滑動(dòng)來(lái)手勢(shì)切換。當(dāng)我們將內(nèi)容設(shè)計(jì)全屏的時(shí)候就要考慮到當(dāng)下示能的含義,所以就不要畫(huà)蛇添足。
OK,它的表意大家已經(jīng)清楚了,那么在數(shù)字產(chǎn)品中,意符有哪些類(lèi)型和作用呢?它們又可以幫助用戶(hù)解決什么問(wèn)題,我們來(lái)看一看。
意符的類(lèi)型
1.文字
文字意符是最常見(jiàn)的一種類(lèi)型,利用文字描述來(lái)說(shuō)明如何進(jìn)行交互操作,但是中文文字博大精深,不同的描述給人的理解和感受完全不同。
案例1:開(kāi)關(guān)
開(kāi)關(guān)控件單獨(dú)拎出來(lái)不具備完整的含義,必須在相應(yīng)的場(chǎng)景中。例如我們?cè)谕ㄖ?、設(shè)置的場(chǎng)景中經(jīng)常會(huì)用到開(kāi)關(guān),并且需要相應(yīng)的文字描述來(lái)解釋開(kāi)關(guān)控制的內(nèi)容是什么。
這里的文字就是意符,用來(lái)解釋開(kāi)關(guān)的作用。
開(kāi)關(guān)本身具備的含義中是有這樣兩條原則:
1.需要讓用戶(hù)感知操作后立即生效
2.開(kāi)關(guān)所屬文本必須簡(jiǎn)單清晰無(wú)歧義
所以咱們可以看下方的案例。當(dāng)我們將文本描述為“不打開(kāi)(關(guān)閉)則不再進(jìn)行消息數(shù)字提醒”和“不接受推薦”后,會(huì)顯得開(kāi)關(guān)操作含義不明不直觀。正確方式應(yīng)該是正向且簡(jiǎn)單的描述,不要用雙重否定等描述方式。默認(rèn)描述為打開(kāi)后的狀態(tài)描述。
再來(lái)拓展一下,我們會(huì)發(fā)現(xiàn)其實(shí)依然還有產(chǎn)品中的開(kāi)關(guān)文字意符用了非正向描述,那按照你的說(shuō)法不就錯(cuò)了嗎?我們來(lái)看看小紅書(shū)和微信的權(quán)限開(kāi)關(guān),這里分別是隱私設(shè)置和權(quán)限設(shè)置。
這里理解起來(lái)會(huì)有點(diǎn)繞,大家看看能不能理解。首先“只允許我關(guān)注的人評(píng)論我”這是一個(gè)正向描述,沒(méi)有問(wèn)題,如果換成反向描述就會(huì)變成“不關(guān)注我的人不能評(píng)論我”,結(jié)合右側(cè)的開(kāi)關(guān),邏輯層面就要多加一個(gè)雙重否定的理解,所以這里的用正向沒(méi)有問(wèn)題。
接下來(lái)看下面的關(guān)系設(shè)置:不把我推薦給可能認(rèn)識(shí)的人,誒這里用了反向描述,大家來(lái)分析一下,這里是否合理呢?
首先小紅書(shū)在新下載應(yīng)用打開(kāi)時(shí)會(huì)向用戶(hù)進(jìn)行授權(quán),為了幫助用戶(hù)發(fā)現(xiàn)更多渠道的好友,所以默認(rèn)在協(xié)議中就會(huì)去微博、通訊錄里拉取好友的信息從而在瀏覽內(nèi)容的時(shí)候進(jìn)行更多好友的曝光和推薦,同時(shí)也會(huì)將我的信息推薦給認(rèn)識(shí)的人,這樣產(chǎn)品的活躍度、用戶(hù)的曝光會(huì)提升。
那么大家再來(lái)品一品這兩句話:1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄,后者則更主動(dòng),中國(guó)人的關(guān)系總體來(lái)說(shuō)就是比較含蓄的,就好像是你可以給我推薦,但我不會(huì)主動(dòng)要求,更何況像小紅書(shū)這樣的社交平臺(tái),“可能認(rèn)識(shí)的人”對(duì)我來(lái)說(shuō)價(jià)值并不是很大。所以我個(gè)人也覺(jué)得默認(rèn)不推薦比較好。
不知道這樣的說(shuō)法大家是否可以接受。再來(lái)看微信:不讓他看和不看他。微信這個(gè)平臺(tái)想必我不用多說(shuō),既然是熟人社交更多,那么默認(rèn)肯定是全部開(kāi)放,而有特殊需求才需要進(jìn)行隱私設(shè)置,所以默認(rèn)狀態(tài)為不讓他看-開(kāi)關(guān)關(guān)閉,意思是我沒(méi)有打開(kāi)這項(xiàng)非友好的選項(xiàng)。
那為什么會(huì)出現(xiàn)有的開(kāi)關(guān)默認(rèn)打開(kāi),有的開(kāi)關(guān)默認(rèn)關(guān)閉,還可以使用反向描述呢?我總結(jié)了下,如果涉及到一些隱私和權(quán)限的內(nèi)容,一般我們默認(rèn)為開(kāi)關(guān)關(guān)閉。但如果是為了用戶(hù)體驗(yàn)和效率考慮的內(nèi)容我們可以默認(rèn)為打開(kāi),例如視頻播放結(jié)束自動(dòng)播放下一個(gè)視頻這樣的設(shè)置。
開(kāi)關(guān)文字意符的描述方式還有幾種不同的方式:
1.內(nèi)容標(biāo)題+開(kāi)關(guān)切換后狀態(tài)與內(nèi)容變化的描述
第一種類(lèi)型也就是上方說(shuō)的案例,但是要注意的是,在描述狀態(tài)變化的時(shí)候,文本要正向、簡(jiǎn)單的描述,例如開(kāi)啟后,接收xxx消息,而不要寫(xiě)成關(guān)閉后,不接受xxx消息。
2.功能直接描述
不添加說(shuō)明文本,直接展示功能標(biāo)題,例如微信聽(tīng)筒模式、消息設(shè)置、提醒等,直接用開(kāi)關(guān)控制這些功能的打開(kāi)和關(guān)閉,屬于功能設(shè)置。還有一種是授權(quán),例如允許他人查看我的收藏,對(duì)他人行為的約束,但不能描述為不允許他人查看我的收藏,因?yàn)閯偛盼覀兛偨Y(jié)了,如果對(duì)于一些隱私權(quán)限的設(shè)置默認(rèn)需要關(guān)閉,那么加上正向描述就不能使用“不允許“。
3.批量整體描述
對(duì)于同一種類(lèi)型的功能設(shè)置,可以利用批量的形式做整體描述。
再來(lái)看一個(gè)例子,示能在不夠清晰的情況下,文本意符用來(lái)輔助對(duì)當(dāng)前內(nèi)容/狀態(tài)的解釋。
例如b站在瀏覽內(nèi)容的時(shí)候會(huì)出現(xiàn)“剛剛看到這里,點(diǎn)擊刷新”,或者當(dāng)我們?cè)跒g覽信息到一個(gè)頁(yè)面底部時(shí)發(fā)現(xiàn)無(wú)法繼續(xù)滑動(dòng),會(huì)出現(xiàn)一行文案:我是有底線的,說(shuō)明內(nèi)容全部展示完畢。
文字意符很直觀,但也要避免歧義。
2.圖形/圖標(biāo)
圖標(biāo)在某種程度上當(dāng)作意符使用的頻率會(huì)更高,雖然某些圖標(biāo)表意不明,但是因?yàn)楹?jiǎn)約、美觀、生動(dòng)、普適性強(qiáng)的原因,所以很多地方傾向于用圖標(biāo),例如公共衛(wèi)生間、商場(chǎng)的扶梯、通道,通常會(huì)用圖標(biāo)來(lái)代替文本,或者強(qiáng)圖標(biāo)+弱文本的形式。
既然咱們要說(shuō)圖標(biāo)意符,而且要突出圖標(biāo)意符的作用,那就必須有個(gè)前提,那就是拋開(kāi)其他的變量、因素的影響,圖標(biāo)意符究竟有什么神奇的魔力。
例如我們常用到的列表,很熟悉吧,接下來(lái)我將用圖標(biāo)來(lái)讓這個(gè)列表的示能產(chǎn)生變化
我們發(fā)現(xiàn),只有文本的列表,示能不明顯,而加上圖標(biāo)之后就很明確了,甚至加上不同的圖標(biāo),示能也隨之變化了呢?刷新、跳轉(zhuǎn)、展開(kāi)、移動(dòng)、選中、刪除、步進(jìn)、開(kāi)關(guān)、屏蔽、更多。但你不能用撐開(kāi)、向上展開(kāi)、旋轉(zhuǎn)、翻轉(zhuǎn)、折疊、回退等等。
這些其實(shí)是很簡(jiǎn)單和基礎(chǔ)的概念,但是很多工作多年的UI設(shè)計(jì)轉(zhuǎn)交互體驗(yàn)的小伙伴就經(jīng)常遇到這些問(wèn)題,大家總是在問(wèn)UI和交互的區(qū)別是什么,其實(shí)本質(zhì)上它倆都是一個(gè)界面設(shè)計(jì)師必備的能力,不能拆開(kāi)來(lái)談。
我們?cè)賮?lái)看一個(gè)例子,播放/暫停的圖標(biāo),用來(lái)控制音頻/視頻的播放與暫停,
在實(shí)體播放器上,我們能看到播放和暫停往往集成在一個(gè)按鈕上,例如天貓精靈、電視遙控器等。而在數(shù)字產(chǎn)品中播放與暫停并不會(huì)同時(shí)放在一個(gè)按鈕上,因?yàn)閿?shù)字產(chǎn)品的圖標(biāo)是可以變化的,當(dāng)前狀態(tài)和切換狀態(tài)可以有兩個(gè)不同的意符表示,那實(shí)體播放器做成兩個(gè)按鈕就太多余了。
還沒(méi)完,當(dāng)我們?cè)谟^看視頻的時(shí)候,界面中會(huì)顯示暫停按鈕,意思是點(diǎn)擊后播放中的視頻/音頻會(huì)暫停播放。也就是暫停圖標(biāo)展示的是點(diǎn)擊后的狀態(tài),而不是當(dāng)前狀態(tài)。但其他圖標(biāo)表示的意思卻又和開(kāi)關(guān)相反,例如橫豎屏切換、收藏、點(diǎn)贊,顯示的就是當(dāng)前狀態(tài),而非點(diǎn)擊后狀態(tài)。
為什么不一樣呢?因?yàn)闀和?播放相當(dāng)于一個(gè)按鈕,用來(lái)控制視頻播放,這里存在著一個(gè)控制和映射的關(guān)系,然而這里的暫停和播放按鈕的示能是相反的。
暫停圖標(biāo)的示能表示當(dāng)前正在播放,而播放圖標(biāo)的示能表示當(dāng)前已暫停。所以它和開(kāi)關(guān)也不同,開(kāi)就是開(kāi),關(guān)就是關(guān),點(diǎn)贊圖標(biāo)的原理就如同開(kāi)關(guān)。
還有例如打開(kāi)和關(guān)閉聲音,看起來(lái)聲音播放/靜音有點(diǎn)像視頻的暫停和播放。
例如騰訊視頻這里的視頻聲音控制,當(dāng)前靜音為聲音關(guān)閉圖標(biāo),而不是打開(kāi)后播放聲音的圖標(biāo),我們?cè)倏磇OS系統(tǒng)的里聲音控的樣式表現(xiàn),說(shuō)明當(dāng)前聲音為開(kāi)啟則顯示的是開(kāi)啟聲音的圖標(biāo),經(jīng)過(guò)交互控制后才會(huì)變成靜音的圖標(biāo)。所以聲音播放的控制和視頻播放的控制在圖標(biāo)意符的使用規(guī)則上并不統(tǒng)一。
那為什么會(huì)不一樣呢?其實(shí)我也看到過(guò)一些聲音圖標(biāo)和這個(gè)案例是反著來(lái)的。
兩個(gè)原因:
1.因?yàn)橐曨l的打開(kāi)和關(guān)閉只有兩個(gè)狀態(tài),但是聲音不同,聲音在打開(kāi)的時(shí)候還可以調(diào)節(jié)音量啊!如果和視頻播放一樣,在播放的狀態(tài)下顯示的是靜音的圖標(biāo),那么音量調(diào)節(jié)就會(huì)變成這樣:
是不是就很奇怪了,明明是正在播放的狀態(tài),顯示的居然是靜音的圖標(biāo)
2.暫停和播放的本質(zhì)并不是開(kāi)和關(guān),而是中斷和繼續(xù),在本質(zhì)上和開(kāi)關(guān)還是不一樣的。而靜音和播放的本質(zhì)就是對(duì)聲音的打開(kāi)和關(guān)閉,如果我在聲音邊上加一個(gè)開(kāi)關(guān)是不是就能弄清楚,為什么聲音控制器的圖標(biāo)意符就是當(dāng)前狀態(tài)而不是交互后的狀態(tài)。而視頻的播放和暫停并不是開(kāi)關(guān)。這下大家搞懂了嗎?
圖標(biāo)意符可以單獨(dú)使用也可以結(jié)合文字使用,圖標(biāo)雖然有優(yōu)點(diǎn),但也有缺點(diǎn),如果單獨(dú)使用也需要注意使用的場(chǎng)景,比如舉個(gè)例子,同樣是放在導(dǎo)航欄的兩個(gè)圖標(biāo),但是在不同的界面中,大家可以感知到該圖標(biāo)的含義嗎?它的示能和意符相結(jié)合成為了一個(gè)圖標(biāo),但不夠明確,在不同場(chǎng)景中如果沒(méi)有文字意符的輔助就會(huì)不夠明確。
圖形可以輔助表意,也可以用來(lái)指示區(qū)域,例如我們經(jīng)常開(kāi)車(chē),會(huì)知道馬路上會(huì)劃分實(shí)線、虛線、虛實(shí)線、潮汐車(chē)道線,示意車(chē)輛可以在哪些區(qū)域行駛、以及形式的規(guī)則。
我們?cè)卺t(yī)院拍胸片的時(shí)候,胸片機(jī)器下方也會(huì)指示人應(yīng)該站在什么位置,用一個(gè)方形的框框起來(lái),或者會(huì)顯示兩個(gè)腳印的圖形。在數(shù)字產(chǎn)品中圖形的指示區(qū)域也非常重要,例如我們?cè)O(shè)計(jì)一個(gè)按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在用戶(hù)的點(diǎn)擊感知上是不同的,后者的點(diǎn)擊信心會(huì)更大,有了區(qū)域的劃分就有了明確的操作界限。
3.顏色
顏色意符很好理解,通過(guò)色彩來(lái)表達(dá)如何與事物進(jìn)行交互以及輔助表達(dá)。
無(wú)論是實(shí)體產(chǎn)品或者數(shù)字產(chǎn)品中,警示的顏色大部分會(huì)用紅色或者橙色來(lái)表示,例如在進(jìn)行信息檢查時(shí),錯(cuò)誤信息會(huì)被用紅色樣式標(biāo)注出來(lái),既告知用戶(hù)出了什么問(wèn)題,又提示用戶(hù)在哪里出現(xiàn)問(wèn)題。
而需要熱鬧、活潑的氛圍也會(huì)采用紅色等暖色來(lái)襯托,因?yàn)榕拥男涯?。有時(shí)顏色也是物體示能的一部分,例如緊急逃生出口、公交車(chē)上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。
綠色表示安全、自然,但也有一些特殊場(chǎng)景下的不同感知,例如金融行業(yè)不太喜歡綠色,男士不太喜歡帽子使用這個(gè)顏色,除非你是比克大魔王?;疑珓t表示禁止、不可用、待激活等等。
在數(shù)字產(chǎn)品中,色彩除了表示一些特殊的含義,也可以用來(lái)作為信息區(qū)分,在選擇觀影位置的時(shí)候,可以利用色彩顯示不同區(qū)域位置的觀影體驗(yàn)和價(jià)格的區(qū)別。更多的色彩心理學(xué)和色彩的使用這里就不展開(kāi)了。
4.聲音
聲音意符就更有意思了,人們通過(guò)聽(tīng)聲音來(lái)辨別發(fā)生方位、響度、發(fā)聲物體以及聲音的音色、質(zhì)感。各種物體通過(guò)聲音來(lái)傳信息的方式也非常多樣,而我舉個(gè)例子,就能把大家?guī)Щ氐酵辍?
你們還記得以前在學(xué)校電腦教室里一個(gè)企鵝圖標(biāo)開(kāi)始閃爍嗎?一個(gè)咳嗽聲表示有人申請(qǐng)加你好友,一個(gè)敲擊木頭的聲音表示有人上線了,一個(gè)滴滴滴的聲音表示有新消息。還有在短視頻里經(jīng)常會(huì)用到的一種中斷音效:滴————。你們會(huì)發(fā)現(xiàn)我怎么能打出有聲音的文字,仿佛你們已經(jīng)在聽(tīng)了。
聲音為什么很重要,因?yàn)槿祟?lèi)的五感是在共同作用的,我們除了可以通過(guò)聲音來(lái)判斷事物本身,還可以用聲音來(lái)感知當(dāng)前行為的狀態(tài),例如打開(kāi)手機(jī)的鍵盤(pán)輸入音,這樣的打字反饋更真實(shí)更有質(zhì)感。
還有在游戲領(lǐng)域我們經(jīng)常會(huì)提到的打擊感,當(dāng)人物的武器打擊在怪物身上,但聲音并沒(méi)有及時(shí)反饋,而是延遲1秒,這時(shí)候你就會(huì)覺(jué)得沒(méi)有什么打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現(xiàn)動(dòng)作、擊打區(qū)域、擊打特效、動(dòng)效、傷害顯示、控制器反饋等等。
5.動(dòng)效
動(dòng)效也可以成為意符嗎?它能表示什么含義呢?動(dòng)效也是意符中非常重要的一種類(lèi)型,他在我們?nèi)粘I钪幸灿玫降姆浅6唷?
例如我們看到理發(fā)店門(mén)口正在旋轉(zhuǎn)的彩色燈。
這里也順便給大家講個(gè)小歷史,理發(fā)店彩燈的由來(lái):在中世紀(jì)歐洲,人們認(rèn)為放血療法對(duì)人的健康又很大的幫助,但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項(xiàng)工作交給了醫(yī)生,但是當(dāng)時(shí)的醫(yī)生不愿意做這種下等人做的事情,便委托理發(fā)師來(lái)做,于是理發(fā)師就成立了理發(fā)師外科醫(yī)師聯(lián)合會(huì),三色柱就是活動(dòng)的標(biāo)志,紅色代表動(dòng)脈、藍(lán)色代表靜脈、白色代表紗布。還有一種說(shuō)法是在法國(guó)大革命時(shí)期,一家理發(fā)店是革命黨人根據(jù)地,一次危險(xiǎn)的活動(dòng)中領(lǐng)導(dǎo)人在理發(fā)師的掩護(hù)下逃脫,最后為了表彰,允許他們用紅、白、藍(lán)三色的國(guó)旗作為標(biāo)注,最后演化成了旋轉(zhuǎn)燈,各國(guó)效仿。
好了,題外話說(shuō)完,我們?cè)倩氐絼?dòng)效。如果你看到三色燈正在旋轉(zhuǎn),說(shuō)明這家理發(fā)店正在營(yíng)業(yè),如果靜止則說(shuō)明停業(yè),或者壞了。是不是很簡(jiǎn)單?這就好像一個(gè)出軌的女人告訴情夫如果家里有人則陽(yáng)臺(tái)上放一盆菊花,家里沒(méi)人則放一盆綠蘿是一個(gè)道理。
那么在數(shù)字產(chǎn)品中,動(dòng)效意符還有哪些作用呢?我們一一來(lái)盤(pán)點(diǎn)一下:
1.降低用戶(hù)認(rèn)知成本
我們通過(guò)設(shè)計(jì)界面的轉(zhuǎn)場(chǎng)、控件的喚出動(dòng)效,告訴用戶(hù)你將從什么地方去往什么地方,和你有關(guān)的控件是從哪里來(lái),你可以怎么控制他。當(dāng)你進(jìn)行過(guò)交互行為后哪些內(nèi)容變化了,它們是怎么變化的。這就好像你等的45路公交車(chē)從遠(yuǎn)方朝你慢慢行駛過(guò)來(lái),停在你的面前并打開(kāi)了車(chē)門(mén),你選擇了上車(chē)然后看到阿姨捧著電飯鍋,拉動(dòng)氣門(mén),接著爆炸。而不是當(dāng)你站在原地直接爆炸。被紅姨的支配還宛如昨日。
所以一個(gè)好的動(dòng)效能讓你清楚事物的發(fā)展過(guò)程,以便于你更好的去理解。再例如我們?cè)谑褂灭I了么、美團(tuán)等應(yīng)用時(shí),添加菜品會(huì)有掉入外賣(mài)箱的動(dòng)效,這是一個(gè)非常好的動(dòng)效應(yīng)用。微信公眾號(hào)策劃將文章收起到浮窗也會(huì)有一個(gè)浮窗去向的引導(dǎo),告訴你雖然文章在收入交互動(dòng)作的結(jié)束是在右下角,但如果你想查看所有文章需要返回首頁(yè),在頁(yè)面的左上角才能找到。
2.引導(dǎo)/提示/強(qiáng)化
對(duì)于一些新人須知或者內(nèi)容隱藏的部分,產(chǎn)品通??梢酝ㄟ^(guò)一個(gè)小動(dòng)效來(lái)引導(dǎo)用戶(hù)這里有新內(nèi)容,例如淘寶二樓、印象筆記功能圖標(biāo)的切換、活動(dòng)入口等等
3.氛圍、強(qiáng)化視覺(jué)
電商、直播界面中,有非常多的元素都是利用動(dòng)效來(lái)刻畫(huà)氛圍和效果,刺激人們的感官。
4.表示狀態(tài)
當(dāng)你在手機(jī)解鎖的狀態(tài)下輸錯(cuò)密碼或者在氪金時(shí)輸錯(cuò)密碼,輸入框都會(huì)進(jìn)行左右晃動(dòng)來(lái)示意,老鐵,這真的不對(duì)。
5.更多意符
意符不局限于我列出的一些類(lèi)型,我再舉個(gè)例子,在一個(gè)不起眼的轉(zhuǎn)角處,那里空無(wú)一物,就是很普通的一塊空地,但如果那里被丟了一袋垃圾,那么這里就會(huì)出現(xiàn)越來(lái)越多的垃圾,因?yàn)榈谝淮褪且粋€(gè)意符,告訴別人這里可以丟垃圾,于是很多人就會(huì)把垃圾丟在這個(gè)角落里。
很多人會(huì)覺(jué)得示能和意符好難區(qū)分,示能不是也包含意符嗎,其實(shí)我們可以這樣理解,在整個(gè)交互過(guò)程中有物體和操作者這樣兩個(gè)對(duì)象,物體本身表達(dá)的是示能,但它不具備溝通能力,而意符才是鏈接操作者和物體兩者的橋梁,雖然我們平時(shí)往往看到的都是示能+意符的狀態(tài),但是我們也要區(qū)分本體的示能和用來(lái)溝通的意符兩者的區(qū)別。
小結(jié)
意符和示能不可分割,設(shè)計(jì)師們?cè)趯W(xué)習(xí)基礎(chǔ)概念的時(shí)候要盡可能的一起去了解并學(xué)習(xí)。意符的種類(lèi)繁多,所以我們?cè)趯W(xué)習(xí)意符正確的時(shí)候方式時(shí),首先要了解意符本身的“示能”,從而將意符更巧妙的結(jié)合在事物中發(fā)揮其正確的表意作用。
設(shè)計(jì)師在設(shè)計(jì)意符的時(shí)候也要盡可能的多了解產(chǎn)品使用者(用戶(hù))的背景,意符的表達(dá)也有很大一部分效果來(lái)自于用戶(hù)的經(jīng)驗(yàn)和心智。即便我們認(rèn)為該意符已經(jīng)很清晰了,但是使用者并未接觸過(guò)、不理解,說(shuō)明該意符依然不合適。
文章來(lái)源:站酷 作者:應(yīng)駿
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)