5大移動網頁設計之最佳實踐
2011-12-29
  本文來自SocialBeta形式奉獻者wisp,原文譯自Mobile Web Design: Best Practices,更多挪動產品設想方面的材料,請檢查SocialBeta挪動互聯網欄目。

  挪動裝備的衰亡正在給互聯網帶來一場新的反動,固然說挪動網頁設想準繩不會有多大變化,但是卻有著分明的區別。

  至多有一點是一模一樣的,目前挪動裝備的網絡速度可比不上寬帶,另外挪動網頁呈現方式也是多樣的,有觸摸屏,有上網本,這些小屏幕卻貌似偉人!

  可以有些人會以為挪動化真實基本沒必要,但是簡直一切人都得供認這是一個不可防止的趨向。

  假如你正在研討挪動網頁設想(大概正在將一個網站搬到挪動裝備上),這篇文章大概可以協助你理解到目前挪動設想的開展趨向。 呈現方式

  在設想對挪動裝備敵對的網站時,首先要思索的元素之一就是呈現方式大概用戶體驗方式。

  呈現方式的多樣化

  幻想的狀況就是你往常的網站適用于一切類型的挪動裝備。大概你的網站可以適用于iPhone等具有內置閱讀器的挪動裝備,不過卻在其他的挪動裝備上,狀況一定如此好,而跨裝備挪動設想卻又難以取得勝利。

  假如你以為開拓出在IE/Firefox/Chrome/Safari等閱讀器的網站很困難,真實可以無妨試試開拓特地針對iPhone/BlackBerrys/Palm Pres/Androids/Motorola/Nokia的網站,不過你很快就會發覺這些硬件裝備真是太多了。

  在桌面網絡設想中,你只需一種言語:HTML,但是在挪動網絡上,可以是WML,平臺也可以是蘋果的iOS,大概是Android。

  固然WML曾不斷限制著我們的設想創意,但是往常我們所具有的方式變得愈加靈敏了!

  NO1:采用支撐挪動裝備的網頁設想

  在挪動網頁設想上,一個冗雜的處置方法就是對現存的桌面網頁代碼和設想停止調整,以適用于挪動裝備,還有就是從草圖做起,一步步的設想。例如,經過CSS3,你可以根據用戶的挪動裝備來調整網頁布局等等。

  但你想想看,題目在于并不是一切挪動裝備都支撐CSS3,所以你得求助于效勞器裝備偵查大概JavaScript(例如調整DOM來改動頁面布局)。不過題目又來了,有些裝備又不支撐這些技術!(譯者:糾結!)

  根據窗口來決議布局大小,大概只需幾行CSS3

  NO2:將挪動用戶轉向手機版網站

  挪動設想呈現的另一種方式就是特地針對手持裝備而優化的布局,你可以應用Mobify等網絡效勞來做到這點。

  與第一種方法相比(采用支撐挪動裝備的網頁設想),這種呈現格式愈加優良,由于體驗設想是特地針對挪動用戶的,不思索桌面用戶。

  這種狀況下,你的流量取決于用戶的閱讀器代-理。例如,假如一個挪動裝備用戶拜訪你的網站(yousitename.com),然后他們會比主動轉向至mobile.yoursitename.com大概m.yoursitesname.com等之類的。

  獨立的手機網站會取得那些喜愛更快的速度的用戶所帶來的流量。

  NO3:用戶指導要點:

  不管你運用何種方式,上面兩點是很次要的: 拜訪者曉得你的手機版網站是可以登錄的 拜訪者可以挑選是登陸手機版網站還是一般版網站(譯者:就是PC版網站)

  固然強行為用戶轉向大概改動布局聽起來仿佛是個好主見,但是后果常常會令人懊喪,所以最好還是讓用戶可以挑選。

  冗雜的技巧就是有這兩個版本的網站的鏈接。例如,Six Revisions,你會發往常該網站的地段會有手機版網站的鏈接(m.sixrevisions.com),這樣不管是手機用戶還是電腦用戶都有了挑選。 結構和代碼

  另外一件需求思索的事情就是結構代碼(markup和styles): 你曉得WML大概XHTML mobile profiles?(百科:WML(Wireless Markup Language - 無線標志言語)。它是一種從 HTML 繼續而來的標志言語,但是 WML 基于 XML,因而它較 HTML 更嚴厲。WML 被用來創立可顯現在 WAP 閱讀器中的頁面。用WML編寫的頁面被稱為 DECKS。DECKS 是作為一套 CARDS 被結構的。這種描繪言語同我們常聽說的HTML言語同出一家,都屬于XML言語這一自己族。WML的語法跟XML一樣,WML是XML的子集。HTML言語寫出的形式,我們可以在我們的PC機上用IE或是Netscape等閱讀器停止閱讀,而WML言語寫出的文件則是特地用來在手機等的一些無線終端顯現屏上顯現,供人們閱讀的,并且異樣也可以向運用者提供人機交互界面,承受運用者輸出的查詢等消-息,然后向運用者前往他所想要取得的終極消-息。XHTML Mobile Profile –2001年公布,基于XHTML,針對挪動電話的言語,被以為是目前最優良的言語) 你所設想的app是使用于iPhone還是Android? 你在設想時有沒有思索到挪動裝備閱讀器的本錢和速度? 什么是HTML5和CSS3?(百科:HTML5提供了一些新的元素和屬性,例如<nav>(網站導航塊)和<footer>。這種標簽將有益于搜尋引擎的索引拾掇,同時更好的協助小屏幕安裝和視障人士運用,除此之外,還為其他閱讀要素提供了新的功用,如<audio>和<video>標志。些過期的HTML4標志將被撤消。其中包括地道顯現成效的標志,如<font>和<center>,它們曾經被CSS取代。CSS3是CSS技術的晉級版本,CSS3言語開拓是朝著模塊化開展的。以前的標準作為一個模塊真實是太宏大而且比擬冗雜,所以,把它合成為一些小的模塊,更多新的模塊也被參加出去。CSS就是一種叫做款式表(stylesheet)的技術。也有的人稱之為層疊款式表(CascadingStylesheet)。CSS3提供了十分多新道路去改善你的設想任務,且做了不少次要的變化。)

  這些題目還不夠片面,有些題目也正處于研發階段。

  新裝備所支撐的代碼可以不同于舊的挪動裝備。

  挑選

  設想一個對挪動用戶敵對的網站,最次要的事情就是選對言語。在智能手機呈現之前,舊的手機只支撐WML(最基本的言語),隨后W3C推出了愈加敵對的XHTML(XHTML Mobile Profiles檔案)。

  僥幸的是,挪動裝備發生的更新速度是的網頁體驗愈加完好和健全,假如你不懂mobile profiles大概WML,你可以運用一般的HTML大概XHTML。

  不過,仍要夸大的一點是,WML還是要思索的,你的用戶大概運用的是一般手機(非智能手機)。當然往常我們要處置更多的web zombies(網頁劫持)。

  異樣你的決議必需基于網站數據和少量的網站剖析。 速度和本錢(對用戶而言)

  不管你采用哪種言語,接上去要思索的首要要素就是速度和用戶本錢。

  挪動互聯網運營限制流量,進而使帶寬成了一個無限而珍貴的資源,而且周游免費還很貴!

  思索到流量、本錢和速度,所以必需保證markup(編程言語)盡可以的簡明、小且標準。

  得記住一點,挪動網絡運營商收取的周游費是很多的!

  由于新技術更新和采用速度很快,將來必定是HTML5和CSS3的天下,所以要思索妥外地晉級你的代碼。

  像Apple等都提供固件晉級,這樣很多老裝備也可以支撐新標準了。但是大概會發作相似的狀況:IE6用戶回絕晉級到IE8,因而在決策之前,都要做好研討,測試、測試、再測試! 布局要素

  挪動網頁布局會很費事: 挪動裝備外形尺寸不一; 挪動裝備質量和處置計劃不一; 挪動裝備大概支撐減少轉動,但也可以不支撐; 屏幕小,所以頁面轉動會愈加困難。

  挪動頁面設想布局的終極手段就是:盡可以地讓用戶疾速地找到所尋覓的東西,添加這一進程的用戶擔負。

  布局對你的挪動網站勝利與否起著實質性的作用。

  由于空間少,single column designs(單欄設想)是必需的!

  簡明

  無效的挪動網頁布局的理念之一就是簡明。形式越冗雜,讀起來越困難,需求轉動的中央越多!

  空間小以致多欄設想并不適用,形式布局不能逾越屏幕,除非是主動減少等。

  因而,單欄設想顯得愈加適用。

  防止轉動

  iPhone和iPad等挪動裝備可根據裝備中心來調整頁面,這些也添加了轉動需求,不過并不是一切挪動裝備都有這功用。

  在手機上需求轉動的形式頁面不具有優良的體驗。

  橫向轉動也不是個好主見,特地iPad上,轉動條只需在用戶嘗試轉動的時分才會呈現,所以少數狀況下,挪動網頁設想都要防止轉動。

  一個好的挪動網頁設想具有清楚地布局以及簡明的導航選項。

  導航和按鈕的大小

  另外一個關鍵成分就是導航和按鈕了!這也是觸摸挪動裝備的一個次要題目。

  我不肯定你的手有多大,我想你必定碰到過要點下那么小的按鈕,更該死的他還沒有減少功用。

  所以說,一個好的體驗要有什么?一個大小妥當,按起來爽的鏈接和按鈕!!!

  添加點擊次數也是個好主見,在挪動網頁設想中這也是次要的一點!! 形式設想

  形式是網站的中心,不過也要思索到流量等本錢題目,如何添加過大的圖片、文本和多媒體也是門學問,50KB和2MB有著相當大的區別!

  挪動裝備更夸大“少”,更少的形式意味著更具可讀性!

  文本形式

  一個網站里,最多的就是文本形式了!

  但是雖然形式照舊是手持裝備上的網站,但是諸如轉動、小文件、疾速閱讀以及帶寬限制等要素,這些都意味著我們必需調整文本以確保其可用性!

  假如你的設想只是在現有網站布局上停止冗雜的調整(也就是第一個方法NO1:采用支撐挪動裝備的網頁設想),你需求對一些不用要的文本、圖片大概多媒體停止刪減(就算是提供下載,也會添加可讀性)。而獨立的手機網站設想的益處就是可以肅清多余的形式。

  圖片

  屏幕小決議著CSS格式的圖片大概大容量的infographics會有題目。固然有些手持裝備屏幕大,題目不會分明。IPhone等裝備的減少減少功用仍然無限,所以一些視覺丑化功用必定需求剔除!

  大圖占領寬帶,所以要添加其大小!

  50KB和500KB的圖片在尺寸和處置計劃上也有著分明的區別!帶寬消耗也不同!

  視音頻

  視音頻簡直是必需具有的形式,就算是有寬帶限制,特地是在iPhone和iPod這樣的裝備。異樣的道理,過度的和明智的運用是關鍵!

  假如你提供視音頻,最好有一個下載咨詢!

  上面是幾個倡議: 格式:慎重運用flash等一些裝備上不兼容的格式; 視音頻文件大小:優化你的文件 不要主動下載視音頻:必定要事前咨詢用戶。 不要主動播放:這樣很讓人膩煩。 其他需思索的要素

  最要要思索的要素可以還有scripting、plugins等等

  曉得該不要什么,該保存什么,這樣才干進步用戶體驗,同事確保你的手機網站可以適用于一切挪動裝備!

  挪動裝備交互VS團體電腦交互

  兩者交互方式如此不同在于屏幕不同;另外挪動裝備中沒有鼠標鍵盤,而是經過手指舉措來指定舉動和反映。

  專屬技術和Plugin

  比方,Apple就阻遏flash在其挪動裝備上的使用,這真的是個題目!從而不得不依靠于蘋果的專有技術!

  Apple支-持flash大概前兆著挪動裝備消費商想保住其對第三方的優先權。固然很多開拓商也因而運用蘋果平臺,不過對這一題手段最益處置方法就是過度地對本人的手機網站停止升級!

  有著優良網絡銜接的網絡效勞

  由于往常的挪動裝備網絡環境,網絡銜接仍然是很多web app最頭疼的一個題目!以至還有一些手機沒信號的“出生區”,這些都影響著用戶交互,用戶在做某一件事,不過網絡卻忽然中綴了,體驗天然很蹩腳!所以在設想app時需求思索到離線和在線兩種狀況。(引薦閱讀this offline HTML5 iPhone app tutorial)。

  挪動網站測試

  你只需得手機店逛一逛,就會發覺屏幕等等都是有很多不同的!

  目前有很多網站測試模仿器。

  思索到往常幾個至公-司都只想保住本人的合作上風,所以標準化仿佛不太可以發作!

  所以網站測試的范疇要盡可以廣!

  挪動裝備模仿器測試

  無須置疑,你需求在盡可以多的平臺上對本人的網站停止測試,上面我們提供了一些模仿器: Android emulator Blackberry emulator Dot Mobi emulator Firefox Mobile emulator iPhone / iPad / iPod Touch emulator Klondike WML emulator LG emulator Microsoft Devices emulator Motorola emulator Mozilla Fennec emulator NetFront emulator Nokia emulator OpenWave emulator (archive) Opera Mini emulator Opera Mobile emulator Palm emulator Palm Pre / iPhone emulator Samsung Java emulator Samsung Platform emulator Windows Mobile emulator總結:3S:Simple,Small,Speedy

  固然本文提供的都是一些概要性的倡議,不過仍然有著基本的準繩。

  速度(speedy)仍然是目前首要處置的題目,我們可以應用監視器來限制處置計劃和色彩。很多ISPs仍然限制寬帶,有時還會發作斷網,這些狀況關于老一代開拓職員來說仿佛并不生疏!

  所以在網絡等根底設備未改善之前,simple,small,speedy就是我們要恪守的3個次要準繩了!

  種別:挪動裝備ui設想網頁設計
分類:潮流服裝