17個小提示讓你的設(shè)計瞬間升級

【文末有福利】

我了解設(shè)計一個既漂亮又實用的界面的過程 — 通常較長，而且需要反復修改。大多數(shù)設(shè)計師都有類似的經(jīng)歷。

不過，多年的經(jīng)驗積累下來，我發(fā)現(xiàn)一些比較通用的小技巧和界面修改方式，能夠讓設(shè)計在短時間內(nèi)提升非常大。

這篇文章當中，我總結(jié)了過去一年里，我的文章當中最受歡迎的 UI & UX 設(shè)計技巧，它們的使用簡單快捷，不但能夠幫你提升你的界面本身，還可以在整體用戶體驗優(yōu)化上有不錯的表現(xiàn)。

我們開始吧。

1. 通過一個細邊框讓你的設(shè)計元素看起來更清晰，醒目

通過重疊使用陰影或者一個非常細的邊框（邊框顏色應(yīng)該只比你的陰影深一點點）可以讓些設(shè)計元素看起來更清晰，更聚焦。這樣的方式也避免了多重投影帶來的”臟邊框“的感覺。

2. 縮小你的題目字（字母）間距，讓視覺整體看起來更加平衡

要將長文本條中的字間距縮短嗎？這一看就不可行的方式，在標題中卻有完全不同的應(yīng)用。

大多數(shù)設(shè)計中，標題的字號大概率是大于正文的 -- 這有可能會讓標題的字間距看起來會大一些。當你需要界面達到完美的視覺平衡的時候，就需要手動微調(diào)一下了。

稍微降低一些字間距能夠讓標題看起來更平衡，易讀，也能界面整體看起來更舒服，自然。

3. 確保你使用的所有圖標的風格一致

如果界面上出現(xiàn)了圖標，就要確保風格完全一致：樣式，線種，輪廓，陰影。

不要混搭。

4. 界面中只用一種字體完全可行 -- 忽略酸民的偏見

設(shè)計中只用一個字體絕對是可以的，并且這么做還可以幫助你達到更一致，更干凈的設(shè)計效果。

忽略掉“必須使用至少2種字體”那類聲音。結(jié)合字重，大小和顏色的組合使用，一個字體也完全可以創(chuàng)造出接受范圍內(nèi)的效果。

5. 空白是界面設(shè)計的好朋友，大量使用它，并且用好它

空白空間，或者叫做負空間，你肯定已經(jīng)非常熟悉了。無論你對它的使用非常大方或是更謹慎，重點是使用合理，就很好。

些許的空白就可以讓你的設(shè)計看起來有呼吸的空間，界面更精致。這個絕對是快速優(yōu)化界面的不二法門。

6. 界面上正文內(nèi)容很多嗎？試試20px字體

如果是長篇內(nèi)容（例如，博客文章，項目描述等），你可以嘗試使用20pt（或者更大）作為正文字體大小。

當然20px是不是完美搭配也完全取決于你選擇的字體本身，不過大多數(shù)的正文字體在20px下看起來效果都不錯，最關(guān)鍵是在你的讀者需要看一墻這么多的字的時候，20px字的閱讀體驗會好很多。

18px也太2010了。

7. 在定義一組文本的字體大小的時候，使用“字體比例（Type Scale）”來確保和諧

字體比例可以幫你定義一個文本組的字體大小，這個方法科學有效，你無需再去猜測。

顧名思義，Type Scale的原理是基于比例的。舉個例子，以一個1.25的比例為準，如果你的基本字體大小是18px，如果想到得到更大（比如h1,h2...)的字號就做乘法，如果需要小一些的字體(字幕，按鈕等）就用基礎(chǔ)字號大小除以比例即可。

符合字體比例的文字一般看來都更和諧，因為它們的大小是隨著你設(shè)定的固定比例而增加和減小的。

8. 選定一個基準顏色，然后用“色調(diào)和陰影”來增加界面的一致性

你猜怎樣，搞了半天你不用大片使用不同色彩來填充你的設(shè)計。

項目允許的情況下，限制你調(diào)色板的豐富性。選定一個基準顏色，然后通過對這個顏色色調(diào)以及陰影的修改是實現(xiàn)界面一致性的最簡單的方法之一。

9. 改善新用戶體驗，交互規(guī)則和經(jīng)驗很重要

確保你全新設(shè)計的手機app的新用戶引導可以隨時被跳過，并且確保跳過按鈕在大拇指可以輕易觸到的范圍內(nèi) -- 這樣簡單的調(diào)整可以為你的用戶帶來更好的體驗感，更別提第一印象多么重要了。

交互的規(guī)則和經(jīng)驗還是很重要的，別忘了。

10. 你界面上的陰影都來自于同一個光源吧？

確保你界面上的陰影都來自于同一個光源。這是個很容易犯的錯誤，一旦出現(xiàn)就讓你的設(shè)計看起來粗糙了。

畢竟，地球上也只能看到一個太陽。

11. 你想要快速找到優(yōu)質(zhì)的字體組合嗎？用Superfamilies

天上那是一只鳥嗎？是個飛機嗎？ 不是， 是Superfamily！

如果你想要提高字體組合技巧，可是面對千種字體選擇讓人感到有些畏縮的時候，選擇 Superfamily吧！

Superfamily是字體的集合，可以出現(xiàn)在Serif和Sans-Serif和各種變體中，專門為了高度統(tǒng)一的視覺和諧感而產(chǎn)生。

有一些組合我強烈推薦：Merriweather和Merriweather Sans，以及Roboto和Roboto Slab。這些都可以在Google字體中找到。

Superfamily幾乎可以確保你的選擇不會出錯，還不用擔心外觀看起來不夠協(xié)調(diào)。

12. 用不易察覺的覆蓋圖層來增加文本和圖像之間的對比度

根據(jù)文本在圖像上的位置，你可以使用覆蓋整個界面的顏色疊加圖層，也可以使用更細微的（從下到上，或從上到下）漸變疊加圖層，來使兩個元素之間的對比更加強烈。

無需太復雜的操作，就可以實現(xiàn)在文本和圖像之間美觀的對比。

13. 適度使用居中文本，過多會導致用戶體驗欠佳

條件允許的情況下，應(yīng)該只將標題或者少量文字段落做居中處理。

對于幾乎所有其他內(nèi)容，都使用左對齊。

你的用戶會感激你的。

14. 如果在多處使用同一個字體，盡量找一個有多種字重的字體

你想使用的Typeface是否帶有多種字重和樣式供你選擇？

如果打算在多個項目中使用同一個字體，應(yīng)該確保它的多樣性。

我其實建議你根本就不要使用那種只有一種字重或樣式的字體。

當然也有例外，某些項目會要求使用那種只有一種樣式的，看起來更復雜的字體，但是對于絕大多數(shù)項目，更多的字體選擇肯定是更好的。 就算你最后只使用兩種或三種字重或樣式，也可以為自己留出呼吸的空間，尤其是在設(shè)計過程的后期，產(chǎn)生了更多操作的需求的時候。

15. 淺色背景下使用深色文本

淺色背景下，不要使用顏色太淺的字體。

就算看起來許多設(shè)計界的“cool kids“還是在用淺色字，但是你可要比他們聰明一些，因為你希望你設(shè)計的界面更友好，對吧？

16. ?如果你的文本看起來有些重，調(diào)高它的亮度

當涉及到長篇內(nèi)容時，某些常規(guī)粗體字體會顯得有些笨重，在屏幕上顯得有些呆板。

這種情況下，你可以通過選擇類似于“深灰色”（即＃4F4F4F）之類的顏色來淡化文本，讓它更易讀，不會對眼睛造成這么大的壓力。

17. 始終將CTA(call to action)放在屏幕上最突出的位置上

你可能認為這是常識吧？ 其實它很多時候會被忽略掉。

通過對顏色，對比度，尺寸和標簽的使用，來讓CTA盡可能突出。

設(shè)計的時候，情況允許的話，可以嘗試使用文本的方式幫助用戶理解你的設(shè)計，不要總是僅依賴圖標。

原文作者：Marc Andrew

原文鏈接：https://uxdesign.cc/the-ui-ux-tips-collection-volume-one-f69f0969ed17

文章轉(zhuǎn)載自uxdesign.cc，由摹客團隊翻譯。

摹客是一款在線設(shè)計工具+協(xié)作平臺，致力于優(yōu)化產(chǎn)品設(shè)計的全流程，點擊此處可以了解更多。

最后給大家贈送摹客專業(yè)版激活碼【uxdbj】

領(lǐng)取即可全方位體驗這款強大的高保真設(shè)計利器，同時支持在線交付Sketch/PS/XD/Axure/Figma設(shè)計稿，還可以享受7*12小時在線客服支持

點擊兌換激活碼或 復制鏈接領(lǐng)取https://www.mockplus.cn/get-idoc?hmsr=wenbili