起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識H5案例分析：人工智能簡史
當下人工智能被炒的火爆，最近看的H5與AI相關的內容也不在少數，今天要分析的案例是人民日報出品的“AI簡史”，科技感十足，個人非常喜歡，寫寫感想。
基本信息
- 主題：大禹三過家門而不入
- 來源：方太
- 類型：展示型（圖文+視頻）
- 技術實現：CreateJS + Video
內容策劃
首先進入加載頁面，加載頁呈現H5的主題“AI簡史”。
首先來到1950年，科學家圖靈提出“圖靈測試”。
能看透真假的，除了眼睛，還有內心
1956年，達特茅斯會議正式提出“人工智能（AI）”。
歷史在探索中推進，科技在嘗試中發展
1959年，第一代機器人出現。
你好，我是機器人！
1997年，第一代機器人車輛“索杰納”登陸火星。
機器人栽夢飛行
1999年，犬型機器人“愛寶”問世，智能機器人邁進普通家庭。
生活開始變成想象的樣子
2013年，歐盟提出“人腦計劃”。
“最強大腦”正式開啟
2014年，機器人首次通過圖靈測試。
顫抖吧，人類！機器開始思考！
→2016年，AlphaGo打敗人類，橫掃棋壇。
尼采所說的超人，已到來
H5通過8個時間點發生的事件 ，概述了人工智能的發展史，并對每個事件都做出了直達人心的評論，每個事件的發生都是會和我們每個人產生聯系，并發生作用，甚至是產生威脅的。
機器與人的關系越來越緊密，甚至是會超過人類，慢慢沖擊“人類才是主裁”的現狀，對人類產生威脅，引起普通人的共鳴。
關于AI，人人都是參與者，引導用戶參與，關于人類的未來，自己有什么想說的，也有足夠的動機使用戶轉發，既然是未來的寄語，當然是要放飛未來。
交互設計
- 加載界面中，進度條的設計以環形圖形+文字的雙重形式，讓用戶直截了當看到加載進度，降低用戶等待的焦躁感。
- 未來寄語可以手寫也可以用預設的選項，用預設的選項可以減少用戶腦力上的消耗。對于用戶自發的手寫來說，要注意設有關鍵詞，避免觸碰敏感地帶等內容。
- 放飛寄語，采用“搖一搖”的形式放飛，形式新穎，另一方面如果加載過慢，搖一下不靈敏，比較費力，可以換成用手指按照引導線滑動的方式放飛。
- 部分時間節點中的內容用3D方式呈現，可以通過點擊、旋轉等簡單的手勢進行交互。
- 在用戶引導上，可以加一個向下滑動的手勢指引，了解觀看H5的方法。
視覺設計
- 整體符合人工智能的主題，畫面具有科技感，頁面的右下部有刻度尺告知用戶瀏覽進度：正在看的事件和時間節點、總共有幾個時間節點需要瀏覽。設計上不打擾用戶，但是有點不易察覺。
- 漸變色的背景，每個時間點的顏色都不一樣，上一個時間節點畫面消失的動效承接下一個時間節點內容的出現，在視覺上充分做到起承轉合。
參考亮點
- 采用事件盤點的形式，以時間為節點敘述AI發展史。
- H5瀏覽進度的提示設計與主題相呼應，不突出，不打擾，極簡精致。
- 場景與場景間的過度在交互動效中完成，“順其自然”。
寫在最后，我是站在用戶的角度上體驗并分析H5，以此來鍛煉在H5策劃上的感覺，大家可以點擊 AI簡史? 體驗該H5，歡迎交流與分享你的心得。
本文由 @40°N?原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自unsplash，基于CC0協議
活動運營
評論
1.頁面配色也是很高級的，很有質感,充滿科技感和未來感，與主題相互輝映。
2.上一個場景消失和下一個場景的呈現，象征著新舊事物的不斷更迭,讓人不僅感受到科技飛速發展的自豪感，而且對AI未來充滿期待，再一次與主旨共鳴。
哈哈，是的，竟然兩個月后才看到留言 ??