![界面設(shè)計(UI)軟件ui設(shè)計22-第二章課件_第1頁](http://file4.renrendoc.com/view/3f161de30af735676b9a578d83219d5d/3f161de30af735676b9a578d83219d5d1.gif)
![界面設(shè)計(UI)軟件ui設(shè)計22-第二章課件_第2頁](http://file4.renrendoc.com/view/3f161de30af735676b9a578d83219d5d/3f161de30af735676b9a578d83219d5d2.gif)
![界面設(shè)計(UI)軟件ui設(shè)計22-第二章課件_第3頁](http://file4.renrendoc.com/view/3f161de30af735676b9a578d83219d5d/3f161de30af735676b9a578d83219d5d3.gif)
![界面設(shè)計(UI)軟件ui設(shè)計22-第二章課件_第4頁](http://file4.renrendoc.com/view/3f161de30af735676b9a578d83219d5d/3f161de30af735676b9a578d83219d5d4.gif)
![界面設(shè)計(UI)軟件ui設(shè)計22-第二章課件_第5頁](http://file4.renrendoc.com/view/3f161de30af735676b9a578d83219d5d/3f161de30af735676b9a578d83219d5d5.gif)
版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
UI即UserInterface(用戶界面)的簡稱。UI設(shè)計則是指對軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。什么是UI設(shè)計好的UI設(shè)計不僅是讓軟件變得有個性有品味,還要讓軟件的操作變得舒適、簡單、自由,充分體現(xiàn)軟件的定位和特點(diǎn)。UI設(shè)計從工作內(nèi)容上分3個方向研究界面;研究人與界面的關(guān)系;研究人。研究界面圖形設(shè)計師GraphicUIdesigner
軟件產(chǎn)品的產(chǎn)品外形設(shè)計師,這些設(shè)計師大多是美術(shù)院校畢業(yè)的,其中大部分是有美術(shù)設(shè)計教育背景,例如工業(yè)外形設(shè)計,裝潢設(shè)計,信息多媒體設(shè)計等。
研究人與界面的關(guān)系交互設(shè)計師,interactiondesigner
在圖形界面產(chǎn)生之前,長期以來UI設(shè)計師就是指交互設(shè)計師。交互設(shè)計師的工作內(nèi)容就是設(shè)計軟件的操作流程,樹狀結(jié)構(gòu),軟件的結(jié)構(gòu)與操作規(guī)范(spec)等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計,并且確立交互模型,交互規(guī)范。交互設(shè)計師一般都是軟件工程師背景居多。
研究人用戶測試/研究工程師
Userexperienceengineer
任何的產(chǎn)品為了保證質(zhì)量都需要測試,軟件的編碼需要測試,自然UI設(shè)計也需要被測試。這個測試和編碼沒有任何關(guān)系,主要是測試交互設(shè)計的合理性以及圖形設(shè)計的美觀性。測試方法一般都是采用焦點(diǎn)小組,用目標(biāo)用戶問卷的形式來衡量UI設(shè)計的合理性。這個職位很重要,如果沒有這個職位,UI設(shè)計的好壞只能憑借設(shè)計師的經(jīng)驗(yàn)或者領(lǐng)導(dǎo)的審美來評判,這樣就會給企業(yè)帶來嚴(yán)重的風(fēng)險性。用戶研究工程師一般是心理學(xué)人文學(xué)背景比較合適。
ui設(shè)計國內(nèi)現(xiàn)狀目前在國內(nèi)UI還是一個相對陌生的詞,在國內(nèi)對UI的理解還停留在美術(shù)設(shè)計方面,認(rèn)為UI的工作只是描邊畫線,缺乏對用戶交互的重要性的理解;另一方面在軟件開發(fā)過程中還存在重技術(shù)而不重應(yīng)用的現(xiàn)象。許多商家認(rèn)為軟件產(chǎn)品的核心是技術(shù),而UI僅僅是次要的輔助,這點(diǎn)在人員的比例與待遇上可以表現(xiàn)出來。
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è)人才稀缺,人才資源爭奪激烈。瑭錦Tanjurd表示UI就業(yè)市場供不應(yīng)求。我國UI市場尚在萌芽階段,人才缺口巨大,目前,中國市場上的手機(jī)、軟件、網(wǎng)站等產(chǎn)品,同質(zhì)化程度非常高,過去企業(yè)在設(shè)計產(chǎn)品的時候,主要是在功能、質(zhì)量或者產(chǎn)品外觀上和競爭對手有所區(qū)別,而現(xiàn)在隨著技術(shù)的進(jìn)步和市場的發(fā)展,越來越多的企業(yè)意識到用戶體驗(yàn)的重要性了,而這種用戶體驗(yàn)的提升則主要依賴于UID的勞動。
移動UI設(shè)計的五條原則以用戶為中心,考慮產(chǎn)品的使用環(huán)境用戶總是按照他們自己的方法理解和使用移動端,所以從用戶的觀點(diǎn)考慮,想用戶所想,做用戶所做成了設(shè)計師們的設(shè)計考量標(biāo)準(zhǔn)之一。第二:合理的用戶指引由于手機(jī)界面本身的承載能力有限,加上每一款產(chǎn)品功能都會有不同程度的更新和完善,
第三:扁平化設(shè)計之不一定扁平個人而言,采用什么樣的設(shè)計風(fēng)格,是由產(chǎn)品本身的目標(biāo)以及要解決的問題來決定的,美與丑、操作難易并不完全決定了一個產(chǎn)品的成敗。有一個非常的經(jīng)典案例是趕集網(wǎng)產(chǎn)品總監(jiān)布棉老師在一次講課提到的美國最火的分類網(wǎng)站Craigslist,如果從扁平化的角度來看,真的是丑爆了。該網(wǎng)站上沒有圖片(最新版加上了一個地圖),只有密密麻麻的文字,但雖然看上去頗為乏味,可是卻是美國人最喜歡的網(wǎng)站之一。
第四:動態(tài)數(shù)據(jù)可視化
數(shù)據(jù)可視化設(shè)計是將枯燥繁瑣的列表和文字轉(zhuǎn)換為直觀的餅圖、扇形圖、折線型、柱狀圖等豐富直觀的設(shè)計元素,提高用戶體驗(yàn)。而且現(xiàn)今數(shù)據(jù)可視化不只是靜態(tài)展現(xiàn)數(shù)據(jù),用戶希望通過互動及時獲取數(shù)據(jù)流,若以動態(tài)效果來呈現(xiàn),能多維度呈現(xiàn)給用戶實(shí)時信息,同時能與用戶形成互動,提高數(shù)據(jù)表現(xiàn)的趣味性。動態(tài)數(shù)據(jù)可視化將更加強(qiáng)調(diào)數(shù)據(jù)轉(zhuǎn)譯實(shí)時更新的圖形,以及動態(tài)的圖形化表達(dá)。
第五:多彩色風(fēng)格的設(shè)計
多彩撞色更多的表現(xiàn)于多種純色塊的使用,就是很簡單的純顏色,只需要注意多彩配色的方式,就能得到很好的視覺效果。多彩色拼接的設(shè)計風(fēng)格,一屏式的頁面排版布局,總體來說是時尚大氣簡潔的設(shè)計.2023/6/916UE/UI設(shè)計流程產(chǎn)品分析產(chǎn)品定位
從軟件提供者的角度分析產(chǎn)品推出的意義和重點(diǎn)關(guān)注的方面,實(shí)際考量、豐滿決策層的idea,明確列出產(chǎn)品定位,通過討論修繕取得決策層的認(rèn)可;用戶分析
結(jié)合競爭產(chǎn)品的分析資料,采用定性分析的方法,獲得對產(chǎn)品目標(biāo)用戶在概念層面的認(rèn)識;產(chǎn)品概述
以軟件提供的身份,以最簡短的文字,向用戶介紹產(chǎn)品,突出產(chǎn)品對用戶的價值。避免功能點(diǎn)的簡單羅列,而應(yīng)該在歸納總結(jié)的基礎(chǔ)上突出重點(diǎn);功能需求規(guī)格整理
在歸納關(guān)鍵功能的基礎(chǔ)上,結(jié)合競爭產(chǎn)品規(guī)格整理的領(lǐng)域認(rèn)識,從邏輯上梳理需求規(guī)格列表,重在邏輯關(guān)系清楚、組織和層級關(guān)系清晰。劃定項(xiàng)目(設(shè)計和研發(fā))范圍;產(chǎn)出物:
用戶分析文檔和產(chǎn)品概述、功能規(guī)格列表
產(chǎn)品定位用戶分析產(chǎn)品概述功能需求規(guī)格整理產(chǎn)出物第一次Check是/否通過?2023/6/917UE/UI設(shè)計流程第三階段:交互設(shè)計(功能結(jié)構(gòu)和交互流程設(shè)計)產(chǎn)品概念模型分析
從產(chǎn)品功能邏輯入手,結(jié)合對常見軟件的經(jīng)驗(yàn)積累和競爭產(chǎn)品的認(rèn)識,加上對用戶的理解,為產(chǎn)品設(shè)計一個盡量接近用戶對產(chǎn)品運(yùn)行方式理解的概念模型,成為產(chǎn)品設(shè)計的基礎(chǔ)框架;功能結(jié)構(gòu)圖
在產(chǎn)品概念模型的基礎(chǔ)上豐富交互組件,并理順交互組件之間的結(jié)構(gòu)關(guān)系;使用場景分析
模擬典型用戶執(zhí)行關(guān)鍵功能達(dá)到其目標(biāo)的使用場景;交互流程分析
模擬在上述概念模型和功能結(jié)構(gòu)決定的產(chǎn)品框架之中,支持使用場景的關(guān)鍵操作過程(即鼠標(biāo)點(diǎn)擊步驟和屏幕引導(dǎo)路徑);產(chǎn)出物:
產(chǎn)品設(shè)計文檔的交互設(shè)計部分概念模型分析功能結(jié)構(gòu)圖使用場景分析交互流程分析產(chǎn)出物第一次Check是/否通過?2023/6/918UE/UI設(shè)計流程第四階段:原型設(shè)計(信息架構(gòu)和界面原型設(shè)計)信息架構(gòu)和界面原型設(shè)計
設(shè)計產(chǎn)品界面中應(yīng)該包含的控件數(shù)量和類型、控件之間的邏輯和組織關(guān)系,以支持用戶對控件或控件組所代表的功能的理解,對用戶操作的明確引導(dǎo);所有界面設(shè)計成為一套完整的可模擬的產(chǎn)品原型;設(shè)計要點(diǎn)說明
對界面設(shè)計的重點(diǎn)添加說明,幫助涉眾對設(shè)計的理解;
產(chǎn)出物:
產(chǎn)品設(shè)計文檔的原型設(shè)計部分信息架構(gòu)和界面原型要點(diǎn)說明產(chǎn)出物第一次Check是/否通過?2023/6/919UE/UI設(shè)計流程第五階段:詳細(xì)設(shè)計(詳細(xì)設(shè)計和偽代碼編寫)詳細(xì)設(shè)計
完善設(shè)計細(xì)節(jié)、交互文本和信息設(shè)計(Messagebox);設(shè)計和邏輯說明
對界面控件/控件組/窗口的屬性和行為進(jìn)行標(biāo)準(zhǔn)化定義,梳理完整的交互邏輯,用狀態(tài)遷移圖或偽代碼形式表示;產(chǎn)出物:產(chǎn)品設(shè)計文檔的詳細(xì)設(shè)計部分
第六階段:設(shè)計維護(hù)(研發(fā)跟蹤和設(shè)計維護(hù))語言文檔整理
設(shè)計通過評審之后,把產(chǎn)品中所有的交互文本整理成excel文檔,預(yù)備研發(fā)工作;研發(fā)跟蹤維護(hù)
進(jìn)入研發(fā)階段后負(fù)責(zé)為研發(fā)工程師解釋設(shè)計方案、問題修改、文檔完善、Bug跟蹤等;
產(chǎn)出物:
產(chǎn)品語言文檔,設(shè)計調(diào)整維護(hù)詳細(xì)設(shè)計設(shè)計和邏輯說明產(chǎn)出物第四次Check是/否通過?完成設(shè)計維護(hù)進(jìn)入設(shè)計維護(hù)End2023/6/920UE/UI設(shè)計流程第一階段:基礎(chǔ)調(diào)研競爭產(chǎn)品分析
尋找市場上的競爭產(chǎn)品,挑選3-5款進(jìn)行解剖分析。整理競爭產(chǎn)品的功能規(guī)格;并分析規(guī)格代表的需求,需求背后的用戶和用戶目標(biāo);分析競爭產(chǎn)品的功能結(jié)構(gòu)和交互設(shè)計,從產(chǎn)品設(shè)計的角度解釋其優(yōu)點(diǎn)、缺點(diǎn)及其原因,成為我們產(chǎn)品設(shè)計的第一手參考資料。領(lǐng)域調(diào)研
結(jié)合上述分析基礎(chǔ)和資料,縱觀領(lǐng)域競爭格局、市場狀況,利用網(wǎng)絡(luò)論壇、關(guān)鍵字搜索等手段獲得更多用戶反饋、觀點(diǎn)、前瞻性需求。產(chǎn)出物:
相應(yīng)的對比分析文檔和領(lǐng)域調(diào)研報告競爭產(chǎn)品分析領(lǐng)域調(diào)研產(chǎn)出物新產(chǎn)品開發(fā)任務(wù)2023/6/921UE/UI設(shè)計流程需求功能定義交互設(shè)計視覺設(shè)計DEMOUI設(shè)計(交互/視覺/編碼)實(shí)現(xiàn)PMORTEAMLEADER軟件工程師2023/6/922UE/UI設(shè)計流程交互設(shè)計視覺設(shè)計CSS/HTML編碼生成產(chǎn)品原型(線框圖)生成產(chǎn)品模型(效果圖)生成產(chǎn)品DEMO(效果圖)實(shí)現(xiàn)產(chǎn)品(最后階段)2023/6/923UE/UI設(shè)計流程一、生成產(chǎn)品原型Prototype
(線框圖)原型就是用來讓人改的。它存在的價值就體現(xiàn)在被修改了幾次,被更新了幾次,以及它的下一步被少改了幾次。2023/6/924UE/UI設(shè)計流程二、生成產(chǎn)品模型Mock-up
(效果圖)在原型被大家接受之后,就該關(guān)心產(chǎn)品長得好不好看了。我們以“模型”這個詞來統(tǒng)稱該步驟的交付物。和原型相比,它關(guān)注于產(chǎn)品的視覺設(shè)計,包括色彩、風(fēng)格、圖標(biāo)、插圖等等。2023/6/925UE/UI設(shè)計流程三、生成HTML/CSS頁面Demo就是按照原型和模型用HTML(XHTML)/CSS/JavaScript等等前端技術(shù)實(shí)現(xiàn)出來,以便后端的開發(fā)工程師可以接手編碼。到此UI部分基本完成,不知道大家對此流程有什么看法。不足之外還請大家糾正。一起討論,把UI工作流程做好。當(dāng)然,如有條件,
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2024年01月江蘇2024年南京銀行江北新區(qū)分行長期社會招考筆試歷年參考題庫附帶答案詳解
- 不退款 合同范例
- 以工代賑設(shè)備采購合同范例
- 公司多人股東合同范例
- 制作玻璃房子合同范例
- 2024年01月廣東/江西2024年平安銀行財務(wù)審計統(tǒng)計類社會招考筆試歷年參考題庫附帶答案詳解
- 債務(wù)結(jié)清合同范例
- 公司期權(quán)回購合同范本
- 個人合伙經(jīng)營合同范例
- 買車贈品合同范本
- 改革開放前后家鄉(xiāng)的變化教學(xué)課件
- 一年級的成長歷程
- 2024年南京鐵道職業(yè)技術(shù)學(xué)院高職單招(英語/數(shù)學(xué)/語文)筆試歷年參考題庫含答案解析
- 正月十五元宵節(jié)介紹課件
- 病毒性肺炎疾病演示課件
- 中考英語語法填空專項(xiàng)練習(xí)附答案(已排版-可直接打印)
- 口腔醫(yī)學(xué)中的人工智能應(yīng)用培訓(xùn)課件
- 軟星酒店網(wǎng)絡(luò)規(guī)劃與設(shè)計
- 自然辯證法概論(新)課件
- 基層醫(yī)療機(jī)構(gòu)基本情況調(diào)查報告
- 六西格瑪(6Sigma)詳解及實(shí)際案例分析
評論
0/150
提交評論