為什么了解網頁布局很重要？網頁布局在很大程度上決定了網站的訪問者將如何與網頁內容進行交互。
這里將介紹一些常見的網頁布局形式，例如卡片式、分屏布局、網格布局……一起來看看吧！
卡片式布局被Pinterest、臉書和推特等網站所使用，它非常適合在新聞網站和博客上使用，因為卡片式布局可以在頁面上放置大量內容，同時又保持每部分內容各不相同。
卡片式布局主要有兩種形式：
網頁中每個卡片的尺寸相同，卡片的排列非常標準，例如Dribbble的網頁布局；
使用不同尺寸的卡片組成頁面的布局，卡片間沒有固定的排序，例如Pinterest、花瓣的頁面布局。
當兩個元素在頁面上具有相等的權重時，分屏布局是一種流行的設計選擇，并且通常用于文本和圖像都需要突出顯示的設計中。
分屏設計特別適合電子商務網站上的產品頁面。產品圖片需要在頁面上突出顯示，但價格、規格、購物車按鈕等信息也要顯示。
隨著移動設計的盛行，大標題排版變得流行起來。大號字體在標題中特別流行，在一些網站的正文中也能看到。
較大的文本更具可讀性，可以改善使用體驗。另外它還提供了強大的視覺效果，因此這種布局在極簡主義設計中特別受歡迎。
個性化算法推薦可以根據每個人的喜好量身定制數字體驗。人工智能技術的發展讓算法變得更易用，能精確分析用戶的喜好。
根據用戶之前的訂閱習慣，Netflix可以為用戶個性化推薦他們最有可能觀看的電影。
像Medium這樣的網站會基于用戶以前閱讀和喜歡的內容，向他們展示很多同類型的文章。
網格為設計提了視覺上的平秩序感，以一種平衡且有組織的方式呈現內容，使內容更易于人們使用。
在網格設計中使用不同大小的內容可以在保持內容有序的同時增加視覺吸引力。
雜志和期刊的布局方式影響了網絡雜志的版面設計。這些網頁布局很適合有大量內容的網站，尤其是每天都需要更新內容的網站。
單頁布局將網站的所有主要內容放在一個網頁上，通過滾動完成導航，有時還使用視差滾動效果。
對于內容稀疏的網站，單頁布局是一個很好的解決方案。同時它也是內容敘事的完美選擇，比如交互式兒童讀物。
F型和Z型布局是指用戶的視線如何在頁面上移動，即用戶如何掃描內容。F型布局有非常明確的視覺層次結構，因此適合內容更多的頁面。
Z型布局將視線吸引到頂部，然后沿對角線方向向下延伸到底部，然后再次延伸。
在設計中，不對稱會產生動態化的視覺沖擊力。大多數情況下不對稱是由于圖像和文本間無法平衡而造成的。
由于不對稱會產生動態的、充滿活力的視覺印象，因此對那些想要傳達這種形象的品牌來說是非常有用的。
這種布局的優點在于完全專注于內容，沒有視覺上的混亂。
干凈簡單的布局幾乎適用于任何類型的網站。許多優雅的網站都可以被認為是“簡潔的”，無論它們包含什么設計形式。
導航標簽適合用于包含少數項目的菜單，否則導航會顯得很混亂。
輪播內容包含圖像和文本，通常出現在網站的頂部，用來突出顯示內容。
好的網頁設計具有很強的適應性并且對用戶來說始終是友好的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
無論作為設計師還是普通瀏覽者，大家觀看一個網站時最先接觸到的就是網頁的頭部區域，這部分內容為網站的其他各個方面設定了基調，在網頁設計中起著非常關鍵的作用。
尤其是如今簡潔設計比較盛行，多數時候把頭部內容設計好就變成了吸引用戶眼球最好的辦法。網頁設計師在設計網站頭部時投入了大量精力，同時要兼顧創造力和實用性。根據一項Google的研究，用戶只需要短短數秒就可以形成對一個網站的看法，甚至有些觀點是在令人難以置信的1秒內形成的。用戶對品牌的了解就是從這么短的時間內開始的。
在通常網頁設計中，首頁上方的整個空間都被視為頭部區域。作為人們在加載網站后的最初幾秒內看到部分，頭部信息起到了一種邀請作用，它應該提供有關網站的基本信息，以便用戶能夠在幾秒內了解網站的主要內容。
如果以招聘活動站點為例，整個頭部區域設計要明確傳達企業形象，及本次招聘活動的特點。給瀏覽者一個強烈的視覺印象，企業已向你發出邀請，我們對人才十分渴求，等等信息… 如果有線上線下活動同時參與，那么在整體風格上盡量保持一致。
網頁頭部的任務是給用戶提供一些基本問題的答案：代表什么品牌，提供什么服務等等。如果我們在內容上引起了用戶情感上的共鳴，那么就是正確的設計。
那么主要元素通常包括：
在設計網站頭部內容時，從思維層面來講沒有任何東西會限制你的創造力，它應該是令人難忘的、簡潔和兼具實用性的，是一個可以展示創造性的開放領域。
下面讓我們一起來看看頭部內容設計的一些技巧。
1. 關于尺寸
對于網頁頭部圖片的大小是沒有統一的答案。有時候設計師希望提供相對固定的數字，但網頁設計最大的難點之一是很難確保每個屏幕尺寸的有效性。即使兩個屏幕的尺寸相同，分辨率也可能不同，因此用戶看到的內容也不一定完全一樣。
因此，我們不要拘泥于精確的像素概念，最好遵循經驗積累的常識規則。
頭部的高度本著不干擾內容感知的基本原則。對于一些展示信息資源的頁面，較小的頭部區域是一個不錯的選擇，而對于落地頁或者企業客戶首頁，頭部區域可能會更大，而且多數大客戶會有主視覺單屏展示頁。
如果某些網頁，例如落地頁頭部內容較長的情況下，最好在首屏給下一屏內容露出一些空間，這樣用戶就可以意識到下一頁還有內容，引導用戶滾動。
2. Logo展現
當一個人發現自己在陌生網站上，總是習慣于從屏幕的左上角開始瀏覽網站。盡管設計師有時候認為打破常規的布局也可以帶來不錯的效果，但是多數用戶如果他們常規位置找不到預期的信息，將會不假思索地認為這個頁面是難用的和不規范的，需要花費很多的努力才能理解。這就要看你的設計目的和受眾群體能夠接受哪些程度的變化，我們今天主要說大多數受眾。
Logo ——與居中或右側放置相比，用戶更容易記住那些 Logo 放在左邊的品牌。如果你使用的是圓形 Logo，那么可以把它居中放置，盡管它的有效性仍然比放在左側要低。
3. 吸頂導航欄
吸頂導航，換句話說就是「粘性標題」，當你滾動頁面時，導航區在頁面中跟隨，現在成為一個網頁設計標準。如果不違反網站整體設計理念，請將導航欄吸頂固定。無論是PC端還是移動端設計，這都是一個好的選擇：
可根據頁面內容展示要求，向下滾動時調整導航背景透明度，盡量少的影響內容展示同時使頁面看起來更生動和通透。還可以在滾動時簡化導航欄樣式或高度，使用戶能找到但又不過于搶眼。
總之，固定導航欄有助于提升用戶體驗，保持用戶導向并給予了他們更多控制權。
3. 關于圖片的應用
頭部內容所用圖片可以選擇直接和要表達的業務相關性很強的，例如招聘類網站使用招聘場景圖片；也可以選擇中性感覺的例如辦公場景、城市風景類圖片進行虛化降低清晰度或明度來突出前景內容；
高質量圖片——攝影對于網頁設計師來說是一個強大的工具。它可以講述一個故事，喚起用戶的情感，并鼓勵訪問者進一步滾動。對于那些有強烈沖擊力的圖片的網站，試著做一個透明的標題，它可以更好地顯示圖像，并保留了主要鏈接。
輪播圖片——如果客戶給了幾張代表該企業業務的出色照片，這種方式就沒錯！企業希望用戶可以滾動瀏覽一組精美的高分辨率圖像。
插畫——網站的頭部圖片必須能引起讀者的共鳴，建立起人與人之間的聯系。如果圖片是獨特的且易于辨認，即使是從網站標題中剪切出來，效果也會很好，可以利用當今的插圖潮流來實現這一點。
4. 視頻或動畫
當然我們也不能只關注靜態圖片，添加視頻也是最有效的網站頭部創意之一。如果可能的話，嘗試著在頭部內容中添加主題視頻材料，很多網站利用在背景中添加短視頻來吸引用戶，盡可能以最好的方式展示他們的公司或產品。
△ 華夏幸福校招官網首頁動畫，撥云見日的效果加上中式剪紙風格的運用，將公司各業務線融合到幾個轉輪中，產生了故事性的動畫場景。
如果想要使設計更具吸引力、生動和令人難忘的另一種方法是添加動畫。它可以使網站頭部內容變得非?？帷Ｒ悦考拘@招聘企業站點為例，各大公司對應屆生群體的追逐，很大程度上體現在對該群體審美和喜好的迎合上，年輕有活力的動畫或視頻元素絕對是吸引眼球的不二之選。
當然不一定只有滿屏大型動畫，一般動畫越復雜面積越大占用流量越多，客戶打開延遲也影響觀感。這時候我們可以根據功能不同，設計一些交互性的動畫，去提升客戶使用感受，盡量不影響網頁打開速度。
5. 移動端頭部設計
網頁頭部不可能只顯示PC端的網頁上，還應該正確顯示在移動端的網頁上。因此，在近年的設計中，網頁必須具有響應性，并且能夠很好地適應各種移動設備，這樣才能帶給用戶完整的設計體驗。
移動設備的日常使用廣泛性早已影響網站設計，即使在PC中，也有一些細節看起來像是面向移動設備的網站設計。例如，Banner和漢堡包菜單都起源于移動設計。
移動端有著與PC端不同的屏幕尺寸和操作方式，很多時候需要設計師在一開始就考慮到兩種界面的適應情況，比如在PC上頂部一條的導航，到移動端就演變為一個漢堡包菜單。而原本PC頁面中展開顯示的內容，在移動端會向下層延伸，首層界面成為一個內容聚合頁。
網站是以頭部內容為先導的，它就像是一張獨特的名片。因此，我們在設計網站時，盡可能最大限度地關注該區域。
最后還要提醒大家，一定記得定期更新網站頭部內容哦！以校園招聘大客戶為例，大多數企業都會在每年春秋兩季的招聘旺季更新其招聘主題風格，以保持網站的新鮮感和時效性。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
用戶在操作系統時所看到的頁面框架其實就是系統布局，它是一個產品最外層的框架結構，一般包含了頂部導航、側邊導航欄、面包屑、圖文、卡片、內容等元素。
對于設計師而言，想要了解一個中臺，首先要了解它的系統布局，系統布局是頁面設計的基礎，它與頁面的關系，就如同建筑與地基的關系。日常完成需求時，UI 界面反復的調試頁面寬度與卡片比例會占用我們大量的時間。為了提高工作效率，并且把更多的時間放在業務、視覺創新等方面，我們就應該需要一套完整的布局規范。
對整個公司產品體系而言，內部員工與普通用戶使用的操作系統達到幾十甚至上百個，單一的頁面布局滿足不了各個子項目的使用場景。所以我們從前期的布局框架設計調研到產品業務的特性，定義了中臺界面的幾大類型，并且在我們的設計規范中定義了幾大類型系統布局方式，根據其布局方式定制好柵格，方便日后在各個業務場景中使用，從而能夠保持一致性、并且可擴展，方便快速迭代和維護。
視覺層次
對于中臺的 UI 設計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在 UI 設計師設計頁面時需要把很多互不相關的元素有秩序的組織在一起，正確引導用戶操作與使用。亨利·亞當斯（Henry Adams）曾經說過：「混沌是自然法則，秩序是人類的夢想」。人們總是喜歡秩序，因為秩序可以讓事情變得更容易理解。這同樣適用于數字產品的用戶界面，當 UI 元素被有序組合和結構化時，人們可以輕松的使用應用程序和網站，并對產品感到滿意，所以設計頁面時需要結合視覺層次理論。視覺層次理論是設計過程的核心方法之一。最初是建立在格式塔原理的基礎上，它觀察到了用戶對相互關聯元素的視覺感知，并展示了人們如何將視覺元素歸為一類。那么什么是視覺層次呢？官方概括：視覺層次結構致力于一種用戶能夠理解的方式呈現產品的內容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容，以便大腦可以根據物理差異例如：大小，顏色，對比度，樣式等區分對象。
蘋果的設計一直以來都是引領著設計趨勢，其設計被國內外用戶所認可，所以就以蘋果官網作為案例。其中，字重對比：蘋果官網在字重上給人眼前一亮的感覺，它采用 Medium+Bold 的字重使得標題與詳情內容產生強烈的大小對比，用戶進入官網的第一眼便能了解核心內容。顏色對比：在顏色上使用黑色背景承托產品和內容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：
格式塔理論
往往用戶打開頁面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而并不會感知到一些較細節的元素。往宏觀來講當人們感知到一個物體由許多元素組成的復雜對象時，人們會采用有意識或無意識的方法將這些部分安排到整個組織的系統中，而不只是簡單的元素級。它適用于不同級別的感知，但是視覺部分似乎是設計師設計界面時最能體現價值的部分，這其實就是格式塔理論，格式塔（Gestalt）這個術語來自德語單詞 Gestalt，中文翻譯為「形狀，形式」。
格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背后的基本思想：「整體不是元素基因的總和」。官網概括：「在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割」。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。
在我們的現實生活中有很多自然規律都遵守了格式塔原則，比如說每到秋天，北方的嚴寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴密，并且群體在往同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產生人字形或一字形的圖形。
信息框架
剛剛我們也介紹了視覺層級結構和格式塔理論，接下來簡單介紹一下信息框架，它也是在系統布局中需要考慮的內容。信息框架是將信息內容進行組織分層，一個產品的信息框架取決于其特有的業務，他與業務強相關并且需要了解用戶群體目標。根據業務和用戶目標將內容組織搭建信息框架，形成系統布局的骨架，方便用戶在瀏覽或操作頁面時能夠快速找到重點內容，提升用戶使用效率。我們用今日頭條 Web 端和飛書 Web 端兩個線上產品作為案例分析吧，今日頭條和飛書屬于兩種完全不同類型的產品，那么其信息架構也完全不同。
今日頭條屬于門戶類新聞客戶端，主要是生產內容展現給用戶，首先進入到產品映入眼簾的是無窮式的信息流，它不需要用戶登錄/注冊作為身份門檻，而是直觀的把內容展示給用戶，推送用戶感興趣的內容，也不需要用戶決策任何選擇，用戶只需沉浸式的閱讀體驗即可，目的是方便第一時間抓取用戶、吸引用戶達到留住用戶的目的。當用戶產生興趣以后想要進入下一步操作如：點贊、評論時才會彈出登錄/注冊，一方面是獲取用戶的身份等信息，另一方面是間接性的把用戶留下來。從產品業務屬性來看，今日頭條的布局把重要的內容放入中間，并且占有整個布局的一半大小，其次放在內容兩側；
飛書屬于工具協作類產品，用戶第一次打開產品需要注冊才能使用。與新聞閱讀類產品不同的是工具類型產品用戶目的比較明確，所以首頁做成一個功能介紹頁面，作用是引導用戶了解產品核心功能從而轉化成產品的用戶。當然功能介紹頁也是一個網站的門面，首頁想要出彩，不僅需要在布局上做的合理還需要考慮網站的色彩、插圖等元素的統一性。在設計網站時，首頁的功能介紹頁一定要充分突出自身產品特色，強調出自身產品的優勢和亮點，如飛書首頁主要是想突出其產品能夠提高工作效率，所以直接把「在飛書，享高效」slogan 這句話放在了首頁的第一屏，輔助文案詳細的介紹了產品的核心功能，直接抓住用戶的痛點。用戶完成注冊以后，進入到功能頁面，如右下圖可以看出，其系統布局的模塊分成三份，占面積最大的模塊屬于產品最核心的部分也就是聊天窗口，較重要部分是聯系人部分，最小區域是功能 Tab 部分。
小結
所以對于設計師而言，在設計頁面時必須熟練掌握一些基本設計基礎知識，并且將這些知識靈活運用到實際的工作當中。比如設計師在搭建系統布局時需要熟知頁面視覺層次、格式塔理論、信息框架等知識才可創建合理的布局基礎。當然布局框架只是整個產品的基礎骨架，在骨架確定之后，設計師才可進行下一步的設計，如統一的視覺表達元素，清晰的功能操作，流暢的交互表達。
系統布局規范，需要通過統一的設計元素和間距規范去引導使用者們（使用規范的設計師）跨平臺使用并且能夠適配不同屏幕尺寸，目的是達到一致性，可適配、可控性原則。
一致性：對于界面來講，界面中的元素和結構需要保持一致性，如：在使用布局時應當使用一致的網格，基準線和填充，在使用設計元素時配色、圖標、文本等需保持一致。
可適配：布局是可自適應的，根據用戶在不同的設計環境下能夠通過交互動效、界面樣式有效作出極致適配反應。用戶操作后需給出即時反應。
可控性：當用戶看到界面時應直觀有效傳遞內容，如界面中模塊區域明確、內容組織明確、表意明確都能使得用戶快速理解。界面需要簡單直白，讓用戶快速識別，減少用戶記憶負擔。
在設計過程中，為了減少設計師們的日常溝通和理解成本，在設計內部我們統一了一套設計畫板尺寸為 1280。經過我們官方調研得出在中臺系統中用戶使用的電腦屏幕主流分辨率分別為：1440*900、1366*768、1920*1080、1280*800，而1280 是主流分辨率中最小且最為保險的的一個尺寸，在設計頁面時設計師如果能夠在 1280 尺寸下，縮小寬度或拉升頁面寬度都能保證沒有遮擋或擠壓問題，那么設計是合理的。在我們的規范中頁面再小于 1280 時需要吊起系統的橫向滾動條。在中臺系統中考慮到用戶效率問題很少做響應式，所以常規情況下設計師會限定界面的一個最小值。如果設計師把畫板設置為 1440 或者 1366 時可能會存在其在畫板中頁面大小正好合適，但是頁面上線以后縮小瀏覽器可能會發生遮擋或擠壓的情況。所以我們建議設計師們使用 1280 寬度畫板畫圖。
首先先分析一下界面框架，我們將頁面的用戶操作行為進行層級區分。我們至下而上將元素進行層級分層，目的是把用戶界面模塊化。界面可分成背景區域、內容層、全局控制層、內容彈層，每一層都具備獨特性，將界面中所有的信息層級提取分類并且按結構屬性分層，目的是能夠使得頁面視覺和交互邏輯符合用戶的習慣認知。之前我們有提到過視覺層次、格式塔理論和信息框架，設計師在創建這一步的時候可以用來指導搭建一套合理的頁面信息層級，一個內容模塊都屬于一個容器，容器可以承載各種內容元素。
背景層
背景層樣式固定，在界面中永遠置于界面底部，并且一般會給予背景層中性色，作用是方便突出內容層和全局控制層。
內容層
視圖結構中最核心和復雜的一層，他與業務強相關，內容層的容器承載了業務場景的用戶需要獲取的核心信息以及輔助核心任務的操作。容器承載了內容，從 Material Design 中的 Elevation（海拔）概念中可以了解到，它屬于第二層級內容，基本布局結構有平行結構或者父子結構。如下圖卡片屬于容器，卡片中承載了數據圖表等內容，整個卡片+內容就屬于內容層。
全局控制層
全局控制層我們定義他在內容層之上，屬于頁面第三層級內容，一般在業務場景中對整個網站的控制以及導航功能如：Header menu、Sidebar menu 組件，如下圖中 Header menu 浮在內容層之上。
內容彈層
當前任務或者內容相關的臨時出現層，優先級高于內容層，一般承載當前需要臨時處理的任務或者需要進行內容補充說明等功能。如：Modal（Dialog 各個平臺叫法不一致）、Tooltip、Popover、Notification 等組件 。其中 Modal 是以滑出或者彈出的形式展現給用戶。Modal 它包括兩種類型，一種是模態內容層不可操控，被蒙版遮罩禁用，比如在業務中需要較為聚焦的分支流程操作時使用。另一種是非模態，吊起彈出層后不印象內容層操作。當然，Tooltip、Popover、Notification 都屬于非模態，反饋較輕，不干擾用戶使用界面。如下圖的頁面中的內容彈層使用了 Popover，在次頁面它的功能就是加以補充說明。
隨著科技高速發展，屏幕分辨率也越來越多樣化對于 UI/UX 設計師來講必須熟練的基本知識方便日常工作所需。首先我們先了解一下屏幕中的一些單位。
在高密度屏幕下每英寸具有比低密度屏幕更多的像素，可能導致開發實現稿的視覺不符合設計師心理預期，比如：相同像素尺寸的 UI 元素在低密度屏幕上顯得較模糊，而在高密度屏幕上則比較清楚。同一物理尺寸（肉眼所見尺寸）下，低密度顯示器的像素個數明顯小于高密度顯示器的像素個數。
其實像素是與密度沒有關聯，我們簡稱密度為 DP (讀作 DIP，英文全稱 Density-independent pixel )，它是可縮放的靈活單位，可在任何屏幕下現實相同的尺寸，如圖顯示，紅色網格為像素密度，被放大內容為 UI 元素物理尺寸。
所以我們可以得出，DP 可以自適應屏幕的密度，不管屏幕密度怎么變化，實際顯示的物理尺寸相同，DP 可以保證物理尺寸的一致性，所以 DP 是目前比較適合 UI 設計的單位。當屏幕的密度為 160 的一個物理像素時，1PD=1PX。要計算屏幕密度，可以使用以下公式得出：DP=(PX*160)/PPI。
關于網格
網格線(Grid Line)，網格線又稱布局分割線，它是構成網格結構的分界線。一般在布局中它們是由行網格線和列網格線組成。如下圖是模擬網格做了一個示意，其中橘黃色兩根線分別是行網格線和列網格線。
網格軌道(Grid Track)，兩個相鄰網格線之間的空間。你可以把它們想像成網格的行或列。如下圖橘黃色的行網格線和列網格線之間的空間既是網格軌道。
網格單元格(Grid Cell)，兩個相鄰的行網格線和兩個相鄰的列網格線之間的空間屬于網格單元格。這是網格系統的一個「單元」。如下圖橘黃色的行網格線和列網格線交叉處即是網格單元格。
網格區域(Grid Area)，由單個或多個網格單元格組成，它是可以用來擺放頁面元素。如下圖所示，橘黃色的行網格線和列網格線交叉處即是網格區域。
網格設置
在設計界面時可以通過網格定制能夠使界面更加有序、整齊、規范，網格的主要用途之一是保持設計元素對齊和排序。通過建立一個網格系統，設計師可以為自己創建一個結構來適配不同的屏幕寬度。
在我制定的規范中一般會把網格的基數設置為 4，它不僅符合偶數的思路同時也能夠匹配多數主流的顯示設備，如中臺系統的用戶主流分辨率用 1440*900、1366*768、1280*800。我們可以通過設置網格規范幫助設計師快速搭建頁面，使用有律可循的布局空間的設計給到開發減少溝通成本。下圖所示設計布局網格由三個元素組成：列寬，間距，邊距。
在 Sketch 中設置網格，在菜單欄中找「視圖」-「畫布」-「網格設置」-彈出浮層可設置網格大小，網格設置的基數設置成4，之后在設計界面時可按照網格基礎的倍數作為組件的大小和頁面元素間距分割，如下圖：
我們放大頁面局部大家可以看到，把網格基數設置成 4，每個網格單元格為 4*4 大小。同理，如果把網格基數設置成 8 以后，每個網格單元格大小為 8*8 大小。
界面框架內系統布局是頁面所有模塊的組合方式，我們定義一個頁面框架中基礎模塊和內容模塊的數量最好不超過 3 個。經過調研和歸納總結出 3 大布局類型，分別是上下布局、左右布局、T 字型布局。
上下布局布局是 Web 端運用最廣泛的布局方式之一，頁面內容區以 feed 流形式展現，一般用在 Web 端官網首頁。設計師普遍做法是對兩邊留白區域為內容區并進行最小值的定義，一般定義值為 1200 較多（具體寬度要設計師如何設置柵格，后面會講到如何設置柵格），當留白區域到達極小超過極限值之后需要對中間的內容區域進行動態縮放或遮擋，此邏輯需設計師根據業務所需而定。也有少部分設計師會設計成全屏布局，內容隨瀏覽器寬度自適應。
其優點是頁面結構清晰簡單，強突出內容區，但缺點是布局的規矩呆板，變化少。設計師如果不注意合理的視覺元素和色彩細節變化，用戶很容易感覺到乏味，此布局適用于層級較為簡單頁面。
巨量引擎（Ocean Engine）是字節跳動旗下的營銷服務品牌，整合了今日頭條、抖音短視頻、火山小視頻、西瓜視頻、懂車帝、Faceu 激萌、輕顏、穿山甲等產品的營銷能力，為全球廣告主提供綜合的數字營銷解決方案。我在設計此官網時正是采用了上下布局作為頁面布局，頂部導航整合了所有子頁面的內容，導航下方為主要內容區并且內容定寬，當時采用此布局原因第一是因為次官網層級較簡單只有三個層級內容，第二是官網更需要的是突出內容區，所有頁面使用次布局更為合適。
設計師在設計重內容，輕導航類型網站是常用左右布局作為基礎框架進行頁面設計。此布局把系統頁面分為兩大模塊，其中設計師常見的做法是將左側設置成導航欄模塊并且固定，常常用來控制全局內容。而右側區域設置成工作區域或內容區，內容區可進行動態縮放。
下圖為飛書溝通窗口截圖，由于關系到內部信息保密性我把內容進行了模糊，從外觀結構上看還是能大致了解飛書結構是采用了左右布局，整個布局結構清晰有理也是符合左右布局特點。從交互體驗分析左側屬于導航區，它承載了不同功能并且固定。飛書屬于即時溝通產品設計師考慮到瀏覽器窗口有限所以對導航設計成較小模塊，而右邊為聊天窗口對于業務屬性分析它更為重要，所以模塊較大。其導航欄固定，內容區可進行動態縮放。
T 字型布局常用在 Web 端的中臺系統中，因為中臺系統業務結構復雜、層級多，而 T 字型布局能夠解決復雜結構的問題。使用此結構能夠把頁面結構清晰化，主次更加分明。設計師常常的做法是將頂部作為一級導航欄方便控制全局，二左邊設計成是二級導航并且固定導航欄固定，右邊的內區域可進行動態縮放（一般會把其設計成柵格動態區域），內容隨瀏覽器寬度自適應。
下圖是 Material Design 設計文檔，首先簡單介紹一下 Material Design，它是由谷歌的設計團隊創建的一種語言，宗旨是幫助設計師們創建易用性和實用性較強的網站和應用程序，其設計理念是將現實中的物理學帶入進設計中。Material Design 設計文檔中的結構使用了 T 字型布局作為基礎布局。頁面分為了三個模塊，其中頂部導航作為頁面一級內容進行全局控制，接下來左邊為側邊導航作為二級內容控制頁面，右邊是內容區滿足用戶使用瀏覽。從放眼望去整個頁面架構清晰明了。
以上為 Web 最常見的三大布局，但是需要大家在實際的工作中靈活運用。設計師在日常工作中可能會遇到更為特殊的業務場景，設計師可以通過整理基礎模塊然后分析其業務的信息框架，將模塊進行相互組合、嵌套歸納可以總結出更多的 Web端布局框架并落地到業務中。
剛剛在定義布局模塊中已經分析過了三大布局類型，接下要分享的是 UI 設計師更為關注內容「網頁柵格」。網頁柵格也是設計師口中常常提及的柵格系統。其實網頁柵格系統是從平面柵格系統中發展而來，它延續了平面設計的方法與風格，在網頁中使用柵格能夠使得網頁信息展現更加清晰明了、美觀易讀。
首先網頁柵格系統基本由是柵格總寬度/頁面總寬度（W）、一個柵格的寬度（a）、柵格與柵格之間的間隙（i）、一個單元的寬度（A）、外邊距（M）組成。
1. 列寬
一個柵格的寬度（a），我們稱之為列寬，一個列寬包涵了N個網格單元格（Grid Cell）我們也可以把它看成一個網格區域(Grid Area)，在上面我們已經講到過網格的內容，主要目的正是為柵格做鋪墊。其中我把一個網格單元格設置為4（原因在網格中也解釋過，如果忘記的同學可以爬樓看下）。由此可見列寬非固定值，這樣可以使內容自由適配任何屏幕尺寸。在柵格中列寬由屏幕尺寸決定。
2. 水槽
柵格與柵格之間的間隙（i），我們稱之為水槽，一個水槽寬度大于等于1個網格單元（Grid Cell）。在柵格中水槽為一個定值，寬度可以是N個網格單元，如網格單元格設置成4，那么水槽可以是4、8、12、16…N*4。
3. 柵格單元
1個列寬+1個水槽寬度即一個單元的寬度，一個柵格總寬是由N個柵格單元組成，次寬度不固定，由屏幕尺寸決定。
4. 柵格總寬
列寬+水槽再成以N即是一個柵格的總寬，公式為：W=(A*n)-i。
5. 柵格設置
經過調研我們得出常見的柵格分為 12 列柵格系統和 24 列柵格系統。其中 12 列柵格系統在流行的前端開發開源工具庫Bootstrap 與 Foundation 中廣泛使用，適用于業務信息分組較少、業務結構較簡，單個盒子內信息體積較大的中后臺頁面設計。24 等分的柵格系統適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的中后臺頁面設計；相對 12 柵格系統，24 柵格系統變化更加靈活，更適合內容比較多樣復雜的場景。如下圖分別是 12 柵格系統（左）和 24 柵格系統（右）。
6. 小結
在柵格系統結合布局結構和網格做了我做了一些知識結合，其實前面所講的網格版塊和布局版塊都是為柵格做一個鋪墊，利于同學們更加深入的了解網格、布局、柵格三者的關系。
系統布局只是網頁中的基礎部分，但也是核心內容，一個產品布局需要根據其業務屬性決定。布局搭的好相當地基打得好，但是同時在對美感的追求之上，還應當結合可用性來看待設計。在實際的工作中肯定還會遇到各種形形色色較奇葩的需求，所以希望這篇文章能夠做的不是限制而是啟發，大家可根據此次分享內容能夠進行舉一反三利用到實際的工作當中。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
版式設計是大部分設計師再熟悉不過的一個詞了，市面上很多文章都有普及過各種版式設計知識，比如：印刷中的版式設計、移動界面中的版式設計等等。但是在我做中臺規范時調研發現針對中臺系統文字規范內容科普的知識較少，可能是中后臺設計在國內還是處于初級階段吧。所以結合調研內容到實際工作中的總結給大家分享關于Web端文字系統的相關內容。
加拿大印刷術家羅伯特·布林赫斯特（Robert Bringhurst）在他撰寫的《印刷風格的元素》一書中將印刷術定義為以持久的視覺形式賦予人類語言的技藝。在中臺界面文字排版的易讀性、美觀度是設計師的首要任務，要創建閱讀性高和較美觀的中臺界面文字排版是設計師們必須學習的基礎知識之一。因為不論在App界面還是Web網頁設計中文字內容總是能占到整個版面的80%～90%的區域，好的文字排版能夠大大提高用戶的使用效率。所以本篇文章將站在一個網頁設計師的角度分享Web端界面中文字系統的基礎知識，從基本網頁中的系統字體初識、字體排版基礎理論、國際化文字適配，希望大家能夠合理運用在中臺界面的版式中。
1990年12月25日，英國計算機科學家蒂莫西·約翰·伯納斯-李爵士（Tim Berners-Lee）成功發明了萬維網，并弄清了統一資源定位符（URL），其中超文本傳輸協議（HTTP）和超文本標記語言（HTML）的概念后，他在Internet上發布了第一個網站。自從Internet發明以來，字體在Web上扮演著重要角色。1990年至今，網絡已經徹底改變了我們的生活方式和工作方式。在最初的20年中，Web經歷了許多變化，例如采用Web標準，使用CSS進行布局以及處理動態數據。雖然網絡從一開始就包含文本，但直到最近幾年它們才得到很好的應用。
在1990年代中期，英國字型大師馬修·卡特（Matthew Carter）設計的Georgia和Verdana兩款字體廣泛用在基于屏幕的網頁中。為了使字體在當時分辨率較低的屏幕上清晰易讀，馬修·卡特設計的這些字體具有X高度大、開孔寬敞的字體空間。由Microsoft專門針對網頁上的文本進行處理，Georgia和Verdana首先在位圖中進行設計，以適配當時網頁屏幕的分辨率，最后把文字轉換為輪廓字體，進行文字圖形化。
1990年代到2000年代中期是網頁設計的一段過渡時期網頁更加圖形化，系統默認自帶的字體如：Georgia、Verdana、Arial、Helvetica、Times New Roman已經滿足不了設計師們的設計需求。設計師們必須使用Photoshop和Illustrator等相關工具將一些特殊字體的每一段文本切成圖偏提供給開發人員，但是這種方式有著很多弊端，問題主要集中于本文不可選擇、復制、翻譯甚至是不可搜索。其中newyorker.com可作為典型代表，其網站在使用Typekit（可提供其自定義字體庫）之前，為了讓網頁與原印刷出版物保持一致，便使用了切圖方式將特殊定制化文本進行切圖處理，直到該該公司2010年11月開始使用Typekit自定義字體庫后才解決字體圖形化這種耗時耗力的方式。
在上面提到了在Jeff Veen還未創立字體服務Typekit之前，很多時候系統自帶的幾種字體滿足不了設計師需求，所以設計師們使用文本轉圖片的技術進行處理。為了解決這些問題肖恩·英曼（Shaun Inman）2004年開發了SIFR，雖然SIFR解決了圖片切圖問題，但其中也還是有一些問題存在，比如，太過依賴Flash，并且設置SIFR還需要掌握大量的相關知識，門檻較高。2009年Simo Kinnunen又將技術改進稱為Cufón，他使用canvas和VML快速替換文本，無需Flash或圖像。Cufón由兩部分組成：一個字體生成器（將字體轉換為專有格式）和一個用JavaScript編寫的渲染引擎。雖然文本圖片轉化技術一直在不斷完善中，但是歸根結底文本圖片轉化技術并不是網頁中的文字排版。
直到2009年Jeff Veen離開了Google并且同一年創立了字體在線服務Typekit，極大的豐富了設計們的字體選擇。2011年Adobe收購Typekit（也就是現在Adobe Fonts），并且Jeff Veen也因此成為Adobe產品的副總裁，負責Creative Cloud業務，負責Adobe旗下幾乎所有產品的在線體驗。
可變字體指的是一個字體默認狀態進行多個樣式擴展，他是一種含有多種變化的單一字體：即所有字寬和粗細、甚至是斜體的變化都可以包含在一個單一、高效且可壓縮的字體文件中。比如說PingFang SC，如果在系統上使用，同時包含了六種字重：常規體、中等、細體、特粗體、特細體、粗體。
可變字體是由Adobe, Apple, Google, Microsoft四大巨頭在20016年9月聯合在波蘭華沙的ATypI會議上宣布的Variable Font的字體規格OpenType，OpenType特點在于可將多個字體打包成一個字體，并且不會增大字體文件包的大小。他解決了某單個字體文件可以獲取各種粗細，寬度，高度，樣式和其他屬性的問題，具有靈活性?？勺冏煮w為Web上的排版提供了一個跨時代的變化。目前排版軟件廠商、字體設計師、字體廠商都積極地大量投入可變自己提的研究和開發設計，并且廣泛運用在操作系統和印刷行業。
目前在主流的操作系統、瀏覽器、設計軟件都在不同程度上支持可變字體。像操作系統，Mac os、iOS、Android、Wear OS、Fuchsia。瀏覽器Safari、Chrome、Edge、Firefox。設計界最為熟知的圖像編輯工具Photoshop、Illustrator、Sketch、Figma也已支持可變字體，設計師可以使用該設計工具進行同款字體不同樣式的使用。
舉個比較比較典型的例子，在2019年9月小米推出了全新的 MIUI 11 系統，并帶來了小米蘭亭Pro動態字體系統，小米蘭亭Pro字體聯合方正字庫聯合開發。在 MIUI 11操作系統中，用戶可以通過系統設置進入字體模塊，拖動相應滑塊即可改變手機界面用字的字體大小和字重粗細。MIUI動態字體支持文字粗細無級調節，每個人都可找到適合自己的字重，下圖是MIUI 11系統中可變字體的演示：
字體是體系化界面設計中最基本的構成之一，選擇字體是一個具有創造性和情感的過程，因為不同的字體傳達出不同的情感。在制定用戶界面規范時科學的定義字體規范系統，不僅能夠有效的表達出不同的設計風格，還能通過定義字體的字族、字階、字重、字體顏色、字體行高，有效幫助設計師在設計界面時使用字體達到統一性和整體性，保證界面有良好的閱讀體驗。首先，先為大分享一些非常實用的字體網站。
第一個我要推薦的是Adonbe旗下的Adobe Font，網站中有非常多優秀的字體。但是網站字體需要收費，一般是按照使用量的形式進行支付版權費，特點是可設置屬性進行字體樣式實時預覽，并且字體比較全。
在Google Fonts，你可以免費下載你喜歡的字體，并且按照你的需要在項目中使用。由于在系統中使用其他字體的唯一方法就是將字體文件導入到系統中，因此Google Fonts的下載功能非常有用。Google Fonts包含超過1400種不同的字體，其中包含最著名的：Open Sans和Roboto字體，他們是Android系統使用的默認字體。
設計師在做設計時常常會遇到某些網站或海報使用的字體特別喜歡，但是苦惱無法獲取改字體的信息導致無法下載使用，求字體網解決了此痛點。你可以將喜歡的字體進行截圖并上傳到網站進行字體識別，確定后他會提供出字體下載鏈接或者字體信息，解決設計師們喜歡某個字體而找不到的煩惱。
字由也是我比較推薦的一個字體網站，個人用的也會比較多。官網將全部字體進行整理分類方便用戶快捷尋找字體，并且有個分類是免費商用字體庫，避免了常常困惑的設計師使用字體導致版權糾紛問題。此有網站有兩大亮點，第一是此網站在設計師選用字體時有個實際運用預覽效果，直觀的看到字體在實際使用效果，第二是網站提供客戶端下載，在客戶端中點擊下載以后可直接進行在設計工具中直接使用。
在選用系統字體時需要考慮在不同系統的兼容性，大家都知道在不同的操作系統及不同的游覽器中默認顯示的字體是不一樣的，并且相同字體在不同操作系統里面渲染的效果也不盡相同。在做字體規范時需要提供一套系統完整的字族，里面不僅需要包含系統默認的界面字體，還需要一套有利于屏幕顯示的備用字體，方便維護不同系統及瀏覽器的實現，保證在任何場景保持良好的閱讀性和可讀性，下面是我在做界面規范時與相關同學一起選取的界面字體。
第一部分：-apple-system是在以WebKit為內核的瀏覽器，比如蘋果的Safari中調用蘋果系統macOS、iOS、watchOS、tvOS中默認字體，目前一般情況下英文使用的是San Francisco，中文使用的是PingFang。BlinkMacSystemFont是在Chrome中調用蘋果系統的字體。
第二部分：主要是提供了Windows和MacOS下的字體。其中Segoe UI針對Windows and Windows Phone等系統。PingFang SC是蘋果為中國用戶打造了一款全新中文字體，整體樣式看上去更加簡潔，字族共6個字體：極細體、纖細體、細體、常規體、中黑體、中粗體。Hiragino Sans GB是是Hiragino KakuGothic的簡體中文版，由日本設計師為MacOS和iOS系統中內置字體，簡體中文有常規體和粗體兩種，冬青黑體是一款清新的專業印刷字體，其小字在屏幕顯示時足夠清晰，擁有很多用戶的追捧。Microsoft YaHei是從Vista開始，微軟提供了這款新的字體，它是一款無襯線的黑體類字體，并且擁有Regular、Bold兩種粗細的字重，字重有效提高了字體的層級顯示效果。目前這款字體已經成為Windows游覽器中最值得使用的中文字體。從Win8開始，微軟雅黑又加入了Light這款更細的字重，對于喜歡細字體的設計或開發人員又多了一個新的選擇。
第三部分：主要是系統備用兜底字體，Helvetica Neue在沒有El Capitan versions系統的電腦中是最流行的，所以作為兜底，sans-serif也是常見的兜底字體；
第四部分：主要是系統的emoji，在我們的規范中選用了'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' 針對在macOS和Windows顯示emoji。
在設計規范系統中字體是用戶體驗相當重要的一部分，因為不論在App界面還是Web網頁設計中，不同的系統分辨率、不同的顯示器尺寸、不同的DPI都會對最終展現的文字大小帶來影響，并且文字在內容區總是能占到整個版面的80%～90%的區域，所以要根據用戶使用電腦的分辨率給予用戶一個比較合適的默認字號。那么這個字號多大合適呢？是12px、13px、14px還是15px比較合適呢，所以我們回到這個老生常談的問題進行分析。
在做規范時調研了在市面上各大較流行的網站，目前大部分文本類字體大小都采用了12px-14px范圍的文字大小。另外Windows自帶的點陣宋體從Vista開始只提供12px、14px、16px三個大小的點陣。所以，如果13px、15px、17px雖然每個字的空間大了1px但是點陣卻沒變，從視覺上會顯得略稀疏，可能導致顯示效果不佳。偶數字號的文字，比如12px的“中”字，去掉1像素的間距，填充了像素的實際寬是11px，文字的中豎線左右是平分的顯得均衡，具有美感。如下圖所示：
但是也有少部分網站使用基數作為文本大小，比如知乎正文使用15px，豆瓣首頁標題下面的的簡介文字使用的13px大小，我簡單的分析了一下，知乎在改版之前文本類內容用的13pt大小的可能是有用戶吐槽頁面文字太過于密集后來統一改成了15pt，知乎和花瓣頁面雖然使用的是基數但是整體效果還算不錯。不過為了字體使用更加的“安全”還是推薦偶數作為文本規范。
還有些因素會比較推薦用偶數，比如說從瀏覽器角度上看，因為某些電腦的瀏覽器上如在IE6瀏覽器會把基數的字號自動渲染成偶數系。在一些畫圖軟件如Figma、Sketch、Photoshop等一些畫圖軟件在設置字體大小屬性時從12px以上都是采用偶數進行快捷選擇，這也形成了一種常見的習慣。
在文字規范時也借鑒了設計界大佬AntDesign的規范，Ant Design 3.0 的時候，對主字號進行了研究，飲用AntDesign的解釋“我們基于電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對 Ant Design 的主字體進行了一次升級，從原先的 12 上升至 14，以保證在多數常用顯示器上的用戶閱讀效率最佳?！?
同時我們也站在電腦屏幕分辨率也有過調研，在上一篇分享分享的系統布局中也提到了，目前大部分中臺系統中用戶使用的電腦屏幕主流分辨率分別為1440*900、1366*768、1920*1080、1280*800，因此在這些主流電腦分辨率中經過實驗，14px小大的文字效果以及閱讀體驗會比12px更加的舒適，并且內容會更加的清晰。
總結以上幾點分析我們得出，在界面中使用偶數會比基數更加的美觀、安全，也比較利于設計師的使用習慣，并且在糾結使用12px還是14px字體大小的很長一段時間里我們經過調研競品以及進行不同屏幕分辨率下字號的實驗最后確定我們字號使用14px正常文本大小，12px可作為輔助文字使用。
行寬是指一行字的長度，那么在用戶界面排版中我們使用多少行寬比較合適呢？引用Fusion Design的解釋“從生理結構分析，人在閱讀文字的時候，理解并傳遞到大腦的信息是有限的。用戶在閱讀時，目光左右上下巡視、掃描和閱讀，這意味著閱讀要求大量的眼球運動。行寬越長，眼睛移動的距離太長太多。寬度較大，眼動位移較大，讀者閱讀換行時容易串行。行寬越短，眼睛閱讀折行的次數太多。行數較多，眼動跳躍次數多，讀者閱讀行時會感覺到文字不連續?！彼栽诓僮鹘缑嬷斜苊膺^長、行數較多的文字，閱讀是大腦活動中一種最復雜的過程，比如說在操作系統中界面操作較復雜，如果出現大段的文字用戶不僅要操作復雜的系統，還需要進行閱讀理解大大降低了用戶的使用效率。
加拿大印刷大師羅伯特·布林赫斯特（Robert Bringhurst）有一個算法是：行寬=字號x30，例如：設置字號為14px大小，那么我們建議其基礎行寬是420px左右。中文一個字體寬度是14px，那么建議一行建議30個文字。注：在文字寬度規范時，為了考慮國際化的適配，避免多語言差異我們不以文字個數作為度量單位，而是以整個行寬來計算，比如說表單Title、Table。
行高是指在多行里面一行文字與另一行文字之間的的間距，每行文字占用空間的高度。我們定義行距(行高) = 字號 + 行間距，而不是單指字體高度，所以文字的高度不等于字號的高度，如：字號12px，行高為22px，根據Web頁面平均分配原則，行距就是從文字的頂端上移4px到文字底部下移4px的距離。如下圖所示：
在頁面布局分享有提過視覺層次，因為視覺層次是設計過程中的核心方法之一，對于中臺的UI設計師們而言，良好的理性思維相對比感性的視覺思維更加重要，因為在UI設計師設計界面時需要把界面中很多互不相關的元素有秩序的組織在一起，正確引導用戶操作與使用。那么什么是視覺層次呢？官方概括：視覺層次結構致力于一種用戶能夠理解的方式呈現產品的內容，以便用戶可以理解每個元素的重要性級別。它可以組織頁面內容，以便大腦可以根據物理差異例如：大小，顏色，對比度，樣式等區分對象。
視覺層次中的“層次”其實講的是在設計用戶界面過程中設計師需要有在內容上進行取舍，保證用戶使用產品時能夠讓用戶強烈的感知內容的主次，并且內容和功能優先級的高度進行區分，有效的減少用戶在操作界面時對內容需要就行二次過濾。比如說某個提示說明在頁面上最高，那么此提示在界面中一眼看過去需要最被突出和強調的。如果用戶界面看起來一團“糊”，那么這個設計是失敗的，因為它不能有效的幫助用戶進行內容篩選，導致用戶還需要使用時花大量時間去閱讀操作。
視覺層次分為4個基礎部分，其中包含了大小對比、字重對比、位置對比、顏色對比。
同樣還是用蘋果官網作為案例，真心覺得官網設計太好了。蘋果的設計一直以來都是引領著設計趨勢，其設計被國內外用戶所認可，所以就以蘋果官網作為案例。其中，字重對比：蘋果官網在字重上給人眼前一亮的感覺，它采用Medium+Bold的字重使得標題與詳情內容產生強烈的大小對比，用戶進入官網的第一眼便能了解核心內容。顏色對比：在顏色上使用黑色背景承托產品和內容，強烈的黑白對比增強了信息傳播中的識別度和對比度。圖文排版：在圖片與文字排版中使用了文字層和圖片層互相疊加的視覺效果，使得頁面層次感更加的豐富。如下圖：
格式塔原理或格式塔定律是感知場景組織的規則，人們感知由許多元素組成的復雜對象時，會采用有意識或無意識的方法將這些元素安排到整個組織的系統中，而不只是單一的元素級。它適用于不同級別的感知，其中視覺部分是設計師設計界面時最能體現價值的部分。
格式塔（Gestalt）這個術語來自德語單詞Gestalt，中文翻譯為“形狀，形式”，格式塔心理學家庫爾特·科夫卡（Kurt Koffka）的一句話可以捕捉到這一運動背后的基本思想：“整體不是元素基因的總和”。官網概括：“在心理現象中，人們對客觀對象的感受源于整體關系而非具體元素，也就是說知覺不是感覺元素的總和，而是一個統一的整體，部分之和不等于整體，因此整體不能分割”。格式塔理論中元素之知見的原則分別為臨近，相似，連續，封閉和連接。在用戶打開界面進行閱讀或者操作界面時視覺的第一感受是產品的整體效果，而并不會感知到一些較細節的元素。
在設計用戶界面時需要理解格式塔定律中5大定律，分別是接近、相似、閉合、連續、簡單，其中兩個最重要的定律分別是接近定律和相似定律，這兩個定律主要描述了我們感知事物的核心方式。
人類的大腦總是把一些細節復雜的元素分析歸類，將相對靠近或有相似的連接點的內容作為一個整體，在我們的生活中有類似的在我們的現實的生活中有很多自然規律中遵守了格式塔原理的接近定律，比如說比如說每到秋天，北方的嚴寒氣候不再適合大雁生存，這時候大雁便會飛往較暖和的南方，當人們看到天空正在南飛的大雁隊伍，它們組織鏈接得十分嚴密，并且群體在同一個方向移動，所以隊伍的形狀在我們的大腦中將它們視為一個群組的一部分，產生人字形或一字形的圖形。當你看空中一些比較特殊的云朵比如像貓、像飛鳥等圖形，是因為蓬松的氣體發生形變，形成了酷似動物或生活中熟悉的物體。這其實都是人類大腦通過潛意識進行腦補和整理出來的畫面，如下圖中的元素彼此靠近的元素歸為一組，相反距離較遠的元素被視為不同組。
其中在元素排布中也有一定的規律性，比如當行向間距大于列間距時，那么視覺的行排布的橫向關系密切形成整體。當縱向間距大于列間距時，那么視覺的列排布的縱向關系形成整體，如下圖所示：
以今日頭條和優酷視頻作為案例，首先進入到今日頭條首頁后映入眼簾的是無窮式的信息流?？梢钥闯鲈O計師使用接近原則對信息進行分組、組織內容和整理布局?？ㄆ休d的內容形成模塊，模塊與模塊之間的這里發揮著至關重的的作用，因為它引導用戶眼睛朝向預期的方向，有效引導用戶使用。并且其排列方式是比較典型的縱向關系，可以看出行間距小于列間距，增強了縱向關系，有助于用戶閱讀和分類。把重要信息流的內容模塊放置中間位置，其他次要內容放置左右兩列。
優酷視頻是個大型視頻分享平臺，進入到首頁同樣是無窮式的視頻類信息流。我們可以看到產品排列方式與今日頭條正好相反，除了頂部導航以外內容區的行間距大于列間距，增強了橫向關系并且以橫向關系密切形成了整體，屬于典型的橫向關系排列。其中視頻封面與下面的文本形成一個內容小組，內容小組與內容小組形成一個大分類。由于產品視頻分類較多，所以從頁面排版上使用橫排關系將白色的空間增強了視覺層次感有效將視頻類型橫向區分，幫助用戶更快的找到相關類型的視頻內容。
接下來再說下相似定律。人們大腦總是把一些相似視覺特征的元素被認為是一類，與不具有相似視覺特征相比較具有相似特征的元素關聯性更強。在用戶界面排版中具有相似功能的元素在樣式上應該保持一致，比如說在操作界面中Link的顏色為藍色，那么用戶在操作界面時默認會把藍色的文字理解為可點擊Link。
設計師在設計界面過程中可以使用相似定律將元素進行元素分組、元素組織、元素布局。但是需要強調界面中相同的元素（組件），如按鈕、下拉、標題、正常文本等一些基礎組件需要使用相同的設計語言，保持一致的顏色、尺寸、布局等。本·施耐德曼在《Designing The User Interface》里說過：“在界面設計中，要采取一致的行動順序”。因為用戶會將視覺屬性相似的內容分組，將最相關的內容彼此靠近作為小組，小組與小組之間可組合成大組也就是我們在布局中提到的模塊，最后由模塊組合呈現出頁面形態。
西瓜視頻是個性化推薦短視頻平臺，從下圖中可以看到首頁分為影視和短視頻兩類，這也是西瓜視頻的兩大特色功能。設計師在設計界面時考慮到影視和短視頻這兩大類視頻需要在視覺感知上需要進行區分，所以設計師運用了相似定律進行設計，其中豎版視頻封面與下面的文本形成一種內容小組，橫版視頻封面與下方內容組合形成另一種內容小組。以不同的形狀來告知用戶的功能類型差異。如下圖所示：
在網頁設計中不論是視覺層級還是格式塔定律，其實都是由我們人類的大腦神經感知事物的規律總結而來，在生活中每個人潛意識都具備這種技能，因為人們總是喜歡有規律的事物，規律可以讓事情變得更容易理解。同理在設計用戶界面時不僅僅是為了漂亮美觀，還需將界面中內容有效的進行梳理并傳達給用戶。
隨著公司業務不斷快速發展以及互聯網信息的快速交流與傳播，很多產品已經突破地域的邊界走向了海外市場，并且個人也因為在實際項目中產品切換多語言時產生了各種各樣的體驗問題，所以為了提高規范體驗設計師們應該提前自主探索和思考關于產品國際化的相關內容。今天主要淺談文本適配問題。
在實際的工作中會遇到界面使用中文時布局非常的合理，但是一切換到其他語言時出現各種折行或者是遮擋的問題。主要原因是因為文字的長度會因語言不同而異，即使是使用同類字形的語言也是如此，比如說英文“New”翻譯成法語是“Nouvelle”，并且法語的感嘆號前面還需要留一個空格，字符數從4個變成了8個。所以設計師在做規范時一定要考慮預留出更大翻譯空間，以下是網上找的一些Bad case。
在多語言適配時我們發現很多書寫系統，如阿希伯來語、拉伯語、波斯語、烏爾都語等，都是以右到左對齊方式進行字符顯示，并且在相同的字體大小情況下，這些字體可能看起來比西伯來語字體要小，所以需要考慮調整行間距和對齊方式，使得不同字體在相同界面中都適用。并且使用這些語言的人口數量相當大，特別是在波斯灣地區由于石油經濟發展特別迅速。對于面對中東地區出海的產品，是不能回避的問題，所以要及時作出可配性方案。
在多語言適配時因為不同的語言可能在同一界面中需要設定不同的行高達到最佳效果，可以定義3種行高尺寸來做多語言適配，分別為大（l）、常規（lg）、小（s）。從下圖可以看出區別較大的是泰語和阿拉伯語的字型高度相差較大，可利用相對合理的行高尺寸進行匹配，比如泰語字型較高可使用大（l）尺寸作為文本行高，阿拉伯語字型較低可使用小（s）尺寸作為文本行高。
設計師在設計界面時經常遇到文本與組件的組合排版方式，但是其中會有比較多的“坑”，設計師們很容易不小心就陷入“坑”中。舉個例子，比如設計師們會為了更加美觀會把組件插入一段文本中間中進行混合排版，這種組合方式有幾個比較大弊端。第一不同語種有不同語法順序，比如法語形容詞的后置，日語里動詞的后置。第二復數問題，在英語里面，每個名詞都有一個單數形式和一個復數形式，比如One picture復數是Two pictures。但在俄語里面，復數有三種可能的形式。在法語里面，有不少單詞變成復數之后拼寫也會改變。所以，如果用戶要在句子中間輸入數字這種設計就可能造成語法錯誤。第三有些語言里面，單詞是區分陰陽性的。比如在法語里面，形容詞也是有陰陽性形式的。所以如果你在句子中間插入一個下拉菜單框，那么可能又會造成語法錯誤。
產品國際化題材比較大涉及到的內容也會比較廣，可能需要考慮的不僅限于文本適配，還需要考慮很多的因素比如說各國的文化差異、本地格式、地區標準等等，所以今天主要站在文字適配的角度給大家分享幾個做國際時需要關注的小點。
本篇文章主要是網頁中文字系統初識，網頁中的文字雖然看起來比較簡單但是每個內容板塊拆分開都是值得深挖的。比如說文字結構、如何結合印刷理論應用到網頁排版中、解刨多語言適配等等吧。本片文章還是秉著啟發的態度與大家進行網頁文字系統的探索，希望大家能夠可根據此篇文章結合工作中實際案例舉一反三，更深入地探索相關內容。在這里再次強調一下產品國際化方面內容，互聯網信息的快速交流與傳播使得人與人的連接越來越容易，很多產品進入海外市場是必經之路，大家可提前做好相關知識儲備，還是那句話也希望自己后續可以多歸納總結與大家展開探討分享。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
這里的圖片選擇要突出核心內容且一定要高質量，不要選擇雜亂無章或與主題無關的低質量圖片
結合頁面表達需要，選擇合適的配圖并做融合或出界的設計，會讓畫面極具吸引力和強烈的設計感。
當畫面主要以高質量圖片吸引用戶注意時，盡可能的利用更大展示面積，這樣會顯得更加高級和有視覺沖擊力。
這里的色塊要注意跟圖片的主色調保持相近，可以直接吸圖片上的顏色然后找找鄰近色就好了，色環上 30°區間內的顏色就比較和諧。
這里的形狀建議不要太過于復雜，用一些基本圖形就可以，比如圓點、方塊矩形之類的，增強畫面的形式感
這里的文字、圖案或不規則形狀跟上面的技巧類似，都是起到裝飾的作用，但文字的話有時候還要注意識別性，比如文字比較緊湊的時候。圖案或形狀更多的是起到視覺引導的作用。
這個很好理解，就是以文字或形狀作為遮罩，增加畫面的設計感，文字盡量選擇粗體
這個技巧可能跟第 3 條有些沖突，其實這 2 個方法都是可以的，要根據頁面具體的排版情況靈活使用。
這個技巧也比較容易理解，一般會選擇飽和度較高的顏色應用在充滿活力的頁面上，增加畫面的沖擊力。
這個技巧跟上面的有些類似，只不過是以小面積疊加的形式，顏色一般選擇品牌色或主題色，與背景盡量有較大反差會更加容易出彩。
這個方法有一點需要注意的就是剪切的形狀不要過于復雜，一般用基礎圖形就好
以上，就是我總結的一些可以用來操作 UI 圖片的實用方法，這些方法可以使得作品變得更加有視覺感也更加專業。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一、前言
隨著互聯網的快速發展，B端行業也逐漸崛起，很多企業管理中使用的軟件我們通常稱其為B端管理系統，而在B端系統中“權限管理”是必不可少的功能，不同的系統中權限的應用復雜程度不一樣，都是根據實際產品以及需求情況而設置合理的權限。而我們現在對于權限的設置基本上都是建立在RBAC權限模型上的、擴展的，下面我會通過介紹RBAC權限模型的概念以及結合實際業務情況列舉權限設置的應用。
二、什么是RBAC權限模型？
RBAC是Role-BasedAccess Control的英文縮寫，意思是基于角色的訪問控制。RBAC認為權限授權實際上是Who、What、How的問題。在RBAC模型中，who、what、how構成了訪問權限三元組，也就是“Who對What進行How的操作，也就是“主體”對“客體”的操作。其中who是權限的擁有者或主體（例如：User、Role），what是資源或對象（Resource、Class)。
簡單的理解其理念就是將“角色”這個概念賦予用戶，在系統中用戶與權限之間通過角色進行關聯，以這樣的方法來實現靈活配置。
RBAC其實是一種分析模型，主要分為：基本模型RBAC0、角色分層模型RBAC1、角色限制模型RBAC2和統一模型RBAC3。
RBAC權限模型是基于角色的權限控制。模型中有幾個關鍵的術語：
用戶：系統接口及訪問的操作者
權限：能夠訪問某接口或者做某操作的授權資格
角色：具有一類相同操作權限的用戶的總稱
RBAC0是RBAC權限模型的核心思想，RBAC1、RBAC2、RBAC3都是在RBAC0上進行擴展的。RBAC0是由四部分構成：用戶、角色、會話、許可。用戶和角色的含義很簡單，通過字面意思即可明白，會話：指用戶被賦予角色的過程，稱之為會話或者是說激活角色；許可： 就是角色擁有的權限（操作和和被控制的對象），簡單的說就是用戶可使用的功能或者可查看的數據。
用戶與角色是多對多的關系，用戶與會話是一對一的關系，會話與角色是一對多的關系，角色與許可是多對多的關系。
RBAC1是在RBAC0權限模型的基礎上，在角色中加入了繼承的概念，添加了繼承發的概念后，角色就有了上下級或者等級關系。
舉例：集團權責清單下包含的角色有：系統管理員、總部權責管理員、區域權責管理員、普通用戶，當管理方式向下兼容時，就可以采用RBAC1的繼承關系來實現權限的設置。上層角色擁有下層的所有角色的權限，且上層角色可擁有額外的權限
RBAC2是在RBAC0權限模型的基礎上，在用戶和角色以及會話和角色之間分別加入了約束的概念（職責分離），職責分離指的是同一個人不能擁有兩種特定的權限（例如財務部的納入和支出，或者運動員和裁判員等等）。
用戶和角色的約束有以下幾種形式:
互斥角色：同一個用戶在兩個互斥角色中只能選擇一個（也會存在一個用戶擁有多個角色情況，但是需要通過切換用戶角色來實現對不同業務操作）
基數約束：一個用戶擁有的角色是有限的，一個角色擁有的許可也是有限的
先決條件約束：用戶想要獲得高級角色，首先必須擁有低級角色
會話和角色之間的約束，可以動態的約束用戶擁有的角色，例如一個用戶可以擁有兩個角色，但是運行時只能激活一個角色。
例如：iconfont和藍湖的用戶與角色就采用了約束的概念，超級管理員只允許只有一個
RBAC3是RBAC1與RBAC2的合集，所以RBAC3包含繼承和約束。
二、為什么要引用RBAC權限模型？
RBAC中具有角色的概念，如果沒有角色這個概念，那么在系統中，每個用戶都需要單獨設置權限，而系統中所涉及到的功能權限和數據權限都非常多，每個用戶都單獨設置權限對于維護權限的管理員來說無疑是一件繁瑣且工作量巨大的任務。
而引入角色這個概念后，我們只需要給系統設置不同的角色，給角色賦予權限，再將用戶與角色關聯，這樣用戶所關聯的角色就直接擁有了該角色下的所有權限。
例如：用戶1~用戶8分別擁有以下權限，，不同用戶具有相同權限的我用不同的顏色做了區分，如下圖：
在沒有引入RBAC權限模型的情況下，用戶與權限的關系圖可采用下圖的楊叔叔展示，每個用戶分別設置對應的權限，即便是具有相同權限的用戶也需要多次設置權限。
引入RBAC權限模型及引入了角色的概念，根據上面表格的統計，用戶1、用戶3、用戶5、用戶8擁有的權限相同，用戶2、用戶6、用戶7擁有相同的權限，用戶4是獨立的權限，所以我們這里可以根據數據統計，以及實際的需求情況，可以建立三個不同的角色，角色A、角色B、角色C，三個角色分別對應三組用戶不同的權限，如下圖所示：
對應的上面的案例表格我們就可以調整為含有角色列的數據表，這樣便可以清楚的知道每個用戶所對應的角色及權限。
通過引用RBAC權限模型后，對于系統中大量的用戶的權限設置可以更好的建立管理，角色的引入讓具有相同權限的用戶可以統一關聯到相同的的角色中，這樣只需要在系統中設置一次角色的權限，后續的用戶便可以直接關聯這些角色，這樣就省去了重復設置權限的過程，對于大型平臺的應用上，用戶的數量成千上萬，這樣就可避免在設置權限這項工作上浪費大量的時間。
三、引入用戶組的概念
我們依舊拿上面表格案例舉例，雖然前面我們應用的RBAC權限模型的概念，但是對于大量用戶擁有相同權限的用戶，我們同樣的也需要對每個用戶設置對應的角色，如果一個部門上萬人，那么我們就需要給這個部門上萬人分別設置角色，而這上萬其實是具有相同的權限的，如果直接采用基礎的RBAC權限模型的話，那么面對這樣的情況，無疑也是具有一個龐大的重復的工作量，并且也不利于后期用戶變更的維護管理，那么針對相同用戶具有相同的權限的情況，我們便可以引入用戶組的概念。
什么是用戶組呢？用戶組：把具有相同角色的用戶進行分類。
上面我們的數據表格案例中的用戶1、用戶3、用戶5、用戶8具有相同的角色A，用戶2、用戶6、用戶7也擁有相同的角色B，那么我們就可以將這些具有相同角色的用戶建立用戶組的關系，拿上面的案例，我們分別對相同角色的用戶建立組關系，如下：
用戶1、用戶3、用戶5、用戶8→建立用戶組1
用戶2、用戶6、用戶7→建立用戶組2
因為用戶4只有一個用戶，所以直接還是單獨建立用戶與角色的關系，不需要建立用戶組，當然盡管只有一個用戶也是可以建立用戶組的關系，這樣有利于后期其他用戶與用于4具有相同的角色時，就可以直接將其他用戶添加到這個用戶組下即可，根據業務的實際情況而選擇適合的方案即可。
通過案例表格的變化我們就可以直觀的看出權限設置變得清晰簡潔了，通過第用戶組賦予角色，可以減少大量的重復的工作，我們常見的企業組織、部門下經常會出現不同用戶具有相同角色的情況，所以采用用戶組的方式，便可以很好的解決這個問題，給具有相同權限的用戶建立用戶組，將用戶組關聯到對應的角色下，此用戶組就擁有了此角色下的所有權限，而用戶是屬于用戶組的，所以用戶組下的所有用戶也就同樣的擁有了此角色下的所有權限。一個用戶可以屬于多個用戶組，一個用戶組也可以包括多個用戶，所以用戶與用戶組是多對多的關系。
四、引入權限組的概念
權限組與用戶組的原理差不多，是將一些相對固定的功能或者權限建立組的關系，然后再給此權限組賦予角色，目前我所接觸的B端項目中使用權限組的概念的比較少，可簡單的看一下關系圖
四、功能權限和數據權限
B端系統中一般產品的權限由頁面、操作和數據構成。頁面與操作相互關聯，必須擁有頁面權限，才能分配該頁面下對應的操作權限，數據可被增刪改查。所以將權限管理分為功能權限管理和數據權限管理。
功能權限管理：指的是用戶可看到那些模塊，能操作那些按鈕，因為企業中的用戶擁有不同的角色，擁有的職責也是不同的。
數據權限管理：指的是用戶可看到哪些模塊的哪些數據。
例如：一個系統中包含多個權責清單（清單1、清單2、清單3），系統管理員能對整個系統操作維護，也就可以對系統中的所有清單都能操作（增、刪、改、查）；假如分配給總部權責管理員的是清單1，那么他將只能對清單1進行操作（增、改、查）；普通用戶也許只有查看數據的權限，沒有數據維操作的權限（查）,這里的操作是系統中所有可點擊的按鈕權限操作，列舉的增刪改查只是最常見的幾種操作而已。
五、實戰案例總結
我目前所做的項目是一個關于權責管理平臺的B端系統，關于系統中的權限需求我這里簡單的介紹一下，并采用上面所總結的RBAC權限模型對實際業務需求進行設計分析：
01：不同的區域管理員的權限各不相同（說明會存在不同的用戶具有不同的權限，那么我們就可以采用角色對其進行規范）
02：有大量的用戶具有相同的權限（例如組織、部門等）（說明存在相同權限的用戶，那么我們就可以采用用戶組的概念）
03：上級管理員擁有下級人員的所有權限（說明存在繼承關系）
04：不同用戶所看到的數據和能編輯的數據不同，一些機密性的數據只允許部分人員看或者編輯（說明存在約束）
05：會存在臨時性的用戶（說明需要支持新建新角色）
06：同一用戶會存在多個角色（多角色求合集或者切換用戶角色）
簡單說明一下，我所做這個項目的人員管理是在另外一個系統中管理的，權責平臺只是調用另外一個平臺的組織結構樹即可，所以權限設置模塊沒有做人員管理的模塊
根據上面對需求的分析，整個權限管理模塊中我們需要建立用戶組管理模塊、功能角色管理模塊、業務（數據）管理模塊、權限設置模塊，下面就對每個模塊做更細致的頁面展示設計分析
用戶組管理主要是對具有相同權限的用戶分類建組，所以頁面中我們需要有新建用戶組的功能，每個用戶組下我們需要關聯對應的組織、部門、崗位、人員，讓這些具有相同權限的用戶在同一個用戶組下，如下圖：
B端項目中一般會建立幾個默認的角色是不支持用戶修改、刪除的，例如最常見的系統管理員，而也會需要有其它角色的需求，所以此模塊需要支持用戶新建角色，功能角色是對大模塊的頁面和操作的權限設置，操作權限的顆粒度可以細分到每個頁面的每一個按鈕的操作，如下圖：
業務角色是對頁面中的數據餓查看的權限設置，而對于系統中的普通用戶查看系統的權限是常用不變的，所以我們考慮默認有一個普通用戶的角色，其它業務角色用戶根據實際需求情況自行建立即可，由于我們權責系統的特殊性，我們需要滿足用戶對部分數據可編輯且對部分數據的字段可編輯，按照常理來說，編輯的操作行為是屬于功能權限的設置，但是這里的操作行為是建立在數據的基礎之上的，所以如果把這里對數據的操作權限在功能角色模塊中設置，就會顯得混亂，所以我們直接在業務角色模塊中加入對數據的可編輯權限，這里在設置的時候更方便靈活
權限設置模塊只需要設置權限分配的對象，選擇對應的用戶或者用戶組，關聯對應的功能角色和業務（數據）角色即可，這樣就形成了一條完整的閉環的權限設置
對于06同一用戶會存在多個角色，我們系統是采用切換角色的模式來實現的，因為不同角色中存在互斥的情況，以及所涉及的領域不同，操作權限差距較大，求合集不利于控制權限，所以只能采用切換的模式實現
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
是收納消息數量的樣式，一般出現在圖標或者頭像右上角。
數據展示里面抽取出來的共性特征，將它們轉化為標簽。標簽樣式有線框、帶不透明底或者面性。
相當于c端的輪播圖
可以出現在鼠標懸浮按鈕時候的行為解釋說明，也可以是文案或者導航圖標的解釋說明。鼠標移入時候出現移出時候消失。
比起文字提示可以承載更多內容，相對彈窗，氣泡卡片操作更輕盈。
標簽頁可以幫助用戶在一個頁面內快速切換不同類型內容，提升單個頁面整體的擴展性。標簽本質上就是內容區的導航。
折疊面板可以更好的收納內容區域，提高頁面利用率?？梢院捅砀窠Y合使用，折疊表格部分詳情內容，使得縱向空間更節約。
表格是數據展示的重要內容。當有大量結構化數據需要展示時或者需要對數據進行排序、搜索分頁時可以用表格進行展現。
當筆記本過小，表格展示不全時候，可以固定首尾重要信息進行滾動。
帶排序的表頭，可對數量或者金額進行排序。
帶分組的表格，建議帶邊框并且用色塊區分表頭和內容。
單元格可編輯
批量選中時只會選中當前頁，因為分頁還沒加載出來，為了給用戶正確的引導，可以給上提示性文案，例如“已選中XX項內容”。
如果當前頁批量選中的數據量不滿足要求，可以改變分頁器，增加當前頁數據量，從而增加選項。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
雖然說 2021 已經快到 10 月份，但我最近我還是花了點時間，搜羅全網設計，總結出了這 7 種出鏡率最高的版式風格，也是今年最流行的設計表現形式之一。
看完這一波網頁 UI 類設計，再也不愁接下來該如何做設計創新了。
這是今年出鏡率比較多的一種設計風格，不管你是在 Dribbble 還是 Behance 上都能見到它的影子。這種風格設計最大特點：形式感、聚焦、簡約而不簡單。
當然還可以是將線圈與文字疊加圖片，有一種層疊縱深布局感受。
又或者說圖形只是作為裝飾作用。
純文字版式在今年版式中出鏡率也是相當之高，包括深圳設計周官網也幾乎都是幾個大字排版。其實我們仔細思考，將文字放大處理，有點圖形化的意思。
上圖是典型的文字圖形化，將文字轉化成線性設計。
圖文混合設計風格大膽、新穎，讓人眼前一亮。這種版式布局一般會出現在設計工作室網站居多一些，追求形式感與觀賞性。
圖文混合設計，不光只是圖片與文字混合排版，還可以是圖標與文字、粗字體與細字體之間的混合穿插。
圓形設計趨勢一直都存在，在網頁設計中出鏡率高也是毋庸置疑的事情。畢竟圓形本身自帶超強親和力、聚焦。設計用它可以解決很多枯燥的版式，讓畫面瞬間活了起來。
還可以將文字處理成圓形，與圓形圖相呼應。
文字輪廓化版式今年出鏡率尤其之高，將文字輪廓化設計處理，減輕了文字的視覺重量感，更像是將文字線條化設計處理。
文字輪廓化設計還可以用在背景，作為設計裝飾效果。
玻璃質感設計趨勢，也是今年最火的設計風格之一。那么它在網頁出鏡率也是在下半年開始逐漸多了起來，也許是設計師發現這種質感細膩與折射光透露出的細節之美。
線無疑是圖形里面運用較多的，今年發現很多網頁中都加了線條作為版式裝飾，或者就是純線條版式設計，讓人眼前一亮，原來還可以這樣玩。
線條在這里作用明顯，除了美學設計裝飾之外，它還用作信息層級區分。
好了，差不多到這里就結束了。7 種風格，希望能給大家帶來一些新鮮的設計想法，在工作中將其運用進去。
當然，在做設計提案版式、作品集包裝都是可以參考，希望大家不要被局限。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
桌面和大屏幕上導航欄要怎么設計其實是一個經常被拿來探討的問題，如今這也是 B 端設計中繞不開的一個設計問題。Jennifer Rose Kingsburg 曾經有針對網頁的三級菜單導航進行過一份研究，結論是在左側設置導航好處多多。此外還有很多類似的研究，你可以在這里看到很多相關研究的摘要。值得注意的是，這些研究大都是 2017年之前的研究成果，而如今很多設計范式發生了變化。
Eyetrac?荷蘭國際集團的研究表明，用戶習慣于使用 F 式的瀏覽路徑，這使得左側導航在一般情況下有著相對更強的可用性，它不需要用戶視線上的查找，因為用戶會下意識注意到它們的存在。
如果我們經常使用筆記本電腦來瀏覽頁面，會很容易注意到不同的導航模塊對于頁面空間的占用比例，左側導航所占用的頁面控件通常是同樣內容量的頂部導航的占用空間的3倍，因為縱向的側邊欄導航需要考慮到橫向的標題占用空間，再加上搜索等功能模塊的加入，這種空間占用就成了不可避免的結果。即使左側的菜單欄可以折疊，這種處理方法也不總是有效的，因為這可能會隱藏相關條目的標簽信息，降低了導航的可用性。
也正是左側導航本身的排版邏輯，它通?？梢燥@示比頂部導航多一倍的條目內容，如果你的信息架構本身涉及到的一級菜單條目較多的時候，采用左側邊欄導航是明顯更合理的選擇，而且這種導航非常適合隨著時間推移逐漸增加條目的需求。
側邊導航本身雖然占用的空間更大，但是它也有著更多的空間根據需求來定制各種不同的需求，相比于頂部導航，側邊導航甚至可以直接將分層的二級菜單直接展現出來，就像 Outlook 的側邊欄和 Slack 的側邊欄導航。
你會注意到 macOS 和 Windows 操作系統當中，系統默認的用戶界面大都采用了靈活的側邊欄導航設計，很多 web 應用也是如此，它們會將頂部空間留給系統默認的菜單模塊。采用側邊欄導航的 UI 界面可以和操作系統的邏輯保持一致。
懸停激活抽屜式下拉菜單的設計在頂部導航當中是非常自然的，但是在側邊欄導航當中，這種設計可能會在一定程度上遮擋住下級菜單，如果使用在旁邊展開的方式，可能會占用大量的空間，總而言之，它更貼合頂部導航的交互模式。
頂部導航正是因為和懸停出發下級菜單的功能很搭，所以很多電商和大型網站上會使用它來呈現條目眾多的超級菜單。它是用來一次容納超多條目的下級菜單的有效方式，這種布局也為產品展示和廣告留出了足夠多的空間。
如果一種導航模式看起來不夠好用，那么是否要借助重設計的機會，切換到另外一種模式呢？根據 Jira 的用戶測試，95% 的早期用戶對于這種情況會感到非常迷惑，即使是再小的導航功能修改都可能直接影響到大量用戶的日常使用，因此不管哪種導航模式，一旦選定，盡量不要改變。
對于沒有太多條目的頂部導航，在移動端上依然可以直接在頂部呈現，不過如果太多了就需要使用漢堡菜單來承載，或者切換為垂直的側邊欄導航。而側邊欄導航在移動端上相對好一點，因為導航模式本身是一致的，但是有限的空間內如何呈現大量的導航條目同樣存在挑戰。
頂部導航：占用空間小，在頁面的位置最為顯著，涉及條目不多的時候效果非常好。對于層次結構簡單的中小型網站，頂部導航還是很好用的，對于層級較少但是二級條目特別多的超級導航，頂部導航也是不二選擇。
側邊導航：側邊導航支持一級條目較多且層級較多的導航需求，擴展性良好，對于復雜的產品和自定義需求較多的產品、涉及到管理功能、 桌面級產品、 都適合使用側邊導航。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
關鍵詞：搜索框，UI，UX交互，用戶體驗，響應式設計，網頁
題外話Tips: 在寫Amazon案例時，看到了歪果仁對國貨馬應龍的評論，簡直太歡樂（以前看過人家翻譯的帖子，但自己看一遍還是太搞笑了）。于是就寫跑偏了，翻譯了下貼了上來。隨便樂樂~ （CTRL+F頁內搜索可直達）
目錄：（CTRL+F頁內搜索可直達）
第一章 搜索框-默認狀態
一、 位置
二、 寬度（包含響應式設計）
三、 按鈕樣式
四、 展開 or 隱藏？
五、 默認要有提示文字?。?
六、 推薦詞
七、 有很多分類怎么辦？
八、 一個頁面里有2個搜索框怎么處理？
第二章 搜索框-光標觸發的狀態
一、下拉框中，歷史記錄+熱搜詞是標配
二、下拉框中，標配+額外內容
三、下拉框中，純個性化內容
第三章 搜索框-搜索中的狀態
一、 默認交互
二、 個性化交互
三、 搜索下拉框中的多選功能
四、 回車 or 不回車？
正文：
以下都是從Web端角度寫的總結，Web的空間比APP大，相對來說，交互可發揮的余地更大。APP端如果有時間，就另外再寫吧。
搜索框簡單吧，也就輸入框+按鈕。但是就那么點小元素，里面也是注滿了無數的小心思，死光了無數產品經理/交互設計師的腦細胞，只是為了讓交互更流暢，產品體驗更好。
搜索框的默認UI/UX樣式，取決于網站的業務性質，取決于搜索功能的重要性，取決于頁面布局。
一、位置
搜索框的位置放在哪里，取決于搜索功能對于網站的重要性。
N年前，就有很多小伙伴引用過如下研究報告了，我重復下吧。
Dawn Shikh 與 Keisi Lenz 的研究：展示了在142個參與者的調查中，網站搜索框的期望位置。研究發現，對用戶來說最方便使用的地方是網站的左上角與右上角位置。用戶可以使用常見的F形掃描模式輕松找到它。
如圖，搜索框要放置在網站的右上角或者中間位置，這是用戶所期望的位置。
目前大部分網站在UI布局搜索框時，也是大致遵循這個規則的。但總體來說，搜索框的位置，還是可以分為如下幾種：
1. 頁面-居中
2. 頁面-頂部居中
3. 頁面-頂部右邊
4. 其他
那么，分別討論：
1. 頁面-居中
為啥居中？當然因為對于網站，搜索是核心功能。如果沒有搜索功能的話，業務幾乎無法開展。它最最最重要啦！
1）絕對居中
這種一般適用于搜索引擎的首頁。頁面基本就是一屏，搜索是最主要功能，其他內容不重要。
比如Google, 百度。
Google的界面就相當干凈清爽。嘿，我就是純搜索的，趕緊搜唄！
百度，可以只顯示一個搜索框。
如圖所示的搜索框下的大塊資訊，是可以在設置中隱藏的，不想看，關掉就好。
2）相對居中，垂直略靠上部。
適用于數據庫網站的首頁。
因為數據庫的數據量動不動就是千萬、上億的，搜索是極其重要的功能，99%的用戶都是帶著目的來的，直接通過搜索找數據的。搜索框需要極其醒目，需要占據首屏大部分的位置。
但考慮到數據庫網站的首頁也需要展示其他信息，來增加用戶粘性，一般會有好幾屏，比如最新信息，熱點信息之類的。這些就放在搜索框大區塊的下方了。
比如 官方司法權威網站-中國裁判文書網，全國的1億多個案件都在這個數據庫里，供免費查閱。搜索數據是核心功能，因此搜索框最醒目，占首屏大部分位置。其他信息依次往下布局展示。
2. 頁面-頂部居中
為啥頂部居中？因為網站業務中，搜索是重要功能，但不是全部。不用夸大顯示，但頂部的居中好位置要留給它。
一般適用于電商平臺，資訊平臺。
這些網站中，展示商品、廣告、信息才是重點，是為了促成交易，增加流量的。搜索是工具，比較重要，但不是重點，只是為了達成目的的一個手段。因此可以放在頁面頂部且居中的顯眼好位置，重要，但是不過分夸張。
用戶場景：
如果用戶是漫無目的的瞎逛，可以隨便瀏覽頁面中提供的大量信息。
如果用戶是有目的的找某個商品或信息，也能很容易的在頁面頂部找到搜索框，定位目標。
比如，電商平臺-京東
比如，視頻平臺-Youtube
看到了嗎？頂部中間，不太顯眼的那個灰色搜索框。
3. 頁面-頂部右邊
為啥頂部右邊？因為網站業務中，搜索只是輔助功能，居中這么好個位置沒必要，放右邊看得見就行了。
比如， Dribbble
Dribbble，設計師都知道。一般大家都是去隨便看看找靈感的，瀏覽信息是重點，搜索功能不太重要，放邊上就行了。
比如，小米
提問：有同學會問，嗯哼，這是電商網站呀，要賣產品呀。為什么不像淘寶京東一樣放頂部居中呀？
回答：因為，這是品牌自己的平臺呀，就那么幾個品類，在頂部導航條內，側邊導航條內都已經展示得清清楚楚了，鼠標點點就行了。搜索是次要的功能。
根據設計原則——奧卡姆剃刀原理（簡單有效原理）
* 只放置必要的東西
* 給予更少的選項
頂部的品類導航條本身就能幫用戶找到產品了，可以直達分類頁面，是非常重要的入口，也是重要的產品宣傳，需要放在頂部首行的位置。
搜索是輔助功能（此處相信小米的PM是分析過search usage的），放在次要位置就可以了。
不需要同時突出搜索框+品類導航條，來增加用戶的選擇成本。
另外，要是搜索框居中了，那展示品類的重要導航條就得布局在第二行。Web/APP的第一屏都是黃金位置，能省一行是一行。
4. 其他
1）可以放logo的右邊。
比如google的搜索結果頁
從設計理念上說，google的搜索框和logo放在一起，也能組成品牌和搜索引擎之間的強關系。即google=search. 用戶們不也早就說，“你google一下”，而不是“你搜索一下了”嘛!
從UI上說，搜索引擎的內頁一般只有列表，這樣搜索框也能和列表左對齊，布局清晰。
2）其他位置，根據情況判斷。
比如Figma界面，文章最后有圖。此處不贅述。
二、寬度
搜索框的寬度（包括input box + search button），同樣取決于搜索功能的重要性。其中，大概率取決于上文所述的搜索框的位置。
其次，也需要考慮輸入的關鍵字的字符數。
另外，根據整體布局決定。
一般情況下，220px<寬度<650px。 請注意, 這是建議的相對值，不是絕對值。只表示搜索框在大部分Web中的情況，具體需根據自己的頁面情況調整。實際應用中，也有搜索框最長到1000px的情況。也有比220px更短的。
根據搜索框在頁面中的不同位置，搜索框寬度分別如下：
1. 如果搜索框位置在頁面居中，那搜索功能也極其重要，那當然寬一點。
比如上文提到的google，百度。搜索框寬度通常固定在650px以內，保證在所有分辨率中都能顯示全。也保證了可顯示的關鍵字字符數大于60個（即60個字母，30個中文字），大大的足夠了。
2. 如果搜索框位置在頂部居右，那搜索就是輔助功能，那當然短一點。
具體寬度，需要考慮頂部UI布局情況。但一般不小于220px（大概數值，自己平衡）. 不然就不太方便輸入關鍵字了，或者關鍵字就顯示不了幾個了。
3. 那如果搜索框位置在在頂部居中呢？則可長可短，根據業務情況和頁面布局判斷。
如果為了用戶體驗好的話，搜索框寬度也需要考慮「響應式設計Responsive Design」。
既然都說到 「響應式設計」了，那么就提一下吧。
概念：
響應式設計（Responsive Design）是頁面布局可以「響應」不同尺寸屏幕的設計方法。通常我們說起響應式設計都是針對網頁設計的。同一個頁面，隨著屏幕尺寸的改變，自適應地改變頁面布局。
通俗來說，這個網頁就可以自動適應手機，平板，和電腦的各個分辨率。用戶在各個設備上瀏覽這個web頁時，頁面布局和交互都是自動調節的，相當舒適。
以頁面中的單個功能區為例：
* 比如，內容區塊的在一定程度上能夠自動調整，以確保填滿整個頁面。
* 比如，網格排布，能夠減少/增加排布的列數。如圖片布局在“1行1列” 到“1行N列” 之間，自動調整列數。
* 比如，能夠適應比例變化的圖片。圖片自動調整大小。
* 比如，篩選功能在網頁里是在頁面左側一列，全部展開顯示的，在手機里就可以隱藏顯示，通過按鈕點擊，有滑出菜單之類的。
Tips: 做響應式設計，需要公司舍得投入資源，因為涉及到很多額外的工作量。最起碼有以下：
* Designer | 設計——做3套設計。
* Frontend Engineer | 前端——寫響應式設計的代碼，可寫1套，可寫3套（方便維護）。
* QA Engineer | 測試——測不同的分辨率，最起碼測3套。這還沒算fix bug后的retest.
為啥3套？因為針對分辨率需要做2個節點。我司一般是792px<X<1440px
好了，響應式設計就大概講一下吧。不然又能寫好幾頁。收~
以Youtube為例，大家可以感受下搜索框的響應式設計。
搜索框的寬度是會自動調節的。最小的時候就一個放大鏡圖標（此時為適應手機分辨率），但最寬也就是固定到640px，不然太寬了，輸入關鍵詞時，搜索按鈕離得太遠，點擊也會很不方便。
三、 按鈕樣式
搜索框的按鈕樣式，同樣取決于搜索功能的重要性。也需要平衡整體頁面布局。
按鈕樣式大致情況，如下圖所示：
* 色塊帶圖標的
* 只有一個圖標的
* 沒有按鈕的
* 色塊帶圖標+文字的。
* 其他（比如就一個放大鏡圖標等。圖片中沒做展示）
具體怎么應用，詳見后文：
四、 正常顯示 or 簡化顯示？
九、 一個頁面里有2個搜索框怎么處理？
四、正常顯示 or 簡化顯示？
有些Web中的搜索框，因為各種原因，可能就會做簡化。而不是整個顯示，這個需要根據情況決定，就是——隨機應變~
比如，Apple官網，只顯示一個放大鏡圖標。
此處跟上文提到的小米官網的情況類似。商品品類就這些，導航條突出品類，搜索功能弱化。
但蘋果在此處更弱化了搜索，只放一個放大鏡圖標。（從UI上看，目測是由于導航條中品類太多，放不下搜索框了。） 等用戶點擊了放大鏡圖標后，才使用CSS / JS特效，滑動顯示完整的搜索框，且居中顯示。
再比如，Airbnb 愛彼迎，全球民宿短租公寓預訂平臺。
網站中，搜索功能很重要，是用戶預定，增加銷售的入口。因此需要突出搜索框。
* 首頁，默認顯示完整的搜索框。
* 當頁面滾動時，搜索框置頂顯示，方便用戶查詢和預定，增加潛在銷售可能。但是這個搜索框的內容太多，硬要在置頂層中全部顯示的話，這個始終置頂的層的高度就會很高，會影響用戶瀏覽頁面內容。
那么就把搜索框略微簡化，相應的高度也就小了。（不建議只放一個放大鏡按鈕，太弱化搜索功能了。會流失潛在客戶，流失潛在銷售可能）
* 搜索框在置頂層中居中顯示，點擊簡化版搜索框后，才動效顯示完整的搜索框。
五、默認要顯示提示文字啊！
在輸入框中可以提示搜索示例，告知網站支持哪些內容的搜索，以及如何使用功能。防止用戶一臉懵，優化用戶體驗。
通常適用于數據庫，資訊類這些內容類型較多的網站。
比如，天眼查。（垂直頂部居中的搜索框）
比如，網易云音樂。 （右上角搜索框）
六、推薦詞
基于業務需要，搜索框內經常會有推薦詞，方便用戶不用輸入關鍵詞就可以直達結果。同時，也是一種對商品的促銷，對資訊的推廣。根據不同需要，可以有不同的顯示方式。
Tips: 推薦詞，熱搜詞，促銷，廣告都可以這么處理。
1. 框內
1）單個推薦詞交替顯示
比如，小米官網
截圖為動態圖哦，大概5秒換一個推薦詞。個人覺得間隔時間有點長了。
2）多個推薦詞同時顯示
比如，LexisNexis 全球頂級法律數據庫 中國站
沒有和小米一樣，做1個推薦詞的動態交替顯示，是因為用戶場景不同。
考慮到LexisNexis的用戶都是律師群體，工作中時間寶貴。使用網站不是閑逛，而是為了快速查詢數據，沒有時間等待。因此一次性顯示2-3個推薦詞，方便用戶直接看到，直接點擊。
提示：推薦詞可能會大于3個的，比如有8個。那就在用戶每次回到首頁后，顯示一批新的推薦詞。
或者，直接顯示在框外，如下文所述。
2. 框外
比如，淘寶
七、有很多分類怎么辦？
如果要針對很多內容類型分別搜索怎么辦呢？搜索框怎么處理呢？有很多方法。
按復雜程度，依次進階如下：
1. 下拉框型
一般用下拉框了，那通常分類對于搜索不是太重要，不用突出顯示。
2.Tab型
如果用tab來展示分類了，那目的通常是：
* 推廣產品或內容
* 引導用戶，優化用戶體驗
1）橫版顯示。比如 某房產網站
2）豎版顯示。比如 知網
搜索框的左側的3個Tab為內容類型分類。
搜索框中展開的下拉框中是字段，此處一并展示。
3）豎版+橫板顯示。比如 某房產網站
如上圖，是豎版分類+橫版的兩個搜索按鈕。
如上圖，是豎版的分類+橫版的分類。橫版的分類還做了2級分類。分類太多，相信設計師們在處理時也挺頭大。
八、 一個頁面里有2個搜索框怎么處理？
回答：哪個重要，就突出顯示哪個唄！
以Amazon為例，
該頁為商品評論頁面。
* 頂部搜索框為全站搜索，非常重要。因此寬度較長，按鈕為亞馬遜的主色調黃色，醒目。
* 頁面內的搜索框，為針對評論內容的搜索，則相對弱化。
搜索框的默認狀態講完了。那么當鼠標點擊搜索框，此時還沒有輸入任何內容，那么光標觸發的狀態是怎樣的呢？通常，根據業務情況，大多數搜索框都會自動彈出下拉框。
我們此處只討論下拉框中的顯示情況。
一、下拉框中，歷史記錄+熱搜詞是大部分網站的標配。
比如，B站。
二、 下拉框中，在歷史記錄+熱搜詞的基礎上，再添加些網站自己想推廣的內容。
比如，Zcool本酷。
三、下拉框中，根據網站自身業務情況，顯示個性化內容。
1. 比如 Zillow, 美國知名房產估價網
網站業務就是估房價。下拉框中，第一行就是“當前位置”，點擊后跳轉到結果頁，顯示定位地址的相關結果。優化用戶體驗。
2. 比如，攜程。
攜程的業務結構相對復雜，搜索也就相對復雜。搜索項同時也涉及到很多字段/參數，其實也類似表單了。后面有機會可以講下表單的交互，此處不延伸討論了。大家有興趣可以去逛逛攜程。
在搜索框中，一旦開始輸入字符，那新一輪的交互又開始了。
一、 默認交互
目前通用的規則——搜索聯想功能，Google已經定義好了。我就不重復寫了，如下摘自UXPlanet：
Google自2008年以來掌握并實施了“搜索聯想”。
“搜索聯想”（自動建議）可以幫助用戶通過已輸入的文本來預測可以找到的查詢結果，為用戶節省了時間并創造了更加便捷的體驗。
交互細節如下：
* 確保搜索聯想是有效的，設計不完善的搜索聯想會混淆和分散用戶的注意力，所以使用拼寫自動更正、詞根識別、語義識別和預測，可以改進搜索體驗。
（Lu傾傾 注：中文搜索還要識別拼音）
* 盡可能快速的提供搜索聯想，例如輸入到第三個字的時候，就給用戶提供相匹配的聯想詞匯，以此減少用戶數據錄入的工作。
（Lu傾傾 注：現在其實輸入第1個字就可以提供聯想了。）
* 只提供少于10個項目的聯想詞句（不建議使用滾動條），否則信息將會變得難以承受。
* 允許用戶通過鍵盤的上下鍵控制選擇列表。
（Lu傾傾 注：
百度在使用“鍵盤”（鼠標不行）上下選擇列表時，如果高亮在某個聯想詞上停頓2秒以上，則等同于“回車鍵”，整個頁面的搜索結果刷新。 Google不支持此功能。
這是用戶體驗的差異）
* UI上，已輸入文本和建議文本視覺上保持差異（例如，通常情況下建議的詞匯通過加粗表示）
二、 個性化交互
1. 比如，Google
（Google作為搜索引擎的燈塔，搜索交互亮點的地方太多太多了，這里只舉個小例子。）
如上圖，不只在下拉框中展示搜索聯想的關鍵詞。
還把關鍵詞作為一個詞條顯示給客戶，比如電影，比如品牌。還同時顯示各自的參數，比如 圖片，字段。
可以幫助用戶了解信息，精準定位。
2. 比如，維基百科。
由于網站的定位不同。維基百科是一個百科全書，其中都是各類詞條相關的知識/信息。因此下拉框中的聯想，都是以詞條形式顯示的。包含了圖片，詞條名， 參數/字段。
3. Amazon 亞馬遜
亞馬遜的用戶體驗也是做到極致了。搜索下拉框除了提供搜索聯想的關鍵詞，還按照不同的特殊關鍵詞，提供不同的參數選項，方便用戶一步到位，不用再到搜索結果頁里做一次篩選了。優化用戶體驗。
比如，想搜索“chair”, 輸入了關鍵詞“chai”(注意，還沒打全 chair)，下拉框中除了顯示chair相關的商品。還直接把chair的價格區間顯示出來，方便用戶點擊后，直接顯示相關搜索結果。
相信此處亞馬遜的PM們是做過usage分析的，chair列表頁中，應該是 “價格”篩選的usage是最高的，并且極有可能用戶進入chair列表頁的第一個用戶行為就是對價格做篩選。PM們就干脆把篩選項放到了搜索下拉框中了。
針對關鍵詞”ipad”, 也是同樣的交互處理方式，此處是顯示“尺寸”區間。
針對關鍵詞“alarm”,下拉框中按照鬧鐘的不同“功能”，顯示“圖片+分類“，方便用戶直接點擊。
【亞馬遜篇 番外】
在收集亞馬遜案例的時候，好玩就去搜了搜國貨之光“馬應龍“，歪果仁們的評論簡直是太歡樂了，看著看著我都笑出了鵝叫聲。
于是就跑偏了，翻譯了2個評論，貼了上來。大家看文章看久了，休息下~
以上，討論的都是輸入單個關鍵詞搜索的情況。
那么輸入多個關鍵詞的交互該怎么處理呢？
N年前，我在《交互設計稿-純實例》之前我寫過，此處不再贅述了。
如有興趣，請戳，https://www.zcool.com.cn/work/ZMjY4Nzg3MDA=.html
大部分的網站的搜索功能，都是需要在輸入關鍵詞后，點擊“搜索按鈕“ or “回車”，才展示新的搜索結果頁的。（此處不討論百度中，鍵盤移動到聯想上就刷新結果頁等特殊情況）
即一定要有個確認的命令，才觸發搜索。這里面有很多考慮。比如：
* 數據量大，如果是實時響應+即時加載搜索結果頁，對服務器和代碼質量的要求都太高。
* 用戶體驗不太好。因為用戶還沒輸入完，或者還沒確定。頁面就在不停的刷新，會干擾用戶。
但，也有個別工具軟件中，不用按回車，就實時刷新搜索結果。比如，Figma.
在軟件中，都是自己的存檔文件，數據量本身就不大。此時邊輸入關鍵字，邊實時響應，刷新搜索結果頁，讓用戶隨時看到自己的文檔。這種情況下，不用按回車，用戶體驗還更好。
以上，終于寫完了。
暫時寫到這吧，總結太累，但是值得！
最后，附上Amazon貝索斯的原話：
翻譯如下：（沒有太直譯，不然有點拗口）
“以用戶為中心”有很多優點，但最大的一個就是：用戶是美麗的、棒棒的、不會滿意的，即使他們說我們的商業很贊，他們表示很開心很滿意。但他們其實想要更好的東西，不過他們自己并不知道。那么你的讓用戶愉悅的渴望，會驅使你代替他們去發明創造。
——杰夫*貝索斯，2016年給股東的信
額，還是拗口。簡單來說，就是：
筒子們，為了讓用戶高興，發揮你們做產品/交互的主觀能動性吧，自己研究創造去，做個好產品出來。不用指望用戶告訴你做什么/怎么做，他們也不知道。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn