要想让你的设计界面更精致,除了掌握理论知识之外,还需要我们了解一些常见的问题与解决方法。今天为大家分享让设计界面更精致的一些小技巧,大家可以看一下!


图标对齐


在界面设计中,我们会遇到很多的图标,虽然我们想要让图标整齐有序、尺寸统一。但实际情况却不允许,所以我们可以给每个图标统一添加相同尺寸的矩形图层作为背景板,然后隐藏后再整体编组,这样就可以让每个图标尺寸统一了。

想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!
如果遇到一些不规则形状图标,尺寸比较特别,图标在背景板上完全居中的话,可以打开首选项中的图层项,关闭契合像素功能,拖动图标或者用对齐功能让图标与背景板对齐。
想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!
也可以根据情况调整图标在背景板中的位置,例如可以将左右箭头图标贴合背景板左右两边。
想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!


圆角细节


界面中圆角设计使用广泛,因为圆角能让用户感到舒适。可以在封面、卡片、按钮等使用圆角,也可以在细节处理中使用圆角。例如下图头像和背景图的衔接处、按钮和底栏背景的相交缺口处,如果使用切割边角会显得生硬。

想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!
而添加圆角后,用户视觉会更加柔和。
想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!

下面介绍在sketch中快速绘制这类圆角衔接的方法:

以下图为例,头像的圆形描边需要单独画一个白色的圆形图层,而不能直接在头像上添加描边。然后把圆形图层和白色矩形图层设为联集,再将图层路径合并。并在两个衔接处的两边各添加一个锚点,这两个锚点和衔接点的距离要相等,因为这个距离决定圆角大小,再根据需要进行调整。把衔接点的锚点类型改为“笔直”,给这个锚点添加圆角半径。衔接点的圆角绘制就完成,另外也可以使用布尔运算来画出圆角。

想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!


标题极限值


标题信息在界面设计中很常见,所以我们需要在设计中注意标题极限字数。

比如在腾讯动漫社区改版中设计标题时,产品规划标题的字数为12个字符,在右边有看漫画按钮的情况下是显示不完全的。这个情况就需要考虑设计极限值的显示方案。方案有:

1、显示不完全时后面显示“…”;

2、换行显示。考虑到详情页需要将标题完全展示。

3、标题显示不全时左右滚动展示。

方案一一看就知道不行,而方案二在单行和双行情况下视觉效果不统一,方案三可以在保证视觉统一同时显示完整的标题。

想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!

背景蒙层

在设计封面和背景图时,为了让用户看清文字,我们都会在文字下添加一层渐变蒙层。在设计详情顶部背景图时,可以将封面图模糊后作为背景图案,然后在背景上加深色(通常使用深灰色)的半透明蒙层,这可以让背景图看起来更加柔和。

下图中,我们可以看出右边的效果更加好。但在实际中需要根据客户端拾取背景图颜色后生成对应色相的深色蒙层,但这需要制定一系列拾色和生成对应色值的规范,并且开发成本偏高。

想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!


内容边界渐变过渡


在页面设计中有时会遇到信息容器边界固定,容器内信息可以滑动的情况。例如下图顶部导航和音乐播放的歌词页面,这种场景下一般容器边界不会做明显的界限,如果内容在边界处是直接被裁切的话体验的感受就会比较割裂。这里可以在容器边界增加渐变过渡,这样信息在边缘的过渡会更加柔和。

想让界面更精致?腾讯高手教你10个立竿见影的设计技巧!
这种渐变的过渡的应用场景还有很多,比如浏览简介或者文章时,需要隐藏部分内容并提供展开阅读全文的操作。利用渐变过渡也能隐喻还有未完全展示的内容,降低用户的理解成本并且也能够让用户有心理预期。
在sketch上可以快速呈现这种渐变过渡,如果背景是纯色的话可以在边界处添加一个与背景色相同颜色的色块,并给色块添加不透明度从0~100的渐变。如果遇到背景复杂的情况,可以绘制一个和容器相同大小的矩形,在矩形边缘添加不透明度从0~100的渐变,建立蒙版把信息剪切到矩形中。


动态流图片适配


动态流是我们非常常见的样式,是分发用户生产内容的主要载体之一。主要包含了用户信息、文字、图片和视频等内容。一般情况支持九张图片或一个视频,在有多张图片时,可以如下图做成宫格的样式适配,每张图片截取中间的正方形部分。

而只有一张图片或者视频时,为了保证图片和视频的预览效果,通常会做大尺寸的预览图,而图片的宽高尺寸并不固定,所以只截取中间方形的方案并不能满足要求,我们要根据这个情况做单独的适配方案。首先我们要设定一个裁切的比例,比如我们取竖图最小裁剪宽高比为2:3,横图最大裁剪宽高比为3:2(这里的宽高比并不是固定的,可以根据实际需要自己定义比例,采用4:3、16:9等比例都是可以的)。这样当图片宽高比小于2:3时,我们可以把图片中间区域按宽高2:3裁剪出来;图片宽高大于2:3并且小于3:2时可以按原图比例预览;而图片宽高大于3:2时,把图片中间区域按宽高3:2裁剪出来。另外要注意要给图片设置最大高度,否则图片高度太高会减少页面信息承载量,降低阅读效率,相应的也要限制最大宽度,否则会使图片规则不统一,从而页面适配效果不协调。
同样的,这个规则也适用于视频,由于全面屏手机占比越来越高,这些手机拍摄的视频大多是19:9、20:9的宽高比例,相比视频常用的16:9的比例更加细长,所以横屏视频可以统一裁剪为16:9比例,而竖屏视频可以裁剪为9:16比例。
动态流图片适配的核心是制定一个适配的规范来保证阅读的舒适度和效率。而这个规范并不是恒定的,可以根据自身平台需要来制定,以上仅作为一个示例供参考。

上面这些方法可以让你的设计界面更精致,大家也可以发散思维,创造更多有创意的方案。