使用Firefox创建简单的样机

铅笔是一个线框工具,我们可以用它来绘制一个模拟我们应用程序的用户界面。 铅笔的伟大之处在于它是轻量级的,易于使用,并与Firefox紧密集成。 除此之外,它所有的免费开源应用程序! 在文章结束时,我们将给你一个简单的演示如何使用铅笔创建一个Brizzly像线框。

为什么我们创建线框?

线框是页面布局理念的草图。线框关注页面的信息设计,以确保设计适合用户需要。 线框通常由不同的形状(例如框,椭圆和菱形)组成,以表示内容,功能和导航元素。 这些形状显示其在页面上的位置。

起初,它似乎是浪费时间创建页面的粗略草图。 线框对于让用户专注于您网页上的重要性元素很重要。 创建页面的粗略草图,没有花哨的视觉元素,将用户的注意力转移到重要的元素,如页面组件的大小,布局和位置。 当用户开始关注页面的重要元素时,我们将开始更好地了解客户端真正需要和需要的软件。 创建线框可让您和您的用户有效协作,及早发现潜在的设计问题。

铅笔入门

从铅笔的add ons页面下载铅笔。 一旦你安装了铅笔,它可以从“工具”>“铅笔草图”访问。

这是Brizzly的样子。 这是一个非常酷的Web应用程序,在一个页面中聚合您的Facebook和Twitter。

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

创建矩形

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

将矩形调整为适当的宽度和高度。

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

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

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

创建标签

主页,草稿,图片选项卡是三个彼此堆叠的选项卡。 将三个“Tabs Panel”拖动到矩形中。 调整每个标签的大小,使每个标签并排显示。

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

创建文本

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

更改颜色的有用提示

颜色是提供令人愉快的线框的最重要的部分之一。 更改形状颜色的最精确方法是指定颜色的HTML代码。 找出特定颜色的HTML代码可能很困难。 我们可以使用w3cschools.com的HTML颜色备忘单来查找特定颜色的正确HTML代码。

我们还喜欢使用colorzilla从屏幕中选择颜色,并在铅笔中使用它。 点击Firefox左下角的Droplet图标,在屏幕上选择颜色。 我们还可以通过双击眼睛图标打开ColorZilla的颜色选择器。 只需复制粘贴十六进制代码到铅笔的颜色HTML代码。

结论

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

链接
下载铅笔
下载Colorzilla
W3C HTML颜色备忘单

赞 (0)
分享到:更多 ()