手把手教你 「如何 7 步從 0 ～ 1 設計一款產品經理一稿過，設計風格明確，用戶粘性高的軟件！」

據不完全了解，身邊大部分的 UI 同事都從 0 到 1 參與過一款或多款軟件的設計，設計過程中不知道你是否有過這樣的疑惑：

• 設計稿都做了 100 版了，但產品經理還是不滿意，是我設計不行嗎？
• 產品目標、用戶目標都標得清清楚楚了，但總是找不好設計關鍵詞，來來去去只會用「年輕化、輕量化」？
• 產品目標明確了，設計關鍵詞也有了，但為什么做出來的稿子不是太概念，就是跟競品太像呢？

在解決這些困惑之后，我總結了一套自用的，適合從 0 ～ 1 進行軟件設計或項目改版的方法 ，并在其他項目上進行了二次驗證。

以實踐項目 —— 有道少兒詞典為例，上線一年期間，用戶次日留存峰值 36% 以上，也非常幸運，被 App Store Today 推薦 4 次，App Store 編輯推薦 8 次，被 App Store 納入 2019 本土優秀 App 盤點中，同時被預裝到蘋果線下直營店，作為樣機體驗軟件之一。所以，這個方法親測有效！

這篇文章，通過分析如何解決類似「產品經理不滿意、設計關鍵詞不對、設計風格無區別」這些問題，整理出 7 個幫你從 0 ～ 1 設計一款軟件的步驟。

文章較長，大概需要花費 15 分鐘，建議大家先看大綱，優先閱讀符合自身情況的部分。

產品經理為什么不滿意？

從 0 ～ 1 進行軟件設計，免不了要多出幾個設計稿，但做了 100 稿，產品經理對頁面設計還是不滿意的話，很有可能有 2 點原因：

原因 1：目標不明確

一拿到需求就開始做，很容易忽略需求背后的目標，從 0 到 1 做一款新軟件更是要了解業務目標和用戶目標。

在提出解決辦法前，我們需要先捋清楚以下 2 個問題：

為什么要了解目標？

公司開發軟件是為了達到某些目標或是實現某個目的的，只有了解目標才能更好地為公司創造價值。

什么是業務需求、業務目標和用戶目標？

平時產品經理跟我們說，要設計一個頁面，設計 一個流程，這就是一個業務需求，而這個需求的背后，能夠解釋清楚這個需求是為了什么，要做到什么程度，這就是業務目標（通常包括用什么手段，給用戶帶來什么價值，達到什么目的）。而軟件的目標用戶，他們在一個具體的時間、地點、環境下做了什么操作，想達到什么程度，滿足自己的什么要求，這可以理解為用戶目標。

解決辦法 ：多使用 「為什么+動詞」 的問法，向產品經理了解業務目標、用戶目標。

從 0 ～1 做軟件需要了解的業務目標和用戶目標，我們都可以從產品經理那里得到。

少兒詞典的產品經理很早就給出了業務目標和用戶目標。但，當我們需要更多細節的時候，可以使用「為什么+動詞」這樣的問法。例如：

• 「我們要做一個少兒查詞軟件，定位是一款擁有權威釋義背書，在視、聽、觸方面打造良好體驗，緊扣教材和教學大綱的適合少兒和家長使用的伴學詞典。你來做吧！」「為什么做這個？」
• 「現在兒童教育KOL越來越多，很多家長都很關心k12教育問題。市面上的很多產品都不太適合孩子使用」
• 「為什么這樣的定位可以滿足用戶需求呢？」「為什么是適合少兒和家長使用呢？」
• 「為什么……」

在少兒詞典項目中

• 我們的業務目標是：一款擁有權威釋義背書，在視、聽、觸方面打造良好體驗，緊扣教材和教學大綱的適合少兒和家長使用的伴學詞典。
• 目標用戶群體是：小學 1~6 年級的孩子和他們的家長。
• 用戶目標是：當小學低年級的孩子在家學習的時候，他們的家長需要一款軟件，能緩解家長伴學的壓力。高年級的孩子需要一款軟件，為他們提供準確教學。

原因 2 ：沒有對產品關鍵詞形成共識

我們既了解產品的業務目標，也知道用戶目標的情況下，方案還是被 pass 的話，可能是因為你給出的方案和產品經理想要的不是同一個東西。為什么業務目標在這里不起作用了呢？怎么才能弄清楚產品經理想要的是什么？我們可以用產品關鍵詞來回答這個問題。

為什么業務目標在這里不起作用了呢？

我們常見的業務目標的內容是很長的，用戶目標的內容也是很長的，在這種所有已知內容都很長的情況下，如果沒有準確理解內容，沒有對重點內容達成一致，就很容易產生偏差。例如我要向你描述一位美女，她的頭發很柔順，臉蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我們腦海中想的不是同一個美女。但是，如果我跟你說，這是一個跟芭比娃娃很像的美女的時候，我們腦海中的形象會接近很多。

怎么才能弄清楚產品經理想要的是什么？

就像設計師在進行頁面設計時，需要設計關鍵詞一樣，產品經理在描述自己的業務目標的時候，也需要能概括業務目標重點，突出賣點的產品關鍵詞，這個產品關鍵詞能幫助設計師弄清楚產品經理想要的東西。

部分產品經理為了方便大家達成共識，會早早亮出產品關鍵詞，如果當你們的產品經理沒有辦法提供產品關鍵詞的時候，我們要學會在討論中找到。

解決辦法 ：從業務目標開始跟產品經理討論項目信息，直到獲得雙方達成一致的產品關鍵詞

從業務目標和用戶目標開始跟產品經理討論項目信息，在討論的過程中，我們可以留意產品多次提到的幾個形容詞，寫下來，然后跟產品反復核對確認，最后雙方確認且保留下來的這 3～4 個形容詞，就是這個項目的產品關鍵詞。

少兒詞典的產品關鍵詞是：權威內容，寓教于樂，適合孩子使用。這些關鍵詞被我貼在屏幕的顯眼處，就怕自己哪天忘記了。

設計關鍵詞為什么總是找不對

尋找設計關鍵詞，是設計師非常熟悉的步驟，但常常也在這里翻車，甚至還會出現，不管做什么軟件，反反復復就那幾個關鍵詞的情況，我們可以把原因歸結為：

原因：對用戶不夠了解

為什么不了解用戶會導致關鍵詞找不對？

我們的用戶在選擇軟件、使用軟件的時候，了解到的是軟件的設計、體驗和功能。用戶下載軟件時，他們已有的認知會影響他們對軟件的幻想。就像給小男孩的衣服是天藍色，小女孩的衣服是嫩粉色一樣，如果用戶想要一件天藍色的衣服，而我們給他展示的是深藍色或是嫩粉色的衣服，這都會讓用戶產生疑惑甚至離開。因此，如果對用戶了解不準確，會導致我們輸出錯誤的設計關鍵詞。

而了解目標用戶是又一件復雜的事情。

首先，我們的目標用戶可能是一類人，如有道詞典，下載軟件用戶和使用用戶大概率是同一個人。目標用戶也有可能是兩類人或是更多，如少兒詞典，下載用戶是家長，使用用戶是家長和孩子，企業協作軟件也類似。

從接觸軟件，下載軟件，使用軟件，到判斷是否繼續使用軟件，不同的階段的目標用戶是不一樣的，目標用戶在不同階段的需求也是不一樣的。

其次，開發軟件的周期是很長的，在開發軟件的過程中，我們的用戶在不斷地接收新的知識和觀點，用戶的喜好，認知可能會發生很大的變化。

因此，為了更好地了解用戶，我們需要找到用戶跟軟件之間的交互關系，以及影響用戶喜好的因素。一共有 2 個步驟：

步驟 1. 分析不同用戶跟軟件之間的接觸點，從未來趨勢和用戶當前認知角度收集用戶資料

在這一步驟中，我們加入了 2 個概念，接觸點和未來趨勢。

什么是接觸點？

接觸點指的是用戶與產品發生交互的關鍵點，用來捋清楚我們剛剛提到 「用戶跟軟件之間的交互關系」。以少兒詞典為例，家長和軟件之間的接觸點，可以羅列為：家長聽說少兒詞典 – 到應用中心下載軟件 – 打開軟件 – 使用軟件……可見要想打造一款用戶好評度高的好產品，僅僅優化軟件的體驗是不夠的。

為什么要從未來趨勢和用戶當前認知角度去收集用戶資料？

剛剛有提到新軟件的周期是較長的，前期定好的風格、關鍵詞等，到了開發上線后卻不適用了，既浪費人力，也浪費資源，因此要考慮未來趨勢對用戶的影響。同時，用戶在選擇軟件的時候，已有的喜好/預期/經驗等用戶認知會影響用戶對軟件的判斷。就像大家想到夏天的冷飲時，腦海中會浮現冰塊、西瓜等元素，因此雪碧、西瓜等符合用戶對夏天認知的食品在天氣炎熱時會熱銷，但是受到大部分買家越來越注重卡路里這一未來趨勢的影響，低卡的西瓜冷飲也可能在未來一段時間大賣。

接觸點和未來趨勢、用戶認知之間有什么關系？

了解用戶接觸點之后，我們就可以猜測用戶在這一接觸點的需求和心理，加入未來趨勢和用戶認知，能讓我們做出來的東西更符合用戶預期。

尋找接觸點。我們了解到，少兒詞典的目標用戶群體是 1～6 年級的學生和他們的家長，即 6～12 歲孩子，和 30～44 歲家長。然后，我們粗略地將用戶的接觸點劃分為，篩選軟件 – 下載軟件 – 使用軟件 – 判斷是否再次使用軟件，孩子、家長跟接觸點之間的關系就可以展示為：

孩子是軟件查詢、練習、核心功能體驗者，家長是內容審核者、軟件篩選者、伴學時軟件使用者。

找到接觸點之后，我們還需要把影響用戶認知的內容具象化。

例如，我們想了解夏天做什么口味的飲品更好，我們可以從夏日飲品口味銷量排行榜，夏日新品類型，夏日廣告等角度來獲得更清晰的用戶認知。應用到少兒詞典中就是，家長在篩選軟件時，老師的要求，未來孩子考試的內容、日常輔導內容、大 V 推薦的內容等會影響家長對下載軟件的判斷。每個接觸點都可以使用這樣的方式，來聯想更多影響用戶認知的內容。然后我們將得到類似下面的表格：

根據表格，我收集了 近 10 頁的用戶信息

步驟 2. 提取收集到的信息，并放入四象限中，總結出2～4個視覺關鍵詞、體驗關鍵詞

雜亂無序的信息只有經過歸納之后才能被大家使用。

怎么歸納總結雜亂的信息呢？

UI 設計師都清楚，在進行界面設計時，大標題、縮進、分層等排版方式能讓我們的頁面看起來更清晰易讀。處理雜亂的信息也同理，要做的是找到信息的重點，然后把信息歸類，最后再用一句對內容進行總結，方便大家理解。應用到我們提取關鍵詞的環節中就是，挑選重要信息、放入四象限中、總結出能歸納這些信息的關鍵詞。

挑選重要信息。以家長篩選軟件為例，當我們將熱門大 V 推薦的教學方法、內容，進行整理的時候，會發現美學、樂感、編程、外文圖書、兒童心理教育、英文教學方法（自然拼讀）等內容出現的頻率很高，在一堆內容中挑選跟少兒詞典相關的內容，如美學、外文圖書、兒童心理教育等。

放入四象限中。在這一方法中，我們將四象限劃分為設計和用戶認知 2 個方向，其中設計劃分為視覺風格和體驗風格，用戶認知劃分為當前認知和未來趨勢 。以剛剛挑選的兒童美學教育為例，這是一個屬于未來家長會越來越關注的少兒視覺發展方向，所以我們放在視覺風格、未來趨勢這一象限中。其他內容也類似，不斷地提取出現頻率高、用戶熱點高的內容，并根據內容類型放入四象限中

總結出能歸納這些信息的關鍵詞。以視覺和未來趨勢象限為例，我們收集到大 V 的美學教育，未來的課本發展趨勢，小學建筑風格發展趨勢，他們都有一個特點，顏色柔和無攻擊，色彩豐富，因此，我們總結出一個視覺關鍵詞是柔和多彩。

其他內容也采用相同的方法進行總結，少兒詞典的視覺關鍵詞是柔和多彩，輕質感，親和陪伴，體驗關鍵詞是，探索多變，感官刺激和重復熟悉。

為什么做出來的設計稿不是太概念就是沒風格？

視覺關鍵詞出來了，產品的業務目標也出來了，從關鍵詞到頁面樣式的邏輯也很嚴謹，但出來的風格卻會覺得跟關鍵詞不太搭，或是跟競品差異不大，在多款 App 實踐后，我們發現可能是這樣的原因：

沒有把關鍵詞的作用發揮出來

引用一句說爛了的名言 「一千個人眼中就有一千個哈姆雷特」。大家在對關鍵詞的理解是有差異的，以「年輕」為例子，一款針對活力的年輕人的衣服和一款針對潮流的年輕人的衣服，設計風格上可能是隔好幾條街的。因此，僅僅得到幾個視覺關鍵詞和體驗關鍵詞還不足以讓我們找準方向，我們還需要將關鍵詞組合和具體化。一共有 2 個步驟：

步驟 1. 分別組合產品關鍵詞和視覺關鍵詞，產品關鍵詞和體驗關鍵詞，找到同時滿足 2 組關鍵詞的規則

為什么將關鍵詞結合能讓關鍵詞的作用發揮出來呢？

我們的目的是要做一款滿足產品需求，符合用戶認知的軟件。

從問題 1 和問題 2 中，我們得到了符合產品需求的產品關鍵詞，和符合用戶認知的視覺關鍵詞和體驗關鍵詞，想要同時滿足產品需求和用戶認知，我們需要找到他們的重合點。如下圖所示，將產品關鍵詞和視覺關鍵詞、體驗關鍵詞分別結合，這樣的出來的規則就能最大限度地符合我們的要求，既滿足產品需求，又符合用戶認知。

具體怎么做呢？下面將分別從視覺和體驗角度舉例子。

視覺角度，以權威內容和柔和多彩結合為例：

「權威內容」 要求我們輸出的內容是符合教材，符合老師標準的，內容是準確無誤的、來源是可靠的；「柔和多彩」 要求我們在進行頁面設計的時候減少大面積顏色的使用，色彩柔和，且顏色多樣。

將兩者結合，我們得到的規則是：

• 市面上的語文和英語教材以橙色封面為主，因此軟件把橙色作為主色，僅在重點區域使用橙色；
• 展示內容要準確，在牛津內容布局上參考《牛津小學生》字典，中文字體采用跟教材相似的文鼎新中楷，英文字體采用跟衡水體相似的 Averta Std；
• 參考大 V 推薦的繪本、動畫片常用的顏色，將顏色定為橙色、黃色、藍色和綠色，降低顏色飽和度；
• 參考繪本的圖案，選擇圓形作為主要的形狀，加入柔和色彩，使用深色和淺色疊加的圓形；
• ……

根據這些內容，我們將得到下面的 4 個顏色和圓形疊加的形式。（ps：通過這樣的形式確定的是規則，如：以橙色為主結合另外 3 個顏色，圓形，使用深淺色搭配。具體顏色和疊加形式需要在具體頁面中進行調整）

體驗角度，以權威內容和探索多變為例：

體驗上，「權威內容」要求我們的操作形式是跟老師的教學相似，學習方法需要參考成熟且有效的方法；「探索多變」要求我們在交互形式上可以采用多種形式，給孩子探索未知的機會，交互形式要符合兒童操作習慣，如涂抹、翻轉、拖拉等

將兩者結合，我們得到的規則是：

• 中文字體跟寫，手寫涂抹交互形式，添加錯誤抖動反饋；
• 單詞記憶，參考如師通學習方法，采用卡片翻轉形式，將單詞和圖片內容分離；
• 英文跟讀，采用表情代替評分機制；
• ……

其他幾個關鍵詞的結合也是使用這樣的形式，這里就不一一展開。下圖是少兒詞典的視覺關鍵詞和產品關鍵詞結合后的樣式。

步驟 2. 選擇復雜的核心頁面，把具象化的體驗規則、視覺規則融進頁面中，確定設計風格

規則梳理出來后，我們就要挑選一些重要頁面進行風格嘗試，以結構復雜的中文查詞單字結果頁為例：

分析小學一年級到六年級的考試內容，我們了解到部首、筆順筆畫、跟寫、發音等漢字的基礎信息是低年級用戶（小學三年級及以下）會使用到，他們要求信息完整且準確；像詞組、造句這些信息則是針對高年級學生，要求快速準確定位到具體的內容板塊。

分析完內容結構后，我們就需要根據內容布局，加入表格中總結的體驗規則：

• 重復熟悉，針對低年級用戶的使用習慣，我們將頂部信息劃分為展示區域和操作區域，方便用戶操作，降低用戶學習成本；
• 重復熟悉，中文查詞結果頁中，使用田字格上下布局的形式，使用課本同款楷體字，滿足學生的識別文字書寫規范的需求，也符合用戶認知；
• 探索多變，在 tab 切換的時候，我們將 tab 選中的顏色變成軟件的 4 個主色循環切換，激發孩子對軟件的探索欲望；
• 探索多變，按鈕形式上采用出血的圖案形式，打破常規；
• ……

最后，梳理好頁面的體驗形式之后，我們開始給頁面添加視覺規則：

• 在推導中，我們選擇多彩的顏色模式，常見的小學課本是以橙色為主，因此，軟件也選擇橙色作為主色，并加入黃色、綠色和藍色作為輔助顏色；
• 圖標采用的是孩子熟悉的元素+輕質感這樣的組合；
• 結合繪本和孩子常見元素，使用兩個圓形疊加的形式，作為軟件的主要元素；
• 為了讓內容更符合孩子閱讀和使用習慣，使用大字號和大間距的形式，常用字號是 32px，最小字號是 28px；
• ……

對比產品原型和市面上的一些競品，我們可以發現，查詞軟件在內容布局上相差無幾。如果沒有找到符合我們產品業務目標，同時符合用戶認知的規則，我們將被淹沒在一群查詞軟件中。

步驟 3. 建立一個畫板，把用到的顏色、規則、字體、間距等內容羅列出來，并給他們限定使用范圍，方便自己查閱和團隊合作

最后一步，相信很多設計師都會在設計過程中建立一套方便好用的設計規范庫，這里就不展開來說了。

總結

最后，再對上文的所有內容進行概括。從 0 到 1 進行軟件設計我們需要用到下面這 7 步:

1. 多使用「為什么+動詞」的問法，向產品經理了解業務目標、用戶目標。
2. 從業務目標開始跟產品經理討論項目信息，直到獲得雙方達成一致的產品關鍵詞。
3. 分析不同用戶跟軟件之間的接觸點，從未來趨勢和用戶當前認知角度收集用戶資料。
4. 提取收集到的信息，并放入四象限中，總結出2～4個視覺關鍵詞、體驗關鍵詞。
5. 分別組合產品關鍵詞和視覺關鍵詞，產品關鍵詞和體驗關鍵詞，找到同時滿足 2 組關鍵詞的規則。
6. 選擇復雜的核心頁面，把具體化的體驗規則、視覺規則融進頁面中，確定設計風格。
7. 建立一個畫板，把用到的顏色、規則、字體、間距等內容羅列出來，并給他們限定使用范圍，方便自己查閱和團隊合作。

完成這 7 步，將可以讓你從 0 ～ 1 設計一款產品經理一稿過，設計風格明確，用戶粘性高的軟件。

文章來源：優設    作者：ukeyliang

用戶體驗地圖（Customer Journey Map）是什么？

用戶體驗地圖是從用戶的視角出發，去理解用戶、產品或者服務交互的一個重要的設計工具。

也可以說是以可視化的形式，來表現一個用戶使用產品或者接受服務的體驗情況，從體驗的過程中來發現用戶在整個體驗過程中的問題點與情緒點，以此來從中提取出產品的優化點，方便對產品進行迭代，從而保證良好的用戶體驗。

經典案例

Chris Risdon繪制的歐洲鐵路購票的體驗地圖

上圖中是歐洲鐵路公司整個體驗地圖的一部分。歐洲鐵路公司是一家美國經銷商，為北美旅客提供一個獨立預訂火車票去歐洲各地的平臺，而無需用戶去網站預定。他們已經擁有了一個良好體驗的網站和一個屢獲殊榮的咨詢中心，但他們希望通過所有接觸點來優化用戶使用過程，這樣可以讓他們更全面地了解，他們應該專注的投資，設計和技術資源。整體的“診斷”評價系統，包含一系列的重點舉措，體驗地圖只是其中派生的一部分。體驗地圖幫助建立同理心圖，來理解隨著時間和空間的推移，用戶與歐洲鐵路公司服務系統交互時接觸點的變化。

在這張體驗地圖中采用了五個關鍵組成一個體驗地圖，一個體驗地圖可以直觀的表示用戶操作流、期望、特定的目標、用戶情緒狀態和整體的體驗點，做到整體把控和評估產品體驗。

作用 ：

用戶體驗地圖能幫助我們創造出一個有大局觀的用戶體驗，更好的幫助我們理解用戶的痛點和需求，幫助Team達成共識，非常有利于跨團隊合作。

用戶體驗地圖包含的內容 ：

其中包括，人群（產品的用戶是哪一類人）、 用戶的需求（用戶想得到什么）、 路徑（在某特定的場景下體驗的整體過程） 、接觸點  （產品與人或人與服務接觸的關鍵點）、行為（用戶的行為是什么樣的？）、情緒  （體驗過程中的感受心情） 、機會點  （過程中可以突破的點，可以成為特色的地方）、 解決方案  （解決用戶在體驗過程的痛點）、 問題  （解決用戶在體驗過程的痛點）。

用戶畫像 ：

在準備開始繪制用戶體驗地圖的時候，我們應該要確立用戶群體 / 確定產品目標 / 了解用戶目標，并作出用戶畫像。

視覺設計師怎么使用

舉例（一）：

那我們看看作為一名視覺設計師應該關注哪部分的流程。

視覺設計師的用戶體驗地圖 ：

我們的聚焦點應在上圖的這幾個部分。

所以當繪制完用戶體驗地圖后，應該再繪制一份視覺設計師看的版本，我們設計師主要關注的視覺的觸點。

定量方法（產品方向）：

我們在行為和情緒上一般會使用問卷法、后臺數據分析法；而在需求和問題上一般會使用焦點小組、訪談法、觀察法、日志法和田野調查，下面就為大家來解釋下這些方法。

焦點小組：是指從研究產品中所確定的全部用戶群(總體)中抽取一定數量的用戶來組成樣本,根據樣本信息推斷用戶群總體特征的一種調查方法。

訪談法：訪談，就是以口頭形式向用戶進行詢問，根據被詢用戶的答復搜集客觀的、不帶偏見的事實信息，以準確地說明樣本所要代表的總體的一種方式。

觀察法：觀察法是指研究者根據一定的研究目的、研究提綱或觀察表，用自己的感官和輔助工具去直接觀察用戶，從而獲得資料的一種方法。

日志法：是由用研人員按時間順序，詳細記錄自己在一段時間內使用產品的過程，經過歸納、分析，達到分析產品目的的一種工作分析方法。

田野調查：在日常生活中，在一個有一個嚴格定義的空間和時間的范圍內，體驗特定用戶群的日常生活與思想境界，通過記錄自己的生活的方方面面，來展示不同階段用戶群的基本需求。

注意事項（5要點）

1. 在制作地圖前，應理清楚產品的前期規劃和需求，并且與同事達成共識。

2. 避免以自己的經驗或者認知來確定用戶體驗地圖中的接觸點，應當真正的從用戶的行為中去提取。

3. 不要將一些落后的信息加入到用戶體驗地圖中。

4. 最好先在Team內部腦暴一份地圖，再去與所制作的地圖進行對比。

5. 用戶體驗地圖不會涉及到實現方案和現實機制，只涉及用戶的體驗。

團隊人員的合理搭配 ：

將公司或者團隊的PM、RD、運營、Leader等過來，詳細的描述這一份用戶體驗地圖，聆聽他們的反饋。

在分析用戶問題上 ：

分為四個等級：ABCD，在對優先級進行排列的同時應該，考慮到產品在每個階段的側重點，根據不同的進度和情況，來對優先級進行排列，幫助我們整理問題和提煉最核心的一些體驗問題，區分問題還能幫助我們更好的把握產品的優化方向。

視覺設計師應該關注的點 ：

視覺設計師的任務是什么？是有效的傳達出產品的信息、簡潔并且優雅的傳達、通過視覺設計制造出愉悅的用戶體驗。用戶在很多的場景下都可能接觸到企業的產品或者是服務，這個服務接觸帶給用戶的感受更多是偏向于視覺感知方面的。所以我們需要盡可能的列舉出企業的產品或者服務與用戶可能產生接觸的場景、服務觸點，再根據服務觸點延伸出相關的“視覺觸點”，用來梳理出我們需要輸出的視覺產物，做出相對應的查漏補缺和優化，輸出指導企業的品牌建設工作。而用戶體驗地圖就很適合作為這樣的工具。

“體驗地圖”對于優化視覺體驗的意義 ：

整體性：系統性地規劃品牌的視覺統一化工作，提升品牌建設工作的全面性和完整度。也可以避免未來工作中不同的品牌 / UI / 運營設計師對于品牌概念的理解不同而帶來的設計出入。

品牌設計，是用戶對于公司產品的直接印象，所以在品牌設計的要求就是：建立特征、保持特征、推廣特征、美化特征、對于以上的要求，來提供完整且匹配的設計方案。

運營設計，運營設計的目標就是讓用戶盡可能的感知到產品的好，把產品的特點通過設計包裝傳遞給用戶，一個好的運營設計，應該是在用戶看到你的設計作品后，會產生足夠好的興趣和好感，并愿意去關注你的產品。

UI設計，這是產品與用戶接觸過程中，頻率最高、最直觀的部分，目的是為了讓用戶認識到產品的相貌和氣質，UI設計需要注意界面視覺層次的強弱、信息劃分、用戶的視線軌跡、色彩的表達、質感、舒適度等，來讓用戶覺得這個產品設計真好。

例如 ：

OFO，以年輕人為主的共享騎行產品，無論是在品牌/運營/UI的設計上，都能讓人感覺時尚、年輕、陽光、且有親和力。

品牌設計 :

UI設計 :

運營設計 ：

UI設計 ：

運營設計 ：

設計師的進階 ：

在一開始的初級設計師階段（也就是1.0階段），我們需要從交互設計師手中接過交互設計稿，來對它進行氣質進行改造，做出獨特的視覺設計，也就是將其翻譯為高保真稿，然后再與開發同學進行對接，也要保持視覺走查，以防實際效果與預期效果的不符；在這個1.0階段我們的表現力和創造力，是最為主要的，如何去做出差異化？這是這個階段的設計師需要考慮的，在這個APP設計趨同的大浪潮下，你如果能夠做出不一樣的設計，那么你則可以一鳴驚人，從眾多水平相當的設計師中脫穎而出，這時你便可以考慮進入下一個階段，也就是2.0。

在高級設計階段（即2.0階段），這時候你就需要擁有更好的產品思維和邏輯能力，不僅僅只是從交互設計師拿到交互設計稿，直接上手開做，在這之前，你需要開始了解產品的業務定位、用戶人群、產品目標、當前的問題、未來的迭代等，需求方這時候就成你的主要對接對象，需要你具備拆解需求、采集用戶的需求、擴展業務、能進行設計驗證的能力，能將產品的氣質和品牌貫穿于整個產品(UI/運營/品牌)，設計是怎么推導的，現在就不是僅僅只在停留在好看的層面上了，畢竟設計師不是畫師，而是解決問題的，我們在做了某個設計后，就要去關注它的變化了，看看用戶的反饋、商業轉化率等等，這都是為你的下一次設計迭代做的參考。

從

分享到脈脈

轉自：脈脈

原文鏈接：https://maimai.cn/article/detail?fid=988630001&efid=N-uHKNnf7vXGBmaFd3lZHA&use_rn=1

在頁面導航欄中，常會見到返回、取消與關閉三者按鈕。許多同學會弄混它們的使用邏輯，所以寫一篇小文幫助各位梳理下。

返回和關閉

先拋開圖標，我們回到功能本身的含義上看。如果我們不在產品的語境里，就單看「返回」和「關閉」這兩個詞，你首先會想到什么呢？

當我這么去問自己的時候，腦子里出現的并不只是零碎的詞語，而是一些場景和畫面。比如我走錯路了，需要原路返回；公司復工了，我要返程回去。或者，睡覺時間到了，我該關閉電腦了；飯菜燒好了，我得把油煙機關掉，等等。

如果仔細去想的話就會意識到，語義衍生出來的，都是我們日常生活中的經驗和對世界的認知。產品中使用的各種語言，不管是文字也好，或者圖標圖形也罷，一直都是以我們對它最本能的理解為基礎的。所以只要你聯想自己對「返回」和「關閉」的看法，就能知道它應該在什么樣的產品情境中出現，以及它為什么會出現。

于是，很自然的，我們會把「返回」和「路徑」聯系在一起，所以「返回」在導航設計中不可或缺。并且「返」也預示著我們會回到之前的路徑節點，整個過程是連續性的，不被切斷的。而「關閉」就完全不一樣了，它一般和我們的動作有關，是一個短暫性的操作，相比返回也顯得更為獨立。

根據我們對語義的判斷，再結合實際產品中「返回」的場景，我們可以概括出「返回」和「關閉」的特征差異。

1. 返回

連續性：按照產品的頁面層級順次跳轉。但存在特殊情況，因為有些產品定義的功能出入口是不一致的，在信息架構層級已經做了一定的優化，所以返回不一定會按原來的路徑回去，可能會按產品既定的路徑。比如網易云音樂歌曲播放頁進入直播后返回不是到播放頁。

整體性：在產品功能頁面關聯性較強的功能中，「返回」需要連接各個頁面與層級之間的架構關系，因此「返回」作為操作節點，可以幫助產品功能的各個頁面之間建立聯系，維持產品的整體性。

2. 關閉

非連續性：用于產品中的臨時內容或臨時動作，比如彈窗或活動頁，與上一級頁面沒有直接關系。

獨立性：非產品原生內容或是產品內的獨立內容。比如小程序、瀏覽器標簽等。

3. 返回和關閉的使用場景

知道了返回和關閉的特征后，我們可以從兩者的使用角度上再去梳理一下。

現在產品中關于返回和關閉有三種狀態：

1. 只有返回
2. 只有關閉
3. 返回和關閉同時存在

1 和 2 的情況很好理解，我們只要根據前面各自的特征去看就能夠理清場景。

3 的情況會有特殊性，因為它同時具有返回和關閉這兩種看起來相矛盾的特性。其實這是由內容決定的，當內容同時具有獨立性和整體性時，就需要支持兩種操作。如小程序可以作為一個獨立功能，但其本身又可以看作是一個完整的小產品，具有自己的頁面結構和頁面層級。所以小程序對于它所屬的產品，我們有關閉的需要，小程序內的頁面導航又需要返回來實現。

除此之外，產品可能開始只有返回，后面臨時出現關閉按鈕，比如微博「疫情地圖」中使用「小區疫情查詢」和「7×24 小時疫情快訊」后會出現關閉功能（幫助用戶快速退出）。

這里我們可以從連續性和非連續性的角度看，產品針對具有復雜層級和內容的頁面設計了順次（返回）和跳頁（關閉）的導航方式，其中關閉隨實際情境出現。以此為用戶提供了更為靈活的導航路徑，來同時滿足用戶逐級深入、連續返回瀏覽和選擇性查看、臨時關閉的需求。

取消和關閉

針對于「關閉」，它和「取消」會有重疊的含義，所以有時并不能很好地去區分這兩個功能表達的應用場景。于是，我們可以借用之前的方式，先把「取消」單獨拿出來理解。

一般來說，「取消」意味著行為過程中，還有后續行為，整個過程沒有完成，當下后悔了，因此取消了當前操作。它更傾向于表達我們主動去做了什么改變，然后中途放棄了。

比如，想煮個飯，于是下了米，倒了水，定時，確認（取消），完成（關閉）。

這時候中間如果突然不想煮飯了，在定時之后，就停止當前行為，那就是取消。但點了確認并完成煮飯之后，這個行為就結束了，只能關閉。因此，它們之間就是行為上的差異。

就好比，打開微信公眾號文章，內容已經加載出來，行為已經產生并結束，這時候左上角就一定是關閉。而發朋友圈的時候，左上角是取消，那是因為行為過程還在繼續，沒有發布，所以可以取消。而發布之后，就無法取消，想要關閉，也就只能刪除這條朋友圈了。

所以在操作行為中的頁面，左上角最好是使用「取消」。

當我們對詞的含義有了進一步思考后，就可以去看它們在產品中的表現了。

比如廣告的關閉、推薦內容的關閉。都是產品自身提供的內容，用戶不想看到就選擇關掉了，沒有試圖去改變什么。

包括內容頁面，或者活動頁面，被點開，且加載完成呈現出來之后，這個行為就結束了，沒有取消的概念，只有關閉。

再比如，選擇圖片文件時的取消，微信發朋友圈、微博發帖時的取消等等，我們能發現都是用戶主動采取了什么措施，但是又后悔了所以選擇取消。

或者如游戲設置，就不適合用關閉，會讓用戶在理解上產在歧義，比如用戶設置到一半，不想設置了，那現在關閉的話，設置是生效了么？所以用取消會更合適。

這些時候，不存在關閉的概念，因為沒有內容可以關閉，只能是取消當前行為。如果使用關閉，與該場景下的用戶行為不符，反而增加了用戶對文案的理解成本。

簡單來說，取消強調的是放棄改變，關閉強調的就只是抉擇。

不過這里也有一個特殊例子，就是，微信公眾號文章轉發給好友，左上角是關閉，而釘釘里面內容轉發給朋友，就是取消。為什么呢？

在一些特殊場景之下，「關閉」是包含「取消」的。

好比剛才煮飯的例子，現在的電飯煲很高級，如果在過程中不想繼續了，拔掉電源就是完全關閉了，但同時這個行為也包含了人不想繼續煮飯這個行為，想取消掉了，所以這時候關閉是包含取消的。它跟文章加載完成，已經呈現出來，是不一樣的。

而上面這個微信與釘釘的例子，就存在這種包含關系。比如，內容已經加載完，要分享給好友，這時候加載出來的好友列表已經出現，只是選擇發送給誰的問題，用戶可以關閉已經加載完成的好友列表頁面，或者理解為用戶打算取消當前行為。

不過這樣的設計并不建議大家將其定義為關閉，因為畢竟行為還在繼續，使用取消反而更容易理解也更符合場景定義。

譬如，PC 的彈窗經常會同時出現叉（指代關閉）和取消，雖然操作的結果都是使彈窗消失，但是用戶的操作目標是不一樣的，事實上這里提供了兩種選擇，即我不想做決定，我要關掉彈窗，以及我決定現在不這么做，我要取消這個動作，這里的關閉其實就暗含了取消的動作。

在 PC 端，我們有足夠的空間為用戶提供不同的選擇，給予用戶充分的自主控制權，以滿足他們對功能的不同期待。而在移動端，我們需要刪減或合并功能，所以當用戶同時產生重疊的訴求時，我們往往會選擇當下最符合用戶心境的功能，這是「場景細化」的結果。這也能解釋為什么現在很多 PC 產品的彈窗中也只會保留取消，而不提供叉（指代關閉）的選擇。因為用戶面對功能不知所措、不做決定的情況已經越來越少，更多的用戶已經明確地知道自己應該怎么做。

這就是「取消」和「關閉」的差異，以及移動產品對兩者的取舍的根本原因。

同樣的，有一些頁面，取消和關閉都會用叉的圖標來表示，只是在不同情境中，這個叉同樣可以理解為取消，關閉，以及取消或關閉。差異點跟上述內容相同。

結語

返回、取消和關閉看起來簡單，深入分析后又顯得復雜，但相對復雜的分析都只是為了能簡單地去運用。在這個問題中，每個人都可以從自己日常的經驗出發，然后在產品不同的語境里去體會一個詞語、一個圖標背后隱藏著我們什么樣的認知和使用的習慣。

那由這個問題延伸的，其實還有產品的導航方式，頁面出入口的設計差異，產品中整體與獨立，連續與非連續的內容結構，原生與非原生頁面的差異等等。

小問題同樣可以見大，但我們也不需要過度思考，本來問題的解讀角度就是因人而異的，也無法面面俱到，上面的只是我的理解方式。設計還是需要回歸到用戶和產品的目標，再去結合場景和產品業務的使用模式才能得出合理有價值的方案。

文章來源：優設    作者：呆呆U理

菲茲定律在交互設計中的應用是很普遍和廣泛的，有時候在我們設計界面之時，不知不覺就應用了菲茲定律，但是我們卻未察覺。

關于菲茲定律的具體內容，可以說是大家耳熟能詳，甚至在學生時代就有所了解：從一個起始位置移動到最終目標點所需的時間由兩個參數來決定，到目標的距離（D）和目標的大?。╓），可以用數學公式表達為：

在當今互聯網背景下簡單來解釋說，就是大而近的目標區域意味著用戶用需要耗費太大的精力即可輕易點擊或者關注到目標，反之，小而遠的目標區域則意味著用戶將耗費一些時間和動作才能觸及到目標。在一般情況下，讓用戶耗費時間和動作的操作，會使人產生負面的用戶體驗。

以上說的，其實是對菲茲定律表象的解釋，每個人在網上也會搜到很多類似的解釋。當你搜索時會發現，關于對菲茲定律的應用，網上絕大多數的資料都是在以PC端界面作為定律的解釋，但移動界面卻少之又少，這里面的一部分原因是菲茲定律提出的時間，一部分也是因為在移動端的設計中，菲茲定律會變得很零散和瑣碎，很難真正用幾句話來總結，這篇文章也是我第一次試著在移動端的交互設計的范疇內對菲茲定律的應用進行簡單的總結。

1. 讓按鈕更大一些

我在這一部分分了幾種情況，分別進行討論，其一呢，就是fab button。在現有的fab button中，大家會發現，雖然按照正常iOS的設計規范，一般按鈕的大小都會被設計為88px，但是在設計fab button時，我們一般都會選擇大一些的尺寸，例如100px、110px、120px。

其二就是頁面內功能按鈕的大小，我們在做界面設計的時候，都知道做到統一性，但很少去深入地想，界面統一的背后是在像用戶傳達一個什么意思。

舉個例子，這是【洋蔥數學】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號+密碼+按鈕（或手機號+按鈕等）的組合。

那我們來思考一個問題：為什么在手機號只有11位已經確定的情況下，輸入框和【下一步】按鈕還要做這么長，接近通欄的一個樣式。

我試著來找到這個問題的答案，第一個，是對于品牌設計規范的執行，對邊距是有一定要求的，也就是我們常說的保持頁面元素的統一性；第二個，即是對菲茲定律的應用，在這個頁面中，最核心的兩個功能【輸入】和【下一步】給予他們一個足夠的大小，會讓用戶的注意力更加集中，避免被分散精力。

2. 讓相關聯的信息內容距離更近

這也和設計原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來加以印證。這兩個界面是我隨手做的，對比一下即可看出優劣。

在相關性比較強的功能中，拉近彼此距離，既能夠給信息一個清晰的層級，更能夠減少用戶的操作成本。

3. 界面的邊界會讓用戶操作更加精準和容易

在研究交互界面的時候，我們總聽到一個說法，“界面的邊界是無限的”，它當然不是在說界面是無限大的，對于一塊屏幕來說，在進行操作的時候，無論是PC的鼠標光標，還是移動屏幕的手指，在操作到界面邊緣時，因為無法延伸，所以最精準。

這也是我們看絕大多數fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。

除此之外，還有在很多安卓手機中，卸載app時會讓用戶把要卸載的app拖拽到屏幕上邊緣的區域進行卸載，這樣相比給一個【X】按鈕，會更加精準，而且拖拽的操作也會給用戶更多思考的空間和時間，減少誤操作的概率。

但是，這個但是很重要，不要把所有既定的法則都奉為圭臬，所有事物都要辯證著看，在沒有限定條件的情況下，菲茲定律的應用不會有任何問題，但是如果加以條件的限定，就不是這么簡單了。

簡單舉個例子：在進行刪除等負向操作時，很多app會把確認刪除等操作做得離你的上一步操作區域更遠，或者讓確認按鈕更加不明顯，這是在幫助用戶，或者說希望用戶在做負向操作時，有更多的思考空間和時間，規避誤操作的影響。

在《看懂設計》這個系列里，我會選擇性地對在交互設計中常常被應用的設計心理學、方法論等進行簡潔有案例的解析，例如大家耳熟能詳的交互設計7大定律、斯金納箱理論、邊際效應、錨定效應、格式塔理論等等讓大家盡可能地在實際案例中找到它們的應用，而不是讓這些方法論成為我們腦海中的空中樓閣，知道、聽說過，但是不會應用。

轉自：站酷-鹿爺不是咸魚 

當我們回顧近20年的手機發展歷程，可以發現2007年iPhone的橫空出世真正改變了手機這個行業。喬布斯在發布會上展示初代iPhone給行業帶來的沖擊力是前所未有的，對人機交互領域也帶來了了深遠的影響。

信息限制

操作與反饋

總結

任何一個新事物的出現，人們總是傾向于從現有的知識體系中尋找類似的事物進行描述與概括，以尋求情感上的歸屬和理性上的辨識。但是過于超前的創新，往往是現有的知識體系無法解釋的。無法解釋，自然無法接受。

文章來源：站酷

在我們設計UI有所疑惑時，可以參照以下標準做法。

這些做法并非一成不變—我只是列舉出這些方法，相信它們可以對你的日常UI設計工作有所幫助。

我們需要記住一點，設計其實就是跳出框框思考，這意味著，有些時候我們要打破陳規。所以，對我的建議也不要全盤接受。

1. 設計時使用密度像素（dp），而非像素（pixel）

圖中的像素值是密度像素值的三四倍

密度像素是屏幕上每一英寸所包含的像素個數，簡稱PPI（Pixels Per Inch）。dp（density-independent pixel）是密度獨立像素，也寫作dip（也有device-independent pixel之說，設備獨立像素）。

設計界面時，建議大家基于設備的密度像素，而不是像素。這樣可以保證我們設計出的圖標素材比例適當，適應不同尺寸的設備。

舉個例子，假如我們以密度獨立像素dp為單位，設計了一個 200 x 50的按鍵，那么這個按鍵在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸則為400 x 100像素，即原尺寸的兩倍。

因為有些屏幕的單位英寸的像素數量要比其他屏幕多，即ppi分辨率大，為了保證設計的圖標在不同分辨率的屏幕上都一樣大，設計師通常只是設計一個尺寸，導出2x、3x、4x的尺寸。

iPhone XS Max的屏幕尺寸是414 x 896。但這里的單位并不是像素，而是點的個數。論像素，則是1242 x 2688 px。知道了這些，給iPhone XS Max做設計時，我會以414 x 896個點為尺寸做設計，而后導出3x的圖標素材。

2. 間距使用8的倍數（8dp）

為什么UI設計的間距都是8的倍數而不是5的倍數呢？這里有一個簡單的解釋—如果一個設備是1.5x的分辨率，我們就沒法導出一個奇數。

另外，現代主流的屏幕尺寸都是以8為單位，以8的倍數做設計可以很好地適應這些屏幕。

以8的倍數設計可以保證設計的一致性。基于這種慣例，大家在進行設計工作時不用再猜測間距的數值，每個圖標都可以完美地與其他圖標對齊。

有關這個話題的更全面探討，請參考Bryn Jackson的文章《八像素網格設計》。

3. 刪減元素容器的線框

我們在設計的過程中應該時常將自己抽離出來，審視界面中這些作為元素“容器”的線和框是否讓界面顯得過于雜亂，是否應該予以保留。通常這些用以區隔界面內容的線和框可以被邊界留白代替。

我們設計的大部分元素都存在于線框里，簡單清除掉這些“容器”可以讓界面看起來不那么擁擠—給元素更多呼吸的空間。

4. 無障礙設計—重視對比度

善用對比度不僅僅是為了讓用戶的注意力集中于重要的信息，更是為了使產品更容易訪問/使用。

設計產品就好比建設像圖書館、學校一類的公共場所，它的適用對象需要涵蓋每一個人，包括失明、色盲和視障用戶。

Web內容無障礙指南（WCAG）要求文本或文本圖像的對比度至少為4.5：1。

為了保證設計達到該標準，我們可以下載Stark這款插件來檢查設計是否是無障礙的。

5. 基于用戶習慣，設計用戶體驗

為什么有些圖標元素會被公認為標準？原因有多種。

假如你把一個按鈕設計成圓形，那么當我們需要一個（字數較多的）“Start Free Trial”按鈕時，它就會不必要地占用界面中豎直方向上的空間。

另外，用戶期待的是與其他產品相似的體驗。如果你設計的網站、APP或軟件與用戶的既有習慣相悖，那么這樣的體驗是不直觀的，用戶很可能會因此受挫。

故而，在我們發揮創造力的時候，最好以現有的設計規范為基準和前提。不要重新設計輪子。

6. 善用顏色重量（color weight），建立視覺層次

每一種顏色都有自己的視覺重量，我們可以通過借助顏色的視覺重量來建立內容的視覺層次，用顏色的深淺來呈現內容的重要性的層級。

善用顏色視覺重量的秘訣是，一個更為重要的元素，應該有更重的視覺顏色，以便用戶快速瀏覽網頁，區分重要和不重要的信息。

大字號、粗體的信息會首先被用戶注意到，而后他們會關注其下的輔助性信息。

7. 避免使用超過兩種字體

通常，設計界面會控制使用的字體數目，兩種不同的字體就應足夠—這不是說你不能使用更多字體，只是你需要充分的理由。通常來講，僅用兩種字體會更好。

設計界面時要善用字體家族。

使用字體家族意味著我們可以使用同一字體的不同變體。字體家族的存在就是為了字體的不同變體可以更和諧地被放在一起，讓設計在保持多變性的同時兼顧一致性。

選擇字體時，盡量選擇那些有多種重量（如標準、適中、粗體、特粗）和樣式的（如長體、寬體、斜體）的字體家族（譯者注：作者此處所述選字體經驗的適用對象主要為英文字體。）。這樣既會給設計留出可探索的空間，也不會增加額外的字體種類。

8. 讓用戶認知，而非記住

讓用戶去認知產品是產品設計中所推崇的，因為，我們為什么要讓用戶在使用的過程中去思考呢？

結賬頁面、電子郵箱、搜索歷史、返回按鈕等都是很好的建立了用戶認知的例子。

在好的設計中，結賬頁面是不需要讓用戶記住他們所要購買的物品的。用戶應該可以清楚地從界面中確認他要購買的物品，而非通過回憶來想起。

在Gmail郵箱中，我瞟一眼就可以知道哪些是已讀郵件，哪些是未讀郵件，這個過程不需要過腦子。同理，我登錄到自己的亞馬遜賬戶后，可以迅速地從上次購物時中斷的地方繼續開始購物—因為它顯示了我最近瀏覽過的物品。

設計時，應讓元素、功能、選項明顯可見，最小化用戶的記憶負荷。用戶無需自己在操作的步驟中記住信息。系統的操作說明應該在需要時很容易看到或查到。

—Nielson Norman Group（尼爾森諾曼集團，人機交互和用戶體驗咨詢公司，唐·諾曼是創始人之一）

9. 切忌拖慢用戶體驗  

作為用戶，速度和效率是最重要的。用戶使用一個應用程序，是為了解決某個特定的問題。

我要速度。
— Ricky Bobby（電影《塔拉迪加之夜：瑞奇鮑比的民謠》主角、賽車手）

如果將一張支票通過手機存入銀行賬戶這個體驗是非常讓人享受的，那固然很好，但作為設計師，千萬不要讓你的創造力阻礙用戶實現他們的目標。

關于動畫和微交互的一條經驗就是，如果某個體驗只是無謂地增加了時間，那么這不是在改善用戶體驗。

如果加入的動畫帶有目的性，則可以改善用戶體驗；但是如果增加的只是不必要的分散注意力的元素或用戶操作，那么用戶體驗不會變得更好。

Dribble上有很多著陸頁的設計—當用戶向下滾動鼠標時，動畫隨之展開。通常，這些設計展現出過火的動畫效果，每個元素都在淡入淡出，動來動去，而幾乎不關注體驗本身。當太多事情同時在界面上發生時，用戶很難知道到底哪些信息是應該關注的，這等同于浪費用戶寶貴的時間。

這位Dribble用戶，非常抱歉把你揪了出來:/

無數研究表明，界面中動畫的最佳時間在200到500毫秒之間，這個數字是由大腦的特征決定的。任何短于100毫秒的動畫都是一晃而過，人眼根本無法識別；而超過一秒的動畫會帶給人無聊和延遲的感覺。
—《UX微動畫設計指南》

所以，如果你要在界面中使用動畫，那么給它一個明確的目的，并且不要讓用戶等待超過500毫秒。在2019年的今天，惹惱你的用戶只需要1毫秒。

10. 大道至簡

每次我們想要增加額外的信息到界面中時，例如按鈕、文字、照片、動畫、插圖等等，它們就會跟相關的信息進行競爭。如果一頁上有太多東西，那么某些元素的重要程度就會被削減。

谷歌搜索首頁就是典范。這個設計將全部的注意力放在了搜索這個主要功能上，沒有把用戶淹沒在不必要的信息海洋里。

對不起了雅虎，在這必須把你當做不好的案例展示

最后，分享給大家一句我最愛的設計箴言：

臻于完美之時，不是加無可加，而是減無可減。

文章來源：UXRen

作者通過從會員體系構成的4個核心要素對“京東、亞朵、支付寶、騰訊理財通”的會員體系進行拆解，發現不同類產品中的設計會員體系需要注意的問題。

一款產品要想持續獲取用戶價值，前端增長和后端活躍、留存與轉化缺一不可。隨著流量越來越貴拉新成本越來越高，多數互聯網公司開始將用戶活躍與留存視為產品核心指標，而會員體系一直以來都是最有效的活躍留存與轉化的運營手段之一。

本文對比4款目前付費類產品中比較典型的“京東、亞朵、支付寶、騰訊理財通”的等級會員體系，分別代表4種不同的等級會員體系類型。從會員體系構成的4個核心元素：命名、層數、成長值計算、會員權益，來快速了解一款產品的會員體系。

希望通過這篇文章給在做會員體系抓耳撓腮的你一點啟發。

一、會員命名和層數

會員命名是品牌文化、用戶群體特征的體現，而會員層數的多少則反映了產品轉化路徑的長短。

1. 四個產品的會員命名和層數概況

京東會員分為非付費會員（下稱等級會員）和付費會員兩個體系。為了凸顯付費會員，2019.9.15日起，取消了等級會員原有的銅銀金鉆制會員體系，以京享值代替。

至此，從會員命名的角度，京東的會員只有付費會員和等級會員兩種名稱，等級會員會員之間以京享值的大小進行區分，共分為5層。

亞朵會員在命名方面充分體現了“舒心微笑”的品牌特征，等級會員共分為5級，分別為注冊會員（初遇）、銀會員（識君）、金會員（知己）、鉑金會員（執手）、黑金會員（逍遙）。括號內的短稱分別來對應著兩句詩詞，詳見官網的會員介紹。

支付寶等級會員共分為4級，分別為大眾會員、黃金會員、鉑金會員、鉆石會員。從級別數量來說，支付寶會員級別相比于前者少了1級，會員升級的難度也加大了。

騰訊理財通等級會員共分為4級，分別為普通會員、白銀會員、黃金會員與鉑金會員。顏色區分上，級別從低到高顏色分別為藍灰色、銀灰、金色、黑色，通過灰色調營造理財產品的嚴肅和專業感。

【注：等級會員是指，會員級別不能直接購買得到，而是要通過完成產品任務升級達到。付費會員是指，用戶通過付費購買產品會員特權，購買的會員獨立于非付費會員，不是非付費會員的某一級】

2. 會員命名和層數分析

通常會員命名會以金屬作為主線，其中金、銀、鉆石等最為常見。

這是用戶已經熟知的命名方式，遵循以上規則有助于用戶更快的接受會員身份。但如果產品有特殊的品牌文化和目標用戶，可以考慮在命名上加入品牌元素，如亞朵。

付費會員與等級會員之間具有重疊性。

高階的等級會員分散了用戶對付費會員的注意力，因此京東最終不得不對等級會員體系采取“除名”做法。

付費會員必然會導致原等級會員體系影響力的削弱，在初始設計時需要綜合考慮付費會員和等級會員體系在維系用戶、營銷行為等方面的價值，做好取舍。

此外，還可以參考亞朵酒店的做法，將等級會員的某一級作為付費對象來售賣，如下圖，亞朵酒店將會員體系中的第三級【金會員】單獨售賣。

不同產品的會員層數不同。

電商等付費類產品會員普遍采用4-5級的分層、資訊類產品的會員體系可多達10級，如趣頭條等；社交、游戲類產品更是根據玩法的不同，設置幾十級的會員等級。

會員定級層數主要取決于產品的轉化路徑長短：

付費類產品轉化路徑短，用戶使用產品就一定會付費，因此只需要根據用戶實際消費能力進行用戶分層，4-5層即可覆蓋用戶的全部消費能力。

但社交類產品轉化路徑長，需要用戶長期活躍在產品內才有機會轉化付費用戶，會員級別需要足夠多，才能保證用戶有動力持續的活躍和留存。

此外，從成本的角度考慮，付費類產品的會員權益通常為商家的折扣和返利，會員級別越高企業付出成本越高，

級別過多會導致企業難以承擔成本，而社交、游戲類產品的會員權益通常為虛擬的勛章、身份象征等，即使會員級別高達幾十級，也不會產生過多的成本。

下圖是趣頭條10級會員的權益，可以看到權益大多數為榮譽勛章類虛擬獎勵，企業幾乎不需要付出成本。

二、成長值計算

成長值是用于衡量會員級別的刻度，用戶通過獲取成長值來達到升級、保級的目的。成長值的獲取方式體現了產品主要的運營動作，而計算公式也根據業務變動速度和產品特點有所不同。

1. 京東會員的成長值計算涵蓋的要素

• 計算周期：30天；
• 涵蓋產品：京東商城和京東金融
• 行為：消費、活躍、信譽等方面，詳見下圖，已將需要消費的行為進行了特殊標記；
• 計算方式：黑盒，并未對外展示成長值計算的詳細公式。

分析如下：

京東的主要運營動作包括以下幾方面：提高用戶消費，促進用戶活躍、收集用戶信息、建立信用評分體系等。

京東成長值的具體計算公式并未明確給出，因此可以推斷其業務調整快，變動幅度大。不公布具體計算公式可以靈活的調整成長值計算公式，但也犧牲了用戶的確定性體驗。

2. 亞朵會員的成長值計算涵蓋的要素

• 計算周期：最近12個月；
• 涵蓋產品：亞朵；
• 預訂渠道：亞朵APP、微信小程序、客服熱線、企業號等渠道預定；
• 行為：消費、任務（完善信息、完成訂單）；
• 計算方式：白盒，成長值包括支付金額、入住間夜、完成任務三個部分，計算公式明確。

分析如下：

亞朵對用戶的主要運營方向為消費和互動，運營動作主要是圍繞著訂房和相關服務展開。

成長值計算兼容地區差異：酒店業務通常分布在多個城市，每個城市的消費水平差異很大。若僅僅以消費金額來衡量會員級別，會導致大多數的高級會員都集中在高消費城市，無法實現對二三線城市的用戶激勵。因此，酒店行業會員的成長值通常結合間夜和消費金額綜合計算。

酒店預定更加依賴于用戶渠道，包括OTA（美團/攜程等平臺）、自營渠道、分銷商等。不同的渠道企業付出的成本不同，會員體系通常只給自營渠道的用戶計算成長值。如亞朵。

3. 支付寶會員的成長值計算涵蓋以下幾個要素：

• 時間：最近12個月；
• 產品：支付寶；
• 行為：消費購物、生活繳費、金融理財；
• 計算方式：白盒，所有行為可獲得的成長值均明確規定，詳見下圖梳理。

分析如下：

支付寶主要的運營動作包括促進用戶消費購物、完成生活繳費和增加金融理財。生活繳費任務的成長值獎勵較高，可以推測占據用戶生活支付場景是主要運營方向

支付寶的成長值計算公式為白盒，這與理財類產品性質相關，由于涉及到用戶的金錢投入，更需要獲取用戶的信任，明確的計算方式能夠帶給用戶確定感。

4. 騰訊理財通會員的成長值計算涵蓋以下幾個要素：

• 時間：最近30天；
• 產品：理財通平臺
• 行為：購買理財、會員任務（完善個人信息和達成理財目標）
• 計算方式：白盒，詳見下圖拆解。

分析如下：

騰訊理財通的主要運營動作包括促進用戶購買理財、激勵用戶完善個人信息。騰訊理財通的會員任務多達27個，收集用戶信息的任務占到1/3，可見完善用戶畫像為產品的主要戰略。

理財通會員成長值的計算公式同樣為白盒，清晰的展示用戶完成任務能獲得的成長值。

三、會員權益

• 從用戶角度來說，會員權益是用戶持續在產品內活躍和留存的動力，好的會員體系應當有突出的核心權益，且核心權益能夠滿足用戶使用產品的核心訴求。
• 從企業角度來說，會員體系權益應當形成一個好的業務閉環，權益能夠促進用戶的再次消費，盡可能的挖掘用戶的剩余價值。

1. 京東會員權益構成

• 從核心權益角度看：京東的會員以售后服務為核心特權，會員的級別越高，享受的售后服務越全面。這說明京東等級會員體系的目標用戶更加注重售后服務，是用戶長期留存的主要原因。
• 從業務閉環角度看：京東會員體系特權強化了其售后能力的優勢，為用戶的購買提供保障，提高用戶滿意度。結合京東的付費會員，共同形成業務閉環，促進用戶的復購。

2. 亞朵會員權益構成

（注：數字標記表示用戶級別，其中高級會員擁有低級會員的全部權益）

• 從核心權益角度看：亞朵的會員權益基本圍繞住宿需求，其核心權益是消費優惠返利，涵蓋1-5級全部會員。可見酒店類產品的用戶的核心訴求還是在于更高的性價比。
• 從業務閉環角度看：亞朵酒店的會員權利累計20項，包括優惠返利、住宿體驗、飲食、服務和身份彰顯等，幾乎覆蓋了用戶住宿的全部場景。以優惠返利為核心的會員權益和多種服務提升用戶體驗的業務閉環，可以有效的促進用戶的二次下單行為。

3. 支付寶會員權益構成

• 從核心權益角度看：支付寶會員體系的權益覆蓋用戶的衣食住行多種場景，核心特權是在支付寶內的商家小程序可以享受會員特權。滿足了用戶在支付寶以會員身份完成衣食住行的需求。
• 從業務閉環角度看：支付寶會員權益形成了對商家小程序的引流，促進支付寶小程序的發展，進而實現用戶在衣食住行各個場景下都在支付寶小程序內消費，實現了支付寶的支付業務閉環。

4. 騰訊理財通會員權益構成

騰訊理財通會員等級禮遇如下圖所示：

• 從核心權益角度看：騰訊理財通會員權益基本圍繞用戶的理財行為，核心權益為資金流轉特權。包括周轉、還款、存取等。用戶在產品內的核心需求是更加順暢的完成資金流轉。
• 從業務閉環角度看：騰訊理財通會員權益為用戶提供了流暢的資金流轉權益，用戶就可以更加放心的在產品內投資理財。同時理財通的等級禮遇主要圍繞白金以上會員提供高端服務類權益，與會員權益形成業務閉環，促進用戶的活躍和留存。

結語

通過分析會員體系的4個核心元素：命名、層數、成長值計算、會員權益，可以迅速讀懂一個產品的會員體系。

一個好的會員體系能夠通過選擇合適的會員命名、設置符合產品轉化路徑的會員層數、設計涵蓋主要運營動作并能靈活調整的成長值計算體系、提供滿足用戶核心需求的會員權益。最終形成業務閉環，引導用戶價值逐步提升，實現用戶價值的最大化。

文章來源：人人都是產品經理