UI 界面的模版化设计

一、设计模版的好处

使用模板的好处：第一对多个角色使用统一的设计描述，方便大家进行沟通，避免产生歧义；第二使用模板方式，降低了设计难度，而且可以进行并行设计，提供设计效率；第三是方便测试，模板中已经描述的客户使用的详细过程；第四是方便程序员理解用户的使用场景，全面考虑设计；

 

二、模版样式

【界面功能描述】

主要描述界面要完成的人机交互的功能，有多少功能在UI交互界面上呈现，有多少步骤需要不同的交互界面来完成，建议一个UI交互界面实现功能不超过三个。将UI界面分成不同的功能区进行功能的隔离，方式功能混杂在一起造成使用者的困惑，功能区布局一旦建立，所有的UI交互界面都应该按相同的功能分区进行展示，而不应有功能区的随意更换。

【内容】描述界面要显示的内容，人机交互的信息

【界面示意图 】通过 界面图片表示界面

【界面屏幕布局说明】详细说明界面每一部分的功能

【操作提示帮助信息】不容易操作和易出错的界面都需要有相关的帮助信息，减轻使用者使用的不便，增强体验

【操作说明】

将所有的操作过程描述出来，操作反应是什么，用户所有的操作进行穷尽说明，不能有遗漏。UI交互设计过程中，此过程是最重要的设计，用户的体验好和坏都和此环节有直接的关联，也是设计质量的直接反应；

【界面激活方式】UI界面的进入的入口，有可能有多个入口

【界面关闭方式】退出界面或转入别的UI界面，有可能是UI  操作关闭，也有可能是业务流程关闭。

【输入按键说明】帮助信息

【相关流程说明】主要是UI驱动的后台业务执行的说明，主要是控制流的说明

【相关数据说明】UI驱动的数据交换，主要是数据流的说明

 

三、举例说明

3.1 UI结构图