UI

最新推荐文章于 2024-06-21 16:57:57 发布

limitever

最新推荐文章于 2024-06-21 16:57:57 发布

阅读量650

点赞数

文章标签： class table button login header user

本文链接：https://blog.csdn.net/limitever/article/details/1560715

版权

目录

5.1 Cardinal - UI Checklist & Specification 12

5.2 CSS样式说明. 14

详细介绍用户界面原型中的细节和展现方式，为更好地使用本软件系统提供指导说明。

用户，项目组开发人员（IT），需求人员（BA）以及测试人员（TS）。

以NBU模块操作为例，流程图如下：

a b c d e f

a. 公司logo

b. 登录按钮

c. 取消按钮

d. 登录框

e. 系统欢迎词

f. 版权说明

a b c d e f g

a. 公司logo

b. 主菜单（箭头表示有下级菜单）

c. 二级菜单

d. 三级菜单，点击进入相应模块

e. 配图

f. 版权说明

g. 用户信息

V3 项目的JSP页面分为上、中、下三部分，其中中间部分为主文件，head和bottom部分是Include文件，结构图如下：

页面实际显示效果：

Main

Head

bottom

页面宽度基本以百分比为单位，特殊要求会以像素为单位设置固定大小，前者可申缩，以获取在不同分辨率下的最佳效果。

页面采用缩进式排列，由四种不同宽度的表格（100％、98％、95％、97％）顺次嵌套而成。

100％

98％

97％

字体样式（字体大小： 12pt ; color:#000000; 加粗）

a b c d

a. 大标题

b. 小标题

c. 二级小标题

d. 分割线

字体样式（字体大小： 10pt ; color:#000000; 加粗）

字体样式（字体大小： 9pt ; color:#000000; 加粗）

分割线用于区分各标题及内容，所在区域表格宽度为98%，一般在四种情况下需要用横线来分割：

u 紧随大标题之后，划分大标题与小标题；

u 小标题与小标题之间；

u 在小标题内容区内，划分二级小标题与二级小标题；

u 页面最终结束按钮之上，划分最终按钮与内容。

系统采用表格来固定页面的显示布局。在V3项目中分英文系统和中文系统，因此在排版中有：中文冒号对齐，英文左对齐，数字小数点对齐的差异。

中文系统

排版冒号对齐

英文系统

排版左对齐

在字段名为一行两个，表格分为四列情况下，效果图：

在字段名为一行三个，表格分为六列情况下，效果图：

数据表格分表头和数据行两部分。当数据项超过12行时，会以翻页形式表现。

数据表格宽度100%，套在宽度为95%的table中。

100％

a b c d e f

a. 表格字段表头

b. 有链接的数据项（未点击状态）（字体大小： 9pt ; color:#0000FF）

c. 有链接的数据项（点击后状态）（字体大小： 9pt ; color:#800080）

d. 无链接的数据项（字体大小： 9pt ; color:#000000）

e. 表格数据行

f. 翻页

翻页显示如下：

a b

a. 查找到记录的总数

b. 当前页数

4.6.1 V2转V3情况

数据表格宽度采用class=”table 5” 控制。

首行tr：class=”table 7a ”

其他tr：class=”table 7”

a. 提示信息（字体大小： 10pt ; color:#FF0000；加粗）

页面各控件在页面中的显示，遵循横平竖直的外观：

a b c d

a. 系统信息显示（字体大小： 9pt ; color:#2E3192）

b. 输入框（字体大小： 9pt ; color:#000000）

c. 只读输入框（字体大小： 9pt ; color:#2E3192）

d. 不可用输入框（字体大小： 9pt ; color:#808080）

默认显示宽度：

只有一个输入框时，最大字符宽度为26；

有两个输入框时，总的最大字符宽度为22；

有三个输入框时，总的最大字符宽度为19；

有四个输入框时，总的最大字符宽度为16。

注：以上描述是以一行四列为基础，如果超出以上字符宽度，一般单独放置一行，保持界面整齐。

输入框必填项

“*”加在输入框之后：

日期输入框

日期输入框遵循如下样式（字符宽度15）：

按钮在页面中：

1. 位置固定，一种含义的按钮出现在所有的页面中的位置固定。

2. 按钮名称统一。

3. 按钮与按钮之间的间距一致，统一处理，按钮居中放置。

图例1：

图例2：

货币单位跟在字段之后：

a b c d e f

a. Tab条

b. 多选框

c. 下拉框

d. 单选框

e. 多行输入框

f. 文件域

页面底部的版权说明使用统一的格式：

页面代码为：

<a href="http://www.ebaotech.com" class="cr">eBaoTech Corporation</a>

</td>

Topic	Item	Default
Login & Menu Page
Login page	Company / project logo
	other images
	other text
	URL
	Login – User ID / Name
	User Info
	Bottom bar Copyright

Content Page
Language	User interface, application error messages, reports, manuals	font: 9pt font-family: Verdana
Color	Background	#F 2F 5FA
	Table header	#D1E 1F 2
	Table row	#ECECEC
	Link	#0000FF text-decoration: underline
	Link visited	#800080 text-decoration: underline
	Link hover	#0000FF text-decoration: underline

Fonts	In general	font-size: 9pt font-family: Verdana
	Title	font-size: 12pt font-family: Verdana font-weight:bold
	Menu item	font: 10pt font-family: Verdana font-weight: bold color: #000000
	Field description	font: 9pt font-family: Verdana color: #000000
	Field content	font: 9pt font-family: Verdana color: #000000
	Messages	font: 9pt font-family: Verdana color: #000000

Data Table	Table header
	Table row
	Button

Page Skip

Component	Edit field
	Number field
	Code field
	Pull down list
	Field description
	Password
	Radio button
	Check box

Data Format	Date	DD/MM/YYYY
	Time	HH24:MM:SS
	Number	9,999,999 9.999999
	Amount	9,999,999.99
	Phone number	53755178
	Post code	200001
	User ID / Name	Name

Button	Submit
	Cancel
	Close
	Search
	Action buttons
	Enabled / disabled

Tab bar	Style

Messages	Error
	Success

Class	Description
Class=”font 3”	页面头部属性条字体定义
Class=”font 4”	二级小标题
Class=”font 5”	小标题
Class=”font 6”	大标题
Class=”font 7”	系统只读文字
Class=”font 8”	（警告）提示内容
Class=”button”	按钮样式
Class=”textfiled”	输入框样式
Class=”textfiled_ro”	输入框只读样式
Class=”multi-textfiled”	多行输入框样式
Class=”select”	下拉框样式
Class=”td 1”	页面版权条背景颜色定义
Class=”td 3”	页面头部属性条背景颜色定义
Class=”td 4”	数据列表字段名所在tr样式
Class=”td 5”	数据列表数据值所在tr样式
Class=”td 7”	TAB条当前项背景定义
Class=”td 8”	TAB条定义
Class=”nav”	帮助和退出的链接样式
Class=”link 1”	TAB条中未选中字段链接样式