大家好，我是 Clippp。今天為大家分享的是「菜單導航」。一個簡單的漢堡菜單就可以包括多種不同的樣式，可能有的樣式甚至沒有官方的名稱，但因為樣式的差異在功能上這些菜單也會出現差異性。
我們可以通過分析這些樣式，來思考不同的樣式代表著怎樣的設計含義和設計目的，不能因為簡單常見而忽視了功能的內核。
關鍵詞：橫條、多個菜單選項
這個圖標的樣式簡潔易懂，通常位于網頁和 App 的上下角，用來告知用戶這個按鈕之外還有更多內容可以探索。
當產品有多個菜單選項時，考慮使用漢堡圖標來顯示，但盡可能避免在桌面視圖中使用。
關鍵詞：垂直、內嵌菜單
通常位于屏幕或窗口的右上角或頂部，是用于打開帶有附加選項的圖標，打開的內容往往是一個較小的內嵌菜單而不是整個全新的頁面。
關鍵詞：水平、內嵌菜單、web
水平三點式菜單同樣常位于屏幕或窗口的右上角，用于打開菜單或顯示相關項的操作。
因為圖標樣式是水平的，所以更容易在 web 上或者在表格等水平方向中使用。
關鍵詞：子分類、子功能
九宮格菜單通常用于打開同一產品中包含不同子產品或子功能，可以在它們之間快速切換，此圖標常位于產品主頁的右上角。
關鍵詞：過濾、排序
過濾式菜單由三行不同長度的線段水平疊放而成，是最廣泛使用的過濾符號?？梢詫⑦^濾式菜單與“排序方式”選項結合使用，或者與全局過濾器結合使用。
關鍵詞：樣式特殊、時尚感更強
作為漢堡圖標的替代品，與顯示列表菜單的目的相同嗎，但是這些樣式我們平常見的可能會比較少，更常用在充滿現代感、時尚感和藝術感的網站上。
不同的樣式可能代表著截然不同的設計目的，常思考這些小而精的細節，是保證產品體驗提升的關鍵。
慢來比較快，如覺得有幫助，請點個贊，謝謝！
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
金剛區是什么，想必大家都有所了解。
沒有的話看這張圖就懂了：
圖片來源：淘寶首頁
我在微信上搜了一下，發現大部分討論金剛區設計的文章，都是在講怎么畫圖標。
但是我自己在使用各大 APP 的過程中，發現很多金剛區并不是那么好用，而且這跟圖標好不好看無關。
金剛區設計不好，會對我的使用造成直接影響：
我今天就來總結一下，對于金剛區設計的交互/體驗思考：
金剛區里有多少項比較合適？
這其實是米勒法則（Miller’s Role）的典型運用了。
如果你還不太了解米勒法則，看看下面這張圖里的詞語：
現在，半分鐘回憶一下，你記住了多少個？
……
大部分人能記住 5~9 個。
米勒的研究發現，普通人的工作記憶（Working Memory）只有 7±2 個信息塊。
如果給的信息超出了這個數字，大部分人也只能記住這么多。
所以說，金剛區里的圖標數量，最好也維持在這個數，否則就是對用戶的記憶能力要求過高了。
通常來，4 個圖標很輕松，說 6 個圖標是比較理想的，8~9 個就有點吃力了，10 個就超綱了。
例如支付寶這個就過分了，好在這只是工具類產品，復雜一點也沒辦法：
人們在看閱讀文字時，視線軌跡是之字形：
人們在閱讀表格時，視線軌跡是除草機形：
上圖來源：這樣設計表格，看著真難受！
雖然金剛區的眼動圖我沒有，但第一步肯定是從左上角開始往右掃。
所以，用戶最有可能使用的圖標，應該從左到右排在最上面一行，最不常用的可以排在右下角。
例如美團外賣這個設計，看著就挺合理。不但把重要內容放在第一行，而且還做了很大的視覺區分：
不過一些不愁流量的 APP 會選擇把黃金位置用做商業宣傳，難免損失點易用性。
1. 仿真圖標
如果追求質感，多半會使用物品本身的顏色，例如每日優鮮這個：
這種圖標就沒什么顏色好討論了，注意一下整體和諧就好。
2. 數量較少
如果圖標數量不多可以使用一個顏色，那么顏色上，同樣沒什么好討論的。
例如 QQ 音樂：
3. 數量適中
如果圖標數量在 7 個左右或以內，那么可以每種顏色的圖標都來一個，這樣用戶也能記住大概什么顏色代表什么。
例如京東這樣：
4. 數量很多
圖標數量遠超過 7 時，就不可能每種顏色來一個了，否則顏色都不夠用了。
如果還是想要劃分顏色，可以將類型作為依據，這樣用戶在尋找圖標時會比較有方向。
當然，其實也可以簡單點，干脆都一個顏色，例如聯通手機營業廳：
1. 底框
一些產品為了統一感，會用圓圈或者圓角矩形，把所有圖標都框起來。
這樣視覺上是好處理了，但交互上很不推薦，因為會大大降低圖標的識別度，乍眼一看都長一樣。
這種底框在主流產品里已經很少見了，不過這么做的設計師還是不少：
這種圖標數量少，有顏色區分還好，如果數量多又一個顏色，那就很難辨認了。
縱觀常見的金剛區圖標，通常不外乎四種樣式：線條、形狀、2D、3D、仿真。
聯通手機營業廳
QQ 音樂
京東
美團外賣
每日優鮮
任何樣式都能讓用戶識別和記憶，但是不同的樣式給人的感官不同。
真實性越高的視覺樣式，就越容易給人高級的感覺；相反真實性越低的視覺樣式，越容易給人簡單邊界的感覺。
我發現做設計時，從不同的角度會帶來截然不同的思考。
今天這篇分析，算是一個以交互體驗為主，融合了一些視覺角度，希望帶給大家一些靈感~
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
本文從圖標類型、系統圖標的尺寸和網格、圖標的繪制、導出和命名等6個方面，幫你快速掌握圖標設計規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
在內容為主的用戶界面設計上，圖標起到了降低理解成本、高效傳遞信息等舉足輕重的作用。隨著矢量格式與高分屏的普及，對圖標字體的精細度與視覺匹配度也有了更高的要求，這對設計師來說也是一個不小的考驗。本篇將介紹目前業界優秀的圖標案例，并以日常圖標繪制中遇到的問題，解析背后原理給出對應解法。
注：以下部分示例僅為個人處理方法，僅供參考。
本期提綱：
“SF Symbols” 是蘋果為 San Francisco 系統字體設計的一套內置圖標合集，每個符號圖形都能與所有磅重、大小的文本進行自動對齊，達到與字體無縫結合的效果。目前已更新到 3.0 版本，根據應用界面中各種使用、展示場景，默認提供 3,200 個符號各自擁有 9 種磅重，設計師可根據官方提供的合集庫直接引用到設計稿中，或使用符號模板來添加自定義圖標。
1. 多種磅重
“SF Symbols” 擁有與 “San Francisco” 字體相呼應的 9 種字重，在字母參考線（字母頂線與基線）下支持 Small、Medium 和 Large 3 種顯示比例，總計 27 種樣式，以達到與各個字形最佳的匹配效果。
圖形磅重與比例參考表
圖形比例與字形排列參考
2. 字形參照定位
以字體設計方式處理圖形的垂直定位，在設計圖標時需要將圖形中心部分放置在模板基線以上的位置，系統讀取時將根據圖形基線計算圖形的 baselineOffsetFromBottom（基線與底邊的偏移值）進行垂直定位，使圖形與文本的基線一致，達到圖形和文本水平視覺對齊。
圖形參考線
相同基線下對齊效果，使圖形重心處于小寫字母區域
常用的塊級元素對齊效果，重心稍微偏下
3. 多色應用
通過讀取圖形內的分層信息，可賦予每個分層不同的渲染模式達到更加豐富的表現形式。
不同渲染模式下的多色效果
4. 圖形本地化適配
除磅重與比例以外，當圖形出現需要使用文字表達含義時，針對特定語言與書寫順序 “SF Symbols” 提供了不同的適配圖形，包含拉丁語、阿拉伯語、希伯來語、印地語、泰語、中文、日語和韓語等語言類型與 LTR/RTL（從左到右、從右到左）兩種布局。
隨著像 Retina 這樣的高分屏與 SVG、PDF 等矢量格式在設備上普及，文字和圖標在精細度與匹配度上有了更多的追求，一般應用會根據常用的字體磅重去定義默認圖標的粗細，因此我們會看到一些圖標出現非整數規格的情況，這對新人來說會造成一定的設計門檻。
1. 微信的圖標規格
以微信客戶端為例，需要在 24*24pt 的網格中默認使用 1.2pt 線條進行繪制，同時在圖形自然拐角處需要保持外圓內方的樣式。
2. 為什么會有設計門檻
對新手來說在 Sketch、Figma 或 Photoshop 中使用描邊設計非整數規格圖標可以是噩夢，即便有經驗的設計師在繪制過程中也會因為計算路徑余數而影響設計效率，以 Sketch 為例路徑屬性中雖然支持像素對齊、半像素對齊和不對齊像素三種模式，但如果需要繪制 1.2x 描邊時，我們只能使用不對齊像素的模式再計算路徑落點位置，因此需要不斷計算落點是否處于 0.2、0.8、0.2……
Sketch 的對齊模式
3. 建議方法：倍化繪制
所以在處理非整數圖標時我們不妨把畫板等比放大 5 倍，可以獲得一個 120*120pt 的新畫板同時描邊放大為 6pt，這時候我們只需要使用像素對齊模式直接進行繪制即可，同理其他數值規格我們也可以使用倍化調整，使圖形在畫板內變成整數，最直接方式是小數點后奇偶數進行判斷，奇數放大 10 倍，偶數放大 5 倍。輸出資源時如果使用 svg 這類矢量格式可根據業務需要決定是否縮放輸出，而位圖則根據所需尺寸進行倍數縮放再輸出。
4. 工具使用差異
使用 Sketch 對圖形進行倍化后繪制和調整已經友好很多了，但是其實 Sketch 中還有不少繪制效率工具是沒有放在默認工具欄里的，這里可以根據需要使用自定義工具欄把這些工具外置。
Sketch 中的路徑工具
Figma 相對而言路徑編輯功能比較簡單，但依賴社區豐富的插件也能達到對應的效果，這里推薦一些常用的矢量圖形處理插件。
雖然目前 sketch 的圖形繪制功能已經很完善了，但依然存在一些限制，如路徑斷開后無法直接重新連接，特定角度繪制效率低等問題，從而影響設計的精確度和效率。這時我們可以把目光轉移到一個老牌的矢量工具上“ Adobe Illustrator ”（后面簡稱 AI ），AI 中的隔離模式、方向滑移延伸和自定義網格本身非常適合矢量繪圖，用來繪制圖標也十分便利。
Sketch 與 AI 的對比，雖不公平但也是事實……
使用 AI 的網格系統，我們可以設定符合業務需要的對齊方式、鍵盤增量和網絡間隔，且 AI 生成的路徑是支持在 Sketch 或其他矢量工具中復制粘貼的。
適配自身規格的網格設置
使用 AI 自帶的角度旋轉功能時設置圖形副本數量，保證了每個圖形角度和方向都是準確的。
使用 AI 繪制實例演示
1. 等比分布
當我們需要繪制等比放大或擴散圖形時，會遇到一種情況：等邊圖形或圓形可以直接使用工具進行等比縮放，但長矩形或者不規則圖形等比縮放后會出現部分點、線不等比，這其實是一種理解上的誤區，在把不規則圖形等比放大時，我們需要的是點、線距離圖形中心（非圖層中心，而是幾何中心）做等距偏移的效果，而工具一般會按圖層中心來進行縮放，可能會造成效果上的誤差。
常見圖形在不同處理方式上產生的差異
清楚原因與差異后，只需選擇對應偏移功能即可達到理想效果，等距偏移一般矢量工具都會自帶，只是就使用習慣而言沒有常用等比縮放容易理解與上手。以 AI 與 Sketch 為例，都能在路徑、對象菜單中找到，且 AI 額外支持偏移后拐角屬性設置。
AI 與 Sketch 下通過路徑偏移獲得等距縮放效果
2. 骨架與輸出路徑
日常涉及圖標繪制的需求，建議可以先使用描邊進行繪制，可以理解為把路徑當做圖形的骨架，再利用工具的描邊樣式塑造磅重拐角，這樣我們可以有效的保留圖形最大的可塑性和調整空間。
但同時需要注意，圖標在輸出前需要完全轉化為輪廓以及封閉路徑，以保證系統渲染模式的一致，并且這是所有平臺都要求的。
SF Symbols 對路徑輪廓化的要求
1. 面積配比
對應不同的業務，有時會基于用戶對事物的認知，直接引用該事物作為基礎圖形進行圖標繪制。因此會出現一些穩定性弱、長寬比例相差較大或形體單薄的圖形，而我們會遵循已有的標準圖標柵格進行繪制，這樣會導致部分特征過于明顯的圖形在顯示面積上出現視覺誤差與中心渾濁。情況類似中文字體中出現的中宮、字懷（中宮：漢字重心區域范圍、字懷：筆畫之間的留白范圍）緊湊。
按標準柵格繪制特征明顯的圖形
這時可以適當把圖形延伸部分進行細微的外擴處理，使圖形中心部分視覺上更加舒展。
對圖形延伸部分外擴微調
2. 視覺對齊
通常使用工具的對齊功能實現圖形間的相對關系是合理的，但我們在處理多邊形時就會遇到 “已經用工具居中了，但看起來卻沒居中” 這種問題，這種現象一般是由于不同多邊形的面積與寬高帶來的視覺差造成的。
奇怪的對齊現象
以三角形播放按鈕為例，在背景范圍中繪制三角形時，我們可以先添加周長與三角頂點相接的圓形輔助定位，注意這里需要使用多邊形工具設置的三角形而非默認的菜單中的三角形，因為默認的三角形是等腰三角形，不能用于這種情況。
思路與等距放大類似，先確定幾何中心而非圖層中心
這里推薦使用多邊形工具設置三角形，除了因為是等邊三角形外，在 Sketch、Figma 中這類圖形未擴展的情況下工具是會自動填補圖層范圍，且直接對齊就是居中狀態。
Sketch 多邊形工具創建的三角形
本文所提到的情況與處理方式僅以個人角度切入，在日常設計工作中我們所遇到的情況會更加復雜棘手，但這里也希望通過自己的發現給大家帶來一些啟發與探討。
圖標的繪制并不是也不應該是一個繁重的任務，只要找對方法或了解背后圖形原理，大家都能在方寸之間的設計中找到不一樣的精彩。
作者：We-Design
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
今年年初，我到客戶現場進行需求溝通，在溝通結束后，客戶問了我一個問題，我竟然不知如何回答，只在當時說了：“好的好的，我們會進行優化的。”
當時客戶是這么說的：“為什么界面的圖標這么普通，毫無新意，能不能設計的好看點。雖然我們是 B 端產品，但這樣子的圖標真的不好看?！?
雖然我心里知道 B 端產品首先是以可用、易用為主的，那么圖標也不例外，在評價圖標設計的時候，我們首先看圖標是否體現了可用與易用，是否讓用戶通過看圖標就可以聯想到這個功能是什么（合理、無歧義表達）；同時圖標是否符合設計規則，讓界面看起來統一與專業。若圖標符合以上要素，就可以再來看圖標好不好看的問題了。
不過這并不是一位客戶的問題，后面我們還遇到了很多客戶有類似的問題，一上來就想要視覺層面好看的圖標、有創意的圖標、顏色豐富的圖標。
那 B 端圖標設計真的只需要考慮好不好看嗎？作為設計者的我們，還能做什么呢？其實，B 端圖標設計是帶著腳鐐在跳舞，小小的圖標藏著大大的智慧，下面我們一起來看看吧~
圖標也叫 icon，它是對現實世界的概括、抽象、隱喻，在產品軟件中，它會向我們傳達功能與操作。
有些圖標已經成為人人熟悉并一致認同的傳播語言，例如刪除、設置、男士、女士、刷新、電話、郵件，看到這些圖標，人們的反應基本是一致的，無需再多說什么。
圖標在 B 端界面的用途我們就不展開長篇大論說了，簡單來說圖標除了做點綴，還可以直接表達功能與用途。因此，我們可以將 B 端圖標分為兩大類：示意類圖標和半裝飾類圖標。
1. 示意類圖標
示意類圖標（也有稱之為功能類圖標）是指可以向用戶示意功能用途的抽象化圖形，可以和文字配合使用，也可以單獨使用。
該類圖標在中后臺系統的界面中會比較常用，例如基礎組件、導航菜單、狀態、功能性模塊。示意類圖標不僅以可用的方式豐富了界面效果，在一定程度上也緩解了用戶的視覺疲勞（試想，全是文字的界面會怎么樣）。
2. 半裝飾類圖標
為什么我們要取名「半裝飾類圖標」呢？原因在于，在 B 端界面上，不會無緣無故出現純裝飾、毫無寓意的圖標，任何圖標的出現即便原本是為了裝飾，設計者在設計時也需要思考其含義屬性。
該類圖標會在中后臺導航、中后臺工作臺、Dashboard、B 端網站等地方出現，它們可以讓 B 端界面活躍起來。
我們可以發現，某些場景下使用示意類圖標會更好（比如基礎組件），某些場景下使用半裝飾類圖標會更好（比如 B 端網站），某些場景下使用任意一類圖標都可以（比如中后臺導航菜單）。
回到一開始客戶的問題：把圖標設計的好看點，他說了好幾個地方，記得好像有樹控件 、導航菜單、按鈕等。設計者們需看看目前客戶講的場景是哪個，有些場景不適合亮麗的圖標，這會喧賓奪主，例如基礎組件中。
我們深刻了解 B 端圖標類型的使用場景，在設計決策時會更加得心應手。
雖然示意類圖標和半裝飾類圖標視覺形式不同，但在繪制上的規則是互通的。我們團隊輸出了一套企業級 B 端圖標設計規范，不僅可以幫助新人設計師快速上手，并且可以使團隊內設計師高效協作，保證設計結果的一致性。接下來和大家分享下思路，這是一套可復用的方法。
1. 約定圖標繪制區域
我們需要給一整套圖標約定合適的繪制區域，保證不論哪位設計師輸出的圖標，均符合設計標準。并且原始圖標大小一致，可以保證前端使用也非常友好。
假如都是 48px*48px 區域繪制的圖標，它們均縮放到 16px*16px 即可；如果一個是在 48px*48px 畫板上繪制的，一個是在 88px*88px 畫板上繪制的，它們都縮小到 16px*16px，會導致圖標看起來視覺不一致。若期望它們看起來一致，就需要專門為不同畫板的圖標設計繪制規則。
這里在和大家分享一個小心得：我們團隊在約定圖標繪制區域時，發現了一個問題。Antd 的圖標是繪制在 1024px*1024px 畫板上的，但又有一些團隊是繪制在 16px*16px，到底應該選取哪種畫板呢？經過實際操作后我們發現，畫板越大，設計細節可以越豐富。但縮小到小尺寸時，會有小數點的虛邊（不過不妨礙前端應用，用戶也看不到虛邊）。而小尺寸畫板繪制圖標，畫板全在視線范圍內，設計師繪制圖標時更有安全感。所以，不論用什么尺寸的畫板，只要團隊成員一致認同即可，不用過于糾結。
2. 設置出血位
除了要讓圖標繪制到統一的畫板中，我們還約定了出血位，要求所有圖標均保留出血位（出血位默認使用固定值），出血位起到的作用是：防止設計師圖標繪制不小心貼邊后，圖標在實際應用場景中會出現缺失現象。當然，出血位的默認數值并不是一成不變的，允許設計師在繪制一些特殊形狀的圖標時，有調整空間，保證視覺平衡。
3. 約定元素調整規則
針對示意類圖標：
線條：我們會要求設計師在繪制圖標的線條/圓點時默認使用某個數值，然后設定線條粗細/圓點大小的遞增或遞減規律，例如以 2 的倍數為主基調繪制，默認為 6px 粗細/6px 大小。但允許設計師在繪制圖標時，不合適用默認數值的，就按照增減規律去指導設計，如下所示。
圓角：圖標采用何種內外圓角設計會影響圖標給人的感覺，數值大的圓角會讓用戶感覺親切；數值小的圓角會讓用戶感覺硬朗、專業。采用哪種圓角方式，設計師可以參考產品調性去規定。
針對半裝飾類圖標：
半裝飾類圖標在設計上也不是隨意為之，除了要可以表達文案內涵外，假如是一整套的圖標系列也需要約定元素調整的規則。
例如約定在「幾何圖形+業務圖形」的設計基礎上進行發揮，保證圖標放到一起具有很強的一致性。并且半裝飾類圖標還要設定色彩范圍（主色、輔色），如此可以讓界面色彩不雜亂，嚴謹有序。可以看到騰訊云官網的圖標采用了類似的設計方法。
4. 分層打造秩序
對于圖標畫板來說，它不是一個平面，它就像樓房一樣，是分層的。從底層到最上層的內容依次為：主畫板區域、核心內容繪制區域、基礎圖形參考區域、實際圖標。
5. 從基礎型拓展
我們在設計圖標時，都應該先從基礎型開始思考——圓形、矩形、三角形、正方形等，保證設計構圖上的節奏感和規整性。當基礎型無法滿足需要的時，以它們為準向外散發，在遵循設計規范的基礎上，做視覺上的平衡和微調。
如果是落到實際軟件中應用的，建議所有圖標最后都要合并路徑，保證圖形規整和干凈，同時便于正確輸出和使用。
在「2.1、約定圖標繪制區域」中，我們說到了要為一套圖標約定統一的畫板區域，但這個事情給設計師造成了困擾，還不止一位設計師問我：“那是不是我不能再用其他尺寸的畫板來設計圖標了?！贝鸢府斎皇欠穸ǖ?。約定畫板尺寸不是約束，恰恰是在規則中給予了設計師有序拓展的能力。
假如不約定畫板尺寸，那么設計師直接放飛，每個圖標都有自己的尺寸，并且有些還會出現長方形的形態。畢竟每個人的工作習慣不同、面對的產品不同，直接打開軟件畫圖標是最快的方式。
而首先約定畫板尺寸，設計師就會有條理地進行繪制，在遇到特殊情況時進行有序拓展，我們可以稱之為場景拓展法。例如設計師可以為 B 端基礎組件、工作臺常用導航模塊、結果頁的圖標各自設計一套繪制尺寸。
那設計師要怎么判斷什么時候采用場景拓展法去設計呢？我們可以優先使用默認畫板尺寸設計圖標，在遇到特殊場景不允許情況下，采用場景拓展法去執行，針對界面風格有場景區別的，可以規定幾類畫板尺寸，為不同場景使用。
線型圖標與面型圖標也是設計師經常在討論的話題，他們常常討論「什么情況下使用線型圖標，什么情況下使用面型圖標」。做過比較多 B 端產品的小伙伴可以發現，沒有說哪種場景必須使用線型圖標，哪種場景必須使用面型圖標，主要還是看當前產品調性合適哪種，并且使用某類型圖標后，對界面產生的效果是什么。
例如當界面圖標較多時，采用面型圖標，會顯得頁面很重，會把用戶視覺引導到圖標而不是重點數據上。
線型圖標與面型圖標在界面中使用，是一項系統工程，是由多方因素決定的。但我們設計師需要保證 B 端界面圖標使用的統一性，即便按照場景區分，也需要認真思考，是不是有必要。就如界面字號使用定律一樣，建議不要超過 3 種，多了會讓界面雜亂，降低界面設計品質。圖標也是如此，不論面型還是線型，要站在產品角度去整體把握，而非線型和面型的簡單選擇。很多 B 端產品是兩種類型混用的，但它們很好的劃分了使用場景。
這里我總結了一些線型圖標與面型圖標常用的場景（以 B 端中后臺為例，但這并不是唯一選擇）：
1. 在導航上（菜單極其多），常見默認用線型，選中用面型。
2. 在導航上（菜單很少，單層），粗一些的線型圖標或者面型圖標都會用，且會比較個性化，以提升產品整體調性。
3. 在基礎組件中，通常使用線型圖標，且顏色淺，用戶可以把注意力聚焦在信息本身。
4. 在表格數據的狀態中，面型和線型是均分使用的狀態出現。
5. 在文字按鈕中如果要添加圖標，讓界面展現更豐富，線型按鈕居多。假如一旦按鈕很多，面型圖標會讓界面顯得太重。
6. 若標題區要出現按鈕，面型按鈕會使得區塊顯得更整體。
這里還想和大家說說「視覺尺寸與規范尺寸」的事情。之前遇到設計師這么問：“既然已經約定了圖標的設計規范，那是不是就嚴格按照規范區間來（嚴格按照基礎圖形參考區域來），但是有些圖標不適合直接套用規范啊。”
是的，其實很多不規則圖標是不適合直接套用規范的，就像一份周報格式不是所有崗位都適用一樣。如果設計師發現有些圖標直接套用規范不可行，是可以根據「視覺大小一致性」進行微調的。這不僅保證了前端開發的便捷，也保證了界面視覺的整潔。
既然是一套 B 端產品層/企業級圖標庫，那么必須要有規范的命名方式，這樣會方便設計師之間的協同，也會更方便開發與設計之間的協作，同時查找效率會提升。
那么命名有什么規律呢？其實只要根據項目的情況，團隊內有統一的認知即可。關于命名的中英文，也是視團隊而定，各有優缺點。比如是英文，那會方便開發直接用名字，不用重新取名（當然設計師取的英文名開發不喜歡，也會改）；用中文的話，方便檢索。
可以是：
尺寸/類型/圖標名稱/狀態
16px/導航/上傳/默認
形態/格式/圖標名稱
面型/方型/新增
模塊/圖標名稱/狀態
導航/分享/正常
好用的三方圖標庫還是很多的，雖然圖標庫質量參差不齊，但還是在一定程度上解放了設計師天天畫圖標的痛苦。這里介紹幾個圖標質量不錯的網站：
1. Noun Project
網站鏈接：https://thenounproject.com
2. Iconfont
3. ICONS8
網站鏈接：https://icons8.com
4. Font Awesome
網站鏈接：https://fontawesome.dashgame.com/
5. IconPark
網站鏈接：https://iconpark.oceanengine.com/home
當客戶提出圖標好不好看時，是一個正常人的反應，試著想想我們自己，不也總是會很表面得看待一件事情么。因此，客戶不會知道原來一個小小的圖標也是藏著大大智慧的。不過沒關系，當我們了解了小圖標內部的大智慧后，我們可以更輕松的駕馭圖標了，也可以知道在何種場景下，使用何種圖標可以提升界面展示效果，得到客戶的好評。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
最近我在學習使用 Figma，會在社區查找一些大廠的設計系統文件學習，看到一篇微軟 Fluent 系統圖標規范文檔，還挺詳細的。其中，我發現有些小點自己平時很少注意到，并且感覺對設計師定義圖標規范也有一定的幫助，所以結合個人圖標經驗挑選部分內容來翻譯成一篇文章，便于擴展自己的圖標思維。（備注：以下的規范是針對尺寸 24px、線條粗細 1.5px 的圖標）
在前一個版本，Fluent 系統圖標采用了 MDL2 和 Monoline 圖標集合，比較大的特征是直角、方方正正的形狀。不過隨著 Win 11 系統的發布，我們可以看到 Fluent 系統圖標也進行了比較大版本的優化，感知最大的地方就是圖標變圓潤了。
設計理念有三個準則：熟悉的、友好的、現代的。圖標形狀遵循了用戶熟悉的基本原則，示意上識別清晰，盡量遠離隱喻含義。同時，細節處理更友好，采用了圓角和簡潔的形狀，并有兩個主題：線性和填充。
規范化的網格，能促進圖標的整體性和統一性，設計師繪制圖形元素時也更有條理性。從 24px 圖標尺寸開始，比較建議使用網格系統，內容安全區域是 20px，周圍有 2px 的內邊距。（留內邊距主要是考慮個別圖標居中分布和體量問題，有些圖標元素會超出安全區域，比如修飾符類型圖形）
基礎形狀是網格的基礎，正方形、圓形、縱向矩形、水平矩形采用定義好的模板尺寸，在相關圖標體量上保持一致的視覺比例。
圓形、矩形、正方形圖標體量效果如下。（矩形體量看起來有點偏小，這種問題受限于圖標尺寸空間?。?
圖標線條應當采用一致的粗細，線條末端采用全圓角。
像素對齊很重要，特別是低分屏設備，圖標可以看起來很清晰。由于線條粗細是 1.5px，需要保證 1px 是對齊像素的，避免內外都出現虛邊。
但在某些特殊場景，為了使圖標體量居中分布，就會出現像素不對齊的情況，比如一條豎線。
Fluent 圖標改動點較大的可以說是圓角了，傳遞了更柔和、更友好的體驗感受。因此，我們認真打磨圓角的細節，定義了三種圓角數值。大圓角使用在線條直角或鈍角處；當使用大圓角感覺形狀太圓難以辨別時，我們可以使用中圓角；小圓角用于很小的細節或銳角處。（確實挺細的，也影響了整體的風格。如果追求統一大圓角的話，可能太偏圓潤風格，更適合娛樂類產品用戶吧）
斷口多存在復合圖標上，斷口間距是 1px。當圖形角度堆疊時，圓角中心點需要一致，即外層圖形圓角會稍大一點，使線條平滑過渡。（看起來確實挺和諧的）
修改符應當謹慎使用，因為它對于一部分用戶來說很難閱讀。由于尺寸較小，修飾符元素要盡可能地簡潔，常放于圖標的右下角。設計師在繪制過程中，修飾符圖形可以超出安全區域，使圖標視覺感官居中分布。
如果已經建立的圖標需要關閉狀態，應當遵循模板：斜杠從左上角到右下角 45 度，撐滿圖標的安全區域。
圖標平衡很重要，我們也有測試的兩種方法。第一種方法是畫一個圓圈，幫助我們更好地感知平衡性。第二種方法是視覺重量測試 ，通過模糊來感知圖標的區域面積，從而達到平衡的目的。
隨著更多圖標的創建，我們必須非常有意識地命名，并盡可能地具有前瞻性，后續才能更好地協作。我們推薦圖標命名使用形狀的明喻，比如盾牌代替安全，星號代表收藏。
以上就是 Microsoft Fluent 圖標規范的一些小翻譯總結吧，線條粗細、圓角、居中、體量、平衡、命名等方面還挺多細節可以打磨細化的，希望各位設計師能夠結合業務來仔細琢磨，提煉出屬于自己產品的圖標規范。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
SVG 格式圖標在軟件界面中有廣泛應用，它與生俱來的矢量屬性，使其在高分辨率屏幕上的表現非常完美。SVG 是一個基于 XML 標記語言的開放網絡標準格式，擁有跨設備多平臺的兼容效果。前面我們有分享過一篇關于 WPS 圖標的文章《探索 WPS 3000 個圖標設計背后的故事》，得到了很多網友的積極反饋。相信界面設計的小伙伴們都很熟悉 SVG 格式了，這次，我有一個棒的想法想分享給大家：利用 SVG 圖標套色，來完成不同界面的適配。
圖標套色的簡單來說就是利用 SVG 格式的文本屬性，使用 XML 格式標準，在 SVG 文檔中增加 CSS 樣式，通過修改 CSS 樣式屬性，精準控制 SVG 格式圖標顏色，通過修改透明度控制圖形顯示與否，從而變換圖標的風格外觀。
基本原理：修改 SVG 的樣式，生成不同風格的圖標
用處一：顏色適配
這里有幾個插件，都用到了“保存”、“打印”這些功能。因為主題色不同，即使是同樣外形的圖標，還是需要根據主題色的不同輸出適配各個插件的圖標。采用圖標套色的方法，就可以避免這類圖標資源的重復輸出。
相同功能需要兩套不同主題色的圖標
用處二：皮膚適配
現在多數軟件一般都有皮膚功能，不同用戶需求，衍生出風格各異的皮膚，各種顏色，深淺不一，一套圖標滿足不了所有，為了視覺效果需要對每個皮膚輸出特定顏色、風格的圖標。圖標數量如果很多，投入的成本將隨皮膚數量呈幾何倍增加，圖標套色就可以很好的解決這類問題，只需要通過修改圖標顏色和風格即可適配。
通過修改映射配置，可以得到不同顏色的圖標
我們先看看圖標套色之后的效果：
修改映射配置，可以得到線、面不同風格的圖標
簡單來說，實現這種效果有下方五個步驟:
套色方法五個步驟
以下方幾個圖標來做示例：
SVG 示例圖標
第一步，確定圖標線、面風格
設計師將圖標線、面風格確定下來，并保證兩者效果上可以兼容，即輪廓一致。
同時兼容線、面兩種風格效果
第二步，定義圖標顏色
在確定了圖標的風格之后，將圖標中用到的 7 種顏色，根據一深一淺再拆分為 14 種（具體幾種顏色可根據圖標設計需要來定），深色用于填充線性圖形，淺色用于填充面性圖形。
根據線、面風格需要，定義圖標的顏色
第三步，給顏色定義樣式名
給 14 種顏色，分別定義好 CSS 樣式名（樣式名遵循 CSS 規則即可）。
給顏色定義樣式名
第四步，給 SVG 圖標添加 CSS 內部樣式
SVG 格式圖標默認是沒有 CSS 樣式，需要手動將 CSS 內部樣式添加到 SVG 文檔中，并將 SVG 路徑顏色與 CSS 樣式名關聯起來。
給 SVG 添加 CSS 樣式
第五步，樣式屬性配置機制
添加內部樣式之后，需要開發小哥哥在軟件中增加對 SVG 圖標 CSS 樣式屬性的映射機制。修改映射機制配置文件中 CSS 樣式屬性，就可以控制圖標風格變化。
修改配置代碼即可改變圖標顏色
完成了以上五個步驟，通過修改軟件中的映射機制配置文件，就可以改變圖標風格。
了解了步驟方法，我們以 WPS 為例來講解圖標套色在實際案例中的應用：
案例一：前面有提到我們的四大組件，WPS 由文字、表格、演示、PDF 四組件組成。每個組件都有各自的主題色，文字主題色為藍色，表格綠色，演示橘黃色，PDF 紅色。多數圖標都含有主題色，但外形是一樣的，因各組件主題色不同而導致了很多圖標的重復輸出。
套色用處之一的顏色適配，可以讓圖標變色以適應不同的組件色，避免圖標的重復。
不同主題色圖標的變換效果
案例二：WPS 有推出多個風格各異的皮膚，因為圖標數量的關系，無法每個皮膚都輸出一套圖標，目前只能使用默認的線性圖標。也因時間和維護成本而導致圖標風格的單一。
套色用處之二的皮膚適配，能使圖標改變風格以適應不同的皮膚，既能滿足圖標風格多樣，又能滿足時間和維護成本的可控。
不同風格圖標的變換效果
案例三：深色模式的配色與淺色模式大相徑庭，圖標使用的顏色也截然不同，適配需要輸出兩套圖標資源，因不同深淺色模式而導致的圖標資源重復輸出。WPS 組件功能區的圖標有幾千個，輸出和維護都很費精力。
套色用處之二的皮膚適配，在深淺色模式下也能適用，改變圖標顏色以適應不同的深淺色模式，避免圖標的重復輸出。
深淺色模式下圖標的變換效果
通過以上的案例不難發現，SVG 圖標套色技術的價值，主要有以下幾個方面：
1. 時間和維護成本的降低
利用圖標套色方法，設計師只需要輸出一套圖標資源，就完成了多組件、多風格、深淺色模式適配。開發小哥哥也可以刪掉適配用的冗余代碼，提升了圖標的管理和軟件運行效率；
2. 個性化需求的滿足
后期可以增加自定義擴展，讓用戶配置圖標風格，更好地滿足個性化需求；
3. 服務器資源的節約
更少圖標資源，更小壓縮包，更少空間和寬帶的占用。
采用新技術，幫助設計、開發更好地完成多場景適配，降低了整體流程的執行難度，為項目節省了大量時間，避免過多精力投入在重復工作中，為最終完成目標創造了有利條件。同時也解放了生產力，有了更多的時間可以去關注高價值的項目。
工作中經常能遇到重復的內容，這都有提升和優化的空間，尋找更高效的方法，讓工作變得輕松簡單。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
圖標定制設計之一：6大章節！圖標設計基礎知識全方位入門指南
圖標定制設計之二：超全總結！金剛區圖標設計的 10 大風格
圖標定制設計之三：想讓圖標更精致？先掌握這11個容易忽略的設計細節！
圖標定制設計之四：學會SVG圖標的高級用法，界面適配效率翻一倍！
圖標定制設計之五：研究微軟 Fluent 圖標規范后，我總結了這9個知識點！
圖標定制設計之六：為什么別人的圖標設計又快又好？來看騰訊高手總結的知識點！
圖標定制設計之七：客戶說B端圖標太普通沒新意，該怎么解決？
圖標定制設計之八：從6個方面幫你快速掌握圖標設計規范
圖標定制設計之九：不止畫圖標！5 個金剛區的交互設計思考
編者按：其實網頁或者App中的導航（Navigation）這個概念遠不止我們熟悉的導航欄，而是一個更加廣的交互概念：引導用戶和產品進行有效的交互，實現用戶的目標。本文將詳細地介紹界面的導航設計。
一個網頁或App產品要想有很好的可用性（usability），需要做好的最基本的一點是導航的設計或者說引導用戶的設計。如果用戶在使用一個網站或者App的時候找不到自己的處在什么位置或者該怎么去到想要的頁面，那么視覺效果再怎么有創意或者抓人眼球都無法彌補產品的缺陷。無論你的產品想滿足用戶什么需求，讓用戶知道產品當下的狀態和每一步操作之后的結果是對用戶最基本的尊重。
首先，讓我們弄清楚導航這個概念。最基本的含義就是在我們的現實世界中，當我們從一個地方到另一個地方，需要一些引導和指示。英文中Navigation這個詞來源于拉丁文，原意就是：操縱船只在海上航行。所以導航就是能夠幫助我們到達目的地的行為。導航的其他意思都是建立在這個原意的基礎上。
所以回到UX／UI設計上，導航毫無疑問是可用性的一個要點。它可以定義為一系列引導用戶成功地與產品互動并且實現他們目標的動作組合或者技巧組合。 用戶帶著他們的期望和目標來使用你的網站或者產品，作為設計師的你需要給他們提供實現他們目標的最好操作流程。因此當你的導航設計得非常高效，用戶體驗能得到極大的提升。
在你剛開始設計你的界面時，就要思考怎么設計一個有效的無縫銜接的導航。通過一些可交互的元素，比如按鈕（buttons），開關（switches），鏈接（links），標簽（tabs），條（bas），菜單（menus），區域（fields），讓用戶在不同的界面之間進行切換。
我們工作室的設計思路是，在界面設計的早期就全面地思考導航的設計，包括界面的布局，頁面間如何切換，導航元素的放置和具體功能。并且通過低保真原型來進行驗證，保證用戶能清楚地理解所有重要的操作。如果跳過這一步，設計將有巨大的風險，其他事情有可能到頭來都白干了。所以無論，對用戶還是客戶還是設計團隊來講，做好這最基礎的部分是非常有好處的。
菜單是我們最熟悉的具備導航功能的元素，它向用戶展示了界面的所有重要選項。基本上，它可以是用動詞命名的一系列指令，用戶可以用它來指示系統做出動作，像保存，刪除等；它也可以是一個用名詞命名的目錄，用來代表不同內容的集合。
在界面設計中菜單可以放在不同的位置（側邊菜單，頂部菜單，底部菜單等），擁有不同的交互和視覺形式（下拉菜單，上拉菜單，滑動菜單等）。要想設計好菜單的位置、交互和視覺形式，設計師需要經過全面的用戶調查，包括目標用戶的預期和要求、接受能力和使用情境。好的菜單設計能讓用戶更快地實現他們的目標，為用戶體驗打下堅實的基礎。
△ 作者：Tubik
這是一個博客APP的界面設計，采用了側邊菜單以及目錄的形式，文字直接說明內容，再加上圖標來做為輔助的視覺說明。
△ 作者：Ludmila Shevchenko
這個UI概念設計的例子很好的運用了顏色作為標記，這是一種很有效的導航技巧：每個分類的背景色使用了和目錄相同的的顏色，這樣目錄和內容有著非常強的相關性，用戶能自然地將他們聯系起來。
CTA是用戶行為召喚的簡稱（call to action）。CTA簡單來說就是指設計師通過設計，刺激用戶去做出一些行動。相應的，CTA元素就是指那些能刺激用戶做出行動的交互元素。典型的CTA元素是按鈕，標簽或者鏈接。
不管在什么界面，CTA元素都是高效的交互行為的核心，極大的關系到產品的可用性和導航有效性。如果CTA元素的設計不到位的話，用戶會產生困惑并且得費勁地去嘗試。產品的轉化率和用戶體驗都會大打折扣。這就是為什么CTA元素特別值得注意。無論什么樣的界面，它都必須是最矚目的元素之一，用來直接地告訴用戶怎么用這個產品。
△ 作者：Eugene Cameel
一些CTA元素直接用圖標形式而沒有任何文字說明，但只適用于大家都熟知其含義的圖標，比如聽筒圖標和信封圖標。上圖這個例子中，這個聽筒圖標就是這個界面中一個焦點，是一個典型的CTA元素，引導用戶快速地實現他們的目標。不需要任何文字說明，用戶也能懂點擊這個圖標的結果。
但是，如果一個圖標的含義不是那么明顯或者可能造成誤解，最好還是加上文字說明。
△ 作者：Tania Bashkatova
上面這個例子是一個關于制作海鮮的網站的著陸頁（Landing page）。頁面的標題let’s cook還有食材照片是一個CTA，但不是一個可交互的CTA?？山换サ腃TA是下面這個紅色按鈕，用戶點擊這個按鈕能看到更多關于不同主題和菜譜的信息。 抓人眼球的顏色強調了頁面的視覺層級關系，把用戶的注意力拉到關鍵的交互區域中。
條（Bar）指的是界面中一組用戶可以點擊的元素，用來快速與產品進行互動，或者還能讓用戶知道事件的進程。
標簽條（Bar）
最基本的條是標簽條（Tab bars），常出現在APP界面的底部，讓用戶能在APP的不同模塊間快速切換。
△ 作者：Sergey Valiukh
載入條（Loading bar）
載入條是用來告知某個動作的進展，用戶可以通過時間、百分比或者其他信息了解整個過程。
△ 作者：Sergey Valiukh
進度條（Progress bar）
給用戶提供反饋，讓他們了解事件的進度，比如說計劃的事情完成了多少。
△ 作者：Valentyn Khenkin
按鈕應該是用得最多的元素了。按鈕能讓用戶在對系統發出指令后得到恰當的反饋。用戶通過按鈕對系統下命令，跟系統進行交互從而實現他們某個目標，比如發送郵件，買一個東西，下載文件，播放音樂等等這樣的指令。按鈕之所以那么的常用和對用戶那么友好，是因為按鈕很好地模仿了人和真實世界里跟物品的交互。
現如今的UI按鈕有不計其數的設計樣式，能滿足很多的設計需求。按鈕典型的用途是表明這個地方是可點擊，因此需要具有非常高的視覺識別，有著特定的形狀還有文字說明它能實現什么動作。設計師通常需要花不少時間好好考慮怎么讓按鈕很好地融合界面的風格，同時又能在視覺上跳脫出來。
△ 作者：Ernest Asanov
以下是在APP和網頁設計中常用的幾種具備附加功能的按鈕。
漢堡按鈕
漢堡按鈕隱藏著一個菜單。當用戶點擊他們的時候，能把菜單調出來。有這個名字是因為它是由三條水平線組成的，看起來就像是漢堡的形式。它是一個典型的交互元素，也是頗具爭議的元素。
大多數用戶知道點擊這個按鈕能展開一個菜單，所以不需要額外的說明。漢堡菜單極大地節省了界面的空間，能讓界面看起來更簡潔，也為其他重要的界面元素騰出了必要的空間。它同時非常適合響應式設計，通過隱藏菜單讓整個設計更統一，界面能在不同設備間保持一致。盡管它因為一些缺點而飽受爭議，但因為這極大的好處，它目前仍然被廣泛的使用。關于這個元素的主要詬病是，對于一些對界面不太熟悉的用戶來說，這個比較抽象的設計元素可能會讓他們產生困惑。所以，在決定使用漢堡菜單前，應該調查一下目標用戶的接受程度和他們的需求。
△ 作者：Ernest Asanov
上圖這個概念設計就是用了漢堡按鈕把菜單隱藏了起來，從而實現一個簡潔的頁面布局和視覺效果。
加號按鈕（Plus button）
一般通過這個按鈕，用戶可以實現添加某個內容的動作，比如添加新的聯系人，狀態，筆記，位置等所有用戶在產品里能做的基本動作。有時候，點擊這個按鈕會出現新的窗口。有時候還會出現一些選項供用戶進行選擇添加什么內容，這取決于是什么產品。
△ 作者：Sergey Valiukh
上面這個例子就是用戶在點擊加號按鈕后出現了可以選擇添加的內容（圖片，視頻，文字），在選擇了之后才會彈出添加內容的窗口。盡管這個操作可能增加一些額外的交互動作，但因為給予了用戶選擇空間，所以還是對用戶很友好的一種設計。
分享按鈕（Share Button）
分享按鈕顧名思義就是能讓用戶把內容分享到他們的社交平臺賬號上。大多數情況下，這個按鈕都是用社交平臺的Logo作為視覺形象，這樣非常易于識別和認知。
同樣，這也是一個用戶非常好理解的元素，在界面中用得也非常多。因為它很好地模仿了現實世界里人們熟悉的開關概念。關于這個元素的設計，特別要注意的是開和關的狀態在視覺上要差別非常明顯。這樣能避免用戶花時間去研究怎樣是開怎樣是關。很多種的形式對比或者切換動畫都可以解決這個問題，從而設計出很好的用戶體驗。
△ 來源：Tubikstudio
這個案例是來自一款鬧鐘應用Toonie。動畫效果讓交互變得更流暢和自然，同時整個控件顏色的改變和滑動元素形態的變化讓用戶能夠輕易地識別出開關的狀態。如果你想了解整個App的案例研究，可以到來源查看。
也很好理解，就是讓用戶在一些選項里選出目標選項。通常包含一個可滑動的列表，上面是一列數值，比如小時，分鐘，日期，度量，幣種等等。通過滑動列表，用戶可以選定想要的數值。這個元素廣泛地應用在有時間設定這個功能的界面設計上。
△ 來源：Tubikstudio
復選框是可以用來同時標記多個特定的內容。同樣的，也是借用了我們在現實世界里熟悉的概念。我們在考試的時候，或者填調查問卷的時候會在選項前的小方框里涂上顏色作為選中的標記。和開關一樣，復選框同樣用得很多，主要在設置頁面設計里。不過，復選框還有另外一個用得比較多的地方，那就是含有任務管理，待辦事項，時間記錄等類似功能的App或者網頁。
△ 作者：Tubik
上面這個是一個待辦事項App的概念設計。用戶點擊復選框后，表示這個內容已經完成。字體變粗的同時顏色發生了改變，這樣就非常明顯地把這個已完成的任務和其他未完成的任務區分開來。
界面的導航（Navigation）是用戶體驗設計的核心之一。毫無疑問，如果你看不到路, 你就去不了你的目的地。用戶現在正面對著越來越多的網站和APP產品。越來越多的選擇會讓用戶期望這些產品具備符合他們使用習慣的導航設計。
圖標可以定義為一個象征著某個概念或物體的視覺形象，有著加強與受眾溝通的目的。會和文字結合一起使用，將想要傳達給受眾的信息表現出來。在界面設計中，圖標通常是象形符號或表意文字，對可用性和成功的人機交互有重要意義 。
毫無疑問，圖標的其中一個重要作用是可以有效地替代文字描述。因為比起文字，用戶對圖片的理解速度更快，所以這個特點能極大提升用戶體驗，增強產品的導航和對用戶的引導。但是，需要注意，即使是輕微的歧義或者誤解都會導致糟糕的用戶體驗。所以在設計圖標的時候要做必要的測試，根據目標用戶平衡好文字和圖標的使用。最有效的方式是同時使用圖標和文字，這樣大部分用戶都不會有問題。電商APP或者網站最常使用這樣的形式來給用戶足夠的信息，讓他們能輕松快速地瀏覽。
△ 作者：Tubik
根據圖標的功能，我們可以將它們分為一下幾類：
交互式圖標（interactive icons）
這類圖標具備交互功能。他們是可點擊的，能回應用戶的要求，觸發圖標代表的動作。這種圖標告知用戶按鈕、控件或者其他界面交互元素的功能或者特點。在大多數情況下，這類圖標的意義明確，不需要文字輔助說明。
△ Tab Bar
△ 菜單概念設計
說明性圖標（clarifying icons）
起到說明作用的圖標，設計師用它來表示某一個特點或者內容的種類。它有時候不屬于界面布局的元素或者并不具備直接的交互功能。經常和文字結合使用。
△ 作者：Tubik
△ 作者：Ernest Asanov
娛樂性和裝飾性圖標（entertaining and decorative icons）
這類圖標注重抓人眼球的視覺效果并非功能，通常用在節日或者特別款的場景。他們能有效地吸引用戶的注意力，增強視覺沖擊力。
復活節和春天主題的圖標：
△ 圖片作者：Arthur Avakyan
APP圖標（app icons）
在各個平臺上可交互的品牌標志，展示品牌和產品的形象。最常見的就是我們手機界面上每一個App的圖標，上面通常是品牌和產品的Logo。
△ 作者：Arthur Avakyan
網頁圖標（favicons）
就是我們經常在網址欄或者書簽里看到的URL前面的那個小圖標，也是代表著產品或者品牌的形象。能讓用戶在瀏覽網頁時給他們快速的視覺提示。
搜索區域又常常被稱作搜索框（search box）或者搜索條（search bar），代表著用戶可以在這個區域內輸入想要搜索的內容。它是那些有著很多內容的網站或APP的核心導航元素，像博客，電商，新聞等產品。設計得好的搜索框能讓用戶輕松地找到想要的信息。因為它能幫助用戶省去很多時間和精力，所以它是一個對用戶特別友好的界面元素。
它的設計形式有很多種，可以是標簽的形態，也可以是引導輸入的一條線或者簡單的一個搜索圖標。大多數情況下搜索框的圖標是一個放大鏡的樣式?；旧纤械挠脩舳级眠@個圖標的含義，所以能實現非常直觀的導航設計。想要在這個圖標上做文章的話，要好好測試一下，因為改得不好的話會嚴重影響交互和界面的可用性。搜索框還可以加入提供候選項的下拉菜單或者自動填補內容的功能。
△ 作者：Ernest Asanov
另外需要注意的一點是搜索框控件在界面中的位置。在網頁設計中，搜索框經常出現在網頁的頂部。這是一個很恰當的設計，因為通常網頁的頂部區域具有很高的可見性，用戶打開網頁就看到了，不需要再花時間去找到這個控件。舉個反面例子，如果一個電商網站因為搜索框的設計有問題，導致用戶沒辦法快速方便地找到想買的東西，網站銷售表現會受到極大的影響。因為現在很多網站都將搜索框放在網頁的頂部，所以用戶也養成了在那里找到搜索框的習慣。
至于App界面的話，要視具體情況而定，設計師可能面臨更多的限制。如果是一個有著大量內容的APP，而且搜索是核心功能之一的話，那么一般放在一個顯眼的標簽條（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜單里或者只在需要的用到的地方顯示或者時刻顯示出來。
△ 作者：Sergey Valiukh
標簽是一個標有關鍵詞的可交互元素。標簽其實是給用戶提供快速通道的元數據，用戶可以通過它快速導航到與關鍵詞相關的所有內容。除了網頁或者App本身帶有的標簽，在很多情況下用戶也可以自己創建標簽。
△ 作者：Design4users
標簽這個界面元素被廣泛地應用在用戶原創內容平臺（UGC）的界面設計里。當用戶上傳圖片、狀態到社交網絡的時候，可以加上關鍵詞作為標簽。上圖就展示博客網站Design4Users運用了標簽來加強網站的內容導航。通過點擊某個標簽，能切換到帶著這個標簽的所有內容的頁面。標簽是友好的搜索引擎優化（SEO-friendly）技巧，能提高用戶搜索內容的成功率。
△ 作者：Unsplash
再舉一個例子，上圖是圖片素材網站Unsplash的界面。當用戶想要下載圖片時，可以輸入描述圖片的關鍵詞作為標簽。通過這樣的形式幫助用戶有效地找到想要的圖片。我們還可以注意到，輸入框內加入了引導用戶進行操作的說明，這樣更進一步地提高了產品的可用性。設計的細節真的很重要。總而言之，標簽是一種用戶可以自行創造的導航元素，拉近了界面和目標用戶之間的距離。
全面地設計好整個界面的導航不是一件容易的事，需要一些心理學、交互模式、用戶測試的基礎知識，還需要在項目的早期思考清楚網站或者App的信息架構。但是做好這一點的話，能夠讓你的產品很好地幫助用戶解決他們的問題，給優秀的用戶體驗打下堅實的基礎，讓他們對你的產品產生越來越大的粘性。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
Z Yuhan：對于手機端的表格設計，本文將為你提供了一些思考方向，希望能夠帶給你啟發。
表格似乎和移動設備很難融合，強行貼上還真有些毀三觀。即便是想方設法地避免，也總會有這樣那樣的原因，而不得不同時面對它們的時候。
其實有很多方法可以優化手機端的表格，但是可能不一定每一種都適合你遇到的情況，所以我整理了一套循序漸進的處理方法。
假設你在設計一款類似微信聊天群的功能，PM給你一張「成員信息表」，并要求你把它放在群成員管理界面上。這張表格里的信息的排列方式也許非常隨便，看起來讓人摸不著頭腦。
△ 組員信息表
首先你需要弄清楚這張表格擺出來的意義是什么。假設這張表格是為了「讓群主查看并管理成員」，那么你就能分析得出：
按照重要程度擺放各信息，并合理排序后，表格看起來就更好理解了：
△ 整理后的組員信息表
如果你的情況不允許對表格對形式進行變動，那么可能就真的要用手機端展示表格了。
在確保文字能夠看清的情況下，表格很有可能橫向展示不全，所以滑動難以避免。以下兩點可以優化表格的滑動體驗：
這樣，復雜的表格至少能夠從表面上融入手機界面了：
再仔細看看這張表格，即便不做大的調整，還是有很多地方可以通過微調來改善體驗：
優化后，表格看起來更簡單了：
手機的窄屏對于表格來說總不是最佳選擇，所以如果可能的話，還是避免使用這種形式。
一個人在同一時間的注意力是有限的，大多數情況并不需要像傳統印刷品那樣，完整列出所有信息。重新思考真實的使用場景和用戶心理，你會發現并不需要一次性把所有東西都扔出來。
如果你想要像微信那樣，用頭像+昵稱這種形式，也許很容易被給你表格的人反駁：
你可以篩選出相對有用的信息提供給用戶，并用更有意義的方式整理出來：
于是原本臃腫的表格可以被整合重新設計成完全不一樣的輕便形式：
本文提供了一些思考方向希望能夠帶給你啟發，以后遇到類似問題，不要老老實實地把表格原封不動地貼到手機上了。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
滴滴出行在 iPhone X 發售前就針對其操作特性進行了界面適配，保障了 iPhone X 用戶的全面屏操作?，F在 iPhone X 的適配結果已經得到了良好的用戶反饋，由此我們梳理了移動端界面 iPhone X 的適配方案，并從整個適配過程中探索到萬變不離其宗的適配方法，為后續不斷更新的多尺寸屏幕提供更好更快的適配思路。
iPhone X 是蘋果公司十周年推出的重點產品，無論外觀還是技術都有著革命性的創新。讓我們先來回顧下 iPhone X 在界面使用體驗上都有哪些操作特性。
如果你對 iPhone X 還不夠了解，可以看看這些 ：
1. 屏幕變長
因大部分設計師都用 iPhone 8 來做設計稿，所以我們用 iPhone 8 與 iPhone X 做對比。
iPhone 6、iPhone 6s、iPhone 7 與 iPhone 8 屏幕分辨率一致。
iPhone X 使用了 5.8 英寸高分辨率、大圓角顯示屏。iPhone X 與 iPhone 8 的顯示屏寬度一致都是 375pt ，高度上 iPhone X 高出 145pt，可以在垂直空間多展示約 20% 的畫面。
iPhone X 的屏幕分辨率和 iPhone 8 Plus 等相同，使用 @3x 的圖像，界面內容由手機硬件遮罩成帶圓角和傳感器（頂部齊劉海）的形狀。所以界面設計時 iPhone X 和 iPhone 8 的設計寬度可以通用 375pt，而實際 iPhone X 的屏幕像素為 375pt×812pt (1125×2436px)，且切圖使用 @3x 圖片。
喬布斯曾說，手持設備最理想的屏幕尺寸是3.5寸，這是因為單手操作時3.5寸屏幕基本能做到大拇指無障礙全覆蓋。但隨著人們對手機功能多樣化的需求，主流屏幕遠大于3.5寸。
iPhone X 是 5.8 寸，屏幕已經超越了絕大多數用戶的拇指覆蓋范圍，這就導致左上和右下角的單手操作不夠方便。很多基于 F 型流動視線設計的 App，通常會將重要的功能入口置于左上角，在 iPhone X 上，視線優先和拇指操作未必可以同時滿足，這就要求設計師們對操作盲區的功能進行多重考量，評估是否要針對 iPhone X 做出位置調整。
2. 異形狀態欄（齊劉海）
iPhone 8 屏幕狀態欄高 20pt，iPhone X 狀態欄高 44pt 并有齊劉海形狀遮罩。狀態欄位置顯示的信息，在 iPhone X 上受齊劉海遮罩影響，需要特殊考慮展示效果，甚至重新設計信息展示方式避讓狀態欄，以便保持各屏幕展示效果的統一。
蘋果官方不建議采用隱藏或遮擋狀態欄的設計，相對 iPhone 8 ，iPhone X 有更高的縱向顯示空間足夠展示更多的內容，且狀態欄顯示了對用戶有用的信息，除非隱藏狀態欄能帶來更大的收益，否則還是建議保留。
3. 增加主屏幕指示條
iPhone X 屏幕最底部設置了主屏幕指示條，用戶可從屏幕底端使用滑動手勢進入主屏幕或切換應用。這些系統的全局操作會優先于App應用的操作。在設計用戶沉浸式的產品如視頻、游戲時，可以適當的隱藏主屏幕指示條。
主屏幕指示條下方的內容仍是可點擊操作的，但要避免在屏幕最底部設置重要操作內容，且要避免使用與指示條相沖突的操作手勢。主屏幕指示條只有黑白兩種顏色，會根據指示條底部背景自動切換。
4. 設置安全區
從 iOS 11 開始，蘋果引入了安全區域的概念。在 iPhone 8 等屏幕上，安全區域默認是除了狀態欄以外的屏幕范圍。在 iPhone X 上，安全區域默認是除去頂部狀態欄以及底部主屏幕指示條周邊的范圍。
遵照系統安全區的概念進行設計和開發，大多數使用系統標準UI元素（如導航欄、表單、內容集）的應用程序會自動適應設備的新外形，不需手動調整，這樣會大量節省開發人員的工作量。所以在這里提倡大家遵照系統提倡的方式進行開發布局，不僅方便 iPhone X 的適配工作，也方便后續 iOS 系統更新以及界面元素的自動匹配。
固定在屏幕上展示的內容應始終在安全區域內，如頂導、底部tab欄等。垂直滾動的內容，如列表，圖片流，需要一直延伸到底部，也就是會在安全區之外展示，這樣才能確保提供全面屏操作體驗。
正是因為 iPhone X 有著許多操作特性，我們的設計方案必須針對 iPhone X 進行適配。以下是針對常見界面元素整理的通用適配規則。
1. 吸頂元素
對于吸頂元素的適配原則是：避讓狀態欄，內容區吸附于安全區頂部，狀態欄背景顏色根據吸頂元素進行調整。
2. 吸底元素
吸底元素的適配原則是：內容平移至安全區底部，界面背景層元素（界面背景色、背景圖片、全屏地圖等）充滿屏幕，主屏幕指示條下方區域與吸底元素顏色協調。
3. 信息流
信息流從主屏幕指示條下方穿過，撐滿屏幕顯示，滑動瀏覽信息不受影響。主屏幕指示條下方內容仍可點擊，此區域滑動手勢優先觸發系統操作。信息流最底部內容要保障在安全區內。
4. 全屏元素
全屏元素多為圖片、視頻、游戲畫面、全屏地圖等信息，適配規則是：全屏元素在 iPhone X 上仍要保持充滿屏幕的狀態，要保證圖像信息比例正確不變形，并接受硬件傳感器齊劉海和圓角遮罩。
因 iPhone X 與 iPhone 8 Plus 都使用@3x圖片，所以開屏圖片不做單獨適配的話可以調取 iPhone 8 Plus 圖片裁剪使用。
5. 左右布局元素
最典型的左右布局就是抽屜導航，抽屜拉出后，如果信息卡片和主屏幕指示條交錯疊加，就會稍顯信息混亂，建議抽屜導航的寬度根據主屏幕指示條的位置進行調整，完整露出或完全遮擋指示條。
6. 居中元素
居中元素在適配中的影響較小，對話框、Toast 提示等均不需單獨適配。
以上的適配規則基本可以滿足所有場景的基礎適配需求。當然還有很多特殊場景，不需要特意保持 iPhone 8 和 iPhone X 展現效果的一致性，這種情況就需要單獨設計方案，不是通用規則能滿足的了。
滴滴出行針對內部產品做了一套適配指南，幾十頁滿滿的適配方案說明，盡可能詳盡的將普適規則與特殊規則運用場景舉例說明。設計平臺將此適配指南發放到各業務部門，由業務方產出自己各功能場景下的適配方案。
在此過程中我們發現，即使規則已經很詳盡，Webapp、H5頁面等多場景下仍有一些不清楚如何適配，或不能通用適配規則的情況，需要設計平臺持續跟進，講解規則走查適配效果。
造成這種情況的原因大多是因為界面設計的時候沒有充分考慮其后期延展，導致多屏幕下不能保持統一樣式，無法通用適配規則。這讓我們開始思考如何設計界面才能包容多屏幕的展現。
設備屏幕在不斷更新，適配需求就是持續的無盡的，iPhone 從 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不斷在變化，甚至屏幕的形狀邊界也在變化，更不用說安卓系統各種各樣的屏幕尺寸及屏幕形狀。例如，夏普AQUOS S2。
設計界面時，如果對市面的主流屏幕挨個設計是有極其高的時間成本的，那怎么才能讓適配更從容，不必緊張的跟隨手機廠商的發售腳步？是否有提高適配效率的方法？適配可否是一勞永逸的？需要適配的元素有沒有一些共性……
帶著這些問題不斷的思考總結，我們形成了一套自己的設計理念，能夠讓適配這件事情以一抵百，萬變不離其宗，這就是「去邊界化」設計。
「去邊界化」設計，是指在設計之初把邊界限制去掉，定義好界面元素的特性及層級關系后，再套用到屏幕邊框之中。與常規設計的區別在于，讓內容成為獨立且完整的組合體，再根據設定好的變化規則組合到不同的邊界中去。這樣保障了內容的最大適用程度，且保障各屏幕展示規則的統一性。
目前我們最常做還是手機界面，未來VR、AR 成熟起來，我們所設計的界面就會更大，甚至會大到無形。運用「去邊界化」設計，可以讓我們更好的適應未來。
另外回到手機界面，我們完成一個設計方案后，也可以運用“去邊界化”的方式檢查界面元素是否在多屏幕適配上存在問題，減少不必要的適配工作量。
其大無外，其小無內，在界面設計上，我們也需要突破界限，精益求精，讓每一個元素都豐富而完整。
1. 定義元素特性
這里的元素特性，除了元素本身的基礎功能及操作方式外，從三個角度進行思考，延展性、吸附性、流動性。
這里我們以同倍率，不同尺寸的屏幕適配為例，省略倍率換算方便我們更簡單的了解「去邊界化」設計。
如下圖中，圖片、卡片、背景、列表、按鈕 等元素可隨著屏幕進行延展變化，而icon、文字等為固定大小不會隨著屏幕進行變化。
延展變化又可分為：等比延展、橫向延展、全部延展。
通常圖片、視頻元素使用等比延展，保障畫面比例統一不變形；列表、按鈕 等多采用橫向延展，信息量不變高度無需變化；卡片、背景等多根據其承載信息和屏幕背景尺寸進行調整，長寬均跟隨變化。
如下圖，button 吸附于界面（或安全區）底部，適配到其它屏幕依然保持與界面（或安全區）底部的吸附性。而下圖中的toast 提示為界面居中元素，也就是它的吸附性就是界面的中心，適配到其它屏幕仍保持這一吸附屬性。
針對流動性的元素主要是定義其容器的延展性和吸附性，流動元素本身大小不變，位置形態上跟隨容器進行變化。當然還要考慮元素過多超出容器后的顯示方案，是被截斷還是省略等等。
如下圖，文字圖片流在信息容器內進行流動展示。
2. 組織信息結構
從平面維度思考元素關系可以理解為元素間的吸附性，但界面元素不總是在同一個平面上，App 界面通常分為 背景層 、內容層 、操作層 、狀態層 ，這些層級在高度上是相互疊加的。
決定元素層級的因素主要是其表達內容的主次關系，重要而緊急元素在最上方，不重要不緊急的元素在最下方。將界面從平面維度填充為立體維度讓產品功能更豐富，更貼近人們真實的立體世界，也就更符合用戶的認知和操作邏輯。
無論界面的邊界如何變化，元素間的層級結構一旦定下是不會隨邊界變化而改變的。建立元素的縱向層級關系，便于在不同場景保持統一的元素優先級。
在「去邊界化」設計中，除了元素自身特性（延展性、吸附性、流動性）清晰，元素間的組合層級關系必須排布合理、邏輯清晰，才能讓整個產品層級統一，多屏幕展現層級統一。
3. 元素組件化
我們有講到界面中所有的元素都不是獨立的，有時某幾個元素組合表達同一個功能，關系非常緊密，甚至可以捆綁移動，我們把這些功能密切相關的元素進行封裝，看做一個完整的大元素，這就是我們常說的組件。
組件化的特點就是詳盡每個元素的操作反饋、延展方案、顯示容器、極限情況等等場景，然后定義元素與元素之間的吸附關系，操作聯動，使其成為一個完整的操作場景。
說到組件化設計，這有一篇必看好文：《進階必讀！可能是最全面的組件化開發與設計指南》。
組件還可以根據功能需求與其它元素自由組合，使得組件可以不斷復用，大大提升設計效率，及適配效率。
組件化的意義有很多，可以方便設計元素的復用，方便開發組件的復用，減少代碼及元素冗余，方便設計方案的修改等等。橫向組件化之于「去邊界化」設計，主要是在確立了元素特性及層級關系后，以整合元素成為組件的方式提升設計及適配效率。
以上就是「去邊界化」設計理念，包括定義元素三大特性：延展性、吸附性、流動性，然后確定信息的橫縱向層級關系，橫向功能關系緊密的元素可進行組件化處理。這樣整個界面的元素都是層級清晰且不依靠邊界的，這時再給界面套用一個屏幕邊框就非常有依據了，且能保障所有適配界面具有統一性。
梳理清楚設計理念之后，還需要將上述原則梳理形成設計規范，同步至團隊所有成員，以達到團隊共識保障最終的效果呈現。
4. 制定設計規范
以規矩為方圓則成，以尺寸量長短則得，設計規范可以幫助設計師快速認知元素特性及使用規則，工作中快速復用通用元素，提升設計效率，且可以通過規范說明對新功能尋求設計指導和參考。
規范的貫徹執行，可以保持產品設計語言與品牌形象的統一，保障在不斷更新迭代中產品體驗不走樣。統一的使用體驗可以保障用戶流暢的使用產品，快速識別產品功能，簡單高效進行操作。此外通過規范說明，可以實現開發人員與設計師的高效溝通，另外，將組件開發形成設計組件庫，可以提升開發效率，方便代碼的復用。
在「去邊界化」的設計理念中設計規范也是不可缺少的環節，把定義好的元素特性和確定的組織結構總結成設計規范，是把理論層面上的探索轉換成實踐指導。
以上就是完整的「去邊界化」設計理念在實際工作中的應用：從定義應用中元素的延展性、吸附性和流動性，到把零散的信息元素組成橫向、縱向有序的結構，并把上述特性和結構形成設計規范在設計、開發團隊中應用推廣。
從蘋果發布會開始，滴滴設計團隊內部就開始進行著iPhone X的適配工作。了解iPhone X的操作特性、探究滴滴出行應用的適配規范、上線后跟蹤反饋等，適配只是一個很小的工作需求，但也可以做的很大，做的很多，我們希望抱著這種極致執行的態度做好每一件事情。
從這次的適配工作中我們不僅看到了 iPhone X ，還看到了未來不斷會出現的新產品、新系統等，我們不滿足于一次次被動的適配，更希望可以主動的應對變化，所以我們摸索出了「去邊界化」設計理念，希望這個理念能對大家的設計工作有所啟發，讓我們為未來做好準備。
轉載請注明：優設網
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
更多精彩文章：
手機及小程序界面設計之一：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之六：讓設計更有說服力的20條經典原則：菲茨定律
手機及小程序界面設計之八：如何適配iPhone X？來看滴滴出行的實戰案例復盤！
藍藍設計的小編 http://www.syprn.cn
