网页设计如何设置按钮

网页设计如何设置按钮

网页设计如何设置按钮？以下就是网页设计如何设置按钮等等的介绍，希望为您带来帮助。

浏览网站的时候可以发现，很多网站上都有着各种特色的按钮，而这些按钮总会吸引着浏览者，让他们情不自禁的就点击进去，从而实现销售或者进入某个页面的效果，这个就是网页制作的时候，设计网站按钮的特殊作用。

其实设计具有吸引力的按钮，可以帮助企业网站实现更多的点击量，或者是提高销售转化，但是有时候一些按钮设计出来以后，却是没什么点击，这可能是一方面这个按钮没什么特别之处，或者这个按钮对浏览者的吸引性不高，觉得点不点击都没多大问题，这样的网站按钮就可能是网页制作中的一个败笔。

设计企业网站的按钮，应该让浏览者有一种刺激感，特别是营销型的企业网站建设，应该设计一些“秒杀”，“火爆”等给浏览者带来冲动的按钮，在按钮中加上这些文字后，往往都可以提高按钮的转化率，因为这些文字能给浏览者抢购或者是立马购买的暗示，进而提升他们的点击欲望。

另外一种就是带有引导性的按钮，一般网页制作中这类型的网站按钮上都会有箭头等的图案，让访客点击以后迅速浏览箭头方向指向的内容，从而更加节省访客的时间，这种按钮的设计目的都一般是从用户在网站的体验出发的，可以提高访客对网站的忠诚度。

至于一些分享类的按钮设计，如果这些按钮能够有效被访客点击的话，对整个企业网站优化是有一定作用的，因为企业网站页面被分享得越多，那么页面排名在搜索引擎中就会越高。可是这些分享按钮的成功与否，并不是由设计决定的，更多是由网站内容的质量以及访客的浏览体验决定的，所以分享类的按钮设计应该在网页制作根据实际情况进行分析。

后是企业网站按钮的大小设置，设计一个按钮，一般来说它的点击面积越大，那么浏览者点击按钮的时间就越少，用户鼠标也能更轻松的达到点击位置，因此相对的提高按钮的大小，可以提高按钮的性能，但是按钮也不是说越大就越好，过大的按钮很容易会影响页面的美观，到时反而会得不偿失。

Dreamweaver怎么自己制作图形按钮

方法一：

1、在新建文档里插入一个图像域（插入—表单—图像域），在弹出框里选择准备好的按钮图片，设置ID为“btn1”。

2、如果有弹出框，提示“是否添加表单标签”，点“是”，按钮图片就出现在了设计框内。

3、在浏览页面点击按钮图片，会有响应，黄色边框就是鼠标按下时的状态。

方法二：

1、插入一个按钮（插入—表单—按钮），ID设置为btn2。

2、给新按钮定义一个样式class="btn2"，设置长宽（与背景图大小一致）和背景图。

3、在样式里也设置下，字体、大小、字体颜色等。

网页按钮设计规范

1.按钮要和超链接区分开

在扁平设计时代，类似Material Design，会将“扁平”按钮，多样应用于工具栏、动作组、还有文本串联。在默认状态下，这跟超链接只有轻微的区别甚至是没有区别。然而，从archor tags开始，按钮的状态和行为都会带来一系列需要区别的考量。

如果你的系统提供了扁平设计，要确保它设计上和代码上的惯常用法，都是可以跟超链接区分出来的。此外，确保方案涵盖交互的复杂性，例如聚焦&按压状态，留白，对齐等。

2.设定文本的风格基调

幸好，过去“点击这里”是存在的。但我们依然需要回答：按钮标签可以有多长。标签是采用祈使语气，即命令式、强制性的语气吗（例如，“保存”或者“关闭”)?我应该在动词后面加上宾语吗（在“保存”后面加上“文档”)?关于常见操作有惯用的标签吗？要加注品牌标语……还是不要呢？

在可以找到全部按钮的标签指南处引入前后一致的用词。当然，用词列表和深度编辑标准可以在Voice和Tone等指南内找到。不管怎样，按钮指南是开始把指南桥接在一起的好地方。

3.当背景较复杂时，按钮用反色

在纯白背景下大多数样式的按钮还行得通，但如果你把按钮搁在照片背景上呢？或者是一个更深的不同颜色的背景？更伤脑筋的是，你的按钮也可以放在浅色中性色的背景上吗？按钮可以用在（包括但不限于上面所提到的）任何情况下吗？主按钮的颜色可以随意改变吗？

把主按钮放在不同的背景上进行演示，然后制定一个相反的替代方案——白色？不同颜色？或者半透明？——当背景变深时应用上述方案。做文档时，把亮色和暗色等方案展示在一系列常见背景上，这样可以把问题讲清楚，把按钮展示在一系列常见背景上，效果好坏都展示。

4.设计并建立按钮的交互规范

按钮是最简单原始的交互，交互伴随着改变。仅仅呈现给开发者页面加载时按钮的样式来表示“按钮长这样！”是不够的。不是开发者而是设计者，来决定状态切换的按钮是如何呈现的，包括：默认状态，鼠标悬停，焦点获取（“光晕状态”)，被按住/激活，甚至旋转等待以及其他花式秀进度的动画。

提供不同状态下的按钮样式合集，无需用户交互（页面中嵌入按钮就好）。文档并不是搞寻宝游戏，加分的做法是像material design那样做视频演示。

网站导航按钮的制作

1双击photoshop cs5快捷方式打开photoshop cs5，执行文件—新建命令，新建一个大小为800*600，分辨率为72，背景颜色为白色的文档。

2在图层面板中点击创建新图层按钮，新建图层1，点击前景色在弹出的拾色器中设置前景色为自己喜欢的颜色。

3选择工具箱里圆角矩形工具，在画布上绘制一个圆角矩形，并栅格化图层。

4双击图层1弹出图层样式对话框，勾选投影选项，设置混合模式为正片叠底，不透明度为30，角度为120，距离为1，大小为1。

5切换到内发光选项，设置混合模式为滤色，设置图案大小为10。

6接着设置外发光选项，设置混合模式为正常，图案大小为6，点击确定按钮。

7选择工具箱里文本工具，在按钮上输入文字“网站首页”，设置字体为隶书，字号为25，颜色为白色。

8选择除了文字图层之外的图层执行ctrl+e合并图层，选择工具箱里魔棒工具选择圆角矩形执行ctrl+c复制，新建图层1和图层1，执行ctrl+v命令。

9分别选择图层1和图层2，选择工具箱里文本工具，依次输入文字内容“关于我们”、“服务中心”。

10执行文件—另存为命令，在弹出的对话框中输入名称为“按钮”，保存在桌面上即可。