小紐扣

文章的大體規則由谷歌的Material Design制定的,很多細節部分我是根據個人經驗來解析的,設計師小伙伴們可以作為學習參考。

前兩篇文章講到了谷歌的Material Design圖標規范。谷歌的Material Design圖標規范分為:產品圖標系統圖標。系統圖標比較復雜,分為上下兩章來講,第一章主要講系統圖標的基礎認知,第二章講系統圖標的繪制方法與解析。今天講一下系統圖標的圖標分解,以及一些繪制細節。

谷歌規范相對過于范式化,他們只告訴大家界面的大體規范,而具體里面的為什么要這么做完全沒有講,思維和思考一點沒提。很多細節都是自己根據自身經驗去做的補充,很多細節也都有相應的描述,希望能幫助到大家提升些設計認知吧。

 

目錄

??1. 系統圖標 – 結構

  • 1.1 什么是輪廓
  • 1.2 什么是形狀
  • 1.3 外路徑
  • 1.4 主路徑
  • 1.5 內路徑
  • 1.6 筆畫
  • 1.7 圓角曲率
  • 1.8 內部區域
  • 1.9 邊界區域

? 2. 系統圖標 – 規范

  • 2.1 視覺修正
  • 2.2 曲率的統一性
  • 2.3 去立體化
  • 2.4 避免復雜化
  • 2.5 避免生硬感

? 3. 繪制系統圖標

  • 3.1 確定圖標尺寸
  • 3.2 確定輪廓與關鍵線
  • 3.3 繪制主輪廓 – 粗細
  • 3.4 繪制主輪廓 – 曲率
  • 3.5 繪制主輪廓 – 開口
  • 3.6 繪制內路徑 – 箭頭
  • 3.7 完成繪制

 

1.系統圖標 – 結構

當我們把系統圖標的結構分解后,就會發現一個系統圖標是由很多個細小構件組成的,這些構件分別有自己的名字和用途,分別是外路徑、主路徑、內路徑、筆畫、圓角曲率、內部區域、邊界區域,谷歌將它們稱為“筆畫末端、拐角、內部區域、筆畫、內部筆畫、邊界區域”,這些原始的構件名真的太難理解了,我就根據自身理解重新來進行命名了。另外有一些構件的用途與用法谷歌沒有講,我也是根據自身理解來進行講解的。每一個圖標組成部分都是由其相對應的規范去約束它們,我會試著把它們都講明白,來方便大家去理解它們。

  • 1. 外路徑 – 超出整體形狀之外的路徑
  • 2. 主路徑 – 整體的形狀(主要的輪廓)
  • 3. 內路徑 – 內部的形狀(不包含負形)
  • 1/3. 筆畫 – 產生路徑基本點的方向、粗細和角度
  • 4. 圓角曲率 – 所有形狀的曲率
  • 5. 內部區域 – 圖標內部的空白區域
  • 6. 邊界區域 – 圖標的尺寸形成的邊界域

這里大家理解不了構件的概念也沒有關系,接下來我會一個點一個點的進行講解。

undefined

 

1.1 什么是輪廓

輪廓指的是圖標周圍的外框。圖標的輪廓被圖標的性質影響并支配著,圖標的性質被定義下來,這個圖標的輪廓也會隨之定義下來。例如“日歷圖標”在我們的認知中它是與紙張和裝訂孔聯系在一起,紙張是有棱角的、方形的形狀,而裝訂孔是圓潤的、圓形的形狀,所以日歷圖標的主輪廓是“方形”的,而不是三角形或是認知外的其他的形狀,想表現圖標就要還原這個圖標的本質,如下圖所示。

undefined

 

1.2 什么是形狀

形狀指的是圖標中所有形式的構成,如長方形、三角形、圓形等。一個圖標是由很多個形狀構成的,例如一個非常簡單的“插圖圖標”,整體是由正方形和圓形構成的,里面的“山”是由三角形和圓角構成的,這些簡單的形狀整合在一起就會變成形式復雜的圖標,并轉變為象征性的圖形,使整體賦予了新的意義。

undefined

插圖圖標中的“山”也是由形狀(三角形和圓角)構成的。正因為圖標中的形狀可以根據需求進行任意的搭配,才會使圖標具有無窮變化的屬性。也正因為形狀的變化,才能使圖標的視覺語言發生不同的變化。

undefined

 

1.3 外路徑

超出主要輪廓之外的路徑是外路徑。我們在設計一個圖標時會實現考慮好它的輪廓,再根據它的輪廓繪制大體的形狀,而超出大體輪廓之外的部分點組成的路徑就是外路徑了。因為形狀是由路徑的基本點構成的,外路徑不一定是由正規的形狀(方形、圓形、橢圓形等)構成的,也會有幾條線段、幾個角等不規則形狀和路徑構成的。

undefined

 

1.4 主路徑

我們在定義一個圖標時要理解這個圖標的性質,是方的還是圓的、有沒有角度、應用在哪方便、它的視覺表現,它的表象特征是否符合我們認知中的樣子,是否能與我們的生活產生一定的關聯等,當這些性質被定一下來,圖標的輪廓也就會被定義下來了。圖標的輪廓確定下來后,就可以確定這個圖標的形狀了,確定形狀后不足以把一個圖標的性質詮釋出來,需要在大體的形狀基礎之上去改變部分路徑,使這個圖標具有一定的象征意義。例如我們在做一個“標簽圖標”時,應該是以下這樣的思考過程。

undefined

當我們確定好一個標簽圖標的大體輪廓符合我們認知中的形狀后,就要開始往里填充形狀了,把方形和圓角融入到一個形狀中,讓他們看上去更接近我們認知中的標簽圖標的樣子。這里說明一下“標簽圖標”是比較好理解的圖標形式,所以以上這些觀點看上去會顯得“有些蠢”,如果我們在繪制一個不太好理解的圖標形式時,用以上這種思考方式會讓我們少走很多彎路。

undefined

當我們有了標簽圖標的形狀后,改變部分路徑使它變得具有象征意義,讓它看上去更像一個“標簽”。那到了這里一個簡單的標簽圖標就繪制完成了。

undefined

當我們有了圖標的基礎形狀以后,怎么延伸復雜的圖標形式呢,這涉及到視覺傳播中的視覺原理。即我們大腦處理圖像時要依據四個基本視覺信號:色彩、形式(點線面)、縱深和位移。我們可以通過改變這些基礎視覺信號來改變圖標的形式。例如下圖所示,通過改變縱深和位移來改變圖標的基礎形式,使它變成多樣的復雜形式。

undefined

圖標繪制完成以后由輪廓轉化為形狀,由形狀轉換為路徑,最后的路徑就是主路徑。

 

1.5 內路徑

內路徑指內部形狀的路徑,相對比較好理解的一個概念。我上面強調了一下內路徑中不包含負形,在谷歌Material Design中把內部區域中的一個負形看做是“內部筆畫”,一個沒有路徑的區域怎么能把它定義為筆畫呢!對此它們還沒有做解釋。所以我這里根據自己的理解,直接改變了谷歌定的這些規則。我認為形狀就是形狀,路徑就是路徑,區域就是區域,這樣劃分的就更明確。

undefined

相對復雜的圖標形式如何分清什么是外路徑、主路徑和內路徑呢,如下圖所示藍色區域部分代表外路徑,黃色區域部分代表主路徑,紅色區域部分代表內路徑。

undefined

 

1.6 筆畫

上面講過形狀是由路徑的基本點構成的,而路徑的基本點是由筆畫產生的,這些基本點與筆畫的方向、筆畫的角度組合起來就會形成各種形狀,這些形狀組合起來最終組成為圖標。所以筆畫是圖標最基礎的構成元素之一,也是最重要的組成部分。谷歌是用了四種規則去規范筆畫的,分別是:一致性、曲線和斜線、筆畫末端、內部筆畫。這里我要吐槽一下谷歌中文版翻譯網站,在谷歌中文版翻譯中的標注打印圖標的曲率標注為2px/dp,而實際谷歌設計的打印圖標的曲率為3px/dp。谷歌這么做是考慮了視覺修正和視覺印象,設計不是絕對的,不要因設計規則的統一性而把設計定死,適當要突破規則來進行設計,但前提還要理解這些規則。

 

1.6.1 一致性

為了使圖標具有統一性和一致性,筆畫的粗細度也要保持一致。谷歌規定的筆畫粗細度為2px,但我們在做實際項目時,圖標筆畫的粗細度要根據實際項目而定。一個較為時尚的女性產品就應該采用較為纖細的筆畫粗細度,而不能使用較為粗獷的筆畫粗細度來繪制這個系統的圖標。

undefined

 

1.6.2 曲線和斜線

圖標的曲線與斜線也是有講究的。普通的圖標是由很多根直線和直角構成的,形式上有一定改變的圖標需要用曲線來進行繪制。谷歌Material Design規定的曲線的粗細為2px,谷歌過于范式化,當然還是要根據實際情況而定。

undefined

而斜線一般情況下傾斜角度為45°、90°(直角)和135°來進行繪制的,對于一些結構較為復雜的圖標形式可以采用其他的傾斜角度。筆畫末端的角度為90°。

undefined

 

1.6.3 筆畫末端

筆畫末端的粗細與曲率要根據這個圖標的風格而定,如果想表達專業的態度筆畫末端就用直角;如果想表達親和柔和的態度筆畫末端就用圓角。

undefined

 

1.6.4 內部筆畫

繪制圖標時要遵循一致性的原則,所以內部筆畫的粗細度要與整體輪廓的粗細度保持一致。例如外路徑的筆畫粗細設置為1px,主路徑的筆畫粗細設置為1.5px,內路徑的筆畫粗細為2px,這樣就會顯得整體十分的不協調,所以筆畫的粗細要保持一致。

undefined

 

1.7 圓角曲率

上一篇《基礎認知 Material 規范》- 1.2絕對棱角中講到,棱角圖標的大體輪廓是有曲率的,而里面具體的細節是直角的。這里指的大體輪廓就是外輪廓,而具體細節指的就是圓角形狀/路徑的曲率。谷歌Material design規定要將主輪廓/主路徑的圓角曲率值設置為2px,但內路徑/內部形狀是沒有曲率的,要把曲率設置成直角,不要破壞圖標的本質帶來的視覺印象。

undefined

 

1.8 內部區域

內部區域指的是圖標內部的空白區域,類似于平面構成中的“負形”。下圖中藍色部分的區域就屬于內部區域,它對于繪制系統圖標而言沒有什么影響,只是把這塊區域定義為“內部區域”,這塊相對也比較好理解沒有什么要點要講,大家理解一下這東西是什么就行了。

undefined

 

1.9 邊界區域

圖標的尺寸形成的邊界域,是整體圖標的尺寸與實際圖標所占的面積之間的區域,也是上一篇文章《 基礎認知 Material 規范》- 3.圖標區域中講的“裁剪區域”。 這塊跟內部區域一樣,對繪制一個系統圖標而言不會產生什么影響,大家也是簡單的理解一下它是什么就行了。

undefined

 

2.系統圖標 – 規范

當我們把系統圖標的結構弄明白后先不要著急繪制它,而是要弄明白系統圖標的規范后再去繪制它。我們需要修正圖標的視覺部分,還要理解圖標的觸控范圍與觸點區域,之后還要從圖標的形式上做規范。

 

2.1 視覺修正

當出現特殊情況時需要對圖標進行微調。例如下面中的回形針圖標,在24px*24px的尺寸中如果采用了2px的路徑粗細度,各個路徑的距離會顯得很粗獷,圓角也會被擠壓顯得不自然,失去了回形針原本的印象,無法與我們生活中的回形針產生關聯。

undefined

 

2.2 曲率的統一性

當我們繪制系統圖標時,也要注意要保持路徑頂端和末端的曲率的統一性。如果圖標輪廓是線性尖銳的,所有路徑的邊角都應該是直角的;如果圖標輪廓是圓潤的,那所有路徑的邊角都應該是圓角的。

undefined

但這里要注意的是圖標的形式不同,像“箭頭”這種單一的形式要遵循“圖標曲率統一性”原則。但是較為復雜的圖標形式,例如像“公司圖標”這樣復雜的形式,就不要遵循圖標曲率統一性的原則。因為我在上面的“1.1什么是輪廓中講到過”,圖標的輪廓被圖標的性質影響并支配著,如果將“公司圖標”里面的“窗戶”的方形改變為與整體一致的圓形,就造成認知中理解的“窗戶的形狀”是圓角的而不是直角的,就會與我們認知中理解的窗戶的形狀不符,會使人產生不理解和感覺和印象。

undefined

 

2.3 去立體化

我們做UI設計是在二維平面中來進行繪制,這里指的是App或網頁設計等,而不是那種實體交互設計或基于虛擬現實中的界面設計。所以圖標的形式要去立體化和深度,也不能以立體化的形式出現。用二維來表現圖標形式,就會貼近產品所傳遞的整體視覺形象,與整體的關聯性就會更強。

undefined

 

2.4 避免復雜化

系統圖標的繪制也要避免復雜化,要保持圖標的簡潔和大方,不要增加用戶對圖標的理解力。像下圖中左面的圖標一樣要保持簡潔和大方,這樣的圖標也比較直觀;而右圖中的圖標增加了很多修飾并增加了用戶的思考,相對而言這種圖標不太容易被用戶理解和接受。

undefined

 

2.5 避免生硬感

系統圖標的繪制也要避免生硬感,圖標在保持簡潔的基礎上應該增加靈動感,改有曲率的角就應該有曲率,沒有曲率的地方就應該有直角,像圖標的整體與細節全部都是直角的形式給人感覺就太過生硬了,用人的性格來描述它就是個鐵憨憨,不會變通。

undefined

 

3.繪制系統圖標

文章篇幅也挺長了,這里只講一個圖標的繪制方法,如何繪制一個退出程序圖標。首先我們得弄清楚繪制退出程序圖標的順序與步驟,并結合前幾篇文章的知識來進行繪制。首先第一步我們先要確定圖標的尺寸,我這里選用了24px*24px的圖標尺寸;第二步思考一下圖標的輪廓,再根據圖標輪廓去選擇關鍵線,因為退出程序圖標整體輪廓是正方形,所以選用24px圖標的正方關鍵線,得到尺寸是18px*18px;第三步通過正方關鍵線來繪制主輪廓,并用圖形剪出主路徑。接下來就開始完善具體細節了,包括形狀、內路徑、曲率等等,不著急一點一點解析,一點一點去學。我們先來看一下退出程序長什么樣。

undefined

 

3.1 確定圖標尺寸

繪制系統圖標之前就應該確定好圖標的尺寸,系統圖標谷歌規定了兩種尺寸,20px和24px,這里我選用的是24px這個尺寸。另外在確定好尺寸的同時也要確定圖標的形式,我在《基礎認知 Material 規范》開篇就講到了圖標有這幾種形式,棱角圖標線性圖標、曲率圖標、深淺圖標和絕對棱角圖標,這次我選用的是較為圓潤的曲率圖標,因為這種圖標看上去比較有親和力,我個人也是比較喜歡的。

undefined

 

3.2 確定輪廓與關鍵線

因為退出程序的圖標整體輪廓是方形的,在選擇關鍵線的時我們按照24px圖標的規定來選擇就可以了,這塊在《基礎認知 Material 規范》的文章后幾小節也有說明,我們就會得到正方18px*18px這個尺寸。

undefined

 

3.3 繪制主輪廓 – 粗細

當我們把圖標的關鍵線確定下來以后就可以繪制主輪廓了。我在文章上面的知識中講到過,輪廓和筆畫的粗細要以2px為來進行繪制,同時也要遵循圖標統一性的原則,所有細節均以2px為基準,視覺修正等特殊情況除外。所以這里我們在繪制主輪廓時先繪制一個18px*18px的圓角矩形,然后再繪制一個14px*14px的圓角矩形(18px-(上間距2px+下間距2px)。

undefined

 

3.4 繪制主輪廓 – 曲率

因為我們畫的是一個有曲率的圖標,所以它的輪廓不是直角的,需要帶一些曲率。而曲率這塊也是有講究的,如果按照以上操作把18px*18px和14px*14px的曲率值都設置為2px就是不對的。我先選擇器那篇文章中提到過,由于尺寸的不同外面的矩形一定要比里面的矩形大,尺寸越小曲率也就越小。

undefined

 

3.5 繪制主路徑 – 開口

當我們繪制好一個主輪廓后,就可以根據這個輪廓來改變其路徑并變成我么最終想要的圖標的樣子。因為一個退出程序的圖標的左面是有一個開口的,這時候我們需要改變一下這個形狀的路徑,但這里不是瞎斷開兩個點就完事兒了,這里也是有規范的,我們還是要滿足圖標統一性等原則,把這里的開口所要斷開的尺寸均給減掉2px。

undefined

開口剪掉后一個退出程序的圖標的主輪廓就已經繪制出來了,接下來我們改變一下減去的路徑留下的直角就行了,把這些直角改為有曲率的圓角。

undefined

把路徑直角改變為曲率圓角的方法也比較,可以利用增加兩個圓角矩形的方法實現,也可以用軟件工具來實現。我用的是Affinity Designer的拐角工具,直接改變點的角度來實現的,也可以單獨把點的角度轉化為固定曲率值。

undefined

 

3.6 繪制內路徑 – 箭頭

接下來我們要完善圖標里面的細節并繪制一個箭頭。箭頭相對比較好畫,我們先按照1px的網格基數來繪制,用圓角矩形工具拉出來個矩形,矩形寬度是2px,曲率值是1px(整體曲率為2px)。對齊好兩個矩形就行了,注意看好尺寸避免小數位。

undefined

之后我們把繪制好的三角形直接旋轉至45°,得到圖下面這個圖形,然后再往右偏移一些位置,為指向性的視覺感知做鋪墊,“出”是向外指向而“進”是向里指向,我們這個圖標是退出程序功能,所以它應該向外指向,要把箭頭向右偏移一些距離。但這里偏移多少我個人根據經驗也覺得有一些規范。整個箭頭對齊的位置是有一定講究的,箭頭交叉的頂端要與網格線對齊,而箭頭交叉的末端要與網格線的平分線對齊,這樣規范更加精細一些。

undefined

最后我們將箭頭上的橫線填補進去就行了,這里用一個圓角矩形工具畫一個橫線,粗細是2px,曲率跟上面一樣是1px(整體為2px),整個內部路徑就形成了。

undefined

 

3.7 繪制完成

當我們去掉所有參考線和標注,再將圖標更改一下顏色,一個退出程序的圖標就這么繪制完成了。

undefined

 

總結

我心里一直有一種憧憬,就是我希望大家都能舍棄物質主義,把我們所學的知識無條件奉獻出來。就像農民種地一樣,我自己辛苦種地種糧食,把一些糧食換取等價的金錢,自己能實現溫飽就行了,然后再把其余的糧食都分給大家,如果大家都是這種“分享”精神,都能夠把自己“多余”的部分分享給其他人,那我相信大家能從彼此傳遞的知識中學習更多更多…

而不是像現在這樣,很多抱有目的的分享都建立在引流和招生,而且故意局限大家的認知,搞一些低級知識來使受眾局限在他們營造的圈子中。教育機構和培訓機構為了賺錢,使勁拉投資打廣告,并很精心的把廣告發給大學生,販賣焦慮,讓他們覺得報他們的課程“課超所值”,很多學生的報名費都是父母辛辛苦苦賺的血汗錢,就被培訓機構給這么坑了,還要說他們成本很高的,租設備就要花30多萬,花錢還要裝修教室,然后說收大家2萬人民幣成本都回不來等等….

另外生活有儀式感,人與人之間缺乏信任和關愛,大家為了追逐利益不惜撕破臉,恨不得把對方拉入地獄。尤其是泛娛樂化時代的到來,這種物質精神愈演愈烈。我不知道大家是怎么想的,但我只想發表自己的觀點,去尋找具有相同觀點的其他人,讓我們來聚集起來,去試圖改變中國設計界的現狀。

 

原文地址:站酷

作者:羅耀_UI

 

轉載請注明:學UI網 » 系統圖標 – 圖標分解 Material 規范

登錄收藏
 
你可能喜歡的:
iOS14:交互上這5點變化,值得細細研究iOS14:交互上這5點變化,值得細細研究
《設計系統》 第二章,逐步設計你的設計系統《設計系統》 第二章,逐步設計你的設計系統
耍好控件 | 如何做好「按鈕」的用戶體驗?耍好控件 | 如何做好「按鈕」的用戶體驗?
B端設計指南05 - 圖標究竟應該如何設計B端設計指南05 – 圖標究竟應該如何設計
后臺系統從0開始設計的前提與方法后臺系統從0開始設計的前提與方法
【小教程】如何用Sketch畫微質感圖標?【小教程】如何用Sketch畫微質感圖標?
移動端表單表格設計移動端表單表格設計
光音移動設計規范 — 表單類光音移動設計規范 — 表單類
圖標這樣去做,更受歡迎圖標這樣去做,更受歡迎
底部導航欄圖標分析底部導航欄圖標分析
?
网球比分雷速 江西快3平台 广东好彩一开奖历史 今天的福彩3d预测 宁夏11选5官方开奖 金景配资 12bet什么是百家乐揽法 a股票指数 下载福彩快乐12助手图 燕赵风采排列7规则 浙江体彩11选5玩法