最近很流行一個詞——B端C化，解釋出來就是可以用C端的模式和思維來對B端產品進行設計，討論者大致分為兩種觀點：

1.C端產品市場已經趨于飽和，可拓展空間剩余不多了，B端產品市場還是一片藍海，于是產生了一些C端設計師轉型去做B端了，將一些C端的模式和思維帶到了B端設計中，導致越來越多的B端逐漸C化；

2.B端產品市場互相競爭，為了在同市場中打出差異化，于是一些B端市場開始招攬C端設計師培養轉型，并且嘗試融入C端產品的模式和思維在同市場內競爭，是產品設計的“內卷化”現象，導致市面上的C化的B端產品越來越多；

但上述無論哪一種觀點，都在闡述一種現象或者趨勢：不管是交互還是視覺還是UI，目前部分C端設計師正在往B端設計師轉型。這個現象的發生對整個設計行業來說無異于新增了很多新亮點——市場上越來越多的B端交互、數據可視化視覺等需求，進而導致對市場培訓行業開始產生B端培訓的訴求，同時也破空而出了很多優秀的B端設計師。那么B端C化到底是什么，和傳統B端C端有什么區別，有這方面想法訴求的同學怎么去實現轉型？

由于我本人之前是做C端UI設計師，到后來轉型成為B端交互設計師，而接觸的業務恰好涉及B端和C端的聯動以及多角色之間的協作，所以這篇文章借助結合我個人的經驗和看法，談一談自己對B端C化的理解

B端C端的區別

在談B端C化之前，需要先了解B端和C端的區別是什么。B端C端的區別網上有很多文章和概述了，大致歸納下來主要以四個維度去區分：受眾主體、上線周期、業務類型和產品側重點這四個維度，其余的維度也會有區分，但是影響較小，主要還是圍繞以上四個維度進行B端和C端區分

受眾主體

受眾主體也就是相對應產品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場景和路徑較為單一的，比如C端產品就以年齡層、城市、性別等來劃分用戶，每個階段的用戶都有不同的訴求、認知和習慣等等；在做任何決策方面都屬于偏感性（Heart）的個人決策（Personal）；用戶穩定性則比較差，要是對產品不滿意，可以立馬換另一款產品，轉換門檻低，有多個競爭對手產品可供選擇；

而B端產品的受眾主體則是為組織群體，特征為多場景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權限等劃分用戶群，但是之間的關系更加復雜，比如設計一個銀行內部管理系統，用戶群就很明確清晰——銀行各級職員角色，根據職級關系設計不同的功能以及權限；在做任何決策方面都屬于偏理性（Head）的團隊性決策（Team）；用戶穩定性較強，要是對產品不滿意，也只能被迫適應和忍受，轉換成本較高，幾乎沒有其他產品可供選擇

上線周期

上線周期就是指產品從需求階段到設計階段。到開發階段直至最后產品上線所需要的周期。C端產品上線周期模式有個很明確的特點：快速迭代、敏捷，很多C端產品功能更新迭代的速度很快，上線周期非常短，往往半個月甚至一周就完成開發上線，加上用戶群的多樣性和跨度大，所以在上線的時候往往會需要AB實驗去驗證方案可行性；

B端產品上線周期則是和C端一個對立面——長，少則雙月/季度多則半年/一年等，因為B端產品流程上都屬于重型流程，角色之間關系復雜，交互系統較為繁瑣，需求的改動和迭代并沒有那么頻繁，也不需要像C端產品那樣快速上線搶占市場，所以B端上線周期會很慢，也導致在工作強度上相比C端較為輕松一些，但是缺點就是結果沒有C端來的那么快和明顯

業務類型

C端產品的核心競爭力就是產品本身，關鍵總結就是讓用戶爽就完事了，所以C端產品的需求類型往往圍繞用戶群的痛點產生；因為C端用戶跨度大，不同的用戶群體有不同的痛點，所以導致C端的需求類型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯中逐漸得出正確的結論；

B端產品的核心競爭力除了產品本身，還依賴復雜的關系、渠道、技術和資源，你的關系夠硬、渠道夠廣、技術夠領先、資源夠豐富，哪怕你的產品很一般，一樣能領先其他同行業的競爭對手，關鍵總結下來就是讓用戶贏就夠了；B端產品的需求類型雖然也是圍繞著用戶群的痛點產生，但需求的目標是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產品來說，B端產品是需求更加明確且容易達成目標

產品側重點

產品側重點無異于區分C端和B端最明顯的門檻了，C端產品的側重點主要在于體驗，而B端產品的側重點主要在于效益

前面提到過C端產品核心讓用戶爽就完事了，加上基于用戶更換產品的成本很低：你這款產品我用不爽就換掉了，所以C端產品的側重點永遠以用戶體驗為主，前面說的需求業務類型也幾乎是圍繞用戶體驗產生的；大家對比市場上同類型的C端產品，界面、交互、功能都不會差很多，是因為經過長時間的更新迭代，已經沉淀下來目前最好的用戶體驗類型了，隨著產品量級越大，改變用戶體驗類型就越謹慎；C端產品就是為了尋找并解決用戶痛點、癢點和爽點，加上品牌性、用戶隱私等因素考量，產品側重點聚焦于用戶體驗

B端產品側重點則是圍繞效益了，因為作為一個團隊使用的產品，不管是從易用性、功能性還是安全性，為這個團隊解決問題為首要基礎，那么使用者的體驗、產品的美觀度等等相較于優先級就沒有那么高了，所以導致了有一段時間大家對B端的理解依舊是老舊、丑、難用的認知上；B端產品就是為了使用產品的團隊解決效率、成本、營收的問題，加上產品的穩定性、安全性等因素的考量，產品側重點自然更聚焦在效益上

什么是B端C化

前面了解了B端和C端產品的區別，接下來聊一聊什么是B端C化；簡單來說從字面意思理解就是B端的設計層面逐漸靠近C端，網上也有很多B端可視化、趨勢潮流的設計和文章，但是B端C化不僅僅是從視覺設計上的改良，下面我逐漸從大到小聊一下我對B端C化的理解

功能架構

在做過很多B端產品之后發現，往往很多產品經理是對整個產品架構、功能形態一切都清晰地了如指掌，但是有時候在搭建產品架構的時候，功能形態單一粗糙，步驟復雜且笨拙；站在業務產品的視角來看，架構邏輯上都是沒有問題的，但是站在用戶視角來看，整體框架是混亂破碎的，步驟繁瑣且復雜，導致用戶對產品的認知變差，但是又不得不去用這個產品，只能被迫去學習使用

比如一個產品案例，就是一個產品的底層邏輯是前端輸入素材id，后端返還一個素材后就可以使用了，站在產品業務視角來看，這樣設計沒有什么問題，符合產品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來給用戶選不好嘛？

行為習慣

行為習慣自然是指用戶群在該行業下的行為習慣，電商行業、社交行業等等不同行業的習慣、專業術語等都不相同，這個在C端產品中都很能得到體驗，比如電商行業的大紅大紫，社交行業的左右滑動等等，這類有著很明顯的行業屬性和大眾認知，一樣是B端設計中應該注意的點

最經典的案例就是紅色綠色的定義區分，在數據產品認知中，綠色代表數據漲了，紅色代表數據跌了，比如GMV數據，DAU數據等，紅色為重點關注的數據；而在金融行業中，基金股票紅色代表漲了，綠色則代表跌了，所以設計的原則一定得是基于不同行業的用戶行為習慣

信息層級

B端產品的信息量一般是很龐大的，尤其是數據、表單、審批等B端產品，涉及到不同角色不同權限的開放等，所以用戶能否能一眼看清關鍵信息，能否幫助用戶快速達成目標，是交互層面針對信息層級的設計處理一個重要的環節

之前很常見B端產品中信息處理的方法就是堆積處理，直接將信息、數據等平鋪展示，比如很久之前的某牛商家端后臺等老舊系統；現在很多新的B端產品都是以模塊化處理方法將信息層級區分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設計

設計語言

設計語言自然是B端設計中標題、字號、顏色等規范標準，早些年把B端產品組件化后且開源的自然是阿里老大哥了，當時最早的AntDesign、以及后來的ElementDesign組件庫，到現在都被很多中小企業甚至大廠某些產品一直使用中，但隨著B端產品的普及和發展，越來越多的企業開始將自己產品沉淀出完善成套的設計語言，并搭建出自己的組件庫投入使用了

用戶體驗

如何去衡量用戶體驗是否是好的，最客觀來講當然是通過數據去衡量，而數據往往在C端產品中很常見，不管是體驗數據還是表現數據，都是C端產品中最為關注的；然而在B端產品中，更多收集的一般都是業務表現數據，幾乎沒有衡量用戶使用平臺的相關數據，大多衡量體驗的方法都是依靠問卷反饋的形式；但在B端C化的過程中，用戶體驗的數據也逐漸被加入到B端產品當中來，成為體驗標準的考核之一：比如某個任務完成的時長，報錯出現的頻次、某某工具的使用率等

視覺設計

最后就是B端C化表現層的設計，包括目前主流的設計趨勢如大數據可視化、3D建模、材質質感、Dark模式等都逐漸融入到B端產品中，使得B端產品不再追求簡單的“功能優先”和“能用就行”，而是像C端那樣追求更美觀的視覺，更極致的體驗

為什么要B端C化

總結下來“B端C化”就是B端產品無論是從功能架構還是視覺體驗，越來越趨于人性考慮設計，越來越關注使用者的感受和反饋，因為說白了不管B端產品代替成本高不高，用戶是一群專業人士還是普通職員，使用者歸根到底還是“人”在使用產品，那么必然會帶來體驗相關的問題；所以B端C化會逐漸形成一種趨勢，在企業平臺資源支持的情況下，會將B端產品的功能放大，追趕市場競爭，逐利行業內卷，在體驗和視覺感官上也會更加的人性化，結果自然是產品設計者們更加的卷了（手動狗頭）

總結

無論是現在的B端C化還是將來其他多元的設計趨勢，隨著市場的競爭和行業內卷，已經反推著設計師們不單單局限于照顧自己的“三分田地”了，無論是之前視覺設計師開始學習3D建模，還是UI設計師嘗試接觸代碼設計，設計師最大的品質就是應該緊跟時代的趨勢變化，及時調整補充自己的能力，提升自我的競爭力，才是在當今環境下立足的根本

原文地址：站酷

作者：雨灰

轉載請注明：學UI網》聊一聊所謂的B端C化

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

硬實力是指專業能力，包括交互設計能力、對所負責的業務線與對應產品的理解程度、對產品面向的用戶群體與用戶使用場景的了解程度、對設計規范與組件的熟練應用、數據分析能力、對設計工具的熟練使用、以及具備一定的視覺審美。

軟實力是指通用能力和個人影響力，通用能力主要包括“溝通與表達能力、推動與執行能力、項目管理能力、復盤總結能力”；個人影響力主要包括“分享、指導、創新能力”。

本文將結合我的工作經驗，以及不同公司招聘要求中都有的共性點，向大家介紹如何在日常工作中培養和提升自己的軟實力。

下圖是我簡要繪制的“交互設計師能力框架圖”：關于硬實力這部分內容，在我之前的文章中已經梳理過一些，感興趣的可以回頭翻看。

一、通用能力

1. 溝通與表達

首先你需要分析自己的性格特點，一般外向的人擅長溝通，即便不是外向型，也最好不要是內向不愛說話。只有你發自內心的愿意主動與他人溝通，別人才能感受到你的親和力。

其次不管與怎樣性格的人溝通，把握的第一個原則是“就事論事”：沒必要為了事情大聲爭論，甚至上升為人身攻擊，我們溝通的初心是為了解決問題，應該盡可能的“求同存異”。

你需要做的是想辦法解決影響事情順利發展的各種障礙，過程中遇到的非主觀因素記錄下來便于后續總結。

表達是指將思維所得的成果用語言等方式反映出來的一種行為，是向他人正確傳達自己的想法。

比如與同事溝通表達自己的觀點、公開演講、獲獎感受等，表達的定義里包含一個關鍵詞“思維所得”：這意味著你需要在平時就有一定的思考沉淀，不然你無法做到“準確且清晰”的傳遞自己的觀點。

需要把握的第二個原則是“不卑不亢”：既然是一個Team，團隊最終目標是一致的，只不過不同成員的崗位角色不同，分工內容不同，沒有誰一定要給誰妥協，或者誰一定要強硬到底。按照已經發生的客觀事實有理有據的陳述自己的觀點即可。

最后需要把握的第三個原則是“換位思考”：用戶體驗設計領域的設計師經常提到一個詞“同理心”。我們需要站在用戶角度審視自己設計的產品，我們需要站在不同崗位角色角度理解他人的難處…無論對內還是對外溝通與表達，能做到換位思考的人，必然考慮問題更加周全、更加有深度。

2. 推動與執行

執行力是指完成任務目標的操作能力，評判執行力強弱的標準是效率與效果。執行其實是踐行的過程，踐行的過程中效率可能沒那么高、最終的效果可能也沒有多滿意，但無論如何，做這件事都為你積累了寶貴的“踐行經驗”，舉重若輕的背后一定經歷過多次失敗與不堪。

執行力是每一位員工都必須具備的基礎能力，而推動力則是針對中高階水平設計師提出的更高要求。

“從單純的執行任務”升級為“從頭到尾推動事情落地”，這是職場打怪升級的必經之路！推動力不再是單一的能力要求，而是“多項能力”的綜合體現，推動落地的過程中涉及到溝通表達、組織協調、向上管理、項目管理等能力。

3. 項目管理

往小了說是對自己承接任務的管控，范圍相對小，包括項目前期涉及到的“與上游業務同事和產品經理梳理需求、提出合理建議、預估排期”；項目推進過程中涉及到的“準時交付產出、問題溝通與解決、風險點預估與分析、及時向上匯報進展、設計驗收”；項目后期涉及到的“上線驗收、遺留問題記錄與跟進”。

以上提到的是設計師在設計層面應該做好的事情。再往大了說，你可能會作為一個分支項目的牽頭人，你要管控的不單是項目在設計階段的開展，還會更多涉及到與上游業務方、產品經理；與下游開發同事、測試同事；與外部合作方的協作等。

隨著項目復雜度提升，對負責人項目管理能力要求會越高，因為會涉及到方方面面，可能包括業務對接洽談、細節協商達成一致、進度把控等。

作為交互設計師，有機會深入參與到項目推進的全流程中，這既是對你專業能力的深化，也進一步加強了你對所負責業務線的理解程度。

如果你遇到這樣的機會，請珍惜把握，尤其是首次承擔類似職責。誰都是從0到1、從無經驗到身經百戰走過來的，不要有過多的擔心害怕，擼起袖子加油干！當你經歷過再回首時，你會感謝當初自己的勇敢與自信。

4. 復盤總結

近期面試一些交互設計師，聊到關于項目需求的復盤時，有的應聘者在公司現有機制下沒有機會接觸到需求上線后的數據表現或者用戶反饋；有的應聘者總結分析的不夠深入或者視野局限于設計層面的改進。

我之前也在小的創業公司工作過，以上類似現象在許多公司還是比較普遍的。我的看法是：圍繞個人能力發展思考并決策。

• 如果你所在的公司沒有建立復盤機制，你也很少能接觸到相關數據，一方面你可以嘗試著利用上面說的推動能力，試著推動建立這個機制，至少可以先從你所在的小部門開始試行；另一方面如果你是在類似國有企業，反饋信息涉及到保密，這是客觀因素與你的努力無關，這時候需要認真考慮換工作的事情了。
• 另外一種情況是有機會獲取相關反饋信息，但有時候承接的業務需求不間斷，再加上許多公司的復盤機制算是錦上添花，不是非做不可的，所以針對設計師個人而言，做好這件事更多依靠的是“自驅力”。

復盤總結不單針對工作項目，另外重要的方面是自我反思。從過往的工作經驗中思考做的好的地方，不好有待提升的地方，需要補齊的短板是什么，職業生涯下一階段的規劃是什么… 我認為尤其對于交互設計師而言，階段性的反思總結，有助于更好的認清自己能力優勢與劣勢，有助于逐步搭建上面提到的自己的能力框架。

二、個人影響力

1. 分享

分享其實就是將某方面復盤總結的結果拿出來與他人溝通交流，分享形式和分享內容圍繞分享目的可以靈活調整。比如我之前的文章《如何做好一場部門內部分享？》中提到過關于分享形式與內容的創新，感興趣的可以翻看。

當初之所以要做出這個改變，是因為我們認為原有的單個人框定大概分享內容范圍進行分享的方式，不能很好的幫助分享人和被分享人提升能力，同時分享內容容易脫離現有業務。當然不同公司分享目的考慮的側重點不同，所以算是因公司而異吧。

對個人而言，如果你平時針對項目、設計專業、工作流程、存在的問題等有過一定程度的思考，你會積累一些沉淀，無論是優秀的值得借鑒的內容、還是失敗的值得引以為戒的內容，都可以與同事或者專業領域的朋友交流討論。反過來在這個過程中，又會激發你更多的想法，拓展你的眼界與思維。

2. 指導

團隊內有工作經驗或者熟悉工作流程的中高階設計師，針對初入職場的新人或者剛來公司還處于適應部門環境的有工作經驗的職場老人，進行專業層面和工作流程的指導。

許多公司比較注重公司文化對新人的輸出，但針對日常工作的指導帶教卻沒有十分明確的規定。

輔導的效果很大程度上取決于指導人，如果某天你有機會帶教新人，不要輕視這項工作，首先在心態上能夠做到上面提到的換位思考，你自己也是從新人一路走過來的，能夠切身感受到新人的訴求。

其次也是對你責任心的側面考察，在職場有一句話我認為是適用的：你能承擔多大的責任，就值得擁有多大的回報。

3. 創新力

提到創新許多人覺得有些虛無縹緲，因為現實情況是處理不完的待解決問題，哪還有時間和精力做創新，就算提了創新的點也很難有資源支持。很久一段時間我也是這么想的，后來看到兩個觀點使我茅塞頓開：

• 創新不是顛覆，也不一定是驚天動地的大動作，更多的可能是微創新，一個有可行性有突破性的想法。
• 如果你對所做的事情保持有好奇心或者熱情，千萬不要被日常的工作消磨掉。好奇心是創新的源動力。

生活中太多的人會告訴你，只能顧好眼前的茍且，沒有精力和金錢暢想詩與遠方，如果你也這么想并且這么去做，你只會被大眾牽著鼻子走。更為可怕的是，慢慢的你丟掉的是那些原本可以讓你更為成功的優勢點。

三、總結

以上是我提煉出的我認為一名優秀的交互設計師應該具備的“軟實力”， 這部分能力應該是成為高階設計師的衡量標準之一。無論是職場新人還是老鳥，重視和持續打磨自身的通用能力與個人影響力，才能不斷提升自己的不可替代性。

原文地址：人人都是產品經理

作者：Viksea

 轉載請注明：學UI網》交互設計師該如何提升“軟實力”？

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

01 如何理解界面設計？

互聯網的項目職能有產品經理、用戶體驗設計師、交互設計師、UI設計師、視覺設計師、前端工程師、后端工程師、測試工程師等，每個職能崗位對界面設計的理解深度也各不相同。

交互視角

交互設計師會從信息架構、概念設計、導航設計、標簽設計、表單設計、搜索、篩選、關系、用戶、目標、行為、場景、組件、模式等維度去觀察和理解界面設計。

組件化視角

產品經理、交互設計師、UI設計師、前端工程師共同搭建設計系統語言時，他們會從邏輯、關系、信息、載體、容器、技術等維度把界面拆分成一個一個的組件，比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。

視覺視角

UI設計師、視覺設計師的視角會關注界面設計中的字體、色彩、圖標、圖片、布局、編排、比例、質感、柵格、風格、趨勢等。

前端視角

前端工程師會從代碼視角理解界面結構，相關知識點有框架、容器、盒子原理、樣式、標簽、表單、模式、絕對定位、自適應、響應式、百分比等。

界面三重構構思

基于以上視角，現在我會以一種新的視角帶你去理解和學習界面設計，它就是界面三重構。簡單說就是分別從X軸、Y軸、Z軸三個維度去理解和解讀界面設計。但是在模型抽象時遇到了困難，如圖模型一是從界面、交互、前端的X軸、Y軸、Z軸去解讀，模型二是從X軸、Y軸、Z軸的界面、交互、前端的去解讀。

模型的抽象不夠簡潔，有很多重復的點。這種結構很像組件化中的類別和狀態。我嘗試用組件化命名的方式梳理出平面邏輯圖。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因為交互和前端都是建立在界面之上的，所以就有了界面+交互—X、界面+前端—X。當寫到界面X軸相關知識時，如果有交互、前端的知識點，可以在此基礎上接著寫。

根據平面邏輯圖我抽象出一個更簡單的模型?？梢詮慕缑娴腦、Y、Z、XY、XZ、YZ去輸出相關知識點，交互、前端在界面三重構的基礎上闡述。

02 X軸設計

X軸設計中有位置的結構關系，位置的排序，段落文本行長的易讀性，交互和前端中的應用。

位置

X軸從位置上可以簡化為左右、左中右的結構關系。

左右結構

在左右的結構關系中，自古就有左為上，人的視線瀏覽順序是從左到右，從上往下。所以重要的信息內容可以優先放在左邊。在舞臺劇表演中，重要的角色登場往往也是從左邊進場。微信的發現列表頁把圖標加文字放置左邊，右邊放箭頭指向。

左中右結構

左中右的結構布局讓層級更加豐富，從而增加層次感。左中右的位置順序是可以被定義的，常見的有左中右對應一二三的位置關系，也可以對應二一三的位置關系。這兩種位置關系分別鞏固了左或中為最重要的地位。

左右并列秩序

我們來看看App界面的底部Tab欄的結構，當我們隨意打開一個App時，你還記得底部Tab從左到右的欄目分別是什么呢？可能經常使用的App我們很熟悉，對于不熟悉的應用可能就不是很了解。但是我們依然可以從中找到規律，就是第一個欄目往往是首頁，最后一個是我的個人中心，其他的相對比較模糊。

由此我們推斷出從左往右的順序并不是一二三四依次遞減，而是一三四二遞減結束處呈上升趨勢。這種秩序不但適用于C端產品的界面設計，同樣也適用于B端的界面設計。B端產品界面的導航結構第一個是首頁（工作臺）或最重要的內容分類，最后一個是更多或設置。同樣遵循以上規則。

右側位置重要最典型就是模態設計，在對話框設計中，確定和取消按鈕往往把最重要的放置在界面的右側，這時位置的排序確定為一，取消為二。

易讀性

文字段落編排時更多的需要考慮段落文本的易讀性，當你設計C端產品時，因為屏幕尺寸的原因會忽略段落文本的行長，但在Web、B端設計中，行長的定義可以影響到讀者的閱讀效率和體驗。

美國芝加哥有學者做過一個試驗，人的眼睛是在不停地跳動，在跳動的時候是看不見字的，停下來的時候才能看見字，而且每次停下來只能看六個字。所以一段文字不要排得太長，過長眼睛在閱讀時會很疲勞，在閱讀時我們更適合閱讀較短的文字。

網頁新聞詳情頁面的行長，我研究了紐約時報為640px、華盛頓郵報680px、Medium680px，所以我們設計師可以控制行長最大在640—680px。但是西文和漢字還是有區別的，站在前人的規則上去學習定義規則更加重要。

交互改變位置秩序

位置的重要秩序其實是很容易打破的，在界面固定不變時結構中相對穩定，當交互大兄弟來了，說我想嘗試改變改變，如圖把手機的網易云音樂和QQ音樂進行組合成組，原來的一二三四的結構就被打破了，變成了一三二的視覺結構關系。點開組合后，這時候用戶大兄弟來了，網易云音樂與QQ音樂的排列先后次序取決于產品在用戶心中的重要程度和操作頻次。因人而異，所以大家一定要帶著客觀的心態去學習，不同視角和不同思考維度都會有異樣的結果。

響應式與斷點

X軸設計從前端的角度就是響應式和斷點，因為載體的容器大小不同，前端代碼主要用Media來打斷點，不同斷點之間會定義相對應的樣式。內容元素按照柵格系統進行適配調整。

03 Y軸設計

視覺中心

物理幾何中心是居中的，但是人的視覺中心是偏上的，有時候眼見為實是假的，視錯覺中有大量的案例，在色彩和圖形設計中需要視錯覺的矯正。

如下圖APP的閃屏頁的Logo居中布局，考慮到有向下的重力和視覺中心偏上的理論，往往把Logo居于物理中心上方。

倒金字塔信息層級

倒金字塔結構是按重要性遞減順序安排消息的一種結構形式。界面展示的信息層級多為倒金字塔結構，重要的信息放上面，越往下信息層級越低。網頁設計中還會有折線之上的運用，以前人們看報紙是折疊的，但是為了告知讀書報紙展示也是有內容的，所以折疊設計時看到一些圖片引導讀者打開。

Apple官網的信息層級也遵循倒金字塔信息層級，上方Logo加導航，中間為最新發布的產品，下方為歷史發布產品。信息重要層級依次遞減。Apple官網下方露出iPhone的照片來引導用戶滾動下拉瀏覽。

縱向模式

縱向模式是用戶習慣自上而下滾動來瀏覽更多信息，當用戶還未確定目標信息時，縱向視覺流能幫助用戶在不需要回掃的情況下獲取更多信息。如圖微信APP的發現界面，用戶會選擇一列一列快速瀏覽直到找到某一目標信息后，再橫向瀏覽細節。那么問題來了，上文中提到倒金字塔信息層級，重要的信息應該放置上方，為什么APP的Tab欄很重要卻放置在界面底部，下文隱喻設計中“駕駛艙隱喻”會講到。

04 XY軸設計

X軸與Y軸組合后就形成了一個平面，所以平面設計的理論知識在此次也適用。

盒子原理

當我們做界面設計時，為了讓界面的元素統一為一個整體時，給他們整體來個框框就形成了一個一個盒子的樣式，這樣更有利于組合信息。典型的設計有卡片、列表、模塊化等。

四角壓邊

在Dribbble的作品展示中，由于作品圖片展示比例為4:3，為了平衡界面中的元素，常常在四個角放一些小的相關元素來平衡畫面。我們來看一下R神的插畫作品中大量使用了四角壓邊的設計技巧。

運用到界面設計中最典型的就是卡片設計，比如個人中心、銀行卡、列表頁面等。如圖銀行卡就采用卡片設計，四角放置信息，整體給人簡潔大氣的感覺。

四角壓邊在設計中是可以靈活運用的，可以把四角壓邊變成三角壓邊，兩角壓邊。如圖當四角壓邊的A1、B1與A2、B2位置慢慢移動至重合時，四角壓邊就變成了兩角壓邊，多用于列表頁。

蹺蹺板原理

四角壓邊的本質是蹺蹺板原理，通過調整元素讓界面達到平衡。蹺蹺板原理本質是平衡，需要關注的是中間的一條水平線。微信列表設計中就運用了這個原理來平衡界面。在蘋果的原生設計中列表之間分割線是不包含圖標且一直切到最后側。因為左邊的圖標視覺重量大，右邊的重量小，但是通過縮短左側的杠桿長度并增加右側的杠桿長度來達到視覺平衡。這種設計技巧在編排設計會被大量運用。

8點網格（4點網格）

8點網格理論來源于谷歌Material Design的設計語言，4點網格理論來源于蘋果iOS的設計語言。個人還是更加喜歡iOS的4點網格，因為原子單位越小，可呈現的方式越多，可解決的問題方案也越多。8點網格可以理解為最小單位，其他使用的單位都為8的倍數。8點網格多用于DIV盒子與盒子之間的間距。圖標、頭像等固定尺寸的也可以使用8的倍數。

蘋果和谷歌都是在定義產品系統中的度量單位，西方人一直想定義度量這個問題，其中最有名的就是勒·柯布西耶的《模度》，他的理論是以西方人的的比例結構來定義規范，并不能適用于全世界更多的人種比如東方人、非洲人。但是蘋果設計團隊發現世界上所有人類的手指觸摸屏幕大小是一致的，最小為44pt。iOS定義了人類使用觸控屏的基本度量，44pt也是4的倍率，這才是我喜歡iOS的4點網格的真正原因。

視覺流引導

讀者在看界面的時候，眼睛的視線受到畫面內容的吸引，就會產生一個視覺先后的次序，將這些視覺集中點的先后依次連起來，就形成了視覺流導向。

設計師經常會考慮版面或界面上的文字是否會被閱讀，實際上很多文字都不會被閱讀，但是可能會被瀏覽。視覺眼動儀可以檢測到人們如何瀏覽一個頁面的，從找到切入點，到了解界面中信息關注的先后次序，從而調整界面元素，來引導用戶去關注重要且有用的信息。常用的視覺流導向有F模式、Z模式、古騰堡圖表法等。

F模式

尼爾森F型視覺模型由Jakob Nielsen于2006年提出，他指出用戶在瀏覽界面時，視線動線會呈現宛如英文字母F的形狀，這種視覺瀏覽模式主要包括以下三個方面：

1、讀者的眼睛會先從頂部開始，從左到右水平移動，瀏覽的上半部分會形成一條橫向的運動軌跡，這就是F形狀的第一條橫線。

2、讀者的目光會向下移動，并再開始從左到右觀察，但瀏覽的視覺動線長度會相對短些，這就是形成了F形狀的第二條橫線。

3、讀者從界面左邊的部分進行垂直掃描，以較短的長度向下掃描，此時讀者的閱讀速度較慢，而且更有條理性和系統性，這樣就形成了F形狀的一條豎線。

根據尼爾森F模型，我們可以得出幾個心理暗示：

1、讀者在瀏覽界面時是快速掃視，不會仔細閱讀每一個界面內容。

2、界面的頭兩段文字無比重要，多用小標題、短句引起閱讀者注意。

3、將重要的內容放在最上邊，將重要的信息顯示在標題和段落的前部顯示給讀者。

Z模式

Z模式是基于用戶從左到右自上而下的閱讀習慣，用戶首先關注的上半部頁面的內容，依照從頭部的左邊到右邊，再沿著對角線瀏覽下一部分的中部左到中部右，循環往復的瀏覽模式。如圖頭條的文本編排從標題從左到右閱讀到文本從左到右閱讀。

古騰堡圖表法

古登堡圖表法（Gutenberg Diagram）又稱對角線平衡法則（Diagonal Balance），由14世紀西方活字印刷術的發明人約翰·古騰堡提出。古登堡圖表將要畫面顯示的東西分成了四個象限：

1.第一視覺區(Primary Optical Area)：左上方，讀者首先注意到的地方。

2.最終視覺區(Final Optical Area)：右下方，視覺流程的終點。

3.強休息區(Strong Follow Area)：右上方，較少被注意到。

4.弱休息區(Weak Follow Area)：左下方，最少被注意到。

如圖小程序的授權頁從Logo到允許高亮按鈕就是對角線平衡構圖。

05 Z軸設計

Z軸設計可分為視覺度層級（單界面）、結構層級（單界面）、產品用戶流程（多界面）。

視覺度層級（單界面）

視覺度層級是根據界面元素的視覺表現來進行劃分瀏覽的先后次序。界面的視覺度表現技法有主體與背景、投影、色彩字重字號等。

主體與背景

界面中使用背景色是讓元素向前進，背景色多為灰色且有顏色傾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。當背景色為白色時就需要留白、線條、投影來區分層級。

投影

界面中使用投影可以增加內容的視覺層級，之前追波流行的彌散投影也是為了增加界面視覺層級。谷歌Material Design就是運用紙張的物理投影來映射到設計系統中。在界面設計中使用投影時要思考這種技巧的保鮮時長。

色彩大于字重大于字號

色彩最典型的就是App的消息紅色圓點，紅色的波長最長，所以用最突出的紅色來提醒用戶有新動態。字重是從面積的大小衡量的，標題文字常常加字重來提升視覺。在定義組件時，鼠標懸浮、Hover的各種狀態就是用顏色來區分，目的是讓用戶操作后有反饋的感知。

結構層級（單界面）

界面元素中的結構層級可以分為內容層、導航層、遮罩層、彈出層。內容層是界面內容元素的承載；導航層是位于內容之上，位置相對靜止；遮罩層配合彈出層一起使用，又叫模態層；彈出層屬于輕量化設計，比如消息通知、下拉菜單和加載、報錯等狀態提醒。

模態對話框

如圖模態對話框是用戶在完成任務時，不希望跳轉頁面而打斷工作流程，而是用Modal對話框在一個界面上承載相應的操作。對于信息量不大，容器可展示的操作可用模態對話框。

產品用戶流程（多界面）

產品的界面設計需要從概念到信息分類到信息架構，目的是方便用戶快速的搜索、篩選、辨別出有用的信息。交互設計需要學習辛向陽教授的交互設計五要素：用戶、行為、目標、場景、媒介。

產品的Z軸設計其實是從平面（界面）、空間（層級）、架構（關系）梳理出結構關系，但站在產品層面最重要的是信息與用戶的交互設計，關注用戶旅程地圖中用戶流程。用戶流程需要多界面之間跳轉，這就形成了產品的Z軸界面設計。

什么是用戶流程

用戶流程是用戶從打開APP到完成任務關閉APP的使用全過程，包括了用戶看到什么信息，做了什么事。

疫情期間每天都需要使用隨申辦小程序，用戶流程是打開微信，進入到微信首頁，下拉查看常用小程序，點擊隨申辦，查看隨申辦，退出小程序。

根據用戶流程優化體驗，用戶流程越短越好，操作流程盡量不超過5步。用戶流程要顧及頭尾，即用戶進入到一個新界面會看到什么信息，用戶成功完成任務后會跳轉到哪里，或顯示哪些反饋信息。這些都是最容易被遺忘的接觸點。

如何確定用戶流程

基于用戶的使用場景。以小水查找朋友圈某個朋友的信息為例，需要思考用戶有哪些場景，如果知道誰發的，就會先通過找到人，然后進入其朋友圈找到信息。如果忘記誰發的呢，那只能憑記憶里在朋友圈慢慢滑動，直到找到該信息。

以上從交互設計五要素行為和場景對用戶流程進行分析，還可以從用戶、目標、媒介去思考如何幫用戶高效的完成任務。拆解用戶方法有用戶畫像分類、北極星指標分類、用戶目標分類、用戶角色分類、利益相關者等。拆解媒介的方法有競品分析、頭腦風暴、ABTest、埋點數據分析等。

06 XZ軸設計

上文已經講了Z軸相關設計，為什么還要寫XZ軸、YZ軸的設計呢，從X、Y、Z、XY、XZ、YZ更有邏輯性和完整性，也確定存在一小部分的案例可以解析。

Banner輪播圖

Banner輪播圖除了橫向的X軸出場次序，還有Z軸點點一對一的當前狀態。移動端受容器大小限制多為Z軸設計，Web端容器變大可以變成左右的交互設計形式。

導航欄

導航欄是Z軸的視覺與交互結合，當前狀態需要重點突出，視覺向前進，點擊導航欄后底部的橫線會有動效移動，可以側滑導航欄選擇類別，這樣效率會更高；也可以側滑下方內容切換選擇。

列表側滑刪除

列表側滑是使用內嵌的布局方式，界面設計中用戶習慣是先查看再操作，當容器大小放置不下可先隱藏操作按鈕。QQ聊天界面側滑內容可以引用該內容。微信消息列表側滑出現標為未讀、不顯示、刪除操作按鈕。

07 YZ軸設計

YZ軸多結合界面交互一起設計，通過用戶操作形成Z軸信息架構的變化。YZ軸設計多用于信息流、鍵盤輸入等

頁面滑動

信息流的設計多為Y軸設計，Y軸急促、緊張的情緒會讓用戶不停的刷信息。信息流設計中采用相似的界面結構保持統一，比如固定的頭像位置，固定的操作按鈕位置，標題文本形式等。微信朋友圈信息流一整塊一整塊的加載提高閱讀效率；而抖音的視頻流是一個一個加載，更注重精準推送和沉浸式的觀看體驗。

鍵盤輸入

鍵盤輸入也是采用YZ軸設計方式，不同場景下的鍵盤輸入交互也有差別，微信聊天界面的鍵盤輸入框放置在底部，每次調用鍵盤組件時界面會從下往上移動；而朋友圈評論時，鍵盤組件除了從下往上移動，還要對齊到對應評論的內容上。前端的定位技術會有所不同。

08 模型升級

界面三重構模型中的界面可以替換成交互、前端、容器、用戶、信息等，當然也可以替換成桌面端、Web、小程序、APP、B端設計等。這樣就可以把中間的要素抽象成N，界面三重構模型升級為N——X軸、Y軸、Z軸，N可以為單一的內容比如界面，也可以是N=N+N比如界面加交互一起思考。簡化的模型更適合微觀層面的細節設計，并不適合于宏觀視角的分析設計。

如何使用該模型？

我們來舉一個組件的例子，比如導航設計共分為二級導航，我們常規會顯示出一級導航。一級導航可以從X軸、Y軸兩個維度去思考，X軸的多為橫向全局導航，Y軸多為側邊導航欄。當交互大兄弟來顯示二級導航時可以平鋪（XY）、上?。╖）、內嵌（Z），二級導航展示方式還需要考慮容器大兄弟的意見，容器夠大就可以選擇平鋪，容器小就展開收起的交互模式，展開就會有上浮和內嵌的兩種形式。

模型抽象的N是隨時發生變化，對應的界面設計形態也會發生變化，但是X軸、Y軸、Z軸的方法和設計技巧是相對不變的。只是你知道或不知道，會用或不會用的區別。產品設計中常用的兩個方法是等價設計和同形異構。

等價設計

等價設計是幫助用戶完成任務的結果是一致的，但過程可能不同，又或者是產品的邏輯結構是一致的，但設計的外在形式有差別。

如圖京東購物車的數量添加減少功能是展示出來的，直接可以添加可減少商品數量；但是淘寶購物車的數量是展示結果，修改商品數量需要點擊后出現步進器組件。這兩個設計形式就是等價設計，等價設計的好壞需要考慮很多因素，用戶、目標、場景、手段、行為、容器、信息關系、生活方式等。存在即合理，合適最重要。

同形異構

同形異構是指不同的信息、數據類型設計出相同的外在形式。微信消息列表也中有微信廣告助手、服務通知、訂閱號消息、文件傳輸助手、個人聊天、群聊天等，這些消息的數據類型、對象各不相同，可是外在的結構形式是一樣的，這樣做的目的是簡化、統一，通過圖標和頭像來區分人、應用、工具的消息差異。

以上總結的界面三重構相關知識、理論、技巧都有其使用范圍，那么有沒有一種設計方法可以凌駕于界面三重構模型之上呢，答案是肯定的，那就是隱喻設計。

09 隱喻設計

什么是隱喻設計？我們應該怎么去理解它呢？隱喻可以理解為隱含的相似性，它用想象的方式將某一物體與另一物體相聯系，并把二者的特征、情感等相互結合轉移。如果對隱喻設計感興趣可以搜索我之前寫過的文章《揭開隱喻設計的面紗-你不知道的隱喻設計》

隱喻設計是通過象征、類比的手法將復雜抽象的概念簡明化、具象化、降低用戶學習使用的成本，為用戶創造清晰、明了、舒適的操作體驗。產品設計具體表現在蘋果的ios操作系統和谷歌的Material design。

iOS六大設計原則之一

iOS六大設計原則：AestheticIntegrity(審美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反饋)、Metaphors(隱喻)、User Control(用戶控制)。

Metaphors(隱喻設計)當一個app的虛擬對象和動作都是對熟悉事物的隱喻時（不管基于現實世界還是數字世界），用戶學習的更快；隱喻設計在iOS系統中很好的得到體現，因為用戶是直接與屏幕產生物理交互的。

用戶移動視圖來查看更多的內容；拖拽內容；切換開關、移動滑塊并且直接滾動來選取值；甚至可以像翻書或雜志一樣輕快翻頁。

關于隱喻設計還可以用另一個概念來表達，那就是心智模型。因為人類幾千年的發展，雖然科技進步很快，外部環境也發生劇烈變化，但是人類的心智進步其實是很慢很慢的。

心智模型

心智模型最早是由蘇格蘭心理學家蘇珊·凱里在1943年提出的，是指在人們心中根深蒂固存在的, 影響人們認識世界、解釋世界、面對世界, 以及如何采取行動的陳見、假設和印象。心智模型是一種內部表征, 但這種表征并不是對外部世界的完全模擬, 具備不正確性和不科學性等。因為用戶心智模型存在這些不足, 所以需要了解其偏差與錯誤的來源, 以便今后采取適當的措施提高用戶與系統的交互效率。

在產品設計的系統領域，心智模型是指人們對于產品系統的理解，用戶需要了解這款產品是干嘛的、它有哪些功能、這款產品解決了我什么問題、我要如何使用該產品。每個用戶將具有不同的思維模式，他們對產品或網站的進一步體驗將逐漸改變和調整其思維模式。

心智模型其實是通過學習、感悟不斷提升自我認知的過程，還記得我剛開始學習軟件時候，如合成軟件Photoshop、三維軟件C4d。當我第一次接觸這類軟件時，感覺整個人摸不著頭腦，太多的概念都不清楚，比如通道、圖層樣式、曲面建模、打燈光、動態圖形等。踏踏實實的去學習這款軟件是最有效的方式，通過不斷的試錯和總結，慢慢的得心應手，這樣我們對于軟件的心智模型就會逐漸形成。

但是有些心智是和我們生活方式、習慣、文化息息相關的。日本設計師深澤直人就提出了一種叫做無意識設計的設計理念，又稱為“直覺“。其實在界面設計中也存在日常生活與線上產品的映射。所以設計師需要有好奇心、有共情、有洞見，才能很好理解設計來源于生活這句話。

XY情緒

X軸與Y軸的情緒可以從日常生活中找到答案，星巴克、瑞幸的店鋪使用了X軸的橫向排列，而在肯德基、麥當勞的店面排隊使用了Y軸豎向排列的方式。我們嘗試用抽象思維把它們進行圖形化，可以表達的更加直觀。

星巴克、瑞幸的店鋪使用了X軸的橫向排列，用戶可以看到工作人員不停工作，哪怕需要等待一會也不會很壓抑，整個體驗過程會給人一種舒適、安逸、閑散。而肯德基、麥當勞的店面排隊使用了Y軸豎向排列，會營造一種熱鬧的感覺，因為是快餐需要快速的售賣商品就需要給用戶營銷一種緊張急促的感覺，買完就走的即視感。

通過對日常生活和物理世界的映射，設計師在產品設計時可以考慮使用X軸和Y軸的情緒設計，比如文本采用橫向排列會給用戶帶來一種平靜、舒適的體驗。APP底部的Tab欄橫向排列希望用戶花更多的時間瀏覽每個欄目的內容，這時候內容的好壞、吸引度也是重要的衡量指標。

在信息流的設計中大量采用Y軸，因為Y軸緊張、急促的感覺會讓用戶下意識的快速下滑，比如微信的朋友圈；抖音上滑來切換視頻；直播互動通過大量評論來營銷熱鬧氛圍。

隱喻設計

駕駛艙隱喻—APP Tab欄

在前文中提到人閱讀瀏覽的順序是從左往右，從上往下的。那么應該把重要的東西放置在左邊或者上邊。Tab欄作為APP應用的主導航為什么卻放置在界面的底部，這時候就需要用隱喻設計來解釋了。就好比科學的盡頭是哲學，哲學的盡頭是佛學一樣。

日常生活中開車、騎車，手永遠是在控制方向和操作，而視線前方就是駕駛員需要瀏覽閱讀的內容，比如行人、馬路、車流等。把駕駛艙隱喻映射到產品界面中，底部Tab欄是引導用戶去往哪里，上方動態變化來滿足不同用戶對不同內容的需求。

問答隱喻—知乎問答

在線下學校的教室里，老師提出問題學生們舉手回答的場景，抽象一層其實是一個提問者、多個回答者的邏輯，是一對多的關系。知乎問答界面就采用了教室的問答隱喻設計，一個問題多個回答。

觀看隱喻—B站直播

在電影院看電影時，屏幕在正前方，很多人共同觀看一個屏幕。其實也是一對多的關系。B站的直播界面平臺，也是數以萬計的人共同觀看一個直播，下面的評論彈幕映射電影院的歡聲笑語。

會議隱喻—Zoom視頻會議

協同辦公領域，在會議室開會是再尋常不過了，會議室開會時能同時看到同事的面部表情，每個同事都可以投屏進行共享會議內容。Zoom的視頻會議軟件采用了線下會議隱喻設計，Zoom視頻會議支持多人視頻討論，每個人都可以共享屏幕進行實時分享內容。

互聯網行業才短短十幾年，但人類的日常生活卻已經演化了幾千年。好的生活方式和習慣會慢慢的保留下來。當設計產品時遇到問題沒有方向時，不妨停下腳步看看人們在日常生活中是如何運作？能不能從生活中吸取靈感。

總結

界面三重構給設計師提供一個嶄新視角，相關的知識、理論、技巧還不完備。設計師可以根據自己的經驗和閱歷進行迭代。從用戶體驗五要素的視角去看，界面三重構算是從結構和表現層進行挖掘設計的可能性，偏微觀層面的設計。在實際運用中需要結合用戶、信息、交互、界面、前端、場景、流程等多維度思考。

界面三重構的想法起源于2019年，2020年于Gllue UED團隊內部分享，2021在RDD內部分享，整理制作發表于2022年6月。

感謝閱讀，很片面，共勉。

原文地址：水手哥學設計（公眾號）

作者：水手哥

轉載請注明：學UI網》UI新視角-界面三重構

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司