幫助

豎屏?xí)r代:如何打造優(yōu)質(zhì)移動(dòng)頁(yè)面提高用戶體驗(yàn)?

2018-04-27 11:43 優(yōu)化推廣

智能手機(jī)的快速普及,推動(dòng)著中國(guó)互聯(lián)網(wǎng)由PC向移動(dòng)的高速轉(zhuǎn)變,據(jù)《第 40 次中國(guó)互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示,截止到2017 年6 月,我國(guó)網(wǎng)民使用手機(jī)上網(wǎng)的比例達(dá)到96.3%,中國(guó)已經(jīng)跨入移動(dòng)互聯(lián)網(wǎng)的時(shí)代。

移動(dòng)互聯(lián)網(wǎng)時(shí)代,網(wǎng)民的上網(wǎng)設(shè)備和網(wǎng)絡(luò)行為、互聯(lián)網(wǎng)信息內(nèi)容的展現(xiàn)方式,都發(fā)生了新的變化,這不可避免的促使用戶的行為習(xí)慣發(fā)生了改變。在這變化中,既能為用戶提供高效閱讀,又能滿足移動(dòng)互聯(lián)網(wǎng)特點(diǎn)的信息內(nèi)容,已成為信息內(nèi)容生產(chǎn)者不得不研究的一個(gè)課題。

今天,就帶大家一起來(lái)探索,移動(dòng)互聯(lián)網(wǎng)時(shí)代,信息內(nèi)容(移動(dòng)頁(yè)面)的設(shè)計(jì)之道。

思維認(rèn)知:重新認(rèn)識(shí)戰(zhàn)場(chǎng),探索移動(dòng)互聯(lián)網(wǎng)的秘密

移動(dòng)設(shè)備特點(diǎn)

相對(duì)PC設(shè)備而言,移動(dòng)設(shè)備(手機(jī)),屏幕尺寸更小,但手機(jī)使用的都是高清屏幕材料,像素密度比電腦屏幕要高(像素密度,即每英寸屏幕所擁有的像素?cái)?shù),像素密度越大,顯示畫面細(xì)節(jié)就越豐富。),所以手機(jī)上看東西更清晰,同時(shí)也意味著,同等尺寸的圖片,在電腦上看合適時(shí),放到手機(jī)上看一定會(huì)變小了。

手機(jī)屏幕是縱向展現(xiàn),因此內(nèi)容的展現(xiàn)方式,也變成了從上往下。再者,手機(jī)屏幕小,無(wú)法像電腦屏幕,展現(xiàn)密集、大量的信息內(nèi)容;也不擅長(zhǎng)表達(dá)遠(yuǎn)景、廣角、大場(chǎng)面,但手機(jī)屏幕非常擅長(zhǎng)表達(dá)近焦、微距、高清特寫、局部細(xì)節(jié);因此,在有限的屏幕空間,手機(jī)屏展現(xiàn)的內(nèi)容,要足夠少,足夠聚焦,從而營(yíng)造更有視覺力展現(xiàn)效果。

用戶行為習(xí)慣

在海量的信息、匆促的時(shí)間下,用戶閱讀方式、習(xí)慣發(fā)生了變化;跳讀、挑讀、瞄讀、瞟讀,淺度和碎片化的閱讀方式,已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)用戶的閱讀常態(tài);所以,移動(dòng)端的內(nèi)容,必須要精簡(jiǎn)、易懂。

從移動(dòng)設(shè)備的特點(diǎn)和用戶的行為習(xí)慣分析,移動(dòng)端內(nèi)容設(shè)計(jì),應(yīng)該做到:豎屏構(gòu)圖、大圖大字、淺顯易懂、少放內(nèi)容,以打造一個(gè)讓用戶:看得見、看得完、看得懂、看得爽,既符合移動(dòng)設(shè)備展現(xiàn)特點(diǎn),又能滿足用戶閱讀習(xí)慣的優(yōu)質(zhì)移動(dòng)頁(yè)面。

行動(dòng)方法:重新制定戰(zhàn)術(shù),打造優(yōu)質(zhì)移動(dòng)頁(yè)面

縱向構(gòu)思,滿足移動(dòng)設(shè)備展現(xiàn)要求

 

•  構(gòu)圖思維:

圖片設(shè)計(jì),從策劃、攝影到PS設(shè)計(jì)實(shí)施,一開始就應(yīng)有縱向構(gòu)圖的豎屏思維。
•  構(gòu)圖比例:

當(dāng)前絕大多數(shù)手機(jī)的滿屏比例是9:16,事實(shí)上,因?yàn)橛许?yè)面標(biāo)題欄和底部按鈕,會(huì)占用一定空間,如果用9: 16 構(gòu)圖,會(huì)導(dǎo)致一屏展示不完一張圖的情況,因此在不同尺寸、不同分辨率的手機(jī)屏幕下,展示窗口的豎屏比例不盡相同。所以,推薦圖片設(shè)計(jì)的構(gòu)圖比例為9:12,確保能在一屏內(nèi)完整顯示內(nèi)容。

•  構(gòu)圖尺寸:

絕大多數(shù)手機(jī)的滿屏尺寸是720* 1280 像素,按9: 12 左右的構(gòu)圖比例,構(gòu)圖的尺寸建議為:寬度720px,高度1000px。

▼  橫向構(gòu)圖,閱讀體驗(yàn)不佳

▼  縱向構(gòu)圖,閱讀更舒服

橫向構(gòu)圖 VS 縱向構(gòu)圖,閱讀感受的體驗(yàn)效果分明。


相關(guān)推薦

QQ在線咨詢