B端-中后台产品如何设计

什么是B端产品?

面对企业平台的一种产品,大多是为了提高效率,比如大家所熟知的OA系统。

来自dribbble.png

与移动端产品区别

使用人群

  1. B端产品使用人群范围会更具体,比如OA系统,使用人群就是办公室的员工,财务系统是针对会计出纳人员,仓库系统是对仓管人员的设计。这里可能还会涉及到文化水平,比如仓管和会计,可能就会有区别,需要有更多的考量。
  2. 因为B端产品可能是被特定的一群人使用,所以设计师更需要去调研产品背后的使用者,因为设计师可能不是产品的最终用户,如果按自己的想法去设计,到时候产品可能根本不符合用户的需求。
  3. 相对来说移动端的产品【面向的用户】就会更大众化,比如淘宝、微信

最终展示的方式

  1. B端产品主要是在PC端,那么就涉及到屏幕大小,响应式/自适应设计的调整,内容呈现的多少
  2. PC端产品的布局,也会比较固定,以左右布局居多,左导航右内容
  3. 移动端的产品,受硬件设备-手机的屏幕宽度高度受限,所以在展示的内容,交互的方式上面都有别于B端PC产品
  4. 现在部分B端产品也会同时做移动端,比如Trello和Teambition, 但是体验还是PC方便,而且有时候离了办公室不是很想在手机上办公

大BOSS喜欢的大盘

  1. B端产品与移动端不同的一点,付钱的是老板,虽然使用的是员工。
  2. BOSS都喜欢看一些大盘数据,比如运营系统,就需要各种数据的大盘,人员的工作量,运营维护提升百分比等等
  3. 有些产品会特定站在BOSS的角度,做一些BOSS喜欢的功能,比如BOSS会想知道,最近他下属都做了什么项目,工作量多少,完成时间,都有谁在干活。不过这一类的需求,一般是大公司会比较需要,小公司就几个人这个需求也就没多大意义
B端-中后台产品如何设计_第1张图片
来自dribbble.png

做B端产品,遇到的困境

做移动端产品的时候,习惯会先下一堆竞品来分析,对各大产品的功能点、配色、排版等进行一些梳理,找出他们的亮点。但是做B端中后台产品往往是没有竞品,或者竞品很少,而且逻辑性会更强。这时候,就只能自己去摸索,问一问使用者,并试着带入使用者的角度去看待问题,花更多时间去了解产品,不懂就问,直到自己明白后,才开始画原型。

记得刚做B端产品的时候,接到的第一项目是跟代码扫描相关的,完全懵。脑袋里面各种问题,代码方面之前只接触了前端的一些代码,但是涉及到后台,JAVA这些,真是不知该如何。所以只能百度,google,先让自己有一些基础的了解,看着产品给的文档,查着专有名词,问着各种问题。从一点不知到开始有慢慢的了解,然后自己把整个产品逻辑梳理出来。对我来说,是困境,也是突破,原来自己是可以做到的。

B端产品一般都会涉及到表格的设计,表格正常情况下,也挺正常的,直到你发现这个表格有10几个字段,一堆操作后...当你和业务方聊的时候,对方告诉你,这些字段都要,都重要。怎么办?如果不想字段挤在一块,那就只能出现横向滚动条,但是这种体验,很抓狂!!!所以决定再沟通,再沟通。最后的解决方案是,按字段的优先级来,分为基本字段和扩展字段,这样使页面不会出现滚动条。

问题会有,办法也会有的

B端-中后台产品如何设计_第2张图片
来自dribbble.png

功能先,还是体验先

B端中后台产品,更倾向功能方向。本身产品就是要提高效率,不管你体验做多好,但是用户要的功能你没有,对用户来说,可能直接影响他今天工作完成的效率。所以应该在做好功能的前提下,开始优化产品体验,留住用户,让用户有更流畅的体验。

设计规范

B端产品离不开规范,设定的规范后,可以节省大家很多时间,不管是对设计师来说,还是对前端来说。而且也会让整个设计更加统一,更加专业。

设计尺寸大小遵循一定的规范,你可以选择4/8/10倍率的,看你使用情况。蚂蚁金服是用8倍率,金融晕是用4倍率。

推荐规范网站

  1. UXPIN收集各大国外网站的设计规范,比如Dropbox, Pinterest, Mozilla, Trello, Envato等 https://adele.uxpin.com/
  2. 蚂蚁金服:https://ant.design/docs/react/introduce-cn
  3. 金融云:http://antd-cloud.alipay.net/#/layout?_k=bm8gld
  4. 蚂蚁Motion: https://motion.ant.design/
  5. 蚂蚁图表规范:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

图表的设计,现在在蚂蚁出的Kitchen Sketch插件上,可以直接输入数值来画图表,非常方便。

B端-中后台产品如何设计_第3张图片
来自dribbble.png

中后台设计需要注意的地方

用户习惯

B端产品设计,会涉及是否符合用户习惯的问题。比如说,对于移动端来说,我们可能习惯有汉堡导航,一些功能的隐藏折叠,但是对PC中后台设计来说,导航的设计就会很不一样,顶部导航,侧导航,都是一级菜单的展示在外面,方便用户一眼就知道这个产品的主要功能是什么。同时用户在使用产品时,主动性会更强,假设我今天要请假,我就直接去找请假入口,发起审批,然后就去做其他工作。不像移动端,可能我一打开APP就各种推荐,然后你再选择感兴趣的,或许只是逛逛打发时间

内容填充真实性

名称数据的填充尽量采用真实名称,如果涉及敏感数据,自己可以改一下,但是最好遵循字段的长度,这样在排版当中会更接近上线后的产品,也可以减少后期在UI上的调整

角色权限

B端中后台产品,都会有角色权限的需求,根据设计需求的不同,在页面上体现的方式也会不一样,但是设计师需要注意的地方是,要弄清楚权限问题,特别是涉及到复杂权限时

文案

在文字的表达上面要更精炼,让用户一眼就看明白,而不是要来回想。对于专业性强的字段或者功能可以加个i来进行字段解释,因为平台上面的新用户可能会不知道

表单当中,字段尽量不要出现以“的”来连接的字段,比如【关联的业务】,直接就可以是【关联业务】。字段也不要过于太长。input加入默认提示,会让整个表单更充实,特别是涉及字数限制的input,更要提示,这样用户心理才有个心理预期,不会说,输着输着就不动了......

页面跳转/返回

这个是经常被忽略的地方,因为在设计稿上面是很难体现的,而产品文档也不会涉及,交互稿上面的文字表述,经常被开发忽略,所以在设计验收的时候,这个点要注意。比如【新建产品】完成后,页面到底是跳产品列表页面,还是到产品详情页面呢?对于用户来说,到底哪个更能引导用户接下去操作呢?这都是要考虑到交互的细节

成功/失败反馈

产品当中会涉及到反馈的地方,一般是增删改查,一些操作的成功失败。这些都需要反馈给用户结果,用户等待的心情不管是在移动端还是PC端都是一样的,就是不想等。所以如果有反馈是必须的,不能立刻反馈出结果,可以用进度条,让用户知道,他的操作正在进行中,不是跑到外太空,减少用户焦虑。

页面删除需要有二次确认

删除,是整个系统操作当中比较重要的操作之一。一般是不可能删了一条数据后,用户还能去【垃圾筒】去回收下。所以二次确认是很重要的操作,毕竟误点的可能性是不能排除的,所以做个保护操作。

来自dribbble.png

控件的选择

选择下拉框还是单选框

  1. 如果选项超过4个,则用下拉框
  2. 如果选项在4个以内,且信息是简短文字,则用单选框。因为这样可以少一个步骤,并且更直观

主要按钮vs次要按钮

除了增删改查外,还有针对本身业务有一些特定性的操作,如果把全部操作放一起,可能会太拥挤,所以需要对功能按钮进行折叠,或者按优先级来区分,可以把主要按钮做得明显,次要按钮就可以根据需求进行弱化

图表的选择

图表主要分为饼图、折线图、曲线图、柱状图。但是并不是所有的数据都适合,要根据具体数据要呈现的重点,来选择。比如业务销售量占比的图表,饼图的表达就会更清晰,而业务销量趋势,就更适合用折线图来表达。每个数据要找到适合它的图表,这样展示出来的数据,才会让用户看明白,更能提现报表的价值

选择toast还是弹窗

根据提示信息的重要性,如果是需要操作的,或者需要用户高度重视的反馈,最好用弹窗。如果是只是提示的,比如新建成功,更新成功这些可以用toast提示,不会中断用户的操作,又能给用户反馈

最后,设计验收

这一步,是每个设计师必定要做的。设计验收,关系到设计稿实现的重要一步。永远不要期待开发会照你的设计稿100%实现,先不要谈代码实现和作图工具画出来的本身出现偏差,开发和设计师本身就是占在不同角度来看设计稿的,所以肯定是需要设计师来把控最后一步的视觉交互。而且还会有可能,设计稿展示没有问题,但是代码实现后的视觉是有问题,需要调整的,这都有可能

注意,不单单只验收视觉,交互的验收也很重要。验收出现的问题,推荐整理个文档,最好是在线共享,开发改了问题,可以标注,设计这边也可以看到,然后去验证,提高工作效率

你可能感兴趣的:(B端-中后台产品如何设计)