如何进行网站、小程序、APP的UI草图设计

时间：2023-10-10 05:42:01 | 来源：网站运营

时间：2023-10-10 05:42:01 来源：网站运营

如何进行网站、小程序、APP的UI草图设计：

什么是 UI 草图？

UI 草图是设计的一个术语。它只是指在进入线框图、原型设计和编码之前勾勒出用户界面的基础知识。在您有了一个很棒的网站创意之后，并且在构建高保真设计图之前，您就可以绘制 UI 草图。

UI 草图是理解问题的第一步。







UI 草图没有限制。您可以设计板上绘制草图，在笔记本中，甚至可以在白纸中制作出手工制作的 UI 草图。

主要你要勾勒出你最初的 UI 想法，保持它的快速和简单。不要介意 UI 草图中的设计或功能细节。这是关于寻找正确的布局，视觉层次的正确平衡。

UI 草图应该只是用来帮助您消除不良想法并集思广益，以将您提议的产品带到屏幕上。草图应该可以帮助您在尽可能短的时间内将想法转化为界面。

UI 或 UX 草图？

有些人更喜欢“用户体验草图”这个词。但对我们来说，用户体验草图更重要。用户体验专业人士绝对应该整天画草图，但他们可以画出从用户旅程或用户角色到利益相关者设计演示的任何内容。







马特的线框。

另一方面，UI 草图纯粹是指坐下来并通过所有可能的方式将您的想法变为界面现实的行为。

在 UI 草图绘制过程结束时，您应该知道您已经找到了将产品展示到屏幕上的合适的方式。

不就是线框图吗？

很容易将 UI 草图与线框混为一谈。两者都旨在快速，并且都旨在直观地说明界面理念。但它们不是一回事。

UI 草图是您通过所有可能的方式以界面形式呈现您的想法。这是一个让您自由发挥所有可能结果并思考如何让您的用户从 A 到 B 的机会。







图片由泰勒戴维斯拍摄。

线框是超出基本草图的一步。在一个线框图中，您开始考虑 UI 元素的放置、元素层次结构和大小（尽管在这个阶段您还没有“设计”）——所有这些都依赖于您的应用程序线框图工具。

上图您将能够轻松地看到 UI 草图和静态线框之间的区别。UI 草图应该具有真正的手工制作的感觉，而线框是由灰度元素组成的。

UI草图的优点

UI 草图起初可能感觉像是一个不必要的步骤。从线框开始还不够吗？

不够。我们已经确定两者有不同的目标。UI 草图绝对是确保您已完成所有可能选项并找到有效、用户友好的方式来表达您的界面想法的良好方式。







UI草图绘制速度很快。没有什么比用笔和纸更快的了。与在屏幕上绘制线框图相比，您可以更快地完成创意迭代。

素描也能让你解放出来。每当您使用数字工具进行设计时，该工具的参数都会影响您所做的事情。如果你知道你不能在这个工具中做某事，你甚至不会考虑尝试它。那可能是你很好的主意，当你在涂鸦时，这不会发生。

拥有一个 UI 草图将使您的网站线框（或小程序，APP线框）阶段更有效。你将在一个强大的、迭代的基础上工作，你会知道把精力集中在哪里。你已经排除了干扰；多亏了 UI 草图，您可以将所有的线框图时间和精力集中在改进真正重要的东西上。

UI草图的缺点

勾勒出用户界面有一些潜在的缺点。主要是，如果你在纸上画草图，将这些想法转化为你的线框图工具可能会很费力。







当然，细节不会在草图中找到。按钮状态、任何类型的交互或视觉装饰之类的东西都不能放在设计草图上。也确实，如果你试图遵循更时尚的视觉风格，比如仿真设计或拟物化设计，你将无法在草图上体现美学美感。

如何进行UI草图过程是什么

制作有效的 UI 草图的第一步是——专注于想法。尽可能多地提出想法和迭代。如果它们不是“好”的想法无关紧要，如果你的草图未完成并且粗略也无关紧要。

只需找出在项目环境中处理设计的合适的方法。素描是关于交流，而不是美学。您正在以最原始的形式传达您对问题的解决方案。

尝试一些“发散草图”，以确保您真正解决了设计问题的所有可能排列。发散草图是指您在同一屏幕上绘制不同的方法。







例如，您可能会尝试大量不同的方法来设计网站，小程序，APP的主导航，每一种方法都在其他方法旁边绘制。在线有可打印的模板，以方便不同的 UI 草图绘制。

接下来尝试应用多个思路则并选择多个可能的选项进行处理。这可能会更耗时，但它是更好地理解您的设计的好方法。

在这个阶段，你可以从不同的草图中结合最好的元素。你的解决方案应该在线框图阶段之前不断尝试。

给忙碌的UI设计师的一些提示

我们提供了一些非常有用的 UI 草图技巧，包括：

• 分层构建草图
• 使用便利贴说明添加“交互”
• 复印草图并将其用作模板

初学的设计师准备绘制UI草图 吧！

草图没什么好怕的，请大胆的尝试。即使您认为自己不会画画、时间紧迫或完全习惯了线框图勾勒出用户界面的想法将改善您的产品设计过程。