2020-3-27 資深UI設(shè)計(jì)者
手把手教你 「如何 7 步從 0 ～ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過，設(shè)計(jì)風(fēng)格明確，用戶粘性高的軟件！」
據(jù)不完全了解，身邊大部分的 UI 同事都從 0 到 1 參與過一款或多款軟件的設(shè)計(jì)，設(shè)計(jì)過程中不知道你是否有過這樣的疑惑：
在解決這些困惑之后，我總結(jié)了一套自用的，適合從 0 ～ 1 進(jìn)行軟件設(shè)計(jì)或項(xiàng)目改版的方法 ，并在其他項(xiàng)目上進(jìn)行了二次驗(yàn)證。
以實(shí)踐項(xiàng)目 —— 有道少兒詞典為例，上線一年期間，用戶次日留存峰值 36% 以上，也非常幸運(yùn)，被 App Store Today 推薦 4 次，App Store 編輯推薦 8 次，被 App Store 納入 2019 本土優(yōu)秀 App 盤點(diǎn)中，同時(shí)被預(yù)裝到蘋果線下直營店，作為樣機(jī)體驗(yàn)軟件之一。所以，這個(gè)方法親測有效！
這篇文章，通過分析如何解決類似「產(chǎn)品經(jīng)理不滿意、設(shè)計(jì)關(guān)鍵詞不對(duì)、設(shè)計(jì)風(fēng)格無區(qū)別」這些問題，整理出 7 個(gè)幫你從 0 ～ 1 設(shè)計(jì)一款軟件的步驟。
文章較長，大概需要花費(fèi) 15 分鐘，建議大家先看大綱，優(yōu)先閱讀符合自身情況的部分。
從 0 ～ 1 進(jìn)行軟件設(shè)計(jì)，免不了要多出幾個(gè)設(shè)計(jì)稿，但做了 100 稿，產(chǎn)品經(jīng)理對(duì)頁面設(shè)計(jì)還是不滿意的話，很有可能有 2 點(diǎn)原因：
一拿到需求就開始做，很容易忽略需求背后的目標(biāo)，從 0 到 1 做一款新軟件更是要了解業(yè)務(wù)目標(biāo)和用戶目標(biāo)。
在提出解決辦法前，我們需要先捋清楚以下 2 個(gè)問題：
為什么要了解目標(biāo)？
公司開發(fā)軟件是為了達(dá)到某些目標(biāo)或是實(shí)現(xiàn)某個(gè)目的的，只有了解目標(biāo)才能更好地為公司創(chuàng)造價(jià)值。
什么是業(yè)務(wù)需求、業(yè)務(wù)目標(biāo)和用戶目標(biāo)？
平時(shí)產(chǎn)品經(jīng)理跟我們說，要設(shè)計(jì)一個(gè)頁面，設(shè)計(jì) 一個(gè)流程，這就是一個(gè)業(yè)務(wù)需求，而這個(gè)需求的背后，能夠解釋清楚這個(gè)需求是為了什么，要做到什么程度，這就是業(yè)務(wù)目標(biāo)（通常包括用什么手段，給用戶帶來什么價(jià)值，達(dá)到什么目的）。而軟件的目標(biāo)用戶，他們在一個(gè)具體的時(shí)間、地點(diǎn)、環(huán)境下做了什么操作，想達(dá)到什么程度，滿足自己的什么要求，這可以理解為用戶目標(biāo)。
解決辦法 ：多使用 「為什么+動(dòng)詞」 的問法，向產(chǎn)品經(jīng)理了解業(yè)務(wù)目標(biāo)、用戶目標(biāo)。
從 0 ～1 做軟件需要了解的業(yè)務(wù)目標(biāo)和用戶目標(biāo)，我們都可以從產(chǎn)品經(jīng)理那里得到。
少兒詞典的產(chǎn)品經(jīng)理很早就給出了業(yè)務(wù)目標(biāo)和用戶目標(biāo)。但，當(dāng)我們需要更多細(xì)節(jié)的時(shí)候，可以使用「為什么+動(dòng)詞」這樣的問法。例如：
- 「我們要做一個(gè)少兒查詞軟件，定位是一款擁有權(quán)威釋義背書，在視、聽、觸方面打造良好體驗(yàn)，緊扣教材和教學(xué)大綱的適合少兒和家長使用的伴學(xué)詞典。你來做吧！」「為什么做這個(gè)？」
- 「現(xiàn)在兒童教育KOL越來越多，很多家長都很關(guān)心k12教育問題。市面上的很多產(chǎn)品都不太適合孩子使用」
- 「為什么這樣的定位可以滿足用戶需求呢？」「為什么是適合少兒和家長使用呢？」
- 「為什么……」
在少兒詞典項(xiàng)目中
我們既了解產(chǎn)品的業(yè)務(wù)目標(biāo)，也知道用戶目標(biāo)的情況下，方案還是被 pass 的話，可能是因?yàn)槟憬o出的方案和產(chǎn)品經(jīng)理想要的不是同一個(gè)東西。為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢？怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么？我們可以用產(chǎn)品關(guān)鍵詞來回答這個(gè)問題。
為什么業(yè)務(wù)目標(biāo)在這里不起作用了呢？
我們常見的業(yè)務(wù)目標(biāo)的內(nèi)容是很長的，用戶目標(biāo)的內(nèi)容也是很長的，在這種所有已知內(nèi)容都很長的情況下，如果沒有準(zhǔn)確理解內(nèi)容，沒有對(duì)重點(diǎn)內(nèi)容達(dá)成一致，就很容易產(chǎn)生偏差。例如我要向你描述一位美女，她的頭發(fā)很柔順，臉蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我們腦海中想的不是同一個(gè)美女。但是，如果我跟你說，這是一個(gè)跟芭比娃娃很像的美女的時(shí)候，我們腦海中的形象會(huì)接近很多。
怎么才能弄清楚產(chǎn)品經(jīng)理想要的是什么？
就像設(shè)計(jì)師在進(jìn)行頁面設(shè)計(jì)時(shí)，需要設(shè)計(jì)關(guān)鍵詞一樣，產(chǎn)品經(jīng)理在描述自己的業(yè)務(wù)目標(biāo)的時(shí)候，也需要能概括業(yè)務(wù)目標(biāo)重點(diǎn)，突出賣點(diǎn)的產(chǎn)品關(guān)鍵詞，這個(gè)產(chǎn)品關(guān)鍵詞能幫助設(shè)計(jì)師弄清楚產(chǎn)品經(jīng)理想要的東西。
部分產(chǎn)品經(jīng)理為了方便大家達(dá)成共識(shí)，會(huì)早早亮出產(chǎn)品關(guān)鍵詞，如果當(dāng)你們的產(chǎn)品經(jīng)理沒有辦法提供產(chǎn)品關(guān)鍵詞的時(shí)候，我們要學(xué)會(huì)在討論中找到。
解決辦法 ：從業(yè)務(wù)目標(biāo)開始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，直到獲得雙方達(dá)成一致的產(chǎn)品關(guān)鍵詞
從業(yè)務(wù)目標(biāo)和用戶目標(biāo)開始跟產(chǎn)品經(jīng)理討論項(xiàng)目信息，在討論的過程中，我們可以留意產(chǎn)品多次提到的幾個(gè)形容詞，寫下來，然后跟產(chǎn)品反復(fù)核對(duì)確認(rèn)，最后雙方確認(rèn)且保留下來的這 3～4 個(gè)形容詞，就是這個(gè)項(xiàng)目的產(chǎn)品關(guān)鍵詞。
少兒詞典的產(chǎn)品關(guān)鍵詞是：權(quán)威內(nèi)容，寓教于樂，適合孩子使用。這些關(guān)鍵詞被我貼在屏幕的顯眼處，就怕自己哪天忘記了。
尋找設(shè)計(jì)關(guān)鍵詞，是設(shè)計(jì)師非常熟悉的步驟，但常常也在這里翻車，甚至還會(huì)出現(xiàn)，不管做什么軟件，反反復(fù)復(fù)就那幾個(gè)關(guān)鍵詞的情況，我們可以把原因歸結(jié)為：
為什么不了解用戶會(huì)導(dǎo)致關(guān)鍵詞找不對(duì)？
我們的用戶在選擇軟件、使用軟件的時(shí)候，了解到的是軟件的設(shè)計(jì)、體驗(yàn)和功能。用戶下載軟件時(shí)，他們已有的認(rèn)知會(huì)影響他們對(duì)軟件的幻想。就像給小男孩的衣服是天藍(lán)色，小女孩的衣服是嫩粉色一樣，如果用戶想要一件天藍(lán)色的衣服，而我們給他展示的是深藍(lán)色或是嫩粉色的衣服，這都會(huì)讓用戶產(chǎn)生疑惑甚至離開。因此，如果對(duì)用戶了解不準(zhǔn)確，會(huì)導(dǎo)致我們輸出錯(cuò)誤的設(shè)計(jì)關(guān)鍵詞。
而了解目標(biāo)用戶是又一件復(fù)雜的事情。
首先，我們的目標(biāo)用戶可能是一類人，如有道詞典，下載軟件用戶和使用用戶大概率是同一個(gè)人。目標(biāo)用戶也有可能是兩類人或是更多，如少兒詞典，下載用戶是家長，使用用戶是家長和孩子，企業(yè)協(xié)作軟件也類似。
從接觸軟件，下載軟件，使用軟件，到判斷是否繼續(xù)使用軟件，不同的階段的目標(biāo)用戶是不一樣的，目標(biāo)用戶在不同階段的需求也是不一樣的。
其次，開發(fā)軟件的周期是很長的，在開發(fā)軟件的過程中，我們的用戶在不斷地接收新的知識(shí)和觀點(diǎn)，用戶的喜好，認(rèn)知可能會(huì)發(fā)生很大的變化。
因此，為了更好地了解用戶，我們需要找到用戶跟軟件之間的交互關(guān)系，以及影響用戶喜好的因素。一共有 2 個(gè)步驟：
步驟 1. 分析不同用戶跟軟件之間的接觸點(diǎn)，從未來趨勢和用戶當(dāng)前認(rèn)知角度收集用戶資料
在這一步驟中，我們加入了 2 個(gè)概念，接觸點(diǎn)和未來趨勢。
什么是接觸點(diǎn)？
接觸點(diǎn)指的是用戶與產(chǎn)品發(fā)生交互的關(guān)鍵點(diǎn)，用來捋清楚我們剛剛提到 「用戶跟軟件之間的交互關(guān)系」。以少兒詞典為例，家長和軟件之間的接觸點(diǎn)，可以羅列為：家長聽說少兒詞典 – 到應(yīng)用中心下載軟件 – 打開軟件 – 使用軟件……可見要想打造一款用戶好評(píng)度高的好產(chǎn)品，僅僅優(yōu)化軟件的體驗(yàn)是不夠的。
為什么要從未來趨勢和用戶當(dāng)前認(rèn)知角度去收集用戶資料？
剛剛有提到新軟件的周期是較長的，前期定好的風(fēng)格、關(guān)鍵詞等，到了開發(fā)上線后卻不適用了，既浪費(fèi)人力，也浪費(fèi)資源，因此要考慮未來趨勢對(duì)用戶的影響。同時(shí)，用戶在選擇軟件的時(shí)候，已有的喜好/預(yù)期/經(jīng)驗(yàn)等用戶認(rèn)知會(huì)影響用戶對(duì)軟件的判斷。就像大家想到夏天的冷飲時(shí)，腦海中會(huì)浮現(xiàn)冰塊、西瓜等元素，因此雪碧、西瓜等符合用戶對(duì)夏天認(rèn)知的食品在天氣炎熱時(shí)會(huì)熱銷，但是受到大部分買家越來越注重卡路里這一未來趨勢的影響，低卡的西瓜冷飲也可能在未來一段時(shí)間大賣。
接觸點(diǎn)和未來趨勢、用戶認(rèn)知之間有什么關(guān)系？
了解用戶接觸點(diǎn)之后，我們就可以猜測用戶在這一接觸點(diǎn)的需求和心理，加入未來趨勢和用戶認(rèn)知，能讓我們做出來的東西更符合用戶預(yù)期。
尋找接觸點(diǎn)。我們了解到，少兒詞典的目標(biāo)用戶群體是 1～6 年級(jí)的學(xué)生和他們的家長，即 6～12 歲孩子，和 30～44 歲家長。然后，我們粗略地將用戶的接觸點(diǎn)劃分為，篩選軟件 – 下載軟件 – 使用軟件 – 判斷是否再次使用軟件，孩子、家長跟接觸點(diǎn)之間的關(guān)系就可以展示為：
孩子是軟件查詢、練習(xí)、核心功能體驗(yàn)者，家長是內(nèi)容審核者、軟件篩選者、伴學(xué)時(shí)軟件使用者。
找到接觸點(diǎn)之后，我們還需要把影響用戶認(rèn)知的內(nèi)容具象化。
例如，我們想了解夏天做什么口味的飲品更好，我們可以從夏日飲品口味銷量排行榜，夏日新品類型，夏日廣告等角度來獲得更清晰的用戶認(rèn)知。應(yīng)用到少兒詞典中就是，家長在篩選軟件時(shí)，老師的要求，未來孩子考試的內(nèi)容、日常輔導(dǎo)內(nèi)容、大 V 推薦的內(nèi)容等會(huì)影響家長對(duì)下載軟件的判斷。每個(gè)接觸點(diǎn)都可以使用這樣的方式，來聯(lián)想更多影響用戶認(rèn)知的內(nèi)容。然后我們將得到類似下面的表格：
根據(jù)表格，我收集了 近 10 頁的用戶信息
步驟 2. 提取收集到的信息，并放入四象限中，總結(jié)出2～4個(gè)視覺關(guān)鍵詞、體驗(yàn)關(guān)鍵詞
雜亂無序的信息只有經(jīng)過歸納之后才能被大家使用。
怎么歸納總結(jié)雜亂的信息呢？
UI 設(shè)計(jì)師都清楚，在進(jìn)行界面設(shè)計(jì)時(shí)，大標(biāo)題、縮進(jìn)、分層等排版方式能讓我們的頁面看起來更清晰易讀。處理雜亂的信息也同理，要做的是找到信息的重點(diǎn)，然后把信息歸類，最后再用一句對(duì)內(nèi)容進(jìn)行總結(jié)，方便大家理解。應(yīng)用到我們提取關(guān)鍵詞的環(huán)節(jié)中就是，挑選重要信息、放入四象限中、總結(jié)出能歸納這些信息的關(guān)鍵詞。
挑選重要信息。以家長篩選軟件為例，當(dāng)我們將熱門大 V 推薦的教學(xué)方法、內(nèi)容，進(jìn)行整理的時(shí)候，會(huì)發(fā)現(xiàn)美學(xué)、樂感、編程、外文圖書、兒童心理教育、英文教學(xué)方法（自然拼讀）等內(nèi)容出現(xiàn)的頻率很高，在一堆內(nèi)容中挑選跟少兒詞典相關(guān)的內(nèi)容，如美學(xué)、外文圖書、兒童心理教育等。
放入四象限中。在這一方法中，我們將四象限劃分為設(shè)計(jì)和用戶認(rèn)知 2 個(gè)方向，其中設(shè)計(jì)劃分為視覺風(fēng)格和體驗(yàn)風(fēng)格，用戶認(rèn)知?jiǎng)澐譃楫?dāng)前認(rèn)知和未來趨勢 。以剛剛挑選的兒童美學(xué)教育為例，這是一個(gè)屬于未來家長會(huì)越來越關(guān)注的少兒視覺發(fā)展方向，所以我們放在視覺風(fēng)格、未來趨勢這一象限中。其他內(nèi)容也類似，不斷地提取出現(xiàn)頻率高、用戶熱點(diǎn)高的內(nèi)容，并根據(jù)內(nèi)容類型放入四象限中
總結(jié)出能歸納這些信息的關(guān)鍵詞。以視覺和未來趨勢象限為例，我們收集到大 V 的美學(xué)教育，未來的課本發(fā)展趨勢，小學(xué)建筑風(fēng)格發(fā)展趨勢，他們都有一個(gè)特點(diǎn)，顏色柔和無攻擊，色彩豐富，因此，我們總結(jié)出一個(gè)視覺關(guān)鍵詞是柔和多彩。
其他內(nèi)容也采用相同的方法進(jìn)行總結(jié)，少兒詞典的視覺關(guān)鍵詞是柔和多彩，輕質(zhì)感，親和陪伴，體驗(yàn)關(guān)鍵詞是，探索多變，感官刺激和重復(fù)熟悉。
視覺關(guān)鍵詞出來了，產(chǎn)品的業(yè)務(wù)目標(biāo)也出來了，從關(guān)鍵詞到頁面樣式的邏輯也很嚴(yán)謹(jǐn)，但出來的風(fēng)格卻會(huì)覺得跟關(guān)鍵詞不太搭，或是跟競品差異不大，在多款 App 實(shí)踐后，我們發(fā)現(xiàn)可能是這樣的原因：
引用一句說爛了的名言 「一千個(gè)人眼中就有一千個(gè)哈姆雷特」。大家在對(duì)關(guān)鍵詞的理解是有差異的，以「年輕」為例子，一款針對(duì)活力的年輕人的衣服和一款針對(duì)潮流的年輕人的衣服，設(shè)計(jì)風(fēng)格上可能是隔好幾條街的。因此，僅僅得到幾個(gè)視覺關(guān)鍵詞和體驗(yàn)關(guān)鍵詞還不足以讓我們找準(zhǔn)方向，我們還需要將關(guān)鍵詞組合和具體化。一共有 2 個(gè)步驟：
步驟 1. 分別組合產(chǎn)品關(guān)鍵詞和視覺關(guān)鍵詞，產(chǎn)品關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，找到同時(shí)滿足 2 組關(guān)鍵詞的規(guī)則
為什么將關(guān)鍵詞結(jié)合能讓關(guān)鍵詞的作用發(fā)揮出來呢？
我們的目的是要做一款滿足產(chǎn)品需求，符合用戶認(rèn)知的軟件。
從問題 1 和問題 2 中，我們得到了符合產(chǎn)品需求的產(chǎn)品關(guān)鍵詞，和符合用戶認(rèn)知的視覺關(guān)鍵詞和體驗(yàn)關(guān)鍵詞，想要同時(shí)滿足產(chǎn)品需求和用戶認(rèn)知，我們需要找到他們的重合點(diǎn)。如下圖所示，將產(chǎn)品關(guān)鍵詞和視覺關(guān)鍵詞、體驗(yàn)關(guān)鍵詞分別結(jié)合，這樣的出來的規(guī)則就能最大限度地符合我們的要求，既滿足產(chǎn)品需求，又符合用戶認(rèn)知。
具體怎么做呢？下面將分別從視覺和體驗(yàn)角度舉例子。
視覺角度，以權(quán)威內(nèi)容和柔和多彩結(jié)合為例：
「權(quán)威內(nèi)容」 要求我們輸出的內(nèi)容是符合教材，符合老師標(biāo)準(zhǔn)的，內(nèi)容是準(zhǔn)確無誤的、來源是可靠的；「柔和多彩」 要求我們在進(jìn)行頁面設(shè)計(jì)的時(shí)候減少大面積顏色的使用，色彩柔和，且顏色多樣。
將兩者結(jié)合，我們得到的規(guī)則是：
根據(jù)這些內(nèi)容，我們將得到下面的 4 個(gè)顏色和圓形疊加的形式。（ps：通過這樣的形式確定的是規(guī)則，如：以橙色為主結(jié)合另外 3 個(gè)顏色，圓形，使用深淺色搭配。具體顏色和疊加形式需要在具體頁面中進(jìn)行調(diào)整）
體驗(yàn)角度，以權(quán)威內(nèi)容和探索多變?yōu)槔?
體驗(yàn)上，「權(quán)威內(nèi)容」要求我們的操作形式是跟老師的教學(xué)相似，學(xué)習(xí)方法需要參考成熟且有效的方法；「探索多變」要求我們在交互形式上可以采用多種形式，給孩子探索未知的機(jī)會(huì)，交互形式要符合兒童操作習(xí)慣，如涂抹、翻轉(zhuǎn)、拖拉等
將兩者結(jié)合，我們得到的規(guī)則是：
其他幾個(gè)關(guān)鍵詞的結(jié)合也是使用這樣的形式，這里就不一一展開。下圖是少兒詞典的視覺關(guān)鍵詞和產(chǎn)品關(guān)鍵詞結(jié)合后的樣式。
步驟 2. 選擇復(fù)雜的核心頁面，把具象化的體驗(yàn)規(guī)則、視覺規(guī)則融進(jìn)頁面中，確定設(shè)計(jì)風(fēng)格
規(guī)則梳理出來后，我們就要挑選一些重要頁面進(jìn)行風(fēng)格嘗試，以結(jié)構(gòu)復(fù)雜的中文查詞單字結(jié)果頁為例：
分析小學(xué)一年級(jí)到六年級(jí)的考試內(nèi)容，我們了解到部首、筆順筆畫、跟寫、發(fā)音等漢字的基礎(chǔ)信息是低年級(jí)用戶（小學(xué)三年級(jí)及以下）會(huì)使用到，他們要求信息完整且準(zhǔn)確；像詞組、造句這些信息則是針對(duì)高年級(jí)學(xué)生，要求快速準(zhǔn)確定位到具體的內(nèi)容板塊。
分析完內(nèi)容結(jié)構(gòu)后，我們就需要根據(jù)內(nèi)容布局，加入表格中總結(jié)的體驗(yàn)規(guī)則：
最后，梳理好頁面的體驗(yàn)形式之后，我們開始給頁面添加視覺規(guī)則：
對(duì)比產(chǎn)品原型和市面上的一些競品，我們可以發(fā)現(xiàn)，查詞軟件在內(nèi)容布局上相差無幾。如果沒有找到符合我們產(chǎn)品業(yè)務(wù)目標(biāo)，同時(shí)符合用戶認(rèn)知的規(guī)則，我們將被淹沒在一群查詞軟件中。
步驟 3. 建立一個(gè)畫板，把用到的顏色、規(guī)則、字體、間距等內(nèi)容羅列出來，并給他們限定使用范圍，方便自己查閱和團(tuán)隊(duì)合作
最后一步，相信很多設(shè)計(jì)師都會(huì)在設(shè)計(jì)過程中建立一套方便好用的設(shè)計(jì)規(guī)范庫，這里就不展開來說了。
最后，再對(duì)上文的所有內(nèi)容進(jìn)行概括。從 0 到 1 進(jìn)行軟件設(shè)計(jì)我們需要用到下面這 7 步:
完成這 7 步，將可以讓你從 0 ～ 1 設(shè)計(jì)一款產(chǎn)品經(jīng)理一稿過，設(shè)計(jì)風(fēng)格明確，用戶粘性高的軟件。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.88yangsc.com