#01

項(xiàng)目開(kāi)展

近些日子，智行火車票客戶端正在準(zhǔn)備全新的視覺(jué)升級(jí)。而作為這次升級(jí)的重要分支：UI品牌符號(hào)，承載了傳遞品牌感知，打造產(chǎn)品差異化的重要作用。

我們希望符號(hào)展現(xiàn)什么?

1、體現(xiàn)此次改版的設(shè)計(jì)主題

2、突出有別于其他產(chǎn)品的品牌特點(diǎn)

3、加入更多的情感元素，讓改變更有趣

畢竟旅行的背后，是人們追求快樂(lè)生活的沖動(dòng)。

1.??確認(rèn)關(guān)鍵詞

當(dāng)下智行火車票的業(yè)務(wù)范圍已經(jīng)包含諸多的OTA產(chǎn)品。其中最具特點(diǎn)的功能是：火車票搶票。為保持基本的業(yè)務(wù)屬性，也為繼續(xù)強(qiáng)化自身產(chǎn)品特點(diǎn)。我們選擇使用交通出行、極速搶票作為關(guān)鍵詞。

在此基礎(chǔ)上，結(jié)合平臺(tái)年輕用戶人群特點(diǎn)，與此次V10.0改版的設(shè)計(jì)主題，UI品牌符號(hào)同樣希望強(qiáng)調(diào)輕量化設(shè)計(jì)

2.??形體選擇

在確認(rèn)了主體關(guān)鍵詞后，組內(nèi)對(duì)形體的選擇同樣展開(kāi)了腦暴討論。期間產(chǎn)生了多種設(shè)計(jì)方案。

形體意向上嘗試了，代表?yè)屍迸c速度的“閃電”，代表智行拼寫首字母的“ZX”，代表主要頁(yè)面的“火車頭”等等...

最后選擇認(rèn)知度最廣泛的火車意象，并結(jié)合應(yīng)用圖標(biāo)，從品牌LOGO出發(fā)，作為形體設(shè)計(jì)的來(lái)源。

#02

設(shè)計(jì)處理

確認(rèn)基礎(chǔ)形體之后，考慮品牌感知與實(shí)際場(chǎng)景應(yīng)用，我們加入了更多的設(shè)計(jì)處理。

1.? 形體處理

上下圓角的曲線：在形體細(xì)節(jié)的處理上，我們并沒(méi)有使用簡(jiǎn)單的圓角倒角。而是參考現(xiàn)實(shí)中的火車，讓形體保持流暢的基礎(chǔ)上帶有一定的現(xiàn)實(shí)映射。

2. 色彩選擇

漸變色的選擇：以前的智行有自己的標(biāo)志性的藍(lán)色。然而為達(dá)成此次改版對(duì)“輕量化”與“年輕化”的目標(biāo)，設(shè)計(jì)小組在先前“品牌色”的基調(diào)上增加了漸變規(guī)范

一抹更具有呼吸感的向淺色漸變，也同時(shí)賦予了符號(hào)動(dòng)感與活潑。

3.??賦予動(dòng)勢(shì)

動(dòng)感的強(qiáng)化：最后，考慮符號(hào)的應(yīng)用場(chǎng)景以及對(duì)于“火車”意向更好的表達(dá)，符號(hào)在整體應(yīng)用上會(huì)更多的使用“馳騁”“駛?cè)搿钡雀挥兴俣雀械膭?dòng)畫

具體的示例還請(qǐng)往下看設(shè)計(jì)應(yīng)用部分~

#03

設(shè)計(jì)應(yīng)用

1.??首頁(yè)及一級(jí)頁(yè)面應(yīng)用

首頁(yè)下拉動(dòng)效與所有一級(jí)頁(yè)面

對(duì)于場(chǎng)景的考量，我們希望達(dá)到以下效果：

1、盡可能地露出，加深用戶印象

2、盡可能不影響頁(yè)面已有的層級(jí)，不刻意

3、結(jié)合巧妙，不生硬

那么在曝光率最高的首頁(yè)與一級(jí)頁(yè)面。我們選擇了兩處合適場(chǎng)景，loading加載動(dòng)畫，與頁(yè)面標(biāo)題。前者增加等待的趣味性，后者總領(lǐng)頁(yè)面加強(qiáng)應(yīng)用的辨識(shí)度。

除此之外，在類似登錄頁(yè)面等新客必經(jīng)頁(yè)面中，我們也放大了品牌符號(hào)，用于加強(qiáng)新客感知。

2.? 首頁(yè)底Bar圖標(biāo)

重構(gòu)菜單欄圖標(biāo)，賦予更強(qiáng)的感知

關(guān)于底Bar圖標(biāo)的設(shè)計(jì)，先前已經(jīng)撰寫過(guò)相關(guān)文章。感興趣的可移步

???Tab圖標(biāo)這么設(shè)計(jì)？一下?lián)糁形业倪?.心巴。

選中狀態(tài)使用統(tǒng)一的品牌符號(hào)。不再使用常規(guī)的各自形態(tài)的選中狀態(tài)，用來(lái)強(qiáng)化的符號(hào)感知，增強(qiáng)記憶點(diǎn)。

3.? 常用頁(yè)面組件

將符號(hào)應(yīng)用到頁(yè)面組件中

除去首頁(yè)等核心頁(yè)面的應(yīng)用外。我們還希望將其適當(dāng)應(yīng)用在諸多普通頁(yè)面。于是，我們將UI品牌符號(hào)融入到了許多例如模塊標(biāo)題，切圖tab等常見(jiàn)頁(yè)面組件

在輔助頁(yè)面信息傳遞的同時(shí)，增加曝光、強(qiáng)化感知。

4.? 融入品牌字體

將符號(hào)融入品牌字體設(shè)計(jì)中

運(yùn)營(yíng)活動(dòng)是品牌透?jìng)鞯慕^佳場(chǎng)景。借此機(jī)會(huì)，我們將符號(hào)形體加入到品牌字體的設(shè)計(jì)之中，對(duì)先前的字體做了一次全面升級(jí)。

新的字型除了在大部分轉(zhuǎn)折處加入了一定的平滑處理外，最具體特點(diǎn)的將部分重要的的橫筆做了整個(gè)異形處理。保持整體性的同時(shí)也不失趣味性與記憶點(diǎn)。

#04

最后想說(shuō)

智行火車票即將迎來(lái)全面的10.0版本升級(jí)，多年以來(lái)我們致力于打造更新的產(chǎn)品功能與更好的流程體驗(yàn)。這次的UI品牌符號(hào)分享，只是一個(gè)開(kāi)始，也希望大家能夠關(guān)注我們之后的故事。

本文內(nèi)容為轉(zhuǎn)載 僅供個(gè)人學(xué)習(xí)使用