H5案例分析:人工智能簡史

3 評論 9919 瀏覽 29 收藏 7 分鐘

當(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簡史”。

AI簡史

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

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

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

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

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

你好,我是機(jī)器人!
1997年,第一代機(jī)器人車輛“索杰納”登陸火星。

機(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é)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 1.頁面配色也是很高級的,很有質(zhì)感,充滿科技感和未來感,與主題相互輝映。

    2.上一個(gè)場景消失和下一個(gè)場景的呈現(xiàn),象征著新舊事物的不斷更迭,讓人不僅感受到科技飛速發(fā)展的自豪感,而且對AI未來充滿期待,再一次與主旨共鳴。

    回復(fù)
    1. 哈哈,是的,竟然兩個(gè)月后才看到留言 ??

      來自北京 回復(fù)