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

很多设计团队都会有一套比较成熟完整的交互规范,好的交互规范能够保证设计的一致性,减少沟通和开发成本,提升效率。由于笔者是设计手机系统和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

相关推荐

  • 专业的网页风格指南应该如何制作?

    文案规范
    视觉指南

    配色方案,包括每种色彩的具体参数,以及其他可接受的色调
    字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
    LOGO,包括它的样式、变体、尺寸以及位置的说明
    拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
    图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
    SEO信息,比如可选的标签和关键词
    栅格标准(主要用作网页排版和印刷)
    空间与留白方面的说明(设计的松紧度等)
    关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

    在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
    将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
    用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
    提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
    将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

    2017-05-22
  • 用户体验设计与创新怎么做?首期高端讲座,听世界知名企业用户体验设计总监为你答疑

    4月28日一大早海信学院的阶梯教室就已经满!满!都!是!人你看,现场是这样的还有这样的大家聚精会神,全神贯注地在做什么?原来,咱们首期高端讲座开讲啦!大家都知道,做高质量好产品一直是咱们集团的重点战略在高端讲座的首期,我们就邀请到了世界知名企业用户体验设计总监现任韩国某体验设计公司总裁Yoo老师给大家进行分享三个小时的讲座中,Yoo老师阐明了他对用户体验设计创新的理解他提到,大部分大企业往往就问题而直接解决问题,而忽略了去进行充分调查,...

    2018-05-05
  • 【交互设计方案】记分对比法运用

    交互设计中,为什么需要这种方法? 在交互设计工作中经常会遇到这样的问题,某些位置的设计牵扯到比较复杂的场景,要考虑的因素比较多,这些设计点往往是最容易引起争议的,因为团队成员不一定都能快速了解全部的场…

    2015-10-09
  • 用户体验 | 远大车用肺保一键清新,自由呼吸

    随着人们生活水平的不断提高,家用汽车已经成为大家的出门代步工具,开车上下班、旅游、走亲访友,基本上每天在车内都会呆上几个小时。汽车看似密闭的空气,但是由于交通的拥堵,车内空气不流通,空气质量越来越差,就会出现头晕、胸闷、咳嗽等症状,从这之后我也一直在关注着车载空气净化器设备。之前购买过一款车载净化器,但是效果不大,就一直在车内处于吃灰状态,今天我要和大家说的这款远大车用肺保FC3。是一款采用H13级别超大面积的PTFE超级过滤器,可以9...

    2018-02-02
  • 这样学Axure,效果更好,面试更容易拿高薪|1433人的经验贴

    众所周知,Axure是产品经理必备的工作软件。但为什么要学好Axure,仅仅是因为它是必备的软件?为了不错过更好的发展机会BAT对于产品工作2-3年的面试者,均要求熟练使用Axure。别等要用时,才发现自己没有!别让Axure阻碍你的高薪产品路。怎样学Axure,效果更好?想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?没人监督指导,自学还没到一个周,就想放弃按教程操作,却出不了效果,又不知错在哪里难的知识内容看着费劲,...

    2018-04-20
  • 聊聊为应用创建「一致性设计」的几个原则

    我们在创造某些体验后,需要一些理由给它们做出定义。伟大的设计是无形的,因为他们具有一致性,并让人熟悉。

    2017-05-24
  • 在设计登录注册之前,注意这10个要点能迅速提高用户体验

    有盆友问起注册/登录的体验,结合网上各路高人的分享,于是我总结了一些自己对如何在注册和登录时提高用户体验的一些发现或看法,若观点有不对的地方,望大家批评指正,欢迎大家的分享与交流~

    2017-05-26
  • 设计规范 | 详解组件控件结构体系:引导类

    本文是系列文章之详解组件控件结构体系的第三篇——引导类。enjoy~

    2017-08-04
  • 不扁平的设计:我们的世界没有一处是光滑和平整的

    “当我们在思考一个问题的时候,我们需要开放模式;但一旦我们找到一个解决方案,我们必须切换到闭合模式去实现它”

    2017-05-25