手機(jī)網(wǎng)站建設(shè)頁(yè)面設(shè)計(jì)的幾點(diǎn)原則
日期 : 2019-03-03 14:21:45
隨著智能手機(jī)和無(wú)線網(wǎng)絡(luò)的廣泛使用,以手機(jī)為載體的wap網(wǎng)站應(yīng)運(yùn)而生,并取得較大的發(fā)展。“Wap由一系列協(xié)議組成,用于標(biāo)準(zhǔn)化無(wú)線電通信設(shè)備,也可用于Interner訪問(wèn),包括收發(fā)E-mail、訪問(wèn)wap網(wǎng)站上的頁(yè)面等等”。由于wap網(wǎng)站相對(duì)于傳統(tǒng)的網(wǎng)站具有極大的便捷性,而且手機(jī)不斷推陳出新,互聯(lián)網(wǎng)網(wǎng)速不斷提升,wap網(wǎng)站的設(shè)計(jì)賦予了更多的可操作元素,如動(dòng)畫、視頻、app客戶端等。
隨著手機(jī)網(wǎng)絡(luò)受眾的井噴式增加,業(yè)務(wù)潛力巨大,各大互聯(lián)網(wǎng)公司紛紛布局,將發(fā)展重心轉(zhuǎn)向移動(dòng)領(lǐng)域。然而,基于互聯(lián)網(wǎng)網(wǎng)站改造的手機(jī)網(wǎng)站,在頁(yè)面的設(shè)計(jì)上與互聯(lián)網(wǎng)網(wǎng)站仍存在一定的區(qū)別。作為頁(yè)面設(shè)計(jì)者,在手機(jī)網(wǎng)站設(shè)計(jì)上應(yīng)貫徹以下幾個(gè)原則。
1 以手機(jī)及瀏覽器的適配性為基礎(chǔ)
手機(jī)網(wǎng)站需充分研究市場(chǎng)上各種移動(dòng)瀏覽器的物理特性,并根據(jù)相關(guān)屬性,用XHTML和CSS進(jìn)行有效的應(yīng)用軟件設(shè)計(jì)。“用戶界面是當(dāng)最終用戶使用系統(tǒng)時(shí)所接觸到的全部?jī)?nèi)容,無(wú)論從物理意義、感知意義,還是從概念意義上來(lái)講,都是如此”。隨著手機(jī)網(wǎng)站的發(fā)展,在XHTML MP和CSS不斷創(chuàng)建新的用戶界面結(jié)構(gòu),利用CSS修改這些新元素的可視化現(xiàn)實(shí),利用XHTML MP增加設(shè)計(jì)的多樣性。同時(shí),在APP的設(shè)計(jì)上,設(shè)有i OS(蘋果)、Android(安卓)系統(tǒng)的手機(jī)版本,IPAD版和Andriod HD版的平板電腦版本,適用于不同的移動(dòng)設(shè)備。
2 以簡(jiǎn)約實(shí)用風(fēng)格為依托
移動(dòng)手機(jī)用戶的最大需求在于快速、輕松地獲取信息,與傳統(tǒng)PC用戶相比,其獲取信息的需求更具迫切性。一個(gè)好的框架可以大大提高系統(tǒng)的開放效率,具有良好的可擴(kuò)展性,并且有一個(gè)支持它的強(qiáng)大的用戶團(tuán)體。
3 以導(dǎo)航層次為重點(diǎn)
在設(shè)計(jì)手機(jī)網(wǎng)站的導(dǎo)航模型時(shí),要在整個(gè)網(wǎng)站中保持導(dǎo)航模型的一致性。一是針對(duì)小屏幕的設(shè)計(jì)考慮,確保用戶打開網(wǎng)頁(yè)后的視覺(jué)寬度和可見(jiàn)內(nèi)容。同時(shí),盡量使用空白空間,尤其是在高而窄的圖像旁邊。通過(guò)在<img>元素中使用屬性align實(shí)現(xiàn)空間的合理應(yīng)用。二是優(yōu)化本文屬性。加強(qiáng)與編輯溝通,減少移動(dòng)設(shè)備不適用的長(zhǎng)標(biāo)題、長(zhǎng)注釋。用(lef,right,center)來(lái)增加文本的對(duì)齊屬性,在<head>元素中用<title>元素為每個(gè)頁(yè)面定義短小標(biāo)題,使用文本標(biāo)題字符數(shù)不超過(guò)移動(dòng)設(shè)備屏幕寬度物理值。為保持屏幕寬視角,在同一頁(yè)面中,利用分段錨對(duì)較長(zhǎng)的文章進(jìn)行跳轉(zhuǎn),方便用戶瀏覽點(diǎn)擊查閱。在遇到難以刪減長(zhǎng)標(biāo)題內(nèi)容時(shí),手機(jī)陽(yáng)光網(wǎng)在XHTML中設(shè)置了強(qiáng)制使用標(biāo)題。標(biāo)題文本按設(shè)置使用比例字體,如果標(biāo)題文本過(guò)長(zhǎng),文本將被自動(dòng)刪減。三是優(yōu)化色彩搭配。由于移動(dòng)網(wǎng)絡(luò)的輸入?yún)?shù)低于PC網(wǎng)絡(luò),故使用過(guò)多過(guò)大的色塊可能導(dǎo)致用戶打開網(wǎng)站困難。
4 以移動(dòng)電話應(yīng)用為配套
鑒于移動(dòng)通訊用戶在使用移動(dòng)網(wǎng)絡(luò)瀏覽感興趣的網(wǎng)頁(yè)時(shí),往往會(huì)對(duì)相關(guān)信息有咨詢的需要,而手機(jī)用戶的咨詢服務(wù)并不是以PC為首要考慮點(diǎn),更便捷的是電話服務(wù)。為此,手機(jī)網(wǎng)站應(yīng)設(shè)置電話鏈接功能,讓用戶只要用手一點(diǎn),便能聯(lián)通咨詢電話,提供極大的服務(wù)便捷性。“@東莞”app與三大運(yùn)營(yíng)商、網(wǎng)絡(luò)文化協(xié)會(huì)、市內(nèi)各服務(wù)部門等機(jī)構(gòu)協(xié)作,把關(guān)系市民生活的各種服務(wù)對(duì)接到該平臺(tái),有強(qiáng)大的電話咨詢服務(wù)功能,著力為網(wǎng)民提供各類便捷的服務(wù)。
5、以網(wǎng)站流暢運(yùn)行為目的
要保證網(wǎng)站的數(shù)據(jù)傳輸運(yùn)行流暢,很大程度上在于靈活處理圖像、視頻等大流量傳輸?shù)乃俣?。一般?lái)說(shuō),手機(jī)網(wǎng)站的圖像需經(jīng)過(guò)特殊處理。一是根據(jù)網(wǎng)頁(yè)圖像數(shù)量和容量大小處理。每一個(gè)圖像在移動(dòng)設(shè)備顯示時(shí),往往整個(gè)頁(yè)面都要重新進(jìn)行排列,容易導(dǎo)致網(wǎng)頁(yè)“堵車”的現(xiàn)象。同時(shí),合理使用wap網(wǎng)關(guān),優(yōu)化wap網(wǎng)關(guān)和服務(wù)器間的延時(shí),減少數(shù)據(jù)延遲及數(shù)據(jù)包丟失的概率。
當(dāng)然,片面降低圖片質(zhì)量也不利于網(wǎng)站的可讀性。在圖像下載之前不妨礙用戶正常瀏覽網(wǎng)頁(yè),為圖像的完整下載和處理留出足夠的時(shí)間。
基于上述原則設(shè)計(jì)手機(jī)網(wǎng)站,一是有利于保持網(wǎng)站的統(tǒng)一風(fēng)格,實(shí)現(xiàn)與PC網(wǎng)站同步,全網(wǎng)主色調(diào)一致。二是有利于保證網(wǎng)站的通暢運(yùn)行,為移動(dòng)用戶提供便捷服務(wù),實(shí)現(xiàn)及時(shí)將門戶網(wǎng)站迅速更新的信息向公眾傳播。
隨著手機(jī)網(wǎng)絡(luò)受眾的井噴式增加,業(yè)務(wù)潛力巨大,各大互聯(lián)網(wǎng)公司紛紛布局,將發(fā)展重心轉(zhuǎn)向移動(dòng)領(lǐng)域。然而,基于互聯(lián)網(wǎng)網(wǎng)站改造的手機(jī)網(wǎng)站,在頁(yè)面的設(shè)計(jì)上與互聯(lián)網(wǎng)網(wǎng)站仍存在一定的區(qū)別。作為頁(yè)面設(shè)計(jì)者,在手機(jī)網(wǎng)站設(shè)計(jì)上應(yīng)貫徹以下幾個(gè)原則。
1 以手機(jī)及瀏覽器的適配性為基礎(chǔ)
手機(jī)網(wǎng)站需充分研究市場(chǎng)上各種移動(dòng)瀏覽器的物理特性,并根據(jù)相關(guān)屬性,用XHTML和CSS進(jìn)行有效的應(yīng)用軟件設(shè)計(jì)。“用戶界面是當(dāng)最終用戶使用系統(tǒng)時(shí)所接觸到的全部?jī)?nèi)容,無(wú)論從物理意義、感知意義,還是從概念意義上來(lái)講,都是如此”。隨著手機(jī)網(wǎng)站的發(fā)展,在XHTML MP和CSS不斷創(chuàng)建新的用戶界面結(jié)構(gòu),利用CSS修改這些新元素的可視化現(xiàn)實(shí),利用XHTML MP增加設(shè)計(jì)的多樣性。同時(shí),在APP的設(shè)計(jì)上,設(shè)有i OS(蘋果)、Android(安卓)系統(tǒng)的手機(jī)版本,IPAD版和Andriod HD版的平板電腦版本,適用于不同的移動(dòng)設(shè)備。
2 以簡(jiǎn)約實(shí)用風(fēng)格為依托
移動(dòng)手機(jī)用戶的最大需求在于快速、輕松地獲取信息,與傳統(tǒng)PC用戶相比,其獲取信息的需求更具迫切性。一個(gè)好的框架可以大大提高系統(tǒng)的開放效率,具有良好的可擴(kuò)展性,并且有一個(gè)支持它的強(qiáng)大的用戶團(tuán)體。
3 以導(dǎo)航層次為重點(diǎn)
在設(shè)計(jì)手機(jī)網(wǎng)站的導(dǎo)航模型時(shí),要在整個(gè)網(wǎng)站中保持導(dǎo)航模型的一致性。一是針對(duì)小屏幕的設(shè)計(jì)考慮,確保用戶打開網(wǎng)頁(yè)后的視覺(jué)寬度和可見(jiàn)內(nèi)容。同時(shí),盡量使用空白空間,尤其是在高而窄的圖像旁邊。通過(guò)在<img>元素中使用屬性align實(shí)現(xiàn)空間的合理應(yīng)用。二是優(yōu)化本文屬性。加強(qiáng)與編輯溝通,減少移動(dòng)設(shè)備不適用的長(zhǎng)標(biāo)題、長(zhǎng)注釋。用(lef,right,center)來(lái)增加文本的對(duì)齊屬性,在<head>元素中用<title>元素為每個(gè)頁(yè)面定義短小標(biāo)題,使用文本標(biāo)題字符數(shù)不超過(guò)移動(dòng)設(shè)備屏幕寬度物理值。為保持屏幕寬視角,在同一頁(yè)面中,利用分段錨對(duì)較長(zhǎng)的文章進(jìn)行跳轉(zhuǎn),方便用戶瀏覽點(diǎn)擊查閱。在遇到難以刪減長(zhǎng)標(biāo)題內(nèi)容時(shí),手機(jī)陽(yáng)光網(wǎng)在XHTML中設(shè)置了強(qiáng)制使用標(biāo)題。標(biāo)題文本按設(shè)置使用比例字體,如果標(biāo)題文本過(guò)長(zhǎng),文本將被自動(dòng)刪減。三是優(yōu)化色彩搭配。由于移動(dòng)網(wǎng)絡(luò)的輸入?yún)?shù)低于PC網(wǎng)絡(luò),故使用過(guò)多過(guò)大的色塊可能導(dǎo)致用戶打開網(wǎng)站困難。
4 以移動(dòng)電話應(yīng)用為配套
鑒于移動(dòng)通訊用戶在使用移動(dòng)網(wǎng)絡(luò)瀏覽感興趣的網(wǎng)頁(yè)時(shí),往往會(huì)對(duì)相關(guān)信息有咨詢的需要,而手機(jī)用戶的咨詢服務(wù)并不是以PC為首要考慮點(diǎn),更便捷的是電話服務(wù)。為此,手機(jī)網(wǎng)站應(yīng)設(shè)置電話鏈接功能,讓用戶只要用手一點(diǎn),便能聯(lián)通咨詢電話,提供極大的服務(wù)便捷性。“@東莞”app與三大運(yùn)營(yíng)商、網(wǎng)絡(luò)文化協(xié)會(huì)、市內(nèi)各服務(wù)部門等機(jī)構(gòu)協(xié)作,把關(guān)系市民生活的各種服務(wù)對(duì)接到該平臺(tái),有強(qiáng)大的電話咨詢服務(wù)功能,著力為網(wǎng)民提供各類便捷的服務(wù)。
5、以網(wǎng)站流暢運(yùn)行為目的
要保證網(wǎng)站的數(shù)據(jù)傳輸運(yùn)行流暢,很大程度上在于靈活處理圖像、視頻等大流量傳輸?shù)乃俣?。一般?lái)說(shuō),手機(jī)網(wǎng)站的圖像需經(jīng)過(guò)特殊處理。一是根據(jù)網(wǎng)頁(yè)圖像數(shù)量和容量大小處理。每一個(gè)圖像在移動(dòng)設(shè)備顯示時(shí),往往整個(gè)頁(yè)面都要重新進(jìn)行排列,容易導(dǎo)致網(wǎng)頁(yè)“堵車”的現(xiàn)象。同時(shí),合理使用wap網(wǎng)關(guān),優(yōu)化wap網(wǎng)關(guān)和服務(wù)器間的延時(shí),減少數(shù)據(jù)延遲及數(shù)據(jù)包丟失的概率。
當(dāng)然,片面降低圖片質(zhì)量也不利于網(wǎng)站的可讀性。在圖像下載之前不妨礙用戶正常瀏覽網(wǎng)頁(yè),為圖像的完整下載和處理留出足夠的時(shí)間。
基于上述原則設(shè)計(jì)手機(jī)網(wǎng)站,一是有利于保持網(wǎng)站的統(tǒng)一風(fēng)格,實(shí)現(xiàn)與PC網(wǎng)站同步,全網(wǎng)主色調(diào)一致。二是有利于保證網(wǎng)站的通暢運(yùn)行,為移動(dòng)用戶提供便捷服務(wù),實(shí)現(xiàn)及時(shí)將門戶網(wǎng)站迅速更新的信息向公眾傳播。
相關(guān)文章
精彩導(dǎo)讀
熱門資訊
