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