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

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

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

Wireframe=>Mockup=>原型

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

線框圖

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

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

好處

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

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

方法

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

草圖

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

平面設計軟件

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

演示軟件

如果你專門為演示做線框圖，你可以在PowerPoint或Keynote等軟件中進行構建?；脽羝Y構可以讓你在頁面上考慮你的設計，但是這個選項又缺乏交互性。然而，演示軟件是非常熟悉的，因為我們大多數(shù)人在某一時刻都使用過Powerpoint或Keynote。

設計軟件

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

什么是模型?

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

好處

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

方法

因為他們強調視覺效果，所以只能用幾種方式創(chuàng)建模型。

模型/原型設計軟件

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

平面設計軟件

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

編碼模型

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

一個原型是什么?

線框圖處理結構，模型處理視覺效果，原型處理可用性。

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

好處

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

方法

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

紙上原型

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

演示軟件

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

編碼的原型

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

設計工具

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

混合和匹配

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

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

結論

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

名稱欄目：網(wǎng)站設計師需知道的線框圖、模型和原型
本文網(wǎng)址：http://www.bm7419.com/news20/48220.html

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

廣告

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