原型设计是产品的缩影。在产品推出之前,原型设计承载着UI设计和交互测试的大部分工作,可以帮助产品经理和UX设计师以最低的成本测试产品的逻辑框架、交互体验、创造性表达等,这不仅节省了时间和成本,而且缩短了各部门之间的沟通成本。在谈论了原型设计的重要性之后,事实上,原型设计并不复杂。以下实时设计师将根据我的个人经验向您介绍原型设计中的内容。
1、什么是原型设计?
原型设计是指设计师用线条和图形绘制产品框架图,以表达商品交互逻辑和动态交互体验的简单交互技术。与所有汉字的需求文档相比,产品原型图更直观,让所有制造商和甲方都知道产品逻辑和创意。同时,它也是整个UI设计中最重要的阶段之一。原型图在很大程度上决定了用户对产品的体验。
2、原型设计的基本要素
2.1 响应式设计
响应式设计可以自动适应PC和移动终端的布局。在移动终端上,不同的屏幕分辨率也应适应布局。这种响应式布局可以更好地适应不同的屏幕、目标和宽高比。在实时设计中,它具有自动布局的功能,可以快速适应各种屏幕,非常方便。
2.2 互动
在今天的原型设计中,交互是必不可少的一部分。客户不仅需要看到原型图,还需要像真实网站一样点击交互、超链接等功能。实时设计中的原型设计可以快速实现交互,交互事件可以添加到右栏的原型中。
3、原型设计的分类
原型设计是一种模块化的设计方法,主要用于确定元素的位置、图形的分布和显示方法,可以帮助UI设计师更好地理解产品需求,更快地设计高保真度的设计图纸。具体分为以下类型。
3.1 纸质原型
在开始制作网站原型之前,不需要复杂的软件或特殊的工具。第一步的原型草图只需要一张纸和一支笔就可以完成。这一步主要是通过快速设计、模拟和测试,不断建立-推翻、再建立-再推翻的过程,创造出合适的页面原型和优秀的页面创意。
4、原型设计理念
在了解了原型设计的定义和类型之后,我们对原型有了一个大致的了解,下面介绍一下如何设计出优秀的原型?
4.1 明确目标
在设计原型之前,我们应该首先设定目标,以解决需要原型设计的问题。这里稍微进行一下。原型设计包括:线框图(Wireframe)、原型图(Prototype)和视觉稿(Mockup)第三部分,分为高保真原型和低保真原型,
这三张图片没有固定的逻辑顺序,可以满足更多的项目需求,执行不同的设计步骤,避免低保真原型,直接设计高保真原型。这主要取决于目标的设置。
4.2 理清思路
确定目标后,我们需要构思原型设计的理念。此时,我们需要团队进行头脑风暴。我们应该集思广益,激发创造力灵感,记录那些合理或不合理的想法。也许一个看似不合理的想法可以成为创造性突破的根源。有了这个想法,我们还需要关注行业趋势,分析竞争对手,研究他们的方法,建立目标用户肖像,探索商品/商业领域等。当你找到这一系列问题的答案时,项目的想法基本上是清晰的。
4.3 原型设计
理清思路后,就要开始原型设计了。上面描述了原型设计的类型和过程,这里就不赘述了。我们主要来谈谈原型设计需要做什么:
逻辑信息,如逻辑框架、客户流程、信息元素等;
色调、排版、间隔、定位、图片、富文本等核心内容;
高保真原型的设计,随着沟通的深入,确定的原型图需要制作高保真效果。
5、原型设计的步骤
原型设计的过程就是从一张纸上画草图,一步一步地制作出可以点击跳转多页的原型。
5.1 绘制主线框图
线框图应该首先绘制网站地图,这有点类似于写作大纲。主要目的是绘制线框图,以提供结构参考,让您了解需要构建哪些页面以及它们之间的连接关系。与网站地图相对应,现在绘制商品主体多个页面的线框图。
购物应用程序的几个主要界面线
5.2 绘制页面元素
绘制主界面线后,还应绘制一些常见元素,如页眉、页脚、按钮、表格、框架等经典元素。有了这些元素,后面的页面可以重复使用相同的组件。
购物APP的页面元素
5.3 交互原型
绘制所有页面后,可以通过线段将线框图中的功能模块连接起来,构建响应式线条,方便与客户沟通和团队内部沟通。如果客户调整了交互逻辑,设计师修改起来也很方便,可以直接更改原型图中的跳线。
购物APP的互动原型
实时设计可以通过连接线连接每个页面的功能点。可设置8种开启效果、6种操作模式和7种动画效果,基本满足大多数交互模式。图表页面对设计师非常友好。
6、选择原型设计工具
伴随着设计工具的发展,有许多原型设计工具,包括Invision。、Figma、实时设计的性能更加突出。如何选择一个易于使用的设计工具,可以参考我之前写过的设计工具评估,"UI设计工具评估竞赛,谁是MVP?",感兴趣的朋友可以点击查看。结论是实时设计的综合得分相对优秀。在这里,我们将详细讨论本文中未进行的部分。
6.1 广场资源
众所周知,设计师的一大帮助是材料,原型设计也是如此。作为UI设计中最短、最快的阶段,效率尤为重要。实时设计的资源广场中有许多原型图模板。结合实时定制的自动布局功能,可以快速建立各种原型图,大大提高了UX设计师的工作效率。
6.2 丰富的插件
对于设计师来说,除了材料之外,插件是最合适的,但一般来说,安装实用插件会更加困难,要么在线资源较少,要么版本不兼容。实时设计在这一点上已经到位。插件按钮可以在工具栏的右上角找到。开启是一个易于使用的插件,经过实时设计精心挑选,无需安装,只需单击一下即可打开。
比如商品组件库插件,打开后包含了各种标准化的部件,鼠标左键点击拖动,就可以出现在页面上,非常方便。
还有图标库、色板、取色等插件,也特别好用。感兴趣的效果版可以进入即时设计体验。
7、总结
在本文中,我们从五个层面深入分析了原型设计的用途和价值:原型设计的定义、因素、类型流程、设计理念和工具选择。原型设计作为UI设计中最重要的阶段之一,也扮演着非常重要的角色:连接需求文档,连接UI视觉设计和开发。它可以被视为UI设计的中坚力量,连接整个UI设计。如果你想学好原型设计,你不仅需要不断的实践,还需要研究更多优秀的产品或网站,学习它们的逻辑框架和设计理念,为即时设计的资源广场中的各种原型做好准备