線框圖是幾乎所有網(wǎng)站設(shè)計(jì)和應(yīng)用程序設(shè)計(jì)中必須經(jīng)歷的過(guò)程之一。 想想你在一個(gè)項(xiàng)目上草擬了多少個(gè)關(guān)于頁(yè)面版塊的草圖? 你在最終方案定下來(lái)以前和客戶以及經(jīng)過(guò)了多少次的頭腦風(fēng)暴?
不管是什么類型的線框圖,都是設(shè)計(jì)和迭代過(guò)程中同樣重要的部分。
不管是哪種類型的線框圖,都需要花費(fèi)較多的精力來(lái)創(chuàng)建,這就是線框模板的用處。以下我們整理了一些你在使用它們的時(shí)候應(yīng)該注意的一些事項(xiàng),以及它們?nèi)绾螏椭愎?jié)省時(shí)間,提高線框圖質(zhì)量并為你提供幫助,以物理形式記下你的想法。
什么是網(wǎng)站線框模板?
線框圖是網(wǎng)站設(shè)計(jì)過(guò)程中概念匯總的基本示意圖。 每種頁(yè)面類型可能都有自己的線框圖。 這些設(shè)計(jì)通常以草圖的形式開(kāi)始,最終可以演變?yōu)槟P突蛟汀?br />
網(wǎng)站線框模板是具有線框圖元素而非用戶界面組件的偽UI套件。 許多模板的名稱中都使用了“線框UI套件”,但并非完全如此。
線框模板可能適用于Sketch或Adobe XD或Photoshop。 你選擇的模板應(yīng)與你的工具和工作流程相對(duì)應(yīng)。
好的線框模板應(yīng)具有用于不同類型頁(yè)面,圖形以及形狀等元素,并且不要過(guò)于花哨。 你需要有圖像塊,文本塊,按鈕塊和畫(huà)布上的一些(臺(tái)式機(jī),移動(dòng)設(shè)備)常見(jiàn)的部件。
你不需要在線框圖階段就使它看起來(lái)像完成設(shè)計(jì)的東西。 選擇黑白線型線框。 保真度過(guò)高或包含顏色和圖像的任何事物都可能使客戶感到困惑,使他們認(rèn)為他們正在考慮實(shí)際的設(shè)計(jì)概念(再說(shuō),你一定不會(huì)想在線框圖階段就考慮這些東西)。
使用線框模板的5個(gè)原因
它可能是設(shè)計(jì)過(guò)程中的絕佳工具。 模板只是加快了一切。
· 線框模板可以節(jié)省時(shí)間,幫助你以新穎的方式快速構(gòu)思你的想法。
· 線框可幫助你及早發(fā)現(xiàn)設(shè)計(jì)缺陷和可用性問(wèn)題。
· 線框模板可幫助你考慮不同類型的頁(yè)面和頁(yè)面元素,因此你不會(huì)遺漏任何東西。
· 線框?yàn)樵O(shè)計(jì)奠定了堅(jiān)實(shí)的基礎(chǔ)。
· 從長(zhǎng)遠(yuǎn)來(lái)看,線框模板可以幫助你節(jié)省費(fèi)用,可以幫助客戶理解設(shè)計(jì)而無(wú)需投資完整的模型。
如何使用線框模板?
大多數(shù)線框模板的工作原理類似于UI套件,其中包含可以在所選軟件中移動(dòng)的元素。
確切用法取決于你具體使用的工具。
大多數(shù)線框模板都帶有通常結(jié)構(gòu)良好的頁(yè)面,因此你只需對(duì)項(xiàng)目的總體布局進(jìn)行簡(jiǎn)單的更改即可。
我傾向于那些可以使用拖放功能的選項(xiàng)。 Photoshop圖層文件也很好,就像我所說(shuō)的,這主要取決于個(gè)人喜好和工作流程。
有效使用線框模板的關(guān)鍵是選擇能夠反映你的工作流程,支持你要使用的軟件并在整個(gè)過(guò)程中始終堅(jiān)持不懈的工作。 許多工具可讓你將線框開(kāi)發(fā)并發(fā)展為高保真模型。 如果這是計(jì)劃的工作流程的一部分,請(qǐng)相應(yīng)地選擇一個(gè)模板。
如何獲取線框模板?
在使用網(wǎng)站線框模板時(shí),有兩種選擇:
· 創(chuàng)建屬于你自己的;
· 下載預(yù)制模板。
第一個(gè)可能是最具自定義的解決方案,但可能會(huì)很耗時(shí)。
后者提供了多種不同的模板類型,并提供免費(fèi)和高級(jí)選項(xiàng)供你選擇。
具體選擇哪個(gè)選項(xiàng)可能取決于時(shí)間,以及需要多長(zhǎng)時(shí)間才能使用模板。 使用預(yù)制模板通常是快速入門。 最困難的部分可能是你需要對(duì)搜索中的所有可用的內(nèi)容進(jìn)行選擇,以找到正確的。
5種你可以嘗試的線框模板
準(zhǔn)備開(kāi)始使用網(wǎng)站線框模板了嗎? 你可以通過(guò)以下五個(gè)不同的模板來(lái)測(cè)試,以了解將其用于項(xiàng)目的感覺(jué)。
1.Clean UI Kit for Rough Sketching
這種極簡(jiǎn)類型的線框模板包含有可互換的零件,這些零件具有近似草圖的樣式,可用于快速設(shè)計(jì)。
2.Flow iOS Wireframe Kit
此Sketch線框模板是應(yīng)用程序或移動(dòng)網(wǎng)站設(shè)計(jì)概念的良好入門。 線框元素簡(jiǎn)單實(shí)用。
3.Wirey Wireframe Kit
Wirey包括Photoshop和Sketch模板,為你提供了一些線框圖的靈活性。 該模板包含200多個(gè)組件和1,000個(gè)元素,因此你所需的一切幾乎都在這里。
4.Responsive Wireframe Kit
用于Figma and Sketch的線框模板,旨在幫助你從早期的線框制作一直到原型制作。 它包括大量的塊和模板,適用于臺(tái)式機(jī),移動(dòng)設(shè)備和平板電腦,以幫助你專注于響應(yīng)式思維過(guò)程。
5.UX Workflow Wireframe and Sitemap Creator
該線框模板包含了可供選擇的頁(yè)面和站點(diǎn)選項(xiàng)。 如果你需要一些入門幫助,則這樣的模板可以幫助你從一開(kāi)始就計(jì)劃你的整個(gè)項(xiàng)目。
總結(jié)
網(wǎng)站線框模板是可以簡(jiǎn)化設(shè)計(jì)的快捷方式之一。
你可以在選擇直接在紙上畫(huà)草圖,但這不是為客戶準(zhǔn)備的。 因此,你最好使用模板將亂七八糟的東西轉(zhuǎn)換為看起來(lái)很漂亮的東西。 模板使此操作變得更快,更容易,并且使我不喜歡做的事情更易于管理。
如果你還沒(méi)有嘗試使用線框模板,出于這個(gè)原因,我強(qiáng)烈建議你嘗試它。 抓住上面的示例之一,甚至考慮創(chuàng)建自己可以使用和重用的示例。