P&G副總裁曾經說過：我覺得自己一直都在做相同的事，工作起來很無力。

同樣的事物，同樣的崗位，不同的時期內容與方向都會改變。舉個簡單的例子：

  • 過去，公關負責辦活動，記者會、新品發布會等。
  • 現在，要做消費者間的口碑傳播，讓消費者覺得品牌可信。

兩者雖然是同樣的崗位，但是所需的能力和要做的事情已經變得不同了。

如果一直用同樣的思維來面對自己的工作，而無法跟上外面世界的變化，很容易就被世界拋棄。

同樣做UI設計，5年前都是以Photoshop設計和製作為主。現在呢？已經出現了三足鼎立的現象，現在國外流行以Sketch、Adobe XD、Figma這三款軟體為主。

未來發展會變快，嘗試使用數字工具來做事，更有利於讓自己繼續前進。

UI/UX工具發展趨勢

「易用性第一，體驗性第二。」

2018年是設計師在設計時考慮到易用性的一年，設計不斷適應著用戶的新需求，雖然我們不大可能預測太遠的未來，但是我們仍然可以對UI/UX的未來幾年的發展趨勢有一個基本的猜測。

原來單純以設計用戶界面為生的設計師，將會在職責上有所變化。

近期，一位來自谷歌的設計師爆出了一個很驚人的結論，在美國矽谷單純的UI設計師越來越少了。如果一個視覺設計師不懂產品，不懂交互設計，不懂用戶體驗設計，基本上就沒有出路了。

這從側面也印證了一點，視覺、原型和交互可能纔是UI的真正發展方向和最終形態。

今天我們來探討2018年影響用戶體驗設計領域走向的重要因素。

簡單來說，如上圖所述，新一代設計工具應該滿足三個特點：

  • Design：高保真設計
  • Phototype：低保真原型
  • Handoff：交互流程

更有大膽預測，到2019年，這部分的工作會被機器人（Ai）替代。

更有大膽預測，到2019年，這部分的工作會被機器人替代這個流程裏大部分的工作。

矽谷設計師用什麼工具？

看了很多來自矽谷設計師分享的文章，他們的職責是分析問題，解決問題，並用視覺傳達的方式使用戶有更好的產品體驗。很多UX設計師或UX研究員(UX researcher)都具有心理學、統計學的背景，他們通過定性與定量的分析來規劃出一套更好的界面框架。

所以他們需要三合一的策略，即將原型、高保真設計以及交互流程組合成統一的流程。

如果說具體到什麼工具？大致現在流行軟體如下。

  • Figma ：協同交互設計工具
  • Adobe XD：PHOTOSHOP家的輕量級界面設計工具
  • Zeplin：界面交付工具
  • Stage & Gallery：基於安卓Material的設計工具
  • Sketch：界面設計師常用工具
  • Framer：形成帶有代碼特性的工具
  • ProtoPie：快速生成交互&原型的工具

中國設計師用什麼工具？

國內的設計環境，特別是專業團隊，用的工具，和矽谷並沒有多大的差異。但是不同之處在於，由於環境的差異，大部分新入門的朋友，還是以Photoshop入門為主。

其實真正的UI設計，涉及的軟體都比較龐雜。基本下面這幅圖已經涵蓋現階段能使用的大部分UI/UX工具。

Great for static wireframes：創建線框原型工具

Ideal for click-through prototypes：創建設計視覺稿工具Interaction and hi-fi tools：交互&高保真效果工具

具體可以查看：prototypr.io/prototypin

未來用什麼工具？

未來機器人AI會搶走你的工作嗎？

相信很多人對上面的問題都有所擔心。怎麼判斷未來這個職位會不會消失呢？

有個網站，能查出崗位未來的需求量。

打開網站後，輸入要查找的職業名稱（英文），比如說cashier（收銀員）， 網站會顯示，有97%機率可能在未來被機器人取代。

每個關鍵字底下會有說明，為什麼這個職業未來可能會面臨失業的風險。

輸入以下網址查詢：willrobotstakemyjob.com

cashier：收銀員

Interior Designers：交互設計師

看到這裡，恭喜各位設計師，暫時你們還是相對安全。

下一代設計工具是什麼？

做設計這一行，需要幹到老學到老，姑且不提Photoshop、Illustrator等軟體的持續更新，新軟體層出不窮的出現。為了提高工作效率，很多知識是需要重新學習和掌握。

留意設計新聞的同學可能注意到，中國時間7月20日，簡體中文版Adobe XD CC正式來到我們身邊。

簡單來說對比其他工具，它的特點：

  • 完全免費提供
  • 兼容Windows和Mac
  • Adobe爸爸全力支持它的發展

瞭解這麼多，我特意結合UI設計工作中常用的工作習慣，輸出簡體中文版Adobe XD CC 的使用技巧，掌握這些技巧後，工作也會變得更加輕鬆。

現代流程的應用設計流程

原型草圖——視覺界面——交互流程——設計分享——協同反饋——重複

標準的UI設計過程或多或少都是這樣。以往，我們可能需要不同的軟體協作才能完成這樣的流程，譬如設計工具（Sketch，Photoshop，Illustrator），協同工具、交互工具和反饋工具等。

新一代的界面設計工具，都是將這些功能集合到同一個應用中實現。因為恰逢簡體中文版Adobe XD CC發布，我們看看這個版本有沒有完全跑通這套流程。一個軟體能集中這套流程，就已經是相當大的優勢了。

下載免費使用地址：

下載免費的 Adobe XD CC | UX/UI 設計、協作工具

軟體在啟動界面就有教程入口。跟著教程做一遍大概需要十分鐘時間，就能基本瞭解操作流程。

設計和交互模塊基本都能在下圖頂部標籤找到，即設計為視覺稿設定，原型為交互稿設定。

整體來說入手難度不大，有良好的入門指引。我基本操作了15分鐘，基本完成一個界面的設計和交互流程。

如果你還在猶豫，值不值得花時間學習，不妨看看我發的XD黑科技技巧，或許你會對它如何提高效率，幫助你更快更好完成設計有更清楚得認識。效率就是生命，我從來不拒絕能偷懶且提高速度的方法。

快速複製&粘貼樣式

有時候，頻繁的調整是每個設計師的必修課。往往最常用的功能就是，將A的樣式複製給B，或者反過來操作。

現在，你只需點擊【複製命令】，再點擊【粘貼樣式命令】即可。當然，你可以根據快捷鍵快速實現相同的效果。

快捷操作：

複製 MacOS：?+C Win：Ctrl+C

粘貼外觀/交互 MacOS：?+?+V Win：Ctrl+Alt+V

極速生成相同的元素

我覺得這是XD最重要的功能【重複網格】，只需要3秒，就能快速生成一堆相似的模塊。

具體操作很簡單，選擇一個或多個對象，點擊重複網格。神奇的事情出現了，你會看到那個對象的x軸和y軸可以自由調節。一拉一拖，就能生成相同的元素，就這麼簡單。

快捷操作：

點擊重複網格 MacOS：?+R Win：Ctrl R

滑鼠拖拽邊框

原來我們的工作流程都是需要一個個複製元素，效率實在有點低。這項操作，能夠使我們的效率有著極大的提升。如果每個元素都能快速的增加或減少數量，那我們就有更多時間處理別的問題。

原來你只能出一版的設計，現在能出3-4版，這不是顯得我們更為高效麼？

快速生成小控制項

控制項是每個界面設計師需要常常面對的東西。譬如圖片輪換的小按鈕，一個為當前高亮狀態，其他為置灰狀態。

以往，我特別討厭做這個，因為操作起來很機械，即繪製好高亮和非高亮狀態，複製，排列，對齊，調整好位置。雖然都是瑣碎的動作，但是當要創建多種控制項時，難免讓人很麻木。

現在，利用上面說的重複網格，就能做到類似的效果，且創建速度很快，修改調整也很快。

快速填充真實數據

這樣的數據結構看起來十分的蒼白。如果是以往的工作方式，需要做到真實的效果，要一個個找圖和文字，那樣效率實在太低了。

怎麼辦？在其他軟體裏能通過插件快速實現填充。在XD裏，不用通過插件就能快速填充了。

現在這樣的填充方式主要有三類：

  • 簡易關鍵字填充內容（中文版暫時缺失）
  • 從網路直接添加（中文版暫時缺失）
  • 從文件添加

圖片來源於網路

從文件拖拽填充內容

將文本文件（.txt）拖放到重複網格中的元素上，既能快速批量替換一大批的文字。唯一可惜，前期你需要整理收集常用的關鍵字列表，譬如標題、姓名、年齡、摘要等數據。

快速將元素放到想要的位置

基本每個設計師，除了保存命令外，最常用的命令就是複製/粘貼。之前的操作裏，有個明顯的缺陷是，複製時，我想新創建的元素在所有元素的最上方。這基本很難通過一個命令解決。

現在，Adobe XD有個方法能令我們快速實現將元素放到想要的位置。

1、同一層級複製

快捷操作：

點擊重複命令 MacOS：?+D Win：Ctrl+D

按住alt+滑鼠拖拽

2、複製到所有元素最上層級

快捷操作：

點擊複製命令 MacOS：?+C Win：Ctrl+C

點擊粘貼命令 MacOS：?+V Win：Ctrl+V

快速生成不同的網格系統

柵格系統英文為「grid systems」，也有人翻譯為「網格系統」，運用固定的格子設計版面佈局，其風格工整簡潔，在二戰後大受歡迎，已成為今日出版物設計的主流風格之一。

在整個設計領域，網格系統的作用很重要。特別對於新手設計師，能幫助其快速創建出符合現代審美標準的設計。

在XD中，你只需要選擇畫板。點擊右側網格菜單【版面】，即能開啟這個重要的功能。

快捷操作：

柵格 MacOS：?+?+』 Win：Ctrl Shift

網格 MacOS：?+』 Win：Ctrl

快速複製和遮罩圖片

圖片遮罩，是一個很常用的功能。以往用Adobe的相關軟體做類似的操作，效率比較慢。

比較驚喜的是，現在只要將圖像直接拖放到XD中對應的圖形裏，就能完成遮罩填充了。在任何形狀裏都能完成這樣的操作，明顯這是一個利好的消息。而且它是非一次性操作，雙擊圖層，還能進行進一步的調整。

快速導出不同的元素

界面設計跟平面設計有一個很大的不同。就是需要給不同的設備輸出不同尺寸的設計。如果你給每一個尺寸都做一個設計的話，那工作量就會顯得非常龐大。

這時候，如果有工具能直接在一個操作裏輸出不同尺寸的素材就顯得很棒了。

  • 能導出web格式。
  • 能導出ios格式素材，1x、2x和3x版本。
  • 能導出Android格式素材，ldpi、mdpi、hdpi 、xhdpi、xxhdpi、xxxhdpi版本。

總結：簡體中文版Adobe XD CC，值得一試的三個理由

恰逢簡體中文版Adobe XD CC發布，相對於英文版，它顯得還不是那麼完美。不過它已經提供一種加快工作思路，以及一些優秀的功能。

如果你想第一時間瞭解，這款新發布的工具。

免費下載使用地址：

adobe.com/cn/products/x

我相信以Adobe的背景，這款工具會變得越來越完美。後續簡體中文版的更新，官網介紹可以到其公眾號查看最新的教程和更新內容說明。

圖片摘自於Adobe官方公眾號號

簡單來說對比其他工具，它的特點：

  • 完全免費應用提供給我們
  • 可以在Windows 和 Mac 上安裝
  • 擁有很多獨家的功能，特別是重複網格系統

相關資源：

[1] 、20 Free Adobe XD UI Kits for Web & Mobile App Designers20 Free Adobe XD UI Kits for Web & Mobile App Designers[2]、Adobe XD — 30 Tips & Tricks you wish you』d known earlier!Adobe XD — 30 Tips & Tricks you wish you』d known earlier![3]、Adobe XD: Designing with Real DataAdobe XD: Designing with Real Data – Anirudh Sasikumar – Medium
推薦閱讀：
相關文章