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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
B端基础 | 设计规范建立大厂规范使用
2.0°
2024-04-22 原创文章 经验/观点 举报 380 1 1 0

文章分为三个部分、第一部分是介绍现在比较好的大厂规范;第二部分介绍了使用规范的意义;第三部分粗略的讲了如何在大厂规范基础上建立自己平台的规范。

站在巨人的肩膀上攀登、我们能爬的更高、更远。也能让我们更快速的变强。我在想我应该怎么告诉初级B端设计师规范的重要性呢!

让你上来就建一座摩天大厦、那显然是不现实。现实的是你待先知道什么是摩天大厦吧、然后在看看其他的摩天大厦吧。


1、你先了解一下大厂规范


在互联网大厂中、因为他们所涉及的业务很多。为了提升设计效率、开发效率。所以基本上都会有一套自己的设计规范。当然他们是各有各的特点。下面我们就介绍几个我用的比较多的设计规范吧。


1.1、ant design


Ant Design是一套企业级UI设计语言和React组件库。是蚂蚁集团体验技术部交过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系。

设计价值观是、自然、确定性、意义感、生长性。通过模块化解决方案,降低沉余的生产成本,让设计者专注于更好的用户体验。

我们公司就是基于ant design的设计规范创建的符合我们自己业务需求和平台的设计风格后台系统设计规范。


1.2、arco design


ArcoDesign是基于 Byte Design 升级而来,能力全面的企业级产品设计系统。目标, 即通过通用的设计系统去解决产品中的体验问题, 并为产品设计提供指导原则解决业务问题,同时它能够促进设计部门和研发部门之间协作, 成为开发者之间沟通的语言。

ArcoDesign 主要服务于字节跳动旗下中后台产品的体验设计和技术实现,主要由UED设计和开发同学共同构建及维护

他的设计价值观是、清晰、一致、韵律、开放。希望能够建立务实而浪漫的工作方式。

在做我们平台的设计时也参考了不少arcodesign规范和组件、根据其规范中的设计原则。也对我们的平台做了不少的优化。


1.3、Tdesign


TDesign 是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系。TDesign 具有统一的 价值观,一致的设计语言和视觉风格,帮助用户形成连续、统一的体验认知。在此基础上,TDesign 提供了开箱即用的 UI 组件库、设计指南 和相关 设计资产,以优雅高效的方式将设计和研发从重复劳动中解放出来,同时方便大家在 TDesign 的基础上扩展,更好的的贴近业务需求。

TDesign 为了在开源体系的基础上打造具有自身品牌特色且好⽤的产品,秉承包容、多元、进化、连接的价值观。

在Tdesign中也有很多我们可以借鉴的地方、我们在建立自己平台规范时也进行了少量的参考。


1.4、Element


Element UI 设计规范是一套为开发者、UI/UX设计师和产品经理准备的采用Vue 3.0作为基础框架实现的组件库,由饿了么前端团队开发和维护。UI设计组件库Element遵循一致性、反馈、效率、可控的设计原则,提供了配套设计资源,分为颜色、渐变、字体、按钮、输入框、进度条等11类,共六十多个基础组件,能够很好地满足大部分设计和开发需求,帮助设计快速成型。

我们平台上一个版本是基于这个框架规范来做的。不过当时还不是Vue 3.0而是2.0在我们平台的最新优化设计版本转用了ant design的框架。


2、使用设计规范


我们先说一下大家都好像知道。但又不一定能够很有逻辑的说出来的。我们在项目设计中为什么要使用设计规范。没有设计规范不也能够做设计吗。是的至少在我刚入行的第一年那用过规范不照样混工资吗。我想现在也有很多设计师在做设计的时候就没有设计规范。


2.1、B端设计规范的意义


B端设计规范对于我们在项目里有这重要的意义、提高设计质量、提升工作效率、更方便后期维护、更好的用户体验都诸多好处。


2.1.1、一致性


设计规范确保了跨多页面、多模块甚至多产品之间的设计风格、界面元素、交互行为、色彩搭配、字体大小等视觉表达的高度一致,有助于塑造清晰、连贯的品牌形象和产品气质。

对于多设计师协作的大型项目,设计规范能够避免因个人风格差异带来的不一致性,从而提供给用户更加专业、可靠的产品体验。


2.1.2、提升工作效率


设计师遵循规范工作可以快速产出设计方案、不用做大量的重复工作。而且也节省了大量的决策成本。对于前端开发可以根据设计规范预先构建和维护UI组件库,通过复用标准化的组件加快开发速度,减少代码冗余,提高开发效率和产品质量。

规范化的实施也有助于减少设计稿到开发实现阶段的反复沟通和修改,降低了设计还原的成本。


2.1.3、提升用户体验


统一的设计语言使得用户在不同功能区和业务流程中可以轻松理解和熟悉操作方式,减少认知负担,提高操作效率。

设计规范通常基于用户研究和最佳实践,确保了核心功能的可用性和易用性,即使在复杂的企业级应用场景中也能提供良好的用户体验。


2.1.4、维护和扩展


随着产品的持续迭代和发展,设计规范可以保障新功能的无缝接入和原有功能的稳定更新,保持整体设计系统的稳健性。

通过设计规范,企业可以更好地管理自己的设计资产,便于后续版本的升级和品牌视觉的调整。


2.1.5、团队协作和管理


设计规范不仅是一个技术文档,更是设计团队与开发团队之间、以及与其他职能团队(如产品经理、项目经理)有效沟通的桥梁,促进多方共识,形成协同工作的基础。


2.2、为什么要使用大厂的设计规范


使用大厂的设计规范有多方面的优势和原因,这些规范经过长时间的实践、迭代和优化,为开发者和设计师提供了可靠、高效的设计解决方案。


2.2.1、用户习惯和认知一致性


大厂的设计规范通常经过大量的用户研究和实践验证,符合大多数用户的使用习惯,遵循这样的规范可以使产品设计更加贴近用户心理模型,降低用户的学习成本和操作难度,提升产品的易用性。


2.2.2、高效协作提升效率


在团队协作中,设计规范可以确保设计师和开发者遵循同一套标准,减少设计和开发过程中的沟通成本,提高工作效率。


2.2.3、用户体验


大厂设计规范往往注重用户体验,追求简洁、直观和易用。使用这些规范能够确保产品界面符合用户习惯,降低用户的学习成本,提高用户满意度。


2.2.4、社区支持资源丰富


大厂设计规范通常拥有庞大的用户群体和活跃的社区支持,这意味着在使用过程中遇到问题或需要寻求帮助时,能够更容易地找到解决方案或获得支持。


3、建立自己的设计规范


为什么要建立自己的规范呢。嗯,这好像是一句废话呀。因为前文已经说了规范的使用对我们工作的重要性了。所以作为一个高质量的产品、设计规范是基础、也是有效提升工作效率和用户体验的有力手段。毕竟做为设计师的你不想每天重复没有意义的工作。用户也更愿意使用持续统一的高质量产品。


3.1、如何建立设计规范


我在工作中是这样去做的。在B端设计规范中主要包括三部分、布局、样式、组件所以我们根据自己做的业务性质去一点一点完善就行。当然你要知道设计规范不是一下子就建成的。


还有什么时候适合开始建立设计规范呢。这是一个好问题、我以往的经验是。在完成项目几个核心页面的demo过了审核后(为什么要审核、因为在优秀的设计如果你的大佬觉得屎。那么你觉得设计能通过吗。用户的需求是一部分、大佬的需求也相当重要虽然你才是专业的。有的时候我们还有一部分工作就是把大佬不合理的要求用我们的专业性把他合理化这个也很重要)。这样基础的规范和设计风格就出来了。后期在根据业务去不断调整就可以了。我个人感觉这样是相对高效的一种方式。


3.1.1、制作demo


在这个阶段,你首先要搞定的是不羁、一个好的布局页面决定了你界面的设计风格。你可能在想数据页面可是我想告诉你的是表格页面才是你的重点。因为大部分的后台页面、表格页面要占到80%以上。


我们前面的文章说过栅格化和功能区的划分、这里千万不要之间按着大厂的规范去整。要按着你们的业务和大佬的建议去整。比如我们平台因我我们大佬对屏效的执著所以虽然我们用的是antdesign的框架,但是页面的栅格就不是内容区边的尺寸就不是24这个是8的倍数。我们用的是20px.所以很多东西你是需要站在巨人的肩头有所修改的。


我的方法是结合大厂的设计规范的经验来制作自己的初级设计规范和DEMO经验。这样既有一定的设计规则(也就是我们后期部分的规范)也可以更统一化规范化的制作DEMO的设计。(更好过审,过审的过场中刚好的反驳那些有,无聊建议的产品经理和技术大牛)


3.1.2、总结样式


样式通常指界面最基础的视觉细节,UI 中最基础的样式内容就包含色彩、字体、图标这三个大类。如果项目风格化强一点,那就还可以整理一些额外的内容,如投影、透明度、渐变、毛玻璃效果的具体参数和使用细节等。


样式是规范整理中最简单的部分,只有在字体整理上存在一定的认知歧义,需要设计师花比较多的时间去理清楚具体的参数和规则。只要样式规范能整理并设置好,那么就可以快速应用到后续的项目设计中去。


3.2、使用和不断完善


设计规范不是一个死的规定、他是一个不断地更新的一个过程。而不是做个规范放 哪里就一成不变了。你要明白。规范是为我们服务的而不是框死我们设计创作里条条框框。


3.2.1、设计规范的使用


用相对就比较简单了。把我们之前总结的样式和组件整理一下行程我们的设计系统规范(如sketch模板、figma库等)直接调用预设的组件、模板和样式进行设计,确保每个元素的尺寸、颜色、间距等都符合规范。


在设计具体界面或元素时,始终遵循规范中关于布局、信息层级、操作反馈等交互原则,确保用户体验的一致性。


3.2.2、不断完善规范


不断完善设计规范是一个持续迭代和优化的过程,旨在确保规范能够适应不断变化的设计需求、技术发展以及用户期望。


定期组织设计团队对现有规范进行系统性审查,评估其在实际项目中的适用性、一致性及有效性。识别可能存在的模糊地带、冗余部分或缺失项。


收集用户对产品界面和交互的反馈,了解他们在使用过程中遇到的问题、偏好及改进建议,这些信息有助于发现规范中需要改进的部分。


选择部分项目作为规范更新的试点,应用新规范进行设计,通过实践检验其效果,收集问题与改进建议。


4、最后


设计规范你可以不会做但你千万不要不会用。在过去的工作经历中、也做过不少的设计规范。APP的后台系统的。但缺没有好好的停下来总结总结。


如果在项目里你还不了解设计规范的重要性或者不会做设计规范。那就先停下来去看看这些大厂的规范先用着。他们都提供了丰富的可用资源。是可以为你解决日常工作的。

好了这篇文章就到这里了、春天、适合出去玩不适合工作。哈哈。长堤春水绿悠悠,畎入漳河一道流。 莫听声声催去棹,桃溪浅处不胜舟。


我是KING 我们下次见~



Powered by Froala Editor

更新:2024-04-22

收藏

1人已收藏

KiNG UXD

我从山中来,带着兰花草。种...

  • 15

    作品

  • 43

    粉丝

  • 3

    关注

  • B端基础 | 聊聊B端基础设计知识
  • B端基础 | SaaS表格实战优化设计
  • B端基础 | 表格基础设计浅谈02
  • B端基础 | 表格基础设计浅谈01

    猜你喜欢

      2024-04-22 原创文章 经验/观点 举报 380 1 1 0

      B端基础 | 设计规范建立大厂规范使用

      2.0°

      你确定要举报B端基础 | 设计规范建立大厂规范使用

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2024年04月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      1
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录