UI設(shè)計(jì)分析.doc

_UI設(shè)計(jì)UI 到底是啥？ 當(dāng)你打開(kāi)電腦時(shí)，是否想象過(guò)你熟悉的這些界面是怎么來(lái)的？當(dāng)你用媒體播放器播放音樂(lè)時(shí)，你是否會(huì)選擇一個(gè)你喜歡的界面？你是否曾因?yàn)槠恋氖謾C(jī)操作界面而決定買(mǎi)下手機(jī)，又或者你是否總喜歡下載最新的各種表情和圖標(biāo)？要知道，這一切都是因?yàn)橛辛薝I設(shè)計(jì)師。 用一句話概述：UI 是連接機(jī)器與人溝通的橋梁。UI 的中文名是用戶(hù)界面（User interface），是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。舉例來(lái)說(shuō)，開(kāi)車(chē)的時(shí)候方向盤(pán)和顯示器就是這個(gè)界面，看電視的時(shí)候遙控器和屏幕就是這個(gè)界面，用電腦的時(shí)候鍵盤(pán)和顯示器就是這個(gè)界面。因此，UI設(shè)計(jì)師的工作范圍非常龐雜，涉及軟件界面設(shè)計(jì)、即時(shí)通訊軟件界面設(shè)計(jì)、媒體播放器界面造型設(shè)計(jì)、游戲界面設(shè)計(jì)、桌面主題定制、軟件圖標(biāo)設(shè)計(jì)、工具欄圖標(biāo)設(shè)計(jì)、logo設(shè)計(jì)、表情頭像圖標(biāo)設(shè)計(jì)、手機(jī)界面設(shè)計(jì)、PMP播放器界面設(shè)計(jì)、TV端界面設(shè)計(jì)、PDA界面設(shè)計(jì)、車(chē)載設(shè)備界面設(shè)計(jì)等等。我們現(xiàn)在使用的大多數(shù)設(shè)備界面也是現(xiàn)在大多數(shù)設(shè)計(jì)師所做的工作都是圖形用戶(hù)界面，即 GUI( Graphical user interface）。我們通過(guò)這些可視化的圖形界面來(lái)理解計(jì)算機(jī)，進(jìn)行工作。UI的由來(lái) UI在中國(guó)真正興起發(fā)展到現(xiàn)在不過(guò)短短的幾年時(shí)間，對(duì)于UI的行業(yè)標(biāo)準(zhǔn)在不同的公司不同的行業(yè)也不相同。可能很多人的對(duì)UI的認(rèn)識(shí)還停留在傳統(tǒng)意義上的“美工”，但實(shí)際上UI并不是單純意義上的美術(shù)工人，而是了解軟件產(chǎn)品、致力于提高軟件用戶(hù)體驗(yàn)的產(chǎn)品外形設(shè)計(jì)師。 我們最早使用的計(jì)算機(jī)，最初的界面可不像現(xiàn)在這么友好，那時(shí)的界面還是命令行界面，CLI（Command line interface）。計(jì)算機(jī)只是被政府或大型機(jī)構(gòu)使用，在普通人眼中是完全不能理解的存在。（命令行界面，Bourne shell interaction on Version 7 Unix） 而喬布斯一直渴望計(jì)算機(jī)能進(jìn)入尋常百姓家。在 1979 年，他命運(yùn)般地參觀了施樂(lè)公司，然后做了一回搬運(yùn)工使得圖形界面被應(yīng)用在 Macintosh 上，還引入了鼠標(biāo)。蘋(píng)果電腦大肆宣傳其創(chuàng)新的交互界面，Macintosh 的誕生開(kāi)啟了一個(gè)新的時(shí)代。而那時(shí)的界面設(shè)計(jì)也奠定了現(xiàn)在的計(jì)算機(jī)界面。你可以發(fā)現(xiàn)很多設(shè)計(jì)，過(guò)了幾十年依舊被保留了下來(lái)。（1984 年面世的 Mac OS System 1.0）System 1.0是蘋(píng)果隨同Macintosh 128K的最初電腦操作系統(tǒng)，發(fā)布于1984年1月，是第一個(gè)麥金塔操作系統(tǒng)。當(dāng)時(shí)的System 1.0含有桌面、窗口 、圖標(biāo)、光標(biāo)、菜單和卷動(dòng)欄等項(xiàng)目。這是最早的關(guān)于UI的理念。隨著計(jì)算機(jī)系統(tǒng)的不斷發(fā)展，我們使用的界面也變得越來(lái)越人性化。讓我們看一下最新的MAC系統(tǒng)及Windows系統(tǒng)界面。OSX ElCapitanWin10系統(tǒng)UI的職能及價(jià)值一是圖形設(shè)計(jì)，軟件產(chǎn)品的產(chǎn)品“外形”設(shè)計(jì)。 漂亮的用戶(hù)界面，能夠讓用戶(hù)賞心悅目百看不厭，給人帶來(lái)舒適的視覺(jué)享受，拉近人與商品的距離，是建立在科學(xué)性之上的藝術(shù)設(shè)計(jì)。無(wú)論是誰(shuí)都喜歡漂亮的東西，無(wú)論是什么只要是漂亮的，總會(huì)讓你多看兩眼，哪怕你現(xiàn)在用不上或者說(shuō)不能用，至少讓你記住了它。界面也要像美女一樣，臉蛋漂亮，凹凸有致，這樣才能人見(jiàn)人愛(ài)。 但UI存在的價(jià)值不是單純的美化頁(yè)面。好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)，是對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。檢驗(yàn)一個(gè)界面的標(biāo)準(zhǔn)既不是某個(gè)項(xiàng)目開(kāi)發(fā)組領(lǐng)導(dǎo)的意見(jiàn)也不是項(xiàng)目成員投票的結(jié)果，而是終端用戶(hù)的感受。二是交互設(shè)計(jì)，主要在于設(shè)計(jì)軟件的操作流程、樹(shù)狀結(jié)構(gòu)、操作規(guī)范等。一個(gè)軟件產(chǎn)品在編碼之前需要做的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。合理的信息結(jié)構(gòu)，可以將產(chǎn)品的主要流程，主要業(yè)務(wù)等很明顯的曝露在用戶(hù)面前，可以讓用戶(hù)在一瞬間就知道我們的產(chǎn)品是做什么的。除此之外，信息與信息之間還需要有層次，一個(gè)好的UI，是有韻律的，是有節(jié)奏的。三是用戶(hù)測(cè)試/研究，這里所謂的“測(cè)試”，其目標(biāo)恰在于測(cè)試交互設(shè)計(jì)的合理性及圖形設(shè)計(jì)的美觀性，主要通過(guò)以目標(biāo)用戶(hù)問(wèn)卷的形式衡量UI設(shè)計(jì)的合理性。 良好的用戶(hù)體驗(yàn)，讓用戶(hù)了解到我們的產(chǎn)品以后能夠很輕松很簡(jiǎn)單的就能使用。她“善解人意”，她“溫柔體貼”，能夠知道你現(xiàn)在可能需要/要做什么，你以后可能需要/要做什么。研究界面圖形設(shè)計(jì)師Graphic UI designer國(guó)內(nèi)大部分UI工作者都是從事這個(gè)行業(yè)。這些設(shè)計(jì)師大多是美術(shù)院校畢業(yè)的，其中大部分是有美術(shù)設(shè)計(jì)教育背景，例如工業(yè)外形設(shè)計(jì)，裝潢設(shè)計(jì)，信息多媒體設(shè)計(jì)等。人與界面交互設(shè)計(jì)師interaction designer在圖形界面產(chǎn)生之前，長(zhǎng)期以來(lái)UI設(shè)計(jì)師就是指交互設(shè)計(jì)師。交互設(shè)計(jì)師的工作內(nèi)容就是設(shè)計(jì)軟件的操作流程，樹(shù)狀結(jié)構(gòu)，軟件的結(jié)構(gòu)與操作規(guī)范（spec）等。一個(gè)軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計(jì)，并且確立交互模型，交互規(guī)范。交互設(shè)計(jì)師一般是軟件工程師背景居多，也有視覺(jué)設(shè)計(jì)師轉(zhuǎn)行進(jìn)入的。研究人用戶(hù)測(cè)試/研究工程師User experience engineer任何的產(chǎn)品為了保證質(zhì)量都需要測(cè)試，軟件的編碼需要測(cè)試，自然UI設(shè)計(jì)也需要被測(cè)試。這個(gè)測(cè)試和編碼沒(méi)有任何關(guān)系，主要是測(cè)試交互設(shè)計(jì)的合理性以及圖形設(shè)計(jì)的美觀性。測(cè)試方法一般都是采用焦點(diǎn)小組，用目標(biāo)用戶(hù)問(wèn)卷的形式來(lái)衡量UI設(shè)計(jì)的合理性。這個(gè)職位很重要，如果沒(méi)有這個(gè)職位，UI設(shè)計(jì)的好壞只能憑借設(shè)計(jì)師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來(lái)評(píng)判，這樣就會(huì)給企業(yè)帶來(lái)嚴(yán)重的風(fēng)險(xiǎn)性。用戶(hù)研究工程師一般是心理學(xué)人文學(xué)背景比較合適。綜上所述UI設(shè)計(jì)師就是：軟件圖形設(shè)計(jì)師、交互設(shè)計(jì)師、用戶(hù)研究工程師。我們要做的就是：盡一切所能，留住用戶(hù)。GUI工作內(nèi)容談到UI設(shè)計(jì)師都在做什么，便涉及到平臺(tái)問(wèn)題。現(xiàn)在有這么多的系統(tǒng)，PC 端的、移動(dòng)端的，有 Web、APP 。每一個(gè)平臺(tái)的設(shè)計(jì)原則、設(shè)計(jì)規(guī)范、交互、布局都不盡相同，存在著很大的差異化，每一個(gè)平臺(tái)也決定著UI設(shè)計(jì)師的發(fā)展方向。當(dāng)然視覺(jué)設(shè)計(jì)和平臺(tái)差異的問(wèn)題并非最難的，更重要的是通過(guò)設(shè)計(jì)解決用戶(hù)的問(wèn)題，發(fā)揮軟件的效用。理解用戶(hù)體驗(yàn)，考慮商業(yè)需求，了解技術(shù)難點(diǎn)，并從整個(gè)服務(wù)全局思考問(wèn)題，是真正對(duì)UI設(shè)計(jì)師的考驗(yàn)。具體工作內(nèi)容如下： 負(fù)責(zé)軟件界面的設(shè)計(jì)、創(chuàng)意工作和制作工作； 根據(jù)各種相關(guān)軟件的用戶(hù)群，提出構(gòu)思新穎、有高度吸引力的創(chuàng)意設(shè)計(jì)； 對(duì)頁(yè)面進(jìn)行優(yōu)化，使用戶(hù)操作更趨于人性化； 維護(hù)現(xiàn)有的應(yīng)用產(chǎn)品； 收集和分析用戶(hù)對(duì)于GUI的需求。設(shè)計(jì)原則1.簡(jiǎn)易性界面的簡(jiǎn)潔是要讓用戶(hù)便于使用、便于了解、并能減少用戶(hù)發(fā)生錯(cuò)誤選擇的可能性。2.用戶(hù)語(yǔ)言界面中要使用能反應(yīng)用戶(hù)本身的語(yǔ)言，而不是游戲設(shè)計(jì)者的語(yǔ)言。3.記憶負(fù)擔(dān)最小化人腦不是電腦，在設(shè)計(jì)界面時(shí)必須要考慮人類(lèi)大腦處理信息的限度。人類(lèi)的短期記憶極不穩(wěn)定、有限，24小時(shí)內(nèi)存在25%的遺忘率。所以對(duì)用戶(hù)來(lái)說(shuō)，瀏覽信息要比記憶更容易。4.一致性是每一個(gè)優(yōu)秀界面都具備的特點(diǎn)。界面的結(jié)構(gòu)必須清晰且一致，風(fēng)格必須與游戲內(nèi)容相一致。5.清楚在視覺(jué)效果上便于理解和使用。6.用戶(hù)的熟悉程度用戶(hù)可通過(guò)已掌握的知識(shí)來(lái)使用界面，但不應(yīng)超出一般常識(shí)。7.從用戶(hù)習(xí)慣考慮想用戶(hù)所想，做用戶(hù)所做。用戶(hù)總是按照他們自己的方法理解和使用。通過(guò)比較兩個(gè)不同世界(真實(shí)與虛擬)的事物，完成更好的設(shè)計(jì)。如：書(shū)籍對(duì)比竹簡(jiǎn)。8.排列一個(gè)有序的界面能讓用戶(hù)輕松的使用。9.安全性用戶(hù)能自由的作出選擇，且所有選擇都是可逆的。在用戶(hù)作出危險(xiǎn)的選擇時(shí)有信息介入系統(tǒng)的提示。10.靈活性簡(jiǎn)單來(lái)說(shuō)就是要讓用戶(hù)方便的使用，但不同于上述。即互動(dòng)多重性，不局限于單一的工具(包括鼠標(biāo)、鍵盤(pán)或手柄、界面)。11.人性化高效率和用戶(hù)滿(mǎn)意度是人性化的體現(xiàn)。應(yīng)具備專(zhuān)家級(jí)和初級(jí)玩家系統(tǒng)，即用戶(hù)可依據(jù)自己的習(xí)慣定制界面，并能保存設(shè)置。設(shè)計(jì)流程確認(rèn)目標(biāo)用戶(hù)在UI設(shè)計(jì)過(guò)程中，需求設(shè)計(jì)角色會(huì)確定軟件的目標(biāo)用戶(hù)，獲取最終用戶(hù)和直接用戶(hù)的需求。用戶(hù)交互要考慮到目標(biāo)用戶(hù)的不同引起的交互設(shè)計(jì)重點(diǎn)的不同。例如：對(duì)于科學(xué)用戶(hù)和對(duì)于電腦入門(mén)用戶(hù)的設(shè)計(jì)重點(diǎn)就不同。采集目標(biāo)用戶(hù)的習(xí)慣交互方式不同類(lèi)型的目標(biāo)用戶(hù)有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來(lái)源于其原有的針對(duì)現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。當(dāng)然還要在此基礎(chǔ)上通過(guò)調(diào)研分析找到用戶(hù)希望達(dá)到的交互效果，并且以流程確認(rèn)下來(lái)。提示和引導(dǎo)用戶(hù)軟件是用戶(hù)的工具。因此應(yīng)該由用戶(hù)來(lái)操作和控制軟件。軟件響應(yīng)用戶(hù)的動(dòng)作和設(shè)定的規(guī)則。對(duì)于用戶(hù)交互的結(jié)果和反饋，提示用戶(hù)結(jié)果和反饋信息，引導(dǎo)用戶(hù)進(jìn)行用戶(hù)需要的下一步操作。一致性原則設(shè)計(jì)目標(biāo)一致軟件中往往存在多個(gè)組成部分（組件、元素）。不同組成部分之間的交互設(shè)計(jì)目標(biāo)需要一致。例如：如果以電腦操作初級(jí)用戶(hù)作為目標(biāo)用戶(hù)，以簡(jiǎn)化界面邏輯為設(shè)計(jì)目標(biāo)，那么該目標(biāo)需要貫徹軟件（軟件包）整體，而不是局部。元素外觀一致交互元素的外觀往往影響用戶(hù)的交互效果。同一個(gè)（類(lèi)）軟件采用一致風(fēng)格的外觀，對(duì)于保持用戶(hù)焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒(méi)有特別統(tǒng)一的衡量方法。因此需要對(duì)目標(biāo)用戶(hù)進(jìn)行調(diào)查取得反饋。交互行為一致在交互模型中，不同類(lèi)型的元素用戶(hù)觸發(fā)其對(duì)應(yīng)的行為事件后，其交互行為需要一致。例如：所有需要用戶(hù)確認(rèn)操作的對(duì)話框都至少包含確認(rèn)和放棄兩個(gè)按鈕。對(duì)于交互行為一致性原則比較極端的理念是相同類(lèi)型的交互元素所引起的行為事件相同。但是我們可以看到這個(gè)理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個(gè)理念設(shè)計(jì)，會(huì)更加簡(jiǎn)化用戶(hù)操作流程。可用性原則可理解軟件要為用戶(hù)使用，用戶(hù)必須可以理解軟件各元素對(duì)UI設(shè)計(jì)應(yīng)的功能。如果不能為用戶(hù)理解，那么需要提供一種非破壞性的途徑，使得用戶(hù)可以通過(guò)對(duì)該元素的操作，理解其對(duì)應(yīng)的功能。比如：刪除操作元素。用戶(hù)可以點(diǎn)擊刪除操作按鈕，提示用戶(hù)如何刪除操作或者是否確認(rèn)刪除操作，用戶(hù)可以更加詳細(xì)的理解該元素對(duì)應(yīng)的功能，同時(shí)可以取消該操作?？蛇_(dá)到用戶(hù)是交互的中心，交互元素對(duì)應(yīng)用戶(hù)需要的功能。因此交互元素必須可以被用戶(hù)控制。用戶(hù)可以用諸如鍵盤(pán)、鼠標(biāo)之類(lèi)的交互設(shè)備通過(guò)移動(dòng)和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見(jiàn)或者不可交互的交互元素。要注意的是交互的次數(shù)會(huì)影響可達(dá)到的效果。當(dāng)一個(gè)功能被深深隱藏（一般來(lái)說(shuō)超過(guò)4層）那么用戶(hù)達(dá)到該元素的幾率就大大降低了?？蛇_(dá)到的效果也