Sketch Plugin – Zeplin vs. Sympli

本篇文章轉載自 Sketch Plugin – Zeplin vs. Sympli ,作者是 Water Chen。這篇文章主要是介紹 UI 的標註與協作工具: Zeplin vs. Sympli (Sketch Plugin)。想知道這兩套的差異?優劣勢各在哪?這篇就是了!

Sketch Measure – 早期用 Sketch 做介面的標註工具。
優點:可以選擇要標註哪些資訊,自動算出間距,自訂樣式。
缺點:畫面凌亂,得輸出多張標註圖或請工程師安裝 Sketch. (Mac Only)

Sketch Measure 

 

Zeplin

便於團隊交流,線上檢閱 Sketch 檔;免標註自動顯示資訊,建立簡易 Style Guide;用網頁版或 APP 版都能通。

直到發現 Zeplin 這個神器後我果斷捨棄 Measure,它可以省去手動標註的時間,將 Artboards 上傳至線上檢閱,還可加上註解留言。讓工程師不需安裝任何軟體也能透過網頁瀏覽,滑鼠點哪就呈現該資訊。免費用戶可以建立一個專案,邀請成員一起協作管理。
(使用前先安裝程式本體,再下載 for Sketch 的外掛。只有要上傳的人需要安裝,如果 RD/PM 不習慣從網頁看也是可以叫他下載 Zeplin XD)

zeplin
工程師免安裝 Sketch, 設計師免輸出標註圖,直接在網頁或 APP 瀏覽座標尺寸 / 顏色 / 字號字型內文 / 輸出 Assets

 

Sympli

功能如同上述軟體,另外還有 Plugin for PS, Xcode, Android Studio

雖然 Beta Version 速度比較慢、畫面比較醜,但功能還算完整的 Sympli
等一下、名字也太相近了吧,是打對台的概念嗎?

能讀取圖層的混合模式
能讀取圖層的混合模式

 

這類軟體的好處是能減少來回溝通的時間,而且不用輸出很多張密密麻麻自己看了都會吐血的帶標註圖片。前公司為了效率要幫工程師全面更換 Mac 與採購正版 Sketch,真的非常噴錢~ 雖然好像很不錯 (?)。

 

Zeplin vs. Sympli

Create Project

如下左圖 Zeplin 能支援三種形式的專案,下右圖 Symbli 目前只能支援 iOS 與 Android 兩種形式;兩者都能夠選 Resolution: mdpi, hdpi, xhdpi … 然後我們再從 Sketch 對應的外掛去上傳檔案。

 Zeplin vs. Sympli
Create a Project: Zeplin / Sympli

 

Dashboard

Zeplin Web 僅供線上檢閱、註解、輸出元件,要修改與刪除頁面必須在 APP 裡執行,另有 Tag 功能方便整理;還可同步 Slack.

Sympli 只有網頁服務,所以刪除與編輯都在網頁上執行;值得一提它有詳細的上傳紀錄可查閱,還能翻回舊版本圖片

Dashboard - Zeplin Web
Dashboard – Zeplin Web

 

Dashboard - Zeplin App
Dashboard – Zeplin App

 

Dashboard - Sympli
Dashboard – Sympli

 

View

兩者主要功能大同小異,Zeplin 能切換色碼為 HEX, RGBA,數值容許小數點存在。Sympli 呈現更多資訊,並能選擇圖層、顏色、字體去 Highlingt 出位置,小數點四捨五入。

View: Zeplin
View: Zeplin

 

View: Sympli
View: Sympli

 

Spacing

Zeplin 檢閱間距更直覺,直接將滑鼠移到空白處即可;Sympli 必須用尺規工具或 ”複選圖層” 來顯示物件的間隔。

Spacing: Zeplin vs. Sympli
Spacing: Zeplin / Sympli

 

Others

兩邊都一樣能輸出五種尺寸元件 ( hdpi … )、顏色 XML、留言註解等,還有生成簡易的 Style Guide,但只含文字色號,實用性真的不高,Style Guide 還是另外製作比較好。

others: Zeplin vs. Sympli
Zeplin / Sympli

 

目前比較起來兩者無太大差異,大致上 Zeplin 介面較優美,Sympli 支援 PS share bundle 到程式開發工具是一大亮點,期待正式版的功能再來選擇合適自己的來使用。

 

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

其他人也看了這些 ...

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on telegram
Telegram
Share on twitter
Twitter