第一篇：20個(gè)UI設(shè)計(jì)原則

20個(gè)UI設(shè)計(jì)原則

圖形設(shè)計(jì)大師Paul Rand（保羅.蘭德）曾經(jīng)說(shuō)過(guò)：“設(shè)計(jì)絕不是簡(jiǎn)單的排列組合與簡(jiǎn)單地再編輯，它應(yīng)當(dāng)充滿著價(jià)值和意義，去說(shuō)明道理，去刪繁就簡(jiǎn)，去闡明演繹，去修飾美化，去贊美褒揚(yáng)，使其有戲劇意味，讓人們信服你所言……”，由此可見(jiàn)，設(shè)計(jì)絕非輕而易舉之事，優(yōu)秀的設(shè)計(jì)更是難上加難，今日小編偶然發(fā)現(xiàn)一篇界面設(shè)計(jì)師Joshua Porter博客當(dāng)中的一篇文章——《Principles of User Interface Design》，文章中列舉了20大UI設(shè)計(jì)原則，全文編譯如下：

1.清晰度是首要工作

清晰度是界面設(shè)計(jì)中，第一步也是最重要的工作。要想你設(shè)計(jì)的界面有效并被人喜歡，首先必須讓用戶能夠識(shí)別出它？讓用戶知道為什么會(huì)使用它？比如當(dāng)用戶使用時(shí)，能夠預(yù)料到發(fā)生什么，并成功的與它交互。有的界面設(shè)計(jì)得不是太清晰，雖然能夠滿足用戶一時(shí)的需求，但并非長(zhǎng)久之計(jì)，而清晰的界面能夠吸引用戶不斷地重復(fù)使用。

2.界面是為促進(jìn)交互而存在的界面的存在，促進(jìn)了用戶和我們的世界之間的互動(dòng)。優(yōu)秀的界面不但能夠讓我們做事有效率，還能夠激發(fā)、喚起和加強(qiáng)我們與這個(gè)世界的聯(lián)系。

3.保護(hù)和尊重用戶的注意力

我們?cè)陂喿x的時(shí)候，總是會(huì)有許多事物分散我們的注意力，使得我們很難集中注意力安靜地閱讀。因此，在進(jìn)行界面設(shè)計(jì)的時(shí)候，能夠吸引用戶的注意力是很關(guān)鍵的，所以千萬(wàn)不要將你應(yīng)用的周圍設(shè)計(jì)得亂七八糟分散人的注意力，謹(jǐn)記屏幕整潔能夠吸引注意力的重要性。如果你非要顯示廣告，那么請(qǐng)?jiān)谟脩糸喿x完畢之后再顯示。尊重用戶的注意力，不僅讓用戶更快樂(lè)，而且你的廣告效果也會(huì)更佳。因此要想設(shè)計(jì)好的界面，保護(hù)和尊重用戶的注意力是先決條件。

4.讓界面處在用戶的掌控之中

人類往往對(duì)能夠掌控自己和周圍的環(huán)境感到很舒心。不考慮用戶感受的軟件往往會(huì)讓這種舒適感消失，迫使用戶不得不進(jìn)入計(jì)劃外的交互，這會(huì)讓用戶很不舒服。保證界面處在用戶的掌控之中，讓用戶自己決定系統(tǒng)狀態(tài)，稍加引導(dǎo)，我想你會(huì)達(dá)到你希望的目標(biāo)。

5.直接操作的感覺(jué)是最好的當(dāng)我們能夠直接操作物體時(shí)，用戶的感覺(jué)是最棒的，但這并不太容易實(shí)現(xiàn)，因?yàn)樵诮缑嬖O(shè)計(jì)時(shí)，我們?cè)黾拥膱D標(biāo)往往并不是必須的，比如我們過(guò)多的使用按鈕、圖形、選項(xiàng)、附件等等其他繁瑣的東西以便我們最終操縱UI元素而不是重要的事情。而最初的目標(biāo)呢？就是希望簡(jiǎn)化而能夠直接操縱……因此在進(jìn)行界面設(shè)計(jì)時(shí)，我們要盡可能多的了解一些人類自然手勢(shì)。理想情況下，界面設(shè)計(jì)要簡(jiǎn)潔，讓用戶有一個(gè)直接操作的感覺(jué)。

6.每個(gè)屏幕需要一個(gè)主題

我們?cè)O(shè)計(jì)的每一個(gè)畫(huà)面都應(yīng)該有單一的主題，這樣不僅能夠讓用戶使用到它真正的價(jià)值，也使得上手容易，使用起來(lái)也更方便，在必要的時(shí)候更容易進(jìn)行修改。如果一個(gè)屏幕支持兩個(gè)或兩個(gè)以上的主題，立馬會(huì)讓整個(gè)界面看起來(lái)混亂不堪。正如文章應(yīng)該有一個(gè)單一的主題以及強(qiáng)有力的論點(diǎn)，我們的界面設(shè)計(jì)也應(yīng)該如此，這也是界面存在的理由。

7.勿讓次要?jiǎng)幼餍e奪主

每個(gè)屏幕包含一個(gè)主要?jiǎng)幼鞯耐瑫r(shí)，可以有多個(gè)次要?jiǎng)幼?，但盡量不要讓它們喧賓奪主！文章的存在是為了讓人們?nèi)ラ喿x它，并不是讓人們?cè)赥witter上面分享它。所以在設(shè)計(jì)界面的時(shí)候，盡量減弱次要?jiǎng)幼鞯囊曈X(jué)沖擊力，或者在主要?jiǎng)幼魍瓿芍笤亠@示出來(lái)。

8.自然過(guò)渡

界面的交互都是環(huán)環(huán)相扣的，所以設(shè)計(jì)時(shí)，要深思熟慮地考慮到交互的下一步。考慮到下一步的交互是怎樣的，并且通過(guò)設(shè)計(jì)將其實(shí)現(xiàn)。這就好比我們的日常談話，要為深入交談提供話由。當(dāng)用戶已經(jīng)完成該做的步驟，不要讓他們不知所措，給他們自然而然繼續(xù)下去的方法，以達(dá)成目標(biāo)。

9.外觀追隨功能（類似于形式追隨功能）

人總是對(duì)符合期望的行為最感舒適。當(dāng)其他人、動(dòng)物、事物或者軟件的行為始終符合我們的期望時(shí)，我們會(huì)感到與之關(guān)系良好。這也是與人打交道的設(shè)計(jì)應(yīng)該做到的。在實(shí)踐中，這意味著用戶只要看一眼就可以知道接下來(lái)將會(huì)有什么的動(dòng)作發(fā)生，如果它看上去像個(gè)按鈕，那么它就應(yīng)該具備按鈕的功能。設(shè)計(jì)師不應(yīng)該在基本的交互問(wèn)題上耍小聰明，要在更高層次的問(wèn)題上發(fā)揮創(chuàng)造力。

10.區(qū)分重點(diǎn)

如果屏幕元素各自的功能不同，那么它們的外觀也理應(yīng)不同。反之，如果功能相同或相近，那么它們看起來(lái)就應(yīng)該是一樣的。為了保持一致性，初級(jí)設(shè)計(jì)師往往對(duì)應(yīng)該加以區(qū)分的元素采用相同的視覺(jué)處理效果，其實(shí)采用不同的視覺(jué)效果才是合適的。

11.強(qiáng)烈的視覺(jué)層次感

如果要讓屏幕的視覺(jué)元素具有清晰的瀏覽次序，那么應(yīng)該通過(guò)強(qiáng)烈的視覺(jué)層次感來(lái)實(shí)現(xiàn)。也就是說(shuō)，如果用戶每次都按照相同的順序?yàn)g覽同樣的東西，視覺(jué)層次感不明顯的話，用戶不知道哪里才是目光應(yīng)當(dāng)停留的重點(diǎn)，最終只會(huì)讓用戶感到一團(tuán)糟。在不斷變更設(shè)計(jì)的情況下，很難保持明確的層次關(guān)系，因?yàn)樗械脑貙哟侮P(guān)系都是相對(duì)的：

如果所有的元素都突出顯示，最后就相當(dāng)于沒(méi)有重點(diǎn)可言。如果要添加一個(gè)需要特別突出的元素，為了再次實(shí)現(xiàn)明確的視覺(jué)層級(jí)，設(shè)計(jì)師可能需要重新考慮每一個(gè)元素的視覺(jué)重量。雖然多數(shù)人不會(huì)察覺(jué)到視覺(jué)層次，但這是增強(qiáng)設(shè)計(jì)的最簡(jiǎn)單的方法。

12.恰當(dāng)?shù)慕M織視覺(jué)元素，減輕用戶的認(rèn)知負(fù)荷

正如注明設(shè)計(jì)師John Maeda在其著作《Simplicity》中所言，恰當(dāng)?shù)亟M織視覺(jué)元素能夠化繁為簡(jiǎn)，幫助他人更加快速簡(jiǎn)單地理解你的表達(dá)，比如內(nèi)容上的包含關(guān)系。用方位和方向上的組織可以自然地表現(xiàn)元素間的關(guān)系。恰如其分地組織內(nèi)容可以減輕用戶的認(rèn)知負(fù)荷，他們不必再琢磨元素間的關(guān)系，因?yàn)槟阋呀?jīng)表現(xiàn)出來(lái)了。不要迫使用戶做出分辨，而是設(shè)計(jì)者用組織表現(xiàn)出來(lái)。不要迫使用戶自己去把問(wèn)題搞明白，設(shè)計(jì)師應(yīng)當(dāng)直接在。

13.色彩不是決定性的因素

物體的色彩會(huì)隨光線改變而改變。艷陽(yáng)高照與夕陽(yáng)西沉?xí)r，我們看到的景物會(huì)有很大反差。換句話說(shuō)，色彩很容易被環(huán)境改變，因此，設(shè)計(jì)的時(shí)候不要將色彩視為決定性因素。色彩可以醒目，作為引導(dǎo)，但不應(yīng)該是做區(qū)別的唯一元素。在長(zhǎng)篇閱讀或者長(zhǎng)時(shí)間面對(duì)電腦屏幕的情況下，除了要強(qiáng)調(diào)的內(nèi)容，應(yīng)采用相對(duì)暗淡或柔和的背景色。當(dāng)然，視讀者而定，也可采用明亮的背景色。

14.循序展現(xiàn)

每個(gè)屏幕只展現(xiàn)必需的內(nèi)容。如果用戶需要作出決定，則展現(xiàn)足夠的信息供其選擇，他們會(huì)到在下一屏找到所需細(xì)節(jié)。避免過(guò)度闡釋或把所有一次展現(xiàn)，如果可能，將選擇放在下一屏以有步驟地展示信息。這會(huì)使你的界面交互更加清晰。

15.內(nèi)嵌“幫助”選項(xiàng)

在理想的用戶界面，“幫助”選項(xiàng)是不必要出現(xiàn)的，因?yàn)橛脩艚缑婺軌蛴行У刂敢脩魧W(xué)習(xí)。類似“下一步”實(shí)際上就是在上下文情境中內(nèi)嵌的“幫助”，并且只在用戶需要的時(shí)候出現(xiàn)在適當(dāng)?shù)奈恢?，其他時(shí)候都是隱藏的。設(shè)計(jì)者的任務(wù)不是在用戶有需要的地方建立一個(gè)幫助系統(tǒng)，把發(fā)現(xiàn)用戶需要的義務(wù)推諉給用戶，讓用戶去在幫助系統(tǒng)中尋找他們問(wèn)題的答案。而是應(yīng)該確保用戶知道如何使用你提供的界面，讓用戶在界面中得到指導(dǎo)并學(xué)習(xí)。

16.關(guān)鍵時(shí)刻：零狀態(tài)

用戶對(duì)一個(gè)界面的首次體驗(yàn)是非常重要的，而這常常被設(shè)計(jì)師忽略。為了更好的幫助用戶快速適應(yīng)我們的設(shè)計(jì)，設(shè)計(jì)應(yīng)該處于零狀態(tài)，也就是什么都沒(méi)有發(fā)生的狀態(tài)。但這個(gè)狀態(tài)不是一塊空白的畫(huà)布，它應(yīng)該能夠?yàn)橛脩籼峁┓较蚝椭笇?dǎo)，以此來(lái)幫助用戶快速適應(yīng)設(shè)計(jì)。在初始狀態(tài)下的互動(dòng)過(guò)程中會(huì)存在一些摩擦，一旦用戶了解了各種規(guī)則，那將會(huì)有很高的機(jī)會(huì)獲得成功。

17.針對(duì)現(xiàn)有問(wèn)題去完善界面

人們總是尋求各種方案去解決已經(jīng)存在的問(wèn)題，而不是潛在的或者未來(lái)的問(wèn)題。所以，不要為假設(shè)的問(wèn)題設(shè)計(jì)界面，我們應(yīng)該觀察現(xiàn)有的行為和設(shè)計(jì)，解決現(xiàn)存的問(wèn)題。這確實(shí)不是件能夠讓人興奮的事情，但卻是最有價(jià)值的事情，因?yàn)橐坏┠愕挠脩艚缑嬗油晟疲瑫?huì)有更多的用戶愿意使用你的界面。

18.優(yōu)秀的設(shè)計(jì)是無(wú)形的優(yōu)秀的設(shè)計(jì)有個(gè)古怪的屬性，它通常會(huì)被它的用戶所忽略。其中的一個(gè)原因是這個(gè)設(shè)計(jì)非常成功，以至于它的用戶專注于完成自己的目標(biāo)而忽略了自己面對(duì)的界面，用戶順利達(dá)成自己的目標(biāo)后，他們會(huì)很滿意地退出界面。但是作為設(shè)計(jì)師，這可能會(huì)有點(diǎn)不公平，當(dāng)我們的設(shè)計(jì)很優(yōu)秀的時(shí)候，我們不會(huì)受到很多阿諛?lè)畛?。?dāng)然，優(yōu)秀的設(shè)計(jì)師不會(huì)去介意這些，因?yàn)樗麄冃睦锩靼?，滿意的用戶往往都是沉默的。

19.多領(lǐng)域?qū)W習(xí)，借鑒其他學(xué)科

視覺(jué)、平面設(shè)計(jì)、排版、文案、信息結(jié)構(gòu)以及可視化，所有的這些知識(shí)領(lǐng)域都應(yīng)該是界面設(shè)計(jì)應(yīng)該包含的內(nèi)容，設(shè)計(jì)師對(duì)這些知識(shí)都應(yīng)該有所涉獵或者比較專長(zhǎng)。不要看不起這些知識(shí)：要從中獲取許多值得學(xué)習(xí)的東西，以此來(lái)提高你的工作能力。設(shè)計(jì)師的眼光要長(zhǎng)遠(yuǎn)，要能從看似無(wú)關(guān)的學(xué)科中學(xué)習(xí)，比如出版、編程、裝訂、滑板、消防甚至空手道。

20.界面的存在必須有所用途

在大多數(shù)設(shè)計(jì)領(lǐng)域，界面設(shè)計(jì)成功的要素就是有用戶使用它。打個(gè)比方，一把漂亮的椅子，雖然精美但坐著不舒服，那么用戶不會(huì)選擇使用它，它也就是失敗的設(shè)計(jì)。因此，界面設(shè)計(jì)不僅僅是設(shè)計(jì)一個(gè)使用環(huán)境，還需要是創(chuàng)造一個(gè)值得使用的藝術(shù)品。界面設(shè)計(jì)僅僅能夠滿足其設(shè)計(jì)者的虛榮心是不夠的：它必須要有用！

第二篇：《UI設(shè)計(jì)》課程標(biāo)準(zhǔn)

《UI設(shè)計(jì)》學(xué)習(xí)領(lǐng)域課程標(biāo)準(zhǔn)

執(zhí)筆：甄珍

審核：

時(shí)間： 2013-5-

5一、學(xué)習(xí)領(lǐng)域定位

“UI”熱是近幾年來(lái)興起的潮流，近幾年國(guó)內(nèi)很多從事手機(jī)，軟件，網(wǎng)站，增值服務(wù)等企業(yè)和公司都設(shè)立了這個(gè)部門。還有很多專門從事UI設(shè)計(jì)的公司也應(yīng)運(yùn)而生。

正是鑒于目前UI行業(yè)的發(fā)展?fàn)顩r，本專業(yè)第一次開(kāi)設(shè)計(jì)《UI設(shè)計(jì)》課程。

《UI設(shè)計(jì)》是所有與網(wǎng)絡(luò)通信軟件相關(guān)專業(yè)課程，該課程既可以鞏固前期所學(xué)的設(shè)計(jì)基礎(chǔ)理論知識(shí)和設(shè)計(jì)軟件應(yīng)用知識(shí)，還重在給學(xué)生開(kāi)拓新的專業(yè)知識(shí)面，認(rèn)知一個(gè)新的設(shè)計(jì)領(lǐng)域，從而拓展職業(yè)能力和就業(yè)選擇面。

二、職業(yè)分析

目前UI即用戶界面設(shè)計(jì)行業(yè)剛剛在全球軟件業(yè)興起，屬于高新技術(shù)設(shè)計(jì)產(chǎn)業(yè)，與國(guó)外在同步發(fā)展水平。其次國(guó)內(nèi)外眾多大型IT企業(yè)(例如：百度、騰訊、Yahoo、中國(guó)移動(dòng)、Nokia、聯(lián)想、網(wǎng)易、微軟、盛大、淘寶等眾多企業(yè))均已成立專業(yè)的UI設(shè)計(jì)部門，但專業(yè)人才稀缺，人才資源爭(zhēng)奪激烈。但目前全國(guó)UI設(shè)計(jì)專業(yè)的系統(tǒng)教學(xué)極其稀少。UI設(shè)計(jì)師的待遇和地位也逐漸上升。

三、學(xué)習(xí)目標(biāo)

知識(shí)目標(biāo)：使學(xué)生能熟悉UI設(shè)計(jì)的流程和設(shè)計(jì)方法，并能使用制作有創(chuàng)意的，充滿視覺(jué)沖擊力的UI設(shè)計(jì)作品。

技能目標(biāo)：使學(xué)生學(xué)會(huì)系統(tǒng)規(guī)劃和全局思維，能夠完成一整套UI系統(tǒng)的設(shè)計(jì)。

素養(yǎng)目標(biāo)：使學(xué)生具備能從事UI系統(tǒng)的開(kāi)發(fā)與設(shè)計(jì)能力，培養(yǎng)學(xué)生團(tuán)隊(duì)合作、及獨(dú)立思考能力。

四、學(xué)習(xí)內(nèi)容

四、學(xué)習(xí)領(lǐng)域課程設(shè)計(jì)思路

（一）設(shè)計(jì)理念

五、考核方式

學(xué)生成績(jī)的評(píng)定，以學(xué)生平時(shí)表現(xiàn)和任務(wù)完成情況及最終考核來(lái)核定。評(píng)分細(xì)則如下表：

其中，平時(shí)成績(jī)包括平時(shí)上課的表現(xiàn)和各任務(wù)的完成情況，占總成績(jī)的30％；最終考核成績(jī)所用考核方式為機(jī)試，占總成績(jī)的70％。

第三篇：UI設(shè)計(jì)流程

UI設(shè)計(jì)流程

階段一：分析

1用戶需求分析 2用戶交互場(chǎng)景分析 3競(jìng)爭(zhēng)產(chǎn)品分析

這兩者可以說(shuō)是相輔相成的。對(duì)于一個(gè)較為正規(guī)的項(xiàng)目而言，必然有對(duì)用戶需求的分析內(nèi)容。Tanjurd瑭錦資深UI設(shè)計(jì)師表示其中用戶UI需求是重要的組成部分。如果說(shuō)UI設(shè)計(jì)原則是所有UI設(shè)計(jì)的出發(fā)點(diǎn)的話，那么用戶UI需求就是本次設(shè)計(jì)的出發(fā)是好的UI設(shè)計(jì)建立在對(duì)用戶深刻了解之上。因此用戶交互場(chǎng)景分析就很重要。對(duì)于大部分項(xiàng)目組來(lái)說(shuō)也許沒(méi)有時(shí)間和精力去實(shí)際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是UI設(shè)計(jì)人員在分析的時(shí)候一定要站在用戶角度思考：如果我是用戶，這里我會(huì)需要什么。競(jìng)爭(zhēng)產(chǎn)品能夠上市并且被UI設(shè)計(jì)者知道，必然有其長(zhǎng)處。這就是所謂三人行必有我?guī)煹囊馑肌Ｃ總€(gè)設(shè)計(jì)者的思維都有局限性，看到別人的設(shè)計(jì)會(huì)有觸類旁通的好處。當(dāng)然有的時(shí)候可以參考的并不一定是競(jìng)爭(zhēng)產(chǎn)品。

階段二 設(shè)計(jì)需求：（葉面設(shè)計(jì)前需提給UI頁(yè)面組）

1.系統(tǒng)設(shè)計(jì)需求文檔。2.系統(tǒng)結(jié)構(gòu)文檔（例如欄目劃分，目錄結(jié)構(gòu)，導(dǎo)航方式等）。3.較復(fù)雜頁(yè)面表現(xiàn)形式草圖（手繪或相關(guān)軟件繪制）。4.較復(fù)雜業(yè)務(wù)流程文檔。5.如有可能提供參考和示例站點(diǎn)。6.與程序員溝通部分頁(yè)面實(shí)現(xiàn)方法。

段三：頁(yè)面制作：

1.經(jīng)過(guò)確認(rèn)的美術(shù)設(shè)計(jì)的方案圖7.系統(tǒng)設(shè)計(jì)需求文檔等，較復(fù)雜務(wù)流程文檔。2.所需頁(yè)面腳本需求，與程序員溝通部分頁(yè)面實(shí)現(xiàn)方法。3提交給程序

用戶交互case圖（說(shuō)明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說(shuō)明交互和事件之間的聯(lián)系）交互功能設(shè)計(jì)圖（說(shuō)明功能和交互的對(duì)應(yīng)關(guān)系）最終得到UI的設(shè)計(jì)產(chǎn)品。

階段四：驗(yàn)證

界面測(cè)試：（頁(yè)面組提交給測(cè)試組包括：1.經(jīng)確認(rèn)的設(shè)計(jì)方案圖。2.靜態(tài)模板頁(yè)面。以上二項(xiàng)均為便于查看嵌入程序后的葉面情況。3.常出現(xiàn)的界面錯(cuò)誤：圖片錯(cuò)誤，頁(yè)面不美觀，布局不合理，與原先設(shè)計(jì)不符，文字 錯(cuò)誤HTML代碼錯(cuò)誤，頁(yè)面程序錯(cuò)誤。4.界面bug測(cè)試報(bào)告：

正如Tanjurd瑭錦國(guó)際UI交互設(shè)計(jì)原則文中提到的，對(duì)于UI產(chǎn)品的驗(yàn)證主要從下面幾個(gè)方面入手：

1、功能性對(duì)照UI設(shè)計(jì)的再好，和需求不一致也不可以。

2、實(shí)用性內(nèi)部測(cè)試UI設(shè)計(jì)的最重要點(diǎn)就是實(shí)用性。

3、用戶焦點(diǎn)小組UI設(shè)計(jì)是否優(yōu)秀的重要衡量依據(jù)。最后，瑭錦Tanjurd說(shuō)一點(diǎn)其他的問(wèn)題?，F(xiàn)在往往認(rèn)為交互式設(shè)計(jì)和最終的UI效果設(shè)計(jì)可以截然分開(kāi)。這就好比說(shuō)需求可以和設(shè)計(jì)截然分開(kāi)，是不可能的。

總結(jié)：

1.產(chǎn)品定位與市場(chǎng)分析這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場(chǎng)需求完成的，但UI設(shè)計(jì)師應(yīng)了解產(chǎn)品的市場(chǎng)定位、產(chǎn)品定義、客戶群體、運(yùn)營(yíng)方式等。

2.用戶研究與分析這個(gè)過(guò)程是非常重要的，設(shè)計(jì)師應(yīng)該找到合適的方法來(lái)完成此環(huán)節(jié)。你可以搜集相關(guān)資料分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心里、需求等，提出用戶研究報(bào)告和可用性設(shè)計(jì)建議。這部分工作也可和團(tuán)隊(duì)配合完成。時(shí)間與項(xiàng)目需求允許的情況下，更可以制定實(shí)景用戶分析。

3.架構(gòu)設(shè)計(jì)這里涉及到比較多的界面交互與流程的設(shè)計(jì)，根據(jù)可用性分析結(jié)果制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。

4.原型設(shè)計(jì)我覺(jué)得這里應(yīng)該是一個(gè)小的階段標(biāo)志，要對(duì)前面所有工作加以設(shè)計(jì)方面的實(shí)施，根據(jù)進(jìn)度與成本，可以把原型控制在“手繪－圖形－FLASH-視頻”幾個(gè)質(zhì)量范圍。原型的本質(zhì)更傾向與一個(gè)DEMO，它不需要有全部的功能，但要體現(xiàn)出設(shè)計(jì)對(duì)象的基本特性。

5.界面設(shè)計(jì)如果很傾向于圖形界面設(shè)計(jì)，這兒是你最喜歡的部分。但一定要結(jié)合循環(huán)討論過(guò)的分析結(jié)果做設(shè)計(jì)，否則你的作品很難被人信服。色調(diào)、風(fēng)格、界面、窗口、圖標(biāo)、皮膚的表現(xiàn)是本環(huán)節(jié)的關(guān)鍵。

6.界面輸出作為設(shè)計(jì)師，在這一部分的工作就是配合好開(kāi)發(fā)人員完成相關(guān)的界面結(jié)合。7.完善工作這個(gè)環(huán)節(jié)是很多部門共同參與的，包括可用性的循環(huán)研究、用戶體驗(yàn)回饋、測(cè)試回饋。同時(shí)，UI人員也應(yīng)該把一些可行性建議進(jìn)行完善。Tanjurd瑭錦表示很多設(shè)計(jì)師做了東西不喜歡改，這是一個(gè)大忌。

如上的流程，可能會(huì)有很多部門共同參與完成，UI設(shè)計(jì)師如何與團(tuán)隊(duì)配合并發(fā)揮自己應(yīng)有的作用非常重要。一名合格的UI設(shè)計(jì)師，應(yīng)該能貫穿整個(gè)UI流程進(jìn)行工作，而并非是單純的圖形界面設(shè)計(jì)。

第四篇：UI設(shè)計(jì)流程

UI設(shè)計(jì)流程

分析、設(shè)計(jì)、配合、驗(yàn)證

確認(rèn)目標(biāo)用戶

在軟件設(shè)計(jì)過(guò)程中，需求設(shè)計(jì)角色會(huì)確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。

用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計(jì)重點(diǎn)的不同。

例如：對(duì)于科學(xué)用戶和對(duì)于電腦入門用戶的設(shè)計(jì)重點(diǎn)就不同。

采集目標(biāo)用戶的習(xí)慣交互方式

不同類型的目標(biāo)用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來(lái)源于其原有的針對(duì)現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。

當(dāng)然還要在此基礎(chǔ)上通過(guò)調(diào)研分析找到用戶希望達(dá)到的交互效果，并且以流程確認(rèn)下來(lái)。

提示和引導(dǎo)用戶

軟件是用戶的工具。因此應(yīng)該由用戶來(lái)操作和控制軟件。軟件響應(yīng)用戶的動(dòng)作和設(shè)定的規(guī)則。

對(duì)于用戶交互的結(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導(dǎo)用戶進(jìn)行用戶需要的下一步操作。

一致性原則

設(shè)計(jì)目標(biāo)一致

軟件中往往存在多個(gè)組成部分（組件、元素）。不同組成部分之間的交互設(shè)計(jì)目標(biāo)需要一致。

例如：如果以電腦操作初級(jí)用戶作為目標(biāo)用戶，以簡(jiǎn)化界面邏輯為設(shè)計(jì)目標(biāo)，那么該目標(biāo)需要貫徹軟件（軟件包）整體，而不是局部。

元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個(gè)（類）軟件采用一致風(fēng)格的外觀，對(duì)于保持用戶焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒(méi)有特別統(tǒng)一的衡量方法。因此需要對(duì)目標(biāo)用戶進(jìn)行調(diào)查取得反饋。

交互行為一致

在交互模型中，不同類型的元素用戶觸發(fā)其對(duì)應(yīng)的行為事件后，其交互行為需要一致。

例如：所有需要用戶確認(rèn)操作的對(duì)話框都至少包含確認(rèn)和放棄兩個(gè)按鈕。

對(duì)于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個(gè)理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個(gè)理念設(shè)計(jì)，會(huì)更加簡(jiǎn)化用戶操作流程。

可用性原則

可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對(duì)應(yīng)的功能。

如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過(guò)對(duì)該元素的操作，理解其對(duì)應(yīng)的功能。

例如：刪除操作元素。用戶可以點(diǎn)擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元素對(duì)應(yīng)的功能，同時(shí)可以取消該操作。

可達(dá)到

用戶是交互的中心，交互元素對(duì)應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。

用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過(guò)移動(dòng)和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見(jiàn)或者不可交互的交互元素。

要注意的是交互的次數(shù)會(huì)影響可達(dá)到的效果。當(dāng)一個(gè)功能被深深隱藏（一般來(lái)說(shuō)超過(guò)4層）那么用戶達(dá)到該元素的幾率就大大降低了。

可達(dá)到的效果也同界面設(shè)計(jì)有關(guān)。過(guò)于復(fù)雜的界面會(huì)影響可達(dá)到的效果。（參考簡(jiǎn)單導(dǎo)向原則）

可控制

軟件的交互流程，用戶可以控制。

功能的執(zhí)行流程，用戶可以控制。

如果確實(shí)無(wú)法提供控制，則用能為目標(biāo)用戶理解的方式提示用戶

1、分析階段

需求分析、用戶場(chǎng)景模擬、競(jìng)品分析（聆聽(tīng)用戶心聲）。

需求分析：對(duì)于一個(gè)產(chǎn)品來(lái)說(shuō)，必然有對(duì)用戶需求的分析內(nèi)容，更多的是從MRD與PRD獲得，或者從產(chǎn)品需求評(píng)審會(huì)議上得到需求分析的內(nèi)容，當(dāng)然可以直接與產(chǎn)品經(jīng)理交流獲得相關(guān)產(chǎn)品需求。如果說(shuō)設(shè)計(jì)原則是所有設(shè)計(jì)的出發(fā)點(diǎn)的話，那么用戶需求就是本次設(shè)計(jì)的出發(fā)點(diǎn)。用戶場(chǎng)景模擬：好的設(shè)計(jì)建立在對(duì)用戶深刻了解之上。因此用戶使用場(chǎng)景分析就很重要，了解產(chǎn)品的現(xiàn)有交互以及用戶使用產(chǎn)品習(xí)慣等，但是設(shè)計(jì)人員在分析的時(shí)候一定要站在用戶角度思考：如果我是用戶，這里我會(huì)需要什么。

競(jìng)品分析（聆聽(tīng)用戶心聲）：競(jìng)爭(zhēng)產(chǎn)品能夠上市并且被UI設(shè)計(jì)者知道，必然有其長(zhǎng)處。這就是所謂三人行必有我?guī)煹囊馑?。每個(gè)設(shè)計(jì)者的思維都有局限性，看到別人的設(shè)計(jì)會(huì)有觸類旁通的好處。當(dāng)市場(chǎng)上存在競(jìng)品時(shí)，去聽(tīng)聽(tīng)用戶的評(píng)論，哪怕是罵聲都好，別沉迷于自己的設(shè)計(jì)中，讓真正的用戶說(shuō)話。

輸入物：MRD、PRD、市場(chǎng)需求文檔、市場(chǎng)調(diào)查報(bào)告、競(jìng)品分析文檔（或其一或全部）

輸出物：設(shè)計(jì)初稿（或許只是幾個(gè)簡(jiǎn)單的界面）

2、設(shè)計(jì)階段

設(shè)計(jì)方法采用面向場(chǎng)景、面向事件驅(qū)動(dòng)和面向?qū)ο蟮脑O(shè)計(jì)方法。面向場(chǎng)景是針對(duì)該產(chǎn)品使用場(chǎng)所等模擬，模擬用戶在多種情況下產(chǎn)品使用的模擬。面向事件驅(qū)動(dòng)則是對(duì)產(chǎn)品響應(yīng)與觸發(fā)事件的設(shè)計(jì)，一個(gè)提示框，一個(gè)提交按鈕……這類都是對(duì)事件驅(qū)動(dòng)的設(shè)計(jì)。面向?qū)ο?，產(chǎn)品面向的用戶不同對(duì)于產(chǎn)品的設(shè)計(jì)要求不同，不同年齡層的用戶對(duì)于產(chǎn)品的要求不同，產(chǎn)品的用戶定位將對(duì)UI設(shè)計(jì)師影響因素。輸入物：交互文檔（高保真原型）輸出物：設(shè)計(jì)終稿（所有的設(shè)計(jì)稿）

3、配合

UI設(shè)計(jì)師交出產(chǎn)品設(shè)計(jì)圖時(shí)，更多的配合開(kāi)發(fā)人員、測(cè)試人員進(jìn)行截圖配合。配合開(kāi)發(fā)人員對(duì)于PSD格式的圖片切圖操作，對(duì)于不同的開(kāi)發(fā)人員的要求，切圖方式也有不同，UI設(shè)計(jì)師需配合相關(guān)的開(kāi)發(fā)人員進(jìn)行最適合的切圖配合。輸入物：設(shè)計(jì)終稿

輸出物：設(shè)計(jì)修改稿（設(shè)計(jì)稿切片）

4、驗(yàn)證

產(chǎn)品出來(lái)后，UI設(shè)計(jì)師需對(duì)產(chǎn)品的效果進(jìn)行驗(yàn)證，與當(dāng)初設(shè)計(jì)產(chǎn)品時(shí)的想法是否一致，是否可用，用戶是否接受，以及與需求是否一致。都需要UI設(shè)計(jì)師驗(yàn)證，UI設(shè)計(jì)師是將產(chǎn)品需求用圖片展現(xiàn)給用戶最直接的經(jīng)手人，對(duì)于產(chǎn)品的理解會(huì)更加深刻。輸入物：產(chǎn)品

輸出物：產(chǎn)品（面向用戶最終版本）

產(chǎn)品UI設(shè)計(jì)中夾雜著許多設(shè)計(jì)原則要求，統(tǒng)一公司UI設(shè)計(jì)流程，使UI設(shè)計(jì)師參與到產(chǎn)品設(shè)計(jì)整個(gè)環(huán)節(jié)中來(lái)，對(duì)產(chǎn)品的易用性進(jìn)行全流程負(fù)責(zé)，使UI設(shè)計(jì)的流程規(guī)范化，保證UI設(shè)計(jì)流程的可操作性。UI設(shè)計(jì)師應(yīng)該分析公司產(chǎn)品的特點(diǎn)，制定符合產(chǎn)品生命周期的UI設(shè)計(jì)流程。每個(gè)產(chǎn)品的生命周期中，UI設(shè)計(jì)師應(yīng)該嚴(yán)格按照流程，完成每個(gè)環(huán)節(jié)的職責(zé)，確保流程準(zhǔn)確有效的得到執(zhí)行，從而提高產(chǎn)品的可用性，提升產(chǎn)品質(zhì)量。GUI設(shè)計(jì)詳細(xì)流程定義：

1.項(xiàng)目開(kāi)始GUI設(shè)計(jì)時(shí)間點(diǎn)之前，明確客戶的GUI需求,了解機(jī)器外形硬件和軟件的特性。

2.概念設(shè)計(jì)【提供GUI設(shè)計(jì)方案幾套，參考產(chǎn)品組人員和領(lǐng)導(dǎo)層的建議，但最多3套，精心設(shè)計(jì)各套方案；項(xiàng)目組和產(chǎn)品組共同進(jìn)行方案評(píng)審會(huì)，決策方案；并且需要項(xiàng)目組提供真機(jī)，展開(kāi)界面的真機(jī)效果和環(huán)境測(cè)評(píng)，優(yōu)化界面顏色、亮度等細(xì)節(jié)）】； 3.詳細(xì)設(shè)計(jì)【需要明確界面研發(fā)的細(xì)節(jié)；建議項(xiàng)目提出強(qiáng)烈建議優(yōu)化的幾項(xiàng)產(chǎn)品設(shè)計(jì)點(diǎn)（用戶調(diào)查）】；對(duì)界面有變化的界面進(jìn)行統(tǒng)計(jì)，整理出文檔提交給UI層面技術(shù)工程師，做好相關(guān)的界面準(zhǔn)備工作。4.原型設(shè)計(jì)時(shí)間【目前國(guó)內(nèi)研發(fā)軟件的現(xiàn)狀通常此環(huán)節(jié)被忽略，但時(shí)間充足，建議按計(jì)劃進(jìn)行】 5.與UI層面的技術(shù)工程師共同展開(kāi)界面實(shí)現(xiàn)（界面實(shí)現(xiàn)和界面優(yōu)化的時(shí)間點(diǎn)控制在項(xiàng)目時(shí)間的百分之幾點(diǎn)，需要明確）

6.界面工程師制作好Demo，提交給項(xiàng)目負(fù)責(zé)人、決策人和UI用戶界面測(cè)試工程師（需要指定負(fù)責(zé)人），展開(kāi)用戶體驗(yàn)反饋建議匯總，提出用戶界面體驗(yàn)的反饋意見(jiàn)表（需要項(xiàng)目負(fù)責(zé)人支持）。

7.測(cè)試評(píng)估，盡早發(fā)現(xiàn)存在的交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)的不足之處，進(jìn)行軟件界面的改善設(shè)計(jì)。

UI設(shè)計(jì)流程以及設(shè)計(jì)師參與的環(huán)節(jié)

最近的工作中總結(jié)出一條結(jié)論：擁有一個(gè)完善規(guī)范的流程，是決定著一個(gè)項(xiàng)目走向成功或失敗的關(guān)鍵。

對(duì)于UI設(shè)計(jì)的工作流程，我覺(jué)得可以根據(jù)“市場(chǎng)分析－用戶分析－架構(gòu)－原型－界面－輸出－完善”這條主線制定，每個(gè)環(huán)節(jié)UI設(shè)計(jì)師都應(yīng)參與其中。

1.產(chǎn)品定位與市場(chǎng)分析

這一類工作大多都是由新產(chǎn)品研發(fā)部門以及市場(chǎng)需求完成的，但UI設(shè)計(jì)師應(yīng)了解產(chǎn)品的市場(chǎng)定位、產(chǎn)品定義、客戶群體、運(yùn)營(yíng)方式等。

2.用戶研究與分析

這個(gè)過(guò)程是非常重要的，設(shè)計(jì)師應(yīng)該找到合適的方法來(lái)完成此環(huán)節(jié)。你可以搜集相關(guān)資料分析目標(biāo)用戶的使用特征、情感、習(xí)慣、心里、需求等，提出用戶研究報(bào)告和可用性設(shè)計(jì)建議。這部分工作也可和團(tuán)隊(duì)配合完成。時(shí)間與項(xiàng)目需求允許的情況下，更可以制定實(shí)景用戶分析。

3.架構(gòu)設(shè)計(jì)

這里涉及到比較多的界面交互與流程的設(shè)計(jì)，根據(jù)可用性分析結(jié)果制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。

4.原型設(shè)計(jì)

我覺(jué)得這里應(yīng)該是一個(gè)小的階段標(biāo)志，要對(duì)前面所有工作加以設(shè)計(jì)方面的實(shí)施，根據(jù)進(jìn)度與成本，可以把原型控制在“手繪－圖形－FLASH-視頻”幾個(gè)質(zhì)量范圍。原型的本質(zhì)更傾向與一個(gè)DEMO，它不需要有全部的功能，但要體現(xiàn)出設(shè)計(jì)對(duì)象的基本特性。

5.界面設(shè)計(jì)

如果很傾向于圖形界面設(shè)計(jì)，這兒是你最喜歡的部分。但一定要結(jié)合循環(huán)討論過(guò)的分析結(jié)果做設(shè)計(jì)，否則你的作品很難被人信服。色調(diào)、風(fēng)格、界面、窗口、圖標(biāo)、皮膚的表現(xiàn)是本環(huán)節(jié)的關(guān)鍵。

6.界面輸出

作為設(shè)計(jì)師，在這一部分的工作就是配合好開(kāi)發(fā)人員完成相關(guān)的界面結(jié)合。

7.完善工作

這個(gè)環(huán)節(jié)是很多部門共同參與的，包括可用性的循環(huán)研究、用戶體驗(yàn)回饋、測(cè)試回饋。同時(shí)，UI人員也應(yīng)該把一些可行性建議進(jìn)行完善。很多設(shè)計(jì)師做了東西不喜歡改，這是一個(gè)大忌。

如上的流程，可能會(huì)有很多部門共同參與完成，UI設(shè)計(jì)師如何與團(tuán)隊(duì)配合并發(fā)揮自己應(yīng)有的作用非常重要。一名合格的UI設(shè)計(jì)師，應(yīng)該能貫穿整個(gè)UI流程進(jìn)行工作，而并非是單純的圖形界面設(shè)計(jì)。

確認(rèn)目標(biāo)用戶

在軟件設(shè)計(jì)過(guò)程中，需求設(shè)計(jì)角色會(huì)確定軟件的目標(biāo)用戶，獲取最終用戶和直接用戶的需求。

用戶交互要考慮到目標(biāo)用戶的不同引起的交互設(shè)計(jì)重點(diǎn)的不同。

例如：對(duì)于科學(xué)用戶和對(duì)于電腦入門用戶的設(shè)計(jì)重點(diǎn)就不同。采集目標(biāo)用戶的習(xí)慣交互方式

不同類型的目標(biāo)用戶有不同的交互習(xí)慣。這種習(xí)慣的交互方式往往來(lái)源于其原有的針對(duì)現(xiàn)實(shí)的交互流程、已有軟件工具的交互流程。

當(dāng)然還要在此基礎(chǔ)上通過(guò)調(diào)研分析找到用戶希望達(dá)到的交互效果，并且以流程確認(rèn)下來(lái)。

提示和引導(dǎo)用戶

軟件是用戶的工具。因此應(yīng)該由用戶來(lái)操作和控制軟件。軟件響應(yīng)用戶的動(dòng)作和設(shè)定的規(guī)則。

對(duì)于用戶交互的結(jié)果和反饋，提示用戶結(jié)果和反饋信息，引導(dǎo)用戶進(jìn)行用戶需要的下一步操作。一致性原則

設(shè)計(jì)目標(biāo)一致

軟件中往往存在多個(gè)組成部分（組件、元素）。不同組成部分之間的交互設(shè)計(jì)目標(biāo)需要一致。

例如：如果以電腦操作初級(jí)用戶作為目標(biāo)用戶，以簡(jiǎn)化界面邏輯為設(shè)計(jì)目標(biāo)，那么該目標(biāo)需要貫徹軟件（軟件包）整體，而不是局部。

元素外觀一致

交互元素的外觀往往影響用戶的交互效果。同一個(gè)（類）軟件采用一致風(fēng)格的外觀，對(duì)于保持用戶焦點(diǎn)，改進(jìn)交互效果有很大幫助。遺憾的是如何確認(rèn)元素外觀一致沒(méi)有特別統(tǒng)一的衡量方法。因此需要對(duì)目標(biāo)用戶進(jìn)行調(diào)查取得反饋。

交互行為一致

在交互模型中，不同類型的元素用戶觸發(fā)其對(duì)應(yīng)的行為事件后，其交互行為需要一致。

例如：所有需要用戶確認(rèn)操作的對(duì)話框都至少包含確認(rèn)和放棄兩個(gè)按鈕。

對(duì)于交互行為一致性原則比較極端的理念是相同類型的交互元素所引起的行為事件相同。但是我們可以看到這個(gè)理念雖然在大部分情況下正確，但是的確有相反的例子證明不按照這個(gè)理念設(shè)計(jì)，會(huì)更加簡(jiǎn)化用戶操作流程?？捎眯栽瓌t

可理解

軟件要為用戶使用，用戶必須可以理解軟件各元素對(duì)應(yīng)的功能。

如果不能為用戶理解，那么需要提供一種非破壞性的途徑，使得用戶可以通過(guò)對(duì)該元素的操作，理解其對(duì)應(yīng)的功能。

例如：刪除操作元素。用戶可以點(diǎn)擊刪除操作按鈕，提示用戶如何刪除操作或者是否確認(rèn)刪除操作，用戶可以更加詳細(xì)的理解該元素對(duì)應(yīng)的功能，同時(shí)可以取消該操作。

可達(dá)到

用戶是交互的中心，交互元素對(duì)應(yīng)用戶需要的功能。因此交互元素必須可以被用戶控制。

用戶可以用諸如鍵盤、鼠標(biāo)之類的交互設(shè)備通過(guò)移動(dòng)和觸發(fā)已有的交互元素達(dá)到其它在此之前不可見(jiàn)或者不可交互的交互元素。

要注意的是交互的次數(shù)會(huì)影響可達(dá)到的效果。當(dāng)一個(gè)功能被深深隱藏（一般來(lái)說(shuō)超過(guò)4層）那么用戶達(dá)到該元素的幾率就大大降低了。

可達(dá)到的效果也同界面設(shè)計(jì)有關(guān)。過(guò)于復(fù)雜的界面會(huì)影響可達(dá)到的效果。（參考簡(jiǎn)單導(dǎo)向原則）可控制

軟件的交互流程，用戶可以控制。

功能的執(zhí)行流程，用戶可以控制。

如果確實(shí)無(wú)法提供控制，則用能為目標(biāo)用戶理解的方式提示用戶。

上面的文章提到了UI設(shè)計(jì)的原則，并且對(duì)此做出了一些所謂的定義。大家要明白，本人對(duì)UI設(shè)計(jì)的研究時(shí)間不長(zhǎng)，這些原則只是個(gè)人體會(huì)。

因此就有人提出問(wèn)題：有了原則固然好，那么如何付諸實(shí)施呢？個(gè)人理解達(dá)到目標(biāo)是需要方法的，因此在UI設(shè)計(jì)原則里面東西拷貝了一些方法和模式。而能夠讓方法持續(xù)實(shí)施，達(dá)到目標(biāo)就需要流程-或者說(shuō)過(guò)程來(lái)保證。

所以這里就對(duì)流程進(jìn)行一下總結(jié)和探討。以付茶資吧！

我們把UI設(shè)計(jì)的流程分為一個(gè)出發(fā)點(diǎn)，4個(gè)階段。

[出發(fā)點(diǎn)]

1、了解UI設(shè)計(jì)的原則。

沒(méi)有原則，就喪失了設(shè)計(jì)的立足點(diǎn)。

2、了解UI交互模式

正如同編程不了解模式就會(huì)事半功倍一樣，UI設(shè)計(jì)不了解模式就會(huì)對(duì)設(shè)計(jì)原則的實(shí)施造成困惑。

3、了解UI交互元素及其功能

如果對(duì)于UI的基本交互元素和功能都不了解，如何設(shè)計(jì)UI呢？ [階段一：分析]

1、用戶需求分析

2、用戶交互場(chǎng)景分析

3、競(jìng)爭(zhēng)產(chǎn)品分析

這兩者可以說(shuō)是相輔相成的。對(duì)于一個(gè)較為正規(guī)的項(xiàng)目而言，必然有對(duì)用戶需求的分析內(nèi)容。其中用戶UI需求是重要的組成部分。如果說(shuō)UI設(shè)計(jì)原則是所有UI設(shè)計(jì)的出發(fā)點(diǎn)的話，那么用戶UI需求就是本次設(shè)計(jì)的出發(fā)點(diǎn)。

好的UI設(shè)計(jì)建立在對(duì)用戶深刻了解之上。因此用戶交互場(chǎng)景分析就很重要。對(duì)于大部分項(xiàng)目組來(lái)說(shuō)也許沒(méi)有時(shí)間和精力去實(shí)際勘查用戶的現(xiàn)有交互、制作完善的交互模型考察，但是UI設(shè)計(jì)人員在分析的時(shí)候一定要站在用戶角度思考：如果我是用戶，這里我會(huì)需要什么。

競(jìng)爭(zhēng)產(chǎn)品能夠上市并且被UI設(shè)計(jì)者知道，必然有其長(zhǎng)處。這就是所謂三人行必有我?guī)煹囊馑肌Ｃ總€(gè)設(shè)計(jì)者的思維都有局限性，看到別人的設(shè)計(jì)會(huì)有觸類旁通的好處。

當(dāng)然有的時(shí)候可以參考的并不一定是競(jìng)爭(zhēng)產(chǎn)品。[階段二：設(shè)計(jì)]

采用面向場(chǎng)景、面向事件驅(qū)動(dòng)和面向?qū)ο蟮脑O(shè)計(jì)方法。

UI設(shè)計(jì)著重于交互，因此必然要對(duì)最終用戶的交互場(chǎng)景進(jìn)行設(shè)計(jì)。

軟件是交互產(chǎn)品，用戶所作的就是對(duì)軟件事件的響應(yīng)以及觸發(fā)軟件內(nèi)置的事件。因此要面向事件設(shè)計(jì)。

現(xiàn)在的程序開(kāi)發(fā)主流采用的是面向?qū)ο笤O(shè)計(jì)。面向?qū)ο笤O(shè)計(jì)可以有效的體現(xiàn)面向場(chǎng)景和面向事件的特點(diǎn)。

設(shè)計(jì)的四個(gè)要素： 交互對(duì)象 數(shù)據(jù)對(duì)象

事件（交互事件和異常）動(dòng)作

[階段三：開(kāi)發(fā)] 通過(guò)：

用戶交互case圖（說(shuō)明用戶和系統(tǒng)之間的聯(lián)系）用戶交互流程圖（說(shuō)明交互和事件之間的聯(lián)系）交互功能設(shè)計(jì)圖（說(shuō)明功能和交互的對(duì)應(yīng)關(guān)系）最終得到UI的設(shè)計(jì)產(chǎn)品。[階段四：驗(yàn)證]

正如UI交互設(shè)計(jì)原則探討文中提到的，對(duì)于UI產(chǎn)品的驗(yàn)證主要從下面幾個(gè)方面入手：

1、功能性對(duì)照

UI設(shè)計(jì)的再好，和需求不一致也不可以。

2、實(shí)用性內(nèi)部測(cè)試

UI設(shè)計(jì)的最重要點(diǎn)就是實(shí)用性。

3、用戶焦點(diǎn)小組

UI設(shè)計(jì)是否優(yōu)秀的重要衡量依據(jù)。

第五篇：UI設(shè)計(jì)基礎(chǔ)知識(shí) 免費(fèi)

UI設(shè)計(jì)基礎(chǔ)知識(shí)

UI設(shè)計(jì)學(xué)習(xí)者經(jīng)常會(huì)陷入迷茫期，學(xué)習(xí)內(nèi)容零碎雜亂、自覺(jué)性差、水平不夠、無(wú)人指導(dǎo)走彎路等問(wèn)題接踵而來(lái)，導(dǎo)致很多人半途而廢。要想從零基礎(chǔ)小白成長(zhǎng)為真正的UI設(shè)計(jì)師，需要制定合理的學(xué)習(xí)計(jì)劃，并加以系統(tǒng)的學(xué)習(xí)課程，才能助你快速成長(zhǎng)為一名優(yōu)秀的UI設(shè)計(jì)師。

一、【UI設(shè)計(jì)需要學(xué)什么？】UI設(shè)計(jì)學(xué)習(xí)內(nèi)容分四大階段：

01必不可少的軟件基礎(chǔ)：熟練掌握UI設(shè)計(jì)基本軟件Photoshop、Illstrator核心功能，讓成為UI 設(shè)計(jì)師事半功倍。

02各模塊的設(shè)計(jì)學(xué)習(xí)：系統(tǒng)全面學(xué)習(xí)習(xí)近平面設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、APP設(shè)計(jì)、交互設(shè)計(jì)等各個(gè)版塊，打造會(huì)設(shè)計(jì)、知交互、懂用戶體驗(yàn)的UI設(shè)計(jì)師。

03UI項(xiàng)目實(shí)訓(xùn)：通過(guò)項(xiàng)目實(shí)戰(zhàn)案例的練習(xí)，積累設(shè)計(jì)經(jīng)驗(yàn)，提升設(shè)計(jì)整體水平。04高薪就業(yè)指導(dǎo)：提升綜合素質(zhì)及實(shí)際求職能力。

二、UI到底是什么？

User Interface（用戶界面），簡(jiǎn)稱UI，是指從事對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。UI設(shè)計(jì)分三個(gè)分支：

1、研究界面——圖形設(shè)計(jì)師Graphic UI Designer，簡(jiǎn)稱GUI,國(guó)內(nèi)目前大部分UI工作者都是從事這個(gè)行業(yè)。包括（網(wǎng)頁(yè)設(shè)計(jì)，軟件界面，移動(dòng)端界面設(shè)計(jì)），每天工作做著各種界面設(shè)計(jì)。

2、研究人和界面的關(guān)系——交互設(shè)計(jì)師Interaction Design,簡(jiǎn)稱ID，做整個(gè)項(xiàng)目的交互和流程。

3、研究用戶體驗(yàn)——用戶體驗(yàn)設(shè)計(jì)師User Experience，簡(jiǎn)稱UE，主要是通過(guò)各種方法去了解用戶現(xiàn)在需要什么樣的體驗(yàn)什么樣的界面，從而對(duì)這個(gè)項(xiàng)目的總體性體驗(yàn)做決策。

UI設(shè)計(jì)是屏幕產(chǎn)品的重要組成部分。界面設(shè)計(jì)是一個(gè)復(fù)雜的由不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計(jì)學(xué)、語(yǔ)言學(xué)等在此都扮演著重要的角色。用戶界面設(shè)計(jì)的三大原則是： 1.置界面于用戶的控制之下； 2.減少用戶的記憶負(fù)擔(dān)；

江西新華電腦學(xué)院

3.保持界面的一致性； 即要符合用戶的心智模型。

所以一個(gè)優(yōu)秀的UI設(shè)計(jì)師，從技能上講，不僅能畫(huà)圖標(biāo)，還能做好界面，會(huì)很多交互知識(shí)。

好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由、充分體現(xiàn)軟件的定位和特點(diǎn)。

圖標(biāo)，界面，交互知識(shí)都是需要長(zhǎng)期的經(jīng)驗(yàn)積累，所以UI這條路很長(zhǎng)，要學(xué)的技能很多，大家加油吧！

三、UI設(shè)計(jì)師工作中都做些什么工作？ 1.視覺(jué)設(shè)計(jì)（GUI）

界面設(shè)計(jì)并標(biāo)注尺寸（設(shè)計(jì)規(guī)范）； 圖片資源導(dǎo)出給程序員（切圖）； 啟動(dòng)圖標(biāo)設(shè)計(jì)；

制作海報(bào)、商品圖、活動(dòng)頁(yè)面等圖片資源； 提交到各大平臺(tái)的推廣圖。2.交互設(shè)計(jì)（ID）需求分析；

理清操作流程（流程圖、線框圖）；

負(fù)責(zé)項(xiàng)目中各種交互元素的設(shè)計(jì)（交互文檔、界面跳轉(zhuǎn)、圖標(biāo)、按鈕、動(dòng)效）； 優(yōu)化頁(yè)面，使用戶操作更人性化。3.用戶體驗(yàn)設(shè)計(jì)（UE）測(cè)試軟件功能、界面美觀； 搜集用戶反饋，提供優(yōu)化意見(jiàn)； 參與到產(chǎn)品迭代過(guò)程中。

大部分公司招UI需求上包含以上所有內(nèi)容。大點(diǎn)的公司會(huì)細(xì)化以上職責(zé)。所以一個(gè)好的UI設(shè)計(jì)師需要學(xué)習(xí)的知識(shí)是巨大的。

四、UI設(shè)計(jì)師工作流程是什么？ 1.需求分析階段

此階段，遵循3w原則（who目標(biāo)人群、where使用場(chǎng)景、why解決什么問(wèn)題），梳理產(chǎn)品需求，分析相關(guān)競(jìng)品，確定功能模塊。輸出：需求文檔。2.視覺(jué)概念設(shè)計(jì)階段

江西新華電腦學(xué)院

在確定產(chǎn)品需求后，交互設(shè)計(jì)尚未完成前，由GUI主導(dǎo)，根據(jù)需求文檔及競(jìng)品分析后作出的只關(guān)注產(chǎn)品視覺(jué)主要特征的設(shè)計(jì)工作。輸出：視覺(jué)概念方案2套備選。3.視覺(jué)詳細(xì)設(shè)計(jì)階段

通過(guò)視覺(jué)概念設(shè)計(jì)確定產(chǎn)品界面視覺(jué)效果，并根據(jù)交互設(shè)計(jì)確定產(chǎn)品每個(gè)界面具體的布局以及內(nèi)容后，便進(jìn)入到視覺(jué)界面詳細(xì)設(shè)計(jì)階段。此階段需要輸出所有典型界面的效果圖（高保真原型），控件的所有不同狀態(tài)效果圖。輸出：設(shè)計(jì)方案效果圖。4.設(shè)計(jì)評(píng)審階段

設(shè)計(jì)師在發(fā)起評(píng)審前需先在線下與其主管溝通并確認(rèn)參與評(píng)審作品的質(zhì)量，確保用于評(píng)審的作品無(wú)重大紕漏再發(fā)起評(píng)審。評(píng)審的意義在于獲得不同領(lǐng)域反饋，檢查設(shè)計(jì)是否存在偏離，是否存在對(duì)產(chǎn)品有害的部分，并誘發(fā)設(shè)計(jì)師潛力。輸出：演示文檔。5.標(biāo)注、切圖、命名規(guī)則

通過(guò)評(píng)審對(duì)視覺(jué)設(shè)計(jì)定版后，需要為開(kāi)發(fā)提供程序使用的圖像資源，開(kāi)發(fā)必需以此為依據(jù)完成頁(yè)面開(kāi)發(fā)。

輸出：切圖包，內(nèi)含圖片資源（注意命名規(guī)則）、界面原圖、界面標(biāo)注圖、規(guī)范文檔。6.視覺(jué)測(cè)試階段

將圖片資源及規(guī)范發(fā)給開(kāi)發(fā)后，設(shè)計(jì)師需要根據(jù)設(shè)計(jì)圖判斷開(kāi)發(fā)實(shí)現(xiàn)的界面是否符合設(shè)計(jì)方案，并在開(kāi)發(fā)工程師在界面構(gòu)建過(guò)程中遇到問(wèn)題時(shí)給予所需的解決方案。

輸出：新修改的圖片資源、新的規(guī)范、測(cè)試報(bào)告。7.開(kāi)發(fā)完成、投入使用

制作各平臺(tái)宣傳圖片資源，參與產(chǎn)品體驗(yàn)測(cè)試，搜集用戶意見(jiàn)，為產(chǎn)品迭代確定方向。

輸出：圖片資源、測(cè)試報(bào)告。

江西新華電腦學(xué)院