-
1 # Breanna設計分享
-
2 # FuhoMini房子
Mac平臺目前最主流的UI設計軟體就屬【Sketch】了，國內外的一線公司基本上都是使用這款軟體做UI設計的，包括國內現在很多中小網際網路公司，大部也是用Sketch做為主力設計軟體的。
我就下面幾點特殊說明下吧
Sketch 是最強大的移動應用向量繪圖設計工具，對於網頁設計和移動設計者來說，比PhotoShop好用很多！尤其是在移動應用設計方面，Sketch 的優點在於使用簡單，學習曲線低
目前最新版為Sketch 58，需要macOS High Sierra（10.13.4）或更高版本系統。
Sketch是專為像你這樣的UI設計師設計的。
有非常實用的功能，直觀的介面和強大的外掛，它有助於你更專注於做最好的設計。
Sketch軟體介面，簡單清新，易操作
頂部的工具欄包含所有重要的工具和操作。 右側的檢查器可以調整所選圖層的屬性。 左側窗格是圖層列表，並列出文檔中的所有圖層和圖板。 最後但並非最不重要的是，中間的畫布是您將看到您的設計的地方。
沒有浮動面板。 相反，檢查器會適應每一時刻向您展示所需的工具，並隱藏所有其他工具。 這樣你總是有一個完全視野的檢視畫布。
Sketch的畫布
Sketch的畫布是無限大小的; 您可以在任何方向無限滾動，因此您可以完全自由地設定您的繪圖區域。
如果您想在無限畫布中定義一個固定框架，只需插入一個或多個畫板。 例如，當設計移動介面時，許多設計師為應用程式中的每個螢幕建立一個“畫板”，並按外觀順序排列。
您可以在具有無限精度的獨立於解析度的檢視中檢視畫布，也可以開啟畫素預覽，您將會準確瞭解每個畫素在匯出為點陣圖格式（如JPG或PNG）時的外觀。
檢查器
右側的檢查器可讓您調整當前圖層的設定或當前工具的選項。當您選擇圖層時，您將看到檢查器分為幾個部分。
觸控欄
對於MacBook Pro使用者，Touch Bar可以作為任何應用程式中的附加窗格，Sketch也不例外。根據您在應用程式中的操作，Touch Bar將顯示與該特定上下文相關的控制元件和快捷方式。
Sketch Mirror iOS裝置實時預覽（Android藉助第三方APP也可以實時預覽）
Sketch Mirror允許您透過Wi-Fi網路在iPhone或iPad上實時預覽您的設計，或透過USB閃電線連線。結合本地分享，您還可以使用網路瀏覽器在任何裝置上預覽您的設計。
透過外掛Sketch Measure一鍵匯出Html 免去標註煩惱
當然了，你也可以使用線上工具，例如【藍湖】等，不過如果對保密要求高的公司，建議使用離線外掛吧，畢竟把原始檔上傳，容易資訊洩漏的。不過付費部署企業級伺服器也是可以的，這樣安全也是有保障的，我們一般都是使用離線外掛的，Sketch Measure還是挺好用得。
下載安裝包雙擊 Sketch Measure.sketchplugin 完成安裝
執行 Plugin > Sketch Measure > Toolbar 或使用快捷鍵 control ⌃ + shift ⇧ + B
AEUX-Sketch一鍵匯入AE工具-支援最新版Sketch前身是Sketch2AE
喜歡用Sketch做圖，然後用AE做動畫的同學們的福音啊
使用您喜歡的工具進行UX動效設計
AEUX是After Effects和Sketch 52+的一組面板，用於將圖層傳輸到After Effects，從視覺設計到動效。
AEUX以前稱為Sketch2AE，旨在跟上人們為螢幕設計的最新方式。
本次更新，修復了 AE CC 2019 外掛安裝不了的BUG
工作流程
Sketch
從頂部外掛選單中開啟Sketch中的外掛面板在Sketch中選擇圖層使用以下任一方式傳Ae -layer資料的選擇在幕後傳輸匯出AEUX.json – 圖層資料儲存為檔案影象（如有必要）將匯出到您指定位置的磁碟匯出完成後會彈出通知切換到After EffectsAfter Effects
從頂部選單“ 視窗”>“擴充套件”中開啟AEUX面板。
拖放可以將圖層資料匯出為獨立的.json檔案。透過單擊匯入或將檔案放在AEUX面板上來匯入此檔案。
安裝方法Sketch
要求：Sketch 52+
舊版本sketch請使用sketch2ae, 文章底部下載連結包含了新版和舊版外掛。
雙擊AEUX.sketchpluginSketch將開啟並告訴您外掛已安裝裝好外掛後，開啟sketch，選擇 外掛>AEUX，開啟外掛面板After Effects
要求：After Effects CC2014 +
安裝ZXP Installer將AEUX.zxp拖到ZXP Installer中關閉並重新開啟After Effects開啟“視窗”選單，找到“擴充套件”組，將看到AEUXAEUX.zxp安裝成功，如下圖所示
Sketch智慧物件Angle外掛一鍵製作透視模型-Angle Plugin Mockup
使用Angle外掛Angle外掛一鍵放置螢幕製作透視模型適用於巢狀符號
一個免費的 Sketch 外掛，讓您能夠將螢幕放入透檢視模型中。並附送100+免費裝置模型。
安裝
下載並解壓 雙擊 完成安裝開啟Angle Library Free.sketch，即可使用了。使用
選擇或者新建或選擇一個（多個）作為轉換源的畫板（放置 UI 介面）繪製或選擇一個（多個）作為轉換目標的形狀圖層選中目標形狀圖層，執行 Plugins > Angle > Apply Mockup 或使用快捷鍵 command ⌘ + \ 對源畫板進行轉換，多源畫板或多轉換目標將彈出選擇對話方塊執行 Plugins > Angle > Flip Mockup 或使用快捷鍵 command ⌘ + shift ⇧ + \ 對轉換效果進行水平翻轉執行 Plugins > Angle > Rotate Mockup 或使用快捷鍵 control ⌃ + \ 對轉換效果進行順時針旋轉
回覆列表
UI如果翻譯成user intreface，那需要推薦的軟體還挺多的。
互動設計：AI +Indesign，Sketch，Axure，墨刀等；
視覺設計：Photoshop，Sketch，Adobe XD等；
三維建模：C4D等；
動效：After Effect等。
不要迷信軟體，選每一項前幾個學習下。最重要的是想法。