关于UX可能最常见的问题是如何开始屏幕设计，以及我们应该关心哪些原理？设计屏幕开始草图。我们在UX工作室从快速的草图开始，然后构建线框和可点击的原型，测试它们，修复它们，并最终达到像素完美，丰富多彩的详细设计计划。接下来，我们将向您展示设计屏幕时需要考虑的八个最重要的经验法则。这些都是任何正在设计数字产品的人的基础知识。

屏幕设计八大基本原则：

1. 所有屏幕的三个问题需要给出答案
2. 视觉层次的重要性
3. 该副本是设计的一部分
4. 公约是重要的，我们应该使用它们
5. 在为手机设计时，我们也为我们设计手
6. 注意有效面积比
7. 瞄准简单和透明
8. 注意动画和动作

我们来看看这些更详细。

三个问题

当我们到达新屏幕时，我们正在寻找三个问题的答案：

• 我们在哪？
• 我该怎么办？
• 我如何向前走？

在到达新屏幕后，我们本能地看看我们在哪里。许多线索有助于回答这个问题。例如，我们可以立即看到页面的标志。当我们在一个应用程序之间的页面之间移动时，类似的结构和颜色可能使我们确信我们处于正确的轨道。如果我们点击链接，链接的文本在下一页的标题中回显，我们知道我们到达了正确的地方。通常也会在菜单中突出显示用户所在的页面。

“我在哪里？”的问题似乎太简单了，但是在许多应用中，用户对于发生的事情没有任何反馈。在任何时候，他们都必须知道他们达成什么，进程正在进行甚至已经结束。没有对其状态持续反馈的应用程序非常讨厌使用。

之后，下一个问题是我可以在这个屏幕上做什么。我可以看到什么内容？我可以使用什么功能？如果我不明白这个问题的答案，我宁愿退出界面。您在屏幕上可以做的更多的事情，了解给定页面的内容就越困难。

用户通常会以“号召性”按钮的形式找到第三个问题的答案（“我如何前进？”）。他们不只是在页面上播放足够的时间并且想要向前移动时才提出这个问题。在到达时也很有用，看看我们可以从那里去哪里。

大多数新闻页面在三个问题测试中获得通过成绩。我们来看看CNN。当我们到达页面时，我们立即在右上角看到我们降落在CNN的页面上。从页面上显示内容的方式我们立即意识到我们在新闻页面上。很明显，我们可以通过点击标题向前移动。

视觉层次

视觉层次是设计屏幕时最重要的参数之一。我们可以根据他们的大胆程度，如何强调，我们发现他们的容易程度来排列给定屏幕的元素。这就是我们所说的视觉层次。大胆和突出显示的元素位于层次结构的顶部，底部有微小的隐藏元素。

视觉层次结构有助于引导眼球。它决定了我们注意到什么样的事情。这就是为什么有意识地发展这个阶层的原因。仔细想想给定页面的目标是什么，用户想要实现的目标以及我们想要关注的内容。以前介绍的三个问题可以帮助您。

下面的例子是一个非常简单的视觉层次学派的例子：我们在大写字母中读取标题，然后再读取括号中的文本。

层次结构也有助于理解。当我们的眼睛穿过一条简洁的文字的河流，我们没有机会理解它是什么。然而，如果我们扫描完整的字幕文本，我们会从中获得有关内容的想法。

我们如何创建视觉层次结构？

大多数初学者设计师只关注强调某些元素。如果他们试图突出太多元素，情况会更糟。不幸的是，只有一个或两个元素可以在层次结构的顶部，这取决于我们这些元素将是什么。为了做出正确的决定，我们需要知道屏幕最重要的目标是什么。

我们可以突出显示某些元素，如：大小，颜色，位置，纹理，形式和方向。

眼睛相机研究显示我们如何扫描页面。当我们到达一个页面时，我们从页面顶部的左到右浏览两次，然后向下滚动。这被称为Nielsen F，如下面的热图上所示。

这也表明左上角的东西更有可能被注意到。此外，左侧列和折叠上方的部分（可访问而不滚动）被更加强调。

该副本是设计的一部分

许多设计师认为写作不在于他们的工作描述，但这不可能远离真相。文案是设计的一部分。

写作的最佳方法与绘图的方法类似：我们需要先做草图。换句话说，至少有六八个版本的副本需要写下来。如果我们准备好了，我们需要选择最好的。值得花时间制定文字。最好的结果通常来自于将以前的版本融合在一起。

文本需要由同事阅读，所以你会发现某些东西是不可理解的或奇怪的。如果你大声朗读，它也可以帮助很多。副本的最重要的目的是要理解。我们只能确定这一个方法：如果我们用真实用户测试它。我们将在关于研究的章节中再说一遍。接下来是使用人们在测试期间使用的表达式。在采访时，我们需要注意受访者的话，所以我们可以在产品或市场营销中使用自己的话。

显微镜 – 屏幕设计的一部分

我们调用您可以在界面上阅读的副本。微镜只是几句话，但是有很大的影响。它是一个按钮上的文本，一小段指令或表单字段上的标签。

一般的经验是尽可能避免使用术语（除专为专业人员设计之外）。使用非正式语气是有用的，但不要夸张，变得冷漠。精心编写的微视镜具有人性化的感觉。它给人的感觉是在另一边有一个实际的人。它建立信任

表格的副本应该是令人鼓舞的。确保您不需要太多的完成表单。错误信息应以同情和团结的方式写出来。在压力很大的情况下要小心，不要怪你的用户。总是有一种我们所有人在一起的感觉。不要忘了提供解决方案。

如果有不止一个人为同一个产品编写副本，您应该创建一个简短的风格指南，描述他们应该使用的声音。您可以收集形容词，并列出一些好例子。使用相同的语音来搜索其他网站或博客也很有用。当你必须写信的时候，你可以把它们打到心底。

4.使用惯例！

网络和移动世界是人类最近的成就，但即使在这个短暂的时间内，大多数应用程序普遍使用了大量的解决方案。这些事实上的标准解决方案被称为约定。这样的惯例是：左上角的标志，链接的蓝色和链接的下划线文本。

大多数用户已经习惯了这些约定。我们使用它们，因为它们缩短了学习曲线。不同于惯例的解决方案通常会使人的神经受到影响。

他们经常问这是否与创新矛盾。答案很简单 这不是你需要创新的惯例。我们不必重新发明，我们不必改变经过验证的测试。我们应该用这些建筑物建造新的城堡。

该图显示了亚马逊的一种旧设计和新设计。注意我们今天仍然使用的界面元素（链接，标签，搜索框，篮子，下拉菜单）！

5.设计触摸时，我们设计为手（也）

在设计触摸屏时，最重要的参数是我们自己的手，我们正在使用该产品。如果我们考虑到手的尺寸以及它们的功能，我们只能设计一个易于使用的界面。我们特别要注意手指的尺寸和运动：我们可以达到什么目的，何时可以安全地点击某些按钮。

我们从后者开始吧。当我们点击某些东西时，我们的手指在屏幕上覆盖相当大的空间。为了感觉到点击是安全的，当我们点击时，我们必须只有一个东西在我们的手指下。如果我们的手指覆盖更多元素，我们会感到不舒服，因为我们无法确定我们点击了什么。

如果我们研究一个现代手机的屏幕，看看我们的拇指在屏幕的宽度方向上多少次，我们看到我们可以将4个可点击的东西放在一行。

另一个有趣的一点是可达性，即我们用手指可以达到的目标。有一个观察性的研究：笔记是关于走在街上的人，拿着他们的手机。有三个基本位置 – 这里没有什么新鲜事。

第一个是我们用一只手握着我们的手机。这些子版本是用我们的小手指支持手机，还有一个手机充满电。小手指支撑提供安全感，但作为回报，我们只能到达屏幕的底部。

另一个立场就是用双手握住电话。这样我们是安全的，因为帮手，但作为回报，我们并不总是有可能握住它的双手。

第三个版本：双手同时握着手机，同时使用两个拇指。

上面的插图显示了我们可以轻松达到哪些领域，哪些不是。下图说明了街头人中最常见的握手位置，除了听音乐和打电话。这可能并不奇怪，单手位置赢了。

在设计移动设备时，我们无法知道用户如何掌握手机，因此在大多数情况下可以使用可以使用的界面。换句话说，我们不应该设计在某些位置无法达到的可点击元素。看看所有的插图，这是屏幕的左上部分和右下角，这只能通过不舒服地弯曲拇指来达到。

如果我们看看这些职位由于手机规模的不断扩大而发生变化，情况就会更加细微。可触及的空间在大屏幕上变得越来越小。我们必须抓住我们的第二手，在屏幕的三分之一处得到东西。

因此，界面需要设计成能够从屏幕的下半部分进行控制。常用功能不应放在屏幕的顶部。

6.有效表面积比

当我们设计屏幕时，我们必须与我们携手合作的空间。游戏的目的是看哪个内容元素出现在哪里，以什么形式和占用大小的空间。注意给定屏幕上的有效表面积比有多小！我们在新闻页面上的灰色区域显示出不是优先级的内容。

菜单或Facebook共享按钮只是此页面上的辅助功能。没有人到达此页面阅读菜单。游客来看文章。因此，一切都是“必要的罪恶”，特别是当我们打开页面时。

简单明了

最好的用户友好界面简单明了。这样的界面很容易理解，人们很容易熟悉他们，习惯于使用它们，并在下次打开时感到快乐。

尽管这样简单也不容易。在设计项目中，需要在界面上显示的新想法和新信息会一个接一个出现。可能的情况是，公司的不同部门或项目的不同参与者认为出现不同的事情是重要的。设计师的责任是在规划阶段对参与者进行管理，以实现清晰，易于理解的界面。您可能猜到，在大多数情况下，只有设计者达成共识才能使这一切成为可能，才能实现。这是一个外交或管理任务，但仍然是设计师的任务。

需要什么来使它成为可能？首先，直观的业务目标和对给定产品目标的明确理解。如果我们有这些，可以轻松管理接口。那么确定哪些元素是重要的，哪些不重要也更为简单。不了解产品的设计可能在设计界面时首次出现了一个巨大的问题。设计师有责任认识到这是问题的真正原因，并说服其他人回退并确定主要目标。

设计师的第二个重要任务是不断地教导其他团队成员。设计师需要解释一个打包的屏幕和一个美丽时尚的极简屏幕之间的区别。设计师是解除思想和管理相关恐惧的人。例如，在注册过程的第三步，一个巨大的标志是不相关的，因为品牌不会发生在这里。

下一张图片显示了移动应用程序屏幕的两个不同版本。乍一看，左边的一张照片似乎更加令人兴奋，因为彩色图标，但是当我们尝试了解这个页面是什么，右边的是更有用的。这里相同的内容出现在一个更清晰，更简单的结构中。注意两者之间的区别，以及一个如何实现这一点！

8.动作和动画

UI动画是屏幕设计中最有争议的领域之一。许多人只是想使用动画，因为它们看起来很酷。我不推荐 其他使用它们来传达接口的工作原理，或者对用户有一些情感的影响。Google的材料设计指南有一个明智的，温和的动画立场，但即使一些Google产品使用得如此之多，这是令人讨厌的。

动画的第一个也是最重要的规则：不要为了动画而使用它们。人们有线将重点放在移动物体上。当一只老虎在丛林中惊讶我们时，我们需要这种反射才能生存下去。很容易将人们的注意力集中在一些移动物体的原始目标中。所以你必须非常小心运动，并用于目的。每个动画必须有意义。

动画可以解释你的界面如何工作。其中一个众所周知的例子是如何最小化桌面操作系统中的窗口。窗口缩小到托盘上的图标，所以你会知道在哪里找到它。

当您选择列表中的项目时，它可以增长并扩展到全屏。这个动画将告诉用户他们看到同一个元素的详细视图。在许多移动应用程序中，菜单从屏幕的左侧滑入，它也隐藏在屏幕上。滑动动画显示菜单面板的位置，它教会我们从左侧滑动以取回它。

动画也可以添加到您的应用程序的字符。卡通动画师非常擅长用人物的动作表达感情。运动也可以以俏皮，积极或温和的方式进行。这可以放大你的应用程序的风格。但还是要小心 和设计一样，少一些。保持这些动画只有最好的时刻。