10個提高UI界麵設計細節的方法

UI界麵設計雖然沒有海報那麼多花哨的設計技巧，但是依然有很多微小的設計細節要注意，首先在交互設計方麵滿足用戶的使用要求，其次就要在UI界麵上提升界麵的品質感。今天我們主要分享10個提升UI界麵的設計細節技巧，這些技巧可以毫不費力地幫助您改進現在的設計，同時也為你能夠快速入門提供了一些實用技巧。

1.保持元素清晰

在設計過程中可以稍微使用一些恰當合適的陰影，來保證當前設計與背景能夠清晰可見，但是一定要避免複雜的陰影，這會起到反作用。

2.使用一種字體

在設計一套新的UI界麵時候，最好能保持一種字體，這樣能夠讓界麵更加輕量化的同時，也能保持和好的品質感。

盡量避免使用2種以上的字體，你可以通過粗細、大小、或者顏色來區分層級！

3.長文內容，使用20pt的字號

對於長篇內容（例如博客文章，說明類），請嚐試在文內中選擇20pt字號（甚至更大）。

當然，這取決於所選擇的字體，但是大多數常用的字體在20pt時效果都很好，同時當麵對大量文字時候，這樣可為用戶帶來更好的閱讀體驗。以前使用的18pt字號體驗非常不好。

備注：我們日常使用閱讀類APP字號都會偏大一些，就是這個原理。

4.優化導頁操作細節

放置底部可以使用戶隨時跳過您的Mobile App Onboarding登錄，如果是放置頂部，用戶觸摸相對來說比較麻煩。

拇指操作仍然在2020年的一個比較合適位置。

備注：之所以我們看到很多惡心跳過放在右上角而且還那麼小，一般廣告都是這樣的，比如 某音開屏的設計。不過也能理解，畢竟廣告能賺錢

5.保持一致的光源

確保您的陰影始終僅來自一個光源。如下圖所示，右側日曆投影就存在光源不一致，一些剛開始學設計的小夥伴可能就會忽略這種細節問題！因此一定要注意。

6.通過疊加改善對比度

有時候我們在使用圖片作為背景承載前麵文字信息時候，圖片背景過亮了，因此我們可以稍微疊加一些品牌色漸變暗色來提高文字閱讀性！

7.適度使用居中排版

可以嚐試在少量一些卡片排版中使用居中對齊排版，對於其他的設計，盡量使用左對齊排版方式！

8.合理的間距係統

在設計排版過程中，確保元素排版有呼吸空間，盡量避免文字多的地方，間距很小，可以用留白來區分層級，切勿亂使用空白。

9.注意對比度

在淺色背景下設計時候，避免使用過淺的文本淺。這樣會導致閱讀比較累，但是依然還有不少夥伴這樣來做，因此我推薦給大家一個數字，比如正文本是#333333，那麼第二級文本可以用#888888.

10.減少顏色數量

在界麵設計中，為了能讓界麵看起來比較清晰，品牌調性突出，盡量使用品牌色配合黑白灰來設計界麵層級。如下圖一個韓國的app設計。

總結

作者向我們介紹10種提高UI界麵設計細節的一些方法和思路，大家在設計過程中，可以避免這些坑，可以很好的將其方法利用起來，改善自己的界麵設計。

原文 | https://uxdesign.cc/9-simple-tips-to-improve-your-ui-designs-fast-377c5113ac82
作者 | Marc Andrew
翻譯 | 功夫UX (ID:UX-Talk)