懒人天气app重设计

首先，我为什么要做重设计。处于一个和设计无关的职位、没有学习过任何美术相关的专业课程，自学交互设计的确需要给自己找一些方向和落脚点。我的策略是，以经典书籍和官方指南为理论基础，即学习方向的引导，以自身体验、工具学习、重构练习为实践，一上一下，不至于眼高手低，更不要丧失了对设计整体理念的把握。重设计Re-Design是一个交互设计师经常接触的东西，无论是工作中对现有设计方方面面的思考，还是日常生活中对身边软件的体验感触，重新设计都是一个学习和整理思路的过程。借用前辈的话（抱歉忘记摘自何处了），给现有产品重设计的过程中你可以：

1. 思考这些产品为什么这么做，产品的目标是什么。

2. 结合产品的现状，分析既有问题，设计产品下一步目标。

3. 基于目标，进行重设计，并在这个过程中锻炼设计能力。

天气app信息结构较简单灵活，设计上有可以发挥的空间，因此我从一个小型天气app入手，试着做这样的一个重设计。

app：        懒人天气

version：   1.6.9

platform：  ios 8.1.1

分析

优点：清新风格；提醒功能

比较： 出于“懒人天气”是一款有创意而又具备一定功能的app, 这里分别参考了2个国内/外功能型天气应用—墨迹天气和yahoo! weather 、1个炫酷型天气应用solar、以及系统自带应用，作为功能和设计的比较。

信息展示采用扁平化设计，单色背景下用简洁白色线条勾勒出图标。有些细微之处恰好展现出了app简约之美，例如主页图标可根据当前信息的level变化明暗，空气质量为“良”时较暗，空气质量为“优”时较亮；“不适宜”做某事为暗，“适宜”为亮：

信息图标明暗变化

这里只对设计部分对比分析而不对内容过多讨论。但交互设计和运营决策是分不开的，展现的内容会驱动设计，设计风格也会影响内容。(简叔不适合插入表格，图片代替之)

天气app对比

更多国外天气类app界面参考: http://www.zcool.com.cn/show/ZMTU5NDQw/9.html

可以看出，懒人天气的优势在于强大的预报定制，省心的提醒功能与精简的界面展示，而信息多样化（地图、实景等）、突出的动态效果和基于天气信息的社交功能并不是重点。因而我们要强化核心功能，保存这些优势，同时吸取他人长处弥补不足。

---

通过自身体验，我觉得app有这几个待改进之处：

1. 首屏信息展示的两个必选图标“天气状态”和“温度”存在信息分配问题。点击左下方的“天气状态”跳转“未来小时预报”页面，列表长达40+个小时项，可上下滑动；点击右下方“温度”图标转至“每日天气概要预报”，左右滑动切换。两个图标和相对应的页面没有明显的联系，信息出现的有些突兀。

建议：“天气状态”、“温度”点入后的跳转页面采用和其他图标相同的元素展示——评估状况+提醒+图片，在此基础上左右可滑动，显示未来5天预报。（但这样牺牲了未来40+小时预报的信息，个人认为用户对未来预报可能更看重以天为单位，也可在栏目定制里定制未来N小时气象信息。）

2. 右上角“设置”图标过小。“南京”为位置信息，不可点击，与左右的“设置”、“分享”图标操作行为不一致，容易被误点。--“设置”或“更多操作”。

建议：将地点信息放大、置于合适位置（如中间），“分享”和“更多操作”图标与左滑页面图标相同大小。

3. 空气质量模块，数据展示不够大方美观。具体数据的字号偏小，与周围布局不符（其他小字仅出现在图标信息和预报的风级信息中）

建议：与下方“未来5小时”保持一致。

4. 二级界面建议进行美化，与app风格一致。

重设计

我用Sketch重绘了首屏、“天气状态”子界面、“温度”子界面，改进前后的页面分别如下。

改进前：

home page

Weather Status page

Temperature page

改进后：

Home Page

Weather Status Page

Temperature page 1

Temperature page 2

这里我主要修改了这样几处：

1. 主屏顶部的状态栏作了改动，地点文字居中，加上位置图标凸显此处为地点信息；原来左侧的年月日改为时分秒xx:xx；右边重绘的“分享”和“更多”代替了原先混乱的“分享”+“地点”+“设置”。

2. 修改了点击“天气状态”和“温度”图标后跳转子页面的信息布局。“天气状态”跳转后显示状态信息，中间图表为当日6个整点和对应状态变化；“温度”跳转后显示温度相关信息，中间为当日24小时温度折线图，且突出当前时间的温度。两个页面均可左右滑动切换日期，界面风格与主页一致。

这样，原先和图标信息无关的子页面，改进后与图标所表达的内容有所关联，和整体的图标点击跳转页面展现较为一致，并且不显得突兀变扭，与app简洁明快的风格和色彩融为一体了。