首页

交互设计方法论

前端达人

通过对产品用户界面的分析与设计方法论相关联,梳理了在UI UE日常设计中使用的一些定律和原则;相信大家在工作过程中都遇到过这类灵魂拷问“你这么设计的依据是什么? 为什么这么设计”,熟悉了这些定律、原则 我们就能自如的去应对这些拷问,也能够非常快的去熟悉市面上的一些主流设计规范。



转自:站酷

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

【交互设计】B端产品中后台列表页设计方法总结

前端达人

接触b端产品设计差不多半年多了,每天面对的都是各种控制台,本次自己试着总结了下工作中遇到的各种列表设计的小tips。


转自:站酷

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

实用的组件库详细制作逻辑和注意点

ui设计分享达人

成长到一定阶段是方法论的比拼。

   17年开始进行视觉组件库的搭建,也出过一个B/G端设计分析方法的文章总结,里面从大的方面介绍了组件。后来看到很多关于组件库的文章,但是大都是从“分子原则”等很宽泛的方法来讲,很少去细讲实际搭建过程中会遇到的问题,甚至有些方法深究或者实际做下去是有问题。这里会全面的写下sketch搭建组件库(或者说是视觉规范)的逻辑,以及容易混淆思路的点。

      

    为了让大家容易看完,先简短说下制作组件库的目的,再分三点讲搭建方法。


    一 为什么制作组件库

 

    Q1:很多人认为table、tabs等通用组件不需要再搭建,很多大厂已经出来规范,可以复用,为什么还要单独制作自己的

    A1:这些通用组件都是由基础的样式粒子:填充色值、描边大小与色值、圆角大小、文字大小与色值等组成,就拿form表单来讲,不同的描边、行高、圆角、文字样式营造的感觉也完全不同。


    Q2:搭建后能发挥什么作用呢

    A2:统一性:避免多人多风格的现象,保证所有产品都呈现一致的设计语言,新成员加入,也可快速接手工作; 性:改一个组件,可以使用该组件的全部设计图更改;在现有组件库的基础上,也可通过修改,生成不同项目的组件库。

 

    Q3:搭建后如何确保大家都能正确使用?

    A3:需要大家了解自身项目组件库的搭建逻辑,统一讲解远程组件库使用方法,并有专人定期维护更新远程组件库。


    二 组件库具体搭建方法

 

    分三方面说明:(一)、内容架构;(二)、注意点;(三)、远程协作。

 

    (一)内容架构


    内容架构要考虑的是两方面:一个是文档的逻辑,二是组件的逻辑。三哪些制成组件,哪些制作成样式。

 

 

 

    文档的逻辑

 

 

    如上:点击创建组件按钮后,所有的组件都会出现在“图层/组件”界面,默认的排序方式是软件自定的,不好分类和查看,除非每次创建后再进行挪动。第二个“组件》”这个位置是不能直接切换看到组件的,只能在左侧看到所有的组件名称。再加上制作之前,也需要绘制出内容,所以我们需要在图层处建立界面,绘制我们的内容。样式也是如此,只能在“组件》”看到所有的样式名称。

所以我们整理出:“样式”page——所有需要创建样式的内容在此处整理分类绘制;“components组件”page——所有组件在此处分类绘制,再进行创建;“layout 布局”page——说明系统的布局和响应方案;“examples场景模块”典型场景模块,“更新日志”page——标明每次变动,当然sketch是自动导出“组件”page。另外根据系统特性,比如数据统计类界面多的情况,可以增加“data visualization数据分析”page

 

    组件的逻辑

 

    很多组件库向左图一那样,直接把所有组件摆了出来,非常凌乱不便使用。再对比element和antdesign,后者的分类整合地更干净整齐,涵盖的全面,整合后的大类别少,分类相对清晰,可以借鉴,后续有自己系统常用模块需要制作成组件,可以单独增加一个分类模块。当然也可以按着自己的逻辑重新整理。

 

    哪些制成组件,哪些制作成样式


 

    先说样式吧:1 文字(也有些会选择直接做成组件,但我一般会制成样式,感觉更轻量化些);2颜色——背景色、线条色(分割线、描边)、主色调、图标配色、功能色;3 容器(需制作全不同状态的容器,内容卡片、输入框、标签等都会用到);4投影。指的注意的是,这里的样式基本涵盖了所有的基础样式,后续大部分的基础样式都要尽量在在此处引用。

 

    哪些制成组件:本质上讲就是两大类,1是icon;2是其它无法用简单样式的常出现内容(也就是上面按“组件逻辑”整理出来的内容”

    何时需要制成复合组件:1需要通过很多基础样式切换才能改变状态时候。而且通过多个样式切换不同状态,麻烦的地方在于覆盖层的优先级比较高,即使切换成了同类其他组件,也还是被覆盖,必须更新

如下:

 

    我们可以在创建symbol后,在右侧取消内部相应的样式覆盖,然后建立所需的多个状态的平行组件,通过直接切换不同组件来切换状态。

 

    2如果该组件有上一级组件,并且要用到该组件的不同状态,就要把该组件的不同状态改为组件,不然一层一层改很麻烦。

 

    (二)、注意点

 

    制作组件的过程中虽然按着大的架构走,还是很容易混乱或者卡住。以下注意点,可以帮助我们理清关系。这部分其实也是我重点想说明的内容。

    命名


 

 

    1无论是组件还是样式的名称,最后一级相平行的,最好是可以相互切换的状态。这样就可以在右侧属性中直接切换。

    2 组件只能切组件,样式只能切样式。—— 也就是说定好一个基本元素是样式,那么与它平行的切换内容也需要是样式。

    3 如何修改已制好的组件或样式名称


 

    截图1(图层》组件page)和2处,选中进入后,均可找到对应的修改。修改后其他页面已放置好的组件名不被修改,反过来,在图层处其他位置修改,亦不能修改好组件的命名。

    4 sketch里默认的分组是通过命名时的“/”,要修改组件或样式加载时的分组,需在切换到此处,进行拖拽。修改后,组件的名称也会被修改。

 



 

    5 要将一个元素的组件命名到一处去,理清楚如上的关系。如果遇到无法用到的基本元素搭建,需要新的元素,可放到该组的element里(如上图)

 

    样式或组件的修改

 

 

    样式变化后,更新按钮变为可点击,点击此处可以更改样式,重设样式可以还原

    组件编辑覆盖层后在右侧更新,如果想修改组件,通过编辑母版

 

    响应

 

    要考虑好响应方式,每个组件在此处做好设定

 

    (三)、远程协作

 

    远程原因


 

    如上,只要复制过来的新内容中有组件,就会再下面自己建立出组件,很不方便组件管理,团队人多时,容易使组件发生变化,用远程组件能够做到完全统一。

 

    远程方案


    1 蓝湖



 

    无论样式还是组件添加后,还得自己分组重新整理,组件使用方法,在“蓝湖设计规范云”中找到相应的,自己拖过去用,很麻烦。

 

    2 语雀

    可以通过语雀的sketch插件上传或者下载,加载后便是类似远程组件的使用方法。

 

    3 sketch clould
|

 



    单独通过线下传library文件加载使用,比较不容易统一和版本不好管理。因此Sketch Cloud Library 是基于 iCloud 帐户云能力创建的 Sketch的云端设计库,使用前需要对其进行设置。使用时,打开 Sketch 左上角第一个菜单的 Preference,选择 Libraries 卡片,将本地 iCloud Drive 中的规范文件拖拽进这个区域,然后关闭该窗口。

 

    综上所述,我们常选sketch cloud或者 语雀的kitchen插件来进行远程使用。另外会线下发送整个文件,方便整体复用一些组件和example里的页面。

    

文章来源:站酷   作者:youngLion0610


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

设计交互-用户体验之心得篇

前端达人

1.为什么用户使用对齐标签填写表单的速度更快


想象一下,一个用户已经准备好注册您的站点了。他们会进入你的表格并输入他们的信息。字段标签对齐的方式会影响用户填写表单的速度。


你是想给用户提舒适体验,还是想给他们一个麻烦?

如果您想让他们的体验更快更容易,请使用输入框上面的字段对齐标签.或输入框内的对齐标签模式。


与左对齐和右对齐的标签相比,顶部对齐或内部左对齐标签填写起来更快、更容易。这是因为标签只需要有一半多的视觉固定物。

顶部对齐标签还允许用户以一个可视方向向下移动输入框。左对齐和右对齐的标签需要两个视觉指示才能填写。


顶部对齐标签的唯一缺点是,它们可以使表单变得很长。但是现在用户滚动的频率越来越高,所以这不是问题。

通过减少字段之间的空白,可以减少表单长度。您还可以将表单拆分成多个页面,以使表单更短。


顶部和左/右对齐标签之间的差异很明显。顶部对齐标签更容易在眼睛上,并使表格更容易填写。虽然他们可以使表单更长,

但用户将从完成表单所需的时间和精力的减少中获益更多。


如果顶部对齐的标签能够给用户提供更好的表单体验,那么它是值得采用的。设计师应该更多地考虑他们的字段标签对齐。

它可以区别于用户填写表单还是放弃表单。


2.为什么对话框中的“确认”按钮在右边工作得最好


有很多设计经常会问我一些关于按钮上的问题那我今天也来献丑讲以下我对按钮的一些理解,这段时间针对这些东西研究了很久,在对话框中放置“确认”和“取消”按钮的位置。“确认”按钮是完成任务的主要操作。


“取消”按钮是在没有完成任务的情况下将用户带回原来屏幕的辅助动作。

根据它们的功能,最好的顺序是什么?“确定”按钮应该出现在“取消”按钮之前还是之后?


许多人提到了以下几点平台约定作为答案。虽然这似乎是一个解决问题的方法,但实际上并非如此。它不能回答哪个位置对用户更好,以及为什么。为了一致性而遵循平台惯例的建议是不够好的,给设计师留下了空手而归的机会。


“一致性”是设计师们常用的一个词。不深入考虑用户面临的设计问题也是一个流行的借口。如果一个人不知道为什么会存在,遵循设计惯例有什么好处呢?


如果某个设计约定对用户有害呢?设计师应该为了一致性而盲目地遵循吗?糟糕的设计实践是否应该持续下去,因为设计师们希望通过平台设计的一致性来解决每一个问题?


今天,有一些平台设计约定被广泛使用,因为它们是为用户工作的。但这里的要点是,平台设计的一致性永远不应该让设计师满意,因为这是做某事的唯一理由。理解为什么您应该以一种方式而不是另一种方式来设计您的用户界面的原因是关键。


按钮放置事项


人们可能会说,让你的动作按钮突出给它更多的视觉重量和一个清晰清晰的标签比它的位置更重要。虽然动作按钮的视觉重量和标签是一个重要的设计方面需要考虑,但它不是唯一的方面。


只关注一个设计方面而不是其他方面是一个粗心的设计师的行为。一丝不苟的设计师会思考每个设计方面是如何影响用户的。

对于设计师来说,最难搞清楚的是主动作和次要动作是如何放置的。这就是为什么“确认”/“取消”按钮的争论在设计师中如此流行的原因。


为什么‘确认’按钮在右边工作得最好?


当你通过了平台惯例的争论后,你会质疑哪个位置最有效。您可以通过分析设计如何影响用户来解决这个问题。


减少视觉固定


一些设计师认为,在第二个操作之前将主操作放在左边对用户更好,因为它更接近,因此,点击的时间更少。


这是有意义的,但您不能忽视这样一个事实,即用户在选择要采取的操作之前将查看他们的所有选项。

这意味着大多数用户不会盲目地单击主操作按钮而不查看它旁边的辅助操作按钮。


他们将首先看到左边的主要动作,然后查看右边的次要动作。然后,他们会把眼睛移回主要的动作,点击它。这将在多个方向上总共创建三个视觉固定。


将其与放置在对话框右侧的主操作和放置在左侧的辅助操作进行比较。用户从第二个动作的眼睛开始,然后将眼睛移到主动作上单击按钮。这在一个方向上总共创建了两个视觉固定,给用户一个更快的视觉流。


用户只关注每个按钮一次,并在主动作按钮上结束。将主操作放在左边可能会使用户更容易到达,但是当您从用户的思维过程和视觉固定的角度来看速度时,将主操作放置在对话框的右侧实际上更快。



用户点击或操作按钮的心里状态


当用户单击辅助操作按钮时,他们期望应用程序什么也不做,并将它们带回到原来的屏幕。因此,“取消”按钮的功能类似于“后退”按钮。


当用户单击主操作按钮时,他们期望应用程序执行按钮所述的操作,并将其转到下一个屏幕。因此,“确认”按钮的功能类似于“下一页”按钮。将辅助动作按钮放置在左侧,主动作按钮在右边映射到用户可以期待的‘后退’和‘下一步’按钮功能。


它类似于分页按钮的放置方式。将用户带到下一页的按钮位于右侧,将用户带回其早期页面的按钮位于左侧。这个按钮的放置工作是因为它映射到用户从左到右的阅读和导航方向,其中右是前进的方向,左是后退的方向。


对话框中的“确认”和“取消”按钮应该遵循类似的交互模式,因为它们的功能类似于分页按钮。

不仅如此,在中国用户习惯了左右方向的模式。

将您的主要操作放在右侧,将次要操作放置在左侧,将使您的对话框按钮更容易、更直观地为用户所理解。


为用户提供更有效的视觉流畅度


将您的按钮放置在终端区域可以让用户看到他们最后需要采取的主要操作。这不仅改善了视觉流,也改善了任务流。

用户在扫描时不会跳过主动作按钮。当他们通过时,他们的眼睛就会盯着它,所以他们可以立刻点击它。


按钮放置在中间还是放置在左右两边?


另一个问题是设计师经常想知道他们是应该把按钮放在角落里,还是把它们放在一起。当您将主操作和辅助操作放置在对话框

的角中时,它将很好地映射到左右方向。但是,由于‘取消’和‘确认’按钮不是导航按钮,所以没有必要遵循方向映射。有时它弊大于利。

如果应用程序要执行用户无法撤消的关键操作,那么用户可以看到“取消”按钮和“确定”按钮是很重要的。在这种情况下,“取消”按钮的功能可能像“先前”按钮,但更重要的是,因为它充当安全按钮,以防止任何更改。


在左下角放置“取消”按钮的危险是,由于两个按钮之间的视觉分隔很大,它可能导致用户忽略它。将“取消”按钮和“确定”按钮放在一起,可以使用户更容易在一次凝视中查看和比较这两个动作,从而选择最佳的操作和点击。

我们经常卸载软件的时候一不留神就会点错,或者是我们在装某一个软件的时候全家桶一拥而上。所以在不同场景当中我们所用的按钮形态也是不一致的。


3.下拉菜单加图标和不加图标的区分在哪里!


大的侧边栏菜单甚至会让用户看起来很不双我们应当如何解决这一个问题。

其原因是设计人师在做显示菜单项的时候会出现的问题。

当它们都有相同的视觉处理时,菜单项很难进行识别与区分。

如果不修复这个问题,会导致用户放慢他的浏览速度从而导致用户的流失在大的层面来讲,小的层面来讲阅读不爽导致关闭页面。


菜单栏没有主次之分

当您对菜单项进行全文本或全图标处理时,问题就会出现.当用户扫描他们想要的项目时,他们的注意力分散在菜单周围。这是因为没有层次来吸引他们的注意力。


通过将用户的注意力引导到您的主要项目,使您的菜单可扫描。

要实现这一点,我们可以看下面设计形式来强调重点内容


主项图标


与其在每个菜单项上放置图标,还不如将其放置在主菜单项上。视觉强调首先将用户的注意力引导到这些项目上。

次要项目上缺少图标,这使得它们能够得到其余的关注。


略大一点的图标


如果要使所有图标处,请稍微放大需要突出的图标。

稍微的增大会使视觉效果有很大的不同,同时字形更容易辨认,每一行的线高也会增加。让整个看起来更加有空间感一些。

让用户浏览阅读起来也会更加舒畅一些。

4.在按钮上避免颜色对比度错误


想象一下,当用户在您的界面上遇到一对按钮时,他们犹豫不决。

用户向左看,然后向右看,比较它们。经过一番思考,他们做出了选择。

他们的选择按钮做出决定,而且不确定,因为你的按钮没有层次结构。


不要使用相同的颜色轮廓按钮


甚多的设计师设通常喜欢使用主按钮的轮廓形状作为辅助按钮。按钮样式看起来可能不一样,但还不够。

他们仍然会竞争,因为他们的颜色对比度相等。

为了给主按钮更多的注意,削弱轮廓按钮的对比度。与其使用重颜色,不如使用它的色调。你可以通过降低重颜色的亮度和饱和度来制作。确保对比度足够高,以达到主要的按钮突出性。


不要使用黑色辅助按钮


设计师的另一个趋势是把第二个按钮变成黑色。他们认为,使用中性的颜色,它是不会竞争的。然而,黑色按钮更为突出,因为它有一个更高的对比度。



不要使用黑色,而要使用重颜色的色调,以使辅助按钮比主按钮更弱。要做到这一点,增加亮度和降低饱和水平。



不要在主色调上使用浅色


将彩色按钮与中性灰色配对并不总是意味着彩色按钮会得到更多的关注。如果主按钮的颜色太轻,则中性辅助按钮将更加突出


要避免这一错误,请选择不太明亮的颜色。明亮的颜色可能看起来很有吸引力,但它与白色背景或文字的对比不太好。在主按钮上使用更暗的颜色,这样第二个按钮就不会引起注意。




5.复选框的设计与使用方式哪种更好


在界面上使用复选框之前,您必须先问自己几个问题。复选框是否是在此上下文中使用的正确组件?如果是的话,最有用的显示方式是什么?


许多设计师没有问这些问题,自动使用复选框,没有太多的事先考虑。

因此,它们通过在错误的上下文中使用它们而产生可用性问题。


不仅如此,许多设计人员都很懒惰,期望前端写成默认选框完成这项工作,而不是

自定义复选框设计。但问题是,前端默认的复选框不能完成这项工作,因为它们的

可用性很差。


大多数设计人员在复选框上会犯的几个可用性错误,这些错误会破坏用户体验。



单选与重复的选择


在设计当中我们经常会遇到做选择性的勾选,往往很多设计师会犯的一些错误问题和选择障碍问题。

通过更大的目标来明确与用户进行选择更为明确

我们设计单选框的时候这不是秘密而是让用户做出选择,复选框是很难点击,因为他们的小击中目标。


设计师通常会让标签点击,但如果它不是直观的,那也于事无补。


通过将复选框转换为复选标记,您可以为用户提供更大的命中目标和更清晰的交互提示。



重复物品的重量及数量选择


有时你可能想提供不同数量的商品。使用多个复选框复制它会产生更多的文本来读取,并使界面混乱,且让用户难以进行选择。对于增量输入更改使用数字选择器一次显示该项会为更好些。


undefined


总结以上两点,实际商用应用案例如下所示


6.在设计当中我们该如何控制内容的突出性与阅读性


新闻卡片的设计怎么才能突出信息内容


卡片内容有几种文本类型,提供不同的信息功能。让我们看看基本内容卡的文本类型。

首先是眉毛,它是一个明确的词或短语,用来描述内容的主题。

还有一个标题,它用一个句子中的几个单词告诉用户内容是关于什么的。

在此之后,就会有一个描述内容的正文。

最后,就是时间与操作的按钮

必须通过确定哪些文本类型对用户更重要,从而为您的卡片新闻建立文本层次结构。

此内容新闻卡片的适当文本层次结构为:

1.眉毛-可以是时间,可以是新闻分类

2.标题-最重要的是,因为它描述的内容最快。

3.正文-包含一个描述性段落,但阅读时间最长。

4.描述内容的正文对内内容的简要描述。

您的内容卡应指导用户按此顺序浏览文本类型。要实现这一点,您需要使用浏览控制对文本类型应用适当的视觉强调。


控制用户的浏览顺序


通过适当的视觉强调,可以控制用户浏览的顺序,并指定反映文本层次结构的浏览模式。

当扫描遵循文本层次结构时,用户会浪费更少的眼球运动,并且可以更快地处理信息。


下面的示例说明了浏览控制如何让眼球工作比较。不同的是强调不同的文本类型。

其他文本类型具有相同的强调度,这使得它们争夺用户的注意力。

其他设计形式及浏览方式


在内容颜色的控制上我们可以为三种,重要的突出的需要用户重点进行关注的就用黑色

例如:#333333      #222222   #454545     等等色值

在不需要突出的内容上我们可以用稍微浅一点的色值保证用户能够进行阅读即可,

例如:#999999      #787878   #666666     等等色值更加容易记住

其他辅助的内容表达比内容正文更浅

例如:#bbbbbb      #A8A8A8    等等色值

说到这里我要说一用户体验关于文字的事情如果做出来的设计文字是给自己看的随意设计读没人会说你,有句话说的好:现在

是内容为王的时代,如果在内容上不够吸引或者颜色不够吸引眼球那就是一个很失败的案例。


转自:站酷

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


榜单排名数据,如何做好看?

ui设计分享达人

排名榜单数据在我们日常生活中经常会遇到:


比如微博、抖、快的热搜榜单、各省份之前的GDP对比、双11的现场的榜单数据等等


都会涉及到,可以说排名数据已经涉及到了我们生活中的方方面面。


那我们应该如何做好榜单排名数据可视化呢?


我们常遇到的榜单排名数据主要分为两种:

↑ 榜单排名数据分类


  1. 一种是无数据的排名,也就是只有排名和名称;

  2. 另外一种就是有数据的排名,也就是包含了具体的数值;



那么,本篇文章我将按无数据的排名和有数据的排名,给大家带来,当我们遇到榜单排名数据时,应该如何将图做的更好看!

总共涉及到大于15种可视化表现形式,希望能够对你有所帮助!




一 没有数值的排名数据,如何做得好看?


1 基于数字本身去做变化


最简单的方法,我们可以从排名的数字本身去做优化,比如将排名数字1、2、3....去做内容的填充丰富,改为TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...


还可以基于数字本身所处的环境去做优化,比如在其底部加入填充形状垫底,让数字排名更突显出来(如正方形、矩形等等)。



通过这两种形式,可以让单调的排名数字有了更多的细节,内容更丰富,展示更好看。

↑ 基于数字本身去做优化的案例



2 基于整体,通过形状元素去做变化


在数字本身变化的基础上我们还可以加入对文字的变化,比如在文字的底部垫上形状(如圆圈、条形图等等)。这样通过对数字和文字本身的设计强调,就从整体上得到了优化。

↑在文字底部垫上圆圈,在整体上突出设计感


虽然排名没有具体的数值,无法生成条形图,但是依旧可以通过等比缩放的矩形来强调文字,比如倒立金字塔和横向柱状图。

↑通过矩形形成倒立金字塔和条形图,在整体来突出设计感



3 基于内容主题传达,来做变化


3.1借助icon元素,来做变化

如果排名数据内容所传达的主题是品类、物品、或者城市,那么就可以借助icon来丰富可视化。


3.2 借助定制插画,来做变化

排名的数据如果涉及的是品类中的细分物品,比如生活中常见到的吃的、穿的,用的,那么就可以使用定制插画来丰富排名可视化。


3.3 借助头像、品牌LOGO、产品实景图,来做变化

当我们的排名数据中涉及到了人物、品牌、产品之间的排名时,我们可以通过与之对应的头像、品牌LOGO、产品实景图来丰富排名的可视化表现。


3.4借助地图,来做变化

如果排名数据讲的是省份之间的排名对比,那么我们就可以借助地图元素来丰富排名的展示。但是如果要用到中国地图,一定要注意使用中国标准的地图,当然基于设计的风格,你也可以使用简约风格,去掉地图元素,只保留可视化的部分。




4 借助背景设计元素,去做变化


排名数据也可以借助视觉背景模板来做变化,比如在涉及某个主题排名榜单时(如淘榜单、星数榜单等)就可以通过背景视觉元素来突出排名。

其实这种背景视觉模板,对可视化的要求并不高,你只需将排名通过单一表格的形式展示出来,但需要一个很强的视觉背景版来做衬托,这样,做好一个模板,其余的榜单都可以进行复制使用了。





二 如果排名数据包含数值,如何做得好看?

1 基础可视化排名数据图


如果数值单一,那么可以通过常规的可视化表现形式进行展示(如基础柱状图、饼图、圆圈大小、直角三角形柱状图、180°变形柱状图等等)。


1.1 横向柱状图展示

结合第一节讲到的基础排名样式再加上横向柱状图来进行展示。这样的排名展示形式简单、直观,特别适合单一排名数据之间的对比展示。


1.2 饼图、圆圈大小占比展示

如果排名数据中数值所传达的是占比,那么便可使用饼图或圆圈大小的形式对排名数据进行展示。


1.3 直角三角形柱状图(柱状图变种)展示

通常我们会使用常规的竖向柱状图来表现数值的大小,但其实还可以对其进行一点点变形,比如将柱子的右侧直角边去掉,那么就变身成为了直角三角形柱状图。

这时如果排名的文字比较多,我们还可以将排名和文字置于柱子的上方进行展示,一方面节省了空间,另一方面在视觉上也起到了美观度。


1.4 180°变种柱状图展示

柱状图的变种,在《如何做出比别人好看的柱状图?》系列文章中有讲到,大家对如何实现这种形式感兴趣的可以看下之前的文章,同样的排名数据也可以基于180°的变种柱状图来进行展示。


2 将主题元素和基础可视化排名图进行结合

除了基础的可视化展示和排名数据结合外,如果排名数据所涉及的是一些主题元素(如生活中吃的、穿的、用的等等)。那么就可以将基础的可视化和icon、头像、产品实景图、插画等等去做结合来丰富可视化。


3 使用桑基图来体现排名

当排名的数据中,还多了一列数据涉及到分类, 那么就可以使用桑基图来进行可视化的展示(如国家属于什么地区、公司属于什么行业、城市属于什么省份等等)。对如何实现桑基图感兴趣的可以看看之前发的桑基图教程


4 排名连线图展示

如果我们的排名数据中,还涉及到了年份的排名变化,比如省份之前的年度排名,那么就可以使用排名连线图,通过线段的上下连线走向来看省份之间排名的上升或下降,同时这种数据还非常的适合做成动态柱状、折线图(在后面会讲到)。


4 排名连线图展示

如果我们的排名数据中,还涉及到了年份的排名变化,比如省份之前的年度排名,那么就可以使用排名连线图,通过线段的上下连线走向来看省份之间排名的上升或下降,同时这种数据还非常的适合做成动态柱状、折线图(在后面会讲到)。


5 地图展示

和第一节讲到的地图一样,如果排名数据中涉及到了地理位置数据,那么可以结合地图进行排名数据的展示。通常情况下,完成地图可视化后,可将具体的排名信息以表格的形式罗列在地图的空白区域内,这样结合地图和具体的详细排名数据,就会更加的直观和丰富。


6 组合图展示

如果我们的排名数据维度非常的丰富,数据所包含的信息点在3个以上,那么就可以通过将多种可视化的表现来进行结合,通过组合式的可视化来进行展示。




7 动态柱状图、动态折线图展示排名


7.1 动态柱状图

排名数据也可以通过简单的动态柱状图来进行展示。如果只是单一的排名没有涉及年份的变化,那么可以通过柱子从上到下一个一个地出现来进行展示(如下图左),如果涉及到年份的变化, 那么就可以通过柱子随着年份的上升或下降来进行动态的展示(如下图右)。

动态柱状图的实现方法也很多,我在想做出漂亮的图表,这12个网站不能错过!中有讲过,可以通过flourish网站(https://flourish.studio/)来快速的实现。同时如果想自己DIV得到更定制化版本的动态柱状图,也可以使用B站UP主见齐的开源可视化项目(http://r6d.cn/JdYy)进行实现。


7.2 动态折线图

同样的我们还可以通过动态折线图的形式进行展示,这种表现形式主要看的是排名的趋势变化,同样的,借助flourish网站(https://flourish.studio/)就可以实现这种动态折线图的展示效果。

8 3D建模渲染可视化展示


当然,我们的排名数据也可以使用现在市面上很火的3D可视化的表现形式来进行展示,比如随着摄像机移动的3D柱状图、还有基于主题而自定义化的3D场景排名展示等等。


8.1 3D柱状图展示

将基础的柱状图,通过3D立体柱状图的形式进行展示,排名的结果并不是啪的一下直接公布,而是随着镜头慢慢地公开,对观众来说随着镜头的视角观看有一种慢慢揭秘的感觉!


8.2 3D内容场景展示

如果我们的数据,所要传达的信息非常富有主题场景感,那么就可以通过3D场景渲染的形式进行展示,比如下图GIF中,在表现《哪个国家上班族工作时间最长》就可以将各个国家的学生,置于一个教室中,再通过镜头的移动位移来进行展示。

这种展示形式,实际投入成本还是很大的,从建模到渲染至少也需要2-3天的时间。所以最好基于一个好的选题再选择这种形式,要不然就会出现”虽然视频本身展示酷炫,但是由于选题不好,最终播放量不高“的尴尬情况。



三 做好排名数据的一些小事项


1 时间紧急时,一切从简

比如说,当我们在时间非常紧急的时候,排名数据如果是和地理数据相关的,那么我们会尽量避免使用地图元素来丰富可视化,因为这会增加我们审核检查地图正确性的时间成本。我们可采取常规的可视化表现形式进行展示,虽然会丢失掉一些美观度,但是正确性会有更高的保障。


2 强调重点数据

基于文章内容,需要在图中重点强调某些数据时,可通过填充颜色、框选、重点信息丰富(比如展示TOP3)的形式来对排名进行强调.




四 总结


排名数据看似简单,但其实所包含的展示形式和细节还是非常多的。希望当你在遇到排名数据时,这篇文章能够对你有所帮助!

文章来源:站酷   作者:邹磊ZouL


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

构建用户画像的流程与方法

ui设计分享达人

用户画像作为一种设计工具,可以很好得帮助设计师跳出“为自己设计”的惯性思维,聚焦目标用户,发现核心价值,赋能产品。


前言

在产品研发过程中,产品、设计、研发等人员经常会提到“我们要为目标用户设计”、“我们的用户是谁”等字眼,可见找准目标用户在产研过程中至关重要。用户画像作为一种设计工具,可以很好得帮助设计师跳出“为自己设计”的惯性思维,聚焦目标用户,发现核心价值,赋能产品,在互联网各类型产品中有广泛的应用。

本文将介绍用户画像概念、价值以及如何从0到1构建用户画像,希望阅读后能让大家了解用户画像相关理论,并有助于后续对用户画像的深度学习。

什么是用户画像?

目前业界常使用的用户画像概念有2种,一种是User persona,一种User portrait,也有翻译为User profile。

第一种用户画像,即User persona,根据Alan Cooper的《About Face》,是基于产品对真实世界的观察,抽象出来的具有代表性的虚拟用户模型,有时也被称为综合的用户原型(Composite User Archetype)。这个概念最早由Alan Cooper在《The Inmates are Running the Asylum》(软件创新之路)一书中提出,后续在多处书籍进行了不停的完善。

这个画像主要特征如下:

1、描述一个用户画像包括角色描述和用户目标

这里角色描述是指如名称、年龄、位置、收入、职业等,这类角色描述主要是为了使用户画像更丰富、真实,具象;重点关注的是用户动机,用户目标是其动机。

2、可以代表相似的用户群体或类型,也可以代表个体

User persona是抽象的、虚拟的,代表一个典型的用户群体;虽然也可以代表个体,但个体并不是实际独立的个人,而是从实际观察研究中综合而来。

3、须针对具体情境-具体产品的行为和目标

User persona研究的是用户在具体情境下对产品的使用,关注其在一定范围内的行为、态度、能力、动机等。即使同一个角色,在不同产品下的动机也是有差异的,一般来说不轻易在不同产品间复用,需要考虑不同类产品的切入场景。

第二种用户画像,即User portrait,是指用户信息标签化,通过收集用户多维度的信息数据(如人口统计属性、社会属性、行为偏好、消费习惯等),并对其进行统计、分析,从而抽象出的用户信息全貌,相比user persona,它更侧重于数据挖掘、标签体系搭建。

这类画像主要特征如下:

1、真实性:集合了每个个体的真实信息,如既有人口统计属性等静态信息,也有用户行为的动态信息。

2、时效性:用户动态信息并非一层不变,可以实时追踪其变化。

3、覆盖度广:既能监测到用户感兴趣的内容,也可以看到其不感兴趣的内容,维度众多,颗粒度粗细均有。

以下是这2类用户画像的简要差异对比:

本文重点介绍第一种用户画像(user persona),至于如何创建数据画像标签及应用,会在后面的文章中介绍到,此处不再赘述。

用户画像的价值

用户画像作为一种设计工具,其作用贯穿产品生命周期的前中后。结合设计工作的几个阶段,画像的价值主要有:

1、设计前:帮助确立产品定位、目标

2、设计中:帮助确立设计目标、设计策略与准则

3、设计后:促进其他工作,如市场推广、运营活动、销售规划


用户画像的构建流程

整体来说,用户画像(user persona)多采用定性的研究方法来进行角色划分,主要可采用的资料来源有:人种学研究、情境调查、观察法、访谈法、桌面研究等,具体实行时会根据业务情况稍作调整。

本文结合酷家乐-快搭、赢客2条业务线经验,梳理了从0到1构建画像的流程与方法,如下图所示:

Step1:确立目标与画像维度

明确业务目标与用户角色,不同的角色与目标在收集信息时有所差异,进而影响到最终得到的画像结果。因此在做画像之前,需要考虑清楚画像目的。明确目标后,就可以结合目标与角色,制定出画像信息维度。

此处有2个注意点:

1、通用信息有哪些?2、如何筛选出目标用户?

针对第一点,通用信息维度可以结合用户画像的构成要素,自身业务情况有选择性的摘取。这里需要注意,to C和to B类的信息维度会有些许差异,比如to C属性产品会关注用户的性别、年龄、家庭情况、爱好习惯等,而to B类则不太关注这些,它们会更侧重用户的工作能力、工作内容、使用工作等等。

用户画像构成要素汇总:


针对第二点,由于是创建用户画像,我们需要尽可能覆盖不同用户。那找谁进行研究呢?这里介绍2个小tips。

Tips1:用户筛选条件

寻找与业务紧密相关的产品、运营,一起讨论确定用户类型,在讨论中我们会定义符合条件的用户,得出一张用户筛选条件表,进而根据这张表邀约用户。

Tips2:工作职能筛选

针对一些to B类岗位职能划分清楚的产品,可以基于工作职能寻找用户。实操中需要结合实际情况,看是否需要区分管理岗与普通执行岗。

以快搭智能设计业务线为例,在用户画像项目中

业务目标:整体全面的了解用户特征、产品认知、使用场景与痛点

目标用户:考虑目标是希望先对快搭工具侧使用用户有个全面、整体的认知,问卷法中D端&B端用户有访问&开通过快搭行为都算,而在深入挖掘场景与痛点时,结合问卷的反馈,D端和B端重点寻找活跃用户,并细分了用户身份类型。

这2者结合,最终梳理出快搭的用户画像维度。


Step2:确立调研方法

确立画像信息维度后,需要结合用户、时间精力、经费等因素,选择合适的调研方法以实现信息收集。常用的调研方法有3种:

定性研究:如访谈法、二手资料研究

定量研究:如问卷调研、数据分析

定性+定量:上面2种方法的结合。


每种方法如何选择?可以从调研方法的差异性、产品所处生命周期,再结合实际时间精力、经费等情况酌情选择。

1、调研方法的差异性

定量和定性是一个相对的概念,定量法着重了解“是什么”,即发现用户做了什么,挖掘事实信息。而定性方法着重了解“为什么”,即挖掘用户行为背后的原因,从而理解现象。

2、与产品生命周期对应的调研方法

新生期:这个时期产品尚未定型,目标用户也在市场探索中,可以尝试通过访谈法,找专家用户或竞对产品的用户,重点挖掘TA们使用产品的场景,核心痛点是什么,以便进行MVP版本的验证。

成长期:这时产品已经进入用户快速增长时期,随着体量的变大,用户会出现分层,暴露的问题也会越来越多,可以尝试通过定量法进行用户分层,再辅助定性了解每类用户,针对性解决问题。

成熟期:用户体量趋于平稳,产品一方面需要维稳,持续满足现有用户的需求,提升产品体验;另一方面需要尝试突破,找到细分市场,以挖掘新的增长点。可以尝试先定性挖掘蓝海,再定量进行验证。

衰退期:定性了解原因,调整产品。


以快搭智能设计业务线为例,综合了目的、产品周期、调研方法、时间精力等因素,采用了数据+问卷+电话访谈三种方法结合。

Step3:制定计划与数据收集

在明确目标与方法后,需要对整个研究进行细化,制定具体详实的执行计划并落地,把控整体节奏以收集有效的信息。

例如,若使用问卷法,则需要进行问卷设计——被访者选取——问卷投放——问卷回收。若使用访谈法,则需要准备访谈前中后的相关资料。采用不同方法,执行环节需要注意事项有所不同,可以针对性查阅相关方法的工具书、文章,此处不再赘述。

Step4:分析资料,角色聚类

第三步骤收集整理到有效信息后,需要识别关键的行为变量,将调研到的用户与行为变量进行一一对应,并识别差异化行为模式。

在寻找可能导致用户间行为差异变量时,结合以往经验,笔者总结了一下可供参考的维度。

以行为变量为依据进行用户对应时,不必追求绝对的精准,只要相对能映射清楚即可。梳理完后,观察可发现某些用户群体聚集在几个行为变量上,它们构成了一个显著的行为模式,由此聚类出某个角色类型。依此类推,可以发现几个不同的行为模式。为保证全面,映射完最好遍历一下,检查是否有用户或变量的遗漏。

以快搭为例,用户在使用智能设计工具时,行为变量可细分为:职业类型、专业技能水平、使用方式、看重因素等等,一一对应后聚类出几大类角色类型,比如其中一类追求速度,看重整体效果;另一类,重过程,讲究细节。

除了上述方法外,针对to B类的企业级产品,当用户的职能属性很强时,可以将企业职能作为划分角色类型的依据。这时,只要针对每类角色抽样出典型样本,保证完整性,进行调研即可。

Step5:综合特征,产出画像

完成角色聚类后,梳理每类角色的行为、目标、痛点等维度特征,形成画像的基本框架,并对每个角色进行属性信息、场景等详细描述,让画像更加丰满、真实。

此时需要注意:

1、虽然网上有提供很多画像模板,但只是参考示例,大家需要根据自己收集到的信息,制作属于自己业务的画像;

2、最好为每个画像贴上一张符合角色特征和所处环境的照片,传递更加情感化的信息,带入感更强。

3、确立画像优先级。根据Alan Cooper的建议,一个产品最好不要超过3个用户角色,在得出画像后,需要结合覆盖人群基数大小、收益潜力、竞争优势、业务规划等维度去评估重要程度,定义好主要角色、次要角色、补充角色等

4、用户画像作为一种设计工具,不是一层不变的,需要随着时间推移不断进行迭代,在产品积累了一定用户量时,可以使用定量法进行验证,补充优化更多维度信息。


用户画像框架

以快搭为例,某类角色-销售型导购画像如下:

Step6:结合产品,画像落地

用户画像只有落地,助力产品设计,才能体现其价值,否则就是空中楼阁。

在创建完画像后,可以组织分享画像结果,让团队内成员对服务的用户达成共识,进而探讨产品的新机会点或改进点,逐步落地到产品设计、推广营销中。用户画像在设计前中后如何应用,后续有文章进一步详解,本文不再赘述。

文章来源:UI中国   作者:酷家乐用户体验设计

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


交互设计师解析三个案例:单复选框、标题省略号、输入框清空按钮 | 设计详解

ui设计分享达人

结合理论落地项目功能,从逻辑层面思考问题。

1、从单复选组件反思功能设计问题


节前有一位读者问了一个关于单选与复选框样式选择的问题,大概是:

看到很多单选与多选的设计形式,多种多样,以前看到「圆点+圆圈」就知道是单选,但是为什么现在单选与多选的设计样式五花八门,都没有遵守前面这种规范呢?这些组件的样式到底该如何确定呢?为什么会有一种模糊不清,不知道如何使用的情况?


我发现许多人都有一个习惯,就是喜欢把某个具象的内容抽象化,把某个具体的问题概念化。

比如认为单选就应该是「圆圈+圆点」的形式,但似乎从来也没有任何明文规定单选就必须是这样的形式,只不过大家看得多了,就习惯认为是这样,觉得就是这样规定的,但其实并没有过这样的规则。

要知道,样式常常根据功能在变化。比如功能优化了,样式也需要进行修饰,并不是说这里有一个单选操作,就必须是「圆圈+圆点」的形式给用户选择。无论是在电脑还是手机上,都是一样的道理。


这样去处理问题,常常会把实际的业务问题给处理没了,最后变成控件选择的问题,而不是功能本身的问题。

比如普通的弹框,也是一种单选状态,为什么不也改成下图右边这样的呢?不就是操作路径长,点击起来麻烦,多此一举,而且也不好看么?

即便真的在某个场景下,非得使用上图右边的单选形式,那么把样式改成下图这样,又有何不可呢?

只不过常规的「圆圈+圆点」被使用得多了,大家形成了共识而已,但并不代表它就是一种标准。


如果有一个规则规定说,单选必须是「圆点+圆圈」,那么各位目前所设计的绝大部分组件都将不能使用,包括各类菜单或开关。比如下图这样的 action sheet 就不应该存在,而它的出现也是因为功能属性、设备迁移、操作形式等内容的演化所呈现的结果。

这就是大家在处理设计问题时,习惯做一种概括,希望能复用于绝大多数场景而导致的错误情况,没有落实具体问题具体分析的原则。


包括这位读者的问题,也是希望能够明确单选与复选样式的选择问题,以便往后能够更有条理的使用。但可惜并不是这样,从上述我举的控件例子可以看出,单选形式早就已经变了模样,而多数人并没有注意到,还在认为单选与多选就应该是圆圈与方框的形式。

设计工具/方法论,确实是有部分指导作用,但不能作为绝对性或权威性的内容来吸收,应该辩证地去看。

而之所以在移动端延伸出许多自定义组件(形式并没有遵循所谓的市场常见规范),正是因为业务与功能的多样性导致的结果。

样式的选择不单单是看到的那部分,它还可以任意变化地处理,无论是单选或者是多选,不该被样式套牢了。而它的决定因素应该是内容。


比如,iOS 闹钟的铃声选择,有许多可选项。

但是因为内容的明确性,大家都知道,闹铃只能选择一种,不会同时有 2 个铃声响起来(当然也可以这么做),所以即便闹铃的单选形式再如何变化,大家也都知道它是单选的,这就是功能决定了操作形式的例子。


类似于,再如何变化选择样式,无论是圆圈、方框,或只有勾,甚至是其他情况,大家也都知道它就是单选。

而之所以用勾或圆点表示被选中状态,只不过是人的一种正常认知意识,即使改成三角形,只要能说清楚是被选中状态,那也不是不行,只不过三角形没有勾来得清晰罢了,而并不是因为有什么特殊含义。

所以只要梳理出符合自己产品的「单多选」样式,形成规范即可。一些人会感到模糊不清的原因是它本来就没有所谓的标准,又何来的清晰呢?


写到这,想到之前有读者问:什么时候该遵循设计规范,什么时候不该?

要知道,设计规范本身就是基于某个具体产品内容所构建的一个整合标准,为了规范化存在共性的功能形式。而对于共性的判断也应该是从功能来定义的,比如返回都在左上角类似的,但是一定么?

单拎出来说什么时候该遵循,什么时候不该遵循,是很概念化的一个问题,不可能存在一个具体话术标准,说什么时候应该,什么时候不应该的。


如果我回答,符合规范中已有的形式的,就遵循,不符合的就不遵循。那就是一句典型的废话了。但除此之外,我也就不知道如何解答了,除非你把规范和具体问题发给我,我可以跟你一起讨论讨论。


写这篇文章的时候,看到一位朋友发的信息:

为什么手机刷新都喜欢下拉?因为神经科学研究表明,这个动作,更容易让人产生对不确定性和惊喜的期待,原理和赌场的老虎机类似。


很多人都会习惯性给一些操作或交互形式做类似这样的定义。

但这么定义是不对的,因为这相当于前面说的,把业务给解释没了,成了形式上的讨论。而为什么会使用下拉、以及下拉会有什么情况,包括它所解决的问题,都没有任何的分析。

比如,下拉之所以让人上瘾,并不是因为「刷新」本身。下拉只是一种交互行为,它的出现也只是为了解决早期刷新按钮占据屏幕空间的问题,希望通过下拉进行刷新,以隐藏掉屏幕上的刷新按钮,给屏幕留出更多可用空间。

而采用下拉是因为它更符合人的直觉 —— 往下拉能看到更多新的内容。


但是人之所以会对下拉上瘾,并不是因为下拉这个行为,而是因为下拉能看到更多信息。下拉本身只是解决了屏幕空间的问题,而人其实是对内容上瘾。

比如我在腾讯新闻里看 NBA 的资讯,通常只会直接上滑,看下面的内容,看完了就关了,不会进行下拉刷新。

因为在腾讯新闻里,下拉刷新的新闻并不是的内容,更多是今天或今天之前的信息,不刷新反而是刚刚更新的资讯,那么下拉刷新虽然也是刷新,但是刷新出来的内容是旧的,也并不吸引我,反而成了我要避免的操作,因为只要一下拉,的资讯就会被旧的资讯挤掉,要刷掉进程重新打开 App 才会重新再显示的。

所以就不能简单的定义说「下拉刷新是一个容易让人上瘾的操作」,而是要关注内容,如果刷新的信息都是旧的,或者是用户没兴趣的,那即便刷新了,也不会引起用户的注意,也更不可能让用户上瘾了。


2、标题文案溢出使用「…」合理吗?


读者:

呆呆,这个图的卡片列表里,标题用省略号合适吗?

(因为原图涉及读者项目隐私,所以重画了个草图。)

又是一个没有业务背景的问题。不过这个问题比较简单,可以展开来说一下。


通常,我们会在各类产品里面见到诸如「标题超出部分用省略号显示」这样的设计,譬如上面这图。

于是,许多人在自家产品的设计过程中,遇到此类情况,被开发问到时,也会搪塞一句:文案要是超出就「…」显示吧。

大多数遇到这种情况的,都是因为之前没考虑好,才临时想了这个解决办法。

而很多时候,一些产品之所以用「…」显示,并不是因为单纯地文案溢出,可能是专门设计过的。

所以,如果简单地认为「…」就是解决溢出而使用的方法,那就有问题了。


下面举几个例子。

有些产品,我们几乎看不到列表视图里的标题是有省略号的。

因为这类产品的目的就是让用户读到完整的标题信息,对眼前的内容好做判断,从而考虑是否点进去看详情。

所以在设定的时候,界面中标题字数的规定,与界面样式就已经提前规划好了,可能在后台设置就限定死字数,要求运营人员上新时要统一界面的展示形式。

这种情况下,一般就不会再有省略号的问题,譬如一些知识付费类产品。

比较典型的还有 TED 演讲视频的标题,在《设计体系》这本书里专门提到了这个案例。

对于 TED 来说,演讲标题的信息优先级是最高的,所以他们宁可保留所有标题文案,也不对文案做截断用「…」显示。

因为对标题做截断是很容易的,而难的是把一个演讲主题提炼成一句简短句子,所以他们为了展示更清晰的标题,宁可在界面上保留长标题,甚至为长标题的显示而专门设计相符合的展示形式。

反过来,他们也因为这一点而确定了界面上标题字数的上限,确保文案不会超过界面显示的最大临界值。


包括一些资讯类产品,在标题上也会做限制,以满足最大化呈现且不使用省略号。意思是:假设界面上文案范围定了 30 个字符,那么配置的时候就必须 30 个字符以内把内容表达清楚,且必须完全显示在界面上。

所以经常看到一些 UGC 产品之所以会限制标题字数,原因除了常见的标题不能过长之外,还有一点是为了在列表页就能显示完整。

各位在设计这类产品功能时,也要注意到这一点,而不是随意说一个「字符不能超过 50 吧」。

而有些产品的内容列表,之所以频繁使用省略号,它的目的是为了引导用户点击用的。

这类形式一般出现在营销号发的文章里,多是营销人员自己为了文章点击率而做的。很少会有一款产品的所有内容都是这样的,除非是一些内容产品,运营方是企业自己,为了让产品上的内容有更多人点击而这样去设计,当中可能涵盖了广告,以此赚取广告费。

不过这类内容的设计已经让用户开始反感,所以如果不是特殊情况,最好少这样去做。

当然,还有同类型的,一般出现在页面面积小且需要展示更多信息的集合类视图,比如:

这种形式的设计,就是因为页面上想展示的信息太多,以至于通过这类合集来展示某个模块里的内容,营造出一种很丰富的感觉。

也就是利用「…」引导用户点击,表示信息没有展示全,如果要看,就点开详情,进二级页面。


还有一些产品的省略号,纯粹就是大家理解的,溢出就省略号显示。

比如同样是资讯或内容类,以文字为主的产品,虽然标题超出范围用了省略号,但用户基本也已经知道是什么内容(上面那个集合类视图也是一种),且还有摘要引读。


比如下图:

这种标题字符限制在了两行以内,多余字符用「…」展示,基本上已经是一句完整的话,能让人大致了解这条信息的意思。并且还有部分摘要,已经足够用户判断是否对它有兴趣,如果没兴趣,直接刷走也无所谓。

包括一些电商类产品,用户多以商品图片为主要决策因素,商品标题作为辅助信息,优先级不高,所以标题溢出是否省略号显示也无所谓。

这其中有一个特殊情况,就是有些产品的标题即不展示全,同时又没有省略号,比如淘宝的商品搜索结果页面。

因为这类列表实质是一个产品卖点集合的浓缩词,不是完整的一句话,多余字符展示或者不展示,都不会有太大影响,所以也不重要。


当中我比较反感的还要数农药了。

好友邀请的列表视图里,常常看不全昵称,因为好友会有游戏昵称,微信备注会展示在游戏昵称后面,以至于要点到游戏关系里先看全昵称,再到匹配界面邀请好友。

既然已经区分了微信好友与游戏好友,为什么昵称上面不也加以区分呢?

当然,经常玩的好友可能没这个必要,毕竟头像或昵称都可以很快识别出来,但是偶尔一起玩的好友通过这样的识别方式就比较难了。

这里就是简单提一句。


通过上面提到的一些例子,以及不同场景下标题省略号的处理方式,相信大家对这块的理解会比之前更深。

同样,对于开篇读者提到的问题,更符合的情况可能类似于知乎这种,有完整句子,所以标题是否省略号处理也就没太大影响。

但具体的还是要结合业务详情仔细考量。

而标题内容的展示是否要用省略号处理,优先要看这条信息的业务权重,以及是否会影响用户决策。

所以各位在设计这类内容标题是否要用「…」显示时,也要注意判断自己的产品特性符合哪种类型,而不是随意一句话,说「超出就省略号显示好了」。


3、怎么判断输入框里放不放清空按钮?


最近收到两个问题,正好都与输入框有关:一个是怎么判断输入框要不要放置清空按钮;另一个是输入框超过限制后,是禁止用户继续输入,还是允许超出但会警告提示。

在一定程度上,这两个问题的分析逻辑是类似的,所以放到一起聊正合适。


先看第一个问题:怎么判断输入框里要不要放置清空按钮?


原问题是这样的:

呆呆,我最近在优化公司的产品,遇到一个问题,就是 PM 想在聊天输入框里加一个「清除按钮」,可我觉得不太合适,但是说不出原因,只能说没见过在聊天框里加清空按钮的。这个问题要怎么判断呢?


我们一般会在搜索、手机号输入框里看到类似的清空按钮,比如输错了就点一下,清空后再重新输入。但是很少会在聊天框里看到清空按钮,为什么呢?

主要是「时效性」…算了,这种概念词用多了,发现现在人都不会讲话了。说白话就是「要快」。

无论在登录注册还是搜索的场景下,除了内容本身之外,最注重的就是效率。


譬如有个数据大概是说,用户登录注册花的时间超过某个范围,转化率就会对应逐步降低。而率,就是让用户能快速登录注册账号,使用产品功能。所以设计师们会在登录注册的操作流程里抓住可提率的每个细节,输入框使用效率就是其中之一。

搜索也是一样,当用户有明确目的使用搜索框时,关键词就是用户当下最关注的信息,如果输错,再一个个删除,显得麻烦,所以清空按钮能在这里提高用户的操作效率,甚至 iOS 的搜索组件也会自带一个清空按钮。如果是电商产品,率是能间接提高成交率的。

这里的输错,也有两层意思,一个是用户在输入过程中发现错字,比如登录注册时,发现手机号输错了,一个个删除反而没清空重新输入来得快,因为删了之后,号码要重新背一遍,具体到某个数字,然后接着输,特麻烦。

或者搜索内容时,发现有错别字,删除某个字再重新输入,反而没有清空重新输入来得快,毕竟输入法有串联关键词组的功能。


另一个是反馈的结果不符合用户的心理预期。比如输入手机号已被注册,或者搜索结果不满意要重新输入关键词,使用一键清空都是比较的。

而且输入之后,系统需要给用户呈现结果,如果结果不满足用户预期,还会存在短时间内多次输入与清空的情况。那么,无论是错字还是对结果不满意,清空按钮都可以非常便捷地帮助用户一键清除上次输入的字段,让用户更快速地重新输入新字段,从而提高用户的操作效率。

于是,我们会把这类场景下的「清空」说成是「一键清空」,主要是因为方便。而它的作用就是,在出错的场景下,更快捷地给用户重置的操作。


反过来,各位可能要说:那聊天框不满足这个条件么?


我们接着看聊天输入框。

我们知道,聊天输入框的内容不是固定的,它是根据对话内容而变化的,用户甚至需要花时间持续输入并纠正自己的用词,以及话术的准确度。过程中,如果输入的内容多,而且又是即兴的,耗费的时间与精力也是很大的,清空后也难以再恢复。

它不像登录或搜索,固定的输个数字串或关键词,它是一段完整内容。虽然也会有某一句话或者某个词输错的情况,但是一键清空的操作成本太低,对应着聊天框的高输入成本,一键清空的存在与之并不相符。

于是,这里就引出了一个概念,叫做「输入成本」与「修改成本」。

清空按钮对应的,就是低修改成本,因为简单点击一下,就清空了。它所适用的场景就是低输入成本的情况,也就是前面提到的登录注册或搜索 —— 输入的内容相对固定,且可能反复。

对于登录、搜索等指向性比较明确的输入框来说,用户在乎的是输入和反馈的效率高不高。一键清空操作能带来效率上的提升,而且操作后带来的损失成本是很低的。因此,一键清空操作在这个场景下,对用户来说是安全且的。

但是在聊天场景下,一键清空作为低修改成本的作用是不适合的,因为这时候输入成本比较高。

用户在聊天输入框内表达清楚自己的想法是为了让对方理解,达到交流的目的,这样的内容是不确定的。而且在聊天输入出错情况下,我们有多种操作方式让用户重输,比如键盘快滑定位,触摸定位错字等,都比一键清空重新输入的成本低很多,而它所谓的「便捷性」在这里意义也就不大了。


于是乎,在衡量输入框是否需要清空按钮时,我们首先要知道,清空按钮是低修改成本,那么如果输入框的输入成本比较低时,我们就会使用清空按钮,来提高操作效率。而当输入成本比较高时,一键清空的操作就显得配不上这个输入框了。所以,它在聊天框里就没有存在的必要了。

包括其他非固定内容的输入框,也是一样的道理。


接着,延伸出第二个同学的问题:输入框超过限制是禁止用户继续输入,还是允许超出但会警告提示?


相信各位读完上面的,再看这个问题,应该也能分析出原因了吧?逻辑跟上面的也差不多。

也看输入成本,比如是固定内容的手机号,我们正常会禁止多余输入,因为这样用户更容易判断手机号是否正确。

如果是短长文,说明用户可能是手打字超出限制,这时候如果禁止输入,用户不好在输入框里做内容删减或修改,也会打断用户的输入流,毕竟还没写完就限制了,那得先删掉前面的,再来思考后面怎么写,会乱。而且如果是复制的,禁止输入的话,超出部分就被截断了,也要先删减,再继续复制剩余部分,非常麻烦。除非先在别处删减到限制字数内,再复制过来,但这样又增加了用户的操作成本。

如果允许输入但警告提醒,那么用户就可以根据自己已经输入完的内容做删减修改。


所以对于这个问题,我们从这个视角出发,也能了解一二,就是通过适用场景与输入成本来分析。


当然,以上所有内容更偏向于通用性说明,针对具体业务还需要具体分析。


文章来源:站酷   作者:呆总、

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


花了很多时间做设计分析,但对画稿子没什么帮助?

ui设计分享达人

如何产出一个对实际落地更有指导性的设计分析?本文结合实际项目中常常会遇到的一些问题,总结了前期设计分析的一些实践经验。

设计分析是作为交互设计师必备的一项基础能力,一套有效的分析思路可以帮助我们找准设计发力点,更效率的推导出合理的设计方案,它是一种思维能力,也是一种方法工具,但是在我们的实际项目中,常常会遇到这样几种场景:

  • 新手设计师或者第一次做活动的设计师,设计分析不知道要如何入手

  • 花了很多时间做分析,但感觉对实际画稿子并没有什么帮助

  • 分析过程中发散了很多很好的点,但最后大多都落不了地

这些情况常常会导致设计分析流于形式,套用了很多方法、花了很多时间、输出了很长的文档,内容看上去似乎很丰富,但落地的方案却平平无奇,甚至也会自我怀疑设计分析真的有用吗?

总结下来,会出现这些场景的原因有两点:首先是设计分析太泛,没有聚焦到核心问题;其次是时间分配不合理,没有抓到发力重点。那么结合我们目前的项目来看,怎样做一个更有用的设计分析呢?

活动中常见的项目类型

根据活动产品化设计思路,可以把我们的日常项目分为两类:迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目,例如大促主会场、我的专属会场、榜单会场、攻略等等,通常是一些已经比较固化的经典业务,或基础的功能类业务;探索型项目则是一些全新的业务方向,例如下沉会场、直播会场等等,刚处于进入期或成长初期。

undefined

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理,没有抓到发力重点,尤其是对于很多新手设计师来说,往往大部分的精力花在重复之前已经做过的内容,比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等,但是对于已经比较稳定的迭代型项目来说,这部分背景内容相对来说已经比较固化(除非有明显的变化),这就可能会导致重复分析出来的结论跟之前的差别并不大,也很难带来实际业务提升。

undefined

既然迭代型项目过往已有过经验和策略的沉淀,也经历过多轮的数据迭代,核心思路应该是先定义要解决什么问题、然后才是如何解决,这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题,没有问题的项目也可以不用再花时间做分析,效率做即可,例如像全部会场,本身的业务模式就比较简单,过往的效果也相对比较稳定,如果不考虑进行突破性的创新,通常是可以效率复用的,这种时候则不需要再去做分析,毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢?有三个常用的思路:看数据、看用户反馈、看运营策略。

第一,从数据分析中找到关键问题,例如根据618的项目数据复盘,我们发现预售会场、品牌会场的页面跳失率较高,那么双11核心可以围绕“如何降低跌失率?”“如何提升流量利益效率?”去进行分析,从而推导出更有针对性的设计策略。

undefined

第二,根据用户反馈来找到关建问题,例如过往的主会场,用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容,那么可以围绕“如何更好的进行需求匹配?”“如何提升屏效?”来思考和分析,解决实际存在的问题,才更有可能提升体验和数据。

undefined

第三,结合运营策略,很多业务虽然已经相对稳定,但随着每次大促战略的变化,运营策略上也会有一些新的需求,那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场,在原会场定位不变的情况下,在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求,那么服务内容如何匹配“专属”会场的用户心智,则是这个会场可以重点解决的问题。

undefined

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后,就可以按照常用的设计方法进行方案的推导,在发散解决方案的过程中,如何判断方案的合理有效,确保最后的可落地性,是让我们设计分析有价值的关键,因此总结了两个常用的技巧。

首先要理解业务逻辑,减少无用的策略发散,很多时候我们的方案很难推动落地的原因,是没有考虑到业务的诉求,越能够深入的了解业务,才能更好的解决业务侧的顾虑,保证方案的可落地性。

其次是要跳出来从整体来看优先级,我们在进入自己的思维逻辑中时,会比较容易陷入细节,有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视,并不是因为我们的方案不够好,而是没有关注到整体优先级,因此要学会看全局,通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据,相当于需要从零开始去探索如何做,对于设计分析的能力要求会更高,那么常常容易陷入两种极端相反的误区,要不就是容易被方法论套路,设计分析过泛但得不出实际有价值的结论,要不就是完全没有头绪,属于想一步做一步的类型,分析的内容之间缺乏逻辑。

undefined

因此,探索型项目的核心思路是要先有分析框架、再做纵向深挖,就像画交互稿的过程一样,需要先定义交互框架,纵再进行交互细节的打磨,才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步,一是先想清楚要分析哪些内容,包括哪些环节是必要的,哪些是重点的,时间要怎么分配。例如当我们第一次做宠物品类活动时,需要对这个品类有深入的理解,因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容,而如果我们做的是一次大促的综合会场,其主要用户群体如果跟常规站内主流群体并无差异时,则不需要再花费大量的时间单独去分析用户画像,因此,需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

undefined

第二步是梳理清楚内容之间的逻辑关系,常见的逻辑结构有两种,一是递进式的推导(A→B→C),分析维度之间是先后关联的,通过严谨的逻辑步步推导而来,例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案;另一种逻辑结构是进行综合归纳(A+B→C),即通过几个不同的维度综合推导,例如经典的五导家分析方法,结合用户目标以及业务目标综合推导出设计目标。

undefined

在很多设计分析中,我们也会参考一些方法论,其实方法论提供的就是分析框架,在理解了这一步之后,相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

undefined

纵向深挖如何得到有价值的策略

有了分析框架后,接下来就可以进入每个模块的具体分析了,如果要得到有价值的策略,同样有两个小技巧。

首先,策略要足够具体、有差异化,尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营,这个大的方向没有错,但如果只到这一步是很难指导具体内容落地的,所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们,才能够更准确的判断是否会存什么问题。

其次,策略最好能够关联验证指标,可以参考UGD数据增长思路,在推导策略时要能预判它能带来哪些数据指标的提升,以保证设计分析的结论是有理有据的。


文章来源:站酷   作者:大葱设计

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

花了很多时间做设计分析,但对画稿子没什么帮助?

ui设计分享达人

如何产出一个对实际落地更有指导性的设计分析?本文结合实际项目中常常会遇到的一些问题,总结了前期设计分析的一些实践经验。

设计分析是作为交互设计师必备的一项基础能力,一套有效的分析思路可以帮助我们找准设计发力点,更效率的推导出合理的设计方案,它是一种思维能力,也是一种方法工具,但是在我们的实际项目中,常常会遇到这样几种场景:

  • 新手设计师或者第一次做活动的设计师,设计分析不知道要如何入手

  • 花了很多时间做分析,但感觉对实际画稿子并没有什么帮助

  • 分析过程中发散了很多很好的点,但最后大多都落不了地

这些情况常常会导致设计分析流于形式,套用了很多方法、花了很多时间、输出了很长的文档,内容看上去似乎很丰富,但落地的方案却平平无奇,甚至也会自我怀疑设计分析真的有用吗?

总结下来,会出现这些场景的原因有两点:首先是设计分析太泛,没有聚焦到核心问题;其次是时间分配不合理,没有抓到发力重点。那么结合我们目前的项目来看,怎样做一个更有用的设计分析呢?

活动中常见的项目类型

根据活动产品化设计思路,可以把我们的日常项目分为两类:迭代型项目以及探索型项目。

迭代型项目是指过往已有过积累的成熟项目,例如大促主会场、我的专属会场、榜单会场、攻略等等,通常是一些已经比较固化的经典业务,或基础的功能类业务;探索型项目则是一些全新的业务方向,例如下沉会场、直播会场等等,刚处于进入期或成长初期。

undefined

如何完成一个有效的设计分析

1. 迭代型项目

迭代型项目容易陷入的一个误区是时间分配不合理,没有抓到发力重点,尤其是对于很多新手设计师来说,往往大部分的精力花在重复之前已经做过的内容,比如花了很多时间重新去分析用户、分析方向、分析行业趋势等等,但是对于已经比较稳定的迭代型项目来说,这部分背景内容相对来说已经比较固化(除非有明显的变化),这就可能会导致重复分析出来的结论跟之前的差别并不大,也很难带来实际业务提升。

undefined

既然迭代型项目过往已有过经验和策略的沉淀,也经历过多轮的数据迭代,核心思路应该是先定义要解决什么问题、然后才是如何解决,这样才能找准关键发力点。

要解决什么问题

首先要思考是不是真的有问题,没有问题的项目也可以不用再花时间做分析,效率做即可,例如像全部会场,本身的业务模式就比较简单,过往的效果也相对比较稳定,如果不考虑进行突破性的创新,通常是可以效率复用的,这种时候则不需要再去做分析,毕竟也要考虑投入产出比。

那么怎么定义要解决什么问题呢?有三个常用的思路:看数据、看用户反馈、看运营策略。

第一,从数据分析中找到关键问题,例如根据618的项目数据复盘,我们发现预售会场、品牌会场的页面跳失率较高,那么双11核心可以围绕“如何降低跌失率?”“如何提升流量利益效率?”去进行分析,从而推导出更有针对性的设计策略。

undefined

第二,根据用户反馈来找到关建问题,例如过往的主会场,用户调研一直都会反馈主推楼层太长而找不到感兴趣的内容,那么可以围绕“如何更好的进行需求匹配?”“如何提升屏效?”来思考和分析,解决实际存在的问题,才更有可能提升体验和数据。

undefined

第三,结合运营策略,很多业务虽然已经相对稳定,但随着每次大促战略的变化,运营策略上也会有一些新的需求,那么就根据这些差异化的诉求去找到发力点。例如针对我的专属会场,在原会场定位不变的情况下,在近两次大促中运营侧都提出需要由这个会场来承载平台服务内容曝光的诉求,那么服务内容如何匹配“专属”会场的用户心智,则是这个会场可以重点解决的问题。

undefined

如何判断真正有效的解决方案

在定义清楚核心要解决的问题后,就可以按照常用的设计方法进行方案的推导,在发散解决方案的过程中,如何判断方案的合理有效,确保最后的可落地性,是让我们设计分析有价值的关键,因此总结了两个常用的技巧。

首先要理解业务逻辑,减少无用的策略发散,很多时候我们的方案很难推动落地的原因,是没有考虑到业务的诉求,越能够深入的了解业务,才能更好的解决业务侧的顾虑,保证方案的可落地性。

其次是要跳出来从整体来看优先级,我们在进入自己的思维逻辑中时,会比较容易陷入细节,有时候自己觉得很棒的想法花很大力气去推却很难获得其他人的重视,并不是因为我们的方案不够好,而是没有关注到整体优先级,因此要学会看全局,通过多沟通多评估的方式来让自己的判断更加准确。

2. 探索型项目

探索型的项目没有过往的参考依据,相当于需要从零开始去探索如何做,对于设计分析的能力要求会更高,那么常常容易陷入两种极端相反的误区,要不就是容易被方法论套路,设计分析过泛但得不出实际有价值的结论,要不就是完全没有头绪,属于想一步做一步的类型,分析的内容之间缺乏逻辑。

undefined

因此,探索型项目的核心思路是要先有分析框架、再做纵向深挖,就像画交互稿的过程一样,需要先定义交互框架,纵再进行交互细节的打磨,才能够保证设计效率及效果。

确定分析框架

确定分析框架的过程主要分为两步,一是先想清楚要分析哪些内容,包括哪些环节是必要的,哪些是重点的,时间要怎么分配。例如当我们第一次做宠物品类活动时,需要对这个品类有深入的理解,因此我们在前期需要去分析养宠人群的特征、宠物行业的发展现状、京东宠物货品的优势等内容,而如果我们做的是一次大促的综合会场,其主要用户群体如果跟常规站内主流群体并无差异时,则不需要再花费大量的时间单独去分析用户画像,因此,需要结合项目情况先想清楚需要分析的内容、以及这些内容的必要性和优先级。

undefined

第二步是梳理清楚内容之间的逻辑关系,常见的逻辑结构有两种,一是递进式的推导(A→B→C),分析维度之间是先后关联的,通过严谨的逻辑步步推导而来,例如先梳理用户画像、才能进行用户行为痛点的分析、进而推导解决方案;另一种逻辑结构是进行综合归纳(A+B→C),即通过几个不同的维度综合推导,例如经典的五导家分析方法,结合用户目标以及业务目标综合推导出设计目标。

undefined

在很多设计分析中,我们也会参考一些方法论,其实方法论提供的就是分析框架,在理解了这一步之后,相信也能更灵活的应用。以下是根据我们日常项目梳理的一些常用分析框架。

undefined

纵向深挖如何得到有价值的策略

有了分析框架后,接下来就可以进入每个模块的具体分析了,如果要得到有价值的策略,同样有两个小技巧。

首先,策略要足够具体、有差异化,尽量避免提出过于笼统的结论。例如针对如何提升流量利用率比较泛的策略就是要进行流量精细化运营,这个大的方向没有错,但如果只到这一步是很难指导具体内容落地的,所以需要细化到流量的渠道有哪些、这些渠道有什么样的特征、针对不同的渠道用户可以用怎样的内容吸引他们,才能够更准确的判断是否会存什么问题。

其次,策略最好能够关联验证指标,可以参考UGD数据增长思路,在推导策略时要能预判它能带来哪些数据指标的提升,以保证设计分析的结论是有理有据的。


文章来源:站酷  作者:大葱设计

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

产品问答:产品同质化怎么破?

资深UI设计者

产品该如何避免同质化?本文作者依据工作中项目实践的所思所想,从产品同质化的产生原因出发,结合企业和用户的具体应用案例,就此话题分享了自己的想法,供大家一同参考学习。

这篇文章只是想从个人理解的角度回答下标题问题,如有不足,欢迎指正和讨论。

一、为什么会有产品同质化?

产品是需求实现的载体,是企业和用户实现价值交换的媒介。需求是有来源的并不是凭空可以创造的,这也就意味着可见的、可交换且可盈利的需求在一定程度上(没有新元素加入的情况下)是有限的(这和需求本身的无限性并不冲突)。再也不是移动互联网初期一片蓝海,站在风口就可以起飞的时代了。

除了这个外部因素外,新业务的试错成本往往比已经验证过可行性的产品来的高的多。因此,为求稳,也有不少本身有实力的公司会进入相同的赛道一争高下。

但是没有差异的产品对用户来说由于替代成本低,很难维持稳定的用户群体。本文分别从用户分析和企业核心竞争力两个角度分析,在同质化中寻找突破口。仅为作者本人经验和观点,如有不足和问题,欢迎沟通和指正。

二、从用户出发,精准把握产品定位

1. 飞猪 VS 携程

因为前段时间去成都需要订酒店,原本是想单纯的做下比价的。但是却意外的发现两个APP酒店的推荐逻辑差异甚大。

根据推荐结果不难发现,携程的关键词是商务型、中端酒店,而飞猪则更偏重于经济型、酒店公寓(民宿),且两者在整体均价上也是拉开了差距的。

携程作为出行行业的老大哥,在移动互联网还没有普及时,就已经占据旅游出行机酒业务的半壁江山了,特别是商务出行板块。而酒店线上预订业务本身就是偏重于供给型,没有资源就没有话语权。

而在这种情况下,飞猪通过抓住近年旅游行业爆发的契机以及大众对民宿接受度的提高,把握年轻群体对休闲游、穷游的诉求,加之其对小型公寓酒店、民宿的扶持和曝光(19年成立了菲住酒店联盟,实现联盟会员共享),实现了这部分用户和商家的在线交易。

虽然从表象上看产品的形式是相同的,都是酒店预订,但是产品本身的定位和底层逻辑的不同,各自圈定了不同的用户实现了差异化竞争。

2. 巧克力VS口红

上面携程和飞猪的例子是基于一个小的赛道在做细分,如果只将目光放在这个层面,那只是在“分饼”,但是这种情况下饼的大小总是有限的,如果不换个角度“把饼做大”,在竞争严峻的当下也很难长久的不被打倒。

之前在阿里妈妈的公开课中看到过这样一句话:今天巧克力最大的竞争对手是谁,不是糖果,不是坚果,而是口红。

这是基于当今消费并不只基于个人的需要,而是越来越多的扮演着情感表达、场景营造的角色(基于阿里妈妈2020消费观察数据),25岁男性对口红价格的接受度甚至是女性自用的三倍,口红逐渐蚕食了巧克力在男女恋爱市场中稳固的礼物宝座,想想在口红一哥李佳琪的一声声“OMG,买它”中,多少男性也同时乖乖的掏出了腰包。

因此,我们差异化的思考不应该只局限于品类下人群的思考,也应该基于不同的场景去挖掘场景下的用户群体。

三、从企业出发,发挥企业核心优势

1. 美团优选 VS 橙心优选 VS 多多拼团

今年年初的疫情,虽然对各大行业都造成了不同程度的损伤,但是却“社群团购”这个模式看到了曙光。

艾媒咨询数据显示,在疫情的刺激下,2020年社区团购市场发展迅猛,市场规模预计将达到720亿元,而未来随着市场的良好增长态势,2022年中国社区团购市场规模有望达到千亿级别。

各大平台也在下半年争相加入这个赛道:美团、滴滴、拼多多相继推出了美团友选、橙心优选和多多拼团,均将其作为下个阶段的业务重点。

本身社群团购这个模式本身是可以成立且存在用户体量庞大。但是,从松鼠拼拼到呆萝卜,都昭示着生鲜、社群并不是一个好啃的骨头。

从三个平台目前呈现出的产品来看,产品逻辑是一致的,依然是通过团长建立社群拉流量下单并获得提成的模式,前期抢地盘抢团长的价格战看来是在所难免了(某鹿已经为能够薅到羊毛平台羊毛开始暗自窃喜了),但是价格战始终是双刃剑,并不是长久之计。

这就需要深究,相同的模式,企业通过什么实现差异化竞争。这三家平台加入这场战役,凭的到底是什么核心竞争力,总不能真的是指望靠烧钱烧到行业第一吧。

回归社群团购这个模式本身面向的群体是偏价格敏感型,且因为社群本身快速传播的特质,对品质的要求更为严格了,真正是要求物美价廉。对供应链和履约的要求十分高,也难怪乎有人说“社群团购,始于团长,终于供应链”。

对于美团来说,O2O的基因是刻在骨子里的,本地现成的数以万计的线下商家都是潜在的团长,且这些团长是自带线下流量的;对于线下B端的管理和运营也是轻车熟路;此外线下商家支持以供应商模式入驻美团优选为平台供货,对于平台品类的丰富度提升有极大帮助;外卖配送的管理经验让他在物流上也占有相当优势。

滴滴原来的行业布局和社群团购看起来似乎是毫不相关的,但其对在线下司机的管理、运营上是有一定沉淀的,而对于团长的管理在这个点上是可以互通的,在团长履约上是具有一定保障的。而滴滴因为有货运的布局,其在物流上是具有一定优势的,社群团购虽然时效要求没有外卖高,但也都是要求次日达的。但在供给上的劣势也是十分明显的。

早期多多是从生鲜水果拼团开始做起,不排除他在这块供应链的运营和把控上是有积累的,且从早期的生鲜价格来看,其价格优势较为明显。同时因为拼多多原生用户群体中一大部分都是对“白牌”价低质优商品存在相当高接受度的用户,相信价格和品牌差异(限于标品,非生鲜果蔬类)依然会延续成为多多拼团的优势。

但拼多多目前一直只有线上电商业务,本次社群团购是其首次转战线下履约的尝试,其挑战难度也是不言而喻的。

所以基于以上的剖析,从我的角度来说,这三家中,我个人目前是更看好美团优选未来前景的,他底层在供应链上的优势差异是目前另外两家还无法达到的。不过这个领域盘子不小,各家发挥优势的话后续还真不好说。对于这场仗,我拭目以待。

总结

基于以上论述,即使是看似“同质”的产品和业务,但是通过对业务的理解,对用户的挖掘,对企业自身优势的把握而实现“不大相同”的逻辑,我认为这就是身为产品经理很重要的意义所在了。希望我们都可以做出各自领域与众不同的产品来。

文章来源:人人都是产品经理    作者:麋鹿产品   

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

日历

链接

个人资料

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

存档