手機(jī)網(wǎng)站制作標(biāo)準(zhǔn)

2021-04-19    分類: 網(wǎng)站制作

手機(jī)網(wǎng)站制作可能會(huì)讓很多設(shè)計(jì)師感到頭痛,尤其是前端,只會(huì)更加頭痛。但是我們都知道,隨著智能手機(jī)的普及,手機(jī)正迅速的成為人們最常用的上網(wǎng)方式,所以,移動(dòng)網(wǎng)站也成為廣大站長和設(shè)計(jì)師的首先目標(biāo)。那么您知道手機(jī)網(wǎng)站制作標(biāo)準(zhǔn)么,我們都知道,手機(jī)的型號(hào)、尺寸、比例等都不一致,尤其是還需要兼容屏蔽的流量,所以手機(jī)網(wǎng)站制作標(biāo)準(zhǔn)非常重要。
在尺寸方面,創(chuàng)新互聯(lián)的手機(jī)網(wǎng)站制作標(biāo)準(zhǔn)是
iphone
1.尺寸以及分辨率 320*480,640*960,640*1136網(wǎng)頁和移動(dòng)的UI用72px
2.界面基本組成元素
iPhone的APP界面一般由狀態(tài)欄、導(dǎo)航欄、主菜單欄和中間的內(nèi)容區(qū)域組成。因?yàn)閷挾仁枪潭ǖ?,所以設(shè)計(jì)開發(fā)起來很方便。
3.字體
32~36px32px,注釋等提示文本28px。
Android
1.尺寸以及分辨率 提到Android的尺寸,480*800、720*1280。點(diǎn)9切圖所有手機(jī)的適配。
Android界面尺寸:480*800、720*1280、1080*1920
2.界面基本組成元素
與ios的一樣,還是有狀態(tài)欄、導(dǎo)航欄和主菜單欄,以720*1280的尺寸,狀態(tài)欄的高度應(yīng)為50px,導(dǎo)航欄的高度96px,主菜單欄的高度96px。
3.字體
采用android原生的字體,與微軟雅黑很像。字體大小范圍為16px~32px
ipad
iPad界面尺寸:1024*768、2048*1536
單位:像素72dpi,在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套,尺寸按自己的手機(jī)來設(shè)計(jì),比較方便預(yù)覽效果,一般用640*960或者640*1136的尺寸來設(shè)計(jì)。
在結(jié)構(gòu)方面,創(chuàng)新互聯(lián)的手機(jī)網(wǎng)站制作標(biāo)準(zhǔn)是:
1.整體形象設(shè)計(jì)
在程序員進(jìn)行詳細(xì)設(shè)計(jì)的同時(shí),網(wǎng)頁設(shè)計(jì)師開始設(shè)計(jì)網(wǎng)站的整體形象和首頁。
整體形象設(shè)計(jì)包括標(biāo)準(zhǔn)字,Logo,標(biāo)準(zhǔn)色彩,廣告語等。 首頁設(shè)計(jì)包括版面,色彩,圖像,動(dòng)態(tài)效果,圖標(biāo)等風(fēng)格設(shè)計(jì),也包括banner,菜單,標(biāo)題,版權(quán)等模塊設(shè)計(jì)。首頁一般設(shè)計(jì)1-3個(gè)不同風(fēng)格。
2.手機(jī)網(wǎng)站開發(fā)制作
手機(jī)網(wǎng)站規(guī)劃設(shè)計(jì)采用軟件工程的設(shè)計(jì)方法,設(shè)計(jì)小組在系統(tǒng)分析和總體設(shè)計(jì)的基礎(chǔ)上,將設(shè)計(jì)任務(wù)分解,分配到設(shè)計(jì)組的每個(gè)成員,各模塊有設(shè)計(jì)組成員單獨(dú)承擔(dān)設(shè)計(jì)和調(diào)試,既有分工,又有協(xié)作,最后將各模塊上載到服務(wù)器上,做鏈接和整體的調(diào)試。
3.手機(jī)網(wǎng)站制作調(diào)試完善
各模塊初步完成后,上傳到服務(wù)器,對(duì)網(wǎng)站進(jìn)行全范圍的測(cè)試。包括速度,兼容性,交互性,鏈接正確性,程序健壯性,超流量測(cè)試等,發(fā)現(xiàn)問題及時(shí)解決并記錄下來。
4.手機(jī)網(wǎng)站制作宣傳推廣
我們創(chuàng)新互聯(lián)具有專業(yè)SEO人員,在架構(gòu)之前會(huì)經(jīng)過SEO人員評(píng)估和調(diào)整,可以讓您的手機(jī)網(wǎng)站更受搜索引擎的親睞,也更加符合后期的宣傳推廣工作的開展。
當(dāng)然,在創(chuàng)新互聯(lián)除了手機(jī)網(wǎng)站制作標(biāo)準(zhǔn)之外,我們還具有手機(jī)網(wǎng)站制作的25個(gè)設(shè)計(jì)要點(diǎn),確保設(shè)計(jì)頁面的完整和整體形象的提升。
1、“行為召喚”內(nèi)容要靠前或居中
對(duì)于移動(dòng)用戶來說,往往很容易忘記菜單選項(xiàng),因此,你應(yīng)該把自己最關(guān)鍵的“行為召喚”內(nèi)容放置在一個(gè)醒目的位置上,這樣用戶就能輕松看到。所以,你需要讓最重要的“行為召喚”內(nèi)容占據(jù)到網(wǎng)站的主體部分上,用戶就能夠快速完成相關(guān)任務(wù)。
2、讓菜單看起來既簡潔又親切
一個(gè)范圍較廣的菜單可能非常適用于桌面網(wǎng)站,但是移動(dòng)用戶可能沒有足夠的耐心來回滑動(dòng)自己的手機(jī),他們不喜歡在查看一長串菜單選項(xiàng)之后才找到自己想要的東西。
3、要讓用戶便于回到主頁
當(dāng)移動(dòng)用戶在你的網(wǎng)站上面導(dǎo)航瀏覽時(shí),他們會(huì)希望可以快速回到之前的主頁上面。馬海祥博客在研究中發(fā)現(xiàn),用戶往往喜歡點(diǎn)擊頁面上的公司Logo,因?yàn)樗麄冇X得這種方式可以直接回到主頁上去,所以你的網(wǎng)站必須也要支持這個(gè)功能,否則,如果用戶點(diǎn)擊了Logo,卻毫無反應(yīng),他們肯定會(huì)覺得非常失望。
4、別讓促銷廣告搶了你網(wǎng)站的風(fēng)頭
促銷活動(dòng)和廣告會(huì)影響你的網(wǎng)站內(nèi)容,也會(huì)影響用戶在網(wǎng)站上的體驗(yàn)。
5、保持搜索功能可見
如果用戶需要尋找一些特殊信息,那么他們就會(huì)使用網(wǎng)站的搜索功能,因此,搜索必須是移動(dòng)網(wǎng)站上最重要的功能之一。
6、確保網(wǎng)站搜索結(jié)果符合用戶預(yù)期
實(shí)際上,用戶似乎并不討厭一頁一頁的翻閱搜索結(jié)果,但是他們更加看重網(wǎng)站返回的搜索結(jié)果是否符合他們的預(yù)期。
7、使用過濾功能提升網(wǎng)站搜索易用性
用戶會(huì)使用搜索過濾功能,這樣可以縮小搜索范圍,返回的搜索結(jié)果也更精準(zhǔn)。不過,你需要確保用戶使用過濾搜索之后,不會(huì)一無所獲。
8、指導(dǎo)用戶去訪問較好的網(wǎng)站搜索結(jié)果
對(duì)于一個(gè)網(wǎng)站而言,用戶有各種各樣的類型,所以,在用戶進(jìn)行搜索的時(shí)候,可以先詢問幾個(gè)相關(guān)問題,這樣可以確保他們的搜索結(jié)果與預(yù)期一致。
9、不要一上來就讓用戶在網(wǎng)站上注冊(cè)
如果你的移動(dòng)網(wǎng)站一上來就讓用戶注冊(cè),那么體驗(yàn)一定非常糟糕。馬海祥博客的研究人員發(fā)現(xiàn),最讓用戶難以接受的就是必須注冊(cè)之后才能訪問網(wǎng)站內(nèi)容。
10、讓用戶能以訪客的身份在你的網(wǎng)站上購物
即便用戶想在你的零售網(wǎng)站上購買商品,但其實(shí),他們?nèi)匀徊幌M?cè)一個(gè)賬戶。用戶會(huì)覺得,如果能夠以訪客的身份購買商品,那么真的是非常方便,簡單,而且快捷。
11、使用已有信息,大程度為用戶提供便利
對(duì)于那些網(wǎng)站注冊(cè)用戶而言,你需要記住他們的偏好。而對(duì)于新用戶而言,你可以提供一個(gè)他們習(xí)慣使用的第三方支付服務(wù)。
12、對(duì)于復(fù)雜任務(wù),使用“點(diǎn)擊撥打電話”功能
如果用戶需要進(jìn)入一個(gè)較為復(fù)雜或是較為敏感的任務(wù)時(shí),你需要提供一個(gè)“點(diǎn)擊撥打電話”的服務(wù)功能。
13、當(dāng)用戶更換不同的移動(dòng)設(shè)備時(shí),確保能夠便捷的完成交易
用戶可能會(huì)在不同的移動(dòng)設(shè)備上訪問你的移動(dòng)網(wǎng)站,因?yàn)槟阈枰峁┮粋€(gè)簡單的方法,讓他們?cè)诓煌O(shè)備上分享信息。
14、信息輸入時(shí)做到流線作業(yè)
如果網(wǎng)站能夠預(yù)先判斷出一些信息,用戶體驗(yàn)就會(huì)非常棒。比如預(yù)先判斷出用戶所在的郵政編碼,或是出生日期等等。在輸入一些信息時(shí),如果能夠做到自動(dòng)輸入,那么體驗(yàn)將會(huì)更加流暢。
15、為每一個(gè)任務(wù)選擇最簡單的輸入方法
如果用戶需要在有限的選擇項(xiàng)內(nèi)做選擇時(shí),最簡單的方式就是點(diǎn)擊選擇,而不是使用文本輸入,或是在下拉框內(nèi)選擇。
16、在需要選擇日期的時(shí)候,提供一個(gè)可視化日歷
當(dāng)用戶在移動(dòng)網(wǎng)站上預(yù)定航班時(shí),很難確定“下周的某一天”是幾月幾號(hào),所以你需要提供一個(gè)可視化日歷供用戶勾選日期。
17、通過標(biāo)簽和實(shí)時(shí)確認(rèn),第一時(shí)間解決輸入錯(cuò)誤
在你的表格框內(nèi),要有提示標(biāo)簽功能,而且在用戶實(shí)際輸入時(shí),可以看見必要且準(zhǔn)確的提示信息。
18、設(shè)計(jì)高效的表格
你要確保自己設(shè)計(jì)的表格不會(huì)出現(xiàn)重復(fù)操作,只提供必輸信息即可,另外你還需要利用自動(dòng)填寫功能。當(dāng)用戶在填寫表格的時(shí)候,最好在屏幕頂部顯示一個(gè)進(jìn)度條,這樣人們就可以知道自己的進(jìn)展。
19、針對(duì)移動(dòng)終端,整體優(yōu)化你的網(wǎng)站
如果你有一個(gè)專門針對(duì)移動(dòng)終端的網(wǎng)站,那么當(dāng)用戶使用移動(dòng)設(shè)備訪問時(shí),肯定比純桌面網(wǎng)站要簡單的多,這點(diǎn)毋庸置疑。
20、不要讓用戶用手捏放屏幕,去放大或縮小圖片
如果用戶需要用手捏放屏幕,去放大或縮小圖片時(shí),有時(shí)會(huì)看不到一些重要信息或相關(guān)的“行為召喚”內(nèi)容,這會(huì)讓用戶感到很失望。
21、你的產(chǎn)品圖像需要支持大圖顯示
顧客想要看看自己買的產(chǎn)品。在零售網(wǎng)站上,用戶希望可以看到分辨率更高的產(chǎn)品圖片,這樣可以看到更多細(xì)節(jié),如果網(wǎng)站不支持產(chǎn)品大圖顯示,肯定會(huì)讓用戶覺得非常失望。
22、告知用戶在哪種屏幕方向上訪問網(wǎng)站最舒服
用戶往往會(huì)在一個(gè)固定的屏幕方向上訪問網(wǎng)站,除非有提示告訴他們切換屏幕方向(比如在觀看視頻的時(shí)候)。
23、讓用戶保持在單獨(dú)一個(gè)瀏覽器窗口里訪問你的網(wǎng)站
在智能手機(jī)上頻繁切換窗口是一件非常麻煩的事兒,而且用戶還有可能找不到如何回到你的網(wǎng)站上去。
24、避免“全網(wǎng)站”標(biāo)簽
用戶一旦看到“全王權(quán)”這個(gè)選項(xiàng),就會(huì)覺得是不是“移動(dòng)網(wǎng)站”是被壓縮的精簡版網(wǎng)站,最終紛紛選擇點(diǎn)擊進(jìn)入“全網(wǎng)站”。
25、你必須要清楚自己為什么需要用戶的地址信息

用戶一般都希望了解,為什么你會(huì)向他們要地理位置信息。比如某用戶在一家旅游網(wǎng)站上面訂其他城市的酒店,但是他就感到很奇怪,因?yàn)檫@個(gè)網(wǎng)站會(huì)要求該用戶提供目前所在的地理位置信息。所以,你需要把網(wǎng)站上地理位置這一欄默認(rèn)為空,然后讓用戶自己選擇,或是為用戶提供一個(gè)清晰的“行為召喚”操作,比如“在我附近查找”,等等。

分享題目:手機(jī)網(wǎng)站制作標(biāo)準(zhǔn)
瀏覽路徑:http://www.muchs.cn/news2/108752.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站制作

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

成都app開發(fā)公司