Sketch web design 之 Symbol

如果要讓我選出Sketch最好用的功能,那我肯定會選擇Symbol,在UI設計中當你熟練掌握Symbol了以後,就能夠大大提高設計效率,並且獲得意想不到的效果,那麼Symbol有什麼作用呢?

  • 將常用元素做成組件,方便全局快速修改和調用。
  • 可以基於組件的基礎上分別修改裡面的可變元素,例如文案、圖片等。
  • 靈活、可嵌套、可變形。

讓我們看看如何製作一個列表的Symbol:

1、使用形狀、圖片和文字工具製作好一個列表組。

2、選中列表組,點擊"Create Symbol",並且將該Symbol命名為"list"。

3、創建成功,看到右側能夠自定義的內容區域,這裡的文案和圖片都能修改。

4、點擊工具欄的"Make Grid",設置"Rows=5"、"Margin=0"、"Columns=1",也就是5行1列,間距為0。

5、確認以後得到5行列表。

6、可以選中某個列表項,在右側隨意修改文字。

7、同時,為了結合 Craft插件 快速替換其他幾個列表的頭像,需要去掉"list" Symbol外的編組(Command+Shift+G),然後把頭像的形狀名稱改為"avatar"。

8、回到頁面中,選中另外四個圖層,打開Craft插件中的插入圖片功能,點擊後選中"avatar"圖層,確認快速替換頭像。

9、同時為了在不同布局中使用該列表Symbol,我們需要調整Symbol裡面頭像和文本的"Resizing"模式,因為我們需要把它們固定在左邊,使得調整列表寬度的時候它們不會變形和移動,所以把"Resizing"的模式改為"Pin to corner"。

這樣設置以後,調整列表寬度就不會改變內容的形狀和位置了,同樣為了達到其他的目的,可以嘗試使用另外幾個Resizing模式(點擊放大查看gif動畫)。

推薦閱讀:

分享一組國外優秀的網頁設計
tornado如何進行非同步交互?
網頁設計思路:如何快速完成扁平化中秋節網頁專題製作(理論篇)

TAG:Sketch | 网页设计 | 交互设计 |