移动应用程序的视觉设计

发布：2021-11-05 15:44:27 浏览：2133

虽然策划优雅的用户体验以及调整每种交互很重要，但是也不能忘记使这一切成为可能的像素。当然，我谈论的是视觉设计，即移动应用程序的实际外观。设计优秀的移动应用程序将把许多学科集中到一起，但是我坚持认为视觉设计息其中最重要的。你可以把所有适当的部分组装起来，并且完美地计划每个屏幕界面，但是如果你的设计很糟糕，那么随着时间的推移,所有这一切都会变得毫无意义。优秀的视觉设计师就像能够击中投球手投出的90英里1小时(mph)的快球的天才。一些设计师从- -开始就让人惊艳，而其他设计师会有较好的表现，并且随着时间的推移通过实践变得让人惊艳。一些 人开始时身体里没有艺术细胞, 但是他们]极其努力地工作，并且在整个职业生涯中一直在磨练他们的技能。 不管你多么有才华，总是可以利用一些通用的原则使自己的作品更上一层楼。我的头脑中自始至终都会想着这些珍贵的话语。就像高尔夫球手在挥杆击球时会牢记几条关键的原则-样。

1. 对比

良好的对比对于移动应用程序至关重要，因为它会影响用户查看设计的方....确确实实是这样。对比指不同或类似的元素相对于彼此是如何显示的。如果设计中的所有内容看起来都非常相似，那么用户将不知道首先观看哪里:屏幕上将是一-堆乱七八槽的RGB值。如果你对用户应该先观看哪些界面元素不敏感，那么将不能够有效地设置每个元素的优先级。不佳的对比可能需要用户在界面中观看第二次或第三次才会注意到的最重要的功能，或者根本就不会看到它。为了获得良好的对比，不同的元素应该能够让人很明显地看出它们是不同的。如果它们看起来只是稍有不同，那么用户将会混淆，并忽略它们之间的视觉关系。强烈的视觉对比可以沿着屏幕指引用户的眼睛从一个元素移到另一个元素。如果处理得当，那么用户将以你想要的精确顺序查看所有的元素。如果处理不当，那么可能会掩盖重要的元素,从而引起混淆。

2. 重复

要使用户信任和熟悉你的应用程序，你. 需要使他们感到可以舒适地使用它。有多种方式可以达到这个目的。就视觉设计而言，可以通过注意你在整个应用程序中编排相关项的样式来建立信任。通过为相似的元素重复使用样式，可以使用户适应应用程序的含义及其元素的重要性。忽视这一点将产生混淆。因此, 要使相关的元素看上去和感觉上是相关的，尤其是在一行中出现多个这样的元素时。一个剪贴板管理器，用于存储文本、图像、URL及复制到; iPhone中的其他项目。复制项目的列表是应用程序中的一个关键屏幕，不管存储的项目类型是什么，视觉设计都是熟悉的，并且相关的动作将保持一致。由于每个项目都没有它自己的外观，用户就知道他们将能够以一致的方式操作这些项目。

3. 对齐

对齐是优秀视觉设计的标志，它在移动应用程序中特别重要。元素应该对齐到某个物体:其他元素、网格、黄金比例框架、屏幕的边缘。没有对齐的界面元素和构件看上去好像出错了，就像它们居无定所、没有稳固的基础一样。不需要许多设计技能即可正确地排列元素，但它确实可以吸引敏锐的眼睛:某个元素是否完美地与别的元素对齐。只是接近还不够，它必须是完美的。为了把元素对齐到像素精度，我通常会放大画布，直到我可以清晰地看见像素的开始和结束位置。我还会拖人一些水平和垂直辅助线，以使对齐更容易。不要用目光粗略地测量它,要确保它是完美的。在两条边缘之间居中显示按钮或构件时，是进行对齐的关键时刻。在为移动应用程序设计界面时，我发现自己执行该操作的次数比所有其他的对齐任务都要多。在工具箱中居中显示按钮、在标签中居中显示文本、在按钮中居肿显示图像、在方框中居中显示控件一-它们随时都会发生。 像素完美的对齐可以使设计从合格上升到优秀。在用于iPone的Twiter中可以找到对齐的最佳示例。当用户在时间线中点击推特时，一组图标将渐现， 提供了用于推特的快捷动作。无论推特有多长，这些图标都是跨行均匀分布的，并且在行内居中显示。除非你习惯于各个像素或者极小的移动屏幕，否则确定蹩脚的对齐可能需要少许实践。但是一旦你开始注意到拙劣的对齐方式，那么到处就可以看到它。

4. 接近度和分组

应该把相似或相关的元素组织在一起，构成一个聚合的整体。其好处是，用户将能够更快地浏览项目集合，并且更容易确定元素间的关系。为了能够通过接近度显示项目的关系，首先必须理解项目的层次结构。MoneyWell (一款用于iPhone的个人理财应用程序)具有清晰地设计的界面。它的主要财务屏幕显示了一个简单的表格视图，以及每一行上的开支。开支的类型作为标签显示在左边，那个项目的费用则右对齐。为什么不把开支直接放在左边的标签旁边呢?下面的模拟图显示了这样做的效果。

5. 纹理

物理物体的表面并不是完全平坦或均匀的:它们具有瑕疵和棱角。像皮革、纸张、衣服和木头这样的有机物质都有许多瑕疵。使界面逼真意味着要注意纹理。没有什么东西只具有一种单调的颜色。任何物体都有细微的纹理，甚至在最亮的表面上也是如此。环顾你的工作空间: 观察每个表面和物体.上的纹理。作为练习，尝试在你所选的设计工具中再现其中一些表面。要在你的工具箱中保存许多纹理,以便使你能够制作出更丰富的界面类型。

6. 光线

何时使用渐变是合适的?阴影是用于什么的?边缘高光色怎么样?所有这些事情具有什么共性?它们]都通过适当地使用光线使界面元素看起来更逼真。漂亮的用户界面设计的秘诀是真实感:使屏幕上的2D物体看起来好像位于3D空间里，并且它们具有可以在现实生活里发现的体积、表面性质和棱角。这些伪造的3D物体具有高光和阴影,就像你看到的桌子上的物体一样。为了使2D物体看起来像三维的，必须欺骗用户的眼睛，认为它是从屏幕中凸出来的，可以通过操纵光线来实现这种效果。在设计界面时，要使之看起来好像光源位于屏幕顶部，向下照射所有的文本、构件和按钮。这种光源应该投射阴影并创建高光色，这依赖于它以什么顺序照射到什么。圆角按钮看起来就像是扁平的，除非光线好像正在照射它，并且渐变、高光色和阴影都在这种骗术中起着各自的作用。