按钮设计

按钮很常见.但是必不可少. 有必要给这样最基本的元素 作出最佳的用户体验.

让按钮看起来像按钮.

按钮尺寸(手指触屏最佳尺寸: 10mm x 10mm )

按钮位置: 最好手指直接可以按到

按钮颜色:  红色! 表示 重要操作… 比如删除.. 灰色 不重要的操作 比如取消.

按钮标签:  弹出文字提示.确认用户知道在干什么…

让最重要的按钮. 在整个页面中看起来是最重要的 别的按钮 颜色都不鲜艳. 唯独这个最重要的 用红色什么…

按钮形状 圆角矩形?

圆形….

三角形….

自定义形状…

突出按钮:

加上投影效果. 表示按钮是可以点击的.

多个按钮的话. 可以让被点击的按钮突起.加上投影效果. 别的按钮都是 扁平 的…

比如 工具条上的按钮. 一般是扁平的…

like 按钮 如果有人喜欢这文章… 可以 支持 或者不支持..

突出按钮: 背景颜色比较突出的,

扁平按钮: 没有背景色,没边框. 只有文字色..

单选切换按钮: 提供两个选择.只能选一个.

多选切换按钮: 提供多个选择,能选择多个..

给按钮设置 icon

按钮状态: 正常状态(默认) + 高亮状态(点击后)

浮动按钮: 本身是个小圆圈什么的. 点击 就会弹出个大大的 框 给你选择….

按钮样式选择: 按照权重来. 一种是 浮动按钮. 一直显示的 … 权重最高 一种是 突出按钮 权重一般 一种是 扁平按钮 权重最低.

单选按钮: <input type=“radio”>  复选按钮: <input type=“checkbox”>

z-depth

按钮的重要程度.和 普遍程度. 到了使用浮动按钮的地步么?

比如 关注. 默认是不关注了. 点了关注之后… 就高亮显示了…

点击状态 把按钮 设计成 有创意 比较能给用户带来 兴奋的体验..

不活跃状态 也有两种可能: 隐藏 / 设置不可用状态.

隐藏按钮: ….

不可用状态: 按钮虽然不可用. 但是 这个按钮是可以执行的. 需要提供一个提示去解释 如何使用/开启这个按钮..

下拉按钮

实例

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdown:hover .dropdown-content {
display: block;
}
</style>


<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
<p>Hello World!</p>
  </div>
</div>

Html部分:

创建下拉菜单: 任意html元素 都可以 如 span button…

创建菜单内容: 用div 包裹所有元素.

CSS 部分

.dropdown 把下拉框内容 放在 下拉按钮下方位置. 使用 position:absolute

.dropdown-content 实际的下拉菜单. 默认是隐藏的. 鼠标移动到 按钮上 会显示.

:hover 鼠标移动到下拉按钮 时显示菜单.

下拉菜单方式1: 无序列表

可以用 ul li 这种无序列表方式实现下拉横向菜单 列表默认是上下排列的.如果你要实现左右布局 用float:left;浮动

HTML 实例代码

<div class="dropdown">
  <span style="line-height: 30px;">(Resume)</span>
  <div class="dropdown-content">
<ul>
  <li>在线简历</li>
  <li>DOC简历</li> 
  <li>PDF简历</li> 
</ul>
  </div>
</div>

CSS 实例代码

.navbox{ width: 960px; height: 40px; margin: 20px auto; background: #08c; } 
.navbox >ul>li{ 
float: left; 
width: 160px; height: 40px; 
line-height: 40px; 
text-align: center; 
font-size: 16px; 
}

鼠标移入时实现颜色的变换

思路: 鼠标移入时每个<li>显示为另一种颜色background: #00bfff;

.navbox ul li a{ 
display: block; 
color: #fff; 
background: #08c; 
} 
.navbox ul li a:hover{ 
text-decoration: none; 
background: #00bfff; 
}

多级下拉菜单实现

<div class="navbox"> 
<ul class="clearfix"> 
<li><a href="#">首页</a></li> 
<li><a href="#">资讯</a></li> 
<li><a href="#">web前端</a> 
<ul class="subnav"> 
<li><a href="#">HTML</a></li> 
<li><a href="#">CSS</a></li> 
<li><a href="#">JavaScript</a></li> 
</ul> 
</li> 
<li><a href="#">前端新闻</a></li> 
<li><a href="#">联系我们</a></li> 
<li><a href="#">关于我们</a></li> 
</ul> 
</div>