2020-3-1 ui設(shè)計分享達(dá)人
如今我們的生活,到處都是大幅圖像廣告,紛擾喧鬧的各類短視頻與直播。這是一個快節(jié)奏時代,我們更傾向閱讀圖像。為什么我們偏愛圖像視覺超過文字?從人類進(jìn)化角度來看,原始時代的祖先通過五感感知著這個世界,其中通過視覺來感知判斷生活,其他四感輔助之。即使后面我們發(fā)明了文字,但發(fā)展至今,對圖像的本能吸引力依舊強(qiáng)烈。因為在我們認(rèn)知的潛意識里圖像相較于文字更能讓我們快速輕松理解并記憶。
圖像如此重要,設(shè)計作品中當(dāng)然也必不可少。因為圖片,它能一定程度上決定畫面基調(diào);引導(dǎo)視覺流程;調(diào)劑平衡多段文字信息的枯燥性,讓閱讀變得輕松容易。
在UI設(shè)計中,我們經(jīng)常需要把設(shè)計輸出物拿給產(chǎn)品經(jīng)理或者其他有設(shè)計決斷力的人看,UI設(shè)計中圖片使用的好與壞,能很大程度上影響著決策者的感知,以及你的設(shè)計過稿率。
如下左圖:商品視角、調(diào)性、細(xì)節(jié),都沒有右圖來的統(tǒng)一、有質(zhì)感。單看這兩張圖,會讓用戶有這樣的心理感知:左圖感覺像山寨盜版商城;右圖則會認(rèn)為是嚴(yán)肅官方認(rèn)證商城。所以,在同樣頁面布局下,不同的圖片使用與處理,能讓UI頁面的品質(zhì)有較大的感知差異。
圖片的使用如此重要。那么,我們在正式做UI設(shè)計前,首先需要弄清楚圖片在頁面的占比情況以及后續(xù)圖片的支撐來源問題。
在構(gòu)思UI頁面階段,首先需要了解以下兩個問題:1.圖片區(qū)域占比問題;2.圖片來源問題。當(dāng)頁面圖片占比多,且讓用戶自定義,那么需要預(yù)估到APP上線后設(shè)計可控率會降低。換句話說,實際上線效果會不盡人意。如下圖:由于淘寶和網(wǎng)易嚴(yán)選平臺屬性不同,在圖片品控上就有著不同的視覺感受。當(dāng)然,不是說淘寶做的不好,而是當(dāng)一個平臺集納不同的店鋪,不同調(diào)性的產(chǎn)品類型,即使有圖片規(guī)范,也難如統(tǒng)一品類、調(diào)性的產(chǎn)品來的統(tǒng)一。
弄清圖片內(nèi)容的可控性問題后,開始進(jìn)入設(shè)計環(huán)節(jié),那么我們該如何選擇圖片?
在不同的場合有恰當(dāng)合適的場景搭配,是十分基礎(chǔ)且重要的事情。在UI設(shè)計中,任何一個部分的設(shè)計以及元素運(yùn)用都需要為產(chǎn)品服務(wù)。圖片也不例外。如果你是廚房類APP,頭圖選用小清新感的圖片,就顯得不夠合適,帶有環(huán)境食材元素的圖片才更讓用戶有共鳴。
2.是否能清晰表達(dá)產(chǎn)品核心內(nèi)容?
圖片是否主體明確?能一眼正確無誤的傳達(dá)核心內(nèi)容?會不會因為其他元素元素?fù)屃酥黧w視覺,找不到視覺重點(diǎn)?
3.是否美觀、有品質(zhì)、讓人想擁有?
圖片是否能表達(dá)美好生活以及美好品質(zhì)的向往?光影關(guān)系是否自然?圖片是否高清有細(xì)節(jié)?
當(dāng)明白圖片如何選擇后,還想和你分享一些冷門且重要的圖片過稿小技巧。記下來,將大大提升你的設(shè)計過稿率。
漂亮圖片有很多,如果我們都以漂亮為基準(zhǔn),找出來的圖片也會形色各異。由于用戶的實際使用場景是:瀏覽一個完整APP,統(tǒng)一風(fēng)格調(diào)性比美更重要。如果商品角度不一樣;飽和度高低不同;抽象與具象等,都會形成產(chǎn)品不統(tǒng)一,用戶視覺不適應(yīng)等問題。
有時我們?yōu)榱粟s時間,直接用圖片填充插件,讓圖片區(qū)域自動填充。但我還是想要給到你這樣一個建議:一個專業(yè)且成熟的設(shè)計師,即使是設(shè)計初稿,也不能隨便拿張圖,湊合一下。任何時候的匯報,都需要有著處女座對于事物的完美要求,過自己這關(guān)。因為任何時候你的表達(dá)與表現(xiàn),都形成了你在別人心目中專不專業(yè)的看法,從而影響著后續(xù)的設(shè)計話語權(quán)問題。如下圖都是商城陳列頁面,右側(cè)的圖片給出上線的實際效果,更貼合產(chǎn)品,方便設(shè)計決策者給出建議方向,或做出決策。
我們都是視覺動物,不管你是否愿意承認(rèn):我們常常通過視覺表象,才決定是否愿意去更深入的了解某個東西。
設(shè)計就是在做產(chǎn)品視覺表象的表達(dá),我們需要盡可能使用貼切的,漂亮的圖片。讓UI視覺看起來更加美觀,讓用戶愿意停留,認(rèn)可以及信賴平臺。
轉(zhuǎn)自:站酷-丘丘的設(shè)計筆記
藍(lán)藍(lán)設(shè)計的小編 http://www.wnxcall.com