[3] UI原型设计工具Pencil Project 学习系列----- 进阶

原创 2017年07月27日 23:37:30

前面2个章节,笔者分享了Pencil Project的一些基本用法。这篇文章来分享一些高级功能。比如,如何添加表格,如何添加浏览器框架, 如何保存和使用定义模板,如何导出成PDF或者图片。下面请听笔者一一道来。

(1)添加表格

在Pencil Project 里面添加表格,还真心方便。因为其和Balsamiq Mockups 一样,提供了用| 分割的表达方式。

在Basic Web element 有一个形状Table,把其往画布上一拖,就是一个表格。 这个表格的列由 | 分割。举个栗子,下面个表格。


双击这个表格,就可以看到,其实就可以用下面的字符串表示。

[] | ID |  Name| Age | Home Address | Telephone
[*] | 1 |  Henry | 30 |  Xi Bu Big road | 17812324444
[] | 2 |  Winner | 28 | Sunny Street 65 # | 13399992222


简单吧,其中 [] 表示 复选框(checkbox),如果想让其选中,则在里面添加一个星号(*). 对于单选框,其就用圆括号(),其中有一个小小的技巧分享一下,默认情况下,上面的表格里面的文字没有上面排列的这么整齐,这个时候,如果想让其排列整齐漂亮,可以选择表格,并点击右键菜单: Action --> Fix Column Content, 则整个表格将会整齐排列。



(2)添加浏览器框架

安装以后默认情况下,是没有浏览器其的形状的。如果想使用浏览器的形状的话,需要扩展当前的库。注意,这个时候大家要自己准备梯子,翻墙。

选择左下角的一个魔方块图标(Manage Collection )---> Install From Repository... --> Generic Wireframe。 安装之后,在左侧里面,就能找到一个浏览器的形状。



(3)创建和使用自定义模板

有的时候,我们创建一个应用或者网站的时候,其实应用或者网站的整体布局以及顶级菜单在每个页面都能用上。 但是这个布局是我们后面用已知的元素组装起来的。那么这个时候,如果我们想在以后的页面设计当中复用,那么,我们应该如何做?其实很简单。 就是复制(duplicate)一个已有的页面,并删除用不上的部分,保留公用的部分。

具体步骤如下,首先多选需要保留的元素,然后点击右键(Group)把他们组合成一个组,然后在点击 Add to my Collections ...,随后给其去一个名字,比如MyTemplate,形状的名字叫browser,这个时候在MyShapes的tab里面就能找到我们的模板。



(4)导出成为图片,PDF甚至网页


在左上角的图标上点击-->Export -->选择要导出的页面-->选择导出的格式-->选择导出的目录。 本例子选择导出成为图片。



好了,这个章节就到这里为止吧。以后有机会在继续讲解其他的技巧和话题。




版权声明:本文为博主原创文章,未经博主允许不得转载。

[2] UI原型设计工具Pencil Project 学习系列----- 入门

在上一篇文章,笔者提到了一个开源免费的超级强大的UI原型设计工具---Pencil Project,那么该如何使用这个软件呢?下面让笔者来分享一下简单的心得。本文以Window操作系统为例子。@ 打开...

REST API 最佳入门指南

点击上方“程序员大咖”,选择“置顶公众号” 关键时刻,第一时间送达! 如果你看到这里,你以前可能听说过API 和REST,然后你就会想:“这些都是什么东西?”。也许你已...
  • Px01Ih8
  • Px01Ih8
  • 2017年11月30日 00:00
  • 56

3. 打包和工具链(Go Tutorial)

打包和工具链(Go Tutorial)
  • hukfei
  • hukfei
  • 2017年11月27日 18:12
  • 25

界面原型设计工具使用系列(四)-Pencil

Pencil是一个功能强大的界面原型设计工具,相比较于前面介绍的几个,这个工具是一个需要安装的应用程序, 支持中文,可以设计网页和桌面程序界面,侧重点在于设计,支持自定义控件和导出模板,功能确实很强大...

互联网产品进阶笔记(3)原型设计的工具

互联网行业产品经理的一项重要工作,就是进行产品原型设计(PrototypeDesign)。而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型完...
  • cndes
  • cndes
  • 2011年02月25日 10:51
  • 2395

互联网产品进阶笔记(3)原型设计的工具

互联网行业产品经理的一项重要工作,就是进行产品原型设计(PrototypeDesign)。而产品原型设计最基础的工作,就是结合批注、大量的说明以及流程图画框架图wireframe,将自己的产品原型完整...

UI原型设计工具Mockups

  • 2014年12月06日 16:40
  • 18.85MB
  • 下载

界面原型设计工具使用系列(三)-Mockup Builder

继续试用,今天测试了一个用silverlight编写的工具:Mockup Builder,自称杀手级的界面原型设计工具,个人感觉总体比Lumzy差些,但是其支持的控件同样很丰富,支持网页界面设计和桌面...

软件开发工具介绍之 3. 原型设计

原文转自suson的博客园 不知道你是否有这样的经历:当一个项目进入测试阶段或结束时,却发现你所做的东西并不是客户所要的,眼看交付在即,抱怨也无补于事,只能来个临时抱佛脚,无日无月的加班赶回...

原型设计工具axure(3)

  • 2008年12月09日 09:17
  • 19MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[3] UI原型设计工具Pencil Project 学习系列----- 进阶
举报原因:
原因补充:

(最多只允许输入30个字)