因?yàn)樽罱龉卷?xiàng)目的設(shè)計(jì)規(guī)范，所以決定把設(shè)核桃的計(jì)規(guī)范也整理一份。但由于是概念稿，所以規(guī)范做的不算全面；而且每個(gè)產(chǎn)品也有各自的規(guī)范思路和維度，沒有絕對(duì)的定性方法。這里只是提供一個(gè)大體方向，疏漏之處，希望給予批評(píng)指正。

2016已經(jīng)接近尾聲，上兩天剛參加完比賽，利用這幾天空閑時(shí)間，把最近沉淀下來的東西分享出來。

上個(gè)月團(tuán)隊(duì)小組進(jìn)行友誼比賽，命題是“郵件”（溝通）。規(guī)定大家以產(chǎn)品思維去設(shè)計(jì)一款全新的產(chǎn)品，形式不限。很難得的是所有人都參加了產(chǎn)品設(shè)計(jì)的每一個(gè)環(huán)節(jié)。我們秉著發(fā)現(xiàn)問題、解決問題的態(tài)度開始了這次友誼比賽。

通過不停的嘗試與否定后，我們鎖定目標(biāo)人群為威客群體。針對(duì)威客群體接私單的特定場(chǎng)景，通過用戶問卷、訪談、旅程圖，最后得到以下幾個(gè)痛點(diǎn)：

1. 來回寄合同，費(fèi)錢費(fèi)力費(fèi)時(shí)間
2. 執(zhí)行溝通的過程中經(jīng)常改需求
3. 合同的擬定，需要在網(wǎng)上找模板
4. 對(duì)于新客戶，不了解，不能完全信任
5. 可能會(huì)逃單、違約

針對(duì)這幾個(gè)痛點(diǎn)，我們的解決方案是：

1. 增加發(fā)送合同郵件，雙方直接簽約，無紙化
2. 通過郵件溝通，后期作為憑證
3. 平臺(tái)提供各種合同模板
4. 增加個(gè)人資料、信息（個(gè)人、公司網(wǎng)址）添加評(píng)價(jià)系統(tǒng)
5. 定金凍結(jié)功能

所以，最后我們的產(chǎn)品定位是：威客人群的無紙化溝通簽約工具。

通過這次嘗試，大家都參與了所有流程——信息收集、競(jìng)品分析、確定目標(biāo)人群、場(chǎng)景梳理、用戶旅程圖、尋找痛點(diǎn)和機(jī)會(huì)點(diǎn)、信息架構(gòu)、交互稿、視覺稿。這對(duì)于我們每一個(gè)人都有很大的幫助。

因?yàn)樽罱龉卷?xiàng)目的設(shè)計(jì)規(guī)范，所以決定把核桃的設(shè)計(jì)規(guī)范也整理一份。但由于是概念稿，所以規(guī)范做的不算全面；而且每個(gè)產(chǎn)品也有各自的規(guī)范思路和維度，沒有絕對(duì)的定性方法。這里只是提供一個(gè)大體方向，疏漏之處，希望給予批評(píng)指正。

至于為什么叫“核桃”，有三個(gè)維度的寓意：

1. 與合同諧音
2. 威客就是用智慧在互聯(lián)網(wǎng)上賺錢的人，而核桃補(bǔ)腦，形狀又像大腦，所以寓意恰巧吻合。
3. 核桃的外殼是堅(jiān)硬的，給人一種受保護(hù)的安全感，而郵件、合同也正是如此。

• 界面設(shè)計(jì)：林佳娜、蔡鑫
• logo設(shè)計(jì)：蘇桂
• 交互設(shè)計(jì)：李祖松、丁明艷、蔡鑫
• 規(guī)范設(shè)計(jì)：蔡鑫

核桃APP界面展示

app分三個(gè)模塊：

1. 溝通（普通郵件與合同郵件）
2. 合同
3. 我的

以上就是概念稿的所有設(shè)計(jì)頁面，下面來主要展示一下設(shè)計(jì)規(guī)范。

核桃APP視覺規(guī)范

規(guī)范從7個(gè)維度來展示：

1. 前言
2. 命名
3. 顏色
4. 文字
5. 圖標(biāo)
6. 控件樣式
7. 互動(dòng)狀態(tài)

規(guī)范說明：

1. 此規(guī)范為核桃App基礎(chǔ)規(guī)范，未涉及到內(nèi)容盡量采用相似性原則進(jìn)行設(shè)計(jì)
2. 此規(guī)范以iphone7尺寸一倍圖（375×667）進(jìn)行設(shè)計(jì)、標(biāo)注、說明
3. 輸出切圖格式為png
4. 規(guī)范是在概念稿階段輸出，所以會(huì)有考慮不全的情況，此處只是為大家提供思路與方法

設(shè)計(jì)原則：

1. 簡化流程，降低用戶學(xué)習(xí)成本
2. 輕量化、扁平化設(shè)計(jì)理念
3. 情感化設(shè)計(jì)體現(xiàn)、重視品牌傳播

命名規(guī)范：

• 模塊_類別_功能_狀態(tài).png
• 舉個(gè)例子：nav_button_search_default@2x.png
• 對(duì)應(yīng)中文：導(dǎo)航_按鈕_搜索_默認(rèn)@2x.png

顏色分為：主色、點(diǎn)綴色、灰色系

字體使用各系統(tǒng)默認(rèn)字體，但為了統(tǒng)一設(shè)計(jì)稿使用平方regular字體。

字體大小：18、16、14、12、10（一倍圖尺寸）

桌面圖標(biāo)大小根據(jù)每個(gè)平臺(tái)尺寸適配

通用圖標(biāo)尺寸有：16x16px、24x24px、48x48px、64x64px、100x100px，如有特殊情況可根據(jù)實(shí)際情況制作圖標(biāo)，但應(yīng)盡量采取相近原則

導(dǎo)航欄

底部標(biāo)簽欄，高度為50px

按鈕共有三種樣式，以后如有增加通用樣式，需加入控件庫。

圖標(biāo)與按鈕一定要考慮Normal、Disable、Pressed、Selected、Clicked這5個(gè)狀態(tài)。

小結(jié)

有設(shè)很多計(jì)師會(huì)提出“規(guī)范只是公司給外部看的一種噱頭”，更像是體現(xiàn)一種公司視覺形象（VI）。其實(shí)，互聯(lián)網(wǎng)公司的產(chǎn)品設(shè)計(jì)規(guī)范并非是僅僅用來宣傳形象的，更多用來使用、簡化開發(fā)過程、使多個(gè)產(chǎn)品擁有一致的體驗(yàn)，是落到實(shí)處的東西。在一個(gè)部門含有多個(gè)產(chǎn)品線的情況下，此時(shí)產(chǎn)品設(shè)計(jì)規(guī)范最能體現(xiàn)其作用。

所以，我覺得規(guī)范本身其實(shí)就是一種美！

作者：菜心（微信號(hào)：410628210 ?微信公眾號(hào)：菜心設(shè)計(jì)鋪），華為ITUX用戶體驗(yàn)設(shè)計(jì)師（主視覺），3年工作經(jīng)驗(yàn)，參與華為Welink、3MS、連長社區(qū)等多個(gè)項(xiàng)目的用戶體驗(yàn)設(shè)計(jì)工作。歡迎大家互相交流關(guān)注。

本文由 @菜心 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。