如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里B端后臺產品UI設計的工作小結，總結一些常見問題、解決方法以及自己的經驗。
寫在前面
作為一個新時代全能打雜，日常工作包括移動端、PC端的UI設計以及各類平面視覺設計，其中自然少不了令人“禿”然的B端后臺產品設計。
畢業兩年來一直都做著B端產品的UI設計工作，參與過的后臺產品設計面對的主要客戶有公司內部、各大企業以及政府機構。工作和學習的過程中走過不少彎路，也在不同的項目中不斷反思和總結。把自己的一些想法和經驗分享出來，總結自己工作中遇到的問題和解決的方法，記錄自己思考和理解的過程，也希望對即將或正在從事B端后臺產品設計的你有一點點啟發或幫助。
希望在日后的工作和學習中，通過實踐來不斷完善自己對B端后臺產品的理解。
目錄
一、明修棧道C和暗度陳倉B
二、后臺產品設計思路
三、后臺產品設計規范
四、經驗觀點及設計資源
正文
一、明修棧道C和暗度陳倉B
1.1初識B端產品和C端產品
按照C端產品和B端產品的專業術語來解釋的話，C端Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。
在我們日常生活中，在手機上使用的大多是C端產品，單一的C端產品通常是為了實現單一的需求，比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。
而面向B端的產品，我個人稱之為“暗度陳倉”，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即C端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。
雖說我們日常使用的更多是C端產品，但是B端產品對我們的影響也是時時刻刻都存在著的。C端產品在明，逐漸改變著現代人的生活方式，B端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
——“ToB還是ToC？這是個問題......”
——“不管ToB還是ToC，最后都還是ToP（people）。”
1.2B端和C端產品的區別
在我看來，C端產品以消費互聯網為主，B端產品以產業互聯網為主，C端更感性，而B端更理性。
從使用者的角度來說——
C端產品關鍵詞包括免費使用、迅速上手、體驗為王、你能讓我做什么；
B端產品的關鍵詞則是付費購買、上手緩慢、效率第一、你能為我做什么。
從開發的角度來說——
C端周期短，B端周期長；
C端用戶多，B端用戶少；
C端邏輯簡單，B端邏輯復雜；
C端競品較多，B端競品較少；
C端主戰場是移動端，B端則是PC端；
C端是用戶體驗驅動，B端是解決問題驅動；
C端產品的使用決策權在用戶手中，而B端產品的使用決策權則在客戶手中（B端客戶不一定是用戶）；
C端產品除了產品的體驗以外，也要讓產品更美觀，讓活動更有趣，讓用戶更舒服，產品經理有很強的同理心，B端產品的實用性大于美觀性，能切實解決問題、配置資源的B端產品才是一個好的B端產品，產品經理要具有更強的邏輯思維能力。
1.3后臺產品常見分類
后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在B端產品的范圍之內的，常見的類型包括：
C端產品的后臺產品線——如淘寶商家版，餓了么商家版，對訂單和用戶進行管理，支持C端產品的業務進展；
平臺級工具產品——如微信公眾平臺，對文章和讀者的數據統計和管理；各大互聯網公司的開放平臺，如微博開放平臺等；
企業級服務產品——虛擬主機系統（VMware），云主機管理系統（深信服、xensystem、騰訊云）以及各種云SaaS；
企業的業務處理平臺——對內有考勤、報銷等OA辦公系統，對外有CRM客戶管理系統，ERP資源及供應鏈管理系統。
二、后臺產品設計思路
2.1初識后臺產品設計
說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多。
后臺產品不同于普通用戶所使用的APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的app，再給他幾個其他的音樂APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。
對于后臺產品來說，首先，所見之少，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業、甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有“保密協議”的使命感，所謂“隔行如隔山”，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。
這大概就是后臺產品相關資源較少、設計難度較大的一些原因。
2.2后臺UI設計工作流程
后臺UI設計的工作，大體分為三個部分：需求分析——設計執行——數據分析。
在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。 做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。
在設計執行階段，參照PM給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做UI視覺方面的設計，而這時后端同步構思需求的實現方案。UI設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。
數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。
2.3制定設計規范的作用
為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。
對產品——在項目完成第一版較為穩定的版本時，著手制定設計標準，統一公司視覺設計規范及某些特定交互設計規范。同一個項目會有多個設計師的參與，規范化的設計語言，避免因設計控件混亂而影響設計輸出；
對自己——組件化同類元素，提高工作效率，建立公司產品的組件庫，以便不同項目的復用及設計延展；在同一個項目中也能更好的把控該項目的視覺規范，提率；
對團隊——設計規范的制定，規范了設計團隊的輸出，同時方便了與開發團隊的交接和協作。通過設計規范的制定，前端實現也能擁有一套可供復用和擴展的組件庫，助力上下游交接及團隊協作；
對客戶——制定設計規范的同時需要考慮設計延展性，為不同客戶的定制化需求提供更的輸出。同時在進行產品迭代時，設計規范的組件化調整也大大提高了工作效率。
三、后臺產品設計規范
*以下內容僅供參考和交流，圖片內容不代表真實尺寸，請結合特定產品靈活使用。
3.1頁面布局
統一尺寸——據統計，目前PC端用戶屏幕分辨率占比排名前三的是1920*1080、1366*768、1440*900，以1440來設計的話，向上適配或者向下適配誤差會比較小。 適配方案——面向多個客戶，后臺產品設計功能型頁面的尺寸統一為1440*900，按照柵格系統原則向上或向下適配；展示型頁面以1440*900為主，同時設計出極端情況（寬度為1280以及寬度為1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架——頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。
柵格布局——柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用24列柵格體系實現，以滿足2，3，4，5，6分比布局等多種情況。固定寬度Column，將間隔Gutter進行動態縮放。需要柵格化處理的內容的總寬度=23列（1列=1寬度Column+1間隔Gutter）+1寬度Column=24寬度Column+23間隔Gutter。谷歌規定模塊和結構之間要以8px為基準，布局間相對間距可采用8px以及8的倍數，但一些小組件(按鈕、間隔、輸入框 )可以以4為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。
尺寸設定——一般在整體區域左上角放置產品LOGO及產品名稱，大部分系統頂部欄高度48+8n，側邊欄寬度200+8n。我常用的是頂部欄高度56px，側邊欄寬度200px，側邊欄收縮狀態寬度56px，右側的側浮窗寬度400px。
相對間隔——定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。
3.2標準色
顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。
品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。
其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
3.3標準字
后臺系統常用的字體：windows系統，中文Microsoft YaHei，英文Arial；Mac字體，中文PingFang SC，英文Helvetica；除此之外可以選擇的字體還有segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。
行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。
3.4圖標
圖標是UI設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。
除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較方便的方法是在iconfont提供的圖標模板上用AI繪制，畫板1024*1024，提供圓形、正方形、矩形形狀(文末提供下載)。圖標尺寸按照8的倍數進行延展，繪制完成后生成svg格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。
分享一個我個人常用的AI使用小習慣，因為ctrl+q、ctrl+w作為退出和關閉我用的不多，而且有時候手抖會在保存時候不小心點成了關閉，所以我無情地把ctrl+q、ctrl+w變成了拓展和拓展外觀的快捷鍵......感受還不錯。
3.5按鈕
按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態包括默認、懸停、點擊和不可用。
按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照8的倍數設定。如高度分別設定為24、32、40px。
規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。
填充按鈕之間間距最小為10px。
3.6導航
導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。
各類導航中的字體大小可進行統一設定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
分頁的高度設定為24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。
面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。
徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。
3.7表單
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合PC端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數進行設定，比如24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為20px，有錯誤提示時候豎向增加10px或橫向顯示在輸入框右側（預留出位置）。
表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體14px，文字和左右兩邊邊框的邊距10px。
選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。
搜索框和選擇框的高度為30px或按照8的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕4px，內部文字14px。
單選多選框尺寸16*16px，多個選項橫向排列間距16px，縱向排列間距8px。
開關按鈕外框40*20px，內部圓形16*16px。
3.8表格
表格在后臺產品UI設計中站的比重非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。
表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。
行高——表格行高可設置為表格內字體高度的2~3倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用36、40、48、60等。
行數——表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是20或50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多余每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。
列寬——列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以“...”展示，鼠標懸停出現完整內容（比如詳情、描述）。
列數——表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式——表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似IP地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加“復制”圖標，方便用戶調用。
詳情入口——表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
3.9反饋
包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。
彈框——彈框出現時，主題內容增加一層遮罩#000，透明度50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。
側滑框——又稱抽屜，出現在右側，固定寬度400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。
骨架屏——為某些特定數據提供數據加載等待時的占位圖形組合。
全局提示——建議停留時間3s，可根據文字字數調整停留時間，文字內容限制在30以內。
警告提示——用不同顏色和樣式展示需要關注的信息。
通知提醒——消息通知和告警信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留3s后自動關閉。
3.10缺省狀態
繪制不同類型的情感畫插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。
頁面需要一個默認的底色，錯誤文字使用14px，與情感化插畫間距20px，與按鈕間距30px；
3.11數據可視化
數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。
功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做的更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。
考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。
四、經驗觀點及設計資源
4.1設計前端一家親
Ant Design的設計組件，實現框架React、Angular——https://ant.design/docs/spec/layout-cn
Element的設計組件，實現框架Vue 2.0、 Angular——http://element-cn.eleme.io/#/zh-CN/component/checkbox
iView的設計組件，實現框架Vue——https://www.iviewui.com/docs/guide/theme
飛冰的設計組件，實現框架React——https://alibaba.github.io/ice/
Layui的設計組件——https://www.layui.com/demo/grid.html
G2可視化圖形組件——https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
Echarts可視化圖形組件——https://echarts.baidu.com/
d3.js可視化圖形組件——https://github.com/d3/d3/wiki/Gallery
在線柵格化計算工具——http://grid.guide/#/1000/24/34/8/0
4.2不丑也要多讀書
《B端產品經理必修課》
《交互設計精髓》
《U一點料·Ⅱ》
《簡約至上:交互式設計四策略》
寫在最后
不管是做C端產品還是B端產品，都是為了實現用戶的需求、幫用戶解決問題。
剛接觸后臺產品的UI設計師工作時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入antdesign和element等開源的設計組件，會使得設計師以及設計師的好朋友前端小哥哥事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
今天分享一款運維相關的B端產品，主要闡述自身的設計思路及產品的優化過程。B端產品功能聚焦、講究效能，對產品鏈路有著高流暢度與率的訴求。設計師在做B端產品的的時候要有全鏈路和小白用戶視角，以體驗及效率為先，我們需要協調全局一致性，遵循產品鏈路，在視覺上減少對于用戶的負擔和干擾，避免打斷用戶的使用流程，確保流暢、優質的用戶體驗。
在產品優化上，我們在每個版本迭代后，會對用戶進行訪談及收集意見反饋，建議設計師可以制定一套自有的用戶調研方式去了解用戶的想法和自己產品的不足之處，這樣的好處是可以讓用戶幫助你優化產品。
在產品的細節上我們可以深度地去挖掘和嘗試更好更優的設計方式，對設計師來說打磨和優化每一個細節正是B端產品的魅力所在。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
交互設計中的“所見即所得”原則
“所見即所得”原則我記得在之前的文章中就提到過，但是沒有詳細說明。最近在體驗一些產品時，發現很多交互設計上的坑都可以歸納到“所見非所得”上。
所見非所得
我們可以首先來看一下“所見非所得”的案例：上周寄件去北京，在填寫收件人信息時候，發現了一個“智能填寫”的功能很有意思。所謂“智能填寫”就是OCR識別技術，系統可以識別圖片上的地址。例如，你的收件人地址正好是身份證上的住址，那么你就可以上傳身份證照片，系統直接識別照片上的地址而不需要手動去輸入。
用戶具體的操作流程是：
1 拍攝/上傳照片；
點擊“上傳圖片”按鈕，用戶可以選擇拍攝或者上傳相冊里的照片，框選合適的識別區域；
2 系統識別并展示結果；
系統會自動識別圖片中的地址信息，并且在輸入框中展示，如果有識別錯誤的地方，用戶可以手動編輯修改；
3 用戶確認；
用戶對地址信息確認無誤了，點擊“智能填寫”按鈕，輸入框里的地址信息會自動回填到地址欄；
了解了大致流程，我們來看一下兩款競品。產品A和B都提供了“智能填寫”的功能，但是在交互設計上存在差異。產品A，當用戶上傳完圖片才會出現“智能填寫”按鈕；產品B是全程展示“智能填寫”按鈕的。我個人更加偏愛產品A的處理模式，因為當用戶都沒有上傳圖片時，給用戶展示“智能填寫”按鈕是沒有任何意義的，這里的“智能填寫”雖然可見但是不可得，用戶也不能點擊。當然有人會說，雖然不可點擊，但是展示了也沒什么問題吧？當然有問題，它會給用戶帶來兩個痛點：
1） 增加了用戶的學習成本；
對于新用戶來說，產品A肯定更加容易上手。因為新用戶一進入這個頁面，只能看到上傳圖片的按鈕，用戶明白了我首先要上傳圖片。產品B是直接一股腦的把所有選項展示出來，用戶不知道這些選項之間的聯系和操作順序。
2） 阻斷正常操作流程；
給用戶展示了他們本不應該看到的元素，可能會阻斷正常的操作流程。用戶如果還沒上傳圖片，就點擊“智能填寫”按鈕會直接報錯，“所傳參數不能為空”，用戶哪里看懂這是什么意思。
之前在火車站取票，前面排隊的大嬸跟我說她的票取不了。我湊過去一看，發現她沒有關閉購買保險的彈框。因為這個彈框沒有蓋住底部“確認打印”按鈕，用戶誤以為還是可以點擊的，導致無法正常完成取票流程。
了解到這些痛點，那么如何才能在交互設計上實現“所見即所得”原則呢？我總結了兩個方法：限制和就近。
限制原則
了解限制原則，我們需要回答兩個問題：
1）為什么要限制？
因為多才要限制，多會帶來哪些壞處？內容多，用戶處理不過來；選項多，用戶挑花了眼；時間多，優惠券沒有有限期限制用戶懶得用。
2）限制什么？
限制用戶與界面交互的觸點。還是以智能填寫為例，當前界面有三個觸點：上傳圖片按鈕、輸入框、智能填寫按鈕。這三個觸點分別對應著步驟一、步驟二和步驟三。如果我們在步驟一的階段給用戶提供了步驟三的觸點，保不齊會有用戶嘗試去交互，這樣的無效操作會觸發報錯場景。所以當用戶處于一個線性的操作流程中，根據用戶所處的階段，分析用戶可能進行交互操作，提供交互觸點，保證用戶看到的觸點都是可交互的。
罔顧用戶的操作階段，一股腦的把所有觸點都提供給用戶。設計師倒是很省心，但是用戶卻會很糟心，他們需要花時間去判斷和分析每一個觸點的作用以及它們之間可能存在的聯系。這個工作應該由我們代勞，我們來分析用戶處于不同階段所需要的功能觸點。
舉個知乎的例子，知乎有一個“向知友提問”的功能。但是這個按鈕只會在用戶滑動搜索結果頁3屏后才會出現，因為滑動了3屏，我們可以猜測用戶對當前的搜索結果不滿意，引導用戶去提問。
當然限制原則不僅僅是限制交互觸點，還可以應用到產品邏輯中，幫助用戶解決很多問題。我曾經遇到過一個場景，公司上線了一款優惠券，用戶點擊“立即領取”按鈕即可領取。但是有些用戶會被風控判定為了風險等級過高，導致領取失敗。對于這個報錯文案，我們改了好幾版，但是每次都會收到用戶的投訴。我們無法直接告訴用戶，你是因為風險等級過高導致無法領取，因為用戶風險等級過高是因為開通了某項業務。當時開通的時候，我們并未告知開通后會被判定為高風險用戶。所以為了不必要的麻煩，最好的辦法就是進行判斷前置，如果判斷用戶為高風險用戶那么就直接不展示該優惠券。
就近原則
從上面的闡述中，我們可以發現“所見即所得”原則最根本的目的是為了節省用戶的操作時間，提升產品易用性。廣義的操作時間還應該包括了用戶對于反饋的感知時間，因為只有充分理解系統反饋的信息才能進行進一步的操作。如何幫助用戶快速的消化反饋的信息呢？因為反饋是系統對于用戶操作的回應，那么我們可以讓操作和反饋盡量的貼近一點，這就是就近原則。就近原則可以分為兩類：位置就近和形式就近。
1） 位置就近
所見即所得，這里的“所見”即代表著用戶的視線，而用戶的視線總是停留在上一個交互觸點附近。
例如，還是寄件的場景，要填寫發件人信息，我懶得重新填寫一遍地址，正好看到輸入框右邊有一個附近地址的功能。我點了一下，沒有反應，又點了幾下才發現底部出現了一個“附近地址”的列表。這里的交互觸點是“附近地址”的文字鏈接，我的視線也是停留在附近，沒有注意到下拉列表已經出現在底部。操作和反饋完全不在同一視覺區域。
2）形式就近
形式就近，這里的形式特指反饋形式。目前最通用的反饋方式是彈框，彈框的弊端也就恰恰在于它的“通用”上。所有類型的反饋都可以用彈框來承載，用戶無法立刻感知到彈框所傳遞內容是什么。既然反饋是系統對于用戶操作的回應，而用戶操作又是一個個交互觸點所觸發的。如果我們可以通過改變觸點自身形態的變化來完成信息的傳遞，用戶感知起來會更加容易。
舉個例子，用戶在輸入登錄密碼的時候，其觸點是輸入框。當用戶密碼輸入錯誤的時候，我們可以通過抖動輸入框的方式告知用戶輸入錯誤，這里抖動是現實生活中“搖頭”的映射，我們都知道搖頭代表著否定的意思，用戶不用看到彈框上的“密碼錯誤”幾個字也能明白密碼輸錯了。
總結
以上就是我對交互設計中“所見即所得”原則的總結和分析，如果你有不同的意見和看法，歡迎留言或者加群討論
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
剛入行的新手設計師容易出現一個問題，接到需求就開始設計，最后出現的界面和原型幾乎一模一樣，唯一的區別就是上了色，加了圖片和圖標，最后提交審核時老板反饋，“這個界面看上去太“平”了，你在這里加個背景色吧；這個圖標太小，你再放大一點；這個位置你在加點裝飾……”。
這主要原因還是界面沒層次導致的，雖然老板對設計不太清楚，但是關于業務邏輯我們的設計稿是否表達清楚，重點是否突出這個他最清楚了。
那么如何才能提高界面層次呢？我們可以從兩個方面入手，在設計前我們需要考慮突出內容層次的方法；在設計中需要考慮突出視覺層次的方法。
目錄
一、突出內容層次的方法
將相關聯的元素進行組合
確認內容優先級，將優先級高的放在前面
確認重要內容，將其差異化設計
二、提高視覺層次的方法
利用線、面、留白將模塊進行分割
利用大小、投影、背景圖突出視覺層次
利用顏色對比提高視覺感受
利用文字對比提高界面的可閱讀性
一、突出內容層次的方法
當一個界面信息量比較大時，層次感好的界面用戶進來能快速的獲得想要的信息，同時最終達到產品的目的。而層次感差的界面用戶看半天也不知道要做什么，看一會也就走了。因此良好的視覺層級是界面成功的關鍵。在設計前我們需要將相關聯的元素進行組合；確認內容優先級，將優先級高的放在前面；確認重要內容，并將其差異化設計。
1.將相關聯的元素進行組合
在設計前，產品原型圖已經將我們的元素進行了分類組合，但是他們更多的是考慮邏輯、功能上的層次，而如何有一個清晰的內容層次呢？設計師可以利用《格式塔心理學》中的接近性原則將相關聯的元素組合在一起，不相關的拉開距離，同時形成一定的規律和節奏，這樣會讓用戶閱讀起來更輕松。
需要注意的是，界面中的間距需要滿足一定的規律和節奏，比如模塊之間的間距大于標題到內容的間距；在內容中不相關聯的內容間距大于相關聯的間距，如下圖所示。
?
天貓個人主頁的個人信息區排在最前面就是遵循了用戶的瀏覽習慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容；最后是我的福利排在了第三位這是產品想給用戶看的內容。
京東金融的我的頁面用戶的資產信息排在最前面，他首先是遵循了用戶的瀏覽習慣，同時也是用戶想要看到的內容，其次是功能入口區排在了第二的位置這是產品想給用戶看的內容，最后是福利大禮包排在第三位這也是產品想個用戶看的內容。
2.確認內容優先級，將優先級高的放在前面
將相關聯的信息整理之后就需要確認模塊的優先級了，由于用戶的瀏覽順序是自上而下的，因此我們需要將優先級高的模塊放到前面。
那么優先級如何判斷呢？大家可以從三個方面去考慮，第一是遵循用戶的瀏覽習慣；第二是用戶想看的內容；第三是產品想要用戶看的內容，如下圖所示。
天貓個人主頁的個人信息區排在最前面就是遵循了用戶的瀏覽習慣；其次是我的訂單和物流信息排在了第二的位置這是用戶想看到的內容；最后是我的福利排在了第三位這是產品想給用戶看的內容。
京東金融的我的頁面用戶的資產信息排在最前面，他首先是遵循了用戶的瀏覽習慣，同時也是用戶想要看到的內容，其次是功能入口區排在了第二的位置這是產品想給用戶看的內容，最后是福利大禮包排在第三位這也是產品想個用戶看的內容。
3.確認重要內容，將其差異化設計
在設計時我們需要知道，優先級高的模塊不一定重要程度就高，因此我們還需要確認模塊的重要層級，同時利用背景、布局等方式進行差異化設計，用起用戶注意，如下圖所示。
網易嚴選中的新人專享禮和品牌制造商直供就采用了差異化設計，職工類模塊采用的是普通的宮格式布局，新人專享禮采用添加背景的方式，加深了模塊的縱深感，對比其他模塊更加突出。
大麥網中的特色模塊和其他模塊也采用了差異化設計，特色模塊采用拼圖的方式設計，其他模塊采用列表的方式進行設計，用戶進入頁面首先就能夠看到這個模塊，提高用戶接受信息的效率。
土豆視頻個人主頁的列表部分也采用了差異化設計，消息提醒、我的收藏、觀看記錄、我的緩存這四個用戶常用的功能采用宮格式布局，其他不常用的我的會員、客戶與反饋、設置采用列表式結構，這樣也能夠提高用戶操作速度。
二、提高視覺層次的方法
當然內容層級確定了顯然不夠，我們還需要考慮突出界面的視覺層次，這樣用戶才能夠清晰舒適的瀏覽我們的界面。那么提高視覺層次的方法有哪些呢？在設計中，我們可以利用線、面、留白將模塊進行分割；利用大小、投影、背景圖等突出視覺層次；利用顏色對比提高視覺感受；利用文字對比提高界面的可閱讀性。
1.利用線、面、留白將模塊進行分割
大家記得在設計前我們已經對界面中相關聯的元素進行了組合，組合之后就可以利用線、面、留白的方式，將不相關聯的元素進行分割，提高界面的視覺層次，從而提高用戶的瀏覽和操作效率。
線分割：是最為基礎的分割方式，其優勢是占用空間小、分割感弱，多用于列表、Feed流中。需要注意的是，分割線顏色設置需要非常淺，避免模塊之間強烈的分割感，比如橘子娛樂的列表就是采用若隱若現的線，讓列表中的內容更規整。
面分割：也可叫背景欄分割，其優勢是占用空間小、可操作性高，同時能夠更好的區分不同模塊之間的關系，多用于模塊和模塊之間的分割，比如轉轉個人主頁的模塊采用面分割瀏覽性更強。
留白分割：是iOS11發布之后興起的以留白或間距的方式進行分割，其優勢是無強烈的分割感，界面清爽，多用于比較有規律或以大圖為主的模塊之間的分割，比如轉轉主頁下方的賣二手還錢、買實惠好貨等，其內容部分都較為規則，采用該方式較為合適。
2.利用投影、大小、背景圖突出視覺層次
為了突出界面的視覺層次，我們還可以通過投影、大小、布局等增加界面的對比，從而突出重要信息。
投影：是界面對比較常用的一種方式，其優勢是提升界面的空間感，改變視覺次序，通過投影大小的變化還可營造不同的空間關系，多用于卡片風格的設計中，比如Keep均是采用卡片風格的設計，添加投影后讓界面視覺層次更突出了。
大小：是大眾最為熟知的對比方式，其優勢是通過大小對比能夠很快的拉開視覺層次，同時能夠很好的引導用戶瀏覽路徑，比如ofo黃色的大按鈕遠遠都能看見，該頁面就一個目的掃碼用車。
背景圖：往往不如投影和大小常用，但是它的使用可以將模塊從其他樣式中年凸現出來，多用于banner、推薦等重要模塊中，比如美圖秀秀的推薦模塊，該模塊可以說是美圖的核心模塊。
3.利用顏色對比提高視覺感受
顏色是最容易感知到的對比方式，通過顏色我們可以明確哪些是重要信息，在使用中我們可以通過色相、明暗、飽和度上進行對比，其多用在按鈕、重要信息、導航、背景板中。
自如首頁上的租房、服務、旅行采用對比色進行強調對比，進入頁面用戶就能夠清楚這三塊是是界面的核心功能，同時引導用戶關注右側的具體服務信息。
淘票票首頁中的按鈕、引導提示、標簽欄選中均用了紅色進行強調對比，很容易引起用戶的注意，讓用戶看一眼就知道如何操作。
招商銀行首頁中的話題PK采用對比色進行強調對比，很容易引起用戶操作的興趣。
4.利用文字對比提高界面的可閱讀性
文字的層次感往往和字體大小和明暗有關，其中字體大小是提高文字信息層級的重要手段，在文字排版中如果文字之間的層次不清晰，那么一定是大小的對比不夠，在UI中字體大小對比往往在4-8px較為適合，如下圖所示。
當字體大小對比適合之后就需要通過通過字體的明暗突出主要信息，弱化次要信息，從而提高界面的可閱讀性，如下圖所示。
在UI設計中我們往往都設定了字體規范，這樣不僅能夠達到設計統一，同時也有很好的對比性，常用字號為40, 36, 32,28,24, 22(px)，比如優酷的星球頁面，通過字體大小，顏色深淺的對比，讓用戶首先看到重要信息，弱化次要信息。
三、總結
在界面設計中為了降低用戶的理解成本，突出重點內容，讓用戶使用起來舒適，就需要有個清晰的內容層次和視覺層次。
在設計前我們需要考慮將相關聯的元素進行組合；確認內容優先級，將優先級高的放在前面；確認重要內容，將其差異化設計。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
飛豬首頁在這兩年，經歷過無數次大大小小的改造。而在2018年7-8月，我們對飛豬首頁進行了尤為重要的，一次較為完整的改頭換面。這篇文章，包含了飛豬首頁歷次改版的回顧。我們也想和大家分享一下，2018年，我們這次完整改造背后的思考。
我在2015年畢業后，就來到了飛豬。其實當時還沒有飛豬的概念，那時候的 app 叫「阿里旅行·去啊」，后來了解到我們還有過「淘寶旅行」、「阿里旅行」、「去啊」等這些曾用名。
說起名字還有個故事。我剛工作那會打Uber，司機們都特熱情，打車能和你聊一路。
有個司機問我：「你是在阿里哪個部門工作呀？」，我就說：「去啊」。司機很激動，馬上說：「哦哦，我知道，那個去哪兒網，頭像是綠色駱駝的那個！我老婆手機里就裝了一個！」
我連忙說：「不是的不是的，我們叫去啊，不叫去哪兒。我們也叫阿里旅行，或者淘寶旅行，你知道吧…」
然后我們討論了一路「去啊」和「去哪兒」的區別。
雖然直到我下車，我也不知道司機老哥有沒有弄明白。
這個事其實很有代表性。在當時，旅行市場最大的品牌就兩個，攜程和去哪兒。雖然市場上還有同程、窮游、螞蜂窩、驢媽媽、藝龍等旅行相關的app，但我們就叫「去啊」，其實已經暴露了我們的目的（并不是為了讓大家想下「去哪兒」的時候，不小心下載了「去啊」），而是我們當時的目標就是要做一個對標OTA 的旅行預訂工具。
這時候我們的首頁和他們比起來，簡直滿分。當然，我指的是相似度，滿分。
這其實就是飛豬的起源版本首頁。在這里我們可以看到巨大的機票、酒店這樣的旅行類目預訂的入口，其實就是為了讓用戶有「預訂」的認知。
直到有一天，產品經理在壓榨設計師出圖，我隱約聽到「我們是平臺，不是OTA」這樣的說法。那個設計師熬掉好幾根頭發之后，方案確定了，我們便有了下面這個版本的首頁。
我們看到，這個版本的首頁看起來不像攜程了，更像是當時的淘寶。那個產品經理把他的 iphone5s 擦得锃亮，非常興奮地給我展示：「你看，這個首頁，改得太棒了！比以前好多了！」
其實以我當時的聰明才智，真沒看出來。但后來想想，這個改版其實是一次覺醒。這個改版意味著，我們要在平臺的業務模式下，在機票酒店這樣的預訂心智之外，找到自己的特色。
而這種差異化的思維模式影響了接下來一年多的首頁設計。
剛開始接首頁時，我們嘗試從內容進行突破，將商品羅列升級為旅行內容。
同時，在品牌升級為飛豬之后，我們嘗試為用戶提供更個性的服務，基于用戶可能想去、準備出發、正在旅行等不同階段，設計了「目的地個性化」模塊，讓有不同需求的用戶可以看到不一樣的目的地、玩法、商品。
后來我們新起了場景化項目，有個業務小組產出了全球第一站、周邊好去處這兩個出境、周邊的導購場景。
并且我們將首頁所有的信息都進行了個性化處理，讓每個人每天可以看到不一樣的內容。
當然，首頁的樣式看起來越來越美好了，但我們仍然不滿意。
上面這些版本的首頁，有一個共性：我們一直圍繞著業務的布局，在首頁上設計業務模塊。比如下面的這些模塊：
而體現在數據上，也有這么幾個共性：
用一句話來總結，就是用戶對排列業務模塊搭出的首頁沒有建立認知。
2018年4月開始，我們著手對飛豬首頁進行一輪整體的改版。在改版之前，我們首先需要對之前首頁進行一次全面的體檢。
在這里，我們使用 NLP 理解層次，來深入理解飛豬首頁到底發生了什么。
簡單介紹一下 NLP 理解層次：我們一般可以通過6個層次理解事物，由低到高分別是：環境、行為、能力、BVR（信念/價值觀/原則）、身份、精神。這套框架幾乎可以幫我們分析理解一切問題。
△ 用NLP分析問題背后的原因
1. 環境：飛豬業務主導的環境
飛豬的整體環境核心是以業務為導向的，設計的大部分工作是屬于支持性質的。在首頁工作中，我們做得更主動一些，常給一些提案，也可以算作是共創。但核心的決策權是屬于業務和產品的，所以這就導致，飛豬最后上線的東西，往往優先考慮的是業務的重要性。
2. 行為：首頁根據業務調整不斷改版
我們始終在跟蹤首頁的數據，并根據數據的變化、業務的傾向性對首頁進行日常的調整。
3. 能力：設想的場景沒有做好，維度少/內容欠佳
我們希望做場景化，其實是很好的想法。但業務前期只嘗試了周邊、出境兩個場景，這很難匹配旅行用戶各種各樣的偏好。
同時，飛豬在生產高質量內容的方面做得不夠，產出的內容沒有讓用戶產生興趣。
4. BVR：內容數量>內容質量
因為飛豬的內容起步晚，在起步初期的目標是提高內容的數量，而非生產高質量的爆款文章。所以當后續我們需要用到內容時，常常擔心取到一些充數的質量不高的內容。
5. 身份：售賣平臺
飛豬以往的定位仍然是旅行商品預訂平臺，這也會在一定程度上，導致我們不會在提升內容質量上投入太多。
6. 精神：？
這個層面我只能說我個人的理解：我希望飛豬能讓旅行者享受更多旅行的快樂。
通過分析我們發現，飛豬的身份定位，對我們設計產品會有從表及里的深度影響。如果我們定位是旅行預訂工具，必然只能做出小的創新。所以如果要做大改變，首先要定義飛豬的新身份。
而恰巧，2018年飛豬迎來了新的品牌定義──「全球fun肆玩」。我們開始從旅行預訂平臺進行更大膽的轉型，試圖建立新的在線旅游生態。
在這個身份轉變的契機下，我們在2018年對首頁進行了升級。
飛豬的新目標叫「全球fun肆玩」，關鍵在fun。我們需要通過設計，激發用戶旅行的欲望。
舊版飛豬的框架依然是圍繞業務架構建立的。而在這次改版中，我們希望基于每一個普通旅行者的視角，來建立新的首頁框架。
在建立框架之前，我們需要挖掘的是，旅行是什么？
有人說旅行是機酒火汽的預訂，其實不是。我理解的旅行指的是人，花一段時間，離開現在的位置，去感受快樂。其中包含了角色、目的、地點、時間4個關鍵的因素。而取決于角色的不同，每個人在旅行上作出的決定也是不同的，所以「人」是旅行真正的內在因素。
而我們認知里零散的旅行方式，如：跟團游、自由行、親子游、出境游、周邊游只是被內在因素對旅行產生影響的結果。
而偏偏旅行還要求我們產生玩的想法，留出足夠的時間，從一個地方去另一個地方。當定機票酒店已經不再是個難題的時候，我們決策困難的原因更多是在自身：我不知道自己想要什么樣的旅行。
所以我們解析了用戶的旅行特性，發現每個用戶喜歡的內容、商品，都是不同，且是特色鮮明的。所以我們的核心需要做到的，就是讓這些無數的普通人，都能感知自己的內在，并找到和自己內在適合的旅行方式。而直接放商品、內容都讓用戶難以理解。所以我們選擇了更理想的方式來讓用戶理解自己的內在──主題。
我對主題這兩個字的定義是：一句話描述你想要的旅行。這句話可以是：情侶最愛去、國內必玩地、舌尖上的中國、隱居西子湖畔等等和你匹配的點。
我們初步將主題組織成了靈感、計劃、商品三個維度，希望能在玩什么、什么時間去、買什么等旅行決策上，對用戶由內而外地產生幫助。
在搭建好了框架后，我們需要的就是更好的承接能力。核心考驗的就是內容的生產和算法的組織。
為了讓用戶看到更好的內容，我們使用了新的后臺，可以通過算法，動態選出具有相似主題的無數商品，搭建頻道，并進行投放，做到千人千面。
在內容質量上，我們還將繼續尋找突破口，進行新的升級。
飛豬2018的首頁，我們也在視覺上打破傳統，做了很多突破。
突破空間 – 打破「屏效比」的偽命題
在移動端設計的時候，設計師往往被要求利用屏幕的空間。
而業務方和 PD 也非常機智，總能有一些金點子，例如：「區塊再矮一點」、「文字再小一點」、「給我多放幾排」、「一排再給我多放幾個」。
在這樣的訴求下，我們的界面設計常常會失去很多留白空間，導致信息密度會很大。而太大的信息密度反而會影響用戶的閱讀欲望，甚至降低用戶的閱讀效率。
而隨著設計影響力的增加，大家認識到了一個更美的、更能討人喜歡的界面，不是什么都放上來的界面。
圖片 – 大圖凸顯內容品質
由于以往對空間利用的苛刻，我們的圖片常常會被壓縮得很窄、很矮，有時甚至無法形成系統的圖片比例。而在解決了空間的問題后，我們可以按照1 : 1、16 : 9、4 : 3這樣的標準比例來設計圖片坑位的大小。這些比例能更好地幫助用戶閱讀圖片的內容。
文字 – 不是裝飾，更不僅是內容
隨著iOS11的推出，大標題對設計已經產生了較大的影響力。我們在設計首頁時就做了大膽的嘗試，使用簡短有力的大標題和留白作為每個模塊的區隔，讓用戶的視線可以從一個模塊自然地過渡到下一個模塊。
同時，我們盡量保證內容是簡短有力的，這樣就可以用更大的字號，減少用戶閱讀的成本。
色彩 – 來自于旅行的顏色
以往在猜你喜歡中，我們的標簽都是用黃色或者黑色底，蓋在圖上來做的。但這會影響圖片的品質，同時較小的標簽文字蓋在圖上，其實并不適合用戶閱讀。
所以我們優化了方案，讓小文字和圖片不要重疊，提升了文字的閱讀性。同時通過改變標簽文字的顏色，讓標簽成為了商品卡片的點綴。
我們回顧了飛豬首頁的設計歷史，并看到了2018年我們的探索。這背后伴隨的是行業、市場、用戶的變化，提醒著我們需要把產品設計得更優秀，來面對無盡的挑戰。
2018年飛豬首頁的改版，也代表著首頁設計模式的轉變，從業務爭奪入口轉型為基于用戶體驗，設計師、產品經理、業務方、技術團隊協同作戰的模式。
而作為設計師，更需要始終圍繞著用戶，在桎梏中跳舞，做出好體驗的設計。
2018飛豬首頁的改版只是開始，飛豬才剛剛轉型，未來我們將更加緊密地圍繞用戶，提供質的服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn
