Pencil是一种线框工具，我们可以用它来绘制应用程序用户界面的模型。Pencil的优点在于它轻巧、易于使用，并且与Firefox紧密集成。最重要的是它是一个免费的开源应用程序！在文章的最后，我们将给你一个简单的演示如何使用铅笔来创建一个像白蜡一样的线框。

为什么要创建线框？

线框是页面布局理念的草图。线框关注页面的信息设计，以确保设计符合用户的需求。线框通常由不同的形状（如方框、椭圆形和菱形）组成，以表示内容、功能和导航元素。这些形状显示它们在页面上的位置。

起初，创建页面的草图似乎是浪费时间。线框对于让用户关注页面上的重要元素非常重要。创建一个页面的粗略草图，而不使用花哨的视觉元素，会将用户的注意力转移到重要的元素上，例如页面组件的大小、布局和位置。当用户开始关注页面的重要元素时，我们将开始更好地了解客户真正想要什么，需要什么。创建线框可以让您和您的用户有效地协作，并尽早发现潜在的设计问题。

铅笔入门

从铅笔的附加组件页面下载铅笔。安装铅笔后，可以从“工具”>“铅笔草图”中访问。

这就是布里兹利的样子。这是一个非常酷的web应用程序，它将你的Facebook和Twitter聚合在一个页面中。

这是线框的最终结果。此线框中的主要形状是、矩形、文本框和制表符。本文的下一节将给出一个简单的示例，说明如何创建每个形状。

创建矩形

创建线框形状的第一步是将形状从“形状集合”菜单拖到画布上。

Resize the rectangle to a suitable width and height.

我们可以用铅笔自定义任何形状的文字、边框和背景色。右键单击矩形并选择“属性”以打开属性窗口。这是背景属性屏幕。将矩形背景色设置为白色（#FFFFFF）。

单击“边框”选项卡并调整边框属性。将边框颜色设置为黑色（#000000），并将边框权重更改为1。

文本属性屏幕允许我们自定义文本的字体类型、大小、样式、重量、颜色、亮度和不透明度。

创建选项卡

The home, draft, picture tabs are three tabs that are stacked on top of one another. Drag three ‘Tabs Panel’ into the rectangle. Resize each tab so that each tab shows side by side.

打开文本属性屏幕以调整“图片”和“草稿”选项卡的字体颜色。设置为灰色（#9898）。

创建文本

将“文本”形状拖到画布上，以创建每个菜单。我们可以通过访问文本属性窗口来调整文本外观。

更改颜色的有用提示

颜色是最基本的部分之一，在提供一个令人愉快的线框。改变形状颜色的最精确方法是指定颜色的HTML代码。找出特定颜色的HTML代码可能很困难。我们可以使用来自w3的HTML彩色备忘单cschools.com网站查找特定颜色的正确HTML代码。

我们也喜欢用colorzilla从屏幕上挑选颜色，然后用铅笔。点击Firefox左下角的滴管图标来选择屏幕上的颜色。我们也可以通过双击眼药水图标打开ColorZilla的颜色选择器。只要复制粘贴到铅笔的彩色HTML代码的十六进制代码。

结论

铅笔是易于使用的线框工具。铅笔与Firefox的集成使我们可以使用其他Firefox插件来帮助创建更好的线框

links下载铅笔下载ColorzillaW3C HTML彩色备忘单