==============================
2018更新 iphone X 的設計內容
==============================
我保證你一分鐘就能看完這篇文章! 真的..
角色解釋：
需求方：有錢大爺
設計人員：美工殿下
前端工程師：前端文藝青年
一個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
推薦設計稿大小x2：
640*832
iphone5
螢幕總寬度: 320px
螢幕總高度: 568px
微信網頁可視高度: 504px
推薦設計稿大小x2：
640*1008
iphone6
螢幕總寬度: 375px
螢幕總高度: 667px
微信內網頁可視高度: 603px
推薦設計稿大小x2：
750*1206
iphone6 plus
螢幕總寬度: 414px
螢幕總高度: 736px
微信網頁可視高度: 672px
推薦設計稿大小x2：
828 * 1344
iphoneX
螢幕總寬度: 375px
螢幕總高度: 812px
微信網頁(可用)高度: 724px （注意：將body顏色設定成黑色，這樣可忽略iphone x的“頭頂劉海”和“下巴一橫”）
推薦設計稿大小x2：
750 * 1448
iphone 的高度相對於其它手機來說特別的高，所以必須得特別適配，我一般用css的media query去專門寫一套針對iphone X的樣式
samsung galaxy note3 （三喪手機開發者的黑洞。。）
導航欄+Android狀態列高度： 73px
螢幕總寬度: 360px
螢幕總高度: 640px
微信網頁可視高度: 567px
特別注意：“推薦設計稿”大小是以微信可視區為基準
一般我們都是以用自適應的解決方案，以一套或兩套效果圖適應大部分的屏目，放棄極端屏或對其優雅降級，犧牲一些效果
正因為只有一套或兩套效果圖，團隊、公司擁有的手機型號又是有限的，那麼其它型號的手機顯示效果就需要大家腦補了，
需要需求方腦補一下在特別小的屏或特別大的屏上你當前效果圖的顯示效果。
二、兩種效果圖排列，以及對應的解決方案
1、效果圖水平居中排列設計（較容易實現自適應）
由於是水平居中，則兩邊可以用純色平鋪，不管屏有多寬，都可以以純色填充，這就是最最容易的自適應了。
微軟windows8以上以及windows phone的的大色塊設計很大程度上也是更方便適應不同屏目而採用的方案。
2、效果圖非居中排列設計（相對較難實現自適應）
由於是非水平劇中，內容可能放置在螢幕中任意位置
H5要實現這樣的設計圖並且要適應各種螢幕下各內容的位置、大小比例的正常，就需要計算每個內容元素的位置、大小比例等
實現具體方案是，計算每個內容元素的位置，寬高與整體效果圖的寬高的比例，以百分比的方式定位內容元素及大小
給前端人員的提示：使用SASS或LESS一類的CSS預編譯語言可以減化這些東西的計算，推薦使用"rem單位自適應"解決方案
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
Mail: willian12345@126.com
------------------------------------------------------------------------------------------------------------------------------