界面设计规范.ppt

界面设计规范
第一页，共六十页。
软件界面规范的重要性及其目的
用户体验为何如此重要
Web规范体系介绍
界面设计开发流程
应该遵循的基本原则
界面设计规范
第二页，共六十页。
软件界面规范的重要性及其目的
产品设计通成的全部结果
用户体验很重要，最大的理由：它对你的用户很重要。
协调一致，直观明了，甚至让人愉快的体验
-----“一次”每件事都按照正确的方式在工作的体验。
第九页，共六十页。
软件界面规范的重要性及其目的
用户体验为何如此重要
Web规范体系介绍
界面设计开发流程
应该遵循的基本原则
界面设计规范
第十页，共六十页。
产品/项目约定
界面框架规范
基础界面元素规范
产品VI LOGO
系统框架视觉风格
根据业务需求约定交互模式、页面流
总体界面框架结构
界面模式灵活
优化多语言、多浏览器、换肤、组件库、扩展性等问题
界面组件及其组合
基础应用模板
Web标准编码，优化结构，代码可重用性强
Web规范体系介绍
第十一页，共六十页。
软件界面规范的重要性及其目的
用户体验为何如此重要
Web规范体系介绍
界面设计开发流程
应该遵循的基本原则
界面设计规范
第十二页，共六十页。
生命周期
软件界面设计实现过程
相关活动
需求
PM:
需求规划讨论
P-spec编写
Ui草图提供
根据p-spec对界面工作成果审核确认
PM:
根据P-spec对界面工作成果审核确认
RD:
编写pdd
设计
开发
测试
PM:根据P-spec修正解释需求
RD: 编码
PM:解释需求
QA:测试
RD:修正Bug
界面维护支持
框架、页面模板
HTML+CSS修正
各HTML页面修正
及CSS技术支持
DHTML组件
HTML+CSS修正
界面规划
（需求）
需求理解
建立界面模型
界面设计
主界面、登录页
GUI设计
主要模板页
GUI设计
界面实现（编码）
框架、页面模板
HTML+CSS实现
根据模板填充制
作各HTML页面
部分DHTML组件
的HTML+CSS提供
界面设计制作
Input
From PM
-spec

经PM确认


意原型图片
经PM确认
主要界面高保真
GUI设计图
经PM确认
模板页html+css
各原型页面html
组件html+css
界面设计开发流程
第十三页，共六十页。
软件界面规范的重要性及其目的
用户体验为何如此重要
Web规范体系介绍
界面设计开发流程
应该遵循的基本原则
界面设计规范
第十四页，共六十页。
应该遵循的基本原则
显示信息一致性的原则
以用户为主导原则
易用性原则
鼠标与键盘一致性原则
系统响应时间原则
出错信息和警告原则
信息显示原则
数据输入原则
合理性原则
美观与协调性原则
第十五页，共六十页。
显示信息一致性的原则
无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。界面直观、对用户透明：用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用应用系统。
这样得到的好处：
用户使用起来能够建立起精确的心里模型，使用熟练了一个系统界面后，切换到另外一个系统界面能够很轻松的推测出各种功能。
降低培训、支持成本，支持人员不用费力逐个指导。
给用户统一感觉，不觉得混乱，心情愉快，支持度增加。
应该遵循的基本原则
第十六页，共六十页。
明确用户是所有系统处理的核心，不应该有应用程序来决定处理过程，所以用户界面应当由用户来控制应如何工作、如何响应，而不是由开发者按自己的意愿把操作流程强加给用户。
应该遵循的基本原则
以用户为主导的原则
第十七页，共六十页。
用户不用查阅帮助就能知道该界面的功能并进行相关正确的操作。
应该遵循的基本原则
完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。
完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。
按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。
界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能。
界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。
易用性细则：
易用性原则
第十八页，共六十页。
应该遵循的基本原则
易用性细则：
分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+T