小男

如何將想法和工具結合起來,讓自己的工作效率翻倍,這篇文章為你答疑解惑。

 

工欲善其事必先利其器,在日常工作中,怎么樣提高自己及團隊的工作效率應該是很多設計師和團隊在思考的問題。Sketch作為UI設計師的必備工具,我們已經相當熟悉,如何結合Sketch來提高自己以及團隊的工作效率呢,我從下圖所示的幾個方面結合自己的經驗做個簡單分享。

 

Tips:本文不對Sketch的使用操作做講解,教程可以在Sketch官網、Youtube、或者國內外的Sketch論壇等途徑都可以找到,希望文章對你有幫助,或者您有合理建議或其他內容補充也可以提出來。

 

Symbol介紹

Symbol是Sketch中一個強大且實用的功能,可以讓你輕松的在畫板和頁面以及多個文件中復用重復元素。Symbol的存在類似智能對象在PS中的存在,但Symbol比智能對象更加靈活實用。那么如何高效合理的利用Symbol進行工作呢,下面我介紹下Symbol的使用方法。

 

Symbol使用方法

Symbol的使用場景主要集中在模塊化設計,如何合理的利用模塊化思維進行設計工作,是現在的設計師需要思考的一個問題。那么什么是模塊化設計呢,對于產品體驗設計而言,模塊化設計就是將產品流程、產品結構、交互方式、表現形式等產品的主要組成要素模塊化。通過模塊化設計可以讓我們在差異化跟高效之間找到一個合適的平衡點。

模塊化設計主要分為以下步驟:模塊劃分——模塊設計——模塊組合,這里主要針對模塊的劃分以及模塊的設計進行重點說明。首先模塊是由控件組成,主要包括字體,按鈕,圖標,列表等。而模塊又由控件組成,模塊跟控件的存在父子關系的。

在模塊劃分標準上要遵循:單一性(模塊顆粒度要小,一個模塊解決一個需求)、完整性(內部流程可打通,形成閉環)、獨立性(每個模塊和其他模塊的依存關系要低,以便跟其他模塊組合適配)。

 

在模塊設計的部分遵循:復用性(盡可能的提高復用模塊占比),延展性(考慮一定的模塊控件可拓展性,以便處理在一定范圍內的差異性處理),互換性(需要主意對外信息結構一致,保證全局信息結構快速互換)三大原則。

 

在產品的設計過程中,根據產品的實際情況,我們使用Symbol對模塊進行控件化,已下圖為例:

 

我們可以看到上圖導航欄模塊,分別由背景,圖標,文字,分割線,狀態欄組成。依照模塊化設計的標準,我們依次對他們創建Symbol(文字除外),這時候控件元素已經創建好,對他們進行對應的排列組合就這個模塊就已經完成了,在日?;竟ぷ髦?,這部分工作已經完成了。但是做到這些是不夠的,我們需要更深層思考,例如適配其他端應該怎么處理,有沒有其他情況下會跟現在的控件重復或者沖突等等,這都是要思考的問題。那么如何合理的創建Symbol,避免控件樣式的重復呢。我們繼續以導航欄模塊為例:

 

根據上一部分我們知道導航模塊第一種類型已經完成了,但是在實際項目中我們知道導航欄樣式不會只有這么一種類型,根據產品實際情況我們想到會出現以上幾種情況,所以我們也對他們進行模塊化,可以復用的元素就可以調用之前模塊里面的控件,例如狀態欄,返回按鈕,背景色,這樣做可以最大化的避免模塊控件的重復,也可以在產品設計早期完善模塊,做到未雨綢繆!為以后的設計工作做準備。

看到這里,大家可以看到,我并沒有講Symbol的任何具體使用方法,工具只是實現想法的一種媒介,我們應該多思考,舉一反三,將工具跟想法結合起來才能達到效率和質量的的最大化。

 

library介紹

Library其實只是一個普通的Sketch文件,其中包含Symbol,你可以在其他Sketch文件中使用此Symbol。如果您更新Library文件中的任何一個Symbol,你都會收到更新通知,利用Library,團隊成員們可以在Sketch文件之間共享Symbol,并使其更新以始終保持同步。

 

Library使用方法

在設計團隊中,多人協作是必然情況,那么如何保持通用模塊和控件始終保持一致呢?我們只需將Librar文件存放在一個固定的地方,例如云盤,公司內部網盤等位置,將通用的控件以及模塊存放在其中,然后其他設計師就可以輕松調用啦。然后當這個Librariy件有任何修改,你就可以接收到更新通知。

通常情況下,我們會將公司產品的設計規范、通用模塊和控件做成Library文件,讓團隊內的其他設計師進行調用。一般里面包括顏色,圖標,文字,還有其他模塊控件等。團隊的設計師可以充分利用Library來讓自己文件里面的Symbol始終保持最新以及和團隊成員保持一致。但是由于Library文件任何設計師都可以進行編輯,所以我們要將Library進行安全的分離,對Library的編輯只能在特定的位置,特定的文件甚至特定的人進行,因此一般不會有不相關的編輯,如果一旦不小心無意進行了修改一定要及時修改回來,不然團隊內的其他設計師的文件就會出問題。

下面就分享下如何簡單的創建一個Library文件。這里我們以Apple官方的Library文件為例進行講解,這里我們選擇將文件存放在堅果云里面。詳細看下圖:

 

我們將文件存放好之后,打開Library添加彈層如下圖:

 

選擇添Add Library按鈕選擇存放在堅果云的sketch文件,如下圖:

 

這樣Library文件已經添加成功,我們已經可以輕松的訪問我們Library里面的控件了。如果我們的Librar文件有人進行了編輯,那我們會在自己使用Librari文件中收到如下圖一樣的更新提示,我們根可以據自己的需求選擇是否更新Symbol,如下圖所示:

 

是不是很方便高效,這里只寫了最簡單的用法,詳細的方法呢有興趣的朋友可以私信問我或者在官方網站查找,這里不做過多贅述。另外如何制作一個相對合理Library文件,這也是屬于比較重要的內容,今天在這里不展開講解,有興趣的朋友可以私信我。

通過上面的流程講解,我們可以看到Library的使用很簡單,通過Library可以讓我們團隊協作的更加順暢,工作效率和工作質量會有很大的提升。設計師們如果有機會一定要嘗試構建Library文件,不論是為個人還是為團隊都對自己的整體把控能力有很大的提升。

 

使用技巧

使用了這么久的sketch,有幾個好用的小技巧分享給大家:

1、Sketch支持簡單的數學計算,再也不用在用計算器了,直接在輸入框內就可以計算,用途廣泛,如下圖所示:

 

2、在一倍圖0.5px的分割線讓很多設計師頭疼,這里利用內陰影教大家制作,如下圖所示:

 

3、默認的圖形樣式是可以設置的,這樣可以更加個性化,如下圖所示:

 

4、如何利用圓周率進行Loading制作,如下圖所示:

 

5、如何利用內陰影快速制作可復用表格,如下圖所示:

 

6、如何測量組內跟組外間距,組內量組外間距快捷鍵為:option 上檔鍵 鼠標懸浮,如下圖所示:

7、如何快速查到歷史用色記錄,如下圖所示:

 

效率拓展

下圖是給大家推薦的11款常用sketch插件和一個Sketc文件版本管理工具,下面我就依次介紹下這11款插件和1個軟件。

 

插件&軟件下載鏈接

1、Runner
使用命令行來提高你的工作效率——http://sketch.cm/plugins/12
2、Cfaft
幫你提高效率的自動填充神器——http://sketch.cm/plugins/16
3、Rename it
快速批量重命名你的圖層——http://sketch.cm/plugins/17
4、Remove Unused Symbols
一鍵刪除未使用的 Symbol——http://sketch.cm/plugins/48
5、Artboards to PDF
批量導出選定畫板為多頁 PDF——http://sketch.cm/plugins/52
6、cmageOptcm
一鍵導出所有切片資源并自動優化體積——http://sketch.cm/plugins/94
7、Sketch Measure
快速創建規范為開發者和團隊協作提供方便——http://sketch.cm/plugins/1
8、Midnight
增加替換主題功能及小工具——http://sketch.cm/plugins/129
9、Flavor
給你的設計加點料——http://sketch.cm/plugins/89
10、Sketch2AE
輕松導出 Sketch 資源至 AE 并自動定位——http://sketch.cm/plugins/61
11、Ancma
可以實現自動布局,——https://www.ancmaapp.com/#sketchtocode
12、Abstract
Sketch文件版本管理軟件——https://www.goabstract.com/

 

寫在最后,分享的一點想法希望對諸位有所幫助,如果諸位有好的想法或者意見可以跟我探討。工具只是幫助我們實現想法的一個媒介,我們應該豐富自己的想法,獨立思考,與君共勉。

 

原文地址:站酷

作者:Kane_D

 

轉載請注明:學UI網 » 想法結合工具,讓你的效率翻十倍

登錄收藏
 
你可能喜歡的:
Sketch 63 Beta版本探秘,看看都有什么新功能Sketch 63 Beta版本探秘,看看都有什么新功能
如何使用Sketch繪制肌理插畫?如何使用Sketch繪制肌理插畫?
“不誤正業”的sketch-2 動畫GIF“不誤正業”的sketch-2 動畫GIF
“不務正業”的sketch——插畫繪制(附插件)“不務正業”的sketch——插畫繪制(附插件)
Sketch的Resizing功能竟然還能這么用,以后做界面再也不怕加班了Sketch的Resizing功能竟然還能這么用,以后做界面再也不怕加班了
Sketch 60 Beta版本探秘,看看都有什么新功能Sketch 60 Beta版本探秘,看看都有什么新功能
高效設計 | 云端庫的工作方式高效設計 | 云端庫的工作方式
一步步教你制作 UIKit(附Sketch源文件)一步步教你制作 UIKit(附Sketch源文件)
你不知道的Sketch黑科技-圖文浮動居中你不知道的Sketch黑科技-圖文浮動居中
Sketch 55 Beta版本探秘,看看都有什么新功能Sketch 55 Beta版本探秘,看看都有什么新功能
?
网球比分雷速 安徽体彩十一选五基本走势图 中国彩吧论坛 广西快3技巧 股票行情大盘走势指 怎样理财投资 百度金融理财平台 北京pk10投注 幸运赛车购买技巧 2019上证指数最高点 河南快三和值走势图表