手機(jī)版網(wǎng)站建設(shè)是個(gè)趨勢(shì)，而且是只會(huì)朝著前端邁進(jìn)的時(shí)代趨勢(shì)。不過(guò)制作的方式與一般傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)有很大的差異，而且也跟企業(yè)的產(chǎn)業(yè)有很大的關(guān)系，以下我們整理出10點(diǎn)注意事項(xiàng)，希望對(duì)于設(shè)計(jì)行動(dòng)網(wǎng)頁(yè)者可以提供更多的概念。
?
1. 手機(jī)版網(wǎng)站的需求是什么
※ 我要制作全新的網(wǎng)站，同時(shí)具備傳統(tǒng)網(wǎng)頁(yè)與手機(jī)版網(wǎng)頁(yè)
※ 我要將原本的網(wǎng)站，制作成傳統(tǒng)網(wǎng)頁(yè)與手機(jī)網(wǎng)頁(yè)兼具的網(wǎng)站
※ 我不想變更原有的網(wǎng)站，而是制作一個(gè)額外的手機(jī)網(wǎng)站
這三種情況的制作方式有一些出入，因此請(qǐng)與您的網(wǎng)頁(yè)設(shè)計(jì)公司詳細(xì)商談設(shè)計(jì)的需求，對(duì)于制作的初期會(huì)有很大的幫助
2. 商業(yè)的目的為何
手機(jī)網(wǎng)站制作目的為何？是希望可以品牌形象優(yōu)先、促進(jìn)企業(yè)服務(wù)商機(jī)為優(yōu)先、還是訊息傳遞為優(yōu)先？因?yàn)樾袆?dòng)網(wǎng)頁(yè)的版面，比起一般的網(wǎng)頁(yè)更有限，因此優(yōu)先順序很重要。
就以現(xiàn)代汽車(Hyundai.com)網(wǎng)站來(lái)看，這個(gè)網(wǎng)站的傳統(tǒng)網(wǎng)頁(yè)是以新車的介紹為主，而各類的說(shuō)明文件、經(jīng)銷資訊、客戶服務(wù)等選項(xiàng)則是條列于選單上。接著進(jìn)入網(wǎng)頁(yè)版的畫(huà)面，可以發(fā)現(xiàn)最主要的資訊仍是新車款的照片（經(jīng)過(guò)壓縮）為主，而其馀的選項(xiàng)就消失了。對(duì)于該公司而言汽車是最核心的資訊，因此強(qiáng)調(diào)圖片為該手機(jī)網(wǎng)站的重點(diǎn)。
不同的目的會(huì)有取舍的問(wèn)題，經(jīng)過(guò)企業(yè)的內(nèi)部討論，往往可以得到設(shè)計(jì)上的共識(shí)。
3. 制作前，先閱讀網(wǎng)站的訪客情報(bào)
制作手機(jī)網(wǎng)頁(yè)，最重要的就是滿足手機(jī)族群的需求，而手機(jī)族群所使用的不同裝備，或多或少的影響了設(shè)計(jì)者該以什么樣的工具加以設(shè)計(jì)。
要判斷訪客透過(guò)什么樣的裝置訪問(wèn)您的網(wǎng)站，有一些十分強(qiáng)大的追蹤工具，例如Google Analytics，他能夠告訴你有多少人使用手機(jī)裝置到了您的網(wǎng)站上觀看資料，而且使用的系統(tǒng)以及瀏覽軟體都能清楚統(tǒng)計(jì)，對(duì)于行動(dòng)版網(wǎng)頁(yè)設(shè)計(jì)十分的有助益。
4. 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(自適性網(wǎng)頁(yè)設(shè)計(jì)、RWD）
回饋式的模式被用于商業(yè)與教育界一段時(shí)間，簡(jiǎn)單來(lái)說(shuō)，具有回饋能力的團(tuán)體，能夠根據(jù)團(tuán)體的需求進(jìn)行調(diào)整，達(dá)到最佳的效能表現(xiàn)。
在手機(jī)網(wǎng)頁(yè)設(shè)計(jì)的領(lǐng)域，我們對(duì)于響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(自適性網(wǎng)頁(yè)設(shè)計(jì)、RWD）定義為：不論于任何一種裝置上觀看，例如：不同的解析度、不同的瀏覽器、不同的觀看方向...等，都能夠得到正確的解析度，這一點(diǎn)有許多網(wǎng)頁(yè)技術(shù)都可以做得到，例如CSS與HTML 5都有對(duì)于手機(jī)網(wǎng)頁(yè)的觀看方式加以優(yōu)化。
5. 簡(jiǎn)單是好事，但視覺(jué)表現(xiàn)不打折
就跟傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)一樣，網(wǎng)頁(yè)的檔案大小，越小越好，到了手機(jī)版的行動(dòng)網(wǎng)站，這個(gè)更是重要的關(guān)鍵！因?yàn)槭謾C(jī)的速度不若桌上電腦或筆記電腦，因此設(shè)計(jì)師都十分重視網(wǎng)頁(yè)檔案的大小。
檔案大小的情況也反應(yīng)到了內(nèi)容，因?yàn)楹?jiǎn)單的設(shè)計(jì)往往可以減少網(wǎng)頁(yè)的檔案，因此簡(jiǎn)單、精簡(jiǎn)的內(nèi)容一直是手機(jī)網(wǎng)頁(yè)的設(shè)計(jì)圭臬。
不過(guò)這不表示簡(jiǎn)單的網(wǎng)站就得十分的丑陋，因?yàn)楝F(xiàn)在的CSS3以及HTML 5的進(jìn)步下，手機(jī)版的網(wǎng)頁(yè)可以具有動(dòng)畫(huà)呈現(xiàn)、陰影、漸層等視覺(jué)效果，在不增加手機(jī)運(yùn)算負(fù)擔(dān)與檔案大小的情況下，這都是可行的設(shè)計(jì)技術(shù)。
6. 單行式的手機(jī)網(wǎng)站是當(dāng)今最好的設(shè)計(jì)
雖然今日的手機(jī)尺寸出現(xiàn)了很多變化，但基本上手機(jī)的最常用瀏覽模式仍以直立式的為主，因此網(wǎng)頁(yè)設(shè)計(jì)者，應(yīng)該清楚直式的網(wǎng)頁(yè)設(shè)計(jì)是目前的行動(dòng)版網(wǎng)頁(yè)主流。
此外，也又不少手機(jī)網(wǎng)站擅長(zhǎng)使用書(shū)簽的技巧，讓直立式的手機(jī)版網(wǎng)站，可以借由書(shū)簽的切換達(dá)到更多的功能，也是值得設(shè)計(jì)者參考與學(xué)習(xí)。
7. 垂直堆疊的選單設(shè)計(jì)
行列式的選單，按下后會(huì)將子項(xiàng)目展延，再按一下則會(huì)將目錄收回，這樣的垂直堆疊選單的網(wǎng)頁(yè)設(shè)計(jì)看起來(lái)十分的老套，但卻是不少大企業(yè)與網(wǎng)路使用族群的最愛(ài)。
大家可以到以美國(guó)大聯(lián)盟職棒(mlb.com)的手機(jī)網(wǎng)站，看看堆疊選單的網(wǎng)站，是如此的便利與易用。
8. 從「可點(diǎn)選」變成「可觸碰」
過(guò)去設(shè)計(jì)網(wǎng)頁(yè)總是以滑鼠為最主要的人機(jī)介面，但隨著時(shí)代的改變，觸碰式的筆記電腦、桌上電腦甚至是手機(jī)、平板電腦等，都已經(jīng)十分的普及，設(shè)計(jì)師自然不能用舊有的方式設(shè)計(jì)行動(dòng)版的網(wǎng)頁(yè)。
過(guò)去網(wǎng)頁(yè)設(shè)計(jì)十分愛(ài)用，根據(jù)滑鼠游標(biāo)位置判定「滑鼠懸空」功能，在手機(jī)版的網(wǎng)頁(yè)上是完全無(wú)法發(fā)揮作用的，影響最大的會(huì)是滑鼠經(jīng)過(guò)才會(huì)出現(xiàn)的下拉式選單，因此這也是許多企業(yè)亟欲制作手機(jī)版網(wǎng)頁(yè)的主因之一。
9. 加入互動(dòng)效果
手機(jī)使用者往往希望可以看到比桌上電腦、筆記電腦更多的互動(dòng)視覺(jué)效果，讓他們可以在有限的畫(huà)面上可以看到目前網(wǎng)頁(yè)的變化。舉例來(lái)說(shuō)：按下按鈕的反白效果，或是滑動(dòng)的視覺(jué)頁(yè)面都是非常不錯(cuò)的方式。
此外，也可以設(shè)計(jì)讀取網(wǎng)頁(yè)的畫(huà)面，這對(duì)于頻寬、速度受限的手機(jī)使用者來(lái)說(shuō)，是十分有幫助的設(shè)計(jì)。
10. 測(cè)試你的手機(jī)網(wǎng)站
除了透過(guò)同事的手機(jī)設(shè)備加以測(cè)試外，比較進(jìn)階的設(shè)計(jì)師可以透過(guò)申請(qǐng)SDK的方式來(lái)測(cè)試，或使用各種不同的手機(jī)瀏覽模擬器，來(lái)驗(yàn)證您的行動(dòng)網(wǎng)頁(yè)是否符合手機(jī)與平板電腦平臺(tái)?，F(xiàn)在很多瀏覽器推出了模擬器的功能，可以省下您不少時(shí)間。建設(shè)網(wǎng)站就選北京傳誠(chéng)信saddlebargains.com
