ui設(shè)計(jì)中情感化設(shè)計(jì)如何做

今天分享的是兩個(gè)入口的UI設(shè)計(jì)——發(fā)視頻和發(fā)圖文。

整個(gè)過(guò)程經(jīng)歷了如下四個(gè)過(guò)程：

1. 最原始的想法

發(fā)圖文與發(fā)視頻的入口，其實(shí)最簡(jiǎn)單的想法就是直接畫個(gè)視頻和圖文的圖標(biāo)，比如下面這種：

當(dāng)融入一些設(shè)計(jì)風(fēng)格之后，比如我們 8.0 的風(fēng)格：js.design

干凈、清晰！

但是這次想嘗試的是偏向情感化一點(diǎn)的，最直接的方式就是與吉祥物形象相互結(jié)合，于是就有了后面的不斷嘗試。

因?yàn)檫蛇傻男蜗笤紶顟B(tài)如下：

中間有一塊白色區(qū)域，感覺正好可以結(jié)合一些圖形來(lái)表達(dá)入口的意思，比如中間放一個(gè)播放按鈕，或者圖文排版的兩條橫線，如下圖：

但是有兩點(diǎn)問(wèn)題：

其一

形象有一個(gè)設(shè)定，就是當(dāng)呱呱展示全身時(shí)，一定要同時(shí)顯示黑子的形象，不能只讓青蛙全身獨(dú)立出現(xiàn)，不然就會(huì)感覺是一個(gè)完全獨(dú)立的新增形象。

其二

這個(gè)效果也確實(shí)有點(diǎn)不理想，有點(diǎn)土，形象與圖形結(jié)合也有點(diǎn)生硬。

既然剛才的形式不合適，那我們就換一種，比如讓呱呱黑子手拿著圖形，這樣會(huì)更生動(dòng)一點(diǎn)，比如像這種：

哦，對(duì)，要有黑子露出，換成這種：

現(xiàn)在還有兩個(gè)點(diǎn)需要優(yōu)化一下，其中一個(gè)是動(dòng)視的問(wèn)題，現(xiàn)在只有一種動(dòng)視，有點(diǎn)單薄，其次是顏色有點(diǎn)單，不夠豐富。

于是動(dòng)勢(shì)上增加了一個(gè)倒下去的樣子：

然后在顏色方面增加一個(gè)亮色：檸檬黃，還有一個(gè)暗色：紫色，這樣顏色對(duì)比度、豐富度就都有了。

好了，以上就是這兩個(gè)小入口的設(shè)計(jì)過(guò)程，雖然由于一些原因沒(méi)能上線，但設(shè)計(jì)的過(guò)程還是很開心的！

情感化設(shè)計(jì)是比較容易讓你的設(shè)計(jì)形成亮點(diǎn)的手段，但是必須要有適當(dāng)?shù)脑煨湍芰?、配色能力，這些都需要平時(shí)大量的練習(xí)和沉淀，才能夠最后產(chǎn)出一些比較穩(wěn)定、耐看的作品。

我的造型能力還需要提高，和大家一起加油，下期再見啦！

標(biāo)簽：