談到 B 端組件，很多人的印象是多且雜，想要全面準確的熟悉這些它們，需要我們對它有個合理的歸納總結。可能每個人會從不同的視角去做這件事情，我一般是按照使用場景去對組件分類整理。
下面我們根據這個分類框架來逐個聊聊這些組件。
說到基礎組件，我想再將其細分成兩個大類：一類是通用組件；一類是柵格/導航。怎么去更深刻的理解這兩類的區別呢，我們可以打個這樣的形象比方：
通過這個比方我們不難理解，柵格/導航是先給頁面定下了基本框架，而通用組件則是在這個框架基礎上搭建頁面的所用到基本元素。
常見通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來似乎很簡單，但卻是決定產品品牌調性、界面細節品質的重要因素，在設計過程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談談這三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產品的主要色調，在選取時應當優先選擇品牌色，但有一點要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調，則盡量考慮另選取一個冷色系作為主色，原因有兩點：一是為了避免和警告、錯誤色沖突，產生歧義；二是冷色系帶有商務、專業、冷靜的情感，更符合 B 端產品調性。
同時主色選取應避免高亮、熒光色、灰調高的顏色。
主色的應用
主色在設計中常見的應用包括可交互、選中狀態、可視化、插圖、圖標等場景。
② 功能色
功能色主要用于頁面表征狀態，常見有成功色、警告色、報錯色等。
成功色
主要用于操作結果成功提示以及標簽配色等。
警告色
主要用于警告提醒功能以及標簽配色等。
報錯色
主要用于系統報錯提示、圓點提示、以及標簽配色等。
③ 中性色
中性色在頁面設計中應用非常廣泛，從線條到文字再到圖形等等都可以見到它的影子。
Tips：無論我們主色調是什么，中性色在調色時建議可加入適量的藍色調，可讓頁面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個顏色的梯度呢？（這里主要指對主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當我們需要淺色，通過調整白色遮罩透明度得到合適顏色；而當我們需要深色時，則通過調整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優點是后續如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規范包含字體、字號、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規范即可：
② 字號
不同于 C 端，B 端在字號選擇上應當盡量保持克制。研究表明，Web 端上正文字號為 14 時，可以帶來最佳閱讀體驗。因此在字號選取上應盡量優先選取 14 號字。如果想要區分文字層級，優先級從高到低的手法應該是顏色、字重、字號，也就是說一般盡量不采用字號大小區分文字層級。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過公式算出行高非整數或非偶數，可就近取偶整數。
間距
關于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優先考慮 8px 的倍數作為間距值，在一些特殊場景可采用 4px 的倍數間距值。
分割線
分割線寬度一般統一為 1px 即可，同時注意顏色不可過深，以免干擾主體信息。如果需要不同層級分割線，可用顏色深淺來區分。
圓角
圓角大小一般根據使用場景控制在 2-3 個梯度即可，既不能全部統一一個圓角值，同時也不適合出現過多圓角值。同時圓角值不要過大，建議控制在 2-6px，以符合 B 端產品嚴謹專業調性。
按鈕
這里從按鈕的大小/狀態/排放位置幾個緯度來講。
① 按鈕尺寸
按鈕高度一般情況下可以設置 3-4 種尺寸按鈕，足以滿足各種使用場景。至于按鈕寬度，我們一般定義一個最小值，當超過最小值時，可設置 padding 值，按鈕寬度根據內容自適應。
② 按鈕狀態
操作按鈕過程中，按鈕會呈現不同的交互狀態。
③ 按鈕位置
對于主次按鈕組合，主次按鈕排放位置應該怎么規定呢？可分為兩種場景：一是當為從左到右閱讀順序時，主要按鈕應當排在次要按鈕左側。二是當為從右到左閱讀順序時，主要按鈕應當排在次要按鈕右側。而當一些特殊場景與這個原則沖突時，應權衡優先級做出取舍。
熟悉通用組件后，我們要通柵格/導航來確定產品頁面框架。
柵格
柵格可以有效地保證設計的一致性、讓頁面布局更具規律，并提高團隊協作效率。應該如何設計柵格呢？
① 柵格區域的劃定
我們一般習慣將頁面從下到上劃分為背景層、全局控制層、內容層、臨時層，而柵格區應當用在內容層。以下為常見幾種頁面布局柵格區的劃定。
② 柵格自適應規則
隨著頁面寬度變化，一般來說是通過欄寬變化實現自適應。
③ 柵格欄數的確定
根據頁面內容豐富程度，柵格欄數一般定 12 或者 24 欄，考慮到 B 端產品功能往往比較復雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導航
導航可分為全局導航與局部導航。
① 全局導航
全局導航包含頂部導航、側邊導航、混合導航。
這三種導航樣式各具特點，應結合產品特性選擇合適的導航樣式。這里要注意的一點是，當產品可用性和用戶體驗產生沖突時，應優先保證產品可用性。
② 局部導航
局部導航包含面包屑、標簽頁、步驟條、分頁器。
面包屑
面包屑導航的作用是告訴用戶當前頁面在系統層級結構中的位置以及父子級頁面間的關系，并且可以快速回到上幾級導航。
標簽頁
標簽頁可以幫助用戶在一個頁面實現快速切換不同內容，提升單個頁面內容擴展性?？煞譃榛緲邮健撕灅邮?、卡片樣式。
步驟條
當任務復雜或者存在先后關系時，可將其分解成一系列步驟，這里就會用上步驟條。步驟條是引導用戶按照流程完成任務的導航條，作用包含 3 點：一是讓用戶對操作流程長度和步驟有個預期，二是明確知道自己目前所在步驟，三是可以對用戶的任務完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當步驟條中有操作難度偏大的內容時，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經完成了大部分簡單操作，后面碰到高難度操作后，出于損失厭惡心理，不會輕易放棄操作。
分頁器
當有大量內容需要展現時進行分頁加載處理，分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內容有多少頁、當前所在頁碼、快捷前往目標頁碼。
分頁器一般分為迷你、簡易、自定義三種樣式。
妙用分頁器小 Tips：當表格中需要對數據全選操作時，為了提高操作效率，可將自定義每頁跳數調到最大。例如一共 100 條數據，默認每頁 10 條數據，要完成全選需要點擊 9 次翻頁，10 次全選（表格的全選框勾選后一般只選中當前頁面全部數據，而不是所有頁面總數據），當把每頁條數調整為 50 后，則只需翻頁 1 次，點擊 2 次全選即可。
到這里關于 B 端的基礎組件就全部梳理完了，后續我們就來揭開展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
SaaS，英文全稱 Software as a Service，意思為軟件即服務。是通過網絡提供軟件服務，可以理解為一種軟件交付模式，因為交付模式的不同也決定了和傳統軟件的差別。
在Saas之前傳統軟件需要購買后本地化部署，兩者最大的區別在于，賣軟件是將軟件作為一個軟件實體賣給客戶了；而賣SaaS 軟件的所有權還在廠商所有，提供的是“軟件服務”。
Saas模式的提出者是Salesforce創始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時候提出。有兩個原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統軟件部署實施交付的失敗率非常高；
2. 軟件的售賣價格非常高，很多中型、中小企業有需求但無法承擔高昂的費用。
基于以上兩個痛點及當時的現狀賣軟件給企業造成的影響，已經形成了惡性循環，市場受到嚴重的阻礙（據Gartner 高德納公司（美國咨詢公司）的調查研究曾表明：在所有CRM項目中大約55%沒有達到軟件用戶的完整交付和預期目的，通俗的說是實施失敗。）
從賣軟件變成賣服務，其中的技術方式的改變、交易模式的改變，促成了軟件時代的變革，對于傳統軟件公司來說，是一次大革命。原來賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務后，這筆錢就不能在短周期內一次性收了，現行的SaaS模式通常是按照用戶的使用年費來收取。
兩者差別在于，軟件商需要先主動改變可以短期的一次性高收入，從短期收入向長期收入的轉變；
所以SaaS是長期主義的事情。
失敗的Saas生意會出現一個問題：把長期生意做成了短期不可持續的生意；而短期生意帶來的就是經營成本的劇增，導致生意不可持續。
所以，Saas模式決定了需要客戶長期使用你的產品，才可以長期可持續賺錢，也就是通常意義上的客戶終身價值（LTV）。
那如何做到客戶長期使用，其實只有一種方式：長期為客戶創造價值，做到幫客戶成功（幫助客戶的業務成功），從而持續續約。
吳昊老師，在《SaaS創業路線圖》中的講到：SaaS的本質是續費。這個觀點我比較贊同，SaaS的經營本質在于可持續。
那么，決定SaaS的成功因素是什么呢？
我認為決定性因素有三個方面：產品強大且靈活、用戶體驗優質、服務的有效支持。產品強大和服務的有效支持不言而喻，具體我們來聊聊用戶體驗的價值。
傳統軟件在一次交付實施后，客戶付80%的錢，剩下的20%能不能收回來就不那么重要。但SaaS模式，客戶每年進行續費，若產品使用及用戶體驗滿意度低，帶來的影響和后果可能是客戶終止續費。
因此，和傳統軟件相比SaaS的用戶體驗的價值就更為重要，它直接影響SaaS的續費和流失。
相信“用戶體驗”這個詞大家應該非常熟悉，接下來我們從新認識什么是用戶體驗？
官方的定義是：用戶在使用產品過程中建立起來的一種主觀感受。“用戶體驗”這一概念是唐納德·諾曼（Donald Norman）在20世紀90年代中期提出的。產品大神俞軍老師說過用戶體驗的本質是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認為是幫助產品和用戶：最小成本滿足需求，同時創造「美·好」體驗。
怎么理解，因為用戶體驗是滿足商業目標的一種行為手段，我們來看下用戶體驗的需要考慮的雙邊關系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業最高效的服務用戶。
企業的本質就是創造商業價值，商業價值來源于用戶價值，同時考慮實現商業價值的效果和效率。我們常常會聽到“投入產出比”或者叫“投資回報率”；對于商業行為中的一環用戶體驗也如此。
所以，用戶體驗的核心的就是：平衡用戶最小成本滿足需求，及企業最小成本服務用戶。完成價值交換同時，滿足持續性。
由此，可以看出在SaaS的產品設計中，用戶體驗其實承擔著一個比較重要的責任，因為它關系到成本的邊際和規?；挠绊懀活^是產品一頭是用戶。
那么作為產品體驗設計師，我們需要具備一定成本意識，做好“成本管控的設計”，更本質來說設計過程中我們應該：把復雜留給自己，把簡單留給用戶。
因為我們在設計的過程中把握產品的交互方式、使用流程，在用戶認知和效率層面有較強的把控空間，充分做到的以“用戶體驗”出發；那后續銷售、交付、客戶成功的全鏈路服務過程的學習效率和服務效率會呈指數級上升。
產品設計，應該把復雜留給自己、把簡單留給用戶。
關于用戶體驗，就不得不介紹一下“ 用戶體驗要素”模型，個人認為這是所有產品經理和設計師可以貫穿整個職業生涯中都需要經常性、反復對照思考的設計模型。
用戶體驗設計的價值遠不止于讓產品的視覺、顏值提升，設計更大的價值在于深入業務、洞察用戶，幫助業務梳理產品信息架構、任務流程、交互體驗。
構建系統的用戶使用方式和工作模式，從而達成用戶目標；通過達成用戶目標完成價值交換、以此完成商業交易達成商業目標。
回顧Saas的商業模式，Saas的商業模式決定我們提供的這個服務不是靠人海戰術，因為Saas軟件即服務的含義是所提供的軟件就等于提供自助化的服務，應該提供的是自助服務、開箱即用、開箱易用的服務。
那么Saas服務設計策略上，應該從降低系統使用門檻和提升用戶的自主化服務兩維度出發，根據這兩個核心維度，我們構建了每刻SaaS產品體驗的設計策略模型。
第一，設計“系統服務自動化”，這里的服務是功能使用的操作，符合“低認知、易上手”，那么從設計整個體系 需要遵守“易發現、低認知、高效率、有溫度”的設計原則展開，以用戶使用行為出發設計符合用戶心智認知的功能形態和交互流程。
第二，設計“系統幫助自助化”，什么意思在全系統中構建幫助引導的自助化體系，用戶需要幫助的時候提供人性化的引導幫助，我們從發現的維度、認知的維度，系統認知的維度，綜合考慮用戶系統的幫助引導。
設計原則，是指導我們做正確設計的方針。
設計原則的建立基于對用戶使用體驗全流程的基礎上，以每刻報銷的設計原則，圍繞用戶旅程、認知及行為出發構建。
1. 當用戶接觸系統從看出發，看見系統界面、發現操作入口；（發現）
2. 帶著操作任務用戶進入系統、看見導航、看見文字、看見按鈕，都需要理解認知；（認知）
3.用戶從何開始、如何操作，在完成整個業務事項的過程需要進行填寫、選擇、交互過程就產生了生產效率問題；（操作）
4. 當出現誤操作或系統出錯時，需要系統糾錯提醒、容錯的設計、幫助及引導，當完成整個業務事項后，用戶產生一種的情緒感受，這個感受即是印象、評價、口碑。（感受）
緊緊圍繞產品業務、用戶處理特性業務的基礎上，以終為始，回歸到用戶、業務、系統進行思考歸納的產物。
設計策略，是指導我們如何進行做正確的設計。
在SaaS產品分類上，常見的SaaS產品主要分為3類，行業SaaS、職能SaaS和通用SaaS。
每刻報銷產品從核心業務來說是職能類Saas，從提升財務人員報銷的發票審批、費用審核等效率展開，但報銷的來源又源于普通員工的業務報銷，業務報銷發生又和所在行業的費用發生行為特征有一定相關性，所以是結合職能和行業Saas的屬性，從用戶體驗的設計上需要考慮不同角色用戶對于系統的業務理解、功能交織使用的不同訴求，這個設計過程探索研究是相對比較有難度的，以后有機會可以展開聊。
下圖是每刻系統經過6年過程中統計的問題分布，分布比率呈現：認知問題 60%，效率問題 30%、情感問題10%。
我們在訪談客戶調研發現，企業服務雖然客戶已經用了好幾年我們的系統，但財務部門還是經常性會碰到新入職員工的系統使用問題，甚至財務部門來新人時 以前系統發生的使用問題會從新出現一遍，所以企業服務有一個現象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個遇到的問題就是認知問題，也輔證了我們對于Saas系統認知問題是用戶體驗的第一大問題。
幫助體系建立可以從系統層面體系化有效降低用戶使用的認知成本，圍繞用戶角色的核心業務操作使用流程、洞察用戶旅程上的疑惑和障礙點。用戶首次進入系統要建立介紹和引導，足夠簡單、降低陌生感，來減少人力咨詢回復的投入。
相比人，系統的自助化和自動化的服務，更具有復用性和規模效應。
SaaS的商業模式，按年使用賬號來收費和傳統軟件的付費模式區別非常大，因為需要先主動放棄自己本來可以唾手可得的收入，從短期收入向長期收入的轉變。
在SaaS模式的時代，商業模式決定其必須關注客戶成功、客戶持續續費、LTV客戶長期價值。
SaaS的產品更需要重視用戶體驗，用戶體驗的優劣決定其產品的長期發展，SaaS的用戶體驗設計則關注用戶使用認知和行為效率，以及系統服務自主化設計和系統幫助自動化設計，用戶體驗將在產品成長期后半程，逐漸成為SaaS商業模式不可或缺的產品競爭力。
作者：周大蝦07 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標在界面設計中，雖然很小，但是卻是界面中重要組成部分之一。通過將顯示物體圖形化的形式，將功能本意高度濃縮成一個圖標，再通過視覺隱喻更快地讓用戶理解功能，同時圖形與文字相比，圖形更加生動形象，視覺能力更強、更便于記憶，用戶可以根據圖形快速定位功能位置。而順著時代的發展，圖標不再僅僅以工具的形式出現，更多的起到裝飾頁面，也不斷延伸出不同的圖標類型與圖標設計風格。
圖形與復雜的文字相比，更加簡潔，相應的識別效率也會更高。圖標可以將復雜的文字描述高度濃縮成一個圖標，通過視覺隱喻的方式讓用戶聯想到現實生活中的物體，更直觀地呈現圖標代表的功能，更快理解功能的意義
1.2 減輕頁面負擔
像一些通用常見的圖標，如搜索、播放按鈕、更多等，僅需要一個圖標就能清晰地傳遞功能意義給用戶，省文字的描述，節省更多的頁面空間與閱讀壓力。
1.3 更快定位功能位置
圖標與文字相比有更豐富的表現形式與顏色，所以視覺沖擊也就更強，也能更快地被識別出來，當用戶熟悉了產品后，只需要通過圖標就能快速找到想要的功能，當功能位置發生變化時，不需再重新閱讀枯燥的文字找到對應的功能，只需從圖標形狀、顏色上區別，找到對應的功能。
2.裝飾層面
2.1 傳遞品牌調性
隨著互聯網的發展，同類型的產品越來越多，要在各個產品中突圍，除好用的功能外還要有特色的外觀。在圖標中融入能代表產品品牌的符號，強化品牌調性，保持圖標的獨特性，給用戶留下深刻的印象，一看圖標就知道是哪個產品。
2.2 增強產品吸引力
如今用戶對產品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標可以帶給用戶更好的第一印象，增強產品對用戶的吸引力。
2.3 渲染氣氛
根據不同的節日或運營活動，設計相應氛圍的圖標，幫助產品渲染節日氛圍或加強用戶對產品主題運營活動的感知力度
二、圖標繪制的基本原則
1. 可識別性
圖標與文字在一定程度上起到相同的作用，都是通過特定的表現形式來傳達某種信息給用戶。順著時代發展，圖標的設計更精細化，產生了更多的設計風格，但圖標的本質還是沒變的，是用戶進入功能的入口。因此，一個能被用戶快速識別、快速理解的圖標相當重要，是圖標設計的基本要求。我們繪制圖標時要盡量去掉輔助、無用的元素，保留最清晰、直接、有代表性的元素。
2. 風格統一
設計師在設計圖標時，除了會根據產品類型、用戶群體、品牌調性等因素決定使用哪種圖標風格外，還要根據圖標的具體使用位置，因此在一個產品中，常常會出現多種風格類型的圖標，而風格統一指的是在某個特定功能模塊內的圖標風格要保持一致，是面性的圖標就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小統一
圓形、正方形、三角形，在這三個圖形雖然高度相同，但是整體上三個圖形的視覺重量并不相同。在實際的操作中，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個方向缺得越多，就往那個方向移動一點。
4. 色彩統一
色彩的統一指的是圖標色彩在飽和度與明度上保持特征統一，數值在一定的范圍內發生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標，通常使用的都是產品的主題色，而多彩圖標，常會以主題色為主，拓展出臨近色、相似色、對比色，目前市面上大多數的圖標顏色會使用同類色與鄰近色。對于飽和度與明度的調節，我通過利用灰度模式進行輔助，使圖標視覺更統一柔和，不會出現其中一個亮眼或暗沉。
5. 占比統一
5.1 正負形占比統一
正負形的合理使用是圖標能否傳達準確意思的關鍵，因此也是常會出現的組成元素。在繪制圖標的正負形，注意保持占比統一，其中某個圖形正負形太大或太小，會顯得突兀、別扭，失去統一性，界面整體質感會大大降低。
5.2 顏色占比統一
在繪制圖標時，確定圖標中的主色和輔色，繪制時盡量保證主色和輔色占比相同，保持圖標的統一性。
6. 疏密統一
有規律地將線條組織在一起，利于形成統一的視覺風格。同時，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標，縮小后反而會影響識別。同時，給圖標留出一些空間，使線與線之間不會太擠，增強圖標的呼吸感。
安利一個國外的圖標大神Myicons?，簡單的線性圖標一樣可以很精致。
三、不同風格的圖標
目前市面上的圖標主要有四種類型，分別是：線性圖標、面性圖標、寫實擬物圖標和三維立體圖標。而不同的圖標中組合的元素都會有一些差異，相同類型的圖標中也會有不同的圖標風格。
1. 線性圖標
線性圖標主要還是由線性組成，設計師可以通過改變線的粗細、線的端點、圓角大小或加入一些面性元素在里面來使線性圖標更加豐富、有趣，但整體來說純線性圖標更纖細、簡潔，使得視覺沖擊力稍微弱了些。
1.1.1 單色
單色是線性最基礎的表達方式，這種設計風格單調、視覺沖擊較差，但是制作難度低，設計所耗費的時間頁更斷，因此常常會出現在個人中心頁中，僅需要有圖標顯示功能入口，設計要求并不高的功能模塊中。
1.1.2 雙色
雙色圖標與單色圖標相比，視覺沖擊力更強，應用范圍更廣，通常會融入品牌主色，是除了線面圖標外出現在首頁中的線性圖標。因為雙色圖標可以加入品牌色，增強品牌感的同時，使圖標增加了設計感，不會像單色圖標那么單調乏味，因此雙色圖標也會以“次要功能”的形式出現在首頁當中。
像在“去哪兒旅行App”和“平安銀行App”中，頁面已經存在一組視覺沖擊、視覺層級更高的一組面性圖標，但是因為業務需求露出更多功能入口，因此就可以使用線性圖標這種視覺沖擊力弱一點的圖標搭配，既不會搶走主視覺，也能滿足業務需求。
1.1.3 斷點圖標
斷點圖標在目前的app圖標設計上較少使用。雖然斷點風格圖標在表達上有一定的局限性，但是圖標設計感更強，圖標更有趣味性。
斷點圖標并不是隨便刪除某個描點，在斷點的位置選擇上和斷點的大小都是要注意的地方。斷點位置的選擇要注意兩點：
1 ) 保持相同角度，能更好地增強圖標的協調性，避免造成圖標的視覺混亂降低用戶的視覺體驗。
2 ) 選擇在線的拐角處，利用連續性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。
1.1.4 線面結合
在原本的線性圖標上加入色塊，就會產生新的設計風格--線面圖標。線面圖標比較特殊，圖標的視覺層級會隨著圖標中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強。因此在設計線面結合圖標時，要先確定圖標在該頁面中的重要程度，如果是主要功能則將色塊的占比加大。
1.2 線的影響
圖標中的線主要由兩個元素組成，一個是線的粗細，一個是線的端點，而這兩個元素也是主要控制線性圖標的性格。以常用的48px圖標盒子為例，常用線的粗細有2px、3px、4px，圖標的線越粗圖標越有力量感反之圖標越纖細；而圖標的圓角越小時圖標越穩重、專業，像一些辦公軟件、金融產品，圖標的圓角就比較小。圓角越大圖標越飽滿親和力更強，像一些兒童學習類軟件就會使用大圓角的圖標設計。
因此，圖標的線粗細與圓角大小，都根據不同產品類型與目標用戶確定。而大多數線性圖標主要有四種基礎造型：纖細+小圓角、纖細+大圓角、粗描邊+小圓角/無圓角、粗描邊+大圓角。
1.2.1 纖細+小圓角
精致、嚴謹，多用在銀行、新聞類APP。沒有圓角，會使圖標更加尖銳，對于銀行類APP會給人一種威脅，但是太大的圓角，顯得有點輕浮、可愛，不符合銀行莊嚴的感覺，所以稍微添加一些圓角，使圖標更有親和力的同時，也保留一些莊嚴的感覺。
1.2.2 纖細+大圓角
更加精致、有親和力，這種風格是目前市面上軟件使用得最多的一種線性圖標風格。
1.2.3 粗描邊+無圓角/小圓角
粗曠、個性、有很強的力量感。更多的用在運動、汽車這類主要用戶傾向男性的軟件，同時也會在一些潮流類電商軟件中出現，凸顯更有個性的設計風格。
1.2.4 粗描邊+大圓角
圓潤、可愛、親和力強，常用在偏向兒童的產品
2. 面性圖標
面性圖標時軟件使用的最多的一種圖標類型，設計師通過改變色塊、圖形圓角、正負形和底托等元素，讓面性圖標呈現不同的設計風格，但無論是哪種設計風格，面性圖標設計沖擊力相比面性圖標更強，因此市面上大多數核心功能都會用到面性圖標來提高功能的設計層級，讓功能在頁面中更加突出。
2.1 扁平風格扁平風格的圖標常為單色圖標，圖標整體沒有漸變、高光、陰影等裝飾性設計效果，因此更加簡潔，更突出功能本身，圖標功能性更強，圖標制作成本低，曾經也是風靡一時。但扁平風格的圖標缺少亮點與制作成本的原因，導致圖標同質化嚴重，缺少特點，很難被人記住，因此現在很少被使用。
2.2 漸變色塊
在扁平風的基礎上，在色塊上添加漸變色，在保留了扁平圖標的功能性外，使圖標色彩更加豐富，在不同類型的軟件中都可以使用這種風格，算是一個比較百搭的圖標風格。同時漸變色塊也是很多面性圖標的組合基礎，在漸變色塊這個基礎上還可以添加不同的效果形成不同設計風格。
在設計漸變色塊風格的圖標時要注意兩點：
1 ) 市面上的app都會選擇同類色作為漸變色，然后通過改變顏色的飽和度，使漸變色的明亮對比更加明顯的同時，顏色過渡也更加柔和舒服，使圖標更有通透感，增加視覺沖擊力。
2 ) 在設計這種有白色色塊在頂部的圖標時，可以給色塊添加一個淺淺的透明漸變，讓色塊過渡自然一些，同時也可以添加一層淺淺的陰影，增加層次感。
2.3 圖層疊加
圖層疊加風格的圖標看上去像兩個透明圖層疊加在一起的感覺，圖標層次感強，細節也更加豐富，圖標風格更新穎、更年輕化，因此如果在設計一個年輕人使用或者希望打造年輕化頁面感受的時候，可以嘗試使用圖層疊加風格。
繪制圖層疊加風格的圖標時要注意：
1 ) 重疊在一起的那個色塊是通過布爾運算得到的，并不是通過簡單的透明圖層得到的。而重疊在一起的那個色塊也不宜過于顯眼，畢竟看的是圖標的整體。因此可以參考一下“智行火車票”，通過改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標的變化，同時也不會是色塊太突兀影響觀感。
2 ) 盡量統一疊加部分圖形與圖標之間的占比。
2.4 毛玻璃
毛玻璃是近年最火的一種設計風格，不僅設計風格新穎、特別，而且還有很強的質感表現，因此不僅在金融產品，還是生鮮產品或票務產品，都有毛玻璃風格的圖標。
而在設計毛玻璃圖標時，里面也有很多細節需要注意：
1 ) 背景模糊效果不需要太大，有一種若隱若現的感覺就可以。如果調太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標，只需要將圖標的主色調低飽和度后，就可以使用。這樣的好處是不僅讓圖標顏色過渡更加自然，同時有更多的組合方式、更多的層次。
3 ) 使用邊緣光。毛玻璃圖標有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細節更加豐富。
2.5 晶白風格
晶白類圖標利用圓角正方形或圓形作為底托再在上面添加一個主色為白色的圖標，然后通過調節透明度、投影、漸變給圖標添加一些質感，是常見的圖標風格，也是使用了很久的一種設計風格。
后面也延伸出了另一種設計風格圖標主題通常不會是統一的造型，像喜馬拉雅這種圖標，圖標本身元素復雜、細節較多，形狀也更加不可控，因此用一個淺色圓形底托，將他們統一起來。不僅可以將復雜的圖形統一起來，還可以添加吸引人眼球的漸變色更好地增加圖標的視覺占比，有更強的視覺沖擊感。
在繪制晶白風格時，注意兩點：
1 ) 可以適當改變底托圖形的形狀，增強差異化。
2 ) 統一光源，越白的地方越亮，注意控制好透明度的變化與角度。
2.6 實物展示
這類圖標會出現在生鮮類、藥品類、潮流電商類產品中，因為使用圖標很難將這些類型概括起來，直接使用圖片展示更加直觀，但因為圖片細節、元素更多更復雜，如果使用太多會使圖標看起來很雜亂。
3. 寫實向圖標
寫實向圖標模擬現實中的物體，更貼近生活，用戶對這類圖標理解能力也更強，繪制難度也更高，繪制時間也更長。寫實向圖標除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來增強實感。常常用在運營設計上，或用在一些特殊界面模塊從而增強視覺層級。
3.1 輕擬物圖標
輕擬物圖標是最近很好的的設計風格，但是輕擬物圖標出現在界面設計上還是比較少的。因為輕擬物圖標元素比較復雜，視覺沖擊力強，放在界面上有可能搶走用戶對核心內容的關注度，通常會運用在運營設計長圖、彈窗、核心功能等。
而繪制輕擬物圖標，主要注意的是光影的打造。光影主要由這幾個元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標時，主要注意以下幾點：
1 ) 在繪制輕擬物圖標時，不一定需要使用統一色相中的顏色，可以通過改變顏色的飽和度明度的對比和冷暖色的對比來營造光影，使圖標色彩更豐富、對比更明顯。
2 ) 反光可以使用圖標主色的對比色，降低飽和度，提高明度，運用在輕擬物圖標邊緣，使邊緣更更清晰，不會糊在一起，圖標整體立體感更強。
3 ) 明暗對比越明顯，輕擬物圖標越顯通透、立體。
3.2 2.5D圖標
2.5D曾經是很火的一種設計風格，但是現在已經逐漸被輕擬物與建模替代。2.5D圖標固定展示了三個面，有很強的立體感，常常運用在科技類的網站設計中。
在繪制2.5D風格圖標時，要注意：
1)統一好圖標的厚度。
3.3 3D圖標
隨著時代進步，3D逐漸成為一個主流的設計風格。通過專業軟件給予了圖形材質質感、真實的光影，更加貼近生活真實物件，同時還可以配合動效的設計，有很強的視覺沖擊力和新鮮感。常常出現在網頁設計中、運營設計中。目前繪制3D圖標主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒有oc好，但是還是可以滿足日常工作。
而在繪制3D圖標需要注意以下幾點：
1 ) 統一主光源方向。建模里面會出現很多打光類型，如主光、輔光（有時不止一個）、邊緣光等。
2 ) 統一攝像機位置。攝像機與物體的距離、角度影響渲染的最終效果。
3 ) 用數值定義物體大小。建模軟件不像繪圖軟件那樣強調物體的數值大小，拉遠看物體就是小，拉近看就是大，做一個物體時還好，但是要做一組3D圖標時，就要定義好物體的大小，使圖標更加統一。
四、如何確定使用哪種類型的圖標
不同風格的圖標有著不同的特點，設計師要根據圖標放置位置和功能選擇圖標類型。其中最有決定性的因素就是圖標的重量，而影響圖標重量的因素有：占比、顏色、細節元素。線性圖標在界面中占比較少，因此看起來會更加簡潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標占比更高，視覺上會更加飽滿，同時顏色色塊使圖標更加顯眼，視覺沖擊力得到力增強，使用戶對圖標的感知力更高，是最常用的圖標類型，用在各個重要功能入口上；輕擬物和3D圖標除了占比高、顏色豐富，還有各種光影、材質的細節，圖標元素更多，視覺沖擊力也更強了，也因為圖標復雜、視覺沖擊力強，因此很少出現在界面上，通常運用在一些特殊運營入口或需要吸引用戶的大模塊中。
不同的類型在界面中也會搭配出現。
五、圖標的繪制
1. 圖標盒子
圖標盒子是輔助繪制圖標的一個工具，幫助設計師在設計圖標時更好地規范好各個圖標的尺寸大小。而圖標盒子也有很多種，我最常用的是48*48px，這個尺寸對于線條的控制比較方便，通常用1px、2px、3px。
工具始終都是工具，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個地方缺得越多，哪個地方就拉伸一點。
2. 圖標的繪制方法
圖標中會存在標準化圖標，像刪除就是一個垃圾桶、像首頁通常是一個家的圖標、還有搜索則是放大鏡的圖，照片是兩個山一個太陽，這些圖標都習慣以這種表達方式出現，用戶已經習慣了這種表現形式，因此對于標準化圖標，盡量維持以往的變現形式，讓用戶更好地理解圖標意思。
非標準化圖標可以細分為具象與抽象，對于具象類圖標，現實中有實物可以參照。這類圖標的設計較為簡單，可以在某度上尋找相關照片，根據實物的造型進行提煉和簡化。
抽象圖標則較為復雜，通常是某些特定行為的名詞，沒有具體直接的參照物。因此在設計前，我們要先充分理解功能本身，這個功能是什么、用戶怎么用，然后提煉關鍵詞，接著根據關鍵詞發散思維，尋找相關聯的圖形來表示含義。例如“社區”功能，功能目的是提供一個讓用戶互相交流的環境，同時吸引無目的的用戶逛起來發現感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關鍵詞：聚在一起、發現、交流。接著發散思維進行腦暴，聚在一起：一群人-圈子-同一個世界的人-星球，發現：看-眼睛；尋找-望遠鏡-雷達-指南針，交流：聊天-聊天氣泡-聲波。
六、圖標的使用場景
圖標運用在功能入口上是最基礎的使用場景之一，如首頁中的金剛區、個人中心都會用到很多圖標作為功能入口。
1. 金剛區
目前國內的APP包含的功能有很多，而金剛區的作用就整合產品功能并放置在首頁中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產品功能，增強用戶對產品的粘性。像美團，很多人對他的了解是一個外賣工具，但它里面還有很多其他功能，使用金剛區展示它多元化的服務。
金剛區圖標通常會有1～3行，根據業務具體需求做調整，在每行中會有4～5個圖標。尺寸范圍一般在40px～48px左右（@1x），同時會根據具體的業務需求，調整大小，最終都是一預覽效果為準。
2. 個人中心
個人中心是個人類型功能、運營活動入口和工具的集合地，是除了金剛區外，含圖標最多的一個地方。個人中心中包含很多不同類型的功能，可以使用卡片式的設計，將功能圖標更好地分類。在圖標風格的選擇上，個人類型功能是最重要的功能，通常會以面性風格放置在頂部，如果個人中心中需要展示運營入口時，需要減弱個人類型功能圖標的視覺沖擊，會使用線性風格圖標。
3. 運營入口
運營入口主要作用是讓用戶點擊后跳轉到產品活動頁，因此具有強視覺沖擊力的圖標，會更吸引用戶眼球，從而提高點擊運營入口的機會。
因此運營入口上，通常會使用面性圖標、寫實向圖標或3d圖標。因為寫實向圖標或3D圖標可以提高視覺層級，因此經常運用在主要運營板塊上，而面性圖標相比下較弱，當頁面已存在一個主視覺或主要功能時，運用在運營板塊上。
4. 主題板塊
在軟件中會有很多不同主題的信息板塊，同時信息板塊間有較大的差異，如果全部展示出來會使頁面樣式不同統一、信息混亂導致降低用戶的閱讀體驗。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關鍵信息在頁面中，保證視覺統一的同時，還可以起到流量分發的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗。
純文字的排版在信息流中略顯枯燥，而圖標在主題板塊中起到潤色主題的作用，渲染主題氣氛，提高不同主題板塊的識別度與差異化。對于一些長標題的主題板塊，只需要記住圖標就能快速定位主題板塊位置。
5. 底部tab欄
底部tab欄功能數量通常在2～5個，在設計時，要設計點擊前和點擊后兩個圖標狀態，同時幫助兩個狀態是有明顯的變化。底部tab欄圖標大小通常在22px（@1x）左右，而圖標底下的文字時10px（@1x）。底部tab欄作為最常出現的區域，是傳達產品品牌感、提升產品辨識度、記憶點的重要區域，很多產品都會在底部tab欄的圖標設計上加入品牌元素，增強辨識度。
七、如何提高圖標設計能力
1. 階段一：臨摹
臨摹是人類學習一個新技能開始，就像嬰兒學習父母說話一樣。但是一開始很多都不會臨摹，或者照著畫也不會，那我們應該如何去做？
1.1 臨摹效果不佳
1 ) 提高審美能力，多看一些主流的圖標，可以上追波看看目前流行的設計風格，不行的話就去看看大廠都在畫怎樣的圖標。
2 ) 明確自己的能力，對自己目前的設計水平有一個客觀的評價，到一個怎樣的水平。很多人都急于求成，最基礎的線性圖標都不會就上來搞輕擬物，畫來畫去都不好看，最后就放棄了。
3 ) 敢于支出自己的不足，許多人畫了許多時間去畫一組圖標，就很容易被自己催眠，以為自己已經畫得很好了，其實還會有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對比原作，自 己有哪些地方沒有原作做得好的
1.2 會了，但沒完全會
什么是會了，指的是可以繪制出于優秀原作一樣的圖標；什么是沒完全會，指的是不知道原作是怎么達到這個好看的效果的。而且很重要的一點是，你臨摹的作品可能也有一些不好，需要改進的地方，以此在這個階段我們要做的是：
1 ) 多看別人總結的知識點，知道如何去判斷一個圖標是否還有可以改進的地方，這樣繪制是不是正確的
2 ) 懂得總結與思考，原作是用來什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪
2. 階段二：半原創
臨摹是一個提升自己的手法，但不代表可以直接用到自己的作品中，直接復制別人的設計，并不叫設計師，復制粘貼誰不會啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創。這里說的半原創不是指在別人圖標的基礎上加上兩筆就是半原創，而是要吸取了優秀圖標的優點后，重新設計出一個有相同特點的圖標。那我們應該如何半原創呢？
1 ) 還是多看，但是不同于臨摹階段，我們在臨摹的時候還要多想，這個圖標的特點是什么、怎么做、還能怎么用，積累圖標不同的表現形式2 ) 多練，這個建立在多臨摹上，目的知道別人的技法是什么做的，練習了不同的技法后，將它們再融合在一起
3. 階段三：原創
第三個階段，也是最難得階段。目前很多情況都是只能成為融圖設計師，將不同作品優秀的點組合起來。但如果要建立自己的風格也是要做融圖設計師的基礎上，多想、多嘗試，敢于突破，在一次次的融圖后，發現出自己的特點，為自己的作品打上自己標簽，輸出具有差異化特點的設計。最有印象的就是夸克的設計，品牌特色很明顯，其實我們每個人也可以成為一個品牌，只要我們足夠努力
作者：阿恒的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
同時也方便用戶再次消費某個內容時，減少再次記憶和查找的成本。比如我喜歡做菜，但是年紀大了記性不好，每次做一道菜我都會打開我的某音收藏夾里找到視頻教程，這個老小子的視頻教出來的菜味道真不錯。
收藏夾要解決用戶什么問題
兩個關鍵詞：1.管理 2.分類
管理，就是我們所說的增刪改查。“增”，我們需要在用戶瀏覽信息時給該信息提供收藏功能，這里要注意的是收藏信息的顆粒度，什么信息可以收藏，一段話？一篇文章？一個用戶發布的完整內容？還是一張圖片？產品對收藏最小單位的定義要明確，因為會影響到對收藏內容的分類。例如微信可收藏的最小單位很多，有鏈接（包含文章）、文件、圖片/視頻、音樂、語音、聊天記錄、筆記、位置，而像餓了么只能關注店鋪，對任何菜品、用戶評論等等都無法進行收藏。b站你可以收藏視頻、漫畫、商品，但是不能他人的動態。
刪沒什么好說的，再來說一下改和查。因為他倆會涉及到收藏的流程。我們知道不同產品的收藏流程是不同的，例如馬蜂窩、閑魚等產品，用戶收藏內容后只給出收藏成功的toast/提示欄提示，并告知收藏到了哪里；
而騰訊視頻、抖音、攜程則是當用戶進行收藏后除了給出成功提示還會給出收藏列表的入口；
最后，像知乎、豆瓣在點擊收藏后直接給出滑出操作框讓用戶選擇收藏夾或創建收藏夾以及是否要轉發。
3種流程的區別
前兩種我認為區別并不大，是否要在提示框里給用戶進入收藏列表的入口，更多還是取決于產品是否想讓用戶離開這個場景，還是讓用戶繼續瀏覽。之前我們提到過閉環，但是閉環一般針對任務而言，但是收藏嚴格來說不算是“任務”，而是用戶的一種“行為”，感知起來區別還是很大的，因為任務是有明確目標的，比如給用戶安排一個任務，讓他對某個商品進行分類收藏，那么用戶會根據這個分類收藏的目標去進行操作，任務結束后給用戶相關的引導和出口。但是在用戶自然的瀏覽場景中，對內容的收藏并沒有具體目標，所以要不要給用戶在點擊收藏后引導進入收藏列表要具體情況具體分析。
其次是知乎、豆瓣，在用戶點擊收藏后給予是否要創建收藏夾的功能，相比于前兩種，對信息內容的管理，更加明顯了。首先為什么他們和前兩種不同呢，像知乎用戶是有KOL效應的，個人的收藏夾可以公開，他人可以查看他人的收藏夾，有點類似于花瓣的畫板，同時對于這類知識、內容類的應用，對于分類的要求和需求更高更多，本身知識的維度就很多，顆粒度很小，所以在用戶進行收藏行為時主動提醒用戶可以創建收藏夾。
那淘寶是怎么做的，它在用戶收藏的時候也給出一個菜單，用戶可以選擇收入到某個收藏夾，也可以默認不放入，還可以去創建并放入，這就是更個性化了。
但是咱們說前兩種沒有給在收藏時給創建功能的就不個性化了嗎？也不是，個性化也要根據產品定位和用戶需求來的，比如馬蜂窩的一些機票車票、旅游產品，做一個收藏夾創建，好像沒必要，因為可收藏的類型不多，個性化標簽也不明顯，顯然是沒必要的。騰訊視頻、閑魚顯然也是。那我們再來聊一個細節。
知乎在點擊收藏某個回答的時候，頁面會喚起收藏模塊，讓用戶選擇你要收藏到哪里，但這里的體驗不是很好，因為用戶想要收藏某個內容必須先選擇收藏夾，如果不選擇則無法收藏成功？
無論你當前是否創建了收藏夾，都必須選擇或點擊完成，如果有創建過，那就需要經歷：1.點擊收藏圖標 2.點擊要收入的收藏夾 3.點擊完成，如果沒有創建過那么默認會創建一個收藏夾。而淘寶則不是，無論你是否創建收藏夾，只要點擊收藏圖表那就已經收藏成功，在這個前提下，你可以選擇是否要收入到某個收藏夾還是新創建一個。
所以知乎、豆瓣的收藏單位大多以回答、帖子為主，這樣的內容系統無法幫助生成標簽，所以需要用戶自己創建分類，在收藏時給予創建功能是合理的，但我認為知乎這樣的設計還是不夠人性化，但是站在業務角度看，就是想引導用戶去創建分類，也是能理解的，雖然在體驗和效率上并不是最優。
創建、分類、搜索都是幫助用戶再次進入收藏空間時能夠更好的查找想要的內容。同時不同產品會有不同的篩選標簽，比如微信閱讀，收藏其實就是書架，哦，應該說，書架就是收藏。篩選維度分為：更新、進度、購買、分類。所以我們在設計收藏功能的時候，要根據用戶的篩選場景和內容來制定合理的篩選維度。
收藏和點贊還有加入購物車的區別
收藏的屬性就是收納、管理和分類，但是和點贊、購物車不同，點贊意味著認同，具有社交屬性，同時也為了幫助產品記錄用戶個偏好用作研究，而收藏則是用戶想對該內容進行收集，比如我正在準備一個辯論賽，我抽了一個反方觀點，雖然我本身并不喜歡這個觀點，但是為了準備辯論的素材和題目我會對這個內容進行收藏，但不會點贊，雖然收藏大部分時候也有對內容的認可，但不完全是。所以收藏更多的是用戶個人對信息的單方面管理，點贊則一個即時互動。
收藏和購物車也是一樣的，購物車承載的是更多消費、商品營銷的表達、算價以及湊單活動，購物車和直接消費強關聯，而收藏夾多關注與對商品的存儲管理、搜索查找，雖然也有一部分需求重合，但用處、和場景還是有很大區別的。
最后，總結一下，設計收藏夾時，我們首先得根據產品定位和用戶需求以及內容的維度來選擇好收藏夾的顆粒度或最小單位，其次，根據業務或用戶需求設定好收藏夾的收藏邏輯和流程，最后，做好用戶對收藏內容的查找以及分類篩選的體驗。
作者：應駿 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數據可視化
數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律
關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。
1. 分析數據關系
根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。
構成關系
構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯與流轉
流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。
常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉化、關系”
2. 分析數據特征
按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類
層級特征
多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。
流程特征
流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是桑基圖重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。
1. 強化數據特性
使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。
我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調來進行分類
數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調內在順序
如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。
1. 布局框架適配
在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結語
數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
提到按鈕，大部分人印象就是文字加個背景框，并沒有太多需要設計的空間。但是作為B端設計師，相信很多同學在工作過程中都產生過以下問題：
按鈕作為最基本的交互單位之一，幾乎在每個頁面中我們都會使用到。由于不同行業下業務場景的復雜性，很多時候很難直接參照其他產品的按鈕進行復用，也無法用一套布置方案復用所有場景，所以作為B端設計師需要對按鈕控件具備足夠的認知，理解其背后的使用邏輯和規范，才能滿足多層級跨場景的設計需要。
本文結合自身的工作經驗，對按鈕進行了系統性的整理和總結，希望對各位B端設計師同學的日常工作和學習有所幫助。
在詳細介紹按鈕前，我們先簡單了解下按鈕的發展歷史。按鈕的概念起初是源自現實物理世界的實體按鈕，在日常生活中如電源開關、計算器、電話等都是通過實體按鈕進行控制，由于其簡單直觀易操作的特性，即使如今各種電子產品都逐漸發展為觸控屏操作，實體按鈕依舊被保留了下來。
當數字屏誕生后，人機交互設計開始走向數字屏幕后，為方便用戶理解，在很長一段時間內設計師都是采用擬物風按鈕來暗示用戶可執行的操作。伴隨著客戶端設備升級和開發方式的變更，至2013年 Apple 在iOS7上第一次采用了扁平化設計，至此按鈕樣式開始往扁平化發展。隨后歷經了多年發展，按鈕的樣式開始層出不窮，但是無論樣式如何變更，其背后的體驗交互邏輯依舊是物理世界按鈕的映射。
在B端設計中什么樣的組件可以定義為按鈕？我們先來看看國內外設計系統中對按鈕組件的定義：
總結來說，按鈕可以理解為用于承載即時操作和命令的組件。由于B端產品業務邏輯復雜、頁面流程多，相較于傳統意義上的按鈕，B端中的按鈕被設定為可復用、規范化的組件，通過對組件元素進行拆解、歸納、重組，將其劃分為特定類型的組件方便管理和使用。
按鈕相較于輸入框、選擇器、單選框等控件無法進行數據輸入，相較于標簽、文字提示等控件也無法進行信息瀏覽，其關鍵在于【即時性】和【承載操作】，既可單獨完成操作，也可與其他控件聯動，作為觸發操作的行動點。
雖然同樣翻譯為標簽，但是此處指的是 Tag 標簽，而非 Tabs 標簽頁。標簽在樣式上與按鈕幾乎相同，且同樣可以添加圖標標識和觸發操作。兩者的區別在于，標簽側重于信息的選擇、篩選和分類，而按鈕則只是單純用于觸發即時操作，因此很多時候標簽會設置不同顏色樣式以便信息區分。
和其他錄入控件相比，開關Switch最顯著的特點便是和按鈕一樣觸發后立即生效，因此很多初級設計師很容易將其與按鈕歸為一類。
其區別是，開關承載的是兩種互斥狀態的切換，如打開/關閉、顯示/隱藏、啟用/禁用等，此外由于在視覺上符合用戶對現實世界中開關的認知，所以可以直接展示當前項的狀態。
單選框和多選框一般用于狀態標記，但是無法直接觸發操作，所以通常會和按鈕配合進行使用。最常見的搭配場景便是在登錄頁，用戶勾選【記住密碼】或【自動登錄】后標記其狀態，再點擊按鈕進行登錄。
相較于其他組件，按鈕的元素構成較為簡單，分為內容層和容器層，通過將不同元素進行搭配組合，即可設計出不同類型的按鈕類型和按鈕狀態。
內容層：圖標和文字自由組合。內容層作為操作引導的核心必須存在。
容器層：控制顏色、圓角、描邊、投影等樣式，有些設計系統下還會加上交互動效，提升用戶體驗感。
在查閱大廠的設計規范時，相信以下按鈕名稱大家應該都不陌生：主按鈕、懸浮按鈕、圖標按鈕、危險按鈕、下拉按鈕、文字按鈕、CTA按鈕……很多新手設計師會產生疑惑：
為什么要劃分如此多的按鈕類型？
這些按鈕間的區別是什么？
為什么各家設計系統下按鈕分類都不相同，我應該選擇哪種作為參考？
為了區分好按鈕類型，關鍵要先明確類目劃分的邊界。這里為了方便大家學習，我從按鈕的強調程度和使用場景2個緯度將按鈕進行劃分，基本涵蓋了常見的按鈕類型：
在同一個頁面中往往會存在多個行動點，因此需要將按鈕依據強調程度進行劃分，確保用戶可以依據設計的按鈕層級快速找到最需要操作的按鈕。常見的按鈕強調程度可以分為3個層級：
高度強調：承載頁面上最重要和突出的行動點。為了保證視覺層級最高，通常會采用大面積主色填充或投影增加空間層級的方式進行區分，例如主按鈕和FAB按鈕（懸浮按鈕）
中度強調：承載僅次于最重要行動點的常規操作。為了避免太過吸引用戶注意，通常采用中性色進行描邊或填充，也被稱之為次按鈕。
輕度強調：對頁面中其他操作補充或可選操作。為了確保視覺上不凸顯，通常不會填充背景色，常見于文字按鈕和圖標按鈕。在輕度強調中還可以劃分為弱強調（內容填充主色）和不強調（內容填充中性色），由于文字按鈕填充中性色難以和正常文本進行區分，所以一般內容填充中性色只會用在圖標上。
由此我們得到了依據強調程度劃分的幾個常見按鈕類型：主按鈕 > 次按鈕 > 文字按鈕 > 圖標按鈕。接下來針對每種類型我們來展開說明。（FAB按鈕在B端頁面中屬于特定場景下使用的按鈕，不具有通用性，故劃分到使用場景中進行討論）
主按鈕代表著頁面中的核心操作項，是視覺權重最高的按鈕，常用于突出提交、完成、確定等操作。為吸引用戶注意，常使用品牌色填充背景引導用戶視覺焦點。關于主按鈕的使用需要遵循以下2個原則：
次按鈕是使用最頻繁的按鈕，當在頁面中不確定選擇哪種按鈕時，使用它往往是最安全的。次按鈕通常使用中性色，其樣式可以分為描邊型和填充型：描邊型使用最為廣泛，是次按鈕首選的樣式，而填充型相對特殊，在不同設計系體下會根據業務場景選擇是否使用。
相較于描邊型，早年在B端產品中很少會見到使用填充型樣式作為次按鈕使用的，但是可以發現近幾年國內外設計系統如Arco Design、Marterial等，開始陸續將填充型次按鈕納入到按鈕組件庫中。
填充型次按鈕更多的使用場景是在移動端上，其視覺強調程度弱于主按鈕但又高于描邊型，可以更好的表達組件的整體性和吸引用戶注意。
伴隨著硬件設備的發展，桌面端和移動端的操作邊界開始逐漸模糊，各產品開始追求全生態環境下的統一性。為降低用戶在設備切換時的體驗隔閡，一套設計系統需要能同時滿足多端設備的兼容，而填充型樣式更符合其場景需求。最典型的便是iPadOS連接鼠標操作時，懸停態下填充型按鈕明顯比描邊型更容易被識別。
基于以上考慮，在工作中選擇次按鈕樣式時可以參考以下建議：
如果當前項目上已經有在使用的開源庫，盡量以原有組件庫為主。除非自身產品有設備互通的場景或需要同一套設計語言兼顧不同端，否則增加多余的次按鈕樣式只會更加復雜且影響用戶的體驗一致性。
如果是項目是0～1搭建組件庫，根據自身業務場景選擇其中一種樣式使用即可。一般桌面端產品使用描邊型，如果產品生態中有移動端，為了保持設計語言的統一更建議采用填充型。
此外還需考慮前端修改組件庫樣式時的開發成本。
文字按鈕適合承載如取消、還原等無需特意強調的操作，通常使用在表格操作欄、表單頁等場景。為了和普通文本做區分，提示當前內容可交互，需要加上鏈接色（一般是藍色）提醒用戶。
文字按鈕和鏈接（Link）的默認樣式一致，在搭建組件庫時很容易發生混淆。其區別在于按鈕用于發起動作，觸發相應的業務邏輯，而鏈接的作用是導航，作為頁面跳轉或錨點定位的觸點。為了更好的區分，可以在交互樣式上進行處理：
文字按鈕：指針懸停時容器添加背景色。
鏈接：指針懸停時文本添加下劃線。
圖標按鈕的視覺層級最弱，但是由于占據空間小，常用于同時展示多個操作項時使用。由于缺少文字解釋，單純的圖標可能會造成用戶的理解偏差，故建議在指針懸停時加上Tooltip的文字提示進行輔助說明，對于特定操作還可加上快捷鍵指引。
在依據強調程度劃分的基礎上，還有部分按鈕只應用于在特定的業務場景中，所以各設計系統下的按鈕分類會有所不同。以下按鈕的應用場景較為頻繁，故被單獨劃分為一類方便交流和管理。
功能按鈕順應用戶心智，采用綠色、橙黃色、紅色代表了成功、警告、危險三種功能按鈕，用戶無需瀏覽按鈕內容，直接通過色彩即可識別當前操作可能導致的后果。
由于功能按鈕的視覺權重往往比主按鈕還高，在頁面中需謹慎使用，避免對其他頁面信息造成干擾。
相較于普通的描邊型按鈕，虛線按鈕只承載傳輸文件或新增配置項等操作，為方便用戶感知，將其描邊設計為虛線樣式。
由于虛線按鈕只能支持單純的觸發操作，在很多上傳情景下不能滿足其業務需求，故逐漸衍生出單獨的上傳組件，相較于虛線按鈕：
上傳組件支持批量上傳
通常有更大的交互區域且允許支持拖拽上傳，以降低用戶的操作門檻
搭配展示文件列表，用于對已上傳文件進行預覽、重新上傳、刪除等操作
顧名思義，幽靈按鈕不具備實體性，一般底色為透明，其按鈕的內容反色，通常使用在復雜或顏色較深的背景中，例如 banner 圖、官網首圖等，避免按鈕突兀地破壞背景的整體性。由于幽靈按鈕使用的場景不固定，因此無須嚴格遵循現有規范，只要滿足其特定場景下的業務需求即可。
CTA，即“Call to Action”的縮寫，意思是行為召喚。該詞原本是營銷領域的術語，后來逐漸引用至互聯網領域中，即目的在于給用戶一個明確的反饋：當前事件的操作流程已經完成或即將發起一個新的流程。
CTA按鈕之所以會被單獨歸類，因為當按鈕作為吸引用戶采取點擊行為的載體時，時常在事件操作的最后一步出現，作為產品的關鍵觸點之一，可以有效提高頁面或屏幕的轉化。也因此當頁面中存在多個按鈕時，CTA按鈕的優先級往往是最高的，可以通過色彩對比、元素點綴等方式引導用戶點擊。
懸浮按鈕FAB，即Floating Action Buttons的縮寫，其特點是會始終懸浮在頁面的固定位置，不會隨著頁面滾動而消失。
在B端產品中，FAB按鈕更多的使用場景是承載全局性的附屬功能，常見操作包括咨詢、客服、快捷鍵、點贊、收藏、分享、回到頂部等。在設計FAB按鈕時需注意以下要點：
不能干擾用戶在當前頁的正常操作和瀏覽。盡量放置在頁面的固定位置，當操作數過多時可將其他操作下鉆至更多按鈕中。
承載操作須是當前頁的全局操作，無須與其他頁面元素發生聯動即可觸發。如不能承載保存、刪除、清空等操作。
按鈕組不是單獨的按鈕類目，而是按鈕組的集合體，當多個同級操作項同時出現，但不想占有太多頁面空間時使用。通常按鈕組會將最關鍵的主操作露出，其他操作收入更多操作項中。
嚴格來說 下拉菜單Dropdown 并不屬于按鈕類型，但因為其使用場景較為頻繁且時常用來承載多個按鈕操作，故在此處作為單獨類型進行講解。下拉菜單作為操作命令集合使用時，可以簡單理解成按鈕組：將多個操作按鈕收納到同一菜單下。在使用時有兩點需要額外注意：
選擇器Select 屬于錄入控件，在基本形態上和 下拉菜單Dropdown 高度相似，都是通過下拉浮層來容納更多信息，在實際應用時經常容易被混淆。要區分兩種組件，最關鍵是理解其使用場景：
下拉菜單：當頁面上的操作命令過多時，用此組件可以收納操作元素。核心是菜單導航和命令集合
選擇器：用于一組選項中選擇一個或多個數值。核心表單填寫和數據篩選
當下拉菜單用來承載操作項時，各操作項關聯性也會引起下拉菜單樣式上的區別，這里用實際的案例輔助大家理解：
乍一看似乎都是差不多的樣式，在工作中很多設計師也是隨機選擇其中一種進行使用，但是作為設計師，就是應該從細節之處見真章，每一處設計都應有理有據。
簡單來說，以上三種組合按鈕中的操作關聯性是逐漸疏遠的，這一點從按鈕樣式上也可以看出。
新建一：合并同類項。突出新建操作本身，更多操作項是新增的數據類型進行區分，減少重復文案的出現。
新建二：操作延展。強調的是數據導入的形式，提供更多操作渠道供用戶選擇。
新建三：信息收納。各操作項之間并沒有關聯性，只是緩解空間壓力或突出使用最頻繁的操作。
在了解了以上按鈕類型，我們來看看按鈕的交互狀態。不管哪種按鈕類型都會存在相應的交互狀態，設計師在交付設計稿時需要將不同狀態下的按鈕樣式進行標注，方便前端開發。
在剛開始接觸按鈕時也曾被一堆狀態給亂花了眼，光是理解不同狀態的區別已經頭大。其實回頭來看，開始只要記住4種最關鍵的按鈕狀態便可滿足大部分的使用場景，即按鈕的正常態、懸停態、點擊態和禁用態。
在日常工作中，沒有設置聚焦態和加載態并不會影響用戶的正常使用，但是加上后可提升用戶的產品使用體驗，大家可以根據開發成本和實際的業務情況考慮是否加上。
按鈕的初始狀態，即默認情況下的基礎樣式，此處不多做介紹。
當鼠標指針移入按鈕時的狀態。為了暗示用戶鼠標指針已進入按鈕的可交互區域，按鈕相較于正常狀態在背景色彩等樣式上會有明顯的區別。懸停態通常還會配合鼠標指針變化輔助用戶理解，在前端CSS樣式表中常用 cursor:pointer ，指針變化為伸出食指的手。
由于懸停態是由鼠標指針移動引起，故只有設計桌面端產品時需要考慮到，而在移動設備上通過手指操作故按鈕不存在懸停的狀態。（在iPadOS更新至13.4版本后開始支持連接鍵鼠操作，但是在日常工作中很少會出現，此處不予以討論）
鼠標點擊即按下按鈕時的狀態。激活態是在懸停態基礎上發生變化，鼠標指針樣式和懸停態保持一致，按鈕背景色發生變化，提示用戶已觸發點擊操作。
按鈕無法操作被鎖定時的狀態。該狀態是為避免用戶誤操作而設立，如在登錄頁未完成信息填寫時將提交按鈕禁用，提示用戶無法點擊，只有填寫完必填字段后才可以點擊提交。在鼠標懸停時指針變化為禁用狀態，在前端CSS樣式表中常用 cursor: not-allowed，通常會配合tooltip文字解釋說明行動點不可用的原因，避免用戶疑惑。
值得一提的是，禁用按鈕并非只有置灰一種樣式，只降低色彩飽和度和明度也是禁用按鈕的表現手法之一，且相較于置灰更方便用戶識別主次按鈕。
以上是針對不同按鈕狀態的說明，這里并沒有針對不同狀態的樣式進行詳細說明，因為不同的設計體系下可能會采用不同狀態樣式進行展示。為方便對比，這里將常見組件庫中的按鈕狀態進行了整理：
可以發現，除了TDesign中描邊按鈕激活態下增加了中性色填充外，基本按鈕狀態都是保持著一致的梯度變化。這里以正常態的按鈕樣式為基準，將懸停和激活狀態下的色彩變化進行整理：
總結來看，在不同色彩的按鈕上按鈕狀態會按照不同梯度分布：
主色（品牌色）按鈕色彩梯度從淺到深：激活 〉正常 〉懸停
中性色按鈕色彩梯度從淺到深：激活 〉懸停 〉正常
之所以出現這種情況，主要是因為在搭建產品色彩體系時，品牌色一般會采用色板中間色作為主色（通常是第六個顏色），故不管往淺往深都有更多靈活調整的空間。而背景使用的中性色為了避免干擾視覺層級，通常選擇色彩較淺的中性色，因此沒有再往下延伸色彩梯度的空間。
以上介紹的四種狀態建議采用色彩組件庫中色卡進行配色，上圖標注了不同按鈕狀態的配色選擇，下面是AntD和ArcoD的色板生成工具（關于產品取色未來會專門出一期文章進行講解）。
ArcoDesign Palette 色彩工具
Ant Design 色板生成工具
該狀態用于指示電腦光標的位置。在有些場景下不操控鼠標，只通過鍵盤方向或Tab切換選擇頁面元素進行操作，反而是更高效的操作方式。常見的聚焦態按鈕樣式為增加描邊，有的設計系統下會采用和懸停態一樣的樣式。鍵盤操控快捷鍵推薦：
【Tab】前進
【Shift + Tab】后移
【Enter】激活
表明用戶操作后系統正在處理的狀態。由于服務器響應或網絡延遲等問題，有時候用戶操作完需要間隔一段時間才能響應，加載態可緩解用戶的焦慮情緒，避免用戶由于未收到反饋而反復操作的情況。
源自 Arco Design-組件按鈕
接下來便到了本文的最關鍵部分，也是按鈕設計中出現最頻繁和令人頭痛的問題：我的按鈕究竟應該放在哪里？
在此之前先要理解按鈕設計的目標是引導用戶采取我們希望用戶采取的行動。這就需要盡量幫助用戶快速找到需要操作的按鈕并了解執行該操作的結果，同時盡可能避免誤操作?；谝陨夏繕耍覀儚挠脩魧嶋H操作路徑的視角來梳理按鈕設計時應考慮的問題：
按鈕區在頁面中的什么位置——空間位置
有多個按鈕時采用怎樣的閱讀順序更合適——排列順序
按鈕采用怎樣的樣式更合適——視覺樣式
當用戶進入頁面時，除了瀏覽當前頁的信息內容還需要尋找接下來可執行操作的可交互區域，即按鈕區。除了單純通過視覺差異區分按鈕和頁面其他元素外，還需考慮到用戶在信息瀏覽過程中的視覺動線。結合古騰堡法則和格式塔原理，給出以下設計建議：
在沒有其他視覺效果引導時，F型和Z型網頁瀏覽模式可以作為用戶視覺動線的基礎指導，關于以上2種瀏覽模式網上有太多相關介紹，此處就不再贅述。
將關聯性強的信息放在一起，可以降低閱讀成本，提高用戶的感知效率。
這里先討論一下開頭提到的問題：主操作項放在左邊合適還是右邊合適？我們先來看看一些案例：
可以發現，即使是業內頂尖的互聯網公司也并沒有遵從同一套確定方案。我們再看看這位在英國學人機交互的研究生所做的課題實驗：https://www.woshipm.com/pd/3104897.html。具體的實驗過程不再詳細贅述，直接來看結果：對于新用戶而言，確定按鈕的位置對操作時間和錯誤率影響并沒有太大差別。并由此得出更關鍵的結論：不要輕易改變當前產品中用戶已經習慣的按鈕位置。
在此基礎上對于操作項不固定的頁面，給大家整理了以下建議：
最典型的案例便是編輯器類產品的操作項，將同類操作區整理分組，方便用戶查找。
此處的閱讀順序并非特指從左往右、從上往下，而是依據用戶當前視覺動線，優先滿足用戶預期或操作可能性最大的按鈕需要最先被用戶發現。
考慮到人體工程學操作習慣和操作后果的影響，還需注意一些特定的場景：
流程屬性的按鈕如上一步、返回、后退等操作用戶習慣在左邊，而下一步、前進、更多等操作在右邊。
如刪除或清空按鈕，盡可能放置在遠離主按鈕的位置，甚至可以下鉆至更多按鈕中，避免誤觸。
在文章開始基于強調程度劃分按鈕類型時，按鈕的視覺樣式便是基于其強調程度劃分的，頁面中越是需要強調的按鈕其視覺權重越高。前文中只劃分了主按鈕、次按鈕、文字按鈕、圖標按鈕這4種基本類型，此外還可以通過文本粗細、內容量等方式進一步細分。
按鈕的尺寸優先體現在其高度上，而寬度一般根據內容區大小自動適配。通常會將按鈕分為大、中、小三個規格，以滿足不同場景下的使用需求。
關于按鈕寬度需要注意的是，由于按鈕內容的不固定，同規格按鈕可能因為內容量差異引起視覺上的層級誤判。故為了減少按鈕錯綜不齊的情況，建議設置按鈕最小寬度的界限，一般為4個文字+左右內邊距。
相較于其他方面，似乎大家對產品文案總是保持著“點到為止”的態度，但是并不意味著文案不重要，錯誤的文案會讓用戶產生疑惑，嚴重影響用戶體驗。相反好的按鈕文字甚至可以做到即使不去閱讀上下文，單憑按鈕文案即可做出正確的判斷。在一些關鍵節點的CTA按鈕，文案的優化可以帶來轉化率大幅度的提升。因此關注文案細節也是設計師平時需要考慮的問題。優秀的按鈕文案包含以下幾個要點：
按鈕區域寸土寸金，每一個字都要有其存在的意義，如果刪除也不影響信息表達即沒必要存在。
文字表達清晰，避免使用用戶難以理解的專業術語。
常見的“登陸&登錄”、“收獲&收貨”、“即時和及時”都是容易打錯的詞。
以下給大家整理了常見易錯的按鈕文案表，建議保存收藏。
如統一采用動賓結構：修改價格、提交工單、查看更多等。
結合自身品牌特性，在按鈕中融入適當的情感化文案，也是塑造品牌心智的觸點之一。
當前市面上主流的互聯網產品大多都采用了圓角設計，因為圓角矩形相較于直角更具安全感和親和力、在相似內容中識別度更高，且圓角對信息的聚焦性更強。同樣B端設計中通常也會在按鈕中加入圓角，方便用戶更高效的辨別和獲取信息，但是需要注意的是圓角并非越大越好，過大的圓角會導致按鈕操作熱區的縮窄，更不易被點擊觸發。如在移動端產品上都是采用手指按壓，而桌面端采用鼠標指針單擊，相較之下后者對點擊按鈕的觸發精度要求更高，也因此全圓角按鈕（也被稱為膠囊按鈕）更適合在移動端產品上使用。
此外按鈕的圓角設置還需考慮到產品整體的視覺一致性，在不同場景下都要保證統一的感官體驗，如在大尺寸的按鈕上圓角的曲率也應設置更大。
作者：蝦米的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
畫面平衡是一個很基本的設計理念，但很多朋友在平時的作品中容易忽視這個點。彩云在星球中幫不少朋友看過作品集，發現最多的問題之一就是畫面平衡沒做好，我覺得只要把這個基本問題解決了，作品就能提升一個檔次。
用戶本能地會對不平衡的設計感到厭煩，如何在畫面中創造一個有吸引力的平衡？是本篇文章要分享的內容。
平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創造平衡與和諧，這種平衡狀態直觀上能夠讓用戶感到舒適。
人體是垂直對稱的，我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。
在設計環境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。
如何讓一個頁面看起來平衡？
最常見的平衡例子就是使用對稱。
在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側均勻放置元素來創造的。也就是說，畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的，但它經受住了時間的考驗，到現在仍然是在頁面上創造舒適和穩健感覺的最好方法之一。
二、不對稱（動態）平衡
兩側重量不相同的元素構成具有不對稱平衡。
動態平衡通常會比靜態平衡更有設計感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點，這是一個很好的機會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力，就像產品的生命線一樣。
比如一般這樣去“配重”的元素會是一個按鈕或者標題。
重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。
不對稱的現象越嚴重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構圖并不總是能被很好的感知。
平衡中的另一種類型，特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優點是，注意力很容易找到并保持一個焦點——恰好就在它的中心，這通常是構圖中最引人注目的部分。
這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。
（彩云注：這是一種比較高階的設計平衡處理手法，用的好可以讓畫面非常具有設計感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設計的時候就會發現，越簡單的設計似乎越難設計好。）
五、視覺平衡的秘密？
當談到構圖中的重量平衡時，他們經常將其與物理世界中的重量進行比較：重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復它。元素是否是一組色調、顏色還是點并不重要，目標是找到圖像的視覺“重心”，即圖像的重心。
不幸的是，沒有精確的方法來確定一個物體的視覺質量。一般來說，設計師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助：
1）大小
大的物體總是更重。
2）形狀
不規則形狀比規則形狀的元素輕。
3）顏色
暖色比冷色重。
4）色調
深色物體比淺色物體重。
5）圖案
帶有圖案的元素顯得更重。
6）3D
帶有紋理貼圖的元素顯得更重。
7）位置
物體離中心越遠，其視覺重量越大。
8）方向
垂直元素比水平元素更重。
9）密度
許多小元素可以抵消一個大元素。
10）內部復雜性
物體內部越復雜，視覺重量更大。
11）填充空間關系
正形空間比負形空間更重。
12）對重量的感知
照片中的啞鈴看起來會比一只鋼筆更重。
當使用對稱時，作品看起來可以更加的專業和有科學性。其中，靜態對稱的作品顯得更加有專業精神和嚴肅的；而動態對稱的設計方法則能吸引用戶的興趣，表達出個性和創造力，能讓用戶集中注意力。
作者：彩云sky
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
你有沒有注意過，App底部的圖標是如何變成選中的？大多數產品是將靜態圖標替換（硬切過渡），來完成狀態切換。
當我看完上百個動態后，找到了更有趣的方式...
02 App底部導航構成
通常由圖標、文字/點線裝飾、和底板卡片組成，（當然也有些產品只使用圖標或文字），但設計師在進行動態設計時則是針對這3部分。
03 Tab Bar動態類型
動態效果由弱到強，視覺層級由低到高依次排序：圖標動態 — 裝飾元素動態 — 底板卡片動態。（根據本文案例效果來排序，但效果不同會有所差異）
▍圖標動態?
我們知道圖標風格可以簡單的分為：線性、面性還有線面。在這基礎上通過修改顏色或造型，又能延展出更多風格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調整百分百參數來控制線條生長。
但只是單色修剪，看起來很單調。我們可以在這個動畫基礎上再多復制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調整不同顏色圖標的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個圖標添加修剪路徑，再配合位移、旋轉等基礎屬性則是更好的選擇。
通用的方法是調整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產品來說，可能會顯得有些普通。
我們可以考慮使用遮罩來制作動態，首先在圖標周圍繪制幾個圓，再將圖標外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調整圓的縮放即可。
在一些特殊的時間，設計師們可能會技癢，而將圖標繪制的更加豐富，來營造氛圍。
對于這類圖標，只需要參考它們的物理狀態[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調整基礎屬性，便能制作出細節豐富的出場動畫。
（物理狀態：該物體在現實場景下的狀態，上圖獎杯真實世界狀態通常是放置地面，所以出場方向是從下到上。但假如你的圖標是錦旗，那么物理狀態應該是掛在墻上，所有出場方向是從上到下）
當然如果去掉高光和投影，在制作一些動態時會更方便。
例如：復制一顆星，將其初始位置設定為一個獎杯的距離，并記錄關鍵幀，然后整體再移動一個獎杯距離。耳朵則調整路徑來完成移動和變形，這樣便能營造出3d旋轉的錯覺。
對于結構復雜的圖標，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動態?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當然這類方案很少見，原因在于商業價值不足，實現成本高，所以這里也只是提供一些創意練習思路）
在一些年輕化產品中，如果圖標含義很容易理解，那么設計師可能會用線或點來替代文字，讓整體更簡潔。
國外設計師Tubik，通過讓點元素在移動時呈現心電圖樣式，讓人眼前一亮。
通過動態效果，甚至能體現出產品行業屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產品嗎？
又或者再夸張些，將軌跡設計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產品。
通過調整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態下的圖標出現。
假如你的圖標設計的足夠巧妙，我們可以提前繪制好關鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。
▍底板卡片動態?
這類動態少見的原因在于其動態效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調整卡片路徑，但這樣的方式在制作彈性時非常麻煩。
我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調整卡片大?。?/span>
完成圓滑處理后，修改其他元素的基礎屬性即可。
目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數。
這個效果靈感來源于Dribbble設計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調整基礎屬性。
此方案目前還沒有在其他產品中看過，究其原因還是效果太過搶眼。
看了這么多，其實不難發現。同一個圖標，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。
或許創意的產生，并不是腦袋突然迸發出全新的東西。而是許多我們熟知的舊有內容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創意。
最后再說兩句：
每個產品都有自己的調性和目標用戶，動態效果也有強有弱。好的動態應該是能與其進行匹配，而不是根據某個產品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態，并不代表只能這樣用。動態效果類型遠遠不止這些，而以上只是最常見的動態屬性組合方式，所以請不要局限你的想法。
作者：幺零三 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在產品設計中，當有新上線的功能或隱藏功能時，我們通常會給予用戶提示。常見的有小紅點、角標、黑色遮罩+文字提示等這類靜態提示。
而人類是視覺生物，相比于靜態內容，我們的注意力更容易被動態內容吸引。
今天來聊一下頁面中常見的動態引導。
當你看到這個頁面時
我想你會先被色彩凸出的元素吸引，然后是面積占比大的元素，最后根據閱讀習慣從上到下，從左到右，依次查看其他內容。（大致如下圖）
而當頁面元素都賦予細節時
假如我想讓你關注到其中某個較小元素
其實只需要為它添加動態，便能使其脫穎而出，這就是產品設計中的動態引導。
▍新功能提示 ?
當產品上線新功能時，設計師們都會根據功能重要程度，來決定使用什么形式讓入口元素和其他元素區分開來。常見的有小紅點、標簽、氣泡這類靜態點綴元素（通常這類形式只出現一次，當用戶點擊后就會消失）。當然，也有將上述點綴元素動態處理的。如果入口是圖標，甚至可以為圖標制作動畫，這在很多電商產品的品類區經?？梢钥吹?。
動態處理的形式，比原本的靜態更容易引起用戶對元素的注意力（與動態方式有關），甚至傳遞某種情緒。由于是循環播放的動畫，因此可以持續吸引用戶注意力。
ps：據說，每當頁面多出一個會動的元素，后臺就會多出這樣一些留言，捅了開發窩了[Doge]。
▍誘導用戶操作 ?
動態引導還常常被設計師用來強調重要內容（有可能被產品、運營拿刀架脖子），來達成某些數據指標，通過利用動態誘導用戶操作。
例如：在會員卡片中添加光效、在廣告中讓按鈕進行縮放、為簽到入口圖標設置動畫。
這些都能充分引起用戶注意，甚至提升功能點擊率。
▍隱藏功能提示 ?
我們知道，在大屏上有更多空間可以展示信息。但在移動端，受屏幕大小限制，設計師通常會折疊或隱藏不常用的功能，來保持頁面簡潔。
對于這些不可見的功能，在初次使用時需要進行引導，才能被用戶感知與使用。
▍操作教學指引 ?
講到引導，還必須要提的是手勢引導，通過動態直觀展示不同手勢的作用，提示用戶如何與產品進行交互。
這在游戲教學中就常常使用，它可以幫助用戶快速理解游戲玩法。
回到視頻 App 中，你是否留意到，當你第一打開視頻時， App 會提醒你雙擊屏幕可以點贊，上下滑動可以切換視頻。
在產品交互設計中，如果使用到一些新穎的交互方式，這類引導可以大幅降低用戶學習成本，幫助用戶快速上手。
▍信息高效傳遞 ?
動態敘述的直觀性，使得我們可以減少對復雜信息進行大量文字描述。通過動態設計，我們可以創建視覺故事，這有助于將復雜信息以更簡單、清晰的方式進行傳遞，從而幫助用戶快速完成任務。
也因此，在一些含有復雜操作的彈窗中，漸漸開始應用。
但是需要注意的是，上述這些大多都只在第一次使用時才會觸發。
當然有特例，例如：
在 App Store 每次下載應用進行驗證時（面容解鎖的情況下），系統會通過動態提醒用戶電源鍵位置，并告知用戶需要雙擊進行人臉識別。
在掃碼時，弱光場景下出現的手電筒，通過動態引起用戶注意，指引用戶使用。
以及作為動態演示，幫助用戶理解如何使用手掌滑動截屏
如何進行NFC感應等等..
動態引導像是設計師用來控制我們眼睛的法寶，有的人用它改善產品體驗，有的人用它提升商業轉化。
但法寶雖好，我們只有理性使用，才能避免用戶迷失在這眼花繚亂的世界中。
感謝大家看到這里，我是幺零三，咱們下期見...
作者：幺零三 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、個性化的性別選擇設計
完善信息對于產品來說是提升體驗的關鍵，一些產品在初始狀態會引導用戶去完善，比如昵稱、頭像、性別、年齡等基礎信息的采集。如何提高用戶的設置興趣，降低完善信息的排斥感，需要設計師進行反復推敲。
最近在體驗 FLAG APP 的時候，在性別選擇界面設計上區別于以往體驗過的產品，將性別的可視化進行了更為情感化的強化。出色的設計讓用戶眼前一亮，精美的插畫提高了整體設計的感官體驗。該案例提供了性別選擇差異化的表現，是提高常規信息界面設計視覺感的不錯思路。
二、情感化的用戶等級設計
用戶等級是增加黏性的關鍵，也能通過等級帶給會員更多的增值服務，激發用戶的參與度。
在使用海馬體照相館 APP 的時候，個人中心在頂部視覺區域會直接顯示用戶等級，配合情感化的人物插畫特別突出。通過左右滑動可以查看不同的等級，等級名稱和對應的人物形象插畫也會針對性的設計，不僅強化了用戶體驗，不錯的視覺感也能吸引用戶的關注度。
三、精美的插畫助你釋放壓力
插畫在產品設計中的曝光度越來越高，風格多樣化直接影響產品風格，也能增強情感化體驗。全靠插畫撐起整個產品的案例是什么樣子呢？最近發現了這么一款產品。
Wild Journey 是一款解壓的白噪音 APP，內置了許多大自然的聲音，讓用戶體驗到荒野的空曠、森林的靜謐、大海的波濤。整個設計全是精美的矢量插畫作品，帶給用戶賞心悅目的感官體驗。來這里釋放自己的壓力，放松身心。
四、趨勢化的引導頁設計
引導頁設計是最容易呈現風格趨勢的，利于設計師進行創意發揮。無論是想要發揮插畫技能、建模能力或者動效表現，引導頁都能提供發揮的場景。
最近在體驗嘀嗒出行的時候，發現全新升級的 9.0 版本，引導頁設計風格也是讓人耳目一新。利用了趨勢感的插畫風格和視覺表現風格（玻璃質感風）相結合，畫面清新自然，帶給用戶非常好的視覺感官體驗。
五、可視化表現提高用戶理解度
可視化設計逐步成為信息傳遞的趨勢，利用圖形化的形式更利于用戶理解，相較于枯燥的文字化呈現來說閱讀理解的效率更高。
Keep 在產品設計的時候，有效的將一些數據的表達和內容的普及以可視化的圖形進行展示，不僅提高了界面設計的感官體驗，也能有利于用戶對于內容的理解。提高界面設計的視覺感也能讓用戶更為關注，圖形可視化已經逐步成為產品設計解決方案中的趨勢。
六、個性化的主題皮膚設置
個性化的定制設計可以讓用戶感受到產品的溫度，根據自己的喜好選擇主題化呈現。成熟的產品都會在個性化設置上面提升體驗度，特別是在主題皮膚的定制上面，提供了更多的風格讓用戶選擇。
Keep 在將主題皮膚設置定義為選擇運動伙伴，不僅提供了不同的 IP 形象和主題皮膚，俏皮可愛的動態延展也傳遞了情感化的體驗。多種風格的設計滿足了不同用戶的喜好需求，還為不同的主題定義了擬人化的角色和身份，視覺感和體驗度都非常的到位。
七、提高參與度的簽到設計
簽到設計可以提高用戶黏性，讓用戶在參與的同時獲得禮品或者增值服務，簽到也成為了眾多產品的標配功能。對于設計師來說，如何通過設計提高用戶簽到的參與度，是需要不斷探索的設計思考。
最近在使用天天跳繩時，發現其簽到設計的視覺表達直觀醒目，大大的提高了用戶對于簽到的理解和參與度。將簽到后解鎖的勛章、經驗、裝扮和禮品等直觀的結合到簽到界面中，不僅風格協調統一，視覺風格也符合運動場景感?？吹竭@個界面成功吸引了我的簽到欲望，簽到操作簡單，整體的體驗度都做得非常不錯。
八、情感化的個人中心設計
個人中心作為主界面之一來說，設計的體驗度是至關重要的。為了滿足用戶的喜好需求，個性化的設置也是層出不窮，功能布局、頭像裝扮、主題皮膚等都呈現出了眾多的優秀設計方案。
天天跳繩是個人經常使用的一款運動輔助工具，記錄小孩跳繩也是非常便利的工具。個人中心頂部視覺區域的人偶形象增強了界面設計的感官度，人偶的動態體現出用戶的運動狀態，可以進行自定義的設置來滿足自己的情感表達?？梢栽O置人偶的裝扮、旋轉角度、動作等，人性化的功能設置提高了自定義的體驗度，強化了用戶情感化的使用體驗。
九、結果導向的設計表達
以圖標/圖形/圖片等設計輔助信息的傳遞很常見，通常都是根據信息的文案來進行設計表達。如果放棄本身文案信息傳遞的意思，選擇結果導向的設計表達，也能帶來不一樣的設計反思。
最近在體驗 One More 的時候，動作庫的列表設計中便選擇了結果導向的思路。如果是常規的設計解決方案，會根據列表主題內容來設計配圖，這樣也能輔助對于內容的理解。但是 One More 選擇了完成該項目得到的鍛煉部位為設計思路，雖然不能輔助項目信息的傳遞，但是這個設計表達更能讓用戶理解完成的結果，參與度也能得到提升?？梢暬脑O計替代了文字的表達，提高了用戶對項目的理解度，進而轉化更高的參與度。
十、新穎的輪播 Banner 設計
輪播 Banner 圖對于設計發揮來說，除了在本身的創意和視覺表達層面以外，產品結構和功能層面也是設計師需要探索的方向。
極有家 APP 在產品的體驗設計層面做得非常不錯，針對輪播 Banner 位置也是做了新穎的創新。在 Banner 圖上設計了不同商品的引導標簽，方便用戶在感受整體家裝效果圖的同時可以選擇場景中的商品，也能對場景中的商品價值有個清晰的認知。輪播的形式結合了待輪播圖的預覽和風格名稱，增加了待輪播圖的曝光度，整個樣式表達上面視覺感也非常不錯，是一個比較新穎的設計解決方案。
作者：黑馬青年 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn