主页 > 产品中心 >

如何画出真正的产品原型设计

文章来源:未知 2018-08-04 04:35

  原型图的格式,属于“道”,“法”,“器”,这3个层次中的“器”。如果想在用户体验上,走的更远;那么就需要在“道”,“法”,这2个层次上,积累更多的项目经验,还有不同岗位的思维方式和沟通思路。

  可以在另一台电脑上,阅读和编辑Axure原型图;在Axure预览模式下,可以在浏览器左侧显示网页的目录;Axure软件有Mac版本和windows版本。

  如果接收文件同事的电脑,没安装Axure,就打不开了;不能在手机微信聊天窗口上,直接阅读Axure原型图;Axure低版本,不能打开高版本的Axure文件。

  可以在另一台Mac电脑上,阅读和编辑Sketch原型图;Ui设计师,可以直接在Sketch里面,把原型图,做成高保真的Ui设计稿;可以导出PDF格式的多页面PDF原型图。

  Sketch软件,目前只有Mac版本,没有Windows版本;在手机微信App的聊天窗口上,不能直接阅读Sketch原型图;Sketch低版本,不能打开高版本的Sketch文件。

  可以在Mac或Windows电脑上,阅读和编辑PPT格式的原型图;在手机微信App的聊天窗口上,直接阅读PPT格式的原型图;可以通过其它软件,将画好的原型图,导入PPT里面。

  ppt页面的面积太小,不支持表达多个页面之间的跳转关系;页面的缩放,难以操作;PPT里面的画图控件太少,画图工具隐藏的比较深,操作起来,不方便;

  可以在任何电脑上,用浏览器打开,直接阅读Html原型图;不能在手机微信聊天窗口上,直接阅读Html压缩包的原型图;可以先用Axure设计原型图,然后导出Html网页格式。

  不支持Html网页原型图的再次编辑,不支持在浏览器左侧显示网页的目录;邮件接收Html原型图的压缩包,需要解压,然后还需要在众多网页文件中,一个个点开查看;页面之间的跳转关系,各种中间状态的逻辑判断,Html难以表达清楚。

  可以在任何电脑上,阅读和编辑jpg图片格式的原型图;邮件发送jpg图片格式的原型图,文件可以很小;可以在手机微信聊天窗口上,直接阅读jpg格式的原型图;可以通过其它软件,将画好的原型图,导出为jpg图片格式。

  在电脑上,jpg图片格式的原型图,比较难操作:比如:调整到100%大小,并左右移动查看页面跳转关系;在手机上,微信发送的时候,具有流程关系的一大张jpg图片格式的原型图,会压缩,导致微信接收后不清晰。

  可以通过其它软件,将画好的原型图,导出为PDF格式。可以在Windows或Mac上阅读;支持软件:Adobe Reader,极速PDF,福昕pdf,Acrobat;可以在智能手机上,阅读pdf格式的原型图;支持手机APP软件:WPS,极速PDF,福昕pdf,Acrobat,甚至微信app的聊天窗口,直接发送,对方直接打开。在电脑上,页面容易调整到100%大小,并且左右移动查看页面的跳转关系;Mac电脑自带的预览pdf软件,可以合并多个pdf,旋转pdf的某一张内页;电脑版的福昕pdf软件,可以给pdf内页添加标注文本,可以在多页面的pdf左侧添加目录链接;

  如果需要重新编辑pdf里面的某一页,那么就要提取多页pdf文件中的某一页,待修改好之后,再合并到多页PDF文件里;电脑阅读和手机阅读pdf,最好是已经安装了专业的PDF阅读器。

  APP产品设计的原型图,重在表达意思,只要意思传达到位了,那么格式可以不必在意。

  如果想在用户体验上,走的更远;那么就需要在“道”,“法”,这2个层次上,积累更多的项目经验,还有不同岗位的思维方式和沟通思路。

  五年时间转瞬即逝,在自己小窝的最后一个周末;眼看着家当和心情都被打包的差不多了,整个人却终于感冒发烧腹泻垮了下来,这是闹哪样呢。所幸本周前面几天可以抽出些时间做掉这篇译文,今天发掉先。接下来的两个月,大概要集中业余零散精力放在一本iOS书的翻译上了;希望还能有些时间分给这边。杂七杂八就到这里,我们直接进入正文——草图原型实战技巧,没有务虚的大道理,每个内容要点都很实用。走着。

  在如今的用户体验及产品圈子里,越来越多的人开始了解到草图及相关的原型工作对于整个设计流程的重要意义;不过在实际工作中,真正会拿起纸和笔的人貌似不是很多。作为一名用户体验设计师,我(英文原文作者)每天都会画草图,我还霸着办公室的一整面墙,在上面铺满草图,标注着各种上下文情景脚本。

  确实,使用电脑中的原型设计软件代替纸和笔,在很多时候是一种省时省力的做法,不过从可视化与实体化的角度来看,这并不是最好的解决方案。当你正在构思网站页面或是移动应用的布局,琢磨着功能流程及上下文情景脚本的时候,拿起笔画画草图才是更加直接有效的方式——它可以帮助你集中精力解决眼前的问题,尽情的勾勒各种想法,而不必为工具软件的使用方法或功能限制等方面的因素分散注意力。

  很多文章都会告诉你草图这东西有多给力,但是基本不会从实战的角度进行深入而细致的讲解;本文则不然,我会实打实的从具体执行的角度,向大家介绍一些常用技巧及其背后的道理,这些都是我和其他很多用户体验设计师在每天的工作中所要用到的。

  从视觉角度上讲,即使最完美的草图作品,与真正意义上的“绘画”相比也是相距甚远的。如同你的思维与灵感,草图应该处于一种持续变化的状态,随时可以根据需求进行调整。你确实不必掌握那些真正的绘画技能,不过有相关经验的话自然更好。

  不要太在意草图在“绘画”方面的视觉效果,试着把它当作海报来审视——你第一眼看到的是什么?细节信息在什么地方?记住,人的目光总会被细节与强烈的对比所吸引。

  就像语言表达能力可以决定人与人之间互相了解的程度,草图的表现力也会直接影响到产品设计流程中的信息沟通。好在,我们有一些不错的方法可以学习和运用,在实践中逐渐提高自己的草图表达技能。

  初期,使用浅灰色的马克笔(大约20%到30%的灰度)勾画轮廓和布局结构;在进入界面元素的细节部分之后,逐渐使用颜色更深的马克笔或钢笔。

  从浅色开始初步的框架工作,会让事情变的容易些;在这个阶段,犯些错误也无妨,你可以逐步评估和调整想法。把线画的凌乱些也没太大所谓,在接下来的阶段,使用颜色更深的线条逐步完善草图之后,没人会注意到这些早期的浅色轮廓。

  随着灵感落实成为确定的想法,并不断的跃然纸上,我们使用的颜色也可以逐步加深了,必要的时候可以使用钢笔来勾勒细节。通过灰度的差异来体现界面的逻辑,整个草图的层次感会非常鲜明。

  分层的做法还可以帮助我们在初期将注意力放在内容结构与视图继承等方面,不至于一开始就被各种细节问题和想法纠缠。如果你知道眼下的界面中需要一个列表,但不清楚列表项中的具体内容,那么就使用浅色笔随便画些曲线来代替文案;在之后的细节阶段,再回过头来用深色笔添加一些具体的范例内容。

  如果你更习惯于使用圆珠笔起草,并且打算接下来用马克笔做辅助的话,记得将圆珠笔的墨迹晾干先,否则会被马克笔中的酒精成分污浊掉。

  经过越来越多的实践,你也许开始变的更有把握,而逐渐忽视浅色底层绘制;最终结果也许不会很坏,但我个人仍然建议保留这一步骤,因为你可以在这个阶段里做很多实验性的摸索,一点点评估和落实头脑中的想法。

  在画长线条的时候,试着让自己的手与胳膊跟随着肩膀移动,而不是通过腕子或手肘来用力;只有当你需要快速的画短线条,或是处理一些局部细节的时候,手肘的驱动才更加有效。

  肩膀的旋转驱动,可以帮助你画出更长更直的线条。如果只借助手腕的力量,你会发现画出的直线通常是弯的…另外,还可以在画长线之前,先在起点和终点的位置各做一个标记,以增强目标感。

  对于那些由长线条组成的、用来表示页面或设备轮廓的矩形和其他多边形,可以通过旋转纸面的方法依次画出边框线,而自己的姿势与落笔的角度可以保持不变。

  要在每个方向上都画出很漂亮的直线,确实不是容易的事情。只会画横线不会画竖线度好了——这样无论什么角度的直线,对我们来说其实都是一个方向的,我们自己最习惯的姿势和落笔的角度就可以保持不变了;简单又实用。

  以普通草图为基础,将便签贴纸附着在图纸的相关位置上,用来表示那些具有交互性质的界面元素,比如提示气泡、弹出层、模态窗口(modal windows)等。

  我们可以在一张草图上使用便签贴纸同时定义多个交互元素,然后按照具体的交互规则,取下一些,再对包含剩余交互元素的草图进行扫描和复印,最终就可以得到一套完整的交互示意草图。

  这种方法可以帮助我们在不修改草图框架的情况下快速的定义页面元素的交互方式。便签贴纸的位置可以很方便的被调整,我们还可以在上面勾画该界面元素中的细节内容。

  有时,对于某些UI元素,你也许要重画并调整很多次。这不能算是坏事,你可以把这样的需求看作重新构思并快速迭代的机会。这种情况下,扫描仪或复印机可以帮助我们提升一些效率。

  使用扫描仪或复印机,将稳定版本的草图复制多张作为框架模板,在其中绘制那些变动需求比较多的UI元素。另外:

  如果你需要在草图中使用浏览器窗口或是移动设备作为背景,那么可以找来一些现成的图片素材,复印多张为我所用。Smashing Magazine的这篇文章中提供了很多典型的背景框架,包括浏览器、手机等。

  如果你需要改变某些已完成草图中的侧边栏,可以用一张白纸画一个新的,复印几张,直接粘贴到这些需要被修改的草图中,覆盖掉旧版的。

  复印机就是传统版的“Ctrl+C”和“Ctrl+V”,它能帮我们快速生成模板;这种方式不仅能提升效率,而且可以减少我们在实验和摸索过程中的顾虑——如果把某些UI元素搞乱套了,换一张模板重新来过就是了。

  另外,如果你需要使用其他色彩的马克笔来标注重要内容或是绘制特定的界面元素,那么我建议你画在影印稿上,这样可以有效避免不同种类墨水之间的污浊作用。

  在细节方面,可以使用直尺作为辅助工具。特别是印有刻度的透明直尺,可以让我们清楚的观察到正在画的直线与周围元素的相对位置关系。

  这种方式特别适用于规划那些需要等距分隔的细节元素,包括列表项、图表、按钮等;我们可以基于这些辅助线进一步绘制这些元素,在细处体现优雅与严谨。

  在前文“分层作业”的部分,我们提到了首先使用浅灰色的马克笔绘制界面轮廓及布局结构;而进入细节部分之后,可以使用颜色更深的马克笔或是圆珠笔、钢笔,配合直尺来勾画。

  在“分层作业”的最后阶段,我们会希望最终成型的界面整体以及其中的UI组件能够清晰的突显出来,而不要融汇在各种辅助线等干扰元素当中。使用深色笔和直尺,我们可以画出长而笔直的浓重线条,有效的突出重要部分的边界。

  与“绘画”不同,我们完全不用回避对直尺的使用;重要的是,要知道怎样正确的运用这个工具——不要在草图工作的一开始就使用直尺,它应该在细节部分与最终突出呈现的阶段发挥价值。

  我们还可以使用直尺来快速整齐的裁纸,例如将便签贴纸裁成更加贴近其所要模拟的UI元素的形状。

  这比从工具箱里再拿一把剪刀出来要省事儿些,因为尺子已经在我们手边了…而且过机场安检时也不会惹什么麻烦…

  试着在上下文环境中构思和绘制草图,展示出当前界面的应用场景和使用方法,或者干脆直接画在设备的速写图中。

  这样做可以迫使我们认真思考应用的使用环境,从草图阶段开始就站在用户心智的角度思考设计方案,并且能够尽早发现应用功能设计中的潜在问题。

  确实,没人愿意每做一张草图之前都要首先画个硬件设备出来。我并不是说必须要这样做,但是对设备及应用环境进行粗略的勾勒,是一件具有长远价值的事,尤其对于移动应用来说,对上下文环境的描绘越详实越好。我个人来说,通常会把移动设备简单而完整的画出来,然后在“屏幕”中按照实际比例绘制应用界面的草图——这样做可以让我时刻留意设备屏幕的规格尺寸及比例约束。另外,我们还可以大致的描绘出用户的操作手型,以此来粗略的评估应用界面中的元素交互方式是否合理。

  想要做到这一点,显然需要具备一定的速写能力;实在觉得难搞的话也没关系,就使用我们在“复印与模板化”中提到的方式好了,直接用设备的图片做底板,没问题。

  草图的目的是沟通与分享信息。普通复印纸可以很容易的被贴到墙上,方便项目相关成员围观讨论。另外,如果需要制作模板或是备份存档,自然是复印纸更加便于复印或是扫描,而不像草稿本那样需要很费力的折叠起来先。

  草图不只是设计师的玩具。开发者、产品经理、业务分析人员等同样可以在工作中充分使用起来。草图是团队之间分享、沟通、探索想法的最直观高效的工具。另外我发现,比起打印稿或是页面截图一类的形式,草图可以更有效的激发项目参与者的参与意识,大家的反馈会更加积极主动。

  始终记住一点,绘制草图是一个梳理与表达想法的过程,而非创作美术作品。完成草图后,不妨评估一下——这样问自己:“这些草图能否帮我更好的就各种想法进行沟通?” 而不是“画的够不够炫?”

  是时候去实践了,千万别让自己在工作中被工具和技术困住手脚;这些其实就像玩泥巴一样有趣。

  草图,线框图,设计草稿,高分辨率的可视效果:原型对交互式应用发展的作用是必不可少的。下面跟大家一起探讨一下其中的联系和区别,哪些方式适用于哪些项目。

  在电子产品的开发中没有一个最终目的是原型。原型的目标是将想法,功能,内容形象地表达出来,以此得到反馈并改进产品。交互设计中最重要的挑战往往是界面:它应该是友好的,直观的,最好是一目了然的。

  在开发的过程中会不断地出现一些必须用原型的方式来解释的问题:用户感知到了什么元素?组件是如何交互的,整个系统背后的逻辑是怎样的?这种逻辑用户是否能快速的理解?操作是否会令人困惑?原型能够帮助解答建立在使用价值之上的实际问题,以此做出最好的设计方案。

  但是什么样的原型适合一个交互项目的什么阶段呢?它应该尽量精致还是应该简易、快速?是否还能用工具对原型做一些快速的交互呢?

  原型根据外观和功能有不同程度的保真度。Sketches或者Scribbles通常足以应付第一阶段的草稿。在这种类型的低保真原型中线框也只用保持简练和单色,只用突出框架和功能。这些简略的草图不用色彩丰富绚烂,不用太多的可视化的元素。

  用Axure,Balsamiq或者Mockplus等带有许多组件的原型软件工具能让你快速地制作界面。通过进一步地集成设计元素,线框图能够打造得更为精致。

  这种情况下设计稿已经充斥着色彩,图形,文本,间距和字体。对于高保真的程度是没有统一的标准的,可以用PowerPoint展示,可以用HTML,亦或是图表的形式。你也可以用Photoshop组合你找到的视觉元素。如果网站或APP是动画的,用比如说After Effects这样的软件就可以清楚地向客户展示产品的思路是怎样的。

  测试过程并不会像实践一般简单,合适的原型取决于几个因素:目标组,技术背景和开发阶段。“没有比手绘草图更好的了”,汉堡的UX设计师Miriam Scheibe说到,“像乒乓球一样在概念和开发之间不断来回打磨构思。”Scribbles也能用被用来展示行为和交互,比如说展示当用户完成登出的流程后会发生什么。在这个阶段只有概念需要被印证,没有视觉设计的必要。“想法有多模糊,原型就应该有多简单”,Miriam说到。这些草图应该尽量地远离产品,因为针对早期测试它们还需要修改成特殊的形态,能够形成模板,利用原型软件能够方便的变为简单的交互网站或APP。

  Wireframe有助于内部沟通,以传达在设计,视觉,开发方面的架构信息。尽管这种工作可以由PDF完成,但是其自带的丰富的工具能提供更多。取代了大量难以阅读的任务列表,越来越多的的机构都在使用可以模拟应用效果的交互线框图。快速的原型工具Mockplus也能提供帮助。

  视觉工作是有必要的。“如果团队在概念阶段达成了一致,想要得到部门经理的认可,展示形式需要更为具体”,Miriam Scheibe解释到,“因为这些人通常没有太多时间,你可能需要在电梯里阐述你的想法。在没有时间和预算用于Photoshop设计的情况下,Wireframe也能够用于集成背景,图案,字体和色彩。”

  甚至如果代理人是代表风险投资的客户的话,最好依靠高保真的原型而不是在观众前表述抽象事物的能力。在这种情况下爆炸式的美学和令人印象深刻的触感更加为你的表达加分。

  综上所述,不同的设计阶段和设计需求有很多合适的工具,线框图适用于内部细节沟通,包括页面结构/导航/交互细节等,草图用于捕捉想法,不必纠结细节的构思阶段。原型图则是针对原型测试和改进,关于行为和逻辑的验证阶段,选择适合的工具可以为极大地提高设计的效率和质量,更好地完成产品。

作者:admin