網(wǎng)頁與APP軟件UI設(shè)計(jì)小套路

UI設(shè)計(jì)是一個(gè)年輕的職業(yè)，起步較晚變化飛快。新的創(chuàng)意和玩法層出不窮，去年流行的風(fēng)格，今年可能已經(jīng)不見蹤影。作為一名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)用 
• 字體
UI設(shè)計(jì)師常用的字體有：蘋方、思源黑、蘭亭黑系列、華文黑體等。在字體選用方面看團(tuán)隊(duì)習(xí)慣。就還原度來講，如果你的團(tuán)隊(duì)是用一套設(shè)計(jì)稿同時(shí)適配安卓和iOS，推薦用蘋方字體去做設(shè)計(jì)；如果是iOS端和安卓端都要做那就推薦iOS用蘋方體，安卓用思源黑體。由于蘭亭黑系列字號(hào)偏大，會(huì)導(dǎo)致設(shè)計(jì)稿和還原效果差別較大，不建議使用。
• 字號(hào)
常用的字號(hào)（以iOS一倍圖為例）有：10pt、12pt、14pt、15pt、16pt、18pt。除了這些常用的字號(hào)，在實(shí)際設(shè)計(jì)過程中還要看具體情況。如果文字較多，分級(jí)又特復(fù)雜，就會(huì)涉及到多種字號(hào)混排，也相對(duì)考驗(yàn)設(shè)計(jì)師對(duì)字體字號(hào)的運(yùn)用。好的效果需要反復(fù)調(diào)試，差的效果就有很多共同點(diǎn)了。
1) 不同層級(jí)的文字字號(hào)不能太接近。
2) 字重的合理利用。在閱讀大段文字的時(shí)候用細(xì)體或者粗體都會(huì)比較累，盡量選用標(biāo)準(zhǔn)字重的字體。
3)字體字號(hào)的統(tǒng)一性原則。APP內(nèi)相同層級(jí)的內(nèi)容字體字號(hào)應(yīng)該保持一致，這也就需要在設(shè)計(jì)前期建立基本的設(shè)計(jì)規(guī)范。
二、顏色的運(yùn)用 
在一套設(shè)計(jì)規(guī)范里往往會(huì)給出一個(gè)品牌色，幾個(gè)輔助色，幾個(gè)黑白灰的顏色供我們使用，但真正要用好不見得那么容易。我們分開來看黑白灰和彩色。
1.黑白灰 
1) 避免使用純黑色。純黑色在自然界中是幾乎不存在，在黑色中加一點(diǎn)點(diǎn)的色彩傾向，會(huì)讓界面看著更自然，包括文字的顏色也不要選用#000。
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ì)也一樣，品牌色不要超過整體頁面的30%。色彩比重太多讓界面顯得很躁，很容易造成秩序混亂。所以顏色應(yīng)該用在主要引導(dǎo)區(qū)域或者內(nèi)容區(qū)隔上。
2) 漸變色小技巧。漸變色在當(dāng)下非常流行，如果你還在為調(diào)漸變色而煩惱不妨試試我的這個(gè)小方法。先確定好一個(gè)顏色，然后打開色盤，在這個(gè)顏色相鄰的左右各取一個(gè)顏色，然后把左側(cè)顏色的明度提高一點(diǎn)，把右側(cè)顏色的明度降低一點(diǎn)點(diǎn)。你會(huì)發(fā)現(xiàn)這樣調(diào)出來的漸變是最舒服的。
三、陰影的運(yùn)用 
陰影一直以來都是UI設(shè)計(jì)中不可或缺的部分。從之前的擬物風(fēng)格，UI設(shè)計(jì)師努力嘗試用高光陰影給用戶在二維界面里營造三維效果。即使在超扁平風(fēng)格盛行的當(dāng)下，UI設(shè)計(jì)師也沒有停止對(duì)陰影的鐘愛。從視覺上看，陰影為二維界面增加了厚度，能讓用戶把界面和現(xiàn)實(shí)世界關(guān)聯(lián)起來，有助于用戶理解界面各個(gè)模塊的意義和它的交互方式。
1.垂直偏移陰影效果更自然
現(xiàn)實(shí)中的光源不可能在你的眼睛那里，一般都會(huì)在偏上的位置，投影會(huì)在物體偏下的位置。
2.用陰影分割比描邊分割更優(yōu)雅
用投影來做分割能讓界面更微妙，并且不會(huì)分散用戶的注意力，讓內(nèi)容更聚焦。
3.陰影不一定是黑色的
一定要注意環(huán)境色對(duì)陰影的影響，這是學(xué)水粉的時(shí)候老師敲爛的知識(shí)點(diǎn)。
4.彌散陰影
彌散陰影和普通陰影的區(qū)別是物體與光源的相對(duì)大小不同，如下圖。兩種陰影給觀者傳達(dá)的感覺也不太一樣，彌散陰影特別像臺(tái)燈下看一顆寶石，給人一種更精致的感覺。當(dāng)然并不是所有內(nèi)容都適合做彌散陰影，我的經(jīng)驗(yàn)來看在做精致圖標(biāo)或者小控件的時(shí)候比較適合。
5.留白的運(yùn)用 
設(shè)計(jì)中的留白不僅限于白色，還有空白的意思，留白是指某個(gè)區(qū)域內(nèi)是空的，沒有別的裝飾和元素。正確的留白能讓界面更有節(jié)奏，層級(jí)更加清晰，閱讀起來更輕松，同時(shí)也會(huì)讓界面更精致。
（1）文字1.5倍行間距
給讀者最舒服的閱讀體驗(yàn)。
（2）親密關(guān)系法
關(guān)聯(lián)大的元素之間留白小一些，關(guān)聯(lián)小的元素之間留白大一些。在做復(fù)雜界面的時(shí)候不要立馬去排，不要太去扣細(xì)節(jié)，這樣很容易陷入到死胡同里，來回推倒重做浪費(fèi)大量時(shí)間。如果你也遇到過這樣的問題，不妨試試我這個(gè)方法，先用灰塊去處理，按照元素的親密關(guān)系來組合界面。如下左圖先把元素間關(guān)系疏離清楚，再把真實(shí)數(shù)據(jù)帶入進(jìn)去看效果對(duì)不對(duì)，再對(duì)細(xì)節(jié)進(jìn)行處理，整個(gè)界面基本就可以出爐了。
（3）元素大小適中
合適的元素大小讓界面會(huì)呼吸。

（鄭重聲明：本文版權(quán)歸原作者訾亞磊所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如有侵權(quán)，請聯(lián)系我們刪除；如作者信息標(biāo)記有誤，請聯(lián)系我們修改。）

網(wǎng)頁題目：網(wǎng)頁與APP軟件UI設(shè)計(jì)小套路
網(wǎng)站網(wǎng)址：http://www.bm7419.com/news/115219.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、微信公眾號(hào)、網(wǎng)頁設(shè)計(jì)公司、定制開發(fā)、Google、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)