手機(jī)版WPS 手機(jī)版wps免費(fèi)下載
2022-11-29
更新時(shí)間:2022-04-17 13:49:44作者:佚名
當(dāng)我們打開(kāi)一個(gè)App時(shí),從視覺(jué)層面分析,影響用戶(hù)對(duì)App整體感官體驗(yàn)的元素主要有:圖片、文字、色彩、圖標(biāo)、留白等。圖片的合理運(yùn)用、清晰的信息層級(jí)、舒適的色彩搭配都將會(huì)提高整個(gè)App的美感,從而為整個(gè)的產(chǎn)品體驗(yàn)加分。一個(gè)成功的產(chǎn)品,視覺(jué)層面只是其中的一部分,但是作為一個(gè)合格的UI設(shè)計(jì)師,我們要做的就是把這其中的一部分做到極致。
一. 圖片,如同一個(gè)人的衣著品味
圖片在A(yíng)pp中是非常常見(jiàn)的,圖片的展現(xiàn)形式和圖片的質(zhì)量都影響著用戶(hù)對(duì)產(chǎn)品的感官體驗(yàn)。圖片的定位就如同一個(gè)人的衣著品味,不同的穿衣風(fēng)格會(huì)使別人對(duì)你作出不同的判斷,為你打上不同社會(huì)屬性的標(biāo)簽。
下面我們一起來(lái)看看圖片在A(yíng)pp設(shè)計(jì)中需要注意的關(guān)鍵點(diǎn),將會(huì)從圖片比例、一致性、圖片質(zhì)量與真實(shí)性等方面進(jìn)行分析。
1. 圖片比例有什么講究?
不同比例的圖片所傳達(dá)的信息主體不盡相同,根據(jù)產(chǎn)品屬性我們會(huì)選擇與之相符的圖片比例進(jìn)行整體的框架布局。
通過(guò)體驗(yàn)一些主流的App,我們會(huì)發(fā)現(xiàn)一些比較常用的圖片比例,如 1:1、4:3、16:9、16:10等等;也會(huì)發(fā)現(xiàn)一些打破常規(guī)比例的設(shè)計(jì),我們需要分析它們的性格,結(jié)合自身產(chǎn)品的特點(diǎn),才能在自己的APP設(shè)計(jì)中合理的加以運(yùn)用。
1:1 強(qiáng)調(diào)主體的存在感
1:1 的圖片比例是比較常見(jiàn)的一種設(shè)計(jì)比例,利用此長(zhǎng)寬比更容易將構(gòu)圖歸整得簡(jiǎn)單,突出主體的存在感。常用于產(chǎn)品展示、頭像、特寫(xiě)展示等場(chǎng)景,在電商類(lèi)APP中尤為常見(jiàn)。
4:3的圖片比例可以使圖像更緊湊,更易構(gòu)圖,方便設(shè)計(jì)師發(fā)揮。由于手機(jī)屏幕容量較小,作為全屏展示時(shí),該比例在A(yíng)pp設(shè)計(jì)布局上面占用空間較大。作為設(shè)計(jì)師來(lái)說(shuō),這個(gè)比例經(jīng)常接觸,站酷、UI中國(guó)的作品封面、Dribbble作品展示等都采用這個(gè)比例。
16:9的圖片比例可以呈現(xiàn)電影場(chǎng)景般的效果,多用于橫向構(gòu)圖,是應(yīng)用非常廣泛的尺寸比例之一,能給用戶(hù)一種視野開(kāi)闊的體驗(yàn)。在很多影視娛樂(lè)類(lèi)APP設(shè)計(jì)中運(yùn)用廣泛,如騰訊視頻、網(wǎng)易云音樂(lè)等。
黃金比例就像金字塔上的明珠,越接近她越有魅力,反之會(huì)魅力減弱,16:10的圖片比例最為接近。設(shè)計(jì)沒(méi)有絕對(duì)的標(biāo)準(zhǔn),我們可以遵循一些優(yōu)秀的經(jīng)驗(yàn)規(guī)則,但是也要敢于突破規(guī)則,嘗試更多的可能性。
X:≤Y代表寬度固定,高度在最大值之間自定義的瀑布流設(shè)計(jì),在一些用于用戶(hù)沒(méi)有很明確的目的,只是喜歡獲取盡量多的信息的情況下采用這種設(shè)計(jì)方式。X:≤Y的圖片比例要注意高度的控制,不要超出屏幕可顯示區(qū)域的范圍,如花瓣網(wǎng)在750x1334px的設(shè)計(jì)中高度最大值為:848 px。
2. 圖片比例的一致性
當(dāng)我們結(jié)合產(chǎn)品特點(diǎn)確定合適的圖片展示比例以后,需要針對(duì)整體的布局與圖片分布情況,規(guī)范出那些布局可以采用相同的圖片展示比例。在保障視覺(jué)效果與交互形式的情況下,相同的主體,在不同的頁(yè)面中最好采用相同的比例呈現(xiàn),這樣的好處不僅可以保持視覺(jué)表達(dá)的一致性,也能給后期運(yùn)營(yíng)維護(hù)帶來(lái)便利。
3. 提高圖片的質(zhì)量
越來(lái)越多的產(chǎn)品對(duì)圖片質(zhì)量開(kāi)始加以重視,比如網(wǎng)易嚴(yán)選對(duì)產(chǎn)品圖片的拍攝與處理都有嚴(yán)格的規(guī)范,目的就是為了提升產(chǎn)品氣質(zhì)和在用戶(hù)心中的印象。我們?cè)谠O(shè)計(jì)的時(shí)候更要以最佳的圖片來(lái)烘托我們的設(shè)計(jì)稿,圖片的質(zhì)量影響著整個(gè)界面的格調(diào)。
4. 圖片的真實(shí)還原
雖然前面提到圖片質(zhì)量的重要性,但是我們不能為了視覺(jué)效果選擇一些與主題無(wú)關(guān)的配圖,這樣也會(huì)給決策者一種誤導(dǎo)。我們可以提高配圖的質(zhì)量,但是需要保證圖片的真實(shí)還原,這樣才能讓你的設(shè)計(jì)作品更加真實(shí)合理。
在一些本土的產(chǎn)品設(shè)計(jì)中,對(duì)于國(guó)外圖片素材的運(yùn)用,需要謹(jǐn)慎對(duì)待。如案例中的模特形象,文案信息的傳達(dá)更加偏向于國(guó)內(nèi)的場(chǎng)景,如果運(yùn)用一張國(guó)外的模特素材也許逼格更高,可是卻無(wú)法真實(shí)的還原產(chǎn)品場(chǎng)景,會(huì)給決策者傳達(dá)一種錯(cuò)誤的認(rèn)知。