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

标签: Pencil ProjectUI原型免费开源
482人阅读 评论(1) 收藏 举报
分类:

前面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 -->选择要导出的页面-->选择导出的格式-->选择导出的目录。 本例子选择导出成为图片。



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




1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:385168次
    • 积分:6337
    • 等级:
    • 排名:第4069名
    • 原创:227篇
    • 转载:0篇
    • 译文:5篇
    • 评论:157条
    博客专栏