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

• 雖說漸變是一個有效的元素，但為什么我們的漸變，還是和大神們的漸變有區別？
• 我們應該怎樣做出漸變的質感？
• 為什么說用色才是漸變的精髓？

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

漸變是在色彩上的一個相對緩慢的過渡，我們的視覺會隨著這個漸變的過渡而產生一種流動感，而這種流動感全憑在色彩上發生的種種變化。是的，我們的重點來了，就是這個變化，需要我們今天深入去加以了解。

談到變化，我們自然會想到這個變化的范圍。如果拿出我們的色輪來看，我們就會發現色輪上的變化范圍有大有小，當兩個色彩距離較近時，我們可以說他們是鄰近色，這時難以發現他們的區別，直至我們的肉眼無法分辨。這時候可以說變化范圍較小。

當兩個色彩距離180，在色輪上呈相對，我們可以說這時的色彩變化是最大的，于是也就產生了最強烈的對比。很多撞色的情況，也是在這種對比下發生的。我們通常會把這對顏色稱為互補色。

當然，實際的情況比這要稍微復雜一點，我們一起來看下。

一、色相對比

剛剛大家可以發現，這個色輪上的色彩的一個特點是什么？只有色相的變化。沒錯，我們平時也已經習慣了，只用色相來區分色彩。所以，今天要講的第一個對比，也就是色相的對比。

色相的對比，在色輪上就能很直觀的表現。例如紅色和黃色這一段，截取過來以后，就變為了紅 – 黃漸變。利用色環就能很輕松的實現色相的漸變。距離越遠，漸變色的對比也就越大，互補色之間的對比達到了極值，比如紅 – 藍漸變的對比就大過紅 – 黃漸變。

這里首先教給大家一個快速生成色輪的小技巧，這個技巧不需要利用網上的圖片或工具。現做現用，很方便。

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

STEP 01

讓我們先用這個自定義形狀工具畫出一個圓環。

STEP 02

然后在圓環里填充色彩，這里我們運用一個漸變疊加。

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

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

2. 高能提醒：別被參數騙了

可能很容易被初學者忽略的是，我們在 PS 里的色彩（HSB）這個參數里看下，一般來說H-色相，S-飽和度，B-明度，這里的情況和我們在色彩學里學到的 HSB 有點小差異。

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

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

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

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

另外一個情況就是不希望色彩發灰，這時需要用到色環，在色環上根據所需要的漸變過渡來選取不同的色彩配置。

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

一般來說，漸變本身就足夠吸引人，有漸變參與的情況下，我個人的建議是色彩不要太多，盡量少元素，整體風格傾向極簡，這時最能發揮漸變色這種特質的魅力。

這個案例中的漸變過渡，中間的這個紅色和藍色的漸變就是用漸變工具做出來的，兩邊的漸變都是取用了色環上的漸變過渡，可以看到色彩上兩邊的漸變中的色相更多，更飽滿，飽和度和明度都沒有喪失，而中間的漸變在紅藍之間的過渡出現了飽和度較低的紫灰色。

二、色溫對比

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

所以，把色環上的色彩根據主觀溫度進行一個劃分，就有了我們經常聽說的暖色和冷色。冷暖色雖然無法用屬性值來進行衡量，但是卻在色彩中發揮不小的作用。

1. 獲得平衡感

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

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

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

冷暖色的對比都是在同一個版面內的一個動態對比，尤其對于綠色和紫色這個范圍內的色彩來說的話更是如此。比如綠色，在和藍色搭配的時候，由于藍色是絕對的冷色，所以綠色就表現出暖色的特質；而綠色如果和橙色搭配，橙色又是絕對的暖色，所以綠色又表現出冷色的特性。紫色也是同樣的情況，和藍色搭配它偏向暖色，而和橙色搭配時它又是偏冷的。

用起來其實也很簡單，如果你的配色中發現整體感覺偏冷，就增加暖色。如果太暖，那就增加冷色調。如果整體的配色看不出哪里不對勁，但總覺得色彩有點奇怪，就先看看色溫是不是實現了平衡。

三、明度對比

再增加一個屬性，漸變這個游戲又增加難度了，明度這個屬性表現為顏色的明暗程度，明度引入了另一個性質：光。其實我們平時看到的色彩就是因為有了光，才有了顏色。但是一般來說我們會把光簡單歸屬于「發光」這個行列。事實上，由于光線的折射，我們視網膜接受到光的波長，才產生了色彩。那么光線的強烈與否，就會影響這個顏色的表現。

明度的對比，是所有顏色屬性當中，最容易被覺察到的。我們可以簡單來看，我們的素描就是利用明暗來表現物體，黑白灰能毫不費力表現現實中光的感覺。所以在配色中，有了明暗對比，是一個很好表現色彩感染力的元素。

1. 表現立體感

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

當然，我們的色彩并非一定要有立體感才能生動，有些配色大師，會刻意去弱化立體感，所以會盡量避免明暗的對比。但是，作為初學者，一定要知道明暗對比，懂得在適當的情況下拿來使用。

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

我們可以再和大家演示一下，例如這里有兩個圓，這兩個圓都是填充為紫 – 綠漸變，這時的紫和綠是同樣的明度。這里注意，就算是同樣明度，兩個顏色在直觀的感覺上，明暗程度也是有差別的，比如綠色會稍微亮一點。這時打開漸變工具，在后邊的綠色這一端色彩，將它的明度調高，這時大家會發現，右邊這個圓就變為了一個球體。

2. 從黑白灰開始

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

有了對明度的把握，我想我們對色彩的把握才能上升到新的層次，否則，我們在一堆色彩里，很容易迷失方向。

四、色度對比

這里說的色度，也被叫飽和度，有的書上也叫彩度，拿我們日常用語講就是鮮艷程度。色度對比越強，尤其是色輪上的互補色，在他們色度都達到最大時，會撞出最大的火花，產生最強烈的效果。

有時候這種高彩度的配色用在動感很強的設計中，看上去活力四射。但這種互補色之間也會發生彼此互斥的關系，造成整個版面的凌亂，所以要非常謹慎的對待色度。

空氣透視 – 空間感的塑造

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

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

色彩濃度的強弱對比，和其他的色彩的屬性相結合，配色就變得更復雜。但是通常來說，配色并沒有標準答案。所以導致很多人在配色的時候，都是依靠一種感覺在操作。其實感覺的確是一個最直接的選色方法之一，但是并不是唯一的方式。大家如果對色彩有更深入的了解以后，就會慢慢理解感覺層面下的更有趣的東西。這個也是經驗積累。

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

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

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

五、兩個漸變配色網站推薦

1. Grabient

網站鏈接：https://www.grabient.com/

這個網站的工具很好用，我當時在群里推薦的時候，有人問我說這個和 PS 里的漸變工具有什么區別。我在剛剛其實已經和大家講過，PS里的顏色的設置是有一些和我們的色彩理論不太符合的地方，但是這個漸變工具就完全符合我們對色彩屬性的了解。所以在這里可以進行調試，再確定漸變的值，最后放到 PS 里用。

2. WebGradients

網站鏈接：https://webgradients.com/

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

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

寫在最后

其實色彩和音樂的感覺是最接近的，每個色彩對應每個音調，那經過組合以后就能表現出一定的情感。通常你也很難說，哪一首音樂是最好聽的，因為每個人喜歡的音樂風格都不一樣。但是總有那么一些歌是廣為流傳成為經典的。

所以要學會漸變，首先應該是了解色彩。我們不可能通過一篇文章就能完成學習，肯定是希望以這篇文章作為一個啟發點，大家可以從中找到自己的學習的方向。

圖標是界面設計中最重要的元素之一，也是我們 UI設計師必備的技能，日常工作中我們經常會接到含有圖標設計、優化的需求。但到底什么樣的圖標才算是優秀的？也許很多設計師并沒有太完整的評判體系，只是憑感覺，這樣就會造成輸出效果不穩定、耗時太長等不良的后果。

所以借著這次機會我梳理了一套圖標設計自檢的評判體系，一共五個維度，大綱如下：

• 識別
• 性格
• 品牌
• 飽滿
• 細節

一、識別

評判事物的價值在于它的用途是什么。

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

識別性可以分為兩個方面，一是含義識別，二是視覺識別。

先說含義識別，簡單來說就是你的圖標能不能被理解，當然并不是設計師自己能理解就可以了，而是需要用戶來決定。這里和大家分享一個我判斷圖標是否易識別的方法——內部用戶調研法，說白了就是隨機問一些團隊內部人員，最好多問幾種崗位，這樣得來的結果更加可靠，案例如下。

我在改版「話題」這個圖標的時候，想到了微博的「#」，于是把「#」和氣泡框結合到了一起，如下圖：

這時我找來10個內部人員進行測試，只有3個能看懂圖標的意思（這3個人都是平時經常玩微博的），在這樣的數據之下，不用猶豫，這個方案一定是不可取的。

在進行調研時，最少要保證80%的人能看懂，才證明你的方案是可行的。

再來說視覺識別，顧名思義這一點已經與圖標含義無關，而是視覺層面的問題，例如大小、底色等等阻礙用戶識別的因素。

這里引入一個國外的測試結果，是我在一位前輩的文章中看到的，測驗包括一組四種樣式的圖標：白底黑色實心圖標，白底黑色空心圖標，黑底白色實心圖標，黑底白色空心圖標，經過10天的時間，1260名參與者總共完成了超過25000次圖標的認知測試。將得出的數據分成四組進行雙向方差分析，在相同的統計條件下，選擇黑底白色空心圖標要比其他三種組合的時間慢0.17秒，也就是說這種圖標的信息表達能力會少弱，如下圖：

所以在這樣的理論與數據的支撐下，我對部分圖標進行了如下改版：

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

切記，識別性是圖標最重要的價值，尤其是在沒有文字說明的情況下，一定不要讓用戶產生困惑，不然你就是在消耗用戶體驗，而不是給用戶體驗賦能！

二、性格

試想如果一個人沒有性格，那這個人就是沒有靈魂的，圖標也一樣，沒有性格即沒有靈魂。

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

像上圖2號圖標一樣，增大圓角，使圖標看起來更加圓潤可愛。

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

目的就是讓圖標可愛活潑的性格更加明顯。

三、品牌

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

我們有自己的品牌吉祥物——黑子，所以在圖標設計時可以將其運用起來，如下圖就是結合黑子形象設計出來的「逗幣」圖標：

再舉個比較抽象的例子，從 logo 當中提取品牌基因。

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

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

我們可以很確定的使用3px描邊，因為它既符合品牌基因又符合用戶性格（肥胖圓潤顯得可愛）。

四、飽滿

很多時候我們做出來的圖標不夠精致，其中一個很大的原因就是不夠飽滿。

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

例如下圖，藍色是正形，紅色是負形：

很明顯藍色的正形面積是可以增加的，例如：

這就是在增加圖標的飽滿度，我也是按照這個思路來改版圖標飽滿度的。

舉個真實的例子，我們原版的續看圖標是上下結構，而上面部分的圖形太窄，導致左上角、右上角的空白太多（也就是綠色部分太多），沒有撐滿矩形，如下圖：

于是我對圖標的結構進行了調整，盡可能的減少綠色部分，最后達到了下圖這樣的效果：

最后提醒大家，對于圖標的飽滿度，還需要結合整套圖標的視覺效果來進行調試，雖然上面這個方法可以解決大部分圖標的飽滿問題，但還是要具體場景具體分析，切記，我們的目標是讓整套圖標看起來和諧、統一、精致！

五、細節

細節也包含很多方面，例如：

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

我們定制的角度規范是30度的倍數，這樣可以很大程度的提高圖標統一性。

2. 描邊末端的細節處理

下圖就是一個錯誤的例子，一個描邊末端是直角，一個又是圓角：

我們在處理這樣的細節時，一定要保證統一性。

3. 像素對齊問題

大家會覺得只要把一個尺寸的圖標做好像素對齊，導出其他倍數的圖標就是ok的，其實這樣的想法是不對的，因為在導出0.5或1.5倍數關系的時候，像素很容易再次產生不對齊的情況。

舉個例子，我們做圖標是以2倍圖為基礎，然后統一導出3倍圖，那這時候3倍圖就是2倍圖的1.5倍，導出的時候就發生了下面這樣的情況：

雖然2倍圖是像素對齊的，但3倍圖卻沒有對齊，如果設計師沒有仔細檢查切圖，就會發生線上圖標發虛的情況，所以我們在輸出切圖時，一定要仔細核查，發現錯誤及時調整，免得造成不良影響。

除了以上這些，還有視覺大小、圓角、描邊粗細是否統一的細節，當然，這些都比較容易理解，就不一一舉例說明了，大家在做圖標設計的時候一定要多多注意。

總結

本次梳理的五緯自檢法可以用在圖標設計的自我檢查、改版優化等多個方面，或許它并不全面，但一定具有參考價值，希望能給大家帶來啟發和靈感，我們也會更加努力，爭取做出更好的作品和教程與在設計道路上的你們分享交流。

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

電商類 App 是日常使用頻次非常高的應用，它們的每一次更新改版不僅是業務的拓展、用戶需求的滿足，同時也是消費趨勢的引領與跟隨。

近期淘寶 App 的許多頁面都有了較大的改動，在分析淘寶改版的基礎上，通過幾個關鍵頁面的分析對比淘寶、京東、蘇寧易購三大綜合類電商平臺的產品設計，希望此篇文章能讓大家對電商類 App 的產品設計有更深的認識。

一、淘寶改版

前陣子淘寶進行了改版，這次改版循序漸進，并做了較多的 A/B 測試。

1. 主要改版頁面

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

上圖為5個 tab 的頁面，這次統一了頭部的顏色，強調了品牌，統一性方面也得到了提升。

以下是從單個頁面的角度進行改版分析。

2. 個人首頁

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

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

新版的卡片式很突出，去掉了大部分的線條，轉而用塊面來代替線條表達層級關系。

「我的訂單」部分 icon 樣式發生了變化（7. 7. 2 版），從填充式轉變為線條式，突出了 icon 右上角的數字，但這一點在測試版本中又改回來了（后面討論）。

88會員和物流這兩塊內容滾動呈現，真正是動效解決問題，從時間軸來解決信息量大而空間局限的問題，同時動態效果增加了用戶吸引度。

在測試版中，這個頁面主要看到兩個點的變化，一個是 icon 改為原來的填充式，一個是動效滾動的節奏。

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

動效滾動是上面說的88會員和物流，7. 7. 2版本里兩個滾動是同時進行的，而7. 7. 8的測試版中兩個滾動是錯開的。上下同時滾動會讓人有些混亂，會讓人認為這兩塊的信息是相互關聯的。

3. 店鋪首頁

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

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

4. 物流詳情

這一塊可以說是樣式上的大改。用可視化來表現包裹正處的位置以及即將進行的操作，增強用戶感知（降低理解難度），進一步提升對商品信息的把控感。比原先僅僅是文字展示而言生動了許多，樣式接近外賣等待中的訂單頁面。可視化固然可以展示更多的信息，但是在用戶非訓練的情況下信息傳遞的速度未必比文字要更快，不同的人對圖形的理解也會有所偏差。不過介于外賣 App 的頁面已經對很多用戶進行了教育，相信這種理解上不會有太大難度。但是依然要在后續優化中逐漸突出信息的重點。

物流詳情頁除了樣式的巨大變化，還有一個特點就是場景化細分，不同的場景做出了差異化。例如僅僅是物流詳情頁，根據不同的場景：發貨未攬件 – 已攬件未配送 – 快遞員配送中 – 到達菜鳥驛站/其他快遞點 – 已簽收等，頁面突出的信息均有所區別。已攬件時突出快遞信息，配送時突出配送員信息等。

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

不過在7. 7. 8的測試版本中，又將快遞信息的樣式減為兩種，算是一種妥協。本人認為，場景細分出發點是好的，但在樣式和位置兩點中，最好至少有一點是固定不變的，這樣才不會過多增加用戶的學習成本，也能涵蓋一些小概率場景。

5. 動效

這兩張圖都是店鋪頁面頂部的動效，當用戶向下滑動頁面時，頂部的信息會出現變化，也算是細分場景的一種，通過動效的方式完美過渡，過渡的流暢感會讓用戶對該平臺增加些許好感。

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

總結來看，淘寶改版的設計角度可以總結為：設計追隨目標，品牌、會員突出，追隨設計趨勢，細分場景，可視化展現和流暢動效。另外淘寶對設計、測試的態度上來說，設計解決實際問題，設計需要驗證，測試要嚴謹。

二、淘寶與其他競品

這里只選了京東和蘇寧易購兩個與淘寶進行了幾個關鍵頁面比較，以下主要從視覺的角度談一下有哪些問題，這里幾乎不牽扯業務、頁面跳轉等問題。

1. 首頁

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

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

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

2. 搜索結果頁

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

標簽：在標簽的處理上，易購的標簽非常強，在頁面上非常突出，喧賓奪主；京東的標簽弱化，與淘寶類似，但完全不同類的標簽樣式相同（秒殺與自營），會讓人覺得有些混亂。

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

3. 分類頁

風格：淘寶用了明顯的卡片，去線條；而京東也用了卡片，卡片感微弱，是為了統一性而做；易購仍然是線框區分，整體區分效果不佳。

品牌：淘寶和京東在文字的處理上沒有用更多的色彩，而易購的色彩運用得非常多，削弱品牌感，且沒有帶來任何優勢。

4. 商品詳情頁

此頁面我僅從節奏感這一個角度來看，上圖已經標出了每個頁面的節奏感給我的感受。淘寶整體的節奏感比較好，輕重緩和；京東和易購在節奏感上做的都有些問題，重節奏之間無輕節奏的調和會缺乏呼吸感。

5. 購物車

風格效果：淘寶沒有用卡片風格；京東用了卡片，導致大量留白，同時沒有帶來任何優勢，蘇寧易購整體稍顯擁擠，沒有亮點。

圖文編排：淘寶整體非常和諧；京東圖片均使用了白底，這點很好保持了統一性；京東使用了大量的設計細節，字號、粗細、字體、顏色等等非常豐富，但整體效果并沒有很理想，稍顯瑣碎與凌亂；蘇寧易購的文字大小與間距處理不和諧而帶來擁擠感。

其他細節：京東標簽不同于搜索結果頁的弱化，而是非常強化，導致視覺焦點混亂，個別按鈕非常小，操作不便；易購標簽處理上比京東收斂；易購底部 tab 與其他部分沒有區分，浮框像廣告，效果不佳，數量修改框的描邊太硬，比例不和諧。

6. 個人首頁

整體風格：淘寶和京東都是明顯的卡片式，蘇寧易購是廣義上的卡片式。

這里主要說一說易購的問題：首屏出現「我的專場」的大片不平衡色塊非常不合適，部分 icon 效果不佳，另外有一些內容上的 bug。

7. 訂單

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

三、總結

綜合上面具體頁面的分析可以看出淘寶在 UI 設計上的優勢：追隨設計趨勢、統一性、排版和諧等。

關于統一性這一點，可能有人說京東做的更好，因為它幾乎所有頁面都用了卡片風，而淘寶沒有。個人認為，設計風格是次于設計目標的，如果這種設計風格不能很好滿足該頁面的設計目標，建議還是以設計目標為重；如果仍然強制使用該風格的話，會得不償失。淘寶的做法是把卡片這種風格歸類為輕質化風格，除了卡片以外，還有去線條、色塊等等設計語言，因此并非強調一定要使用卡片形式。

作為用戶，在很多時候會很容易判斷出一個網站的用戶體驗是否優秀，因為主觀感受是很難被欺騙的。但是作為網站的設計者和開發者，角色轉換之后，所需要面對問題就復雜得多。身為構建者，要讓體驗盡善盡美需要花費大量的時間精力來完善整個體驗的閉環。今天為你所整理的這7個 UX設計的原則，能夠幫你更好地進行網站的 UX設計，并且盡可能地將整體的用戶體驗提升到一定高度。

1. 圍繞用戶體驗來進行整體設計

想要創造難忘的用戶體驗，自然要圍繞著用戶體驗本身來進行設計。甚至在某種意義上來說，數據和內容也應該是服務于體驗的， 它們應該以什么樣的體驗來呈現出來，這是設計者需要反復思考和琢磨的問題。

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

想讓你的網頁能在互聯網上大量的信息中脫穎而出，體驗是至關重要的。現代網頁中大量的視覺和交互內容存在，是為了能通過體驗直擊人心，這樣才能在激烈的競爭中存活。

2. 網站內容應當一目了然

如果你認為網站內容是用來讀的，那就錯了。現代用戶的注意力集中的時間非常短，絕大多數用戶在瀏覽信息的時候，都是快速掃視，而非逐字逐句地仔細閱讀，信息的展現一定要直觀、清晰，確保能夠一瞥就能看明白。借助信息圖表和視覺，更快地傳達信息和數據。

你需要讓你的內容更加吸引用戶，絕大多數用戶會為觸動它們的信息和內容而駐足，當他們想要了解更多的時候，才會點擊，了解更多。

3. 用戶想要簡單而清晰的內容

用戶只需要半秒就能判斷出網站設計和內容，你需要盡量讓網站的交互和指引足夠清晰，顯而易見。不要讓按鈕難以被用戶發現，在首頁上放上一大堆的按鈕和鏈接，不如通過視覺上的引導，讓用戶注意到最關鍵的那個 CTA按鈕。

通過迭代和測試，不斷地優化和提升網站的易用性。有的設計對于絕大多數的用戶都非常有用，凸顯最重要的選項，允許隱藏額外的功能，并且為用戶提供顯示全部的選項。

除了清晰的設計，整體的一致性也很重要。統一的配色、交互和圖形能夠讓用戶對于后續的操作有更清晰的預期，減少用戶在后續操作過程中探索的力度，這是通過統一性設計提升產品易用性的一種方式。

4. 通用設計元素 vs 創造性

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

對于鏈接、導航、布局這樣基本的元素，應該始終優先考慮其可用性，在此基礎上再發揮創意。

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

5. 了解你的用戶

在開始創建網站和 APP 之前，你應該對于你的目標客戶群體有足夠清晰的了解，這樣才能更好地為他們來設計界面。

一旦你清楚地了解了你的用戶，就能了解他們的需求和愿望，并且設計出符合他們預期的界面和體驗。這個時候，你的競爭對手能夠為你提供靈感和想法。注意對方的色彩，布局，風格和功能。

盡可能使用你的受眾已經熟悉的 UI 模式和 UI 元素，能夠更快讓他們上手。在此基礎上，適當地進行差異化的設計，這樣效率更高。

當你確定了受眾之后，記得盡量把他們的反饋納入到你的設計當中。

6. 視覺層次很重要

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

視覺層次的構建能夠讓網站內容更加清晰，也更加富有功能性。

7. 控制用戶體驗的質量

Peter Moville 在 usability.gov 這個網站上列舉出了用戶體驗設計的關鍵因素，它的核心價值在于通過不同的維度更好地掌控用戶體驗的質量：

• 有用：內容應該是原創的且滿足需求。
• 可用：網站的內容應該很容易被找到。
• 可取：設計元素應該貼合情感且具備可欣賞性。
• 可發現：內容容易被定位，被找到，并且可導航。
• 無障礙：設計要為有障礙的用戶進行定制。
• 可信：網站內容應該有權威性，且值得被相信。

除了上面的維度之外，還有一些值得參考的 UX設計的質量衡量標準：

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

結語

用戶體驗設計的目標不僅僅是讓產品本身更優秀，更重要的是從情感層面上和用戶產生關聯。有界面而沒有體驗，這樣的產品在今天的競爭中是活不下去的。

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

 三種常見基本樣式

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

Tab

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

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

當然當選項過多的時候，我們還有一個法子，就是使用彈框，用戶點擊后可以看到全部的選項。

列表式

列表式也可稱之為list，其特點就是占用空間小。因為它可以將選項隱藏起來，用戶需要點擊才能看到所有的選項，因此在有限的空間里可以展示更多的篩選維度。礙于手機屏幕尺寸的限制，列表式篩選現在應用的越來越普遍。

列表式篩選的樣式其實有很多。可以做成popover類，actionsheet類，activityview類。這些樣式很難去說誰好誰壞，這里我就只是列舉出來，具體用哪種樣式，大家自己來判斷。

標簽式

對于標簽式，很難進行準確的定義，我更傾向于將單選按鈕，多選按鈕，switch等統稱為標簽式，標簽式只能針對單一條件進行篩選，這點和tab很類似。標簽式很少單獨出現，多數情況下都是與tab和列表式結伴而行。

在淘寶里用戶可以點擊視圖icon來切換視圖模式，這就是典型的標簽式篩選。

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

常見的篩選體系 

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

tab+tab:

tab之所以受到青睞，是因為其較低的學習成本。每一個tab代表一個類別，而且是直接展示給用戶看的，所以很多產品的篩選功能都會優先考慮使用tab。即使功能結構復雜到無法用一層tab來完成篩選任務，設計師也會考慮使用雙層tab樣式（tab+tab）的樣式。（PS.當然下圖應該算是segment control+tab）

tab+列表式：

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

tab+列表式+標簽：

當產品的功能結構進一步復雜，這也給篩選功能增加了新的難題。以boss直聘來說，這里的篩選項主要分為四個：排序方式（推薦/）、工作地點、公司規模、崗位要求。其中后三個篩選項包含大量的條件，特別工作地點，需要進一步定位到街道或地鐵站。對于這種多維度，深層級的篩選需求我們可以使用tab+列表式+標簽的樣式。

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

篩選體系的容器

篩選體系是由眾多篩選項組成的，這些篩選項需要一個“容器”來承載。上面說的boss直聘用的是下拉列表，這種樣式其實還比較簡單的，我們可以看一些功能更加復雜一點的產品，比如各大電商平臺。這里使用的是抽屜式篩選框，說它是抽屜式，因為它跟抽屜一樣，用的時候可以拉出來，不用的時候可以關起來，節省了空間。從某個角度來說，我們可以把抽屜式看成列表式的一個放大版。抽屜式篩選框可以容納更多的篩選條件，像我在上面提到的輸入框，多選按鈕都可以在這里使用。

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

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

當然Airbnb篩選功能最大的亮點在于可以向用戶即時反饋篩選結果的數目，用戶不太可能會進入搜索結果為0的空頁面，避免無效操作。

以上說的篩選體系都比較傳統，大部分都是基于對現有結果進行篩選，其實我們可以對篩選功能進行前置。例如，我們可以在用戶進行搜索之前就對結果進行篩選。

甚至在新用戶第一次使用產品的時候，可以讓用戶填寫一些個人信息以便進行個性化推送。

篩選功能的存在意義在于幫助用戶對功能信息進行快速的定位，對篩選功能進行適度的前置可以簡化用戶的操作流程，同樣可以達到節省用戶時間的目的。

總結：

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

在這里先給大家分享一組近期APP使用過程中發現的UI&交互知識點，大家可以一起學習交流，對于個人觀點不認同的可以在下面留言探討，thanks~

產品即場景，體驗又貫穿整個產品~孰重孰輕早已分不清

產品即場景，而場景化核心要素之一的“體驗”，是其中最重要的一項。

本文從體驗出發，結合AARRR（用戶增長）模型進行闡述，其中我認為該模型的使用必須是在產品搭建的場景下才能運作的。而其中涉及每一步的良好體驗剛好又反哺場景的完善。

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

文章不是教案，更不是真理。希望大家帶著批判的眼光去看待每一篇文章。畢竟思辨精神才是形成獨立思維的法寶。由于文章較長，我會分成上下兩部分發布，進入正文：

獲取（ACQUISITION）分為三個部分：

一：自然流量的獲取

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

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

2.某個痛點確確實實需要解決（當某類用戶存在某個痛點時，會自己通過搜索或者同類產品對比選擇一款產品進行使用，如果你的產品剛好能幫助使用者解決痛點，那么你成功吸引了用戶。）

3.純粹進行產品的體驗（產品發燒友、同類競品的體驗人員、無意中下載的等）。我們稱為無效流量，因為這部分用戶一般是不太可能成為產品的忠實粉絲的。他沒有明確的目的、沒有明確要解決的痛點。

二：運營推廣的獲取

運營推廣這個名詞在互聯網誕生之前就已經存在了。只是說原來傳統的營銷手段即產品-價格-渠道-促銷開始逐漸失效。轉而變為場景化的運營推廣。將推廣落實到具體的小場景中。

1.線上推廣

其中線上推廣包含線上營銷活動（營銷活動又分為已有話題進行營銷【可以選擇融入當前的熱點話題類似節日、娛樂圈大事件等】&【提供話題痛點解決方案進行營銷】和制造話題營銷【創造業內的話題】【通過深度用戶進行制造話題】、優惠活動（包括邀請好友得好禮、會員優惠、某個節日優惠等）。線上推廣無非就是通過網絡搭建虛擬場景，通過場景邊界的不斷延伸，覆蓋吸引更多的用戶參與進來。

2.線下推廣

線下推廣包含地推（地推不可避免的會帶來2部分的人群：被地推活動中的獎品吸引的人；確實被產品的介紹所吸引的人）、海報&代言（同樣會有2部分人群：被明星效應所吸引的人；被產品介紹所吸引的人）、門店的互相導流合作。線下推廣效率遠遠沒有線上推廣來的快。但是對于需要線下場景的產品來說，這又是必不可少的。

三：社群自傳播

通過單點擊破，這就需要運營團隊有很好的洞察能力，找到符合產品調性的社群，通過事件引爆該社群或者社區，讓社群成為你產品的擁護者和傳播者。

1.通過老帶新的模式進行獲取用戶

當產品與老用戶之間建立很好的紐帶關系后，老用戶自然會以個人為中心，向外幫你宣傳產品。

2.引爆社群

通過各類社區，找到符合你產品的目標人群。通過對該社群的研究，運用社群內部語言或者表達，調動整個社群幫你發力。有點及面的擴散，稱之為“氣球理論（很細的一根針就能戳爆氣球）”這同樣是能引爆傳播性特別重要的一點。

3.參與感（社會關系綁定）

當你周圍的人都在轉發或者都在使用的時候，如果你不了解或不使用的話，會引起個體的孤獨感。也就是說“他們都在玩，我不玩就落伍了”，但是這種情況在產品推廣的前期一般不太會出現。當傳播勢能達到一定程度的時候，才會出現刷爆朋友圈！

激活（ACTIVATION）分為二個部分：

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

一：進入產品后的操作引導

1.視覺引導（包括頁面元素優先級、頁面元素突出強弱進行視覺上的引導，很常見的就是：在你第一次使用某個產品時，會引導使用者進行第一步第二步的操作，降低用戶對產品的陌生感）

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

二：產品本身是否能激起用戶的探索欲

當然這個問題本身是建立在是否能真正的幫助用戶解決某些方面的痛點。否則再強的探索欲，也跟你產品本身沒有關系。如何激起用戶的探索欲？

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

2.產品是否對使用者產生持續的吸引能力，產品前期只有不斷的通過各種方式刺激用戶。（產品體驗優化、活動力度、宣傳方式、讓惠讓利等）但需要注意的是：過度營銷不等于有效刺激。

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

上半部分先到這里，下半部分會從“留存”“轉化”“傳播”角度進行展開~

多數人能夠成為很厲害的設計師，很厲害的產品經理。凡事都會有所謂的套路，當你熟知了解某個行業，或者多個行業的套路時。你會站在更高的視角看待問題，同樣你會走的比人家更遠更快。所謂的套路，是基于個人而言，可能你有個很好的導師能夠告訴你以往的經驗。但是我更認為，套路是通過一步步看似笨拙的努力不斷總結不斷歸納