恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
B端产品设计规范(上篇)
0.0°
2021-02-24 原创文章 经验/观点 举报 5438 60 19 1

规范讲解依旧分为上下两篇,此文为上篇,努力撸文中。


以下是常见的步骤条展示方式本文受有赞设计师@美芳的指导,将我日常工作通过统一设计规范来提效的思路整理成文章。


为什么要建立设计规范?

建立设计规范有三大优点:1、保证设计一致性 2、提升开发效率 3、方便产品迭代。

保证设计一致性:对公司来说,多名设计师合作,依然可以保证设计风格的统一。对于用户来说,提高了用户体验,提升操作效率,加深对产品的记忆。

提升开发效率:与前端有效沟通的工具,提高设计还原度,降低对接成本。并且开发可以根据设计组件库建立开发组件库,极大的提高开发效率。

方便产品迭代:随着产品的业务变化,发现一些问题或者需要优化用户体验时候,针对单个控件进行调整,就可以影响全局,十分便捷。


设计原则包括哪几点?

好的设计规范需要的拥有的设计原则:1、一致性 2、及时反馈 3、效率 4、可控。

一致性:从现实生活角度,与现实生活的流程、逻辑保持一致,遵循用户习惯的语言和概念;从界面角度,所有的元素和结构需保持一致,比如设计样式、图标和文本、元素的位置等。

及时反馈:包括控制反馈和页面反馈,通过界面样式和交互动效让用户可以清晰的感知自己的操作,操作后通过页面元素的变化清晰地展现当前状态。即操作中、操作后都能让用户有个心理预期。

效率:包括简化操作流程、语言表达清晰且明确、界面简单直白,让用户快速识别而非回忆。

可控:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策。用户可以自由的进行操作,包括撤销、回退和终止当前操作等。


什么是设计规范?

从两个角度去分析,从搭建方式我们应遵循由小到大,可分为原子-分子-组件-模块-页面。就像盖楼房一样,一块块砖叠起。从使用场景来说,不管是做C端还是B端都遵循通用-导航-数据录入-数据展示-反馈-业务组件。


国内比较值得参考的组件库有哪些?

Zan Design、Ant Design、Element都是国内比较值得参考的组件库,如果我们想做一款B端产品,可以从这几个组件库中参考,并设计延展出一套有以自己品牌基因的组件库,这几大组件库可以当做字典参考,而非零到一去创建一套组件库。(网页链接放在文章末尾)


由于篇幅较长,本文先描述设计规范中包含的通用、导航以及数据录入。


通用组件有哪些?


01.色彩-主色

色彩中最重要的是主色,尽量选择冷色系,避免和错误、告警色冲突,产生歧义。比如红色就会和错误色冲突,这样错误警示色就不容易被发觉。并且避免高亮颜色,类似与荧光色。


比如我们的主色是一个蓝色,以下就是主色应用到组件。


01.色彩-功能色

功能色代表了明确的信息以及状态,比如成功、出错、失败、提醒、链接等。功能色的选取需要遵守用户对色彩的基本认知。


01.色彩-中性色

用文艺一点的说法来描述中性色可以称它为“50度灰”,最深的颜色一般用于标题,正文文字。较浅的颜色用于边框,分割线,背景色。当然,我们也可以定义更多业务色,形成业务组件规范,用于banner,插画,业务标签等。


02.文字

不同系统的字体是不同的,字重表现形式也不同,字号大小不建议设置太多种,一个页面字号层级越多,页面会显得越乱,所以也要保持克制。正文字体一般采用14号字号,如果有些系统页面不多-“地广人稀”,正文字号用16也是可以的。


03.边框和圆角

边框加圆角就可以组合成一个组件。边框一般用1像素,小组件例如按钮,输入框圆角定于为2,大卡片为4。B端设计一般偏理性简约,不会用一些大圆角,儿童活泼风格的除外。


04.按钮

按钮分为小按钮,中按钮,大按钮。小按钮一般是气泡提示,中按钮大部分用在弹窗组件,大按钮用于全局性的页面里。定义三种按钮尺寸就足够用了。按钮长度最好不超过6个字,边距长度也需要定义,例如16px。


05.间距

一般是选用8的倍数,例如8、16、24、32、40、48、56、64、72…(也有选用十的倍数的),一些特殊情况可以定义为八的二分之一或八的三分之二,例如4、12。


06.栅格

栅格由栏、水槽、页边距组成。一般由24栅格组成(24栏+23水槽+2页边距),使用栅格会使页面看起来更加整洁也有利于前端开发响应式(关于自适应和响应式区别讲解链接在文章末尾)


栅格用于约束动态模块的模块比例,用在内容层。


栅格是配合响应式的产物,栅格规范的是内容层的模块比例而非宽度。



全局导航有哪些?


01.顶部导航

只存在于顶部的导航,不占用左右边位置,适用于一级导航数量较少的系统,优点是让用户使用的时候有沉浸感。


以下是常见的顶部导航样式。



02.侧边导航

便于快速操作,多用于较为复杂的系统。


以下是常见的侧边导航样式。


03.混合导航

混合导航是既有顶部导航又有侧边导航,一级导航是顶部导航,侧边导航为二级。以下是常见的混合导航样式。


总结:从顶部导航到侧边导航,再到混合导航,虽然复杂程度越来越高,沉浸体验越来越差,但产品可用性大于体验性是B端产品的特点,所以我们根据产品实际去抉择。


04.面包屑

面包屑就是页面内的导航,是我们跳转多个页面后也不会迷路的组件。每一级导航点击后,都必须要有页面承载。

以下是常见的面包屑展示位置


05.分页器

采用分页的形式分隔长列表,每次只加载一个页面。


06.步骤条

步骤条能让用户清晰知道自己进行到哪一步。当任务复杂或者存在先后顺序,将其分解成一系列步骤,从而简化任务。

以下是常见的步骤条展示方式



07.标签页

标签页可以帮助用户在一个页面内快速切换不同类型内容,提升单个页面整体扩展性。



数据录入有哪些?


01.输入框

PC端和移动端的输入框不同的点是PC端有五个输入状态,体现出及时反馈原则。

当输入长文本框时候会限制字数;有些输入框一输入就会出现关联词提示下拉框(带搜索属性),有些输入框会固定单位。


02.单选框

单选框可以分为横排样式和竖排样式,当文案较少时候可以使用横排,节约展示空间。胶囊样式点击面积更大,同时更强调选项。


03.多选框

多选框相比单选多了一个部分选中的状态。多选框的应用非常广泛,例如表单、表格、下拉框。

04.选择器

样式有点像输入框,不过多了一个三角下拉框,建议选项最好在8个以内,超出用滚动条展示,用户体验会比较好。

选择器还有一个拓展的样式,多选样式。这里要考虑一种情况,多选内容会在选择框里成为标签,当多选款选择到一行无法展示时,我们要考虑加高多选框,而不是用省略号代替。


05.级联选择

用于选项很多且有分组的情况。以下展示的二级选择器,当然我们也可以加到三级和四级,级联越多用户体验越差,所以我们要考虑业务需要去抉择。

06.树选择

如果每个组的内容并不多,可是能分类的小组较多,那我们可以改变展示样式-树选择。


07.日期选择

日期选择组件最好加上图标示意,根据用户习惯,可以一眼就看出这个组件的功能

不同功能的日期组件样式


08.时间选择器

以时分秒会单位的组件


我们也可以把时间日期组件结合起来



09.开关

滑动开关其实也是单选组件。开关适合用于具有对立意义的选项,开关的作用是即可生效,准确易懂。


10.步进器

步进器本质就是一个输入框,只不过输入同时也支持上下按钮加减。


11.滑动输入条

滑动输入条经常用到调节音量,价格区间等。


12.穿梭框

穿梭框是两个框之间列表数据交换,优势是可视化明显。


13.文件上传

文件上传主要考虑上传过程会出现的各种状态。


14.表单

表单是一个模块化组件。表单域就是数据录入组件。


表现形式需要注意的点


以上是对设计规范的详细讲解,规范只是产品的基础,需要去充分了解并灵活使用它,才能发挥出它的价值,很多大厂已经开源组件库,我们可以站在巨人肩膀上结合公司自身产品属性去使用它们,让开发和设计有更多时间在打磨产品细节上,为设计体验助力。


最后再次感谢有赞设计师@美芳在CCtalk的分享,我们是一群本着提升B端体验汇聚在一起的团队,欢迎关注公众号【且曼B端产品设计】交流探讨。


参考文献:

1.《CCtalk B端产品设计课》by 美芳

2.《我对栅格系统、自适应、响应式的理解》马爷不吃肥肉

3.《超全面总结!如何利用栅格系统做响应式设计?》 UXBoy




参考组件库网站:

1.  https://design.youzan.com/by  有赞

2.  https://ant.design/index-cn  蚂蚁

3.  https://element.eleme.cn/#/zh-CN  饿了么

 

Powered by Froala Editor

更新:2021-02-24

收藏

60人已收藏

最多三分糖

除了放弃,没有失败

  • 3

    作品

  • 24

    粉丝

  • 1

    关注

  • B端产品设计规范之数据展示
  • B端典型表格设计

    猜你喜欢

      2021-02-24 原创文章 经验/观点 举报 5438 60 19 1

      B端产品设计规范(上篇)

      0.0°

      你确定要举报B端产品设计规范(上篇)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年02月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      19
      60
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录