Mockup
將視覺設計模擬轉換為實品的"圖"
下面範例：
補充實用Mockup模組下載：
1. https://www.graphicpear.com/mockups/
2. http://freedesignresources.net/category/free-mockups/
線框稿 (Wireframe)
線框稿是一個低擬真度來呈現產品設計的表示法，在開發流程中使用它目的有以下三點:
- 呈現產品頁面上主要的資訊
- 呈現資訊在頁面上的排版與架構
- 可視覺化，便於描述使用者如何與產品互動
互動式線框稿 (或稱可點擊式線框稿 Clickable Wireframe)
有時候，設計師希望提高線框稿的擬真度、強調介面設計的某些部分或讓使用者更快理解以利進行測試，設計師會快速的製作可互動的線框稿，也就是可點擊式線框稿。
初次與關係人或客戶介紹設計時，互動式線框稿將會是相當有用的。當這些人問說按下這個按鈕會發生甚麼事情?提報者可以在互動式線框稿上馬上操作，讓他們看到結果。這樣的方式肯定可以讓他們印象深刻並快速進入操作的情境中。
補充實用工具：
製作wireframe的PS外掛
製作wireframe的PS外掛
原型 (Prototype)
原型與線框稿不同的地方在於，原型是屬於中到高度擬真來呈現最終使用者介面的方法。運用原型的目的即是模擬使用者與介面之間的互動，例如說按鈕按下後會出現的操作方式與呈現等。簡單來說，就是模擬一個產品完整的體驗。
原型的視覺要素與特質
就視覺設計而言，原型比線框稿更加的接近於最終產品的樣貌。原型雖然看起來像最終的產品，但它不具有可運作的要素 (例如程式碼與數據庫等)。在原型表達上應該有下列要素:基本的色調可先被設定、關鍵的內容需被呈現、資訊架構應該被建立與互動的效果與方式。
使用原型的好處
為什麼在開發流程中使用原型這個工具非常重要?因為原型通常會對真實的使用者進行測試，來挖掘產品的問題。如此一來，就可以在前期提早發現問題並修正，節省許多後期修改的時間與成本。對設計與開發團隊而言，它絕對是一個相當棒的驗證工具。此外，讓使用者在原型上進行一些必要的任務往往可以得到讓團隊驚訝的洞見。
原型不需要藉由編碼的方式來產出，現在有許多良好的工具可以幫助設計師以快速且低成本的方式製作，作者推薦了一些好用的工具 UXPin, Proto.io, Balsamiq, Moqups, Mockingbird, Axure, Protoshare, InvisionApp。原型經過使用者測試後，設計師可將產品的設計做精準的修改，而不需要浪費開發團隊的時間與精力。
沒有留言:
張貼留言