案例：圍住神經(jīng)貓
-
“顯擺一下”或“通知好友”和“分享”的區(qū)別
- 一個是站在用戶的角度
-
一個是站在開發(fā)者的角度（分享，希望推廣這款游戲）
image.png
H5是什么？
- HTML5（在UI設(shè)計中的不同于寫代碼）
- 相應(yīng)式網(wǎng)頁
- WebAPP
- H5動畫取代Flash動畫
-
移動端專題頁
image.png
用H5的形式做專題，以微信為代表的，實現(xiàn)營銷目的
四大優(yōu)勢：
-
兼容性好
- Android
- iOS
- Windows
互動性強
-
成本低
- 耗時短
- 團隊人數(shù)少
-
易推廣
- 可以發(fā)朋友圈等等
H5能做什么？
-
活動推廣
- 天貓雙十一“你行你上啊”
品牌宣傳
-
首草先生的情書
image.png 交通銀行
-
產(chǎn)品\服務(wù)\個人介紹
-
鴻星爾克 人類究竟為什么奔跑
image.png
-
上海大眾汽車
-
總結(jié)報告
- 對內(nèi)，比如對員工，對上司
- 對外，對用戶，展示一下今年的業(yè)績，是可以公開的。傳統(tǒng)的報告都是文字的形式，H5可以打破傳統(tǒng)，可以在朋友圈等轉(zhuǎn)發(fā)。
-
比如：支付寶十年賬單（像看小故事一樣，非常輕松）
image.png
image.png -
WWF：養(yǎng)活70億個你，需要幾個地球（測試題型）
image.png
image.png
H5專題頁能做什么？
- 微信互動營銷：搖一搖，大轉(zhuǎn)盤，刮刮卡，優(yōu)惠卷，調(diào)查問卷，小游戲···
- 商業(yè)展示：企業(yè)宣傳，產(chǎn)品展示，品牌宣傳，優(yōu)惠促銷，企業(yè)招聘，數(shù)據(jù)年報···
- 會議活動：會議，展覽會，發(fā)布會，活動···
- 數(shù)字出版與教育：電子雜志，多媒體課件，培訓(xùn)課程···
- 電子賀卡：商業(yè)賀卡，節(jié)日賀卡，生日賀卡，祝?？āぁぁ?/li>
- 個人應(yīng)用：個人秀，婚禮邀請，聚會party，求職簡歷···
設(shè)計要求：
- 腳本要順暢，故事要講好
- 引發(fā)情感共鳴
- 文案是靈魂（標題黨、借勢營銷、流行語···）
- 引導(dǎo)要做好
- 融入互動，比如問答\評分\測試
- 圖文要簡單
-
合理運用技術(shù)，打造流暢的互動體驗
image.png
萌店：汪涵call你來當(dāng)CEO
image.png
image.png
H5的設(shè)計要求-常用交互方式
- 點擊
- 滑動
- 繪圖
- 擦除
- 搖一搖
- 重力感應(yīng)
- 3D視圖
- 語音互動
設(shè)計流程
注意：形式有很多種，靈活應(yīng)用，比如有問答的形式，講故事的形式，視頻的形式等等并不一定非得是那種枯燥的敘述
注意：易企秀普通用戶就適合用，ih5比較專業(yè)，官方也有教程，如果以后工作當(dāng)中需要的話，可以好好看看，根據(jù)自己的就業(yè)需要。
規(guī)范與視覺
頁面規(guī)范
-
背景圖片尺寸：
分屏：640*1008px（易企秀）
6401136 7501334 7201280 10801920
長頁面：750*n
-
圖片格式：
-
PNG（透明）
- 如果是一些簡單的圖片，24和8是沒有什么區(qū)別的，但是24比8的大小會打出一倍，所以用8的。如果用24的，圖片太大的話會有打不開的情況，那么用戶這個時候可能就關(guān)掉不看了，會增加跳出率。所以一般首先用的是PNG-8的。
- 如果用PNG8的時候，很多效果，比如平滑的效果之類的出不來，品質(zhì)很糙，這個時候可以用png24的。
JPG（背景）
GIF（動畫）
-
-
頁面數(shù)：無限制
- 為了更好的用戶體驗，建議在6-12頁左右
風(fēng)格
- 手繪
- 矢量圖形
- 背景圖
文字與排版
H5設(shè)計研究院，腳本案例-大綱
- 痛點：
- 提問：
- 方案第1步：
- 方案第2步：
- 方案第3步：
- 展望未來：（最終您會有巨大的收益！銷售額增長，市場占有率，用戶滿意度）
- 關(guān)單：（想讓您的產(chǎn)品實現(xiàn)飛躍嗎？把你的需求高速我們，讓我們優(yōu)秀的團隊為您服務(wù)）
如果采用我們的方案，會帶來什么樣的利益
1 痛點：
你的產(chǎn)品是否碰到過這些問題？
市場占有率迅速發(fā)展，設(shè)計卻很LOW？
因為糟糕的設(shè)計，被用戶唾棄？
高價做的軟件，卻不如免費軟件用的爽？
2 提問：
你真正研究過用戶，還是強暴了用戶的訴求？
研究過 / 強暴過
3 方案第1步：
產(chǎn)品設(shè)計的諸多事兒-我們都擅長搞定！
不好用 / 不美觀 / 沒有轉(zhuǎn)化率
4 方案第2步：
不要著急，我們幫您逐步提升設(shè)計的有效率
易用的操作 / 美觀的產(chǎn)品外觀 / 超高的轉(zhuǎn)化率
5 方案第3步：
您一定需要這樣深厚的經(jīng)驗
300個500強企業(yè)實戰(zhàn)案例 / 50名優(yōu)秀的設(shè)計 /
8年企業(yè)培訓(xùn)經(jīng)驗 / 長達3年的售后服務(wù)
6 展望未來：
最終，您會有巨大的收益！
銷售額增長 / 市場占有率增加 / 用戶滿意度增加 / 品牌忠誠度增加
7 關(guān)單：
想讓您的產(chǎn)品實現(xiàn)飛躍嗎？
把您的需求告訴我們，讓我們優(yōu)秀的團隊為您服務(wù)
你的姓名 / 你的公司 / 你的電話
400-000-6063 二維碼掃碼
