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

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

Wireframe=>Mockup=>原型

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

線框圖

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

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

好處

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

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

方法

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

草圖

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

平面設(shè)計軟件

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

演示軟件

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

設(shè)計軟件

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

什么是模型?

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

好處

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

方法

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

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

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

平面設(shè)計軟件

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

編碼模型

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

一個原型是什么?

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

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

好處

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

方法

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

紙上原型

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

演示軟件

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

編碼的原型

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

設(shè)計工具

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

混合和匹配

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

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

結(jié)論

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

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

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

廣告

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