冬奧智慧氣象APP介面視覺設計與互動設計

互動設計 | 介面設計 | vue開發

北京冬奧會是近20年來唯一一次在大陸性冬季風主導氣候條件下舉辦的冬奧會₪╃。大風·✘╃、氣溫低·✘╃、低能見度·✘╃、降雪等將是冬奧會和冬殘奧會面臨的主要天氣風險₪╃。同時│↟,氣象保障也可能需要應對複雜相態降水·✘╃、沙塵天氣等挑戰₪╃。在國際上沒有可借鑑的成熟技術方案情況下│↟,賽區尺度山地的氣象監測·✘╃、預報及服務是本次冬奧會氣象工作面臨的挑戰₪╃。

北京市氣象局冬奧智慧氣象專案由北京文澤智遠資訊科技有限公司開發│↟,藍藍設計負責 UI設計部分₪╃。本專案歷時二年│↟,經歷無數修改及設計開發完畢後的推倒重來│↟,在冬奧氣象專家的指導下│↟,結合了國際賽事運動員和專業人士的習慣│↟,設計出符合其產品特性的人性化介面₪╃。

冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象 APP 是專門面向國內外 IOC(國際奧委會)官員·✘╃、冬奧會的組織與管理者·✘╃、運動員與教練員以及關注冬奧會比賽程序的公眾使用者│↟,透過該 APP 向國內·✘╃、國外使用者提供權威·✘╃、準確·✘╃、及時的官方氣象服務資訊│↟,並作為冬奧會官方氣象服務網站的有力補充│↟,透過智慧手機向用戶提供優質的冬奧氣象服務₪╃。該 APP 以冬奧比賽場地的預報·✘╃、實況和預警的氣象服務為設計重點│↟,面向不同使用者的天氣需求進行定製化開發₪╃。開發原則上以服務使用者為主│↟,創新設計服務流程和服務模式│↟,讓國內外使用者能夠體驗到冬奧氣象服務的實用和貼心│↟,並具有一定的科技感和獲得感₪╃。

冬奧智慧氣象APP互動設計和視覺設計

透過該 APP 對外提供三大賽區的監測實況·✘╃、精細化天氣預報以及高影響天氣預警等權威資訊│↟,提供中·✘╃、英雙語│↟,面向安卓·✘╃、蘋果手機的 APP 氣象服務₪╃。該 APP 的建設將實現以下目標₪◕·☁:APP 將提供三大賽區的比賽場地·✘╃、場館全天 24 小時的冬奧會氣 象資訊服務│↟,包括比賽場館精細化氣象服務產品·✘╃、場館周邊交通氣象資訊·✘╃、天氣預警以及其他冬奧相關的公共服務資訊│↟,滿足不同目標群體氣象服務需求₪╃。 APP 提供中英文雙語切換│↟,移動端多終端訪問│↟,中文版·✘╃、英文版介面簡潔實用│↟,功能完整並在視覺化和展示效果上有一定的科技感│↟,提供面向使用者的定製化響應功能₪╃。

冬奧智慧氣象APP互動設計和視覺設計

建設內容主要為 APP 的中文版·✘╃、英文版以及手機移動端的多終端安裝應用₪╃。透過建設三大賽區實時監測實況·✘╃、精細化天氣預報·✘╃、預警·✘╃、冬奧專題氣象產品·✘╃、交通氣象預報·✘╃、冬奧科技成果展示等功能介面整合冬奧相關氣象資料和產品│↟,利用統一的冬奧資料支撐子系統·✘╃、系 統後臺產品定製和響應子系統·✘╃、前端視覺化渲染子系統等最新前沿技術│↟,開展顯示快捷·✘╃、滾動更新的冬奧智慧化氣象服務│↟,實現實況·✘╃、預報·✘╃、預警·✘╃、交通氣象服務等服務產品的快查詢和顯示₪╃。

冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計

整個專案對於所有的參與人員來說都是摸著石頭過河│↟,這是一個非常具有專業性和技術性的專案₪╃。不僅要符合中國人使用習慣│↟,更要符合國際友人的使用習慣₪╃。所以前期也調研了很多國際app案例₪╃。在前期定風格的過程中│↟,主要採用冬奧主題│↟,在整個app中要體現出冬奧元素│↟,並體現出實用性和美觀度共存的設計理念₪╃。

冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計

移動端介面將主要的板塊內容置於進入主頁最上面是│↟,“搜尋”“收藏”“個人中心”幾個功能│↟,搜尋可透過關鍵字檢視場館或賽事│↟,擊收藏可進入收藏頁面可以收藏場館│↟,賽事│↟,還可以給收藏的場館或賽事設定個性化的訊息推送;點選個人中心可進入到個人中心頁面

頁面右側是幾個氣象要素和交通的切換按鈕│↟,透過切換不同的功能地圖會隨之變化│↟,同時為了更方便檢視地圖│↟,切換按鈕在不需要時可以收起來₪╃。

進入主屏預設展示的是三大賽區的名稱以及溫度│↟,當點選某個賽區後可直接切換到該賽區₪╃。當切換到“張家口賽區“和”延慶賽區”時│↟,頁面會展示每個站點│↟,如右圖所示₪╃。

時間軸模組│↟,時間軸分為實況和預報兩部分│↟,左右滑動時間軸│↟,地圖實況會隨之有相應的變化₪╃。時間軸左側還有一個播放按鈕│↟,當點選播放時按鈕時時間軸便會自動播放₪╃。時間軸下面是地圖的圖例₪╃。

實況模組│↟,當用戶在京津冀地區時│↟,進入主頁便會顯示當前位置的的實況資訊│↟,當用戶不在時便會顯示為“北京賽區”的實況資訊₪╃。點選地點名稱旁邊的小箭頭│↟,可以切換到其它賽區或者站點的實況天氣₪╃。實時資訊往上滑動便可以檢視更多的氣象要素資訊│↟,如下圖₪╃。

冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計 冬奧智慧氣象APP互動設計和視覺設計

時間軸和實況資訊滑倒頂部的效果₪╃。

當在首頁選中多個站點時│↟,詳情頁會將多個站點的氣象資訊以摺疊的方式同時展示₪╃。首先展示的是以天為單位的氣象資訊₪╃。透過滑動上方的時間軸這裡也會發生相對應的變化₪╃。₪╃。

時間的切換│↟,透過“1分鐘”“10分鐘”和“小時”的切換可以展示不同層級的氣象資訊₪╃。

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

溫度·✘╃、天氣現象和降水量的展示₪╃。

單個氣象要素收起的展示樣例₪╃。

氣壓·✘╃、能見度的展示₪╃。相同單位的要素在一個模內展示│↟,可以更好的節省空間│↟,方便使用者操作│↟,同時可以進行兩個要素的對比₪╃。

站點收起的樣例₪╃。

天氣綜述模組│↟,天氣綜述只要是展示近段時內總體的一個天氣情況│↟,可以給將要來參賽或者觀賽人員的一個友好告知│↟,做好相對應的準備₪╃。

冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計 冬奧智慧氣象APP互動設計和視覺設計 冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計

冬奧智慧氣象APP互動設計和視覺設計

多戰對比頁

冬奧智慧氣象APP互動設計和視覺設計

多戰對比頁

冬奧智慧氣象APP互動設計和視覺設計

首頁英文版

冬奧智慧氣象APP互動設計和視覺設計

多戰對比頁

冬奧智慧氣象APP互動設計和視覺設計

多戰對比頁

冬奧智慧氣象APP互動設計和視覺設計

多戰對比頁

冬奧智慧氣象APP互動設計和視覺設計

首頁英文版

冬奧智慧氣象APP互動設計和視覺設計

多戰對比頁

冬奧智慧氣象APP互動設計和視覺設計

整體的設計過程進行的有三輪│↟,剛開始是以選單切換的形式│↟,切換到不同的頁面展示不同內容│↟,在大家多次討論的過程中覺得這種互動不太直觀│↟,所以有了第二輪整體設計₪╃。第二輪是採用瀑布型展示模式│↟,所有的模組內容都在一頁上全部展示│↟,採用滑動的形式檢視更多₪╃。再次談論中發現瀑布型功能過於隱藏│↟,在沒有滑到下面時│↟,不知道下面有什麼功能₪╃。所以最後經過和氣象臺各位專家不斷討論中產生最後的互動模式₪╃。下面展示的是在整個設計過程中的一些過程稿₪╃。



冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計 冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計 冬奧智慧氣象APP互動設計和視覺設計 冬奧智慧氣象APP互動設計和視覺設計
冬奧智慧氣象APP互動設計和視覺設計 冬奧智慧氣象APP互動設計和視覺設計

  返回

美女把尿口扒开让男人玩,韩国19禁a片在线播放,国产精品一区二区久久不卡,国产老熟女牲交freexx