電商類 App 是日常使用頻次非常高的應(yīng)用，它們的每一次更新改版不僅是業(yè)務(wù)的拓展、用戶需求的滿足，同時(shí)也是消費(fèi)趨勢(shì)的引領(lǐng)與跟隨。

近期淘寶 App 的許多頁面都有了較大的改動(dòng)，在分析淘寶改版的基礎(chǔ)上，通過幾個(gè)關(guān)鍵頁面的分析對(duì)比淘寶、京東、蘇寧易購(gòu)三大綜合類電商平臺(tái)的產(chǎn)品設(shè)計(jì)，希望此篇文章能讓大家對(duì)電商類 App 的產(chǎn)品設(shè)計(jì)有更深的認(rèn)識(shí)。

一、淘寶改版

前陣子淘寶進(jìn)行了改版，這次改版循序漸進(jìn)，并做了較多的 A/B 測(cè)試。

1. 主要改版頁面

上圖是淘寶幾個(gè)主要改版頁面。從視覺上看，很明顯的大圓角卡片、去線條，整體風(fēng)格統(tǒng)一輕質(zhì)化。大圓角卡片追隨了 iOS11 的風(fēng)格（App Store 中尤為突出），卡片使信息更加聚焦，模塊感更強(qiáng)；圓角卡片本身也比原先的卡片式增加了更多細(xì)節(jié)；大圓角卡片親和力高，更加活潑，也符合淘寶人群的定位。

上圖為5個(gè) tab 的頁面，這次統(tǒng)一了頭部的顏色，強(qiáng)調(diào)了品牌，統(tǒng)一性方面也得到了提升。

以下是從單個(gè)頁面的角度進(jìn)行改版分析。

2. 個(gè)人首頁

△ 舊版圖為除夕的截圖，顏色方面先不討論

新舊版本的對(duì)比，可以看出88會(huì)員、卡券包優(yōu)先級(jí)提高，會(huì)員信息更加集中、突出。這也印證了這兩年會(huì)員機(jī)制的火熱，拉新成本和難度都越來越高的情況下，鞏固老用戶才能帶來更多的價(jià)值。

新版的卡片式很突出，去掉了大部分的線條，轉(zhuǎn)而用塊面來代替線條表達(dá)層級(jí)關(guān)系。

「我的訂單」部分 icon 樣式發(fā)生了變化（7. 7. 2 版），從填充式轉(zhuǎn)變?yōu)榫€條式，突出了 icon 右上角的數(shù)字，但這一點(diǎn)在測(cè)試版本中又改回來了（后面討論）。

88會(huì)員和物流這兩塊內(nèi)容滾動(dòng)呈現(xiàn)，真正是動(dòng)效解決問題，從時(shí)間軸來解決信息量大而空間局限的問題，同時(shí)動(dòng)態(tài)效果增加了用戶吸引度。

在測(cè)試版中，這個(gè)頁面主要看到兩個(gè)點(diǎn)的變化，一個(gè)是 icon 改為原來的填充式，一個(gè)是動(dòng)效滾動(dòng)的節(jié)奏。

icon 的問題個(gè)人猜想是因?yàn)轶w量與重要性、位置的問題，線條式的體量弱于填充式。在「我的淘寶」頁面中，最重要的信息是「我的訂單」，因此需要一定的突出。另外在測(cè)試版里，「我的訂單」的上面固定的廣告位放置了旅行青蛙的廣告，此位置的突出性導(dǎo)致其弱化了底下的「我的訂單」，占用了原先「我的訂單」的 C 位，因此測(cè)試版考慮到更全的場(chǎng)景（有廣告），從而將 icon 的樣式換回了體量大的填充式。

動(dòng)效滾動(dòng)是上面說的88會(huì)員和物流，7. 7. 2版本里兩個(gè)滾動(dòng)是同時(shí)進(jìn)行的，而7. 7. 8的測(cè)試版中兩個(gè)滾動(dòng)是錯(cuò)開的。上下同時(shí)滾動(dòng)會(huì)讓人有些混亂，會(huì)讓人認(rèn)為這兩塊的信息是相互關(guān)聯(lián)的。

3. 店鋪首頁

這一塊做的 A/B 測(cè)試。店鋪頁面的改動(dòng)較大，導(dǎo)航做了較大調(diào)整。新版將常用操作和重要功能放到了底部固定；二級(jí)導(dǎo)航中的內(nèi)容讓商家自定義選擇，從而滿足不同店鋪的需求；新版一級(jí)二級(jí)導(dǎo)航較舊版層級(jí)關(guān)系明確了許多。

再來說說這次的 A/B 測(cè)試，這次的測(cè)試時(shí)間比較長(zhǎng)（從7. 7. 2到目前的7. 8. 2都在，目測(cè)到8. 0應(yīng)該會(huì)給出一個(gè)結(jié)果）。店鋪頁在導(dǎo)航上的大改動(dòng)，會(huì)在一定程度上對(duì)已經(jīng)形成習(xí)慣的老用戶造成沖擊，對(duì)頁面重新適應(yīng)和學(xué)習(xí)，有點(diǎn)類似于前攝抑制（在認(rèn)知心理學(xué)上指之前學(xué)習(xí)過的材料對(duì)保持和回憶以后學(xué)習(xí)的材料的干擾作用）。新版設(shè)計(jì)的目的一是方便用戶初期快速學(xué)習(xí)，二是中后期快速使用。對(duì)于中后期的快速使用就需要一段時(shí)間的鋪墊來獲得數(shù)據(jù)。該次測(cè)試應(yīng)該是區(qū)分各種不同的用戶，簡(jiǎn)單來說測(cè)試新用戶、老用戶分別對(duì)于新舊版本的學(xué)習(xí)，以及他們對(duì)新版本熟悉之后的使用。

4. 物流詳情

這一塊可以說是樣式上的大改。用可視化來表現(xiàn)包裹正處的位置以及即將進(jìn)行的操作，增強(qiáng)用戶感知（降低理解難度），進(jìn)一步提升對(duì)商品信息的把控感。比原先僅僅是文字展示而言生動(dòng)了許多，樣式接近外賣等待中的訂單頁面?？梢暬倘豢梢哉故靖嗟男畔?，但是在用戶非訓(xùn)練的情況下信息傳遞的速度未必比文字要更快，不同的人對(duì)圖形的理解也會(huì)有所偏差。不過介于外賣 App 的頁面已經(jīng)對(duì)很多用戶進(jìn)行了教育，相信這種理解上不會(huì)有太大難度。但是依然要在后續(xù)優(yōu)化中逐漸突出信息的重點(diǎn)。

物流詳情頁除了樣式的巨大變化，還有一個(gè)特點(diǎn)就是場(chǎng)景化細(xì)分，不同的場(chǎng)景做出了差異化。例如僅僅是物流詳情頁，根據(jù)不同的場(chǎng)景：發(fā)貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達(dá)菜鳥驛站/其他快遞點(diǎn) – 已簽收等，頁面突出的信息均有所區(qū)別。已攬件時(shí)突出快遞信息，配送時(shí)突出配送員信息等。

從場(chǎng)景細(xì)分做差異化，讓用戶獲取當(dāng)前最需要的信息這件事的出發(fā)點(diǎn)無疑是很好的，但是從上圖中，僅是快遞信息這一類信息，就出現(xiàn)了三種樣式（如上圖），并且位置也不統(tǒng)一。如果用戶是購(gòu)買了幾件不同店家的商品，這時(shí)快遞員打電話來說我是XX快遞的，快遞給你放在了某某地方，這時(shí)我想知道這是啥商品的時(shí)候，于是我就打開了物流詳情，來找快遞信息，發(fā)現(xiàn)快遞信息居然不在原來的地圖底下了，找了好一會(huì)才發(fā)現(xiàn)放到了快遞員下方。這個(gè)例子也就是說在非常見場(chǎng)景下獲取某個(gè)信息時(shí)可能需要付出額外的學(xué)習(xí)成本。

不過在7. 7. 8的測(cè)試版本中，又將快遞信息的樣式減為兩種，算是一種妥協(xié)。本人認(rèn)為，場(chǎng)景細(xì)分出發(fā)點(diǎn)是好的，但在樣式和位置兩點(diǎn)中，最好至少有一點(diǎn)是固定不變的，這樣才不會(huì)過多增加用戶的學(xué)習(xí)成本，也能涵蓋一些小概率場(chǎng)景。

5. 動(dòng)效

這兩張圖都是店鋪頁面頂部的動(dòng)效，當(dāng)用戶向下滑動(dòng)頁面時(shí)，頂部的信息會(huì)出現(xiàn)變化，也算是細(xì)分場(chǎng)景的一種，通過動(dòng)效的方式完美過渡，過渡的流暢感會(huì)讓用戶對(duì)該平臺(tái)增加些許好感。

我的淘寶這一頁的動(dòng)效解決問題在上面有說到，右邊的有好貨頁面，當(dāng)用戶在滑動(dòng)頁面時(shí)，攻略推薦一欄的圖片有依次展現(xiàn)的效果，吸引眼球，小有驚喜。

總結(jié)來看，淘寶改版的設(shè)計(jì)角度可以總結(jié)為：設(shè)計(jì)追隨目標(biāo)，品牌、會(huì)員突出，追隨設(shè)計(jì)趨勢(shì)，細(xì)分場(chǎng)景，可視化展現(xiàn)和流暢動(dòng)效。另外淘寶對(duì)設(shè)計(jì)、測(cè)試的態(tài)度上來說，設(shè)計(jì)解決實(shí)際問題，設(shè)計(jì)需要驗(yàn)證，測(cè)試要嚴(yán)謹(jǐn)。

二、淘寶與其他競(jìng)品

這里只選了京東和蘇寧易購(gòu)兩個(gè)與淘寶進(jìn)行了幾個(gè)關(guān)鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業(yè)務(wù)、頁面跳轉(zhuǎn)等問題。

1. 首頁

淘寶：整體看起來沒有什么硬傷，沒有用卡片風(fēng)格。

京東：這邊也是繼淘寶改版后不久改版上線。這邊首屏的 icon 這一塊的卡片式生硬，大有為了卡片而卡片既視感，京東秒殺這塊的整齊度不高，也有些左重右輕?！该咳展洹惯@種裝飾性較強(qiáng)的風(fēng)格也與整體卡片式簡(jiǎn)潔風(fēng)格不符?！笘|家小院」樓層次級(jí)標(biāo)題的顏色跳躍，大有喧賓奪主之感。

蘇寧易購(gòu)：目前還沒有改版。掌上搶這樓層整齊度不高，和京東類似，同時(shí)缺少層次感，部分有漸變部分沒有，非常不統(tǒng)一?！腹鋵?shí)惠」樓層視覺不平衡，而且信息層級(jí)很有問題。

2. 搜索結(jié)果頁

風(fēng)格：淘寶這頁用了無框設(shè)計(jì)，省去了中間的分割線，商品圖片尺寸較大；從左到右，圖片尺寸越來越小，分割線從無到細(xì)到粗，整體效果上淘寶和京東效果比易購(gòu)的好。

標(biāo)簽：在標(biāo)簽的處理上，易購(gòu)的標(biāo)簽非常強(qiáng)，在頁面上非常突出，喧賓奪主；京東的標(biāo)簽弱化，與淘寶類似，但完全不同類的標(biāo)簽樣式相同（秒殺與自營(yíng)），會(huì)讓人覺得有些混亂。

圖文編排：淘寶和京東都沒有硬傷，比較和諧，但易購(gòu)的圖片和文字大小間距比例不和諧，圖片與線框無論在視覺效果上還是像素上都沒有對(duì)齊；易購(gòu)底部沒有適配 iPhone X。

3. 分類頁

風(fēng)格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統(tǒng)一性而做；易購(gòu)仍然是線框區(qū)分，整體區(qū)分效果不佳。

品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購(gòu)的色彩運(yùn)用得非常多，削弱品牌感，且沒有帶來任何優(yōu)勢(shì)。

4. 商品詳情頁

此頁面我僅從節(jié)奏感這一個(gè)角度來看，上圖已經(jīng)標(biāo)出了每個(gè)頁面的節(jié)奏感給我的感受。淘寶整體的節(jié)奏感比較好，輕重緩和；京東和易購(gòu)在節(jié)奏感上做的都有些問題，重節(jié)奏之間無輕節(jié)奏的調(diào)和會(huì)缺乏呼吸感。

5. 購(gòu)物車

風(fēng)格效果：淘寶沒有用卡片風(fēng)格；京東用了卡片，導(dǎo)致大量留白，同時(shí)沒有帶來任何優(yōu)勢(shì)，蘇寧易購(gòu)整體稍顯擁擠，沒有亮點(diǎn)。

圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點(diǎn)很好保持了統(tǒng)一性；京東使用了大量的設(shè)計(jì)細(xì)節(jié)，字號(hào)、粗細(xì)、字體、顏色等等非常豐富，但整體效果并沒有很理想，稍顯瑣碎與凌亂；蘇寧易購(gòu)的文字大小與間距處理不和諧而帶來擁擠感。

其他細(xì)節(jié)：京東標(biāo)簽不同于搜索結(jié)果頁的弱化，而是非常強(qiáng)化，導(dǎo)致視覺焦點(diǎn)混亂，個(gè)別按鈕非常小，操作不便；易購(gòu)標(biāo)簽處理上比京東收斂；易購(gòu)底部 tab 與其他部分沒有區(qū)分，浮框像廣告，效果不佳，數(shù)量修改框的描邊太硬，比例不和諧。

6. 個(gè)人首頁

整體風(fēng)格：淘寶和京東都是明顯的卡片式，蘇寧易購(gòu)是廣義上的卡片式。

這里主要說一說易購(gòu)的問題：首屏出現(xiàn)「我的專場(chǎng)」的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內(nèi)容上的 bug。

7. 訂單

淘寶和京東的訂單頁個(gè)人認(rèn)為沒有什么硬傷，淘寶有個(gè)適配的問題。蘇寧易購(gòu)的問題比較多，首先是頂部「常購(gòu)清單」中沒有商品的 bug，然后是圖片與購(gòu)物車等地方的風(fēng)格不符，商品之間分割線有時(shí)有有時(shí)無，間距有問題等等。

三、總結(jié)

綜合上面具體頁面的分析可以看出淘寶在 UI 設(shè)計(jì)上的優(yōu)勢(shì)：追隨設(shè)計(jì)趨勢(shì)、統(tǒng)一性、排版和諧等。

關(guān)于統(tǒng)一性這一點(diǎn)，可能有人說京東做的更好，因?yàn)樗鼛缀跛许撁娑加昧丝ㄆL(fēng)，而淘寶沒有。個(gè)人認(rèn)為，設(shè)計(jì)風(fēng)格是次于設(shè)計(jì)目標(biāo)的，如果這種設(shè)計(jì)風(fēng)格不能很好滿足該頁面的設(shè)計(jì)目標(biāo)，建議還是以設(shè)計(jì)目標(biāo)為重；如果仍然強(qiáng)制使用該風(fēng)格的話，會(huì)得不償失。淘寶的做法是把卡片這種風(fēng)格歸類為輕質(zhì)化風(fēng)格，除了卡片以外，還有去線條、色塊等等設(shè)計(jì)語言，因此并非強(qiáng)調(diào)一定要使用卡片形式。

作為用戶，在很多時(shí)候會(huì)很容易判斷出一個(gè)網(wǎng)站的用戶體驗(yàn)是否優(yōu)秀，因?yàn)橹饔^感受是很難被欺騙的。但是作為網(wǎng)站的設(shè)計(jì)者和開發(fā)者，角色轉(zhuǎn)換之后，所需要面對(duì)問題就復(fù)雜得多。身為構(gòu)建者，要讓體驗(yàn)盡善盡美需要花費(fèi)大量的時(shí)間精力來完善整個(gè)體驗(yàn)的閉環(huán)。今天為你所整理的這7個(gè) UX設(shè)計(jì)的原則，能夠幫你更好地進(jìn)行網(wǎng)站的 UX設(shè)計(jì)，并且盡可能地將整體的用戶體驗(yàn)提升到一定高度。

1. 圍繞用戶體驗(yàn)來進(jìn)行整體設(shè)計(jì)

想要?jiǎng)?chuàng)造難忘的用戶體驗(yàn)，自然要圍繞著用戶體驗(yàn)本身來進(jìn)行設(shè)計(jì)。甚至在某種意義上來說，數(shù)據(jù)和內(nèi)容也應(yīng)該是服務(wù)于體驗(yàn)的， 它們應(yīng)該以什么樣的體驗(yàn)來呈現(xiàn)出來，這是設(shè)計(jì)者需要反復(fù)思考和琢磨的問題。

圖形、布局、文本和交互元素之間的協(xié)同工作才能創(chuàng)造體驗(yàn)，任何一個(gè)維度缺一不可，單純的信息展示是不夠的。

想讓你的網(wǎng)頁能在互聯(lián)網(wǎng)上大量的信息中脫穎而出，體驗(yàn)是至關(guān)重要的?，F(xiàn)代網(wǎng)頁中大量的視覺和交互內(nèi)容存在，是為了能通過體驗(yàn)直擊人心，這樣才能在激烈的競(jìng)爭(zhēng)中存活。

2. 網(wǎng)站內(nèi)容應(yīng)當(dāng)一目了然

如果你認(rèn)為網(wǎng)站內(nèi)容是用來讀的，那就錯(cuò)了?，F(xiàn)代用戶的注意力集中的時(shí)間非常短，絕大多數(shù)用戶在瀏覽信息的時(shí)候，都是快速掃視，而非逐字逐句地仔細(xì)閱讀，信息的展現(xiàn)一定要直觀、清晰，確保能夠一瞥就能看明白。借助信息圖表和視覺，更快地傳達(dá)信息和數(shù)據(jù)。

你需要讓你的內(nèi)容更加吸引用戶，絕大多數(shù)用戶會(huì)為觸動(dòng)它們的信息和內(nèi)容而駐足，當(dāng)他們想要了解更多的時(shí)候，才會(huì)點(diǎn)擊，了解更多。

3. 用戶想要簡(jiǎn)單而清晰的內(nèi)容

用戶只需要半秒就能判斷出網(wǎng)站設(shè)計(jì)和內(nèi)容，你需要盡量讓網(wǎng)站的交互和指引足夠清晰，顯而易見。不要讓按鈕難以被用戶發(fā)現(xiàn)，在首頁上放上一大堆的按鈕和鏈接，不如通過視覺上的引導(dǎo)，讓用戶注意到最關(guān)鍵的那個(gè) CTA按鈕。

通過迭代和測(cè)試，不斷地優(yōu)化和提升網(wǎng)站的易用性。有的設(shè)計(jì)對(duì)于絕大多數(shù)的用戶都非常有用，凸顯最重要的選項(xiàng)，允許隱藏額外的功能，并且為用戶提供顯示全部的選項(xiàng)。

除了清晰的設(shè)計(jì)，整體的一致性也很重要。統(tǒng)一的配色、交互和圖形能夠讓用戶對(duì)于后續(xù)的操作有更清晰的預(yù)期，減少用戶在后續(xù)操作過程中探索的力度，這是通過統(tǒng)一性設(shè)計(jì)提升產(chǎn)品易用性的一種方式。

4. 通用設(shè)計(jì)元素 vs 創(chuàng)造性

當(dāng)某個(gè)設(shè)計(jì)元素在其他地方很常見的時(shí)候，它就已經(jīng)形成了特定的 UI 模式，盡量不要去修改它，哪怕是很富有創(chuàng)意的方式。當(dāng)你將這種約定俗成的元素修改成其他樣子的時(shí)候，用戶需要花費(fèi)比平時(shí)更長(zhǎng)的時(shí)間來判斷它究竟是什么。這種認(rèn)知負(fù)荷將會(huì)影響整個(gè)網(wǎng)站的使用效率和轉(zhuǎn)化率。比如漢堡圖標(biāo)，比如網(wǎng)站登錄入口的位置（右上角）。沒有必要在這種地方重新「標(biāo)準(zhǔn)化」。

對(duì)于鏈接、導(dǎo)航、布局這樣基本的元素，應(yīng)該始終優(yōu)先考慮其可用性，在此基礎(chǔ)上再發(fā)揮創(chuàng)意。

雖然非傳統(tǒng)的設(shè)計(jì)很酷，但是它的可用性問題同樣很大。創(chuàng)造性的設(shè)計(jì)同樣是需要控制其程度和平衡，如果非要打破常規(guī)，盡量控制好程度，并且一次最多打破一條規(guī)則，不能更多。

5. 了解你的用戶

在開始創(chuàng)建網(wǎng)站和 APP 之前，你應(yīng)該對(duì)于你的目標(biāo)客戶群體有足夠清晰的了解，這樣才能更好地為他們來設(shè)計(jì)界面。

一旦你清楚地了解了你的用戶，就能了解他們的需求和愿望，并且設(shè)計(jì)出符合他們預(yù)期的界面和體驗(yàn)。這個(gè)時(shí)候，你的競(jìng)爭(zhēng)對(duì)手能夠?yàn)槟闾峁╈`感和想法。注意對(duì)方的色彩，布局，風(fēng)格和功能。

盡可能使用你的受眾已經(jīng)熟悉的 UI 模式和 UI 元素，能夠更快讓他們上手。在此基礎(chǔ)上，適當(dāng)?shù)剡M(jìn)行差異化的設(shè)計(jì)，這樣效率更高。

當(dāng)你確定了受眾之后，記得盡量把他們的反饋納入到你的設(shè)計(jì)當(dāng)中。

6. 視覺層次很重要

當(dāng)界面中優(yōu)先放置最重要的元素，通過視覺層次來凸顯它們，確保用戶能夠更快注意到它們。在設(shè)計(jì)中，有很多方法能夠凸顯內(nèi)容，但是最有效的方法始終是讓它們更大更醒目。

視覺層次的構(gòu)建能夠讓網(wǎng)站內(nèi)容更加清晰，也更加富有功能性。

7. 控制用戶體驗(yàn)的質(zhì)量

Peter Moville 在 usability.gov 這個(gè)網(wǎng)站上列舉出了用戶體驗(yàn)設(shè)計(jì)的關(guān)鍵因素，它的核心價(jià)值在于通過不同的維度更好地掌控用戶體驗(yàn)的質(zhì)量：

• 有用：內(nèi)容應(yīng)該是原創(chuàng)的且滿足需求。
• 可用：網(wǎng)站的內(nèi)容應(yīng)該很容易被找到。
• 可?。涸O(shè)計(jì)元素應(yīng)該貼合情感且具備可欣賞性。
• 可發(fā)現(xiàn)：內(nèi)容容易被定位，被找到，并且可導(dǎo)航。
• 無障礙：設(shè)計(jì)要為有障礙的用戶進(jìn)行定制。
• 可信：網(wǎng)站內(nèi)容應(yīng)該有權(quán)威性，且值得被相信。

除了上面的維度之外，還有一些值得參考的 UX設(shè)計(jì)的質(zhì)量衡量標(biāo)準(zhǔn)：

• 符合上下文：有明確的路徑，符合上下文邏輯。
• 人性化：值得信賴，平易近人，透明，并不機(jī)械。
• 可發(fā)現(xiàn)性：用戶在第一次訪問的時(shí)候就能夠順暢的完成任務(wù)。
• 可學(xué)習(xí)性：確保交互足夠簡(jiǎn)單，并且能夠無縫地相應(yīng)移動(dòng)端界面，確保用戶在隨后的訪問過程中達(dá)成目標(biāo)。
• ：確保用戶能夠快速輕松地完成各種任務(wù)。
• 令人愉悅：確保產(chǎn)品能夠滿足用戶需求，還能夠和用戶產(chǎn)生情感聯(lián)系。
• 表現(xiàn)良好：當(dāng)用戶與之交互的時(shí)候表現(xiàn)良好。

結(jié)語

用戶體驗(yàn)設(shè)計(jì)的目標(biāo)不僅僅是讓產(chǎn)品本身更優(yōu)秀，更重要的是從情感層面上和用戶產(chǎn)生關(guān)聯(lián)。有界面而沒有體驗(yàn)，這樣的產(chǎn)品在今天的競(jìng)爭(zhēng)中是活不下去的。

從用戶的操作流程上來說，如果用戶想使用一個(gè)功能，必然首先要發(fā)現(xiàn)它。如果連功能入口都找不到，后續(xù)的用戶體驗(yàn)也無從談起。而篩選功能可以幫助用戶對(duì)功能信息進(jìn)行快速的定位，縮短用戶的查找時(shí)間，這篇文章我就來跟大家聊一下篩選功能。

 三種常見基本樣式

首先要明確一個(gè)概念，篩選功能并不是普通的單一功能項(xiàng)，它和導(dǎo)航一樣是一個(gè)體系。既然是體系，必然有最基本的組成部分。篩選功能（體系）常見的樣式有以下三種：tab類，(下拉)列表類，標(biāo)簽類。這三種樣式是篩選功能最基本的組成元素，不管你產(chǎn)品的篩選功能做的有多么復(fù)雜，都可以看成是這三種基本元素的不同組合形式。

Tab

Tab是最常見的篩選樣式，一個(gè)tab項(xiàng)代表一個(gè)篩選維度，直接平鋪的展示出來，用戶很容易感知到。

根據(jù)方向我們可以將tab分為橫向欄tab和側(cè)向欄tab。橫向欄tab可展示2-5個(gè)選項(xiàng)，如果超過了5個(gè)，那么就需要用戶滑動(dòng)才能看到。所以當(dāng)篩選維度過多的時(shí)候，我們可以考慮使用側(cè)向欄tab，京東商品分類這里用的就是典型的側(cè)向欄tab，我數(shù)了一下總共40個(gè)選項(xiàng)，這里如果使用橫向欄tab用戶可能要側(cè)向滑動(dòng)8屏，操作成本過高。

當(dāng)然當(dāng)選項(xiàng)過多的時(shí)候，我們還有一個(gè)法子，就是使用彈框，用戶點(diǎn)擊后可以看到全部的選項(xiàng)。

列表式

列表式也可稱之為list，其特點(diǎn)就是占用空間小。因?yàn)樗梢詫⑦x項(xiàng)隱藏起來，用戶需要點(diǎn)擊才能看到所有的選項(xiàng)，因此在有限的空間里可以展示更多的篩選維度。礙于手機(jī)屏幕尺寸的限制，列表式篩選現(xiàn)在應(yīng)用的越來越普遍。

列表式篩選的樣式其實(shí)有很多?？梢宰龀蓀opover類，actionsheet類，activityview類。這些樣式很難去說誰好誰壞，這里我就只是列舉出來，具體用哪種樣式，大家自己來判斷。

標(biāo)簽式

對(duì)于標(biāo)簽式，很難進(jìn)行準(zhǔn)確的定義，我更傾向于將單選按鈕，多選按鈕，switch等統(tǒng)稱為標(biāo)簽式，標(biāo)簽式只能針對(duì)單一條件進(jìn)行篩選，這點(diǎn)和tab很類似。標(biāo)簽式很少單獨(dú)出現(xiàn)，多數(shù)情況下都是與tab和列表式結(jié)伴而行。

在淘寶里用戶可以點(diǎn)擊視圖icon來切換視圖模式，這就是典型的標(biāo)簽式篩選。

當(dāng)然以上三種只是最常見的篩選元素，其余的還有輸入框，滑塊，地區(qū)/日期選擇器等主要用于信息錄入的組件。 

常見的篩選體系 

了解了最基本的元素，接下來看一些比較復(fù)雜的篩選樣式。上面我也提到了任何產(chǎn)品的篩選體系都可以看成是這三種基本元素的不同組合形式。為了讓大家更好的理解，我一一舉例來說明：

tab+tab:

tab之所以受到青睞，是因?yàn)槠漭^低的學(xué)習(xí)成本。每一個(gè)tab代表一個(gè)類別，而且是直接展示給用戶看的，所以很多產(chǎn)品的篩選功能都會(huì)優(yōu)先考慮使用tab。即使功能結(jié)構(gòu)復(fù)雜到無法用一層tab來完成篩選任務(wù)，設(shè)計(jì)師也會(huì)考慮使用雙層tab樣式（tab+tab）的樣式。（PS.當(dāng)然下圖應(yīng)該算是segment control+tab）

tab+列表式：

當(dāng)產(chǎn)品不斷的發(fā)展，功能結(jié)構(gòu)愈發(fā)的復(fù)雜，過于扁平的tab已經(jīng)無法滿足篩選的需求。以看電影這個(gè)場(chǎng)景為例，用戶的需求是找到合適的影片和電影院。對(duì)于用戶來說，衡量一家電影院會(huì)從地址、票價(jià)、品牌和特色服務(wù)（支持改簽、IMAX廳等）這四個(gè)角度入手。這些篩選需求很難通過tab來完成，我們需要列表式的協(xié)助。

tab+列表式+標(biāo)簽：

當(dāng)產(chǎn)品的功能結(jié)構(gòu)進(jìn)一步復(fù)雜，這也給篩選功能增加了新的難題。以boss直聘來說，這里的篩選項(xiàng)主要分為四個(gè)：排序方式（推薦/）、工作地點(diǎn)、公司規(guī)模、崗位要求。其中后三個(gè)篩選項(xiàng)包含大量的條件，特別工作地點(diǎn)，需要進(jìn)一步定位到街道或地鐵站。對(duì)于這種多維度，深層級(jí)的篩選需求我們可以使用tab+列表式+標(biāo)簽的樣式。

這里我選擇boss直聘的另一個(gè)原因在于它的tab數(shù)用戶是可以自己增減的，每一個(gè)tab代表一條求職意向，最多可以添加3條求職意向。

篩選體系的容器

篩選體系是由眾多篩選項(xiàng)組成的，這些篩選項(xiàng)需要一個(gè)“容器”來承載。上面說的boss直聘用的是下拉列表，這種樣式其實(shí)還比較簡(jiǎn)單的，我們可以看一些功能更加復(fù)雜一點(diǎn)的產(chǎn)品，比如各大電商平臺(tái)。這里使用的是抽屜式篩選框，說它是抽屜式，因?yàn)樗閷弦粯?，用的時(shí)候可以拉出來，不用的時(shí)候可以關(guān)起來，節(jié)省了空間。從某個(gè)角度來說，我們可以把抽屜式看成列表式的一個(gè)放大版。抽屜式篩選框可以容納更多的篩選條件，像我在上面提到的輸入框，多選按鈕都可以在這里使用。

從底部彈出的動(dòng)作欄也比較常見，這里使用了滑塊和單選按鈕。

Airbnb的篩選功能以浮層為載體，還使用比較少見的switch和stepper。

當(dāng)然Airbnb篩選功能最大的亮點(diǎn)在于可以向用戶即時(shí)反饋篩選結(jié)果的數(shù)目，用戶不太可能會(huì)進(jìn)入搜索結(jié)果為0的空頁面，避免無效操作。

以上說的篩選體系都比較傳統(tǒng)，大部分都是基于對(duì)現(xiàn)有結(jié)果進(jìn)行篩選，其實(shí)我們可以對(duì)篩選功能進(jìn)行前置。例如，我們可以在用戶進(jìn)行搜索之前就對(duì)結(jié)果進(jìn)行篩選。

甚至在新用戶第一次使用產(chǎn)品的時(shí)候，可以讓用戶填寫一些個(gè)人信息以便進(jìn)行個(gè)性化推送。

篩選功能的存在意義在于幫助用戶對(duì)功能信息進(jìn)行快速的定位，對(duì)篩選功能進(jìn)行適度的前置可以簡(jiǎn)化用戶的操作流程，同樣可以達(dá)到節(jié)省用戶時(shí)間的目的。

總結(jié)：

大家在日常使用APP過程中也可以帶有目的性，發(fā)現(xiàn)一些好看的UI或是好的交互點(diǎn)可以截圖保存和思考：為什么這么設(shè)計(jì)？目的是什么？分析其優(yōu)勢(shì)之處，還可以和競(jìng)品的相似交互進(jìn)行對(duì)比，始終相信“不積跬步 無以至千里”，通過在點(diǎn)滴中慢慢積累，今后當(dāng)你遇到類似的問題時(shí)就可以快速回憶起這些知識(shí)點(diǎn)，自然就可以運(yùn)用自如，thanks~

在這里先給大家分享一組近期APP使用過程中發(fā)現(xiàn)的UI&交互知識(shí)點(diǎn)，大家可以一起學(xué)習(xí)交流，對(duì)于個(gè)人觀點(diǎn)不認(rèn)同的可以在下面留言探討，thanks~

產(chǎn)品即場(chǎng)景，體驗(yàn)又貫穿整個(gè)產(chǎn)品~孰重孰輕早已分不清

產(chǎn)品即場(chǎng)景，而場(chǎng)景化核心要素之一的“體驗(yàn)”，是其中最重要的一項(xiàng)。

本文從體驗(yàn)出發(fā)，結(jié)合AARRR（用戶增長(zhǎng)）模型進(jìn)行闡述，其中我認(rèn)為該模型的使用必須是在產(chǎn)品搭建的場(chǎng)景下才能運(yùn)作的。而其中涉及每一步的良好體驗(yàn)剛好又反哺場(chǎng)景的完善。

從獲取-激活-留存-轉(zhuǎn)化-傳播每一個(gè)步驟中都存在內(nèi)部因素和外部因素。本文只講內(nèi)部因素，產(chǎn)品從最開始的外部獲客，轉(zhuǎn)向產(chǎn)品內(nèi)部的使用體驗(yàn)，再轉(zhuǎn)向外部傳播的這么一個(gè)過程。

文章不是教案，更不是真理。希望大家?guī)е械难酃馊タ创恳黄恼?。畢竟思辨精神才是形成?dú)立思維的法寶。由于文章較長(zhǎng)，我會(huì)分成上下兩部分發(fā)布，進(jìn)入正文：

獲?。ˋCQUISITION）分為三個(gè)部分：

一：自然流量的獲取

自然流量的獲取，我們能干涉其中的體驗(yàn)非常少，只能打磨產(chǎn)品本身。但是自然流入的用戶一定是基于以下幾個(gè)點(diǎn)中的其中一個(gè)或多個(gè)。我們或許可以干涉體驗(yàn)前~

1.某個(gè)社會(huì)現(xiàn)象、熱點(diǎn)所引發(fā)的相關(guān)功能性需求（例如前不久滴滴司機(jī)殺害空姐事件，引發(fā)多少芳齡少女的恐慌。提高了強(qiáng)烈的安全意識(shí)，這時(shí)候你會(huì)發(fā)現(xiàn)App Store里面一款app殺了出來“怕怕”（有興趣的朋友自行下載體驗(yàn)），正是這個(gè)社會(huì)熱點(diǎn)現(xiàn)象引發(fā)的自然流量暴增。當(dāng)然也不排除產(chǎn)品借這個(gè)熱點(diǎn)營(yíng)銷自己的產(chǎn)品）

2.某個(gè)痛點(diǎn)確確實(shí)實(shí)需要解決（當(dāng)某類用戶存在某個(gè)痛點(diǎn)時(shí)，會(huì)自己通過搜索或者同類產(chǎn)品對(duì)比選擇一款產(chǎn)品進(jìn)行使用，如果你的產(chǎn)品剛好能幫助使用者解決痛點(diǎn)，那么你成功吸引了用戶。）

3.純粹進(jìn)行產(chǎn)品的體驗(yàn)（產(chǎn)品發(fā)燒友、同類競(jìng)品的體驗(yàn)人員、無意中下載的等）。我們稱為無效流量，因?yàn)檫@部分用戶一般是不太可能成為產(chǎn)品的忠實(shí)粉絲的。他沒有明確的目的、沒有明確要解決的痛點(diǎn)。

二：運(yùn)營(yíng)推廣的獲取

運(yùn)營(yíng)推廣這個(gè)名詞在互聯(lián)網(wǎng)誕生之前就已經(jīng)存在了。只是說原來傳統(tǒng)的營(yíng)銷手段即產(chǎn)品-價(jià)格-渠道-促銷開始逐漸失效。轉(zhuǎn)而變?yōu)閳?chǎng)景化的運(yùn)營(yíng)推廣。將推廣落實(shí)到具體的小場(chǎng)景中。

1.線上推廣

其中線上推廣包含線上營(yíng)銷活動(dòng)（營(yíng)銷活動(dòng)又分為已有話題進(jìn)行營(yíng)銷【可以選擇融入當(dāng)前的熱點(diǎn)話題類似節(jié)日、娛樂圈大事件等】&【提供話題痛點(diǎn)解決方案進(jìn)行營(yíng)銷】和制造話題營(yíng)銷【創(chuàng)造業(yè)內(nèi)的話題】【通過深度用戶進(jìn)行制造話題】、優(yōu)惠活動(dòng)（包括邀請(qǐng)好友得好禮、會(huì)員優(yōu)惠、某個(gè)節(jié)日優(yōu)惠等）。線上推廣無非就是通過網(wǎng)絡(luò)搭建虛擬場(chǎng)景，通過場(chǎng)景邊界的不斷延伸，覆蓋吸引更多的用戶參與進(jìn)來。

2.線下推廣

線下推廣包含地推（地推不可避免的會(huì)帶來2部分的人群：被地推活動(dòng)中的獎(jiǎng)品吸引的人；確實(shí)被產(chǎn)品的介紹所吸引的人）、海報(bào)&代言（同樣會(huì)有2部分人群：被明星效應(yīng)所吸引的人；被產(chǎn)品介紹所吸引的人）、門店的互相導(dǎo)流合作。線下推廣效率遠(yuǎn)遠(yuǎn)沒有線上推廣來的快。但是對(duì)于需要線下場(chǎng)景的產(chǎn)品來說，這又是必不可少的。

三：社群自傳播

通過單點(diǎn)擊破，這就需要運(yùn)營(yíng)團(tuán)隊(duì)有很好的洞察能力，找到符合產(chǎn)品調(diào)性的社群，通過事件引爆該社群或者社區(qū)，讓社群成為你產(chǎn)品的擁護(hù)者和傳播者。

1.通過老帶新的模式進(jìn)行獲取用戶

當(dāng)產(chǎn)品與老用戶之間建立很好的紐帶關(guān)系后，老用戶自然會(huì)以個(gè)人為中心，向外幫你宣傳產(chǎn)品。

2.引爆社群

通過各類社區(qū)，找到符合你產(chǎn)品的目標(biāo)人群。通過對(duì)該社群的研究，運(yùn)用社群內(nèi)部語言或者表達(dá)，調(diào)動(dòng)整個(gè)社群幫你發(fā)力。有點(diǎn)及面的擴(kuò)散，稱之為“氣球理論（很細(xì)的一根針就能戳爆氣球）”這同樣是能引爆傳播性特別重要的一點(diǎn)。

3.參與感（社會(huì)關(guān)系綁定）

當(dāng)你周圍的人都在轉(zhuǎn)發(fā)或者都在使用的時(shí)候，如果你不了解或不使用的話，會(huì)引起個(gè)體的孤獨(dú)感。也就是說“他們都在玩，我不玩就落伍了”，但是這種情況在產(chǎn)品推廣的前期一般不太會(huì)出現(xiàn)。當(dāng)傳播勢(shì)能達(dá)到一定程度的時(shí)候，才會(huì)出現(xiàn)刷爆朋友圈！

激活（ACTIVATION）分為二個(gè)部分：

當(dāng)用戶從外部導(dǎo)流進(jìn)產(chǎn)品后，這時(shí)用戶的去或留都跟產(chǎn)品&業(yè)務(wù)有關(guān)。如何讓用戶在進(jìn)入產(chǎn)品后自然而然的進(jìn)行使用也就是防呆原則。對(duì)，通過引導(dǎo)或者吸引使用者進(jìn)行下一步操作。（打個(gè)比方，你去一家陌生的餐廳，進(jìn)去后沒任何人招呼你，沒人告訴你要去選位置或者點(diǎn)菜，是不是有不知所措的感覺，我想你很快就會(huì)另尋他家吧）

一：進(jìn)入產(chǎn)品后的操作引導(dǎo)

1.視覺引導(dǎo)（包括頁面元素優(yōu)先級(jí)、頁面元素突出強(qiáng)弱進(jìn)行視覺上的引導(dǎo)，很常見的就是：在你第一次使用某個(gè)產(chǎn)品時(shí)，會(huì)引導(dǎo)使用者進(jìn)行第一步第二步的操作，降低用戶對(duì)產(chǎn)品的陌生感）

2.動(dòng)效引導(dǎo)（通過頁面浮層的形式教育用戶如何進(jìn)行操作，這也是在產(chǎn)品設(shè)計(jì)中，對(duì)新用戶的一種引導(dǎo)方式）說到底就是為了消除用戶對(duì)新鮮事物的陌生感和手足無措感。

二：產(chǎn)品本身是否能激起用戶的探索欲

當(dāng)然這個(gè)問題本身是建立在是否能真正的幫助用戶解決某些方面的痛點(diǎn)。否則再?gòu)?qiáng)的探索欲，也跟你產(chǎn)品本身沒有關(guān)系。如何激起用戶的探索欲？

1.產(chǎn)品整體視覺表現(xiàn)、使用流程的體驗(yàn)是不是夠吸引人，是不是有屬于產(chǎn)品本身吸引人的點(diǎn)。（當(dāng)年的path效果，直接將它送上全民熱潮之巔）

2.產(chǎn)品是否對(duì)使用者產(chǎn)生持續(xù)的吸引能力，產(chǎn)品前期只有不斷的通過各種方式刺激用戶。（產(chǎn)品體驗(yàn)優(yōu)化、活動(dòng)力度、宣傳方式、讓惠讓利等）但需要注意的是：過度營(yíng)銷不等于有效刺激。

3.產(chǎn)品的任務(wù)流程設(shè)置是否合理，正常情況都是由簡(jiǎn)單到復(fù)雜的程度設(shè)置任務(wù)，由于用戶的沉默成本，當(dāng)完成一定任務(wù)后，就會(huì)沉淀下來慢慢成為產(chǎn)品的忠實(shí)用戶。（摩拜產(chǎn)品是先讓用戶填寫個(gè)人信息，最后才提示充值押金，站在使用者的角度來看，已經(jīng)把個(gè)人信息都出賣給平臺(tái)了，還在乎那200多塊錢嗎？不然你讓他把流程倒過來試試，先充錢，再填信息。保證沒多少人會(huì)用）。流程設(shè)置就像鉤子一樣，慢慢慢慢的把用戶勾住。

上半部分先到這里，下半部分會(huì)從“留存”“轉(zhuǎn)化”“傳播”角度進(jìn)行展開~

多數(shù)人能夠成為很厲害的設(shè)計(jì)師，很厲害的產(chǎn)品經(jīng)理。凡事都會(huì)有所謂的套路，當(dāng)你熟知了解某個(gè)行業(yè)，或者多個(gè)行業(yè)的套路時(shí)。你會(huì)站在更高的視角看待問題，同樣你會(huì)走的比人家更遠(yuǎn)更快。所謂的套路，是基于個(gè)人而言，可能你有個(gè)很好的導(dǎo)師能夠告訴你以往的經(jīng)驗(yàn)。但是我更認(rèn)為，套路是通過一步步看似笨拙的努力不斷總結(jié)不斷歸納

一、什么是峰終定律

峰終定律是由諾貝爾獎(jiǎng)得主 DanielKahneman 提出的，百度百科上它是屬于心理學(xué)上的定義。

我把它結(jié)合了自己的理解應(yīng)用在設(shè)計(jì)學(xué)上可以解釋為：

用戶在使用某個(gè)硬件產(chǎn)品，軟件產(chǎn)品或者服務(wù)系統(tǒng)來完成自己目標(biāo)的過程中，用戶情感地圖曲線的波峰（體驗(yàn)最好）、波谷（體驗(yàn)最差）、結(jié)束點(diǎn)的體驗(yàn)，決定用戶對(duì)整個(gè)過程的體驗(yàn)評(píng)價(jià)。

而在過程中體驗(yàn)好與不好體驗(yàn)的比重，好與不好體驗(yàn)的時(shí)間長(zhǎng)短，對(duì)記憶幾乎沒有影響。

這一定律主要是闡述人對(duì)過去體驗(yàn)的記憶由兩個(gè)因素決定，一個(gè)是「高峰」，一個(gè)是「結(jié)束」。

把用戶情感地圖曲線和峰終定律結(jié)合起來，簡(jiǎn)單畫一張圖：

既然用戶整體體驗(yàn)與整個(gè)過程中好壞綜合無關(guān)，只跟幾個(gè)關(guān)鍵點(diǎn)有關(guān)，那么可以得到一個(gè)公式：

用戶整體體驗(yàn)評(píng)價(jià)（E）=（y1-y2）+y3

y1，y2，y3 可以稱為關(guān)鍵時(shí)刻 MOT（Moment Of Truth）

二、日常生活中的峰終定律

這兩天和包子聊到宜家的峰終定律，突然明白了為什么我們有些課程調(diào)研，大家都喜歡去宜家調(diào)研了。

雖然它的店員很少，找貨物也要自己找椅子搬下來，就算只買一件家具也需要逛完整個(gè)商場(chǎng)，但是每次逛完結(jié)束的時(shí)候都可以吃那個(gè)特別好吃的「一元冰淇淋」呀，這就是它的「終」。

而在逛的過程中，就像包子講的，它的體驗(yàn)?zāi)Ｊ胶馨?，把產(chǎn)品作為空間的一部分。曾經(jīng)有一位宜家的老顧客也說，宜家商品物有所值，展區(qū)實(shí)用，產(chǎn)品隨意試用，大概這就是它的「峰」吧。

扔一個(gè)我的學(xué)習(xí)小伙伴包大佬的分析：

三、互聯(lián)網(wǎng)產(chǎn)品中的峰終定律

如果說峰終定律怎么影響互聯(lián)網(wǎng)產(chǎn)品的用戶體驗(yàn)的話，可以先舉幾個(gè)體驗(yàn)差的例子。

很多時(shí)候，用戶在某個(gè)平臺(tái)完成某個(gè)任務(wù)后，會(huì)出現(xiàn)很多引誘用戶點(diǎn)擊的贊助商的內(nèi)容。比如問卷星，每次填完，任務(wù)結(jié)束的時(shí)候，它還會(huì)打著抽獎(jiǎng)的名義接廣告……

再舉個(gè)例子，你有沒有過在某些 app 注冊(cè)賬號(hào)，登錄 or 注冊(cè)很多次卻失敗的情況，或者花了很久時(shí)間才注冊(cè) or 登錄成功？原因可能是賬號(hào)密碼錯(cuò)誤，可能是注冊(cè)流程過多跳出率過高，可能是填寫信息冗雜……

如果這款產(chǎn)品不是用戶剛需的話，最終會(huì)導(dǎo)致很多用戶卸載它，就算你之后流程的體驗(yàn)再好，用戶根本無法體驗(yàn)到最后。

四、利用峰終定律打造「爽點(diǎn)」

一款好的產(chǎn)品不僅能夠解決用戶的「痛點(diǎn)」，也能刺激用戶的「癢點(diǎn)」，更能打造用戶的「爽點(diǎn)」。

有一些產(chǎn)品能在用戶使用的過程中利用峰終定律打造 「爽點(diǎn)」，提升用戶體驗(yàn)。

如果用外賣這個(gè)來舉例子的話，應(yīng)該算是一個(gè)大的服務(wù)系統(tǒng)，它會(huì)涉及到很多方，比如消費(fèi)者，商家，騎手等，而這一整個(gè)服務(wù)系統(tǒng)的設(shè)計(jì)，只針對(duì)消費(fèi)者而言，流程也會(huì)十分復(fù)雜，其中利用峰終定律考慮的就更多了。

那就其中用戶（消費(fèi)者）與餓了么 app 的交互流程來舉例的話，用戶點(diǎn)外賣這個(gè)任務(wù)：

從打開 app——選擇店——選擇美食——付款，用戶的任務(wù)已經(jīng)結(jié)束了，但是餓了么會(huì)在結(jié)束的時(shí)候，給用戶一個(gè)分享領(lǐng)取紅包的福利，用戶會(huì)覺得自己獲得了很大的優(yōu)惠，體驗(yàn)會(huì)十分好，這也就是利用了峰終定律的「終」。

我發(fā)現(xiàn)游戲里面對(duì)峰終定律是用得最多的，曾經(jīng)玩過 lol，王者榮耀，吃雞手游……

如果問曾經(jīng)玩 lol 或者王者最爽的時(shí)候是什么時(shí)候，那大概是：比賽過程中的 First blood，penta kill ，killing spree，legendary，you have slained an enermy 等這些配音和畫面的視覺刺激吧。

按照常規(guī)的模式是，殺人后系統(tǒng)直接提示「您已經(jīng)殺滅了一名敵人」，但是它會(huì)去強(qiáng)化這種殺人的體驗(yàn)，將殺人的場(chǎng)景分為多種類型，通過視覺上的彈框擊殺提示與配音上的激勵(lì)疊加，把殺人的體驗(yàn)不斷深化，做到，另外在推塔和偷掉水晶的時(shí)候是不是也是最爽的時(shí)候呢？我覺得這里就利用了峰終定律的「峰」。

我記得在游戲結(jié)束的時(shí)候，比如 lol 里面推掉水晶的時(shí)候，游戲畫面會(huì)停止幾秒，然后再出現(xiàn)水晶慢慢破滅，加上大大的「勝利」二字，有的時(shí)候回到大廳還需要等幾秒的時(shí)間。

王者榮耀，吃雞這類在游戲結(jié)束的時(shí)候也會(huì)給用戶很多激勵(lì)，明明可以在結(jié)束后直接回到大廳，但它們會(huì)延長(zhǎng)這些勝利或者失敗的體驗(yàn)，如果勝利，當(dāng)然是爽，還想再擁有這樣的體驗(yàn)，繼續(xù)打；如果是失敗，那再接再厲，想擁有贏的體驗(yàn)，繼續(xù)打……

總之就是會(huì)讓用戶上癮。它們會(huì)把這些用戶體驗(yàn)做到，在游戲結(jié)束的時(shí)候這些的體驗(yàn)就利用到了峰終定律的「終」。

五、利用峰終定律改善體驗(yàn)步驟

「峰終定律」改善用戶體驗(yàn)的步驟：

• 進(jìn)行可用性測(cè)試；
• 繪制用戶旅程圖；
• 找到「峰」，「終」時(shí)刻；
• 通過用戶研究的方法找到用戶心中的關(guān)鍵時(shí)刻；
• 將「峰」、「終」，「用戶心中關(guān)鍵時(shí)刻」的體驗(yàn)優(yōu)化至。

在《用戶體驗(yàn)的要素》一本書中，Jesse James Garrett 將用戶體驗(yàn)分為了五個(gè)層級(jí)，戰(zhàn)略層，范圍層，結(jié)構(gòu)層，框架層，表現(xiàn)層。

其中在框架層里面有一個(gè)很重要的概念就是導(dǎo)航設(shè)計(jì)，作者對(duì)導(dǎo)航設(shè)計(jì)的定義是：元素的組合，允許用戶在信息架構(gòu)中穿行。

我覺得可以把導(dǎo)航設(shè)計(jì)理解為：我們從用戶的心智模型出發(fā)，結(jié)合業(yè)務(wù)目標(biāo)，對(duì)信息架構(gòu)的一個(gè)梳理，來幫助用戶完成目標(biāo)。

通過自己手機(jī)里幾十款 app，總結(jié)了以下六種導(dǎo)航設(shè)計(jì)模式，包括：標(biāo)簽導(dǎo)航，宮格導(dǎo)航，側(cè)邊導(dǎo)航，列表導(dǎo)航，菜單導(dǎo)航，輪播導(dǎo)航……

簡(jiǎn)單介紹了它們的優(yōu)缺點(diǎn)，適用場(chǎng)景，以及一些衍生導(dǎo)航與相關(guān)案例……（不過導(dǎo)航設(shè)計(jì)一定是視產(chǎn)品和情況而定的，并沒有確定的依據(jù)與理論）

一、標(biāo)簽導(dǎo)航

標(biāo)簽導(dǎo)航分很多種，有底部標(biāo)簽導(dǎo)航，頂部標(biāo)簽導(dǎo)航，底部標(biāo)簽導(dǎo)航又可以衍生出舵式導(dǎo)航，頂部標(biāo)簽導(dǎo)航又可以分為靜態(tài)或者是動(dòng)態(tài)導(dǎo)航……

底部標(biāo)簽導(dǎo)航是最基本的導(dǎo)航，幾乎絕大部分 app 中都在用，tabbar 位于頁面最底部，一般3-5個(gè) tabbar，有文字+icon，也有純 icon 形式，但大部分是文字+icon 的形式，我想是減少用戶記憶負(fù)擔(dān)吧，如下：

而關(guān)于底部標(biāo)簽導(dǎo)航的優(yōu)點(diǎn)，缺點(diǎn)以及適用場(chǎng)景也簡(jiǎn)單整理了：

我發(fā)現(xiàn)很多用戶發(fā)布或者生產(chǎn)內(nèi)容的 app 會(huì)將底部標(biāo)簽導(dǎo)航進(jìn)行變體，很多人把它稱為舵式導(dǎo)航，就像這種：

中間的「+」一般是發(fā)布的意思，并且是 app 里面使用最頻繁的一個(gè)功能，一般都會(huì)重點(diǎn)突出。并且，該標(biāo)簽中很多時(shí)候會(huì)有二級(jí)導(dǎo)航，二級(jí)導(dǎo)航里可擴(kuò)展性就比較強(qiáng)，如圖：

而頂部標(biāo)簽導(dǎo)航顧名思義就是 tabbar 位于頂部，最早知道它是在 Material Design 里面，因?yàn)?Google Pixel 手機(jī)底部存在物理導(dǎo)航，所以將標(biāo)簽導(dǎo)航置于頂部不會(huì)顯得突兀。它很少用作一級(jí)導(dǎo)航，一般是二級(jí)導(dǎo)航比較多，而且我發(fā)現(xiàn)頂部標(biāo)簽導(dǎo)航，幾乎都是純文字的形式，比如：

突然想到今天交互設(shè)計(jì)課上的時(shí)候，老師講的人機(jī)交互里，重要的操作放在大拇指可觸達(dá)的范圍內(nèi)。

而頂部標(biāo)簽導(dǎo)航，如果是點(diǎn)擊標(biāo)簽進(jìn)行操作的話，用戶單手操作就十分不方便，所以我發(fā)現(xiàn)體驗(yàn)好的 app 的頂部操作導(dǎo)航都是可以直接通過左右滑動(dòng)屏幕的交互來切換。

而當(dāng)標(biāo)簽類目過多的時(shí)候，可以通過左滑展現(xiàn)更多標(biāo)簽，比如很多新聞閱讀類的 app：

如果是可以滑動(dòng)查看更多的話，一定要通過一些方式告訴用戶可以滑動(dòng)查看更多，比如最后一個(gè)標(biāo)簽隱藏一半的方式等：

關(guān)于頂部標(biāo)簽導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

二、宮格導(dǎo)航

宮格導(dǎo)航，也是十分常見的導(dǎo)航形式，除了一些工具類 app 外，大部分是作為二級(jí)頁面展示出來，并且以 icon+文字的形式居多。

如果將宮格的 icon 換成 picture 的形式的話，可以衍生出一種新的類似于卡片式導(dǎo)航的形式 ，可以通過垂直滑動(dòng)來切換，比如：

那，如果宮格信息太多，我發(fā)現(xiàn)很多 app 會(huì)采用分類展示的形式，并且通過水平滑動(dòng)的方式來切換，比如：

但是上面兩種可以垂直或者水平滑動(dòng)的形式，一定要讓用戶知道是可以水平或者垂直滑動(dòng)的，采取的是邊界地方信息只展示一半的形式，告訴用戶可以繼續(xù)滑動(dòng)……

除此之外，宮格導(dǎo)航還可以在電商里面運(yùn)用，在首頁的運(yùn)營(yíng)內(nèi)容塊，它可以根據(jù)內(nèi)容的重要性調(diào)整模塊的大小，比如：

關(guān)于宮格導(dǎo)航的優(yōu)缺點(diǎn)和適用場(chǎng)景，如下：

三、側(cè)邊導(dǎo)航

有些書里面會(huì)把側(cè)邊導(dǎo)航叫做抽屜導(dǎo)航，這類導(dǎo)航其實(shí)比較少了，原本也是從 Google Material Design 里面提取出來的概念，一般會(huì)在首頁呈現(xiàn)一個(gè)主要功能，將其他不常用的功能收納放到側(cè)邊導(dǎo)航里，比如：

而關(guān)于側(cè)邊導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

四、列表導(dǎo)航

列表導(dǎo)航也是十分常見，幾乎在每一個(gè) app 里面都會(huì)存在，大部分時(shí)候是作為二級(jí)導(dǎo)航存在，但是也會(huì)存在于一級(jí)導(dǎo)航的時(shí)候，比如郵箱，iOS系統(tǒng)自帶的設(shè)置等。

一般在列表導(dǎo)航里都會(huì)有下一個(gè)層級(jí)，可以通過箭頭來告訴用戶是否有下級(jí)菜單。

當(dāng)列表信息比較多的時(shí)候，可以對(duì)列表進(jìn)行分類，可以添加小標(biāo)題或者直接分隔開。比如：

而在有些列表導(dǎo)航里，我們還需要展示給用戶一些預(yù)覽信息，比如 iOS系統(tǒng)里的健康，個(gè)人信息里的一些基本數(shù)據(jù)展示，如下：

關(guān)于列表導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

五、菜單導(dǎo)航

其實(shí)菜單導(dǎo)航也可以稱為下拉導(dǎo)航。這也是今天上交互設(shè)計(jì)課的時(shí)候，老師以微信的「+」為例子介紹的一種導(dǎo)航形式。最初了解這種導(dǎo)航形式也是來源于 Material Design 里面的 Menu。

Menu 是臨時(shí)的一張紙（paper），由按鈕（button）、動(dòng)作（action）、點(diǎn)（pointer）或者包含至少兩個(gè)菜單項(xiàng)的其他控件觸發(fā)。

比如：

當(dāng)信息層級(jí)變多的時(shí)候，菜單導(dǎo)航里要展示一層或者兩層信息，比如大眾點(diǎn)評(píng)采取的形式：

關(guān)于菜單導(dǎo)航的優(yōu)缺點(diǎn)以及適用場(chǎng)景，如下：

六、輪播導(dǎo)航

還有一些導(dǎo)航比如輪播導(dǎo)航，完全的沉浸式體驗(yàn)，高度簡(jiǎn)潔的導(dǎo)航，比如天氣，但是這種導(dǎo)航因?yàn)檩啿c(diǎn)的大小不會(huì)很明顯，所以用戶很難快速感知自己所在位置，并且輪播導(dǎo)航輪播的數(shù)量也不宜過多 。

其實(shí)導(dǎo)航的類型應(yīng)該還有很多，并且在一個(gè) app 里面幾乎不可能只使用一種導(dǎo)航，哪怕只是一個(gè)頁面，也會(huì)存在多種導(dǎo)航的組合形式，比如：

總結(jié)

• 導(dǎo)航的形式一定是根據(jù)你的產(chǎn)品的諸多因素進(jìn)行選取，并不能完全按照我上文的適用場(chǎng)景為依據(jù)；
• 幾乎每一個(gè) app，每一個(gè) app 的每一個(gè)頁面，都會(huì)涉及到多種導(dǎo)航模式，需要結(jié)合具體場(chǎng)景進(jìn)行組合選取；
• 導(dǎo)航的具體展現(xiàn)可以通過：文字，icon，文字+icon 的形式；
• 有些導(dǎo)航比如標(biāo)簽導(dǎo)航在設(shè)計(jì)的時(shí)候有多種狀態(tài)，比如 unselected，selected 等狀態(tài)；
• 導(dǎo)航在 iOS 和 android 里面的應(yīng)用會(huì)不一樣，比如標(biāo)簽導(dǎo)航適配 iOS系統(tǒng)，側(cè)邊導(dǎo)航適配 android 系統(tǒng)；
• 導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁面之間的關(guān)系；
• 能夠引導(dǎo)用戶以很好的體驗(yàn)完成目標(biāo)的導(dǎo)航設(shè)計(jì)都是優(yōu)秀的。

描邊插畫：可以簡(jiǎn)單理解為眾多線面結(jié)合圖標(biāo)組合在一起，互相呼應(yīng)而組成一個(gè)大畫面。畫面中的元素除了面以外，還具有描邊，因此也叫描邊插畫。

本文內(nèi)容：文章會(huì)詳解如何畫一張描邊插畫，教程素材沒有用我之前的插畫來做步驟分解，而是新畫了一張插畫以作示范，繪畫原理都一樣，理解原理就好。除了具體步驟以外，會(huì)針對(duì)一些易犯錯(cuò)誤的地方添加重點(diǎn)標(biāo)記。

一點(diǎn)建議：看完文章后，可以按照我分享的方法來臨摹一遍，但我更趨向于小伙伴們能夠發(fā)揮自己的想象力，做一張屬于自己的原創(chuàng)插畫。畫完后若有不清楚的地方，歡迎在我的公眾號(hào)中添加微信并附帶插畫，可給予建議。

一、草圖階段

1. 確立主題，畫草稿

這次插畫的主題源自于我的一個(gè)夢(mèng)：在草地上，遺落的帆布鞋里面長(zhǎng)滿了鮮花，小鳥守在花的旁邊歌唱。

確定主題后，把腦海里的畫面畫出來，可以畫在紙上，也可以用數(shù)位板在 ps 里面畫，按照個(gè)人習(xí)慣就好。我比較喜歡手繪，因此在紙上畫。

2. 打開AI，調(diào)整設(shè)置

新建畫布1600*1200

視圖-勾選對(duì)齊點(diǎn)

3. 把草圖拉到畫面中，調(diào)整大小

二、線稿

1. 描邊設(shè)置及要注意的問題

在描邊插畫中，常見的問題之一就是描邊的粗細(xì)問題. 以及描邊間關(guān)系的處理問題。

描邊粗細(xì)問題（下圖以之前的四季插畫為例子）

描邊間關(guān)系處理

描邊設(shè)置

描邊的粗細(xì)是根據(jù)畫布大小而決定的，1600*1200的畫布，我習(xí)慣用 8pt 的粗細(xì)的線條，但是如果畫布是1200*900，8pt 則顯得過粗。具體的粗細(xì)可以根據(jù)情況而調(diào)整。

2. 線稿畫法

布爾運(yùn)算法

形狀斷點(diǎn)重連法

形狀生成器

鋼筆勾勒法

鋼筆勾勒法顧名思義就是用鋼筆直接描出物體的外形。在這個(gè)插畫中，植物的形狀比較隨性，因此用鋼筆直接勾勒比形狀剪切要快。繪制的過程中，注意調(diào)整線條的平滑度. 弧度，使其規(guī)整。在此不作示范。

三、色稿

1. 增加背景色

2. 色稿層的繪制

3. 顏色調(diào)整

4. 高光與暗部

5. 經(jīng)過高光與暗部塑造后的畫面

四、 風(fēng)格塑造與整體調(diào)整

1. 風(fēng)格塑造

最近看到 kit8 大神的畫，突然想到如果白線運(yùn)用在線性插畫會(huì)怎樣，就嘗試了這種風(fēng)格。把線稿復(fù)制一層置于頂上，改成白色，2px 粗細(xì)的線，然后向旁邊移動(dòng)錯(cuò)位，破一下畫面沉悶的感覺。

2. 整體調(diào)整

看到這里，你應(yīng)該也發(fā)現(xiàn)了，畫面是比較灰的，因?yàn)槲叶际沁x擇低飽和度的顏色，如果需要調(diào)整，就在 AI 中把插畫導(dǎo)出 SVG 格式。然后拖到 PS 里面進(jìn)行色相飽和度的調(diào)整。

3. 保存喜歡的配色

在顏色調(diào)整過程中，遇到喜歡的配色就保存下來，這樣一張插畫就完成了。