PART 1 - 唐納德諾曼關(guān)于交互設(shè)計(jì)的可視性的基本原則
唐納德·諾曼所著《設(shè)計(jì)心理學(xué)1-4》一直被認(rèn)為是設(shè)計(jì)行業(yè)經(jīng)典，我在讀這一套書(shū)的時(shí)候最令我感到共鳴的不是后來(lái)被大家大書(shū)特書(shū)第四本《情感化設(shè)計(jì)》，而是第一本《日常的設(shè)計(jì)》，這本第一本書(shū)最精華的內(nèi)容是闡述了交互設(shè)計(jì)的基本原則，這個(gè)原則無(wú)論是對(duì)工業(yè)設(shè)計(jì)中的人和物件交互，還是說(shuō)是建筑中的人和空間交互都有很深刻的指導(dǎo)意義。
作為一名app產(chǎn)品設(shè)計(jì)，對(duì)于這幾個(gè)含義理解之后，融匯到app設(shè)計(jì)的情境下，會(huì)讓你對(duì)之前工作流中的『交互設(shè)計(jì)』有全新的認(rèn)識(shí)。
眾所周知，交互設(shè)計(jì)借鑒了心理學(xué)/設(shè)計(jì)/藝術(shù)和情感等基本原則來(lái)保證用戶(hù)得到積極愉悅的使用、情感和操作體驗(yàn)。交互設(shè)計(jì)之所以可以成為一門(mén)學(xué)科，本質(zhì)在于可交互，而可交互的前提，是可以被感知（這個(gè)我在app的視覺(jué)美成因分析那篇文章里面已經(jīng)說(shuō)到過(guò)了），那么被感知的方式，往往是和人的五感有關(guān)。
觸覺(jué)，聽(tīng)覺(jué)，視覺(jué)，味覺(jué)，嗅覺(jué)。只要能被人的五感所感知到，不論是和空間，和機(jī)器，和生活中的物件還是和人，只要發(fā)生五感的共情，我們就說(shuō)是可以被交互的。（注意，本文中不考慮復(fù)雜多感交互，并且只考慮交互的一方是正常生物人。）
在人的五感之中，本文依舊著重討論視覺(jué)，因?yàn)榭茖W(xué)研究表明，在人五感的感知信息中，視覺(jué)視覺(jué)占比達(dá)到了驚人的83%。（其中聽(tīng)覺(jué)11%，嗅覺(jué)、觸覺(jué)、味覺(jué)機(jī)加起來(lái)占比6%），而不管是什么設(shè)計(jì)，如果可視性不佳，都不能算得上優(yōu)秀。
唐納德·諾曼將交互的可視性原則歸納為和五種基本心理概念相關(guān)，這五中基本概念分別是：
示能（Affordance）、意符（Signifiers）、映射（Mapping）、反饋（Feedback）和概念模型（Conceptual Models）
i.示能（Affordance）
示能的概念和內(nèi)涵來(lái)源于吉普森（J. J. Gibson）。此外，關(guān)于有形物品如何傳達(dá)出人們與它們互動(dòng)的重要信息，這個(gè)特性被吉普森命名為“示能”。
"示能"這個(gè)詞，狹義的理解一下，是從可視性的角度明確了一個(gè)物理對(duì)象與人之間的關(guān)系。示能是物品的特性與決定物品預(yù)設(shè)用途的主體的能力之間的關(guān)系。示能的體現(xiàn)，由物品的品質(zhì)同與之交互的主體的能力共同決定。示能的存在與否取決于物品和主體的屬性。
還是舉那個(gè)諾曼最經(jīng)典的例子，如下圖所示：
總結(jié)：如果這個(gè)門(mén)上沒(méi)有把手，作為我們?nèi)祟?lèi)的認(rèn)知而言，可能會(huì)認(rèn)為這個(gè)門(mén)不能從外面被打開(kāi)，但是如果這就是一個(gè)能從外面被打開(kāi)的門(mén)，但是忘記設(shè)計(jì)外面的把手，那就意味著，這個(gè)物體"示能"的視覺(jué)通道被堵塞。
視覺(jué)通道被堵塞的"示能"可以被認(rèn)為是一種"反示能"
"反示能"對(duì)交互作用是起到抵制作用的。也就是說(shuō)，如果這個(gè)門(mén)是可以從外面被打開(kāi)，但是我為了不讓大家從外面打開(kāi)，我在設(shè)計(jì)之初不加從外面打開(kāi)的把手，一定程度上就可以抑制大家從外面打開(kāi)的這種行為。
所以為了更有效的展現(xiàn)某些物體的視覺(jué)可交互，示能和反示能都必須被揭示出來(lái)，即可被覺(jué)察到。如果示能和反示能不能夠被覺(jué)察到，就需要人為的把它們都標(biāo)識(shí)出來(lái)，我們聽(tīng)過(guò)一些有效的手段就可以做到，比如在直立的木頭一側(cè)加上一個(gè)『把手』，這個(gè)把手就是"木頭這種物體可以被人軸轉(zhuǎn)動(dòng)"這種"示能"的一個(gè)提示線(xiàn)索，你只需要旋轉(zhuǎn)把手，稍加用力即可發(fā)現(xiàn)這個(gè)"示能"。
所以，我們把這種揭示"示能"的符號(hào)、提示功能、線(xiàn)索、稱(chēng)為『意符』
ii.意符（Signifiers）
示能決定可能進(jìn)行哪些操作。意符則點(diǎn)名操作的位置。
意符：用戶(hù)界面上的意義符號(hào)，簡(jiǎn)而言之，就是一切用戶(hù)感知中可以點(diǎn)擊產(chǎn)生反饋的功能集合。
示能和意符的關(guān)系
示能揭示了世界上作為主體的人（這里只考慮人），如何與其他東西進(jìn)行互動(dòng)的可能性。
一些示能是可視覺(jué)感知的，一些則是需要視覺(jué)之后聯(lián)想感知（即不可直接感知）的。
意符指示能操作的位置。
一些意符是生活中的符號(hào)、標(biāo)簽和圖樣，如門(mén)上用符號(hào)標(biāo)記的“推”、“拉”或“出口”，或指示所要采取行動(dòng)的箭頭和圖示，或是朝向某個(gè)方向的手勢(shì)，或其他的說(shuō)明。一些意符僅僅是預(yù)設(shè)用途，譬如門(mén)的把手，或某個(gè)開(kāi)關(guān)的物理結(jié)構(gòu)。
在設(shè)計(jì)中，（尤其是UI設(shè)計(jì)中）意符比示能更重要。
iii.映射（Mapping）
有一些自然映射是生物本能的或者是文化賦予的，比如如按照通常的習(xí)慣向上移動(dòng)手勢(shì)意思是增加，向下移動(dòng)意味著減少，。當(dāng)一系列可能的操作是可見(jiàn)的，當(dāng)控制和顯示契合自然映射時(shí)，設(shè)備就會(huì)容易使用。
iv.反饋（Feedback）
反饋是控制論、信息論的著名概念。當(dāng)我們做出了一個(gè)操作的時(shí)候，內(nèi)心的預(yù)期是需要獲得反饋的，如果在一個(gè)該獲得反饋的地方?jīng)]有獲得反饋，人就會(huì)很疑惑，比如如果一個(gè)app的按鈕點(diǎn)擊之后沒(méi)有跳轉(zhuǎn)或者沒(méi)有新的變化，那么人就會(huì)呆滯，如果反饋不及時(shí)，人還有可能會(huì)放棄。（比如網(wǎng)絡(luò)不好導(dǎo)致的跳出率，比如一個(gè)不可點(diǎn)擊的按鈕做得太逼真用戶(hù)瘋狂點(diǎn)擊發(fā)現(xiàn)沒(méi)反應(yīng)之類(lèi)）
過(guò)多的反饋可能比過(guò)少的反饋更惱人。設(shè)計(jì)拙劣的反饋可能是旨在降低成本，最糟糕的是不恰當(dāng)?shù)臒o(wú)法解釋的反饋。指手畫(huà)腳的人通常是正確的，但他們的評(píng)論和意見(jiàn)如此之多，嘮叨不停，會(huì)令人分心，而不是給予幫助。
v.概念模型（Conceptual Models）
概念模型通常是高度簡(jiǎn)化的使用說(shuō)明，告訴你事物是如何工作的。概念模型只要有用就行，不必完整或準(zhǔn)確。概念模型通常可以從設(shè)備本身推斷出來(lái)，一些模型通過(guò)人與人相授，還有一些來(lái)自手冊(cè)。（比如app新版本中那些半透明箭頭加上文字的功能指引就是概念模型的一種，手游中一開(kāi)始的新手指引也是。）
PART 2 - 屏幕的示能與基本的交互方式
一個(gè)人和一塊（未通電的）觸摸屏幕，在不借助道具的情況下到底能衍生出多少種交互方式？從五感出發(fā)去深入剖析的話(huà)大概分為：
嗅覺(jué)：用鼻子聞一聞這塊屏。（發(fā)現(xiàn)并沒(méi)有味道）
聽(tīng)覺(jué)：用耳朵聽(tīng)那塊屏發(fā)出的聲音。（發(fā)現(xiàn)并聽(tīng)不到什么聲音）
味覺(jué)：用舌頭舔一舔這塊屏。（誒有點(diǎn)咸？）
視覺(jué)：用眼睛去看這塊屏。（這是一塊光滑的類(lèi)似于玻璃的物體）
你們發(fā)現(xiàn)了么，對(duì)于一個(gè)原始的屏幕設(shè)備，比如手機(jī)，我們忽略按鈕什么的物理按鍵，光思考那塊沒(méi)用通電的屏幕，如果你作為一個(gè)心智未開(kāi)化的人（或者現(xiàn)在假設(shè)你就是一只猴），你真正對(duì)屏幕有建設(shè)的交互一定是在觸覺(jué)上。我們不妨換位思考一下下，你現(xiàn)在是20年一個(gè)準(zhǔn)備做概念手機(jī)的交互專(zhuān)家，你去窮舉任何人和屏幕的交互，唯一有『肢體接觸』的方法就是用手指（或者腳趾）去觸摸，還有就是用舌頭舔。用舌頭舔會(huì)有口水，不利于屏幕的識(shí)別，萬(wàn)一漏電了畫(huà)面太美不敢想。
所以，結(jié)論是，人類(lèi)看到一塊屏幕設(shè)備，這塊屏幕設(shè)備的視覺(jué)示能最終導(dǎo)向了，人和屏幕的交互手段被定位在觸覺(jué)上，而腳趾相對(duì)于人類(lèi)來(lái)說(shuō)沒(méi)有手指靈活，所以最終我們把交互規(guī)定到手與屏幕的交互（簡(jiǎn)稱(chēng)交互手勢(shì)）。
觸覺(jué)
手指和屏幕的交互方式
現(xiàn)今的所有的手勢(shì)交互，我們基本操作分為：
一根手指：?jiǎn)螕簟㈦p擊、長(zhǎng)按、拖動(dòng)、上下滑、左右滑。
兩根手指：?jiǎn)螕簟㈦p擊、長(zhǎng)按、拖動(dòng)、上下滑、左右滑、擴(kuò)張放大、收縮縮小、旋轉(zhuǎn)。
三根手指：?jiǎn)螕簟㈦p擊、長(zhǎng)按、拖動(dòng)、上下滑、左右滑、擴(kuò)張放大、收縮縮小、旋轉(zhuǎn)、捏按。
四根手指：?jiǎn)螕簟㈦p擊、長(zhǎng)按、拖動(dòng)、上下滑、左右滑、擴(kuò)張放大、收縮縮小、旋轉(zhuǎn)、捏按。
五根手指：?jiǎn)螕簟㈦p擊、長(zhǎng)按、拖動(dòng)、上下滑、左右滑、擴(kuò)張放大、收縮縮小、旋轉(zhuǎn)、捏按。
雙手雙指：?jiǎn)螕簟㈦p擊、長(zhǎng)按、拖動(dòng)、上下滑、左右滑、擴(kuò)張放大、收縮縮小、旋轉(zhuǎn)。
雙手十指：?jiǎn)螕簟㈦p擊、長(zhǎng)按、拖動(dòng)、上下滑、左右滑、擴(kuò)張放大、收縮縮小、旋轉(zhuǎn)。
在手機(jī)app的交互手勢(shì)，（除開(kāi)游戲以外）一般單指雙指即可解決。而先現(xiàn)今科技下，相對(duì)于大屏幕一些的平板電腦，無(wú)論是ipad還是Andriod廠(chǎng)商，都會(huì)引入三指，四指甚至五指的部分交互手勢(shì)。
PART 3 - 手機(jī)app中的意符分析
在設(shè)計(jì)中，尤其是UI設(shè)計(jì)中，意符比示能更重要。
理解這句話(huà)的本質(zhì)是因?yàn)橐粔K屏幕上人需要設(shè)計(jì)圖形、按鈕、內(nèi)容。去讓他完成一些具體事情，所以在屏幕顯示的軟件中的意義符號(hào)就需要有很深的引導(dǎo)性。
還記得之前我的定義么？用戶(hù)界面上的意義符號(hào)，簡(jiǎn)而言之，就是一切用戶(hù)感知中可以點(diǎn)擊產(chǎn)生反饋的功能集合。
角度一、首先從功能屬性上進(jìn)行分析：
第一層
NavigationBar上的意符為『消息』、『搜索框』、『歷史』和『下載』，本質(zhì)上是以功能名字命名的意符，其意符的表現(xiàn)形式為圖片+文字。沒(méi)啥好說(shuō)的，每一項(xiàng)映射到自己的功能詳情。
第二層
Tab的分類(lèi)共有『熱門(mén)』、『分類(lèi)』、『康永來(lái)了』、『直播』和『廣播』，其意符的表現(xiàn)形式為文字，這里大家看到『熱門(mén)』標(biāo)簽本身變成橘黃色且下面有一個(gè)橘黃色細(xì)線(xiàn)，這是兩個(gè)符號(hào)是通過(guò)這么多年的用戶(hù)教育之后形成的意義共識(shí)，意義為：當(dāng)前頁(yè)面狀態(tài)。
如果這時(shí)候我右滑界面（采取的交互手勢(shì)是單指向左輕滑），會(huì)發(fā)生什么事情？提供兩個(gè)選項(xiàng)：
A、到『分類(lèi)』頁(yè)面。
B、到『訂閱』頁(yè)面。
詳細(xì)絕大多數(shù)人都能答對(duì)，這里的正確答案是A，滑動(dòng)到下一個(gè)tab『分類(lèi)』。大家只知其所以然，感覺(jué)這里的tab本身就是靠滑動(dòng)手勢(shì)來(lái)控制的，但是更深層次的原因呢？為什么？
這里涉及到一個(gè)滑動(dòng)切換tab的遍歷解構(gòu)，粗淺的解釋就是，在喜馬拉雅這個(gè)app中，『首頁(yè)』UI中的TabBar上的『熱門(mén)』、『分類(lèi)』、『康永來(lái)了』、『直播』和『廣播』都是歸屬于當(dāng)前BottomBar『首頁(yè)』的，所以我們?cè)诨瑒?dòng)操作的時(shí)候應(yīng)從當(dāng)前深度的最近層開(kāi)始交互。
如果用戶(hù)滑動(dòng)這個(gè)頁(yè)面只能在首頁(yè)的5個(gè)tab之間切換，我們認(rèn)為他是下圖的第一種，也即是在單一Bottom模塊下切換（Hozin將其命名為獨(dú)立Sub Navi切換，Sub Navi的意思其實(shí)也就是底部的Bottom navigation bar的意思，我上文中就直接簡(jiǎn)稱(chēng)BottomBar了，個(gè)人命名習(xí)慣而已大家能懂是這個(gè)意思就行），而另一種情況是有些app當(dāng)滑動(dòng)到最后一個(gè)tab，再右滑屏幕會(huì)進(jìn)入到第二個(gè)Bottom模塊，既是下圖第二種的b-C和f-G的過(guò)程。雖然現(xiàn)在這種設(shè)計(jì)方式已經(jīng)鮮有app在繼續(xù)使用了，但是我在2017年的今天仍然是遇到了一些。并且有個(gè)特別而精彩的地方在于，一般情況下，b-C和f-G的滑動(dòng)切換Bottom模塊的這個(gè)交互往往是不可逆的。這點(diǎn)就比較有趣了，關(guān)于這個(gè)更深層次的原因可能是開(kāi)發(fā)的原因，可能是產(chǎn)品沒(méi)法做到每一個(gè)Bottom都有tab，也可能是因?yàn)閯e的app信息架構(gòu)方面的原因，在這里就不展開(kāi)了。
我們?cè)倮^續(xù)單獨(dú)看這個(gè)第二層：
分兩種情況去分析：
第一種情況：之前首頁(yè)只有四個(gè)tag，而新加了一個(gè)以具體內(nèi)容ip產(chǎn)品名（比如康永來(lái)了也好，或者明天老羅來(lái)了也罷）作為顯示，實(shí)則是每日優(yōu)選的一個(gè)強(qiáng)視覺(jué)tag，為的是引導(dǎo)用戶(hù)點(diǎn)擊具體ip產(chǎn)品之后看到每日優(yōu)選的這個(gè)列表，從而為別的每日優(yōu)選這個(gè)列表頁(yè)導(dǎo)流。（我認(rèn)為對(duì)于一個(gè)成熟的產(chǎn)品團(tuán)隊(duì)，不太可能是這種情況）
第二種情況：之前首頁(yè)就有『每日優(yōu)選』這個(gè)tag，只不過(guò)后來(lái)為了運(yùn)營(yíng)或者強(qiáng)視覺(jué)需求，改成了具體ip產(chǎn)品名。（我傾向于第二種假設(shè)）
我猜測(cè)喜馬拉雅的團(tuán)隊(duì)本質(zhì)上是希望借助類(lèi)似于康永來(lái)了這樣大的ip露出，通過(guò)從視覺(jué)上的突出（視覺(jué)突出這一點(diǎn)確實(shí)做得很好）從而博取用戶(hù)流量，然后讓用戶(hù)通過(guò)查看『康永來(lái)了』這個(gè)具象的興趣點(diǎn)tab，進(jìn)入每日優(yōu)選的這個(gè)列表，從而為別的每日優(yōu)選產(chǎn)品導(dǎo)流。
從文案層面來(lái)說(shuō)『康永來(lái)了』確實(shí)比『每日優(yōu)選』更吸引人，但是如果是我來(lái)設(shè)計(jì)這個(gè)地方的話(huà)，我個(gè)人傾向還是放一個(gè)每日優(yōu)選的tag，畢竟這是所有用戶(hù)都能懂的語(yǔ)言，而康永是誰(shuí)？這個(gè)問(wèn)題畢竟不是所有人都知道的。
如果實(shí)在是通過(guò)數(shù)據(jù)或者產(chǎn)品運(yùn)營(yíng)需求表示，我們需要強(qiáng)調(diào)『每日優(yōu)選』的話(huà)，那我會(huì)把每日優(yōu)選的視覺(jué)也做得像現(xiàn)在康永來(lái)了一樣突出，但是名字不能變，還得叫『每日優(yōu)選』。
那如果康永來(lái)了這個(gè)ip市場(chǎng)運(yùn)營(yíng)那邊吩咐了，確實(shí)需要持久強(qiáng)推怎么辦？
辦法有，比如banner位就可以直接推，而且banner位可以直接跳轉(zhuǎn)到具體ip的詳情頁(yè)，路徑更加簡(jiǎn)短，用戶(hù)馬上就可以購(gòu)買(mǎi)，不像現(xiàn)在跳到的是一個(gè)每日優(yōu)選的列表，用戶(hù)還得通過(guò)一次點(diǎn)擊才能進(jìn)入詳情。
還有另一種極端的情況，如果有一天運(yùn)營(yíng)同學(xué)告訴我，banner位不允許一直放康永來(lái)了，但是市場(chǎng)同學(xué)又告訴我康永來(lái)了這個(gè)ip很重要，需要長(zhǎng)時(shí)間強(qiáng)推。那我的辦法可能是有以下兩種：
第一種辦法是在第三層的最前面（必聽(tīng)榜的前面）加一個(gè)獨(dú)立的康永來(lái)了tag，這樣的做法是開(kāi)發(fā)成本簡(jiǎn)單易行，但是不夠優(yōu)雅。但是你連『小雅音響』這種智能硬件購(gòu)買(mǎi)頁(yè)入口都放在上面了，多放一個(gè)運(yùn)營(yíng)強(qiáng)推ip也沒(méi)毛病啊。
第二種辦法雖然比較decent一些，是在第四層和第無(wú)層的中間開(kāi)辟一塊很小的次banner位去放，如下圖所示:
總而言之吧，第二層tab的『康永來(lái)了』一定是一個(gè)待埋點(diǎn)考量的爭(zhēng)議設(shè)計(jì)。我只是提出我個(gè)人的見(jiàn)解，不一定對(duì)，大家切勿偏聽(tīng)偏信。好了我們繼續(xù)往下看。
第三層和第四層：
圖片banner和分類(lèi)頻道icon，其意符的表現(xiàn)形式為純圖片/圖像+文字，banner嘛這個(gè)沒(méi)啥好說(shuō)的，通過(guò)自動(dòng)左右切換的圖片告知用戶(hù)一些產(chǎn)品需要告訴用戶(hù)的信息而已。分類(lèi)頻道icon我之前的幾篇文章里面都有提到一些，記得在我的文章里我說(shuō)到的格式塔原理么，大家打眼一看這個(gè)分類(lèi)頻道icon就知道右側(cè)還有一些，是可以滑動(dòng)的。
第五層和第六層：
一個(gè)常規(guī)的帶圖片的宮格列表頁(yè)，其意符的表現(xiàn)形式為圖片+文字，右上角有點(diǎn)擊更多有一個(gè)向右的圖標(biāo)表明是可以點(diǎn)擊跳頁(yè)的。到一個(gè)內(nèi)容更豐富的item列表頁(yè)。那么我問(wèn)大家一個(gè)問(wèn)題，為什么猜你喜歡的這個(gè)圖片不也做成左右滑動(dòng)的而要做成這樣固定展示6張的呢？
這里主要是有兩方面的原因，第一是做成左右滑的話(huà)，屏幕空間最多只能展現(xiàn)三張半，不如現(xiàn)在這個(gè)展示6張露出得多。第二是有一個(gè)很有趣的交互上需要注意的點(diǎn)，大家看如下圖所示：
我標(biāo)記藍(lán)色線(xiàn)框的部分大家看到了沒(méi)，這個(gè)banner也是可以滑動(dòng)，分類(lèi)頻道icon也是可以滑動(dòng)的，整個(gè)頁(yè)面Tab也是可以點(diǎn)擊跳轉(zhuǎn)的。這也就意味著，如果要執(zhí)行tab滑動(dòng)跳轉(zhuǎn)這個(gè)交互手勢(shì)，我想能采用的滑動(dòng)熱如右圖紅色所示，區(qū)域本身就已經(jīng)很小了。如果下面猜你喜歡也做成可以左右滑動(dòng)的話(huà)，那么Tab的滑動(dòng)手勢(shì)熱區(qū)面積更小了。如果真是那樣的話(huà)，那這個(gè)Tab就不該設(shè)計(jì)成可以滑動(dòng)加載的。
所以說(shuō)，app中的意義符號(hào)設(shè)計(jì)直接決定了這個(gè)app的易用性。不要亂來(lái)。
第七層：
這就是bottombar具體沒(méi)什么好講的了，也就是五個(gè)圖形意符，各自表示著自己的意義映射。現(xiàn)在很多app中大家會(huì)發(fā)現(xiàn)有些底部是只有icon沒(méi)有文字的，有些是帶了icon也帶了文字的，帶文字的目的也是為了解決圖形聯(lián)想帶來(lái)的意義映射路徑多的情況。這個(gè)不多說(shuō)了。來(lái)看第二個(gè)角度。
角度二、從視覺(jué)上進(jìn)行分析：
按照視覺(jué)強(qiáng)弱來(lái)看，『康永來(lái)了』、『banner』、『猜你喜歡』是頁(yè)面最重的視覺(jué)部分，其次是頻道入口icon和下面的Bottombar，最后是navigationbar上的小溪、搜索、歷史和下載。從視覺(jué)上看，其實(shí)作為內(nèi)容平臺(tái)的喜馬拉雅設(shè)計(jì)的很贊，沒(méi)有任何問(wèn)題。內(nèi)容產(chǎn)品本身占有最強(qiáng)視覺(jué)強(qiáng)度，功能意符占有較弱視覺(jué)強(qiáng)度。這就是為什么猜你喜歡要用圖片+文字的宮格列表，不用類(lèi)似于item之類(lèi)的原因，因?yàn)楸热邕@里的每一個(gè)節(jié)目都換成是一個(gè)item，那視覺(jué)只集中左邊的圖片上，而不像現(xiàn)在三張圖片這樣聚焦。
PART 4 - 手機(jī)app中的意符設(shè)計(jì)需要辯證的幾小點(diǎn)
一、BottomBar上的意符到底要不要加文字？
手機(jī)中可供點(diǎn)擊反饋的意符設(shè)計(jì)分為很多種，有純圖片的（比如banner），有圖形+文字的（比如BpttomBar上的那些），有純文字的（不如上文中喜馬拉雅的切換tab，比如『點(diǎn)擊查看更多』、『點(diǎn)擊展開(kāi)』、『滑動(dòng)加載』之類(lèi)具有誘導(dǎo)性的文案），還有純圖形的『比如像『一個(gè)One』這樣的app底部BottomBar是只有圖片不帶文字的』，還有一些是按鈕形式的。
在這些意符的設(shè)計(jì)中，意義識(shí)別是尤其需要被設(shè)計(jì)的。如果一個(gè)圖形無(wú)法表現(xiàn)他應(yīng)有的意義，那就一定要在附近加上文字形成一個(gè)完整的意符。
舉個(gè)例子：已下載這個(gè)icon已經(jīng)被所有app用爛了，大家一聽(tīng)就知道應(yīng)該包含一個(gè)向下的箭頭，比如歷史記錄也是，大家都能想到是一個(gè)時(shí)鐘，這就是長(zhǎng)期教育用戶(hù)之后用戶(hù)產(chǎn)生的意義聯(lián)想。所以喜馬拉雅和騰訊視頻中的這兩個(gè)意符設(shè)計(jì)，一個(gè)是帶文字，一個(gè)是不帶文字，都不影響用戶(hù)識(shí)別體驗(yàn)。
但是比如再舉一個(gè)例，『我的』圖標(biāo)，現(xiàn)在大家都習(xí)慣用一個(gè)『人頭像』，而一切新奇的產(chǎn)品比如說(shuō)『氧氣app』，才用的是一個(gè)圓圈，那么這個(gè)時(shí)候如果是意義識(shí)別為主導(dǎo)的產(chǎn)品（比如電商啊或者用戶(hù)不是那么年輕的）就會(huì)選擇在下面加上一行中文。這樣的話(huà)在圖形上發(fā)揮得再不易識(shí)別，也可以借助文字瞬間映射到。
那比如像『一個(gè)One』、『Medium』和『500px』這樣的眾多app，他們的BottomBar都是一個(gè)純圖形：
純圖形帶來(lái)的其實(shí)是一種新奇感和簡(jiǎn)潔的設(shè)計(jì)感。相對(duì)的，和用戶(hù)需要花更長(zhǎng)時(shí)間的視覺(jué)判斷，比如第一張圖是『一個(gè)One』，第2，3，4個(gè)icon其實(shí)很易識(shí)別：一本書(shū)，一個(gè)音符和一個(gè)播放三角能夠很簡(jiǎn)潔的代表文章，音樂(lè)和視頻。第二張圖相對(duì)就沒(méi)有那么容易識(shí)別了，尤其是第三個(gè)圖標(biāo)，意義指向不明確，但是由于Medium是一個(gè)國(guó)外設(shè)計(jì)師聚集的網(wǎng)站，所以其實(shí)也還好，設(shè)計(jì)感在一定程度上會(huì)優(yōu)于識(shí)別也沒(méi)問(wèn)題。圖3是500px，這5個(gè)icon就更易識(shí)別了。
所以，如果你采取無(wú)文字的BottomBar，那么請(qǐng)UI設(shè)計(jì)師用心設(shè)計(jì)你的icons。
二、設(shè)置引導(dǎo)用戶(hù)點(diǎn)擊加載的意符應(yīng)該如何設(shè)計(jì)?
有一個(gè)app需要設(shè)計(jì)這樣一個(gè)功能：文字默認(rèn)折疊展示3行，但是點(diǎn)擊之后需要（非跳頁(yè)）加載全文，那么請(qǐng)問(wèn)需要設(shè)置怎樣的意符引導(dǎo)用戶(hù)點(diǎn)擊？
傳統(tǒng)的大概是三種方案：
第一是在文字第三行的前四個(gè)字用其他顏色（比如藍(lán)色）標(biāo)記為『加載更多』，用戶(hù)一點(diǎn)之后加載全部（早期知乎的做法）。
第二種是在文字第三行結(jié)束之后再第四行的位置居中放一個(gè)『點(diǎn)擊加載更多』，用戶(hù)點(diǎn)擊之后加載全部。
第三種是在文字第三行結(jié)束的位置放一個(gè)省略號(hào)即可，用戶(hù)閱讀之后發(fā)現(xiàn)沒(méi)讀完，自己會(huì)嘗試點(diǎn)擊。
顯然，第三種方法僅適合社區(qū)類(lèi)app或者貼吧或者問(wèn)答類(lèi)app，因?yàn)橐话阌脩?hù)讀都很難讀完，更別說(shuō)給你點(diǎn)擊一下了。第一種和第二種也是見(jiàn)仁見(jiàn)智，一般情況下我個(gè)人推薦第一種，因?yàn)樾枰淖终郫B成三行的頁(yè)面就說(shuō)明本身畫(huà)面排布很緊張，就不要另起一個(gè)第四行放『點(diǎn)擊加載更多』了。
三、app中的按鈕設(shè)計(jì)，什么時(shí)候應(yīng)該有push色，什么時(shí)候應(yīng)該沒(méi)有?
push色這個(gè)東西在網(wǎng)頁(yè)上有別的更多作用，但是在app中，一般就只用來(lái)反饋行為。
有兩種情況：
第一種是你點(diǎn)擊某個(gè)意符，這個(gè)意符發(fā)生變化（顏色或樣式變化）同時(shí)跳轉(zhuǎn)。
第二種是你點(diǎn)擊某個(gè)意符，這個(gè)意符完全不發(fā)生變化但是頁(yè)面跳轉(zhuǎn)。
從用戶(hù)期待每次行為都得到反饋的心理上來(lái)說(shuō)，我們當(dāng)然希望所有的意符都能呈現(xiàn)及時(shí)反饋以證明你的點(diǎn)擊行為是有效的（也就是上面的第一種）。但是有時(shí)候由于反饋動(dòng)效我們寫(xiě)得不盡如人意問(wèn)題，我們看到冗長(zhǎng)（哪怕只有半秒）切重復(fù)的的反饋內(nèi)心就會(huì)就會(huì)很煩。
舉個(gè)例子比如原生安卓的Material Design點(diǎn)擊每個(gè)item都會(huì)出現(xiàn)一個(gè)水波動(dòng)效反饋，當(dāng)然原生Material Design的動(dòng)效是足夠優(yōu)秀的，所以我們會(huì)覺(jué)得很有新奇感。但是你們?nèi)绻囋嚢寻沧康倪@個(gè)動(dòng)效拉長(zhǎng)別說(shuō)一倍，拉長(zhǎng)三分之一。你們一定會(huì)崩潰的相信我。
PART 4 - 總結(jié)
1、app產(chǎn)品設(shè)計(jì)和UI的設(shè)計(jì)中，意符的設(shè)計(jì)是當(dāng)眾最重要的一環(huán)，因?yàn)槊恳粋€(gè)意符作為產(chǎn)品的功能入口和行為入口，它們不光光是產(chǎn)品的流量節(jié)點(diǎn)。更是app產(chǎn)品信息架構(gòu)的核心體現(xiàn)。
2、在設(shè)計(jì)app的意符的時(shí)候，要更多的考慮到意符所蘊(yùn)含的具體交互手勢(shì)（比如喜馬拉雅的tab bar就包含了滑動(dòng)和點(diǎn)擊）以及具體的對(duì)用戶(hù)行為的思辨。
3、app中意符的設(shè)計(jì)一定是框架層面的設(shè)計(jì)，他的本身視覺(jué)層級(jí)不易過(guò)高，最好不能超過(guò)app主體信息。
4、意符的意義映射要盡可能的單一，最好能讓用戶(hù)一眼就了解這個(gè)意符是代表什么功能什么意義。
5、app意符的觀察、分析、設(shè)計(jì)是一個(gè)長(zhǎng)期的過(guò)程，大家可以試著多問(wèn)自己一些為什么。
