- 原文地址:Creating with a Design System in Sketch: Part One [Tutorial]
- 原文作者:Marc Andrew
- 譯文出自:掘金翻譯計劃
- 本文永久連結:github.com/xitu/gold-m…
- 譯者:pmwangyang
- 校對者:Zheng7426
在 Sketch 中建立一個設計體系並使用它工作
? 想用我的優質 Sketch 設計體系大幅優化你的工作流程嗎?你可以點選這裡獲取 Cabana。
使用推廣碼 MEDIUM25 購買可享 75 折優惠。
我看到過許多介紹建立 Sketch 設計體系元素的教程,但是很少有教程會實際上教你在練習中建立新的、特別好的設計體系。
這就是我這一系列教程想要做的 —— 不僅僅是教你建立設計體系的元素,還有如何用你建立的體系設計一個適配多個裝置的 iOS App,並且告訴你我如何構建自己的體系以及背後的思考過程和決策。
系列導航
設計體系總覽
好,在我們埋頭開始設計我們這非常華麗且風格類似 Medium 的 iOS 應用之前(誰說山寨來著?),我們對一會教程中將要用到的設計體系(基於 Cabana-Lite)的 Sketch 檔案進行一個快速概覽。
在設計版式(開始)檔案中有三個頁面……
- Design System (Setup) 設計體系(設定)
- Symbols 元件
- Format 格式
讓我們按順序說……
設計體系(設定)
這就是見證奇蹟的地方!這裡可以管理你的專案中至少 90% 的樣式。
設定這些元素為基準顏色或文字樣例,這樣你調整它們的時候,你的所有設計都會自動適應變化。
你在這裡的所有改動會對映到元件頁面(一會我們會涉及),當然,也會自動適應到你當前的畫板上。
在這個頁面上有 2 個畫板……
- Colors + Overlays + Duotone (譯者注:畫板名比較小,注意左上角>_<)
- Typography (我們會在第二部分涉及到這個畫板)
Colors + Overlays + Duotone (顏色 + 覆蓋色 + 雙色調)
通過這個畫板你可以看到,我將所有的顏色資源組織到了一起。如基準色(Base Colors),疊加色(Color Overlays)和圖片效果(在這個例子裡是雙色調效果 “Duotone Image”)。
其實在我個人的 Cabana 設計體系裡我做了一點分割,將基準色、疊加色新增到了 Colors 畫板,像雙色調圖之類的新增到另一個名為 Various 的畫板,這個畫板還包含漸變、邊框陰影等。但我想讓你感覺這個教程更緊湊些,所以採取這樣的佈局方式,還可以吧?
Base Colors(基準顏色)
在這個系列教程裡,設計我們的 iOS App 只需要 4 種基準色。如果你建立你自己的體系,需要在一個大型專案中覆蓋所有的基準色,建立像下面這些基準色是一個明智的選擇(當然這只是建議)……
- Primary (原色,譯者注:或者可以稱為“主題色”)
- Secondary (二次色)
- Tertiary (第三色)
- Black (黑色)
- Grey (灰色)
- Light Grey (淡灰色)
- Success (成功色)
- Warning (警告色)
- Error (錯誤色)
你可以把上面的列表替換成自己想要的內容,比如移除第三色、新增另一種深度的灰色,以獲得一些自定義元素,來完成適合自己設計體系的一些專案。
好,讓我們回頭看看這些基準色,我給你一些在我自己的設計體系中設定基礎顏色的祕訣 —— 使用 圖層樣式。
我們首先設定一下原色描邊,建立一個 200x200 的矩形(快捷鍵“R”),移除填充色,用我選定的十六進位制顏色設定 1px 的描邊,並設定圓角半徑為 4。
然後建立一個新的圖層樣式(在 Prototyping 欄中選擇 Create new Layer Style)……
並把它命名為 Border/Primary (描邊/原色)……
再設定一個原色填充矩形,建立一個200x200 的矩形(快捷鍵“R”),選擇我選定的十六進位制顏色,並設定圓角半徑為 4。
然後建立一個新的圖層樣式並命名為 Fill/Primary (填充/原色)。
然後我將這兩個矩形重疊,你可能要問,為什麼這麼做?
這允許我們使用這樣的設計體系時,僅僅選擇一次就能很容易的修改圖層樣式,從而改變描邊和填充色。
這樣佔據的螢幕更小,並且最重要的是,比這兒放一個 A 元素那兒放一個 B 元素改動起來快多了。
接下來,我在合適的位置設定好所有的基準色和對應的圖層樣式後,給它們設定好名稱(比如 Primary、Black、Grey 等等)。
現在我有了方便的參考點,並且滑鼠點幾下就能調整。比如,如果需要改變原色,選中它,再選擇圖層樣式,就全部搞定了不是嗎?不需要任何多餘操作,也不用忍受“不不不,我不是要選中這個元素”這種令人抓狂的事。
接下來重複這個過程,將我上文提到過的所有其他基準色(黑色、灰色等等)設定好圖層樣式,命名為和 Border/Primary 和 Fill/Primary 同樣的格式。
Color Overlays (顏色疊加層)
在這個教程裡,我只在疊加顏色中建立了一個名為 Black(黑色)的疊加層。
把 Black 層疊加到圖片上來調整對比度很容易,它的十六進位制色統一地取自基準色 Black(黑色)。
就像我提到的基準色一樣,舉一反三,在你的設計體系中,實際上只要讓疊加層來匹配以下幾個基準色……
- Primary 原色
- Secondary 二次色
- Black(剛剛這個例子中使用的)
我來給你一些指引,告訴你如何建立顏色疊加層,當然,在我的設計體系裡,還是使用圖層樣式。
現在我主要講解下面教程裡將要用到的黑色疊加層。
建立一個 432x248 (這個尺寸是我隨便選的,你可以設定其他尺寸)的矩形(快捷鍵“R”)並設定圓角半徑為 4(個人喜好,這樣看起來更漂亮一些),貼上之前建立的 Black 基準色的十六進位制色值,然後設定不透明度為 60%。
然後建立一個新的名為 Overlay/Black**(疊加層/黑色)**的圖層樣式。
這就完成了,但是考慮到這個疊加層 99% 的情況是覆蓋在一個圖片上,我想現在最明智的事,是在新的疊加圖層樣式旁邊新增一個小小的預覽。就像我剛剛提到的,它在我的設計中位於圖片的頂部,這意味著我可以更好的預覽疊加層的效果,並且允許我調整它的不透明度,直到我對結果滿意為止。
讓我來教你怎麼做……
首先建立一個和前面建立過的顏色疊加層尺寸一致的矩形(R),並且用圖片填充它。
接下來建立一個同樣尺寸的矩形(R),覆蓋在圖片上,然後套用剛剛建立的 Overlay/Black**(疊加層/黑色)**圖層樣式。
就像我剛才說的一樣,現在我有一個實時的預覽,可以觀察疊加層新增到影象時的外觀,並可以相應地調整,直到我對結果滿意為止。
Duotone (雙色調圖)
最後,讓我們來學習雙色調圖片,我們在教程中只展示了一種雙色調圖片樣式,但是在 Cabana 設計體系中我建立了 9 種之多。
是的,像雙色調圖片或者漸變的存在只是為了好看,並不是你自己設計體系裡像基準色和陰影(譯者注:也可譯為“圖層陰影”)一樣的必要元素。但我為什麼提到它們呢?因為你永遠不會知道你的專案中會包含什麼玩意兒。
好,在我們完成這部分教程之前,讓我告訴你如何用我自己的體設計系和設計版式(開始)檔案快速建立雙色調圖片,我們可以稱之為“獎勵關卡” ^_^
像我剛剛做疊加層影象預覽一樣,建立一個矩形(R),用影象填充它。
然後只需要在元素中新增幾個額外的填充顏色,並調整混合模式,直到有一些顏色可以透過來,就像檔案中包含的示例那樣,這就叫“雙色調”(噹噹噹當!過關~)……
- #041674 & Lighten 光照
- #1EDE81 & Multiply 正片疊底
我們來優化一下,在檢查器中拖拽來重新排列填充樣式,直到如下圖所示
現在給這個預覽起個酷炫狂拽吊炸天的名字(比如:哥布林),機智如我!
好了,這一系列教程的第一部分就圓滿結束了,記得回來和我一起學習第二部分哦。第二部分會涉及設計體系中的文字排版,還有我如何整合這一部分到設計體系中的重要的提示和建議。
跳轉到第二部分點選這裡…
? 想用我的優質 Sketch 設計體系大幅優化你的工作流程嗎?你可以點選這裡獲取 Cabana。
使用推廣碼 MEDIUM25 購買可享 75 折優惠。
感謝閱讀
馬克
設計師、作家、父親以及哈什·布朗斯的愛人
如果發現譯文存在錯誤或其他需要改進的地方,歡迎到 掘金翻譯計劃 對譯文進行修改並 PR,也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。
掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群,文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域,想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。