@[對UI設計師的建議, UI設計師與前端更好的交接, 部分對產(chǎn)品的建議]
如何減少時間成本
- 先制作UI組件，再拼接頁面
如果UI給前端的是一堆頁面，前端需要花一些時間去整理提取UI組件。另一方面，UI設計師如果從組件的角度出發(fā)，先做組件再拼頁面，既可以提高效率也可以避免UI元素在各個頁面不統(tǒng)一的問題
- 制作產(chǎn)品流程圖
設計產(chǎn)品流程圖可以給前后臺通用（新建一個大畫布，把界面拉進畫布，將按鈕/鏈接與對應點擊所進入的界面用線段鏈接起來），可以一目了然的明白業(yè)務需求，不用打開Axure導出的HTML一個鏈接一個鏈接的點擊（偶爾還會有沒加鏈接的情況）
- 提取出全局的可通用的部分
1、錯誤及提示列表 / 根據(jù)不同用戶角色的錯誤及提示列表（訂單中）
2、設計通用的錯誤頁面，比如404（頁面未找到）錯誤頁面、504（服務器內(nèi)部錯誤，可替換成更友好的提示）錯誤頁面，用戶權限錯誤頁面
- 在開發(fā)過程中避免需求的修改
1、修改需求需要時間（尤其是修改已做好的功能），而開發(fā)時間是固定的，常常修改會壓縮開發(fā)時間。壓縮開發(fā)時間，就要靠加班解決
2、一個頁面往往不是獨立的，修改可能會影響多個地方。
3、多次的修改，容易讓產(chǎn)品和開發(fā)產(chǎn)生矛盾。產(chǎn)品覺得開發(fā)簡單，開發(fā)覺得產(chǎn)品傻逼
4、產(chǎn)品修改是為了能設計出好的產(chǎn)品，開發(fā)打代碼是為了能做出好的產(chǎn)品，兩者的目標相同，多溝通多理解但是少修改 : )
UI在設計中容易遺漏的點
1、表單
數(shù)據(jù)為空的情況
數(shù)據(jù)不合法的情況
初始狀態(tài)的填寫提示
填寫提示需給出格式要求，復雜的表單項最好給出示例或提示（比如windows安裝時在填寫密鑰的步驟中會給出密鑰在光盤中的位置的圖例提示）
- 友好提示
1、填寫銀行卡或者手機號碼時給出分段提示，比如 187 0000 0000
2、密碼強度的提示
3、自動補全，比如用戶輸入XXXXX，給出XXXXX@qq.com、XXXXX@126.com候選補全選項
2、錯誤
- 錯誤一：表單未填寫完整或填寫有錯誤
1、在復雜的表單中（建議三個以上），建議為填寫或填寫錯誤時不要給按鈕灰顯（表示不可用）。站在用戶考慮用戶并不知道是不可以操作還是填寫錯誤操作不可操作。
2、必填的選項需用星號或者其他必填提示標明
3、錯誤提示最好在表單項失焦的時候給出，再加上初始狀態(tài)填寫提示及必填提示。而不是什么提示都不給，當用戶點擊按鈕時給出一大堆錯誤提示（一片紅色）
- 錯誤二：接口請求失敗情況
1、可能是網(wǎng)絡問題、用戶未登錄，用戶權限不夠的問題
2、接口請求一種是頁面請求，一種是操作請求（ajax）。那么錯誤提示需要設計兩種，一種頁面形式，一種消息提示形式（頁面中）
-
出現(xiàn)錯誤如何提示？
簡陋的
alert('error')瀏覽器彈窗來提示錯誤對用戶來說是不友好的1、錯誤提示僅作提示，用戶應無需操作（關閉、確認）（
alert('error')就是個反例）2、提示錯誤后幫助用戶改正錯誤，比如最經(jīng)典的出現(xiàn)密碼錯誤是清空密碼框里的內(nèi)容，幫用戶減少操作。另一方面，在第一時間給錯誤的表單項獲取焦點也是一個不錯的主意 : )
3、敏感操作
- 敏感操作必須用戶再次確認方可操作，避免不可逆的誤操作
1、敏感操作有哪些？
常見的有：刪除、流程狀態(tài)更改等。一般來說，操作不可逆與影響流程的操作都是敏感操作。
2、如何提示？
提示可以是小的氣泡框提示，也可以是一個大的模態(tài)框。根據(jù)操作的影響程度來
4、交互效果
- UI圖是靜態(tài)的，而交互的動態(tài)的
在標注稿上備注
- 簡單交互效果可使用PS中的時間軸，復雜建議用AE（動態(tài)版的PS）
建議不要搞太復雜 : )
UI和前端工程師交接需要給出的內(nèi)容
1、切圖
UI設計師最好學一下CSS Sprite（雪碧圖）的切法
2、標注稿
為了前端更快的開發(fā)頁面 : ) 畢竟前端沒有UI設計師那樣對PS操作熟練
需要標記：尺寸（包括圓角大小）、顏色、字體及字號等
標注稿上可以給出一些交互說明，比如導航在頁面滾動時要固定在頂部、輪播圖是要漸隱還是滾動
愿景
- 產(chǎn)品/UI設計師與前端工程師交接后減少不必要的溝通
產(chǎn)品/UI設計師交貨后，就可以休養(yǎng)生息了 : )
- 前端工程師能專注前端
前端工程師電腦上需要裝Axure（原型圖軟件）、Photoshop（切圖軟件，美顏哈哈）、PhpStudy（php運行環(huán)境、MySQL數(shù)據(jù)庫），幾乎從項目流程上的軟件都要裝一遍。然而以上軟件都與前端沒直接的關系
@[作者：葉思峰 | 時間：2016-10-16]
