UI設(shè)計(jì)教程:界面圖標(biāo)創(chuàng)意設(shè)計(jì)

　　這個(gè)過程比較長(zhǎng),自己只能分階段的準(zhǔn)備好,發(fā)上來!快畢業(yè)了事情很多,多多諒解!
　　今天把部分草圖放上來!創(chuàng)意說明后續(xù)準(zhǔn)備,。

　　第一部分：圖標(biāo)創(chuàng)意階段

　　其實(shí)這個(gè)階段之前還有個(gè)重要的步驟,就是創(chuàng)意準(zhǔn)備。

　　根據(jù)項(xiàng)目需求,確定圖標(biāo)的風(fēng)格,這在界面設(shè)計(jì)過程中,有風(fēng)格評(píng)測(cè)的方法來確定項(xiàng)目是走什么風(fēng)格路線.這也是項(xiàng)目前期用戶研究的內(nèi)容,有潛力的公司會(huì)制定"用戶角色",用來指導(dǎo)界面視覺風(fēng)格方向,、界面內(nèi)容建構(gòu)和交互設(shè)計(jì)等,！

　　當(dāng)我們接到設(shè)計(jì)任務(wù)后，我們?cè)趺撮_始設(shè)計(jì)圖標(biāo)呢,？首先我們要看懂界面需求,，對(duì)每個(gè)功能圖標(biāo)的定義要非常清楚，否則我們?cè)O(shè)計(jì)的結(jié)果將導(dǎo)致用戶難以 理解,，這個(gè)也是圖標(biāo)設(shè)計(jì)所關(guān)心的可用性問題,！這在我博課里引用了Jakob Nielsens Website里面的文章“Icon Usability”，大家可以去看看,。差的圖標(biāo)設(shè)計(jì)最終導(dǎo)致用戶界面的操作失敗的體驗(yàn),。但視覺審美和可用性有時(shí)候存在矛盾的方面，我們不能走極端,，只顧 及可用性但忽視設(shè)計(jì)美觀的一面,，也不能追求設(shè)計(jì)上的美的需求而忘了這是功能性很強(qiáng)的界面圖標(biāo),，最好是能在兩者之間取得平衡！

　　理解功能需求后,，我們要收集很多關(guān)于“詞語——圖形”之間能轉(zhuǎn)化的元素,，用生活中的物或其他視覺產(chǎn)品來代替所要表達(dá)的功能信息、或操作提示,。例 如音樂：我們會(huì)想到,，音符、光盤,、音樂播放機(jī),、耳機(jī)等等。但到底選擇什么來表達(dá)呢,？原則上是越貼近用戶的心理模型最好,，用大家常見的視覺元素?zé)o來表達(dá)所要 傳達(dá)的信息。隱喻是在圖標(biāo)設(shè)計(jì)中是必要的思維方法,！找出物與所指之間的內(nèi)在含義,，這就要求設(shè)計(jì)師對(duì)生活的細(xì)微觀察，豐富的聯(lián)想能力,。當(dāng)然這也就是設(shè)計(jì)的困 難點(diǎn),，做好一個(gè)圖標(biāo)設(shè)計(jì)不亞于好的產(chǎn)品創(chuàng)意設(shè)計(jì)，包括最終的圖標(biāo)制作也是體現(xiàn)設(shè)計(jì)師能力之處,，特別是現(xiàn)在高分辨率的顯示設(shè)備大量應(yīng)用,，好的界面要得到用戶 的認(rèn)可，高質(zhì)量的圖標(biāo)設(shè)計(jì)比不可少?。y?。‖F(xiàn)在對(duì)GUI設(shè)計(jì)的理解還只限于平面美工,，管理者的意識(shí)往往關(guān)系到一個(gè)行業(yè)是否正常發(fā)展,。我們的工作要得到認(rèn) 可，需要大家的共同努力?。?/p>

　　下面是我繪制的圖標(biāo)草圖：







第二部分：草圖繪制階段

　  這個(gè)階段就是把我們的創(chuàng)意繪制出來,，檢驗(yàn)下視覺關(guān)系，也就是在視覺方面多在草圖上推敲,，這樣效率高些,，避免在渲染完后來后悔。（后悔啥,！那就是重來了?。? 首先要確定我們圖標(biāo)透視，這是關(guān)系到一套方案中的每個(gè)圖標(biāo)的透視方向,，這是在圖標(biāo)設(shè)計(jì)一致性方面的基本要求,，透視統(tǒng)一,。然后一步步的添加細(xì)節(jié)。如下圖所 示：


在這個(gè)階段我們還要檢查下元素之間的組合方式（有文字,，大家點(diǎn)擊看吧，打字很累?。,。Ｈ缦聢D：



圖標(biāo)視覺分析：

　　往往一個(gè)圖標(biāo)要表達(dá)一定的含義就必須組合不同的形態(tài),，借助單個(gè)形態(tài)所傳達(dá)的內(nèi)在信息,，拼合在一起去傳達(dá)另外一種信息。例如在設(shè)計(jì)“導(dǎo)航”功能圖 標(biāo)時(shí)候：我們第一反應(yīng)是與衛(wèi)星有關(guān),，但就以單個(gè)衛(wèi)星的外形來傳達(dá)導(dǎo)航的含義恐怕不狗,，于是再聯(lián)想與導(dǎo)航有關(guān)的信息圖示：“坐標(biāo)”“旗幟”“陸地”等。再經(jīng) 過設(shè)計(jì)師以視覺平衡原理合理的布置他們之間的主次,、空間關(guān)系,。要注意的是：不可隨便使用其與要表達(dá)功能相關(guān)的圖形或物體，要經(jīng)過精心的挑選,，最好是大家熟 悉,、易記的物或形，畢竟我們的目的是要幫助用戶更形象的理解計(jì)算機(jī)程序的內(nèi)在功能含義,，以易記,、易懂為前提。也不能借助過多的圖形來表達(dá)圖標(biāo)含義,，過于復(fù) 雜反而影響用戶的理解,。

　　上圖是分析形態(tài)組合之間的關(guān)系，探索最佳組合方式,。形成視覺與功能的統(tǒng)一,。

第三部分：草圖渲染階段