01 一致的功能圖標(biāo)

1.1 功能圖標(biāo)繪制思路

功能圖標(biāo)繪制是學(xué)習(xí)UI設(shè)計(jì)必須要掌握的最基礎(chǔ)的知識(shí)之一，看似簡(jiǎn)單的圖標(biāo)卻包含了復(fù)雜的規(guī)則，從一枚小小的圖標(biāo)可以窺探設(shè)計(jì)者對(duì)細(xì)節(jié)的把握以及對(duì)整體風(fēng)格的掌控。互聯(lián)網(wǎng)為人們提供了便利，我們可以在全世界的設(shè)計(jì)網(wǎng)站上看到非常多優(yōu)秀的圖標(biāo)設(shè)計(jì)作品，別著急去臨摹它們——作為初學(xué)者，應(yīng)該先學(xué)會(huì)如何用最簡(jiǎn)單的幾何圖形去構(gòu)建圖標(biāo)，掌握扎實(shí)的基礎(chǔ)知識(shí)后，再去創(chuàng)作復(fù)雜的圖形。所謂萬(wàn)丈高樓平地起，打好基礎(chǔ)才能建造結(jié)構(gòu)堅(jiān)固且漂亮的大廈，本篇就來(lái)講解幾種常見(jiàn)的功能圖標(biāo)繪制思路，學(xué)習(xí)了這些思路后才會(huì)理解其繪制原理。

旋轉(zhuǎn)45°

45°是功能圖標(biāo)繪制中最重要的角度，很多圖標(biāo)都以45°為繪制角度。例如，指南針的指針?lè)较颉㈦娫挼膬A斜角度、編輯的筆桿、搜索的放大鏡、發(fā)送的紙飛機(jī)等。旋轉(zhuǎn)45°能將一個(gè)形狀改變成另一個(gè)形狀，例如正方形旋轉(zhuǎn)45°后變成棱形，下圖示例的“定位”圖標(biāo)由大小圓形和正方形（大圓半徑與正方形邊長(zhǎng)等寬）構(gòu)成旋轉(zhuǎn)45°而成。

相同繪制思路的還有“喜歡”“贊”圖標(biāo)，是由兩個(gè)圓形和正方形（圓形直徑與正方形邊長(zhǎng)等寬）構(gòu)成旋轉(zhuǎn)45°而成。

翻轉(zhuǎn)

幾何形狀的功能圖標(biāo)大多具有對(duì)稱屬性。例如，手機(jī)、電腦、刪除的垃圾桶、收藏的五角星、通訊錄的人身、設(shè)置的齒輪等。翻轉(zhuǎn)分為水平翻轉(zhuǎn)和垂直翻轉(zhuǎn)，通過(guò)復(fù)制相同的部分至相反的位置構(gòu)成新的形狀，下圖示例的“喜歡”圖標(biāo)由一個(gè)圓柱矩形旋轉(zhuǎn)45°后垂直居中裁切掉一半，復(fù)制另一半翻轉(zhuǎn)至被裁切位置而成。

相同繪制思路的還有“閃電”“電量”圖標(biāo)，是由一個(gè)三角形復(fù)制、垂直翻轉(zhuǎn)后而成。

重復(fù)

一些圖標(biāo)構(gòu)造中有很多相同的元素，例如消息氣泡的點(diǎn)、撥號(hào)的鍵盤、時(shí)鐘的刻度、加載時(shí)的“菊花”、晴天的光芒、電影膠片等。重復(fù)即不斷復(fù)制相同形狀通過(guò)排列組合成新的形狀，下圖示例的“設(shè)置”圖標(biāo)的齒輪由一個(gè)鋸齒復(fù)制為二，由二復(fù)制為四，再由四復(fù)制為八旋轉(zhuǎn)而成。

平移

調(diào)節(jié)錨點(diǎn)的位置能將一個(gè)形狀改變成另一個(gè)形狀。例如，矩形水平移動(dòng)一個(gè)錨點(diǎn)后變成梯形，正方形向中心移動(dòng)錨點(diǎn)至中心點(diǎn)后變成等腰直角三角形，三角形向外移動(dòng)一個(gè)錨點(diǎn)內(nèi)夾角變小（反之變大）等。下圖示例的“位置”圖標(biāo)由正方形分別移動(dòng)三個(gè)錨點(diǎn)而成。

刪除錨點(diǎn)

錨點(diǎn)與形狀的邊數(shù)相等，是構(gòu)成一個(gè)形狀的支點(diǎn)，刪除錨點(diǎn)能將一個(gè)形狀改變成另一個(gè)形狀。例如，正方形刪除一個(gè)錨點(diǎn)后變成等腰直角三角形，矩形刪除一個(gè)錨點(diǎn)后變成直角三角形，正五邊形刪除頂角錨點(diǎn)后變成等腰梯形等。下圖示例的“收藏”圖標(biāo)由相同的3個(gè)正五邊形刪除其中的兩個(gè)錨點(diǎn)變成三角形且分別將一條邊添加錨點(diǎn)向中心縮進(jìn)后合并而成。

善用圓形

圓形具有最完美的弧度和平滑的輪廓，在繪制一些外觀偏向圓弧的圖標(biāo)時(shí)盡可能地使用圓形為基本圖形。例如，水滴、葉子、人、笑臉、Wi-Fi、云、月亮、鳥(niǎo)、魚、火焰等。下圖示例的“熱門”“觀看”“設(shè)置”圖標(biāo)都是通過(guò)大小不一的圓形運(yùn)算構(gòu)成。