美文网首页
交互规范两三事

交互规范两三事

作者: 同时天涯设计狗 | 来源:发表于2018-05-30 13:35 被阅读136次

为了保证通用一致,提高效率,解放重复工作,需要规范。规范能提升的不仅是设计师的效率,还有产品,运营,前端等。有很多优秀的规范例子,如Material Design,Ant Design,UWP,Apple Developer等,它们都有灵活可拓展,标准性和系统性的特点,成为设计规范时的参考对象。

那么从零到一做交互规范应该按照什么样的步骤呢?

可以把规范当成一个产品来做,从小步骤到大步骤,从小任务到大任务,不断拆解,再组合,主要包括下面几步。

一.明确需求

首先要确定交互规范的受众,产品线上的视觉,交互,前端开发,运营,产品经理等都可能与交互规范有接触。例如视觉可以根据交互规范做出相应组件流程样式,下次再设计时直接将现成的组件拖过来使用;前端写页面时遇到不清楚的通用组件时,直接翻规范就能解决;产品经理可根据交互规范初步表达自己的想法...因此,规范要尽可能覆盖交互设计师的使用场景(可通过迭代实现),可以产出交互模板、组件库、可使用的源文件、线上手册等产品,保证全站产品相似或相同的流程体验一致,减少用户认知,操作负荷。

二.指导思想

就像宣传口号指导公司员工行为,校训指导教师学生行为一样,交互规范需要有需要遵循的基本原则或设计语言。例如Ant Design的三大特性,十条设计原则等。

这些设计指导思想就像一把藏在设计师心中的尺子,在设计中和设计后检验是否一致,也算是给设计师的一把“行为标准”的称。

三.规范内容

首先要明确这个规范是为哪个或者哪几个平台(模块)所做;其次确定规范属于什么类型,比如是基础型,还是复合型;最后才是整理组件。

整理组件时可以统计相关产品通用的模块或者组件,这就需要设计师非常了解网站的哥哥功能,也可以调研网上已有的成熟的规范网站,收集素材作为规范的内容池,选取通用的价值相对高的部分进行制作。主要包括组件的定义,交互状态,交互流程,使用场景等,必要时可有建议和禁止,错误/建议使用方法举例,例如下图:

另外需要强调,一定要明确哪些部分的规范是必须执行(必行),不接受随意更改,必须由特定的人员统一更改上线(例如对齐栅格,适配策略,颜色等);若遇到规范里未包含的部分应该如何处理,例如可以自行设计也可根据基础控件进行组合,最终由规范负责人审核评估,上线稳定后可并入总体规范等处理方法。

四.协同整合

规范的整合需要各个模块的负责人相互协同,相互周知改动,以保证规范的统一性。最好是在每次改动是留下改动记录-修订记录,包括修订人,联系方式,修订内容,以便后续责任到人,对于大的设计规范变动则需要通知所有人。最终按照统一的内容结构,排版方式,输出完整的规范。

五.持续迭代

在设计任何产品时都不可能一次到达完美,在做规范的时候可以有优先级顺序,比如基础型的放在第一版,就例如产品经理经常说的:先把流程跑通再说。就像产品需要一次又一次的迭代做起来一样。可以从这些方面迭代:

1.模块/组件自身。规范在使用的过程中会发现一些内容不够通用,需要变动以覆盖更多的使用场景;不够好用,发现了更好的解决方法;增加了新的使用场景等。

2.增加模块。在新增的业务中,目前的规范不够用,那就需要新增模块/组件。

规范完成后推广使用也是一项磨人的活。每次规范的更新需要去推动产品经理和开发去调整,在规范的迭代和产品的迭代/功能上线之间肯定存在各种冲突,例如更新了规范但尚未推动成功,在设计新功能时是按照新规范呢还是先按照旧的规范设计最后统一改动规范以覆盖;新功能不断,开发和产品经理没有时间(有心无力)进行迭代规范等。

很有可能规范设计师花了很大的力气做出来,但最终执行效果依然不理想。大概是因为:

1.每个设计师/平台有自己的设计方法,按照新的规范来做不能适应

2.某一点/些设计规范可能设计师意见不相同有争议,以至于他们并不想使用

3.推动跟进成本很大,开发不愿花费时间去统一

各种各样的情况都有可能发生,设计师一定要心中有个执行规划,一定要和团队其他人密切沟通协调,与其它设计师沟通规范,确保规范无异议,与开发/产品经理沟通实现成本和排期,并不断地跟进,不能到最后发现只是设计师一厢情愿地自嗨。

虽然设计规范形成很难,设计规范推动使用更难,但规范的重要性不言而喻,不能因为困难就失去信心,而需要深思熟虑,为平台树立一杆统一的大旗。

相关文章

  • 交互规范两三事

    为了保证通用一致,提高效率,解放重复工作,需要规范。规范能提升的不仅是设计师的效率,还有产品,运营,前端等。有很多...

  • 关于设计规范

    从不同的维度考虑,设计规范有不同的分类。 从纵向考虑,设计规范可分为交互规范和视觉规范。交互规范一般要先于视觉规范...

  • 交互规范

    兼容性 1、自适应1280*768px及以上的分辨率 默认窗口设置下,不应出现水平滚动条,尽量避免出现垂直滚动条(...

  • Web前端工程化

    规范化 工程结构规范 编码格式规范 前后端接口规范 文档书写规范 Git分支管理规范 Commit描述规范 交互设...

  • 交互设计规范那点事

    为什么要做设计规范? 保持平台统一性 设计规范相当于是给设计师设定一个限制,在这个限制的范围内进行发挥,让整个设计...

  • 交互规范说明

    1、单位:历程、时间、金额。 2、网络异常处理:网络异常时、网络切换时、网络中断等情况下。 3、dialog和to...

  • 读书打卡第二期—第16天

    259-275 交互规范的制作流程:明确目标;确定利益关系;制定规范内容纲领;提炼设计语言;提供规范的规范;团队协...

  • 强大的CSS:placeholder-shown伪类实现Mate

    一、Material Design规范中占位符交互效果 Material Design风格占位符交互效果官方示意见...

  • 《交互微专业part1》学习笔记

    本章包括3小节:交互设计概述、设计工具Axure、设计规范与设计模式 1、交互设计概述 1.1、走进交互设计 交互...

  • JS与Native交互规范示例

    JS与Native交互规范示例 标签: JS JavaScript Native 本文主要用于规范JS与Nativ...

网友评论

      本文标题:交互规范两三事

      本文链接:https://www.haomeiwen.com/subject/tsbtsftx.html