UI設計－從圖標到界面完美解析第六章 系列圖標

從圖標到界面完美解析UI設計第六章系列圖標CONTENTS目錄01什么是系列圖標02系列圖標的特點及設計方法03系列圖標制作04如何設計系列圖標05能力拓展01什么是系列圖標第六章系列圖標什么是系列圖標系列圖標一般為某一款或者是某款移動端特有的風格類似的一系列圖標第六章系列圖標什么是系列圖標02瀏覽器、手機管家、手機服務、語音助手、天氣、收音機、備份、系統(tǒng)軟件更新、下載內容、游戲中心、應用安裝等01設置、主題、相機、撥號、聯(lián)系人、短信、圖庫、音樂、視頻、日歷、時鐘、電子郵件、文件管理、計算器、備忘錄、錄音機系列圖標類型02系列圖標的特點及設計方法第六章系列圖標系列圖標的特點及設計方法01020405統(tǒng)一性：系列圖標要求所有圖標具有統(tǒng)一的風格，在視覺上具有一致性。一致性并非是完全相同而是指在變化中求統(tǒng)一。標準性：圖標內容完整，完成度高，符合產品設計標準；獨特性：有獨特的設計創(chuàng)意和設計風格；表現(xiàn)力：有感染力的藝術表現(xiàn)手法，視覺效果突出，能夠將設計創(chuàng)意完美表達；易用性：信息傳遞準確，符合使用邏輯和用戶習慣；特點03在繪圖本上，將構思的系列圖標描繪出大概的圖形，并不斷修改。草圖效果電腦繪制圖也叫作正稿，即將繪制的草稿圖在電腦上實現(xiàn)，并上色優(yōu)化效果。電腦效果圖創(chuàng)意〔想法—定位—收集—交互〕提出想法——收集與“想法〞有關的文字及圖片資料來豐富它——發(fā)散思維第六章系列圖標系列圖標的特點及設計方法系列圖標——設計方法第六章系列圖標系列圖標的特點及設計方法系列圖標——設計方法——案例效果圖該系列圖標的靈感來自于“道家文化〞。第六章系列圖標系列圖標的特點及設計方法系列圖標——設計方法——案例創(chuàng)意——視覺形：系列圖標，首先考慮整齊性。色：考慮原那么：1、貼合主體，2、美觀。質：質感，即物品的材質表達感，——肌理。光：是做寫實效果的，關鍵點。光使用有三個維度：角度、高度、強度。1234第六章系列圖標系列圖標的特點及設計方法系列圖標——設計方法——案例創(chuàng)意——繪意“主題樣式〞五行標志性的太極圖標，意——循環(huán)往復，變化無窮“華為商店〞黃金與白銀在五行中同屬金，屬金的顏色為黃色和白色03系列圖標制作第六章系列圖標系列圖標制作案例操作——繪制一種逼真玉石感的圖標背板，從而體會作者的制作方法新建圖形新建適宜的畫布，背景色填為灰色。再用圓形的形狀工具繪制，通過布爾運算構建環(huán)形。第六章系列圖標系列圖標制作圖層樣式雙擊“環(huán)形圖層〞新建圖層樣式，我們會用到“斜面與浮雕，等高線，內陰影，投影〞等幾個屬性第六章系列圖標系列圖標制作圖層樣式接下來，我們來制造一些玉石的自然紋理，另外新建一個畫布〔尺寸大于圓圈即可〕將前景色與背景色分別調整為純黑與純白，再使用【濾鏡】-【渲染】-【云彩】，得到如以下圖片，可以反復屢次重復效果，直到得到想要的效果。第六章系列圖標系列圖標制作04如何設計系列圖標第六章系列圖標如何設計系列圖標系列圖標設計的方法01比例協(xié)調圖形內部結構要注意元素構成之間的比例，有黃金比例分割也有感性的平衡方法。第六章系列圖標如何設計系列圖標系列圖標設計的方法同一個尺寸規(guī)格，但根據(jù)不同形狀的圖標，會導致面積占比引起的視差大小不同，但要在參考尺寸范圍內繪制進行調整。02視差平衡第六章系列圖標能力拓展系列圖標設計的方法利用Photoshop繪制“糖果〞系列圖標。1、圖標風格