【干貨】H5移動(dòng)端頁面設(shè)計(jì)心得分享

2 評(píng)論 59357 瀏覽 92 收藏 12 分鐘

如今H5頁面設(shè)計(jì)已經(jīng)得到大家非常多的關(guān)注,在實(shí)踐中我們也已經(jīng)積累了一些經(jīng)驗(yàn)和教訓(xùn),今天結(jié)合咱們的實(shí)戰(zhàn)案例,從字體,排版,動(dòng)效,音效,適配性,想法這幾個(gè)方面好好聊一聊關(guān)于H5的設(shè)計(jì),希望對(duì)同學(xué)們有幫助。

字體

排版

21jd20150124
在有限的手機(jī)屏幕空間內(nèi),我們積累的經(jīng)驗(yàn)告訴我們最好的效果是簡(jiǎn)單集中,最好有一個(gè)核心元素,中心元素不宜過多,突出重點(diǎn)為最優(yōu)。

20jd20150124
比如JDC的“拍拍十二星座實(shí)用手冊(cè)”的項(xiàng)目,只用了最簡(jiǎn)單的圖形和文字居中擺放。

19jd20150124  以可口可樂的這個(gè)“我們?cè)谶@ 我們?cè)诤酢睘槔?,相較而言,越左邊的排版會(huì)越容易引起關(guān)注。這是因?yàn)槲覀儜卸璧拇竽X里最初看到這種簡(jiǎn)潔排版會(huì)立刻出現(xiàn)“嗯 我可以馬上看完不費(fèi)勁”的潛意識(shí)信息而帶著輕松的態(tài)度去閱讀。

動(dòng)效

17jd20150124  1 / 前期跟前端設(shè)計(jì)師進(jìn)行溝通,討論頁面中元素的動(dòng)效呈現(xiàn)。例如一些元素的位移,旋轉(zhuǎn),翻轉(zhuǎn),縮放,逐楨,淡入淡出,粒子效果,照片處理等等,還有3D展示效果。 (http://fffNaNiscm.com 這個(gè)網(wǎng)站里有h5所能實(shí)現(xiàn)的效果)

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

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

15jd20150124  2 / 背景動(dòng)效其實(shí)比較推薦緩動(dòng)效果,如“京東管培生招聘”的例子里星空中一閃而過的流星,間歇性出現(xiàn)不搶主角風(fēng)頭再好不過了.

14jd20150124  3 /復(fù)雜多變的動(dòng)效不一定是好的,要考慮到加載速度等用戶體驗(yàn)問題。

音效

13jd20150124  1 / 考慮到用戶使用場(chǎng)景的多樣性,那種介紹類的如果要加背景音樂,盡量不要太粗暴。有一點(diǎn)循序漸進(jìn)最好,給用戶留時(shí)間在騷擾別人之前可以關(guān)閉。

或者可以在開始時(shí)是關(guān)閉狀態(tài)。但做游戲h5頁面的時(shí)候,音樂可以沒有關(guān)閉開啟按鈕,因?yàn)橛脩魧?duì)接下來發(fā)生的事是有預(yù)知的。

12jd20150124  2 / 考慮每一頁音樂按鈕放置的明顯性。如果能用其他頁面元素去替代音樂符號(hào)作為按鈕也是極好的。

11jd20150124  3?/ 給前端設(shè)計(jì)師的音樂文件:格式為mp3等 ,單軌,最好30秒以內(nèi) 。為了加載速度,文件大小盡量控制在:100k以內(nèi)最佳,可以用Adobe Audition等軟件來壓縮。作為無限循環(huán)的背景音樂,截取時(shí)一定要注意頭尾得連接得上。

交互

10jd20150124  1 / 展示型: 有很多種不同的交互方式,最常見的是翻頁,這種方式制作起來相對(duì)簡(jiǎn)單,多用于展示一些新的產(chǎn)品,功能,或者活動(dòng)介紹等。技術(shù)上現(xiàn)在市面上已經(jīng)有H5在線生成器,基本上給圖片和文字就可以幫你進(jìn)行處理。

除了翻頁以外,還有點(diǎn)擊,輸入文字,擦除屏幕,滑動(dòng)屏幕等,玩法非常豐富。在“拍拍圣誕活動(dòng)”里就用到了重力感應(yīng),搖一搖可以隨機(jī)判斷,讓用戶有了自己參與的樂趣。

9jd20150124  2 /游戲型:像是起初朋友圈紅過的圍住神經(jīng)貓,或者是我們的“拍拍Jump”這類需要計(jì)算邏輯,得出分?jǐn)?shù)或者結(jié)論的小游戲。

3 /產(chǎn)品型:有一些H5是作為一個(gè)長期運(yùn)營的產(chǎn)品存在的,用戶的訪問可能會(huì)更固定,比如微信里的購物頁面等。

8jd20150124  手機(jī)端之間:一般我們先用640X1136進(jìn)行設(shè)計(jì),參考線會(huì)標(biāo)在960高的地方,主要元素最好不要過高以適配各種機(jī)型。其他安卓機(jī)器前端切圖時(shí)可以適當(dāng)拉伸,變化不會(huì)太大就不用每個(gè)進(jìn)行適配。

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

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

想法

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

最直接的利益驅(qū)動(dòng),分享有獎(jiǎng)或者需要眾籌等,

對(duì)自己有用并且也對(duì)周圍人也會(huì)有新鮮感的信息,

自己參與游戲或者測(cè)試得到的結(jié)果。

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

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

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

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

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

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

3jd20150124  現(xiàn)在H5 頁面,產(chǎn)量頗豐。 H5和app比起來優(yōu)勢(shì)在于開發(fā)周期時(shí)間短,傳播起來有效率,并且在更新迭代的成本上要小很多。特別在游戲上,未來H5會(huì)有更多的可能性。 我們也會(huì)堅(jiān)持去研究和嘗試,不管是新技術(shù),還是更有趣的營銷方式,和大家共勉。

作品來源:京東設(shè)計(jì)中心

原文鏈接:http://www.uisdc.com/html5-case-experience-summary

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 看下未來應(yīng)用官網(wǎng)就可以了啊

    來自北京 回復(fù)
  2. 這個(gè)論壇有非常詳細(xì)的H5制作心得分享,連怎么處理圖片和壓縮音樂都有。
    論壇網(wǎng)址:http://bbs.zhichiwangluo.com/forum.php?mod=viewthread&tid=249&page=1&extra=#pid357

    來自廣東 回復(fù)