[2] UI原型设计工具Pencil Project 学习系列----- 入门
2017-07-27 22:51
1421 查看
在上一篇文章,笔者提到了一个开源免费的超级强大的UI原型设计工具---Pencil Project,那么该如何使用这个软件呢?下面让笔者来分享一下简单的心得。本文以Window操作系统为例子。
@ 打开Pencil Project
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/07/4c69ef687d11a7563558c614c1c73eee)
@ 创建新的文档
点击上面的Create Document 按钮,就会弹出下面的界面,然后按Ctrl+S快捷键,就能保存项目的名称。
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/07/a66d37e086d35f844ddff67feedd6d61)
@ 就可以在当前的页面做画图了
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/07/526b9d42b964024700d1ac91f61cc726)
@ 因为我话的HTML的UI Mock的图,所以在用之前,先引入第三方的扩展的BootStrap的集合,首先打开
集合管理
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/07/cadae816837bd962ad5ac892ce3bdd4e)
@选择要安装的集合:BootStrap
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/07/529ae7534ea82b2911f47e2b2d9022ae)
@ 插入一个浏览器框架
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/07/cba72394c1833107e673e38897064adc)
@添加自己想添加的任何元素和内容
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/07/46e7e4be02fee2ed0455b9face1e0e72)
一个简单的网页的例子就做好了!!!!
下一节,将会介绍一些高级功能。
@ 打开Pencil Project
@ 创建新的文档
点击上面的Create Document 按钮,就会弹出下面的界面,然后按Ctrl+S快捷键,就能保存项目的名称。
@ 就可以在当前的页面做画图了
@ 因为我话的HTML的UI Mock的图,所以在用之前,先引入第三方的扩展的BootStrap的集合,首先打开
集合管理
@选择要安装的集合:BootStrap
@ 插入一个浏览器框架
@添加自己想添加的任何元素和内容
一个简单的网页的例子就做好了!!!!
下一节,将会介绍一些高级功能。
相关文章推荐
- [3] UI原型设计工具Pencil Project 学习系列----- 进阶
- [1] UI原型设计工具Pencil Project 学习系列----- 为什么选择
- 界面原型设计工具使用系列(四)-Pencil
- 界面原型设计工具使用系列(一)-Frame Box
- 【转】免费的手绘风格开源原型图设计工具:Pencil
- [翻译]Axure-Masters-原型设计工具Axure学习-第2.2节
- 界面原型设计工具使用系列(二)-Lumzy
- 软件界面原型设计工具(Desktop):腾讯贡献的免费软件 UID UI Designer
- 推荐一款UI原型设计工具
- UI Prototype Design IDE( 界面原型设计工具 )
- [翻译]Axure-Dynamic Panel(Basic)-原型设计工具Axure学习-第2.1节
- 产品原型 UI 设计工具
- 20款UI原型设计工具比较。
- 产品原型 UI 设计工具
- [翻译]Axure-Interactive Prototypes-原型设计工具Axure学习-第2.3节
- [翻译]Axure-Page Properties-原型设计工具Axure学习-第1.2节
- UI原型设计工具
- 从FLC中学习的设计模式系列-创建型模式(5)-原型
- [Axure]原型设计软件:Axure RP简单介绍与基础入门学习目录
- 界面原型设计工具使用系列(三)-Mockup Builder