建材秒知道
登录
建材号 > 设计 > 正文

(六)设计思维之原型设计

故意的乐曲
朴素的皮带
2023-02-26 16:59:23

软件开发——原型设计和demo有什么区别

最佳答案
疯狂的睫毛
复杂的鞋垫
2026-05-05 13:20:46

首先,简单介绍

简单讲, 原型仅仅只是一个网页或App的模型,常规将分为纸质的和电子的两种类型。方便设计师或设计团队之间,相互沟通,协作和迭代产品设计构思。后期,细节和交互丰富的高保真原型,还能帮助设计师们直接测试产品可能存在的问题。 总体上,只是产品概念性模型,并不是最终产品。

而demo则是产品的真实状态,能够供客户或设计师直接使用或测试的版本。当然,它可能并不是产品的最终状态。就类似音乐demo,可供快速查看和了解产品未来的最终状态。

其次,负责人员

原型一般由设计师或产品经理完成,方便在设计和迭代阶段,能够更加便利的沟通、改进和迭代设计构思。

而demo,则一般由开发人员根据设计稿或原型开发完成。

最后,使用工具

原型, 现今一般通过原型设计工具完成,例如国内热门的摹客原型设计,提供非常全面原型设计功能,设计、协作、沟通、迭代以及分享都能分分钟完成。它的在线版本,也是新增很多全新供能够,例如更多拿来就能用的复合组件,更多状态和命令交互选择,更多图标,以更多团队协作和管理功能等等。

demo则需要产品编程工具,从头编写。

最新回答
含蓄的耳机
追寻的太阳
2026-05-05 13:20:46

1、画原型前先考虑好业务逻辑和交互逻辑。梳理好逻辑关系,在开始原型设计时才不会出现前后矛盾的状况。

2、原型图要规范,简单整洁,主要可以概括为:页面框架要清楚;页面不影响设计;页面元素要统一;页面排版要整齐。

3、原型设计不宜占用过多时间。原型图的意义是为团队成员呈现产品的主要功能和逻辑关系,因此不能为了好看而主次颠倒。对于产品经理来说,在原型设计阶段,只需要使用摹客Mockplus之类的专业工具,就能快速完成原型设计,更多的时间则留给用户需求和产品功能的整理,这样才不会犯本末倒置的错误。

傻傻的白猫
神勇的墨镜
2026-05-05 13:20:46

原型设计工具,说白了就是能够帮助设计师制作静态或动态网页/App设计模型的工具。

在界面设计初级或中期,为了能够方便和其他设计师讨论、测试产品相关的设计想法,需要利用各种原型工具将产品模型做出来,一个个界面修改和迭代,必要的时候,还可以制作成动态的模型,直接测试,看看可能会有哪些问题或不足等。

而且,现在市场上其实有很多好用的原型工具。就像我们团队用的就是一款叫摹客Mockplus的原型工具。制作原型的时候,不仅提供大量优质模板,还可以直接拖拽各类组件或图标,按需从头快速绘制原型。 交互和动画也可以拖拽添加。 总的来说,使用起来相当简单。

懵懂的机器猫
眼睛大的发夹
2026-05-05 13:20:46

现在原型设计工具有很多,那我今天就罗列一些UI设计师和产品经理经常用到的工具,以此提高工作效率,又好又快的完成工作。

第一款:Axure

Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理

第二款: Adobe XD

Adobe XD是一站式UX/UI设计平台,在这款产品上面用户可以进行移动应用和网页设计与原型制作。同时它也是唯一一款结合设计与建立原型功能,并同时提供工业级性能的跨平台设计产品。使用Adobe XD可以更高效准确的完成静态编译或者框架图到交互原型的转变。Adobe XD 面向网站设计、移动 APP 设计等设计工作。

第三款:Mockplus(摹客)

Mockplus,一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。从设计上,采取了隐藏、堆叠、组合等方式,把原本复杂的功能,精心安排。上手很容易,但随着你的使用,功能层层递进,你会发现更多适合自己的有用的功能。新手不会迷惑,熟手可以够用。值得一提的是这是一款国产工具,我认为是国内目前最好的工具。因为目前Mockplus的在线原型设计协作平台已然走在国内甚至国际(很多老外也购买摹客英文版)的前列,不论是原型设计、流程协作还是设计规范,都能够在摹客完成,非常方便。并且支持Figma、Sketch、PS、Axure、XD几乎所有主流工具的插件,界面和语言对国内设计师也非常友好。有兴趣可以去摹客官网注册试试。网页链接

- 可分工协作,多人编辑同一个项目;

- 通过评论和标注原型,完成对项目的审阅;

- 提升开发团队的生产力;

- 大大降低沟通交流成本。

第四款: Justinmind

JustinMind是由西班牙JustinMind公司出品的原型制作工具,可以输出Html页面。与目前主流的交互设计工具axure,Balsamiq Mockups等相比,Justinmind Prototyper更为专属于设计移动终端上app应用。justinmind的可视化工作环境可以让你轻松快捷的以鼠标的方式创建带有注释的高保真原型。不用进行编程,就可以在原型上定义简单连接和高级交互。

第五款:Balsamiq Mockups

Balsamiq Mockups是一款共享软件,每个lisence授权是79美刀,对个人用户来说,价格不菲。它推出之后如此受欢迎的原因是在软件产品原型图设计领域,特别是web原型图设计领域,还没有哪款产品有如此丰富的表现形式。使用Balsamiq Mockups画出的原型图都是手绘风格的图像,看上去非常美观、清爽(当然,跟使用者的设计水平也有关系)。它支持几乎所有的HTML控件原型图,比如按钮(基本按钮、单选按钮等)、文本框、下拉菜单、树形菜单、进度条、多选项卡、日历控件、颜色控件、表格、Windows窗体等。除此以外,它还支持目前如火如荼的iPhone手机元素原型图,这为开发iPhone应用程序的软件工程师提供了非常好的设计图。

第六款: Proto.io

Proto.io是一个专门用于移动应用的产品原型工具——可以构建和部署全交互式的移动应用的原型,并且可以模拟出相似的成品。基于Web的在线环境,它可以让你制作流行的 iPhone,iPad,Android 手机以及任何带有屏幕界面的产品原型。

狂野的雪碧
感动的哑铃
2026-05-05 13:20:46
                 手绘-----------低保真-------------高保真---------UI设计------>上线

做什么   确定干不干   确定元素                   交互设计-------视觉设计

做不做     自己思考     其他产品运营......    UE/UX               UI

            产品需求没想明白之前、产品流程没理清楚之前、没有手绘之前,不要碰axure

            在你没把草图和Boss过了基本确定之前。不要碰axure

            1.明确本次需求的用户与场景;2.认真研究需求的业务流程图;3.完成页面流程与目录

            4.确定页面框架;5.确定交互细节、串联;6.讨论迭代细节修正;7.定义细节上的规则

备注:画原型改原型的时间尽量控制在20%以内,原型修改通常是因为需求没封闭

        1.先手绘,在上软件

        2.真实比例,真实文案

                真实比例、真实字号会让元素更真实

                真是文案可以避免在需求评审的时候被质疑

                真实模拟可能出现的极端情况,并示例清楚

      3.不要上颜色

            原型就用灰白即可,不用上颜色;做的太漂亮,坑UI/UE; 太漂亮的调整会舍不得删除;

        备注:如果在上颜色的情况下一定要沟通,界面的颜色最好定义好前期,后面改动费时间,界面不统一的话(个人体会)

    4.目录树足够清晰 阅读流畅

    5.修改记录,关键修改重新保存文件  留历史版本及时长传服务器或者云盘避免丢失,有日期,不要覆盖保存

    6.紧扣需求主题  不横生枝节

        如果原型需要增加新功能,先考虑后端数据来源

        不要为了“长得好看”而增加新模块

      7.设计大牛如何称为

            努力画、认真画、重复、方法、多看设计的书达到思想上的交流