寫給「有錢大爺」、」美工殿下」、「前端文藝青年」的微信HTML5頁面設計建議

==============================

 

2018更新 iphone X 的設計內容

 

==============================

 

 

我保證你一分鐘就能看完這篇文章! 真的..

 

角色解釋：

需求方：有錢大爺

設計人員：美工殿下

前端工程師：前端文藝青年

 

---

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

 

一、需求方、設計人員、H5實現人員三方共同討論實現方案

二、設計人員出設計圖

三、H5人員按設計圖出H5頁面

四、需求方評估已實現的H5頁面後給予反饋

五、設計人員與H5人員根據反饋進行適當調整

六、發佈推廣

 

 

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

 

合理分析訴求與公司團隊擁有的資源：

一、需求完成時間；

時間給的越多，項目作的就越紮實，優化的也更好，就像造一座橋，三個星期完工，保質10年，1年完工，保質100年

 

二、現有技術能力；

根據人員的能力選用合適的技術，以及設計對應能實現的視覺特效

 

三、工做人員配備；

有些狂拽酷炫屌炸天的特效須要專業的遊戲或影視人員參與制做

 

四、領導B格

不解釋

 

五、公司B格

不解釋

 

 

好吧以上都是枯燥的敘述，後面會有可愛的喵星人出現，因此往下看吧。

 

 

 

 

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

---

 

1、手機屏寬度高度不一

因爲手機屏大小不一，因此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

 

 

特別注意：「推薦設計稿」大小是以微信可視區爲基準

 

 

通常咱們都是以用自適應的解決方案，以一套或兩套效果圖適應大部分的屏目，放棄極端屏或對其優雅降級，犧牲一些效果

 

正由於只有一套或兩套效果圖，團隊、公司擁有的手機型號又是有限的，那麼其它型號的手機顯示效果就須要你們腦補了，

須要需求方腦補一下在特別小的屏或特別大的屏上你當前效果圖的顯示效果。

 

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

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

因爲是水平居中，則兩邊能夠用純色平鋪，無論屏有多寬，均可以以純色填充，這就是最最容易的自適應了。

微軟windows8以上以及windows phone的的大色塊設計很大程度上也是更方便適應不一樣屏目而採用的方案。

 

 

 

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

因爲是非水平劇中，內容可能放置在屏幕中任意位置

H5要實現這樣的設計圖而且要適應各類屏幕下各內容的位置、大小比例的正常，就須要計算每一個內容元素的位置、大小比例等

 

實現具體方案是，計算每一個內容元素的位置，寬高與總體效果圖的寬高的比例，以百分比的方式定位內容元素及大小

 

給前端人員的提示：使用SASS或LESS一類的CSS預編譯語言能夠減化這些東西的計算， 推薦使用"rem單位自適應"解決方案

 

 

三、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標籤暫時瀏覽器支持很是糟糕)

3、不一樣價格手機之間性能差異很大

一份價錢一份貨，低價手機在性能表現上確定不如價高的旗艦機

 

若是你的H5頁面仍是要分享給低價手機的用戶欣賞或使用，那麼你不得不考慮性能低下的低價Android手機用戶

一、直接減小動態效果，儘可能減化交互效果

內容過多會致使加載速度慢，瀏覽時滑動不流暢

 

二、專門爲低性能手機設計不一樣與高性能手機的H5版本

例如能夠對低性能手機直接以一張圖代替活動的內容元素

 

三、少的內容，炫的表現

切勿堆砌內容，這樣真的很土...

微信H5分享，是一個適合傳播輕量HTML5頁面的地方，少便是多，內容要少，解釋性的東西儘可能放在其它地方，好比另開網頁。

 

 

若是你一分鐘沒看完，就別告訴別人了，智商問題，個人話你也信？

 

------------------------------------------------------------------------------------------------------------------------------

轉載註明（博客園）

Author: sheldon.wang

Mail: willian12345@126.com

------------------------------------------------------------------------------------------------------------------------------