當(dāng)前位置:華企互贏科技(廣東)有限公司 >> 新聞動(dòng)態(tài) >> 瀏覽文章

無線端頁面設(shè)計(jì)“三大雷區(qū)”你知道嗎?

日期:2018年03月29日  瀏覽: 次

關(guān)鍵詞:無線端 規(guī)范 用戶體驗(yàn)

文章導(dǎo)讀:在當(dāng)代互聯(lián)網(wǎng)時(shí)代,智能手機(jī)的運(yùn)用幾乎遍布整個(gè)世界,人們越來越注重手機(jī)端的研究開發(fā)與應(yīng)用,

而隨著智能手機(jī)設(shè)備的發(fā)展成熟,淘寶不停地把流量引到移動(dòng)端上。

現(xiàn)在移動(dòng)端占流量比率為80%以上,通俗地說,現(xiàn)在手機(jī)可以輕易而且更方便快捷能完成的事誰會再用電腦呢?

那么,對于電商行業(yè)來說,手機(jī)端頁面視覺設(shè)計(jì)成為重點(diǎn)關(guān)注對象之一。

正文:

手機(jī)端頁面的設(shè)計(jì)有許多的規(guī)范,大到涉及整個(gè)頁面的排版呈現(xiàn)方式,小到一個(gè)icon的尺寸大小,

這都關(guān)系到視覺頁面的美觀程度以及用戶體驗(yàn)設(shè)計(jì)。

所以應(yīng)該積極主動(dòng)去分析深入了解并研究出可行的解決方案,

同樣的,無線端頁面設(shè)計(jì)存在許多雷區(qū)陷阱,這個(gè)需要設(shè)計(jì)師去避免出現(xiàn)錯(cuò)誤的。

一、無線端視覺規(guī)范

(一)、無線端頁面尺寸規(guī)范隨意縮放

無線端頁面一般來說是延續(xù)pc端來進(jìn)行更改調(diào)整的,所以很多小伙伴直接在pc端的基礎(chǔ)上直接進(jìn)行收縮,

然后變形,大部分操作就會失效,這樣的話就會影響到無線端文字的可讀性以及整個(gè)視覺畫面的布局,造成整個(gè)視覺布局的不協(xié)調(diào)性。

(二)、解決方法:

針對無線端與pc端存在的差異,首先應(yīng)該不能直接在pc端的原基礎(chǔ)上進(jìn)行修改,

而是應(yīng)該對無線端的頁面進(jìn)行“再設(shè)計(jì)”,針對手機(jī)端的規(guī)范尺寸進(jìn)行適配,

比如:應(yīng)該調(diào)整按鈕大小,以更加適合無線端用戶的視覺可讀習(xí)慣、文字大小,

一般18px的字號是剛好可以清楚的程度,而24px是比較舒服的一個(gè)狀態(tài),30px是用于想到重點(diǎn)突出的大標(biāo)題。

不過一般在頁面中出現(xiàn)頻率不高,因?yàn)槿绻晃队么髽?biāo)題字體的話,盡管可讀性比較好,但是頁面也需要加長,用戶會沒有耐心。

類似這些頁面的無線端就是進(jìn)行過“再設(shè)計(jì)”的:

 
無線端頁面設(shè)計(jì)“三大雷區(qū)”你知道嗎?
 
無線端頁面設(shè)計(jì)“三大雷區(qū)”你知道嗎?

(網(wǎng)上素材)

二、無線端頁面呈現(xiàn)內(nèi)容

(一)、pc端內(nèi)容信息量大,一字不漏照搬到無線端

由于pc端的頁面尺寸比無線端大很多,所以pc端承載的信息內(nèi)容相對比較全面,但無線端尺寸相對小很多,

如果把所有pc端的內(nèi)容原封不動(dòng)地搬到無線端的話,就會顯得擁擠不堪,

導(dǎo)致整個(gè)頁面布局看起來太過于糟亂,重點(diǎn)信息不能夠很好地展示。

(二)、解決方法:

手機(jī)端尺寸相對手機(jī)端很小,所以讓頁面看起來簡單有層次是比較重要的,

這個(gè)點(diǎn)對于手機(jī)端頁面布局是很重要的,因?yàn)闆]有對比就沒有重點(diǎn),不能每個(gè)都是重點(diǎn),

每個(gè)都想突出,這樣反而沒有重點(diǎn)了,其實(shí)現(xiàn)在簡潔風(fēng)是很多大牌只要的營銷手段,

可能是因?yàn)樘O果簡潔風(fēng)當(dāng)下比較盛行,看起來比較有高級感,但是并不適合所有的頁面,

因?yàn)轭愃埔恍┦称奉愡€有一些促銷類頁面,需要重點(diǎn)突出信息部分,這個(gè)事根據(jù)自身品牌店鋪定位來決定的。


一些品牌的簡潔風(fēng)頁面:

 
無線端頁面設(shè)計(jì)“三大雷區(qū)”你知道嗎?
 
無線端頁面設(shè)計(jì)“三大雷區(qū)”你知道嗎?

(網(wǎng)上素材)

三、用戶體驗(yàn)

(一)、按照pc端的用戶體驗(yàn)操作習(xí)慣延續(xù)到無線端頁面上

首先pc端一般用戶習(xí)慣是點(diǎn)擊鼠標(biāo)左右滑動(dòng)瀏覽banner圖或者向上下滑動(dòng)鼠標(biāo)瀏覽頁面,

而無線端一般用戶的操作習(xí)慣是一直向上下移動(dòng)瀏覽頁面,而且操作環(huán)境的選擇也會有所區(qū)別,

在PC端上,點(diǎn)擊店鋪內(nèi)容的方式更加直接,用戶只需要通過鼠標(biāo)來操作,而在無線端,

直接用手指和屏幕之間直接接觸,很多人會直接把pc端的頁面展示方式直接搬到無線端上,

但是現(xiàn)在手機(jī)端以輪播的形式展示的點(diǎn)擊率越來越低了,很多重點(diǎn)信息內(nèi)容都在banner圖上展示,這樣就會造成店鋪點(diǎn)擊率降低。

(二)、解決方法:

因?yàn)槟壳盁o線端的店鋪比重占據(jù)了很大的一部分,所以還是要注重?zé)o線端的用戶體驗(yàn)設(shè)計(jì),首先應(yīng)該積極主動(dòng)引導(dǎo)用戶行為,

所以不是很有必要的話盡量避免以輪播圖的形式展現(xiàn),因?yàn)橛脩粢呀?jīng)習(xí)慣了上下的瀏覽操作習(xí)慣,所以一般都不會主動(dòng)左右滑動(dòng)。

類似這些很好的無線端用戶體驗(yàn)設(shè)計(jì):

 
無線端頁面設(shè)計(jì)“三大雷區(qū)”你知道嗎?
 
無線端頁面設(shè)計(jì)“三大雷區(qū)”你知道嗎?

 

網(wǎng)上素材)

總結(jié):

對于無線端頁面的設(shè)計(jì),用戶體驗(yàn)是非常重要的,盡管現(xiàn)在無線店鋪設(shè)計(jì)是處于弱勢,

一般都是直接照搬pc端的頁面,但是從現(xiàn)在電商的發(fā)展趨勢來說,無線端的用戶越來越多,

所以相信大家很越來越重視無線端頁面的設(shè)計(jì),設(shè)計(jì)師也要深入去學(xué)習(xí)無線端的設(shè)計(jì)規(guī)范、理念等。

 

?

AV在线播放日韩亚洲欧,国产★蜜臀AV无码,美女一级毛片免费不卡视频,欧美日韩国产亚洲人成,久久影国产精品,日韩人妻无码AⅤ中文字幕,欧美成人中文字幕dvd,自拍偷在线精品自拍偷,无码A级毛片日韩精品,精品在线视频一区
2024久久国产精品福利| 国产边做边吃奶AⅤ视频免费| 国产精品国产免费无码专区不卡| 青青青激情视频在线最新| 国产强伦姧在线观看午夜| 午夜裸体美女爆乳福利视频| 337p日本欧洲亚洲高清鲁鲁| 毛片视频在线免费观看| 久久精品白浆扒开| 正在播放国产多P交换视频| 亚洲国产日韩a在线乱码| 欧美成人精品第一区| 国产AⅤ精品一区二区三区99| 日韩AⅤ人妻无码一区二区 | 成人免费在线播放视频| 欧美激情VA视频在线播放| 97久久超碰国产精品旧版| 亚洲综合伦理一区| 91se精品免费观看| 日韩精品成人无码片| 99久久精品国产片久人| 久久精品国产亚洲AV无码麻豆| 亚洲一区AV区图片区说区| 亚洲国产欧美在线人成精品一区二区 | 怡红院亚洲红怡院天堂麻豆| 99青青青精品视频在线| 久久免费观看国产精品| jiZz中国jiZz免費| 国产亚洲一区二区手机在线观看 | 午夜欧美精品久久久久久久| 丁香婷婷在线成人播放视频| 国产aⅴ无码专区亚洲av| 日韩av无码精品色午夜| 国产草裙社区在线观看| 中文字幕无码乱人伦| 国产开嫩苞在线播放视频| 婷婷成人亚洲综合五月天| 国产色无码精品视频免费| 国产成人无码网站| 免费无码又爽又刺激成人| 欧美日韩福利视频一区二区三区 |