Sketch 推出了 62 Beta 版原來迎接 2020。從一月的 53 開始到現在,總共推出了 10 個大版本更新。下面就一起看下 62 版本的新功能。

Sketch最新Beta版本下載

云南体彩网如果想知道 61 版本的新功能,請看這篇文章:

如果想體驗 Sketch 最新 Beta 版本,請進入 Sketch 測試版主頁下載 。但是要記住,一定不要用在自己的正式文件中,防止修改后,低版本打不開。

云南体彩网Sketch 62 要求 Mac 系統版本是 macOS High Sierra 10.13.4 及以上,下面是 Sketch 各大版本對應的 Mac 系統版本,如果遇到新版的 Sketch 打不開就需要檢查下自己的系統版本。

智能結構新增最大值和最小值

云南体彩网自從 Sketch58 新增了 Smart Layout 智能結構功能后,UI 設計師可以很方便地通過制作彈性組件來應對各種分歧狀態的需求。

在新建 Symbol 組件時,彈窗新增 Layout 選項,總共有 7 個屬性,分別對應分歧的圖標,下面是每個屬性的簡單介紹。具體用法可以看下這篇文章:

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黑客」

點贊 6
收藏 9
繼續閱讀相關文章

發表評論 已發布 14

還可以輸入 800 個字
 
 
載入中....
14 收藏