網(wǎng)站設(shè)計(jì)師需知道的線框圖、模型和原型

區(qū)分設(shè)計(jì)過程的不同階段可能會(huì)引起混淆，特別是當(dāng)術(shù)語(yǔ)使用過于松散時(shí)。但是，這不是設(shè)計(jì)師不知道差異的借口。雖然這看起來似乎是無辜的，但把一個(gè)模型看成是一個(gè)線框，就像木匠把錘子當(dāng)作螺絲刀一樣。而不知道如何做一個(gè)低保真原型就像一個(gè)外科醫(yī)生不知道在哪里削減。

這些都是設(shè)計(jì)師的工具，所以應(yīng)該從內(nèi)部和外部學(xué)習(xí)。因此，如果你想學(xué)習(xí)如何創(chuàng)建網(wǎng)站模型，學(xué)習(xí)最好的線框工具或掌握快速原型，你就在正確的地方。本文將解釋基礎(chǔ)知識(shí):每個(gè)可以做什么，為什么它們有用，構(gòu)建每個(gè)方法的一些常用方法，甚至一些好實(shí)踐。我們要從他們的名字開始。使用上面的下拉菜單導(dǎo)航到您想要的頁(yè)面。

Wireframe=>Mockup=>原型

那么什么是freakin的區(qū)別呢?雖然這不是設(shè)計(jì)網(wǎng)站或應(yīng)用程序的唯一步驟，但傳統(tǒng)的設(shè)計(jì)過程遵循這三個(gè)步驟。這是一個(gè)粗略的簡(jiǎn)化，沒有考慮到中間的無數(shù)變量，但為了解釋基礎(chǔ)，這是一個(gè)很好的基礎(chǔ)。一般來說，這與忠誠(chéng)度的水平有關(guān)，通常隨著你的前進(jìn)而上升。同樣，這是一種過于簡(jiǎn)化，而不是一成不變的規(guī)則。例如，有時(shí)跳過模型和創(chuàng)建一個(gè)低保真原型是最適合你的項(xiàng)目?；蛘撸赡軙?huì)遵循設(shè)計(jì)師StevenBradley所鐘愛的流程，在此過程中，您從線框圖到模型模型，并在代碼中完成。了解到并沒有一個(gè)“好”流程(只有正確的流程)，讓我們來探索每種類型的設(shè)計(jì)是什么樣的。

線框圖

線框圖就像是你設(shè)計(jì)方案的藍(lán)圖。您可以在早期創(chuàng)建它們，通常是第一步(或者第二步，如果您更喜歡先畫草圖)，并且在團(tuán)隊(duì)迭代視覺細(xì)節(jié)之前，只花時(shí)間回答關(guān)鍵的布局、結(jié)構(gòu)和組織問題。因此，線框是低保真度。每件事都有一個(gè)時(shí)間和地點(diǎn)，視覺和技術(shù)細(xì)節(jié)應(yīng)該稍后決定，在格式和結(jié)構(gòu)固化之后。

這并不是說線框圖根本不應(yīng)該關(guān)注視覺效果――你只需要足夠的細(xì)節(jié)來顯示整體布局和元素類別所需的空間(比如側(cè)邊欄、頂部導(dǎo)航、頁(yè)腳、主要內(nèi)容等等)。正如我們?cè)凇熬€框圖”指南中所描述的，這就是為什么線框圖通常包括以正方形的形式出現(xiàn)在后面的圖形的占位符，以及隨后出現(xiàn)的圖標(biāo)的bare-bone版本。

好處

如上所述，線框圖使團(tuán)隊(duì)能夠在深入細(xì)節(jié)之前只關(guān)注“全局”的決定。線框圖的優(yōu)點(diǎn)和任何媒體的輪廓一樣:在向前移動(dòng)之前，他們給了一個(gè)適當(dāng)?shù)挠?jì)劃，減少了由于錯(cuò)過了一些東西而不得不進(jìn)行雙反的風(fēng)險(xiǎn)。另外，作為一個(gè)可交付物，線框圖可以與整個(gè)團(tuán)隊(duì)共享，以便每個(gè)人都在同一頁(yè)上。如果您使用的是專業(yè)的線框圖或原型工具，不同的團(tuán)隊(duì)成員可以對(duì)同一文檔進(jìn)行修改或評(píng)論，從而鼓勵(lì)從一開始就進(jìn)行協(xié)作。

此外，線框可以顯示給希望盡早查看結(jié)果的利益相關(guān)者，并在浪費(fèi)時(shí)間進(jìn)一步發(fā)展之前顯示潛在的編輯。

方法

由于線框圖的保真度較低，所以比起其他階段，有更多的動(dòng)手方法來建造它們。讓我們看幾個(gè)。

草圖

老式的方法。簡(jiǎn)單地把你的想法寫在紙上，不要太拘于細(xì)節(jié)。在像頭腦風(fēng)暴這樣的情況下，這對(duì)于快速的線框來說是很好的，但是這些草圖可能會(huì)給整個(gè)團(tuán)隊(duì)帶來麻煩，而且很容易被誤解。如果你喜歡有條理、有條理的草圖，我們強(qiáng)烈推薦分層的草圖。

平面設(shè)計(jì)軟件

如果使用像Photoshop或素描這樣的軟件對(duì)你來說就像在紙上作畫一樣自然，那就去吧。然而，這個(gè)選項(xiàng)要求對(duì)程序有先天的了解，并且缺乏通過一些線框應(yīng)用提供的交互的能力。

演示軟件

如果你專門為演示做線框圖，你可以在PowerPoint或Keynote等軟件中進(jìn)行構(gòu)建?；脽羝Y(jié)構(gòu)可以讓你在頁(yè)面上考慮你的設(shè)計(jì)，但是這個(gè)選項(xiàng)又缺乏交互性。然而，演示軟件是非常熟悉的，因?yàn)槲覀兇蠖鄶?shù)人在某一時(shí)刻都使用過Powerpoint或Keynote。

設(shè)計(jì)軟件

今天，軟件是專門為線框圖和其他東西而存在的，比如UXPin、Axure、Omnigraffle和Moqups。這里的優(yōu)點(diǎn)是線框圖的流線型特性，比如拖放的可用性，以及通過幾次點(diǎn)擊添加交互性是多么容易。缺點(diǎn)是有些成本比其他成本高。雖然Balsamiq是免費(fèi)的，但它缺乏Axure、Omnigraffle和UXPin的交互功能。這種方法并不重要，只要符合項(xiàng)目的需要和限制。重要的是，在你進(jìn)入更細(xì)致的階段之前，你對(duì)整個(gè)項(xiàng)目有一個(gè)可靠的想法。

什么是模型?

模型的作用是為視覺結(jié)構(gòu)設(shè)計(jì)出線框圖。它們是靜態(tài)顯示最終產(chǎn)品外觀的外觀。這為你提供了機(jī)會(huì)，讓你在色彩計(jì)劃、排版和風(fēng)格上做出重要的決定;給你一些時(shí)間做實(shí)驗(yàn)以確保你的最終選擇是最好的選擇。正如《實(shí)物模型指南》所解釋的那樣，實(shí)物模型填充了線框忽略的視覺細(xì)節(jié)，將皮膚添加到骨骼中。視乎你的時(shí)間和資源，它們可以是中等的或高保真的。

好處

雖然許多設(shè)計(jì)師認(rèn)為模型是可選的，甚至是不必要的，但我們不同意。同樣的，線框圖留出時(shí)間，在不受干擾的情況下做出基本的結(jié)構(gòu)決定，模型留出了時(shí)間來進(jìn)行視覺效果。一個(gè)更實(shí)際的優(yōu)勢(shì)是，他們的高質(zhì)量的視覺效果更容易被利益相關(guān)者接受。線框圖要求觀眾使用他們的想象力，但模型更接近最終的產(chǎn)品設(shè)計(jì)。

方法

因?yàn)樗麄儚?qiáng)調(diào)視覺效果，所以只能用幾種方式創(chuàng)建模型。

模型/原型設(shè)計(jì)軟件

就像使用線框圖一樣，一些像Axure和UXPin這樣的專業(yè)設(shè)計(jì)工具提供了一些特性，比如UI元素庫(kù)來支持mockup的高保真度。

平面設(shè)計(jì)軟件

如果你正在制作一個(gè)像素好的模型，這種軟件的效果特別好，但是也有一些缺點(diǎn)――也就是說，當(dāng)你需要編碼的時(shí)候，你的一些努力工作不會(huì)準(zhǔn)確的翻譯出來。另外，一些工具如InVision、Marvel和UXPin也集成了Photoshop和Sketch，使其更容易從mockup過渡到prototype。

編碼模型

如果您能熟練地使用代碼，那么最好在最后的語(yǔ)言中構(gòu)建您的模型。這繞過了以后必須重新設(shè)計(jì)一些不可移植設(shè)計(jì)的問題。當(dāng)然，您必須問自己的問題是，您是否可以在一個(gè)小時(shí)的代碼和一個(gè)設(shè)計(jì)工具中探索更多的設(shè)計(jì)。有了結(jié)構(gòu)和可視的選擇，您就可以深入研究原型的meatier階段了。

一個(gè)原型是什么?

線框圖處理結(jié)構(gòu)，模型處理視覺效果，原型處理可用性。

原型是第一階段，你可以與你的創(chuàng)造互動(dòng)，哪怕只是一點(diǎn)點(diǎn)。原型使您能夠探索UI，確定哪些元素最有效，并在問題成為問題之前預(yù)測(cè)可用性問題。

好處

當(dāng)其他人認(rèn)為線框圖和模型沒有必要時(shí)(我們不是，我們不能同意更多)，沒有人建議在沒有原型的情況下繼續(xù)前進(jìn)。原型對(duì)于每一個(gè)將產(chǎn)品發(fā)布到野外的項(xiàng)目都是至關(guān)重要的。如果不首先與用戶進(jìn)行原型設(shè)計(jì)和測(cè)試，那么您就是在乞求失敗。原型設(shè)計(jì)最明顯的好處之一是可用性研究。一個(gè)可行的原型為用戶測(cè)試打開了方便之門，這一數(shù)據(jù)揭示了需要工作的可用性問題和目標(biāo)用戶的偏好。簡(jiǎn)而言之，使用原型的用戶測(cè)試告訴您，您的設(shè)計(jì)是否在正確的軌道上，如果沒有，則需要哪些更改才能到達(dá)那里。

方法

作為設(shè)計(jì)過程中的一個(gè)關(guān)鍵階段，原型設(shè)計(jì)在設(shè)計(jì)師個(gè)人偏好的基礎(chǔ)上產(chǎn)生了許多不同的變化和策略。

紙上原型

這種“草圖”等同于原型，這種非數(shù)字化的方法涉及到紙上畫的頁(yè)面，通常是人類充當(dāng)“計(jì)算機(jī)”，根據(jù)用戶的選擇來切換紙張。雖然快速簡(jiǎn)單的制作，這個(gè)粗糙的原型需要很多用戶的想象力，限制了它的結(jié)果。

演示軟件

通過將不同的頁(yè)面鏈接起來，你可以在PowerPoint和Keynote等軟件中創(chuàng)建一個(gè)非?；镜脑汀Ｍ瑯?，這些都是快速且容易做的，但是成本是有限的交互性。

編碼的原型

就像編碼模型一樣，這節(jié)省了最后階段的時(shí)間。不過，主要的缺點(diǎn)是，你的編碼流暢性是否那么好。

設(shè)計(jì)工具

再一次，專門設(shè)計(jì)的應(yīng)用程序配備了所有你需要的工具，在一個(gè)有利于這個(gè)目的的界面。你甚至可以在添加交互性時(shí)選擇，有創(chuàng)意的交互式線框圖，也就是低保真原型(我們將在下面討論)。更多信息請(qǐng)查看我們的好原型工具列表。你的原型通常是粗糙的，但最終會(huì)比最終產(chǎn)品低一層。交互(特別是在后期設(shè)計(jì)階段)越細(xì)化，在正式發(fā)布的時(shí)候效果就越好。

混合和匹配

一開始，我們說我們只會(huì)介紹線框圖、模型和原型的基本輪廓。他們?cè)谠O(shè)計(jì)中的實(shí)際角色并不是那么容易解釋，而且會(huì)根據(jù)設(shè)計(jì)者的心血來潮而變化。一些人完全忽略了實(shí)物模型。另一些人則迅速在紙上畫線框圖，然后再跳進(jìn)更高級(jí)的選項(xiàng)。

一個(gè)流行的變化是在早期創(chuàng)建低保真原型。這很適合于快速原型方法，它的目標(biāo)是快速創(chuàng)建和測(cè)試多個(gè)原型，并將數(shù)據(jù)重復(fù)到下一個(gè)版本中。雖然快速原型設(shè)計(jì)大致是關(guān)于設(shè)計(jì)的，但是這個(gè)過程受用戶輸入的影響很大，這意味著最終你會(huì)得到一個(gè)更精細(xì)的最終產(chǎn)品。

結(jié)論

我們希望你能從中得到的主要一點(diǎn)是，在了解每個(gè)階段的優(yōu)勢(shì)以及它是如何融入整個(gè)過程的過程中，你能夠以最適合你的方式定制這個(gè)過程。如果你在設(shè)計(jì)一個(gè)詳細(xì)的圖形時(shí)發(fā)現(xiàn)你做出了最好的結(jié)構(gòu)決定，那么試著從一個(gè)模型開始。如果您的項(xiàng)目有很多技術(shù)上的復(fù)雜性(可能來自高級(jí)交互或動(dòng)畫)，請(qǐng)盡早嘗試原型來解決它們。在這個(gè)過程中，唯一錯(cuò)誤的順序是與項(xiàng)目需求相反的順序。但是不管這個(gè)項(xiàng)目有什么需要，有一件事是肯定的:一個(gè)知道如何最好地使用錘子的木匠將能夠制造任何類型的家具。

分享名稱：網(wǎng)站設(shè)計(jì)師需知道的線框圖、模型和原型
新聞來源：http://www.bm7419.com/news/48220.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)