- 進階版零基礎學UI
- 田海
- 8字
- 2020-03-23 14:41:28
01 一致的功能圖標
1.1 功能圖標繪制思路
功能圖標繪制是學習UI設計必須要掌握的最基礎的知識之一,看似簡單的圖標卻包含了復雜的規(guī)則,從一枚小小的圖標可以窺探設計者對細節(jié)的把握以及對整體風格的掌控。互聯(lián)網(wǎng)為人們提供了便利,我們可以在全世界的設計網(wǎng)站上看到非常多優(yōu)秀的圖標設計作品,別著急去臨摹它們——作為初學者,應該先學會如何用最簡單的幾何圖形去構建圖標,掌握扎實的基礎知識后,再去創(chuàng)作復雜的圖形。所謂萬丈高樓平地起,打好基礎才能建造結構堅固且漂亮的大廈,本篇就來講解幾種常見的功能圖標繪制思路,學習了這些思路后才會理解其繪制原理。
旋轉45°
45°是功能圖標繪制中最重要的角度,很多圖標都以45°為繪制角度。例如,指南針的指針方向、電話的傾斜角度、編輯的筆桿、搜索的放大鏡、發(fā)送的紙飛機等。旋轉45°能將一個形狀改變成另一個形狀,例如正方形旋轉45°后變成棱形,下圖示例的“定位”圖標由大小圓形和正方形(大圓半徑與正方形邊長等寬)構成旋轉45°而成。


相同繪制思路的還有“喜歡”“贊”圖標,是由兩個圓形和正方形(圓形直徑與正方形邊長等寬)構成旋轉45°而成。

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

相同繪制思路的還有“閃電”“電量”圖標,是由一個三角形復制、垂直翻轉后而成。


重復
一些圖標構造中有很多相同的元素,例如消息氣泡的點、撥號的鍵盤、時鐘的刻度、加載時的“菊花”、晴天的光芒、電影膠片等。重復即不斷復制相同形狀通過排列組合成新的形狀,下圖示例的“設置”圖標的齒輪由一個鋸齒復制為二,由二復制為四,再由四復制為八旋轉而成。


平移
調節(jié)錨點的位置能將一個形狀改變成另一個形狀。例如,矩形水平移動一個錨點后變成梯形,正方形向中心移動錨點至中心點后變成等腰直角三角形,三角形向外移動一個錨點內夾角變小(反之變大)等。下圖示例的“位置”圖標由正方形分別移動三個錨點而成。

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

善用圓形
圓形具有最完美的弧度和平滑的輪廓,在繪制一些外觀偏向圓弧的圖標時盡可能地使用圓形為基本圖形。例如,水滴、葉子、人、笑臉、Wi-Fi、云、月亮、鳥、魚、火焰等。下圖示例的“熱門”“觀看”“設置”圖標都是通過大小不一的圓形運算構成。

- 中文版3ds Max 2016/VRay效果圖制作實戰(zhàn)基礎教程
- Core Data iOS Essentials
- Dreamweaver基礎與實戰(zhàn)教程
- Microsoft BizTalk Server 2010 Patterns
- YUI 2.8: Learning the Library
- PPT 2016幻燈片設計與制作從入門到精通
- jQuery Mobile First Look
- COSPLAY的后期藝術:Lightroom+Photoshop修圖技法攻略
- 攝影輕松入門:Photoshop后期處理
- 中文版Photoshop CC2018從入門到精通(第4版)
- Photoshop CS6案例教程(第3版)
- Photoshop+CorelDRAW平面設計案例實戰(zhàn):從入門到精通(視頻自學全彩版)
- 中文版UG NX 7.0基礎教程
- Microsoft Windows Communication Foundation 4.0 Cookbook for Developing SOA Applications
- Moodle 2.0 for Business Beginner's Guide