談到 B 端組件，很多人的印象是多且雜，想要全面準(zhǔn)確的熟悉這些它們，需要我們對(duì)它有個(gè)合理的歸納總結(jié)?？赡苊總€(gè)人會(huì)從不同的視角去做這件事情，我一般是按照使用場(chǎng)景去對(duì)組件分類整理。
下面我們根據(jù)這個(gè)分類框架來(lái)逐個(gè)聊聊這些組件。
說(shuō)到基礎(chǔ)組件，我想再將其細(xì)分成兩個(gè)大類：一類是通用組件；一類是柵格/導(dǎo)航。怎么去更深刻的理解這兩類的區(qū)別呢，我們可以打個(gè)這樣的形象比方：
通過(guò)這個(gè)比方我們不難理解，柵格/導(dǎo)航是先給頁(yè)面定下了基本框架，而通用組件則是在這個(gè)框架基礎(chǔ)上搭建頁(yè)面的所用到基本元素。
常見(jiàn)通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來(lái)似乎很簡(jiǎn)單，但卻是決定產(chǎn)品品牌調(diào)性、界面細(xì)節(jié)品質(zhì)的重要因素，在設(shè)計(jì)過(guò)程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談?wù)勥@三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產(chǎn)品的主要色調(diào)，在選取時(shí)應(yīng)當(dāng)優(yōu)先選擇品牌色，但有一點(diǎn)要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調(diào)，則盡量考慮另選取一個(gè)冷色系作為主色，原因有兩點(diǎn)：一是為了避免和警告、錯(cuò)誤色沖突，產(chǎn)生歧義；二是冷色系帶有商務(wù)、專業(yè)、冷靜的情感，更符合 B 端產(chǎn)品調(diào)性。
同時(shí)主色選取應(yīng)避免高亮、熒光色、灰調(diào)高的顏色。
主色的應(yīng)用
主色在設(shè)計(jì)中常見(jiàn)的應(yīng)用包括可交互、選中狀態(tài)、可視化、插圖、圖標(biāo)等場(chǎng)景。
② 功能色
功能色主要用于頁(yè)面表征狀態(tài)，常見(jiàn)有成功色、警告色、報(bào)錯(cuò)色等。
成功色
主要用于操作結(jié)果成功提示以及標(biāo)簽配色等。
警告色
主要用于警告提醒功能以及標(biāo)簽配色等。
報(bào)錯(cuò)色
主要用于系統(tǒng)報(bào)錯(cuò)提示、圓點(diǎn)提示、以及標(biāo)簽配色等。
③ 中性色
中性色在頁(yè)面設(shè)計(jì)中應(yīng)用非常廣泛，從線條到文字再到圖形等等都可以見(jiàn)到它的影子。
Tips：無(wú)論我們主色調(diào)是什么，中性色在調(diào)色時(shí)建議可加入適量的藍(lán)色調(diào)，可讓頁(yè)面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個(gè)顏色的梯度呢？（這里主要指對(duì)主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當(dāng)我們需要淺色，通過(guò)調(diào)整白色遮罩透明度得到合適顏色；而當(dāng)我們需要深色時(shí)，則通過(guò)調(diào)整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優(yōu)點(diǎn)是后續(xù)如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規(guī)范包含字體、字號(hào)、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規(guī)范即可：
② 字號(hào)
不同于 C 端，B 端在字號(hào)選擇上應(yīng)當(dāng)盡量保持克制。研究表明，Web 端上正文字號(hào)為 14 時(shí)，可以帶來(lái)最佳閱讀體驗(yàn)。因此在字號(hào)選取上應(yīng)盡量?jī)?yōu)先選取 14 號(hào)字。如果想要區(qū)分文字層級(jí)，優(yōu)先級(jí)從高到低的手法應(yīng)該是顏色、字重、字號(hào)，也就是說(shuō)一般盡量不采用字號(hào)大小區(qū)分文字層級(jí)。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過(guò)公式算出行高非整數(shù)或非偶數(shù)，可就近取偶整數(shù)。
間距
關(guān)于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優(yōu)先考慮 8px 的倍數(shù)作為間距值，在一些特殊場(chǎng)景可采用 4px 的倍數(shù)間距值。
分割線
分割線寬度一般統(tǒng)一為 1px 即可，同時(shí)注意顏色不可過(guò)深，以免干擾主體信息。如果需要不同層級(jí)分割線，可用顏色深淺來(lái)區(qū)分。
圓角
圓角大小一般根據(jù)使用場(chǎng)景控制在 2-3 個(gè)梯度即可，既不能全部統(tǒng)一一個(gè)圓角值，同時(shí)也不適合出現(xiàn)過(guò)多圓角值。同時(shí)圓角值不要過(guò)大，建議控制在 2-6px，以符合 B 端產(chǎn)品嚴(yán)謹(jǐn)專業(yè)調(diào)性。
按鈕
這里從按鈕的大小/狀態(tài)/排放位置幾個(gè)緯度來(lái)講。
① 按鈕尺寸
按鈕高度一般情況下可以設(shè)置 3-4 種尺寸按鈕，足以滿足各種使用場(chǎng)景。至于按鈕寬度，我們一般定義一個(gè)最小值，當(dāng)超過(guò)最小值時(shí)，可設(shè)置 padding 值，按鈕寬度根據(jù)內(nèi)容自適應(yīng)。
② 按鈕狀態(tài)
操作按鈕過(guò)程中，按鈕會(huì)呈現(xiàn)不同的交互狀態(tài)。
③ 按鈕位置
對(duì)于主次按鈕組合，主次按鈕排放位置應(yīng)該怎么規(guī)定呢？可分為兩種場(chǎng)景：一是當(dāng)為從左到右閱讀順序時(shí)，主要按鈕應(yīng)當(dāng)排在次要按鈕左側(cè)。二是當(dāng)為從右到左閱讀順序時(shí)，主要按鈕應(yīng)當(dāng)排在次要按鈕右側(cè)。而當(dāng)一些特殊場(chǎng)景與這個(gè)原則沖突時(shí)，應(yīng)權(quán)衡優(yōu)先級(jí)做出取舍。
熟悉通用組件后，我們要通柵格/導(dǎo)航來(lái)確定產(chǎn)品頁(yè)面框架。
柵格
柵格可以有效地保證設(shè)計(jì)的一致性、讓頁(yè)面布局更具規(guī)律，并提高團(tuán)隊(duì)協(xié)作效率。應(yīng)該如何設(shè)計(jì)柵格呢？
① 柵格區(qū)域的劃定
我們一般習(xí)慣將頁(yè)面從下到上劃分為背景層、全局控制層、內(nèi)容層、臨時(shí)層，而柵格區(qū)應(yīng)當(dāng)用在內(nèi)容層。以下為常見(jiàn)幾種頁(yè)面布局柵格區(qū)的劃定。
② 柵格自適應(yīng)規(guī)則
隨著頁(yè)面寬度變化，一般來(lái)說(shuō)是通過(guò)欄寬變化實(shí)現(xiàn)自適應(yīng)。
③ 柵格欄數(shù)的確定
根據(jù)頁(yè)面內(nèi)容豐富程度，柵格欄數(shù)一般定 12 或者 24 欄，考慮到 B 端產(chǎn)品功能往往比較復(fù)雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導(dǎo)航
導(dǎo)航可分為全局導(dǎo)航與局部導(dǎo)航。
① 全局導(dǎo)航
全局導(dǎo)航包含頂部導(dǎo)航、側(cè)邊導(dǎo)航、混合導(dǎo)航。
這三種導(dǎo)航樣式各具特點(diǎn)，應(yīng)結(jié)合產(chǎn)品特性選擇合適的導(dǎo)航樣式。這里要注意的一點(diǎn)是，當(dāng)產(chǎn)品可用性和用戶體驗(yàn)產(chǎn)生沖突時(shí)，應(yīng)優(yōu)先保證產(chǎn)品可用性。
② 局部導(dǎo)航
局部導(dǎo)航包含面包屑、標(biāo)簽頁(yè)、步驟條、分頁(yè)器。
面包屑
面包屑導(dǎo)航的作用是告訴用戶當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置以及父子級(jí)頁(yè)面間的關(guān)系，并且可以快速回到上幾級(jí)導(dǎo)航。
標(biāo)簽頁(yè)
標(biāo)簽頁(yè)可以幫助用戶在一個(gè)頁(yè)面實(shí)現(xiàn)快速切換不同內(nèi)容，提升單個(gè)頁(yè)面內(nèi)容擴(kuò)展性。可分為基本樣式、標(biāo)簽樣式、卡片樣式。
步驟條
當(dāng)任務(wù)復(fù)雜或者存在先后關(guān)系時(shí)，可將其分解成一系列步驟，這里就會(huì)用上步驟條。步驟條是引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條，作用包含 3 點(diǎn)：一是讓用戶對(duì)操作流程長(zhǎng)度和步驟有個(gè)預(yù)期，二是明確知道自己目前所在步驟，三是可以對(duì)用戶的任務(wù)完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當(dāng)步驟條中有操作難度偏大的內(nèi)容時(shí)，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經(jīng)完成了大部分簡(jiǎn)單操作，后面碰到高難度操作后，出于損失厭惡心理，不會(huì)輕易放棄操作。
分頁(yè)器
當(dāng)有大量?jī)?nèi)容需要展現(xiàn)時(shí)進(jìn)行分頁(yè)加載處理，分頁(yè)器作用是可以讓用戶清楚的知道自己所要瀏覽的內(nèi)容有多少頁(yè)、當(dāng)前所在頁(yè)碼、快捷前往目標(biāo)頁(yè)碼。
分頁(yè)器一般分為迷你、簡(jiǎn)易、自定義三種樣式。
妙用分頁(yè)器小 Tips：當(dāng)表格中需要對(duì)數(shù)據(jù)全選操作時(shí)，為了提高操作效率，可將自定義每頁(yè)跳數(shù)調(diào)到最大。例如一共 100 條數(shù)據(jù)，默認(rèn)每頁(yè) 10 條數(shù)據(jù)，要完成全選需要點(diǎn)擊 9 次翻頁(yè)，10 次全選（表格的全選框勾選后一般只選中當(dāng)前頁(yè)面全部數(shù)據(jù)，而不是所有頁(yè)面總數(shù)據(jù)），當(dāng)把每頁(yè)條數(shù)調(diào)整為 50 后，則只需翻頁(yè) 1 次，點(diǎn)擊 2 次全選即可。
到這里關(guān)于 B 端的基礎(chǔ)組件就全部梳理完了，后續(xù)我們就來(lái)揭開(kāi)展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來(lái)源：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
SaaS，英文全稱 Software as a Service，意思為軟件即服務(wù)。是通過(guò)網(wǎng)絡(luò)提供軟件服務(wù)，可以理解為一種軟件交付模式，因?yàn)榻桓赌Ｊ降牟煌矝Q定了和傳統(tǒng)軟件的差別。
在Saas之前傳統(tǒng)軟件需要購(gòu)買后本地化部署，兩者最大的區(qū)別在于，賣軟件是將軟件作為一個(gè)軟件實(shí)體賣給客戶了；而賣SaaS 軟件的所有權(quán)還在廠商所有，提供的是“軟件服務(wù)”。
Saas模式的提出者是Salesforce創(chuàng)始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時(shí)候提出。有兩個(gè)原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統(tǒng)軟件部署實(shí)施交付的失敗率非常高；
2. 軟件的售賣價(jià)格非常高，很多中型、中小企業(yè)有需求但無(wú)法承擔(dān)高昂的費(fèi)用。
基于以上兩個(gè)痛點(diǎn)及當(dāng)時(shí)的現(xiàn)狀賣軟件給企業(yè)造成的影響，已經(jīng)形成了惡性循環(huán)，市場(chǎng)受到嚴(yán)重的阻礙（據(jù)Gartner 高德納公司（美國(guó)咨詢公司）的調(diào)查研究曾表明：在所有CRM項(xiàng)目中大約55%沒(méi)有達(dá)到軟件用戶的完整交付和預(yù)期目的，通俗的說(shuō)是實(shí)施失敗。）
從賣軟件變成賣服務(wù)，其中的技術(shù)方式的改變、交易模式的改變，促成了軟件時(shí)代的變革，對(duì)于傳統(tǒng)軟件公司來(lái)說(shuō)，是一次大革命。原來(lái)賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務(wù)后，這筆錢就不能在短周期內(nèi)一次性收了，現(xiàn)行的SaaS模式通常是按照用戶的使用年費(fèi)來(lái)收取。
兩者差別在于，軟件商需要先主動(dòng)改變可以短期的一次性高收入，從短期收入向長(zhǎng)期收入的轉(zhuǎn)變；
所以SaaS是長(zhǎng)期主義的事情。
失敗的Saas生意會(huì)出現(xiàn)一個(gè)問(wèn)題：把長(zhǎng)期生意做成了短期不可持續(xù)的生意；而短期生意帶來(lái)的就是經(jīng)營(yíng)成本的劇增，導(dǎo)致生意不可持續(xù)。
所以，Saas模式?jīng)Q定了需要客戶長(zhǎng)期使用你的產(chǎn)品，才可以長(zhǎng)期可持續(xù)賺錢，也就是通常意義上的客戶終身價(jià)值（LTV）。
那如何做到客戶長(zhǎng)期使用，其實(shí)只有一種方式：長(zhǎng)期為客戶創(chuàng)造價(jià)值，做到幫客戶成功（幫助客戶的業(yè)務(wù)成功），從而持續(xù)續(xù)約。
吳昊老師，在《SaaS創(chuàng)業(yè)路線圖》中的講到：SaaS的本質(zhì)是續(xù)費(fèi)。這個(gè)觀點(diǎn)我比較贊同，SaaS的經(jīng)營(yíng)本質(zhì)在于可持續(xù)。
那么，決定SaaS的成功因素是什么呢？
我認(rèn)為決定性因素有三個(gè)方面：產(chǎn)品強(qiáng)大且靈活、用戶體驗(yàn)優(yōu)質(zhì)、服務(wù)的有效支持。產(chǎn)品強(qiáng)大和服務(wù)的有效支持不言而喻，具體我們來(lái)聊聊用戶體驗(yàn)的價(jià)值。
傳統(tǒng)軟件在一次交付實(shí)施后，客戶付80%的錢，剩下的20%能不能收回來(lái)就不那么重要。但SaaS模式，客戶每年進(jìn)行續(xù)費(fèi)，若產(chǎn)品使用及用戶體驗(yàn)滿意度低，帶來(lái)的影響和后果可能是客戶終止續(xù)費(fèi)。
因此，和傳統(tǒng)軟件相比SaaS的用戶體驗(yàn)的價(jià)值就更為重要，它直接影響SaaS的續(xù)費(fèi)和流失。
相信“用戶體驗(yàn)”這個(gè)詞大家應(yīng)該非常熟悉，接下來(lái)我們從新認(rèn)識(shí)什么是用戶體驗(yàn)？
官方的定義是：用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種主觀感受。“用戶體驗(yàn)”這一概念是唐納德·諾曼（Donald Norman）在20世紀(jì)90年代中期提出的。產(chǎn)品大神俞軍老師說(shuō)過(guò)用戶體驗(yàn)的本質(zhì)是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認(rèn)為是幫助產(chǎn)品和用戶：最小成本滿足需求，同時(shí)創(chuàng)造「美·好」體驗(yàn)。
怎么理解，因?yàn)橛脩趔w驗(yàn)是滿足商業(yè)目標(biāo)的一種行為手段，我們來(lái)看下用戶體驗(yàn)的需要考慮的雙邊關(guān)系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業(yè)最高效的服務(wù)用戶。
企業(yè)的本質(zhì)就是創(chuàng)造商業(yè)價(jià)值，商業(yè)價(jià)值來(lái)源于用戶價(jià)值，同時(shí)考慮實(shí)現(xiàn)商業(yè)價(jià)值的效果和效率。我們常常會(huì)聽(tīng)到“投入產(chǎn)出比”或者叫“投資回報(bào)率”；對(duì)于商業(yè)行為中的一環(huán)用戶體驗(yàn)也如此。
所以，用戶體驗(yàn)的核心的就是：平衡用戶最小成本滿足需求，及企業(yè)最小成本服務(wù)用戶。完成價(jià)值交換同時(shí)，滿足持續(xù)性。
由此，可以看出在SaaS的產(chǎn)品設(shè)計(jì)中，用戶體驗(yàn)其實(shí)承擔(dān)著一個(gè)比較重要的責(zé)任，因?yàn)樗P(guān)系到成本的邊際和規(guī)?；挠绊?，一頭是產(chǎn)品一頭是用戶。
那么作為產(chǎn)品體驗(yàn)設(shè)計(jì)師，我們需要具備一定成本意識(shí)，做好“成本管控的設(shè)計(jì)”，更本質(zhì)來(lái)說(shuō)設(shè)計(jì)過(guò)程中我們應(yīng)該：把復(fù)雜留給自己，把簡(jiǎn)單留給用戶。
因?yàn)槲覀冊(cè)谠O(shè)計(jì)的過(guò)程中把握產(chǎn)品的交互方式、使用流程，在用戶認(rèn)知和效率層面有較強(qiáng)的把控空間，充分做到的以“用戶體驗(yàn)”出發(fā)；那后續(xù)銷售、交付、客戶成功的全鏈路服務(wù)過(guò)程的學(xué)習(xí)效率和服務(wù)效率會(huì)呈指數(shù)級(jí)上升。
產(chǎn)品設(shè)計(jì)，應(yīng)該把復(fù)雜留給自己、把簡(jiǎn)單留給用戶。
關(guān)于用戶體驗(yàn)，就不得不介紹一下“ 用戶體驗(yàn)要素”模型，個(gè)人認(rèn)為這是所有產(chǎn)品經(jīng)理和設(shè)計(jì)師可以貫穿整個(gè)職業(yè)生涯中都需要經(jīng)常性、反復(fù)對(duì)照思考的設(shè)計(jì)模型。
用戶體驗(yàn)設(shè)計(jì)的價(jià)值遠(yuǎn)不止于讓產(chǎn)品的視覺(jué)、顏值提升，設(shè)計(jì)更大的價(jià)值在于深入業(yè)務(wù)、洞察用戶，幫助業(yè)務(wù)梳理產(chǎn)品信息架構(gòu)、任務(wù)流程、交互體驗(yàn)。
構(gòu)建系統(tǒng)的用戶使用方式和工作模式，從而達(dá)成用戶目標(biāo)；通過(guò)達(dá)成用戶目標(biāo)完成價(jià)值交換、以此完成商業(yè)交易達(dá)成商業(yè)目標(biāo)。
回顧Saas的商業(yè)模式，Saas的商業(yè)模式?jīng)Q定我們提供的這個(gè)服務(wù)不是靠人海戰(zhàn)術(shù)，因?yàn)镾aas軟件即服務(wù)的含義是所提供的軟件就等于提供自助化的服務(wù)，應(yīng)該提供的是自助服務(wù)、開(kāi)箱即用、開(kāi)箱易用的服務(wù)。
那么Saas服務(wù)設(shè)計(jì)策略上，應(yīng)該從降低系統(tǒng)使用門檻和提升用戶的自主化服務(wù)兩維度出發(fā)，根據(jù)這兩個(gè)核心維度，我們構(gòu)建了每刻SaaS產(chǎn)品體驗(yàn)的設(shè)計(jì)策略模型。
第一，設(shè)計(jì)“系統(tǒng)服務(wù)自動(dòng)化”，這里的服務(wù)是功能使用的操作，符合“低認(rèn)知、易上手”，那么從設(shè)計(jì)整個(gè)體系 需要遵守“易發(fā)現(xiàn)、低認(rèn)知、高效率、有溫度”的設(shè)計(jì)原則展開(kāi)，以用戶使用行為出發(fā)設(shè)計(jì)符合用戶心智認(rèn)知的功能形態(tài)和交互流程。
第二，設(shè)計(jì)“系統(tǒng)幫助自助化”，什么意思在全系統(tǒng)中構(gòu)建幫助引導(dǎo)的自助化體系，用戶需要幫助的時(shí)候提供人性化的引導(dǎo)幫助，我們從發(fā)現(xiàn)的維度、認(rèn)知的維度，系統(tǒng)認(rèn)知的維度，綜合考慮用戶系統(tǒng)的幫助引導(dǎo)。
設(shè)計(jì)原則，是指導(dǎo)我們做正確設(shè)計(jì)的方針。
設(shè)計(jì)原則的建立基于對(duì)用戶使用體驗(yàn)全流程的基礎(chǔ)上，以每刻報(bào)銷的設(shè)計(jì)原則，圍繞用戶旅程、認(rèn)知及行為出發(fā)構(gòu)建。
1. 當(dāng)用戶接觸系統(tǒng)從看出發(fā)，看見(jiàn)系統(tǒng)界面、發(fā)現(xiàn)操作入口；（發(fā)現(xiàn)）
2. 帶著操作任務(wù)用戶進(jìn)入系統(tǒng)、看見(jiàn)導(dǎo)航、看見(jiàn)文字、看見(jiàn)按鈕，都需要理解認(rèn)知；（認(rèn)知）
3.用戶從何開(kāi)始、如何操作，在完成整個(gè)業(yè)務(wù)事項(xiàng)的過(guò)程需要進(jìn)行填寫、選擇、交互過(guò)程就產(chǎn)生了生產(chǎn)效率問(wèn)題；（操作）
4. 當(dāng)出現(xiàn)誤操作或系統(tǒng)出錯(cuò)時(shí)，需要系統(tǒng)糾錯(cuò)提醒、容錯(cuò)的設(shè)計(jì)、幫助及引導(dǎo)，當(dāng)完成整個(gè)業(yè)務(wù)事項(xiàng)后，用戶產(chǎn)生一種的情緒感受，這個(gè)感受即是印象、評(píng)價(jià)、口碑。（感受）
緊緊圍繞產(chǎn)品業(yè)務(wù)、用戶處理特性業(yè)務(wù)的基礎(chǔ)上，以終為始，回歸到用戶、業(yè)務(wù)、系統(tǒng)進(jìn)行思考?xì)w納的產(chǎn)物。
設(shè)計(jì)策略，是指導(dǎo)我們?nèi)绾芜M(jìn)行做正確的設(shè)計(jì)。
在SaaS產(chǎn)品分類上，常見(jiàn)的SaaS產(chǎn)品主要分為3類，行業(yè)SaaS、職能SaaS和通用SaaS。
每刻報(bào)銷產(chǎn)品從核心業(yè)務(wù)來(lái)說(shuō)是職能類Saas，從提升財(cái)務(wù)人員報(bào)銷的發(fā)票審批、費(fèi)用審核等效率展開(kāi)，但報(bào)銷的來(lái)源又源于普通員工的業(yè)務(wù)報(bào)銷，業(yè)務(wù)報(bào)銷發(fā)生又和所在行業(yè)的費(fèi)用發(fā)生行為特征有一定相關(guān)性，所以是結(jié)合職能和行業(yè)Saas的屬性，從用戶體驗(yàn)的設(shè)計(jì)上需要考慮不同角色用戶對(duì)于系統(tǒng)的業(yè)務(wù)理解、功能交織使用的不同訴求，這個(gè)設(shè)計(jì)過(guò)程探索研究是相對(duì)比較有難度的，以后有機(jī)會(huì)可以展開(kāi)聊。
下圖是每刻系統(tǒng)經(jīng)過(guò)6年過(guò)程中統(tǒng)計(jì)的問(wèn)題分布，分布比率呈現(xiàn)：認(rèn)知問(wèn)題 60%，效率問(wèn)題 30%、情感問(wèn)題10%。
我們?cè)谠L談客戶調(diào)研發(fā)現(xiàn)，企業(yè)服務(wù)雖然客戶已經(jīng)用了好幾年我們的系統(tǒng)，但財(cái)務(wù)部門還是經(jīng)常性會(huì)碰到新入職員工的系統(tǒng)使用問(wèn)題，甚至財(cái)務(wù)部門來(lái)新人時(shí) 以前系統(tǒng)發(fā)生的使用問(wèn)題會(huì)從新出現(xiàn)一遍，所以企業(yè)服務(wù)有一個(gè)現(xiàn)象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個(gè)遇到的問(wèn)題就是認(rèn)知問(wèn)題，也輔證了我們對(duì)于Saas系統(tǒng)認(rèn)知問(wèn)題是用戶體驗(yàn)的第一大問(wèn)題。
幫助體系建立可以從系統(tǒng)層面體系化有效降低用戶使用的認(rèn)知成本，圍繞用戶角色的核心業(yè)務(wù)操作使用流程、洞察用戶旅程上的疑惑和障礙點(diǎn)。用戶首次進(jìn)入系統(tǒng)要建立介紹和引導(dǎo)，足夠簡(jiǎn)單、降低陌生感，來(lái)減少人力咨詢回復(fù)的投入。
相比人，系統(tǒng)的自助化和自動(dòng)化的服務(wù)，更具有復(fù)用性和規(guī)模效應(yīng)。
SaaS的商業(yè)模式，按年使用賬號(hào)來(lái)收費(fèi)和傳統(tǒng)軟件的付費(fèi)模式區(qū)別非常大，因?yàn)樾枰戎鲃?dòng)放棄自己本來(lái)可以唾手可得的收入，從短期收入向長(zhǎng)期收入的轉(zhuǎn)變。
在SaaS模式的時(shí)代，商業(yè)模式?jīng)Q定其必須關(guān)注客戶成功、客戶持續(xù)續(xù)費(fèi)、LTV客戶長(zhǎng)期價(jià)值。
SaaS的產(chǎn)品更需要重視用戶體驗(yàn)，用戶體驗(yàn)的優(yōu)劣決定其產(chǎn)品的長(zhǎng)期發(fā)展，SaaS的用戶體驗(yàn)設(shè)計(jì)則關(guān)注用戶使用認(rèn)知和行為效率，以及系統(tǒng)服務(wù)自主化設(shè)計(jì)和系統(tǒng)幫助自動(dòng)化設(shè)計(jì)，用戶體驗(yàn)將在產(chǎn)品成長(zhǎng)期后半程，逐漸成為SaaS商業(yè)模式不可或缺的產(chǎn)品競(jìng)爭(zhēng)力。
作者：周大蝦07 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
圖標(biāo)在界面設(shè)計(jì)中，雖然很小，但是卻是界面中重要組成部分之一。通過(guò)將顯示物體圖形化的形式，將功能本意高度濃縮成一個(gè)圖標(biāo)，再通過(guò)視覺(jué)隱喻更快地讓用戶理解功能，同時(shí)圖形與文字相比，圖形更加生動(dòng)形象，視覺(jué)能力更強(qiáng)、更便于記憶，用戶可以根據(jù)圖形快速定位功能位置。而順著時(shí)代的發(fā)展，圖標(biāo)不再僅僅以工具的形式出現(xiàn)，更多的起到裝飾頁(yè)面，也不斷延伸出不同的圖標(biāo)類型與圖標(biāo)設(shè)計(jì)風(fēng)格。
圖形與復(fù)雜的文字相比，更加簡(jiǎn)潔，相應(yīng)的識(shí)別效率也會(huì)更高。圖標(biāo)可以將復(fù)雜的文字描述高度濃縮成一個(gè)圖標(biāo)，通過(guò)視覺(jué)隱喻的方式讓用戶聯(lián)想到現(xiàn)實(shí)生活中的物體，更直觀地呈現(xiàn)圖標(biāo)代表的功能，更快理解功能的意義
1.2 減輕頁(yè)面負(fù)擔(dān)
像一些通用常見(jiàn)的圖標(biāo)，如搜索、播放按鈕、更多等，僅需要一個(gè)圖標(biāo)就能清晰地傳遞功能意義給用戶，省文字的描述，節(jié)省更多的頁(yè)面空間與閱讀壓力。
1.3 更快定位功能位置
圖標(biāo)與文字相比有更豐富的表現(xiàn)形式與顏色，所以視覺(jué)沖擊也就更強(qiáng)，也能更快地被識(shí)別出來(lái)，當(dāng)用戶熟悉了產(chǎn)品后，只需要通過(guò)圖標(biāo)就能快速找到想要的功能，當(dāng)功能位置發(fā)生變化時(shí)，不需再重新閱讀枯燥的文字找到對(duì)應(yīng)的功能，只需從圖標(biāo)形狀、顏色上區(qū)別，找到對(duì)應(yīng)的功能。
2.裝飾層面
2.1 傳遞品牌調(diào)性
隨著互聯(lián)網(wǎng)的發(fā)展，同類型的產(chǎn)品越來(lái)越多，要在各個(gè)產(chǎn)品中突圍，除好用的功能外還要有特色的外觀。在圖標(biāo)中融入能代表產(chǎn)品品牌的符號(hào)，強(qiáng)化品牌調(diào)性，保持圖標(biāo)的獨(dú)特性，給用戶留下深刻的印象，一看圖標(biāo)就知道是哪個(gè)產(chǎn)品。
2.2 增強(qiáng)產(chǎn)品吸引力
如今用戶對(duì)產(chǎn)品的要求除了要有好用、有用的功能外，還希望有更好的視覺(jué)享受。一組好看、有趣的圖標(biāo)可以帶給用戶更好的第一印象，增強(qiáng)產(chǎn)品對(duì)用戶的吸引力。
2.3 渲染氣氛
根據(jù)不同的節(jié)日或運(yùn)營(yíng)活動(dòng)，設(shè)計(jì)相應(yīng)氛圍的圖標(biāo)，幫助產(chǎn)品渲染節(jié)日氛圍或加強(qiáng)用戶對(duì)產(chǎn)品主題運(yùn)營(yíng)活動(dòng)的感知力度
二、圖標(biāo)繪制的基本原則
1. 可識(shí)別性
圖標(biāo)與文字在一定程度上起到相同的作用，都是通過(guò)特定的表現(xiàn)形式來(lái)傳達(dá)某種信息給用戶。順著時(shí)代發(fā)展，圖標(biāo)的設(shè)計(jì)更精細(xì)化，產(chǎn)生了更多的設(shè)計(jì)風(fēng)格，但圖標(biāo)的本質(zhì)還是沒(méi)變的，是用戶進(jìn)入功能的入口。因此，一個(gè)能被用戶快速識(shí)別、快速理解的圖標(biāo)相當(dāng)重要，是圖標(biāo)設(shè)計(jì)的基本要求。我們繪制圖標(biāo)時(shí)要盡量去掉輔助、無(wú)用的元素，保留最清晰、直接、有代表性的元素。
2. 風(fēng)格統(tǒng)一
設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)，除了會(huì)根據(jù)產(chǎn)品類型、用戶群體、品牌調(diào)性等因素決定使用哪種圖標(biāo)風(fēng)格外，還要根據(jù)圖標(biāo)的具體使用位置，因此在一個(gè)產(chǎn)品中，常常會(huì)出現(xiàn)多種風(fēng)格類型的圖標(biāo)，而風(fēng)格統(tǒng)一指的是在某個(gè)特定功能模塊內(nèi)的圖標(biāo)風(fēng)格要保持一致，是面性的圖標(biāo)就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小統(tǒng)一
圓形、正方形、三角形，在這三個(gè)圖形雖然高度相同，但是整體上三個(gè)圖形的視覺(jué)重量并不相同。在實(shí)際的操作中，界面圖標(biāo)不會(huì)由單一的形狀組合，所以形狀各異導(dǎo)致每一個(gè)圖標(biāo)的視覺(jué)體積都會(huì)有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計(jì)中，我通常會(huì)利用正方形來(lái)輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個(gè)方向缺得越多，就往那個(gè)方向移動(dòng)一點(diǎn)。
4. 色彩統(tǒng)一
色彩的統(tǒng)一指的是圖標(biāo)色彩在飽和度與明度上保持特征統(tǒng)一，數(shù)值在一定的范圍內(nèi)發(fā)生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標(biāo)，通常使用的都是產(chǎn)品的主題色，而多彩圖標(biāo)，常會(huì)以主題色為主，拓展出臨近色、相似色、對(duì)比色，目前市面上大多數(shù)的圖標(biāo)顏色會(huì)使用同類色與鄰近色。對(duì)于飽和度與明度的調(diào)節(jié)，我通過(guò)利用灰度模式進(jìn)行輔助，使圖標(biāo)視覺(jué)更統(tǒng)一柔和，不會(huì)出現(xiàn)其中一個(gè)亮眼或暗沉。
5. 占比統(tǒng)一
5.1 正負(fù)形占比統(tǒng)一
正負(fù)形的合理使用是圖標(biāo)能否傳達(dá)準(zhǔn)確意思的關(guān)鍵，因此也是常會(huì)出現(xiàn)的組成元素。在繪制圖標(biāo)的正負(fù)形，注意保持占比統(tǒng)一，其中某個(gè)圖形正負(fù)形太大或太小，會(huì)顯得突兀、別扭，失去統(tǒng)一性，界面整體質(zhì)感會(huì)大大降低。
5.2 顏色占比統(tǒng)一
在繪制圖標(biāo)時(shí)，確定圖標(biāo)中的主色和輔色，繪制時(shí)盡量保證主色和輔色占比相同，保持圖標(biāo)的統(tǒng)一性。
6. 疏密統(tǒng)一
有規(guī)律地將線條組織在一起，利于形成統(tǒng)一的視覺(jué)風(fēng)格。同時(shí)，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標(biāo)，縮小后反而會(huì)影響識(shí)別。同時(shí)，給圖標(biāo)留出一些空間，使線與線之間不會(huì)太擠，增強(qiáng)圖標(biāo)的呼吸感。
安利一個(gè)國(guó)外的圖標(biāo)大神Myicons?，簡(jiǎn)單的線性圖標(biāo)一樣可以很精致。
三、不同風(fēng)格的圖標(biāo)
目前市面上的圖標(biāo)主要有四種類型，分別是：線性圖標(biāo)、面性圖標(biāo)、寫實(shí)擬物圖標(biāo)和三維立體圖標(biāo)。而不同的圖標(biāo)中組合的元素都會(huì)有一些差異，相同類型的圖標(biāo)中也會(huì)有不同的圖標(biāo)風(fēng)格。
1. 線性圖標(biāo)
線性圖標(biāo)主要還是由線性組成，設(shè)計(jì)師可以通過(guò)改變線的粗細(xì)、線的端點(diǎn)、圓角大小或加入一些面性元素在里面來(lái)使線性圖標(biāo)更加豐富、有趣，但整體來(lái)說(shuō)純線性圖標(biāo)更纖細(xì)、簡(jiǎn)潔，使得視覺(jué)沖擊力稍微弱了些。
1.1.1 單色
單色是線性最基礎(chǔ)的表達(dá)方式，這種設(shè)計(jì)風(fēng)格單調(diào)、視覺(jué)沖擊較差，但是制作難度低，設(shè)計(jì)所耗費(fèi)的時(shí)間頁(yè)更斷，因此常常會(huì)出現(xiàn)在個(gè)人中心頁(yè)中，僅需要有圖標(biāo)顯示功能入口，設(shè)計(jì)要求并不高的功能模塊中。
1.1.2 雙色
雙色圖標(biāo)與單色圖標(biāo)相比，視覺(jué)沖擊力更強(qiáng)，應(yīng)用范圍更廣，通常會(huì)融入品牌主色，是除了線面圖標(biāo)外出現(xiàn)在首頁(yè)中的線性圖標(biāo)。因?yàn)殡p色圖標(biāo)可以加入品牌色，增強(qiáng)品牌感的同時(shí)，使圖標(biāo)增加了設(shè)計(jì)感，不會(huì)像單色圖標(biāo)那么單調(diào)乏味，因此雙色圖標(biāo)也會(huì)以“次要功能”的形式出現(xiàn)在首頁(yè)當(dāng)中。
像在“去哪兒旅行App”和“平安銀行App”中，頁(yè)面已經(jīng)存在一組視覺(jué)沖擊、視覺(jué)層級(jí)更高的一組面性圖標(biāo)，但是因?yàn)闃I(yè)務(wù)需求露出更多功能入口，因此就可以使用線性圖標(biāo)這種視覺(jué)沖擊力弱一點(diǎn)的圖標(biāo)搭配，既不會(huì)搶走主視覺(jué)，也能滿足業(yè)務(wù)需求。
1.1.3 斷點(diǎn)圖標(biāo)
斷點(diǎn)圖標(biāo)在目前的app圖標(biāo)設(shè)計(jì)上較少使用。雖然斷點(diǎn)風(fēng)格圖標(biāo)在表達(dá)上有一定的局限性，但是圖標(biāo)設(shè)計(jì)感更強(qiáng)，圖標(biāo)更有趣味性。
斷點(diǎn)圖標(biāo)并不是隨便刪除某個(gè)描點(diǎn)，在斷點(diǎn)的位置選擇上和斷點(diǎn)的大小都是要注意的地方。斷點(diǎn)位置的選擇要注意兩點(diǎn)：
1 ) 保持相同角度，能更好地增強(qiáng)圖標(biāo)的協(xié)調(diào)性，避免造成圖標(biāo)的視覺(jué)混亂降低用戶的視覺(jué)體驗(yàn)。
2 ) 選擇在線的拐角處，利用連續(xù)性原理，在一定的路徑下使這種線的斷裂保持視覺(jué)連貫性，保持圖形整體性。
1.1.4 線面結(jié)合
在原本的線性圖標(biāo)上加入色塊，就會(huì)產(chǎn)生新的設(shè)計(jì)風(fēng)格--線面圖標(biāo)。線面圖標(biāo)比較特殊，圖標(biāo)的視覺(jué)層級(jí)會(huì)隨著圖標(biāo)中包含的色塊大小而變化，色塊越大，視覺(jué)沖擊力也越強(qiáng)。因此在設(shè)計(jì)線面結(jié)合圖標(biāo)時(shí)，要先確定圖標(biāo)在該頁(yè)面中的重要程度，如果是主要功能則將色塊的占比加大。
1.2 線的影響
圖標(biāo)中的線主要由兩個(gè)元素組成，一個(gè)是線的粗細(xì)，一個(gè)是線的端點(diǎn)，而這兩個(gè)元素也是主要控制線性圖標(biāo)的性格。以常用的48px圖標(biāo)盒子為例，常用線的粗細(xì)有2px、3px、4px，圖標(biāo)的線越粗圖標(biāo)越有力量感反之圖標(biāo)越纖細(xì)；而圖標(biāo)的圓角越小時(shí)圖標(biāo)越穩(wěn)重、專業(yè)，像一些辦公軟件、金融產(chǎn)品，圖標(biāo)的圓角就比較小。圓角越大圖標(biāo)越飽滿親和力更強(qiáng)，像一些兒童學(xué)習(xí)類軟件就會(huì)使用大圓角的圖標(biāo)設(shè)計(jì)。
因此，圖標(biāo)的線粗細(xì)與圓角大小，都根據(jù)不同產(chǎn)品類型與目標(biāo)用戶確定。而大多數(shù)線性圖標(biāo)主要有四種基礎(chǔ)造型：纖細(xì)+小圓角、纖細(xì)+大圓角、粗描邊+小圓角/無(wú)圓角、粗描邊+大圓角。
1.2.1 纖細(xì)+小圓角
精致、嚴(yán)謹(jǐn)，多用在銀行、新聞?lì)怉PP。沒(méi)有圓角，會(huì)使圖標(biāo)更加尖銳，對(duì)于銀行類APP會(huì)給人一種威脅，但是太大的圓角，顯得有點(diǎn)輕浮、可愛(ài)，不符合銀行莊嚴(yán)的感覺(jué)，所以稍微添加一些圓角，使圖標(biāo)更有親和力的同時(shí)，也保留一些莊嚴(yán)的感覺(jué)。
1.2.2 纖細(xì)+大圓角
更加精致、有親和力，這種風(fēng)格是目前市面上軟件使用得最多的一種線性圖標(biāo)風(fēng)格。
1.2.3 粗描邊+無(wú)圓角/小圓角
粗曠、個(gè)性、有很強(qiáng)的力量感。更多的用在運(yùn)動(dòng)、汽車這類主要用戶傾向男性的軟件，同時(shí)也會(huì)在一些潮流類電商軟件中出現(xiàn)，凸顯更有個(gè)性的設(shè)計(jì)風(fēng)格。
1.2.4 粗描邊+大圓角
圓潤(rùn)、可愛(ài)、親和力強(qiáng)，常用在偏向兒童的產(chǎn)品
2. 面性圖標(biāo)
面性圖標(biāo)時(shí)軟件使用的最多的一種圖標(biāo)類型，設(shè)計(jì)師通過(guò)改變色塊、圖形圓角、正負(fù)形和底托等元素，讓面性圖標(biāo)呈現(xiàn)不同的設(shè)計(jì)風(fēng)格，但無(wú)論是哪種設(shè)計(jì)風(fēng)格，面性圖標(biāo)設(shè)計(jì)沖擊力相比面性圖標(biāo)更強(qiáng)，因此市面上大多數(shù)核心功能都會(huì)用到面性圖標(biāo)來(lái)提高功能的設(shè)計(jì)層級(jí)，讓功能在頁(yè)面中更加突出。
2.1 扁平風(fēng)格扁平風(fēng)格的圖標(biāo)常為單色圖標(biāo)，圖標(biāo)整體沒(méi)有漸變、高光、陰影等裝飾性設(shè)計(jì)效果，因此更加簡(jiǎn)潔，更突出功能本身，圖標(biāo)功能性更強(qiáng)，圖標(biāo)制作成本低，曾經(jīng)也是風(fēng)靡一時(shí)。但扁平風(fēng)格的圖標(biāo)缺少亮點(diǎn)與制作成本的原因，導(dǎo)致圖標(biāo)同質(zhì)化嚴(yán)重，缺少特點(diǎn)，很難被人記住，因此現(xiàn)在很少被使用。
2.2 漸變色塊
在扁平風(fēng)的基礎(chǔ)上，在色塊上添加漸變色，在保留了扁平圖標(biāo)的功能性外，使圖標(biāo)色彩更加豐富，在不同類型的軟件中都可以使用這種風(fēng)格，算是一個(gè)比較百搭的圖標(biāo)風(fēng)格。同時(shí)漸變色塊也是很多面性圖標(biāo)的組合基礎(chǔ)，在漸變色塊這個(gè)基礎(chǔ)上還可以添加不同的效果形成不同設(shè)計(jì)風(fēng)格。
在設(shè)計(jì)漸變色塊風(fēng)格的圖標(biāo)時(shí)要注意兩點(diǎn)：
1 ) 市面上的app都會(huì)選擇同類色作為漸變色，然后通過(guò)改變顏色的飽和度，使?jié)u變色的明亮對(duì)比更加明顯的同時(shí)，顏色過(guò)渡也更加柔和舒服，使圖標(biāo)更有通透感，增加視覺(jué)沖擊力。
2 ) 在設(shè)計(jì)這種有白色色塊在頂部的圖標(biāo)時(shí)，可以給色塊添加一個(gè)淺淺的透明漸變，讓色塊過(guò)渡自然一些，同時(shí)也可以添加一層淺淺的陰影，增加層次感。
2.3 圖層疊加
圖層疊加風(fēng)格的圖標(biāo)看上去像兩個(gè)透明圖層疊加在一起的感覺(jué)，圖標(biāo)層次感強(qiáng)，細(xì)節(jié)也更加豐富，圖標(biāo)風(fēng)格更新穎、更年輕化，因此如果在設(shè)計(jì)一個(gè)年輕人使用或者希望打造年輕化頁(yè)面感受的時(shí)候，可以嘗試使用圖層疊加風(fēng)格。
繪制圖層疊加風(fēng)格的圖標(biāo)時(shí)要注意：
1 ) 重疊在一起的那個(gè)色塊是通過(guò)布爾運(yùn)算得到的，并不是通過(guò)簡(jiǎn)單的透明圖層得到的。而重疊在一起的那個(gè)色塊也不宜過(guò)于顯眼，畢竟看的是圖標(biāo)的整體。因此可以參考一下“智行火車票”，通過(guò)改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標(biāo)的變化，同時(shí)也不會(huì)是色塊太突兀影響觀感。
2 ) 盡量統(tǒng)一疊加部分圖形與圖標(biāo)之間的占比。
2.4 毛玻璃
毛玻璃是近年最火的一種設(shè)計(jì)風(fēng)格，不僅設(shè)計(jì)風(fēng)格新穎、特別，而且還有很強(qiáng)的質(zhì)感表現(xiàn)，因此不僅在金融產(chǎn)品，還是生鮮產(chǎn)品或票務(wù)產(chǎn)品，都有毛玻璃風(fēng)格的圖標(biāo)。
而在設(shè)計(jì)毛玻璃圖標(biāo)時(shí)，里面也有很多細(xì)節(jié)需要注意：
1 ) 背景模糊效果不需要太大，有一種若隱若現(xiàn)的感覺(jué)就可以。如果調(diào)太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標(biāo)，只需要將圖標(biāo)的主色調(diào)低飽和度后，就可以使用。這樣的好處是不僅讓圖標(biāo)顏色過(guò)渡更加自然，同時(shí)有更多的組合方式、更多的層次。
3 ) 使用邊緣光。毛玻璃圖標(biāo)有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會(huì)被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時(shí)使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細(xì)節(jié)更加豐富。
2.5 晶白風(fēng)格
晶白類圖標(biāo)利用圓角正方形或圓形作為底托再在上面添加一個(gè)主色為白色的圖標(biāo)，然后通過(guò)調(diào)節(jié)透明度、投影、漸變給圖標(biāo)添加一些質(zhì)感，是常見(jiàn)的圖標(biāo)風(fēng)格，也是使用了很久的一種設(shè)計(jì)風(fēng)格。
后面也延伸出了另一種設(shè)計(jì)風(fēng)格圖標(biāo)主題通常不會(huì)是統(tǒng)一的造型，像喜馬拉雅這種圖標(biāo)，圖標(biāo)本身元素復(fù)雜、細(xì)節(jié)較多，形狀也更加不可控，因此用一個(gè)淺色圓形底托，將他們統(tǒng)一起來(lái)。不僅可以將復(fù)雜的圖形統(tǒng)一起來(lái)，還可以添加吸引人眼球的漸變色更好地增加圖標(biāo)的視覺(jué)占比，有更強(qiáng)的視覺(jué)沖擊感。
在繪制晶白風(fēng)格時(shí)，注意兩點(diǎn)：
1 ) 可以適當(dāng)改變底托圖形的形狀，增強(qiáng)差異化。
2 ) 統(tǒng)一光源，越白的地方越亮，注意控制好透明度的變化與角度。
2.6 實(shí)物展示
這類圖標(biāo)會(huì)出現(xiàn)在生鮮類、藥品類、潮流電商類產(chǎn)品中，因?yàn)槭褂脠D標(biāo)很難將這些類型概括起來(lái)，直接使用圖片展示更加直觀，但因?yàn)閳D片細(xì)節(jié)、元素更多更復(fù)雜，如果使用太多會(huì)使圖標(biāo)看起來(lái)很雜亂。
3. 寫實(shí)向圖標(biāo)
寫實(shí)向圖標(biāo)模擬現(xiàn)實(shí)中的物體，更貼近生活，用戶對(duì)這類圖標(biāo)理解能力也更強(qiáng)，繪制難度也更高，繪制時(shí)間也更長(zhǎng)。寫實(shí)向圖標(biāo)除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來(lái)增強(qiáng)實(shí)感。常常用在運(yùn)營(yíng)設(shè)計(jì)上，或用在一些特殊界面模塊從而增強(qiáng)視覺(jué)層級(jí)。
3.1 輕擬物圖標(biāo)
輕擬物圖標(biāo)是最近很好的的設(shè)計(jì)風(fēng)格，但是輕擬物圖標(biāo)出現(xiàn)在界面設(shè)計(jì)上還是比較少的。因?yàn)檩p擬物圖標(biāo)元素比較復(fù)雜，視覺(jué)沖擊力強(qiáng)，放在界面上有可能搶走用戶對(duì)核心內(nèi)容的關(guān)注度，通常會(huì)運(yùn)用在運(yùn)營(yíng)設(shè)計(jì)長(zhǎng)圖、彈窗、核心功能等。
而繪制輕擬物圖標(biāo)，主要注意的是光影的打造。光影主要由這幾個(gè)元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標(biāo)時(shí)，主要注意以下幾點(diǎn)：
1 ) 在繪制輕擬物圖標(biāo)時(shí)，不一定需要使用統(tǒng)一色相中的顏色，可以通過(guò)改變顏色的飽和度明度的對(duì)比和冷暖色的對(duì)比來(lái)營(yíng)造光影，使圖標(biāo)色彩更豐富、對(duì)比更明顯。
2 ) 反光可以使用圖標(biāo)主色的對(duì)比色，降低飽和度，提高明度，運(yùn)用在輕擬物圖標(biāo)邊緣，使邊緣更更清晰，不會(huì)糊在一起，圖標(biāo)整體立體感更強(qiáng)。
3 ) 明暗對(duì)比越明顯，輕擬物圖標(biāo)越顯通透、立體。
3.2 2.5D圖標(biāo)
2.5D曾經(jīng)是很火的一種設(shè)計(jì)風(fēng)格，但是現(xiàn)在已經(jīng)逐漸被輕擬物與建模替代。2.5D圖標(biāo)固定展示了三個(gè)面，有很強(qiáng)的立體感，常常運(yùn)用在科技類的網(wǎng)站設(shè)計(jì)中。
在繪制2.5D風(fēng)格圖標(biāo)時(shí)，要注意：
1)統(tǒng)一好圖標(biāo)的厚度。
3.3 3D圖標(biāo)
隨著時(shí)代進(jìn)步，3D逐漸成為一個(gè)主流的設(shè)計(jì)風(fēng)格。通過(guò)專業(yè)軟件給予了圖形材質(zhì)質(zhì)感、真實(shí)的光影，更加貼近生活真實(shí)物件，同時(shí)還可以配合動(dòng)效的設(shè)計(jì)，有很強(qiáng)的視覺(jué)沖擊力和新鮮感。常常出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中、運(yùn)營(yíng)設(shè)計(jì)中。目前繪制3D圖標(biāo)主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費(fèi)的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒(méi)有oc好，但是還是可以滿足日常工作。
而在繪制3D圖標(biāo)需要注意以下幾點(diǎn)：
1 ) 統(tǒng)一主光源方向。建模里面會(huì)出現(xiàn)很多打光類型，如主光、輔光（有時(shí)不止一個(gè)）、邊緣光等。
2 ) 統(tǒng)一攝像機(jī)位置。攝像機(jī)與物體的距離、角度影響渲染的最終效果。
3 ) 用數(shù)值定義物體大小。建模軟件不像繪圖軟件那樣強(qiáng)調(diào)物體的數(shù)值大小，拉遠(yuǎn)看物體就是小，拉近看就是大，做一個(gè)物體時(shí)還好，但是要做一組3D圖標(biāo)時(shí)，就要定義好物體的大小，使圖標(biāo)更加統(tǒng)一。
四、如何確定使用哪種類型的圖標(biāo)
不同風(fēng)格的圖標(biāo)有著不同的特點(diǎn)，設(shè)計(jì)師要根據(jù)圖標(biāo)放置位置和功能選擇圖標(biāo)類型。其中最有決定性的因素就是圖標(biāo)的重量，而影響圖標(biāo)重量的因素有：占比、顏色、細(xì)節(jié)元素。線性圖標(biāo)在界面中占比較少，因此看起來(lái)會(huì)更加簡(jiǎn)潔，視覺(jué)沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標(biāo)占比更高，視覺(jué)上會(huì)更加飽滿，同時(shí)顏色色塊使圖標(biāo)更加顯眼，視覺(jué)沖擊力得到力增強(qiáng)，使用戶對(duì)圖標(biāo)的感知力更高，是最常用的圖標(biāo)類型，用在各個(gè)重要功能入口上；輕擬物和3D圖標(biāo)除了占比高、顏色豐富，還有各種光影、材質(zhì)的細(xì)節(jié)，圖標(biāo)元素更多，視覺(jué)沖擊力也更強(qiáng)了，也因?yàn)閳D標(biāo)復(fù)雜、視覺(jué)沖擊力強(qiáng)，因此很少出現(xiàn)在界面上，通常運(yùn)用在一些特殊運(yùn)營(yíng)入口或需要吸引用戶的大模塊中。
不同的類型在界面中也會(huì)搭配出現(xiàn)。
五、圖標(biāo)的繪制
1. 圖標(biāo)盒子
圖標(biāo)盒子是輔助繪制圖標(biāo)的一個(gè)工具，幫助設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)更好地規(guī)范好各個(gè)圖標(biāo)的尺寸大小。而圖標(biāo)盒子也有很多種，我最常用的是48*48px，這個(gè)尺寸對(duì)于線條的控制比較方便，通常用1px、2px、3px。
工具始終都是工具，界面圖標(biāo)不會(huì)由單一的形狀組合，所以形狀各異導(dǎo)致每一個(gè)圖標(biāo)的視覺(jué)體積都會(huì)有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計(jì)中，我通常會(huì)利用正方形來(lái)輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個(gè)地方缺得越多，哪個(gè)地方就拉伸一點(diǎn)。
2. 圖標(biāo)的繪制方法
圖標(biāo)中會(huì)存在標(biāo)準(zhǔn)化圖標(biāo)，像刪除就是一個(gè)垃圾桶、像首頁(yè)通常是一個(gè)家的圖標(biāo)、還有搜索則是放大鏡的圖，照片是兩個(gè)山一個(gè)太陽(yáng)，這些圖標(biāo)都習(xí)慣以這種表達(dá)方式出現(xiàn)，用戶已經(jīng)習(xí)慣了這種表現(xiàn)形式，因此對(duì)于標(biāo)準(zhǔn)化圖標(biāo)，盡量維持以往的變現(xiàn)形式，讓用戶更好地理解圖標(biāo)意思。
非標(biāo)準(zhǔn)化圖標(biāo)可以細(xì)分為具象與抽象，對(duì)于具象類圖標(biāo)，現(xiàn)實(shí)中有實(shí)物可以參照。這類圖標(biāo)的設(shè)計(jì)較為簡(jiǎn)單，可以在某度上尋找相關(guān)照片，根據(jù)實(shí)物的造型進(jìn)行提煉和簡(jiǎn)化。
抽象圖標(biāo)則較為復(fù)雜，通常是某些特定行為的名詞，沒(méi)有具體直接的參照物。因此在設(shè)計(jì)前，我們要先充分理解功能本身，這個(gè)功能是什么、用戶怎么用，然后提煉關(guān)鍵詞，接著根據(jù)關(guān)鍵詞發(fā)散思維，尋找相關(guān)聯(lián)的圖形來(lái)表示含義。例如“社區(qū)”功能，功能目的是提供一個(gè)讓用戶互相交流的環(huán)境，同時(shí)吸引無(wú)目的的用戶逛起來(lái)發(fā)現(xiàn)感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關(guān)鍵詞：聚在一起、發(fā)現(xiàn)、交流。接著發(fā)散思維進(jìn)行腦暴，聚在一起：一群人-圈子-同一個(gè)世界的人-星球，發(fā)現(xiàn)：看-眼睛；尋找-望遠(yuǎn)鏡-雷達(dá)-指南針，交流：聊天-聊天氣泡-聲波。
六、圖標(biāo)的使用場(chǎng)景
圖標(biāo)運(yùn)用在功能入口上是最基礎(chǔ)的使用場(chǎng)景之一，如首頁(yè)中的金剛區(qū)、個(gè)人中心都會(huì)用到很多圖標(biāo)作為功能入口。
1. 金剛區(qū)
目前國(guó)內(nèi)的APP包含的功能有很多，而金剛區(qū)的作用就整合產(chǎn)品功能并放置在首頁(yè)中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產(chǎn)品功能，增強(qiáng)用戶對(duì)產(chǎn)品的粘性。像美團(tuán)，很多人對(duì)他的了解是一個(gè)外賣工具，但它里面還有很多其他功能，使用金剛區(qū)展示它多元化的服務(wù)。
金剛區(qū)圖標(biāo)通常會(huì)有1～3行，根據(jù)業(yè)務(wù)具體需求做調(diào)整，在每行中會(huì)有4～5個(gè)圖標(biāo)。尺寸范圍一般在40px～48px左右（@1x），同時(shí)會(huì)根據(jù)具體的業(yè)務(wù)需求，調(diào)整大小，最終都是一預(yù)覽效果為準(zhǔn)。
2. 個(gè)人中心
個(gè)人中心是個(gè)人類型功能、運(yùn)營(yíng)活動(dòng)入口和工具的集合地，是除了金剛區(qū)外，含圖標(biāo)最多的一個(gè)地方。個(gè)人中心中包含很多不同類型的功能，可以使用卡片式的設(shè)計(jì)，將功能圖標(biāo)更好地分類。在圖標(biāo)風(fēng)格的選擇上，個(gè)人類型功能是最重要的功能，通常會(huì)以面性風(fēng)格放置在頂部，如果個(gè)人中心中需要展示運(yùn)營(yíng)入口時(shí)，需要減弱個(gè)人類型功能圖標(biāo)的視覺(jué)沖擊，會(huì)使用線性風(fēng)格圖標(biāo)。
3. 運(yùn)營(yíng)入口
運(yùn)營(yíng)入口主要作用是讓用戶點(diǎn)擊后跳轉(zhuǎn)到產(chǎn)品活動(dòng)頁(yè)，因此具有強(qiáng)視覺(jué)沖擊力的圖標(biāo)，會(huì)更吸引用戶眼球，從而提高點(diǎn)擊運(yùn)營(yíng)入口的機(jī)會(huì)。
因此運(yùn)營(yíng)入口上，通常會(huì)使用面性圖標(biāo)、寫實(shí)向圖標(biāo)或3d圖標(biāo)。因?yàn)閷憣?shí)向圖標(biāo)或3D圖標(biāo)可以提高視覺(jué)層級(jí)，因此經(jīng)常運(yùn)用在主要運(yùn)營(yíng)板塊上，而面性圖標(biāo)相比下較弱，當(dāng)頁(yè)面已存在一個(gè)主視覺(jué)或主要功能時(shí)，運(yùn)用在運(yùn)營(yíng)板塊上。
4. 主題板塊
在軟件中會(huì)有很多不同主題的信息板塊，同時(shí)信息板塊間有較大的差異，如果全部展示出來(lái)會(huì)使頁(yè)面樣式不同統(tǒng)一、信息混亂導(dǎo)致降低用戶的閱讀體驗(yàn)。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關(guān)鍵信息在頁(yè)面中，保證視覺(jué)統(tǒng)一的同時(shí)，還可以起到流量分發(fā)的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗(yàn)。
純文字的排版在信息流中略顯枯燥，而圖標(biāo)在主題板塊中起到潤(rùn)色主題的作用，渲染主題氣氛，提高不同主題板塊的識(shí)別度與差異化。對(duì)于一些長(zhǎng)標(biāo)題的主題板塊，只需要記住圖標(biāo)就能快速定位主題板塊位置。
5. 底部tab欄
底部tab欄功能數(shù)量通常在2～5個(gè)，在設(shè)計(jì)時(shí)，要設(shè)計(jì)點(diǎn)擊前和點(diǎn)擊后兩個(gè)圖標(biāo)狀態(tài)，同時(shí)幫助兩個(gè)狀態(tài)是有明顯的變化。底部tab欄圖標(biāo)大小通常在22px（@1x）左右，而圖標(biāo)底下的文字時(shí)10px（@1x）。底部tab欄作為最常出現(xiàn)的區(qū)域，是傳達(dá)產(chǎn)品品牌感、提升產(chǎn)品辨識(shí)度、記憶點(diǎn)的重要區(qū)域，很多產(chǎn)品都會(huì)在底部tab欄的圖標(biāo)設(shè)計(jì)上加入品牌元素，增強(qiáng)辨識(shí)度。
七、如何提高圖標(biāo)設(shè)計(jì)能力
1. 階段一：臨摹
臨摹是人類學(xué)習(xí)一個(gè)新技能開(kāi)始，就像嬰兒學(xué)習(xí)父母說(shuō)話一樣。但是一開(kāi)始很多都不會(huì)臨摹，或者照著畫也不會(huì)，那我們應(yīng)該如何去做？
1.1 臨摹效果不佳
1 ) 提高審美能力，多看一些主流的圖標(biāo)，可以上追波看看目前流行的設(shè)計(jì)風(fēng)格，不行的話就去看看大廠都在畫怎樣的圖標(biāo)。
2 ) 明確自己的能力，對(duì)自己目前的設(shè)計(jì)水平有一個(gè)客觀的評(píng)價(jià)，到一個(gè)怎樣的水平。很多人都急于求成，最基礎(chǔ)的線性圖標(biāo)都不會(huì)就上來(lái)搞輕擬物，畫來(lái)畫去都不好看，最后就放棄了。
3 ) 敢于支出自己的不足，許多人畫了許多時(shí)間去畫一組圖標(biāo)，就很容易被自己催眠，以為自己已經(jīng)畫得很好了，其實(shí)還會(huì)有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對(duì)比原作，自 己有哪些地方?jīng)]有原作做得好的
1.2 會(huì)了，但沒(méi)完全會(huì)
什么是會(huì)了，指的是可以繪制出于優(yōu)秀原作一樣的圖標(biāo)；什么是沒(méi)完全會(huì)，指的是不知道原作是怎么達(dá)到這個(gè)好看的效果的。而且很重要的一點(diǎn)是，你臨摹的作品可能也有一些不好，需要改進(jìn)的地方，以此在這個(gè)階段我們要做的是：
1 ) 多看別人總結(jié)的知識(shí)點(diǎn)，知道如何去判斷一個(gè)圖標(biāo)是否還有可以改進(jìn)的地方，這樣繪制是不是正確的
2 ) 懂得總結(jié)與思考，原作是用來(lái)什么樣的手法讓我覺(jué)得它是好看的，這些技法怎么用，還可以用在哪
2. 階段二：半原創(chuàng)
臨摹是一個(gè)提升自己的手法，但不代表可以直接用到自己的作品中，直接復(fù)制別人的設(shè)計(jì)，并不叫設(shè)計(jì)師，復(fù)制粘貼誰(shuí)不會(huì)啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創(chuàng)。這里說(shuō)的半原創(chuàng)不是指在別人圖標(biāo)的基礎(chǔ)上加上兩筆就是半原創(chuàng)，而是要吸取了優(yōu)秀圖標(biāo)的優(yōu)點(diǎn)后，重新設(shè)計(jì)出一個(gè)有相同特點(diǎn)的圖標(biāo)。那我們應(yīng)該如何半原創(chuàng)呢？
1 ) 還是多看，但是不同于臨摹階段，我們?cè)谂R摹的時(shí)候還要多想，這個(gè)圖標(biāo)的特點(diǎn)是什么、怎么做、還能怎么用，積累圖標(biāo)不同的表現(xiàn)形式2 ) 多練，這個(gè)建立在多臨摹上，目的知道別人的技法是什么做的，練習(xí)了不同的技法后，將它們?cè)偃诤显谝黄?
3. 階段三：原創(chuàng)
第三個(gè)階段，也是最難得階段。目前很多情況都是只能成為融圖設(shè)計(jì)師，將不同作品優(yōu)秀的點(diǎn)組合起來(lái)。但如果要建立自己的風(fēng)格也是要做融圖設(shè)計(jì)師的基礎(chǔ)上，多想、多嘗試，敢于突破，在一次次的融圖后，發(fā)現(xiàn)出自己的特點(diǎn)，為自己的作品打上自己標(biāo)簽，輸出具有差異化特點(diǎn)的設(shè)計(jì)。最有印象的就是夸克的設(shè)計(jì)，品牌特色很明顯，其實(shí)我們每個(gè)人也可以成為一個(gè)品牌，只要我們足夠努力
作者：阿恒的設(shè)計(jì)筆記 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
// 前言
良好的互動(dòng)氛圍是社區(qū)產(chǎn)品的核心，貼吧作為一款近二十歲的社區(qū)產(chǎn)品，設(shè)計(jì)師秉承年輕包容的產(chǎn)品理念，始終在探索屬于貼吧的特色互動(dòng)形態(tài)，在這過(guò)程中，希望通過(guò)互動(dòng)系統(tǒng)設(shè)計(jì)方法，升級(jí)貼吧互動(dòng)體驗(yàn)，培養(yǎng)用戶心智，形成良性互動(dòng)鏈路，最終提升用戶活躍。
一、探索互動(dòng)系統(tǒng)的設(shè)計(jì)方法
較為簡(jiǎn)單的互動(dòng)形態(tài)為作者生產(chǎn)內(nèi)容，瀏覽者為喜歡的內(nèi)容點(diǎn)贊、回復(fù)，甚至私信創(chuàng)作者，這些互動(dòng)行為會(huì)激勵(lì)創(chuàng)作者繼續(xù)生產(chǎn)內(nèi)容。
基于以上互動(dòng)形態(tài)我們搭建了循環(huán)互動(dòng)系統(tǒng)，創(chuàng)作者為瀏覽者供給內(nèi)容后，我們需要在互動(dòng)環(huán)節(jié)引導(dǎo)互動(dòng)行為發(fā)生，在觸達(dá)環(huán)節(jié)優(yōu)化互動(dòng)信息觸達(dá)，在反饋環(huán)節(jié)引導(dǎo)參與互動(dòng)反饋，從而形成正向循環(huán)。結(jié)合實(shí)際的項(xiàng)目經(jīng)驗(yàn)我們發(fā)現(xiàn)互動(dòng)系統(tǒng)運(yùn)轉(zhuǎn)離不開(kāi)“信息更易懂”、“路徑更順暢”、“玩法有驚喜”這三個(gè)要素。
二、尋找貼吧互動(dòng)設(shè)計(jì)機(jī)會(huì)點(diǎn)
貼吧的角色是由創(chuàng)作者—樓主、瀏覽者—吧友組成，良好的產(chǎn)品運(yùn)轉(zhuǎn)模式為：創(chuàng)作者向?yàn)g覽者生產(chǎn)供給內(nèi)容，瀏覽者對(duì)其互動(dòng)激勵(lì)。但貼吧多年來(lái)互動(dòng)鏈路中斷，導(dǎo)致從互動(dòng)到供給無(wú)法形成正向循環(huán)。
1.特色場(chǎng)景洞察問(wèn)題
貼吧的場(chǎng)景及形態(tài)廣泛，與其他產(chǎn)品有所不同，具有內(nèi)容形式多樣、瀏覽場(chǎng)景獨(dú)特、互動(dòng)類型廣泛、回復(fù)邏輯精細(xì)、互動(dòng)玩法多元等特點(diǎn)，通過(guò)走查上述特色場(chǎng)景發(fā)現(xiàn)諸如鏈路中斷、功能缺失、結(jié)構(gòu)混亂、內(nèi)容丟失等問(wèn)題。
2.下探設(shè)計(jì)機(jī)會(huì)點(diǎn)
基于以上問(wèn)題的共性，我們可以從中總結(jié)出核心體驗(yàn)斷點(diǎn)：
a.看不懂：回復(fù)列表內(nèi)容結(jié)構(gòu)不合理、收藏后看不懂更新的樓層內(nèi)容；
b.看不到：Push通路不穩(wěn)定無(wú)法觸達(dá)用戶、大多用戶關(guān)閉推送push；
c.沒(méi)意思：贊、回復(fù)等互動(dòng)方式老舊，刷貼、簽到行為重復(fù)，沒(méi)有特別的玩法。
下面會(huì)使用上述總結(jié)的互動(dòng)系統(tǒng)設(shè)計(jì)方法，對(duì)貼吧現(xiàn)存問(wèn)題進(jìn)行體驗(yàn)升級(jí)，提高用戶的互動(dòng)積極性。
三、 互動(dòng)系統(tǒng)設(shè)計(jì)方法應(yīng)用舉例
1.信息更易懂
貼吧的回復(fù)場(chǎng)景多，邏輯復(fù)雜，創(chuàng)作者與瀏覽者在看到對(duì)方的回復(fù)后，內(nèi)容展示需要易讀易懂，彼此才會(huì)有意愿回復(fù)反饋。
a.查看列表—優(yōu)化結(jié)構(gòu)
查看評(píng)論列表的舊體驗(yàn)存在回復(fù)對(duì)象錯(cuò)亂、內(nèi)容缺失的問(wèn)題，新體驗(yàn)根據(jù)語(yǔ)境自由展現(xiàn)原貼、樓層、樓中樓三層結(jié)構(gòu)，承接上下文關(guān)系，降低用戶理解成本，并將其復(fù)用在查看點(diǎn)贊、查看@ 等場(chǎng)景中。
b.查看詳情—精準(zhǔn)定位
點(diǎn)擊列表頁(yè)后的精準(zhǔn)定位也是易懂的關(guān)鍵，我們對(duì)內(nèi)容被折疊、定位不準(zhǔn)舊體驗(yàn)問(wèn)題進(jìn)行優(yōu)化，新體驗(yàn)?zāi)J(rèn)展開(kāi)原貼及樓層內(nèi)容，細(xì)化點(diǎn)擊貼子、樓層、樓中樓后的定位邏輯，幫助用戶精準(zhǔn)看到想看到的內(nèi)容。
c.繼續(xù)消費(fèi)—延長(zhǎng)步長(zhǎng)
用戶從回復(fù)列表進(jìn)入查看詳情頁(yè)后，舊體驗(yàn)只展示當(dāng)前的評(píng)論樓層，看不到上下文內(nèi)容。新體驗(yàn)在定位樓層前后增加樓層內(nèi)容，同時(shí)通過(guò)“查看之前樓層”和“加載之后樓層”方式繼續(xù)瀏覽，延長(zhǎng)步長(zhǎng)。
2.路徑更順暢
產(chǎn)品的推送Push向用戶推送感興趣的信息，需要穩(wěn)定的觸達(dá)用戶且有意愿打開(kāi)，才能達(dá)到召回用戶目的。
a.打開(kāi)推送開(kāi)關(guān)—場(chǎng)景引導(dǎo)
舊體驗(yàn)引導(dǎo)開(kāi)啟push場(chǎng)景缺失，方式過(guò)于生硬，新體驗(yàn)選取貼吧高頻互動(dòng)場(chǎng)景，在用戶簽到后、回復(fù)后、發(fā)布后選擇合適形態(tài)展現(xiàn)引導(dǎo)，提高推送通知打開(kāi)率。
b.展示推送—有吸引力
舊體驗(yàn)互動(dòng)push內(nèi)容表述凌亂，新體驗(yàn)將push內(nèi)容結(jié)構(gòu)化，以“用戶昵稱+動(dòng)作+互動(dòng)對(duì)象”的結(jié)構(gòu)展示推送內(nèi)容，并強(qiáng)化互動(dòng)用戶的頭像，適當(dāng)展示互動(dòng)詳情，吸引用戶點(diǎn)擊。
3.玩法有驚喜
貼吧點(diǎn)贊、回復(fù)等互動(dòng)方式存在多年，缺乏新穎性，用戶互動(dòng)心智疲軟，急需通過(guò)輕量、有趣的創(chuàng)新玩法，刺激瀏覽者互動(dòng)。
a.新增動(dòng)態(tài)表情
結(jié)合貼吧元素，補(bǔ)充單擊、長(zhǎng)按、雙擊的遞進(jìn)互動(dòng)點(diǎn)贊方式，給予用戶感官刺激，提升點(diǎn)贊爽感。
結(jié)合時(shí)效性運(yùn)營(yíng)活動(dòng)，增加高考、勞動(dòng)節(jié)、618活動(dòng)點(diǎn)贊，營(yíng)造驚喜感。
首次私信提供貼吧IP表情，助力用戶關(guān)系破冰。后續(xù)私信增加開(kāi)香檳、丟炮竹以及丟炮竹炸滑稽雙向互動(dòng)玩法，持續(xù)提升用戶互動(dòng)意愿。
b.新增潮流表態(tài)
虛擬形式是近幾年受用戶喜愛(ài)的潮流表態(tài)玩法，探索虛擬形輕互動(dòng)方式，互動(dòng)后通過(guò)私信觸達(dá)，并沉淀社交貨幣資產(chǎn)，進(jìn)而引導(dǎo)雙向互動(dòng)。
// 小結(jié)
文本搭建的“信息更易懂”、“路徑更順暢”、“玩法有驚喜”互動(dòng)系統(tǒng)設(shè)計(jì)方法，已將其運(yùn)用在貼吧的特色互動(dòng)體驗(yàn)升級(jí)中，并取得正向數(shù)據(jù)和用戶反饋，希望該項(xiàng)目的設(shè)計(jì)方法及經(jīng)驗(yàn)?zāi)転榇蠹姨峁﹨⒖肌?
作者：百度MEUX藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
// 寫在前面
端到端導(dǎo)流是指在產(chǎn)品矩陣體系內(nèi)引導(dǎo)優(yōu)質(zhì)產(chǎn)品的用戶使用另外一款產(chǎn)品，帶來(lái)使用量的提升，從而實(shí)現(xiàn)用戶規(guī)模提升的一種增長(zhǎng)手段。隨業(yè)務(wù)快速增長(zhǎng)，有駕從百度汽車頻道衍伸出了有駕小程序、M站、PC站以及APP等多緯度的產(chǎn)品矩陣，依托各端流量實(shí)現(xiàn)矩陣產(chǎn)品間的導(dǎo)流，逐步積累用戶規(guī)模，是有駕目前獲客渠道中占比最高的方式。本文將以有駕導(dǎo)流體驗(yàn)升級(jí)的項(xiàng)目為例，分享導(dǎo)流增長(zhǎng)探索的設(shè)計(jì)思路與實(shí)踐經(jīng)驗(yàn)。
// 為什么要做導(dǎo)流
導(dǎo)流的目的
對(duì)于業(yè)務(wù)本身而言，隨著移動(dòng)互聯(lián)網(wǎng)流量紅利期的結(jié)束，獲取新用戶的成本越來(lái)越高，不管是新產(chǎn)品還是成熟型產(chǎn)品，都需要通過(guò)導(dǎo)流的手段來(lái)持續(xù)擴(kuò)充新用戶。其次，對(duì)于有駕產(chǎn)品生態(tài)而言，需要各端產(chǎn)品間的相互聯(lián)動(dòng)，協(xié)同發(fā)揮優(yōu)勢(shì)，實(shí)現(xiàn)流量?jī)r(jià)值最大化。
導(dǎo)流的優(yōu)勢(shì)
成本低，相較于投放、活動(dòng)等渠道流量獲取方式，矩陣導(dǎo)流成本低；
高意向，用戶購(gòu)車意向明確更容易實(shí)現(xiàn)商業(yè)轉(zhuǎn)化；
可共享，用戶數(shù)據(jù)及行為關(guān)聯(lián)互通。
// 如何做好導(dǎo)流設(shè)計(jì)
1.問(wèn)題分析
通過(guò)梳理核心場(chǎng)景的4種導(dǎo)流條，發(fā)現(xiàn)各個(gè)場(chǎng)景導(dǎo)流形式各異，用戶缺乏統(tǒng)一認(rèn)知，導(dǎo)流引導(dǎo)語(yǔ)單一內(nèi)容吸引力弱。在用戶在瀏覽頁(yè)面時(shí)，點(diǎn)擊功能入口或想要繼續(xù)查看更多內(nèi)容，需要下載APP才能繼續(xù)阻礙用戶瀏覽：
缺乏統(tǒng)一認(rèn)知：視覺(jué)表達(dá)形式不成體系，用戶感知不夠；
內(nèi)容吸引力弱：內(nèi)容單一缺乏吸引力，用戶沒(méi)有點(diǎn)擊欲望；
阻礙用戶瀏覽：打斷用戶正常使用功能，影響用戶體驗(yàn)。
從導(dǎo)流鏈路的用戶行為來(lái)看，整個(gè)流程下載路徑過(guò)長(zhǎng)，發(fā)現(xiàn)用戶流失較大的轉(zhuǎn)化點(diǎn)：
從小程序落地頁(yè)到下載頁(yè)：在進(jìn)入小程序?yàn)g覽頁(yè)面時(shí)，用戶沒(méi)有注意到導(dǎo)流條就滑走了；
點(diǎn)擊導(dǎo)流條進(jìn)入下載頁(yè)：點(diǎn)擊導(dǎo)流條會(huì)先調(diào)起導(dǎo)流彈窗，點(diǎn)擊確認(rèn)后再進(jìn)入到下載頁(yè)，用戶未選擇下載就退出了。
2.明確設(shè)計(jì)方向
針對(duì)導(dǎo)流現(xiàn)狀缺乏統(tǒng)一認(rèn)知，內(nèi)容吸引力弱、阻礙用戶瀏覽、下載路徑過(guò)長(zhǎng)的問(wèn)題，我們搭建了一個(gè)完整的導(dǎo)流鏈路圖，根據(jù)用戶增長(zhǎng)模型，把用戶生命周期各節(jié)點(diǎn)的用戶行為與產(chǎn)品觸點(diǎn)一一羅列出來(lái)，找到增長(zhǎng)路徑的設(shè)計(jì)機(jī)會(huì)點(diǎn)。
通過(guò)以上的問(wèn)題分析，如何建立用戶和產(chǎn)品的鏈接，保障友好的體驗(yàn)，是本次導(dǎo)流升級(jí)要解決的問(wèn)題。根據(jù)用戶關(guān)鍵行為，我們可以將整個(gè)導(dǎo)流鏈路拆分為3個(gè)階段來(lái)挖掘主要機(jī)會(huì)點(diǎn)：
下載前：興趣激發(fā)導(dǎo)流吸引，建立用戶穩(wěn)定認(rèn)知；
下載中：強(qiáng)化用戶轉(zhuǎn)化動(dòng)機(jī)，刺激用戶完成下載；
下載后：保障還原體驗(yàn)暢通，提升首次使用體驗(yàn)。
下面將分別介紹導(dǎo)流下載前階段的設(shè)計(jì)落地實(shí)踐，以及下載中、下載后階段的延伸設(shè)計(jì)思考。
// 下載前
1.強(qiáng)化觸點(diǎn)吸引
是否能成功引起用戶注意，是轉(zhuǎn)化開(kāi)始的第一步，統(tǒng)一的視覺(jué)風(fēng)格和滿足用戶訴求的內(nèi)容，有利于增強(qiáng)導(dǎo)流條的吸引力。
1）收斂導(dǎo)流條類型
針對(duì)【阻礙用戶瀏覽】打斷用戶正常使用功能、用戶沒(méi)有跳轉(zhuǎn)預(yù)期的體驗(yàn)問(wèn)題，下線了阻斷式和截?cái)嗍絻煞N體驗(yàn)不友好的導(dǎo)流類型，將原來(lái)4種導(dǎo)流類型收斂為2種，僅保留通用導(dǎo)流條和功能延展導(dǎo)流條，基于這2種導(dǎo)流形態(tài)進(jìn)行深入的設(shè)計(jì)探索。
2）建立通用視覺(jué)標(biāo)準(zhǔn)
針對(duì)【缺乏統(tǒng)一認(rèn)知】視覺(jué)表達(dá)形式不成體系、用戶感知不夠的視覺(jué)問(wèn)題，建立了通用導(dǎo)流條標(biāo)準(zhǔn)化規(guī)范。統(tǒng)一視覺(jué)形態(tài)，優(yōu)化為頁(yè)面內(nèi)通欄嵌入式，同時(shí)融入品牌色強(qiáng)化用戶感知，根據(jù)頁(yè)面布局制定了不同的展示規(guī)則。
上線后，內(nèi)嵌導(dǎo)流條在展現(xiàn)受限的情況下，導(dǎo)流轉(zhuǎn)化數(shù)據(jù)與改版前基本持平，為了進(jìn)一步提升導(dǎo)流的點(diǎn)擊效果，開(kāi)始探索場(chǎng)景化定制提轉(zhuǎn)的設(shè)計(jì)方向。
3）定制場(chǎng)景化內(nèi)容
針對(duì)【內(nèi)容吸引力弱】?jī)?nèi)容單一缺乏吸引力、用戶沒(méi)有點(diǎn)擊欲望的內(nèi)容問(wèn)題，在通用標(biāo)準(zhǔn)化形態(tài)的基礎(chǔ)上，根據(jù)不同場(chǎng)景用戶訴求點(diǎn)，豐富導(dǎo)流內(nèi)容。分別從內(nèi)容定制、按鈕文案優(yōu)化、以及氛圍強(qiáng)化3個(gè)方向驗(yàn)證對(duì)轉(zhuǎn)化的影響。
內(nèi)容定制：豐富導(dǎo)流利益點(diǎn)、場(chǎng)景化內(nèi)容更能激發(fā)用戶興趣，促進(jìn)轉(zhuǎn)化達(dá)成；
按鈕文案：轉(zhuǎn)化按鈕文案導(dǎo)向性明確、內(nèi)容與導(dǎo)流利益點(diǎn)匹配，可以助力按鈕轉(zhuǎn)化提升；
氛圍強(qiáng)化：導(dǎo)流樣式上適度弱化氛圍、樣式更傾向于原生功能，有助于提升導(dǎo)流條點(diǎn)擊。
2.拓展場(chǎng)景擴(kuò)量
復(fù)利通用標(biāo)準(zhǔn)導(dǎo)流條的成功經(jīng)驗(yàn)，應(yīng)用到功能延展類導(dǎo)流條中繼續(xù)驗(yàn)證有效性，從產(chǎn)品價(jià)值點(diǎn)出發(fā)，挖掘高流量場(chǎng)景的機(jī)會(huì)點(diǎn)從而帶來(lái)轉(zhuǎn)化增量。
1）價(jià)值傳遞
根據(jù)小程序和APP兩端各自的不同點(diǎn)，分別從功能差異及體驗(yàn)差異兩個(gè)方向進(jìn)行優(yōu)化。
APP特有功能：APP完善的功能體驗(yàn)可以更好滿足用戶訴求，例如參配瀏覽場(chǎng)景下，引導(dǎo)用戶體驗(yàn)搜索及橫屏查看的高頻功能，對(duì)于導(dǎo)流轉(zhuǎn)化有正向幫助；
各端體驗(yàn)差異：小程序和APP兩端體驗(yàn)存在差異，例如圖片瀏覽場(chǎng)景下，APP清晰流暢的瀏覽體驗(yàn)及放大全屏查看圖片的交互體驗(yàn)，能夠刺激用戶轉(zhuǎn)化。
2）價(jià)值延續(xù)
當(dāng)用戶完成核心內(nèi)容消費(fèi)后，是否可以引導(dǎo)用戶去APP繼續(xù)瀏覽更多相關(guān)內(nèi)容，進(jìn)而引導(dǎo)用戶下載呢？
服務(wù)透?jìng)?/strong>：平臺(tái)服務(wù)內(nèi)容傳遞，例如在內(nèi)容落地頁(yè)文末增加品牌廣告導(dǎo)流條，幫助用戶建立品牌認(rèn)知；
相關(guān)推薦：引導(dǎo)相關(guān)內(nèi)容消費(fèi)，例如在文章或視頻頁(yè)增加相關(guān)推薦導(dǎo)流條，引導(dǎo)用戶瀏覽更多相似內(nèi)容。
// 下載中
當(dāng)用戶通過(guò)導(dǎo)流條進(jìn)入到下載流程時(shí)，還有哪些手段可以刺激用戶激活減少流失呢？
強(qiáng)化下載動(dòng)機(jī)：下載頁(yè)前置APP落地頁(yè)內(nèi)容，例如將通用下載頁(yè)優(yōu)化為場(chǎng)景化下載頁(yè)，給用戶超前產(chǎn)品體驗(yàn)吸引轉(zhuǎn)化；
減少用戶流失：縮短鏈路簡(jiǎn)化流程，例如可在下載中間頁(yè)完成應(yīng)用下載，同時(shí)退出下載頁(yè)時(shí)增加挽留。
// 下載后
當(dāng)用戶在應(yīng)用商店下載完成后，我們還能做哪些提升首次啟動(dòng)APP的體驗(yàn)?zāi)兀?
還原鏈路暢通：提升場(chǎng)景還原成功率，減少頻繁提示信息干擾；
建立用戶心智：引導(dǎo)新用戶探索功能，根據(jù)用戶興趣推薦適合的內(nèi)容。
以上內(nèi)容是下載中和下載后階段導(dǎo)流優(yōu)化方向的一些延伸設(shè)計(jì)思考，為大家提供可以繼續(xù)探索的方向。
// 寫在最后
總結(jié)一下本篇文章關(guān)于導(dǎo)流的體驗(yàn)設(shè)計(jì)要點(diǎn)：
全鏈路洞察，對(duì)導(dǎo)流鏈路進(jìn)行拆解，通過(guò)盤點(diǎn)導(dǎo)流鏈路的用戶行為，明確每個(gè)節(jié)點(diǎn)的設(shè)計(jì)方向；
降低廣告干擾性，減少用戶瀏覽過(guò)程中的阻斷感，適度弱化廣告氛圍；
用戶的視角引導(dǎo)，讓用戶專注于產(chǎn)品本身傳遞的價(jià)值，引領(lǐng)用戶完成對(duì)產(chǎn)品的探索從而完成下載激活。
作者：百度MEUX
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
什么是“有駕”
【有駕】是百度旗下的汽車信息與服務(wù)平臺(tái)，累計(jì)用戶超5.3億，致力于為用戶提供真實(shí)、可靠的看選買車服務(wù)，以及為車企和經(jīng)銷商提供從品牌到效果的一站式互聯(lián)網(wǎng)營(yíng)銷解決方案。
現(xiàn)狀分析
有駕品牌在孵化初期，重點(diǎn)是在用戶詞建立品牌感知。所以我們提取“有駕“的字形做為品牌符號(hào)，減少歧義，強(qiáng)化用戶的感知。
但是隨著品牌持續(xù)運(yùn)營(yíng)進(jìn)入新的階段，我們發(fā)現(xiàn)現(xiàn)有的設(shè)計(jì)無(wú)法滿足后續(xù)的運(yùn)營(yíng)訴求了，主要體現(xiàn)在：
品牌logo：不能體現(xiàn)汽車的行業(yè)屬性，缺乏成體系的品牌符號(hào)和VI體系，色彩上也不夠符合時(shí)下潮流的年輕配色體系。
品牌活動(dòng)：品牌關(guān)聯(lián)度弱，活動(dòng)維度單一。
項(xiàng)目概述
因此，我們重新梳理有駕的品牌定位與調(diào)性，借助本次品牌升級(jí)，打造有駕差異化風(fēng)格，形成獨(dú)有的視覺(jué)印記。
因?yàn)橛脩魧?duì)于舊的logo已有一定的認(rèn)知。所以此次改版的目標(biāo)在保持固有用戶認(rèn)知，在原有基礎(chǔ)上進(jìn)行品牌標(biāo)識(shí)的探索及應(yīng)用，以強(qiáng)化品牌感知，提升品牌的競(jìng)爭(zhēng)力，整合業(yè)務(wù)資源做心智觸達(dá)。
前期分析
前期我們對(duì)汽車垂類的競(jìng)品進(jìn)行了一輪調(diào)研，并且結(jié)合有駕的用戶群里，尋找有駕品牌的差異點(diǎn)。
有駕用戶群體年輕化為主，普遍具有高學(xué)歷，集中在新一線二線城市。
通過(guò)以上在用戶、行業(yè)及行業(yè)趨勢(shì)等多唯獨(dú)的信息搜集后，我們確定了有駕品牌設(shè)計(jì)的四個(gè)核心關(guān)鍵詞：年輕、科技、未來(lái)、專業(yè)。
建立體系
在明確設(shè)計(jì)方向后，我們梳理了線上線下的所有品牌觸點(diǎn)，結(jié)合前期的調(diào)研結(jié)論，匯總出了有駕設(shè)計(jì)系統(tǒng)的完整框架，以確保品牌設(shè)計(jì)的完整性和靈活適用性。
設(shè)計(jì)落地
基于前期分析洞察結(jié)論，我們?cè)诶^承圓形和車形的基礎(chǔ)上，對(duì)品牌符號(hào)與icon進(jìn)行了大量的方案探索。從圖形、質(zhì)感等方面切入，簡(jiǎn)化圖形形態(tài)，嘗試不同的形態(tài)呈現(xiàn)的視覺(jué)感受和氣質(zhì)。最終確定了全新品牌logo方案。
相對(duì)于升級(jí)前，新版的logo加入汽車元素，解決升級(jí)前l(fā)ogo的行業(yè)屬性不明確的問(wèn)題，讓產(chǎn)品app的行業(yè)屬性更加直觀。同時(shí)增加品牌符號(hào)做為底紋，輔以有駕的圓形符號(hào)成為品牌核心的一部分。強(qiáng)化有駕的品牌基因。
符號(hào)提煉
確定品牌logo后，為了確保品牌能夠更好的拓展應(yīng)用，進(jìn)行了品牌符號(hào)的提煉。并為了延續(xù)之前的品牌調(diào)性。所以輔助圖形延續(xù)了之前的圓環(huán)造型，造型偏向輪胎；在不破壞原有型的基礎(chǔ)上，加入一些折角的質(zhì)感的變化，使圖形變化更加豐富，更有識(shí)別度。
設(shè)計(jì)語(yǔ)言
為了更好的觸達(dá)到各業(yè)務(wù)場(chǎng)景，所以我們對(duì)視覺(jué)風(fēng)格進(jìn)行了探索和拓展。分別以淺色與深色作為主要探索方向，以適配不同的落地場(chǎng)景。結(jié)合有駕的年輕化，科技感的設(shè)計(jì)目標(biāo)，探索出以下三種質(zhì)感呈現(xiàn)：
符號(hào)拓展
在提取的形狀基礎(chǔ)上進(jìn)行變形，增加折疊細(xì)節(jié)。在大事件活動(dòng)，海報(bào)等場(chǎng)景使用，增加品牌關(guān)聯(lián)度。
設(shè)計(jì)字體
結(jié)合全新的品牌定位，我們也優(yōu)化了有駕的品牌字體，從細(xì)節(jié)出透出有駕的品牌感知。
品牌手冊(cè)
新的品牌需要一套更全面的品牌系統(tǒng)來(lái)滿足不同場(chǎng)景下的業(yè)務(wù)拓展需求。
目前我們也對(duì)現(xiàn)有的品牌手冊(cè)進(jìn)行拓展和完善，同步到業(yè)務(wù)方，以便更好的保證各業(yè)務(wù)場(chǎng)景觸點(diǎn)下品牌的認(rèn)知和統(tǒng)一，達(dá)到提質(zhì)增效的目的。
品牌落地
除了對(duì)品牌對(duì)角度的塑造和升級(jí)，我們更積極的把品牌滲透到活動(dòng)、欄目包裝、大事件運(yùn)營(yíng)、品牌海報(bào)等各維度場(chǎng)景中，讓有駕品牌形象更加立體多元。
結(jié)語(yǔ)
目前有駕品牌升級(jí)已經(jīng)取得階段性成果，沉淀出更加完善的品牌資產(chǎn)，不僅提升設(shè)計(jì)效率保證全鏈路的品牌曝光，也為業(yè)務(wù)規(guī)?；蛳禄A(chǔ)。之后我們也將不斷完善和擴(kuò)充品牌資產(chǎn)，將設(shè)計(jì)成果不斷落地到業(yè)務(wù)中，細(xì)化業(yè)務(wù)目標(biāo)并與設(shè)計(jì)目標(biāo)緊密結(jié)合，多維度助力業(yè)務(wù)的高速發(fā)展。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
本文講述了“峰終定律”的定義，并結(jié)合筆者生活中的兩個(gè)例子做了圖文分析，最后通過(guò)學(xué)習(xí)海底撈的案例，然后結(jié)合顧客角度將一次糟糕的活動(dòng)進(jìn)行了改進(jìn)。
峰終定律（ Peak–End Rule），是由丹尼爾·卡尼曼（2002年諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)獲得者，心理學(xué)家）提出的——他發(fā)現(xiàn)人們對(duì)體驗(yàn)（體驗(yàn)事物或者產(chǎn)品）的記憶由兩個(gè)因素決定：
即，除了峰值和終值時(shí)之外的其他體驗(yàn)，無(wú)論好與不好體驗(yàn)的比重是多少，體驗(yàn)時(shí)間的長(zhǎng)短，對(duì)記憶或感受都沒(méi)那么大影響，會(huì)被選擇性忽略。
概念講完，下面筆者結(jié)合去飯店買飯的故事，使用“峰終定律”進(jìn)行圖文分析，為什么一家飯店給我的體驗(yàn)非常糟糕，而另一家飯店我愿意推薦我的同事也去嘗試。
之前有一段時(shí)間飯店聯(lián)合天地壹號(hào)搞活動(dòng)，買飯送一瓶鐵罐裝的天地壹號(hào)。某天中午下班提前5分鐘到了飯店，我特意說(shuō)明了要醬汁，老板的“嗯嗯哦哦”充滿了敷衍。
我看著店里配餐員配餐、出餐，然后我問(wèn)這份是不是我的，店里服務(wù)員支支吾吾，也沒(méi)有看著我，然后那份飯被拿去跟天地壹號(hào)的工作人員合影，一張不滿意又拍一張，一個(gè)角度拍完又換一個(gè)角度。最后，飯店的服務(wù)員才把那份飯給我，當(dāng)時(shí)我心里憋了一股氣，就差破口大罵：我中午吃飯+午睡時(shí)間就一個(gè)小時(shí)，為了能睡好點(diǎn)還要吃得快點(diǎn)。
這家店給我的體驗(yàn)就是，不把用戶當(dāng)用戶，心里非常不是滋味。
而當(dāng)我向同事說(shuō)起這家店時(shí)，我會(huì)推薦手撕雞飯，這是我在廣州吃過(guò)的最好吃的手撕雞飯， 沒(méi)有之一。同時(shí)，我還會(huì)說(shuō)上面的故事給同事，最后評(píng)價(jià)道：可以試試的，另外，出餐質(zhì)量有問(wèn)題他們也會(huì)給你換一份的。
當(dāng)我說(shuō)完這次的經(jīng)歷給同事聽(tīng)，同事并沒(méi)有表示會(huì)去嘗試一次，因?yàn)槲艺f(shuō)的故事，又因?yàn)閮r(jià)格也不便宜。所以說(shuō)，店鋪（或者說(shuō)品牌）是在食物（或者說(shuō)餐品）之前被消費(fèi)的，這是給用戶留下第一印象的關(guān)鍵，第一印象不好，即便是廣州第一手撕雞，也不會(huì)去嘗試。
那么使用“峰終定律”去分析這次糟糕的就餐體驗(yàn)就是：
峰值有兩個(gè)，正峰值是廣州第一手撕雞的“口味”，負(fù)峰值是“員工服務(wù)”。負(fù)峰值的出現(xiàn)，說(shuō)明了店家在活動(dòng)開(kāi)始前并沒(méi)有設(shè)計(jì)好活動(dòng)流程，服務(wù)員也就沒(méi)有足夠的授權(quán)去處理和應(yīng)對(duì)。
終值是“離店”時(shí)的不爽，店家并沒(méi)有作出任何的正面回應(yīng)，沒(méi)有表達(dá)歉意，沒(méi)有意識(shí)到這樣做會(huì)給顧客造成怎樣的影響。
“員工服務(wù)”是直接突破了我的忍耐底線，“離店”時(shí)店家的不作為再次挑戰(zhàn)了我的忍耐底線。短時(shí)間內(nèi)兩次挑戰(zhàn)我的忍耐底線，店家不但“失去”了我，我的幾個(gè)同事也不會(huì)是潛在客戶了。
忍耐底線不是卡尼曼教授的理論，是我結(jié)合了梁寧老師講過(guò)的內(nèi)容，然后加到了這張“用戶體驗(yàn)?zāi)Ｐ汀眻D上。
梁寧老師講的是：“PC時(shí)代用戶等待一個(gè)頁(yè)面打開(kāi)的忍耐底線平均數(shù)是7秒，等了7秒還沒(méi)打開(kāi)，基本上99%的用戶就會(huì)離開(kāi)。所以，對(duì)成本的控制是本分，但是不能挑戰(zhàn)用戶的忍耐底線?！?
某天中午我發(fā)現(xiàn)寫字樓下新開(kāi)了一家飯店，我到店里問(wèn)老板，有什么賣的好的推薦一下，老板面帶笑容用“廣普”跟我一一介紹：哪個(gè)菜用什么材料做，哪個(gè)湯用什么材料燉，吃不了辣可以吃……在老板眾多推薦中選了一份，第一次嘗試這家店，總體感覺(jué)不錯(cuò)。后面選擇了老板推薦的肉餅飯，發(fā)現(xiàn)真合我胃口。
上兩周有兩天中午休息時(shí)都到店里想點(diǎn)肉餅飯，但是連續(xù)兩天都在我來(lái)之前賣完了，之后老板說(shuō)可以掃門口的小程序預(yù)約下單，第二天上班我早早的就預(yù)約了肉餅飯，到店之后老板已經(jīng)打包好了，我把訂單信息給老板看，老板說(shuō)了一句我聽(tīng)到就覺(jué)得好笑，并且每當(dāng)給人推薦這家店時(shí)就說(shuō)的一句話：“這是我們專門給您留的肉餅飯?！?
當(dāng)我笑著回應(yīng)謝謝的時(shí)候我也在想，這飯是我在小程序上面早早預(yù)定的，老板還說(shuō)是專門我留的；因?yàn)槲蚁雀跺X了，所以老板不賣給別人了。
我又想到，這家店的老板是愿意站在顧客的角度來(lái)提供對(duì)應(yīng)的服務(wù)的，并且我也確實(shí)感受到了老板的真誠(chéng)、熱情。
于是我把這家店介紹給了幾個(gè)同事，他們都表示下次沒(méi)有自己帶午餐的時(shí)候會(huì)試一下，并且有兩個(gè)同事聽(tīng)了我的推薦后去下單了，其中有一位同事表示會(huì)回購(gòu)。
這家店給我的體驗(yàn)就是，不把用戶當(dāng)流量，心里有用戶，產(chǎn)品可以，用戶自然會(huì)安利給身邊人嘗試一下。
使用“峰終定律”去分析這次就餐體驗(yàn)就是：
有兩個(gè)正峰值，第一個(gè)正峰值是讓我感受到店家心里有顧客的“員工服務(wù)”。第二個(gè)正峰值是“口味”，這里甚至有一點(diǎn)點(diǎn)主觀上的小驚喜：當(dāng)時(shí)抱著不知道會(huì)不會(huì)踩雷，試試新店的心態(tài)，當(dāng)我試到肉餅飯時(shí)，小驚喜就來(lái)了——比我以往在外面吃到的肉餅飯都好吃。
小結(jié)：
當(dāng)我跟同事同事說(shuō)起第一家飯店體驗(yàn)不好的時(shí)候，并不是說(shuō)他的“港式氛圍”裝修不好，不是說(shuō)出餐有問(wèn)題不給換新的，手撕雞也是廣州最好吃的，而是說(shuō)，這家店給我的感覺(jué)是他并不像跟用戶建立長(zhǎng)期關(guān)系，只做一桿子買賣。于是他們并不注重維護(hù)客情關(guān)系，當(dāng)他們把合過(guò)影的手撕雞飯遞給我時(shí)，連安撫情緒的話都沒(méi)有，就餐體驗(yàn)自然就糟糕透了。
那么如果我是這家燒臘飯店的主理人，那我會(huì)如何設(shè)計(jì)本次活動(dòng)？
我們先看看餐飲行業(yè)的巨頭都是怎么做的，因服務(wù)被大家口口相傳的海底撈就是非常值的學(xué)習(xí)的對(duì)象。
通過(guò)模型，我有以下幾點(diǎn)感悟：
服務(wù)觸點(diǎn)：用戶為了完成目標(biāo)，需要做一系列連續(xù)的行為，而這一連串行為中會(huì)涉及到一個(gè)一個(gè)的用戶與產(chǎn)品完成交互的觸點(diǎn)，這就是服務(wù)觸。比如上圖所示的，海底撈出于提高轉(zhuǎn)化率、降低顧客等待叫號(hào)時(shí)的無(wú)聊感等原因，在顧客排隊(duì)時(shí)可以體驗(yàn)免費(fèi)的美甲服務(wù)、免費(fèi)擦鞋服務(wù)等。
帶著學(xué)習(xí)完海底撈得出的感悟，下面我來(lái)嘗試思考一下，我現(xiàn)在是這家燒臘飯店的主理人，那我會(huì)這樣設(shè)計(jì)本次活動(dòng)：
首先需要了解我們的顧客：
1、顧客畫像
附近街坊、附近上班族，方便快捷解決午/晚餐。
2、顧客預(yù)期
選擇符合自己口味的菜品，店內(nèi)就餐/打包回公司吃；店家穩(wěn)定出餐（口味穩(wěn)定、不要有異物等）；不希望排長(zhǎng)龍。
3、服務(wù)觸點(diǎn)
點(diǎn)餐時(shí)、支付時(shí)、等待出餐時(shí)（排隊(duì)）、（打包完）出餐時(shí)、離店時(shí)。
其次，才到本次活動(dòng)的設(shè)計(jì)：
1、背景
贊助商天地壹號(hào)需要做品牌推廣，找到我們合作，方案就是消費(fèi)即送天地壹號(hào)一瓶。
2、目的
幫助合作伙伴宣傳的同時(shí)，吸引新的顧客，回饋老顧客，提升營(yíng)業(yè)額。
3、具體方案
3.1、制作印有“12.1~12.3日，消費(fèi)即送天地壹號(hào)一瓶，送完即止”的宣傳海報(bào)，并且放置在店鋪門口。
3.2、完善服務(wù)流程。（請(qǐng)看下圖）
3.3、設(shè)置幾種異常情況的應(yīng)對(duì)方案。（請(qǐng)看下圖）
完善好服務(wù)流程，提前設(shè)置好幾個(gè)異常情況的應(yīng)對(duì)方案，相比于海底撈一連串的各種免費(fèi)服務(wù)，其實(shí)花不了多少實(shí)際的金錢成本。但是卻能用最少的資源，最大程度的避免“負(fù)峰值”的出現(xiàn)。
另外，天地壹號(hào)的工作人員提出合影，飯店應(yīng)該用自己的員工餐，而不是用顧客的。這其實(shí)不是異常情況的應(yīng)對(duì)方案，而是作為服務(wù)行業(yè)從業(yè)人員該有的覺(jué)悟。
本文到此結(jié)束，朋友們?nèi)绻O(shè)計(jì)/體驗(yàn)了好的“峰終體驗(yàn)”的案例，麻煩在評(píng)論區(qū)告知我一聲，讓我也去體驗(yàn)一把~
作者：我是Berwin
來(lái)源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
時(shí)間對(duì)于我們每個(gè)人來(lái)說(shuō)都極為重要和珍貴。隨著生活節(jié)奏的加速，很多產(chǎn)品也都開(kāi)始注重和考慮對(duì)于用戶時(shí)間的節(jié)省和分配。本文重點(diǎn)分享三種在交互設(shè)計(jì)中幫助用戶「同時(shí)做幾件事」的設(shè)計(jì)方法，以及其對(duì)應(yīng)的優(yōu)秀案例：
希望會(huì)為你帶來(lái)更多的設(shè)計(jì)靈感。
通過(guò)將屏幕的布局進(jìn)行分割處理，可同時(shí)呈現(xiàn)多項(xiàng)內(nèi)容，讓用戶自由選擇任務(wù)主次，同時(shí)處理多項(xiàng)任務(wù)。分屏設(shè)計(jì)很常見(jiàn)，但其中的體驗(yàn)細(xì)節(jié)卻依舊值得研究和優(yōu)化。
案例1
微信在 Pad 端的分屏布局考慮得很周到，看微信視頻時(shí)支持分屏功能，還能夠調(diào)整屏幕分割的尺寸比例。最小的分屏尺寸做成了手機(jī)尺寸，體驗(yàn)順暢，看視頻、接微信兩不誤：
案例 2
bilibili 在移動(dòng)端的視頻通過(guò)小窗模式可以不間斷播放，不僅可以在 App 內(nèi)或外呈現(xiàn)小窗模式，正在播的視頻，在被臨時(shí)打斷退出視頻后，還可以用音頻的方式繼續(xù)播放：
案例 3
微信的新功能，在你閱讀文章時(shí)依舊能看到朋友發(fā)來(lái)的微信消息，可以直接在當(dāng)前頁(yè)面回復(fù)消息，避免你在看文章時(shí)閱讀不了微信消息。你還可以將信息“標(biāo)記未讀”，一會(huì)兒再做處理：
案例4
微信視頻號(hào)改版后，點(diǎn)擊視頻號(hào)下方的博主名稱和頭像，下方彈窗會(huì)彈出該博主的主頁(yè)和其他視頻，而當(dāng)前正在播放的視頻會(huì)漸漸呈現(xiàn)小屏播放，視頻內(nèi)容不會(huì)被遮擋，既不影響觀看，也不影響用戶探索該博主的其他視頻內(nèi)容：
案例 5
在微信訂閱號(hào)中展示的視頻內(nèi)容可以通過(guò)劃到右下角變成小窗播放音頻，既可以聽(tīng)內(nèi)容，也不影響你繼續(xù)瀏覽訂閱號(hào)的其他內(nèi)容：
產(chǎn)品可以讓操作更容易被用戶管理和掌控，在被打斷后很容易被用戶重新再續(xù)，給用戶足夠的掌控感。在一些特殊情況下，幾件事可以交替、穿插地處理，同時(shí)進(jìn)行。
案例 1
釘釘?shù)囊苿?dòng)端浮窗功能，向右滑動(dòng)退出正在操作的頁(yè)面時(shí)，就會(huì)出現(xiàn)添加浮窗區(qū)域，用于收錄未做完的操作。同時(shí)顯示出已添加浮窗的內(nèi)容數(shù)量，最多添加 5 個(gè)：
案例2
微信的浮窗功能也可以幫助用戶更快捷地收錄未及時(shí)閱讀的內(nèi)容，在打開(kāi)時(shí)還可以定位到上次中斷閱讀的位置。用戶不再需要整塊的大量的時(shí)間來(lái)閱讀長(zhǎng)篇文章，可以更合理地掌控閱讀節(jié)奏：
案例3
微信讀書 App 會(huì)在你跳讀到其他章節(jié)時(shí)，在頁(yè)面下方顯示“返回原進(jìn)度”的按鈕，方便你在跳讀后回來(lái)繼續(xù)閱讀：
案例4
網(wǎng)易163 郵箱側(cè)重于為你呈現(xiàn)工作的多線程。每點(diǎn)開(kāi)一封郵件，頁(yè)面上方會(huì)增加一個(gè)類似瀏覽器標(biāo)簽頁(yè)的 Tab，你可以通過(guò)它們查看自己的工作和閱讀軌跡。當(dāng)你在寫郵件時(shí)，同時(shí)又收到了其他的新郵件，去查看新郵件之后，可以通過(guò) Tab 直接回到郵件編輯頁(yè)面，繼續(xù)編寫剛才的郵件：
案例5
使用釘釘發(fā)起會(huì)議邀請(qǐng)，如果中途退出，系統(tǒng)幫助你自動(dòng)保存。再發(fā)起會(huì)議邀請(qǐng)時(shí)也會(huì)給出上次操作的提示，幫你續(xù)寫內(nèi)容：
用戶可以選擇忽略或隱藏并不重要的、正在進(jìn)程中的任務(wù)，將更多的時(shí)間用在其他事情而非無(wú)法控制的等待上。
案例1
iOS 系統(tǒng)中，當(dāng)你在不同 App 之間傳遞文件時(shí)，如果文件過(guò)大，彈窗的“取消”按鈕會(huì)在幾秒鐘之后變成“隱藏”，用戶點(diǎn)擊后可以繼續(xù)做其他操作，并不妨礙后臺(tái)的文件傳輸。
案例2
微信在接收超大文件時(shí)，增加了“發(fā)送給朋友”的選項(xiàng)，你不必等待文件在自己這邊下載完成后再發(fā)送，可以直接發(fā)送源文件給對(duì)方，同時(shí)下載：
案例3
微信撥打語(yǔ)音的界面，在等待好友接聽(tīng)的過(guò)程中，你可以看到對(duì)方朋友圈的動(dòng)態(tài)，緩解無(wú)聊的等待，也為即將進(jìn)行的語(yǔ)音聊天提供了話題：
作者：元堯
來(lái)源：人人都是產(chǎn)品經(jīng)理
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
在上一篇《如何設(shè)計(jì)高質(zhì)量B端調(diào)研問(wèn)卷？用戶研究方法(一)》一文中，詳細(xì)介紹了如何通過(guò)調(diào)研問(wèn)卷的方式，整理發(fā)現(xiàn)用戶的淺層需求。
本文將分享另一個(gè)更為深層全面的B端用戶研究方法——用戶訪談。通過(guò)面對(duì)面地溝通，以及觀察用戶的表情、行為去挖掘更深層的需求。（文末附模板下載鏈接）
下面是本次分享的文章結(jié)構(gòu)，標(biāo)??的為重點(diǎn)部分。
01
用戶訪談的兩種路徑
用戶訪談通常可以采用線上會(huì)議、電話或者線下面對(duì)面交流兩種形式。
線上會(huì)議和電話訪談的優(yōu)勢(shì)顯而易見(jiàn)，可以不受地域限制展開(kāi)調(diào)研訪談，整體的成本也比較低，設(shè)計(jì)師可以自己找領(lǐng)導(dǎo)或者協(xié)調(diào)資源去推動(dòng)。
缺點(diǎn)也是比較明顯，溝通起來(lái)效率低下，比如我們一定有過(guò)“電話里說(shuō)不清，我們見(jiàn)面詳談”的經(jīng)歷。
所以，相較而言線下訪談無(wú)疑是最佳的調(diào)研形式。首先當(dāng)面溝通更加高效，其次對(duì)于搭載硬件設(shè)備的產(chǎn)品來(lái)說(shuō)，讓受訪者在真實(shí)場(chǎng)景里操作演示，可以發(fā)現(xiàn)更多隱性問(wèn)題。
02
常見(jiàn)的3種受訪者類型
在訪談過(guò)程中通常會(huì)接觸到以下3種類型的受訪用戶，不同類型的用戶我們應(yīng)該怎么接觸交流呢？
話癆型的受訪者占大多數(shù)，通常就是想法、意見(jiàn)比較多。他們不僅有一大堆不滿意的點(diǎn)要訴說(shuō)，甚至連對(duì)應(yīng)的解決方案都想好了。
整體接觸下來(lái)，我覺(jué)得該類型的受訪者，可提供的有價(jià)值信息會(huì)更多一點(diǎn)。只不過(guò)我們要學(xué)會(huì)過(guò)濾信息。因?yàn)樗麄兊男揎椨迷~通常比較多，例如：“太難用”、“超級(jí)麻煩”、“哎 我真的是受不了啊”...
訪談話癆型的受訪者，我們需要注意無(wú)論怎么聊都要緊扣主題，防止變成了吐槽專場(chǎng)。
其次也要表達(dá)肯定，安撫情緒，并對(duì)問(wèn)題進(jìn)行進(jìn)一步提問(wèn)：“您的這些建議真的很棒，也給我們提供新的思路，我都記下來(lái)了，我還想確認(rèn)下，剛才您說(shuō)的3個(gè)關(guān)于結(jié)算環(huán)節(jié)的問(wèn)題，哪一個(gè)給您造成的困擾最大？”
顧名思義，受訪者可能是因?yàn)?/span>性格內(nèi)向或害怕說(shuō)錯(cuò)了不好意思等緣故，在受訪過(guò)程中問(wèn)一句答一句，比較容易冷場(chǎng)。答案的價(jià)值也比較低，例如：“對(duì)，是的”、“還行吧”、“沒(méi)啥感覺(jué)啊”、“反正就這樣用用吧”、“說(shuō)不上來(lái)”。
這種情況下要嘗試緩解下氛圍壓力，換個(gè)形式溝通：“就是隨便聊聊，公司派我們來(lái)呢，就是因?yàn)榉浅ｊP(guān)注用戶的使用感受，想收集一波用戶反饋與建議，您有啥不滿意的地方都可以跟我講講，越多越好?！?/span>
其次我們?cè)谔釂?wèn)的時(shí)候也要帶有引導(dǎo)性，例如：“還有呢、然后呢、具體說(shuō)說(shuō)呢”，如果對(duì)方實(shí)在說(shuō)不出所以然，最有效的辦法就是進(jìn)入上機(jī)操作環(huán)節(jié)，通常操作過(guò)程中那些問(wèn)題也會(huì)隨之暴露出來(lái)。
專業(yè)型的受訪者一般是老板或者店長(zhǎng)、經(jīng)理崗位的員工，他們對(duì)于產(chǎn)品或整個(gè)門店乃至行業(yè)都了解的比較透徹。
和這樣的受訪者溝通，不僅是局限于產(chǎn)品的一些問(wèn)題挖掘，他們會(huì)從這個(gè)行業(yè)的角度闡述一些個(gè)人的見(jiàn)解觀點(diǎn)，給我們提供一些有價(jià)值的優(yōu)化方案或者改進(jìn)方向。
例如餐飲的老板其實(shí)并不是很關(guān)心點(diǎn)餐、結(jié)算的流程有多么的順暢高效，畢竟他們不需要親自去做這些執(zhí)行，而且坦率的說(shuō)，對(duì)于絕大部分產(chǎn)品而言，好用并不能成為其核心競(jìng)爭(zhēng)力。
他們關(guān)心的是如何帶來(lái)更大的商業(yè)價(jià)值，類似于如何提升坪效，如何提升門店會(huì)員的儲(chǔ)值能力等等。而這些老板的關(guān)注點(diǎn)，也會(huì)給我們未來(lái)的產(chǎn)品優(yōu)化方向打開(kāi)新的思路，去思考如何給我們的用戶創(chuàng)造更高的商業(yè)價(jià)值。
03
我們?cè)谧鲈L談之前，首先一定要熟悉產(chǎn)品業(yè)務(wù)的相關(guān)背景、受訪商戶的基本情況。
訪談過(guò)程中可能會(huì)提及一些專業(yè)名詞，例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎(chǔ)相關(guān)知識(shí)以后，省去了不必要的解釋環(huán)節(jié)，可以使訪談推進(jìn)地更順利。
其次建議要了解下行業(yè)相關(guān)的基礎(chǔ)知識(shí)。尤其是餐飲業(yè)態(tài)，華南、北方、四川等地都因?yàn)?strong>飲食習(xí)慣的不同，在產(chǎn)品的功能和使用上的需求也是相差很大。具備了這些知識(shí)點(diǎn)以后，在提問(wèn)過(guò)程中，也更利于提出一些深刻的問(wèn)題，而不是浮于表面的提問(wèn)。
行業(yè)相關(guān)的分析報(bào)告，可以去艾瑞、36氪、發(fā)現(xiàn)報(bào)告等網(wǎng)站進(jìn)行查詢收集，在此不做贅述。
在訪談初期，需要準(zhǔn)備一份訪談框架，但并不意味著我們整個(gè)過(guò)程只能按提綱來(lái)提問(wèn)。尤其是B端這種千載難逢的訪談機(jī)會(huì)，只按規(guī)定的框架提問(wèn)屬實(shí)是太吃虧了。所以在時(shí)間允許的情況下，除了框架以內(nèi)的問(wèn)題，盡可能多發(fā)散的去提問(wèn)。
例如餐飲業(yè)態(tài)，會(huì)有各種不同載體的終端設(shè)備聯(lián)動(dòng)使用，一體機(jī)POS、手持的POS、廚房KDS、廚顯大屏、各類打印機(jī)等等都可以順便了解、調(diào)研下，讓我們對(duì)于全鏈路的協(xié)作流程也會(huì)有更深刻的認(rèn)知。
再例如后廚會(huì)涉及到KDS大屏顯示，可以問(wèn)問(wèn)目前的大屏顯示是否夠清晰（字夠大），也可以和負(fù)責(zé)海鮮稱重的工作人員聊聊，海鮮的售賣、計(jì)價(jià)流程，以及菜品雙單位（例如：1【條】魚，重量1【公斤】）的使用等等。
在溝通過(guò)程中，一定會(huì)有一些觸類旁通的收獲與問(wèn)題被發(fā)現(xiàn)。這些問(wèn)題也許來(lái)自一個(gè)模塊、或者某個(gè)特定角色，又或者是主產(chǎn)品關(guān)聯(lián)的其他后臺(tái)產(chǎn)品。
在提問(wèn)的時(shí)候要考慮到受訪者的年紀(jì)和理解能力，如果措辭過(guò)于專業(yè)，可能會(huì)導(dǎo)致受訪者理解不到位，因此溝通的過(guò)程中要盡可能的說(shuō)大白話。
我們都知道沒(méi)有經(jīng)歷過(guò)的事，很難感同身受。有時(shí)候看到客戶群里，因?yàn)楫a(chǎn)品的各種原因?qū)е律虘羟榫w激動(dòng)，我們理智上非常理解，但是情感上很難共鳴。
因此每次的門店調(diào)研，我都會(huì)抓住機(jī)會(huì)觀察整個(gè)門店的運(yùn)營(yíng)情況，去感受那種忙碌的氛圍。有時(shí)候開(kāi)始進(jìn)入營(yíng)業(yè)高峰期，機(jī)器出現(xiàn)卡頓或者外賣不接單等情況時(shí)，自己的情緒都會(huì)一下子緊張起來(lái)，也能夠深刻感受到產(chǎn)品給客戶帶來(lái)的困擾。
當(dāng)再次有產(chǎn)品迭代優(yōu)化時(shí)，這些體驗(yàn)總能讓自己能更容易代入用戶的角度思考問(wèn)題。
除了去體會(huì)產(chǎn)品對(duì)情緒的直接影響，還可以關(guān)注下整個(gè)門店的布局、收銀產(chǎn)品的數(shù)量與擺放位置、不同產(chǎn)品的協(xié)同使用等等。
這些都會(huì)幫助我們發(fā)現(xiàn)，到底什么是門店運(yùn)營(yíng)環(huán)節(jié)里最重要的模塊。
在訪談過(guò)程中，不排除受訪客戶會(huì)反饋一些暫時(shí)無(wú)法解決的問(wèn)題。這時(shí)候一定要告訴受訪商戶：“您的問(wèn)題我已經(jīng)記錄下來(lái)，回去會(huì)針對(duì)這個(gè)問(wèn)題反饋上報(bào)，最遲X天我會(huì)讓顧問(wèn)給您回復(fù)的”。
這么做一方面也是細(xì)節(jié)處維護(hù)公司品牌的整體售后體驗(yàn)，其次也有助于我們?cè)俅位卦L時(shí)，受訪商戶樂(lè)意花時(shí)間跟我們聊。
04
了解了用戶訪談的一些基本信息和注意點(diǎn)以后，到了本文核心部分，關(guān)于整個(gè)訪談的推進(jìn)過(guò)程，一共分為3個(gè)階段。
首先明確訪談的類型，用戶訪談的類型主要分為以下三種，最常見(jiàn)的就是第三種類產(chǎn)品使用回訪。
新品調(diào)研的訪談，一般是由于業(yè)務(wù)的發(fā)展，可能需要升級(jí)或者打磨一款新產(chǎn)品來(lái)滿足市場(chǎng)的需求。
在訪談的過(guò)程中，我們需要關(guān)注的點(diǎn)就是用戶畫像、商戶訴求、使用場(chǎng)景、終端載體等一系列因素。
當(dāng)去往一個(gè)城市進(jìn)行批量客戶調(diào)研的時(shí)候，偶爾會(huì)有拜訪潛在客戶的調(diào)研機(jī)會(huì)。這種類型訪問(wèn)的關(guān)注點(diǎn)集中在商戶的痛點(diǎn)與需求上。
由于是潛在客戶，我們勢(shì)必是要了解他們想要購(gòu)買或者替換產(chǎn)品的前因后果。也是借此機(jī)會(huì)了解到競(jìng)對(duì)的優(yōu)劣勢(shì)，他們放棄競(jìng)對(duì)的原因，以及我們當(dāng)前產(chǎn)品的功能是否滿足客戶的需求，還有哪些點(diǎn)不滿足，客戶重點(diǎn)關(guān)注的是什么。
使用回訪是最常見(jiàn)的訪問(wèn)類型，主要目的是對(duì)商戶進(jìn)行售后維護(hù)、提升使用體驗(yàn)。
且由于B端產(chǎn)品的復(fù)雜性和遠(yuǎn)距離特點(diǎn)，以及新功能同步給商戶存在的滯后性，公司會(huì)安排定期的上門回訪。如果有這樣的機(jī)會(huì)，UED一定要盡量申請(qǐng)跟著去門店調(diào)研。
到了最關(guān)鍵的一步，就是關(guān)于訪談的問(wèn)題設(shè)計(jì)。
總結(jié)一下，問(wèn)題的設(shè)計(jì)渠道來(lái)源主要有3種。主要還是根據(jù)調(diào)研目標(biāo)進(jìn)行問(wèn)題設(shè)計(jì)，另外兩種方式，作為輔助。
那具體問(wèn)題應(yīng)該怎么設(shè)計(jì)，這邊我們分為3個(gè)步驟，從面到點(diǎn)依次拆解進(jìn)行問(wèn)題設(shè)計(jì)。
B端產(chǎn)品的特點(diǎn)可以借用《U一點(diǎn)料》的9個(gè)字概括，“多場(chǎng)景、全鏈路、多角色”，所以設(shè)計(jì)問(wèn)題前，我們可以從場(chǎng)景+鏈路+角色/節(jié)點(diǎn)功能的維度來(lái)設(shè)計(jì)問(wèn)題。
以餐飲行業(yè)的產(chǎn)品舉例，首先建議了解自家產(chǎn)品的全場(chǎng)景業(yè)務(wù)能力。即從商家端到消費(fèi)端會(huì)經(jīng)歷的產(chǎn)品模塊和具備的現(xiàn)有功能，做到心中有數(shù)即可，畢竟不會(huì)一下子調(diào)研這么多模塊和功能。
其他ToB產(chǎn)品同理，可根據(jù)某個(gè)操作鏈路為主線，確定主流程后進(jìn)行問(wèn)題設(shè)計(jì)。其實(shí)就可以理解為確定調(diào)研的目標(biāo)。例如下圖要調(diào)研的主流程，就是提取點(diǎn)餐>下單>結(jié)算為主線。
根據(jù)剛才確定的主流程 我們找到所有關(guān)鍵節(jié)點(diǎn)進(jìn)行問(wèn)題框架設(shè)計(jì)。
以上3個(gè)步驟可以理解為，如何在功能極其復(fù)雜的B類產(chǎn)品當(dāng)中，篩選出與訪談目標(biāo)緊密相連的功能鏈路。避免我們的訪談提綱做的過(guò)于冗余沒(méi)有核心。
這點(diǎn)也非常重要，每一次去門店調(diào)研之前，先由當(dāng)?shù)刎?fù)責(zé)的顧問(wèn)與受訪商戶提前溝通。
一方面是需要與對(duì)方預(yù)約時(shí)間，另外一方面這種訪談對(duì)商戶而言就相當(dāng)于優(yōu)質(zhì)的售后服務(wù)，會(huì)有受訪商戶提前列框架，準(zhǔn)備問(wèn)題。
那么這種情況更有利于調(diào)研，因?yàn)槭茉L者明確自己的問(wèn)題點(diǎn)在哪里，就等著調(diào)研團(tuán)隊(duì)（售后團(tuán)隊(duì)）來(lái)門店后，好好拉扯一番。
萬(wàn)事具備，只欠東風(fēng)。我們?cè)?strong>盤點(diǎn)確認(rèn)下本次訪談的各類工具是否備齊，準(zhǔn)備進(jìn)入訪談階段，大致需要準(zhǔn)備的東西是以下4種材料工具。
在了解了受訪者類型、采訪者需要注意的點(diǎn)，以及帶著我們?cè)O(shè)計(jì)好的問(wèn)題，下面正式進(jìn)入訪談階段。
到達(dá)門店后，我們的顧問(wèn)會(huì)給受訪客戶做一下來(lái)訪成員介紹，并講明此次到店的目的。一般都是產(chǎn)品使用回訪，或者新功能推薦培訓(xùn)。
通常來(lái)說(shuō)，受訪商戶對(duì)來(lái)訪團(tuán)隊(duì)總是有很多”心里話“想嘮一嘮，因此暖場(chǎng)氛圍比較容易起來(lái)，也有助于我們接下來(lái)的溝通
進(jìn)入正題以后，我們會(huì)先大致了解下受訪者最近使用的體驗(yàn)以及遇到的問(wèn)題，而后會(huì)根據(jù)問(wèn)題框架進(jìn)行提問(wèn)。在整個(gè)過(guò)程中也需要注意觀察用戶在描述問(wèn)題時(shí)候的表情和肢體語(yǔ)言，搜集用戶對(duì)于產(chǎn)品的真實(shí)態(tài)度。
其實(shí)整個(gè)訪談流程我們歸納一下，需要關(guān)注的就是四個(gè)關(guān)鍵點(diǎn)，手+口+心+顏。
關(guān)于實(shí)操演示放在第一個(gè)講，是因?yàn)檫@個(gè)環(huán)節(jié)非常重要。線下訪談時(shí)強(qiáng)烈不建議“脫機(jī)訪問(wèn)”，這種形式對(duì)受訪者而言需要花更多的時(shí)間去思考問(wèn)題的答案。
會(huì)遺忘甚至想不起來(lái)當(dāng)時(shí)的具體情況，隨便的敷衍回答“嗯，還行”、“挺好的”，或者干脆彼此都不在一個(gè)頻道上。
其次，在操作過(guò)程中，建議用手機(jī)進(jìn)行拍攝記錄。因?yàn)槊總€(gè)人對(duì)產(chǎn)品的理解方式與程度不同，在用戶操作的過(guò)程中，會(huì)發(fā)現(xiàn)一些有意思的代償方案。這些也是思考的切入點(diǎn)。代償方案是否比原先設(shè)定的實(shí)現(xiàn)方法更便捷。
回去通過(guò)視頻仔細(xì)分析受訪者的操作路徑，以及每個(gè)操作之前是否有遲疑等等。并且將問(wèn)題點(diǎn)一一記錄下來(lái)。
這個(gè)就是根據(jù)問(wèn)題框架進(jìn)行提問(wèn)。在這個(gè)過(guò)程中，通常會(huì)穿插著上機(jī)操作演示，在現(xiàn)場(chǎng)記錄的時(shí)候可以先記錄個(gè)大概，等結(jié)束后再仔細(xì)整理。
問(wèn)受訪者的心理感受，其實(shí)就比較偏主觀了，我們可以從“我們家的產(chǎn)品”和“人家的產(chǎn)品”兩個(gè)維度去對(duì)比詢問(wèn)心里感受。值得注意的是，即使是這樣開(kāi)放式的提問(wèn)，也有提問(wèn)技巧。
比如“你覺(jué)得現(xiàn)在還有什么不好用的地方”就比“你感覺(jué)現(xiàn)在的產(chǎn)品好用么”這樣的提問(wèn)方式更有效。
因?yàn)楫a(chǎn)品一定是有可有優(yōu)化的空間，“有什么不好用的地方”這樣提問(wèn)的方式就是具體到了某個(gè)點(diǎn)上面，具體什么點(diǎn)不好用。
而后者的提問(wèn)方式是基于整個(gè)產(chǎn)品，受訪者可能會(huì)出于不好意思等原因直接說(shuō)“你們的東西還行吧，還可以”。
當(dāng)我們提問(wèn)產(chǎn)品優(yōu)缺點(diǎn)的時(shí)候，受訪者大部分都會(huì)帶上表情和肢體語(yǔ)言，并且情緒表現(xiàn)和性格有比較大的關(guān)系。
性格比較雷厲風(fēng)行、急躁一點(diǎn)的，通常會(huì)像連珠炮一樣瘋狂輸出，并且措辭會(huì)比較極端。例如：“真的太難用了”、“太麻煩了”、“嚴(yán)重影響門店?duì)I業(yè)了啊”。
接受到這種信息我們首先要做的就是安撫對(duì)方的情緒，其次對(duì)于這些信息要學(xué)會(huì)剔除一些夸張描述。
而性格溫和一點(diǎn)的受訪者，在闡述問(wèn)題的時(shí)候也會(huì)比較婉轉(zhuǎn)?！安皇翘奖恪?、“這個(gè)改動(dòng)沒(méi)啥感覺(jué)”、“也還行、都可以”，如果某個(gè)高頻操作真的很影響日常工作效率，往往會(huì)表現(xiàn)得很無(wú)奈，甚至還有點(diǎn)委屈。
那么無(wú)論是哪種表現(xiàn)，其實(shí)都要考驗(yàn)采訪者的經(jīng)驗(yàn)，結(jié)合產(chǎn)品的功能去考慮，找到反饋中真實(shí)有效的部分。
通過(guò)以上4個(gè)環(huán)節(jié)，其實(shí)就可以收集到很多有用的信息，語(yǔ)言信息、視頻信息、動(dòng)作表情信息等等。接下來(lái)的任務(wù)就是信息的梳理歸納。
訪談結(jié)束后，我們需要做個(gè)簡(jiǎn)單的總結(jié)回顧。將關(guān)鍵問(wèn)題再次復(fù)述確認(rèn)，進(jìn)行查漏補(bǔ)缺并且再次感謝受訪者，表達(dá)他們今天提的建議價(jià)值很大，后續(xù)會(huì)梳理出可落地的點(diǎn)優(yōu)化到產(chǎn)品當(dāng)中。
如果說(shuō)聊得比較開(kāi)心，大多數(shù)的受訪商戶都會(huì)邀請(qǐng)來(lái)訪團(tuán)隊(duì)吃個(gè)飯?jiān)僮?，也算是額外的福利。在就餐過(guò)程中的非正式場(chǎng)合交流，也可以聊聊門店的一些運(yùn)營(yíng)情況等等，幫助我們更深入的了解這個(gè)行業(yè)。
我們?cè)谠L談過(guò)程中會(huì)有大量未整理的一手記錄，結(jié)束后需盡快的梳理，盡可能詳細(xì)的記錄下用戶描述的細(xì)節(jié)、肢體動(dòng)作表情語(yǔ)言等等。建議使用石墨、語(yǔ)雀、騰訊文檔等在線編輯工具，方便分享修改。（本文提供模板可下載）如果是連續(xù)訪談幾位商戶，我會(huì)在訪談結(jié)束以后，迅速地將剛才的訪談內(nèi)容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒(méi)有的問(wèn)題，去下一家受訪商戶的時(shí)候可以驗(yàn)證下該問(wèn)題的普遍性。
② 整理落地
輸出后我們需要再次進(jìn)行提煉，將有價(jià)值可落地的問(wèn)題點(diǎn)提取出來(lái)，進(jìn)行匯報(bào)分享，并找到相對(duì)應(yīng)的產(chǎn)品研發(fā)進(jìn)行探討排期，這樣就形成了一個(gè)完整的閉環(huán)，真正做到了發(fā)現(xiàn)問(wèn)題、解決問(wèn)題.
③ 流程概括
前文絮絮叨叨說(shuō)了很多，其實(shí)關(guān)于用戶訪談這事用6個(gè)字就可以概括，簡(jiǎn)單理解：
問(wèn)誰(shuí)？問(wèn)啥？答啥？改啥？
能夠回答清楚這4個(gè)問(wèn)題，那么這就是一次有價(jià)值的訪談經(jīng)歷。
ToB業(yè)務(wù)的特點(diǎn)就是會(huì)有一定的行業(yè)壁壘，設(shè)計(jì)師在剛接觸的時(shí)候一定會(huì)有很多茫然時(shí)刻。對(duì)于各種專業(yè)詞匯的一臉懵，對(duì)于行業(yè)的不了解。
或者很多人對(duì)于B端的認(rèn)知還停留在，B端好像沒(méi)啥好設(shè)計(jì)的，都是現(xiàn)成的組件庫(kù)拖一拖，成就感比C端差遠(yuǎn)了。
那么做訪談、體驗(yàn)優(yōu)化的意義是什么呢？
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
你有沒(méi)有注意過(guò)，App底部的圖標(biāo)是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換（硬切過(guò)渡），來(lái)完成狀態(tài)切換。
當(dāng)我看完上百個(gè)動(dòng)態(tài)后，找到了更有趣的方式...
02 App底部導(dǎo)航構(gòu)成
通常由圖標(biāo)、文字/點(diǎn)線裝飾、和底板卡片組成，（當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字），但設(shè)計(jì)師在進(jìn)行動(dòng)態(tài)設(shè)計(jì)時(shí)則是針對(duì)這3部分。
03 Tab Bar動(dòng)態(tài)類型
動(dòng)態(tài)效果由弱到強(qiáng)，視覺(jué)層級(jí)由低到高依次排序：圖標(biāo)動(dòng)態(tài) — 裝飾元素動(dòng)態(tài) — 底板卡片動(dòng)態(tài)。（根據(jù)本文案例效果來(lái)排序，但效果不同會(huì)有所差異）
▍圖標(biāo)動(dòng)態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡(jiǎn)單的分為：線性、面性還有線面。在這基礎(chǔ)上通過(guò)修改顏色或造型，又能延展出更多風(fēng)格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過(guò)調(diào)整百分百參數(shù)來(lái)控制線條生長(zhǎng)。
但只是單色修剪，看起來(lái)很單調(diào)。我們可以在這個(gè)動(dòng)畫基礎(chǔ)上再多復(fù)制幾層，并分別加入品牌色，這樣可以讓視覺(jué)看起來(lái)更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標(biāo)的位置屬性，便能得到故障效果。
如果你覺(jué)得這些太浮夸，那么單個(gè)圖標(biāo)添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會(huì)過(guò)多吸引用戶注意力。但對(duì)于帶有娛樂(lè)類屬性的產(chǎn)品來(lái)說(shuō)，可能會(huì)顯得有些普通。
我們可以考慮使用遮罩來(lái)制作動(dòng)態(tài)，首先在圖標(biāo)周圍繪制幾個(gè)圓，再將圖標(biāo)外輪廓，作為圓的遮罩，來(lái)控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時(shí)間，設(shè)計(jì)師們可能會(huì)技癢，而將圖標(biāo)繪制的更加豐富，來(lái)營(yíng)造氛圍。
對(duì)于這類圖標(biāo)，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴(kuò)張的原則來(lái)調(diào)整基礎(chǔ)屬性，便能制作出細(xì)節(jié)豐富的出場(chǎng)動(dòng)畫。
（物理狀態(tài)：該物體在現(xiàn)實(shí)場(chǎng)景下的狀態(tài)，上圖獎(jiǎng)杯真實(shí)世界狀態(tài)通常是放置地面，所以出場(chǎng)方向是從下到上。但假如你的圖標(biāo)是錦旗，那么物理狀態(tài)應(yīng)該是掛在墻上，所有出場(chǎng)方向是從上到下）
當(dāng)然如果去掉高光和投影，在制作一些動(dòng)態(tài)時(shí)會(huì)更方便。
例如：復(fù)制一顆星，將其初始位置設(shè)定為一個(gè)獎(jiǎng)杯的距離，并記錄關(guān)鍵幀，然后整體再移動(dòng)一個(gè)獎(jiǎng)杯距離。耳朵則調(diào)整路徑來(lái)完成移動(dòng)和變形，這樣便能營(yíng)造出3d旋轉(zhuǎn)的錯(cuò)覺(jué)。
對(duì)于結(jié)構(gòu)復(fù)雜的圖標(biāo)，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標(biāo)修剪路徑的起始點(diǎn)方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動(dòng)態(tài)?
如果你覺(jué)得前面這些方案不夠新穎，那我們可以對(duì)裝飾元素下手。（當(dāng)然這類方案很少見(jiàn)，原因在于商業(yè)價(jià)值不足，實(shí)現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習(xí)思路）
在一些年輕化產(chǎn)品中，如果圖標(biāo)含義很容易理解，那么設(shè)計(jì)師可能會(huì)用線或點(diǎn)來(lái)替代文字，讓整體更簡(jiǎn)潔。
國(guó)外設(shè)計(jì)師Tubik，通過(guò)讓點(diǎn)元素在移動(dòng)時(shí)呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過(guò)動(dòng)態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動(dòng)畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設(shè)計(jì)成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點(diǎn)沿路徑運(yùn)動(dòng)。最后通過(guò)蒙版來(lái)控制整體動(dòng)畫顯示范圍，這個(gè)方案看起來(lái)適合科技或游戲類產(chǎn)品。
通過(guò)調(diào)整元素路徑來(lái)改變其造型，模擬液體滴落，再通過(guò)蒙版縮放，讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。
假如你的圖標(biāo)設(shè)計(jì)的足夠巧妙，我們可以提前繪制好關(guān)鍵筆畫的運(yùn)動(dòng)軌跡，便能通過(guò)修剪這條軌跡來(lái)完成筆畫的移動(dòng)。
▍底板卡片動(dòng)態(tài)?
這類動(dòng)態(tài)少見(jiàn)的原因在于其動(dòng)態(tài)效果面積大，視覺(jué)層級(jí)高，容易過(guò)度吸引用戶注意力。目前也只是在個(gè)別產(chǎn)品中看過(guò)卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時(shí)非常麻煩。
我們有更簡(jiǎn)單的方法，先多畫出一個(gè)圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡(jiǎn)單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個(gè)缺點(diǎn)：會(huì)收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大小）
完成圓滑處理后，修改其他元素的基礎(chǔ)屬性即可。
目前能記起的只有美團(tuán)外賣看過(guò)這效果。但為了降低視覺(jué)干擾，其弱化了彈性次數(shù)。
這個(gè)效果靈感來(lái)源于Dribbble設(shè)計(jì)師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運(yùn)算模式改為相減就行，其他元素同樣調(diào)整基礎(chǔ)屬性。
此方案目前還沒(méi)有在其他產(chǎn)品中看過(guò)，究其原因還是效果太過(guò)搶眼。
看了這么多，其實(shí)不難發(fā)現(xiàn)。同一個(gè)圖標(biāo)，只需要改變不同屬性或元素的運(yùn)動(dòng)方式，便能帶來(lái)不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來(lái)。
正是它們之間這種奇妙的融合，給我們帶來(lái)了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說(shuō)兩句：
每個(gè)產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶，動(dòng)態(tài)效果也有強(qiáng)有弱。好的動(dòng)態(tài)應(yīng)該是能與其進(jìn)行匹配，而不是根據(jù)某個(gè)產(chǎn)品得出一個(gè)絕對(duì)的答案。
本文演示了不同類型圖標(biāo)用什么動(dòng)態(tài)，并不代表只能這樣用。動(dòng)態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些，而以上只是最常見(jiàn)的動(dòng)態(tài)屬性組合方式，所以請(qǐng)不要局限你的想法。
作者：幺零三 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.bouu.cn