大数跨境
0
0

B端产品设计总结,收下这份干货

B端产品设计总结,收下这份干货 网信科技
2018-12-29
1
导读:网信科技智慧旅游产品部——霍靖源

作者:网信科技智慧旅游产品部——霍靖源



首先复习一下B端产品特点


1.用户群体通常面向多维度、多角色,不同角色的用户在使用系统的时候大部分会有不同的操作界面。


2.业务场景复杂,相较于C端产品(即面向个人用户的产品),B端产品在不同用户之间的流程差异比较大,不同行业不同客户所需要的解决方案也不一样,相同行业不同用户的需求场景也不同。


3.注重工作效率、成本,由于B端产品面向于特定的企业或团体,通常为内部人员使用,所以产品的稳定性和高效的操作流程成为产品设计需要考虑的最优事项。


加入网信科技以来,我都在从事智慧旅游产品设计,作为“景区运维管理平台软件”的设计师,设计前期我查阅了很多相应的设计资料,也和产品经理一起研究分析了大量的用户调研报告,其中不乏B端产品设计。


经过一年的沉淀,想借“景区运维管理平台软件”上线的日子,将我在本次设计中总结出来的设计经验分享给大家。


表单


B端产品一般都会出现大量需要用户填写和操作的表单,所以作为设计师来讲如何将表单设计的更易操作和查看就成为必须考虑的事项。


(表单的常用布局)

 

图中红色箭头表示用户点击进入一个表单页面的视觉路线,视觉路线越长,阅读表单内容所需时间越长,办公效率会相对降低。


上图中第三种设计师视觉路线最短的表单设计,但相对来讲占用了更多的空间,单页所能显示的内容量会变少,对于想要在单一页面查看更多信息的用户可能会需要滚屏和分页的操作。


前两种布局的区别在于左侧标签的对齐方式,第一种会使表单整体看起来更为整齐,但标签与输入框距离会相对变长,可能造成用户视觉路线的增加,不利于输入数据时的连贯性。所以采用何种设计方式要依用户习惯和具体使用场景而定。


本次运维产品采用了标签字段右对齐的方式设计。

 

 (景区运维管理软件web端)

 

另外除了布局需要设计师考虑,相关字段的逻辑顺序也需要考虑;输入框的长度(字符最大显示数量)、输入较多文字时的字数提示等也需要考虑。


图表


作为信息和数据的承载项,表格在信息时代的作用越来越不可忽视。尤其是在大数据与云计算发展迅速的今天,如何将实时数据转化为可视化信息图表,让用户更好的理解企业(团体)运行发展状况,并根据问题制定相应解决方案和处理对策,都成了设计师的重中之重。


表格的种类大概分为饼图、折线图、柱状图、雷达图、环图、根特图等等。下面简要的说一下各表格的使用场景。

 

(智慧旅游景区运维软件数据统计页面)


饼图一般用来分析数据的占比情况。例如,在景区大数据产品中分析不同年龄段角色用户的数据就用饼图来表示,这样可以清晰的看到不同年龄段游客的占比情况,有利于景区根据游客属性来制定活动和旅游计划。


折线图一般用来体现一段时间内相应属性数据的趋势变化,例如景区某个季度的游客数量变化,用折线图更容易让用户理解该时间段内游客的增减趋势。


柱状图也是泛用性比较强的图表(设计的时候也可以设计成横向条形图),无论是表现多类数据在一段时间内的变化,还是一类数据在不同时间的增减都是可行的。


环图、雷达图等要根据具体情况来使用、此处不做过多阐述。


表格


由于B端产品较为复杂,会有很多含大量数据的长表格,也就需要水平滚动条查看。


我在项目中也遇到了这个问题,由于表格数据过长,最终决定将可操作按钮固定在表格右侧,重要数据首先展示在表格左侧,这样无论如何滚动滚动条,都能保证操作按钮和重要数据的可视性。

 


另外表格设计中分割线的设计尤其重要,横向分割线注重于单条数据的展示,纵向分割线注重多条数据单一指标的对比查看。


因上图页面需求更倾向于单条数据的展示,所以在设计时没有加入纵向分割线。

 

关于表格的颜色,要与产品整体设计风格相匹配。在不冲突的情况下使用错落的双色对比会使表格更耐看,外观更美观。

 

(以色块区分各行数据)


由于产品各不相同,仅分享了以上较为泛用的三点,希望能对自己以及其他设计师有所帮助。

IT综合服务商

智慧旅游解决方案专家




【声明】内容源于网络
0
0
网信科技
苏州网信信息科技股份有限公司成立于2007年,公司总部设立在江苏省苏州市,目前拥有近百名员工。公司主要从事智慧城市规划设计与实施,包括智慧城市、数字企业、信息安全、信创服务、大数据、云计算、元宇宙等业务方向。
内容 403
粉丝 0
网信科技 苏州网信信息科技股份有限公司成立于2007年,公司总部设立在江苏省苏州市,目前拥有近百名员工。公司主要从事智慧城市规划设计与实施,包括智慧城市、数字企业、信息安全、信创服务、大数据、云计算、元宇宙等业务方向。
总阅读61
粉丝0
内容403