欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

交互體驗設計的核心概念之：示能與意符

2022-3-3 鶴鶴

很多沒有接觸過交互體驗的設計師小伙伴們，總有會面臨一個坎，那就是看別人做交互和體驗的方案總是特別簡單，一個流程或原型別人做出來之后，我們心里總會想，那不就是這樣嘛？換我也能做，但是只要自己一上手就不行了。

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

就好像是吃著別人做的番茄炒蛋，你會覺得不就是番茄和雞蛋一起炒一下，然后放點鹽和糖就好了嘛，我們只看到了結果，而忽略了對食材的選擇、處理、順序、結合。

1.示能

當我們看到一個控件，你覺得它不就應該在那里嘛，但輪到自己開始做，就壓根想不到要去用那個控件，甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業，如果做過的小伙伴可以發我交流一下。傳送門--》

所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的，思考過程也是別人的，而商業設計師的核心是解決問題，解決業務和用戶的問題，既然解決問題的角色都是UI的上游，那么UI設計如何體現價值呢？當然就是把交互體驗的核心底層概念搞懂，和交互設計一樣從設計側去思考問題，賦能業務。

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

1.1示能

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

用很直白的話來講，意思就是：事物通過自己外在的形態，向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是，例如一扇打開的門，告訴人們可以進出、通過。一張椅子，人可以坐、可以靠。

假如，你面前有一扇門，門上有一個把手，這扇門告訴我可以利用這個把手與我進行互動，你可以用手、可以用腳，也可以用舌頭，但手是最方便的。如果只是單扇門，那么我們可以利用推或者拉的動作打開，但如果是兩扇門并排，兩個把手在中央靠近，那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側，那么意思就變了，變成了將門側滑后才可以通過。

那門為什么要設計成不同樣式來展示不同示能呢？這個留給大家思考，這三種門設計的初衷是什么。

在我們數字產品中可以有什么體現呢？例如一個開關控件（switch），開關本身具有兩種互斥的屬性和功能：開/關、啟動/禁用，看到開關控件的外在樣式，我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。

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

大家別看開關看起來簡單，但是在設計起來會遇到不少的問題，因為狀態和意符形態在我們日常中過中很難成為一個標準，例如最常見的一側翹起的開關，如果不加意符，我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈，那么很簡單，我閉著眼睛去按就行了，燈滅著那肯定就是關，再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦，一個燈可能收到2處甚至3處開關的控制，而每處開關的數量會在3-5個，這個時候不用意符去標識，就很麻煩了。

回到數字產品上，開關的示能就簡單多了，有顏色的狀態表示開，灰色狀態表示關，但是開關控件在剛用在數字產品上的時候，很多人經常誤以為是滑動交互來控制開關，雖然滑動也可以，但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長，那么滑動的示能就會更明顯。

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

1.2.反示能

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

例如我們經常做的人體工學椅，你可以靠坐在椅子上，并把手放在扶手上，但你無法在椅子上蹦跳，因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲，它本身不具備這樣的功能。再比如我們褲子的口袋，設計師通過設計他的形狀、大小、材質，幫助我們去盛放一些小物件，例如鑰匙、手機、卡片，但是筆記本電腦你塞不進去，一頭豬更塞不進去。

數字產品中也會遇到一些有很明顯反示能的控件，例如segment Controls（分段控件/分段選擇器/分段選擇控件），它是iOS的原生控件之一，該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖，和tab不同。

并且在該控件的描述中，seg通常數量只能在5個以內，并且5個標簽分別屬于同類型的數據分割，只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。

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

在標簽下是列表，而列表也支持輕掃的交互進行刪除，如果使用tab則會產生沖突，而使用seg則在視覺上太重了，和產品調性不符。那么我們可以在示能上做一些調整，讓這個控件看上去不能左右滑動，又不至于太繁瑣。

所以反示能將告訴我們，事物有哪些不具備的功能。同時反示能也是相對的，遇到多樣化的場景和業務需求時，我們依然要學會變通。

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

一張桌子放在教室中，我們知道它是用來學習的，桌面上可以放書本、筆等，如果一個桌子放在戶外，并且靠著墻壁，墻壁上有個洞，那么這個桌子當前示能表示為什么呢？一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕，但是如果不穿上衣走在馬路上估計很多人會罵他變態。

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

左側更像是這個模塊的標題，而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例，放在不同位置的3個點小圖標，所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示，但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。

這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外，也要考慮到場景的影響。

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

這里有一個概念叫做同構異型，說的是結構相同，形式不同。例如我們經常用到的tab與其視圖的呈現，tab的本質就是利用多個標簽來切換標簽下的視圖，所以標簽除了用tab的形式，還可以用下拉展開成為菜單的形式，只不過一個是平鋪，一個是點開后再列表選擇。

再舉個例子，例如篩選控件，如果我們需要一個實時篩選的功能，那么我們一般會這么做，在b端web設計中，會將一系列篩選條件橫向擺放，每一個篩選條件都可以下拉展開進行篩選，但如果遷移到移動端中，因為橫向距離受阻，就會縱向標簽展開式的篩選模式，從結構上來說，這倆方案其實是一樣的，都是在多個篩選條件中分別篩選出不同的標簽。

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

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

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

說到同構異形那就不得不提到同形異構，例如一塊素牛肉，外觀和紅燒牛肉一樣，但是它是豆制品。我們再來看下面兩個模塊，根據整體來判斷，兩邊的加號都是反映出可以點擊添加的示能，但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽，添加完后會顯示在相關的區域，添加按鈕不變。

這里可以用一個比較形象的比喻，我有4張椅子，其中3張坐了人，第四張椅子的示能為：只要這張椅子坐了人，邊上就會出現新的椅子，最多不超過8張，如果沒有人坐則只顯示一張椅子。

但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口，就好像是第四張椅子上面坐的不是人而是套了一個大箱子，椅子不見了，原本應該和其他內容保持一致的外觀也不見了，出現了一個新的東西，出現了新的示能。所以如果我們要按照第一種規則玩，那么這里就不能套箱子，如果要放箱子，就需要放在其他的地方。

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

小結

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

2.意符

咱們上一篇講到了第一個概念：示能，如果忘了或者沒看的同學可以再去看一下。

我是傳送門

今天我們要來講意符，意符在外面日常與事物的交互過程中，非常重要。

以下文字比較干，部分需要大家仔細閱讀動腦，覺得難懂的小伙伴可以聯系我交流

2.1意符的類型與表現形式

示能決定可能進行哪些操作，意符則點明操作的位置以及如何操作。

設計師往往會說，我設計了一個很好的方案，它將告訴你產品的用途，但是用戶卻不知所措，雖然知道產品就在那里，但無法下手，因為意符不明確。例如我們最常用的人體工學椅，可以調節高低和后仰角度，調節的控制器是兩個把柄。如果沒有意符加入，我們經常會記不清哪一個控制器控制的是后仰角度，哪一個控制的是座椅高度，需要去做更多的嘗試。

所以意符告訴我們對事物的正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。

大家還記得上一篇文章舉的一個門的例子嗎？在日常生活中，雙開門通常在商場、大型會議場館內看見，因為考慮到人流量比較多，于是在門上就會出現推/拉兩個文字意符，避免兩側的人同時推或者拉，引導人們正確通行。我們可以使用推/拉，但不可以用“按”，因為我們無法通過“按”的交互來操控門的開關。

如何判斷一個設計是否優秀，那么我們會觀察其本身的示能和意符傳達是否自然，如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計，例如在兩扇透明的玻璃門上再添加推/拉的標識，就顯得有點多余了。再例如切換短視頻和翻頁電子小說，我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義，所以就不要畫蛇添足。

OK，它的表意大家已經清楚了，那么在數字產品中，意符有哪些類型和作用呢？它們又可以幫助用戶解決什么問題，我們來看一看。

意符的類型

1.文字

文字意符是最常見的一種類型，利用文字描述來說明如何進行交互操作，但是中文文字博大精深，不同的描述給人的理解和感受完全不同。

案例1:開關

開關控件單獨拎出來不具備完整的含義，必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關，并且需要相應的文字描述來解釋開關控制的內容是什么。

這里的文字就是意符，用來解釋開關的作用。

開關本身具備的含義中是有這樣兩條原則：

1.需要讓用戶感知操作后立即生效

2.開關所屬文本必須簡單清晰無歧義

所以咱們可以看下方的案例。當我們將文本描述為“不打開（關閉）則不再進行消息數字提醒”和“不接受推薦”后，會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述，不要用雙重否定等描述方式。默認描述為打開后的狀態描述。

再來拓展一下，我們會發現其實依然還有產品中的開關文字意符用了非正向描述，那按照你的說法不就錯了嗎？我們來看看小紅書和微信的權限開關，這里分別是隱私設置和權限設置。

這里理解起來會有點繞，大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述，沒有問題，如果換成反向描述就會變成“不關注我的人不能評論我”，結合右側的開關，邏輯層面就要多加一個雙重否定的理解，所以這里的用正向沒有問題。

接下來看下面的關系設置：不把我推薦給可能認識的人，誒這里用了反向描述，大家來分析一下，這里是否合理呢？

首先小紅書在新下載應用打開時會向用戶進行授權，為了幫助用戶發現更多渠道的好友，所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦，同時也會將我的信息推薦給認識的人，這樣產品的活躍度、用戶的曝光會提升。

那么大家再來品一品這兩句話：1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄，后者則更主動，中國人的關系總體來說就是比較含蓄的，就好像是你可以給我推薦，但我不會主動要求，更何況像小紅書這樣的社交平臺，“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。

不知道這樣的說法大家是否可以接受。再來看微信：不讓他看和不看他。微信這個平臺想必我不用多說，既然是熟人社交更多，那么默認肯定是全部開放，而有特殊需求才需要進行隱私設置，所以默認狀態為不讓他看-開關關閉，意思是我沒有打開這項非友好的選項。

那為什么會出現有的開關默認打開，有的開關默認關閉，還可以使用反向描述呢？我總結了下，如果涉及到一些隱私和權限的內容，一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開，例如視頻播放結束自動播放下一個視頻這樣的設置。

開關文字意符的描述方式還有幾種不同的方式：

1.內容標題+開關切換后狀態與內容變化的描述

第一種類型也就是上方說的案例，但是要注意的是，在描述狀態變化的時候，文本要正向、簡單的描述，例如開啟后，接收xxx消息，而不要寫成關閉后，不接受xxx消息。

2.功能直接描述

不添加說明文本，直接展示功能標題，例如微信聽筒模式、消息設置、提醒等，直接用開關控制這些功能的打開和關閉，屬于功能設置。還有一種是授權，例如允許他人查看我的收藏，對他人行為的約束，但不能描述為不允許他人查看我的收藏，因為剛才我們總結了，如果對于一些隱私權限的設置默認需要關閉，那么加上正向描述就不能使用“不允許“。

3.批量整體描述

對于同一種類型的功能設置，可以利用批量的形式做整體描述。

再來看一個例子，示能在不夠清晰的情況下，文本意符用來輔助對當前內容/狀態的解釋。

例如b站在瀏覽內容的時候會出現“剛剛看到這里，點擊刷新”，或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動，會出現一行文案：我是有底線的，說明內容全部展示完畢。

文字意符很直觀，但也要避免歧義。

2.圖形/圖標

圖標在某種程度上當作意符使用的頻率會更高，雖然某些圖標表意不明，但是因為簡約、美觀、生動、普適性強的原因，所以很多地方傾向于用圖標，例如公共衛生間、商場的扶梯、通道，通常會用圖標來代替文本，或者強圖標+弱文本的形式。

既然咱們要說圖標意符，而且要突出圖標意符的作用，那就必須有個前提，那就是拋開其他的變量、因素的影響，圖標意符究竟有什么神奇的魔力。

例如我們常用到的列表，很熟悉吧，接下來我將用圖標來讓這個列表的示能產生變化

我們發現，只有文本的列表，示能不明顯，而加上圖標之后就很明確了，甚至加上不同的圖標，示能也隨之變化了呢？刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。

這些其實是很簡單和基礎的概念，但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題，大家總是在問UI和交互的區別是什么，其實本質上它倆都是一個界面設計師必備的能力，不能拆開來談。

我們再來看一個例子，播放/暫停的圖標，用來控制音頻/視頻的播放與暫停，

在實體播放器上，我們能看到播放和暫停往往集成在一個按鈕上，例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上，因為數字產品的圖標是可以變化的，當前狀態和切換狀態可以有兩個不同的意符表示，那實體播放器做成兩個按鈕就太多余了。

還沒完，當我們在觀看視頻的時候，界面中會顯示暫停按鈕，意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態，而不是當前狀態。但其他圖標表示的意思卻又和開關相反，例如橫豎屏切換、收藏、點贊，顯示的就是當前狀態，而非點擊后狀態。

為什么不一樣呢？因為暫停/播放相當于一個按鈕，用來控制視頻播放，這里存在著一個控制和映射的關系，然而這里的暫停和播放按鈕的示能是相反的。

暫停圖標的示能表示當前正在播放，而播放圖標的示能表示當前已暫停。所以它和開關也不同，開就是開，關就是關，點贊圖標的原理就如同開關。

還有例如打開和關閉聲音，看起來聲音播放/靜音有點像視頻的暫停和播放。

例如騰訊視頻這里的視頻聲音控制，當前靜音為聲音關閉圖標，而不是打開后播放聲音的圖標，我們再看iOS系統的里聲音控的樣式表現，說明當前聲音為開啟則顯示的是開啟聲音的圖標，經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。

那為什么會不一樣呢？其實我也看到過一些聲音圖標和這個案例是反著來的。

兩個原因：

1.因為視頻的打開和關閉只有兩個狀態，但是聲音不同，聲音在打開的時候還可以調節音量啊！如果和視頻播放一樣，在播放的狀態下顯示的是靜音的圖標，那么音量調節就會變成這樣：

是不是就很奇怪了，明明是正在播放的狀態，顯示的居然是靜音的圖標

2.暫停和播放的本質并不是開和關，而是中斷和繼續，在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉，如果我在聲音邊上加一個開關是不是就能弄清楚，為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎？

圖標意符可以單獨使用也可以結合文字使用，圖標雖然有優點，但也有缺點，如果單獨使用也需要注意使用的場景，比如舉個例子，同樣是放在導航欄的兩個圖標，但是在不同的界面中，大家可以感知到該圖標的含義嗎？它的示能和意符相結合成為了一個圖標，但不夠明確，在不同場景中如果沒有文字意符的輔助就會不夠明確。

圖形可以輔助表意，也可以用來指示區域，例如我們經常開車，會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線，示意車輛可以在哪些區域行駛、以及形式的規則。

我們在醫院拍胸片的時候，胸片機器下方也會指示人應該站在什么位置，用一個方形的框框起來，或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要，例如我們設計一個按鈕，只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的，后者的點擊信心會更大，有了區域的劃分就有了明確的操作界限。

3.顏色

顏色意符很好理解，通過色彩來表達如何與事物進行交互以及輔助表達。

無論是實體產品或者數字產品中，警示的顏色大部分會用紅色或者橙色來表示，例如在進行信息檢查時，錯誤信息會被用紅色樣式標注出來，既告知用戶出了什么問題，又提示用戶在哪里出現問題。

而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托，因為暖色更加的醒目。有時顏色也是物體示能的一部分，例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀，表示在緊急情況下可以使用，但不要輕易使用。

綠色表示安全、自然，但也有一些特殊場景下的不同感知，例如金融行業不太喜歡綠色，男士不太喜歡帽子使用這個顏色，除非你是比克大魔王。灰色則表示禁止、不可用、待激活等等。

在數字產品中，色彩除了表示一些特殊的含義，也可以用來作為信息區分，在選擇觀影位置的時候，可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。

4.聲音

聲音意符就更有意思了，人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣，而我舉個例子，就能把大家帶回到童年。

你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎？一個咳嗽聲表示有人申請加你好友，一個敲擊木頭的聲音表示有人上線了，一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效：滴————。你們會發現我怎么能打出有聲音的文字，仿佛你們已經在聽了。

聲音為什么很重要，因為人類的五感是在共同作用的，我們除了可以通過聲音來判斷事物本身，還可以用聲音來感知當前行為的狀態，例如打開手機的鍵盤輸入音，這樣的打字反饋更真實更有質感。

還有在游戲領域我們經常會提到的打擊感，當人物的武器打擊在怪物身上，但聲音并沒有及時反饋，而是延遲1秒，這時候你就會覺得沒有什么打擊感，除了聲音反饋，打擊感的意符還有很多，例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。

5.動效

動效也可以成為意符嗎？它能表示什么含義呢？動效也是意符中非常重要的一種類型，他在我們日常生活中也用到的非常多。

例如我們看到理發店門口正在旋轉的彩色燈。

這里也順便給大家講個小歷史，理發店彩燈的由來：在中世紀歐洲，人們認為放血療法對人的健康又很大的幫助，但是一般都由宗教儀式中的神職人員操作，到了亞歷山大三世，他把這項工作交給了醫生，但是當時的醫生不愿意做這種下等人做的事情，便委托理發師來做，于是理發師就成立了理發師外科醫師聯合會，三色柱就是活動的標志，紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期，一家理發店是革命黨人根據地，一次危險的活動中領導人在理發師的掩護下逃脫，最后為了表彰，允許他們用紅、白、藍三色的國旗作為標注，最后演化成了旋轉燈，各國效仿。

好了，題外話說完，我們再回到動效。如果你看到三色燈正在旋轉，說明這家理發店正在營業，如果靜止則說明停業，或者壞了。是不是很簡單？這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花，家里沒人則放一盆綠蘿是一個道理。

那么在數字產品中，動效意符還有哪些作用呢？我們一一來盤點一下：

1.降低用戶認知成本

我們通過設計界面的轉場、控件的喚出動效，告訴用戶你將從什么地方去往什么地方，和你有關的控件是從哪里來，你可以怎么控制他。當你進行過交互行為后哪些內容變化了，它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來，停在你的面前并打開了車門，你選擇了上車然后看到阿姨捧著電飯鍋，拉動氣門，接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。

所以一個好的動效能讓你清楚事物的發展過程，以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時，添加菜品會有掉入外賣箱的動效，這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導，告訴你雖然文章在收入交互動作的結束是在右下角，但如果你想查看所有文章需要返回首頁，在頁面的左上角才能找到。