网站设计文章及欣赏

界面如何搭配高质量图片

雪涛

使用图片作为背景

这里的图片选择要突出核心内容且一定要高质量,不要选择杂乱无章或与主题无关的低质量图片

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片于背景进行融合

结合页面表达需要,选择合适的配图并做融合或出界的设计,会让画面极具吸引力和强烈的设计感。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将高质量的图片紧密的放在一起,不留任何间距

当画面主要以高质量图片吸引用户注意时,尽可能的利用更大展示面积,这样会显得更加高级和有视觉冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方添加色块

这里的色块要注意跟图片的主色调保持相近,可以直接吸图片上的颜色然后找找邻近色就好了,色环上 30°区间内的颜色就比较和谐。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方/上方增加图案或形状

这里的形状建议不要太过于复杂,用一些基本图形就可以,比如圆点、方块矩形之类的,增强画面的形式感

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片下方或上方增加文字、图案或不规则形状

这里的文字、图案或不规则形状跟上面的技巧类似,都是起到装饰的作用,但文字的话有时候还要注意识别性,比如文字比较紧凑的时候。图案或形状更多的是起到视觉引导的作用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切到文字或形状中

这个很好理解,就是以文字或形状作为遮罩,增加画面的设计感,文字尽量选择粗体

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片周围增加一个非常窄的边距

这个技巧可能跟第 3 条有些冲突,其实这 2 个方法都是可以的,要根据页面具体的排版情况灵活使用。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在图片上增加颜色层

这个技巧也比较容易理解,一般会选择饱和度较高的颜色应用在充满活力的页面上,增加画面的冲击力。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

在彩色叠加到图片中的一部分上

这个技巧跟上面的有些类似,只不过是以小面积叠加的形式,颜色一般选择品牌色或主题色,与背景尽量有较大反差会更加容易出彩。

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

将图片剪切成其他形状

这个方法有一点需要注意的就是剪切的形状不要过于复杂,一般用基础图形就好

配图不够有设计感?这10个优化办法快收好!

配图不够有设计感?这10个优化办法快收好!

以上,就是我总结的一些可以用来操作 UI 图片的实用方法,这些方法可以使得作品变得更加有视觉感也更加专业。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设  作者:彩云Sky

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



B端产品之权限设计(RBAC权限模型)

雪涛


一、前言


随着互联网的快速发展,B端行业也逐渐崛起,很多企业管理中使用的软件我们通常称其为B端管理系统,而在B端系统中“权限管理”是必不可少的功能,不同的系统中权限的应用复杂程度不一样,都是根据实际产品以及需求情况而设置合理的权限。而我们现在对于权限的设置基本上都是建立在RBAC权限模型上的、扩展的,下面我会通过介绍RBAC权限模型的概念以及结合实际业务情况列举权限设置的应用。






二、什么是RBAC权限模型?


RBAC是Role-BasedAccess Control的英文缩写,意思是基于角色的访问控制。RBAC认为权限授权实际上是Who、What、How的问题。在RBAC模型中,who、what、how构成了访问权限三元组,也就是“Who对What进行How的操作,也就是“主体”对“客体”的操作。其中who是权限的拥有者或主体(例如:User、Role),what是资源或对象(Resource、Class)。


简单的理解其理念就是将“角色”这个概念赋予用户,在系统中用户与权限之间通过角色进行关联,以这样的方法来实现灵活配置。


RBAC其实是一种分析模型,主要分为:基本模型RBAC0、角色分层模型RBAC1、角色限制模型RBAC2和统一模型RBAC3。


RBAC权限模型是基于角色的权限控制。模型中有几个关键的术语:

  • 用户:系统接口及访问的操作者

  • 权限:能够访问某接口或者做某操作的授权资格

  • 角色:具有一类相同操作权限的用户的总称





1)RBAC0

RBAC0是RBAC权限模型的核心思想,RBAC1、RBAC2、RBAC3都是在RBAC0上进行扩展的。RBAC0是由四部分构成:用户、角色、会话、许可。用户和角色的含义很简单,通过字面意思即可明白,会话:指用户被赋予角色的过程,称之为会话或者是说激活角色;许可: 就是角色拥有的权限(操作和和被控制的对象),简单的说就是用户可使用的功能或者可查看的数据。


用户与角色是多对多的关系,用户与会话是一对一的关系,会话与角色是一对多的关系,角色与许可是多对多的关系。






   

2)RBAC1

RBAC1是在RBAC0权限模型的基础上,在角色中加入了继承的概念,添加了继承发的概念后,角色就有了上下级或者等级关系。



举例:集团权责清单下包含的角色有:系统管理员、总部权责管理员、区域权责管理员、普通用户,当管理方式向下兼容时,就可以采用RBAC1的继承关系来实现权限的设置。上层角色拥有下层的所有角色的权限,且上层角色可拥有额外的权限






3)RBAC2

RBAC2是在RBAC0权限模型的基础上,在用户和角色以及会话和角色之间分别加入了约束的概念(职责分离),职责分离指的是同一个人不能拥有两种特定的权限(例如财务部的纳入和支出,或者运动员和裁判员等等)。

用户和角色的约束有以下几种形式:

  • 互斥角色:同一个用户在两个互斥角色中只能选择一个(也会存在一个用户拥有多个角色情况,但是需要通过切换用户角色来实现对不同业务操作)

  • 基数约束:一个用户拥有的角色是有限的,一个角色拥有的许可也是有限的

  • 先决条件约束:用户想要获得高级角色,首先必须拥有低级角色


会话和角色之间的约束,可以动态的约束用户拥有的角色,例如一个用户可以拥有两个角色,但是运行时只能激活一个角色。




例如:iconfont和蓝湖的用户与角色就采用了约束的概念,超级管理员只允许只有一个







4)RBAC3

RBAC3是RBAC1与RBAC2的合集,所以RBAC3包含继承和约束。








二、为什么要引用RBAC权限模型?


RBAC中具有角色的概念,如果没有角色这个概念,那么在系统中,每个用户都需要单独设置权限,而系统中所涉及到的功能权限和数据权限都非常多,每个用户都单独设置权限对于维护权限的管理员来说无疑是一件繁琐且工作量巨大的任务。


而引入角色这个概念后,我们只需要给系统设置不同的角色,给角色赋予权限,再将用户与角色关联,这样用户所关联的角色就直接拥有了该角色下的所有权限。



例如:用户1~用户8分别拥有以下权限,,不同用户具有相同权限的我用不同的颜色做了区分,如下图:




在没有引入RBAC权限模型的情况下,用户与权限的关系图可采用下图的杨叔叔展示,每个用户分别设置对应的权限,即便是具有相同权限的用户也需要多次设置权限。





引入RBAC权限模型及引入了角色的概念,根据上面表格的统计,用户1、用户3、用户5、用户8拥有的权限相同,用户2、用户6、用户7拥有相同的权限,用户4是独立的权限,所以我们这里可以根据数据统计,以及实际的需求情况,可以建立三个不同的角色,角色A、角色B、角色C,三个角色分别对应三组用户不同的权限,如下图所示:




对应的上面的案例表格我们就可以调整为含有角色列的数据表,这样便可以清楚的知道每个用户所对应的角色及权限。




通过引用RBAC权限模型后,对于系统中大量的用户的权限设置可以更好的建立管理,角色的引入让具有相同权限的用户可以统一关联到相同的的角色中,这样只需要在系统中设置一次角色的权限,后续的用户便可以直接关联这些角色,这样就省去了重复设置权限的过程,对于大型平台的应用上,用户的数量成千上万,这样就可避免在设置权限这项工作上浪费大量的时间。







三、引入用户组的概念


我们依旧拿上面表格案例举例,虽然前面我们应用的RBAC权限模型的概念,但是对于大量用户拥有相同权限的用户,我们同样的也需要对每个用户设置对应的角色,如果一个部门上万人,那么我们就需要给这个部门上万人分别设置角色,而这上万其实是具有相同的权限的,如果直接采用基础的RBAC权限模型的话,那么面对这样的情况,无疑也是具有一个庞大的重复的工作量,并且也不利于后期用户变更的维护管理,那么针对相同用户具有相同的权限的情况,我们便可以引入用户组的概念。


什么是用户组呢?用户组:把具有相同角色的用户进行分类。


上面我们的数据表格案例中的用户1、用户3、用户5、用户8具有相同的角色A,用户2、用户6、用户7也拥有相同的角色B,那么我们就可以将这些具有相同角色的用户建立用户组的关系,拿上面的案例,我们分别对相同角色的用户建立组关系,如下:

用户1、用户3、用户5、用户8→建立用户组1

用户2、用户6、用户7→建立用户组2


因为用户4只有一个用户,所以直接还是单独建立用户与角色的关系,不需要建立用户组,当然尽管只有一个用户也是可以建立用户组的关系,这样有利于后期其他用户与用于4具有相同的角色时,就可以直接将其他用户添加到这个用户组下即可,根据业务的实际情况而选择适合的方案即可。




通过案例表格的变化我们就可以直观的看出权限设置变得清晰简洁了,通过第用户组赋予角色,可以减少大量的重复的工作,我们常见的企业组织、部门下经常会出现不同用户具有相同角色的情况,所以采用用户组的方式,便可以很好的解决这个问题,给具有相同权限的用户建立用户组,将用户组关联到对应的角色下,此用户组就拥有了此角色下的所有权限,而用户是属于用户组的,所以用户组下的所有用户也就同样的拥有了此角色下的所有权限。一个用户可以属于多个用户组,一个用户组也可以包括多个用户,所以用户与用户组是多对多的关系。






四、引入权限组的概念


权限组与用户组的原理差不多,是将一些相对固定的功能或者权限建立组的关系,然后再给此权限组赋予角色,目前我所接触的B端项目中使用权限组的概念的比较少,可简单的看一下关系图










四、功能权限和数据权限


B端系统中一般产品的权限由页面、操作和数据构成。页面与操作相互关联,必须拥有页面权限,才能分配该页面下对应的操作权限,数据可被增删改查。所以将权限管理分为功能权限管理和数据权限管理。


功能权限管理:指的是用户可看到那些模块,能操作那些按钮,因为企业中的用户拥有不同的角色,拥有的职责也是不同的。

数据权限管理:指的是用户可看到哪些模块的哪些数据。


例如:一个系统中包含多个权责清单(清单1、清单2、清单3),系统管理员能对整个系统操作维护,也就可以对系统中的所有清单都能操作(增、删、改、查);假如分配给总部权责管理员的是清单1,那么他将只能对清单1进行操作(增、改、查);普通用户也许只有查看数据的权限,没有数据维操作的权限(查),这里的操作是系统中所有可点击的按钮权限操作,列举的增删改查只是最常见的几种操作而已。









五、实战案例总结


我目前所做的项目是一个关于权责管理平台的B端系统,关于系统中的权限需求我这里简单的介绍一下,并采用上面所总结的RBAC权限模型对实际业务需求进行设计分析:

01:不同的区域管理员的权限各不相同(说明会存在不同的用户具有不同的权限,那么我们就可以采用角色对其进行规范)

02:有大量的用户具有相同的权限(例如组织、部门等)(说明存在相同权限的用户,那么我们就可以采用用户组的概念)

03:上级管理员拥有下级人员的所有权限(说明存在继承关系)

04:不同用户所看到的数据和能编辑的数据不同,一些机密性的数据只允许部分人员看或者编辑(说明存在约束)


05:会存在临时性的用户(说明需要支持新建新角色)

06:同一用户会存在多个角色(多角色求合集或者切换用户角色)



简单说明一下,我所做这个项目的人员管理是在另外一个系统中管理的,权责平台只是调用另外一个平台的组织结构树即可,所以权限设置模块没有做人员管理的模块


根据上面对需求的分析,整个权限管理模块中我们需要建立用户组管理模块、功能角色管理模块、业务(数据)管理模块、权限设置模块,下面就对每个模块做更细致的页面展示设计分析



1)用户组管理模块

用户组管理主要是对具有相同权限的用户分类建组,所以页面中我们需要有新建用户组的功能,每个用户组下我们需要关联对应的组织、部门、岗位、人员,让这些具有相同权限的用户在同一个用户组下,如下图:





2)功能角色管理模块

B端项目中一般会建立几个默认的角色是不支持用户修改、删除的,例如最常见的系统管理员,而也会需要有其它角色的需求,所以此模块需要支持用户新建角色,功能角色是对大模块的页面和操作的权限设置,操作权限的颗粒度可以细分到每个页面的每一个按钮的操作,如下图:






3)业务(数据)角色管理模块

业务角色是对页面中的数据饿查看的权限设置,而对于系统中的普通用户查看系统的权限是常用不变的,所以我们考虑默认有一个普通用户的角色,其它业务角色用户根据实际需求情况自行建立即可,由于我们权责系统的特殊性,我们需要满足用户对部分数据可编辑且对部分数据的字段可编辑,按照常理来说,编辑的操作行为是属于功能权限的设置,但是这里的操作行为是建立在数据的基础之上的,所以如果把这里对数据的操作权限在功能角色模块中设置,就会显得混乱,所以我们直接在业务角色模块中加入对数据的可编辑权限,这里在设置的时候更方便灵活





4)权限设置模块

权限设置模块只需要设置权限分配的对象,选择对应的用户或者用户组,关联对应的功能角色和业务(数据)角色即可,这样就形成了一条完整的闭环的权限设置






对于06同一用户会存在多个角色,我们系统是采用切换角色的模式来实现的,因为不同角色中存在互斥的情况,以及所涉及的领域不同,操作权限差距较大,求合集不利于控制权限,所以只能采用切换的模式实现

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:设计小余
分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


B端产品设计规范之数据展示

雪涛


数据展示有哪些?



01.徽标

是收纳消息数量的样式,一般出现在图标或者头像右上角。



02.标签

数据展示里面抽取出来的共性特征,将它们转化为标签。标签样式有线框、带不透明底或者面性。



03.走马灯

相当于c端的轮播图




04.文字提示

可以出现在鼠标悬浮按钮时候的行为解释说明,也可以是文案或者导航图标的解释说明。鼠标移入时候出现移出时候消失。



05.气泡卡片

比起文字提示可以承载更多内容,相对弹窗,气泡卡片操作更轻盈。




06.标签页/选项卡

标签页可以帮助用户在一个页面内快速切换不同类型内容,提升单个页面整体的扩展性。标签本质上就是内容区的导航。



07.折叠面板

折叠面板可以更好的收纳内容区域,提高页面利用率。可以和表格结合使用,折叠表格部分详情内容,使得纵向空间更节约。




08.表格

表格是数据展示的重要内容。当有大量结构化数据需要展示时或者需要对数据进行排序、搜索分页时可以用表格进行展现。


当笔记本过小,表格展示不全时候,可以固定首尾重要信息进行滚动。


带排序的表头,可对数量或者金额进行排序。


带分组的表格,建议带边框并且用色块区分表头和内容。


单元格可编辑


批量选中时只会选中当前页,因为分页还没加载出来,为了给用户正确的引导,可以给上提示性文案,例如“已选中XX项内容”。


如果当前页批量选中的数据量不满足要求,可以改变分页器,增加当前页数据量,从而增加选项。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:最多三分糖

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



2021 出镜率最高的 7 种网页 UI 风格

雪涛

虽然说 2021 已经快到 10 月份,但我最近我还是花了点时间,搜罗全网设计,总结出了这 7 种出镜率最高的版式风格,也是今年最流行的设计表现形式之一。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

看完这一波网页 UI 类设计,再也不愁接下来该如何做设计创新了。

图与线叠加

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

这是今年出镜率比较多的一种设计风格,不管你是在 Dribbble 还是 Behance 上都能见到它的影子。这种风格设计最大特点:形式感、聚焦、简约而不简单。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

当然还可以是将线圈与文字叠加图片,有一种层叠纵深布局感受。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

又或者说图形只是作为装饰作用。

纯文字版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

纯文字版式在今年版式中出镜率也是相当之高,包括深圳设计周官网也几乎都是几个大字排版。其实我们仔细思考,将文字放大处理,有点图形化的意思。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

上图是典型的文字图形化,将文字转化成线性设计。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计风格大胆、新颖,让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些,追求形式感与观赏性。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

图文混合设计,不光只是图片与文字混合排版,还可以是图标与文字、粗字体与细字体之间的混合穿插。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形版式

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

圆形设计趋势一直都存在,在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式,让画面瞬间活了起来。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

还可以将文字处理成圆形,与圆形图相呼应。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化版式今年出镜率尤其之高,将文字轮廓化设计处理,减轻了文字的视觉重量感,更像是将文字线条化设计处理。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

文字轮廓化设计还可以用在背景,作为设计装饰效果。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

玻璃质感设计趋势,也是今年最火的设计风格之一。那么它在网页出镜率也是在下半年开始逐渐多了起来,也许是设计师发现这种质感细腻与折射光透露出的细节之美。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

使用线条

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线无疑是图形里面运用较多的,今年发现很多网页中都加了线条作为版式装饰,或者就是纯线条版式设计,让人眼前一亮,原来还可以这样玩。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

线条在这里作用明显,除了美学设计装饰之外,它还用作信息层级区分。

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

灵感不愁了!2021 出镜率最高的 7 种网页 UI 风格

好了,差不多到这里就结束了。7 种风格,希望能给大家带来一些新鲜的设计想法,在工作中将其运用进去。

当然,在做设计提案版式、作品集包装都是可以参考,希望大家不要被局限。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设  作者:功夫UX

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



顶部导航 vs 侧边导航,到底哪种更好用?

雪涛

桌面和大屏幕上导航栏要怎么设计其实是一个经常被拿来探讨的问题,如今这也是 B 端设计中绕不开的一个设计问题。Jennifer Rose Kingsburg 曾经有针对网页的三级菜单导航进行过一份研究,结论是在左侧设置导航好处多多。此外还有很多类似的研究,你可以在这里看到很多相关研究的摘要。值得注意的是,这些研究大都是 2017年之前的研究成果,而如今很多设计范式发生了变化。

顶部导航 vs 侧边导航,到底哪种更好用?

1、左侧导航更容易浏览

Eyetracķ荷兰国际集团的研究表明,用户习惯于使用 F 式的浏览路径,这使得左侧导航在一般情况下有着相对更强的可用性,它不需要用户视线上的查找,因为用户会下意识注意到它们的存在。

顶部导航 vs 侧边导航,到底哪种更好用?

2、顶部导航更加节省空间

如果我们经常使用笔记本电脑来浏览页面,会很容易注意到不同的导航模块对于页面空间的占用比例,左侧导航所占用的页面控件通常是同样内容量的顶部导航的占用空间的3倍,因为纵向的侧边栏导航需要考虑到横向的标题占用空间,再加上搜索等功能模块的加入,这种空间占用就成了不可避免的结果。即使左侧的菜单栏可以折叠,这种处理方法也不总是有效的,因为这可能会隐藏相关条目的标签信息,降低了导航的可用性。

顶部导航 vs 侧边导航,到底哪种更好用?

3、侧边导航更容易缩放和收纳

也正是左侧导航本身的排版逻辑,它通常可以显示比顶部导航多一倍的条目内容,如果你的信息架构本身涉及到的一级菜单条目较多的时候,采用左侧边栏导航是明显更合理的选择,而且这种导航非常适合随着时间推移逐渐增加条目的需求。

顶部导航 vs 侧边导航,到底哪种更好用?

4、侧边导航支持定制化导航结构

侧边导航本身虽然占用的空间更大,但是它也有着更多的空间根据需求来定制各种不同的需求,相比于顶部导航,侧边导航甚至可以直接将分层的二级菜单直接展现出来,就像 Outlook 的侧边栏和 Slack 的侧边栏导航。

顶部导航 vs 侧边导航,到底哪种更好用?

5、侧边栏更和桌面端系统更一致

你会注意到 macOS 和 Windows 操作系统当中,系统默认的用户界面大都采用了灵活的侧边栏导航设计,很多 web 应用也是如此,它们会将顶部空间留给系统默认的菜单模块。采用侧边栏导航的 UI 界面可以和操作系统的逻辑保持一致。

顶部导航 vs 侧边导航,到底哪种更好用?

6、悬停激活下级菜单在顶部导航中更好用

悬停激活抽屉式下拉菜单的设计在顶部导航当中是非常自然的,但是在侧边栏导航当中,这种设计可能会在一定程度上遮挡住下级菜单,如果使用在旁边展开的方式,可能会占用大量的空间,总而言之,它更贴合顶部导航的交互模式。

顶部导航 vs 侧边导航,到底哪种更好用?

7、顶部导航栏适合做超级菜单

顶部导航正是因为和悬停出发下级菜单的功能很搭,所以很多电商和大型网站上会使用它来呈现条目众多的超级菜单。它是用来一次容纳超多条目的下级菜单的有效方式,这种布局也为产品展示和广告留出了足够多的空间。

顶部导航 vs 侧边导航,到底哪种更好用?

8、尽量避免重设计时改变导航模式

如果一种导航模式看起来不够好用,那么是否要借助重设计的机会,切换到另外一种模式呢?根据 Jira 的用户测试,95% 的早期用户对于这种情况会感到非常迷惑,即使是再小的导航功能修改都可能直接影响到大量用户的日常使用,因此不管哪种导航模式,一旦选定,尽量不要改变。

顶部导航 vs 侧边导航,到底哪种更好用?

9、不论哪种导航栏都面临响应式设计的挑战

对于没有太多条目的顶部导航,在移动端上依然可以直接在顶部呈现,不过如果太多了就需要使用汉堡菜单来承载,或者切换为垂直的侧边栏导航。而侧边栏导航在移动端上相对好一点,因为导航模式本身是一致的,但是有限的空间内如何呈现大量的导航条目同样存在挑战。

顶部导航 vs 侧边导航,到底哪种更好用?

结论:用哪种导航栏取决于需求

顶部导航:占用空间小,在页面的位置最为显著,涉及条目不多的时候效果非常好。对于层次结构简单的中小型网站,顶部导航还是很好用的,对于层级较少但是二级条目特别多的超级导航,顶部导航也是不二选择。

侧边导航:侧边导航支持一级条目较多且层级较多的导航需求,扩展性良好,对于复杂的产品和自定义需求较多的产品、涉及到管理功能、 桌面级产品、 都适合使用侧边导航。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:优设  作者:Taras Bakusevych

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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



搜索框的学问

雪涛

关键词:搜索框,UI,UX交互,用户体验,响应式设计,网页

 

题外话Tips: 在写Amazon案例时,看到了歪果仁对国货马应龙的评论,简直太欢乐(以前看过人家翻译的帖子,但自己看一遍还是太搞笑了)。于是就写跑偏了,翻译了下贴了上来。随便乐乐~ (CTRL+F页内搜索可直达)



目录:(CTRL+F页内搜索可直达)

第一章 搜索框-默认状态

一、 位置

二、 宽度(包含响应式设计)

三、 按钮样式

四、 展开 or 隐藏?

五、 默认要有提示文字啊!

六、 推荐词

七、 有很多分类怎么办?

八、 一个页面里有2个搜索框怎么处理?

 

第二章 搜索框-光标触发的状态

一、下拉框中,历史记录+热搜词是标配

二、下拉框中,标配+额外内容

三、下拉框中,纯个性化内容

 

第三章 搜索框-搜索中的状态

一、 默认交互

二、 个性化交互

三、 搜索下拉框中的多选功能

四、 回车 or 不回车?



正文:

以下都是从Web端角度写的总结,Web的空间比APP大,相对来说,交互可发挥的余地更大。APP端如果有时间,就另外再写吧。



搜索框简单吧,也就输入框+按钮。但是就那么点小元素,里面也是注满了无数的小心思,死光了无数产品经理/交互设计师的脑细胞,只是为了让交互更流畅,产品体验更好。


第一章 搜索框-默认状态


搜索框的默认UI/UX样式,取决于网站的业务性质,取决于搜索功能的重要性,取决于页面布局。

 

一、位置


搜索框的位置放在哪里,取决于搜索功能对于网站的重要性。

 

N年前,就有很多小伙伴引用过如下研究报告了,我重复下吧。

Dawn Shikh 与 Keisi Lenz 的研究:展示了在142个参与者的调查中,网站搜索框的期望位置。研究发现,对用户来说最方便使用的地方是网站的左上角与右上角位置。用户可以使用常见的F形扫描模式轻松找到它。



如图,搜索框要放置在网站的右上角或者中间位置,这是用户所期望的位置。


 

目前大部分网站在UI布局搜索框时,也是大致遵循这个规则的。但总体来说,搜索框的位置,还是可以分为如下几种:

1.  页面-居中

2.  页面-顶部居中

3.  页面-顶部右边

4.  其他

 

那么,分别讨论:


1.    页面-居中


为啥居中?当然因为对于网站,搜索是核心功能。如果没有搜索功能的话,业务几乎无法开展。它最最最重要啦!

 


1)绝对居中


这种一般适用于搜索引擎的首页。页面基本就是一屏,搜索是最主要功能,其他内容不重要。

比如Google, 百度。

Google的界面就相当干净清爽。嘿,我就是纯搜索的,赶紧搜呗!



百度,可以只显示一个搜索框。

如图所示的搜索框下的大块资讯,是可以在设置中隐藏的,不想看,关掉就好。



2)相对居中,垂直略靠上部。


适用于数据库网站的首页。


因为数据库的数据量动不动就是千万、上亿的,搜索是极其重要的功能,99%的用户都是带着目的来的,直接通过搜索找数据的。搜索框需要极其醒目,需要占据首屏大部分的位置。


但考虑到数据库网站的首页也需要展示其他信息,来增加用户粘性,一般会有好几屏,比如最新信息,热点信息之类的。这些就放在搜索框大区块的下方了。

 

比如 官方司法权威网站-中国裁判文书网,全国的1亿多个案件都在这个数据库里,供免费查阅。搜索数据是核心功能,因此搜索框最醒目,占首屏大部分位置。其他信息依次往下布局展示。




2.   页面-顶部居中


为啥顶部居中?因为网站业务中,搜索是重要功能,但不是全部。不用夸大显示,但顶部的居中好位置要留给它。

一般适用于电商平台,资讯平台。


这些网站中,展示商品、广告、信息才是重点,是为了促成交易,增加流量的。搜索是工具,比较重要,但不是重点,只是为了达成目的的一个手段。因此可以放在页面顶部且居中的显眼好位置,重要,但是不过分夸张。

 

用户场景:

如果用户是漫无目的的瞎逛,可以随便浏览页面中提供的大量信息。

如果用户是有目的的找某个商品或信息,也能很容易的在页面顶部找到搜索框,定位目标。

 

比如,电商平台-京东




比如,视频平台-Youtube

看到了吗?顶部中间,不太显眼的那个灰色搜索框。




3.  页面-顶部右边


为啥顶部右边?因为网站业务中,搜索只是辅助功能,居中这么好个位置没必要,放右边看得见就行了。

 

比如, Dribbble

Dribbble,设计师都知道。一般大家都是去随便看看找灵感的,浏览信息是重点,搜索功能不太重要,放边上就行了。



比如,小米

提问:有同学会问,嗯哼,这是电商网站呀,要卖产品呀。为什么不像淘宝京东一样放顶部居中呀?

 

回答:因为,这是品牌自己的平台呀,就那么几个品类,在顶部导航条内,侧边导航条内都已经展示得清清楚楚了,鼠标点点就行了。搜索是次要的功能。

 

根据设计原则——奥卡姆剃刀原理(简单有效原理)

*  只放置必要的东西

*  给予更少的选项


顶部的品类导航条本身就能帮用户找到产品了,可以直达分类页面,是非常重要的入口,也是重要的产品宣传,需要放在顶部首行的位置。

搜索是辅助功能(此处相信小米的PM是分析过search usage的),放在次要位置就可以了。

不需要同时突出搜索框+品类导航条,来增加用户的选择成本。

 

另外,要是搜索框居中了,那展示品类的重要导航条就得布局在第二行。Web/APP的第一屏都是黄金位置,能省一行是一行。



4.    其他


1)可以放logo的右边。


比如google的搜索结果页

从设计理念上说,google的搜索框和logo放在一起,也能组成品牌和搜索引擎之间的强关系。即google=search. 用户们不也早就说,“你google一下”,而不是“你搜索一下了”嘛!

从UI上说,搜索引擎的内页一般只有列表,这样搜索框也能和列表左对齐,布局清晰。



2)其他位置,根据情况判断。


比如Figma界面,文章最后有图。此处不赘述。



二、宽度


搜索框的宽度(包括input box + search button),同样取决于搜索功能的重要性。其中,大概率取决于上文所述的搜索框的位置。

其次,也需要考虑输入的关键字的字符数。

另外,根据整体布局决定。


一般情况下,220px<宽度<650px。 请注意, 这是建议的相对值,不是绝对值。只表示搜索框在大部分Web中的情况,具体需根据自己的页面情况调整。实际应用中,也有搜索框最长到1000px的情况。也有比220px更短的。

 

根据搜索框在页面中的不同位置,搜索框宽度分别如下:


1.    如果搜索框位置在页面居中,那搜索功能也极其重要,那当然宽一点。

比如上文提到的google,百度。搜索框宽度通常固定在650px以内,保证在所有分辨率中都能显示全。也保证了可显示的关键字字符数大于60个(即60个字母,30个中文字),大大的足够了。


2.    如果搜索框位置在顶部居右,那搜索就是辅助功能,那当然短一点。

具体宽度,需要考虑顶部UI布局情况。但一般不小于220px(大概数值,自己平衡). 不然就不太方便输入关键字了,或者关键字就显示不了几个了。


3.    那如果搜索框位置在在顶部居中呢?则可长可短,根据业务情况和页面布局判断。

如果为了用户体验好的话,搜索框宽度也需要考虑「响应式设计Responsive Design」

 


既然都说到 「响应式设计」了,那么就提一下吧。


概念:

响应式设计(Responsive Design)是页面布局可以「响应」不同尺寸屏幕的设计方法。通常我们说起响应式设计都是针对网页设计的。同一个页面,随着屏幕尺寸的改变,自适应地改变页面布局。

通俗来说,这个网页就可以自动适应手机,平板,和电脑的各个分辨率。用户在各个设备上浏览这个web页时,页面布局和交互都是自动调节的,相当舒适。

 

以页面中的单个功能区为例:

*  比如,内容区块的在一定程度上能够自动调整,以确保填满整个页面。

*  比如,网格排布,能够减少/增加排布的列数。如图片布局在“1行1列” 到“1行N列” 之间,自动调整列数。

*  比如,能够适应比例变化的图片。图片自动调整大小。

*  比如,筛选功能在网页里是在页面左侧一列,全部展开显示的,在手机里就可以隐藏显示,通过按钮点击,有滑出菜单之类的。

 

Tips: 做响应式设计,需要公司舍得投入资源,因为涉及到很多额外的工作量。最起码有以下:

*  Designer | 设计——做3套设计。

*  Frontend Engineer | 前端——写响应式设计的代码,可写1套,可写3套(方便维护)。

*  QA Engineer | 测试——测不同的分辨率,最起码测3套。这还没算fix bug后的retest.

 

为啥3套?因为针对分辨率需要做2个节点。我司一般是792px<X<1440px

 

好了,响应式设计就大概讲一下吧。不然又能写好几页。收~


 


以Youtube为例,大家可以感受下搜索框的响应式设计。


搜索框的宽度是会自动调节的。最小的时候就一个放大镜图标(此时为适应手机分辨率),但最宽也就是固定到640px,不然太宽了,输入关键词时,搜索按钮离得太远,点击也会很不方便。




三、 按钮样式


搜索框的按钮样式,同样取决于搜索功能的重要性。也需要平衡整体页面布局。


按钮样式大致情况,如下图所示:

*  色块带图标的

*  只有一个图标的

*  没有按钮的

*  色块带图标+文字的。

*  其他(比如就一个放大镜图标等。图片中没做展示)



具体怎么应用,详见后文:


四、 正常显示 or 简化显示?

九、 一个页面里有2个搜索框怎么处理?




四、正常显示 or 简化显示?


有些Web中的搜索框,因为各种原因,可能就会做简化。而不是整个显示,这个需要根据情况决定,就是——随机应变~


比如,Apple官网,只显示一个放大镜图标。

此处跟上文提到的小米官网的情况类似。商品品类就这些,导航条突出品类,搜索功能弱化。


但苹果在此处更弱化了搜索,只放一个放大镜图标。(从UI上看,目测是由于导航条中品类太多,放不下搜索框了。) 等用户点击了放大镜图标后,才使用CSS / JS特效,滑动显示完整的搜索框,且居中显示。



再比如,Airbnb 爱彼迎,全球民宿短租公寓预订平台。

网站中,搜索功能很重要,是用户预定,增加销售的入口。因此需要突出搜索框。


*  首页,默认显示完整的搜索框。


*  当页面滚动时,搜索框置顶显示,方便用户查询和预定,增加潜在销售可能。但是这个搜索框的内容太多,硬要在置顶层中全部显示的话,这个始终置顶的层的高度就会很高,会影响用户浏览页面内容。

那么就把搜索框略微简化,相应的高度也就小了。(不建议只放一个放大镜按钮,太弱化搜索功能了。会流失潜在客户,流失潜在销售可能)


*  搜索框在置顶层中居中显示,点击简化版搜索框后,才动效显示完整的搜索框。




五、默认要显示提示文字啊!


在输入框中可以提示搜索示例,告知网站支持哪些内容的搜索,以及如何使用功能。防止用户一脸懵,优化用户体验。


通常适用于数据库,资讯类这些内容类型较多的网站。


比如,天眼查。(垂直顶部居中的搜索框)



比如,网易云音乐。 (右上角搜索框)


六、推荐词


基于业务需要,搜索框内经常会有推荐词,方便用户不用输入关键词就可以直达结果。同时,也是一种对商品的促销,对资讯的推广。根据不同需要,可以有不同的显示方式。


Tips: 推荐词,热搜词,促销,广告都可以这么处理。

 

1. 框内


1)单个推荐词交替显示

 

比如,小米官网



截图为动态图哦,大概5秒换一个推荐词。个人觉得间隔时间有点长了。



2)多个推荐词同时显示


比如,LexisNexis 全球顶级法律数据库 中国站

没有和小米一样,做1个推荐词的动态交替显示,是因为用户场景不同。


考虑到LexisNexis的用户都是律师群体,工作中时间宝贵。使用网站不是闲逛,而是为了快速查询数据,没有时间等待。因此一次性显示2-3个推荐词,方便用户直接看到,直接点击。


提示:推荐词可能会大于3个的,比如有8个。那就在用户每次回到首页后,显示一批新的推荐词。


或者,直接显示在框外,如下文所述。


2. 框外


比如,淘宝



七、有很多分类怎么办?


如果要针对很多内容类型分别搜索怎么办呢?搜索框怎么处理呢?有很多方法。


按复杂程度,依次进阶如下:


1. 下拉框型

一般用下拉框了,那通常分类对于搜索不是太重要,不用突出显示。


2.Tab型


如果用tab来展示分类了,那目的通常是:


*  推广产品或内容

*  引导用户,优化用户体验

 

1)横版显示。比如 某房产网站



2)竖版显示。比如 知网

搜索框的左侧的3个Tab为内容类型分类。

搜索框中展开的下拉框中是字段,此处一并展示。



3)竖版+横板显示。比如 某房产网站

如上图,是竖版分类+横版的两个搜索按钮。



如上图,是竖版的分类+横版的分类。横版的分类还做了2级分类。分类太多,相信设计师们在处理时也挺头大。




八、 一个页面里有2个搜索框怎么处理?


回答:哪个重要,就突出显示哪个呗!

 

以Amazon为例,

该页为商品评论页面。


*  顶部搜索框为全站搜索,非常重要。因此宽度较长,按钮为亚马逊的主色调黄色,醒目。

*  页面内的搜索框,为针对评论内容的搜索,则相对弱化。





第二章 搜索框-光标触发的状态


搜索框的默认状态讲完了。那么当鼠标点击搜索框,此时还没有输入任何内容,那么光标触发的状态是怎样的呢?通常,根据业务情况,大多数搜索框都会自动弹出下拉框


我们此处只讨论下拉框中的显示情况。


一、下拉框中,历史记录+热搜词是大部分网站的标配。


比如,B站。



二、 下拉框中,在历史记录+热搜词的基础上,再添加些网站自己想推广的内容。


比如,Zcool本酷。



三、下拉框中,根据网站自身业务情况,显示个性化内容。


1. 比如 Zillow, 美国知名房产估价网

网站业务就是估房价。下拉框中,第一行就是“当前位置”,点击后跳转到结果页,显示定位地址的相关结果。优化用户体验。


2.    比如,携程。

携程的业务结构相对复杂,搜索也就相对复杂。搜索项同时也涉及到很多字段/参数,其实也类似表单了。后面有机会可以讲下表单的交互,此处不延伸讨论了。大家有兴趣可以去逛逛携程。




 

第三章 搜索框-搜索中的状态


在搜索框中,一旦开始输入字符,那新一轮的交互又开始了。


一、 默认交互


目前通用的规则——搜索联想功能,Google已经定义好了。我就不重复写了,如下摘自UXPlanet:


Google自2008年以来掌握并实施了“搜索联想”。


 “搜索联想”(自动建议)可以帮助用户通过已输入的文本来预测可以找到的查询结果,为用户节省了时间并创造了更加便捷的体验。

 

交互细节如下:


*  确保搜索联想是有效的,设计不完善的搜索联想会混淆和分散用户的注意力,所以使用拼写自动更正、词根识别、语义识别和预测,可以改进搜索体验。 

Lu倾倾 注:中文搜索还要识别拼音)


*  尽可能快速的提供搜索联想,例如输入到第三个字的时候,就给用户提供相匹配的联想词汇,以此减少用户数据录入的工作。

Lu倾倾 注:现在其实输入第1个字就可以提供联想了。)


*  只提供少于10个项目的联想词句(不建议使用滚动条),否则信息将会变得难以承受。


*  允许用户通过键盘的上下键控制选择列表。

Lu倾倾 注:

百度在使用“键盘”(鼠标不行)上下选择列表时,如果高亮在某个联想词上停顿2秒以上,则等同于“回车键”,整个页面的搜索结果刷新。 Google不支持此功能。

这是用户体验的差异)


*  UI上,已输入文本和建议文本视觉上保持差异(例如,通常情况下建议的词汇通过加粗表示)



二、 个性化交互


1. 比如,Google

(Google作为搜索引擎的灯塔,搜索交互亮点的地方太多太多了,这里只举个小例子。)

如上图,不只在下拉框中展示搜索联想的关键词。

还把关键词作为一个词条显示给客户,比如电影,比如品牌。还同时显示各自的参数,比如 图片,字段。

可以帮助用户了解信息,精准定位。



2. 比如,维基百科。

由于网站的定位不同。维基百科是一个百科全书,其中都是各类词条相关的知识/信息。因此下拉框中的联想,都是以词条形式显示的。包含了图片,词条名, 参数/字段。



3. Amazon 亚马逊


亚马逊的用户体验也是做到极致了。搜索下拉框除了提供搜索联想的关键词,还按照不同的特殊关键词,提供不同的参数选项,方便用户一步到位,不用再到搜索结果页里做一次筛选了。优化用户体验。

比如,想搜索“chair”, 输入了关键词“chai”(注意,还没打全 chair),下拉框中除了显示chair相关的商品。还直接把chair的价格区间显示出来,方便用户点击后,直接显示相关搜索结果。


相信此处亚马逊的PM们是做过usage分析的,chair列表页中,应该是 “价格”筛选的usage是最高的,并且极有可能用户进入chair列表页的第一个用户行为就是对价格做筛选。PM们就干脆把筛选项放到了搜索下拉框中了。



针对关键词”ipad”, 也是同样的交互处理方式,此处是显示“尺寸”区间。



针对关键词“alarm”,下拉框中按照闹钟的不同“功能”,显示“图片+分类“,方便用户直接点击。




【亚马逊篇 番外】


在收集亚马逊案例的时候,好玩就去搜了搜国货之光“马应龙“,歪果仁们的评论简直是太欢乐了,看着看着我都笑出了鹅叫声。


于是就跑偏了,翻译了2个评论,贴了上来。大家看文章看久了,休息下~






三、搜索下拉框中的多选功能

以上,讨论的都是输入单个关键词搜索的情况。


那么输入多个关键词的交互该怎么处理呢?

N年前,我在《交互设计稿-纯实例》之前我写过,此处不再赘述了。


如有兴趣,请戳,https://www.zcool.com.cn/work/ZMjY4Nzg3MDA=.html




四、回车 or 不回车?

大部分的网站的搜索功能,都是需要在输入关键词后,点击“搜索按钮“ or “回车”,才展示新的搜索结果页的。(此处不讨论百度中,键盘移动到联想上就刷新结果页等特殊情况)


即一定要有个确认的命令,才触发搜索。这里面有很多考虑。比如:


*  数据量大,如果是实时响应+即时加载搜索结果页,对服务器和代码质量的要求都太高。


*  用户体验不太好。因为用户还没输入完,或者还没确定。页面就在不停的刷新,会干扰用户。

 


但,也有个别工具软件中,不用按回车,就实时刷新搜索结果。比如,Figma.


在软件中,都是自己的存档文件,数据量本身就不大。此时边输入关键字,边实时响应,刷新搜索结果页,让用户随时看到自己的文档。这种情况下,不用按回车,用户体验还更好。

 

 

以上,终于写完了。

暂时写到这吧,总结太累,但是值得!

 



最后,附上Amazon贝索斯的原话:




翻译如下:(没有太直译,不然有点拗口)


“以用户为中心”有很多优点,但最大的一个就是:用户是美丽的、棒棒的、不会满意的,即使他们说我们的商业很赞,他们表示很开心很满意。但他们其实想要更好的东西,不过他们自己并不知道。那么你的让用户愉悦的渴望,会驱使你代替他们去发明创造。


——杰夫*贝索斯,2016年给股东的信




额,还是拗口。简单来说,就是:


筒子们,为了让用户高兴,发挥你们做产品/交互的主观能动性吧,自己研究创造去,做个好产品出来。不用指望用户告诉你做什么/怎么做,他们也不知道。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:LU倾倾

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

提高操作效率的B端设计

雪涛

我从自身实践的B端项目经验中总结了几个最典型实用的b端的交互设计,来提高用户的操作效率。

目录:

一、简约至上

二、提高用户的操作效率

三、智能化操作设计



       在设计领域已经有很多经过时间和实践检验的定律法则来作为设计的指导原理,它能够帮助设计师更快更有效的将需求转化成合理的界面,并且可以有预见性的去提高产品的用户体验。被推崇的有尼尔森十大原则、用户界面设计的八项黄金法则等。但是实践出真知,一切的方法论都是源自不断实践中提炼和优化的。从原则的输入理解,到实践内化,就是自身不断进步的过程。站在巨人的肩膀上,我们应该总结更多属于自己的设计方法去解决问题优化设计。我从自身实践的B端项目经验中总结了几个最典型实用的b端的交互设计,来提高用户的操作效率。


一、简约至上

      

       1951年威廉.埃德蒙.希克首先提出,认为人们从数组中选择目标的时间取决于可用选项数量。这表明提出的选项数量与随后的选择反应时间之间存在线性关系。从广义上说,界面越复杂,用户就越难找到自己的核心操作点,功能越多,就越难发现真正对用户有价值的东西。

        2011年Giles Colborne在《简约至上》,提出“交互设计四策略”,即:合理删除、分层组织、适时隐藏和巧妙转移这四个令交互设计最大程度简单易用的策略。其本质上就是消除多余的信息干扰,保留了用户主操作流程的心流。

       作为设计师我们利用“删除、组合、隐藏、转移”,不单单是为了简化而简化,我们首要明白的就是要在对用户真正重要的事情上节省他们的脑力。需要把组织成功的标准清晰地构建在产品的简单上。一次交互就是用户与设备之间的一次对话,提高效率就是要节约他们的认知成本,学习成本,操作成本,衡量的指标就是完成某个目标的时间。

      B端管理项目有大量的表格处理,一个表格对应的数据项有很多,遵循简约至上的原则我们不会把所有字段都展示给用户看,只会优选跟业务最核心、用户关心的数据来展示给用户,让他们看到的尽量简约的表格信息。即使是最常用的查询工具,我们也会根据优先级排序,把常用的展示出来,其他的折叠收纳,用户想用到的时候可以展开更多查询条件。我们无时无刻不遵循着这个设计原则。

 


二、提高用户的操作效率


1、快速定位目标信息


       在信息量大的B端系统里,快速找到目标信息是最常用的功能。除了导航上的搜索,我所负责的项目几乎在每个信息页面中都使用了查询,筛选、排序功能,这也是常规表格对信息处理的一种快捷方式。常规的信息定位有搜索、查询、筛选、排序,不同的方式数据的检索模式也不同。根据不同业务场景,合理的使用才能帮助用户缩小信息范围,找到目标信息,提高用户完成一个任务的效率。


搜索:是用户指定任意条件(文本、语音等),平台对此条件进行检索后,展示对应内容。搜索由用户自定义条件,主动表达意图 ,目的性明确。由于搜索行为是用户主动表达意图,往往一个简短的关键词并不能完整表述用户想法,因此,搜索结果的内容通常包含多种类型从精确到模糊的展现规则。


查询:是利用关键字、词组对系统内的相关信息进行多条件组合检索。同时用户也可以输入指定条件的信息作为搜索项,但由于查询功能无法对非结构化的文件内容进行查找,所以输入条件不够精准将无法查询到最终信息。


筛选:是平台为用户提供指定条件,用户可以选择查看符合一类或多类条件下的内容。投顾项目一般都是先大范围查询,再从查询结果列表中,进行表头(快捷、对应、条件更明确细化)的信息筛选。


排序:是根据已设定的内在逻辑,将一组“无序”的记录序列调整为“有序”的记录序列。




2、缩短操作路径


        缩短操作路径简单的说就是减少操作的步骤来提升操作效率,是基于对用户、任务及环境的清晰理解的前提条件下,对用户操作的路径进行优化。我们可以从以下两方面入手:


2.1、通过预测用户下一步的行为

        通过预测用户下一步的行为,对用户进行直接引导,缩短用户的行为路径,减少操作步骤。比如在一系列连贯的操作流中某个链路执行出现问题时,用户下一步的行为是需要及时查看错误内容并处理相关信息,在执行结果中增加一个快速查看的按钮,引导他去查看和处理问题。这比他去菜单中重新查找对账信息效率要高很多。



2.2、通过用户操作路径分析减少操作步骤

      涉及到大量的信息管理时,那对于信息的快速处理就涉及到批量操作。通过用户操作路径分析,用户勾选批量执行的操作频繁,单项处理在较少情况才会用到。针对此分析,我们找到了一些具有共同批量操作特点的管理页面,对其进行操作路径的优化。批量操作可完全合并成一个执行触发点。将这个执行点,单独成一个tab切换页,细化操作为另一个切换页。tab页面的设计,也为错误信息的显示腾出了空间,整个页面清晰可对比。经过操作路径的验证,这个按钮使用率极高,明细操作几乎没有使用到,也缩短了管理页面的操作时间。




3、减少记忆负担


       减少记忆负担,是减少用户在操作时,需要记忆的信息量。一方面我们需要,简化多余的信息,减少用户对页面的认知负荷,另一方面我们可以设计记忆性功能可以帮助用户记忆。


       为什么要去减少用户的记忆负担,一方面,缩短整个操作的时间快速达成操作目标,另一方面,降低记忆数据量,有助于提升用户使用的愉悦感。从心里学来讲, 人们往往更容易记住那些自己喜欢的事物,而对不喜欢的东西记起来比较吃力,在信息大爆炸时代,我们要记忆的很多信息如登录号、证件号、密码、账户号等,这些信息有的不但复杂,而且对用户来说枯燥无味不想记忆,有一种天然的排斥感。那我们通过帮助用户去记忆留存,再在合适的机会调用显示,会提高他们在使用过程中的轻松和愉快感。比如对历史登录账户号的保留,秘钥储存功能,再到短信验证的直接不用密码即可登录,验证码还可以直接复制到剪贴板,这都是为了降低他们的记忆成本。



      随着业务的发展,平台菜单数越来越多,对用户来说非目标菜单的数量增加,用户需要更长时间来记忆所选项目的位置,到最后完全只能选择上方的搜索框进行菜单搜索。Google对用户的测试表明,没有一个人始终会把搜索作为第一选择。相反,他发现只有在网站没有提供有效导航的情况下,用户才会使用搜索。搜索需要输入关键词,即使有模糊匹配,还要进行选择,而且这个过程不一定顺利,可能需要反复操作才能顺利找到才能找到自己心中的目标。我们小组设计师通过竞品分析和用户访谈得到的一个验证性的问题,就是平台存在菜单设计命名不合理的情况,急需优化。优化思路一个是合理菜单命名与菜单结构,但这个不是一蹴而就的事情,需要从产品整个角度去整理和长远排期,持续迭代。为此我们先选择了帮助用户记忆的思路,即做一个菜单收藏的功能。用户可以手动把常用菜单直接收藏在首页,如果在没有收藏或者收藏未满限制数量时,会根据记录的用户访问次数提供最常用的菜单(以用户为导向,自定义功能;以首页为核心提供业务线支持),无需去记忆菜单位置,不断寻找菜单。




4、信息可对照 


      在处理信息的时候,提供信息的对照,减少了跳转,增强关联信息的对比,可以很大程度提升用户处理信息的效率。从系统上讲就是分屏,处理多任务事件(苹果和Windows系统均很好的使用了分屏功能)。从页面角度来讲,其实就是合理化信息模块展示,一个页面不止展示一个信息层级的内容。信息内容有从属关系(避免跳转)、因果关系(显示结果)、并列关系(同级对比)。



      同样具有审批功能的B端项目可能审批流程的设计会完全不同。我负责的另一个项目主要任务是对重大任务的监控,保障日间重点工作按时完成,审批必然严格,且需要单条仔细处理。所以我们设计的是树菜单的形式,让用户可以将待处理信息的条目和内容可以直接对照来处理,提高效率。



三、智能化操作设计


      随着B端行业日益成熟,越来越多的C端设计师转型成B端设计师,B端行业的设计思维也不断的融合和革新,如今B端产品也越来越重视产品的情感化建设、整体的用户体验、简约高效的智能化提升。

      首先让大家了解一个概念,那就是泰斯勒定律,也就是我们常说的复杂性守恒定律。泰斯勒定律认为每一个过程都有其固有的复杂性,这个复杂性存在一个临界点,超过了这个点就不能再简化了,你只能将固有的复杂性从一个地方移动到另外一个地方。



      对于我所负责的项目来说,最能体现产品日趋智能化的交互设计就是清算流程的设计。以往的清算流程是分大流程,点击流程步骤跳转至相关操作页,再进行子模块的操作与检验。完成后,切换回住流程去执行下一个模块的操作。操作员的操作连续性差且操作步骤多,完全由操作员手动操作触发,体验繁琐及不流畅。为此我们重新梳理了所有清算流程步骤,精间可合并的操作步骤,然后将所有步骤按照时间节点顺序排列,完成先前步骤才能进行下一个步骤。流程下方就是对应的执行模块,只需一键执行便可完成当前清算步骤。极大的提高了用户清算的操作成本。



      后续我们UE小组也会针对平台进行用户调研,建立了用户画像。对于运维人员痛点分析后,提出清算流程自动化设计,用定时任务直接去执行相关的流程操作,用户不用进行操作,即可完成结算,只需要关注状态和处理错误信息。



       自动化智能设计的最大缺陷就是无法遇到极致的准确率。实际处理过程中,还是会有清算错误信息存在。为了解决这个问题,我们保留了执行按钮(不手动操作时,自动跑完),运维人员也可以手动执行,处理问题。除了将操作日志信息模块,作为组件,分屏来显示错误信息,我们还按照商户维度来计算状态,以便于运维人员发现具体的错误位置。帮助操作员去查看和解决错误信息。智能化的设计解放了很大一部分的重复劳动,让用户更聚焦有意义的工作。

        智能化已然成为了设计趋势,这将会对系统的性能提升和信息处理精准化提出更高的要求。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:上仙修行

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


关于后台系统设计规范总结

雪涛

一套完善的产品化设计系统,可以解决内部协作的一致性问题,解决设计系统更新的周期性问题,解决一群设计师与工程师如何规模化的生产各种业务、UI的问题,从而最终解决用户体验一致性的问题。说到自己,公司的产品从接手开始便是以antdesign作为前端框架,所以很多人会说后台用antdesign、Element或者Taro的框架就足够了呀,当然不~在已有的成熟框架下,也并不能完全满足产品日(sang)益(xin)旺(bing)盛(kuang)的需求,所以设设计规范还是很有必要的。

作为B端设计师,视觉表现层面权重逐渐减少,更多的是需要梳理逻辑流程,将线下业务更好的梳理到线上流程,所以熟知设计规范可以更效率的完成工作。



设计规范的目的:


1、解决内部协作的一致性问题

为设计师内部沟通协作起到决定作用,当同一个项目存在多个设计师横向设计的时候,设计规范会避免颜色错误、间距失调、控件混乱等问题。

2、解决设计系统更新的周期性问题

随着产品的不断推进和发展,为了新增的需求和不断优化的用户体验,这时候会需要对某些规范控件进行调整,在有设计规范的情况下,可以迅速对接开发快速全局调整控件,极大的提升了设计和开发的工作效率。


3、解决设计师与工程师如何规模化的生产各种业务

关于和开发对接,图标在如今有了iconfont的项目管理下,项目可以建立自己的图标库。再加上设计建立的可复用的公共控件库,开发可以更加快捷的复用控件,减少返工率,也为后期的修改降低开发成本。


关于建立后台设计规范:


首先要了解项目适用的主要场景,也就是用户爸爸一般是在什么情况下用什么样的设备来进行操作的,然鹅你永远不知道会有什么的场景和什么样奇葩的设备在等待你。在后台的设计群一直有一个经久不衰的话题,那就是后台设计的设计分辨率是向下适配还是向上适配更合适(是1980*1080 还是 1440*900 ),这两者都是可以的,本案由于用户使用笔记本的情况居多,且设备并不是很新所以采用1440*900的分辨率向上适配1980向下适配1200。
在清楚的了解到项目背景之后,开始着手于设计规范的建立,这里关于设计规范的建立是随着设计的不断深入从而不断完善的,不必刻意深入,但是要随时更新规范文档。



关于页面构成


开发与设计所理解的页面是不一样的,所以会造成开发出来的页面有时候会因为各种原因与高保真相差较大,在设计看来(比如sketch),一个页面是由多个组结合而来,每个组里包含一个或多个字段、图片和图标等,在调整大小、间距、颜色之后慢慢成为高保真。而在开发的角度来看,整个页面就是由多个box构成,盒子与盒子之间存在空白间隔,且盒子存在一定的属性,例如盒子默认对齐于左上,盒子之间相互嵌套或覆盖需要基于所属盒子来定位。


颜色

根据品牌背景和产品定位来确定你的品牌色,用于字体、icon、按钮、插画等业务流程。功能色则是为特殊场景,例如失败、成功、提醒等情况。


字体

通过购买商用字体或使用免费字体来使用,如果选用免费字体同时也要注意区分系统,通常情况下mac系统使用默认字体苹方字体,windows系统使用微软雅黑。如今免费等字库已经越来越多了,所以这对设计师来说是一个好消息,今年阿里也在UCAN上公布了普惠体,年尾oppo也推出了自己的免费字体,文章末尾附上群友整理的免费字体导图。


边角

倒角的使用可以起到样式的区分,从而让用户感知到功能区域的分别。


图标

快速帮助用户理解产品并顺利完成操作,好的图标具有高度浓缩并快捷传达、便于记忆的特性,能够更好的传达品牌特性。


阴影

阴影的添加可以更好的提高界面品质,让用户易于区分功能区域


按钮

按钮是传达它将要发起动作的载体。 用户可以点击一个按钮来开始一个过程或工作流程,或触发一个动作。

用法:

1、要传达重要的行动。如:提交表单;

2、要导航到另一个屏幕,触发一个模式或启动一个动作。如:在进程中指定新的动作或模式;

3、按钮上的文本应保持简洁,带着明确、可操作的动词,例如:注册、下一步、下载 ;

4、优先考虑最重要的行动。行动号召太多会引起混乱,并使用户不知道下一步该做什么。

选择输入框

如无特殊需求,则默认采用框架内输入框,特殊情况可同研发一起讨论修改。这边因为一些特殊原因,在修改了代码的情况下实现了标题、选择、输入同时在框架内,这样为寸土寸金的后台界面留出了更多的空间。


表格

表格在后台系统中无处不在,对数据管理和分析起到了重要的作用,方便用户阅读,分析和比较数据。表格一般由表头、表尾、数据单元格组成。


模态/非模态弹窗

用户交互的两种方式,模态弹窗强制交互完成当前操作流程,非模态则是弱提示。

缺省状态

缺省页是指操作异常状态下给予用户反馈的提示页面,它的作用不仅是提醒用户,安抚情绪;更重要的是用“空白”触发用户的操作行为,营造良好用户体验。


结语


以上是我对于设计规范的部分总结,还有很多没有涉及到,包括非常重要的可视化部分,可以多了解一下ECharts(https://www.echartsjs.com/zh/index.html),然后希望可以和大家互相学习。设计规范的建立是长征的第一步,贯彻执行才是根本,在B端庞大的设计系统中,我们需要维护好产品的组件库,不断的完善用户体验和清晰的梳理线上业务,保证产品的功能需求才是重中之重。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:请叫我红领今

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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


整理数据报表系统的7个步骤

雪涛

清晰且有效的数据报表可以反映出数据变化,进而帮助团队人员确定后续的产品优化迭代方向,找出可能存在的问题。那么,产品经理应当怎么整理出清晰且直观的数据报表?本篇文章里,作者总结了产品经理整理数据报表的可操作步骤,一起来看一下。

之前聊数据埋点的时候曾经提了一下,说是后面聊一下数据报表的事情,今儿个正好有空,捋一捋,跟大家做个分享。

上次分享的是《产品经理整理埋点需求的6个步骤》,有兴趣的朋友可以进去看看。

大家都很关心数据的事情,因为数据能比较直观地反应哪些地方发生了新的变化,能够提醒相关人员去关注和调整,同时一个新的优化上线之后也能够根据数据去判断优化方向是不是正确的问题。数据是最便捷的方式。

但是你想看数据就需要先把数据报表理出来,一个业务或者一个APP会产生大量的数据,你需要根据关联性和重要性去整理出具体的数据表,然后再去观察,直接看明细或者日志那你得疯。

怎么整理数据报表呢?

它需要根据核心业务流程和业务指标来梳理,然后兼顾到职级分层、部门分类、重要程度、使用频次来分别处理。

我们以电商业务为例来简单说说,选电商是因为大家对电商业务更熟悉。

我整理了一下,大致上可以按照以下步骤去整理数据报表系统。

第一步,确认要做哪些表。

你先确定有哪些部门需要看报表,常规来说包含市场、商务、运营、产品、客服、售后等部门。

然后你去看这些部门都会需要哪些报表,譬如市场部门需要渠道流量转化表等,运营部门需要营销转化表、业务流程表、销量排名表等,产品部门需要业务流程表、产品日常数据表等(观察用户留存与活跃的),客服需要用户反馈问题进度表等、售后需要售后问题进度表等。

以上只是我不专业的一个举例,实际上表是非常多的。

这里面有个地方需要注意一下,有些表看上去字段是差不多的,譬如渠道流量转化表和业务流程表,很多字段都是重复的,那么要不要并表就是一个需要考虑的问题。有的公司管理比较严格,那么最好不并表,这样可以通过后台权限来控制展示,如果相对宽松那么可以向相关部门做一下确认然后决定要不要并表。

注意:数据后台和管理后台是分开的,不能混淆。管理后台用来管理用户、商品、商户和看明细数据(用户信息表、购买订单表)等等,数据后台就是用来看统计数据的。

第二步,整理不同部门报表需要展现的字段。

以业务流程表为例。

先把业务主流程的关键节点梳理出来,到成交算是一个流程。电商的话流程大概是用户注册/登录→查看商品详情→加入购物车→立即购买/结算→立即付款→完成付款。

那么业务流程表的字段也就清楚了:

注意:报表字段是有了,但是也需要说清楚这些字段的具体含义,譬如注册/登录用户数,指的是在统计时段内,注册+登录用户的人数之和,需要去重。

不要小看这个说明,这个说明决定了大家的理解能不能一致,边界请不清晰,上面那个例子,如果没有后面那个“需要去重”那么技术在处理的时候是不会去重的,这样的话如果一个用户在指定时段内登录了多次就会统计多次。

一定要写这个说明,不写的话技术就自己发挥了,每个人对业务的理解是不一样的,所以一定要写。

第三步,去扩展报表的统计维度。

数据报表是有了,但是统计维度也需要定义,譬如需要按照日期、按渠道、按类目(商品)、按商户、按地区等等维度去看数据,那么就需要把这些和报表相关的维度加上去,这样就能实现按维度看数据的目的。

这个比较简单,有什么维度加什么维度就行,但是在处理的时候需要注意,多个条件组合能不能筛选出数据的问题,这个比较细节。

第四步,整理核心转化公式数据表。

核心转化公式数据表是给公司高管和核心业务骨干看的,高管是不可能看什么部门表的,看不过来也没必要,高管们看的表只需要体现核心数据和指标就可以。

高管们关心的也就是部门负责人关心的,部门负责人关心就应该是一线员工关心的,这就是一个拉齐公司内部认知的一个表,所以核心转化公式数据表特别重要,重要到需要单列一个步骤说明。

整理核心转化公式数据表之前就需要去梳理业务的核心转化公式,电商业务的核心转化公式如下:GMV=注册登录用户数*购买转化率*客单价*人均购买数量*(1-退货率)。

这就是一个用户从曝光到复购的一个简化的转化公式,这个公式的意义在于聚焦提高产值的关键步骤,目标不会偏。

注意:这个公式很重要,不能错,如果自己没把握的话可以问一下公司领导,知道弄清楚为止。

其实做KPI的时候也一定会需要这个核心转化公式,这样大家就能知道在哪些环节可以提高绩效,分别是提高多少,由哪些部门具体负责。

根据这个核心公式就可以整理相关的字段:

这样公司领导每天看这个数据就知道业务有没有在向预定目标发展,以及距离目标还有多远。

当然有了字段以后也需要加维度,这个就参考前面的步骤就可以。这里的统计维度其实是比较少用到的,但是功能还是必备。

 第五步,整理日常大盘数据表。

大盘表是给所有员工看的,可以作为数据后台的首页。

大盘表通常是昨日数据的汇总统计,譬如GMV、销售订单数、销售商品数、退货商品数、退货总金额、新增商户数、新增用户数、新增商品数,大概看一下数据的变化,给大家一个总体的印象。

第六步,整理实时统计表。

有一些业务对于数据的实时性要求比较高,所以会涉及到需要做实时统计表,实时统计表一般每小时更新一次数据,如果流程出现问题就可以及时进行排查和修复,但是对于大部分业务来说其实不需要,如果不是发布了新的代码,理论上是不会出现这个问题。

当然像电商APP,如果遇到双11这种,一般来说还是需要看一下实时数据的,因为全公司都很关心当天的战果,属于重要时刻。所以电商APP需要做实时表,字段的话一般也就是大盘数据表上的字段就行,额外字段的话可以根据领导的要求做。

第七步,最后确认报表字段和整理成需求文档。

把整理好的表格和各部门对一下,根据各部门的要求调整完成后制作成需求文档。

这个步骤就不多说了,按照需求的整理流程处理就行。

以上就是整理报表系统的几个步骤,当然因为细节太多了,其实没有办法在一篇文章里面讲的非常清楚,但是至少80%的东西还是在了,所以还是有参考性的。希望对大家有所帮助。

实际上做报表系统是一个持续优化和新增的过程,如果是从0开始做的话就需要单独立项然后分期做,一下子肯定是不现实的,因为工作量太大了,项目的进度不好控制,还有就是有些表并不需要马上做的,也可以缓一缓,这样优先级高的数据报表就会更快的上线。

如果业务不大的话甚至可以用excel先统计起来。总之展现形式和处理方式还是很多样化的。

产品经理在数据方面我认为其实可以多花点功夫,形成一套比较具有实操性的方法论比较好,一个数据产品和一个APP产品在竞争力上还是有差异,实际上越细分专业度越高,竞争力越强。当然首先至少要做到及格。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:人人都是产品经理  作者:代号道长

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

B端产品界面高屏效初探

雪涛

背景

在 B 端设计领域中,不管是内部用户、产品、设计师、开发,还是外部产品、设计师等,总能听到关于界面「屏效」方面的诉求或吐槽。


undefined


「屏效」狭义理解是「界面过度留白」;广义理解,「屏效」源自谐音“坪效”,指的是每坪的面积可以产出多少营业额(营业额/专柜所占总坪数)。而「屏效」对于界面而言可以指屏幕单位时间、单位面积内的信息可以带来多少商业效益/效率提升。


为了探索在 B 端产品中用户为何对「界面过度留白」或「屏效」问题如此敏感,于是我们展开了「屏效」专题的设计探索与实践。「屏效」专题探索主要以「探索」与「实践」相结合的方式展开,将实践过程中反复验证有效的设计策略沉淀成设计手册,同步将部分功能进行工程化,确保可以开箱即用。


undefined


探索阶段-为谁在何时何地设计

用户声音|不同的故事相似的诉求

面向内部设计师和终端用户投放的《高屏效诉求》《中后台产品满意度调研》问卷中认为提高屏效能极大提升用户体验的设计师占 58.14%;认为提升屏效对体验有提升的终端用户占 50.6%。


undefined


外部知乎上针对《Ant Design 4.0 设计价值观》的 13 条反馈里,其中就有 2 点提到关键字「效率」。


undefined


通过了解不同用户和产品类型发现,不同的用户在工作场景的产品使用中有着相似的特征:


undefined



案例收集|发现问题,大胆假设

纵观 B 端产品界面,发现普遍问题和收录在解决屏效问题上实践得比较好的案例,为了逐步突破问题,选择以数据产品中覆盖率极高的表格为设计切入点,通过线上跨产品多端地毯式的体验走查,发现表格三个层次的问题:


undefined


视觉、交互层在无需理解业务场景和用户目标的情况下,都较容易发现,属基础问题,但很多「过度留白」的屏效问题往往是信息被组织方式的差异导致的「过度留白」。

综上我们提出假设:为提高屏效,可从视觉、交互、信息三个层次解决

视觉层为提高信息查阅速度,可以通过提高信息密度;交互层为提高操作速度,可以缩短当前手势到目标之间的距离;信息层为提高信息被理解的速度,可以通过重组织等方式。

基于假设,我们进行了进一步的桌面研究,查阅论文等书籍,寻找设计理论的验证和指导。


竞品分析|寻找实践证据,谨慎验证

我们知道视觉上界面留白过多(过疏会增加滚屏成本,过密因易串行而影响阅读效率),以表格「行高」为例,探索各表格在字号、字高和行高的关系,因为不同字体的同字号实际像素高度会有差异,因此选择的是字高(即文字垂直高度的视觉大小)而非字号或字行高,决定留白的两个重要因子是字高和表格行高,以次推演,界面元素和元素间距的留白关系,探究在视觉层怎样的留白率能保证甚至提升屏效。


undefined


以数据产品中的表格为例,通过直接和间接竞对的方式,分别从数据的查阅(视觉)、分析(交互)维度进行功能点和设计细节上的比对,来看看优秀产品是如何解决屏效问题。

直接竞对:内部用户口碑较好的产品 A、B外界竞对:同领域的 Tableau、网易有数、金山、微软表格;间接竞对:谷歌邮箱、AntD 等的紧凑主题的常规列表(一维表格)


undefined


通过竞品分析可以发现,数据分析领域的表格留白率普遍较低(信息密度高),尤其是金山和微软的电子表格,其次是同类面向数据用户的 Tableau、网易有数,而谷歌邮箱等工作台常用的常规列表紧凑版本中,留白率和数据领域的电子表格不相上下。


紧凑版的使用场景也常常是面对数据量巨大的信息呈现,通过切换紧凑主题,提升信息的快速浏览,而这也非常适合数据分析场景中巨大的数据量呈现。因此我们的产品在留白率的提升空间极大,而在实际案例实践中,也已经将表格行高优化至 30px,克制的使用留白。


除此外,竞品其他层次的设计也做了比对,总结来看整体设计做法:高密度、少屏数、少留白等。


文字陷阱:中英文字高不等于字号


举个容易犯错的竞品参考是,谷歌在紧凑版主题下字号 12px,列表行高是 28px,但在 AntD Table 中同样的 12px 和列表行高 28px 就会发现非常拥挤,缺乏呼吸感。


undefined


原因在于谷歌的 12px 是英文字体,实际字高只有 10px,而 AntD Table 的语境是中文字偏多,实际字高有 12px,所以留白的差异在于一个是 18px(28-10),一个是 16px(28-12),这也是为什么决定决定留白的两个重要因子是「字高」和表格行高,而非「字号」和表格行高,进一步推演,决定界面留白的是「元素视觉高度」和「元素间距」。


论文查阅|寻找理论证据,谨慎验证

研究表明,低密度认知负荷低,但高密度任务完成率高,用户更喜好

参考资料:论文《基于眼动的网页对称性和复杂度对用户认知的影响的研究》

对于信息,用户需要需要阅读(视觉),思考和理解(认知),需要点击按钮、操作鼠标和打字(行动),在人机工程学中,统称为负荷。即认知(记忆)负荷、视觉负荷、动作负荷,即分别对应用户体验设计的三个层级,信息/视觉/交互。而负荷所花费资源从多到少依次为:认知 > 视觉 > 行动。


认知负荷,举个例子,看了但不一定懂了。你是否有这么一种体验——刷抖音,虽然很多(信息密度小,输出效率低),但可以一直刷下去并且刷很久;而看一门 C4D 教学视频,即使就短短十来分钟(信息密度大,输出效率高),但是却要看上半天。因为刷短视频时,你的输入效率远高于作者的输出效率,而看一门 C4D 教学视频时,你的输入效率远低于作者的输出效率。可是,输出效率是客观的,输入效率是主观的。如果输出效率很高,你可以通过提高自己的输入效率(比如让自己成为 C4D 专家)来跟上作者,从而变强;否则输出效率很低(信息质量低),你的输入效率很高(很专业),信息于你而言都是无效的。


假设负荷总量不变的情况下,那么以上三类场景界面需要对用户负担分配大致如下,官网品宣类需要低认知成本,低视觉负担,视觉要求高,用户才会被吸引过来阅读,甚至酷炫的交互更能增加互动体验而带来的趣味感,比如苹果官网,信息量极少、图版率高带来极具艺术的视觉体验、进而吸引用户愿意跟随屏幕滚动渐进式接受信息,而 B 端应用因为是专业使用,首先认知方面随着员工的专业度提高而降低,因此可以通过提高视觉负担,来降低行动负担,进而减少操作用时,当然最佳情况是三个维度能整体降低负担,让总负担降低,就需要更多设计巧思了。


undefined


面向内部设计师和终端用户投放的《高屏效诉求调研》预设解决方案中,设计师常用的 Top 3 做法为:【信息层】隐藏不必要信息、【视觉层】提高布局紧凑度、【交互层】减少点击跳转。


undefined



实践阶段-如何设计

通过以上的探索,我们可以确定的是,B 端产品面向专业人员的工作界面设计中,提高屏效可从视觉、交互、信息三个层次进行,视觉层-高密度,即提高屏幕信息密度;交互层-低跳转,通过减少页面跳转、手势与常用操作的距离等;信息层-有效性,通过重组织或辅助信息帮助用户理解,甚至提供帮助手册等以提高用户专业能力。


undefined


基于以上的总结,对产品进行优化。下面以一个简单案例进行设计策略的解读。一位运营同学想对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,寻找运营机会点。


如下表格经过高屏效策略优化前后对比图,优化前相同维度下不同人群数量的对比需要视线来回跳动比对,而优化后的表格内容,更符合用户看差异场景下分析目的数据查阅,视线锁定相同维度,即可快速比对数值大小。


undefined


下面以视觉、交互、信息三个层次解剖设计过程背后的思考。


视觉层|高密度-克制的留白

眼动理论:研究表明,人眼最小可视视角 0.3 度,水平最大眼动舒适转动区 30度,垂直最大眼动舒适转动区 55度。可得出人眼最小识别范围 12px,水平视野舒适眼动宽 1200px,垂直视野舒适眼动高 2200px。参考资料:论文《基于眼动交互的用户界面设计与研究》


undefined


如图,缩小表格行高的同时,目标信息之间的眼动距离随之缩短,在眼动舒适区内看到更多信息,便于信息的高效获取。


undefined



交互层|低跳转-高频信息前置

理论基础:菲茨定律是用来预测从任意一点到目标位置所需时间的数学模型,它由保罗·菲茨在1954年首先提出。这个模型考虑了用户定位点的初始位置与目标的相对距离、目标的大小、移动的最短时间。三者之间关系公式为:T=a+blog2(D/W+1),W为其中目标的大小;D为到目标的距离;T为移动到目标所用最短时间。参考资料:菲兹定律


undefined


表格单元格借助交互状态,增加悬浮出现的信息组件,前置显示目标单元格明细信息,同时通过交互出现的指示器辅助行列信息的获取,高频操作考虑手势位置放置,缩短与操作目标的距离,以提高整体操作效率。


undefined



信息层|有效性-信息重组织

理论基础:交互设计四大策略「组织、删除、隐藏、转移」参考资料:《简约至上》


undefined


用户为了对比 A、B 两不同人群在相同维度(白领-有信用卡)下的人数差异,但内容的重组织方式让两数据行需要频繁点击滚动条来查看,根据用户目标,将关联性大的数据放置相邻列(即将要对比的人群放置列头),即可快速查阅,减少眼跳距离。


undefined


结语

设计趋势中常见的大字体大留白界面,但在 B 端场景中,面对紧张的工作节奏,时间和注意力变得尤为可贵,相对而言,基于复杂度守恒定律, B 端信息量大且高频访问的产品中,「用得快」要比「看得美」更重要,「高密度」「低跳转」诠释的即是「空间换时间」,少一次点击,少一次跳转,少一份等待,就多一份时间和效率。



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码ben_lanlan,报下信息,会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

文章来源:站酷  作者:Ant_Design 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档