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