等等

前段時間,一位工作過幾年的UI設計師準備趁著金三銀四跳槽,于是就找我幫他點評下簡歷作品以及面試的一些注意事項。這位設計師主要的設計工具就是Sketch,大家肯定都用過。

目前國內的很多互聯網設計團隊使用了Sketch作為主力設計工具。豐富的插件生態、便捷的標注導出、輕量化的設計體驗,都讓Sketch成為了一名UI設計師必備工具。除了“只能在Mac平臺運行”這一個缺點之外,在UI設計領域比PS高出了不少數量級。

據國外uxtools網站2018年的統計,Sketch在UI設計工具的排名中占據第一位,比第二名的Figma高出一大截,可見其受歡迎程度。

不過,在溝通的過程中,我被驚訝到了:一位有幾年經驗的UI設計師在圖層分組、命名分類、組件整理、團隊協作方面竟然一塌糊涂,完全沒有體系化的UI思維,設計效率因此被降低很多。

其實不止是這位設計師,在我目前工作的團隊以及平時接觸過的很多UI小伙伴在使用Sketch過程中,還是按照傳統的PS設計界面方式使用,并沒有充分發揮Sketch的強大功能,僅僅簡單地把它作為一款視覺設計軟件。

在實際工作中,還是會經常遇到樣式不統一、文字不統一、顏色不統一等細節問題,以及團隊協作混亂、組件共享麻煩、分工不明確等協作問題。溝通中,這位設計師也承認,除了自身的工作習慣不規范之外,還在于對Sketch的進階用法不了解。

下面我總結了這位設計師在Sketch使用中的三個缺陷,作為設計師的你肯定也都遇到過。截圖已通過授權。

 

1. 圖層命名及分組混亂

當時我問他要了源文件,因為在實際面試的時候,很多boss也要看源文件的??词裁??是看你的圖層分組。UI設計師不僅僅要有像素眼,還要有“潔癖”。

誰也不想看到這樣的源文件吧,估計你也被隊友坑過。實際上,我們很多的時間就浪費在了命名以及分組這些看起來很不起眼的習慣上。掌握一種科學有效的命名管理方法十分重要。

 

2. 組件管理混亂

看不清楚是什么?其實是他項目的symbol組件頁面,想必你也看到過類似的一長串混亂組件……嚴重影響了我們的設計效率,展開后是下面這樣子的,完全沒有分類。

接著又打開了文字樣式,果不其然,很多文字沒有去做整理,在設計界面的同時,不會去針對性地分組命名。

實際上,一些設計師工作中的很多時間都浪費在了尋找組件中,完不成任務,加班成常態。在抱怨996的同時,我們也要自己思考下,是什么原因造成了工作效率低下。

 

3. 團隊協作坑太多

關于團隊協作這方面,經過這位設計師的描述,我總結了以下問題。

這個項目由他和另外一名設計師負責,設計出來的按鈕、文本、組件、顏色、視覺風格完全不一致。在同事完成設計以后,還需要把雙方的文件整合在一起,過程中出現多處樣式不一致,重新修改,效率非常低下。并且每次頁面開發,他們的程序員需要根據不同設計師的設計風格來進行額外的樣式制作,造成重復工作。本來一個樣式搞定的事情,非要增加其他樣式,給程序帶來很多無效工作量,開發效率其實被設計師大大降低。

以上的這些問題,作為UI設計師的大家絕對不陌生,也許你自己和團隊就在遭受這樣的困擾。其實這些問題很大程度是因為沒有好好利用Sketch的高級功能造成的。

而Sketch的強大之處正是可以完美地解決這些問題,真正提高UI設計師的設計效率,把時間花在重要的地方。Sketch的強大功能主要集中在這5個方面:Symbol組件、Text style文字樣式、 Layer style圖層樣式、Library組件庫、Resizing智能縮放。

下面我們就一起簡單了解下。

 

Symbol組件

Symbol是Sketch最最基礎,也是最最重要的一個功能。沒有了Symbol的Sketch就仿佛沒有了靈魂。

它的功能也很好理解,比如一個藍色按鈕,幾十個界面調用,現在老板任性地要求:藍色不好看,我們換個紅色的吧。如果我們使用了Symbol就很好辦了,不僅能一鍵換按鈕,甚至能通過兩三下操作更換整個界面顏色。

此外,通過Symbol組件我們還能實現很多有效率的功能,比如Symbol嵌套,通過嵌套能實現迅速更換icon。

 

Text style 文字樣式

對于界面中的文字,很多設計師沒有全局性思維,想到什么文字就直接使用,字號、顏色、對齊方式、加粗都沒有統一的規劃,導致細節混亂。如果前期不管理好,那么后期遇到修改的時候就會發現給自己挖了一個很大的坑,還會給技術開發帶來困擾。

面對雜亂無章的文字,我們需要使用Text style來統一管理,建立起項目的文字規范。其實技術同學在開發之前,也會對文字提前進行樣式整理,我們UI設計師也需要使用技術的思維去設計界面。

 

Layer style圖層樣式

同Text style類似,Layer style主要是管理我們UI項目中的各種圖層樣式。比如描邊、陰影、常用顏色等等。

舉個例子,一個圖標需要不同的狀態顏色,按照傳統的做法,我們需要制作圖標1、圖標2、圖標3等Symbol,這樣會造成組件的重復,維護起來非常不方便。

那么使用Layer style后,顏色就變成了一個可全局調用的樣式,我們只需要做一個圖標Symbol,需要什么顏色直接調用即可,大大減少了工作量,以及降低了樣式錯亂風險。

 

Library組件庫

以上的Symbol、Text style、Layer style共同組成了Library組件庫。其實Library可以簡單地理解為一個UI規范,這個UI規范定義了項目的顏色、文字、圖標以及各種組件,我們在設計的同時需要嚴格遵守和調用,這樣才能保證一個項目具有一個完整的、統一的視覺語言。

同時Library也包含了原子化的設計思路,原子-分子-組織-模板-頁面這五個部分共同組成了一個項目的基礎。

此外Library也可以通過一些方法共享給其他設計師。

也許你所在的公司需要多位設計師共同設計一個項目,在如何保持風格統一、如何調用組件、如何同步更新的問題上,可以采用Library的共享功能,打造自己團隊的Library庫。

 

 

Resizing 智能縮放

Resizing與上面四個定位于組件樣式的功能不同,它主要解決了響應式式設計的一些問題。通過Pin to Edge 和Fix Size兩功能的配合實現多種響應式布局,讓界面設計更加靈活。

在以前的PS時代,拉伸是屬于破壞性的一種操作,我們在遇到樣式一樣、寬度不一樣的組件時,只能重新建立一個新組件,這就造成了樣式重復。而這在前端的面前都不是事兒,只需要改變寬度,內部使用的float、position等屬性就可以發揮響應式作用,實現組件的復用。Resizing其實就是賦予組件響應效果的。

不使用Resizing,拉伸后,里面的組件會被破壞。

通過Resizing功能,我們就可以實現下面這種非破壞性拉伸效果。

以上五大功能還離不開一個最最基本的屬性,就是命名和分組,這也是眾多設計師容易忽略的兩個點。在設計一個項目的時候,命名和分組其實在無形之中占用了我們相當多的時間。如何通過命名和分組提高設計效率,也成為一個UI設計師所必須解決的問題。

 

原文地址:UI黑客?(公眾號)

作者:UI黑客

 

轉載請注明:學UI網 » 這5大Sketch核心功能,作為UI設計師的你用對了嗎?

登錄收藏
 
你可能喜歡的:
Sketch 63 Beta版本探秘,看看都有什么新功能Sketch 63 Beta版本探秘,看看都有什么新功能
如何使用Sketch繪制肌理插畫?如何使用Sketch繪制肌理插畫?
“不誤正業”的sketch-2 動畫GIF“不誤正業”的sketch-2 動畫GIF
“不務正業”的sketch——插畫繪制(附插件)“不務正業”的sketch——插畫繪制(附插件)
Sketch的Resizing功能竟然還能這么用,以后做界面再也不怕加班了Sketch的Resizing功能竟然還能這么用,以后做界面再也不怕加班了
2019年UI設計師必備工具清單2019年UI設計師必備工具清單
Sketch 60 Beta版本探秘,看看都有什么新功能Sketch 60 Beta版本探秘,看看都有什么新功能
高效設計 | 云端庫的工作方式高效設計 | 云端庫的工作方式
一步步教你制作 UIKit(附Sketch源文件)一步步教你制作 UIKit(附Sketch源文件)
全棧設計師必須擁有的Mac軟件推薦全棧設計師必須擁有的Mac軟件推薦
?
街机捕鱼城金库券