刚开始做界面设计的时候,很多时候会碰着这种情形:产品经理看了设计稿会说页面看起来不是很舒畅,有点单调,再改改……
这个时候就会很迷茫该怎么改,后来随着做界面设计的韶光越来越长,也逐渐地有了自己方法,实在有的时候一点小小的改动就会让页面看上去更舒畅,总结了一些履历跟大家分享。
一、布局
布局就彷佛屋子的钢筋构造,造得安全适用了,往里面添加元素才能知足各种预期功能的需求。

1. 间距
格式塔事理中的亲密性原则就很好地阐明了间距的主要性。干系的元素靠近一些,不干系的间隔大一些。内容与内容之间的间距、笔墨行与行的间距纵然是很眇小的差别都能让各个元素的层级更加明显。如果是一级页面承载的内容较多的,可以考虑大一些的间距,太挤会让人觉得页面透不过气。
下图通过间距的大小将音乐榜单的层级表现出来:
2. 对齐办法
对齐能让界面中的各种元素有一个比较明确的排队规则,让页面看上去更规整。
①左对齐
左对齐该当是界面中最常见的对齐办法了,特殊是在一些列表页中,由于标题内容的笔墨长度并不愿定,左对齐可以很好将每行笔墨的开头固定在同一个位置,更加整洁。
下图左边是左对齐的,对齐的边界是直线,不仅视觉上更整洁,对齐的力度更强;右边改成居中对齐后,对齐的边界是曲线,相对来说看上去就有些混乱,对齐的力度也会稍弱一些。
②居中对齐
居中对齐适用于笔墨段落不是很长的,有一定的字数范围的,类似于诗歌、歌词之类的,这样居中对齐就不会给人一种凌乱的觉得,而且相对来说会更加使视线集中。
③右对齐
右对齐一样平常用在数据列表界面中,数字个位数对齐,用户可以更快地比拟出数据与数据的差距,提高浏览的效率。
二、统一性
统一性就彷佛是给屋子装修定一个风格,干系的物件都假如同一风格的,不然就会显得别扭突兀。
1. 字体
界面设计中的字体一样平常都会用系统默认的无衬线体,由于无衬线体的字体看上去比衬线体字体更大,构造更清晰。
但是也不是必须用无衬线体,可以根据产品的风格选择得当的字体。例如下图,为了契合学习产品的特性,除了一些小字是用无衬线体更易读,别的的字体用的都是宋体这种衬线体,让你觉得回到以前读报纸的时期,拉近了你和屏幕的间隔,有了一种情怀。
2. 图标
图标相对笔墨来讲能让用户更快地理解你想表达的意思,也能提高全体界面的都雅度。但是图标与图标之间得保持一定的统一性。
①大小
大小同等是指在视觉上保持大小同等,而不是图标尺寸的大小同等。下图两个图片的大小是千篇一律的但是你视觉上会以为圆形更小一些。
所以为了让它们看上去“一样大”,尺寸不变的情形下,正方形必须要缩小一些,才能使它们视觉上同等。
②样式
图标一样平常分为线性图标和面性图标。
线性图标一样平常用在入口比较多的页面,底部菜单栏未点击状态还有一些功能按钮的地方。
线性图标的统一紧张表示在图标线条的粗细、图标的圆角、分外元素。
面性图标相对付线性图标给人的视觉冲击性更大一些,以是一样平常用于一级页面主要的入口,在页面的黄金位置吸引用户去点击,一屏一样平常不会超过10个。面性图标的统一紧张表示在图形表现手腕的同等以及图标颜色色调的同等。
三、比拟
比拟就彷佛整顿屋子,一些东西我是要放在显眼的位置平时会常用的,一些东西是要放进柜子里乃至是压箱底的,利用频率或者是主要性不同的东西摆放的位置和占用面积是不同的。
在界面设计中,不同内容放在一起有了比拟,才有吸引用户的效果。个中笔墨之间的比拟是最能将界面信息分出层次的。笔墨比拟首先是将笔墨的大小拉开差距,如果调度完了还是不能很好的将层次分开,可以考虑将字体加粗,末了还可以考虑将笔墨的明度降落来减弱笔墨的层级,但是不能有太多的明度变革,否则会显得混乱。
ios11更新之后字体的变革是大家感想熏染最深的,字号变得更大,可选字号更多,使界面对比更强烈,更具勾引性。下图以App Store中的一个页面为例,页面大标题①不但字号是最大的还给字体加了粗,能很明显感到它的主要性;接着是分类标题②,字号与热门话题标题③一样大,并且还加了粗;作为热门话题推举的标题③和详情内容④比下方新App标题⑤和详情内容⑥的字体更大更突出;详情内容④将字号减小和字体明度的降落来弱化层级和标题③形成比较大的比拟。
总结
刚做界面设计的时候总是想做得俊秀酷炫,有的时候用力过猛还得不到好的效果,韶光久了碰了好多壁之后才创造,忽略了设计最根本的部分,一些细节能够决定界面的质量。
建立自己的设计方法论,剖析界面每个元素带给用户的感想熏染,才能将界面变得更加舒畅。
本文由 @Delia 原创发布于大家都是产品经理。未经容许,禁止转载
题图来自Unsplash,基于CC0协议