使用firefox建立簡單的實體模型
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彩色備忘單
- 發表於 2021-04-13 10:58
- 閱讀 ( 42 )
- 分類：網際網路
你可能感興趣的文章
一般化(generalization)和資料庫管理系統專業化(specialization in dbms)的區別
...EER模型的圖稱為增強ER（EER）圖。泛化是繪製EER圖時可以使用的概念。一般來說，較低的實體可以組合成更高層次的實體。它也被稱為自下而上的方法。在這種方法中，實體被組合在一起以執行一個廣義實體。 圖01：概括，自下...
呃(er)和eer圖(eer diagram)的區別
...是基於EER模型的。 總結 - 呃(er) vs. eer圖(eer diagram) 可以使用ER圖設計資料庫。EER圖是增強型ER圖。EER中有比原始ER圖更多的特性。ER圖是基於ER模型的資料視覺化表示，它描述了資料庫中實體之間的相互關係。EER圖是基於EER模型...
如何在adobeillustrator中設計名片
... 我們將使用令人印象深刻和高度吹捧的圖形設計程式Adobe Illustrator。如果您不熟悉該軟體，請務必前往我們的Illustrator入門，然後再繼續。 ...
openscad初學者指南：程式設計3d列印模型
...計的零件怎麼樣？有很多三維建模程式，但這些可能很難使用，如果你不是藝術（像我一樣）。OpenSCAD提供了一種專門為3D列印設計模型的方法，只使用程式碼。如果您也不知道如何編寫程式碼，請不要擔心，今天我將指導您完...
微軟如何用windows10推動3d革命
... 隨著最近虛擬現實技術背後的狂熱（有時很搞笑），使用者似乎渴望進入這個新的領域。考慮到個人和專業3D列印技術越來越被接受。它使得原本停留在二維空間的裝置的三維整合——在成像和編輯方面——看起來更像是一...
microsoft visio的免費開源替代方案
... 使用dia建立圖表 ...
如何使用photoshop cc建立自定義漸變
... 在本文中，我們將引導您透過四個簡單的步驟瞭解如何使用Photoshop CC建立自定義漸變。 ...
用placeit在幾分鐘內建立漂亮的模型
...品的高質量產品模型。讓我們看看它提供了什麼以及如何使用它。它可能會改變你做生意的方式！ ...
5個流行的firefox擴充套件，您應該立即刪除
... 如果您安裝了以下任何Firefox擴充套件，我們建議您立即刪除它們。 ...
firefox記憶體清理器真的能用嗎？
...即用安裝也會報告相當多的記憶體使用量。 這使得一些Firefox外掛浮出水面，聲稱可以釋放瀏覽器不再需要的記憶體，但它們真的可以工作嗎？ 關於windows如何處理記憶體的兩分鐘概述 在我們深入研究記憶體清理器之前，瞭解一...
