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