l

2013年7月8日 星期一

定義很重要

July 05 13:26~14:32

image

定義是溝通的橋樑。

***

前幾天寫了《設計的定義》這一篇,今天早上在讀《UX for Lean Startups》這本書,讀著、讀著突然想到兩個有趣的故事。

故事一:互動設計

某個在設計領域工作的朋友有一天找Teddy談合作開課的事情…

朋友:我們想要以「App互動設計」為主題,規劃一個課程,其中包含design thinking與Scrum敏捷開發流程,想請你來負責規劃Scrum流程的課程內容。

Teddy:喔,好啊,沒問題…嗯…等一下,請問什麼叫做互動設計?

此時Teddy看到朋友臉色一變,心中似乎在想:「這是什麼爛問題,互動設計就是互動設計啊」。

朋友:嗯,這麼說好了。設計的作品,可以分為單純觀賞或使用,例如畫作或椅子,使用者不會跟這些作品「互動」。人坐在椅子上面,椅子不會有反應。如果今天我們設計一把椅子,當人坐下去的時候,椅子會發出:「太胖了,該減肥了喔」這樣的對話,那麼這種設計就算是「互動設計」。

Teddy:喔…這樣子啊。如果是一個App軟體或網頁上面的按鈕,使用者按了按鈕之後,軟體會有反應(廢話挑眉質疑),這樣算是「互動設計」嗎?

朋友:嗯…啊…喔…這樣也算啦。

Teddy:那…基本上軟體只要有使用者介面,都可以算是一種「互動設計」。也就是說,App軟體大部分應該都是屬於有使用者介面的軟體,那麼課程主題加上「互動」兩個字,感覺有點…多餘。

朋友內心獨白:你住海邊啊…管那麼寬。

朋友:如果只用「App設計」,學員可能會認為這是談「軟體開發設計」的課程。用「App互動設計」就很清楚談的是「互動設計」的課程。

Teddy內心獨白:那為什麼不叫做「App介面設計」或「App互動介面設計」不是更清楚…

Teddy:喔,這樣子我明白了挑眉質疑

***

故事二:Wireframe

有一陣子Teddy突然發現,在好幾個不同的場合中,不斷地聽到「wireframe」這個字。印象中Teddy以前沒聽過這個字,但好像幾乎每一位所謂的「(介面)設計師」都知道而且經常使用這個字。

從對話的情境中,Teddy發現有些人口中的wireframe是指隨手塗鴉的介面設計,可能是單一畫面,也可能是多個連串的操作畫面。有些人則是把一個軟體操作流程的一連串介面(假畫面)稱作wireframe。雖然Teddy心中對於wireframe的定義一直存在著疑惑,但為了 怕丟臉 不耽誤大家的時間,一直把這個問題放在心中。

有一次Teddy跟某個設計師朋友在聊天,從朋友口中不斷地「發射出」wireframe這個字,Teddy終於受不了開口問了這個問題:

Teddy:請問什麼是wireframe?

此時Teddy看到這位朋友臉色一變,心中似乎在想:「這是什麼爛問題,wireframe就是wireframe啊」。

朋友:嗯,這個…wireframe就是軟體介面設計和串起來的流程。

Teddy:那…prototype或是我們常說的「假畫面」算是wireframe嗎?

朋友:這個…wireframe和prototype應該是不一樣的東西…如此如此,這般這般…。

[三分鐘過後]

Teddy內心獨白:完全聽不懂差別在那裏。

Teddy:喔,這樣子我明白了挑眉質疑

***

剛剛在《UX for Lean Startups》這本書中,看到一個關於wireframe定義的說法,那就是:

There is no definitive consensus as to what exactly a wireframe is.

翻成白話文就是說,每個人的心中,都有 一座斷背山 一個wireframe的定義。

作者自己認為,wireframe應該包含畫面的詳細設計與操作流程,但尚未對此畫面進行視覺設計。從這角度來看,prototype或是假畫面算不算wireframe?嗯,那要看你的prototype有多麼真,或是假畫面有多麼的假了。挑眉質疑

***

結論就是,這些「設計師」朋友們,應該快被Teddy提問的這些白目問題給煩死了吧。

***

友藏內心獨白:古人有云,「知之為知之,不知為不知,是知也。」

8 則留言:

  1. prototype比較像是最後產品會出來的樣子,比較貼近實際產物,wireframe通常是用在討論階段,可能是用手繪,或用軟體拉出大概的流程畫面,目的在跟User討論流程或設計概念,因此wireframe的畫面通常比較粗糙。通常專案初期會使用wireframe跟User討論,如果使用Prototype,要小心User跟你討論太多關於"細節"上的問題(例如字大一點,圖片靠右一點...),如果喜歡用Prototype也沒有說不行,看個人手法跟專案狀況。至於有沒有一定要區分Wireframe或Prototype,個人覺得那只是個過程,重點在"討論、溝通"這件事情而已

    回覆刪除
  2. 學長遇到的這兩位朋友都很 nice ,還會解釋幾句。

    我遇到的,則是問他一句,就直接回我說「算了算了,不說了」,就轉身走人了 ‧‧‧

    回覆刪除
    回覆
    1. 你朋友的耐心有待加強啊 XD。

      刪除
  3. wireframe比較像是分鏡稿,分鏡稿其實也沒有什麼非要畫多細膩的定義,有的漫畫家分鏡稿畫比較細膩(嫌時間太多了或是比較菜鳥),有的漫畫家分鏡稿只畫火柴人。

    回覆刪除
  4. 我也不確定...也滿含糊...列出以下自己的"猜測與假定"來與大家交流討教一下...:

    "Wireframe" 是不是之於建築中的 "藍圖"
    ─告訴即將要設計內容/開發的人員,我希望要有那些元素("主畫面、次畫面、功能清單區、按鈕" 之於 "辦公室、會議室、廁所、馬桶)、這些元素的位置在哪裡、元素跟元素之間的相對大小大概是什麼("主畫面跟功能清單之間的比例" 之於 "辦公室跟廁所之間的大小")、每個元素的特別額外說明("按鈕的材質要呈現玻璃的透明感與些微的霧狀感覺" 之於 "馬桶要用#303的不銹鋼材質")...等等


    "Prototype" 是不是之於建築中的 "3D展示模型"
    ─接近原型了,告訴即將設計內容/開發的人員,實際完成後,我希望長成像這樣子,因為有時候軟體開發人員沒辦法靠簡單線條構成的Wireframe去想像實際產品會長怎樣。(感覺有點像是要去剪頭髮,你拿一張劉德華的髮型給設計師看,我要大概剪成這樣...就是怕設計師剪不到像那樣吧...雖然最後好像都剪得像劉的華那樣...(誤..別理我...



    "Final Product" 之於 "最終蓋好的建築物"


    --
    為了怕碰到標準高的朋友...我補上以雪梨歌劇院的建築物來當範例...:

    "Wireframe"


    "Prototype"


    "Final Product"

    回覆刪除
    回覆
    1. 下次如果有機會參加設計師的活動,一定要好好問一下他們心目中對於 wirefram 的定義 XD。

      刪除
  5. ^上面那一篇看起來好複雜...再補一次...^

    "Wireframe" 是不是之於建築中的 "藍圖"
    ─告訴設計內容/開發人員,希望呈現哪些元素,而這些元素大概長什麼樣子。

    1.總共有哪些元素:"主畫面、次畫面、功能清單區、按鈕" 之於 "辦公室、會議室、廁所、馬桶)
    2.元素跟元素之間的大小:"主畫面跟功能清單的相對大小" 之於 "辦公室跟廁所之間的相對大小"
    3.特定元素的額外補充:"按鈕的材質要呈現玻璃的透明感..." 之於 "馬桶要用#303的不銹鋼材質"...)
    4.呈現元素的位置
    [圖例]https://lh5.googleusercontent.com/-gpmH-bMfgIU/Ux25Ah9YO1I/AAAAAAAAADo/NV4cEBc5T5A/w958-h819-no/2014-3-10+%25E4%25B8%258B%25E5%258D%2588+08-18-06.png

    "Prototype" 是不是之於建築中的 "3D展示模型"
    ─已快接近原型,讓設計內容/開發人員知道實際完成後,我希望長成什麼樣子。因為有時候開發人員沒辦法靠簡單線條構成的Wireframe去想像實際產品會長怎樣。(感覺有點像是要去剪頭髮,你拿一張劉德華的髮型給設計師看,我要大概剪成這樣...就是怕設計師剪不到像那樣吧...雖然最後好像都剪得像劉的華那樣...(誤..別理我...
    [圖例]http://image.zcool.com.cn/2009/10/56/2/1254384951827.jpg

    "Final Product" 之於 "最終蓋好的建築物"
    [圖例]http://ext.pimg.tw/love88yes/5068f6d484736016d3e4832bd7f5be77.jpg

    --
    P.S.
    上面的"Final Product"其實不是真正由"Prototype"發展過來的...而是我隨便找比較相似的圖來當作範例...
    以下補上真正的圖...以雪梨歌劇院作範例...:

    "Wireframe"
    http://www.flickr.com/photos/state-records-nsw/5373921522/sizes/o/in/photostream/

    "Prototype"
    http://www.3dcadbrowser.com/th/1/5/5119.jpg

    "Final Product"
    http://faultytowers.net/wp-content/uploads/2013/04/Sydney_opera_house.jpg

    回覆刪除