UI设计规范文件.doc

UI设计规范 UI设计目标 统一和规范公司产品提高的用户体验。 简洁，易用，日常习惯，灵活，使UI设计的流程规范化，保证UI设计流程的可操作性。 UI设计理念 专注 界面设计 框架布局 网页设计的尺寸标准 面向1024-768显示器分辨率开发的网页尺寸，宽910px 面向800-600显示器分辨率开发的网页尺寸，宽778px 2、网页设计中的画布设定 尤其注意分辨率为 72像素/英寸 信息系统常用的布局日常办公其他操作）、 监控进行其他）、 大屏幕显示显示、多屏显示） 于工业软件软件的软件倾向于黄绿。 的主色调选用蓝色调比较的情况下，晚上，用暗色调）再选一种蓝色相对比较公正，适合的层次也相对广泛一点。 蓝色是很好很强大的色调呢~① 接受度高：蓝色是超过世界人口的一半最喜欢的颜色（它可用于任何主题的网站）② 蓝色的颜色象征如深度，稳定，信任，忠诚，智慧，信心，智力素质，信仰，真理，天堂，安宁，平静，平静、稳定，信用、信赖（源于海洋和天空）③ 权威、权利的颜色④ 理性：蓝色的长期作为企业颜色，暗蓝…与智力有关(科技)⑤ 较适合的行业网站：科技，医疗产品，清洁，空气，天空，水，海洋和汽车……再细分~深蓝：强大/权威 浅蓝（明度）：宁静/健康淡蓝（纯度）：微妙/优雅皇家蓝：如其名 ，规范 中文字体 尤其注意“设置消除锯齿的方法”选项 要选择 “无” 宋体是最常用的网页字体，12px是中文操作系统可以表现的最小的字体，内容文字大小一般用两种，12px或14px 文字的颜色要便于阅读 英文字体 其中英文字体最小表现为10px 字 verdana 字体是大多数网页使用的英文字体，比起arial 字体更美观和均衡。 font-family:verdana,tahoma,helvetica，样式； 有链接的文字应有所提示，如下划线，文字色彩的变化等，行距； 图片、 图片一般采用png或者gif格式，jpg，同时图片必须进行alt属性的赋值； 图片文件大小应小于30KB; 图标一般采用16*16,24*24,32*32,48*48这四种尺寸，列表表头、按钮左侧的图标一般采用16*16，页头帮助、退出按钮图标一般采用32*32，页面功能图标一般采用48*48，logo图标(不同集团有不同的logo)需要依据尺寸特征进行缩放调整，调整后尽量满足48*48。 统一的色调、对比度、色阶，以及图片风格 底图应该融于底图，使用浅色, 低对比，尽量少的使用颜色。 图标、图像应该很清晰的表达出意思，遵循常用标准，或者用户机器容易联想的到物件，绝对不允许画出默认奇妙的图案。  公司联系元素常用的页面元素超链接智能列表菜单、 导航条状态显示页面 页面 主页 页头（使用单位logo、系统名称、帮助图标、最大化最小化退出图标；） 导航栏、 菜单栏、 内容区、 状态栏， 如下图所示: 系统框架布局需要做到： 页头区域信息需包含： 导航区信息需包含：浏览页面的具体位置(页面的深度不能超过3级)、登录用户名、系统当前时间； 菜单栏应以功能模块划分，以树状层次组织，菜单的深度不应超过3级； 状态栏应显示系统的版本信息，以及我公司服务电话； 内容区域的布局需要结合具体的应用系统，先明白客户需要显示的数据，再考虑布局的方式； 用户最关注的内容必须在第一屏呈现 交互设计 本文中的交互设计规范具体的业务需求无关，是通用的交互设计规范。如具体的应用交互设计满足需求外，要遵循第、章节原则和设计理念。操作 增删改登录事项数据录入的一致性检查） 排序方式 快捷键 enter 、esc、tab 右键菜单 刷新 鼠标触发事件 鼠标跟随鼠标光标样式统一，尽量使用系统标准，杜绝出现重复的情况，例如某些软件中一个手的形状就有4钟不同的样子 缩放与不可缩放，自适应 选择方式，多选，选择状态 键盘操作 TAB键 ENTER键 ESC退出等 错误反馈 错误页面的一般处理方法 等待提示、提示 保存登陆用户名密码 光标提示 响应时间 的响应时间 进度条 操作日志 操作时间 用户 事件 设计详细规范 产品包装 产品LOGO ioc图标 软件打开引导页（等待条，加载条） 登陆界面（背景图及颜色，结合产品特点，用户名，密码，验证字符，光标及光标背景色，确认登陆按钮） 进入首页 色调 布局 分辨率 框架 按钮 导航 7.内容页 字体 颜色，提示，，显8.错误页跳转 10．刷新时间 显示 格式，大小 13.样式 效果 页 页 2