超多案例,強解H5移動端頁面設計!

錄入時間:2016-05-15點擊:
網站類型:企業通用
完成時間:2015年10月
您當前位置:首頁新聞中心公司新聞
項目簡介: 這里是客戶網的描述,在后臺進行編輯,圖片也在這里插入,自己注意排版,發布后要記得更新?。?!這里是客戶網的描述,在后臺進行編輯,圖片也在這里插入,自己注意排版,發布后要記得更新?。?!
20150227

  去年JDC出了不少優秀的武媚娘…不,H5呢,大家都很拼,同時當然也積累了一些經驗和教訓,今天結合咱們的實戰案例,從字體,排版,動效,音效,適配性,想法這幾個方面好好聊一聊關于H5的設計,希望對同學們有幫助。

  字體

1

  排版

2

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

3

  比如JDC的“拍拍十二星座實用手冊”的項目,只用了最簡單的圖形和文字居中擺放。

4

  以可口可樂的這個“我們在這 我們在乎”為例,相較而言,越左邊的排版會越容易引起關注。這是因為我們懶惰的大腦里最初看到這種簡潔排版會立刻出現“嗯
我可以馬上看完不費勁”的潛意識信息而帶著輕松的態度去閱讀。

  動效

5

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

6

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

7

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

8

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

  音效

9

  1 / 考慮到用戶使用場景的多樣性,那種介紹類的如果要加背景音樂,盡量不要太粗暴。有一點循序漸進最好,給用戶留時間在騷擾別人之前可以關閉。

  或者可以在開始時是關閉狀態。但做游戲h5頁面的時候,音樂可以沒有關閉開啟按鈕,因為用戶對接下來發生的事是有預知的。

10

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

11

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

  交互

12

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

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


*
* *
電話:18972069108    QQ:2556905986    郵箱:2556905986@qq.com
Copyright @ 2012-2017 weihu8.net 襄陽速維信息技術有限公司 版權所有 備案號:鄂ICP備16010930號-1
地址:湖北省襄陽市樊城區七里河路南港寫字樓
泰达币中国认可吗 888真人娱乐成百家乐 广西快乐10分官方网 2021会恢复互联网彩票吗 新西兰五分彩开奖软件 急速赛车开奖结果 排列5选号绝招解密 刘佰温四肖中特期免费 上海快3开奖走势图一定牛 百家乐必胜方法_Welcome 四川快乐12遗漏数据统计 上海快3开将结果 5分赛车计划网址 澳洲幸运10玩法 澳洲幸运10七码押注法 澳门百家乐注册_Welcome 手机银河娱乐平台