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