首页

微交互|只要关注这6个点,交互设计师也能做好竞品分析!

资深UI设计者

今天我们来聊聊竞品分析,它并不是像人们认为的那样——有统一的模板,因为针对不同的岗位,做的竞品分析是不同的。所以本文聊的是:交互设计师如何做竞品分析。
竞品分析是对产品、交互从业人员最基本的技能要求之一,很多刚入行的产品汪、交互喵首先要做的都是竞品分析,一来可以考考你的底子,二来可以锻炼你的逻辑思维。虽然它是基本技能,但是它的作用却非常大。
那有什么作用呢?当你设计了一个功能,别人问你为什么这么设计时,你的答案要非常专业,而不是说“我觉得……”,这时候竞品分析就派上用场了。
做竞品分析,可以避免相关设计人员站在自己的角度去思考问题,在评审的时候容易通过且能够获得大家的认同,而不会受到来自各方的质疑,这也是那么多人做竞品分析的原因之一。
当然,站在产品和运营的角度来说,做竞品分析还能开拓市场、优化产品、制定策略、确定战略等等,但是这些在我看来并不是交互设计师需要关心的事情(除了优化产品)。

怎么做竞品分析

大家在网上能看到很多竞品分析文档,会发现里面的内容非常多,而且很多都看不懂。告诉你三个字:不用看。
这些文档看起来好像很专业,但是当中涉及的数据内容、商业分析、产品战略等大部分都是笔者自己 YY 的,这个不仅对做竞品分析没什么帮助,还会使自己在做的过程中特别容易跑偏。所以你只需要关注以下六个点来做或看竞品分析文档。
  1. 找到商业需求
  2. 用户操作流程
  3. 产品功能分析
  4. 交互逻辑思考
  5. 用户使用评价
  6. 得到设计需求

01. 找到商业需求

商业需求这个点,不仅仅适用在竞品分析的开头,我们做交互文档、需求文档都要把商业需求放在首位。只有商业需求的目标明确了,才好进行下一步操作。那什么是商业需求呢?
给大家举个简单的例子:
今天接到一个产品需求:即优化产品的搜索功能。可能很多人看到这个需求就马上开始看看别人的搜索都是怎么做的,然后抄一下,改一下就好了。这样设计出来的东西,只能说是一个具体的设计任务,而不是解决实际问题的方法。
我们要先找到商业需求,为什么要优化产品的搜索功能呢?有些资深的产品经理会在需求文档中写出,而有的并不能想到这一层,仅仅只是觉得不好用所以让你去优化。所以当你的产品经理属于后者的时候,你就要提前参与到前期的工作中,给自己提问题,告诉自己为什么要去优化,以及它能带来什么效益?
当你的工作做到位的时候,并且了解的足够多的话,你很轻易的就会发现,我优化这个搜索功能的原因有两个,也就是商业需求:一是提升平台成交率,二是获取用户数据。

02. 用户操作流程

得到商业需求,我们就要做具体操作,就是找到合适的竞品。这里我扩展一个话题,就是找什么竞品。
通常,我把竞品分为三大类,分别是核心竞品、潜在竞品(类竞品)、交互参考竞品,这三类具体指的是什么,有兴趣的小伙伴可以自己去研究了解。
找到这三类竞品后,要做的就是把它们所有关于搜索功能模块的界面做一个仔细操作,并截图单独存放在一个文件夹中做深入分析。
比如这个功能涉及到的页面、动效、视觉等所有信息都进行详细观察,然后将其做成一份流程图,将所有的竞品都这样做完后,进行对比分析,你就会发现当中的差异,然后就可以知道哪种操作路径是最好或最适合你的产品的。

这图是我为了写文随便搭的,就是个demo,具体的大家还是要自己去操作。

03. 产品功能分析

当你列出所有流程操作图后,下面就可以对搜索的功能进行分析。
这块操作起来比较简单,首先建一张表,罗列出相应的支持功能,然后对支持的竞品类目打上勾,不支持的就不做处理,如下图:

这图也是我为了写文随便搭的,就是个demo,具体的大家还是要自己去操作。
做完以上操作,接下来再分析每个竞品的搜索导航是属于什么类型,这种类型对搜索有什么好处等等。包括搜索功能模块的其他信息,如展示形式、关键词、筛选字段等等,以此推导出其中的差异。当然,做其他功能也是一样,我只是拿搜索做个例子。

04. 交互逻辑思考

由这层开始,要分析功能交互的问题。在每个流程图的边上写下相关的交互逻辑,然后通过自身的行业知识来拆解竞品当中的交互信息,如:
  • 搜索之后页面的跳转的层级
  • 搜索结果展示
  • 页面布局的合理性
  • 图片比例规则
  • 按钮热区
  • 表单展示形式
  • 等等
如果你是一个资深的交互设计师,看到的信息还会更多,这块跟自身能力有关,拆解的产品、分析的交互逻辑越多,这块的梳理能力就会越强,看产品的本质也会越深。那么你分析竞品所能得到的信息也是一般交互和产品不能发掘的。(关于这块的产品拆解我后续会有文章单独说明)

05. 用户使用评价

这块工作看着好像跟竞品分析不搭边,但却是不可缺少的一环。因为即使你做了再多的分析和拆解,看了再多的偏好数据(更何况有些公司拿到的数据并不全面),都没有看用户使用评价来的更加直观。所以看用户的使用评价变得极其重要,只有真实了解用户内心,你才能真正设计出好的产品。
我们可以通过各个渠道去了解用户对一款产品的评价,包括对某个功能的看法,当然我之前也说过,我们不能听用户的一面之词,所以需要去提炼当中的关键信息,帮助自己更好的去完善产品。
这块其实没什么好说的,在竞品分析文档中,这块内容其实不需要做过多的展示,只要拿到你的关键信息并做个大概说明,然后说出你从中得到的设计思路就可以了,我们最后还是要看输出总结,即通过做竞品分析得到的设计需求。

06. 总结输出

当我们按照上面的流程做完所有步骤之后,你就会得到你的设计需求,如:
  • 关键词搜索
  • 搜索建议
  • 条件过滤
  • 搜索历史
  • 查找相似商品
  • 让用户快速识别搜索入口
  • 字段排序
等等。
这些所有子功能都是通过做竞品分析得到的,当然你也可以通过用户调研等方式去得到设计需求。
说这么多,就是告诉他家我们做一个产品时,不是自己去YY要做什么,而是通过这一系列工作流去找到应该做的事情。这就是你在这个岗位必须做到的事情,不要以为产品或交互的工作很简单,上面的每个步骤都是需要大量时间的练习才能做好的。

小结

我们通过竞品分析来提高我们产品自身的核心竞争力,并不是为了求同,也不是为了模仿,而是为了突出自身的产品价值,正所谓知己知彼,百战不殆,竞品分析的目的并不是为了抄袭,而是为了超越竞品。
不过,竞品分析还是会有一定的局限性,比如说我们做竞品分析的时候往往容易将产品和企业文化、产品商业战略等信息剥离开来,但是对于很多产品来说,这些是很重要的东西。所以也就很容易忽视这其中的相关性,分析的时候就有可能导致片面或者出现误差。
所以我们就要不断地改进我们的竞品分析报告,学会从整体上去把握产品的脉络,才能更好地摆脱竞品分析的局限性。 

UI视觉设计师,2018年薪风向是怎样的?

蓝蓝设计的小编

随着时代的发展,UI视觉设计逐渐成为人们最直观、最挑剔的话题,视觉营销的时代已经成为消费者习以为常的选择,那么作为UI视觉设计师,2018年薪风向是怎样的?

UI设计师:程序员国宝,请你保持冷静,这是我的设计稿!

蓝蓝设计的小编

作为一名UI设计师,贼喜欢高一些非常炫酷的交互动效,而在导航设计中,有些设计更十分贴合这一点。

国外非常高端的UI界面设计,UI设计小白须学

蓝蓝设计的小编

国外非常高端的UI界面设计,UI设计小白须学

大屏时代,如何做好电视端交互设计?

蓝蓝设计的小编

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


在前不久,蓝蓝参观了中国国际广播展览会,这个中国广电大伽云集的展会上,许多企业都在播放智能电视端,我拍了一些,做为以后设计的参考,同时也在收集大屏电视设计的资料。

以下为蓝蓝设计收集的文章之一,这篇文章的好处是总结了硬件交互的特点和各种电视上常见的表现方式,并配以图片说明,虽然对于专业的设计师而言,tab/磁贴/列表/滑动换换幻灯片式等都是常见的方式,本能直观就会做出选择,也不会仅限于此,但对非从业者来讲,这样列有概括启蒙的作用,各个例子取的很全。



硬件+远距离操控——基本交互 -


基于桌面资料研究以及设计经验,总结了基本交互主要包含以下几个关键内容:遥控器输入、导航和菜单、信息展现、控件摆放和焦点状态。


一 、遥控器输入


当我们用手指快速便捷地在手机屏幕上点击或滑动时,主流电视大屏及应用的操作还是:使用遥控器进行操作。而市面上不同电视生产商生产的遥控器也有着不同的造型和按键数量,如图1,分别展示了:苹果、谷歌、小米、乐视和中兴机顶盒的遥控器。

1.jpg


图1 不同厂商的遥控器

 

尽管有着千奇百怪的造型和按键数量,但几乎全部的遥控器都有几个相同的按键:上、下、左、右、返回键和OK键,如图2。它们也够成了遥控器输入的基本交互方式:通过“上下左右键”移动焦点位置,选中界面元素,按“OK键”进行相关操作,按“返回键”返回。


2.jpg
图2 遥控器的基本按键


而上图中还有一些按键,如数字键、菜单键,有些遥控器是没有它们的。这里强调下“菜单键”,比如之前的一个设计,将不常用的操作隐藏到菜单键中,当用户按菜单键时再唤出操作(如安卓端的“长按”,iOS端的“左滑”等)。后来,才发现并不是所有遥控器都有该按键,只能在后续版本中迭代优化。因此,在设计之前,不妨研究一下你的输入硬件设备,避免因“刻板印象”造成不必要的坑。


遥控器输入的特性决定了用户在输入时的效率和便捷程度都大打折扣,因此,在这样的局限下,设计师只能通过各种不同的方式来尽量减弱这种不便捷:


1. 减少用户输入

能不让用户输入就不输入,尽量只让用户去做“选择型”输入,避免大量“文字型”输入,比如电视上的搜索功能中,及时联想、热搜词就变得极为重要,如图3右图所示。

3.jpg


图3 键盘输入的优化


2. 优化输入模式

结合项目情况,去尝试优化输入模式,比如充分利用遥控器数字键输入、重新设计键盘以减少用户操作,如图3所示。


3. 将输入转移

越来越多的产品开始将一些输入转移并引导到手机端进行操作,甚至将手机端直接做为遥控器,比如最常见的扫码登录和TV助手类APP。输入转移能大大提升用户操作效率,但设计时还是要结合具体场景,避免用户过多地在手机和遥控器间切换。


4. 创新的输入方式

随着各种技术的发展,在未来,电视端也会有越来越多的输入方式,而不仅限于遥控器输入,如智能语音输入,而我们也需要了解这些新技术,才能帮助我们不断的创新并给用户带来优秀的体验。


二、导航和菜单


电视端的导航和菜单大多数和手机端、PC端是类似的,但因遥控器输入的特性或多或少的有些差异,主要分为以下几类:


1. 十字

十字导航在国内的产品中比较少见,但因它的主导航和二级导航同时展开,能与十字方向键完美契合,用户可通过方向键在主导航和二级导航之间以最的方式切换,如图4所示。但它最多展现2级菜单,即纵向菜单和横向菜单,又浪费了大量界面空白,因此针对国内大而全的产品而言,往往不是特别适用。


4.jpg

图4 十字导航


2. 磁贴

磁贴广泛应用于各种电视应用产品,一般包含主导航和二级磁贴,往往二级磁贴的展现能使信息更加扁平、直观及可视化,且相比于十字导航,操作的方向不会受到限制;但往往焦点从磁贴移回到左侧/上侧导航需要更多的操作成本,如图5所示。磁贴的信息展现能够充分利用界面空间,并把信息前置,因此,对很多内容型产品而言,磁贴可以很好的适用内容露出,吸引用户进入。


5.jpg
图5 磁贴信息展示


3. Tab

广泛应用于手机端和PC端,当然在电视端中也经常使用,往往起到一级导航的作用,在告知用户所处位置的同时,很好的引导用户进行模块间的切换,如图6所示。然而,Tab导航也有一些基本的设计要求,比如尽量不使用多层Tab套用,即使不得已套用也需尽量保证表现形式不同;另外,在“焦点”的章节,也还会提到Tab切换时的加载问题。


6.jpg
图6 Tab导航


4. 列表

列表也是手机端最常用的菜单展现形式,在电视端同样适用,如电视直播类产品,主功能就利用了多层列表套用的展现形式,详见图7所示。而在电视端,列表的样式也是多种多样的:如纯文字列表(可配按钮)、图文列表(可配按钮)、展示型列表(不可操作)、横向列表(选集列表)等。


7.jpg

图7 图文列表和展示型列表


5. 其他

电视产品上最常用的菜单和导航模式一般都可以总结为以上4种,当然还有一些其他的方式。随着用户多设备的使用,越来越多的手机端和PC端的设计模式开始在电视上出现;而更多的产品界面因其复杂的功能无法只使用1种菜单和导航模式,往往是混合型设计,如图8所示。不过,无论使用何种导航和菜单类型,电视大屏幕的菜单和导航的设计目标终归是:用户可以快速定位,并且能够预测出操作结果。因此,灵活使用导航和菜单,使用户不会迷失在功能繁多的界面信息中就尤为重要。


8.jpg
图8 其他类型的导航和菜单


三、信息展现


在前面的文字中,我在“电视”这个词后面都紧跟了“大屏”这个词,电视的屏幕是比PC还要大的屏幕;而用户也因为如此大的屏幕,往往是坐在两三米之外。因此,电视端的信息设计有着两个显著的特质:为大屏幕而设计和为远距离而设计,有着以下几个注意事项:


1. 重视信息的识别性和简洁易懂

文字、图标和按钮,乃至toast提示,在电视端的识别性问题比手机和PC端更为凸显。因为远距离、大屏幕,加上电视本身的休闲属性,使得用户的注意力较为分散,因此,界面中的信息和元素就需要适当放大,至少保证用户能够在两三米之外能清晰看到,如图9所示。


9.jpg
图9 信息识别案例


2. 提前露出信息和多露出点信息

在“遥控器输入”章节中有提到,提前露出信息能够在一定程度上减少用户输入,并在产品层面吸引用户进入。不过,和手机端设计类似,还是需要甄别哪些信息需要提前露出、怎么露出以及露出信息后对产品稳定性和性能的影响;这些都需要基于产品特点,并与产品、视觉和开发共同协商确定。而“多露出点信息”却相对容易理解,主要是告知用户右边/下边“还有一些内容,快去看看”,如图10所示。


10.jpg
图10 信息露出案例


3. 避免过多无模块信息的展示

相比于手机端,因屏幕较大,与PC端类似,往往需将屏幕划分为多个排列整齐的小屏幕来进行设计,即模块化、区域化的设计信息展现。通过这种方式,可以使信息布局更为规整,用户不容易迷失在繁杂的信息中,如图11所示。


11.jpg
图11 信息模块化案例


四、控件位置


控件的位置问题是初期开始电视产品设计时非常容易犯的错误,如图12所示。左图中的“添加股票”按钮,当已添加的股票过多时,可能会看不到该按钮,或需用户按很多下才能使焦点移动到“添加股票”;右图中的文字浏览,完全不知道如何浏览,也不知道如何将焦点从文字移动到“查看票种”按钮。这两个案例阐述了:按钮的位置导致按钮丢失或操作效率较低;电视端文字阅读也得遵守焦点浏览原则,如每行1个焦点或整篇1个焦点,若是后者,就得保证可见范围内文字已展示全。因此,在电视大屏中放置交互控件,需充分考虑是否符合电视端的使用方式以及用户的操作效率。


12.jpg
图12 控件位置案例


五、焦点状态


前文提到过很多次的“焦点”,它其实是电视大屏用户体验的第一要素,而在交互说明中最常出现的也是“焦点怎么样了”。无论是交互还是视觉,在初期接触电视产品设计时,可能都会因为“焦点”的设计失误引发用户体验问题,比如:焦点的移动顺序不一致(从哪里来未回到哪里去,焦点在界面中乱跳)使用户认知错乱;焦点的不够醒目或样式不统一使用户无法找到焦点等,如图13所示。


13.jpg
图13 不统一的焦点样式


电视端焦点也是有着各种不同的状态的,如图14所示,“焦点状态”一般采用“描边、放大、高亮等”方式使其明显,而“按下状态”可能不一定有,或者是和其他几个状态相同。


14.jpg
图14 焦点状态种类


可能需要简单讲述一下“标记状态”和“半选中状态”:“标记状态”在PC和手机端也非常常见,比如告知用户所在位置在哪里的Tab标记;而“半选中状态”是“焦点状态”的一种情况,即移动到某个焦点后,不进行加载或触发操作,需按“OK键”才触发,如图15所示。这种状态在早期电视盒子性能不足、在Tab切换时经常需要使用,因为如果直接切换焦点时就加载,可能会造成卡顿。

屏幕快照 2018-03-28 上午9.34.42.png


图15 标记状态和半选中状态案例


六、结语


我总结和归纳的这些基本知识和注意事项,虽然它们能够帮助我们快速了解电视大屏的基本交互知识,避免一些不必要的坑;但还远远不够,更多的是需要在实际参与项目中快速学习、快速应用,因此,之后我将会基于我参与的项目再次进行电视大屏的实战总结,欢迎下次再与大家一同交流和成长。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

优秀网页UI设计深度解析

蓝蓝设计的小编

在今天这样一个互联网+时代,绝大多数企业都意识到通过线上资讯来吸引更多的潜在客户是多么的重要。这些潜在客户对你的公司及产品印象的好坏,很大程度上取决于你在网站设计上投入精力的多少。所以花时间构思一个好的网站设计,特别是主页部分的设计非常关键。

求职类App原型制作分享-Part-time Clouds

蓝蓝设计的小编

Part-time Clouds 是一款兼职信息平台,你可以在此寻找合适的兼职工作。这款App使用起来十分简单,不用登录注册即可直接可以进入主页,主页展示了大量兼职信息,你可以根据需求收藏职位、查看详情,或一键拨打联系电话,其中还有详细的职业分类页面。

ui界面设计公司搜集精彩设计二十五例:后台管理软件界面设计欣赏之二

资深UI设计者

后台管理界面设计欣赏

在积累了一定经验的同时,也在不断的学习和丰富关于企业信息化和后台管理软件界面设计的特点及数据可视化的表达方式。

平时也会搜集企业信息化和后台管理软件界面设计表现方式,作为企业信息化和后台管理软件界面设计资料的参考,分享如下:

ui界面设计欣赏三十例:后台管理软件界面设计欣赏

蓝蓝设计的小编

点击查看原图

在整理后台管理软件界面设计欣赏时,翻看以往的资源库,发现前十年的ui界面和现在流行的风格真的是截然不同,目前风格趋向简约、扁平、轻量级图片,以色块、线为主,占用资源更少,这是随着人们对IT软件的认识层次从初级到高级在审美上的体现,更注重本质的信息,软件内在的交互易用和操作体验。


Banner设计终极宝典!6招搞定点缀元素的运用!

资深UI设计者

我以前就反复提到过,一个最常规的最完整的Banner,一般有这五个组成部分:文案/模特商品/背景/点缀元素/LOGO,我给大家简单做了一个示例:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档