當前位置: 華文星空 > 知識

界面設計工具 Sketch 的使用體驗如何?

2013-04-09知識

如果全團隊是Mac的話,Sketch是非常好用且適應現在的設計趨勢的。我們公司現在已經全部都用Sketch了。Sketch尤其適合設計師職能不細分的中小團隊和個人作品的制作。線框到視覺稿可以在一個軟體裏完成,能省去不少時間。

Sketch的使用者社群也比較繁榮健康,讓人挺有信心繼續用下去。(Sketch的擴充套件開發比PS容易的樣子,我看github上還有人做了自動生成iconfont之類的高級指令碼……)

其他回答基本都只是在特色功能上評論,確實,這軟體一開始的印象可能只有小巧便捷夠用。但用多了後就會發現他 最好的地方不是比PS多了什麽功能,而是針對UI設計的操作、互動模式,用起來非常高效。

PS因為要考慮攝影使用者的使用,並不能針對UI設計師做最優設計。有些回答中說道的切圖、測距等功能,其實最新的PS CC也能勝任(其他很多功能我相信要在PS上出現也只是個時間問題。跟PS比功能是很難有核心競爭力的),但PS的基本工具的操作/互動方式從來不是對UI設計專門設計的(我想這很難改變)。而這正是Sketch的取勝之道。

UI設計時,最頻繁的操作有選擇/移動,整理圖層、更改內容/樣式。這3樣東西是互相影響的,Sketch在這3方面都做得挺好,就完成了1+1+1=5的出色體驗(雖然有一些是向量軟體天生的操作優勢):

  • 整理圖層
    UI設計中得圖層,和照片編輯時很不同的一點是,模組(or板塊or分組)之間大多數不重疊,因此圖層順序也就相對不那麽重要。只要物件能夠被使用者方便的選擇到(後面講選擇功能的設計),圖層的順序很多時候是無所謂的。事實上瀏覽圖層面板是低效的,不管縮圖還是檔名,人的讀取效率都是不夠理想的。Sketch透過更適宜的基本功能設計,很大程度上減少了使用者對圖層面板的依賴程度(不用去看),不僅直接簡化了操作,也使使用者可以更專註於畫布上得內容。
  • 不要小看Forward和Backward的設計。Sketch的這個功能設計地非常好。
    首先這個功能的運作方式非常高效,它會考慮到遮罩關系,不做無意義的順序變動。比如從上到下有a/b/c三圖層,a遮著c了,但是b在其他地方,那我對c執行一次forward,c就是直接跑到a上面了(c/a/b),而不是只傻傻地提升一個級別(a/c/b)
    其次它只改變同級別內的圖層,所以圖層組內的東西怎麽forward都不會跳出圖層組。
    相比PS,圖層一多,拖動來改變順序太痛苦,用forward和backward每次只移動一層,低效,而連按太歡了又可能一不小心把分組邏輯搞亂了,必須小心翼翼
  • 復制、貼上
    Sketch中復制、貼上的操作和日常其他軟體裏的復制貼上很相似。選中圖層or圖層組的情況下command+c復制,command+v貼上。另外很重要的一個設計是,當前選中的物件決定貼上出來的東西在哪個圖層組裏。這樣大部份復制貼上操作是不用看圖層面板的。
    而PS裏,ctrl+c和ctrl+v只能復制像素(選區),圖層/物件的各種復制都遠沒有Sketch那麽爽快,因為你必須透過不狗直觀的圖層面板來決定新圖層的上下關系和包含關系。
  • 選取、移動工具
    這個最基本、最重要的工具設計的好不好,影響是巨大的。
  • PS選擇分為向量的選擇(A)和位圖的選擇(M)和圖層的選擇(V),略微復雜、繁瑣。比如我現在要改變一個矩形向量圖層的圓角參數,我得先V切換到圖層選擇工具選中圖層,然後A切換到向量選擇工具選中該路徑,然後內容面板裏才給我出現了圓角的參數。
    而Sketch裏只有唯一的選擇工具,一統天下。
  • Sketch裏的選擇工具,透過雙擊可以把選擇範圍的層級深入一層(也就是可以選圖層組裏的東西),這樣即使是巢狀了很多層圖層組,每層還好多個圖層組的情況,也可以很方便且邏輯較清晰地進行物件的選擇。這個雙擊使得使用者更加不需要關註圖層面板。
    而PS裏的選擇工具有兩個模式,一個是選圖層組,一個是選圖層。圖層組模式是不能選圖層組裏的圖層;圖層模式時不能直接選整個圖層組。雙擊?那是什麽?
  • Sketch裏的預設的工具是選擇/移動工具。其他工具都是畫一下就切換回選擇工具。你說你要連續添加很多個圖形/元素?用make grid批次復制並布局吧。
    畫好一個東西後接著布局,更加符合繪制UI的情況。而PS裏你畫好一個圖形後還得按著ctrl才能移動。(PS的操作就是ctrl基本不離手)
  • 更改內容/樣式
    Sketch裏的塗層樣式是在右欄裏常開的。而在PS裏先要在圖層面板裏找到當前選中的塗層然後雙擊開啟樣式編輯視窗,而樣式視窗的彈出位置又是不那麽確定的(尤其是多屏環境時),這麽多次的視線和滑鼠的移動,是非常低效且煩人的。
    其實這點PS也是可以模仿的,只要開發個圖層樣式的面板,然後這個面板可以自訂顯示哪些內容(不然會過多塞不下)就可以了。但Adobe沒有,我也沒搜到這樣的一款擴充套件/外掛程式。
  • 經我這麽一番敘述大家應該可以意識到了PS做UI設計是多麽繁瑣。 sketch不僅簡化了流程,還讓左手(不用太多時間按著ctrl)和眼睛(不用去仔細閱讀圖層面板)更加輕松。它帶來的隱藏的效率提升是比較可觀的。 至少操作體驗是很好的。

    Sketch還有很多人性化的設計細節。各位用著用著就能體會到。

    簡單明了的功能加上以上各種親切的互動設計使得這軟體的上手難度極低。我轉向Sketch的時候除了個別疑點稍微搜了下文件,總體邊學邊用的過程都毫無阻礙。

    感受到的相對的不足有:

  • 團隊小,軟體沒有Adobe的產品穩定,遇到bug時基本上就是毫無辦法。也不知道什麽時候會修復。
  • 大點的計畫or大尺寸位圖多點,效能就很一般了。
    之前做一個web app,背景整個是個位圖,結果artboard也就十幾張就比PS還卡了。
  • Sketch如果功能上能滿足團隊需求,是目前的不二之選。它決不是簡單地針對UI設計開發特別的功能、去掉不太用的功能,而是在基本的操作層次上給UI設計師帶來了得更好地體驗。