怎樣設計一個簡潔的手機網站(第2部分)?
怎樣設計一個簡潔的手機網站(第2部分)?-移動閱讀二維碼

緊接第一部分(part I),接下來討論的就是如何將這些原則運用到手機網站設計中去,這里以網絡商店為例。我要設計3個典型的網絡商店頁面,并運用手機頁面設計原則。我會從草圖開始講,然后是網站線框圖,到最后的設計成品。(譯者:節選PART2中的部分內容,推薦英文好的讀者查看原文。原文地址:http://mobiforge.com/designing/story/mobile-web-design-getting-point-part-ii

由于手機設備屏幕尺寸不一,網站要支持每一個屏幕尺寸是不切實際的,這里我使用240X320作為目標屏幕尺寸,因為據Device Atlas Data Explorer的調查顯示,240X320在保持實用的同時,還能保證你的網站能夠在眾多手機設備上顯示正常。的確,240X320與桌面電腦屏幕相比真是太小了(參見下圖),幾乎是其十分之一,這也是值得注意的一點。

mobile screen sizes are tiny compared with the traditional desktop.

Step 1: Sketches(草圖)

首先,用網站線框圖來勾勒出一個頁面所需要具備的東西。我要設計出電子商店的3個頁面:瀏覽頁面、搜索頁面以及物品查看頁面。

Sketch of browse page

第一個就是瀏覽頁面,這是訪問者經常點擊的頁面之一,通常由主頁鏈接過來,內容通常是與一個主題或類目相關的次要內容。與桌面電腦網站一樣,在手機網站上要具有廣告標識是最劇本的,不過站的空間不要太多,在頁面頂端有一個簡單的log就能起到很好的效果。

瀏覽頁面有著眾多的作用,比如導航功能,設計點簡潔的導航告訴用戶所處的位置以及下一個位置是什么。然后是搜索框,之后是一些列單,圖片以及其他部分的鏈接。

 

Sketch of search page

主導航處于最低端。在手機網站上要把最重要的東西擺在優先的位置,而額外的導航元素則應該處于頁面底端。最后,還有一個瀏覽全版網站的選項,由于并不是每個人都必定使用手機版網站,又或者手機版網站的功能不齊全,所以這個選項還是很有用的。

Sketch of view page

然后就是搜索結果頁面的草圖。網絡商店最常用的一個功能就是搜索,所以這個頁面必須能夠有效地幫助用戶達到他們想找的頁面。頁面頂端是一些告訴用戶現在在哪個位置的簡單信息,然后是搜索結果。額外的導航信息仍在最下面。

最終就是物品查看頁面。用戶在這頁面主要是為了重新查看商品的信息并把商品加入購物車。先是物品圖片、價格以及關鍵性的“加入購物車”選項,然后是商品信息全文,這幾個元素是最重要的,被優先處理。搜索仍舊是相關有用的,不過被移到頁面的底端,因為它不是最重要的。

Step 2: Wireframes(網站線框圖)

那么現在就是進一步勾勒出這三個頁面的樣子了,更加直觀準確地展現最終的網站是什么樣的。

瀏覽頁面(如上圖):正如Twitter把信息更新功能放在最優先的位置,我們把搜索擺在頂端,因為搜索是用戶登錄網店用的最多的功能。

搜索頁面(如上圖):正如草圖所設計的,最重要的內容是搜索結果,所以被放在最高位。設計的主線就是告訴客戶他們搜索到什么,有多少搜索結果,根據需要我們對這些內容做了進一步的簡化。

上圖是物品瀏覽頁面,我們對頁面元素進行了整理。Ok!網站框線圖設計就完成了!

Step 3: Basic HTML

手機網站搭建的好處之一就是不需要學習一些新的技術,因為整個設計原則就是簡潔明了。另外就是,市場上許多新的手機設備完全支持CSS,這樣使得網站不僅更加友好,而且也能達到美觀舒適的目的。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
?在手機網站搭建中遇到的第一個問題就是Document Type Declaration,維基有對不同的DOCTYPES的文章(文章鏈接http://en.wikipedia.org/wiki/XHTML_Mobile_Profile),另外mobiforge.com上的Comparison of XHTML Mobile Profile and XHTML Basic(文章地址:http://mobiforge.com/designing/story/comparison-xhtml-mobile-profile-and-xhtml-basic)文章中的表格也對主要的手機markup DTDs之間的區別做了很好的說明。我選擇了version1.2,所以我的頁面首部就是這樣的:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

另外我還是用了Firefox插件HTML Validator,可以檢查你的HTML代碼。還有一點,你也許需要看看Ruadhan關于mobile DOCTYPE的幾點說明(文章地址:http://mobiforge.com/forum/developing/mobile-development/url-not-supported-version-error-doctype)。Validation is Your Friend這篇文章也有一些有用的信息。

有一點需要謹記的是:手機上沒有很多的橫向空間給你發揮,一個橫向布局的手機網站并不實用,因為手機屏幕尺寸不一,所以優先選擇的是fluid design。

在構建頁面的時候,我用了h1,h2,h3等來強調一些重要的元素。

瀏覽頁面的HTML代碼:

<div id="products">
<h3><a href="view.html">The Secret</a></h3>
<span>by <a href="#">Dwayne Johnson</a></span>
<span>&euro;8.99</span>
<hr/>
<h3><a href="view.html">For whom the bell tolls</a></h3>
<span>by <a href="#">Kirk Chandlund</a></span>
<span>&euro;12.00</span>...

無CSS的瀏覽頁面在手機上的顯示效果:

Browse page without CSS

搜索頁面HTML代碼:

<h1>BookStore Online</h1>
<hr/>
<p id="results-summary">Search for "Red Arrow" (11 results)</p>
<hr/>
<div id="results">
<h3><a href="view.html">Red arrow at nightfall</a></h3>
<span>by <a href="#">Michael Johnson</a></span>
<span>&euro;8.99</span>
<hr/>...

無CSS搜索頁面在手機上的顯示效果:

Search page without CSS

物品查看頁面的HTML代碼:

<div id="main">
<h2>The Long Tail</h2>
<p>by <a href="#">Chris Anderson</a></p>
<div>
<img src="/files/images/long_tail.jpg" width="60" height="85" alt="The Long Tail"></img>
</div>
<div>
<p id="price">&euro;16.99 <span id="stock">In stock</span></p>
<p><a href="#">Buy now</a></p>
</div>
<div id="details">

無CSS物品查看頁面在手機上的顯示效果:

View page without CSS

當然,僅HTML格式的網站是遠遠不夠的,下面就是添加CSS了,讓網站生動起來!

Step 4: CSS

CSS和javascript能讓手機網站煥然一新。例如諾基亞N95的CSS-compliant Webkit based browser,些許的CSS就然瀏覽器煥發光彩。

如果你一直沒有調查過手機瀏覽器,你也可以在不必改變html代碼的情況下使用CSS media=“handheld”,例如:

<link href="/stylesheets/main.css" media="handheld" rel="stylesheet" type="text/css" />

雖然未必所有瀏覽器支持CSS,但是如果遇到支持CSS stylesheet的手機設備,可以顯示其效果。

CSS主要是為了從視覺上明顯隔開頁面上的不同元素,讓內容更適合于屏幕展現。當然如果你有設計天分,你也可以巧妙地使用CSS來加強網站的視覺效果,使其符合品牌意義,如果能這樣做,你的網站自然會脫穎而出。

下面四張圖就是嵌入CSS之后的網站效果,通過顏色等對網頁元素在視覺上進行分離,而且所有頁面都遵守一個風格,網站的外觀和視覺感受都比較統一。https://github.com/paulca/design-article-site/blob/master/stylesheets/main.css在這可以查看完整的CSS代碼。

Browse screen with CSS?Browse screen with CSS

Search page with CSS?View screen with CSS

Step 5: Javascript

我的觀點是可以使用Javascript來打扮手機網站,但必須極度謹慎,因為好多手機并不支持java。使用Java的一個優點就是避免在EDGE和3G網絡環境下的page refresh,從而改善你的手機網站的用戶體驗。

再次強調要謹慎使用java,如果頁面loadtime超過10K將會降低用戶體驗,雖然要給用戶帶來最好的用戶體驗,但是前提是你的明確知道用戶支持這些技術,如果不知道,最好假設不支持的情況。

下面是物品查看頁面的java代碼:

window.onload = function(){ //load this when the page loads
//set up swap variables
var summary = document.getElementById(\'summary\')
var long_summary = summary.innerHTML + \' <a href="#">...less</a>\'
var short_summary = summary.innerHTML.substr(0,100) + \'...\' + \' <a href="#">full details...</a>\'
var body = document.getElementById(\'view-page\')
//do the swap
swap_full_summary = function(){
if(summary.innerHTML == long_summary)
{
summary.innerHTML = short_summary
}
else
{
summary.innerHTML = long_summary
}
}
summary.innerHTML = short_summary
}

最后一步就是通過Ready.mobi來試運行網站,這樣可以讓你直觀了解自己的網站,看看有什么疏漏。

And finally: ship it!大功告成!

最后想說的就是手機網站的設計并不是想象中那么困難,只需要設計使用一些簡單的技術,遵守簡明的原則,學習Google、Facebook和Twitter的一些成功經驗。最后給點建議:

  • 先用草圖勾勒網站,注意最重要元素的布局
  • 代碼清晰簡單,這樣才能在手機得到很好的顯示
  • 明智且負責任地使用javascript
  • 使用HTML validators和Ready.mobi確保代碼和網站無誤
本文鏈接:http://www.casaleticia.com/how-to-design-a-simple-mobile-website-part-2.html
本文標簽: