HOME 首頁
SERVICE 服務(wù)產(chǎn)品
XINMEITI 新媒體代運(yùn)營(yíng)
CASE 服務(wù)案例
NEWS 熱點(diǎn)資訊
ABOUT 關(guān)于我們
CONTACT 聯(lián)系我們
創(chuàng)意嶺
讓品牌有溫度、有情感
專注品牌策劃15年

    ui設(shè)計(jì)的工作流程(ui設(shè)計(jì)的工作流程是進(jìn)行視覺設(shè)計(jì)和切圖與標(biāo)注)

    發(fā)布時(shí)間:2023-04-15 17:23:07     稿源: 創(chuàng)意嶺    閱讀: 135        

    大家好!今天讓小編來大家介紹下關(guān)于ui設(shè)計(jì)的工作流程的問題,以下是小編對(duì)此問題的歸納整理,讓我們一起來看看吧。

    創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè),服務(wù)客戶遍布全球各地,相關(guān)業(yè)務(wù)請(qǐng)撥打電話:175-8598-2043,或添加微信:1454722008

    文章目錄列表:

    ui設(shè)計(jì)的工作流程(ui設(shè)計(jì)的工作流程是進(jìn)行視覺設(shè)計(jì)和切圖與標(biāo)注)

    一、UI設(shè)計(jì)師的工作流程是什么?

    對(duì)接需求:開產(chǎn)品需求會(huì)議,了解產(chǎn)品的需求,與產(chǎn)品經(jīng)理了解產(chǎn)品的目標(biāo)用戶,框架原型,對(duì)于不理解的地方及時(shí)溝通。做到心中對(duì)產(chǎn)品的高度認(rèn)知。

    原型分析:分析產(chǎn)品框架里面的功能結(jié)構(gòu),梳理清楚功能的層級(jí)關(guān)系,頁面之間的流程以及邏輯關(guān)系。

    界面視覺設(shè)計(jì):當(dāng)對(duì)產(chǎn)品框架全部理解了以后,就可以開始動(dòng)手做設(shè)計(jì)稿了,做設(shè)計(jì)稿的時(shí)候需要注意的就是我們需要出兩種版本的設(shè)計(jì)稿,一種給蘋果用戶,一種給安卓用戶(除非公司產(chǎn)品只做某一種版本)。

    標(biāo)注切圖:將設(shè)計(jì)稿進(jìn)行標(biāo)注,同樣標(biāo)注兩個(gè)版本,蘋果界面的一個(gè),安卓界面的一個(gè),標(biāo)注完成以后,我們需要做的就是切圖了。切圖這里大家需要注意的就是要切所有設(shè)備需要的圖。比如:蘋果設(shè)備目前流行的是兩種圖,一種是@2x,一種是@3x。那么設(shè)計(jì)師在切圖的時(shí)候,就需要把這兩種圖都切出來。

    二、ui設(shè)計(jì)師的工作流程

    UI設(shè)計(jì)師必備知識(shí):大公司設(shè)計(jì)工作流程規(guī)范,啥也不懂進(jìn)啥公司?1、在設(shè)計(jì)之前,首先需要產(chǎn)品經(jīng)理確定好客戶或者老板的需求,沒有產(chǎn)品需求,就沒有互聯(lián)網(wǎng)開發(fā),沒有需求,我做產(chǎn)品也就沒有意義了。比如說:我們?cè)O(shè)定一個(gè)需求。畢業(yè)生都需要找工作,我們需要找公司,但是沒有那么多時(shí)間一家家的去詢問要不要人,我們需要投簡(jiǎn)歷,這個(gè)時(shí)候就需要網(wǎng)站,需要APP,像智聯(lián)、58等等熱門。有需求,自然會(huì)有交易。這個(gè)時(shí)候產(chǎn)品經(jīng)理需要了解這個(gè)APP需要具備哪些功能,最好是能夠進(jìn)行及時(shí)采訪,能夠切實(shí)地了解到真實(shí)需求:比如我找工作,需要公司的規(guī)模,是不是真實(shí),薪資構(gòu)架等等,這些需求都需要儲(chǔ)存起來。了解到真實(shí)需求,才有了我們的產(chǎn)品開發(fā)。2、確定需求之后,產(chǎn)品經(jīng)理會(huì)做具體的說明,讓交互、UI、開發(fā)、測(cè)試明確產(chǎn)品需求,明確項(xiàng)目的具體細(xì)節(jié)。這個(gè)階段里面是最關(guān)鍵的,涉及到需求與產(chǎn)品的對(duì)接。PRD文檔和線框原型圖一般情況都是在這個(gè)環(huán)節(jié)內(nèi)明確的。當(dāng)然也會(huì)有特殊情況,比如某寶,他的流暢是交互明確需求——低保真原型——派PRD,應(yīng)該是這個(gè)流程,出現(xiàn)差錯(cuò),請(qǐng)輕噴。這里面需要注意的是:PRD文檔,線框原型圖出來了之后,設(shè)計(jì)師才開工,不然也是反復(fù)修改。3、設(shè)計(jì)組內(nèi)部會(huì)議、界面風(fēng)格確定,這個(gè)時(shí)候需要確定一個(gè)設(shè)計(jì)負(fù)責(zé)人。設(shè)計(jì)負(fù)責(zé)人會(huì)給同事做具體的工作安排,線框圖標(biāo)、版式設(shè)計(jì)等都有具體的分配。后面就開始出稿,稿子出了之后,需要確定那個(gè)風(fēng)格的效果更好。判定結(jié)果的標(biāo)準(zhǔn)還是客戶的需求。重要的事情說三遍:需求、需求、需求!4、分工已經(jīng)明確,進(jìn)行具體設(shè)計(jì)工作5、標(biāo)注圖、效果圖、切圖這個(gè)不需要多講,大家都明白。這個(gè)步驟,產(chǎn)品經(jīng)理會(huì)進(jìn)行把關(guān)。6、開發(fā)完成,進(jìn)行最后的測(cè)試測(cè)試工程師會(huì)對(duì)開發(fā)出來的產(chǎn)品進(jìn)行測(cè)試,看看有沒有疏漏,有沒有錯(cuò)誤,當(dāng)測(cè)試和調(diào)試完成,上線,就完成了整個(gè)開發(fā)的流程。

    三、UI設(shè)計(jì)的工作流程是怎樣的?

    第一步:交互流程設(shè)計(jì)

    APP的交互流程設(shè)計(jì),簡(jiǎn)單來說就是構(gòu)造框架,像造房子一樣,有了清楚的平面圖紙才可以增磚添瓦,設(shè)計(jì)交互流程時(shí)應(yīng)該對(duì)應(yīng)用的功能需求有清晰的把握。

    第二步:風(fēng)格定位

    比如說圖片分享類應(yīng)用圖片是最重要的視覺元素,應(yīng)用的設(shè)計(jì)風(fēng)格應(yīng)當(dāng)符合視覺流程,table需要引導(dǎo)用戶操作。

    第三步:功能icon設(shè)計(jì)

    功能圖標(biāo)即在你的應(yīng)用中,充當(dāng)表達(dá)某一操作或功能示意的圖形,功能圖標(biāo)設(shè)計(jì)應(yīng)極可能形象,簡(jiǎn)潔,以準(zhǔn)確表達(dá)其代表的功能。

    第四步:界面視覺效果整體優(yōu)化

    選用圖片的時(shí)候,應(yīng)該盡量按照應(yīng)用的風(fēng)格選取,比如這APP主打是圖片分享,那么可以選取視覺靚麗,有沖擊力的圖片添加分享。

    第五步:應(yīng)用icon設(shè)計(jì)

    對(duì)這款A(yù)PP進(jìn)行最終的icon設(shè)計(jì),能夠最優(yōu)化的,最靚麗的代表這款A(yù)PP的特色,品牌等形象。

    第六步:完稿交接軟件工程師

    我們做移動(dòng)界面設(shè)計(jì),做的是各個(gè)頁面的形象,具體功能實(shí)現(xiàn)是需要與軟件工程師溝通的,在能夠完成軟件開發(fā)的情況下,進(jìn)行一步步的界面設(shè)計(jì),最大化增加用戶體驗(yàn),吸引用戶,最終完美的完成這份設(shè)計(jì)。

    以上就是小編關(guān)于UI設(shè)計(jì)流程的相關(guān)內(nèi)容,總體來說是針對(duì)移動(dòng)端APP應(yīng)用做的界面設(shè)計(jì),但是很多人不清楚移動(dòng)APP界面設(shè)計(jì)師的工作流程是怎樣的。

    四、UI設(shè)計(jì)的全工作流程是怎樣的?

    作為一個(gè)專業(yè)UI設(shè)計(jì)師,不僅僅要了解整個(gè)產(chǎn)品在UI界面設(shè)計(jì),交互設(shè)計(jì)中的工作流程,更需要了解整個(gè)產(chǎn)品從需求提出到產(chǎn)品上線的整個(gè)工作流程。

    以下是互聯(lián)網(wǎng)產(chǎn)品各部門的工作分配及流程:

    從圖中可以看到,一個(gè)互聯(lián)網(wǎng)產(chǎn)品從策劃到最后的上線營(yíng)銷,都需要由不同的部門分擔(dān)其責(zé),而每個(gè)部門中,根據(jù)崗位的劃分,在細(xì)分到每個(gè)工種上來,所以一個(gè)互聯(lián)網(wǎng)產(chǎn)品的開發(fā)流程,并不是單個(gè)的人,或者個(gè)別的部門可以實(shí)現(xiàn)完成的,它是一個(gè)完整的團(tuán)隊(duì)通力合作的產(chǎn)物。部門與部門,崗位與崗位相互協(xié)作配合,才會(huì)出色高效的完成項(xiàng)目。

    一般互聯(lián)網(wǎng)公司會(huì)有幾個(gè)部門劃分:

    1、產(chǎn)品部門(產(chǎn)品經(jīng)理、產(chǎn)品專員)

    2、設(shè)計(jì)部門(GUI設(shè)計(jì)師、交互設(shè)計(jì)師、前端工程師)

    3、研發(fā)部門(構(gòu)架工程師、程序開發(fā))

    4、測(cè)試部門(測(cè)試專員)

    5、市場(chǎng)部門(銷售、渠道、公關(guān)、品牌)

    6、運(yùn)營(yíng)部門(客服、運(yùn)維)

    各部門的工作職責(zé)如下:

    產(chǎn)品部門:負(fù)責(zé)產(chǎn)品調(diào)研,產(chǎn)品方案策劃,產(chǎn)品原型圖設(shè)計(jì),和技術(shù)開發(fā)對(duì)接,后續(xù)可能和運(yùn)營(yíng)部門對(duì)接。

    設(shè)計(jì)部門:負(fù)責(zé)產(chǎn)品視覺設(shè)計(jì),交互設(shè)計(jì),前端布局。有一些公司會(huì)把前端這一塊劃分到開發(fā)部門,理由是前端的工作和程序開發(fā)一樣,都是碼代碼,設(shè)計(jì)部門就是單純的只管視覺設(shè)計(jì)方面。但是這種說法其實(shí)不太正確,前端的代碼實(shí)現(xiàn)和后臺(tái)的程序開發(fā),雖然都是碼代碼,但是運(yùn)用的技術(shù)是不一樣的,實(shí)現(xiàn)的功能和效果也是不相同的,所以前端工程師劃分到設(shè)計(jì)部門會(huì)更合理一些。

    研發(fā)部門:產(chǎn)品構(gòu)架設(shè)計(jì),數(shù)據(jù)庫(kù)設(shè)計(jì),前后臺(tái)編碼設(shè)計(jì),后期的運(yùn)維,網(wǎng)絡(luò)安全。

    測(cè)試部門:測(cè)試程序中的bug,編寫測(cè)試計(jì)劃、測(cè)試用例及測(cè)試報(bào)告等文檔,優(yōu)化流程。

    市場(chǎng)部門:產(chǎn)品企劃策略,促銷活動(dòng)的策劃及組織,品牌規(guī)劃和品牌的形象建設(shè),市場(chǎng)廣告推廣活動(dòng)和公關(guān)活動(dòng)。

    運(yùn)營(yíng)部門: SEO/SEM優(yōu)化推廣,平臺(tái)活動(dòng)策劃(線上線下),廣告投放,客戶關(guān)系管理,數(shù)據(jù)分析。

    設(shè)計(jì)部門的崗位劃分通常有UI設(shè)計(jì)師、交互設(shè)計(jì)師、前端工程師,小型公司崗位劃分不完善,會(huì)把交互設(shè)計(jì)師的工作(交互流程、交互線框、交互動(dòng)效)交由產(chǎn)品人員來完成,以下梳理出UI設(shè)計(jì)師參與和需完成的流程:

    一、需求梳理、分析

    發(fā)生在產(chǎn)品開發(fā)前,以APP產(chǎn)品為例,會(huì)對(duì)市場(chǎng)和用戶進(jìn)行調(diào)研分析:市場(chǎng)定位(用戶定位、產(chǎn)品定位、技術(shù)定位),市場(chǎng)需求分析(目標(biāo)客戶群分析、競(jìng)爭(zhēng)對(duì)手分析)。在前期的產(chǎn)品需求分析會(huì)議中,UI設(shè)計(jì)、技術(shù)工程師都會(huì)參與。此過程UI設(shè)計(jì)師了解清晰的用戶定位,產(chǎn)品定位,競(jìng)爭(zhēng)對(duì)手分析,為后期的素材收集和風(fēng)格把控做準(zhǔn)備。

    在這個(gè)過程中會(huì)根據(jù)提煉的真實(shí)用戶需求來確定產(chǎn)品需求,產(chǎn)品經(jīng)理將根據(jù)溝通中的相關(guān)資料的word、ppt、jpg等等東西翻譯成邏輯語言,最簡(jiǎn)單的就是產(chǎn)出一張產(chǎn)品功能腦圖或者一份功能列表。

    產(chǎn)品功能腦圖:

    產(chǎn)品功能列表:

    大家開始討論用戶體驗(yàn)流程,在白板上邊畫流程邊添加粗略的UI元素。之后產(chǎn)品經(jīng)理會(huì)在紙上做手繪版線框圖。這階段產(chǎn)品經(jīng)理、UI設(shè)計(jì)師、包括技術(shù)工程師會(huì)一同作大量的討論,而且主要討論的是流程和主要功能,因此手畫故事版最快最方便并易于修改的。此環(huán)節(jié)要敲定userflow,用戶流程及其中的關(guān)鍵步驟,每一步驟都是一個(gè)主要界面。之后產(chǎn)品經(jīng)理繪制紙質(zhì)版低保真交互原型圖(可借用專業(yè)的模板本和工具)

    二、關(guān)鍵界面線框圖(可不帶交互功能)

    初步產(chǎn)品功能需求梳理清楚之后,產(chǎn)品經(jīng)理持續(xù)跟進(jìn),反復(fù)溝通,在確定的用戶流程中,選出幾個(gè)關(guān)鍵的,有代表性的步驟,做1:1細(xì)化線框圖。此環(huán)節(jié)要確定關(guān)鍵界面里的UI元素和布局,以及全局的布局排版風(fēng)格。

    三、關(guān)鍵界面視覺設(shè)計(jì)

    此環(huán)節(jié)UI設(shè)計(jì)師會(huì)做關(guān)鍵界面的整體視覺設(shè)計(jì),嘗試不同風(fēng)格、顏色的搭配,UI元素的運(yùn)用,最終確定產(chǎn)品的視覺設(shè)計(jì)風(fēng)格。

    四、 全部界面線框圖(帶交互功能)

    產(chǎn)品經(jīng)理完成1:1帶交互和流程的全部界面線框圖設(shè)計(jì)并確認(rèn)。

    界面線框圖(為交互功能添加釋義和說明。)

    線框流程圖

    五、 全部界面視覺設(shè)計(jì)

    UI設(shè)計(jì)師輸出全部界面的視覺設(shè)計(jì)圖,并確認(rèn)。

    六、 界面標(biāo)注、切圖

    1、在確認(rèn)全部界面視覺稿以后,首先對(duì)每個(gè)界面進(jìn)行標(biāo)注,標(biāo)注圖移交前端工程師。

    標(biāo)注圖(像素大廚、藍(lán)湖等軟件)

    2、界面切圖,移交前端工程師

    切圖文件夾

    切圖文件

    至此,UI的工作流程才算完成,但是現(xiàn)實(shí)項(xiàng)目中,很多環(huán)節(jié)是一個(gè)交替迭代的過程,需要不停地修改和優(yōu)化,包括整個(gè)流程進(jìn)入到開發(fā)以后,也會(huì)需要UI設(shè)計(jì)師協(xié)同調(diào)整,所以UI設(shè)計(jì)師的工作,不單單是只完成單純的界面視覺設(shè)計(jì),前面包括用戶定位,線框繪制,流程梳理,交互實(shí)現(xiàn),后面包括前端布局,很多環(huán)節(jié),UI設(shè)計(jì)師都必須參與進(jìn)來,只有多角度地了解項(xiàng)目,了解各崗位的工作流程,才能做出符合市場(chǎng)需求,符合用戶需求的產(chǎn)品。

    以上就是小編對(duì)于ui設(shè)計(jì)的工作流程問題和相關(guān)問題的解答了,如有疑問,可撥打網(wǎng)站上的電話,或添加微信。


    推薦閱讀:

    ui設(shè)計(jì)需要用到哪些軟件

    ui界面設(shè)計(jì)包括哪些內(nèi)容(ui界面設(shè)計(jì)包括哪些內(nèi)容)

    ui設(shè)計(jì)圖片庫(kù)(ui設(shè)計(jì)圖片素材)

    微信限制會(huì)不會(huì)自動(dòng)解封

    寶山綠植景觀設(shè)計(jì)案例分享(上海寶山綠化帶)