- Photoshop CC移動UI圖標(biāo)設(shè)計實用教程
- 水木居士
- 1519字
- 2019-08-15 11:30:35
1.1 圖標(biāo)的基本概念
本節(jié)從圖標(biāo)的起源講起,詳細(xì)介紹了什么是圖標(biāo)、圖標(biāo)與LOGO的區(qū)別、什么是App圖標(biāo)、常見移動設(shè)備和計算機圖標(biāo)。
1.1.1 圖標(biāo)的起源
圖標(biāo)不僅歷史久遠(yuǎn),從上古時代的圖騰,到現(xiàn)在具有更多含義和功能的各種圖標(biāo),而且應(yīng)用范圍極為廣泛,可以說它無所不在。一個國家的圖標(biāo)就是國旗;一件商品的圖標(biāo)是注冊商標(biāo);軍隊的圖標(biāo)是軍旗;學(xué)校的圖標(biāo)是校徽;旅游景區(qū)內(nèi)的引導(dǎo)圖標(biāo),如圖1.1所示。這些圖標(biāo)存在的價值是提供信息指引,幫助人們找到需要的信息。

圖1.1 引導(dǎo)圖標(biāo)
現(xiàn)在說起圖標(biāo),其實一般指的都是智能設(shè)備中的代表一個含義的圖形,而智能設(shè)備中的圖標(biāo)其實就是把現(xiàn)實生活中的圖標(biāo)遷移到界面當(dāng)中,在界面中圖標(biāo)傳達(dá)信息引導(dǎo)用戶操作,用戶根據(jù)接收到的信息進(jìn)行操作。總之一句話,圖標(biāo)的存在是為了快速準(zhǔn)確地傳達(dá)信息給操作的用戶并且引導(dǎo)用戶做出反饋行為。
1.1.2 什么是圖標(biāo)
圖標(biāo)即指具有指代意義的計算機圖形。廣義上來說,圖標(biāo)是具有指代意義的圖形符號,具有高度濃縮并快捷傳達(dá)信息、便于記憶的特性。其應(yīng)用范圍很廣,軟硬件網(wǎng)頁社交場所公共場合無所不在,例如,男女廁所標(biāo)志和各種交通標(biāo)志等,如圖1.2所示。

圖1.2 交通標(biāo)志及男女廁所標(biāo)志
狹義上主要指應(yīng)用于計算機軟件方面,包括:程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示等。一個圖標(biāo)顯示一個小的圖片或?qū)ο螅硪粋€文件,程序,網(wǎng)頁,或命令。圖標(biāo)有助于用戶快速執(zhí)行命令和打開程序文件。單擊或雙擊圖標(biāo)以執(zhí)行一個命令。圖標(biāo)也用于在瀏覽器中快速展現(xiàn)內(nèi)容,圖1.3所示為狹義上的圖標(biāo)。

圖1.3 狹義上的圖標(biāo)

圖1.3 狹義上的圖標(biāo)(續(xù))
1.1.3 圖標(biāo)與LOGO有什么區(qū)別
要想弄清楚圖標(biāo)與LOGO的區(qū)別,首先要知道什么是圖標(biāo)?什么是LOGO?圖標(biāo)在前面已經(jīng)講解過,這里再來說一說LOGO, LOGO也叫標(biāo)志,LOGO設(shè)計是將具體的事物、事件、場景和抽象的精神、理念、方向通過特殊的圖形固定下來,使人們在看到LOGO標(biāo)志的同時,自然地產(chǎn)生聯(lián)想,從而對企業(yè)產(chǎn)生認(rèn)同。LOGO與企業(yè)的經(jīng)營緊密相關(guān),是企業(yè)日常經(jīng)營活動、廣告宣傳、文化建設(shè)、對外交流必不可少的元素,LOGO效果如圖1.4所示。

圖1.4 常見LOGO效果
這里我們所指的圖標(biāo),主要指應(yīng)用于計算機軟件方面,包括:程序標(biāo)識、數(shù)據(jù)標(biāo)識、命令選擇、模式信號或切換開關(guān)、狀態(tài)指示等。圖標(biāo)有一套標(biāo)準(zhǔn)的大小和屬性格式,且通常是小尺寸的。每個圖標(biāo)都含有多張相同顯示內(nèi)容的圖片,每一張圖片具有不同的尺寸和發(fā)色數(shù)。一個圖標(biāo)就是一套相似的圖片,每一張圖片有不同的格式。圖標(biāo)還有另一個特性:它含有透明區(qū)域,在透明區(qū)域內(nèi)可以透出圖標(biāo)下的桌面背景。一個圖標(biāo)實際上是多張不同格式的圖片的集合體,并且還包含了一定的透明區(qū)域。因為計算機操作系統(tǒng)和顯示設(shè)備的多樣性,導(dǎo)致了圖標(biāo)的大小需要有多種格式。圖1.5所示為計算機圖標(biāo)效果。

圖1.5 計算機圖標(biāo)

圖1.5 計算機圖標(biāo)(續(xù))
1.1.4 什么是App圖標(biāo)
App是英文Application的縮寫。由于智能設(shè)備的流行,現(xiàn)在App多指智能手機、平板等第三方應(yīng)用程序。隨著智能設(shè)備的大面積應(yīng)用,現(xiàn)在一般說圖標(biāo)通常所指的就是App圖標(biāo),或者說App即是指圖標(biāo),如圖1.6所示。

圖1.6 智能應(yīng)用系統(tǒng)App圖標(biāo)

圖1.6 智能應(yīng)用系統(tǒng)App圖標(biāo)(續(xù))
1.1.5 常見移動設(shè)備圖標(biāo)
隨著移動智能應(yīng)用的高速發(fā)展,移動智能給人們的生活帶來越來越多的方便,出行、支付、交際等,越來越多的公司和個人加入移動智能,所以移動智能的界面圖標(biāo)設(shè)計也要求更高,常見的移動智能App圖標(biāo)主要包括手機和平板,如圖1.7所示。

圖1.7 常見移動智能App界面圖標(biāo)

圖1.7 常見移動智能App界面圖標(biāo)(續(xù))
1.1.6 常見計算機應(yīng)用圖標(biāo)
圖標(biāo)應(yīng)用中,除了移動智能圖標(biāo)外,還有一些計算機應(yīng)用圖標(biāo),這也是大家最早接觸的圖標(biāo),如計算機桌面系統(tǒng)上的圖標(biāo),還有一些軟件圖標(biāo),如Photoshop、Offices辦公軟件、三維設(shè)計軟件等,圖1.8所示為一些常見的計算機應(yīng)用圖標(biāo)效果。

圖1.8 常見計算機圖標(biāo)

圖1.8 常見計算機圖標(biāo)(續(xù))
- 網(wǎng)絡(luò)游戲編程教程
- 中文版3ds Max&VRay印象 商業(yè)效果圖制作與表現(xiàn)
- Autodesk Maya 2015標(biāo)準(zhǔn)教材I
- After Effects CS6技術(shù)大全
- 中文版Photoshop CS6數(shù)碼人像照片處理從新手到高手
- 三維動畫角色造型設(shè)計
- TVart技法Cinema 4D/After Effects電視包裝案例解密
- 3ds Max 2012中文版完全自學(xué)一本通
- AutoCAD 2012繪圖技術(shù)實戰(zhàn)特訓(xùn)
- 3D科研繪圖與學(xué)術(shù)圖表繪制從入門到精通
- 水晶石技法3ds Max建筑模型實戰(zhàn)手冊
- After Effects CS4案例教程
- 商業(yè)人像攝影后期修圖技法
- 電腦繪畫:從入門到精通
- 中文版Premiere Pro CS6完全自學(xué)教程(第2版)