項目背景

網師分層對平臺的重要性不言而喻，諸如阿里這類的電商平臺都有完善的商家分級體系，明確了不同等級的權益和運營策略。

2019 年底 CCtalk 平臺的網師數量達到了一定規模，平臺的基礎能力建設也相對完善，因此網師分層的事宜被提上日程。此前我們評估網師的方式是按照流水，將網師分為普通網師、中部網師和大 V 網師 3 類，不同網師對產品功能需求及運營要求差別很大。這種粗略的劃分方式可以幫助簡單評估網師，但并沒有產品化，而且只有單一的 GMV 維度，不夠全面客觀。有些客單價較低的網師也有大量的購課學生，他們對平臺的價值也高。因而我們需要推出一套綜合網師流水、招生數量、內容質量等多個維度的方法來進行分層運營。

面對以上問題，相應的解決方案是：

• 建立商戶等級體系
• 等級權益差別化
• 增加權益購買觸點

價值分析

既然是涉及全平臺網師的重大升級調整，當然要從全局的角度來進行價值分析。我在這個項目中探索了用于多角色價值分析的「三維價值分析法」，從整個關系鏈的角度來解析網師分層對網師和平臺的價值。

Step1.列出相關利益者

分別包括：CCtalk平臺、網師、學生。

△ 列出相關利益者

Step2.設定中心點并建立關系

分析連接這3種角色的關鍵點是什么。我們CCtalk作為一個在線教育平臺，最核心的因素是內容，因而將中心點設定為「內容」。（注意，如果此時是做某個具體功能相關的項目，那么中心點可以是這個具體的功能，例如「作業」或「直播」）設定中心點后，建立不同角色和中心點之間的雙向關系。

△ 設定中心點并建立關系

Step3.進行全局價值分析

在上一步的關系網的基礎上，用圓弧連接相鄰角色的價值走向關系，從全局的角度進行不同角色間的價值分析。

△ 進行全局價值分析

從上面的三維圖中可以看出網師分層對于平臺和網師的價值。
對網師來說，有助于：了解成長路徑，獲得更多產品運營支持，獲取更多功能權益。

對平臺來說，可以：篩選網師，激勵網師自驅動，增加收入。另外，還有一些間接的價值，包括通過督促網師生產高質量的內容來提升平臺的價值，通過督促網師積極招生來擴大用戶規模。

△ 網師分層對于平臺和網師的價值

項目拆解

剛接到需求時，我內心的 OS 是：大項目！概念大，范圍廣，都有點不知從哪里入手。

冷靜下來分析，網師分層本質是一套針對商戶端的激勵體系。從下往上拆解：由底層商戶活躍度來計算經驗值，根據經驗值劃分商戶等級，并賦予不同等級不同的權益，權益包括教學核心功能：直播時長，素材存儲空間，課程人數等。再向上衍生到不同權益對應的使用場景，以及權益的擴展方式。

△ 分層拆解

從設計層面，分為信息展示和場景觸達兩部分。這么一看，其實又挺簡單。

設計落地

由于項目涉及的底層邏輯多，時間周期跨度大，因此拆分成 3個小版本來實現：商戶權益改造，經驗值等級底層 & 商戶等級外顯。前期的功能實現后，先預埋在版本中。等到經驗等級上線時統一發布。其中經驗值等級底層項目是純技術，不涉及設計。

所以下面將從功能權益分層和等級經驗值外顯兩部分來講解具體的設計過程。

Part1. 功能權益分層

功能權益分層是權益的使用層面，包括多場景觸達和引導購買增量包。設計時分為場景梳理→設計要點→細化直播場景→具體設計這 4 步來實施。

Step A.場景梳理

拆解權益的生命周期，可分為三個階段：充足可用，即將不足，已用盡。而功能的使用場景——直播，也分為三個階段：直播前，直播中，直播后。

Step B.設計要點

將權益生命周期和直播場景結合進行交叉分析，列出設計要點和具體的設計拆解。

△ 不同階段的設計要點及拆解

Step C.細化直播場景

發起直播的入口很多，除了「立即直播」的主場景之外，還有由預告進入直播的 3 種場景，如果在每個入口都做功能禁用判斷的話，不僅邏輯會很復雜，開發實現起來成本也比較大。

于是將直播前的流程細化，發現「直播檢測」是進入直播間的必經環節，因此將功能禁用的判斷節點縮減為 2 處：「立即直播」&「直播檢測」。

△ 細化直播場景

Step D.具體設計

有了前期的分析后，具體設計環節就相對容易了。下面以點擊「立即直播」時的功能余量判斷為例。

點擊「立即直播」按鈕，在按鈕原有的邏輯上加上新的判斷邏輯，此處要注意寫清楚他們之間的優先級關系。如果在不了解背景的情況下，很可能就直接寫點擊按鈕進行可用直播時長的判斷，那需求宣講的時候開發就會問你，和原來按鈕上的邏輯是什么關系呢，此時就會一陣緊張。

△ 立即直播時判斷剩余可用直播時長

Part2. 等級經驗值

等級經驗值屬于展示層。對網師用戶來說，最重要的是了解自己當前處于哪個等級以及相應的權益有哪些。對平臺來說，除了明確每個等級及相應的權益，重要的是要引導網師升級，以激發他們的自驅力。

由此推導出相應的設計方法：錨定目標、降低門檻和利益點吸引。

△ 設計方法

在設計方法的指導下進行落地，分為網師后臺首頁的展示，以及等級詳情頁的設計兩部分。

網師后臺首頁-個人信息模塊的展示

由于等級和權益掛鉤，涉及網師切身利益，因而在網師后臺首頁的個人信息模塊，增加當前的經驗值和相應等級的展示。同時，通過利益點吸引等方式，引導網師向下一個等級努力。

△ 個人信息模塊展示

等級詳情頁的設計

點擊等級進入詳情頁，除了 Lv0 是將所有權益無差別展示，其他等級都是優先展示新增部分，包括新獲得的普通權益和附贈的高級功能。另外，用「箭頭」和「NEW」的圖標幫助用戶區分是老權益的內容升級，還是新增的權益。

總結反思

1. 前期缺乏深入調研

由于涉及網師的切身利益，因而此功能受到了網師們前所未有的關注。上線前一周，運營以郵件、通知等形式向網師預熱，3 月 5 日會上線這么一個功能。于是還沒上線就有網師來咨詢在哪里可以查看。剛上線就收到了大量的用戶反饋，網師反饋群里的消息簡直是秒速級地在刷屏。

其中，網師對每月直播時長限制的反響最為強烈，部分網師表示平臺應該鼓勵多直播，不能接受對直播時長的限制。因為直接關系到上課這個核心功能，時長不夠課都上不了，網師們的言辭非常激烈。所以我們又重新評估了平臺的直播成本，經過深入討論，全面放開了每月的直播可用時長限制。

帶來的反思是，如果前期有通過問卷、訪談等方式進行深入的用戶調研，了解他們對核心權益的態度，那么在進行權益設置時就能有更全面的考量。

2. 中高等級跨度太大，缺乏激勵效果

游戲任務的上手難度曲線一般是先平緩，再慢慢陡峭，越往上難度越大。我們的等級體系其實也是這個邏輯。初級到中級還較為容易，但再往上要非常難，要經過長時間的積累，一看就無望，難有激勵效果。

因而我們之后的優化方向是在相鄰等級中間設定一些小目標，達到可以提前贈送下一等級的新權益，以此來提高激勵效果。

文章來源：優設    作者：魚游設計

手把手教你 「如何 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理