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