當(dāng)下人工智能被炒的火爆，最近看的H5與AI相關(guān)的內(nèi)容也不在少數(shù)，今天要分析的案例是人民日報(bào)出品的“AI簡史”，科技感十足，個(gè)人非常喜歡，寫寫感想。

基本信息

• 主題：大禹三過家門而不入
• 來源：方太
• 類型：展示型（圖文+視頻）
• 技術(shù)實(shí)現(xiàn)：CreateJS + Video

內(nèi)容策劃

首先進(jìn)入加載頁面，加載頁呈現(xiàn)H5的主題“AI簡史”。

首先來到1950年，科學(xué)家圖靈提出“圖靈測試”。

能看透真假的，除了眼睛，還有內(nèi)心

1956年，達(dá)特茅斯會(huì)議正式提出“人工智能（AI）”。

歷史在探索中推進(jìn)，科技在嘗試中發(fā)展

1959年，第一代機(jī)器人出現(xiàn)。

機(jī)器人栽夢飛行

1999年，犬型機(jī)器人“愛寶”問世，智能機(jī)器人邁進(jìn)普通家庭。

生活開始變成想象的樣子

2013年，歐盟提出“人腦計(jì)劃”。

“最強(qiáng)大腦”正式開啟

2014年，機(jī)器人首次通過圖靈測試。

顫抖吧，人類！機(jī)器開始思考！

→2016年，AlphaGo打敗人類，橫掃棋壇。

尼采所說的超人，已到來

H5通過8個(gè)時(shí)間點(diǎn)發(fā)生的事件 ，概述了人工智能的發(fā)展史，并對每個(gè)事件都做出了直達(dá)人心的評論，每個(gè)事件的發(fā)生都是會(huì)和我們每個(gè)人產(chǎn)生聯(lián)系，并發(fā)生作用，甚至是產(chǎn)生威脅的。

機(jī)器與人的關(guān)系越來越緊密，甚至是會(huì)超過人類，慢慢沖擊“人類才是主裁”的現(xiàn)狀，對人類產(chǎn)生威脅，引起普通人的共鳴。

關(guān)于AI，人人都是參與者，引導(dǎo)用戶參與，關(guān)于人類的未來，自己有什么想說的，也有足夠的動(dòng)機(jī)使用戶轉(zhuǎn)發(fā)，既然是未來的寄語，當(dāng)然是要放飛未來。

交互設(shè)計(jì)

• 加載界面中，進(jìn)度條的設(shè)計(jì)以環(huán)形圖形+文字的雙重形式，讓用戶直截了當(dāng)看到加載進(jìn)度，降低用戶等待的焦躁感。
• 未來寄語可以手寫也可以用預(yù)設(shè)的選項(xiàng)，用預(yù)設(shè)的選項(xiàng)可以減少用戶腦力上的消耗。對于用戶自發(fā)的手寫來說，要注意設(shè)有關(guān)鍵詞，避免觸碰敏感地帶等內(nèi)容。
• 放飛寄語，采用“搖一搖”的形式放飛，形式新穎，另一方面如果加載過慢，搖一下不靈敏，比較費(fèi)力，可以換成用手指按照引導(dǎo)線滑動(dòng)的方式放飛。
• 部分時(shí)間節(jié)點(diǎn)中的內(nèi)容用3D方式呈現(xiàn)，可以通過點(diǎn)擊、旋轉(zhuǎn)等簡單的手勢進(jìn)行交互。
• 在用戶引導(dǎo)上，可以加一個(gè)向下滑動(dòng)的手勢指引，了解觀看H5的方法。

視覺設(shè)計(jì)

• 整體符合人工智能的主題，畫面具有科技感，頁面的右下部有刻度尺告知用戶瀏覽進(jìn)度：正在看的事件和時(shí)間節(jié)點(diǎn)、總共有幾個(gè)時(shí)間節(jié)點(diǎn)需要瀏覽。設(shè)計(jì)上不打擾用戶，但是有點(diǎn)不易察覺。
• 漸變色的背景，每個(gè)時(shí)間點(diǎn)的顏色都不一樣，上一個(gè)時(shí)間節(jié)點(diǎn)畫面消失的動(dòng)效承接下一個(gè)時(shí)間節(jié)點(diǎn)內(nèi)容的出現(xiàn)，在視覺上充分做到起承轉(zhuǎn)合。

參考亮點(diǎn)

• 采用事件盤點(diǎn)的形式，以時(shí)間為節(jié)點(diǎn)敘述AI發(fā)展史。
• H5瀏覽進(jìn)度的提示設(shè)計(jì)與主題相呼應(yīng)，不突出，不打擾，極簡精致。
• 場景與場景間的過度在交互動(dòng)效中完成，“順其自然”。

寫在最后，我是站在用戶的角度上體驗(yàn)并分析H5，以此來鍛煉在H5策劃上的感覺，大家可以點(diǎn)擊 AI簡史? 體驗(yàn)該H5，歡迎交流與分享你的心得。

本文由 @40°N?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自unsplash，基于CC0協(xié)議