使用手機(jī)上網(wǎng)的人越來(lái)越多，這疑問(wèn)著企業(yè)除了設(shè)計(jì)電腦版網(wǎng)頁(yè)外，還需要進(jìn)行手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)。很多網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)手機(jī)版網(wǎng)站時(shí)，都會(huì)先認(rèn)真研究一番手機(jī)網(wǎng)頁(yè)及電腦網(wǎng)頁(yè)的不同之處。那么，與電腦網(wǎng)頁(yè)相比，手機(jī)網(wǎng)頁(yè)設(shè)計(jì)需要注意什么呢?

網(wǎng)頁(yè)設(shè)計(jì)注意事項(xiàng)

手機(jī)網(wǎng)頁(yè)設(shè)計(jì)需要注意什么?

1. 確定網(wǎng)頁(yè)設(shè)計(jì)內(nèi)容、方向及類型

設(shè)計(jì)手機(jī)網(wǎng)頁(yè)之前，首先需要確定一下網(wǎng)頁(yè)設(shè)計(jì)的大致方向，如：

全新網(wǎng)頁(yè)設(shè)計(jì)——是為某產(chǎn)品或品牌重新設(shè)計(jì)網(wǎng)頁(yè)嗎?是否包括電腦網(wǎng)頁(yè)及手機(jī)網(wǎng)頁(yè)都要設(shè)計(jì)，還是選其一?

網(wǎng)頁(yè)設(shè)計(jì)改版——是否從舊網(wǎng)頁(yè)中取材，重新設(shè)計(jì)電腦網(wǎng)頁(yè)及手機(jī)網(wǎng)頁(yè)?

只增加手機(jī)網(wǎng)頁(yè)——原有電腦網(wǎng)頁(yè)不改變，是否只需要增加手機(jī)網(wǎng)頁(yè)即可?

以上不同情況都有不同的設(shè)計(jì)策略，網(wǎng)頁(yè)設(shè)計(jì)師進(jìn)行手機(jī)網(wǎng)頁(yè)設(shè)計(jì)前，一定要厘清到底處于哪種情況設(shè)計(jì)手機(jī)網(wǎng)頁(yè)。

2. 確定網(wǎng)站形象

設(shè)計(jì)企業(yè)網(wǎng)站前，首先要注意公司的形象以及產(chǎn)品的特色，若該企業(yè)的主營(yíng)產(chǎn)品是汽車，網(wǎng)站形象就要給消費(fèi)者鮮明的汽車形象，讓大家知道它的汽車與其他牌子汽車的不同之處。

確定好電腦網(wǎng)頁(yè)形象后，就需要確定手機(jī)網(wǎng)頁(yè)形象，一般來(lái)說(shuō)兩者所表達(dá)的內(nèi)容其實(shí)大同小異。不同的是，手機(jī)網(wǎng)頁(yè)無(wú)需太多復(fù)雜的元素，僅僅突出公司形象，吸引用戶眼球。

3. 設(shè)計(jì)手機(jī)版網(wǎng)頁(yè)前需預(yù)測(cè)網(wǎng)站流量

如果以舊有電腦版網(wǎng)站為藍(lán)本，設(shè)計(jì)手機(jī)版網(wǎng)頁(yè)前建議先使用GA(Google Analytics)或其他工具對(duì)用戶進(jìn)行背景調(diào)查(通常，掌握用戶的數(shù)據(jù)越多，對(duì)電腦版網(wǎng)站制作的效果越好)。

了解各種數(shù)據(jù)，在設(shè)計(jì)手機(jī)網(wǎng)站時(shí)就可清晰知道，根據(jù)不同裝置的需求，對(duì)網(wǎng)站部分內(nèi)容進(jìn)行額外的加強(qiáng)。

4. 使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

每年各大手機(jī)品牌商都會(huì)推出不同型號(hào)的手機(jī)，網(wǎng)頁(yè)設(shè)計(jì)要適應(yīng)每種手機(jī)或?yàn)g覽器，是一份量大且難度極高的工作。但使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，就能完美地解決這種事情。

5. 設(shè)計(jì)簡(jiǎn)單但不簡(jiǎn)陋

設(shè)計(jì)手機(jī)版網(wǎng)頁(yè)的關(guān)鍵就是簡(jiǎn)單，畢竟手機(jī)屏幕不可能比電腦螢?zāi)淮?，且處理器也不?huì)比電腦好，所以手機(jī)網(wǎng)頁(yè)設(shè)計(jì)一定要簡(jiǎn)單化，檔案要越小越好，網(wǎng)頁(yè)加載時(shí)間也要越短越好。

不過(guò)，簡(jiǎn)單不代表手機(jī)網(wǎng)頁(yè)就要健腦，嘗試減少對(duì)圖片或Javascript的依賴，可輕松完成多背景、圓角、3D動(dòng)畫(huà)、文字陰影等設(shè)計(jì)特色。

6. 采用單欄式設(shè)計(jì)

手機(jī)網(wǎng)頁(yè)采用單欄式設(shè)計(jì)，能在有限的行動(dòng)裝置畫(huà)面上閱讀并操作網(wǎng)頁(yè)。手機(jī)網(wǎng)頁(yè)出現(xiàn)太多欄位，對(duì)部分用戶而言是難以操作的，再者個(gè)別欄位的字體變小也不好閱讀。

7. 善用漢堡包菜單

網(wǎng)頁(yè)欄目太多，可選擇使用「漢堡包菜單」，將多余的標(biāo)簽隱藏在重點(diǎn)/主題選項(xiàng)下，方便用戶選取想要的資訊。設(shè)計(jì)漢堡包菜單時(shí)，盡量采用直式設(shè)計(jì)，不要讓用戶左右劃動(dòng)頁(yè)面，才能看完一行字。

8. 按鍵要明顯易按

電腦網(wǎng)頁(yè)在選取功能時(shí)，可透過(guò)滑鼠移動(dòng)按鍵上方，但不一定按下(hover)，另外，滑鼠可以按左鍵、右鍵以及滑動(dòng)軸選取功能。但手機(jī)網(wǎng)頁(yè)只有「點(diǎn)擊」這一特性，所以設(shè)計(jì)手機(jī)網(wǎng)頁(yè)時(shí)，一定要留意這個(gè)按鍵特性。

9. 提供視覺(jué)反饋按鍵

電腦網(wǎng)頁(yè)點(diǎn)擊按鈕時(shí)，按鈕顏色會(huì)出現(xiàn)變化，告知用戶已成功點(diǎn)擊該按鈕。同樣，手機(jī)網(wǎng)頁(yè)也建議這種設(shè)計(jì)方式，方便用戶了了解網(wǎng)頁(yè)瀏覽情況。

另外，網(wǎng)頁(yè)載入時(shí)，用戶點(diǎn)擊或選取按鈕后，網(wǎng)頁(yè)都會(huì)開(kāi)始Loading，這是可設(shè)計(jì)一些代表企業(yè)形象的圖案或動(dòng)畫(huà)，讓用戶知道網(wǎng)頁(yè)正在加載，避免用戶重復(fù)點(diǎn)擊按鈕，延長(zhǎng)載入時(shí)間。

10. 測(cè)試網(wǎng)頁(yè)性能

網(wǎng)頁(yè)完成后，就需要對(duì)網(wǎng)頁(yè)進(jìn)行各項(xiàng)性能的測(cè)試，確保網(wǎng)頁(yè)所有功能都能正常運(yùn)作。雖然市面有很多不同型號(hào)的手機(jī)，都每臺(tái)手機(jī)都進(jìn)行測(cè)試，似乎太浪費(fèi)精力和時(shí)間。

這是可通過(guò)測(cè)試軟體或網(wǎng)頁(yè)版模擬器的輔助，對(duì)手機(jī)網(wǎng)頁(yè)進(jìn)行測(cè)試并修改各種Bug。

事實(shí)上，手機(jī)網(wǎng)頁(yè)設(shè)計(jì)和電腦網(wǎng)頁(yè)設(shè)計(jì)確實(shí)存在很多不同點(diǎn)，這也需要網(wǎng)頁(yè)設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站過(guò)程中，不斷發(fā)掘并參考目前用戶的使用體驗(yàn)，才能設(shè)計(jì)出受人歡迎的手機(jī)網(wǎng)頁(yè)設(shè)計(jì)。

【版權(quán)聲明】:本站內(nèi)容來(lái)自于與互聯(lián)網(wǎng)(注明原創(chuàng)稿件除外),供訪客免費(fèi)學(xué)習(xí)需要。如文章或圖像侵犯到您的權(quán)益，請(qǐng)及時(shí)告知，我們第一時(shí)間刪除處理！謝謝！