林外2014-05-15 23:46:29

原型一般做到清晰表達設計思想和細節的程度就夠。

事實上，互動設計的產出不會直接成為產品的一部分。它更像是個中間產品，所以過度強調交付件的質量和細節不可取。

互動設計應該更多關注是否把設計思想和細節表達清晰，而不是花大量的時間用蹩腳的原型工具做蹩腳的動畫和某些明顯可以用一兩句話表明的頁面。適當少寫些文件，多和視覺、開發方面溝通。

丁辰2014-05-16 20:54:01

先自豪的說一句：瀉藥！

作為一個偽處女座PM，對互動的理解肯定沒有專業的互動同學牛逼，各位盡情噴。對於原型這塊兒，我認為低保真、高保真大家理解各有側重，並沒有嚴格的區別標準。一般來看，“低保真原型”是指用Axure、Visio、Omnigraffle這類軟體繪製的由素色線框、區塊構成的產品基本佈局、功能的示意圖。“高保真原型“則相對豐滿，約等於UI視覺稿。

雖然是低保真，在表達清楚產品原型的同時，依然應注重形式，儘量消除原型中的資訊噪音，讓跟你配合的同學看的清楚，做到邏輯上清晰、視覺上乾淨。比如，你的“低保真”可以做成下面這個樣子：

當然，稍微進化一下，也可以做成這樣（請忽略那個下拉重新整理，這裡我想表達的僅是介面）：

貌似我不知不覺跑題了。來，咱回來說互動設計師的原型。

互動設計中，其中最要緊要解決的問題是要回答使用者在操作事件觸發後，檢視中的介面是如果響應的，這其中包括介面如何過渡、元素響應事件各過程的狀態、資料如何載入到介面中……。這一切都是動態的，單純的靜態圖片、說明文字往往詞不達意。當然，不閒麻煩，你可以這樣：

不過這時候，藉助Axure的

動態面板

，完成後生成html的互動原型，可以讓使用者自己去體驗，你可以這樣（這個是點選效果的截圖，你可以新介面入場的方式、速度、半透遮罩的變化效果。。。）：

所謂一圖勝千言，在互動設計原型裡，“一動勝千言”啊。

。

。

。

。

。

。

。

。

什麼！你以為到這裡就結束了？有追求的互動設計師怎麼會忍受Axure等業餘互動軟體超低的fps、僵硬有限的運動速度。。。AE？Flash？僅僅輸出個gif動圖、影片，連手動點點嘗試意淫下都不行，你好意思說？（不準吐槽說我黑Flash不能做互動，透過ActionScript寫指令碼確實可以，關鍵你會寫程式碼麼？！）

是時候祭出互動效果大殺器了，在時間充裕的情況下，在Axure不能表達你互動想法的情況下，使用 “Apple 出品，必屬精品”的

Quartz Composer

輸出互動成品那真是“效果又好、逼格高樂高”啊！

Quartz Composer是條不歸路，入行需謹慎。

最後丟幾個相關資源，少俠你看看：

Quartz Composer 如何入門？

Origami - Design prototyping with Quartz Composer

我是小摩2016-11-14 19:19:30

個人認為，原型圖就是起個表達想法的東西，沒必要浪費時間做高保真的，去mockplus官網看看，有很多demo的

墨刀2020-04-01 16:14:37

誠（沒人）邀，原型需要做到什麼保真度？

還是要根據原型設計的目的、設計完整性和可用資源來選擇原型的保真度

。

首先，什麼是“原型”？

它最基本的含義：

原型是設計想法的表達

。原型讓設計師們得以展現他們的設計，以及模擬真實的使用場景。在數字化的背景下，原型能夠模擬使用者與介面之間的最終互動行為。根據產品團隊的需求，原型可以模擬整個app或僅單個互動行為。原型可以模擬最終產品的運作方式。它支援產品團隊測試其設計的可用性和可行性。也有很多人將原型與草圖，線框圖和模型混淆，實際上它們不同於原型。

“互動性”這個概念是原型的根本

，因此這就是為什麼草圖，線框圖和模型不能被視為“原型”的理由。

圖片來自Unsplash 基於CC0協議

那麼為什麼我們需要原型呢？

做原型主要是為了在做實際產品之前測試設計（和產品創意）。

是否進行測試與產品的成功直接相關

。 不用想，當產品在市場上上市，人們開始使用它時，你的設計將被使用者測試。如果這是首次測試，則很有可能會有來自使用者的負面反饋。因此，在低風險的研究階段和公開發布之前收集產品反饋，總是更好。

以下是需要原型的兩種情況：

確保設計理念按預期進行

。 在大多數情況下，讓實際使用者測試產品概念是相對容易的。一旦使用者拿到一個可以互動的產品原型，產品團隊就能夠看到目標受眾是如何使用該產品。 根據這些反饋，可以調整初始理念。

確定使用者能夠順利地使用產品

。 原型的必要性是在產品釋出前發現和解決可行性問題。它能測試出產品需要改進的地方。 這也是之所以那麼多產品團隊建立原型，讓使用者測試它們，並迭代設計直到它足夠好的原因。

在說低保真和高保真原型之前，我想說一說

什麼是“保真度”

？

原型不一定要看起來像最終產品——它們可以有不同保真度。 原型的保真度指的是它如何傳達最終產品的外觀（也就是指它的細節和真實感級別）。

保真度可以在以下方面有所不同：

視覺設計

內容

互動性

原型的型別有很多，基本介於這兩種型別之間。

低保真

高保真

產品團隊根據原型設計的目的、設計完整性和可用資源來選擇原型的保真度。

原型透過墨刀製作

低保真原型

低保真（lo-fi）原型設計是將高階設計概念轉換為有形的、可測試物的簡便快捷方法。它首要的也是最重要的作用是——檢查和測試產品功能，而不是產品的視覺外觀。

以下是低保真原型的基本特徵：

視覺設計

：僅呈現最終產品的一部分視覺屬性（例如元素的形狀，基本視覺層次等）。

內容

：僅包含內容的關鍵元素。

互動性

：原型可以由真人模擬。 在測試期間，熟悉頁面流程的設計師就相當於一個“計算機”，實時手動呈現設計頁面。此外，也可以給線框圖製作互動效果，這種稱為“互動線框圖”。

優點

便宜

。 低保真原型製作的明顯優勢在於其極低的成本。

快速

。 可以在五到十分鐘內建立一個低保真紙原型。 讓產品團隊可以毫不費力地探索不同的想法。

協作

。 這種原型設計刺激了小組協作。它的設計不需要什麼特殊技能，因此更多人可以參與到設計過程。 即使是非設計師也可以在創意過程中發揮積極作用。

清晰

。 團隊成員和利益相關者對將來的專案有了更清晰的期望

缺點

測試期間的不確定性

。 使用低保真原型，對於測試者來說，容易不清楚到底什麼本來是有效的，什麼不是。另外，低保真原型需要使用者充分的想象力，也限制了使用者測試的效果。

有限的互動性

。 使用這種型別的原型想要傳達複雜的動畫或轉場效果是不可能的。

熱門技術：

紙製原型和可點選的線框是兩種流行的低保真原型製作技術。它們都致力於以最快的迭代設計思路，直到專案團隊和利益相關者都對產品的基礎模型感到滿意為止。

原型透過墨刀製作

高保真 （Hi-fi） 原型

高保真 （Hi-fi） 原型的呈現和功能，

儘可能類似於釋出的實際產品

。 當團隊能深入瞭解產品的預期，需要與真實使用者一起測試，或獲得利益相關者的最終設計批准時，通常會建立高保真原型。

高保真原型的基本特徵包括：

視覺設計

：逼真細緻的設計 – 所有介面元素、間距和圖形看起來就像一個真正的app或網站。

內容

：設計人員使用真實或類似於真實內容。原型包括最終設計中顯示的大部分或全部內容。

互動性

：原型在互動層面非常逼真。

優點

可用性測試期間獲取有意義的反饋

。對於使用者來說，高保真原型通常看起來像真正的產品。這意味著，在可用性測試會話中，測試參與者將更有可能自然地表現——就好像他們正在與真實產品互動一樣。

對特定 UI 元素或互動的測試

。藉助高保真互動性，可以測試平面元素，或特定互動， 比如動畫過渡和微互動。

輕鬆獲得客戶和利益相關者的認同

。這種型別的原型也適合向利益相關者演示。它使客戶和潛在投資者清楚地瞭解產品應該如何工作。一個優秀的高保真原型讓人們對你的設計感到興奮，但低保真的原型則不然。

缺點

成本較高

。 與低保真原型相比，建立高保真原型意味著更高的時間成本和財務成本。

熱門技術

使用專業軟體建立的數字原型。。

數字原型是最常見的高保真原型形式。如今，各種專業軟體使設計人員能夠建立充滿互動效果和複雜動畫的視覺豐富、功能強大的原型。

使用這類工具的好處包括：

為不同裝置最佳化。

專業化的軟體允許設計人員在 Web 瀏覽器或任何桌面或移動裝置上預覽原型。這有助於 UX 和 UI 設計人員在不同型別的裝置上實現最佳佈局。

可用性測試期間少做解釋

。高保真互動性使設計人員不必在測試過程中澄清概念，從而使設計人員能夠專注於觀察。

結論

如果提供良好的使用者體驗是專案的目標（而且應該是），

那麼原型設計必須是UX設計過程的一部分

。根據產品需求，選擇最有效的原型設計方法至關重要，因為這種方法可以最大限度地減少工作，最大限度地提高學習效率。 最終結果將是基於原型測試的整體改進設計。

好文推薦：

產品經理必學的畫原型，究竟是什麼？

每個網際網路創業者應該瞭解的：10項早期做產品的原則

UX設計師注意啦，我們找到了高效製作產品原型的7個技巧

墨刀作為一款線上原型設計與協同工具，已經幫助眾多產品經理和設計師們輕鬆做出互動原型，展現和驗證設計想法，還支援多人協作編輯，分享和評論。新註冊使用者即可獲得墨刀高階企業版的15天免費試用！開始體驗一下吧！

小鹿2021-08-05 19:06:20

這個問題並沒有明確的答案，但有一個優秀的互動設計師都應當遵守的原則：

在時間等客觀條件允許的情況下，原型的設計應儘可能地精細。

當然這背後可能需要使用者體驗、心理學、程式設計等知識儲備，這也是我建議大家在平時的時候應當去做的事。

有些朋友會問，那如果我也能把 UI 設計、視覺設計做的特別好了，還要視覺設計師做什麼？我做完分內的事情去娛樂不爽嗎？

我只能說，小了，格局小了。首先產互動設計師的工作作為產品設計鏈路中極其重要得一環，本來就要對各個鏈路環節有足夠的瞭解，才能更好地推進設計方案；另外，網際網路行業發展的很快，十多年前被爭著搶著要的 UI 設計師、網頁美工，現在已經成為了有些公司被最佳化掉的首選，過分地強調自己的職責邊界，無異於畫地為牢。

我在這裡介紹原型圖的表現形式、不同精細程度的原型圖分類，結合一些可能的情景並提出部分建議，供你參考。

1。 原型設計的表現形式

手繪單圖（sketch）：關注概念的呈現以及主要功能。

2D 平面（wireframe）：功能導向的簡要設計。

3D 立體（mockup）：實現功能目標的產品最終的視覺樣式。

動態效果（prototype）：同時具備視覺設計以及實際的產品功能。

2。低、中、高保真原型的對比

低保真

優點：快、便宜、低技能，利用你周圍可利用的材料。

缺點：互動上的限制，很難去測試全流程的細節，給使用者的上下文很少。

用途：探索和測試最初始的概念，例如使用者主流程、資訊框架；可以製作很多版本，進行多次測試對比。

中保真

優點：更多互動，易於測試，是時間和質量的平衡。

缺點：更花時間，但不是全部功能。

用途：可以被測試更具體的功能和流程，使用者有更多上下文。

高保真

優點：完整的設計，包括視覺、內容、互動，可以測試很細節的互動。

缺點：非常花時間，需要軟體 或者程式設計技能，很難測試大的概念。

用途：可以被測試非常具體的互動細節，最終的使用者流程。

這裡我將它整理成一個表格，方便大家查閱：

3。 原型圖的應用場景 & 物件

需求描述

在這個應用場景下，你面臨的物件以開發者、測試為主。開發者通常最關心的是有多少功能，功能複雜程度什麼樣，邊界條件是什麼，異常情況怎麼處理等。

測試則關心產品需求使用者，輔助他們寫測試用例，以及是否窮盡考慮到各個場景。

設計協作

在這個應用場景下，你面臨的物件以設計師為主。設計師通常關心元素之間的關係，排版與佈局。

客戶展示

向客戶展示，也包括領導等角色，他們通常最關心功能整體的流程、原型的易讀性，以及價值體現。

當然，作為互動設計師，畫原型圖只是一項基礎的能力，這個崗位的價值更體現在一個設計師的專業素養以及職場軟實力上。但是，由於互動設計在國內還是一個較新的專業，現在的從業者也鮮少有科班出身的，大部分設計師還是自學成才，有些想要入行的同學苦於找不到學習的渠道。

其實，在業內互動設計師這個崗位已經沉澱出來一些系統的方法論了，我們也在大力的傳播，希望能幫助到更多的人。

小鹿把知群的產品設計訓練營推薦給想轉行或想要提升的你。除了知識的輸入，知群還為大家提供實戰演練和內推機會，目前訓練營限時免費，歡迎點選：

限時免費課：設計師 0 基礎入門及進階課程