H5移動端頁面設計心得分享(轉載)

去年JDC出了很多優秀的武媚娘…不，H5呢，你們都很拼，同時固然也積累了一些經驗和教訓，今天結合我們的實戰案例，從字體，排版，動效，音效，適配性，想法這幾個方面好好聊一聊關於H5的設計，但願對同窗們有幫助。

　　字體

　　排版

　　在有限的手機屏幕空間內，咱們積累的經驗告訴咱們最好的效果是簡單集中，最好有一個核心元素，中心元素不宜過多，突出重點爲最優。

　　好比JDC的「拍拍十二星座實用手冊」的項目，只用了最簡單的圖形和文字居中擺放。

　　以可口可樂的這個「咱們在這 咱們在意」爲例，相較而言，越左邊的排版會越容易引發關注。這是由於咱們懶惰的大腦裏最初看到這種簡潔排版會馬上出現「嗯 我能夠立刻看完不費勁」的潛意識信息而帶着輕鬆的態度去閱讀。

　　動效

　　1 / 前期跟前端設計師進行溝通，討論頁面中元素的動效呈現。例如一些元素的位移，旋轉，翻轉，縮放，逐楨，淡入淡出，粒子效果，照片處理等等，還有3D展現效果。 (http://fffNaNiscm.com 這個網站裏有h5所能實現的效果)

　　好比JDC出品的「京東HR招聘」裏面就用了位移，縮放，淡入淡出的效果。而「京東微店七宗罪」的最慷慨這一屏則是用到了粒子效果，每一個錢幣翻轉下落的速度不同顯得畫面更真實。今年在朋友圈瘋轉的維多利亞和特斯拉的H5用的是擦除的效果，模糊的遮罩足夠挑起人們的好奇心。

　　以上兩款，包括今年最火的H5案例都在這了 >>>《如此風騷!2014年刷爆朋友圈的十大 HTML5 技術案例》

　　2 / 背景動效其實比較推薦緩動效果，如「京東管培生招聘」的例子裏星空中一閃而過的流星，間歇性出現不搶主角風頭再好不過了.

　　3 /複雜多變的動效不必定是好的，要考慮到加載速度等用戶體驗問題。

　　音效

　　1 / 考慮到用戶使用場景的多樣性，那種介紹類的若是要加背景音樂，儘可能不要太粗暴。有一點按部就班最好，給用戶留時間在騷擾別人以前能夠關閉。

　　或者能夠在開始時是關閉狀態。但作遊戲h5頁面的時候，音樂能夠沒有關閉開啓按鈕，由於用戶對接下來發生的事是有預知的。

　　2 / 考慮每一頁音樂按鈕放置的明顯性。若是能用其餘頁面元素去替代音樂符號做爲按鈕也是極好的。

　　給前端設計師的音樂文件：格式爲mp3等 ，單軌，最好30秒之內 。爲了加載速度，文件大小盡可能控制在：100k之內最佳，能夠用Adobe Audition等軟件來壓縮。做爲無限循環的背景音樂，截取時必定要注意頭尾得鏈接得上。

　　交互

　　1 / 展現型: 有不少種不一樣的交互方式，最多見的是翻頁，這種方式製做起來相對簡單，多用於展現一些新的產品，功能，或者活動介紹等。技術上如今市面上已經有H5在線生成器，基本上給圖片和文字就能夠幫你進行處理。

　　除了翻頁之外，還有點擊，輸入文字，擦除屏幕，滑動屏幕等，玩法很是豐富。在「拍拍聖誕活動」裏就用到了重力感應，搖一搖能夠隨機判斷，讓用戶有了本身參與的樂趣。

　　2 /遊戲型：像是起初朋友圈紅過的圍住神經貓，或者是咱們的「拍拍Jump」這類須要計算邏輯，得出分數或者結論的小遊戲。

　　3 /產品型：有一些H5是做爲一個長期運營的產品存在的，用戶的訪問可能會更固定，好比微信裏的購物頁面等。

　　手機端之間：通常咱們先用640X1136進行設計，參考線會標在960高的地方，主要元素最好不要太高以適配各類機型。其餘安卓機器前端切圖時能夠適當拉伸，變化不會太大就不用每一個進行適配。

　　響應式設計：頁面的設計與開發應當根據用戶行爲以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和佈局、圖片、CSS media query的使用等。

　　爲不一樣電子設備單個佈局，儘可能使用純色而非漸變

　　想法

　　被大衆主流樂於分享的信息大概有這麼幾種：

　　最直接的利益驅動，分享有獎或者須要衆籌等，

　　對本身有用而且也對周圍人也會有新鮮感的信息，

　　本身參與遊戲或者測試獲得的結果。

　　不論是分享給朋友或朋友圈仍是QQ對話，讓用戶主動去分享你的帶有很大性質的廣告意味的信息在本身的社交羣體中，此條信息與本身相關而且別人也能參與進來固然是最理想的。

　　可口可樂北極熊求合影的例子就是一個很好的宣傳方式，藉由簡單的合成照片技術讓人們有意願去分享本身努力創做的照片。還有UJEANS的設計延續了品牌的調性就是實用，在選擇你的牛仔褲喜愛時也同時穿插了商品的說明，顯得不那麼生硬，它比較符合理由3。

　　在咱們設計一個H5頁面時，很重要的一點就是站在本身的角度跳出來去看你作的東西，首先一點是你和你周圍的人願意轉發分享這個東西嗎?它有趣嗎?它對其餘人也是有用的信息嗎?

　　在作「1212陪你一二到底」的時候，咱們的設計師要在最後引出有優惠券領取這個信息，前面也用用盡了節操去設計文案和人物，在此體會一下文案的重要性，它是貫穿整個H5的靈魂。第二張圖上的小字「海外大牌 足不出戶購遍全球」是產品想說的硬廣告臺詞，但在小小的手機屏幕裏，碎片時間中，咱們必須先抓人眼球，再抓住人心，因此」身體和快遞，至少一個在路上「。

　　對於展現型和互動型H5來講最重要的仍是想法。對於設計師來講，也許他們給到咱們的只有幾行文字，那時候前期構思這個H5的時間有可能比真正作的時間還要長。

　　好比拍拍網全球同步發售iPhone6的這個消息要作成H5，若是咱們只是作一張炫酷的圖片告訴你們咱們這裏有iphone6分享朋友圈有可能中獎，也會有利益驅動的誘惑讓人去轉發分享。但經過你們的腦爆，咱們將這句話變成「關於Phone6的哥德巴赫猜測」，根據測試結果得出有趣的結論，這樣轉發的並非赤果果的求中獎行爲，還帶着有趣的插圖和本身測出來的殺馬特範，是否是顯得更含蓄更不經意呢。這樣最終轉發的理由上述1，2，3好像都有了呢。

　　今年JDC大概作了十多個H5 頁面，產量頗豐。 H5和app比起來優點在於開發週期時間短，傳播起來有效率，而且在更新迭代的成本上要小不少。特別在遊戲上，將來H5會有更多的可能性。 咱們也會堅持去研究和嘗試，不論是新技術，仍是更有趣的營銷方式，和你們共勉。

　　謝謝你們收看，咱們下期再見~~敬請期待噢!

轉至：http://www.3lian.com/edu/2015/01-26/189969.html