精品主題,實(shí)戰(zhàn)科普,最新行業(yè)熱點(diǎn)話題,隨時掌握云上咨訊。
手機(jī)上網(wǎng)不僅是可見的趨勢,更是以銳不可擋的數(shù)量在驚人成長,網(wǎng)頁設(shè)計者應(yīng)該開始接觸手機(jī)版網(wǎng)頁設(shè)計。
手機(jī)網(wǎng)頁設(shè)計概念,與一般個人電腦使用的概念有些不同,因此,我們在這里簡單的歸納出一些設(shè)計的原則:
1. 簡化內(nèi)容
一般的手機(jī)、平板電腦等行動裝置,不易容納下適合于個人電腦的龐大網(wǎng)頁資訊,因此手機(jī)行動網(wǎng)頁的首要重點(diǎn),就是減少內(nèi)容,不論是圖片、文字或是影音。
請記住一個重點(diǎn):只要將最重要的資訊放入手機(jī)版網(wǎng)頁,就是最主要的準(zhǔn)則,重要性較低的、讀取需要時間的內(nèi)容,則可以透過超連結(jié),連回到正常的官方網(wǎng)站。
手機(jī)網(wǎng)站必須十分的重視內(nèi)容簡化這一點(diǎn),一個塞滿內(nèi)容的手機(jī)網(wǎng)站無法獲得網(wǎng)路客戶的青睞。
2. 一欄卷動的最佳策略
大部分的移動設(shè)備,畫面都不如桌上電腦那么大,尤其是閱讀文字時更需要加以放大。即使智能手機(jī)都具有網(wǎng)頁放大縮小功能,但是觀看起來較為麻煩。
因此設(shè)計手機(jī)網(wǎng)頁時,建議是能夠以滑動螢?zāi)坏姆绞介喿x網(wǎng)站,因為滑動網(wǎng)頁比起放大網(wǎng)頁觀看來得簡單多了。
3. 導(dǎo)航功能大不同
手機(jī)網(wǎng)頁與跟一般的網(wǎng)頁不同的,在于當(dāng)閱讀文章到最后時,要回到最前頭是麻煩的,因此設(shè)計網(wǎng)頁的企業(yè),除了減少卷動畫面的機(jī)會外,也會加強(qiáng)導(dǎo)覽的功能,讓網(wǎng)頁變得更容易于移動設(shè)備閱讀。導(dǎo)航設(shè)計的重點(diǎn)有:
*只在首頁的部份加入搜尋的功能
*建立導(dǎo)航功能鍵,其中以「回到首頁」、「回到上一頁」這兩個最為重要
*最后,「回到上一頁」的按鍵除了首頁以外,其余的頁面都需要放置
4. 減少文字輸入部份
手機(jī)大多沒有實(shí)體的鍵盤,或僅只有12鍵的電話輸入功能,因此輸入文字上會比起使用鍵盤麻煩得多。因此,減少使用者輸入文字的機(jī)會,例如:個人的帳號、密碼、搜尋內(nèi)文、使用編輯器...等,都是手機(jī)網(wǎng)頁要盡力避免的。
設(shè)計的重點(diǎn)如下:
*允許手機(jī)上網(wǎng)使用者儲存輸入的帳號密碼資訊
*輸入的區(qū)塊盡量加以放大
*允許行動上網(wǎng)使用者,輸入簡易的密碼,例如PIN數(shù)字密碼
5. 思考多種版本的手機(jī)網(wǎng)頁版本
手機(jī)的規(guī)格眾多,有的分辨率為320*240,較新的則為800*480,而次世代的手機(jī)更有720P的分辨率,因此手機(jī)網(wǎng)站如何滿足眾多的需求?
一般來說有兩種作法,一種是建立不同分辨率的手機(jī)網(wǎng)站,由用戶于手機(jī)行動入口網(wǎng)頁自行選擇,以Facebook的例子來 說,mobile.facebook.com是適用于大部分的智能手機(jī)與平板電腦,而0.facebook.com則是用于非智能手機(jī)或是網(wǎng)路連線速度極 慢的區(qū)域;另一種做法則是透過手機(jī)的語法,例如CSS語法中的Viewpoint就能夠根據(jù)手機(jī)的分辨率加以決定瀏覽畫面的寬度。
6. 觸控螢?zāi)慌c非觸控螢?zāi)辉O(shè)計
雖然今日觸碰型的智能手機(jī)當(dāng)?shù)?,但是仍有為?shù)不少的傳統(tǒng)手機(jī),沒有觸摸的界面,使用的是傳統(tǒng)的控制方向鍵做為導(dǎo)覽的工具。例如:減少畫面中超連結(jié)的數(shù)量,可以讓選擇連結(jié)的時候出現(xiàn)一些減少一些按鈕的動作,或是加大文字以減少誤擊的問題。
此外更重要的是鼠標(biāo)的原理跟觸碰界面的原理有很大的差異,因此手機(jī)版的網(wǎng)頁應(yīng)該避免只有電腦鼠標(biāo)才能做到的功能,舉例來說:「下拉選單」的這一項功能,因為移動設(shè)備沒有「鼠標(biāo)座標(biāo)」的設(shè)計,所以無法觸發(fā)鼠標(biāo)移動過去才會顯示出來的選單。
7. 利用手機(jī)的天生優(yōu)勢
手機(jī)有著許多傳統(tǒng)電腦所沒有擁有的優(yōu)勢,其中最大的優(yōu)勢就是「行動力」,因此手機(jī)版網(wǎng)頁應(yīng)該要特別發(fā)揚(yáng)這些特色,讓手機(jī)網(wǎng)頁具有一般網(wǎng)頁更多的優(yōu)勢。舉例來說:
*手機(jī)定位:大部分的智慧裝置都有GPS或是定位的機(jī)制,可以讓客戶主動找到您的位置
*手機(jī)聯(lián)系:如果客戶使用的是行動電話,可以立即發(fā)話;如果是平板電腦,亦可以使用簡訊或是e-Mail的方式傳遞訊息給客戶
*鄰近地點(diǎn):如果您的事業(yè)有很多據(jù)點(diǎn),請告訴您的客戶,在他附近有哪一些地點(diǎn)是便于他能夠抵達(dá)的
近年已經(jīng)成為行動條碼的QR Code設(shè)計,也應(yīng)該納入行動網(wǎng)頁的設(shè)計元素在內(nèi)。
網(wǎng)站建設(shè)專家中科服網(wǎng)絡(luò)(jbbxhf.cn),專注于高端品牌網(wǎng)站建設(shè)的解決方案,為您提供專業(yè)、安全的企業(yè)展示網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)、商城系統(tǒng)網(wǎng)站建設(shè)、SEO優(yōu)化、網(wǎng)站認(rèn)證、網(wǎng)絡(luò)營銷、并提供一站式互聯(lián)網(wǎng)基礎(chǔ)服務(wù)。7×24小時專業(yè)技術(shù)支持,互聯(lián)網(wǎng)用戶服務(wù)的選擇。