2021-12-3 ui設(shè)計分享達(dá)人
因為后臺是一個非常廣泛的且深奧的東西，里面包含了太多的業(yè)務(wù)邏輯，而且每個產(chǎn)品面向的用戶群體又不同，因此不可能說的面面俱到，但是我提煉的這七個步驟適用于大部分后臺的一個宏觀方向，對于一個沒有后臺項目經(jīng)驗的人去從頭制作一款后臺產(chǎn)品應(yīng)該是非常有幫助的。
導(dǎo)航是后臺的主軀干，一切操作都需要在導(dǎo)航的指引下進(jìn)行切換，目前常用的有兩種導(dǎo)航，頂部導(dǎo)航與樹狀導(dǎo)航。
頂部導(dǎo)航是大多數(shù)Web端網(wǎng)站使用的導(dǎo)航模式，因為人的閱讀視覺是從上往下，從左往右，因此，頂部是視角最先達(dá)到的地方，頂部導(dǎo)航可以讓用戶快速了解整個網(wǎng)站的主要內(nèi)容結(jié)構(gòu)，通常在營銷級官網(wǎng)，內(nèi)容瀏覽平臺被廣泛應(yīng)用（例如京東，阿里云，站酷...）。
但是其弊端也是很顯而易見的，因為屏幕寬度的限制，在小屏下，頂部顯示文本內(nèi)容有限，通常只有幾個字符的內(nèi)容，更多內(nèi)容或二級標(biāo)題則需要進(jìn)行隱藏顯示。其次因為人類身體結(jié)構(gòu)，成年人的頭顱約為4.5～5.5公斤，占據(jù)身體7.7%左右的重量，我們的頸椎承受了太多，因此人在左右扭頭時要比上下點頭更舒服。再者人類的眼睛是左右排布的，與生俱來兩邊的視線就優(yōu)于上下的視線，頂部導(dǎo)航如果需要高頻次使用的話會讓用戶非常的勞累。
優(yōu)點：節(jié)約空間、可以快速吸睛
缺點：顯示文本內(nèi)容有限，不符合人體工程學(xué)，不方便查找
在很多生產(chǎn)力工具上，后臺網(wǎng)站上，B端產(chǎn)品上，閱讀軟件上，樹狀導(dǎo)航被廣泛運用。樹狀導(dǎo)航是以父子層次結(jié)構(gòu)來組織對象的，其優(yōu)點非常顯著：兼容性強，結(jié)構(gòu)清晰，拓展性強等等。
先說兼容性，因為每條導(dǎo)航標(biāo)題呈上下排布，因此一排只需顯示一條標(biāo)題，對于長標(biāo)題與外文適配顯得格外的友好。樹狀導(dǎo)航具有良好的層次關(guān)系，每一層內(nèi)容都可以固定性的展示出來，不會像頂部導(dǎo)航必須鼠標(biāo)懸浮才會顯示子層級，不論是從便于梳理層次關(guān)系的角度來講，還是頻繁操作的簡單化來說是都是完勝于頂部導(dǎo)航的。因為網(wǎng)頁默認(rèn)是上下滑動來查閱更多內(nèi)容的，因此樹狀導(dǎo)航的拓展性方面碾壓頂部導(dǎo)航，樹狀導(dǎo)航可以無限的向下拓展，就像書籍的目錄一樣，而頂部導(dǎo)航則只能顯示寥寥無幾的幾個單詞。
優(yōu)點：可以展示更多的標(biāo)題內(nèi)容、可以不限制標(biāo)題條數(shù)無限拓展、結(jié)構(gòu)清晰易懂
缺點：占據(jù)空間較大，對于小屏可能需要頻繁展開、收起導(dǎo)航
后臺的主要功能是支撐前臺產(chǎn)品，管理資源，因此在邏輯與結(jié)構(gòu)的梳理上應(yīng)當(dāng)與前臺產(chǎn)品保持一致性，在布局的制定上應(yīng)當(dāng)遵循模塊化、響應(yīng)式、高效化的布局，以便于清晰地傳達(dá)信息。
在后臺的布局中，通常需要將數(shù)據(jù)統(tǒng)計、展示與列表、操作區(qū)分開來，達(dá)到看歸看，做歸做的原則，如果混淆到一起就會大大的提升認(rèn)知難度和操作難度， 就像老款的汽車的儀表盤與中控操作區(qū)分開來，用戶就會很快的上手，但是像特斯拉都集成在一塊屏幕上就會讓用戶傻傻分不清楚，一時間難以找到相應(yīng)的操作區(qū)域。因此模塊化在后臺則顯得格外重要，每個模塊、每個區(qū)域都應(yīng)當(dāng)賦予它獨特且自始至終不變的屬性，比如頂部的導(dǎo)航條，全局都在頂部區(qū)域展示，而不是這個頁面在頂部，下個頁面在底部。
后臺的布局中，常用的模塊就是導(dǎo)航模塊（整個后臺功能的結(jié)構(gòu)提綱），總導(dǎo)航就是我在上文提到的兩種，頂部導(dǎo)航和樹樁導(dǎo)航，其他還有二級導(dǎo)航，面包屑導(dǎo)航等等，但是需要注意的是，導(dǎo)航就像路標(biāo)，起到指引用戶的作用，因此在全局的樣式與位置應(yīng)保持統(tǒng)一。
顧名思義就是提示用戶有新的消息，新的功能等等，提醒模塊十分重要，因為它是實時性的，在設(shè)計提醒模塊時應(yīng)當(dāng)遵循全局化、機動化，高亮化，動態(tài)化的規(guī)則，在常規(guī)狀態(tài)下，提醒模塊應(yīng)該隱藏展示，不過多的打擾用戶，但是如果在需要出現(xiàn)時，不論用戶處于什么樣的場景，提醒模塊都應(yīng)該在第一時間出現(xiàn)，并以醒目的方式告知用戶。
數(shù)據(jù)統(tǒng)計通常是作為后臺頁面頭部的存在，用戶一進(jìn)網(wǎng)站映入眼簾的就是整個產(chǎn)品或者整個項目的數(shù)據(jù)統(tǒng)計，數(shù)據(jù)是作為衡量某一件事情好壞的重要標(biāo)準(zhǔn)，數(shù)據(jù)也通?？梢哉f明一個決策、一項任務(wù)的最終結(jié)果，在數(shù)據(jù)統(tǒng)計模塊的設(shè)計上應(yīng)該保持直觀，一針見血的設(shè)計方式，比如股票的K線圖，紅漲綠跌，一目了然。
有許多使用頻次非常高的功能可能會貫穿全局，比如谷歌Email，不論在哪個頁面，日期、Task功能都會在右側(cè)進(jìn)行顯示，方便用戶隨時添加待辦，記筆記等等。在后臺中，有很多時候一個小工具就可以提升很大的效率，不必在來回切換軟件、頁面，有很多情況下，我們看到了一個東西，聯(lián)想起了某一件事情，打算記錄下來，但是退出這個頁面再去打開記事本的時候發(fā)現(xiàn)已經(jīng)忘記了（這該死的7秒記憶）。因此在有些情況下，縮短操作路徑是一個不錯的選擇，而快捷操作模塊也同樣要遵循全局固定位置，不可隨意變動的原則，如果違背，效果往往會適得其反。
信息展示，這個模塊應(yīng)該是最難搞定的了，不管是什么頁面，信息都是重中之重，沒有信息的頁面那和沒有肉的肉夾饃一樣。內(nèi)容展示模塊不同于以上的模塊是全局靜止的，內(nèi)容展示模塊承載了后臺95%以上的頁面量，每一個頁面都不同。因為后臺頁面大部分時間都是以電腦端網(wǎng)頁的形式呈現(xiàn)，人在看電腦時通常會和顯示器之間有30-50cm的距離，甚至可能更遠(yuǎn)，因此在內(nèi)容的展示模塊上應(yīng)當(dāng)給予友善的設(shè)計，比如加大文字之間的字間距，行間距，突出重要信息，以圖文并茂的形式將枯燥的信息情趣化，沒有內(nèi)容的模塊放置缺省提示圖。
操作模塊通常是與內(nèi)容展示模塊共同存在的，兩者互相配合使用，凡是在頁面中涉及到可以點擊交互的區(qū)域統(tǒng)稱為操作模塊，操作模塊應(yīng)該全局統(tǒng)一視覺語言以及操作語言，比如，按鈕樣式及大小，開關(guān)樣式，分頁器擺放位置及樣式等等。所有的操作模塊表意性要強，讓用戶可以快速明白點擊后的結(jié)果，如果遇到難以理解的操作功能，應(yīng)該配合圖標(biāo)使用并給予操作引導(dǎo)。
編輯模塊就是通常說的表單填寫頁，編輯模塊擁有新建，上傳，輸入，選擇一系列的交互方式，其目的是為了讓用戶錄入信息內(nèi)容，因此在編輯模塊的設(shè)計中應(yīng)該按照相對應(yīng)的前臺項目理清順序，從頭至尾合理引導(dǎo)，引導(dǎo)語盡量簡短并闡明要義。在操作的過程中，應(yīng)當(dāng)給予用戶清晰、及時的反饋，并給予用戶返回、撤銷、清空、保存等操作。在表單的設(shè)計中，盡量將信息進(jìn)行單行縱向排列，每一條信息各占一行，并保持信息對齊方式一致，保證用戶視線流暢舒適。
電腦端常見的操作方式：
鼠標(biāo)單擊是指鼠標(biāo)點擊UI控件后釋放點擊的一種交互行為，在整個過程中，用戶點擊和釋放的坐標(biāo)點是一致的，不可有移動的行為，點擊是建立在懸浮動作之后的。左鍵單擊是最常用的PC端交互方式，其作用是觸發(fā)某一操作，整個頁面由很多鏈接、控件組成，而鼠標(biāo)單擊則是觸發(fā)這些可被操作的控件。
Hover就是我們通常說的鼠標(biāo)懸浮，當(dāng)用戶用鼠標(biāo)指針移過UI控件時，UI控件給予的反饋效果就是懸浮交互方式。懸浮的主要功能是「拓展」與「指示」。在很多情況下，我們的屏幕無法將更多的信息進(jìn)行展示時，通常會將眾多功能收納至一個控件當(dāng)中，而鼠標(biāo)懸浮則會觸發(fā)控件將其隱藏的功能進(jìn)行顯示。鼠標(biāo)懸浮的指示意義是為了讓我們更好的理解控件的屬性并提供及時反饋，比如將鼠標(biāo)懸浮在文字上，鼠標(biāo)會變成工字梁，將鼠標(biāo)懸浮在可點擊的控件上會變成小手表示可操作，懸浮至不可點擊控件上會變成問號等等。
在實際的設(shè)計當(dāng)中，我們可以為鼠標(biāo)懸浮賦予更多的可能性，鼠標(biāo)懸浮可以將未完全展示的文字進(jìn)行展示，也可以對收納起的功能進(jìn)行展示，還可以進(jìn)行許多快捷預(yù)覽等等，但是鼠標(biāo)懸浮最重要的功能則是為用戶提供交互行為時的「及時反饋」。
自從計算機操作系統(tǒng)誕生后就為右鍵賦予了「系統(tǒng)菜單」的交互意義，在不同的場景下點擊右鍵所出現(xiàn)的內(nèi)容是不一樣的，這取決與網(wǎng)頁與應(yīng)用的開發(fā)者，在網(wǎng)頁的設(shè)計中，將常用的快捷操作寫入右鍵菜單，會極大的提升工作效率，因為右鍵的菜單彈窗始終在鼠標(biāo)指針附近觸發(fā)，因此對于用戶尋找功能是非常友善的，但是需要注意的是右鍵的操作應(yīng)該全局統(tǒng)一，在同一套產(chǎn)品中，右鍵的內(nèi)容不應(yīng)該出現(xiàn)過多的功能，否則會對使用者造成困擾。
拖拽，顧名思義就是鼠標(biāo)單擊某一文件不放進(jìn)行拖拽，拖拽操作相對與其他交互更具有操作感，因此在設(shè)計拖拽時，動畫是一個必要的選擇，動畫是表現(xiàn)交互給予反饋最直觀最有趣的選擇，拖拽的動畫最基礎(chǔ)的表現(xiàn)為被拖拽對象跟隨鼠標(biāo)進(jìn)行位移，而且松開鼠標(biāo)后，文件的最終歸屬位置。拖拽常用與復(fù)制、移動順序、上傳、下載文件的場景，相對與普通的多步驟點擊操作，拖拽所反饋的定位更加明確，可以大大縮短尋找目錄、尋找文件的時間。
布局框架是一套產(chǎn)品的骨架和基礎(chǔ)。只有在框架確定之后，設(shè)計師才可進(jìn)行下一步的構(gòu)建統(tǒng)一的視覺元素，清晰的功能操作，具體的交互流程等等。后臺產(chǎn)品是一個龐大的體系，除了對應(yīng)前臺產(chǎn)品的功能之外，還包括對產(chǎn)品部門的管理，產(chǎn)品相關(guān)的功能管理，不同身份對應(yīng)的權(quán)限管理等等，因此太過單一的布局形式并不能適用，因此我們在設(shè)計后臺布局時應(yīng)該遵循簡約化、統(tǒng)一化、規(guī)范化、拓展性強的原則。
對于擁有著眾多功能的后臺，我們應(yīng)該做到化繁為簡，多而不亂，如果想做到這一點我們就應(yīng)該參考《簡約至上》一書中所說的簡約四要素：刪除、組織、隱藏、轉(zhuǎn)移。
在iPhone的外觀設(shè)計上，喬幫主一直信仰「少即是多」，就是我們通常說的做減法，這一偉大信仰在蘋果公司的產(chǎn)品上完美的體現(xiàn)了出來了，蘋果不論是線下門店還是官網(wǎng)、硬件、系統(tǒng)等等都將一切簡約到了極致。用在我們的產(chǎn)品布局上，刪除就是將無用、重復(fù)的功能刪除，保留必要的功能，不要將和業(yè)務(wù)與用戶使用功能完全不相干的東西放在頁面上。
組織的作用就是把業(yè)務(wù)相關(guān)的元素放一起，分個類，讓用戶可以更容易理解，比如有眾多的水果蔬菜，將水果放在一個籃子，將蔬菜放置在另一個籃子要比它們都混合放在一起更容易辨認(rèn)、查找。
人類喜歡規(guī)劃一切，喜歡井井有條的秩序，組織就是規(guī)劃，將整個頁面眾多的元素進(jìn)行規(guī)劃分類，把相關(guān)聯(lián)的元素模塊化，每個模塊之間應(yīng)該做好分割，分割包括：留白分割，分割線分割，模塊分割，Tab點擊分割，分割強度級從左至右越來越高。要注意的一點是組織存在爭議性，有的人他認(rèn)為番茄歸類為水果，而有的人認(rèn)為番茄應(yīng)該歸類為蔬菜，這辯論起來雙方似乎都有道理，所以在設(shè)計中，組織元素時應(yīng)該細(xì)細(xì)斟酌，對于這種墻頭草類型的功能，應(yīng)該謹(jǐn)慎處理，在了解用戶心智之后再做定義。
隱藏是一種并不快捷的簡約化的方案，隱藏通常是將使用頻次低的功能藏起來，等需要時再手動調(diào)出使用，這些功能不常用但也并不代表沒用，比如設(shè)置頭像、名稱等等，隱藏可以讓頁面在視覺上更加輕量化，畢竟有限的空間還是要留給更重要的功能。
我們上學(xué)時做題，當(dāng)看到一道應(yīng)用題有足足幾百字，那我們下意識的想法就是，這題?的太難了，雖然還沒有開始思考。但是人們的潛意識就是對看似復(fù)雜的東西排斥。在諾基亞還處在全鍵盤的時候，Android機還有三大金剛鍵的時候，iPhone就已經(jīng)簡約到了只保留home鍵、音量鍵和開機鍵，那么iPhone把其他所有的功能鍵都移除了，真的操作起來就簡約了嗎，按照復(fù)雜度守恒定律來說并沒沒有，復(fù)雜依舊存在，只不過是將原本學(xué)習(xí)按鈕的過程轉(zhuǎn)移到了去屏幕里交互的過程，但是這樣子更容易被人所接受，因為是對復(fù)雜進(jìn)行了分步引導(dǎo)操作，就像跑馬拉松，如果你目標(biāo)想著跑完全程，那么你多半半路就廢了，但是如果你把目標(biāo)變成每5公里為一段，分為八個小目標(biāo)那么你可以很輕松堅持到終點，這就是一種魔力，因為每個人都不喜歡把自己搞得很累。回歸至設(shè)計當(dāng)中，后臺是一個復(fù)雜的系統(tǒng)，功能可能多到眼花繚亂，但是如果將很多的步驟的一個流程分為眾多小步驟去合理引導(dǎo)，那么是否會更加的易于理解、便于操作呢，這就是轉(zhuǎn)移的用法。
在制作后臺時，我們應(yīng)該遵循模塊化布局，并提前規(guī)劃好靜態(tài)模塊與動態(tài)模塊。比如導(dǎo)航模塊、面包屑、按鈕等這些組件，在全局的位置應(yīng)該保持一致，這些就是靜態(tài)模塊，全局樣式與位置上不會出現(xiàn)過多變化。而動態(tài)模塊一般就是內(nèi)容區(qū)域，因為業(yè)務(wù)與功能的不同，內(nèi)容模塊所展示的內(nèi)容是一定不同的，這一塊的內(nèi)容則是需要變化的。提前規(guī)劃靜態(tài)與動態(tài)的布局在開發(fā)方面可以節(jié)省代碼量與開發(fā)成本，開發(fā)只需要將靜態(tài)模塊寫成固定的組件就可以達(dá)到全局復(fù)用，快速修改的效果，在用戶方面也可以大大的節(jié)省用戶的學(xué)習(xí)成本，因為用戶在學(xué)習(xí)了靜態(tài)模塊之后，之后則只需要再去學(xué)習(xí)動態(tài)模塊就可以，而不需要每個頁面、每個組件都要去進(jìn)行學(xué)習(xí)。
因為后臺大多數(shù)情況都是在Pc端與Pad端使用，這兩個終端的屏幕沒有固定的尺寸，可能有4k屏，可能有1k屏，當(dāng)然還有可能是筆記本電腦所使用的更小尺寸，因此在設(shè)計時不能使用固定的設(shè)計稿尺寸，而應(yīng)該使用較小的橫屏設(shè)計尺寸進(jìn)行設(shè)計，最早的屏幕分辨率低，通常都是使用900px~1100px的尺寸作為設(shè)計稿尺寸，但是隨著科技的發(fā)展，目前市面上的屏幕最低都是1080p的屏幕了，因此在設(shè)計時可以使用橫向「1200px」與「1440px」的尺寸作為設(shè)計稿尺寸，最大不應(yīng)該超過1600px的尺寸。
定好尺寸之后，在設(shè)計時我們應(yīng)該以響應(yīng)式布局的思維去設(shè)計，什么是響應(yīng)式布局，通俗說就是在屏幕變大的同時，頁面內(nèi)容會跟隨屏幕的變大而展示更多的內(nèi)容，需要注意的是：在屏幕變大的過程中，頁面的內(nèi)容應(yīng)該只會出現(xiàn)信息數(shù)量的變化與信息之間距離的變化，不應(yīng)該出現(xiàn)元素尺寸放大。在目前的設(shè)計中很多設(shè)計師喜歡使用柵格的設(shè)計方法，柵格布局具有易響應(yīng)、設(shè)計規(guī)范化等優(yōu)點，缺點就是可能會束縛設(shè)計師的發(fā)揮，在制作頁面時完全按照制定的柵格走，缺少了靈動的感覺。雖然不見得要使用柵格布局法進(jìn)行設(shè)計，但是我們要了解柵格的原理，要使用柵格的思維去制作。
柵格就是將頁面劃分為不等的幾個模塊，可以是12個模塊，也可以是24個等等，每個模塊之間的間距使用固定的距離，叫做水槽，可以將這些模塊看做是參考線，水槽內(nèi)就是禁止區(qū)，我們在設(shè)計時，將內(nèi)容設(shè)計在模塊內(nèi)，用水槽作為模塊之間的間距與留白使用，水槽只作為留白區(qū)域，不可以放置任何元素，最終開發(fā)時，響應(yīng)式布局就是將模尺寸塊隨著屏幕寬度的變化而變化，而水槽則不動，如果屏幕變窄，不足以放下一個模塊時，這是則將模塊下移至第二行，水槽依然是不變的。
懂得了水槽的原理，那么我們設(shè)計的時候就算不用固定的柵格方式去制作，頁面也不會出現(xiàn)太大的錯誤。
看懂了柵格之后總結(jié)一下，這不就是說一個模塊一個模塊的去設(shè)計么。沒錯，在設(shè)計時我們就是將元素按模塊進(jìn)行設(shè)計，這里說的模塊不單單是指灰背景與白色塊這樣的組合，元素之間使用排版四要素中的親密也可以哦，只要是視覺上看起來是一塊一塊的，就算沒有分割線、分割塊它依然算是一個模塊。
回到了響應(yīng)式布局，當(dāng)我們按模塊進(jìn)行設(shè)計后，那么響應(yīng)式布局就是毛毛雨了，開發(fā)只需要在屏幕尺寸變寬的時候?qū)⒛K之間的距離拉大就可以了，這時就不是設(shè)計該去管的事情了。
總而言之就是，遵循響應(yīng)式布局的目的就是為了屏幕尺寸在不斷變化的同時，不會去影響改變內(nèi)容的整體觀感與體驗，不會出現(xiàn)圖片拉伸，字體忽大忽小的情況。
間距這個東西真是老生常談的事了，其實也沒什么太多說的，但是這里還是去大致說下，什么樣的間距比較合理，視覺上看起來比較舒服。
屏幕的分辨率都是以偶數(shù)為主，1600*900、1920*1080、2560*1440等等，因此我們在使用間距的時候最好使用偶數(shù)作為最小基數(shù)，然后其他間距以最小基數(shù)的倍數(shù)去制定，比如你最初制定的最小基數(shù)為2px，那么整套頁面的最小間距就使用2px，接著隨著間距的增大，就以2的偶數(shù)倍作為其他間距，比如2*2=4px、2*4=8px、2*8=16px等等，這樣做頁面不僅看起來比較規(guī)范，而且易于開發(fā)，易于記憶，不容易出現(xiàn)鋸齒。
因為我們的后臺產(chǎn)品通常是在電腦屏幕上使用的，電腦屏幕距離人眼的距離相對于手機較遠(yuǎn)，而且后臺產(chǎn)品業(yè)務(wù)種類繁多，功能錯綜復(fù)雜，因此元素之間并不太適合過度擁擠，否則閱讀起來就像報紙一樣，難以辨認(rèn)，效率低下。而過大的留白又會導(dǎo)致展示的信息量少，出現(xiàn)信息密度不足的情況，同樣會導(dǎo)致閱讀效率下降，因此在間距上我們應(yīng)該取中度，這個中度的標(biāo)準(zhǔn)就是將一個24寸的顯示器放在距離眼睛50cm的地方，然后去看這個頁面的間距，兩個元素看起來剛好不會很擁擠的時候，差不多就是剛剛好的，為什么使用24寸的顯示器呢，因為24寸的顯示器市場占有率較高，也是在日常環(huán)境中眼睛視線范圍內(nèi)看起來比較舒服的尺寸，比24存再小的顯示器大多數(shù)就是筆記本屏幕了。
元素之間的科學(xué)距離通常使用等分原則與五分原則，就是同一模塊的元素距離使用a，不同模塊之間的距離則使用2a。
總結(jié)一下就是層級相同的模塊之間保持相同的間距（等分原則），層級不同的模塊保持不同的間距（五分原則）。
場景驅(qū)動間距，聽起來有點不易理解，其實是so easy的，舉個例子，當(dāng)你要去一個陌生的停車場找自己的車，你又不知道你車放哪的時候，這時，你最希望的就是來一架無人機，從航拍的角度去看所有車輛，然后看哪個像自己的車，在做決定。當(dāng)你找到你的車了，你要看看你車有沒有被剮蹭，油還多不多了，你就需要放下無人機，走到車前仔細(xì)觀看，而這時，整個停車場的布局什么的對你就沒什么太大意義了。
這回應(yīng)該很好理解了吧，找車就是信息檢索，找到車了進(jìn)去看車?yán)镉心居杏途褪莾?nèi)容閱讀。信息檢索，通常在后臺以列表的形式存在，且常常配合檢索功能（搜索、篩選、排序）等，這時檢索出的信息密度一定要大，因為用戶需要在大密度信息中快速瀏覽，找到符合自己的東西，假如你要是在淘寶搜索一個襪子，結(jié)果一屏就顯示一條，你要瀏覽時，你還要來回翻頁，你是否會很崩潰呢？
而篩選出的內(nèi)容，這條內(nèi)容就是用戶千挑萬選出來屬于他的精華，他會仔細(xì)查看這個信息的詳情，這時，我們要做的就是將留白加大，字間距加大，字號加大，讓他很舒服的把這個信息閱讀完成。還是上個例子，你淘寶搜索到了襪子，你要看看它的顏色，布料材質(zhì)，穿上臭不臭等，這時襪子的的詳情頁信息比報紙還要擁擠，還需要你用放大鏡才能看清，這時，你是否再次奔潰了呢。然后就直接關(guān)閉淘寶，前往京東查看了。。。
說了這么多就是，用戶在進(jìn)行信息檢索時需要將間距適當(dāng)調(diào)小，在保證有效閱讀的條件下，盡量在一屏內(nèi)顯示更多的內(nèi)容，當(dāng)用戶篩選完成準(zhǔn)備閱讀內(nèi)容時，我們就要放大間距，最大的保證閱讀的舒適性。這只是其中的一條小例子，場景可能千千萬，這就需要設(shè)計師自己動腦去思考，去模擬了。
上帝說：要有光！！而顏色就是我們對光產(chǎn)生的視覺效應(yīng)，目前我們?nèi)庋劭梢姷念伾蠹s是100多萬種，那么這么多種顏色，選什么色作為主要的色彩使用在頁面上呢，其實很簡單，這么多顏色，我們只需要把色彩大致的分成：赤橙黃綠青藍(lán)紫這7個顏色就可以了，畢竟人類更注重的是全局觀，一個顏色，你稍微深一點，稍微淺一點，99%人都分辨不出來，畢竟大多數(shù)男性連口紅色都分辨不出來呢。
在色彩中，色彩有三個屬性：色相、明度、飽和度，這三個屬性只要我們了解了原理就可以手動調(diào)色了，有人說，手調(diào)的不準(zhǔn)確，不科學(xué)，那么如果你會寫色彩的算法，請略過此處，普通人還是手動調(diào)調(diào)比較好，因為，只要是掌握了色彩心理學(xué)，色感別太差，全局色彩統(tǒng)一，對于中小公司完全可用。
調(diào)色怎么調(diào)呢，第一看色相，色相決定的色彩的大方向，那么色相條中這么多顏色，用那個色相范圍好呢，這個就要看色彩心里學(xué)了，通常我們看到紅色想起什么？五星紅旗、黨、激情、慷慨激昂、股票大漲，那老外看到紅色呢，血腥、暴力、鬧鬼了，同樣一個紅色，咋國內(nèi)外差距這么大呢，這要說的就多了，畢竟是歷史遺留問題，政治問題，生活傳統(tǒng)問題等等，具體請參考度娘。。。除了紅色，還有橙黃綠青藍(lán)紫六種顏色呢，當(dāng)你看到其他的顏色你想到什么，那這就是色彩心理，因為你什么都沒干，就看個顏色就能腦補各種東西，有了各種感覺，色彩是不很神奇，沒錯就是很神奇，不同的色彩對于不同的地域的人群，不同職業(yè)的人群，不同年齡的人群都會有不同的色彩心里，這個具體就不細(xì)說了，知乎，百度一大堆相關(guān)研究。而我們要做的就是根據(jù)你的業(yè)務(wù)屬性和面對的相關(guān)人群，使用他們的色彩心里去制定你的色相，要是面對醫(yī)療行業(yè)，可能綠色是個不錯的選擇，如果要是面對政府行業(yè)，或許紅色更討領(lǐng)導(dǎo)們喜歡。
確定好色相范圍了，那么接下來我們就需要再考慮考慮飽和度問題了，飽和度是什么，愛修圖的女性朋友一定知道，色彩的飽和度越高，那顏色越鮮艷，飽和度越低，色彩越枯燥，飽和度為0，嗯沒錯，50年前的電視機就沒有飽和度。在制定顏色的時候，飽和度往往決定了年齡屬性，一般年齡偏大的人不喜歡那花里胡哨的鮮艷，更喜歡柔和中性的顏色，年輕人更喜歡炫酷潮流的高飽和顏色，這么一說你們應(yīng)該就恍然大悟了吧，年齡高的人群用低保和，年齡低的人用高飽和，對，也不全對，飽和度不只是和年齡掛鉤，也和產(chǎn)品的屬性掛鉤，就像蘭州拉面的門頭看上去貌似有點low，但是看蘋果的門頭，覺得好像挺高端，為什么呢，因為過重的飽和度給人親近感，但是相對來說就少了高級感，低保和俗稱性冷淡風(fēng)，給你一種高級感，比如莫蘭迪色，飽和度較低的顏色會給人高級感，但會顯得不近人情，飽和度較高給人廉價感，但是更親民一些。
至于明度，就是顏色的亮度了，當(dāng)你調(diào)完色相和飽和度時，發(fā)現(xiàn)這個顏色貌似有點刺眼，那么你就把亮度調(diào)低點，如果發(fā)現(xiàn)有點看不清，那么你就把明度調(diào)高點，明度就是這樣子使用的吧~~~~
在使用顏色的同時還需要注意可視度，過淺顏色的按鈕放上白色的字，眼神不好是看不清的，具體對比度什么樣才算合理，請參考WCAG標(biāo)準(zhǔn)，能通過這個標(biāo)準(zhǔn)的，在可訪問性上就沒問題。
后臺，大部分情況是企業(yè)自己用，或者給客戶的幕后人員使用，相對于品牌色來說或許更在乎顏色的舒適性，紅色波長，通常用作警示，所以看起來就比較刺眼，藍(lán)色紫色波短，看起來就相對柔和，后臺也許是很多人日常高頻使用的工具，因此在舒適度上盡量要完美，舒適度包括較大的交互區(qū)域，合理的間距，基于人類視線的合理排版等等，這里我們只說顏色，不同人對于顏色的感知是不同的，但是基于色彩心理來講，藍(lán)色給人冷靜理智安逸的感覺，因此，在大多數(shù)的后臺產(chǎn)品當(dāng)中，藍(lán)色作為主題色的居多。
最終總結(jié)一下，不管是選擇什么顏色作為主題色，一定要保證不能刺眼，否則對于長時間使用的操作者來說會是一個災(zāi)難性的問題，可能輕者視疲勞，重者干眼癥青光眼。。。再者飽和度盡量不要過高，飽和度為：100是絕對不可以的，因為過于炫目的顏色會激起使用者的負(fù)面情緒，引起焦躁和不安的情緒，因此過高的飽和不可取。
文字，是我們記錄信息的主要工具，在后臺頁面的設(shè)計中，我們不需要對字形進(jìn)行設(shè)計，只需要使用Web端常用的標(biāo)準(zhǔn)字體就可以。
文字還有許多其他的屬性，合理運用屬性可以大幅的提高文字的閱讀效率。后臺的元素較為簡約樸素，以文字為主，較少的圖形作為輔助元素，在整屏頁面的元素中，文字占據(jù)了大多數(shù)，那么如何體現(xiàn)出哪些信息重要，哪些信息次要，這時文字的字重屬性與字體尺寸屬性就可以完美的幫我們解決這個問題。字重越重的字越有力量感，辨認(rèn)度越高，視覺重點越高，字重越輕的字體，給人文藝典雅高端的感覺，后臺算是B端產(chǎn)品，應(yīng)該是不大需要高端文藝的感覺的，引導(dǎo)視覺與可讀性更重要一些，因此我們常規(guī)下就使用標(biāo)準(zhǔn)Regular字重就可以，再輕的字體閱讀起來比較費勁就沒必要再去使用了，而像標(biāo)題、主文案、按鈕這些文字，我們可以使用更重的字體與更大的尺寸來突出，將重點信息的層級拉開，引起用戶的視覺注意。
當(dāng)整頁的閱讀信息較多時，我們需注意將文字適當(dāng)放大，正常情況下網(wǎng)頁的文字為14px，但是在大篇幅的連貫性文字出現(xiàn)時，我們應(yīng)該將文字的尺寸合理升至16px或者18px的大小，在行間距與字間距上也應(yīng)該適當(dāng)加大，那么行間距（行高）為多少比較適合呢，正常情況下我們使用sketch自帶的行高就可以，對于文字信息較多的情況下，我們使用1.2-1.8倍的行高就比較容易閱讀，在以閱讀為主的頁面中，比如文章閱讀頁、文檔頁這些情景下，使用1.5-2.5倍的行距更好，有人會說1.5倍間距就已經(jīng)很大了，其實不然，當(dāng)你在長時間閱讀信息的時候，越到后面閱讀效率越低，那么超大的行距可以有效緩解閱讀疲勞感，在長時間閱讀的情況下也可以避免串行的問題發(fā)生。
字體顏色也是一個需要注意的地方，通常我們?yōu)榱吮阌谟洃洠褂没叶壬涂梢裕话闵禐?222222、#333333、#666666、#999999、#CCCCCC這些，在一個頁面中，正文文字的顏色不應(yīng)該超過3種色值，通常為一個標(biāo)題色，一個文本色，一個輔助色，高亮色另說。顏色的使用主要目的是為了凸顯信息，過多的使用顏色會給用戶造成有很多層級的錯覺，導(dǎo)致層級混淆，頁面混亂。
當(dāng)后臺產(chǎn)品的結(jié)構(gòu)與信息元素全部排版完成后，這時我們會發(fā)現(xiàn)，整個頁面除了文字和按鈕貌似沒有什么其他的東西了，確實，我們作為一個開發(fā)人員看起來都倍覺單調(diào)，更不用說每天使用我們產(chǎn)品的用戶了，更是枯燥的要死。有人說，B端產(chǎn)品以效率為主，本身不就是枯燥的文字嘛，道理是這么個道理，但是作為開發(fā)人員，讓用戶使用的開心也是我們的一個任務(wù)，俗言道：一圖勝千言，假如我們要學(xué)習(xí)一段歷史，我相信比起來看書本上的文字，看電視劇的方式應(yīng)該更受人青睞吧，誰都不喜歡全是文字的東西，客戶也是一樣的，因此我們應(yīng)該對頁面進(jìn)行適當(dāng)修飾，不應(yīng)該把頁面做成一個txt的文本文件。那么怎么去合理的修飾頁面呢，很簡單，圖表化、圖形化。
什么是圖表化，簡單解釋來說就是將有規(guī)律的數(shù)據(jù)進(jìn)行分類總結(jié)，用適合此類數(shù)據(jù)的圖表進(jìn)行展示，舉個簡單的例子，狗蛋想要去買股票，但是不知道買哪一只，于是想上網(wǎng)查一查最近5年每個公司的股票走勢，結(jié)果找到了兩份文件，一個是滿是文字的數(shù)據(jù)列表文檔，另一個是精美直觀的K線圖，那么你是狗蛋你會閱讀哪個呢，當(dāng)然去看k線圖了，畢竟3秒鐘就能知道個大概，如果看數(shù)據(jù)報表，眼花不說，一上午都不見得能閱讀完。這時你就會發(fā)現(xiàn)圖表的魅力。
那么圖形化又是什么呢，依然很簡單，就是將固定不變得字段圖標(biāo)化，將難以理解的字段插畫化。人天生對于圖形的識別能力就優(yōu)于文字，對那些靜態(tài)的字段給與圖標(biāo)的展示會大大提高用戶的識別效率，什么是靜態(tài)的字段呢？比如固定的按鈕、導(dǎo)航、目錄、設(shè)置等等，全局都長那樣，不會因為切換場景而改變文字，這些就非常適合使用文字與圖標(biāo)相互配合來提升趣味度與辨識度了。
那么插畫化又是什么呢？說白了就是將用戶懶得看的那些字配張圖，讀書時我們的課本都是圖文并茂的，那教育部就是怕學(xué)生光看文字產(chǎn)生厭倦導(dǎo)致不好好學(xué)習(xí)。同樣的道理，有很多情況下，用戶也懶的看文字，比如升級頁，升級功能信息那么多字，不如多放幾張圖來的實在，這也就是那些APP產(chǎn)品為什么都有引導(dǎo)頁的原因。
當(dāng)你看到這一步的時候，說明你的后臺已經(jīng)完成的差不多了，后臺是個極其復(fù)雜的系統(tǒng)，一個新手去學(xué)習(xí)使用一套后臺就像一個菜鳥去學(xué)習(xí)玩一款新游戲一樣，只不過游戲有我們的興趣驅(qū)動，興趣是最好的老師，而后臺則不同了，學(xué)習(xí)使用后臺的那都是為了工作，興趣可就沒那么強了，如果恰恰碰到了做的很復(fù)雜的后臺，那客戶可能當(dāng)場崩潰，古有唐雎之怒，流血五步，今有員工之怒，當(dāng)場跑路，沒準(zhǔn)產(chǎn)品學(xué)不會，人家就辭職了。想想都覺得很嚴(yán)重，這時就體現(xiàn)出了合理引導(dǎo)的重要性，那么什么叫做合理引導(dǎo)呢？引導(dǎo)分為很多種，有新手引導(dǎo)、新功能引導(dǎo)、版本變更引導(dǎo)，操作流程引導(dǎo)等等，但是最終的目的是為了讓用戶快速學(xué)會使用你的產(chǎn)品。
可以使用視頻教學(xué)，文字教學(xué)，體驗教學(xué)等等，具體怎么使用應(yīng)該根據(jù)自身的業(yè)務(wù)進(jìn)行分析，看看適合用哪種的方法。
要多提示，可以是紅點提示，高亮提示，彈窗提示等，這塊的主要目的就是：要將新功能在什么位置、有什么功能告知用戶，別你功能去年就更新了，用戶今年還不知道呢~，這就尷尬了。
每個版本交互設(shè)計師，產(chǎn)品經(jīng)理，體驗設(shè)計團(tuán)隊等等一大堆人去探討，將舊版本不合理的功能升級，去除，換位置，合并等等，每動一點，用戶都需要從新學(xué)習(xí)，因此當(dāng)版本變更導(dǎo)致操作習(xí)慣和之前不同時就要提示用戶最新的版本內(nèi)容，最重要的是要對比引導(dǎo)，舊版本怎么回事，新版本怎么回事，在這一塊可供參考的有很多，如Adobe全家桶每年的大版本更新，Autodesk全家桶的大版本更新，游戲的大版本更新等等，他們甚至還會出一個專門的文檔來描述新舊版本更新對比。
顧名思義就是引導(dǎo)用戶完成某一套操作流程，就像LOL里，剛注冊游戲時，系統(tǒng)會引導(dǎo)你完成一局游戲，告訴你該點擊哪里進(jìn)行匹配，點擊哪里選英雄等等，這種引導(dǎo)通常是讓用戶在真實場景下邊操作邊引導(dǎo)，紙上得來終覺淺，須知此事要躬行嘛，身臨其境的體驗才是快速學(xué)習(xí)的王道，這種的引導(dǎo)非常適用于操作步驟繁瑣的產(chǎn)品。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.b186.net )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.b186.net