在成熟的用户界面设计过程中,视觉草图是一个不可分割的环节

发布时间:2020-08-07 10:44:00

在设计应用程序和web界面时,许多设计团队会直接跳过模型的设计。实际上,整个设计过程的背后有很多环节,从头脑风暴、需求分析,到线框图、原型,但是视觉手稿的设计和之前的环节一样重要。即使按照精益设计原则或快速原型设计的要求,它也是必不可少的一部分。

“为了设计这个产品的用户界面,我们设计了线框和原型。我们没有时间和精力添加其他链接!”至于用户界面的设计过程,我不认为你很少听到这样的抱怨。

在设计应用程序和web界面时,许多设计团队会直接跳过模型的设计。实际上,整个设计过程的背后有很多环节,从头脑风暴、需求分析,到线框图、原型,但是视觉手稿的设计和之前的环节一样重要。即使按照精益设计原则或快速原型设计的要求,它也是必不可少的一部分。

今天,让我们来谈谈什么是视觉草图在设计过程中,以及如何创造一个有效的视觉草图和改进设计过程。

线框、原型和模型是相互关联和相似的,但它们是完全不同的,但对许多人来说,它们仍然令人困惑。了解它们之间的区别和联系的方法是通过具体的设计过程和实际应用。

从构思到发展,通常有三到四个不同的设计阶段。

通过绘制用户界面草图,我们可以从多个想法中选择有潜力的方案绘制线框,规划信息层次,对内容进行分组,突出核心功能,用细节绘制视觉草图,将真实的交互和视觉集合在一起,形成由多个阶段组成的原型,这样设计人员就可以快速、廉价地测试和迭代他们的想法。这不仅适用于新产品的构建,也适用于新版本界面的更新。

接下来,我们不妨关注视觉手稿的设计。线框保真度较低,而视觉脚本添加了细节,但不包括交互。与高保真原型相比,它是中等保真。视觉手稿是静态的,细节丰富,还原性强,所以你可以通过这个特征来区分它。

以线框为骨架,添加颜色匹配,字体匹配,注入品牌相关材料,适当调整内容布局,添加风格适当的导航,视觉手稿就出来了。

那么,为什么要增加视觉手稿的设计环节呢?因为视觉草图是表达视觉需求有效的方法之一,这对甲方、发展和其他利益相关者尤为重要。如果没有视觉草图,人们会觉得不舒服,如果他们转向早期低安全性的真实线框来显示产品的进展。尽管视觉手稿不具有交互性,但对于有经验的开发人员或其他参与者来说,它可以从中获得很多有效的信息。

“基于可视化手稿的在线框图,它更具组织性,更符合团队的愿景。它的另一个优势是通过卓越的远见向利益相关者提供更有效的信息

基本上,视觉脚本是线框和原型之间的粘合剂。

使许多UI设计师抵制视觉草稿的原因是,它似乎需要时间,但很难取悦。

幸运的是,有几种方法可以确保在不降低效率的情况下更快地生成可视草图,这不会影响UI设计者的总体效率和开发进度。

对于理解代码的UI设计人员来说,并不总是绘制可视草图。通过尽早使用代码进行构建,减少后期开发的时间,但这需要设计师具备熟练的代码使用技能,否则后期代码不具备可用性,这将限制您的产品开发。

很多设计师都会尽量使用自己的详细设计工具来制作UI视觉草图,并使用Photoshop和sketch等工具来制作具有细致像素的静态视觉草图。

在设计工具中构建可视化手稿的决定性因素是设计的工作量和可重用性。很难接受,你需要在原型阶段重建视觉手稿后,你设计它。幸运的是,以justinmind为代表的一些新的原型工具可以与PS、AI和sketch无缝连接。您可以在这些原型工具中直接调用它们。在justinmind中,甚至SVG文件和调色板都是完全可编辑的。

如果你想摆脱工具之间的差异,用原型工具来“减少维度打击”来制作视觉手稿。此时,您需要选择一个具有相对完整的UI元素库的工具来帮助您创建高保真的可视手稿。这个工具应该允许您完全调用丰富的字体和图标资源(例如,Justin mind集成了Google字体),以确保您的设计足够流畅。

刚刚开始绘制视觉草图的用户界面设计师通常会犯以下错误:

我们希望视觉手稿能够传达这种功能。视觉脚本看起来不错,但实际上只是一个孤立的图像,不足以承载网站或应用程序的复杂体验。真正传达功能特性的是交互原型。功能扩展。向可视化脚本添加控件并不难,但是如果您不知道所有的函数,可以只添加按钮,这就是函数扩展。问题无法解决。许多视觉脚本看起来非常漂亮,但它们并不能解决实际问题。不要误会把眼光和问题分开,这会让你以后陷入困境。后记

当你真正开始将视觉手稿视为连接线框和原型的中间组织时,它的重要性和功能将更好地呈现给你。通过视觉草稿来消除潜在的视觉问题,UI设计师也可以在这个阶段更好地释放自己的创造力,专注于功能、层次和体验。