因?yàn)楹笈_(tái)是一個(gè)非常廣泛的且深?yuàn)W的東西，里面包含了太多的業(yè)務(wù)邏輯，而且每個(gè)產(chǎn)品面向的用戶群體又不同，因此不可能說的面面俱到，但是我提煉的這七個(gè)步驟適用于大部分后臺(tái)的一個(gè)宏觀方向，對(duì)于一個(gè)沒有后臺(tái)項(xiàng)目經(jīng)驗(yàn)的人去從頭制作一款后臺(tái)產(chǎn)品應(yīng)該是非常有幫助的。

第一步：選擇導(dǎo)航板式

導(dǎo)航是后臺(tái)的主軀干，一切操作都需要在導(dǎo)航的指引下進(jìn)行切換，目前常用的有兩種導(dǎo)航，頂部導(dǎo)航與樹狀導(dǎo)航。

頂部導(dǎo)航板式

頂部導(dǎo)航是大多數(shù)Web端網(wǎng)站使用的導(dǎo)航模式，因?yàn)槿说拈喿x視覺是從上往下，從左往右，因此，頂部是視角最先達(dá)到的地方，頂部導(dǎo)航可以讓用戶快速了解整個(gè)網(wǎng)站的主要內(nèi)容結(jié)構(gòu)，通常在營(yíng)銷級(jí)官網(wǎng)，內(nèi)容瀏覽平臺(tái)被廣泛應(yīng)用（例如京東，阿里云，站酷...）。

但是其弊端也是很顯而易見的，因?yàn)槠聊粚挾鹊南拗?，在小屏下，頂部顯示文本內(nèi)容有限，通常只有幾個(gè)字符的內(nèi)容，更多內(nèi)容或二級(jí)標(biāo)題則需要進(jìn)行隱藏顯示。其次因?yàn)槿祟惿眢w結(jié)構(gòu)，成年人的頭顱約為4.5～5.5公斤，占據(jù)身體7.7%左右的重量，我們的頸椎承受了太多，因此人在左右扭頭時(shí)要比上下點(diǎn)頭更舒服。再者人類的眼睛是左右排布的，與生俱來兩邊的視線就優(yōu)于上下的視線，頂部導(dǎo)航如果需要高頻次使用的話會(huì)讓用戶非常的勞累。

優(yōu)點(diǎn)：節(jié)約空間、可以快速吸睛

缺點(diǎn)：顯示文本內(nèi)容有限，不符合人體工程學(xué)，不方便查找

樹狀導(dǎo)航板式

在很多生產(chǎn)力工具上，后臺(tái)網(wǎng)站上，B端產(chǎn)品上，閱讀軟件上，樹狀導(dǎo)航被廣泛運(yùn)用。樹狀導(dǎo)航是以父子層次結(jié)構(gòu)來組織對(duì)象的，其優(yōu)點(diǎn)非常顯著：兼容性強(qiáng)，結(jié)構(gòu)清晰，拓展性強(qiáng)等等。

先說兼容性，因?yàn)槊織l導(dǎo)航標(biāo)題呈上下排布，因此一排只需顯示一條標(biāo)題，對(duì)于長(zhǎng)標(biāo)題與外文適配顯得格外的友好。樹狀導(dǎo)航具有良好的層次關(guān)系，每一層內(nèi)容都可以固定性的展示出來，不會(huì)像頂部導(dǎo)航必須鼠標(biāo)懸浮才會(huì)顯示子層級(jí)，不論是從便于梳理層次關(guān)系的角度來講，還是頻繁操作的簡(jiǎn)單化來說是都是完勝于頂部導(dǎo)航的。因?yàn)榫W(wǎng)頁(yè)默認(rèn)是上下滑動(dòng)來查閱更多內(nèi)容的，因此樹狀導(dǎo)航的拓展性方面碾壓頂部導(dǎo)航，樹狀導(dǎo)航可以無限的向下拓展，就像書籍的目錄一樣，而頂部導(dǎo)航則只能顯示寥寥無幾的幾個(gè)單詞。

優(yōu)點(diǎn)：可以展示更多的標(biāo)題內(nèi)容、可以不限制標(biāo)題條數(shù)無限拓展、結(jié)構(gòu)清晰易懂

缺點(diǎn)：占據(jù)空間較大，對(duì)于小屏可能需要頻繁展開、收起導(dǎo)航

第二步：統(tǒng)一模塊規(guī)則

后臺(tái)的主要功能是支撐前臺(tái)產(chǎn)品，管理資源，因此在邏輯與結(jié)構(gòu)的梳理上應(yīng)當(dāng)與前臺(tái)產(chǎn)品保持一致性，在布局的制定上應(yīng)當(dāng)遵循模塊化、響應(yīng)式、高效化的布局，以便于清晰地傳達(dá)信息。

在后臺(tái)的布局中，通常需要將數(shù)據(jù)統(tǒng)計(jì)、展示與列表、操作區(qū)分開來，達(dá)到看歸看，做歸做的原則，如果混淆到一起就會(huì)大大的提升認(rèn)知難度和操作難度， 就像老款的汽車的儀表盤與中控操作區(qū)分開來，用戶就會(huì)很快的上手，但是像特斯拉都集成在一塊屏幕上就會(huì)讓用戶傻傻分不清楚，一時(shí)間難以找到相應(yīng)的操作區(qū)域。因此模塊化在后臺(tái)則顯得格外重要，每個(gè)模塊、每個(gè)區(qū)域都應(yīng)當(dāng)賦予它獨(dú)特且自始至終不變的屬性，比如頂部的導(dǎo)航條，全局都在頂部區(qū)域展示，而不是這個(gè)頁(yè)面在頂部，下個(gè)頁(yè)面在底部。

導(dǎo)航模塊：

后臺(tái)的布局中，常用的模塊就是導(dǎo)航模塊（整個(gè)后臺(tái)功能的結(jié)構(gòu)提綱），總導(dǎo)航就是我在上文提到的兩種，頂部導(dǎo)航和樹樁導(dǎo)航，其他還有二級(jí)導(dǎo)航，面包屑導(dǎo)航等等，但是需要注意的是，導(dǎo)航就像路標(biāo)，起到指引用戶的作用，因此在全局的樣式與位置應(yīng)保持統(tǒng)一。

提醒模塊：

顧名思義就是提示用戶有新的消息，新的功能等等，提醒模塊十分重要，因?yàn)樗菍?shí)時(shí)性的，在設(shè)計(jì)提醒模塊時(shí)應(yīng)當(dāng)遵循全局化、機(jī)動(dòng)化，高亮化，動(dòng)態(tài)化的規(guī)則，在常規(guī)狀態(tài)下，提醒模塊應(yīng)該隱藏展示，不過多的打擾用戶，但是如果在需要出現(xiàn)時(shí)，不論用戶處于什么樣的場(chǎng)景，提醒模塊都應(yīng)該在第一時(shí)間出現(xiàn)，并以醒目的方式告知用戶。

數(shù)據(jù)統(tǒng)計(jì)模塊：

數(shù)據(jù)統(tǒng)計(jì)通常是作為后臺(tái)頁(yè)面頭部的存在，用戶一進(jìn)網(wǎng)站映入眼簾的就是整個(gè)產(chǎn)品或者整個(gè)項(xiàng)目的數(shù)據(jù)統(tǒng)計(jì)，數(shù)據(jù)是作為衡量某一件事情好壞的重要標(biāo)準(zhǔn)，數(shù)據(jù)也通?？梢哉f明一個(gè)決策、一項(xiàng)任務(wù)的最終結(jié)果，在數(shù)據(jù)統(tǒng)計(jì)模塊的設(shè)計(jì)上應(yīng)該保持直觀，一針見血的設(shè)計(jì)方式，比如股票的K線圖，紅漲綠跌，一目了然。

快捷操作模塊：

有許多使用頻次非常高的功能可能會(huì)貫穿全局，比如谷歌Email，不論在哪個(gè)頁(yè)面，日期、Task功能都會(huì)在右側(cè)進(jìn)行顯示，方便用戶隨時(shí)添加待辦，記筆記等等。在后臺(tái)中，有很多時(shí)候一個(gè)小工具就可以提升很大的效率，不必在來回切換軟件、頁(yè)面，有很多情況下，我們看到了一個(gè)東西，聯(lián)想起了某一件事情，打算記錄下來，但是退出這個(gè)頁(yè)面再去打開記事本的時(shí)候發(fā)現(xiàn)已經(jīng)忘記了（這該死的7秒記憶）。因此在有些情況下，縮短操作路徑是一個(gè)不錯(cuò)的選擇，而快捷操作模塊也同樣要遵循全局固定位置，不可隨意變動(dòng)的原則，如果違背，效果往往會(huì)適得其反。

內(nèi)容展示模塊：

信息展示，這個(gè)模塊應(yīng)該是最難搞定的了，不管是什么頁(yè)面，信息都是重中之重，沒有信息的頁(yè)面那和沒有肉的肉夾饃一樣。內(nèi)容展示模塊不同于以上的模塊是全局靜止的，內(nèi)容展示模塊承載了后臺(tái)95%以上的頁(yè)面量，每一個(gè)頁(yè)面都不同。因?yàn)楹笈_(tái)頁(yè)面大部分時(shí)間都是以電腦端網(wǎng)頁(yè)的形式呈現(xiàn)，人在看電腦時(shí)通常會(huì)和顯示器之間有30-50cm的距離，甚至可能更遠(yuǎn)，因此在內(nèi)容的展示模塊上應(yīng)當(dāng)給予友善的設(shè)計(jì)，比如加大文字之間的字間距，行間距，突出重要信息，以圖文并茂的形式將枯燥的信息情趣化，沒有內(nèi)容的模塊放置缺省提示圖。

操作模塊：

操作模塊通常是與內(nèi)容展示模塊共同存在的，兩者互相配合使用，凡是在頁(yè)面中涉及到可以點(diǎn)擊交互的區(qū)域統(tǒng)稱為操作模塊，操作模塊應(yīng)該全局統(tǒng)一視覺語(yǔ)言以及操作語(yǔ)言，比如，按鈕樣式及大小，開關(guān)樣式，分頁(yè)器擺放位置及樣式等等。所有的操作模塊表意性要強(qiáng)，讓用戶可以快速明白點(diǎn)擊后的結(jié)果，如果遇到難以理解的操作功能，應(yīng)該配合圖標(biāo)使用并給予操作引導(dǎo)。

編輯模塊：

編輯模塊就是通常說的表單填寫頁(yè)，編輯模塊擁有新建，上傳，輸入，選擇一系列的交互方式，其目的是為了讓用戶錄入信息內(nèi)容，因此在編輯模塊的設(shè)計(jì)中應(yīng)該按照相對(duì)應(yīng)的前臺(tái)項(xiàng)目理清順序，從頭至尾合理引導(dǎo)，引導(dǎo)語(yǔ)盡量簡(jiǎn)短并闡明要義。在操作的過程中，應(yīng)當(dāng)給予用戶清晰、及時(shí)的反饋，并給予用戶返回、撤銷、清空、保存等操作。在表單的設(shè)計(jì)中，盡量將信息進(jìn)行單行縱向排列，每一條信息各占一行，并保持信息對(duì)齊方式一致，保證用戶視線流暢舒適。

第三步：統(tǒng)一操作/交互方式

電腦端常見的操作方式：

1.左鍵單擊

鼠標(biāo)單擊是指鼠標(biāo)點(diǎn)擊UI控件后釋放點(diǎn)擊的一種交互行為，在整個(gè)過程中，用戶點(diǎn)擊和釋放的坐標(biāo)點(diǎn)是一致的，不可有移動(dòng)的行為，點(diǎn)擊是建立在懸浮動(dòng)作之后的。左鍵單擊是最常用的PC端交互方式，其作用是觸發(fā)某一操作，整個(gè)頁(yè)面由很多鏈接、控件組成，而鼠標(biāo)單擊則是觸發(fā)這些可被操作的控件。

2.鼠標(biāo)懸浮

Hover就是我們通常說的鼠標(biāo)懸浮，當(dāng)用戶用鼠標(biāo)指針移過UI控件時(shí)，UI控件給予的反饋效果就是懸浮交互方式。懸浮的主要功能是「拓展」與「指示」。在很多情況下，我們的屏幕無法將更多的信息進(jìn)行展示時(shí)，通常會(huì)將眾多功能收納至一個(gè)控件當(dāng)中，而鼠標(biāo)懸浮則會(huì)觸發(fā)控件將其隱藏的功能進(jìn)行顯示。鼠標(biāo)懸浮的指示意義是為了讓我們更好的理解控件的屬性并提供及時(shí)反饋，比如將鼠標(biāo)懸浮在文字上，鼠標(biāo)會(huì)變成工字梁，將鼠標(biāo)懸浮在可點(diǎn)擊的控件上會(huì)變成小手表示可操作，懸浮至不可點(diǎn)擊控件上會(huì)變成問號(hào)等等。

在實(shí)際的設(shè)計(jì)當(dāng)中，我們可以為鼠標(biāo)懸浮賦予更多的可能性，鼠標(biāo)懸浮可以將未完全展示的文字進(jìn)行展示，也可以對(duì)收納起的功能進(jìn)行展示，還可以進(jìn)行許多快捷預(yù)覽等等，但是鼠標(biāo)懸浮最重要的功能則是為用戶提供交互行為時(shí)的「及時(shí)反饋」。

3.右鍵單擊

自從計(jì)算機(jī)操作系統(tǒng)誕生后就為右鍵賦予了「系統(tǒng)菜單」的交互意義，在不同的場(chǎng)景下點(diǎn)擊右鍵所出現(xiàn)的內(nèi)容是不一樣的，這取決與網(wǎng)頁(yè)與應(yīng)用的開發(fā)者，在網(wǎng)頁(yè)的設(shè)計(jì)中，將常用的快捷操作寫入右鍵菜單，會(huì)極大的提升工作效率，因?yàn)橛益I的菜單彈窗始終在鼠標(biāo)指針附近觸發(fā)，因此對(duì)于用戶尋找功能是非常友善的，但是需要注意的是右鍵的操作應(yīng)該全局統(tǒng)一，在同一套產(chǎn)品中，右鍵的內(nèi)容不應(yīng)該出現(xiàn)過多的功能，否則會(huì)對(duì)使用者造成困擾。

4.拖拽

拖拽，顧名思義就是鼠標(biāo)單擊某一文件不放進(jìn)行拖拽，拖拽操作相對(duì)與其他交互更具有操作感，因此在設(shè)計(jì)拖拽時(shí)，動(dòng)畫是一個(gè)必要的選擇，動(dòng)畫是表現(xiàn)交互給予反饋?zhàn)钪庇^最有趣的選擇，拖拽的動(dòng)畫最基礎(chǔ)的表現(xiàn)為被拖拽對(duì)象跟隨鼠標(biāo)進(jìn)行位移，而且松開鼠標(biāo)后，文件的最終歸屬位置。拖拽常用與復(fù)制、移動(dòng)順序、上傳、下載文件的場(chǎng)景，相對(duì)與普通的多步驟點(diǎn)擊操作，拖拽所反饋的定位更加明確，可以大大縮短尋找目錄、尋找文件的時(shí)間。

第四步：制定布局體系

布局框架是一套產(chǎn)品的骨架和基礎(chǔ)。只有在框架確定之后，設(shè)計(jì)師才可進(jìn)行下一步的構(gòu)建統(tǒng)一的視覺元素，清晰的功能操作，具體的交互流程等等。后臺(tái)產(chǎn)品是一個(gè)龐大的體系，除了對(duì)應(yīng)前臺(tái)產(chǎn)品的功能之外，還包括對(duì)產(chǎn)品部門的管理，產(chǎn)品相關(guān)的功能管理，不同身份對(duì)應(yīng)的權(quán)限管理等等，因此太過單一的布局形式并不能適用，因此我們?cè)谠O(shè)計(jì)后臺(tái)布局時(shí)應(yīng)該遵循簡(jiǎn)約化、統(tǒng)一化、規(guī)范化、拓展性強(qiáng)的原則。

對(duì)于擁有著眾多功能的后臺(tái)，我們應(yīng)該做到化繁為簡(jiǎn)，多而不亂，如果想做到這一點(diǎn)我們就應(yīng)該參考《簡(jiǎn)約至上》一書中所說的簡(jiǎn)約四要素：刪除、組織、隱藏、轉(zhuǎn)移。

刪除

在iPhone的外觀設(shè)計(jì)上，喬幫主一直信仰「少即是多」，就是我們通常說的做減法，這一偉大信仰在蘋果公司的產(chǎn)品上完美的體現(xiàn)了出來了，蘋果不論是線下門店還是官網(wǎng)、硬件、系統(tǒng)等等都將一切簡(jiǎn)約到了極致。用在我們的產(chǎn)品布局上，刪除就是將無用、重復(fù)的功能刪除，保留必要的功能，不要將和業(yè)務(wù)與用戶使用功能完全不相干的東西放在頁(yè)面上。

組織

組織的作用就是把業(yè)務(wù)相關(guān)的元素放一起，分個(gè)類，讓用戶可以更容易理解，比如有眾多的水果蔬菜，將水果放在一個(gè)籃子，將蔬菜放置在另一個(gè)籃子要比它們都混合放在一起更容易辨認(rèn)、查找。

人類喜歡規(guī)劃一切，喜歡井井有條的秩序，組織就是規(guī)劃，將整個(gè)頁(yè)面眾多的元素進(jìn)行規(guī)劃分類，把相關(guān)聯(lián)的元素模塊化，每個(gè)模塊之間應(yīng)該做好分割，分割包括：留白分割，分割線分割，模塊分割，Tab點(diǎn)擊分割，分割強(qiáng)度級(jí)從左至右越來越高。要注意的一點(diǎn)是組織存在爭(zhēng)議性，有的人他認(rèn)為番茄歸類為水果，而有的人認(rèn)為番茄應(yīng)該歸類為蔬菜，這辯論起來雙方似乎都有道理，所以在設(shè)計(jì)中，組織元素時(shí)應(yīng)該細(xì)細(xì)斟酌，對(duì)于這種墻頭草類型的功能，應(yīng)該謹(jǐn)慎處理，在了解用戶心智之后再做定義。

隱藏

隱藏是一種并不快捷的簡(jiǎn)約化的方案，隱藏通常是將使用頻次低的功能藏起來，等需要時(shí)再手動(dòng)調(diào)出使用，這些功能不常用但也并不代表沒用，比如設(shè)置頭像、名稱等等，隱藏可以讓頁(yè)面在視覺上更加輕量化，畢竟有限的空間還是要留給更重要的功能。

轉(zhuǎn)移

我們上學(xué)時(shí)做題，當(dāng)看到一道應(yīng)用題有足足幾百字，那我們下意識(shí)的想法就是，這題?的太難了，雖然還沒有開始思考。但是人們的潛意識(shí)就是對(duì)看似復(fù)雜的東西排斥。在諾基亞還處在全鍵盤的時(shí)候，Android機(jī)還有三大金剛鍵的時(shí)候，iPhone就已經(jīng)簡(jiǎn)約到了只保留home鍵、音量鍵和開機(jī)鍵，那么iPhone把其他所有的功能鍵都移除了，真的操作起來就簡(jiǎn)約了嗎，按照復(fù)雜度守恒定律來說并沒沒有，復(fù)雜依舊存在，只不過是將原本學(xué)習(xí)按鈕的過程轉(zhuǎn)移到了去屏幕里交互的過程，但是這樣子更容易被人所接受，因?yàn)槭菍?duì)復(fù)雜進(jìn)行了分步引導(dǎo)操作，就像跑馬拉松，如果你目標(biāo)想著跑完全程，那么你多半半路就廢了，但是如果你把目標(biāo)變成每5公里為一段，分為八個(gè)小目標(biāo)那么你可以很輕松堅(jiān)持到終點(diǎn)，這就是一種魔力，因?yàn)槊總€(gè)人都不喜歡把自己搞得很累。回歸至設(shè)計(jì)當(dāng)中，后臺(tái)是一個(gè)復(fù)雜的系統(tǒng)，功能可能多到眼花繚亂，但是如果將很多的步驟的一個(gè)流程分為眾多小步驟去合理引導(dǎo)，那么是否會(huì)更加的易于理解、便于操作呢，這就是轉(zhuǎn)移的用法。

動(dòng)靜態(tài)化布局

在制作后臺(tái)時(shí)，我們應(yīng)該遵循模塊化布局，并提前規(guī)劃好靜態(tài)模塊與動(dòng)態(tài)模塊。比如導(dǎo)航模塊、面包屑、按鈕等這些組件，在全局的位置應(yīng)該保持一致，這些就是靜態(tài)模塊，全局樣式與位置上不會(huì)出現(xiàn)過多變化。而動(dòng)態(tài)模塊一般就是內(nèi)容區(qū)域，因?yàn)闃I(yè)務(wù)與功能的不同，內(nèi)容模塊所展示的內(nèi)容是一定不同的，這一塊的內(nèi)容則是需要變化的。提前規(guī)劃靜態(tài)與動(dòng)態(tài)的布局在開發(fā)方面可以節(jié)省代碼量與開發(fā)成本，開發(fā)只需要將靜態(tài)模塊寫成固定的組件就可以達(dá)到全局復(fù)用，快速修改的效果，在用戶方面也可以大大的節(jié)省用戶的學(xué)習(xí)成本，因?yàn)橛脩粼趯W(xué)習(xí)了靜態(tài)模塊之后，之后則只需要再去學(xué)習(xí)動(dòng)態(tài)模塊就可以，而不需要每個(gè)頁(yè)面、每個(gè)組件都要去進(jìn)行學(xué)習(xí)。

響應(yīng)式布局

因?yàn)楹笈_(tái)大多數(shù)情況都是在Pc端與Pad端使用，這兩個(gè)終端的屏幕沒有固定的尺寸，可能有4k屏，可能有1k屏，當(dāng)然還有可能是筆記本電腦所使用的更小尺寸，因此在設(shè)計(jì)時(shí)不能使用固定的設(shè)計(jì)稿尺寸，而應(yīng)該使用較小的橫屏設(shè)計(jì)尺寸進(jìn)行設(shè)計(jì)，最早的屏幕分辨率低，通常都是使用900px~1100px的尺寸作為設(shè)計(jì)稿尺寸，但是隨著科技的發(fā)展，目前市面上的屏幕最低都是1080p的屏幕了，因此在設(shè)計(jì)時(shí)可以使用橫向「1200px」與「1440px」的尺寸作為設(shè)計(jì)稿尺寸，最大不應(yīng)該超過1600px的尺寸。

定好尺寸之后，在設(shè)計(jì)時(shí)我們應(yīng)該以響應(yīng)式布局的思維去設(shè)計(jì)，什么是響應(yīng)式布局，通俗說就是在屏幕變大的同時(shí)，頁(yè)面內(nèi)容會(huì)跟隨屏幕的變大而展示更多的內(nèi)容，需要注意的是：在屏幕變大的過程中，頁(yè)面的內(nèi)容應(yīng)該只會(huì)出現(xiàn)信息數(shù)量的變化與信息之間距離的變化，不應(yīng)該出現(xiàn)元素尺寸放大。在目前的設(shè)計(jì)中很多設(shè)計(jì)師喜歡使用柵格的設(shè)計(jì)方法，柵格布局具有易響應(yīng)、設(shè)計(jì)規(guī)范化等優(yōu)點(diǎn)，缺點(diǎn)就是可能會(huì)束縛設(shè)計(jì)師的發(fā)揮，在制作頁(yè)面時(shí)完全按照制定的柵格走，缺少了靈動(dòng)的感覺。雖然不見得要使用柵格布局法進(jìn)行設(shè)計(jì)，但是我們要了解柵格的原理，要使用柵格的思維去制作。

柵格就是將頁(yè)面劃分為不等的幾個(gè)模塊，可以是12個(gè)模塊，也可以是24個(gè)等等，每個(gè)模塊之間的間距使用固定的距離，叫做水槽，可以將這些模塊看做是參考線，水槽內(nèi)就是禁止區(qū)，我們?cè)谠O(shè)計(jì)時(shí)，將內(nèi)容設(shè)計(jì)在模塊內(nèi)，用水槽作為模塊之間的間距與留白使用，水槽只作為留白區(qū)域，不可以放置任何元素，最終開發(fā)時(shí)，響應(yīng)式布局就是將模尺寸塊隨著屏幕寬度的變化而變化，而水槽則不動(dòng)，如果屏幕變窄，不足以放下一個(gè)模塊時(shí)，這是則將模塊下移至第二行，水槽依然是不變的。

懂得了水槽的原理，那么我們?cè)O(shè)計(jì)的時(shí)候就算不用固定的柵格方式去制作，頁(yè)面也不會(huì)出現(xiàn)太大的錯(cuò)誤。

看懂了柵格之后總結(jié)一下，這不就是說一個(gè)模塊一個(gè)模塊的去設(shè)計(jì)么。沒錯(cuò)，在設(shè)計(jì)時(shí)我們就是將元素按模塊進(jìn)行設(shè)計(jì)，這里說的模塊不單單是指灰背景與白色塊這樣的組合，元素之間使用排版四要素中的親密也可以哦，只要是視覺上看起來是一塊一塊的，就算沒有分割線、分割塊它依然算是一個(gè)模塊。

回到了響應(yīng)式布局，當(dāng)我們按模塊進(jìn)行設(shè)計(jì)后，那么響應(yīng)式布局就是毛毛雨了，開發(fā)只需要在屏幕尺寸變寬的時(shí)候?qū)⒛K之間的距離拉大就可以了，這時(shí)就不是設(shè)計(jì)該去管的事情了。

總而言之就是，遵循響應(yīng)式布局的目的就是為了屏幕尺寸在不斷變化的同時(shí)，不會(huì)去影響改變內(nèi)容的整體觀感與體驗(yàn)，不會(huì)出現(xiàn)圖片拉伸，字體忽大忽小的情況。

間距

間距這個(gè)東西真是老生常談的事了，其實(shí)也沒什么太多說的，但是這里還是去大致說下，什么樣的間距比較合理，視覺上看起來比較舒服。

屏幕的分辨率都是以偶數(shù)為主，1600*900、1920*1080、2560*1440等等，因此我們?cè)谑褂瞄g距的時(shí)候最好使用偶數(shù)作為最小基數(shù)，然后其他間距以最小基數(shù)的倍數(shù)去制定，比如你最初制定的最小基數(shù)為2px，那么整套頁(yè)面的最小間距就使用2px，接著隨著間距的增大，就以2的偶數(shù)倍作為其他間距，比如2*2=4px、2*4=8px、2*8=16px等等，這樣做頁(yè)面不僅看起來比較規(guī)范，而且易于開發(fā)，易于記憶，不容易出現(xiàn)鋸齒。

因?yàn)槲覀兊暮笈_(tái)產(chǎn)品通常是在電腦屏幕上使用的，電腦屏幕距離人眼的距離相對(duì)于手機(jī)較遠(yuǎn)，而且后臺(tái)產(chǎn)品業(yè)務(wù)種類繁多，功能錯(cuò)綜復(fù)雜，因此元素之間并不太適合過度擁擠，否則閱讀起來就像報(bào)紙一樣，難以辨認(rèn)，效率低下。而過大的留白又會(huì)導(dǎo)致展示的信息量少，出現(xiàn)信息密度不足的情況，同樣會(huì)導(dǎo)致閱讀效率下降，因此在間距上我們應(yīng)該取中度，這個(gè)中度的標(biāo)準(zhǔn)就是將一個(gè)24寸的顯示器放在距離眼睛50cm的地方，然后去看這個(gè)頁(yè)面的間距，兩個(gè)元素看起來剛好不會(huì)很擁擠的時(shí)候，差不多就是剛剛好的，為什么使用24寸的顯示器呢，因?yàn)?4寸的顯示器市場(chǎng)占有率較高，也是在日常環(huán)境中眼睛視線范圍內(nèi)看起來比較舒服的尺寸，比24存再小的顯示器大多數(shù)就是筆記本屏幕了。

元素之間的科學(xué)距離通常使用等分原則與五分原則，就是同一模塊的元素距離使用a，不同模塊之間的距離則使用2a。

總結(jié)一下就是層級(jí)相同的模塊之間保持相同的間距（等分原則），層級(jí)不同的模塊保持不同的間距（五分原則）。

場(chǎng)景驅(qū)動(dòng)間距

場(chǎng)景驅(qū)動(dòng)間距，聽起來有點(diǎn)不易理解，其實(shí)是so easy的，舉個(gè)例子，當(dāng)你要去一個(gè)陌生的停車場(chǎng)找自己的車，你又不知道你車放哪的時(shí)候，這時(shí)，你最希望的就是來一架無人機(jī)，從航拍的角度去看所有車輛，然后看哪個(gè)像自己的車，在做決定。當(dāng)你找到你的車了，你要看看你車有沒有被剮蹭，油還多不多了，你就需要放下無人機(jī)，走到車前仔細(xì)觀看，而這時(shí)，整個(gè)停車場(chǎng)的布局什么的對(duì)你就沒什么太大意義了。

這回應(yīng)該很好理解了吧，找車就是信息檢索，找到車了進(jìn)去看車?yán)镉心居杏途褪莾?nèi)容閱讀。信息檢索，通常在后臺(tái)以列表的形式存在，且常常配合檢索功能（搜索、篩選、排序）等，這時(shí)檢索出的信息密度一定要大，因?yàn)橛脩粜枰诖竺芏刃畔⒅锌焖贋g覽，找到符合自己的東西，假如你要是在淘寶搜索一個(gè)襪子，結(jié)果一屏就顯示一條，你要瀏覽時(shí)，你還要來回翻頁(yè)，你是否會(huì)很崩潰呢？

而篩選出的內(nèi)容，這條內(nèi)容就是用戶千挑萬選出來屬于他的精華，他會(huì)仔細(xì)查看這個(gè)信息的詳情，這時(shí)，我們要做的就是將留白加大，字間距加大，字號(hào)加大，讓他很舒服的把這個(gè)信息閱讀完成。還是上個(gè)例子，你淘寶搜索到了襪子，你要看看它的顏色，布料材質(zhì)，穿上臭不臭等，這時(shí)襪子的的詳情頁(yè)信息比報(bào)紙還要擁擠，還需要你用放大鏡才能看清，這時(shí)，你是否再次奔潰了呢。然后就直接關(guān)閉淘寶，前往京東查看了。。。

說了這么多就是，用戶在進(jìn)行信息檢索時(shí)需要將間距適當(dāng)調(diào)小，在保證有效閱讀的條件下，盡量在一屏內(nèi)顯示更多的內(nèi)容，當(dāng)用戶篩選完成準(zhǔn)備閱讀內(nèi)容時(shí)，我們就要放大間距，最大的保證閱讀的舒適性。這只是其中的一條小例子，場(chǎng)景可能千千萬，這就需要設(shè)計(jì)師自己動(dòng)腦去思考，去模擬了。

第五步：制定色彩體系

上帝說：要有光??！而顏色就是我們對(duì)光產(chǎn)生的視覺效應(yīng)，目前我們?nèi)庋劭梢姷念伾蠹s是100多萬種，那么這么多種顏色，選什么色作為主要的色彩使用在頁(yè)面上呢，其實(shí)很簡(jiǎn)單，這么多顏色，我們只需要把色彩大致的分成：赤橙黃綠青藍(lán)紫這7個(gè)顏色就可以了，畢竟人類更注重的是全局觀，一個(gè)顏色，你稍微深一點(diǎn)，稍微淺一點(diǎn)，99%人都分辨不出來，畢竟大多數(shù)男性連口紅色都分辨不出來呢。

在色彩中，色彩有三個(gè)屬性：色相、明度、飽和度，這三個(gè)屬性只要我們了解了原理就可以手動(dòng)調(diào)色了，有人說，手調(diào)的不準(zhǔn)確，不科學(xué)，那么如果你會(huì)寫色彩的算法，請(qǐng)略過此處，普通人還是手動(dòng)調(diào)調(diào)比較好，因?yàn)?，只要是掌握了色彩心理學(xué)，色感別太差，全局色彩統(tǒng)一，對(duì)于中小公司完全可用。

調(diào)色怎么調(diào)呢，第一看色相，色相決定的色彩的大方向，那么色相條中這么多顏色，用那個(gè)色相范圍好呢，這個(gè)就要看色彩心里學(xué)了，通常我們看到紅色想起什么？五星紅旗、黨、激情、慷慨激昂、股票大漲，那老外看到紅色呢，血腥、暴力、鬧鬼了，同樣一個(gè)紅色，咋國(guó)內(nèi)外差距這么大呢，這要說的就多了，畢竟是歷史遺留問題，政治問題，生活傳統(tǒng)問題等等，具體請(qǐng)參考度娘。。。除了紅色，還有橙黃綠青藍(lán)紫六種顏色呢，當(dāng)你看到其他的顏色你想到什么，那這就是色彩心理，因?yàn)槟闶裁炊紱]干，就看個(gè)顏色就能腦補(bǔ)各種東西，有了各種感覺，色彩是不很神奇，沒錯(cuò)就是很神奇，不同的色彩對(duì)于不同的地域的人群，不同職業(yè)的人群，不同年齡的人群都會(huì)有不同的色彩心里，這個(gè)具體就不細(xì)說了，知乎，百度一大堆相關(guān)研究。而我們要做的就是根據(jù)你的業(yè)務(wù)屬性和面對(duì)的相關(guān)人群，使用他們的色彩心里去制定你的色相，要是面對(duì)醫(yī)療行業(yè)，可能綠色是個(gè)不錯(cuò)的選擇，如果要是面對(duì)政府行業(yè)，或許紅色更討領(lǐng)導(dǎo)們喜歡。

確定好色相范圍了，那么接下來我們就需要再考慮考慮飽和度問題了，飽和度是什么，愛修圖的女性朋友一定知道，色彩的飽和度越高，那顏色越鮮艷，飽和度越低，色彩越枯燥，飽和度為0，嗯沒錯(cuò)，50年前的電視機(jī)就沒有飽和度。在制定顏色的時(shí)候，飽和度往往決定了年齡屬性，一般年齡偏大的人不喜歡那花里胡哨的鮮艷，更喜歡柔和中性的顏色，年輕人更喜歡炫酷潮流的高飽和顏色，這么一說你們應(yīng)該就恍然大悟了吧，年齡高的人群用低保和，年齡低的人用高飽和，對(duì)，也不全對(duì)，飽和度不只是和年齡掛鉤，也和產(chǎn)品的屬性掛鉤，就像蘭州拉面的門頭看上去貌似有點(diǎn)low，但是看蘋果的門頭，覺得好像挺高端，為什么呢，因?yàn)檫^重的飽和度給人親近感，但是相對(duì)來說就少了高級(jí)感，低保和俗稱性冷淡風(fēng)，給你一種高級(jí)感，比如莫蘭迪色，飽和度較低的顏色會(huì)給人高級(jí)感，但會(huì)顯得不近人情，飽和度較高給人廉價(jià)感，但是更親民一些。

至于明度，就是顏色的亮度了，當(dāng)你調(diào)完色相和飽和度時(shí)，發(fā)現(xiàn)這個(gè)顏色貌似有點(diǎn)刺眼，那么你就把亮度調(diào)低點(diǎn)，如果發(fā)現(xiàn)有點(diǎn)看不清，那么你就把明度調(diào)高點(diǎn)，明度就是這樣子使用的吧~~~~

在使用顏色的同時(shí)還需要注意可視度，過淺顏色的按鈕放上白色的字，眼神不好是看不清的，具體對(duì)比度什么樣才算合理，請(qǐng)參考WCAG標(biāo)準(zhǔn)，能通過這個(gè)標(biāo)準(zhǔn)的，在可訪問性上就沒問題。

顏色舒適性

后臺(tái)，大部分情況是企業(yè)自己用，或者給客戶的幕后人員使用，相對(duì)于品牌色來說或許更在乎顏色的舒適性，紅色波長(zhǎng)，通常用作警示，所以看起來就比較刺眼，藍(lán)色紫色波短，看起來就相對(duì)柔和，后臺(tái)也許是很多人日常高頻使用的工具，因此在舒適度上盡量要完美，舒適度包括較大的交互區(qū)域，合理的間距，基于人類視線的合理排版等等，這里我們只說顏色，不同人對(duì)于顏色的感知是不同的，但是基于色彩心理來講，藍(lán)色給人冷靜理智安逸的感覺，因此，在大多數(shù)的后臺(tái)產(chǎn)品當(dāng)中，藍(lán)色作為主題色的居多。

最終總結(jié)一下，不管是選擇什么顏色作為主題色，一定要保證不能刺眼，否則對(duì)于長(zhǎng)時(shí)間使用的操作者來說會(huì)是一個(gè)災(zāi)難性的問題，可能輕者視疲勞，重者干眼癥青光眼。。。再者飽和度盡量不要過高，飽和度為：100是絕對(duì)不可以的，因?yàn)檫^于炫目的顏色會(huì)激起使用者的負(fù)面情緒，引起焦躁和不安的情緒，因此過高的飽和不可取。

第五步：制定文字體系

文字，是我們記錄信息的主要工具，在后臺(tái)頁(yè)面的設(shè)計(jì)中，我們不需要對(duì)字形進(jìn)行設(shè)計(jì)，只需要使用Web端常用的標(biāo)準(zhǔn)字體就可以。

文字還有許多其他的屬性，合理運(yùn)用屬性可以大幅的提高文字的閱讀效率。后臺(tái)的元素較為簡(jiǎn)約樸素，以文字為主，較少的圖形作為輔助元素，在整屏頁(yè)面的元素中，文字占據(jù)了大多數(shù)，那么如何體現(xiàn)出哪些信息重要，哪些信息次要，這時(shí)文字的字重屬性與字體尺寸屬性就可以完美的幫我們解決這個(gè)問題。字重越重的字越有力量感，辨認(rèn)度越高，視覺重點(diǎn)越高，字重越輕的字體，給人文藝典雅高端的感覺，后臺(tái)算是B端產(chǎn)品，應(yīng)該是不大需要高端文藝的感覺的，引導(dǎo)視覺與可讀性更重要一些，因此我們常規(guī)下就使用標(biāo)準(zhǔn)Regular字重就可以，再輕的字體閱讀起來比較費(fèi)勁就沒必要再去使用了，而像標(biāo)題、主文案、按鈕這些文字，我們可以使用更重的字體與更大的尺寸來突出，將重點(diǎn)信息的層級(jí)拉開，引起用戶的視覺注意。

當(dāng)整頁(yè)的閱讀信息較多時(shí)，我們需注意將文字適當(dāng)放大，正常情況下網(wǎng)頁(yè)的文字為14px，但是在大篇幅的連貫性文字出現(xiàn)時(shí)，我們應(yīng)該將文字的尺寸合理升至16px或者18px的大小，在行間距與字間距上也應(yīng)該適當(dāng)加大，那么行間距（行高）為多少比較適合呢，正常情況下我們使用sketch自帶的行高就可以，對(duì)于文字信息較多的情況下，我們使用1.2-1.8倍的行高就比較容易閱讀，在以閱讀為主的頁(yè)面中，比如文章閱讀頁(yè)、文檔頁(yè)這些情景下，使用1.5-2.5倍的行距更好，有人會(huì)說1.5倍間距就已經(jīng)很大了，其實(shí)不然，當(dāng)你在長(zhǎng)時(shí)間閱讀信息的時(shí)候，越到后面閱讀效率越低，那么超大的行距可以有效緩解閱讀疲勞感，在長(zhǎng)時(shí)間閱讀的情況下也可以避免串行的問題發(fā)生。

字體顏色也是一個(gè)需要注意的地方，通常我們?yōu)榱吮阌谟洃?，使用灰度色就可以，一般色值?222222、#333333、#666666、#999999、#CCCCCC這些，在一個(gè)頁(yè)面中，正文文字的顏色不應(yīng)該超過3種色值，通常為一個(gè)標(biāo)題色，一個(gè)文本色，一個(gè)輔助色，高亮色另說。顏色的使用主要目的是為了凸顯信息，過多的使用顏色會(huì)給用戶造成有很多層級(jí)的錯(cuò)覺，導(dǎo)致層級(jí)混淆，頁(yè)面混亂。

第六步：提升趣味度

當(dāng)后臺(tái)產(chǎn)品的結(jié)構(gòu)與信息元素全部排版完成后，這時(shí)我們會(huì)發(fā)現(xiàn)，整個(gè)頁(yè)面除了文字和按鈕貌似沒有什么其他的東西了，確實(shí)，我們作為一個(gè)開發(fā)人員看起來都倍覺單調(diào)，更不用說每天使用我們產(chǎn)品的用戶了，更是枯燥的要死。有人說，B端產(chǎn)品以效率為主，本身不就是枯燥的文字嘛，道理是這么個(gè)道理，但是作為開發(fā)人員，讓用戶使用的開心也是我們的一個(gè)任務(wù)，俗言道：一圖勝千言，假如我們要學(xué)習(xí)一段歷史，我相信比起來看書本上的文字，看電視劇的方式應(yīng)該更受人青睞吧，誰(shuí)都不喜歡全是文字的東西，客戶也是一樣的，因此我們應(yīng)該對(duì)頁(yè)面進(jìn)行適當(dāng)修飾，不應(yīng)該把頁(yè)面做成一個(gè)txt的文本文件。那么怎么去合理的修飾頁(yè)面呢，很簡(jiǎn)單，圖表化、圖形化。

什么是圖表化，簡(jiǎn)單解釋來說就是將有規(guī)律的數(shù)據(jù)進(jìn)行分類總結(jié)，用適合此類數(shù)據(jù)的圖表進(jìn)行展示，舉個(gè)簡(jiǎn)單的例子，狗蛋想要去買股票，但是不知道買哪一只，于是想上網(wǎng)查一查最近5年每個(gè)公司的股票走勢(shì)，結(jié)果找到了兩份文件，一個(gè)是滿是文字的數(shù)據(jù)列表文檔，另一個(gè)是精美直觀的K線圖，那么你是狗蛋你會(huì)閱讀哪個(gè)呢，當(dāng)然去看k線圖了，畢竟3秒鐘就能知道個(gè)大概，如果看數(shù)據(jù)報(bào)表，眼花不說，一上午都不見得能閱讀完。這時(shí)你就會(huì)發(fā)現(xiàn)圖表的魅力。

那么圖形化又是什么呢，依然很簡(jiǎn)單，就是將固定不變得字段圖標(biāo)化，將難以理解的字段插畫化。人天生對(duì)于圖形的識(shí)別能力就優(yōu)于文字，對(duì)那些靜態(tài)的字段給與圖標(biāo)的展示會(huì)大大提高用戶的識(shí)別效率，什么是靜態(tài)的字段呢？比如固定的按鈕、導(dǎo)航、目錄、設(shè)置等等，全局都長(zhǎng)那樣，不會(huì)因?yàn)榍袚Q場(chǎng)景而改變文字，這些就非常適合使用文字與圖標(biāo)相互配合來提升趣味度與辨識(shí)度了。

那么插畫化又是什么呢？說白了就是將用戶懶得看的那些字配張圖，讀書時(shí)我們的課本都是圖文并茂的，那教育部就是怕學(xué)生光看文字產(chǎn)生厭倦導(dǎo)致不好好學(xué)習(xí)。同樣的道理，有很多情況下，用戶也懶的看文字，比如升級(jí)頁(yè)，升級(jí)功能信息那么多字，不如多放幾張圖來的實(shí)在，這也就是那些APP產(chǎn)品為什么都有引導(dǎo)頁(yè)的原因。

第七步：合理引導(dǎo)

當(dāng)你看到這一步的時(shí)候，說明你的后臺(tái)已經(jīng)完成的差不多了，后臺(tái)是個(gè)極其復(fù)雜的系統(tǒng)，一個(gè)新手去學(xué)習(xí)使用一套后臺(tái)就像一個(gè)菜鳥去學(xué)習(xí)玩一款新游戲一樣，只不過游戲有我們的興趣驅(qū)動(dòng)，興趣是最好的老師，而后臺(tái)則不同了，學(xué)習(xí)使用后臺(tái)的那都是為了工作，興趣可就沒那么強(qiáng)了，如果恰恰碰到了做的很復(fù)雜的后臺(tái)，那客戶可能當(dāng)場(chǎng)崩潰，古有唐雎之怒，流血五步，今有員工之怒，當(dāng)場(chǎng)跑路，沒準(zhǔn)產(chǎn)品學(xué)不會(huì)，人家就辭職了。想想都覺得很嚴(yán)重，這時(shí)就體現(xiàn)出了合理引導(dǎo)的重要性，那么什么叫做合理引導(dǎo)呢？引導(dǎo)分為很多種，有新手引導(dǎo)、新功能引導(dǎo)、版本變更引導(dǎo)，操作流程引導(dǎo)等等，但是最終的目的是為了讓用戶快速學(xué)會(huì)使用你的產(chǎn)品。

新手引導(dǎo)：

可以使用視頻教學(xué)，文字教學(xué)，體驗(yàn)教學(xué)等等，具體怎么使用應(yīng)該根據(jù)自身的業(yè)務(wù)進(jìn)行分析，看看適合用哪種的方法。

新功能引導(dǎo)：

要多提示，可以是紅點(diǎn)提示，高亮提示，彈窗提示等，這塊的主要目的就是：要將新功能在什么位置、有什么功能告知用戶，別你功能去年就更新了，用戶今年還不知道呢~，這就尷尬了。

版本變更引導(dǎo)：

每個(gè)版本交互設(shè)計(jì)師，產(chǎn)品經(jīng)理，體驗(yàn)設(shè)計(jì)團(tuán)隊(duì)等等一大堆人去探討，將舊版本不合理的功能升級(jí)，去除，換位置，合并等等，每動(dòng)一點(diǎn)，用戶都需要從新學(xué)習(xí)，因此當(dāng)版本變更導(dǎo)致操作習(xí)慣和之前不同時(shí)就要提示用戶最新的版本內(nèi)容，最重要的是要對(duì)比引導(dǎo)，舊版本怎么回事，新版本怎么回事，在這一塊可供參考的有很多，如Adobe全家桶每年的大版本更新，Autodesk全家桶的大版本更新，游戲的大版本更新等等，他們甚至還會(huì)出一個(gè)專門的文檔來描述新舊版本更新對(duì)比。

操作流程引導(dǎo)：

顧名思義就是引導(dǎo)用戶完成某一套操作流程，就像LOL里，剛注冊(cè)游戲時(shí)，系統(tǒng)會(huì)引導(dǎo)你完成一局游戲，告訴你該點(diǎn)擊哪里進(jìn)行匹配，點(diǎn)擊哪里選英雄等等，這種引導(dǎo)通常是讓用戶在真實(shí)場(chǎng)景下邊操作邊引導(dǎo)，紙上得來終覺淺，須知此事要躬行嘛，身臨其境的體驗(yàn)才是快速學(xué)習(xí)的王道，這種的引導(dǎo)非常適用于操作步驟繁瑣的產(chǎ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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( tweetduck.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ù)