雷火平台-中国知名电竞赛事平台

聯(lián)系我們 face+ 關(guān)于 服務(wù) 案例
首頁 案例 服務(wù) 關(guān)于 face+

手機網(wǎng)頁如何設(shè)計制作?wap網(wǎng)頁設(shè)計的注意事項有哪些?

Time: 2021-03-05

我們上網(wǎng)的主要方式是手機和電腦,不過,這兩種產(chǎn)品是有所不同的。那在設(shè)計網(wǎng)頁時,大家知道手機網(wǎng)頁如何設(shè)計和制作嗎?還有,wap網(wǎng)頁設(shè)計的注意事項有哪些呢?今天就一起跟小編來詳細(xì)了解一下吧。

  手機網(wǎng)頁如何設(shè)計制作?

  1.手機網(wǎng)頁的標(biāo)記語言

  因為WML大部分針對早期和低端的手機,現(xiàn)在已經(jīng)逐步被其他的技術(shù)取代了,現(xiàn)在學(xué)習(xí)手機網(wǎng)頁設(shè)計制作完全可以忽略WML。

  XHTML

  未來智能手機的市場份額會越來越大,考慮到這點,現(xiàn)在進(jìn)行手機網(wǎng)頁設(shè)計制作時,我們會用到更加熟悉的標(biāo)記語言Xhtml。

  現(xiàn)在大部分智能手機的瀏覽器都能正確處理Xhtml,它會識別兩種類型的Html。

 ?、?Xhtml:基礎(chǔ)的,和桌面瀏覽器相同的Xhtml

  ② Xhtml-MP:針對智能手機的Xhtml

  這兩種類型的不同之處,Xhtml-MP包含比較少的要素和相對寬松的限制,能適合手機平臺的渲染,現(xiàn)在很多手機網(wǎng)頁設(shè)計制作直接用Xhtml,也沒什么大問題。

(圖片來自網(wǎng)絡(luò))


  2.手機類型

  手機市場上既有非常高端的iPhone手機和谷歌的Android手機,也有諾基亞一些單色點陣顯示的低端機。這些低端機在瀏覽手機網(wǎng)頁時有很多的限制,如屏幕分辨率、渲染Xhtml的性能等,因此如果你的手機網(wǎng)頁是針對這部分用戶,最好還是用WML。

  另一方面,類似于iPhone和Nexus One這種高端智能機,擁有可以和桌面瀏覽器相媲美的渲染網(wǎng)頁的性能。對這部分用戶而言,良好的用戶體驗是很重要的,受限于手機的傳輸速度,如果直接用一般的電腦上瀏覽的網(wǎng)頁來代替手機網(wǎng)頁,對手機網(wǎng)頁的目標(biāo)客戶來說,并非明智之舉。

  可以把手機根據(jù)屏幕尺寸分成幾種常見的類型,如:

  128 x 160 pixels

  176 x 220 pixels

  240 x 320 pixels

  320 x 480 pixels

  3.手機網(wǎng)頁的目標(biāo)群體

  任何網(wǎng)站設(shè)計網(wǎng)頁時都應(yīng)該明白自己的目標(biāo)群體,以便向他們傳輸最合適的信息。這點在進(jìn)行手機網(wǎng)頁設(shè)計制作時更為重要。因為你不僅要知道你的目標(biāo)群體,還要知道他們?yōu)g覽手機網(wǎng)頁時的情景。瀏覽傳統(tǒng)的網(wǎng)站,訪客會坐在桌上,有著大分辨率的屏幕。手機網(wǎng)頁的訪客則有可能是在排隊、等交車、坐在地鐵等。

  手機網(wǎng)頁的目標(biāo)群體,谷歌的開發(fā)者將看手機網(wǎng)頁人群分為三大類,這對我們進(jìn)行手機網(wǎng)頁的設(shè)計和制作,很有參考意義。

  4.根據(jù)具體需要提供網(wǎng)站內(nèi)容

  一個很常見的誤區(qū)是很多網(wǎng)頁開發(fā)者認(rèn)為只需要簡單的設(shè)置,就可以將一個傳統(tǒng)的網(wǎng)頁變成可以適應(yīng)手機瀏覽的網(wǎng)頁,他們認(rèn)為只需要在CSS樣式表將media=”screen”變成media=”handheld”就能使網(wǎng)頁神奇般地適用于手機。

  這是錯誤的想法。

  雖然針對手機用戶變更網(wǎng)頁的CSS可以過濾一部分的內(nèi)容,或者一些CMS網(wǎng)頁也提供了相應(yīng)的轉(zhuǎn)換插件。但這些方案并不完善。

  W3c定義了“一個網(wǎng)站”的概念,意思是手機網(wǎng)頁不一定要提供和傳統(tǒng)網(wǎng)站完全一樣的內(nèi)容和設(shè)計,而是要根據(jù)手機的性能、帶寬等方面的不同提供一些差異化服務(wù)。

  根據(jù)這個定義,一些傳統(tǒng)網(wǎng)頁的內(nèi)容和功能不能在手機上實現(xiàn)是很合理的。不同手機能處理的內(nèi)容和功能也都是不一樣的。所以也可以根據(jù)這些手機進(jìn)行相應(yīng)的網(wǎng)頁制作。

  5.選擇域名

  為手機網(wǎng)頁選擇什么域名取決于你的目標(biāo)群體是如何進(jìn)入網(wǎng)站的。這里有三種域名可供選擇:

  A:為手機網(wǎng)頁使用獨立域名

  B:為手機網(wǎng)頁使用子域名

  C:為手機網(wǎng)頁注冊mobi的頂級域名

  D:判斷客戶端,并自動顯示對應(yīng)內(nèi)容

  6.為手機網(wǎng)頁驗證標(biāo)記語言

  電腦的網(wǎng)頁瀏覽器對錯誤比較寬容,一些html標(biāo)記的忘記書寫或者沒有正確嵌套在電腦瀏覽器都會正確顯示,當(dāng)然容錯率高意味著消耗更高的cpu和內(nèi)存。

  手機瀏覽器的性能還無法和電腦相提并論,所以手機瀏覽器對手機網(wǎng)頁的錯誤要嚴(yán)格一些。所以在設(shè)計和制作手機網(wǎng)頁時,你必須不斷進(jìn)行檢查、驗證和糾錯。驗證手機網(wǎng)頁和驗證一般傳統(tǒng)的網(wǎng)頁沒什么區(qū)別,如果你使用Xhtml編寫,可以使用相同的工具。W3C驗證器可以驗證一些簡單的錯誤,當(dāng)然這里有一個更適合驗證手機網(wǎng)頁的版本。

  7.為手機網(wǎng)頁不斷測試

  當(dāng)通過了手機網(wǎng)頁的驗證之后,就要針對幾種不同的手機進(jìn)行各種測試了。用電腦的瀏覽器雖然可以進(jìn)行模擬測試,但是并不完善。這種方式通過的手機網(wǎng)頁不能適用于某些手機。

  有些手機文件尺寸的限制可能會很小,所以你制作的手機網(wǎng)頁在這些設(shè)備上甚至無法顯示。另外瀏覽器支持的文件類型也會不同,支持的圖像格式也會不同。測試時候手機網(wǎng)頁當(dāng)然不可能擁有所有手機,所以制作網(wǎng)頁時可以使用一些替代手段。

  wap網(wǎng)頁設(shè)計的注意事項

  一、與計算機共享同一套網(wǎng)頁

  這里的與計算機共享網(wǎng)頁,指的是計算機用的網(wǎng)頁完全不經(jīng)修改、就直接給手機瀏覽。前提是網(wǎng)站本身的元素要夠簡單、版面不能太復(fù)雜。

  二、制作手機專用網(wǎng)頁

  這個做法在90年代非常盛行,當(dāng)時電信業(yè)者的GPRS/WAP廣告打得正火熱,手機能瀏覽的網(wǎng)站都是WAP網(wǎng)站,也就是用WML編寫的手機網(wǎng),WML是很簡陋的HTML,內(nèi)容通常只有文字跟選單。

  ▲用這個方法的好處是,WAP可以在所有的手機上正常顯示,不過要同時維護(hù)手機版和桌面版的網(wǎng)頁會很困難,使得信息常常無法同步。

  三、用瀏覽器來判斷裝置

  Opera有桌面版和手機版,同樣的Chrome、Safari、Firefox也是。有的網(wǎng)站會使用瀏覽器嗅探機制(browsersniffing) 來判斷你是用哪一種、什么裝置的瀏覽器,不過browsersniffing的設(shè)定很繁瑣,而且經(jīng)常出差錯。最快的方法是在網(wǎng)頁上加入各種版本的連結(jié),讓 瀏覽者可以自由選擇格式。

(圖片來自網(wǎng)絡(luò))


  四、開發(fā)復(fù)合型網(wǎng)站

  復(fù)合版網(wǎng)站就是能同時給桌面和手機使用的網(wǎng)站,它跟剛談到的「與計算機共享」并不一樣,復(fù)合版網(wǎng)站雖然內(nèi)容相同,但是它會根據(jù)屏幕大小來呈現(xiàn)版面。要做復(fù)雜 合型網(wǎng)站其實并不難,只要用CSS與HTML標(biāo)簽來調(diào)整就行,比如HTML的viewport以及CSS的media queries。

  關(guān)于手機網(wǎng)頁如何設(shè)計制作以及wap網(wǎng)頁設(shè)計的注意事項有哪些的相關(guān)內(nèi)容,小編就先介紹到這里了。如果大家想了解更多網(wǎng)頁設(shè)計的信息,敬請繼續(xù)留意我們的網(wǎng)站。


合作咨詢

上海(總部)

上海市浦東新區(qū)郭守敬路498號22號樓
021-61057328
service@faceui.com

辦公地址地圖

北京

北京市東城區(qū)后永康17號A座
010-64015620
service@faceui.com

辦公地址地圖

成都

四川省成都市錦江區(qū)東大街牛王廟段100號
028-62790929
service@faceui.com

辦公地址地圖
首頁 | 案例 | 服務(wù) | 關(guān)于 | face+ | 智見

Copyright ? 2009-2022 FaceUI design. All rights reserved


滬ICP備13044459號-5

上海辦公地點地圖
北京辦公地點地圖
深圳辦公地點地圖
在微信中搜索faceui
或保存二維碼在微信中打開