1. 程式人生 > 實用技巧 >UI設計中的小套路

UI設計中的小套路

  如果你還在為介面不精緻,層次亂糟糟,反覆修改浪費時間,開發還原度很差等問題而煩惱,不妨來看看我總結的一些關於UI設計中的“小套路”。

  UI設計是一個年輕的職業,起步較晚變化飛快。新的創意和玩法層出不窮,去年流行的風格,今年可能已經不見蹤影。作為一名UI設計師,要時刻保持危機意識,不斷進化自己的設計知識和理念。一邊探索,一邊沉澱是UI設計師的基本素養。

  探索固然有趣,沉澱更需要毅力,今天我要跟大家聊的不是探索,而是在UI設計當中的一些“小套路”。

  字型字號的運用

  1. 字型

  UI設計師常用的字型有:蘋方、思源黑、蘭亭黑系列、華文黑體等,在字型選用方面看團隊習慣。

  就還原度來講,如果你的團隊是用一套設計稿同時適配安卓和iOS,推薦用蘋方字型去做設計;如果是iOS端和安卓端都要做那就推薦iOS用蘋方體,安卓用思源黑體。由於蘭亭黑系列字號偏大,會導致設計稿和還原效果差別較大,不建議使用。

UI設計中的小套路

  2. 字號

  常用的字號(以iOS一倍圖為例)有:10pt、12pt、14pt、15pt、16pt、18pt。除了這些常用的字號,在實際設計過程中還要看具體情況。如果文字較多,分級又特複雜,就會涉及到多種字號混排,也相對考驗設計師對字型字號的運用。好的效果需要反覆除錯,差的效果就有很多共同點了。

  (1) 不同層級的文字字號不能太接近

UI設計中的小套路

  (2) 字重的合理利用

  在閱讀大段文字的時候用細體或者粗體都會比較累,儘量選用標準字重的字型。

UI設計中的小套路

  (3)字型字號的統一性原則

  APP內相同層級的內容字型字號應該保持一致,這也就需要在設計前期建立基本的設計規範。

UI設計中的小套路

  顏色的運用

  在一套設計規範裡往往會給出一個品牌色,幾個輔助色,幾個黑白灰的顏色供我們使用,但真正要用好不見得那麼容易。我們分開來看黑白灰和彩色。

  1. 黑白灰

  (1) 避免使用純黑色

  純黑色在自然界中是幾乎不存在,在黑色中加一點點的色彩傾向,會讓介面看著更自然,包括文字的顏色也不要選用#000。

  (2) 文字排版

  文字顏色用不同的灰色拉開對比,達到把資訊層級區分開來的目的。

UI設計中的小套路

  2. 彩色

  (1) UI設計裡的631原則

  631原則是指主色調:次要顏色:強調顏色=6:3:1。這個理論最早出現在室內設計裡,被譽為最完美的配色比例。

  UI設計也一樣,品牌色不要超過整體頁面的30%。色彩比重太多讓介面顯得很躁,很容易造成秩序混亂。所以顏色應該用在主要引導區域或者內容區隔上。

  (2) 漸變色小技巧

  漸變色在當下非常流行,如果你還在為調漸變色而煩惱不妨試試我的這個小方法。先確定好一個顏色,然後開啟色盤,在這個顏色相鄰的左右各取一個顏色,然後把左側顏色的明度提高一點,把右側顏色的明度降低一點點。你會發現這樣調出來的漸變是最舒服的。

UI設計中的小套路

  陰影的運用

  陰影一直以來都是UI設計中不可或缺的部分。UI設計中的小套路https://www.aaa-cg.com.cn/ui/2780.html從之前的擬物風格,UI設計師努力嘗試用高光陰影給使用者在二維介面裡營造三維效果。即使在超扁平風格盛行的當下,UI設計師也沒有停止對陰影的鐘愛。

  從視覺上看,陰影為二維介面增加了厚度,能讓使用者把介面和現實世界關聯起來,有助於使用者理解介面各個模組的意義和它的互動方式。

  1. 垂直偏移陰影效果更自然

  現實中的光源不可能在你的眼睛那裡,一般都會在偏上的位置,投影會在物體偏下的位置。

UI設計中的小套路

  2. 用陰影分割比描邊分割更優雅

  用投影來做分割能讓介面更微妙,並且不會分散使用者的注意力,讓內容更聚焦。

UI設計中的小套路

  3. 陰影不一定是黑色的

  一定要注意環境色對陰影的影響,這是學水粉的時候老師敲爛的知識點。

UI設計中的小套路

  4. 彌散陰影

  彌散陰影和普通陰影的區別是物體與光源的相對大小不同,如下圖:兩種陰影給觀者傳達的感覺也不太一樣,彌散陰影特別像檯燈下看一顆寶石,給人一種更精緻的感覺。當然並不是所有內容都適合做彌散陰影,我的經驗來看在做精緻圖示或者小控制元件的時候比較適合。

UI設計中的小套路

  留白的運用

  設計中的留白不僅限於白色,還有空白的意思,留白是指某個區域內是空的,沒有別的裝飾和元素。正確的留白能讓介面更有節奏,層級更加清晰,閱讀起來更輕鬆,同時也會讓介面更精緻。

  1. 文字1.5倍行間距

  給讀者最舒服的閱讀體驗。

UI設計中的小套路

  2. 親密關係法

  關聯大的元素之間留白小一些,關聯小的元素之間留白大一些。在做複雜介面的時候不要立馬去排,不要太去扣細節,這樣很容易陷入到死衚衕裡,來回推倒重做浪費大量時間。

  如果你也遇到過這樣的問題,不妨試試我這個方法,先用灰塊去處理,按照元素的親密關係來組合介面。如下左圖先把元素間關係疏離清楚,再把真實資料帶入進去看效果對不對,再對細節進行處理,整個介面基本就可以出爐了。

UI設計中的小套路

  3. 元素大小適中

  合適的元素大小讓介面會呼吸。

UI設計中的小套路

  好了,我就寫到這吧,其實UI設計中還有很多很多小套路,我這裡也就拋磚引玉一下,剩下的等待你去發現啦! 因此,您現在已經瞭解了與UI設計師的工作相關的主要技能。如果您想了解更多資訊,請給我點個關注,我之後還會發包含有關在該領域工作的更多相關文章。