如何打造優(yōu)質(zhì)的移動頁面
豎屏?xí)r代已來,你的內(nèi)容,用戶能看見嗎?移動互聯(lián)網(wǎng)時代,網(wǎng)民的上網(wǎng)設(shè)備和網(wǎng)絡(luò)行為、互聯(lián)網(wǎng)信息內(nèi)容的展現(xiàn)方式,都發(fā)生了新的變化,這不可避免的促使用戶的行為習(xí)慣發(fā)生了改變。在這變化中,既能為用戶提供高效閱讀,又能滿足移動互聯(lián)網(wǎng)特點的信息內(nèi)容,已成為信息內(nèi)容生產(chǎn)者不得不研究的一個課題。 移動設(shè)備與PC設(shè)備最大的不同是豎屏與橫屏的區(qū)別,相對PC設(shè)備而言,移動設(shè)備,屏幕尺寸更小,但手機使用的都是高清屏幕材料,像素密度比電腦屏幕要高(像素密度,即每英寸屏幕所擁有的像素數(shù),像素密度越大,顯示畫面細(xì)節(jié)就越豐富)。開杰科技在大力發(fā)展網(wǎng)站建設(shè)服務(wù)的同時,也不忘手機網(wǎng)站的建設(shè),還有各類小程序開發(fā)、APP開發(fā),既方便了用戶,又為企業(yè)進一步留住了用戶。
今天,開杰就帶大家一起來探索,移動頁面的設(shè)計之道。
手機屏幕是縱向展現(xiàn),因此內(nèi)容的展現(xiàn)方式,也變成了從上往下。再者,手機屏幕小,無法像電腦屏幕,展現(xiàn)密集、大量的信息內(nèi)容。因此,在有限的屏幕空間,手機屏展現(xiàn)的內(nèi)容,要足夠少,足夠聚焦,從而營造更有視覺力展現(xiàn)效果。
在海量的信息、匆促的時間下,用戶閱讀方式、習(xí)慣發(fā)生了變化,淺度和碎片化的閱讀方式,已經(jīng)成為移動互聯(lián)網(wǎng)用戶的閱讀常態(tài)。所以,移動端的內(nèi)容,必須要精簡、易懂。
一、構(gòu)圖
圖片設(shè)計,從策劃、攝影到PS設(shè)計實施,一開始就應(yīng)有縱向構(gòu)圖的豎屏思維。
構(gòu)圖比例:當(dāng)前絕大多數(shù)手機的滿屏比例是9:16,事實上,因為有頁面標(biāo)題欄和底部按鈕,會占用一定空間,如果用9:16構(gòu)圖,會導(dǎo)致一屏展示不完一張圖的情況,因此在不同尺寸、不同分辨率的手機屏幕下,展示窗口的豎屏比例不盡相同。所以,推薦圖片設(shè)計的構(gòu)圖比例為9:12,確保能在一屏內(nèi)完整顯示內(nèi)容。
構(gòu)圖尺寸:絕大多數(shù)手機的滿屏尺寸是720*1280像素,按9:12左右的構(gòu)圖比例,構(gòu)圖的尺寸建議為:寬度720px,高度1000px。
橫向構(gòu)圖,閱讀體驗不佳。一屏就是最小的信息單元是手機屏特點之一,因此把信息切碎到手機屏的一個信息單元大小,最適宜手機用戶閱讀。一屏一主題,內(nèi)容一目了然,用戶只需瀏覽一遍,馬上能在腦海里留下印象。
二、分欄
左右分欄變上下分欄:手機用戶面對的是豎屏,閱讀的習(xí)慣是從上往下,設(shè)計師已經(jīng)習(xí)慣的左右分欄,在手機上已經(jīng)并不適用,既無法體現(xiàn)出設(shè)計的美感,也無法突出內(nèi)容。因此,設(shè)計時改變分欄方式,從左右分欄變?yōu)樯舷路謾冢呀?jīng)很有必要。
三、留白
加大主題間留白:空白是手機詳情長圖的斷句符,控制著表達(dá)的節(jié)奏。一方面,加大主題間空白讓主題間隔明顯,使用戶能很輕松地分辨出每個主題,方便閱讀。另一方面,留白能使作品節(jié)奏明朗、表達(dá)從容不迫。當(dāng)用戶處于舒服平靜的心境,自然延長了對整套圖片的閱讀時間,大幅提高了信息溝通效率。留出空白,反而更能讓用戶聚焦當(dāng)前看到的內(nèi)容。
四、文字
標(biāo)題字高≥1/10屏高:提到字號,我們腦子里浮現(xiàn)的都是這個字號在PC屏上的大小,但實際上這個印象和手機屏上的大小差別很大,會誤導(dǎo)到我們做正確的設(shè)計,所以手機圖片設(shè)計,文字不以字號為單位來衡量。我們可以以手機的“屏高”(屏幕高度)來做參照,建議大膽使用≥1/10屏高的大字來做手機端標(biāo)題。
一屏文案字?jǐn)?shù)≤3行30字:手機詳情圖上,一屏之內(nèi)文案用多少字為好?建議:文字閱讀量(包括標(biāo)題和正文)要控制在兩三行、二三十個字以內(nèi),也就是普通用戶者看兩三眼就能看完的范圍。用戶停留在每一屏的時間只有幾秒鐘,文字的閱讀任務(wù)如果太繁重,就觸碰到了用戶的耐心極限,閱讀質(zhì)量大大降低。
長文案整版只用文字:當(dāng)一屏中的文字無法控制3行30字以內(nèi)時,我們應(yīng)把所有圖片去掉,整版只用文字,想讓用戶聚焦于文字,就盡量別讓用戶的眼睛看到任何圖片,這樣,用戶進入到文本閱讀模式。其次,把長文案切割成小段落(最多四行一段),并且加上小標(biāo)題,便于用戶輕松閱讀。如果某一段文案特別重要,就把除了這段文案以外的地方全部留空,用空白來襯托文字的重要。
五、背景
背景圖上勿蓋字:手機屏幕像素比較高,色彩絢麗,人眼比較容易疲勞。
第一,色彩不用太復(fù)雜,減少對眼睛的刺激,客觀上延長了用戶的耐心,也就是延長了對本屏信息的閱讀時間。第二,背景圖上不要蓋字,否則文字和圖像傳遞的信息都會受影響,傳遞效果會被削弱。
六、總結(jié)
商家都希望把自己的所有賣點全都講出來,期望買家對自己了解多一點。但實際上,大部分內(nèi)容得不到用戶的認(rèn)真對待,所以并沒有多少用戶真正看完你的這些表述,一點一劃、匆匆一瞥就已完結(jié)。
一個被忽視的邏輯:你和買家之間的有效溝通信息量,并不在于你表達(dá)了多少,而在于用戶看到多少、接收到多少、理解了多少。所以,手機上的內(nèi)容,不僅要讓用戶一眼看得見,而且要馬上能看懂,在看見內(nèi)容(包括文字、圖片)的瞬間,就能理解你想表達(dá)的意思。
【聲明:信息來自網(wǎng)絡(luò),如有侵權(quán),聯(lián)系既刪?!?br>