八個用ILLUSTRATOR作界面設計的理由

pic0

這邊說的界面設計,主要針對visual design的部分做分享
就是俗稱的GUI(Graphic user interface)。

一般會運用Photoshop(Ps)或Illustrator(Ai)來製作,兩款繪圖軟體都可以完成
我個人偏好用Ai,本來覺得應該差異不大,直到最近一個案子客戶指定要Ps,才發現用Ai真的很有效率。
就來說一下我喜歡Ai的八個理由:

外觀視窗

我很依賴外觀視窗,它清楚說明物件的樣式。
pic1

儲存繪圖樣式

Ai可以將樣式儲存起來,當其他物件需要時直接套用,收工下班!!
pic2

圓角效果參數化

針對節點做圓角效果,一個節點就有一個圓角,套用之後隨時可以修改
作法是選取物件後,從下拉選單:效果 > 風格化 > 圓角…

雖然只是一個小功能,但卻節省了很多工作時間,因為UI元件太常用到圓角了!!
想像一下,當你完成一個包含20個圓角的畫面給主管
主管說:我覺得太可愛了,圓角小一點
如果用Ps做,應該會立馬石化給他看…
在Ai,只要選取全部圓角物件,從外觀視窗修改參數,現場馬上確認。
pic3-2

對齊關鍵物件

就是讓一堆物件,指定一個要對齊的物件,愛對那就對那。
pic4
選取要對齊的所有物件,接著點選關鍵物件,關鍵物件會以粗框標示。

直覺的漸層編輯

以前調整漸層需要發揮想像力來來回回調整,現在可以在物件上直接調整
pic5

一次編輯多個物件尺寸

相對於Ps,這變成一個優點
以列表畫面為例,每一行的尺寸必須一致
如果複製了很多行之後要調整尺寸,同ㄧ個動作作20次很容易讓人腦神經衰弱。

在Ai只要選取節點,用方向鍵依序調整即可。
雖然還不是非常方便,但也節省了一些時間,如果可以輸入數值自動排列就好了XD
pic6

多重工作區域

一個Ai檔案可以有多個工作區域,在一個工作區域放置一個畫面有2個好處:

每個工作區域的座標都是獨立的,個人超愛這個設計
當一個元件使用用在多個畫面時,只要複製貼上就完成了。
所有畫面一次輸出成獨立圖檔,無論給其他同仁review或是放在裝置中感受設計都很方便。
pic7
在工作區域一複製title bar, 在工作區域二”貼至上層”

連結檔案

針對共用元件的製作方式,尤其是大型專案
如果一個元件重複出現在50個畫面,任何一個小修改都會搞死你…
這時便需要製作元件庫,將元件以連結的方式放置在畫面中
如此一來,當修改元件,所有用到的畫面都會自動更新
pic8
在元件庫中,一個工作區域放置一個元件,10個元件便要10個工作區域
注意工作區域的尺寸最好跟元件是一致的,因為匯入至畫面後,它就是物件的尺寸

過程中的最大的挑戰是定義什麼是共用元件,建議一開始不要定的太死,一邊製作畫面一邊調整規則。

拉哩拉扎說了好多,我想設計就是藉由不斷修改的過程變得更好(好啦~有時候是更糟…)
希望自己的一點經驗分享能幫助大家在面對修改時能節省一點時間
早點收工回家~

資料來源 : http://ludan.wordpress.com/

廣告

發表迴響

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

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s