移動互聯(lián)網(wǎng)時代,如何打造優(yōu)質(zhì)移動頁面提高用戶體驗?

2024-01-11    分類: 網(wǎng)站建設(shè)

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

移動設(shè)備特點

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

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

用戶行為習(xí)慣

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

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

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

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

?  構(gòu)圖思維:

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

?  構(gòu)圖比例:

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

?  構(gòu)圖尺寸:

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

?  一屏一主題

一屏就是最小的信息單元是手機(jī)屏特點之一,因此把信息切碎到手機(jī)屏的一個信息單元大小,最適宜手機(jī)用戶閱讀。一屏一主題,內(nèi)容一目了然,用戶只需瀏覽一遍,馬上能在腦海里留下印象。

?  砍掉左右空白

在面對橫的長方形屏幕時,為了畫面整體平衡,將設(shè)計主體居中,讓用戶注意力往中間正方形聚焦,然后左右留白,幾乎是天生和諧、天經(jīng)地義的排版設(shè)計手法。

但是,當(dāng)我們面對的手機(jī)屏不再是橫方形、而是豎屏的時候,左右留白就白白浪費了手機(jī)屏的展示空間,因此也不再合理、正確了??车糇笥铱瞻?,是解決這一問題的最佳方法。

?  左右分欄變上下分欄

手機(jī)用戶面對的是豎屏,閱讀的習(xí)慣是從上往下,設(shè)計師已經(jīng)習(xí)慣的左右分欄,在手機(jī)上已經(jīng)并不適用,既無法體現(xiàn)出設(shè)計的美感,也無法突出內(nèi)容。因此,設(shè)計時改變分欄方式,從左右分欄變?yōu)樯舷路謾冢呀?jīng)很有必要。

?  加大主題間留白

空白是手機(jī)詳情長圖的斷句符,控制著表達(dá)的節(jié)奏。一方面,加大主題間空白讓主題間隔明顯,使用戶能很輕松地分辨出每個主題,方便閱讀;另一方面,留白能使作品節(jié)奏明朗、表達(dá)從容不迫。當(dāng)用戶處于舒服平靜的心境,自然延長了對整套圖片的閱讀時間,大幅提高了信息溝通效率。

文案處理,讓內(nèi)容看得見、看得懂

?  標(biāo)題字高≥1/ 10 屏高

提到字號,我們腦子里浮現(xiàn)的都是這個字號在PC屏上的大小,但實際上這個印象和手機(jī)屏上的大小差別很大,會誤導(dǎo)到我們做正確的設(shè)計,所以手機(jī)圖片設(shè)計,文字不以字號為單位來衡量。我們可以以手機(jī)的“屏高”(屏幕高度)來做參照,建議大膽使用≥1/ 10 屏高的大字來做手機(jī)端標(biāo)題。

用小字做標(biāo)題,手機(jī)屏看不清楚,所以要用大字。

?  一屏文案字?jǐn)?shù)≤ 3 行 30 字

手機(jī)詳情圖上,一屏之內(nèi)文案用多少字為好?建議:文字閱讀量(包括標(biāo)題和正文)要控制在兩三行、二三十個字以內(nèi),也就是普通用戶者看兩三眼就能看完的范圍。用戶停留在每一屏的時間只有幾秒鐘,文字的閱讀任務(wù)如果太繁重,就觸碰到了用戶的耐心極限,閱讀質(zhì)量大大降低。

少即是多,簡單即完美!

?  長文案整版只用文字

當(dāng)一屏中的文字無法控制 3 行 30 字以內(nèi)時,我們應(yīng)把所有圖片去掉,整版只用文字,想讓用戶聚焦于文字,就盡量別讓用戶的眼睛看到任何圖片,這樣,用戶進(jìn)入到文本閱讀模式。其次,把長文案切割成小段落(最多四行一段),并且加上小標(biāo)題,便于用戶輕松閱讀。第三,如果某一段文案特別重要,就把除了這段文案以外的地方全部留空,用空白來襯托文字的重要。

長文案只留文字不留圖,讓眼睛認(rèn)真閱讀,不受圖片干擾。

?  背景圖上勿蓋字

手機(jī)屏幕像素比較高,色彩絢麗,人眼比較容易疲勞,所以對背景圖的要求:

第一,色彩不用太復(fù)雜,減少對眼睛的刺激,客觀上延長了用戶的耐心,也就是延長了對本屏信息的閱讀時間。

第二,背景圖上不要蓋字,否則文字和圖像傳遞的信息都會受影響,傳遞效果會被削弱。

突出細(xì)節(jié),于細(xì)微處見真章

?  大膽使用近焦局部圖

手機(jī)屏幕不擅長表達(dá)遠(yuǎn)景、廣角、大場面,但非常擅長表達(dá)近焦、微距、高清特寫、局部細(xì)節(jié)。不用擔(dān)心用戶因為看到的是局部圖,而不能理解產(chǎn)品的整體,因為人類大腦早就演化出自動補(bǔ)圖的功能。在手機(jī)屏上需要突破兼顧場景的整體性,以追求畫面的和諧的設(shè)計思維習(xí)慣的禁錮,大膽的去使用使近焦局部圖,營造更強(qiáng)的視覺沖擊、帶入感,來縮短和用戶之間心靈溝通距離。

大膽使用近焦細(xì)節(jié)圖,營造視覺沖擊力!

思維進(jìn)階

?  少即是多,學(xué)會做減法

商家都希望把自己的所有賣點全都講出來,期望買家對自己了解多一點。但實際上,大部分內(nèi)容得不到用戶的認(rèn)真對待,所以并沒有多少用戶真正看完你的這些表述,一點一劃、匆匆一瞥就已完結(jié)。

一個被忽視的邏輯:你和買家之間的有效溝通信息量,并不在于你表達(dá)了多少,而在于用戶看到多少、接收到多少、理解了多少。

因此,不必追求面面俱到,刪掉那些沒用的,對內(nèi)容做大減法,讓用戶的眼光更聚焦。所以,建議詳情頁賣點控制在10~ 12 個左右,圖片數(shù)量控制在12~ 15 張左右。

?  核心思想:一眼見,秒懂

一眼見,秒懂!通行于設(shè)計、創(chuàng)意、攝影、文案、選品所有環(huán)節(jié)。

手機(jī)用戶很忙,走馬觀花、一瞄到底就是常態(tài);信息泛濫,而且同質(zhì)化很嚴(yán)重,用戶沒什么耐心。一眼看不見的內(nèi)容,基本上就會被跳過去了,所以只有一眼就能看得見的內(nèi)容(包括文字、圖片),才是有效內(nèi)容。

手機(jī)用戶很“懶”,一遇到需要動腦的內(nèi)容就嫌累,手指一滑逃之夭夭;因此,你講的東西不能太深奧、太抽象、太含蓄、太晦澀,要直接把顯性意思清晰地表達(dá)出來,讓用戶不假思索就能明白,越淺顯直白越好。

所以,手機(jī)上的內(nèi)容,不僅要讓用戶一眼看得見,而且要馬上能看懂,在看見內(nèi)容(包括文字、圖片)的瞬間,就能理解你想表達(dá)的意思。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司!

網(wǎng)站欄目:移動互聯(lián)網(wǎng)時代,如何打造優(yōu)質(zhì)移動頁面提高用戶體驗?
地址分享:http://www.muchs.cn/news20/313070.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、網(wǎng)站建設(shè)小程序開發(fā)、App開發(fā)微信小程序

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都seo排名網(wǎng)站優(yōu)化