58到家是一款互联网家政服务的平台,有着严谨的视觉和交互规范,同时为满足平台和用户的诉求,我们在对APP进行不断的优化和打磨;

在APP不断升级和页面的变化中,我们打造平台统一的设计语言和规范,那么如何保证规范有效的落地呢?

1、不适合业务场景的,都不是好规范

设计规范需要能切实落地才能发挥它应有的作用,从设计规范的范围和形态上来说并没有绝对的对与错,不是范围越广越细致的规范就越好,能适应当前项目和团队、满足业务诉求的就是「合适的」设计规范。

在业务快速上升的时期,相比一次性建立规范,根据优先级来单点解决可能是更好的办法。

在规范建立初期,我们通过走查等方式确立了规范目标,主要是对现有页面的问题解决和对之后的设计指引。

2、“达成共识”,遵循设计指南

到家是多业务场景,很多业务和设计环境一直是在变的,所以我们更愿意对现有规范命名“设计指南”,可以代表着是一种动态的设计趋势,时刻保持更新。

往往同样一个功能在不同业务下是近似而又有差异化,这时候就需要主设计师进行方案的整合,统一化设计,经过归纳总结后形成通用性的方案,之后需要和设计小组达成共识,共同遵守通用性方案,保证统一组件不同页面的一致性。

设计的一致性主要体现在页面体验的一致性,页面体验的直观感受在于设计师产出的一致性;多人协作的团队中,如何保证产出的一致性?

如何易用?

首先,需要设计师自觉遵守沿用设计规范,其次,高效的协作工具同样必不可少;核心:提升设计规范本身的质量(好产品),简化设计规范应用的流程(易使用),加强使用者对规范的认同感(强营销)

让每个人的设计产出一致1、建立主设计师与业务设计师的协同主设负责维护规范文档,围绕专家团评审通过的设计理念和概念设计,完善风格和体系化的基础规范,组织设计师进行宣讲,也在这一过程中综合、跨业务地了解和考量不同情况,听取各业务设计师的问题建议、与各业务设计师一起共建落地。

2、同时主设计师要负责平时对规范的反馈和答疑;再遇到问题时,要做到最优平衡:不同系统/业务处理,最优呈现决策

比如iOS系统可以做毛玻璃效果,可应用在界面里做最好的视觉呈现。而Android系统不能做毛玻璃效果则变通设计手段,降低透明度,去掉导航分割线,平衡各种细节,尽量达到同样期望通透柔和的效果。

3、主设与业务设计师协作分工

主设计师需要:1、清晰设计语言,设计风格体系;2、对于设计页面的把控,那些是需要把握的,那些是可以由业务设计师决策;3、保证宣讲理念的到位,保证业务设计师和你的共建能力;4、具有全局观,实时跟进业务的整体方向。

业务设计师需要:1、作为直接负责各具体业务线的设计师,需要仔细理解规范和理念,认同设计规范的价值;2、积极配合主设走查,主动提出问题,辅助主设完善设计规范,并驱动自己业务、技术落地。

主设协同组内设计师,不断协同完善,进行规范的更新或者问题的剔除。

4、规范的验证与问题收集

给大家推荐设计度量标准,结合我们设计系统的目标,将度量体系聚焦五大维度:

通用性:是否能全面覆盖商业业务需求;并适应不同业务的变化,灵活可拓展易用性:在使用设计系统时,设计系统是否容易被理解和使用

效  率:通过使用设计系统,是否能提升工作效率

可靠性:系统是否安全可靠、有人维护的

满意度:对使用设计系统的满意程度

在不同维度下,依照GSM模型的方法具体推导出指标和度量方法。具体实施的过程是:罗列出度量内容在维度上所期望的目标,以及表现出的信号,来推到出具体指标。

一致性和创意的平衡

像58到家产品多业务线的情况,规范的制定上一致性与独特性是共存的,例如基础的控组件需要强制约,而一些新品类需要弱制约,新品类更需要创新的活力和方式去上线探索成功率;简单来说,就是需要设定规范管辖的颗粒度。把颗粒度聚焦在最基础的元素上,而不去做框架层面的束缚,从而让协同的设计师都有发挥的余地。

比如动效规范定义了详细的骨骼和时间区间,业务设计师可以在此基础上去创作。

再比如,整个UI的配色和字体可能需要保持统一,但在一些图形,动效上可以做出亮点,让用户在整个使用体验中既是沉浸的又能有些小惊喜,规范的打破与重建一定是需要一个动态平衡的过程。如下图:QQ音乐和美团的创意加载场景。

组件化设计思维

从需求出发:将组件视为一个独立的产品,从多维度,多场景输出组件的方案和组合标准。

设计规范的统一极大缩短了设计和前端开发沟通所需的时间,开发根据成熟规范建立组件库,为后面的项目争取了空间,同时协作更加流畅,极大减少走查问题的处理时间。

设计规范也要像具体的产品一样,需要进行迭代和维护,而不是在项目做完后把设计规范整理完就扔在那落灰,然后再等到每次设计改版时全部重做,这样成本高收益低,并且几乎起不到它实际应有的作用,所以我们要不断的对规范进行落地和验证。

规范的迭代落地可以很好保证整个设计系统的秩序,让我们的设计系统更具有秩序的美感。