为了确定按钮是否可用，当用户访问桌面上的网站时，需要将光标移动到元素上，并检查元素的状态是否会发生变化，从而确定其是否可点击。下面是网页按钮的设计原则，希望对你有帮助。
1.按钮必须看起来像按钮。
说到用户界面交互，用户需要知道哪些是可点击的，哪些是不可点击的。面对UI界面中的每一个元素，用户都需要对其进行识别和判断，这个过程越长，可用性越差。
那么，用户如何判断哪个元素是交互的呢？通常，用户基于过去的经验和视觉来判断UI元素，这也是为什么需要合适的视觉符号来帮助用户理解(比如大小、形状、颜色、阴影等。)以便元素看起来像按钮。视觉符号为界面提供了可用性。
可惜在很多界面中，按钮的可发现性和指示性不强，降低了交互的概率。用户会纠结哪些可以点击，哪些可以 .这个时候设计酷不酷就没那么重要了。即使视觉界面设计足够突出，可用性较弱，会让用户产生挫败感，产品也不再具有可用性。
为了确定按钮是否可用，当用户访问桌面上的网站时，需要将光标移动到元素上，并检查元素的状态是否会发生变化，从而确定其是否可点击。移动用户有麻烦了。根本没有鼠标来执行这样的操作。元素能不能点只能试一次。没有其他更好的办法。
唐不要假设用户界面中的元素对用户来说是显而易见的。
很多情况下，设计师会有意识地不突出某些元素的交互性，因为他们会认为这些东西是显而易见的。但事实并非如此。在设计UI时，你应该记住以下几点。
作为设计师，它很容易判断UI中的哪些元素可以交互，哪些可以，但用户不会我不知道。
尽量在按钮上使用熟悉的设计。
大多数用户都熟悉以下按钮样式：
带有矩形边框并填充了颜色的按钮；
带有圆角矩形边框和填充颜色的按钮；
带有阴影、颜色和内容填充的按钮；
幽灵按钮。
唐别忘了留白。
按钮本身的视觉属性很重要，而按钮附近的空白也同样重要。它们使按钮更容易识别和交互。在下面的例子中，用户很可能将文本内容与幽灵按钮混淆。用户可以这里不能判断它是一个框元素还是一个按钮。
2.将按钮放在用户希望看到的位置。
其实用户对页面交互有一个基本的感知和期待，也就是说用户对按钮的位置有一个基本的认知。唐不要让用户到处寻找按钮，它最好出现在用户期望的位置。
尽可能使用传统布局和标准UI模式。
所谓传统布局，就是贴合用户的布局的经历。在浏览时，用户会对这样一个标准UI布局。在正确的位置看到正确的按钮，整体更容易理解，自然也就容易与界面交互。
要确认设计的可用性，你只需要在使用过程中观察用户是否会通过操作到达你希望他们到达的位置，找到需要点击的按钮。
3.该按钮应标有相应的操作。
当按钮的文字标签上的内容过于宽泛，或者使用了有误解的内容时，可能会让用户产生困惑。每个标签上的文字标注要尽可能准确、简洁、直接地介绍其真实功能。
4.按钮应该有合理的大小
按钮的大小应该反映这个元素在屏幕上的优先级，更大的按钮应该意味着更重要的交互。
按钮优先级
让更重要的按钮在视觉上体现其重要性。总是试图使主按钮突出，增加其大小，并使用高对比度的颜色来吸引用户注意。
让按钮适合用户的手指。
很多app的按键设计太小，可能会导致用户误触。
5.注意按钮的顺序。
按钮的顺序应该反映用户和界面之间交互的本质。问问自己用户期望在屏幕上看到什么样的顺序，或者什么样的顺序更合理，然后据此进行设计。
例如，应该如何上一页/下一页按钮的位置？一般来说，上一步是倒片操作，应该在左边，而下一步就是正向操作，应该在右边。
6.避免使用太多按钮
这是很多app和网站的通病。当你提供太多选择的时候，用户往往会无所适从。无论是设计网站还是APP，请尽量考虑最重要的操作，控制好优先级和复杂度。
7.为按钮交互提供视觉和听觉反馈
当用户点击按钮时，他们更喜欢界面给出适当的反馈。基于不同的操作，界面给出视觉或听觉反馈。当用户不得不到任何反馈，他们可能会觉得界面没有收到了他们的操作，所以反复点击，多次执行不必要的操作。
与人类物理世界互动，获得反馈，然后进行更多的操作。这个机制就是人类进化中形成的认知。这种反馈可以是视觉的，也可以是听觉的，它会告诉用户发生了什么。
第1条尽量使用单列布局，而不是多列。
单列布局可以让你更好的掌控全局。同时，用户可以对内容一目了然。但是，如果你有一个以上的专栏，你将有分散用户注意力的风险，你的主要思想将不会得到很好的表达。
第二，通过组合重复的功能，界面简洁。
在整个网站开发过程中，我们会有意无意地创建许多模块、布局或元素，它们的某些功能可能会重叠。这种情况说明界面已经过度设计了。要时刻警惕这些冗余的功能模块，它们毫无用处，会降低电脑性能。另外，界面上的模块越多，用户的学习成本就越大。所以请考虑重构你的界面，让它足够简单。
第三条区分不同区域的颜色。
这些视觉设计，比如颜色、层次以及模块之间的对比，可以很好地帮助用户浏览你的网站：他总是知道自己当前在哪个页面，可以去哪个页面。要传达这样一个好的界面，你需要明确区分可点击元素(比如链接和按钮)、可选择元素(比如单选和多选框)和普通文字。在下面的例子中，我将click元素设置为蓝色，将所选的当前元素设置为黑色。这种适当的设计允许用户以多种方式在产品的模块之间切换。但是唐不要把这三个元素设计的一塌糊涂。
第四个界面要对比鲜明，容易区分。
从界面上突出主要功能区域会好很多。有很多方法可以让你的主要口号脱颖而出。明暗色调的对比突出了这一点。通过在元素中添加阴影渐变等效果，使界面分层以显示主题。最后，你甚至可以在色环上选择互补色(比如黄色和紫色)来设计你的界面，从而突出重心。综合所有这些，最终的界面会清晰的将你的主要意图与界面的其他元素区分开来，得到一个完美的呈现。
第五，把界面做的环环相扣比直接排版要好。
一段平淡无奇的文字，无疑会让用户失去兴趣，继续阅读。是的，单栏滚动的长页面是好的，但我们应该适当地设置一些部分，并相互链接以增加用户兴趣并让他们继续阅读。但需要注意的是，节与节之间的留白不能太大。
第六，让界面显示流畅，不死板。
期间用户的操作，界面上的元素会经常出现、隐藏、打开、关闭、放大、缩小和移动等。在这些元素中加入一些自然的动画，淡入淡出的效果不仅好看，而且更真实。本来元素大小和位置的变化就是一个需要时间的动画过程。但是注意不要把动画时间设置的太长，会让希望尽快完成操作的用户不耐烦。
第七条边框太多会让界面分崩离析。
太多的边界将占据主导地位。不用说，边框在划分区域设置版块方面确实起到了重要作用，但同时，其明显的线条也会吸引用户注意。为了在不转移用户注意力的情况下划分版块，在排版时，可以将界面不同区域的元素用空格分组，可以使用不同的背景色，可以统一字符的对齐方式，可以为不同的区域设置不同的样式。在使用所见即所得界面设计工具时，我们往往会很方便地在界面上拖出很多块，块太多就会显得杂乱无章。所以我们我将在各处画一些水平线来划分它。一个更好的方法是垂直对齐这些块，这样那些多余的行就赢了不要干扰视觉。
第八条界面设计一致。
在界面设计中尽量保持一致性已经成为一个普遍的规则。我们可以在很多方面努力做到界面一致，包括颜色、方向、表现形式、位置、大小、形状等等。然而，在使界面一致之前，记住适当地打破整体一致性也是可取的。这种偶尔不一致的设计，用在你需要强调的地方，就能起到很大的作用。所以世界上没有绝对的事情，要遵循一贯的设计准则，但适当打破这个套路。
第九条层次化的图形展示优于直白的文字描述。
分层设计可以区分界面的重要部分和不重要部分。要让界面有层次，可以在这几个方面做文章：对齐、间距、颜色、缩进、字体大小、元素大小等。当所有这些调整应用得当，整个界面的可读性可以得到改善。相对于在一个非常直白的界面上，用户可以从上往下一瞥的设计，这样清晰的设计也可以让用户放慢速度，慢慢阅读。这也让界面更有特色。就像旅行一样，你可以坐高铁快速到达景点(浏览页面顶部至底部)，但你也可以慢慢走，欣赏沿途风景。所以分层的设计让眼睛有了落脚的地方，而不是面对一片空白单调的屏幕。
第十，优化页面加载速度，不要不要让用户等太久。
速度很重要。页面加载速度和UI对操作的响应速度直接关系到用户是否有耐心等待。毫无疑问，每多等一秒，就会失去一些用户或项目机会。一个好的解决办法，当然是优化你的页面和图片。另外，心理学可以让这个等待的时间看起来不那么长。具体来说，有两种技术。一是显示进度条，二是展示其他相关或有趣的东西来吸引用户注意(就像它it’与其站在那里盯着一个位置，不如沿着传送带走。
至于Banner的设计，相信很多人都看到了这方面的经验分享。我也做过一些横幅设计，在其中通过不断的学习和实践，积累了一些小的经验和方法。在这里，我给大家简单分享一下我的横幅设计经验和注意事项。让让我们逐一分享这四个部分。
1、横幅设计中的文字注意事项
一般来说，制作横幅的网站分为两部分，文字和辅助图片。虽然辅助地图站的面积比较大，但是如果你不不加文字说明，客户不会明白你要在横幅中展示和说明什么，所以文字是整个横幅的主角。制作横幅时要特别注意文字的处理和摆放。
区分主要标志和次要标志。从主次来看，主标就是主标，字体要大，颜色要醒目。次要目标在内容和形式上都起到辅助主要目标的作用。一个好的banner标题文字处理是饱满而集中的。
如果主标过长，需求方不愿意删除的话，对主标中的重要关键词进行加权，突出主要信息，弱化德'zhi ,'何年份还有x 。
如果需求方整体文字太短，图片空间不够，可以添加一些辅助信息来丰富图片。比如加一些英文，域名，频道名等。
2、横幅有动态和静态两种。
在浏览网页的过程中，虽然闪动的图案会产生瞬间的记忆刺激，吸引注意力，但这种记忆往往是压抑的，久而久之容易产生负面效应，从而模糊记忆。稳定的画面不容易引起特别的注意，但如果有好的界面引导和内容，就能产生良性的记忆，持久而牢固。据粗略统计，100个Banner中有1/3是静态的。
3、 banner 重量比较轻。
以46860横幅为例。它最好在15K左右，但不要超过22K。而且8831的横幅最好在5K左右。如果不是7K以上，过大的横幅会造成网页的打开速度，导致浏览的下降。还有一个量的问题。广告太多会影响网页的浏览，导致反感。这也是一个问题。所以投放广告条要考虑广告的大小和数量，以及搭配问题。
4、从横幅的设计中，应该注意到：
横幅可以不要有太多的单词，只用一两句话来表达。
广告语言要朗朗上口，让人在第一时间抓住表达的重点。
图形唐不需要太复杂，尽量使用黑体等粗体字体，否则很容易在视觉上被网页的其他内容淹没。
图形尽量选颜色少的，能说明问题。
如果选择颜色复杂的物体，要考虑在色号较低的情况下，是否会出现明显的色点。
尽量不要使用彩虹色、光晕边缘等复杂的特殊图形效果，这样会大大增加图形所占的颜色数量，增加体积。
产品数量不宜过多。很多广告主总想展示更多的产品，从4-5到8-10不等。结果整个横幅就变成了一堆产品。
横幅的展示尺寸非常有限，放置的产品太多，反而被淹没，视觉效果大打折扣。所以产品图片越多越好。容易识别是关键。
"高质量是大家这是我们的目标，在网页设计领域也不例外。但是什么是质量？如何判断一个设计的好坏？我正好有一套方法可以找出网页设计中的质量重点。一旦你知道如何判断一个高质量的设计好在哪里，你就会掌握很多技巧，让你的设计更加完美。
接下来我会列出一些重点，并附上相应的例子，与大家分享我寻找高质量在其他人的网页设计。
1、空白
在优秀的网页设计中，我最关注的是设计元素之间留白的巧妙运用。注意不同内容块的间距和排列，可以让你的设计整体感大不相同，从而提高你的设计质量。
我认为处理留白的关键是整体感知设计元素。缩小设计草案的范围是个好主意。
有效控制空白空间的技术
在不同的情况下，留白的要求是不同的。你需要不断的训练自己知道留白可以带来的变化，从而有效的利用留白达到设计要求。这要看一但是一个人可以从实践中锻炼它。
使用网格辅助设计：使用网格当然可以帮助你理解元素之间的差距。
不断尝试：不断尝试-失败-尝试，直到你找到最佳解决方案。
留白不是浪费空间：留白并不总是等着你去填补。
那没错，少即是多：与其用你所有的想法填满一个区域，
2、像素级完美
有一种方法可以判断一个人是否真的全身心地投入了一个网页设计。有时它创造奇迹的是小细节，一些别人几乎察觉不到的细节。由像素级的完美，我的意思是在线条、边缘和边框上仔细考虑。不要只用一行，要添加更多的细节。细节可以是微妙的渐变，也可以只是1像素宽的细线(用来表示阴影或高光)。有了这些细节，你的设计会很不一样。有些设计师尤其擅长这个：科利斯塔埃德，大卫莱格特和沃尔夫冈巴特尔梅。
完美细节小贴士
为了达到这项技能的完美，不断的练习尤为重要。正如你所看到的，像1像素的线条这样简单的东西可以给设计增加非常酷的深度感。你不甚至不需要使用倒角或渐变，尽你所能在物体上制造一些真实的效果。
一定要注意细节：小细节是提高内容感官的关键。
想想像素级的问题：笔画、渐变、线条、阴影等。既能有效提升设计，又不会太宽。
前后对比：应用效果后，注意与无此效果前的对比。所以你可以知道这些细节带来了什么变化。
3、单词排列和字体选择提示
虽然大多数设计师不不要亲自编写网站的实际内容，它们对内容的整体质量仍然至关重要。设计师的作用是确保内容的呈现足够易读。
网页设计中字体选择的快速决策
看了上面这么多好的例子，以后选择字体应该会更加得心应手。然而，他们为什么感觉这么好？下次在自己的设计中会怎么用？
可读性强吗？唐不要害怕尝试粗字体。
你考虑过间距吗？对可读性起着决定性的作用。
你的字体给人带来什么心情？确保字体选择适合你的设计风格。
4、元素的组织
设计师这个职业吸引了很多人，因为创意产生的过程真的很有趣。我知道整理内容的过程并没有那么有趣，但是一旦你养成了整理内容的好习惯，你会发现其实并没有你想象的那么枯燥。内容的组织方式总是取决于情况，例如，这是什么类型的站点？页面上的特定内容有多重要？
关于如何放置内容以及在哪里放置内容，有太多可能的排列和组合。但是还是有一些小技巧可以遵循的。最基本的是先决定你的设计需要达到的效果。比如你在做一个卖东西的网站吗？是否要显示内容？还是在做用户注册页面？推广页？等等.
组织内容的技巧
当然，你可能会遇到需要打破常规，选择不同寻常的方式的时候，但你仍然可以遵循这些简单的技巧，以确保良好的内容结构和阅读顺序。你为什么要设计它？如前所述，确定设计的目标。
使用网格：网格帮助你最大限度地发挥页面的潜力。
测试元素位置：从访问者那里检查内容的可用性的观点。
去掉所有不必要的元素：不必要的东西应该去掉，或者至少不要放在显眼的地方。
注意力平衡：有些东西需要简化，这样其他的东西才能发光。
5、自我约束和微妙的细节
设计师总是在寻找创造冲击力的方法，总想做出独特的设计，创造出一些前所未有的效果。然而，有时自我克制也能产生影响。量变会导致质变，太多好也会导致不好的结果。一个好的设计师知道平衡点在哪里，能够避免让太多的特效毁了一个设计。
使用微妙细节的技巧
我觉得细微的细节可以把一个好的设计升华成一个出彩的设计。如果你还在寻找让设计与众不同的方法，微妙的细节是一个很好的尝试方向。以下是一些使用微妙细节的技巧：
创建一个详细的层：唐不要把自己挂在画笔或材料上，添加更多的图层，制作更多的细节。
尝试不同的透明度和颜色：有时只有3不透明度可以产生积极的影响。
拒绝胆怯：不要不要太担心微妙，或太不显眼。
6、充分发挥色彩的全部潜力
设计师一般喜欢根据自己的口味来选择颜色，真的很不专业。要决定哪种颜色最合适，你要时刻思考品牌需求，然后选择颜色组合，指定其专属主题和目标情绪。
在网页设计中使用颜色的技巧
色彩永远是一个值得探索和尝试的领域。尝试不同的组合和变化，可以给设计带来无限可能。但是，在选择颜色和配色时，您应该注意以下几点：
尝试：无聊的主题不要不一定要用乏味的色调。
多样性：尝试在你多彩的背景上使用渐变、重复的图案和笔刷。它it’光靠颜色让设计好看并不容易。
坚持主题：确保你的颜色与你需要展示的产品/服务相关。
7、做别人没做过的事。
最好的网站都有一些不寻常的，奇怪的，甚至离奇的设计。然而，那些挑战传统的尝试可能改变了传统的定义。另一方面，要做到完全原创，创造出闹鬼的人都做过的东西，真的是设计过程中最难做的事情。
打破常规之后，成功与失败只有一步之遥。要么你做出令人惊艳的巧妙设计，要么你做出一堆垃圾，被人诟病。别人从来不这么做是有原因的，因为有些想法真的很可怕。你必须非常勇敢才能走出人们知道和喜欢的领域。
实践新想法的技巧
上面的例子并不是为了激发你独特的想法，但我发现一些独特的网站，这这就是全部。事实上，你不应该不要到处寻找新想法的灵感，因为那样你的想法也是别人的灵感，这与完全创新是相悖的。所以，如果你想做出真正非凡的东西，就忘掉这一部分吧！
确保事物之间的联系：如果你要做一些特别和独特的事情，首先问问你自己。真的有必要吗？""这有道理吗？""是否符合品牌诉求？"…如果答案是肯定的，那么就采取行动吧！
