2024-7-31 濤濤
前幾天問一個做了7年UI設計的朋友
“你用sketch嗎？”“不用”
“你用XD嗎？”“不用”
“你用figma嗎？”“不用”
“你用invision Studio嗎”“啥？”
“挺好的軟件，為什么不用用呢”“我用PS，PS最好了！”
“MMP......”
我們今天所處的環境，互聯網飛速發展，新的意識形態不斷涌現，工作方式不斷發生變化，開放、共享等理念被更多的行業更多的人理解，在這樣的環境中效率顯得越來越重要。好的工具和工作方式帶來的是先進的生產力，比如Figma的異軍突起改變了設計師傳統的工作方式也正在改變著我們的工作理念，作為互聯網設計師我們應該是互聯網中的前衛者。
接下來我們看一下UI設計軟件的現狀和發展，不管有沒有去使用它們，但設計師應該認識到我們所處的環境。
大約在90年代以前，我們可以給它起個名稱，叫做“軟件1.0時代”。“軟件1.0時代”軟件在自己的專業領域不斷的改進，比如Illustrator1.0、Photoshop1.0 ，word1.0、金山的wps1.0 等，此時的軟件最求的是功能的完善，系統的穩定等。
來到2000年左右，我們可以稱作“軟件2.0時代”。“軟件2.0時代”開始最求便捷高效的工作方式，多軟件協作，比如2002年Adobe的創意套裝Adobe Creative Suite，包括了今天大多數的Adobe軟件。
1999年的WPS已經集成了電子表格和多媒體演示，2001年更名為WPS Office。
Microsoft office更早一些，在90年代就完成了從單一軟件到套裝的轉變。
2010年前后我們可以稱作“軟件3.0時代”。隨著技術的發展和普及，這個時代的軟件開始加入“云”的理念，云端存儲，云端共享，比如2013年Adobe的創意云Adobe Creative Cloud也就是我們熟知的CC系列，一個賬號就可以在任意電腦上使用自己的資源。
金山2012年推出WPS云文檔，2016年發布WPS+云協作，2018年多人實時在線協作的金山文檔上線（金山軟件的發展很好的體現了軟件的發展趨勢）。
2013年至今，我們可以稱作“后軟件時代”或者“軟件4.0時代”，當然這只是主觀的一個叫法，時間節點也未必科學。
2013年
·訂閱號從無到有，成為內容創業搶奪的藍海到市場逐漸飽和；
·為發燒而生的小米銷量開始被華為、OPPO、VIVO三家合力圍剿；
·Papi醬依靠短視頻吐槽拍出2200萬元“天價”廣告位后被邏輯思維撤資；
·滴滴與快的、優步之間的燒錢大戰打的分外眼紅最后也喜結連理；
·ofo和摩拜平地一聲驚雷引發了出行領域的又一輪燒錢大戰；
·4G拍照正式發放；
......
這些和軟件并沒有太大關系，有些扯遠了，跟軟件相關的是，2013年ProcessOn在線做圖工具的上線（國外同類型的產品出現的更早），ProcessOn是一款在線做圖工具，主要用來繪制流程圖，思維導圖等，團隊成員可以實時協作。更重要的是ProcessOn一個web應用，一個瀏覽器，一個窗口，全部搞定。ProcessOn在0銷售成本下用戶突破100萬。這在一定程度上折射出軟件的發展趨勢：云端化、去平臺化、共享化，傳統的軟件必將逐步被云應用所替代。
此后，國內的墨刀和摹客2014年上線，國外的Figma 2015年上線，Adobe XD 2016年上線，2017年的國內的xiaopiu上線，2020年9月xiaopiu推出“即時設計”，新版本的墨刀也加入了實時協作功能。看到國內的設計軟件越來越優秀，非常的高興和期待！2020年突如其來的變化，讓無數人居家辦公，團隊協作，遠程辦公等工具和理念被更多的人注意到......
我們可以看到軟件的發展大致是這樣的線路：
接下來我們看一下“后軟件時代”的UI設計軟件，今天要說的是目前主流的UI設計軟件——Sketch、Figma、Adobe XD、Invision Studio
首先說明一下
1、上面提到的墨刀和摹客也是非常非常優秀的設計軟件，功能也非常的完善，甚至一些功能比這些軟件的體驗還要好，墨刀摹客也是很好的選擇。不過我們更習慣把墨刀和摹客看做原型設計工具，所以不在討論范圍。
2、還有一些很好的軟件比如Framer、Affinity Designer，也非常優秀，但本人沒有深入體驗過加之國內使用者較少，所以不在討論范圍。
3、大部分同學依然使用的是PS，但PS算不上正經的UI設計工具(*^▽^*)，雖然它很強大，所以也不在討論范圍。
4、Sketch由于我們的使用環境所限，更像是一個傳統軟件，但它也為了保持競爭力不斷地更新迭代，也可以通過各種插件實現團隊特有的工作流。
5、Invision Studio是Invision眾多產品中的一個，Invision包括Invision Cloud、Invision Studio、Invision DSM
“后軟件時代”的UI設計軟件具有共同的特點就是一站式設計——從線框、原型、設計、動效、討論到協作一站式完成。
首先我們看一下這幾個軟件的基本信息：
能夠發現這四款軟件的定位包括功能基本是一致的。
首先說一下基礎功能，所謂的基礎功能就是本地化設計常用的，圖形繪制、路徑編輯、布爾運算、文本設置、圖層樣式、蒙版、模糊、頁面設置、柵格等，這些功能和基本的操作Sketch、Figma、Adobe XD、Invision Studio的差別不大，甚至很像，相對比較簡單，如果熟悉其中的一個其他的很容易上手，這里就不多做介紹。
組件系統，概況來說組件系統就是方便設計師對組件、樣式、顏色、文本樣式復用，可以統一修改。
最近幾年組件化設計思維越來越被重視，各大廠都有自己的組件系統，它是一種高效的工作方法及思維模式。關于組件化設計思維在這里就不再贅述，有興趣的同學可以看一下站酷的這幾篇文章 點擊標題查看
《【滴滴平臺體驗設計研究】設計的“整理術” —滴滴表單項目的組件化設計思維沉淀》
它們的組件系統各有千秋，比如
· Sketch、Figma、Invision Studio切換組件時可以下拉選擇切換，XD的切換是直接拖動組件到原來組件上替換，可以用斜杠 / 命名對組件進行分組；
· Figma、XD的組件可以有多種狀態，并且可以直接識別到sketch文件的組件；
· Sketch、Invision Studio把組件歸類到一個單獨的頁面空間；
· Figma、XD的組件更靈活；
當然我們習慣一種就好，關鍵的是運用到實際工作中！
Adobe XD ↑
Figma ↑
Invision Studio ↑
Sketch ↑
Sketch ↑
說到組件庫就不得不說團隊組件庫，組件可以使設計師管理單個文件的設計資源，而團隊組件庫可以使我們整個團隊使用同一套規范，一個組件有所改動，所有用到這個組件的文件都會自動修改，這對于團隊協作是至關重要的。
Sketch的團隊組件庫
可以使用自帶的Sketch Libraries，也可以使用蘋果的iCloud ，藍湖為Sketch量身打造的“設計規范云”使用體驗也是超級棒！
Figma的團隊組件庫
Figma的團隊協作本身就是大家共同編輯同一個文件，免費用戶只能在一個文件里面使用組件，團隊項目可夸設計稿使用，但需要是付費的專業版。
XD的團隊組件庫
把設計文件共享給團隊成員，團隊成員即可使用文件中的組件，并且可以共同編輯。
我也會在我的教程 →《Adobe XD進階使用教程》← 中講到
Invision Studio的團隊組件庫
Invision Studio暫時沒有團隊組件庫，但它可以導入其他文件的組件，我們可以通過文件傳送的方式間接實現組件的共享。
Invision Studio ↑
Adobe XD ↑
Sketch ↑
智能布局是“后現代設計軟件”的重要功能之一，它可以幫我們快速實現響應式布局。
雖然它們的叫法不一樣，但功能基本一致。
· Sketch叫Smart Layout “聰明布局”；（這翻譯好別扭o(*￣︶￣*)o）
· Figma叫Auto Layout“智能布局”；
· Adobe XD叫Content-Aware Layout“內容感知布局”；
· Invision Studio叫Responsive Layouts“響應式布局”；
其中Figma的Auto Layout可以實現更為復雜的效果，同時嵌套邏輯也更復雜。Invision Studio的Responsive Layouts的功能稍弱，只能實現一些簡單的自適應效果。Invision Studio響應式布局的核心是使用百分比的單位。
Invision Studio ↑
Sketch ↑
Figma ↑
Sketch ↑
數據填充是我們做設計的時候經常遇到的問題，就是填充一些頭像、圖片、文字等模擬的數據，它可以使我們的設計效果看起來更真實，代入感更強。數據填充可以分為兩大類型：
一是隨機的數據
隨機數據內容不可控，它們都有這樣的插件，其中sketch自帶這個功能。
二是自定義數據
定義自己想要的文字和圖片。比如同時支持Figma、Adobe XD的Google Sheets插件。
· Sketch可以自定義本地的圖片和文本或者使用插件如Kitchen等；
· Figma可以通過Google Sheets插件實現自定義數據，或者用其他插件進行隨機數據；
· Adobe XD可以直接拖動本地的圖片和文本進行填充，或者使用其他插件；
· Invision Studio可以通過“Data”插件實現隨機數據或定義本地數據。
Adobe XD ↑
Sketch ↑
Figma ↑
原型功能是一站式設計的不可或缺的功能。這一點Figma、Adobe XD、Invision Studio的體驗是比較一致的。
· 可以實現不同的交互方式如點擊、滑動、長按等等；
· 可以實現不同的交互效果如緩入、緩出、線性等等；
· 可以以連接的形式分享給他人；
· 可以在手機上預覽并實際的操作；
Sketch只能實現簡單的跳轉和過渡，當然Sketch可以借助它的最佳拍檔Principle完成復雜的交互動效。
Figma、Adobe XD可以實現帶有過渡效果的動效，也就是補間動畫。因此可以完成更真實的交互效果。
Invision Studio的原型功能最完善，因為本身Invision Studio就是同時借鑒了Sketch設計部分和principle動效部分，可以調整動效的關鍵幀以及動畫曲線。所以Invision Studio可以實現更復雜的交互效果。但Invision Studio的彈性效果不能像Principle那樣自定義張力和摩擦力，也就是彈性幅度。
Invision Studio ↑
Invision Studio ↑
Figma ↑
Invision Studio ↑
Invision Studio ↑
實時協作是團隊協作的重要體現。實時協作概況來說就是多人實時編輯同一個文件，就像打LOL一樣。它給我們帶來的不僅是工作流程的改版，也是逐步改變了我們的思考方式和工作方式。
這也是很多軟件的發展趨勢，如各種協作文檔，前面提到的ProcessOn，以及最新版本的墨刀也增加了實時協作功能。相信實時協作將在不久的時間里大放異彩！
在實時協作方面Figma無疑是在這四個軟件里面出現最早的，Figma也是非常的穩定。
Adobe XD緊隨其后，并且Adobe的實時協作體驗也非常的不錯，不過免費用戶只能兩個用戶編輯。
Sketch也增加了實時協作，目前還在測試階段。
Invision Studio的實時協作不是共同編輯設計稿，而是在設計稿上實時進行涂鴉式的討論。
Adobe XD ↑
Figma ↑
Figma ↑
Invision Studio ↑
工作交接可以分為三個方面
一是設計分享，他人或者團隊成員可以通過鏈接看到你的設計稿。
二是設計討論，就像藍湖、Zeplin一樣，進行打點的評論，@團隊成員，回復等。
三是交付前端，就像藍湖、Zeplin一樣，查看代碼信息下載切圖。
Figma、Adobe XD、Invision Studio在工作交接上的體驗是一致的，Invision Studio的設計討論更加靈活，可以進行多人實時討論。
Sketch也增加了這樣的功能，但由于我們的使用環境等問題，我們一般還是習慣借助藍湖等第三方軟件實現這樣的工作交接。藍湖也支持Adobe XD。
Figma ↑
Invision Studio ↑
Figma ↑
Invision Studio ↑
Figma ↑
Sketch ↑
插件極大豐富了軟件的功能和軟件之間的協作。所以他們都很鼓勵更多的人開發插件。
說到插件，不得不提到Sketch，由于Sketch用戶基礎廣，所以它有非常完善的插件生態，也吸引了很多開發者創作插件。
Figma、Adobe XD、Invision Studio雖然起步相對較晚，但他們的插件數量也在快速的增加。
Sketch里非常優秀的craft插件，就是Invision團隊開發的。
Sketch ↑
Figma ↑
Adobe XD ↑
Invision Studio ↑
這里說的資源包括：設計文件、作品、第三方控件、教程等。
Sketch的資源是最豐富的，因為它出現較早，經過了多年的發展，互聯網上已經有非常多的關于sketch的資源。但大多集中在第三方網站，sketch官方資源較少。
說到資源，不得不提到Figma社區，Figma的社區集中了絕大部分的資源，包括作品、控件、插件等等，加上Figma本身云端的特性，使用起來非常的方便，比如插件，點一下安裝按鈕即可。
Adobe XD也有自己的社區，當然這個社區不僅是是XD的，包含了Adobe的很多軟件，打開Creative Cloud 在Discover一欄就能看到相關的內容。
Invision Studio由于國內使用者相對較少，所以資源也相對較少，特別是中文資源，Invision Studio的資源可以直接去它的官網查找。Invision Studio自帶的Studio App Store還處于bate版本，不過已經收集了幾十套的文件資源和插件。
Sketch ↑
Figma ↑
Adobe XD ↑
Invision Studio ↑
如果分別用一句話總結他們的核心特點，那就是：
· Sketch群眾基礎強大，“功能不夠，插件來湊”，Mac獨寵
· Figma云端軟件，協作無敵
· Adobe XD 大廠軟件，多軟件協作便捷
· Invision Studio設計與動效融為一體
Sketch是最早在UI設計師中流行的一款軟件，但被只能在mac電腦上使用，這就把很多人拒之門外。Sketch受到后起之秀Figma、Adobe XD很大的沖擊，但也促使sketch更好的發展，比如也開始加入實時協作。但不能否認Sketch目前仍在UI設計工具中占據首位。
由于Sketch需要付費使用，加之我們的使用環境，它自帶的很多功能我們并用不上或者不好用，我們可以借助插件完成。Sketch的插件系統十分強大，很多工具都有為sketch開發插件，像藍湖設計規范云、墨刀、摹客等等。
關于Sketch的教程網上非常多，可以在B站上搜索sketch，會有非常多優秀的教程。比如
像素范https://space.bilibili.com/15741969/
新像素 https://space.bilibili.com/389903587/
優設基礎訓練營https://space.bilibili.com/39990344
Figma是“后軟件時代”的典型代表。云端、社區、協作等特點使他能夠在短時間內被行業追捧。不管你認不認同這種趨勢，它就在那。
但就我們國內的使用環境，還存在一些不好的體驗：
一是被很多人詬病的依賴網絡問題，就算有網也可能加載較慢，可能還需要更科學的上網方式。這一點體驗確實不好，不過并不影響它的正常使用。但作為UI設計師難道不應該經常去看一些設計網站嗎，科學的上網方式不應該是我們UI設計師的一項基本技能嗎？
二是前端交付問題，它不支持藍湖，或者說藍湖不支持Figma，我們國內很團隊都在使用藍湖，這一點使得它的遷移成本較高。
Figma比較出名的是它的實時協作，多個人同時編輯一個文件，這種體驗真的很棒。
關于figma的教程，我自己精心錄制了一套完整的figma教程，從基礎操作，到高級使用技巧，再到交互動效制作，是一套非常系統的課程，墻裂推薦哦~《figma教程》點擊查看
Adobe XD的路徑編輯很弱，連輪廓化描邊都需要借助插件，詢問Adobe官方，回答是后續可能會增加這樣的功能，目前讓從AI導入，或者使用Astui插件，好吧，畢竟是大佬，你說的算。
· Adobe XD的實時協作需要軟件版本一致。
· Adobe XD的重復網格+自定義數據填充很方便。
· Adobe XD還有一個顯著的特點就是屬于Adobe系列，多軟件協作特別方便，比如直接在ps里面編輯位圖，直接導入AI文件，直接導出到AE去做交互動效。
· Adobe XD的組件和共享用不了，這個問題很好解決，在我的教程里會講到。
關于Adobe XD的教程，網上也有很多的優秀資源，比如牛MO王老師的XD教程→。但這些教程并沒有詳細講到團隊組件、協作等。所以我自己做了一些教程《Adobe XD進階使用教程》，還在陸續更新，歡迎大家學習 傳送門→
· Invision Studio最大的特點就是直接做動效，就像是sketch+principle的合體。
· Invision響應式布局的核心是用百分比的單位；
· 目前沒有多人實時編輯，但有多人實時討論；
Invision Studio是Invision眾多產品中的一個，Invision包括Invision Cloud、Invision Studio、Invision DSM。
其中的Invision DSM的服務對象是Sketch，簡要來說就像是藍湖為Sketch做的設計規范云。或者應該說設計規范云像Invision DSM；Invision Cloud還包括了Craft插件，Craft是使用在ps和sketch上的插件。
關于Invision Studio的教程，網上資源相對較少，如果你使用過前三個軟件，那么只需要熟悉和習慣一下操作就完全可以上手。也可以去它的官網，有詳細的使用方法和視頻。
只要不是用ps就是進步
1、根據團隊使用情況選擇
2、如果是萌新用戶建議選擇Figma或Adobe XD
3、如果網絡不允許可以選擇Adobe XD或Sketch
4、如果想探索更多的不同可以選擇Invision Studio
5、至少可以選擇Adobe XD+藍湖
他們都存在體驗不好的地方，但他們都在快速的更新，這也很好的體現了快速迭代的產品思維。
上面提到的軟件功能大部分經過親自測試，難免有錯誤和不足歡迎大家指正！
就在我寫這篇文章的同時，Adobe在10月20日召開了一年一度的Adobe MAX大會，大會的主要內容是：新應用，新功能以及更快，更輕松的協作方式。有興趣的同學可以看一下這個60秒的短片 點擊查看
也是在10月20日Adobe XD發布了34版本，這個版本的新增功能有：3D變換、組件嵌套、用于團隊協作的Creative Cloud庫、增強智能布局、共同編輯從bate版變為正式版、更多的插件。
3D變換除了做一些帶透視的設計，還可以結合Adobe XD的自動動畫做出來更多的效果，以下是我的一些簡單的嘗試，期待大家創作更多腦洞大開的效果。
組件的嵌套可以使Adobe XD像Sketch和Figma一樣實現更復雜的效果。
最令人欣喜的是它智能布局增加了自動高度文本，這使得Adobe XD的智能布局更趨近Figma，配合組件嵌套給我們提供了更多的創作空間。
Sketch在10月份也更新了69版本，增加了助手、字體嵌入、組件管理等功能。
Figma最近也更新了很多功能，如優化了組件調用、增強原型等，并預計在11月份更新Auto Layout功能。
參考資料
作者：丁小祥
鏈接：https://www.zcool.com.cn/article/ZMTE4NzE1Ng==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
藍藍設計(m.ocunn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司
銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發