友情链接：我们为什么需要原型设计，该如何进行原型设计呢？ - 设计 - 伯乐在线
& 我们为什么需要原型设计，该如何进行原型设计呢？
做互联网产品的小伙伴一定不会对“原型”这个词感到陌生。它就像“用户体验”一样经常被各类人挂在嘴边。它有许多近义词，如线框图、故事板等。那么究竟什么是原型设计，我们为什么需要原型设计，如何进行原型设计呢？
本文将梳理关于原型的前世今生，弄清楚它到底是个啥，我们如何使用它。
原型设计是什么
原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言，原型是一种沟通工具。
线框图描绘的是页面功能结构，它不是设计稿，也不代表最终布局，线框图所展示的布局，最主要的作用是描述功能与内容的逻辑关系。
原型图是最终系统的代表模型或者模拟，比线框图更加真实、细致。
原型设计在产品设计中所处的位置
原型设计的目的
很难想象一个没有原型的产品是如何诞生的。
原型设计的核心目的在于测试产品，没有哪一家互联网公司可以不经过测试，就直接上产品和服务。
原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。
虽然需求文档也是可以满足沟通需求的，通过用例将交互写到设计描述文档中，但是原型可以更详细地解释交互。
你可以用屏幕录制软件或者用一只手机对着屏幕拍摄下你操作原型的过程，边录制可以边评论，比如：“我现在有点晕了，不知道该怎么操作，或许点击这里看看……哎呀，好像点错了。”
原型设计的流程
开始做原型之前，请先考虑清楚以下几个要素：
做这个原型的目的是什么？
这个原型的受众是谁？
这个原型有多大效率帮助我传达设计或测试设计？
有多少时间做原型？需要什么级别的保真程度？
原型设计流程
步骤一：画草图
画草图的目标是提炼想法，并且最好给画草图加上一个时间限制，那就是15分钟。
如果你绘画能力很差，那么恭喜你，可能你能更好地用好草图，因为你的注意力没有放在美化你正在画什么上面。
画草图要避免陷入审美细节，尽可能快速的导出想法才是关键。
用纸笔画的用户个人账户的草图示例
用HTML代码制作的相亲网站个人收集页面草图
步骤二：演示及评论
演示和评论的目标是把一些想法拿出来跟大家分享，然后进一步完善想法。在演示过程中，要做好记录，演示和评论的时间可以对半分。
步骤三：做原型
在明确了想法之后，就可以开始进行原型设计了。这个阶段需要考虑很多细节，找出切实可行的方案，运用合适的原型来表达。
步骤四：测试
原型的目标之一是让受众来检验产品是否达到了预期，因此可以请5-6位测试者，通过音视频捕捉等方式，看看产品原型是否被顺畅地使用了。
原型设计工具
选择什么工具来制作原型？主要考虑以下几个因素（排名分先后）：
熟悉程度和获得工具的便利度；
所需的时间和精力；
可复用的代码/框架；
为测试创建可用的原型；
价格和学习曲线。
常用原型设计工具调查结果（2013年），出处：
不得不说，这个结果很让人吃惊，没想到有那么多人用Dreamweaver做原型，在这里我介绍两种我经常用到的原型设计工具。
PPT和Keynote
技术门槛低，学习曲线不陡峭；
可用幻灯片母版，复用性高；
模拟移动端产品，修改画板适应手机端尺寸即可；
可导出为HTML或PDF文件；
绘画工具有限；
交互动作有限；
现在非常流行把Sketch与Keynote放在一起用，简单说就是把Sketch里的图层、部件拖拽到Keynote中，然后添加Action动作，按照剧本完成一套交互。
Axure的优点不用多说，但使用它一个工具就能满足设计和文档需求（通过注解，生成规格文档）。
Axure自带的部件库也给制作过程带来了便捷，类似Omnigraffle的stencil一样，避免了重新发明轮子。
要掌握Axure，主要应该弄懂四大核心功能：
母版：主要用于制作网页的页头、页尾，可复用性高；
动态面板：核心中的核心，“层”的概念很重要；
图片热区：在一张完整的图片上通过热区，建立交互动作；
函数和变量：局部变量和全局变量的概念以及应用（比如用户登陆效果）。
Axure 7.0还有中继器这个功能，但是个人觉得比较鸡肋，学习成本也比较高，主要可以用来做搜索框的搜索结果联想的原型。
原型测试流程
原型测试是原型设计过程中的关键步骤，是整体流程中主要的里程碑之一。
可用性测试是一个庞大的话题，测试方法有一对一或者远程测试，难点是从测试中得到有质量的成功。
测试结果取决于测试者，务必招募到合适的人。要找到合适的人，需要对测试者制定一系列的筛选标准，比如一个社交产品绝对不可能找一个连电子邮件都没有的人来测试。
测试时长可以是一个小时左右，足以测试5个到6个左右的关键场景，并列出一些观察结果和关键问题，例如：
用户如何开始任务的？（是搜索还是浏览？）
他先做了什么，再做了什么？
他如何做出最终决定的？
他们是否领会了设计意图？有什么操作困难？
关于记录测试结果，可以结合定性和定量两种方式，做一张计分表，用1-5的程度来表示；同时定性地记录用户的一些表达，尽可能地原话记录。
最后分析这些记录，改善设计。
产品原型设计或者说产品开发是没有尽头的，它是一个不断发展，循环上升，整合知识和经验，不断迭代和完善过程。
可能感兴趣的话题
关于设计频道
分享UI、网页、交互、用户体验设计和各种设计教程。
新浪微博：
设计频道微信公众号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2017 伯乐在线老板觉得政府网站的配色好看，如何说服？ - 知乎60被浏览5885分享邀请回答9217 条评论分享收藏感谢收起291 条评论分享收藏感谢收起更多与世界分享知识、经验和见解如何优雅的用Axure装逼｜高保真原型心得分享
我的图书馆
如何优雅的用Axure装逼｜高保真原型心得分享
去年一直想写的Axure小技巧分享，终于还是动手写了，今天主要给大家分享关于axure高保真原型的一些东东。本文核心内容点：- 啥是高保真原型？（附简单说明原型）- Axure可以画出什么水准的高保真？（给示例，开启装逼模式）- 高保真原型图技巧：- 啥时候上高保真？适用场景 and 不适用场景1啥是高保真原型 ？啥是原型，从事互联网的同学，肯定非常熟悉，特别是产品岗同学。如果不是，那如下简单讲原型和高保真原型的：原型：即产品草图。从产品流程来看，将想法形成草图原型，原型再有设计师形成效果图，程序猿们根据需求和效果图开发，出来的软件样子就是和效果图差不多。原型在过程中就是产品最终形态的骨架。低/中/高保真：根据图的粗糙程度划分，以最终效果图为参照。保真程度越高，离最终效果图越接近。Axure：工具只是实现想法的工具。在众多的原型软件中，最广泛使用的就是Axure了。2Axure可以画出啥水准的高保真？在这里一图胜过千言，以下分享自己画过低/中/高保真原型截图。低保真：最轻松和省时间的原型，粗犷的风格让我们只重视结构和流程，原型不在乎太多设计细节。- 示例1：一个App官网下载页的低保真原型，我们甚至可以成为结果图，突出了这个需要哪一些元素。- 示例2：wap版本下载页，同样低保真，突出结构和元素。中保真：这类原型最常见，低保真不容易描述产品最终样子，高保真容易干扰设计师，中保真汇集了各类有点，也是比较常用的。- 示例3：本示例图为微信酒店订房下的系列页面，中保真对比低保真，更能体现了交互细节和产品流程。- 示例4：这是一个”邀请好友注册获取奖励“的流程，采用中保真并强调了多个页面的交互流程。高保真：对比中低保真，高保真可以称之为效果图了，如果加深细节可以直接对着开发咯，换句话说，高保真更强调细节。- 示例5：在校期间做的校园助手小项目，和同学的第一个5000+用户的项目，简直无以言必的自豪感。由于组内无设计同学，于是要求用Axur直接先画出类似最终效果的高保真，最后再开发。图中除了素材，其他都是使用Axure直接绘制出来。- 示例6：在校期间某日看到了多年未更新的老版36Kr，根据自己兴趣画了新版效果图，也是可以直接通过Axure绘制出来。- 示例7：近期众包某App中“我的”页面。3高保真的特殊技巧高保真原型图技巧：- 核心内功：目标清晰/理解设计规范- 画图习惯：像素对齐/用浅色/上素材核心：目标清晰：不管采用低中高的原型，核心目标是交互稿就是想法的表达，产品流程的表达。可以采用“目标、堆叠、排序”方式来表达。目标指的是页面目的，流程目的，都是为了实现某些需求。堆叠指的是为了满足目的，一个新闻详情页需要哪些元素？一个登录页需哪些元素？建议先用思维导图或者手绘出基本包含的元素，先把包含的元素列出来，不在乎样式，正如HTML编码里面的”内容/样式/结构“，堆叠考虑的是内容和结构。等列出这个页面的所有元素，那就可以开始排列了，这就涉及涉及规范和画图习惯了。了解设计规范：了解不同类型产品的设计规范是很有必要的。比如IOS、Android、Web设计规范，或者某个产品常用页面设计方法。没人会把登录按钮放在账户密码框的上面，了解设计规范的目标是调整好页面结构，将页面元素合理的摆放。推荐《UI设计模式》和《Web信息架构》这两本书，总结了移动端和Web端常用的页面设计知识。习惯：绘图习惯直接影响到了画出来的效果，如果想轻松画出颜值较高的原型，那么可以遵守以下细节。控制组件到素级级别：低保真原型比较粗糙是因为不在乎细节，啥事细节，就是一个页面内元素的宽高圆角等。所以画高保真原型时候，最常用习惯就是计算和定义组件的宽高等属性。 比如App基础背景页面我们可以定义为320x480(Iphone4s的对半比例)、360x640(720P屏幕的对半)等其他比例，然后在此基础上，定义状态栏高度20PX像素，xxx栏高度44Px，几乎就是按照设计规范给的来画组件了，自定义组件一般取10px的倍数，如状态栏这类组件尽量复用。善用对齐功能：对齐在Axure里面非常重要，善用Axure自带对齐功能！不同组件间距尽量对齐相同，或者10px的倍数规律。2个元素间关系善用向左/右对齐，居中对齐，页面内元素间必须存在对齐关系（左右居中）3个元素以上，善用间距对齐。浅色为主，慎用深色：在组件颜色选择上，尽量采用浅色，首先是深色显得比较重，建议关键组件采用深色。图标等采用真实素材：在低保真中，涉及图片图标等素材用占位符，而画高保真时，我们可以替换为真实素材。图标可以去Iconfont下载寻找，图片尽量找真是素材替换。有兴趣适当配色：在不影响设计师的前提下，可以尝试配色，但是交付设计师的交互稿最好不带颜色。4啥时候上高保真？并不是任何时候都适用于高保真原型，哪些场景下比较适合使用呢？**适用场景**：1. 不干扰设计师的前提下，想要尽量接近产品最终效果。2. 涉及会议演示。3. 做好方案对B/C端用户直接展示，越保真效果越好。**非适用场景**1. 产品流程还在探索期，此期强调流程而不是细节，建议采用低保真。2. 周期短，那还是重点表达清流程和适当的细节。总结，高保真原型：- 制作周期：较长，耗时间。- 适用场景：流程清晰的前提下，想要接近或者定义最终效果。**END**Axure小心得，望能对亲有所帮助，文笔粗糙请谅解，欢迎交流。本文由 @ygg（公众号：yggtalk） & 原创发布于人人都是产品经理&，未经许可，禁止转载。人人都是产品经理旗下互助问答平台—天天问改版啦~优秀的人正与你一同分享他们的观点，详情请戳“阅读原文”
TA的最新馆藏任何一款成功的APP都需要以坚实的产品概念作为基础，因为概念决定了产品最终完成的潜力。
一般情况下，交到app设计师手里的都是移动app产品原型图。当然这个是在移动产品经理反复斟酌，并且与大家开会讨论需求定下来的一个产品交互原型。
当你拿到参与讨论确定好的这个移动app产品原型之后，你是不是需要重新理清楚一下整个产品的业务逻辑和UI相关的事情。
所以，今天25学堂借助简书上的血儿的一篇博文《UI到底做什么》来跟大家好好的聊聊，到底如何七步搞定app界面设计。
当然，大家有兴趣可以阅读：
1、你必须要
下面就跟随血儿设计师来看下如何搞定app设计
第一步、从APP产品需求入手，考虑我们到底要用什么主色调
定好主色调：比如同样是团购，糯米用的是桃红色，而美团是翠绿色。那么我们在UI设计的时候首先就要考虑主色调的问题。
定好尺寸：设计尺寸是多大，是以640*1136设计还是750*1136 还是来设计。
所有APP设计尺寸大小规范：
第二步、配色和辅助色用什么颜色
在考虑到产品气质和品牌色的同事，我们经常要考虑配合衬托产品主色调的辅助色。在不同的产品中，辅助色运用的策略是不同的，比如我们经常说的：邻近色、对比色等。都是我们选择辅助色的方法。
配色在线网站：&以及主色调和辅助色的信息图解
第三步、用什么风格来表达
定好风格：可以根据产品需求，从竞品当中找到几个合适的参考。
现在来说，说到风格一句话，扁平风。但是在扁平中也有区别。比如下图，同样是扁平。但是左图微微带有一些光影，而右图是纯扁平。你能说哪个好或者不好吗？不能。
同样的信息，在UI的表达上也有不同的表达方式。那么只能在具体你的UI设计中去考虑具体你需要用什么风格。这些都是UI的工作内容。
第四步、APP图标化画成什么风格和创意表达
同样是设置、发现、首页，不同的app在基本结构一致的情况下也有很多细微的差别。倒是是要用圆角的icon、还是直角，是用面还是线形，这背后的设计语言逻辑是什么，设计目的是什么。都是需要UI设计来考虑。
比如：同样是腾讯的产品，手Q和微信的icon就完全不一样。其原因是由于产品面面对的人群不同，手Q更偏年轻化。同样，你去看陌陌、来往、易信的聊天icon也是不一样的。这都是需要UI设计师一点点抠细节的去画出来的。
第五步、如何表达情感化设计，特别是app引导页的设计和启动页的设计
相关的博文推荐：
在一些细节页面我们常常要考虑情感化设计，以此来提升app的品质，降低用户在异常情况下 的挫败感。同时好的设计师还会考虑到如何引导用户去解决，从而满足产品诉求。不同的产品在做情感化设计的时候方式方法不同，风格也不一样。这些也都是需要UI设计来处理的。
这些情感化的设计元素，始终要贯穿到整个APP界面设计当中去。特别是一些细小的情感交互设计上面。
第六步、动效如何做或者说APP交互怎么实现
因为手机交互是动态的。所以我们如果可以用在一些跳转页面引用动效设计，无意是对整个app加分的好方法。
好的app交互设计体现出一个app设计师的水平，同时也提升这个app设计的档次。也能让客户端的程序员更明白设计师的心思。
第七步、宣传推广的APP &图标icon 的设计
关于app的图标设计方法，一万个人有一万个答案，那么具体怎么做，还是要考虑用户、场景、需求等细节。产品可以提供方向，但是具体的落地还是需要UI设计师来完成。
APP图标ICON的设计尺寸是： &同时也可以去下载各个平台的icon设计模板
最后，在设计app界面的过程当中，也要把APP切图、适配的因素放在心上。避免后期切图和程序员适配出现不合理的设计之处。还有一点不容忽视的很重要的一个步骤。
就是学会一边设计一边用真机测试预览。
阅读(...) 评论()}