編輯導語:意符是傳達示能關係的資訊提示,比如交通場景下的紅燈就是一種禁止通行的資訊提示。本篇文章中,作者從意符的型別和表現形式兩方面詳細的介紹了意符,感興趣的小夥伴不妨來看看。
今天我們要來講意符,意符在外面日常與事物的互動過程中,非常重要。
以下文字比較幹,部分需要大家仔細閱讀動腦,覺得難懂的小夥伴可以聯絡我交流。
一、意符的型別與表現形式示能決定可能進行哪些操作,意符則點明操作的位置以及如何操作。
設計師往往會說,我設計了一個很好的方案。
它將告訴你產品的用途,但是使用者卻不知所措,雖然知道產品就在那裡,但無法下手,因為意符不明確。
例如我們最常用的人體工學椅,可以調節高低和後仰角度,調節的控制器是兩個把柄。
如果沒有意符加入,我們經常會記不清哪一個控制器控制的是後仰角度,哪一個控制的是座椅高度,需要去做更多的嘗試。
所以意符告訴我們對事物的正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。
大家還記得上一篇文章舉的一個門的例子嗎?
在日常生活中,雙開門通常在商場、大型會議場館內看見。
因為考慮到人流量比較多,於是在門上就會出現推/拉兩個文字意符,避免兩側的人同時推或者拉,引導人們正確通行。
我們可以使用推/拉,但不可以用“按”,因為我們無法透過“按”的互動來操控門的開關。
如何判斷一個設計是否優秀,那麼我們會觀察其本身的示能和意符傳達是否自然。
如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計,例如在兩扇透明的玻璃門上再新增推/拉的標識,就顯得有點多餘了。
再例如切換短影片和翻頁電子小說,我們不會用一個翻頁按鈕而是透過滑動來手勢切換。
當我們將內容設計全屏的時候就要考慮到當下示能的含義,所以就不要畫蛇添足。
OK,它的表意大家已經清楚了,那麼在數字產品中,意符有哪些型別和作用呢?它們又可以幫助使用者解決什麼問題,我們來看一看。
二、意符的型別1. 文字文字意符是最常見的一種型別,利用文字描述來說明如何進行互動操作。
但是中文文字博大精深,不同的描述給人的理解和感受完全不同。
(1)案例1:開關
開關控制元件單獨拎出來不具備完整的含義,必須在相應的場景中。
例如我們在通知、設定的場景中經常會用到開關,並且需要相應的文字描述來解釋開關控制的內容是什麼。
這裡的文字就是意符,用來解釋開關的作用。
開關本身具備的含義中是有這樣兩條原則:
- 需要讓使用者感知操作後立即生效
- 開關所屬文字必須簡單清晰無歧義
所以咱們可以看下方的案例。
當我們將文字描述為“不開啟則不再進行訊息數字提醒”和“不接受推薦”後,會顯得開關操作含義不明不直觀。
正確方式應該是正向且簡單的描述,不要用雙重否定等描述方式。預設描述為開啟後的狀態描述。
再來拓展一下,我們會發現其實依然還有產品中的開關文字意符用了非正向描述,那按照你的說法不就錯了嗎?
我們來看看小紅書和微信的許可權開關,這裡分別是隱私設定和許可權設定。
這裡理解起來會有點繞,大家看看能不能理解。
首先“只允許我關注的人評論我”這是一個正向描述,沒有問題。
如果換成反向描述就會變成“不關注我的人不能評論我”,結合右側的開關,邏輯層面就要多加一個雙重否定的理解,所以這裡的用正向沒有問題。
接下來看下面的關係設定:不把我推薦給可能認識的人,誒這裡用了反向描述,大家來分析一下,這裡是否合理呢?
首先小紅書在新下載應用開啟時會向使用者進行授權,為了幫助使用者發現更多渠道的好友,所以預設在協議中就會去微博、通訊錄里拉取好友的資訊從而在瀏覽內容的時候進行更多好友的曝光和推薦。
同時也會將我的資訊推薦給認識的人,這樣產品的活躍度、使用者的曝光會提升。
那麼大家再來品一品這兩句話:1.“不把我推薦給….” 2.“把我推薦給….”
前者比較含蓄,後者則更主動。
中國人的關係總體來說就是比較含蓄的,就好像是你可以給我推薦,但我不會主動要求。
更何況像小紅書這樣的社交平臺,“可能認識的人”對我來說價值並不是很大。
所以我個人也覺得預設不推薦比較好。
不知道這樣的說法大家是否可以接受。
再來看微信:不讓他看和不看他。
微信這個平臺想必我不用多說,既然是熟人社交更多,那麼預設肯定是全部開放,而有特殊需求才需要進行隱私設定。
所以預設狀態為不讓他看-開關關閉,意思是我沒有開啟這項非友好的選項。
那為什麼會出現有的開關預設開啟,有的開關預設關閉,還可以使用反向描述呢?
我總結了下,如果涉及到一些隱私和許可權的內容,一般我們預設為開關關閉。
但如果是為了使用者體驗和效率考慮的內容我們可以預設為開啟,例如影片播放結束自動播放下一個影片這樣的設定。
開關文字意符的描述方式還有幾種不同的方式:
① 內容標題+開關切換後狀態與內容變化的描述
第一種型別也就是上方說的案例,但是要注意的是,在描述狀態變化的時候,文字要正向、簡單的描述。
例如開啟後,接收xxx訊息,而不要寫成關閉後,不接受xxx訊息。
② 功能直接描述
不新增說明文字,直接展示功能標題。
例如微信聽筒模式、訊息設定、提醒等,直接用開關控制這些功能的開啟和關閉,屬於功能設定。
還有一種是授權,例如允許他人檢視我的收藏,對他人行為的約束,但不能描述為不允許他人檢視我的收藏。
因為剛才我們總結了,如果對於一些隱私許可權的設定預設需要關閉,那麼加上正向描述就不能使用“不允許”。
③ 批次整體描述
對於同一種類型的功能設定,可以利用批次的形式做整體描述。
再來看一個例子,示能在不夠清晰的情況下,文字意符用來輔助對當前內容/狀態的解釋。
例如b站在瀏覽內容的時候會出現“剛剛看到這裡,點選重新整理”,或者當我們在瀏覽資訊到一個頁面底部時發現無法繼續滑動,會出現一行文案:我是有底線的,說明內容全部展示完畢。
文字意符很直觀,但也要避免歧義。
2. 圖形/圖示圖示在某種程度上當作意符使用的頻率會更高,雖然某些圖標表意不明,但是因為簡約、美觀、生動、普適性強的原因,所以很多地方傾向於用圖示。
例如公共衛生間、商場的扶梯、通道,通常會用圖示來代替文字,或者強圖示+弱文字的形式。
既然咱們要說圖示意符,而且要突出圖示意符的作用,那就必須有個前提,那就是拋開其他的變數、因素的影響,圖示意符究竟有什麼神奇的魔力。
例如我們常用到的列表,很熟悉吧,接下來我將用圖示來讓這個列表的示能產生變化。
我們發現,只有文字的列表,示能不明顯,而加上圖示之後就很明確了,甚至加上不同的圖示,示能也隨之變化了呢?
重新整理、跳轉、展開、移動、選中、刪除、步進、開關、遮蔽、更多。
但你不能用撐開、向上展開、旋轉、翻轉、摺疊、回退等等。
這些其實是很簡單和基礎的概念,但是很多工作多年的UI設計轉互動體驗的小夥伴就經常遇到這些問題,大家總是在問UI和互動的區別是什麼。
其實本質上它倆都是一個介面設計師必備的能力,不能拆開來談。
我們再來看一個例子,播放/暫停的圖示,用來控制音訊/影片的播放與暫停,
在實體播放器上,我們能看到播放和暫停往往整合在一個按鈕上,例如天貓精靈、電視遙控器等。
而在數字產品中播放與暫停並不會同時放在一個按鈕上。
因為數字產品的圖示是可以變化的,當前狀態和切換狀態可以有兩個不同的意符表示,那實體播放器做成兩個按鈕就太多餘了。
還沒完,當我們在觀看影片的時候,介面中會顯示暫停按鈕,意思是點選後播放中的影片/音訊會暫停播放。
也就是暫停圖示展示的是點選後的狀態,而不是當前狀態。
但其他圖標表示的意思卻又和開關相反,例如橫豎屏切換、收藏、點贊,顯示的就是當前狀態,而非點選後狀態。
為什麼不一樣呢?因為暫停/播放相當於一個按鈕,用來控制影片播放。
這裡存在著一個控制和對映的關係,然而這裡的暫停和播放按鈕的示能是相反的。
暫停圖示的示能表示當前正在播放,而播放圖示的示能表示當前已暫停。
所以它和開關也不同,開就是開,關就是關,點贊圖示的原理就如同開關。
還有例如開啟和關閉聲音,看起來聲音播放/靜音有點像影片的暫停和播放。
例如騰訊影片這裡的影片聲音控制,當前靜音為聲音關閉圖示,而不是開啟後播放聲音的圖示。
我們再看iOS系統的裡聲音控的樣式表現,說明當前聲音為開啟則顯示的是開啟聲音的圖示,經過互動控制後才會變成靜音的圖示。
所以聲音播放的控制和影片播放的控制在圖示意符的使用規則上並不統一。
那為什麼會不一樣呢?其實我也看到過一些聲音圖示和這個案例是反著來的。
(1)兩個原因
① 因為影片的開啟和關閉只有兩個狀態,但是聲音不同,聲音在開啟的時候還可以調節音量啊!
如果和影片播放一樣,在播放的狀態下顯示的是靜音的圖示,那麼音量調節就會變成這樣:
是不是就很奇怪了,明明是正在播放的狀態,顯示的居然是靜音的圖示。
② 暫停和播放的本質並不是開和關,而是中斷和繼續,在本質上和開關還是不一樣的。
而靜音和播放的本質就是對聲音的開啟和關閉,如果我在聲音邊上加一個開關是不是就能弄清楚,為什麼聲音控制器的圖示意符就是當前狀態而不是互動後的狀態。
而影片的播放和暫停並不是開關。這下大家搞懂了嗎?
圖示意符可以單獨使用也可以結合文字使用,圖示雖然有優點,但也有缺點。
如果單獨使用也需要注意使用的場景,比如舉個例子,同樣是放在導航欄的兩個圖示,但是在不同的介面中,大家可以感知到該圖示的含義嗎?
它的示能和意符相結合成為了一個圖示,但不夠明確,在不同場景中如果沒有文字意符的輔助就會不夠明確。
圖形可以輔助表意,也可以用來指示區域。
例如我們經常開車,會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線,示意車輛可以在哪些區域行駛、以及形式的規則。
我們在醫院拍胸片的時候,胸片機器下方也會指示人應該站在什麼位置,用一個方形的框框起來,或者會顯示兩個腳印的圖形。
在數字產品中圖形的指示區域也非常重要,例如我們設計一個按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在使用者的點選感知上是不同的。
後者的點選信心會更大,有了區域的劃分就有了明確的操作界限。
3. 顏色顏色意符很好理解,透過色彩來表達如何與事物進行互動以及輔助表達。
無論是實體產品或者數字產品中,警示的顏色大部分會用紅色或者橙色來表示。
例如在進行資訊檢查時,錯誤資訊會被用紅色樣式標註出來,既告知使用者出了什麼問題,又提示使用者在哪裡出現問題。
而需要熱鬧、活潑的氛圍也會採用紅色等暖色來襯托,因為暖色更加的醒目。
有時顏色也是物體示能的一部分,例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。
綠色表示安全、自然,但也有一些特殊場景下的不同感知。
例如金融行業不太喜歡綠色,男士不太喜歡帽子使用這個顏色,除非你是比克大魔王。
灰色則表示禁止、不可用、待啟用等等。
在數字產品中,色彩除了表示一些特殊的含義,也可以用來作為資訊區分。
在選擇觀影位置的時候,可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。
更多的色彩心理學和色彩的使用這裡就不展開了。
4. 聲音聲音意符就更有意思了,人們透過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。
各種物體透過聲音來傳資訊的方式也非常多樣,而我舉個例子,就能把大家帶回到童年。
你們還記得以前在學校電腦教室裡一個企鵝圖示開始閃爍嗎?
一個咳嗽聲表示有人申請加你好友,一個敲擊木頭的聲音表示有人上線了,一個滴滴滴的聲音表示有新訊息。
還有在短影片裡經常會用到的一種中斷音效:滴————。
你們會發現我怎麼能打出有聲音的文字,彷彿你們已經在聽了。
聲音為什麼很重要,因為人類的五感是在共同作用的。
我們除了可以透過聲音來判斷事物本身,還可以用聲音來感知當前行為的狀態。
例如開啟手機的鍵盤輸入音,這樣的打字反饋更真實更有質感。
還有在遊戲領域我們經常會提到的打擊感,當人物的武器打擊在怪物身上,但聲音並沒有及時反饋,而是延遲1秒。
這時候你就會覺得沒有什麼打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。
5. 動效動效也可以成為意符嗎?它能表示什麼含義呢?
動效也是意符中非常重要的一種型別,他在我們日常生活中也用到的非常多。
例如我們看到理髮店門口正在旋轉的彩色燈。
這裡也順便給大家講個小歷史,理髮店彩燈的由來:在中世紀歐洲,人們認為放血療法對人的健康又很大的幫助。
但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項工作交給了醫生,但是當時的醫生不願意做這種下等人做的事情,便委託理髮師來做。
於是理髮師就成立了理髮師外科醫師聯合會,三色柱就是活動的標誌,紅色代表動脈、藍色代表靜脈、白色代表紗布。
還有一種說法是在法國大革命時期,一家理髮店是革命黨人根據地,一次危險的活動中領導人在理髮師的掩護下逃脫。
最後為了表彰,允許他們用紅、白、藍三色的國旗作為標註,最後演化成了旋轉燈,各國效仿。
好了,題外話說完,我們再回到動效。
如果你看到三色燈正在旋轉,說明這家理髮店正在營業,如果靜止則說明停業,或者壞了。
是不是很簡單?這就好像一個出軌的女人告訴情夫如果家裡有人則陽臺上放一盆菊花,家裡沒人則放一盆綠蘿是一個道理。
那麼在數字產品中,動效意符還有哪些作用呢?我們一一來盤點一下:
(1) 降低使用者認知成本
我們透過設計介面的轉場、控制元件的喚出動效,告訴使用者你將從什麼地方去往什麼地方,和你有關的控制元件是從哪裡來,你可以怎麼控制他。
當你進行過互動行為後哪些內容變化了,它們是怎麼變化的。
這就好像你等的45路公交車從遠方朝你慢慢行駛過來,停在你的面前並打開了車門,你選擇了上車然後看到阿姨捧著電飯鍋,拉動氣門,接著爆炸。
而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。
所以一個好的動效能讓你清楚事物的發展過程,以便於你更好的去理解。
再例如我們在使用餓了麼、美團等應用時,新增菜品會有掉入外賣箱的動效,這是一個非常好的動效應用。
微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導,告訴你雖然文章在收入互動動作的結束是在右下角。
但如果你想檢視所有文章需要返回首頁,在頁面的左上角才能找到。
(2)引導/提示/強化
對於一些新人須知或者內容隱藏的部分,產品通常可以透過一個小動效來引導使用者這裡有新內容,例如淘寶二樓、印象筆記功能圖示的切換、活動入口等等
(3) 氛圍、強化視覺
電商、直播介面中,有非常多的元素都是利用動效來刻畫氛圍和效果,刺激人們的感官。
(4)表示狀態
當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼,輸入框都會進行左右晃動來示意,老鐵,這真的不對。
(5)更多意符
意符不侷限於我列出的一些型別,我再舉個例子,在一個不起眼的轉角處,那裡空無一物,就是很普通的一塊空地。
但如果那裡被丟了一袋垃圾,那麼這裡就會出現越來越多的垃圾。
因為第一袋垃圾就是一個意符,告訴別人這裡可以丟垃圾,於是很多人就會把垃圾丟在這個角落裡。
很多人會覺得示能和意符好難區分,示能不是也包含意符嗎,
其實我們可以這樣理解,在整個互動過程中有物體和操作者這樣兩個物件,物體本身表達的是示能,但它不具備溝通能力。
而意符才是連結操作者和物體兩者的橋樑,雖然我們平時往往看到的都是示能+意符的狀態,但是我們也要區分本體的示能和用來溝通的意符兩者的區別。
二、小結意符和示能不可分割,設計師們在學習基礎概念的時候要儘可能的一起去了解並學習。
意符的種類繁多,所以我們在學習意符正確的時候方式時,首先要了解意符本身的“示能”,從而將意符更巧妙的結合在事物中發揮其正確的表意作用。
設計師在設計意符的時候也要儘可能的多瞭解產品使用者(使用者)的背景,意符的表達也有很大一部分效果來自於使用者的經驗和心智。
即便我們認為該意符已經很清晰了,但是使用者並未接觸過、不理解,說明該意符依然不合適。
#專欄作家#應駿,人人都是產品經理專欄作家,公眾號:應謀鬼計(shejishiyj)
本文由 @應駿 原創釋出於人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基於CC0協議