菲茨定律在App產品設計中強調了目標區域的大小和距離對用戶操作的影響。通過增大重要按鈕的大小、減少操作間距離、設計適合手勢操作的界面以及提供清晰的反饋指引，可以優化用戶體驗，提高用戶操作的準確性和效率。這個原理指導著設計師如何布局界面元素，使得用戶更輕松、更快速地進行交互操作，進而提升產品的易用性和吸引力。
在數字化時代，PC端應用作為人們工作、學習、娛樂的重要工具，其界面UI設計直接關乎到用戶的使用體驗和滿意度。一個優秀的PC端應用界面UI設計，不僅應當具備美觀的視覺效果，更要注重功能布局、交互邏輯以及用戶體驗的全面提升。那么，如何進行PC端應用界面UI設計，以打造高效與美觀并重的用戶體驗呢？以下是一些關鍵要點。
不同操作系統、不同瀏覽器下的默認字體是不同的，在網頁項目中可以通過 CSS 的 font-family 和 @font-face 來讓頁面渲染出適合當前網頁的字體。
相信很多設計師同學都接觸過B端產品，對于很多設計師而言，遇上B端產品是一件令人又愛又恨的事情，愛是因為目前市場上大多數的公司主要經營的都是B端系統，B端系統相對于C端來說UI界面顯得并沒有那么的重要，所以設計師的責任也相對沒有那么重，而恨是因為目前大多數B端系統頁面都是由前端UI框架搭建的，前端同學很多時候直接套用組件即可，所以UI設計師對于整個系統來講也顯得可有可無，導致設計師話語權也特別的低，甚至有些做B端系統的公司壓根不用UI設計師也能完成項目開發。
但是作為交互設計師(小公司一般是產品經理)在B端卻特別吃香，并且擁有主要的話語權，因為我們主導這整個系統的基礎邏輯與業務邏輯設計，所以無論是前端還是后端同學都需要根據我們的設計進行開發，最終完成整個系統。
因此，今天這篇文章并不是告訴大家有哪些前端UI框架或后臺組件等..（相信這些大家也看得太多了，工作中都是套框架，能用得上的沒幾個），而是從交互上如何去看懂B端后臺的基礎邏輯以及以后自己晉升成產品經理或者交互設計師時，怎樣去設計一個完整閉環的系統。
B端產品和C端不同，C端產品大多數都是針對個人用戶，設計的關系結構相對來說比較簡單，每一個用戶擁有的權限都是一樣的，例如微信、淘寶等，我能看到的頁面你都能看得到，很少不存在權限差異問題。
而B端產品的用戶一般都是企業，企業用戶一般會管理著多個角色，也就是角色多元化（例如一些校園系統角色就分為：普通教師、級長、主任等角色），不同的角色對系統的需求和職能也不一樣，我們需要根據角色的需求去劃分不同的權限，讓他們互不干擾但又滿足他們的需求問題，因此B端產品的基礎邏輯比C端產品相對復雜。
看完上面文字的同學可能蒙了，又角色又權限的，能不能說點人話？
行！其實很簡單，B端系統無非三個邏輯（也是三個頁面）：用戶管理、角色管理以及菜單管理。（有些系統因為業務需求可能有部門管理，那么算上部門管理就四個）
為什么我把菜單放到最前面跟大家講？是因為菜單管理比前面兩個相對簡單，而什么是菜單也特別好解釋，大家可以直接認為系統左側的頁面列表就是菜單，系統中擁有多少個頁面那么就有多少個菜單，你的菜單越多就以為著你的權限就越多。
菜單管理的作用就是用于管理員對整個系統頁面的管理（管理最主要就是增刪改查），而有一些公司為了減少開發工作量會直接不要菜單管理，有多少個頁面都由代碼直接寫死，管理員不能通過頁面進行人工配置，這樣會導致以后擴展會非常麻煩，當然了，有一些系統的菜單幾乎不改的話，代碼寫死也沒問題。
在講解用戶之前我需要提前跟大家講一下什么是權限，準確來講應該是權限分為哪些？
在目前的后臺系統中，權限一共分為三種權限，分別是菜單權限（也就是上面介紹的）、數據權限以及操作權限。
菜單權限決定了用戶有沒有這個頁面，例如學校系統中，主任有看到所有教師的教學數據的界面，而教師卻沒有這個功能，那么在給主任新增賬號的時候就應該把對應菜單賦予進去?？瓷先ズ軓碗s，其實具體操作就是新增的時候把對應的菜單勾選上就可以了。
數據權限則決定用戶能不能看到對應的數據。還是學校系統的例子，初中部主任只能看到初中部所有教師的教學數據，而高中部主任也只能看到高中部教師的教學數據，不同用戶能看到的數據也是不同的，所以在新增的時候需要給用戶配置（一般配置就是勾選）好對應的數據權限。
但是這里有一個問題，配置數據權限時我們如果一個一個人去勾選配置的話會特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號的時候需要一個一個的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗就會變得特別差，因此現在的系統在配置數據權限時都是以部門為單位進行配置，也就是說，直接選擇部門就代表著擁有整個部門的數據權限。
最后操作權限即決定了用戶有沒有對數據進行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁面以及數據，那么他能不能對教師們的數據進行增刪改查或者導入導出呢？這就取決于操作權限的配置了。目前很多的后臺系統在配置菜單權限的時候同時需要把操作權限進行配置（因為只能先有頁面才能進行操作），操作權限一般就是增加、刪除、修改以及查詢，當然如果頁面還有導入導出或者其他功能，這些也需要在操作權限中進行配置。
用戶其實也很容易理解，B端系統的用戶其實就是需要登錄進系統的賬號，所以有一些系統的用戶管理也叫賬號管理。
因此用戶管理的作用就是對登錄進系統的賬號進行增刪改查等，當我們需要對別人提供一個賬號時，我們就新增一個用戶的賬號密碼給他們，直到他們用完了再把他們的賬號進行刪除。
那么問題來了，上面我們說到，不同的用戶可能有不同的需求問題，那么就意味著我們每一個用戶給要他們分配不同的菜單去做他們的事情。
例如在學校系統中：普通教師只負責自己班級學生的成績錄入，所以普通教師只有班級成績錄入的菜單，但是學校主任卻不一樣，他不僅僅能看到各班學生成績，還能根據各班成績進行對比分析，年級學生排名等等..
因此在剛開始的傳統權限系統中，我們會直接把相應的菜單權限、數據權限、操作權限賦予給用戶，每新增一個用戶我們就選擇好所有的權限都勾選上賦予給用戶，最后提供給用戶進行操作。
然而這種操作方式有一個弊端，就是如果每新增一個用戶，系統管理員就需要重復進行勾選相同的權限，那么就會耗費大量的精力（一個用戶要配置的權限特別多，如果用這個方式操作的話新增一個用戶可能就需要花費很長時間）。因此，為了解決這個問題，我們在用戶與權限之間建立了角色管理。
系統中角色的定義其實跟生活中是一樣的，我們把固定的權限集合到一起從而形成了角色。例如，生活中UI角色就負責頁面的視覺設計，而交互設計師則負責了產品的邏輯或者用戶體驗設計，這些角色擁有的權限一般很少變化，也幾乎不會進行刪除或者修改，就好像UI設計師或者交互設計師這些角色不會一時半刻就被完全消滅一樣。
有了角色，我們可以先把對應的權限集合賦予給角色，然后新增用戶時，再選擇用戶對應的角色即可。
這樣做的好處是什么呢？好處就是當我們新增用戶的時候，如果是相同角色的用戶，我們不再需要重復去大量勾選相應的權限了，只需選擇好該用戶是那個角色就可以間接對用戶賦予權限，并且后續要對用戶進行權限的修改也十分便捷。因此，在現在的后臺系統中，大多數都是采用權限賦予角色，然后新增用戶時再選擇用戶對應的角色的方式。
如果看完上面的知識點還有點懵的話也沒關系，這部分給大家展示在后臺系統中菜單管理、角色管理與用戶管理的實際應用是怎樣的。
第一步先查看菜單管理有哪些內容，一般情況下，一個成熟系統的菜單頁面幾乎是已經固定不變的，那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作，列表中有多少數據就代表著系統總體有多少菜單。
第二步進行角色管理，如果是成熟系統的話，角色管理的角色也早已經分配好了，我們并不需要過多的進行操作，但如果是剛研發完成的系統，那么我們就需要根據現實的用戶需求進行角色的設置，具體添加角色的主要參數包括角色名稱、菜單權限、數據權限以及操作權限（其實也就是上文介紹的三種權限），其他的參數都是根據自身業務進行添加。
最后一步就是用戶管理，配置好角色后，我們就可以根據需求進行用戶的新增操作，例如現在我們需要新增一個賬號進行登錄系統，那么在用戶管理頁面中點擊新增按鈕，隨后填寫用戶名稱與密碼，最后選擇用戶角色，點擊確定按鈕即可完成（因此，新增用戶的三個必要參數是用戶名、密碼以及角色，有部門的需要填寫所屬部門，其他參數根據系統業務進行添加）。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺系統，隨后體驗一下作為其他角色是否能完成自身需要的業務。
用戶管理、角色管理以及菜單管理是B端系統最基礎的邏輯，也是同學們將來需要轉崗B端交互設計師或者產品設計師所必須掌握的知識，上面所介紹的僅僅是RBAC模型中最簡單的一種，現實設計中可能出現各種情況，因此關于這次的B端產品設計我想給大家幾點Tips：
1、在現實開發中，后臺系統并不一定像我上面所說的那么完善，有些系統并不需要菜單管理，老板要求直接代碼寫死就好了，又或者有些系統就只有一個角色，那么角色管理也不需要了，這些情況都是有可能發生的，所有我們做設計的時候除了運用自己的知識以外，更多的是工作經驗，知識是死的，人是活的，永遠別忘了設計的本質是解決用戶需求問題。
2、很多時候后臺的邏輯管理會比我上面說的要復雜的多，例如一個用戶可以擁有多個角色嗎？不同角色能不能有相同的權限？如果有角色被刪除了，那么該角色關聯的所有用戶應該怎么處理？可能你認為這些并不是自己目前需要考慮的問題，但是除非你以后并不想晉升到更高的位置，不然這些問題以后肯定會遇到的。
3、上面介紹的管理操作都是基于超級管理員賬號（admin）進行操作的，如果你拿一個普通賬號的話一般是沒有對應的菜單權限，我擔心有同學看完文章后馬上登錄自己的后臺系統進行操作，接著登錄進去找了半天都沒有找到對應的菜單在哪里。
好了，最后希望文章能讓大家有所收獲，如果大家有不明白或者其他想法的話，歡迎大家一起探討，共勉。
文章來源：優設網 作者：北沐而川
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經常遇到對統計的數據分析總結的呈現。我們設計師在設計圖表的過程中，如果沒有系統的可視化知識，會出現設計的圖表雖然美觀但圖表不能很好的反應數據的情況。那么，在復雜的數據關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數據可視化
數據可視化就是用圖表來表示數據信息，它所傳達的信息包括你所拿到的數據源和你分析后的結果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數據，用表格的形式呈現是很難有所洞察的；如果將各個地區維度的數據聚合以柱圖形式呈現，很容易就能看出各個地區間數據的差異，并從中洞察規律
關于如何設計好數據可視化圖表，這邊總結了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數據可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數據關系來選擇表達方式；第二層意圖是圖表傳達內容，這時候我們就需要根據數據的特征去突出和強化。
1. 分析數據關系
根據數據分析的方式來看，每一種圖表都對應了一種數據關系。從數據的維度出發弄清呈現結構，再結合數據關系作出選擇。了解圖表的可能知道，一般圖表的數據關系有構成、比較、分布，以商業數據為例，常見的還有流轉關系。
構成關系
構成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構成關系一般局部元素加起來為總數。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環圖、堆疊圖、面積圖等，如涉及到層級結構，還會用矩形樹圖或旭日圖等特殊結構圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內數據的變化，分類對比用于比較數據規模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區來展示數據之間的分布關系，常用于體現兩個或以上數據的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯與流轉
流轉關系是B端數據常用的一種關系，它可以動態的體現相關路徑下對象之間的關系、狀態、數據量的流轉變化等，以面積或顏色深淺展示了多個狀態或對象之間的流動量或流動強度。
常用圖表：關系圖、桑基圖、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉化、關系”
2. 分析數據特征
按數據關系和分析目的選擇好圖表類型后，第二步是根據數據特征選擇更加適合的展示方式。從數據分析的角度常見數據特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續可分為連續數據與離散數據兩種。連續數據通常會統計一組數據的變化趨勢，離散數據通常統計各分類下數量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數據，可使用不同顏色進行分類
層級特征
多層級數據由多個部分構成一個整體，又稱樹形結構數據。除了用結構樹圖表表現以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結構。長方形的大小取決于各國家的平均銷售額，通過色調來區分不同類型，顏色的深淺代表分類下的子集，面積體現銷售占比。對比一般結構樹圖表，它的優勢在于可以有效利用空間。
流程特征
流轉關系是表達數據轉化流程的重要類型，不僅包含統計意義上的數據總和，同時還表達了信息流轉的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調流量的強度和走向，漏斗圖更加注重突出轉化率和效果，根據不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現數據特點。
1. 強化數據特性
使用圖表正確的表達信息，需要設計師在強化數據特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構圖上優化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數據的感知，錯誤的取色會讓信息讀取產生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續的項目在選用時也可以達到用色的統一。
我們在之前的文章里有介紹過圖表的取色模型，通過調整顏色HSL值的區間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調來進行分類
數據內在沒有順序差別時，建議使用色調值（H）進行區分；如定義國家、行業等類型。如果希望圖表看起來更加專業，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調內在順序
如果在同一個分類下包含子類別，或者數據本身具有排名屬性，那么建議使用連續色板來突出他們內在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數據一般是在網頁或移動端上動態顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環境，根據不同端去適配顯示效果，以適應各種復雜情況。而動態顯示帶來的交互特性也讓數據展示有了更多的可能性。
1. 布局框架適配
在網頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據數據相關性變化元素的適應形態，將非必要的的元素轉化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數據量，可能會遇到因數據量過多，造成圖表顯示不佳，數據讀取困難等問題。這種情況下，提前考慮數據極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結語
數據可視化在B端設計場景中發揮著重要作用。設計師在表達數據之美的同時更加準確，才能更直觀地向用戶傳達數據的價值。使業務人員能夠從復雜的業務數據中快速、直接地找到重要數據，確保用戶能夠更好的接收信息，才是可視化的關鍵。
* 以上圖表中均為虛擬數據，僅作為案例參考
感謝閱讀，以上內容均由百度MEUX團隊原創設計，以及百度MEUX版權所有，轉載請注明出處，違者必究，謝謝您的合作。申請轉載授權后臺回復【轉載】。也歡迎加入MEUX,視覺/交互/運營設計師，可投簡歷至MEUX@BAIDU.COM (注明信息獲取來源如：站酷）
關于我們：
MEUX,百度移動生態用戶體驗設計中心，負責百度移動生態體系的用戶/商業產品的全鏈路體驗設計。服務的產品包括百度APP、百度搜索、百度百科、百度貼吧、百度商業產品等。MEUX以「簡單極致」為設計理念，創造極致用戶體驗的同時賦能商業，推動設計行業的價值和影響力，讓生活因設計而更美好。
博學多聞，不同凡響。
博聞美育，是一款致力于提升用戶文化素養的產品。研發團隊以“長見識，會思考，懂審美”作為核心理念，設計出《中國故事》《四方采風》《高端文學》等的系列課程。
面對一個真正落實人文素養的全新課程產品，我們作為視覺設計師，首先希望的就是為用戶打造出最美的課堂，使用戶在高品質的美學場景中能沉浸式體驗到學習的樂趣。當然，我們同樣希望探尋如何通過設計幫助青少年在使用產品時養成高審美意識，加強文化自信。
在此次對博聞產品的視覺品牌設計中，設計團隊探尋了如何將視覺設計體驗與課程教學更好的結合，以下為我們的設計過程以及設計成果。
首先，我們通過對產品特性的分析，明確了此次視覺品牌探索的主要設計目標 —— 重新定義什么是提升學習體驗的人文素養產品，從用戶視角轉變為參與者，更加沉浸于課堂。
基于對設計目標的進一步探索，我們提煉出了提升學習體驗的三種核心理念：
近年來，國潮文化與傳統藝術在青少年群體中“走紅”，成為青年對話傳統的方式。體現了青少年對中華優秀傳統文化的價值認同和情感認同。我們希望在青少年養成審美與內在的關鍵階段，也盡到自己的一份小小的努力。
在保留傳統藝術精華的基礎上，我們尋求視覺上的創新，突破設計的思維慣性，使用戶可以通過現代的視覺表達形式與經典文化產生共鳴，傳達國風之美，多角度喚起青少年用戶對于傳統經典的文化價值和藝術價值的理解。
我們希望將國風之美呈現在用戶面前，將有道博聞系列課程全面包裝成能夠讓學生身臨其境的國風互動課堂，豐富用戶的心智，發揮產品的雙重價值。
確立核心理念后，我們將中國傳統藝術中的精髓進一步提煉，最終選擇了以下關鍵詞作為視覺設計的表現點：
接下來，我們基于各個關鍵詞對具體方案展開探索
容納承載，歷史淵源。
為了確保博聞三個系列的課程（《中國故事》《四方采風》《高端文學》）在品牌視覺設計上能夠更好的進行拓展應用、傳播差異化、與用戶情感共鳴。我們結合了三個系列課程的特點與對傳統文化的研究，分別為各個課程建立了代表性的元素作為超級符號，加強用戶的記憶點：
① 中國故事 —— 講述中華經典
中國故事系列課程會通過詩、詞、歌、賦、散文、小說全類型文學作品，講述中華經典。玉璽作為皇帝的玉印，是至高權力的象征，在各朝各代中見證了各色各樣的傳奇故事。因此選用【玉璽】作為中國故事的符號圖形。
四方采風系列課程首次“走出屏幕”，采用文化直播結合外景采拍的形式，在歷史文化名城中講述各地的風土人情。使用【中國古建筑】作為這一系列課程的超級符號，見證和反映了各地社會的發展和歷史變遷。
高端文學系列課程將帶領用戶學習重磅文學作品，該系列選用【卷軸】作為代表符號，卷軸不僅承載了國人對中國繪畫、書法的認識，更是寫入了古人的思想與信念。
在確認好三個系列的代表符號后，我們將構圖一分為二，左邊作為系列的重點信息區域，右邊作為符號以及視覺表現區域。
濃墨淡彩，總相宜。
在視覺品牌的色彩方面，我們從古代寫意的濃墨重彩中，提取出了富有中國氣質的一抹顏料。
歷史厚重的「紅」，風光寫意的「綠」，靜心閱讀的「藍」代表了三個系列課程各自獨有的氣質。
剛柔并濟，行云流水。
我們依據行楷的筆畫特點，設計了三個系列的第一識別字體?！感锌菇橛诳瑫c行書之間，比端正的楷書多一分活潑自由，又比隨性的行書多一份端莊。我們在此行楷的靈活中增添一抹穩重，剛柔并濟，恰到好處。
第二識別字體的設計靈感來源于印章。「印章」的歷史可以追溯到戰國，至今仍在生活中廣泛應用，古人鑿銅刻玉，力艱功深，我們希望這種信念依舊可以傳承在青少年的品格中。受到印章印面形式的啟發，設計了第二識別字體。文字采用現代字體為基礎，增加辨識性。
清新淡雅，水天一色。
國畫，以其永恒的藝術魅力穿越時空。國畫的繪制講求布局、造型、運筆、賦彩，不拘泥于自然物象的再現，強調主觀意境的創造，是中華民族傳統文化的瑰寶。我們借鑒了國畫中工筆畫的「留白」構圖理念，并添加水墨畫中的「墨韻」作為細節補充，創作了既符合現代視覺風格，又不失古韻的插畫；
最終，我們將提煉出的「符號」「色彩」「書法」「國畫」這四個關鍵詞融合在系列課程之中。
除了設計課程產品常規的講義以及線上頁面，為了進一步提升用戶的沉浸式學習體驗，有道博聞獨創了「手賬本」這一教輔材料，并且隨課程附贈可以使用戶進一步體驗傳統藝術魅力的「國風禮盒」。
「手賬本」可以幫助用戶將課上的知識融會貫通，并收入「手抄報」「旅行MAP」「作家名片」「思維導圖」等模塊，讓用戶深度參與到【輸入-加工-輸出】的產品結構中，使用戶充分吸收課堂知識、加入自己的思考理解，并最終輸出觀點和總結?！韭?想-做】循環，鞏固知識印象。我們最終會收集用戶的優秀作品，并集結成刊，出版成冊，進一步提升用戶的參與度，增強他們的學習熱情。
在手賬本的視覺設計中，我們根據課程內容繪制了精美插圖，考慮到用戶書寫的便捷性，設計了古風的書寫外框，力求用戶可以時時刻刻沉浸在充滿國風之美的課堂中，使視覺設計與教學內容完美融合。
「國風禮盒」將“長見識，會思考，懂審美”的概念植入到禮盒的選品和包裝中。封面設計我們選用了「時空穿梭」的概念，通過時空隧道，串聯古今，大開眼界。禮品內容里，充分尊重用戶的喜好，最終選取了「國畫顏料」「手繪扇子」「國風筆記本」「考古盲盒」。每一份禮品，都充滿著我們對它的嚴格要求和對用戶參與的期待。
“古老的種子，它生命的胚芽蘊藏于內部，只是需要在新時代的土壤里播種?！?nbsp; ——泰戈爾
中華傳統文化正是一顆充滿驚喜和生機的種子，靜待著我們的細心發掘。我們會繼續探索，用設計在新時代中傳承優秀傳統文化。讓傳統藝術擁抱青少年，讓東方美學成為青少年心中最引以為豪的文化。
本次有道博聞項目的設計過程中，我們牢記以用戶為中心的理念，做與課程產品融合的設計，最終收獲了一份寶貴的經驗，也獲得了用戶的一致好評和贊許。未來，設計團隊也會堅持做以用戶為中心的產品，傳達設計的力量。
相信種子，相信力量。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者： 有道LCT設計團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Apple One里面有6款不同類型的應用捆綁在一起，頁面開篇這6款應用圖標橫向平鋪，隨后依次翻轉，接著Apple One也翻轉出來，向用戶強調它們被包含在該產品里。
品牌圖標演化出多種圓形內容，內容還會不斷變化切換，最后又融合成品牌圖標，簡單明了直觀告訴用戶這個功能可以解決用戶哪些問題。
開篇在淺黃色背景上告訴用戶智能家居應用被重新設計，隨后不斷加深的黃色房屋造型逐漸由大變小疊加起來組成了Home app的圖標，引出介紹內容；通過放大品牌情感溫度從而向用戶傳達品牌理念。
為了讓更多的人使用Apple Pay，蘋果向用戶展示了真實的使用過程，降低認知成本，讓用戶更容易接受并使用。
用全屏視頻內容刺激用戶感官，然后內容逐漸縮放到電視內，一開始就把試聽體驗注入到了用戶腦海中。
背景顏色及內容伴隨電視中的視頻一同切換，讓用戶明確感知產品能做哪些內容。
特寫展示遙控器，隨著遙控器角度變化，內容也跟著變化，就像有位銷售拿著產品在你面前，詳細為你講解每一個按鍵的功能。
蘋果錢包圖標及文字逐漸放大向下移動，并將文字頂出屏幕以外；整體接著放大，錢包底子繼續下移消失，只留下錢包內的彩色卡片，說明文字上升出現。
隨著頁面往下，藍色卡片向上移動，卡片內文字漸顯，頁面整體變成藍色，蘋果巧妙的將圖標元素與賣點內容結合，并通過不同顏色來區分不同內容。
滑到頁面最底部，四張彩色卡片又逐漸插到錢包里，最后再強調用戶去使用。
賣點先后出現，層層遞進，隨后產品被新功能及核心特點彈開， 將產品大、有多大、續航強以及新功能先后映射到了消費者腦海里。
產品用廣角的視角依次出現，一方面展示產品顏色規格、另一方面暗示產品屏幕大。
Plus和電池一同進行充電動畫，僅僅一個關鍵詞和一個圖標，就形象的描述了電池容量大的事實，緊接著更加具體的參數逐一顯示，強化究竟有多大。
產品旋轉運動最后合并成一個由大變小，最后出現價格，強調改產品很實惠。
手機旋轉放大，原來的桌面壁紙變成了產品賣點的背景，將產品和賣點順滑的聯系在一起。
電池圖標與賣點一起進行充電動畫，將賣點順其自然的表達出來。
讓每一句文案絲滑的連接出現，讓用戶能夠感知出產品低延遲的優點，接著產品側影出現將之前內容擦除，引出處理器的強大。
就如賣點所說，產品很貼心的前后為你旋轉展示它的面板，讓用戶看的真真切切。
水花下落被手機彈開，直觀的告訴用戶它是防水的。
漆黑的背景寫著14Pro的標題，隨后標題消失，同時產品從無限大縮小，看完這個動畫才發現，原來之前漆黑背景是新款產品的靈動島，隨后靈動島展示了在不同場景下的狀態，吸引了用戶注意。
產品說明內容使用新款手機墻紙進行漸變顯示，加強了用戶對新款產品的感知。
運用視差，營造空間感，手機和里面的內容先是很大，并且展示第一段說明內容；隨著鼠標往下滑，手機縮小屏幕內容變化，營造了一個真實的場景畫面，來強化新功能的賣點。
標題不斷放大，文字中間的圓逐漸演變成一個圓角矩形，隨后帶出靈動島功能動畫，用戶從頭到尾都沉浸在蘋果編排的情節中，用戶喜歡了解新功能也就順理成章了。
內容往下看，箭頭按鈕從左向右滑動，顯示查看詳細內容的入口，引導用戶點擊查看，這樣做沒有哪位用戶會拒絕自己的好奇心點進去看看。
最開始只有大標題和一個科技感的芯片，隨著頁面下滑，詳細內容顯現，芯片伴隨著分層鏡頭元素逐漸組裝起來，展現出了產品的科技與精密。
手機背部攝像頭用特寫鏡頭伴隨機身從平視到俯視的角度變化，將用戶視線引到攝像頭上，隨后顯示說明文案強化產品宣傳。
開篇全屏出現一朵具有科技感的3d花朵收攏綻放的視頻，隨后鏡頭后推，2臺產品旋轉展開，呈現出一個展翅翱翔的造型，傳達出產品性能強勁展翅高飛的勢能。
處于合起的筆記本漸漸被打開，里面播放著三維動畫界面，暗示用戶它正在處理三維任務，隨后旋轉出2臺電腦，關于電腦的核心參數被顯示出來，告訴用戶具體哪些性能有了提升。
電腦屏幕做爆炸圖動畫處理，形象展示內部結構，吸引用戶關注產品特點內容。
多臺不同顏色的電腦旋轉排列，鏡頭不斷變換角度，最后依次排在一起用側視圖來喚出標題，在營造出歡快的氛圍的同時，還體現出產品多彩的特點。
顏色文案內容不斷切換，電腦變換不同組合方式輪番切換展示，接著營造歡快氛圍。
體現電腦薄的文案放大顯示，隨著頁面往下，文字縮小，逐漸被電腦側邊遮住，用動態對比的方式讓用戶感受到電腦的厚度很薄，再往下，屏幕微抬，搭配關于屏幕旋轉角度的賣點。
電腦切換顏色體現內容發生變化，旋轉角度可以全方位看清新版插口的位置以及體現更方便的使用。
支持多方應用的文案在應用圖標的包圍中下落，下落的過程中同步顯示的應用可以體現支持的應用多，最后和詳細介紹文案碰撞，可以很好的銜接用戶的閱讀視線。
產品逐漸被放大，鏡頭進入內部，里面迸發碰撞的液體體現產品內部有著強勁動力。
承接上一個內容，體現剛才那么強大的動力的源泉就在你眼前，去選一個吧，伴隨著芯片的光影運動，讓你覺得這是一個具有魔法般的嶄新器物。
深入產品內部，不同顏色的光束旋轉流動，用具象的形式體現產品在散熱方面的工作原理以及性能是多么強。
產品快速運動對文字造成拖尾效果，體現產品的輕，以及速度快。
文案內容居于2臺電腦狹小縫隙之間，有一種壓迫感，體現出新產品的實力很強大，緊接著M2芯片由大變小出現，交代出產品之所以強大得益于芯片。
屏幕里的應用在不停的變換，體現電腦在進行不同的應用操作，隨后文字出現，強調續航能力很高。
2臺電腦屏幕旋轉變化，對比出2者間攝像頭位置做了更新。
產品旋轉，展現輕薄側面，搭配攜帶更少，攜帶更多的文案，讓消費者更加肯定它的輕薄。
看了蘋果公司網站中的動畫，不難看出，動畫的核心功能就是用關聯的方式強調、強化賣點
具體方法如下：
1、產品如果有多種顏色，那就盡量在畫面中一起體現
2、讓產品自己說話，善于利用產品的不同角度、運動方式強化產品功能特征
3、不做無用動畫，讓每一個動畫表達明確的意圖，不要讓用戶覺得它只是在動
4、把控文案展現在用戶眼前的先后順序，用故事把它們串聯在一起，從而掌控用戶閱讀節奏
最后我們試想一下，如果網站中的動畫內容全部變成靜態，那會帶來什么樣的后果
1、內容會變得枯燥，賣點得不到強化，用戶購買欲下降
2、靜態內容很難描述一些抽象的功能，例如：如何體現產品散熱很好，音質怎么個好法
3、內容太多占空，原本一個動畫就能說明的內容，非要寫大篇文字
在 UI 的設計體系中，圖標是最重要的組成部分之一，是任何 UI 界面中都不可或缺的視覺元素。了解圖標相關的概念，以及正確繪制的方法，是入門 UI 設計的必備條件。
網上現存不少關于圖標繪制的文章和教學，但不是太籠統，就是太片面。即使看了很多這種碎片化的知識，也很難在我們的認知中對它有比較全面、系統的認識，所以大多數初級的 UI 設計師，始終畫不好圖標。
針對這個問題，我希望用一篇長文來講清楚圖標設計的所有要點和具體的設計方法，讓所有設計新人更快的上手圖標設計。
本文共分為以下5個部分：
1. 圖標設計詳解：先對圖標有個整體的認識，了解圖標總共有哪些類型和應用場景。
2. 工具圖標設計：最常見的工具型圖標的相關規范，以及對應的設計案例演示。
3. 裝飾圖標設計：近年來使用越來越廣泛的視覺型圖標設計認識，以及對應的講解。
4. 啟動圖標設計：講解啟圖標的相關規范，如何高效的進行設計。
5. 圖標應用詳解：介紹在一個UI項目中，要應用多少種圖標規格，并如何設計出正確的圖標
圖標，是一種圖形化的標識，它有廣義和狹義兩種概念，廣義指的是所有現實中有明確指向含義的圖形符號，狹義主要指在計算機設備界面中的圖形符號，有非常大的覆蓋范圍。
對于 UI 設計師而言，我們主要針對的就是狹義的概念，它是 UI 界面視覺組成的關鍵元素之一。
在當下最常見的扁平化設計風格中，界面的實際視覺組成只有 4 種元素，圖片、文字、幾何圖形、圖標。
可以說，圖片、文字、幾何圖形的運用，都只用到排版的技巧，而圖標，是 UI 設計中除了插畫元素以外唯一需要我們 “繪制”、“創作” 的元素，一涉及到這兩件事，難度就直線上升了。
本來往界面里丟一些方方圓圓、貼幾張圖、填一些字，就可以把界面做出來了，比如下圖中的 Clear APP，不僅工作量少，而且還符合極簡原則，為什么還要吃力不討好地設計圖標？
這就涉及對圖標作用的探討了，為了節約篇幅，更快進入大家最想看的重點干貨，我就不長篇大論從上古時期人類與圖形符號的糾葛開始寫了！就談對于圖形界面本身，為什么圖標有這么重要的地位，沒它不行。有兩個原因，第一就是，文字雖然也是一種圖形符號，但相對于圖標而言，文字實在太復雜了，在識別效率上有先天的劣勢！再者，不同的語言，文字的長度也不同，如果換成阿拉伯語或者俄羅斯語，或許一行還裝不下所有文字。圖標可以以一種更高效的方式，將我們想要傳遞的信息進行濃縮，不僅易于識別，也能讓界面更簡潔，利于排版，比如下方案例。
第二點， 就是關于視覺的觀賞性上。有些頁面中，如果把圖標去掉了，也絲毫不會影響我們的操作效率，以及對內容的理解。但沒有圖標，缺少這些點綴，我們就會覺得這個頁面看起來總感覺太枯燥了，不得勁，最好的例子就是應用的設置頁了，見下方案例。
既然知道了圖標的作用和重要性，那么接下來，就要進一步了解在工作中我們要設計哪些圖標。
可以先劃分成三種大類：
? 工具圖標
? 裝飾圖標
? 啟動圖標
下面，我們將為對它們分別進行介紹，以及展示相關的設計類型，方便讀者在開始學習具體設計前，對 UI 設計會創作的圖標有更全面的認識。
1.1 工具圖標
首先，我們要說的是工具圖標。這是我們在日常討論中提及最頻繁的圖標類型，即應用內有明確功能、提示含義的標識。作為最常見的圖標類型，我們就不需要做太多的說明了。
雖然理解起來容易，但是它所包含的設計樣式卻并不少，可以把它們歸納成線性、面性兩個大類，再分別進行細分。
風格1：線性風格
線性圖標，即圖形是通過線條的描邊輪廓勾勒出來的！多數人對它樣式認識的第一反應應該是使用純色的閉合輪廓，比如上圖案例，線性圖標的創作空間看似不多，但實際上有非常多的調整空間。
下面我們把它們統一羅列出來。
風格2：面性風格
面性圖標，即使用對內容區域進行色彩填充的圖標樣式。同樣，在這類圖標中，也不是只能應用純色的方式進行填充，還有非常多的視覺表現類型。
風格3：混合風格
當然，在設計圖標類型的時候，也不一定非線性和面性不可，有一些熱衷創造和嘗試的設計師，還創作出了混合型的圖標，既有線性描邊的輪廓，又有色彩填充的區域。常見的樣式類型如下。
1.2 裝飾圖標
和工具圖標比起來，裝飾圖標的視覺性作用更多。對于一些比較復雜的應用來說，過分的簡約并不能彌補信息過多的信噪問題，我們要通過豐富視覺體驗的方法來增加內容的觀賞性，減少一屏內顯示內容的數量。
比如在分類列表里，是可以只使用線框和文字把大量內容濃縮到一屏以內，但實際瀏覽效率并不會增加，而且并不美觀。
還有，就是國內的界面設計環境，會根據運營的設計需求進行特殊化處理，尤其在電商領域，首屏的圖標都會改成首頁風格的樣式，增加活動氛圍。
裝飾性的圖標設計，雖然沒有明確的規范該怎么做，效果怎么好怎么來，但最常見的類型有四種，下面分別進行介紹。
扁平風格
扁平風格的裝飾圖標，通常可以理解成是用扁平插畫的方式畫出來的圖標，除了繼承扁平的純色填充特性以外，也相對于普通圖標有更豐富的細節與趣味性。
擬物風格
擬物風格的圖標現在出現的頻率越來越高，集中在大型的運營活動中，通常這些活動會通過擬物的方式將頭部設計成有故事性的場景，所以自然頂部的相關圖標使用擬物的設計形式會更貼合。
2.5D 風格
2.5D是一種偏卡通、像素畫風格的扁平設計類型，在一些非必要的設計環境中，使用 2.5D 會比較容易搭配主流的界面設計風格，有更強的趣味性和層次感。
炫彩漸變
這是一個拗口的原創名詞，找不到更合適的，還是覺得浮夸點符合它的氣質。這種圖標，就是通過一系列非常激進的漸變和撞色實現，通常還會使用彩色的陰影。
使用這樣圖標的區域，通常都會呈現出一副五彩斑斕的景象，只有在內容非常豐富且用戶偏向年輕化的產品中可以使用，是一種非常難駕馭的設計風格。
實物貼圖
最后一種，就是采用了真實攝影物體的設計風格。雖然它不屬于完全依靠我們創作和繪制出來的，但想想還是放進來合適。因為這種圖標的出現頻率非常高，有必要再后面掌握它的做法。
1.3 啟動圖標
最后，就要說說啟動圖標了！啟動圖標的設計比前面兩種類型的圖標說起來更難，因為它實際上就是把 “LOGO嵌套進系統圖標模版” 的圖標。
除了必要的規范掌握以外，啟動圖標的主體物設計就是 LOGO 的設計，已經超出了圖標繪制本身的知識點。所以，在后面我會針對這個問題講解一些比較套路易懂的設計方案供新手學習，這里我們先來了解一下它有哪幾種設計形式。
文字形式
適用了文字作為圖標主體物的類型，通常是這類應用本身的品牌 LOGO 就使用了文字，所以這里就把字體照搬過來。
圖標形式
對于一些偏工具，適合用簡單圖形傳達應用功能的啟動圖標，就會采取使用工具圖標的方式設計。
圖形形式
圖形形式看起來和圖標形式很接近，但實際上完全不屬于同一類型，之所以它不是圖標，是因為這類圖標的主體圖形是一種經過高度抽象化的標識，傳達的是品牌性，而不是圖形的含義。
插畫形式
對于一些比較純粹的應用，如讀本、漫畫、幼兒類應用，就熱衷于采用卡通形象作為圖標的主體進行設計。
擬物形式
雖然現在扁平化的設計占據主導地位，但依舊有很多應用的啟動圖標是通過擬物的方式設計的。因為對于這些應用來說，擬物設計所傳遞的信息往往更直觀和準確。
當然，還有其它的數之不盡的啟動圖標設計方式，比如明星大頭照、攝影圖、游戲原畫等，但理解上面這些類型就夠了！
前面介紹的三種圖標，就是今后在進入 UI 行業設計的內容。雖然圖標看起來簡單，但可以玩出的花樣不少。除了正確設計出圖標以外，高低階的 UI 設計師之間的區別也包含圖標設計類型掌握的多寡。
所以，在開始學習前，不要將設計圖標的目標局限在最簡單的圖形繪制上，還有很多有趣的設計形式等待你們去嘗試。
了解了圖標的類型，就要開始了解做出這些圖標應該使用哪些軟件了！通常，UI 主要使用的設計軟件包含 PS、AI、Sketch、XD 四款，理論上，它們都包含了圖標繪制的功能，如果我直接告訴大家去精通這 4 款軟件那么畫圖標就一點難度都沒有了，這是非常不負責任的，所以為了對新人更友好一點（如果已經全部精通了，就直接略過），我會分析一遍這四款軟件對于圖標設計的優劣，以及需要掌握的部分。
Sketch/XD
這兩款軟件是我們設計 UI 界面的主力。但大家一定要記得，它們主要的功能是用來完成 UI 界面元素的排版，而不是創作和繪圖。
雖然它們都包含路徑、鋼筆、布爾、等功能（Sketch 相對 XD 更完善一點點），想要繪制一些非?；A的線性或面性圖標時沒有問題，但只要涉及到比較復雜的圖形，往往就束手無策。
所以，我建議所有學習 UI 的新人，都不要從這兩個軟件中入手，而是先掌握 PS 和 AI，后面想要快速實現一些簡單的圖標時，自然懂得如何使用 Sketch 和 XD。
可以說，PS 和 AI 的應用決定了我們圖標設計的上限，而 Sketch 和 XD 是下限，所以，把上限拓展得越高越好。
Adobe Photoshop
PS 是一款無論什么東西都設計得出來的設計軟件，但是，它本質上是一款 “位圖軟件”。后續的文章中會提及，在界面中采用矢量格式的圖標是最理想的，而 PS 針對矢量的操作并不便捷，比如將矢量圖層復制到其它軟件中。
實際項目中，我們會用 PS 設計一些視覺表現相對復雜的圖標，例如啟動圖標、擬物圖標、實物圖標等等。
繪制圖標需要用到的 PS 功能并不太多，需要在前期學習這個軟件的過程中加以篩選，重點是以下知識點：
? 路徑創建和調整
? 鋼筆工具和錨點
? 路徑圖層
? 布爾運算
? 圖層屬性
雖然 PS 在實際項目中是用來畫復雜的圖標，但并不妨礙我們使用 PS 從最基礎的圖標開始畫起，因為想要熟練掌握上方的知識點，簡易的工具圖標是最好的磨刀石，之后再學習 AI 的操作，就可以更快的上手。
PS：最近在準備一套 PS 教學，就會比較完整的講解一遍這些功能和對應操作。
Adobe Illustrator
AI 也是 UI 設計必學的一款軟件，它的功能異常豐富，主要用來設計矢量圖形。對比 PS，它有更好的矢量操作支持，對于路徑細節的調整上，是最全面最細膩的軟件，并且 AI 中的圖形還可以直接復制黏貼到其它應用的畫布中。
如果掌握了上方提及的 PS 基礎，那么學習 AI 也就輕松了不少，其中，AI 設計圖標中有三個特殊的功能是需要重點掌握和學習的：
? 形狀生成器
? 輪廓化描邊
? 路徑查找器
花幾個晚上，掌握了 PS 和 AI 的相關知識點以后，就可以為我們后續的學習提供良好的支持！
但是現在還不要迫不及待地打開軟件，在實際上手操作繪制圖標之前，我想先講講規范。
是的，現在還不到實操的時候，規范之于畫圖標，就好像音標之于學英語，都是基礎中的基礎，也都是大家最容易忽略的東西。
如果對規范沒有一個清晰的認知，那也是無法獨立畫好一套圖標的！希望讀者千萬不要跳過這部分的講解直接去看演示了。
3.1 表意的準確性
在第一部分中，我們知道圖標的主要作用之一就是作為文字的替代品，具有明確的寓意。比如看見一個放大鏡，我們會當成那是搜索，看見鑰匙或者鎖，我們就會理解成是密碼，比如下面這些圖標，每一個指代的功能和寓意都是非常直白、清晰的。
表達的寓意清晰，是工具圖標最基本的要求，否則它只會傳遞錯誤的信息，造成用戶的困惑。
在常見的圖標類型里，如通知、設置、用戶、分享之類的圖標，對于任何手機用戶來說都沒有認知和選擇壓力。但表意準確麻煩的地方在于，一些非常規的寓意，極難用圖標表現出來，這才是我們使用工具圖標的首要麻煩。
比如下方這些圖標，如果我不加上文字信息，大家能理解它們是什么嗎？
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=12507
那么，我們再把文字信息補充進去，是不是就會覺得圖形挺貼合內容的。
在這種案例中，我們要關注的就是，面對這樣不常見的內容，設計師是怎么把圖形的創意和樣式想出來的！如果自己遇到一樣的問題怎么辦？
所以，除了知道每個工具圖標都要表意準確這樣 “正確的廢話” 以后，我們該看看如何通過合適的創意將圖標樣式確定出來。
一般抽象的圖標，難點在于寓意信息是非實體的，所以我們很難直接構建對圖形樣式的聯想，所以首先我們得想辦法將抽象的內容 “實體化”。也就是說，我們可以先把這個詞寫到紙上，然后把和這個抽象信息相關的所有實體物寫下來。
然后，我們可以挑選出某個合適的實物，以它作為原型開始繪制。如果對這些挑選出來的實物要以什么圖形表現還是沒概念，那就可以借助網上的圖標素材網站，比如 iconfont、iconfinder 等，在搜索框中輸入這些詞語，通過別人的設計收獲靈感。
如果本身擁有比較好的手繪基礎或是平面基礎，也可以直接通過對照片進行提煉的方式，設計出圖形內容。
所以，在設計圖標時符合表意準確的概念，需要設計師不斷收集圖形，并提升對詞匯聯想的能力。很多圖標圖形優秀的創意，就是在這些基礎的積累之上逐漸形成的，而不是一撮而就。
3.2 圖標的一致性
第二個規范，叫圖標的一致性。即一個或一套圖標中，應該保持一致的細節。首先看看下面的反面案例。
在上面的案例中，不同圖標間有很大的割裂感，完全不像處于同一套設計體系之下，這就是缺乏一致性的表現。這也是新手在設計一整套圖標最大的難點，要讓所有圖標保持視覺細節上的一致。
下面對工具圖標要保持視覺一致性有哪些細節進行詳細的說明。
類型一致
前面說過，工具圖標有線性的、填充的類型，在正常的情況中，同一套圖標應該在類型中保持相同，如果使用了線性圖標那么后續就不要設計填充以及混合的類型。
風格一致
每一套圖標都有自己的設計風格，不同風格在細節中都有不同的表現，需要讓這些風格特征保持高度的統一，看看下面這些案例。
第一，為圖標添加缺口的設計風格，我們要保證這個缺口的大小是一致的，并且每一個圖標中有且只有一個缺口，而不是靠感覺隨意添加。
第二，在設計一套偏圓潤可愛的設計風格中，外輪廓使用了較大的圓角，那么我們盡可能保證圓角的大小是一致的，而不是有的用 4pt，有的用 2pt 或者直接使用直角。
第三，采用了填充色偏移的設計風格中，首先要保證填充色的一致，并且偏移的距離和方向也要保持固定的規律，不能隨喜好任意制定。
透視一致
透視關系是在平面中對物體空間性質的表現方式，當我們應用了透視時，物體就有了一定的 “立體感”。
透視的表現不是繪制圖標時必須使用的風格，但是如果我們在圖標中應用了透視，就要確保我們使用的視角是一致的。要極力避免同一套圖標中既用了正視圖又包含了斜視圖。
粗細一致
在圖標中我們會應用到矩形線段或是描邊，我們要盡可能保證它們的粗細是一致的。
比如，在線性的設計中，路徑的描邊尺寸要保持一致，不能這個圖標用 2pt，那個圖標用 1pt。
在填充圖標中，我們會在一個矩形或是圓形中增加矩形的鏤空，比如下圖的幾個圖標，在這種情況下也要保證它們的粗細是一致的，而不是各不相同。
大小一致
大小一致，就是讓圖標的視覺大小保持一致，而不是它們字面上的長寬屬性保持一致。
因為這是一個比較復雜的知識點，需要我們對幾何圖形的視覺差有比較完整的認識，我會在下一部分做出介紹。這些和一致性有關的特征，是一套圖標看起來專業、有整體感的必要條件。但是，在真實的設計場景中需要靈活變通。
如果有一些特定的圖標，在保證了一致性的所有要求后卻極難被人理解，且找不到更好的設計方式，就可以差別對待。比如在一套線性的圖標中，播放、快進等圖標往往都是填充類型的，這并不會造成視覺或是使用上的困擾。
3.3 幾何圖形的視覺差
幾何圖形的視覺差，是對于工具圖標來說最重要的細節，在上一節圖標一致性中已經提及，它也是平面基礎理論中不可忽視的內容，這個理論要解決一個核心的問題，即
怎么讓不同的圖形看上去一樣大？
可能有的讀者看到這里會輕蔑一笑，這有什么難的，通過軟件的參考線或者屬性設置，把它們的長寬設置成一樣不就完事了，比如下圖這樣。
嗯，畫起來輕輕松松，參數上完美無缺。但等等，怎么看上去這些圖形大小有點不一樣，為什么正方形看起來這么大，三角形看起來這么??？
恭喜你們，發現了這個問題的根源，不同幾何圖形帶給我們的視覺大小是不同的。而要解決這樣的問題，就要對它們的尺寸做出額外的調整，比如下圖這樣。
適當調整完圓形和三角形以后，是不是覺得大小的感覺一致了？這就要牽扯一個更基礎的視覺規律，占據面積越大的圖形，給視覺的感受就越大，所以給我們感受越小的元素，就要放的越大。
并且，這個問題在一個圖形的內部也會產生影響，比如知乎 APP 下面的點贊、反對按鈕，都有三角形圖標對吧，但圖形其實對于外部舉行是非居中的，我們看看下面的演示。
如果一個圖形其中一部分面積遠大于另一部分，那么就會讓這個圖形的重心產生偏移，必須要往較小的部分的方向移動才能產生平衡。
所以，在設計一整套的應用中，如果沒有對這個理論的理解，只定義一個矩形出來，把所有圖形的尺寸于矩形對齊，那么最終看到的圖標效果一定是極度不平衡的。
3.4 工具圖標的柵格
其實，針對圖標的規范，新人第一個想到的應該就是參考線了，也就是所謂的柵格模版。但之所以放第二個，是因為工具圖標的柵格規范，是根據幾何的視覺差特性衍生出來的，而不像后面會提到的應用圖標由官方提供出來。
我們先簡單看看，常見的工具圖標柵格是什么樣的。
里面包含了正方形、長方形、圓形對不對，那我們把它們分別羅列出來看看。是不是就發現這些圖形的視覺尺寸是非常接近的？然后再通過這樣的尺寸設計對應的圖形，也就看起來都一樣大。
所以，應用圖標的柵格系統對于圖標的設計來說，是一個用來應對幾何圖形視覺差的“參照物”。
之所以要說參照物，原因在于，一套圖標，不會只存在這幾種圖形的樣式，還有很多千奇百怪的形狀，但大體上我們可以識別出來它的類似輪廓或者重心方向，于是就可以通過參照圖形來判斷我們設計出來的圖形尺寸是否符合標準。
如果設計圖形和參照圖形的類似，那么尺寸就不能大于參照圖形，如果設計圖形的寬大于參照圖，那么高就要小于參照圖，反之亦然。如果圖形的重心有偏移，那就要往重心偏移的反方向移動，比如搜索按鈕，Wifi 圖標等。
最后，說說柵格系統的畫法，和大家想象的不一樣，想要畫一套圖標，柵格系統是我們自己畫出來的，不是到網上下載下來的，所以怎么畫也是這個知識的重點。
如何繪制圖標柵格系統
如果我們定義一套 28pt（如果看不懂可以當成 28px） 的圖標，那么我們首先要畫一個 28pt 的正方形，然后確定一個 2-4pt 的內邊距，正所謂四邊留一線，日后好相見。
然后就要開始繪制其中正方形和圓形，正方形通常在整個圖標尺寸 1/2 的比例，可以使用 14 或 16 的偶數 （為了可以居中）。然后再確定圓形的尺寸，圓肯定比正方形大 2-4 pt，于是就得到下方的圖形。
之后，我們再確定橫豎長方形的尺寸，可以直接頂到內邊距的邊緣。它的尺寸不是通過數值計算的，而是要我們先畫出來，把它們和前面的圓、正方形置于一條水平線上，調整出一個平衡的視覺尺寸，再和并進柵格系統中，就完成了柵格系統的繪制，如下圖的案例。
這一步也旨在檢查我們的參考線系統是否在基礎結構上經得起考驗，是非常關鍵的一步。因為不同尺寸的圖標中，參考線系統都是有區別的，我們不能直接按一個固定的比例來設置，要根據實際場景做判斷。
當然，為了進一步方便大家的學習，我特意準備了一套現成的柵格素材，包含 16、24、28、32、36、48 等六個尺寸。大家可以進入我的主頁關注公眾號并回復 “圖標素材” 獲取。
3.5 像素對齊
在柵格的繪制中，細心的讀者肯定發現了幾個關鍵字，“對齊”、“偶數”，這就是在這一部分要提及的內容。關于顯示器的倍率問題是 UI 基礎知識點之一，可能有的同學不太了解，不過沒關系，直接看下面的內容即可。
我們都知道像素是屏幕顯示中的最小單位，一個像素只能顯示一種顏色。小時候玩過的 GBA、FC 游戲機，都是通過像素畫的形式呈現，人物鋸齒是無法避免的。
而隨著技術發展，像素密度是降低了，但如果依舊是按過去這種一個蘿卜一個坑的方式顯示內容，那鋸齒感無論如何是無法消除的。于是，開發了次像素渲染（Subpixel Rendering）的技術。一個在顯示器中讓我們覺得平滑的圓，一直放大，就可以發現它的周邊充滿了飽和度較低的其它方塊色彩。
這項技術，讓像素可以用特有的方式來顯示非完整的色塊，即盡可能還原我們對元素定義的小數點。但為什么我們還要提這個概念呢？
因為工具的圖標太小了，而且 UI 的元素對精細和準確度的要求都不低，如果我們沒有盡可能滿足像素對齊的要求，那么就可能導致元素邊緣的模糊。
所以要滿足像素對齊的要求，就要符合元素本身的尺寸為整數、描邊為整數、XY 軸坐標為整數的特性。
AI 中的像素對齊設置
在 AI 中，我們可以通過兩個設定來查看和保證像素對齊，即網格的設置顯示，以及對齊到點的設置。
像素的對齊主要表現在橫線和豎線上，雖然現在手機顯示精度越來越高，但并不意味著我們可以無視像素對齊的規律！在線性圖標中，類似對于 1pt 或者 2pt 描邊的應用，覺得不是太細就是太粗，可以用 1.5pt 的數值（1.5 pt 在 2x 中就是 3px），但切記不要出現類似 1.23、2.16、3.46 這種小數。
像素對齊是一個專業 UI 設計師對于極致追求的表現之一，是每一個一線大廠 UI 設計師的基本職能，所以，想要沖刺更高的段位，就不要忽視這個規范的使用。
這是圖標系列文章的第一篇，信息量不算少！所以我們在結尾再總結一次，方便大家記憶。
? 知識點1：在 UI 的界面中，圖標的主要作用是用來高效的傳遞信息，以及起到美化界面的作用。
? 知識點2：UI 會涉及的圖標類型主要有三種，工具圖標、裝飾圖標、應用圖標。
? 知識點3：工具圖標，是界面中用來傳遞信息的圖形符號，主要包含線性、面性、混合三種設計風格。
? 知識點4：裝飾圖標，是界面中用來提升視覺體驗的圖形，主要包含扁平、擬物、2.5D、炫彩漸變等風格。
? 知識點5：應用圖標，是用來啟動應用的圖標，主要包含文字、圖標、圖形、插畫、擬物等設計形式。
? 知識點6：學習繪制圖標，優先學習 PS、AI 的路徑相關功能，而不是 Sketch 和 XD。
? 知識點7：圖標首先要表意準確，能被用戶識別并契合想要表達的寓意。
? 知識點8：設計整套圖標的時候要符合一致性原則，包含類型、風格、粗細、透視、大小等特征。
? 知識點9：不同的幾何圖形會打給我們不同的大小視感，不能只看元素的參數。
? 知識點10：我們根據視覺差的方式定義出柵格系統，作為圖標尺寸設定的重要參考。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
表格已經是現代電子計算機系統中重要的組成部分之一，從小學開始，我們就已經在電腦課上學習如何使用 Office Excel 來制作電子表格。
那么我們為什么需要使用表格呢？因為我們有記錄和查詢數據的需求。
在任何商業活動中，都會產生大量的數據信息，雖然我們發明了 SQL、Mysql 等數據庫語言記錄數據，但最原始的數據記錄是沒有可讀性的。
所以，為了讓數據可以更好的展示，我們就必須借助可視性更強的圖形工具，即電子表格。通過 X、Y 軸構建的網格系統，將數據有序、清晰得羅列出來。
表格的重要性就體現在企業日常工作中對這些數據進行管理的需求和頻次上。
例如為電商 APP 開發了一套管理系統，那么電商運營每天的工作，都要繞著其中銷售、物流、流水等重要模塊的數據打轉，也就是圍繞著表格展開工作。
對于多數管理系統而言，數據查詢、管理都是非常重要且高頻使用的功能，所以常規項目中會包含大量的表格頁面。
甚至，有的中小型項目的所有導航一級頁面，只有表格，而不存在其它頁面形式。所以，表格的優劣對用戶工作效率和平臺體驗可以產生決定性的影響。
而優秀的 B 端項目表格又不能只像 Excel 一樣可以使用固定的模版，不同項目、頁面、模塊對表格的可視需求天差地別，需要根據具體情況具體分析。
所以，這也是 B 端設計師的價值之一。一個優秀的 B 端設計師勢必投入大量精力來提升對表格的認識和表格設計能力。
表格雖然細節設計上千差萬別，但在表現形式和閱讀順序上卻是基本一致的。
常規的表格必然包含表頭欄、列表、翻頁器三個部分，根據需求的不同，可能還會增加搜索欄、多選欄、操作欄等常見模塊。
主要是用來進行簡單的數據搜索和篩選的，當搜索項較少的時候，就可以將搜索結合到表格組件內。而搜索項較多時，則會把它們獨立成一個篩選模塊到表格組件的上方。
每個表頭代表一個對象的屬性，決定了下方每行對象要顯示的數據類型數量。
通常，表頭的設計會和下方列表設計有一定的區分，表頭文字有一定的標題屬性，所以會通過背景色、分割線、文字加粗來增強對比。
列表則是縱向排列數據對象的模塊。每個數據對象占一行，行的高度根據內容來制定。橫向列表高度和縱向表頭寬度重疊的區域稱為單元格，每個單元格展示表頭對應的數據明細。
常規 B 端項目表格都會限制列表一次展示的行數，極少使用無限滾動加載的模式。因為當數據包含成千上萬條時會對本地、服務器性能和交互方式帶來一系列的負面影響。
如果數據對象支持多選和批量操作，則我們會在第一列中添加選框，并將選中后的可操作選項放進操作欄中。
翻頁器是切換列表頁面的控件。通常大數據量的列表包含上千頁，所以翻頁器只會顯示開頭幾頁和最后一頁，省略中間的，并增加適合快速跳轉的功能。
除了表頭和列表內容外，其它模塊內容都根據實際需求應用。任何表格設計的第一步都是制定大框架，即包含的模塊和對應分布位置，再展開后續的細節設計。
B 端項目支持響應式是今天行業的普遍需求，也就是頁面內容隨著瀏覽器視圖寬度變更而變更。
不同頁面類型的響應式邏輯各不相同，而表格是其中邏輯最復雜，也最難理解的一種。
表格響應式規則通常在確定好框架以后制定，優于視覺、交互設計，因為它對視覺和交互產生的影響非常大，是前置條件而不是通過設計稿逆推出來的。
- 表格的總寬響應
- 表格的最小寬度
- 單元格的響應邏輯
- 內容的響應邏輯
上方邏輯中表格可以無限延長，但它卻不能無限的縮短，因為你不可能做一個只有 10px，20px 寬的表格。
過窄的表格不僅支持不了內容的正常顯示，也毫無任何使用體驗，所以我們要為表格確定一個最小的寬度。即瀏覽器視圖即使比這個寬度更小，表格也不會再縮小了。
如果不了解柵格的段落規則，也可以 “憑感覺” 定，最小表格寬度通常在 560-640px，當然，不管怎么定一定要提前和前端溝通，確定尺寸方案。
當表格內容少的時候，最小寬度只是相對較大寬度窄了一點而已。而當表格內容過多，最小寬度無論如何也不夠放的情況，那么就會使用橫向滾動的交互形式來隱藏超出內容。
單元格響應這是整個表格最復雜的一環，橫向內容會超出最小寬度的情況，就是由單元格規則決定的。
首先，單元格本身也有最小寬度，原因和前面一樣，1px、10px 寬的單元格沒有存在的意義。所以可以根據需要，制定多個等級的最小單元格寬度，應用在不同的數據類型中。
假設表格中包含了 20 個表頭，分別使用了 10 個最小 24px 和 10 個最小 80 px 的，那么單元格的總寬最小就是 240+800 = 1040px。
所以當父級整個表格視圖小于 1040px 的時候，內容就會不夠顯示從而觸發左右滾動的條件。 
當上級表格寬度大于單元格最小總和時，那么單元格也就會隨之變寬。最簡單的響應邏輯，就是為單元格寬設置百分比。比如 5 個單元格分別是父級寬度的 10%、10%、10%、20%、30%、20% ，那么在父級 1000px 的時候它們分別是 100px、100px、100px、200px、300px、200px。
只要確保百分比的總和是 100%，不管你單元格是比例均分（5個單元格等分各20%寬），還是獨立制定（上面案例），單元格寬都是等比縮放的狀態。
雖然好理解，但這種初級的做法帶來的問題也很多，那就是部分單元格沒有被 ”放大“ 的需求。比如常出現在第一列的多選框，或者部分標簽單元格、固定操作按鈕單元格。
于是，為了預留給有需要的單元格更多的空間，提升體驗，就會對這些單元格實施定寬的方式，剩下的單元格繼續使用等比，只是計算的方法要減去定寬元素。
比如還是一個占比 20% 的單元格，在包含 2 個 48px 定寬單元格的 1000px 表格中，實際寬為：
（1000px - 2*48） * 20% = 180px
作為單元格的子級，內容也可以獨立定義響應的規則。主要包含 3 種情況：
- 無響應
- 隱藏多余
- 換行顯示
無響應就是顯示的內容是固定的，比如多選框、縮略圖、單按鈕等單元格內容，它們沒有大小變動的必要。 
隱藏多余，則是主要應用在文本內容上，當單元格寬度小于當前文本所需寬度時，就會把多余的文字進行省略，這種做法適合應用在一些原本就不是太重要的信息上。
比如原本是 ”上海徐家匯南丹路天主教堂一樓“ 變成 ”上海徐家匯南丹路天…“，之后再通過鼠標懸浮彈出文字氣泡框的方式顯示所有文本。
而換行顯示，則是文本或多標簽狀態下，一行不夠顯示就換行的做法。除非一開始單行行高預留了多行顯示的高度，否則多行內容就會撐高單元格。
以上就是表格在響應式模式下相關知識點。
隨著經驗的積累，實戰經驗豐富的 B 端設計師，就會在前期的規范環節制定出完整的表格響應邏輯，應用到前端框架開發和后續的設計，而不是做到哪定到哪。
表格首先是一個展示信息的組件，而單純依靠布局和排版技巧，并不能解決所有的信息展示問題。所以，針對網頁表格的局限性，我們要添加一些交互的細節來提升使用體驗。
例如，單頁表格數據量較大，有好幾屏高，往下滾動后看不見表頭，不能很好的識別單元格內容。
或者，表頭屬性數量較多，需要左右滾動，但是每行數據要不然操作欄目看不見，要不然對應 ID 被滑走了等等。
所以，表格的框架就可以做懸浮固定的模式，將需要被持續露出的欄目懸浮固定。
當然，除了單獨欄目的懸浮，也可以使用混合模式，比如表頭吸頂的同時固定右側的操作欄。盡量將固定元素控制在 3 個以內，以免懸浮要素太多影響內容的瀏覽。
還要注意，除了筆記本觸摸板和少數鼠標，一般用戶是沒有頁面左右滾動滾輪的，所以當表格出現左右滾動情況以后，就一定要默認展示進度條，方便用戶操作。
我們先對這兩者做一個明確的定義：
篩選 Filter：對要顯示的內容設置篩選條件，不符合條件的將會被過濾隱藏
排序 Sort：對已有內容的顯示順序進行條件設置，不會有內容被過濾或隱藏
這看起來好像很容易理解，但會搞混的地方就在排序的應用上。我們常規以為的排序，就像電腦文件夾列表一樣，通過點擊表頭來決定內容通過哪個屬性來進行升序或者降序。
在這種 “樸素” 的設定中，篩選是以單個表頭屬性為標準的，有唯一性。比如在學生數據表格中，可以以 ID、姓名、年級、年齡或成績單個屬性進行列表排序，選中其中一個屬性其它屬性的排序就被取消了。
但是復雜的排序并不是 “唯一屬性” 的，而是多個屬性的并集，以及具備優先級和排序模式。還用學生數據表格舉例：
優先根據年齡降序排列，同年齡下根據班級升序排列，同班級再根據成績降序排列。
這里面疊加了三個屬性，年齡優先級最好，然后班級次要，成績最后，我們用圖表的展示可以實現出下面這樣的形式：
再進一步，這是我們條件已經確定才做出來的組件，要是要制定的屬性不確定，要制定的屬性數量也不確定，順序不確定，排序模式也不確定……
這種情況就肯定要應用排序自定義條件的邏輯了，而表頭自定義一加，那邏輯就立馬復雜了，它的操作面板可能就長下圖這樣。
排序復雜了，并不代表篩選就不要了。部分項目的篩選除了在表格外的獨立篩選區域，還可能應用表頭篩選模式。即以單個表頭緯度設置篩選條件，比如點擊 “年份” 表頭，設置起始和結束時間。
所以，只包含篩選的情況下，表頭的圖標就不是排序而是漏斗，點擊后就要展開篩選設置面板進行操作。 
而當多表頭篩選和多表頭排序需求并存的時候，怎么解決？
這里只建議在表頭中留存篩選選項，因為篩選可以實現并集關系，即前后任何表頭添加篩選項都可以組成完整的篩選條件。但是，這種交互難以完成篩選優先級排序。
所以，我們要將排序獨立成一個按鈕到表頭之外的地方，而不是強行讓兩者并存。尤其是不要設計出有的表頭是排序，有的表頭是篩選，甚至表頭的按鈕展開面板里又會有篩選又有排序……
表頭是針對列的操作，而針對行的操作，就是對單行列表的選擇、展開和進入了。
前面我們有說過，表格第一列往往放多選框，通過點擊選擇當前列表行。它本身的交互并沒有太多需要注意的，只要針對行的交互如果不止選擇應該如何平衡。
部分復雜項目喜歡在表格中添加 “套娃” 的需求。即單行數據可以向下展開二級數據，或者更進一步到三級、四級。 
所以當多種操作需求混合出現的時候，我們就要具體分析這些需求的優先級了。到底是多選操作頻率最高，還是查看下級行，打開詳情頁。
這是為讓點擊整個數據行這個最便捷的交互可以關聯到最高頻的操作上。而其它低頻操作的交互則只限定在對應的按鈕或圖標上即可。
因為多選需求往往需要我們在一系列數據中選擇很多條數據，一個小小的復選框不僅選擇起來麻煩，且通過查看右側的內容篩選數據行，再用右手握鼠標按需點擊最左側的多選框，是非常別扭的體驗。
還有一個需要注意的細節，就是當多選和展開下級列表共同出現的時候，選框和展開圖標的排列。
通常一個數據行第一列的內容，應該是整行邏輯層級最高的元素。如果子數據行是被獨立出來需要單選，那么展開圖標就要放到選擇前面。如果選擇數據包含了該行和所有子行，那么選擇就應該在展開圖標前面。 
最后，就是解決單元格的交互了。常見的單元格交互可以總結成下面這幾類：
- 點擊打開頁面
- 點擊復制內容
- 點擊修改內容
- 懸浮提示說明
點擊打開頁面很好理解，比如單元格內的數據是鏈接、圖片、按鈕然后實現跳轉或彈窗。
而復制內容，則有一些需要注意的細節。表格中有一些數據是沒有實際閱讀意義的，它的存在就是用來做特定的校對或者是復制出去，比如 ID 號、哈希值、訂單號等。
常規的做法是直接在右側添加一個復制圖標，但對于一些偏復雜的表格來說，所有可復制的單元格都加復制圖標是非常影響瀏覽體驗的。
所以，我的建議是都是默認隱藏復制圖標，只有當鼠標移動到對應單元格的時候會顯示。同時，這個圖標可以覆蓋到數據上層，因為既然鼠標移動過來為了復制，那么數據被遮擋在這階段自然無關緊要，為整體頁面預留空間
這樣的操作按鈕隱藏浮現方式，也適用于單元格修改的操作。但是，和復制不同，單元格信息編輯通常是編輯文本信息，還有后續的操作步驟。
如果點擊進行文本編輯，那么建議在該表格打開一個新的輸入浮窗，且浮窗內輸入框文本和原來文本位置持平實現順暢的步驟轉換。
同時建議，為了防止誤操作，盡量增加確定、取消按鈕，防止誤操作覆蓋原有數據且無法撤銷。
最后就是單元格的懸浮提示了。B 端控件中的氣泡框就是用來做提示的控件，但它只是手段。為什么需要懸浮提示，提示什么內容是我們需要考慮的。
對于及其復雜的表格來說，往往是沒辦法支持所有數據都完整展示的，我們會在使用省略號對它進行截斷。但截斷不意味著用戶完全不需要在表格查看到完整的信息。
所以，就可以通過氣泡的做法，將信息呈現給用戶。而呈現過程中，盡量確保鼠標可以移動到氣泡上復制里面的文字內容（和全部復制不一樣），而不是鼠標移走就直接關閉消失。
以上就是關于表格設計的全部說明了，作為 B 端設計最重要的模塊之一，希望大家可以學以致用。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn