實用Sketch Plugin分享(二)

Wei-Hsun Chen
UXeastmeetswest
Published in
7 min readSep 25, 2018

<<本文適合使用Sketch的人>>

上篇小編分享了一些在做用Sketch設計時幫助省時省力的插件,以下文章歡迎複習

今天再來分享一些適合像小編懶惰的個性的人使用的插件!

懶人專用: User Flow

UX設計師必須情楚的跟開發者、產品經理、軟體工程師或QA說明介面流程來說明產品介面間的關聯和邏輯,除了使用產品原型製作工具來讓使用者直接使用外,有時為了讓可以了解整個架構常常必須畫出整個使用流程。User Flow這個插件可以讓大家省時省力不用在自己慢慢手動畫線!

只要選好圖層或Group以及畫板,按下快捷鍵User Flow及幫你做出線來!另外也可以設定狀況(If, else…)非常方便!

懶人專用: Sketch Runner

Sketch Runner讓你使用一個快捷鍵就可以快速選擇Sketch裡的Menu項目,像是複製、插入Symbol、套用風格等等,甚至是下載新插件等,讓你不用一直點選尋找功能,再也不用離開鍵盤惹!

懶人專用: Sort Me

有時做設計時一個page裡面有上百個畫板,整理起來是非常的耗時耗力,Sort Me幫你依照你的artboard名稱自動做整理,是個非常好用的小插件!

懶人專用: Pixel Perfecter

完美像素(Pixel Perfect)在設計時會造成讓設計看起來清不清楚以及銳利的要素,譬如說你的按鈕設計沒有Pixel Perfect而在小數點上,螢幕無法呈現小數點時會以半透明的方式來去呈現,即會造成按鈕看起來“糊糊的”。

https://www.quora.com/What-does-pixel-perfect-mean

在以往檢查起來非常麻煩,這個小插件能幫你尋找有沒有非Pixel Perfect的畫板(包含非整數x,y,z,heigh,width的物件的畫板),非常方便!

有趣插件:Looper

Looper讓你可以複製、旋轉、放大縮小物件,可以創造出蠻有趣的pattern,創作時是蠻好玩也省力的插件。

http://sureskumar.com/looper/

無障礙設計插件:Color Contrast Analyzer

大約有8%的男性有有色彩認知障礙,而世界上有15%的人有各種不同程度的殘疾,在做設計時將Accessibility(無障礙)考慮在心中,從而讓產品更直覺的易用。Microsoft Inclusive Design更倡導了設計從Accessibility(無障礙)為角度出發,可以在不同的情境下造福更多的使用者。譬如說,從為“一隻手臂”的使用者出發設計一個產品,更可以造福像是手臂受傷的使用者(暫時性有障礙),或是抱著嬰兒的使用者(情境下有障礙)。

W3C出的”Web內容無障礙指南”(Web Content Accessibility Guidelines, aka WCAG)為了幫助大家有更好的體驗而制訂了無障礙標準,顏色屬於“易於感知”(Perceivable)的無障礙設計範疇,亦即為資訊和介面必須讓使用者能夠容易的辨識出來。詳情有興趣的讀者可以閱讀他們的網站:

或是這位知乎小夥伴所做的整理:

總而言之基本上顏色對比有一定的標準,而這個插件讓你輕鬆的去檢查是否符合WCAG制訂的AA和AAA的標準!

https://github.com/getflourish/Sketch-Color-Contrast-Analyser

如何安裝插件?

當你下載好插件後,只要點兩下.sketchplugin 的檔案Sketch及會複製插件在你的Plugins夾裡,或是你也可以手動將插件拉近Plugins文件夾裡。

要管理或刪除插件只要去Plugin → Manage Plugins 即可! Easy peasy!

謝謝大家的收看!也來留言分享你最愛的插件吧~

也請喜歡的朋友麻煩不吝嗇給我們拍手👏👏🏻👏🏽和幫忙分享呦😁

-Wei

--

--

Wei-Hsun Chen
UXeastmeetswest

Product Designer @DocuSign. ex-Meta/Shure. Taiwan originate. Passionate about music, innovation and social issues.