原型设计是什么,该怎么使用它
我们首先明确两个定义:
原型的定义:
用线条、图形描绘出的产品框架,也称线框图。
交互设计的结果输出,可能是一张纸上的几张图;原型代表着交互设计的结果,当最终实现的时候,交互流程会和原型保持一致;可以理解为草稿或者叫做参照物
原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言,原型是一种沟通工具。
原型设计的定义:
线框图描绘的是页面功能结构,它不是设计稿,也不代表最终布局,线框图所展示的布局,最主要的作用是描述功能与内容的逻辑关系。
原型图是最终系统的代表模型或者模拟,比线框图更加真实、细致。
其次,了解原型设计的作用,主要有两点:
沟通: 因为是原型是需求和功能的具象化表达,所以原型可以辅助产品经理与领导、交互、UI和技术的沟通产品思路。虽然需求文档也是可以满足沟通需求的,通过用例将交互写到设计描述文档中,但是原型可以更详细地解释交互。
测试:因为原型相较于UI稿来说修改更方便,所以原型能提高产品经理的功能设计没通过评审时返工的工作效率。没有哪一家互联网公司可以不经过测试,就直接上产品和服务。原型在识别问题、减少风险、节省成本等方面有着不可替代的价值。
(原型设计在产品设计中所处的位置)
设计流程:首先明确产出原型目的以及用户群体,这个原型有多大效率帮助我传达设计或测试设计? 有多少时间做原型?其次需要什么级别的保真程度?
该如何使用原型设计,那么原型设计工具就是必不可缺的。
又选择什么工具来制作原型?主要考虑以下几个因素(排名分先后):
1. 熟悉程度和获得工具的便利度;
2. 所需的时间和精力;
3. 可复用的代码/框架;
4. 为测试创建可用的原型;
5. 价格和学习曲线。
目前比较好用的在线原型设计工具有Marvel,Invision,墨刀等等。
希望对你帮助~
有任何疑问可以追问,满意请采纳,谢谢~
原型设计:设计团队基于前三个步骤找出解决方案的过程
好处:有效防止设计师忽略重要元素、避免不准确不合理的假设
应该具备的属性:
1. 成本低 ,模型关注的是产品的某些功能,建议使用随手可得的材料
2. 便于沟通,原型应该易于理解,促进开发人员与需求方的沟通
快速搭建原型能推进方案的优化,从而实现高效的沟通。设计师在思维发散阶段得出最优的解决方案之后,需要在原型设计阶段把它初步呈现。原型设计阶段不是一步达成的,它与需求理解,问题定义,思维发散三个步骤共同构成了思维设计6大步骤中的一个内部小循环,内部反馈跟设计优化是推动小循环的动力。只有原型达到预期设计的目标,才会跳出内部的小循环。
原型设计——用手来思考
第一步:实用工具制作模型
- 不需要原型多精致,只要能表达想法即可
第二步:讨论模型并发现问题
- 原型开发完成之后,让小部分用户和内部人员进行测试,在不同的使用情景分别评估想法的可行性,并及时记录。
第三步:迭代优化
- 基于原型讨论的结果,保留好的设计方案,摒弃差的设计方案,然后根据新的问题重新设计方案,并制作原型进行测试。
例子:IDEO设计公司使用原型设计帮助喜达屋酒店拓展业务
目标:面向年轻时尚城市客户群体的雅乐轩
困难:不知如何验证方案的效果,不kennel为了验证雅乐轩的用户反馈,花巨资装修房屋
解决方案:在网络平台上搭建了雅乐轩的三维模型,用户可以直观看到酒店的装潢、设计以及整体布局,同时还有提问模块允许用户提出意见,设计团队也可以根据反馈进行模型改进。
亮点:这里网站既是接触用户的载体,也是收集反馈的平台
独立页面(功能元素明确有序、位置关系清晰、不同状态变化清晰)
交互设计(清晰的交互逻辑、一致的交互方式、界面统一)
手绘——低保真(产品需求明确、流程清晰、先有确认好的手绘)——高保真——UI设计——上线
明确本次需求的用户与场景
认真研究需求的业务流程图
完成页面流程与目录
确定页面框架
确定交互细节、串联
讨论迭代、细节修正
先手绘
真实比例与文案
模拟极端情况
原型不上色
目标树清晰流畅
保存好修改记录
紧扣需求主题,不节外生枝
努力、认真多画
1.完整新产品、新功能、链条长、交互界面与逻辑复杂
需求分析:明确用户、场景、需求问题,以及产品亮点
产品功能:核心流程、信息架构图、版本过程、流程(用户及内容流向、信息交叉)
架构(模块、功能点)、演变(完整的状态需要几个版本、每个版本包含哪些功能模块)。
项目提速:
1.做什么:
进度:控、跟、保进度
资源:协调资源
风险:延期、变更风险预警
2.明确目标、统一思想
明确目标:完成什么产品功能、上线后对各方的收益情况
明确时间:开始及预期结束时间
明确回报:奖励规则
3.拆分项目并公开:
拆分阶段上看板:TO DO,Doing,QA,上线
拆分功能上看板:本项目有哪些功能点、写卡片
功能点责任到人:正在做的功能点,由谁负责,进行卡片登记
4.进度透明:站立会、看进度(表扬和帮助)
5.总结项目:结束总结、营造氛围、解决问题(什么问题、由谁造成)
1.专业度:少改需求;明确功能重点及需求优先级;清晰文档;评审测试用例;测试过程全程参与
2.职业素养:保持冷静的情绪以及客观的情况汇报。不迟到、陪加班、多鼓励、少抱怨、公开透明,保存各项记录,给团队争取提前量。
2、原型图要规范,简单整洁,主要可以概括为:页面框架要清楚;页面不影响设计;页面元素要统一;页面排版要整齐。
3、原型设计不宜占用过多时间。原型图的意义是为团队成员呈现产品的主要功能和逻辑关系,因此不能为了好看而主次颠倒。对于产品经理来说,在原型设计阶段,只需要使用摹客Mockplus之类的专业工具,就能快速完成原型设计,更多的时间则留给用户需求和产品功能的整理,这样才不会犯本末倒置的错误。
方法一:在母版面板中点击“新增母版”,为新建母版命名,双击母版进入编辑界面。
方法二:在设计区域中首先选中要转换为母版的元件,然后点击右键,选择“转换为母版”,在弹出框的对话框中设置母版名称,命名完成后,还可以设置母版的拖放行为,下文中会介绍拖放行为。
使用母版面板对其进行管理
设计区域添加母版
直接拖拽母版至右侧设计区域可以将母版添加到单个页面中;右键点击母版,选择“新增到页面”,在弹出的“新增母版到页面”对话框中选择想要添加母版的页面,可以实现母版的批量添加;右键点击母版,选择“从页面删除”,可以在页面中批量删除母版。
母版上的遮罩 :通常,添加的母版上会覆盖一层粉红色遮罩,这是为了让我们能够在设计元素中快速区分哪些是母版。如果你不喜欢这种区分方式,可以通过点击菜单中的“视图>遮罩”,取消粉红色的遮罩效果。同样的操作,在这里你也可以取消掉动态面板、中继器、图片热区这些元件容器的遮罩效果,见下图。
按照母版的拖放行为,可以将母版分为以下3类:拖放到指定位置、锁定母版位置、从母版脱离。要改变母版类型,右键点击母版。“选择拖放行为”,在弹出的菜单中进行选择。对模板类型的修改,只会影响到当前要拖放到设计区域的母版。
任何位置:拖拽至设计区域,可以放置在设计区域中的任意位置
锁定母版位置:拖拽至设计区域,固定在设计区域的某一位置,不可以随意移动
从母版脱离:拖拽至设计区域,即表示脱离了母版,在此处进行任何修改,均不会影响原母版内容
触发事件是创建在母版中,只有母版才具有触发事件,允许为母版的每个不同实例添加不同的交互。当你想让母版内元件的操作影响到母版外元件时,也可以使用母版触发事件。触发事件的效果是由母版内元件触发的。
例如,在母版中添加了3个按钮,并分别添加了鼠标单击事件,点击3个按钮时,影响着母版外一个文本的显示内容。这样做的好处是这里的按钮是一个母版,对其操作维护比较方便,可以应用到其它需要有类似效果的页面。虽然达到这种效果的方法有很多,但母版触发事件的强大之处在于可以多次重复使用,达到一劳永逸的目的。关于触发事件的一些重点说明如下:
触发事件只能用于母版内的元件创建
一个母版可以拥有多个触发事件
创建触发事件的步骤:1.在母版的元件上创建触发事件。2.将母版拖拽到页面的设计区域中,选中该母版,在元件交互面板中使用触发事件创建交互来影响当前页面的元素。
双击母版进入编辑状态,选中母版要触发的触发元件,然后在元件交互面板中添加想要触发的触发事件的事件,在弹出的用例编辑器中第二步,添加“触发事件”动作,然后在第四步配置动作中设定“触发事件”的名称,最后勾选事件名称前的复选框,点击确定,完成触发事件的创建。
此外,还可以双击母版,进入编辑状态。然后在菜单栏中的布局>管理母版触发事件,对触发事件进行管理。
创建完触发事件后,将母版拖放到任意设计区域中,选中该母版,在元件交互面板中就可以看到刚刚添加的触发事件。触发事件的操作方法和平时操作其他事件是一样的。
为了帮助大家进一步理解什么是母版的触发事件及其重要性。在这个案例中将演示如何通过母版的触发事件影响着文本显示的内容。
step1:拖动3个按钮至设计区域,并在3个按钮内分别输入文字“发现”、“关注”和“消息”,拖动一个文本标签至设计区域,文本内容默认输入“这里显示按钮的文字”。
step2:选中3个按钮,右键设置为任意位置母版。双击母版,进入编辑状态,为按钮创建单击事件,在事件编辑框中添加最下方的“触发事件”,在配置动作中命名,这里我就偷懒,直接在系统默认名称后加上数字编号“NewEvent1”,选中事件名称前面的复选框,点击确定;同样的操作,为另外两个按钮添加触发事件,事件名称分别为“NewEvent2”和“NewEvent3”。
step3:返回到页面当中,选中母版为刚才添加的触发事件““NewEvent1”添加用例,在用例编辑面板中,添加设置文本动作,在配置动作中选择名为text的文本,设置文本的值为按钮1的文字,点击fx进入编辑文本弹框界面,在设置这个值之前需要将按钮1的文字定义为局部变量LVAR1,所以在配置动作中文本的值为局部变量LVAR1;按照同样的操作,为另外两个触发事件添加用例,需要提醒的是,设置文本时,文本的值分别设置为其按钮上的元件文字。
step4:至此,所有的设置已经完成,按下F5,预览测试下效果。
Axure8.0版本中称之为“触发事件”,也有一些中文版本翻译为“引发事件”,Axure7.0版本称之为“自定义事件”,虽然叫法不一样,但表达的意思是一致的。
原型设计是什么?
以网站注册作为例子,整个前期的交互设计流程图之后,就是原形开发的设计阶段,简单的来说是将页面的模块、原素、人机交互的形式,利用线框描述的方法,将产品脱离皮肤状态下更加具像跟生动的进行表达.原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物,交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导至该产品的可用性。
在原形设计上:Axure软件提供了一套非常完美的原形设计工具。
用户界面设计员负责维护用户界面原型的完整性,并确保按照用例示意板和边界对象的要求,使用原型构建一个可用的用户界面。
原型设计之于应用开发,是为第一要素。它所起到的不仅是沟通的作用,更有体现之效。通过内容和结构展示,以及粗略布局,能够说明用户将如何与产品进行交互,体现开发者及UI设计师的idea,体现用户所期望看到的内容,体现内容相对优先级等等。