前言

5W1H 分析法是一種思考方式，一種原理，也是一種工具，通過對(duì) 6 個(gè)方面提出問題，思考分析并進(jìn)行解答。

往期推薦：

將 5W1H 分析法運(yùn)用到工作流程中，通過這種科學(xué)的分析方式，在執(zhí)行前可以幫助我們從各個(gè)方面去了解產(chǎn)品和需求，也可以更好的規(guī)劃工作順序與步驟，使工作更高效的執(zhí)行和完成。

一、What 要做什么需求

設(shè)計(jì)需求可能是一個(gè) 0-1 的新產(chǎn)品，一個(gè)迭代版本，又或是針對(duì)需要解決的問題出解決方案等等。

1. 當(dāng)面對(duì)新產(chǎn)品時(shí)

需要先對(duì)產(chǎn)品的定位和類型有一個(gè)大概的了解，產(chǎn)品的定位和類型在一定程度上會(huì)影響著產(chǎn)品的視覺風(fēng)格。

舉例，當(dāng)需要做一個(gè)萌寵資訊類的產(chǎn)品，以下視覺類型怎么選擇：

當(dāng)產(chǎn)品換成時(shí)事新聞資訊，再選一次，結(jié)果是否會(huì)不同。

當(dāng)我們根據(jù)產(chǎn)品的定位和類型在腦海中有初步的視覺風(fēng)格歸類時(shí)，再根據(jù)產(chǎn)品定位去尋找和對(duì)標(biāo)主流競(jìng)品。對(duì)產(chǎn)品的主流競(jìng)品進(jìn)行設(shè)計(jì)層面的分析：

對(duì)競(jìng)品的設(shè)計(jì)結(jié)果進(jìn)行分析既可以快速的幫助我們了解市場(chǎng)的現(xiàn)狀，進(jìn)一步確定視覺風(fēng)格，同時(shí)也可以根據(jù)對(duì)競(jìng)品進(jìn)行反推得出的結(jié)果來打造差異和創(chuàng)新。

2. 當(dāng)面對(duì)迭代產(chǎn)品時(shí)

需要在出圖前，參考產(chǎn)品的風(fēng)格和根據(jù)以往的設(shè)計(jì)規(guī)范來保持設(shè)計(jì)風(fēng)格的統(tǒng)一。

3. 當(dāng)針對(duì)需要解決的問題出解決方案

先思考在什么情況下會(huì)出現(xiàn)這種問題，然后找到關(guān)鍵原因，參考競(jìng)品，構(gòu)思可行的優(yōu)化方案。初步與開發(fā)討論技術(shù)實(shí)現(xiàn)可能性，最后提出解決方案。

二、why 為什么做/實(shí)現(xiàn)什么目標(biāo)

1. 當(dāng)任務(wù)是設(shè)計(jì)層面的"解決方案"

每個(gè)需求都有它產(chǎn)生的原因，有時(shí)我們接到的任務(wù)就已經(jīng)是一個(gè)詳細(xì)的需求或者交互稿，并不清楚為什么這么做。這時(shí)預(yù)防改 N 稿的關(guān)鍵就是在埋頭執(zhí)行前多問為什么，了解清楚需求產(chǎn)生的原因和要實(shí)現(xiàn)的目標(biāo)。

然后根據(jù)需求目標(biāo)從用戶體驗(yàn)、交互上的拓展性和兼容性、按照需求完成設(shè)計(jì)是否有可能會(huì)引發(fā)別的問題等等，去思考和設(shè)想是否有更好的解決方案。

在一次次的了解、思考和學(xué)習(xí)的過程中可以為我們積累許多經(jīng)驗(yàn)、問題的解決方式。當(dāng)工作內(nèi)容不僅僅只是執(zhí)行的時(shí)候，這些積累的經(jīng)驗(yàn)都能讓我們更好的完成任務(wù)。

2. 當(dāng)可以介入需求評(píng)審時(shí)

在了解需求產(chǎn)生的原因和產(chǎn)品目標(biāo)的過程中，需要我們站在設(shè)計(jì)表現(xiàn)層面的立場(chǎng)上去思考和發(fā)現(xiàn)可能產(chǎn)生的問題，早一些將這些問題在需求階段暴露出來，可以更好的避免在執(zhí)行的過程中反復(fù)調(diào)整和修改。

3. 當(dāng)需求比較模糊時(shí)

有時(shí)需求來源于老板、甲方或者產(chǎn)品，他們可以很直接的表達(dá)戰(zhàn)略層面的問題、產(chǎn)品的目標(biāo)。但作為設(shè)計(jì)表達(dá)層面，很難直接告訴我們應(yīng)該怎么做，也可能沒想好要怎么做。當(dāng)我們不確定他們的想法時(shí)，根據(jù)產(chǎn)品的目標(biāo)參考競(jìng)品，再提交高保真的產(chǎn)品頁(yè)面，不需要精細(xì)到可以直接交付給開發(fā)的程度，甚至有可用的截圖也可直接拼湊，用最快的方式來完成方案，最好多出一版風(fēng)格作為比較。

當(dāng)一個(gè)具體的內(nèi)容展現(xiàn)在他們面前時(shí)，就可以根據(jù)這些參考，一步步的明確自己的想法。

三、Who 主要的用戶群體

每個(gè)產(chǎn)品都有自己的主要用戶群體，比如常見的用戶畫像、情緒板都是為了能夠精確的去分析產(chǎn)品的主要用戶群體的行為習(xí)慣、用戶特征等方面。在當(dāng)前階段就簡(jiǎn)單的從兩個(gè)方面去分析產(chǎn)品主要用戶群體：

1. 用戶性別占比

有時(shí)候用戶性別占比也會(huì)影響著產(chǎn)品的視覺風(fēng)格。如美圖秀秀、唯品會(huì)、美柚的女性用戶群體占比比男性更多，所以在整體產(chǎn)品的視覺風(fēng)格都會(huì)偏向女性化一些，色調(diào)更多為暖色調(diào)的粉色、紫色鮮艷的色彩，形狀也更為柔和。

2. 用戶年齡范圍

相比較年長(zhǎng)的用戶群體來說，年輕的用戶更樂意更容易去嘗試、使用和接受新鮮事物。一些運(yùn)營(yíng)推廣、頁(yè)面視覺風(fēng)格可以考慮是否進(jìn)行大膽的風(fēng)格嘗試，用新鮮感來吸引年輕的用戶群體。

如果主要的目標(biāo)用戶群體就是大齡用戶，那么在設(shè)定一些字體大小、按鈕大小、整體布局的時(shí)候就需要為照顧大齡用戶的文字的可讀性、產(chǎn)品易用性去思考和設(shè)計(jì)?？梢詤⒖继詫毜倪m老化設(shè)計(jì) 6 個(gè)原則：

四、Where 用戶的使用場(chǎng)景

分析和模擬用戶在不同場(chǎng)景下使用產(chǎn)品，以及在使用產(chǎn)品的過程中可能遇到的問題，可以幫助我們更一步的明確界面元素的設(shè)定、頁(yè)面的交互方式和效果。一些例子：

1. 高德地圖

駕車導(dǎo)航功能的用戶使用場(chǎng)景是"駕駛過程中"，針對(duì)這個(gè)場(chǎng)景，高德添加了語音導(dǎo)航、智能語音助手等易用的輔助交互方式。

界面顏色的對(duì)比度、文字大小的使用都需要考慮在 20cm 左右的閱讀距離和 1-2s 的閱讀時(shí)間內(nèi)能夠看清重要的指引信息。放大按鈕、功能入口的點(diǎn)擊區(qū)域可以方便用戶在駕駛過程中進(jìn)行點(diǎn)擊操作。并且保證在橫屏下更好的展示信息，對(duì)橫屏進(jìn)行適配。

直屏下彈層展開高度不覆蓋重要的指引信息上，點(diǎn)擊"順路搜"出現(xiàn)預(yù)設(shè)選項(xiàng)，并可根據(jù)用戶搜索歷史和偏好智能推薦可能感興趣地點(diǎn)，形成快捷入口。圖標(biāo)的設(shè)計(jì)考慮了用戶的視覺習(xí)慣，使用戶在短時(shí)間內(nèi)可以快速識(shí)別并理解含義。這些都是在分析和模擬用戶的使用場(chǎng)景不停的優(yōu)化和改進(jìn)去更好的滿足用戶需求和期望。

2. 強(qiáng)光弱光的使用場(chǎng)景

在戶外強(qiáng)光下，文本樣式（大小、顏色、粗細(xì)）的設(shè)置是否仍然具有可讀性，文本顏色和背景顏色盡量使用高對(duì)比度的顏色組合，這些在執(zhí)行的過程可以不停的模擬和調(diào)整，避免產(chǎn)品上線后發(fā)現(xiàn)問題再做改動(dòng)。

文本顏色和背景顏色對(duì)比度可以參考「WCAG2.1(Web Content Accessibility Guidelines / 網(wǎng)頁(yè)內(nèi)容無障礙指南」中的用色建議：

理論存在，實(shí)踐開始：

顏色對(duì)比度查詢網(wǎng)站推薦：https://gradients.app/zh/newlegibility

當(dāng)用戶在晚上、弱光場(chǎng)景下長(zhǎng)時(shí)間使用產(chǎn)品時(shí)，又或者需要閱讀長(zhǎng)篇文章和觀看視頻時(shí)，增加暗黑模式可以讓用戶更加專注、沉浸在當(dāng)前內(nèi)容里（比如在電影院觀看電影的時(shí)候會(huì)將其它的燈光關(guān)閉，線上觀看視頻時(shí)使視頻畫面外部分變暗的功能）也很大程度的提高了用戶在弱光場(chǎng)景下使用產(chǎn)品的舒適度。

3. 當(dāng)用戶首次使用功能、產(chǎn)品

需要考慮是否添加引導(dǎo)，幫助用戶快速的了解產(chǎn)品的主要功能和交互的操作方式等等。

4. 異常的處理場(chǎng)景

我們也需要考慮當(dāng)用戶在使用產(chǎn)品的過程中，可能會(huì)發(fā)生在弱網(wǎng)情況下打開頁(yè)面、斷網(wǎng)、后臺(tái)數(shù)據(jù)拉取失敗、loading 時(shí)間過長(zhǎng)等異常情況，針對(duì)這些異常情況需要提供對(duì)應(yīng)的提示和引導(dǎo)。

五、When 時(shí)間節(jié)點(diǎn)

當(dāng)需要我們開始評(píng)估設(shè)計(jì)時(shí)間的時(shí)候，需要綜合的考慮多個(gè)方面，可以確保在有限的時(shí)間里更好的完成工作。

1. 項(xiàng)目的整體時(shí)間限制

明確項(xiàng)目的開始時(shí)間和結(jié)束時(shí)間，以及一些關(guān)鍵的時(shí)間節(jié)點(diǎn)，比如開發(fā)開始寫頁(yè)面的時(shí)間、頁(yè)面可交付驗(yàn)收時(shí)間等，并且根據(jù)這些時(shí)間節(jié)點(diǎn)來規(guī)劃設(shè)計(jì)工作的進(jìn)度，確保設(shè)計(jì)的時(shí)間安排和項(xiàng)目整體計(jì)劃匹配。

2. 設(shè)計(jì)需求的復(fù)雜程度

評(píng)估頁(yè)面設(shè)計(jì)的數(shù)量、交互復(fù)雜性、視覺元素?cái)?shù)量較多等因素來確定設(shè)計(jì)工作的復(fù)雜程度來合理安排時(shí)間，確保在規(guī)定時(shí)間內(nèi)可以完成任務(wù)。

3. 協(xié)同工作與設(shè)計(jì)評(píng)審

為了保證設(shè)計(jì)更好的落地和提高合作效率，需要輸出設(shè)計(jì)規(guī)范（包括色彩規(guī)范、字體規(guī)范、交互說明等）和備注，可以幫助開發(fā)更好的理解設(shè)計(jì)，并在實(shí)現(xiàn)過程中遵循設(shè)計(jì)要求。安排設(shè)計(jì)評(píng)審會(huì)議，討論設(shè)計(jì)的可行性、可實(shí)現(xiàn)性和設(shè)計(jì)是否符合需求內(nèi)容和用戶期望，然后根據(jù)反饋分析討論是否進(jìn)行調(diào)整設(shè)計(jì)方案。

養(yǎng)成對(duì)工作內(nèi)容和工作內(nèi)容使用時(shí)間的記錄習(xí)慣，可以在新需求排期的時(shí)候利用歷史數(shù)據(jù)作為參考，根據(jù)過去的經(jīng)驗(yàn)來預(yù)測(cè)新需求的所需時(shí)間。并且對(duì)歷史數(shù)據(jù)進(jìn)行復(fù)盤，總結(jié)經(jīng)驗(yàn)找出可以改進(jìn)的地方來調(diào)整工作流程，有助于提高我們工作的效率。

六、How 如何驗(yàn)證設(shè)計(jì)效果

為了確保設(shè)計(jì)內(nèi)容準(zhǔn)確實(shí)現(xiàn)，并且避免開發(fā)背著我們即興發(fā)揮，本人真實(shí)經(jīng)歷：

在開發(fā)交付落地效果的時(shí)候進(jìn)行：

1. 視覺走查

文本、顏色、間距等元素和設(shè)計(jì)圖是否貼合，在不同設(shè)備或者瀏覽器上的顯示效果是否一致等等。

2. 交互走查

頁(yè)面和功能的交互邏輯是否正確，按鈕組件等元素的交互效果是否符合設(shè)計(jì)預(yù)期，用戶體驗(yàn)是否可以等等。

當(dāng)發(fā)現(xiàn)開發(fā)未按照設(shè)計(jì)圖和設(shè)計(jì)規(guī)范進(jìn)行開發(fā)，及時(shí)提出問題并跟進(jìn)。經(jīng)常也會(huì)在這時(shí)發(fā)現(xiàn)一些設(shè)計(jì)上存在問題或者不足，可以及時(shí)的改進(jìn)，避免上線后問題暴露在線上。

很有可能開發(fā)在改其它問題的時(shí)候會(huì)引發(fā)新的 bug，所以在上線前需要進(jìn)行最終的視覺和交互走查，確保所有頁(yè)面和功能都符合設(shè)計(jì)要求。

3. 數(shù)據(jù)分析

上線之后，可以進(jìn)行新舊版的一些數(shù)據(jù)對(duì)比，跟蹤和分析用戶在使用產(chǎn)品時(shí)候的數(shù)據(jù)，比如用戶行為、頁(yè)面停留時(shí)間、點(diǎn)擊率、留存率、流失率等等。

尤其需要關(guān)注產(chǎn)品核心業(yè)務(wù)流程的轉(zhuǎn)化率，在每一個(gè)步驟，用戶都有可能離開，找出用戶可能離開的關(guān)鍵點(diǎn)去優(yōu)化。比如在瀏覽商品時(shí)有 1000 人，到加入購(gòu)物車有 500 人，再到最后完成支付只有 10 個(gè)人，那么從瀏覽商品到完成支付的轉(zhuǎn)化率就是 1%，通過這個(gè)數(shù)據(jù)結(jié)果可能意味著購(gòu)物車設(shè)計(jì)、支付流程或者價(jià)格策略方面存在一些問題。

還有其它的一些 A/B 測(cè)試、用戶訪談等等都可以作為驗(yàn)證和優(yōu)化設(shè)計(jì)的有效手段。

作者：檸檬設(shè)計(jì)筆記