![]()
用心感受、用心体会、用心设计、用心反馈
最近很多同学都从原来的平面设计转向了UI设计或者产品经理的岗位，也许是公司业务的转变，也许是你能力的提升，这个转变是一种自我提升的状态，你需要提升的不仅仅是你的设计能力，还要提升自己思维上面的高度。
以前你做东西考虑的范围跟现在你做东西考虑的范围不一样了，现在你要考虑全局去做这个产品。今天我们说的是如何创建移动应用程序线框图的完成过程，以前你不会，今天这篇文章就可以帮助你会；以前你画过，今天这篇文章会帮助你更加完整；以前你做的是平面设计，这篇文章对于你来说就是一个完整的指南。如果你希望更好地理解线框、它们如何适应设计过程及如何创建它们，那么这就是你的最佳指南。以下是帮助你入门的分步骤说明。我在这开始的每个新项目中都使用了这种方法，当以这种方式完成时，它可以帮助我快速创建设计概念--这绝对是关键，因此你可以尽早测试和验证你的解决方案。预计时间1-2小时。我建议与主要利益相关者一起做这个练习。让我们以你的认为为创建移动应用程序的前提开始。你应该问的第一件事是“我在解决什么问题，我在为谁解决这个问题？”这个复合问题的答案将为你的设计奠定基础，因为它们将提供可以推动你设计的特性和功能的洞察力。这些答案也肯定会帮助你确定你的设计的MVP（最小可行产品）是什么。例如，你的产品路线图上可能有很多功能，但你只需要关注基本功能即可成功启动应用程序的第一个版本。你可以首先询问“我们需要创建哪些特性和功能，以便我们的目标人群能够完成他们的目标和任务？”要回答这个问题，你可以根据主要用户的“喜好路径”创建一个用户流（稍后你可以关注所有边缘情况）。我推荐一个白板，你首先写出用户的所有关键步骤。写下这些关键步骤后，你就可以开始创建这些步骤的高级草图。这有助于你确定用户在每一步需要哪些可供性，并防止范围蔓延。注意在没有先编写用户流程的情况下，尽量不要进行草图绘制。如果我们直接进入草图，我们的思维会变得非常有创意和偏离轨道。
在你写出用户流程并在其下方创建粗略草图后，此练习的效果如下。请记住它不一定要漂亮，但它应该足以传达你的想法，以便你继续下一步，数字线框。
![]()
预计时间：2-3 天，取决于 MVP （最小可行产品）的范围。
一旦你弄清楚了你的 MVP （最小可行产品）线框图，下一步就是创建稍微更详细的线框图。你可以创建一个纸质原型或直接进入数字线框图（如果速度很重要，我通常会跳到数字线框图）。 注意：如果你正在与知名品牌合作，则可以使用现有设计系统中的组件，你可以直接跳到下面的第 3 步高保真。我建议为你在草图练习中发现的关键屏幕创建画板。随着你从草图、低保真线框到高保真线框的线框图流程中移动，你需要的屏幕数量将会增加。Adobe XD 中的艺术板，这是一个用于设计和原型制作网站、应用程序、游戏等的平台。对于低保真数字线框，请使用您选择的线框工具来创建简单的形状并使用基本字体来创建线框。还有许多UI 套件可以加快此过程并创建更具视觉吸引力的低保真设计。我还建议使用适用于大多数手机屏幕尺寸的中等画板尺寸。如果你拥有目标人群的数据以及他们主要使用的手机尺寸，那么请选择该屏幕尺寸。在使用Adobe XD（或任何设计工具，因为大多数设计工具内置预设尺寸）时，我使用 375 x 667 像素大小的画板，因为它是屏幕尺寸（尤其是 iPhone）的“中间路径”。我发现这个尺寸适用于 iPhone 8 和 iPhone X，我发现这也适用于 Android。创建低保真屏幕、与用户一起测试你的设计并获得利益相关者的认可后，你现在就可以创建高保真线框图了。
第三步：高保真数字线框
预计时间：1+周。这将取决于你是否拥有适当的设计系统，或者你是否正在从头开始创建它。此步骤也需要更长的时间，因为添加的屏幕可能比低保真阶段更多。这一步是你的设计栩栩如生的地方！这也是你的设计真正开始看起来像一个可以工作的移动应用程序的阶段，你可以对其进行原型设计、测试、迭代、获得批准，然后最终移交给开发团队。 - 如果您正在开发的产品已经拥有知名品牌，你很可能会从品牌指南中提取颜色、图标和字体。
- 如果你正在开发的产品没有完全建立的品牌外观和感觉，你可以找到并使用UI 工具包来加快你的设计过程。
- 根据开发计划的顺序确定你设计的屏幕的优先级（这通常是我开始的地方，因此我可以采用敏捷的方法工作，确保在开发团队需要时准备好交付屏幕）。
在此示例中，我将展示在 Adobe XD 中使用已建立的 UI 工具包的过程。我将从用户登录/注册和个人资料创建开始，因为与我一起工作的开发团队通常从他们的应用程序开发过程中的用户管理开始。 我选择的 UI 工具包已经有一个既定的调色板、字符样式和常见的 UI 元素（又名组件），可以在整个线框图中复制和粘贴。 注意：在早期，我建议将您计划重用的任何元素转换为组件（或符号）。这样，如果你需要将后退箭头从箭头“←”更改为胡萝卜“<”，您可以通过主组件更改它并让它在所有线框上更新，而不必复制和粘贴编辑到每个需要更新的屏幕上。要开始这个过程，我将开始构建入职、登录和用户配置文件屏幕：
在此之后，我将开始为应用程序的所有用户流创建高保真连线，从基于交付到开发（或任何仍需要用户测试的项目）的优先流开始。我建议为每个关键用户流程创建单独的设计文件，以便你在使用敏捷方法时可以轻松地进行原型设计并与开发人员共享（即一个用于用户注册和帐户创建的文件，一个用于消息传递的文件，一个用于搜索的文件）经验等。 当设计获得批准并移交给开发人员时，我建议创建一个包含所有屏幕和主组件的主文件。在团队合作时，我通常建议一个人负责主要的文件，以减少混淆。通过这种方式，每个团队成员都知道他们在为应用程序创建新功能和流程时正在从批准的主文件中提取。例如，这是我的一个项目的主文件的鸟瞰图。请注意，我已按用户流程和开发优先级对屏幕进行了分组和排序。当我构建下一个用户流序列时，我将继续添加到这个主文件中。既然您已经知道如何开始对你的数字体验进行线框图设计，那么是时候提升您的设计方法了。如果您要在iOS和 Android等操作系统上为移动设备创建体验，则需要牢记一些关键注意事项。这里有一些关于设计移动应用程序以及如何为市场上的每种类型的设备花更少的时间设计的总体技巧（和一些个人意见）。如果您正在寻找更多灵感，您还可以查看这些网站和移动应用程序的线框示例。 我坚信设计应该尽可能无处不在。因此，只要有可能，我都鼓励采用与操作系统无关的设计。原因如下：- 如果用户从 Android 手机切换到 iPhone，他们不必学习两种不同的方法来使用解决相同需求的应用程序。解决方案应该仍然相同。现在，我知道可能存在手势差异和特定于设备的可供性，但我相信应用程序应该提供相同的 UI 和用户流程，而不管其操作系统如何。重要的功能不应在上下文菜单中隐藏得太深；那只是糟糕的用户体验。
- 设计、开发和维护两种（或更多）完全不同的体验是很昂贵的（尤其是当体验可能与平台无关时）。
- 在设计和维护不同的体验时，体验可能会开始变得非常不同。这可能会损害品牌，并使跟踪和实施反馈和功能变得更加困难。
·总结
那么，您如何创建无处不在的设计并与设备无关？这是我的方法：
- 对待我的移动设计就像我在为移动网络设计一样。我的设计是响应式的，因为有无限的屏幕尺寸和像素密度（这些变化与公司设计它们的速度一样快）。作为设计师，我们没有时间为每个像素密度进行设计，无论如何我认为我的客户不想为那段时间买单。因此，我使用 375 的画板宽度，这适用于大多数现代 iPhone 型号和 Android。
- 我通过告诉开发团队将标题背景颜色扩展到顶部来处理 iPhone X 和 iPhone 11 的奇怪屏幕形状。
- 我很幸运有几种不同的手机类型触手可及，因此我可以使用 USB 通过 XD 移动应用程序测试我的设计。这很有用，因为我可以测试字体大小、UI 触摸点以及键盘抬起时屏幕内容的可见性。我还可以测试“折叠”线并确保重要内容（如 CTA 和重要内容）保持可见并且不会从屏幕底部消失。 （CTA ：即Call-to-Action,行为召唤,指在网站、App中用于引导用户自发完成某种特定行动）
- 我尝试只使用通用的手势，例如点击、滑动、按住。我认为无论操作系统如何，我们都应该能够专注于最佳用户体验。
- 我将 SVG 用于所有图标和徽标，以便它们在任何屏幕分辨率下看起来都很棒。
我必须设计特定于设备的线框的唯一时间是在我进行原型设计和调用本机设备功能时，例如相机。即使这可能因手机和操作系统而异。我的大多数客户都是从 iOS 开始的。我们测试和验证设计，一旦它走上正确的轨道，我们就会为 Android 进行开发。你知道吗？我们尽量不改变 UI 或用户流程。相反，我们专注于品牌、外观和感觉、特性和功能以及用户流程。这一切都回到最重要的事情上：核心用户体验。·写在后面
好了，今天我们说了这么多，基本上都是非常专业的知识点，主要是帮助大家梳理创建移动应用程序线框图的过程以及指南，在这个过程中我们考虑到了iOS、Android，如何考虑所有的机型，制作什么尺寸可以适配所有手机或者大部分手机等等，这个是非常重要的。
如果你看到这里没有完全消化这篇文章的内容，最好是收藏或者转发到朋友圈或者趁热打铁多看几遍，一次性吃透，也许你下次就没有今天有耐心了。
各位，加油！！！
暂无评论
违反法律法规
侵犯个人权益
有害网站环境