使用UI設計工具Sketch如何解決色彩管理、矢量圖形繪製等具體問題？

05-21

對於很多功能來說，Sketch都堪稱神器，但仍然會卡在一些具體問題上。
這裡提出一些問題並嘗試解決，希望大家也能在這個帖子下提問和解答其他問題。
1、色彩管理：
Sketch導入圖片和導出圖片，色彩會發生變化。
探索了很久，解決了導入問題。但導出圖片，比如預覽圖，仍然會變色。

解決方案：將圖片轉成eps格式再導入就不會變色了。
2、矢量圖形繪製：
複雜一些的矢量繪製，只能在AI里繪製好再通過svg格式導入Sketch。
但一些簡單的圖形，按道理應該有辦法在Sketch內解決。
比如一段圓弧的繪製，怎麼搞？
謝謝！
如果大家有新的問題，我將補充在這裡。
PS：第二個問題已經完美解決。謝謝@李奇，解決方法如下：
繪製圓形矢量圖形，雙擊圓形或者點擊Edit按鈕，進入編輯狀態，右側檢查器面板上選擇「Open Path」，然後在開放路徑上點擊添加錨點，選擇圓弧的開始點和結束點，刪去其他錨點即可。（圖片來自@李奇）

PS：通過研究教程又發現了解決第二個問題的方法，Sketch的矢量圖形功能其實挺全面的，是自己太粗心了。
如下：首先找到剪刀工具，在定製工具欄里。圓形上用鋼筆添加錨點，然後用剪刀刪去多餘的部分。

問題一：

題主描述的「Sketch 導入圖片和導出圖片，色彩會發生變化。」，會出現這個現象的原因的確是 Sketch 色彩管理的方式不一樣。

Photoshop 如果在安裝過後如果沒進行過相關的「色彩管理」設置的話，他默認的工作空間中 RGB 使用的色彩管理配置文件是 sRGB IEC61966-2.1 顯示描述文件。

同樣 Photoshop 使用「存儲為 Web 所用格式」這個方式切出的圖片 Metadata 中的顏色描述文件也是 sRGB，當然有些人沒注意或者為了壓縮圖片的體積的話會使得圖片不含這個描述文件。

而 Sketch 則不一樣，它一開始的定位就是服務於 UI 設計師或者網頁設計師，所以它也就沒有 Photoshop 那麼複雜的色彩管理設置。它區別於「默認設置下的 Photoshop」的是它的工作環境的色彩管理是跟隨電腦顯示器的所使用的「顯示描述文件」。你們可以在 Mac 右上角「關於本機 - 顯示器 - 顯示器偏好設置 - 顏色」里查看你的 Mac 所使用的「顯示描述文件」。前面說到 Sketch 的產品定位是為數字設計而生，所以它導出的圖片都是帶 sRGB 的描述文件，除非你勾選了「Save for Web」它便會保存不包含「顏色描述文件」屬性的圖片（可以右鍵點擊「顯示簡介」查看是否帶有這個屬性）。

再說到 Mac 的內建的 Preview.app，它會依照圖片所帶的「顏色描述文件」相應的顯示在這個色彩環境下所呈現的顏色。這樣的結果就是 Preview 和 Sketch 使用不一樣的「顏色描述文件」查看同一張圖片，所以給你的感覺就是顏色不一樣，預覽的圖片顏色會發灰，這種差異在蘋果陸續出了 iMac 5K 2015 late、MacBook Pro 2016、iPhone 7 等一票 P3 廣色域顯示屏之後尤為明顯。

我的建議是不用特別麻煩得將圖片轉換成矢量再導入，是在要求精準的話那也應該是將 Mac 的顯示器的「顯示描述文件」更改成 sRGB IEC61966-2.1 嘛！

問題二：

如題主自己後續補充的一樣，Sketch 的矢量工具沒那麼糟糕，多用幾次也就習慣了。

這樣設置的話，系統的顏色就會變得跟sketch中一樣過艷，可這並不是一個正常的狀態啊。。

1.瀏覽器截圖 2.保存至mac本地截圖 3.sketch文件截圖

選擇了sRGB IEC61966-2.1,並沒有用

1.sketch中打開的 2.準備截圖的狀態

這色差，藍瘦香菇..

也就是說，sketch打開圖片有色差，導入之前和導出顏色都比較正確..

2016.3.7 更新

Sketch 3.6 版本改進了對高 DPI 圖像的處理，使其在 Retina 及非 Retina 屏上更準確的呈現，你可以下載試試

—————————————————分割線————————————————————

謝邀。

第一個問題是因為sketch會對導入的圖片做壓縮處理（猜測是為了控制文檔大小）。

根據圖片大小一般會壓成原解析度的3分1或2分1，點陣圖壓縮後自然就失真了，所以這時導出的也是失真後的圖。解決辦法就是把圖片轉成矢量圖或者pdf再導入

第二個問題，Sketch完全可以做複雜的矢量繪製，常用的功能都在頂部菜單Layer－Combine以及Paths里：

線條端點，虛線等的設置位置見下圖：

這些功能自己試試就會了，並不難。

回頭有時間／有需要的話我可以做一些繪製實例教程。