iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 4
0
自我挑戰組

我是ikea 但還不會設計傢俱系列 第 4

004 淺談介面設計工具

工具是用來解決問題的!所有的產品、作品、工具、服務都是時下的產物。以UI設計來說,現在進入快速迭代設計的型態,跟幾年前的設計流程以及需求有大大的不同。 不過因為我涉入設計工作實戰不超過五年,所以我也不知道以前怎麼樣

同時我也認為,這套方法不會是永遠,當世界變了,流程變了,工具也會變得不適用(如果沒有更新),那麼我們就應該找更好的方式作業。

先講總結,一套UI設計的工作需要哪些工具跟方法、還有需要跟誰搭配

  1. 界定需求與行為流程 : 客戶、工程師
  2. 列舉需要的互動物件 : 注意規範
  3. 組起來變成wireframe : 工程師要做的出來
  4. 細部設計 作圖
  5. 切圖與標示 : 工程師要看的懂
  6. 檔案交付工程師 : 檔案要能用

我剛開始接網頁切版案件的時候都是收平面設計師的photoshop檔案,然後自己整理圖層群組,自己匯出成瀏覽器讀得懂的jpg,png檔案。然後再用元件檢視或是右鍵看css屬性。(這根本不對啊!有一半是設計師的工作啊)

Photoshop雖然沒有sketch神,但是操作上比illustrator順暢些,illustrator是一直到近幾代(幾到哪我不知道)才有選擇群組匯出的功能,而且不能像photoshop一樣選群組裡面的群組...一定要獨立在外面的群組。

我目前的工作方式是:

  • 以sketch為主,搭配我自己用inVision Craft做的規範套件資料庫元件
  • illustrator製作比較複雜的向量圖示或是插圖素材
  • photoshop修照片,或是最後用它來作表現圖Mockup
  • 然後再利用sketch export到zeplin (不用寫文件!撒花~)

互動流程則依據不同程度的需求使用inVision, flinto, framer來做,全部都可以直接從sketch匯圖!(我真的愛死sketch)

聽起來很可怕,整個過程用了一大堆軟體,設計跟藝術一樣工具成本很高。想想,如果是水彩畫家,不同的技法效果細節,要用不同的顏料,不同軟硬粗細的筆,還有不同吸水特性很粗細紋路的紙....要多少錢?(聽說有一支筆要上萬der)(所以大家拜託不要覺得隨便畫,畫很快就可以很便宜....這是要練多少功)

我認為不同的任務就應該由最適合的工具來處理

尤其是,在執行的時候需要高度的專注度,一個太多功的工具介面絕對相對複雜肥大(雖然萬惡Adobe很努力做這件事)。

那協作呢?大家都用不同工具怎麼辦?

就像上一篇說述,id網站任務的夥伴們用的是其他工具,該怎麼辦?

還有我明年度開始要在好想工作室培訓設計人員,我該規定工具嗎?

像我這樣使用方式很限定,一定要用sketch,而且sketch只有在mac平台上執行。不管是mac, sketch都是要付費的東西。自身的觀念認為不應該去規定別人怎麼辦,能作業最重要,那我該怎麼辦呢?

結論是:

id網站任務的夥伴們,要把圖切好給我,因為他們做圖,他們把素材整理好是最快的,而我要講清楚要切成什麼樣子,給我色票色碼,我就不用在一堆搞不清楚的圖層群組畫板間迷路。

我的學員,必須要跟我使用一樣的工具,或是你有本事遇到問題自己解決,可以讓工程師無痛開發,你也有效率地用另一個方法達到一樣的效果(時間,正確性,溝通順暢,設計品質)。而且如果你用我不會的工具,出了技術問題我無法協助,所以要有本事,不過都是學員了...有本事也不用跟我學惹XD (雖然我會親自示範訪談技巧&設計方法的心法)。


上一篇
003 id網站任務急趕工
下一篇
005 設計教育該怎麼辦?
系列文
我是ikea 但還不會設計傢俱9
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
小花
iT邦新手 4 級 ‧ 2016-12-31 21:12:00

請問一下,sketch要如何網站切版為html呢

我要留言

立即登入留言