編輯導語：好的設計具有可視性，即是否能讓用戶明白如何操作。可視性自适應當的運用着五種基本心理學概念：示能、意符、約束、映射和反饋，以及概念模型。本篇文章中，作者結合自身經驗，分析了示能的概念和作用，感興趣的小夥伴不妨來看看。

這五個核心概念是學習交互與設計心理學的基礎，在唐納德先生的設計心理學中有提到，分别是：示能、意符、約束、映射、反饋。

那麼我結合自己的理解和更多與我們工作項目相關的案例來一起聊一聊。

很多沒有接觸過交互體驗的設計師小夥伴們，總有會面臨一個坎：

看别人做交互和體驗的方案總是特别簡單，一個流程或原型别人做出來之後，我們心裡總會想，那不就是這樣嘛？換我也能做，但是隻要自己一上手就不行了。

為什麼？因為我們總是看着别人的結果下結論，而忽略了中間的思考過程。

就好像是吃着别人做的番茄炒蛋，你會覺得不就是番茄和雞蛋一起炒一下，然後放點鹽和糖就好了嘛。

我們隻看到了結果，而忽略了對食材的選擇、處理、順序、結合。

一、示能

當我們看到一個控件，你覺得它不就應該在那裡嘛，但輪到自己開始做，就壓根想不到要去用那個控件，甚至是信息布局、流程節點、整體結構都規劃不出來。

所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。

因為方案是别人做好的，思考過程也是别人的。

而商業設計師的核心是解決問題，解決業務和用戶的問題。

既然解決問題的角色都是UI的上遊，那麼UI設計如何體現價值呢？

當然就是把交互體驗的核心底層概念搞懂，和交互設計一樣從設計側去思考問題，賦能業務。

OK，那麼來我們先來講：示能

1. 示能

心理學家吉普森将示能描述為：“關于有形物品如何傳達出人們與它們互動的重要信息，這個特性被吉普森命名為“示能”。

用很直白的話來講，意思就是：事物通過自己外在的形态，向使用者展示自己具有的功能和用途。

在日常生活中例子比比皆是，例如一扇打開的門，告訴人們可以進出、通過。一張椅子，人可以坐、可以靠。

假如，你面前有一扇門，門上有一個把手，這扇門告訴我可以利用這個把手與我進行互動，你可以用手、可以用腳，也可以用舌頭，但手是最方便的。

如果隻是單扇門，那麼我們可以利用推或者拉的動作打開。

但如果是兩扇門并排，兩個把手在中央靠近，那麼這時候門展示出來的意思就是兩扇門都可以推或拉。

但如果門把手在門的靠外兩側，那麼意思就變了，變成了将門側滑後才可以通過。

那門為什麼要設計成不同樣式來展示不同示能呢？

這個留給大家思考，這三種門設計的初衷是什麼。

在我們數字産品中可以有什麼體現呢？

例如一個開關控件（switch），開關本身具有兩種互斥的屬性和功能：開/關、啟動/禁用。

看到開關控件的外在樣式，我們可以判斷當前開關所屬模塊以及意符指示内容的狀态是屬于打開還是關閉。

開關在現實生活中的表現樣式有很多，例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等

大家别看開關看起來簡單，但是在設計起來會遇到不少的問題。

因為狀态和意符形态在我們日常中過中很難成為一個标準，例如最常見的一側翹起的開關，如果不加意符，我們不知道讓哪邊翹起才是開/關。

如果你的房間就一盞燈，那麼很簡單，我閉着眼睛去按就行了，燈滅着那肯定就是關，再按一下那就是開。

但如果在客廳中有多個并聯的開關怎麼辦，一個燈可能收到2處甚至3處開關的控制。

而每處開關的數量會在3-5個，這個時候不用意符去标識，就很麻煩了。

回到數字産品上，開關的示能就簡單多了，有顔色的狀态表示開，灰色狀态表示關。

但是開關控件在剛用在數字産品上的時候，很多人經常誤以為是滑動交互來控制開關。

雖然滑動也可以，但本身依靠更簡單的點擊觸碰就可以了。

但如果控件做的很長，那麼滑動的示能就會更明顯。

開關比較讓人産生歧義的地方來自于意符，因為很多新人将一些控件的屬性認為是有重疊關系，可以混用的，那就大錯特錯了，等會講。

2. 反示能

和示能相反，指的是任何物體之間不能進行怎樣的互動。

例如我們經常做的人體工學椅，你可以靠坐在椅子上，并把手放在扶手上，但你無法在椅子上蹦跳，因為椅子無法支撐劇烈晃動。

你也不可能用椅子打遊戲，它本身不具備這樣的功能。

再比如我們褲子的口袋，設計師通過設計他的形狀、大小、材質，幫助我們去盛放一些小物件，例如鑰匙、手機、卡片。

但是筆記本電腦你塞不進去，一頭豬更塞不進去。

數字産品中也會遇到一些有很明顯反示能的控件。

例如segment Controls（分段控件/分段選擇器/分段選擇控件），它是iOS的原生控件之一，該控件的反示能就是無法通過左右滑動界面切換不同标簽的視圖，和tab不同。

并且在該控件的描述中，seg通常數量隻能在5個以内，并且5個标簽分别屬于同類型的數據分割，隻支持點擊切換。

它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。

那有沒有一種可能，或者一個場景需要這兩種控件同時具備一些屬性呢？是有的，例如這樣：

在标簽下是列表，而列表也支持輕掃的交互進行删除。

如果使用tab則會産生沖突，而使用seg則在視覺上太重了，和産品調性不符。

那麼我們可以在示能上做一些調整，讓這個控件看上去不能左右滑動，又不至于太繁瑣。

所以反示能将告訴我們，事物有哪些不具備的功能。

同時反示能也是相對的，遇到多樣化的場景和業務需求時，我們依然要學會變通。

3. 不同場景中示能的變化

一張桌子放在教室中，我們知道它是用來學習的，桌面上可以放書本、筆等。

如果一個桌子放在戶外，并且靠着牆壁，牆壁上有個洞，那麼這個桌子當前示能表示為什麼呢？

一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕，但是如果不穿上衣走在馬路上估計很多人會罵他變态。

下方圖标 文字形式的一個按鈕，放在卡片的左側和右側大家感知一下，表現出來的示能有所區别。

左側更像是這個模塊的标題，而放在右邊才能讓人覺得可點擊交互。

如果覺得不夠明顯我們再用三個點舉例，放在不同位置的3個點小圖标，所表達的示能相差巨大。

再例如紅色在彈窗中顯示給人警示，但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。

這就是不同場景中同樣事物表現出來的示能區别。

所以設計師在設計方案的時候除了要将方案本身屬性表達正确以外，也要考慮到場景的影響。

4. 相同示能的不同表現方式與含義

這裡有一個概念叫做同構異型，說的是結構相同，形式不同。

例如我們經常用到的tab與其視圖的呈現，tab的本質就是利用多個标簽來切換标簽下的視圖。

所以标簽除了用tab的形式，還可以用下拉展開成為菜單的形式，隻不過一個是平鋪，一個是點開後再列表選擇。

再舉個例子，例如篩選控件。

如果我們需要一個實時篩選的功能，那麼我們一般會這麼做，在b端web設計中，會将一系列篩選條件橫向擺放，每一個篩選條件都可以下拉展開進行篩選。

但如果遷移到移動端中，因為橫向距離受阻，就會縱向标簽展開式的篩選模式。

從結構上來說，這倆方案其實是一樣的，都是在多個篩選條件中分别篩選出不同的标簽。

再例如一個父子集共生的内容卡片：

同構異形在設計樣式上會有很多種，例如列表，例如上文說到的單控開關，雖然樣式很多，但原理上單控開關都是一樣的。

對于初學者來說，不同控件理解的比較片面，所以就會導緻一些控件的使用錯誤。

說到同構異形那就不得不提到同形異構，例如一塊素牛肉，外觀和紅燒牛肉一樣，但是它是豆制品。

我們再來看下面兩個模塊，根據整體來判斷，兩邊的加号都是反映出可以點擊添加的示能。

但如果我們繼續考慮交互之後的邏輯和流程就會發現問題所在了。

前者添加的是标簽，添加完後會顯示在相關的區域，添加按鈕不變。

這裡可以用一個比較形象的比喻，我有4張椅子，其中3張坐了人。

第四張椅子的示能為：隻要這張椅子坐了人，邊上就會出現新的椅子，最多不超過8張，如果沒有人坐則隻顯示一張椅子。

但第二個模塊中的添加按鈕結合整體來看是和其他内容毫無相關的添加入口，就好像是第四張椅子上面坐的不是人而是套了一個大箱子，椅子不見了，原本應該和其他内容保持一緻的外觀也不見了，出現了一個新的東西，出現了新的示能。

所以如果我們要按照第一種規則玩，那麼這裡就不能套箱子，如果要放箱子，就需要放在其他的地方。

所以，初學者要警惕同型帶來的使用誤區，有時候長的很像的兩個人，可能完全沒有血緣關系。

二、小結

示能的概念大家已經了解了，對于我們設計師來說，盡量去搞懂更多事物在不同場景中的示能和反示能，需要解決問題的時候可以針對性的運用各種方案。

＃專欄作家＃

應駿，人人都是産品經理專欄作家，公衆号：應謀鬼計（shejishiyj）

本文由 @應駿 原創發布于人人都是産品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部