大总管默默

大家好,这里是设计夹今天为大家分享的是「B端后台设计」。B端产品往往拥有复杂的业务逻辑且页面量级巨大,快速迭代也会引发频繁的变动以及并行概率的增加,需要设计师与开发能够快速的产出方案保证上线。

这样的工作模式引发的副作用如:“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现,变成一个急待解决的问题。

B类产品中存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容,那么是不是可以通过这种方式从现在的模式中,解绑一下呢?

 

一、建立原子化组件思维

1、什么是原子化组件思维?

原子思维:原子最早是由英国化学家/物理学家约翰·道尔顿提出的,继承古希腊原子论和牛顿微粒说,提出的原子论。化学元素由不可分的微粒(原子)构成的,它在一切化学变化中是不可再分的最小单位。

原子理论同理适用于我们的设计系统中:

页面是由原子(最小单位设计元素)、分子(基础控件)、组织(基础功能组件)、模版(业务定制组件)、页面构成。

原子:原子是最基本和最小颗粒度的单位,无法进一步细分的UI元素,在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线等。

分子:原子排列组合构成了分子,在界面中多以「设计控件」的形式存在,形成相对简单的UI组件的原子的集合。例如:导航栏、标签栏、搜索框、按钮、弹窗等。

组织:原子、分子排列组合形成界面离散部分的相对复杂的组件,在界面中多以「基础组件」的形式存在,例如:内容卡片、表单页面。

模版:原子、分子、组织按照业务需求排列组合构成了模板,在界面中也称为「业务组件」,例如:筛选列表。

页面:按照一定规则后排列组合而成的满足业务需求且包含品牌属性的一个完整「页面」。

图片

2、组件化的内核

设计组件不是把UI元素堆积到一个地方,然后各处集中引用这么简单。组件化的工作方式信奉独立、完整、自由组合。

目标就是尽可能把设计与开发中的元素独立化,使它具备完整的局部功能,通过特定规则自由组合来构成整个产品。

独立:一个组件就是一个独立的产品:在制定组件的过程中要考虑到组件应用中的各个场景,降低、拆解组件中的耦合度,同时把一个组件当作一个独立产品来设计 考虑空状态、极端情况、尺寸变化 尽可能灵活适应各种使用场景

完整:一个完整组件构成包含三种属性:

A.响应状态-包含组件库中原子的大小类型、分子的响应和组合方式、多状态的交互;

B.行为状态-组件中元素的与背景的组合方式、组件中不同组件拼合的层级关系、组件与用户行为的交互;

C .数据状态-包含组件不同的状态枚举:如提交中、审核中、已结束状态。

自由:每个组件都是相互独立的,组件间的组合方式灵活且多样的。灵活多变的同时也要遵循统一的栅格尺寸与表达约束,最大程度上保证页面呈现出一种有秩序的美。

 

二、建立设计说明指南

1、什么是设计说明指南?

针对企业级产品反复出现的设计问题,设计模式给出一般性的解决方案,实现跨应用交互一致性的有效融合。减少了不必要的认知成本,提升交互确定性和设计的效率。

考虑到需要适应各种独特的业务场景,模式的规则具有一定的灵活性,万变不离其宗,通过了解设计模式的构建逻辑,可以衍生出更具场景特性的解决方案。

设计模式包含以下内容:

原则:基于价值观衍生出的一般设计技巧,包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。

全局规则:通过规范常见的互动行为,包括导航、数据录入、数据展示、反馈、操作、帮助等,呈现组件元素的标准用法和弹性空间,并了解如何将他们组织在一起来创建良好的体验。

构图模版:我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案,介绍每类页面的设计目标、设计技巧以及典型页面内容等,帮助设计师和产品经理可以快速开始构建界面。

2、服务于谁

A.设计师:交互设计时,整体流程框架或分支流程可快速复用。

B.产品经理:原型设计时,可复制并套用现有交互模式进行原型绘制,或直接引用进行开发。

C.研发人员:可作为标准交互流程的参照,统一相似流程的代码设计方式。

3、有什么内容

前言:对这次建立设计说明指南的目的性说明;

设计概览:描述这次调整的范围的维度;

设计原则:基于哪些设计原则输出设计内容;

构图模版:页面的构图模版、组合控件和组合范围;

全局规则:全局范围出发,除了页面构图以外,涉及到共用组件,制定的规范;

组件:基础控件和组织控件,甚至涉及到业务定制控件(模版)。

4、设计说明指南的输出

《GM Design》交互设计说明指南,涉及几十个产品线的成百上千个的功能,业务体量和复杂度极大,为了让整体SaaS产品具备简洁高效的一致性交互体验,设计说明指南是设计过程中问题解决的核心方法,也是构建整个平台或框架所要遵循的基础和标准。

设计模式辅助设计者将业务引向实践,并使设计更具有一般性、简单性、一致性及稳定性。同时,设计者也可结合不同业务情境,实现模式在一般性和特殊性的衔接并作要素与结构的调整。

 

最后

最后,为大家提供一份详细的GM Design交互设计文档,里面包含设计概览、设计原则、构图模版、全局规则、组件等多类B端后台交互设计内容。

完整版交互设计说明文档-体验链接:https://lanhuapp.com/url/947cJ

大家可以在公众号后台回复文档,获取访问密码。

慢慢来比较快,希望对你有帮助!

图片

获取方式:

1)在看&转发让更多小伙伴看到这篇文章

2)公众号后台回复 文档 获取访问密码

 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网 » B端后台产品的设计细节-设计说明指南篇

登录收藏
 
你可能喜欢的:
上手即用的B端图表资源~上手即用的B端图表资源~
设计基础(9):拆解B端产品,总结界面框架设计的3原则设计基础(9):拆解B端产品,总结界面框架设计的3原则
实现设计提效22%——网易天枢研发纪实实现设计提效22%——网易天枢研发纪实
工作经验|使用组件做B端产品,设计师的工作价值还有哪些?工作经验|使用组件做B端产品,设计师的工作价值还有哪些?
B端设计经验总结-帮助新人快速上手B端设计经验总结-帮助新人快速上手
设计基础(8): 表单设计中的认知与交互设计基础(8): 表单设计中的认知与交互
时间还能这么玩?这些设计也太6了时间还能这么玩?这些设计也太6了
好看视频PC站浏览体验升级好看视频PC站浏览体验升级
P了两个圆,价值800万?P了两个圆,价值800万?
导航栏篇 | 帮你全方位掌握导航栏设计知识点!导航栏篇 | 帮你全方位掌握导航栏设计知识点!