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

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

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

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

草圖不是線框圖

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

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

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

畫線框圖前應該先畫草圖

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