15 門絕佳課程，還將推出更多

從設(shè)計到編程，Design+Code 提供了 15 門課程，讓你由淺入深、由點及面學(xué)會開發(fā) iOS 應(yīng)用程序，且課程還在不斷增加。這些課程有免費試讀的，比如 Figma, Framer X, Studio, XD, Sketch 的部分教程以及 Pro 版訂閱獨有的?React, Swift, React Native。

60 小時教學(xué)視頻，支持中文

Design+Code 包含 60 小時的視頻教程，幾乎每個部分都帶有字幕，能幫助你一步一步地學(xué)習(xí)。字幕以英文為主，部分支持簡體中文與繁體中文，未來還將提供法語和西班牙語版本。

15GB 下載資源 + 38GB 視頻

Pro 用戶還可以享受龐大的課程源文件讓你能循序漸進地學(xué)習(xí)，有大量設(shè)計資源以及壁紙供你下載。

獲得超值軟件折扣

升級 Design+Code Pro 帳戶后，你就能以折扣價入手多款優(yōu)秀軟件，甚至獲得長達 6 個月的免費試用期：

• 8 折的 Angle；
• 8 折的 Sketch；
• 3個月免費使用 Figma Pro；
• 6 個月免費使用 InVision Pro；
• 8 折的 Framer X。

在購買 Design+Code 前你可以下載 Figma, Framer X, Studio, XD, Sketch 的試用教程先體驗一下。Design+Code Pro 帳戶的月付價格為 15 刀，年付價格為 108 刀，折合人民幣在 730 元左右，但現(xiàn)在國內(nèi)的特惠版本價格僅為 356 元（一年期）。

[maxbutton id=”91″ ]

One more thing… 除了這些還沒完

除了 Design+Code 這套教程本身包含的內(nèi)容，在您購買時還能獲贈：

• 快速原型工具 Mockplus 的 30 天訂閱；
• 協(xié)同設(shè)計工具 iDoc 的 180 天訂閱；
• 高保真原型交互工具 ProtoPie 的 30 元限時優(yōu)惠券（2月13日前入手 ProtoPie 就能使用）

說到前端產(chǎn)品開發(fā)，開發(fā)者與設(shè)計師之前交接原型產(chǎn)品更多的還是當面聊，不停的開小組會議，產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)者三個人會在小屋里就一個按鈕討論一下午。即時有 Slack 這樣的服務(wù)，這兩位仍然需要當面把事情說清楚，設(shè)計妹紙會教開發(fā)者大葛格用 Sketch，告訴他哪個層有啥動作，哪個文字會變換尺寸。但是，就像前面我說的，在企業(yè)不斷追求高效生產(chǎn)的目標帶動下，這中間又催發(fā)了一個新工種來代替無休止的討論，只不過這個工種由一款軟件（也是服務(wù)）來擔任，它就是：Zeplin。

Zeplin，由 Zeppelin 一詞變化而來（貌似許多產(chǎn)品都喜歡用齊柏林飛艇來做 Logo），由四名伊斯坦布爾的才子設(shè)計，是一款為 Designer 和 Developer 提供產(chǎn)品原稿交接與溝通的高效平臺，用戶可對產(chǎn)品進行標注、Style Guide 注釋，還提供了簡單的團隊協(xié)同工作功能，通過插件，設(shè)計師可將 Sketch（Mac 平臺最著名的前端設(shè)計軟件）的 Artboard 單獨或批量導(dǎo)入 Zeplin 的 Project 里供開發(fā)者做業(yè)務(wù)功能與前端交互的實現(xiàn)。目前這款軟件僅支持 Sketch，另一款主流大將 Photoshop 據(jù)稱也在支持計劃中，但目前仍未放出更新版本。

設(shè)計師與開發(fā)者的福音

許多設(shè)計師初次接觸 Zeplin 都表示驚呆了，“終于可以從枯燥的體力活中解放出來，再也不用跟開發(fā)扯皮或者一對一的去調(diào)整界面了”，當你把稿子導(dǎo)入 Zeplin 后，受邀請進入 Project 的開發(fā)者可以直觀的看到色值，元素間距，交互流程，區(qū)域大小，文字大小及顏色，注意看下圖，在 Dashboard 右邊欄 Colors 與 Assests 這兩欄，可以讓對方清楚的知道配色值（RGB），另外在讓開發(fā)者查看分層元素時，在 Sketch 里將層設(shè)置為 “Exportable” 即可，在設(shè)計師做好圖層管理（命名、分組）的前提下，它可以自動生成元素尺寸?間隔距離的標注信息（并且可以標注為 pt 或 dp）。

基礎(chǔ)使用介紹

Zeplin 對于專業(yè)人員來說很好上手，創(chuàng)建一個 Project，你可以看到軟件支持 Android、iOS、Web 三種工作環(huán)境，另外開發(fā)者還提供可實驗性質(zhì)的 Mac OS X 軟件開發(fā)環(huán)境。

此時到 Sketch 里找到 Menubar – Plugins 目錄，如果你安裝了 Zeplin 專為 Sketch 開發(fā)的插件，可以直接在插件目錄里選擇“Export Selected Artboards”將文件導(dǎo)入 Zeplin，這個速度很快。

標注與 Style Guide

作為項目人員，你可以隨時通過軟件和 Web 版進入 Project 對原稿進行標注（添加 Note，與對方就產(chǎn)品進行溝通），設(shè)計師可以制作 Style Guide，包括字體樣式、色彩構(gòu)成、Icon 樣例、常用間距等內(nèi)容。

高效的協(xié)同工作機制

作為一款項目組協(xié)同工作軟件，Zeplin 可以讓團隊成員一共參與整個原稿的交流工作，項目創(chuàng)建者只需輸入其他同事的郵箱或 Zeplin 賬戶名即可發(fā)出邀請。而如果當前工作環(huán)境不是 Mac，你也仍然能通過 Web App 參與工作。

軟件的下載與定價

這么優(yōu)秀的協(xié)同工具要說完全免費那是不現(xiàn)實的，除了提供嘗鮮的免費版只能創(chuàng)建一個 Project 外，Starter 與 Growing Business 的套餐還是很有競爭力的，其中后者可以同時運行八個 Project，這兩款付費套餐的年費單月價格分別為每月 13 刀與 22 刀，與普通的月付相比優(yōu)惠 10%，對于創(chuàng)業(yè)團隊也來說，要比 Markly（39.99刀）、Invision、Lucidchart 相對實惠一些。

最后附上 Zeplin 在墻內(nèi)的下載地址，配合 Sketch 導(dǎo)出 Artboard 的插件

這一期為大家介紹的是 Sketch 中的符號和共享式樣。設(shè)計師童鞋們都知道，在每一次設(shè)計工作中，會有大量重復(fù)出現(xiàn)的基本元素，可能是一個固定的按鈕樣式，可能是特定的字體顏色和大小。如果這樣固定的標準能成為一種通用的符號，每次需要使用時都可以重復(fù)引用，并且可能一次修改、全部應(yīng)用，會大大提高設(shè)計效率和設(shè)計的規(guī)范程度。Sketch 就為大家?guī)砹诉@樣的特性，你可以將某些特定的樣式和文字保存為一種「符號 Symbol」或「共享式樣 Shared Style」，方便重復(fù)利用。

Sketch里的「符號 Symbol」是什么？

在 Sketch 中，你可以為每個單獨的文件創(chuàng)建許多「符號」。需要注意的是，在不同文件之間，符號并不是共享的，這意味著，你可以在每份設(shè)計文件中，創(chuàng)建一個單獨的頁面用來存放需要的符號。如下圖所示，符號最基本的單位其實是一個「組 Group」，區(qū)別在于，它是用紫色文件夾標記的。

你可以復(fù)制任意多份符號，用于一份設(shè)計文件中的不同地方。并且，針對任何一處的修改，會同步到所有該符號出現(xiàn)的地方。

如何創(chuàng)建并使用「符號」？

創(chuàng)建符號非常簡單，但必須在一個「組 Group」的基礎(chǔ)上，你才能創(chuàng)建符號，這意味著，如果你要創(chuàng)建的符號元素還沒有組，你需要先選中后使用「Command + G」將其轉(zhuǎn)換為一個組，然后就可以右鍵這個組，或在菜單欄中選擇 Layer，從而「Create Symbol」。如前文所述，一個組一旦被創(chuàng)建成為一個符號，就會由藍色文件夾變?yōu)樽仙募A標記。

使用已經(jīng)創(chuàng)建好的符號時，只需要點擊「插入 – 符號」，這里會顯示所有符號的縮略圖。

另外，由于不同設(shè)計文件間的符號并不是共享的，在創(chuàng)建完一份完整的符號文檔后，你可以點擊「File – Save as Template」將其存儲為「符號模板」，方便以后在不同設(shè)計文件中的調(diào)用。

將文字排除在符號之外

設(shè)計中，我們還會經(jīng)常遇到的一個問題：按鈕的樣式我們希望處處一樣，但按鈕上的文字，在不同場景和頁面時卻不盡相同。而之前我們說了，符號的任何改動，都會立即同步到所有該符號出現(xiàn)的地方，那有沒有辦法，可以讓每處符號中的文字不一樣呢？顯然，Sketch 考慮到了這樣的常用情況，你可以使用「將文本排除在符號之外」的選項來實現(xiàn)這一目標。

具體來說，你可以選中符號中的文本，在右側(cè)的屬性欄中，可以看到有一個選項叫「Exclude Text Value from Symbol」，你只需要打上勾，這樣同一個符號就可以擁有不同的文字了。當然，符號之間文字的內(nèi)容不同，但文字的字體、大小、顏色等屬性值還是會保持同步。

文本共享式樣和圖層共享式樣

除了符號之外，Sketch 還有文本共享式樣和圖層共享式樣。實際使用中，這兩者和符號是非常接近的，區(qū)別在于，符號是基于組的，而文本共享式樣和圖層共享式樣，顧名思議，是在某個文字或圖形的基礎(chǔ)上創(chuàng)建的。它們的創(chuàng)建、使用、同步邏輯基本是一致的，但在實際使用中，像文本共享式樣，一份設(shè)計稿中可能會有不同的文字規(guī)范，將其單獨區(qū)分開來，也有助于提升工作效率。

下一篇文章將為大家?guī)?Sketch 中各類圖形形狀的使用技巧和實用竅門，敬請期待！

本文作為一個系列，將為你介紹 Sketch 的點點滴滴，無論是你已經(jīng)在工作中開始使用 Sketch，或是正在猶豫要不要學(xué)習(xí) Sketch，本系列的目標就是讓大家都能從入門到精通，改善所有設(shè)計師的工作效率。

好了，言歸正傳。本系列的第一篇：進入一個全新的時代。對于那些還沒有深入接觸 Sketch 的童鞋們，本文將是一個入門引導(dǎo)，雖然沒有具體某一模塊或功能的介紹，但我試圖從 Sketch 那上百種吸引人的特性中，選出幾樣與你分享，讓你對它有一個大致的了解。

殺雞（UI 設(shè)計）真的不用牛刀（Photoshop）

很長一段時間以來，Photoshop 都是設(shè)計師最得心應(yīng)手的工具。然而，對于 UI 設(shè)計，特別是進入移動互聯(lián)網(wǎng)時代之后，Photoshop 顯然沒有把重心有任何的傾倒，一系列龐大的功能只有一小部分真正對于 UI 設(shè)計有所幫助，其它功能的存在，不僅大大影響了設(shè)計效率，也增加了無謂的復(fù)雜度。

Sketch 則是一款 Mac 原生的，從一開始就為 UI 設(shè)計打造的軟件。下面是 Sketch 的基本界面，幾乎所有常用的功能都可以直接一鍵直達，最棒的是，特準于原生的 Mac 特性，在內(nèi)容編輯區(qū)內(nèi)，你可以方便地使用 TrackPad 自由地?zé)o限縮放、移動，流暢度不知道比 Photoshop 高到哪去了。

Artboard：尺寸得心應(yīng)手

Artboard 和 AI 中的畫板概念很類似，你可以直接插入一個 Artboard，Sketch 內(nèi)置了各類設(shè)計常用的尺寸，如 iPhone，iPad 的屏幕分辨率，響應(yīng)式設(shè)計的網(wǎng)頁尺寸，紙張大小，以及 iOS 和 Mac 圖標的各類尺寸。

內(nèi)容元素只有在 Artboard 區(qū)域內(nèi)是可見的，而且，結(jié)合手機上的一款叫 Mirror 的 App，可以把每一個 Artboard 在手機上顯示，而且還是實時的，這意味著，任何在 Mac 上做出的修改，馬上都可以在手機上看到。

切圖和導(dǎo)出簡直好用到流淚

很多設(shè)計師最痛苦的非專業(yè)工作可能就是導(dǎo)出各類圖片資源和素材了。在 Photoshop 里當然可以做，但不借助于一些第三方插件的話，這個過程簡直無比痛苦。而 Sketch 的導(dǎo)出卻非常方便，如下面的截圖，只要選中整個 Artboard 或某項元素，Sketch 會依次生成 @1，@2，@3，@1.5，@0.5 的圖片素材，一切就可以存出了。

查看距離只有一鍵之遙

在 Photoshop 里，要是想要查看兩個元素之間的距離，標尺工具真的是心累。但在 Sketch 中，查看任何距離都只有一鍵之遙。

選擇你想要被度量的基準物，然后按住 option 鍵，這時候，美好的事情發(fā)生了。如果你的焦點沒有懸停在任何元素上，Sketch 會自動顯示基準物距離畫布四周的距離。這時候，如果鼠標懸停在任何元素上，Sketch 都會自動顯示兩個元素之間的距離。

真正懂你的縮放

Sketch 一共提供了兩種類型的縮放。第一種就是最常見的拉伸。在 Sketch 中，這樣的拉伸會保留最基礎(chǔ)的圓角值，邊框粗細等基本信息，而把圖形進行放大。第二種縮放則是 Scale 模式，這種縮放不僅僅放大的圖形，相應(yīng)的，圓角值，邊框粗細等都會被同比例地放大，矢量元素需要導(dǎo)出更高清的素材時，非常實用。

當然了，Sketch 這些值得稱道的細節(jié)實在是太多了，一篇文章根本列不完。本文僅僅只是選出了冰山一角，讓你在忍受了多年 Photoshop 的折磨后，感受到一份真正為 UI 設(shè)計師打造的心意。

下一篇文章將為大家?guī)?Sketch 中的符號、類型文字的使用介紹，敬請期待。

功能特點：

• 完美支持OS X Lion、Mountain Lion系統(tǒng)
• 針對Retina屏和非Retina屏雙重優(yōu)化
• 提供了多重陰影，多重填充，漸變，調(diào)和，模糊，噪點等特效處理功能
• 靈活的變量處理能力直接利用簡單圖形拼合成復(fù)雜圖形
• 切片功能能把圖片分解成不同范圍的JPG，PNG，PDF，SVG格式的圖片導(dǎo)出
• 自動為Retina導(dǎo)出@2x圖片
• 高效的彩色，字體picker
• 豐富的原生文本渲染和字體庫
• 提供了矢量和像素兩種放大功能

????