• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

原型设计工具调查报告

一、 什么是原型设计

原型是一种让用户提前体验产品、交流设计构想、展示复杂系统的方式。就本质而言,原型是一种沟通工具。[Nauman 1982]认为:“原型是一个系统,它内化了一个更迟系统的本质特征。原型系统通常被构造为不完整的系统,以在将来进行改进、补充或替代。”

线框图描绘的是页面功能结构,它不是设计稿,也不代表最终布局,线框图所展示的布局,最主要的作用是描述功能与内容的逻辑关系。

原型图是最终系统的代表模型或者模拟,比线框图更加真实、细致。

二、 原型设计流程

步骤一:画草图

画草图的目标是提炼想法,并且最好给画草图加上一个时间限制,那就是15分钟。画草图要避免陷入审美细节,尽可能快速的导出想法才是关键。

步骤二:演示及评论

演示和评论的目标是把一些想法拿出来跟大家分享,然后进一步完善想法。在演示过程中,要做好记录,演示和评论的时间可以对半分。

步骤三:做原型

在明确了想法之后,就可以开始进行原型设计了。这个阶段需要考虑很多细节,找出切实可行的方案,运用合适的原型来表达。

步骤四:测试

原型的目标之一是让受众来检验产品是否达到了预期,因此可以请5-6位测试者,通过音视频捕捉等方式,看看产品原型是否被顺畅地使用了。

三、原型设计工具

3.1原型设计工具选择

选择什么工具来制作原型?主要考虑以下几个因素(排名分先后):

熟悉程度和获得工具的便利度;

所需的时间和精力;

可复用的代码/框架;

为测试创建可用的原型;

价格和学习曲线。

3.2原型工具调查结果

1、墨刀

墨刀是一款高效的在线原型设计工具,支持移动端、Web端及网页端的产品原型设计。无需下载,通过浏览器即可操作,同时支持软件下载,随时随地进行设计与模拟。学习难度低,自带的强大素材库和简洁的设计界面,可帮助快速构建产品原型。

价格:个人版免费;企业版可免费使用5天。

功能亮点:

集合4款工具,原型、设计、流程图、思维导图,全面覆盖产设研团队

丰富强大的素材广场,涵盖了最全最新的原型图、流程图、图标、项目等素材

简单高效的自动标注,轻松解决设计与开发的沟通难题

方便快捷的PRD模式,轻松展示产品需求

可同步Sketch、Axure文件,一键即可导入文件进行再编辑创作

支持导出为apk文件,模拟真实使用效果

支持云端保存与实时手机预览

支持多人团队在线协作,实时同步更新

使用场景:线框图、移动端原型、视觉稿、高保真原型、大型复杂项目、Web线框图、网页原型

20502204213814-2111892216.png"/>

 

2、Figma

        Figma是一款在线设计协作平台,支持团队协作并实时同步,能够无缝衔接产品、设计与研发。无需下载,打开浏览器即可使用,同时也提供桌面端。但是缺点是没有中文版,由于服务器在国外所以国内使用起来加载很慢,另外Figma主打设计,原型交互这块比较基础。

价格:个人免费。

功能亮点:

  • 支持多人团队在线协作
  • 矢量工具很好用,如钢笔工具、布尔运算、扇形工具等
  • Auto Layout功能能够帮助设计师提升效率
  • 有很多插件可以使用

使用场景:平面设计、图形设计、视觉稿、网页原型

3、Moqups

       Moqups是一款在线设计平台,基于Web架构,支持在网页端进行原型设计,能够轻松管理设计规范和资源。上手快,可实现团队成员间协作的无缝链接,减少沟通成本。但是这款无法进行平面设计,没有矢量工具。

价格:一个项目免费(限制200个objects和5MB内存)

功能亮点:

  • 支持页面交互、命令交互、状态交互等多种交互触发方式
  • 可直接绘制流程图,直观展现产品逻辑
  • 支持多人团队在线协作

使用场景:高保真原型、线框图、 移动端原型

4、Axure RP

      Axure RP是一款专业的快速原型设计工具,拥有强大的组件库,可快速完成产品或Web线框图、流程图及原型设计,需要下载电脑端软件使用,支持Window、Mac OS系统。但过于专业庞大的软件功能架构,对新手要求较高,需要花费较多时间在学习上。

价格:免费试用30天。

功能亮点:

  • 支持动态面板和复用模板
  • 支持HTML原型预览
  • 支持生成规格说明文档
  • 拥有无限画布的设计区域,便于添加文字解析
  • 支持多人团队协作

使用场景:高保真原型、Web线框图、视觉稿、网页原型、大型复杂项目

 m5isvb20p514224.png

 

5、Proto.io

       Proto.io是一个基于浏览器的原型设计工具,无需安装即可使用。有丰富的原型组件,能够实现多种交互效果,预览、分享、评论这些基础功能也都有。

价格:15天免费。

功能亮点:

  • 很多现成的组件和模板资源,拖拽即可使用,非常方便
  • 能够实现多种交互,包括页面交互、高级动画、各种事件手势等
  • 文件储存在云端,可跨平台访问,也可以支持评论协作
  • 使用场景:高保真原型、Web线框图、网页原型

6、Balsamiq

       Balsamiq是一款可快速绘制原型草图的原型图绘制工具。就像是用笔和纸绘制,界面简洁,上手快,适合低保真原型这种需要快速产出的产品原型。

价格:免费试用30天。

 

功能亮点:

  • 手绘风格,简洁美观
  • 支持UI控件自动拖拽与自动对齐
  • 拥有独特且多样的元素库
  • 支持跨平台使用(Windows、Mac OS、Linux)
  • 可使用XML语言保存元素,保存为PNG文件

使用场景:低保真原型、网页原型

 l0reqjpf0bp4225.png

 

3.3旅游APP原型设计实例

       Guides是一款旅行类App,这款App本身的颜色并不多,重点是要突出各个旅游景点的图片,所以这类App讲究后期对图片质量的把控,特别是图片占比较大的页面。在原型设计上,主要还是注意交互友好、对景点的介绍全面以及搜索方便等。

 zfanjcatyiq4226.gif

puvvh01xez04227.png

 

       原型设计软件是将产品需求进行可视化的工具,根据实际需求,选择最适合自己的一款原型产品设计软件,才能够在工作中最大程度降低设计时间成本与后续沟通成本,支持你更好地完成原型设计,腾出更多精力投入到后续的产品需求完善与产品迭代中。

 

Link to comment
Share on other sites