简单的Web设计技巧，以取得良好的效果
已发表: 2020-12-17有无数种设计网站的方法。 考虑到这一点，也有无限的方法将其弄乱。 有两种主要方法可以避免进入第二类–学习设计基础并相应地应用它们。 您还需要足够的经验，以了解什么有效，什么无效。
所有设计师都采用不同的学习途径，并且通常处于其旅程的不同阶段。 如果您正在阅读本文，希望您也正在尝试进一步改进工作并产生更好的设计。
不幸的是，没有办法将所有需要的知识放入1500个单词。 相反，我们仅针对一些技巧，使您重新考虑如何使用UX / UI元素。 理想情况下，这种思维方式也可以应用于设计工作的其他领域。
从对产品/站点的充分了解开始
当您不完全了解内容/网站时，进行设计非常困难。 现在，您不必为了学习医学网站而学习医学，这不是目标。 但是，您应该知道用户将如何访问他/他可能需要的任何信息。
如果您想设计一个音乐制作应用程序，首先应该抓住一些现有的应用程序，与它们一起玩耍以使他们对它们有一种感觉，了解其背后的理论以及某些元素的功能。
理想情况下，您应该与客户一起工作，客户也应该非常参与该项目，并希望帮助您为他们的用户实现更好的UX。
但是，如果您对网站的内容及其解决的问题缺乏基本的了解，则可能会削弱用户体验，或者强迫自己遵循现有的解决方案，然后重新设置外观（有时可以使用）。
对于网站，您应该将站点地图放在前面，以便进行正确的导航并确定哪些元素适合某些目标网页。 如果您进行“巧克力工厂”设计，则可以直观地展示其制作过程或进行信息转储。 这完全取决于站点的目标。
所有这些信息都是您事先需要的，以便获得更高的成功率。 考虑到这是多么复杂，如果您是初学者自由设计师，可能会遇到这种情况，因此最好从一开始就提出很多问题。 如果您在团队中工作，请不要忘记与团队成员就内容，UX，目的等方面进行协商。
设计特定的技巧和窍门：
现在，让我们看看可以在下一个设计中使用的一些特定的UI / UX技巧：
1 –对比！
弄乱网站上的对比非常容易。 找出经验不足的设计师的快速方法是检查整体对比度。 请参阅以下示例：
资源
看到文字无处不在吗？ 具有白色文本的绿色按钮，浅灰色的文本？ 让我们将其与更具对比性的UI进行比较：
资源
字体的很大一部分是黑色（或接近黑色），而不太重要的信息则稍微偏灰。 绿色较暗，现在允许在顶部显示白色文本。
这里的提示是–当您处理文本时，请以黑底白字或黑底白字开头。 当您添加更多元素并且需要按照视觉层次进行分隔时，请尝试首先加粗或更改字体大小。 只有在那之后，如果它不起作用，就会进行颜色更改，但理想情况下，色差不得超过30-40％（通常将不透明度设置为70％）。
2 –一致的空格
另一个常见的错误是元素之间的间距不一致。 实际上，这种情况是如此普遍，以至于大多数设计师经过多年的努力仍在为此苦苦挣扎，这是可以理解的–我们用鼠标移动盒子。 轻松滑动一下并将其向侧面移动一两个像素很容易。 否则您可能还没有很好地训练自己的眼睛，无法直接发现这种差异。
在下面的示例中，查看不同组件周围如何具有不同的空白。 有些杂乱无章，有些间隔很大。 它在视觉上看起来不太连贯。
相比之下，这是一个示例，其内容/组件类型或多或少地相似，但外观更加一致：
资源
有多种方法可以实现此目的，但是在大多数情况下，仅靠测量是不可行的。 当您查看它时，通常是一种“感觉”。 它看起来平衡吗？ 如果您有盒子，可以随时测量侧面的30px，标题下的30px，字幕下的15px等。这是一个好方法！ 但是，对于较大的视觉元素（如标题或图像），您可能需要增加一点以弥补较重的元素。
3 –颜色
好的设计的另一个基本组成部分。 颜色必须配合良好。 访问网站的一种简单方法是坚持单一原色，并使其余单色保持单色。
下面的示例遵循了到目前为止的所有三个建议-良好的对比度，平衡度和颜色的使用：
资源
一种简单的从颜色开始的方法是遵循https://colorhunt.co/等网站上的一些受欢迎的配色方案，或者从Dribbble获取灵感以进行组合。 使用色轮有助于确定组合，但是设计师通常需要一点额外的努力来确定最佳组合。 色轮通常无法产生出完美的色彩来应用到设计中。
来自Adobe色轮的示例：
资源
中间是不错的绿色，但在左侧/右侧很难使用结果。
4 –在整个网站上坚持一种风格
建立网站的感觉是设计师的主要工作之一。 尽管“漂亮”的概念很难定义，尤其是因为人们通常对好的和坏的看法不同。 。 不必担心这一点，而要关注一致性并坚持使用样式。
这意味着什么？ 好吧，让我们设计一个按钮。 我们设置字体大小，字体，颜色，背景，间距等。我们得到如下信息：
现在，如果我们要添加图像和标题，我们可以实现以下目标：
看角落。 所有完美的90度拐角，无圆角。 现在，这意味着我们的设计将主要跟随尖角。 如果图像也具有这些完美的角落，则看起来更加一致。 就像我们添加输入一样，它们都将具有这些更尖锐的角。 让我们再添加一个元素：
我们在右上角和左下角添加了一个网格框。 这些本来可以是圆形，但是为了保持鲜明的外观，我们将它们设置为正方形。 在整个站点上应保持相同的想法。 如果您开始更改元素，则可能会开始失去它的感觉，从而导致设计不一致并削弱品牌。
这是上面相同的设计，但具有圆形外观：
一样，但是现在感觉却大不相同。
5 –组件设计
所有现代设计工具（例如Figma和Adobe XD）中都存在组件。 它们存在的理由非常充分-开发人员以尽可能重用它们的方式来实现站点。
如果您将上述元素制作为类似的元素，则只需将其“复制”粘贴到另一页上，它就可以正常工作。 无需再稍有差异地对其进行编码。 作为设计师，理想情况下，您希望以类似的方式重用组件。
如果您制作的主页上连续有3个帖子，也许您可以重复使用主页上的同一帖子。 这样可以节省您的时间，节省开发人员的时间，并使设计与用户保持一致。
资源
想象一下，您正在执行部分标题。 如果您需要有8个带标题的部分，您是否会每次都设计它，还是会复制粘贴？ 理想情况下，您想重用它。 但是，如果您必须将其从居中更改为左对齐该怎么办？ 也许改变一点大小，也许改变颜色？ 提示是尝试而不是这样做。 尽量保持原样。 如果您确实需要其他视图（除了左对齐/居中/右对齐），请尝试仅进行一种更改。 没有五个或十个。
DevriX的示例
综上所述：
为了获得良好的结果，您需要深入了解设计基础，例如颜色，对比度，空白，平衡，视觉层次，顺序等。 当您考虑到这一点并专注于可用性，一致性和样式时，即使这不是“哇！” 设计上，它在各个方面都将稳固并发挥良好的作用，从长远来看，通常可以为品牌带来更好的效果。