區分設計過程的不同階段可能會引起混淆，特別是當術語使用過于松散時。但是，這不是設計師不知道差異的借口。雖然這看起來似乎是無辜的，但把一個模型看成是一個線框，就像木匠把錘子當作螺絲刀一樣。而不知道如何做一個低保真原型就像一個外科醫生不知道在哪里削減。
這些都是設計師的工具，所以應該從內部和外部學習。因此，如果你想學習如何創建網站模型，學習最好的線框工具或掌握快速原型，你就在正確的地方。本文將解釋基礎知識:每個可以做什么，為什么它們有用，構建每個方法的一些常用方法，甚至一些最佳實踐。我們要從他們的名字開始。使用上面的下拉菜單導航到您想要的頁面。
Wireframe=>Mockup=>原型
那么什么是freakin的區別呢?雖然這不是設計網站或應用程序的唯一步驟，但傳統的設計過程遵循這三個步驟。這是一個粗略的簡化，沒有考慮到中間的無數變量，但為了解釋基礎，這是一個很好的基礎。一般來說，這與忠誠度的水平有關，通常隨著你的前進而上升。同樣，這是一種過于簡化，而不是一成不變的規則。例如，有時跳過模型和創建一個低保真原型是最適合你的項目。或者，您可能會遵循設計師StevenBradley所鐘愛的流程，在此過程中，您從線框圖到模型模型，并在代碼中完成。了解到并沒有一個“最佳”流程(只有正確的流程)，讓我們來探索每種類型的設計是什么樣的。
線框圖
線框圖就像是你設計方案的藍圖。您可以在早期創建它們，通常是第一步(或者第二步，如果您更喜歡先畫草圖)，并且在團隊迭代視覺細節之前，只花時間回答關鍵的布局、結構和組織問題。因此，線框是低保真度。每件事都有一個時間和地點，視覺和技術細節應該稍后決定，在格式和結構固化之后。
這并不是說線框圖根本不應該關注視覺效果——你只需要足夠的細節來顯示整體布局和元素類別所需的空間(比如側邊欄、頂部導航、頁腳、主要內容等等)。正如我們在“線框圖”指南中所描述的，這就是為什么線框圖通常包括以正方形的形式出現在后面的圖形的占位符，以及隨后出現的圖標的bare-bone版本。
好處
如上所述，線框圖使團隊能夠在深入細節之前只關注“全局”的決定。線框圖的優點和任何媒體的輪廓一樣:在向前移動之前，他們給了一個適當的計劃，減少了由于錯過了一些東西而不得不進行雙反的風險。另外，作為一個可交付物，線框圖可以與整個團隊共享，以便每個人都在同一頁上。如果您使用的是專業的線框圖或原型工具，不同的團隊成員可以對同一文檔進行修改或評論，從而鼓勵從一開始就進行協作。
此外，線框可以顯示給希望盡早查看結果的利益相關者，并在浪費時間進一步發展之前顯示潛在的編輯。
方法
由于線框圖的保真度較低，所以比起其他階段，有更多的動手方法來建造它們。讓我們看幾個。
草圖
老式的方法。簡單地把你的想法寫在紙上，不要太拘于細節。在像頭腦風暴這樣的情況下，這對于快速的線框來說是很好的，但是這些草圖可能會給整個團隊帶來麻煩，而且很容易被誤解。如果你喜歡有條理、有條理的草圖，我們強烈推薦分層的草圖。
平面設計軟件
如果使用像Photoshop或素描這樣的軟件對你來說就像在紙上作畫一樣自然，那就去吧。然而，這個選項要求對程序有先天的了解，并且缺乏通過一些線框應用提供的交互的能力。
演示軟件
如果你專門為演示做線框圖，你可以在PowerPoint或Keynote等軟件中進行構建。幻燈片結構可以讓你在頁面上考慮你的設計，但是這個選項又缺乏交互性。然而，演示軟件是非常熟悉的，因為我們大多數人在某一時刻都使用過Powerpoint或Keynote。
設計軟件
今天，軟件是專門為線框圖和其他東西而存在的，比如UXPin、Axure、Omnigraffle和Moqups。這里的優點是線框圖的流線型特性，比如拖放的可用性，以及通過幾次點擊添加交互性是多么容易。缺點是有些成本比其他成本高。雖然Balsamiq是免費的，但它缺乏Axure、Omnigraffle和UXPin的交互功能。這種方法并不重要，只要符合項目的需要和限制。重要的是，在你進入更細致的階段之前，你對整個項目有一個可靠的想法。
什么是模型?
模型的作用是為視覺結構設計出線框圖。它們是靜態顯示最終產品外觀的外觀。這為你提供了機會，讓你在色彩計劃、排版和風格上做出重要的決定;給你一些時間做實驗以確保你的最終選擇是最好的選擇。正如《實物模型指南》所解釋的那樣，實物模型填充了線框忽略的視覺細節，將皮膚添加到骨骼中。視乎你的時間和資源，它們可以是中等的或高保真的。
好處
雖然許多設計師認為模型是可選的，甚至是不必要的，但我們不同意。同樣的，線框圖留出時間，在不受干擾的情況下做出基本的結構決定，模型留出了時間來進行視覺效果。一個更實際的優勢是，他們的高質量的視覺效果更容易被利益相關者接受。線框圖要求觀眾使用他們的想象力，但模型更接近最終的產品設計。
方法
因為他們強調視覺效果，所以只能用幾種方式創建模型。
模型/原型設計軟件
就像使用線框圖一樣，一些像Axure和UXPin這樣的專業設計工具提供了一些特性，比如UI元素庫來支持mockup的高保真度。
平面設計軟件
如果你正在制作一個像素完美的模型，這種軟件的效果特別好，但是也有一些缺點——也就是說，當你需要編碼的時候，你的一些努力工作不會準確的翻譯出來。另外，一些工具如InVision、Marvel和UXPin也集成了Photoshop和Sketch，使其更容易從mockup過渡到prototype。
編碼模型
如果您能熟練地使用代碼，那么最好在最后的語言中構建您的模型。這繞過了以后必須重新設計一些不可移植設計的問題。當然，您必須問自己的問題是，您是否可以在一個小時的代碼和一個設計工具中探索更多的設計。有了結構和可視的選擇，您就可以深入研究原型的meatier階段了。
一個原型是什么?
線框圖處理結構，模型處理視覺效果，原型處理可用性。
原型是第一階段，你可以與你的創造互動，哪怕只是一點點。原型使您能夠探索UI，確定哪些元素最有效，并在問題成為問題之前預測可用性問題。
好處
當其他人認為線框圖和模型沒有必要時(我們不是，我們不能同意更多)，沒有人建議在沒有原型的情況下繼續前進。原型對于每一個將產品發布到野外的項目都是至關重要的。如果不首先與用戶進行原型設計和測試，那么您就是在乞求失敗。原型設計最明顯的好處之一是可用性研究。一個可行的原型為用戶測試打開了方便之門，這一數據揭示了需要工作的可用性問題和目標用戶的偏好。簡而言之，使用原型的用戶測試告訴您，您的設計是否在正確的軌道上，如果沒有，則需要哪些更改才能到達那里。
方法
作為設計過程中的一個關鍵階段，原型設計在設計師個人偏好的基礎上產生了許多不同的變化和策略。
紙上原型
這種“草圖”等同于原型，這種非數字化的方法涉及到紙上畫的頁面，通常是人類充當“計算機”，根據用戶的選擇來切換紙張。雖然快速簡單的制作，這個粗糙的原型需要很多用戶的想象力，限制了它的結果。
演示軟件
通過將不同的頁面鏈接起來，你可以在PowerPoint和Keynote等軟件中創建一個非常基本的原型。同樣，這些都是快速且容易做的，但是成本是有限的交互性。
編碼的原型
就像編碼模型一樣，這節省了最后階段的時間。不過，主要的缺點是，你的編碼流暢性是否那么好。
設計工具
再一次，專門設計的應用程序配備了所有你需要的工具，在一個有利于這個目的的界面。你甚至可以在添加交互性時選擇，有創意的交互式線框圖，也就是低保真原型(我們將在下面討論)。更多信息請查看我們的最佳原型工具列表。你的原型通常是粗糙的，但最終會比最終產品低一層。交互(特別是在后期設計階段)越細化，在正式發布的時候效果就越好。
混合和匹配
一開始，我們說我們只會介紹線框圖、模型和原型的基本輪廓。他們在設計中的實際角色并不是那么容易解釋，而且會根據設計者的心血來潮而變化。一些人完全忽略了實物模型。另一些人則迅速在紙上畫線框圖，然后再跳進更高級的選項。
一個流行的變化是在早期創建低保真原型。這很適合于快速原型方法，它的目標是快速創建和測試多個原型，并將數據重復到下一個版本中。雖然快速原型設計大致是關于設計的，但是這個過程受用戶輸入的影響很大，這意味著最終你會得到一個更精細的最終產品。
結論
我們希望你能從中得到的主要一點是，在了解每個階段的優勢以及它是如何融入整個過程的過程中，你能夠以最適合你的方式定制這個過程。如果你在設計一個詳細的圖形時發現你做出了最好的結構決定，那么試著從一個模型開始。如果您的項目有很多技術上的復雜性(可能來自高級交互或動畫)，請盡早嘗試原型來解決它們。在這個過程中，唯一錯誤的順序是與項目需求相反的順序。但是不管這個項目有什么需要，有一件事是肯定的:一個知道如何最好地使用錘子的木匠將能夠制造任何類型的家具。
1096576.jpg)
