-
讓品牌有溫度、有情感
專注品牌策劃15年
-
當(dāng)前位置：首頁 > 創(chuàng)意學(xué)院 > 空間設(shè)計 > 專題列表 > 正文
ui設(shè)計的流程（UI設(shè)計的流程和工具是什么-）
發(fā)布時間：2023-04-28 02:59:28
稿源：
創(chuàng)意嶺 閱讀：
157
大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于ui設(shè)計的流程的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。
創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀企業(yè)，服務(wù)客戶遍布全國，設(shè)計相關(guān)業(yè)務(wù)請撥打175-8598-2043，或微信：1454722008
本文目錄:
計的流程（UI設(shè)計的流程和工具是什么?）.jpg)
一、ui設(shè)計師的工作流程
UI設(shè)計師必備知識：大公司設(shè)計工作流程規(guī)范，啥也不懂進(jìn)啥公司？
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需要具備哪些功能，最好是能夠進(jìn)行及時采訪，能夠切實地了解到真實需求：比如我找工作，需要公司的規(guī)模，是不是真實，薪資構(gòu)架等等，這些需求都需要儲存起來。
了解到真實需求，才有了我們的產(chǎn)品開發(fā)。
2、確定需求之后，產(chǎn)品經(jīng)理會做具體的說明，讓交互、UI、開發(fā)、測試明確產(chǎn)品需求，明確項目的具體細(xì)節(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è)計負(fù)責(zé)人。設(shè)計負(fù)責(zé)人會給同事做具體的工作安排，線框圖標(biāo)、版式設(shè)計等都有具體的分配。
后面就開始出稿，稿子出了之后，需要確定那個風(fēng)格的效果更好。
判定結(jié)果的標(biāo)準(zhǔn)還是客戶的需求。
重要的事情說三遍：需求、需求、需求！
4、分工已經(jīng)明確，進(jìn)行具體設(shè)計工作
5、標(biāo)注圖、效果圖、切圖
這個不需要多講，大家都明白。
這個步驟，產(chǎn)品經(jīng)理會進(jìn)行把關(guān)。
6、開發(fā)完成，進(jìn)行最后的測試
測試工程師會對開發(fā)出來的產(chǎn)品進(jìn)行測試，看看有沒有疏漏，有沒有錯誤，當(dāng)測試和調(diào)試完成，上線，就完成了整個開發(fā)的流程。
二、UI設(shè)計整個過程一般分為哪些步驟？
嘿設(shè)匯app上的回答很全面，分享給你，希望對你有幫助。
一、前期工作
1.畫。草圖記錄理念。用筆記本來收集創(chuàng)意，不時的翻翻可以根據(jù)一些有趣的舊點子想一些新玩意兒。
2. 收集圖片。方法有好多種，我習(xí)慣Dropbox文件夾分類（例如，我會分成后臺界面設(shè)計、iOS設(shè)計、插畫設(shè)計等等）這些圖片，有新項目時可以用來尋找靈感。
3. 情緒板和準(zhǔn)備工作。Dribbble，Behance，嘿設(shè)匯、Pttrns，Pinterest。我總會準(zhǔn)備4個文件夾——PSD，屏，資源，靈感。把和項目相關(guān)的東西全分類到文件夾里。
二、開始著手設(shè)計
4. 不必在乎線框圖的質(zhì)量。 線框圖的作用是幫助架構(gòu)層級，讓彼此更好的理解目的，而不是最終結(jié)果。設(shè)計師必須懂得去“敏捷”設(shè)計，如果真的太在意線框圖的細(xì)節(jié)，那么整個設(shè)計流程會拉長。
5. PSD - 大尺寸畫布。我一般會創(chuàng)建8000*5000的畫布，不是用來畫出整個應(yīng)用的UI套件，而是用來記錄元素在不同階段的不同狀態(tài)——也就是流程。設(shè)計復(fù)用很方便，開發(fā)看到這種東西也會工作的更快。
6. 所有屏都放入一個PSD中.整體的對比效果會更好，也更容易讓他人理解你的設(shè)計理念。
元素的復(fù)用也非常方便，只需要復(fù)制一下其他屏的圖層/圖層組，修改一下背景或者幾個圖標(biāo)就成了。
7. 整理、規(guī)范圖層和圖層組
我是一個崇尚整齊的人，因此我的PSD結(jié)構(gòu)非常的有序。我個人的規(guī)則是，如果超過8個圖層，那么就創(chuàng)建一個圖層組。
8. 和朋友溝通
我非常重視那些能夠給出專業(yè)性反饋意見的人。留意他們的反應(yīng)和初次看到你設(shè)計時的想法，這未嘗不是一種用戶測試。而且多聆聽別人的意見，能夠讓你從不同的角度看待問題。9.圖示
當(dāng)所有屏的設(shè)計都裝入到一個PSD中后做一點圖示，用來暗示交互流程，我覺得這算是一種早期原型設(shè)計吧，與此同時，還能充分感受到視覺設(shè)計的細(xì)節(jié)。
三、后期工作——視覺規(guī)范
完成了設(shè)計工作后，要做的事情就是出一份視覺規(guī)范，然后檢查一下整體的視覺層級。我個人認(rèn)為，無論是小型項目還是大型項目，視覺規(guī)范都有其存在的必要性。無論是對你自己，還是對于同事，都能起到很好的規(guī)范作用，避免不一致的設(shè)計。
10. 配色表
扁平化的要領(lǐng)之一是配色精簡。也方便了我們展現(xiàn)配色表。
11. 字體表
12. 要完善的記錄Logo使用的字體，文本使用的字體，標(biāo)題使用的字體等等，這對于開發(fā)會大有裨益。個人復(fù)查作品時也會很有幫助。
12. UI 套件
UI套件非常重要，尤其對于工作對接來說，能夠保持視覺高度的一致性。前端也非常需要這東西。做好了之后丟給前端，他要問你，你就說這東西在UI套件中，他立馬就能明白了。
這一條非常重要，關(guān)系到整體的視覺一致性。
三、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ù)崗位的劃分，在細(xì)分到每個工種上來，所以一個互聯(lián)網(wǎng)產(chǎn)品的開發(fā)流程，并不是單個的人，或者個別的部門可以實現(xiàn)完成的，它是一個完整的團(tuá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)品部門：負(fù)責(zé)產(chǎn)品調(diào)研，產(chǎn)品方案策劃，產(chǎn)品原型圖設(shè)計，和技術(shù)開發(fā)對接，后續(xù)可能和運營部門對接。
設(shè)計部門：負(fù)責(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)品為例，會對市場和用戶進(jì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ù)跟進(jìn)，反復(fù)溝通，在確定的用戶流程中，選出幾個關(guān)鍵的，有代表性的步驟，做1:1細(xì)化線框圖。此環(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è)計并確認(rèn)。
界面線框圖（為交互功能添加釋義和說明。）
線框流程圖
五、 全部界面視覺設(shè)計
UI設(shè)計師輸出全部界面的視覺設(shè)計圖，并確認(rèn)。
六、 界面標(biāo)注、切圖
1、在確認(rèn)全部界面視覺稿以后，首先對每個界面進(jìn)行標(biāo)注，標(biāo)注圖移交前端工程師。
標(biāo)注圖（像素大廚、藍(lán)湖等軟件）
2、界面切圖，移交前端工程師
切圖文件夾
切圖文件
至此，UI的工作流程才算完成，但是現(xiàn)實項目中，很多環(huán)節(jié)是一個交替迭代的過程，需要不停地修改和優(yōu)化，包括整個流程進(jìn)入到開發(fā)以后，也會需要UI設(shè)計師協(xié)同調(diào)整，所以UI設(shè)計師的工作，不單單是只完成單純的界面視覺設(shè)計，前面包括用戶定位，線框繪制，流程梳理，交互實現(xiàn)，后面包括前端布局，很多環(huán)節(jié)，UI設(shè)計師都必須參與進(jìn)來，只有多角度地了解項目，了解各崗位的工作流程，才能做出符合市場需求，符合用戶需求的產(chǎn)品。
四、UI設(shè)計 了解一下
UI設(shè)計
最近看到很多小伙伴不知道UI設(shè)計師到底是干什么的，那么我們來一起參與探索這個UI設(shè)計到底是做什么的？UI設(shè)計怎么做的？
一、UI設(shè)計是做什么的？
UI設(shè)計中文名簡稱：用戶界面設(shè)計（這里的用戶指的就是人；界面就是通過某種顯示所表達(dá)出來的信息和你看見感知的信號。比如：我們常用的手機(jī)、電腦、電視機(jī)、包括現(xiàn)在的通話手表、銀行里面的取款機(jī)、汽車的導(dǎo)航界面）等等都是UI設(shè)計。
二、現(xiàn)在大家基本上知道了UI設(shè)計是做什么的了，那么我們在來一起了解一下UI設(shè)計怎么做的？
1.就目前的UI設(shè)計師平均技法這塊基本是有以下5個軟件。會了這5個基本UI設(shè)計技法沒有多大問題了。不過也有少部分公司是只會這5個不夠的。PS，AI主要是用來做界面，AE用來做動效，ARP用來做交互原型，DW用來做網(wǎng)頁的。
2.我們在學(xué)習(xí)UI設(shè)計的過程當(dāng)中，需要學(xué)習(xí)到很多知識，比如軟件 PS，AI，AE，ARP，DW這些都是一名UI設(shè)計必備掌握的一些軟件基礎(chǔ)
3.而學(xué)習(xí)到這些軟件，我們可以通過網(wǎng)站，視頻、字紙書籍和電子書這些資料等多種方法了解提升和學(xué)習(xí)。
網(wǎng)站：我們可以通過站酷來學(xué)習(xí)，可以了解UI的作品是什么，除此之外還可以檢測實力，我們認(rèn)真觀察可以提升審美。
電子書：一般用的比較少，需要大家也可以去淘寶店了解一下
紙質(zhì)書：我給大家推薦幾本，騰訊傳、UI設(shè)計黃金法則、三大構(gòu)成、配色設(shè)計由入門到精通、設(shè)計師要懂得心理學(xué)。
視頻學(xué)習(xí)：通過視頻學(xué)習(xí)這個是最有效的，但是視頻去哪里找，什么樣的視頻才有效呢請往下看。
4.工欲善其事必先利其器，從這個階段開始，就得先學(xué)習(xí)軟件工具了，一般UI設(shè)計要學(xué)習(xí)有以下4款軟件（PS 、AI、 AE、 ARP ，DW）那么這幾款軟件在UI設(shè)計工作是負(fù)責(zé)什么的呢？
PS—UI界面世界設(shè)計-70%
AI-更多是UI圖標(biāo)設(shè)計—5%
AE-交互動效設(shè)計-5%
AXUER-交互原型圖設(shè)計-10%
DW-簡單網(wǎng)頁制作-5%
三、PS CC 2019（最新版本）
PS可以在UI設(shè)計中，繪制界面設(shè)計，圖標(biāo)設(shè)計等。
ps有很多功能，在文字、圖形、圖像、視頻、出版等各方面都有涉及Adobe家族的頂梁設(shè)計軟件、想從事設(shè)計工作PS軟件一定要精通，PS的強(qiáng)大，只有你想不到?jīng)]有它做不出的圖。
四、AI CC 2019（最新版本）
在UI設(shè)計中AI軟件主要用來繪制圖標(biāo)，界面等設(shè)計。
AI是出版、多媒體和在線圖像的工業(yè)標(biāo)準(zhǔn)矢量插畫軟件。 AI可以用來從事，平面設(shè)計，網(wǎng)頁設(shè)計，UI設(shè)計等多種設(shè)計工作。
五、AE CC 2019（最新版本）
在UI設(shè)計中AE主要用制作交互動效圖
AE可以用來從事影視后期， 平面設(shè)計，UI設(shè)計等多種設(shè)計工作。
四、APR 8.0(最新版)
在UI設(shè)計中ARP主要用制作交互原型圖。
Axure RP的使用者主要包括商業(yè)分析師、信息架構(gòu)師、可用性專家、產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗設(shè)計師、交互設(shè)計師、界面設(shè)計師等。
五、DW CC 2019(最新版本)
DW軟件在UI設(shè)計中主要用于制作簡單的網(wǎng)頁
這邊所給大家介紹的全是最新版本的軟件，因為學(xué)習(xí)UI設(shè)計不同于其它
設(shè)計，UI設(shè)計對于版本要求較高，建議使用最新版本學(xué)習(xí)及工作。
如果需要最新版UI設(shè)計軟件可以大家多關(guān)注多提問多交流。
其他方面的在給大家一下經(jīng)驗，在我們UI設(shè)計軟件里，軟件的操作部門只占了30%的精力投入，這樣是找不到工作的。
為什么這么說呢？因為我們更多設(shè)計到的是，比如： 色彩 、創(chuàng)意、審美、UE、競品分析和交互邏輯。
除此之外我們還應(yīng)具備一些非專業(yè)的能力，比如：人品、辦公軟件、演講能力、溝通能力、有責(zé)任心、激情活躍，面試技巧、學(xué)習(xí)能力等其他的因素。
最后才是所謂的學(xué)歷、年齡和經(jīng)驗，這也是一個考驗的條件，但是想做好一名UI設(shè)計師更重要的還是自己做出來的作品，你的作品集基本上就決定了你可以成為一名怎么的UI設(shè)計師。
最后在送大家一句，這個世界沒有絕對的創(chuàng)新，所有的創(chuàng)新都是微創(chuàng)新，所謂的靈感，就是將腦袋里的信息重新組合（原創(chuàng)于設(shè)計的終極奧秘）
好啦，今天有關(guān)UI設(shè)計 了解一下？就到此分享完畢，希望對大家有所幫助。
以上就是關(guān)于ui設(shè)計的流程相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。
推薦閱讀：
設(shè)計包括哪些內(nèi)容（ui界面設(shè)計包括哪些內(nèi)容）
潮州vi系統(tǒng)設(shè)計哪家強(qiáng)（潮州ui設(shè)計）
贛公網(wǎng)安備 50019002502384號
