「原創教程」- Sketch 從零開始學(一)
通過經典案例,手把手教你如何 0 起步,用 Sketch 製作 UI 界面。在教程中穿插對柵格系統、Symbol、Text Style、組件化管理等相關設計知識的介紹。從掌握怎麼設計,到明白為什麼這樣設計。本期會指導大家用 Sketch 臨摹 Airbnb。閑話少說,直接撈乾。
1.建立文檔
按 Command + N
2.建立 Artboard
按 A
3.設置柵格
點擊 View 選擇 Layout Settings,
4.設置 Text Style
按 T 點擊屏幕位置輸入 Headline 按照以下參數設置,色值選擇 #000000。
本套 Text Style 參照的是 Material Design 中文字體排版規範。
字體採用 PingFang SC。最終成品:
在我們的文檔中選擇 Organize Text Styles,
Tips:在拷貝新的 Text Style 之前一定要確認,文檔內沒有 Text Style,否則兩套 Text Stle 的合併會對文檔管理產生麻煩,譬如你無法分辨兩個同名的 Text Style 哪個是正確的。另外,在拷貝組件到你的文檔的時候也注意是否有 Text Style 隨之一起加入。
刪除樣式後,文字圖層前方的符號會由紫色變為灰色。
折騰了一堆準備工作,終於可以進行第一個組件的設計了。
回到 Page 1 頁面,按 R 在Artboard 中 畫一個 1088x64 的矩形。
我們轉戰到 Symbol 中,按 R 在 Lists/Navigation Bar 中畫一個 28x28 的矩形(滑鼠拖動的時候同時按住 Shift 是畫正方形),命名為Avatar,Radius 設置為 100,Borders 色值選擇 #000000/不透明度 12%/Outside,
按 T 輸入 Text 1,Type Style 選擇 Body/L/S/R。解釋一下縮寫含義: L=Light,意思是亮底黑字;S=Single,意思是單行文字;R=Right,意思是文字右對齊。
Text 1 距離右側 Avatar 48,Resizing 選擇 Pin to corner,此處涉及響應式的知識,愛刨根問底的同學可以去之前 「教程乾貨」- 我敢打賭你不知道Sketch 39的響應式新玩法 - 響應式系列二 - 知乎專欄 中找營養,在此就不詳細說明啦。
將資源中的 Airbnb Logo 拽入文檔中,與這個矩形 Command+G,命名為 Logo。
按住 Shift 選中 矩形 和 Logo 水平和垂直方向居中對齊。
選中 Logo 組垂直居中,左對齊,Resizing 選擇 Pin to corner。
導航欄的 Symbol 算是大功告成,Command+Ese 退出 Symbol 編輯。
新建一個頁面,命名為 Symbols,把我們剛做好的 Lists/Navigation Bar 拖拽到 Symbols 頁面中。
回到 Page 1 中,選中 Lists/Navigation Bar 在 Overrides 中填入相應文案。無需擔心每段文案的長度,因為我們這裡是自適應的。
本期先到這兒,有啥建議或是看不懂的地兒歡迎評論或是加群討論,我們下期見!
課件下載: 「原創教程」- Sketch 從零開始學(一)
作者:SketchU&I(很慚愧,發一個微小的廣告)
SketchU&I QQ交流(you)群:110577764
推薦閱讀:
※清理 Sketch 歷史文件,釋放 Mac 磁碟空間
※極光日報 第 159 期 | 2017 / 4 / 18
※高能提升你的 Sketch 效率:編輯與導出篇
※不用 Sketch 的產品經理不是好設計師
※在sketch中如何處理這樣的路徑?(如圖)