一、前言
本教程用举例的方法介绍如何用Pencil设计网页界面原型
参考网页
最终成果:
二、环境
- 操作系统: Windows 10 X64
- Evolus Pencil 3.1.0
三、下载并安装Pencil
- 打开下载链接
-
点击下载按钮
-
下载完成后,双击打开进行安装
-
选择next
-
设置安装目录并选择next
-
默认设置不用改,选择Install
-
进度条走完后,选择finish,结束安装并运行Pencil
四、创建项目并制作网页界面原型
-
在开始界面中选择Create a New Document
-
界面还是比较简单易懂的
-
打开左侧的shapes菜单,在Common Shapes选项卡中选择Rectangle并拖拽到画布上
-
推拽方框周围的控制点,使其铺满画布的上方
-
双击方框输入“移动计算与数据分析”
6.在右侧的属性框修改属性 -
添加表格并调整位置大小,使之超出画布外
滚轮键缩小画布
-
完善整个网页布局
12.导出为png
五、总结与拓展