10条UI设计视觉表现技巧-第2期

从感官体验的角度发现优秀产品的设计解决方案，积累不一样的设计表达，灵感来源于日常的积累和反复磨练后的沉淀。通过看，提升我们的眼界；通过写，提升我们的转化；通过练，提升我们的效率。

希望本栏目的总结可以带给大家抛砖引玉的作用，引导大家坚持体验产品，养成体验和记录的习惯，沉淀更多的设计思考。

01. 内容与手势的联动设计

交互手势在移动端设计场景中至关重要，手势的变化和内容的联动关系，决定了是否可以获得更高的用户体验。

比如抖音的短视频播放设计中，进度条拖动过程中除了时间数字变化以外，数字的位置会随着手势的方向位移。联动效果的设计感官体验明显，内容传播的关注度更强。

抖音

02. 内容切换的场景模拟化设计

以真实场景模拟设计表现，在 UI 设计中比较常用，带给用户更强的场景代入感。

比如千聊 App 首页的免费听直播栏目，直播预告的时间切换就像频道调频一样，切换到自己感兴趣的内容。自然流畅的动效滑动，两条点缀的红色线条，把频道切换的场景代入感体现给用户，带来新颖的感官体验。

千聊

03. 通过文字角标设计表达切换差异

顶部内容的分类切换较为常见，特别是电商产品中。一般体现点击和默认通常有字体大小区分、颜色深浅区分、下划线区分、图形装饰区分等。

除此以外也有下划线的变异用法，通过角标线段来体现差异。通常是右下角位置，伴随着动效表达。比如京东 App 首页，联想到京东吉祥物，也有一种品牌呼应的感觉。

京东

04. 更贴近真实场景的设计引导

通过设计还原真实场景，带给用户更强的代入感，从陌生转换到熟悉的场景触感。

高德地图通过模拟真实的道路状况，呈现出更加真实的行车引导，就像自己驾驶的车辆行走在手机屏幕上一样。真实感的路况引导增加了驾驶的代入感，降低了复杂路口选错方向的可能性，从视觉感上面也提高了感官体验。

05. 人性化的城市点亮设计

好的产品体验，就是在无意间带给用户惊喜。在小长假期间，自驾游沿途经过不一样的城市地点时，会弹出“欢迎到来”的点亮提示，第一次看到还有种惊喜感，算是一种旅行足迹的记录。

在这个弹窗广告满天飞的互联网环境中，能把这种惊喜带给用户才能抓住用户的黏性，通过情感化的设计提升用户对于产品的认可度。

06. 被人忽略的上滑交互探索

大家经常使用下拉刷新这个功能，而且在该功能上的设计探索已经呈现出非常多的案例，而下滑到底部之后的设计探索却被设计师所忽略。

在支付宝的首页中，下滑到底部之后进行了新的设计探索。继续上滑将会解锁一项新玩法，以游戏化的设计带给用户新的探索体验，也许这一尝试将会带来页面底部新的挖掘点。这个新的挖掘点会像下拉刷新一样，在底层功能需求的基础上被深度开发，呈现出更多营销玩法。

07. 列表式设计中的左右滑动交互

在列表式设计中，比较隐藏式的交互就是左滑和右滑，通常左滑删除较为常见。而大部分的列表设计中都没有探索过右滑交互，除非是右滑返回或者退出等操作。

在小宇宙 App 的订阅栏目中，对于关注的内容列表左滑为删除（不喜欢），右滑则是添加到播放列表中。充分运用了左右滑动的手势交互，不仅操作便利也带给用户不一样的使用体验。

小宇宙

08. 通过展示形式增加内容的品质感

同样的东西放在不同的环境中，通过不一样的展示形式，带来的品质感也是相差甚远。就像放进橱窗的饰品或者展品，给人的品质感就会更高。

得物（毒）在购买栏目将精选推荐、福利专区、潮流榜单、补贴专区等内容，通过类似于玻璃罩的展示模型来呈现，不仅突出了视觉焦点，也带给用户一种品质感的认知。配合动效的运用，增强了该区域的关注度，是一种展示商品或者内容的不错方式。

得物（毒）

09. 通过AR科技带你感受虚拟试穿

网络购物存在的问题就是质量和匹配度等，得物（毒）通过AR科技带你感受虚拟试穿，模拟真实场景中的体验，打破了静态选择的弊端。技术的突破将会带给用户更便利的生活体验，打破常规的固有模式才能带给用户更好的使用体验。

10. 更直观的设计带来更人性化的体验

想要看一场电影，在选择影片的时候为了让用户更直观的了解影片内容，做出最快捷的选择。淘票票将精彩片段作为背景层，影片展示作为前景层，点击不同的影片背景层就会播放对应的精彩片段。直观的设计带给用户更便利的选择，减少了抵达目标的操作步骤。

从视觉形式感的角度使得画面更丰富，空间感更强。相较于单调的平铺式设计，带给用户更好的感官体验和操作便利。

淘票票

小结

从感官体验的角度体验产品，总结了在 UI 设计视觉层面的解决方案，有助于提高 UI 设计师的视觉表现能力。对比相同功能的不同视觉表达，总结优秀的设计呈现方案，希望这个栏目可以带给你更多帮助！

作者：黑马青年（vx: heimaux）

本文由 @黑马青年 原创发布。未经许可，禁止转载。