13161216443

您所在位置: 首頁> ui技術> 10個適合UI新手

10個適合UI新手

發布百知教育 來源:ui技術 2019-06-14

沒有人生下來就會做設計,大部分UI設計師都是從摸索開始的。但即便開始困難重重,我們依然可以通過從各類書籍和文章中了解到顏色、排版、布局的各種設計知識。因此我想通過這篇文章跟大家分享我從他人處學習以及自己摸索出的10個關于界面設計的經驗,希望能幫到做設計的你們,特別是剛入行的UI設計師。

聲明:文中所謂的“Don't”并不是說不對,而只是有更好的替代方案。

1. 大并不能解決問題

當我們需要區分信息層級時,只是單純地讓標題變大通常不能解決問題。就像這樣:

信息層級不能僅僅靠字體大小來區分,而是字號、字重的字體顏色等多方作用的結果,使層級區分得越明顯越好

所以,如何區分信息層級呢?

1. 不要僅僅是字號不同(字體字重都相同)

2. 用更粗的字重和更深的顏色來突出主要內容,用相符較小的字或更淺的顏色來弱化輔助信息

3. 預設好淺中深三種字色,通常我會用中等的顏色作為我正文的字體顏色

4. 不要吝嗇拉大字號差距(例如標題24px,正文16px,輔助信息10px)差距越大,層級區分越明顯

5. 用 Modularscale 這款在線字體計算器可以幫助你生成合適的字體層級?

? Modularscale

最后,要記得檢查字色的對比度,可以用 Contrast Ratio這個網站來檢查你的字色是否存在明顯差別。?

?Contrast Radio

2. 無需手動選擇灰度

我們都知道#000000的純黑色會造成視覺疲勞,所以我們最好使用除了純黑色以外的較暗的顏色來代替純黑色。但是我并不建議你在顏色選擇器上漫無目的地拖動光標來重新選擇3個或更多色在白色背景上“看上去不錯”的深色,這樣會增加你工作的復雜程度。最簡單的方法就是直接改變純黑色的透明度。

在這個例子中,我使用了純黑作為基礎顏色,然后在標題采用85%透明度,正文75%透明度,輔助信息60%透明度,以此來區分信息層級,是不是很方便呢。

3. 傻瓜配色法

大部分人是不太擅長挑選配色的,每當我們看到一個出色的色彩搭配作品,都忍不住暗自腹誹“他們究竟是怎么做到的?”就像下面這種:

后來我終于明白,原來配色不僅僅是一種與生俱來的天賦,通過對色相、飽和度和明度(HSB)進行簡單的加減法,你也可以輕松地拜托單調的白色背景,把它變成像畢加索般顏色漂亮的作品,如下:?

?那么這個加減法是怎么做的呢?

這里有兩種配色方法,圓圈背景都使用了一種基礎顏色#B9F4BC,但icon的顏色是不同的。在開始配色前,記住后面的順序是色相H、飽和度S和明度B

方法A

在選項A中,我們可以看出,色相H始終是123,發生變化的只有飽和度S和明度B

我們可以得出一個公式:

顏色變深=增加飽和度S,減少亮度B

顏色變淺=減少飽和度S,增加亮度B

每當我不知道該怎么進行配色時,這個公式可以幫助我,根本原理是,先選擇一個基本顏色,然后保持基本顏色的H不變,對S和B進行調整。

方法B

跟方法A同理,方法B不同的是H也發生了變化,我們通過在調色盤下面的顏色條上移動光標來讓顏色加深過變淺,通常來說,往左可以變淺,往右可以加深。

調整過左右色相后,再利用方法A里面的技巧,調節S和B,我們可以得到以下數值

方法B的公式是:

顏色變深=色相向左+增加飽和度S,減少亮度B

顏色變淺=色相向右+減少飽和度S,增加亮度B

4. 大膽留白

除了在兩組之前添加一條線來進行區分,用留白來進行區分也是一個簡單方便的好方法,正如格式塔原理里接近原則所說:彼此靠近或接近的對象會被分成一個組。

如下圖例子所示,我把留白從8px增大到24px,就能夠很明顯的把標題和作者區分開來

5. 顏色也是分行利器

設計表格可以說是一個比較無聊的事情,僅僅需要復制再復制而已,但是對用戶來說,當每一行看起來都差不多的時候,就很難順暢地閱讀下去。因此除了用線進行分割外,加入帶顏色的背景能大大改善用戶的閱讀體驗,同時也能讓設計師在做設計的時候沒那么無聊。


上一篇:一篇文章告訴你大數據的重要性

下一篇:應屆生去公司找個Java程序員的職位需要什么技能?

相關推薦

www.akpsimsu.com

有位老師想和您聊一聊

關閉

立即申請