正文

UI原型设计

发布时间：2023-04-28 00:42:04 稿源：创意岭阅读： 1242

大家好！今天让创意岭的小编来大家介绍下关于UI原型设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀企业，服务客户遍布全国，设计相关业务请拨打175-8598-2043，或微信：1454722008

本文目录:

1、UI设计师需要画原型图吗？
2、UI设计必须按照原型图的排版设计吗？
3、平面设计和ui设计的区别是什么？
4、如何利用Edraw Max设计软件的Windows7 UI原型图

UI原型设计

一、UI设计师需要画原型图吗？

UI设计师需要画原型图吗？这个问题要看我们从事的公司对UI设计师这个职位的岗位要求来决定。一般严格来说，原型图的工作应该交给交互设计师来做。在一些小型公司，假如没有交互设计师这个岗位，那一般也是产品经理来负责绘制原型图。但在一些小型公司，都需要员工要一职多能，也会要求UI设计师来担当一些交互设计的工儿。如果大型正规化的公司，公司岗位配备比较齐全，所以每个岗位都专职专岗。那么在这些大型公司就会有专业的交互设计师来绘制原型，UI设计就只需要负责界面的美化设计就行。

二、UI设计必须按照原型图的排版设计吗？

最好是按照产品的规范来，产品一般会在蓝湖将设计图与原型绑定在一起，对比查看很方便哦。

三、平面设计和ui设计的区别是什么？

UI设计和平面设计的区别包括：二者包含的内容范围有所不同、二者的概念有所不同；二者的侧重点有所不同。

1.内容范围的区别：ui设计的内容范围更为广泛，广义的ui设计包括原型设计、交互设计、视觉设计。

2.概念区别：平面设计是以“视觉”作为沟通和表现的方式，透过多种方式来创造和结合符号、图片和文字，借此作出用来传达想法或讯息的视觉表现。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。简单直接来说平面设计是设计排版，UI设计是设计交互。

3.侧重点不同：平面设计侧重于平面媒体或载物进行设计，主要包括广告，画册，海报，LOGO，包装等。UI设计则侧重于：对软件的人机交互、操作逻辑、界面美观的整体设计。收起

四、如何利用Edraw Max设计软件的Windows7 UI原型图

1、Axure RP（Rapid Prototyping）

Axure（读音为Ack-Sure）无疑是目前最受关注的原型开发工具，其能通过组件的方式帮助网站或软件设计师快速建立带有注释的原型（流程图、线框图），并凭借自定义可重用的元件、动态面板以及丰富的script能够建立基本功能或页面逻辑的动态演示文件。

Axure借鉴了office的界面，能够让用户快速上手，并且提供了丰富的组件样式修改，使得通过其能够创建低保真、高保真甚至接近于实际效果的界面。然而最让人称道的是，Axure的丰富的脚本模式，可以通过点击和选择能够快速完成界面元素的交互，如链接、state切换、动态变化等效果，使得Axure能够生成十分接近于真实产品的原型。另一方面，Axure能够导入其他人创建的元件库，使得Axure能够满足绝大多数类型产品的设计。

但Axure仍然有一个让人头痛的问题：对于中文的支持不太友好。在小部分元件上输入中午的时候，经常需要像碰运气似的反复切换输入法，破坏了咱们设计师的用户体验。

瑕不掩瑜，Axure仍然是交互设计师的首选原型工具。

2、Microsoft Office Visio

Visio在2000年被微软收购，并在2002年成为office2003套件中的一个组件，最新版本是2007。Visio能够获得推荐的原因是因为Visio的适用性非常之广，从网站界面、数据库模型，到平面布置图到工艺流程图，Visio都提供了相应的元件库和模板来进行快速创建。

相较Axure而言，Visio更适合于传统行业的生产或流程设计，或者软件及互联网行业中的信息、数据和流程的说明，而不太适用于web界面。因为其的基于web的元件库还是比较少，并且形式和结构也更类似于word中的图形工具，因此在原型开发效率上都有所不足。

3、Balsamiq Mockups

这个基于Adobe AIR Runtime的工具实在是有让人眼前一亮的感觉，手绘风格的元件样式粗犷淋漓，能创建接近于纸上手绘的原型文件。其提供了丰富的手绘风格的web常用元件，包括常用的html控件、以及一些组合控件，如多媒体控制器、标签页、列表、Iphone界面元件等。

Mockups最值得赞赏之处在于其提供的多数组件都可定制外观，对于中文的支持也不错（选择View > Use System Fonts）。

4、Mockflow

Mockflow和以上工具最大的不同在于Mockflow是一项基于Adobe Flex技术开发在线服务，提供了与Balsamiq Mockups基本相似的功能，甚至更丰富的组件，虽然其元件定制化不够强大，但其提供的元件库默认样式却非常适合用来做商业产品原型的搭建。有一个让我爱不释手的功能是模板，可以设置基于任何页面的模板来进行新的页面设计。

与其他模板工具相比，mockflow有一个非常特色的功能，基于web的存储可以在任意电脑上联机打开，同时可以其他人进行快速的分享，并收集在线反馈意见，非常适合虚拟团队的原型设计交流。

虽然在线服务的基本帐号只能创建一个文件，但单个文件却没有限制页数，因此也基本上足够使用。

5、Pencil sketch

Pencil 是一款基于Firefox的扩展组件，安装之后即可在Firefox的工具菜单中打开Pencil的绘图面板。功能比较简单，仅能用以日常简单工作的辅助说明。提供的默认元件都是基于软件工程，因此更适合用于windows桌面程序的简易界面搭建，或者是基本的页面功能说明，并不适用于严肃的原型开发，但好在体积小、又轻便，能够方便将网页中的元素直接拖到或者复制到当前的画布中，这也是Pencil安装在Firefox所带来的便利之一吧。

更多工具...

在以上列举的原型开发工具都是较为常用的，也是在国内的交互设计师们比较常讨论的，但其实和Axure功能相似的软件还有很多，下面也就一些简单说明：

6、GUI Design Studio

这是一款真的非常强大的原型制作工具，没有在上面推荐的原因是因为我还没有实际体验过，但冲着这工程级的界面设计就没有去尝试的冲动，但是从官方网站的截图和视频演示来看，这款软件的操作模式和前面的原型工具大有不同。Axure之类多是基于页面的原型设计，对于web网站尽管很实用，但是对于软件界面的流程设计却略显繁琐。而GUI Design Studio却另辟蹊径，直接以建立元素与元素之间的关联的方式来自动化的创建动作流程，而从视频演示来看，这样的确很大程度上提升了软件界面原型搭建的效率。

7、Prototype Composer

Serena 公司提供的原型开发工具，功能确实强大，提供了基于项目管理主要流程的产出物文档模板、原型工具以及开发流程控制，这个软件的开发理念非常好，用这一款工具来满足项目开发流程中各个环节的沟通和决策。但软件的学习和使用成本比较高，要了解其中的全部功能，貌似需要花不少时间。另外软件的效率和稳定性还有待提高，试用的过程中多次出错及停止响应。

8、Lucid Spec

由 Elegance科技推出的Lucid Spec是一款很类似Pencil的原型工具，仅仅是提供了更多控件。不过Lucid Spec强调了生成干净的说明文档的功能，这可能是针对于多数原型工具的自动化生成规范的冗余而言的，不过老实说Lucid Spec提供的原型界面太过简陋，并且生成的说明文档也未见优化有怎样的提升。视频介绍

9、Irise Professional Edition

Irise与其他原型工具相比其中一个特色在于提供了样本数据的功能，这是类似于excel表的一个样本数据库，可以通过界面元素直接获取样本数据库中的数据，这样所生成的原型甚至可以使动态数据更新的。

10、Adobe Reader

Adobe reader？没错。其实理论上任何可以创建图形和文本的工具都可以用来原型开发，因为原型本身就是对于业务逻辑和功能界面的模拟或仿真，因此有何理由不能使用PDF格式呢？BoxandArrow的这篇文章《PDF Prototype》提醒了我们，所有的原型工具都只是工具，而不是设计本身。

另外这里的也可参考一下

但个人推荐:

原型

• Axure 7.0

• UIDesigner

思维

• Mindmanager

• Xmind