UI 設計的整個工作流程是怎樣的?

時間 2021-05-05 22:48:57

1樓:酒仙橋背鍋俠

接到設計需求---設計---上傳到藍湖交付---圖審---改圖紙---上傳至藍湖交付---圖審---改需求---通過---接到新的設計需求.....

2樓:查無此人

整個專案從立項開始概括來說,就是使用者體驗5要素流程:

戰略層、範圍層、結構層、框架層、表現層

戰略層即專案背景(甲方爸爸提的需求,公司專案立項…)範圍層-產品拆解,將專案進行重要功能梳理

得到專案的結構層:功能優化腦圖

將腦圖細化框架層:產品產出原型圖

最後表現層:Ui設計產出物

開發將其落地,上線!

3樓:周攸薇

2.關鍵介面線框圖(可不帶互動功能) 初步產品功能需求梳理清楚之後,產品經理持續跟進

3.關鍵介面視覺設計此環節UI設計師會做關鍵介面的整體視覺設計,嘗試不同風格、顏色的搭配...

4.全部介面線框圖(帶互動功能) 產品經理完成1:1帶互動和流程的全部介面線框圖設計...

5.全部介面視覺設計 UI設計師輸出全部介面的視覺設計圖,並確認。

4樓:UI設計小豪

產品經理展示專案原型產品需求,模組具體功能,邏輯跳轉演示

設計頁面以及後期的不斷修改,漫長的過程

頁面定稿後切圖,標註給開發人員

5樓:星衡科技

一. 產品部門

進行產品內容梳理,原型圖繪製,進行原型圖評審二. UI介面設計

首先根據原型圖及所需內容進行梳理,其次進行竟品分析找出優勢及劣勢,之後搜尋案例,尋找設計靈感,然後確定風格、顏色、布局、進行介面設計、互動設計,完成介面設計後進行ui評審,UI評審結果兩種情況,通過則進行UI切圖、標註交付給人機互動組,未通過則繼續補充設計圖,直到設計通過

三.人機互動開發

把設計圖交付給人機互動進行開發

四.UI進行介面檢查

檢查開發完之後與介面的還原度,是否達到一致,並進行調整五.完成

確認產品完成

6樓:悟藝堂

我們很簡單的,小公司。運營或者產品經理給個文件或原型圖,然後照著出效果圖就好了。然後切圖給到開發。和開發交流下哪些地方互動怎麼走,細節調調達到高點的還原度。基本就是這樣。

7樓:

1,PM提出設計需求。(比如,有個什麼介面啊或者活動頁啊,需要設計下的)

2,最重要的一步:UI和PM溝通需求,這叫理解和確認需求。

(因為pm和ui站的角度不一樣,所以要溝通好,要了解pm想要的是什麼,要確認需求流程是否有問題,互動邏輯是不是清晰。)

千萬要避免拿到了一需求,就開始找圖啊,開啟ps畫的。

為什麼有的人能一稿過,有的人要一遍一遍的來來回回的改,就是因為這一步沒有溝通好。

3,第二重要的一步:構思,然後網上找素材,找感覺。

你所找的設計參考圖的質量,最終決定了你最後做出來的設計稿的質量。

一開始就看到很多很優秀很高質量的設計參考圖,那麼你設計時自然而然的就會往這個高度靠攏。

4,開啟ps,開始做圖

有了前面對需求的理解,和一些優秀設計的參考,這時你的心裡已經很清晰了。做起來就會很輕鬆了。

5,第三重要的一步:UI和PM再次溝通,確認設計的完整性。

設計稿做完後,會有跟pm進行二次溝通確認。要確認pm提出的需求是否都在設計稿裡面體現出來沒?有沒有遺留?

這時,一般pm在看完設計稿後,會提一些小的修改建議的。這也是為了避免最後輸出後,pm進行微調修改時,需要重新再次輸出。

6,設計輸出,切圖+標註。(盡量輸出前跟rd們溝通下,他們需要怎麼那些圖,怎麼給它們)

這時,因為前面跟pm有了2次確認了,也跟rd們溝通了設計輸出了,

設計ok,輸出ok,所以就可以大膽放心的輸出了。

7,UI聯調

rd開發完後,需要確認開發出來的介面跟設計稿的介面是否一樣。

這個時候,乙個完整的ui流程差不多算走完了。

記住:千萬千萬一定要先溝通好了,然後再開始幹活。

溝通不止為了理解需求,也是為了後續發生問題時,能分清責任。

把「UI設計」當做乙個整體的團隊流程來看。而並非是「UI設計師」的工作流程是怎樣的。特此說明。

我傾向於說「互動設計的整個流程」。在我這裡,UI是指「介面」,在視覺設計開始之前,介面的的互動策劃與設計是很重要的前置步驟,對最終的使用者體驗有很大的影響。

最開始一定要把Scenario應用場景和Persona使用者角色做出來。你的產品是在何種場景下被使用,你的使用者角色是怎樣特徵的人。設計的對不對,要用使用者角色來判斷,而不是設計師或產品經理自己。

把場景和角色描述清楚,並且讓整個團隊理解透徹,這能保證團隊少犯錯誤。

*使用者角色 Persona,實際工作中寫文字描述就好,不用做的如下圖一般高大上。如果你要給客戶或Boss提案,可以做乙個提公升逼格。

1. Storyboard 故事版:

主要負責人:產品經理或互動設計師

此環節要敲定userflow,使用者流程及其中的關鍵步驟,每一步驟都是乙個主要介面。

*白板上一般都是這樣,互動設計同學會在紙上重繪。

*移動產品設計這樣做也行,不買專用的模板本和工具尺,自己列印也行。

2. Key wireframe 關鍵介面線框圖

主要負責人:互動設計師

在確定的使用者流程中,選出幾個關鍵的,有代表性的步驟,做細化的wireframe線框圖。線框圖裡要確保每乙個UI元素的設計,包括其大小和位置。我們做的線框圖是1:

1的,也就是線框圖與實際介面尺寸一致。1:1的線框圖能在前期避免考慮不周和執行困難等很多問題的出現。

此環節要確定關鍵介面裡的UI元素和布局,以及全域性的布局排版風格。

*線框圖做成1:1最好。輸出到文件裡要新增說明。在後面的工作裡,這份文件可以讓UI設計同學和工程師同學共用。

3. Key visual design 關鍵介面視覺設計

主要負責人:UI設計師

此環節互動設計師會按確定的使用者流程及確定的布局風格來繼續做其它介面的線框圖。UI設計師則同時開始做關鍵介面的視覺設計,進行配色、樣式不同風格的嘗試。

此環節要確定產品介面的視覺設計風格。

4. All wireframe 全部介面線框圖

主要負責人:互動設計師

此環節互動設計師要完成全部介面的線框圖(1:1的)設計並且團隊確認。

*做完全部的線框圖,一般會出乙個總結構圖。如果有足夠大的場地,也可以逐頁列印出來貼到一面牆上。方便團隊隨時參考。

5. Prototype 可動原型

主要負責人:互動設計師

此環節依產品需求而定。如果靜態的線框圖還不能完整的體現出產品特點,那就需要做成可操作甚至有關鍵介面動畫示意的可動原型。通常是HTML的可動原型,特殊專案也曾經做過Flash的。

我還有乙個奇葩朋友用PPT做過(PPT的開發工具+VB )幾乎接近成品介面的可動原型。

此環節的確認同上一步,團隊的理解會更精準。

*忍不住帖乙個PPT的開發工具面板,提供VS風格的控制項,並且直接用VB 寫控制項邏輯!還可以帶dummy資料!客戶都以為你開發完畢了有木有。

6. UI design 全部介面視覺設計

主要負責人:UI設計師

完成全部介面的UI視覺設計。

此環節確認全部UI設計。同時把確認的UI更新到文件裡。

以上步驟裡省略了了給boss匯報或者給客戶匯報的描述。有條件的話,最好是每一步都要讓有關的決策人員參與確認。

如果要做使用者調研的產品,那一定要做出可動原型再讓使用者使用測試,不然很難得到有價值的反饋。有條件的公司直接出帶設計的可動原型再測試當然最好。

Step 1.

了解客戶需求,聽取客戶對行業、對產品、對商業模式的思考,此階段一般需要兩個工作日

Step 2.

初步了解產品的基礎上制定使用者需求調研問卷,粗略了解使用者對該產品的功能需求

Step 3.

Step 4.

對問卷進行定量化分析,輸出問卷分析報告(取樣為300份有效問卷)

Step 5.

根據問卷分析報告以及客戶需求進行使用者需求的制定,輸出使用者需求報

Step 6.

根據使用者需求報告制定資訊架構(information architecture)

Step7.

根據資訊結構,結合使用者樣本(Persona)、競品分析、雙維度表等方法確立互動設計目標,並輸出主頁面互動設計提案

Step 8.

所有頁面的互動設計,同時以互動說明的形式配合甲方PM或開發人員輸出PRD

Step 9.

使用者視覺風格喜好調研

Step 10.

視覺風格分析與提案

Step 11.

選定乙個方案進行深化後對剩下的頁面進行視覺設計

Step 12.

視覺規範手冊(pdf 20P起)的制定

Step 13.

交互動效的制定(demo+文字描述),並配合開發製作實際效果

Step 14.切圖

Step 15.

配合開發,以保證視覺效果還原度及小細節修改

8樓:視覺客運營總監

任何乙個問題都應該從多角度,多方面來考慮 。

不一樣的公司,不一樣的設計師,UI設計的工作流程不一樣。

任何專案整體上的流程無外乎,下達任務,任務執行,任務驗收。

有乙個特別要說明的是,UI設計不是乙個單專案流程,UI設計也只是乙個專案當中的一部分而已,脫離其他環節的UI設計都是不專業的,都是非常業餘的。

真正UI設計都貫穿整個產品設計中,所以,要了解真正UI設計,應該從產品設計工作流程出發。

下面是產品設計和UI設計的基本工作流程

一,產品構想(點子)

二,使用者畫像

三,痛點分析

四,競品分析

五,專業流程

六,產品原型(互動設計)

七,介面UI設計

八,程式Beta版

九,內部測試

十,完善介面UI,使用者體驗,程式等

十一,小範圍使用者推廣使用,反饋

十二,再次完善介面UI,使用者體驗,程式,功能等

十三,全面推廣,全網宣發

十四,迭代更新(介面UI,功能)

從上所敘述來看,介面UI設計在每個環節都有涉及,再具體來看UI設計流程就一目了然。

一,了解產品,UI設計需求

二,做競品UI分析

三,確定UI互動邏輯(線框圖),確定版面

四,結合企業Vi,產品Vi,使用者分析,確定主色

五,基礎上色

七,程式交接(切圖),反饋修改

八,使用者交接(測試,反饋,修改)

九,迭代更新(介面優化,公升級,更新)

然而,上面是比較全面的,大專案的設計流程,對於個人,小專案,接私活專案也會簡化,沒有必要按此舊搬。

希望對大家有用。

願大家優雅蛻變,化繭成蝶

園林資料員的工作流程是怎樣的?

先看下某公司的行政 資料考核標準 A.工作態度及執行力。30分 B.現場資料整理能力。30分 C.對現場工序 工藝有一定了解。15分 D.與甲方 監理的溝通能力。15分 E.團隊協作,活動事件的組織能力。10分 a.熟悉資料軟體。b.記錄 整理會議紀要。c.工程資料整理 收集。d.內 外檔案的收發 ...

設計師 插畫師的接單工作流程是如何的?

公司和個人接活具體情況具體分析,但有一點,要維護好雙方利益,既要維護好客戶利益,也要維護好設計師利益,這樣才能良性互動。 全域性去看 設計行業的服務標準沒有被建立 設計師和客戶都不懂得正確的服務流程。沒有乙個既定的rule去執行。具體去看 1 流程 合作意向 保密協議 合作合同 含時間表 付款安排 ...

請問,文件工程師的工作流程怎樣的?

傑里公尺 不同公司對文件工程師的定位不同,具體的工作可能也略有差異。以下回答,僅以個人的工作經驗為依據。專案啟動 文件工程師就可以有機會了解產品了,根據公司要求需要輸出的文件種類基本可以確定。提前了解這些文件的大綱,都需要介紹什麼,如何介紹。部分說明類的文件已經可以啟動編寫。專案中後期 開始介入,根...