如何让你的想法看起来不错：移动应用程序视觉设计初学者指南
已发表: 2015-11-24你有没有想出一个绝妙的应用创意，但不知道字体和字体之间的区别，或者认为汉堡菜单是你只能在得来速时看到的东西？ 即使是几乎没有经验的企业家也可以使用合适的团队和工具创建出色的应用程序，但了解线框图的方式并没有什么坏处。
无论您是移动 UI 设计的新手、正在考虑尝试创建应用程序，还是只是一个有一些好主意的好奇用户，本指南都将帮助您在使您的应用程序看起来更好时走上正确的轨道 - 并且，更重要的是，在用户手中感觉良好。
移动应用视觉设计的基本原则
初学者设计师和企业家最常犯的视觉设计错误之一是假设移动应用程序只是桌面应用程序或网站体验的较小版本，具有所有相同的内容、特性、功能和用户界面元素。 如果这是你养成的习惯，现在是时候放弃它，永不回头。 移动应用程序 UI 设计本身就是一种独特的动物，设备、操作系统和用户行为的限制决定了与大型计算机上适合的体验截然不同的体验。
即使您有其他媒体的设计经验，并且已经具备区分出色视觉设计的诀窍，为平板电脑和智能手机设计应用程序也需要您至少了解一些有关您正在使用的技术的知识。 屏幕尺寸是一个明显需要注意的参数，但实际设备的速度和电池寿命也是如此。
此外，对于在各自操作系统上运行的应用程序，Apple 和 Android 都有自己的设计理念和建议。 遵循这些准则可以帮助您的用户在使用您的应用程序时感受到连续性和能力——毕竟，他们在一天中都在使用其他应用程序。
为可穿戴设备设计时也是如此。 例如，FitBit Flex 或 Charge 只有一条细黑条用于显示其 UI。 他们如何将步数、爬楼梯、燃烧的卡路里甚至日期和时间等信息放入如此小的空间？ 更好的是，它们如何使它变得如此实用和美观？
通过承认空间的限制，优先考虑用户需要知道的内容和时间（最重要的是，允许用户更改屏幕顺序以适应自己的需求和优先级），并使用简单、易于识别的图标。 如今，每个人和他们的母亲（甚至美国总统！）似乎都有一个 FitBit 是有原因的，而良好的视觉设计是其中的一部分。
不要压倒屏幕
让我们把显而易见的事情排除在外：即使在平板手机时代，移动应用程序也不会为您提供大量的屏幕空间供您使用。 确定移动视觉设计的最重要方面之一是确定在给定时间真正需要在屏幕上显示的内容。
听起来很简单，对吧？ 好吧，一旦你开始深入研究它，它并不总是完全切割和干燥的。 您可能对您希望登录屏幕的外观有一个想法，但是一旦您创建了数字原型，您可能会发现您无法适应您最初想要的所有表单（或者您可以，但它看起来很糟糕，感觉更糟）。 或者，您可能会发现您想到的优雅简单的登录屏幕对于需要更多指导的用户来说完全不直观。
那么你如何决定去哪里呢？ 其中大部分都伴随着实践、用户测试和对其他应用程序正确之处的感受，但也有一些一般性的指导方针需要遵循。
不要压倒用户
当用户第一次打开你的应用时，他们怎么知道该怎么做？ 体验是否直观？ 如果没有，您将如何向用户展示您的应用程序的各种特性和功能？
确保您达到最佳状态的两个重要方法是设置焦点和建立视觉层次结构。
正如我们之前所写的，优先考虑您的屏幕，以使某些元素比其他元素吸引更多关注，这只是一种良好的视觉设计，无论使用何种媒介——这并不是移动应用程序 UI 所独有的。 但是，如果没有清晰、稳固的层次结构，您的 UI 将会失败，并且空间的限制使得您的焦点易于识别尤为重要。 此层次结构可帮助您的用户在与您的应用程序交互时知道要查看的内容以及要执行的操作。
在进行视觉设计时，将您想要包含在应用程序屏幕上的所有内容，并决定哪些内容对用户来说最重要。 该元素——无论是照片、一段文字、输入字段还是按钮——都应该在空间和视觉独特性方面主导你的屏幕。 然后，为当时将占据屏幕的所有其他内容建立层次结构。
让我们再次以登录屏幕为例。 此屏幕最重要的方面是用户将在其中输入其姓名和密码的字段。 如果这些字段太小，或者隐藏在角落里，它们不仅会让用户更难发现，而且也更难与之交互（没有人喜欢放大才能打字）。
手势和反馈
为你推荐：
反暴利条款对印度初创企业意味着什么？
教育科技初创公司如何帮助印度的劳动力提高技能并为未来做好准备……
本周新时代科技股：Zomato 的麻烦仍在继续，EaseMyTrip 发布强...
印度初创公司走捷径寻求资金
数字营销平台 Logicserve 获得 80 卢比的资金，更名为 LS Dig...
报告警告对 Lendingtech Space 重新进行监管审查
等等——我们不是在谈论视觉设计，就像用户实际看到的那样吗？ 那么手势和反馈与此有什么关系呢？ 移动设备视觉设计的特点之一是你不是在谈论纯粹的视觉体验。 用户所看到的必须与用户的感受相符，因为您的用户将通过触摸您的应用程序与它进行交互。 接近移动 UI 时，您不能将视觉与触摸分开。
例如，有几种方法可以告诉用户一个按钮就是一个按钮。 您可以使用阴影或其他 3D 线索来表明它是用户应该按下或滑动的元素，或者以用户知道与之交互的方式（以及如何 与之互动！）。
但即使按钮移动的方式也可能取决于用户的操作。 例如，如果用户没有在屏幕上完全滑动，按钮可能会在返回其原始位置之前向一侧移动一点，等待用户做出更自信的手势。 或者，如果必须按住按钮，它可能会返回一些触觉反馈，指示用户何时可以释放。 所有这些因素都会影响您设计和动画 UI 元素的方式。
如果这一切听起来很复杂，想象一下对于一个从未听说过你的应用程序的用户来说是什么感觉，更不用说看到你办公室里的草图和白板了。 这就是用户引导很重要的原因——您可以使用箭头、说明性文字和其他视觉线索来提醒用户他们需要采取的行动。 在为您的移动应用程序进行视觉设计时，使这些提示看起来不错并且感觉直观是另一个需要考虑的重要因素。
排版 101
那里有很多字体和字体。 没有必要知道每一个，甚至是那里的大部分内容。 好消息是，对于大多数移动应用程序，您只需要了解一些，因为流行字体之所以流行是有原因的：很多人认为它们好看且可读。
例如，您可能对 Helvetica 很熟悉（如果您想要快速了解排版的速成课程，您可能想查看关于 Helvetica 的令人惊讶的有趣纪录片）。 从移动 UI 到火车站再到品牌标志，Helvetica 具有近乎普遍的吸引力（尽管，就像披头士乐队或巧克力一样，一切都至少有一些批评者）。 这样做是有原因的：它是一种简单、可读且美观的字体。
有些字体是专门为移动设备设计的。 例如，微软的 Segoe UI 设计为在设备屏幕上具有高度可读性，即使在小尺寸时也是如此。 同样，谷歌为 Android 开发了 Roboto，而苹果使用了旧金山的 UI。 每个操作系统在排版方面都有自己的建议和指南，但大多数都可以归结为相同的基本原则：
- 保持可读性
有无穷无尽的字体可供选择，有些字体非常华丽和令人兴奋。 不过，归根结底，最重要的是阅读文本的难易程度。 最好选择一种不会让你眯眼的简单无衬线字体，而不是一种看起来很漂亮但能让你的用户为之工作的字体。 （请记住：良好的视觉设计是可访问的视觉设计，您的许多用户可能有视力障碍。让您的 UI 尽可能简单易用。）
- 坚持一种或两种字体
这是“保持可读性”的必然结果。 从移动 UI 的角度来看，确实没有必要在视觉设计中使用几种不同的字体——这通常会损害可读性。 一种字体很好，如果你觉得绝对有必要，两种字体都可以。 要使用排版建立层次结构，您应该依赖不同的字体大小、粗细和样式，而不是多种字体。
- 不要重新发明轮子
排版是我们可以写书的主题，有很多人将毕生精力投入到这个主题上。 幸运的是，您不必成为其中之一（除非您真的想！）。 如果您刚刚开始，请查看类似应用程序使用的字体，或使用操作系统指南推荐的特定字体。 虽然这听起来像是一种不太有创意的视觉设计方式，但将 SF-UI 用于 iOS 应用程序或将 Roboto 用于 Android 应用程序可为您的用户提供更持续的移动设备体验，并保证您的应用程序具有可读性。
移动应用 UI 设计师的色彩理论
比字体更多的是颜色。 有这么多无限的可能性，很容易为您的移动应用程序想出一个不那么特别的配色方案。 让我们面对现实吧：除非你学过视觉设计或者只是有诀窍，否则你最终会得到一个类似于你父母在 70 年代做出的一些更糟糕的衣橱决定的移动 UI（说真的，谁告诉你爸爸芥末黄休闲套装是个好主意，尤其是 粉蓝色平台？）。
与排版一样，您正在为其设计的操作系统可能有自己的指导方针，即您应该在配色方案中寻找什么。 但是，无论操作系统如何，都有一些建议是通用的：
- 将调色板限制为两到四种颜色
您的移动应用程序 UI 不是炫耀您对 Lisa Frank 的热爱的时候。 与字体一样，在为您的应用选择配色方案时，少即是多。 太多的颜色和阴影会使您的视觉设计复杂化，使用户更难在您的应用中找到自己的方式并知道他们应该与什么进行交互。
- 指定原色和强调色，并适当地使用它们。
您应该以一种告诉用户正在发生什么或他们应该做什么的方式使用颜色。 例如，用户需要与之交互的元素（如菜单或按钮）可能是不同的颜色——一旦用户点击或滑动元素，该颜色可能会改变。
对于每个调色板，您将为 UI 的非交互式元素选择一种原色或一组原色，以及用于显示交互性的强调色。 从这个角度来看，您不应该将强调色用于用户只需滚动浏览的文本块或静态插图，也不应该在按钮上使用原色。 如果您始终如一地使用主色和强调色，您的用户将能够更直观地浏览您的应用程序。
- 使用颜色使您的设计更具可读性，并选择可以很好地搭配使用的颜色。
有几个因素会影响您的颜色是否能在一个方案中很好地协同工作。 要考虑的最重要的事情之一是对比度：例如，亮黄色在柠檬绿上不会很明显。 然而，仅仅因为两种颜色或色调相互对比良好并不意味着它们可以很好地协同工作。 如果它位于皇家蓝色阴影之上或旁边，那么明亮的黄色也会出现“振动”。
为什么会发生这种情况可能会填满它自己的博客文章，但要让您开始选择调色板，请尝试查看 Google 和 Apple 在各自的视觉设计指南中特别推荐的调色板。 同样，在为您的界面做出视觉上令人愉悦的决定方面，他们已经为您做了很多工作，因此您可以专注于提供用户想要的特性和功能。
还有一点需要注意：您的配色方案在可访问性方面有很大的不同。 当您在移动应用程序 UI 上运行质量保证时，您应该测试的一件事是该应用程序是否适用于色盲（例如，他们可能无法辨别红色和绿色）。 使您的应用程序更易于访问的一种方法是允许您的用户从一系列自定义调色板中进行选择，以便他们的个人应用程序体验根据他们的视觉需求和偏好量身定制。
使用移动应用原型测试您的视觉设计技巧
学习如何在移动应用程序 UI 中有效地实现视觉设计是一个循序渐进的过程，但测试您的审美想法的最佳方法之一是创建应用程序的数字原型。
借助移动设计原型，您可以快速 A/B 测试视觉设计的不同方面，从字体到颜色再到导航类型。 您不仅可以自己测试应用程序，根据需要进行调整，还可以请朋友、家人、同事和 beta 测试人员提供反馈。 毕竟，你可以用令人惊叹的设计打动一个满是艺术家的房间，但最重要的是你的用户的意见。
最初于 10 月 30 日发布在 Proto Blog 上。