网页按钮设计原则

网页按钮设计原则

为了确定按钮是否可用，用户在桌面端访问网站的时候，需要将光标移动到元素上，检查元素状态是否会改变，才能判断它是否是可点击的。下面介绍网页按钮设计原则，希望对您有帮助。

1. 按钮必须得看起来像按钮

涉及到用户界面交互的时候，用户需要知道哪些是可点击的，而哪些不是。面对着 UI 界面中的每个元素，用户都需要对它们进行辨别和判断，而这个过程越长，可用性其实就越差。

那么，用户是如何判读哪个元素是可交互的呢?通常，用户是基于以往的经验和视觉来对 UI 元素进行判断，这就是为什么需要通过合适的视觉符号来帮助用户理解(比如尺寸、形状、颜色、阴影等)，使得元素看起来像是按钮。视觉符号为界面提供可供性。

不幸的是，在许多界面当中，按钮的可发现性和指示性并不强，这使得交互发生的机率有所降低，用户会纠结于哪些可点击，而哪些不可点击，这个时候设计是否炫酷，就显得不那么重要了。即使视觉上界面设计得足够突出，可用性很弱，会让用户陷入沮丧，产品也就不再具备可用性了。

为了确定按钮是否可用，用户在桌面端访问网站的时候，需要将光标移动到元素上，检查元素状态是否会改变，才能判断它是否是可点击的。而移动端用户就麻烦了，根本没有鼠标来执行这样的操作，元素能否点击，只能都试一次，没有其他更好的方法了。

不要假定你的 UI 中的元素对于用户是显而易见的。

在很多情况下，设计师会有意识地不将某些元素的交互性凸显出来，因为他们会认为这些东西是显而易见的。但是事实并非如此，在设计 UI 的时候，应该牢记下面的事情。

作为设计师，是很容易搞清楚 UI 中哪些元素可交互，哪些不可交互，但是用户并不清楚。

尽量在按钮中采用用户熟悉的设计。

以下是绝大多数用户都熟悉的按钮样式：

带有矩形边框的、填充有色彩的按钮;

带有圆角矩形边框的、填充色彩的按钮;

带有阴影有色彩和内容填充的按钮;

幽灵按钮。

不要忘记留白

按钮本身的视觉属性很重要，而按钮附近的留白同样重要，他们让按钮更容易被识别，也更容易交互。在下面的案例当中，用户很可能会将文本内容和幽灵按钮混淆。用户在此无法判断它到底是一个盒子元素，还是个按钮。

2. 将按钮放在用户希望看到的地方

用户对于页面交互其实是有基本的感知和期望的，也就是说用户对于按钮的位置是有个基本的认知的。不要让用户到处找按钮，它最好在用户所期望的位置出现。

尽可能使用传统的布局和标准的 UI 模式

所谓传统的布局也就是贴合用户经验的布局，用户在浏览的时候会对于这样「标准」的 UI 布局有明确的预期，在对的位置看到了对的按钮，整体更容易理解，自然也就可以轻松和界面进行交互了。

想要确认设计的可用性，只需要观察用户在使用过程中是否会通过操作抵达你希望他们到达的位置，并且找到需要点击的按钮。

3. 按钮上应该加上相应操作的标签

当按钮的文本标签上的内容写的太过于宽泛，或者使用带有误解的内容，可能会让用户感到迷惑。每个标签上的文本标签都应该尽量准确，简明直接地介绍清楚它的真实功能。

4. 按钮应该拥有合理的尺寸

按钮的大小应该反映出屏幕上这一元素的优先级，更大的按钮应该意味着更重要的交互。

按钮优先级

让更重要的按钮在视觉上就足以体现它的重要性。始终尝试让主要的按钮更加突出，增加它的尺寸，并且使用高对比度的色彩来吸引用户的注意力。

让按钮适配用户的手指

在许多 APP 当中，按钮的设计太小了，这可能会导致用户出现误触的情况。

5. 注意按钮的次序

按钮的顺序应该反映出用户和界面之间交互的属性，问问自己用户期望在屏幕上看到什么样的顺序，或者说什么样的顺序更合理，然后进行相应的设计。

举个例子，比如「上一步/下一步」两个按钮应该如何安置方位呢?通常而言，「上一步」是回卷操作，应该在左边，而「下一步」则是前进操作，应该在右边。

6. 避免使用太多按钮

这是许多 APP 和网站中经常出现的一个问题。当你提供太多的选择的时候，用户往往会无所适从。无论是设计网站还是 APP，请务必尽量考虑最重要的操作，控制好优先级和复杂度。

7. 为按钮交互提供视觉和音频反馈

当用户点击按钮的时候，他们更希望界面能够给予适当的反馈。基于不同的操作，界面给予视觉或者音频的反馈。当用户没有收获任何反馈的时候，他们可能会觉得界面没有收到他们的操作，从而反复点击，执行多次不必要的操作。

人类和物理世界交互，获得反馈，然后执行更多的操作，这种机制是人类进化中所形成的认知，这种反馈可以是视觉，也可以是听觉，这些反馈会告诉用户发生了什么。

网页布局设计原则

第一条 尽量使用单列而不是多列布局

单列布局能够让对全局有更好的掌控。同时用户也可以一目了然内容。而多列而已则会有分散用户注意力的风险使你的主旨无法很好表达。

第二条 合并重复的功能而使界面简洁

在整个网站开发期间我们会有意无意地创建很多模块，版面或者元素，而它们的功能可能有些是重叠的。此种情况表明界面已经过度设计了。时刻警惕这些冗余的功能模块，它无用且降低了电脑性能。此外，界面上模块越多，用户的学习成本就越大。所以请考虑重构你的界面使它足够精简。

第三条 将不同区域的颜色区分出来

颜色，层次及模块间的对比这些视觉上的设计可以很好地帮助用户浏览你的网站：他时刻知道当前所处的页面以及可以转到哪些页面。要传达这样一个好的界面，你就需要将可点击的元素(比如连接，按钮)，可选择的元素(比如单选多选框)以及普通的文字明显区分开来。在下图的例子中，我将点击操作的元素设置为蓝色，选中的当前元素为黑色。这样适当的设计可以让用户很方面地在产品的各模块间切换。但千万不要把这三种元素设计得混乱不堪。

第四条 界面要有鲜明对比,让人容易区分

把主要功能区从界面中突出显示出来效果会好很多。使你的主要口号醒目有很多种方法。通过明暗色调的对比来突显。通过为元素添加阴影渐变等效果让界面富有层次感来张显主题。最后，你甚至可以在色相环上专门选择互补色(比如黄色与紫色)来设计你的界面，以达到突出重心的目的。综合所有这些，最后得到的界面会使你的主要意图与界面其他元素有明显的区分，得到完美的呈现。

第五条 把界面做得环环相扣要好过直白的排版

一个平淡无奇行文无疑会让用户失去兴趣而继续阅读。是的，单列滚动的长页面是不错的，但是我们应该适当地设置一些小节，并且环环相扣，来提高用户的兴趣使其继续阅读。但需要注意的是节与节之间的留白不要太大。

第六条 让界面平滑显示而不要死板地呈现

用户进行操作过程中，界面上的元素会经常出现，隐藏，打开，关闭，放大缩小移位等。给这些元素增加些自然的动画，淡入淡出效果不但美观，也更符合实际，本来元素尺寸位置的变化就是一个需要时间的动画过程。但要注意动画时间不要设置过长，那样会让想尽快完成操作的用户不耐烦。

第七条 过多边框会让界面四分五裂

过多边框会喧宾夺主。不用说，边框确实在划分区域进行版块设置时有很大的作用，但同时其明显的线条也会吸引走用户的注意力。为了达到划分版块又不转移用户注意力的目的，在排版时可以将界面上不同区域的元素通过空白进行分组，用上不同的背景色，将文字对齐方式进行统一，还有就是为不同区域设置不同的样式。当使用所见即所得的界面设计工具时，我们经常在界面上方便地拖出很多区块来，这些区块多了就会显得杂乱无章。所以我们又会到处放些横线来分界。一个更好的做法是将区块垂直对齐，这样做不会让那些多余的线条来扰乱视觉。

第八条 界面设计得一致

界面设计中尽量保持一致性成了一个普遍遵循的准则。可以在很多方面下功夫来实现一个一致的界面，包括颜色，方向，元素的表现形式，位置，大小，形状等。不过在让界面变得一致之前，记住一点，适当的打破整体的一致性也是可取的。这偶尔的不一致性的设计用在你需要强调的地方可以起到很大的作用。所以世事无绝对，我们应遵从一致的设计准则，但适当地打破这种常规。

第九条 具有层次的图形化展示优于直白的文字描述

具有层次的设计可以将界面上重要的部分与不次要部分区分开来。要让界面层次分明，可以在这些方面做文章：对齐方式，间距，颜色，缩进，字体大小，元素尺寸等。当所有这些调整运用得适当时，可以提高整个界面的可读性。相比在一个很直白的界面上用户一眼就可以从上瞟到底的设计，这样分明的设计也可以让用户放慢速度来慢慢阅读。这样也使界面更有特色一些。就好比一次旅行，你可以乘坐高铁快速到达景区(从页面顶部瞟到底部)，但你也可以慢行以欣赏沿途风光。所以层次分明的设计让眼睛有可以停留的地方，而不是对着空白单调的一个屏幕。

第十条 优化页面加载速度，不要让用户等太久

速度很重要。页面加载速度和UI对操作的响应速度都直接关系到用户是否有耐心继续等下去。无疑地每多一秒种的等待都会失去一些用户或者项目机会。一个好的解决之道当然就是优化你的页面和图片。除此之外还可以运用心理学让这个等待时间显得不那么长。具体来说有两种技巧。一是显示进度条，二是展示其他相关或有趣的东西来吸引用户的注意力(就好比你沿着传送带走走总比傻站在原地盯着一个位置看要好得多吧)。

Banner设计需要注意什么

关于Banner的设计，相信已经有很多人都看过这方面经验的分享了，我也做过了一些Banner的设计，在这其中通过不断的学习、实践积累了自己的一些小小经验和方法，下面给大家浅浅的分享下我总结的Banner设计经验及注意事项。下面从这四部分逐一给大家分享下。

1、banner设计中的文字注意事项

一般来说，网站制作一个banner分为两个部分，文字和辅助图。虽然辅助图站的面积比较大，但如果不加入文字说明的话，客户就会看不懂你做的banner要表现什么、要说明什么，所以文字是整个banner的主角，我们在制作banner的时候特别要注意对文字的处理和摆放。

①分清主标和副标，从主次上来说，主标为主，字体要大颜色要醒目。副标起到从内容上和形式上都辅助主标的作用。一个好的banner标题文字处理都比较饱满，比较集中。

②如果主标太长，需求方不舍得删文字的情况下，对主标中重要关键字进行权重，突出主要的信息，弱化‘的’、‘之’、‘和’年’‘第X届’这种信息量不大的词。

③如果需求方整体文字太短，画面太空，可以用一些加入一些辅助信息丰富画面。如加点英文，域名，频道名等。

2、Banner有动态和静态两种。

在浏览网页的过程中，虽然闪烁的图案会产生瞬间记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。根据粗略统计，100个Banner里面有1/3是静态的。

3、Banner的“重量”要轻。

以468×60的Banner为例，最好是15K左右，不要超过22K。而88×31的Banner最好在5K左右，不要超过7K太大的会引起网页打开速度，导致浏览下降，这里面也有个量的问题，太多的广告而影响浏览者浏览网页，导致反感，这也是一个问题。所以放广告条的时候要考虑到广告的大小和多少，还有就是搭配问题。

4、从banner设计上来看，需要注意：

①Banner的文字不能太多，用一两句话来表达即可。

②广告语要朗朗上口，可以第一时间的让人捕获表达的重点。

③图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没。

④图形尽量选择颜色数少，能够说明问题的事物。

⑤如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑。

⑥尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。

⑦产品数量不宜过多。很多广告主总是想展示更多产品，少则4-5个，多则8-10个，结果使得整个 Banner 变成产品的堆砌。

Banner 的显示尺寸非常有限，摆放太多产品，反而被淹没，视觉效果大打折扣。所以，产品图片不是越多越好，易于识别是关键。

提升网页设计品质的技巧

“高品质”是所有人追求的目标，在网页设计的世界中也不例外。不过何为“品质”，如何判断一项设计的品质是好还是坏?笔者恰好有一套找出网页设计中品质焦点的方法。一旦你了解到如何判断一项高品质的设计究竟好在哪里，你就掌握了让自己的设计更趋完美的大量技巧。

接下来我会给大家列一些要点，并附上相应的例子，与大家分享我在别人的网页设计中寻找“高品质”的过程。

1、留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

高效控制留白的技巧

各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个人感觉的，不过都能从实践中锻炼出来。

·使用网格辅助设计：利用网格当然能帮助你理解元素之间的空白。

·不断尝试：不断尝试—失败—尝试，直到找到最佳方案。

·留白并不是浪费空间：空白并不总是等着你去填充的。

·没错，少就是多：与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。

2、像素级的完美

有一个方法能够看出某人在完成一项网页设计时是否真的用心了。有时候创造奇迹的就是一些小细节，一些别人几乎无法察觉的细节。我所说的“像素级的完 美”就是指在线条、边缘和边框描边上仔细推敲。与其就用一条单一的线，不如多加一些细节。细节可以是细微的渐变，也完全可以只是一条1像素宽的细线(用作表现阴影或高光)。有了这些细节， 你的设计会大不一样。有些设计师在这方面特擅长：Collis Ta’eed，David Leggett以及Wolfgang Bartelme。

完美细节小贴士

要在这一技巧上达到完美，不断的实践尤为重要。如您所见，一条1像素线这么简单的东西就能给设计添加非常酷的深度感。你甚至不一定要用到那些倒角或渐变，费尽心力做一些实实在在的置于某对象之上的效果。

·一定要注重细节：小细节完善内容感官是关键。

·思考像素级问题：描边、渐变、线条、阴影等等，不用太宽大也能有效增强设计

·前后对比：应用效果后注意与没有这种效果之前进行对比。如此你就能知道这些细节到底带来了哪些改观。

3、文字排列与字体选用的诀窍

尽管设计师大都不会亲自撰写网站的实际内容，不过他们对于内容的整体品质仍然至关重要。设计师的作用就是要保证内容的展现方式足够易读。

网页设计中字体选用的快速决断

看了上面这么多好例子，将来你选用起字体来应该会更加得心应手。不过，为什么他们给人的感觉这么好?下一次在你自己的设计中，你又该如何运用?

·是否可读?不要怕尝试粗大的字体

·你可否考虑过间距?间距对于可读性有很大决定作用

·你的字体带给人什么情绪?确保字体选择适合你的设计风格

4、元素的组织

设计师这一职业对很多人都有吸引力，因为那些制造创意的过程，实在是十分有趣。我知道组织内容的过程就没有那么有趣了，不过一旦你养成了组织内容的好习惯，你就会发现其实它也没有想象中那么枯燥。组织内容的方式总是需要看情况而定，比如说，这站点是什么类型?某项特定内容在页面上的重要性如何?

如何放置内容，以及放到哪里，可能的排列组合实在太多了。不过还是有一些技巧可循的。最基础的就是，先决定你的设计需要达到的效果。例如，你是在做卖东西的网站吗?是要做内容展示吗?或者是在做一个用户注册页?推广页面?等等……

组织内容小贴士

你当然可能会遇到需要打破常规，选用非同寻常方式的时候，不过你还是可以遵循这些简单技巧，以保证内容结构和阅读顺序的良好。

·你为何而设计?如前所述，确定设计的目标。

·利用网格：网格帮助你发挥页面的最大潜能。

·测试元素位置：以访问者的角度考察内容的易用性。

·移除所有不必要元素：不必要的东西都应该被消灭，或者至少不要放到显眼的地方。

·注意力的均衡：有些东西需要被简单化，好让另外的事物闪耀光辉。

5、自我克制与精妙细节

设计师总是在寻找制造冲击力的方式，总是想做一个独一无二的设计，创造些前所未有的效果。不过有时候通过自我克制也能形成冲击力。量变产生质变，过多的“好”也会带出不好的结果。好的设计师晓得平衡点在哪里，并且能避免让过多的特殊效果毁了一项设计。

运用精妙细节的小贴士

我认为，精妙细节能让一项好的设计升华为灿烂夺目的设计。如果你还在寻找让设计与众不同的方法，精妙细节是个不错的尝试方向。 以下是关于运用精妙细节的小贴士：

·创建细节图层：不要在一个笔刷或材质上吊死，多加些图层，多做点细节。

·尝试不同透明度和色彩：有时候只有 3% 的不透明度也能产生正面影响。

·拒绝缩手缩脚：不要担心太多细微，或者太不明显。

6、 发挥色彩的全部潜能

设计师一般喜欢按照自己的品味来选择颜色，这可实在太不专业了。要决定哪种颜色是最适用的，你的脑子里想的应该一直是品牌需求，然后选好色彩的搭配组合，指定其专属的主题和目标情绪。

在网页设计中运用颜色的小贴士

颜色永远是值得探索和尝试的区域。尝试不同的组合变化能为设计带来无限可能。不过选择颜色和色彩搭配时，应该做到对下面的要点心中有数：

·尝试突破：无趣的主题并不一定得使用无趣的色彩组合。

·多变：尝试在你多彩的背景上使用渐变、重复图案、笔刷，光有颜色可不容易让设计显得好看。

·坚持主题：确保你的用色与你需要呈现的产品/服务有关联。

7、做别人没做过的事

最好的网站中有一些非同寻常的，奇怪的，甚至可以算得上诡异的设计。不过那些挑战传统的尝试说不定会已经改变了传统的定义。话说回来，要做到完全原创，创造出没人做过的东西实在是设计过程中最难做的事。

打破常规之后，成功与失败只有一步之遥。你要么做出令人惊艳的聪明设计，要么做出一堆垃圾饱受批评。别人从来不这么做是有原因的，因为有些点子实在是糟透了。要从人们知道并喜欢的区域走出来，你得非常勇敢才行。

实践新鲜想法的小贴士

上面的例子并不是为了“激发”你的独特创意，只是一些我发现的一些很独特的站点，仅此而已。事实上，你也不应该到处搜寻，寻找新想法的灵感，因为这样你的点子也是受别人的启发，与完全创新是相悖的。所以如果你打算做真的非同寻常的东西出来，就赶快忘掉这一部分!

保证事物之间的联系：如果你打算做一些特别特别特立独行的事，先问问自己“真的有必要吗?”，“这样说得过去么?”，“和品牌诉求符合吗?”……如果答案是肯定的，再采取行动!