产品经理都知道,在这样一个看重颜值的时代,一个赏心悦目的产品是多么重要。每一个产品经理,也都希望自己创造的产品是与众不同的,在茫茫的互联网产品海洋里,能够闪射出耀眼的光芒,就好比每个人都希望自己是人群中独一无二的那一个。

在大公司内部,通常来说不需要产品经理去进行具体的界面交互设计,多数是由产品团队与UED团队合作进行产品原型的设计,出具的交付物是产品原型和页面交互图,而产品经理则需要产出市场需求文档(MRD文档)和产品需求文档(PRD文档)。但是在绝大多数创业公司团队里面,则没有配置那么豪华的产品设计、交互设计团队,常见的搭配往往是一个产品经理加上一个UI设计师,所以一般都是产品经理自己身兼交互设计的工作职责,输出交互设计稿。

什么是产品原型

很多搞信息技术的R人以为线框图 (Wireframe)、原型 (Prototype) 和视觉稿 (Mockup) 是一个东西;

误把线框图当成原型,有点像建筑里分不清蓝图和演示厅。你完全可以试着在演示厅里小住一会,它的妙处就在于能直观传达房间的美,但你没法舒服地躺在蓝图上;蓝图不过是一张纸罢了。

在建筑学上,演示厅和蓝图服务于不同的交流对象:

蓝图,即施工方案,详细描述该如何建造建筑
演示厅,给未来的居民提供测试和体验的机会
演示厅和蓝图的共同之处是,它们都代表着最终的产品,即建筑。线框图、原型和视觉稿亦是如此,这些文档都是最终产品的不同展现方式。

接下来,让我们详细讨论三者的区别,以后你就懂得在什么样的场合下用什么词汇了。

线框图

线框图 (Wireframe) 是低保真的设计图,当明确表达:

  1. 内容大纲(什么东西)
  2. 信息结构(在哪)
  3. 用户的交互行为描述(怎么操作)

线框图不仅仅是无意义的线和框的集合,你可以把线框图理解为设计图的骨干与核心,它承载着最终产品所有重要的部分。

线框图可以帮你平衡保真度与速度。绘图时不用在意细枝末节,但必须表达出设计思想,不能漏掉任何重要的部分。就像给项目以及一起协作的团队成员,如开发工程师、视觉设计师、文案作者和项目经理,开辟了一条辅助理解产品方案的通道。

绘制线框图,重点是「快」。大多数时间请和团队成员沟通,多做思考。审美上的视觉效果则应当尽可能简化。黑白灰是经典用色,你也可以用蓝色代表超链接。如果你在准备线框图时花了大把时间,比如,选择图标、上传图片,请换个简单的方式,比如,使用占位符,再加上合适的描述文字)。我们习惯把线框图称为低保真设计图。

好的线框图能像水晶一样,清晰明了地表达设计创意,在成员中无缝传达其思想。

何时使用线框图

线框图常常用来作项目说明。鉴于其静态设计,一次只能通过一张界面演示交互,因此,务必附上说明。只要有必要,简短描述或附在复杂的技术文档里,都可以。

也因为绘制起来快速、简单,它也经常用于非正式场合,比如团队内部交流。要是开发问起一个东西怎么做,回复时不妨附上一张迅速绘制的线框图。线框图难以充当用户测试的材料;倒也能收集些反馈,如果你更关心用户意见,而非测试方法。

线框图在整个设计过程中发挥着惊人的效果,在复杂项目的初始阶段必不可少。

原型

原型 (Prototype) ,常常和线框图混淆,是中等保真的设计图,代表最终产品,模拟交互设计。

原型允许用户:

  • 从界面上,体验内容与交互
  • 像最终产品一样,测试主要交互
  • 原型应该尽可能模拟最终产品,就算长得不是一模一样,绝对不能是灰色线框设计。
  • 交互则应该精心模块化,尽量在体验上和最终产品保持一致。

原型背后的逻辑不要依赖交互形式。减少制作原型的成本,加快开发速度。

何时使用原型

原型常用于做潜在用户测试。在正式介入开发阶段前,以最接近最终产品的形式考量产品可用性。

原型一般难以成为上好的文档;因为它得让「读者」费一些力气来理解界面。但从另一个角度来看,作为界面,原型的直观和易懂倒使它成为最高效的设计文档。

对其它交流媒介,原型成本高、费时。对于简单的项目来说,建议绘制原型后,能在接下来的开发阶段复用起来。

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

什么是视觉稿

视觉稿 (Mockup) 是高保真的静态设计图。通常来说,视觉稿就是视觉设计的草稿或终稿。

优秀的视觉稿:

  • 表达信息框架,静态演示内容和功能
  • 帮助团队成员以视觉的角度审阅项目

何时使用视觉稿

产品原型定稿,在界面开发之前完成视觉稿的设计和评审

总结:

类别 保真度 用途 特征
线框图 文档,快速交流 手绘草稿,黑白灰,代表用户界面
原型 用户测试,后续界面复用 可以交互
视觉稿 收集反馈,获得认可 静态视觉设计

极简设计

产品概念出现之初,产品经理在设计产品时都会以产品能否满足用户需求为主。很少考虑产品的交互设计,包括至今,相信使用过公司内部产品的人都能了解,产品的很多设计完全不符合用户操作习惯。随着互联网时代的发展,产品同质化现象越来越多,作为功能相同或相似的产品,能否生出的关键就取决于产品的交互设计及产品的用户体验上;极简设计将帮助产品经理或产品设计人员在进行产品设计时,可以打造一款真正为“用户”设计的产品。

极简设计特点

  1. 极简设计产品可以让用户扔掉产品使用说明,直接可以上手使用。
  2. 用户在产品中可以快速找到期望的功能及服务
  3. 减少因选择过多而造成用户时间上的浪费以及体验上的不足

极简设计4策略

1、删除

删除即将产品无用的功能或服务进行删减,保留高频有用的功能及服务。删除策略的核心就是让你和你的用户更专注与核心功能及服务,减少非核心功能及服务对用户造成的干扰。

(1)少即是多
每个产品经理在设计产品功能是都会用到一个技巧:做减法。随着MVP产品理论的逐渐流行,让产品保持核心功能和核心业务流程,减少不必要的功能变成每一款MVP产品设计之初的目标。任何一款产品如果想吸引用户使用,一定有其核心功能作为底层基础和支撑,让用户为了核心功能而来。
交互设计也一样,用户在使用产品时,是为了其核心功能而来,如果在产品界面加入过多其他功能,会让用户在选择时造成干扰,因为产品的复杂从而造成用户的流失。

(2)专注核心功能
对产品核心功能的优化与迭代,总是好过增加新功能。一款产品上线之后,会经历多个版本的迭代和升级,复盘现象级的微信、QQ这些产品,都是从经历了无数次的迭代升级才成为了优秀的产品。
在对产品进行升级和优化时,对核心功能以及核心逻辑的打磨是至关重要的,只有保证了核心功能及流程的通畅和优秀,才能吸引足够的用户去使用围绕核心功能延伸出来的更多功能与服务。

(3)学会放弃
产品上线之后,通过对用户行为数据、产品功能使用数据的收集、分析,可以发现,并非产品的所有功能都是用户所期望的,在这种情况下要学会放弃,果断放弃使用频率低、用户厌烦的功能。
著名的照片分享社区Instagram的诞生就是源于创始人对原产品中绝大多数功能的放弃,只保留了当时产品中使用最多、效果最好的照片分享功能。通过对照片分享功能的打磨,最终成为了一款现象级产品。

2、分类

将功能与服务分类,让用户可以快速找到自己需要使用的功能及服务,在实际产品设计阶段,分类也可以称为产品的导航设计或内容组织。

(1)按照用户认知分类
互联网产品的出现将很多传统线下服务搬移到了线上,很多产品都是对原有线下产品的线上迁移。所以在进行产品设计时,要保证产品的设计符合用户的认知和行为习惯。
拿阅读类APP来说,产品就是将传统线下的报纸、杂志书籍迁移到了线上,在内容分类和组织上,完全借鉴了线下实体产品的分类方式,让用户在使用过程中完全可以按照早已建立起来的认知模式进行选择,减少用户的学习以及认知成本。

(2)按照用户行为分类
用户在进入产品、使用产品再到退出产品的整个生命周期中,会产生一条行为路径,根据用户行为路径上的每个节点所需要的功能和内容进行分类,让用户可以根据当前所在的路径节点快速找到相对应的功能及内容。
较为常见的产品设计案例就是电商购物类产品,一个用户在进行电商产品购买时,通常会经历产品浏览、选择、加入购物车、收藏、购买、支付、查看订单等多个环境。根据用户购买产品行为轨迹,对产品的功能和内容进行组织分类,让用户可以快速找到其想要的功能。

(3)通过视觉设计分类
产品在视觉设计时,会通过颜色、图标、形状、大小等方式将产品界面、功能进行展现,让用户便捷发现有价值的内容与信息。
颜色:通过颜色设计,对产品内容进行分类,最常见的案例就是地铁线路图,通过对每一条地铁线路图赋予不同的颜色,让乘客可以通过颜色区别更专注于其希望乘坐的那条线路。
形状、大小:根据功能、内容的不同,为其赋予不同形状及大小,从而有针对性的突出希望被用户首先发现的信息。

3、隐藏

如果你不能确定某一个功能能不能删除它,那么就先隐藏它。隐藏的作用是为了将那些使用频率低但又不能删除的功能进行合理的处理。

(1)渐近展现
先展现产品的基础选项,如果无法满足用户,可以提供高级选项给用户使用。最常见的案例就是搜索功能的渐近展现,在用户使用搜索功能之初,只提供简单的搜索内容输入以及搜索按钮,如果用户无法搜索到满意的结果,可以通过高级搜索功能选择更多筛选条件,找到更精准更有效的搜索结果。

(2)适时出现
将功能进行隐藏,在适当的时机展现给用户。常见的设计案例为阅读类设备及产品,如Kindle,当用户通过Kindle进行阅读遇到不认识或不了解的词汇时,通过选择该词汇,会展现提示框供用户进行互联网搜索、词典查询等服务。

(3)提示
隐藏的最高境界是让用户永远无法知道产品还有额外的功能,当然这个最高境界并非我们期望的,毕竟每一个功能的设计都耗费了产品经理无数的心血,每一个功能也都希望发挥其最大的价值。所以在进行隐藏设计是,也要考虑给用户较为明显的提示,让用户在希望找到更多功能时为其提供一个入口。

4、转移

转移的目标是让用户需要做的变成产品需要做的,在技术高速发展的时代,人工智能以及计算机可以做的事情越来越多,很多原本需要用户去做的事情现在完全可以让机器替代,减少用户的操作成本。
目前市面上各种手机助手、智能人机交互系统的出现就是极大减少用户与产品间的交互行为。当用户希望通过Iphone拨打电话或查询新闻时,只需唤醒Siri然后通过语音的方式即可完成以前相对复杂的操作。

设计原型时需要注意的事项

产品经理在将原型图画好之后,往往会特别欣喜,恨不得立马就让全体团队成员看到自己的设计成果。但是,这时候的原型图通常是不完整的,很多场景、因素缺少考虑,小到一个按钮的位置,字段展示、大到功能的流程设计、逻辑设计,都缺乏系统地思考和完善。如果你就轻易把这么一份不完整的原型交付给技术,不但技术会喷你,搞不好用户也来喷你,甚至Boss也来喷你。所以,打磨好产品原型,尽量考虑各种场景、因素,设计原型时尽量细化分析,让所有人从原型就能看到你的态度,是一件非常重要的事情。

总体来说,原型设计需要表达清楚这么几个地方:

1、界面元素

什么是界面元素,比如文字,下拉框,按钮,图标、图片等等这些都属于界面元素。我们在运用原型设计工具(如axure、墨刀、visio等)设计产品原型的时候,需要明确界面上的元素是什么,如何展现,鼠标移动或者手势滑动、点击上去是怎样的效果。

2、数据逻辑

这一点往往也是非常多创业团队和新手产品经理容易忽视的。比如一个直播列表界面,上面有三个tab,分别是关注直播、热门直播、最新直播,那么最新直播是基于怎样的数据逻辑获取的,你就需要在你的原型设计上进行说明了。当然,最新直播的数据获取逻辑是比较简单的,也许你不和研发人员说明清楚,他们也能知道是按时间倒序排列;但如果碰到稍微复杂一点的数据逻辑呢,就比如刚刚说的关注直播的数据获取,是获取关注的机构的直播呢,还是获取个人的直播呢,这都是需要通过注释来说明清楚的。

3、操作逻辑

一个原型界面上可以进行操作元素的有哪些,哪个可以点击,哪个可以选择,操作后出现怎样的反馈,比如弹出浮层?进入新页面?或是跳出新页面?还是给一个怎样的提示?这些也是需要在原型设计里面说清楚的。

这三个点是一份完整的原型设计基本需要包含的东西,再配合上之前画好的产品结构脑图和流程图,就基本可以与开发进行轻松愉快的交流了。只有这样,开发者才能明确这个原型设计的开发需求,而不是让开发工程师自己去猜,去揣测数据逻辑、算法应该是什么样的、具体的产品交互方案如何。

如下图,可以在原型设计上做相关的注释说明:

产品原型

原型设计工具

工欲善其事,必先利其器。好的原型设计工具,总是能大大提高我们的产出效率。产品经理在日常的工作中,其实也应该多多体验一些互联网工具产品,一方面可以让自己的产品感提升,另一方面,也可以通过体验产品来了解工具属性,从而更好地将工具利用起来。这里给大家介绍几款产品设计常用的原型设计工具:

1、Axure RP ,推荐指数✦✦✦✦✦

产品原型

Axure RP是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。

Axure是产品经理的必备工具,其他的不多说了,去看看招聘网站上关于PM的招聘信息,基本所有职位描述里,都包含了这么一句“熟练使用Axure”,所以这款工具的重要性你懂的。

2、墨刀,推荐指数✦✦✦✦

产品原型

墨刀也是一款原型设计软件,虽然可能功能没有那么完整,相对来说对于一般使用也是足够的,目前分为网页版和客户端,网页版可以直接使用,客户端其实也是网页版的功能,一般来说会下载客户端,使用过程中需要联网。

墨刀相对来说有这么几个优势:1、简单、易上手;2、支持团队多人协作;3、控件什么的都是现成的;4、可以直接在手机上进行预览;

当然缺点也很明显:1、依赖网络,网络不稳定或者服务器不稳定的时候则没法使用,这点有点让人崩溃,比如说原型设计到一半突然断网了,则没有保存;2、很多交互功能不够强大,还不能像axure那样实现复杂的交互和跳转;

3、Visio 2013,推荐指数 ✦✦✦

产品原型

很多老牌的产品策划人员、产品经理都使用过它来设计产品原型,算是线框图专业户,比较灵活,Office使用习惯接受程度较高。另一个好处是支持各种平台尺寸设计。有些产品设计团队从原先的Axure 调整至 Visio ,是因为Visio 可以更便捷地输出标准大小的PDF文档,方便在同事之间交流。

在学习伊始,很多刚刚入门的产品新人比较热衷于上网找课程学习Axure等原型工具的使用,乐此不疲;他们都希望通过精通工具的使用能力,来提高自己的职场竞争力。然而这并不是重点,工具只是用来承载和描绘我们思想和内容的一个画笔,所以没有必要把太多的时间消耗在掌握工具的使用技巧上,产品设计的主题、内容、规划才是真正需要用心去考量和思索的。这就好比武侠小说里的故事一样,没有深厚的内功心法,即使拥有好的武器,也发挥不了太大的作用。

总结:

线框图 (Wireframe) 是低保真的设计图,明确表达:内容大纲、信息结构、用户的交互行为描述
好的线框图能像水晶一样,清晰明了地表达设计创意,在成员中无缝传达其思想。
原型代表最终产品,模拟交互设计,允许用户从界面体验内容和交互
视觉稿就是视觉设计的草稿或终稿,表达信息框架,静态演示内容和功能;帮助团队成员以视觉的角度审阅项目
极简设计可以打造一款真正为“用户”设计的产品
极简设计4策略:删除、分类、隐藏、转移
设计原型时需要注意的事项:界面元素、数据逻辑、操作逻辑
原型设计工具:Axure RP、墨刀、Visio 2013