-
當(dāng)前位置:首頁 > 創(chuàng)意學(xué)院 > 空間設(shè)計 > 專題列表 > 正文
ui工作流程(ui的工作流程應(yīng)該怎么去講)
大家好!今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui工作流程的問題,以下是小編對此問題的歸納整理,讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè),服務(wù)客戶遍布全國,設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043,或微信:1454722008
本文目錄:
一、ui設(shè)計師的工作流程
UI設(shè)計師必備知識:大公司設(shè)計工作流程規(guī)范,啥也不懂進啥公司?
1、在設(shè)計之前,首先需要產(chǎn)品經(jīng)理確定好客戶或者老板的需求,沒有產(chǎn)品需求,就沒有互聯(lián)網(wǎng)開發(fā),沒有需求,我做產(chǎn)品也就沒有意義了。
比如說:我們設(shè)定一個需求。畢業(yè)生都需要找工作,我們需要找公司,但是沒有那么多時間一家家的去詢問要不要人,我們需要投簡歷,這個時候就需要網(wǎng)站,需要APP,像智聯(lián)、58等等熱門。
有需求,自然會有交易。這個時候產(chǎn)品經(jīng)理需要了解這個APP需要具備哪些功能,最好是能夠進行及時采訪,能夠切實地了解到真實需求:比如我找工作,需要公司的規(guī)模,是不是真實,薪資構(gòu)架等等,這些需求都需要儲存起來。
了解到真實需求,才有了我們的產(chǎn)品開發(fā)。
2、確定需求之后,產(chǎn)品經(jīng)理會做具體的說明,讓交互、UI、開發(fā)、測試明確產(chǎn)品需求,明確項目的具體細節(jié)。
這個階段里面是最關(guān)鍵的,涉及到需求與產(chǎn)品的對接。PRD文檔和線框原型圖一般情況都是在這個環(huán)節(jié)內(nèi)明確的。
當(dāng)然也會有特殊情況,比如某寶,他的流暢是交互明確需求——低保真原型——派PRD,應(yīng)該是這個流程,出現(xiàn)差錯,請輕噴。
這里面需要注意的是:PRD文檔,線框原型圖出來了之后,設(shè)計師才開工,不然也是反復(fù)修改。
3、設(shè)計組內(nèi)部會議、界面風(fēng)格確定,
這個時候需要確定一個設(shè)計負責(zé)人。設(shè)計負責(zé)人會給同事做具體的工作安排,線框圖標(biāo)、版式設(shè)計等都有具體的分配。
后面就開始出稿,稿子出了之后,需要確定那個風(fēng)格的效果更好。
判定結(jié)果的標(biāo)準(zhǔn)還是客戶的需求。
重要的事情說三遍:需求、需求、需求!
4、分工已經(jīng)明確,進行具體設(shè)計工作
5、標(biāo)注圖、效果圖、切圖
這個不需要多講,大家都明白。
這個步驟,產(chǎn)品經(jīng)理會進行把關(guān)。
6、開發(fā)完成,進行最后的測試
測試工程師會對開發(fā)出來的產(chǎn)品進行測試,看看有沒有疏漏,有沒有錯誤,當(dāng)測試和調(diào)試完成,上線,就完成了整個開發(fā)的流程。
二、UI設(shè)計的全工作流程是怎樣的?
作為一個專業(yè)UI設(shè)計師,不僅僅要了解整個產(chǎn)品在UI界面設(shè)計,交互設(shè)計中的工作流程,更需要了解整個產(chǎn)品從需求提出到產(chǎn)品上線的整個工作流程。
以下是互聯(lián)網(wǎng)產(chǎn)品各部門的工作分配及流程:
從圖中可以看到,一個互聯(lián)網(wǎng)產(chǎn)品從策劃到最后的上線營銷,都需要由不同的部門分擔(dān)其責(zé),而每個部門中,根據(jù)崗位的劃分,在細分到每個工種上來,所以一個互聯(lián)網(wǎng)產(chǎn)品的開發(fā)流程,并不是單個的人,或者個別的部門可以實現(xiàn)完成的,它是一個完整的團隊通力合作的產(chǎn)物。部門與部門,崗位與崗位相互協(xié)作配合,才會出色高效的完成項目。
一般互聯(lián)網(wǎng)公司會有幾個部門劃分:
1、產(chǎn)品部門(產(chǎn)品經(jīng)理、產(chǎn)品專員)
2、設(shè)計部門(GUI設(shè)計師、交互設(shè)計師、前端工程師)
3、研發(fā)部門(構(gòu)架工程師、程序開發(fā))
4、測試部門(測試專員)
5、市場部門(銷售、渠道、公關(guān)、品牌)
6、運營部門(客服、運維)
各部門的工作職責(zé)如下:
產(chǎn)品部門:負責(zé)產(chǎn)品調(diào)研,產(chǎn)品方案策劃,產(chǎn)品原型圖設(shè)計,和技術(shù)開發(fā)對接,后續(xù)可能和運營部門對接。
設(shè)計部門:負責(zé)產(chǎn)品視覺設(shè)計,交互設(shè)計,前端布局。有一些公司會把前端這一塊劃分到開發(fā)部門,理由是前端的工作和程序開發(fā)一樣,都是碼代碼,設(shè)計部門就是單純的只管視覺設(shè)計方面。但是這種說法其實不太正確,前端的代碼實現(xiàn)和后臺的程序開發(fā),雖然都是碼代碼,但是運用的技術(shù)是不一樣的,實現(xiàn)的功能和效果也是不相同的,所以前端工程師劃分到設(shè)計部門會更合理一些。
研發(fā)部門:產(chǎn)品構(gòu)架設(shè)計,數(shù)據(jù)庫設(shè)計,前后臺編碼設(shè)計,后期的運維,網(wǎng)絡(luò)安全。
測試部門:測試程序中的bug,編寫測試計劃、測試用例及測試報告等文檔,優(yōu)化流程。
市場部門:產(chǎn)品企劃策略,促銷活動的策劃及組織,品牌規(guī)劃和品牌的形象建設(shè),市場廣告推廣活動和公關(guān)活動。
運營部門: SEO/SEM優(yōu)化推廣,平臺活動策劃(線上線下),廣告投放,客戶關(guān)系管理,數(shù)據(jù)分析。
設(shè)計部門的崗位劃分通常有UI設(shè)計師、交互設(shè)計師、前端工程師,小型公司崗位劃分不完善,會把交互設(shè)計師的工作(交互流程、交互線框、交互動效)交由產(chǎn)品人員來完成,以下梳理出UI設(shè)計師參與和需完成的流程:
一、需求梳理、分析
發(fā)生在產(chǎn)品開發(fā)前,以APP產(chǎn)品為例,會對市場和用戶進行調(diào)研分析:市場定位(用戶定位、產(chǎn)品定位、技術(shù)定位),市場需求分析(目標(biāo)客戶群分析、競爭對手分析)。在前期的產(chǎn)品需求分析會議中,UI設(shè)計、技術(shù)工程師都會參與。此過程UI設(shè)計師了解清晰的用戶定位,產(chǎn)品定位,競爭對手分析,為后期的素材收集和風(fēng)格把控做準(zhǔn)備。
在這個過程中會根據(jù)提煉的真實用戶需求來確定產(chǎn)品需求,產(chǎn)品經(jīng)理將根據(jù)溝通中的相關(guān)資料的word、ppt、jpg等等東西翻譯成邏輯語言,最簡單的就是產(chǎn)出一張產(chǎn)品功能腦圖或者一份功能列表。
產(chǎn)品功能腦圖:
產(chǎn)品功能列表:
大家開始討論用戶體驗流程,在白板上邊畫流程邊添加粗略的UI元素。之后產(chǎn)品經(jīng)理會在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、UI設(shè)計師、包括技術(shù)工程師會一同作大量的討論,而且主要討論的是流程和主要功能,因此手畫故事版最快最方便并易于修改的。此環(huán)節(jié)要敲定userflow,用戶流程及其中的關(guān)鍵步驟,每一步驟都是一個主要界面。之后產(chǎn)品經(jīng)理繪制紙質(zhì)版低保真交互原型圖(可借用專業(yè)的模板本和工具)
二、關(guān)鍵界面線框圖(可不帶交互功能)
初步產(chǎn)品功能需求梳理清楚之后,產(chǎn)品經(jīng)理持續(xù)跟進,反復(fù)溝通,在確定的用戶流程中,選出幾個關(guān)鍵的,有代表性的步驟,做1:1細化線框圖。此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局,以及全局的布局排版風(fēng)格。
三、關(guān)鍵界面視覺設(shè)計
此環(huán)節(jié)UI設(shè)計師會做關(guān)鍵界面的整體視覺設(shè)計,嘗試不同風(fēng)格、顏色的搭配,UI元素的運用,最終確定產(chǎn)品的視覺設(shè)計風(fēng)格。
四、 全部界面線框圖(帶交互功能)
產(chǎn)品經(jīng)理完成1:1帶交互和流程的全部界面線框圖設(shè)計并確認。
界面線框圖(為交互功能添加釋義和說明。)
線框流程圖
五、 全部界面視覺設(shè)計
UI設(shè)計師輸出全部界面的視覺設(shè)計圖,并確認。
六、 界面標(biāo)注、切圖
1、在確認全部界面視覺稿以后,首先對每個界面進行標(biāo)注,標(biāo)注圖移交前端工程師。
標(biāo)注圖(像素大廚、藍湖等軟件)
2、界面切圖,移交前端工程師
切圖文件夾
切圖文件
至此,UI的工作流程才算完成,但是現(xiàn)實項目中,很多環(huán)節(jié)是一個交替迭代的過程,需要不停地修改和優(yōu)化,包括整個流程進入到開發(fā)以后,也會需要UI設(shè)計師協(xié)同調(diào)整,所以UI設(shè)計師的工作,不單單是只完成單純的界面視覺設(shè)計,前面包括用戶定位,線框繪制,流程梳理,交互實現(xiàn),后面包括前端布局,很多環(huán)節(jié),UI設(shè)計師都必須參與進來,只有多角度地了解項目,了解各崗位的工作流程,才能做出符合市場需求,符合用戶需求的產(chǎn)品。
三、UI設(shè)計師的工作流程
總體上一個合格的UI設(shè)計師的基本工作流程分為需求階段、分析設(shè)計階段、調(diào)研驗證階段、方案改進階段、用戶驗證反饋階段五大基本流程。 軟件產(chǎn)品依然屬于工業(yè)產(chǎn)品的范疇。依然離不開3W的考慮(Who、where、why)也就是使用者,使用環(huán)境,使用方式的需求分析。所以在設(shè)計一個軟件產(chǎn)品之前我們應(yīng)該明確什么人用(用戶的年齡、性別、愛好、收入、教育程度等)。什么地方用(在辦公室/家庭/廠房車間/公共場所)。如何用(鼠標(biāo)鍵盤/ 遙控器/觸摸屏)。上面的任何一個元素改變結(jié)果都會有相應(yīng)的改變。
除此之外在需求階段同類性質(zhì)的軟件也是我們必須了解的。同類產(chǎn)品比我們提前問世,我們要比他作的更好才有存在的價值。那么單純的從界面美學(xué)考慮說哪個好哪個不好是沒有一個很客觀的評價標(biāo)準(zhǔn)的。我們只能說哪個更合適,更合適于我們的最終用戶的就是最好的。如何判定最合適于用戶呢,后面我會介紹用戶調(diào)研。 幾套風(fēng)格必須保證在同等的設(shè)計制作水平上,不能明顯看出差異,這樣才能得到用戶客觀的反饋。
測試階段開始前我們應(yīng)該對測試的具體細節(jié)進行清楚的分析描述。
例如:
數(shù)據(jù)收集方式:廳堂測試/模擬家居/辦公室。
測試時間:X年X月X日X日。
測試區(qū)域:北京、廣州、天津。
測試對象:某軟件界定使用用戶。
主要特征為:
·對電腦的硬件配置以及相關(guān)的性能指標(biāo)比較了解,電腦應(yīng)用水平較高;
·電腦使用經(jīng)歷一年以上;
·家庭購買電腦時品牌和機型的主要決策者;
·年齡:X-X歲;
·年齡在X歲以上的被訪者文化程度為大專及以上;
·個人月收入X以上或家庭月收入X元及以上;
·樣品;
·五套軟件界面;
·樣本量:X個,實際完成X個。
調(diào)研階段需要從以下幾個問題出發(fā): ·用戶對各套方案的第一印象; ·用戶對各套方案的綜合印象; ·用戶對各套方案的單獨評價; ·選出最喜歡的; ·選出其次喜歡的; ·對各方案的色彩,文字,圖形等分別打分; ·結(jié)論出來以后請所有用戶說出最受歡迎方案的優(yōu)缺點。 所有這些都需要用圖形表達出來,直觀科學(xué)。 改正以后的方案,我們可以將他推向市場。但是設(shè)計并沒有結(jié)束。我們還需要用戶反饋,好的設(shè)計師應(yīng)該在產(chǎn)品上市以后去站柜臺。零距離接觸最終用戶,看看用戶真正使用時的感想。為以后的升級版本積累經(jīng)驗資料。
四、UI 設(shè)計的整個工作流程是怎樣的
1. 熟悉行業(yè)(熟悉您的軟件所涉及的行業(yè),以便制作出適合行業(yè)特征的界面風(fēng)格)
2. 了解軟件(了解您軟件的工程進度,做出針對您進度的工作計劃)。
3. 與軟件開發(fā)工程師和市場人員討論界面風(fēng)格(廣泛聽取研發(fā)和市場人員的意見,做出最適合市12.場的軟件)。
4. 人機分析(對您的軟件進行人機分析,增強您軟件的易用性)。
5. 做方案(做出設(shè)計方案,并明確細節(jié)思想)。
6. 審定方案(與技術(shù)和市場人員一起審定方案,并聽取修改意見)。
7. 修改--審定(將有幾次重復(fù))
8. 細化、制作界面(開始制作軟件界面)。
9. 與軟件開發(fā)工程師合作把界面加入到程序中。
10.細部修改,完成。
11.進行軟件包裝盒、光盤盤面、盤套等的設(shè)計工作。
12.后期跟蹤服務(wù)(在完成項目后,對您的軟件進行跟蹤服務(wù),即對您軟件從發(fā)布到推出新版本之 12.間的小規(guī)模修改進行調(diào)整,包括對幫助協(xié)調(diào)文件的制定、DEMO演示等全訪問服務(wù))。
以上就是關(guān)于ui工作流程相關(guān)問題的回答。希望能幫到你,如有更多相關(guān)問題,您也可以聯(lián)系我們的客服進行咨詢,客服也會為您講解更多精彩的知識和內(nèi)容。
推薦閱讀:
揚州特色景觀設(shè)計理念(揚州特色景觀設(shè)計理念有哪些)