>
學(xué)校機(jī)構(gòu) >
交互時(shí)代UI實(shí)訓(xùn)基地 >
學(xué)習(xí)資訊>
這才是優(yōu)秀的移動(dòng)端網(wǎng)頁(yè)UI設(shè)計(jì)!
這才是優(yōu)秀的移動(dòng)端網(wǎng)頁(yè)UI設(shè)計(jì)!
49 2017-06-01
我們所設(shè)計(jì)的移動(dòng)端UI設(shè)計(jì),都是為了方便用戶(hù)能夠更方便快捷的達(dá)到他們的目的,以此來(lái)創(chuàng)造更好的用戶(hù)體驗(yàn)。不管是購(gòu)物、瀏覽、訂閱等等,都應(yīng)該讓用戶(hù)更輕松明確的進(jìn)行。
而交互時(shí)代今天所帶來(lái)的文章,就讓我們代入用戶(hù)的視角來(lái)進(jìn)行探討,優(yōu)秀的移動(dòng)端網(wǎng)頁(yè)UI設(shè)計(jì)是什么樣的。
Google公司的一項(xiàng)研究數(shù)據(jù)表明,針對(duì)移動(dòng)端網(wǎng)頁(yè)UI設(shè)計(jì)優(yōu)化的網(wǎng)站會(huì)有更多的用戶(hù)。這說(shuō)明網(wǎng)站移動(dòng)化會(huì)有更直觀的好處。那么這個(gè)“對(duì)移動(dòng)端友好”到底是什么意思呢?實(shí)際上,這個(gè)概念包含了一系列關(guān)鍵的特性,當(dāng)你在進(jìn)行移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候應(yīng)當(dāng)將它們納入考慮的范疇:
如果大家想要自己所設(shè)計(jì)的網(wǎng)頁(yè)UI能夠在移動(dòng)端上更容易被訪問(wèn),那就看看交互時(shí)代接下來(lái)給大家?guī)?lái)的一條提升移動(dòng)端網(wǎng)頁(yè)UI設(shè)計(jì)的建議吧!
針對(duì)移動(dòng)端進(jìn)行全面優(yōu)化
PC端的網(wǎng)頁(yè)UI設(shè)計(jì)轉(zhuǎn)移到移動(dòng)端設(shè)備上,首先會(huì)碰到的障礙就是導(dǎo)航欄。讓我們來(lái)看看下面這個(gè)披薩網(wǎng)站,它的PC端和移動(dòng)端網(wǎng)頁(yè)UI設(shè)計(jì)的對(duì)比十分明顯,移動(dòng)端的網(wǎng)頁(yè)UI設(shè)計(jì)在優(yōu)化之后,十分的清晰簡(jiǎn)潔,并且分類(lèi)明確,能夠讓用戶(hù)更輕松的達(dá)成目的。
下面是交互時(shí)代給大家的幾個(gè)優(yōu)化移動(dòng)端頁(yè)面的使用技巧:
1.僅使用垂直滾動(dòng)。不要使用水平滾動(dòng),讓用戶(hù)只需單方向滾動(dòng)就能瀏覽主要的內(nèi)容。盡量通過(guò)CSS來(lái)控制頁(yè)面寬度、位置和圖片的縮放。
2.將你的內(nèi)容置于首位,避免其他的元素讓用戶(hù)分心。
3.控制分欄的數(shù)目,盡量使用一欄單列式的布局。
4.不要將移動(dòng)端頁(yè)面和桌面端頁(yè)面混用。
當(dāng)然,移動(dòng)端的網(wǎng)頁(yè)UI設(shè)計(jì)可沒(méi)這么簡(jiǎn)單,雖然上面這個(gè)技巧比較基礎(chǔ),但是卻也是個(gè)不錯(cuò)的入門(mén)指引,但想要做出更好的網(wǎng)頁(yè)UI設(shè)計(jì),就要進(jìn)行更多的學(xué)習(xí),大家可以來(lái)交互時(shí)代官網(wǎng)了解更多關(guān)于UI設(shè)計(jì)的知識(shí)。
請(qǐng)聯(lián)系網(wǎng)站客服,了解詳細(xì)的優(yōu)惠課程信息~
優(yōu)質(zhì)、權(quán)威、便捷、省心
掃一掃
獲取更多福利
獵學(xué)網(wǎng)企業(yè)微信
獵學(xué)網(wǎng)訂閱號(hào)
獵學(xué)網(wǎng)服務(wù)號(hào)