旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計(jì)劃
全國(guó)統(tǒng)一咨詢熱線:010-5367 2995
首頁(yè) > 熱門文章 > UI設(shè)計(jì) > UI設(shè)計(jì)中的小套路

UI設(shè)計(jì)中的小套路

時(shí)間:2020-10-08來(lái)源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時(shí)間:2020-10-08點(diǎn)擊量:作者:Gella

  如果你還在為界面不精致,層次亂糟糟,反復(fù)修改浪費(fèi)時(shí)間,開(kāi)發(fā)還原度很差等問(wèn)題而煩惱,不妨來(lái)看看AAA教育郭老師總結(jié)的一些關(guān)于UI設(shè)計(jì)中的“小套路”
 

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

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

  字體字號(hào)的運(yùn)用
 

  1. 字體
 

  UI設(shè)計(jì)師常用的字體有:蘋方、思源黑、蘭亭黑系列、華文黑體等,在字體選用方面看團(tuán)隊(duì)習(xí)慣。
 

  就還原度來(lái)講,如果你的團(tuán)隊(duì)是用一套設(shè)計(jì)稿同時(shí)適配安卓和iOS,推薦用蘋方字體去做設(shè)計(jì);如果是iOS端和安卓端都要做那就推薦iOS用蘋方體,安卓用思源黑體。由于蘭亭黑系列字號(hào)偏大,會(huì)導(dǎo)致設(shè)計(jì)稿和還原效果差別較大,不建議使用。

 

UI設(shè)計(jì)中的小套路

 

  2. 字號(hào)
 

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

  (1) 不同層級(jí)的文字字號(hào)不能太接近

 

UI設(shè)計(jì)中的小套路

 

  (2) 字重的合理利用
 

  在閱讀大段文字的時(shí)候用細(xì)體或者粗體都會(huì)比較累,盡量選用標(biāo)準(zhǔn)字重的字體。

 

UI設(shè)計(jì)中的小套路

 

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

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

 

UI設(shè)計(jì)中的小套路

 

  顏色的運(yùn)用
 

  在一套設(shè)計(jì)規(guī)范里往往會(huì)給出一個(gè)品牌色,幾個(gè)輔助色,幾個(gè)黑白灰的顏色供我們使用,但真正要用好不見(jiàn)得那么容易。我們分開(kāi)來(lái)看黑白灰和彩色。
 

  1. 黑白灰
 

  (1) 避免使用純黑色
 

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

  (2) 文字排版
 

  文字顏色用不同的灰色拉開(kāi)對(duì)比,達(dá)到把信息層級(jí)區(qū)分開(kāi)來(lái)的目的。

 

UI設(shè)計(jì)中的小套路

 

  2. 彩色
 

  (1) UI設(shè)計(jì)里的631原則
 

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

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

  (2) 漸變色小技巧
 

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

 

UI設(shè)計(jì)中的小套路

 

  陰影的運(yùn)用
 

  陰影一直以來(lái)都是UI設(shè)計(jì)中不可或缺的部分。從之前的擬物風(fēng)格,UI設(shè)計(jì)師努力嘗試用高光陰影給用戶在二維界面里營(yíng)造三維效果。即使在超扁平風(fēng)格盛行的當(dāng)下,UI設(shè)計(jì)師也沒(méi)有停止對(duì)陰影的鐘愛(ài)。
 

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

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

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

 

UI設(shè)計(jì)中的小套路

 

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

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

 

UI設(shè)計(jì)中的小套路

 

  3. 陰影不一定是黑色的
 

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

 

UI設(shè)計(jì)中的小套路

 

  4. 彌散陰影
 

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

 

UI設(shè)計(jì)中的小套路

 

  留白的運(yùn)用
 

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

  1. 文字1.5倍行間距
 

  給讀者最舒服的閱讀體驗(yàn)。

 

UI設(shè)計(jì)中的小套路

 

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

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

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

 

UI設(shè)計(jì)中的小套路

 

  3. 元素大小適中
 

  合適的元素大小讓界面會(huì)呼吸。

 

UI設(shè)計(jì)中的小套路

 

  好了,我就寫(xiě)到這吧,其實(shí)UI設(shè)計(jì)中還有很多很多小套路,我這里也就拋磚引玉一下,剩下的等待你去發(fā)現(xiàn)啦! 因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。



 

預(yù)約申請(qǐng)免費(fèi)試聽(tīng)課

填寫(xiě)下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動(dòng)者教育科技有限公司版權(quán)所有
備案號(hào):京ICP備12034770號(hào)

?2007-2022/ m.5wd995.cn 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號(hào)

網(wǎng)站地圖