起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識這5個概念沒聽說過？那你的UI算是白做了
編輯導(dǎo)語：好的設(shè)計具有可視性，即是否能讓用戶明白如何操作。可視性自適應(yīng)當(dāng)?shù)倪\用著五種基本心理學(xué)概念：示能、意符、約束、映射和反饋，以及概念模型。本篇文章中，作者結(jié)合自身經(jīng)驗，分析了示能的概念和作用，感興趣的小伙伴不妨來看看。
這五個核心概念是學(xué)習(xí)交互與設(shè)計心理學(xué)的基礎(chǔ)，在唐納德先生的設(shè)計心理學(xué)中有提到，分別是：示能、意符、約束、映射、反饋。
那么我結(jié)合自己的理解和更多與我們工作項目相關(guān)的案例來一起聊一聊。
很多沒有接觸過交互體驗的設(shè)計師小伙伴們，總有會面臨一個坎：
看別人做交互和體驗的方案總是特別簡單，一個流程或原型別人做出來之后，我們心里總會想，那不就是這樣嘛？換我也能做，但是只要自己一上手就不行了。
為什么？因為我們總是看著別人的結(jié)果下結(jié)論，而忽略了中間的思考過程。
就好像是吃著別人做的番茄炒蛋，你會覺得不就是番茄和雞蛋一起炒一下，然后放點鹽和糖就好了嘛。
我們只看到了結(jié)果，而忽略了對食材的選擇、處理、順序、結(jié)合。
一、示能
當(dāng)我們看到一個控件，你覺得它不就應(yīng)該在那里嘛，但輪到自己開始做，就壓根想不到要去用那個控件，甚至是信息布局、流程節(jié)點、整體結(jié)構(gòu)都規(guī)劃不出來。
所以很多UI設(shè)計師覺得做純執(zhí)行的工作很沒有意思沒有價值。
因為方案是別人做好的，思考過程也是別人的。
而商業(yè)設(shè)計師的核心是解決問題，解決業(yè)務(wù)和用戶的問題。
既然解決問題的角色都是UI的上游，那么UI設(shè)計如何體現(xiàn)價值呢？
當(dāng)然就是把交互體驗的核心底層概念搞懂，和交互設(shè)計一樣從設(shè)計側(cè)去思考問題，賦能業(yè)務(wù)。
OK，那么來我們先來講：示能
1. 示能
心理學(xué)家吉普森將示能描述為：“關(guān)于有形物品如何傳達(dá)出人們與它們互動的重要信息，這個特性被吉普森命名為“示能”。
用很直白的話來講，意思就是：事物通過自己外在的形態(tài)，向使用者展示自己具有的功能和用途。
在日常生活中例子比比皆是，例如一扇打開的門，告訴人們可以進(jìn)出、通過。一張椅子，人可以坐、可以靠。
假如，你面前有一扇門，門上有一個把手，這扇門告訴我可以利用這個把手與我進(jìn)行互動，你可以用手、可以用腳，也可以用舌頭，但手是最方便的。
如果只是單扇門，那么我們可以利用推或者拉的動作打開。
但如果是兩扇門并排，兩個把手在中央靠近，那么這時候門展示出來的意思就是兩扇門都可以推或拉。
但如果門把手在門的靠外兩側(cè)，那么意思就變了，變成了將門側(cè)滑后才可以通過。
那門為什么要設(shè)計成不同樣式來展示不同示能呢？
這個留給大家思考，這三種門設(shè)計的初衷是什么。
在我們數(shù)字產(chǎn)品中可以有什么體現(xiàn)呢？
例如一個開關(guān)控件（switch），開關(guān)本身具有兩種互斥的屬性和功能：開/關(guān)、啟動/禁用。
看到開關(guān)控件的外在樣式，我們可以判斷當(dāng)前開關(guān)所屬模塊以及意符指示內(nèi)容的狀態(tài)是屬于打開還是關(guān)閉。
開關(guān)在現(xiàn)實生活中的表現(xiàn)樣式有很多，例如一側(cè)翹起的開關(guān)、可以撥動的開關(guān)、具有段落的按壓開關(guān)、分型控制的開關(guān)、旋鈕開關(guān)等
大家別看開關(guān)看起來簡單，但是在設(shè)計起來會遇到不少的問題。
因為狀態(tài)和意符形態(tài)在我們?nèi)粘Ｖ羞^中很難成為一個標(biāo)準(zhǔn)，例如最常見的一側(cè)翹起的開關(guān)，如果不加意符，我們不知道讓哪邊翹起才是開/關(guān)。
如果你的房間就一盞燈，那么很簡單，我閉著眼睛去按就行了，燈滅著那肯定就是關(guān)，再按一下那就是開。
但如果在客廳中有多個并聯(lián)的開關(guān)怎么辦，一個燈可能收到2處甚至3處開關(guān)的控制。
而每處開關(guān)的數(shù)量會在3-5個，這個時候不用意符去標(biāo)識，就很麻煩了。
回到數(shù)字產(chǎn)品上，開關(guān)的示能就簡單多了，有顏色的狀態(tài)表示開，灰色狀態(tài)表示關(guān)。
但是開關(guān)控件在剛用在數(shù)字產(chǎn)品上的時候，很多人經(jīng)常誤以為是滑動交互來控制開關(guān)。
雖然滑動也可以，但本身依靠更簡單的點擊觸碰就可以了。
但如果控件做的很長，那么滑動的示能就會更明顯。
開關(guān)比較讓人產(chǎn)生歧義的地方來自于意符，因為很多新人將一些控件的屬性認(rèn)為是有重疊關(guān)系，可以混用的，那就大錯特錯了，等會講。
2. 反示能
和示能相反，指的是任何物體之間不能進(jìn)行怎樣的互動。
例如我們經(jīng)常做的人體工學(xué)椅，你可以靠坐在椅子上，并把手放在扶手上，但你無法在椅子上蹦跳，因為椅子無法支撐劇烈晃動。
你也不可能用椅子打游戲，它本身不具備這樣的功能。
再比如我們褲子的口袋，設(shè)計師通過設(shè)計他的形狀、大小、材質(zhì)，幫助我們?nèi)ナ⒎乓恍┬∥锛?，例如鑰匙、手機(jī)、卡片。
但是筆記本電腦你塞不進(jìn)去，一頭豬更塞不進(jìn)去。
數(shù)字產(chǎn)品中也會遇到一些有很明顯反示能的控件。
例如segment Controls（分段控件/分段選擇器/分段選擇控件），它是iOS的原生控件之一，該控件的反示能就是無法通過左右滑動界面切換不同標(biāo)簽的視圖，和tab不同。
并且在該控件的描述中，seg通常數(shù)量只能在5個以內(nèi)，并且5個標(biāo)簽分別屬于同類型的數(shù)據(jù)分割，只支持點擊切換。
它不能展開、不能滑動、不能移動、不能懸浮、不能進(jìn)入二級頁面也不能翻轉(zhuǎn)。
那有沒有一種可能，或者一個場景需要這兩種控件同時具備一些屬性呢？是有的，例如這樣：
在標(biāo)簽下是列表，而列表也支持輕掃的交互進(jìn)行刪除。
如果使用tab則會產(chǎn)生沖突，而使用seg則在視覺上太重了，和產(chǎn)品調(diào)性不符。
那么我們可以在示能上做一些調(diào)整，讓這個控件看上去不能左右滑動，又不至于太繁瑣。
所以反示能將告訴我們，事物有哪些不具備的功能。
同時反示能也是相對的，遇到多樣化的場景和業(yè)務(wù)需求時，我們依然要學(xué)會變通。
3. 不同場景中示能的變化
一張桌子放在教室中，我們知道它是用來學(xué)習(xí)的，桌面上可以放書本、筆等。
如果一個桌子放在戶外，并且靠著墻壁，墻壁上有個洞，那么這個桌子當(dāng)前示能表示為什么呢？
一個肌肉發(fā)達(dá)的男人在健身房秀肌肉大家紛紛羨慕，但是如果不穿上衣走在馬路上估計很多人會罵他變態(tài)。
下方圖標(biāo)+文字形式的一個按鈕，放在卡片的左側(cè)和右側(cè)大家感知一下，表現(xiàn)出來的示能有所區(qū)別。
左側(cè)更像是這個模塊的標(biāo)題，而放在右邊才能讓人覺得可點擊交互。
如果覺得不夠明顯我們再用三個點舉例，放在不同位置的3個點小圖標(biāo)，所表達(dá)的示能相差巨大。
再例如紅色在彈窗中顯示給人警示，但在活動頁和價格數(shù)字上顯示則給人感覺熱鬧的氛圍和強烈的指引。
這就是不同場景中同樣事物表現(xiàn)出來的示能區(qū)別。
所以設(shè)計師在設(shè)計方案的時候除了要將方案本身屬性表達(dá)正確以外，也要考慮到場景的影響。
4. 相同示能的不同表現(xiàn)方式與含義
這里有一個概念叫做同構(gòu)異型，說的是結(jié)構(gòu)相同，形式不同。
例如我們經(jīng)常用到的tab與其視圖的呈現(xiàn)，tab的本質(zhì)就是利用多個標(biāo)簽來切換標(biāo)簽下的視圖。
所以標(biāo)簽除了用tab的形式，還可以用下拉展開成為菜單的形式，只不過一個是平鋪，一個是點開后再列表選擇。
再舉個例子，例如篩選控件。
如果我們需要一個實時篩選的功能，那么我們一般會這么做，在b端web設(shè)計中，會將一系列篩選條件橫向擺放，每一個篩選條件都可以下拉展開進(jìn)行篩選。
但如果遷移到移動端中，因為橫向距離受阻，就會縱向標(biāo)簽展開式的篩選模式。
從結(jié)構(gòu)上來說，這倆方案其實是一樣的，都是在多個篩選條件中分別篩選出不同的標(biāo)簽。
再例如一個父子集共生的內(nèi)容卡片：
同構(gòu)異形在設(shè)計樣式上會有很多種，例如列表，例如上文說到的單控開關(guān)，雖然樣式很多，但原理上單控開關(guān)都是一樣的。
對于初學(xué)者來說，不同控件理解的比較片面，所以就會導(dǎo)致一些控件的使用錯誤。
說到同構(gòu)異形那就不得不提到同形異構(gòu)，例如一塊素牛肉，外觀和紅燒牛肉一樣，但是它是豆制品。
我們再來看下面兩個模塊，根據(jù)整體來判斷，兩邊的加號都是反映出可以點擊添加的示能。
但如果我們繼續(xù)考慮交互之后的邏輯和流程就會發(fā)現(xiàn)問題所在了。
前者添加的是標(biāo)簽，添加完后會顯示在相關(guān)的區(qū)域，添加按鈕不變。
這里可以用一個比較形象的比喻，我有4張椅子，其中3張坐了人。
第四張椅子的示能為：只要這張椅子坐了人，邊上就會出現(xiàn)新的椅子，最多不超過8張，如果沒有人坐則只顯示一張椅子。
但第二個模塊中的添加按鈕結(jié)合整體來看是和其他內(nèi)容毫無相關(guān)的添加入口，就好像是第四張椅子上面坐的不是人而是套了一個大箱子，椅子不見了，原本應(yīng)該和其他內(nèi)容保持一致的外觀也不見了，出現(xiàn)了一個新的東西，出現(xiàn)了新的示能。
所以如果我們要按照第一種規(guī)則玩，那么這里就不能套箱子，如果要放箱子，就需要放在其他的地方。
所以，初學(xué)者要警惕同型帶來的使用誤區(qū)，有時候長的很像的兩個人，可能完全沒有血緣關(guān)系。
二、小結(jié)
示能的概念大家已經(jīng)了解了，對于我們設(shè)計師來說，盡量去搞懂更多事物在不同場景中的示能和反示能，需要解決問題的時候可以針對性的運用各種方案。
＃專欄作家＃
應(yīng)駿，人人都是產(chǎn)品經(jīng)理專欄作家，公眾號：應(yīng)謀鬼計（shejishiyj）
本文由 @應(yīng)駿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
所以的設(shè)計都是是為了傳達(dá)想法，引導(dǎo)用戶，解決問題，作為一種解決問題的手段就要求設(shè)計時多從用戶角度出發(fā)
就像需要考慮用戶場景一樣，ui設(shè)計時也要考慮不同的示能，這樣才能盡量準(zhǔn)確的傳達(dá)信息，給予用戶更好的體驗