UI Demo Tutorial

我们拿一个普通的社交软件的例子来做示范,假设我们要做一个与微博类似的客户端,那么将从下面几个方面开始考虑。

整体布局

插播:很多人觉得自己不会设计,看到图形和颜色就头大,但是我认为,我们只是没有好的灵感来源而已。和写文章一样,天下设计也是一大“抄”。“抄”的过程,就是取其精华、去其糟粕的过程,我们只要有基本的鉴赏能力,就能做出一个符合规范和审美的“不错的”app设计。

此处为正文开始
那么我们要“抄”,第一步就是按照我们的需求来拟定一个整体的布局。由于我讲的主题更偏向“程序员做设计”,所以我们这次就不考虑美观上的创新或项目idea的创新了。

好的,现在进入正题
作为一个社交软件,我们先来看一下微博:

我个人是不太喜欢微博默认的橙色配色的,但是这个配色其实很符合需求,然后微博这个底部的tab bar也是比较简单清楚的。(这里提醒一下,iOS设计里的tabbar一般都是要求既有icon又有文字的,这样不容易造成用户的误解)

那我们再看一下它不够友好或者我们不喜欢的地方。我从自己的角度出发,不太喜欢下面那个tabbar中间按钮的圆角矩形的设计,我更偏向于圆形的设计,就像这样:

所以我决定在我们的设计中选用圆形button。

然后接下来的一步是设计基础配色。我认为,橙红色系一般比较适用于较日常(微博)、娱乐性(唱吧、全民K歌)的社交app,而蓝色系则更适用于商务(钉钉)、实名制(facebook)等类型的社交app,然后绿色系一般偏向环保、健康等类型的社交app。假设我们想做一个轻商务型的app,例如车友之间的社交软件,那么我选择蓝色作为基调,就像这样:

  1. 我们先搜搜看有没有ios blue关键词的设计(:new_moon_with_face:就是这么简单粗暴)
    发现了这个,看上去不错:

  2. 好的我们着手开始抄,抄完效果如下:

接下来,我们照抄tabbar布局(喂):首页、消息、发布、发现、我的:new_moon_with_face:,这里的icon我也不是很喜欢,所以准备换个风格,那么我们来看看有没有我们喜欢的风格:

  1. 搜一搜tabbar关键词,找到了这个,感觉不错:

  2. 好的我们又着手开始抄,效果如下:

至此,我们的整体布局框架就搭好了。

每个界面的布局(这里拿一个界面作为例子)

我这里拿“我的”做例子主要是比较简单而且实用。

假设我现在没有什么构思,那么我又开始在dribbble上搜索了,看到了这个:

我觉得他的tableview cell设计很符合我的想法,那么我又开始抄了:new_moon_with_face:

我的实现结果如下:

这里就可以用到之前推荐的几个插件了!

跳转

由于时间关系,这次暂且不讲,不过跳转也是一门学问……