Flat Weather开发手记:设计篇

uxui

这几天闲着无聊,想着暑假可能又得找实习工作了,这次想试一试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还在设计之中,希望不久后和大家见面啦~

 

 

打赏

3 thoughts on “Flat Weather开发手记:设计篇

  1. 厉害,真正的全栈开发啊,视觉效果很不错啊。

    不过有个小建议,最大的文字,就是温度,使用了粗体和阴影,这样给人的压力特别大。而且在 MD 的设计中,阴影的使用有一层特殊的含义,就是反映出 Elevation,Elevation 越高,元素就突出,但是太多的 Elevation 会让视觉显的比较复杂。我个人的感知是「气温」与「背景」是在同一个 Elevation,因为它们同属于今日天气这个「卡片」。

    另外就是「今天」的 Elevation 相对于 24hours 和 week 的比较高,从视觉上确实可以区分这两个版块,但是利用阴影来处理,无形中又增加应用的层级。另外就是信息结构上,24 hours 的单位是「小时」,week 的天气是「天」,用 Tab 这种模式来做,并不是最佳方案,因为「小时」比「天」要更小,属于更细节的层次。

    Timeline 的结构和层级就非常好。在城市的细节当中,看到的是以「天」为单位的卡片,「今天」很详细,明天、后天都只展示概览,而想要看到以「小时」为单位的细节,需要进入到「天」这个概念中,把天放大就变成了「小时」,Timeline 用了「次级页面」来做「放大」的动作,从层次上来说更加符合用户的认知。

Leave a Reply

Your email address will not be published. Required fields are marked *