zeplin-vs-sympli

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 到程式開發工具是一大亮點,期待正式版的功能再來選擇合適自己的來使用。

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

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文:
  • mimizuku

    可以請問範例中使用的app是什麼嗎?

    • 陳小水

      你好,這是我們團隊目前還在開發的 APP 好窩 :)