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