你瞭解線框圖、原型以及視覺稿它們之間有何不同嗎?在Marcin Treder的文章裡頭,詳細的說明了其不同點何在。

來,讓我們繼續看下去。

本文翻譯自:Wireframing, Prototyping, Mockuping – What’s the Difference?

 

我很高興,歡迎你們來到第一堂線上課程【線框圖及創意設計】。我希望你們覺得學到的東西是有用且有趣的。這些內容將使你之後的工作容易許多。

我是Marcin Treder,目前擔任UXPin(一個用戶經驗設計應用的網站)的CEO。而且我也是一個經驗豐富的用戶經驗體驗設計的團隊經理。

在這一系列,共七篇的文章當中,我會討論在大部分創意設計文檔當中,線框圖方法的細節。我會告訴你,在我的實務經驗當中,一些能夠幫助我的提示與技巧。我衷心的希望你能避免掉一些麻煩的錯誤。

文章的內容非常實用,希望只是一點點的設計理念以及很多來自現實生活的故事。

所有設計專案案的例子,都在UXPin建置,首次的用戶體驗設計應用程序。

可以註冊免費的UXPin(14天試用期),動手一起跟我做吧!

線框圖、原型、視覺稿 ,它們之間有何不同呢?

兩三年前,我用了很多資工的人才,而非設計師的朋友們。他們總是將我交付的設計,給搞砸。在他們的眼中,總是認為線框圖、原型、視覺稿都是完全一樣的東西 ─── 一種勾勒了初始主意的灰色方塊。

這個問題源自於他們單一的視角,他們從來不知道用戶體驗設計師的工作是在幹麻?他們往往對此感到困惑。「到底為什麼不能點擊?」、「好吧,我不瞭解,我原本是點擊這裡的 ……」── 這些抱怨,常常是UXPin所負責設計的項目。

分不清線框圖及原型,就像是你分不清楚建築藍圖及展示屋。這是差不多的事情。

雖然你可以嘗試住進展示屋,你卻不能指望你住在舒適的建築藍圖裏頭,它只是一張紙而已。

展示屋與建築藍圖是在傳播不同的訊息的。

– 建築藍圖,是在傳遞建築計畫,並指示該如何建設。
– 展示屋,是在驅使人們購買房子的利器。

就如同上述,線框圖、原型、視覺稿,它們看起來不同,是為了傳達不同的東西,達到不同的目的。

一個展示屋與建築藍圖,他們的確都有一個共同點 ── 代表著最後蓋好的那棟房子。同樣的,線框圖、原型、視覺稿它們最終也代表著,最終產品的網站設計。

不管你相信與否,我試著去教導我用戶體驗設計的成員,線框圖、原型、視覺稿,它們之間的差異總是在第一件事情。

對! 它非常的重要!

讓我們來詳細解釋一下,線框圖、原型、視覺稿它們會在什麼樣的情況下面使用。

 

線框圖(WIREFRAME)

 

1. 什麼是線框圖呢?

線框圖在一個網站設計裡頭,屬於初步的原稿。它應該清楚的表明:

– 內容的大綱 (What?)
– 訊息的結構 (Where?)
– 描述最基本的使用者介面 (How?)

線框圖不僅僅只是毫無意義的灰色框框;好吧,雖然它看起來就是這樣。它是你設計的骨幹,並記住一件事,每一個線框圖都代表著最終產品的每一個重要區塊。

「Representation」在這裡是一個重要的術語,這將有助於你找到適切的保真度 – 線框圖能幫助你在逼真度與速度間取得平衡。你不用描繪太多的細節,另一方面,你需要創造一個紮實的表現方式,他不會遺漏任何重要的訊息,在你的最終網站之上。你點燃了一盞明燈,引領了整個設計專案以及與你工作的同事(開發商、視覺設計師、文案作者、專案經理,他們全部都需要一個良好的線框圖,來引領他們日後工作的方向。)事實上,你就像是在繪製一張地圖。每一條線都代表著一條街道,但它簡化了它。你在看地圖時,可以看出這個城市大致的建築方向,卻無法感受到這個城市美麗的地方

你應該快速的建立一個線框圖,剩下的時間應該都拿來與團隊成員溝通 ……以及思考。單純建立一個線框圖,應該是非常迅速的。

在視覺上應該要是漂亮的,但線框圖卻大大的簡化了它。僅僅用黑、灰、白三種典型的顏色,來代表它(你可以在連結的地方,添加藍色)。

如果你需要花太多的時間來準備它(如選擇icon、上傳圖片等),線框圖代表著一種簡化的方式(如使用預留位置、一個畫X的圖片,在加上適合的文字來描述它。)我們傾向稱呼線框圖為低保真設計圖(Lo-fi)。

記住!一個好的線框圖,能像一顆晶瑩剔透的水晶一樣,令人一目了然。清楚的表達整個設計,並且為團隊成員建立一個溝通的管道。

2. 什麼時候該使用線框圖呢?

線框圖通常被用來最為專案的說明,因為在互動界面上來說,它們是靜態的。通常都應該附有說明文字(從簡說明,當需要複雜的技術文檔時,試著去解釋它如何互動)。

由於它們繪製起來較快速和簡單。所以它們也可能被使用在非正式的場合當中,像是團隊內部的溝通。如果開發商問起該如何做時,你也可以快速的繪製一個線框圖為他解惑。

線框圖很難當做測試的資料,雖然它們在初始收集回饋、研究的時候是有幫助的,但是就只能快速的收集意見。

將線框圖放置在整個設計的故事背景中,更是意外的有效果,在複雜專案的初始階段,更是不可缺少的。

 

原型(PROTOTYPE)

1.什麼是原型呢?

原型,經常與線框圖混淆。原型與最終網頁比較起來,它是一種中保真度的設計圖。原型用來模擬使用者介面,它允許使用者:

– 在使用介面上,去體驗內容與互動。
– 就如同最終的網頁一般,它可以測試主要的互動介面。

原型應該要與最終網頁相似,就算它不可能完全一樣的,但也要相差不遠(絕對不是一塊灰色的線框),互動應該要與最終的網頁為藍本。為了要降低成本、加速開發週期,使用者介面與後台之間的互動通常是被忽略的。

2.什麼時候該使用原型呢?

原型通常用於做潛在客戶的測試。在正式開發之前,用以模擬最後網站互動的型式。

原型通常不是最好的文檔,因為他迫使「閱讀者」花費心力去理解內容。另一方面,介面直接、明瞭的原型設計,是最吸引人的一種型式。

要注意一件事,原型是一種相當昂貴且費時的設計溝通。我建議可以再開發階段,建立一個可重複使用的原型 (沒錯,你可能得要親自編寫HTML、CSS) 。對於簡單的專案來說,相當好用。

若做的好,且結合用戶測試,原型將會是物超所值的。

 

視覺稿(MOCKUP)

 

1. 什麼是視覺稿呢?

視覺稿是一種高保真的設計圖。通常一個視覺稿,是你視覺設計的草圖或是終稿。一個良好的視覺稿應該要有:

– 表達資訊框架、具象的內容,並以一個靜態的方式展示基本的功能。
– 說明團隊成員,以視覺的角度審查專案。

由於某些軟體公司的名字,視覺稿常與線框圖混淆。

2. 什麼時候該使用視覺稿?

如果你想獲得業主的認可,視覺稿是一項非常有用的利器。由於他們是視覺的性質,視覺稿保真度較高,且比原型更容易建立。他們易於蒐集回饋,如果放在整個設計之中,絕對會是非常精彩的。

總結

 

 

該如何開始呢?

 

在你設計過程中,選擇何種溝通的方式,你需要:

– 瞭解你正試圖解決的問題。
– 瞭解你的目標族群。
– 瞭解你的競爭對手在這方面做了什麼。
– 設置總體產品的要求。

這是一個最低的要求,現在思考溝通方式是最適合你的。考慮你產品及設計團隊。怎樣工作你最方便?正式或非正式的討論?面談?你有時間及金錢來搜尋固定客群,或是你只是去咖啡館坐坐,畫幾個手繪草圖而已?

你擁有什麼樣的技能?

審視一下你自己、你的團隊以及你的專案,要引領你選擇最好的方式。

當然,你也可以所有事情都做 …… 在很多情況下,你通常都會做!別害怕採取這一個步驟。它們都是非常得當的,可以使你完成更完美的設計。

線框圖(Wireframe)

  • Tags: mockup, prototype, Wireframe, 原型, 線框圖, 視覺稿
  • 參考資料:
  • http://designmodo.com/wireframing-prototyping-mockuping/
查看更多  35個精緻的IOS ICON 圖標設計賞

Leave a Reply