Sketch 推出了 62 Beta 版本來迎接 2020。從一月的 53 開始到現在,總共推出了 10 個大版本更新。下面就一起看下 62 版本的新功能。
Sketch最新Beta版本下載
如果想知道 61 版本的新功能,請看這篇文章:
Sketch 61 Beta版本探秘,看看都有什麼新功能!
11 月還沒結束,Sketch61 就已經出來了,距離 60 版本發布才半個多月。今天一起看下 61 新增了哪些功能。
閱讀文章 >>
如果想體驗 Sketch 最新 Beta 版本,請進入 Sketch 測試版主頁下載 https://www.sketch.com/beta/。但是要記住,一定不要用在自己的正式文件中,防止修改后,低版本打不開。
Sketch 62 要求 Mac 系統版本是 macOS High Sierra 10.13.4 及以上,下面是 Sketch 各大版本對應的 Mac 系統版本,如果遇到新版的 Sketch 打不開就需要檢查下自己的系統版本。
智能布局新增最大值和最小值
自從 Sketch58 新增了 Smart Layout 智能布局功能后,UI 設計師可以很方便地通過製作彈性組件來應對各種不同狀態的需求。
在新建 Symbol 組件時,彈窗新增 Layout 選項,總共有 7 個屬性,分別對應不同的圖標,下面是每個屬性的簡單介紹。具體用法可以看下這篇文章:
Sketch 58 Beta版本探秘,看看都有什麼新功能!
Sketch 58 Beta 版本已於近期發布,官方終於推出 Smart Layout 智能布局,讓 Symbol 組件獲得響應功能,變得更加靈活和強大。
閱讀文章 >>
Sketch62 版本的智能布局新增了最大值和最小值功能,選擇好布局方式后,就可以在右側屬性面板區域設置。這裏的最大值和最小值規定了智能布局對象的兩個臨界點,可以分別單獨設置。
水平布局設置寬度的最大和最小值:
垂直布局設置高度的最大和最小值:
那麼這個最大值和最小值對我們的工作有什麼實際作用呢?
兩種寬度按鈕
這裏用上圖中最常見的按鈕組件作為例子。
我們經常使用的按鈕是固定寬度按鈕,和字數多少沒關係(當然要在合理範圍之內)。例如下圖,按鈕寬度是80,不管是多少字,寬度始終不變。好處是整齊、標準,容易排版布局。
固定寬度按鈕在CSS代碼中,直接把寬度寫死文字居中即可,比如 width:80px
另一種按鈕是彈性寬度按鈕,兩端留固定的邊距,字數越多寬度越大。好處是靈活,遇到極端特殊情況不至於文本溢出。
彈性寬度按鈕在 CSS 代碼中就不能寫具體的寬度數值了,而是要使用padding-left和padding-right,即左邊距和右邊距。例如上圖的彈性按鈕可以寫成
padding-left:16px padding-right:16px
最小寬度的彈性按鈕
但是在實際工作中也會遇到這樣的問題:正常字數,常見的2、3、4個字,按鈕寬度固定,比如始終保持80寬,這樣可以滿足大多數需求。遇到極端情況,比如8個字,我們需要讓按鈕兩端始終保持邊距16,寬度跟着字數多少走,但不能小於80,這個該怎麼辦呢?
在Sketch62版本之前,我們可以設置按鈕為水平智能布局,字數少寬度小,字數多寬度就長,如果想保持一個最小寬度,比如2、3、4個字保持80的寬度,那麼我們需要手動拉伸按鈕,但這樣的話會破壞彈性寬度,治標不治本。
Sketch62版本更新的最大值和最小值功能就可以完美解決這個問題。
比如設置寬度最小值為80,就是說這個智能布局規定了對應按鈕Symbol最小寬度是80,不能再小了。接下來試着改變数字。
可以看到,由於設置了最小寬度為80,按鈕中即使只有一個字,寬度也會始終不會小於80,這就是最小值的作用。
最大值同樣的道理,只要設置好對應數值,在不手動拉伸的情況下,寬度不會超過設置的最大值。
實際上,Sketch這次增加的最大值和最小值,比如寬度,對應CSS中的max-width和min-width兩個屬性,也是Web前端中比較常用的。
文檔保存優化
Sketch62中保存文檔時會新增兩個選項,分別是:保存在本地電腦和保存在Sketch Cloud。
還有其他的一些更新點,也主要是對Sketch Cloud 的優化,可見在Figma的追趕下,Sketch也逐步重視雲端的相關功能。
總結
前有Figma的攻城略地,後有Adobe XD的緊追不舍,2020年Sketch將會給我們UI設計師帶來哪些新功能和新的設計工作流呢?讓我們拭目以待。
歡迎關注作者的微信公眾號:「UI黑客」
未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五開戶_Sketch 62 Beta版本探秘,看看都有什麼新功能!