1. 程式人生 > >前端開發者如何與UI設計師溝通

前端開發者如何與UI設計師溝通

一般設計師給前端的只有psd,沒有其它多餘的東西,連基礎的文件都懶得給。前端期望中的設計能給予的除了psd之外,還有設計上游崗位傳遞下來的東西。比如:產品原型,需求文件,互動文件等等。
一般在真正的程式碼開發進行之前,前端期望中設計給的東西有:
1. 1份jpg檔案: 裡邊有各個psd的動作分解圖,包括頁面邏輯,或互動分解。設計師放成這樣的目的在於在做設計時方便的拷貝,但對開發人員來說,如果分級過於隱藏就會漏掉某個部分的開發。
2. 1份psd檔案: 一份好的psd檔案是分層清晰,設計規範的檔案。
3. 1份需求文件: 需求文件是對當前開發功能的基礎介紹或邏輯詳細描述。
4. 1份原型文件: 原型設計文件一般是由產品經理對最初功能設想的一份粗稿,這份稿只是對佈局或互動做簡單的設計,需要經過設計進行藝術的加工之後,才成為一個可以呈現給使用者的完整介面。
當然這些所有的結果,需要經過層層開會稽核,徵得各個專案組leader的同意之後通過郵件的方式傳送給各個成員,最粗笨的辦法就是放在區域網的共享地址可以去拿psd檔案。
恩,然後所有的中間需求變更、介面變更都要抄送相關人員,免得中間再次溝通,浪費時間。

還有公司更詳細流程是這樣的:
1、需求提出,產品跟產品leader溝通需求
2、產品leader跟開發、測試、ui/ue要人,要排期
3、要來的人大家一起開發,挑戰產品經理,跟批鬥似的,產品拿著需求文件講ppt
4、需求迴歸
5、繼續批鬥(4、5一直重複)
6、需求ok了,開始ui/ue設計
7、評審ui/ue
8、ui/ue迴歸
9、開發
10、提測
11、迴歸
12、上線
13、有問題回滾。

另外公司的設計是這樣的:通常PSD要把互動效果的圖層都做好,出JPG的時候,
都會把預設狀態,互動狀態,管理員狀態各自出一個,然後彈窗佈局出一個,都做得很精細。
這樣導致的結果是想犯錯都沒有機會。

有的公司設計部有自己的規範,首先他們出的圖都是很合乎規範的,
間距、色值、佈局、字型不會很多,因為整個產品多個頁面風格要統一一致,
所以越花哨是越給自己找麻煩,他們也不會有特別多種不同規格混揉在一起。

還有的是跟產品開需求會或專案立會的時候,會先就具體需求的功能點先做可行性方案的討論,
如果開發成本過高的話,通常都會說服需求方用一些替代方案。
又或者是一些高階的功能模組,我們會把專案拆解,分成幾期,首先先出核心功能模組,上線之後再做一些高階需求的模組,實現產品的迭代開發。

另外一個觀點是從產品的高度來看,設計、前端、後端 應該是一個整體,最終應該結果導向,
產出的產品不好,作為開發團隊其實都有責任。

還有的情況是,每個專案都會有彙總目錄,原型是由需求直接提供的,PSD和JPG在設計的彙總目錄裡,我們的製作稿又是一個彙總目錄,所有環節的童鞋都可以非常直觀方便的檢視這些檔案。

然後跟設計交流的時候的坑有以下幾種情況:
1. 有些介面出於時間或員工本身經驗素質的問題就是不願意出psd圖,然後口頭上通知前端,這樣來就可以那樣改就可以了,這就是一個坑。
按我們的經驗對這種情況做出的建議是:
所有的東西都必須出效果圖,並且所有團隊成員達成一致,有可執行性。
所有的字型,間距,顏色,必須約定統一併且完全標識清楚。
杜絕直接這麼說那麼幹的做法。
要不然最後做出的產品,
產品說的是一套,測試測的一套,開發的一套,老闆看到的又是一套,
返工的可能性很大。
我感覺比起這個返工的可能呢,前面多化點把設計稿做好是無可厚非的,
而且從整個專案開發週期來看,是節省開發週期的。

  1. 有些頁面設計師沒有考慮到,比如: 有些頁面在沒有資料的時候設計師沒考慮到,或者經驗不豐富就沒做。 這時候必須要求設計師,給出首頁或列表頁、內容詳細頁、使用者中心等等沒有資料時的效果圖, 以示團隊所有成員知曉,並達到一致。要不然等上線之後,測試資料刪除之後真實資料還沒有上來之前, 老闆心情好要看一下的時候,頁面就整體失控。

還有一種情況就是前端自己整的資料沒有的提示,
從互動形式,文案上都沒有規範,導致最後一步測試的時候在返回來重新修改,浪費時間。
3. 資料過多的情況:
另外一種常見的問題是資料過多或者文字內容過長撐開容器,
這兩種問題再實際做的時候常常會被漏掉,
然後等到測試的時候才發現問題提過來。

還有兩種情況會遇到:
A. 有些前端在看到設計稿的時候,難免看的不舒服,這時候就從非專業的角度開始提建議,但提的時候又不流行技巧,容易發生衝突。
這時候給出的建議是:
提意見是這樣的,除非你幹過設計或者瞭解設計的創作過程,否則從設計的角度最好不要提不同的意見。
可以從互動或功能或體驗上給建設性的意見,
另外講的時候是需要技巧的,可以先正面肯定一下他的勞動成果或努力的結果,
然後說,我這兒看到幾點問題,跟你交流一下,然後布啦布啦,
而不是直接上去就說,我感覺這兒怎麼怎麼的,很主觀的,說這樣根本沒有一個評判的標準或依據。
最後一定要說,根據你的行業經驗或自我設計標準,你肯定不會允許這樣的現象出現吧,然後你看要不要在重新考慮一下。我就是想到了給你提一下。
強調這個非正式的提法,給自己或對方都留有餘地,都有可以退讓的空間,皆大歡喜。

B. 要是效果圖是客戶提供的怎麼破?在溝通是有什麼經驗?
設計的質量如果本身就有問題,比方說就沒考慮新增資料以後的情況,
或者是其它頁面在流程上風格上不統一怎麼怎麼的,
客戶又不是很懂,初期非要你按照他的想法來。
這時候就需要站在一個更高的高度來有技巧的處理這個問題。
比如說,你這個頁面等上線後,在使用者看來2個頁面看到的按鈕不一樣,
感覺很外行,從而導致的結果就是下次不在訪問,這樣使用者就會丟失。
你看有沒有必要重新考慮一下。