如何有效的跟ui溝通

最近在重構一個項目，樣式主題又是一頓變換。產品大大以爲更換一套主題是很是容易的事情，因而對着一個最好的網站交互規範，就定了。前端童鞋們開始幹活兒，必然採坑~~~~

爬出來後，整理了一份比較完整的與ui和產品溝通設計規範方案的文章，跟你們好好分享一下，也許工做中，用得上。不囉嗦，上乾貨~~~

第一步：抽象項目中用到全部的顏色，並給定對應的名稱。（不管主題再怎麼變化，對應的那個顏色變量不變）

• 色彩規範

經常使用顏色：

一、primary-color:#1b5ab6

適用於：主題字體（包含菜單選中背景色，primary主題按鈕背景色、default按鈕字體顏色、連接狀字體顏色、主文字顏色、表單focus邊框)，基於整個主題ui而定，要求與總體主題風格很是匹配。

注意：按鈕 :hover :active 狀態顏色無需提供，前端可根據按鈕顏色，進行顏色的百分比換算。（設計師有額外設計需求除外）

二、default-color: #606266

適用於：普通文字，通常要求顏色看起來舒服、柔和。

三、primary-color-bg: #242c5c

適用於菜單背景色，定義整個ui的主題風格。

四、default-color-bg#f1f3f7

適用於body、彈框、tab 的header部分背景色，增長視覺層次感。（todo:須要區分body、彈框）

五、default-color–tip: #909399

適用於提示文字,如：tabs組件未選中字體顏色、table無數據時字體，不須要突出的內容。

六、default-color–border: #EBEEF5

適用於大部分邊框顏色

七、 pirmary-color–title: #8398ba

適用於頁面定製化的title字體、強調。

八、 defaul-color–title: #303133

適用於通常title，如彈窗，與普通文字顏色區分。

九、狀態顏色集合

name	color	status
color-primary	#5a98e0	info、primary
color-diabled	#8b572a	expire、impassive
color-success	#8db261	passive、success
color-approved	#4a90e2	approved
color-warning	#5e47a9	warning
color-failed	#d85756	rejected、failed

第二步：根據組件指定規範，明確組件設計需求，避免採坑。

按經常使用功能組件指定的規範：

Tabs：

屬性：header(字體、行高、背景、邊框),content(邊框、字體)；

功能：tabs的展現形態（帶總體邊框、下劃線content不帶邊框），每一個tab內部按鈕的展現位置；

注意：tabs根據邊框，單獨設計內部組件樣式（如talbe，詳情）

Table：

屬性：邊框、字體、行高、是否折行、寬度、表頭背景、表頭字體

注意：1 一般須要兩套標準，適用於普通列表和在tab、彈窗及其餘內嵌的table

2 是否折行

3 查看詳情交互規範

4 按鈕過多時的交互

Button:

屬性：邊框、背景、字體、行高、圓角、icon

是否圓角、是否有icon（有無icon的規範），button主題（default、primary、disabled）並給出主題的（背景色、邊框、字體顏色、字體大小）

注意：1 主題button不須要給定:active、:hover狀態下的樣式，前端可根據換算。

2 明確帶icon按鈕展現規則

3 多個按鈕位置擺放

Dialog:

屬性：title文案，字體、背景，footer文案、字體和背景，body字體、文案、背景

注意：1 不須要title

2 不須要底部

3 視窗比例

Pagination:

屬性：背景、字體、選中字體

注意：1 是否固定底部（並不是全部頁面都固定底部）

2 是否支持選擇多條記錄

Datepicker:

注意：1 是否精確到時分秒

            2 是否限制區域

總之：必定要跟溝通好每一個組件的交互細節和顏色定義規範，定製化的頁面，須要單獨出圖。全部口頭上的標書都是不靠譜的，團隊的內耗更多的來自於，溝通的不順利~~