第一篇：UI設(shè)計思路

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

UI設(shè)計思路

UI測試用例設(shè)計方向[轉(zhuǎn)]

設(shè)計功能和界面測試用例

1.1 文本框、按鈕等控件測試

1.1.1 文本框的測試

如何對文本框進(jìn)行測試 a,輸入正常的字母或數(shù)字。b,輸入已存在的文件的名稱；

c,輸入超長字符。例如在“名稱”框中輸入超過允許邊界個數(shù)的字符，假設(shè)最多255個字符，嘗試輸入

256個字符，檢查程序能否正確處理；

d,輸入默認(rèn)值，空白，空格；

e,若只允許輸入字母，嘗試輸入數(shù)字；反之；嘗試輸入字母； f,利用復(fù)制，粘貼等操作強(qiáng)制輸入程序不允許的輸入數(shù)據(jù)； g,輸入特殊字符集，例如，NUL及n等；

h,輸入超過文本框長度的字符或文本，檢查所輸入的內(nèi)容是否正常顯示；

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

i,輸入不符合格式的數(shù)據(jù)，檢查程序是否正常校驗(yàn)，如，程序要求輸入年月日格式為yy/mm/dd，實(shí)際輸入yyyy/mm/dd，程序應(yīng)該給出錯誤提示

在測試過程中所用到的測試方法： 1,輸入非法數(shù)據(jù)； 2,輸入默認(rèn)值； 3,輸入特殊字符集； 4,輸入使緩沖區(qū)溢出的數(shù)據(jù)； 5,輸入相同的文件名；

--命令按鈕控件的測試

測試方法：

a,點(diǎn)擊按鈕正確響應(yīng)操作。如，單擊確定，正確執(zhí)行操作；單擊取消，退出窗口；

b,對非法的輸入或操作給出足夠的提示說明，如，輸入月工作天數(shù)為32時，單擊”確定“后系統(tǒng)應(yīng)提示:天數(shù)不能大于31；

c,對可能造成數(shù)據(jù)無法恢復(fù)的操作必須給出確認(rèn)信息，給用戶放棄選擇的機(jī)會；

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

--單選按鈕控件的測試

測試方法：

a,一組單選按鈕不能同時選中，只能選中一個。

b,逐一執(zhí)行每個單選按鈕的功能。分別選擇了“男”“女”后，保存到數(shù)據(jù)庫的數(shù)據(jù)應(yīng)該相應(yīng)的分別為“男”“女”；

c,一組執(zhí)行同一功能的單選按鈕在初始狀態(tài)時必須有一個被默認(rèn)選中，不能同時為空；

---up－down控件文本框的測試

測試方法：

a,直接輸入數(shù)字或用上下箭頭控制，如，在“數(shù)目”中直接輸入10，或者單擊向上的箭頭，使數(shù)目變?yōu)?0；

b,利用上下箭頭控制數(shù)字的自動循環(huán)，如，當(dāng)最多數(shù)字為253時，單擊向上箭頭，數(shù)目自動變?yōu)?；反之亦適用；

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

c,直接輸入超邊界值，系統(tǒng)應(yīng)該提示重新輸入；

d,輸入默認(rèn)值，空白。如，“插入”數(shù)目為默認(rèn)值，點(diǎn)擊“確定”；或，刪除默認(rèn)值，使內(nèi)容為空，單擊“確定”進(jìn)行測試； e,輸入字符。此時系統(tǒng)應(yīng)提示輸入有誤。

------組合列表框的測試

測試方法：

a,條目內(nèi)容正確，其詳細(xì)條目內(nèi)容可以根據(jù)需求說明確定； b,逐一執(zhí)行列表框中每個條目的功能； c,檢查能否向組合列表框輸入數(shù)據(jù)；

------復(fù)選框的測試

測試方法：

a,多個復(fù)選框可以被同時選中； b,多個復(fù)選框可以被部分選中；

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

c,多個復(fù)選框可以都不被選中； d,逐一執(zhí)行每個復(fù)選框的功能；

----------列表框控件的測試

測試方法：

a,條目內(nèi)容正確；同組合列表框類似，根據(jù)需求說明書確定列表的各項(xiàng)內(nèi)容正確，沒有丟失或錯誤； b,列表框的內(nèi)容較多時要使用滾動條；

c,列表框允許多選時，要分別檢查shift選中條目，按ctrl選中條目和直接用鼠標(biāo)選中多項(xiàng)條目的情況；

滾動條控件的測試

要注意一下幾點(diǎn)：

a,滾動條的長度根據(jù)顯示信息的長度或?qū)挾燃皶r變換，這樣有利于用戶了解顯示信息的位置和百分比，如，word中瀏覽100頁文檔，瀏覽到50頁時，滾動條位置應(yīng)處于中間；

b,拖動滾動條，檢查屏幕刷新情況，并查看是否有亂碼；

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

c,單擊滾動條； d,用滾輪控制滾動條； e,滾動條的上下按鈕。

各種控件在窗體中混和使用時的測試

a,控件間的相互作用；

b,tab鍵的順序，一般是從上到下，從左到右； c,熱鍵的使用，逐一測試； d,enter鍵和esc鍵的使用；

在測試中，應(yīng)遵循由簡入繁的原則，先進(jìn)行單個控件功能的測試，確保實(shí)現(xiàn)無誤后，再進(jìn)行多個控件的的功能組合的測試。

ps:密碼輸入框測試時要特別注意進(jìn)行字母大寫輸入的測試。

查找替換操作

案例演示:打開word中的“替換”對話框 測試本功能有通過測試和失敗測試兩種情況 通過測試: 1,輸入內(nèi)容直接查找,或查找全部

2,在組合框中尋找已經(jīng)查找過的內(nèi)容,再次查找并確認(rèn)文檔的內(nèi)容正

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

確,如,已經(jīng)查找過“測試用例”,再次進(jìn)入不用重新輸入查找內(nèi)容,直接在文檔中搜尋就可以.失敗測試: 1,輸入過長或過短的查詢字符串.如,假設(shè)查詢的字符串長度為1到255,那么輸入0,1,2,256,255和254進(jìn)行測試;2,輸入特殊字符集,如,在word中.^g代表圖片,^代表分欄符,可以輸入這類特殊字符測試;

替換測試大體相同.關(guān)于編輯操作窗口的功能測試的用例: 1,關(guān)閉查找替換窗口.不執(zhí)行任何操作,直接退出;2,附件和選項(xiàng)測試.假如,設(shè)定“精確搜尋”,“向后”搜索等附件選項(xiàng)等等來測試;3,控件間的相互作用.如,搜尋內(nèi)容為空時,按鈕“搜尋全部”,“搜尋”,“全部替換”,“替換”都為灰色.4,熱鍵, Tab鍵.回車鍵的使用.插入操作

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

1,插入文件 測試的情況 a,插入文件;b,插入圖像;c,在文檔中插入文檔本身;d,移除插入的源文件;e,更換插入的源文件的內(nèi)容;

2,鏈接文件 測試方法: a,插入鏈接文件;b,在文檔中鏈接文檔本身;c,移除插入的源文件;d,更換插入的源文件的內(nèi)容.3,插入對象 要測試的內(nèi)容

a,插入程序允許的對象,如,在word中插入excel工作表;b,修改所插入對象的內(nèi)容.插入的對象仍能正確顯示;c,卸載生成插入對象的程序,如,在word中插入excel工作表后卸載

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

excel,工作表仍正常使用.編輯操作

編輯操作包括剪切,復(fù)制,粘貼操作.測試剪切操作的方法

a,對文本,文本框,圖文框進(jìn)行剪切;b,剪切圖像 c,文本圖像混合剪切 復(fù)制操作方法與剪切類似.測試時,主要是對粘貼操作的測試,方法是: a,粘貼剪切的文本,文本框及圖文框;b,粘貼所剪切的圖像;c,剪切后,在不同的程序中粘貼

d,多次粘貼同一內(nèi)容,如,剪切后,在程序中連續(xù)粘貼3次;e,利用粘貼操作強(qiáng)制輸入程序所不允許輸入的數(shù)據(jù).精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

界面測試用例的設(shè)計方法 1,窗體

測試窗體的方法: a,窗體大小,大小要合適,控件布局合理;b,移動窗體.快速或慢速移動窗體,背景及窗體本身刷新必須正確;c,縮放窗體,窗體上的控件應(yīng)隨窗體的大小變化而變化;d,顯示分辨率.必須在不同的分辨率的情況下測試程序的顯示是否正常;進(jìn)行測試時還要注意狀態(tài)欄是否顯示正確;工具欄的圖標(biāo)執(zhí)行操作是否有效,是否與菜單懶中圖標(biāo)顯示一致;錯誤信息內(nèi)容是否正確,無錯別字,且明確等等;

2,控件 測試方法: a,窗體或控件的字體和大小要一致;b,注意全角,半角混合 c,無中英文混合.菜單

進(jìn)行測試時要注意

精心收集

精心編輯

精致閱讀

如需請下載！

演講稿 工作總結(jié) 調(diào)研報告 講話稿 事跡材料 心得體會 策劃方案

a,選擇菜單是否可以正常工作,并與實(shí)際執(zhí)行內(nèi)容一致;b,是否有錯別字: c,快捷鍵是否重復(fù);d,熱鍵是否重復(fù);

精心收集

精心編輯 精致閱讀 如需請下載！

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

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

執(zhí)筆：甄珍

審核：

時間： 2013-5-

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

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

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

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

二、職業(yè)分析

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

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

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

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

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

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

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

（一）設(shè)計理念

五、考核方式

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

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

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

UI設(shè)計流程

階段一：分析

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

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

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

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

段三：頁面制作：

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

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

階段四：驗(yàn)證

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

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

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

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

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

總結(jié)：

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

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

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

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

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

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

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

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

UI設(shè)計流程

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

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

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

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

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

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

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

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

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

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

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

一致性原則

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

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

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

元素外觀一致

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

交互行為一致

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

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

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

可用性原則

可理解

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

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

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

可達(dá)到

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

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

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

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

可控制

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

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

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

1、分析階段

需求分析、用戶場景模擬、競品分析（聆聽用戶心聲）。

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

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

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

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

2、設(shè)計階段

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

3、配合

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

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

4、驗(yàn)證

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

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

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

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

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

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

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

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

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

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

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

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

2.用戶研究與分析

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

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

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

4.原型設(shè)計

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

5.界面設(shè)計

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

6.界面輸出

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

7.完善工作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

元素外觀一致

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

交互行為一致

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

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

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

可理解

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

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

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

可達(dá)到

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2、了解UI交互模式

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

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

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

1、用戶需求分析

2、用戶交互場景分析

3、競爭產(chǎn)品分析

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

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

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

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

采用面向場景、面向事件驅(qū)動和面向?qū)ο蟮脑O(shè)計方法。

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

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

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

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

事件（交互事件和異常）動作

[階段三：開發(fā)] 通過：

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

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

1、功能性對照

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

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

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

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

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

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

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

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

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

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

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

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

二、UI到底是什么？

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

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

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

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

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

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

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

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

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

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

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

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

制作海報、商品圖、活動頁面等圖片資源； 提交到各大平臺的推廣圖。2.交互設(shè)計（ID）需求分析；

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

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

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

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

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

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

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

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

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

通過評審對視覺設(shè)計定版后，需要為開發(fā)提供程序使用的圖像資源，開發(fā)必需以此為依據(jù)完成頁面開發(fā)。

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

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

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

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

輸出：圖片資源、測試報告。

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