冬奧智慧氣象APP界面視覺設(shè)計(jì)與交互設(shè)計(jì)

冬奧智慧氣象APP界面視覺設(shè)計(jì)與交互設(shè)計(jì)

交互設(shè)計(jì) | 界面設(shè)計(jì)

交互設(shè)計(jì) | 界面設(shè)計(jì) | vue開發(fā)

北京冬奧會(huì)是近20年來唯一一次在大陸性冬季風(fēng)主導(dǎo)氣候條件下舉辦的冬奧會(huì)。大風(fēng)、氣溫低、低能見度、降雪等將是冬奧會(huì)和冬殘奧會(huì)面臨的主要天氣風(fēng)險(xiǎn)。同時(shí),氣象保障也可能需要應(yīng)對(duì)復(fù)雜相態(tài)降水、沙塵天氣等挑戰(zhàn)。在國(guó)際上沒有可借鑒的成熟技術(shù)方案情況下,賽區(qū)尺度山地的氣象監(jiān)測(cè)、預(yù)報(bào)及服務(wù)是本次冬奧會(huì)氣象工作面臨的挑戰(zhàn)。

北京市氣象局冬奧智慧氣象項(xiàng)目由北京文澤智遠(yuǎn)信息技術(shù)有限公司開發(fā),藍(lán)藍(lán)設(shè)計(jì)負(fù)責(zé) UI設(shè)計(jì)部分。本項(xiàng)目歷時(shí)二年,經(jīng)歷無數(shù)修改及設(shè)計(jì)開發(fā)完畢后的推倒重來,在冬奧氣象專家的指導(dǎo)下,結(jié)合了國(guó)際賽事運(yùn)動(dòng)員和專業(yè)人士的習(xí)慣,設(shè)計(jì)出符合其產(chǎn)品特性的人性化界面。

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象 APP 是專門面向國(guó)內(nèi)外 IOC(國(guó)際奧委會(huì))官員、冬奧會(huì)的組織與管理者、運(yùn)動(dòng)員與教練員以及關(guān)注冬奧會(huì)比賽進(jìn)程的公眾用戶,通過該 APP 向國(guó)內(nèi)、國(guó)外用戶提供權(quán)威、準(zhǔn)確、及時(shí)的官方氣象服務(wù)信息,并作為冬奧會(huì)官方氣象服務(wù)網(wǎng)站的有力補(bǔ)充,通過智能手機(jī)向用戶提供優(yōu)質(zhì)的冬奧氣象服務(wù)。該 APP 以冬奧比賽場(chǎng)地的預(yù)報(bào)、實(shí)況和預(yù)警的氣象服務(wù)為設(shè)計(jì)重點(diǎn),面向不同用戶的天氣需求進(jìn)行定制化開發(fā)。開發(fā)原則上以服務(wù)用戶為主,創(chuàng)新設(shè)計(jì)服務(wù)流程和服務(wù)模式,讓國(guó)內(nèi)外用戶能夠體驗(yàn)到冬奧氣象服務(wù)的實(shí)用和貼心,并具有一定的科技感和獲得感。

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

通過該 APP 對(duì)外提供三大賽區(qū)的監(jiān)測(cè)實(shí)況、精細(xì)化天氣預(yù)報(bào)以及高影響天氣預(yù)警等權(quán)威信息,提供中、英雙語(yǔ),面向安卓、蘋果手機(jī)的 APP 氣象服務(wù)。該 APP 的建設(shè)將實(shí)現(xiàn)以下目標(biāo):APP 將提供三大賽區(qū)的比賽場(chǎng)地、場(chǎng)館全天 24 小時(shí)的冬奧會(huì)氣 象信息服務(wù),包括比賽場(chǎng)館精細(xì)化氣象服務(wù)產(chǎn)品、場(chǎng)館周邊交通氣象信息、天氣預(yù)警以及其他冬奧相關(guān)的公共服務(wù)信息,滿足不同目標(biāo)群體氣象服務(wù)需求。 APP 提供中英文雙語(yǔ)切換,移動(dòng)端多終端訪問,中文版、英文版界面簡(jiǎn)潔實(shí)用,功能完整并在可視化和展示效果上有一定的科技感,提供面向用戶的定制化響應(yīng)功能。

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

建設(shè)內(nèi)容主要為 APP 的中文版、英文版以及手機(jī)移動(dòng)端的多終端安裝應(yīng)用。通過建設(shè)三大賽區(qū)實(shí)時(shí)監(jiān)測(cè)實(shí)況、精細(xì)化天氣預(yù)報(bào)、預(yù)警、冬奧專題氣象產(chǎn)品、交通氣象預(yù)報(bào)、冬奧科技成果展示等功能界面整合冬奧相關(guān)氣象數(shù)據(jù)和產(chǎn)品,利用統(tǒng)一的冬奧數(shù)據(jù)支撐子系統(tǒng)、系 統(tǒng)后臺(tái)產(chǎn)品定制和響應(yīng)子系統(tǒng)、前端可視化渲染子系統(tǒng)等最新前沿技術(shù),開展顯示快捷、滾動(dòng)更新的冬奧智慧化氣象服務(wù),實(shí)現(xiàn)實(shí)況、預(yù)報(bào)、預(yù)警、交通氣象服務(wù)等服務(wù)產(chǎn)品的快查詢和顯示。

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

整個(gè)項(xiàng)目對(duì)于所有的參與人員來說都是摸著石頭過河,這是一個(gè)非常具有專業(yè)性和技術(shù)性的項(xiàng)目。不僅要符合中國(guó)人使用習(xí)慣,更要符合國(guó)際友人的使用習(xí)慣。所以前期也調(diào)研了很多國(guó)際app案例。在前期定風(fēng)格的過程中,主要采用冬奧主題,在整個(gè)app中要體現(xiàn)出冬奧元素,并體現(xiàn)出實(shí)用性和美觀度共存的設(shè)計(jì)理念。

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

移動(dòng)端界面將主要的板塊內(nèi)容置于進(jìn)入主頁(yè)最上面是,“搜索”“收藏”“個(gè)人中心”幾個(gè)功能,搜索可通過關(guān)鍵字查看場(chǎng)館或賽事,擊收藏可進(jìn)入收藏頁(yè)面可以收藏場(chǎng)館,賽事,還可以給收藏的場(chǎng)館或賽事設(shè)置個(gè)性化的消息推送;點(diǎn)擊個(gè)人中心可進(jìn)入到個(gè)人中心頁(yè)面

頁(yè)面右側(cè)是幾個(gè)氣象要素和交通的切換按鈕,通過切換不同的功能地圖會(huì)隨之變化,同時(shí)為了更方便查看地圖,切換按鈕在不需要時(shí)可以收起來。

進(jìn)入主屏默認(rèn)展示的是三大賽區(qū)的名稱以及溫度,當(dāng)點(diǎn)擊某個(gè)賽區(qū)后可直接切換到該賽區(qū)。當(dāng)切換到“張家口賽區(qū)“和”延慶賽區(qū)”時(shí),頁(yè)面會(huì)展示每個(gè)站點(diǎn),如右圖所示。

時(shí)間軸模塊,時(shí)間軸分為實(shí)況和預(yù)報(bào)兩部分,左右滑動(dòng)時(shí)間軸,地圖實(shí)況會(huì)隨之有相應(yīng)的變化。時(shí)間軸左側(cè)還有一個(gè)播放按鈕,當(dāng)點(diǎn)擊播放時(shí)按鈕時(shí)時(shí)間軸便會(huì)自動(dòng)播放。時(shí)間軸下面是地圖的圖例。

實(shí)況模塊,當(dāng)用戶在京津冀地區(qū)時(shí),進(jìn)入主頁(yè)便會(huì)顯示當(dāng)前位置的的實(shí)況信息,當(dāng)用戶不在時(shí)便會(huì)顯示為“北京賽區(qū)”的實(shí)況信息。點(diǎn)擊地點(diǎn)名稱旁邊的小箭頭,可以切換到其它賽區(qū)或者站點(diǎn)的實(shí)況天氣。實(shí)時(shí)信息往上滑動(dòng)便可以查看更多的氣象要素信息,如下圖。

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì) 冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

時(shí)間軸和實(shí)況信息滑倒頂部的效果。

當(dāng)在首頁(yè)選中多個(gè)站點(diǎn)時(shí),詳情頁(yè)會(huì)將多個(gè)站點(diǎn)的氣象信息以折疊的方式同時(shí)展示。首先展示的是以天為單位的氣象信息。通過滑動(dòng)上方的時(shí)間軸這里也會(huì)發(fā)生相對(duì)應(yīng)的變化。。

時(shí)間的切換,通過“1分鐘”“10分鐘”和“小時(shí)”的切換可以展示不同層級(jí)的氣象信息。

圖形和列表展示形式的切換。列表的展示形式如右圖所示。

溫度、天氣現(xiàn)象和降水量的展示。

單個(gè)氣象要素收起的展示樣例。

氣壓、能見度的展示。相同單位的要素在一個(gè)模內(nèi)展示,可以更好的節(jié)省空間,方便用戶操作,同時(shí)可以進(jìn)行兩個(gè)要素的對(duì)比。

站點(diǎn)收起的樣例。

天氣綜述模塊,天氣綜述只要是展示近段時(shí)內(nèi)總體的一個(gè)天氣情況,可以給將要來參賽或者觀賽人員的一個(gè)友好告知,做好相對(duì)應(yīng)的準(zhǔn)備。

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì) 冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì) 冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

多戰(zhàn)對(duì)比頁(yè)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

多戰(zhàn)對(duì)比頁(yè)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

首頁(yè)英文版

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

多戰(zhàn)對(duì)比頁(yè)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

多戰(zhàn)對(duì)比頁(yè)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

多戰(zhàn)對(duì)比頁(yè)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

首頁(yè)英文版

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

多戰(zhàn)對(duì)比頁(yè)

冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

整體的設(shè)計(jì)過程進(jìn)行的有三輪,剛開始是以菜單切換的形式,切換到不同的頁(yè)面展示不同內(nèi)容,在大家多次討論的過程中覺得這種交互不太直觀,所以有了第二輪整體設(shè)計(jì)。第二輪是采用瀑布型展示模式,所有的模塊內(nèi)容都在一頁(yè)上全部展示,采用滑動(dòng)的形式查看更多。再次談?wù)撝邪l(fā)現(xiàn)瀑布型功能過于隱藏,在沒有滑到下面時(shí),不知道下面有什么功能。所以最后經(jīng)過和氣象臺(tái)各位專家不斷討論中產(chǎn)生最后的交互模式。下面展示的是在整個(gè)設(shè)計(jì)過程中的一些過程稿。



冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì) 冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì) 冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì) 冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)
冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì) 冬奧智慧氣象APP交互設(shè)計(jì)和視覺設(shè)計(jì)

  返回