我的設計工作流

最近在做公司的一個新項目,心血來潮想總結下我做這個項目的工作流程。因為一直都有想寫一篇關于自己工作流程的文章,終于把思路理清楚,開始碼起來。
任何的工作都是不簡單的。本文主要就是描述我個人的工作流。實際工作中做的內容可能會比這里描述的還要詳細些。
附上目錄,然后再對其中提到的流程項一一進行解釋。每個人對產品的理解不一樣,工作的流程也許也不一樣。這里僅是我的一些總結,要是看官們覺得毫無價值一笑而過就是????。

工作流程目錄

1.溝通需求+搜集資料

當接到設計任務時,具體要看和你對接的項目經理或產品經理給到你的文檔到底有多細致,如果不清楚的地方當然就是溝通了,工作中溝通是很重要的。從接到的文檔中,了解、分析需求,搜集相關產品資料。這次我接到的是APP功能清單文檔及已完成的web端管理平臺地址和賬號。
功能清單部分截圖

在不知道產品背景、產品目標、目標用戶的介紹。只能從web端頁面,功能清單了解到該應用是一個管理及監控蓄電池的應用。溝通知道,應用的用戶群是電站的保安及管理人員。

之前在掘金看到一篇用戶體驗的文章說到產品的分類 。

產品分類:功能型的的平臺類產品,關注的是任務,所有操作都被納入一個過程,去思考人們如何完成這個過程。信息型的媒介類產品,關注的是信息,產品應該提供哪些信息,這些信息對用戶的意義是什么。

看了到手的相關資料后,知道這是功能型產品。也明白了產品功能框架不算復雜,信息流分支也清晰。開始資料搜集過程:

  1. 搜競品
    會到App Store搜索同類產品,把能想到的關鍵詞都拿來搜一遍。由于很多都是供內部人員自己使用的產品,即使下載了APP,沒內部賬號是看不到應用內頁的,只有看看應用商店的截圖,然后截圖保存下來,方便隨時查看。
  2. 網上查資料
    我還會到網上搜一搜,看有沒有同類產品的網站,進入網站看看關于產品的介紹,以此了解這到底是個什么應用。在看了十幾或者二十幾個產品后,心里面應該大致有個你要規劃的APP的信息架構了。之前有看到一位筆者的文章說會參考上百個APP。時間緊任務重的親們還是平時多積累,以免要用時才發現時間不夠。

2.梳理產品信息架構

我一般會用xmind來梳理,對照著功能清單、web頁面、同類產品截圖,梳理飛起來。
信息架構其實也就是你要設計的這個應用的信息層級。信息架構梳理完了,這個應用的功能也算規劃完了。接下來就是出交互稿了。


電池云管理信息架構

3.繪制大致交互線框圖+對接上游

交互的過程主要是負責與上游的對接,把需求轉化為功能,推動項目按照計劃完成。上游即是交給你設計需求的人,或許是產品經理、項目經理、市場部等,也可能你的終極大 boss提的需求@~@

交互原型主要是要把應用的流程、界面元素等體現清楚。這樣子交給視覺設計師的時候,視覺才不會拉著你聊人生了,笑cry。
axure-站點地圖截圖

通過axure的站點地圖其實就可以大致看出應用的結構。站點地圖的結構與xmind梳理出的產品信息架構是保持一致的。規范的交互稿是應該配上更新日志的,記錄交互稿的更新信息,便于日后的查看。
業務流程圖:描述應用內個功能間的業務關系、順序和信息的流向。
交互稿:交互稿包含了流程圖、界面圖、交互說明等。
飛機稿:用于存放被廢的頁面,以防后期可能會用到。
交互稿的站點地圖每個人有每個人的建立方式,只要便于查看,結構清晰就好。此次應用的線框圖其實是并沒有畫完的。項目經理希望盡快給出可供開發直接使用的頁面,即交互在視覺稿中進。因此后續就沒畫原型,直接上手視覺效果圖了。
展示一張交互稿頁面,頁面中大致包括:頁面必須的元素、交互說明。平時也會畫web端的原型,放張比較干凈點的,交互細節說明比較少的,web端很多都是靠溝通和概要設計去說明了設計思路了。


首頁原型
web端原型設計截圖

今年5月下旬的時候負責的這個模塊的設計相關工作。一些頁面的跳轉都是直接與負責這個模塊的開發人員及時溝通進行的。

4.視覺設計

  1. 定風格
    首要任務就是解決主功能頁的設計,以此確定整個應用的視覺風格。主要確定的內容包括顏色、字體、圖標三大塊。
  2. 出視覺設計規范
    風格確定以后就可以出一個對應的視覺規范。視覺規范主要應該包含:規范說明、顏色、文字、圖標、控件樣式等。后續的設計都參考這個規范,同時也保證了界面輸出后風格的統一。當然規范是死的,設計是活的。針對應用中的特殊頁面,我們需要先學會規范,遵循規范,再去打破規范設計。
  3. 加入UI成員,趕進度

    定下設計風格,出個別頁面和視覺規范后。我的工作算是完成的差不多了,再加入一個UI妹紙,趕設計稿,追進度就OK了。在設計過程中,我也會經常和UI妹紙溝通,確認頁面元素,畢竟沒出原型嘛,還是溝通解決問題了。
    首頁樣式篩選

定風格的階段,我一般都會選首頁來進行設計。如果首頁的元素較少,就需選擇一個設計元素較多的頁面進行設計。項目經理與客戶溝通,客戶反饋說需以藍色為基礎色,其他都讓設計自己看著辦。因為是第一版的設計,能用起來是客戶的主要需求。
部分我負責的效果圖

5.對接開發+優化改善

視覺稿的設計過程中,都是出一部分,然后與項目經理確認。確認后的頁面就開始切圖定位,上傳SVN通知相關開發人員。開發人員在未拿到視覺圖的時候,前期有接到原型圖的就按原型圖搭界面框架,切圖到了就替換。沒有原型的也會看功能清單摸索著搭。出的視覺稿只要確認后,就會立即切圖定位給開發。Android和Ios并行。
自測后需調整(用的之前的項目來展示,教育產品中的網盤界面)

開發完成后,就叫開發人員給你的手機安裝個測試下。或者公司有多的手機,你也可以借一個來測試。主要是測試下實際開發出來的和效果圖的區別。我會把開發出的界面截圖,傳到電腦和效果圖對照著審。最后把不同的地方標注出來,以文檔的形式發給對接的開發,麻煩他們對照著調整下。

最后補一點小結

整個的流程其實也就是把需求轉化為功能,功能轉化為設計,設計成功落地實現的過程。

我在本項目的角色是典型的UI/UX 通包的小團隊操作模式。這樣做的好處是你前期就可以了解業務情況與產品架構。這樣在規劃和設計起產品時就可兼顧到“好看易用”。

  • 溝通非常重要,有什么需求上想不通的地方,要及時的反饋,有效的溝通。
  • 設計工作中的交互稿是要做到信息交代得越詳細越好,越精確越好。如果由于時間不夠,無法做的很完善,那么就需要你和開發耐心溝通了。
  • 設計交互稿、視覺稿的時候盡量不要頻繁更新,會給人一種【很不專業】的印象,開發也會很煩你頻繁的改動。
  • 在設計產品中遇到瓶頸時,要想著換一種設計方法跳出現有的邏輯,或許就是另一翻天地。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,527評論 6 544
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,687評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,640評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,957評論 1 318
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,682評論 6 413
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 56,011評論 1 329
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,009評論 3 449
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,183評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,714評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,435評論 3 359
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,665評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,148評論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,838評論 3 350
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,251評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,588評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,379評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,627評論 2 380

推薦閱讀更多精彩內容