本篇介绍通过基础组件库和项目的沉淀过程,构建成全平台通用的模版页面,通过这些模版页面,再结合业务可搭建成产品所要的设计页面。

如何从零构建UI组件及设计规范(五):通用模版

1. 顶部菜单

它的定位是全局功能,也或者是系统功能的操作。

    汉堡图标:用于打开/隐藏左侧导航。公司LOGO:九曳logo,始终存在。平台名称:和公司logo组合成点击可直接回到工作台首页。顶部一级入口:用于更改左侧菜单的一级导航入口。不一定所有平台都有,如客户平台上方就空着。全局功能:如帮助、消息等。个人中心:提供关于个人设置等消息等通知。

如何从零构建UI组件及设计规范(五):通用模版

顶部与左侧菜单区别:

顶部菜单:

优点:①通常使用比较少的文字,简单易记;②位于页面顶部,不占用横向空间;③视觉上更突出,更容易识别;④菜单视觉权重的区分更明显,左强右弱;缺点:①扩展性有限,不能承载大量和多层级菜单;②占用屏幕高度;切换菜单选项时,移动鼠标的距离更长,操作效率更低;

左侧菜单:

优点:①扩展性强,承载菜单项数量和层级多;②不占用屏幕高度且可以收起,为内容区域有更大多空间;③菜单间切换时鼠标移动距离更短,效率更高;④能够适应屏幕宽度较小的设备;⑤翻译其他语言不会易出现文字错乱;缺点:①菜单数量多层级复杂时,不易记;②各菜单选项之间的视觉权重差别不明显。2. 左侧菜单

不存在单独一级菜单:即使只有一个菜单,也要挂在一级菜单下面。

菜单深度控制在两层:增加菜单而减少深度的设计原则,为防止内容隐藏过深,如果二级菜单下需要显示其他内容,请使用标签页或者另增加菜单。

按照使用频率排序:菜单常规按照使用频率和重要性排列,常用的排前面,不常用的往后排;重要的放前面,反之放后面;

菜单文字需简洁:文字宽度和菜单应较为接近,字符不要超过8个字。

控制一级菜单数目:一级菜单数目不要太多,尽可能增加二级菜单。

如何从零构建UI组件及设计规范(五):通用模版

3. 页签

将用户常用的菜单功能展现出来,方便用户快速切换,并告诉用户当前所在的页面。

工作台始终存在:「工作台」页签始终存在,不可关闭,较于其他页签UI有所区别。

关闭所有页面:如果页签宽度超出1100px,那么最后则展示下拉箭头,并添加「关闭所有页面」功能。

如何从零构建UI组件及设计规范(五):通用模版

如何从零构建UI组件及设计规范(五):通用模版

2. 柱状图

适用于多个变量数据维度的比较,由高到低进行;特殊情况,如可变量是时间,则按照时间顺序来进行展示。

优点:一目了然地进行数据维度的增减比较;

缺点:数目太多时(超过12),分辨起来比较困难,这时则适合用折线图来进行显示。

如何从零构建UI组件及设计规范(五):通用模版

3. 折线图

适用于对趋势的展现,不建议展示每个节点,对比的主体数量建议不要超过12个,过多会让用户辨识度降低。

优点:适合对于趋势的研究;对主体的对比效果较明显;

缺点:对比主体不能太多。

如何从零构建UI组件及设计规范(五):通用模版

4. 饼图

适用于研究单个个体与整体之间的关系,找到影响整体的主要因素;一般主体数量不要超过6个,如果数量超过,可以使用一个“其他”来概括;占比从大到小,从12点钟按照顺时钟方向进行排列。

优点:很快就能看出,影响整体的头部因素有哪些,切占比比例是多少;

缺点:各因素对比效果差,特别是两个因素的占比相近的时候;影响因子较小的很容易被忽略。

如何从零构建UI组件及设计规范(五):通用模版

5. 举例说明

客户平台工作台

如何从零构建UI组件及设计规范(五):通用模版

服务平台工作台

如何从零构建UI组件及设计规范(五):通用模版

服务平台客服平台

如何从零构建UI组件及设计规范(五):通用模版

如何从零构建UI组件及设计规范(五):通用模版

浮边布局

将数据过滤模块放置在右侧隐藏,点击右侧滑出。当过滤条件过多,且操作频次极低,又不想占用水平空间时,可采用此方法。

如何从零构建UI组件及设计规范(五):通用模版

2. 一般规则

边距:所有的边距都为8px;

按钮数量:操作按钮最多6个,超过的最后使用更多下拉。

隐藏过滤器:即使没有收缩过滤器,下拉也会隐藏过滤器;

字段为空:如果列表内容为空,使用“-”替换原字段信息,不可以直接空着。

回到顶部箭头:筛选隐藏后,下拉超过两屏幕,显示回到顶部箭头;

操作按钮:导入导出按钮较为重要,为突出其重要性,与其他按钮采用分割线分开,按钮内部增加图标。

禁使用弹窗筛选:一般情况下筛选条件需要实时可见,不可以出现在两个页面上。(ps.弹窗算另一个页面,错误示范:客服平台、CRM弹窗设计)

3. 模板列表

常规状态:正常表格,提供每条条目的概览信息,可查看详情。作为简易版的列表页使用。

如何从零构建UI组件及设计规范(五):通用模版

字段过多:横屏滚动,需要将标题名称字段和操作列浮出。

如何从零构建UI组件及设计规范(五):通用模版

多个字段合并:通过将字段进行合并,一般将合并的字段放在前列。

如何从零构建UI组件及设计规范(五):通用模版

卡片式:不需要过滤条件,无翻页,自动加载;应用场景:用户没有特定的顺序浏览条目,将每个条目以较有吸引力的方式呈现,如服务平台的CRM企业客户、通知消息等。

如何从零构建UI组件及设计规范(五):通用模版

右侧浮边:将数据过滤模块放置在右侧栏,当过滤条件过多,横向空间充裕时可使用。

如何从零构建UI组件及设计规范(五):通用模版

4. 头部筛选区域

不要使用弹窗查询:因为这样就不能够看到筛选的条件,如@客服平台需要修改

保留当前查询条件:每次查询保留当前查询条件;

重置按钮:当查询条件超过一行,则显示下拉,当查询条件超过6个,则提供「重置」按钮;

未查询到任何记录:当未查询到任何记录时,需要给予未查找到相关记录的提示信息;

提供模糊查询:除设计中明确提示不需要外,需提供模糊查询及组合查询功能。

如何从零构建UI组件及设计规范(五):通用模版

5. 快速过滤选择

允许用户处理大型数据时减少可见项,帮助用户快速找到他们想要的东西,面对大量选项时作出决定。非特殊情况,只可以放同一个字段类型的筛选。

如何从零构建UI组件及设计规范(五):通用模版

6. 修改和删除

修改

表格的存在复选框,勾选多条记录点击修改,提示「每次只能选择一条记录进行修改」。修改后加载的内容应当为实际内容,而不在是默认值;修改完成后回到原纪录所在位置,且刷新显示修改后的值;需要对主要字段内容进行重复值、空置(空格)、中英文特殊字符判断校验。

删除

必须要求确认删除的提示信息;删除成功后刷新,不显示删除的记录;删除成功后,返回到原纪录的所在页面,如果原记录所在页不存在时,则返回上一页;当删除的记录关联其他记录时,给予信息提示,请求界面给予绑定相关、明细的的提示信息,按钮置灰并不可删除。如何从零构建UI组件及设计规范(五):通用模版

2. 最基础表单

快速完成一个简单的任务,输入的信息量很少,建议6个字段以下使用。如不做说明,所有的新增表单打开一个新的页签页面。

如何从零构建UI组件及设计规范(五):通用模版

3. 基础表单

快速完成一个简单的任务,输入的信息量很少,建议6个字段以上使用。

一列字段

如何从零构建UI组件及设计规范(五):通用模版

两列字段

如何从零构建UI组件及设计规范(五):通用模版

4. 步骤表单

需要流程组织填写的,利用步骤条告知用户流程和进度,常常在最后提交阶段需要让用户再次确认消息,并在结束后给予用户明确的结果反馈。适用于具有明确的线性逻辑任务。

如何从零构建UI组件及设计规范(五):通用模版

5. 卡片表单

一次性填写的内容非常多,不同的内容可进行归纳。或者对不同的类别采用不同的选项卡。建议20个字段以上使用。考虑编辑修改时,需要再次划入到底部,所以采用分卡片表单时,按钮放在右下脚。

如何从零构建UI组件及设计规范(五):通用模版

6. 标签页表单

方便查看切换各个类别内容修改,采用标签页设计。如CRM的客户管理设计。

如何从零构建UI组件及设计规范(五):通用模版

7. 辅助功能

新增

新增的记录必须排在列表的首行,并做选中提醒;提交失败后必须保存用户已经输入的内容,以便再次提交。新增内容提交失败后,须保留用户修改的内容,以便再次修改提交;新增界面时光标默认停留在第一个待输入的文本框中。

保存

保存或者提交成功给予轻提示消息;返回到列表页时选中保存的那条记录。

取消

数据量较多的页面中,当进行列修改后,作取消时需要弹窗给予提示;

修改

新增或修改的内容提交失败后,需要保留当前的内容,以便再次修改提交;对主要字段内容进行重复值、空置(空格)、中英文特殊字符判断校验。如何从零构建UI组件及设计规范(五):通用模版

2. 单张卡片

所有的信息内容集中在一张卡片中,通过间距来区分。使用场景:需要展示内容较少,复杂度较低的信息。

如何从零构建UI组件及设计规范(五):通用模版

3. 多张卡片

展示审批单据的详细信息,将内容复杂度较高的使用卡片区隔开来,卡片内容的相关性不高。使用场景:适用于审批流程和审批明细展示,及部分审批操作。

如何从零构建UI组件及设计规范(五):通用模版

4. 页面分层

使用场景:详情页内容且复杂度较高,需要拆分为多个页签,辅助用户浏览信息。如CRM企业客户管理。

如何从零构建UI组件及设计规范(五):通用模版

5. 表格式详情

某一组的字段内容过多的话,建议使用表格式样,这样做的好处能够快速定位信息。

如何从零构建UI组件及设计规范(五):通用模版

如果所示:优点对字段类别分类,迅速定位到相关重要信息,缺点是极大占用纵向空间。

如何从零构建UI组件及设计规范(五):通用模版

如何从零构建UI组件及设计规范(五):通用模版

2. 一般规则

无数据空状态:首次使用没有数据。目的让用户知道需要添加数据。

用户操作空状态:根据用户操作反馈。如:搜索无结果;确认结果完成(支付完成),目的让用户知道成功的完成了某一个过程,并向用户反馈结果。

错误空状态:权限、系统、需要配置等问题。让用户知道问题所在,如果可能并提供可以纠正的操作按钮。

不要多个按钮:不要有多个按钮让用户做选择,集中在让用户需要做的主按钮上。

如何从零构建UI组件及设计规范(五):通用模版

3. 错误案例

空状态、无数据需要有提示信息。

如何从零构建UI组件及设计规范(五):通用模版

如何从零构建UI组件及设计规范(五):通用模版

参考文章《Element》https://link.zhihu.com/?target=https%3A//element.eleme.cn/%23/zh-CN/component/installation《Ant Design》https://link.zhihu.com/?target=https%3A//ant.design/docs/spec/introduce-cn#相关阅读#

如何从零构建UI组件及设计规范(一):介绍篇

如何从零构建UI组件及设计规范(二):设计原则

如何从零构建UI组件及设计规范(三):全局样式

如何从零构建UI组件及设计规范(四):基础组件

本文由 @徐银高 原创发布于人人都是产品经理,未经作者许可,禁止转载。

题图来自Unsplash,基于CC0协议




阻力设计在产品中的应用

阻力设计在产品中的应用

阻力是指物体在流体中相对运动所产生与运动方向相反的力,不仅在自然间中常见,在互联网中也广泛存在。本文作者从五个角度,深入分析阻力设计在产品中的应用,希望对你...

2020-06-18
如何成为一个合格的数据架构师?

如何成为一个合格的数据架构师?

数据架构师在互联网行业中是个很重要的职位,是企业数据资产最重要的“奠基者”。那么,如何成为一个合格的数据架构师呢?本文作者基于自身经历,从三个方面展开介绍,推...

2020-06-18
倒推“抖音短视频”APP产品需求文档

倒推“抖音短视频”APP产品需求文档

文章是倒推“抖音短视频”APP产品需求文档,但由于作者是第一次写需求文档,所以仅对核心需求进行了需求分析与说明。一起来看看~ 目录: 一、文档综述 1.1文档属性 1.2产...

2020-06-18
微信“拍一拍”,真的是一个没什么用的功能吗?

微信“拍一拍”,真的是一个没什么用的功能吗?

昨天微信上线了“拍一拍”功能,用户点击2次头像,会产生头像抖动,震动反馈,且在聊天框中显示“XX拍了拍XX”。 这个功能推出后,很多微信群都在疯狂拍一拍,引起了一波拍...

2020-06-18
数据大屏设计师,我不信你没有这些困惑(上)

数据大屏设计师,我不信你没有这些困惑(上)

从事互联网行业的人,每天都在接收新知识,时常也会有迷惑的时候,尤其是数据大屏这样比较少有人踏足的领域。本文作者以自身经历出发,对数据大屏设计提出了自己的一点...

2020-06-18
客户关系管理的15个模型总结(下)

客户关系管理的15个模型总结(下)

对于ToB产品,仅仅基于用户需求来设计产品架构是远远不够的。B端产品服务的是有着几年,甚至几十年管理积淀的企业,必须依靠一定的理论知识来支撑系统的设计规划。本文...

2020-06-18
B端产品设计:价值主张与需求对应的价值

B端产品设计:价值主张与需求对应的价值

B端产品的需求来源于场景,产品经理通过满足客户需求从而产生价值。因此,SaaS产品经理面对扑面而来的需求时,应当更清晰理解并评判需求的价值。 01 2008年,著名商业...

2020-06-18
以知乎为例,探讨未来产品设计的几大变化

以知乎为例,探讨未来产品设计的几大变化

知乎作为一个典型的问答社区,它本身反映了内容社区产品的很多典型问题。本文以知乎为例,探讨社区类产品未来发展的一些变化,对内容社区感兴趣的童鞋不要错过。 前段...

2020-06-18
如何用产品思维打造线上课程?

如何用产品思维打造线上课程?

如何用产品思维来给自己打造一个线上课程呢?本文从市场调研、课程开发、运营推广、成交这几个方面分享如何打造自己的课程,希望对大家有所帮助~ “地摊经济”重出江湖,...

2020-06-18
「武侠连载」营销中心设计——优惠券

「武侠连载」营销中心设计——优惠券

优惠券是常见的一种营销推广的方式,但是你真的了解它吗?本文作者以武侠故事的形式,对优惠券展开了生动的分析,对优惠券感兴趣的童鞋不要错过哦。 (武侠情节接上文“...

2020-06-18
金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

金融支付财务融合业务-实践分享1:订单、账单、交易流水、账套知识解构、原理解析

本文作者从实际工作实践出发,结合案例等分享了电商金融支付财务融合中的基本概念和相关原理解析,包括:订单、账单、交易流水和账知识解构,供大家一同参考和学习。 ...

2020-06-18
关于卡片设计的分析与思考

关于卡片设计的分析与思考

卡片是APP常见的设计形式,它既有好处也有弊端,因此需要根据场景和内容确定展现形式。本文从四个方面对卡片设计展开分析,推荐给对卡片设计感兴趣的童鞋阅读。 卡片是...

2020-06-17
内容型产品中,付费会员功能如何设计?

内容型产品中,付费会员功能如何设计?

付费会员制度让用户预付会员费,将钱留在平台,那么未来一定会有消费行为,那么会员制度要如何设计,才能激励用户付费呢? 01 为什么要做付费会员? 讨论这个问题之前...

2020-06-16
文字社区是否可以拥有弹幕?

文字社区是否可以拥有弹幕?

从社区产品的角度来思考,弹幕功能对于内容生产方,内容消费方以及平台方而言各自有什么意义?图文内容社区是否有机会拥有弹幕呢?如果可以发弹幕,用怎样的形式呢?本...

2020-06-16
FMS财务系统收支结算总结

FMS财务系统收支结算总结

本文按照FMS收支结算划分,结算流程分类及各系统交互,财务系统内部结算基础能力,收支结算整体结构的顺序来依次介绍,总结财务系统收支结算的结构,和一些作者的个人思...

2020-06-16
如何迅速提升用户好评?试试这三种方法

如何迅速提升用户好评?试试这三种方法

小编推荐:如何提高一个产品的用户评分,改变大家对这个产品的印象呢?本文作者给大家介绍了三个概念:用户体验地图、峰终定律和服务蓝图,并详细解释了该如何使用这三...

2020-06-16
对工具型产品易学习与易使用的思考

对工具型产品易学习与易使用的思考

小编推荐:易学习是指怎么让新用户的学习成本降低,能够很快地掌握产品的使用,它的前提是足够简单和容易理解。而易使用是指,如何让用户快速、高效地完成一项任务,达...

2020-06-16
比对象还懂你!推荐算法为啥这么准?

比对象还懂你!推荐算法为啥这么准?

信息过度和广告过多的社会中,推荐算法的使用也就显得理所当然,但是它是如何做到了解用户的呢?本文从用户画像的定义和设计出发,结合实际案例,深入浅出地阐述了基于...

2020-06-15
B端平台产品需要培养的4种意识

B端平台产品需要培养的4种意识

对于许多刚入行不久的产品经理来说,B端平台产品是比较有难度的一项工作。本文作者基于自己的工作经历,提出了四点关于B端平台产品需要培养的4种意识,希望对你有帮助。...

2020-06-15
广告系列:保留价

广告系列:保留价

在一次拍卖中如果所有买家的报价均小于卖家的估价时,则拍卖品不出售由卖家保留,此时卖家的估价就是保留价,也叫底价,全称市场保留价。对于卖家来说,保留价的设置保...

2020-06-15