- 相關(guān)推薦
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)方法
對(duì)于現(xiàn)在的設(shè)計(jì)師而言，真正的第一屏到底是桌面還是移動(dòng)端界面，真的很難說(shuō)了。也許“移動(dòng)端優(yōu)先”的說(shuō)法并不準(zhǔn)確，但是“移動(dòng)端屏幕為主”的說(shuō)法和實(shí)際狀況已經(jīng)非常接近了。下面是移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的方法，歡迎參考!
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)方法
那么造就優(yōu)秀的移動(dòng)端用戶體驗(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)容加載，用戶對(duì)于這樣的瀏覽體驗(yàn)是欲罷不能的，轉(zhuǎn)化率的提升是顯而易見(jiàn)的。
真正優(yōu)秀的導(dǎo)航體驗(yàn)往往能更好地幫助用戶找到他們想要的內(nèi)容，而不是在有限的屏幕上塞入更多的信息，精準(zhǔn)地在菜單欄里面加入有用的、易用的、主要的條目，才是最明智的選擇。
搜索
許多網(wǎng)頁(yè)的內(nèi)容非常多，在界面中引入搜索引擎能夠幫用戶更快地篩選內(nèi)容。移動(dòng)端屏幕尺寸的限制就已經(jīng)決定了頁(yè)面能承載的內(nèi)容有限，無(wú)法像桌面端那樣來(lái)系統(tǒng)而全面的展現(xiàn)信息。
用戶期待網(wǎng)站能夠提供一個(gè)能快速獲取精準(zhǔn)信息的渠道，撇開(kāi)漫無(wú)目的的瀏覽，用戶通常會(huì)有有目的地找某類文章甚至某篇文章，希望找到某個(gè)產(chǎn)品，而搜索引擎可以很快地縮小瀏覽的范疇。
最好的方案是將搜索功能置于屏幕頂端，無(wú)論是移動(dòng)端網(wǎng)頁(yè)還是APP，這種設(shè)計(jì)好處在于它易于發(fā)現(xiàn)，還符合用戶日常的瀏覽習(xí)慣。
維基百科的移動(dòng)端頁(yè)面自然而然地將搜索框置于頁(yè)面頂部，這是網(wǎng)站屬性所決定的。但是LinkedIn則將搜索功能置于底部菜單欄當(dāng)中，這也是某種意義上的固化于界面，這也符合邏輯——畢竟它的社交屬性高于信息搜索。
首頁(yè)
作為從桌面端繼承過(guò)來(lái)的最主要的意符，首頁(yè)的小房子圖標(biāo)稱得上是約定俗成的存在。當(dāng)用戶看到這個(gè)這個(gè)圖標(biāo)的時(shí)候通常會(huì)很清晰地知道它所代表的含義。
在移動(dòng)端上，首頁(yè)的作用被明顯放大的，因?yàn)樵趶?qiáng)交互多界面的移動(dòng)端，首頁(yè)圖標(biāo)的存在讓用戶更高效、更快捷地明白哪里是首頁(yè)、哪里包含了最主要的內(nèi)容，他們知道從哪里開(kāi)始。與此同時(shí)，移動(dòng)端首頁(yè)的存在讓更多的內(nèi)容有了承載的核心。
多任務(wù)、強(qiáng)交互的移動(dòng)端還存在一個(gè)常見(jiàn)的狀況，就是電話、短信、推送無(wú)處不在，用戶很容易被各種彈出信息吸引過(guò)去，而一旦用戶瀏覽了其他的信息之后，再回到瀏覽器的時(shí)候，網(wǎng)站首頁(yè)就成了信息的重要中轉(zhuǎn)了。
分享按鈕
事到如今，社會(huì)化分享已經(jīng)隨著社交媒體的火熱發(fā)展而成為了用戶生活中不可或缺的一部分。移動(dòng)端的用戶會(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)中加入分享按鈕。
畢竟，吸引用戶的內(nèi)容并不少，并且作為網(wǎng)站的所有者，也是希望不惜一切代價(jià)將自己的內(nèi)容分享出去，不是么?
相關(guān)類別與推薦
電商類和強(qiáng)內(nèi)容類的網(wǎng)站，內(nèi)容龐雜，導(dǎo)航中能夠容納的內(nèi)容有限，所以相關(guān)類別和相關(guān)推薦就顯得相當(dāng)實(shí)用了。在關(guān)鍵詞系統(tǒng)和分類系統(tǒng)足夠完善的時(shí)候，相關(guān)推薦和類別推薦會(huì)讓用戶流連忘返。
不論是購(gòu)物還是消費(fèi)內(nèi)容的網(wǎng)站，菜當(dāng)中通常不太需要加入太多的關(guān)于我們、聯(lián)系我們這類鏈接，將分類和推薦做好會(huì)更好地留住用戶。
在JC Penney 和 EB Games 的移動(dòng)端網(wǎng)頁(yè)都將在漢堡菜單當(dāng)中隱藏了分類目錄，用戶會(huì)更加高效地從分類目錄中瀏覽商品。
選擇不多的菜單選項(xiàng)
設(shè)計(jì)師總想為用戶做更多的事情，然而在移動(dòng)端導(dǎo)航設(shè)計(jì)這件事情上，通常少總好過(guò)多。過(guò)多的選擇通常會(huì)讓用戶忙亂，對(duì)于日益增長(zhǎng)的選擇強(qiáng)迫癥用戶而言更是災(zāi)難性的。
桌面端網(wǎng)頁(yè)堆積如山的內(nèi)容已經(jīng)讓用戶煩躁無(wú)比了，移動(dòng)端上再沿襲這個(gè)思路，用戶是難于接受的。不管你愿不愿意承認(rèn)，現(xiàn)在的用戶可用的時(shí)間更加碎片化，信息只有更加快捷直接的呈現(xiàn)，才能被注意、被關(guān)注。深思熟慮和精挑細(xì)選是移動(dòng)端網(wǎng)頁(yè)的取勝之道。
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的尺寸
在Window XP常見(jiàn)分辨率1024×768下我們除掉任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁(yè)首屏高度平均值是584。
在Window 7常見(jiàn)分辨率1440×900下我們除掉任務(wù)欄，瀏覽器菜單欄以及狀態(tài)欄后剩下的網(wǎng)頁(yè)首屏高度平均值是716。
于設(shè)計(jì)來(lái)說(shuō)，選取一個(gè)合適的尺寸作為正常大小和中等屏幕密度(尺寸的選取依據(jù)打算適配的硬件，建議參考現(xiàn)主流硬件分辨率)，然后向下和向上 做小、大、特大和低、高、超高的尺寸與密度。
iPhone手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)尺寸
iPhone5尺寸是640x1136px分辨率是326PPI
iPhone4和iPhone4S尺寸是640x960px分辨率是326PPI
iPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI
安卓網(wǎng)頁(yè)的設(shè)計(jì)尺寸
320dp：一個(gè)普通的手機(jī)屏幕(240X320，320×480，480X800)
480dp：一個(gè)中間平板電腦像(480×800)
600dp：7寸平板電腦(600×1024)
720dp：10寸平板電腦(720×1280，800×1280)
ipad網(wǎng)頁(yè)的設(shè)計(jì)尺寸
iPad第三代第四代尺寸是2048x1536px分辨率是264PPI
iPad第一代第二代尺寸是1024x768px分辨率是132PPI
iPad Mini尺寸是1024x768px分辨率是163PPI
1. 簡(jiǎn)化導(dǎo)航
與曾經(jīng)流行的大型導(dǎo)航設(shè)計(jì)相比，移動(dòng)端設(shè)備和精簡(jiǎn)的導(dǎo)航更合適。當(dāng)用戶使用移動(dòng)端設(shè)備時(shí)，打開(kāi)應(yīng)用程序和網(wǎng)站時(shí)，他們希望盡快找到想要的內(nèi)容。
因此，在設(shè)計(jì)手機(jī)APP和網(wǎng)站的導(dǎo)航時(shí)，盡量根據(jù)分析和實(shí)際情況保留最常用的導(dǎo)航選項(xiàng)。
這種設(shè)計(jì)一方面節(jié)省了屏幕空間，且導(dǎo)航選項(xiàng)的觸發(fā)區(qū)域可以設(shè)計(jì)得相對(duì)較大。
至于漢堡圖標(biāo)和彈出式菜單的具體使用情況，還有待商榷，可以根據(jù)實(shí)際情況靈活處理，但是習(xí)慣有了漢堡圖標(biāo)的菜單標(biāo)志，用戶可以很快理解它的意思，并意識(shí)到它后面有一個(gè)彈出菜單。
2.多考慮手勢(shì)和觸摸
移動(dòng)端設(shè)備和桌面之間的交互非常不同，UI和UX的設(shè)計(jì)應(yīng)該有意識(shí)地適應(yīng)移動(dòng)端設(shè)備。
在這個(gè)過(guò)程中，手勢(shì)交互是一個(gè)重要的部分，設(shè)計(jì)師應(yīng)該充分利用手勢(shì)來(lái)幫助用戶更快更有效地完成交互。
常見(jiàn)的動(dòng)作包括:
(1)點(diǎn)擊，雙擊。
(2)按壓。
(3)長(zhǎng)按。
(4)托拽。
(5)縮放。
(6)滑動(dòng)。
手勢(shì)交互在移動(dòng)端的位置相當(dāng)于桌面的點(diǎn)擊交互。
但是當(dāng)考慮手勢(shì)的互動(dòng)時(shí)，不要忘記匹配相應(yīng)的觸覺(jué)反饋。在日常的移動(dòng)端設(shè)備使用中，振動(dòng)和力的反饋常常被用來(lái)增強(qiáng)交互體驗(yàn)。
這種觸覺(jué)設(shè)計(jì)的本質(zhì)是盡可能的微妙，確保用戶能夠感知反饋，而又不太有吸引力，觸控界面越來(lái)越多，就是用戶從中獲得積極的響應(yīng)。
3.創(chuàng)建對(duì)話
人們總是希望通過(guò)語(yǔ)言交流來(lái)進(jìn)行溝通，這也使得會(huì)話UI和聊天機(jī)器人逐漸成為一種流行趨勢(shì)。因此，當(dāng)有可能允許用戶在移動(dòng)UI中實(shí)時(shí)聊天時(shí)，可以借用一個(gè)對(duì)話式UI來(lái)增強(qiáng)用戶體驗(yàn):
在你的界面上添加更多感人的文案，無(wú)論是一段文本還是界面元素中的一個(gè)微型副本，都可以創(chuàng)建一個(gè)包含更多感人文本的對(duì)話。與WTFWeather應(yīng)用程序一樣，從文本到標(biāo)簽都使用對(duì)話式表達(dá)，并在為用戶推送信息時(shí)嘗試創(chuàng)建對(duì)話。
【移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)方法】相關(guān)文章：
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)技巧01-03
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的技巧07-29
簡(jiǎn)化移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的步驟07-09
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)技巧分享12-26
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)尺寸標(biāo)準(zhǔn)02-25
移動(dòng)端網(wǎng)頁(yè)設(shè)計(jì)的技巧指導(dǎo)07-26
移動(dòng)端網(wǎng)頁(yè)界面設(shè)計(jì)技巧04-16