html5微信頁(yè)面設(shè)計(jì)

《html5微信頁(yè)面設(shè)計(jì)》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫(kù)。

1、我保證你一分鐘就能看完這篇文章!真的..?角色解釋?zhuān)盒枨蠓剑河绣X(qián)大爺設(shè)計(jì)人員：美工殿下前端工程師：前端文藝青年?一個(gè)HTML5頁(yè)面從提出到完成上線(xiàn)的流程：?1、需求方、設(shè)計(jì)人員、H5實(shí)現(xiàn)人員三方共同討論實(shí)現(xiàn)方案2、設(shè)計(jì)人員出設(shè)計(jì)圖3、H5人員按設(shè)計(jì)圖出H5頁(yè)面4、需求方評(píng)估已實(shí)現(xiàn)的H5頁(yè)面后給予反饋5、設(shè)計(jì)人員與H5人員根據(jù)反饋進(jìn)行適當(dāng)調(diào)整6、發(fā)布推廣??如何提出一個(gè)合理的微信HTML5頁(yè)面設(shè)計(jì)訴求？?合理分析訴求與公司團(tuán)隊(duì)擁有的資源：1、需求完成時(shí)間；時(shí)間給的越多，項(xiàng)目做的就越扎實(shí)，優(yōu)化的也更好

2、，就像造一座橋，三個(gè)星期完工，保質(zhì)10年，1年完工，保質(zhì)100年?2、現(xiàn)有技術(shù)能力；根據(jù)人員的能力選用合適的技術(shù)，以及設(shè)計(jì)對(duì)應(yīng)能實(shí)現(xiàn)的視覺(jué)特效?3、工作人員配備；有些狂拽酷炫屌炸天的特效需要專(zhuān)業(yè)的游戲或影視人員參與制作?4、領(lǐng)導(dǎo)B格不解釋?5、公司B格不解釋??好吧以上都是枯燥的敘述，后面會(huì)有可愛(ài)的喵星人出現(xiàn)，所以往下看吧。????三方需要達(dá)成的共識(shí)與常識(shí)?一、手機(jī)屏寬度高度不一由于手機(jī)屏大小不一，所以H5頁(yè)面所承載的設(shè)計(jì)圖相應(yīng)的寬高也會(huì)不一樣，是否需要設(shè)計(jì)多套不同的設(shè)計(jì)圖以適應(yīng)不同的手機(jī)屏？最好

3、的效果肯定是設(shè)計(jì)多套不同的效果針對(duì)不同的屏幕尺寸，但這樣需要大量的人力與時(shí)間，而且維護(hù)成本太高，不符合大部分團(tuán)隊(duì)的實(shí)際情況。?典型的手機(jī)屏尺寸如：導(dǎo)航欄+iphone狀態(tài)欄高度：64px?iphone4屏幕總寬度:320px屏幕總高度:480px微信網(wǎng)頁(yè)可視高度:416px?iphone5屏幕總寬度:320px屏幕總高度:568px微信網(wǎng)頁(yè)可視高度:504px?iphone6屏幕總寬度:375px屏幕總高度:667px微信內(nèi)網(wǎng)頁(yè)可視高度:603px?iphone6plus屏幕總寬度:414px屏幕

4、總高度:736px微信網(wǎng)頁(yè)可視高度:672px?samsunggalaxynote3（三喪手機(jī)開(kāi)發(fā)者的黑洞。。）導(dǎo)航欄+Android狀態(tài)欄高度：73px屏幕總寬度:360px屏幕總高度:640px微信網(wǎng)頁(yè)可視高度:567px?僅iphone就4個(gè)尺寸了，更別說(shuō)Android陣營(yíng)的手機(jī)了?特別注意：以上不是手機(jī)的分辨率單位，而是普通電腦上瀏覽網(wǎng)頁(yè)時(shí)的像素，這和客戶(hù)端Native制作有很大的區(qū)別。比如iphone4,寬度就是320px像素，高度為480px，如果以實(shí)際分辨率來(lái)設(shè)計(jì)即640*960來(lái)排

5、列設(shè)計(jì)，實(shí)際在H5頁(yè)面顯示時(shí)會(huì)顯得很小。?一般我們都是以用自適應(yīng)的解決方案，以一套或兩套效果圖適應(yīng)大部分的屏目，放棄極端屏或?qū)ζ鋬?yōu)雅降級(jí)，犧牲一些效果?正因?yàn)橹挥幸惶谆騼商仔Ч麍D，團(tuán)隊(duì)、公司擁有的手機(jī)型號(hào)又是有限的，那么其它型號(hào)的手機(jī)顯示效果就需要大家腦補(bǔ)了，需要需求方腦補(bǔ)一下在特別小的屏或特別大的屏上你當(dāng)前效果圖的顯示效果。?二、兩種效果圖排列，以及對(duì)應(yīng)的解決方案1、效果圖水平居中排列設(shè)計(jì)（較容易實(shí)現(xiàn)自適應(yīng)）由于是水平居中，則兩邊可以用純色平鋪，不管屏有多寬，都可以以純色填充，這就是最最容易的自

6、適應(yīng)了。微軟windows8以上以及windowsphone的的大色塊設(shè)計(jì)很大程度上也是更方便適應(yīng)不同屏目而采用的方案。???2、效果圖非居中排列設(shè)計(jì)（相對(duì)較難實(shí)現(xiàn)自適應(yīng)）由于是非水平劇中，內(nèi)容可能放置在屏幕中任意位置H5要實(shí)現(xiàn)這樣的設(shè)計(jì)圖并且要適應(yīng)各種屏幕下各內(nèi)容的位置、大小比例的正常，就需要計(jì)算每個(gè)內(nèi)容元素的位置、大小比例等?實(shí)現(xiàn)具體方案是，計(jì)算每個(gè)內(nèi)容元素的位置，寬高與整體效果圖的寬高的比例，以百分比的方式定位內(nèi)容元素及大小?給前端人員的提示：使用SASS或LESS一類(lèi)的CSS預(yù)編譯語(yǔ)言可以

7、減化這些東西的計(jì)算?3、H5自帶自適應(yīng)屬性媒體查詢(xún)(MediaQuery)H5天生就自帶自適應(yīng)屬性媒體查詢(xún)，功能就是可以檢測(cè)和過(guò)濾不同屏寬或屏高的設(shè)備，也即可以為不同屏寬或屏高設(shè)定不一樣的布局畫(huà)面?？梢愿鶕?jù)不同屏幕加載不同的圖片和其它資源，比如下面以喵星人圖片舉例：?@mediascreenand(min-width:650px)意思是當(dāng)屏幕大于等于650像素時(shí)顯示的是寬寬的躺著的喵星人@mediascreenand(min-width:465px)意思是當(dāng)屏幕大于等于465像素時(shí)顯示的是站著的喵

8、星人@mediascreen意思是當(dāng)不滿(mǎn)足以上條件，即小于465px寬的屏幕上顯示的是盤(pán)著的喵星人?媒體查詢(xún)，大發(fā)好啊..有錢(qián)大爺，美工殿下就可以根據(jù)不同屏幕設(shè)計(jì)不一樣的效果針對(duì)不同屏，從320寬的iphone手機(jī)屏到ipad到pc電腦屏，同一個(gè)頁(yè)面可以根據(jù)不同屏顯示不同的效果給用戶(hù)(注：上面的喵星人借（盜）用的是國(guó)外演示picture標(biāo)簽的教程，而picture標(biāo)簽暫時(shí)瀏覽器支持非常糟糕)三、不同價(jià)格手機(jī)之間性能差別很大一份價(jià)錢(qián)一份貨，低價(jià)手機(jī)在性能表現(xiàn)上肯定不如價(jià)高的旗艦機(jī)?如