跳到主要内容

使用UI工具包加速设计的5种方法

如果你像我一样,你喜欢跳进行动。网站的想法?新应用?学习如何开始博客?改变游戏规则的创业?你想要实现它。今天。但是你担心在规划阶段花费太多时间会不会影响你的想法在这个快节奏的世界中成功的可能性。

草绘非常适合将初步想法推出门外。它们肯定可以用于快速传达您的想法。或者你可以用一个创建一个元素库在您选择的原型制作工具中,您可以鞭打一些东西来展示。

或者你可以使用其中之一UI工具包在那里。想想像乐高积木这样的UI套件,您可以轻松地将它们拼接在一起,以创建快速的模型或原型。在本文中,我们将深入探讨UI工具包以及如何在下一个项目中最好地使用它们。

设计的基石

UI Kits提供了一组基本元素,可帮助您构建最终产品的表示形式。一些最常见的项目包括屏幕,导航,图标,网格,按钮和图表。

这些组件成为中高保真原型的构建模块,如免费中所述原型设计指南。虽然这一步看起来很乏味,但创建用户体验的早期原型实际上是一个巨大的节省时间。使用UI Kits构建原型允许您收集反馈并检测主要问题用户体验流程早点。

Grade UI Kit

像UI UI Kit这样的UI工具包对设计网站非常有帮助

等级UI工具包例如,包括数百个图标,图表,屏幕和紧凑的网格来构建您的原型。

使用套件元素构建原型有许多优点:

  • 这些预先设计的图形工具包不是考虑视觉细节,而是强迫您考虑交互和流动,而不是一遍又一遍地重新创建相同的元素。
  • 有人已经经历了考虑类型布局,样式和大小的麻烦,以便您可以专注于实际的副本和号召性用语。
  • 一些协作原型工具,如UXPin允许您上传使用这些UI工具包构建的静态合成,并将它们设置为分层原型。

有一个想法是不够的。你必须以某种方式捕获它,无论是草图还是使用UI工具包构建的粗略原型。好处很明显。您可以与利益相关者一起销售您的早期想法,并在进行更加完善的设计之前获得快速验证。

使用UI工具包创建原型

在开始使用UI工具包构建原型之前,您需要考虑一些事情。

  • 定义目标。不仅是用户目标,还有业务目标。考虑一下:或者您是否想要付费客户?或者您是否试图让用户升级?概述这些是什么,以便您可以有效地构建您的工作。
  • 定义用户。谁可能会使用您的产品或访问您的网页?概述每个用户可能想要从您的产品中获取的内容以及您希望他们完成的内容。一个简单的方法是通过使用用户角色,这使您可以满足最重要的用户组的主要需求。

Persona example

用户角色热衷于定义您的用户

一旦确定了目标和用户,您就可以花更多时间考虑用户如何与您的产品进行实际互动。这就是拥有UI工具包可以派上用场的地方。正如我们之前所说的那样,拥有可以快速打入项目的元素可以节省更多的思考时间来映射用户流和体验。

有了这个,让我们深入研究将UI工具包付诸实践。

01.定义界面的基本功能集

想想你需要的元素。但在项目和用户的目标范围内构建此框架。考虑到用户流程将使您更好地了解您希望用户实际完成的任务。

这是创建用户角色派上用场的地方。这将使您能够清楚地了解特定角色的需求和动机。如果您需要有关创建角色的模板和其他提示,请查看用户体验设计流程和文档指南

Sketch of interface

图片由Rob Enslin提供,www.flickr.com / photos / doos /

例如,您可以用草图或文字粗略地表示用户完成简单结帐的流程。你可以考虑:

  • 他们需要登录吗?
  • 如果他们没有登录,他们是否需要注册表格?
  • 他们将如何选择项目?
  • 一旦他们选择要实际购买的商品,有哪些步骤?

写下您要在此用户界面中显示的每个主要功能的列表。作为建议,避免尝试显示每个功能,并专注于那些真正区分产品并为用户增加最大价值的功能。

这些功能也是您最敏感的测试假设:用户是否真的对能够做X或Y感兴趣?这就是早期原型有助于节省您实施不等于豆子的解决方案的时间。

02.确定要在原型中显示哪些屏幕

既然您知道需要突出显示哪些功能(并且可能已经过测试),请继续思考可以代表这些功能的几个屏幕。

例如,如果您的应用包含某种仪表板,请留意提供图表元素的UI工具包。在下面的例子中,Livo UI工具包为您的数据显示需求提供多种选择:

Livo UI Kit

Livo UI Kit提供的数据显示选项范围

但是不要把时间花在那些不会在你测试的流程中的屏幕上。您希望对您的想法进行验证,而不应该花时间对可能会分散注意力的事物进行原型设计。

03.选择符合产品视觉标识的UI工具包

您可以清楚地了解要显示的功能以及显示这些功能的方式找到适合您的UI工具包

请记住寻找符合您产品理想外观的组件,以及提供您可以实际编辑的文件格式的套件。在搜索出色的UI工具包时,请注意这些元素:

  • 它是否允许您需要的定制量?
  • 它是否包含您需要的组件?考虑导航,按钮,模态,面板,面包屑,选项卡,警报和工具提示。
  • 它是否提供多种变化,如不同的配色方案?
  • 它是否以您可以打开和编辑的格式提供?

Vanilla UI Kit

强大的UI工具包包含不同的选项,用于表示处于活动或禁用状态的按钮和输入元素。图片:Vanilla UI Kit:https://creativemarket.com/pixel-buddha/319703-Vanilla-UI-Kit

流行的UI设计格式包括Adobe Photoshop和Sketch。

匹配不一定是完美的,但越来越接近将使原型感觉更有用。

04.使用Photoshop或Sketch调整颜色,组件和副本

您的UI工具包已准备就绪,您迫不及待地开始自定义它。打开首选设计软件中的文件并进行编辑。以下是执行此操作的几个步骤:

  • 围绕屏幕组织您的工作以避免混淆。这里一个有用的提示是使每个屏幕成为一个单独的层。如果您正在使用Photoshop并计划使用动画原型UXPin,该应用程序可以自动导入这些图层作为屏幕,您将节省宝贵的时间。
  • 根据需要定位UI工具包中包含的元素。通过拖动和调整按钮,导航,图像和文本块等组件来组合每个屏幕。
  • 如有必要,可以切换套件的原始配色方案。一些主题提供了几个“皮肤”可供选择。如果您的工具包没有,您将必须根据形状调整元素到您品牌的调色板形状。

Vanilla-UI-Kit

UI工具包允许您自由更改颜色和文本。图片:Vanilla UI Kit,https://creativemarket.com/pixel-buddha/319703-Vanilla-UI-Kit
  • 自定义一些高级副本。没有人说你需要确切地知道每个文本块中的内容。只需添加一些关于您希望在用户体验中呈现的基本语言和基调的提示。

05.使用数字原型方法添加一些基本的交互

完成使用这些工具包构建基本用户界面后,您可以使用三种常用的数字原型设计方法。这些都在下面详细描述原型设计的终极指南

  • 演示软件(主要面向初学者):这涉及使用Keynote或Powerpoint等标准演示工具,让观众了解产品的工作原理。您甚至可以将屏幕构建为幻灯片并显示基本流程。
  • 编码原型(中级到高级):直接进入HTML和CSS,使这个原型变为现实。这样做的好处是,在构建实际产品时,您将在开发过程中处于领先地位。
  • 专业的原型设计应用程序(适用于各种专业水平):原型设计工具几乎不需要任何高级知识,可以帮助您构建具有简单拖放功能的线框。

原型消失

一旦你习惯了上面的工作流程,你就再也不想再回到过去了。

当然,敏捷设计需要精益解决方案,但也需要明智的决策。这就是原型介入的地方,以便在用户行为似乎无法预测的情况下提供洞察力。设计问题通常是模糊的,声音解决方案需要大量的实验。在使用UI工具包构建早期原型时,您可以打开反馈的大门,从长远来看可能会节省您的产品。

要开始使用,这里有一些有用的(和免费的)UI工具包:

话:劳拉布什

Laura Busche是Creative Market的内容策略师,并定期撰写关于品牌和业务的博客。她是O'Reilly Media的作者精益品牌书。

像这样?阅读这些!



翻译字数超限