一、認(rèn)識(shí)移動(dòng)端網(wǎng)站
移動(dòng)端網(wǎng)站是指運(yùn)用HTML技術(shù)運(yùn)行在手機(jī)瀏覽器或內(nèi)置瀏覽器內(nèi)的Webapp很多人現(xiàn)在口中總說“H5,適配站”,其實(shí)這樣的叫法并不準(zhǔn)確 因?yàn)閷?shí)際上移動(dòng)端網(wǎng)站使用的更多的是HTML4框架加上CSS和」S語言 那么叫H5實(shí)在是名不副實(shí) 而說是適配，也不盡然 適配原本是指用一套代碼根據(jù)代碼判斷屏幕尺寸和機(jī)型來調(diào)整顯示布局和內(nèi)容的技術(shù)手段 但很多移動(dòng)端適配網(wǎng)頁并不能適應(yīng)PC等其他顯示設(shè)備 但是也需要適
配多種多樣的手機(jī)機(jī)型：iPh ne5\5s\6\Plus 安卓陣營(yíng)（三星note\小米\魅族\VIVO等就是說現(xiàn)在說的移動(dòng)端適配網(wǎng)頁或者H5頁面是一個(gè)約定俗成的概念，就像魚香肉絲中沒有魚一樣 究其本質(zhì)來說，我們目前設(shè)計(jì)的很多移動(dòng)端適配網(wǎng)頁是一種特殊尺寸的網(wǎng)頁設(shè)計(jì)
隨著技術(shù)的日新月異,移動(dòng)端網(wǎng)站顯得越來越有傳播價(jià)值和份量 微信 瀏覽器等平臺(tái)級(jí)產(chǎn)品在手機(jī)端火爆促逬了依靠入口而傳播的移動(dòng)端網(wǎng)站的發(fā)展 其中甚至還有很多實(shí)現(xiàn)了 APP也無法實(shí)現(xiàn)的盈利與推廣，這些都說明移動(dòng)端網(wǎng)站的時(shí)代已經(jīng)來臨但是移動(dòng)端網(wǎng)站的入口主要有以下三個(gè)：1 旗艦應(yīng)用的投放 2 掃描二維碼3 微信朋友圈 其中，旗艦應(yīng)用主要是指不同的母公司會(huì)利用自身的優(yōu)勢(shì)資源APP去推廣旗下的移動(dòng)端適配網(wǎng)頁，如大眾點(diǎn)評(píng) 騰訊新聞客戶端等 掃描二維碼主要是結(jié)合線上線下一切可以掃描的機(jī)遇讓用戶主動(dòng)訪問移動(dòng)端網(wǎng)頁 移動(dòng)端輸入陌生網(wǎng)址的概率幾乎可以忽略不計(jì)微信朋友圈主要是指占中國(guó)用戶70%的移動(dòng)端上網(wǎng)時(shí)長(zhǎng)的微信應(yīng)用內(nèi)互動(dòng)分享的行為如果設(shè)計(jì)出色，很可能獲得病毒傳播，下面就跟著
廈門網(wǎng)站設(shè)計(jì)公司來具體說說吧。
二、誰刷爆了你的朋友圈
從《圍堵神經(jīng)貓》一直到最近流行的《我和你就一個(gè)字》，我們已經(jīng)看到了朋友圈幾乎都被這樣的爆炸性產(chǎn)品引爆了。移動(dòng)端網(wǎng)站大抵分為兩種，一種如上圖中的NAVER手機(jī)適配版，是為了讓用戶從PC使用平移到手機(jī)使用開發(fā)的適配站。如百度適配站、騰訊網(wǎng)適配站等。另一種是專題營(yíng)銷類移動(dòng)網(wǎng)站。這樣的網(wǎng)站的目標(biāo)就是形成病毒傳播，從而擴(kuò)大內(nèi)容對(duì)用戶的影響。國(guó)內(nèi)已經(jīng)陸陸續(xù)續(xù)有很多廣告公司開展了移動(dòng)網(wǎng)站廣告業(yè)務(wù)了。這些網(wǎng)站與功能性網(wǎng)站不一樣，因?yàn)樯芷诙?，需要短時(shí)間內(nèi)引爆眼球，所以在設(shè)計(jì)上追求更加酷炫的效果和動(dòng)效。我們平時(shí)接觸的移動(dòng)適配項(xiàng)目大體不外乎以上兩種了。那么你還知道哪些移動(dòng)端網(wǎng)站呢？
三、如何確定設(shè)計(jì)尺寸
從上表可以看出，IOS設(shè)備里目前國(guó)內(nèi)占比最高的還是iPhone5S所以我丨門在做移動(dòng)端適配網(wǎng)站時(shí)第一優(yōu)先考慮的設(shè)計(jì)尺寸是1136x641^這樣可以帶來最優(yōu)的效果。保證最大份額的用戶看到的效果是最好的。
四、移動(dòng)端網(wǎng)站還要不要導(dǎo)航
我們來看，其實(shí)移動(dòng)端網(wǎng)站的入口和呈現(xiàn)都是特定的。這與原生APP不同，原生APP提供了一個(gè)全屏的區(qū)域，包括可訂制的信息與狀態(tài)欄。而移動(dòng)適配網(wǎng)站必須在瀏覽器或微信內(nèi)使用。所以盡量不要為移動(dòng)端網(wǎng)站設(shè)計(jì)單獨(dú)的Navigation bar,否則就會(huì)和微信或者瀏覽器的Navi重合，用戶看到的就變成了一個(gè)“三明治”。并且如瀏覽器或微信本身已經(jīng)提供了一個(gè)返回按鈕，無需單獨(dú)設(shè)計(jì)。如果還有一些必要的功能性入口，可以嘗試擺放在其它位置。記住，你所設(shè)計(jì)的頁面并非全屏，而是某個(gè)應(yīng)用場(chǎng)景的一部分。以下是兩個(gè)我常用的模板，我把原來的截圖處理成活的區(qū)域，標(biāo)題和圖標(biāo)都可以隱藏和修改。也方便更好地想象出實(shí)際用戶看到的效果。
五、移動(dòng)端選用什么字體好
移動(dòng)端網(wǎng)站應(yīng)該選用什么字體呢？我們知道，盡管安卓的市場(chǎng)份額很大，但是安卓機(jī)是一個(gè)開放的底層系統(tǒng)，不易統(tǒng)一。所以設(shè)計(jì)師通常會(huì)選擇以蘋果手機(jī)iPhone上的顯示效果為準(zhǔn)。那么在模擬iPhone瀏覽器默認(rèn)的文字時(shí)設(shè)計(jì)師就拿不準(zhǔn)應(yīng)該選用什么字體了。在WINDOWS平臺(tái)下設(shè)計(jì)IOS產(chǎn)品是一個(gè)很嚴(yán)重的問題。那就是WINDOWS下暫時(shí)無法完整渲染出蘋果系統(tǒng)的效果。在上圖中我們可以看到，在MAC機(jī)上模擬IOS默認(rèn)字體時(shí)可以直接使用蘋果原生的字體：黑體-簡(jiǎn)(HEITI-SC)。渲染模式選為蘋果渲染模式即可。如果是PC機(jī)需要模擬IOS默認(rèn)字體那么用黑體簡(jiǎn)會(huì)有比較大的出入，反而使用華文細(xì)黑-渾厚模式能比較接近默認(rèn)字體。
首先需要說明的是，由于我們?cè)O(shè)計(jì)圖像時(shí)的屏幕并不是Retina的屏幕，所以我們需要設(shè)計(jì)看起來是12像素大小的文字時(shí)，我們需要在PS里建立一個(gè)24像素的文本框。這就讓我們無法直接看到真實(shí)手機(jī)上顯示的效果了。所以我們需要不斷地存成圖片然后導(dǎo)入到真機(jī)里測(cè)試效果。那么如果我們需要設(shè)計(jì)的移動(dòng)端網(wǎng)站里有很多文字文本，那么多大尺寸的文字才是適合閱讀的呢？那么我認(rèn)為小于22PX是基本難以閱讀的。我們可以看一下網(wǎng)易新聞客戶端和騰訊新聞客戶端的文字配比。這兩個(gè)新聞客戶端的閱讀體驗(yàn)都是非常良好的。嗯，我就是為自家產(chǎn)品打廣告的。
六、移動(dòng)端網(wǎng)站的動(dòng)畫效果要怎么做?
必須要提到雪碧圖了。
CSS雪碧即CSSSprite,也有人叫它CSS精炅，如果網(wǎng)站做這個(gè)小效果
網(wǎng)站建設(shè)費(fèi)用成本是有所提高的哦，雪碧圖是一種(^圖像合并技術(shù)，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來顯示需要顯示的圖片部分。我們來看，如果希望實(shí)現(xiàn)一個(gè)動(dòng)畫，那么我們可以用gif圖像? 但是gif圖像理論上來說只能實(shí)現(xiàn)透明與不透明兩種透明度。而無法實(shí)現(xiàn)多級(jí)透明。多級(jí)透明的圖像格式我們最熟悉的就是png 了。
gif動(dòng)畫的方法就是以下這樣:
使用雪碧圖就是以下這樣的：
那么如何制作出雪碧圖呢？如果是用PS去做動(dòng)畫可以把每幀都導(dǎo)出PN G 然后打開圖像大小查看 每個(gè)導(dǎo)出的幀的寬度是一致的。假如是300像素寬 一共有4幀 那么就新建一個(gè)1200幀寬的圖將四個(gè)幀并列擺好 并保證間距都是一樣的。
然后前端工程師會(huì)讓這個(gè)圖輪番顯示，每隔300px為一個(gè)幀。如果你沒有對(duì)齊，就會(huì)有跳幀的情況。
那么使用雪碧圖除了可以支持多級(jí)透明的png之外還有什么好處昵？
1、減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)可以合并多數(shù)背景圖片和小圖標(biāo)，方便在任何位置使用I這樣不同位置的請(qǐng)求只需要調(diào)用一個(gè)圖片，從而減少對(duì)服務(wù)器的請(qǐng)求次數(shù)，降低服務(wù)器壓力，同時(shí)提高了頁面的加載速度，節(jié)約服務(wù)器的流量。
2、提高頁面的加載速度sprite技術(shù)的其中一個(gè)好處是圖片的加載時(shí)間(在有許多sprite時(shí)，單張圖片的加載時(shí)間由所需圖片拼成的一張GIF圖片的尺寸會(huì)明顯小于所有圖片拼合前的大小。單張的GIF只有相關(guān)的一個(gè)色表，而單獨(dú)分割的每一張GIF都有自己的一個(gè)色表，這就增加了總體的大小。因此，單獨(dú)的一張JPEG或者PNG sprite在大小上非?？赡鼙劝岩粡垐D分成多張得來的圖片總尺寸小。
3、減少鼠標(biāo)滑過的一些bugIE6不會(huì)主動(dòng)預(yù)加載鼠標(biāo)滑過即a:hover中的背景圖片 所以’如果使用多張圖片鼠標(biāo)滑過會(huì)出現(xiàn)閃白的現(xiàn)象。使用CSS雪碧，由于一張圖片即可，所以不會(huì)出現(xiàn)這種現(xiàn)象。(以上部分資料來自百度百科）
那么是不是使用雪碧圖就是絕對(duì)好的呢？
也不盡然。如果幀數(shù)太多，會(huì)消耗很大的內(nèi)存。用戶手機(jī)會(huì)很卡。所以幀數(shù)一定要控制少。如果你的動(dòng)作設(shè)計(jì)了 12幀，那么我建議你可以試試將2,4,6,8,10刪除。當(dāng)然了，雪碧圖只是一種常見的網(wǎng)頁端實(shí)現(xiàn)動(dòng)畫的方式，其他的方式還有視頻格式插入、gif動(dòng)畫插入、css純動(dòng)畫插入等方式，這需要同開發(fā)協(xié)作溝通。
七、有問題？請(qǐng)教前端工程師
好多朋友問我：切圖按什么尺寸切呀？ H5制作得多久啁？測(cè)試誰來做?。孔煮w用啥呀？回答一律是：不知道。問你捫家前端工程師。原因是每個(gè)工程師有他們自己的工作習(xí)慣，更何況每個(gè)團(tuán)隊(duì)有自己的規(guī)范。那么面臨的前端工程師不同，對(duì)一個(gè)問題的解決方案也不盡相同。所以如果有問題，問你們家的前端工程師好了。我真的沒辦法給一個(gè)準(zhǔn)確的答案。不過如果有前端工程師也拿不太準(zhǔn)的，可以參考一下上邊我說的一些關(guān)于移動(dòng)端適配站的我的思路和解決方案。那也是極好的。作為設(shè)計(jì)師的我們，現(xiàn)在處在風(fēng)口浪尖上。小米說，在風(fēng)口上豬都會(huì)飛。說的是互聯(lián)網(wǎng)現(xiàn)在處在飛速發(fā)展的階段，機(jī)會(huì)和挑戰(zhàn)史無前例的多。那么新的技術(shù)出現(xiàn)就需要我們?nèi)チ私庹莆账奶攸c(diǎn)，這樣才不會(huì)被時(shí)代淘汰，才能抓住機(jī)會(huì)成為優(yōu)秀設(shè)計(jì)師。
簽約“崢嶸歲月(瑞金)”網(wǎng)站設(shè)計(jì)
網(wǎng)站設(shè)計(jì)師必看 手機(jī)網(wǎng)站設(shè)計(jì)規(guī)范