一梅割、前言
本教程用舉例的方法介紹如何用Pencil設(shè)計(jì)網(wǎng)頁界面原型
參考網(wǎng)頁
最終成果:
二兄朋、環(huán)境
- 操作系統(tǒng): Windows 10 X64
- Evolus Pencil 3.1.0
三荣回、下載并安裝Pencil
- 打開下載鏈接
-
點(diǎn)擊下載按鈕
-
下載完成后骤菠,雙擊打開進(jìn)行安裝
-
選擇next
-
設(shè)置安裝目錄并選擇next
-
默認(rèn)設(shè)置不用改骡尽,選擇Install
-
進(jìn)度條走完后威恼,選擇finish,結(jié)束安裝并運(yùn)行Pencil
四本缠、創(chuàng)建項(xiàng)目并制作網(wǎng)頁界面原型
-
在開始界面中選擇Create a New Document
-
界面還是比較簡單易懂的
-
打開左側(cè)的shapes菜單,在Common Shapes選項(xiàng)卡中選擇Rectangle并拖拽到畫布上
-
推拽方框周圍的控制點(diǎn)入问,使其鋪滿畫布的上方
-
雙擊方框輸入“移動計(jì)算與數(shù)據(jù)分析”
6.在右側(cè)的屬性框修改屬性 -
添加表格并調(diào)整位置大小,使之超出畫布外
滾輪鍵縮小畫布
-
完善整個網(wǎng)頁布局
12.導(dǎo)出為png
五匾灶、總結(jié)與拓展