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)典的例子，如下圖所示：
從視覺(jué)上看這張圖，我們從以往的生活經(jīng)驗(yàn)聯(lián)想一種方形的，帶紋路的黃色物質(zhì)，再配合長(zhǎng)期的視覺(jué)線索，我們會(huì)知道這張圖上是一個(gè)木塊，那從我們的視覺(jué)線索上，知道這個(gè)木板很細(xì)，（應(yīng)該）能夠輕易被折斷；而且很輕，（應(yīng)該）可以輕易被搬走。這些就是我們通過(guò)視覺(jué)判斷這張圖上呈現(xiàn)的"示能"，而明確的我們和圖上這個(gè)木材的交互關(guān)系。
那再看這張圖：
我們通過(guò)生活經(jīng)驗(yàn)的聯(lián)想可以知道這是一個(gè)木門(mén)，為什么會(huì)區(qū)別這是木門(mén)而不是上面的木材呢？主要原因是因?yàn)檫@上面有個(gè)『把手』。在人的視覺(jué)中，有時(shí)候觀測(cè)物體的某項(xiàng)"示能"是清晰可見(jiàn)的，比如上圖那個(gè)木材可以被輕易搬動(dòng)，而有很多物品的"示能"是不可輕易被感知的，比如上面那張木材的圖，我們就不能感知到這個(gè)木材是可以被『軸轉(zhuǎn)動(dòng)』的。
而這張門(mén)的圖上，大家想象自己是一個(gè)什么都不知道的野人，看到上面這個(gè)圖，只有一塊特別顯眼的『把手』，你作為高智慧生物，是不是應(yīng)該去觸摸一下，并且企圖能夠與『把手』進(jìn)行互動(dò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è)提示線索，你只需要旋轉(zhuǎn)把手，稍加用力即可發(fā)現(xiàn)這個(gè)"示能"。
所以，我們把這種揭示"示能"的符號(hào)、提示功能、線索、稱(chēng)為『意符』
ii.意符（Signifiers）
劃重點(diǎn)：示能決定可能進(jìn)行哪些操作。意符則點(diǎn)名操作的位置。
在我的文章《交互閑談02丨app中的非必要功能和用戶(hù)界面上的流量法則》中，我對(duì)app中的意符進(jìn)行了自己的定義：
用戶(hù)界面上的意義符號(hào)，簡(jiǎn)而言之，就是一切用戶(hù)感知中可以點(diǎn)擊產(chǎn)生反饋的功能集合。
但是這是在以屏幕為介質(zhì)的用戶(hù)界面中我個(gè)人下的定義，但是在實(shí)際生活中，人們尋找蛛絲馬跡，尋找任何可以幫助他們應(yīng)對(duì)和理解的符號(hào)。任何可能標(biāo)識(shí)出有意義的信息的符號(hào)都顯得非常重要。人們所需要的和設(shè)計(jì)師必須提供的視覺(jué)線索，就是意符。
這就是為什么蘋(píng)果第一代手機(jī)出來(lái)的時(shí)候會(huì)被大家奉為圭臬的原因，他在視覺(jué)上示能和意符都及其突出，一塊屏幕和一個(gè)按鈕，屏幕用戶(hù)點(diǎn)擊滑動(dòng)交互，按鈕用于點(diǎn)擊交互，學(xué)習(xí)成本很低。大家試想一下之前的塞班系統(tǒng)，左上角和右上角兩個(gè)按鈕是和屏幕左下方的功能和右下方的功能映射，雖然也很易于理解，但是當(dāng)大家看到蘋(píng)果這么簡(jiǎn)單的手機(jī)的時(shí)候，相信所有人都是驚訝的：
△.示能和意符的關(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)。
劃重點(diǎn)：在設(shè)計(jì)中，（尤其是UI設(shè)計(jì)中）意符比示能更重要。
示能和意符是本文中最重要的，下文會(huì)說(shuō)到在app中的意符設(shè)計(jì)。
后面的映射，反饋和概念模型內(nèi)容我簡(jiǎn)略說(shuō)：
iii.映射（Mapping）
有一些自然映射是生物本能的或者是文化賦予的，比如如按照通常的習(xí)慣向上移動(dòng)手勢(shì)意思是增加，向下移動(dòng)意味著減少，。當(dāng)一系列可能的操作是可見(jiàn)的，當(dāng)控制和顯示契合自然映射時(shí)，設(shè)備就會(huì)容易使用。（具體參考我寫(xiě)的交互閑談丨01里面那個(gè)視頻手勢(shì)的例子）
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ì)令人分心，而不是給予幫助。我記得很多年前（大概是2010年左右），還曾經(jīng)見(jiàn)到過(guò)一款應(yīng)用，用戶(hù)但凡點(diǎn)擊無(wú)效位置就會(huì)彈出一個(gè)Error的模態(tài)框，簡(jiǎn)直是令我絕望。 = =
v.概念模型（Conceptual Models）
概念模型通常是高度簡(jiǎn)化的使用說(shuō)明，告訴你事物是如何工作的。概念模型只要有用就行，不必完整或準(zhǔn)確。概念模型通?？梢詮脑O(shè)備本身推斷出來(lái)，一些模型通過(guò)人與人相授，還有一些來(lái)自手冊(cè)。（比如app新版本中那些半透明箭頭加上文字的功能指引就是概念模型的一種，手游中一開(kāi)始的新手指引也是。）
PART 2 - 屏幕的示能與基本的交互方式
一個(gè)人和一塊（未通電的）觸摸屏幕，在不借助道具的情況下到底能衍生出多少種交互方式？從五感出發(fā)去深入剖析的話大概分為：
嗅覺(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é)上，我這么說(shuō)大家能理解吧。我們不妨換位思考一下下，你現(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é)：
我們來(lái)窮舉一下手指和屏幕的交互方式：（圖片來(lái)自Graphicpear，中文是我自己加上的。)
不要糾結(jié)于圖，往下看，其實(shí)現(xiàn)今的所有的手勢(shì)交互，我們基本操作分為：
一根手指：?jiǎn)螕?、雙擊、長(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)螕?、雙擊、長(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)。
（上面寫(xiě)的雙手雙指是指每只手出一個(gè)手指，比如你們?cè)谑謾C(jī)修圖時(shí)候的某些旋轉(zhuǎn)操作）
其實(shí)你如果還要窮舉的話，還有雙手每只手一個(gè)指頭、雙手每只手兩個(gè)指頭、雙手每只手三個(gè)指頭、雙手每只手四個(gè)指頭這些奇怪的情況，但是由于現(xiàn)階段手勢(shì)足夠完成日常操作，所以日常的人和屏幕交互并沒(méi)有引入這些別的奇怪的方案。
我相信隨著科技的進(jìn)步和發(fā)展，其他的雙手的交互操作也會(huì)大面積的被引入進(jìn)來(lái)，起碼我個(gè)人在看類(lèi)似于黑鏡啊還有別的歐美科幻片的時(shí)候，不止一次見(jiàn)到了這樣的畫(huà)面。（我印象最深的是黑鏡第三季06，女主角操控手機(jī)方式是四指橫滑，然后胖大叔操作無(wú)人駕駛的騎車(chē)的時(shí)候是雙手旋轉(zhuǎn)打開(kāi)一個(gè)屏幕，然后再通過(guò)指頭拖動(dòng)目標(biāo)完成導(dǎo)航交互。）這些電影里面反應(yīng)的人的未來(lái)科技中蘊(yùn)含了很多交互方法，大家可以看電影的時(shí)候多留意一下。
有點(diǎn)扯遠(yuǎn)了，回到手機(jī)app的交互手勢(shì)，（除開(kāi)游戲以外）一般單指雙指即可解決。而先現(xiàn)今科技下，相對(duì)于大屏幕一些的平板電腦，無(wú)論是ipad還是Andriod廠商，都會(huì)引入三指，四指甚至五指的部分交互手勢(shì)。
由于今天的主題是手機(jī)app，那我們下一部分就著重主要來(lái)說(shuō)說(shuō)手機(jī)app的交互。
PART 3 - 手機(jī)app中的意符分析
在設(shè)計(jì)中，尤其是UI設(shè)計(jì)中，意符比示能更重要。
理解這句話的本質(zhì)是因?yàn)橐粔K屏幕上人需要設(shè)計(jì)圖形、按鈕、內(nèi)容。去讓他完成一些具體事情，所以在屏幕顯示的軟件中的意義符號(hào)就需要有很深的引導(dǎo)性。
還記得之前我的定義么？用戶(hù)界面上的意義符號(hào)，簡(jiǎn)而言之，就是一切用戶(hù)感知中可以點(diǎn)擊產(chǎn)生反饋的功能集合。
我們閑言少敘，先來(lái)看一個(gè)例子：
如圖是喜馬拉雅FM的app首頁(yè)UI，我將從功能屬性、視覺(jué)焦點(diǎn)兩個(gè)角度，一排一排的進(jì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ì)線，這是兩個(gè)符號(hào)是通過(guò)這么多年的用戶(hù)教育之后形成的意義共識(shí)，意義為：當(dāng)前頁(yè)面狀態(tài)。這里我有一個(gè)小問(wèn)題，大家猜如果這時(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)，關(guān)于這個(gè)，我的網(wǎng)友@HoZiN老法師（大霧）的《淺議滑動(dòng)Flick切換Tab導(dǎo)航 - 知乎專(zhuān)欄》這篇文章寫(xiě)得很棒，大家可以去看看。在這里我做粗淺的解釋?zhuān)谙柴R拉雅這個(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)始交互。
如@HoZiN的下圖所示：
如果用戶(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è)第二層：
是不是發(fā)現(xiàn)有一個(gè)奇怪的格格不入的叫做『康永來(lái)了』的東西混了進(jìn)來(lái)？這里我就必須吐槽一下喜馬拉雅的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)了，作為一個(gè)普通用戶(hù)，我本能的以為這個(gè)tab下一定是和康永來(lái)了有關(guān)的內(nèi)容整合，放在這里是因?yàn)檫\(yùn)營(yíng)需要，這個(gè)其實(shí)在內(nèi)容平臺(tái)上很常見(jiàn)，大家看QQ視頻和愛(ài)奇藝他們不也經(jīng)常這么干，本身是一件無(wú)可厚非的產(chǎn)品推廣的入口常態(tài)，然后我滑過(guò)去了發(fā)現(xiàn)其實(shí)他是『每日優(yōu)選』的一個(gè)頻道，只不過(guò)最近主推蔡康永的這擋音頻節(jié)目：
如上圖所示，這個(gè)奇怪的『康永來(lái)了』的tab歸屬到的不是康永來(lái)了的音頻詳情頁(yè)，而是一個(gè)『每日優(yōu)選』的列表頁(yè)，那我就認(rèn)為這個(gè)設(shè)計(jì)是欠妥的。
我為什么說(shuō)這樣的設(shè)計(jì)欠妥，其原因如下：
因?yàn)槲掖_實(shí)是有幾個(gè)月沒(méi)有使用過(guò)喜馬拉雅了，我不記得『康永來(lái)了』這個(gè)位置之前是不是叫『每日優(yōu)選』，還是之前首頁(yè)只有四個(gè)tag，這個(gè)希望有關(guān)注的讀者下方給我留言確認(rèn)一下。
那既然我不確定，我們不妨分兩種情況去分析：
第一種情況：之前首頁(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è)地方的話，我個(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ì)把每日優(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位去放，如下圖所示:
但是我個(gè)人是不推薦這種做法的，哪怕未來(lái)這個(gè)次banner可以擴(kuò)展為多個(gè)次banner輪播我也不推薦，因?yàn)槿绻沁@樣的話，用戶(hù)首頁(yè)第一屏留給『猜你喜歡』的內(nèi)容展示就很有限了。
總而言之吧，第二層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è)就更沒(méi)啥好說(shuō)的了，就是一個(gè)常規(guī)的帶圖片的宮格列表（我習(xí)慣這么叫他們，你們想怎么叫都行）頁(yè)，其意符的表現(xiàn)形式為圖片+文字，右上角有點(diǎn)擊更多有一個(gè)向右的圖標(biāo)表明是可以點(diǎn)擊跳頁(yè)的（具體參看我寫(xiě)的分割線那篇文章）。到一個(gè)內(nèi)容更豐富的item列表頁(yè)。那么我問(wèn)大家一個(gè)問(wèn)題，為什么猜你喜歡的這個(gè)圖片不也做成左右滑動(dòng)的而要做成這樣固定展示6張的呢？
這里主要是有兩方面的原因，第一是做成左右滑的話，屏幕空間最多只能展現(xiàn)三張半，不如現(xiàn)在這個(gè)展示6張露出得多。第二是有一個(gè)很有趣的交互上需要注意的點(diǎn)，大家看如下圖所示：
我標(biāo)記藍(lá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)的話，那么Tab的滑動(dòng)手勢(shì)熱區(qū)面積更小了。如果真是那樣的話，那這個(gè)Tab就不該設(shè)計(jì)成可以滑動(dòng)加載的。
所以說(shuō)嘛，app中的意義符號(hào)設(shè)計(jì)直接決定了這個(gè)app的易用性。不要亂來(lái)。
第七層：這就是bottombar具體沒(méi)什么好講的了，也就是五個(gè)圖形意符，各自表示著自己的意義映射?，F(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)在三張圖片這樣聚焦。
最后拋出一個(gè)視覺(jué)上BottomBar的問(wèn)題，現(xiàn)在很多app會(huì)在實(shí)心icon還是線性icon上面糾結(jié)，知乎的BottomBar一直采用實(shí)心icon，而Airbnb一直采用線性icon，到底為什么？
我會(huì)在下一期的交互閑談里面說(shuō)這個(gè)問(wèn)題，大家也可以想一想，其實(shí)（如果我理解的沒(méi)錯(cuò)的話）答案就在我上面這段論述中。
PART 4 - 手機(jī)app中的意符設(shè)計(jì)需要辯證的幾小點(diǎn)
一個(gè)擅長(zhǎng)app中意符設(shè)計(jì)的人，本質(zhì)就是對(duì)appUI設(shè)計(jì)有十足把握的人，關(guān)于這里的幾點(diǎn)辯證只是提出來(lái)說(shuō)一下，具體的UI設(shè)計(jì)過(guò)程中這樣的問(wè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ì)選擇在下面加上一行中文。這樣的話在圖形上發(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)有?
這是我的微信公眾號(hào)后臺(tái)有一個(gè)小伙伴的提問(wèn)，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)自己一些為什么。
文章來(lái)源：站酷 作者：Seany
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
圖片挑選需要注意如下：
圖標(biāo)設(shè)計(jì)需要注意如下：
文字信息處理需要注意如下：
