关爱通UI规范

2010-09-30 来源：wuxingdev.cn

字体规范
按钮、翻页、标签规范
icon使用规范
日期&搜索标准
提示与操作反馈
各种修改总结&规范
表单规范
表格内容规范
弹出层&浮动层规范
页面布局(一栏)
页面布局(二栏/左小右大)
页面布局(二栏/左大右小)
其它布局(应用文件夹内部)

字体大小、颜色使用规范

字体颜色类：	#333333	#5E667B	#999999	#FF0000	#FF6600
使用范围：	默认字体	常用字体	提示性文字	* / 错误提示	醒目提醒文字
css：	class="font"	class="C-font"	class="gray"	class="red"	class="orange"

字体大小类：	10px 2010-03-15	12px	14px 标题	16px 文章标题
使用范围：	时间	默认字体大小	导航/操作/标题	文章标题 / 论坛标题
css：	class="gray-10"		<div>内部	<div>内部
	进入范例		进入范例	进入范例

特殊字符：	[]	\|	>	>>	<<
使用范围：	[操作] 站内信[]	首页 \| 个人中心	首页 > 设置	更多>> 进入>>	<< 返回

超级链接类：	操作	[操作]	链接	回复引用
使用范围：	表内操作/面包屑导航	表外操作/修改/删除/选择	查看/返回/新增..	不太重要的链接
css：	class="blue"	class="blue"	class="blueLine"	class="C-fontLine"
	进入范例	进入范例	进入范例	进入范例
	需要注意的：所有的链接文字不带下划线的蓝色链接： 1、面包屑导航能点击的路径，已经整合到breadCrumb 样式中，不需要再用class="blue" 2、Table结构中所有能点击的链接及操作，全部都要带上class="blue" 3、带下划线的蓝色链接：查看、链接、添加栏目/分类等。

按钮、翻页、标签使用规范

使用范围

css

html

导航：

整站导航

class="navBut"

链接按钮：	有明确导向的	class="button_1"	<a href="#" class="button_1"><span>保存</span></a>
	无明确导向/不太重要	class="button_2"	<a href="#" class="button_2"><span>取消</span></a>
	按钮不可点	class="buttonGray"	<a href="#" class="buttonGray"><span>返回</span></a>
	搜索按钮	class="buttonSer"	<a href="#" class="buttonSer"><span>搜索</span></a>
	功能性/强调、醒目	class="buttonMgr"	<a href="#" class="buttonMgr"><span>关闭</span></a>
	功能性并带有下拉菜单	class="buttonMgr"	进入范例

链接按钮：			class="button_S1"	<a href="#" class="button_S1"><span>开通我的员工秀</span></a>
		需要特别显眼	class="button_4"	<a href="#" class="button_4"><span>点击进入礼品兑换区</span></a>

链接按钮：	添加	class="button_add"	<a href="#" class="button_add"><span>添加新员工</span></a>
	修改	class="button_modify"	<a href="#" class="button_modify"><span>修改员工信息</span></a>
	积分	class="button_jifen"	<a href="#" class="button_jifen"><span>积分充值</span></a>

Input按钮：	添加某某，并有操作引导	class="Add"	<input class="Add" value="添加附件" />
需要取消，新的不再需要，修改以前的应用记得要改掉	关联某某，并有操作引导	class="Relate"	<input class="Relate" value="关联关键字" />
需要取消，新的不再需要，修改以前的应用记得要改掉	选择已经上传的图片	class="S_pic"	<input class="S_pic" value="选择图片" />

翻页与按钮：	翻页单独存在	class="page"	<div class="page"> </div>
	按钮与翻页同时存在	class="divButton_2"	<div class="page"> </div><div class="divButton_2"> </div>
	按钮层单独存在,偏中间	class="divButton_1"	<div class="divButton_1"> </div>
	按钮层单独存在,偏中间	class="divButton_5"	<div class="divButton_5"> </div>
	按钮层单独存在,居中	class="divButton_4"	<div class="divButton_5"> </div>
	按钮层单独存在,居左	class="divButton_3"	<div class="divButton_3"> </div>

面包屑导航：		class="breadCrumb"	<div class="breadCrumb">当前位置：<a href="#">BBS</a>﹥设置&管理</div>
		class="breadCrumb"	<div class="breadCrumb"><ul><li> 当前位置：</li><li>...</ul></div> 进入范例

标签：		签内容四周有边线	进入范例
		标签内容左右无边线	进入范例

Icon使用规范

html结构 <li clsss=""></li>

网站导航：	积分管理	注册信息	认证与安全
css：	class="p1"	class="p2"	class="p3"

头部菜单：	应用首页	设置管理	发布内容	个人资料	搜索
css：	class="topMenu_a"	class="topMenu_b"	class="topMenu_c"	class="topMenu_d"	class="topMenu_d"
	导航
	class="topMenu_f"

左边菜单：	管理公告栏	管理文件夹	分类管理	管理员管理	搜索
css：	class="m1"	class="m2"	class="m3"	class="m4"	class="s"

右边菜单：	个人资料	我发布的	我回复的	收藏夹	最近浏览的
css：	class="p1"	class="p2"	class="p3"	class="p4"	class="p5"
	我的论坛币
	class="p6"

操作链接：	新增	手工添加	查询	返回	修改
css：	class="operation_a"	class="operation_b"	class="operation_c"	class="operation_d"	class="operation_e"
	导入	导出	新员工	项目组	设置
	class="operation_f"	class="operation_g"	class="operation_h"	class="operation_i"	class="operation_j"
	删除
	class="operation_k"

回复留言：	顶	踩	收藏	分享
css：	class="div_20_a"	class="div_20_a"	class="div_20_a"	class="div_20_a"

操作性图标：					缩略图显示/列表显示
	class="showSymbol"	class="hideSymbol"	class="showArrow"	class="hideArrow"


	html结构<span class=""></span>

上移&下移：	不能下移	下移	不能上移	上移
css：	class="unDown"	class="Down"	class="unUp"	class="Up"

论坛图标：	版块有新回复	版块无新回复	置顶帖有新回复	置顶帖无新回复
css：	class="B1"	class="B2"	class="B3-b"	class="B3-a"
	精华帖有新回复	精华帖无新回复	帖子有新回复	帖子无新回复
	class="B4-b"	class="B4-a"	class="B5-a"	class="B5-b"

日期&搜索标准

注意：搜索范围

需要全部有冒号 “：”

进入范例

注意：不带框的搜索：用在有tab标签的下面。

搜索项之间需要有一空的单元格，统一控制间距。<td>  </td>

进入范例

页面提示与操作反馈规范

html

提交表单：		<span class="SuccesRow"> </span> 注意：不需要字的时候必须用空格
		<span class="FailRow"></span>
		<span class="TipsRow"></span>

操作提示：		<div class="Succes"><span class="divClose"></span>删除成功</div>
		<div class="Fail"><span class="divClose"></span>操作失败</div>

向导：

<div class="guideExpand">新手向导</div>
进入范例

密码安全提示：

进入范例

常态下的提示语：		<div class="Warning">自动读取..</div>
		<div class="Tips">从企业账户中..</div>
		<div class="S-warning">如果您要...请点击<a href="#" class="red">这里</a></div>
		<div class="dash"></div><div class="Tips">你可以换个关键词搜索下看看! 或者：<h5><a href="#" class="blueLine">返回上一页</a><a href="#" class="blueLine">点此添加</a> <strong class="font">企业文化</strong> 相关的内容</h5></div> 进入范例

各种修改总结&规范

html

紧跟在文字后面的修改链接

紧跟在文字链接后面的修改图标

进入范例

向下划出修改
		进入范例

原地修改

放在头部的修改链接（带图标）
需要取消换成在整表下面用按钮

表单规范

常用表单：




	下拉框
	是否

*有有背景：**
	进入范例

*无有背景：**
	进入范例

*有无背景：**
	进入范例

文本域宽度：

表格内容规范

图片	姓名	级别	状态	发放积分数量	可兑换礼品	时间	日期	操作
	张三	高层管理员人员	审核通过	200.00	是	2010-05-13 21：21：05	2010-04-25	修改删除
	陈晓明	中层管理员人员	已申领	10.00	否	2010-05-13 21：21：05	2010-04-25	修改删除
	王五	其他	审核不通过	80.00	是	2010-05-13 21：21：05	2010-04-25	修改删除审核退订
已知宽度完全相同，居中	居左，强制不换行	未知宽度，居左	居左，强制不换行	居右，强制不换行	居中，强制不换行	居中，换行	居中，强制不换行	居左，尽量不换行，太多可换行	居左

弹出层&浮动层使用规范

进入范例

页面布局(一栏)

注意：contain 内	用空行class="containSpace" 控制层的上下间距 20像素高
	用空行class="containSpace8" 控制层的上下细微间距 8像素高
	用空行class="C-Negative" 强行将不在同一行上的层，控制在同一行内


进入范例	进入范例	进入范例


进入范例	进入范例	进入范例


进入范例	进入范例	进入范例


进入范例	进入范例	进入首页


进入范例	进入范例

页面布局(二栏/左小右大)

注意：contain 内用空行class="containSpace" 控制层的上下间距


进入范例	进入范例	进入范例


进入范例	进入范例	进入范例


进入范例	进入范例	进入范例


进入范例	进入范例	进入范例


进入范例	进入范例

页面布局(二栏/左小右大)

注意：contain 内用空行class="containSpace" 控制层的上下间距


进入范例	进入范例	进入范例


进入范例	进入范例

Index of /ui-standard2

相关文章

更多...

相关培训课程

以用户为中心的设计

可用性评估

Desktop及Web-based视觉设计

更多课程...

更多...