哈喽，大家好。北京5PLUS学院为了帮助更多的小伙伴提高设计ui水平和设计意识，会整理一些比较细致且有实际案例的设计知识分享给大家。5PLUS是一所专业ui设计学校、ui设计 培训机构，有很多出色的ui设计师学习在这里学有所成。如果觉得好，就分享给更多人吧。

我们的设计师经常将项目启动比作火箭或飞机。按照这个比喻，网站是火箭的演示，而应用程序是发射控制面板。这就是主要的区别所在。

想象一下，一个对驾驶舱负责人一无所知的人。他们一眼就能知道如何起飞和飞行吗？如果你给他们一套简单而全面的指令，如果控制面板是直观的，他们就会这么做。这正是UX/UI的目的:帮助用户快速找到他们的方法并完成他们的目标。

最受欢迎的事情是那些让生活更容易的事情。因此，今天设计师和开发人员的座右铭是“让我们让它更简单、更容易!”

（飞机控制面板看起来仍然很复杂，因为网页设计师还没有动手。）

让我们来看看如何简化和改进功能，以便用户可以“进入，按下按钮然后起飞”。

功能简约

应用程序通常用于完成简单的任务。他们不应用繁琐的动作使用户疲惫不堪并使他们偏离目标。

功能极简主义是“基本”的原则。这适用于所有内容：内容，动作数量，设计元素。网站负担得起许多内容和引人注目的设计功能，而对于应用程序而言，视觉空间太小，因此必须严格按照业务进行。但是“没有多余的装饰”并不意味着它应该是无聊的，简单的或单调的。

这是什么意思：

• 最低认知负荷；
• 最少的动作；
• 逻辑动作和过渡；
• 简单的动作；
• 简单的设计。

移动应用程序设计基于功能极简主义的这些原则。简单的图形，元素之间存在负空间，简单而小的调色板。任何设计元素都必须具有功能上的合理性。

秩序，一致性，可预测性

秩序是把所有必要的东西有组织地呈现在屏幕上。它是内容的结构化层次结构，是从入口点到应用的主要目标的逻辑顺序。

用户考虑的事情越少越好。让界面来引导他们。这意味着没有分心的简单方法。并不是每个人都像设计师那样专心，所以不要让他们搜索所需的东西或试图弄清楚一切在哪里。

导航应该一致且易于理解。让用户在屏幕之间迷路是绝对不可原谅的。因此，请勿隐藏导航元素或在过渡期间移动它们。如果需要，可以使用视觉提示。

值得注意的是，并非所有组件都需要具有焦点状态。我遵循的简单规则是，如果组件不是交互式的，则它不需要焦点状态。例如，标题或段落不需要焦点状态。但是段落中的链接确实需要焦点状态。这同样适用于模态，对话框，导航栏，整个屏幕等。

互动

拿电话的方式

要设置导航程序，你必须了解用户如何与他们的移动设备进行交互。不同的应用程序任务需要不同的交互方式。重要的是要确定将哪种方式用于你的特定任务，并记住人们会根据情况以不同的方式握住手机。主要有三种方式：单手操作，用一只拇指；两只手，用一只拇指；和两只手，用两个拇指。

这是来自Steven Hoober的帮助理解图：

人们如何握住手机并与之互动

一款应用应该易于使用，并且可以在大屏幕上使用。这是一只手的互动：

用一只手握住触摸屏电话的方法

手势

通过手势导航应用程序对于用户和开发人员都具有许多优势。手势必须是自然的，合乎逻辑的，并与手头的任务相关。

最受欢迎的手指手势包括：

• 触碰
• 快速
• 长按
• 双击
• 拖曳
• 轻敲
• 滚动
• 两指滚动
• 缩放和传播

用户习惯于某些交互模型，因此最好利用熟悉的模式。这里不应该有任何意外。

动画

动画使界面更加活跃，并能帮助交互。它必须是严格的功能性作用，永远不要太长或成为干扰。

游戏化

激励用户使用你的应用程序的最佳方法是增加游戏机制，只要它适合应用和用户的目标。

一切都必须近在咫尺！

或更确切地说，触手可及。主要动作应该通过突出图标或按钮的位置来吸引用户的注意。菜单选项应该足够大，便于选择。元素不能太小或杂乱地排列在一起。不是所有的人都有纤细的手指和完美的运动技能，所以要记住这一点。

元素不能太小或太杂乱

输入数据的字段，要填写的表格和要进行的选择都应位于屏幕的下部。前进所需的信息必须位于拇指区域内。

模糊方法

使用此方法，你可以一眼看到用户看到的内容，并检查重音是否正确放置。你可以使用模糊效果或者只是戴上了错误的眼镜——任何能让你看不清元素的东西。

让我们看一个模糊的填写表格的例子：

看来你需要选择一个选项，然后按黄色按钮。但是，原始图像如下所示：

这意味着强调符号是错误的。重要按钮被遮盖，并且强调符号位于错误的按钮上。用户迷失了方向。他们自动按下黄色按钮，然后转到错误的目的地。

模糊方法对于检查界面是否将用户引导到正确的位置很有用。这是将主要功能与次要功能分开，识别缺失的重音和单调的简单方法。通过识别错误，我们可以强调最重要的功能并在视觉上淡化次要功能。

为了确保重要的界面元素即使在弱光下也清晰可见，我们必须利用对比度原理。

位置

局部性原则与交互的一般原则（即元素的可访问性）相似，不同之处在于它与视觉和心理感知有关。

任何以结果为导向的行动都必须在接近采取行动的建议时采取。

设计师通常倾向于将元素放置在可以为其找到空间的任何地方。但是，如果我们在谈论任何动作，那么从逻辑上讲，有助于执行该动作的元素必须紧密，并且越接近越好！

而且，我们不要忘记事件的进展。假设你需要在播放列表中放置一个“添加”按钮。将其放在列表的底部似乎合乎逻辑：

但是，当用户创建长播放列表时会发生什么？该按钮将下降到底部，下次打开该应用程序时将不可见。

局部性原则指出，不得将重要元素移到不再可见的位置。

避免填写冗长的注册表

较大的表格应分为几个屏幕，并逐步填写。表格只需要绝对必要的信息。为了加快并简化填写过程，你可以使用自动提示，“前进”和“后退”拇指按钮，并避免使用滚动条。

避免使用下拉列表

在应用程序中，下拉列表不是一个好主意。它们需要大量的单击和滚动，这既烦人又耗时。长列表不适合显示在屏幕上，可能会迷失方向。最好找到下拉列表的替代方法。有限的选择可以用图标表示，而较长的列表可以使用提前输入。

文字

所有应用内文字均应简短，简洁且易读。

易读性

为了在不放大的情况下易于辨认，文本必须与背景形成对比，并且不得小于11pt。易读性在很大程度上取决于字体，行距和字距。

简洁

不要试图将尽可能多的文本填充到屏幕上。文本越少，它就越容易理解。这也适用于用户输入的文本。最好在表格中使用自动提示以最大程度地减少手动输入的信息量。

用图像替换文本

只要有可能，均应将文字替换为视觉提示。例如，使用简短的视频或简单的插图代替书面说明。

测试

你应该始终对项目进行测试，以获取独立的用户反馈，并确保按设计者和开发人员的意愿使用你的应用。

原文链接：

https://medium.com/outcrowd/improving-mobile-app-ux-ui-c4658620448e

作者：Outcrowd