ui和ux设计基本原理

　　UI与UX,如果您进行了有关软件设计的任何类型的研究，您可能已经听说过“ UI”和“ UX”这两个术语。
 

　　UI和UX的区别是什么?
 

　　以最简单的形式UX设计是使界面有用的要素，UI设计是使界面美观的要素。对于UI，这包括视觉层次结构和界面元素的混合。要了解将好界面与好界面区分开的原因，必须了解UI设计仅仅是整个设计过程的一层。也许这就是为什么人们经常混淆UX和UI的原因。但是，在接下来的几段中，我希望作为听众或读者帮助您了解设计过程中差异之处。
 

　　根据Garrett在《用户体验的要素》中的介绍，可以从五个主要方面来理解UX。让我们从最抽象的平面开始：
 

产品设计的第一平面
 

　　从较高的层次看，第一平面实际上是产品设计的起点。在这里，您将采用不同的研究方法，包括用户访谈，竞争性分析，用户角色和其他研究方法，以了解：
 

　　您要解决的问题是什么?
 

　　您的用户需求是什么?
 

　　您的产品如何适应业务环境(产品目标)?
 

　　第二架飞机：
 

产品设计第二平面
 

　　在此阶段，您应该定义平台的功能规格和内容要求。换一种说法：
 

　　您如何通过平台解决问题?有哪些功能，您如何确定它们的优先级?
 

　　设计人员面临的挑战是在优先考虑功能的同时最大程度地权衡取舍。当然，您可能有数百个想法可以解决问题，但是您不能全部实现。
 

　　第三架飞机：
 

　　在此阶段，您的想法应开始形成结构。信息架构与应用程序中信息的组织方式以及用户如何认知地处理信息有关。用户流可以勾勒出用户通过该应用程序进行的特定旅程，以帮助解决他们的特定需求。它涉及使您的用户满足其需求的最合乎逻辑的步骤。
 

　　下一个层面是事情变得不那么抽象，更具体的地方：

　　骨架平面试图实现界面设计和信息设计的结构。界面设计与特定界面元素的布置有关，以使用户能够与系统的功能进行交互，而信息设计与信息的呈现有关，从而有助于理解。
 

　　在此阶段，您可能会发现UX或产品设计师在线框上进行设计，测试和迭代。线框的保真度非常低，通常是灰度模型，它们向用户展示了每个界面元素的意图。
 

　　最后，最具体的飞机：

　　顾名思义，水平面致力于获得出色的感官体验和视觉设计。设计师的目标是通过以一种凝聚力的形象成功传达品牌，产品，价值和功能，与用户建立内在联系。
 

　　在这架飞机上，您会发现UI设计师和视觉设计师使用诸如Sketch，Photoshop，Adobe Experience Design，Illustrator或Figma之类的工具来完成大部分工作。
 

　　接下来，让我们进入UI设计的一些基本原理。
 

　　原则1：清晰至上。
 

　　没有比应用程序中的歧义更糟糕的了。该按钮有什么作用?我怎么到这里了?我该如何回去?为了避免这种情况，设计人员应始终问自己：
 

　　为什么在这里?这有意义吗?我还能探索什么其他可能性?
 

　　优秀的设计师知道如何探索界面布局的各种可能性，每种界面的潜在权衡，以及了解哪种设计可以帮助用户最好地实现其目标。设计上的清晰度使用户在浏览您的应用程序时感到自信。
 

　　原则2：提供清晰，有意义的反馈
 

　　我们都使用了网站或应用程序来尝试单击按钮，并且我们想知道系统是否注册了该点击。
 

　　简而言之，每个动作都需要一种反应。例如，如果您是Web开发人员，则更改按钮的：hover状态是一种常见的反馈形式，它可以使您的用户了解其悬停操作。

　　一个很好的例子是Facebook使用其骨架加载状态。当用户等待其内容加载时，内容形式的加载状态会为用户提供有意义且相关的反馈，以使用户了解其内容正在加载。
 

　　原则3：一致性很重要。
 

　　当提到一致性时，我指的是整个产品中界面元素或语言的一致性。用户开始学习如何使用产品后，就不必重新学习它了。让我们来看一个不良一致性的例子。
 

　
Xfinity主页
 

Xfinity电视页面
 

Xfinity个人页面
 

　　上面的示例可能看起来像来自3家不同公司的3个网站，但实际上并非如此。是什么让人们觉得呢?好吧，每个页面的导航栏使用不同的颜色，布局和字体样式集。作为用户，这可能会造成混乱和迷惑，并且用户可能会忘记这些都在一个网站下。
 

　　作为设计师，您如何在整个应用程序中保持一致性?您可以使用一致的网格系统设计应用程序，例如在移动应用程序和图标设计中找到的常见8点网格系统。您还可以在整个屏幕上保持一致的配色方案和导航元素。这些元素都可以植根于样式指南中：

　　关键是：良好的一致性和结构会让您的用户有宾至如归的感觉。

　　原则4：如有疑问，请使用已建立的设计模式。

　　在这里请不要误会我的意思，即创新是令人敬畏的，而且值得鼓励，但创新不应该以牺牲用户体验为代价。如果车轮在完成工作方面做得很好，则无需重新发明车轮。例如，如果您不确定图标是准确还是直观地表示一个单词，则只需在该位置使用该单词即可。或坚持常见的颜色模式，例如红色阴影以警告/警告用户，或绿色以标记完成。
 

　　为什么要使用既定的设计模式?好吧，其中之一，许多已确立的设计原则都基于人类的感知。在读取内容块时，让我们采用F形读取模式或眼睛扫描模式。
 

F形阅读模式。
 

　　这是根据从眼睛跟踪实验收集的数据生成的热图。红色区域代表查看最多的部分，而蓝色区域代表最少的部分。如您所见，生成的热图在某种程度上类似于字母F。但这对设计师意味着什么?
 

　　这意味着您应该将最重要的内容放在左上角。

　　例如，通常会在左上角找到徽标。这使公司可以加强其品牌形象。在右上角，您通常可能会找到要导航的页面，或者可能是搜索栏。这使用户可以轻松导航不同的页面，而无需在整个页面中搜索导航元素。这是两个遵循此设计模式的示例：
 

　　随着您在页面上越走越远，用户的注意力可能会枯竭。因此，将最重要的内容放在顶部，并为用户提供大胆的标题，以使您的内容易于扫描。
 

　　原则5：使用视觉层次结构。
 

　　什么是视觉层次?嗯，元素的排列方式暗示了相对重要性。这是设计师尝试引导眼睛感知呈现的信息的顺序。
 

　　我们感知信息的方式是通过促成几个因素的影响如何，我们排名布局中的内容的层次结构。让我们跳入一些层次结构基础知识：
 

　　一，版式
 

　　什么是好的排版?两个主要因素是可读性和移植性。
 

　　易读性是一种字体的先天品质，它使每个单独的字母形式彼此区分开。这完全取决于字体，因此您无法做任何使字体更清晰的事情，因此请适当选择。
 

　　可读性取决于您如何操作特定字体以使其更易于理解。

　　注意顶部字体比底部字体难读吗?如果不…
 

　　现在呢?
 

　　决定某项内容易于阅读的另一个因素是行长。如果行太短，并且阅读器不断在行与行之间跳动，则阅读器很难吸收信息。如果线长太长，也会发生同样的情况-眼睛很快就会疲劳。
 

　　另外，切勿将大块副本居中。对于我们来说，阅读左对齐的文本块要容易得多，因为眼睛可以准确知道下一行的开始位置。
 

　　二。空格(又称负空格)
 

　　有没有人看过菜单/网站/界面，然后想到：“这看起来很棒，但我不确定为什么吗?”现在好了。答案是空格。空白有助于极大地提高可读性和理解力。一项研究(Lin，2004年)发现，在段落之间以及左右边界处充分利用空白可以将理解力提高近20%。读者发现更容易集中精力处理大量的内容。
 

　　正空格=狗。负空间=目录
 

　　许多人认为空白取决于“味道”。我认为这比这更客观。我们可以有意地使用空白来创建强大的层次结构。让我们看一下Helen Tran的网站，以及她如何有意地使用空白：

　　请注意如何有4个清晰的内容块。让我们进一步分解一下：

　　Helen使用行高，字体大小，颜色和空白的组合来分隔每个块本身内的内容。这使用户可以轻松自然地浏览这些内容块的各个部分。
 

　　三，颜色
 

　　颜色理论真的非常复杂。我的目标不是解释颜色理论的全部，而是为您提供一些广泛的概念，您也许可以立即在UI设计中加以利用。
 

　　如果您凝视上面的图片，您会注意到左侧的蓝色方块感觉更远，而右侧的红色方块感觉更近。暖色朝您身上，而冷色则逐渐淡入背景。让我们在UI示例中看一下：
 

　　在上面的设计中，我们可以看到设计师如何使用暖红色将号召性用语(立即更新)向前移动，而如何使用较冷的蓝色将导航移到更远的背景中。左图中的情况相同。红色的闪电图标立即在界面的其余部分中脱颖而出。
 

　　您还可以使用颜色将相似的界面组件组合在一起：
 

　　最后，少即是多。颜色越多，每种颜色的影响就越小。一个很好的例子是Instagram最近的重新设计：
 

　　颜色的减少不仅使照片更加突出，而且还提高了通知的有效性，因为它们不再与顶部和底部导航栏中的颜色竞争。