創建美觀、可用和高效的UI界面需要花費時間,同時還需要來回多次的設計修改。不斷地調整,最終產出令客户、用户和自己真正滿意的東西。
其實通過一些簡單的調整,可以快速改善UI設計。在這裏,總結了一些易於實踐的小技巧,這些技巧可以毫不費力地幫助設計師改善設計,併為以後的設計實踐提供有用的指導。
當涉及長篇內容時,大面積的深色粗體字會給人一種沉重感,而且很跳躍。
通過選擇類似深灰色(#4F4F4F)這樣的顏色可以很容易地解決這個問題,使文字更容易被識別。
當字體變小時,增大行高可以獲得更好的可讀性和易讀性。
這裏介紹兩個容易被混淆的概念——行高和行間距:
設計時不必總是用多種顏色來填充設計。如果項目允許,只需使用固定的色板,通過選擇基礎色,然後調整色調和顏色深淺,利用這種簡單的方式為設計增加一致性。
通過結合使用字體大小、權重和顏色,可以輕鬆突出UI中最重要的元素。進行簡單的調整即可使用户體驗更好。
在設計UI圖標時,要保持一致。確保它們具有相同的視覺樣式,相同的比重、填充或輪廓。
圖標通過視覺手段為用户提供必要的信息,所以保證功能相同的圖標元素一致,外觀視覺一致。
通過使用顏色對比、尺寸和標籤,確保“行動要求”儘可能突出。如果可以的話,不要總依賴圖標。也可以使用文本標籤,以便用户能更好地理解。
注:行為召喚(Call To Action): 透過設計讓用户想到要做某種行為,例如提示用户去觸發按鈕、文本或圖片。
填寫任何形式的表單時,在用户剛進行的操作旁邊及時出現一條錯誤反饋,是一個簡單但有用的額外視覺輔助。
在設計要在產品內部使用的菜單時,請確保在屏幕上突出顯示最常用的操作(如上傳圖像、添加文件等)。
文章翻譯已獲得作者的正式授權。
原文:https://www.smashingmagazine.com/2020/04/wireframe-design-success/
作者:Anton Suprunenko
譯者:Clippp,微信公眾號:Clip設計夾。每週精選設計文章,專注分享關於產品、交互、視覺上的設計思考。
本文由 @Clippp 翻譯發佈於人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基於CC0協議