冬奧智慧氣象APP界面視覺(jué)設計與交互設計

冬奧智慧氣象APP界面視覺(jué)設計與交互設計

交互設計 | 界面設計

交互設計 | 界面設計 | vue開(kāi)發(fā)

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

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

冬奧智慧氣象APP交互設計和視覺(jué)設計

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

冬奧智慧氣象APP交互設計和視覺(jué)設計

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

冬奧智慧氣象APP交互設計和視覺(jué)設計

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

冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計

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

冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計

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

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

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

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

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

冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計 冬奧智慧氣象APP交互設計和視覺(jué)設計

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

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

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

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

溫度、天氣現象和降水量的展示。

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

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

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

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

冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計 冬奧智慧氣象APP交互設計和視覺(jué)設計 冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計

冬奧智慧氣象APP交互設計和視覺(jué)設計

多戰對比頁(yè)

冬奧智慧氣象APP交互設計和視覺(jué)設計

多戰對比頁(yè)

冬奧智慧氣象APP交互設計和視覺(jué)設計

首頁(yè)英文版

冬奧智慧氣象APP交互設計和視覺(jué)設計

多戰對比頁(yè)

冬奧智慧氣象APP交互設計和視覺(jué)設計

多戰對比頁(yè)

冬奧智慧氣象APP交互設計和視覺(jué)設計

多戰對比頁(yè)

冬奧智慧氣象APP交互設計和視覺(jué)設計

首頁(yè)英文版

冬奧智慧氣象APP交互設計和視覺(jué)設計

多戰對比頁(yè)

冬奧智慧氣象APP交互設計和視覺(jué)設計

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



冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計 冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計 冬奧智慧氣象APP交互設計和視覺(jué)設計 冬奧智慧氣象APP交互設計和視覺(jué)設計
冬奧智慧氣象APP交互設計和視覺(jué)設計 冬奧智慧氣象APP交互設計和視覺(jué)設計

  返回