UI設計的10條經驗法則

Sponsor

UI是人們了解產品的重要組成部分，甚至決定用戶第一眼對產品的印象。在設計過程中，設計師們總結出許多經驗之談，并且分享出來，互相交流，探討更好的設計。然而，就像無招勝有招，我們理解運用設計規范的同時，也要獨立思考，在有更好的想法時拋開規則的束縛，去呈現推陳出新的設計。畢竟，設計沒有對錯，只有好與不好。

以下是UI設計中要遵循的標準做法清單。

這些都不是一成不變的 —— 只是我認為在日常UI設計工作中可以幫助您的一系列方法。

請記住，設計是在框架外思考的，這意味著有時候要打破規則 —— 請把這些建議視作思維上的開拓，而不是簡單地生搬硬套。

一、為密度而不是像素設計

像素值是dp值的3~4倍

如果你不熟悉，密度就是屏幕或PPI每一英寸的像素數?！癲p”單位是“密度無關像素”的縮寫，有時候也縮寫為“dip”.

在設計界面時，建議不要針對像素進行設計，而是針對設備的像素密度進行設計。這確保界面的元素在不同的設備尺寸上都能正?？s放。

樣做的原因是，如果我們設計一個按鈕資源，例如200 x 50dp，那么它在160ppi的屏幕上顯示為200 x 50px，在320ppi的屏幕上顯示為400 x 100px，即相比原來的資源尺寸放大2倍。

由于一些設備的屏幕每英寸的像素比其他設備多，素材的資源不會在像素密度高的屏幕上顯示得更小，而是以2倍、3倍或4倍于原來的尺寸進行渲染。這樣可以確保所有的資源在不同的像素密度屏幕上保持它們的大小。

例如，iPhone XS Max的屏幕尺寸為414 x 896，但這不是像素，而是點數（DPI），以像素為單位，則為1242 x 2688px?？紤]到這一點，在為iPhone XS Max設計的時候，我會以414 x 896dpi進行設計，然后縮放3倍來交付資源。

二、使用8dp增量

為什么設計間距以8為增量？好吧，對此我有一個簡單地解釋：我們使用魔術數字8而不是5的原因是，如果設備的分辨率是1.5倍，則無法正常顯示奇數。

加之現代的大多數屏幕尺寸都可以被8整除，這有利于在其他設備上調整以適配我們的設計。

在8點網格上以8的增量進行設計，這使得我們的設計可以保持一致性。我們不再需要去揣摩間距的比例，并且一切都和我們所定義的間距完全一致。

有關該主題更全面的探討，請參閱Bryn Jackson的8點網格文章。

三、刪除線和邊框

在設計時，你應該不時以全局的視角去判斷容器是否使UI混亂。通常來說，用于分隔內容的邊框和線條可以用空白來替代。

我們設計大多數元素的時候，通常都放置在網格中，只是簡單地刪除這些容器的痕跡，可以讓頁面看起來不那么密集，給我們的元素更多的呼吸空間。

四、關注對比

運用對比不僅可以吸引用戶的眼球瀏覽頁面上的相關信息，還可以提高產品的無障礙設計。

設計產品好比建造圖書館或學校等公共建筑，它需要包含所有人，包括盲人、色盲和視覺障礙人群。

Web內容無障礙指南（WGAG）要求至少4.5:1的對比度。

為了確保你的設計符合標準，可以安裝Starkch插件，該插件可以檢查你的設計是否符合無障礙設計規范。

五、熟悉才是好的

將某些元素視作標準的原因有很多。

例如，按鈕上的文本是“開始免費試用”，而你將按鈕設計為圓形，那么它將占用不必要的垂直空間。

除此之外，用戶期望在整個網絡中獲得相似的體驗。如果你的網站、App或者軟件和用戶所習慣的功能不一樣，這就不那么直觀，他們會對這種體驗感到沮喪。

因此，最好在當前的設計規范中進行創新，而不是“重復發明輪子”（譯者注：IT術語，重新創造一個已有的或是早已被優化過的基本方法?？梢岳斫鉃樵O計中有很多規范是根據測試和反饋總結出來的，自己沒必要再去重新從零開始總結這些已有的理論）。

六、利用顏色的視覺重量建立層次結構

每種顏色都有它的視覺重量，可以幫助我們在內容中建立層次結構。通過使用淺色調的顏色，我們可以根據內容的重要性進行層次劃分。

經驗法則在這里是，如果一個元素比其他元素更重要，那么它應該有更高的視覺重量。這有利于用戶快速瀏覽頁面，區分重要和次要信息。

更大、更粗的信息首先吸引用戶眼球，然后他們繼續瀏覽下方的補充信息。

七、避免使用兩種以上字體

普遍接受的設計慣例是在界面中限制使用字體的數量。通常，兩個不同的字體就足夠了。但這不代表你不能使用更多的字體，但除非你有充分的理由，否則不要這樣做。

這個問題的解決之道是使用字體系列。

通過使用字體系列，我們能夠在設計中使用同一字體的變種。同一系列的字體在視覺上般配，他們更加靈活和一致。

選擇字體時，可以找到具有不同重量的字體系列，比如輕、常規、中等、加粗、超粗體以及濃縮、擴展和斜體。這將為你提供更多空間來探索不同的樣式，而無需添加其他字體。

八、辨別而不是回憶

熟悉是產品設計中的好習慣，因為，為什么要讓用戶思考？

結帳頁面、email的收信箱、搜索歷史、后退按鈕等等都是很好的例子。

在結帳頁面（如果設計得好的話），我不需要去記住我所購買的商品。我能夠辨認出我所購買的商品，而不用費勁去記憶。

我搜索的內容

在我的Gmail收件箱，一眼就能確定哪些是已閱、哪些是未讀，不用我思考?；蛘?，當我登錄亞馬遜，我能馬上回到上次我離開時的地方，因為它會告訴我最近瀏覽的歷史記錄。

“通過使對象、操作和選項可見，最大程度地減少用戶的記憶負擔。用戶不需要記住對話的這部分信息到那部分信息。需要時，系統的使用說明應該清晰可見或者容易獲取” ——?尼爾森·諾曼的群組。

九、不要拖累我的速度

作為用戶，速度和效率事關重要。我正在使用應用程序來解決要完成的特定任務。

“我想要更快” —— Ricky Bobby

如果將支票電子化存入我的銀行賬戶的體驗令人愉快，那很好，但不要讓你的創造力妨礙我作為用戶的目標。

動畫和微交互的首要經驗法則是如果體驗增加不必要的時間，那么它就不能提高體驗。

有目的地使用動畫可以提高體驗，但是增加不必要的干擾和動線元素則不利于體驗。

我經?？碊ribbble上的著陸頁設計，用戶滾動頁面時會伴隨著動畫效果。通常情況下，動畫會隨著動畫的淡化和移動而變得過于動畫化，而對體驗本身的關注卻很少。作為用戶，當屏幕上發生太多事情需要我注意些什么的時候對于我來說是個挑戰，這也浪費我寶貴的時間。

抱歉拿你當案例 Dribbble用戶?:/

“許多研究表明，界面動畫的最佳速度在200-500毫秒之間。這組數據基于人類大腦的特征。任何短于100毫秒的動畫都是瞬時的，根本不會被感知到。而動畫時間超過1秒會傳達出一種延遲感，使用戶感到無聊?！?/p>

這兩個案例想要告訴你的是，如果你正在使用動畫，請有目的地去使用。如果你有目的地使用動畫，不要讓我等待500毫秒以上。在2019年只要超過1毫秒就能激怒你的用戶。

十、少即是多

lmk 如果你想要投資這個想法

每次我們增加頁面上的信息：按鈕、文本、圖像、動畫和插畫等等，信息之間會相互競爭，如果頁面上的信息太多，元素的重要性就會被稀釋。

最完美的例子是著名的Google主頁。設計上沒有將用戶淹沒在可能不需要的信息洪流中，而是將設計重點放在主要行為上：搜索。

抱歉，Yahoo，我不得不這樣做

我最喜歡的設計名言：“實現完美，不在于沒有其他東西往里加，而在于沒有其他東西可刪減的時候” ——?Antoine de Saint-Exupery

原文作者：Danny Sapio
原文地址：https://uxdesign.cc/@dansapio
翻譯作者：小譚 | UI設計師
編輯整理：鉛筆頭 | 設計達人編輯組

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。