大家在學習互動設計、平面設計等專業作品集時,可能會涉及到UI的設計,但不少同學設計的UI介面會存在「很low」的問題。
那有哪些技巧可以提高UI的高級感嗎?本期克瑞斯便匯總了以下實用技巧,快來看下吧~
1、強化層次結構,提升UI的清晰度
對於信息層級,要處理好「字體大小」、「重量」、「顏色」、主體與背景等元素的關係。
•字體大小
字體大小通常會按照標題、副標題、正文、引用說明等常見的文本元素構成。
大標題應當突出,正文應當清晰明了,副標題起到的是對標題的輔助說明作用,所以應當適當縮小,這樣一來,文本元素之前的大小關係,位置關係都更加清晰了。
•主體與背景
我們的大腦將視覺區域分為主體和背景 2 個部分。這個特徵有利於我們對重要信息和次要信息的感知。
主體和背景的區別可以從以下兩個方面來控制:
場景大小:我們傾向於將處於大場景中的中間小區域部分視為主體,而大場景視為背景;
層級關係:如果在同一個平面中,我們傾向於將處於視覺第一層級的物體視為主體。
在處理背景與主體的關係時,要注意對比度,比如在淺色背景下設計時候,避免使用過淺的文本淺,這樣會導致閱讀比較累。
通過強化層級結構,可以將介面中的元素優先級進行強化,明確的信息優先級會使得介面更易於閱讀,也利於產品信息的傳播;也可以讓用戶優先看到我們想讓他們看到的事物,進而引導用戶行為。時刻記住:信息傳達要足夠清晰,而不是模稜兩可。
2、提高版面的呼吸感
提高版面的呼吸感,要注意字體的間距、行高、行長、重量感。
•行高
行高本身並不存在一個標準的數值,它通常取決於字體本身的特徵以及設計需求。行高過低,會造成面頁面擁擠,讓用戶失去閱讀的耐心。
通常來說,字體大小越小,相對行高就要設置的更高,當字體大小變大時,同樣的,減少行高會更好。
•字間距
字間距指的是文本在橫向上的間距。在英文字體當中,字間距通常會遵循下面的準則:
使用大寫字母的時候,需要增加字間距;
字號增加的時候,需要適當減小字間距;
增大字體粗細的時候,需要適當減小字間距。
•行長
行長是指文本段落的寬度,文本每行的長度。通常,文本的行長要控制得相對短一點,這樣易於閱讀。
在大螢幕上,比如 1440px 寬度的筆記本電腦螢幕上,使用每行 60~80 字符的長度(中文通常控制在每行 35~42 個字之間),但是,如果在是移動端的螢幕上,那麼每行的字符數要縮短到 35~45 這個範疇(中文則可以控制在20~25個字即可)。
•重量
通常文字顏色越深,重量感越大;越淺,重量感越小。
而對於大段的文字內容,整體看起來會比較有視覺壓力的,有時候運用正常文本字看起來依然有些沉重,不妨將字體的顏色變淺一些來優化這個問題,使文本看起來更舒服些。
•大膽使用留白
留白也是提高版面呼吸感的重要技能之一。在這個信息過載的時代,儘量給用戶以舒適通透的體驗。不要過度追求信息的飽和度,通過合理使用留白,能讓介面有呼吸感,也可以讓頁面留下的元素更突出。
3、提升頁面的一致性
•使用同一字體家族
如果你在不同字體的搭配上,並沒有足夠豐富的經驗,那麼使用同一字體族的字體來進行設計,總是最為安全的選擇。通常,一個字體族是為一個明確的目標來設計的。它們有著更為統一的、富有凝聚力的外觀,在設計使用過程中,會更加便捷。
•減少配色數量
不要總是用多種顏色來填充你的設計。如果項目允許,簡單地使用少的配色。通過選擇一個基礎色,然後使用色調和陰影,可以簡單快速地增加設計一致性。
•確保圖標有相同的視覺風格
在UI中使用圖標時,要保持一致性。確保他們共有相同的視覺風格,相同的重量,填充和描邊。
4、使用對齊提高可讀性
對齊是版式設計的最重要的原則之一,對齊可以建立一種整齊的外觀,帶給用戶舒服的瀏覽體驗。
基於從上到下,從左到右的閱讀習慣,應用在介面設計中,一般是左對齊、居中對齊和右對齊,同時同一豎線上的元素,要保持居中對齊。
在世界上絕大多數的國家和地區,所使用的文字排版都是從左到右的(比如阿拉伯語就是反過來的),閱讀順序是自上而下的。這決定了左對齊是確保可讀性的重要基準。