編輯導(dǎo)語(yǔ)：B端和C端是產(chǎn)品經(jīng)理經(jīng)常接觸到的兩個(gè)話題，那么什么是B端C化呢？這篇文章從B端和C端的區(qū)別入手，詳細(xì)解答了什么是B端C化以及為什么要B端C化，一起來(lái)看看吧。
最近很流行一個(gè)詞——B端C化，解釋出來(lái)就是可以用C端的模式和思維來(lái)對(duì)B端產(chǎn)品進(jìn)行設(shè)計(jì)，討論者大致分為兩種觀點(diǎn)：
1.C端產(chǎn)品市場(chǎng)已經(jīng)趨于飽和，可拓展空間剩余不多了，B端產(chǎn)品市場(chǎng)還是一片藍(lán)海，于是產(chǎn)生了一些C端設(shè)計(jì)師轉(zhuǎn)型去做B端了，將一些C端的模式和思維帶到了B端設(shè)計(jì)中，導(dǎo)致越來(lái)越多的B端逐漸C化；
2.B端產(chǎn)品市場(chǎng)互相競(jìng)爭(zhēng)，為了在同市場(chǎng)中打出差異化，于是一些B端市場(chǎng)開(kāi)始招攬C端設(shè)計(jì)師培養(yǎng)轉(zhuǎn)型，并且嘗試融入C端產(chǎn)品的模式和思維在同市場(chǎng)內(nèi)競(jìng)爭(zhēng)，是產(chǎn)品設(shè)計(jì)的“內(nèi)卷化”現(xiàn)象，導(dǎo)致市面上的C化的B端產(chǎn)品越來(lái)越多；
但上述無(wú)論哪一種觀點(diǎn)，都在闡述一種現(xiàn)象或者趨勢(shì)：不管是交互還是視覺(jué)還是UI，目前部分C端設(shè)計(jì)師正在往B端設(shè)計(jì)師轉(zhuǎn)型。這個(gè)現(xiàn)象的發(fā)生對(duì)整個(gè)設(shè)計(jì)行業(yè)來(lái)說(shuō)無(wú)異于新增了很多新亮點(diǎn)——市場(chǎng)上越來(lái)越多的B端交互、數(shù)據(jù)可視化視覺(jué)等需求，進(jìn)而導(dǎo)致對(duì)市場(chǎng)培訓(xùn)行業(yè)開(kāi)始產(chǎn)生B端培訓(xùn)的訴求，同時(shí)也破空而出了很多優(yōu)秀的B端設(shè)計(jì)師。那么B端C化到底是什么，和傳統(tǒng)B端C端有什么區(qū)別，有這方面想法訴求的同學(xué)怎么去實(shí)現(xiàn)轉(zhuǎn)型？
由于我本人之前是做C端UI設(shè)計(jì)師，到后來(lái)轉(zhuǎn)型成為B端交互設(shè)計(jì)師，而接觸的業(yè)務(wù)恰好涉及B端和C端的聯(lián)動(dòng)以及多角色之間的協(xié)作，所以這篇文章借助結(jié)合我個(gè)人的經(jīng)驗(yàn)和看法，談一談自己對(duì)B端C化的理解。
在談B端C化之前，需要先了解B端和C端的區(qū)別是什么。B端C端的區(qū)別網(wǎng)上有很多文章和概述了，大致歸納下來(lái)主要以四個(gè)維度去區(qū)分：受眾主體、上線周期、業(yè)務(wù)類(lèi)型和產(chǎn)品側(cè)重點(diǎn)這四個(gè)維度，其余的維度也會(huì)有區(qū)分，但是影響較小，主要還是圍繞以上四個(gè)維度進(jìn)行B端和C端區(qū)分。
受眾主體也就是相對(duì)應(yīng)產(chǎn)品的用戶群體。C端的受眾主體是大眾用戶，特征為多樣化，用戶與用戶之間跨度也大，但是場(chǎng)景和路徑較為單一的，比如C端產(chǎn)品就以年齡層、城市、性別等來(lái)劃分用戶，每個(gè)階段的用戶都有不同的訴求、認(rèn)知和習(xí)慣等等；在做任何決策方面都屬于偏感性（Heart）的個(gè)人決策（Personal）；用戶穩(wěn)定性則比較差，要是對(duì)產(chǎn)品不滿意，可以立馬換另一款產(chǎn)品，轉(zhuǎn)換門(mén)檻低，有多個(gè)競(jìng)爭(zhēng)對(duì)手產(chǎn)品可供選擇；
而B(niǎo)端產(chǎn)品的受眾主體則是為組織群體，特征為多場(chǎng)景和多維度，用戶群體較為清晰明確，可以按照崗位、角色、權(quán)限等劃分用戶群，但是之間的關(guān)系更加復(fù)雜，比如設(shè)計(jì)一個(gè)銀行內(nèi)部管理系統(tǒng)，用戶群就很明確清晰——銀行各級(jí)職員角色，根據(jù)職級(jí)關(guān)系設(shè)計(jì)不同的功能以及權(quán)限；在做任何決策方面都屬于偏理性（Head）的團(tuán)隊(duì)性決策（Team）；用戶穩(wěn)定性較強(qiáng)，要是對(duì)產(chǎn)品不滿意，也只能被迫適應(yīng)和忍受，轉(zhuǎn)換成本較高，幾乎沒(méi)有其他產(chǎn)品可供選擇
上線周期就是指產(chǎn)品從需求階段到設(shè)計(jì)階段到開(kāi)發(fā)階段直至最后產(chǎn)品上線所需要的周期。
C端產(chǎn)品上線周期模式有個(gè)很明確的特點(diǎn)：快速迭代、敏捷，很多C端產(chǎn)品功能更新迭代的速度很快，上線周期非常短，往往半個(gè)月甚至一周就完成開(kāi)發(fā)上線，加上用戶群的多樣性和跨度大，所以在上線的時(shí)候往往會(huì)需要AB實(shí)驗(yàn)去驗(yàn)證方案可行性；
B端產(chǎn)品上線周期則是和C端一個(gè)對(duì)立面——長(zhǎng)，少則雙月/季度多則半年/一年等，因?yàn)锽端產(chǎn)品流程上都屬于重型流程，角色之間關(guān)系復(fù)雜，交互系統(tǒng)較為繁瑣，需求的改動(dòng)和迭代并沒(méi)有那么頻繁，也不需要像C端產(chǎn)品那樣快速上線搶占市場(chǎng)，所以B端上線周期會(huì)很慢，也導(dǎo)致在工作強(qiáng)度上相比C端較為輕松一些，但是缺點(diǎn)就是結(jié)果沒(méi)有C端來(lái)的那么快和明顯。
C端產(chǎn)品的核心競(jìng)爭(zhēng)力就是產(chǎn)品本身，關(guān)鍵總結(jié)就是讓用戶爽就完事了，所以C端產(chǎn)品的需求類(lèi)型往往圍繞用戶群的痛點(diǎn)產(chǎn)生；因?yàn)镃端用戶跨度大，不同的用戶群體有不同的痛點(diǎn)，所以導(dǎo)致C端的需求類(lèi)型不是很明確清晰，需要不斷從用戶身上去探索挖掘需求，在不斷的試錯(cuò)中逐漸得出正確的結(jié)論；
B端產(chǎn)品的核心競(jìng)爭(zhēng)力除了產(chǎn)品本身，還依賴復(fù)雜的關(guān)系、渠道、技術(shù)和資源，你的關(guān)系夠硬、渠道夠廣、技術(shù)夠領(lǐng)先、資源夠豐富，哪怕你的產(chǎn)品很一般，一樣能領(lǐng)先其他同行業(yè)的競(jìng)爭(zhēng)對(duì)手，關(guān)鍵總結(jié)下來(lái)就是讓用戶贏就夠了；B端產(chǎn)品的需求類(lèi)型雖然也是圍繞著用戶群的痛點(diǎn)產(chǎn)生，但需求的目標(biāo)是更加明確清晰的，加上需求變更的頻率、范圍往往都有契約/合同所約束，所以相較于C端產(chǎn)品來(lái)說(shuō)，B端產(chǎn)品是需求更加明確且容易達(dá)成目標(biāo)。
產(chǎn)品側(cè)重點(diǎn)無(wú)異于區(qū)分C端和B端最明顯的門(mén)檻了，C端產(chǎn)品的側(cè)重點(diǎn)主要在于體驗(yàn)，而B(niǎo)端產(chǎn)品的側(cè)重點(diǎn)主要在于效益。
前面提到過(guò)C端產(chǎn)品核心讓用戶爽就完事了，加上基于用戶更換產(chǎn)品的成本很低：你這款產(chǎn)品我用不爽就換掉了，所以C端產(chǎn)品的側(cè)重點(diǎn)永遠(yuǎn)以用戶體驗(yàn)為主，前面說(shuō)的需求業(yè)務(wù)類(lèi)型也幾乎是圍繞用戶體驗(yàn)產(chǎn)生的；大家對(duì)比市場(chǎng)上同類(lèi)型的C端產(chǎn)品，界面、交互、功能都不會(huì)差很多，是因?yàn)榻?jīng)過(guò)長(zhǎng)時(shí)間的更新迭代，已經(jīng)沉淀下來(lái)目前最好的用戶體驗(yàn)類(lèi)型了，隨著產(chǎn)品量級(jí)越大，改變用戶體驗(yàn)類(lèi)型就越謹(jǐn)慎；
C端產(chǎn)品就是為了尋找并解決用戶痛點(diǎn)、癢點(diǎn)和爽點(diǎn)，加上品牌性、用戶隱私等因素考量，產(chǎn)品側(cè)重點(diǎn)聚焦于用戶體驗(yàn)。
B端產(chǎn)品側(cè)重點(diǎn)則是圍繞效益了，因?yàn)樽鳛橐粋€(gè)團(tuán)隊(duì)使用的產(chǎn)品，不管是從易用性、功能性還是安全性，為這個(gè)團(tuán)隊(duì)解決問(wèn)題為首要基礎(chǔ)，那么使用者的體驗(yàn)、產(chǎn)品的美觀度等等相較于優(yōu)先級(jí)就沒(méi)有那么高了，所以導(dǎo)致了有一段時(shí)間大家對(duì)B端的理解依舊是老舊、丑、難用的認(rèn)知上；
B端產(chǎn)品就是為了使用產(chǎn)品的團(tuán)隊(duì)解決效率、成本、營(yíng)收的問(wèn)題，加上產(chǎn)品的穩(wěn)定性、安全性等因素的考量，產(chǎn)品側(cè)重點(diǎn)自然更聚焦在效益上。
前面了解了B端和C端產(chǎn)品的區(qū)別，接下來(lái)聊一聊什么是B端C化；簡(jiǎn)單來(lái)說(shuō)從字面意思理解就是B端的設(shè)計(jì)層面逐漸靠近C端，網(wǎng)上也有很多B端可視化、趨勢(shì)潮流的設(shè)計(jì)和文章，但是B端C化不僅僅是從視覺(jué)設(shè)計(jì)上的改良，下面我逐漸從大到小聊一下我對(duì)B端C化的理解。
在做過(guò)很多B端產(chǎn)品之后發(fā)現(xiàn)，往往很多產(chǎn)品經(jīng)理是對(duì)整個(gè)產(chǎn)品架構(gòu)、功能形態(tài)一切都清晰地了如指掌，但是有時(shí)候在搭建產(chǎn)品架構(gòu)的時(shí)候，功能形態(tài)單一粗糙，步驟復(fù)雜且笨拙；站在業(yè)務(wù)產(chǎn)品的視角來(lái)看，架構(gòu)邏輯上都是沒(méi)有問(wèn)題的，但是站在用戶視角來(lái)看，整體框架是混亂破碎的，步驟繁瑣且復(fù)雜，導(dǎo)致用戶對(duì)產(chǎn)品的認(rèn)知變差，但是又不得不去用這個(gè)產(chǎn)品，只能被迫去學(xué)習(xí)使用。
比如一個(gè)產(chǎn)品案例，就是一個(gè)產(chǎn)品的底層邏輯是前端輸入素材id，后端返還一個(gè)素材后就可以使用了，站在產(chǎn)品業(yè)務(wù)視角來(lái)看，這樣設(shè)計(jì)沒(méi)有什么問(wèn)題，符合產(chǎn)品的底層邏輯；但是站在用戶視角就特別難受了，用戶想用一個(gè)素材，還要去尋找id然后輸入搜索，像C端那樣全部鋪出來(lái)給用戶選不好嘛？
行為習(xí)慣自然是指用戶群在該行業(yè)下的行為習(xí)慣，電商行業(yè)、社交行業(yè)等等不同行業(yè)的習(xí)慣、專業(yè)術(shù)語(yǔ)等都不相同，這個(gè)在C端產(chǎn)品中都很能得到體驗(yàn)，比如電商行業(yè)的大紅大紫，社交行業(yè)的左右滑動(dòng)等等，這類(lèi)有著很明顯的行業(yè)屬性和大眾認(rèn)知，一樣是B端設(shè)計(jì)中應(yīng)該注意的點(diǎn)。
最經(jīng)典的案例就是紅色綠色的定義區(qū)分，在數(shù)據(jù)產(chǎn)品認(rèn)知中，綠色代表數(shù)據(jù)漲了，紅色代表數(shù)據(jù)跌了，比如GMV數(shù)據(jù)，DAU數(shù)據(jù)等，紅色為重點(diǎn)關(guān)注的數(shù)據(jù)；而在金融行業(yè)中，基金股票紅色代表漲了，綠色則代表跌了，所以設(shè)計(jì)的原則一定得是基于不同行業(yè)的用戶行為習(xí)慣。
B端產(chǎn)品的信息量一般是很龐大的，尤其是數(shù)據(jù)、表單、審批等B端產(chǎn)品，涉及到不同角色不同權(quán)限的開(kāi)放等，所以用戶能否能一眼看清關(guān)鍵信息，能否幫助用戶快速達(dá)成目標(biāo)，是交互層面針對(duì)信息層級(jí)的設(shè)計(jì)處理一個(gè)重要的環(huán)節(jié)。
之前很常見(jiàn)B端產(chǎn)品中信息處理的方法就是堆積處理，直接將信息、數(shù)據(jù)等平鋪展示，比如很久之前的某牛商家端后臺(tái)等老舊系統(tǒng)；現(xiàn)在很多新的B端產(chǎn)品都是以模塊化處理方法將信息層級(jí)區(qū)分，使得模塊之間間隔更明顯，信息處理的效率更高，宛若C端中的卡片式設(shè)計(jì)。
設(shè)計(jì)語(yǔ)言自然是B端設(shè)計(jì)中標(biāo)題、字號(hào)、顏色等規(guī)范標(biāo)準(zhǔn)，早些年把B端產(chǎn)品組件化后且開(kāi)源的自然是阿里老大哥了，當(dāng)時(shí)最早的AntDesign、以及后來(lái)的ElementDesign組件庫(kù)，到現(xiàn)在都被很多中小企業(yè)甚至大廠某些產(chǎn)品一直使用中，但隨著B(niǎo)端產(chǎn)品的普及和發(fā)展，越來(lái)越多的企業(yè)開(kāi)始將自己產(chǎn)品沉淀出完善成套的設(shè)計(jì)語(yǔ)言，并搭建出自己的組件庫(kù)投入使用了。
如何去衡量用戶體驗(yàn)是否是好的，最客觀來(lái)講當(dāng)然是通過(guò)數(shù)據(jù)去衡量，而數(shù)據(jù)往往在C端產(chǎn)品中很常見(jiàn)，不管是體驗(yàn)數(shù)據(jù)還是表現(xiàn)數(shù)據(jù)，都是C端產(chǎn)品中最為關(guān)注的；然而在B端產(chǎn)品中，更多收集的一般都是業(yè)務(wù)表現(xiàn)數(shù)據(jù)，幾乎沒(méi)有衡量用戶使用平臺(tái)的相關(guān)數(shù)據(jù)，大多衡量體驗(yàn)的方法都是依靠問(wèn)卷反饋的形式；但在B端C化的過(guò)程中，用戶體驗(yàn)的數(shù)據(jù)也逐漸被加入到B端產(chǎn)品當(dāng)中來(lái)，成為體驗(yàn)標(biāo)準(zhǔn)的考核之一：比如某個(gè)任務(wù)完成的時(shí)長(zhǎng)，報(bào)錯(cuò)出現(xiàn)的頻次、某某工具的使用率等
最后就是B端C化表現(xiàn)層的設(shè)計(jì)，包括目前主流的設(shè)計(jì)趨勢(shì)如大數(shù)據(jù)可視化、3D建模、材質(zhì)質(zhì)感、Dark模式等都逐漸融入到B端產(chǎn)品中，使得B端產(chǎn)品不再追求簡(jiǎn)單的“功能優(yōu)先”和“能用就行”，而是像C端那樣追求更美觀的視覺(jué)，更極致的體驗(yàn)
總結(jié)下來(lái)“B端C化”就是B端產(chǎn)品無(wú)論是從功能架構(gòu)還是視覺(jué)體驗(yàn)，越來(lái)越趨于人性考慮設(shè)計(jì)，越來(lái)越關(guān)注使用者的感受和反饋，因?yàn)檎f(shuō)白了不管B端產(chǎn)品代替成本高不高，用戶是一群專業(yè)人士還是普通職員，使用者歸根到底還是“人”在使用產(chǎn)品，那么必然會(huì)帶來(lái)體驗(yàn)相關(guān)的問(wèn)題；
所以B端C化會(huì)逐漸形成一種趨勢(shì)，在企業(yè)平臺(tái)資源支持的情況下，會(huì)將B端產(chǎn)品的功能放大，追趕市場(chǎng)競(jìng)爭(zhēng)，逐利行業(yè)內(nèi)卷，在體驗(yàn)和視覺(jué)感官上也會(huì)更加的人性化，結(jié)果自然是產(chǎn)品設(shè)計(jì)者們更加的卷了（手動(dòng)狗頭）。
無(wú)論是現(xiàn)在的B端C化還是將來(lái)其他多元的設(shè)計(jì)趨勢(shì)，隨著市場(chǎng)的競(jìng)爭(zhēng)和行業(yè)內(nèi)卷，已經(jīng)反推著設(shè)計(jì)師們不單單局限于照顧自己的“三分田地”了，無(wú)論是之前視覺(jué)設(shè)計(jì)師開(kāi)始學(xué)習(xí)3D建模，還是UI設(shè)計(jì)師嘗試接觸代碼設(shè)計(jì)，設(shè)計(jì)師最大的品質(zhì)就是應(yīng)該緊跟時(shí)代的趨勢(shì)變化，及時(shí)調(diào)整補(bǔ)充自己的能力，提升自我的競(jìng)爭(zhēng)力，才是在當(dāng)今環(huán)境下立足的根本。
文章來(lái)源：人人都是產(chǎn)品經(jīng)理 作者：雨灰
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
編輯導(dǎo)語(yǔ)：有效地利用 B 端設(shè)計(jì)系統(tǒng)，產(chǎn)品設(shè)計(jì)師將可以更高效地做出更好的交互設(shè)計(jì)。那么前段時(shí)間發(fā)布的 Arco Design 設(shè)計(jì)系統(tǒng)，和已有的阿里 Ant Design 系統(tǒng)，二者有什么區(qū)別呢？本文作者對(duì)兩大設(shè)計(jì)系統(tǒng)典型頁(yè)面發(fā)表了他的看法，一起來(lái)看一下。
前兩周字節(jié)發(fā)布了自己的中后臺(tái)設(shè)計(jì)系統(tǒng) Arco Design，在仔細(xì)閱讀官網(wǎng)文檔了過(guò)后，想和大家聊聊我自己對(duì)于 Arco Design 設(shè)計(jì)系統(tǒng)的與阿里的 Ant design 的一些對(duì)比和差異分析。
ArcoDesign 是一套設(shè)計(jì)系統(tǒng)的簡(jiǎn)稱，是基于字節(jié)跳動(dòng)所有的中后臺(tái)產(chǎn)品。ArcoDesign 主要服務(wù)于字節(jié)跳動(dòng)旗下中后臺(tái)產(chǎn)品的體驗(yàn)設(shè)計(jì)和技術(shù)實(shí)現(xiàn)，主要由 UED 設(shè)計(jì)和開(kāi)發(fā)同學(xué)共同構(gòu)建及維護(hù)。
Ant Design 是阿里打磨出的一個(gè)服務(wù)于企業(yè)級(jí)產(chǎn)品的設(shè)計(jì)體系， 通過(guò)模塊化解決方案，降低冗余的生產(chǎn)成本，讓設(shè)計(jì)者專注于更好的用戶體驗(yàn)。
Ant 和 Arco 兩者的前端框架都是基于 React 和 Vue，設(shè)計(jì)價(jià)值觀和設(shè)計(jì)原則也有所不同。Arco Design 基于「清晰」、「一致」、「韻律」和「開(kāi)放」的設(shè)計(jì)價(jià)值觀，試圖建立務(wù)實(shí)而浪漫的工作方式。在「設(shè)計(jì)價(jià)值觀」的堅(jiān)持上，Ant Design 有四點(diǎn)與眾不同：「自然」、「確定性」、「意義感」、「生長(zhǎng)性」。
我的個(gè)人理解 Arco Design 是站在設(shè)計(jì)規(guī)范的基礎(chǔ)出發(fā)點(diǎn)考慮，希望給用戶傳遞出來(lái)的價(jià)值出發(fā)，讓用戶深刻感受到系統(tǒng)是「清晰」、「一致」、「韻律」和「開(kāi)放」的，而 Ant Design 所傳遞出來(lái)的價(jià)值觀似乎更加玄學(xué)或者說(shuō)格局更高，上升到更高的思維境界，即大自然思想和社會(huì)責(zé)任。
當(dāng)然這部分的內(nèi)容相對(duì)比較虛，每個(gè)人側(cè)重點(diǎn)想法都不同，大家可以自己去理解一下這部分內(nèi)容。
接下來(lái)會(huì)從工作臺(tái)、表格、表單幾個(gè)典型高頻的 B 端界面進(jìn)行分析，看看兩者的差別。
1）布局
Arco 的卡片列布局靈活，基于 24 柵格進(jìn)行布局，將整個(gè)柵格區(qū)域 2:2:1 的比例進(jìn)行分割，信息卡片的寬度根據(jù)柵格寬度進(jìn)行自適應(yīng)，這樣的工作臺(tái)頁(yè)面既靈活也能夠滿足業(yè)務(wù)需求。
Ant 的卡片列布局采用 3:2 比例進(jìn)行布局，同樣是基于 24 柵格。目前主流的 B 端頁(yè)面都是以 24 柵格為基礎(chǔ)進(jìn)行設(shè)計(jì)。3:2 還是 2:2:1 這兩種卡片布局方式?jīng)]有絕對(duì)的優(yōu)劣，主要是根據(jù)我們頁(yè)面的信息量以及行業(yè)屬性去確定。如果工作臺(tái)所展示的單個(gè)信息量較多可采用少列大寬度進(jìn)行布局，滿足信息展示的最優(yōu)布局。
作為 B 端的工作臺(tái)頁(yè)面，核心訴求是能夠清晰找到用戶想要的信息，想要做的內(nèi)容，所以我們?cè)O(shè)計(jì)師要優(yōu)先保證用戶能夠快速定位到核心的信息，快速到達(dá)要到達(dá)的功能。
2）信息展示
Arco 針對(duì)同系列的模塊設(shè)計(jì)了兩種尺寸的間距，例如歡迎問(wèn)候信息與下方的數(shù)據(jù)信息之間是大間距，數(shù)據(jù)信息與下方的團(tuán)隊(duì)動(dòng)態(tài)最近項(xiàng)目之間是小間距。
格式塔心理學(xué)的接近原則指出：接近的事物會(huì)被認(rèn)為是同一個(gè)整體，擁有相似的功能或特征。所以在這里設(shè)計(jì)師通過(guò)兩種間距的留白對(duì)我們視覺(jué)進(jìn)行暗示，強(qiáng)調(diào)信息之間的關(guān)聯(lián)程度，便于區(qū)分信息層級(jí)。
Ant 在卡片方面沒(méi)有為卡片間距設(shè)置兩種尺寸，從上下到左右都是一種尺寸，這樣做的好處可以讓視覺(jué)更加對(duì)齊，顯得頁(yè)面更加規(guī)整，不好的一點(diǎn)就是內(nèi)容區(qū)域外間距與卡片之間的間距一樣寬視覺(jué)上并沒(méi)有聚焦，顯得內(nèi)容區(qū)域很散。標(biāo)題方面沒(méi)有進(jìn)行加粗重色強(qiáng)調(diào)，將內(nèi)容進(jìn)行突出，使用戶更加聚焦于內(nèi)容。
3）導(dǎo)航方式
兩個(gè)系統(tǒng)默認(rèn)都采用側(cè)邊欄導(dǎo)航方式，側(cè)邊導(dǎo)航在國(guó)內(nèi)的 B 端產(chǎn)品當(dāng)中最為常見(jiàn)的。將菜單欄放置在左側(cè)，頁(yè)面布局上基本為左右結(jié)構(gòu)，將導(dǎo)航菜單放置左側(cè)固定。側(cè)邊欄導(dǎo)航擴(kuò)展性強(qiáng)、展示靈活、能夠快速定位，缺點(diǎn)是不易閱讀、閱讀沉浸感低。
Arco 導(dǎo)航區(qū)域與內(nèi)容區(qū)域都使用同類(lèi)淺色，采用線的方式進(jìn)行分割，整體視覺(jué)比較清爽。Ant 導(dǎo)航區(qū)域使用了傳統(tǒng)的重色與內(nèi)容區(qū)進(jìn)行區(qū)分。
目前的設(shè)計(jì)趨勢(shì)流行淺色導(dǎo)航，有幾個(gè)產(chǎn)品的 WEB 端進(jìn)行了一系列的大改，YouTube、Twitch、Twitter 都進(jìn)行了重新設(shè)計(jì)，他們不約而同地將塊面去除，去掉多余的的灰色，通過(guò)留白和空間將頁(yè)面拉開(kāi)。這否是下一個(gè) WEB 端所要追尋的趨勢(shì)，我還不得而知，但是對(duì)于導(dǎo)航層級(jí)多的側(cè)邊欄導(dǎo)航，我仍然建議使用深色背景區(qū)分導(dǎo)航欄。
有一個(gè)細(xì)節(jié)，在頁(yè)面背景有一個(gè)以登錄的用戶名形成的一個(gè)背景水印，在 B 端的頁(yè)面中，對(duì)信息的保密程度要求很高，這里是為了防止公司核心數(shù)據(jù)資料泄露，在截圖的時(shí)候會(huì)有水印的存在，增強(qiáng)了信息的保密級(jí)別，這是一個(gè)很好的設(shè)計(jì)洞察點(diǎn)。
1）表格樣式
表格作為組織整理數(shù)據(jù)的手段，可以有效地向用戶展示數(shù)據(jù)信息，是 B 端產(chǎn)品中出現(xiàn)最高頻的模塊之一。
用戶主要通過(guò)表格瀏覽獲取信息、對(duì)數(shù)據(jù)進(jìn)行篩選、排序以及相關(guān)業(yè)務(wù)處理等更多復(fù)雜操作、對(duì)比數(shù)據(jù)的差異與變化（關(guān)聯(lián)和區(qū)別）。好的表格信息展示設(shè)計(jì)，應(yīng)當(dāng)是能夠輔助用戶高效便捷地實(shí)現(xiàn)以上場(chǎng)景中的訴求。
Arco 和 Ant 的表格設(shè)計(jì)樣式與市面上多數(shù)產(chǎn)品都類(lèi)似，采用表格列無(wú)分割線條、表頭與內(nèi)容左對(duì)齊、數(shù)字右對(duì)齊的方式。
合格的表格設(shè)計(jì)要定義合理的表格行高，在具體設(shè)定表格行高時(shí)，由于表格中以文字信息為主，我認(rèn)為可以參考文字排版的常用做法，將整個(gè)表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來(lái)考慮。
文字行高可以設(shè)定為字號(hào)的 1.2~1.8 倍，文字與分割線間距離可以設(shè)定為字號(hào)的 1~1.5 倍。
2）信息展示
表格行高決定屏幕內(nèi)能呈現(xiàn)的行數(shù)，即用戶在一屏內(nèi)能獲取信息的數(shù)量，主要影響用戶縱向?qū)Ρ葦?shù)據(jù)的效率。
在 B 端用戶使用場(chǎng)景中，數(shù)據(jù)量極大的表格的展示問(wèn)題是體驗(yàn)優(yōu)劣的關(guān)鍵因素。對(duì)于 1920*1020（包含該分辨率）以上的大屏用戶，對(duì)于一屏顯示行數(shù)的感知不強(qiáng)，但對(duì)于 1366×768、1280*720 等這類(lèi)小屏，顯示行數(shù)有限，用戶進(jìn)行縱向數(shù)據(jù)對(duì)比的效率就會(huì)有所降低。在設(shè)計(jì)前，應(yīng)當(dāng)充分了解目標(biāo)用戶的行為訴求，了解目標(biāo)用戶設(shè)備屏幕分辨率的占比分布情況，有針對(duì)性的設(shè)置行高。
B 端產(chǎn)品的特點(diǎn)之一是通用化，覆蓋用戶角色多樣。然而用戶個(gè)體對(duì)于表格信息呈現(xiàn)密度的訴求經(jīng)常是有所差異的。產(chǎn)品為了讓不同用戶都能獲得較好的體驗(yàn)，可以考慮把表格疏密度的設(shè)置開(kāi)放給用戶，建議不是完全開(kāi)放給用戶去調(diào)整尺寸，而是給出一定階梯度的快速選項(xiàng)，例如舒適、標(biāo)準(zhǔn)、緊湊三種高度來(lái)滿足用戶需求。
Ant 的表格功能很齊全，很多功能都是 B 端產(chǎn)品的痛點(diǎn)，例如表格可以通過(guò)調(diào)整單元格行高來(lái)調(diào)整密度，緊湊模式下可以顯示更多的數(shù)據(jù)。
3）操作路徑
作為一個(gè)查詢表格，我不是很理解為什么 Arco 將查詢條件放置在表格右上角這么隱秘的位置，而將明顯的左上角放一個(gè)添加按鈕，如果存在多個(gè)查詢條件是不是要從右往左放置呢？這里我不是很理解，大家也可以說(shuō)一下自己的想法，相互探討一下。
Ant 的表格使用路徑符合 F 型視覺(jué)動(dòng)線布局，在 B 端的市場(chǎng)中這種表格的設(shè)計(jì)方式已經(jīng)符合用戶的操作習(xí)慣了。
在 2006 年時(shí)候，尼爾森諾曼發(fā)表了一篇人們?nèi)绾螔呙韬烷喿x網(wǎng)站習(xí)慣的分享，他們通過(guò)研究發(fā)現(xiàn)，用戶傾向于一種 F 模式去查看網(wǎng)站。F 模式，能很好地幫我們創(chuàng)建好的視覺(jué)層次結(jié)構(gòu)設(shè)計(jì)，因?yàn)檫@是人們可以輕松掃描設(shè)計(jì)一種布局，它能讓大多數(shù)用戶感到舒適，因?yàn)槲覀冇脩粢恢睆纳系较?，從左到右閱讀。
在設(shè)計(jì)之前，我們先要去確定哪些內(nèi)容最重要，明確信息的優(yōu)先級(jí)，只有清楚知道你希望用戶看到什么，才能將它們放在用戶視線熱點(diǎn)中。
個(gè)人認(rèn)為在表格設(shè)計(jì)的完整度和設(shè)計(jì)的合理性方面來(lái)看，阿里的 Ant 系統(tǒng)做得比字節(jié)的 Arco 更好。
表單在界面中主要負(fù)責(zé)數(shù)據(jù)采集的功能，任何一個(gè)表單都可以被拆解成三個(gè)最基本要素：
標(biāo)簽（標(biāo)題）、輸入框和按鈕。
1）表單布局
Arco 的表單屬于復(fù)雜表單，當(dāng)表單條目數(shù)在 7 個(gè)以上，可歸類(lèi)到復(fù)雜表單，這時(shí)候就需要根據(jù)表單的復(fù)雜度、邏輯性、關(guān)聯(lián)性進(jìn)行判斷，選擇合適的分組方式，進(jìn)行歸納簡(jiǎn)化，降低表單填寫(xiě)負(fù)荷。采用 3 列布局，便簽與文本框上下左對(duì)齊，這樣的對(duì)齊方式有利于用戶瀏覽的效率、對(duì)齊的美觀以及國(guó)際化拓展頁(yè)面的對(duì)齊問(wèn)題。
Ant 的表單也是較為常規(guī)的布局方式，有一點(diǎn)差異就是文本框并沒(méi)有右對(duì)齊，這里阿里自己也做出了解釋：文本框是根據(jù)需要填寫(xiě)的字段進(jìn)行長(zhǎng)度展示的，需要填寫(xiě)內(nèi)容比較長(zhǎng)的文本框就會(huì)比較長(zhǎng)。實(shí)際業(yè)務(wù)中，大部分 input 所需填寫(xiě)內(nèi)容都存在理想長(zhǎng)度，input 的寬度應(yīng)該向用戶暗示所需輸入內(nèi)容的長(zhǎng)度來(lái)減輕判斷負(fù)擔(dān)。
2）標(biāo)簽對(duì)齊方式
Arco 和 Ant 都使用了頂標(biāo)簽的形式對(duì)齊。
標(biāo)簽分為左標(biāo)簽、右標(biāo)簽、頂標(biāo)簽三種，不同的對(duì)齊方式，使用場(chǎng)景不同。
該如何選擇呢？我們需要從 3 個(gè)方面進(jìn)行考慮：操作效率、標(biāo)簽長(zhǎng)度、屏效、視覺(jué)對(duì)齊。
① 操作效率
根據(jù) Matteo Penzo 的研究總結(jié)得到的瀏覽時(shí)間表發(fā)現(xiàn)，標(biāo)簽移動(dòng)到輸入框的時(shí)間，頂部對(duì)齊最快只要 50ms，其次是右對(duì)齊 240ms，左對(duì)齊耗費(fèi)時(shí)間最長(zhǎng) 500ms。
因此當(dāng)以操作效率為主時(shí)，推薦使用頂對(duì)齊的方式。
② 標(biāo)簽長(zhǎng)度
當(dāng)標(biāo)簽長(zhǎng)度超過(guò) 8 個(gè)字，或者需要考慮中英文雙版本時(shí)，推薦使用頂對(duì)齊的方式，其容納的標(biāo)簽文字更多，拓展性更好，比如 Ones 的建任務(wù)的標(biāo)簽，就采用標(biāo)簽頂對(duì)齊的方式：
③ 屏效
如果只考慮屏效，那么標(biāo)簽左對(duì)齊右對(duì)齊均可，但是如果還考慮表單錄入效率，那么推薦使用標(biāo)簽右對(duì)齊的方式，比如蜂鳥(niǎo)匯報(bào)：
Arco 的顏色主題配置可以說(shuō)是讓人眼前一亮了，可調(diào)整的范圍非常廣非常牛逼。可以編輯的維度從基礎(chǔ)的顏色、字體、陰影、 到組件的按鈕、導(dǎo)航、分類(lèi)、表格 一共有接近 40 款組件的樣式，并且都是可以進(jìn)行可視化編輯與實(shí)時(shí)預(yù)覽的。
如果你用了 Arco 過(guò)后，或許不用苦苦地站在前端后面，讓他幫忙調(diào)整頁(yè)面，作為設(shè)計(jì)師自己就能夠搞定，并且每一個(gè)組件可以調(diào)整的粒度是非常之細(xì)，包含各種寬度、圖標(biāo)大小、顏色、投影，等等…在這里可以編輯自己的主題，也可以在商城社區(qū)查看到別人發(fā)布的主題，真的是很方便啊。
真的有些 amazing！假如你需要去設(shè)計(jì)一套官方的設(shè)計(jì)系統(tǒng)，完全可以通過(guò) Arco 進(jìn)行設(shè)計(jì)和預(yù)覽、落地。
Ant 并沒(méi)有做這方面的功能，顏色主題配置這一塊確實(shí)是 Arco 很大的亮點(diǎn)。
無(wú)論是 Arco Design 還是 Ant Design 設(shè)計(jì)系統(tǒng)，都代表了字節(jié)跳動(dòng)和阿里兩家互聯(lián)網(wǎng)巨頭公司在 B 端領(lǐng)域的沉淀和競(jìng)爭(zhēng)。對(duì)于 B 端交互設(shè)計(jì)師來(lái)說(shuō)，兩個(gè)設(shè)計(jì)系統(tǒng)都值得我們?nèi)パ芯亢蛯W(xué)習(xí)，建議大家都去看看設(shè)計(jì)規(guī)范里面的內(nèi)容，對(duì)于我們認(rèn)識(shí)和熟悉控件以及和開(kāi)發(fā)對(duì)接都很有幫助。
文章來(lái)源：優(yōu)設(shè) 作者：哄哄
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
對(duì)于大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)，你的成品需要在各種類(lèi)型和尺寸的設(shè)備上進(jìn)行外觀和工作，這是顯而易見(jiàn)的。創(chuàng)建多個(gè)設(shè)計(jì)來(lái)實(shí)現(xiàn)同一目標(biāo)的日子已經(jīng)一去不復(fù)返了。
這一切都?xì)w結(jié)為選擇響應(yīng)式或自適應(yīng)設(shè)計(jì)模型，以實(shí)現(xiàn)任何規(guī)模的一致網(wǎng)站設(shè)計(jì)。
但是響應(yīng)式和自適應(yīng)之間有什么區(qū)別？它們真的只是一回事嗎？讓我們來(lái)看看并解釋你需要知道的一切。喜歡記得關(guān)注UI范，每天更新，打造你的知識(shí)武器庫(kù)！
1.與設(shè)備無(wú)關(guān)的設(shè)計(jì)的兩種方法
2.響應(yīng)式設(shè)計(jì)
現(xiàn)在比以往任何時(shí)候都更重要的是，我們正在設(shè)計(jì)旨在沿著不同體驗(yàn)的梯度觀看的作品。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)為我們提供了一條前進(jìn)的道路，最終讓我們能夠“為事物的潮起潮落而設(shè)計(jì)”。
而這正是我們目前關(guān)于響應(yīng)式網(wǎng)站的思想學(xué)派的起點(diǎn)。
無(wú)論設(shè)備或?yàn)g覽器如何，該設(shè)計(jì)都適用于任何視口尺寸。
響應(yīng)式設(shè)計(jì)對(duì)搜索引擎友好（谷歌甚至推薦它）。
允許設(shè)計(jì)中的很多精確度，以便設(shè)計(jì)師可以調(diào)整任何或每一個(gè)細(xì)節(jié)。
高度移動(dòng)友好的設(shè)計(jì)選項(xiàng)。
與你可能用于網(wǎng)站項(xiàng)目的大量主題、網(wǎng)站構(gòu)建器和工具兼容的常見(jiàn)設(shè)計(jì)實(shí)踐。
該設(shè)計(jì)將具有統(tǒng)一和無(wú)縫的外觀，這將提升整體用戶體驗(yàn)。
320 像素
480 像素
760 像素
960 像素
1,200 像素
1,600 像素
自適應(yīng)設(shè)計(jì)最常見(jiàn)的用途是將舊設(shè)計(jì)轉(zhuǎn)換為更適合移動(dòng)設(shè)備的設(shè)計(jì)。這并不是說(shuō)它不會(huì)發(fā)生在新的開(kāi)發(fā)中。
5.自適應(yīng)設(shè)計(jì)的優(yōu)點(diǎn)
由于配置錯(cuò)誤，您在設(shè)計(jì)時(shí)可能會(huì)遇到一些不太常見(jiàn)的設(shè)備（例如平板電腦）的問(wèn)題。
自適應(yīng)設(shè)計(jì)可能是勞動(dòng)密集型的，需要更多的開(kāi)發(fā)時(shí)間和成本。
由于內(nèi)容重復(fù)，搜索引擎在使用自適應(yīng)網(wǎng)站時(shí)會(huì)遇到更多困難。
有一個(gè)偷偷摸摸的現(xiàn)實(shí)，你設(shè)計(jì)同一個(gè)網(wǎng)站六次。
文章來(lái)源：站酷 作者：UI范
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
大多數(shù)網(wǎng)頁(yè)設(shè)計(jì)是以目標(biāo)為導(dǎo)向，也就是網(wǎng)頁(yè)做出來(lái)能為用戶提供什么、能解決用戶的哪些問(wèn)題。例如電商網(wǎng)站的終極目標(biāo)是賣(mài)出更多的商品，資訊類(lèi)網(wǎng)站的目標(biāo)是讓用戶能更多地閱讀最新訊息，目標(biāo)不同，兩類(lèi)網(wǎng)站在設(shè)計(jì)上也會(huì)有截然不同的差異。
在設(shè)計(jì)上，電商網(wǎng)站會(huì)更注重頁(yè)面氛圍的營(yíng)造，把紅紅火火的促銷(xiāo)氛圍搞起來(lái)，用戶看到會(huì)更興奮。
在電商網(wǎng)站中，設(shè)計(jì)重點(diǎn)放在幫助用戶瀏覽店鋪并輕松找到特定商品上，放在詳情頁(yè)上用盡可能好的方式展示商品；付款流程也經(jīng)過(guò)簡(jiǎn)化和仔細(xì)計(jì)算(例如某寶最近更新的訂單頁(yè)把價(jià)格聚集在一起)，因此用戶不需要經(jīng)過(guò)太多思考就能快速下單購(gòu)買(mǎi)。
網(wǎng)頁(yè)中炫酷的視覺(jué)效果能讓用戶印象深刻，但效果實(shí)現(xiàn)需要付出更成本。能明確知道什么時(shí)候更簡(jiǎn)潔的視覺(jué)效果能讓整個(gè)設(shè)計(jì)變得更好，能讓用戶專注于正確的事情，這一點(diǎn)很重要。
有時(shí)候在網(wǎng)頁(yè)中添加過(guò)多元素，會(huì)分散有價(jià)值的信息，用戶也難以識(shí)別他們想看的內(nèi)容。
對(duì)齊和對(duì)稱是頁(yè)面保持平衡的重要因素。對(duì)齊既保證了布局統(tǒng)一，又將有聯(lián)系的元素緊密連接起來(lái)；對(duì)稱營(yíng)造一種平衡的感覺(jué)，元素整齊有序。
網(wǎng)站的登錄注冊(cè)頁(yè)往往都設(shè)計(jì)得很簡(jiǎn)潔，有大面積的留白處理，只保留關(guān)鍵的信息輸入框，這樣用戶能更專注于輸入內(nèi)容。
在宜家網(wǎng)頁(yè)中，清晰的視覺(jué)層級(jí)結(jié)構(gòu)以及留白的運(yùn)用讓整個(gè)頁(yè)面看起來(lái)非常整潔有序。好的結(jié)構(gòu)能讓用戶知道他們?cè)诳词裁?，留白提供了視覺(jué)上的緩解作用，有助于引導(dǎo)用戶的注意力。
格式塔原理基本上定義了我們感知事物的六種不同的認(rèn)知規(guī)則。在網(wǎng)頁(yè)設(shè)計(jì)中，這意味著需要以一種合理的方式來(lái)安排元素，幫助用戶從整體上理解設(shè)計(jì)。
設(shè)計(jì)中需要考慮不同元素的對(duì)齊關(guān)系、相似元素或按鈕的排放位置、一組信息要如何展示、列表類(lèi)信息該如何展示…
另一個(gè)重要的原則是?？硕?/span>，也就是向用戶展示的選項(xiàng)越多，做出決定需要的時(shí)間就越長(zhǎng)。因?yàn)槲覀兊拇竽X需要考慮和分析所有選擇，然后再選出最好的選擇，當(dāng)選擇太多時(shí)，這就會(huì)成為一個(gè)問(wèn)題。
這就像我們?cè)诓蛷d里點(diǎn)菜一樣，如果拿來(lái)一個(gè) 20 頁(yè)的菜單，我們可能會(huì)從頭到尾把這 20 頁(yè)全看了，仍然不知道該點(diǎn)哪個(gè)，然后又把這個(gè) 20 頁(yè)的菜單重新翻一遍。去餐廳吃飯是件放松高興的事，我們肯定不想在點(diǎn)餐上給自己帶來(lái)壓力，這樣吃飯的樂(lè)趣也會(huì)大打折扣。
如果需要填寫(xiě)很長(zhǎng)的表單，考慮將長(zhǎng)表單拆分成幾個(gè)短的問(wèn)題，讓用戶按步驟依次作答，避免一下看到過(guò)多問(wèn)題給用戶帶來(lái)負(fù)擔(dān)。
網(wǎng)頁(yè)設(shè)計(jì)需要知道面對(duì)的用戶是誰(shuí)、他們想獲取什么、想處理什么問(wèn)題以及他們是想法是什么等等。
對(duì)最終用戶的印象越清晰，越有可能創(chuàng)造出成功的設(shè)計(jì)，就像設(shè)計(jì)一個(gè)面向兒童的網(wǎng)站與設(shè)計(jì)一個(gè)供老年人使用的網(wǎng)頁(yè)會(huì)完全不同。所以在一開(kāi)始，要先學(xué)會(huì)把自己的觀點(diǎn)先放在一邊，傾聽(tīng)目標(biāo)用戶的意見(jiàn)，然后再慢慢驗(yàn)證自己的想法。
抖音千人千面的推薦機(jī)制，能為用戶精準(zhǔn)推送他們感興趣的內(nèi)容，把握住了用戶的興趣，產(chǎn)品才能越來(lái)越受歡迎。
排版需要長(zhǎng)期的積累和沉淀，如何合理地安排頁(yè)面中的品牌標(biāo)識(shí)、圖片、文字等元素，是始終需要考慮的事。比如不管網(wǎng)頁(yè)設(shè)計(jì)的目標(biāo)是什么，或者選擇什么樣的視覺(jué)效果，在選擇字體時(shí)我們總要考慮字體的粗細(xì)、大小或?qū)Ρ榷鹊纫蛩亍?/span>
根據(jù)設(shè)備不同，最佳字體的選擇可能會(huì)發(fā)生變化。在移動(dòng)端設(shè)計(jì)中，文字可讀性是首要的，屏幕越小越要保證信息的可讀性。
網(wǎng)頁(yè)的導(dǎo)航設(shè)計(jì)和信息架構(gòu)共同構(gòu)成了產(chǎn)品的主干，讓用戶能夠了解產(chǎn)品和功能并找到需要的信息。
無(wú)論信息的長(zhǎng)短如何，合理的層級(jí)結(jié)構(gòu)有助于在產(chǎn)品中創(chuàng)建邏輯結(jié)構(gòu)，以便用戶可以查找信息。導(dǎo)航能反映出產(chǎn)品架構(gòu)，這樣用戶無(wú)需花費(fèi)大量精力，就能輕松找到主要信息和功能。
點(diǎn)擊按鈕之后會(huì)切換到哪一頁(yè)、怎么返回到當(dāng)前頁(yè)、點(diǎn)擊哪些按鈕頁(yè)面不跳轉(zhuǎn)。架構(gòu)流程不僅自己要明確，更需要用戶看得懂。
咱們前面提到，如果面臨的選擇太多，就需要經(jīng)過(guò)大量思考，這樣用戶很可能會(huì)變得有壓力甚至困惑。其實(shí)這里面還包含著另一層意思，過(guò)多的選擇會(huì)增加用戶的認(rèn)知成本。
只有降低認(rèn)知成本，才不會(huì)給用戶帶來(lái)過(guò)多壓力，才能快速做出判斷。在網(wǎng)頁(yè)大框架已經(jīng)設(shè)計(jì)好的基礎(chǔ)上，降低認(rèn)知成本的地方往往更在于細(xì)節(jié)。
準(zhǔn)確拿捏細(xì)節(jié)。在面包屑導(dǎo)航中，鼠標(biāo)懸浮上去是一種狀態(tài)，點(diǎn)擊后又是一種狀態(tài)；選中的標(biāo)簽與未選中的標(biāo)簽在顏色上做出區(qū)分；當(dāng)前頁(yè)碼重點(diǎn)突出的同時(shí)，告知用戶前后頁(yè)碼還支持左右切換。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
1.準(zhǔn)備工作
設(shè)計(jì)工具
Sketch
精不精通Sketch，就看插件用的溜不溜，推薦個(gè)網(wǎng)站：http://sketch.cm/
無(wú)論是學(xué)習(xí)Sketch，還是搜插件、找素材，都是Sketch使用者的優(yōu)選項(xiàng)。
Sketch是OS X平臺(tái)獨(dú)占，需要下載Sketch可以到這個(gè)網(wǎng)站去下載。
這里推薦個(gè)Mac平臺(tái)應(yīng)用的下載網(wǎng)站，使用Mac的小伙伴可以去這里下：http://xclient.info/
我個(gè)人是很推薦使用Sketch做UI設(shè)計(jì)的，軟件本身已經(jīng)提供了大量的IOS和Android系統(tǒng)設(shè)計(jì)資源，配合各類(lèi)插件，幾乎無(wú)所不能。
Photoshop
相比于Sketch來(lái)說(shuō)，體型胖了點(diǎn)，在UI設(shè)計(jì)上略遜一籌。不過(guò)因?yàn)镾ketch是OS X獨(dú)占，所以因?yàn)槠脚_(tái)限制的原因，用PS設(shè)計(jì)也沒(méi)有問(wèn)題。
我很久沒(méi)用它做UI設(shè)計(jì)了，也沒(méi)啥可推薦的了。
Adobe XD
全稱為Adobe Experience Design；這是一款集原型、設(shè)計(jì)和交互于一體的小清新時(shí)代風(fēng)格的設(shè)計(jì)軟件。雖然有人說(shuō)，Adobe XD將會(huì)是Skech的勁敵。然而在windows系統(tǒng)當(dāng)中，Adobe XD的確是產(chǎn)品原型設(shè)計(jì)領(lǐng)域最順手的設(shè)計(jì)軟件。它使用簡(jiǎn)單，界面整潔，雖然之前一直使用的是Axure 8.0，但看來(lái)，Adobe XD在界面、素材以及設(shè)計(jì)操作上的確甩了Axure好幾條街，至少它成功的吸引到了我。
做好版本管理、文件歸檔的工作
專業(yè)水平不僅體現(xiàn)在設(shè)計(jì)能力之上，優(yōu)秀的管理能力也是重要的職業(yè)素養(yǎng)。
合理規(guī)劃好設(shè)計(jì)版本，進(jìn)行明確的文件歸檔工作，有助于提高設(shè)計(jì)師的工作效率。
這里不贅述了，每個(gè)人有自己的版本管理方式，不過(guò)目標(biāo)只有一個(gè)：清晰高效。
2.關(guān)于手機(jī)的基礎(chǔ)概念
這里的概念性內(nèi)容不要強(qiáng)行記憶，理解即可，它是做移動(dòng)UI設(shè)計(jì)的理論常識(shí)。
手機(jī)分辨率
手機(jī)屏幕的像素點(diǎn)數(shù)。比如750*1334、720*1280等等，細(xì)分還有物理分辨率和邏輯分辨率，這里不擴(kuò)展講解了，想了解自行百度吧。
手機(jī)分辨率牽扯到的就是工作時(shí)設(shè)計(jì)稿的尺寸，只要記住設(shè)計(jì)尺寸就可以了。
屏幕尺寸
手機(jī)對(duì)角線的物理尺寸，單位是英寸。IPhone 6/7/8的尺寸就是4.7英寸……
屏幕尺寸和設(shè)計(jì)其實(shí)關(guān)系不大，主要是用來(lái)計(jì)算屏幕密度的。
屏幕密度(DPI或PPI)
每英寸的像素點(diǎn)數(shù)。簡(jiǎn)單理解就是屏幕密度越大，畫(huà)面越逼真細(xì)膩。
下面是屏幕密度的計(jì)算方法，范例是5英寸，分辨率為1920*1080的手機(jī)：
屏幕密度牽扯最多的是安卓系統(tǒng)，安卓手機(jī)屏幕本身的密度種類(lèi)非常多，這也是導(dǎo)致了安卓系統(tǒng)需要提供多套切圖的原因。(使用SVG格式圖片可以解決多套切圖和適配的問(wèn)題，這個(gè)我們下面會(huì)提到)
3.基礎(chǔ)設(shè)計(jì)規(guī)范——IOS系統(tǒng)
這是蘋(píng)果的開(kāi)發(fā)者官網(wǎng)：https://developer.apple.com/
這里有持續(xù)更新的最新設(shè)計(jì)規(guī)范和資源模板，雖然是全英文的，但并不影響閱讀。
設(shè)計(jì)師應(yīng)該學(xué)會(huì)從官方獲得設(shè)計(jì)資料，這比其他途徑獲得的資料更加全面和權(quán)威。
最新系統(tǒng)版本：IOS 11.4.1
中文字體：蘋(píng)方黑體
英文字體：San Francisco
官方系統(tǒng)設(shè)計(jì)模板下載：
https://developer.apple.com/design/resources/
官方系統(tǒng)設(shè)計(jì)字體下載：
https://developer.apple.com/fonts/
下圖是截止到目前，可能還需要支持的機(jī)型和對(duì)應(yīng)的設(shè)計(jì)尺寸：
設(shè)計(jì)稿尺寸
只推薦750*1334的尺寸來(lái)做設(shè)計(jì)稿，這是向上向下都最容易適配的尺寸，包括用這個(gè)尺寸去適配Android版。
除了IPhone X的比例特殊外，其他的IPhone比例幾乎差不多的，比較容易適配。
Sketch設(shè)計(jì)
使用375 * 667尺寸即可，開(kāi)發(fā)在Xcode里也是使用這個(gè)尺寸。
導(dǎo)出的@2x圖適配IPhone 5/5S/5C/SE 6/6S/7/8
導(dǎo)出的@3x圖適配Iphone 6/6S/7/8 Plus IPhone X
Photoshop設(shè)計(jì)
畫(huà)布就建成750 * 1334尺寸的即可，在這個(gè)前提之下，
導(dǎo)出原尺寸圖片加后綴@2x，適配IPhone 5/5S/5C/SE 6/6S/7/8
導(dǎo)出1.5倍圖片加后綴@3x，適配IPhone 6/6S/7/8 Plus IPhone X
常用數(shù)據(jù)
下面的內(nèi)容蘋(píng)果官方提供的模板文檔其實(shí)都有對(duì)應(yīng)的數(shù)據(jù)，可以去官網(wǎng)下載。
字號(hào)使用建議(這個(gè)不是硬性規(guī)定，根據(jù)視覺(jué)效果酌情使用)
導(dǎo)航文字 34-38px
標(biāo)題文字 28-34px
正文文字 26-30px
輔助文字 20-24px
Tab bar文字 20px
圖標(biāo)尺寸建議
APP應(yīng)用圖標(biāo)，建議使用1024*1024尺寸去做，逐級(jí)縮小去應(yīng)用到各種場(chǎng)景中。
SKetch已經(jīng)提供了IOS和Android系統(tǒng)的APP尺寸圖標(biāo)模板，直接使用就可以了。
界面適配
程序內(nèi)部的功能界面：這種界面通過(guò)寫(xiě)成自適應(yīng)的界面可以很好的適配各種機(jī)型；如果有特殊的布局要求，也可以讓開(kāi)發(fā)根據(jù)特定機(jī)型去調(diào)整，不需要單獨(dú)為各類(lèi)機(jī)型再做設(shè)計(jì)稿。
覆蓋全屏類(lèi)的界面：比如閃屏、啟動(dòng)頁(yè)、引導(dǎo)界面、插畫(huà)頁(yè)面等等，這類(lèi)覆蓋全屏的界面必須要單獨(dú)為IPhone X的比例重新繪制或者調(diào)整設(shè)計(jì)稿。
其他的IPhone機(jī)型，遇到這種界面，整體放大縮小、微調(diào)之后按照各機(jī)型的設(shè)計(jì)尺寸輸出對(duì)應(yīng)的切圖就可以了。
IPhone X的安全區(qū)域：IPhone X的安全區(qū)域就是扣除頂部劉海狀態(tài)欄和底部虛擬home鍵之后，中間的內(nèi)容顯示區(qū)域。如果你不得不使用IPhoneX的尺寸做設(shè)計(jì)稿，請(qǐng)一定設(shè)置好參考線，不要把內(nèi)容做進(jìn)這兩塊區(qū)域內(nèi)部。
IPhone X規(guī)范：iPhone X 人機(jī)交互指南及其設(shè)計(jì)細(xì)節(jié)
簡(jiǎn)單理解APP構(gòu)成
下圖是IOS開(kāi)發(fā)工具Xcode里的一個(gè)空白頁(yè)面，圖片的文字標(biāo)注請(qǐng)仔細(xì)閱讀。
本質(zhì)上，開(kāi)發(fā)寫(xiě)APP界面和設(shè)計(jì)做設(shè)計(jì)稿是一樣的，只不過(guò)兩者實(shí)現(xiàn)方法不同。
APP的構(gòu)成遠(yuǎn)遠(yuǎn)要比上圖寫(xiě)的復(fù)雜的多，我們這里使用最簡(jiǎn)單的理解方式。
設(shè)計(jì)稿的標(biāo)注
根據(jù)上圖我們可以理解設(shè)計(jì)稿和程序之間的關(guān)系：
設(shè)計(jì)稿里的按鈕、文字、圖標(biāo)、列表、背景色、線條等等所有的設(shè)計(jì)元素，
在Xcode里都有對(duì)應(yīng)的控件，設(shè)計(jì)元素必須使用對(duì)應(yīng)控件，才能在APP的界面里顯示出來(lái)。
設(shè)計(jì)稿的標(biāo)注，實(shí)質(zhì)上是標(biāo)注的各類(lèi)控件的屬性以及相對(duì)于其他控件的關(guān)系：
設(shè)計(jì)稿中：
文字的自身屬性：顏色、字號(hào)、字體、行間距、對(duì)齊方式、透明度；
圖片的自身屬性：寬高、間距、距離、透明度。
至于標(biāo)注在上篇文章有詳解：一款A(yù)PP從設(shè)計(jì)到切圖標(biāo)注適配全記錄，這里就不累贅了！
程序的對(duì)應(yīng)控件
Label的自身屬性：顏色、字號(hào)、字體、行間距、對(duì)齊方式、透明度；
Image View的自身屬性：寬高、間距、距離、透明度。
實(shí)際上各類(lèi)控件的屬性也要比這個(gè)復(fù)雜的多，這里是最簡(jiǎn)單理解的舉例說(shuō)明。
如今使用本地化插件Sketch Measure，幾乎不用手工標(biāo)注，標(biāo)注導(dǎo)出HTML后，扔給開(kāi)發(fā)，他們想看什么屬性自己點(diǎn)擊查看就是了，所以我們這里了解下標(biāo)注原理就行。
而一些線上工具的插件，比如藍(lán)湖、墨刀、Mockplus等等，功能更加豐富，各位根據(jù)自身情況靈活運(yùn)用吧。
Sketch Measure去http://Sketch.im下載
設(shè)計(jì)稿的切圖
IOS目前常用的還是輸出2套PNG圖片。@2x、@3x的后綴，是為了在Xcode導(dǎo)入圖片資源時(shí)，識(shí)別對(duì)應(yīng)機(jī)型所用的圖片。
Xcode里提供了相應(yīng)的位置，相同命名圖片會(huì)根據(jù)后綴填入到對(duì)應(yīng)的位置。
目前Sketch提供了PNG、JPG、TIFF、WebP、PDF、EPS、SVG格式。
但是對(duì)于UI設(shè)計(jì)來(lái)說(shuō)，常用的圖片格式就以下幾種：
PNG 常用圖片格式，沒(méi)什么解釋的，目前大部分產(chǎn)品還在使用此格式；
WebP 安卓的圖片格式，同等質(zhì)量圖片下體積非常小，非常推薦給安卓使用；
SVG 矢量格式，完美解決適配問(wèn)題，但也有部分缺點(diǎn)。
想具體了解WebP和SVG，可以查看之前的文章。
切圖輸出規(guī)范
前提：同一類(lèi)型、位置的切圖，請(qǐng)保證切圖尺寸、規(guī)格一致，圖片尺寸為偶數(shù)大小。
1.有操作功能、可點(diǎn)擊的功能性切圖：最小點(diǎn)擊區(qū)域問(wèn)題
蘋(píng)果官方提供的能準(zhǔn)確點(diǎn)擊的最小點(diǎn)擊區(qū)域：88 * 88px;
小于這個(gè)范圍也可以點(diǎn)擊，但是點(diǎn)擊不靈敏，體驗(yàn)較差。
對(duì)于比這個(gè)范圍小的可點(diǎn)擊按鈕，周?chē)枰猛该鲄^(qū)域填充后再輸出切圖。
解釋下為什么用透明區(qū)域填充來(lái)擴(kuò)大點(diǎn)擊區(qū)域范圍：
圖標(biāo)這東西，對(duì)設(shè)計(jì)師來(lái)說(shuō)沒(méi)區(qū)別，都是圖片。
但對(duì)開(kāi)發(fā)來(lái)說(shuō)，可操作和不可操作的圖標(biāo)是兩種類(lèi)型的控件，圖標(biāo)的樣式不過(guò)是傳給該控件的顯示圖片罷了。
可操作的功能圖標(biāo)在Xcode對(duì)應(yīng)控件是UIButton。
對(duì)控件來(lái)說(shuō)，如果不在代碼里明確固定控件的大小、點(diǎn)擊區(qū)域等等各類(lèi)屬性，設(shè)計(jì)師傳給我多大的圖，這個(gè)控件就會(huì)被這張圖撐到多大。
你給我一張40*40的按鈕切圖，如果開(kāi)發(fā)什么都不做，那這個(gè)UIButton在手機(jī)界面里就被撐到40*40的大小。
我也可以在Xcode里寫(xiě)幾行代碼，固定圖片的大小就是40*40，擴(kuò)大UIButton這個(gè)控件的大小變成88*88，這樣這個(gè)控件的點(diǎn)擊區(qū)域也擴(kuò)大了。
但是一張規(guī)范的切圖就能解決的事情，為什么還要在代碼里再手動(dòng)加幾行呢？
一個(gè)可點(diǎn)擊按鈕需要加一行代碼，整個(gè)APP就可能多加上百行上千行的代碼。
規(guī)范的切圖也是可以提升產(chǎn)品開(kāi)發(fā)效率的。
2.非功能性切圖，比如列表圖標(biāo)、說(shuō)明圖標(biāo)等，按統(tǒng)一規(guī)格的最小尺寸切。
這么切還可以減少一些程序因圖片資源大小導(dǎo)致的體積大小問(wèn)題。
這類(lèi)切圖，對(duì)應(yīng)的是UIImageView控件，就是一張圖片，無(wú)操作，只是占位和顯示。
所以你按照相同規(guī)格，最小尺寸切就可以了。
有朋友問(wèn)：一定要切正方形的嗎？如果圖標(biāo)都是30*20的，那我統(tǒng)一切30*20的行不行
答案是：可以，這個(gè)沒(méi)有完全的硬性規(guī)定。雖然我是設(shè)計(jì)師，但也會(huì)去寫(xiě)一些IOS程序。正方形規(guī)格切圖就是為了方便開(kāi)發(fā)，當(dāng)然還是推薦你使用正方形規(guī)格來(lái)切圖。
但實(shí)際開(kāi)發(fā)過(guò)程中，只要保證同一位置，切圖規(guī)格統(tǒng)一就可以。
切圖輸出狀態(tài)：
同一按鈕、元素的不同狀態(tài)，要明確命名對(duì)應(yīng)狀態(tài)之后，分別輸出對(duì)應(yīng)圖片。
下圖示例按鈕的選中狀態(tài)多出現(xiàn)在游戲APP中，這里僅表示說(shuō)明。
命名規(guī)范
不要使用中文、特殊字符，請(qǐng)使用英文、下劃線、數(shù)字對(duì)切圖命名，數(shù)字不要打頭。
命名方式盡量清晰，推薦采用：種類(lèi)_位置_功能_狀態(tài)
示例說(shuō)明：
btn_homepage_seach_normal@2x.png
開(kāi)發(fā)看到就會(huì)明白：這是位于首頁(yè)，處于正常狀態(tài)的搜索按鈕2倍切圖。
4.基礎(chǔ)設(shè)計(jì)規(guī)范——Android系統(tǒng)
這是Android Material Design中文版的地址
Android的英文版地址
最新系統(tǒng)版本：Android 9.0
中文字體：思源黑體
英文字體：Robot
Android不整理各類(lèi)機(jī)型的尺寸規(guī)范了，數(shù)據(jù)零散，難以整理。所以我們從屏幕密度這里理解設(shè)計(jì)規(guī)范就可以了。
Android手機(jī)屏幕密度
上文我們提過(guò)屏幕密度的計(jì)算方式，安卓手機(jī)因?yàn)楦鞣N屏幕尺寸和分辨率，導(dǎo)致如果單純按照數(shù)值計(jì)算，可能屏幕密度種類(lèi)會(huì)多到讓設(shè)計(jì)師崩潰。
所以為了解決這個(gè)問(wèn)題，安卓手機(jī)出廠時(shí)，屏幕有自己初始的固定密度，系統(tǒng)會(huì)根據(jù)這些屏幕密度自行適配，下圖是對(duì)應(yīng)的屏幕密度表：
Android的開(kāi)發(fā)單位以及設(shè)計(jì)尺寸
正因?yàn)锳ndroid手機(jī)分辨率多樣，為了保證同一設(shè)計(jì)在不同屏幕密度的手機(jī)上顯示效果一致，Android系統(tǒng)使用了下面兩個(gè)單位：
dp：android開(kāi)發(fā)單位，相當(dāng)于比例換算單位。使用該單位，可以保證控件在不同密度的屏幕上按照比例解析顯示成相同視覺(jué)效果；
sp：android開(kāi)發(fā)文字單位，和dp類(lèi)似，也是為了保證文字在不同密度的屏幕上顯示相同的效果。
當(dāng)屏幕密度為MDPI（160DPI）時(shí)，1dp=1px
當(dāng)屏幕密度為MDPI（160DPI）時(shí)，1sp=1px
按照上面兩個(gè)公式的換算，同樣dp大小的圖片在不同屏幕密度的手機(jī)上如下圖所示，
基本可以保證圖片顯示效果在各類(lèi)手機(jī)上相同。
設(shè)計(jì)稿尺寸
通過(guò)上面的分析，在xHDPI這個(gè)密度等級(jí)下，倍數(shù)關(guān)系為2，推薦使用720*1280尺寸做設(shè)計(jì)稿，換算方便，適配容易。
不過(guò)目前的現(xiàn)狀是，如果公司的產(chǎn)品有IOS和Android兩個(gè)版本，基本上設(shè)計(jì)師只會(huì)做IOS的版本，然后套用給Android，這樣做也是可以的。兩者的切圖，在這個(gè)設(shè)計(jì)尺寸之下是可以通用的。
設(shè)計(jì)稿的標(biāo)注
推薦使用dp和sp進(jìn)行標(biāo)注。但是呢，如果你用720*1280做設(shè)計(jì)，使用像素單位標(biāo)注，現(xiàn)在也不會(huì)影響什么。
因?yàn)榍懊嬉呀?jīng)提到過(guò)IOS的標(biāo)注了，這里也就不再贅述了。
設(shè)計(jì)稿的切圖
理論上，對(duì)于Android系統(tǒng)來(lái)說(shuō)，如果你想完美適配各種機(jī)型，應(yīng)該為不同的屏幕密度提供不同尺寸大小的切圖，而Android的開(kāi)發(fā)工具也為不同的屏幕密度提供了對(duì)應(yīng)的資源文件夾。
但實(shí)際上，并不需要提供上面密度表那么多套的切圖，程序安裝包的大小基本就是由于圖片占用了太多的位置。
所以需要提供多少套圖片，請(qǐng)和公司的開(kāi)發(fā)溝通，確定你們的產(chǎn)品實(shí)際支持哪些屏幕密度。
圖片格式
WebP和SVG
我個(gè)人是推薦現(xiàn)在為Android系統(tǒng)使用WebP格式，體積小，顯示效果好；
而SVG這種矢量圖片格式完美解決了Android多套切圖的問(wèn)題，一套切圖，完美適配各種屏幕密度。
最小可點(diǎn)擊區(qū)域
48dp：這和IOS的最小點(diǎn)擊區(qū)域性質(zhì)是一樣的，都是考慮到手指點(diǎn)擊的靈敏性的問(wèn)題，設(shè)計(jì)可點(diǎn)擊控件的時(shí)候要考慮到這一點(diǎn)。
更多的注意事項(xiàng)和IOS切圖是相同的，這里不再贅述了。
5.UI設(shè)計(jì)師的職業(yè)道路
如今的移動(dòng)UI設(shè)計(jì)行業(yè)已經(jīng)很成熟了，針對(duì)移動(dòng)UI設(shè)計(jì)的便捷工具層出不窮；移動(dòng)UI設(shè)計(jì)的理論體系知識(shí)也已經(jīng)漸漸完善。但這些都是外部因素，社會(huì)發(fā)展了，我們跟著一起向前適應(yīng)就好了；
但對(duì)于設(shè)計(jì)師工作能力的提升，還需要有明確的方法體系，更要有清晰的職業(yè)規(guī)劃！
很多設(shè)計(jì)師工作了幾年，卻一直在原地踏步，苦苦掙扎，甚至沒(méi)有職業(yè)目標(biāo)。
目前我工作5年，就從我自身的體會(huì)來(lái)分享我自己的方式，當(dāng)然資深的、精英設(shè)計(jì)就別跟我較真了，我代表的是那90%還在向上努力爬的普通設(shè)計(jì)師~
工作能力，不僅僅指的是自身的專業(yè)技術(shù)水平，還包含了各種綜合性能力，請(qǐng)務(wù)必對(duì)自己有明確的職業(yè)規(guī)劃和能力發(fā)展軌跡。
工作0~2年
這個(gè)階段對(duì)于新人來(lái)說(shuō)，是一個(gè)設(shè)計(jì)能力和工作經(jīng)驗(yàn)的快速積累過(guò)程，不夸張的說(shuō)，這兩年內(nèi)的經(jīng)驗(yàn)可以決定你之后的職業(yè)發(fā)展道路是否順利。
此階段目的：提升設(shè)計(jì)專業(yè)能力、完善理論知識(shí)、積累實(shí)際項(xiàng)目經(jīng)驗(yàn)
這個(gè)階段就別想著一專多能了，先把那個(gè)“一?！备愫镁涂梢粤耍?dāng)然不是不讓你學(xué)習(xí)別的知識(shí)，而是說(shuō)重心應(yīng)該發(fā)在提升目前的專業(yè)能力上。
提升設(shè)計(jì)能力：
一方面，通過(guò)公司的實(shí)際商業(yè)項(xiàng)目提升能力，這個(gè)沒(méi)什么可說(shuō)的；
另一方面，業(yè)余時(shí)間務(wù)必進(jìn)行大量的作品練習(xí)，無(wú)論是臨摹、還是重設(shè)計(jì)都可以，目的就是一個(gè)：量大 從優(yōu)！
臨摹請(qǐng)用高質(zhì)量作品，臨摹一堆垃圾還不如不做，臨摹請(qǐng)務(wù)必做到99%以上的相似度，不然那不叫臨摹，臨摹的過(guò)程是考驗(yàn)軟件功力、設(shè)計(jì)技法能否完美復(fù)制的過(guò)程。
重設(shè)計(jì)請(qǐng)使用成熟知名產(chǎn)品，不要重設(shè)計(jì)一堆垃圾應(yīng)用，成熟產(chǎn)品每個(gè)界面的布局、樣式、功能、邏輯都是經(jīng)過(guò)深思熟慮后呈現(xiàn)給你的。
重設(shè)計(jì)的目的是要體會(huì)產(chǎn)品背后反映的設(shè)計(jì)意圖，不是為了重設(shè)計(jì)而重設(shè)計(jì)。
所以重設(shè)計(jì)之前請(qǐng)自己思考原產(chǎn)品這么做的目的再動(dòng)手。
完善理論知識(shí)：
沒(méi)有理論體系方法的支持，在設(shè)計(jì)道路上是走不遠(yuǎn)的。
現(xiàn)在關(guān)于UI設(shè)計(jì)的知識(shí)網(wǎng)站已經(jīng)很多了，當(dāng)然不局限在這類(lèi)專業(yè)性網(wǎng)站上。
人人都是PM、UI中國(guó)、25學(xué)堂等等很多這類(lèi)網(wǎng)站都是學(xué)習(xí)理論知識(shí)的好地方。
當(dāng)然，你也可以關(guān)注我嘛~（給自己打個(gè)廣告，吼吼~）
工作2~3年
3年對(duì)于互聯(lián)網(wǎng)從業(yè)者是一個(gè)坎兒，其實(shí)這是相對(duì)于職業(yè)規(guī)劃來(lái)說(shuō)的。
通過(guò)前兩年的積累，對(duì)于UI設(shè)計(jì)本職工作已經(jīng)可以勝任了，接下來(lái)的要考慮的是個(gè)人的職業(yè)發(fā)展規(guī)劃了。
此階段目的：拓展技能、明確職業(yè)目標(biāo)、為進(jìn)大廠做準(zhǔn)備
拓展技能：
這個(gè)階段可以考慮“一專多能”的多能了，作為UI設(shè)計(jì)師，可以學(xué)習(xí)的東西實(shí)在太多了，交互、動(dòng)效、產(chǎn)品設(shè)計(jì)、開(kāi)發(fā)等等。
不要求你達(dá)到那些專業(yè)從業(yè)者的地步，你要學(xué)到專業(yè)程度，還干什么UI設(shè)計(jì)啊。
目的是為了拓展自己的技能樹(shù)，為自己提供更多的競(jìng)爭(zhēng)力，這個(gè)習(xí)慣要一直保持伴隨之后的工作……
明確職業(yè)目標(biāo)：
設(shè)計(jì)師最怕的就是迷茫，如果說(shuō)前兩年因?yàn)閯側(cè)胄校瑢?duì)行業(yè)，對(duì)自身都不完全了解，那情有可原。但工作兩年后，對(duì)自身的情況再不清醒那就說(shuō)不過(guò)去了。
可以從以下方面考慮：
是始終堅(jiān)持在一線崗位的設(shè)計(jì)技術(shù)大牛，還是想做設(shè)計(jì)管理者，亦或者想從UI設(shè)計(jì)師轉(zhuǎn)職成交互設(shè)計(jì)、產(chǎn)品設(shè)計(jì)等等。
工作兩年已經(jīng)對(duì)自身，對(duì)行業(yè)有理解了，自己的能力是否適合設(shè)計(jì)崗位，對(duì)設(shè)計(jì)的熱愛(ài)是否能經(jīng)久不變都可以作為參考調(diào)節(jié)了。
為進(jìn)入大廠做準(zhǔn)備：
剛工作，可能限制于能力實(shí)力問(wèn)題，委身于小公司。
但是！雖然我們身在小公司，但心要在BAT CAO TMD，
Apple、Google也不是不可以！
Skr！Skr！
這階段可以為大廠準(zhǔn)備一下，當(dāng)然不是讓你工作兩年多就去面試啊，如果你的能力特別突出，就當(dāng)我放屁吧~
意思是，可以以進(jìn)入大廠為目標(biāo)，綜合性的考慮自身的缺陷并盡量彌補(bǔ)。
千萬(wàn)別以為就在小公司將就著干吧，反正拿的錢(qián)也差不多，大公司的滋味你是體會(huì)不到的。
拿同樣的薪水，在小公司和大公司的感受可是完全不同的，小公司對(duì)個(gè)人的眼界、人脈、能力提升的幫助都不可能和大公司相提并論。
工作3~5年
對(duì)互聯(lián)網(wǎng)人來(lái)說(shuō)，3年一個(gè)坎，5年一個(gè)坎，都是職業(yè)規(guī)劃的節(jié)點(diǎn)時(shí)間。
3到5年的設(shè)計(jì)師，如果你真的用心工作了，一個(gè)人可以實(shí)實(shí)在在的頂起來(lái)一個(gè)項(xiàng)目。
我們上面說(shuō)，為進(jìn)入大廠做準(zhǔn)備。在這個(gè)階段，可以考慮進(jìn)入一些中大型企業(yè)，提升個(gè)人的綜合能力、拓展人脈。
部分企業(yè)也比較喜歡要這個(gè)階段的設(shè)計(jì)師，有工作能力，職業(yè)道路又剛開(kāi)始，搞不好可以在公司培養(yǎng)起來(lái)。
此階段的目的：提升綜合能力、拓展人脈圈子
這時(shí)的個(gè)人專業(yè)水平其實(shí)已經(jīng)不是問(wèn)題，繼續(xù)在工作中磨練積累就可以了；
這里需要的是打開(kāi)個(gè)人在職場(chǎng)上的道路。
說(shuō)實(shí)話，即使是互聯(lián)網(wǎng)行業(yè)，搞技術(shù)除了要保證自身技術(shù)過(guò)硬之外，會(huì)不會(huì)發(fā)展人脈，能不能提升綜合能力才是最后職業(yè)道路能不能走遠(yuǎn)走高的決定因素。
提升綜合能力：
與各部門(mén)的溝通能力、對(duì)設(shè)計(jì)資源的協(xié)調(diào)能力、在公司業(yè)務(wù)上的話語(yǔ)能力、對(duì)項(xiàng)目的把控能力等等，都算綜合能力，這是對(duì)內(nèi)部的能力。
不要以為對(duì)設(shè)計(jì)師來(lái)說(shuō)，我悶著頭接需求，做設(shè)計(jì)就可以了。
這樣的設(shè)計(jì)師，也許你可以踏踏實(shí)實(shí)當(dāng)個(gè)接需求的小設(shè)計(jì)，但你永遠(yuǎn)也只是一個(gè)這類(lèi)的設(shè)計(jì)，對(duì)于有更高更強(qiáng)的職業(yè)追求的人來(lái)說(shuō)，沒(méi)有幫助。
所以，張開(kāi)嘴、邁開(kāi)腿，一步一步嘗試去推動(dòng)自身進(jìn)步吧，這個(gè)沒(méi)什么技術(shù)性方法，必須要自己親自去做。
拓展人脈圈子：
人脈對(duì)個(gè)人職業(yè)道路的幫助，遠(yuǎn)遠(yuǎn)要比專業(yè)能力的幫助要大的多，這是對(duì)外的能力。
設(shè)計(jì)師的圈子，說(shuō)實(shí)話不算大。搞技術(shù)的，本身就坐辦公室，而做設(shè)計(jì)的人本身性格也有一部分原因，但還是請(qǐng)你努力拓展自己的人脈。
對(duì)于自身的專業(yè)圈子，努力分享自己的設(shè)計(jì)經(jīng)驗(yàn)、工作心得，總結(jié)自己的體會(huì)，發(fā)布到各類(lèi)設(shè)計(jì)專業(yè)論壇上，積極的幫助別人，這都算一種拓展方式。
時(shí)間久了，就會(huì)結(jié)識(shí)非常多的設(shè)計(jì)界朋友，設(shè)計(jì)大牛也會(huì)逐漸注意到你，這些都是你職業(yè)道路上的寶貴資源。
還可以認(rèn)識(shí)幾個(gè)不錯(cuò)的獵頭朋友，有好的職位，他們都會(huì)優(yōu)先想到你的。
作者自述
這也是我寫(xiě)的最后一篇關(guān)于基礎(chǔ)規(guī)范類(lèi)文章，也算是整理一下工作到現(xiàn)在的基礎(chǔ)常識(shí)類(lèi)內(nèi)容，以后不再寫(xiě)這類(lèi)基礎(chǔ)文章了。
人總要進(jìn)步的，設(shè)計(jì)師還是要靠干貨作品來(lái)?yè)窝?，?duì)吧。
以后發(fā)的內(nèi)容都是我做過(guò)的實(shí)際商業(yè)項(xiàng)目，我會(huì)把設(shè)計(jì)經(jīng)驗(yàn)和工作方法融入到這些作品實(shí)例里來(lái)寫(xiě)，這總比我單純講理論知識(shí)要強(qiáng)。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
寫(xiě)在前面
近幾年云計(jì)算和大數(shù)據(jù)的興起，以及政府?dāng)?shù)據(jù)化戰(zhàn)略的升級(jí)，G端逐漸出現(xiàn)在大眾視野里，受到各大互聯(lián)網(wǎng)公司、IT廠商的青睞，BAT也在2018年宣布進(jìn)軍G端市場(chǎng)，給信息化市場(chǎng)帶來(lái)了新的氣息。
由于工作需要，經(jīng)常會(huì)和客戶溝通，總結(jié)出來(lái)G端客戶有一個(gè)特性是，他們大部分為高知人群，從學(xué)歷、社會(huì)地位、經(jīng)濟(jì)收入、家庭背景等都占有相當(dāng)?shù)膬?yōu)勢(shì)，長(zhǎng)期在政府部門(mén)工作，他們習(xí)慣于政令形式、層級(jí)森嚴(yán)的環(huán)境，會(huì)有工作任務(wù)固定、重復(fù)率高、失誤率低的需求。
與toB相比，toG產(chǎn)品項(xiàng)目的特點(diǎn)是——
1/ 客戶業(yè)務(wù)主導(dǎo)性強(qiáng)
調(diào)研對(duì)象政府相關(guān)部門(mén)的領(lǐng)導(dǎo)和科員，對(duì)業(yè)務(wù)主導(dǎo)性強(qiáng)
2/ 改變用戶行為難
原系統(tǒng)運(yùn)行時(shí)間較長(zhǎng)，形成了用戶習(xí)慣，接受新系統(tǒng)難度較大
3/ 項(xiàng)目工期短
部分toG項(xiàng)目要求工期緊，系統(tǒng)需求調(diào)研、開(kāi)發(fā)時(shí)間較短
4/ 系統(tǒng)應(yīng)用阻力大
涉及原系統(tǒng)、單位內(nèi)部環(huán)境等問(wèn)題，系統(tǒng)使用過(guò)程需要長(zhǎng)期博弈
工作以來(lái)做了不少toB和toG的項(xiàng)目，這兩者相似卻又不同。
【相同點(diǎn)】
都是服務(wù)于用戶，需要站在用戶的角度分析用戶需求，為用戶解決問(wèn)題
都是要把產(chǎn)品和項(xiàng)目做好，兼顧功能的同時(shí)，使用戶體驗(yàn)更好，才能實(shí)現(xiàn)盈利
都是重功能、輕視覺(jué)，要符合產(chǎn)品的實(shí)際需求，并有效提升業(yè)務(wù)運(yùn)營(yíng)的效率
...
【不同點(diǎn)】
1/ 面對(duì)的客戶群體——
toB是面向企業(yè)客戶的，一般為企業(yè)內(nèi)部人員使用，不向大眾公開(kāi)。
toG是從toB衍生出來(lái)的一種特殊劃分，面向的企業(yè)是政府相關(guān)單位。
2/ 資金來(lái)源——
toB通常由企業(yè)撥出資金
toG通常由國(guó)家財(cái)政撥出預(yù)算，并非完全基于自身的組織或企業(yè)的資金。
3/ 決策機(jī)制——
toB一般為客戶、公司管理層
toG的話，不同層級(jí)的決策者有不同的考量，比如高層領(lǐng)導(dǎo)希望打造影響力來(lái)獲得政績(jī)，中層領(lǐng)導(dǎo)希望體現(xiàn)布局和價(jià)值，小領(lǐng)導(dǎo)希望解決自身申請(qǐng)項(xiàng)目和提升職稱等的需求，最終用戶能否用起來(lái)，反而不是很重要。所以解決方案要滿足不同層級(jí)和角色的需求。
4/ 產(chǎn)品需求——
toB滿足剛性需求并滿足一線使用者需求為主
toG非常多的產(chǎn)品功能非剛性，通常會(huì)讓研發(fā)人員難辦，因?yàn)楸容^難證明產(chǎn)品或研發(fā)價(jià)值，但在售前和控標(biāo)階段，大而全的功能又會(huì)成為各產(chǎn)品之間的軍備競(jìng)賽，最后將產(chǎn)品功能補(bǔ)齊，開(kāi)啟同質(zhì)化競(jìng)爭(zhēng)。所以更多的是滿足非剛性、但有利于搞定決策人的、有價(jià)值的功能需求。
5/ 產(chǎn)品標(biāo)準(zhǔn)化——
toB面對(duì)中小型客戶，需求淺、沒(méi)有足夠的談判籌碼，不需要定制化；大客戶的話，需求更深入，定制化不可避免。
toG比較難實(shí)現(xiàn)標(biāo)準(zhǔn)化，因?yàn)閠oG本質(zhì)上是重政績(jī)輕實(shí)用，這就導(dǎo)致相關(guān)決策人總希望做出不一樣的東西，不僅別人有的我要有，我的還要有特色。所以可以從兩方面入手，一是只做通用層能力，定制化找合作伙伴來(lái)做，保證渠道和底層能力的核心競(jìng)爭(zhēng)力；一是自建定制化團(tuán)隊(duì)，專做定制化需求，避免拖累正常的產(chǎn)品迭代。
6/ 視覺(jué)設(shè)計(jì)——
toB一般冷色系居多，整體簡(jiǎn)潔
toG要根據(jù)客戶喜好來(lái)設(shè)計(jì)，最好能體現(xiàn)單位或地方特色；視覺(jué)方面，界面不能過(guò)于簡(jiǎn)單，互聯(lián)網(wǎng)扁平化并不適用，要盡可能充實(shí)界面，但要把握「度」，不能太花哨，一般配色以紅&藍(lán)為主，莊重、大氣；內(nèi)容方面，要遵循國(guó)家相關(guān)要求和當(dāng)下政策環(huán)境，不可隨意亂造，最好是當(dāng)前業(yè)務(wù)測(cè)試內(nèi)容；交互方面，不可有過(guò)多的交互層級(jí)和特效，操作路徑要盡可能短一些，一般是一到兩個(gè)交互動(dòng)作就可以完成任務(wù)，要考慮40-50歲人群的體驗(yàn)習(xí)慣。
（這里可參考之前寫(xiě)的一篇文章，詳細(xì)介紹了簡(jiǎn)化操作路徑的案例，一站式解決問(wèn)題，有需要的同學(xué)可以看看，鏈接如下https://www.zcool.com.cn/article/ZMTIxNDg4NA==.html）
7/ 產(chǎn)品迭代——
toB一般有一定的周期
toG產(chǎn)品項(xiàng)目，一般第一次上線之后，客戶會(huì)提出一系列問(wèn)題，返工重新做的情況也是有的。所以toG很適合MVP(最小可行性產(chǎn)品)，因?yàn)檎?wù)用戶不同層級(jí)的需求和對(duì)需求的認(rèn)知不同，造成了對(duì)統(tǒng)一功能不同用戶的意見(jiàn)有很大的不同，其實(shí)第一次上線運(yùn)行就相當(dāng)于一次內(nèi)部測(cè)試，返工的時(shí)候不必太挫敗，只要做到核心業(yè)務(wù)流程和業(yè)務(wù)模塊完整即可。接下來(lái)再通過(guò)幾次的測(cè)試、收集意見(jiàn)反饋，討論決定最后的需求，這就是很多toG項(xiàng)目需要去客戶現(xiàn)場(chǎng)駐場(chǎng)的一個(gè)原因，采用小版本、多迭代、多溝通，及時(shí)解決問(wèn)題。
PS: 關(guān)于去客戶現(xiàn)場(chǎng)，這里想多說(shuō)幾句。
通常情況下，是產(chǎn)品經(jīng)理和開(kāi)發(fā)團(tuán)隊(duì)駐場(chǎng)居多，但有時(shí)候設(shè)計(jì)方面常會(huì)遇到一種情況是，客戶需求不明確。通過(guò)產(chǎn)品經(jīng)理在客戶和設(shè)計(jì)師之間來(lái)回轉(zhuǎn)達(dá)消息，效果也并不是很好，這個(gè)時(shí)候就需要設(shè)計(jì)師主動(dòng)爭(zhēng)取機(jī)會(huì)去客戶現(xiàn)場(chǎng)。有一個(gè)典型的案例是，去年做GAB的項(xiàng)目，需要設(shè)計(jì)一個(gè)登錄界面。設(shè)計(jì)稿做了很多，客戶一直不滿意，于是我申請(qǐng)到客戶現(xiàn)場(chǎng)進(jìn)行面對(duì)面溝通，去的時(shí)候會(huì)帶幾個(gè)有代表性的風(fēng)格給客戶看，先把不想要的風(fēng)格排除掉，然后把握大的設(shè)計(jì)方向。具體設(shè)計(jì)的時(shí)候同步表達(dá)自己的設(shè)計(jì)理念，一步步引導(dǎo)客戶，客戶中途一步步給意見(jiàn)建議，參與其中，這樣更容易明確需求，客戶也會(huì)覺(jué)得這是自己與設(shè)計(jì)師共同的成果，會(huì)更容易接受，做出雙方都滿意的設(shè)計(jì)，促進(jìn)驗(yàn)收，最后雙贏。
這就是那個(gè)「看起來(lái)平平無(wú)奇 · 但解決了實(shí)際問(wèn)題 · 客戶很滿意」的登陸界面，如下圖：
8/ ...
很多toG的產(chǎn)品項(xiàng)目上線后造成的客戶影響不好，這個(gè)時(shí)候要調(diào)整好心態(tài)，只要你設(shè)身處地站在用戶的角度思考，分析場(chǎng)景和需求，用我們的專業(yè)技能來(lái)解決問(wèn)題，當(dāng)你經(jīng)歷各種否定和困難最終得到客戶的認(rèn)可，這種打磨過(guò)后的成就感真的難以言喻。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
導(dǎo)語(yǔ)：提起中后臺(tái)，除了高效、靈活和強(qiáng)大之外，不可忽視的還有它的海量數(shù)據(jù)。海量數(shù)據(jù)的篩選與呈現(xiàn)，直接決定決策人員的效率高低。本文作者主要是結(jié)合自己在實(shí)際工作中遇到的表格設(shè)計(jì)問(wèn)題，針對(duì)Web端數(shù)據(jù)呈現(xiàn)方式之一，表格的設(shè)計(jì)進(jìn)行探討。
表格，是一種常見(jiàn)的信息組織整理手段。常用來(lái)展示、保存、對(duì)比分析、排序、篩選 、歸納等，是最清晰、高效的數(shù)據(jù)展現(xiàn)形式之一，由內(nèi)、外兩部分組成。
說(shuō)完表格的組成，接下來(lái)將會(huì)從易讀性和易操作性兩個(gè)方面來(lái)分析下表格設(shè)計(jì)。
表格的組成，也可以看作行與列的自由組合，這種組合賦予了表格多樣性的特點(diǎn)。行與列構(gòu)成了單元格的長(zhǎng)與高，不同的長(zhǎng)高會(huì)有疏密之分，充實(shí)與透氣之感。
B端中后臺(tái)通常會(huì)對(duì)應(yīng)不同的角色及場(chǎng)景需求，根據(jù)目的及信息主體的不同，讓用戶根據(jù)自己的需求來(lái)定義表格的展示列及列的順序，也可以通過(guò)行與列的顯隱變化，來(lái)更好的滿足信息的傳達(dá)。
但需要注意的是系統(tǒng)應(yīng)記住用戶上一次的自定義列設(shè)置，減少用戶重復(fù)操作。對(duì)于列的選擇，應(yīng)盡量減少列的數(shù)量，既要展示用戶必要信息，又要避免出現(xiàn)用戶無(wú)關(guān)數(shù)據(jù)，以免信息冗余，影響信息閱讀效率性。對(duì)于用戶需要的非重點(diǎn)、輔助性信息可以通過(guò)入口提供的方式來(lái)解決。
默認(rèn)排序，應(yīng)從用戶目的出發(fā)，遵循用戶查看數(shù)據(jù)的習(xí)慣，尊重?cái)?shù)據(jù)之間的關(guān)聯(lián)性，設(shè)計(jì)用戶查看、操作數(shù)據(jù)的路徑，而非隨機(jī)排列。
B端中后臺(tái)中的表格展示的數(shù)據(jù)多且雜，這就要為用戶先一步對(duì)數(shù)據(jù)進(jìn)行梳理歸納，提高用戶獲取信息速度。
為便于對(duì)數(shù)據(jù)進(jìn)行對(duì)比分析，一般需要在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計(jì)等數(shù)據(jù)處理結(jié)果，減少用戶二次加工數(shù)據(jù)的過(guò)程，提升用戶閱讀信息的效率。
數(shù)據(jù)匯總展示
在表頭或者表尾分別提供了總計(jì)的數(shù)據(jù)，方便用戶進(jìn)行快速查閱。
數(shù)據(jù)對(duì)齊展示
常用對(duì)齊方式有數(shù)字右對(duì)齊，文字左對(duì)齊，混合型文本左對(duì)齊，列標(biāo)簽的對(duì)齊方式與數(shù)據(jù)的對(duì)齊方式保持一致。這樣能形成的視覺(jué)邊界線，便于視線的流動(dòng)，從而快速提升數(shù)據(jù)的瀏覽、對(duì)比效率。
空數(shù)據(jù)展示
B端中后臺(tái)數(shù)據(jù)類(lèi)型較多，對(duì)于空數(shù)據(jù)，切忌不要與數(shù)據(jù)為“０”進(jìn)行混淆，對(duì)于空數(shù)據(jù)通用做法是用“－”表示，而不是什么都不顯示，會(huì)讓用戶誤以為是沒(méi)有數(shù)據(jù)還是“0”數(shù)據(jù)。
最好做法就是為空數(shù)據(jù)做出釋義，可以加在“列標(biāo)簽”的名詞解釋文案中。
數(shù)據(jù)的關(guān)鍵屬性標(biāo)識(shí)展示
對(duì)于用戶重點(diǎn)關(guān)注的數(shù)據(jù)狀態(tài)、上升和下降等，可以用符號(hào)進(jìn)行標(biāo)識(shí)，幫助用戶快速定位到目標(biāo)信息。
在有限屏幕內(nèi)，有限的內(nèi)容展示區(qū)域內(nèi)，閱讀豐富且繁多的表格時(shí)，用戶不得不拖動(dòng)橫向或縱向滾動(dòng)條來(lái)閱讀信息。
固定表頭、固定列和固定分頁(yè)，能夠讓用戶明白當(dāng)前單元格內(nèi)信息的屬性而不至于不知道該信息的意思。
固定表頭
在固定的小區(qū)域內(nèi)滾動(dòng)會(huì)非常局促，而且區(qū)域滾動(dòng)和全屏滾動(dòng)同時(shí)存在時(shí)體驗(yàn)也很不好。固定表頭可幫助用戶識(shí)別信息，在全屏滾動(dòng)上去后固定表頭，有利于用戶向下翻屏?xí)r能夠便利的閱讀數(shù)據(jù)。
固定列
固定列的內(nèi)容可視業(yè)務(wù)及目標(biāo)用戶的訴求而定，一般采用方法是固定比較重要信息，方便用戶進(jìn)行數(shù)據(jù)定位與對(duì)比，最好可以讓用戶自定義，滿足不同用戶訴求。
固定分頁(yè)
分頁(yè)處理目前有放在上部、下部或上下部均有，需要根據(jù)場(chǎng)景來(lái)選擇。分頁(yè)固定目的是為了省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。
特別是可以自定義每頁(yè)的數(shù)量和需要橫向拖動(dòng)數(shù)據(jù)查看，這就需要把分頁(yè)固定在底部，方便用戶橫向拖動(dòng)滑條查看信息和進(jìn)行翻頁(yè)操作。
在Web端中的表格，涉及到跨頁(yè)的數(shù)據(jù)操作時(shí)，分頁(yè)會(huì)帶來(lái)不便。
但往往受限于數(shù)據(jù)加載的壓力，這種情況在大廠中尤其突出，加載數(shù)據(jù)都是億量級(jí)別的，在Web端和手機(jī)端都需要實(shí)時(shí)下載數(shù)據(jù)的終端，我們通常做法就是提供分頁(yè)展示數(shù)據(jù)來(lái)緩解服務(wù)器的壓力。
表格中的的數(shù)據(jù)內(nèi)容超過(guò)一定“數(shù)量”時(shí)需要提供翻頁(yè)功能，而這個(gè)“數(shù)量”是由表頭的數(shù)據(jù)的高度、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來(lái)決定。
原則上整張表不要超過(guò)一屏，考慮到每個(gè)用戶的使用習(xí)慣，我們一般提供可以讓用戶自定義每頁(yè)的顯示的數(shù)量，相比于跨屏翻頁(yè)而言，向下滾屏?xí)憷?，也更符合瀏覽信息路徑。
表格全屏展示是非常有必要的：
在大量的表格信息中，如果沒(méi)有篩選查找信息簡(jiǎn)直猶如大海撈針，而表格跟篩選是不分家的。
說(shuō)到表格一定會(huì)說(shuō)到篩選，篩選也就是數(shù)據(jù)過(guò)濾，常在數(shù)據(jù)量較大的場(chǎng)景中使用，其目的是通過(guò)關(guān)鍵字搜索和條件篩選能夠幫助用戶快速的找到所需要的信息內(nèi)容。
對(duì)于表格外部篩選，如果有時(shí)間會(huì)單獨(dú)出一篇詳情介紹。這里不展開(kāi)詳細(xì)說(shuō)。
篩選根據(jù)篩選功能的位置不同，可分為表外篩選和表內(nèi)篩選。
在信息列數(shù)較多的情況下，數(shù)據(jù)的選擇就尤為重要。當(dāng)鼠標(biāo)指針懸停在表格列或行時(shí)，給予視覺(jué)狀態(tài)的變化提示，可以讓用戶捕捉到所在的位置，而不至于視覺(jué)上的錯(cuò)行，能夠降低人的心理壓力和增加掌控感。根據(jù)數(shù)據(jù)選擇功能分為單個(gè)選擇和批量選擇。
單個(gè)選擇
鼠標(biāo)指針懸停在整行時(shí)應(yīng)與默認(rèn)態(tài)有所區(qū)分。當(dāng)標(biāo)識(shí)選中行或選中行的數(shù)量，選中行可操作的命令狀態(tài)須同步，明示當(dāng)前行可操作的命令或反饋當(dāng)前已選行的數(shù)量。
批量選擇
提供選擇當(dāng)前頁(yè)部分行、選擇全部行、取消選擇全部行三種功能；狀態(tài)反饋分為半選態(tài) 、未選態(tài)、全選態(tài)共三種。
對(duì)于數(shù)據(jù)的操作，主要針對(duì)表格內(nèi)部來(lái)說(shuō)。表格操作大體可分為顯性操作和隱形操作。
顯性操作
指操作選項(xiàng)顯示在行內(nèi)，優(yōu)點(diǎn)是明顯直觀，可以根據(jù)列表上的信息做出快速的判斷并且高頻發(fā)生的操作。
適用列數(shù)較少的列表。但弊端是信息過(guò)載，尤其是列數(shù)較多，可展示列數(shù)會(huì)隨操作數(shù)增加而減少，同時(shí)誤操作率較高。對(duì)于危險(xiǎn)系數(shù)比較高的操作，也不建議采用這種設(shè)計(jì)。
隱性操作
當(dāng)鼠標(biāo)懸?；螯c(diǎn)擊時(shí)才顯示其他低頻、高危的操作選項(xiàng)，優(yōu)點(diǎn)是界面簡(jiǎn)潔明快，信息密度低，可以幫助頁(yè)面突出更加重要的信息，可減輕空間壓力，減少干擾。
弊端是增加用戶的點(diǎn)擊次數(shù)和提高了操作門(mén)檻。列數(shù)較少的表格不適用隱性操作。
為方便用戶對(duì)數(shù)據(jù)進(jìn)行再次整合分析、統(tǒng)計(jì)分析等，可提供數(shù)據(jù)下載功能及多種下載格式。
對(duì)于B端中后臺(tái)來(lái)說(shuō)，表格顯示最多就是兩種情況：一種就是表格有數(shù)據(jù)，這種最容易解決，有數(shù)據(jù)就顯示相應(yīng)數(shù)據(jù)；還有一種表格是沒(méi)有數(shù)據(jù)，也就是空表狀態(tài)，這也是讓很多設(shè)計(jì)師容易忽略掉的頁(yè)面。
空表分兩種：可創(chuàng)建和純展示
可創(chuàng)建
是用戶有創(chuàng)建訴求，數(shù)據(jù)是由用戶或系統(tǒng)產(chǎn)生的，可創(chuàng)建分兩種：
純展示
沒(méi)有創(chuàng)建訴求的，數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無(wú)數(shù)據(jù)。
看上去平淡無(wú)奇的數(shù)據(jù)表格，其實(shí)是非常重要的，通過(guò)合理的組織架構(gòu)和呈現(xiàn)方式，使原本枯燥的數(shù)據(jù)呈現(xiàn)出生命力，這是一件很神奇的事。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
為什么了解網(wǎng)頁(yè)布局很重要？網(wǎng)頁(yè)布局在很大程度上決定了網(wǎng)站的訪問(wèn)者將如何與網(wǎng)頁(yè)內(nèi)容進(jìn)行交互。
這里將介紹一些常見(jiàn)的網(wǎng)頁(yè)布局形式，例如卡片式、分屏布局、網(wǎng)格布局……一起來(lái)看看吧！
卡片式布局被Pinterest、臉書(shū)和推特等網(wǎng)站所使用，它非常適合在新聞網(wǎng)站和博客上使用，因?yàn)榭ㄆ讲季挚梢栽陧?yè)面上放置大量?jī)?nèi)容，同時(shí)又保持每部分內(nèi)容各不相同。
卡片式布局主要有兩種形式：
網(wǎng)頁(yè)中每個(gè)卡片的尺寸相同，卡片的排列非常標(biāo)準(zhǔn)，例如Dribbble的網(wǎng)頁(yè)布局；
使用不同尺寸的卡片組成頁(yè)面的布局，卡片間沒(méi)有固定的排序，例如Pinterest、花瓣的頁(yè)面布局。
當(dāng)兩個(gè)元素在頁(yè)面上具有相等的權(quán)重時(shí)，分屏布局是一種流行的設(shè)計(jì)選擇，并且通常用于文本和圖像都需要突出顯示的設(shè)計(jì)中。
分屏設(shè)計(jì)特別適合電子商務(wù)網(wǎng)站上的產(chǎn)品頁(yè)面。產(chǎn)品圖片需要在頁(yè)面上突出顯示，但價(jià)格、規(guī)格、購(gòu)物車(chē)按鈕等信息也要顯示。
隨著移動(dòng)設(shè)計(jì)的盛行，大標(biāo)題排版變得流行起來(lái)。大號(hào)字體在標(biāo)題中特別流行，在一些網(wǎng)站的正文中也能看到。
較大的文本更具可讀性，可以改善使用體驗(yàn)。另外它還提供了強(qiáng)大的視覺(jué)效果，因此這種布局在極簡(jiǎn)主義設(shè)計(jì)中特別受歡迎。
個(gè)性化算法推薦可以根據(jù)每個(gè)人的喜好量身定制數(shù)字體驗(yàn)。人工智能技術(shù)的發(fā)展讓算法變得更易用，能精確分析用戶的喜好。
根據(jù)用戶之前的訂閱習(xí)慣，Netflix可以為用戶個(gè)性化推薦他們最有可能觀看的電影。
像Medium這樣的網(wǎng)站會(huì)基于用戶以前閱讀和喜歡的內(nèi)容，向他們展示很多同類(lèi)型的文章。
網(wǎng)格為設(shè)計(jì)提了視覺(jué)上的平秩序感，以一種平衡且有組織的方式呈現(xiàn)內(nèi)容，使內(nèi)容更易于人們使用。
在網(wǎng)格設(shè)計(jì)中使用不同大小的內(nèi)容可以在保持內(nèi)容有序的同時(shí)增加視覺(jué)吸引力。
雜志和期刊的布局方式影響了網(wǎng)絡(luò)雜志的版面設(shè)計(jì)。這些網(wǎng)頁(yè)布局很適合有大量?jī)?nèi)容的網(wǎng)站，尤其是每天都需要更新內(nèi)容的網(wǎng)站。
單頁(yè)布局將網(wǎng)站的所有主要內(nèi)容放在一個(gè)網(wǎng)頁(yè)上，通過(guò)滾動(dòng)完成導(dǎo)航，有時(shí)還使用視差滾動(dòng)效果。
對(duì)于內(nèi)容稀疏的網(wǎng)站，單頁(yè)布局是一個(gè)很好的解決方案。同時(shí)它也是內(nèi)容敘事的完美選擇，比如交互式兒童讀物。
F型和Z型布局是指用戶的視線如何在頁(yè)面上移動(dòng)，即用戶如何掃描內(nèi)容。F型布局有非常明確的視覺(jué)層次結(jié)構(gòu)，因此適合內(nèi)容更多的頁(yè)面。
Z型布局將視線吸引到頂部，然后沿對(duì)角線方向向下延伸到底部，然后再次延伸。
在設(shè)計(jì)中，不對(duì)稱會(huì)產(chǎn)生動(dòng)態(tài)化的視覺(jué)沖擊力。大多數(shù)情況下不對(duì)稱是由于圖像和文本間無(wú)法平衡而造成的。
由于不對(duì)稱會(huì)產(chǎn)生動(dòng)態(tài)的、充滿活力的視覺(jué)印象，因此對(duì)那些想要傳達(dá)這種形象的品牌來(lái)說(shuō)是非常有用的。
這種布局的優(yōu)點(diǎn)在于完全專注于內(nèi)容，沒(méi)有視覺(jué)上的混亂。
干凈簡(jiǎn)單的布局幾乎適用于任何類(lèi)型的網(wǎng)站。許多優(yōu)雅的網(wǎng)站都可以被認(rèn)為是“簡(jiǎn)潔的”，無(wú)論它們包含什么設(shè)計(jì)形式。
導(dǎo)航標(biāo)簽適合用于包含少數(shù)項(xiàng)目的菜單，否則導(dǎo)航會(huì)顯得很混亂。
輪播內(nèi)容包含圖像和文本，通常出現(xiàn)在網(wǎng)站的頂部，用來(lái)突出顯示內(nèi)容。
好的網(wǎng)頁(yè)設(shè)計(jì)具有很強(qiáng)的適應(yīng)性并且對(duì)用戶來(lái)說(shuō)始終是友好的。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
無(wú)論作為設(shè)計(jì)師還是普通瀏覽者，大家觀看一個(gè)網(wǎng)站時(shí)最先接觸到的就是網(wǎng)頁(yè)的頭部區(qū)域，這部分內(nèi)容為網(wǎng)站的其他各個(gè)方面設(shè)定了基調(diào)，在網(wǎng)頁(yè)設(shè)計(jì)中起著非常關(guān)鍵的作用。
尤其是如今簡(jiǎn)潔設(shè)計(jì)比較盛行，多數(shù)時(shí)候把頭部?jī)?nèi)容設(shè)計(jì)好就變成了吸引用戶眼球最好的辦法。網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站頭部時(shí)投入了大量精力，同時(shí)要兼顧創(chuàng)造力和實(shí)用性。根據(jù)一項(xiàng)Google的研究，用戶只需要短短數(shù)秒就可以形成對(duì)一個(gè)網(wǎng)站的看法，甚至有些觀點(diǎn)是在令人難以置信的1秒內(nèi)形成的。用戶對(duì)品牌的了解就是從這么短的時(shí)間內(nèi)開(kāi)始的。
在通常網(wǎng)頁(yè)設(shè)計(jì)中，首頁(yè)上方的整個(gè)空間都被視為頭部區(qū)域。作為人們?cè)诩虞d網(wǎng)站后的最初幾秒內(nèi)看到部分，頭部信息起到了一種邀請(qǐng)作用，它應(yīng)該提供有關(guān)網(wǎng)站的基本信息，以便用戶能夠在幾秒內(nèi)了解網(wǎng)站的主要內(nèi)容。
如果以招聘活動(dòng)站點(diǎn)為例，整個(gè)頭部區(qū)域設(shè)計(jì)要明確傳達(dá)企業(yè)形象，及本次招聘活動(dòng)的特點(diǎn)。給瀏覽者一個(gè)強(qiáng)烈的視覺(jué)印象，企業(yè)已向你發(fā)出邀請(qǐng)，我們對(duì)人才十分渴求，等等信息… 如果有線上線下活動(dòng)同時(shí)參與，那么在整體風(fēng)格上盡量保持一致。
網(wǎng)頁(yè)頭部的任務(wù)是給用戶提供一些基本問(wèn)題的答案：代表什么品牌，提供什么服務(wù)等等。如果我們?cè)趦?nèi)容上引起了用戶情感上的共鳴，那么就是正確的設(shè)計(jì)。
那么主要元素通常包括：
在設(shè)計(jì)網(wǎng)站頭部?jī)?nèi)容時(shí)，從思維層面來(lái)講沒(méi)有任何東西會(huì)限制你的創(chuàng)造力，它應(yīng)該是令人難忘的、簡(jiǎn)潔和兼具實(shí)用性的，是一個(gè)可以展示創(chuàng)造性的開(kāi)放領(lǐng)域。
下面讓我們一起來(lái)看看頭部?jī)?nèi)容設(shè)計(jì)的一些技巧。
1. 關(guān)于尺寸
對(duì)于網(wǎng)頁(yè)頭部圖片的大小是沒(méi)有統(tǒng)一的答案。有時(shí)候設(shè)計(jì)師希望提供相對(duì)固定的數(shù)字，但網(wǎng)頁(yè)設(shè)計(jì)最大的難點(diǎn)之一是很難確保每個(gè)屏幕尺寸的有效性。即使兩個(gè)屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內(nèi)容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經(jīng)驗(yàn)積累的常識(shí)規(guī)則。
頭部的高度本著不干擾內(nèi)容感知的基本原則。對(duì)于一些展示信息資源的頁(yè)面，較小的頭部區(qū)域是一個(gè)不錯(cuò)的選擇，而對(duì)于落地頁(yè)或者企業(yè)客戶首頁(yè)，頭部區(qū)域可能會(huì)更大，而且多數(shù)大客戶會(huì)有主視覺(jué)單屏展示頁(yè)。
如果某些網(wǎng)頁(yè)，例如落地頁(yè)頭部?jī)?nèi)容較長(zhǎng)的情況下，最好在首屏給下一屏內(nèi)容露出一些空間，這樣用戶就可以意識(shí)到下一頁(yè)還有內(nèi)容，引導(dǎo)用戶滾動(dòng)。
2. Logo展現(xiàn)
當(dāng)一個(gè)人發(fā)現(xiàn)自己在陌生網(wǎng)站上，總是習(xí)慣于從屏幕的左上角開(kāi)始瀏覽網(wǎng)站。盡管設(shè)計(jì)師有時(shí)候認(rèn)為打破常規(guī)的布局也可以帶來(lái)不錯(cuò)的效果，但是多數(shù)用戶如果他們常規(guī)位置找不到預(yù)期的信息，將會(huì)不假思索地認(rèn)為這個(gè)頁(yè)面是難用的和不規(guī)范的，需要花費(fèi)很多的努力才能理解。這就要看你的設(shè)計(jì)目的和受眾群體能夠接受哪些程度的變化，我們今天主要說(shuō)大多數(shù)受眾。
Logo ——與居中或右側(cè)放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側(cè)要低。
3. 吸頂導(dǎo)航欄
吸頂導(dǎo)航，換句話說(shuō)就是「粘性標(biāo)題」，當(dāng)你滾動(dòng)頁(yè)面時(shí)，導(dǎo)航區(qū)在頁(yè)面中跟隨，現(xiàn)在成為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)。如果不違反網(wǎng)站整體設(shè)計(jì)理念，請(qǐng)將導(dǎo)航欄吸頂固定。無(wú)論是PC端還是移動(dòng)端設(shè)計(jì)，這都是一個(gè)好的選擇：
可根據(jù)頁(yè)面內(nèi)容展示要求，向下滾動(dòng)時(shí)調(diào)整導(dǎo)航背景透明度，盡量少的影響內(nèi)容展示同時(shí)使頁(yè)面看起來(lái)更生動(dòng)和通透。還可以在滾動(dòng)時(shí)簡(jiǎn)化導(dǎo)航欄樣式或高度，使用戶能找到但又不過(guò)于搶眼。
總之，固定導(dǎo)航欄有助于提升用戶體驗(yàn)，保持用戶導(dǎo)向并給予了他們更多控制權(quán)。
3. 關(guān)于圖片的應(yīng)用
頭部?jī)?nèi)容所用圖片可以選擇直接和要表達(dá)的業(yè)務(wù)相關(guān)性很強(qiáng)的，例如招聘類(lèi)網(wǎng)站使用招聘場(chǎng)景圖片；也可以選擇中性感覺(jué)的例如辦公場(chǎng)景、城市風(fēng)景類(lèi)圖片進(jìn)行虛化降低清晰度或明度來(lái)突出前景內(nèi)容；
高質(zhì)量圖片——攝影對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō)是一個(gè)強(qiáng)大的工具。它可以講述一個(gè)故事，喚起用戶的情感，并鼓勵(lì)訪問(wèn)者進(jìn)一步滾動(dòng)。對(duì)于那些有強(qiáng)烈沖擊力的圖片的網(wǎng)站，試著做一個(gè)透明的標(biāo)題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業(yè)業(yè)務(wù)的出色照片，這種方式就沒(méi)錯(cuò)！企業(yè)希望用戶可以滾動(dòng)瀏覽一組精美的高分辨率圖像。
插畫(huà)——網(wǎng)站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯(lián)系。如果圖片是獨(dú)特的且易于辨認(rèn)，即使是從網(wǎng)站標(biāo)題中剪切出來(lái)，效果也會(huì)很好，可以利用當(dāng)今的插圖潮流來(lái)實(shí)現(xiàn)這一點(diǎn)。
4. 視頻或動(dòng)畫(huà)
當(dāng)然我們也不能只關(guān)注靜態(tài)圖片，添加視頻也是最有效的網(wǎng)站頭部創(chuàng)意之一。如果可能的話，嘗試著在頭部?jī)?nèi)容中添加主題視頻材料，很多網(wǎng)站利用在背景中添加短視頻來(lái)吸引用戶，盡可能以最好的方式展示他們的公司或產(chǎn)品。
△ 華夏幸福校招官網(wǎng)首頁(yè)動(dòng)畫(huà)，撥云見(jiàn)日的效果加上中式剪紙風(fēng)格的運(yùn)用，將公司各業(yè)務(wù)線融合到幾個(gè)轉(zhuǎn)輪中，產(chǎn)生了故事性的動(dòng)畫(huà)場(chǎng)景。
如果想要使設(shè)計(jì)更具吸引力、生動(dòng)和令人難忘的另一種方法是添加動(dòng)畫(huà)。它可以使網(wǎng)站頭部?jī)?nèi)容變得非?？?。以每季校園招聘企業(yè)站點(diǎn)為例，各大公司對(duì)應(yīng)屆生群體的追逐，很大程度上體現(xiàn)在對(duì)該群體審美和喜好的迎合上，年輕有活力的動(dòng)畫(huà)或視頻元素絕對(duì)是吸引眼球的不二之選。
當(dāng)然不一定只有滿屏大型動(dòng)畫(huà)，一般動(dòng)畫(huà)越復(fù)雜面積越大占用流量越多，客戶打開(kāi)延遲也影響觀感。這時(shí)候我們可以根據(jù)功能不同，設(shè)計(jì)一些交互性的動(dòng)畫(huà)，去提升客戶使用感受，盡量不影響網(wǎng)頁(yè)打開(kāi)速度。
5. 移動(dòng)端頭部設(shè)計(jì)
網(wǎng)頁(yè)頭部不可能只顯示PC端的網(wǎng)頁(yè)上，還應(yīng)該正確顯示在移動(dòng)端的網(wǎng)頁(yè)上。因此，在近年的設(shè)計(jì)中，網(wǎng)頁(yè)必須具有響應(yīng)性，并且能夠很好地適應(yīng)各種移動(dòng)設(shè)備，這樣才能帶給用戶完整的設(shè)計(jì)體驗(yàn)。
移動(dòng)設(shè)備的日常使用廣泛性早已影響網(wǎng)站設(shè)計(jì)，即使在PC中，也有一些細(xì)節(jié)看起來(lái)像是面向移動(dòng)設(shè)備的網(wǎng)站設(shè)計(jì)。例如，Banner和漢堡包菜單都起源于移動(dòng)設(shè)計(jì)。
移動(dòng)端有著與PC端不同的屏幕尺寸和操作方式，很多時(shí)候需要設(shè)計(jì)師在一開(kāi)始就考慮到兩種界面的適應(yīng)情況，比如在PC上頂部一條的導(dǎo)航，到移動(dòng)端就演變?yōu)橐粋€(gè)漢堡包菜單。而原本PC頁(yè)面中展開(kāi)顯示的內(nèi)容，在移動(dòng)端會(huì)向下層延伸，首層界面成為一個(gè)內(nèi)容聚合頁(yè)。
網(wǎng)站是以頭部?jī)?nèi)容為先導(dǎo)的，它就像是一張獨(dú)特的名片。因此，我們?cè)谠O(shè)計(jì)網(wǎng)站時(shí)，盡可能最大限度地關(guān)注該區(qū)域。
最后還要提醒大家，一定記得定期更新網(wǎng)站頭部?jī)?nèi)容哦！以校園招聘大客戶為例，大多數(shù)企業(yè)都會(huì)在每年春秋兩季的招聘旺季更新其招聘主題風(fēng)格，以保持網(wǎng)站的新鮮感和時(shí)效性。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
用戶在操作系統(tǒng)時(shí)所看到的頁(yè)面框架其實(shí)就是系統(tǒng)布局，它是一個(gè)產(chǎn)品最外層的框架結(jié)構(gòu)，一般包含了頂部導(dǎo)航、側(cè)邊導(dǎo)航欄、面包屑、圖文、卡片、內(nèi)容等元素。
對(duì)于設(shè)計(jì)師而言，想要了解一個(gè)中臺(tái)，首先要了解它的系統(tǒng)布局，系統(tǒng)布局是頁(yè)面設(shè)計(jì)的基礎(chǔ)，它與頁(yè)面的關(guān)系，就如同建筑與地基的關(guān)系。日常完成需求時(shí)，UI 界面反復(fù)的調(diào)試頁(yè)面寬度與卡片比例會(huì)占用我們大量的時(shí)間。為了提高工作效率，并且把更多的時(shí)間放在業(yè)務(wù)、視覺(jué)創(chuàng)新等方面，我們就應(yīng)該需要一套完整的布局規(guī)范。
對(duì)整個(gè)公司產(chǎn)品體系而言，內(nèi)部員工與普通用戶使用的操作系統(tǒng)達(dá)到幾十甚至上百個(gè)，單一的頁(yè)面布局滿足不了各個(gè)子項(xiàng)目的使用場(chǎng)景。所以我們從前期的布局框架設(shè)計(jì)調(diào)研到產(chǎn)品業(yè)務(wù)的特性，定義了中臺(tái)界面的幾大類(lèi)型，并且在我們的設(shè)計(jì)規(guī)范中定義了幾大類(lèi)型系統(tǒng)布局方式，根據(jù)其布局方式定制好柵格，方便日后在各個(gè)業(yè)務(wù)場(chǎng)景中使用，從而能夠保持一致性、并且可擴(kuò)展，方便快速迭代和維護(hù)。
視覺(jué)層次
對(duì)于中臺(tái)的 UI 設(shè)計(jì)師們而言，良好的理性思維相對(duì)比感性的視覺(jué)思維更加重要，因?yàn)樵?UI 設(shè)計(jì)師設(shè)計(jì)頁(yè)面時(shí)需要把很多互不相關(guān)的元素有秩序的組織在一起，正確引導(dǎo)用戶操作與使用。亨利·亞當(dāng)斯（Henry Adams）曾經(jīng)說(shuō)過(guò)：「混沌是自然法則，秩序是人類(lèi)的夢(mèng)想」。人們總是喜歡秩序，因?yàn)橹刃蚩梢宰屖虑樽兊酶菀桌斫?。這同樣適用于數(shù)字產(chǎn)品的用戶界面，當(dāng) UI 元素被有序組合和結(jié)構(gòu)化時(shí)，人們可以輕松的使用應(yīng)用程序和網(wǎng)站，并對(duì)產(chǎn)品感到滿意，所以設(shè)計(jì)頁(yè)面時(shí)需要結(jié)合視覺(jué)層次理論。視覺(jué)層次理論是設(shè)計(jì)過(guò)程的核心方法之一。最初是建立在格式塔原理的基礎(chǔ)上，它觀察到了用戶對(duì)相互關(guān)聯(lián)元素的視覺(jué)感知，并展示了人們?nèi)绾螌⒁曈X(jué)元素歸為一類(lèi)。那么什么是視覺(jué)層次呢？官方概括：視覺(jué)層次結(jié)構(gòu)致力于一種用戶能夠理解的方式呈現(xiàn)產(chǎn)品的內(nèi)容，以便用戶可以理解每個(gè)元素的重要性級(jí)別。它可以組織頁(yè)面內(nèi)容，以便大腦可以根據(jù)物理差異例如：大小，顏色，對(duì)比度，樣式等區(qū)分對(duì)象。
蘋(píng)果的設(shè)計(jì)一直以來(lái)都是引領(lǐng)著設(shè)計(jì)趨勢(shì)，其設(shè)計(jì)被國(guó)內(nèi)外用戶所認(rèn)可，所以就以蘋(píng)果官網(wǎng)作為案例。其中，字重對(duì)比：蘋(píng)果官網(wǎng)在字重上給人眼前一亮的感覺(jué)，它采用 Medium+Bold 的字重使得標(biāo)題與詳情內(nèi)容產(chǎn)生強(qiáng)烈的大小對(duì)比，用戶進(jìn)入官網(wǎng)的第一眼便能了解核心內(nèi)容。顏色對(duì)比：在顏色上使用黑色背景承托產(chǎn)品和內(nèi)容，強(qiáng)烈的黑白對(duì)比增強(qiáng)了信息傳播中的識(shí)別度和對(duì)比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺(jué)效果，使得頁(yè)面層次感更加的豐富。如下圖：
格式塔理論
往往用戶打開(kāi)頁(yè)面進(jìn)行閱讀或者操作界面時(shí)視覺(jué)的第一感受是產(chǎn)品的整體效果，而并不會(huì)感知到一些較細(xì)節(jié)的元素。往宏觀來(lái)講當(dāng)人們感知到一個(gè)物體由許多元素組成的復(fù)雜對(duì)象時(shí)，人們會(huì)采用有意識(shí)或無(wú)意識(shí)的方法將這些部分安排到整個(gè)組織的系統(tǒng)中，而不只是簡(jiǎn)單的元素級(jí)。它適用于不同級(jí)別的感知，但是視覺(jué)部分似乎是設(shè)計(jì)師設(shè)計(jì)界面時(shí)最能體現(xiàn)價(jià)值的部分，這其實(shí)就是格式塔理論，格式塔（Gestalt）這個(gè)術(shù)語(yǔ)來(lái)自德語(yǔ)單詞 Gestalt，中文翻譯為「形狀，形式」。
格式塔心理學(xué)家?guī)鞝柼亍た品蚩ǎ↘urt Koffka）的一句話可以捕捉到這一運(yùn)動(dòng)背后的基本思想：「整體不是元素基因的總和」。官網(wǎng)概括：「在心理現(xiàn)象中，人們對(duì)客觀對(duì)象的感受源于整體關(guān)系而非具體元素，也就是說(shuō)知覺(jué)不是感覺(jué)元素的總和，而是一個(gè)統(tǒng)一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見(jiàn)的原則分別為臨近，相似，連續(xù)，封閉和連接。
在我們的現(xiàn)實(shí)生活中有很多自然規(guī)律都遵守了格式塔原則，比如說(shuō)每到秋天，北方的嚴(yán)寒氣候不再適合大雁生存，這時(shí)候大雁便會(huì)飛往較暖和的南方，當(dāng)人們看到天空正在南飛的大雁隊(duì)伍，它們組織鏈接得十分嚴(yán)密，并且群體在往同一個(gè)方向移動(dòng)，所以隊(duì)伍的形狀在我們的大腦中將它們視為一個(gè)群組的一部分，產(chǎn)生人字形或一字形的圖形。
信息框架
剛剛我們也介紹了視覺(jué)層級(jí)結(jié)構(gòu)和格式塔理論，接下來(lái)簡(jiǎn)單介紹一下信息框架，它也是在系統(tǒng)布局中需要考慮的內(nèi)容。信息框架是將信息內(nèi)容進(jìn)行組織分層，一個(gè)產(chǎn)品的信息框架取決于其特有的業(yè)務(wù)，他與業(yè)務(wù)強(qiáng)相關(guān)并且需要了解用戶群體目標(biāo)。根據(jù)業(yè)務(wù)和用戶目標(biāo)將內(nèi)容組織搭建信息框架，形成系統(tǒng)布局的骨架，方便用戶在瀏覽或操作頁(yè)面時(shí)能夠快速找到重點(diǎn)內(nèi)容，提升用戶使用效率。我們用今日頭條 Web 端和飛書(shū) Web 端兩個(gè)線上產(chǎn)品作為案例分析吧，今日頭條和飛書(shū)屬于兩種完全不同類(lèi)型的產(chǎn)品，那么其信息架構(gòu)也完全不同。
今日頭條屬于門(mén)戶類(lèi)新聞客戶端，主要是生產(chǎn)內(nèi)容展現(xiàn)給用戶，首先進(jìn)入到產(chǎn)品映入眼簾的是無(wú)窮式的信息流，它不需要用戶登錄/注冊(cè)作為身份門(mén)檻，而是直觀的把內(nèi)容展示給用戶，推送用戶感興趣的內(nèi)容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗(yàn)即可，目的是方便第一時(shí)間抓取用戶、吸引用戶達(dá)到留住用戶的目的。當(dāng)用戶產(chǎn)生興趣以后想要進(jìn)入下一步操作如：點(diǎn)贊、評(píng)論時(shí)才會(huì)彈出登錄/注冊(cè)，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來(lái)。從產(chǎn)品業(yè)務(wù)屬性來(lái)看，今日頭條的布局把重要的內(nèi)容放入中間，并且占有整個(gè)布局的一半大小，其次放在內(nèi)容兩側(cè)；
飛書(shū)屬于工具協(xié)作類(lèi)產(chǎn)品，用戶第一次打開(kāi)產(chǎn)品需要注冊(cè)才能使用。與新聞閱讀類(lèi)產(chǎn)品不同的是工具類(lèi)型產(chǎn)品用戶目的比較明確，所以首頁(yè)做成一個(gè)功能介紹頁(yè)面，作用是引導(dǎo)用戶了解產(chǎn)品核心功能從而轉(zhuǎn)化成產(chǎn)品的用戶。當(dāng)然功能介紹頁(yè)也是一個(gè)網(wǎng)站的門(mén)面，首頁(yè)想要出彩，不僅需要在布局上做的合理還需要考慮網(wǎng)站的色彩、插圖等元素的統(tǒng)一性。在設(shè)計(jì)網(wǎng)站時(shí)，首頁(yè)的功能介紹頁(yè)一定要充分突出自身產(chǎn)品特色，強(qiáng)調(diào)出自身產(chǎn)品的優(yōu)勢(shì)和亮點(diǎn)，如飛書(shū)首頁(yè)主要是想突出其產(chǎn)品能夠提高工作效率，所以直接把「在飛書(shū)，享高效」slogan 這句話放在了首頁(yè)的第一屏，輔助文案詳細(xì)的介紹了產(chǎn)品的核心功能，直接抓住用戶的痛點(diǎn)。用戶完成注冊(cè)以后，進(jìn)入到功能頁(yè)面，如右下圖可以看出，其系統(tǒng)布局的模塊分成三份，占面積最大的模塊屬于產(chǎn)品最核心的部分也就是聊天窗口，較重要部分是聯(lián)系人部分，最小區(qū)域是功能 Tab 部分。
小結(jié)
所以對(duì)于設(shè)計(jì)師而言，在設(shè)計(jì)頁(yè)面時(shí)必須熟練掌握一些基本設(shè)計(jì)基礎(chǔ)知識(shí)，并且將這些知識(shí)靈活運(yùn)用到實(shí)際的工作當(dāng)中。比如設(shè)計(jì)師在搭建系統(tǒng)布局時(shí)需要熟知頁(yè)面視覺(jué)層次、格式塔理論、信息框架等知識(shí)才可創(chuàng)建合理的布局基礎(chǔ)。當(dāng)然布局框架只是整個(gè)產(chǎn)品的基礎(chǔ)骨架，在骨架確定之后，設(shè)計(jì)師才可進(jìn)行下一步的設(shè)計(jì)，如統(tǒng)一的視覺(jué)表達(dá)元素，清晰的功能操作，流暢的交互表達(dá)。
系統(tǒng)布局規(guī)范，需要通過(guò)統(tǒng)一的設(shè)計(jì)元素和間距規(guī)范去引導(dǎo)使用者們（使用規(guī)范的設(shè)計(jì)師）跨平臺(tái)使用并且能夠適配不同屏幕尺寸，目的是達(dá)到一致性，可適配、可控性原則。
一致性：對(duì)于界面來(lái)講，界面中的元素和結(jié)構(gòu)需要保持一致性，如：在使用布局時(shí)應(yīng)當(dāng)使用一致的網(wǎng)格，基準(zhǔn)線和填充，在使用設(shè)計(jì)元素時(shí)配色、圖標(biāo)、文本等需保持一致。
可適配：布局是可自適應(yīng)的，根據(jù)用戶在不同的設(shè)計(jì)環(huán)境下能夠通過(guò)交互動(dòng)效、界面樣式有效作出極致適配反應(yīng)。用戶操作后需給出即時(shí)反應(yīng)。
可控性：當(dāng)用戶看到界面時(shí)應(yīng)直觀有效傳遞內(nèi)容，如界面中模塊區(qū)域明確、內(nèi)容組織明確、表意明確都能使得用戶快速理解。界面需要簡(jiǎn)單直白，讓用戶快速識(shí)別，減少用戶記憶負(fù)擔(dān)。
在設(shè)計(jì)過(guò)程中，為了減少設(shè)計(jì)師們的日常溝通和理解成本，在設(shè)計(jì)內(nèi)部我們統(tǒng)一了一套設(shè)計(jì)畫(huà)板尺寸為 1280。經(jīng)過(guò)我們官方調(diào)研得出在中臺(tái)系統(tǒng)中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最為保險(xiǎn)的的一個(gè)尺寸，在設(shè)計(jì)頁(yè)面時(shí)設(shè)計(jì)師如果能夠在 1280 尺寸下，縮小寬度或拉升頁(yè)面寬度都能保證沒(méi)有遮擋或擠壓?jiǎn)栴}，那么設(shè)計(jì)是合理的。在我們的規(guī)范中頁(yè)面再小于 1280 時(shí)需要吊起系統(tǒng)的橫向滾動(dòng)條。在中臺(tái)系統(tǒng)中考慮到用戶效率問(wèn)題很少做響應(yīng)式，所以常規(guī)情況下設(shè)計(jì)師會(huì)限定界面的一個(gè)最小值。如果設(shè)計(jì)師把畫(huà)板設(shè)置為 1440 或者 1366 時(shí)可能會(huì)存在其在畫(huà)板中頁(yè)面大小正好合適，但是頁(yè)面上線以后縮小瀏覽器可能會(huì)發(fā)生遮擋或擠壓的情況。所以我們建議設(shè)計(jì)師們使用 1280 寬度畫(huà)板畫(huà)圖。
首先先分析一下界面框架，我們將頁(yè)面的用戶操作行為進(jìn)行層級(jí)區(qū)分。我們至下而上將元素進(jìn)行層級(jí)分層，目的是把用戶界面模塊化。界面可分成背景區(qū)域、內(nèi)容層、全局控制層、內(nèi)容彈層，每一層都具備獨(dú)特性，將界面中所有的信息層級(jí)提取分類(lèi)并且按結(jié)構(gòu)屬性分層，目的是能夠使得頁(yè)面視覺(jué)和交互邏輯符合用戶的習(xí)慣認(rèn)知。之前我們有提到過(guò)視覺(jué)層次、格式塔理論和信息框架，設(shè)計(jì)師在創(chuàng)建這一步的時(shí)候可以用來(lái)指導(dǎo)搭建一套合理的頁(yè)面信息層級(jí)，一個(gè)內(nèi)容模塊都屬于一個(gè)容器，容器可以承載各種內(nèi)容元素。
背景層
背景層樣式固定，在界面中永遠(yuǎn)置于界面底部，并且一般會(huì)給予背景層中性色，作用是方便突出內(nèi)容層和全局控制層。
內(nèi)容層
視圖結(jié)構(gòu)中最核心和復(fù)雜的一層，他與業(yè)務(wù)強(qiáng)相關(guān)，內(nèi)容層的容器承載了業(yè)務(wù)場(chǎng)景的用戶需要獲取的核心信息以及輔助核心任務(wù)的操作。容器承載了內(nèi)容，從 Material Design 中的 Elevation（海拔）概念中可以了解到，它屬于第二層級(jí)內(nèi)容，基本布局結(jié)構(gòu)有平行結(jié)構(gòu)或者父子結(jié)構(gòu)。如下圖卡片屬于容器，卡片中承載了數(shù)據(jù)圖表等內(nèi)容，整個(gè)卡片+內(nèi)容就屬于內(nèi)容層。
全局控制層
全局控制層我們定義他在內(nèi)容層之上，屬于頁(yè)面第三層級(jí)內(nèi)容，一般在業(yè)務(wù)場(chǎng)景中對(duì)整個(gè)網(wǎng)站的控制以及導(dǎo)航功能如：Header menu、Sidebar menu 組件，如下圖中 Header menu 浮在內(nèi)容層之上。
內(nèi)容彈層
當(dāng)前任務(wù)或者內(nèi)容相關(guān)的臨時(shí)出現(xiàn)層，優(yōu)先級(jí)高于內(nèi)容層，一般承載當(dāng)前需要臨時(shí)處理的任務(wù)或者需要進(jìn)行內(nèi)容補(bǔ)充說(shuō)明等功能。如：Modal（Dialog 各個(gè)平臺(tái)叫法不一致）、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現(xiàn)給用戶。Modal 它包括兩種類(lèi)型，一種是模態(tài)內(nèi)容層不可操控，被蒙版遮罩禁用，比如在業(yè)務(wù)中需要較為聚焦的分支流程操作時(shí)使用。另一種是非模態(tài)，吊起彈出層后不印象內(nèi)容層操作。當(dāng)然，Tooltip、Popover、Notification 都屬于非模態(tài)，反饋較輕，不干擾用戶使用界面。如下圖的頁(yè)面中的內(nèi)容彈層使用了 Popover，在次頁(yè)面它的功能就是加以補(bǔ)充說(shuō)明。
隨著科技高速發(fā)展，屏幕分辨率也越來(lái)越多樣化對(duì)于 UI/UX 設(shè)計(jì)師來(lái)講必須熟練的基本知識(shí)方便日常工作所需。首先我們先了解一下屏幕中的一些單位。
在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導(dǎo)致開(kāi)發(fā)實(shí)現(xiàn)稿的視覺(jué)不符合設(shè)計(jì)師心理預(yù)期，比如：相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見(jiàn)尺寸）下，低密度顯示器的像素個(gè)數(shù)明顯小于高密度顯示器的像素個(gè)數(shù)。
其實(shí)像素是與密度沒(méi)有關(guān)聯(lián)，我們簡(jiǎn)稱密度為 DP (讀作 DIP，英文全稱 Density-independent pixel )，它是可縮放的靈活單位，可在任何屏幕下現(xiàn)實(shí)相同的尺寸，如圖顯示，紅色網(wǎng)格為像素密度，被放大內(nèi)容為 UI 元素物理尺寸。
所以我們可以得出，DP 可以自適應(yīng)屏幕的密度，不管屏幕密度怎么變化，實(shí)際顯示的物理尺寸相同，DP 可以保證物理尺寸的一致性，所以 DP 是目前比較適合 UI 設(shè)計(jì)的單位。當(dāng)屏幕的密度為 160 的一個(gè)物理像素時(shí)，1PD=1PX。要計(jì)算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。
關(guān)于網(wǎng)格
網(wǎng)格線(Grid Line)，網(wǎng)格線又稱布局分割線，它是構(gòu)成網(wǎng)格結(jié)構(gòu)的分界線。一般在布局中它們是由行網(wǎng)格線和列網(wǎng)格線組成。如下圖是模擬網(wǎng)格做了一個(gè)示意，其中橘黃色兩根線分別是行網(wǎng)格線和列網(wǎng)格線。
網(wǎng)格軌道(Grid Track)，兩個(gè)相鄰網(wǎng)格線之間的空間。你可以把它們想像成網(wǎng)格的行或列。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線之間的空間既是網(wǎng)格軌道。
網(wǎng)格單元格(Grid Cell)，兩個(gè)相鄰的行網(wǎng)格線和兩個(gè)相鄰的列網(wǎng)格線之間的空間屬于網(wǎng)格單元格。這是網(wǎng)格系統(tǒng)的一個(gè)「單元」。如下圖橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格單元格。
網(wǎng)格區(qū)域(Grid Area)，由單個(gè)或多個(gè)網(wǎng)格單元格組成，它是可以用來(lái)擺放頁(yè)面元素。如下圖所示，橘黃色的行網(wǎng)格線和列網(wǎng)格線交叉處即是網(wǎng)格區(qū)域。
網(wǎng)格設(shè)置
在設(shè)計(jì)界面時(shí)可以通過(guò)網(wǎng)格定制能夠使界面更加有序、整齊、規(guī)范，網(wǎng)格的主要用途之一是保持設(shè)計(jì)元素對(duì)齊和排序。通過(guò)建立一個(gè)網(wǎng)格系統(tǒng)，設(shè)計(jì)師可以為自己創(chuàng)建一個(gè)結(jié)構(gòu)來(lái)適配不同的屏幕寬度。
在我制定的規(guī)范中一般會(huì)把網(wǎng)格的基數(shù)設(shè)置為 4，它不僅符合偶數(shù)的思路同時(shí)也能夠匹配多數(shù)主流的顯示設(shè)備，如中臺(tái)系統(tǒng)的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過(guò)設(shè)置網(wǎng)格規(guī)范幫助設(shè)計(jì)師快速搭建頁(yè)面，使用有律可循的布局空間的設(shè)計(jì)給到開(kāi)發(fā)減少溝通成本。下圖所示設(shè)計(jì)布局網(wǎng)格由三個(gè)元素組成：列寬，間距，邊距。
在 Sketch 中設(shè)置網(wǎng)格，在菜單欄中找「視圖」-「畫(huà)布」-「網(wǎng)格設(shè)置」-彈出浮層可設(shè)置網(wǎng)格大小，網(wǎng)格設(shè)置的基數(shù)設(shè)置成4，之后在設(shè)計(jì)界面時(shí)可按照網(wǎng)格基礎(chǔ)的倍數(shù)作為組件的大小和頁(yè)面元素間距分割，如下圖：
我們放大頁(yè)面局部大家可以看到，把網(wǎng)格基數(shù)設(shè)置成 4，每個(gè)網(wǎng)格單元格為 4*4 大小。同理，如果把網(wǎng)格基數(shù)設(shè)置成 8 以后，每個(gè)網(wǎng)格單元格大小為 8*8 大小。
界面框架內(nèi)系統(tǒng)布局是頁(yè)面所有模塊的組合方式，我們定義一個(gè)頁(yè)面框架中基礎(chǔ)模塊和內(nèi)容模塊的數(shù)量最好不超過(guò) 3 個(gè)。經(jīng)過(guò)調(diào)研和歸納總結(jié)出 3 大布局類(lèi)型，分別是上下布局、左右布局、T 字型布局。
上下布局布局是 Web 端運(yùn)用最廣泛的布局方式之一，頁(yè)面內(nèi)容區(qū)以 feed 流形式展現(xiàn)，一般用在 Web 端官網(wǎng)首頁(yè)。設(shè)計(jì)師普遍做法是對(duì)兩邊留白區(qū)域?yàn)閮?nèi)容區(qū)并進(jìn)行最小值的定義，一般定義值為 1200 較多（具體寬度要設(shè)計(jì)師如何設(shè)置柵格，后面會(huì)講到如何設(shè)置柵格），當(dāng)留白區(qū)域到達(dá)極小超過(guò)極限值之后需要對(duì)中間的內(nèi)容區(qū)域進(jìn)行動(dòng)態(tài)縮放或遮擋，此邏輯需設(shè)計(jì)師根據(jù)業(yè)務(wù)所需而定。也有少部分設(shè)計(jì)師會(huì)設(shè)計(jì)成全屏布局，內(nèi)容隨瀏覽器寬度自適應(yīng)。
其優(yōu)點(diǎn)是頁(yè)面結(jié)構(gòu)清晰簡(jiǎn)單，強(qiáng)突出內(nèi)容區(qū)，但缺點(diǎn)是布局的規(guī)矩呆板，變化少。設(shè)計(jì)師如果不注意合理的視覺(jué)元素和色彩細(xì)節(jié)變化，用戶很容易感覺(jué)到乏味，此布局適用于層級(jí)較為簡(jiǎn)單頁(yè)面。
巨量引擎（Ocean Engine）是字節(jié)跳動(dòng)旗下的營(yíng)銷(xiāo)服務(wù)品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車(chē)帝、Faceu 激萌、輕顏、穿山甲等產(chǎn)品的營(yíng)銷(xiāo)能力，為全球廣告主提供綜合的數(shù)字營(yíng)銷(xiāo)解決方案。我在設(shè)計(jì)此官網(wǎng)時(shí)正是采用了上下布局作為頁(yè)面布局，頂部導(dǎo)航整合了所有子頁(yè)面的內(nèi)容，導(dǎo)航下方為主要內(nèi)容區(qū)并且內(nèi)容定寬，當(dāng)時(shí)采用此布局原因第一是因?yàn)榇喂倬W(wǎng)層級(jí)較簡(jiǎn)單只有三個(gè)層級(jí)內(nèi)容，第二是官網(wǎng)更需要的是突出內(nèi)容區(qū)，所有頁(yè)面使用次布局更為合適。
設(shè)計(jì)師在設(shè)計(jì)重內(nèi)容，輕導(dǎo)航類(lèi)型網(wǎng)站是常用左右布局作為基礎(chǔ)框架進(jìn)行頁(yè)面設(shè)計(jì)。此布局把系統(tǒng)頁(yè)面分為兩大模塊，其中設(shè)計(jì)師常見(jiàn)的做法是將左側(cè)設(shè)置成導(dǎo)航欄模塊并且固定，常常用來(lái)控制全局內(nèi)容。而右側(cè)區(qū)域設(shè)置成工作區(qū)域或內(nèi)容區(qū)，內(nèi)容區(qū)可進(jìn)行動(dòng)態(tài)縮放。
下圖為飛書(shū)溝通窗口截圖，由于關(guān)系到內(nèi)部信息保密性我把內(nèi)容進(jìn)行了模糊，從外觀結(jié)構(gòu)上看還是能大致了解飛書(shū)結(jié)構(gòu)是采用了左右布局，整個(gè)布局結(jié)構(gòu)清晰有理也是符合左右布局特點(diǎn)。從交互體驗(yàn)分析左側(cè)屬于導(dǎo)航區(qū)，它承載了不同功能并且固定。飛書(shū)屬于即時(shí)溝通產(chǎn)品設(shè)計(jì)師考慮到瀏覽器窗口有限所以對(duì)導(dǎo)航設(shè)計(jì)成較小模塊，而右邊為聊天窗口對(duì)于業(yè)務(wù)屬性分析它更為重要，所以模塊較大。其導(dǎo)航欄固定，內(nèi)容區(qū)可進(jìn)行動(dòng)態(tài)縮放。
T 字型布局常用在 Web 端的中臺(tái)系統(tǒng)中，因?yàn)橹信_(tái)系統(tǒng)業(yè)務(wù)結(jié)構(gòu)復(fù)雜、層級(jí)多，而 T 字型布局能夠解決復(fù)雜結(jié)構(gòu)的問(wèn)題。使用此結(jié)構(gòu)能夠把頁(yè)面結(jié)構(gòu)清晰化，主次更加分明。設(shè)計(jì)師常常的做法是將頂部作為一級(jí)導(dǎo)航欄方便控制全局，二左邊設(shè)計(jì)成是二級(jí)導(dǎo)航并且固定導(dǎo)航欄固定，右邊的內(nèi)區(qū)域可進(jìn)行動(dòng)態(tài)縮放（一般會(huì)把其設(shè)計(jì)成柵格動(dòng)態(tài)區(qū)域），內(nèi)容隨瀏覽器寬度自適應(yīng)。
下圖是 Material Design 設(shè)計(jì)文檔，首先簡(jiǎn)單介紹一下 Material Design，它是由谷歌的設(shè)計(jì)團(tuán)隊(duì)創(chuàng)建的一種語(yǔ)言，宗旨是幫助設(shè)計(jì)師們創(chuàng)建易用性和實(shí)用性較強(qiáng)的網(wǎng)站和應(yīng)用程序，其設(shè)計(jì)理念是將現(xiàn)實(shí)中的物理學(xué)帶入進(jìn)設(shè)計(jì)中。Material Design 設(shè)計(jì)文檔中的結(jié)構(gòu)使用了 T 字型布局作為基礎(chǔ)布局。頁(yè)面分為了三個(gè)模塊，其中頂部導(dǎo)航作為頁(yè)面一級(jí)內(nèi)容進(jìn)行全局控制，接下來(lái)左邊為側(cè)邊導(dǎo)航作為二級(jí)內(nèi)容控制頁(yè)面，右邊是內(nèi)容區(qū)滿足用戶使用瀏覽。從放眼望去整個(gè)頁(yè)面架構(gòu)清晰明了。
以上為 Web 最常見(jiàn)的三大布局，但是需要大家在實(shí)際的工作中靈活運(yùn)用。設(shè)計(jì)師在日常工作中可能會(huì)遇到更為特殊的業(yè)務(wù)場(chǎng)景，設(shè)計(jì)師可以通過(guò)整理基礎(chǔ)模塊然后分析其業(yè)務(wù)的信息框架，將模塊進(jìn)行相互組合、嵌套歸納可以總結(jié)出更多的 Web端布局框架并落地到業(yè)務(wù)中。
剛剛在定義布局模塊中已經(jīng)分析過(guò)了三大布局類(lèi)型，接下要分享的是 UI 設(shè)計(jì)師更為關(guān)注內(nèi)容「網(wǎng)頁(yè)柵格」。網(wǎng)頁(yè)柵格也是設(shè)計(jì)師口中常常提及的柵格系統(tǒng)。其實(shí)網(wǎng)頁(yè)柵格系統(tǒng)是從平面柵格系統(tǒng)中發(fā)展而來(lái)，它延續(xù)了平面設(shè)計(jì)的方法與風(fēng)格，在網(wǎng)頁(yè)中使用柵格能夠使得網(wǎng)頁(yè)信息展現(xiàn)更加清晰明了、美觀易讀。
首先網(wǎng)頁(yè)柵格系統(tǒng)基本由是柵格總寬度/頁(yè)面總寬度（W）、一個(gè)柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個(gè)單元的寬度（A）、外邊距（M）組成。
1. 列寬
一個(gè)柵格的寬度（a），我們稱之為列寬，一個(gè)列寬包涵了N個(gè)網(wǎng)格單元格（Grid Cell）我們也可以把它看成一個(gè)網(wǎng)格區(qū)域(Grid Area)，在上面我們已經(jīng)講到過(guò)網(wǎng)格的內(nèi)容，主要目的正是為柵格做鋪墊。其中我把一個(gè)網(wǎng)格單元格設(shè)置為4（原因在網(wǎng)格中也解釋過(guò)，如果忘記的同學(xué)可以爬樓看下）。由此可見(jiàn)列寬非固定值，這樣可以使內(nèi)容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。
2. 水槽
柵格與柵格之間的間隙（i），我們稱之為水槽，一個(gè)水槽寬度大于等于1個(gè)網(wǎng)格單元（Grid Cell）。在柵格中水槽為一個(gè)定值，寬度可以是N個(gè)網(wǎng)格單元，如網(wǎng)格單元格設(shè)置成4，那么水槽可以是4、8、12、16…N*4。
3. 柵格單元
1個(gè)列寬+1個(gè)水槽寬度即一個(gè)單元的寬度，一個(gè)柵格總寬是由N個(gè)柵格單元組成，次寬度不固定，由屏幕尺寸決定。
4. 柵格總寬
列寬+水槽再成以N即是一個(gè)柵格的總寬，公式為：W=(A*n)-i。
5. 柵格設(shè)置
經(jīng)過(guò)調(diào)研我們得出常見(jiàn)的柵格分為 12 列柵格系統(tǒng)和 24 列柵格系統(tǒng)。其中 12 列柵格系統(tǒng)在流行的前端開(kāi)發(fā)開(kāi)源工具庫(kù)Bootstrap 與 Foundation 中廣泛使用，適用于業(yè)務(wù)信息分組較少、業(yè)務(wù)結(jié)構(gòu)較簡(jiǎn)，單個(gè)盒子內(nèi)信息體積較大的中后臺(tái)頁(yè)面設(shè)計(jì)。24 等分的柵格系統(tǒng)適用于業(yè)務(wù)信息量大、信息分組較多、單個(gè)盒子內(nèi)信息體積較小的中后臺(tái)頁(yè)面設(shè)計(jì)；相對(duì) 12 柵格系統(tǒng)，24 柵格系統(tǒng)變化更加靈活，更適合內(nèi)容比較多樣復(fù)雜的場(chǎng)景。如下圖分別是 12 柵格系統(tǒng)（左）和 24 柵格系統(tǒng)（右）。
6. 小結(jié)
在柵格系統(tǒng)結(jié)合布局結(jié)構(gòu)和網(wǎng)格做了我做了一些知識(shí)結(jié)合，其實(shí)前面所講的網(wǎng)格版塊和布局版塊都是為柵格做一個(gè)鋪墊，利于同學(xué)們更加深入的了解網(wǎng)格、布局、柵格三者的關(guān)系。
系統(tǒng)布局只是網(wǎng)頁(yè)中的基礎(chǔ)部分，但也是核心內(nèi)容，一個(gè)產(chǎn)品布局需要根據(jù)其業(yè)務(wù)屬性決定。布局搭的好相當(dāng)?shù)鼗虻煤茫峭瑫r(shí)在對(duì)美感的追求之上，還應(yīng)當(dāng)結(jié)合可用性來(lái)看待設(shè)計(jì)。在實(shí)際的工作中肯定還會(huì)遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發(fā)，大家可根據(jù)此次分享內(nèi)容能夠進(jìn)行舉一反三利用到實(shí)際的工作當(dāng)中。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼ben_lanlan，報(bào)下信息，會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com