當我們在設計中有了想法，想要以某種方式將我們的設計概念表達出來時，我們就可以用到原型制作的方法。原型設計不僅是為了表達概念和想法，更是為了設計的迭代和評估。
原型是指根據不同解決方案制作的具體產品，供小組成員之間或設計小組與客戶和用戶一起開發測試設計概念。
我們在制作原型的時候，最重要的目的是將想法和概念展示出來，所以什么樣的形式并不重要。我們會在不斷的迭代設計中，尋找并且設計出最適合的模型供最后的方案展示和落地。設計要快，迭代也要快。這里講的迭代要快主要針對的就是原型設計。
MIT的Media Lab有一句非常流行的“Demo or die”，這里的Demo指的也是原型，大家可以發現在設計領域中，原型設計非常重要。
原型設計是和他人溝通的有效工具，例如產品經理、技術開發、用研團隊等。原型設計可以幫助設計師和團隊清楚地知道界面之間的跳轉邏，還有后期進行的用戶測試，也在很大程度上依賴于設計原型。我們要注意的是：設計迭代的流程中設計、原型、評估測試不是一個線性的流程，而是反復的過程。原型設計粗略分成三個迭代的過程，分別為低保真模型、中保真模型、高保真模型。Low Fidelity通常是一些看起來比較粗糙的，比如畫的草圖、用紙模擬的、沒有顏色的，越接近前期的概念越低保真。High Fidelity是需要還原出設計的界面最終的樣子，越接近最終的產品就越高保真。
第一步，迭代是使用線稿、草圖，紙質的流程圖線框圖。第二步，我們可以進入中保的，有UI設計過的，加入了顏色、字體、排版的可點擊可交互的迭代原型。第三步，大體的流程都結束之后加入更多的細節、動效。
低保真原型圖常見的我們有兩種形式：一是手繪，用簡單的線框和文字表示原型中的內容；二是用簡單的灰色模塊表示需要填充的內容。下面的四個模板就是我們在制作低保真原型時可能用到的內容。非常清晰地劃分了內容的區塊，并且簡單易懂。
我們在制作手繪的原型時，可以下載一些手機的框架圖，然后在內部填充內容。如下圖所示，給每個界面都畫上部件按鈕，在旁邊對界面進行標注，以幫助后期進行修改和迭代設計。下面這個案例更加方便，每張便簽代表一個界面，然后繪制出內容。還可以隨時移動便簽的位置，方便調整其中的流程和邏輯順序。我們也可以以上兩種方法的結合，將手機界面框裁剪下來，然后放到每個界面中去，進行比對和模擬測試。一個初步的原型設計就是幫助設計師首先將想法全部成列出來，通過低保真原型設計，將關鍵的界面和必備的功能展現出來，這些原型設計就是幫助設計師呈現想法、對比、初步評估和輔助迭代設計的必要步驟。中間階段其實就是一個迭代的過程，原型設計是需要不斷發現問題并改進的過程。而不同階段的原型就是為了幫助設計師，更好的發現問題，不斷地完善自己的作品。中保真圖是線框圖和草圖的數字化版本，應具有基本的功能性，但不包含任何設計美感或圖形。這些是使用FIma等應用程序或其他類似工具生成的。
在此階段的過程中，設計已經產生了各種各樣的方案，并開始了簡化階段。通過中保真圖，我們可以刪除所有無效的想法，并完善列表中的最佳想法。此過程將配合測試，在整個設計階段中重復進行。
在高保真設計中，大多數必要的設計資源和組件都已經開發和集成了，原型通常由HTML / CSS和JavaScript組成。我們可以去組件庫挑選使用即可，不需要從頭設計。
高保真原型可以用于測試，也可以用于展示最終的效果，高保真原型就是接近產品的模型，通常包含UI Design、Illustration、Motion Design。Illustration小插畫一般用在產品的登陸界面，歡迎頁面等，有時導覽界面也都會有一些小插圖。Motion Design是數字視頻或動畫的一部分，它產生運動或旋轉的錯覺，并通常結合錄音在多媒體項目中使用。也會有專門的團隊負責視覺的設計，包括設計button、icon等。除了這些平面設計和動畫設計，界面還有一些動效設計也越來越成為交互設計的重點，目的是為了營造更好的用戶體驗。下面這個原型設計中的動效就非常有互動感。
我們在做原型設計的時候，最常用的就是Figma，以前用的是Photoshop和Illustrator，但由于它們都是為過去的平面設計所開發的工具，在UI設計方面的效率并不是那么高，而Figma非常輕量，非?？旖荨?/span>UXD給大家準備了Figma的基礎課，幫助0基礎的同學學習如何使用Figma更加快速便捷地設計出原型。更多詳細信息可以查看
UXD課程官網：
https://video.uxd001.com/index
下面，用一個簡單的教程幫助大家快速上手，如何在figma中建立簡單的原型并進行虛擬運行。
本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請
點擊舉報。
