求知 文章 文库 Lib 视频 iProcess 课程 角色 咨询 工具 讲座 Modeler   Code  
会员   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
 
 
关爱通UI规范
 

2010-09-30 来源:wuxingdev.cn

 

字体大小、颜色使用规范

字体颜色类: #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" <a href="#" class="navBut"><span>导航</span></a>
链接按钮: 有明确导向的 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><span  class=”wordSpace_10”> &nbsp;</span></td>

进入范例

页面提示与操作反馈规范

    html
提交表单: <span class="SuccesRow">&nbsp;</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"><span class="divClose"></span><strong>新手向导</strong></div>
进入范例
密码安全提示: <span class="S-Level_a">&nbsp;</span><span class="S-Level_b">&nbsp;</span>
进入范例
常态下的提示语: <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
紧跟在文字后面的修改链接

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

<span class="Modify">&nbsp;</span>
进入范例
向下划出修改




 
 
  进入范例
原地修改

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



 

表单规范

常用表单:    
     
     
     
     
  下拉框    
     
有* 有背景:
  进入范例
无* 有背景:
  进入范例
有* 无背景:
  进入范例
文本域宽度:
 
 
 

表格内容规范

图片 姓名 级别 状态 发放积分数量 可兑换礼品 时间 日期 操作  
张三 高层管理员人员 审核通过 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视觉设计
认知原理与设计应用
手机用户界面设计


北京 以用户为中心的界面设计
北京 用户体验& 界面设计
上海 华为 用户体验& 界面设计
深圳 用户体验& 界面设计
爱立信 以用户为中心的设计
北京 用户体验与界面设计
福州 以用户为中心的界面设计
更多...   
 
 
 
 
 
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号