為什麼畫線框圖前應該先畫草圖?

你曾經有一個網頁或應用程序設計概念嗎?構想新的設計概念是很容易的,不過最困難的部分就是知道如何把這個概念製作出來,這就是草圖 (Sketching) 派上用場的時候。有很多創意和建築行業都會涉及草圖,就連達芬奇 (Leonardo Da Vinci) 都會先用草圖畫出他的發明,然後才開始建造它們。無論你是多麼聰明,你沒有可能將在你腦袋裡的設計概念,沒有搞清楚細節,就能夠把它立即製作出來。首先你需要搞清楚你的概念才製作它,這就是所有設計師必要做的事。

每一個概念都需要用戶界面翻譯

用戶界面 (User Interface 或 UI) 設計是一個過程,一切都是由一個概念開始的,不過這個概念需要用戶界面翻譯。僅僅說「我要一個應用程序能夠做到X、Y、Z。」是不夠的,你還需要知道用戶做X、Y、Z的時候,他們在應用程序每一個屏幕上會看到什麼,使用草圖就可以幫助你考慮那些界面的用戶體驗 (User Experience)。雖然你已經知道你想你的應用程序能夠做什麼東西,但草圖可以幫助到你決定你的應用程序會如何帶領用戶到他們想要的結果。草圖亦可以協助你想像到用戶使用時的畫面流程 (Flow),令你虛構出來的概念能夠清晰地呈現出來。

草圖不是線框圖

有很多設計師誤以為草圖是線框圖 (Wireframe),儘管他們很相似,它們是不同的東西。兩者都是用來表達界面的概念給其他人,但線框圖和草圖卻各用在不同的媒介中,而且它們在設計過程裡各有不同的用途。

當你畫草圖時,你其實是在試圖明白你的界面會如何運作。去實現一個界面的概念其實有很多方法的,不過,你目前是在試圖找出哪種方法以及哪種方式是最適合你。 通常快而粗糙的概念是用紙和筆畫出來的,在使用這個方法時,用戶界面的具體細節是並不重要,最重要的是搞清楚如何讓用戶在每個屏幕上看到的能夠帶領他們到他們想要的結果。

當你畫線框圖時,你其實是在試圖進一步改進你的應用程序的概念,利用像素化的灰度 (Grayscale) 界面工具集 (Widgets)。這種媒介迫你關注更高層的細節,所有元素的大小、位置和順序需要全部考慮清楚,這樣你就可以更精確地設計用戶界面的運作方式。當你畫 完線框圖後,你的界面概念應該會變得更清晰和詳細。

畫線框圖前應該先畫草圖

大多數的設計師已經有他們自己的設計步驟,有些可能不畫草圖就直接開始畫線框圖,有些可能不畫線框圖就直接開始做視覺稿 (Mockup)。不過請記住,當你忽略了設計過程中任何一個步驟,你就會失去了很多概念裡的細節,原因是你的界面太早進入了下一個階段,因此一些關鍵要素被忽略或沒有做到足夠改進。畫線框圖前先畫草圖

在這種情況下,你一是會在畫線框圖時構造你的概念,一是就在做視覺稿時改進它。這是適得其反的,因為畫草圖是為了構造概念而做,畫線框圖是為了改進該概念而做,而視覺稿是為了設計視覺圖形和內容。當你忽略了畫草圖或畫線框圖,你將會有太多東西需要在同一個階段裡考慮。這不僅令設計師很難應付,而且它使概念沒有得到充分地開發出來。

協助你與客戶一起構想出新的設計概念

草圖其中最大的優點是,它可以讓你快速地表達自己的概念給其他人,允許其他人與你一起​​設計用戶界面。無論你是在白板上或紙上的畫草圖,你的客戶或其他小 組成員了解到界面的基本概念是最重要,這樣他們就能夠提供必要的界面內容給你。此外,​​設計的時候記下他們所提出的反饋或新的概念,你的界面就不會缺少任何東西。你還可以讓客戶把他們自己的概念畫出來,讓所有人都有一至的共識,這樣如此大家就會具有高昂的士氣和清晰的理解繼續前進。

草圖加快你的思考和工作速度

如果你沒有基本的界面概念就畫線框圖,這種設計方法是非常困難的,因為你畫的速度無法追不上你的思考速度。當你在概思界面的設計時,你需要考慮不同的用戶體驗設計,你有可能會立刻構想出很多不同的設計概念,在那時候,用電腦去畫是不夠用紙和筆快的。畫草圖讓你快速地嘗試不同的設計選擇,這樣就可以找出向哪方 面設計是最好的。構想界面概念之前畫線框圖亦能夠使之後的設計過程變得更快、更容易完成。畫線框圖時同一時間去構想多個設計概念是很困難的,原因是那時你 正在用軟件去設計界面,概念不能夠快速地畫出來,限制了你的思想速度和靈活性。

草圖讓你的線框圖更詳細

假如你畫線框圖時已經有一個基本的界面概念在腦海中,你之後就不需要再研究怎樣設計是最好的。去達到所希望的用戶體驗總是有很多種方法去做的,不過如果你一早就畫好了草圖,當你畫線框圖時你會有更多時間去改進你已經有的界面概念,而花更少時間去決定界面會是怎麼樣的。有了更詳細和精緻的線框圖後,你就能夠在視覺稿階段裡更專注界面的圖形和內容上。

畫得差的草圖仍是很有用的

畫草圖不需要有像達芬奇的藝術能力才做到,畫得差的草圖仍然是非常很有價值的。畫草圖時最緊要的不是你的繪圖能力,而是你能不能表達到你的概念出來,讓其他人很容易地明白到你的界面設計。由於草圖是非常容易更改的,與其他人合作設計時去調整它是一件輕而易舉的事。草圖不像視覺稿需要畫得那樣好看,沒有任何技術設計能力的人都可以去畫,這樣客戶和其他小組成員都可以一起參與設計,這就可以在設計開始的階段帶來很多有價值的新概念。

能更好地畫草圖的工具

大多數設計師通常會在白板或白紙上畫草圖,不過問題是,一張白紙沒有手機、平板電腦、或網絡瀏覽器的圖樣,這導致畫草圖時,設計師會忘記界面用的平台 (Platform) 的限制。另一個問題是,沒有任何引導線的情況下在一張紙上白手畫多條直線是不容易的。還有,要所有不同屏幕的界面元素有一致的大小比例也是很困難的。

界面圖紙 (Interface Papers) 是可以印出來的界面藍圖紙,它是用來解決這個草圖問題。它有手機、平板電腦和網絡瀏覽器的圖案,讓你在不同的平台上畫出你的界面。那些圖案都是印在網格上,這不僅可以讓你能夠很容易地畫直線,而且當你畫不同的屏幕時,它還可以幫助你保持界面元素的比例和大小一致。

不要小看草圖的力量

草圖是為接下來的設計過程建立一個堅固的基礎,它對設計和討論用戶體驗來說是非常重要的。你可能會認為你不需要草圖因為你已經知道你想要的用戶界面是怎麼樣的。不過,當你真正地畫草圖出來時,你就會發覺到你其實還有很多其他選擇的。並且,你初時想出來的概念有可能不是最好的設計。草圖讓你嘗試不同的界面設計,利用哪一個就由你決定。

【原文】
http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s