去年10月份疫苗寶和小豆苗合并，公司整合兩個App重新設(shè)計開發(fā)，業(yè)務(wù)邏輯及整個交互設(shè)計與先前疫苗寶和小豆苗完全不同，整個小豆苗3.0項目的設(shè)計開發(fā)基本是從0到1的過程。產(chǎn)品整理需求，設(shè)計設(shè)定視覺規(guī)范，研發(fā)布署整個框架，整個團隊一起努力打磨著大家期等已久的小豆苗3.0。

設(shè)計拿到需求后更是日夜設(shè)計，改稿。盡管時間緊迫，但不放過任何一個細(xì)節(jié)，精心的著磨著每一個像素。因此積累了很多也沉淀了很多，以此設(shè)計總結(jié)，為后續(xù)的小豆苗更新迭代創(chuàng)造出更優(yōu)質(zhì)的體驗。

一、前期準(zhǔn)備

1、項目介紹

小豆苗是一款針對家長管理寶寶接種疫苗的App，主要是提醒家長按時接種疫苗、接種什么疫苗、預(yù)約時間去接種及疫苗相關(guān)信息獲取等。為寶寶的健康保駕護航。

2、競品分析

在目前的市場上管理接種疫苗的App不多，除了我們的產(chǎn)品疫苗寶，只有超級疫苗表了，但是對它們的分析還是必不可少的，我下了這些競品軟件，把每個產(chǎn)品的頁面截圖拼湊成流程圖，觀察總結(jié)它們的核心功能及業(yè)務(wù)流程，體驗好和不好的地方都記錄在筆記上.收集問題之后，對問題進行分析，防止我在設(shè)計的時候出現(xiàn)類似錯誤。

通過分析我們發(fā)現(xiàn)超級疫苗表（疫苗寶我就不分析了，這是在還沒有合并時，我設(shè)計的，請大家直接噴，哈哈。）沒有太重視設(shè)計，排版和色彩搭配都比較隨意，給用戶特別不好的體驗，尤其是年輕的家長用戶更是難以接受。雖然我們的App偏向于工具性，使用頻率不高，但是如果想使自己的產(chǎn)品能夠立于不敗之地，除了能夠正常操作使用之外，還必須要有精美的界面和良好的用戶體驗。

3、了解用戶

唐.諾曼說過，如果在用戶界面設(shè)計和人機交互領(lǐng)域中有任何神圣的原則，那必然是“了解你的用戶”。

根據(jù)我們以前的用戶數(shù)據(jù)和一些調(diào)研，年輕媽媽用戶偏多，大概年齡為24-35歲，也有些是寶寶的爺爺奶奶等，由于門診小孩哭喊等，也經(jīng)?？吹饺页鰟拥漠嬅?。

通過以上分析，我總結(jié)出以下幾點：

1、用戶使用場景噪雜

2、用戶偏年輕

3、用戶使用時間緊急，需要高效率的完成接種流程

4、管理0-6歲寶寶接種疫苗

基于以上四個特點，設(shè)計有了個基本定位，總結(jié)如下：

整體的視覺設(shè)計風(fēng)格以簡潔易用為方向，保持產(chǎn)品的圓潤可愛的兒童氣質(zhì)，使用戶使用更高率舒適。

二、定義色彩

1、主色

主色使用了小豆苗logo的水滴藍，非常的晶瑩剔透，給人一種健康，傳承，生命力，簡潔，清新的感覺。

2、輔助及點綴色

除主色，還需要一系列輔色來表示產(chǎn)品中需要強調(diào)、警示的部分，該部分內(nèi)容需要與主色形成強烈對比，以便用戶識別?；谠擖c考慮，我們在定義輔助色的時候，選取了與主色在色環(huán)角度相差較大的互補顏色-橙色

最后，在不影響品牌主色氣質(zhì)的基礎(chǔ)上，又另外選取了一系列明度，飽和度相似的其他顏色作為點綴色，必要時用于圖標(biāo)，文字等。

三、定義結(jié)構(gòu)

1、整體結(jié)構(gòu)

整體結(jié)構(gòu)為一個界面一個操作為主，方便用戶高效率使用。因此首頁只做一件事--預(yù)防接種，從預(yù)約、自檢、簽到、登記、接種、留觀、完成接種，每一個界面一個操作，有少量附屬界面以彈窗為主，保持界面簡潔易用。

2、細(xì)節(jié)處理

在設(shè)計圖標(biāo)時，始終保持色彩與整體界面風(fēng)格一致，還包括線條的粗細(xì)及圓角的大小等，表達出圓潤可愛的兒童氣質(zhì)。

四、界面設(shè)計

根據(jù)前期的視覺規(guī)范和整體的結(jié)構(gòu)定義，我們接下來進行界面設(shè)計。

在界面視覺設(shè)計的時候，需要注意以下幾點：

a， 依據(jù)原型，但不照搬原型。找到每個界面的優(yōu)先級，通過色彩，字體及留白等設(shè)計手段強調(diào)核心功能；

b, 遵循規(guī)范，但不死守規(guī)范。整體界面在色彩，結(jié)構(gòu)上盡量保持一致，但遇到特殊界面，需根據(jù)界面實際作用進行考量；

c,  追求美感，但不過分強調(diào)。在界面設(shè)計上，始終保持功能第一的態(tài)度，避免過于強調(diào)視覺表現(xiàn)力。

五、研發(fā)

1、標(biāo)注

我們以現(xiàn)在用戶量居多的iphone6屏幕尺寸（750x1334）進行設(shè)計，輸出的標(biāo)注也是iphone6為準(zhǔn)，這樣做的理由有兩個：

1）它放大1.5倍可以適配iphone6 plus，縮小0.5倍可以適配ipone4,同樣的道理依然可以適配安卓的各個機型。

2）目前來說用戶量大，所以iphone6的用戶不會有適配問題。

另外，我們標(biāo)注是輸出的html文件，不是我們自己人工標(biāo)注，所以標(biāo)注的準(zhǔn)確率為百分百，這為我們的研發(fā)還原效果給了很大的幫助，使得我們后期跟進UI時非常的順利。

2、切圖

ios輸出三套（@1x @2x @3x）切圖

android輸出兩套或者一套大圖都可以，不過有的按鈕和背景必須的切.9圖片，這個得和研發(fā)溝通確定，因為不同的研發(fā)相同的功能有的需要的切圖是不一樣的，可能是做法上有不一樣，效果能實現(xiàn)就好。

3、跟進UI

由于我們輸出標(biāo)注規(guī)范，加上之與研女溝通切圖，所以研發(fā)的還原效果還是蠻理想的。有部分特殊界面因為適配問題需要重新設(shè)計的也重新做的設(shè)計標(biāo)注，跟進UI重在時時的和研發(fā)溝通。

最后，感謝CCTV 感謝小豆苗TV ......哈哈，其實最應(yīng)該感謝@小莫 對我的幫助，以及產(chǎn)品和研發(fā)小伙伴們的支持。希望接下來的版本更新設(shè)計出更精致的界面，創(chuàng)造出更好的用戶體驗。