1回答

0收藏

设计规范详解 (三)!!!

数字艺术学院 数字艺术学院 675 人阅读 | 1 人回复 | 2021-01-28


7.1 图标重要性

当一个界面完全由文本构成时,用户被迫阅读每个文字来找到自己想要的信息。而引入图标后,降低了用户的认知负荷,帮助用户更快导航,提高用户使用产品的效率。另外一方面、设计精致风格统一的图标提高界面的美观度的同时,也为用户带来了连贯一致的使用体验。



7.2 图标规范的内容

尺寸:由于不同形状(三角形,圆形、长方形、正方形)具有不同的视觉大小,仅仅规范图标的大小是不够的,通常我们会设计一套图标keyline,来保证不同的图标具有相同的视觉大小。

填充/描边:一般的系统功能图标采用描边。工作台的常用功能入口一般采用带背景的填充图标,原因是在空间有限的的区域,太多形状会显得杂乱,另一方面面型图标的视觉面积较大,短时间内更加容易识别。

除此之外,还包括圆角、端点、线宽、倾斜角度等其他规范。



7.3 落地

在产品中,图标通常有多种尺寸,我们一般会为每个尺寸的图标各创建一个frame来进行管理,其中,我们会把同一个图标的填充版和描边版创建为一个组件集,这样在调用时可以直接控制图标的填充和描边,在做有选中态和非选中态的组件时尤为方便。

另外,在命名上,我们会用图标的内容为它命名而非表意,例如一个灯泡的图标,我们会直接命名为灯泡而非创意。



7.4 图标库推荐

在这里给大家推荐几个我常用的图标库,在来不及画图标时,可以先用这些迅速建立起一个图标组件库。之后有时间了再慢慢更新为自己的图标。

Iconfont:国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。特点是图标非常丰富。

Remixicon:Remix Icon 是一套面向设计师和开发者的开源图标库。质量很高,风格中性大气,因此适用于很多风格的项目,分为“线性图标”和“面型图标”两种风格。相比于 Material Icons,RemixIcon 看起来风格会更统一、简约且精致硬朗一些。

IconPark: 这是字节CUX设计团队出品和维护的开源图标库,如今已对外开放使用,特点是图标大小,线宽等多个属性均可设置,自由度较高。



8.1 文案是什么

文案是我们的产品与用户交流的最基础最简单的沟通工具。文案存在于产品的各个地方,例如按钮文案告诉用户按钮的作用,轻提示文案告诉用户反馈结果。对于新用户来说,文案肯定比图标易理解,另外一方面,文案更不容易产生歧义,例如一个图标可以会有多种意思,而文案相对更精确。



8.2 文案规范的重要性

伴随着B端的业务功能的快速迭代,由于设计师、产品经理的水平、文案风格、对文案的重视程度不同,导致系统内部文案积累了很多问题,最明显的问题,同一场景文案不一致,会给用户带来体验的割裂感,增加用户使用产品的认知成本。

而通过构建文案规范,可以规范文案的使用和编写,提高文案的质量,给用户带来连贯一致的使用体验。



8.3 文案撰写的原则

这里给大家介绍一些产品文案通用的一些原则,包括,准确,简洁、用户视角


8.3.1 准确原则



8.3.2 简洁原则



8.3.3 用户视角原则



8.4 落地

一般情况下,文案没有专门的人来负责,国外可能会有“UX Writer” 这样的专门职位来负责,在国内一般会交给体验设计师来负责。

文案规范的落地分为四步:

1.    遍历页面,列出所有的文案

2.    梳理相同或相似场景的文案,将文案归类整理

3.    根据实际情况制定产品文案的原则,并撰写一部分典型场景的文案。

4.    输出文档,包含文案撰写原则及典型场景的文案。



9.1 组件库是什么

组件库相当于乐高的一个个积木,通过组件的拼搭可以迅速搭建出一个页面。通常我们将组件库分为基础组件和业务组件两大类,前者是系统通用组件(图标/按钮/输入框等),后者是由业务决定的相对更复杂的组件模块。而对于B端产品和C端产品,二者的组件库又有些许差异。C端的组件库更追求极致的交互和视觉体验,因此需要考虑视觉、性能、实现、兼容性,另一方面,C端会根据活动、节日切换不同的主题,也要考虑组件视觉上的个性化扩展。对于B端而言,组件库更看重可复用性和稳定性,保证可以支持业务快速迭代。另外B端会涉及到各种各样的数据录入与展示,因此相对更高的要求是大而全,覆盖面广。



9.2 如何做组件库



9.2.1 确定组件库的内容
  • 新产品

    对于新产品来说,业务体量较小,较难抽取共性,组件也不全面,因此较好的方式是参考大厂的组件库确定要做哪些组件,它们的相对成熟,参考价值较高。


  • 成熟产品

    对于已经成熟的产品来说,我们可以直接遍历页面,穷举出所有用到的组件,除基础组件外,提炼出复用率高的业务组件进行结构化和组件制定。




9.2.2 搭建每个组件

以警告提示(Alert)为例,演示单个组件的建立方法。


   1. 定义组件

       根据业务定义警告提示的使用场景,警告提示用于重要信息的提醒,采用非浮层的方式展现在页面顶部,被动出现,且不会自动关闭。


   2. 拆分组件

      这一步是将组件拆分为元件。对警告组件进行拆分后得到如下:

   3. 重组输出

       根据业务场景,我们把各个元件重组为组件,建成组件集,并定义各种组件的使用规则。



9.2.3 输出文档并替换到产品中

在组件库建立完成后,只有在日常设计中真正使用组件库,提高组件库在设计稿中的覆盖率,才能真正达到组件库的效果。这就要求我们要输出一份完整的组件库描述文档,在团队中进行推广,加强设计团队的公用意识。另外,我们还要与开发工程师配合逐步完成现有页面的组件替换。



9.2.4 定期维护组件库

组件库的内容并非一成不变,而是在不断地更新,以保证所包含的组件都是最新和有用的。与其他数据一样,组件也会有增删改。

增:当有新的组件产生时,我们需要通过判断它的拓展性和复用率,以确定是否将它入库。

删:随着产品的不断升级迭代,如果某个组件已经不用或复用率很低时,我们可以考虑是否要将它删除。

改:不可避免的,组件会随着业务而进行升级,我们可以通过数据埋点和A/B test的方式来确定某个组件是否要进行改动。



10.1 PC端设计规范

  • Ant Design

    Ant Design是由蚂蚁集团体验技术部经过大量的项目实践与总结,逐步打磨出来的,基于「自然」、「确定性」、「意义感」、「生长性」四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验,是非常完整的一套设计规范。

  • Zent

    Zent是有赞 PC 端 Web UI 规范的 React 实现版本,提供了一整套基础的 UI 组件以及常用的业务组件。通过 Zent,可以快速搭建出风格统一的页面,提升开发效率。目前有 50+ 组件,这些组件都已经在有赞的各类 PC 业务中广泛使用。

  • Element

    Element是由饿了么公司前端团队开源一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源。

  • AT-UI

    AT-UI 是一款基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品,在众多的的组件库中,AT-UI 属于视觉风格比较清新的一款。





10.2  移动端设计规范
  • Vant

    Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。目前 Vant 官方提供了 Vue 2 版本、Vue 3 版本和微信小程序版本。

  • NutUI-JDL

    NutUI-JDL 是一套基于京东物流视觉规范的移动端组件库,包含了36+高质量组件和详尽的文档和实例。




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

参考文献:

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

软件工程-三次软件危机的表现及起因

移动端UI一致性解决方案 by 美团技术团队

产品配色 2.0:使用 HCL 色彩空间替代 HSL 生成配色 by 二三事

B端设计指南02 - 导航菜单 by CE青年



本次的分享到这里就结束了,希望可以对大家有帮助。由于文章字数较多,笔者几经修改,仍不免有疏漏错误之处,如发现错误,请读者于评论区或私信指出,不胜感激。

在快节奏的洪流中,保持设计的初心,做有灵魂的设计,我们下篇再见~



回答|共 1 个

Z炒米粉

发表于 2021-1-28 15:52:03 | 显示全部楼层

为什么没有点赞的表情呢???
回复

使用道具 举报

高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则