界面原形设计/UI原型设计

前段时间,有幸参加一次高级软件架构师的培 训,授课老师介绍了两个很好玩的界面原型设计工具:GUIDesignStudio 和 Mockups For Desktop,现分享一下,截图说明,洗洗眼球,权当娱乐。
以前在做界面原型设计的时候(不多,但有时候要做的),印象中多数用Visio或者一些UML工具来大致描述一下,效果及交互性较差,不知您是否 做过这方面的工作,不管有没有,我们来了解下这两个比较有意思的东西吧。
GUIDesignStudio 运行后,随便画上几个控件,界面如下:

运行设计好的内容后,界面如下所示:

Mockups For Desktop 运行后,涂鸦设计后的界面如下:

运行后的界面:

再看看网上其它人的一个设计图:

一般人做界面原型设计的时候,可能会存在下面几种设计方式:
纸质 :很多人比较推崇纸质原型设计,就是用笔和纸进行产品原型描绘(白板也常常起到类似的作用),不过我认为 这只是产品经理进行原型 构思阶段使用的最佳方式,不过这才是原型设计的第一步,构思和框架基本确定之后,就需要将这个"纸上谈兵"的框架转移到更形象直观的电子文档上,便于后续 的研讨、设计、开发和备案。

WORD :这是原型设计时常用的一种方式,在WORD文档建立一块画布,用文本框、图片、控件等等组合起来形 成一个原型设计方案。WORD文档门槛低,使用方便,功能效果丰富,如果一个熟练者甚至可以达到一个很好的类似实际页面的表现力,我的同事做出来的原型连 设计师都夸奖它好比PS设计图一般(不过原型设计不讲求美观,不推荐花费过多精力去修饰)。但是WORD文档的WEB控件不是太好用,交互性也较弱。

VISIO :这也是常用的原型设计工具,它的操作比WORD更加方便快捷,可以进行快速原型设计,但表现力弱 一些,毕竟它不是专门的网页原型设计工具。

Photoshop :也有人使用,不过用PS进行原型设计,费时费力,改动很不方便,容易降低效率,PM还是 不要抢了UI设计师的饭碗。

Dreamweaver :这是网页设计工具,但是对于功能复杂并且交互性很强的产品,可以通过DW去设计简单 的HTML交互稿,这样更有说服力。

如果是设计原型,采用专门的原型设计工具,应该事半功倍的,当然原型设计工具,好用的应该还有不少,除了GUI Design Studio和Mockups For Desktop外,Axure Rp 好像也是一个不错的原型设计工具。在此放上一个Axure Rp的软件截图,感兴趣的可以也去了解一下。

下面我们先看看这两款软件的介绍内容:
GUI Design Studio 是一个给应用软件设计图形用户界面(GUIs)的专业工具。 它是一个不需要软件开发和编码的完整的设计工具。屏幕上的一切都通过图形方式创建,你可以设计整个应用程序或单个窗体,对话框和组件。并组合它们来创建更 多的设计,和典型界面。我们也可以将它们链接在一起做为一个故事板,然后通过模拟器来运行,形成交互原型。 GUI Design Studio 将会支持所有基于微软 Windows 平台的软件环境。这个意味着,你可以先自由的设计,设计完后再选择实现工具。 按照这种方法,你可以快速聚焦到应用程序设计中,而不会被实现细节干扰。GUI Design Studio 可以被用于,任何你需要画程序界面,或着想展示这些界面是如何流转和配合的时候,例如: ·设计整个应用程序 ·文档化产品创意 ·创建项目建议 ·需求捕捉 ·创建模拟界面 ·给开发者的产品详细规格说明 ·注解现有产品的可用性 ·给现有产品提供建议 ·构建用户手册时候的临时屏幕截图等。

Balsamiq mockup 主要是做界面原型设计,是一款免费的带有手绘涂鸦风格的原型设计软件,这也是 他独特的地方—可以手绘,当然也有丰富的各种控件元素,可以帮助你设计桌面应用软件,Web 2.0 站点,RIA富网络应用程序, Web站点和Web应用软件。
这个软件是由意大利人Peldi开发的,本来是他自己用它来做设计,满足自己的需求。而在经济寒冷的2008年,从1,322位付费用户那却获得 了162,302美元的收入(其中12月份就有39,000美元);可见其受欢迎的程度。
虽然是由个人设计的,但功能却一点不弱于其他大牌的原型设计工具:操作方面,拖拽,控件分组,甚至元素之间的对齐都做得很贴心;预制了很多界面元 素,从简单的输入框,下拉框,浏览器主要元素,到经常用得到的导航条,日历,表格,到复杂的Tag Cloud,Cover Flow, 地图,WYSWYG的格式工具栏等,有了这些不用从头画起,往往比用白板都快;下面是它的一些特性介绍,参考了解一下:

  • 易操作 :从 Balsamiq Mockups 自带的元素里可以很方便地拖拽,效果图轻易形成;元素对齐很贴心;
  • 可偷懒 :根据 Balsamiq Mockups 提供的 Wiki 风格的代码规则,画图时可以「偷懒」,输入文本符号则能生成图标。因此相比其它繁琐的软件操作,Balsamiq Mockups 也能更快地完成画图任务。
  • 控件足 :Balsamiq Mockups 软件包括 50 多个控件, 70 多个图标。基本自带了所有常用的小控件,并在导航处进行分类;图标设计赏心悦目。要是 Balsamiq Mockups 允许用户导入自定义的控件就更好了,当然现有的也足够了 -:)
  • 新风格 :让人眼前一亮的涂鸦风格, 很能还原手绘效果;
  • 可中文 :在菜单栏 View 里将 Use System Fonts 勾上,就能完美支持中文输入(注:非 Balsamiq Mockups 中文版 );
  • 其 它点 :Balsamiq Mockups 使用 xml 记录,方便移植、二次利用;可导出为 png 格式图片。

另 外还有跨平台与多版本两个优点:

  • 跨平台 :Balsamiq Mockups 基于 Air ,因此能同时在 Windows、Mac OS 及 Linux

界面原形设计/UI原型设计相关推荐

  1. ui原型设计工具_UI设计师的工具包,用于专业模型,原型和产品插图

    ui原型设计工具 This is a followup to my previous article 这是我上一篇文章的后续 visual tools for UX Designers视觉工具 Too ...

  2. 《人机交互技术》结课作业:界面调研报告交互界面设计快速原型设计(华科软院)

    一.作业内容概述 ● 一.界面调研报告:图文并茂,不少于15页(Word或PPT) ● 二.界面改造:用Auxre RP或GUI Design对热力学计算的界面实现三种风格的改造:对话框方式.菜单方式 ...

  3. 交互界面设计快速原型设计实验报告

    交互界面设计快速原型设计实验报告 一.实验目的 1.掌握软件开发原型模型的概念 2.练习Axure RP的原型设计 二.实验内容 1.界面改造:用Axure RP 9对热力学计算的界面实现三种风格的改 ...

  4. B端产品设计之原型设计

    前几篇文章从B端产品设计的业务.流程设计角度出发,给大家阐述了自己的想法,这篇文章将从原型设计角度出发,主要是原型设计工具,如何设计原型,设计边界,设计规范以及PRD结合这几个方面阐述. 话不多说,开 ...

  5. 用Power Point画界面设计图——在Web原型设计工具上“另辟蹊径”

    毕业设计选了一个开发类的题,老师要我先做原型设计. 四处搜罗工具,无奈专业工具用起来繁琐,简单的工具又功能不行.不想在界面设计上花费太多时间,最后发现Power Point很不错.由于平时用得也比较熟 ...

  6. 【产品设计】原型设计

    一.什么是原型图? "原型"的最基本定义是"最终产品的仿真或样本版本,用于发布之前方便测试." 原型的目标是在花费大量时间和金钱进入开发产品前,让开发者以及对应 ...

  7. html界面原型,进行 Web 界面原型设计的一种方法 - JunChen Wu

    Web 界面原型设计的一种方法 进行 Web 界面原型设计常用的工具如下: 白纸.铅笔.橡皮,有时候还需要剪刀.可惜大部分情况下保真度不高而且难以表述页面流程: Word,可以制作 wireframe ...

  8. 界面原型设计工具开源软件

    界面原型图绘制工具 Pencil Pencil 是一款开源的原型图绘制工具,手绘风格的,就像自己在纸上画的那样.Pencil 还可以用来绘制各种架构图和流程图,同时还提供 Firefox 的插件(点击 ...

  9. 第三次作业-介绍一款原型设计工具

    课程:软件工程综合实践专题  学号:1759214 介绍一款原型设计工具:Mockplus http://www.mockplus.cn 如今是一个快节奏的社会,每一天都会有无数的软件发布,每一款软件 ...

  10. vant ui wepy_UI设计需要学习什么软件呢?

    展开全部 如今2113,UI设计师的出现,是互5261联网时代的设计变革带来的4102.越来越多的设计人加入了这个1653新兴的职业,有的人看重UI设计的高薪资,有的人看到无限美好的职业前景.总之,就 ...

最新文章

  1. 7 种 Javascript 常用设计模式学习笔记
  2. PostgreSQL学习手册(系统表)
  3. C# MVC 使用 CKEditor图片上传 提示“不正确的服务器响应”
  4. 完美的单例实现(The Perfect Singleton)
  5. java -jar 停止_推荐:Linux启动Java程序jar包Shell脚本
  6. 结队开发之NABCD
  7. 对图片对比度和亮度的理解
  8. php怎么更新多条数据,PHP中批量更新数据表中多条记录
  9. Eureka 配置参数说明
  10. go lang chrome 爬虫 (MAC 系统)
  11. Word把普通表格改为三线表格的方法
  12. Oracle财务管理系统
  13. 扫雷win10_利用Python实现自动扫雷小脚本
  14. excel保护密码怎么解除
  15. Ubuntu wine 安装qq,微信
  16. Qt 笔锋 钢笔 压力值
  17. excel项目计划_使用Excel计划您的聚会座位
  18. 计算机无法显示移动硬盘,电脑不显示移动硬盘怎么办 检测不到移动硬盘的原因...
  19. 在cmd中进入mysql的步骤
  20. 1182 -- 对决

热门文章

  1. 【秋招面试】面试准备(一面准备)
  2. web漏洞扫描器原理_每周一喂丨用于渗透测试的10种漏洞扫描工具
  3. 启明星辰产品解读_IPS
  4. 常用思维模式大全(上)
  5. Docker-基本命令和漏洞分享
  6. IP是什么?动态IP和静态IP有什么区别?
  7. java注释/关键字/标识符/常量/
  8. 混沌大学--喜茶模式拷贝指南
  9. 使用Java程序实现计算器
  10. 嵌入式和单片机的区别到底在哪?