UI設計師整體工作流程!

2021-09-12 20:07:17 字數 2560 閱讀 5664

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

我團隊在互動設計階段一般有產品經理、互動設計師和ui設計師主要參與。以我的了解,很多公司不設專門的互動設計師,而由產品經理完成相關工作。以下是我這裡的工作流程(來自於網路,本團隊的就不貼了)。這個流程希望整個產品團隊都能參與其中並共同加強對產品的理解。或者借乙個時髦的概念,我是希望團隊能具有更多design thinking,「設計思維」,來加強和推動解決問題的能力,並激發更多創新。

最開始一定要把scenario應用場景和persona使用者角色做出來。你的產品是在何種場景下被使用,你的使用者角色是怎樣特徵的人。設計的對不對,要用使用者角色來判斷,而不是設計師或產品經理自己。把場景和角色描述清楚,並且讓整個團隊理解透徹,這能保證團隊少犯錯誤。

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

1. storyboard 故事版:

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

最早大家開始討論使用者體驗流程,在白板上邊畫流程邊新增粗略的ui元素。會後互動設計師會在在紙上做手繪版線框圖。這階段產品經理、互動設計師、ui設計師、包括技術工程師會一同作大量的討論,而且主要討論的是流程和主要功能,因此手畫故事版最快最方便並易於修改的。

此環節要敲定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 script)幾乎接近成品介面的可動原型。

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

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

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

主要負責人:ui設計師

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

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

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

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

UI視覺設計師工作流程上的總結與建議

最近有一些剛入行的學妹過來問我,如何才能成為一名合格的設計師,我想三言兩語很難傳達,於是準備了一篇長文,主要是根據積累的經驗和對該行業的認識來敘述作為視覺設計師需要哪些能力。1.理解業務需求 產品定位和互動邏輯 2.理性確立設計風格並初步評審 3.設計過程中結合需求,合理優化設計 4.保持有效溝通,...

ui設計師技能, 熟練的ui設計師

ui設計師技能,熟練的ui設計師。作為乙個ui設計師,到底應該具備什麼技能,是不是只要可以熟練的應用軟體或者只要具備一定的思維就可以成為乙個優秀的ui設計師呢?很顯然不是,那麼ui設計師應該具備怎麼樣的技能呢,今天就跟我一起來了解了解吧!1 軟體工具的熟練 首先是ps軟體,不管我們是做ui介面還是運...

UI設計師前景

ui大時代 ui設計概述 前言 近幾年,有乙個新興的詞在設計領域誕生,這個詞就是 ui 在短短的幾年裡ui設計師越來越多,設立ui部門的企業越來普遍,各大院校也出現了和ui相關的專業,ui 設計的組織和 層出不窮。這一切都預示著乙個 ui 大時代已經到來。到底什麼叫ui設計,什麼是ui設計師,ui設...