火星网校
5个UI设计技巧，可帮助创建有效的用户界面设计
发布时间：2023-12-01 10:34:57 浏览量：202次
设计是一种技能，它是一种手工艺品，而且这并非总是容易的手工艺品。
我已经担任设计师多年了，很幸运能够在不同领域进行设计。在过去的十年中，我从事用户界面设计和用户体验设计的工作。
设计用户界面可能具有挑战性，因为我们作为设计师承担着许多责任。我们要求用户实现他们的目标。我们希望引导他们及时完成任务。我们希望减少学习和认知成本。我们希望提高知名度。我们希望他们体验快乐。无论他们的互动是认真，有趣，强制性的还是无聊的结果，最终我们都希望他们至少对摆在他们面前的输出有愉快的体验。
那么我们如何实现这一目标呢？
用户界面提示
网络上有很多指南，特别是对于设计师而言。并且充满了杰出的人才，他们都展示了其如何做开展的工作。根据我多年的经验，我发现了一些技巧，这些技巧在我每次工作时都有很大的帮助。
提示1.创建排版层次结构
层次结构：根据人员或事物的重要性对其进行排列的系统
排版应始终遵循基本的层次结构定义。排版是出版视觉印刷体系的第一种媒介。想象一张报纸。它包含一个主要标题-最大的印刷元素，副标题-通常是文章的标题和正文-文章本身。
定义明确，结构良好的类型层次结构可营造秩序感，并帮助用户以自然的阅读模式阅读。由于将重要元素与次要元素区别开来，因此提高了它们的速度和数据定位能力。
如何创建排版层次结构
首先，我建议减少印刷样式的数量。我发现3种标题样式足以满足2种正文样式，总共只能创建5种样式。我还建议仅使用两个粗细的字体。常规和粗体，或轻和中，具体取决于每个字母形式的字符粗细。从本质上讲，重量上的差异应该足以使重要元素与其他元素区分开。
看起来如何？
这里仅存在三种字体，但非常容易被吸引到标题上，但是，这并不能阻止眼睛自然地阅读随后的故事。此字体使用较薄和中等重量，这是因为它具有较重的加粗样式，在我看来，与其他可用重量相比，对比度太强。仅使用两个权重就可以使主体突出句子的关键部分。
与印刷术有关的另一个技巧是使印刷术样式降至最低。丰富的风格和家庭风格会给人一种草率和支离破碎的感觉。避免混合使用斜体和粗体。我也更喜欢只使用一个字体家族，但是，如果所有标题都使用一个家族，而正文使用另一个字体，则采用两个字体家族可能是有效的。在这种实践中，将sans字体与sans-serif字体一起使用通常会产生最佳效果。
技巧2.保持一致
一致性消除了混乱并减少了学习。
混乱是一种不舒服的情绪。我们的大脑喜欢划分。混乱需要认知努力来计算当前的不确定性。具有相同交互作用的元素的多种设计样式；例如，多种主要按钮样式或多种输入样式有可能引起用户混乱和不确定性。
采用一致的设计模式有助于消除混淆，并减少用户期望的认知工作量。
一致的设计模式还减少了用户存在的选项数量，因此减少了单次使用交互行为的数量。删除选项可以增加剩余选项的熟悉度和期望值。
如何保持一致
在创建界面设计时，重用是一个很好的动词。一旦对表示主按钮等元素的样式感到满意，请将其创建为可视组件，以便您可以一次又一次地重复使用它。如果你需要相同元素的相似实例，但需要进行较小的更改，例如较小版本的主按钮，请使用原始的主按钮组件并减少内部填充以创建新的但几乎相同的版本。避免更改其他视觉元素，例如边框半径或粗细，甚至避免更改字体粗细，因为像这样的细微调整会给用户带来潜在的困惑。
如果使用Sketch，Figma或Adobe XD，则这些工具中的每一个都会促进创建旨在重用的设计组件的想法，因此我完全支持使用这些功能。
一致性是什么样的？
上面说明了如何将主要和次要按钮设计为不同而又一致。一个界面上存在许多元素，因此减少各种不同样式和相关元素的解释非常重要。保持视觉简洁。保持样式一致。
技巧3.创建自然的灰色
创建调色板时，我总是选择两个主调色板来构建我的界面。第一个是单色调色板，它从同一色调提供不同的状态和阴影。本质上是灰色到黑色的调色板。第二个是单色调色板的复制，仅当我增加颜色组合的蓝色和绿色值时。在单色调色板中使用均匀混合的红色，绿色和蓝色值没有什么问题，但是在我眼中，一旦更改了蓝色或绿色值，它就会消除一些“刚性”。
这种方法还有助于增加对比度的元素所占的表面积较小。对于可能用作<Hr />元素的单个像素边框或其他设计修饰（例如无效或禁用的标签），创建现有灰度的第二个版本并增加颜色值会使颜色稍微加深，而无需创建新灰色。
如何创建更自然的灰色调色板
此过程没有对，错或科学的方法，只需你自己判断即可。
我首先复制灰色单色调色板，然后通常尝试保持“红色”值不变。但是，对于较深的阴影，“红色”值的确会略有减少，因为在向下移动调色板时，需要减少的白色量。
然后，我将“绿色”和“蓝色”值增加到对灰色的自然外观感到满意的程度。我尝试避免将每个值增加5点以上，因为这有可能创建一个全新的阴影，而不是其灰色前身的自然版本。
蓝灰色调色板是什么样的？
下面显示了我用于创建用户界面设计的两个调色板。这些颜色还有其他较暗的混合，但是出于本文的目的，我将图像裁剪为仅显示5。
如你所见，此方法将创建更自然的灰色调色板。当我们在自然环境或建筑环境中环顾四周时，灰色永远不会100％是红色，绿色和蓝色。阳光，反射，阴影和明亮的蓝天，都扭曲了我们对颜色的判断，尤其是灰色。建筑物可能只使用了一种色调的灰色油漆；但是，我们的解释并不总是能反映出这一点。
技巧4.不要依赖不透明度
在为诸如导航栏或标题的元素创建设计时，减少前景版式和背景之间的对比度的一种常用方法是将字体涂成白色，然后降低其不透明度。问题是造成不一致。原因是不透明度是两个元素之间的颜色混合。前景和背景。如果这些元素之一是一致的，例如我们的白色nav排版元素，但是背景颜色不一致，即渐变的颜色发生变化，则每个前景nav元素放置在不同背景上方时，它们看起来会彼此不同。颜色。
或者，如果前景色与背景元素来自相同的色相/颜色，但没有应用任何不透明度，则背景渐变将对前景色的外观没有影响，因为不会发生颜色混合。
相同的色相/颜色如何应用？
首先，使前景类型与背景元素具有相同的颜色。我打开调色板，并停留在顺化的同一区域；但是，我降低了前景色的饱和度。
从上面可以看到，我选择了位于同一颜色区域内的前景色（右颜色选择器），但是饱和度（蓝色值）降低了。这将两个对象对齐在一起，从而产生更加和谐的色彩平衡。
实际上这是什么样的？
左侧图像使用不透明的白色。正确的图像使用相同的颜色，但饱和度较低。
该图清楚地显示了左侧示例中的“我的帐户”标签看起来比右侧示例中的饱和度更低。结果，该字体看起来灰暗且无光泽，这也降低了字体的对比度和可读性。
技巧5.不要害怕空格
来自拉丁语的vacuor恐怖片是对空白空间的恐惧。在艺术和数字设计中，填充空白空间的诱惑比看到大面积的白色（负）空间闲置时感到不适的感觉要容易得多。不幸的是，管理人员和客户常常将空白视为浪费的空间，这使得引入和使用空白的工作变得更加艰巨，因为还需要一些教育方面的知识。
正确使用时，空白会在对象之间建立关系，定义顺序和优先级，建议移动，并可以帮助强调或不强调特定内容，例如横幅，促销，英雄部分等。
如何处理空白
首先，将空白视为正空间。不要害怕。一旦你对在设计中引入空白的想法感到满意，一个好的实践就是从超出你需要的空白开始。大胆。太过分了。在内容或UI组件之间创建空间时，请从所需的更多空间开始，然后逐步向内逐步减少空间像素的数量。您很快就会找到理想的空白区域。
如果以相反的方式开始，即首先将元素紧密地放置在一起，然后慢慢增加它们之间的空白，那么你引入的空间可能比上述以相反的方式开始时要小。
空白是什么样子？
你可以从上面的示例中看到，尽管右侧的每张城市卡的尺寸都与左侧的相同，但可以感觉到右侧的尺寸更长。我增加了每张卡中的空白量，在城市名称和城市形象之间，每颗星星之间以及通过将城市价格重新定位在右侧来增加了额外的空白。这些调整会在城市名称周围创建更多空白区域，从而提高可见度，突出性和重要性。
我希望你发现这些技巧有用。正如我在本文开头提到的那样，这是5个技巧，我总是在新项目开始时就采用这些技巧。这些提示将有望帮助你创建有效，平衡和成功的用户界面。
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
学习平面设计要用到哪些软件？随着社会的发展，平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗？本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
最新文章
