体验设计进阶技巧-教你打磨页面细节

2022-5-5 纯纯

随着体验设计的持续发展，行业内各领域的体验设计质量都有了很大的提升，并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求，也是我们拉开竞品差距的关键一环。我们平时可能阅读了很多理论知识文章，但往往在实际工作中却较少运用。学习掌握理论基础知识固然是很重要的，但在设计执行时掌握设计技巧也更能提升工作的效率和质量。那么在设计执行层遇到问题有没有一些立竿见影的解决方案呢？本篇文章分别从视觉、内容和交互三个角度总结了十个界面细节设计点，希望可以帮助你遇到问题时另辟蹊径，延伸更好的设计思路。

在封面和背景图设计的场景中，我们为了让封面上的信息能够更容易看清，通常会在文字下添加一层黑色半透明或者渐变蒙层，但你有想过这个蒙层可以不止是黑色的吗？

在设计社区话题详情顶部背景图时，我们采用封面图模糊处理后作为背景图的方案，为保证信息能够清晰显示会在背景上加一个深色半透明蒙层。当用纯黑色作为蒙层时浅色背景可能会显得很脏，这时可以改用深灰色让背景看起来不会太脏，加入深灰色可以减弱部分背景的黑色让背景图看起来更加柔和。下图左边是用黑色#000000、30%不透明度，右边是深灰#333333、30%不透明度。可以看出右边方案的效果明显更清爽一些。当然更好的方案是通过客户端拾取背景图颜色后生成对应色相的深色蒙层，但这个方案设计相对比较复杂。需要制定一系列拾色和生成对应色值的规范，并且开发成本偏高。有条件的话也可以考虑应用。

界面中使用圆角设计更能让用户感到亲和力和舒适感，所以运用场景也非常广泛。除了比较常见的封面、卡片、按钮等等圆角的使用场景，在一些细节的处理运用圆角也能提升设计品质。比如下图中头像和背景图的衔接处、按钮和底栏背景的相交缺口处如果运用常规的切割边角就比较尖锐，会略显生硬。

而添加了圆角处理后视觉上会更加柔和更协调，对比一下前后的方案不难发现圆角的效果更胜一筹。不要看只是一点很小的细节，其实也体现了设计师对细节的细心追求，用户看了也会体会到设计师的用心。

另外再介绍一下我个人在sketch中快速绘制这类圆角衔接的方法。以下图为例，首先头像的圆形描边需要单独画一个白色的圆形图层，而不能直接在头像上添加描边。然后把圆形图层和白色矩形图层设为联集，再将图层路径合并。然后在两个衔接处的两边各添加一个锚点，注意两个锚点和衔接点的距离一定要相等，这个距离决定了圆角的大小，可以根据需要来调整。之后把衔接点的锚点类型改为“笔直”，再给这个锚点添加圆角半径。这样衔接点的圆角绘制就完成啦。另外运用布尔运算来画出圆角也是可以的，具体方法可以根据个人习惯来选择。

我们在页面取色时经常会给背景色和阴影等结合场景带有一些颜色倾向，以达到更舒适的视觉效果，其实这个方法也适用于文字。为了提升效率，我们习惯了在选择字色时使用一套设计规范里的颜色，比如#333333、#999999等等。但是个别的特殊模块我们是可以根据实际情况调整以获得更好的视觉效果的。比如下面这个案例是一个热帖榜单的入口模块，为了提高信息层级让页面更有活力，这里选择用浅黄色作为背景。如果使用规范的字色与背景的结合会相对不太协调，这里选择字色时就可以让文字颜色和背景颜色带有相同的色相，选用高饱和度低明度的颜色，并且次级信息同时可以带一点不透明度。让整个模块视觉更统一，信息与背景更融合。

类似这样的场景其实还有很多，有时我们也不必拘泥于设计规范中，适当的根据模块定制化一些细节可以达到更好的视觉效果。

我们经常会遇到一个页面中有多个同级图标排列的情况，不管是用宫格排列或是列表排列都需要每个图标整齐有序、尺寸统一。但实际情况下不可能每个图标尺寸都完全统一。一般这种情况我们可以给每个图标统一添加一个相同尺寸的矩形图层作为背景板，将背景板隐藏后再整体编组，这样一来就能保证每个图标所在的组都是相同的尺寸就能统一对齐了。

然鹅，我们有时会遇到一些不规则形状图标，尺寸是奇数甚至是带小数的。这种情况图标如果要在背景板上完全居中，我们可以打开首选项中的图层项，关闭契合像素功能，然后可以拖动图标或者用对齐功能让图标与背景板对齐。不要忽略这一两个像素的差别，这些微小的细节往往决定了界面设计的严谨和精致程度。

另外，我们可以根据情况灵活调整图标在背景板中的位置，例如左右箭头图标为了与页面其他内容边距对齐，可以将图标贴合背景板左右两边。这样就能减少后期开发还原调整的工作量，提高工作效率。

标题信息在界面设计中使用频率非常高，而在设计过程中我们可能会忽略极限字数的情况，导致开发还原时实际效果不理想。下面以一个案例来分享一下标题极限值的处理方法。

在腾讯动漫社区改版中设计话题详情页的标题时，产品规划标题的字数为12个字符，在右边有看漫画按钮的情况下是显示不完全的。这个情况就要考虑设计极限值的显示方案。常规的方案有：1、显示不完全时后面显示“...”；2、换行显示。考虑到详情页需要将标题完全展示，所以方案一不可行。而方案二在单行和双行两种情况下视觉效果不好统一。最终经过思考决定使用方案三：标题显示不全时左右滚动展示，可以在保证视觉统一同时显示完整的标题。

同样的，在很多情况下我们由于空间受限无法展示完整信息时，这个方案也不失为一个很好的选择。

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

这种渐变的过渡的应用场景还有很多，比如浏览简介或者文章时，需要隐藏部分内容并提供展开阅读全文的操作。利用渐变过渡也能隐喻还有未完全展示的内容，降低用户的理解成本并且也能够让用户有心理预期。

另外在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比例。

动态流图片适配的核心是制定一个适配的规范来保证阅读的舒适度和效率。而这个规范并不是恒定的，可以根据自身平台需要来制定，以上仅作为一个示例供参考哦。

随着沉浸式设计的趋势，很多页面会采用无标题栏的设计。例如下图的个人中心页面，顶部利用背景图来渲染品牌氛围。但是这类无标题栏页面的上滑交互普遍有个缺陷，就是如果未经处理上滑后内容会与顶部电池条者是置顶的按钮位置重叠。这种类似“穿帮”的情况给用户的体验就是设计处理不够严谨。然而这种交互细节也是可以优化改善的。

优化的原理也很简单，就是在上滑过程中添加一个标题栏来分割页面内容，从而让内容和顶部元素不重叠。标题栏可以随上滑高度改变不透明度，以达到柔和的过渡从而实现丝滑的交互体验。

类似的处理方案在各大平台也有较为广泛的应用。

在用户体验发展的趋势中，无论是交互的反馈或者是图片、信息等都趋于由静态向动态发展。常规的静态图片承载的信息相对有限，所以在有限的载体内让内容动起来展示更大的信息量不失为一个很好的选择。

在旧版本的iOS12系统中有一个视图选择的功能，用户在这个页面可以选择标准视图和放大视图，并且有三张图可以滑动展示不同场景下两个选项的差异，但是这个方案需要来回切换标签和滑动图片来对比差异，效率很低。而在之后改版的iOS13系统中，这三张静态图被替换成了两张动图，轮流切换三个场景的页面，用户不需要再滑动图片就能更加直观的对比两个选项的差异。这个小改动不仅可以让图片展示更多的信息，还能减少用户的操作成本提升操作上的体验，让阅读效率更高。