百姓彩票官网welcome

  • <tr id='I1DCHB'><strong id='I1DCHB'></strong><small id='I1DCHB'></small><button id='I1DCHB'></button><li id='I1DCHB'><noscript id='I1DCHB'><big id='I1DCHB'></big><dt id='I1DCHB'></dt></noscript></li></tr><ol id='I1DCHB'><option id='I1DCHB'><table id='I1DCHB'><blockquote id='I1DCHB'><tbody id='I1DCHB'></tbody></blockquote></table></option></ol><u id='I1DCHB'></u><kbd id='I1DCHB'><kbd id='I1DCHB'></kbd></kbd>

    <code id='I1DCHB'><strong id='I1DCHB'></strong></code>

    <fieldset id='I1DCHB'></fieldset>
          <span id='I1DCHB'></span>

              <ins id='I1DCHB'></ins>
              <acronym id='I1DCHB'><em id='I1DCHB'></em><td id='I1DCHB'><div id='I1DCHB'></div></td></acronym><address id='I1DCHB'><big id='I1DCHB'><big id='I1DCHB'></big><legend id='I1DCHB'></legend></big></address>

              <i id='I1DCHB'><div id='I1DCHB'><ins id='I1DCHB'></ins></div></i>
              <i id='I1DCHB'></i>
            1. <dl id='I1DCHB'></dl>
              1. <blockquote id='I1DCHB'><q id='I1DCHB'><noscript id='I1DCHB'></noscript><dt id='I1DCHB'></dt></q></blockquote><noframes id='I1DCHB'><i id='I1DCHB'></i>

                冬奥智慧△气象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交互设计和视觉设计

                  返回