产品原型图素材-刚入门的产品经理画产品原型图，有哪些好用的工具，求安利

什么是产品原型

说的简单一点,产品原型是设计方案的表达,是产品经理、交互设计师的重要产出物之一,也是项目团队的其它成员(尤其是设计师、开发人员)的重要参考和评估的依据。

结合我们前面了解的知识,产品界面原型其实就是页面级别的信息架构、文案设计、及页面和页面之间的交互流程,它是产品功能与内容的示意图。

直接上几个原型图,可能会更加清晰明了,如下图:

原型设计稿

产品设计原型按照精细程度来分,可分为低保真产品原型和高保真产品原型、设计成品

低保真产品原型

所谓低保真原型,其实是对产品较简单的模拟,它只是简单的表述了下产品的外部特征和基本功能构架,很多时候都是用简单的设计工具迅速制作出来,用来表示最初的设计概念和思路。

比如用纸和笔进行的手绘,用画图软件做出的简单线框图,都算是低保真产品原型。

这样的原型图有几个好处:

可以快速产出:有时候一个需求的开发周期很短,低保真原型可以快速满足同事的时间要求。

修改成本低:一个产品策划很可能会被修改很多次,低保真的原型修改起来很方便。

当然,低保真原型也会有几个问题,比如交互细节不清楚,容易造成误解等。通常来说,一般只有时间比较紧迫,需求也比较简单的时候,我们才会去产出低保真产品原型。

高保真产品原型

高保真产品原型,则是高功能性、高互动性的原型设计,是忠实展示产品功能、界面元素、功能流程的一种表现手段。原型图中无论是功能模块的大小,还是文案设计甚至是所用的图标、图例、交互动作,都使用真实素材,或者说和最终UI设计师的产出非常接近,就算是高保真产品原型了。

高保真的好处:

便于梳理产品细节:制作高保真原型的过程中可以让产品经理提前发现产品潜藏的各种问题,提前处理风险。

更容易让其他成员了解产品设计:有时候简单的线框图无法让别人想象出你要做的事情,也不清楚你要放的是哪几个字段,而高保真原型就可以。

相对而言,劣势就是制作周期比较漫长,涉及到产品流程的修改,那基本原型就得回炉重造一遍。

对于刚入门的产品经理,我一直建议有时间的话,还是尽可能多的画高保真原型。因为在一开始产品设计经验不多的情况下,通过设计一些高保真原型,对梳理自己的产品思维、了解产品设计是很有帮助的。对于已经入门很久的同学来说,则看需求的复杂程度和时间安排,比如产品的关键页面是必然要用高保真原型去设计和梳理的。

设计成品

设计成品在这里,你也可以理解为是视觉设计师产出的UI设计稿,也就是设计师对你的产品原型进行美化之后得出的作品。设计师会运用一定的设计规范,来将你的原型变成可以让开发进行实现的作品。

01字体:类型&字号

在原型页面的文字设计中,字体的选择方面建议使用苹方(macOS)或是微软雅黑(Windows),以便达到更好的显示效果。

字号我个人比较常用的是12、13、14、15、17,偶尔会用9、10、20。

02配色:色彩&界面

在原型页面的色彩设计中,最好保持一致,无论是文本还是其他图形、图片不要使用太多非黑灰白以外的色值。

如果用于演示的产品原型稿件中需要配图标,则需要保持图片的一致性,大小及样式。但在实际的工作中,除了一些指示性比较强的图标,比如搜索、设置、分享等等,其他的尽量不要使用图标素材。

组成原型界面的素材也要尽可能的避免混搭,比如从成熟产品中截图然后应用到自己的产品原型当中。

在Axure9中新增了AdjustColor【颜色调整】,可对图片可以进行色值调整。

03排版:对齐&间距&留白

在原型页面的结构设计中,要灵活的使用参考线、对齐、分布等功能,使页面内容具有良好的可读性。

从个人习惯来讲,无论是间隔还是留白,我会按照5像素的倍数进行设置。留白一般在Style样式面板中调整Padding值,很多时候,Padding值也能辅助我对组件进行对齐操作。文本之间的行间距偶尔会调整,但会以默认为主。

04案例

以下是一些规范原型页面示意:

05结束语

对于想要从事产品经理或是交互设计师的新人来讲,建议大家在熟悉工具的使用过程中有意识的培养自己的设计规范。在绘制线框图,或者临摹其他成熟产品创建高保真原型(实际工作中并不需要创建高保真原型,这边需要特别注意)的时候,一定要注意以下2点:

线框图:不建议完全按照苹果或是安卓,设计规范进行页面设计。

高保证:不建议像素级临摹。

首选建议不要直接用Axure,推荐国内80%产品经理都在用的墨刀,是在线原型设计工具,很多模板都可以直接复用,分享便捷,易上手操作很简单。

一是Axure对于新入门产品经理而言,Axure功能确实很多,但是对于初级而言主要是能把梳理的产品功能逻辑结构,用快速上手的原型设计工具落地成产品原型图即可,主要是跟领导、同事沟通时候,预览设备限制,极不方便。

二是墨刀提供很多行业产品原型图模板,除了可以直接复用外,将自己设计的产品原型图与其做对比,进行反思优化学习,同时,墨刀还可以把产品原型图直接分享成项目链接或二维码,特别方便领导和同事预览,更方便沟通~