菜鸟对APP界面设计的一些心得小结

1. 前言

当我看着我之前作的一些app界面,我意识到我应该把个人界面设计能力水平再提高一个,由于实在是丑啊!贴一些之前的设计:html

如今看来,是不能看的了。我主要是作需求设计,后面也有一些美工的工做,我以为有必要总结一下关于UI设计方面的经验了。
另一方面是,我看别人作界面都是直接拿现有的来用,没有本身作,感受很差,这种就会出现“作的很好看但的确很别扭”的状况。
界面是整个app的脸面,不仅是决定了用户使用这个app的第一印象,还伴随着用户每次的使用,其重要性不言而喻。微信

2. 一些经验

2.1 框架

  • 对于同一组图标和文本,大小要相同,位置要对齐(水平和垂直),间距要相等,字体要同样。
    这应该是对于UI设计最基础的一点了。一组图标排成一行,若是连在一条直线上都作不到,那就太失败了。我用市面上的app,还历来没有看见过一个不是横平竖直的。失败的例子:

  • 按照功能的重要性排列组件。
    虽然这个的确很重要,但是我没仔细去考究。半成品作出来给人试用,发现本身觉得的80%人都要用的功能却没什么人用,反而是要点好几回的功能很是热门。这里就得改页面逻辑了,不仅是简单的美工问题。

2.2 字体

  • 尽可能不要用衬线字体,尤为是系统默认的宋体,超级丑。
    如今扁平化是潮流,因此若是不是什么古风之类的设计的话,尽可能少用衬线字体,多用无衬线字体。衬线字体很差掌控,若是真要用的话,我我的的经验是这类字体通常都出如今界面比较简洁的位置,要大量留白。

  • 产品品牌单独出现的时候,要为其预留专用的字体方案,其余字不能用这种字体,以凸显出品牌的重要性。
    logo的字体、颜色等通常是通过精心设计的,即便是一些极简风格的logo,字体和大小也不是随便选的。产品logo至少要用一种可以展现产品特点的字体,而不是随便用普通字体加大加粗完事。下面是Teambition的logo:

2.3 配色

  • 图标的背景最好不要和页面背景色同样,若是非要同样,请加统一的框。
    要是图标的背景色要和页面背景色同样,就会给人一种很奇怪的感受,好像这个图标比其余图标小了一圈同样。由此引伸出的一个结论是:每一个组件都要分开,泾渭分明。看看QQ头像,是否是都是圆的?微信头像,是否是都是方的?失败的例子:

  • 确保任什么时候候界面上都要至少有3种颜色。
    走简洁白色系风格的app,通常都会活用浅灰色色块,白板一块确定会让人瘆得慌,而且会使用更多的标注来讲明信息。app通常都会有一种主题色,像是Facebook蓝什么的。而且根据经验,主题色最经常使用的功能就是标记本页面最重要的组件。看看这个例子,天蓝和浅粉都用在刀刃上了:

  • 绝对不要用纯黑。
    之前在某网站上看到的。传说在任何UI上都看不到纯黑色,看到的黑色都是掺了一点灰或者是其余颜色,像Facebook的黑色就掺了一点主题蓝。(仔细看上面那个黑条,取色器显示这个黑条的RGB是1,1,1。我以为1,1,1黑和30,30,30黑我等凡夫俗子真的分辨不出来)

3. 压缩信息

颜色 > 框架 > 图标 > 词语 > 文字网络

在扁平化的设计里面,色块绝对是重中之重。颜色自己带着大量的信息,信息能用颜色表示的尽可能不用框架表示。我认为扁平化的要义,就是用最少的笔墨,展示出最多的信息。app

  • 一个运用颜色的小例子:
    这是界面修改前的样子,巨丑。

用框架把每一行区分开来,有那么点意思了,可是整个app的风格就是没有什么线条的扁平化方案,风格不统一,因此很是违和。框架

这样就好多了。工具

  • 一个运用图标的小例子

又是这个图。看到左边那一排小图标了吗?teambition把这些图标和其对应的解释名词放在“新建项目”和“修改项目”这种用户最常常接触到的地方,借此强化用户对于这些图标的记忆。在其余的地方就能够只放上图标不作解释(好比说工具条),大量节省空间。字体

4. 拿来主义

截取,借鉴,使用,修改网站

这是我等菜鸟最常用的方法。设计直接拿来用,反正网络上有那么多配色库、图标库,还能临摹别人的设计。
不过一直临摹别人也很差,有的时候仍是得从原素材里面直接抽取有用部分。这里分享一个小技巧:ui

好比说我想弄一个夏日风格的配色,可是我这样的菜鸟到配色网去看色卡没感受,怎么办?
百度一张有夏日气息的图片,好比这个:.net

打开PS。没有PS?那就用Windows画图,用取色器本身找颜色吧。
取色器示意图

取色结果(Windows画图怎么搞的,整个画面的色调都变了)

能够想见,两种蓝色和一种白色能够做为界面的主要颜色,另外两种颜色做为辅助颜色。蓝色在上黄色在下,绿色做重点标记色。

5. 延伸阅读

APP界面经常使用的五种颜色搭配
配色网
阿里巴巴矢量图标库

相关文章
相关标签/搜索