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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對于越來越臃腫龐大的Photoshop而言，當CC 2015推出這個“設(shè)計空間”功能的時候，外界的反饋一致的好，終于變得輕盈了，終于從簡了，終于瘦身了。可是，想要瘦身必須付出巨大的勇氣。來看看這個新的設(shè)計空間，Adobe為我們提供了什么？首先你必須要保證自己的Mac OS X 為10.10及以上，Windows版本為8.1 64位及以上，才有機會目睹設(shè)計空間的芳容。那些還用著XP或者舊版本Mac系統(tǒng)的同學們，或者沒有安裝64位系統(tǒng)的朋友們可能無緣設(shè)計空間了。什么？不是說好的要瘦身嗎?為什么系統(tǒng)要求卻變得如此變態(tài)？好吧，鬼知道為什么。總之你可能是無法使用的就是了。好在我們看到那個括號里的“預(yù)覽”二字，代表這還是一個beta版本。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

靜電的Sketch教程合集持續(xù)更新中：

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

靜電的Xcode教程合集持續(xù)更新中：

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

投稿者：@JingDesign

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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