2013-05-14 分類: 手機(jī)網(wǎng)站建設(shè)
使用手機(jī)上網(wǎng)的人越來越多,這疑問著企業(yè)除了設(shè)計(jì)電腦版網(wǎng)頁外,還需要進(jìn)行手機(jī)版網(wǎng)站設(shè)計(jì)。很多網(wǎng)站設(shè)計(jì)師在設(shè)計(jì)手機(jī)版網(wǎng)站時,都會先認(rèn)真研究一番手機(jī)網(wǎng)頁及電腦網(wǎng)頁的不同之處。那么,與電腦網(wǎng)頁相比,手機(jī)網(wǎng)站設(shè)計(jì)需要注意什么呢?
手機(jī)網(wǎng)站設(shè)計(jì)需要注意什么?
1. 確定網(wǎng)站設(shè)計(jì)內(nèi)容、方向及類型
設(shè)計(jì)手機(jī)網(wǎng)頁之前,首先需要確定一下網(wǎng)站設(shè)計(jì)的大致方向,如:
全新網(wǎng)站設(shè)計(jì)——是為某產(chǎn)品或品牌重新設(shè)計(jì)網(wǎng)頁嗎?是否包括電腦網(wǎng)頁及手機(jī)網(wǎng)頁都要設(shè)計(jì),還是選其一?
網(wǎng)站設(shè)計(jì)改版——是否從舊網(wǎng)頁中取材,重新設(shè)計(jì)電腦網(wǎng)頁及手機(jī)網(wǎng)頁?
只增加手機(jī)網(wǎng)頁——原有電腦網(wǎng)頁不改變,是否只需要增加手機(jī)網(wǎng)頁即可?
以上不同情況都有不同的設(shè)計(jì)策略,網(wǎng)站設(shè)計(jì)師進(jìn)行手機(jī)網(wǎng)站設(shè)計(jì)前,一定要厘清到底處于哪種情況設(shè)計(jì)手機(jī)網(wǎng)頁。
2. 確定網(wǎng)站形象
設(shè)計(jì)企業(yè)網(wǎng)站前,首先要注意公司的形象以及產(chǎn)品的特色,若該企業(yè)的主營產(chǎn)品是汽車,網(wǎng)站形象就要給消費(fèi)者鮮明的汽車形象,讓大家知道它的汽車與其他牌子汽車的不同之處。
確定好電腦網(wǎng)頁形象后,就需要確定手機(jī)網(wǎng)頁形象,一般來說兩者所表達(dá)的內(nèi)容其實(shí)大同小異。唯一不同的是,手機(jī)網(wǎng)頁無需太多復(fù)雜的元素,僅僅突出公司形象,吸引用戶眼球。
3. 設(shè)計(jì)手機(jī)版網(wǎng)頁前需預(yù)測網(wǎng)站流量
如果以舊有電腦版網(wǎng)站為藍(lán)本,設(shè)計(jì)手機(jī)版網(wǎng)頁前建議先使用GA(Google Analytics)或其他工具對用戶進(jìn)行背景調(diào)查(通常,掌握用戶的數(shù)據(jù)越多,對電腦版網(wǎng)站制作的效果越好)。
了解各種數(shù)據(jù),在設(shè)計(jì)手機(jī)網(wǎng)站時就可清晰知道,根據(jù)不同裝置的需求,對網(wǎng)站部分內(nèi)容進(jìn)行額外的加強(qiáng)。
4. 使用響應(yīng)式網(wǎng)站設(shè)計(jì)
每年各大手機(jī)品牌商都會推出不同型號的手機(jī),網(wǎng)站設(shè)計(jì)要適應(yīng)每種手機(jī)或?yàn)g覽器,是一份量大且難度極高的工作。但使用響應(yīng)式網(wǎng)站設(shè)計(jì),就能好地解決這種事情。
5. 設(shè)計(jì)簡單但不簡陋
設(shè)計(jì)手機(jī)版網(wǎng)頁的關(guān)鍵就是簡單,畢竟手機(jī)屏幕絕對不可能比電腦螢?zāi)淮螅姨幚砥饕膊粫入娔X好,所以手機(jī)網(wǎng)站設(shè)計(jì)一定要簡單化,檔案要越小越好,網(wǎng)頁加載時間也要越短越好。
不過,簡單不代表手機(jī)網(wǎng)頁就要健腦,嘗試減少對圖片或Javascript的依賴,可輕松完成多背景、圓角、3D動畫、文字陰影等設(shè)計(jì)特色。
6. 采用單欄式設(shè)計(jì)
手機(jī)網(wǎng)頁采用單欄式設(shè)計(jì),能在有限的行動裝置畫面上閱讀并操作網(wǎng)頁。手機(jī)網(wǎng)頁出現(xiàn)太多欄位,對部分用戶而言是難以操作的,再者個別欄位的字體變小也不好閱讀。
7. 善用漢堡包菜單
網(wǎng)頁欄目太多,可選擇使用「漢堡包菜單」,將多余的標(biāo)簽隱藏在重點(diǎn)/主題選項(xiàng)下,方便用戶選取想要的資訊。設(shè)計(jì)漢堡包菜單時,盡量采用直式設(shè)計(jì),不要讓用戶左右劃動頁面,才能看完一行字。
8. 按鍵要明顯易按
電腦網(wǎng)頁在選取功能時,可透過滑鼠移動按鍵上方,但不一定按下(hover),另外,滑鼠可以按左鍵、右鍵以及滑動軸選取功能。但手機(jī)網(wǎng)頁只有「點(diǎn)擊」這一特性,所以設(shè)計(jì)手機(jī)網(wǎng)頁時,一定要留意這個按鍵特性。
9. 提供視覺反饋按鍵
電腦網(wǎng)頁點(diǎn)擊按鈕時,按鈕顏色會出現(xiàn)變化,告知用戶已成功點(diǎn)擊該按鈕。同樣,手機(jī)網(wǎng)頁也建議這種設(shè)計(jì)方式,方便用戶了了解網(wǎng)頁瀏覽情況。
另外,網(wǎng)頁載入時,用戶點(diǎn)擊或選取按鈕后,網(wǎng)頁都會開始Loading,這是可設(shè)計(jì)一些代表企業(yè)形象的圖案或動畫,讓用戶知道網(wǎng)頁正在加載,避免用戶重復(fù)點(diǎn)擊按鈕,延長載入時間。
10. 測試網(wǎng)頁性能
網(wǎng)頁完成后,就需要對網(wǎng)頁進(jìn)行各項(xiàng)性能的測試,確保網(wǎng)頁所有功能都能正常運(yùn)作。雖然市面有很多不同型號的手機(jī),都每臺手機(jī)都進(jìn)行測試,似乎太浪費(fèi)精力和時間。
這是可通過測試軟體或網(wǎng)頁版模擬器的輔助,對手機(jī)網(wǎng)頁進(jìn)行測試并修改各種Bug。
事實(shí)上,手機(jī)網(wǎng)站設(shè)計(jì)和電腦網(wǎng)站設(shè)計(jì)確實(shí)存在很多不同點(diǎn),這也需要網(wǎng)站設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站過程中,不斷發(fā)掘并參考目前用戶的使用體驗(yàn),才能設(shè)計(jì)出受人歡迎的手機(jī)網(wǎng)站設(shè)計(jì)。
分享名稱:手機(jī)網(wǎng)站設(shè)計(jì)注意事項(xiàng):小心這十點(diǎn)
網(wǎng)站URL:http://vcdvsql.cn/news42/7342.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容