標籤：

003 | Sketch：為移動而生的設計工具

01-26

WeShare · 本周閱讀分享

  1. 如何寫出「對不起，我只過1%的生活」一樣的故事 huiter
  2. Best Tools for Designers 王崇旭
  3. App設計的未來：圖標將不再是App的入口 John
  4. Unicode與JavaScript詳解／字元編碼筆記：ASCII，Unicode和UTF-8 阮一峰的兩篇關於字元編碼的文章。阿九
  5. Dark Patterns 一個收集為了 KPI 故意影響體驗的網站。李奇
  6. HTML5 頁面製作工具產品集 - 不寫代碼也能製作炫酷的 HTML5 頁面 - NEXT 伊底
  7. 雕爺：未來最大的機會就是針對中產階級生活方式的演變 huiter
  8. Quora 和互聯網的未來 這是一篇 BuzzFeed 的記者對 Quora CEO Adam D"Angelo 的採訪。李奇
  9. SimCity的哲學：對話首席設計師Stone Librande John
  10. Affordance（可供性）和設計 · [ i D 公 社 ] John
  11. 九年歷程回顧－微信篇之衝出重圍 郎啟旭
  12. Airbnb的早期「暗黑成長史」伊底
  13. 非標題黨的Airbnb (4) - 不一樣的客服 王崇旭
  14. 一次關於Uber的通宵抬杠 還有 Uber 這一期，寫為什麼恨 Uber 的人恨之入骨，愛的人愛不釋手。還有 Uber 在中國的二三事。John
  15. Facebook將停用「用戶」(user)的說法，轉而使用「人」(people)，使產品更加人性化 John
  16. Apple - From one gift come many 蘋果的節日溫情廣告，不確定有沒有在電視上播。王崇旭
  17. 關於 Apple Pay，你一定要看這篇文章 王崇旭
  18. Kitchenware Pro Dine 分享的他們設計的 Sketch Template。 John
  19. Facebook FAQ Facebook 的常見問題（FAQ）發布了一些很 Youtube 引導視頻。John
  20. Grovemade 一個國外賣 Apple 周邊的網址，很酷。陳銳宏
  21. 友盟-專業的移動開發者服務平台友盟發布會：微社區和用戶評價，挺有意思的。郎啟旭
  22. 蘋果遞交全新柔性屏專利 通過變形提供觸覺反饋 Force Touch 現在 Apple Watch上用起來，說不定不久之後 iPhone 上也會有。John
  23. 躲在被窩裡也可以沖奶！智能沖奶機Milk Nanny「順手」解救年輕父母 喪病。想生活在五年以後。郎啟旭
  24. Sketch 插件產品集 - 讓你更靈活地使用 Sketch 阿九
  25. 任性的落網：不一樣的音樂產品哲學 John
  26. A nice intro to CSS animation John
  27. Google 一年搜索回顧 - 2014 John
  28. 鎚子科技工業設計副總裁李劍葉訪談 拍得挺好的... 說得也很真誠... #這裡沒有鐵杆錘黑吧… 郎啟旭
  29. 做產品的態度 huiter
  30. 蘋果廣告 The Song 背後的故事 李奇
  31. The right way to ask users to review your app 明學
  32. 這些年 , 羅永浩寫給我們的文案 伊底
  33. 垂直社交創業報告:解析職場社交 伊底
  34. 如何用一個充氣娃娃走上創業成功巔峰 John
  35. 創業做（找）一個合適的技術合伙人，這些能力很重要 John
  36. Uber的產品設計哲學 Uber上海總經理 王曉峰 John
  37. 互聯網上的漢字就該一直這麼丑嗎？John
  38. 饅頭精品課程：騰訊產品總監曹菲《進擊的互聯網》John
  39. using-parse-to-power-up-your-framer-prototypes Framer 可以使用 Parse 讓你的原型可以存儲數據。李奇
  40. 豆瓣 2.0：用豆列看世界 郎啟旭
  41. 設計師的視覺設計五項修鍊 John
  42. 有117年歷史的商務印書館，如何面對亞馬遜和電子書時代 康山明學
  43. 矽谷安迪 · 瓊斯和他在 Facebook/Twitter 的 Growth Hack 經驗 John
  44. 離線時間 · 031 | 寫給設計師的網頁設計簡史 王崇旭
  45. 談談你不知道的引導頁 huiter
  46. 今年最值得入手的15本商業暢銷書 John
  47. 不滿 BBC 紀錄片，庫克動怒了 伊底
  48. 對話馬云：微信是一把好牌 但是打爛了John
  49. 「不啰嗦」和「說清楚」王崇旭

iSay：Sketch，為移動而生的設計工具

一、你與 Sketch 相遇的故事，什麼時間，怎樣獲知，是什麼促使你購買（選擇）了 Sketch？

簡單聊下來，大家獲知並最終入手 Sketch 的原因都出奇一致：用過的都說好。@黃海均 說「在豌豆莢發現身邊同事用這個，讚不絕口，就買了」。@郎啟旭、@John 和 @huiter 是在知乎、Twitter 等渠道看到好評如潮就關注到了 Sketch。

關於入手時間、價格和渠道，大多都是在 Sketch 3 發布後在 App Store 購入。看上去應該是接觸到 Sketch 的時候都知道 Sketch 3 即將發布，暫時忍住了。但碰上 Sketch 3 發布半價促銷活動，紛紛解囊剁手入。當然，也有部分真土豪，是 8 折或全價購入。

至於推薦購買 App Store 版的理由，乃因 App Store 版支持 iCloud，且升級便利。不過在使用 iCloud 還是 Dropbox 類產品作為存儲服務這個問題是，大部分人還是更習慣選擇用得順手的 Dropbox 類產品作為文件存儲。

在討論為什麼剁手的時候，@John 給大家分享了一個有意思的心動理由：「之前 2 代的時候 logo 是銀色，挺丑的，Sketch 3 開始用 QQ 黃鑽的顏色，然後測試版是 QQ 藍鑽，太帥了～」。看來，顏值真的很重要。

最後，由於討論現場還有@陳銳宏 和@王崇旭 兩位沒有入坑，關於在什麼時候入 Sketch、哪個價位比較划算，大家的一致意見是：即便全價（￥648）購入，Sketch 也屬於那種值回票價的產品。當然，如果條件便利，也可以選擇團購方案（見此）或教育版（見此）。

二、 對於產品來說，你認為 Sketch 與其他原型工具或者 Photoshop 相比最大的價值/優勢是？

@huiter 的看法是：

  • 符合原型文件的層級結構

  • 常用功能齊全，快捷鍵合理方便

  • Sketch Mirror 比較方便

  • 各種 UI 組件庫很容易就能買到

  • 可以在原型的基礎上完成 UI 稿

  • 插件安裝容易，且插件庫發展迅速

@阿九 認為：

  • 如大家對它的評價——為移動互聯網而生，成組切片、輸出、預置移動平台解析度等都提供了很大的方便；相對 Photoshop 來說簡化了很多高級功能，如濾鏡等。
  • 相對 OmniGraffle 則是在 UI、交互和功能上更加貼近當代，對比一下不僅感嘆OmniGraffle 已經老了。
  • 最重要的——它趕上時代潮流，扁平化風格盛行使得 Photoshop 過於臃腫，而 Illustrator 又顯得有些老，一個輕便、功能強大的設計工具無疑會掀起浪潮。

@伊底 覺得：

  • 比起 PS，切圖導出方便
  • 組件直接可用可同步，矢量
  • 自帶計算器
  • 方便層級管理
  • 支持第三方插件
  • 還有 Sketch Mirror，簡直完爆
  • 比起 Axure，優勢在於出高保真原型方便

@John 則認為：

  • Sketch 簡單容易上手
  • 插件庫豐富：基本上各種想要的插件都會找到，大大提高開發效率
  • 社區活躍：有大量現成模版，教程等
  • Sketch Mirror：很方便邊做邊看效果

@郎啟旭：

  • 輕量輕量：要做一個什麼效果立馬知道怎麼辦！簡單直接粗暴！
  • 可原型可高保真：進可攻退可守，更易於把控最終產品效果
  • 海量模板：好多最新的模板，都直接只有 .sketch 格式
  • 導出方便

三、 你在產品設計流程中是如何運用 Sketch 的，在哪個階段會用到 Sketch，和其他設計工具（如果有）是如何搭配分工？舉例說明。

在如何運用 Sketch 這個問題上，大致可以分為兩種流派：

  1. 草圖線框高保真切圖一條龍：從線框圖到最後高保真、切圖輸出，均使用 Sketch 一個工具。

  2. Photoshop 替身：草圖、線框圖仍然使用紙筆、Axure、Omnigraffle 等其他工具，只有傳統需要 Photoshop 出馬的環節，如高保真原型階段，才使用 Sketch。

關於這兩種使用 Sketch 的流派，大家都認同需要根據不同產品階段、公司環境、人力時間等諸多因素主觀考量，選擇出活又快又好的方式即可。比如創業公司可能處於產品早期，更多需要產品照顧更多環節，一個人搞定從草圖到切圖的所有事務，那全程 Sketch 會是很流暢的體驗；在稍微成熟的公司，由於工作崗位和流程，產品更多是把握產品方向、把握整體、協調資源，那 Sketch 可能出鏡會相對少一些。

但提到與 Sketch 搭配使用的設計工具，大家都提到了 Sketch 自家的兄弟產品：Sketch Mirror，尤其在高保真階段，用 Mirror 來預覽設計效果簡直 high 到爆。

PS. 不知道是不是收了 MindNode 廣告費，@huiter、@郎啟旭、@王崇旭、@阿九 都自帶安利，紛紛表示 MindNode 為腦塗（注意，這不是錯別字）神器。

四、你最喜歡的 Sketch 特性是？你最希望 Sketch 增加的功能是？

@huiter 再一次在主持人未發問情況下搶跑作答，他：

  • 喜歡：小；Sketch toolbox；Sketch Mirror；ui8.net
  • 想要：可以在不同項目里引用同一個模版庫，這個功能不知道有沒有反正沒找到。

@郎啟旭 喜歡想要：

  • 喜歡：背景高斯功能；頁面層級結構很符合移動思路；更新快：即便這個版本不太好用的一些東西，也可以預期很快會改掉
  • 想要：改善中文字體在 mac 上的渲染效果

@John 是個花心大蘿蔔：

  • 喜歡：最喜歡的太多啦~ 比如 Mirror、支持布爾運算、方便導出、測距
  • 想要：Sketch 做一個動態原型的工具，方便從靜態原型製作動態原型

@伊底 的喜歡和想要：

  • 喜歡：Sketch Mirror；計算（測距）功能：方便對齊
  • 想要：Sketch 出動態原型工具

@阿九 的喜歡和想要：

  • 喜歡：成組導出、插件拓展、按住 Options 顯示距離、背景模糊
  • 想要：拖動成組控制項時候可以更加準確、Grid 添加均勻分布模式；頁面間動態交互；菜單欄或者側邊欄有個常用 symbol 的位置，按照使用頻率列舉，然後用的時候直接選取 insert（編者註：這是讓大家沸騰的功能建議！）

五、推薦一套/多套你覺得超值的 Sketch 資源

  • 圖標資源（@huiter）：
    • Font Awesome Icons
    • Emoji One - Open source emoji designed for the web.

  • 模板資源（@huiter、@John）：
    • iOS 8 / iPhone 6 模板：Teehan+Lax - Defining Experience
    • Apple Watch Template：WatchKit - Apple Developer
    • iPhone Device：Robbie Pearce
    • Material Design 官方模版：Sticker sheets & icons
    • Website Flowchart & Sitemap（收費）：Website Flowchart & Sitemap
    • Wireframe Kit - V2（收費）：Wireframe Kit

  • 插件資源（@John）：
    • The A to Z of Sketch

  • 資源網站：
    • Carefully Crafted UI Design Assets

六、有哪些必需知道的 Sketch 小技巧/用法？

  1. 圖層命名為 AAA/BBB 這種形式的話，導出之後會自動創建 AAA 這個文件夾，裡面有 BBB 這個圖。@John
  2. 剪裁圓環之後，「線頭」那裡有有點小變形，其實這裡可以在右邊面板那裡設置成你想要的「線頭」。@John
  3. 建立 Artboard 後最好先覆蓋一層同樣大小的 Rectangle 並設置 Fill 為空、Borders 為自己喜歡的顏色。這樣最後輸出到圖片時就會帶一個帶色邊框，貼到郵件里就不會因為郵件底色和圖片底色邊框都是白色而混在一起看不到邊界了。@阿九
  4. 做靜態交互圖，只需要把所有的頁面按照一定順序擺放好，然後畫一張大的Artboard 把所有頁面罩住，再把這張大畫板挪到最底層，輸出時勾選畫板底色為一種自己喜歡的顏色比如石墨色，箭頭文字可以放在所有畫板的最上層。@阿九
  5. 所有的頁面 Artboard 都記得勾選 Background Color和Include in Export，不然輸出 png 底色會是半透明。@阿九
  6. Preset Artboard：打開 Sketch，按 a（Artboard的快捷鍵），點擊右下角加號，設置 Artboard 的 Preset。@John

最後一個是來自@John 的大殺技，專門請教了 Sketch 官方的小技巧：默認的圖形是填充了灰度、沒有邊；但實際上最常用的是不需要背景色、有邊。其實這個可以從菜單裡面設置，上次專門請教了 Sketch 的人後才知道，具體方法是：繪製一個形狀，並賦予一些你想要設為默認的樣式，點擊編輯菜單，選擇「Set Style as Default」。

七、買了官方的 Sketch Mirror 么，體驗如何？

基本上大家都買了，而至於要不要買 Sketch Mirror，@伊底 用這個回答終結了問題：「600 都花了還差這 30 么」。回到 Sketch Mirror 的實際體驗，則是一片好評。@huiter 提到他尤其喜歡 Mirror 可以直接在手機上切換頁面預覽。

而關於部分時候由於網路原因導致無法連接或者延遲嚴重，@伊底 仍然給出了壕的解決方案：「推薦手機開熱點以後連數據線使用」。

八、對 Sketch 這種生產力工具的產品前景怎麼看？未來是否會出現更多細分的生產力應用。

@阿九 認為 Sketch 這樣的進化是時代趨勢：「進化就是不斷適應時代，每當時代革新，生產工具就要自我調整使得產出效益/成本比最優化。交互設計工具需要革新了啊......FramerJS 需要 CoffeeScript 基礎，Form 和 QC 的可視化又不是非常貼心。」

@伊底 則從工具為人服務的角度出發，認為 Sketch 這樣的工具出現能讓我們專註到更應該專註的地方去：「就像設計師最重要的技能是審美和視覺傳達，而非熟練使用 PS，這種專業工具的出現，會降低人們使用門檻，讓使用者更專註目標即產品設計本身，降低軟體技能學習成本，否則像 Adobe 一家獨大的時代，我們很容易「用戰術上的努力掩飾戰略上的失誤」，看著很努力卻忽視了最重要的東西。」

本期 iSay 到此完。

參與討論：@黃海均、@郎啟旭、@John、@huiter 、@阿九、@伊底、@王崇旭

本期分享編輯：@John，本期 iSay 主持人：@郎啟旭

附送本期 iSay 討論彩蛋一枚：

——————————————————————

本周新成員： @康上明學，前創新工場應用匯產品經理，現在 MIUI O2O 項目產品經理，曾負責小米應用商店，電話簡訊聯繫人，日曆便簽等，現在負責"小米生活"。

註：本期封面來自 Kitchenware Pro

什麼是 WeShare?

我們每天閱讀大量的文章，有些躺在了待閱工具里有些擱置在收藏夾。我們並沒有真正消化這些信息，而只是充當了信息的接受者和傳遞者。WeShare 是一個分享閱讀的邀請制微信小組，旨在分享每天閱讀中的好內容，探討產品相關話題。了解更多


推薦閱讀：

※Sketch 3.0 新增了哪些功能？體驗如何？

TAG:Sketch | 产品经理 | 产品设计 | 设计工具 |