很多產(chǎn)品經(jīng)理和設(shè)計(jì)師在設(shè)計(jì) B 端產(chǎn)品界面的時(shí)候不知道該怎么辦，今天筆者給大家匯總了一些 B 端典型界面及其設(shè)計(jì)原則，幫助大家從容應(yīng)對(duì)界面設(shè)計(jì)，不再不知所措。
Dashboard 頁通常作為產(chǎn)品的首頁出現(xiàn)，產(chǎn)品內(nèi)各種重要的數(shù)據(jù)和信息都會(huì)展現(xiàn)在 Dashboard 上。用戶可以通過點(diǎn)擊 Dashboard 上的卡片或卡片上某條數(shù)據(jù)，快速鏈接到詳情，這大大縮短了用戶獲取信息的路徑。產(chǎn)品團(tuán)隊(duì)也可以通過 Dashboard 頁，向用戶傳遞產(chǎn)品迭代、運(yùn)營活動(dòng)等內(nèi)容。
模塊獨(dú)立
Dashboard 是由承載不同內(nèi)容的卡片組成的，每塊卡片的內(nèi)容都要獨(dú)立，不該交叉。
有效統(tǒng)計(jì)
Dashboard 上所呈現(xiàn)的數(shù)據(jù)最重要的就是該數(shù)據(jù)是否為用戶真實(shí)所需，如果統(tǒng)計(jì)數(shù)據(jù)不對(duì)用戶產(chǎn)生任何價(jià)值，那還不如不統(tǒng)計(jì)，否則會(huì)干擾用戶。
短路徑導(dǎo)航
了解用戶需要使用 Dashboard 的核心目標(biāo)，為用戶通過 Dashboard 達(dá)到數(shù)據(jù)詳情頁提供最短的路徑導(dǎo)航。
使用場(chǎng)景
將用戶需要待辦的事項(xiàng)、事項(xiàng)處理的進(jìn)度等都完整的展示出來，方便用戶隨時(shí)查看，提升用戶的工作效率。
核心功能
核心統(tǒng)計(jì)數(shù)據(jù)、待辦任務(wù)、快捷入口、通知公告等。
設(shè)計(jì)建議
使用場(chǎng)景
當(dāng)新用戶第一次使用產(chǎn)品時(shí)，為了減少用戶的困難和快速完成用戶的任務(wù)，新手引導(dǎo)頁可以將核心操作鏈路展現(xiàn)給用戶。
核心功能
產(chǎn)品介紹、核心功能使用手冊(cè)、相關(guān)內(nèi)容指引。
設(shè)計(jì)建議
使用場(chǎng)景
監(jiān)控頁是數(shù)據(jù)可視化頁面中的一種，它通過一系列對(duì)數(shù)據(jù)高度概括的圖表來展現(xiàn)系統(tǒng)的核心指標(biāo)。指標(biāo)監(jiān)控頁的使用者通常是管理者（即決策者），他們需要看到系統(tǒng)整體的運(yùn)行狀態(tài)，監(jiān)控全局?jǐn)?shù)據(jù)，從而調(diào)整自己的決策。
核心功能
關(guān)鍵指標(biāo)統(tǒng)計(jì)。
設(shè)計(jì)建議
使用場(chǎng)景
分析頁也是數(shù)據(jù)可視化頁面中的一種，它通過對(duì)系統(tǒng)多維度的詳細(xì)分析來展示系統(tǒng)的情況，從而使使用者可以發(fā)現(xiàn)問題，并盡早找出解決辦法。監(jiān)控頁重在總覽，而分析頁重在明細(xì)，因此，分析頁的使用者通常是執(zhí)行者。
核心功能
關(guān)鍵指標(biāo)明細(xì)分析。
設(shè)計(jì)建議
表格頁可以處理大量的數(shù)據(jù)條目，同時(shí)可以導(dǎo)航至對(duì)應(yīng)數(shù)據(jù)的詳情頁。在表格頁中，用戶可以查詢自己所需要的數(shù)據(jù)條目，以及對(duì)比數(shù)據(jù)條目、新增數(shù)據(jù)條目、刪除數(shù)據(jù)條目等。
模塊清晰
表格頁通常由查詢區(qū)、按鈕區(qū)、表格區(qū)、分頁器等模塊組成，要保證模塊間層次合理與清晰。
數(shù)據(jù)格式
表格頁中最大的模塊為表格區(qū)，該區(qū)域由列組成，列由數(shù)據(jù)構(gòu)成，列中的數(shù)據(jù)格式展現(xiàn)要符合業(yè)務(wù)及用戶的需求，例如“星期三”不能表現(xiàn)成“星期 3”。
數(shù)據(jù)對(duì)齊
對(duì)齊方式合理的數(shù)據(jù)，有利于用戶定位數(shù)據(jù)、分析數(shù)據(jù)。通常數(shù)據(jù)對(duì)齊方式為數(shù)值右對(duì)齊，文本左對(duì)齊，特殊情況居中對(duì)齊。
全表格頁是最常見的產(chǎn)品界面，全表格頁主要由篩選條件、按鈕區(qū)、表格區(qū)、分頁器組成。表格區(qū)是表格頁中的主角，當(dāng)界面數(shù)據(jù)只需要一張表呈現(xiàn)的時(shí)候，使用全表格頁。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計(jì)建議
使用場(chǎng)景
左樹右表頁的界面布局基本與全表格頁差不多，只不過其多了一顆左側(cè)的樹來幫助用戶導(dǎo)航。
核心功能
導(dǎo)航樹、多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計(jì)建議
使用場(chǎng)景
上下表格頁是表格嵌套表格幻化過來的，通常上表格為主表，下表格為子表，子表展示了主表中某條數(shù)據(jù)的詳情。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計(jì)建議
使用場(chǎng)景
左右表格頁與上下表格頁有異曲同工之妙，左右表格頁通常左表為主表，右表為子表。
核心功能
多字段篩選、操作區(qū)、表格區(qū)、分頁器。
設(shè)計(jì)建議
使用場(chǎng)景
折疊表格頁的出現(xiàn)通常是頁面上表格的信息需要分組，每一張表格展現(xiàn)一類信息。
核心功能
分組、操作區(qū)、表格區(qū)、分頁器。
設(shè)計(jì)建議
表單頁是用于信息添加和錄入的頁面類型，用戶根據(jù)系統(tǒng)的要求將必填字段信息填寫完成，從而提交給系統(tǒng)，由系統(tǒng)接收并輸出信息。
控件合理
通過選擇合理的數(shù)據(jù)錄入控件，及通過合理的信息組織形式，幫助用戶可以快速完成數(shù)據(jù)錄入的任務(wù)。
明確好用
表單頁面中，每個(gè)表單項(xiàng)都要做到自身體驗(yàn)的明確與好用，例如針對(duì)一些有通用值的表單項(xiàng)建議設(shè)置默認(rèn)值，針對(duì)必填項(xiàng)要明確標(biāo)明，針對(duì)表單項(xiàng)標(biāo)題、錯(cuò)誤提示要明確傳達(dá)含義。
清晰反饋
表單錄入完后，允許用戶進(jìn)行返回、取消、清空、保存等操作，并且操作后提供明確的反饋，例如保存成功、保存失敗等。
使用場(chǎng)景
表單項(xiàng)較少，表單信息直接平展即可，表單錄入任務(wù)簡(jiǎn)單且快速。
核心功能
表單項(xiàng)、填寫說明、操作按鈕區(qū)。
設(shè)計(jì)建議
使用場(chǎng)景
高級(jí)表單頁通常需要用戶填寫大量的信息，這樣大型而復(fù)雜的數(shù)據(jù)錄入任務(wù)需要被拆解為多個(gè)部分進(jìn)行。
核心功能
分組/卡片分組、表單項(xiàng)、操作按鈕區(qū)。
設(shè)計(jì)建議
使用場(chǎng)景
當(dāng)表單填寫有相應(yīng)的步驟順序時(shí)，采用分步驟表單較為合適。
核心功能
步驟條、表單項(xiàng)、操作按鈕區(qū)。
設(shè)計(jì)建議
使用場(chǎng)景
當(dāng)表單塊歸屬不同的分類時(shí)，需要使用帶樹表單頁去處理。
核心功能
導(dǎo)航樹、表單項(xiàng)、操作按鈕區(qū)。
設(shè)計(jì)建議
詳情頁的作用是向用戶展示一個(gè)對(duì)象的完整信息，它的主要作用是幫助用戶信息瀏覽，同時(shí)允許對(duì)詳情頁整體的數(shù)據(jù)或某部分?jǐn)?shù)據(jù)發(fā)起編輯等操作。
層次分明
針對(duì)信息較少的詳情，平鋪展示即可；針對(duì)信息量大的詳情，需進(jìn)行合理組織，保證層級(jí)分明。
結(jié)構(gòu)相近
針對(duì)詳情信息的模塊化組織，要求盡量模塊的結(jié)構(gòu)相似，減少復(fù)雜性，降低用戶的理解成本。
使用場(chǎng)景
基礎(chǔ)詳情頁信息量較少，信息復(fù)雜度低，直接平鋪展示即可。
核心功能
詳情信息。
設(shè)計(jì)建議
使用場(chǎng)景
高級(jí)詳情頁需要展示的內(nèi)容量較大，且復(fù)雜度高，需要拆分為多組來幫助用戶瀏覽信息。
核心功能
卡片、分組、詳情信息。
設(shè)計(jì)建議
圖
使用場(chǎng)景
詳情頁中有部分字段由于業(yè)務(wù)需要，會(huì)進(jìn)行修改。
核心功能
詳情信息、可編輯信息。
設(shè)計(jì)建議
我們?nèi)绻茏龅綄?duì) B 端通用型界面了然于胸，那么在面對(duì)用戶需求時(shí)才能從容應(yīng)對(duì)，舉一反三。不斷總結(jié)和抽象，是我們應(yīng)對(duì)各種需求的不二法寶。
文章來源：優(yōu)設(shè)網(wǎng) 作者：知果日記
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
在開發(fā)一款高品質(zhì)的產(chǎn)品的過程中最重要的一個(gè)環(huán)節(jié)是了解誰是你的用戶，他們的需求是什么。
設(shè)計(jì)著作《軟件創(chuàng)新之路——沖破高技術(shù)營造的牢籠》里首度提出產(chǎn)品設(shè)計(jì)和開發(fā)的用戶“人物角色”概念。正如設(shè)計(jì)師金·古德溫在2005年所述：“人物角色就是一個(gè)用戶原型，可以用來幫助指導(dǎo)產(chǎn)品功能、導(dǎo)航、交互、甚至視覺設(shè)計(jì)方面的決策?！边@種原型并不是真正的人，而是結(jié)合對(duì)真實(shí)用戶的事實(shí)和觀察而形成的一個(gè)令人記憶深刻的人物。
與市場(chǎng)細(xì)分不同，用戶畫像代表著目標(biāo)和行為模式，而不是人口屬性或工作職責(zé)。用戶畫像可以幫助設(shè)計(jì)成為共同參考點(diǎn)，有助于在設(shè)計(jì)討論時(shí)聚焦在特定用戶上，使用場(chǎng)景可幫助測(cè)試系統(tǒng)將用戶需要的功能點(diǎn)集成到產(chǎn)品上。
*注：用戶特征、人物畫像和使用場(chǎng)景對(duì)比表
用戶畫像常用于以下三個(gè)場(chǎng)景：
產(chǎn)品設(shè)計(jì)：開發(fā)前期的產(chǎn)品定位設(shè)計(jì)，幫助確立產(chǎn)品定位、設(shè)計(jì)目標(biāo)、設(shè)計(jì)策略與準(zhǔn)則；
產(chǎn)品營銷：促進(jìn)其他工作，如指導(dǎo)運(yùn)營對(duì)特定用戶進(jìn)行推送活動(dòng)信息，推廣信息，個(gè)性化推薦等。
產(chǎn)品決策：分析用戶畫像，對(duì)產(chǎn)品的發(fā)展現(xiàn)狀和發(fā)展趨勢(shì)進(jìn)行預(yù)測(cè)，及時(shí)調(diào)整產(chǎn)品發(fā)展路線。
整體來說，用戶畫像多采用定性的研究方法來進(jìn)行角色劃分，主要可采用的資料來源有：人種學(xué)研究、情境調(diào)查、觀察法、訪談法、桌面研究等，具體實(shí)行時(shí)會(huì)根據(jù)業(yè)務(wù)情況稍作調(diào)整。
用戶畫像的范圍可以很廣，也可以很窄。需要先確定這些用戶畫像是用來做什么的？只有回答了這個(gè)問題，才能確定用戶畫像的適當(dāng)范圍。
范圍越廣，支持這些用戶畫像的數(shù)據(jù)就越淺。在廣泛的情況和場(chǎng)景中尋找具有相似動(dòng)機(jī)、目標(biāo)、信息需求、態(tài)度和行為的客戶群體是不現(xiàn)實(shí)的。
可以在大量的產(chǎn)品和服務(wù)中找到相似的部分，但是您需要使用更少、更通用的屬性來描述它們。
范圍越小，數(shù)據(jù)就越豐富。在范圍狹窄的情況下，用戶畫像屬性將直接與特定產(chǎn)品或場(chǎng)景相關(guān)。人們的行為和需求會(huì)受到相關(guān)產(chǎn)品或服務(wù)環(huán)境的極大影響。
有針對(duì)性的用戶畫像范圍將允許您在用戶的動(dòng)機(jī)、目標(biāo)、態(tài)度和行為中找到更多的主題。此類信息使團(tuán)隊(duì)能夠做出特定的設(shè)計(jì)決策。
首先了解公司對(duì)現(xiàn)有用戶和目標(biāo)用戶的理解程度，對(duì)他們有什么看法。
如果產(chǎn)品擁有確定的客戶基礎(chǔ)，就與直接接觸這些工作的人進(jìn)行交談，例如：銷售人員、客戶支持人員、市場(chǎng)調(diào)研員、技術(shù)銷售咨詢師、培訓(xùn)師等。
如果公司嘗試著為產(chǎn)品拓展用戶或者打入新市場(chǎng)，就與負(fù)責(zé)相關(guān)事宜的人交談。就這些人對(duì)用戶和客戶的個(gè)人經(jīng)驗(yàn)以及用戶不同的方面進(jìn)行訪問。
圍繞用戶對(duì)產(chǎn)品的整體體驗(yàn)來組織訪談或?qū)嵉卦L問，而不是圍繞特定任務(wù)。
銷售和市場(chǎng)營銷人員通常擁有詳細(xì)的人口概況和市場(chǎng)研究，能夠提供完整的用戶分類。如果有市場(chǎng)細(xì)分，尤其是借助于使用數(shù)據(jù)或其他行為數(shù)據(jù)所得出的，就值得咨詢。
用戶常見的疑問和遇到的一些問題，應(yīng)該咨詢論壇或社區(qū)站點(diǎn)以及支持系統(tǒng)，它們能夠提供支持性數(shù)據(jù)，將這些信息變成人物角色的一部分。
從所收集的信息中提取共同主線。如：用戶擁有哪些共同點(diǎn)？頻繁出現(xiàn)的內(nèi)容有哪些？共同的期望？
然后列出用戶的重要不同點(diǎn)。例如影響產(chǎn)品用戶行為的不同屬性范圍：使用頻率、使用強(qiáng)度、業(yè)務(wù)規(guī)模等；
一旦決定要包含哪些屬性以及每個(gè)屬性在用戶群體中如何變化，就該借助于研究中觀察到的個(gè)人細(xì)節(jié)和軼事從屬性群組中合成現(xiàn)實(shí)的用戶了。
在一些情況中，需適當(dāng)增加細(xì)節(jié)、創(chuàng)造一個(gè)界定屬性范圍內(nèi)的具體事實(shí)。
例如：
可調(diào)整為：
使用從訪談中收集的資料，充實(shí)剩余的屬性，合并從相似用戶中提取出來的細(xì)節(jié)；
增加一些針對(duì)產(chǎn)品領(lǐng)域的具體信息；
然后與她具體的技術(shù)細(xì)節(jié)相結(jié)合；
情景描述的是一個(gè)人對(duì)一個(gè)活動(dòng)或一種情形如何表現(xiàn)或思考的故事。與故事一樣，情景傳達(dá)的是產(chǎn)品使用方面的細(xì)微差別，幫助利益相關(guān)者把產(chǎn)品放入真實(shí)生活情境中。
描述現(xiàn)狀的情景通常叫情境式情景（也稱問題情景），因?yàn)樗鼈冊(cè)噲D展現(xiàn)如何改善現(xiàn)狀。對(duì)改進(jìn)方案進(jìn)行預(yù)想的情景叫設(shè)計(jì)情景。
情境式情景——主要用于設(shè)計(jì)早期階段。通過生動(dòng)地闡釋現(xiàn)有實(shí)踐中的問題或空白，使團(tuán)隊(duì)開始設(shè)想可能的解決方案。
設(shè)計(jì)情景——適用于整個(gè)設(shè)計(jì)和開發(fā)過程。在早期的頭腦風(fēng)暴中，設(shè)計(jì)情景能夠激發(fā)對(duì)概念的討論和反饋。有了早期的概念，設(shè)計(jì)情景可以幫助團(tuán)隊(duì)完成可能的成果。早起的設(shè)計(jì)情景也可以作為訪談提示，探出潛在用戶的反饋。
情景是通過講故事來創(chuàng)造的，可以提取自研究中所聽到的故事加以處理，把一堆故事減少到只剩最相關(guān)的。
情景基于以目標(biāo)和人們?yōu)閷?shí)現(xiàn)目標(biāo)而采取的行動(dòng)。如果有現(xiàn)成的人物角色，就說明可能已經(jīng)確立了目標(biāo)和行動(dòng)，這些將形成情景的基礎(chǔ)。如果沒有可用的人物角色，就返回研究分析報(bào)告，列出每個(gè)目標(biāo)受眾最緊迫的目標(biāo)。
決定把哪些活動(dòng)包含在情景中時(shí)，針對(duì)研究人物角色的每個(gè)主要目標(biāo)：
為了實(shí)現(xiàn)這一目標(biāo)，這些活動(dòng)中的哪些最經(jīng)常采用？
為了實(shí)現(xiàn)這一目標(biāo)，這些活動(dòng)中的哪些是必需的？
哪些頻繁或必要的活動(dòng)會(huì)作為單一序列的一部分發(fā)生？
情景是以用戶視角為基礎(chǔ)的。用戶無法認(rèn)知的任何東西都不應(yīng)該納入情景的一部分，尤其是情境式情景。情景必須要概要描述最重要的用戶行為和系統(tǒng)反應(yīng)。
情境式情景通常給人一種“XX的一天”的感覺，描述幾個(gè)小時(shí)內(nèi)或一天當(dāng)中的一系列任務(wù)。
例如：
情景盡量概括一些，不要詳述界面元素或系統(tǒng)實(shí)現(xiàn)。詮釋故事的整體結(jié)構(gòu)比解釋所有細(xì)節(jié)更重要。
分享人物角色時(shí)最難的莫過于用一種簡(jiǎn)練且有益的方式來表達(dá)他們。
用一種方便使用的形式概括人物角色。例如可將其制成板狀使其更易于保存、更容易找到，并且不太可能被弄丟；也可以把用戶的圖片和關(guān)鍵屬性做成海報(bào)，并把它們訂到墻上，強(qiáng)化其存在感。
為避免完成畫像后將其束之高閣，需要鼓勵(lì)部門員工在開會(huì)期間使用人物角色進(jìn)行討論，并且思考各個(gè)功能如何為各種各樣的人物角色服務(wù)。
項(xiàng)目需要多樣化的視角，用戶畫像自身尚不足以傳達(dá)一系列的設(shè)計(jì)見解。用戶畫像要與情景、體驗(yàn)?zāi)Ｐ?、任?wù)分析和傳統(tǒng)的書面報(bào)告結(jié)合使用，而不是替代他們。 最后，感謝大家的閱讀，希望本篇文章能夠?qū)Υ蠹矣兴鶐椭?
* 注：本篇文章有借鑒網(wǎng)站資料和書籍等多方面內(nèi)容。
文章來源：站酷 作者：禾x日
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
為了保證這篇文章的質(zhì)量，追波年度的每個(gè)作品都超過550贊。在此原則下挑選了828件作品，作品總的大小為2.2G。
相比于《2020年追波設(shè)計(jì)流行趨勢(shì)》多出了328件作品。
從挑選出的828件作品中，排名前十的作品中9件為B端設(shè)計(jì)，另一件作品也是B端產(chǎn)品C端化的產(chǎn)物。其中：
B端界面設(shè)計(jì)占比476/828，57.4%；
C端界面設(shè)計(jì)占比180/828，21.7%；
視頻動(dòng)效作品占比223/828，26.9%；
明眼人都能看出其中的比重關(guān)系，B端設(shè)計(jì)再次大火，為什么是再次？因?yàn)锽端設(shè)計(jì)之前火過，只不過沒有趕上一個(gè)好的時(shí)代，在C端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著C端市場(chǎng)飽和與數(shù)字化的浪潮下，實(shí)體經(jīng)濟(jì)、ToB 、ToG的產(chǎn)業(yè)再次迎來了它的曙光。視頻動(dòng)效的作品占比也已超過C端界面設(shè)計(jì)，相信今年視頻動(dòng)效作品占比還會(huì)再次提升。
追波年度最佳作品來自大家最熟悉的UI8團(tuán)隊(duì)中的Tran Mau Tri Tam ?，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個(gè)贊。
為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個(gè)網(wǎng)頁與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕，你可以理解它就是一個(gè)平面作品，一個(gè)字體加幾何形體構(gòu)建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標(biāo)題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標(biāo)題文字中脫穎而出，這種使用線條突出重要信息的設(shè)計(jì)也是今年追波設(shè)計(jì)流行趨勢(shì)之一。
MetroUI是Windows8的界面設(shè)計(jì)語言，在2010年至2013年間曾經(jīng)風(fēng)靡一時(shí)，那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年，現(xiàn)在國家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng)To B 、To G 的發(fā)展元年，通過幾何色塊（MetroUI）實(shí)現(xiàn)B端產(chǎn)品與C端設(shè)計(jì)風(fēng)格的傳承與銜接，你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng)，毛玻璃的多彩高斯模糊漸變風(fēng)，年度作品當(dāng)之無愧。
最后來看下按鈕的設(shè)計(jì)，正常的按鈕要么文字加色塊，要么左圖標(biāo)加右文字，它設(shè)計(jì)成左文本加右圖標(biāo)，更加注重信息的可讀性和易讀性，也體現(xiàn)B端設(shè)計(jì)重功能和交互體驗(yàn)，視覺點(diǎn)到為止的設(shè)計(jì)理念。
下面我們來欣賞年度最佳作品里面的流行趨勢(shì)吧。
字體三原則：可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章，肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上，不能過于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每個(gè)位設(shè)計(jì)師都息息相關(guān)，因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí)，不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感，更加適合用戶閱讀。
通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容，豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時(shí)會(huì)輸入文本，“我愛你”、“我Love你”、“我ai你”、“我??你”，哪個(gè)更加會(huì)有情感共鳴呢？不言而喻，相信你心中已經(jīng)有答案了。
在標(biāo)題文字上添加曲線來突出重要文案是2021追波最流行的趨勢(shì)之一，第一個(gè)設(shè)計(jì)目的就是突顯文字，其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中，簽字的文本都是手寫體的感覺，手寫體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息，也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。
除了突顯文本外，曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測(cè)試，通過真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。
多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的，多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對(duì)比來制造畫面的沖突，需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。
多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新，給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上，為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。
B端設(shè)計(jì)的火爆帶動(dòng)了B端相關(guān)模塊設(shè)計(jì)，更多的人也愿意嘗試B端相關(guān)模塊設(shè)計(jì)，側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng)，好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì)，而是一套實(shí)用美觀可落地的設(shè)計(jì)。
儀表盤設(shè)計(jì)是一個(gè)很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺(tái)界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài)，大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù)，團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長(zhǎng)等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同，自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài)，需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。
復(fù)雜的事情簡(jiǎn)單化，簡(jiǎn)單的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情流程化，流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù)，可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計(jì)的難點(diǎn)，需要對(duì)業(yè)務(wù)高度抽象，讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。
B端C化是B端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計(jì)的視覺靠齊，國內(nèi)B端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外，由于業(yè)務(wù)的發(fā)展，B端產(chǎn)品也開始移動(dòng)化、智能化，國內(nèi)主流還是通過小程序、H5來現(xiàn)實(shí)B端產(chǎn)品C端化。
輕代碼化是一種低代碼賦能無代碼的方式，彌補(bǔ)無代碼拓展性差、覆蓋場(chǎng)景少的問題。在保有無代碼靈活、易用、快捷的同時(shí)，又能覆蓋低代碼使用場(chǎng)景。簡(jiǎn)單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng)，輕松實(shí)現(xiàn)多元業(yè)務(wù)場(chǎng)景的數(shù)字化管理。
輕代碼化將功能進(jìn)行打包，升級(jí)成全局可以用的配置，技術(shù)人員配置好后，業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版，綁定對(duì)應(yīng)的變量即可使用。
為什么人加色塊的組合方式能流行起來？還是B端行業(yè)流行帶動(dòng)的。B端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外，還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。
當(dāng)然企業(yè)也需要進(jìn)行營銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營銷的功能。真可謂一舉兩得。
這種風(fēng)格更適合大公司，國內(nèi)的一些手機(jī)廠商OPPO、VIVO等也會(huì)通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合，而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應(yīng)當(dāng)下UI扁平化的設(shè)計(jì)趨勢(shì)。蘋果Mac OS Big Sur系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個(gè)技法”，完全能滿足UI設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是Mac用戶可以享有OC一年免費(fèi)的使用權(quán)，具體安裝購買方法可以上“某寶”就可以輕松搞定，真香。
輕擬物這幾年一直流行，在UI設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物，其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光（環(huán)境光）五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡(jiǎn)潔的畫面中，扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中，比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡(jiǎn)單且出彩。
簡(jiǎn)潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則，在B端產(chǎn)品界面中更加需要簡(jiǎn)潔設(shè)計(jì)，我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮?jiǎn)潔了?；氐浆F(xiàn)實(shí)當(dāng)需求功能不斷增加，產(chǎn)品界面的編排如何取舍，如何保證界面的簡(jiǎn)潔是設(shè)計(jì)師需要深度思考的問題？如何與上級(jí)溝通？該功能是否可做可不做？是否需要埋點(diǎn)用數(shù)據(jù)說話？如果只是一味競(jìng)品有我們就需要有，功能不斷累加只會(huì)讓界面越來越重。
幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，產(chǎn)品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個(gè)整體。B端產(chǎn)品視覺設(shè)計(jì)C端化的進(jìn)程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產(chǎn)品的視覺設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。
幾何圖形另一個(gè)場(chǎng)景化的地方就是品牌，作為一名UI設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程，品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主，至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。
暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長(zhǎng)增大，如何在夜晚這個(gè)特定場(chǎng)景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。
在設(shè)計(jì)暗黑主題時(shí)，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計(jì)準(zhǔn)則，即正文和背景之間的對(duì)比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì)，可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測(cè)試界面的對(duì)比度。
為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁面來快速的搭建界面，但在B端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一，它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。
產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分，也就是幾個(gè)模塊，每一部分都是具有獨(dú)立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產(chǎn)品族中可以重用和互換，相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置，就可以創(chuàng)建不同需求的產(chǎn)品，滿足客戶的定制需求 。
插畫作為設(shè)計(jì)的一大品類，不同的插畫師都有自己擅長(zhǎng)的風(fēng)格，本質(zhì)是都有自己的個(gè)性，但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事，表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合，插畫不會(huì)過時(shí)，而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。
幾何插畫算是插畫簡(jiǎn)化的一種表現(xiàn)形式，人和物的形態(tài)不再寫實(shí)，而是抽象成幾何圖形拼湊的感覺，同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn)，傳達(dá)出簡(jiǎn)潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上，平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。
線面插畫最近一兩年非常流行，準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來，這時(shí)候用線條簡(jiǎn)單勾勒后，結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí)，可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí)，還能保持界面的干凈整潔。
界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì)，微交互和動(dòng)效設(shè)計(jì)是繞不開的，UI界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒，取悅用戶。C端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了，一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品，還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值，共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。
Mg動(dòng)畫需要很好的節(jié)奏感、韻律，每一個(gè)場(chǎng)景動(dòng)畫都需要其中的元素進(jìn)行連接變化，讓轉(zhuǎn)場(chǎng)動(dòng)畫更加自然，MG人物動(dòng)畫通過點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然，通過粒子效果讓特定場(chǎng)景無限循環(huán)會(huì)讓人更加印象深刻。
MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行，三維圖標(biāo)的應(yīng)該場(chǎng)景還是需要有較大留白空間的界面，因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個(gè)更好的問題上？設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合，存在即合理。合適最重要，它們都會(huì)有適合自己的場(chǎng)景和設(shè)計(jì)價(jià)值。
為什么輕三維在界面設(shè)計(jì)中占有一席之位？一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容，并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素，比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等，這些都是用戶日常使用系統(tǒng)軟件常見的元素，通過簡(jiǎn)單的幾何形體建?！驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角，結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加，特別是當(dāng)下流行的毛玻璃效果，玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光，局部的漸變色或環(huán)境光更佳出彩。
P4D是PS加C4D的設(shè)計(jì)表現(xiàn)技法，也是視覺設(shè)計(jì)的最后一個(gè)環(huán)節(jié)，通過PS對(duì)C4D的渲染圖片進(jìn)行調(diào)色，利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強(qiáng)大的合成功能，將渲染圖片與圖片素材進(jìn)行合成，來表現(xiàn)畫面的視覺度，當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果，也可以通過PS的后期合成來實(shí)現(xiàn)，這也是P4D的強(qiáng)大之處。
卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟，卡通IP也從傳統(tǒng)的純PS手繪技法，轉(zhuǎn)到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態(tài)）/AE（動(dòng)態(tài)）調(diào)色。
卡通IP火的本質(zhì)更適合做營銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱，受互聯(lián)網(wǎng)大廠影響下，卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒有這樣能力的人，也可以通過繪制好二維，一套三維可以選擇外包完成。
對(duì)于UI設(shè)計(jì)師來說學(xué)習(xí)是有成本的，暫時(shí)并不是必備技能，如果喜歡完全可以學(xué)習(xí)，從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競(jìng)爭(zhēng)力。
C4D三維場(chǎng)景動(dòng)畫通過構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景，會(huì)讓用戶體驗(yàn)真實(shí)感，三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過動(dòng)力學(xué)和表達(dá)式來模擬真實(shí)感，未來在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫中C4D軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢(shì)。
上一次寫追波流行趨勢(shì)還是兩年前了，通過兩年的沉淀對(duì)趨勢(shì)流行有了更深的認(rèn)知。十年的互聯(lián)網(wǎng)行業(yè)風(fēng)風(fēng)火火，隨著最近的互聯(lián)網(wǎng)裁員潮大家也慢慢的進(jìn)入到反思層，客觀的看待和理解這個(gè)真實(shí)的世界，曾經(jīng)的流行趨勢(shì)也需要慢慢的沉淀下來。
存在即合理，趨勢(shì)流行稍縱即逝，注定是不長(zhǎng)久的，只有大浪淘沙歷史遺留下來的風(fēng)格才能更長(zhǎng)久。但我們也不能不去關(guān)注，因?yàn)槟挠惺裁此^的創(chuàng)新，只不過是舊元素的重新組合，并符合當(dāng)下這個(gè)時(shí)代人的審美需求。香奈兒的“時(shí)尚易逝，風(fēng)格永存”大概就是這個(gè)意思吧。
6000多字的設(shè)計(jì)流行趨勢(shì)，希望能幫助設(shè)計(jì)師度過互聯(lián)網(wǎng)裁員的寒春。最后希望以后每年堅(jiān)持輸出設(shè)計(jì)流行趨勢(shì)。為設(shè)計(jì)行業(yè)奉獻(xiàn)微薄之力。
總結(jié)
追波年度最佳作品
易讀性（停頓感）
曲線
多彩高斯?jié)u變風(fēng)
B端界面設(shè)計(jì)
側(cè)邊欄Sidebar
儀表盤設(shè)計(jì)
流程設(shè)計(jì)
B端C化
輕代碼化
界面設(shè)計(jì)技巧
人文氣息
毛玻璃效果
輕擬物
簡(jiǎn)潔設(shè)計(jì)
幾何圖形
暗黑設(shè)計(jì)
模塊化（組件化）
插畫
幾何插畫
線面插畫
動(dòng)效
微交互
Mg動(dòng)畫
三維
三維圖標(biāo)
輕三維
P4D（PS+C4D）
卡通IP
三維動(dòng)畫
總結(jié)
文章來源：站酷 作者：水手哥
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
之前總結(jié)了B端表單頁設(shè)計(jì)的一些問題，其中信息錄入是比較重要的部分，信息錄入中選擇錄入是最為常用及復(fù)雜的組件，平時(shí)工作中遇到的相關(guān)問題也是最多的，此次針對(duì)選擇錄入常用組件的應(yīng)用場(chǎng)景和交互規(guī)則進(jìn)行總結(jié)
選擇錄入的類型比較多，可以簡(jiǎn)單的分為兩大類即
基礎(chǔ)選擇組件：?jiǎn)芜x/多選/開關(guān)/下拉選擇
復(fù)雜選擇組件：時(shí)間/日期/穿梭框/級(jí)聯(lián)選擇/樹形選擇等
B端表單業(yè)務(wù)場(chǎng)景比較多，很多場(chǎng)景具有通用性，有的場(chǎng)景卻有一定的獨(dú)立性，需要了解場(chǎng)景及用戶的需求和組件的適用性才能提高用戶操作體驗(yàn)和效率
一.單選框
單選框(Radio)是表單中比較常用的控件，它通常被用來從一組互斥的相關(guān)選項(xiàng)中選擇一個(gè)單獨(dú)的選項(xiàng)。
當(dāng)點(diǎn)擊一個(gè)未選中的單選名時(shí)，它會(huì)被選中，其他按鈕為未選中狀態(tài)。英文命名Radio來源于舊收音機(jī)上的按鈕，用于舊收音機(jī)不同頻道的切換，當(dāng)一個(gè)按鈕被按下時(shí)，其他按鈕會(huì)彈起，使被按下的按鈕處于唯一被選擇狀態(tài)的按鈕。
使用場(chǎng)景
1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行單一選擇時(shí)使用單選框；如果要進(jìn)行多個(gè)選擇，推薦使用多選框。
2.當(dāng)選項(xiàng)數(shù)目在2-7個(gè)之間時(shí)使用單選框；如果選項(xiàng)超過7個(gè)，推薦使用下拉框。
3.如果有兩個(gè)含義相反的選項(xiàng)，如“同意”和“不同意”，“接受”和“拒絕”等，建議使用一個(gè)多選框或者開關(guān)勾選為同意，不勾選為不同意。
4.如果每個(gè)選項(xiàng)都有同等的優(yōu)先級(jí)，沒有推薦選項(xiàng)時(shí)，使用單選框；如果需要向用戶推薦某個(gè)選項(xiàng)，可以使用下拉框。
5.如果提供給用戶的選項(xiàng)很熟悉，看了第一個(gè)選項(xiàng)就能預(yù)見到所有的內(nèi)容，如“周一”，那么后邊的選項(xiàng)是“周二到周日”等，這種情況下就不需要將所有的選項(xiàng)都展示出來，可以使用下拉框來簡(jiǎn)化界面。
交互邏輯
1.選項(xiàng)的設(shè)置，在設(shè)計(jì)單選框的選項(xiàng)時(shí)，要充分考慮用戶的實(shí)際情況，給出的選項(xiàng)要覆蓋到所有的情況。應(yīng)該滿足“互斥”的原則，因此選項(xiàng)之間要避免存在交集，同時(shí)也要注意選項(xiàng)覆蓋要全面，不能出現(xiàn)遺漏。
例如，要考慮到用戶不進(jìn)行選擇的情況，這時(shí)需要提供一個(gè)“無”的選項(xiàng)。給出的選項(xiàng)有可能都不符合用戶的情況，如果所有的選項(xiàng)用戶都可能不會(huì)選，就需要提供一個(gè)“其它”選項(xiàng)。
2.默認(rèn)選項(xiàng)，一般情況下為第一個(gè)選項(xiàng)，需要選擇最安全，最有可能的選項(xiàng)作為默認(rèn)選項(xiàng)，提前預(yù)判用戶的選擇，提升用戶選擇效率。
3.選項(xiàng)排序會(huì)影響用戶選擇效率，所以需要遵循一定的原則。按照邏輯順序，選擇概率由高到低；或者按照復(fù)雜程度排序，由簡(jiǎn)單到復(fù)雜；也可以按照操作后風(fēng)險(xiǎn)排序，將最安全的操作放在前邊，由風(fēng)險(xiǎn)最低到最高進(jìn)行排序
4.排列對(duì)齊方式，豎直排列相對(duì)于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項(xiàng)進(jìn)行左對(duì)齊，不用受制于選項(xiàng)的標(biāo)簽文字長(zhǎng)短，但豎直排列會(huì)占用較多的垂直空間；水平排列要注意每個(gè)選項(xiàng)之間的間距，間距盡量大一點(diǎn)，要不然用戶會(huì)分不清單選按鈕的文字到底是在前邊，pc端水平空間比較大，所以相對(duì)而言，水平排列的方式更加常用。
5.交互區(qū)域，單選框的面積較小，用戶在點(diǎn)擊的時(shí)候會(huì)比較困難?？梢酝ㄟ^擴(kuò)大點(diǎn)擊區(qū)的交互區(qū)域來提高易用性，將標(biāo)簽文字也設(shè)置為可點(diǎn)擊，增加操作區(qū)域的面積，方便用戶操作
6.文字標(biāo)簽，每個(gè)選項(xiàng)的文字都要簡(jiǎn)潔明了的表達(dá)該選項(xiàng)所代表的含義。一般使用短語而不是句子，因此不需要以句號(hào)來結(jié)尾。盡量保證每個(gè)文字標(biāo)簽用語的表達(dá)的一致性，不要出現(xiàn)有的用名詞，有的用動(dòng)詞的情況。如果需要解釋說明，可以在選項(xiàng)下方使用單獨(dú)一行文字。如果標(biāo)簽文字無法進(jìn)行精簡(jiǎn)，必須使用多行文字，將單選按鈕與文字頂對(duì)齊
7.交互狀態(tài)，每個(gè)選項(xiàng)都有選中和未選中兩種情況，每種情況對(duì)應(yīng)了3種交互狀態(tài)，分別為默認(rèn)、懸浮和禁用。
二.多選框
多選框的交互定義是幫助用戶完成從若干個(gè)互斥的選項(xiàng)集合當(dāng)中選取一個(gè)或者多個(gè)選項(xiàng)的任務(wù)，多選框多用于表單中。傳統(tǒng)意義上，多選框是方形，單選框是圓的，用戶已經(jīng)形成這種習(xí)慣認(rèn)知，所以盡量避免使用特殊形狀
使用場(chǎng)景
1.當(dāng)用戶需要在一組互斥的選項(xiàng)中進(jìn)行多個(gè)選擇，完成N選n的任務(wù)，使用多選框
2.當(dāng)選項(xiàng)數(shù)目在3-7個(gè)之間時(shí)使用多選框；如果選項(xiàng)超過7個(gè)，推薦使用下拉選擇
3.當(dāng)選項(xiàng)數(shù)量為一個(gè)，包含“是”和“否”的邏輯，也可叫單個(gè)多選框 比如常見的用戶協(xié)議頁面，通常采用單個(gè)多選框。
交互邏輯
選項(xiàng)排序/對(duì)齊方式/交互區(qū)域/文字標(biāo)簽等邏輯與單選框基本一致
1.選項(xiàng)的設(shè)置，因?yàn)樗羞x項(xiàng)處于外露狀態(tài)，所以超過7個(gè)時(shí)建議使用下拉選擇器，避免選項(xiàng)過多難以展示
2.默認(rèn)選項(xiàng)，相對(duì)單選框，默認(rèn)選擇在多選框中并不常見
3.提交操作，單個(gè)多選場(chǎng)景中，提交時(shí)必不可少的，可以是確認(rèn)按鈕或是其他方式；下拉選框中為了提高效率也可不用確認(rèn)，點(diǎn)擊空白處即確認(rèn)選擇。
4.排列對(duì)齊方式：縱向排布，適用于選項(xiàng)內(nèi)容較多或信息長(zhǎng)度差異較大的情況；橫向，適用于選項(xiàng)數(shù)量多且內(nèi)容簡(jiǎn)短的情況
5.特殊狀態(tài)：相對(duì)于其他控件，多選有了兩個(gè)較為特殊的狀態(tài)“半選中”“禁用(已選)”
1）半選中狀態(tài)是全選狀態(tài)的一種特殊狀態(tài)，依附于全選狀態(tài)，所以當(dāng)多選框中存在全選時(shí)才可能出現(xiàn)半選狀態(tài)，同時(shí)還需要有選中狀態(tài)的子項(xiàng)，全選半選狀態(tài)屬于【父級(jí)】狀態(tài)，交互的邏輯是狀態(tài)的變化是隨時(shí)體現(xiàn)的，所以【子級(jí)】狀態(tài)的變化，作為【父級(jí)】狀態(tài)也應(yīng)該隨之變化，這樣父子級(jí)聯(lián)動(dòng)才會(huì)有半選中狀態(tài)的出現(xiàn)。
2）禁用狀態(tài)有未選禁用和已選禁用，未選禁用一般是該條數(shù)據(jù)不滿足條件無法選中進(jìn)行操作。而已選禁用一般用戶的權(quán)限不足無法進(jìn)行操作，通常展示出來只是為了讓用戶了解到有此操作。
應(yīng)用場(chǎng)景
1.復(fù)雜選擇器
復(fù)雜選擇器中常常會(huì)用到多選框，可以明確展示選項(xiàng)的選擇狀態(tài)，需要注意的是多選框可以承載的半選，全選狀態(tài)所對(duì)應(yīng)的關(guān)系，是否符合業(yè)務(wù)場(chǎng)景。在實(shí)際工作中，我曾遇到過父級(jí)選擇影響子級(jí)但是子級(jí)無法影響父級(jí)的多選場(chǎng)景，不符合常規(guī)的多選習(xí)慣，但是在實(shí)際業(yè)務(wù)場(chǎng)景中真實(shí)存在。
2.權(quán)限設(shè)置
在很多權(quán)限設(shè)置/流程設(shè)置的頁面中，常常會(huì)用到多選框，需要注意的是各個(gè)場(chǎng)景中選中，取消，默認(rèn)，重置等不同狀態(tài)下，頁面的變化，狀態(tài)扭轉(zhuǎn)時(shí)交互邏輯的合理性和易用性。
3.表格多選
表格頁面情況多且復(fù)雜，對(duì)于勾選有兩種形式一種是勾選多選框，一種是點(diǎn)擊行數(shù)據(jù)選擇，需要明確哪一種更適合當(dāng)前的業(yè)務(wù)場(chǎng)景。另外表格的中最多的功能即是全選操作或是部分選擇操作，需明確操作后對(duì)整個(gè)表格的影響
三.開關(guān)
開關(guān)用于兩種相對(duì)對(duì)立的狀態(tài)的切換,多用于「開/關(guān)」「啟用/停用」等，不同于單選和多選開關(guān)是一個(gè)即時(shí)性的操作，這也導(dǎo)致開關(guān)使用的特殊性。開關(guān)能明確的展示當(dāng)前的功能狀態(tài)，讓用戶能高效的進(jìn)行跳轉(zhuǎn)操作。
使用場(chǎng)景
1.用于對(duì)流程的快速開啟，如表格中開啟或關(guān)閉某條數(shù)據(jù)/功能
2.權(quán)重較高的功能或設(shè)置，如配置表單的停用/啟用，用戶權(quán)限的啟用/停用
3.用于開啟/關(guān)閉全局權(quán)限，后設(shè)置其他功能的操作，如業(yè)務(wù)規(guī)則的設(shè)置等
交互邏輯
1.開關(guān) 配有對(duì)應(yīng)的文字說明，開啟/關(guān)閉某種功能或權(quán)限
2.開關(guān)具有聯(lián)動(dòng)性，通過開關(guān)去控制下層功能的操作
3.開關(guān)的每一次變更狀態(tài)都要有相應(yīng)的反饋，輔助用戶進(jìn)行狀態(tài)判斷
四.下拉選擇
下拉選擇B端業(yè)務(wù)中最常用的組件，且下拉選擇的類型也比較廣，一般有下拉單選，下拉多選，下拉級(jí)聯(lián)，下拉樹等基本場(chǎng)景是可選項(xiàng)過多時(shí)，會(huì)使用下拉選擇器對(duì)所有選項(xiàng)進(jìn)行整合方便用戶高效錄入信息。選項(xiàng)層級(jí)建議不超過 三層且需要有一定的邏輯排序，通常包括觸發(fā)器和下拉面板兩個(gè)部分當(dāng)選項(xiàng)數(shù)量過多的時(shí)候，建議增加「搜索」功能。
下拉選擇結(jié)構(gòu)
1.標(biāo)簽文本：選擇器標(biāo)題，明確選擇內(nèi)容
2.選框：與文本框類似，需有一個(gè)外邊框，為可操作的熱區(qū)范圍，主要功能是與下拉菜單進(jìn)行聯(lián)動(dòng)
當(dāng)選項(xiàng)較多的時(shí)候，多選框會(huì)配上搜索功能，目的是為了讓用戶快速找到對(duì)應(yīng)的選項(xiàng)，而形式主要有以下兩種
3.右側(cè)標(biāo)識(shí)(可選)：每個(gè)選框右側(cè)的圖標(biāo)，都是選框類型的象征。常見的是下拉箭頭，默認(rèn)朝下；展示選項(xiàng)列表時(shí)，箭頭朝上。
4.占位符：保持暗提示的簡(jiǎn)潔，避免把暗提示作為選擇器的輔助說明，默認(rèn)占位文字，格式為「請(qǐng)選擇xxx」
5.回顯值：回顯值通常包括兩種類型
1）當(dāng)下拉單選，一般采用純文本回顯即可
2）當(dāng)下拉多選，需要同時(shí)展示多個(gè)選中項(xiàng)，因此在錄入框中采取Tag形式，使單個(gè)選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)
6.選項(xiàng)：下拉選擇一般針對(duì)選項(xiàng)數(shù)超過5個(gè)
內(nèi)容：1）選框 + 文本 + 副文本； 2）選框 + 文本； 3）文本 + 副文本； 4）文本。除了選項(xiàng)內(nèi)容的不同，形式中也有較為復(fù)雜的，重點(diǎn)分析級(jí)聯(lián)選擇和樹：
1)樹展示，可選擇的數(shù)據(jù)是一個(gè)樹形結(jié)構(gòu)時(shí)，例如公司層級(jí)、學(xué)科系統(tǒng)、分類目錄等，樹結(jié)構(gòu)中可以自由選擇子節(jié)點(diǎn)和根結(jié)點(diǎn)。
2)級(jí)聯(lián)展示，針對(duì)的一般是有所屬關(guān)系的選項(xiàng)且所屬關(guān)系比較明確，層級(jí)一般3-5級(jí)，選擇到最末子級(jí)才能完成選擇一般是由大到小進(jìn)行選擇，選項(xiàng)數(shù)量上3>2>1，比如省市縣選擇
3)分組展示,選項(xiàng)過多時(shí)考慮使用的方式，使用分割線將同一類選項(xiàng)進(jìn)行劃分，用戶選擇時(shí)會(huì)思考從大的分類到具體的選項(xiàng)。但選項(xiàng)過多則還是建議用樹結(jié)構(gòu)
7.選項(xiàng)面板：承載所有可選擇的選項(xiàng)列表，在選項(xiàng)數(shù)量過多時(shí)會(huì)對(duì)下拉菜單的高度進(jìn)行限制，即設(shè)置下拉菜單的最大高度，當(dāng)超過最大高度時(shí)，出現(xiàn)滾動(dòng)條。面板相當(dāng)于一個(gè)容器可以根據(jù)業(yè)務(wù)需求承載復(fù)雜的形式 例如tab分類、錨點(diǎn)、字母定位等，
選擇器狀態(tài)
默認(rèn)（Default
懸停（Hover
1.未選擇，若選框有搜索功能則光標(biāo)變成文本輸入狀態(tài)，若沒有搜索功能則光標(biāo)變成小手（示例
2.已選擇，選擇后懸停狀態(tài)下全部清空的功能，不是所有場(chǎng)景下配置該功能， 要考慮實(shí)際業(yè)務(wù)中是否需要清空
激活（Active
1.未選擇，點(diǎn)擊框體激活下拉面板，單選一般是勾選后自動(dòng)關(guān)閉面板，多選則需要點(diǎn)擊面板以外確認(rèn)關(guān)閉面板
2.已選擇，若是已選擇再次激活，需要將已選擇的選項(xiàng)高亮，再次點(diǎn)擊已選選項(xiàng)則取消選擇；選項(xiàng)熱區(qū)，一般將整行作為熱區(qū)擴(kuò)大點(diǎn)擊范圍，方便用戶操作。
禁用（Disable
1.選框禁用，用戶無法激活，選框置灰，在設(shè)計(jì)工程中需要將禁用于正常狀態(tài)之間拉開差距，這樣用戶能快速識(shí)別
2.選項(xiàng)禁用，表示該選項(xiàng)無法被選擇，不影響整個(gè)選擇器的功能，只用將該選項(xiàng)置灰即可，光標(biāo)置入時(shí)會(huì)變成Not allowed
回顯規(guī)則
單選，多數(shù)單選選擇后下拉面板自動(dòng)收起，回顯選擇的選項(xiàng)，選項(xiàng)回顯時(shí)有一些特殊情況如存在極端情況文案過長(zhǎng)則結(jié)尾用「…」展示， hover 顯示「文字提示氣泡」；或者選項(xiàng)中存在主文本副文本，考慮實(shí)際業(yè)務(wù)場(chǎng)景回顯時(shí)可只顯示主文本。
多選，以Tag形式展示已選擇項(xiàng)使單個(gè)選項(xiàng)也可以點(diǎn)擊刪除形成完整的閉環(huán)；存在的極端情況是當(dāng)選項(xiàng)過多時(shí)的展示效果，一般有兩種形式撐開高度和選項(xiàng)融合
1）撐開高度，一般用在需要完全展示選擇項(xiàng)同時(shí)可快速調(diào)整已選項(xiàng)的場(chǎng)景中，通過改變錄入框的整體高度來展示完整的選型，撐開的高度能在表單中實(shí)現(xiàn)一些疏密變化，一般也不會(huì)無限撐開，會(huì)有一定的限制，并且在右側(cè)增加滾動(dòng)條。
2）選項(xiàng)融合，對(duì)選項(xiàng)展示不作要求的場(chǎng)景中可根據(jù)文本框的寬度進(jìn)行選項(xiàng)融合，展示具體的選項(xiàng)數(shù)量即可，這樣能最大程度的保證表單的的整齊，讓選擇器的適配性更高。
3）省略展示選項(xiàng)，以文本形式展示，鼠標(biāo)hover氣泡展示全部選項(xiàng)信息
問題思考
何時(shí)用下拉選框，何時(shí)用彈窗選擇？
大部分情況下，單選優(yōu)先用下拉選框，用戶比較高效的完成選擇，同時(shí)也可以明確自己的選擇。而多選場(chǎng)景中對(duì)于選項(xiàng)數(shù)量可控，選項(xiàng)復(fù)雜度較低的可以用下拉選框。但是對(duì)于選項(xiàng)結(jié)構(gòu)復(fù)雜，內(nèi)容過載，用戶頻繁的滾動(dòng)容易造成誤操作影響選擇的準(zhǔn)確性和高效性，此時(shí)會(huì)考慮使用彈窗，且多選彈窗一般需要配有搜索區(qū)，選項(xiàng)區(qū)，已選區(qū)。需要注意的是，已選項(xiàng)在彈窗內(nèi)的顯示以及回顯形式。多選彈窗一般可以比較直觀的展示已選項(xiàng)，所以可以采用省略展示選項(xiàng)的方式。
選擇搜索如何顯示？
如下彈窗選擇中，對(duì)于數(shù)量和層級(jí)比較復(fù)雜的選擇項(xiàng)，搜索是很有必要的，對(duì)于搜索結(jié)果的展現(xiàn)形式不同的場(chǎng)景可能會(huì)有不同，用戶使用搜索一般是對(duì)于選項(xiàng)比較明確，所以推薦搜索結(jié)果展示末級(jí)，用戶可以更高效的做出選擇，避免復(fù)雜的層級(jí)關(guān)系干擾。
五.時(shí)間與日期選擇器
兩種類型
1.時(shí)間點(diǎn)選擇，選定某一個(gè)時(shí)間/日期點(diǎn)，B端時(shí)間點(diǎn)選擇的業(yè)務(wù)場(chǎng)景較少
2.時(shí)間段選擇，選定某一個(gè)時(shí)間范圍，一般有開始時(shí)間和結(jié)束時(shí)間，時(shí)間段的應(yīng)用一般是在數(shù)據(jù)篩選的場(chǎng)景中
確定時(shí)間類型后，要考慮時(shí)間粒度，時(shí)間粒度分為年、季、月、周、天、時(shí)、分、秒，B端圖表頁面中針對(duì)年度、季度、月度的篩選時(shí)很常見的，需要結(jié)合場(chǎng)景選擇時(shí)間粒度。
日期選擇器中一般是通過點(diǎn)擊讓用戶選擇時(shí)間，除了讓用戶點(diǎn)選外，時(shí)間選擇器還會(huì)提供一些快捷選項(xiàng)例如“今天、本周、本月，本季度“等。選擇后回顯的時(shí)間顯示格式有多種如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平臺(tái)需要確定統(tǒng)一的樣式，避免增加用戶的認(rèn)知成本。
時(shí)間段選擇，常見兩種形式分段式和連體式，在不同的平臺(tái)都有應(yīng)用，在交互上的區(qū)別分段式需要用戶點(diǎn)擊兩次分別選擇開始時(shí)間和結(jié)束時(shí)間，連體式是用戶點(diǎn)擊一次調(diào)起時(shí)間選擇時(shí)間段，相對(duì)而言連體式操作更便捷，但是分段式理解更簡(jiǎn)單，連體式存在一定的認(rèn)知成本，總體上來說其實(shí)區(qū)別并不大，平臺(tái)需要建立統(tǒng)一的標(biāo)準(zhǔn)，這樣能形成較為統(tǒng)一的體驗(yàn)和習(xí)慣。
選擇器在實(shí)際工作中應(yīng)用廣泛，B端業(yè)務(wù)復(fù)雜，總會(huì)遇到各種新的場(chǎng)景，總結(jié)會(huì)有不足不全之處，歡迎大家一起探討交流。
文章來源：站酷 作者：MuMu魚
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
用戶體驗(yàn)是用戶對(duì)產(chǎn)品價(jià)值的整體感受，其中包括用戶感受到的產(chǎn)品價(jià)值以及用戶感受到的操作體驗(yàn)。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。這篇文章舉了大量的例子，來跟大家一起進(jìn)行產(chǎn)品細(xì)節(jié)洞察分析。感興趣的朋友一起來看看吧。
對(duì)于B端，我想剛開始很多同學(xué)就直接拿Ant Design套套界面，因?yàn)楣疽蟛⒉桓撸S后字節(jié)Arco Design也推出了對(duì)應(yīng)的模版和規(guī)范，能讓我們快速作出一個(gè)不出錯(cuò)的方案。
但是隨著公司對(duì)B端越來越重視，這些模版顯然就太爛大街了。公司、市場(chǎng)的要求顯然不止于此，我們的設(shè)計(jì)追求也不止于此。
那么我們?nèi)绾尾拍軘[脫套模版，提高界面的精致度，提升界面的交互體驗(yàn)?zāi)兀?
其實(shí)很簡(jiǎn)單，王陽明先生告訴我們知行合一，知是行之始行是知之成。我們?nèi)绾尾拍芴嵘鼴端界面端精致度，第一需要知道什么是好的設(shè)計(jì)；第二需要不斷的去實(shí)踐去練習(xí)，缺一不可。
本文先和大家談?wù)勚膶用?，提高我們的眼界，下面就和大家分享一些不錯(cuò)的B端產(chǎn)品，大家有時(shí)間可以去慢慢體驗(yàn)。
PS：作為B端設(shè)計(jì)師，一定要去多拆解競(jìng)品，多研究好的產(chǎn)品，別面試的時(shí)候，面試官問你研究的B端產(chǎn)品是什么，你只知道阿里云、騰訊云、百度云哦！
做B端的同學(xué)，尤其是做CRM的同學(xué)應(yīng)該都知道Salesforce，他是全球最大的 CRM（客戶關(guān)系管理） 工具公司。
Hubspot同樣是提供客戶管理相關(guān)的應(yīng)用，雖然成立相對(duì)Salesforce晚，但是在市場(chǎng)上也占有一席之地。
從設(shè)計(jì)的角度來看，他的界面風(fēng)格更加簡(jiǎn)潔舒適，從體驗(yàn)上來看和國內(nèi)的CRM系統(tǒng)完全不同，其體驗(yàn)更加自然和舒適。
這種風(fēng)格大家看了有沒有覺得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是發(fā)現(xiàn)風(fēng)格有一點(diǎn)類似，大家可以對(duì)比國內(nèi)產(chǎn)品去拆解下他們的交互細(xì)節(jié)有什么不同，完成同樣的任務(wù)他們采用的方案有何不同，相信你會(huì)有很多的收獲。
國外的界面看著總讓人覺得很舒適，僅僅是因?yàn)榭酥频脑O(shè)計(jì)、中性灰使用得好嗎？當(dāng)然不是，是因?yàn)橛⑽谋旧砭褪菆D形化的文字。
如果翻譯成中文，你會(huì)發(fā)現(xiàn)好像不是特別理想。
這個(gè)樣子拿給領(lǐng)導(dǎo)過稿，怕是分分鐘被拍死，因此我們還是需要多看看國內(nèi)優(yōu)秀的產(chǎn)品。
神策的設(shè)計(jì)，我想B端的朋友不陌生吧，國內(nèi)產(chǎn)品中他的設(shè)計(jì)一直是我們的參考對(duì)象。
不同于其他產(chǎn)品，他的體驗(yàn)門檻比較低，注冊(cè)后就可以去體驗(yàn)他的demo，也沒有試用期限，參考對(duì)象從可視化報(bào)表，到界面交互均能找到參考。
不過當(dāng)你參考一次后發(fā)現(xiàn)，做出來的界面怎么還是少了一些靈魂，雖然界面風(fēng)格上了一個(gè)臺(tái)階，但為什么用戶還是覺得產(chǎn)品難用。
這里不得不和大家推薦項(xiàng)目管理類產(chǎn)品了，這類產(chǎn)品是專門給互聯(lián)網(wǎng)公司的開發(fā)團(tuán)隊(duì)使用，他們都是專業(yè)用戶，同時(shí)這些都是提高他們工作效率的工具，因此這些產(chǎn)品投入的成本更高，優(yōu)化得更好，拆解他們的產(chǎn)品，就是直接觀看高手的成長(zhǎng)之路。
Jira是Atlassian公司出品的一款事務(wù)管理軟件，JIRA的界面效果交互都非常不錯(cuò)。大型互聯(lián)網(wǎng)公司如LinkedIn、Facebook、eBay等內(nèi)部都在使用Jira。
同時(shí)他也是國內(nèi)項(xiàng)目管理類產(chǎn)品的學(xué)習(xí)研究對(duì)象，因此大家可以通過文章、B站、界面截圖，自己申請(qǐng)?bào)w驗(yàn)等方式全面的進(jìn)行體驗(yàn)。
同時(shí)也可借助群的力量，調(diào)研下有使用Jira的小伙伴，看看他們?cè)谑褂弥杏惺裁磫栴}，下面是我收集Jira網(wǎng)頁版和本地配置版的問題截圖，這些都來自不同角色的真實(shí)體驗(yàn)，會(huì)更有分析的價(jià)值。（這部分截圖涉及到公司的數(shù)據(jù)，同時(shí)數(shù)量多不太方便打碼，就不分享給大家了。）
當(dāng)然國內(nèi)的項(xiàng)目管理類產(chǎn)品也得去看，我們要對(duì)比哪里做得好，哪里還需要改進(jìn)。國內(nèi)的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，這些產(chǎn)品不管從視覺還是體驗(yàn)都非常不錯(cuò)，大家一定要去體驗(yàn)。
通過不斷對(duì)競(jìng)品進(jìn)行拆解，你已經(jīng)不是當(dāng)初那個(gè)小白了，你的行業(yè)認(rèn)知，方案設(shè)計(jì)能力應(yīng)該趕超了一大波人。
成長(zhǎng)的同時(shí)，又發(fā)現(xiàn)你設(shè)計(jì)的界面，不太精致，少了些溫度，這時(shí)候推薦你看文檔管理類產(chǎn)品。
第一個(gè)和大家推薦的是WPS，界面簡(jiǎn)潔，配色舒適。
在管理類的軟件中，不得不提飛書的管理界面，從設(shè)計(jì)到使用體驗(yàn)，他給我的感覺終于不是那么千遍一律，用組件庫搭建起來的感覺。
他開始有了溫度，開始注重品牌感的打造，用戶的引導(dǎo)，符合品牌調(diào)性的插畫。
對(duì)一些體驗(yàn)的細(xì)節(jié)進(jìn)行優(yōu)化，比如傳統(tǒng)的編輯都是放在頁面頂部，它采用了離光標(biāo)更近的位置。
根據(jù)菲茲定律，光標(biāo)當(dāng)前的位置和目標(biāo)位置的距離D越短，所用的時(shí)間越短，具體好不好用，歡迎大家在評(píng)論區(qū)留言哦。
到這時(shí)候如果你覺得線上的產(chǎn)品太禁錮思維，那么推薦你看看dribbble、behance，搜索data、web、dashboard等關(guān)鍵詞，去看看有沒有新的靈感。
我的花瓣收集了一部分，如果不嫌棄，可以去看看，順藤摸瓜應(yīng)該可以找到很多不錯(cuò)的設(shè)計(jì)。
風(fēng)箏KK的花瓣：https://huaban.com/boards/76913106
如何提升B端界面的精致度？
第一，要知道什么是好的設(shè)計(jì)，多拆解國內(nèi)外優(yōu)化的B端產(chǎn)品。
第二，多在工作中時(shí)間，有時(shí)間多做ABC方案，鍛煉自己的方案設(shè)計(jì)能力，多踩一些坑，時(shí)刻保持學(xué)習(xí)能力，慢慢就成長(zhǎng)了。
文章來源：站酷 作者：風(fēng)箏KK
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
知識(shí)圖譜作為語義網(wǎng)絡(luò)，其技術(shù)算法研究被廣泛應(yīng)用在人工智能和大數(shù)據(jù)等領(lǐng)域。通常，知識(shí)圖譜的運(yùn)轉(zhuǎn)過程是由數(shù)據(jù)模型完成，用戶可見的只是計(jì)算后的結(jié)果，其數(shù)據(jù)的可視化也僅停留在對(duì)結(jié)果的可讀性展示上。但其實(shí)，圖譜之間的關(guān)系、數(shù)據(jù)計(jì)算的過程，也具備分析價(jià)值和潛在的機(jī)會(huì)信息。將知識(shí)圖譜轉(zhuǎn)化為可視化信息圖，能幫助用戶更好的理解和利用數(shù)據(jù)及其關(guān)系，但對(duì)于沒有技術(shù)背景的界面設(shè)計(jì)師來講，從技術(shù)架構(gòu)、計(jì)算函數(shù)等技術(shù)視角去理解知識(shí)圖譜概念和應(yīng)用相對(duì)困難。本文分享一種設(shè)計(jì)思路，幫助大家在實(shí)際工作中，完成知識(shí)圖譜向可視化交互界面的轉(zhuǎn)化。
在使用產(chǎn)品的過程中，你是否看到了一些有趣的細(xì)節(jié)，而這些細(xì)節(jié)提升了你的使用體驗(yàn)？這些產(chǎn)品細(xì)節(jié)，便是產(chǎn)品設(shè)計(jì)師需要留意的，因?yàn)檫@些產(chǎn)品細(xì)節(jié)在某種程度上提升了用戶的留存與轉(zhuǎn)化。本文我就對(duì)一些產(chǎn)品細(xì)節(jié)進(jìn)行了拆解，一起來看一下。
一.【夸克瀏覽器】節(jié)日彩蛋-特定場(chǎng)景下輸入關(guān)鍵詞觸發(fā)彩蛋效果
二.【酷狗音樂】播放Tab-多交互操作，應(yīng)對(duì)多場(chǎng)景使用
三.【騰訊新聞】左滑熱點(diǎn)榜單-用戶關(guān)注的熱點(diǎn)放在路徑短的位置
四.【荔枝博客】品牌傳播-產(chǎn)品情感漏出，與用戶產(chǎn)生共鳴
五.【百度網(wǎng)盤】自定義倍數(shù)-給用戶更多可控操作，精細(xì)化觀影感受
六.【網(wǎng)易云音樂】情感彩蛋-給你夢(mèng)幻的魔法，帶你重拾記憶
七.【即刻】頭像彩蛋-趣味互動(dòng)回彈，把喜歡強(qiáng)烈表現(xiàn)出來
八.【荔枝】錄聲音-輕擬物動(dòng)態(tài)圖，使用中的及時(shí)反饋
九.【微博】點(diǎn)贊反饋-情緒最大化宣泄，盡情釋放情緒
十.【36氪】隱藏的浮窗-深挖用戶操作，快切與停頓的奧秘
在圣誕節(jié)日來臨之際，用戶使用搜索引擎輸入關(guān)鍵詞的頻率會(huì)增加，在此增加彩蛋給用戶營造節(jié)日氛圍
設(shè)計(jì)目標(biāo)：增加關(guān)鍵詞趣味彩蛋雨，提高產(chǎn)品趣味體驗(yàn)，提高用戶搜索頻次。
設(shè)計(jì)方案：在節(jié)日來臨前，用戶通過搜索節(jié)日特定關(guān)鍵詞，會(huì)在搜索結(jié)果頁中以彩蛋雨的形式墜落下來，圖案貼合節(jié)日物品，給用戶營造出節(jié)日氛圍，給予用戶節(jié)日的浪漫。用戶在使用時(shí)并不是一個(gè)冰冷的產(chǎn)品，而是有情感共鳴有情緒的產(chǎn)品。
想要提高屏效，一屏顯示更多內(nèi)容。在瀏覽操作時(shí)會(huì)因?yàn)楣δ馨粹o外漏造成誤操作情況。
設(shè)計(jì)目標(biāo)：提升屏幕顯示內(nèi)容面積，給予TAB播放更多交互形式，增加趣味性提升產(chǎn)品記憶點(diǎn)。
設(shè)計(jì)方案：在TAB播放中給予「長(zhǎng)按」「雙擊」兩種交互操作，長(zhǎng)按中包含雙擊的播放暫停，因?yàn)榇瞬僮鳎褂寐瘦^高，提供多入口能有效提高易用性。長(zhǎng)按時(shí)，激活更多常用功能，包含移動(dòng)進(jìn)度條、收藏、下一首等操作，配合特有的交互展示形式，給用戶形成產(chǎn)品記憶點(diǎn)，同時(shí)在瀏覽不同頻道時(shí)，功能的隱藏大大降低誤操作以及視覺干擾的情況。
如今的新聞產(chǎn)品都提供熱點(diǎn)時(shí)事新聞，給用戶提供更多豐富內(nèi)容聚集。
設(shè)計(jì)目標(biāo)：提高用戶使用率，不影響主框架的情況下給用戶最短路徑查看熱點(diǎn)新聞的入口，提高用戶瀏覽時(shí)長(zhǎng)。
設(shè)計(jì)方案：首屏以及導(dǎo)航模塊更多還是以新聞資訊等內(nèi)容為主，關(guān)注熱點(diǎn)更多是娛樂熱門等內(nèi)容，瀏覽率都高的情況下，把熱點(diǎn)模塊放到左滑頁面中，在不影響首頁框架情況下，增加新的板塊，給用戶更多瀏覽選擇，豐富產(chǎn)品多元化內(nèi)容。
如今的產(chǎn)品趨于同質(zhì)化，由原來只注重功能轉(zhuǎn)變?yōu)楫a(chǎn)品情感表達(dá)，給用戶產(chǎn)生情感互動(dòng)，從功能付費(fèi)變?yōu)榍楦袃r(jià)值觀付費(fèi)。
設(shè)計(jì)目標(biāo)：傳播產(chǎn)品價(jià)值觀，給予用戶引導(dǎo)，產(chǎn)生產(chǎn)品正向記憶，從而提高粘性。
設(shè)計(jì)方案：上幾期產(chǎn)品分析中有說到頂部logo外漏的設(shè)計(jì)描述，有的植入隱藏功能，有的表示刷新功能等，歸根結(jié)底都是給予靜態(tài)標(biāo)志功能屬性，提高屏幕利用率同時(shí)提升用戶探索欲望。
荔枝博客本身產(chǎn)品內(nèi)容相對(duì)聚焦，想要做出差異化就要往品牌情感入手，當(dāng)用戶點(diǎn)擊左上角「荔枝博客」標(biāo)志時(shí)，會(huì)彈出產(chǎn)品的由來以及做博客的初衷，讓用戶思考產(chǎn)品深層意思時(shí)無形中把產(chǎn)品植入到用戶記憶中，給用戶情感綁定，提升用戶使用粘性。
市場(chǎng)上的視頻倍速參差不齊，0.25、0.5、1倍三種遞增邏輯，用戶在觀影時(shí)會(huì)存在沒有想要選擇著倍速，只能使用平臺(tái)提供的選擇使用，操作受限制。
設(shè)計(jì)目標(biāo)：解決倍速不是用戶想要的，提供自定義倍速，給用戶更多可操作性，提升觀影感受。
設(shè)計(jì)方案：在百度網(wǎng)盤中觀看視頻時(shí)，點(diǎn)擊調(diào)節(jié)倍速在提供默認(rèn)常規(guī)5種倍速下提供自定義倍速，以0.1的速度逐漸遞增，用戶可以在0.5-3倍之間任意選擇，根據(jù)視頻類型、觀影習(xí)慣選擇合適的速度，同時(shí)把市面上不同倍速問題給用戶造成的觀影困擾也同步解決，提高視頻觀影體驗(yàn)。
音樂無國界，每首音樂背后都有一段很長(zhǎng)的故事，在我聽哈利波特主題曲時(shí)，瀏覽評(píng)論發(fā)現(xiàn)特定特定位置點(diǎn)擊會(huì)有彩蛋，嘗試了一下果然如此。網(wǎng)易云音樂評(píng)論區(qū)的強(qiáng)大之處展示之一。獨(dú)有的彩蛋。
設(shè)計(jì)目標(biāo)：提升評(píng)論活躍度，強(qiáng)化廣告的表現(xiàn)形式，增加用戶對(duì)產(chǎn)品的探索欲望提高使用粘性。
設(shè)計(jì)方案：哈利波特音樂中，在評(píng)論區(qū)第九和第十條中間分割線處，點(diǎn)擊兩下！觸發(fā)魔法視頻，把用戶帶入情境之中，勾起滿滿的回憶，配合音樂聲音，真可謂視覺聽覺雙重享受。
對(duì)于開發(fā)來說，只需要在特定歌曲評(píng)論中寫一個(gè)位置判定以及觸發(fā)條件，當(dāng)用戶觸發(fā)條件后，播放特定視頻，觸發(fā) 用戶情感共識(shí)，提升使用粘性。同時(shí)如果做為廣告植入也是比較好的呈現(xiàn)方式，但要注意視頻質(zhì)量，盡量弱化廣告中的產(chǎn)品，可以把品牌情感揉入視頻中與用戶產(chǎn)生情感關(guān)聯(lián)。
在看關(guān)注人主頁時(shí)，想要強(qiáng)烈的表達(dá)出情感給予對(duì)方，釋放自己心中的喜歡時(shí)如何表現(xiàn)出來。
設(shè)計(jì)目標(biāo)：提升趣味玩法，增強(qiáng)用戶操作感受，豐富產(chǎn)品玩法體驗(yàn)，提升使用粘性。
設(shè)計(jì)方案：在個(gè)人主頁，通過拖拽用戶頭像放手回彈，頭像以拉距來彈射回原有位置并且迸發(fā)出愛心動(dòng)畫，讓用戶產(chǎn)生更貼近的情感傳達(dá)，反復(fù)操作達(dá)到一定數(shù)量會(huì)有文字提醒，文案的趣味描述也讓彩帶功能增加了一份趣味。
在使用錄音功能時(shí)，單純靠進(jìn)度條記憶靜態(tài)按鈕顯示很難產(chǎn)生強(qiáng)提醒，除非做大做突出，荔枝在錄音中是如何表現(xiàn)的。
設(shè)計(jì)目標(biāo)：解決錄音功能頁面元素單一用戶進(jìn)行中與暫停感知淺的問題，結(jié)合動(dòng)態(tài)插圖給用戶及時(shí)反饋，同時(shí)貼合線下使用場(chǎng)景，給用戶注入產(chǎn)品記憶點(diǎn)。
設(shè)計(jì)方案：在我的-進(jìn)入錄聲音模塊中，頭圖展示一個(gè)錄音磁帶機(jī)，當(dāng)開啟錄音功能時(shí)，磁帶機(jī)會(huì)進(jìn)行旋轉(zhuǎn)播放，左慢右快的展示形式符合真實(shí)機(jī)器的運(yùn)動(dòng)規(guī)律，給用戶強(qiáng)提醒告知用戶此時(shí)正在錄音中，當(dāng)暫停時(shí)，磁帶機(jī)及時(shí)停止，和按鈕形成觸發(fā)綁定，提高產(chǎn)品使用體驗(yàn)。
單一的贊有時(shí)無法滿足用戶的愛意，用戶希望更強(qiáng)烈的表達(dá)情感，來滿足自己反饋欲。
設(shè)計(jì)目標(biāo)：提升贊的強(qiáng)烈感知，釋放用戶內(nèi)在情緒，提高產(chǎn)品趣味體驗(yàn)，從而增加使用粘性。
設(shè)計(jì)方案：在微博單條動(dòng)態(tài)頁面中，對(duì)“贊”進(jìn)行點(diǎn)擊一次操作是普通點(diǎn)贊反饋；長(zhǎng)按觸發(fā)連贊機(jī)制，會(huì)帶來多彩多圖標(biāo)的更強(qiáng)的視覺感受，帶來強(qiáng)烈的情感反饋，讓用戶盡情的釋放情緒，得到內(nèi)在解壓。
新聞資訊產(chǎn)品，文章之間來回切換閱讀，時(shí)有發(fā)生，或者手頭有事忙完再回過頭看。
設(shè)計(jì)目標(biāo)：解決閱讀中斷導(dǎo)致回看路徑長(zhǎng)，影響閱讀效率的問題。
設(shè)計(jì)方案：瀏覽文章時(shí)，屏幕側(cè)邊從左向右劃動(dòng)是返回上一級(jí)的交互手勢(shì)，當(dāng)用戶在滑動(dòng)中停留一下就會(huì)激活浮窗功能，隨著手勢(shì)操作移動(dòng)到黑圈內(nèi)顏色會(huì)顯示藍(lán)色，表示移入成功，這時(shí)放手返回首頁，右下角會(huì)顯示一個(gè)圓形浮窗，可快速查看浮窗內(nèi)的文章。
值得學(xué)習(xí)的是，左滑浮窗圖形隨著手勢(shì)上下位置進(jìn)行移動(dòng)，路徑更短更快的進(jìn)行操作，提高用戶使用體驗(yàn)。因?yàn)殡[藏式的交互有一定學(xué)習(xí)成本，產(chǎn)品充分考慮到這點(diǎn)，在文章右上角更多按鈕中放置加入浮窗功能，兩個(gè)激活入口，兼容新老用戶使用，提高產(chǎn)品易用性。
設(shè)計(jì)師要有發(fā)現(xiàn)美的眼睛。美不僅是視覺，還有好的體驗(yàn)流程。不要讓用戶思考，這是每個(gè)設(shè)計(jì)師所追求的。認(rèn)真記錄產(chǎn)品細(xì)節(jié)，了解背后的思考，也是不斷提升自己邏輯思維和表達(dá)能力的一種方式。
文章來源：站酷 作者：碳水sir
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
在了解了人物性格語氣的重要性以及在大廠中的應(yīng)用場(chǎng)景之后，大家一定很關(guān)心，要如何在自己的業(yè)務(wù)中從0開始創(chuàng)建文案的人物性格語氣呢？下面會(huì)結(jié)合在酷家樂云設(shè)計(jì)工具的實(shí)踐，針對(duì)這部分內(nèi)容做詳細(xì)介紹?？峒覙吩圃O(shè)計(jì)工具主要是針對(duì)內(nèi)裝設(shè)計(jì)師的設(shè)計(jì)工具。整個(gè)過程大致分為 5 個(gè)階段：資料研究、小組研討、確定人物性格關(guān)鍵詞、豐富人物性格、繪制畫像。
<h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode5" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter ONE 「資料研究」
<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__7" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-研究?jī)?nèi)部資料，了解基調(diào)和方向
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode8" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">工具產(chǎn)品文案的人物性格和語氣一定是符合公司的戰(zhàn)略定位、品牌形象和設(shè)計(jì)原則的，因此我們首先對(duì)公司現(xiàn)有的內(nèi)部資料進(jìn)行收集和研究，為工具產(chǎn)品文案的人物性格與語氣確定一個(gè)基調(diào)和方向。研究的資料包括但不限于以下內(nèi)容，包括公司戰(zhàn)略書、品牌白皮書、設(shè)計(jì)價(jià)值觀、設(shè)計(jì)原則、用戶畫像等等。
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__10" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">閱讀相關(guān)資料，分析資料中的關(guān)鍵詞，在公司資料傳遞出的氣質(zhì)和價(jià)值觀中，提取與人物性格語氣相關(guān)的內(nèi)容。在我們的資料研究中，有一些詞是被反復(fù)提到的，且能反映一定人物性格的。比如權(quán)威、專業(yè)、引領(lǐng)、靈活友好、高效專注、冷靜、秩序、簡(jiǎn)潔等等。
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode11" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode18" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode24" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">首先，我們將這些詞匯分為兩大類。一類是描述性格的，比如善解人意、隨和的、理性的、直接的等等。另一類則不是描述性格的，比如關(guān)注用戶，更多的是一個(gè)人的表現(xiàn)，而非性格。再比如專業(yè)有經(jīng)驗(yàn)，是指一個(gè)人的能力，而不是性格。
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode28" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__36" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__37" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現(xiàn)：
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__39" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">理性
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__41" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__42" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現(xiàn)：
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__44" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">直率
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__46" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">不是什么？
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__47" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">具體表現(xiàn)：
<p style="font-size:16px;white-space:normal;margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;line-height:32px;font-family:"">
<br />
</p><h1 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode49" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">Chapter Five「繪制畫像」
<h4 data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-weight: bold; line-height: 1.5; letter-spacing: -0.006em; font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode__51" style="white-space: normal; margin: 0px; padding: 0px; outline: none; box-sizing: inherit; caret-color: rgb(40, 40, 40); color: rgb(40, 40, 40); font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW; font-size: 14px;">-將性格形象化，讓人物更立體
<p data-darkmode-bgcolor-16497343928436="rgb(25, 25, 25)" data-darkmode-original-bgcolor-16497343928436="#fff|rgb(255, 255, 255)" data-darkmode-color-16497343928436="rgb(136, 166, 217)" data-darkmode-original-color-16497343928436="#fff|rgb(23, 43, 77)" data-style="color: rgb(23, 43, 77); font-family: -apple-system, " system-ui",="" "segoe="" ui",="" roboto,="" oxygen,="" ubuntu,="" "fira="" sans",="" "droid="" "helvetica="" neue",="" sans-serif;="" font-size:="" 14px;="" text-align:="" start;="" white-space:="" normal;="" background-color:="" rgb(255,="" 255,="" 255);="" margin:="" 5px="" 8px="" 10px;"="" class="js_darkmode52" style="font-size: 16px; white-space: normal; margin-top: 0px; margin-bottom: 0px; padding: 0px; outline: none; box-sizing: inherit; color: rgb(102, 102, 102); position: relative; line-height: 32px; font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", 微軟雅黑, STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif, HYWenHei-GEW;">為了讓大家更直觀的理解我們的人物，方便在與各職能角色溝通時(shí)快速達(dá)成共識(shí)。我們收集了符合我們?nèi)宋镄愿竦囊恍┊嬒翊蛴〕鰜?，通過討論投票的形式，選出最符合我們產(chǎn)品的人物畫像。
<p style="margin-top:0px;margin-bottom:0px;white-space:normal;caret-color:#282828;color:#666666;font-family:"font-size:16px;outline:0px;padding:0px;line-height:32px;text-align:justify;">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><br />
文章來源：站酷 作者：酷家樂UED
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
<p style="margin-top:0px;margin-bottom:1rem;white-space:normal;caret-color:#282828;box-sizing:border-box;font-size:16px;background-color:#FFFFFF;color:rgba(0, 0, 0, 0.843);font-family:"letter-spacing:0.1px;text-align:justify;">
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:"font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><a href="http://www.yvirxh.cn/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">藍(lán)藍(lán)設(shè)計(jì)</a>( <a href="http://www.yvirxh.cn/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;padding:0px;margin:0px;text-indent:34px;background-position:0px -60px;">www.yvirxh.cn </a>)是一家專注而深入的<a href="http://www.yvirxh.cn/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">界面設(shè)計(jì)公司</a>，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、<a href="http://www.yvirxh.cn/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">BS界面設(shè)計(jì) </a>、 <a href="http://www.yvirxh.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">cs界面設(shè)計(jì) </a>、 <a href="http://www.yvirxh.cn/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">ipad界面設(shè)計(jì)</a><a href="http://www.yvirxh.cn/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;"> </a>、 <a href="http://www.yvirxh.cn/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">包裝設(shè)計(jì) </a>、 <a href="http://www.yvirxh.cn/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">圖標(biāo)定制 </a>、 <a href="http://www.yvirxh.cn/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">用戶體驗(yàn) 、交互設(shè)計(jì)、 </a><a href="http://www.yvirxh.cn/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">網(wǎng)站建設(shè)</a><a href="http://www.yvirxh.cn/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;"> </a>、<a href="http://www.yvirxh.cn/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;padding:0px;margin:0px;background-position:0px -60px;">平面設(shè)計(jì)服務(wù)</a></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong></strong></strong>
</p>
<div>
<strong style="margin:0px;padding:0px;outline:none;box-sizing:inherit;"><strong style="margin:0px;padding:0px;outline:0px;max-width:100%;box-sizing:border-box !important;overflow-wrap:break-word !important;"><strong style="box-sizing:border-box;font-size:14px;font-family:微軟雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:"font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-height1111111111111111111111111111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微軟雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><br />
文章將分為6部分
1、撰寫文檔的目的
2、什么樣的產(chǎn)品值得體驗(yàn)
3、產(chǎn)品體驗(yàn)類型
4、產(chǎn)品體驗(yàn)文檔應(yīng)該包含的內(nèi)容
5、文檔質(zhì)量的評(píng)判標(biāo)準(zhǔn)
6、體驗(yàn)文檔和競(jìng)品文檔的異同
如果你是做平臺(tái)型電商，那么淘寶、京東這些你就得去體驗(yàn)體驗(yàn)。
以上信息獲取渠道：
圍繞著體驗(yàn)?zāi)康暮妥x者感受，可以把產(chǎn)品體驗(yàn)文檔的質(zhì)量評(píng)判標(biāo)準(zhǔn)做一個(gè)總結(jié)。
1）體現(xiàn)產(chǎn)品核心價(jià)值
2）抓住產(chǎn)品重點(diǎn)
3）體現(xiàn)產(chǎn)品特色
4）結(jié)構(gòu)清晰
5）格式美觀
6）思考總結(jié)
1）詳細(xì)數(shù)據(jù)支持
2）商業(yè)模式分析
很多小伙伴會(huì)把產(chǎn)品體驗(yàn)報(bào)告和競(jìng)品分析報(bào)告搞混：都是對(duì)產(chǎn)品進(jìn)行體驗(yàn)和分析，除了名字之外，到底有啥區(qū)別？
我們從「異同」兩個(gè)方面來分析，看看它們究竟有啥區(qū)別。
競(jìng)品分析文檔是對(duì)競(jìng)品做分析，常用SWOT模型，將自己和競(jìng)品做對(duì)比分析，學(xué)習(xí)借鑒。而產(chǎn)品體驗(yàn)，不一定是競(jìng)品，可能只是你個(gè)人感興趣而已。
競(jìng)品分析文檔，一般僅限于輸出競(jìng)品的思考總結(jié)，而產(chǎn)品體驗(yàn)的范圍更廣。
產(chǎn)品體驗(yàn)可以淺嘗輒止，但競(jìng)品分析不行，競(jìng)品分析需要透過現(xiàn)象看到本質(zhì)，觀察競(jìng)品的一舉一動(dòng)，配合市場(chǎng)動(dòng)態(tài)，不斷調(diào)整我們自身產(chǎn)品方向，甚至是公司戰(zhàn)略定位。
4、方案對(duì)比的優(yōu)缺點(diǎn)各有哪些？
多體驗(yàn)、多思考、做自己、少糾結(jié)模板
文章來源：站酷 作者：阿G聊產(chǎn)品
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn