菜鸟对APP界面设计的一些心得小结
1. 前言
当我看着我以前做的一些app界面,我意识到我应该把我的界面设计能力水平再提升一个,因为实在是丑啊!贴一些以前的设计:
现在看来,是不能看的了。我主要是做需求设计,后面也有一些美工的工作,我觉得有必要总结一下关于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的风格就是没有什么线条的扁平化方案,风格不统一,所以非常违和。
这样就好多了。
- 一个运用图标的小例子
又是这个图。看到左边那一排小图标了吗?teambition把这些图标和其对应的解释名词放在“新建项目”和“修改项目”这种用户最经常接触到的地方,借此强化用户对于这些图标的记忆。在其他的地方就可以只放上图标不做解释(比如说工具条),大量节省空间。
4. 拿来主义
截取,借鉴,使用,修改
这是我等菜鸟最经常使用的方法。设计直接拿来用,反正网络上有那么多配色库、图标库,还能临摹别人的设计。
不过一直临摹别人也不好,有的时候还是得从原素材里面直接抽取有用部分。这里分享一个小技巧:
比如说我想弄一个夏日风格的配色,但是我这样的菜鸟到配色网去看色卡没感觉,怎么办?
百度一张有夏日气息的图片,比如这个:
打开PS。没有PS?那就用Windows画图,用取色器自己找颜色吧。
取色器示意图
取色结果(Windows画图怎么搞的,整个画面的色调都变了)
可以想见,两种蓝色和一种白色可以作为界面的主要颜色,另外两种颜色作为辅助颜色。蓝色在上黄色在下,绿色作重点标记色。
5. 延伸阅读
菜鸟对APP界面设计的一些心得小结的更多相关文章
- 26款能够吸引用户的 iPhone App 界面设计
在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...
- APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)
正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...
- 最实用的APP界面设计知识,有温度的APP设计(转)
在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文.顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华.分享给25学堂的app设计师们. 当然,下面的这些app设计知识点是来自 ...
- [UI] APP界面设计流程
此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.
- app界面设计字体规范
通过对不同类型的app进行总结,总结出app的字体规范. 一.字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方.英文字体是: San Francisco 2.Android ...
- APP界面设计 大概总结
APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...
- 20款优秀的国外 Mobile App 界面设计案例
在下面给大家分享的移动应用程序界面设计作品中,你可以看到不同创意类型的视觉效果.如果你想获得灵感,那很有必要看看下面20个优秀用户体验的移动应用 UI 设计.想要获取更多的灵感,可以访问移动开发分类, ...
- APP界面设计之页面布局的22条基本原则
移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...
- 2013移动APP界面设计趋势与设计理念
用户是上帝,一切还得从应用说起.为此,国外著名的应用设计师Gannon Burgett结合自己多年实战经验归纳总结了2013年App设计发展的13大趋势.我们应该时刻记着这13点. 1.扁平化设计—— ...
随机推荐
- 并发编程—— FutureTask 源码分析
1. 前言 当我们在 Java 中使用异步编程的时候,大部分时候,我们都会使用 Future,并且使用线程池的 submit 方法提交一个 Callable 对象.然后调用 Future 的 get ...
- 24.Linux-Nand Flash驱动(分析MTD层并制作NAND驱动)
1.本节使用的nand flash型号为K9F2G08U0M,它的命令如下: 1.1我们以上图的read id(读ID)为例,它的时序图如下: 首先需要使能CE片选 1)使能CLE 2)发送0X90命 ...
- 一.JDK版本切换批处理脚本
我们平时在window上做开发的时候,可能需要同时开发两个甚至多个项目,有时不同的项目对JDK的版本要求有区别,这时候我们可能会在一台电脑上安装多个版本的JDK,如下图所示:
- mahout 使用
最近在做mahout源码调用的时候,发现一个参数:startPhase和endPhase,这两个参数是什么意思呢?比如运行RecommenderJob时,可以看到10个MR任务,所以猜测是否是一个ph ...
- 浙大月赛ZOJ Monthly, August 2014
Abs Problem Time Limit: 2 Seconds Memory Limit: 65536 KB Special Judge Alice and Bob is playing a ga ...
- 【C#数据结构系列】查找
一:查找 1.1 基本概念和术语 查找(Search)是在数据结构中确定是否存在关键码等于给定关键码的记录的过程.关键码有主关键码和次关键码.主关键码能够唯一区分各个不同的记录,次关键码通常不能唯一区 ...
- Android Service基础知识你知道多少?
Android四大组件-Service 多次调用startService会怎样?会执行多次onCreate吗? StopService在哪里调用?stopSelf在哪调用? 怎样使Service被ki ...
- ESB企业服务总线
ESB是企业服务总线(Enterprise Service Bus)的缩写,是中间件技术与Web Service等技术结合的产物,也是SOA系统中的核心基础设施.ESB就是一个服务的中介,形成服务使用 ...
- python学习之老男孩python全栈第九期_day001知识点总结
1. Python2与Python3的区别: Python2:源码不标准,混乱,重复代码太多: Python3:统一标准,去除重复代码. 编码方式: python2的默认编码方式为ASCII码:pyt ...
- 你不知道的JavasScript上篇·第五章·原型·下
5.差异继承 继承意味着复制操作: 差异继承: 基本原则是在描述对象行为时,使用其不同于普遍描述的特制. (我的理解是只用对象自身的而不用普遍继承的像是toString(),valueOf()这种方法 ...