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

Sketch | The designer』s toolbox


大概用 Sketch 用了將近一個月,原來是一直用 Illustrator 做界面設計。
Sketch 有很多優點,但是同樣的也有很多不爽的地方,大概列舉一下,供參考:

優點:

  • ,用 Sketch 好像沒有冷啟動時間一樣,這也就是為什麼 AI 和 PS 需要啟動畫面
  • OSX 支持好,原生全屏,原生的版本控制,支持 Retina
  • 功能集足夠,支持貝塞爾曲線,支持布爾運算,支持文字轉曲,支持圖層樣式
  • 功能亮點
    • 原生支持 @2x 圖片導出
    • 保存切片時,可以選擇導出的圖層。如果在背景上畫圖標的話,不用像PS那麼苦逼

    • 多個圖層樣式疊加,一個樣式可以有n個陰影,基本上用 PS,AI 做出來的效果用 Sketch 沒大問題。
    • 方便的陣列生成,有一個圖形快速生成 n×n 的陣列,有內建的功能。
    • 支持 CSS 樣式複製
    • 每個頂點的圓角半徑設置 (PS內牛滿面)

    • 比 Adobe 好用的智能輔助線,不僅可以對齊,選中之後按住 option 還可以量距離
    • Sub-pixel 的文字渲染,這個 Adobe 從來沒做到過。

    • 像素對齊,這個 PS 和 AI 也是痛點,但是 Sketch 也有小問題。
    • 不限制大小的畫布,這也是 PS 的一大痛點。
  • 缺點
    • 快捷鍵覆蓋率不高,和 Adobe 系不一樣 (比如R是矩形,Adobe系一直是M),且不好自定義。
    • 像素圖像編輯功能弱到爆,相當於沒有。
    • 蒙板功能難用到爆,哪怕我只是想 Crop 一張像素圖,也要畫個路徑,選中之後做蒙板。
    • 只支持 SVG 的導入,不支持 psd, ai 路徑的導入,複製粘貼
    • 群組內編輯比較弱
    • 偶爾不穩定,不明原因地變慢
    • 文字編輯工具屬於剛剛能用的狀態
    • &不能設置虛線和箭頭& Update: 可以設置,Border 那裡有下拉菜單……
    • 最大的缺點:Sketch 文件屬於沒人支持的狀態。你不可能永遠不把原文件給別人。

既然一個工具能讓我用將近一個月,並且有相對穩定的產出,這個工具肯定是足夠一般的用途了,但是要挑戰 Adobe CS 這些大塊頭,還是不太現實,比較適合小團隊,做一些簡單的界面(話說現在扁平化流行的年代,用 Sketch 倒是剛剛好)。

秀一個 Sketch 畫的,並不複雜,但是比較典型的比其它工具都方便:


如果全團隊是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設計師帶來了得更好地體驗。


千言萬語彙成兩個字:效率

Sketch的前世今生
自從2010 年 Bohemian Coding公司推出了 Sketch,Sketch如今已經到了39.1版本。Sketch 一開始只是小型矢量畫圖工具,後來才優化成界面設計軟體。當年的Sketch 2是拿過蘋果設計獎的。

Sketch的定位
Sketch如其是說是一款超越PS的繪圖軟體或者有點誇張。其實我使用時第一感覺是,這軟體太像keynote了吧。Mac軟體經典的布局,數據表單式的檢查器,並沒有什麼特別。但上手一周後,才發現Sketch作為UI設計軟體的首選,實在當之無愧。

Sketch的定位並不是超越Photoshop。Photoshop涉及了太多領域,攝影后期、手繪插圖、平面設計和界面設計等,它已經是變成一款大而全甚至有點臃腫的設計軟體了。

而視覺設計師用它作為UI設計軟體時,存在什麼痛點呢?如果你曾設計過界面,發現設計界面花了1個小時,而切圖、標註等工作需要同樣花你1個小時,你會發現一些批量和非設計的工作也佔有工作時間的幾乎一半;當設計稿越來越多,即使改一個字體,都得牽一髮而動全身,每份設計稿都得一個一個欄位調整,當時可能自殺的心都有。

Sketch的定位便是為了解決這些問題。它是一款只在UI設計領域,有效率和便於協作的矢量繪圖軟體。

  • 它減免設計師花在批量式的非設計工作的時間;
  • 它幫助設計師聚焦他們真正需要關心的:頁面效果、擴展性、控制項庫、邏輯層次等;
  • 它提高設計師與其他協作人員溝通的效率:產品經理、交互設計師、開發工程師等。

Sketch的優勢
1、提高非設計部分工作的效率。可快速輸出1倍、2倍甚至自定義尺寸的切圖,可智能標註任何元素。把一天需要做的任務,變成一分鐘的事。甚至連設計師不得不經常按的Command+S都不需要按了,自動給你保存好。

2、幫助設計師聚焦他們真正關心的事情。UI設計師做設計稿的核心其實是:定義顏色、控制項樣式、頁面結構、字體和圖標樣式等。每次的調整稿件,設計師最常經歷的也是,把全局的顏色、字體、圖標和控制項再更新一次。

Sketch也是站在設計師的角度,把這些核心作為首要考慮的重點。比如全局控制的顏色庫、標誌庫、字體樣式等。只要你更新一個,全局運用到的便會同步更新。

還有一個很有意思的點是,Sketch一份文件其實更多是一個項目的概念,而非一份設計稿。打開一份Sketch文件,其實是一系列稿件的匯總。

這種使用軟體的方式也會利於設計師轉換思維。例如同時看到多畫板,可以培養設計師的全局觀,觀察頁面的統一性和跳轉邏輯;全局控制字體、顏色和控制項,可以培養設計師對拓展性和統一性的把控度。

3、不得不提的插件。Sketch開放了插件,讓眾多出色的插件也不停再完善Sketch。幫你批量命名圖層、智能標註頁面、智能填充頭像和文字等,讓Sketch越來越能滿足不同人群的設計需求。

Sketch的劣勢
1、路徑繪圖。路徑描點的選擇,操作與路徑的修改,Sketch一直遜色於Photoshop。特別是對線段的選擇刪除,描點的切換、刪除和添加,還有單獨調整某個句柄,都還沒有Photoshop或Illustrator便捷。這導致我在繪製複雜圖形時,會在AI中繪製完畢後再粘貼到Sketch中。

2、不穩定。Sketch並不算上是非常穩定的軟體。經常會出現莫名其妙的BUG。例如不同版本保存的源文件無法打開。調整Symbol寬高後,具體又在設計稿又不會更新等。但考慮到Bohemian開發人員一直很少,而繪圖軟體使用情景又很複雜,一百個人用可能會遇到一百個不同的 bug,儘管 Sketch 改進速度很快,依然會給人感覺問題多多。

3、一些高級功能的缺失。比如畫布背景的調整(這關係到你判斷某些顏色的感覺)、查看顏色的LAB值、清除參考線等。

4、文檔的內存管理。一旦文檔中稿件一多,打開Sketch便會有卡頓,操作也斷斷續續的,非常吃內存。希望Sketch日後可以優化這一點。

總之,以後的設計工作中,不涉及手繪和插畫,應該會更多傾向使用Sketch。


經過幾個月在工作上的實際使用,上手容易,產出不錯,在Ui設計上基本可以完全替代photoshop,目前已成為我的主力設計工具。它的優點其實就兩個:一是提高工作效率,二是增加滑鼠壽命。缺點也很明顯,點陣圖處理不能。

---------------------------
---------------------------------------------------------------------------------

2014.2.27日補充

目前sketch已經更新到3.0版本,估計不久的將來會正式發布,各種功能加強,例如導出功能支持多種縮放尺寸,切片路徑作為單獨的文件可管理,Greate Symbol(雖然還搞不清怎麼用但看起來很厲害的樣子)等等...,著實的更加方便。

------------------------------------------------------------------------------------------------------------


有圖有真相。

界面:

圖標:

文檔:

Sketch的優點:

自動保存
為了減少photoshop的崩潰的損失,每一個Ui設計師都會不停的command+s,這其實是一件很殘忍的事,你可以打開自動保存,但你無法預估它的保存時間,但隨著文件越做越大,它來這麼一下,你就得停下不動,這事尤其的蛋疼。sketch可以自動保存並且最關鍵的事,它不會打斷你,你不必神經質的每隔幾分鐘手便抽動一次。

矢量圖形
在sketch創建的圖形全部是矢量的,在放大縮小就很方便,不需要調整太多,還有一個很好的小功能,就是可以一鍵把0.幾的像素變成整數,而且可以很方便的在矢量視圖和像素視圖之間進行切換。
可以很方便的創建一些重複形狀構成的圖形。

測量工具
我們在用photoshop做界面設計時,為了元素位置的精確,需要用螞蟻線或者切片工具來測量元素與元素之間的距離,畫完螞蟻線或切片如果有變動,你還得再量一遍。在sketch在這點就會節省你很多時間,並且讓我們的設計更加精確,只要選中這個元素,按住alt鍵,然後再把滑鼠點選其他元素或者移動就可以實時的顯示上下左右之間的距離,這是我認為sketch的一個最棒的功能。

圓角矩形
sketch對圓角矩形的創建是很方便的,既可以控制四個角圓角大小,也可以雙擊,對單個圓角進行調整,並且可以隨意調圓角矩形,圓角也不會變形,當然photoshopcc也解決了這個問題,但它的操作很笨重。還有一個好處是,你可以點擊右邊的數值,並拖動滑鼠,可以實時看到圖形的變化。

方便的選擇元素
左側圖層和分組欄,可以看到矢量圖形的的縮略圖。
當用滑鼠掠過畫布上的各個元素的時候,左側會出現一個藍色框對對焦到我們選中的元素。
另外如果你是一個分層分組科學合理,命名規範的設計師的話,那sketch的搜索會讓你尋找界面元素的時候更加方便,並且隨著上下點擊會對焦到你選中的元素。

圖層樣式
sketch的圖層樣式和photoshop一樣,漸變,描邊,內外陰影,不同的是sketch可以在一個圖形上添加最多四層完全不同的漸變,添加無限的描邊和內外陰影。我們創建比較複雜的圖形質感的時候也就更加方便。
文字的樣式也可以單獨的保存起來,方便對多個的文本進行調整。
無論圖層樣式還是文字樣式都可以用alt+command+c或v進行粘貼。

鋼筆工具
sketch的鋼筆工具也比photoshop好用,具體表現在可以方便控制像素對齊或半個像素對齊,而在photoshop中雖然也可以對一個像素對齊,但設置和切換很麻煩。
最棒的是,它可以畫完美的弧線,只要按住atl鍵拖動滑鼠即可。

網格工具
又是一個photoshop比較渣的點,photoshop不用第三方的網格插件基本就不可用,在sketch可以很方便的對網格進行編輯,有傳統的方格,也有橫向和縱向組成的長方形。

文字渲染
這個點其實說的是sketch支持sub-pixel渲染,翻譯成中文可以說是次級像素,我隨便截圖給大家看一下,這種渲染方式是以前的舊技術,為低解析度的顯示器而生,現在絕大多數的系統和屏幕都是有的,當然有的同學要抬杠了,iOS的屏幕上沒有,實際上是有的,只是Apple默認關閉,為什麼關閉?1是iOS的現在的屏幕的像素密度不需要,剛才也說說了這是一個舊的技術,2是由於底層技術上的原因所以不支持。

導出切圖
畫切片和輸出切圖對設計師是最痛苦的一件事,痛苦程度隨著切圖數量和設備屏幕的多少不斷遞增。sketch輸出切圖很方便,等待時候比photoshop真是短太久了,因為是完全的矢量,可以無限縮放,並且可以同時輸出一倍和二倍圖。
還可以自動畫出切片大小。
甚至可以直接把切圖直接拖到指定的位置。

效果圖鏡像
sketch是原生支持在iOS設備上查看設計稿的,可以下載iOS的App,就可以在iPhone,iPad實時查看設計稿了。

穩定和效率
sketch可以添加無限的畫布,可以把界面全部在一個文件內完成,有點像ppt,每頁都可以建立多個畫布,把多個界面平鋪,即便設計很多界面也不會覺得運行效率上有所降低,由於都是矢量,所以文件體積也比photoshop小很多。所以最關鍵的一點就是穩定,徹底把你從不停的command+s解放出來,也不用在一個psd固定的1136X640內只建幾個界面。

更新勤快
sketch工具是一個年輕小團隊,更新比較勤奮,對於用戶的反饋也很及時。售價448元,安裝包不到10m,破解也是方便,但建議差錢的和不差錢的購買正版,拿出人民幣真正的支持這些能夠切實的解決問題的人。

支持eps和svg的導入
可以把psd內的矢量文件轉成eps或svg格式,可以在sketch內打開。


Photoshop的槽點:

不適合UI設計師
在photoshop誕生時到現在,無論從官方的宣傳,還是迄今為止的的版本更新點,都可以看到,photoshop的定位就是圖像處理軟體,Ui設計師從來都不是目標受眾,我們使用的只是剛好能夠提供界面設計功能的photoshop,但絕對談不上就是給ui設計師準備的界面設計工具,打個比方,photoshop是全能,臃腫,笨重的工具箱,裡面有鉗子扳手改錐鎚子等等工具,但我們需要只是一把用來削蘋果的小刀。

不適合Ui設計
Ui設計很重要的一個點就是要求精確,同一個界面,你還得適配多種尺寸屏幕,這個過程在photoshop會花去你大量的時間去調整,像素,圖標,文字,距離等等,因為photoshop從來沒說它是個專業的排版工具。
Ui設計對「對齊」這個詞格外敏感,所以你需要對齊像素,對齊文字,對齊圖形等等。對齊這些元素需要輔助線,網格等,但在photoshop這些原生工具真心難用,以至於我們必須下載第三方插件解決這個問題。
在設計的最後,畫切片,輸出切圖的時候往往是是很痛苦的。photoshop一直沒有一個好的解決方式,只能第三方來了。
我們還需要一個能實時在手機屏幕上查看效果圖的工具,我們可以依賴photoshop第三方插件,但畢竟是第三方,總會有些問題,比如為了實時預覽你的psd畫板大小始終是640X1136,並且時不時的卡死等等。

運行速度慢
photoshop的年齡大概將近30來歲,第一個正式的版本是1990年發布在mac上的,當時只有800多k,發展到目前的photoshopcc,有1個多g。從安裝包大小,啟動速度,處理文件時的等待時間,即便優化重新寫過,在最新的photoshopcc還是讓人感到慢,卡。我們不能抱怨,因為photoshop的產品定位就是圖像處理,靜態的動態甚至3D的,什麼都可以做。

更新速度慢
當時買了retina本子是沒辦法用photoshop的,過了幾個月adobe才發布更新。不會隨著拖拽變化的圓角矩形又等了多久,字體渲染要等多久,是因為產品龐大,尾大不掉,響應速度特別慢。photoshop有著廣泛的用戶群體,UI設計師只是其中的一點點,我們的需求不會被第一時間得到響應。

彈出框
我相信這是設計師最難以接受的情景就是各種各樣的假死或真死的對話框,絕對菊花一緊,如果運氣好話也保存過重新打開photoshop就好了,就怕一打開是幾個小時前的成果,或者更慘點兒打不開了,文件沒有備份,只有一份,遇到這種情況真就除了卧槽沒別的轍,只有重新來過。

UI設計師在Photoshop生存要點

  • 每5分鐘按一次command+s。
  • Psd文件不能大於30M。
  • Psd內不能超過6個界面。
  • 安裝Psd縮略圖補丁。
  • 使用智能對象。
  • 打開Psd,保存,或者輸出切片要控制情緒。
  • ... ...

工具並不是最重要的,但時間很重要。


Sketch是最好的做UI的軟體,沒有之一。它可以進行快速的交互迭代,每個頁面之間小的部件可以直接複製粘貼然後修改。在整體的架構布局時可以直接下載很多Mocaup的模板,所以非常快捷。 這個工具完全是為APP而設計的, 比PS好用的多。

更多相關內容在

JinCao 曹金的live

JinCao 曹金 - 知乎專欄


Sketch做繪圖的確不靠譜,但是現在做iOS7和Windows 8的扁平設計,效率比使用PS不知道要高多少。一些複雜的圖像可以從PS導過來作為庫使用,我現在已經全面從PS撤離轉Sketch了。

源文件問題,Sketch的源文件現在已經蠻多的了,雖然比起PS還是少,但基本夠用,使用別人源文件的難度也降低了很多。


還有個最大的好處是,我發現新的設計師上手PS比上手Sketch要難得多,這就意味著獨立產品開發者,可以自己一個人用Sketch+Xcode5完成設計到開發的全過程。


用Sketch有一段時間了,特別適合用來設計web/移動端的界面,無論是上手速度還是工作起來的設計速度都甩ps/ai好幾條街。

相比與Adobe的東西,Sketch較為專註,自然也較為輕量,值得一試。

ps.最近翻譯了一篇相關的文章,可以看下用Sketch來設計


只拿sketch和ps對比的人,多半是不會用ai的。為什麼用sketch,因為它比ps簡單。為什麼用ps,因為它比ai簡單。


我只想說,我那天旋轉複製了120個矩形,就再也打不開那個文件了。。。
------------------------------------
補充一下,現在的版本旋轉複製120個矩形的話,是可以打開的,就是有點卡。。。
另外我只是黑一下性能,其實我還是覺得Sketch是很錯的,也是主力生產工具,畢竟也不是天天旋轉複製120個矩形,現在的版本常規使用還是沒有什麼問題的。


說下感受:
優點:
做界面排版速度杠杠的。
自動對齊,像素對齊。
導出資源的功能很強大。
自動保存也很貼心。
快速在移動設備上預覽。
不足:
畫圖工具還達不到AI和PS那麼方便。鋼筆工具。形狀路徑調整,比ps和ai弱很多很多。
因此,工作中會這樣,圖標會在ai里畫好。再拖入sketch里。sketch里就畫些簡單的形狀吧。


----------------

題目標題也改了。

我自己打自己面吧,sketch能導出2x 3x 圖層了,能生成css式樣,還有智能縮放,這些都是超級針對開發的功能了。


前兩天看了Sketch的測評報告,真的是碾壓PS幾條街啊,Adobe爸爸估計也是著急了,趕緊出了XD,各位看官瞧瞧這個名字啊——XD,卧槽這是赤果果的嘲笑啊,BUT,名字也並沒有什麼卵用,這點中國人最明白嘛,叫發財的不一定都發財是吧。但是話說回來,XD雖然這次還是差了點,不代表人家以後不會追回來,畢竟背後是Adobe爸爸撐腰嘛。

閑話不多說,我們來比較下這三款軟體。

應用開發團隊Bohemian Coding這樣評價 Sketch:「 Sketch 是一個擁有美觀界面和強力功能的專業矢量繪圖軟體。我們打算為圖形設計者們構建一個更好的應用。不只是借鑒,而且是超越。」

它的具體優勢在於:

1、簡化了操作步驟:滑鼠懸停在某個元素上,此元素外圍即出現藍色選取框,再次點擊即可選中此圖層

2、畫板:Sketch可以在畫板外做你任何想做或者畫你任何想畫的圖形,同樣它會被顯示在界面中。但是對於操作流不同的Photoshop,當我們要在畫板外放置某些元素的時候,必須回到圖層面板,操作圖層從屬關係將它拖動到畫板之外,如果從屬關係不改變,屬於畫板圖層內的圖層在畫板外將不顯示。Sketch則比較討巧,如果將從屬於畫板中的元素拖動到圖層外後,它們的圖層從屬關係也會發生變化。

3、軟體佔用空間更小

4、操作界面更簡潔

但是,如果我只用移動、遮罩、填充、文字和丈量工具這些功能的話,我可以在 PS 里完成我所有的設計工作。

XD其實在很多功能上都已經達到了跟Sketch相當的水平,但是在插件方面還是略遜一籌,但是繼續迭代下去的話,還是前途不可限量。

話說到這裡,感覺又到了一個中立的狀態,所有人都成了患有選擇恐懼癌的天秤座。老司機還好嘛,哪個順手用哪個。

但是,要是設計新手怎麼辦,這倆你追我趕的跟在高速飆車一樣,到底學哪樣啊!

姐姐告訴你,別選啦!咱們一起上!什麼PS ,XD,Sketch,我都學!這總可以了吧。但是就現在來說,教sketch的地方還比較少,畢竟它多數用於APP,Adobe還是市場主流,可以先進行了解UI設計_ UI界面設計視頻教程

麥子學院的UI課程不僅會教授PS,sketch這樣的軟體操作,還有設計師必不可少的設計思維。


輕,平,快。
但是如果你的客戶那邊的設計師不用sketch.就悲劇了。我的實際教訓。重新用ai做了一遍。


sketch在UI設計,尤其是移動終端和扁平化風格下是非常具有優勢和效率的。
硬傷是沒有windows版本,不過技術上應該不是很難實現雙版本。
adobe一定注意到這款軟體了,是收購還是改造現有產品?我覺得有可能會收購。


有了sketch,讓我等技術宅終於可以自由自在的自己設計想要的ui效果了(當年一拿起ps就一頭冷汗),於是果斷買了(限時促銷ing,要買的趕緊了)。


說實話,不太好用。

還是說說有點,原生mac程序,製作ios mac的界面和圖標來還是非常順暢的,從尺寸到格式,無不方便。但是——

比較起重造型的AI的操控來說,太有限的布爾運算功能,羸弱的剪刀功能以及基本上沒太大用處的剪切蒙版都是大軟肋呀;比較起重效果的PS的操控來說,......好吧,直接在PS裡面做導入進來就好吧!

Sketch,要想替代ADOBE2件套,還有很長的路要走!


做印刷的獃獃地看著你們。。。。


做一點補充。sketch的鋼筆工具其實做了很多優化,個人認為比ps甚至AI都要好,和sketch一貫的風格一樣,在提升UI設計效率上下了大功夫。

具體的操作,你看過下面我總結的一些快捷鍵就知道了。

? 單擊v進去鋼筆工具

? 雙擊錨點可以在straight和mirrored之間切換模式

? 單擊tab可以選中下一個錨點

? 單擊1,2,3,4可以切換模式(straight,mirrored,disconnected,asymmetric)

? 按住commend拖動錨點關閉smart guides(就是那條水平垂直方向和其他點對齊的線)

? 按住commend拖動手柄可以自由定位手柄位置(直接切換到disconnected)

有人可能不知道straight,mirrored,disconnected,asymmetric都是些啥。進去鋼筆工具模式後,右側inspector可以看到這四個按鍵。

straight(直線角):點擊畫布時添加一個直角,沒有弧度。兩個錨點得到的就是一條直線。

mirrored(鏡像):兩個錨點鏡像對應,也就是兩點距離相等且相互對立。通常是默認模式。

disconnected(斷開連接):兩個錨點完全獨立互不影響。

asymmetric(不對稱):兩個錨點相互對立,但是距離獨立不受影響。

其實掌握1234這四個快捷鍵鋼筆工具就可以用的很溜零阻礙了,在不知道這個快捷鍵之前轉換模式我還得一個一個在inspector上點,非常浪費時間。

希望大家使用愉快~


對於界面設計師來說,尤其是安卓版本,簡直是徹底解脫的感覺。裝2個插件,自動生成安卓的多個版本,自動換算dp值,自動標註,還可以自動換算成DP值。IOS版本可以使用px值。以前用markman標註,也還是得手工處理呀,這下好了,全自動啊,感動死了!這裡的介紹與教程sketch八個高效的快捷方式(上)-UI中國


恩,用Sketch,作為產品我可以搭配Origami做交互(這個暫時還學得不太好)
方便上手,有一些設計知識,半天可以上手。
產出效率非常快,export功能可以小刀export每一個單獨的元素。
show一張我用學的Sketch教程吧,20分鐘做的一個icon。

我來更新一下,每天十分鐘,一周左右的畫布。


推薦閱讀:

2D手繪原畫設計在哪些方面無法被3D和照片合成取代?
蘭博基尼到底有什麼特別?
設計師怎樣培養、提高審美?
你為什麼討厭顧爺和《小顧聊繪畫》?
簡約電視牆如何做得出彩?

TAG:設計 | 用戶界面設計 | 視覺設計 | Sketch | 設計工具 |