實體模型(mockup)和線框(wireframe)的區別

線框和實體模型都是整個設計過程的基本元素，為網站或應用程式的外觀和感覺奠定了基礎，代表了網站或應用程式的專案目標和願景。模型是產品的視覺表現，而線框是產品的藍圖，它勾勒出產品的結構，而沒有真實產品的所有細節。下麵是兩個如何融入網頁設計過程，以及它們之間的區別。...

線框和實體模型都是整個設計過程的基本元素，為網站或應用程式的外觀和感覺奠定了基礎，代表了網站或應用程式的專案目標和願景。模型是產品的視覺表現，而線框是產品的藍圖，它勾勒出產品的結構，而沒有真實產品的所有細節。下麵是兩個如何融入網頁設計過程，以及它們之間的區別。

什麼是線框(wireframe)？

線框只不過是你的網站或移動應用的框架，它為你的專案指明瞭方向。它是終端使用者介面的示意圖，概述了產品的功能、特性和內容。線框是非常重要的，如果不是必要的。有時需要為客戶開發線框，有時不需要。線框基本上是一個低保真度的網頁設計原型，關註總體佈局、內容層次結構和功能。線框可以由線、框和純文字組成，也可以使用特定軟體（如Microsoft Visio）進行電子繪製。線框是一個真正的結構檔案沒有所有的視覺混亂意味著沒有顏色，紋理，影象或動畫。線框的一大優點是，可以快速建立和修改線框，而無需額外的**和口哨聲，最終形成最終的設計。

什麼是實體模型(mockup)？

模型是視覺設計的靜態呈現，將用於產品展示和其他目的。基於線框的結構，實體模型是從基本佈局向上的一個步驟，旨在開發具有非互動視覺元素的初步設計。因此，實體模型是一種中等逼真度的設計表現，包括字型、文字、顏色、影象、徽標和其他視覺元素，這些元素將進一步塑造線框。模型最能代表網站或應用程式的專案目標和願景。使用站點地圖作為基礎，線框作為指南，您可以建立一個獨特的、引人註目的、包含站點所有元素的模型。實體模型是為了在您實際開始構建網頁之前，為您的客戶機提供最終產品的外觀和功能的視覺化表示。然後，模型成為最終的藍圖，設計師和客戶在交流專案細節時都可以參考。

實體模型和線框的區別

實體模型和線框的含義

–線框和實體模型都是最終產品以及其外觀和功能的靜態表示。這裡的Static意味著它們都是以一種不允許使用者像最終產品那樣與元素互動的格式呈現的。線框是一個低保真度的網頁設計原型，主要關註總體佈局、內容層次結構和功能，為您的專案提供方向。另一方面，實體模型是線框階段的一個進步，是設計的一個中等逼真度的表現，它給出了網站或應用程式完成後的基本外觀。

結構

–線框是網站的樹形圖或流程圖，概述了網站的功能、特點和內容。這是一個真正的結構檔案沒有所有的視覺混亂意味著沒有顏色，紋理，影象或動畫。線框可以是由線條、方框和純文字組成的手繪，也可以是使用特定軟體（如Microsoft Visio）建立的電子圖形。另一方面，實體模型是實際設計的靜態呈現，包括字型、文字、顏色、影象、徽標和其他視覺元素，這些元素將進一步塑造線框。

目標

–簡單地說，線框是設計介面的二維圖形，主要關註總體佈局、內容層次結構和功能。它用於定義和規劃頁面或螢幕上的資訊層次結構，或者換句話說，頁面中的專案應該如何組織，哪些內容放在哪裡，以及有哪些功能可用。模型是用於產品展示或其他目的的全尺寸設計模型。它是一種展示你的設計在現實世界中的樣子的方法。實物模型用於各種視覺設計。

工具

–線框通常被稱為網頁設計佈局的框架藍圖或輪廓，它表示沒有所有完成元素的每個頁面的基本佈局。MicrosoftVisio和OmniGraffle是專門用於線框的最通用的工具，而一些非設計師使用PowerPoint或Keynote來準備線框。然而，最常用的線框工具是Bala**iq、Axure、UXPin、異想天開等等。專門用於移動線框的工具包括驚奇漫畫和弗林託。實體模型也有同樣的用途，所以大多數線框工具也可以用來建立實體模型，但是還有其他工具，如Bala**iq、Mockplus、Mockflow、Mockingbird等。

實體模型與線框：比較圖

總結 - 實體模型(of mockup) vs. 線框(wireframe)

簡而言之，線框是最容易建立的實體模型形式，它只不過是純文字、線、框和簡單的物件，用於顯示設計的基本佈局。線框最好的部分是，它們很容易用鉛筆和紙等基本工具來建立，而且不需要任何藝術技巧。實體模型可以有許多不同的形式，它們的基本目的是相同的——展示設計完成後的樣子。模型是最終產品的複製品，包括從藝術品到螢幕設計的一切，而線框缺乏基本的視覺元素。

發表於 2021-06-26 16:48
閱讀 ( 12 )
分類：科技

你可能感興趣的文章

關係資料庫管理系統(rdbms)和hadoop公司(hadoop)的區別

...，鍵和索引有助於連線表。表是資料元素的集合，它們是實體。它包含行和列。這些行表示表中的單個條目。列表示屬性。例如，銷售資料庫可以包含客戶和產品實體。客戶可以有客戶標識、姓名、地址、電話號碼等屬性，專...

發佈於 2020-10-18 19:15
閲讀 ( 53 )

一般化(generalization)和資料庫管理系統專業化(specialization in dbms)的區別

...管理系統中泛化與專門化的關鍵區別在於，泛化是將低階實體組合起來生成高階實體的過程，而專門化則是將高階實體劃分為低階實體的過程。每個組織都需要根據需求儲存資料。有各種型別的資料，應該有一種機制來組織它...

發佈於 2020-10-19 04:33
閲讀 ( 136 )

呃(er)和eer圖(eer diagram)的區別

...ER圖是基於ER模型的資料視覺化表示，它描述了資料庫中實體之間的關係。EER圖是基於EER模型的資料視覺化表示，它是原始實體關係（ER）模型的擴充套件。在將資料輸入資料庫之前，應設計資料庫。用ER圖設計資料庫。它基於實...

發佈於 2020-10-19 04:37
閲讀 ( 49 )

符合邏輯的(logical)和物理資料模型(physical data model)的區別

...模型是一個非常抽象和高階的資料檢視，在這裡可以識別實體、關係和鍵。它獨立於資料庫管理系統（DBMS）。物理資料模型是從邏輯資料模型派生出來的，在邏輯資料模型中，表和列是如何構成實際物理資料庫的。因此，物理...

發佈於 2020-10-27 04:55
閲讀 ( 69 )

過程(process)和線(thread)的區別

...個處理器上執行來提高，因為執行緒是一個獨立的可排程實體。多執行緒過程(process)和線(thread)的區別 •程序很難建立，因為它需要父程序的複製和記憶體分配，而執行緒則很容易建立，因為它們不需要單獨的地址空間。 •執...

發佈於 2020-10-29 12:02
閲讀 ( 50 )

連續譜(continuous spectrum)和線譜(line spectrum)的區別

...而線譜僅包含少數波長。引用 1歌詞。“6.3：線譜和波爾模型”，《化學圖書館》，圖書館，2018年7月25日。此處提供 img.centered,.aligncenter{display:block;margin:0 auto 24px}.gallery-caption,.wp-caption-text{font-size:14px;font-size:1.4rem;font-weight:6...

發佈於 2020-11-03 18:56
閲讀 ( 95 )