本次跟大家分享一下如何避免自己的稿子和原型圖過(guò)于相似，尤其在原型圖已經(jīng)做的比較好的情況下如何進(jìn)一步的視覺化。
進(jìn)入正題，首先第一點(diǎn)，就是要理解需求。身為設(shè)計(jì)師，在接手一個(gè)需求時(shí)，首先就要去理解這個(gè)需求，不能僅僅從視覺的角度去做需求。
我們來(lái)看一個(gè)例子，比如說(shuō)現(xiàn)在要設(shè)計(jì)頁(yè)面的頭部：
你會(huì)怎么去進(jìn)行視覺化？
大部分的設(shè)計(jì)師，可能只會(huì)簡(jiǎn)單的上色然后優(yōu)化排版就結(jié)束了：
但如果你去理解思考一下整個(gè)需求，你的設(shè)計(jì)就會(huì)大不同：
當(dāng)用戶有「行程信息」時(shí)，我嘗試將「行程信息」直接外放是否更合適，更友好呢
如果有多個(gè)行程信息時(shí)，又該怎么去展示？
我的解決辦法是先加一個(gè)跑馬燈在這里，讓用戶可以通過(guò)滑動(dòng)去切換查看不同的行程：
然后在卡片下面再疊一張卡片，從視覺上體現(xiàn)出它是有多個(gè)的：
接著，原型圖中還有個(gè)ai自動(dòng)規(guī)劃行程的功能：
這個(gè)擺放的位置要如何處理？首先先要意識(shí)到這個(gè)功能的展示層級(jí)是弱于「我的行程」這張卡片的。所以在處理上我們不能很粗暴的直接放上去：
怎么辦呢？再回來(lái)看看整體，現(xiàn)在卡片上的信息都集中在左側(cè)，右側(cè)全是空的，從排版上看這種處理方式并不均衡，顯得左重右側(cè)輕：
所以能不能考慮把a(bǔ)i推薦的功能挪到右側(cè)去展示？
在卡片的右上角挖一個(gè)缺口，放ai的頭像和文字
設(shè)計(jì)就和下棋對(duì)弈一般，我們要走一步看三步。放置好ai頭像和對(duì)話之后，你會(huì)發(fā)現(xiàn)左側(cè)還有一片空白。我們可以用天氣來(lái)填補(bǔ)，還可以更好的為用戶提供幫助。
那么從理解需求的角度，就完成了頁(yè)面的視覺優(yōu)化。
第二點(diǎn)就是排版方面。透過(guò)現(xiàn)象看本質(zhì)，我們從案例中學(xué)習(xí)：
這是一張很常見的小卡片，這樣的排版沒有什么問(wèn)題。但是我們可以將排版處理的更好！
如果不知道該如何下手，我們可以先試著拆分，將一個(gè)整體拆分成多個(gè)部分。
比如這里，將標(biāo)題以及日期還有報(bào)名信息去給它拆分到圖片上面，你就會(huì)發(fā)現(xiàn)它下面的這些信息就沒有那么的累贅、擁擠，而且它整體的排版更加舒適。
圖形在ui的設(shè)計(jì)稿中扮演的就是圖標(biāo)的角色，也可以說(shuō)是當(dāng)中的形狀和容器，就比如說(shuō)其中的一些卡片的設(shè)計(jì)，標(biāo)簽以及按鈕都是一個(gè)容器。
如果要對(duì)原型圖進(jìn)行視覺化，那么可以直接從圖標(biāo)入手。如果說(shuō)頁(yè)面中沒有圖標(biāo)，那么你就可以添加圖標(biāo)。有圖標(biāo)，就對(duì)圖標(biāo)精細(xì)化。
在這個(gè)頁(yè)面中沒有圖標(biāo)，我們可以直接添加圖標(biāo)來(lái)取代文字。
這個(gè)頁(yè)面中已經(jīng)有了圖標(biāo)了，所以我們要對(duì)圖標(biāo)精細(xì)化的處理。
如果在原型圖的基礎(chǔ)上，對(duì)圖標(biāo)造型進(jìn)行優(yōu)化，發(fā)現(xiàn)整體設(shè)計(jì)和原型圖的區(qū)別并不是很大（如設(shè)計(jì)1）
我們需要進(jìn)一步精細(xì)化，這里是將圖標(biāo)換了一種更復(fù)雜的風(fēng)格——輕質(zhì)感風(fēng)，讓圖標(biāo)在這里的風(fēng)格化更加明顯。
除了圖標(biāo)之外，頁(yè)面中的容器可以嘗設(shè)計(jì)成異形。
像這種設(shè)計(jì)它都有一些缺角，或者每個(gè)角的圓角大小不統(tǒng)一，這些都是很通用的一個(gè)異形卡片的做法。
還有一些異形會(huì)根據(jù)設(shè)計(jì)的內(nèi)容去變化。
比如下面這張頁(yè)面展示的是電影相關(guān)的內(nèi)容，它就會(huì)把每一個(gè)容器它給它畫成電影票的形式。
又比如是跟優(yōu)惠券相關(guān)的內(nèi)容，它的容器就做成了優(yōu)惠券的形式。
除此之外，我們可以根據(jù)品牌或者說(shuō)ip的角度去設(shè)計(jì)容器。
比如下面這個(gè)例子，就把小標(biāo)簽做成了小貓的形式，這個(gè)小貓其實(shí)是app里的吉祥物。
最后一點(diǎn)是關(guān)于字體的，在進(jìn)行視覺化的時(shí)候可以添加合適的字體設(shè)計(jì)來(lái)為整體畫面增加設(shè)計(jì)感。
比如支付寶的這個(gè)頁(yè)面，我們可以看到上面的標(biāo)題字都是經(jīng)過(guò)設(shè)計(jì)的。
你能看出它有幾層的設(shè)計(jì)細(xì)節(jié)嗎，我們一起來(lái)拆解看一下。
第一層：將普通字體換成了帶有風(fēng)格感的字體
第二層：將字體做成傾斜的，并將當(dāng)中部分筆畫改成閃電icon
第三層：和品牌logo結(jié)合，延展到多個(gè)字體的設(shè)計(jì)當(dāng)中
一般的字體設(shè)計(jì)到達(dá)第二層就已經(jīng)差不多了，如果想要更好，可能就需要做到第三層，讓整體設(shè)計(jì)更具差異化和品牌傳播性。
以上內(nèi)容就是 本次分享的如何避免自己的稿子和原型圖過(guò)于相似，怎么去進(jìn)行視覺化的4種方向。
最后再來(lái)回顧一下這四個(gè)點(diǎn)吧：
