墨迹天气,持续占据各大APP排行榜天气类软件第一位,在5年时间内,拥有超过3.3亿的注册用户一款天气信息查询软件,人性化设计,使用简单,是中国支持城市最多的天气预报软件.解决需求单一只是提供天气,实现路径单一是用户与APP之间单线交互就可以完成目标。所以它是一种狭义类的工具类产品。
工具类产品讲究两个方面 1,可用性:墨迹天气精准定位及时推送,分钟级、公里级天气预报,实时监测阴晴雨雪。提供15天天气预报,5天空气质量预报,实时空气质量及空气质量等级预报。特殊天气提前发送预警信息,帮助用户更好做出生活决策,从容应对各类天气状况。信息识别度高,空间距离考虑周详,体验很精确。2,美感:墨迹天气的背景实时按照所在时间所在位置的天气实时呈现,有天气的风雨雷电的动效,用户一打开应用就可以了解。还有实时谁=随季节随天气增减衣服的卡通人物,细心的告诉你今天穿什么最合适。下面按照工具类产品四大关键词:简洁、易懂、快速、引导一一介绍.
简洁:不同的商业模式一定带来不同的交互。天气软件也是一样。时间积累了用户行为数据,包括用户愿意在首屏看到什么信息。这些重要的交互信息,要通过图形设计和流程把它们诠释出来,现在看见的设计已经是经过多次迭代的了。据资料查询墨迹天气从2009年发展至今的7年时间里,从天气工具发展为基于天气的综合生活服务平台,经历了几次重要的版本迭代。从纵向时间轴上来分析墨迹天气几个版本功能及发展重点的演进,可以发现墨迹经历了从清新工具到图片社区再到综合生活服务平台的蜕变路径;而从各版本增添功能所取得的产品成效上横向分析,可以发现墨迹天气通过时景社区与资讯模块巩固了独立海量流量入口的行业地位,通过“空气果”实现了软硬件相结合的气象数据闭环,通过对O2O的高度渗透实现了基于天气预判的生活连接枢纽。迭代要做的是润物细无声的改版,而不是全方面的革命。虽然设计师都喜欢革命,但其实真正的好产品是慢慢改进出来的。墨迹天气坚持一贯的以用户体验为中心的发展思路,为用户变得越来越专属,打破了传统天气服务以“城市”为核心的思维桎梏。现在已经发展到墨迹天气6.1.9版本。带来更贴心的基于天气预判的提醒服务,通过软硬结合为用户提供专属的气象数据,同时推送更精准的资讯内容;并会将“天气+”战略无限扩展,切入更多的生活场景。
墨迹天气自1.0至5.0版广受用户青睐的重要原因是在保持惊艳的视觉设计的同时,提供了流畅贴心的用户体验。墨迹天气1.0在塞班平台凭借华丽的交互界面秒杀同类产品;2.0版本的全景动画和“小墨”助手则一直维持至今,引领了天气App的设计潮流;而伴随iOS7.0调整的扁平化设计和5.0版本通透的设计风格,均体现用户体验至上的美学理念。而智能硬件“空气果”的全铝机身充满未来感的工业设计,则和这一美学理念的一脉相承。视觉美学仅是产品设计的外在表征,内涵则是墨迹天气这一产品所具有的“同理心”。从指数信息的不断细化,到“空气果”检测用户周边小气候,用户的环境感知越来越精细化,均是以用户查询天气后的“下一步”为出发点,将用户体验提升到极致。
导航架构由天气、时景、我三部分组成。启动页面就是天气界面,实时天气背景动态展示。实时的度数,天气状态在视野热区即左上角占了很大的面积属于第一层级、在第一层级的周给予辅助信息,地区,空气质量,风力等各种实时小提示。配合天气的人物服饰搭配为第二层级,并带出今晚、明天的天气状态,页面呈左上与右下的呼应排布,都是屏幕视野关注的区域。
视觉层次上的简洁:墨迹天气采用大面积的蓝,部分的白黑,还有绿色点缀。属于冷色系列。是青山绿水的颜色。页面中间虽然是动态的实时天气背景,却拥有留白特征的透气感,使得界面疏密有致,有节奏感。今天晚上与明天的天气采取一样的排版与色彩属于重复使用一种设计手法,达到统一且富有节奏。
页面信息上的简洁:1,把用户最想看见的内容放在首屏,当打开页面的时候用户最想知道的就是现在地区此时此刻的 天气状况。所以墨迹天气将最新的状态在首页首屏中展现。墨迹天气有15天天气情况,如果在一个页面中显示会显得页面又拥挤,有寻找困难,所以需要采用隐藏。大众对于今明两天的天气有一定的需求,在首屏中将关键的温度变化,天气变化,空气情况做了简单的描述,确保简洁但可识别。
墨迹天气功能越来越多,包括各种生活提示,设计产品要让用户更快捷地找到自己想要的信息而又不让页面感觉拥挤,对现有功能做测试数据然后优先级排列,需求低的功能点能减就减的。在首屏上呈现的是高度归纳后的天气信息;下滑后是二级信息多天预报;最底部的位置是指数方面的延伸,穿衣指数,生活指数等等。指数位置做天气延展性内容服务,可拓展性也很高。比如进入穿衣指数,我们将有共鸣的情感化描述和提示放在显眼的位置,背景也会根据天气呈现不同颜色,带给用户最直观的天气感受。穿衣指数页面下方,就有穿衣指南,这里对部分用户而言优先级不是很高,信息呈现上就会放在比较深的位置。另外,有新推出的探索性功能也会从比较深的位置开始,通过数据再去了解有多少用户专门去通过多步操作寻找这个功能。当需要删减功能时也不会直接砍掉,会先藏在较深的位置,然后根据反馈灵活调整。
易懂:1,在天气图标的边上有文字表述,在左上角的右边采用了文字描写,而不是用图标就是优先考虑了功能的理解度和识别度。2,同样在左上角度数下面有空气等图标,而不是用文字。就是考虑视觉美感,虽然用文字会更加准确,但是上面会出现许多的文字,在视觉太密集,过多的文字也会显得界面粗糙。再有这个空气或是湿度优先级不是很高,所以平衡两者,之后才有图标形式。
快速:工具类产品的目的就是想通过将功能产品化,来提升用户的工作效率。
预见:预见下一步的操作,提升使用效率。墨迹天气左上角的温度预见你想看当天的详细情况,便展开一周当地的详细的天气界面。如天气温度,天气情况,气压,体感温度,湿度,紫外线,气压,风向,日出日落时间,黄历信息,传统忌,宜。
填充:默认项的填充,减少用户重复操作。当你想要关注另一个城市点击地址边上的+,便会出现不同的热门城市与旅游景点供点击,减少重复操作,又起到城市或是旅游景点搜索填写的规范参考。当你选择了数个城市后在首屏城市的下方会出现小点,用白色的深浅你当前选择的是这几个城市中的第几个,前面或后面还有几个,可以左右平移来转换城市。
转移:通过动画动效,转移用户注意力,减缓心理上的等待时间。墨迹天气的动效上面设计很舒服,不张扬却很贴心。首先加载页面出现关心天气更关心你这样的语言鸡汤,让你等待的时候有暖暖的感觉。
第一次点“我的页面”,能给用户带来多一些的个性化色彩,所以突出头像和个性背景,进入首屏后背景上会有实时的烟云缭绕,水波涟漪,或是小雨缠绵,有细节但不影响上方天气信息list view等展示,动效就是将二者结合的最佳方式之一。所以,动效的重点应该是把不同的功能点完美衔接起来,而不是所谓的看上去炫,那只是动画,不是动效。
当点击城市时,左边出现选择城市节目,右边保留了狭窄的天气界面,天气界面下方带有阴影,有空间层次感,让用户感受到界面的位置,有连续性。还有不同城市之间的切换,上下的窄横条与背景相对固定,中间的天气信息跟随着手指路径移动,当划过超过一半页面就进入下一个页面,上面的城市信息与数个小点就会变化,展示更新到最新页面的信息,有不错的视觉反馈。
引导:墨迹天气有新功能引导(第一次打开APP,专门的帮助引导中心。)墨迹天气有一个人物形象,当出现一些最新情况的时候,会借形象在傍边出现谈话框。“实景”这个功能页面的出现让每一个用户都可以将自己身边的景色天气放入产品中,减少用户对于产品的距离感。“我的里面”可以与帐号绑定,有自己的墨圈,个性助手等等,让你的应用自己定制,与和你一样类型的人在一个社区交流。
工具类产品设计特征:字体、配色、配图、图标
字体有自己的性格。工具类产品多选用效率简洁的文字。墨迹天气在语言设置处提供了简体中文、繁体中文(香港)、繁体中文、英文4种语言,默认是跟随系统语言。识别性已经经过检验,易读好理解外还有很好的兼容性,系统自带字体 IOS使用的中文是苹方简体,英文是San Francisco。为什么优先选择系统自带字体:1,设计的产品最终是呈现在用户的终端上的,要考虑用户的使用环境。2,字体缺少情况下、行距、会替换成其他默认字体,影响内容的排版。3,系统默认字体经过时间的考验,在识别性和阅读体验方面都比较好。
色彩如何选择和搭配?天气,包括白天黑夜,日月星辰,风雨雷电,从中取色黑,白,蓝,黄。随着空气质量的关注加入了绿色叶子作为空气的图标,相应的就引入了绿色。
如何确定色彩比例:黑色:蓝色:白色:绿色、黄色等其他颜色约 6:2:1.5:0.5。效率优先原则:减少色相-减少视觉干扰-突出内容
1,工具类产品的配色更克制 2,首先符合自己的产品定位 3,效率优先原则
配图:产品中的一部分配图是官方提供的,另一部分是用户拍摄上传的。所以色相或是视图效果参差不齐,但能是展示当地天气,是产品特点最直接的方式。让浏览的用户参与其中又对你的产品一目了然。
图标:1,工具类产品图标多用线、面、或线面结合的方式展现。墨迹天气标签栏中默认状态灰色线条,选中状态蓝色线条加暗一些的蓝色填充。用圆润的线条云概括了天气,图标的直观表现力得到提升。