心得分享，H5移動端頁面設(shè)計心得分享(3)

響應(yīng)式設(shè)計：頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺、屏幕尺寸、屏幕定向等）進行相應(yīng)的響應(yīng)和調(diào)整。具體的實踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。

為不同電子設(shè)備單個布局，盡量使用純色而非漸變

被大眾主流樂于分享的信息大概有這么幾種：

最直接的利益驅(qū)動，分享有獎或者需要眾籌等，對自己有用并且也對周圍人也會有新鮮感的信息，自己參與游戲或者測試得到的結(jié)果。

不管是分享給朋友或朋友圈還是QQ對話，讓用戶主動去分享你的帶有很大性質(zhì)的廣告意味的信息在自己的社交群體中，此條信息與自己相關(guān)并且別人也能參與進來當(dāng)然是最理想的。

可口可樂北極熊求合影的例子就是一個很好的宣傳方式，借由簡單的合成照片技術(shù)讓人們有意愿去分享自己努力創(chuàng)作的照片。還有UJEANS的設(shè)計延續(xù)了品牌的調(diào)性就是實用，在選擇你的牛仔褲喜好時也同時穿插了商品的說明，顯得不那么生硬，它比較符合理由3。

在我們設(shè)計一個H5頁面時，很重要的一點就是站在自己的角度跳出來去看你做的東西，首先一點是你和你周圍的人愿意轉(zhuǎn)發(fā)分享這個東西嗎？它有趣嗎？它對其他人也是有用的信息嗎？

在做“1212陪你一二到底”的時候，我們的設(shè)計師要在最后引出有優(yōu)惠券領(lǐng)取這個信息，前面也用用盡了節(jié)操去設(shè)計文案和人物，在此體會一下文案的重要性，它是貫穿整個H5的靈魂。第二張圖上的小字“海外大牌 足不出戶購遍全球”是產(chǎn)品想說的硬廣告臺詞，但在小小的手機屏幕里，碎片時間中，我們必須先抓人眼球，再抓住人心，所以”身體和快遞，至少一個在路上“。

對于展示型和互動型H5來說最重要的還是想法。對于設(shè)計師來說，也許他們給到我們的只有幾行文字，那時候前期構(gòu)思這個H5的時間有可能比真正做的時間還要長。

比如拍拍網(wǎng)全球同步發(fā)售iPhone6的這個消息要做成H5，如果我們只是做一張炫酷的圖片告訴大家我們這里有iphone6分享朋友圈有可能中獎，也會有利益驅(qū)動的誘惑讓人去轉(zhuǎn)發(fā)分享。但通過大家的腦爆，我們將這句話變成“關(guān)于Phone6的哥德巴赫猜想”，根據(jù)測試結(jié)果得出有趣的結(jié)論，這樣轉(zhuǎn)發(fā)的并不是赤果果的求中獎行為，還帶著有趣的插圖和自己測出來的殺馬特范，是不是顯得更含蓄更不經(jīng)意呢。這樣最終轉(zhuǎn)發(fā)的理由上述1，2，3好像都有了呢。

今年JDC大概做了十多個H5 頁面，產(chǎn)量頗豐。 H5和app比起來優(yōu)勢在于開發(fā)周期時間短，傳播起來有效率，并且在更新迭代的成本上要小很多。特別在游戲上，未來H5會有更多的可能性。 我們也會堅持去研究和嘗試，不管是新技術(shù)，還是更有趣的營銷方式，和大家共勉。
謝謝大家收看，我們下期再見~~敬請期待噢！