Flat Weather开发手记:设计篇(下)

release2

上一篇博客Flat Weather开发手记:设计篇,我讲述了Flat weather的创意和初版的设计。但是,只有一个界面是完全不够的,这篇博客将会讲述Flat Weather其他界面的设计思路。

  • 加载页面

主界面肯定不只有一种状态,这个界面还肩负着提醒用户界面正在加载,加载出错等等功能,所以加载页面的设计也是必要的,毕竟用户每次打开都会看到。

上图是整个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去下载用一用,我也是经验有限,希望多提建议。

 

 

打赏

5 thoughts on “Flat Weather开发手记:设计篇(下)

  1. Hello,想请教一下你的博客是用什么开发的?因为我之前用的wordpress模板,感觉不喜欢.想问问你这种博客自己写需要哪些技术,看看我自己能搞定不

    1. 写wordpress 模版的话,需要设计,所以得会点PS,想要好看还得有点审美。做模版需要html,js,css还得懂点php。

Leave a Reply

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