產(chǎn)品設(shè)計(jì)的從0到1｜深度解析產(chǎn)品是如何誕生的？

我們作為產(chǎn)品的設(shè)計(jì)者，需要清楚的認(rèn)識(shí)到產(chǎn)品從0到1的設(shè)計(jì)過(guò)程，對(duì)每個(gè)階段深入的思考才能形成一個(gè)清楚的認(rèn)識(shí)。吸收用戶體驗(yàn)要素的精髓就必須在實(shí)踐中不斷地學(xué)習(xí)用戶體驗(yàn)，了解用戶體驗(yàn)，總結(jié)用戶體驗(yàn)。

又見面了，在此之前，和多位同行有過(guò)溝通，發(fā)現(xiàn)很多人反映自己的基礎(chǔ)不太扎實(shí)，沒有系統(tǒng)的知識(shí)體系支撐自己進(jìn)階、轉(zhuǎn)崗。這讓我產(chǎn)生了反思，所以這段時(shí)間梳理了一些關(guān)于交互設(shè)計(jì)師的知識(shí)架構(gòu)，這也是我今年要完成的分享目標(biāo)。

希望通過(guò)這種形式的分享，能夠讓自己形成一個(gè)系統(tǒng)化的知識(shí)體系、鞏固體驗(yàn)設(shè)計(jì)基礎(chǔ)，同時(shí)也能幫助大家一起成長(zhǎng)（反正狠話已經(jīng)放出來(lái)了，接下來(lái)就使勁擼吧?。?/p>

當(dāng)產(chǎn)品發(fā)展到一定階段，優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)對(duì)于產(chǎn)品在激烈的商業(yè)競(jìng)爭(zhēng)中保持核心競(jìng)爭(zhēng)力是至關(guān)重要的。一個(gè)產(chǎn)品能否高效的幫助用戶完成任務(wù)，這直接決定著用戶留存和口碑。這時(shí)，用戶體驗(yàn)就成為了商機(jī)。

我們作為產(chǎn)品的設(shè)計(jì)者，需要清楚的認(rèn)識(shí)到產(chǎn)品從0到1的設(shè)計(jì)過(guò)程，對(duì)每個(gè)階段深入的思考才能形成一個(gè)清楚的認(rèn)識(shí)。吸收用戶體驗(yàn)要素的精髓就必須在實(shí)踐中不斷地學(xué)習(xí)用戶體驗(yàn)，了解用戶體驗(yàn)，總結(jié)用戶體驗(yàn)。

用戶體驗(yàn)為什么如此重要？

用戶體驗(yàn)是指產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)揮作用，也就是人們?nèi)绾巍敖佑|”它、“使用”它、人與產(chǎn)品互動(dòng)的舒適感、人與產(chǎn)品的有效溝通。

用戶體驗(yàn)設(shè)計(jì)通常要解決的是應(yīng)用環(huán)境的綜合問(wèn)題，兼顧視覺和功能兩個(gè)方面的因素，同時(shí)解決產(chǎn)品所面臨的其他問(wèn)題。產(chǎn)品越復(fù)雜，確定如何向用戶提供良好的使用體驗(yàn)就越困難（比如B端產(chǎn)品在設(shè)計(jì)上就有很多局限性）。任何在用戶體驗(yàn)上所做的努力，目的都是為了提高易用性和易通性，也就是提高使用效率。這里可以分兩種形式體現(xiàn)：“幫助用戶工作得更快”和“減少用戶犯錯(cuò)的幾率”。

影響用戶體驗(yàn)的因素有很多，內(nèi)容決定了產(chǎn)品能對(duì)用戶提供什么、技術(shù)決定了產(chǎn)品能給用戶什么樣的穩(wěn)定性、交互決定了用戶完成任務(wù)的舒適度、視覺決定了產(chǎn)品在用戶心中的映象及是否愿意點(diǎn)擊，其中內(nèi)容和技術(shù)是最重要的因素。

在產(chǎn)品開發(fā)過(guò)程中，我們都有類似的經(jīng)歷（可能設(shè)計(jì)師比較少），時(shí)常關(guān)注產(chǎn)品將來(lái)做什么、如何實(shí)現(xiàn)出來(lái)才最高效，用戶體驗(yàn)卻常常被忽略，甚至定義為優(yōu)先級(jí)不高，當(dāng)這些“優(yōu)先級(jí)不高”的需求積累到一定量時(shí)，會(huì)變成決定產(chǎn)品體驗(yàn)成敗的關(guān)鍵。

除了這兩個(gè)因素外，影響用戶體驗(yàn)的就是下面這五大要素：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。正如百尺高樓也需要從整體構(gòu)思到結(jié)構(gòu)設(shè)計(jì)再到細(xì)節(jié)構(gòu)造一樣，所以這五個(gè)要素貫穿著整個(gè)產(chǎn)品的始終。

為了方便具體闡述各個(gè)層面的內(nèi)涵，我們把產(chǎn)品分為兩個(gè)大類：功能型產(chǎn)品和信息型產(chǎn)品。功能型產(chǎn)品是從傳統(tǒng)的桌面和客戶端軟件的角度出發(fā)，主要關(guān)注的是核心任務(wù)。所有的操作都被納入一個(gè)過(guò)程，去思考用戶如何完成這個(gè)過(guò)程。信息型產(chǎn)品是從信息的發(fā)布和組合角度出發(fā)，主要關(guān)注的是內(nèi)容，產(chǎn)品應(yīng)該提供哪些內(nèi)容，這些內(nèi)容信息對(duì)用戶的意義是什么。

下面，我們就來(lái)具體闡述這五個(gè)層面的含義。

一、戰(zhàn)略層

無(wú)論是功能型產(chǎn)品還是信息型產(chǎn)品，在戰(zhàn)略層所關(guān)心的內(nèi)容都是一樣的：“我們?yōu)槭裁匆_發(fā)這個(gè)產(chǎn)品？”，可以分解為兩個(gè)問(wèn)題：

1. 用戶需求（產(chǎn)品給用戶帶來(lái)了什么？）

我們必須拋棄自己的立場(chǎng)，從用戶的角度重新審視產(chǎn)品，不能把自己當(dāng)成用戶，所以做產(chǎn)品設(shè)計(jì)提到最多的就是“同理心”，最忌諱的就是閉門造車（YY），我們需要熟悉知道用戶選擇我們的產(chǎn)品想要得到什么、解決什么問(wèn)題，并且在解決用戶核心問(wèn)題之后，他還能在我們的產(chǎn)品中獲得什么。

這時(shí)我們要解決的是如何獲取用戶需求：

為了了解用戶需求，我們就要對(duì)用戶進(jìn)行調(diào)研分析，找到產(chǎn)品真正的目標(biāo)用戶群（有哪幾類、幾種用戶角色，比如外賣產(chǎn)品有商家、騎手、消費(fèi)者三類），再對(duì)用戶群進(jìn)行場(chǎng)景化分析（他們?cè)谑裁磮?chǎng)景下使用產(chǎn)品），以確定產(chǎn)品真正可能覆蓋到的使用場(chǎng)景有哪些。

常見的用研方法有：?jiǎn)柧碚{(diào)查、用戶訪談、焦點(diǎn)小組等，最適合用于收集用戶的普遍觀點(diǎn)與需求。其他研究工具（如用戶測(cè)試或體驗(yàn)旅程圖）則更適用于理解用戶具體行為及用戶和產(chǎn)品交互時(shí)的表現(xiàn)。通過(guò)前期的調(diào)研，我們可以得出一個(gè)用戶畫像，既代表了目標(biāo)用戶有哪幾類人、有哪些行為目標(biāo)，這樣可以讓團(tuán)隊(duì)成員在“產(chǎn)品給誰(shuí)用”的概念里，清晰的知道用戶是“誰(shuí)”。

之前有分享過(guò)用戶訪談、用戶畫像、用戶體驗(yàn)旅程圖的制作過(guò)程，其他用研方法后面會(huì)陸續(xù)分享，敬請(qǐng)期待哦（文末有之前分享的鏈接）

2. 產(chǎn)品目標(biāo)（企業(yè)通過(guò)產(chǎn)品得到什么？）

與用戶需求相對(duì)應(yīng)的，是我們對(duì)產(chǎn)品的期望價(jià)值，也就是產(chǎn)品目標(biāo)，其實(shí)就是對(duì)產(chǎn)品總體方向的把控，包括產(chǎn)品的商業(yè)邏輯、商業(yè)價(jià)值、商業(yè)壁壘、品牌傳播等。

當(dāng)前互聯(lián)網(wǎng)已進(jìn)入下半場(chǎng)，大把燒錢野蠻生長(zhǎng)的模式已經(jīng)越來(lái)越不可持續(xù)。此時(shí)無(wú)論是投資人還是創(chuàng)業(yè)者，更多的都將回歸到商業(yè)本質(zhì)，即對(duì)產(chǎn)品商業(yè)屬性的思考。互聯(lián)網(wǎng)圈常說(shuō)不要去創(chuàng)造需求而要去發(fā)掘需求，真正去滿足目標(biāo)用戶的特定需求，因?yàn)檫@樣的產(chǎn)品才能具有商業(yè)價(jià)值，商業(yè)價(jià)值的大小可以通過(guò)市場(chǎng)規(guī)模分析、目標(biāo)用戶價(jià)值分析等方式進(jìn)行衡量。

除此之外，對(duì)于自身商業(yè)壁壘的分析也十分重要，在明確自身優(yōu)勢(shì)的同時(shí)可以進(jìn)一步鞏固和發(fā)展這些優(yōu)勢(shì)以提高后來(lái)者的準(zhǔn)入門檻，以此取得更為有利的發(fā)展空間。

在項(xiàng)目開始初期，團(tuán)隊(duì)的成員就要對(duì)此有清晰的認(rèn)識(shí)。 對(duì)戰(zhàn)略清晰的認(rèn)識(shí)會(huì)在設(shè)計(jì)過(guò)程中提供一把標(biāo)尺，引導(dǎo)我們按照正確方向前進(jìn)。因?yàn)槲覀冊(cè)绞敲鞔_知道用戶想從我們這里獲取什么，我們就能夠更好的服務(wù)他們。

最后，這些內(nèi)容（用戶調(diào)研、戰(zhàn)略定位）最好做成文檔，并同步到團(tuán)隊(duì)成員，以供大家進(jìn)行討論，讓大家知道BOSS或高層對(duì)產(chǎn)品現(xiàn)狀及未來(lái)的看法。

需要注意的是：戰(zhàn)略層面雖然是整個(gè)產(chǎn)品的根基，但不意味著在項(xiàng)目開始之前你的戰(zhàn)略要完全確定下來(lái)，也可以在過(guò)程中逐步完善，因?yàn)橥ㄟ^(guò)產(chǎn)品逐漸發(fā)展、成熟，會(huì)隨著商業(yè)市場(chǎng)發(fā)生變化。

3. 階段性目標(biāo)

產(chǎn)品目標(biāo)在實(shí)行一段時(shí)間后，最好需要復(fù)盤，也就是之前要設(shè)立一個(gè)階段性目標(biāo)，它可以是一些可追蹤的指標(biāo)，在產(chǎn)品上線以后，用來(lái)顯示他是否滿足了我們自己的目標(biāo)和用戶的需求，這些階段性目標(biāo)與產(chǎn)品本身和用戶如何使用產(chǎn)品有著緊密的關(guān)系。

同時(shí)，指標(biāo)會(huì)和可視化數(shù)據(jù)有關(guān)聯(lián)，所以產(chǎn)品經(jīng)理需要多觀察產(chǎn)品數(shù)據(jù)，我本人也是非常提倡設(shè)計(jì)師主動(dòng)去觀察數(shù)據(jù)，這也是你檢驗(yàn)設(shè)計(jì)成果的一項(xiàng)標(biāo)準(zhǔn)，如：用戶平均停留時(shí)長(zhǎng)、單月登錄次數(shù)、改版后的數(shù)據(jù)變化、活動(dòng)頁(yè)的跳出率減少了30%、Banner圖的轉(zhuǎn)化率等…

可以看出，階段性目標(biāo)和可視化數(shù)據(jù)是分不開的，任何造成了產(chǎn)品訪問(wèn)降低、粘度降低、跳出率增加等行為是可以通過(guò)數(shù)據(jù)分析來(lái)得到結(jié)論的。

二、范圍層

帶著“產(chǎn)品給用戶帶來(lái)了什么”、“企業(yè)通過(guò)產(chǎn)品得到什么”的明確認(rèn)識(shí)，我們才能搞清楚如何去滿足這些戰(zhàn)略目標(biāo)。當(dāng)你把用戶需求和產(chǎn)品目標(biāo)轉(zhuǎn)變成產(chǎn)品，應(yīng)該提供給用戶什么樣的內(nèi)容和功能時(shí)，戰(zhàn)略就變成了范圍。這里也是產(chǎn)品經(jīng)理需要重點(diǎn)專注的層面。

1. 你正在設(shè)計(jì)什么？

詳細(xì)記錄你正在設(shè)計(jì)的內(nèi)容，知道這個(gè)項(xiàng)目的目標(biāo)是什么，什么時(shí)候完成這個(gè)迭代，本次迭代需要上線什么東西，當(dāng)前進(jìn)度是怎樣的，善于記錄這些能讓你把責(zé)任分配的更加清晰，可以大大提高協(xié)作效率，工作中我們要考慮三個(gè)維度：

自己的工作流程：明確如何進(jìn)行背調(diào)，如何進(jìn)行需求評(píng)審，每一步的流程是否清晰，是否還有優(yōu)化的空間等，尤其是當(dāng)出現(xiàn)錯(cuò)誤的時(shí)候，復(fù)盤自己，一定會(huì)有可優(yōu)化的環(huán)節(jié)；產(chǎn)品的迭代流程：產(chǎn)品會(huì)從一個(gè)demo進(jìn)入到完整的迭代環(huán)節(jié)，整個(gè)過(guò)程中，產(chǎn)品應(yīng)該以什么樣的進(jìn)度和方向來(lái)進(jìn)行迭代，也是需要思考的，在整體過(guò)程中尤其考驗(yàn)了產(chǎn)品人的決策把控和需求優(yōu)先級(jí)的管理能力；團(tuán)隊(duì)的工作流程：比如定義產(chǎn)品的時(shí)候是某幾個(gè)部門還是全部、迭代產(chǎn)品的時(shí)候是只要考慮需求方、還是連其他產(chǎn)品同事一起、開發(fā)資源是否需要協(xié)調(diào)、團(tuán)隊(duì)?wèi)?yīng)該如何配合并且透明的了解產(chǎn)品成長(zhǎng)進(jìn)度等，這些都需要在迭代前后考慮有所思考。這么多管理事項(xiàng)，總要有工具協(xié)助你記錄吧，在這里推薦幾款我在工作中常用的團(tuán)隊(duì)、項(xiàng)目、需求管理工具：Xmind、Jira、TAPD、Merlin Project Express（甘特圖）

2. 你不需要設(shè)計(jì)什么？

這里需要進(jìn)一步討論產(chǎn)品所包含的具體功能，使產(chǎn)品從一個(gè)概念轉(zhuǎn)化為功能聚合體。此時(shí)明確不需要做什么要比列出需要做什么更重要，太多的產(chǎn)品一上線便拖著一副臃腫的身軀，許多功能聽上去相當(dāng)誘人，但是它們對(duì)于項(xiàng)目的戰(zhàn)略目標(biāo)并不是必需且緊急的，最終落得失敗的結(jié)局。

因此需要明確產(chǎn)品范圍邊界，梳理得到核心功能。C端產(chǎn)品通常只有一個(gè)核心功能解決個(gè)人用戶的一個(gè)核心問(wèn)題，而B端產(chǎn)品則有多個(gè)核心功能來(lái)滿足企業(yè)用戶多個(gè)使用場(chǎng)景。被解決的問(wèn)題即是需求，需求從何而來(lái)？

需求來(lái)源：需求來(lái)源一般來(lái)說(shuō)分為內(nèi)部和外部，內(nèi)部大多是職能部門的一些業(yè)務(wù)性需求或受到戰(zhàn)略上的決策影響，而外部可能是和競(jìng)品、用戶反饋的需求，無(wú)論是哪些需求，一定是站在戰(zhàn)略性角度去看，即：這些需求能否滿足用戶或企業(yè)價(jià)值來(lái)，更接地氣的說(shuō)，這個(gè)需求能否起到實(shí)際作用，還是偽需求，或者不緊急的。

在產(chǎn)品落地前可以提前考慮潛在的沖突和產(chǎn)品中的粗略點(diǎn)，可以劃定界限什么功能和內(nèi)容可以做，什么功能和內(nèi)容不能做，什么功能和內(nèi)容暫時(shí)不需要做，什么功能和內(nèi)容放在后期做。也就是說(shuō)我們前期規(guī)劃（功能設(shè)計(jì)）的時(shí)候是先做加法，然后做減法，比如根據(jù)“四象限法則”的思路，評(píng)定出優(yōu)先級(jí)、排期、不需要的。

當(dāng)然，有些產(chǎn)品團(tuán)隊(duì)的PM會(huì)輸出一份《功能規(guī)格說(shuō)明書》或《PRD文檔》，這也是范圍層面的產(chǎn)出物，文檔是起到定義功能的作用，他不需要包含產(chǎn)品的每一個(gè)細(xì)節(jié)（不像交互文檔那樣細(xì)致），只需要包含在設(shè)計(jì)或開發(fā)過(guò)程中出現(xiàn)有可能混淆的功能定義即可。

接下來(lái)我們直接來(lái)看下，喜馬拉雅APP6.3.60.3版本有哪些功能需求和內(nèi)容需求，一個(gè)產(chǎn)品從0到1制定范圍層時(shí)可能不會(huì)這么詳細(xì)，在后續(xù)的結(jié)構(gòu)層和框架層設(shè)計(jì)中偶爾也會(huì)反過(guò)來(lái)對(duì)范圍層進(jìn)行補(bǔ)充。

三、結(jié)構(gòu)層

定義好功能范圍并排列好優(yōu)先級(jí)之后，我們對(duì)最終的產(chǎn)品模型包含什么特性會(huì)有一個(gè)清晰的認(rèn)識(shí)，然后這些需求并沒有說(shuō)明如何將這些分散的片段組成一個(gè)整體。這就是在范圍層之上的結(jié)構(gòu)層：為產(chǎn)品創(chuàng)建一個(gè)功能架構(gòu)，設(shè)計(jì)用戶如何到達(dá)某個(gè)頁(yè)面，并且要思考他們完成事情之后能夠去哪里，也就是確定頁(yè)面各種特性和功能最適合的組合方式，并在流程上形成一個(gè)閉環(huán)。

從這里往后就是我們交互設(shè)計(jì)師該重點(diǎn)專注的層面了：將抽象的需求逐漸整理成一個(gè)具象的產(chǎn)品原型。

對(duì)結(jié)構(gòu)是否有質(zhì)量的的評(píng)判標(biāo)準(zhǔn)是

以各種方式將產(chǎn)品信息合理并有意義地呈現(xiàn)給用戶，讓用戶更容易找到最有用的信息；不是整個(gè)過(guò)程需要多少步完成，而是用戶是否認(rèn)為每個(gè)步驟都是合理的；一個(gè)高效結(jié)構(gòu)的優(yōu)點(diǎn)具備“可包容”和“可擴(kuò)展”的能力。

結(jié)構(gòu)層的定義

根據(jù)用戶的使用場(chǎng)景、行為、思考等方式將范圍層中的功能和內(nèi)容建立一種有序的排列結(jié)構(gòu)，讓用戶在使用產(chǎn)品時(shí)能夠高效順暢地實(shí)現(xiàn)需求。這就好比你把在范圍層確定好的一個(gè)個(gè)功能點(diǎn)，整理成一個(gè)層次清晰的腦圖，稱為：功能架構(gòu)圖。

有了功能架構(gòu)圖之后，就相當(dāng)于羅列出了功能層級(jí)和抽象的頁(yè)面布局，接下來(lái)要對(duì)每個(gè)功能點(diǎn)、任務(wù)點(diǎn)輸出一個(gè)完整的流程圖。流程圖對(duì)于產(chǎn)品經(jīng)理和交互設(shè)計(jì)師是非常重要的工具，它能夠幫助你梳理產(chǎn)品邏輯，通過(guò)畫流程圖可以清晰的看到產(chǎn)品與用戶、角色與角色、行為與反饋、頁(yè)面與頁(yè)面之間的交互關(guān)系。

常用的流程圖可分為

（1）功能流程圖

描述一個(gè)功能或任務(wù)，從開始到結(jié)束的行為過(guò)程，中間有什么特殊情況、異常情況，走流程時(shí)，遇見這些情況又該如何處理，功能點(diǎn)與功能點(diǎn)之間的邏輯關(guān)系又是怎樣的，當(dāng)前步驟或流程是不是最合理的，切勿為了減少步驟而盲目壓縮流程，這里要先保證易通性（既讓使用者通俗易懂，能夠快速了解里面的運(yùn)作模式）。

通常用于介紹產(chǎn)品功能模塊的相互關(guān)系或某個(gè)功能模塊的具體組成，如產(chǎn)品經(jīng)理需要向開發(fā)人員介紹某個(gè)新增功能模塊時(shí)，可以在原型圖宣講之前使用功能流程圖讓其對(duì)功能的輪廓和走向了然于胸。繪制功能流程圖能夠有效的幫助我們快速梳理產(chǎn)品邏輯和交互流程，用Axure畫流程圖非常方便哦。

如圖：

（2）業(yè)務(wù)流程圖

也可以叫“泳道圖”，它是描述整個(gè)產(chǎn)品業(yè)務(wù)或單個(gè)業(yè)務(wù)模塊是如何運(yùn)轉(zhuǎn)的，包含了角色與角色、前臺(tái)與后臺(tái)、模塊與模塊之間的流程關(guān)系，比如外賣產(chǎn)品的消費(fèi)者、騎手、商家三種角色是如何交互的。

通常用于介紹產(chǎn)品業(yè)務(wù)，如產(chǎn)品經(jīng)理需要向boss、客戶、團(tuán)隊(duì)成員介紹產(chǎn)品業(yè)務(wù)時(shí)，用流程圖輔助講解的效果，相較于純語(yǔ)言或文字表達(dá)要好得多。同時(shí)，繪制業(yè)務(wù)流程圖能幫助我們快速了解產(chǎn)品業(yè)務(wù)及角色關(guān)系，如圖：

（3）頁(yè)面流程圖

這個(gè)是大家最常見的，就是把各個(gè)原型頁(yè)面用頁(yè)面流的方式串聯(lián)起來(lái)，APP、H5、PC……這些都是由一個(gè)個(gè)頁(yè)面組成，頁(yè)面流描述了用戶完成一個(gè)任務(wù)需要經(jīng)過(guò)哪些頁(yè)面。

也就是我在哪，經(jīng)過(guò)什么操作，一般由交互設(shè)計(jì)師進(jìn)行繪制，其過(guò)程能夠幫助交互設(shè)計(jì)師確定產(chǎn)品頁(yè)面之間的跳轉(zhuǎn)順序以及交互狀態(tài)，同時(shí)還能幫助我們檢查是否有遺漏的頁(yè)面和設(shè)計(jì)點(diǎn)。

畫頁(yè)面流時(shí)，主要描述用戶的正常路徑，異常流程則在正常流程附近畫出異常流程即可，如圖：

產(chǎn)品設(shè)計(jì)的從0到1，從需求分析到信息/功能架構(gòu)→再到業(yè)務(wù)流程→任務(wù)流程→頁(yè)面流程→再到最后的原型圖（線框圖）是一個(gè)從抽象到具象的過(guò)程，也是從概況到細(xì)分的過(guò)程。經(jīng)過(guò)一步步的分析，逐步將想法變成實(shí)實(shí)在在的產(chǎn)品，這就是產(chǎn)品設(shè)計(jì)的魅力所在。而這其中流程設(shè)計(jì)起到舉足輕重的作用，千萬(wàn)千萬(wàn)不可忽視。

四、框架層

將功能和流程梳理清楚之后，我們就要開始設(shè)計(jì)功能點(diǎn)里的具體細(xì)節(jié)，也就是讓廣大設(shè)計(jì)師又愛又恨的原型圖。在充滿概念的結(jié)構(gòu)層當(dāng)中形成了大量的需求，這些需求都是來(lái)自戰(zhàn)略目標(biāo)的需求。在框架層里，我們要更進(jìn)一步的提煉這些結(jié)構(gòu)，輸出詳細(xì)的界面雛形、導(dǎo)航及信息設(shè)計(jì)，也就是將結(jié)構(gòu)層的東西變得更加清晰、實(shí)在?！敖换ピO(shè)計(jì)文檔”就是在該階段產(chǎn)生的。

這個(gè)階段，需要注意

（1）讓設(shè)計(jì)盡量符合用戶的使用習(xí)慣

不要出現(xiàn)一些“奇葩”的交互方式和“自以為”創(chuàng)新的組件，這些一旦違背了使用習(xí)慣和用戶認(rèn)知，都會(huì)影響操作效率，然鵝，我們做體驗(yàn)設(shè)計(jì)不就是為了提高操作效率和舒適度嗎？

舉例：消息列表中出現(xiàn)比較多的刪除方式是左滑刪除，這已經(jīng)形成了普遍的使用習(xí)慣，如果你非要?jiǎng)?chuàng)新到“長(zhǎng)按→移動(dòng)→刪除”，這不就是提高了學(xué)習(xí)成本么，隨之而來(lái)的就是吐槽產(chǎn)品易用性差。

所以做界面設(shè)計(jì)要選擇正確的界面元素，這些界面元素要能幫助用戶完成他們的任務(wù)，還要通過(guò)適當(dāng)方式讓它們?nèi)菀妆桓兄胶腿菀资褂谩?/p>

這里最忌諱的是：不要為了所有人的所有偏好做設(shè)計(jì)，因?yàn)橐粋€(gè)設(shè)計(jì)不可能適應(yīng)所有用戶，我們要考慮的是符合“目標(biāo)用戶”的使用習(xí)慣、貼近“目標(biāo)用戶”的認(rèn)知即可，比如我們做主打90后視頻社交產(chǎn)品，難道還要考慮到70后的認(rèn)知習(xí)慣嗎，顯然不需要，這沒有價(jià)值，因此我們?cè)谧龇桨笡Q策時(shí)，只需考慮目標(biāo)用戶中的大部分人群即可。

（2）要注意突出重點(diǎn)，讓用戶一眼看到核心內(nèi)容

這里需要考慮交互元素和整體頁(yè)面的布局，可能有些懶惰的原型設(shè)計(jì)者把這個(gè)階段完全丟給UI設(shè)計(jì)師了，認(rèn)為布局是他們的事情，但前提是UI設(shè)計(jì)師如何快速理解你的交互原型，這就考驗(yàn)了交互設(shè)計(jì)師在輸出原型時(shí)，內(nèi)容層次有沒有區(qū)分，哪些需要一屏內(nèi)展示，哪些需要弱化。

這些注意事項(xiàng)有沒有在原型里體現(xiàn)或者說(shuō)明，最讓人無(wú)語(yǔ)的就是一些PM或交互設(shè)計(jì)師，將所有內(nèi)容都往頁(yè)面里堆積，完全不考慮信息的層次，哦對(duì)了，還有口頭需求，這些都是減少了他們的工作量，讓UI設(shè)計(jì)師增加工作量（會(huì)增加后期重新溝通需求的時(shí)間）。

除此之外，這些布局也不能憑感覺構(gòu)建，需要有理有據(jù)，比如是否考慮到目標(biāo)用戶的瀏覽習(xí)慣，舉例：“微信訂閱號(hào)消息列表”頁(yè)面為什么是文字在前，縮略圖在后，那是因?yàn)樵谠搱?chǎng)景下，用戶在找一條內(nèi)容或?yàn)g覽頁(yè)面時(shí)，主要通過(guò)文章標(biāo)題來(lái)判斷是否是自己想要的內(nèi)容，而不是圖片。

（3）為信息做設(shè)計(jì)，將產(chǎn)品信息呈現(xiàn)出來(lái)并且讓用戶容易理解

除了上一條說(shuō)的如何根據(jù)瀏覽習(xí)慣組織信息之外，還要將這些信息再次處理，就是如何讓用戶看的舒服、有代入感，這是一種促進(jìn)理解的表達(dá)方式。之前我在琢磨“長(zhǎng)表單如何設(shè)計(jì)”時(shí)，總結(jié)出了一句話“信息是界面的嘴巴，它需要與友好的與用戶聊天，而不是審問(wèn)用戶”。

事實(shí)就是如此，大家都有共同的經(jīng)歷，在錄入多項(xiàng)信息時(shí)，情緒上抵觸的，這個(gè)抵觸點(diǎn)可能來(lái)源于：表單交互不智能、組件沒有記住我之前輸入的、寧愿讓我輸入也不讓我做選擇、提示反饋不及時(shí)、文字引導(dǎo)不友好，文案既死板又啰嗦等情況。

這就體現(xiàn)了信息表達(dá)是多么重要，舉例：之前我?guī)团笥言O(shè)計(jì)“豆芽作文”時(shí)，有一個(gè)在線反饋入口，我準(zhǔn)備用“圖標(biāo)+在線反饋”的文字描述來(lái)呈現(xiàn)，后來(lái)發(fā)現(xiàn)這種方式不太好玩、太過(guò)于傳統(tǒng)，不能彰顯產(chǎn)品調(diào)性，而且我們的用戶是中小學(xué)生、家長(zhǎng)、老師，這是一群活潑陽(yáng)光的群體。

因此我根據(jù)實(shí)際場(chǎng)景，把“在線反饋”的文案換成“打小報(bào)告”，增加了表達(dá)趣味，上線后的入口點(diǎn)擊事件也明顯比之前要好，目標(biāo)用戶看到這里會(huì)覺得符合他們的生活場(chǎng)景，都會(huì)想點(diǎn)進(jìn)去看看，這不就達(dá)到了我們?cè)O(shè)立該入口的第一個(gè)目的嗎——希望有人點(diǎn)擊，降低用戶對(duì)“在線反饋”的忽略感（不在乎）。

（4）在合適的地方權(quán)衡利弊，使用合適的組件

很多組件的功能類似，同時(shí)可適用于多個(gè)場(chǎng)景，所以我們?cè)谧鼋换セ騏I設(shè)計(jì)時(shí)，一定也經(jīng)歷過(guò)類似的糾結(jié)點(diǎn)，糾結(jié)不知道如何選擇設(shè)計(jì)方案，感覺A和B組件都能滿足需求。這里推薦一個(gè)方法給大家，比如我們要做一個(gè)選擇器，在該選擇器內(nèi)可以對(duì)選項(xiàng)進(jìn)行單選，但這里考慮到設(shè)備平臺(tái)的兼容性和開發(fā)成本，所以準(zhǔn)備采用系統(tǒng)原生的選擇器和動(dòng)作菜單，如圖：

我們可以看到AB組件都能滿足單選的需求，那么如何選擇最合適的呢？

在排除不影響用戶認(rèn)知和使用習(xí)慣的條件下，我們可以選擇當(dāng)前兼容性強(qiáng)且操作成本低的組件，比如A組件，他是滑動(dòng)選擇的，假設(shè)未來(lái)可能要加入更多的選項(xiàng)，那就需要考慮到組件的延展性和包容性，所以我會(huì)選擇使用它。

但如果選項(xiàng)是定量的，我會(huì)選擇B組件，因?yàn)樯倭康倪x項(xiàng)，不需要我做出滑動(dòng)的動(dòng)作（“找”的行為）就能將選項(xiàng)清晰的呈現(xiàn)在我眼前，并且點(diǎn)擊選項(xiàng)后能夠直接關(guān)閉彈窗且生效，而A組件卻要選中后，再點(diǎn)擊“確認(rèn)”，所以考慮到內(nèi)容因素和操作成本，B組件更合適。

所以說(shuō)，設(shè)計(jì)方案并不是憑感覺來(lái)做的，而要結(jié)合內(nèi)容呈現(xiàn)和使用場(chǎng)景來(lái)決策，這也是要求設(shè)計(jì)師在動(dòng)手之前想一想使用場(chǎng)景。

（5）理性的錯(cuò)誤處理

一個(gè)聰明的系統(tǒng)應(yīng)該考慮到異常情況和特殊情況，記得剛?cè)胄校樱r(shí)，我曾責(zé)怪過(guò)“為什么還有這么笨的用戶”，后來(lái)才發(fā)現(xiàn)用戶始終的都是無(wú)辜的，而是我們的產(chǎn)品沒有把防錯(cuò)機(jī)制做完善。“用戶錯(cuò)誤”這個(gè)詞似乎暗示用戶做錯(cuò)了某些事情，但不僅如此，產(chǎn)品設(shè)計(jì)者也犯下了錯(cuò)誤，因?yàn)樗麄冏層脩糨p易的做出了錯(cuò)的行為。

所以，解決用戶錯(cuò)誤的方法不是責(zé)怪用戶、不是指導(dǎo)用戶如何用，而應(yīng)該設(shè)立一套防錯(cuò)規(guī)則和提高容錯(cuò)性，也就是“防御設(shè)計(jì)”，讓犯錯(cuò)變得困難。比如通過(guò)一些手段避免錯(cuò)誤：默認(rèn)值、建議、限制（約束）、及時(shí)反饋、逆操作等方法。

通過(guò)3個(gè)行為維度來(lái)分析

（1）操作前，提醒防錯(cuò)

1）詳盡的說(shuō)明文字，突出顯示

主要是針對(duì)新用戶或謹(jǐn)慎的操作說(shuō)明，目的是為了正確引導(dǎo)用戶學(xué)習(xí)使用。引導(dǎo)和提示的位置要突出，從而讓用戶容易感知到（比如離標(biāo)題或輸入?yún)^(qū)近一些），確保用戶在操作前能注意到引導(dǎo)或提示信息。

如下圖，如果不進(jìn)行提示用戶就不知道這個(gè)位置的錄入機(jī)制和字?jǐn)?shù)極限值是怎樣的，等輸入完再提示或者點(diǎn)擊提交再提示是否有輸入的時(shí)候已經(jīng)晚了，這時(shí)用戶就會(huì)認(rèn)為系統(tǒng)反應(yīng)尺寸，嚴(yán)重的影響了他的工作效率

2）當(dāng)結(jié)果不可逆時(shí)，詢問(wèn)用戶讓其知道操作的后果

在用戶操作前及時(shí)給出正確且有效地引導(dǎo)和提示，有助于減少錯(cuò)誤發(fā)生的可能性。對(duì)于比較重要的操作，需要通過(guò)二次確認(rèn)減少錯(cuò)誤的發(fā)生，這里指的二次確認(rèn)有幾種程度可以參考，我把他分為：輕度防錯(cuò)、中度防錯(cuò)、重度防錯(cuò)。

如圖：

3）選項(xiàng)比輸入更簡(jiǎn)單，并提供默認(rèn)選項(xiàng)

用戶出錯(cuò)的原因無(wú)非就是這4種：系統(tǒng)性能差、被界面誤導(dǎo)、自己粗心大意、操作復(fù)雜的功能。就拿“操作復(fù)雜的功能”來(lái)看，用戶操作的時(shí)間越長(zhǎng)犯錯(cuò)的幾率就越高，所以，我們?cè)谧鲆恍┙M件的時(shí)候，能讓用戶選擇的就不讓用戶輸入，寧可讓他點(diǎn)擊完成任務(wù)，也不讓他輸入完成任務(wù)，因?yàn)檩斎氡赛c(diǎn)擊的失誤概率要大的多，操作成本也相對(duì)較高。

其次就是選項(xiàng)給用戶提供默認(rèn)值，尤其是用戶需要做重復(fù)的動(dòng)作，或者需要精確數(shù)字的時(shí)候，先提供一個(gè)默認(rèn)值，然后讓用戶再修改它們。

（2）操作中，實(shí)時(shí)感知

1）對(duì)用戶的操作進(jìn)行視覺化呈現(xiàn)，并及時(shí)回饋

對(duì)用戶輸入的信息進(jìn)行實(shí)時(shí)檢驗(yàn)，在下面這個(gè)案例中，當(dāng)用戶輸入自己的郵件信息之后，即被告知用戶這個(gè)動(dòng)作的含義，到底是輸入正確還是輸入錯(cuò)誤，而不是等全部輸入完畢點(diǎn)擊“確認(rèn)”后才提示，實(shí)時(shí)狀態(tài)能將錯(cuò)誤扼殺在搖籃中，用戶在感知上會(huì)認(rèn)為系統(tǒng)是敏感的，而不是遲鈍的。

2）適當(dāng)限制用戶的某些交互操作

對(duì)一些可能造成錯(cuò)誤的操作入口設(shè)置約束或直接禁止操作，從而避免錯(cuò)誤的發(fā)生。舉個(gè)例子：操作完一個(gè)模塊內(nèi)容，展開另一模塊的同時(shí)收起上一個(gè)模塊。填寫過(guò)程限制用戶某些操作，這樣始終讓焦點(diǎn)聚集在當(dāng)前內(nèi)容，在操作者的角度也不會(huì)因?yàn)閮?nèi)容過(guò)多而導(dǎo)致情緒波動(dòng)。

（3）操作后，及時(shí)反饋&友好引導(dǎo)

1）錯(cuò)誤發(fā)生時(shí)，即使反饋錯(cuò)誤并提供糾錯(cuò)幫助

錯(cuò)誤反饋及時(shí)就能保證用戶每個(gè)階段的操作都能得到回應(yīng)，避免因?yàn)橐粋€(gè)小的錯(cuò)誤就要修改關(guān)聯(lián)的一系列內(nèi)容的情況，提高完成任務(wù)的效率。反饋不僅要指出有錯(cuò)，還要指出錯(cuò)在哪里，反饋文案要準(zhǔn)確、友好（看到這里別忘記上面說(shuō)的信息設(shè)計(jì)：文案呈現(xiàn)方式是要和用戶聊天，不要審問(wèn)用戶），這樣便于用戶了解錯(cuò)誤的原因，方便下一步的修改。

另外在用戶提交操作之后，也需要及時(shí)反饋是正確or錯(cuò)誤，因?yàn)檫@里有種叫“心理犯錯(cuò)”的因素，是用戶對(duì)自己操作不自信的表現(xiàn)，你不及時(shí)告訴他操作結(jié)果，他可能會(huì)擔(dān)心一小會(huì)呢。

2）允許用戶犯錯(cuò)，并支持操作可逆（既撤銷以前的指令）

iPhone手機(jī)的還原功能，可以在用戶出錯(cuò)時(shí)將多種功能設(shè)置快速還原到原始狀態(tài)。還有常見的：刪除相片、刪除郵件、因異常情況退出的文稿編輯等，這些極端操作都有對(duì)應(yīng)的草稿箱、垃圾箱、下次進(jìn)入提醒是否還原等逆操作來(lái)挽回用戶的錯(cuò)誤。

五、表現(xiàn)層

現(xiàn)在整個(gè)產(chǎn)品的形態(tài)是不是清晰很多呢，現(xiàn)在就需要為你的孩子設(shè)計(jì)容貌了，是的，提高他的顏值和氣質(zhì)。表現(xiàn)層在這五層模型的最頂端，也是用戶會(huì)首先注意到的地方：感知設(shè)計(jì)。

這里是將品牌、內(nèi)容、功能和美學(xué)匯集到一起界面設(shè)計(jì)。在框架層，我們主要解決組件放置和元素布局的問(wèn)題，表現(xiàn)層則要解決并彌補(bǔ)“產(chǎn)品框架層的邏輯排布”的感知呈現(xiàn)問(wèn)題。通過(guò)視覺設(shè)計(jì)，我們決定這些內(nèi)容在界面上應(yīng)該如何呈現(xiàn)。

五大感知：視覺、聽覺、觸覺、嗅覺、味覺

嗅覺和味覺更多是體現(xiàn)在實(shí)體產(chǎn)品上，如食物、香水、酒水等用戶可以通過(guò)聞和吃直接獲取到信息。而互聯(lián)網(wǎng)產(chǎn)品是屬于工業(yè)設(shè)計(jì)領(lǐng)域的再創(chuàng)作，我們不可能讓一個(gè)虛擬的產(chǎn)品發(fā)出香味（emmm，APP真香~），所以下面來(lái)談?wù)勔曈X、觸覺、聽覺。

（1）觸覺

最直觀的體現(xiàn)就是手機(jī)本身了，重量、質(zhì)感、薄厚以及材質(zhì)等。而體現(xiàn)在應(yīng)用交互上就是振動(dòng)反饋的方式，像鍵盤的短振，充電、長(zhǎng)按時(shí)候的中振，關(guān)機(jī)時(shí)候的長(zhǎng)振，甚至還有打游戲、收到重要消息、操作失誤等場(chǎng)景都有震動(dòng)。

雖然這些震動(dòng)幾乎沒什么差別，但是對(duì)身體的反應(yīng)是是敏感的，用戶能清楚的感覺到系統(tǒng)在和我“對(duì)話”，出于使用手機(jī)的本能，不用查看都知道現(xiàn)在在進(jìn)行什么樣的操作，有時(shí)觸覺會(huì)比視覺先感知到，合理利用觸覺反饋，無(wú)形中也完善了“及時(shí)反饋”的機(jī)制。

（2）聽覺

聲音在很多產(chǎn)品上是作為提示來(lái)用的，雖然這是一種很不友好的提示方式，但是不能否認(rèn)他比振動(dòng)、視覺效果來(lái)的更直觀（手機(jī)在身邊的情況下）。而對(duì)一些產(chǎn)品來(lái)說(shuō)，聲音這一環(huán)就顯得至關(guān)重要了，比如音樂、音頻、視頻、游戲、直播類產(chǎn)品的音質(zhì)的保障。

兒童教育類和少兒拓展類產(chǎn)品在音頻上的引導(dǎo)會(huì)比文字信息更直觀，這類產(chǎn)品音頻質(zhì)量直接影響著產(chǎn)品的沉浸式體驗(yàn)，在小朋友眼里，產(chǎn)品有了聲音才顯得更可愛，更符合他們的心理模型，就好比我們讀小學(xué)時(shí)，老師家長(zhǎng)天天嘮叨我們寫作業(yè)，等進(jìn)入社會(huì)以后，學(xué)習(xí)完全靠自律，基本沒有人再去監(jiān)督你。

所以他們的心理模型是：“這里需要有人說(shuō)話來(lái)引導(dǎo)”，在他們眼里這種方式是好玩的、有趣的、學(xué)習(xí)產(chǎn)品的成本也是最低的。

（3）視覺

由于我們互聯(lián)網(wǎng)產(chǎn)品的特性，視覺的權(quán)重是最多的，這也是用戶體驗(yàn)設(shè)計(jì)師最得心應(yīng)手的領(lǐng)域。因?yàn)閹缀跛械幕ヂ?lián)網(wǎng)產(chǎn)品都會(huì)涉及界面視覺設(shè)計(jì)，出于這個(gè)原因，下面主要就講視覺設(shè)計(jì)如何支持功能設(shè)計(jì)。

1. 引導(dǎo)用戶

評(píng)估一個(gè)產(chǎn)品視覺設(shè)計(jì)的簡(jiǎn)單方法之一，就是“視線首先落在什么地方？”、“哪個(gè)設(shè)計(jì)元素在第一時(shí)間吸引了用戶的注意力？”、“這個(gè)元素是偏向于產(chǎn)品目標(biāo)還是用戶訴求？”。

一般來(lái)說(shuō)，用戶視線的移動(dòng)方式遵循著相當(dāng)一致的模式。如果你的設(shè)計(jì)是成功的，用戶眼球的移動(dòng)軌跡一般有以下兩個(gè)重要的特點(diǎn)：

首先，它們是一條流暢的視線流。如果用戶評(píng)論一個(gè)設(shè)計(jì)是擁擠、復(fù)雜時(shí)，表示這個(gè)設(shè)計(jì)沒能順利地引導(dǎo)視線在頁(yè)面上有序移動(dòng)。他們的眼睛在各種各樣的元素之間跳來(lái)跳去，所有元素都在試圖引起他的注意。其次，在不需要太多花里胡哨的設(shè)計(jì)嚇到用戶的前提下，它能否為用戶提供某種視覺上的“引導(dǎo)”，這些引導(dǎo)應(yīng)該支持用戶去完成某個(gè)目標(biāo)或任務(wù)，且不應(yīng)該分散用戶對(duì)的注意力。

2. 對(duì)比和一致性

對(duì)比：當(dāng)一個(gè)元素在眾多元素中顯得與眾不同時(shí)，用戶就會(huì)注意到，這就是對(duì)比。是用于吸引用戶注意的一個(gè)主要設(shè)計(jì)手段，把用戶的注意力吸引到界面中的關(guān)鍵部分，幫助用戶理解頁(yè)面導(dǎo)航元素之間的關(guān)系，傳達(dá)信息設(shè)計(jì)中的概念群組。

對(duì)比手段一般有：空間對(duì)比、大小對(duì)比、字體對(duì)比、顏色對(duì)比、虛實(shí)對(duì)比、動(dòng)靜對(duì)比、稀疏對(duì)比、方向?qū)Ρ?、圖文對(duì)比、立體與扁平對(duì)比、局部與整體對(duì)比等，這些對(duì)比手法是源自于版式設(shè)計(jì)，當(dāng)然在界面設(shè)計(jì)中也是通用的，本篇主要是分享產(chǎn)品設(shè)計(jì)，因此在這里就不做細(xì)化。

如果元素之間沒有對(duì)比性，那整個(gè)界面將顯得非常平庸，沒有視覺落點(diǎn)，缺乏應(yīng)有的活力，最主要的是不能有效的引導(dǎo)用戶視線，不能實(shí)現(xiàn)傳達(dá)信息的目的。

一致性原則，是另一個(gè)重要的組成部分，可分為：視覺一致性、交互一致性

視覺一致性：例如通過(guò)工具將視覺元素、模塊的大小、空間保持一致性。基于柵格線的方法是就通過(guò)使用母版來(lái)確保設(shè)計(jì)的一致性，柵格系統(tǒng)在頁(yè)面排版布局、尺寸設(shè)定方面給了設(shè)計(jì)師直觀的參考，它讓頁(yè)面設(shè)計(jì)變得有規(guī)律，從而減少了設(shè)計(jì)決策成本。柵格化提高了頁(yè)面布局的一致性跟可復(fù)用性，避免了設(shè)計(jì)師與開發(fā)者在細(xì)節(jié)上的反復(fù)溝通和走查，從而提升了整個(gè)設(shè)計(jì)開發(fā)流程的效率，并能幫助開發(fā)者實(shí)現(xiàn)較為理想的設(shè)計(jì)還原。各種布局也都可以套用這個(gè)模板來(lái)創(chuàng)建，最后并納入“UI設(shè)計(jì)規(guī)范”中。

交互一致性：在不斷迭代的歷程中，很多模塊為了“功能先行”對(duì)交互規(guī)則做了一些修改，這些小的修改積累到一定量就會(huì)對(duì)產(chǎn)品整體的一致性方面提出挑戰(zhàn)。產(chǎn)品中的功能點(diǎn)在不斷完善的過(guò)程中，涉及到業(yè)務(wù)流程的場(chǎng)景也會(huì)豐富起來(lái)，很多的組件適用于不同場(chǎng)景也成為產(chǎn)品中必不可少的一部分。

B端產(chǎn)品相對(duì)來(lái)說(shuō)，要比C端更注重交互一致性原則，因?yàn)锽端產(chǎn)品的組件復(fù)用面積要比C端更廣泛，比如表單組件在B端產(chǎn)品中最常見，基本每個(gè)模塊、每個(gè)任務(wù)流都會(huì)使用，如果每個(gè)模塊的交互方式都不一致，會(huì)導(dǎo)致復(fù)雜的B端產(chǎn)品更復(fù)雜。

因此需要制定一套交互規(guī)則。其次從開發(fā)角度來(lái)講，制定統(tǒng)一的交互規(guī)則能夠幫助開發(fā)在工作中直接調(diào)用，從而減少開發(fā)成本。推薦幾個(gè)常用的PC端和移動(dòng)端組件庫(kù)：Element-UI、Ant Design、Vant

3. 配色方案

在表現(xiàn)層最能讓用戶形成直觀感受的就是顏色了，人是視覺動(dòng)物，顏色也表達(dá)了產(chǎn)品調(diào)性，樹立了用戶第一次打開產(chǎn)品的心理印象。核心的配色方案就是使用品牌色，可以有效地向外界傳遞品牌形象，使用品牌色并不是讓你直接吸色，而是根據(jù)情況進(jìn)行飽和度調(diào)節(jié)，這里也需要考慮你的目標(biāo)用戶是什么屬性，他們是否能接受這種配色方案。

需要注意的是，我們?cè)O(shè)計(jì)師不能因?yàn)樽汾s潮流而忽略了產(chǎn)品調(diào)性，比如說(shuō)我們的產(chǎn)品是B端，他面向企業(yè)用戶，有特定的職業(yè)屬性，那在配色方面就需要更冷靜、理性一些，不能整的花里胡哨的?？赡苡行┰O(shè)計(jì)師會(huì)問(wèn)“如果都采用理性的配色，那就不能打破差異化了”。

其實(shí)我個(gè)人對(duì)這句話是非常不贊同的，從產(chǎn)品角度看差異化不是從配色出發(fā)，而是從功能出發(fā)，你解決用戶需求的方法和競(jìng)品有什么不同，或者說(shuō)服務(wù)點(diǎn)有哪些優(yōu)勢(shì)，視覺設(shè)計(jì)永遠(yuǎn)都是服務(wù)于功能、服務(wù)于商業(yè)的，脫離了商業(yè)的設(shè)計(jì)就變成了“藝術(shù)”，而不是解決問(wèn)題的設(shè)計(jì)。只有從功能上打破差異化了，你的配色方案才有更大的意義，比如加入品牌元素、合理搭配輔助色等。

如果是C端產(chǎn)品則會(huì)更開放一些，因?yàn)槊鎸?duì)的是個(gè)人用戶，在視覺上更注重設(shè)計(jì)趨勢(shì)和品牌化，使整個(gè)產(chǎn)品看起來(lái)更獨(dú)特，這樣用戶在使用的時(shí)候才會(huì)眼前一亮。一些運(yùn)營(yíng)、活動(dòng)、專題類設(shè)計(jì)，視覺設(shè)計(jì)就顯得尤為重要，它直接成為了引流工具，能幫助產(chǎn)品提高轉(zhuǎn)化率。

在一個(gè)完整的產(chǎn)品設(shè)計(jì)流程里，會(huì)要求設(shè)計(jì)師將表現(xiàn)層的東西整理出一套“UI、交互設(shè)計(jì)規(guī)范”，也可以叫“定義設(shè)計(jì)語(yǔ)言”。這個(gè)規(guī)范確定了表現(xiàn)層設(shè)計(jì)的各個(gè)方面，從最大到最小的范圍內(nèi)的所有元素。影響到產(chǎn)品的每一個(gè)局部標(biāo)準(zhǔn)，比如：跳轉(zhuǎn)邏輯、色彩系統(tǒng)、字體系統(tǒng)、柵格系統(tǒng)、組件規(guī)則、圖標(biāo)、投影等原則。

做設(shè)計(jì)規(guī)范的好處是顯而易見的：

對(duì)內(nèi)：可保證設(shè)計(jì)團(tuán)隊(duì)產(chǎn)出物的一致性，尤其是在多人協(xié)作設(shè)計(jì)、跨部門協(xié)作、崗位交接、設(shè)計(jì)傳承、提升設(shè)計(jì)和開發(fā)效率等方面，這些方面做好了，產(chǎn)品交付到用戶手中，也能為用戶帶來(lái)體驗(yàn)的一致性，降低學(xué)習(xí)成本；對(duì)外：統(tǒng)一品牌符號(hào)，有助于加深產(chǎn)品在用戶心中的印象，讓我們的產(chǎn)品看起來(lái)是個(gè)協(xié)調(diào)一致的整體，而不是一堆亂七八糟的碎片，為公司的品牌宣傳和文化建設(shè)可以保駕護(hù)航。所以在互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)中，合理利用視覺、觸覺、聽覺，能使產(chǎn)品變的更生動(dòng)，試問(wèn)誰(shuí)不喜歡既聰明又生動(dòng)的產(chǎn)品呢？

回顧

實(shí)際上這五個(gè)層面，就是我們產(chǎn)品設(shè)計(jì)的工作流程和注意點(diǎn)：

戰(zhàn)略層——確定產(chǎn)品目標(biāo)和用戶需求，為產(chǎn)品將來(lái)的方向做市場(chǎng)調(diào)研、用戶研究，這是產(chǎn)品經(jīng)理設(shè)計(jì)產(chǎn)品的根源，也是做一個(gè)產(chǎn)品的開端；范圍層——當(dāng)我們獲取到用戶需求、明確好產(chǎn)品目標(biāo)后，就要開始研究提供什么解決方案來(lái)滿足用戶的需求，這些解決方案對(duì)應(yīng)的功能有哪些，內(nèi)容由什么組成，這時(shí)一般會(huì)產(chǎn)出《PRD文檔》、《功能規(guī)格說(shuō)明書》來(lái)記錄這些，一般包含：版本記錄、產(chǎn)品規(guī)劃圖、功能清單、業(yè)務(wù)流程圖、需求列表、開發(fā)資源、其他相關(guān)規(guī)范……結(jié)構(gòu)層——功能和內(nèi)容范圍確定后，交互設(shè)計(jì)師開始根據(jù)產(chǎn)品的需求設(shè)計(jì)解決方案，通過(guò)架構(gòu)圖和流程圖，將這些打散的需求串聯(lián)起來(lái)，形成一個(gè)可以閉環(huán)的流程，并且羅列出功能架構(gòu)：這些需求會(huì)有幾個(gè)頁(yè)面組成、每個(gè)頁(yè)面包含什么東西。當(dāng)然有些團(tuán)隊(duì)可能沒有交互設(shè)計(jì)師的崗位，那就是PM和UI共同擔(dān)任；框架層——有了架構(gòu)圖和流程圖之后，就開始設(shè)計(jì)具體界面雛形（原型圖、線框圖），具體到這些頁(yè)面如何跳轉(zhuǎn)、用什么組件、交互規(guī)則是怎么樣的、頁(yè)面元素怎么組合等，這時(shí)候通常會(huì)產(chǎn)出《交互設(shè)計(jì)文檔》，一般包含：版本記錄、需求背景、流程圖、架構(gòu)圖、頁(yè)面原型、交互說(shuō)明、頁(yè)面demo……表現(xiàn)層——UI設(shè)計(jì)對(duì)功能設(shè)計(jì)進(jìn)行支持的環(huán)節(jié)，基于原型圖將產(chǎn)品呈現(xiàn)出來(lái)，顏色、元素、品牌、內(nèi)容怎么通過(guò)視覺設(shè)計(jì)來(lái)定義，這都取決于UI設(shè)計(jì)師如何把控產(chǎn)品特性、功能理解及目標(biāo)用戶的調(diào)性，最后將設(shè)計(jì)稿（高保真）交付給開發(fā)工程師，并產(chǎn)出《UI、交互設(shè)計(jì)規(guī)范》和組件庫(kù)，方便開發(fā)調(diào)用及后期復(fù)用。我在這里還是非常提倡UI設(shè)計(jì)師去參與產(chǎn)品和交互的工作，然而行業(yè)趨勢(shì)也是這樣，最近和一位在滴滴工作的體驗(yàn)設(shè)計(jì)師交流時(shí)發(fā)現(xiàn)，他在滴滴是專家級(jí)設(shè)計(jì)師管理崗，除了管理團(tuán)隊(duì)之外還參與了產(chǎn)品的工作，同時(shí)也負(fù)責(zé)交互、視覺、用研等多項(xiàng)工作。

所以，一位優(yōu)秀的設(shè)計(jì)師不是只把界面做的好看而已，他一定是具備界面設(shè)計(jì)之外的項(xiàng)目推動(dòng)能力和團(tuán)隊(duì)建設(shè)能力。總而言之，我們要從宏觀的角度去看待設(shè)計(jì)崗位，假如你未來(lái)想成為一名UED或UXD，甚至是全棧設(shè)計(jì)師，那從現(xiàn)在開始就應(yīng)該把“設(shè)計(jì)做好視覺”的心態(tài)，轉(zhuǎn)變?yōu)椤霸O(shè)計(jì)是用來(lái)解決產(chǎn)品問(wèn)題”的心態(tài)。

去掉開發(fā)的工作之后，這就是把一個(gè)用戶需求，或者一個(gè)點(diǎn)子，變成最終的產(chǎn)品。每一層都是環(huán)環(huán)相扣的，涉及到各種決策，我們做什么、不做什么、用什么組件、放什么位置。每一個(gè)流程上的每一個(gè)決策，都會(huì)影響到產(chǎn)品最終的樣子和用戶使用產(chǎn)品的樣子。

以上是我站在用戶體驗(yàn)五要素的維度對(duì)產(chǎn)品設(shè)計(jì)從0到1的梳理，希望為大家?guī)?lái)一些啟發(fā)。

隨著國(guó)內(nèi)互聯(lián)網(wǎng)企業(yè)的發(fā)展沉淀，用戶體驗(yàn)領(lǐng)域也會(huì)變得異常重要，在殘酷的市場(chǎng)競(jìng)爭(zhēng)環(huán)境中，產(chǎn)品體驗(yàn)的差異有時(shí)對(duì)于產(chǎn)品本身而言將會(huì)是致命的。尤其是牽涉到使用的核心流程，比如支付流程體驗(yàn)差，那將是產(chǎn)品終結(jié)的罪魁禍?zhǔn)住?/p>

同時(shí)，互聯(lián)網(wǎng)團(tuán)隊(duì)也應(yīng)該對(duì)于用戶體驗(yàn)保持好克制，不可一味的盲從。比如因?yàn)殡S便一個(gè)人，對(duì)界面設(shè)計(jì)提出幾個(gè)改進(jìn)問(wèn)題，你不經(jīng)過(guò)調(diào)研和思考就盲目遵從，最后上線也沒有得到太多好評(píng)，同時(shí)還浪費(fèi)了開發(fā)資源，所以說(shuō)，設(shè)計(jì)可以經(jīng)不起夸獎(jiǎng)，但要經(jīng)得起考驗(yàn)。如果直接從表現(xiàn)層開始做產(chǎn)品，那必定會(huì)把產(chǎn)品推向一個(gè)危險(xiǎn)的境地。

希望對(duì)你有所幫助~下次見！

本文由 @h梓暄 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議