精华内容
下载资源
问答
  • 专业的快速原型设计工具近几年,产品经理这个岗位越来越吃香,很多程序员、设计师、甚至工程师都转行去当产品经理,但新人产品经理往往因为不熟悉Axure,不清楚原型规范,导致原型制作效率低。在网上也看到很多产品...
    52986d41789e53bdbfedbae9c55199cc.gif

    一直以来,Axure是产品经理的必备软件之一。

    85991f49a4cf1b99dce1dc8745b6b7e6.png

    专业的快速原型设计工具

    近几年,产品经理这个岗位越来越吃香,很多程序员、设计师、甚至工程师都转行去当产品经理,但新人产品经理往往因为不熟悉Axure,不清楚原型规范,导致原型制作效率低。

    在网上也看到很多产品新人的心声:

    “领导说什么功能就怎么画,完全没有了想法”

    “原型画得十分粗糙,和开发沟通相当困难”

    “已经改了十几版了,还是满足不了甲方爸爸”

    可以看出,由于初期项目经历较少,在实际的工作中难免会遇到各种问题。

    那产品新人想要更快地做出规范原型,该如何实现呢?优秀的做法是:熟练掌握原型工具Axure,在设计原型图的过程中根据需求进行设计;提升产品知识体系,知道如何正确的表达产品设计思想。

    说一百遍不如实际做一遍,画原型图的实战案例,数艺君已经给大家整理好了,跟着教程一起来画一画。

    综合实战案例:后台管理系统

    本案例是制作软件后台管理系统或企业管理系统,操作终端为电脑端,直接按照管理系统的常规布局,使用Axure RP自带的元件库自己设计页面,制作交互效果。

    页面框架

    图为管理系统的主流布局方式,顶部显示系统名称和登录信息,左侧为导航菜单,右侧为数据区域。本节内容为搭建好页面框架,制作头像快捷入口和手风琴导航 菜单两部分的交互效果。

    53e5a94425928c15bb8167f324de5759.png

    头像快捷入口

    案例描述:

    鼠标移入头像区域,显示下拉菜单;鼠标移出头像区域,隐藏下拉菜单,如图所示。

    3eeddc46fa887b244cefb2c652da0c5c.png

    案例思路:

    如果是移入/移出某个文本区域显示/隐藏下拉菜单,可以直接使用“水平菜单”元件,非常简单,但头像是一张图片,此方法行不通。

    读者可能已经想到了制作此效果的方法,那就是直接给头像的“鼠标移入时事件”和“鼠标移出时事件”添加显示和隐藏的动作。但这个思路只对了一半,使用这种方法,鼠标移入头像区域显示下拉菜单是没有问题的,但当鼠标准备单击下拉菜单时,鼠标只要刚刚移出头像区域,下拉菜单就直接隐藏了,根本无法单击。

    改进上述思路,使用动态面板的两种状态制作默认时、鼠标移出时的头像区域(只有头像)和鼠标移入时的头像区域(包含头像和下拉菜单)。

    案例技术:

    动态面板、鼠标移入时事件、鼠标移出时事件。

    制作步骤:

    (1)拖入“矩形2”元件至设计区域,尺寸为800像素 ×60像素,位置为(0,0),填充颜色为#1DAAE0,修改其文本为“公司业务管理系统”,在样式面板中修改其文本对齐方式为居左,左侧内填充距离为30,如图所示。

    6d4e07f549a40e3fba42dba928e070ae.png

    (2)拖入“文本标签”元件至设计区域,位置为(745,21),字体颜色为 #FFFFFF,修改其文本为“李明”。

    (3)拖入“图片”元件至设计区域,导入默认头像,尺寸为30像素×30像素,位置为(700,15),圆角半径为15像素,执行右键菜单命令【转换为动态面板】。

    (4)双击该动态面板,打开“面板状态管理”对话框,复制State1,此时动态面板有State1和State2两个状态,如图所示。

    75f28c6ea8191145857adefd6b23269e.png

    (5)进入动态面板的State2,拖入3个“矩形 1”元件至设计区域,尺寸均为 100 像素×35像素,位置分别为(0,40)、(0,75)和(0,110),边框颜色均为#CCCCCC,修改文本分别为“个人中心”“密码修改”“退出系统”。

    (6)分别修改“个人中心”矩形和“退出系统”矩形的上圆角半径和下圆角半径为6像素,如图所示。

    62a614486fdf9fea9f9fc439e2bebad0.png
    7c7e788b7354bee28659ef46022f4ff0.png

    (7)鼠标移入头像区域时,显示下拉菜单,如图所示。

    ①关闭动态面板的 State2,选中动态面板,双击属性面板中的“鼠标移入时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选“当前元件”。

    ④选择状态为 State2。

    6d66069d3ff284d59ab14e11401679df.png

    (8)鼠标移出头像区域时,收起下拉菜单,如图所示。

    ①选中动态面板,双击属性面板中的“鼠标移出时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选“当前元件”。

    ④选择状态为 State1。

    8234a4502c03f99b71a3a331282f2c5e.png

    (9)设置完成后,按F5键在浏览器中预览效果,如图所示。

    0ff21f756f7d7e164d47ac4286323551.png

    手风琴导航菜单

    案例描述:

    单击一级菜单,对应的二级菜单向下展开,再次单击该一级菜单,对应的二级菜单收起。

    案例思路述

    直接使用动态面板记录一级菜单的收起状态和一级菜单展开后显示二级菜单的状态。切换动态面板状态,来实现收起 / 展开的效果切换,并配合推拉元件效果。

    案例技术:

    动态面板、鼠标单击时事件、条件用例、显示 / 隐藏时的推拉元件效果。

    制作步骤:

    首先布局左侧导航菜单。

    (1)拖入动态面板至设计区域并设置为两个状态,State1 代表一级菜单收起时的状 态,State2代表一级菜单展开并显示二级菜单的状态,在两个状态中分别按照“10.1.2 手风琴导航菜单 1”中的样式制作“人员管理”“任务管理”“数据统计”3 组一、二级菜单,其中“人员管理”的一、二级菜单如图所示。

    6f4176684ab52fa4c3da648cdb39f7f2.png

    (2)3组菜单即3个动态面板,分别命名为personnel、task 和 count。

    (3)把3组菜单纵向排列,每组菜单(动态面板)之间要紧紧贴合,且不要有交叉重叠的部分,如图所示。

    cb7425c6e88206f0fb40420c63410e49.png

    接下来制作菜单的展开和收起效果。

    (1)当“人员管理”一级菜单为收起状态时,单击后变为展开状态,展开其二级菜单,如图所示。

    ①进入 personnel 的 State1,选中“人员管理”的矩形,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选 personnel。

    ④选择状态为 State2。

    ⑤勾选“推动 / 拉动元件”,方向为“下方”。

    e5b05fa9c294e3d8ef10ce6d2e2b501f.png

    (2)当“人员管理”一级菜单为展开状态时,单击后变为收起状态,收起其二级菜单,如图所示。

    ①进入 personnel 的 State2,选中“人员管理”的矩形,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置面板状态】。

    ③在右侧的配置动作区域勾选 personnel。

    ④选择状态为 State1。

    ⑤勾选“推动 / 拉动元件”,方向为“下方”。

    33ea31bdcb907d4ecc3b4dc7d665f69b.png

    (3)用同样的方法给“任务管理”和“数据统计”两组菜单制作展开和收起效果。

    (4)设置完成后,按F5键在浏览器中预览效果,如图所示。

    25a9add5f9bb0ed00af80a2cbc5aef85.png

    提示:无论是手风琴导航菜单1还是手风琴导航菜单2,都需要配合使用“内联框架”元件来显示管理系统页面中的数据区域,也就是说当单击左侧手风琴菜单后,只需要在“内联框架”中切换页面即可。本节内容为了清晰地说明如何利用动态面板制作手风琴菜单,将3组菜单布局样式都制作出来之后才开始制作收起 / 展开的交互效果,并且每组菜单(即每个动态面板)中的交互动作都是一个一个按部就班添加的。在实战项目中,后台管理系统一定不止是3组菜单,有的菜单数量可能多达十几个,这时如果还是采取这种方法就会有些费时。可以先把一组菜单的布局样式和交互效果(不仅包括收起 /展开效果,还可以包括诸如二级菜单的选中、鼠标悬停交互样式的设置等)都制作完成,然后直接复制这组菜单(菜单的交互效果是可以同步复制的),接着修改这些菜单的文字内容和图标样式、修改菜单(动态面板)的命名,这样会简单许多。

    思考:

    本小节制作的手风琴导航菜单中,如何做到单击某个一级导航菜单展开对应二级导航菜单的同时,收起其他的二级导航菜单呢?读者可以按照下面的思路尝试一下。第1种思路,单击某个一级菜单(即鼠标单击时事件),把该动态面板设置为 State2 的同时,把其他动态面板设置为State1。但这种方法在菜单数量很多时操作起来会很麻烦,并且可维护性较差。

    第2种思路,把一级菜单(State1中的矩形)的“选中时”和“取消选中时”代表展开和收起状态。单击一级菜单(State1中的矩形)时,设置当前元件为选中状态。当一级菜单(State1中的矩形)被选中时,设置动态面板为State2;取消选中时,设置动态面板为 State1,利用“同一选项组内的元件在同一时间只能有一个被选中”这个属性,就可以做到同一时间只能有一个动态面板的状态是 State2(展开状态),即展开某个一级菜单时,收起其他二级菜单。

    数据查询与编辑页面

    管理系统的大多数页面一般都是对数据列表的查询与编辑,查询操作少不了多个下拉列表的联合查询(联动下拉菜单)。编辑数据时如果涉及批量操作,进度条又是必不可少的,本节就来制作这两部分的交互效果。

    进度条

    案例描述

    单击“上传数据”按钮,显示进度条区域(包括百分比),进度条逐渐填充完整,百分比显示为0% ~ 100%,如图所示。

    21d2d9df9cc4c30acb737679dc999d03.png

    案例思路:

    进度条的填充物为矩形,初始宽度为1,单击“上传数据”按钮后,设置矩形的尺寸为逐渐变宽即可。进度条百分比的算法为填充物(矩形)的宽度占总体宽度的百分比。

    如何不断地更新进度条百分比?因为百分比默认是隐藏的,当单击“上传数据” 按钮显示出来时,给其“显示时事件”添加“设置文本”动作,接着把它隐藏再显示,形成递归效果。

    案例技术:

    鼠标单击时事件、显示时事件、局部变量、Math.floor函数、width 函数。

    制作步骤:

    (1)使用矩形和水平线制作“导入数据”悬浮框,悬浮框中包含标题、“上传数据”按钮、进度条和“关闭”按钮,如图所示。图中蓝色部分为填充完整的进度条,命名为fill,尺寸为400像素×20像素,即当进度为 100%时进度条的宽度为400像素。灰色部分为进度条的边框底色,命名为border,其作用仅仅是为了美观,右侧的百分比命名为 percent。

    0135cc748e35cd2027cd8826a34cbc5f.png

    (2)调整好样式后,把进度条fill的尺寸修改为1像素×20像素,也就是初始状态,把fill、border 和 percent设置为隐藏,如图所示。

    a59bb1199c593d25eb0b10092ed37316.png

    (3)将悬浮框中的所有元件组合起来,命名为 input 并设置为隐藏。注意步骤

    (2)中设置了3个元件为隐藏,此步骤再次设置整个组合为隐藏。

    (4)拖入“按钮”元件至设计区域,尺寸为70像素×30 像素,位置为(220,80),填充颜色为#F 2F2F2,边框颜色为 #CCCCCC,修改其文本为“批量导入”。(5)单击“批量导入”按钮,弹出“导入数据”悬浮框,如图所示。

    ①选中“批量导入”按钮,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 显示 / 隐藏 > 显示】。③在右侧的配置动作区域勾选 input。

    ④动画为“向下滑动”,时间为 500 毫秒。

    ⑤ 更多选项为“ 灯箱效果”,背景色为#CCCCCC,不透明度为60%。

    c46fb6647a4b3ffe75748e9c3d490182.png

    (6)单击“上传数据”按钮,显示进度条,并逐渐填充完整,如图所示。

    ①选中“上传数据”按钮,双击属性面板中的“鼠标单击时”事件,打开用例编辑器。

    ②添加“显示”动作,显示percent、fill 和border。③选择【添加动作 > 设置尺寸】。

    ④在右侧的配置动作区域勾选 fill。

    ⑤设置宽为400像素,高为20像素。

    ⑥选择锚点为“左侧”,动画为“线性”,时间为2000毫秒。

    c7785cca61f689980fd4106f11f517f4.png

    (7)进度条逐渐填充完整的同时,百分比动态变化,如图所示。

    ①选中 percent,单击属性面板中的“更多事件 > 显示时”事件,打开用例编辑器。

    ②选择【添加动作 > 元件 > 设置文本】。

    ③在右侧的配置动作区域勾选“当前元件”。

    ④设置文本为“值”,单击fx按钮,打开“编辑文本”对话框。

    ⑤添加局部变量为 tc、元件和 fill。

    ⑥输入 [[Math.floor(tc.width/400*100)]]%。

    ⑦添加“等待”动作,等待 0 毫秒。

    ⑧添加“隐藏”动作,隐藏当前元件。

    ⑨添加“显示”动作,显示当前元件。

    dc1ea76c0be8df616b337094f6f83c93.png

    (8)为了让页面看起来更加美观、完整,可以自行使用中继器制作数据列表,详细步骤不再赘述。

    (9)设置完成后,按F5键在浏览器中预览效果,如图所示。

    21d2d9df9cc4c30acb737679dc999d03.png
    展开全文
  • 设计师小伙伴们肯定都知道,在网站或者应用开发的前期,是需要设计原型图然后给开发和客户展示的。 原型图的目的: 第一是给自己看,方便规划整个设计并持续下一步的完成度; 第二是给开发看的,可以更好的说服,...

    (阅读时间:5分钟)

    我们应该理清到底什么工具配合制作什么样的原型给谁看?

     

    设计师小伙伴们肯定都知道,在网站或者应用开发的前期,是需要设计原型图然后给开发和客户展示的。

    原型图的目的:

    第一是给自己看,方便规划整个设计并持续下一步的完成度;

    第二是给开发看的,可以更好的说服,并且更佳的完善软件;

    第三个目的是给客户看的,更高质量的原型图可以推动合作并让客户更满意。

    但是在实际操作中,很多UI初学者对原型度的界限不是非常清晰,拿着给客户看的原型图去给开发,有的被拒绝,有的事效率低下,严重的沟通问题产生。有的拿着给开发看的原型去给客户看,导致客户不清楚并不满意,谈判过程较艰难。更甚者拿着自己看的原型图去给开发/客户看的话,后果不堪设想。

    所以接下来我们就来理清到底什么工具配合制作什么样的原型给谁看。

     

    1.给自己看的原型图

    重点:草图

    工具:UX流程图卡、白板、纸笔、Balsamiq、Xmind

    给自己看的原型图可以略简单一些,可以不需要太多花里胡哨的东西,但是UX流程图卡兼备了花里胡哨和实用,强大的网站结构规划工具,专业的网站建设者,涵盖54种常用UX模板,让设计师能够快速搭建专业的用户体验流程图,节省大量时间且架构清晰。帮助设计师和产品经理把握产品全貌,思考用户体验,聚焦重要环节。

    UX流程图卡

    官网:https://www.uxdock.com/

    这款卡牌可以配合白纸板和笔的直接交互,这样可以省下用笔画出又线又框的时间,UX流程图卡任你搭出无数想法

    原型讲解,需求可视化

    流程卡是非常有效的将需求转化为具体设计稿的思考工具。

    方案探讨,随时修改纠错

    修改、移动、自定义都很容易,大大节省创建修改的时间成本。

    头脑风暴,快速搭建思维模型

    操作简单,帮助设计师和产品经理快速记录思路。

     

    Balsamiq Mockups   

    网址:https://www.macbl.com/app/graphics-design/balsamiq-mockups

    可以更有效的整理线框图,这款工具虽然没有交互设置,但是素描风格也是很不错的灵感来源了,虽然组件不是非常多,但也是够满足原型图的要求了。

     

    Xmind

    官网:https://www.xmind.cn/xmind8-pro/

    这是一款帮助你整理属于你自己的思维导图,更佳的完善所有流程步骤,简单易用、美观、功能强大,拥有高效的可视化思维模式,具备可扩展、跨平台、稳定性和性能,真正帮助用户提高生产率,促进有效沟通及协作。

     

     

    2、给开发人员看的原型图

    重点:交互

    工具:UX流程图卡、Axure RP、Mockplus

    每个人看每件事物都是不一样的,所以为了更好的和开发人员达成一致,我们该尽心尽力的去使用工具制作更直观的原型图,来减少误解,提高效率加快节奏。

    这里UX流程图卡又派上用场了,它并不仅是为了给设计师自己看,还可以拿出卡牌和开发人员一起探讨跳转的交互,随时修改纠错。

    再来进阶版的是AxureRP和Mockplus这两款工具,敏捷开发的团队中,时间是宝贵的,我们想要的还是创造出更快、更好的效果来表达出最接近客户想法的设计,然后更好的与开发沟通探讨。

    AxureRP

    网址:https://www.macbl.com/app/business/axure-rp-pro

    是一款专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。

     

    Mockplus

    官网:https://www.mockplus.cn/product/mockplus

    是一款简洁、快速、免费的原型图工具,适合软件团队、个人在软件开发的设计阶段使用。该工具具有低保真、无需学习、快速上手等功能特点,可以帮助用户轻松的做出专业化的原型设计。

     

    3、给客户看的原型图

    重点:精致度

    工具:Origami Studio、Framer

    对于不是非常了解软件设计的客户,他们需要的是一个99.99%接近应用的原型。

    这个时候就请使用Origami Studio、Framer这两款工具,为什么这种不仅可以保证精致度,还可以保证高保真的工具我到这个时候才拿出来?原因很简单,这两款的工具步骤相对复杂,后者基本依靠代码。这两款工具无论是画面效果还是交互动效都可以与真正的App相媲美,做到以假乱真的效果。不过由于要求高,时间成本高,不建议日常使用,可以留到最后以应防不测。

    Origami Studio

    网址:https://www.macbl.com/app/graphics-design/origami-studio

    这款由 Facebook 推出,在 iOS 与 Android 设计风格基础之上采用 Facebook 设计语言的原型开发工具,这款工具提供了必要的设计要素、动画效果以及各种库,可以让产品设计师更快更方便地进行原型开发。

     

    Framer

    网址:https://www.macbl.com/app/graphics-design/framer

    它是一款屏幕设计和交互式原型制作的最佳工具。让你从简单的代码开始你的设计生活。

     

    以上就是对三种情况下的基础说明了。还有很多比较优秀的工具这里没有提到,希望大家还是能够根据自己的实际情况,合理选择工具,更好的沟通,更敏捷的开发做更好的设计。

     

    展开全文
  • “把设计当模仿”是指当我们开始在用性工具上画原型时,脑子里除了模仿竞品之外没有一点自己的思考。这种行为实际上把自己困入了一个负面思维定式的死循环。可能你身边有通过模仿而成功的设计师朋友,但其实在模仿中...

    在我介绍我的交互设计思考流程之前,我希望先说两个交互设计中设计师新手们常犯的错误,设计走进死胡同往往正是因为:


    1.把设计当模仿。


    我不是说参考优秀竞品不对。“把设计当模仿”是指当我们开始在用性工具上画原型时,脑子里除了模仿竞品之外没有一点自己的思考。这种行为实际上把自己困入了一个负面思维定式的死循环。可能你身边有通过模仿而成功的设计师朋友,但其实在模仿中丢失自我设计思维的可能性比你靠模仿得来成功的可能性要大得多。


    2.不思而后行。


    想起我刚毕业当上交互设计师的那会儿,既青涩又充满创造力。每当我回忆起这些,都会察觉到一丝不对劲 一 我在流程图上浪费的时间太多了。“不思而后行”是人类的天然缺陷,一旦脑海中形成了大概想法,我们就会按耐不住付诸行动的激动。然而,交互设计师并不是流程图机器。我十分愿意承认以前急功近利的那些流程图最后都被扔进了垃圾桶。



    现在让我们回归正题,一个专业的交互设计师在开始画原型图之前应该考虑哪些东西呢?


    1.如果你错过了前期的产品需求讨论,请一定要把产品需求弄清楚。


    拿我自己经历过的项目举个例子。PRD文档清楚地描述了当前项目需要增加新闻模块。有意思的是,如果只是按照上面说的做,这个模块我一小时就可以搞定,然而习惯让我隐隐地觉得不对。于是我缠住那时的产品经整整3个小时,最终挖掘出了更多的潜在因素。结果是,小小的改动使得用户停留的时间更长,而 这小小的“停留”为公司创造的价值一定程度上救活了公司的另一条产品线。


    2.即便你已经拿到了功能点介绍,请务必再梳理一遍信息结构。


    专业的交互设计师从不小看信息结构。实际上,信息结构对于搭建产品架构具有举足轻重的意义。在在这一过程中,你不仅会对不同模块间的逻辑关系有更深的理解,更能发现它们之间潜在的联系。我们在当今的APP中经常可以见到四个毫无联系的模块生硬地捆绑在一个APP中,这种生硬感就是缺乏产品结构思考的体现。



    3.合理控制原型设计的节奏而不要反受其制。



    有些设计师热衷于在设计初期就一口气完成主界面中的各种细枝末节的设计(比如画出那些根本不会有改动的东西)。而如果提案最后夭折,设计师只有傻眼的份。近年来,我们应该适应设计圈新的节奏,只需分段式地对新功能和界面改进处进行原型设计,按部就班地完成整件事情。原型设计的初衷不正是这样吗?原型设计只是一个利用简单的组件表达Idea的方式罢了,不要为了使用工具而使用工具。

    展开全文
  • 当你看到这篇文章的时候,或许应该打开脑洞回忆下在原型设计的时候你是否也都考虑到了,考虑到了初始、常态、边界、错误的四种情况,当时的你是怎么想的,设计出来的原型在评审的时候是否漏洞百出?如果有那么正好,...
  • ”今天以“原型设计”为基点,与大家展开几点简要的分析。一、什么是原型设计? 首先,让我们看看在体验设计的过程中的“原型设计”。 以下结合个人对UCD理解和项目经验,梳理和简化的传统体验设计的流程。(流程...

    在风起云涌的互联网浪潮中,产品迭代的速度越来越快。随着用户需求的激增,也不断带来了对设计师能力要求的提高。初入交互 设计领域几年来,明显发现可视化的内容远比文档的更易于被用户(以至我们的客户)所接受,就像用户研究项目中常说的一句话:“用户怎么说的,并不代表他们 怎么想。”今天以“原型设计”为基点,与大家展开几点做简要的分析。

    一、什么是原型设计?

    首先,让我们看看在体验设计的过程中的“原型设计”。

    以下结合个人对UCD理解和项目经验,梳理和简化的传统体验设计的流程。(流程是每个群体的工作方式,好像我们的长相,很难完全一样,并且时常改变,不能盖棺定论。)




    简而言之,传统的原型设计往往是定位于概念设计或整个设计流程初期的一个过程。随着项目大小、时间周期等,UED人员往往会根据需求确定纸原型、低保真原型、高保真原型等不同质量的内容作为输出。具体来讲可以将原型划分为3类:



    ● 纸原型:顾名思义,就是画在文档纸、白板上的设计原型、示意图。便于修改和绘制,不便于保存和展示。因此想有效的利用纸原型,我们就需要注意纸原型的承载。

    ● 低保真原型:通常是基于现有的界面或系统,通过电脑进行一定的加工后的设计稿,示意更加明确,能够包含设计的交互和反馈,美观、效果等欠佳。可以理解为介于纸面原型和高保真原型之间的输出的统称,往往也可以作为需求设计稿输出。

    ● 高保真原型:属于原型设计的终极武器。包括产品演示Demo或概念设计展示。视觉上与实际产品等效,体验上也与真实产品接近。而为了达到完整的效果,很大程度上就要求交互设计师对视觉审美的能力。只有从视觉、体验两方面同时打动客户,在能最终赢得客户的信赖。

    在我们不断按图索骥的去设计原型时,会不会发现有时原型并没有起到它的作用呢?又或者会不会发现抽不出时间做原型?做出的原型只用于展示特性和效果,没能物尽其用?下面,让我们进一步看看,如何将原型设计结合在体验设计过程中。

    二、Why & How?

    我们热爱动手、创新,也喜欢评论、思考。而在实践中往往是如下情况:




    回头看看,我们多数时候输出的低保真设计稿,传递的信息是完全可以通过上图的纸面原型去表达的,而纸面原型所花费的时间和成本可能只有一半或更少。放眼整 个产品设计过程,一个导航、对话框、窗口,也依然可行。试着在“需求讨论”的时候,去用手讨论,动上几笔可能就能帮我们在很短的时间内梳理清楚交互设计所 需的“流程、布局、控件”等等。而且在画图过程中,还能以较低的门槛(可能需要另一只笔)就能让所有人参与其中,创造很多附加信息和价值。而或许更好的 是,通过绘制白板的过程,你可以更清晰的传递出窗口的布局和逻辑;而通过在真实介质是低成本的交流,将会更容易打动你的产品经理和客户。在创建纸原型时, 仅需要注意几点:

    ● 试着同时准备2支笔,让更多人参与设计

    ● 试着准备一支红笔,在讨论结束时,把所有内容进行梳理和总结

    ● 记得给白板拍照,或在输出之前保留好绘图纸

    如果你有丰富大胆的想象力和一定的手绘基础,甚至可以将整个设计过程通过手绘的形式记录和展示,现在类似的产品宣传也随处可见,比如著名的宝马轿车。再顺便推荐一本关于视觉化思考的书《The Back Of The Napkin》与各位共勉。

    上面我们只看到了天平的一端,我称之为“敏捷化原型”,就是鼓励大家在最初的设计时,动嘴的同时勤动手。大胆的把笔交给产品经理和团队的其他人,来帮助设 计师完善和丰富你的稿件,这样才能激发和节省更多的时间去产生Idea。 更进一步说,甚至在专业能力和环境允许的情况下,完全可以采用在需求开始时由设计师与团队一起进行纸面原型的绘制,之后由产品经理给出相关的设计稿或低保 真原型。

    在天平的另一端,是应当走向“精细化原型”时代。尽可能的将设计创意完善并融入到真实的场景中,不论是软件界面还是Web体验,都可以真实点击和拖拽。通 过高保真原型的输出,用户更容易被整个产品而不是某个图案或体验特性所吸引。这不仅有助于单一方案的认可机会,还可以从侧面树立起设计师的专业形象,提升 客户的认可,甚至可以大胆的提出流程的假设:“以原型为中心的设计 ”。




    三、动手做原型设计

    以下推荐并简单分析几个原型设计的途径。

    前面说的纸面原型,最基础的就是需要纸和笔,我们可以简单快捷的描绘出一个窗口面板,从中点击弹出一个对话框,进行设置并保存,在旁边补充出对应的出错和分之流程。另外,为了解决不易保存的缺陷,除了自己亲自动笔,再推荐几款软件作为纸原型的输出。

    1. Balsamiq Mockups 演示地址

    这是一款帮助你最快速、直观的绘制用户界面原型的软件。其中包括了75个现成的控件,并且可以轻松的以颇具亲和力的手绘风格完成界面框架的设计。上手非常 容易,可以进行反复编辑并支持调整图层和控件状态,是不可多得的纸面原型绘制软件。不过真的只能取代纸面原型,不易表现交互过程和效果,对中文的支持也比 较差。

    2. Microsoft Expression Blend + SketchFlow




    Microsoft Expression Blend 包含一组新功能,它们专门设计为让用户更轻松快速地创建、传达和审阅交互式应用程序及交互式内容的原型。这组功能称为 SketchFlow。它是实际的 Windows Presentation Foundation (WPF) 或 Microsoft Silverlight 应用程序。您可以生成原型项目,运行它,然后在原型中进行浏览(即使您只有原型的初始草图)。

    SketchFlow和Balsamiq Mockups相比,不仅可以绘制出具有亲和力的手绘原型,更可以实现交互所需的响应和效果,使得低保真原型赋予了高保真的内涵,算是给人意外的惊喜。不 过由于短期内MS Silverlight技术的普及率较低,可能大家上手成本较高,可以作为长期关注和研究的方法。

    同时,为了便于在低保真模型上梳理产品逻辑和流程,Visio和Mind Manger也是不错的选择。对于原型设计(主要适用于低保真原型 ),大家都很熟悉的Axure ,最新官方版本5.6,访问官网>>

    能够很快实现页面的跳转和变化,完成流程性的演示。并推荐大家与产品经理一起来使用。然而,身为设计师,怎能满足于只输出低保真原型作为讨论素材呢?

    当大家深谙如何基于纸面原型的讨论,又可以放心大胆的将手中的枪交给热心的产品经理去进行低保真原型的设计,在这种如此理想的情况下,我们不得不花费心思 在如何实现我们的“大绝”—高保真原型上。谈到高保真原型,其实还是非常需要实力和锻炼的。此时,不得不祭出设计师的最爱,Adobe 公司的Flash Platform:Flash CS4,Flex/Flash Builder,Flash Player和Adobe AIR。



    关于Flash的学习,结合Action Script 3.0、XML和Adobe的AIR技术,可以很完整、逼真的实现我们想要的任何界面效果,学习过程不再赘述。从Adobe的产品线发展不难看出,最终原 型制作的最高境界就是可以和实际产品相结合,让设计师的输出和开发人员能够直接结合,使原型得以100%保真。对于客户端的原型,大可通过VC去动手写写 程序代码,或者在Win7下用Blend接口,便能大大降低“这个效果做不了”的尴尬。

    3.UIDesigner

    说到高保真原型,不能不提的是CDC出品的原型制作秘密武器UIDesigner,这本是CDC专用武器,现在已经分享给大家了。UIDesigner能 让你轻松实现丰富的各种交互效果,基本可以控制到Windows标准空间所包含的所有属性,但这一切不需要你有任何编程能力基础。感兴趣的朋友可以到
    http://cdc.tencent.com/?p=424 了解一下。



    而对于网页产品,只要设计师能主动提高动手能力,通过使用HTML甚至Ajax、jquery等也能很快实现网页产品的高保真模型 ,也需要随着互联网技术的发展不断学习,与时俱进。

    总而言之,平时多动手,战时少流汗(客户不满意、老板不满意,换谁都要浑身冒冷汗……)。在设计过程中,还可以通过设计公用组件不断提高效率,不断发掘新的、好的原型设计方法。将整个设计过程与原型设计相结合,总结起来有以下几点好处:

    ● 最真实进行设计传达,并影响整个团队(开发、产品经理、用户)

    ● 树立设计师的专业影响力(用实力说话,用产品说服别人)

    ● 技不压身,扩宽专业知识领域有助于向更高层次的发展:-)

    与大家共勉,希望对各位平时的工作有所帮助,Thx。

     

    =========================================

    关于产品原型设计的一些想法

     

    对于产品设计 阶段的原型设计 这个事情,我本人是非常看重的,而且原型做的越逼真越好(如果时间充裕的话)。对于到底是否要做的逼真一点(因为这样花的时间更多),这也是一个比较有争议的话题,可能每个人的观点都会不一样。比如有些朋友认为,不必花太多的心思在原型设计 上,在纸上随便画画,然后交给美工人员设计美化,更甚者直接口述。

    当然,纸笔是最直接的原型设计工具,对于一些比较简单的产品设计,也是可以直接这样做的。我自己在真正设计之前,首先会在草稿纸上用笔画画,然后再用绘图工具设计原型。之所以要做的逼真 一点,目的在于便于沟通,因为你需要把你的想法告诉产品相关人员,如果采用口述或草图的形式,恐怕会出现沟通障碍。再者如果需要存档的话,口述或草图恐怕就不太合适了。

    原型设计工具很多,主要看自己适合用什么样的工具。我自己用过一些,比如 Visio、MS Publisher、Axure Pro 等,如果是简单且没有交互的东西,可以直接用Visio画画。如果是基于Web的产品,建议用 Microsoft Publisher 或 Axure Pro。对与交互 比较复杂的产品,建议用 Axure Pro,用这个工具可以让你的原型设计的非常逼真,在开评审会的时候,可有利于沟通 ;在美工参与阶段,可让美工把握每个设计上的细节,可进一步避免返工

    如果你有一些开发基础,你甚至可以用某些开发环境做原型,比如 Dreamweaver、Visual Studio系列等。这样做出的原型,几乎可以作为一个半成品拿出来演示,当然这样做花的时间就更多了。不过在某些项目中,这样做还是值得的,比如你要去 竞标某个项目,给客户演示等。

    展开全文
  • 原型设计

    2021-03-02 20:38:35
    ”今天以“原型设计”为基点,与大家展开几点简要的分析。一、什么是原型设计?首先,让我们看看在体验设计的过程中的“原型设计”。以下结合个人对UCD理解和项目经验,梳理和简化的传统体验设计的流程。(流程是...
  • Sketch49 交互原型新功能,对于 UI 设计师们来说是不是新福利呢?我们一起看看!看到2月28日 Sketch49 新版本发布的消息,打开了官网看到了最新的版本更新视频,确实还是挺激动的。UIBANG 来和大家一起看看 Sketch49...
  • balsamiq mockups 原型设计工具

    千次阅读 2015-03-19 17:29:32
    推荐一个简单易用的原型设计工具: balsamiq mockups 下载地址:https://balsamiq.com/download/ 只要开发的,一眼就能知道怎么用,设计出效果十分可爱。 设计效果: 注册码: License Name:...
  • 今天要用Axure做原型设计,完全是个新手,后面会陆续...如果你觉得听上去这些概念都比较悬的话,我就用大白话来说:原型设计,就是完全不管产品长得好不好看,只把它要做的事情和怎么做这些事情想清楚,把它怎么和用...
  • 抽屉列表实在是太常见了,一般后台设计的产品经理特别熟悉,因为基本大多数后台的菜单都是以抽屉列表的形式存在着,因为抽屉列表可伸缩,能够存放很多菜单项。还有一个是大家特别熟悉的,那就是QQ的好友列表。既然...
  • 原型图的设计

    千次阅读 2016-10-20 12:50:24
    3.手画原型,这样最能呈现我想要的原型,如果用手画怎么完成交互,现在有个 4.app叫快现, POP(Prototyping on Paper)你可以把你画的东西拍下来,然后在快现里面完成一些简单的交互设计,还是能满
  • 1.dribbble上的原型图看不出逻辑dribbble上面大多都是视觉设计师,他们有些原型作品并不是用来体现交互逻辑的,是完全按照视觉表现出来的原型图(怎么怎么画,怎么有逼格怎么画)纯展示性质,实用性并不高,当然...
  • 来,我们先瞅瞅 1,交互原型会用到哪些工具?1,菜单栏 - 原型-菜单下的所有功能2,菜单栏 - 视图 - 显示原型3,工具栏 - 链接、热区、预览、cloud (这4个工具) 2,工具栏里没这4个工具?来,我们把它找出来: ...
  • 原型设计

    千次阅读 2012-04-03 16:18:40
    本文转载自腾讯CDC ... 在风起云涌的互联网浪潮中,产品迭代的速度越来越快。随着用户需求的激增,也不断带来了对设计师...”今天以“原型设计”为基点,与大家展开几点简要的分析。 一、什么是原型设计
  • 这一次分享一波健身社交原型设计、生鲜电商原型、以及地图组件,用起来~ 健身社交原型 健身行业随着「全民健身」、「全民运动」这样的口号,迅速崛起。健身早已成为了一种新的生活方式,马甲线、八块腹肌成为了新的...
  • 原型设计 产品经理 墨刀

    千次阅读 2017-03-22 13:36:45
    新手必读 ... 墨刀操作手册(可工具书查阅):https://annhanhan.gitbooks.io/mockingbot/content/ (设计师必读)sketch插件使用方法:...xxx效果怎么制作? 定时轮播:https://modao.c
  • 需求分析&原型设计

    2017-11-05 21:56:00
    从而让我们的项目经理(PM)清楚这是什么,如何任务安排,让开发人员有能具体清楚该怎么去开发博客园美化器。 1.2 范围 本文档介绍的产品是博客园美化器,该应用面对的是使用博客园的用户,该应用可以让普通用户...
  • 原型设计大全

    千次阅读 2017-12-13 10:47:53
    新手必读 ... 墨刀操作手册(可工具书查阅):https://annhanhan.gitbooks.io/mockingbot/content/ (设计师必读)sketch插件使用方法:...xxx效果怎么制作? 定时轮播:https://modao.c
  • 修改记录这是某项目1.06版原型,因此针对上一个版本原型修改了哪些内容,我在第一页了说明总览我用来说明产品页面结构和主要功能流程首先是结构:然后是流程全局说明关于全局设计、交互的统一说明 界面原型这是...
  • 无意中在GR里看到一大牛分享一篇文章,是介绍手绘界面原型设计工具,名字叫 Balsamiq Mockups,正好我最近一直都想设计一个android应用程序的界面原型,于是就产生了试用下这款软件的想法。说,以下是使用过程...
  • 干劲足是一方面,更多的是思考太少,很多都是拍脑袋想出来的(不可否认我之前原型也是有这个缺点)。 其实更多的应该去想想为什么要这样?价值有多大?实现难度有多大?(如大致怎么去实现)(为技术小伙伴想...
  • 在风起云涌的互联网浪潮中,产品迭代的速度越来越快。随着用户需求的激增,也不断...”今天以“原型设计”为基点,与大家展开几点简要的分析。 一、什么是原型设计?  首先,让我们看看在体验设计的过程中
  • 《Axure RP 6原型设计精髓》绝不仅仅是Axure软件的功能介绍,而是从项目完整生命周期的角度,系统阐述如何使用Axure来帮助项目成功。 《Axure RP 6原型设计精髓》的随书示例文件,请前往@七印部落的微博下载。 ...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 330
精华内容 132
关键字:

原型设计怎么做