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