設計沉思錄|UI設計中的“小套路”

6 評論 6965 瀏覽 110 收藏 10 分鐘

如果你還在為界面不精致,層次亂糟糟,反復修改浪費時間,開發(fā)還原度很差等問題而煩惱,不妨來看看文中的一些關(guān)于UI設計中的“小套路”。

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

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

字體字號的運用

1. 字體

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

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

設計沉思錄|UI設計中的『小套路』

2. 字號

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

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

設計沉思錄|UI設計中的『小套路』

2) 字重的合理利用

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

設計沉思錄|UI設計中的『小套路』

3)字體字號的統(tǒng)一性原則

APP內(nèi)相同層級的內(nèi)容字體字號應該保持一致,這也就需要在設計前期建立基本的設計規(guī)范。

設計沉思錄|UI設計中的『小套路』

顏色的運用

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

1. 黑白灰

1) 避免使用純黑色

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

2) 文字排版

文字顏色用不同的灰色拉開對比,達到把信息層級區(qū)分開來的目的。

設計沉思錄|UI設計中的『小套路』

2. 彩色

1) UI設計里的631原則

631原則是指主色調(diào):次要顏色:強調(diào)顏色=6:3:1。這個理論最早出現(xiàn)在室內(nèi)設計里,被譽為最完美的配色比例。

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

2) 漸變色小技巧

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

設計沉思錄|UI設計中的『小套路』

陰影的運用

陰影一直以來都是UI設計中不可或缺的部分。從之前的擬物風格,UI設計師努力嘗試用高光陰影給用戶在二維界面里營造三維效果。即使在超扁平風格盛行的當下,UI設計師也沒有停止對陰影的鐘愛。

從視覺上看,陰影為二維界面增加了厚度,能讓用戶把界面和現(xiàn)實世界關(guān)聯(lián)起來,有助于用戶理解界面各個模塊的意義和它的交互方式。

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

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

設計沉思錄|UI設計中的『小套路』

2. 用陰影分割比描邊分割更優(yōu)雅

用投影來做分割能讓界面更微妙,并且不會分散用戶的注意力,讓內(nèi)容更聚焦。

設計沉思錄|UI設計中的『小套路』

3. 陰影不一定是黑色的

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

設計沉思錄|UI設計中的『小套路』

4. 彌散陰影

彌散陰影和普通陰影的區(qū)別是物體與光源的相對大小不同,如下圖:兩種陰影給觀者傳達的感覺也不太一樣,彌散陰影特別像臺燈下看一顆寶石,給人一種更精致的感覺。當然并不是所有內(nèi)容都適合做彌散陰影,我的經(jīng)驗來看在做精致圖標或者小控件的時候比較適合。

設計沉思錄|UI設計中的『小套路』

留白的運用

設計中的留白不僅限于白色,還有空白的意思,留白是指某個區(qū)域內(nèi)是空的,沒有別的裝飾和元素。正確的留白能讓界面更有節(jié)奏,層級更加清晰,閱讀起來更輕松,同時也會讓界面更精致。

1. 文字1.5倍行間距

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

設計沉思錄|UI設計中的『小套路』

2. 親密關(guān)系法

關(guān)聯(lián)大的元素之間留白小一些,關(guān)聯(lián)小的元素之間留白大一些。在做復雜界面的時候不要立馬去排,不要太去扣細節(jié),這樣很容易陷入到死胡同里,來回推倒重做浪費大量時間。

如果你也遇到過這樣的問題,不妨試試我這個方法,先用灰塊去處理,按照元素的親密關(guān)系來組合界面。如下左圖先把元素間關(guān)系疏離清楚,再把真實數(shù)據(jù)帶入進去看效果對不對,再對細節(jié)進行處理,整個界面基本就可以出爐了。

設計沉思錄|UI設計中的『小套路』

3. 元素大小適中

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

設計沉思錄|UI設計中的『小套路』

好了,我就寫到這吧,其實UI設計中還有很多很多小套路,我這里也就拋磚引玉一下,剩下的等待你去發(fā)現(xiàn)啦!

 

作者:訾亞磊,視覺設計師,想象力是我的設計源泉;勇敢嘗試,哪怕不被看好又怎樣。

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設計中心(微信公眾號@58UXD),作者@訾亞磊

題圖來自 Unsplash,基于CC0協(xié)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 原來是先把元素關(guān)系用灰色塊疏離清楚 再帶入真實數(shù)據(jù) 先大概再細節(jié) 明白了??

    回復
  2. [微笑]做設計的要探索和調(diào)研用戶的使用習慣,了解用戶心理和用戶體驗,以及痛點等等,不過每個人的審美不一樣,對待美感美觀是各抒起見,蘿卜青菜各有所愛,所有要不斷提升自己設計美感,多學習國外大師的設計排版和色調(diào),跟上時代的主流趨勢,重點是我愛設計,我對設計感興趣[調(diào)皮][調(diào)皮][調(diào)皮]

    回復
  3. 最后的空白頁個人更喜歡右邊的

    來自北京 回復
    1. 一樣

      回復
    2. 你的審美應該有問題

      回復
    3. 一樣

      來自上海 回復