高手如何從零開(kāi)始設(shè)計(jì) UI 界面?這個(gè)實(shí)戰(zhàn)案例告訴你!

2020-8-17    周周

這是 UI 設(shè)計(jì)師 Diana Malewicz 的一篇 UI 界面設(shè)計(jì)的分享。怎樣在保證基本的可用性和易用性的同時(shí),讓界面柔和、富有親和力?如何在讓用戶愉悅的同時(shí),還能用設(shè)計(jì)取悅自己?Diana 的方法談不上有多神奇,但是讓人眼前一亮,值得借鑒。

真的關(guān)注趨勢(shì)變化,你會(huì)清晰的感受到,視覺(jué)效果和設(shè)計(jì)技巧一直在變……它們一直是設(shè)計(jì)師們的話題中心。但是這篇文章并不打算討論這個(gè)事兒,無(wú)論漸變是否流行,新擬物化的可訪問(wèn)性是否不足,都不在今天的討論范圍內(nèi)。

對(duì)于各種風(fēng)格、方法,我的觀點(diǎn)始終是:做出來(lái)的設(shè)計(jì)要可用,有用,有良好的可訪問(wèn)性,用戶可以輕松理解,就行了。不過(guò),我更樂(lè)于從趨勢(shì)中獲得樂(lè)趣,而不是將它視作為約束,如果每個(gè)界面看起來(lái)都是一樣的,那該是一件多么無(wú)聊的事情啊。

關(guān)鍵在于,要讓產(chǎn)品的視覺(jué)樣式和你的用戶群體匹配起來(lái)。

我個(gè)人非常喜歡漂亮的漸變和微妙的陰影,這樣的設(shè)計(jì)常常顯得魅力非凡。這種自然的過(guò)渡和光影的變化,非常貼合我們對(duì)于現(xiàn)實(shí)世界的感知,這就是為什么這樣的設(shè)計(jì)能夠俘獲大量沒(méi)有技術(shù)背景的用戶的心——因?yàn)樗鼈兛雌饋?lái)友好,并且易于理解。

在這篇文章當(dāng)中,我將分享如何將 UI 效果設(shè)計(jì)得出彩又友好,讓視覺(jué)效果柔和又讓人感覺(jué)舒適。本文圍繞著一個(gè)「面向年輕人的金融 APP」虛擬設(shè)計(jì)項(xiàng)目來(lái)進(jìn)行展示。

下面我們開(kāi)始吧!

視覺(jué)層次的一致性

怎么讓我們的設(shè)計(jì)看起來(lái)柔和圓潤(rùn)呢?下面開(kāi)始準(zhǔn)備工作:

1、選擇想要使用的配色(想想使用柔和的粉彩構(gòu)成的背景主色調(diào),搭配一個(gè)給人精致感的次要色,以及一個(gè)抓人注意力的強(qiáng)調(diào)色。)

2、選擇合理的字體(我用的是 Brandon Grotesque,這是我最喜歡的字體,它足夠友好,能夠營(yíng)造有趣的氛圍,且具有良好的可讀性)。接下來(lái),給字體設(shè)計(jì)不同大小和字重(最好不超過(guò)5種不同的樣式)。其中,標(biāo)題字體應(yīng)該較大,正文字體較小,最小的字體用于細(xì)節(jié)呈現(xiàn)。注意,盡量不要在長(zhǎng)句子里面使用全大寫。

3、確定你所需要的陰影的高程(Height)和模糊度。

4、如果使用的是圖標(biāo),確定使用填充樣式還是描邊樣式。盡量不要混用。

至此,一個(gè)小型的設(shè)計(jì)系統(tǒng)就已經(jīng)確定了。挺好看的!

分享本文至:

日歷

鏈接

個(gè)人資料

存檔