寫(xiě)給網(wǎng)頁(yè)設(shè)計(jì)師:移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)簡(jiǎn)明指南
造就優(yōu)秀的移動(dòng)端用戶(hù)體驗(yàn),最重要的是什么?精細(xì)的圖片?雅致的圖標(biāo)?還是細(xì)致入微的UI界面?如果你經(jīng)常瀏覽移動(dòng)端網(wǎng)頁(yè),你最期待的應(yīng)該還是無(wú)縫而流暢的導(dǎo)航體驗(yàn)。從一個(gè)界面流暢的切換到另一個(gè)界面,沒(méi)有遲滯,沒(méi)有錯(cuò)位的視覺(jué)元素,完整的內(nèi)容加載,用戶(hù)對(duì)于這樣的瀏覽體驗(yàn)是欲罷不能的,轉(zhuǎn)化率的提升是顯而易見(jiàn)的。
真正優(yōu)秀的導(dǎo)航體驗(yàn)往往能更好地幫助用戶(hù)找到他們想要的內(nèi)容,而不是在有限的屏幕上塞入更多的信息,精準(zhǔn)地在菜單欄里面加入有用的、易用的、主要的條目,才是最明智的選擇。
加入搜索
許多網(wǎng)頁(yè)的內(nèi)容非常多,在界面中引入搜索引擎能夠幫用戶(hù)更快地篩選內(nèi)容。移動(dòng)端屏幕尺寸的限制就已經(jīng)決定了頁(yè)面能承載的內(nèi)容有限,無(wú)法像桌面端那樣來(lái)系統(tǒng)而全面的展現(xiàn)信息。
用戶(hù)期待網(wǎng)站能夠提供一個(gè)能快速獲取精準(zhǔn)信息的渠道,撇開(kāi)漫無(wú)目的的瀏覽,用戶(hù)通常會(huì)有有目的地找某類(lèi)文章甚至某篇文章,希望找到某個(gè)產(chǎn)品,而搜索引擎可以很快地縮小瀏覽的范疇。
最好的方案是將搜索功能置于屏幕頂端,無(wú)論是移動(dòng)端網(wǎng)頁(yè)還是APP,這種設(shè)計(jì)好處在于它易于發(fā)現(xiàn),還符合用戶(hù)日常的瀏覽習(xí)慣。

維基百科的移動(dòng)端頁(yè)面自然而然地將搜索框置于頁(yè)面頂部,這是網(wǎng)站屬性所決定的。但是LinkedIn 則將搜索功能置于底部菜單欄當(dāng)中,這也是某種意義上的固化于界面,這也符合邏輯——畢竟它的社交屬性高于信息搜索。
首頁(yè)
作為從桌面端繼承過(guò)來(lái)的最主要的意符,首頁(yè)的小房子圖標(biāo)稱(chēng)得上是約定俗成的存在。當(dāng)用戶(hù)看到這個(gè)這個(gè)圖標(biāo)的時(shí)候通常會(huì)很清晰地知道它所代表的含義。
在移動(dòng)端上,首頁(yè)的作用被明顯放大的,因?yàn)樵趶?qiáng)交互多界面的移動(dòng)端,首頁(yè)圖標(biāo)的存在讓用戶(hù)更高效、更快捷地明白哪里是首頁(yè)、哪里包含了最主要的內(nèi)容,他們知道從哪里開(kāi)始。與此同時(shí),移動(dòng)端首頁(yè)的存在讓更多的內(nèi)容有了承載的核心。
多任務(wù)、強(qiáng)交互的移動(dòng)端還存在一個(gè)常見(jiàn)的狀況,就是電話、短信、推送無(wú)處不在,用戶(hù)很容易被各種彈出信息吸引過(guò)去,而一旦用戶(hù)瀏覽了其他的信息之后,再回到瀏覽器的時(shí)候,網(wǎng)站首頁(yè)就成了信息的重要中轉(zhuǎn)了。

Albertson 的移動(dòng)端頁(yè)面將首頁(yè)的圖標(biāo)隱藏在漢堡圖標(biāo)下的側(cè)邊欄當(dāng)中,即使是轉(zhuǎn)型使用無(wú)限滾動(dòng)界面的Twitter,在設(shè)計(jì)客戶(hù)端的時(shí)候也習(xí)慣性地將首頁(yè)按鈕固化在底部的菜單欄當(dāng)中。
分享按鈕
事到如今,社會(huì)化分享已經(jīng)隨著社交媒體的火熱發(fā)展而成為了用戶(hù)生活中不可或缺的一部分。移動(dòng)端的用戶(hù)會(huì)將看到的、好玩的、有趣的、有用的各種內(nèi)容、產(chǎn)品分享到不同的平臺(tái),分享按鈕,必不可少。
實(shí)際上,移動(dòng)端的分享比桌面端的分享更多、更快也更加深入人心。移動(dòng)端設(shè)備的易用和普及是一方面,移動(dòng)端的常見(jiàn)交互模式中,分享也占據(jù)著一席之地。這也是為什么,你應(yīng)當(dāng)在你的導(dǎo)航或者菜當(dāng)中加入分享按鈕。

畢竟,吸引用戶(hù)的內(nèi)容并不少,并且作為網(wǎng)站的所有者,也是希望不惜一切代價(jià)將自己的內(nèi)容分享出去,不是么?
相關(guān)類(lèi)別與推薦
電商類(lèi)和強(qiáng)內(nèi)容類(lèi)的網(wǎng)站,內(nèi)容龐雜,導(dǎo)航中能夠容納的內(nèi)容有限,所以相關(guān)類(lèi)別和相關(guān)推薦就顯得相當(dāng)實(shí)用了。在關(guān)鍵詞系統(tǒng)和分類(lèi)系統(tǒng)足夠完善的時(shí)候,相關(guān)推薦和類(lèi)別推薦會(huì)讓用戶(hù)流連忘返。
不論是購(gòu)物還是消費(fèi)內(nèi)容的網(wǎng)站,菜當(dāng)中通常不太需要加入太多的關(guān)于我們、聯(lián)系我們這類(lèi)鏈接,將分類(lèi)和推薦做好會(huì)更好地留住用戶(hù)。

在JC Penney 和 EB Games 的移動(dòng)端網(wǎng)頁(yè)都將在漢堡菜單當(dāng)中隱藏了分類(lèi)目錄,用戶(hù)會(huì)更加高效地從分類(lèi)目錄中瀏覽商品。
選擇不多的菜單選項(xiàng)
設(shè)計(jì)師總想為用戶(hù)做更多的事情,然而在移動(dòng)端導(dǎo)航設(shè)計(jì)這件事情上,通常少總好過(guò)多。過(guò)多的選擇通常會(huì)讓用戶(hù)忙亂,對(duì)于日益增長(zhǎng)的選擇強(qiáng)迫癥用戶(hù)而言更是災(zāi)難性的。
桌面端網(wǎng)頁(yè)堆積如山的內(nèi)容已經(jīng)讓用戶(hù)煩躁無(wú)比了,移動(dòng)端上再沿襲這個(gè)思路,用戶(hù)是難于接受的。不管你愿不愿意承認(rèn),現(xiàn)在的用戶(hù)可用的時(shí)間更加碎片化,信息只有更加快捷直接的呈現(xiàn),才能被注意、被關(guān)注。深思熟慮和精挑細(xì)選是移動(dòng)端網(wǎng)頁(yè)的取勝之道。
本文地址:http://www.likemindfilms.com/tutorial/wd3196.html
您可能還喜歡
- jquery Jcrop圖像裁切插件中文api文檔
- @media適配不同尺寸的手機(jī)
- 返回上一頁(yè)代碼的幾種寫(xiě)法
- Dreamweaver CC 2014新功能介紹
- 深入了解viewport和px
- 優(yōu)秀CSS代碼書(shū)寫(xiě)的10個(gè)規(guī)范
- 畫(huà)出你的風(fēng)格:HTML5創(chuàng)意畫(huà)板的設(shè)計(jì)教程
- Div中height:100%無(wú)效的解決辦法
- 網(wǎng)頁(yè)前端-網(wǎng)頁(yè)切圖命名規(guī)范
- 為網(wǎng)頁(yè)設(shè)計(jì)師而生的14個(gè)文本編輯器
- 專(zhuān)訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類(lèi)
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏