Sketch進階教程-圖標繪製(一)

Sketch Mac是一款爲設計師量身定做的優美界面和強大工具兼有的專業繪圖工具。能夠滿足網頁、用戶界面、圖標等的設計需求。 Sketch是一款爲設計師量身定做的優美界面和強大工具兼有的專業繪圖工具。製作出漂亮的圖形是一件很有挑戰性的事情,你所需要的是一款精心設計的應用 程序。此次小編帶大家瞭解基本工具使用方法。Sketch Mac軟件獲取!!

怎麼用Skech繪製一枚圖標?繪製圖標前有哪些注意事項需要了解的?圖標繪製Sketch教程,分爲兩篇,第一篇是先對圖標的知識作大致的瞭解,在下篇中將講解如何使用Skech繪製圖標,同時涉及簡單的布爾運算。

1、認識圖標

(1)圖標是什麼?

圖標,外文名爲icon,是計算機中的一種圖形或者符號,一般由線、面或者線+面構成。

圖標在產品中隨處可見,例如手機設置項前方的圖標,APP中的菜單圖標。

(2)圖標和logo的區別

很多人會把圖標和logo歸爲一類,但兩者有本質上的區別。圖標只是傳達想法的一些符號,在產品中並不突出,屬於可有可無的部分;而logo是品牌標識,屬於品牌設計中的一部分,它代表的是一種企業理念。

當然,圖標也可以升級爲logo,logo也可以當作圖標來使用,但一般僅限於應用圖標,這裏就涉及到應用圖標和功能圖標的區別,本文主要針對功能圖標的繪製說明。我們以谷歌瀏覽器爲例,說明他們之間的差異。

(3)圖標的作用

爲什麼要使用圖標?因爲圖標發揮着兩個方面的作用:直觀、美觀。直觀是指圖標很多時候比文字表意更直接,能傳達複雜的功能含義,例如放大鏡圖標,能告訴用戶代表搜索的含義;美觀是指圖標在頁面中起到點綴的作用,可以讓頁面看起來不那麼單調,也更耐看。例如,支付寶首頁中,基本是由圖標組成,而不是全部文字。

另外,對於圖標直觀的用法可以體現在交互說明當中,例如針對移動端的手勢說明,使用圖標能讓文檔閱讀對象更容易明白手勢交互效果。

2、圖標繪製規範

在動手繪製圖標之前,圖標繪製規範纔是大部分設計需要惡補的一門課,因爲,存在部分設計師直接照搬網絡圖標資源的現象,最終產出的圖標不倫不類。

(1)圖標繪製原則

圖標繪製應遵循三大原則:簡單、寓意、統一。

簡單:圖標應儘量使用簡單的線條或者填充面組成,避免過於複雜。

寓意:圖標應貼合現實,從形狀上表達出一種寓意,讓用戶能瞭解其大概含義。

統一:如果爲應用設計一整套的圖標,那風格需要保持統一。

(2)圖標尺寸

工具教程中,被諮詢最多的問題,應該是尺寸問題了,常見的有原型、圖標、屏幕尺寸等。以手機APP爲例,普通圖標建議尺寸爲48*48px或者64*64px,一般用於導航欄中;小圖標建議尺寸爲24*24px或者32*32px,一般用於顯示點贊數,閱讀數等輔助小圖標中。(備註:左側手機截圖爲縮放後的比例,所以看起來和右側圖標大小不太一致。)

(3)圖標參考線

一個圖標怎麼樣設計纔好看?答案是使用參考線。在參考線內創作,且四周留白,如果圖標超出留白區域,就會顯得圖標過大。以經典的谷歌瀏覽器圖標爲例,它的應用圖標設計完全依照參考線來繪製,同時符合留白法則。

那麼這些參考線是從哪裏來呢?良心的Sketch自帶IOS圖標的參考線,我們可以直接沿用,調用路徑是在菜單欄中選擇“File”-“New From Templete”-“iOS App icon”即可。Sketch提供的參考線大小是512*512,我們可以等比縮放爲48*48px即可。

以上就是小編爲大家帶來的Sketch進階教程-圖標繪製(一)。還有更多詳細、實用的功能以及相關軟件sketch和其他Mac軟件獲取,大家快來Macdown.com自行探索一番吧。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章