藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
Hi，我是彩云。咱們平時(shí)在做 UI 組件庫的時(shí)候，會(huì)遇到一個(gè)問題，定義了很多顏色但在團(tuán)隊(duì)合作的時(shí)候，卻依然還是會(huì)根據(jù)每個(gè)設(shè)計(jì)師自己的喜好來配色，很難將顏色規(guī)范很好的統(tǒng)一起來。這其中有一個(gè)很嚴(yán)重的問題就是對(duì)于顏色的命名和管理不夠清晰，那么今天這篇文章通過一個(gè)國外大廠真實(shí)的顏色組件升級(jí)案例，希望能幫你解決這個(gè)難題。
我們花了幾個(gè)月的時(shí)間改進(jìn)了設(shè)計(jì)系統(tǒng) Cobalt 中顏色的處理方式。顏色是 UI 的基本元素：它們構(gòu)成視覺語言，幫助定義品牌，并被開發(fā)和設(shè)計(jì)師每天用在產(chǎn)品設(shè)計(jì)中。
但如果我們?cè)谑褂妙伾蠜]有明確的指導(dǎo)原則，顏色被團(tuán)隊(duì)中的設(shè)計(jì)師按喜好使用時(shí)，將會(huì)導(dǎo)致產(chǎn)品看起來非?；靵y。
我們 APP 中的不一致例子
接下來我會(huì)告訴你，我們是如何做好顏色規(guī)范以及在整個(gè)項(xiàng)目中面臨的挑戰(zhàn)，正如你將看到的，這個(gè)項(xiàng)目并不像看上去那么簡單：
1. 在設(shè)計(jì)方面
和許多設(shè)計(jì)團(tuán)隊(duì)一樣，我們使用 Figma 作為我們的主要設(shè)計(jì)工具。我們的顏色被放在“基礎(chǔ)”庫中，可以在其中找到我們?cè)诋a(chǎn)品中使用的所有常見樣式，例如字體樣式、顏色、圖標(biāo)等。這個(gè)庫提供了我們每天使用的專用系統(tǒng)庫（iOS、Android、Web、電子郵件）。
顏色名稱過去是基于它們的外觀。例如：紫色顏色是我們的主要顏色，而石墨色是基本文本的常規(guī)顏色。
2. 在技術(shù)方面
在我們的 APP 中，曾經(jīng)會(huì)用相同的系統(tǒng)來管理顏色。此外，還有一些語義顏色，但僅限于 iOS，開發(fā)用的也不多。
在使用這個(gè)系統(tǒng)時(shí)，團(tuán)隊(duì)反復(fù)面臨同樣的問題：
讓我們?cè)囍页鑫覀兪侨绾蜗萑脒@種境地的？
1）沒有明確的顏色使用規(guī)范
所有設(shè)計(jì)師都使用相同的色板，但自 2019 年 Getaround 品牌重塑以來，除了引入不一致之外，沒有明確關(guān)于如何使用它們的規(guī)范，所以設(shè)計(jì)師在選擇顏色時(shí)迷失了方向。
然后他們將開始建立自己的參考資料，每個(gè)設(shè)計(jì)師都有不同的配色想法。
例如：設(shè)計(jì)師應(yīng)該在所有這些灰色陰影中為次級(jí)文本選擇哪種灰色？顏色命名在這里不是很有幫助
2）舊品牌的設(shè)計(jì)包袱
以前品牌的一些舊顏色仍在使用（按鈕上的藍(lán)色陰影，標(biāo)題……）。到現(xiàn)在也沒有真正的行動(dòng)計(jì)劃來迭代它們。
舊驅(qū)動(dòng)器品牌
在 2021 年初，我們有機(jī)會(huì)為我們的 iOS 和 Android APP 來制定長期的 UI 規(guī)劃。
我們問自己“5 年后我們的 APP 會(huì)是什么樣的？”。我們會(huì)回顧，Getaround 品牌是如何成為我們視覺方法中心的。
以上是我們品牌和設(shè)計(jì)團(tuán)隊(duì)在 2020 年完成的全面工作的一小部分
致力于設(shè)計(jì)系統(tǒng)的 Cobalt 團(tuán)隊(duì)借此機(jī)會(huì)重新考慮了顏色系統(tǒng)。然而，為了使這一目標(biāo)成為現(xiàn)實(shí)，我們面臨著一些挑戰(zhàn)：
1）制定指導(dǎo)原則
我們?nèi)绾未_保每個(gè)設(shè)計(jì)師都可以依賴易于理解和使用色彩系統(tǒng)？擁有一個(gè)簡單系統(tǒng)將加快使用速度。
2）顏色能通過可用性標(biāo)準(zhǔn)
我們?nèi)绾未_保從一開始就設(shè)計(jì)出易于使用的顏色？
3）易于維護(hù)并符合未來趨勢
我們?nèi)绾尾拍苁瓜到y(tǒng)易于維護(hù)并符合現(xiàn)在和未來的行業(yè)標(biāo)準(zhǔn)（例如：暗模式）
在我們的探索階段，在 Figma 的共享環(huán)境中工作促使我們保存和記錄我們所做的設(shè)計(jì)決策。就像我們應(yīng)該如何命名我們的強(qiáng)調(diào)色：（主要？強(qiáng)調(diào)？）
我們還測試了 APP 界面在黑暗模式下的外觀，以及如何正確支持這一點(diǎn)。我們應(yīng)該創(chuàng)建一個(gè)單獨(dú)的調(diào)色板還是為每個(gè)組件都創(chuàng)建一個(gè)深色版本？我們開始與開發(fā)討論這個(gè)問題，以了解他們有什么解決方案來處理這些問題。
語義顏色的概念很快就被開發(fā)人員提出來，因?yàn)樗麄冎啦⑶液芎玫厥褂昧诉@個(gè)概念。但對(duì)于設(shè)計(jì)師來說，又要如何準(zhǔn)確理解呢？
1）什么是語義顏色？
語義指的是根據(jù)顏色的使用方式而不是色調(diào)來命名顏色的方法。
例如，你可以將顏色命名為“成功”或“積極”，因?yàn)樗傅氖呛x，而不是“綠色”或“翡翠綠”。
甚至可以根據(jù)顏色在屏幕上的應(yīng)用方式來命名顏色，例如背景顏色、按鈕背景顏色、文本顏色、圖標(biāo)顏色等……
2）從基于外觀的配色方案到基于語義的配色方案
語義顏色并不新鮮，越來越多的產(chǎn)品開始采用這種方式來定義顏色。我們可以從下面一些大廠的顏色規(guī)范來學(xué)習(xí)
google： https://material.io/design/color/the-color-system.html#color-theme-creation
Apple： https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color
Shopify： https://polaris.shopify.com/design/colors#navigation
Asana： https://asana.com/brand
顯然，這種顏色系統(tǒng)有很多優(yōu)點(diǎn)。因此，現(xiàn)在讓我解釋一下我們?nèi)绾卧趯?shí)踐中將這個(gè)概念應(yīng)用到我們的產(chǎn)品中。
3）深入研究語義顏色
我們的新顏色系統(tǒng)由兩部分組成：
基礎(chǔ)調(diào)色板
我們與品牌團(tuán)隊(duì)密切合作，他們定義了一個(gè)全新的品牌，我們?cè)诠ぷ鲿r(shí)會(huì)圍繞這個(gè)品牌考慮。
該品牌的每種顏色都采用多種色調(diào)進(jìn)行調(diào)整，以創(chuàng)造更大的靈活性，一次構(gòu)建成為基礎(chǔ)調(diào)色板。它代表可以在產(chǎn)品中顯示的所有可能顏色。團(tuán)隊(duì)可能不會(huì)全部使用它們，但他們會(huì)選擇在產(chǎn)品中效果最好的那些。
基礎(chǔ)調(diào)色板
語義顏色，語義顏色建立在用作參考的基礎(chǔ)調(diào)色板之上。正如我之前解釋的，命名不再是指顏色的“外觀”（洋紅色、棕色、綠色……），而是指UI 元素它們被應(yīng)用于（文本、圖標(biāo)、按鈕、背景……）以及該元素的狀態(tài)（活動(dòng)、非活動(dòng)、成功……）。
請(qǐng)參閱此處的命名法和一些示例：
語義顏色結(jié)構(gòu)和示例
這意味著來自基礎(chǔ)調(diào)色板的顏色可以用于多種語義顏色：
這就是我們根據(jù)這個(gè)新原則重新調(diào)整顏色命名的方式：
我們通過設(shè)計(jì)師和開發(fā)進(jìn)行了內(nèi)部用戶測試，以確定命名語義顏色的最佳方式。
我們嘗試了很多不同的命名方法，發(fā)現(xiàn)過于詳細(xì)的命名系統(tǒng)對(duì)于我們的團(tuán)隊(duì)和產(chǎn)品的規(guī)模來說維護(hù)和使用太復(fù)雜了。我們決定做一些簡單的維護(hù)，同時(shí)在命名方面有足夠的延展性。
1）語義色彩嵌入設(shè)計(jì)原則
語義顏色側(cè)重于顏色的用途。它消除了設(shè)計(jì)師和開發(fā)對(duì)使用什么顏色的盲目猜測，因?yàn)橐曈X語言直接傳達(dá)了設(shè)計(jì)決策。
例如：在這里，顏色命名使設(shè)計(jì)師更容易做出正確的選擇。在我們的原則中， *Accent* state 用于交互元素。
2）解鎖黑暗模式
語義顏色可以適應(yīng)不同的主題。語義顏色的名稱始終相同，但它的外觀可能會(huì)根據(jù)所選模式而改變。例如，語義顏色“主背景”可以指淺模式下的“白色”和深色模式下的“黑色 500”。根據(jù)用戶選擇的模式，將自動(dòng)顯示正確的顏色。這對(duì)我們的設(shè)計(jì)系統(tǒng)來說是一個(gè)真正的游戲規(guī)則改變者，因?yàn)樗鼘⑹顾用嫦蛭磥怼?
明暗模式下的語義顏色 Primary.Background
3）語義顏色高效靈活
如果我們將來要更新顏色，使用語義顏色也會(huì)變得更容易。假設(shè)我們想要將我們的主色更改為藍(lán)色。我們只需要將基礎(chǔ)調(diào)色板中的“紫色”更新為“藍(lán)色”。與該顏色相關(guān)的所有語義顏色也將神奇地更新。
另一種情況可能是更新特定 UI 元素的顏色，例如按鈕，而無需觸摸使用紫色顏色的其他元素。在這種情況下，我們只需要更新 ButtonBackground.Primary 顏色，非常簡單。
如果沒有該系統(tǒng)，更新顏色將需要經(jīng)過大量 QA 以確保將更改應(yīng)用到任何地方。
4）顏色組合指南
這個(gè)系統(tǒng)似乎很容易使用，但設(shè)計(jì)師仍然有一些問題：
為了幫助設(shè)計(jì)師選擇顏色，我們創(chuàng)建了一個(gè)交互式指南，列出了所有可能的顏色組合。
我們?cè)?figma 原型中創(chuàng)建了這個(gè)指導(dǎo)原則，每次更改設(shè)計(jì)系統(tǒng)顏色時(shí)都會(huì)更新該規(guī)范。它突出了允許的語義顏色組合，以最大限度地保持一致性。
Figma 中內(nèi)置的語義色彩交互指南
采用這種新的顏色系統(tǒng)產(chǎn)生了一些變化：
1）我們從“Foundation”庫中提取顏色，并將它們分為深色和淺色模式。這一舉措使我們能夠使用 Figma 開關(guān)功能輕松地將設(shè)計(jì)文件從 Light 切換到 Dark 模式。這也使庫更輕且更易于維護(hù)。
2）語義顏色已在我們的 iOS 和 Android 應(yīng)用程序上成功實(shí)現(xiàn)，我們現(xiàn)在正在努力在我們網(wǎng)絡(luò)平臺(tái)上使用相同的系統(tǒng)。我們很快就會(huì)有一個(gè)集中的配色方案來處理所有系統(tǒng)上的顏色。
總結(jié)下今天學(xué)到的內(nèi)容：
1）發(fā)現(xiàn)并準(zhǔn)確描述團(tuán)隊(duì)在使用顏色時(shí)遇到的問題
2）如何從提出設(shè)想，到以新的方式來定義顏色
3）如何通過語義化顏色來使得大家更方便的使用顏色，我們也可以在自己的組件庫中多使用語義化的顏色來進(jìn)行命名管理，這樣團(tuán)隊(duì)協(xié)作才會(huì)更加高效。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
快速迭代的產(chǎn)品存在著同質(zhì)化趨向，如何做出差異性？如何將品牌精神向外傳達(dá)？如何在有限的時(shí)間內(nèi)，滿足產(chǎn)品需求的同時(shí)帶給用戶更好的
體驗(yàn)感，進(jìn)而體現(xiàn)設(shè)計(jì)的價(jià)值呢？靜態(tài)畫面動(dòng)起來或許是個(gè)不錯(cuò)的選擇！
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
Hi，我是彩云。界面是用戶在與任何產(chǎn)品、APP 或平臺(tái)交互時(shí)看到的內(nèi)容，用戶體驗(yàn)就是建立在堅(jiān)實(shí)的界面設(shè)計(jì)基礎(chǔ)之上的。所以，如果你想要在 UI 設(shè)計(jì)上提升能力，應(yīng)該多去思考界面設(shè)計(jì)背后的原因。
今天會(huì)跟大家分享一些被廣泛運(yùn)用的界面設(shè)計(jì)規(guī)則，它們能快速使得你的界面設(shè)計(jì)更干凈、高效。
用更容易讓用戶理解（說人話）的引導(dǎo)文案，提升使用體驗(yàn)。
（彩云注：下面 2 個(gè)案例中，左側(cè)的“購物車”和“庫存 2”太過于術(shù)語化，右側(cè)的“僅剩 2”和“加入購物車”更加貼近用戶的日常理解。大家平時(shí)工作的時(shí)候，也一定要注意界面中的文案，尤其是說明文字，控件文字等等，這個(gè)點(diǎn)經(jīng)常容易被忽略。）
良好的對(duì)齊方式，可以增強(qiáng)內(nèi)容的可讀性，讓用戶的視線更容易掃描。
（彩云注：左側(cè)的“之”字形視動(dòng)線比較難閱讀，且不夠?qū)I(yè)；右側(cè)的垂直對(duì)齊增強(qiáng)了可讀性，也讓設(shè)計(jì)看起來更加統(tǒng)一，能夠快速的提升設(shè)計(jì)細(xì)節(jié)。）
使用圖標(biāo)、動(dòng)畫作為標(biāo)簽，有助于更輕松地理解內(nèi)容，它使界面看起來更加理性和豐富，能瞬間抓住用戶的眼球。
（彩云注：左側(cè)的導(dǎo)航相較于右邊，很難第一時(shí)間準(zhǔn)確識(shí)別它的意思，增加圖標(biāo)后不僅更快看清，視覺上也更加美觀。）
大段的長句會(huì)讓內(nèi)容變得難以閱讀。為了獲得好的體驗(yàn)和 UI，應(yīng)該注意拆分內(nèi)容，并使用項(xiàng)目符號(hào)突出關(guān)鍵點(diǎn)，利用拆分好的內(nèi)容塊讓用戶更快抓住重點(diǎn)。特別是在“功能說明和條款條件”或任何聲明時(shí)，提煉要點(diǎn)有助于提升用戶體驗(yàn)，這樣也不至于讓用戶直接忽略。
（彩云注：左側(cè)的大段文字我想應(yīng)該沒多少人會(huì)去閱讀，右邊的至少還能在短時(shí)間內(nèi)快速看看幾個(gè)關(guān)鍵詞。）
進(jìn)度條幫助用戶追蹤流程，它也能使查看上下步驟更加容易。線上購物，表單填寫，申請(qǐng)流程等場景使用這種格式能很好的簡化流程。
（彩云注：左邊的表單 UI 不方便跟蹤進(jìn)度和流程，右邊的表單把進(jìn)度放在頂部能幫助用戶清楚的知道流程進(jìn)度。）
錯(cuò)誤提示一定要明確，易于理解，方便用戶進(jìn)行下一步的操作。如果用戶不理解界面上出現(xiàn)的錯(cuò)誤，用戶就會(huì)感到很失望，可能會(huì)放棄接下來的流程。在 UI 設(shè)計(jì)時(shí)，在正確的地方用通俗的語言說明問題，以避免歧義，這一點(diǎn)非常重要。
（彩云注：我常常遇到各種出錯(cuò)，但出現(xiàn)的提示太過于術(shù)語化，也沒有提示在正確的地方讓我非?？鄲馈＃?
從菲茨定律（Fitt’s Law）中我們應(yīng)該知道，目標(biāo)區(qū)域的距離和外觀與所采取的行動(dòng)成正比。因此，為了將注意力集中在轉(zhuǎn)化按鈕上，按鈕應(yīng)該準(zhǔn)確放置在合理位置上。此外，按鈕的大小應(yīng)該易于點(diǎn)擊，避免用戶因嘗試點(diǎn)擊時(shí)不方便而流失。
（彩云注：左側(cè)的按鈕不在正確的決策位置以及按鈕太小，右側(cè)的按鈕簡潔明了并且符合用戶的心理預(yù)期，能夠讓用戶更快決策并點(diǎn)擊。）
顏色是 UI 中不可缺少的部分，它能影響用戶使用應(yīng)用時(shí)的情緒。正確地使用顏色將使 UI 看起來更加豐富合理。
（彩云注：左側(cè)的藍(lán)色按鈕顏色并不符合用戶對(duì)于刪除的心理預(yù)期，右側(cè)的紅色按鈕對(duì)用戶的心理預(yù)期有危險(xiǎn)和警告，用紅色代表刪除能夠讓用戶集中注意力關(guān)注這一特殊的操作。）
用單列展示內(nèi)容，能更好地幫助用戶掃描。當(dāng)你的應(yīng)用和網(wǎng)站上要展示大量信息時(shí)，將所有信息垂直對(duì)齊時(shí)，能更好的保持用戶關(guān)注度。
當(dāng)用戶準(zhǔn)備登錄或注冊(cè)你平臺(tái)的時(shí)候，把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時(shí)付出額外的認(rèn)知負(fù)擔(dān)和時(shí)間消耗而流失。首先使用社交媒體賬號(hào)，能很好地增加點(diǎn)擊率。
在用戶做選擇的時(shí)候，需要清晰地告訴用戶選中的到底是哪一個(gè)選項(xiàng)。模棱兩可的顏色會(huì)增加用戶的認(rèn)知負(fù)擔(dān)。更少的顏色和清晰的選中狀態(tài)能讓用戶獲得更好的體驗(yàn)。
（彩云注：左側(cè)的問題在于選中狀態(tài)不清晰且選項(xiàng)的顏色過于豐富，右側(cè)的選中狀態(tài)清晰且選項(xiàng)顏色只有 2 種，選中和非選中，體驗(yàn)會(huì)更好。）
如果想給信息分組，使用留白是最好的方式。加條線作為分組符號(hào)會(huì)在界面中增加了一個(gè)額外元素，空白能讓 UI 看起來更加干凈和優(yōu)雅。用線分組的情況適用于類似 Twitter、Medium 之類的重內(nèi)容平臺(tái)等場景。
保持設(shè)計(jì)的一致性，能夠降低功能復(fù)雜度并讓用戶更快決策，一致性設(shè)計(jì)讓用戶更快熟悉操作而不需要太多思考。（彩云注：左側(cè)的選項(xiàng)圓角不一致，會(huì)讓用戶思考為什么這里會(huì)有不同，而右側(cè)的一致性選項(xiàng)設(shè)計(jì)，能讓用戶忽略內(nèi)容外的干擾。）
在搜索輸入欄添加適當(dāng)?shù)恼嘉环?，提示用戶可以在平臺(tái)上搜索和找到的內(nèi)容，這樣可以提供用戶參考并帶來更好的用戶體驗(yàn)。
以上這些就是在設(shè)計(jì)數(shù)字產(chǎn)品體驗(yàn)時(shí)應(yīng)該遵循的 14 個(gè)基本規(guī)則，這些點(diǎn)雖然基礎(chǔ)，但卻經(jīng)常被人忽略。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
編者按：其實(shí)網(wǎng)頁或者App中的導(dǎo)航（Navigation）這個(gè)概念遠(yuǎn)不止我們熟悉的導(dǎo)航欄，而是一個(gè)更加廣的交互概念：引導(dǎo)用戶和產(chǎn)品進(jìn)行有效的交互，實(shí)現(xiàn)用戶的目標(biāo)。本文將詳細(xì)地介紹界面的導(dǎo)航設(shè)計(jì)。
一個(gè)網(wǎng)頁或App產(chǎn)品要想有很好的可用性（usability），需要做好的最基本的一點(diǎn)是導(dǎo)航的設(shè)計(jì)或者說引導(dǎo)用戶的設(shè)計(jì)。如果用戶在使用一個(gè)網(wǎng)站或者App的時(shí)候找不到自己的處在什么位置或者該怎么去到想要的頁面，那么視覺效果再怎么有創(chuàng)意或者抓人眼球都無法彌補(bǔ)產(chǎn)品的缺陷。無論你的產(chǎn)品想滿足用戶什么需求，讓用戶知道產(chǎn)品當(dāng)下的狀態(tài)和每一步操作之后的結(jié)果是對(duì)用戶最基本的尊重。
首先，讓我們弄清楚導(dǎo)航這個(gè)概念。最基本的含義就是在我們的現(xiàn)實(shí)世界中，當(dāng)我們從一個(gè)地方到另一個(gè)地方，需要一些引導(dǎo)和指示。英文中Navigation這個(gè)詞來源于拉丁文，原意就是：操縱船只在海上航行。所以導(dǎo)航就是能夠幫助我們到達(dá)目的地的行為。導(dǎo)航的其他意思都是建立在這個(gè)原意的基礎(chǔ)上。
所以回到UX／UI設(shè)計(jì)上，導(dǎo)航毫無疑問是可用性的一個(gè)要點(diǎn)。它可以定義為一系列引導(dǎo)用戶成功地與產(chǎn)品互動(dòng)并且實(shí)現(xiàn)他們目標(biāo)的動(dòng)作組合或者技巧組合。 用戶帶著他們的期望和目標(biāo)來使用你的網(wǎng)站或者產(chǎn)品，作為設(shè)計(jì)師的你需要給他們提供實(shí)現(xiàn)他們目標(biāo)的最好操作流程。因此當(dāng)你的導(dǎo)航設(shè)計(jì)得非常高效，用戶體驗(yàn)?zāi)艿玫綐O大的提升。
在你剛開始設(shè)計(jì)你的界面時(shí)，就要思考怎么設(shè)計(jì)一個(gè)有效的無縫銜接的導(dǎo)航。通過一些可交互的元素，比如按鈕（buttons），開關(guān)（switches），鏈接（links），標(biāo)簽（tabs），條（bas），菜單（menus），區(qū)域（fields），讓用戶在不同的界面之間進(jìn)行切換。
我們工作室的設(shè)計(jì)思路是，在界面設(shè)計(jì)的早期就全面地思考導(dǎo)航的設(shè)計(jì)，包括界面的布局，頁面間如何切換，導(dǎo)航元素的放置和具體功能。并且通過低保真原型來進(jìn)行驗(yàn)證，保證用戶能清楚地理解所有重要的操作。如果跳過這一步，設(shè)計(jì)將有巨大的風(fēng)險(xiǎn)，其他事情有可能到頭來都白干了。所以無論，對(duì)用戶還是客戶還是設(shè)計(jì)團(tuán)隊(duì)來講，做好這最基礎(chǔ)的部分是非常有好處的。
菜單是我們最熟悉的具備導(dǎo)航功能的元素，它向用戶展示了界面的所有重要選項(xiàng)。基本上，它可以是用動(dòng)詞命名的一系列指令，用戶可以用它來指示系統(tǒng)做出動(dòng)作，像保存，刪除等；它也可以是一個(gè)用名詞命名的目錄，用來代表不同內(nèi)容的集合。
在界面設(shè)計(jì)中菜單可以放在不同的位置（側(cè)邊菜單，頂部菜單，底部菜單等），擁有不同的交互和視覺形式（下拉菜單，上拉菜單，滑動(dòng)菜單等）。要想設(shè)計(jì)好菜單的位置、交互和視覺形式，設(shè)計(jì)師需要經(jīng)過全面的用戶調(diào)查，包括目標(biāo)用戶的預(yù)期和要求、接受能力和使用情境。好的菜單設(shè)計(jì)能讓用戶更快地實(shí)現(xiàn)他們的目標(biāo)，為用戶體驗(yàn)打下堅(jiān)實(shí)的基礎(chǔ)。
△ 作者：Tubik
這是一個(gè)博客APP的界面設(shè)計(jì)，采用了側(cè)邊菜單以及目錄的形式，文字直接說明內(nèi)容，再加上圖標(biāo)來做為輔助的視覺說明。
△ 作者：Ludmila Shevchenko
這個(gè)UI概念設(shè)計(jì)的例子很好的運(yùn)用了顏色作為標(biāo)記，這是一種很有效的導(dǎo)航技巧：每個(gè)分類的背景色使用了和目錄相同的的顏色，這樣目錄和內(nèi)容有著非常強(qiáng)的相關(guān)性，用戶能自然地將他們聯(lián)系起來。
CTA是用戶行為召喚的簡稱（call to action）。CTA簡單來說就是指設(shè)計(jì)師通過設(shè)計(jì)，刺激用戶去做出一些行動(dòng)。相應(yīng)的，CTA元素就是指那些能刺激用戶做出行動(dòng)的交互元素。典型的CTA元素是按鈕，標(biāo)簽或者鏈接。
不管在什么界面，CTA元素都是高效的交互行為的核心，極大的關(guān)系到產(chǎn)品的可用性和導(dǎo)航有效性。如果CTA元素的設(shè)計(jì)不到位的話，用戶會(huì)產(chǎn)生困惑并且得費(fèi)勁地去嘗試。產(chǎn)品的轉(zhuǎn)化率和用戶體驗(yàn)都會(huì)大打折扣。這就是為什么CTA元素特別值得注意。無論什么樣的界面，它都必須是最矚目的元素之一，用來直接地告訴用戶怎么用這個(gè)產(chǎn)品。
△ 作者：Eugene Cameel
一些CTA元素直接用圖標(biāo)形式而沒有任何文字說明，但只適用于大家都熟知其含義的圖標(biāo)，比如聽筒圖標(biāo)和信封圖標(biāo)。上圖這個(gè)例子中，這個(gè)聽筒圖標(biāo)就是這個(gè)界面中一個(gè)焦點(diǎn)，是一個(gè)典型的CTA元素，引導(dǎo)用戶快速地實(shí)現(xiàn)他們的目標(biāo)。不需要任何文字說明，用戶也能懂點(diǎn)擊這個(gè)圖標(biāo)的結(jié)果。
但是，如果一個(gè)圖標(biāo)的含義不是那么明顯或者可能造成誤解，最好還是加上文字說明。
△ 作者：Tania Bashkatova
上面這個(gè)例子是一個(gè)關(guān)于制作海鮮的網(wǎng)站的著陸頁（Landing page）。頁面的標(biāo)題let’s cook還有食材照片是一個(gè)CTA，但不是一個(gè)可交互的CTA?？山换サ腃TA是下面這個(gè)紅色按鈕，用戶點(diǎn)擊這個(gè)按鈕能看到更多關(guān)于不同主題和菜譜的信息。 抓人眼球的顏色強(qiáng)調(diào)了頁面的視覺層級(jí)關(guān)系，把用戶的注意力拉到關(guān)鍵的交互區(qū)域中。
條（Bar）指的是界面中一組用戶可以點(diǎn)擊的元素，用來快速與產(chǎn)品進(jìn)行互動(dòng)，或者還能讓用戶知道事件的進(jìn)程。
標(biāo)簽條（Bar）
最基本的條是標(biāo)簽條（Tab bars），常出現(xiàn)在APP界面的底部，讓用戶能在APP的不同模塊間快速切換。
△ 作者：Sergey Valiukh
載入條（Loading bar）
載入條是用來告知某個(gè)動(dòng)作的進(jìn)展，用戶可以通過時(shí)間、百分比或者其他信息了解整個(gè)過程。
△ 作者：Sergey Valiukh
進(jìn)度條（Progress bar）
給用戶提供反饋，讓他們了解事件的進(jìn)度，比如說計(jì)劃的事情完成了多少。
△ 作者：Valentyn Khenkin
按鈕應(yīng)該是用得最多的元素了。按鈕能讓用戶在對(duì)系統(tǒng)發(fā)出指令后得到恰當(dāng)?shù)姆答?。用戶通過按鈕對(duì)系統(tǒng)下命令，跟系統(tǒng)進(jìn)行交互從而實(shí)現(xiàn)他們某個(gè)目標(biāo)，比如發(fā)送郵件，買一個(gè)東西，下載文件，播放音樂等等這樣的指令。按鈕之所以那么的常用和對(duì)用戶那么友好，是因?yàn)榘粹o很好地模仿了人和真實(shí)世界里跟物品的交互。
現(xiàn)如今的UI按鈕有不計(jì)其數(shù)的設(shè)計(jì)樣式，能滿足很多的設(shè)計(jì)需求。按鈕典型的用途是表明這個(gè)地方是可點(diǎn)擊，因此需要具有非常高的視覺識(shí)別，有著特定的形狀還有文字說明它能實(shí)現(xiàn)什么動(dòng)作。設(shè)計(jì)師通常需要花不少時(shí)間好好考慮怎么讓按鈕很好地融合界面的風(fēng)格，同時(shí)又能在視覺上跳脫出來。
△ 作者：Ernest Asanov
以下是在APP和網(wǎng)頁設(shè)計(jì)中常用的幾種具備附加功能的按鈕。
漢堡按鈕
漢堡按鈕隱藏著一個(gè)菜單。當(dāng)用戶點(diǎn)擊他們的時(shí)候，能把菜單調(diào)出來。有這個(gè)名字是因?yàn)樗怯扇龡l水平線組成的，看起來就像是漢堡的形式。它是一個(gè)典型的交互元素，也是頗具爭議的元素。
大多數(shù)用戶知道點(diǎn)擊這個(gè)按鈕能展開一個(gè)菜單，所以不需要額外的說明。漢堡菜單極大地節(jié)省了界面的空間，能讓界面看起來更簡潔，也為其他重要的界面元素騰出了必要的空間。它同時(shí)非常適合響應(yīng)式設(shè)計(jì)，通過隱藏菜單讓整個(gè)設(shè)計(jì)更統(tǒng)一，界面能在不同設(shè)備間保持一致。盡管它因?yàn)橐恍┤秉c(diǎn)而飽受爭議，但因?yàn)檫@極大的好處，它目前仍然被廣泛的使用。關(guān)于這個(gè)元素的主要詬病是，對(duì)于一些對(duì)界面不太熟悉的用戶來說，這個(gè)比較抽象的設(shè)計(jì)元素可能會(huì)讓他們產(chǎn)生困惑。所以，在決定使用漢堡菜單前，應(yīng)該調(diào)查一下目標(biāo)用戶的接受程度和他們的需求。
△ 作者：Ernest Asanov
上圖這個(gè)概念設(shè)計(jì)就是用了漢堡按鈕把菜單隱藏了起來，從而實(shí)現(xiàn)一個(gè)簡潔的頁面布局和視覺效果。
加號(hào)按鈕（Plus button）
一般通過這個(gè)按鈕，用戶可以實(shí)現(xiàn)添加某個(gè)內(nèi)容的動(dòng)作，比如添加新的聯(lián)系人，狀態(tài)，筆記，位置等所有用戶在產(chǎn)品里能做的基本動(dòng)作。有時(shí)候，點(diǎn)擊這個(gè)按鈕會(huì)出現(xiàn)新的窗口。有時(shí)候還會(huì)出現(xiàn)一些選項(xiàng)供用戶進(jìn)行選擇添加什么內(nèi)容，這取決于是什么產(chǎn)品。
△ 作者：Sergey Valiukh
上面這個(gè)例子就是用戶在點(diǎn)擊加號(hào)按鈕后出現(xiàn)了可以選擇添加的內(nèi)容（圖片，視頻，文字），在選擇了之后才會(huì)彈出添加內(nèi)容的窗口。盡管這個(gè)操作可能增加一些額外的交互動(dòng)作，但因?yàn)榻o予了用戶選擇空間，所以還是對(duì)用戶很友好的一種設(shè)計(jì)。
分享按鈕（Share Button）
分享按鈕顧名思義就是能讓用戶把內(nèi)容分享到他們的社交平臺(tái)賬號(hào)上。大多數(shù)情況下，這個(gè)按鈕都是用社交平臺(tái)的Logo作為視覺形象，這樣非常易于識(shí)別和認(rèn)知。
同樣，這也是一個(gè)用戶非常好理解的元素，在界面中用得也非常多。因?yàn)樗芎玫啬７铝爽F(xiàn)實(shí)世界里人們熟悉的開關(guān)概念。關(guān)于這個(gè)元素的設(shè)計(jì)，特別要注意的是開和關(guān)的狀態(tài)在視覺上要差別非常明顯。這樣能避免用戶花時(shí)間去研究怎樣是開怎樣是關(guān)。很多種的形式對(duì)比或者切換動(dòng)畫都可以解決這個(gè)問題，從而設(shè)計(jì)出很好的用戶體驗(yàn)。
△ 來源：Tubikstudio
這個(gè)案例是來自一款鬧鐘應(yīng)用Toonie。動(dòng)畫效果讓交互變得更流暢和自然，同時(shí)整個(gè)控件顏色的改變和滑動(dòng)元素形態(tài)的變化讓用戶能夠輕易地識(shí)別出開關(guān)的狀態(tài)。如果你想了解整個(gè)App的案例研究，可以到來源查看。
也很好理解，就是讓用戶在一些選項(xiàng)里選出目標(biāo)選項(xiàng)。通常包含一個(gè)可滑動(dòng)的列表，上面是一列數(shù)值，比如小時(shí)，分鐘，日期，度量，幣種等等。通過滑動(dòng)列表，用戶可以選定想要的數(shù)值。這個(gè)元素廣泛地應(yīng)用在有時(shí)間設(shè)定這個(gè)功能的界面設(shè)計(jì)上。
△ 來源：Tubikstudio
復(fù)選框是可以用來同時(shí)標(biāo)記多個(gè)特定的內(nèi)容。同樣的，也是借用了我們?cè)诂F(xiàn)實(shí)世界里熟悉的概念。我們?cè)诳荚嚨臅r(shí)候，或者填調(diào)查問卷的時(shí)候會(huì)在選項(xiàng)前的小方框里涂上顏色作為選中的標(biāo)記。和開關(guān)一樣，復(fù)選框同樣用得很多，主要在設(shè)置頁面設(shè)計(jì)里。不過，復(fù)選框還有另外一個(gè)用得比較多的地方，那就是含有任務(wù)管理，待辦事項(xiàng)，時(shí)間記錄等類似功能的App或者網(wǎng)頁。
△ 作者：Tubik
上面這個(gè)是一個(gè)待辦事項(xiàng)App的概念設(shè)計(jì)。用戶點(diǎn)擊復(fù)選框后，表示這個(gè)內(nèi)容已經(jīng)完成。字體變粗的同時(shí)顏色發(fā)生了改變，這樣就非常明顯地把這個(gè)已完成的任務(wù)和其他未完成的任務(wù)區(qū)分開來。
界面的導(dǎo)航（Navigation）是用戶體驗(yàn)設(shè)計(jì)的核心之一。毫無疑問，如果你看不到路, 你就去不了你的目的地。用戶現(xiàn)在正面對(duì)著越來越多的網(wǎng)站和APP產(chǎn)品。越來越多的選擇會(huì)讓用戶期望這些產(chǎn)品具備符合他們使用習(xí)慣的導(dǎo)航設(shè)計(jì)。
圖標(biāo)可以定義為一個(gè)象征著某個(gè)概念或物體的視覺形象，有著加強(qiáng)與受眾溝通的目的。會(huì)和文字結(jié)合一起使用，將想要傳達(dá)給受眾的信息表現(xiàn)出來。在界面設(shè)計(jì)中，圖標(biāo)通常是象形符號(hào)或表意文字，對(duì)可用性和成功的人機(jī)交互有重要意義 。
毫無疑問，圖標(biāo)的其中一個(gè)重要作用是可以有效地替代文字描述。因?yàn)楸绕鹞淖?，用戶?duì)圖片的理解速度更快，所以這個(gè)特點(diǎn)能極大提升用戶體驗(yàn)，增強(qiáng)產(chǎn)品的導(dǎo)航和對(duì)用戶的引導(dǎo)。但是，需要注意，即使是輕微的歧義或者誤解都會(huì)導(dǎo)致糟糕的用戶體驗(yàn)。所以在設(shè)計(jì)圖標(biāo)的時(shí)候要做必要的測試，根據(jù)目標(biāo)用戶平衡好文字和圖標(biāo)的使用。最有效的方式是同時(shí)使用圖標(biāo)和文字，這樣大部分用戶都不會(huì)有問題。電商APP或者網(wǎng)站最常使用這樣的形式來給用戶足夠的信息，讓他們能輕松快速地瀏覽。
△ 作者：Tubik
根據(jù)圖標(biāo)的功能，我們可以將它們分為一下幾類：
交互式圖標(biāo)（interactive icons）
這類圖標(biāo)具備交互功能。他們是可點(diǎn)擊的，能回應(yīng)用戶的要求，觸發(fā)圖標(biāo)代表的動(dòng)作。這種圖標(biāo)告知用戶按鈕、控件或者其他界面交互元素的功能或者特點(diǎn)。在大多數(shù)情況下，這類圖標(biāo)的意義明確，不需要文字輔助說明。
△ Tab Bar
△ 菜單概念設(shè)計(jì)
說明性圖標(biāo)（clarifying icons）
起到說明作用的圖標(biāo)，設(shè)計(jì)師用它來表示某一個(gè)特點(diǎn)或者內(nèi)容的種類。它有時(shí)候不屬于界面布局的元素或者并不具備直接的交互功能。經(jīng)常和文字結(jié)合使用。
△ 作者：Tubik
△ 作者：Ernest Asanov
娛樂性和裝飾性圖標(biāo)（entertaining and decorative icons）
這類圖標(biāo)注重抓人眼球的視覺效果并非功能，通常用在節(jié)日或者特別款的場景。他們能有效地吸引用戶的注意力，增強(qiáng)視覺沖擊力。
復(fù)活節(jié)和春天主題的圖標(biāo)：
△ 圖片作者：Arthur Avakyan
APP圖標(biāo)（app icons）
在各個(gè)平臺(tái)上可交互的品牌標(biāo)志，展示品牌和產(chǎn)品的形象。最常見的就是我們手機(jī)界面上每一個(gè)App的圖標(biāo)，上面通常是品牌和產(chǎn)品的Logo。
△ 作者：Arthur Avakyan
網(wǎng)頁圖標(biāo)（favicons）
就是我們經(jīng)常在網(wǎng)址欄或者書簽里看到的URL前面的那個(gè)小圖標(biāo)，也是代表著產(chǎn)品或者品牌的形象。能讓用戶在瀏覽網(wǎng)頁時(shí)給他們快速的視覺提示。
搜索區(qū)域又常常被稱作搜索框（search box）或者搜索條（search bar），代表著用戶可以在這個(gè)區(qū)域內(nèi)輸入想要搜索的內(nèi)容。它是那些有著很多內(nèi)容的網(wǎng)站或APP的核心導(dǎo)航元素，像博客，電商，新聞等產(chǎn)品。設(shè)計(jì)得好的搜索框能讓用戶輕松地找到想要的信息。因?yàn)樗軒椭脩羰∪ズ芏鄷r(shí)間和精力，所以它是一個(gè)對(duì)用戶特別友好的界面元素。
它的設(shè)計(jì)形式有很多種，可以是標(biāo)簽的形態(tài)，也可以是引導(dǎo)輸入的一條線或者簡單的一個(gè)搜索圖標(biāo)。大多數(shù)情況下搜索框的圖標(biāo)是一個(gè)放大鏡的樣式?；旧纤械挠脩舳级眠@個(gè)圖標(biāo)的含義，所以能實(shí)現(xiàn)非常直觀的導(dǎo)航設(shè)計(jì)。想要在這個(gè)圖標(biāo)上做文章的話，要好好測試一下，因?yàn)楦牡貌缓玫脑挄?huì)嚴(yán)重影響交互和界面的可用性。搜索框還可以加入提供候選項(xiàng)的下拉菜單或者自動(dòng)填補(bǔ)內(nèi)容的功能。
△ 作者：Ernest Asanov
另外需要注意的一點(diǎn)是搜索框控件在界面中的位置。在網(wǎng)頁設(shè)計(jì)中，搜索框經(jīng)常出現(xiàn)在網(wǎng)頁的頂部。這是一個(gè)很恰當(dāng)?shù)脑O(shè)計(jì)，因?yàn)橥ǔ＞W(wǎng)頁的頂部區(qū)域具有很高的可見性，用戶打開網(wǎng)頁就看到了，不需要再花時(shí)間去找到這個(gè)控件。舉個(gè)反面例子，如果一個(gè)電商網(wǎng)站因?yàn)樗阉骺虻脑O(shè)計(jì)有問題，導(dǎo)致用戶沒辦法快速方便地找到想買的東西，網(wǎng)站銷售表現(xiàn)會(huì)受到極大的影響。因?yàn)楝F(xiàn)在很多網(wǎng)站都將搜索框放在網(wǎng)頁的頂部，所以用戶也養(yǎng)成了在那里找到搜索框的習(xí)慣。
至于App界面的話，要視具體情況而定，設(shè)計(jì)師可能面臨更多的限制。如果是一個(gè)有著大量內(nèi)容的APP，而且搜索是核心功能之一的話，那么一般放在一個(gè)顯眼的標(biāo)簽條（tab bar）上。如果搜索并不是核心功能，那么可以把它藏到菜單里或者只在需要的用到的地方顯示或者時(shí)刻顯示出來。
△ 作者：Sergey Valiukh
標(biāo)簽是一個(gè)標(biāo)有關(guān)鍵詞的可交互元素。標(biāo)簽其實(shí)是給用戶提供快速通道的元數(shù)據(jù)，用戶可以通過它快速導(dǎo)航到與關(guān)鍵詞相關(guān)的所有內(nèi)容。除了網(wǎng)頁或者App本身帶有的標(biāo)簽，在很多情況下用戶也可以自己創(chuàng)建標(biāo)簽。
△ 作者：Design4users
標(biāo)簽這個(gè)界面元素被廣泛地應(yīng)用在用戶原創(chuàng)內(nèi)容平臺(tái)（UGC）的界面設(shè)計(jì)里。當(dāng)用戶上傳圖片、狀態(tài)到社交網(wǎng)絡(luò)的時(shí)候，可以加上關(guān)鍵詞作為標(biāo)簽。上圖就展示博客網(wǎng)站Design4Users運(yùn)用了標(biāo)簽來加強(qiáng)網(wǎng)站的內(nèi)容導(dǎo)航。通過點(diǎn)擊某個(gè)標(biāo)簽，能切換到帶著這個(gè)標(biāo)簽的所有內(nèi)容的頁面。標(biāo)簽是友好的搜索引擎優(yōu)化（SEO-friendly）技巧，能提高用戶搜索內(nèi)容的成功率。
△ 作者：Unsplash
再舉一個(gè)例子，上圖是圖片素材網(wǎng)站Unsplash的界面。當(dāng)用戶想要下載圖片時(shí)，可以輸入描述圖片的關(guān)鍵詞作為標(biāo)簽。通過這樣的形式幫助用戶有效地找到想要的圖片。我們還可以注意到，輸入框內(nèi)加入了引導(dǎo)用戶進(jìn)行操作的說明，這樣更進(jìn)一步地提高了產(chǎn)品的可用性。設(shè)計(jì)的細(xì)節(jié)真的很重要?？偠灾?，標(biāo)簽是一種用戶可以自行創(chuàng)造的導(dǎo)航元素，拉近了界面和目標(biāo)用戶之間的距離。
全面地設(shè)計(jì)好整個(gè)界面的導(dǎo)航不是一件容易的事，需要一些心理學(xué)、交互模式、用戶測試的基礎(chǔ)知識(shí)，還需要在項(xiàng)目的早期思考清楚網(wǎng)站或者App的信息架構(gòu)。但是做好這一點(diǎn)的話，能夠讓你的產(chǎn)品很好地幫助用戶解決他們的問題，給優(yōu)秀的用戶體驗(yàn)打下堅(jiān)實(shí)的基礎(chǔ)，讓他們對(duì)你的產(chǎn)品產(chǎn)生越來越大的粘性。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章：
手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！
Z Yuhan：對(duì)于手機(jī)端的表格設(shè)計(jì)，本文將為你提供了一些思考方向，希望能夠帶給你啟發(fā)。
表格似乎和移動(dòng)設(shè)備很難融合，強(qiáng)行貼上還真有些毀三觀。即便是想方設(shè)法地避免，也總會(huì)有這樣那樣的原因，而不得不同時(shí)面對(duì)它們的時(shí)候。
其實(shí)有很多方法可以優(yōu)化手機(jī)端的表格，但是可能不一定每一種都適合你遇到的情況，所以我整理了一套循序漸進(jìn)的處理方法。
假設(shè)你在設(shè)計(jì)一款類似微信聊天群的功能，PM給你一張「成員信息表」，并要求你把它放在群成員管理界面上。這張表格里的信息的排列方式也許非常隨便，看起來讓人摸不著頭腦。
△ 組員信息表
首先你需要弄清楚這張表格擺出來的意義是什么。假設(shè)這張表格是為了「讓群主查看并管理成員」，那么你就能分析得出：
按照重要程度擺放各信息，并合理排序后，表格看起來就更好理解了：
△ 整理后的組員信息表
如果你的情況不允許對(duì)表格對(duì)形式進(jìn)行變動(dòng)，那么可能就真的要用手機(jī)端展示表格了。
在確保文字能夠看清的情況下，表格很有可能橫向展示不全，所以滑動(dòng)難以避免。以下兩點(diǎn)可以優(yōu)化表格的滑動(dòng)體驗(yàn)：
這樣，復(fù)雜的表格至少能夠從表面上融入手機(jī)界面了：
再仔細(xì)看看這張表格，即便不做大的調(diào)整，還是有很多地方可以通過微調(diào)來改善體驗(yàn)：
優(yōu)化后，表格看起來更簡單了：
手機(jī)的窄屏對(duì)于表格來說總不是最佳選擇，所以如果可能的話，還是避免使用這種形式。
一個(gè)人在同一時(shí)間的注意力是有限的，大多數(shù)情況并不需要像傳統(tǒng)印刷品那樣，完整列出所有信息。重新思考真實(shí)的使用場景和用戶心理，你會(huì)發(fā)現(xiàn)并不需要一次性把所有東西都扔出來。
如果你想要像微信那樣，用頭像+昵稱這種形式，也許很容易被給你表格的人反駁：
你可以篩選出相對(duì)有用的信息提供給用戶，并用更有意義的方式整理出來：
于是原本臃腫的表格可以被整合重新設(shè)計(jì)成完全不一樣的輕便形式：
本文提供了一些思考方向希望能夠帶給你啟發(fā)，以后遇到類似問題，不要老老實(shí)實(shí)地把表格原封不動(dòng)地貼到手機(jī)上了。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章：
手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！
滴滴出行在 iPhone X 發(fā)售前就針對(duì)其操作特性進(jìn)行了界面適配，保障了 iPhone X 用戶的全面屏操作?，F(xiàn)在 iPhone X 的適配結(jié)果已經(jīng)得到了良好的用戶反饋，由此我們梳理了移動(dòng)端界面 iPhone X 的適配方案，并從整個(gè)適配過程中探索到萬變不離其宗的適配方法，為后續(xù)不斷更新的多尺寸屏幕提供更好更快的適配思路。
iPhone X 是蘋果公司十周年推出的重點(diǎn)產(chǎn)品，無論外觀還是技術(shù)都有著革命性的創(chuàng)新。讓我們先來回顧下 iPhone X 在界面使用體驗(yàn)上都有哪些操作特性。
如果你對(duì) iPhone X 還不夠了解，可以看看這些 ：
1. 屏幕變長
因大部分設(shè)計(jì)師都用 iPhone 8 來做設(shè)計(jì)稿，所以我們用 iPhone 8 與 iPhone X 做對(duì)比。
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 的圖像，界面內(nèi)容由手機(jī)硬件遮罩成帶圓角和傳感器（頂部齊劉海）的形狀。所以界面設(shè)計(jì)時(shí) iPhone X 和 iPhone 8 的設(shè)計(jì)寬度可以通用 375pt，而實(shí)際 iPhone X 的屏幕像素為 375pt×812pt (1125×2436px)，且切圖使用 @3x 圖片。
喬布斯曾說，手持設(shè)備最理想的屏幕尺寸是3.5寸，這是因?yàn)閱问植僮鲿r(shí)3.5寸屏幕基本能做到大拇指無障礙全覆蓋。但隨著人們對(duì)手機(jī)功能多樣化的需求，主流屏幕遠(yuǎn)大于3.5寸。
iPhone X 是 5.8 寸，屏幕已經(jīng)超越了絕大多數(shù)用戶的拇指覆蓋范圍，這就導(dǎo)致左上和右下角的單手操作不夠方便。很多基于 F 型流動(dòng)視線設(shè)計(jì)的 App，通常會(huì)將重要的功能入口置于左上角，在 iPhone X 上，視線優(yōu)先和拇指操作未必可以同時(shí)滿足，這就要求設(shè)計(jì)師們對(duì)操作盲區(qū)的功能進(jìn)行多重考量，評(píng)估是否要針對(duì) iPhone X 做出位置調(diào)整。
2. 異形狀態(tài)欄（齊劉海）
iPhone 8 屏幕狀態(tài)欄高 20pt，iPhone X 狀態(tài)欄高 44pt 并有齊劉海形狀遮罩。狀態(tài)欄位置顯示的信息，在 iPhone X 上受齊劉海遮罩影響，需要特殊考慮展示效果，甚至重新設(shè)計(jì)信息展示方式避讓狀態(tài)欄，以便保持各屏幕展示效果的統(tǒng)一。
蘋果官方不建議采用隱藏或遮擋狀態(tài)欄的設(shè)計(jì)，相對(duì) iPhone 8 ，iPhone X 有更高的縱向顯示空間足夠展示更多的內(nèi)容，且狀態(tài)欄顯示了對(duì)用戶有用的信息，除非隱藏狀態(tài)欄能帶來更大的收益，否則還是建議保留。
3. 增加主屏幕指示條
iPhone X 屏幕最底部設(shè)置了主屏幕指示條，用戶可從屏幕底端使用滑動(dòng)手勢進(jìn)入主屏幕或切換應(yīng)用。這些系統(tǒng)的全局操作會(huì)優(yōu)先于App應(yīng)用的操作。在設(shè)計(jì)用戶沉浸式的產(chǎn)品如視頻、游戲時(shí)，可以適當(dāng)?shù)碾[藏主屏幕指示條。
主屏幕指示條下方的內(nèi)容仍是可點(diǎn)擊操作的，但要避免在屏幕最底部設(shè)置重要操作內(nèi)容，且要避免使用與指示條相沖突的操作手勢。主屏幕指示條只有黑白兩種顏色，會(huì)根據(jù)指示條底部背景自動(dòng)切換。
4. 設(shè)置安全區(qū)
從 iOS 11 開始，蘋果引入了安全區(qū)域的概念。在 iPhone 8 等屏幕上，安全區(qū)域默認(rèn)是除了狀態(tài)欄以外的屏幕范圍。在 iPhone X 上，安全區(qū)域默認(rèn)是除去頂部狀態(tài)欄以及底部主屏幕指示條周邊的范圍。
遵照系統(tǒng)安全區(qū)的概念進(jìn)行設(shè)計(jì)和開發(fā)，大多數(shù)使用系統(tǒng)標(biāo)準(zhǔn)UI元素（如導(dǎo)航欄、表單、內(nèi)容集）的應(yīng)用程序會(huì)自動(dòng)適應(yīng)設(shè)備的新外形，不需手動(dòng)調(diào)整，這樣會(huì)大量節(jié)省開發(fā)人員的工作量。所以在這里提倡大家遵照系統(tǒng)提倡的方式進(jìn)行開發(fā)布局，不僅方便 iPhone X 的適配工作，也方便后續(xù) iOS 系統(tǒng)更新以及界面元素的自動(dòng)匹配。
固定在屏幕上展示的內(nèi)容應(yīng)始終在安全區(qū)域內(nèi)，如頂導(dǎo)、底部tab欄等。垂直滾動(dòng)的內(nèi)容，如列表，圖片流，需要一直延伸到底部，也就是會(huì)在安全區(qū)之外展示，這樣才能確保提供全面屏操作體驗(yàn)。
正是因?yàn)?iPhone X 有著許多操作特性，我們的設(shè)計(jì)方案必須針對(duì) iPhone X 進(jìn)行適配。以下是針對(duì)常見界面元素整理的通用適配規(guī)則。
1. 吸頂元素
對(duì)于吸頂元素的適配原則是：避讓狀態(tài)欄，內(nèi)容區(qū)吸附于安全區(qū)頂部，狀態(tài)欄背景顏色根據(jù)吸頂元素進(jìn)行調(diào)整。
2. 吸底元素
吸底元素的適配原則是：內(nèi)容平移至安全區(qū)底部，界面背景層元素（界面背景色、背景圖片、全屏地圖等）充滿屏幕，主屏幕指示條下方區(qū)域與吸底元素顏色協(xié)調(diào)。
3. 信息流
信息流從主屏幕指示條下方穿過，撐滿屏幕顯示，滑動(dòng)瀏覽信息不受影響。主屏幕指示條下方內(nèi)容仍可點(diǎn)擊，此區(qū)域滑動(dòng)手勢優(yōu)先觸發(fā)系統(tǒng)操作。信息流最底部內(nèi)容要保障在安全區(qū)內(nèi)。
4. 全屏元素
全屏元素多為圖片、視頻、游戲畫面、全屏地圖等信息，適配規(guī)則是：全屏元素在 iPhone X 上仍要保持充滿屏幕的狀態(tài)，要保證圖像信息比例正確不變形，并接受硬件傳感器齊劉海和圓角遮罩。
因 iPhone X 與 iPhone 8 Plus 都使用@3x圖片，所以開屏圖片不做單獨(dú)適配的話可以調(diào)取 iPhone 8 Plus 圖片裁剪使用。
5. 左右布局元素
最典型的左右布局就是抽屜導(dǎo)航，抽屜拉出后，如果信息卡片和主屏幕指示條交錯(cuò)疊加，就會(huì)稍顯信息混亂，建議抽屜導(dǎo)航的寬度根據(jù)主屏幕指示條的位置進(jìn)行調(diào)整，完整露出或完全遮擋指示條。
6. 居中元素
居中元素在適配中的影響較小，對(duì)話框、Toast 提示等均不需單獨(dú)適配。
以上的適配規(guī)則基本可以滿足所有場景的基礎(chǔ)適配需求。當(dāng)然還有很多特殊場景，不需要特意保持 iPhone 8 和 iPhone X 展現(xiàn)效果的一致性，這種情況就需要單獨(dú)設(shè)計(jì)方案，不是通用規(guī)則能滿足的了。
滴滴出行針對(duì)內(nèi)部產(chǎn)品做了一套適配指南，幾十頁滿滿的適配方案說明，盡可能詳盡的將普適規(guī)則與特殊規(guī)則運(yùn)用場景舉例說明。設(shè)計(jì)平臺(tái)將此適配指南發(fā)放到各業(yè)務(wù)部門，由業(yè)務(wù)方產(chǎn)出自己各功能場景下的適配方案。
在此過程中我們發(fā)現(xiàn)，即使規(guī)則已經(jīng)很詳盡，Webapp、H5頁面等多場景下仍有一些不清楚如何適配，或不能通用適配規(guī)則的情況，需要設(shè)計(jì)平臺(tái)持續(xù)跟進(jìn)，講解規(guī)則走查適配效果。
造成這種情況的原因大多是因?yàn)榻缑嬖O(shè)計(jì)的時(shí)候沒有充分考慮其后期延展，導(dǎo)致多屏幕下不能保持統(tǒng)一樣式，無法通用適配規(guī)則。這讓我們開始思考如何設(shè)計(jì)界面才能包容多屏幕的展現(xiàn)。
設(shè)備屏幕在不斷更新，適配需求就是持續(xù)的無盡的，iPhone 從 iPhone 4 – iPhone 5 – iPhone 6 – iPhone X ，屏幕尺寸不斷在變化，甚至屏幕的形狀邊界也在變化，更不用說安卓系統(tǒng)各種各樣的屏幕尺寸及屏幕形狀。例如，夏普AQUOS S2。
設(shè)計(jì)界面時(shí)，如果對(duì)市面的主流屏幕挨個(gè)設(shè)計(jì)是有極其高的時(shí)間成本的，那怎么才能讓適配更從容，不必緊張的跟隨手機(jī)廠商的發(fā)售腳步？是否有提高適配效率的方法？適配可否是一勞永逸的？需要適配的元素有沒有一些共性……
帶著這些問題不斷的思考總結(jié)，我們形成了一套自己的設(shè)計(jì)理念，能夠讓適配這件事情以一抵百，萬變不離其宗，這就是「去邊界化」設(shè)計(jì)。
「去邊界化」設(shè)計(jì)，是指在設(shè)計(jì)之初把邊界限制去掉，定義好界面元素的特性及層級(jí)關(guān)系后，再套用到屏幕邊框之中。與常規(guī)設(shè)計(jì)的區(qū)別在于，讓內(nèi)容成為獨(dú)立且完整的組合體，再根據(jù)設(shè)定好的變化規(guī)則組合到不同的邊界中去。這樣保障了內(nèi)容的最大適用程度，且保障各屏幕展示規(guī)則的統(tǒng)一性。
目前我們最常做還是手機(jī)界面，未來VR、AR 成熟起來，我們所設(shè)計(jì)的界面就會(huì)更大，甚至?xí)蟮綗o形。運(yùn)用「去邊界化」設(shè)計(jì)，可以讓我們更好的適應(yīng)未來。
另外回到手機(jī)界面，我們完成一個(gè)設(shè)計(jì)方案后，也可以運(yùn)用“去邊界化”的方式檢查界面元素是否在多屏幕適配上存在問題，減少不必要的適配工作量。
其大無外，其小無內(nèi)，在界面設(shè)計(jì)上，我們也需要突破界限，精益求精，讓每一個(gè)元素都豐富而完整。
1. 定義元素特性
這里的元素特性，除了元素本身的基礎(chǔ)功能及操作方式外，從三個(gè)角度進(jìn)行思考，延展性、吸附性、流動(dòng)性。
這里我們以同倍率，不同尺寸的屏幕適配為例，省略倍率換算方便我們更簡單的了解「去邊界化」設(shè)計(jì)。
如下圖中，圖片、卡片、背景、列表、按鈕 等元素可隨著屏幕進(jìn)行延展變化，而icon、文字等為固定大小不會(huì)隨著屏幕進(jìn)行變化。
延展變化又可分為：等比延展、橫向延展、全部延展。
通常圖片、視頻元素使用等比延展，保障畫面比例統(tǒng)一不變形；列表、按鈕 等多采用橫向延展，信息量不變高度無需變化；卡片、背景等多根據(jù)其承載信息和屏幕背景尺寸進(jìn)行調(diào)整，長寬均跟隨變化。
如下圖，button 吸附于界面（或安全區(qū)）底部，適配到其它屏幕依然保持與界面（或安全區(qū)）底部的吸附性。而下圖中的toast 提示為界面居中元素，也就是它的吸附性就是界面的中心，適配到其它屏幕仍保持這一吸附屬性。
針對(duì)流動(dòng)性的元素主要是定義其容器的延展性和吸附性，流動(dòng)元素本身大小不變，位置形態(tài)上跟隨容器進(jìn)行變化。當(dāng)然還要考慮元素過多超出容器后的顯示方案，是被截?cái)噙€是省略等等。
如下圖，文字圖片流在信息容器內(nèi)進(jìn)行流動(dòng)展示。
2. 組織信息結(jié)構(gòu)
從平面維度思考元素關(guān)系可以理解為元素間的吸附性，但界面元素不總是在同一個(gè)平面上，App 界面通常分為 背景層 、內(nèi)容層 、操作層 、狀態(tài)層 ，這些層級(jí)在高度上是相互疊加的。
決定元素層級(jí)的因素主要是其表達(dá)內(nèi)容的主次關(guān)系，重要而緊急元素在最上方，不重要不緊急的元素在最下方。將界面從平面維度填充為立體維度讓產(chǎn)品功能更豐富，更貼近人們真實(shí)的立體世界，也就更符合用戶的認(rèn)知和操作邏輯。
無論界面的邊界如何變化，元素間的層級(jí)結(jié)構(gòu)一旦定下是不會(huì)隨邊界變化而改變的。建立元素的縱向?qū)蛹?jí)關(guān)系，便于在不同場景保持統(tǒng)一的元素優(yōu)先級(jí)。
在「去邊界化」設(shè)計(jì)中，除了元素自身特性（延展性、吸附性、流動(dòng)性）清晰，元素間的組合層級(jí)關(guān)系必須排布合理、邏輯清晰，才能讓整個(gè)產(chǎn)品層級(jí)統(tǒng)一，多屏幕展現(xiàn)層級(jí)統(tǒng)一。
3. 元素組件化
我們有講到界面中所有的元素都不是獨(dú)立的，有時(shí)某幾個(gè)元素組合表達(dá)同一個(gè)功能，關(guān)系非常緊密，甚至可以捆綁移動(dòng)，我們把這些功能密切相關(guān)的元素進(jìn)行封裝，看做一個(gè)完整的大元素，這就是我們常說的組件。
組件化的特點(diǎn)就是詳盡每個(gè)元素的操作反饋、延展方案、顯示容器、極限情況等等場景，然后定義元素與元素之間的吸附關(guān)系，操作聯(lián)動(dòng)，使其成為一個(gè)完整的操作場景。
說到組件化設(shè)計(jì)，這有一篇必看好文：《進(jìn)階必讀！可能是最全面的組件化開發(fā)與設(shè)計(jì)指南》。
組件還可以根據(jù)功能需求與其它元素自由組合，使得組件可以不斷復(fù)用，大大提升設(shè)計(jì)效率，及適配效率。
組件化的意義有很多，可以方便設(shè)計(jì)元素的復(fù)用，方便開發(fā)組件的復(fù)用，減少代碼及元素冗余，方便設(shè)計(jì)方案的修改等等。橫向組件化之于「去邊界化」設(shè)計(jì)，主要是在確立了元素特性及層級(jí)關(guān)系后，以整合元素成為組件的方式提升設(shè)計(jì)及適配效率。
以上就是「去邊界化」設(shè)計(jì)理念，包括定義元素三大特性：延展性、吸附性、流動(dòng)性，然后確定信息的橫縱向?qū)蛹?jí)關(guān)系，橫向功能關(guān)系緊密的元素可進(jìn)行組件化處理。這樣整個(gè)界面的元素都是層級(jí)清晰且不依靠邊界的，這時(shí)再給界面套用一個(gè)屏幕邊框就非常有依據(jù)了，且能保障所有適配界面具有統(tǒng)一性。
梳理清楚設(shè)計(jì)理念之后，還需要將上述原則梳理形成設(shè)計(jì)規(guī)范，同步至團(tuán)隊(duì)所有成員，以達(dá)到團(tuán)隊(duì)共識(shí)保障最終的效果呈現(xiàn)。
4. 制定設(shè)計(jì)規(guī)范
以規(guī)矩為方圓則成，以尺寸量長短則得，設(shè)計(jì)規(guī)范可以幫助設(shè)計(jì)師快速認(rèn)知元素特性及使用規(guī)則，工作中快速復(fù)用通用元素，提升設(shè)計(jì)效率，且可以通過規(guī)范說明對(duì)新功能尋求設(shè)計(jì)指導(dǎo)和參考。
規(guī)范的貫徹執(zhí)行，可以保持產(chǎn)品設(shè)計(jì)語言與品牌形象的統(tǒng)一，保障在不斷更新迭代中產(chǎn)品體驗(yàn)不走樣。統(tǒng)一的使用體驗(yàn)可以保障用戶流暢的使用產(chǎn)品，快速識(shí)別產(chǎn)品功能，簡單高效進(jìn)行操作。此外通過規(guī)范說明，可以實(shí)現(xiàn)開發(fā)人員與設(shè)計(jì)師的高效溝通，另外，將組件開發(fā)形成設(shè)計(jì)組件庫，可以提升開發(fā)效率，方便代碼的復(fù)用。
在「去邊界化」的設(shè)計(jì)理念中設(shè)計(jì)規(guī)范也是不可缺少的環(huán)節(jié)，把定義好的元素特性和確定的組織結(jié)構(gòu)總結(jié)成設(shè)計(jì)規(guī)范，是把理論層面上的探索轉(zhuǎn)換成實(shí)踐指導(dǎo)。
以上就是完整的「去邊界化」設(shè)計(jì)理念在實(shí)際工作中的應(yīng)用：從定義應(yīng)用中元素的延展性、吸附性和流動(dòng)性，到把零散的信息元素組成橫向、縱向有序的結(jié)構(gòu)，并把上述特性和結(jié)構(gòu)形成設(shè)計(jì)規(guī)范在設(shè)計(jì)、開發(fā)團(tuán)隊(duì)中應(yīng)用推廣。
從蘋果發(fā)布會(huì)開始，滴滴設(shè)計(jì)團(tuán)隊(duì)內(nèi)部就開始進(jìn)行著iPhone X的適配工作。了解iPhone X的操作特性、探究滴滴出行應(yīng)用的適配規(guī)范、上線后跟蹤反饋等，適配只是一個(gè)很小的工作需求，但也可以做的很大，做的很多，我們希望抱著這種極致執(zhí)行的態(tài)度做好每一件事情。
從這次的適配工作中我們不僅看到了 iPhone X ，還看到了未來不斷會(huì)出現(xiàn)的新產(chǎn)品、新系統(tǒng)等，我們不滿足于一次次被動(dòng)的適配，更希望可以主動(dòng)的應(yīng)對(duì)變化，所以我們摸索出了「去邊界化」設(shè)計(jì)理念，希望這個(gè)理念能對(duì)大家的設(shè)計(jì)工作有所啟發(fā)，讓我們?yōu)槲磥碜龊脺?zhǔn)備。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章：
手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！
對(duì)于剛開始思考 UI 元素尺寸的新人，通常第一反應(yīng)都是去看官方規(guī)范，新人都以為官方設(shè)計(jì)規(guī)范的作用就是告訴你們?cè)氐拇笮『驮趺丛O(shè)置，只要看完了就能懂得如何設(shè)計(jì) iOS 或 Android 應(yīng)用。而實(shí)際上，這些規(guī)范并不能幫助你們解決這個(gè)問題，因?yàn)樵O(shè)計(jì)規(guī)范涵蓋的內(nèi)容遠(yuǎn)遠(yuǎn)比這些復(fù)雜。
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方不會(huì)提供一個(gè)列表，逐一羅列每個(gè)元素的長寬和其它參數(shù)，所以想弄明白，要自己在這兩套素材庫中選中元素查看。如下圖這個(gè)按鈕，我們就能看見它的參數(shù)值。
免費(fèi)獲取 → iOS 11設(shè)計(jì)規(guī)范發(fā)布了，來下載官方源文件！
在初期，我們想要設(shè)計(jì)出嚴(yán)格符合官方規(guī)范的設(shè)計(jì)，就可以嚴(yán)格照搬官方的元素設(shè)置。但是，即使官方的源文件包含的元素字體已經(jīng)非常多了，在實(shí)際設(shè)計(jì)過程中，還是會(huì)出現(xiàn)它們無法覆蓋的設(shè)計(jì)類型，需要依靠我們自己設(shè)置。
還有如字體的應(yīng)用，官方源文件使用的語言是英文，光是官方應(yīng)用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應(yīng)用面板中密密麻麻的字體類型。在真實(shí)的中文設(shè)計(jì)場景下，我們是不可能照搬這種規(guī)范的。
新人要明白，官方的規(guī)范，只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內(nèi)容，我們是無法設(shè)計(jì)出有趣個(gè)性化的設(shè)計(jì)的，比如下面這幾款已經(jīng)看不到 「 iOS 設(shè)計(jì) 」的應(yīng)用。
官方的參數(shù)決定我們?cè)O(shè)計(jì)的下限，當(dāng)你不知道該怎么做，或者設(shè)計(jì)的目標(biāo)就是以系統(tǒng)原生的體驗(yàn)和視覺為準(zhǔn)，那么照搬就行了。后面的文章要說的，就是脫離開這些束縛，正確自定義 UI 元素的尺寸。
UI 和平面不一樣的地方，就是極其關(guān)注元素屬性的具體數(shù)值。平面的排版無論是海報(bào)或畫冊(cè)，使用百分比、目測的形式就足以讓我們做出很多優(yōu)秀的作品，無需緊盯著其中出現(xiàn)的每個(gè)元素的長寬高數(shù)值。而 UI 的設(shè)計(jì)中，無論字體、圖標(biāo)還是按鈕，都需要我們嚴(yán)謹(jǐn)?shù)囟x它們的長寬高，如下圖設(shè)計(jì)一個(gè)按鈕的操作。
這么做的原因是因?yàn)樵陔娮悠聊恢校瑘D像的呈現(xiàn)是由屏幕中的像素點(diǎn)來完成的，像素點(diǎn)是最小的顯示單位，一個(gè)點(diǎn)只能顯示一個(gè)顏色，所以如果設(shè)置了帶有小數(shù)點(diǎn)的數(shù)值，那么這個(gè)元素的邊緣就會(huì)虛化。所以為了避免這種事情出現(xiàn)，我們就得用整數(shù)來定義元素的長和寬。
這當(dāng)中還涉及到不少比較復(fù)雜的屏幕顯示原理問題，尤其是和像素倍率相關(guān)的基礎(chǔ)知識(shí)，我會(huì)在另外的文章里分享，后面文章所有的長度單位默認(rèn)以 PT 為準(zhǔn)，即 XD 和 Sketch 默認(rèn)畫布的單位，PS 中設(shè)計(jì)需要在這個(gè)基礎(chǔ)上乘以2。
只有分隔線，是唯一可以不使用整數(shù)的例外，因?yàn)?1pt 的分隔線看起來會(huì)非常粗，一點(diǎn)也不精致，感興趣的同學(xué)可以自己在 Sketch 或 XD 中畫個(gè)列表然后用 1pt 的線條做分隔，再導(dǎo)出到手機(jī)里觀看效果。即使是官方應(yīng)用，也主要使用 0.5pt 的線條做分隔。
無論在 iOS 或 Android 的規(guī)范中，也都提到過使用 8 x 8 的網(wǎng)格做輔助，這導(dǎo)致網(wǎng)上有很多片面的文章會(huì)反復(fù)強(qiáng)調(diào)對(duì)元素的尺寸使用 8 的倍數(shù)。
實(shí)際上，我們?cè)谡鎸?shí)的設(shè)計(jì)環(huán)境中，建議大家使用 4 的倍數(shù)作為一般元素的尺寸倍率即可，如 8、12、16、20、24等，它的好處我會(huì)在后面的文章中做說明。如果發(fā)現(xiàn) 4 的倍數(shù)無法滿足某些特定的需要，如多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數(shù)如18、22、26等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
有了這樣的原則，并養(yǎng)成習(xí)慣，我們就能在每次設(shè)計(jì)前對(duì)元素尺寸有個(gè)大致判斷，然后再根據(jù)需要按 4 的倍數(shù)調(diào)整，如下面設(shè)計(jì)注冊(cè)登錄頁面的輸入框作為案例。
開始我使用 280 寬，44 高的尺寸，但是覺得有點(diǎn)僵硬，太正式了。這時(shí)候反思認(rèn)為應(yīng)該是輸入框太矮導(dǎo)致的，所以高度上改成 44+(4×2)=52 。這時(shí)候又覺得太高了，實(shí)際輸入內(nèi)容也沒那么寬，于是再對(duì)高減 4，寬減 40，獲取最終結(jié)果。
所以，因?yàn)檫@樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標(biāo)拖拽出來的（拖動(dòng)效率太低），而是在元素的屬性欄中填入它們的數(shù)值。UI 的設(shè)計(jì)過程就是一個(gè)不停鍵入?yún)?shù)和調(diào)整參數(shù)的過程。
以上就是對(duì)與 UI 元素尺寸定義的第一部分，因?yàn)橐v清楚需要花的篇幅太長，所以我會(huì)將后面具體的案例講解拆成 4 部分，分別由控件、文字、圖標(biāo)、組件部分組成。
這里要聲明，在我的語系中，控件指的是在界面中最基本的交互單位，如按鈕、滑塊、開關(guān)、分頁器等，更復(fù)雜的如動(dòng)態(tài)卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，會(huì)根據(jù)前面定義的規(guī)范，分別講解控件應(yīng)該使用的尺寸范圍：
按鈕是界面交互操作中使用最頻繁的元素了，當(dāng)然按鈕呈現(xiàn)的形式也多種多樣，比如可以是文字、圖片、圖標(biāo)、卡通形象等等。在這里，我們只聚焦于矩形的基礎(chǔ)按鈕。
在進(jìn)入具體參數(shù)的講解前，要先理解按鈕實(shí)際上是所有控件中最復(fù)雜的一個(gè)，并不是因?yàn)樵谠O(shè)計(jì)樣式上的復(fù)雜，而是因?yàn)榘粹o承載了最多的產(chǎn)品訴求，權(quán)重差異極大，例如看下面的案例。
在上圖中，可以點(diǎn)擊的東西不少，我們就說外觀是標(biāo)準(zhǔn)樣式的按鈕，就有 9 個(gè)。而這里面，權(quán)重最高的必然是 「加入購物車」。權(quán)重最低的，應(yīng)該是前往新品頁。
定義按鈕尺寸，我們首先要知道的是，按鈕在界面或整個(gè)應(yīng)用中的權(quán)重，尺寸和權(quán)重是成正比關(guān)系的。當(dāng)然，顏色也是對(duì)重要性表現(xiàn)的關(guān)鍵因素，不過不在這里展開。
按鈕高度
當(dāng)我們?cè)O(shè)計(jì)按鈕時(shí)，優(yōu)先要從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權(quán)重，分成高、中、低三類：
高權(quán)重的按鈕，類似登錄頁的注冊(cè)、登錄，購物詳情頁的購買，流程頁中的下一步，它的最小高度應(yīng)該從 40pt 開始遞增，低于這個(gè)大小，那么這個(gè)按鈕就很難在這個(gè)頁面起到視覺支撐，因?yàn)楦杏X太細(xì)了。
中權(quán)重的按鈕，類似個(gè)人主頁的關(guān)注、點(diǎn)贊、評(píng)論按鈕等。這個(gè)層級(jí)的按鈕依舊有比較高頻的交互次數(shù)，我們必須得保證它易于點(diǎn)擊。24pt 是在我經(jīng)驗(yàn)中便于點(diǎn)擊最小的尺寸了。這種按鈕通常是組件的一部分，不像層級(jí)最高的按鈕常常是處于一個(gè)孤立的空間，所以高度如果超出 40pt，就會(huì)對(duì)當(dāng)前模塊產(chǎn)生直觀的破壞。
低權(quán)重的按鈕，就類似查看更多、標(biāo)簽、詳情等類型，相對(duì)于按鈕的交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內(nèi)部文字或圖形元素即可。
使用上面這種方法，在頁面中根據(jù)權(quán)重定尺寸就可以了。還需要注意的是，不同尺寸的按鈕之間，高度的差距不要小于 4 ，否則差異太小不僅拉不開層次，還容易使視覺感受變差。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形也有，但是不能變成縱向的矩形。
按鈕的寬度主要和內(nèi)容掛鉤，內(nèi)容數(shù)量越多，按鈕自然也就越寬。唯一的例外，只有高權(quán)重的按鈕，可以無視內(nèi)容的數(shù)量。因?yàn)樗鼈冃枰嗟膮^(qū)域，往往都是撐滿屏幕內(nèi)容區(qū)域或全屏的，可以特殊處理。
普通按鈕，左右間距距離內(nèi)容過多，就會(huì)讓按鈕看起來非常的不協(xié)調(diào)。所以我們要根據(jù)內(nèi)容來設(shè)置按鈕左右的寬，最大寬度應(yīng)該小于內(nèi)容距離上下的 2 倍。
按鈕圓角
按鈕尺寸還有最后一個(gè)屬性，就是按鈕的圓角設(shè)置了。矩形的邊角有三種類型，即直角矩形、圓角矩形、半圓矩形。
為矩形設(shè)置圓角，是為了讓按鈕看起來有一定的圓潤感不會(huì)顯得太尖銳，這種圓角的數(shù)值賦予要適當(dāng)，只要超出了一定的范疇，就會(huì)對(duì)視覺的和諧產(chǎn)生影響，我習(xí)慣稱呼為——半圓不圓，如下圖右側(cè)的錯(cuò)誤案例。
所以，我們?cè)谠O(shè)計(jì)圓角的過程中，一定要仔細(xì)感受圓角在畫面中的和諧性。而圓角的設(shè)置范圍，不大于高度的 1/4。例如，一個(gè)24pt的圓角矩形，圓角的尺寸就應(yīng)該不大于 6pt，如上圖的效果。
以上就是按鈕相關(guān)尺寸定義的說明，當(dāng)然，在真實(shí)的設(shè)計(jì)需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
輸入框也是我們比較常用的元素之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號(hào)密碼輸入框，以及首頁上方的搜索欄了。
輸入框的使用高度尺寸，常規(guī)在 36-56pt 之間。低于 36pt 時(shí)則輸入框看起來會(huì)非常擁擠，比如我用下面學(xué)生的案例做個(gè)演示。
常見的步進(jìn)器，就是輸入框和按鈕的結(jié)合。左右有兩個(gè)用來增加數(shù)量的按鈕，中間是允許我們直接鍵入數(shù)字的輸入框。在尺寸上，它也介于兩者之間，高度在 28 – 40 之間。下面我再用學(xué)員的作業(yè)做次演示，當(dāng)?shù)陀?28 以后，就會(huì)發(fā)現(xiàn)在屏幕中的占比實(shí)在太小了。
步進(jìn)器中常見的錯(cuò)誤，是在我們?cè)O(shè)置圓角外框時(shí)，繪制左右兩個(gè)按鈕，并沒有合理的減去內(nèi)側(cè)的圓角，這是絕對(duì)不應(yīng)該忽略的細(xì)節(jié)。
下拉菜單要注意包含多種狀態(tài)，默認(rèn)、展開和選中。默認(rèn)狀態(tài)與輸入框類似，主流的高度也使用 36-56pt。但是，當(dāng)菜單展開后，下方多出來的選項(xiàng)菜單，就值得注意了。
菜單的寬度正常情況下與默認(rèn)狀態(tài)相同，而高度根據(jù)里面包含的選項(xiàng)數(shù)量決定。單行選項(xiàng)，高度是不大于默認(rèn)的選項(xiàng)框的。新手很容易在彈出菜單中設(shè)定過小的高度，使整個(gè)控件看起來會(huì)非常的別扭。
開關(guān)也是按鈕的一種形式，通常出現(xiàn)在設(shè)置頁的列表中，上方就是它主流的幾種樣式。在設(shè)計(jì)開關(guān)的時(shí)候，要先確定一個(gè)矩形區(qū)域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt。之后再將細(xì)節(jié)填入。
滑塊形式接近開關(guān)，通常在中間有一個(gè)操作節(jié)點(diǎn)，下面有一個(gè)用來表示區(qū)間的線條。實(shí)際上我們?cè)撟龅木褪欠謩e決定它們的尺寸。
節(jié)點(diǎn)如果做的太小，不僅會(huì)顯得難看，而且會(huì)讓人覺得很難操作。它的直徑應(yīng)該在 16-28pt 之間。而下面的橫線，寬度由所在內(nèi)容區(qū)域的寬決定，高度一般在1-4pt 之間。
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進(jìn)去，就要讓它看起來和諧。大多數(shù)人在定義指示器時(shí)，不是太大，就是太小，可以只從后面提供的尺寸中選擇，就能保證指示器的尺寸不會(huì)出錯(cuò)。
指示器主要是圓形和矩形兩種形式：
提示紅點(diǎn)也是大多數(shù)應(yīng)用會(huì)使用的一個(gè)控件，它的大小應(yīng)該在 24-32pt 之間。作為一個(gè)圓形，這個(gè)控件設(shè)計(jì)起來很容易，但設(shè)計(jì)師往往忽略一件事，那就是如果中間的數(shù)值超過 10 變成 2 位以后，要怎么處理。
在設(shè)計(jì)這樣的元素時(shí)，我們要用一個(gè)矩形元素來表現(xiàn)，即畫一個(gè)正方形，然后將圓角設(shè)成最大，那它看上去就是一個(gè)圓形。那么每增加一位字符，我們就需要為這個(gè)矩形增加該字符的寬度，可以用左右間距判斷。
因?yàn)橄嗤痔?hào)下，不同英文、數(shù)字的寬度都是不一樣的，我們要根據(jù)實(shí)際輸入的內(nèi)容所增加的寬度，去增加圓點(diǎn)的寬度。
最后一個(gè)控件，就是分頁控件了，安卓中的 Tabs。這個(gè)元素在設(shè)計(jì)時(shí)也受到排版空間的影響，較為寬松的排版風(fēng)格，高度就比較大，若擁擠則反之。
下面是高度：
分頁控件主要應(yīng)用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時(shí)候分頁器是沒有背景色的，但是背景矩形是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個(gè)完整的分頁控件，里面會(huì)包含兩個(gè)或以上的選項(xiàng)，所以定義每個(gè)選項(xiàng)的寬也是必要的。通常，我們有兩種定義方法，一種是選項(xiàng)少時(shí)，直接進(jìn)行均分顯示，另一種是選項(xiàng)較多，采取定寬模式，寬度最小建議在 64pt 以上，才不會(huì)顯得過度擁擠。
分頁控件選項(xiàng)處于選中狀態(tài)時(shí)，有的設(shè)計(jì)是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個(gè)元素如果定義得不好，會(huì)讓整個(gè)控件看起來非常粗糙，它需要在樣式中能起到畫龍點(diǎn)睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應(yīng)該使用的高度都應(yīng)該不大于 2pt。寬度的定義，第一種和每個(gè)選項(xiàng)背景區(qū)域相等，第二種則可以在 8-16pt 間（小于文字總寬）。下面是正確設(shè)計(jì)效果：
前面說到了不少元素的尺寸，那么真實(shí)應(yīng)用的效果會(huì)如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
可以看到，模塊大小很均衡，看上去不會(huì)覺得哪些地方太大或太小，只要稍加填充樣式，那么就可以變成完整的設(shè)計(jì)稿了。
這些參數(shù)雖然不能覆蓋所有特殊的狀況和需求，但至少可以保證這些控件不會(huì)被設(shè)計(jì)得很奇怪。當(dāng)你們沒有對(duì)于特殊化風(fēng)格設(shè)計(jì)的控制能力時(shí)，就先學(xué)會(huì)正確的使用上面的這些參數(shù)吧。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章：
手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！
1. 理論表述
任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需要的時(shí)間，與目標(biāo)距離正相關(guān)，與目標(biāo)大小負(fù)相關(guān)。
2. 研究背景
1954 年，Paul Morris Fitts 根據(jù)信息類比提出一個(gè)假設(shè)，該假設(shè)能夠量化「移動(dòng)到目標(biāo)選擇任務(wù)」這個(gè)操作的難度「1」。雖然該假設(shè)還未涉及到人機(jī)交互中的具體參數(shù)，卻給了后來的交互研究人員極大的啟發(fā)。
我們現(xiàn)在經(jīng)?？吹降?Shannon 公式（即上面那個(gè)公式）是由約克大學(xué)教授 Scott Mackenzie 在 1992 年提出的一個(gè)菲茨公式的變體「2」，該變體被廣泛地應(yīng)用于需要指針操作的人機(jī)交互系統(tǒng)當(dāng)中。作為交互設(shè)計(jì)和 UI 設(shè)計(jì)的理論基礎(chǔ)，它更簡潔明了地闡述了時(shí)間 T 和目標(biāo)距離 D 以及目標(biāo)大小 W 之間的函數(shù)關(guān)系：因?yàn)橐?2 為底的指數(shù)函數(shù)是遞增函數(shù)，所以，T 與 D 正相關(guān)（D 越大 T 越大），而與 W 負(fù)相關(guān)（W 越大 T 越?。?。
人們做出一個(gè)移動(dòng)指針的操作通常需要兩步：
菲茨定律所包含的兩點(diǎn)內(nèi)容：
綜合兩者來看，菲茨定律中的 D 在第一步中起更為明顯的作用，而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示，主要也是從這兩方面入手。
案例1：系統(tǒng)右鍵菜單，微信彈出菜單
最典型的例子就是菜單，無論是 PC/Mac 中的右鍵菜單還是微信聊天頁里面的加號(hào)鍵都遵循著這一原則。作為用戶，點(diǎn)擊這類按鈕之后一定會(huì)有后續(xù)的任務(wù)和操作，所以這些任務(wù)都被安排在了距離所點(diǎn)擊區(qū)域更近的菜單中。
案例2：夸克和 Safari 的 url 輸入框位置比較
另外一個(gè)例子是瀏覽器的搜索欄輸入框，現(xiàn)在已經(jīng)有一些瀏覽器（比如簡單搜索、夸克）會(huì)將輸入框以及一些其他更常用操作置于底部，這是因?yàn)槲覀冋Ｎ粘质謾C(jī)時(shí)，大拇指離底部更近，所以需要進(jìn)行點(diǎn)擊操作的話底部的輸入框操作起來更方便，也更快。
這一點(diǎn)在現(xiàn)今的 APP 中做得已經(jīng)非常到位了。
案例3：哈羅出行
作為哈羅單車租用操作的入口，頁面中的「開鎖」按鈕做得足夠大，用戶可以輕易快速地點(diǎn)擊到這個(gè)使用頻率最大的按鈕。登錄（也就是開始）按鈕也是一樣的道理。
還有一個(gè)比較特殊的就是對(duì)于邊角的利用，無論是在 Windows 還是在 MacOS 中，邊角總是有一些比較重要的操作，比如 Windows 的「開始菜單」（在左下角），MacOS 的 Dock 欄（在底部）以及頂部狀態(tài)欄，包括 Mac 特有的觸發(fā)角。
案例4：MacOS 觸發(fā)角設(shè)置
為什么微軟和蘋果不約而同地選擇了在屏幕最邊角放置這些權(quán)重相當(dāng)之高的組件或者操作呢？在硬件設(shè)備中邊角是一個(gè)極其特殊的存在，由于指針再怎么移動(dòng)都不可能超越屏幕邊界，只能停留在邊界上，所以邊界對(duì)于用戶的操作來說是「無限可觸發(fā)」的，這有什么意義呢？這意味著對(duì)于隱性存在的目標(biāo)來說，W 趨于無限大。
既然 W 趨于無限大，根據(jù)公式時(shí)間 T 就趨于常量 a。
結(jié)論就是無論指針距離目標(biāo)物多遠(yuǎn)，所需要花費(fèi)的時(shí)間都已經(jīng)達(dá)到了理論的最小值，輕松且高效。而在移動(dòng) APP 中同樣有邊角的應(yīng)用，比如最近拿了 Google Play 設(shè)計(jì)大獎(jiǎng)的 Drops。
案例5：Drops
創(chuàng)新的交互將屏幕底邊充分的利用了起來，只要將單詞移到底部，就代表用戶已經(jīng)記住這個(gè)單詞了。注意整個(gè)底部都是可以觸發(fā)的，而不僅僅是腦袋那個(gè)圓形區(qū)域。本來「移動(dòng)」這個(gè)操作對(duì)于「按鈕」來說更加繁瑣，但是在 Drop 的應(yīng)用場景下這樣的移動(dòng)反而沒有覺得麻煩，滑起來相當(dāng)帶勁。
菲茨定律給我們的啟示通常都是正向的，都是以縮短用戶的操作時(shí)間為主要目標(biāo)，但也有一些場景需要反其道而行之。比如如果遇到需要用戶謹(jǐn)慎的操作時(shí)，可以逆向運(yùn)用菲茨定律，增加操作的復(fù)雜度。
案例6：iPhone 關(guān)機(jī)和微信刪除聊天窗
iPhone 的滑動(dòng)關(guān)機(jī)延長了用戶關(guān)機(jī)操作的時(shí)間，以提醒用戶此操作為不可逆，需要謹(jǐn)慎操作。微信也是同理，甚至還縮小了刪除按鈕的大小，以達(dá)到警示的目的。
另一個(gè)典型就是彈出窗口的關(guān)閉按鈕。
案例7：Luckin Coffee 的彈出窗
彈出窗口里一般都包含了開發(fā)商的推廣、廣告、運(yùn)營活動(dòng)等等，所以開發(fā)商會(huì)希望用戶花盡量多的時(shí)間去注意到它們的內(nèi)容，這時(shí)候雞賊的開發(fā)商會(huì)把關(guān)閉按鈕做得又小又遠(yuǎn)（遠(yuǎn)離視覺中心），讓用戶花更多的時(shí)間去尋找和點(diǎn)擊它們，效果拔群。
注意點(diǎn)1：D 不能過分短
過分短的間距不僅無法提升操作效率，反而會(huì)造成視覺壓力從而降低用戶體驗(yàn)。
反面案例1：唯物魔改版
按照菲茨定律魔改的唯物登錄頁面，理應(yīng)操作得更迅捷方便，然而實(shí)際上除了視覺上造成額外的擁擠感、破壞畫面負(fù)空間構(gòu)成之外，我嘗試著點(diǎn)了一下覺得十分逼仄擠手，所以過度縮減按鈕間的間距并不合理。
注意點(diǎn)2：W 不能過分大
大尺寸的點(diǎn)擊目標(biāo)確實(shí)能夠有效地降低用戶操作成本，但是過分大的目標(biāo)也會(huì)很直接地破壞畫面的平衡，浪費(fèi)屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關(guān)系，當(dāng)按鈕已經(jīng)足夠大時(shí)，再增大就沒有什么體驗(yàn)上的提升了，如下圖所示。
反面案例2：KEEP 魔改版
與唯物類似，當(dāng)按鈕大到一定程度之后，會(huì)對(duì)畫面造成恐怖的破壞效果。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章：
手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！
現(xiàn)在大多數(shù)的 PM /交互/ UI 設(shè)計(jì)師，在設(shè)計(jì)產(chǎn)品的時(shí)候都是以 iOS 為基準(zhǔn) 思考產(chǎn)品上的各種功能邏輯、交互狀態(tài)，而很容易忽略了某些功能在 Android 里并不能「一稿適應(yīng)兩端」，部分產(chǎn)品差異在安卓上是不一樣的。
所以本文就講下 Android 和 iOS 9大產(chǎn)品/交互差異，希望你在日后的產(chǎn)品設(shè)計(jì)時(shí)，可以考慮到更多層面的知識(shí)點(diǎn)。
對(duì)在于一些虛擬商品的支付上，如 vip 會(huì)員、xx幣，xx豆。iOS 和 Android 就存在不同的支付規(guī)則：Android 基本無限制，無抽成。而 iOS 限制比較多，而且要抽成大約 30% 的手續(xù)費(fèi)。
舉個(gè)例子：同樣充值 30 元，Android 端會(huì)得到 300 金幣，而在 iOS 中，只有 210 金幣。正因這個(gè)抽成規(guī)則的不同（沒辦法，這是蘋果硬性規(guī)定的），才會(huì)出現(xiàn)各種平臺(tái)的虛擬貨幣，在 Android 和 iOS 中的充值比例是不一樣的，如快手：
所以對(duì)于虛擬商品在 iOS 端的抽成規(guī)則，在產(chǎn)品設(shè)計(jì)時(shí)一定得考慮清楚，因?yàn)檫@關(guān)系產(chǎn)品的商業(yè)和盈利模式。通常有 2 種解決思路：
A. 讓用戶承擔(dān) 30% 的抽成：
同樣的價(jià)格，iOS 用戶得到的商品少些
如同樣充值 30 元，Android 端會(huì)得到 300 金幣，而在 iOS 中，只有 210 金幣。像快抖音、陌陌等各種貨幣充值。
同樣的商品，iOS 用戶支付更高的費(fèi)用
如 3 個(gè)月的 vip 會(huì)員，Android 端定價(jià)是 58 元，iOS 端則可以設(shè)為 68 元。如優(yōu)酷、騰訊視頻的 vip 會(huì)員價(jià)格。
B. 公司自己承擔(dān) 30% 的抽成：
如 iOS 端充值 30 元，公司實(shí)收 21 元，但 iOS 用戶能得到和 Android 一樣的 300 個(gè)金幣。（理論上是有這個(gè)解決思路，但現(xiàn)實(shí)中很少有公司去實(shí)現(xiàn)，畢竟抽成成本就擺在那里）
另外還需要注意的是：因?yàn)槌槌梢?guī)則的不同，對(duì)于同一個(gè) ID 的賬戶余額，在 Android 和 iOS 端中是不能通用的。因此在產(chǎn)品設(shè)計(jì)時(shí)需要將這點(diǎn)告知用戶，預(yù)防用戶犯錯(cuò)、以及惡意刷幣。
Android 由于開源的特性，因此對(duì)接的都是第三方支付平臺(tái)，如微信支付、支付寶、銀聯(lián)卡等。 而 iOS 出于系統(tǒng)的封閉性和安全性考慮，只能調(diào)用蘋果自己的支付系統(tǒng)：登錄 Apple ID ，然后用授權(quán)的支付方式（支付寶、銀聯(lián)卡）進(jìn)行付款。
「狀態(tài)欄」也就是我們手機(jī)界面最頂部的電池欄，它除了可以在不同背景里切換顏色外，在交互的觸發(fā)上，Android 和 iOS 中也各不相同。
iOS ：用戶在 Y 軸滾動(dòng)了很長內(nèi)容時(shí)，點(diǎn)擊狀態(tài)欄可以快速回到初始位置。
Android ：無論用戶滾動(dòng)了多長內(nèi)容，都是點(diǎn)擊無任何效果。
雖然這一交互差異是 iOS 專有的，但它卻啟發(fā)我們一個(gè)新的設(shè)計(jì)思路：在必要的時(shí)候，狀態(tài)欄可以為產(chǎn)品承載新的交互狀態(tài)。如網(wǎng)易的 LOFTER（ iOS 端），用戶離開音樂播放界面時(shí)，狀態(tài)欄就用于顯示音樂信息和操作入口，方便用戶在瀏覽其他內(nèi)容時(shí)可以快速關(guān)閉音樂，極大提升了用戶的操作效率。
這種大多應(yīng)用于運(yùn)營的「拉新」場景，為了能讓新用戶得到好處（紅包、優(yōu)惠券、更好看的內(nèi)容等）。通常會(huì)讓新用戶下載產(chǎn)品 APP 領(lǐng)取。而由于 Android 與 iOS 的下載方式不同，會(huì)帶來不同的交互狀態(tài)和產(chǎn)品邏輯。
Android ：可以在當(dāng)前頁面（后臺(tái)）下載，也可以在應(yīng)用商店下載；過程中可以顯示進(jìn)度，且允許用戶暫停下載；下載完成后調(diào)起安裝頁面，用戶可以取消安裝，也可以自動(dòng)安裝……正因?yàn)?Android 下載軟件的各種便捷性，所以才會(huì)帶來各種交互狀態(tài)：未下載、下載中、暫停中、已下載但未安裝、已安裝。這些都是交互設(shè)計(jì)師需要特別注意的，每個(gè)不同的狀態(tài)背后都會(huì)不同的產(chǎn)品邏輯。
iOS ：只能跳轉(zhuǎn)到 App Store 里下載，所有下載流程和狀態(tài)都是在那完成的，可以脫離開活動(dòng)頁面，相比于 Android 的下載方式就簡單很多。跳轉(zhuǎn)的方式可以是全屏幕，也可以是半屏。
Android ：由于安卓的開源特性，當(dāng)有新版本時(shí)都會(huì)提示用戶更新，且每個(gè)產(chǎn)品內(nèi)部都帶有「版本更新」入口。而更新的方式可分 2 種：
iOS ：而 iOS 端出于對(duì)用戶體驗(yàn)的考慮，是禁止向用戶提示版本更新信息的。這也是為什么絕大部分的 iOS 產(chǎn)品，都是沒有「版本更新」入口的原因（像 QQ 、支付寶、百度網(wǎng)盤等大廠產(chǎn)品）。
即使有，點(diǎn)擊了也直接跳轉(zhuǎn)到 App Store 查看版本情況。且下載渠道都固定在 App Store 里。理所應(yīng)當(dāng)?shù)?，軟件的更新方式也只能?App Store 里進(jìn)行，無法做到與 Android 一樣后臺(tái)下載、后臺(tái)更新。
在手機(jī)鍵盤里輸入文字時(shí)，iOS 由于系統(tǒng)的限制，對(duì)文字的發(fā)送指令只能在鍵盤上來完成，因此 iOS 用戶的交互操作都全部集中在鍵盤右下角。
而 Android 端就靈活很多，不僅可以在鍵盤上執(zhí)行發(fā)送指令，也可以在輸入欄/搜索欄周邊新增操作入口。
長按一張圖片后，都會(huì)彈出一個(gè)列表浮層，因?yàn)?iOS 手機(jī)只有一個(gè)「Home 鍵」 而已，為方便用戶退出浮層才增加了「取消」入口。
而 Android 手機(jī)本來就有「返回」虛擬鍵，安卓用戶的退出/返回行為都習(xí)慣于通過虛擬鍵觸發(fā)，所以多做一個(gè)「取消」的意義性不大。
iOS 端一直教育著用戶使用「左滑」刪除列表信息，所有的刪除功能都是支持「左滑」來實(shí)現(xiàn)的。
而 Android 系統(tǒng)大部分只能通過「長按」來觸發(fā)編輯狀態(tài)，其中就包括了刪除功能。
不過現(xiàn)在也有極少數(shù)的產(chǎn)品，正在逐漸打破這兩端間的「刪減」界限，比如網(wǎng)易郵箱（Android）就做到了左滑刪除信息。
當(dāng)我們第一次打開產(chǎn)品、允許了獲取消息通知的權(quán)限后，所有的信息傳輸都會(huì)基于服務(wù)器進(jìn)行推送。而兩端在這塊的推送機(jī)制又有所不同：
iOS ：所有新信息都會(huì)實(shí)時(shí)推送到你的手機(jī)里，即使你關(guān)閉了軟件，還是一樣會(huì)收到提示。就算是你處于斷網(wǎng)狀態(tài)，信息也會(huì)先儲(chǔ)存于蘋果服務(wù)器，等你聯(lián)網(wǎng)時(shí)再一次性把收到的信息推送給你。既釋放手機(jī)內(nèi)存，又不會(huì)讓用戶遺漏有新消息。
Android ：而安卓則不同，你若退出了產(chǎn)品，數(shù)據(jù)的推送只有等你再次打開產(chǎn)品時(shí)，才會(huì)通知你有多少新信息。雖然減少了對(duì)用戶的干擾性，但也增加了服務(wù)器數(shù)據(jù)儲(chǔ)存的壓力，還容易耽誤用戶接收新消息。
也就是我們手機(jī)的搜狗輸入法鍵盤，在微信聊天內(nèi)、手機(jī)短信里復(fù)制了一段內(nèi)容后，由于 Android 與 iOS 的平臺(tái)特性差異，會(huì)給兩端用戶帶來不同的交互差異。
iOS ：復(fù)制完文字后，打開輸入法鍵盤會(huì)顯示來自剪切板的文字內(nèi)容。用戶只需點(diǎn)擊，即可將文字復(fù)制在搜索欄、輸入欄等需要文字填寫的操作區(qū)域里，無需觸發(fā)「粘貼」操作。
Android ：而有些安卓機(jī)（如小米/錘子/樂視等)，無論你復(fù)制了什么信息（文字、數(shù)字、網(wǎng)址等），都很難實(shí)現(xiàn)輸入法里的「剪切板」功能。用戶需要觸發(fā)「粘貼」功能，才能輸入剛剛的復(fù)制內(nèi)容。
而對(duì)于特定的信息類型：如網(wǎng)址。用戶復(fù)制網(wǎng)址往往都帶有極強(qiáng)的目標(biāo)性、搜索性，一些瀏覽器產(chǎn)品會(huì)預(yù)判用戶這一操作行為，將復(fù)制的網(wǎng)址前置展示出來，以抵消 Android 端對(duì)于復(fù)制文字帶來的系統(tǒng)限制。如 QQ 瀏覽器（安卓端）就有 2 種解法方法：
方法1：利用安卓系統(tǒng)的消息權(quán)限，在手機(jī)界面的頂部彈出網(wǎng)址欄提示，無論是在微信還是短信中，復(fù)制網(wǎng)址后都能快速地觸達(dá)目標(biāo)。
方法2：復(fù)制網(wǎng)址后打開搜索功能，會(huì)將網(wǎng)址自動(dòng)定位并粘貼到搜索欄中，便于用戶查詢。
而 UC 和百度也有類似的解決辦法：將復(fù)制后的廣泛信息（文字/數(shù)字/網(wǎng)址/郵箱地址等等）嵌入在搜索框下方，用戶點(diǎn)擊就能搜索。
這也是一種妥當(dāng)?shù)慕鉀Q方法，因?yàn)橛脩艨蓮?fù)制的信息類型特別廣泛、目標(biāo)不是很清晰。無法準(zhǔn)確判斷出用戶一定會(huì)有搜索訴求。所以才將復(fù)制后的信息放在搜索框下面，而不是自動(dòng)粘貼到搜索框中，既考慮了用戶目標(biāo)，又兼顧了操作效率。
以上就是 Android 與 iOS 的差異總結(jié)，若有描述得不當(dāng)請(qǐng)多指教！下面是總結(jié)文件。
轉(zhuǎn)載請(qǐng)注明：優(yōu)設(shè)網(wǎng)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
更多精彩文章：
手機(jī)及小程序界面設(shè)計(jì)之一：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之六：讓設(shè)計(jì)更有說服力的20條經(jīng)典原則：菲茨定律
手機(jī)及小程序界面設(shè)計(jì)之八：如何適配iPhone X？來看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤！
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com