什么是内容前置？看看这8个设计案例
原创 和出此严 和出此严 昨天
相信大家平时使用APP都会遇到这样的事情：当你想执行下一步操作时，系统会自动将内容展示在你面前，让你在当前页面就获取到想要的结果，用不着跳转页面。
因此今天给大伙盘点一些有意思的【内容前置】案例，看看别人家的设计师多细心，是否对自己的工作能否带来一些借鉴、启发。
图片
Part1: 什么是内容前置
简单说下啥是内容前置：将用户「需要的、提升操作效率、避免混乱的 」等事物，提前展示在用户面前。
用户在当前页面/位置就能感知结果，无须进入下个页面/多步操作 才能看到，减少页面跳转。
关键词：无需跳转、预判下步操作
有何作用：
·对用户：减少多余操作与思考、提升操作效率
·对产品：促进用户满意度/黏性、产品口碑、转化率等方面提升。
Part2: 一些有意思的案例
搜狗输入法：自动计算数学公式
在搜狗输入法上输入一段简单的数学公式时，系统会自动处理并前置显示结果，点击会将该公式和结果显示在输入框内。
用户无需心算或者打开计算器，大大提升操作效率。
图片
好像仅限于“加减乘除”这4种简单计算，但也足够覆盖人们的日常所用了。
谷歌浏览器：展示多窗口内容
谷歌浏览器的多窗口页面，直接「双列表」铺开展示所有窗口及里面内容，用户很直观地知道多个窗口下都是什么内容，方便选择/重返正确的窗口。
图片
相比于国内的一些浏览器来说，这个设计在「信息查找效率」上实在很贴心。
钉钉：显示文件封面
在钉钉上发送PDF等文件时，会显示该文件的封面/首页内容。用户可以很直观地知道文档里的首页内容。
不用专门点击查看文件，才能知道里面是啥内容，避免传错文件，提升发送成功率。
图片
但个人觉得，最好还是设置「是否封面漏出」，毕竟无法保证露出来的内容不会对用户造成困扰（比如隐私文件）。
Mac电脑：聚光灯显示结果入口
在Mac电脑上的‘系统偏好设置’里搜索帮助时，结果列表上会以【聚光灯】的形式展示各个结果入口。
选择具体某个结果时，该入口的聚光灯会更清晰些。用户可以直观地该结果在哪里找到，减路操作路径。
图片
拼多多：快速查看商品款式
在拼多多的部分商品详情页里，能以【缩略图】的方式直接看到所有商品款式，并可快速滑动切换。
用户无需淘宝一样：点击弹出款式浮层才能查看不不同的分类，提升购物体验与下单率。
图片
拼多多：自动加载收货人+手机
拼多多上新建收货地址时，系统会自动加载已存在的收货人姓名+手机，用【已存信息的选择】代替手动输入，大大降低操作成本。
图片
淘宝和京东也有一样的设计，只不过需要点击【名字输入框】后才出现，让用户有预期和可控感。
拼多多是一进入页面就有，帮助用户做决策（毕竟用户目的很明确），两者各有各的好处。
唯品会：显示浏览商品总数
在唯品会查看商品详情，页面上滑时【回到顶部】icon会显示【浏览进度和总商品数】。
图片
这样用户对商品总数/页面有多长、当前进度有个概念，从而判断是否继续浏览...
拼多多：订单列表显示物流信息
拼多多在每个订单列表下方，都会显示一行最新物流信息，一眼获知当前物流状态，无需进去订单详情页再去查看物流。
图片
相比于某宝来说，这个设计不要太好了。
- 结语 -
以上【内容前置】的一些设计案例，都是将用户「需要的、能提升操作效率、避免混乱的 」等事物提前展示在用户面前，无须进入下个页面操作。
关键词：无需跳转、预判下步操作
希望对你工作能带来一些启发，如果文章有帮到你一点点，请【分享、收藏、点赞、在看】一键四连走～原创不易，干货更是难得，谢谢！
- 其他干货推荐 -
图片
图片
图片
图片
- 历史文章推荐 -
图片
图片
图片
和出此严 提了一个问题
欢迎留言讨论
参与讨论
图片
阅读 1036
分享
收藏
赞18
在看13
----------------------------
本文由新墨整理并发布。转载来自互联网，若侵权则删除！
新墨5年开发经验，45名团队成员，上线已达100+产品，于北京和成都2个城市提供技术开发服务。致力于提供APP开发,小程序开发,微信开发,IOT物联网开发,电商系统开发,教育系统开发,H5开发,游戏开发,用户体验设计,课件设计
新墨官网地址：http://www.sinmore.com.cn/
新墨APP开发：http://www.sinmore.com.cn/app
新墨案例：http://www.sinmore.com.cn/case
新墨小程序开发：http://www.sinmore.com.cn/xcx
新墨物联网开发：http://www.sinmore.com.cn/iot
新墨教育系统开发：http://www.sinmore.com.cn/education
新墨商城系统开发：http://www.sinmore.com.cn/eBusiness
新墨商城区块链开发：http://www.sinmore.com.cn/blockChain
