我了解設計一個既漂亮又實用的界面的過程 — 通常較長,而且反復修改。大多數設計師都有類似的經歷。不過,多年的經驗積累下來,我發現一些比較通用的小技巧和界面修改方式,能夠讓設計在短時間內提升非常大。
這篇文章當中,我總結了過去一年里,我的文章當中最受歡迎的 UI & UX 設計貼士,他們都使用簡單快捷,不但能夠幫你提升你的界面本身,還可以在整體用戶體驗優化上有表現。
我們開始吧
?
1. 通過一個細邊框讓你的設計元素看起來更清晰,醒目
通過重疊使用陰影或者一個非常細的邊框(邊框顏色應該只比你的陰影深一點點)可以讓些設計元素看起來更清晰,更聚焦。這樣的方式也避免了多重投影帶來的”臟邊框“的感覺。
2. 縮小你的題目字(字母)間距,讓視覺整體看起來更加平衡
要將長文本條中的字間距縮短嗎?這一看就不可行的方式,在標題中卻有完全不同的應用。
大多數設計中,標題的字號大概率是大于正文的 — 這有可能會讓標題的字間距看起來會大一些。當你需要界面達到完美的視覺平衡的時候,就需要手動微調一下了。
稍微降低一些字間距能夠讓標題看起來更平衡,易讀,也能界面整體看起來更舒服,自然。
3. 確保你使用的所有圖標的風格一致
如果界面上出現了圖標,就要確保風格完全一致:樣式,線種,輪廓,陰影。
不要混搭。
4. 界面種只用一種字體完全可行 — 忽略酸民的偏見
設計中只用一個字體絕對是可以的,并且這么做還可以幫助你達到更一致,更干凈的設計效果。
忽略掉“必須使用至少2種字體”那類聲音。結合字重,大小和顏色的組合使用,一個字體也完全可以創造出接受范圍內的效果。
5. 空白是界面設計的好朋友,大量使用它,并且用好它
空白空間,或者叫做負空間,你肯定已經非常熟悉了。無論你對它的使用非常大方或是更謹慎,重點是使用合理,就很好。
些許的空白就可以讓你的設計看起來有呼吸的空間,界面更精致。這個絕對是快速優化界面的不二法門。
6. 界面上正文內容很多嗎?試試20px字體
如果是長篇內容(例如,博客文章,項目描述等),你可以嘗試使用20pt(或者更大)作為正文字體大小。
當然20px是不是完美搭配也完全取決于你選擇的字體本身,不過大多數的正文字體在20px下看起來效果都不錯,最關鍵是在你的讀者需要看一墻這么多的字的時候,20px字的閱讀體驗會好很多。
18px也太2010了。
7. 在定義一組文本的字體大小的時候,使用“字體比例(Type Scale)”來確保和諧
字體比例可以幫你定義一個文本組的字體大小,這個方法科學有效,你無需再去猜測。
顧名思義,Type Scale的原理是基于比例的。舉個例子,以一個1.25的比例為準,如果你的基本字體大小是18px,如果想到得到更大(比如h1,h2…)的字號就做乘法,如果需要小一些的字體(字幕,按鈕等)就用基礎字號大小除以比例即可。
符合字體比例的文字一般看來都更和諧,因為它們的大小是隨著你設定的固定比例而增加和減小的。
8. 選定一個基準顏色,然后用“色調和陰影”來增加界面的一致性
你猜怎樣,搞了半天你不用大片使用不同色彩來填充你的設計。
項目允許的情況下,限制你調色板的豐富性。選定一個基準顏色,然后通過對這個顏色色調以及陰影的修改是實現界面一致性的最簡單的方法之一。
9. 改善新用戶體驗,交互規則和經驗很重要
確保你全新設計的手機app的新用戶引導可以隨時被跳過,并且確保跳過按鈕在大拇指可以輕易觸到的范圍內 — 這樣簡單的調整可以為你的用戶帶來更好的體驗感,更別提第一印象多么重要了。
交互的規則和經驗還是很重要的,別忘了。
10. 你界面上的陰影都來自于同一個光源吧?
確保你界面上的陰影都來自于同一個光源。這是個很容易犯的錯誤,一旦出現就讓你的設計看起來粗糙了。
畢竟,地球上也只能看到一個太陽。
11. 你想要快速找到優質的字體組合嗎?用Superfamilies
天上那是一只鳥嗎?是個飛機嗎? 不是, 是Superfamily!
如果你想要提高字體組合技巧,可是面對千種字體選擇讓人感到有些畏縮的時候,選擇 Superfamily吧!
Superfamily是字體的集合,可以出現在Serif和Sans-Serif和各種變體中,專門為了高度統一的視覺和諧感而產生。
有一些組合我強烈推薦:Merriweather和Merriweather Sans,以及Roboto和Roboto Slab。這些都可以可Google字體中找到。
Superfamily可以幾乎可以確保你的選擇不會出錯,還不用擔心外觀看起來不夠協調。
12. 用不易察覺的覆蓋涂層來增加文本和圖像之間的對比度
根據文本在圖像上的位置,你可以使用覆蓋整個界面的顏色疊加涂層,也可以使用更細微的(從下到上,或從上到下)漸變疊加圖層,來使兩個元素之間的對比更加強烈。
無需太復雜的操作,就可以實現在文本和圖像之間美觀的對比。
13. 適度使用居中文本,過多會導致用戶體驗欠佳
條件允許的情況下,應該只將標題或者少量文字段落做居中處理。
對于幾乎所有其他內容,都使用左對齊。
你的用戶會感激你的。
14. 如果在多處使用同一個字體,盡量找一個多有種字重的字體
你想使用的Typeface是否帶有多種字重和樣式供你選擇?
如果打算在多個項目中使用同一個字體,應該確保它的多樣性。
我其實建議你根本就不要使用那種只有一種字重或樣式的字體。
當然也有例外,某些項目會要求使用那種只有一種樣式的,看起來更復雜的字體,但是對于絕大多數項目,更多的字體選擇肯定是更好的。 就算你最后只使用兩種或三種字重或樣式,也可以為自己留出呼吸的空間,尤其是在設計過程的后期,產生了更多操作的需求的時候。
15. 淺色背景下使用深色文本
淺色背景下,不要使用顏色太淺色字體顏色。
就算看起來許多設計界的“cool kids“還是在用淺色字,但是你可要比他們聰明一些,因為你希望你設計的界面更友好,對吧?
16. 如果你的文本看起來有些重,調高它的亮度
當涉及到長篇內容時,某些常規粗體字體會顯得有些笨重,在屏幕上顯得有些呆板。
這種情況下,你可以通過選擇類似于“深灰色”(即#4F4F4F)之類的顏色來淡化文本,讓它更易讀,不會對眼睛造成這么大的壓力。
17. 始終將CTA(call to action)放在屏幕上最突出的位置上
你可能認為這是常識吧? 其實它很多時候會被忽略掉。
通過對顏色,對比對,尺寸和標簽的使用,來讓CTA盡可能突出。
設計的時候,情況允許的話,可以嘗試使用文本的方式幫助用戶理解你的設計,不要總是僅依賴圖標。
原文地址:今日頭條
作者:Mockplus?
轉載請注明:學UI網 » 17個小提示讓你的設計瞬間升級