UI培訓:你不知道的Sketch黑科技-智能排版

日期:2020-12-04 10:35作者:北大青鳥西安建大IT學院

摘要:我立即明白他的意思,推薦他使用了Kitchen插件。結果第二天淚流滿面地跟我說:Sketch這玩意兒太TM好用了。 其實很多UI設計師如果沒有了解過點前端知識,可能不太理解這位程序員的心
關鍵詞: 北大青鳥ui培訓

我立即明白他的意思,推薦他使用了Kitchen插件。結果第二天淚流滿面地跟我說:Sketch這玩意兒太TM好用了。

其實很多UI設計師如果沒有了解過點前端知識,可能不太理解這位程序員的心情。但是對于寫過html頁面,了解過css的設計師來說,網頁開發中的float浮動真的應該引入到Sketch中。

先看個例子,我們現在需要做一個橫向的文字導航,這應該算是一個最簡單最常用的UI組件了。每個文字標簽之間的間距是40。

你不知道的Sketch黑科技-智能排版-UI黑客

不過在實際工作中我們總會遇到這樣的需求,比如把熱門改為熱門文章。正常情況下我們是這樣處理的:更改文字后,為保持間距,后面三項需要手動調整位置。

你不知道的Sketch黑科技-智能排版-UI黑客

難道這個操作不對嗎?對于前端程序員和了解css的設計師來說,這個操作還真的“不對”。例子中只有5項,如果有十幾項不就麻煩死了。文字內容改變后,文字之間的間距應該保持不變才是正確操作。

Sketch作為設計軟件,天生遵守“絕對定位”這一原則:每個元素之間是相互獨立的,互不影響。但是在web開發中,頁面中的元素卻是互相聯系的(在不設定position:absolute的前提下),定義好間距樣式后,無論文字內容怎么變,它們的間距都會保持一致。

 

Kitchen插件中的智能排版

如果在Sketch中引入這個功能,那么不就極大解放設計師的生產力了嗎?所以隆重給大家推薦Kitchen插件中的自動排版功能。

你不知道的Sketch黑科技-智能排版-UI黑客

Kitchen是一個阿里團隊開發的Sketch插件,https://kitchen.alipay.com/,本文就不介紹其他功能了,大家自己體驗,這里只著重介紹它的自動排版或者叫智能排版功能。這才是Kitchen的核心。

Kitchen的智能排版主要包含間距和邊距兩個功能,用網頁前端的術語來說就是margin和padding——盒子模型中最最基本的兩個屬性。

你不知道的Sketch黑科技-智能排版-UI黑客

下面我們就結合實際例子,看看它是如何提高設計師的生產力的。

 

制作彈性按鈕

一般我們做的按鈕主要分為兩種:固定寬度按鈕和彈性寬度按鈕。

固定寬度很簡單,一個寬度是120的按鈕,其他頁面也都是120,不管兩個字還是三個字,按鈕寬度保持不變。

彈性按鈕就不一樣了,在中后臺的界面設計中,經常遇到不同文字數量的彈性寬度按鈕需求。不管按鈕文字是多少,兩端的留白(即padding)始終保持固定。這個對于設計師來說很坑爹了,每次字數變化后都要再調整按鈕寬度。

你不知道的Sketch黑科技-智能排版-UI黑客

那么在使用Kitchen的智能排版之后,這個操作將變得絲一般的順滑。

制作彈性按鈕將會使用到智能排版中的邊距功能。我們選中這個按鈕組,打開智能排版面板,在左邊距和右邊距都寫上20,鍵盤回車。然后再改變文字試試看,原本又笨又呆的按鈕仿佛有了靈性,完全聽從我們的指揮,這就是彈性按鈕,用前端術語就是兩邊增加了padding-left和padding-right。
你不知道的Sketch黑科技-智能排版-UI黑客

上下邊距也是同樣操作,左下角的自動排版需要勾上,否則按鈕組會被打散,失去自動排版功能。

下面是一個示意圖,可以看到Kitchen給我們的按鈕組重新命名了,多了尖括號和數值,名稱中的x代表空,下邊距沒有填寫。順序是按照“上-右-下-左”順時針的方向,和前端的四數值簡寫方法是一樣的。需要注意的是,新增的尖括號及內容不能刪除,否則智能排版會失效。

你不知道的Sketch黑科技-智能排版-UI黑客

所以到這里大家應該明白,智能排版本質就是賦予Sketch前端布局的功能,讓設計師布局更加靈活。接下來我們看下間距的用法。

 

讓元素自動調整間距

回到文章開頭的問題,一個橫向的文字導航,每項間距是40,其中第二項字數發生了改變,為了保持間距統一,后面的元素位置需要手動調整。那么利用智能排版的間距功能,我們就會給每個文字賦予生命力,讓它們之間實現自動排版。在水平間距填寫40看看效果。

你不知道的Sketch黑科技-智能排版-UI黑客

搞定,從此以后面對任何導航再也不怕修改文字了。垂直間距也是同樣的道理。在間距操作中,導航所在的組,名字被Kitchen改為h40,h即horizontal,同樣,如果是垂直間距會加上v,即vertical。

你不知道的Sketch黑科技-智能排版-UI黑客

 

制作一個彈性按鈕組

到此,我們已經掌握了智能排版的兩個核心間距和邊距,在實際工作中還有很多需要兩個功能結合起來的操作,比如做一個彈性按鈕組:按鈕內部兩端的邊距固定,按鈕之間的間距也保持固定。

你不知道的Sketch黑科技-智能排版-UI黑客

在沒有Kitchen之前,這樣的操作簡直要命,先要更改按鈕寬度,接下來再改變按鈕間距。作為一名追求工作效率的UI設計師,我可忍受不了這種復雜糟糕的體驗。所以在智能排版的幫助下,復雜的操作也是瞬間完成。

你不知道的Sketch黑科技-智能排版-UI黑客

不過也有一些小瑕疵,就是當按鈕寬度改變后,間距卻沒有及時變化,需要再次點擊這個按鈕組才可以,應該是插件的一個bug,希望后續的更新能優化下。

 

智能縮放應用到Symbol

在上面的例子中,我們用了不同寬度的按鈕,但是像文字、顏色、描邊等樣式都是一樣的。對于Sketch來說,這些按鈕統一可以使用Symbol來代替,實際工作中我們肯定也是這樣操作的。那么如果每個按鈕都調用了同一個Symbol,上面講到的彈性按鈕組可以實現嗎?當然可以。

我們先把按鈕轉換為Symbol,復制四個分別再命名,然后把整個組用智能排版的間距功能設置為h20。不過出現了問題,按鈕高度塌陷了,一個bug。

你不知道的Sketch黑科技-智能排版-UI黑客

我們需要進入到Symbol中,把按鈕的圓角矩形底的Resizing給設置下,頂部固定,高度禁止拉伸。

你不知道的Sketch黑科技-智能排版-UI黑客

設置之后再看下效果,已經可以了。不過還有個小問題就是,按鈕之間的間距無法自動完成,需要我們手動選擇按鈕組,再使用下智能排版的間距功能,設置為h20,確定回車就可以了。這個應該還算是一個bug。

你不知道的Sketch黑科技-智能排版-UI黑客

 

 







轉載請保留本文網址http://www.cpnradio.com/qqwd/ui/499.html
上一篇:UI培訓:設計萬花筒|在花卉中重視色彩
下一篇:UI培訓:Sketch帶你玩轉3D球體
人妻 清高 无码 中文字幕