收集手機上經典的 HTML5 設計專題頁面?

  1. 便於在手機屏幕上查看,傳播的。

  2. 有用到手機特性的硬體的,比如重力感應,滑動,搖動等。

  3. 不是APP,是HTML5設計的。


分享一些自己收藏的吧:

  • 首先是一個特別好的H5頁面集合貼,social talent circle做的:社交移動風雲榜12/20

- 這個頁面里經常會更新整理最近出現的一些H5頁面,各種類型的都有,而且質量都比較高。

建議直接收藏,隔一段時間看一下。還不太清楚更新頻率哈

  • 其次你提到的跟手機重力感應相關的:

一套理想居室的自我修養

Hey you!別低頭看手機了,快來和我一起扭脖子!——這個我覺得跟產品的結合太棒了

iBreath「智呼吸」:移動時代體檢新模式 吹口氣便知健康指數——很神奇呀,其實是他們愚人節的玩笑。大家感受下~如果我找到跟重力感應相關的資料再來蠱蟲

  • 滑動的,這個有好幾種形式的:

- 常見的頁面之間的切換也算滑動吧,上下的很常見,左右的可以看這個:對象牙製品說不

- 擦玻璃:摩擦摩擦~在光滑的屏幕上摩擦~

最開始是維多利亞的秘密做的,首頁是經過處理的照片,摩擦屏幕就會有性感妹子出現,然後是品牌介紹和搶購。沒有找到維多利亞的,有一個志玲姐姐的:極致誘惑 —(摩擦真是讓人面紅耳赤呢~)

- 跨越多屏的動畫:30秒,告訴你淘寶到底有多萬能——我覺得動畫效果和風格都很棒,就是信息太多,不會認真看,重點看滑動時的動畫效果

- 滑動引導:用滑動來完成互動,可以看這個:一張皮子的華麗蛻變之旅——聯想手機根據指示切割金屬

補充說下我覺得這個頁面單說互動的形式很豐富:搖一搖、點氣球、摩擦...都有~

  • 搖一搖的:

之前漢秀月餅做的一個,搖一搖製作月餅,搖一搖包裝,活動結束頁面找不到了,可以搜下PR稿看下形式

————————————3月20日補充————————————

  • H5頁面集合貼:

H5說 為創意尋找解決方案

  • H5怎麼學——幾個公眾號
  • Social Talent
  • 老美工都是活雷鋒
  • 騰訊CDC體驗設計
  • HTML5設計案例集錦
  • 微信智慧生活館 IxDC


Burberry

阿里巴巴集團2015秋季校招

------2014年12月16日更新------

A Collection of Page Transitions

找的就是你,被埋沒是一種罪過——中通快遞喊你來面試啦!

天貓雙十一 狂歡大起底

2015年1號店校園招聘

中國平板電腦用戶行為報告

http://118.244.192.173:8961/WeChat/index.html?from=timelineisappinstalled=0

------2014年12月17日更新------

邀請函

------2015年1月15日更新------

刷個朋友圈的工夫都能開店了

2015年3月30日

東華禪寺招聘啟事 方案寫的不錯

2015年4月17日

Alibaba wants you


有個微信號叫「老美工都是活雷鋒」,都是h5的推薦,貌似還不錯,更新也頻繁


我覺得H5說還不錯,雖然因為這樣說有廣告嫌疑,但是確實是用心在收集優秀的案例的。

http://www.h5shuo.com


為啥不放二維碼掃描,手機端可以看的呢


看了上面的效果都不錯,我也來一發http://sp.jd.com/finance/activity/udcJoin/


推薦閱讀:

求推薦AI的自學視頻教程?
怎麼能快速區分交互設計的菜鳥和高手?
建築設計與城市設計中需要考慮的無障礙設計都有哪些?
通常設計公司設計logo的時候, 會保證一定可以註冊商標嗎?
如何評價全新發布的沃爾沃xc40?

TAG:設計 | 手機 | 用戶界面設計 |