msu border pic 技術 普通 www. files 特效 hone

一個HTML5頁面從提出到完成上線的流程：>

1、需求方、設計人員、H5實現人員三方共同討論實現方案 2、設計人員出設計圖 3、H5人員按設計圖出H5頁面 4、需求方評估已實現的H5頁面後給予反饋 5、設計人員與H5人員根據反饋進行適當調整 6、發布推廣

如何提出一個合理的微信HTML5頁面設計訴求？

合理分析訴求與公司團隊擁有的資源： 1、需求完成時間； 時間給的越多，項目做的就越紮實，優化的也更好，就像造一座橋，三個星期完工，保質10年，1年完工，保質100年 2、現有技術能力； 根據人員的能力選用合適的技術，以及設計對應能實現的視覺特效 3、工作人員配備； 有些狂拽酷炫屌炸天的特效需要專業的遊戲或影視人員參與制作 4、領導B格 不解釋 5、公司B格 不解釋 好吧以上都是枯燥的敘述，後面會有可愛的喵星人出現，所以往下看吧。

三方需要達成的共識與常識

---

一、手機屏寬度高度不一

由於手機屏大小不一，所以H5頁面所承載的設計圖相應的寬高也會不一樣，是否需要設計多套不同的設計圖以適應不同的手機屏？ 最好的效果肯定是設計多套不同的效果針對不同的屏幕尺寸，但這樣需要大量的人力與時間，而且維護成本太高，不符合大部分團隊的實際情況。 典型的手機屏尺寸如： 導航欄+iphone狀態欄高度： 64px iphone4 屏幕總寬度: 320px 屏幕總高度: 480px 微信網頁可視高度: 416px iphone5 屏幕總寬度: 320px 屏幕總高度: 568px 微信網頁可視高度: 504px iphone6 屏幕總寬度: 375px 屏幕總高度: 667px 微信內網頁可視高度: 603px iphone6 plus 屏幕總寬度: 414px 屏幕總高度: 736px 微信網頁可視高度: 672px samsung galaxy note3 （三喪手機開發者的黑洞。。） 導航欄+Android狀態欄高度： 73px 屏幕總寬度: 360px 屏幕總高度: 640px 微信網頁可視高度: 567px 僅iphone就4個尺寸了，更別說Android陣營的手機了 特別註意：以上不是手機的分辨率單位，而是普通電腦上瀏覽網頁時的像素，這和客戶端Native制作有很大的區別。 比如iphone4,寬度就是320px像素，高度為480px，如果以實際分辨率來設計即640*960來排列設計，實際在H5頁面顯示時會顯得很小。 一般我們都是以用自適應的解決方案，以一套或兩套效果圖適應大部分的屏目，放棄極端屏或對其優雅降級，犧牲一些效果 正因為只有一套或兩套效果圖，團隊、公司擁有的手機型號又是有限的，那麽其它型號的手機顯示效果就需要大家腦補了， 需要需求方腦補一下在特別小的屏或特別大的屏上你當前效果圖的顯示效果。

二、兩種效果圖排列，以及對應的解決方案

1、效果圖水平居中排列設計（較容易實現自適應）

由於是水平居中，則兩邊可以用純色平鋪，不管屏有多寬，都可以以純色填充，這就是最最容易的自適應了。 微軟windows8以上以及windows phone的的大色塊設計很大程度上也是更方便適應不同屏目而采用的方案。

2、效果圖非居中排列設計（相對較難實現自適應）

由於是非水平劇中，內容可能放置在屏幕中任意位置 H5要實現這樣的設計圖並且要適應各種屏幕下各內容的位置、大小比例的正常，就需要計算每個內容元素的位置、大小比例等 實現具體方案是，計算每個內容元素的位置，寬高與整體效果圖的寬高的比例，以百分比的方式定位內容元素及大小 給前端人員的提示：使用SASS或LESS一類的CSS預編譯語言可以減化這些東西的計算 3、H5自帶自適應屬性媒體查詢(Media Query) H5天生就自帶自適應屬性媒體查詢，功能就是可以檢測和過濾不同屏寬或屏高的設備，也即可以為不同屏寬或屏高設定不一樣的布局畫面。 可以根據不同屏幕加載不同的圖片和其它資源，比如下面以喵星人圖片舉例： @media screen and (min-width: 650px) 意思是當屏幕大於等於650像素時顯示的是寬寬的躺著的喵星人 @media screen and (min-width: 465px) 意思是當屏幕大於等於465像素時顯示的是站著的喵星人 @media screen 意思是當不滿足以上條件，即小於465px寬的屏幕上顯示的是盤著的喵星人 媒體查詢，大發好啊.. 有錢大爺，美工殿下就可以根據不同屏幕設計不一樣的效果針對不同屏，從320寬的iphone手機屏到ipad到pc電腦屏，同一個頁面可以根據不同屏顯示不同的效果給用戶 (註：上面的喵星人借（盜）用的是國外演示picture標簽的教程，而picture標簽暫時瀏覽器支持非常糟糕)

三、不同價格手機之間性能差別很大

一份價錢一份貨，低價手機在性能表現上肯定不如價高的旗艦機 如果你的H5頁面還是要分享給低價手機的用戶欣賞或使用，那麽你不得不考慮性能低下的低價Android手機用戶 1、直接減少動態效果，盡量減化交互效果 內容過多會導致加載速度慢，瀏覽時滑動不流暢 2、專門為低性能手機設計不同與高性能手機的H5版本 例如可以對低性能手機直接以一張圖代替活動的內容元素 3、少的內容，炫的表現 切勿堆砌內容，這樣真的很土... 微信H5分享，是一個適合傳播輕量HTML5頁面的地方，少即是多，內容要少，解釋性的東西盡量放在其它地方，比如另開網頁。 如果你一分鐘沒看完，就別告訴別人了，智商問題，我的話你也信？ ------------------------------------------------------------------------------------------------------------------------------ 轉載註明（博客園） Author: sheldon.wang

微信HTML5頁面設計建議