这几天闲着无聊，想着暑假可能又得找实习工作了，这次想试一试iOS开发，但是手头上又没几个现成的iOS项目，所以想着新开发一个iPhone端的app，这样找工作的时候也好说话。但是开发一个什么app呢，想了半天觉得开发一个天气app吧，以前刚学Android开发的时候就想做一个但是却一直没有行动，这次刚好在iPhone上试一试。
写一个天气app，其实从编程角度来说是很简单的：找个第三方api，解析下json，没了。几乎没有任何科技含量，可是市场上却有很多家工作室上开发的天气应用：
首先是雅虎天气，这个app我用了很多年，使用了各个地方的照片做背景，很有创意。
其次是老牌应用墨迹天气，很早之前的诺基亚上就用它看天气，但是虽然是老牌应用，但是设计上我感觉实在是太落后了，感觉是从刚通网的村子里抓了个老太太来做的界面设计。
之后的两个截图分别是BBC weather和iOS自带的天气应用，可以看出走的都是简约路线。
还有两款天气App，是在Android上比较出名的，一个是几何天气，一个是Weather Timeline，都是遵循了Google的Material Design风格，这年头，只要遵循Material Design的应用都不会像淘宝的设计一样难看。
分析了这么多竞品，感觉，天气app是个程序员都会写，而且功能都差不多，不难实现，但是要想做一款能让人眼前一亮的天气app，那就只能从设计上入手了。
那么接下来想一想，我的app应该有什么设计特色呢，身为一个喜欢简约设计的开发者，我设计的app应该一向都是易用而简单的。
后来想起了Google Calender，想起来Android 5.0之后Google日历和换了一个样子一样，感觉整个充满了活力，这一切都是因为app中加入了插画，而且是那种扁平风的简约型插画，简单的线条就能表达出来一个场景，比如下图中的Drink日程，一个桌角，两个酒杯，简单却清晰。
这个观念是相当重要的，在app设计中有两点需要照顾
Clarity 清晰感
让用户能够在看见界面时第一眼就抓住主要内容，想一想Google Glass，终结者系列，钢铁侠里面平视器的设计，即使看起来很复杂却能让人抓住主要的内容。
Clean 极简主义
个人认为是界面不能做的太花，就像Google Material Design一样，一个主色一个配色。
作为一个天气app，做到简约，不难，因为主要信息就是，天气状况（晴天，多云）和当时的温度两个点，所以要把这个信息突出来做到Clarity。
这是整个应用一开始的设计，哈哈，是很简单，纯色背景，详细信息用白底，可是这未免也太简单了，需要好好改善一下。
所以我决定加入一些符合当时天气的插画。使用扁平化风格设计。灵感来源一个是Google Calender中的插画，还有一个就是一款游戏，alto’s adventure
是我很喜欢的一个扁平风格的游戏，虽然这个游戏类型是”滑雪大冒险“先提出的，但是这个游戏却超越了前驱。
还有就是一个单机游戏，Firewatch （看火人）
分析一下每一张截图，整个画面很简洁，主色一般都是一个色系，使用一种颜色的不同深浅，和透明度来实现空间立体感。好了看着也不难画，自己试一试吧。
我用上面的风格试着画了几幅，感觉不错啊，比纯色背景提升了不少，但又不失简约，为了明确当时的温度，我在温度后面加上了一层阴影来和背景区分开。
做了几幅效果图，感觉还不错，挺好看的，好了就这么定了，就这么设计吧。
接下来说一说我的设计工具。
Adobe illustrator
Adobe AI是一个著名的矢量图绘制软件，我的设计中所有的扁平化插图都是由AI绘制的，其实我也没咋用过这个软件，下图是我第一次试手的时候画的，用了十几分钟。
不是很难，用不同的颜色深浅来区分远近，山脊上有些小细节，还有灯塔之类的点缀，最后在通过大树的稀疏和密集造成点立体感就好了。但是这幅画太复杂了，有4层山，我最后试下来景物用两层就差不多了。
怎么设计呢，我说说我的想法，比如现在想设计一张雾霾天气下的插图，说道雾霾，那我第一个想到的是北京。。。北京和雾霾相关的建筑有什么呢，我觉得是大裤衩，为什么不用天安门是因为太矮了，而且不能体现出来北京是个大都市，这个插图是15：16的，画太矮的建筑物会使得天空留白太多，所以我画了一个大裤衩和几个办公楼上去，整个色调使用灰色。
Sketch
Sketch是macOS上一个专门进行UI设计的软件，上面我app的效果图就是由这个软件画的
Material Design色卡
Google 官方提供的色卡，超级棒
还有嘛。。。一个Adobe illustrator的快捷键表，我用AI实在是不熟。
以上就是我对于这个天气app大概的的设计思路。
但是，只有一个界面是完全不够的，来接着看看剩下的界面吧。
加载页面
主界面肯定不只有一种状态，这个界面还肩负着提醒用户界面正在加载，加载出错等等功能，所以加载页面的设计也是必要的，毕竟用户每次打开都会看到。
上图是整个app的两个主要界面的设计，在天气加载界面的设计中我使用了浅绿色并且背景图看起来比平时更加简约，屏幕的底部肯定不能空着，我设立了一个九个圆圈的动画，这九个圆圈会在加载的时候随机的变换颜色深浅来告知用户app并没有卡死，这样做的效果比只是单纯地显示一个Loading好得多。
对于天气列表的加载页面我使用了同样的思路，中间对话框中会有若干个圆向外扩散的动画来告知用户这个界面的数据正在加载。
色调
色调也是很重要的一点，flat weather采用了单一色调，比如第一组界面，因为背景图的主色为浅绿色，所以相应的元素将会与他颜色同步，下层tabbar的高亮颜色，天气图标的颜色都使用了这个颜色，在点击天气状况图标后会出现一个详情的对Popup，色调同样是依照主色调呈现。如果颜色过多或者过于复杂就会造成界面太花。但是颜色如果全是黑色和灰色又会使得界面过于单调所以设计的时候要好好把握。
善用模糊和阴影
阴影可以增加界面的层次感。模糊可以引导用户重点，让界面中不必要的信息变得模糊可以适当地引导用户重点在什么地方。好好看看上面的图片，因为底下打了一层阴影，第一张图的白色才没有和背景荣威一体。
第一幅图：背景图和下方的白色区域中间有一层阴影，增加了UI层次感，显示温度的Lebal底下打了一层阴影为了防止背景图出现和白色相近的颜色而导致用户识别温度造成困难。
第二幅图: 是一个对话框，但是包含的信息很多，所以在下层打了一层模糊并且使得背景变暗来让使用者眼睛聚焦在对话框上。
第三幅图: 设置界面，每个按钮下层都有阴影来和背景做区分
第四幅图: 天气列表，背景如果是纯色的话太难看，和设置界面背景一样又太杂乱，所以使用了模糊，这一点和我的iPhone锁屏壁纸和桌面壁纸原理是一样的。
错误界面
这个是一个老问题了，是不是Windows电脑每次蓝屏的时候你都气急败坏？界面上的英文一个字都不认识？不过微软这几年到是在蓝屏的体验上好了很多，虽然Apple电脑的故障页面也不好看，但是我没见过。
不过这也不能怪微软，毕竟操作系统内核故障之后所有的硬件驱动肯定都歇菜了，想要蓝屏的时候做点特效也是力不从心的事情。不过微软到时让蓝屏的事情少发生一点啊！！！！
在设计Flat Weather的时候，我曾认真的想过应该如何给提示用户没有联网、网络请求超时，服务器故障这几个事情。我总不能在界面上写下 ERROR_CONNECTION_TIMEOUT 这些字吧，这就太不友好了，出现这些字简直是在引导你卸载我的app。于是我拿出了以下的设计。
第一个很好看出，提示是On plane？指的是飞机上飞机不让联网，让用户检查网络问题。
第二个也不难猜，In space？离地球太远了wifi信号弱哈哈哈。
第三个我希望用户永远不要看见，因为服务器端也是我写的而且我是个新手，所以服务器错误的时候会出现这个，Oops！（糟糕），并且告诉用户我会尽快恢复服务。
按钮的行为号召
从图形化界面诞生的那一天起，如何让用户知道这东西可以按下和引导用户在若按下按钮就成了一门学问。
Windows最早使用了一种3D设计来告知用户这是个按钮，Close周围的虚线代表了这是一个高亮的选项。
在Apple的macOS上使用了不同的颜色来引起用户注意一个按钮并且号召用户按下。
再来举几个例子来看看按钮是怎么号召你按下的
知道为什么加入购物车比立即购买还要显眼嘛？因为加入购物车的代价小，点一下就好，不会有任何花费，但是点击立即购买后就要购买了，对于13888的价格用户可能不一定会去在第一时间购买而是加入购物车观望。
在iOS 7发布之后，扁平化成了一个潮流，所以说以上这两种按钮都是不适合扁平化设计的。但是，不同的颜色和字体可以对用户产生号召：
图1：iOS 10的删除提示对话框，Delete高亮为红色并且加粗
图2：Facebook的好友请求界面，最显眼的是Confirm按钮
图3：Flat Weather，Remove按钮背景为红色并且Remove加粗，Cancel为灰色而且没有加粗。
这些不同的设计会对用户的操作构成潜移默化的影响。
- 图标设计
这个我实在是讲不出来，摸索了很久，为这个app设计了一些图标，放一朵云一个太阳太大众化了，画三个圆加阴影又被说太丑，最后设计出来第三个。还是对称的好看一些。
用户第一次使用的引导
用户第一次进入app的时候，按理说应该没有城市，那么如何引导用户去添加一个城市呢？如何去告诉用户每一个天气图标都是可以按下并且显示详情的呢（别指望用户在你app的商店页面看预览图会发现有这个功能）？这时候就得进行适当地引导使得用户正确使用app。
下图是flat weather首次运行时候会出现的情况，引导用户添加一个城市，告诉用户天气图标是可以点的（因为那个图标在第一眼并不能被看出来是一个按钮），详情列表是可以滑动的。
结束语
在这个世界上，有多少人能设计出好的界面却因为不会编程而不能实现一个产品，有多少人有着高超的编程技巧却没有界面设计能力，我不希望成为这其中任何一个。每个人都应该懂点设计。
要想做好一款产品其实远没有这么简单，要操心的事情还有很多，在UI设计，交互设计，开发者都得互相配合，才能确保一款产品有着良好的用户体验。看看锤子手机的发布会，他们的交互设计师不是因为一个动画调整几百次吗，这可能不是说大话，是真的有可能的。
顺便说下这款我个人开发的App已经上线了，欢迎大家到App Store去下载用一用，我也是经验有限，希望多提建议。
PS：如果想看关于这个app的技术性问题可以去我的博客MikeTech
