产品的工具属性和内容属性

用户头像
北京/设计爱好者/9年前/728浏览
产品的工具属性和内容属性
用户头像
WDClab

从一名初级交互设计师的角度分析产品的工具属性和内容属性之间的差异。

025e591be591a801216a3e4fe9c8.jpg

这篇文章是从一名初级交互设计师的角度分析产品的工具属性和内容属性之间的差异。

一、为什么要对这两者进行比较?  


一方面,工具和内容属性的产品基本涵盖了市面上绝大部分的产品,这两种属性从定位-架构-布局-表现都存在着比较明显的差异,因此希望通过比较能够深刻认识工具和内容在设计上的差别。


另一方面,微店的定位是手机开店工具,所以本质上以工具属性为主,例如商品管理、订单管理、收入、客户管理、营销工具等模块。但随着微店业务的不断发展,本着为了给卖家提供更好服务的宗旨,逐渐加入了头条、笔记、货源、社区等内容属性的模块。因此,通过对比深刻理解两者的差别也有助于对不同类型模块设计的把握。

80d7591be5aaa801216a3eccce9a.jpg


二、如何定义工具型和内容型产品?


工具

说到工具,我们可以本能的想到剪刀、扳手、锤子、铲子...无论什么工具,有一个共同特点,就是为用户解决某个具体的问题,也就是说,用户在用工具之前对这个工具能解决什么问题,甚至具体长什么样都有个比较明确的预期。所以,对于互联网产品,工具是为了解决用户的某个具体问题而设计的一系列功能。比如:输入法、计算器、手电筒、地图、闹钟、相机等等。


9b43591be5bbb5b3086ed4351867.jpg  

内容

说到内容,我们也可以本能的想到平时看书、看报纸、看电视...无论时代或科技的变化让我们获取信息的载体变成手机、电脑、pad等等产品,内容的本质还是消遣,对比工具来看,目的性没那么强。所以,内容型产品是用户获取信息、浏览内容的媒介。比如新闻资讯类产品、音乐类、视频类、阅读类等等。


424d591be5cbb5b3086ed4ef0098.jpg  

那么问题来了,我们熟知的微信和淘宝是工具型的还是内容型的?


ac7f591be5d5a801216a3e8b36d8.jpg


这里我们要引入一个概念,叫做产品基因,就是说产品的本质、最初的定位是什么。比如微信最初就是熟人之间的即时聊天工具,淘宝最初就是提供了海量商品供用户选购的内容平台。但是随着产品的不断发展,微信也有了订阅号、公众号、朋友圈等内容、服务型的东西;淘宝也有帮助用户快速找到目标商品的搜索、分类筛选工具以及管理订单的工具。因此,对于越是成熟的产品,越不能独立的看是工具型还是内容型,应该聚焦到一个功能上,看是工具属性还是内容属性。


三、两者有哪些区别


 

从产品目标来看,工具是为用户解决特定问题的,用户有明确的预期,一般用完即走;而内容是吸引用户浏览、消费内容的,会尽可能让用户停留。

从设计目标来看,工具的设计重点是提高用户完成任务的效率,用最短的时间,最顺畅的流程高效解决用户的问题;内容的设计重点是用户尽可能沉浸地浏览并能够准确地发现内容。

从产品特点来看,工具型产品的特点注重任务的完成及操作;而内容型产品注重信息的分

类、展示及筛选。


 

四、基于这些区别如何进行设计?


 

工具

1、符合用户预期


 

以地图为例,在没有地图产品之前,我们习惯通过纸质的地图去找目的地以及路线。因此地图产品的首页设计也是地图的样子,配合了一些GPS定位、搜索路线、放大缩小等移动设备的优势让用户更方便的找路线、定位。


 

记账软件也是如此,没有记账软件之前,我们记账的方式就是把收入支出按时间、用途记录下来。记账软件的功能也是我们线下习惯的记账场景。

4ad4591be5f8b5b3086ed4fec3a1.jpg

因此,大部分纯工具型的产品,其实是线下场景线上化的过程,在这个过程中,要考虑与用户过往使用习惯及用户的心智模型相匹配,符合用户的预期。


 

2、更注重任务流的深度


 

A. 任务流更垂直,引导用户完成具体任务而尽量不受其他信息干扰;

用户在完成一个任务解决具体问题的过程中往往不会关注其他不相关的信息,也不希望受到其他信息的干扰,因此工具型产品往往聚焦在某一个功能模块或者某一个功能,以功能入口的形式呈现,使任务流更垂直。


03a2591be60aa801216a3e415c88.jpg


B. 常用功能入口前置,不常用功能隐藏;

当一个工具承载的功能足够多的时候,就会出现优先级的问题,以及不同类型、不同层级的用户对功能的需求也不同等问题。因此根据用户的使用习惯可以使常用功能入口前置,不常用功能隐藏或者让用户自定义编辑。

0a3e591be633b5b3086ed49740d0.jpg


3、提高任务完成的效率 A. 外漏操作按钮,缩短操作路径; 工具属性的功能往往将当前用户最关注的操作外漏,以提升用户操作的效率。


 
b29b591be642a801216a3e9d3a10.jpg  
 


 

B. 滑动页面操作栏不隐藏;

工具属性的产品列表滑动页面操作栏不隐藏,方便用户操作;而内容型的产品列表滑动页面操作栏隐藏,让用户沉浸式的浏览内容。

1d1f591be669b5b3086ed47c9219.jpg


C. 用选择或控制代替复杂输入;

移动端的场景本来输入对用户就很复杂,特别是工具型的产品操作比较多,用选择或控制的方式能够提高效率。

6958591be684b5b3086ed4f2a0bf.jpg


D. 引导用户正确操作,快速完成任务,以文字和控件居多;

工具属性的功能,往往会存在任务流特别长的情况,这个时候会采用一些方式引导用户能够顺利、高效的完成任务,比如向导控件等交互方式。

217f591be694a801216a3ee2bec8.jpg


以上是工具属性设计的要点,对于内容属性的设计,总结如下:


内容

1、信息流层级的扁平


 

A. 平行层级的内容可以方便切换,引导用户浏览更多内容;

内容型产品的信息层级更加扁平,用户能够在不同信息之间切换。

2、吸引用户沉浸式的浏览


 

A. 不同场景下信息的层次重点不同;

以购物场景举例,用户在搜索场景下目标是明确的,在列表里要做的事情更多是对比,然后做出选择,这个时候把影响用户对比选择的因素漏出(价格、销量),有助于用户做决策;对比来看,用户在浏览场景下是无明确目标的,这个时候更多的是智能推荐,而这种场景下影响转化的因素会变成评价、多少人已买这种给用户提供参考的感性因素。不同场景下信息的优先级会吸引用户在当前场景下沉浸式的浏览。


74f3591be6c5a801216a3efc8a34.jpg  


 

B. Feed流符合用户在移动端的浏览习惯;避免其它干扰因素打断用户浏览;

可以无限滑动的信息流展示样式已经成为内容型产品的标配,用户已经养成了滑动浏览信息的习惯。


c0d1591be6d1b5b3086ed4dcb216.jpg  


 

C. 通过信息的主次引导用户浏览、查找信息;关键信息图文并茂,吸引用户眼球;

内容型产品属于信息密集型产品,面对信息爆炸,信息无序,信息冗余,合理区分信息层级,突出关键信息,弱化次要辅助信息,有助于用户高效浏览。


fb4d591be6deb5b3086ed4db1e96.jpg


 

3、帮助用户快速准确的找到想要的内容


 

A. 通过不同维度的内容分类帮助用户快速找到感兴趣的内容;

当内容型产品中内容足够多的时候,用户就会有需求通过分类的方式找目标内容。比如淘宝通过文字的方式分类,因为大的分类之间区隔力比较大,用户可以看文字就能快速找到目标项,而对于大分类下面的子分类,区隔力较小,通过文字区分不容易识别,因此用图片+文字的方式帮助用户快速查找。


cf81591be6eba801216a3e010a1b.jpg


 

B. 通过扫描二维码、拍照搜索、语音搜索等方式帮助用户快速找到内容;


e165591be6f6a801216a3e2d8e93.jpg


 

C. 针对不同场景运用恰当的筛选和排序功能帮助用户快速找到内容;

内容型产品在列表页往往会把筛选和排序功能常驻在顶部,因为对于内容足够多的产品,筛选和排序不仅仅是帮助用户快速找到目标内容,而且其中某些筛选和排序维度能够起到帮助用户明确需求,属于用户决策的必经路径。


8117591be702b5b3086ed4d44535.jpg


 

五、写在最后

文章通过对工具属性和内容属性的定义、差别以及如何根据这些差别进行设计几个方面展开论述,很大一部分来源于本菜鸟平时工作中的积累,某些描述可能略显偏颇。感谢阅读,欢迎拍砖。


文:WDC-刘艳君



0
阅读原文
|
举报
|
2
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
加载中
推荐素材
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI界面 组件
智能家居中心 简约 UI设计组件库
钱包ui模板
抽象液态渐变UI背景模版
新能源APP应用UIKit
【新年UI图标】钱包icon
盲盒APP UI设计
3D卡通UI界面图标可爱插画免扣素
我的钱包-UI界面设计-app
【新年UI图标】银行卡icon
【新年UI图标】珠宝icon
【新年UI图标】影音icon
UI 登录界面设计模板包
UI应用平面图标
Security Camera UI kit
【新年UI图标】汽车icon
高级表盘系列UI源文件
拟物风质感写实UI卡片合集源文件
【新年UI图标】30个图标
新拟态风格 UI设计组件库
UI通用设计素材1
【新年UI图标】会员icon
你可能喜欢
大家都在看
登录注册