整體架構(gòu)

今天就帶大家好好聊一聊可視化大屏設(shè)計(jì)中的字體、字號(hào)、字重、字體優(yōu)化等一系類注意事項(xiàng)。字體篇主要分為四大模塊：字體選擇與字重、字號(hào)規(guī)范與應(yīng)用、字體優(yōu)化與交接、常用字體與推薦。

字體選擇與字重

文字是界面中最核心的元素，是產(chǎn)品傳達(dá)給用戶的主要內(nèi)容，它的承載體即是字體。從字體的最基本屬性（字族、字類、字重、字號(hào)等）說(shuō)起，熟悉字體的那些特征，了解字體在界面中的作用。

1、襯線體與無(wú)襯線體

襯線體

襯線又被稱為“字腳”，襯線體就是有邊角裝飾的字體。我們常用的西文字體Times New Roman等；中文比較常見的比如宋體、明體等。

無(wú)襯線體

無(wú)襯線體則與襯線體相反，通常是機(jī)械和統(tǒng)一粗細(xì)的線條，沒(méi)有邊角的裝飾。最具代表性的Arial、Helvetica的西文字體，中文比較常見的比如黑體，微軟雅黑等。

總結(jié)

無(wú)襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞，騰訊谷歌等互聯(lián)網(wǎng)企業(yè)都是選用的無(wú)襯線體；襯線字體的優(yōu)雅與復(fù)古，則常用于藝術(shù)性文字，時(shí)尚品牌等。

因此在具有濃厚技術(shù)的可視化氛圍中，體現(xiàn)科技感和數(shù)字感，結(jié)合我們的觀測(cè)體驗(yàn)，展示形式等，我們統(tǒng)一選用的字體是無(wú)襯線體。

2、中文字體

a、字體選擇

在使用數(shù)字屏幕閱讀時(shí)，字體的選擇要選用無(wú)襯線體（比如黑體，微軟雅黑）厚重一點(diǎn)，不可選用襯線體（比如宋體，書法體）比較單薄。

b、注意事項(xiàng)

標(biāo)題可以用Bold，更厚重，更加醒目，且不需要長(zhǎng)時(shí)間觀看；正文由于需要長(zhǎng)時(shí)間觀看，因此采用Regular字重，觀感以及體驗(yàn)更佳；

3、英文字體

a、字體選擇

英文字體類型的使用，英文選擇更明顯的粗體，因?yàn)橐故緮?shù)據(jù)，使得數(shù)據(jù)展示更加直觀，依舊是選用無(wú)襯線體，比較推薦：D-DIN字體。

b、注意事項(xiàng)

字重用Regular，更加纖細(xì)精致，英文字體分為大小寫，一般推薦使用純大寫模式，因?yàn)榇髮懣梢员ＷC字體本身整齊，并且寬高都是一致的，對(duì)于排版以及展示會(huì)更加友好。

4、數(shù)字字體

a、字體選擇

數(shù)字字體類型的使用，考慮畫面的字體的種類不超過(guò)三種，并考慮到字體的統(tǒng)一性，數(shù)字的字體與英文字體保持統(tǒng)一，比較推薦：D-DIN字體。

b、注意事項(xiàng)

數(shù)字字體的字重盡量使用Bold，因?yàn)檎故靖用黠@，數(shù)字的展示一般都為數(shù)據(jù)展示，在界面的展示中，一般數(shù)字字體會(huì)比同字號(hào)下中文小4-6px，因此展示是保證數(shù)據(jù)清晰顯示，數(shù)字的字體大一點(diǎn)數(shù)據(jù)才能更清晰，更符合數(shù)據(jù)可視化展示。

數(shù)字字體盡量選用等距字體，比如數(shù)字“1”和“0”，有些字體的間距會(huì)相應(yīng)的縮小，我們要選用的就是等距字體，這樣在做一些列表數(shù)據(jù)對(duì)齊的時(shí)候，數(shù)據(jù)展示更加友好。

字號(hào)規(guī)范與應(yīng)用

政府類客戶對(duì)于文字大小粗細(xì)的追求可以說(shuō)是非常的偏激，字體加大加粗幾乎成了標(biāo)配，這種需求下，我們能做的就是在原有規(guī)范的基礎(chǔ)上盡量去提升字號(hào)和字重。

1、常規(guī)16:9屏

常規(guī)16：9指的是1920*1080的分辨率

在字體大小的選擇上，參考了頁(yè)面上常規(guī)大小，定義了一套關(guān)于不同尺寸下的標(biāo)準(zhǔn)字號(hào)，正常1080P頁(yè)面，最小字號(hào)不小于16px。

此處字號(hào)并不是絕對(duì)，因?yàn)榭紤]到目標(biāo)群體適老化的原因，我們主動(dòng)提高了字體的大小，一切都是為了提高客戶的觀測(cè)體驗(yàn)，具體字號(hào)大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距，人為原因等因素。

2、常規(guī)32:9屏

常規(guī)32：9指的是3840*1080的分辨率

在字體大小的選擇上，其實(shí)是兩塊1080P的屏幕進(jìn)行拼接，因此如果畫面內(nèi)容較多時(shí)，定義最小字號(hào)不小于16px。

如果畫面內(nèi)容較少時(shí)，具體字號(hào)大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素，對(duì)字體進(jìn)行相應(yīng)的放大，比例合適即可。

此處字號(hào)并不是絕對(duì)，因?yàn)榭紤]到目標(biāo)群體適老化的原因，我們主動(dòng)提高了字體的大小，一切都是為了提高客戶的觀測(cè)體驗(yàn)。

3、特殊尺寸屏

特殊尺寸指的是非主流的分辨率，比如2880*1920的分辨率

這塊的字號(hào)大小比較難定義，因?yàn)樾枰紤]的因素很多，總體來(lái)說(shuō)字號(hào)大小如果高度在1080px左右，那么就按16:9的字號(hào)規(guī)范來(lái)算。

如果高度高于1080且很多，則需要等比計(jì)算或者放大，具體實(shí)踐出的準(zhǔn)確數(shù)值還得需要根據(jù)大屏的實(shí)際情況來(lái)綜合考慮，這里只是提供一些基礎(chǔ)計(jì)算方式。

4、字號(hào)影響因素

字號(hào)的大小受到屏幕大小的影響；

字號(hào)的大小受到界面內(nèi)容的影響；

字號(hào)的大小受到觀測(cè)距離的影響；

字號(hào)的大小受到設(shè)備性能的影響；

字號(hào)的大小受到主觀人為的影響；

字體優(yōu)化與交接

給開發(fā)的字體太大怎么辦？如何優(yōu)化？開發(fā)采用默認(rèn)字體去開發(fā)怎么辦？開發(fā)用部署電腦沒(méi)有這個(gè)字體去打發(fā)你又該怎么辦？

1、優(yōu)化字體

給開發(fā)的字體太大，占用內(nèi)存該怎么辦？

其實(shí)我們可以用一些特殊的方法對(duì)原有的字體包進(jìn)行優(yōu)化，比如英文字體，我們可以刪除非必要的中文字體和數(shù)字，符號(hào)，只保留一些必要的英文字母。具體方法如下，我們可以用FontCreator軟件去進(jìn)行字體的優(yōu)化與刪減，并修改字體細(xì)節(jié)，重新命名發(fā)布。

同時(shí)如果有意向的同學(xué)，也可以用自己設(shè)計(jì)的字體去應(yīng)用到開發(fā)，這樣的操作不是一舉兩得嗎？

優(yōu)化字體教程：https://www.bilibili.com/video/av82311138

2、開發(fā)交接問(wèn)題解析

a、開發(fā)采用默認(rèn)字體去開發(fā)怎么辦？

默認(rèn)字體開發(fā)可能有時(shí)候會(huì)出現(xiàn)文字換行，或者文字放不下的情況，因?yàn)椴煌煮w的字間距以及大小可能是不同的，因此在初期就需要跟開發(fā)協(xié)調(diào)好，跟設(shè)計(jì)效果圖的字體保持同步，這樣才能保證設(shè)計(jì)效果的還原。

b、本地部署電腦沒(méi)有字體該怎么辦？

字體的存放一般是有兩種，一種是放到單獨(dú)的服務(wù)器然后每次加載去服務(wù)器訪問(wèn)字體，另一種是跟代碼放到一起。對(duì)于字體大小的要求。本地存儲(chǔ)不需要考慮字體包的大小，云存儲(chǔ)需要考慮字體包大小。

云存儲(chǔ)一般字體包大小的話可以限制在2、3M左右，5、6M的字體包就已經(jīng)非常大了，太大會(huì)影響我們字體的讀取，畫面加載很慢。

最優(yōu)解就是在部署本地的電腦上安裝你需要的字體，這樣的話程序就自動(dòng)讀取，可以識(shí)別本地部署的字體；如果不支持本地化部署的，字體是存放在服務(wù)器或者是跟代碼打包放一起的，可以要求開發(fā)在全局代碼中多寫幾個(gè)備用的字體。

比如你是Windows系統(tǒng)，哪呢么自帶的就是微軟雅黑，IOS系統(tǒng)自帶的就是蘋方平臺(tái)，會(huì)自動(dòng)根據(jù)寫出的代碼按順序篩選自帶的系統(tǒng)字體。

常用字體與推薦

一些特別好用的字體，會(huì)在設(shè)計(jì)過(guò)程中提升畫面視覺，因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。

可視化商用免費(fèi)字體鏈接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取碼: owve

1、可視化常用中文字體

中文字體包含了一些可以做標(biāo)題的一些造型比較好看的字體，比如優(yōu)設(shè)標(biāo)題黑，站酷高端黑體，盧帥正銳黑體，胡曉波男神體等等。可做正文字體的比如，蘋方簡(jiǎn)體，思源黑體等等。

2、可視化常用英文/數(shù)字字體

英文字體和數(shù)字字體主要是分享了一些數(shù)據(jù)展示比較奇特的造型字體，比如：DS-digital、Furore、以及正常數(shù)據(jù)展示的D-DIN字體家族等。

全篇總結(jié)

1、字體的最基本屬性：字族、字類、字重、字號(hào)，通過(guò)四種基本屬性為切入點(diǎn)，精準(zhǔn)的去講述大屏可視化的字體規(guī)范和樣式。

2、在可視化大屏設(shè)計(jì)中，字體更加偏向于無(wú)襯線體，無(wú)襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞；

3、在可視化大屏中，展示數(shù)據(jù)的重要性不言而喻，因此要注意中文、英文、數(shù)字字體的選擇以及注意事項(xiàng)，一切以數(shù)據(jù)展示更加明顯為前提；

4、在不同屏幕中，可視化大屏的字號(hào)大小規(guī)范是有區(qū)別的，并且需要結(jié)合影響字號(hào)的五大因素：屏幕大小、界面內(nèi)容、觀測(cè)距離、設(shè)備性能、主觀人為去制定字體規(guī)范；

5、通過(guò)FontCreator軟件去對(duì)字體進(jìn)行優(yōu)化，掌握字體的刪減發(fā)布以及交付開發(fā)的方法；

6、了解開發(fā)存儲(chǔ)字體的兩種形式，一種是本地化部署，一種是與代碼打包服務(wù)器云存儲(chǔ)，以及了解兩種方式的優(yōu)缺點(diǎn)；

7、了解可視化開發(fā)關(guān)于字體交接時(shí)的注意事項(xiàng)，可以通過(guò)自己的理解去解決工作中的關(guān)于字體的問(wèn)題；

8、推薦了常用的可視化大屏的字體：中文字體、英文字體；

9、如果畫面內(nèi)容較少時(shí)，可以適當(dāng)提高字號(hào)，反之亦然，比例合適即可。

10、可視化大屏設(shè)計(jì)字體規(guī)范不存在絕對(duì)字體規(guī)范。

整體架構(gòu)

色彩篇主要分為：色彩三要素、配色方法、可視化中的顏色擴(kuò)展、色彩選用原則、行業(yè)配色
主要想通過(guò)色彩的原理，配色的多種方法，以及如何拓展可視化界面中的元素顏色（文字，裝飾，背景，彈框等），最后總結(jié)了顏色的記憶屬性（行業(yè)配色）。

一、色彩三要素

色相

色相是色彩的首要特征，是區(qū)別各種不同色彩的最準(zhǔn)確的標(biāo)準(zhǔn)。比如紅色、黃色、藍(lán)色等。色相可以具體到各個(gè)行業(yè)所代表的不同顏色，比如公安為藍(lán)色，黨建為紅色，金融為橘色等。
色相只是顏色的另一種說(shuō)法。

明度

明度可以簡(jiǎn)單理解為顏色的亮度，不同的顏色具有不同的明度，例如天藍(lán)色就比紅色的明度高，如綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。
明度定義了顏色的明亮程度，從黑色到白色。

飽和度

飽和度也叫純度，通常是指色彩的鮮艷度。
色彩的純度強(qiáng)弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。色彩的純度變化，可以產(chǎn)生豐富的強(qiáng)弱不同的色相，而且使色彩產(chǎn)生韻味與美感。
是指顏色從純度（100%）到灰度（0%）的取值范圍。

二、配色方法

圖片配色法

圖片配色法可以運(yùn)用PS工具，選擇你鐘意的一張圖，拖進(jìn)PS里，執(zhí)行：濾鏡-像素化-馬賽克，就可以得到基于圖片的馬賽克像素點(diǎn)，然后吸取顏色即可。

插件配色法

插件配色法可以通過(guò)Eagle、美葉等軟件直接獲取圖片色，非常之方便，此種方法相比較于圖片配色法，更具科學(xué)性和準(zhǔn)確性。

色環(huán)配色法

利用色環(huán)配色大家可能都知道，但是我們需要做到的是如何靈活的配色以及進(jìn)行適量的處理。

1、鄰近色配色法
三種顏色組成，觀感更加舒適，色系搭配更舒服。

2、補(bǔ)色配色法
補(bǔ)色是指色環(huán)中兩個(gè)對(duì)稱的色塊，他們是色環(huán)中相隔最遠(yuǎn)的兩個(gè)顏色，因此兩種顏色的對(duì)比也是最大的。

3、補(bǔ)色分割配色法
補(bǔ)色分割與補(bǔ)色配色相似。首先選定一個(gè)顏色，然后使用它一個(gè)鄰近色，最后找出它的補(bǔ)色。（也叫等腰三角形配色）

4、三角配色法
三角色由三種顏色組成，是色環(huán)上平均分布的三種顏色，共同在色環(huán)上連接成三角形。這種方法更適合色彩鮮艷。

5、四角配色法
這種方法由兩對(duì)補(bǔ)色組成，共4種顏色，其中只有一個(gè)是主色，另外三個(gè)顏色是輔助色。

三、可視化中的顏色擴(kuò)展

通過(guò)對(duì)主色的疊加不同透明的黑色與白色（擴(kuò)展白度和擴(kuò)展黑度），可以擴(kuò)展出背景、彈框、裝飾、文字等顏色。

擴(kuò)展白度

擴(kuò)展白度就是為所有顏色創(chuàng)建出更多較淺的顏色（增加白色透明）。比如我們通過(guò)大幅提升主色的白度，可以作為項(xiàng)目的文本色，那么我們?cè)撊绾卧黾影锥饶兀?

擴(kuò)展黑度

擴(kuò)展黑度就是為所有顏色創(chuàng)建出更多較深的顏色（增加黑色透明）。比如我們通過(guò)大幅提升主色的黑度，可以作為項(xiàng)目的背景色和卡片底色，那么我們?cè)撊绾卧黾雍诙饶兀?

擴(kuò)展背景

我們通過(guò)將主色增加黑度的方式，去定義背景色。具體數(shù)值：主色增加90%-95%黑色，作為背景色。

擴(kuò)展彈框

我們通過(guò)將主色增加黑度的方式，去定義彈框色以及模塊背景色。具體數(shù)值：主色增加75%-85%黑色，作為彈框色和模塊背景色。

擴(kuò)展裝飾線

我們通過(guò)將主色增加黑度的方式，去定義裝飾線色。具體數(shù)值：主色增加50%-70%黑色，作為裝飾線的顏色。

擴(kuò)展裝飾點(diǎn)

我們通過(guò)將主色增加黑度的方式，去定義裝飾點(diǎn)色。具體數(shù)值：主色增加30%-50%黑色，作為裝飾點(diǎn)的顏色。

擴(kuò)展文字

我們通過(guò)將主色增加白度的方式，去定義正文文字色。具體數(shù)值：主色增加90%-95%白色，作為正文的顏色（輔助文字可以減少一半透明度）。

擴(kuò)展輔助色

餅圖中可以會(huì)用到很多的顏色去配置，那我們應(yīng)該如何去配置呢？

四、大屏色彩原則

遵守“631”“三不”“兩多”這幾個(gè)原則，可以讓你在可視化中的色彩搭配能力更加自如。

“631”原則

運(yùn)用配色631法則，將配色定義為主色60%，輔助色30%，對(duì)比色10%去貫穿整套界面。文字的顏色通過(guò)重要，普通，次要去分配，帶有色彩傾向豐富頁(yè)面視覺。

“三不”原則

1、不選用同一色系

同色系會(huì)使畫面看起來(lái)對(duì)比度非常弱，色彩指代感弱，色彩之間不好拉開層級(jí)。

2、不選用顏色接近

鄰近色會(huì)使畫面感覺偏弱，沒(méi)有強(qiáng)對(duì)比，畫面層次感不足。

3、不選用同色透明

同色透明會(huì)讓畫面非常的灰，是可視化中的大忌，切勿使用。

“兩多”原則

1、多選用對(duì)比色

強(qiáng)對(duì)比可以拉開視覺層級(jí)，突出畫面，視覺至上。

2、多選用黑白灰

黑白灰可以使畫面變的非常高級(jí)，并且畫面細(xì)節(jié)度拉滿。

五、行業(yè)大屏配色總結(jié)

色彩具有很強(qiáng)的記憶屬性，因此用戶會(huì)將他們感受到的內(nèi)容與色彩聯(lián)系起來(lái)。
可以從大量資源池中去尋找靈感，比如金融行業(yè)，我們可以從已知的金融元素都是紅黃搭配的，因此我們?cè)谂渖珪r(shí)肯定需要注意這一特征的。

交通行業(yè)

交通一般以藍(lán)色為主調(diào)，配合紅黃綠（紅綠燈顏色）三種代表著道路擁擠程度，藍(lán)色是大多數(shù)人最喜歡的顏色。由于藍(lán)色自帶的親和力，它是數(shù)字產(chǎn)品設(shè)計(jì)中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧?kù)o、信任。
適用： 交通，公安，監(jiān)控，政府機(jī)關(guān)。
缺點(diǎn)： 由于其流行性與適用性，作為品牌主色很難脫穎而出。

文旅行業(yè)

文化旅游代表著健康，和諧，自然，戶外，綠色是大自然的顏色，人們對(duì)綠色的喜愛程度僅次于藍(lán)色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長(zhǎng)。
適用： 醫(yī)療康復(fù)、生態(tài)、旅游。
缺點(diǎn)： 當(dāng)綠色作為主色時(shí)，你可能需要再找一個(gè)顏色表示成功消息了。

公安行業(yè)

藍(lán)色是大多數(shù)人最喜歡的顏色。由于藍(lán)色自帶的親和力，它是數(shù)字產(chǎn)品設(shè)計(jì)中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧?kù)o、信任。
適用： 公安，監(jiān)控，交通，政府機(jī)關(guān)。
缺點(diǎn)： 由于其流行性與適用性，作為品牌主色很難脫穎而出。

電力行業(yè)

電力行業(yè)一般以國(guó)家電網(wǎng)的綠色系為主，給人一種安全可靠，綠色環(huán)保的電力行業(yè)。
含義： 安全、可靠、綠色、環(huán)保。
適用： 電力，電網(wǎng)，網(wǎng)絡(luò)安全。
缺點(diǎn)： 當(dāng)綠色作為主色時(shí)，你可能需要再找一個(gè)顏色表示成功消息了。

生態(tài)行業(yè)

生態(tài)代表著健康，和諧，自然，綠色是大自然的顏色，人們對(duì)綠色的喜愛程度僅次于藍(lán)色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長(zhǎng)。
適用： 醫(yī)療康復(fù)、生態(tài)、旅游。
缺點(diǎn)： 當(dāng)綠色作為主色時(shí)，你可能需要再找一個(gè)顏色表示成功消息了。

金融行業(yè)

金融行業(yè)非常注重屬性搭配，暖色系可以增加購(gòu)買欲望，使人有溫暖的感覺。橙色被認(rèn)為是一種非常有活力和熱情的顏色， 它促進(jìn)活動(dòng)和創(chuàng)造性思維。
含義： 創(chuàng)意、能量、熱情、活躍、煩躁。
適用： 金融，證券，貨幣，黨建。
缺點(diǎn)： 當(dāng)橙色作為主色時(shí)，你可能需要另一種顏色作為警告色。

六、知識(shí)點(diǎn)總結(jié)

1、加強(qiáng)對(duì)色彩三要素：色相、明度、飽和度的認(rèn)知；
2、掌握三種配色方法：圖片配色法、插件配色法、色環(huán)配色法，以及了解配色的原理；
3、可視化界面中如何擴(kuò)展顏色（白度，黑度，背景，彈框，裝飾，文字，輔助色等）；
4、配色631原則，主色、輔助色、對(duì)比色應(yīng)用原則；
5、“三不”原則：不選用同一色系、不選用顏色接近、不選用同色透明；
6、“兩多”原則：多選用對(duì)比色、多選用黑白灰；
7、不同行業(yè)配色注意事項(xiàng)，通過(guò)元素搜集以及情緒版，配置不同行業(yè)可視化配色；
8、顏色的含義以及適用的地點(diǎn)；

什么是Resdesign

Redesign并不是一個(gè)簡(jiǎn)單的美化過(guò)程，視覺只是Redesign的一部分而不是全部。如果你做產(chǎn)品重構(gòu)只是為了視覺更美觀，從各種網(wǎng)站獲取靈感用樣機(jī)包裝，沒(méi)有任何產(chǎn)品架構(gòu)以及交互邏輯，那么你的改版必定不會(huì)很完美。

但同時(shí)也會(huì)有很多人陷入這種誤區(qū)，產(chǎn)品中過(guò)時(shí)的設(shè)計(jì)規(guī)范會(huì)使你的用戶會(huì)流失到設(shè)計(jì)體系更好的競(jìng)品那里。重構(gòu)你的產(chǎn)品設(shè)計(jì)語(yǔ)言，讓他看起來(lái)更美觀，這當(dāng)然很好，但是也不能盲目的跟隨設(shè)計(jì)趨勢(shì)，沒(méi)有任何邏輯做改版，這樣會(huì)導(dǎo)致交互邏輯的紊亂以及產(chǎn)品架構(gòu)不清晰。

今天阿勇就從網(wǎng)上任意摘選了一個(gè)產(chǎn)品功能需求有問(wèn)題的一個(gè)頁(yè)面來(lái)進(jìn)行一個(gè)頁(yè)面改版，一起來(lái)看看吧！

產(chǎn)品邏輯分析

1、產(chǎn)品主視覺指意不明，貴州省地質(zhì)災(zāi)害防治指揮平臺(tái)，地圖處資源應(yīng)集中于貴州省，且全國(guó)視角下可以下鉆貴州省市區(qū)。

2、地質(zhì)災(zāi)害防治主視覺應(yīng)該著重展現(xiàn)崩塌、滑坡、泥石流、地裂縫、等地質(zhì)現(xiàn)象的展示，并展示預(yù)警信息，以及現(xiàn)場(chǎng)地質(zhì)現(xiàn)象視頻反饋，以便于指定指揮方針。

3、此平臺(tái)信息展示包含人員調(diào)度，現(xiàn)場(chǎng)指揮，設(shè)備數(shù)量，數(shù)據(jù)資源統(tǒng)計(jì)，覆蓋區(qū)域，預(yù)警告警，各地區(qū)地質(zhì)災(zāi)害排行，綜合防治等信息的內(nèi)容。

4、產(chǎn)品布局不合理，各區(qū)域所占比重需要重新估量，并且主視覺數(shù)據(jù)資源匱乏，內(nèi)容單一。

5、業(yè)務(wù)邏輯沒(méi)有很好的展現(xiàn)，各區(qū)域所要展現(xiàn)的數(shù)據(jù)信息不明確，業(yè)務(wù)紊亂。

6、畫面中對(duì)于業(yè)務(wù)的理解不夠深，導(dǎo)致畫面空洞，數(shù)據(jù)展現(xiàn)量不夠，產(chǎn)品失職。

如何進(jìn)行頁(yè)面分析

根據(jù)顏色：顏色不宜太多，對(duì)于特殊行業(yè)，固定的顏色是有固定的含義的，比如紅橙黃藍(lán)四色預(yù)警。

對(duì)于畫面不合理的地方需要記錄下來(lái)，對(duì)當(dāng)前板塊的內(nèi)容進(jìn)行正確的導(dǎo)向，比如你發(fā)現(xiàn)這個(gè)字體不合適，你的腦海中一定會(huì)有正確的用在此處的字體；比如間距，換行，字號(hào)等方面也是如此，心中得有一桿秤，去衡量設(shè)計(jì)的美感。

了解功能，分析數(shù)據(jù)之間的關(guān)系：

了解本產(chǎn)品的應(yīng)用領(lǐng)域，以及產(chǎn)品功能，分析畫面需要展示的數(shù)據(jù)有哪些，合理的通過(guò)設(shè)計(jì)展示數(shù)據(jù)之間的關(guān)系。

構(gòu)思主題，圍繞主題設(shè)計(jì)其他元素：

對(duì)原來(lái)的主題進(jìn)行產(chǎn)品功能重構(gòu)，設(shè)計(jì)新的配色方案，畫面內(nèi)容布局，標(biāo)題以及主視覺的重新設(shè)計(jì)，圍繞主題進(jìn)行設(shè)計(jì)元素的制作。

分析數(shù)據(jù)，合理選用不同樣式圖表：

對(duì)各個(gè)數(shù)據(jù)進(jìn)行分析，對(duì)內(nèi)容進(jìn)行編排，選擇合適的圖表去展示數(shù)據(jù)，合理的同時(shí)，又具有美感。

提取共性，結(jié)合需求做產(chǎn)品規(guī)劃：

提取各個(gè)模塊的設(shè)計(jì)形式的共性，并結(jié)合產(chǎn)品需求進(jìn)行合理的規(guī)劃，重構(gòu)頁(yè)面。

加強(qiáng)技法，了解可視化設(shè)計(jì)規(guī)范：

通過(guò)不同的設(shè)計(jì)技巧來(lái)表現(xiàn)畫面的美感，制定屬于產(chǎn)品的設(shè)計(jì)規(guī)范，并運(yùn)用這些規(guī)范去規(guī)范頁(yè)面布局以及設(shè)計(jì)，這是要在深度了解可視化設(shè)計(jì)的前提下。

優(yōu)化-01

優(yōu)化-02

將原本的區(qū)域設(shè)備數(shù)量排行，換成了各地區(qū)地質(zhì)災(zāi)害數(shù)量排行，更能反映出地質(zhì)災(zāi)害集中在哪些地域，事發(fā)頻率以及爆發(fā)率進(jìn)行排序，顏色上通過(guò)紅橙黃來(lái)進(jìn)行前三的強(qiáng)調(diào)，更有層次感。 

優(yōu)化-03

將原本的區(qū)域在線設(shè)備，換成了數(shù)據(jù)資源統(tǒng)計(jì)，是為了更清晰的去表達(dá)具體日期下的設(shè)備數(shù)量情況同時(shí)可以避免數(shù)據(jù)表達(dá)不清晰的問(wèn)題。 

更多組件樣式

新增告警列表，設(shè)備數(shù)量，資源調(diào)度信息，展示歷史告警記錄，合計(jì)設(shè)備數(shù)量，總結(jié)資源調(diào)度數(shù)量，真正掌握自動(dòng)化地質(zhì)防治指揮。

最終修改成品

設(shè)計(jì)師應(yīng)該跳脫出自己狹義的視角重新來(lái)審視“設(shè)計(jì)趨勢(shì)”，為自己帶來(lái)更多的可能性。

視覺只是表現(xiàn)層，理解業(yè)務(wù)，理解數(shù)據(jù)，合理表述才是核心。道理大家都懂，但真正的理解數(shù)據(jù)卻是很多設(shè)計(jì)師邁不過(guò)去的門檻。

送給大家一句忠告，永遠(yuǎn)不要迷信產(chǎn)品原型，設(shè)計(jì)也不應(yīng)該被原型所制約，要勇于用自己的設(shè)計(jì)思維去驗(yàn)證產(chǎn)品的合理性，要用商業(yè)眼光去對(duì)產(chǎn)品進(jìn)行查漏補(bǔ)缺，要站在用戶的立場(chǎng)上去試想產(chǎn)品的可能性。

一. SaaS的本質(zhì)是什么

SaaS，英文全稱 Software as a Service，意思為軟件即服務(wù)。是通過(guò)網(wǎng)絡(luò)提供軟件服務(wù)，可以理解為一種軟件交付模式，因?yàn)榻桓赌Ｊ降牟煌矝Q定了和傳統(tǒng)軟件的差別。

在Saas之前傳統(tǒng)軟件需要購(gòu)買后本地化部署，兩者最大的區(qū)別在于，賣軟件是將軟件作為一個(gè)軟件實(shí)體賣給客戶了；而賣SaaS 軟件的所有權(quán)還在廠商所有，提供的是“軟件服務(wù)”。

Saas模式的提出者是Salesforce創(chuàng)始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時(shí)候提出。有兩個(gè)原因促使馬克·貝尼奧夫思考并提出Saas：

1. 傳統(tǒng)軟件部署實(shí)施交付的失敗率非常高；

2. 軟件的售賣價(jià)格非常高，很多中型、中小企業(yè)有需求但無(wú)法承擔(dān)高昂的費(fèi)用。

基于以上兩個(gè)痛點(diǎn)及當(dāng)時(shí)的現(xiàn)狀賣軟件給企業(yè)造成的影響，已經(jīng)形成了惡性循環(huán)，市場(chǎng)受到嚴(yán)重的阻礙（據(jù)Gartner 高德納公司（美國(guó)咨詢公司）的調(diào)查研究曾表明：在所有CRM項(xiàng)目中大約55%沒(méi)有達(dá)到軟件用戶的完整交付和預(yù)期目的，通俗的說(shuō)是實(shí)施失敗。）

從賣軟件變成賣服務(wù)，其中的技術(shù)方式的改變、交易模式的改變，促成了軟件時(shí)代的變革，對(duì)于傳統(tǒng)軟件公司來(lái)說(shuō)，是一次大革命。原來(lái)賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務(wù)后，這筆錢就不能在短周期內(nèi)一次性收了，現(xiàn)行的SaaS模式通常是按照用戶的使用年費(fèi)來(lái)收取。

兩者差別在于，軟件商需要先主動(dòng)改變可以短期的一次性高收入，從短期收入向長(zhǎng)期收入的轉(zhuǎn)變；

所以SaaS是長(zhǎng)期主義的事情。

失敗的Saas生意會(huì)出現(xiàn)一個(gè)問(wèn)題：把長(zhǎng)期生意做成了短期不可持續(xù)的生意；而短期生意帶來(lái)的就是經(jīng)營(yíng)成本的劇增，導(dǎo)致生意不可持續(xù)。

所以，Saas模式?jīng)Q定了需要客戶長(zhǎng)期使用你的產(chǎn)品，才可以長(zhǎng)期可持續(xù)賺錢，也就是通常意義上的客戶終身價(jià)值（LTV）。

那如何做到客戶長(zhǎng)期使用，其實(shí)只有一種方式：長(zhǎng)期為客戶創(chuàng)造價(jià)值，做到幫客戶成功（幫助客戶的業(yè)務(wù)成功），從而持續(xù)續(xù)約。

吳昊老師，在《SaaS創(chuàng)業(yè)路線圖》中的講到：SaaS的本質(zhì)是續(xù)費(fèi)。這個(gè)觀點(diǎn)我比較贊同，SaaS的經(jīng)營(yíng)本質(zhì)在于可持續(xù)。

二.從新認(rèn)識(shí)B端用戶體驗(yàn)

那么，決定SaaS的成功因素是什么呢？

我認(rèn)為決定性因素有三個(gè)方面：產(chǎn)品強(qiáng)大且靈活、用戶體驗(yàn)優(yōu)質(zhì)、服務(wù)的有效支持。產(chǎn)品強(qiáng)大和服務(wù)的有效支持不言而喻，具體我們來(lái)聊聊用戶體驗(yàn)的價(jià)值。

傳統(tǒng)軟件在一次交付實(shí)施后，客戶付80%的錢，剩下的20%能不能收回來(lái)就不那么重要。但SaaS模式，客戶每年進(jìn)行續(xù)費(fèi)，若產(chǎn)品使用及用戶體驗(yàn)滿意度低，帶來(lái)的影響和后果可能是客戶終止續(xù)費(fèi)。

因此，和傳統(tǒng)軟件相比SaaS的用戶體驗(yàn)的價(jià)值就更為重要，它直接影響SaaS的續(xù)費(fèi)和流失。

相信“用戶體驗(yàn)”這個(gè)詞大家應(yīng)該非常熟悉，接下來(lái)我們從新認(rèn)識(shí)什么是用戶體驗(yàn)？

官方的定義是：用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種主觀感受。“用戶體驗(yàn)”這一概念是唐納德·諾曼（Donald Norman）在20世紀(jì)90年代中期提出的。產(chǎn)品大神俞軍老師說(shuō)過(guò)用戶體驗(yàn)的本質(zhì)是“ 用戶最小成本滿足需求 ”。

基于俞軍老師的定義、我的理解和思考，我認(rèn)為是幫助產(chǎn)品和用戶：最小成本滿足需求，同時(shí)創(chuàng)造「美·好」體驗(yàn)。

怎么理解，因?yàn)橛脩趔w驗(yàn)是滿足商業(yè)目標(biāo)的一種行為手段，我們來(lái)看下用戶體驗(yàn)的需要考慮的雙邊關(guān)系，就比較好理解了。

如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業(yè)最高效的服務(wù)用戶。

企業(yè)的本質(zhì)就是創(chuàng)造商業(yè)價(jià)值，商業(yè)價(jià)值來(lái)源于用戶價(jià)值，同時(shí)考慮實(shí)現(xiàn)商業(yè)價(jià)值的效果和效率。我們常常會(huì)聽到“投入產(chǎn)出比”或者叫“投資回報(bào)率”；對(duì)于商業(yè)行為中的一環(huán)用戶體驗(yàn)也如此。

所以，用戶體驗(yàn)的核心的就是：平衡用戶最小成本滿足需求，及企業(yè)最小成本服務(wù)用戶。完成價(jià)值交換同時(shí)，滿足持續(xù)性。

由此，可以看出在SaaS的產(chǎn)品設(shè)計(jì)中，用戶體驗(yàn)其實(shí)承擔(dān)著一個(gè)比較重要的責(zé)任，因?yàn)樗P(guān)系到成本的邊際和規(guī)模化的影響，一頭是產(chǎn)品一頭是用戶。

那么作為產(chǎn)品體驗(yàn)設(shè)計(jì)師，我們需要具備一定成本意識(shí)，做好“成本管控的設(shè)計(jì)”，更本質(zhì)來(lái)說(shuō)設(shè)計(jì)過(guò)程中我們應(yīng)該：把復(fù)雜留給自己，把簡(jiǎn)單留給用戶。

因?yàn)槲覀冊(cè)谠O(shè)計(jì)的過(guò)程中把握產(chǎn)品的交互方式、使用流程，在用戶認(rèn)知和效率層面有較強(qiáng)的把控空間，充分做到的以“用戶體驗(yàn)”出發(fā)；那后續(xù)銷售、交付、客戶成功的全鏈路服務(wù)過(guò)程的學(xué)習(xí)效率和服務(wù)效率會(huì)呈指數(shù)級(jí)上升。

產(chǎn)品設(shè)計(jì)，應(yīng)該把復(fù)雜留給自己、把簡(jiǎn)單留給用戶。

關(guān)于用戶體驗(yàn)，就不得不介紹一下“ 用戶體驗(yàn)要素”模型，個(gè)人認(rèn)為這是所有產(chǎn)品經(jīng)理和設(shè)計(jì)師可以貫穿整個(gè)職業(yè)生涯中都需要經(jīng)常性、反復(fù)對(duì)照思考的設(shè)計(jì)模型。

用戶體驗(yàn)設(shè)計(jì)的價(jià)值遠(yuǎn)不止于讓產(chǎn)品的視覺、顏值提升，設(shè)計(jì)更大的價(jià)值在于深入業(yè)務(wù)、洞察用戶，幫助業(yè)務(wù)梳理產(chǎn)品信息架構(gòu)、任務(wù)流程、交互體驗(yàn)。

構(gòu)建系統(tǒng)的用戶使用方式和工作模式，從而達(dá)成用戶目標(biāo)；通過(guò)達(dá)成用戶目標(biāo)完成價(jià)值交換、以此完成商業(yè)交易達(dá)成商業(yè)目標(biāo)。

三. SaaS如何進(jìn)行用戶體驗(yàn)設(shè)計(jì)

回顧Saas的商業(yè)模式，Saas的商業(yè)模式?jīng)Q定我們提供的這個(gè)服務(wù)不是靠人海戰(zhàn)術(shù)，因?yàn)镾aas軟件即服務(wù)的含義是所提供的軟件就等于提供自助化的服務(wù)，應(yīng)該提供的是自助服務(wù)、開箱即用、開箱易用的服務(wù)。

那么Saas服務(wù)設(shè)計(jì)策略上，應(yīng)該從降低系統(tǒng)使用門檻和提升用戶的自主化服務(wù)兩維度出發(fā)，根據(jù)這兩個(gè)核心維度，我們構(gòu)建了每刻SaaS產(chǎn)品體驗(yàn)的設(shè)計(jì)策略模型。

第一，設(shè)計(jì)“系統(tǒng)服務(wù)自動(dòng)化”，這里的服務(wù)是功能使用的操作，符合“低認(rèn)知、易上手”，那么從設(shè)計(jì)整個(gè)體系 需要遵守“易發(fā)現(xiàn)、低認(rèn)知、高效率、有溫度”的設(shè)計(jì)原則展開，以用戶使用行為出發(fā)設(shè)計(jì)符合用戶心智認(rèn)知的功能形態(tài)和交互流程。

第二，設(shè)計(jì)“系統(tǒng)幫助自助化”，什么意思在全系統(tǒng)中構(gòu)建幫助引導(dǎo)的自助化體系，用戶需要幫助的時(shí)候提供人性化的引導(dǎo)幫助，我們從發(fā)現(xiàn)的維度、認(rèn)知的維度，系統(tǒng)認(rèn)知的維度，綜合考慮用戶系統(tǒng)的幫助引導(dǎo)。

設(shè)計(jì)原則，是指導(dǎo)我們做正確設(shè)計(jì)的方針。

設(shè)計(jì)原則的建立基于對(duì)用戶使用體驗(yàn)全流程的基礎(chǔ)上，以每刻報(bào)銷的設(shè)計(jì)原則，圍繞用戶旅程、認(rèn)知及行為出發(fā)構(gòu)建。

1. 當(dāng)用戶接觸系統(tǒng)從看出發(fā)，看見系統(tǒng)界面、發(fā)現(xiàn)操作入口；（發(fā)現(xiàn)）

2. 帶著操作任務(wù)用戶進(jìn)入系統(tǒng)、看見導(dǎo)航、看見文字、看見按鈕，都需要理解認(rèn)知；（認(rèn)知）

3.用戶從何開始、如何操作，在完成整個(gè)業(yè)務(wù)事項(xiàng)的過(guò)程需要進(jìn)行填寫、選擇、交互過(guò)程就產(chǎn)生了生產(chǎn)效率問(wèn)題；（操作）

4. 當(dāng)出現(xiàn)誤操作或系統(tǒng)出錯(cuò)時(shí)，需要系統(tǒng)糾錯(cuò)提醒、容錯(cuò)的設(shè)計(jì)、幫助及引導(dǎo)，當(dāng)完成整個(gè)業(yè)務(wù)事項(xiàng)后，用戶產(chǎn)生一種的情緒感受，這個(gè)感受即是印象、評(píng)價(jià)、口碑。（感受）

緊緊圍繞產(chǎn)品業(yè)務(wù)、用戶處理特性業(yè)務(wù)的基礎(chǔ)上，以終為始，回歸到用戶、業(yè)務(wù)、系統(tǒng)進(jìn)行思考?xì)w納的產(chǎn)物。

設(shè)計(jì)策略，是指導(dǎo)我們?nèi)绾芜M(jìn)行做正確的設(shè)計(jì)。

在SaaS產(chǎn)品分類上，常見的SaaS產(chǎn)品主要分為3類，行業(yè)SaaS、職能SaaS和通用SaaS。

每刻報(bào)銷產(chǎn)品從核心業(yè)務(wù)來(lái)說(shuō)是職能類Saas，從提升財(cái)務(wù)人員報(bào)銷的發(fā)票審批、費(fèi)用審核等效率展開，但報(bào)銷的來(lái)源又源于普通員工的業(yè)務(wù)報(bào)銷，業(yè)務(wù)報(bào)銷發(fā)生又和所在行業(yè)的費(fèi)用發(fā)生行為特征有一定相關(guān)性，所以是結(jié)合職能和行業(yè)Saas的屬性，從用戶體驗(yàn)的設(shè)計(jì)上需要考慮不同角色用戶對(duì)于系統(tǒng)的業(yè)務(wù)理解、功能交織使用的不同訴求，這個(gè)設(shè)計(jì)過(guò)程探索研究是相對(duì)比較有難度的，以后有機(jī)會(huì)可以展開聊。

下圖是每刻系統(tǒng)經(jīng)過(guò)6年過(guò)程中統(tǒng)計(jì)的問(wèn)題分布，分布比率呈現(xiàn)：認(rèn)知問(wèn)題 60%，效率問(wèn)題 30%、情感問(wèn)題10%。

關(guān)于幫助引導(dǎo)

我們?cè)谠L談客戶調(diào)研發(fā)現(xiàn)，企業(yè)服務(wù)雖然客戶已經(jīng)用了好幾年我們的系統(tǒng)，但財(cái)務(wù)部門還是經(jīng)常性會(huì)碰到新入職員工的系統(tǒng)使用問(wèn)題，甚至財(cái)務(wù)部門來(lái)新人時(shí) 以前系統(tǒng)發(fā)生的使用問(wèn)題會(huì)從新出現(xiàn)一遍，所以企業(yè)服務(wù)有一個(gè)現(xiàn)象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個(gè)遇到的問(wèn)題就是認(rèn)知問(wèn)題，也輔證了我們對(duì)于Saas系統(tǒng)認(rèn)知問(wèn)題是用戶體驗(yàn)的第一大問(wèn)題。

幫助體系建立可以從系統(tǒng)層面體系化有效降低用戶使用的認(rèn)知成本，圍繞用戶角色的核心業(yè)務(wù)操作使用流程、洞察用戶旅程上的疑惑和障礙點(diǎn)。用戶首次進(jìn)入系統(tǒng)要建立介紹和引導(dǎo)，足夠簡(jiǎn)單、降低陌生感，來(lái)減少人力咨詢回復(fù)的投入。

相比人，系統(tǒng)的自助化和自動(dòng)化的服務(wù)，更具有復(fù)用性和規(guī)模效應(yīng)。

本文小結(jié)

SaaS的商業(yè)模式，按年使用賬號(hào)來(lái)收費(fèi)和傳統(tǒng)軟件的付費(fèi)模式區(qū)別非常大，因?yàn)樾枰戎鲃?dòng)放棄自己本來(lái)可以唾手可得的收入，從短期收入向長(zhǎng)期收入的轉(zhuǎn)變。

在SaaS模式的時(shí)代，商業(yè)模式?jīng)Q定其必須關(guān)注客戶成功、客戶持續(xù)續(xù)費(fèi)、LTV客戶長(zhǎng)期價(jià)值。

SaaS的產(chǎn)品更需要重視用戶體驗(yàn)，用戶體驗(yàn)的優(yōu)劣決定其產(chǎn)品的長(zhǎng)期發(fā)展，SaaS的用戶體驗(yàn)設(shè)計(jì)則關(guān)注用戶使用認(rèn)知和行為效率，以及系統(tǒng)服務(wù)自主化設(shè)計(jì)和系統(tǒng)幫助自動(dòng)化設(shè)計(jì)，用戶體驗(yàn)將在產(chǎn)品成長(zhǎng)期后半程，逐漸成為SaaS商業(yè)模式不可或缺的產(chǎn)品競(jìng)爭(zhēng)力。

一、圖標(biāo)是什么

圖標(biāo)在界面設(shè)計(jì)中，雖然很小，但是卻是界面中重要組成部分之一。通過(guò)將顯示物體圖形化的形式，將功能本意高度濃縮成一個(gè)圖標(biāo)，再通過(guò)視覺隱喻更快地讓用戶理解功能，同時(shí)圖形與文字相比，圖形更加生動(dòng)形象，視覺能力更強(qiáng)、更便于記憶，用戶可以根據(jù)圖形快速定位功能位置。而順著時(shí)代的發(fā)展，圖標(biāo)不再僅僅以工具的形式出現(xiàn)，更多的起到裝飾頁(yè)面，也不斷延伸出不同的圖標(biāo)類型與圖標(biāo)設(shè)計(jì)風(fēng)格。

1. 工具層面

1.1 降低用戶理解成本

圖形與復(fù)雜的文字相比，更加簡(jiǎn)潔，相應(yīng)的識(shí)別效率也會(huì)更高。圖標(biāo)可以將復(fù)雜的文字描述高度濃縮成一個(gè)圖標(biāo)，通過(guò)視覺隱喻的方式讓用戶聯(lián)想到現(xiàn)實(shí)生活中的物體，更直觀地呈現(xiàn)圖標(biāo)代表的功能，更快理解功能的意義

1.2 減輕頁(yè)面負(fù)擔(dān)

像一些通用常見的圖標(biāo)，如搜索、播放按鈕、更多等，僅需要一個(gè)圖標(biāo)就能清晰地傳遞功能意義給用戶，省文字的描述，節(jié)省更多的頁(yè)面空間與閱讀壓力。

1.3 更快定位功能位置

圖標(biāo)與文字相比有更豐富的表現(xiàn)形式與顏色，所以視覺沖擊也就更強(qiáng)，也能更快地被識(shí)別出來(lái)，當(dāng)用戶熟悉了產(chǎn)品后，只需要通過(guò)圖標(biāo)就能快速找到想要的功能，當(dāng)功能位置發(fā)生變化時(shí)，不需再重新閱讀枯燥的文字找到對(duì)應(yīng)的功能，只需從圖標(biāo)形狀、顏色上區(qū)別，找到對(duì)應(yīng)的功能。

2.裝飾層面

2.1 傳遞品牌調(diào)性

隨著互聯(lián)網(wǎng)的發(fā)展，同類型的產(chǎn)品越來(lái)越多，要在各個(gè)產(chǎn)品中突圍，除好用的功能外還要有特色的外觀。在圖標(biāo)中融入能代表產(chǎn)品品牌的符號(hào)，強(qiáng)化品牌調(diào)性，保持圖標(biāo)的獨(dú)特性，給用戶留下深刻的印象，一看圖標(biāo)就知道是哪個(gè)產(chǎn)品。

2.2 增強(qiáng)產(chǎn)品吸引力

如今用戶對(duì)產(chǎn)品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標(biāo)可以帶給用戶更好的第一印象，增強(qiáng)產(chǎn)品對(duì)用戶的吸引力。

2.3 渲染氣氛

根據(jù)不同的節(jié)日或運(yùn)營(yíng)活動(dòng)，設(shè)計(jì)相應(yīng)氛圍的圖標(biāo)，幫助產(chǎn)品渲染節(jié)日氛圍或加強(qiáng)用戶對(duì)產(chǎn)品主題運(yùn)營(yíng)活動(dòng)的感知力度

二、圖標(biāo)繪制的基本原則

1.  可識(shí)別性

圖標(biāo)與文字在一定程度上起到相同的作用，都是通過(guò)特定的表現(xiàn)形式來(lái)傳達(dá)某種信息給用戶。順著時(shí)代發(fā)展，圖標(biāo)的設(shè)計(jì)更精細(xì)化，產(chǎn)生了更多的設(shè)計(jì)風(fēng)格，但圖標(biāo)的本質(zhì)還是沒(méi)變的，是用戶進(jìn)入功能的入口。因此，一個(gè)能被用戶快速識(shí)別、快速理解的圖標(biāo)相當(dāng)重要，是圖標(biāo)設(shè)計(jì)的基本要求。我們繪制圖標(biāo)時(shí)要盡量去掉輔助、無(wú)用的元素，保留最清晰、直接、有代表性的元素。

2. 風(fēng)格統(tǒng)一

設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)，除了會(huì)根據(jù)產(chǎn)品類型、用戶群體、品牌調(diào)性等因素決定使用哪種圖標(biāo)風(fēng)格外，還要根據(jù)圖標(biāo)的具體使用位置，因此在一個(gè)產(chǎn)品中，常常會(huì)出現(xiàn)多種風(fēng)格類型的圖標(biāo)，而風(fēng)格統(tǒng)一指的是在某個(gè)特定功能模塊內(nèi)的圖標(biāo)風(fēng)格要保持一致，是面性的圖標(biāo)就是面性，是毛玻璃效果就是毛玻璃效果。

3. 大小統(tǒng)一

圓形、正方形、三角形，在這三個(gè)圖形雖然高度相同，但是整體上三個(gè)圖形的視覺重量并不相同。在實(shí)際的操作中，界面圖標(biāo)不會(huì)由單一的形狀組合，所以形狀各異導(dǎo)致每一個(gè)圖標(biāo)的視覺體積都會(huì)有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計(jì)中，我通常會(huì)利用正方形來(lái)輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個(gè)方向缺得越多，就往那個(gè)方向移動(dòng)一點(diǎn)。

4. 色彩統(tǒng)一

色彩的統(tǒng)一指的是圖標(biāo)色彩在飽和度與明度上保持特征統(tǒng)一，數(shù)值在一定的范圍內(nèi)發(fā)生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標(biāo)，通常使用的都是產(chǎn)品的主題色，而多彩圖標(biāo)，常會(huì)以主題色為主，拓展出臨近色、相似色、對(duì)比色，目前市面上大多數(shù)的圖標(biāo)顏色會(huì)使用同類色與鄰近色。對(duì)于飽和度與明度的調(diào)節(jié)，我通過(guò)利用灰度模式進(jìn)行輔助，使圖標(biāo)視覺更統(tǒng)一柔和，不會(huì)出現(xiàn)其中一個(gè)亮眼或暗沉。

5. 占比統(tǒng)一

5.1 正負(fù)形占比統(tǒng)一

正負(fù)形的合理使用是圖標(biāo)能否傳達(dá)準(zhǔn)確意思的關(guān)鍵，因此也是常會(huì)出現(xiàn)的組成元素。在繪制圖標(biāo)的正負(fù)形，注意保持占比統(tǒng)一，其中某個(gè)圖形正負(fù)形太大或太小，會(huì)顯得突兀、別扭，失去統(tǒng)一性，界面整體質(zhì)感會(huì)大大降低。

5.2 顏色占比統(tǒng)一

在繪制圖標(biāo)時(shí)，確定圖標(biāo)中的主色和輔色，繪制時(shí)盡量保證主色和輔色占比相同，保持圖標(biāo)的統(tǒng)一性。

6. 疏密統(tǒng)一

有規(guī)律地將線條組織在一起，利于形成統(tǒng)一的視覺風(fēng)格。同時(shí)，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標(biāo)，縮小后反而會(huì)影響識(shí)別。同時(shí)，給圖標(biāo)留出一些空間，使線與線之間不會(huì)太擠，增強(qiáng)圖標(biāo)的呼吸感。

安利一個(gè)國(guó)外的圖標(biāo)大神Myicons?，簡(jiǎn)單的線性圖標(biāo)一樣可以很精致。

三、不同風(fēng)格的圖標(biāo)

目前市面上的圖標(biāo)主要有四種類型，分別是：線性圖標(biāo)、面性圖標(biāo)、寫實(shí)擬物圖標(biāo)和三維立體圖標(biāo)。而不同的圖標(biāo)中組合的元素都會(huì)有一些差異，相同類型的圖標(biāo)中也會(huì)有不同的圖標(biāo)風(fēng)格。

1. 線性圖標(biāo)

線性圖標(biāo)主要還是由線性組成，設(shè)計(jì)師可以通過(guò)改變線的粗細(xì)、線的端點(diǎn)、圓角大小或加入一些面性元素在里面來(lái)使線性圖標(biāo)更加豐富、有趣，但整體來(lái)說(shuō)純線性圖標(biāo)更纖細(xì)、簡(jiǎn)潔，使得視覺沖擊力稍微弱了些。

1.1.1 單色

單色是線性最基礎(chǔ)的表達(dá)方式，這種設(shè)計(jì)風(fēng)格單調(diào)、視覺沖擊較差，但是制作難度低，設(shè)計(jì)所耗費(fèi)的時(shí)間頁(yè)更斷，因此常常會(huì)出現(xiàn)在個(gè)人中心頁(yè)中，僅需要有圖標(biāo)顯示功能入口，設(shè)計(jì)要求并不高的功能模塊中。

1.1.2 雙色

雙色圖標(biāo)與單色圖標(biāo)相比，視覺沖擊力更強(qiáng)，應(yīng)用范圍更廣，通常會(huì)融入品牌主色，是除了線面圖標(biāo)外出現(xiàn)在首頁(yè)中的線性圖標(biāo)。因?yàn)殡p色圖標(biāo)可以加入品牌色，增強(qiáng)品牌感的同時(shí)，使圖標(biāo)增加了設(shè)計(jì)感，不會(huì)像單色圖標(biāo)那么單調(diào)乏味，因此雙色圖標(biāo)也會(huì)以“次要功能”的形式出現(xiàn)在首頁(yè)當(dāng)中。

像在“去哪兒旅行App”和“平安銀行App”中，頁(yè)面已經(jīng)存在一組視覺沖擊、視覺層級(jí)更高的一組面性圖標(biāo)，但是因?yàn)闃I(yè)務(wù)需求露出更多功能入口，因此就可以使用線性圖標(biāo)這種視覺沖擊力弱一點(diǎn)的圖標(biāo)搭配，既不會(huì)搶走主視覺，也能滿足業(yè)務(wù)需求。

1.1.3 斷點(diǎn)圖標(biāo)

斷點(diǎn)圖標(biāo)在目前的app圖標(biāo)設(shè)計(jì)上較少使用。雖然斷點(diǎn)風(fēng)格圖標(biāo)在表達(dá)上有一定的局限性，但是圖標(biāo)設(shè)計(jì)感更強(qiáng)，圖標(biāo)更有趣味性。

斷點(diǎn)圖標(biāo)并不是隨便刪除某個(gè)描點(diǎn)，在斷點(diǎn)的位置選擇上和斷點(diǎn)的大小都是要注意的地方。斷點(diǎn)位置的選擇要注意兩點(diǎn)：

1 ) 保持相同角度，能更好地增強(qiáng)圖標(biāo)的協(xié)調(diào)性，避免造成圖標(biāo)的視覺混亂降低用戶的視覺體驗(yàn)。

2 ) 選擇在線的拐角處，利用連續(xù)性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。

1.1.4 線面結(jié)合

在原本的線性圖標(biāo)上加入色塊，就會(huì)產(chǎn)生新的設(shè)計(jì)風(fēng)格--線面圖標(biāo)。線面圖標(biāo)比較特殊，圖標(biāo)的視覺層級(jí)會(huì)隨著圖標(biāo)中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強(qiáng)。因此在設(shè)計(jì)線面結(jié)合圖標(biāo)時(shí)，要先確定圖標(biāo)在該頁(yè)面中的重要程度，如果是主要功能則將色塊的占比加大。

1.2 線的影響

圖標(biāo)中的線主要由兩個(gè)元素組成，一個(gè)是線的粗細(xì)，一個(gè)是線的端點(diǎn)，而這兩個(gè)元素也是主要控制線性圖標(biāo)的性格。以常用的48px圖標(biāo)盒子為例，常用線的粗細(xì)有2px、3px、4px，圖標(biāo)的線越粗圖標(biāo)越有力量感反之圖標(biāo)越纖細(xì)；而圖標(biāo)的圓角越小時(shí)圖標(biāo)越穩(wěn)重、專業(yè)，像一些辦公軟件、金融產(chǎn)品，圖標(biāo)的圓角就比較小。圓角越大圖標(biāo)越飽滿親和力更強(qiáng)，像一些兒童學(xué)習(xí)類軟件就會(huì)使用大圓角的圖標(biāo)設(shè)計(jì)。

因此，圖標(biāo)的線粗細(xì)與圓角大小，都根據(jù)不同產(chǎn)品類型與目標(biāo)用戶確定。而大多數(shù)線性圖標(biāo)主要有四種基礎(chǔ)造型：纖細(xì)+小圓角、纖細(xì)+大圓角、粗描邊+小圓角/無(wú)圓角、粗描邊+大圓角。

1.2.1 纖細(xì)+小圓角

精致、嚴(yán)謹(jǐn)，多用在銀行、新聞?lì)怉PP。沒(méi)有圓角，會(huì)使圖標(biāo)更加尖銳，對(duì)于銀行類APP會(huì)給人一種威脅，但是太大的圓角，顯得有點(diǎn)輕浮、可愛，不符合銀行莊嚴(yán)的感覺，所以稍微添加一些圓角，使圖標(biāo)更有親和力的同時(shí)，也保留一些莊嚴(yán)的感覺。

1.2.2 纖細(xì)+大圓角

更加精致、有親和力，這種風(fēng)格是目前市面上軟件使用得最多的一種線性圖標(biāo)風(fēng)格。

1.2.3 粗描邊+無(wú)圓角/小圓角

粗曠、個(gè)性、有很強(qiáng)的力量感。更多的用在運(yùn)動(dòng)、汽車這類主要用戶傾向男性的軟件，同時(shí)也會(huì)在一些潮流類電商軟件中出現(xiàn)，凸顯更有個(gè)性的設(shè)計(jì)風(fēng)格。

1.2.4 粗描邊+大圓角

圓潤(rùn)、可愛、親和力強(qiáng)，常用在偏向兒童的產(chǎn)品

2. 面性圖標(biāo)

面性圖標(biāo)時(shí)軟件使用的最多的一種圖標(biāo)類型，設(shè)計(jì)師通過(guò)改變色塊、圖形圓角、正負(fù)形和底托等元素，讓面性圖標(biāo)呈現(xiàn)不同的設(shè)計(jì)風(fēng)格，但無(wú)論是哪種設(shè)計(jì)風(fēng)格，面性圖標(biāo)設(shè)計(jì)沖擊力相比面性圖標(biāo)更強(qiáng)，因此市面上大多數(shù)核心功能都會(huì)用到面性圖標(biāo)來(lái)提高功能的設(shè)計(jì)層級(jí)，讓功能在頁(yè)面中更加突出。

2.1 扁平風(fēng)格扁平風(fēng)格的圖標(biāo)常為單色圖標(biāo)，圖標(biāo)整體沒(méi)有漸變、高光、陰影等裝飾性設(shè)計(jì)效果，因此更加簡(jiǎn)潔，更突出功能本身，圖標(biāo)功能性更強(qiáng)，圖標(biāo)制作成本低，曾經(jīng)也是風(fēng)靡一時(shí)。但扁平風(fēng)格的圖標(biāo)缺少亮點(diǎn)與制作成本的原因，導(dǎo)致圖標(biāo)同質(zhì)化嚴(yán)重，缺少特點(diǎn)，很難被人記住，因此現(xiàn)在很少被使用。

2.2 漸變色塊

在扁平風(fēng)的基礎(chǔ)上，在色塊上添加漸變色，在保留了扁平圖標(biāo)的功能性外，使圖標(biāo)色彩更加豐富，在不同類型的軟件中都可以使用這種風(fēng)格，算是一個(gè)比較百搭的圖標(biāo)風(fēng)格。同時(shí)漸變色塊也是很多面性圖標(biāo)的組合基礎(chǔ)，在漸變色塊這個(gè)基礎(chǔ)上還可以添加不同的效果形成不同設(shè)計(jì)風(fēng)格。

在設(shè)計(jì)漸變色塊風(fēng)格的圖標(biāo)時(shí)要注意兩點(diǎn)：

1 ) 市面上的app都會(huì)選擇同類色作為漸變色，然后通過(guò)改變顏色的飽和度，使?jié)u變色的明亮對(duì)比更加明顯的同時(shí)，顏色過(guò)渡也更加柔和舒服，使圖標(biāo)更有通透感，增加視覺沖擊力。

2 ) 在設(shè)計(jì)這種有白色色塊在頂部的圖標(biāo)時(shí)，可以給色塊添加一個(gè)淺淺的透明漸變，讓色塊過(guò)渡自然一些，同時(shí)也可以添加一層淺淺的陰影，增加層次感。

2.3 圖層疊加

圖層疊加風(fēng)格的圖標(biāo)看上去像兩個(gè)透明圖層疊加在一起的感覺，圖標(biāo)層次感強(qiáng)，細(xì)節(jié)也更加豐富，圖標(biāo)風(fēng)格更新穎、更年輕化，因此如果在設(shè)計(jì)一個(gè)年輕人使用或者希望打造年輕化頁(yè)面感受的時(shí)候，可以嘗試使用圖層疊加風(fēng)格。

繪制圖層疊加風(fēng)格的圖標(biāo)時(shí)要注意：

1 ) 重疊在一起的那個(gè)色塊是通過(guò)布爾運(yùn)算得到的，并不是通過(guò)簡(jiǎn)單的透明圖層得到的。而重疊在一起的那個(gè)色塊也不宜過(guò)于顯眼，畢竟看的是圖標(biāo)的整體。因此可以參考一下“智行火車票”，通過(guò)改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標(biāo)的變化，同時(shí)也不會(huì)是色塊太突兀影響觀感。

2 ) 盡量統(tǒng)一疊加部分圖形與圖標(biāo)之間的占比。

2.4 毛玻璃

毛玻璃是近年最火的一種設(shè)計(jì)風(fēng)格，不僅設(shè)計(jì)風(fēng)格新穎、特別，而且還有很強(qiáng)的質(zhì)感表現(xiàn)，因此不僅在金融產(chǎn)品，還是生鮮產(chǎn)品或票務(wù)產(chǎn)品，都有毛玻璃風(fēng)格的圖標(biāo)。

而在設(shè)計(jì)毛玻璃圖標(biāo)時(shí)，里面也有很多細(xì)節(jié)需要注意：

1 ) 背景模糊效果不需要太大，有一種若隱若現(xiàn)的感覺就可以。如果調(diào)太大，可能就看不出是毛玻璃效果了。

2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標(biāo)，只需要將圖標(biāo)的主色調(diào)低飽和度后，就可以使用。這樣的好處是不僅讓圖標(biāo)顏色過(guò)渡更加自然，同時(shí)有更多的組合方式、更多的層次。

3 ) 使用邊緣光。毛玻璃圖標(biāo)有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會(huì)被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時(shí)使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細(xì)節(jié)更加豐富。

2.5 晶白風(fēng)格

晶白類圖標(biāo)利用圓角正方形或圓形作為底托再在上面添加一個(gè)主色為白色的圖標(biāo)，然后通過(guò)調(diào)節(jié)透明度、投影、漸變給圖標(biāo)添加一些質(zhì)感，是常見的圖標(biāo)風(fēng)格，也是使用了很久的一種設(shè)計(jì)風(fēng)格。

后面也延伸出了另一種設(shè)計(jì)風(fēng)格圖標(biāo)主題通常不會(huì)是統(tǒng)一的造型，像喜馬拉雅這種圖標(biāo)，圖標(biāo)本身元素復(fù)雜、細(xì)節(jié)較多，形狀也更加不可控，因此用一個(gè)淺色圓形底托，將他們統(tǒng)一起來(lái)。不僅可以將復(fù)雜的圖形統(tǒng)一起來(lái)，還可以添加吸引人眼球的漸變色更好地增加圖標(biāo)的視覺占比，有更強(qiáng)的視覺沖擊感。

在繪制晶白風(fēng)格時(shí)，注意兩點(diǎn)：

1 ) 可以適當(dāng)改變底托圖形的形狀，增強(qiáng)差異化。

2 ) 統(tǒng)一光源，越白的地方越亮，注意控制好透明度的變化與角度。

2.6 實(shí)物展示

這類圖標(biāo)會(huì)出現(xiàn)在生鮮類、藥品類、潮流電商類產(chǎn)品中，因?yàn)槭褂脠D標(biāo)很難將這些類型概括起來(lái)，直接使用圖片展示更加直觀，但因?yàn)閳D片細(xì)節(jié)、元素更多更復(fù)雜，如果使用太多會(huì)使圖標(biāo)看起來(lái)很雜亂。

3. 寫實(shí)向圖標(biāo)

寫實(shí)向圖標(biāo)模擬現(xiàn)實(shí)中的物體，更貼近生活，用戶對(duì)這類圖標(biāo)理解能力也更強(qiáng)，繪制難度也更高，繪制時(shí)間也更長(zhǎng)。寫實(shí)向圖標(biāo)除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來(lái)增強(qiáng)實(shí)感。常常用在運(yùn)營(yíng)設(shè)計(jì)上，或用在一些特殊界面模塊從而增強(qiáng)視覺層級(jí)。

3.1 輕擬物圖標(biāo)

輕擬物圖標(biāo)是最近很好的的設(shè)計(jì)風(fēng)格，但是輕擬物圖標(biāo)出現(xiàn)在界面設(shè)計(jì)上還是比較少的。因?yàn)檩p擬物圖標(biāo)元素比較復(fù)雜，視覺沖擊力強(qiáng)，放在界面上有可能搶走用戶對(duì)核心內(nèi)容的關(guān)注度，通常會(huì)運(yùn)用在運(yùn)營(yíng)設(shè)計(jì)長(zhǎng)圖、彈窗、核心功能等。

而繪制輕擬物圖標(biāo)，主要注意的是光影的打造。光影主要由這幾個(gè)元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標(biāo)時(shí)，主要注意以下幾點(diǎn)：

1 ) 在繪制輕擬物圖標(biāo)時(shí)，不一定需要使用統(tǒng)一色相中的顏色，可以通過(guò)改變顏色的飽和度明度的對(duì)比和冷暖色的對(duì)比來(lái)營(yíng)造光影，使圖標(biāo)色彩更豐富、對(duì)比更明顯。

2 ) 反光可以使用圖標(biāo)主色的對(duì)比色，降低飽和度，提高明度，運(yùn)用在輕擬物圖標(biāo)邊緣，使邊緣更更清晰，不會(huì)糊在一起，圖標(biāo)整體立體感更強(qiáng)。

3 ) 明暗對(duì)比越明顯，輕擬物圖標(biāo)越顯通透、立體。

3.2 2.5D圖標(biāo)

2.5D曾經(jīng)是很火的一種設(shè)計(jì)風(fēng)格，但是現(xiàn)在已經(jīng)逐漸被輕擬物與建模替代。2.5D圖標(biāo)固定展示了三個(gè)面，有很強(qiáng)的立體感，常常運(yùn)用在科技類的網(wǎng)站設(shè)計(jì)中。

在繪制2.5D風(fēng)格圖標(biāo)時(shí)，要注意：

1)統(tǒng)一好圖標(biāo)的厚度。

3.3 3D圖標(biāo)

隨著時(shí)代進(jìn)步，3D逐漸成為一個(gè)主流的設(shè)計(jì)風(fēng)格。通過(guò)專業(yè)軟件給予了圖形材質(zhì)質(zhì)感、真實(shí)的光影，更加貼近生活真實(shí)物件，同時(shí)還可以配合動(dòng)效的設(shè)計(jì)，有很強(qiáng)的視覺沖擊力和新鮮感。常常出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)中、運(yùn)營(yíng)設(shè)計(jì)中。目前繪制3D圖標(biāo)主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費(fèi)的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒(méi)有oc好，但是還是可以滿足日常工作。

而在繪制3D圖標(biāo)需要注意以下幾點(diǎn)：

1 ) 統(tǒng)一主光源方向。建模里面會(huì)出現(xiàn)很多打光類型，如主光、輔光（有時(shí)不止一個(gè)）、邊緣光等。

2 ) 統(tǒng)一攝像機(jī)位置。攝像機(jī)與物體的距離、角度影響渲染的最終效果。

3 ) 用數(shù)值定義物體大小。建模軟件不像繪圖軟件那樣強(qiáng)調(diào)物體的數(shù)值大小，拉遠(yuǎn)看物體就是小，拉近看就是大，做一個(gè)物體時(shí)還好，但是要做一組3D圖標(biāo)時(shí)，就要定義好物體的大小，使圖標(biāo)更加統(tǒng)一。

四、如何確定使用哪種類型的圖標(biāo)

不同風(fēng)格的圖標(biāo)有著不同的特點(diǎn)，設(shè)計(jì)師要根據(jù)圖標(biāo)放置位置和功能選擇圖標(biāo)類型。其中最有決定性的因素就是圖標(biāo)的重量，而影響圖標(biāo)重量的因素有：占比、顏色、細(xì)節(jié)元素。線性圖標(biāo)在界面中占比較少，因此看起來(lái)會(huì)更加簡(jiǎn)潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標(biāo)占比更高，視覺上會(huì)更加飽滿，同時(shí)顏色色塊使圖標(biāo)更加顯眼，視覺沖擊力得到力增強(qiáng)，使用戶對(duì)圖標(biāo)的感知力更高，是最常用的圖標(biāo)類型，用在各個(gè)重要功能入口上；輕擬物和3D圖標(biāo)除了占比高、顏色豐富，還有各種光影、材質(zhì)的細(xì)節(jié)，圖標(biāo)元素更多，視覺沖擊力也更強(qiáng)了，也因?yàn)閳D標(biāo)復(fù)雜、視覺沖擊力強(qiáng)，因此很少出現(xiàn)在界面上，通常運(yùn)用在一些特殊運(yùn)營(yíng)入口或需要吸引用戶的大模塊中。

不同的類型在界面中也會(huì)搭配出現(xiàn)。

五、圖標(biāo)的繪制

1. 圖標(biāo)盒子

圖標(biāo)盒子是輔助繪制圖標(biāo)的一個(gè)工具，幫助設(shè)計(jì)師在設(shè)計(jì)圖標(biāo)時(shí)更好地規(guī)范好各個(gè)圖標(biāo)的尺寸大小。而圖標(biāo)盒子也有很多種，我最常用的是48*48px，這個(gè)尺寸對(duì)于線條的控制比較方便，通常用1px、2px、3px。

工具始終都是工具，界面圖標(biāo)不會(huì)由單一的形狀組合，所以形狀各異導(dǎo)致每一個(gè)圖標(biāo)的視覺體積都會(huì)有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標(biāo)的大小，要根據(jù)圖標(biāo)的的特征去判斷。在平常的設(shè)計(jì)中，我通常會(huì)利用正方形來(lái)輔助圖標(biāo)繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個(gè)地方缺得越多，哪個(gè)地方就拉伸一點(diǎn)。

2. 圖標(biāo)的繪制方法

圖標(biāo)中會(huì)存在標(biāo)準(zhǔn)化圖標(biāo)，像刪除就是一個(gè)垃圾桶、像首頁(yè)通常是一個(gè)家的圖標(biāo)、還有搜索則是放大鏡的圖，照片是兩個(gè)山一個(gè)太陽(yáng)，這些圖標(biāo)都習(xí)慣以這種表達(dá)方式出現(xiàn)，用戶已經(jīng)習(xí)慣了這種表現(xiàn)形式，因此對(duì)于標(biāo)準(zhǔn)化圖標(biāo)，盡量維持以往的變現(xiàn)形式，讓用戶更好地理解圖標(biāo)意思。

非標(biāo)準(zhǔn)化圖標(biāo)可以細(xì)分為具象與抽象，對(duì)于具象類圖標(biāo)，現(xiàn)實(shí)中有實(shí)物可以參照。這類圖標(biāo)的設(shè)計(jì)較為簡(jiǎn)單，可以在某度上尋找相關(guān)照片，根據(jù)實(shí)物的造型進(jìn)行提煉和簡(jiǎn)化。

抽象圖標(biāo)則較為復(fù)雜，通常是某些特定行為的名詞，沒(méi)有具體直接的參照物。因此在設(shè)計(jì)前，我們要先充分理解功能本身，這個(gè)功能是什么、用戶怎么用，然后提煉關(guān)鍵詞，接著根據(jù)關(guān)鍵詞發(fā)散思維，尋找相關(guān)聯(lián)的圖形來(lái)表示含義。例如“社區(qū)”功能，功能目的是提供一個(gè)讓用戶互相交流的環(huán)境，同時(shí)吸引無(wú)目的的用戶逛起來(lái)發(fā)現(xiàn)感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關(guān)鍵詞：聚在一起、發(fā)現(xiàn)、交流。接著發(fā)散思維進(jìn)行腦暴，聚在一起：一群人-圈子-同一個(gè)世界的人-星球，發(fā)現(xiàn)：看-眼睛；尋找-望遠(yuǎn)鏡-雷達(dá)-指南針，交流：聊天-聊天氣泡-聲波。

六、圖標(biāo)的使用場(chǎng)景

圖標(biāo)運(yùn)用在功能入口上是最基礎(chǔ)的使用場(chǎng)景之一，如首頁(yè)中的金剛區(qū)、個(gè)人中心都會(huì)用到很多圖標(biāo)作為功能入口。

1. 金剛區(qū)

目前國(guó)內(nèi)的APP包含的功能有很多，而金剛區(qū)的作用就整合產(chǎn)品功能并放置在首頁(yè)中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產(chǎn)品功能，增強(qiáng)用戶對(duì)產(chǎn)品的粘性。像美團(tuán)，很多人對(duì)他的了解是一個(gè)外賣工具，但它里面還有很多其他功能，使用金剛區(qū)展示它多元化的服務(wù)。

金剛區(qū)圖標(biāo)通常會(huì)有1～3行，根據(jù)業(yè)務(wù)具體需求做調(diào)整，在每行中會(huì)有4～5個(gè)圖標(biāo)。尺寸范圍一般在40px～48px左右（@1x），同時(shí)會(huì)根據(jù)具體的業(yè)務(wù)需求，調(diào)整大小，最終都是一預(yù)覽效果為準(zhǔn)。

2. 個(gè)人中心

個(gè)人中心是個(gè)人類型功能、運(yùn)營(yíng)活動(dòng)入口和工具的集合地，是除了金剛區(qū)外，含圖標(biāo)最多的一個(gè)地方。個(gè)人中心中包含很多不同類型的功能，可以使用卡片式的設(shè)計(jì)，將功能圖標(biāo)更好地分類。在圖標(biāo)風(fēng)格的選擇上，個(gè)人類型功能是最重要的功能，通常會(huì)以面性風(fēng)格放置在頂部，如果個(gè)人中心中需要展示運(yùn)營(yíng)入口時(shí)，需要減弱個(gè)人類型功能圖標(biāo)的視覺沖擊，會(huì)使用線性風(fēng)格圖標(biāo)。

3. 運(yùn)營(yíng)入口

運(yùn)營(yíng)入口主要作用是讓用戶點(diǎn)擊后跳轉(zhuǎn)到產(chǎn)品活動(dòng)頁(yè)，因此具有強(qiáng)視覺沖擊力的圖標(biāo)，會(huì)更吸引用戶眼球，從而提高點(diǎn)擊運(yùn)營(yíng)入口的機(jī)會(huì)。

因此運(yùn)營(yíng)入口上，通常會(huì)使用面性圖標(biāo)、寫實(shí)向圖標(biāo)或3d圖標(biāo)。因?yàn)閷憣?shí)向圖標(biāo)或3D圖標(biāo)可以提高視覺層級(jí)，因此經(jīng)常運(yùn)用在主要運(yùn)營(yíng)板塊上，而面性圖標(biāo)相比下較弱，當(dāng)頁(yè)面已存在一個(gè)主視覺或主要功能時(shí)，運(yùn)用在運(yùn)營(yíng)板塊上。

4. 主題板塊

在軟件中會(huì)有很多不同主題的信息板塊，同時(shí)信息板塊間有較大的差異，如果全部展示出來(lái)會(huì)使頁(yè)面樣式不同統(tǒng)一、信息混亂導(dǎo)致降低用戶的閱讀體驗(yàn)。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關(guān)鍵信息在頁(yè)面中，保證視覺統(tǒng)一的同時(shí)，還可以起到流量分發(fā)的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗(yàn)。

純文字的排版在信息流中略顯枯燥，而圖標(biāo)在主題板塊中起到潤(rùn)色主題的作用，渲染主題氣氛，提高不同主題板塊的識(shí)別度與差異化。對(duì)于一些長(zhǎng)標(biāo)題的主題板塊，只需要記住圖標(biāo)就能快速定位主題板塊位置。

5. 底部tab欄

底部tab欄功能數(shù)量通常在2～5個(gè)，在設(shè)計(jì)時(shí)，要設(shè)計(jì)點(diǎn)擊前和點(diǎn)擊后兩個(gè)圖標(biāo)狀態(tài)，同時(shí)幫助兩個(gè)狀態(tài)是有明顯的變化。底部tab欄圖標(biāo)大小通常在22px（@1x）左右，而圖標(biāo)底下的文字時(shí)10px（@1x）。底部tab欄作為最常出現(xiàn)的區(qū)域，是傳達(dá)產(chǎn)品品牌感、提升產(chǎn)品辨識(shí)度、記憶點(diǎn)的重要區(qū)域，很多產(chǎn)品都會(huì)在底部tab欄的圖標(biāo)設(shè)計(jì)上加入品牌元素，增強(qiáng)辨識(shí)度。

七、如何提高圖標(biāo)設(shè)計(jì)能力

1. 階段一：臨摹

臨摹是人類學(xué)習(xí)一個(gè)新技能開始，就像嬰兒學(xué)習(xí)父母說(shuō)話一樣。但是一開始很多都不會(huì)臨摹，或者照著畫也不會(huì)，那我們應(yīng)該如何去做？

1.1 臨摹效果不佳

1 ) 提高審美能力，多看一些主流的圖標(biāo)，可以上追波看看目前流行的設(shè)計(jì)風(fēng)格，不行的話就去看看大廠都在畫怎樣的圖標(biāo)。

2 ) 明確自己的能力，對(duì)自己目前的設(shè)計(jì)水平有一個(gè)客觀的評(píng)價(jià)，到一個(gè)怎樣的水平。很多人都急于求成，最基礎(chǔ)的線性圖標(biāo)都不會(huì)就上來(lái)搞輕擬物，畫來(lái)畫去都不好看，最后就放棄了。

3 ) 敢于支出自己的不足，許多人畫了許多時(shí)間去畫一組圖標(biāo)，就很容易被自己催眠，以為自己已經(jīng)畫得很好了，其實(shí)還會(huì)有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對(duì)比原作，自 己有哪些地方?jīng)]有原作做得好的

1.2 會(huì)了，但沒(méi)完全會(huì)

什么是會(huì)了，指的是可以繪制出于優(yōu)秀原作一樣的圖標(biāo)；什么是沒(méi)完全會(huì)，指的是不知道原作是怎么達(dá)到這個(gè)好看的效果的。而且很重要的一點(diǎn)是，你臨摹的作品可能也有一些不好，需要改進(jìn)的地方，以此在這個(gè)階段我們要做的是：

1 ) 多看別人總結(jié)的知識(shí)點(diǎn)，知道如何去判斷一個(gè)圖標(biāo)是否還有可以改進(jìn)的地方，這樣繪制是不是正確的

2 ) 懂得總結(jié)與思考，原作是用來(lái)什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪

2. 階段二：半原創(chuàng)

臨摹是一個(gè)提升自己的手法，但不代表可以直接用到自己的作品中，直接復(fù)制別人的設(shè)計(jì)，并不叫設(shè)計(jì)師，復(fù)制粘貼誰(shuí)不會(huì)啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創(chuàng)。這里說(shuō)的半原創(chuàng)不是指在別人圖標(biāo)的基礎(chǔ)上加上兩筆就是半原創(chuàng)，而是要吸取了優(yōu)秀圖標(biāo)的優(yōu)點(diǎn)后，重新設(shè)計(jì)出一個(gè)有相同特點(diǎn)的圖標(biāo)。那我們應(yīng)該如何半原創(chuàng)呢？

1 ) 還是多看，但是不同于臨摹階段，我們?cè)谂R摹的時(shí)候還要多想，這個(gè)圖標(biāo)的特點(diǎn)是什么、怎么做、還能怎么用，積累圖標(biāo)不同的表現(xiàn)形式2 ) 多練，這個(gè)建立在多臨摹上，目的知道別人的技法是什么做的，練習(xí)了不同的技法后，將它們?cè)偃诤显谝黄?

3. 階段三：原創(chuàng)

第三個(gè)階段，也是最難得階段。目前很多情況都是只能成為融圖設(shè)計(jì)師，將不同作品優(yōu)秀的點(diǎn)組合起來(lái)。但如果要建立自己的風(fēng)格也是要做融圖設(shè)計(jì)師的基礎(chǔ)上，多想、多嘗試，敢于突破，在一次次的融圖后，發(fā)現(xiàn)出自己的特點(diǎn)，為自己的作品打上自己標(biāo)簽，輸出具有差異化特點(diǎn)的設(shè)計(jì)。最有印象的就是夸克的設(shè)計(jì)，品牌特色很明顯，其實(shí)我們每個(gè)人也可以成為一個(gè)品牌，只要我們足夠努力

有人說(shuō)它是全世界最牛逼的APP，因?yàn)樗乃惴y度和春運(yùn)期間訪問(wèn)量幾乎是全球之最；但有人說(shuō)它是全世界最垃圾的APP，因?yàn)樵谑褂眠@個(gè)產(chǎn)品的過(guò)程中，遇見很多奇葩、憤怒的體驗(yàn)。關(guān)于這兩種說(shuō)法，眾說(shuō)紛紜，本期設(shè)計(jì)大偵探，就來(lái)全面拆解鐵路12306APP，一起來(lái)看看這個(gè)產(chǎn)品到底是如何設(shè)計(jì)的，用戶體驗(yàn)如何。

一、導(dǎo)讀

1. 內(nèi)容結(jié)構(gòu)
全文9700字，分為六個(gè)部分，分別是導(dǎo)讀、產(chǎn)品畫像、出行服務(wù)、內(nèi)容服務(wù)、思考總結(jié)和后記，你可以通過(guò)下面的思維導(dǎo)圖對(duì)本文內(nèi)容快速的了解。

2. 適合人群
第一類，UI/交互設(shè)計(jì)師，可以跳出執(zhí)行層，全方位體驗(yàn)12306的產(chǎn)品設(shè)計(jì)，多維度去思考和總結(jié)如何規(guī)避類似的陷阱；第二類，產(chǎn)品經(jīng)理/運(yùn)營(yíng)，通過(guò)全面的產(chǎn)品設(shè)計(jì)拆解、體驗(yàn)反饋，獲取產(chǎn)品設(shè)計(jì)參考；第三類，旅游及出行相關(guān)行業(yè)從業(yè)者，通過(guò)對(duì)12306的全面拆解，獲取競(jìng)品設(shè)計(jì)參考。

3. 分析模型
第一個(gè)，增長(zhǎng)模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對(duì)應(yīng)用戶生命周期中的5個(gè)重要環(huán)節(jié)，主要用于拆分和分析產(chǎn)品的功能價(jià)值。
第二個(gè)，尼爾森十大可用性原則。尼爾森十大可用性原則是界面設(shè)計(jì)中最基礎(chǔ)、最重要的設(shè)計(jì)原則，任何產(chǎn)品的設(shè)計(jì)，都可以通過(guò)這十個(gè)原則進(jìn)行指導(dǎo)設(shè)計(jì)。尼爾森十大原則包括即系統(tǒng)可見性原則、環(huán)境貼切原則、撤銷重做原則、一致性原則、防錯(cuò)原則、易取原則、靈活高效原則、易掃原則、容錯(cuò)原則、人性化幫助原則，通過(guò)這十大原則，可以對(duì)12306的產(chǎn)品設(shè)計(jì)體驗(yàn)進(jìn)行全面的校驗(yàn)和偵查。
第三個(gè)，設(shè)計(jì)心理學(xué)。包括常見的格式塔原理、費(fèi)茨定律、巴甫洛夫反應(yīng)、7±2效應(yīng)、席克定律等常見設(shè)計(jì)基礎(chǔ)理論。

二、產(chǎn)品畫像

1. 產(chǎn)品介紹
鐵路12306是中國(guó)鐵路客戶服務(wù)中心推出的官方手機(jī)購(gòu)票應(yīng)用軟件，主要為全國(guó)各地的乘客提供火車票預(yù)定、機(jī)票預(yù)訂、汽車票預(yù)訂等購(gòu)票業(yè)務(wù)，首個(gè)版本發(fā)布于2012年10月16日，根據(jù)易觀千帆數(shù)據(jù)，截止到2022年10月，12306月活躍用戶人數(shù)6,923.78萬(wàn)。

2. 用戶畫像
鐵路12306的用戶群體主要以男性用戶居多，占比65.04%，女性占比34.96%；從年齡分布看，以24-30歲的用戶群體最多，占比36.52%，31到35歲的用戶占比24.23%，36到40歲占比20.27%，41歲以及以上占比10.30%；從用戶消費(fèi)能力看，中高消費(fèi)者占比33.48%，中等消費(fèi)者占比30.43%，高消費(fèi)者占比14.70%；從地域分布看，新一線城市用戶最多，占比27.93%，一線城市占比19.93%，二線城市占比19.00%，其中廣州用戶最多，其次為深圳、杭州和北京。

3. 信息結(jié)構(gòu)
鐵路12306的一級(jí)菜單包含首頁(yè)、出行服務(wù)、訂單、鐵路會(huì)員和用戶中心?！甘醉?yè)」主要為用戶提供火車票、飛機(jī)票和汽車票的購(gòu)買，其次還提供各種快捷功能入口和酒店預(yù)訂等服務(wù)；「出行服務(wù)」主要為用戶提供約車、酒店、訂單等服務(wù)；「訂單」是可查詢和管理在12306的各種訂單；「鐵路會(huì)員」是12306的會(huì)員版塊，提供車票兌換、會(huì)員活動(dòng)等內(nèi)容；用戶中心提供個(gè)人資料管理、出行向?qū)Ш统Ｓ霉δ艿葍?nèi)容。

4. 重要迭代記錄
根據(jù)七麥數(shù)據(jù)統(tǒng)計(jì)，鐵路12306的APP首個(gè)版本發(fā)布于2012年10月16日，截止到2023年1月12日，APP版本已經(jīng)更新至V5.6.3版本，近一年版本更新次數(shù)為5次。
版本重要迭代記錄
2021年9月，發(fā)布V5.4.0版本，新增無(wú)障礙功能、老人及障礙人士購(gòu)票更便捷，即愛心版；

5. 產(chǎn)品生命周期
作為中國(guó)鐵路客戶服務(wù)中心的官方購(gòu)票平臺(tái)，鐵路12306距離首個(gè)版本發(fā)布時(shí)間已經(jīng)過(guò)去10年。從易觀千帆數(shù)據(jù)觀察，截止到2022年10月，12306月活躍用戶人數(shù)6,923.78萬(wàn)，日均活躍人數(shù)811.65萬(wàn)。由于是國(guó)有企業(yè)運(yùn)營(yíng)，而且是壟斷業(yè)務(wù)，12306沒(méi)有任何商業(yè)變現(xiàn)的壓力，從產(chǎn)品發(fā)布時(shí)間和活躍用戶人數(shù)看，目前處于產(chǎn)品生命周期的成熟期。

6. 競(jìng)爭(zhēng)圖譜
截止到2022年10月，易觀千帆數(shù)據(jù)顯示，鐵路12306APP在蘋果的APP Store應(yīng)用市場(chǎng)APP總排名71位，旅游類排名第一，汽車火車船票預(yù)定類第一，月活躍用戶人數(shù)幾乎是其他APP的總和。

三、出行服務(wù)
作為12306最核心、最重要以及實(shí)現(xiàn)商業(yè)變現(xiàn)的服務(wù)，出行服務(wù)主要為用戶提供火車票、飛機(jī)票的銷售，其次還鏈接了眾多第三方合作伙伴，為用戶在出行的各種場(chǎng)景提供了便捷的服務(wù)。

1. 票務(wù)
「票務(wù)」是12306最核心的服務(wù)，主要為用戶提供火車票、飛機(jī)票和汽車票的查詢以及銷售，其次12306還對(duì)三種產(chǎn)品進(jìn)行了組合，推出了空鐵聯(lián)運(yùn)、鐵水聯(lián)運(yùn)這樣的服務(wù)。
1.1 火車票
「火車票」就是為用戶提供火車和動(dòng)車的票務(wù)銷售，用戶輸入出發(fā)站、終點(diǎn)站和時(shí)間以后，就可以進(jìn)行查詢，其次還支持對(duì)已購(gòu)買的車票進(jìn)行變更到站、改簽和退票。
1.1.1 售票
1.1.1.1 售票頁(yè)
當(dāng)用戶輸入目標(biāo)站點(diǎn)以后，就進(jìn)入了售票頁(yè)。在這個(gè)頁(yè)面，可以看到當(dāng)天列車的所有車次，包括直達(dá)、中轉(zhuǎn)、出發(fā)時(shí)間和剩余票數(shù)。在底部，有一個(gè)菜單欄，包含了篩選、耗時(shí)最短、發(fā)時(shí)最早、顯示票價(jià)和候補(bǔ)下單五個(gè)功能，這主要是幫助用戶快速尋找符合自己需求的車次，比如出發(fā)車站、出發(fā)時(shí)間等。

體驗(yàn)陷阱
這個(gè)頁(yè)面的操作體驗(yàn)不太友好，底部的菜單欄不僅沒(méi)有實(shí)現(xiàn)全屏手機(jī)設(shè)備的兼容，而且?guī)缀鹾捅尘暗脑刭N合在一起，不夠醒目，如果用戶不注意，根本無(wú)法發(fā)現(xiàn)底部竟然還有一排菜單欄幫助用戶進(jìn)行高效的檢索。
1.1.1.2 訂單頁(yè)
①在用戶選擇好車次以后，就進(jìn)入訂單頁(yè)。用戶需要選擇座位的系別，包括硬座、軟座、二等座、一等座、特等座等。

②用戶需要選擇乘車人。添加乘車人的步驟比較簡(jiǎn)單，在輸入用戶的真實(shí)姓名、身份證號(hào)碼和手機(jī)號(hào)碼以后，即可添加成功。首次使用12306的用戶需要進(jìn)行身份核驗(yàn)，用戶需要通過(guò)驗(yàn)證系統(tǒng)發(fā)送的核驗(yàn)信息才能添加成功。
細(xì)節(jié)偵查
「姓名」這里有一個(gè)非常友好的設(shè)計(jì)體驗(yàn)，那就是針對(duì)無(wú)法輸入的生僻字、名字超過(guò)30個(gè)字符，以及外籍用戶的極端情況都給出了詳細(xì)的指導(dǎo)，針對(duì)用戶可能出現(xiàn)的極端的情況給與及時(shí)的提示，這就是尼爾森十大原則中的容錯(cuò)原則，幫助用戶從錯(cuò)誤中恢復(fù)，將損失降到最低。
③在「選擇乘車人」的右邊，還有一個(gè)「選擇受讓人」的功能。這個(gè)功能有很高的學(xué)習(xí)成本，會(huì)讓用戶摸不著頭腦。我也是通過(guò)百度查詢才了解到這是一個(gè)用戶權(quán)益功能，它主要是指用戶可以把平時(shí)購(gòu)買火車票獲得的積分轉(zhuǎn)讓給指定的用戶，積分又可以抵消火車票款，從而實(shí)現(xiàn)抵扣。

④選擇好乘車人以后，用戶可以進(jìn)行選座，就進(jìn)入了提交訂單、支付費(fèi)用的環(huán)節(jié)。
1.1.1.3 支付頁(yè)
①訂單生成后，用戶需要在付款限定時(shí)間內(nèi)支付火車票費(fèi)用，否則訂單將會(huì)取消。其次在支付頁(yè)，也向用戶推薦相關(guān)的保險(xiǎn)服務(wù)，比如鐵路乘意險(xiǎn)，又分為平安險(xiǎn)、行運(yùn)險(xiǎn)和順意險(xiǎn)，主要為乘客提供意外傷害疾病身故等保險(xiǎn)。

②「購(gòu)買返程」其實(shí)一個(gè)非常便捷的功能，但12306設(shè)計(jì)的層級(jí)太深了，而且沒(méi)有加上一鍵返回首頁(yè)或訂單頁(yè)的按鈕，用戶如果想退回到訂單頁(yè)或首頁(yè)，需要不斷點(diǎn)擊返回，操作路徑實(shí)在太長(zhǎng)。

體驗(yàn)陷阱
底部菜單設(shè)計(jì)了三個(gè)按鈕，違反了費(fèi)茨定律的設(shè)計(jì)原則。用戶在這個(gè)支付頁(yè)的主要目標(biāo)是支付費(fèi)用，但是菜單欄的三個(gè)按鈕權(quán)重設(shè)計(jì)得一樣高，取消訂單和購(gòu)買返程這兩個(gè)按鈕，嚴(yán)重干擾了用戶的選擇，降低了操作效率。
1.1.1.4 支付成功頁(yè)
當(dāng)用戶支付成功以后，「支付成功頁(yè)」為用戶提供餐飲預(yù)訂、出行保險(xiǎn)、酒店入住、網(wǎng)絡(luò)約車等服務(wù)，非常便捷。不過(guò)內(nèi)容的規(guī)劃比較亂，體驗(yàn)稍差。

1.1.1.5 候補(bǔ)下單
「候補(bǔ)下單」是一個(gè)非常方便的功能，這個(gè)功能主要解決在當(dāng)前車次沒(méi)票的情況幫助乘客自動(dòng)排隊(duì)，如果有其他乘客退票，就自動(dòng)搶票，非常貼心。這個(gè)功能也被譽(yù)為黃牛的終結(jié)者，幫助乘客自主排隊(duì)。
1.1.2 變更到站
「變更到站」是指乘客可以更改目標(biāo)站點(diǎn)，進(jìn)入訂單詳情頁(yè)后，點(diǎn)擊「變更到站」按鈕，點(diǎn)擊底部的「立即變更到站」就可進(jìn)入變更頁(yè)面。在變更頁(yè)面，乘客可以重新輸入目標(biāo)站點(diǎn)，然后再次進(jìn)入車票售票頁(yè)，選中需要變更的車次以后，進(jìn)入訂單頁(yè)提交訂單，變更成功。需要注意的是，變更到站只能辦理一次。

體驗(yàn)陷阱
當(dāng)用戶點(diǎn)擊「變更到站」的時(shí)候，如果不注意觀察頁(yè)面，根本感受不出原來(lái)需要在底部菜單欄進(jìn)行操作，會(huì)讓乘客陷入焦躁，不知道下一步從哪里進(jìn)入。其次在變更到站頁(yè)面，下半部分設(shè)計(jì)了很多快捷入口，比如車站大屏、約車、餐飲特產(chǎn)等，把用戶的注意力分散了。這兩個(gè)設(shè)計(jì)都嚴(yán)重了違反了費(fèi)茨定律和席克定律，大大降低了用戶的操作效率。
1.1.3 改簽
「改簽」是指用戶可以更改出行的時(shí)間，改簽的流程和「變更到站」相似，進(jìn)入售票頁(yè)后，選中需要變更的車次，進(jìn)入訂單頁(yè)提交訂單，改簽成功。需要注意的是，車票改簽只能辦理一次，開車前48小時(shí)以上，退票費(fèi)為票價(jià)5%，24小時(shí)至48小時(shí)之間為10%，不足24小時(shí)為20%。退票費(fèi)最少2元起步。

1.1.4 退票
「退票」是指用戶可以退掉已經(jīng)購(gòu)買的車票，退票流程比較簡(jiǎn)單，點(diǎn)擊退票后，進(jìn)入退票確認(rèn)頁(yè)，點(diǎn)擊確認(rèn)退票成功。需要注意是，距離開車前8天以上的不收退票費(fèi)，其他的時(shí)段將會(huì)根據(jù)列車開車前的時(shí)間收取手續(xù)費(fèi)，最高20%。

迭代建議
在用戶點(diǎn)擊退票的時(shí)候，應(yīng)該出現(xiàn)彈窗，再次提醒用戶是否確認(rèn)退票，這樣能避免用戶誤操作。這就是尼爾森十大原則的容錯(cuò)原則，幫助用戶從錯(cuò)誤中恢復(fù)，將損失降到最低。
1.1.5 購(gòu)票后
當(dāng)乘客購(gòu)買車票后，12306的首頁(yè)會(huì)加入一個(gè)行程的版塊，向用戶展示最近的行程詳情，其次一級(jí)菜單欄「出行服務(wù)」內(nèi)容也會(huì)同步更新。這個(gè)設(shè)計(jì)非常友好，直觀醒目地告訴乘客最近的行程信息，通過(guò)外部觸發(fā)避免乘客忘記行程。
1.1.5.1 行程頁(yè)
這個(gè)頁(yè)面從上至下包含四個(gè)部分，頭部是乘客詳細(xì)的車次信息，比如出發(fā)時(shí)間、經(jīng)停站、天氣等；中間是車票信息，包含檢票口、座位號(hào)、車次和乘車二維碼等信息；接下來(lái)按乘客出行前服務(wù)、車站/列車服務(wù)和到達(dá)服務(wù)三個(gè)場(chǎng)景為乘客推薦其他服務(wù)，比如餐飲預(yù)定、酒店預(yù)定等服務(wù)；底部是關(guān)于出發(fā)站、到達(dá)站的天氣預(yù)報(bào)信息和優(yōu)惠服務(wù)等信息。

細(xì)節(jié)偵查
行程頁(yè)把乘客的出行拆分為3個(gè)場(chǎng)景，出行前服務(wù)（提供重點(diǎn)客戶預(yù)約、我要選酒店、我要去車站、我要訂餐飲和禁帶物品規(guī)定）、車站/列車服務(wù)（提供臨時(shí)身份證證明、遺失物品查找、我要訂餐飲和站內(nèi)導(dǎo)航）和到達(dá)服務(wù)（遺失物品查找、我要訂酒店、接站約車、旅游景點(diǎn)預(yù)定、投訴建議和站內(nèi)導(dǎo)航），這就是以場(chǎng)景為中心的設(shè)計(jì)——將設(shè)計(jì)工作的焦點(diǎn)從“定義系統(tǒng)的操作”轉(zhuǎn)變到“描述什么人將使用該系統(tǒng)去完成什么任務(wù)”。
1.2 飛機(jī)票
「飛機(jī)票」就是為用戶提供飛機(jī)的票務(wù)銷售，用戶需要輸入出發(fā)站、終點(diǎn)站和出發(fā)時(shí)間，如果攜帶孩子或者嬰兒，還需要單獨(dú)勾選。飛機(jī)票同樣支持改簽和退票。
1.2.1 售票頁(yè)
售票頁(yè)的內(nèi)容非常簡(jiǎn)單，在頭部，用戶可以左右滑動(dòng)選擇時(shí)間，頁(yè)面內(nèi)容以Feed流向用戶展示詳細(xì)的航班信息，其次還為用戶提供了其他出行方案參考。底部設(shè)計(jì)了一個(gè)菜單欄，用戶可以進(jìn)行篩選設(shè)置，還可以根據(jù)價(jià)格高低和出發(fā)時(shí)間排序。

1.2.2 選擇艙位
選中航班班次以后，進(jìn)入到「選擇艙位頁(yè)」，在這個(gè)頁(yè)面可以查看到航班的詳細(xì)信息，比如航空公司、起飛時(shí)間、值機(jī)柜臺(tái)等。用戶需要選擇艙位等級(jí)，比如經(jīng)濟(jì)艙、商務(wù)艙和頭等艙，選中后，即可進(jìn)入預(yù)訂流程。

拓展閱讀
為什么同一架飛機(jī)同一個(gè)經(jīng)濟(jì)艙飛機(jī)票價(jià)格不一樣？這是因?yàn)橐粋€(gè)飛機(jī)的不同艙位實(shí)際上是不同的產(chǎn)品，所以座位有不同的等級(jí)，故而價(jià)格有了出入。其次他們主要的區(qū)別包括但不限于退票改簽的靈活程度、出票期限和目的地停留期限等等。
1.2.3 訂單頁(yè)
在訂單頁(yè)，可以查看到訂單的詳細(xì)信息，包括收費(fèi)說(shuō)明、退改說(shuō)明等，在用戶添加乘客以后，就可以提交訂單。這里需要注意一下，如果乘客攜帶孩子或嬰兒，需要添加兒童出行人。

體驗(yàn)陷阱
當(dāng)乘客勾選了「攜帶兒童或嬰兒」的選項(xiàng)以后，在訂單頁(yè)準(zhǔn)備支付的時(shí)候，系統(tǒng)提示乘客需要返回添加兒童出行人信息。但卻并沒(méi)有告訴乘客如何添加，或直接給出對(duì)應(yīng)的功能跳轉(zhuǎn)鏈接，這讓用戶點(diǎn)擊「返回添加」后卻找不到功能入口。這就違反了尼爾森十大原則的防錯(cuò)原則，不僅在用戶犯錯(cuò)之前沒(méi)有給出提示，犯錯(cuò)了還不給與指導(dǎo)，真的非常糟糕。
1.3 汽車票
「汽車票」為用戶提供客車的票務(wù)銷售，用戶輸入出發(fā)站、終點(diǎn)站和時(shí)間以后，就可進(jìn)入售票頁(yè)。汽車票的訂單流程非常簡(jiǎn)單，在選中客車車次以后，添加乘客支付費(fèi)用后，訂單即可生成。

體驗(yàn)陷阱
用戶在選擇「達(dá)到地」搜索框輸入地名時(shí)候，應(yīng)該提供模糊搜索，比如輸入湖南的地名，應(yīng)該為用戶提示相關(guān)聯(lián)的車站。
1.4 空鐵聯(lián)運(yùn)
空鐵聯(lián)運(yùn)，顧名思義就是把飛機(jī)和高鐵這兩個(gè)產(chǎn)品組合在一起銷售，支持用戶一站式購(gòu)買“飛機(jī)+高鐵”的聯(lián)運(yùn)行程，只需一次購(gòu)票、一次支付。這個(gè)功能的使用場(chǎng)景主要是針對(duì)出發(fā)地和目的地沒(méi)有直飛的航班情況下，為用戶提供飛機(jī)+高鐵的轉(zhuǎn)運(yùn)方案。這個(gè)功能對(duì)于乘客來(lái)說(shuō)，支持一站式購(gòu)買“飛機(jī)+高鐵”車票，可以節(jié)省購(gòu)票時(shí)間，非常友好。

1.5 鐵水聯(lián)運(yùn)
和空鐵聯(lián)運(yùn)一樣，這也是一個(gè)組合產(chǎn)品的銷售，支持用戶一站式購(gòu)買“高鐵+水運(yùn)”的聯(lián)運(yùn)行程。使用場(chǎng)景、功能價(jià)值以及操作流程和空鐵聯(lián)運(yùn)一樣，我們就不必重復(fù)。

1.6 雪具快運(yùn)
12306還推出了一個(gè)雪具快運(yùn)的服務(wù)，為廣大旅客提供多種個(gè)性化雪具寄送產(chǎn)品服務(wù)，還支持隨車辦理或上門辦理寄送服務(wù)，目的是為用戶打造滑雪的新體驗(yàn)?！秆┚呖爝\(yùn)」的操作流程也比較簡(jiǎn)單，采用預(yù)約制，選中服務(wù)后，填寫用戶詳細(xì)信息，支付成功后，訂單生成。

1.7 小結(jié)
作為12306最重要、最核心、最復(fù)雜的功能，從這個(gè)版塊的內(nèi)容拆解和實(shí)操體驗(yàn)來(lái)看，可以看出12306確實(shí)已經(jīng)解決被譽(yù)為全世界最復(fù)雜的搶票算法邏輯（筆者通過(guò)實(shí)操測(cè)試，幾乎都能買到票），特別是在春運(yùn)這種會(huì)出現(xiàn)超過(guò)上億用戶搶票場(chǎng)景，真可謂非常不容易。不過(guò)從用戶體驗(yàn)來(lái)看，非常一般，甚至有很多不合理的設(shè)計(jì)。
2. 出行
出行是12360結(jié)合了乘客在出行的場(chǎng)景中潛在產(chǎn)生的需求設(shè)計(jì)的服務(wù)，有結(jié)合車站商家的在線點(diǎn)餐，有結(jié)合當(dāng)?shù)氐赜蛱厣穆糜畏?wù)，還有約車、保險(xiǎn)、酒店等服務(wù)。這些服務(wù)，多數(shù)由第三方合作方提供。
2.1 餐廳特產(chǎn)
「餐廳特產(chǎn)」是一個(gè)為乘客提供在線點(diǎn)餐的服務(wù)，在乘客輸入列車車次以后，就可以進(jìn)行點(diǎn)餐，支持外賣配送至列車和到店自取兩種形式。這個(gè)功能設(shè)計(jì)得很友好，不僅解決乘客在乘車前的就餐問(wèn)題，為車站的商家引流，還可以增加平臺(tái)的變現(xiàn)方式。

2.2 鐵路游
「鐵路游」是12306結(jié)合旅游出行的場(chǎng)景，為乘客推出的一項(xiàng)旅游服務(wù)，包含旅游專列、跟團(tuán)游、周末游和自由行等。這個(gè)場(chǎng)景的鏈接其實(shí)非常好，但是版塊目前設(shè)計(jì)得比較簡(jiǎn)單，內(nèi)容也比較少。

2.3 約車
「約車」是為乘客提供接送站、接送機(jī)、打車和租車的服務(wù)。這是一個(gè)強(qiáng)剛需的需求，用戶在出行的前后都有用車服務(wù)。為乘客提供約車服務(wù)，不僅能增加變現(xiàn)方式，還能方便乘客出行。通過(guò)實(shí)操體驗(yàn)，約車主要由第三方合作方提供服務(wù)，比如曹操出行、T3出行等公司，為乘客提供出租車、品質(zhì)專車和商務(wù)車等車型。

2.4 保險(xiǎn)
保險(xiǎn)分為乘意險(xiǎn)和出行保險(xiǎn)。鐵路乘意險(xiǎn)分為平安險(xiǎn)、行運(yùn)險(xiǎn)和順意險(xiǎn)，主要為乘客提供意外傷害疾病身故等保險(xiǎn)，在乘客購(gòu)買鐵路的訂單頁(yè)就會(huì)向乘客推薦，乘意險(xiǎn)價(jià)格低，保障項(xiàng)目包含意外身故、傷殘、醫(yī)療費(fèi)用、住院津貼等。出行保險(xiǎn)由第三方公司中國(guó)太平洋保險(xiǎn)提供，主要為乘客提供出行安心保、空鐵聯(lián)運(yùn)險(xiǎn)和旅程預(yù)定取消險(xiǎn)。

2.5 酒店
酒店這個(gè)版塊的內(nèi)容相對(duì)夯實(shí)，不僅有新客大禮包這樣的用戶權(quán)益，還有商旅專區(qū)、今夜甩賣、高端酒店這樣的內(nèi)容。甚至還設(shè)計(jì)了專門的酒店會(huì)員VIP，包含普通會(huì)員、銀卡會(huì)員、金卡會(huì)員、白金卡會(huì)員和黑金卡會(huì)員，相對(duì)其他版塊而言，這個(gè)版塊花了比較多的心思。

2.6 鐵路商城
鐵路商城是12360以鄉(xiāng)村振興·幫扶推介為主題打造的一個(gè)商城，包含了幫扶專區(qū)、優(yōu)選好物、兌換專區(qū)、今日特賣等內(nèi)容，其次還支持企業(yè)集采，批量購(gòu)買。

2.7 小結(jié)
從這個(gè)版塊，可以看出12360其實(shí)結(jié)合了用戶吃穿住行的剛需場(chǎng)景設(shè)計(jì)了對(duì)應(yīng)的服務(wù)，有自主運(yùn)營(yíng)也有完全依靠第三方提供。不過(guò)整體的用戶體驗(yàn)比較差，事實(shí)上可以參考像順豐速運(yùn)、智聯(lián)招聘這些APP，通過(guò)內(nèi)置小程序的形式來(lái)設(shè)計(jì)，完全可以把這些版塊讓第三方單獨(dú)設(shè)計(jì)和維護(hù)，同時(shí)還能為用戶帶來(lái)更好的體驗(yàn)。
3. 會(huì)員
鐵路暢行會(huì)員是中國(guó)鐵路統(tǒng)一對(duì)外會(huì)員服務(wù)品牌，開通暢行會(huì)員不需要花錢，暢行會(huì)員主要是用于會(huì)員用戶積累乘車積分、用積分兌換車票等，主要包含積分權(quán)益，兌換車票、無(wú)票候補(bǔ)和會(huì)員活動(dòng)四大會(huì)員權(quán)益。這個(gè)頁(yè)面設(shè)計(jì)得比較簡(jiǎn)陋，也沒(méi)有太多價(jià)值的內(nèi)容，可以看出12306在用戶運(yùn)營(yíng)方面比較欠缺。

4. 訂單
12306的訂單包含了火車票訂單、餐飲訂單、保險(xiǎn)訂單、酒店訂單、空鐵聯(lián)運(yùn)訂單、計(jì)次定期票訂單、約車訂單、出站引導(dǎo)服務(wù)訂單、鐵路商城訂單、汽車票訂單、旅游訂單和鐵水聯(lián)運(yùn)訂單多達(dá)12種訂單，從這些訂單類型可以看出12306的服務(wù)特別多。

體驗(yàn)陷阱
這個(gè)設(shè)計(jì)實(shí)在太糟糕，嚴(yán)重違反了7±2效應(yīng)。琳瑯滿目，花枝招展，讓用戶在這個(gè)頁(yè)面幾乎迷失。更糟糕的是，當(dāng)你有一個(gè)非常重要的待支付訂單，這個(gè)頁(yè)面竟然沒(méi)有角標(biāo)提醒，最終你會(huì)因?yàn)檫@個(gè)糟糕的設(shè)計(jì)打亂自己的行程計(jì)劃。

四、內(nèi)容服務(wù)

內(nèi)容服務(wù)是幫助產(chǎn)品實(shí)現(xiàn)用戶留存和運(yùn)營(yíng)的版塊，不過(guò)從12306的內(nèi)容設(shè)計(jì)來(lái)看，整個(gè)產(chǎn)品的運(yùn)營(yíng)手段比較少，所以我把12306現(xiàn)有設(shè)計(jì)的功能拆分為便捷功能和向?qū)Чδ堋?/span>

1. 便捷功能
以下這七個(gè)功能，對(duì)用戶而言，是非常便捷、友好的功能，可以幫助用戶在出行的旅途中獲取很多幫助。
1.1 車站大屏
「車站大屏」是一個(gè)非常貼心的功能，通過(guò)這個(gè)功能，可以為用戶提供車站的實(shí)時(shí)列車信息，非常方便。大屏詳情頁(yè)可以拆分為三塊內(nèi)容，左上角可以切換全國(guó)各地的火車站，頭部還有搜索框，為用戶提供車次的查詢，主體內(nèi)容是當(dāng)前車站向西的車次信息，包含發(fā)車時(shí)間、候車室、檢票口和候車狀態(tài)等。

1.1.1 車次詳情頁(yè)
進(jìn)入列車的「車次詳情頁(yè)」，可以查看當(dāng)前車次的完整信息，比如檢票狀態(tài)、候車室、檢票口和全程停靠站、停留信息。在這個(gè)頁(yè)面，還提供了「關(guān)注列車」的功能（關(guān)注后并無(wú)關(guān)注數(shù)據(jù)，顯得很雞肋），以及直接預(yù)訂當(dāng)前車次的入口。

1.1.2 車站詳情頁(yè)
「車站詳情頁(yè)」就像一個(gè)站點(diǎn)的主頁(yè)，為用戶提供完整的車站信息查詢。這個(gè)頁(yè)面可以拆分為四塊，頭部可以切換其他站點(diǎn)，并提供當(dāng)前車站的天氣情況以及車站基礎(chǔ)信息。金剛區(qū)位8個(gè)功能入口，包含車站車次、站內(nèi)導(dǎo)航、重點(diǎn)旅游、餐飲服務(wù)、周邊酒店等。中間是當(dāng)前車站的起售時(shí)間和換乘時(shí)間，底部是車站附近周邊的酒店精選。

迭代建議
這個(gè)頁(yè)面把車站當(dāng)做一個(gè)主體，聚合了一個(gè)車站完整的功能，其實(shí)挺有創(chuàng)意，但頁(yè)面隱藏得很深，如果不去拆解，幾乎很難發(fā)現(xiàn)，很是可惜。我認(rèn)為完全可以提高權(quán)重，升級(jí)為一級(jí)欄目，代替會(huì)員，或者和出行欄目進(jìn)行整合升級(jí)。
1.2 站內(nèi)導(dǎo)航
「站內(nèi)導(dǎo)航」提供目標(biāo)車站的LBS導(dǎo)航，對(duì)于乘客來(lái)說(shuō)，到達(dá)一個(gè)陌生的站點(diǎn)，需要清晰的指引，這是一個(gè)非常便捷、溫馨的功能，能幫乘客解決很多問(wèn)題。不過(guò)這里有一個(gè)莫名其妙的設(shè)計(jì)，那就是進(jìn)入這個(gè)功能之前，系統(tǒng)提示請(qǐng)搖“8”字校準(zhǔn)手機(jī)，事實(shí)上這里是一個(gè)加載動(dòng)畫，但是畫面和內(nèi)容卻誤導(dǎo)了用戶，我甚至每次進(jìn)入都傻乎乎的搖動(dòng)手機(jī)。

1.3 臨時(shí)身份證
臨時(shí)身份證是一個(gè)非常重要的功能，12306現(xiàn)在支持APP在線申請(qǐng)，極大方便了乘客的出行。申請(qǐng)流程也比較簡(jiǎn)單，填寫個(gè)人信息，驗(yàn)證審核通過(guò)后，就可以生成電子證照使用。每個(gè)人每個(gè)月有3次申請(qǐng)臨時(shí)乘車身份證機(jī)會(huì)。

1.4 遺失物品
這是一個(gè)非常貼心的功能，如果你在乘車的過(guò)程中不小心丟失物品，可以通過(guò)這個(gè)功能登記，輸入你的詳細(xì)信息就能登記成功。

1.5 重點(diǎn)旅客
這也是一個(gè)非常貼心的功能，主要為老年人、殘疾人服務(wù)，通過(guò)填入你的信息，列車會(huì)根據(jù)你的情況提供優(yōu)先進(jìn)站、協(xié)助乘降等服務(wù)。

1.6 愛心版
愛心版就是長(zhǎng)輩版，專門為中老年用戶設(shè)計(jì)的版本，在用戶中心切換后就可進(jìn)入愛心版。整個(gè)版本設(shè)計(jì)得非常簡(jiǎn)潔，操作步驟也比較簡(jiǎn)單，對(duì)中老年用戶比較友好。

1.7 英文版
英文版在用戶中心的設(shè)置點(diǎn)擊語(yǔ)言即可切換，整體的版本設(shè)計(jì)得直接簡(jiǎn)潔，用戶體驗(yàn)不錯(cuò)。

1.8 小結(jié)
從這個(gè)版塊可以看出，一個(gè)產(chǎn)品如果以用戶為中心去設(shè)計(jì)，是可以為用戶帶來(lái)很大的便捷和愉悅體驗(yàn)。比如像臨時(shí)身份證這樣的功能，過(guò)往我們只能提前出發(fā)去車站排隊(duì)辦理，但如今12306已經(jīng)把這樣的痛點(diǎn)解決，為用戶節(jié)省了大量的時(shí)間。
2. 向?qū)Чδ?/span>
以下8個(gè)功能，雖然屬于出行向?qū)?，不過(guò)體驗(yàn)下來(lái)，感覺用戶體驗(yàn)比較差，很多功能完全無(wú)法弄懂它的設(shè)計(jì)目的是什么，顯得非常雞肋。
2.1 快捷退票
「快捷退票」這個(gè)功能的設(shè)計(jì)，讓人摸不著頭腦。從操作流程看，首先需要輸入用戶的詳細(xì)信息，包括姓名、身份證號(hào)碼和手機(jī)，其次需要進(jìn)行人臉核驗(yàn)，到了第三步還需要選擇車票的日期車次，在最后的退票操作頁(yè)面，用戶點(diǎn)擊退款后，沒(méi)有和用戶再次確認(rèn)就直接退票。整個(gè)流程體驗(yàn)下來(lái)，非常糟糕。

體驗(yàn)陷阱
這個(gè)功能和訂單頁(yè)的退票感受不出來(lái)有何區(qū)別？如果用戶要退款，不如直接去訂單頁(yè)進(jìn)行退票，操作步驟簡(jiǎn)單，一目了然。其次不支持自動(dòng)導(dǎo)入用戶的購(gòu)票信息實(shí)在太不方便，需要通過(guò)選擇車票購(gòu)買日期和車次，這個(gè)設(shè)計(jì)實(shí)在讓人生氣和憤怒（我在體驗(yàn)的過(guò)程中到了第三步只能退回到訂單頁(yè)把購(gòu)票日期和車次截圖下來(lái)，又再次重復(fù)前面兩個(gè)步驟才到這個(gè)步驟）。
2.2 聯(lián)系方式
這也是一個(gè)看不懂的功能，進(jìn)入頁(yè)面后，需要用戶輸入乘客的詳細(xì)信息，但是這個(gè)乘客信息和用戶在購(gòu)買車票時(shí)候需要添加到乘客信息有什么不同？更糟糕的是，當(dāng)你把自己的電話號(hào)碼、身份證信息填入后，系統(tǒng)會(huì)顯示核驗(yàn)成功，然而當(dāng)你再一次進(jìn)入，頁(yè)面內(nèi)容還是和之前并無(wú)區(qū)別，你不知道自己是不是還要重新輸一次？

2.3 時(shí)刻表
「時(shí)刻表」主要為乘客提供查詢列班車次的出發(fā)時(shí)間和到站信息，但這個(gè)功能「車站大屏」幾乎已經(jīng)包含了，這個(gè)功能顯得意義不大。

2.4 查票價(jià)
這個(gè)功能非常雞肋，因?yàn)樵诨疖嚻钡氖燮痹斍轫?yè)就可以清晰直觀地查詢到列車票價(jià)信息，相反在這個(gè)頁(yè)面，根本無(wú)法看到價(jià)格，因?yàn)閮r(jià)格的字體大小只有20px，乘客幾乎很難注意到。

2.5 查代售點(diǎn)
這個(gè)功能主要為用戶提供全國(guó)各地火車票代售點(diǎn)的查詢，不過(guò)在互聯(lián)網(wǎng)技術(shù)發(fā)展到今天，火車票代售點(diǎn)越來(lái)越少了。從12306采集的信息來(lái)看，部分代售點(diǎn)缺少電話等關(guān)鍵信息，對(duì)用戶來(lái)說(shuō)，比較雞肋。

2.6 起售時(shí)間
這個(gè)功能為用戶提供各車站每日的起售時(shí)間，屬于一個(gè)低頻功能，可以解決乘客某些極端場(chǎng)景的需求。不過(guò)在我體驗(yàn)下來(lái)，比如通過(guò)此功能查詢1月29日的車票，顯示北京站起售時(shí)間為10:00，但是在火車售票版塊，我也可以直接購(gòu)買1月29日的車票，這讓我比較疑惑這個(gè)功能的價(jià)值在哪里。

2.7 正晚點(diǎn)
「正晚點(diǎn)」同樣是一個(gè)雞肋功能，而且還需要輸入準(zhǔn)確的車次才能進(jìn)行查詢，車站大屏已經(jīng)完美可以取代這個(gè)功能。

2.8 列車狀態(tài)
「列車狀態(tài)」比正晚點(diǎn)都還雞肋，讓人憤怒，因?yàn)槟阈枰斎胝_的出發(fā)地、到達(dá)地和出發(fā)時(shí)間，對(duì)了，還有正確的車次才能進(jìn)行查詢，這樣的操作成本比下載12360APP都還麻煩。

2.9 小結(jié)
從這個(gè)部分的內(nèi)容拆解和操作體驗(yàn)來(lái)看，12360的產(chǎn)品設(shè)計(jì)得不夠細(xì)致和貼心，很多功能就像是硬生生塞進(jìn)去一樣，濫竽充數(shù)。其次從他們的產(chǎn)品迭代記錄次數(shù)可以看出，近1年更新時(shí)間只有5次，也許每一次都是在做加法，沒(méi)有想過(guò)做減法，所以導(dǎo)致這部分的功能顯得雞肋而且有很大缺陷。

五、思考總結(jié)

通過(guò)對(duì)鐵路12306的全面拆解，接下來(lái)我將從內(nèi)容層、功能層、體驗(yàn)層和視覺層進(jìn)行總結(jié)。
1. 內(nèi)容層
12306整個(gè)產(chǎn)品的內(nèi)容設(shè)計(jì)，用一句話總結(jié)，可以歸納為——心有余力而不足?？梢钥吹?2306圍繞乘客購(gòu)票、出行的潛在需求場(chǎng)景都設(shè)計(jì)了對(duì)應(yīng)的服務(wù)，比如酒店、約車、點(diǎn)餐、商城等，甚至還有空鐵聯(lián)運(yùn)、鐵水聯(lián)運(yùn)這種多場(chǎng)景的組合售票方式，不過(guò)在實(shí)際的版塊內(nèi)容打造中，則顯得比較空洞，體驗(yàn)一般。這個(gè)產(chǎn)品，可以說(shuō)幾乎沒(méi)有創(chuàng)新點(diǎn)，這主要也是由于它是由國(guó)有企業(yè)設(shè)計(jì)運(yùn)營(yíng)，背景極其復(fù)雜，設(shè)計(jì)目標(biāo)也飄忽不定。
2. 功能層
在2015年之前，鐵路12360承擔(dān)了被譽(yù)為歷史上人口遷移最大的春運(yùn)的搶票工作，那時(shí)候一票難求，春運(yùn)去12360就像是一場(chǎng)噩夢(mèng)。不過(guò)在經(jīng)過(guò)多年的升級(jí)和優(yōu)化以后，目前12360的購(gòu)票效率非常高，經(jīng)過(guò)筆者多次的測(cè)試和調(diào)研，目前通過(guò)12360購(gòu)票已經(jīng)不再是難事。而且還設(shè)計(jì)了候補(bǔ)搶票這樣的功能，幫助用戶解決買票痛點(diǎn)，可謂非常貼心、友好。
3. 體驗(yàn)層
鐵路12306的用戶體驗(yàn)，非常一般，我在這次的產(chǎn)品拆解中至少偵查出了20條體驗(yàn)陷阱，這些陷阱都會(huì)給用戶帶來(lái)極其糟糕和憤怒的體驗(yàn)。比如讓我像個(gè)傻瓜搖動(dòng)手機(jī)的站內(nèi)導(dǎo)航載入頁(yè)，這完全就是把用戶當(dāng)成傻子一樣看待，其次還有一堆數(shù)不清的雞肋功能，對(duì)用戶的操作體驗(yàn)造成了嚴(yán)重的干擾。我甚至認(rèn)為愛心版和英文版比標(biāo)準(zhǔn)版使用起來(lái)更愉悅，更能減少我的焦慮。
4. 視覺層
作為一個(gè)UI設(shè)計(jì)師，在拆解12306的產(chǎn)品過(guò)程中，我對(duì)整個(gè)產(chǎn)品的設(shè)計(jì)感到絕望。首先，沒(méi)有做到統(tǒng)一性，整個(gè)產(chǎn)品毫無(wú)設(shè)計(jì)規(guī)范，比如卡片的圓角、品牌色、版塊間距根本不統(tǒng)一，這樣的視覺體驗(yàn)一眼望去就非常糟糕；其次，圖標(biāo)、活動(dòng)圖、櫥窗圖以及詳情頁(yè)的設(shè)計(jì)毫無(wú)美感，滿滿的山寨APP風(fēng)格，特別是訂單頁(yè)的ICON，花花綠綠、琳瑯滿目，連最基礎(chǔ)的統(tǒng)一都沒(méi)有做到。

六、后記

作為一款國(guó)民級(jí)用戶APP，鐵路12306仿佛陪伴了80、90后的青春。還記得10年前老家是黑龍江和河北的大學(xué)室友，每年春運(yùn)開啟之前就為了回家的火車票犯愁，不僅要去遙遠(yuǎn)的火車站排隊(duì)，很多時(shí)候還可能空手而回，那便是最初對(duì)12306的記憶。
如今十年過(guò)去了，12306解決了億萬(wàn)人的出行搶票需求，讓我們?cè)诖哼\(yùn)的路上，可以輕松購(gòu)買一張回家的票。但下一個(gè)十年，我更希望12360的產(chǎn)品團(tuán)隊(duì)，可以重視用戶體驗(yàn)設(shè)計(jì)，讓我們不再掉入那些體驗(yàn)陷阱。