如何设计一份专业且有价值的交互规范

很多设计团队都会有一套比较成熟完整的交互规范,好的交互规范能够保证设计的一致性,减少沟通和开发成本,提升效率。由于笔者是设计手机系统和App相关的,所以简单的和大家聊下如何设计交互规范。


很多设计团队都会有一套比较成熟完整的交互规范,好的交互规范能够保证设计的一致性,减少沟通和开发成本,提升效率。由于笔者是设计手机系统和App相关的,所以简单的和大家聊下如何设计交互规范。

如何设计一份专业且有价值的交互规范

设计前的准备工作:

1.认真阅读IOS和Android L的设计规范,做到心中有数 。

2.组织小组收集现有的控件类型(通过IOS、Android L和现有的项目App),并进行统计与整理。

3.对不同的控件分组收集该类型的样式,然后小组讨论,找出该控件的规律和注意事项。

完成上述工作后,开始输出交互规范文档。

主体部分:

一份好的交互规范文档包含:封面(标题、版本号、创建人、联系方式)、前言(设计原则、原则说明等)、版本信息(修改时间、修改人、版本号、修改章节、修改内容、修改原因)、目录、控件说明(标题、描述、组成、位置(可选)、使用场景、注意事项)。

举例说明:

封面、前言、版本信息、目录等相关内容在这里就不一一展开说明了,只针对控件主体部分——控件说明 进行举例。由于微信是大家常用的App,所以选取微信作为范例(如有版权问题,请及时告知),抛砖引玉。

 Tabbar (*注意大小写、注意和代码中的控件名称保持一致)

描述:

Tabbar是IOS和Android L中最常见的控件之一,常用于整个App的主导航,也是扩展性最好的框架。能直观的呈现页面的分类与层级。对于单功能的属性选择上也会使用(目前在微信里有“扫一扫”和“摇一摇”,且多用在界面元素很简单的页面上(有点类似ios里的分段选择器)。

主导航:

如何设计一份专业且有价值的交互规范

IOS(左图)和Android(右图),早期IOS和Android有区分,但是目前微信Android版本主框架按照IOS的规范来设计,所以目前的微信界面暂时只有左图这一种情况。

单功能属性选择

如何设计一份专业且有价值的交互规范

特点:

功能可见性、操作直接。用户能够很直观了解整个App的所有大的功能分类。

组成:

1.Tabbar一般是由一组(通常不超过5个)相同层级的Tab组成。应保证当前界面直接从属某个Tab,对于用户当前所在的Tab需要通过特定的视觉样式或状态加以区分。

2.一般而言,Tab中会包含图标和文字描述。

位置:

在IOS里:Tabbar固定在屏幕底部,通过点击切换不同的tab。

在Android  L里:Tabbar位于Navigation bar下方,通过左右滑动或点击切换不同的Tab。

注意事项:

  • Tab的内容是否属于同一层级、是否相互独立?如果不是,建议不要使用tabbar布局,采用其他的布局方式。
  • 当Tab的数量超过5个,应考虑设计是否合理,是否需要采用其他的布局方式。
  • Tab的内容是否有优先级别?如果有,需设定默认的Tab。
  • 是否需要记住用户的选择和操作。
  • 在设计时,需要考虑Tab中的是否会出现消息提示、提示类型。
  • 注意Tab的中文文字描述字符长度不要超过3个字符,且描述文字长度尽量保持一致,(*英文版本的字符长度和大小写规则也需要考虑)。

写在最后的话

  • 文档尽量图文并茂,能用图的尽量用图,少用文字。
  • 交互规范1.0在整个团队里使用一段时间后,你会发现团队在使用过程中存在或多或少的问题,这个时候可以通过各类的调研方法(比如:问卷调查、用户访谈等)收集团队意见和反馈。根据收集的意见和反馈,设计团队进行内部讨论和对比IOS规范和Android L规范,提供解决方案,并对规范文档进行修改与调整。
  • 文档需不定期补充和更新,每次更新及时提醒团队成员,避免成员使用旧的版本。
  • 文档不要太在意形式。毕竟每个项目团队的工作方式不一样,针对当前环境的方法和文档才是有价值的。

 

本文由 @huanying2008 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25515/

(0)
CatherineCatherine
上一篇 2017-05-11 13:59
下一篇 2017-05-11 17:06

相关推荐

  • AR交互设计

    AR增强现实通过实时的在现实环境中渲染虚拟数字信息,通过现实和虚拟的结合来帮助用户完成某项任务和活动。AR中的虚拟数字信息通过与现实环境以及用户的实时互动来向用户传递有价值的信息。相比“传统的”2D层面的交互(手机app,web等),AR可支持的是更加丰富的三维层面的交互方式;并且这种方式不再仅限于主动式的交互(点击,滑动)方式,它还包括用户行为的被动触发。DHL的Vision
    Picking
    拣货系统使用了增强现实技术来帮助仓储拣...

    2018-04-12
  • APP游戏分发模块一级交互设计

    看看阿西如何做原型设计,阿西手把手教大家设计原型。

    交互设计 2014-09-11
  • 机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 1 部分: 推荐引擎初探

    机器学习相关——协同过滤,探索推荐引擎内部的秘密,第 1 部分: 推荐引擎初探 随着 Web 技术的发展,使得内容的创建和分享变得越来越容易。每天都有大量的图片、博客、视频发布到网上。信息的极度爆炸使得人们找到他…

    2015-12-22
  • 不懂这几个交互原则,你一定是假的UED设计师

    如果你对这个题目很陌生,那请赶紧登上这辆末班车,来不及解释了。在日常工作中,我们总是会遇到产品或者开发对你发问“这个按钮为什么要放在这里”,“这里显示的信息条目为什么只剩这几个”blablabla之类。不管是为了在对接流程中更加有理有据,也为了使自己的设计更人性更好用,了解这几条基本原则,也是非常必要的。除非有更好的选择,否则就遵从标准。交互设计之父 Alan Cooper最为人熟知的或许就是这句“除非有更好的选择,否则就遵从标准”了,...

    2018-03-15
  • 老外看中国的移动App设计精髓-4 定位、下载、广告

    摘要:本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有…

    2014-12-11
  • 产品经理神器 Axure 安装、激活和汉化教程

    摘要:Axure 是产品经理必会的一个工具,本文详细讲解 Axure 的下载、安装、激活和汉化等流程,方便大家学习 Axure 。作为一个合格的产品经理,几乎没有人不会使用 Axure 的,事实上,熟练使用 Axure 也成为了一个产品经理的基本功。为方便新手产品经理部署 Axure 环境,方便学习和使用,下面我来详细说明涉及部署 Axure 软件的各个步骤。下载关于 Axure 软件的下载,这里不多说,建议大家去官方网站进行下载,不要...

    2018-04-25
  • 气定神闲的珍珠

    快快点击关注人言风华绝代太难得,然而,一个人终日沉浸在王者农药里碌碌无为,几时能被时光打磨成气定神闲的珍珠?但,珍珠是天然的馈赠,美,则是一种修炼。这世界上的一切精致动人,都是狠狠的被修理出来的。软了不行,硬了也不行,得软硬兼施。就像选专业一样。就像选择计算机软件技术专业一样。你想让自己活得精致,过得洒脱,不对自己狠一点,社会对你狠一点。自己的狠,是由内而外的质变。社会的狠,是苟且偷生。自己的狠,是内软外硬,由环境的硬塑造内心你的软,打...

    2018-03-15
  • 设计师的必备技能!你需要学会设计有意义的动效

    编者按:关于动效设计,我们探讨过很多次。直到现在,我们越来越清楚地意识到,动效设计已 经无处不在,已经成为了设计师们必须掌控的一个重要技能。参加过今年的Google I/O大会之后,设计师Paul Stamatiou 也充分…

    2014-12-03
  • 千万级用户的视频体验,我们是这么做的

    如今app的更新迭代速度很快,因此无论在视觉审美还是交互功能上都有新的趋势和风格。乐视视频原有的ui设计风格已经无法跟上目标客户群的审美变化,且在功能上较难满足用户预期,因此需要在整体视觉和产品功能上进行相应的美化和完善,使我们的视频产品无论从视觉还是功能上都能够在给予老用户新鲜感的同时吸引更多的目标用户。

    2017-05-26
  • 有用户体验落地方法,才能让销售额增长

    图片设计 | 宗宗;编辑 | 海悦如果你觉得本期学霸有链接价值,请在【学霸十三妹】微信公众号后台回复"黄胜山"即可获取学霸联系方式。在物品富足时代,如何吸引用户的青睐,抓住用户的眼球,是很多商家不得不探索的课题。今天,在上海洽客in,学霸十三妹请来了学霸黄胜山,专注研究用户体验十年的老司机,带你揭秘用户体验那点事!黄胜山:唐硕体验创新咨询 管理合伙人,浙江大学心理学硕士,上海交大MBA和混沌商学院,14年用户体验咨询和设计经验,服务客户...

    2018-03-21