图标能在视觉上简洁有效的指引用户操作。特殊情况下,使用图标能够代替文本。

何时使用图标?

同一个应用程序中的图标应该具有一致的外观及用户行为响应,应该将整个图标集作为用户界面中的重要部分。一般图标用于如下情况:

使用图标字体

在图标字体没有普及之前,图标通常是通过图片来展示,如今图标字体是展示图标的更好方式。使用图标字体能使用CSS对图标进行调整,例如定义大小、颜色及特殊效果。在ZUI中将使用图标字体作为系统图标集方案。采用开源web图标字体Font Awesome是一个不错的选择。

在Font Awesome 3.2.1中提供了361个图标。ZUI基于FontAwesome 3.2.1定制,去除了一些不常用的图标,并加入了一些适合中国使用的图标。

在ZUI中提供了290个图标:

  • music
  • search
  • envelope
  • heart
  • star
  • star-empty
  • user
  • film
  • th-large
  • th
  • th-list
  • ok
  • remove
  • zoom-in
  • zoom-out
  • off
  • cog
  • trash
  • home
  • file
  • time
  • download-alt
  • download
  • upload
  • inbox
  • play-circle
  • repeat
  • refresh
  • list-alt
  • lock
  • flag
  • headphones
  • volume-off
  • volume-up
  • qrcode
  • barcode
  • tag
  • tags
  • book
  • bookmark
  • print
  • camera
  • font
  • bold
  • align-justify
  • list
  • picture
  • pencil
  • map-marker
  • adjust
  • tint
  • edit
  • share
  • check
  • move
  • step-backward
  • fast-backward
  • backward
  • play
  • pause
  • stop
  • forward
  • fast-forward
  • step-forward
  • eject
  • chevron-left
  • chevron-right
  • plus-sign
  • minus-sign
  • remove-sign
  • ok-sign
  • question-sign
  • info-sign
  • remove-circle
  • ok-circle
  • ban-circle
  • arrow-left
  • arrow-right
  • arrow-up
  • arrow-down
  • share-alt
  • resize-full
  • resize-small
  • plus
  • minus
  • asterisk
  • exclamation-sign
  • gift
  • leaf
  • eye-open
  • eye-close
  • warning-sign
  • plane
  • calendar
  • random
  • comment
  • chevron-up
  • chevron-down
  • shopping-cart
  • folder-close
  • folder-open
  • resize-vertical
  • resize-horizontal
  • bar-chart
  • camera-retro
  • key
  • cogs
  • comments
  • thumbs-up
  • thumbs-down
  • star-half
  • heart-empty
  • signout
  • pushpin
  • external-link
  • signin
  • trophy
  • upload-alt
  • lemon
  • phone
  • check-empty
  • bookmark-empty
  • phone-sign
  • credit
  • rss
  • hdd
  • bullhorn
  • bell
  • certificate
  • hand-right
  • hand-left
  • hand-up
  • hand-down
  • circle-arrow-left
  • circle-arrow-right
  • circle-arrow-up
  • circle-arrow-down
  • globe
  • wrench
  • tasks
  • filter
  • fullscreen
  • group
  • link
  • cloud
  • beaker
  • cut
  • copy
  • paper-clip
  • save
  • sign-blank
  • reorder
  • list-ul
  • list-ol
  • table
  • magic
  • caret-down
  • caret-up
  • caret-left
  • caret-right
  • columns
  • sort
  • sort-down
  • sort-up
  • envelope-alt
  • undo
  • dashboard
  • comment-alt
  • comments-alt
  • bolt
  • sitemap
  • umbrella
  • paste
  • lightbulb
  • exchange
  • cloud-download
  • cloud-upload
  • bell-alt
  • coffee
  • file-alt
  • building
  • double-angle-left
  • double-angle-right
  • double-angle-up
  • double-angle-down
  • angle-left
  • angle-right
  • angle-up
  • angle-down
  • desktop
  • laptop
  • tablet
  • mobile
  • circle-blank
  • quote-left
  • quote-right
  • spinner
  • circle
  • reply
  • folder-close-alt
  • folder-open-alt
  • expand-alt
  • collapse-alt
  • smile
  • frown
  • meh
  • gamepad
  • keyboard
  • flag-alt
  • flag-checkered
  • terminal
  • code
  • reply-all
  • star-half-full
  • location-arrow
  • crop
  • code-fork
  • unlink
  • question
  • info
  • shield
  • calendar-empty
  • rocket
  • chevron-sign-left
  • chevron-sign-right
  • chevron-sign-up
  • chevron-sign-down
  • html5
  • anchor
  • unlock-alt
  • bullseye
  • ellipsis-horizontal
  • ellipsis-vertical
  • rss-sign
  • play-sign
  • minus-sign-alt
  • check-minus
  • level-up
  • level-down
  • check-sign
  • edit-sign
  • external-link-sign
  • share-sign
  • compass
  • collapse
  • collapse-top
  • expand
  • dollar
  • yen
  • renminbi
  • file2
  • file-text
  • sort-by-alphabet
  • sort-by-alphabet-alt
  • sort-by-attributes
  • sort-by-attributes-alt
  • sort-by-order
  • sort-by-order-alt
  • thumbs-up2
  • thumbs-down2
  • long-arrow-down
  • long-arrow-up
  • long-arrow-left
  • long-arrow-right
  • apple
  • windows
  • android
  • linux
  • sun
  • moon
  • archive
  • bug
  • weibo
  • renren
  • qq
  • chrome
  • firefox
  • ie
  • opera
  • safari
  • node
  • layout
  • usecase
  • stack
  • branch
  • chat
  • comment-line
  • chat-dot
  • cube
  • align-left

使用图标字体有一个好处就是图标就是文本字符,所有能用于文本的样式都可以用于图标,这样就可以随意定义图标的大小、颜色,甚至一些CSS3特效。但应该在同一个应用程序中图标应具有统一的样式,包含如下内容:

如有需要,也可以自定义专有的图标字体。例如需要使用一些Font Awesome中没有定义的图标,或者由于性能要求太高需要去掉Font Awesome中没有用到的图标。

如何使用图标?

使用一个单独的<span>标签或者<i>并增加对应的CSS类名即可,用来作为图标的标签不需要包含任何文本也不应该如此。

<i class="icon-star"></i>

不要将在任何控件标签上直接应用图标CSS类名,应该嵌套一个单独的<span>标签或者<i>标签。

按钮是用来触发一些动作。通常用在表单、对话框、菜单上面。好的按钮设计能够引导用户高效的达到目的。

按钮的类型

按钮根据表现形式有如下类型:

按钮 描述
指示用户完成当前页面主要操作,例如提交表单,搜索,确认选择等。通常在一个页面里面仅包含一个主要按钮。
页面上的普通按钮,例如取消表单、重置输入等。
链接按钮的外观和超链接一样,所不同的是用户点击时不是导向超链接指示的地址,而是触发一个操作。链接按钮通常用于页面上的次要操作,例如取消表单。
按钮组能够将相关的按钮并排展示,并且紧密相邻体现某些共同之处。通常会使用图标来代替按钮上的文字。

按钮的大小

实例 描述
较大的按钮,通常用在英雄页面或者大屏幕中。
默认大小
较小的按钮
块状按钮会占据整个水平宽度,适合较窄面板中的重要操作。

按钮的不同状态

实例 描述
在按钮上使用图标有时能起到点睛之笔的效果。
状态切换按钮提供一个类似复选框的机制,当点击后切换为选中状态,再次点击取消选中状态。
当多个状态切换按钮组成一个按钮组时也就组成了一个状态切换组。其机制同于表单中的多项选择控件(复选框)。
当同一组中的状态切换按钮设置为仅允许有一个按钮为选中状态则组成一个互斥的状态切换组。其机制同于表单中的单项选择控件。
在互斥的状态切换组中使用图标更加简洁明了。
当一个操作需要花费一定时间时,使用加载按钮会在用户触发后按钮文本更换"正在加载",直至操作完成。
已禁用的操作 禁用的操作 当按钮指代的操作在某些情景下不可用时这时就要给按钮切换到禁用状态,让用户知道按钮不可点击。

按钮的颜色

按钮的颜色赋予按钮以感情色彩能够在视觉上首当其冲的体现按钮的功能意向。例如重要按钮和标准按钮的颜色不同而体现其重要程度。使用更多的颜色来使得目的更加明确,与用户期望一致。

实例 描述
带渐变的标准灰色按钮
提供额外的视觉感, 可在一系列的按钮中指出主要操作
默认样式的替代样式
表示成功或积极的动作
提醒应该谨慎采取这个动作
表示这个动作危险或存在危险

提供工作或动作的实时反馈,只用简单且灵活的进度条。

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。

类型

基本类型

进度条 描述
40% Complete (success)
默认的进度条

变化

颜色

为了一致的样式,进度条颜色使用与按钮相同的类。

进度条 描述
40% Complete (success)
主要/默认
40% Complete (success)
信息
40% Complete (success)
成功
60% Complete (warning)
警告
80% Complete (danger)
危险
40% Complete (success)
成功

效果

用一个渐变可以创建条纹效果,在IE8中不可用。

进度条 描述
40% Complete (success)
条纹效果
45% Complete

运动效果。给.progress-striped加上.active使它由右向左运动。在IE的所有版本不可用。

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

堆叠效果。把多个进度条放入同一个.progress,使它们堆叠。

基本样式

标签 描述

New

h1

New

h2

New

h3

New

h4
New
h5
New
h6

徽标

.label-badge

12 Primary Success Info Warning Danger

小圆点徽标

12 Info Warning Danger

按钮中的徽标







列表组中的徽标和标签

标签和徽标的颜色

标签 描述
Default .label-default
Primary .label-primary
Success .label-success
Info .label-info
Warning .label-warning
Danger .label-danger

类型

基本类型

文本框 描述
input type='email'
input type='text'
input type='checkbox'
input type='radio''
textarea row='3'
file
select

状态

文本框 描述

禁用:input type='text' diabled

焦点:input type='text' class='form-focus'

has-warning

has-error

has-success

变化

高度

文本框 描述
.input-lg
Default iinput
.input-sm

宽度

类型

圆角图片

.img-rounded

圆形图片

.img-circle

缩略图

.img-thumbnail

参数

响应式图片

图片最大宽度将不会超过父级容器。.img-responsive

类型

标准内容标题

内容标题用来对一段内容进行总结。内容标题有1-6个级别,用html中的h1h2...h6来应用样式

元素 标签 像素大小 说明

Heading1 一级标题

<h1> 28px 在一个页面(或在hgroup标记的范围内)只有一个页面标题。

Heading2 二级标题

<h2> 24px 作为页面第二级标题,可能在一个页面中使用到多个二级标题。

Heading3 三级标题

<h3> 20px 粗体 页面第三级标题,嵌套在二级标题下使用。

Heading4 四级标题

<h4> 16px 粗体 页面第四级标题,嵌套在三级标题下使用。
Heading5 五级标题
<h5> 14px 粗体 颜色灰色 页面第五级标题,嵌套在四级标题下使用。
Heading6 六级标题
<h6> 12px 粗体 颜色灰色 页面第六级标题,嵌套在五级标题下使用。

带额外内容的标题

标题中可以加入解释性的文本,这些文本通过一个small标签加入。

Heading1 标题1 额外的标题 secondary headings

Heading2 标题2 额外的标题 secondary headings

Heading3 标题3 额外的标题 secondary headings

Heading4 标题4 额外的标题 secondary headings

Heading5 标题5 额外的标题 secondary headings
Heading6 标题6 额外的标题 secondary headings

单独一行的解释性文本

Heading1 标题1 这是关于标题的解释性文本 secondary headings

带图标的标题

页面标题使用额外的div.header来为页面内容提供更多的样式控制,与其他控件完美整合在一起。

带图标的标题

参数

.header-block

带背景颜色的标题。

标题

.header-dividing

带底部水平分隔线的标题

标题

类型

水平分隔线