Matrix 是少数派的全新产品，一个纯净、小众的写作平台，我们主张分享真实的产品体验，有实用价值的互联网领域经验、思考。欢迎忠于写作，喜好分享的朋友参与内测。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。
本文内容仅代表作者本人观点，文章对标题和排版略作修改，原文链接。
这几天闲着无聊，想着暑假可能又得找实习工作了，这次想试一试 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？离地球太远了 Wi-Fi 信号弱，哈哈哈。
- 第三个我希望用户永远不要看见，因为服务器端也是我写的而且我是个新手，所以服务器错误的时候会出现这个，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。
原文可获取应用下载链接：天气应用 Flat Weather 的设计历程 | Matrix 精选
喜欢少数派？欢迎关注我们的微博：@少数派sspai ，微信公众号： sspaime
少数派（ http://sspai.com ）
