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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

内容与手势的联动设计

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

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

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

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

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

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

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

人性化的城市点亮设计

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

被人忽略的上滑交互探索

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

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

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

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

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

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

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

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

10个产品细节剖析,让你看看大厂是如何做设计的!

小结

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

欢迎关注作者的微信公众号:「黑马家族」

10个产品细节剖析,让你看看大厂是如何做设计的!

点赞 32
收藏 78

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。

收藏