如何減小UI設計師產品與前端工程師的溝通成本

在平常工做中，UI設計師/產品與前端工程師不免會有一些衝突，這是個人一些小建議。

1.如何減小時間成本

先製做UI組件，再拼接頁面

若是UI給前端的是一堆頁面，前端須要花一些時間去整理提取UI組件。另外一方面，UI設計師若是從組件的角度出發，先作組件再拼頁面，既能夠提升效率也能夠避免UI元素在各個頁面不統一的問題

製做產品流程圖

設計產品流程圖能夠給先後臺通用（新建一個大畫布，把界面拉進畫布，將按鈕/連接與對應點擊所進入的界面用線段連接起來），能夠一目瞭然的明白業務需求，不用打開Axure導出的HTML一個連接一個連接的點擊（偶爾還會有沒加連接的狀況）

提取出全局的可通用的部分

一、錯誤及提示列表 / 根據不一樣用戶角色的錯誤及提示列表（訂單中）

二、設計通用的錯誤頁面，好比404（頁面未找到）錯誤頁面、504（服務器內部錯誤，可替換成更友好的提示）錯誤頁面，用戶權限錯誤頁面

在開發過程當中避免需求的修改

一、修改需求須要時間（尤爲是修改已作好的功能），而開發時間是固定的，經常修改會壓縮開發時間。壓縮開發時間，就要靠加班解決

二、一個頁面每每不是獨立的，修改可能會影響多個地方。

三、屢次的修改，容易讓產品和開發產生矛盾。產品以爲開發簡單，開發以爲產品傻逼

四、產品修改是爲了能設計出好的產品，開發打代碼是爲了能作出好的產品，二者的目標相同，多溝通多理解可是少修改 : )

2.UI在設計中容易遺漏的點

一、表單

• 數據爲空的狀況
• 數據不合法的狀況
• 初始狀態的填寫提示

填寫提示需給出格式要求，複雜的表單項最好給出示例或提示（好比windows安裝時在填寫密鑰的步驟中會給出密鑰在光盤中的位置的圖例提示）

• 友好提示

一、填寫銀行卡或者手機號碼時給出分段提示，好比 187 0000 0000

二、密碼強度的提示

三、自動補全，好比用戶輸入XXXXX，給出XXXXX@qq.com、XXXXX@126.com候選補全選項

二、錯誤

• 錯誤一：表單未填寫完整或填寫有錯誤

一、在複雜的表單中（建議三個以上），建議爲填寫或填寫錯誤時不要給按鈕灰顯（表示不可用）。站在用戶考慮用戶並不知道是不能夠操做仍是填寫錯誤操做不可操做。

二、必填的選項需用星號或者其餘必填提示標明

三、錯誤提示最好在表單項失焦的時候給出，再加上初始狀態填寫提示及必填提示。而不是什麼提示都不給，當用戶點擊按鈕時給出一大堆錯誤提示（一片紅色）

• 錯誤二：接口請求失敗狀況

一、多是網絡問題、用戶未登陸，用戶權限不夠的問題

二、接口請求一種是頁面請求，一種是操做請求（ajax）。那麼錯誤提示須要設計兩種，一種頁面形式，一種消息提示形式（頁面中）

• 出現錯誤如何提示？

  簡陋的alert(‘error’)瀏覽器彈窗來提示錯誤對用戶來講是不友好的

  一、錯誤提示僅做提示，用戶應無需操做（關閉、確認）（alert(‘error’)就是個反例）

  二、提示錯誤後幫助用戶改正錯誤，好比最經典的出現密碼錯誤是清空密碼框裏的內容，幫用戶減小操做。另外一方面，在第一時間給錯誤的表單項獲取焦點也是一個不錯的主意 : )

三、敏感操做

• 敏感操做必須用戶再次確認方可操做，避免不可逆的誤操做

一、敏感操做有哪些？

常見的有：刪除、流程狀態更改等。通常來講，操做不可逆與影響流程的操做都是敏感操做。

二、如何提示？

提示能夠是小的氣泡框提示，也能夠是一個大的模態框。根據操做的影響程度來

四、交互效果

• UI圖是靜態的，而交互的動態的

  ​ 在標註稿上備註

• 簡單交互效果可以使用PS中的時間軸，複雜建議用AE（動態版的PS）

  ​ 建議不要搞太複雜

3.UI和前端工程師交接須要給出的內容

一、切圖

UI設計師最好學一下CSS Sprite（雪碧圖）的切法

二、標註稿

爲了前端更快的開發頁面 : ) 畢竟前端沒有UI設計師那樣對PS操做熟練

須要標記：尺寸（包括圓角大小）、顏色、字體及字號等

標註稿上能夠給出一些交互說明，好比導航在頁面滾動時要固定在頂部、輪播圖是要漸隱仍是滾動

4.願景

• 產品/UI設計師與前端工程師交接後減小沒必要要的溝通

產品/UI設計師交貨後，就能夠休養生息了

• 前端工程師能專一前端

前端工程師電腦上須要裝Axure（原型圖軟件）、Photoshop（切圖軟件，美顏哈哈）、PhpStudy（php運行環境、MySQL數據庫），幾乎從項目流程上的軟件都要裝一遍。然而以上軟件都與前端沒直接的關係