UI设计规范收藏

踏浪行歌

界面是软件与用户交互的最直接的层，界面的好坏决定用户对软件的第一印象。设计良好的界面能够引导用户自己完成相应操作，起到向导作用。界面设计主要是为了达到以下目的： 5 L# Y* |- I! `2 U; ~+ d. h 1）以用户为中心。设计由用户控制的界面，而不是界面控制用户。 7 l2 L1 h2 o6 J+ C) @2）清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解和使用。 8 T$ x8 Q" q$ O2 I+ F5 w* G- G3）拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学会软件的使用。 4）较快的响应速度。 5）简洁、美观。 ! C7 S* T& Z: v% _# Y% F+ t以下规则应该重视： $ i0 k: K- p$ t/ J1 U' V界面风格一致性 操作项 基本规范 UI色彩与字体 1）UI字体、色彩要一致 2）整体色彩搭配要融为一体，起提示作用的部分要清楚醒目 3）不可修改的字段，统一使用灰色文字显示 窗口风格 1）所有窗口最大化、最小化风格要一致 2）报错页面的风格一致，最好有统一的报错页面 3）类似功能的窗口打开的风格要一致 4）相同功能在不同模块的名称要一致 5）子窗体应尽量在显示在主窗体的左上或居中放置 6）弹出式窗口尽量在不借助滚动条的情况下显示所有内容 7）窗体最小化/最大化时，控件也要随着窗体而缩放 布局 1）窗体控件布局和间距尽量与Windows标准保持一致 2）尽量采用Dock和锚点来让布局合理 3）尽量让窗体中显示大部分常用功能 菜单深度 1）菜单深度一般不要超过三层 2）菜单层次太多时应给出返回主窗口、主分支的快捷链接。 按钮 1）按钮风格相同，大小相似，字体一致 2）无效按钮要屏蔽 控件 1）各复选框和选项框按选择几率的高低而先后排列 2）复选框和选项框要有默认选项，并支持Tab选择 3）界面空间较小时使用下拉框而不用选择框 4）选项数较少时使用选项框，相反使用下拉列表框 文本框输入 操作项 基本规范 必输项 1）必输项中不可为空，不可输入空格 2）必输项给出必输项标识（*） 字段长度 超过数据库规定长度时不允许输入 格式校验 1）身份证号、E-MAIL、邮箱等特定字段的格式要符合需求的规定 日期格式 1）日期显示格式一致，如 ：yyyy-mm-dd 2）使用日期控件，尽量不是手工录入 特殊字符 1）输入区域输入特殊字符，插入数据库时不出错或提示不允许输入特殊字符。特殊字符包括：'"=~$%^%￥&#@等 英文输入 英文输入不区分大小写，不可输入汉字、数字及特殊字符 数值字段 只能输入+ - 0~9及功能键(BackSpace 光标) 字符字段 1）如果支持日韩文字，则要判断全角假名/半角假名 单行文本框/多行文本框 1) 长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识 附件 1）可正常添加符合格式的附件 2）附件可正常打开和保存，附件名较长时可正常操作 3）直接输入错误的附件地址，保存时应给出提示信息 4）附件打开/保存到本地时，文件名要显示原文件文件名 密码输入 1）需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的可输入长度 2）程序中应给出文字说明密码的可输入长度 用户界面行为 操作项 基本规范 鼠标 1）鼠标为不可点击状态时显示箭头，可点击状态显示手型；系统忙时显示沙漏形状 光标定位 1）打开新增（修改）页面时，光标初始定位在第一个待输入的文本区 2）因输入不正确提示用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入 3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点 4）可写控件检测到非法输入后应给出说明并能自动获得焦点 TAB键 1）界面支持键盘自动浏览按钮功能。即TAB自动切换功能 2）Tab键的顺序与控件排列顺序要一致，一般情况下总体从上到下，同时行间从左到右的方式