優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利
優(yōu)惠活動(dòng) - 12周年慶本月新客福利

對移動(dòng)web設(shè)計(jì)的思考

日期 : 2021-11-02 15:38:57
  1. 對移動(dòng)web設(shè)計(jì)的思考
       我們已經(jīng)對移動(dòng)WEB設(shè)計(jì)的趨勢和挑戰(zhàn)進(jìn)行了初步的了解,下面我們來重點(diǎn)檢查一下設(shè)計(jì)師在過程中應(yīng)該考慮的幾個(gè)要點(diǎn)。
  1. 簡明的語義標(biāo)記
如果你想為- -個(gè)優(yōu)秀的移動(dòng)網(wǎng)頁打下穩(wěn)固的基礎(chǔ),你最先要做的事情就是設(shè)立一套適用于網(wǎng)頁的、簡明的語義標(biāo)記。這樣在你設(shè)計(jì)移動(dòng)網(wǎng)頁的時(shí)候才會避免重復(fù)傳統(tǒng)互聯(lián)網(wǎng)設(shè)計(jì)中存在的重大問題。簡明的標(biāo)記能有效幫助瀏覽器正確顯示網(wǎng)頁頁面。同樣,由于避免了不必要的環(huán)節(jié),簡明的語義標(biāo)記還將給用戶帶來愉快的體驗(yàn)經(jīng)歷。
  1. CSS下內(nèi)容與顯示的分離
除了簡明的語義標(biāo)記,內(nèi)容與顯示的分離也是非常重要的。與桌面用戶相比,手機(jī)網(wǎng)頁用戶更喜歡訪問沒有圖片和禁用CSS的網(wǎng)頁。手機(jī)網(wǎng)頁用戶更希望順利地訪問頁面內(nèi)容和鏈接一而不是看到華麗的頁面顯示。作為移動(dòng)互聯(lián)網(wǎng)網(wǎng)站,當(dāng)其開始大量使用簡明的語義標(biāo)記,并用CSS實(shí)現(xiàn)內(nèi)容與顯示的分離時(shí),這就是一個(gè)具有非凡意義的偉大的開端。
  1. ALT標(biāo)簽
出于部分用戶由于某些原因不能瀏覽網(wǎng)頁上圖片的考慮(或者用戶選擇屏蔽圖片),ALT標(biāo)簽對于可用性來說顯得非常重要。無論如何ALT標(biāo)簽在互聯(lián)網(wǎng)中都有所運(yùn)用,只是對手機(jī)互聯(lián)網(wǎng)用戶來說它更加重要而已。
  1. 表單域的分類
像ALT標(biāo)簽一樣,表單域分類使得移動(dòng)互聯(lián)網(wǎng)變得更加實(shí)用。試想一下,如果沒有對其進(jìn)行了解就加以使用,那么一定不會得到你理想的效果。而處理好像ALT標(biāo)簽和表單域分類這樣的細(xì)節(jié)問題就可以使你事半功倍。
  1. 標(biāo)題的作用
由于移動(dòng)WEB瀏覽器所顯示的內(nèi)容文本格式常常是受限制和不協(xié)調(diào)的,以標(biāo)題在此處就顯得格外重要。移動(dòng)Web瀏覽器并不能將文字顯示為你想讓它呈現(xiàn)的那種效果,但是類似標(biāo)題一、標(biāo)題二、 標(biāo)題三這樣的標(biāo)簽?zāi)軒椭撁鏄?gòu)造一個(gè)合理的用戶視圖,并凸顯出頁面的某些重點(diǎn)內(nèi)容。
  1. 禁用漂浮鏈接
盡管移動(dòng)Web瀏覽器也能通過使用漂浮鏈接來進(jìn)行整個(gè)網(wǎng)頁頁面的布局,但是在小屏幕上恐怕并不會收到很好的效果。通常情況下,沒有漂浮鏈接會使內(nèi)容簡單排列的網(wǎng)頁整體看起來更舒服,用戶也能得到更好的使用體驗(yàn)。
  1. 減少頁邊距和填充
一般情況下,和傳統(tǒng)的網(wǎng)站相比,移動(dòng)設(shè)備上的網(wǎng)頁最好減少頁邊距和其他的填充。當(dāng)然,這取決于你所設(shè)計(jì)的網(wǎng)站頁面填充的實(shí)際情況和網(wǎng)頁頁邊距的大小,但是過多的頁面填充和過大的頁邊距并不能提升用戶體驗(yàn)。
  1. 做好頁面導(dǎo)航
很多頁面的網(wǎng)站導(dǎo)航都設(shè)計(jì)在頁面的最上方。這樣的設(shè)計(jì)對于移動(dòng)網(wǎng)頁同樣有用,但是值得注意的是,手機(jī).上的導(dǎo)航選項(xiàng)是按比例縮小的。在手機(jī)網(wǎng)頁中,最好只提供最常用、最有用的鏈接選項(xiàng),同時(shí)在設(shè)計(jì)時(shí)盡量讓用戶能夠更加方便地接入其他的導(dǎo)航鏈接。
  1. 注重頁面顏色對比
由于使用手機(jī)屏幕不能擁有電腦或筆記本屏幕-樣的使用體驗(yàn),所以在設(shè)計(jì)手機(jī)Web頁面的顏色時(shí),為了確保用戶能夠有良好的閱讀體驗(yàn),設(shè)計(jì)師們一定要注意頁 面背景顏色和文字顏色的協(xié)調(diào)搭配。
  1. Sitepoint(設(shè)計(jì)團(tuán)隊(duì))的移動(dòng)web設(shè)計(jì)作品
Sitepoint出版了由布萊恩.蘇塔撰寫的<移動(dòng)Web設(shè)計(jì)),這篇文章對于學(xué)習(xí)移動(dòng)Web設(shè)計(jì)的朋友來說很值得參考和學(xué)習(xí)。在文章中,布萊恩將移動(dòng)Web設(shè)計(jì)分解為7個(gè)簡要易懂的步驟。這篇文章的內(nèi)容對于重申本人上述的Web設(shè)計(jì)要點(diǎn)非常有用。
  1. 不要混淆標(biāo)記
大多數(shù)網(wǎng)站都會忽視WML,而是用大家更熟悉的所以在進(jìn)行設(shè)計(jì)時(shí)一定要使用適合的編輯語言,并建立簡明的語義標(biāo)記。
  1. 了解你的手機(jī)
我們不僅要滿足手機(jī)不同屏幕尺寸和分辨率的需求,還要滿足其變化多端的外觀需求。從早期的時(shí)短時(shí)長的長方形到后來的“大哥大”個(gè)頭發(fā)展到完美比例的方形,手機(jī)豐富多彩、日新月異的變化簡直讓人抓狂!
  1. 找準(zhǔn)目標(biāo)客戶
傳統(tǒng)的互聯(lián)網(wǎng)用戶大多是坐在電腦桌前面對著-臺高分辨率大顯示器。而移動(dòng)Web用戶的使用環(huán)境卻大大不同。他們在瀏覽網(wǎng)頁時(shí)可能正在等地鐵、正在公交車或火車上,或是剛剛走出家門,又或是在深夜迷失在一一個(gè)陌生的城市,任何情況都可能發(fā)生。
  1. 謹(jǐn)慎發(fā)布
雖然只有一個(gè)網(wǎng)站的概念,但是用戶所使用的瀏覽介質(zhì)很大程度上決定著網(wǎng)站的風(fēng)格和形態(tài),如今業(yè)內(nèi)也流行著很多種不同的設(shè)計(jì)標(biāo)準(zhǔn),但是-個(gè)獨(dú)立的移動(dòng)網(wǎng)頁必須滿足的一個(gè)條件,那就是要為用戶提供優(yōu)越的瀏覽體驗(yàn)。
  1. 選定響亮的域名
當(dāng)你準(zhǔn)備為一-個(gè)移動(dòng)選定-一個(gè)域名的時(shí)候,我曾經(jīng)工作過的公司和同事總是會選用子域名。創(chuàng)建一個(gè)子域名是設(shè)立- -個(gè)網(wǎng)站時(shí)最簡單的辦法(前提是你擁有該域名),這意味著你不用把大把的時(shí)間花在改進(jìn)和修改服務(wù)器上(而且還很有可能影響正常的Web設(shè)計(jì)進(jìn)度)。
  1. 驗(yàn)證你的標(biāo)記
移動(dòng)web瀏覽器的運(yùn)行速度和容錯(cuò)性都大大低于電腦瀏覽器。在移動(dòng)設(shè)備上運(yùn)行的瀏覽器,并沒有奢侈的電腦瀏覽器所擁有的2GHz處理器和高達(dá)200GB的存儲空間。因此,你必須一次又一次地檢查、驗(yàn)證、重復(fù)檢查你的標(biāo)記。
  1. 除了測試,還是測試
雖然在臺式電腦上能夠使用Web瀏覽器來測試你的移動(dòng)網(wǎng)站,但是在其得到實(shí)際運(yùn)用之前,它仍然只是一個(gè)模擬的移動(dòng)體驗(yàn)。不容忽視的是,用這種方式還是無法精確地復(fù)制許多移動(dòng)設(shè)備的使用感受。布萊恩的文章對于移動(dòng)Web設(shè)計(jì)與開發(fā)新手來說是一個(gè)非常好的開端。當(dāng)你在檢查、測試你的作品時(shí)能夠正確運(yùn)用文章中的知識點(diǎn)以確保你用正確的方式來完成工作,這是一個(gè)非常好的學(xué)習(xí)資源。

相關(guān)文章