Sketch學習筆記（一）-基礎介面與工具

Sketch學習筆記（一）- 基礎介面與工具. 今年才同時接觸了Mac系統與Sketch，從整個和windows完全不一樣的陌生使用者介面和體驗，直到使用Sketch做完整個專案，對Sketch ... HomeNotificationsListsStoriesWriteSketch學習筆記（一）-基礎介面與工具Sketch學習筆記今年才同時接觸了Mac系統與Sketch，從整個和windows完全不一樣的陌生使用者介面和體驗，直到使用Sketch做完整個專案，對Sketch了解不少，為了增加自己的印象與分享給其他和幾個月前的我一樣初次接觸的新手，決定整理出一系列「Sketch學習筆記」！Sketch基本介紹Sketch是目前很夯的UI設計工具，目前僅支援MAC系統。

為年費制，到期還是可以使用，只是無法更新版本。

官網：https://www.sketchapp.com/Adobe也有出一款UI設計工具名為AdobeXD，也非常值得研究！另外，目前也漸漸出現更多專為UI設計而生的工具，例如Figma、Lunacy等…相信一定還有更多我沒聽過的工具，未來設計UI也會越來越便利！歡迎介面打開Sketch會看到如下的歡迎畫面。

Sketch歡迎介面（版本52.5）右欄上方可切換選單（Recents/Template），如果近期開過其他檔案，則會顯示在Recents列表中（按右鍵可以選擇clean）在Template選單中，可以選擇打開規範元件庫或範例檔案，或者開啟一個全新WebDesign專案，Sketch將自動建立好artboard基本操作介面Sketch基本畫面（已自行安裝Anima工具）這篇會大概簡述一下有哪些工具，後面的筆記才會介紹得更詳細喔！整個Sketch畫面大致如下：上方：工具列左側：圖層面板右側：元件細節設定中間白色區塊：畫布，基本上沒有邊界新增工具新增元件工具在預設最左邊的加號Insert工具中可以新增各種元件。

除了元件，要增加Artboard（設計面板）/切片（Slice）/感應區（Hotspot）也在這裡！工具列表解釋如下：Shape：用以新增各種形狀Vector：鋼筆功能，用法與其他繪圖工具的鋼筆相同，以向量方式新增點線面Pencil：同Illustrator鉛筆功能，計算手繪最佳路徑為向量線條Text：文字工具Image：插入圖片工具Artboard：要啟動一專案，必須的功能，畫布上的畫布（後續會再說明）Slice：切圖工具Hotspot：prototype設定工具，可以設定link範圍，不限於元件Symbols與TextStyle可以置入IOS規範的元件與字體樣式Data工具這是新版的重大更新之一，以前想要做隨機的資料，需要安裝一個叫做「contentgenerator」的外掛，在新版的Sketch中不但不用安裝這個外掛，資料還可以自行設定！是一個超棒的更新！後續再介紹如何使用它！群組與元件編輯工具群組與元件編輯工具Group/Ungroup：編輯/解散群組，用法同Illustrator。

按著Command可以快速選擇單一圖層（無論是否被群組）。

Group的快捷鍵為Command+G。

CreateSymbol：新增元件。

在專案執行的過程中，設計需要盡可能地將元素元件化以求更高的效率（不管是在設計面或是程式面上），使用元件新增將會開啟一個新的Page，專門存放元件，預設名稱為「Symbols」，可以自行改名。

Zoom：視窗控制。

可以手動點增減或是快捷鍵Command+滑鼠滾輪，也可以點擊中間的％數，有選單可以選擇！圖形編輯工具圖形編輯工具Edit：單點編輯Transform：形變Rotate：旋轉Flatten：展開路徑路徑編輯：聯集/減去/交集/差集Mask：遮色片工具Scale：縮放MakeGrid：格線複製工具圖層順序編輯：往上移/往下移原型製作工具prototypingtools這系列工具是建立互動原型用，不過市面上其實也有不少相關工具，Sketch目前提供的動效較少，後續會再介紹！設計輔助工具設計輔助工具這邊可以開啟或關閉一些尺規與格線輔助工具。

輸出工具圖片輸出工具可以輸出畫面與元件切圖…等，Sketch還支援jpg/png/svg等各種格式。

自定義工具列在上方工具列中點下右鍵，就會出現自定義調整視窗。

工具列顯示方式設定你可以設定同時顯示Icon和工具名稱，也可以只有Icon或只有名稱。

選擇CustomizeToolbar，可以自行拖曳出自己喜歡或慣用的順序！連「空格」都可以自訂的選單～那麼！基本的介面與上方工具列的概述就到這邊！後續會再繼續介紹更多的工具使用方式與圖層和元件編輯介面喔～以上是我的Sketch學習筆記，若有錯誤的地方歡迎大家討論指正！如果你覺得這篇文章還算實用，有幫助到你的話，請不吝給我一點掌聲！給我繼續寫作的動力喔！相關文章：Sketch學習筆記（二）-ArtboardMorefromWenChienLeeFollow一個喜歡分享的UIUX設計師！這裡分享各種講座與工作坊心得、工具教學、推薦書單、職涯觀點和生活體驗！Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableGetstartedWenChienLee803Followers一個喜歡分享的UIUX設計師！這裡分享各種講座與工作坊心得、工具教學、推薦書單、職涯觀點和生活體驗！FollowRelatedBuildingresponsivepagesonBubbleIrecentlyupdatedmywebapp,builtusingBubble,toberesponsive.Hereisachecklistofitemstokeepinmindifyou’reattemptingto…AnotherPlannerAppWhatmakesgooddesign?Whatmakesagoodexperience?Adiscussionaboutusingsoftwaredesignprinciplesinarealworldapplication.NationalTrustBookingTicketsintheApp!UI/UXCaseStudyDelivaAppproject.LinktoworkingPrototype…HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable