火狐查看网页3d模型_使用Firefox创建简单的模型

比眉伴天荒 2021-07-26 17:22 377阅读 0赞

![火狐查看网页3d模型][3d]

火狐查看网页3d模型

Pencil is a wireframing tool that we can use to sketch a mock up of our application’s user interface. The great thing about Pencil is that it is lightweight, easy to use, and tightly integrated with Firefox. On top of it all its a free open source application ! At the end of the article we will give you a simple demo on how to use Pencil to create a Brizzly like wireframe.

Pencil是一个线框图工具，我们可以使用它来绘制应用程序用户界面的模型。 Pencil的伟大之处在于它重量轻，易于使用并且与Firefox紧密集成。 最重要的是，它是一个免费的开源应用程序！ 在本文的结尾，我们将为您提供一个简单的演示，说明如何使用Pencil来创建类似Brizzly的线框。

## 为什么我们要创建线框？ **(**Why do we create wireframes ?**)** ##

A wireframe is a sketch of a page-layout idea.A wireframe focuses on the information design of a page to ensure that the design fits into what the user needs. A wireframe usually consists of different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements. These shapes displays their placement on the page.

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

At first it may seem like a waste of time creating rough sketches of a page. A wire frame is important to get your users to focus on the importance element on your page. Creating a rough sketch of a page, without fancy visual elements, shift the user’s attention to important elements such as sizing, layout, and placement of your page components. We will start to get a better understanding on what the client really want and need out of the software when the user starts focusing on the important elements of a page. Creating a wire frame let you and your users collaborate effectively and identify potential design problem early.

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

## 铅笔入门 **(**Getting Started with Pencil**)** ##

Download Pencil from Pencil’s add ons page. Once you install Pencil, it is accessible from ‘Tools’ > ‘Pencil Sketching’.

从Pencil的加载项页面下载Pencil。 安装Pencil后，可以从“工具”>“铅笔素描”中进行访问。

![Pencil_Firefox_Menu.png][]

This is what Brizzly looks like. It’s a pretty cool web application that aggregates your Facebook and Twitter within a single page.

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

![Brizzly_frontpage.png][]

This is the end result of the wire frame. The main shapes in this wireframe are, rectangles, text boxes, and tabs. The next section of the article will give a simple example how to create each shape.

这是线框的最终结果。 该线框的主要形状是矩形，文本框和选项卡。 本文的下一部分将给出一个简单的示例，说明如何创建每种形状。

![Brizzly_like_wireframe.png][]

## 创建一个矩形 **(**Creating a Rectangle**)** ##

The first step of creating a wire frame shape is to drag a shape from the ‘Shape Collections’ menu onto the canvas.

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

![Pencil_Rectangle.png][]

![Pencil_Rectangle_Frame.png][]

We can customize the text, border, and background color of any shape in Pencil. Right click the rectangle and select ‘Properties’ to open the Properties windows. This is the background properties screen. Set the Rectangle background color to white (\#FFFFFF).

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

![Pencil_Background_Properties.png][]

Click the ‘Border’ tab and adjust the border properties. Set the border color to black (\#000000) and change the border weight to 1.

点击“边框”标签，然后调整边框属性。 将边框颜色设置为黑色(＃000000)，并将边框权重更改为1。

![Pencil_Border_Properties.png][]

The text properties screen let us customise the font type, size, style, weight, colour, brightness, and opacity of the text.

文本属性屏幕使我们可以自定义文本的字体类型，大小，样式，粗细，颜色，亮度和不透明度。

## 创建标签 **(**Creating Tabs**)** ##

![Pencil_Tab_Frame.png][]

Open the text properties screen to adjust the font color of ‘Pictures’ and ‘Draft’ tab. Set it to Grey (\#989898).

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

![Pencil_Text_Properties.png][]

## 创建文字 **(**Creating Text**)** ##

Drag the ‘Text’ shape onto the canvas to create each of menu. We can adjust the text appearance by accessing the text properties window.

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

![Text_Shape.png][]

## 更改颜色的有用提示 **(**Useful Tips for Changing Color**)** ##

Color is one of the most essential part in delivering a pleasing wireframe. The most precise way to change  colour of a shape is by specifying the colour’s HTML code.  Figuring out the HTML code for a particular color can be difficult. We can use HTML colour cheat sheet from w3cschools.com to look up the right HTML code for a particular color.

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

We also like to use colorzilla to pick colors from the screen and use it in Pencil. Click on the eye dropper icon at the bottom left corner of Firefox to pick color on the screen. We can also open up ColorZilla’s color picker by double clicking the eye drop icon. Just copy paste the Hex code into Pencil’s color HTML code.

我们还喜欢使用colorzilla从屏幕上选择颜色并在Pencil中使用它。 单击Firefox左下角的滴管图标以在屏幕上选择颜色。 我们还可以通过双击眼药水图标来打开ColorZilla的颜色选择器。 只需将十六进制代码复制粘贴到Pencil的彩色HTML代码中即可。

![Color_Picker.png][]

## 结论 **(** Conclusion **)** ##

Pencil is easy to use wireframing tool. Pencil integration with Firefox make it possible for us to use other Firefox plugin to help create a better wireframe

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

Links [Download Pencil][] [Download Colorzilla][] [W3C HTML Color Cheat Sheet][]

链接[下载Pencil][Download Pencil] [下载Colorzilla][Download Colorzilla] [W3C HTML颜色][W3C HTML Color Cheat Sheet] [备忘][Download Colorzilla] [单][W3C HTML Color Cheat Sheet]

> 翻译自: [https://www.howtogeek.com/53294/use-firefox-to-create-simple-mockups/][https_www.howtogeek.com_53294_use-firefox-to-create-simple-mockups]

火狐查看网页3d模型

[3d]: /images/20210726/80a70417b1a24e66878952b7b2b0cc3e.png
[Pencil_Firefox_Menu.png]: http://productivegeek.com/wp-content/uploads/2010/06/Pencil_Firefox_Menu.png
[Brizzly_frontpage.png]: http://productivegeek.com/wp-content/uploads/2010/06/Brizzly_frontpage.png
[Brizzly_like_wireframe.png]: http://productivegeek.com/wp-content/uploads/2010/06/Brizzly_like_wireframe.png
[Pencil_Rectangle.png]: http://productivegeek.com/wp-content/uploads/2010/06/Pencil_Rectangle.png
[Pencil_Rectangle_Frame.png]: http://productivegeek.com/wp-content/uploads/2010/06/Pencil_Rectangle_Frame.png
[Pencil_Background_Properties.png]: http://productivegeek.com/wp-content/uploads/2010/06/Pencil_Background_Properties.png
[Pencil_Border_Properties.png]: http://productivegeek.com/wp-content/uploads/2010/06/Pencil_Border_Properties.png
[Pencil_Tab_Frame.png]: http://productivegeek.com/wp-content/uploads/2010/06/Pencil_Tab_Frame.png
[Pencil_Text_Properties.png]: http://productivegeek.com/wp-content/uploads/2010/06/Pencil_Text_Properties.png
[Text_Shape.png]: http://productivegeek.com/wp-content/uploads/2010/06/Text_Shape.png
[Color_Picker.png]: http://productivegeek.com/wp-content/uploads/2010/06/Color_Picker.png
[Download Pencil]: https://addons.mozilla.org/en-US/firefox/addon/8487/
[Download Colorzilla]: https://addons.mozilla.org/en-US/firefox/addon/271/
[W3C HTML Color Cheat Sheet]: http://www.w3schools.com/html/html_colors.asp
[https_www.howtogeek.com_53294_use-firefox-to-create-simple-mockups]: https://www.howtogeek.com/53294/use-firefox-to-create-simple-mockups/