編者按：相信同學們都想知道新版Photoshop的使用體驗，@JingDesign?同學在上手感受了Photoshop CC 2015之后，發現這次比較搶眼的幾個新功能都很捉急，單從UI設計方面說，Sketch壓倒性完勝。特別認真的一篇評測文，強烈推薦 >>>

如果要問大家，這些日子哪件事在設計圈里最火，那你會想到什么？是各種讓人炫目的動效設計，還是一個能說會道的“奇才”逆襲騰訊的故事？

不不不，都不是，他們比起這個來，簡直是小巫見大巫。6月中旬，設計軟件界的大拿Adobe發布了最新款的設計套件Creative Cloud 2015。這樣的重磅炸彈無疑讓每個還在辛苦P圖的設計師猶如經歷一場狂歡。所以這就是狂歡的原因？當然不是。Adobe的當家花旦Photoshop已然成為大家討論的焦點。在加入了多畫板支持，圖層導出及設計空間等等的新功能后，使用Photoshop設計界面的設計師們終于看到了希望，一時間“Sketch去死吧”，“不支持Windows還搞個毛線”，“PS絞殺Sketch”這樣的言論如洪水般遍布社交網絡與各大設計網站的文章與評論區中。

那么對于作為一直在使用Sketch做界面設計的靜電來說，Photoshop推出這樣的新功能，到底對于我以及和我一樣使用Sketch作為主要工具的設計師有什么影響呢？也許有，也許沒有。但是本著眼見為實的原則，靜電第一時間下載了Photoshop及其它Creative Cloud 2015套件中的軟件，進行了粗略的試用，看看Photoshop到底為這些喜愛PS操作流的設計師來說，究竟帶來了什么？

一、Sketch與Photoshop兩種圖層選擇方式操作流的區別

在本文開始之前，靜電先描述一下在設計軟件中存在的兩種操作流派。

第一類，是以Photoshop為代表的圖層操作流。第二類，是以Fireworks，Illustrator，Sketch等軟件為主的所選即所得的操作流。

大家知道，前者的操作過程中，圖層操作在設計過程中所占比例極大，也就是說，當你需要選擇一個圖層的時候，需要首先轉到圖層面板，在圖層列表中選擇你要處理的圖層，然后再對這個圖形進行相關的操作。鼠標在畫布元素上移動的時候，并不進行圖層懸停提示框選的操作，當然Photoshop也為使用者加入了點擊即可選擇相應圖層的操作，但是圖層外框并不進行提示（即所謂的藍色選取框的顯示）。在第二類軟件，也就是Fireworks，Illustrator及Sketch這樣的軟件中，鼠標懸停在某個元素上，此元素外圍即出現藍色選取框，再次點擊即可選中此圖層。如下圖，左側為Photoshop類操作流，右邊為Sketch，Fireworks及Illustrator圖層操作效果。

對于兩種操作流的利弊，靜電認為各有各的好，但從Fireworks時代轉過來的我來說，這種所指即所得的圖層選擇模式，可能是我使用后者這些軟件的最主要的原因之一。畢竟，在這個效率為王的時代，頻繁操作圖層對于設計師來說可能很大程度上是一種負擔，特別是對于移動端界面設計師而言，這樣的方式無疑效率更高，也更容易上手。

如果Photoshop想要在這方面趕上Sketch或者同類型的軟件，它對于圖層的操作和選擇方式，也許應該成為一個首先要考慮的因素。對于后者的操作方式而已，在很大程度上，我們甚至不會過多的將注意點放在如何操作圖層上邊，這個可以最大限度的避免設計師在設計流程中的分心，從而更專注于設計本身。我們只需要在需要的時候點擊圖層進行操作，而不是每個步驟中都要點擊選中圖層，這節省了用戶大量的選擇和查找時間。對于此種模式，Mac中的Keynote軟件同樣可以參考，不同的是，Keynote在鼠標未選中時并不會出現提示框，但是在選擇后會對選擇圖形進行標識。相關的操作流如今被越來越多的軟件所采用，除了上文提到的使用此種選擇交互方式的軟件，我們也可以在諸如Axure，以及Xmind等等的工作軟件中找到它的影子。下圖為此種交互方式的動畫展示效果。從所指即所得的邏輯來說，此種方式更符合用戶的預期，也可以大幅提升設計效率（對于UI界面設計來說），是未來圖層選擇模式的更優方案。

二、畫板（Artboard）誠可貴，邏輯在哪里？

為了盡快趕上Sketch的腳步，Photoshop CC 2015中新加入了畫板（也叫做藝術板）設計模式。對于畫板的溯源，可能追究起來，要算是Illustrator的原創。相比較Sketch的畫板，Adobe的產品經理可是為了artboard操碎了心。這個功能的加入更被PS的粉絲們稱之為逆襲Sketch之舉，可是這個畫板究竟怎么樣呢？我們來對比一下Photoshop CC 2015和Sketch中的畫板。

大家知道，一般的繪圖軟件，在新建文件時會提示我們輸入畫布的大小，分辨率及顏色模式等等參數。這也是Photoshop等Adobe系軟件的常規操作，但加入畫板后，Photoshop如何處理畫板（Artboard），畫布，圖層分組這些層級的邏輯呢？首先我們在Photoshop CC 2015中新建一個文件，輸入畫布尺寸。靜電在這里新建一個800-600的畫布。

接著，靜電費勁千辛萬苦，終于找到了如何在這其中添加藝術板，首先它在標準模式下，是沒有可以添加的入口的，我也找不到它的按鈕所在，后來才發現他被藏到了選擇指針的二級菜單中。

那么接下來，選擇畫板工具，看看會有什么情況發生吧。拖拽了一個畫板后，畫布消失了（如下圖所示）。這個時候整個工作區變為灰色，我們剛才建立的畫布就再也找不到，也回不去畫布狀態了。原來如此，Adobe硬生生的添加了一個畫板模式進來，無比粗暴，同時右側圖層列表中新加了一個名為畫板的類似于組的圖層，此時的灰色區域，靜電理解為工作區，這個區域是可以無限延展的，跟之前新建立的畫布尺寸似乎沒有任何關系。

靜電研究了很久，感到非常的疑惑，藝術板和畫布的關系到底是什么呢？難道我們不是在畫布上增加的藝術板，而是Adobe把我們帶進了一個無比奇妙的區域？這個區域可以理解為繪圖板模式？在這個模式中，畫布消失了，并且我們再也回不去畫布了嗎？這幾個元素的邏輯，或者叫做包含關系，到底是什么樣的呢？不知道，也許只有Adobe家的產品經理能說明白吧。

畫布跟畫板的關系，傻傻地說不明白？畫板模式是來自外太空的神秘空間嗎？

接著看看Sketch對畫布的處理方式。在Sketch中，軟件默認是沒有畫布這個概念的，工作區域是無限大的，這是藝術板模式的基礎 。當然，最差的情況，我們可以在畫布上擺放畫板，但Sketch顯然沒有這么做，因為有了畫板的存在，我們的工作區域就變成無限伸展狀態了。

因此，Sketch中的邏輯更為簡單直接容易理解，工作區>畫板>文件夾>圖層，或者工作區>文件夾>圖層（未建立畫板或者圖層位于畫板外的情況）。所以Sketch可以在畫板外做你任何想做或者畫你任何想畫的圖形，同樣它會被顯示在界面中。但是對于操作流不同的Photoshop，當我們要在畫板外放置某些元素的時候，必須回到圖層面板，操作圖層從屬關系將它拖動到畫板之外，如果從屬關系不改變，屬于畫板圖層內的圖層在畫板外將不顯示。Sketch則比較討巧，如果將從屬于畫板中的元素拖動到圖層外后，它們的圖層從屬關系也會發生變化。

對于Photoshop來說，我認為加入畫板的功能固然值得大家興奮一陣子，但是在加入這個功能時，請先將圖層的邏輯關系搞清楚，然后再做處理會更好。否則這么簡單粗暴的方式，只能讓原本清晰的圖層從屬關系變的無比混亂。

三、畫板（Artboard）向下兼容成為奢望

畫板功能作為Photoshop創新的第一步，牽一發而動全身。在未搞清楚畫板與圖層從屬關系的邏輯的情況下，匆忙作出改變，其后果必然是畫板功能無法兼容老版本的Photoshop。當我們使用具備畫板功能的Photoshop在畫板模式下完成設計后，對不起，其他人的電腦必須也同樣安裝此版本的軟件，否則畫板兼容就會成為問題。

如下圖所示，在Photoshop CC 2014中打開2015版本創建的具有畫板的文件時，情況是這樣的。看起來很好，是的，因為圖層被合并了，要想不合并圖層打開，抱歉，你的設計稿可能并不是那么的漂亮了，如果人品不好，你可能只會得到一張大白板畫布。在此時，畫板被作為圖層文件夾存在其中，同時在最初我們新建立的畫布尺寸好像不怎么起效了，Adobe你這么任性好么。

四、擺脫臃腫，你真的需要矯枉過正的“設計空間”嗎？

對于越來越臃腫龐大的Photoshop而言，當CC 2015推出這個“設計空間”功能的時候，外界的反饋一致的好，終于變得輕盈了，終于從簡了，終于瘦身了?？墒牵胍萆肀仨毟冻鼍薮蟮挠職狻砜纯催@個新的設計空間，Adobe為我們提供了什么？首先你必須要保證自己的Mac OS X 為10.10及以上，Windows版本為8.1 64位及以上，才有機會目睹設計空間的芳容。那些還用著XP或者舊版本Mac系統的同學們，或者沒有安裝64位系統的朋友們可能無緣設計空間了。什么？不是說好的要瘦身嗎?為什么系統要求卻變得如此變態？好吧，鬼知道為什么?？傊憧赡苁菬o法使用的就是了。好在我們看到那個括號里的“預覽”二字，代表這還是一個beta版本。

我們打開被成為激動人心的設計空間功能吧，勾選上對勾。界面duang的一下就變的簡潔了，左側工具圖標列表消失，并被右側中部的僅有的五個圖標代替，他們分別是箭頭工具，矩形和圓形工具，路徑工具及文字工具。右側是屬性檢查器，下方是圖層列表。Adobe將設計模式簡化到了極致，但這真的是我們想要的嗎？通過試用，靜電發現這個設計空間實在是太過簡陋，該有的功能一概沒有，比如最常用的圖層屬性消失了，選取工具也消失了。但有一點值得鼓勵的是，在這個模式下，本文開頭提到的圖層選取功能居然做了改變，這一點難道是Adobe也意識到了嗎？希望如此。

對于設計模式來說，Photoshop的初衷是好的，靜電推測Adobe也付出了很大的勇氣來做改變。但是Photoshop到底是怎樣一款軟件，這樣的模式附加在這個巨無霸上，總感覺有點不倫不類的感覺。畢竟船大難掉頭，我們靜觀Adobe的改變吧。在這里靜電提到一個詞是“矯枉過正”，因為現在這個“設計空間”，不具備太多的可用性，僅僅是讓我們預覽一下效果而已。從另外一個層面上來說，我認為Adobe本身應該區分清楚軟件的使用人群，對于不同的人群，推出不同功能的軟件，而不是在一個軟件的基礎上兼顧所有人的需求，畢竟這個實在太難太難。靜電在這里又一次回想起被Adobe收購的Macromedia公司，特別是Fireworks這款軟件，也許是后媽不親，也許是其他原因，Fireworks這款兼具移動設計功能同時又具備輕巧矢量功能的軟件就這么停止更新了，CS6作為最后一版一直裝在靜電的電腦中。那么最終Photoshop又要走回fireworks最初所擅長的東西嗎？不管設計空間也好，還是什么空間也好，我們基于Photoshop的期望已經足夠的沉重，難道不應該為她卸下一個個包袱，讓她輕裝前進嗎？也許，這只是靜電的一個妄想吧。

下圖為Sketch軟件的界面，簡單切容易上手，這才是真正意義上的“design space”。

五、切圖與標注，問題或者不是問題

標注和切圖一直是移動端設計最難解決的問題，面對種類繁多，分辨率各異的移動設備。Photoshop一直沒有一個很好的解決方案，也許各種第三方插件已經為phptoshop使用者提供了不少的便利，但基于位圖編輯的與操作的Photoshop仍然未能為移動設備素材的輸出帶來多少便利。

Photoshop CC 2015在新版本中增加了快捷的圖層導出選項，多選圖層則可以一次導出選擇的圖層，這在某種意義上不失為一種進步。但如果要適應更快速便捷的素材輸出，Photoshop做的顯然還不夠。標注也是設計師面臨的老大難問題，所以你需要的是Markman還是？

Sketch這款為移動端界面而生的軟件，則對于此作出了最大限度的便利，我們可以一次導出多個所選擇的圖層，方式包括但不限于切片導出，拖拽圖層導出或者直接選中圖層進行導出，同時導出時可以方面的設置導出圖形的縮放比例及后綴（如@2x，@3x等等），同時輸出格式也更為多樣，從常用的png，到pdf以及svg格式。而Photoshop僅僅為我們提供了位圖及svg一種矢量格式。下圖為Sketch的操作界面。

在標注方面，通過配合Sketch的Measure插件（開發者為國內的大神Utom，其插件開源免費，為Sketch上下載最多的插件之一）以及Zeplin，可以輕松完成標注，甚至你可以無需標注，前端工程師使用Zeplin即可輕松查看各個元素的屬性，無需安裝Sketch即可。下圖為Zeplin操作動畫。

六、使用Photoshop組件庫下載素材？請您付費成為正版用戶

看了激動人心的宣傳片，想使用Adobe stock獲取各種UI素材？不好意思你必須付費成為正版使用者。因為Photoshop提供的組件庫是云端的。別光記得激動人心，喂，沒付費你啥也沒有。

相比于這個價格，精明的設計師同學請去算一筆賬吧，是購買60美刀左右的Sketch劃算呢，還是來一個每月79美刀的超豪華午餐合適？Sketch已經內置并會隨版本更新最新的UI設計模型庫。

七、Adobe Preview CC登場，但必須用美國區AppStore賬號下載

千呼萬喚，Adobe終于推出了自家的移動端預覽軟件-Adobe Preview CC，支持Wifi甚至USB鏈接，小伙伴們再也不用為手機預覽總是斷線發愁啦。當靜電興奮的點開鏈接，拿出手機準備下載的時候。你這時候一定會問為什么中國區沒有？想當年Adobe含恨退出中國市場的時候，你應該可以預料到這一天。好了好了，快去折騰一下，準備好美國區AppStore賬號吧。

其實預覽軟件Wifi連接不穩定的問題，Skala Preview已經率先解決，支持USB連接下的預覽，更重要的是 Skala Preview完美支持Sketch，媽媽再也不用擔心我預覽掉線啦！

大塊頭雖有大智慧，靈巧專注更是未來方向

Photoshop發展到今天，經歷過無數風風雨雨，已經成為設計師心目中不可褻瀆的神圣象征。但不可否認，她正變得越來越臃腫和龐大，對系統配置的要求幾近變態。作為從網頁三劍客一路走來的設計師，靜電更希望Photoshop及Adobe家的其它軟件能更為專注和好用，Photoshop就是Photoshop，專注位圖處理；Illustrator就是Illustrator，專注矢量繪圖；Sketch也就是Sketch，將移動端界面 設計做到極致。在圖像處理領域，PS是不可或缺的大塊頭，但在這個變化越來越快的時代，各種輕盈靈巧的軟件俘獲了越來越多設計師的芳心，也為他們帶來了效率的巨大提升，讓他們更專注于設計本身而不是軟件操作技巧，不同的目的使用不同的軟件，多個軟件綜合使用，最終創造出優秀的作品是設計師的最終目的。大而全固然值得崇拜，但小而美的Sketch，hype等越來越多的設計軟件卻讓這個世界變得異彩紛呈。拋開自身的偏好，靜電希望Photoshop和專注于移動界面設計的Sketch都能走的越來越好，我們無法抗拒資本運作對于軟件設計團隊的影響，但曾經的那些美好的點滴，至少會在我們心中存留，因為這個世界本來就不只有一種選擇。

本文無意討論Photoshop與Sketch軟件優劣，僅僅指出各自問題與作者遇到的疑惑。“吊打Sketch”，“秒殺Sketch”等等言論更是可以休矣，多大仇多大恨才會說出如此狠話？最近Photoshop固然是主角，但狂歡過后，作為設計師的我們需要更理性的思考。

看了這篇文章，有人一定會說：“認真你就輸了”。其實我想說，認真與專注才不會輸，因為認真和專注成就了今天的Sketch以及Adobe，這些駐留到我們電腦硬盤和桌面上的美麗應用。

最后，你究竟是在為免費且毫無代價的使用而歡呼，還是發自內心的，為那些付出巨大努力而開發出來的，令人激動人心的功能喝彩？

靜電的Sketch教程合集持續更新中：

1. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（一）》
2. 《SKETCH設計教室！從零開始學APP設計利器SKETCH（二）》
3. 《SKETCH設計教室！帶你了解超好用的SKETCH插件》
4. 《想要一稿過不加班？SKETCH絕配神器MIRROR搶先體驗》

靜電的Xcode教程合集持續更新中：

1. 《搞定一像素不求人！為設計師量身打造的XCODE教程（1）》
2. 《搞定一像素不求人！為設計師量身打造的XCODE教程（2）》
3. 《零代碼搞定交互動畫！為設計師量身打造的XCODE教程（3）》
4. 《搞定Tab bar交互！為設計師量身打造的XCODE教程（4）》

投稿者：@JingDesign

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量97萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：