漸變這一視覺趨勢(shì)，在最近幾年里可謂如日中天。很多平平淡淡的設(shè)計(jì)，將平涂改為漸變，立刻就能增加醒目感。

• 雖說漸變是一個(gè)有效的元素，但為什么我們的漸變，還是和大神們的漸變有區(qū)別？
• 我們應(yīng)該怎樣做出漸變的質(zhì)感？
• 為什么說用色才是漸變的精髓？

今天我們就來和大家聊聊漸變這個(gè)話題，深入了解我們似乎以為自己懂了的漸變，我們將和大家一起分析漸變配色中，利用色彩不同特性之間的對(duì)比來用色，以及一些簡(jiǎn)單的操作小技巧。比如快速生成一個(gè)色輪，以及簡(jiǎn)單的利用混合工具來配出漸變配色的色彩。

漸變是在色彩上的一個(gè)相對(duì)緩慢的過渡，我們的視覺會(huì)隨著這個(gè)漸變的過渡而產(chǎn)生一種流動(dòng)感，而這種流動(dòng)感全憑在色彩上發(fā)生的種種變化。是的，我們的重點(diǎn)來了，就是這個(gè)變化，需要我們今天深入去加以了解。

談到變化，我們自然會(huì)想到這個(gè)變化的范圍。如果拿出我們的色輪來看，我們就會(huì)發(fā)現(xiàn)色輪上的變化范圍有大有小，當(dāng)兩個(gè)色彩距離較近時(shí)，我們可以說他們是鄰近色，這時(shí)難以發(fā)現(xiàn)他們的區(qū)別，直至我們的肉眼無法分辨。這時(shí)候可以說變化范圍較小。

當(dāng)兩個(gè)色彩距離180，在色輪上呈相對(duì)，我們可以說這時(shí)的色彩變化是最大的，于是也就產(chǎn)生了最強(qiáng)烈的對(duì)比。很多撞色的情況，也是在這種對(duì)比下發(fā)生的。我們通常會(huì)把這對(duì)顏色稱為互補(bǔ)色。

當(dāng)然，實(shí)際的情況比這要稍微復(fù)雜一點(diǎn)，我們一起來看下。

一、色相對(duì)比

剛剛大家可以發(fā)現(xiàn)，這個(gè)色輪上的色彩的一個(gè)特點(diǎn)是什么？只有色相的變化。沒錯(cuò)，我們平時(shí)也已經(jīng)習(xí)慣了，只用色相來區(qū)分色彩。所以，今天要講的第一個(gè)對(duì)比，也就是色相的對(duì)比。

色相的對(duì)比，在色輪上就能很直觀的表現(xiàn)。例如紅色和黃色這一段，截取過來以后，就變?yōu)榱思t – 黃漸變。利用色環(huán)就能很輕松的實(shí)現(xiàn)色相的漸變。距離越遠(yuǎn)，漸變色的對(duì)比也就越大，互補(bǔ)色之間的對(duì)比達(dá)到了極值，比如紅 – 藍(lán)漸變的對(duì)比就大過紅 – 黃漸變。

這里首先教給大家一個(gè)快速生成色輪的小技巧，這個(gè)技巧不需要利用網(wǎng)上的圖片或工具。現(xiàn)做現(xiàn)用，很方便。

1. 小技巧：快速生成色輪

STEP 01

讓我們先用這個(gè)自定義形狀工具畫出一個(gè)圓環(huán)。

STEP 02

然后在圓環(huán)里填充色彩，這里我們運(yùn)用一個(gè)漸變疊加。

漸變疊加的疊加方式為角度漸變，漸變色這里選用「色譜」，沒有找到這個(gè)漸變的小伙伴記得要追加色譜。

這時(shí)做出的色輪，在色彩上飽和度達(dá)到最大值。因此也能表現(xiàn)最強(qiáng)烈的色相對(duì)比。目前比較流行的漸變色是明度偏高，飽和度居中的漸變，也像這樣的糖果色，因此這時(shí)大家可以利用調(diào)整圖層「色相/飽和度」來增加明度或降低飽和度。

2. 高能提醒：別被參數(shù)騙了

可能很容易被初學(xué)者忽略的是，我們?cè)?PS 里的色彩（HSB）這個(gè)參數(shù)里看下，一般來說H-色相，S-飽和度，B-明度，這里的情況和我們?cè)谏蕦W(xué)里學(xué)到的 HSB 有點(diǎn)小差異。

色相這里沒有問題，但是飽和度和明度，尤其是飽和度上面，大家可以看到一般來說飽和度時(shí)，色彩是慢慢失去色度，也就是呈現(xiàn)灰色，但是在軟件里把 S 這個(gè)值調(diào)到最小呈現(xiàn)出是白色；還有另一個(gè)屬性：明度，最大的明度，應(yīng)該是白色，在軟件里的 B 這個(gè)參數(shù)調(diào)到最高時(shí)，并不是白色。

在 PS 里，只有把色彩放到「色相/飽和度」這個(gè)工具里，才會(huì)看到和我們書里的概念表現(xiàn)一致的特性。

3. 工具不同，漸變也就不同

運(yùn)用色環(huán)配出的漸變色和直接利用漸變工具配出的漸變色還有差別的，最重要是體現(xiàn)在顏色的過渡上。如果是用漸變工具選擇了左邊綠色，右邊紫色的漸變色，在中間出現(xiàn)的過渡色就表現(xiàn)出一種發(fā)灰的色彩。如果所選用的兩端的顏色是在色環(huán)上距離有定的角度，就會(huì)出現(xiàn)這種灰色。這是因?yàn)閮煞N顏色彼此混合所造成的。有些情況下，確實(shí)是需要這樣過渡的，這就直接用漸變工具來做漸變。

另外一個(gè)情況就是不希望色彩發(fā)灰，這時(shí)需要用到色環(huán)，在色環(huán)上根據(jù)所需要的漸變過渡來選取不同的色彩配置。

可以看出來，盡管沒有飽和度、明度的變化，色彩仍然是彼此之間所表現(xiàn)的特質(zhì)都很獨(dú)特，所以基本上利用色相對(duì)比，就能配出非常優(yōu)秀的漸變作品。

一般來說，漸變本身就足夠吸引人，有漸變參與的情況下，我個(gè)人的建議是色彩不要太多，盡量少元素，整體風(fēng)格傾向極簡(jiǎn)，這時(shí)最能發(fā)揮漸變色這種特質(zhì)的魅力。

這個(gè)案例中的漸變過渡，中間的這個(gè)紅色和藍(lán)色的漸變就是用漸變工具做出來的，兩邊的漸變都是取用了色環(huán)上的漸變過渡，可以看到色彩上兩邊的漸變中的色相更多，更飽滿，飽和度和明度都沒有喪失，而中間的漸變?cè)诩t藍(lán)之間的過渡出現(xiàn)了飽和度較低的紫灰色。

二、色溫對(duì)比

色溫是什么？色溫更多是色彩對(duì)人的主觀的心理因素的影響。雖說是主觀，但是大家的整體傾向還是比較類同。比如藍(lán)色清涼，紅色溫暖。

所以，把色環(huán)上的色彩根據(jù)主觀溫度進(jìn)行一個(gè)劃分，就有了我們經(jīng)常聽說的暖色和冷色。冷暖色雖然無法用屬性值來進(jìn)行衡量，但是卻在色彩中發(fā)揮不小的作用。

1. 獲得平衡感

漸變中加入色溫這個(gè)屬性，這個(gè)游戲就會(huì)更好玩。一般來說，為了達(dá)到配色平衡，我們的配色中需要冷暖進(jìn)行平衡，這里的平衡并非是1：1的嚴(yán)格配比，而是彼此滲透，雙方根據(jù)位置、面積、形狀等等元素的共同參與，共同實(shí)現(xiàn)一個(gè)版面的平衡。當(dāng)然，這不是件容易的事，但這是我們配色中的方向之一。

回到我們的色溫對(duì)比，要體現(xiàn)在漸變中，就是要有冷色和暖色的參與。一般來說，在比較簡(jiǎn)單的過渡性雙色漸變里，一個(gè)冷色一個(gè)暖色是非常常見的表達(dá)方式。還是拿剛剛那個(gè)案例來看，左邊兩個(gè)配色就是冷暖的過渡，而右邊的配色相對(duì)來說偏暖，當(dāng)然相比之下，洋紅色還是比橙色會(huì)更偏冷一些。

2. 綠色和紫色：冷暖不定

冷暖色的對(duì)比都是在同一個(gè)版面內(nèi)的一個(gè)動(dòng)態(tài)對(duì)比，尤其對(duì)于綠色和紫色這個(gè)范圍內(nèi)的色彩來說的話更是如此。比如綠色，在和藍(lán)色搭配的時(shí)候，由于藍(lán)色是絕對(duì)的冷色，所以綠色就表現(xiàn)出暖色的特質(zhì)；而綠色如果和橙色搭配，橙色又是絕對(duì)的暖色，所以綠色又表現(xiàn)出冷色的特性。紫色也是同樣的情況，和藍(lán)色搭配它偏向暖色，而和橙色搭配時(shí)它又是偏冷的。

用起來其實(shí)也很簡(jiǎn)單，如果你的配色中發(fā)現(xiàn)整體感覺偏冷，就增加暖色。如果太暖，那就增加冷色調(diào)。如果整體的配色看不出哪里不對(duì)勁，但總覺得色彩有點(diǎn)奇怪，就先看看色溫是不是實(shí)現(xiàn)了平衡。

三、明度對(duì)比

再增加一個(gè)屬性，漸變這個(gè)游戲又增加難度了，明度這個(gè)屬性表現(xiàn)為顏色的明暗程度，明度引入了另一個(gè)性質(zhì)：光。其實(shí)我們平時(shí)看到的色彩就是因?yàn)橛辛斯猓庞辛祟伾５且话銇碚f我們會(huì)把光簡(jiǎn)單歸屬于「發(fā)光」這個(gè)行列。事實(shí)上，由于光線的折射，我們視網(wǎng)膜接受到光的波長(zhǎng)，才產(chǎn)生了色彩。那么光線的強(qiáng)烈與否，就會(huì)影響這個(gè)顏色的表現(xiàn)。

明度的對(duì)比，是所有顏色屬性當(dāng)中，最容易被覺察到的。我們可以簡(jiǎn)單來看，我們的素描就是利用明暗來表現(xiàn)物體，黑白灰能毫不費(fèi)力表現(xiàn)現(xiàn)實(shí)中光的感覺。所以在配色中，有了明暗對(duì)比，是一個(gè)很好表現(xiàn)色彩感染力的元素。

1. 表現(xiàn)立體感

即使明度相同，我們的色彩明暗程度（從主觀感受來說），也是不一樣的。比如相同明度的黃綠色和紫色，在明暗表現(xiàn)上，黃綠色明顯更亮，更靠前。如果讓這兩個(gè)色彩之間發(fā)生漸變關(guān)系，這樣的表現(xiàn)就很像左上角有光滲入進(jìn)這塊平面中。如果進(jìn)一步降低的紫色的明度，這時(shí)，明度的對(duì)比就更為強(qiáng)烈。這時(shí)很適合表現(xiàn)出某種立體感。

當(dāng)然，我們的色彩并非一定要有立體感才能生動(dòng)，有些配色大師，會(huì)刻意去弱化立體感，所以會(huì)盡量避免明暗的對(duì)比。但是，作為初學(xué)者，一定要知道明暗對(duì)比，懂得在適當(dāng)?shù)那闆r下拿來使用。

尤其是在同色系或者鄰近色色系的漸變里，明度對(duì)比是一個(gè)增加立體表現(xiàn)力的方式。有些時(shí)候，平涂的方式看起來呆板單調(diào)，利用同色系漸變就能很好解決這個(gè)問題。兩個(gè)色彩之間可以非常近似，即便如此，還是和平涂有差別。有了光的感覺就要隨時(shí)注意受光的方向，在整個(gè)畫面里保持全局光，所謂全局光，換個(gè)簡(jiǎn)單的說法就是大家都在同一光源照射下。

我們可以再和大家演示一下，例如這里有兩個(gè)圓，這兩個(gè)圓都是填充為紫 – 綠漸變，這時(shí)的紫和綠是同樣的明度。這里注意，就算是同樣明度，兩個(gè)顏色在直觀的感覺上，明暗程度也是有差別的，比如綠色會(huì)稍微亮一點(diǎn)。這時(shí)打開漸變工具，在后邊的綠色這一端色彩，將它的明度調(diào)高，這時(shí)大家會(huì)發(fā)現(xiàn)，右邊這個(gè)圓就變?yōu)榱艘粋€(gè)球體。

2. 從黑白灰開始

明度漸變還是增加作品細(xì)膩程度的一個(gè)方法，我們和大神的差距，也許真有可能就是一處小小的明暗關(guān)系的不同。別忘了，明度對(duì)比對(duì)整體效果所發(fā)生的影響是最大的，但也是我們最容易忽略的，有時(shí)候一旦有了顏色，我們的焦點(diǎn)都在色調(diào)和色度上。但其實(shí)所有的配色，比如我們做設(shè)計(jì)，一開始總是從黑白灰開始做起，先配置好明度，然后再開始根據(jù)明度來選擇用色。

有了對(duì)明度的把握，我想我們對(duì)色彩的把握才能上升到新的層次，否則，我們?cè)谝欢焉世铮苋菀酌允Х较颉?

四、色度對(duì)比

這里說的色度，也被叫飽和度，有的書上也叫彩度，拿我們?nèi)粘Ｓ谜Z(yǔ)講就是鮮艷程度。色度對(duì)比越強(qiáng)，尤其是色輪上的互補(bǔ)色，在他們色度都達(dá)到最大時(shí)，會(huì)撞出最大的火花，產(chǎn)生最強(qiáng)烈的效果。

有時(shí)候這種高彩度的配色用在動(dòng)感很強(qiáng)的設(shè)計(jì)中，看上去活力四射。但這種互補(bǔ)色之間也會(huì)發(fā)生彼此互斥的關(guān)系，造成整個(gè)版面的凌亂，所以要非常謹(jǐn)慎的對(duì)待色度。

空氣透視 – 空間感的塑造

色度對(duì)比最常見的就是用在空間感的塑造上，大家都知道，色度越高，在視覺上會(huì)制造一種「更近」的效果。

舉例來說吧，我們這里可以畫一個(gè)梯形，這個(gè)梯形用漸變來填色。如果用單色，大家一定感覺不出空間感。如果我們采用漸變，使得同一個(gè)顏色，比如紫紅色，在這個(gè)梯形上，由上到下做一個(gè)漸變，這個(gè)漸變中兩端的色彩，在色度上有差距。那這時(shí)就能體現(xiàn)出一個(gè)慢慢延伸到遠(yuǎn)方的感覺。甚至還能有種暴露在空氣中，被空氣弱化的視覺效果。這個(gè)也運(yùn)用在插畫中，也被叫做空氣透視。

色彩濃度的強(qiáng)弱對(duì)比，和其他的色彩的屬性相結(jié)合，配色就變得更復(fù)雜。但是通常來說，配色并沒有標(biāo)準(zhǔn)答案。所以導(dǎo)致很多人在配色的時(shí)候，都是依靠一種感覺在操作。其實(shí)感覺的確是一個(gè)最直接的選色方法之一，但是并不是唯一的方式。大家如果對(duì)色彩有更深入的了解以后，就會(huì)慢慢理解感覺層面下的更有趣的東西。這個(gè)也是經(jīng)驗(yàn)積累。

在飽和度這一環(huán)，PS 里如果覺得不是很靠譜，就像我之前和大家提過，那么大家可以進(jìn)入到 AI 里，利用 AI 的混合工具來生成不同的色階。例如我們?cè)谶@里用一個(gè)高飽和度的紅色和一個(gè)低飽和度的藍(lán)色相搭配。應(yīng)該說，這兩端的色彩既有飽和度的對(duì)比，也有色調(diào)和明度的對(duì)比，還有色溫的對(duì)比，應(yīng)該說是對(duì)比是非常豐富的。所以，這一條矩形，用在背景色上，我個(gè)人感覺不是太合適。如果是做成一些特殊的效果，還是不錯(cuò)，比如設(shè)計(jì)字體的時(shí)候做筆畫造型，或者做裝飾的線條。

最后一個(gè)我們要略提一下，就是透明度的對(duì)比。盡管透明度不是標(biāo)準(zhǔn)的顏色屬性中的一種，但是在我們軟件操作當(dāng)中，透明度是相當(dāng)實(shí)用的。漸變的色彩，我們可以改變其中一個(gè)色彩的透明度，比如降低到0，那么一端的色彩消失不見，這樣最容易造成一種濃霧的效果。

這個(gè)插畫，是在設(shè)計(jì)我自己的個(gè)人網(wǎng)站時(shí)做的，其中這些背景中的立方體的某些塊面，就是采用某一端降低透明度的效果。有一種在云端的感覺。

五、兩個(gè)漸變配色網(wǎng)站推薦

1. Grabient

網(wǎng)站鏈接：https://www.grabient.com/

這個(gè)網(wǎng)站的工具很好用，我當(dāng)時(shí)在群里推薦的時(shí)候，有人問我說這個(gè)和 PS 里的漸變工具有什么區(qū)別。我在剛剛其實(shí)已經(jīng)和大家講過，PS里的顏色的設(shè)置是有一些和我們的色彩理論不太符合的地方，但是這個(gè)漸變工具就完全符合我們對(duì)色彩屬性的了解。所以在這里可以進(jìn)行調(diào)試，再確定漸變的值，最后放到 PS 里用。

2. WebGradients

網(wǎng)站鏈接：https://webgradients.com/

這個(gè)網(wǎng)站，我相信大家應(yīng)該不會(huì)陌生，好多地方都推薦過，這個(gè)漸變色是可以作為背景色來使用的。大家可以看到這上面大部分的漸變的明度都比較高，比較淺。過渡也非常細(xì)膩。這一點(diǎn)大家可以拿來當(dāng)作自己配色的參考。

這兩個(gè)工具以外，還有很多其他好用的工具我就不一一演示了，這是我用的比較多，而且覺得還挺實(shí)用的兩個(gè)網(wǎng)站。

寫在最后

其實(shí)色彩和音樂的感覺是最接近的，每個(gè)色彩對(duì)應(yīng)每個(gè)音調(diào)，那經(jīng)過組合以后就能表現(xiàn)出一定的情感。通常你也很難說，哪一首音樂是最好聽的，因?yàn)槊總€(gè)人喜歡的音樂風(fēng)格都不一樣。但是總有那么一些歌是廣為流傳成為經(jīng)典的。

所以要學(xué)會(huì)漸變，首先應(yīng)該是了解色彩。我們不可能通過一篇文章就能完成學(xué)習(xí)，肯定是希望以這篇文章作為一個(gè)啟發(fā)點(diǎn)，大家可以從中找到自己的學(xué)習(xí)的方向。

圖標(biāo)是界面設(shè)計(jì)中最重要的元素之一，也是我們 UI設(shè)計(jì)師必備的技能，日常工作中我們經(jīng)常會(huì)接到含有圖標(biāo)設(shè)計(jì)、優(yōu)化的需求。但到底什么樣的圖標(biāo)才算是優(yōu)秀的？也許很多設(shè)計(jì)師并沒有太完整的評(píng)判體系，只是憑感覺，這樣就會(huì)造成輸出效果不穩(wěn)定、耗時(shí)太長(zhǎng)等不良的后果。

所以借著這次機(jī)會(huì)我梳理了一套圖標(biāo)設(shè)計(jì)自檢的評(píng)判體系，一共五個(gè)維度，大綱如下：

• 識(shí)別
• 性格
• 品牌
• 飽滿
• 細(xì)節(jié)

一、識(shí)別

評(píng)判事物的價(jià)值在于它的用途是什么。

圖標(biāo)的用途是幫助用戶理解信息，所以「識(shí)別性」就是圖標(biāo)最重要、最底層的價(jià)值，如果你設(shè)計(jì)一個(gè)圖標(biāo)，用戶看不懂，即使視覺再美觀，也是無根之木，沒有任何價(jià)值可言。

識(shí)別性可以分為兩個(gè)方面，一是含義識(shí)別，二是視覺識(shí)別。

先說含義識(shí)別，簡(jiǎn)單來說就是你的圖標(biāo)能不能被理解，當(dāng)然并不是設(shè)計(jì)師自己能理解就可以了，而是需要用戶來決定。這里和大家分享一個(gè)我判斷圖標(biāo)是否易識(shí)別的方法——內(nèi)部用戶調(diào)研法，說白了就是隨機(jī)問一些團(tuán)隊(duì)內(nèi)部人員，最好多問幾種崗位，這樣得來的結(jié)果更加可靠，案例如下。

我在改版「話題」這個(gè)圖標(biāo)的時(shí)候，想到了微博的「#」，于是把「#」和氣泡框結(jié)合到了一起，如下圖：

這時(shí)我找來10個(gè)內(nèi)部人員進(jìn)行測(cè)試，只有3個(gè)能看懂圖標(biāo)的意思（這3個(gè)人都是平時(shí)經(jīng)常玩微博的），在這樣的數(shù)據(jù)之下，不用猶豫，這個(gè)方案一定是不可取的。

在進(jìn)行調(diào)研時(shí)，最少要保證80%的人能看懂，才證明你的方案是可行的。

再來說視覺識(shí)別，顧名思義這一點(diǎn)已經(jīng)與圖標(biāo)含義無關(guān)，而是視覺層面的問題，例如大小、底色等等阻礙用戶識(shí)別的因素。

這里引入一個(gè)國(guó)外的測(cè)試結(jié)果，是我在一位前輩的文章中看到的，測(cè)驗(yàn)包括一組四種樣式的圖標(biāo)：白底黑色實(shí)心圖標(biāo)，白底黑色空心圖標(biāo)，黑底白色實(shí)心圖標(biāo)，黑底白色空心圖標(biāo)，經(jīng)過10天的時(shí)間，1260名參與者總共完成了超過25000次圖標(biāo)的認(rèn)知測(cè)試。將得出的數(shù)據(jù)分成四組進(jìn)行雙向方差分析，在相同的統(tǒng)計(jì)條件下，選擇黑底白色空心圖標(biāo)要比其他三種組合的時(shí)間慢0.17秒，也就是說這種圖標(biāo)的信息表達(dá)能力會(huì)少弱，如下圖：

所以在這樣的理論與數(shù)據(jù)的支撐下，我對(duì)部分圖標(biāo)進(jìn)行了如下改版：

有底色的圖標(biāo)全部從線性改成面性，如改不成面性（例如時(shí)鐘）需要適當(dāng)加粗描邊，目的就是提高視覺識(shí)別性。

切記，識(shí)別性是圖標(biāo)最重要的價(jià)值，尤其是在沒有文字說明的情況下，一定不要讓用戶產(chǎn)生困惑，不然你就是在消耗用戶體驗(yàn)，而不是給用戶體驗(yàn)賦能！

二、性格

試想如果一個(gè)人沒有性格，那這個(gè)人就是沒有靈魂的，圖標(biāo)也一樣，沒有性格即沒有靈魂。

那如何打造屬于自己的性格呢，我們需要從用戶和品牌出發(fā)，例如騰訊動(dòng)漫的用戶都是動(dòng)漫、cosplay愛好者，給人一種又萌又可愛的感覺，所以我們需要讓圖標(biāo)盡量圓潤(rùn)一些：

像上圖2號(hào)圖標(biāo)一樣，增大圓角，使圖標(biāo)看起來更加圓潤(rùn)可愛。

基于這樣的用戶人群，我們還將原有一些單色圖標(biāo)，改成下面這樣的彩色圖標(biāo)：

目的就是讓圖標(biāo)可愛活潑的性格更加明顯。

三、品牌

品牌性是我們經(jīng)常提到的緯度，常用的提取品牌的基因也有很多，顏色、圖形、吉祥物等等，這里舉兩個(gè)例子，一個(gè)是具象的品牌基因——吉祥物：

我們有自己的品牌吉祥物——黑子，所以在圖標(biāo)設(shè)計(jì)時(shí)可以將其運(yùn)用起來，如下圖就是結(jié)合黑子形象設(shè)計(jì)出來的「逗幣」圖標(biāo)：

再舉個(gè)比較抽象的例子，從 logo 當(dāng)中提取品牌基因。

由于 logo 的字體筆畫比較粗，整體給人一種厚重飽滿的感覺：

因此我們可以在品牌logo 中提取「粗胖飽滿」的品牌基因，在這樣的背景下就不用再糾結(jié)圖標(biāo)使用2px描邊還是3px的描邊了：

我們可以很確定的使用3px描邊，因?yàn)樗确掀放苹蛴址嫌脩粜愿瘢ǚ逝謭A潤(rùn)顯得可愛）。

四、飽滿

很多時(shí)候我們做出來的圖標(biāo)不夠精致，其中一個(gè)很大的原因就是不夠飽滿。

如何判斷圖標(biāo)是否飽滿呢？我常用的衡量方法就是在圖標(biāo)上面加一個(gè)矩形，看圖標(biāo)的正形的面積是否還可以增加。

例如下圖，藍(lán)色是正形，紅色是負(fù)形：

很明顯藍(lán)色的正形面積是可以增加的，例如：

這就是在增加圖標(biāo)的飽滿度，我也是按照這個(gè)思路來改版圖標(biāo)飽滿度的。

舉個(gè)真實(shí)的例子，我們?cè)娴睦m(xù)看圖標(biāo)是上下結(jié)構(gòu)，而上面部分的圖形太窄，導(dǎo)致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

于是我對(duì)圖標(biāo)的結(jié)構(gòu)進(jìn)行了調(diào)整，盡可能的減少綠色部分，最后達(dá)到了下圖這樣的效果：

最后提醒大家，對(duì)于圖標(biāo)的飽滿度，還需要結(jié)合整套圖標(biāo)的視覺效果來進(jìn)行調(diào)試，雖然上面這個(gè)方法可以解決大部分圖標(biāo)的飽滿問題，但還是要具體場(chǎng)景具體分析，切記，我們的目標(biāo)是讓整套圖標(biāo)看起來和諧、統(tǒng)一、精致！

五、細(xì)節(jié)

細(xì)節(jié)也包含很多方面，例如：

1. 角度是否一致或者遵循某種規(guī)律

我們定制的角度規(guī)范是30度的倍數(shù)，這樣可以很大程度的提高圖標(biāo)統(tǒng)一性。

2. 描邊末端的細(xì)節(jié)處理

下圖就是一個(gè)錯(cuò)誤的例子，一個(gè)描邊末端是直角，一個(gè)又是圓角：

我們?cè)谔幚磉@樣的細(xì)節(jié)時(shí)，一定要保證統(tǒng)一性。

3. 像素對(duì)齊問題

大家會(huì)覺得只要把一個(gè)尺寸的圖標(biāo)做好像素對(duì)齊，導(dǎo)出其他倍數(shù)的圖標(biāo)就是ok的，其實(shí)這樣的想法是不對(duì)的，因?yàn)樵趯?dǎo)出0.5或1.5倍數(shù)關(guān)系的時(shí)候，像素很容易再次產(chǎn)生不對(duì)齊的情況。

舉個(gè)例子，我們做圖標(biāo)是以2倍圖為基礎(chǔ)，然后統(tǒng)一導(dǎo)出3倍圖，那這時(shí)候3倍圖就是2倍圖的1.5倍，導(dǎo)出的時(shí)候就發(fā)生了下面這樣的情況：

雖然2倍圖是像素對(duì)齊的，但3倍圖卻沒有對(duì)齊，如果設(shè)計(jì)師沒有仔細(xì)檢查切圖，就會(huì)發(fā)生線上圖標(biāo)發(fā)虛的情況，所以我們?cè)谳敵銮袌D時(shí)，一定要仔細(xì)核查，發(fā)現(xiàn)錯(cuò)誤及時(shí)調(diào)整，免得造成不良影響。

除了以上這些，還有視覺大小、圓角、描邊粗細(xì)是否統(tǒng)一的細(xì)節(jié)，當(dāng)然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標(biāo)設(shè)計(jì)的時(shí)候一定要多多注意。

總結(jié)

本次梳理的五緯自檢法可以用在圖標(biāo)設(shè)計(jì)的自我檢查、改版優(yōu)化等多個(gè)方面，或許它并不全面，但一定具有參考價(jià)值，希望能給大家?guī)韱l(fā)和靈感，我們也會(huì)更加努力，爭(zhēng)取做出更好的作品和教程與在設(shè)計(jì)道路上的你們分享交流。

交互設(shè)計(jì)是什么？
交互設(shè)計(jì) Interaction Design 也被成為IXD。交互設(shè)計(jì)建立起了人與計(jì)算機(jī)便捷溝通的通道，它的目標(biāo)是創(chuàng)造可用性和用戶體驗(yàn)俱佳的產(chǎn)品。作為UI設(shè)計(jì)師，我們?cè)诠ぷ髦薪?jīng)常會(huì)對(duì)接交互設(shè)計(jì)師和產(chǎn)品經(jīng)理，他們具有豐富的交互知識(shí)和經(jīng)驗(yàn)。那是不是我們作為UI設(shè)計(jì)師，就只需要專心做好視覺層面的工作而不需要了解交互設(shè)計(jì)了呢？當(dāng)然不是，在視覺設(shè)計(jì)層面更多地考慮布局和交互原則才可以讓我們的界面更友好，視覺設(shè)計(jì)師是交互設(shè)計(jì)中非常重要的角色。
用戶體驗(yàn)
在工作中經(jīng)常聽到UED（用戶體驗(yàn)設(shè)計(jì)）和UCD（以用戶為中心的設(shè)計(jì)），可見互聯(lián)網(wǎng)行業(yè)非常重視用戶體驗(yàn)，而用戶體驗(yàn)絕不僅僅是要樣子好看。有些設(shè)計(jì)師只關(guān)注視覺層面，認(rèn)為產(chǎn)品戰(zhàn)略等用戶體驗(yàn)維度和自己的設(shè)計(jì)無關(guān)，那么就會(huì)和產(chǎn)品經(jīng)理等角色處于不同的世界了。“他們?yōu)槭裁匆疫@么改？”、“為什么這里文字要淺一點(diǎn)？”有時(shí)不理解對(duì)方的思考角度就會(huì)造成爭(zhēng)執(zhí)。用戶體驗(yàn)（User Experience）是用戶使用產(chǎn)品的心理和感受，用戶體驗(yàn)體現(xiàn)了產(chǎn)品設(shè)計(jì)以人為本的設(shè)計(jì)精神。其實(shí)早在互聯(lián)網(wǎng)出現(xiàn)之前就有“顧客先點(diǎn)雞就先有雞”、“顧客就是上帝”這種說法，并且西方很多大公司如施樂、聯(lián)合利華等大公司早在互聯(lián)網(wǎng)行業(yè)出現(xiàn)之前就已經(jīng)開始進(jìn)行研究用戶體驗(yàn)了，可見用戶體驗(yàn)對(duì)所有產(chǎn)品是多么的重要。但是讓人摸不著頭腦的是，用戶體驗(yàn)有時(shí)非常地主觀：因?yàn)橛脩趔w驗(yàn)背后影響用戶的因素有人的喜好、情感、印象、心理反應(yīng)等，有些人明明有摩拜卻要走很遠(yuǎn)找OFO，也有人只吃肯德基而不吃麥當(dāng)勞。這些選擇并不是優(yōu)勝劣汰，而是有背后的原因的。要想讓我們的產(chǎn)品被人喜歡，我們需要研究用戶。
Image title
用戶研究七種方法
但用戶可能是幾百萬人呢！我們面對(duì)這樣抽象的群體然后告訴自己要以他們?yōu)橹行脑O(shè)計(jì)這多么抽象啊。這么多用戶甚至有時(shí)用戶自己的聲音也是矛盾的。我們到底怎么樣了解用戶的心聲呢？
用戶畫像
根據(jù)產(chǎn)品的調(diào)性和用戶群體，用戶研究團(tuán)隊(duì)可以設(shè)計(jì)出一個(gè)用戶的模型，這種研究的方式被稱為用戶畫像。用戶畫像是由帶有特征的標(biāo)簽組成的，通過這個(gè)標(biāo)簽我們可以更好地理解誰(shuí)在使用我們的產(chǎn)品。用戶畫像建立后，每個(gè)功能可以完成自己的用戶故事：用戶在什么場(chǎng)景下需要這個(gè)功能。這樣，我們所設(shè)計(jì)的功能就會(huì)更接近用戶實(shí)際的需要。比如我們現(xiàn)在要設(shè)計(jì)一個(gè)女裝購(gòu)物應(yīng)用，那么我們可以做這個(gè)用戶畫像：小美，在北京國(guó)貿(mào)CBD上班，21歲，收入8000，喜歡淘寶購(gòu)物和電視購(gòu)物。使用我們產(chǎn)品的目的是為了尋找正品時(shí)尚大牌服裝進(jìn)行網(wǎng)購(gòu)。小美因?yàn)閯偖厴I(yè)所以一方面喜歡大牌一方面又資金短缺（啟發(fā)：我們的產(chǎn)品是不是要解決這兩個(gè)痛點(diǎn)？）小美是時(shí)尚OL，審美很高，不喜歡俗氣的設(shè)計(jì)。（啟發(fā)：界面設(shè)計(jì)是否考慮不要使用粉粉嫩嫩的顏色而使用大牌的黑白色？）。看，即使小美并不真實(shí)存在，但是她指引了我們的產(chǎn)品設(shè)計(jì)。接下來，我們還可以給小美增加一個(gè)頭像，在做設(shè)計(jì)時(shí)我們想象這個(gè)人就是真實(shí)存在的用戶，她會(huì)對(duì)我們的設(shè)計(jì)有什么看法。當(dāng)我們完成用戶畫像之后，還可以接著設(shè)計(jì)用戶故事：小美經(jīng)常需要在工作場(chǎng)合穿符合工作氣質(zhì)的衣服，也需要在約會(huì)時(shí)有晚禮服之類的服裝，可是小美的收入有限，她眼光較高但是對(duì)價(jià)格過高的服裝無法承擔(dān)，她使用我們的APP就是為了尋找正品且價(jià)格適中的服裝。那么，小美在哪里用我們的APP呢？這就要為小美繼續(xù)設(shè)計(jì)一個(gè)用戶使用場(chǎng)景了：小美在開會(huì)時(shí)可能會(huì)打開看看、在地鐵里也會(huì)瀏覽、在清晨打開衣柜時(shí)也會(huì)瀏覽。基本來說是碎片時(shí)間，而且是有著裝需求時(shí)。（啟發(fā)：我們是不是需要把字號(hào)調(diào)大以適應(yīng)地鐵里顛簸的閱讀環(huán)境？我們是不是需要設(shè)計(jì)省流量模式免得剛剛畢業(yè)的小美花一筆巨大的流量資費(fèi)？）
Image title
用戶畫像
用戶訪談
邀約用戶來回答產(chǎn)品的相關(guān)問題，并記錄作出后續(xù)分析。用戶訪談?dòng)腥N形式：結(jié)構(gòu)式訪談（根據(jù)之前寫好的問題結(jié)構(gòu)）、半結(jié)構(gòu)式訪談（一半根據(jù)問題一半討論）、開放式訪談（較為深入地和用戶交流，雙方都有主動(dòng)權(quán)來探討）。用戶訪談設(shè)置時(shí)要注意：用戶不可以是互聯(lián)網(wǎng)從業(yè)的專業(yè)人員、不可以提出誘導(dǎo)性問題、不要使用專業(yè)術(shù)語(yǔ)。用戶訪談適合產(chǎn)品開發(fā)的全部過程。
問卷調(diào)查
可分為紙質(zhì)調(diào)查問卷、網(wǎng)絡(luò)問卷調(diào)查。依據(jù)產(chǎn)品列出需要了解的問題，制成文檔讓用戶回答。問卷調(diào)查是一種成本比較低的用戶調(diào)查方法。問卷調(diào)查適合產(chǎn)品策劃初期對(duì)目標(biāo)人群的投放，另外注意一個(gè)問題最好收集10個(gè)問卷，也就是如果你有10個(gè)問題那么至少要收集100個(gè)問卷才是有效的。要知道不是所有人都愿意耐心地填寫問卷，很可能敷衍了事的回答會(huì)擾亂我們的判斷。
焦點(diǎn)小組
焦點(diǎn)小組一般有6-12人組成，由一名專業(yè)人士主持，依照訪談提綱引導(dǎo)小組成員各抒己見，并記錄分析。并且在焦點(diǎn)小組的房間里會(huì)有一扇單向玻璃窗，用戶是看不到里面有誰(shuí)的。而在里面坐著的通常是開發(fā)團(tuán)隊(duì)，他們可以清晰地看到用戶是如何吐槽他們的產(chǎn)品的，但是他們沒有權(quán)利直接和用戶進(jìn)行解釋。焦點(diǎn)小組需要特殊的房間和設(shè)備，主持人也需要訓(xùn)練有素，焦點(diǎn)小組特別能夠分析出用戶在沒有我們說明的情況下如何使用我們的產(chǎn)品和對(duì)產(chǎn)品的不滿。
可用性測(cè)試
通過篩選讓不同用戶群來對(duì)產(chǎn)品進(jìn)行操作，同時(shí)觀察人員在旁邊觀察并記錄，可用性測(cè)試的要求是用戶不可以是互聯(lián)網(wǎng)從業(yè)者而應(yīng)該是真實(shí)產(chǎn)品的用戶群體。但是可用性測(cè)試一般要有一個(gè)可用的軟件版本或者原型供人測(cè)試才可以，在軟件開發(fā)的前期不適合用這個(gè)方法。
眼動(dòng)測(cè)試
使用特殊的設(shè)備眼動(dòng)儀來追蹤用戶使用產(chǎn)品時(shí)眼睛聚焦在哪里，盲區(qū)是哪里。比如一個(gè)網(wǎng)站通過眼動(dòng)測(cè)試可以知道用戶的視覺會(huì)自動(dòng)屏蔽網(wǎng)站的常見廣告位置，這時(shí)如果希望提高廣告的點(diǎn)擊，就需要把廣告位放置于用戶聚焦時(shí)間較長(zhǎng)的位置。眼動(dòng)測(cè)試的設(shè)備比較專業(yè)，通常在小公司較難開展。
用戶反饋和大數(shù)據(jù)分析
根據(jù)市場(chǎng)提供的反饋和數(shù)據(jù)得出客觀的判斷和合理的推測(cè)。用戶反饋也是用戶研究的一個(gè)重點(diǎn)，用戶反饋主要是用戶通過產(chǎn)品的反饋入口主動(dòng)向開發(fā)者提出的意見。
有了這些方法，我們就能更好地了解用戶和接近用戶了。但是要注意，用戶研究也是有陷阱的。比如：填寫問卷和參與調(diào)研的用戶可能并不是核心用戶；提交用戶反饋的用戶之外可能有更多沉默的用戶等。總之用戶研究是一個(gè)必要的手段，但是仍然需要產(chǎn)品團(tuán)隊(duì)來對(duì)產(chǎn)品的方向做出決斷。
用戶如何使用產(chǎn)品
使用場(chǎng)景
剛才我們介紹了用戶使用的場(chǎng)景是根據(jù)產(chǎn)品的功能和平臺(tái)決定的。電腦的使用場(chǎng)景是正襟危坐，手持鼠標(biāo)。而移動(dòng)端則是隨時(shí)隨地使用，我們的用戶可能在地鐵里、在廁所里、在吃飯時(shí)、在上課中怕老師看到把手機(jī)藏在桌洞里、在工作中領(lǐng)導(dǎo)巡視后偷偷瞄、在輾轉(zhuǎn)反側(cè)睡不著的時(shí)候沒有開燈地瀏覽等。這時(shí)我們要為用戶考慮，如果他們?cè)谑褂梦覀儺a(chǎn)品的各種場(chǎng)景中有什么需要，是不是需要省流量、是不是需要調(diào)整字號(hào)、是不是需要過濾藍(lán)光、是不是需要護(hù)眼模式、是不是不方便看視頻、是不是需要緩存視頻、是不是界面目前單手不太友好、是不是掃二維碼時(shí)需要個(gè)手電功能、是不是需要語(yǔ)音提醒、是不是需要清除訪問記錄。一個(gè)不考慮用戶使用場(chǎng)景的產(chǎn)品一定是會(huì)遭到吐槽的。很久之前我聽同事在吃飯時(shí)抱怨過“大爺?shù)模膊桓銈€(gè)提示，早晨在地鐵里用4G看流量以為是在家用WIFI，結(jié)果看了一集《甄嬛傳》花了80塊錢”、“哎？你是不是早晨開會(huì)時(shí)玩游戲了？你的比分都給我們推送了哈哈哈”。
Image title
我的產(chǎn)品中的用戶使用場(chǎng)景表格
操作手勢(shì)
網(wǎng)頁(yè)設(shè)計(jì)所處的電腦端目前主要還是依靠鼠標(biāo)點(diǎn)擊來操作。鼠標(biāo)點(diǎn)擊的最小單位甚至可以是一像素。而移動(dòng)端不太一樣，移動(dòng)端設(shè)備中我們使用手指來操作界面。一般來說，手指點(diǎn)觸區(qū)域最小尺寸為7×7 mm，拇指最小尺寸為9×9 mm。也就是在我們@2x設(shè)計(jì)中為88px（或44pt）。這個(gè)神奇地88PX在移動(dòng)端應(yīng)用很廣泛：很多表單單項(xiàng)的高度是88ox、導(dǎo)航欄高度也是88px等等。那您可能會(huì)說，也不對(duì)吧，有些界面上的圖標(biāo)看上去沒有88px啊。是的，但是那只是視覺，我們可以通過增加圖標(biāo)點(diǎn)擊區(qū)域的方式（比如給60像素大小的圖標(biāo)左右增加22像素的透明區(qū)域）來讓圖標(biāo)更好點(diǎn)擊。千萬在設(shè)計(jì)時(shí)不要把操作區(qū)域放得特別近，可以把所有點(diǎn)擊區(qū)域用88px標(biāo)記看是否有重疊的情況，避免點(diǎn)擊一個(gè)圖標(biāo)時(shí)誤點(diǎn)另一個(gè)圖標(biāo)。除了點(diǎn)擊區(qū)域，移動(dòng)端還可以利用各種手勢(shì)來進(jìn)行各種操作的設(shè)計(jì)。主要的手勢(shì)有：
Image title
單點(diǎn)觸碰（Tap）：點(diǎn)擊用來選擇一個(gè)元素，類似鼠標(biāo)的左鍵，是最常用的手勢(shì)。
拖曳（Drag）：點(diǎn)擊某個(gè)元素然后拖拽進(jìn)行移動(dòng)，類似現(xiàn)實(shí)生活中移動(dòng)物體的感覺。
快速拖曳（Flick）速度很快的拖曳操作。
滑動(dòng)（Swipe）：水平或垂直方向的滑動(dòng)，比如翻閱相冊(cè)和電子書翻閱的手勢(shì)。
雙擊（Double-Click）：快速點(diǎn)擊一個(gè)物體，通常會(huì)在放大、縮小操作中使用。
捏（Pinch）：兩根手指頭向內(nèi)捏，捏的動(dòng)作會(huì)使物體變得更小，通常在縮小操作中使用。網(wǎng)易新聞客戶端中正文頁(yè)面即可通過捏的動(dòng)作來縮小字號(hào)。
伸展（Stretch）：兩根手指向外推，現(xiàn)實(shí)中這種操作會(huì)使物體向外拉伸，元素可能會(huì)變得更大，通常會(huì)在放大操作中使用。網(wǎng)易新聞客戶端中正文頁(yè)面可以通過伸展放大字號(hào)。
長(zhǎng)按（Touch and hold）：手指點(diǎn)擊并按住會(huì)激發(fā)另一個(gè)操作。比如朋友圈的相機(jī)圖標(biāo)長(zhǎng)按可只發(fā)文字。但是注意，長(zhǎng)按不是一個(gè)常態(tài)操作，所以一般不太建議用戶進(jìn)行該操作。但長(zhǎng)按操作又是有需要的，所以會(huì)把刪除、只發(fā)文字狀態(tài)等操作隱藏其中。
除了用戶使用場(chǎng)景、點(diǎn)擊區(qū)域、手勢(shì)，那么還有一個(gè)影響我們?cè)O(shè)計(jì)的使用情況，就是用戶怎么拿手機(jī)很重要。用戶可以：?jiǎn)问帜檬謾C(jī)、雙手拿手機(jī)、直向拿手機(jī)、橫向拿手機(jī)。我們需要考慮這些可能發(fā)生的特征進(jìn)行手勢(shì)互動(dòng)的規(guī)劃與設(shè)計(jì)。比如OFO為了讓單手（說不定是左手還是右手）操作方便，主要按鈕在下方并且做的很大，左右手都可以輕松點(diǎn)擊。而微信的很多按鈕也都是大長(zhǎng)條，方便左右手的觸發(fā)。橫屏使用場(chǎng)景一般是游戲、視頻等，所以一般的APP并不支持橫屏操作（微信、支付寶、微博均不支持橫屏操作），
Image title
格式塔：我們?nèi)绾握J(rèn)知？
我們發(fā)現(xiàn)有些用戶在使用設(shè)計(jì)好的界面時(shí)找不到一些重要的功能按鈕。“奇怪，分享功能不就在更多按鈕里面嗎？”、“用戶怎么連這個(gè)也找不到啊”你也許會(huì)說。我們要來了解一下用戶是如何認(rèn)知我們?cè)O(shè)計(jì)好的界面的。在初高中考試的時(shí)候您一定見過完形填空這種格式吧，“格式塔”源自德語(yǔ)“Gestalt”，意即“整體”、“完形”的意思。格式塔心理學(xué)認(rèn)為，我們?cè)谟^察的時(shí)候會(huì)自動(dòng)腦補(bǔ)出一些邏輯和含義來，會(huì)讓觀察對(duì)象變成一個(gè)完整的、整體的、常見的形狀。
＂研表究明，漢字的序順并不定一能影閱響讀，比如當(dāng)你完看這句話后之，才發(fā)這現(xiàn)里的字全是都亂的。＂研究格式塔心理學(xué)對(duì)我們做互聯(lián)網(wǎng)產(chǎn)品和設(shè)計(jì)有什么用呢？掌握格式塔的理論我們就可以讓用戶按照我們安排的“劇本”來交互和操作界面了。我們可以讓用戶比較容易地根據(jù)固定位置找到提交按鈕、我們也可以讓用戶不經(jīng)過太多思考在殺毒軟件中點(diǎn)擊殺毒按鈕等。格式塔心理學(xué)對(duì)于我們做好表現(xiàn)層是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大記憶律兩個(gè)知識(shí)點(diǎn)。
接近律 law of proximity
格式塔心理學(xué)認(rèn)為，人們認(rèn)知事物的時(shí)候，會(huì)依靠它們的距離來判斷它們之間的關(guān)系。兩個(gè)元素越近就說明它們之間關(guān)系更強(qiáng)。但是接近也是有對(duì)比的，在復(fù)雜的設(shè)計(jì)中，我們要一邊考慮它們之間內(nèi)部的邏輯關(guān)系一邊來排版。
Image title
A組和B組因?yàn)榻咏啥a(chǎn)生不同地閱讀順序
Image title
距離更近的信息暗示了他們有內(nèi)在的邏輯關(guān)系
相似律law of similarity
認(rèn)知事物時(shí)，刺激要素（比如大小、色彩、形狀等要素）相似的元素我們傾向于把它們聯(lián)合在一起或者認(rèn)為它們是一個(gè)種類。比如，我們能輕易的分辨出撥號(hào)頁(yè)面中撥號(hào)鍵和按鍵群的區(qū)別。
Image title
相似的元素暗示了他們屬于一個(gè)種類
Image title
類似外形的單元會(huì)被我們?nèi)四X默認(rèn)為同一屬類
閉合律law of closure
就算沒有外形的約束，我們也會(huì)自動(dòng)把圖形腦補(bǔ)完全。比如半個(gè)形狀或者有缺口的形狀我們不會(huì)認(rèn)為是一條線，而是一個(gè)完整的形狀。閉合是指一種完形的認(rèn)知規(guī)律。
Image title
左邊的圖中我們會(huì)認(rèn)為是圓形有缺口而不是一條曲線
右邊的圖形中我們會(huì)認(rèn)為是圓形被三條線截?cái)嗔硕皇撬膫€(gè)圖形
Image title
界面設(shè)計(jì)中露出一半內(nèi)容，閉合律讓我們感知右邊還隱藏著更多內(nèi)容
連續(xù)律law of continuity
在知覺過程中人們往往傾向于使知覺對(duì)象的直線繼續(xù)成為直線，使曲線繼續(xù)成為曲線，也就是視覺的慣性。利用連續(xù)律我們可以讓用戶操作界面時(shí)不經(jīng)過思考就點(diǎn)擊一個(gè)固定的位置。
Image title
深諳連續(xù)律的流氓軟件
成員特性律law of membership character
如果我們有很多同樣的按鈕，如何讓某個(gè)更重要的按鈕突出但是仍然讓用戶感知還是按鈕呢？那就要用到成員特性律了。成員特性律賦予了集體中某一個(gè)元素特殊的一些刺激元素從而突出它。
Image title
獨(dú)特的外形暗示了它與別的元素有不同的功能
Image title
撥號(hào)頁(yè)面中撥號(hào)鍵與微博發(fā)布微博圖標(biāo)都與其他按鈕不同
記憶律：我們?nèi)绾斡洃洠?br /> 接著格式塔五大律還有專門研究用戶記憶的格式塔記憶律。格式塔心理學(xué)家沃爾夫?qū)z忘問題所作的經(jīng)典性研究得出了格式塔的三大記憶律。沃爾夫?qū)嶒?yàn)時(shí)要求實(shí)驗(yàn)體觀看樣本圖形并記住它們，然后在不同的時(shí)間里根據(jù)記憶把它們畫出來。結(jié)果發(fā)現(xiàn)實(shí)驗(yàn)體在不同的間隔時(shí)間畫出來的圖像都有不同。有時(shí)再現(xiàn)的圖畫比原來的圖畫更簡(jiǎn)單更有規(guī)則，有時(shí)原來圖畫中顯著的細(xì)節(jié)在再現(xiàn)時(shí)被更加突出了。還有的比原來的圖像更像某些別的我們都很熟悉的圖案了。沃爾夫把這三種記憶規(guī)律稱之為格式塔三大記憶律：“水平化”、“尖銳化”、“常態(tài)化”。
Image title哪個(gè)圖形才是正確的？（圖片來源：網(wǎng)絡(luò)）
水平化leveling
水平化是指在記憶中我們趨向于減少知覺圖形小的不規(guī)則部分使其對(duì)稱；或趨向于減少知覺圖形中的具體細(xì)節(jié)。
尖銳化sharpening
尖銳化是在記憶中與水平化過程伴隨而行的。尖銳化是指在記憶中，人們往往強(qiáng)調(diào)知覺圖形的某些特征而忽視其它具體細(xì)節(jié)的過程。在有些心理學(xué)家看來，人類記憶的特征之一，就是客體中最明顯的特征在再現(xiàn)過程中往往被夸大了。
常態(tài)化normalizing
常態(tài)化是指人們?cè)谟洃浿校鶕?jù)自己已有的記憶痕跡對(duì)知覺圖形加以修改，即一般會(huì)趨向于按照自己認(rèn)為它似乎應(yīng)該是什么樣子來加以修改的。
Image title
情感化設(shè)計(jì)是什么？
了解格式塔會(huì)讓我們把界面做得符合用戶的心理預(yù)期，讓用戶能夠明顯地找到他應(yīng)該找到的操作。可是用戶好像還是不開心，因?yàn)橛脩粲X得界面不好看。您是不是也會(huì)陷入這樣的矛盾：可用性重要還是美感更重要？怎么樣能夠讓我們?cè)O(shè)計(jì)的界面又好用還漂亮呢？情感化設(shè)計(jì)由唐納德·A·諾曼博士提出，指的是設(shè)計(jì)中情感在所處于的重要地位以及如何讓用戶把情感投射在產(chǎn)品上來解決可用性與美感的矛盾。情感化設(shè)計(jì)是在抓住用戶注意、誘發(fā)情緒反應(yīng)以提高執(zhí)行行為的可能性的設(shè)計(jì)。比如紅色且巨大的購(gòu)買按鈕能夠無意識(shí)地抓住用戶的注意、可愛萌萌的卡通可以緩解用戶網(wǎng)絡(luò)不好時(shí)的焦慮等等。情感化設(shè)計(jì)有三個(gè)水平，它們是遞進(jìn)關(guān)系，分別是：本能水平（重視設(shè)計(jì)外形）、行為水平設(shè)計(jì)（重視使用的樂趣和效率）、反思水平設(shè)計(jì)（重視自我形象、個(gè)人滿意、記憶）。
Image title
本能水平
我們都是視覺動(dòng)物，對(duì)外形的觀察和理解是出于我們本能的。本能水平的設(shè)計(jì)就是刺激用戶的感官體驗(yàn)，讓別人注意到我們的設(shè)計(jì)。這個(gè)階段的設(shè)計(jì)會(huì)更加關(guān)注外形的視覺效果。比如各大電商網(wǎng)站的專題頁(yè)面設(shè)計(jì)，更加注重抓眼球和外觀的刺激。
行為水平
行為水平是功能性產(chǎn)品需要注重的。一個(gè)產(chǎn)品是否達(dá)到了行為水平，要看它是否能有效地完成任務(wù)，是否是一種有樂趣的操作體驗(yàn)。優(yōu)秀行為水平設(shè)計(jì)的四個(gè)方面：功能，易懂性，可用性和物理感覺。比如好用的記事本APP等。
反思水平
反思水平的設(shè)計(jì)與用戶長(zhǎng)期感受有關(guān)，這種水平的設(shè)計(jì)建立了品牌感和用戶的情感投射。反思水平設(shè)計(jì)是產(chǎn)品和用戶之間情感的紐帶，通過互動(dòng)給用戶自我形象、滿意度、記憶等體驗(yàn)，讓用戶形成對(duì)品牌的認(rèn)知，培養(yǎng)對(duì)品牌的忠誠(chéng)度。馬洛斯理論把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求五個(gè)層次。我認(rèn)為反思水平的設(shè)計(jì)就是提供給用戶歸屬感、尊重、自我實(shí)現(xiàn)。比如Google每逢節(jié)日就會(huì)有一些符合節(jié)日化的設(shè)計(jì)、網(wǎng)易嚴(yán)選的空狀態(tài)也會(huì)有品牌感的體現(xiàn)等。
Image title
淘寶空狀態(tài)中的情感化設(shè)計(jì)
情感化設(shè)計(jì)的表達(dá)
Image title
畫面 畫面是情感化設(shè)計(jì)的重點(diǎn)，讓錯(cuò)誤頁(yè)面或者空狀態(tài)都成為一幅可愛的插畫。
應(yīng)景 讓用戶在我們的產(chǎn)品中體驗(yàn)到一些和真實(shí)世界一樣的氛圍變化。
游戲感 沒有人喜歡做任務(wù)。試著讓用戶完成的任務(wù)變成游戲吧。比如每次登陸加金幣，有足夠的金幣就可以獲得什么稱號(hào)。
沖突 沖突非常能夠勾起人的情緒，營(yíng)造一個(gè)競(jìng)爭(zhēng)或者對(duì)抗的氛圍，讓用戶感覺自己置身在一個(gè)比賽或者格斗中一樣。
講故事 給產(chǎn)品和無聊的圖像一些故事內(nèi)容，畢竟沒有人討厭講故事。
隱喻 用一些大家理解，隨處可見的事物表達(dá)一些無趣、生澀的概念。
互動(dòng) 給用戶和其他用戶多制造互動(dòng)機(jī)會(huì)，比如排行榜、推薦等，不要讓用戶感覺孤獨(dú)。
交互八原則
當(dāng)我們了解了產(chǎn)品五要素（產(chǎn)品設(shè)計(jì)的維度問題）、格式塔心理學(xué)（用戶如何認(rèn)知的問題）、情感化設(shè)計(jì)（如何讓用戶滿意的問題）后，我還要給您介紹一大堆地交互原則。這些交互原則會(huì)幫助我們?cè)O(shè)計(jì)出更好用的界面，當(dāng)然也可以幫助我們講出這樣設(shè)計(jì)的原因。不拿出一些理論怎么能夠讓別人信服你的設(shè)計(jì)，對(duì)不對(duì)？
費(fèi)茨定律（Fitts’Law）
費(fèi)茨定律指的是：光標(biāo)到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前光標(biāo)所在的位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。它的數(shù)學(xué)公式是：時(shí)間 T = a + b log2(D/S+1)。這個(gè)定律是由保羅.菲茨博士（Paul M. Fitts）提出的所以得名。菲茨定律在很多領(lǐng)域都得到了應(yīng)用，特別是在互聯(lián)網(wǎng)設(shè)計(jì)中尤為深遠(yuǎn)。我們利用費(fèi)茨定律估算用戶移動(dòng)光標(biāo)到鏈接或者按鈕所需的時(shí)間，時(shí)間越短越。比如有一個(gè)按鈕在左下角，我們的操作可以細(xì)分為兩個(gè)階段：第一個(gè)階段大范圍移動(dòng)到左下方向，然后再做微調(diào)到達(dá)這個(gè)按鈕之上。所以這個(gè)時(shí)間受按鈕和鏈接所在位置與按鈕和鏈接大小影響，也就是說我們?cè)谧鲈O(shè)計(jì)時(shí)要考慮光標(biāo)默認(rèn)會(huì)放在哪里、我們的鏈接按鈕是不是太小了。
Image title
費(fèi)茨定律說明距離越短、目標(biāo)大小越大，那么光標(biāo)到達(dá)目標(biāo)越快
Image title
費(fèi)茨定律在網(wǎng)頁(yè)設(shè)計(jì)中的使用
Image title
OFO和蘋果音樂APP都將按鈕放置手指最容易點(diǎn)擊的區(qū)域并且按鈕足夠大
希克定律（Hick’s Law）
希克定律是指一個(gè)人面臨的選擇（n）越多，所需要作出決定的時(shí)間（T）就越長(zhǎng)。它的數(shù)學(xué)公式是：反應(yīng)時(shí)間 T=a+b log2（n）。在我們的設(shè)計(jì)中如果給用戶的選擇更多，那么用戶所需要做出決定的時(shí)間就越長(zhǎng)。比如我們給出用戶菜單-子菜單-選項(xiàng)，那么用戶可能會(huì)很糾結(jié)；如果我們簡(jiǎn)化成菜單-選項(xiàng)，就會(huì)減少用戶做選擇的時(shí)間。
Image title
用戶反應(yīng)時(shí)間和選擇數(shù)量的關(guān)系
Image title
我們應(yīng)該減少用戶的選擇
7±2法則
讓我們先玩?zhèn)€游戲，請(qǐng)記憶下面的文字，一分鐘后移開視線：
掙 多 久 可 貓 風(fēng) 師 裊 崩 六 酒 望
現(xiàn)在閉上眼睛想一下剛才的文字您能回憶幾個(gè)？大概是五個(gè)到九個(gè)之間。1956年美國(guó)科學(xué)家米勒對(duì)人類短時(shí)記憶能力進(jìn)行了研究，他注意到年輕人的記憶廣度大約為5到9個(gè)單位之間，就是7±2法則。這個(gè)法則對(duì)我們做界面設(shè)計(jì)的啟迪就是如果希望用戶記住導(dǎo)航區(qū)域的內(nèi)容或者一個(gè)路徑的順序，那么數(shù)量應(yīng)該控制在七個(gè)左右，比如蘋果和站酷網(wǎng)站的導(dǎo)航個(gè)數(shù)。另外，移動(dòng)端底部Tab區(qū)域最多也是五個(gè)，而頁(yè)面中的八大金剛圖標(biāo)也是八個(gè)。
Image title
蘋果、站酷、Dribbble等網(wǎng)站導(dǎo)航數(shù)量全部是7±2
泰思勒定律（Tesler’s Law）
這個(gè)定律是說產(chǎn)品固有的復(fù)雜性存在一個(gè)臨界點(diǎn)，超過了這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了。我們只能將這種復(fù)雜性轉(zhuǎn)移。比如我們?nèi)绻l(fā)現(xiàn)頁(yè)面的功能是必須的，但當(dāng)前的頁(yè)面信息過載，那么就需要將次要的功能收起或者轉(zhuǎn)移。
Image title
Dribbble網(wǎng)站導(dǎo)航將更多功能收起在一個(gè)表示更多的圖標(biāo)內(nèi)
防錯(cuò)原則
一個(gè)表單是需要填寫完畢后方可提交的。但是用戶有時(shí)會(huì)漏填或者忘記填寫，這是用戶點(diǎn)擊提交會(huì)怎么樣？很可能有些選項(xiàng)會(huì)被清空（比如密碼選項(xiàng)基于安全考慮會(huì)清空cookies）那么用戶還得重新填寫。這時(shí)解決辦法是在用戶沒填寫完之前把按鈕設(shè)置一個(gè)看起來不能點(diǎn)擊的樣式，用戶想提交時(shí)彈窗：您還有內(nèi)容沒有填寫完哦，然后把用戶定位在沒填寫完的項(xiàng)目，讓那個(gè)表單高亮。（是不是真的做到以用戶為中心啦？）再比如推特只允許用戶填寫140個(gè)字，但用戶一寫爽了往往會(huì)超出140個(gè)字那怎么辦？解決辦法是給他在旁邊倒數(shù)還能寫幾個(gè)字。看，這些都是我們?yōu)榱朔乐褂脩舨僮鞒霈F(xiàn)錯(cuò)誤所做的努力，防錯(cuò)設(shè)計(jì)就是要減少錯(cuò)誤操作所帶來的災(zāi)難。錯(cuò)誤的提示當(dāng)然需要設(shè)計(jì)師的設(shè)計(jì)了。可是也許您不知道有些錯(cuò)誤提示含糊，用戶并不知道到底錯(cuò)的是哪里，下一步該怎么辦。比如僅僅登錄功能就可能會(huì)有用戶名錯(cuò)誤、密碼錯(cuò)誤、網(wǎng)絡(luò)超時(shí)、連續(xù)三次輸入密碼錯(cuò)誤、用戶名為空等不同的錯(cuò)誤，而有些產(chǎn)品僅僅給出“出錯(cuò)了”，那么用戶當(dāng)然會(huì)不知所措了。正向的例子比如一次我在登錄Google Mail時(shí)輸錯(cuò)了密碼，它提示“密碼輸入錯(cuò)誤，提示：您在1個(gè)月前改過密碼”。
Image title
BOO！APP輸入密碼時(shí)卡通會(huì)蒙住眼睛，輸錯(cuò)時(shí)也會(huì)有提示
奧卡姆的剃刀法則（Occam’s Razor）
奧卡姆的剃須刀法則主要就是說我們做產(chǎn)品時(shí)功能上不可以太繁瑣，應(yīng)該保證簡(jiǎn)潔和工具化。比如產(chǎn)品中為用戶提供了收藏功能是否就不需要喜歡了？提供了喜歡是否不需要點(diǎn)贊了？一定保證功能上的克制。
Image title
QQ將更多功能收起到了頭像和加號(hào)圖標(biāo)中
防呆原則
有一個(gè)著名的交互書籍叫作《Dont make me think》，翻譯過來就是不要讓我思考。這句話一直在我做設(shè)計(jì)時(shí)響起：不要認(rèn)為用戶是專家！不要認(rèn)為用戶是專家！有時(shí)我們會(huì)覺得，點(diǎn)擊漢堡包圖標(biāo)當(dāng)然就是菜單啊！這個(gè)按鈕長(zhǎng)按不就會(huì)調(diào)出XX功能了嘛。但是我們忘記了普通用戶可能并不理解什么是漢堡包圖標(biāo)、什么是抽屜式導(dǎo)航、什么是長(zhǎng)按、雙指滑動(dòng)。更何況普通用戶并不會(huì)研究我們的APP，在他們眼中我們的產(chǎn)品只是眾多工具中的一個(gè)，我們何德何能認(rèn)為自己的產(chǎn)品是值得用戶花時(shí)間學(xué)習(xí)的？一定要把交互和設(shè)計(jì)做得簡(jiǎn)單，并且讓用戶在別的地方“學(xué)習(xí)”過。每個(gè)頁(yè)面強(qiáng)調(diào)一個(gè)重要的功能而不要讓用戶做選擇題。這些都是有效防呆的好方法。防呆和不要讓我思考都講的是我們的設(shè)計(jì)要自然而然。
Image title
運(yùn)動(dòng)APP KEEP 的頁(yè)面中總有一個(gè)按鈕是突出的
防止不耐煩原則
用戶是很容易不耐煩的，你還記得你多少次看著視頻加載條罵人嗎？如果我們需要用戶等待載入信息，一定要給一個(gè)有情感化的設(shè)計(jì)提示，避免用戶產(chǎn)生焦慮。 比如很多游戲（比如決戰(zhàn)平安京、王者榮耀等）加載時(shí)都會(huì)出現(xiàn)主角跑步的小動(dòng)畫，美團(tuán)等APP下拉刷新時(shí)也會(huì)有幾幀的動(dòng)畫來安慰用戶。動(dòng)畫要好于蘋果默認(rèn)提供給開發(fā)的“轉(zhuǎn)菊花”，因?yàn)榭ㄍㄐ蜗蟾杏H和力。但是好像還不夠，用戶需要掌控感，“哎？它一直加載，是不是死機(jī)了？”為了防止用戶沒有掌控感，我們可以為用戶設(shè)計(jì)加載條或者加載提示。加載狀態(tài)條很遺憾很多都是假的甚至是重復(fù)的，原因是其實(shí)要判斷加載了多少M(fèi)的素材的代碼更占資源！我們本來想安慰用戶等待加載的時(shí)間竟然會(huì)變得更長(zhǎng)，那當(dāng)然不行啦。于是很多時(shí)候我們會(huì)做一個(gè)假的加載狀態(tài)條來安撫用戶，我想您一定看過反復(fù)加載的加載條吧！加載條下的文案其實(shí)也是可以變得非常有情感化設(shè)計(jì)感受的，比如通常是：加載場(chǎng)景資源、加載素材這樣的文案，但是有些APP需要很長(zhǎng)加載時(shí)間時(shí)會(huì)給出這樣的文案：導(dǎo)演正在準(zhǔn)備、女主角準(zhǔn)備化妝了、攝像師打開了燈光。是不是更加好玩啦？
Image title
美團(tuán)和網(wǎng)易嚴(yán)選的加載動(dòng)畫
總結(jié)
交互知識(shí)其實(shí)關(guān)鍵還要在應(yīng)用和分析。一方面，我們可以在工作中積累經(jīng)驗(yàn)，不斷地思考如何和同事配合一起研究提高產(chǎn)品在使用時(shí)的體驗(yàn)；另一方面，我們也要經(jīng)常積累一些產(chǎn)品使用時(shí)發(fā)現(xiàn)的交互。建議大家平時(shí)可以收集你覺得不錯(cuò)的情感化設(shè)計(jì)或者微交互，比如發(fā)現(xiàn)餓了么在下雨天送貨時(shí)會(huì)有電閃雷鳴和雨滴的設(shè)計(jì)；OFO和滴滴打車在不同節(jié)日也會(huì)把地圖找車?yán)锏膱D標(biāo)換成節(jié)日相關(guān)的圖標(biāo)；BOO！APP在輸入密碼時(shí)小怪獸會(huì)捂住眼睛；WPS在晚上寫作時(shí)（沒錯(cuò)就是現(xiàn)在）會(huì)提示你開啟過濾藍(lán)光的護(hù)眼模式等等。一個(gè)好的設(shè)計(jì)師一定是懂得交互的設(shè)計(jì)師，也應(yīng)該是非常細(xì)心的設(shè)計(jì)師，也應(yīng)該是懂得為用戶著想的設(shè)計(jì)師。

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

近期淘寶 App 的許多頁(yè)面都有了較大的改動(dòng)，在分析淘寶改版的基礎(chǔ)上，通過幾個(gè)關(guān)鍵頁(yè)面的分析對(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. 主要改版頁(yè)面

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

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

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

2. 個(gè)人首頁(yè)

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

新舊版本的對(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è)頁(yè)面主要看到兩個(gè)點(diǎn)的變化，一個(gè)是 icon 改為原來的填充式，一個(gè)是動(dòng)效滾動(dòng)的節(jié)奏。

icon 的問題個(gè)人猜想是因?yàn)轶w量與重要性、位置的問題，線條式的體量弱于填充式。在「我的淘寶」頁(yè)面中，最重要的信息是「我的訂單」，因此需要一定的突出。另外在測(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. 店鋪首頁(yè)

這一塊做的 A/B 測(cè)試。店鋪頁(yè)面的改動(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é)果）。店鋪頁(yè)在導(dǎo)航上的大改動(dòng)，會(huì)在一定程度上對(duì)已經(jīng)形成習(xí)慣的老用戶造成沖擊，對(duì)頁(yè)面重新適應(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)了許多，樣式接近外賣等待中的訂單頁(yè)面。可視化固然可以展示更多的信息，但是在用戶非訓(xùn)練的情況下信息傳遞的速度未必比文字要更快，不同的人對(duì)圖形的理解也會(huì)有所偏差。不過介于外賣 App 的頁(yè)面已經(jīng)對(duì)很多用戶進(jìn)行了教育，相信這種理解上不會(huì)有太大難度。但是依然要在后續(xù)優(yōu)化中逐漸突出信息的重點(diǎn)。

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

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

我的淘寶這一頁(yè)的動(dòng)效解決問題在上面有說到，右邊的有好貨頁(yè)面，當(dāng)用戶在滑動(dòng)頁(yè)面時(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è)面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業(yè)務(wù)、頁(yè)面跳轉(zhuǎn)等問題。

1. 首頁(yè)

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

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

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

2. 搜索結(jié)果頁(yè)

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

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

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

3. 分類頁(yè)

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

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

4. 商品詳情頁(yè)

此頁(yè)面我僅從節(jié)奏感這一個(gè)角度來看，上圖已經(jīng)標(biāo)出了每個(gè)頁(yè)面的節(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)的文字大小與間距處理不和諧而帶來?yè)頂D感。

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

6. 個(gè)人首頁(yè)

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

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

7. 訂單

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

三、總結(jié)

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

關(guān)于統(tǒng)一性這一點(diǎn)，可能有人說京東做的更好，因?yàn)樗鼛缀跛许?yè)面都用了卡片風(fēng)，而淘寶沒有。個(gè)人認(rèn)為，設(shè)計(jì)風(fēng)格是次于設(shè)計(jì)目標(biāo)的，如果這種設(shè)計(jì)風(fēng)格不能很好滿足該頁(yè)面的設(shè)計(jì)目標(biāo)，建議還是以設(shè)計(jì)目標(biāo)為重；如果仍然強(qiáng)制使用該風(fēng)格的話，會(huì)得不償失。淘寶的做法是把卡片這種風(fēng)格歸類為輕質(zhì)化風(fēng)格，除了卡片以外，還有去線條、色塊等等設(shè)計(jì)語(yǔ)言，因此并非強(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)頁(yè)能在互聯(lián)網(wǎng)上大量的信息中脫穎而出，體驗(yàn)是至關(guān)重要的。現(xiàn)代網(wǎng)頁(yè)中大量的視覺和交互內(nèi)容存在，是為了能通過體驗(yàn)直擊人心，這樣才能在激烈的競(jìng)爭(zhēng)中存活。

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

如果你認(rèn)為網(wǎng)站內(nèi)容是用來讀的，那就錯(cuò)了。現(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)，在首頁(yè)上放上一大堆的按鈕和鏈接，不如通過視覺上的引導(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)該很容易被找到。
• 可取：設(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ǔ)

用戶體驗(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í)有很多。可以做成popover類，actionsheet類，activityview類。這些樣式很難去說誰(shuí)好誰(shuí)壞，這里我就只是列舉出來，具體用哪種樣式，大家自己來判斷。

標(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)樗閷弦粯樱玫臅r(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的空頁(yè)面，避免無效操作。

以上說的篩選體系都比較傳統(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)入正文：

獲取（ACQUISITION）分為三個(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)部語(yǔ)言或者表達(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è)面元素優(yōu)先級(jí)、頁(yè)面元素突出強(qiáng)弱進(jìn)行視覺上的引導(dǎo)，很常見的就是：在你第一次使用某個(gè)產(chǎn)品時(shí)，會(huì)引導(dǎo)使用者進(jìn)行第一步第二步的操作，降低用戶對(duì)產(chǎn)品的陌生感）

2.動(dòng)效引導(dǎo)（通過頁(yè)面浮層的形式教育用戶如何進(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é)不斷歸納