總結了商業項目中遇到的一些可視化案例以及科幻可視化風格，大體的將其分為三個大類：傳統風格、HUD風格、FUI風格。
傳統狹義上的數據可視化, 更多是純圖形去代表數據，通過圖形去展示數據，直觀的展示所需要表現的指標。數據可視化也有很多分類, 不過也許你也懶得了解了。
比如，網站后臺分析，可以說是可視化分析報表類的，例如百度統計，谷歌統計等等；比如，面對B端后臺的數據可視化，國內做的最好的無非就是antdesign，element；我們此處說的是基于G端的數據可視化大屏，G端數據可視化從本質上來說是注重直接解決問題，通過直觀的展示數據圖表去了解各個指標的詳細數值；
也有甚者比較注重視覺效果，要酷炫，心理學家說, 人腦70%的神經信號來自視覺, 我們的視覺系統最完善, 而不同的感官之間, 多少是可以轉化的, 而且是每個人的天性。國內傳統可視化對于此處的接受程度確實不一樣。B端和G端的用戶，對于可視化風格的接受程度確實是不太一樣的，B端對于前沿技術以及可視化表現會有一定的接受能力，但是G端更多注重于界面酷炫，功能反而不是很重要了，這多少有點本末倒置的感覺。
平視顯示器(Head Up Display)，以下簡稱HUD，是運用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現在軍用飛機上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷以及喪失對狀態意識(Situation Awareness)的掌握。
因為HUD的方便性以及能夠提高飛行安全，民航機也紛紛跟進安裝，汽車也開始安裝，在一些游戲用戶界面，很多地方都會采用HUD的風格，比如射擊類，格斗類，動作類游戲等等（賽博朋克，堡壘之夜，絕地求生）。
相對于當前流行的扁平化設計，FUI可謂是在Ul設計中獨樹一幟，設計風格十分鮮明，極具未來感和科技感。
FUI是一個非常有趣的Ul設計領域，是我們在日常現實生活之中天法探索的用戶界面設計方式。在我們的日常工作中，通常日常設計很難有機會為宇宙飛船、時間旅行設備，或者感知型人工智能和外星人使用的用戶界面做設計。FUI使設計師有機會去突破現有的用戶體驗和用戶界面的限制，探索一個新的領域。通過虛幻界面設計我們可以大膽的設想以及尋找新的解決方案。例如我們可以大膽的設想AR技術的應用，地圖可以采用全息投影技術、人與智能硬件的環境交互等等。
虛幻界面設計甚至可以是新的發明，它們可以作為一種概念的驗證它們可以啟發我們，提出問題，探索什么可行，什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣，虛幻用戶界面可以激勵人們為未來創造技術。
如何培養和完善自己的可視化設計風格呢？其實這個問題有點狹隘，不同客戶不同使用場景我們可能風格都會不太一樣，但是唯一我們不會變的是我們對于組件圖表的理解，圖表圖形的展示形式。
一個合格的可視化設計師，對于任何可以參考的頁面，都可以迅速領略到可以應用的部分頁面和展示形式，多吸收知識，提升自己，這就是取其精華，去其糟粕的正確解答吧！所以要將現有風格結合，完善設計理念，提升視覺技法，這才是當下比較重要的。
最近由于工作中的一個項目，對自己充滿了懷疑，究竟什么叫科技感？不同的應用場景，科技感是否還依舊有效？同展示條件下不同應用場景，又會有什么樣的差異？究竟是什么樣子的設計，才能被“甲方爸爸"認定為科技感十足，并且很酷炫呢？從酷炫科技感出發，總結了以下四個方面去解析科技感風格。
相信很多可視化設計師聽到最多的一句話：要酷炫，要科技感！每每聽到這句話我都會變得非常暴躁。究竟是酷炫科技感代表可視化？還是數據可視才是可視化的內核？每每遇到這種令人糟心的問題，我想的是如何通過自己的專業知識去解釋，可是我發現根本解釋不清楚，也無法令甲方客戶信服，甚至和同為乙方的總包也無法達成統一戰線。那么我們應該如何去做呢，又應該如何去解釋科技感這個抽象的概念呢？
提到科技感色系一般我們想到的就是藍色系（科技藍），但是很多人可能走進了一個誤區，科技感的專屬色彩并不是只有藍色，而且一些藍色確實讓我們有審美疲勞的感覺。如圖，就是我們比較常見的傳統可視化設計，一眼看去滿屏都是藍色，具有中國特色的藍色科技感。正如所有人都公認的黨建題材為紅色加黃色，那么科技感真的只有藍色專屬嗎？黨建題材都是紅色專屬嗎？
由此可見，紅色并不是黨建題材的專屬色彩，存在即合理，也并沒有說黨建可視化一定要做成紅色的。制約的因素有很多：項目背景，項目需求，設計提案，專業認知等等，可視化大屏歸根結底還是做的是服務設計，因此服務好客戶，得到客戶的認可，就能體現設計的價值。但是在設計稿中可以發現，界面運用到了一些黨建色彩的元素，也是通過這種方式去展示，這也是設計師需要注意的一點。
藍色并不是科技感的專有屬性，任何一種顏色都是可以塑造科技感的感覺的。比如適合用綠色的場景做的界面，沒有做好看，那只能怪自己學藝不精，跟配色無關。不排斥藍色，但是討厭到處都是用藍色，上來就是用藍色。
說到背景這是一個影響科技感非常重要的因素，一張超神比比皆是，一張超鬼也是隨處可見，究竟什么樣的背景才是一個優秀的可視化界面所具備的？不是畫面發光，有閃光點，宇宙或者銀河那種圖；也不是科技點線，帶漸變的線條（混合工具做出來的那種）看起來就特別復雜；也不是那種亮度超過畫面任何一個元素的圖。
科技感的背景所起到的作用應該是襯托畫面，而不是在畫面中比較跳，搶視覺，一大坨發光或者復雜的圖形，只會起到反作用。
圖形應該是以上指標中，最令人可以接受對科技感風格詮釋的一種，科技感的圖形到底有哪些特征，我們又該如何去做呢？
通過以上案例我們可以發現，所謂圖形表現科技感，最大的特征就是點線面應用的多元化，通過一種或者多種規律將點線面組合起來，線條粗細長短不一，點大小不等。在使用圖形進行點綴搭配時，切不可過于花哨，從而搶了主要內容的風頭。
此處可能會出現一些三維樣式的圖形，特殊的視角以及不常見的設計都會增加科技感的元素，但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺得：三維元素太少了，科技感不夠。我就納悶了，到底什么才是科技感？難道科技感只能用三維的來表示了？只能說一定條件下，三維是優于二維展示的，但這也不是絕對的。如果你的場景主視覺本身就是二維范疇的，何必要要求組件三維展示。
下圖的二維科技感表現上肯定是超過三維地球的，至少我是這么認為的。
動效應該是最能體現科技感的方式了，通過動態演示組件，通過動效展示界面，遠遠比靜態頁面要合理的多。動效主要是通過：位移、旋轉、透明度（閃爍）、縮放等方式去制作，形成獨特的動畫節奏。
可以發現科技感動效一般都伴隨著極快的閃爍動畫，動畫的節奏也是比較偏快，再通過出現動畫，字符偏移，剪切路徑等演示組件的形成過程。
可能大家沒有遇到過這種情況，比如在三維建筑可視化中，科技感本身就依賴于場景的表現，但是不知道大家有沒有試過，將三維建筑可視化換成二維GIS之后，我們如何去使畫面表現的更具科技感呢？
圖一，圖二，圖三分別就是替換不同的場景，那么我們來看看這些場景為什么不適合原本的之前的科技感風格呢，我們一起思考一下~
大家可能會覺得科技感只針對于一些特殊的場景，或者說是深色場景，比如一些實景地圖和衛星地圖又該如何去表現科技感的元素呢？那么如果是淺色可視化我們又該如何去做科技感呢？
其實這本身就是一個偽命題，三維表現對畫面的沖擊力是非常強的，對于畫面視覺效果的提升有很大的幫助。不過是否所有的三維就是最合適的呢，這個也確實有待商榷。不過能肯定的是，一定程度上，三維一定會比二維更加具有沖擊，更加具有科技感。
其實最正確的表現就是二維表現加上三維場景展示，兩者相輔相成，對于畫面的展示才是最好的。通過下面這組案例可以發現，二維表現加上三維場景才是最優解。
很多同學對于文字需求如何制作科技感有很多的疑問，通過最近的作圖，總結出四種關于文字排版科技感的展示，總結起來其實就那么幾點：裝飾，圖形，字體，版式，表現形式...
其實對于數據可視化設計科技感的研究，不僅需要了解表現層，更需要上升到業務層。一些特定的圖形或者裝飾，對于畫面的豐富程度一定是有幫助的。
講了這么多，不知道對大家理解科技感是否有幫助，如何提升畫面科技感，是我們做為數據可視化設計必定會面臨的一大難題。希望大家在以后的工作或者項目中，多多酷炫，多多科技感！??！
因此我們要確定的是，根據這四個“W”去確定整體業務框架的基礎構成，這對于設計風格的初步意向確認有著很積極的意義。
who：王局長
when：領導人會議時
where：公安局
what：新基建建設 數字化轉型事項
在領導人會試上，公安局王局長提議通過了關于新基建，數字化轉型的各種措施。面對這一場景，有以下幾個問題。受眾是誰？需要干什么事情？誰去干？數字化轉型怎么做？怎么實現？需要用到的技術？展示風格？重功能？還是重展示？
在有了這些的前提下，對于我們設計風格的選擇就有了很強的指導意義，比如王局長比較喜歡多色搭配，科技感強的風格，主要為了配合展示匯報，那么就可以通過這一些需求，初步制定風格為效果酷炫的展示類大屏，但是主視覺的展示形式還是要根據其他的具體情況去進一步確認。
在面對一些特有的項目時，一般客戶會給出一些參考術語：“3個一帶”，“2個方針”，“八大成果”“三山，兩水，百林，千田”......
面對這種問題，能做的就是理解其包含的真實意義，究竟需要展示哪方面的，了解清楚項目的背景需求，結合客戶所說的一些關鍵字段，剖析以上的內容可以發現，客戶通過一些方針和方法，對“山水林田”進行治理，取得了一些階段性成果。
因此展示的內容可以確定為智慧治理，或者智慧生態方向的，然后就可以根據項目背景的內容去選擇可以應用的具體的一些方案了。
因在到了需求分析的階段，可以根據客戶提供的大量的資料和業務需求，去明確的設計方向，究竟是需要展示哪些內容？可以提供的數據有哪些？展示條件（硬件設施）是否具備？想要的效果有哪些？
比如客戶需要查看到山水林田的各個改進措施的效果，以及改進前后的效果對比。說到這單純的二維GIS和影像已經不太好滿足了，那么可以將場景風格定位到三維展示，需要實際1:1建模，至于是通過WEBGL，UE，UNITY就看各自的團隊擅長的方向了。
場景大體風格確定，那么展示面板需求根據場景去搭建就可以了，這樣一個完整的風格選擇過程就算初步走通了，具體的驗證環節，可以在一次次會議中再去進行交流和修改即可。
展示容易，風格切換皮膚多，可編輯性高，開發難度低，地圖資源較多，適合快速搭建可視化大屏模版，開 源內容較多，前端開發直接調用樣式即可。
展示形式較普通，地圖風格樣式不出彩，設計效果也會打很多折扣，很難與同行拉開差距。
開發過程中可能需要基于高德API以及一些平臺，對封裝地圖進行二次開發，沒有GIS開發經驗的前端，會比較困難。
https://lbs.amap.com/product/mapstyle#/ Mapbox，高德API，百度API，超圖，天地圖等等。
以高德API為例
展示靈活，可下載svg矢量區塊，并可下載json文件直接交付開發，可下鉆到縣級，可編輯性高，一般會結合二維GIS來展示，有插件可以直接繪制全國地圖。
不夠立體，可選樣式比較少，畫面主視覺容易空洞導致畫面效果不強。
開發對于設計圖的一些效果還原比較困難，例如發光，漸變等等。只能做一些比較基礎屬性的修改，對于效果還原可能達不到80%以上。
http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4
以DATAV地圖下載器為例
展示效果好，三維場景，有立體效果，材質貼圖不同效果會完全不一樣，可編輯性較強，相比較二維更推薦這種表現形式。
三維范疇，不會三維知識的小伙伴會比較難，此處會涉及到三維軟件合并擠壓，展UV，漫射貼圖，QGIS制作高度貼圖，PS制作法線貼圖等等知識點。
對于不懂三維的小伙伴比較困難，涉及知識點較多，容易一知半解。
https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA（原作者已授權）
3D地圖建模及貼圖的制作獲取方法
展示形式新穎，展示效果非常好，三維表現往往讓人耳目一新，對于可視化的展示可以說是所見即所得，深得客戶喜愛。
開發難度高，專業性人才比較少，懂三維的設計也是非常的少，對于三維知識以及引擎開發知識需要比較熟悉才行。
人才稀缺，入門難，做好更難，教程自學難度有點大，例如cityengine程序化建模，houdini程序化建模等等。
https://space.bilibili.com/21247145?from=search&seid=10582171815506234319
cityengine程序化建模
主視覺效果強，特殊場景的處理能夠很完美的講清邏輯，對于圖形化的理解有很強的意義。
邏輯復雜，難懂，比較抽象，專業難度高，對業務理解能力需要很強。
邏輯處理比較難，設計效果比較難以想象，設計容易偏離主題，比如數據中臺，是一個非常虛幻的東西，很難講清楚處理邏輯和過程。
https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html
以知識圖譜為例
可視化風格三大分類以及對于圖形的應用（傳統、HUD、FUI）；
如何培養自己的數據可視化設計風格（色彩+圖形+板式）；
影響科技感風格的四大影響因素（配色，圖形，背景，動效）；
設計風格的選擇以及確定思路（根據場景、含義、需求）；
可視化風格的應用以及拓展（各種主視覺的應用優缺難點）。
作者：AYONG_BDR 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
今天就帶大家好好聊一聊可視化大屏設計中的字體、字號、字重、字體優化等一系類注意事項。字體篇主要分為四大模塊：字體選擇與字重、字號規范與應用、字體優化與交接、常用字體與推薦。
文字是界面中最核心的元素，是產品傳達給用戶的主要內容，它的承載體即是字體。從字體的最基本屬性（字族、字類、字重、字號等）說起，熟悉字體的那些特征，了解字體在界面中的作用。
襯線又被稱為“字腳”，襯線體就是有邊角裝飾的字體。我們常用的西文字體Times New Roman等；中文比較常見的比如宋體、明體等。
無襯線體則與襯線體相反，通常是機械和統一粗細的線條，沒有邊角的裝飾。最具代表性的Arial、Helvetica的西文字體，中文比較常見的比如黑體，微軟雅黑等。
無襯線字體所具備的技術感和理性氣質，更受科技型企業或品牌青睞，騰訊谷歌等互聯網企業都是選用的無襯線體；襯線字體的優雅與復古，則常用于藝術性文字，時尚品牌等。
因此在具有濃厚技術的可視化氛圍中，體現科技感和數字感，結合我們的觀測體驗，展示形式等，我們統一選用的字體是無襯線體。
在使用數字屏幕閱讀時，字體的選擇要選用無襯線體（比如黑體，微軟雅黑）厚重一點，不可選用襯線體（比如宋體，書法體）比較單薄。
標題可以用Bold，更厚重，更加醒目，且不需要長時間觀看；正文由于需要長時間觀看，因此采用Regular字重，觀感以及體驗更佳；
英文字體類型的使用，英文選擇更明顯的粗體，因為要展示數據，使得數據展示更加直觀，依舊是選用無襯線體，比較推薦：D-DIN字體。
字重用Regular，更加纖細精致，英文字體分為大小寫，一般推薦使用純大寫模式，因為大寫可以保證字體本身整齊，并且寬高都是一致的，對于排版以及展示會更加友好。
數字字體類型的使用，考慮畫面的字體的種類不超過三種，并考慮到字體的統一性，數字的字體與英文字體保持統一，比較推薦：D-DIN字體。
數字字體的字重盡量使用Bold，因為展示更加明顯，數字的展示一般都為數據展示，在界面的展示中，一般數字字體會比同字號下中文小4-6px，因此展示是保證數據清晰顯示，數字的字體大一點數據才能更清晰，更符合數據可視化展示。
數字字體盡量選用等距字體，比如數字“1”和“0”，有些字體的間距會相應的縮小，我們要選用的就是等距字體，這樣在做一些列表數據對齊的時候，數據展示更加友好。
政府類客戶對于文字大小粗細的追求可以說是非常的偏激，字體加大加粗幾乎成了標配，這種需求下，我們能做的就是在原有規范的基礎上盡量去提升字號和字重。
常規16：9指的是1920*1080的分辨率
在字體大小的選擇上，參考了頁面上常規大小，定義了一套關于不同尺寸下的標準字號，正常1080P頁面，最小字號不小于16px。
此處字號并不是絕對，因為考慮到目標群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗，具體字號大小還需要參考設備清晰度，環境燈光，視距，人為原因等因素。
常規32：9指的是3840*1080的分辨率
在字體大小的選擇上，其實是兩塊1080P的屏幕進行拼接，因此如果畫面內容較多時，定義最小字號不小于16px。
如果畫面內容較少時，具體字號大小還需要參考設備清晰度，環境燈光，視距等因素，對字體進行相應的放大，比例合適即可。
此處字號并不是絕對，因為考慮到目標群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗。
特殊尺寸指的是非主流的分辨率，比如2880*1920的分辨率
這塊的字號大小比較難定義，因為需要考慮的因素很多，總體來說字號大小如果高度在1080px左右，那么就按16:9的字號規范來算。
如果高度高于1080且很多，則需要等比計算或者放大，具體實踐出的準確數值還得需要根據大屏的實際情況來綜合考慮，這里只是提供一些基礎計算方式。
字號的大小受到屏幕大小的影響；
字號的大小受到界面內容的影響；
字號的大小受到觀測距離的影響；
字號的大小受到設備性能的影響；
字號的大小受到主觀人為的影響；
給開發的字體太大怎么辦？如何優化？開發采用默認字體去開發怎么辦？開發用部署電腦沒有這個字體去打發你又該怎么辦？
其實我們可以用一些特殊的方法對原有的字體包進行優化，比如英文字體，我們可以刪除非必要的中文字體和數字，符號，只保留一些必要的英文字母。具體方法如下，我們可以用FontCreator軟件去進行字體的優化與刪減，并修改字體細節，重新命名發布。
同時如果有意向的同學，也可以用自己設計的字體去應用到開發，這樣的操作不是一舉兩得嗎？
優化字體教程：https://www.bilibili.com/video/av82311138
默認字體開發可能有時候會出現文字換行，或者文字放不下的情況，因為不同字體的字間距以及大小可能是不同的，因此在初期就需要跟開發協調好，跟設計效果圖的字體保持同步，這樣才能保證設計效果的還原。
字體的存放一般是有兩種，一種是放到單獨的服務器然后每次加載去服務器訪問字體，另一種是跟代碼放到一起。對于字體大小的要求。本地存儲不需要考慮字體包的大小，云存儲需要考慮字體包大小。
云存儲一般字體包大小的話可以限制在2、3M左右，5、6M的字體包就已經非常大了，太大會影響我們字體的讀取，畫面加載很慢。
最優解就是在部署本地的電腦上安裝你需要的字體，這樣的話程序就自動讀取，可以識別本地部署的字體；如果不支持本地化部署的，字體是存放在服務器或者是跟代碼打包放一起的，可以要求開發在全局代碼中多寫幾個備用的字體。
比如你是Windows系統，哪呢么自帶的就是微軟雅黑，IOS系統自帶的就是蘋方平臺，會自動根據寫出的代碼按順序篩選自帶的系統字體。
一些特別好用的字體，會在設計過程中提升畫面視覺，因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。
可視化商用免費字體鏈接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取碼: owve
中文字體包含了一些可以做標題的一些造型比較好看的字體，比如優設標題黑，站酷高端黑體，盧帥正銳黑體，胡曉波男神體等等?？勺稣淖煮w的比如，蘋方簡體，思源黑體等等。
英文字體和數字字體主要是分享了一些數據展示比較奇特的造型字體，比如：DS-digital、Furore、以及正常數據展示的D-DIN字體家族等。
1、字體的最基本屬性：字族、字類、字重、字號，通過四種基本屬性為切入點，精準的去講述大屏可視化的字體規范和樣式。
2、在可視化大屏設計中，字體更加偏向于無襯線體，無襯線字體所具備的技術感和理性氣質，更受科技型企業或品牌青睞；
3、在可視化大屏中，展示數據的重要性不言而喻，因此要注意中文、英文、數字字體的選擇以及注意事項，一切以數據展示更加明顯為前提；
4、在不同屏幕中，可視化大屏的字號大小規范是有區別的，并且需要結合影響字號的五大因素：屏幕大小、界面內容、觀測距離、設備性能、主觀人為去制定字體規范；
5、通過FontCreator軟件去對字體進行優化，掌握字體的刪減發布以及交付開發的方法；
6、了解開發存儲字體的兩種形式，一種是本地化部署，一種是與代碼打包服務器云存儲，以及了解兩種方式的優缺點；
7、了解可視化開發關于字體交接時的注意事項，可以通過自己的理解去解決工作中的關于字體的問題；
8、推薦了常用的可視化大屏的字體：中文字體、英文字體；
9、如果畫面內容較少時，可以適當提高字號，反之亦然，比例合適即可。
10、可視化大屏設計字體規范不存在絕對字體規范。
作者：AYONG_BDR 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
色彩篇主要分為：色彩三要素、配色方法、可視化中的顏色擴展、色彩選用原則、行業配色
主要想通過色彩的原理，配色的多種方法，以及如何拓展可視化界面中的元素顏色（文字，裝飾，背景，彈框等），最后總結了顏色的記憶屬性（行業配色）。
色相是色彩的首要特征，是區別各種不同色彩的最準確的標準。比如紅色、黃色、藍色等。色相可以具體到各個行業所代表的不同顏色，比如公安為藍色，黨建為紅色，金融為橘色等。
色相只是顏色的另一種說法。
明度可以簡單理解為顏色的亮度，不同的顏色具有不同的明度，例如天藍色就比紅色的明度高，如綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。
明度定義了顏色的明亮程度，從黑色到白色。
飽和度也叫純度，通常是指色彩的鮮艷度。
色彩的純度強弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。色彩的純度變化，可以產生豐富的強弱不同的色相，而且使色彩產生韻味與美感。
是指顏色從純度（100%）到灰度（0%）的取值范圍。
圖片配色法可以運用PS工具，選擇你鐘意的一張圖，拖進PS里，執行：濾鏡-像素化-馬賽克，就可以得到基于圖片的馬賽克像素點，然后吸取顏色即可。
插件配色法可以通過Eagle、美葉等軟件直接獲取圖片色，非常之方便，此種方法相比較于圖片配色法，更具科學性和準確性。
利用色環配色大家可能都知道，但是我們需要做到的是如何靈活的配色以及進行適量的處理。
1、鄰近色配色法
三種顏色組成，觀感更加舒適，色系搭配更舒服。
2、補色配色法
補色是指色環中兩個對稱的色塊，他們是色環中相隔最遠的兩個顏色，因此兩種顏色的對比也是最大的。
3、補色分割配色法
補色分割與補色配色相似。首先選定一個顏色，然后使用它一個鄰近色，最后找出它的補色。（也叫等腰三角形配色）
4、三角配色法
三角色由三種顏色組成，是色環上平均分布的三種顏色，共同在色環上連接成三角形。這種方法更適合色彩鮮艷。
5、四角配色法
這種方法由兩對補色組成，共4種顏色，其中只有一個是主色，另外三個顏色是輔助色。
通過對主色的疊加不同透明的黑色與白色（擴展白度和擴展黑度），可以擴展出背景、彈框、裝飾、文字等顏色。
擴展白度就是為所有顏色創建出更多較淺的顏色（增加白色透明）。比如我們通過大幅提升主色的白度，可以作為項目的文本色，那么我們該如何增加白度呢？
擴展黑度就是為所有顏色創建出更多較深的顏色（增加黑色透明）。比如我們通過大幅提升主色的黑度，可以作為項目的背景色和卡片底色，那么我們該如何增加黑度呢？
我們通過將主色增加黑度的方式，去定義背景色。具體數值：主色增加90%-95%黑色，作為背景色。
我們通過將主色增加黑度的方式，去定義彈框色以及模塊背景色。具體數值：主色增加75%-85%黑色，作為彈框色和模塊背景色。
我們通過將主色增加黑度的方式，去定義裝飾線色。具體數值：主色增加50%-70%黑色，作為裝飾線的顏色。
我們通過將主色增加黑度的方式，去定義裝飾點色。具體數值：主色增加30%-50%黑色，作為裝飾點的顏色。
我們通過將主色增加白度的方式，去定義正文文字色。具體數值：主色增加90%-95%白色，作為正文的顏色（輔助文字可以減少一半透明度）。
餅圖中可以會用到很多的顏色去配置，那我們應該如何去配置呢？
遵守“631”“三不”“兩多”這幾個原則，可以讓你在可視化中的色彩搭配能力更加自如。
運用配色631法則，將配色定義為主色60%，輔助色30%，對比色10%去貫穿整套界面。文字的顏色通過重要，普通，次要去分配，帶有色彩傾向豐富頁面視覺。
1、不選用同一色系
同色系會使畫面看起來對比度非常弱，色彩指代感弱，色彩之間不好拉開層級。
2、不選用顏色接近
鄰近色會使畫面感覺偏弱，沒有強對比，畫面層次感不足。
3、不選用同色透明
同色透明會讓畫面非常的灰，是可視化中的大忌，切勿使用。
1、多選用對比色
強對比可以拉開視覺層級，突出畫面，視覺至上。
2、多選用黑白灰
黑白灰可以使畫面變的非常高級，并且畫面細節度拉滿。
色彩具有很強的記憶屬性，因此用戶會將他們感受到的內容與色彩聯系起來。
可以從大量資源池中去尋找靈感，比如金融行業，我們可以從已知的金融元素都是紅黃搭配的，因此我們在配色時肯定需要注意這一特征的。
交通一般以藍色為主調，配合紅黃綠（紅綠燈顏色）三種代表著道路擁擠程度，藍色是大多數人最喜歡的顏色。由于藍色自帶的親和力，它是數字產品設計中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧靜、信任。
適用： 交通，公安，監控，政府機關。
缺點： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
文化旅游代表著健康，和諧，自然，戶外，綠色是大自然的顏色，人們對綠色的喜愛程度僅次于藍色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長。
適用： 醫療康復、生態、旅游。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
藍色是大多數人最喜歡的顏色。由于藍色自帶的親和力，它是數字產品設計中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧靜、信任。
適用： 公安，監控，交通，政府機關。
缺點： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
電力行業一般以國家電網的綠色系為主，給人一種安全可靠，綠色環保的電力行業。
含義： 安全、可靠、綠色、環保。
適用： 電力，電網，網絡安全。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
生態代表著健康，和諧，自然，綠色是大自然的顏色，人們對綠色的喜愛程度僅次于藍色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長。
適用： 醫療康復、生態、旅游。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
金融行業非常注重屬性搭配，暖色系可以增加購買欲望，使人有溫暖的感覺。橙色被認為是一種非常有活力和熱情的顏色， 它促進活動和創造性思維。
含義： 創意、能量、熱情、活躍、煩躁。
適用： 金融，證券，貨幣，黨建。
缺點： 當橙色作為主色時，你可能需要另一種顏色作為警告色。
1、加強對色彩三要素：色相、明度、飽和度的認知；
2、掌握三種配色方法：圖片配色法、插件配色法、色環配色法，以及了解配色的原理；
3、可視化界面中如何擴展顏色（白度，黑度，背景，彈框，裝飾，文字，輔助色等）；
4、配色631原則，主色、輔助色、對比色應用原則；
5、“三不”原則：不選用同一色系、不選用顏色接近、不選用同色透明；
6、“兩多”原則：多選用對比色、多選用黑白灰；
7、不同行業配色注意事項，通過元素搜集以及情緒版，配置不同行業可視化配色；
8、顏色的含義以及適用的地點；
作者：AYONG_BDR 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
首先一般講適老化無障礙設計，我們都要提到的就是通用性設計和包容性設計。
原則：強調設計所有的系統和產品，使每個人都能使用，無論他們的年齡或能力。
百度百科將通用設計定義為：“能被失能者所使用，就更能被所有的人使用。通用設計的核心思想是：把所有人都看成是程度不同的能力障礙者，即人的能力是有限的，人們具有的能力不同，在不同環境具有的能力也不同?！?
通用設計中應當也包含對于特殊人群的基本考慮，要讓目標人群覺得：魚和熊掌都可兼得，既照顧了特殊人群的使用，又兼顧所有人。
原則 ：好的設計應該滿足盡可能多得使用者的需求。
百度百科將包容性設計定義為：包容性設計著眼于清楚源于使用主體而造成的各種障礙，使每個個體都能平等、自信、獨立的正常使用，為同一適用條件下的互動提供了新的視角，也為創造性和問題解決導向的設計提供了機會。
通過分析客戶的困境，結合現狀進行深入分析，發掘政府端客戶的普遍性存在的問題。
大多數政府省市級領導人的年紀均在60左右，由于年齡普遍較大，對于設計的認知會有偏差，對于審美的把控以及設計本身的價值理解會偏弱。
從去年十月上旬開始，省級黨委換屆拉開大幕，在至今近8個月的時間里，全國31個省區市先后展開換屆。經過此次換屆，干部隊伍的年齡結構得到進一步優化，初步形成“50后”為主導、“60后”漸成中堅的格局。
根據公開資料統計，31省區市書記平均年齡為58.1歲。其中，“40后”書記有6位，“50后”有22位，“60后”也有3位，某區黨委書記胡XX和XX省委書記孫XX同為63年出生，是最年輕的書記。
視力：老年人視力的下降，影響眼睛對空間、顏色、明暗等加工等；
聽力：聽力弱化造成的聽不清楚，尤其是在嘈雜的環境中，老年人聽起聲音來會更吃力；
表達力：專業化的術語以及需求，會使表達和溝通不便；
互聯網和人工智能等技術發展變化太快導致認知力的不足。
絕大多數的老年人對現在數字化的產品很陌生，再加上復雜的界面操作，需要反復的學習使用才能熟悉掌握。
ToG類型的項目，我們的客戶群體是政府的某個部門（G端行業中，政府部門因為權限和管轄內容的不同，客戶的訴求也會不一樣，同時由于決策層是一級一級往上的，對于各個層級的領導都需要去進行滿足，對于設計的要求也就更高了），因此我們需要對客戶的心理進行重點挖掘。
政府部門的領導或者員工大多數都是高知人群，對于工作的態度都是非常嚴謹，喜歡按規矩辦事，分工明確，力求事情做到一絲不茍，有理有據，講究嚴謹做人，務實做事。
政府部門的保密工作需要做的非常到位，尤其是關于公安等民生問題時。另外政府類客戶一般對于數據的保密做的非常好，基本都是內網開發，私有化部署，一切互聯網的東西連接內網都會報警。如果是外網開發，則需要做好數據存儲，一定要非常注重數據安全。
政府類的軟件或者產品，基本都有很強的實用性，實用好用才是客戶最關心的問題，因此在系統架構上需要做到，簡單高效，快速觸達，減少客戶的學習成本。
對于文字大小的需求比較強烈，提及最多的就是字體放大，加粗。
對于畫面能夠看清，需要重點表現在前景和背景的色彩對比度。
對于畫面的表現，要更加的酷炫，在客戶眼里，動態圖形效果遠遠大于靜態效果圖。
隨著年齡增長，人類的晶狀體會變黃變渾濁，導致選擇性的吸收藍光。所以藍色色調在老年人眼中可能會出現模糊褪色的視覺效果，從而降低元素在界面中的對比度， 因此需要提高色彩的飽和度。
產品整體架構以及內容邏輯清晰，簡單高效，上手簡易。
通過對政府類客戶的分析，挖掘客戶最深層的需求，針對于以上的關鍵點，提出適合的解決方案，大體在一下6個方面的全面解析。
對于系統框架以及布局進行一屏式展示，減少系統層級的遞進。
對于展示形式上可以更清晰準確， 盡量模塊化展示每個需求，做到聚焦用戶視角，提升畫面表現。
整體交互流程簡化，復雜以及多層級彈框盡量少使用。
中文字體類型的使用，在使用數字屏幕閱讀時，字體的選擇要選用無襯線體（比如黑體，微軟雅黑）厚重一點，不可選用襯線體（比如宋體，書法體）比較單薄。
英文字體類型的使用，英文數字的字體選擇更明顯的粗體，因為要展示數據，使得數據展示更加直觀，依舊是選用無襯線體，比較推薦：D-DIN字體。
字體大小的定義。在字體大小的選擇上，參考了頁面上常規大小，定義了一套關于不同尺寸下的標準字號，正常1080P頁面，最小字號不小于16px，具體字體大小還需要參考設備清晰度，環境燈光，視距等因素。
界面中的前景與背景的對比度，是否足以讓政府類客戶清楚識別；
顏色不應該用作傳達信息的唯一視覺手段，需要用額外的文字提示；
通過 H（色相）S（飽和度）B（明度）的數值來劃分色域，在保持H值不變的前提下，定義了10個色域。所以在前后景的顏色選擇上，滿足跨度至少為6，才能讓目標人群準確識別文字信息。
視覺呈現以及文案圖像對比度至少要有7:1，大文本至少有4.5:1的對比度。有很多在線工具可以幫助檢測顏色對比度以及是否達標，如Contrast Ratio 在線檢測工具：
畫面采用多種飽和度較高的顏色，而不是單色；
顏色的豐富程度決定了畫面的視覺表達，色彩越豐富，畫面表現越好；
增加圖形的占比大小，提升視覺上的表現；
盡量采用識別度較強的圖形和圖標，盡可能貼近客戶的認知范疇；
圖標和圖形盡量搭配文字描述，方便客戶更清晰更快速理解。
觀測距離的遠近，也決定著畫面的展示效果，盡可能的拉近觀測距離；
正常視距觀測下，以常規設計規范去制定即可，如若觀測距離較近，則可適當縮小相應的視覺表現，反而觀測距離較遠，則放大視覺。
設備的尺寸、精度，分辨率大小都會影響目標人群的體驗；
在設備精度較低，或者說點間距過大時，應當適當放大視覺表現，點間距小的則顯示非常清晰，可適當縮小視覺表現。
為了保證適老化的推廣，需要在適老化的基礎上統一標準，在字體，顏色，框架，圖形等內容上做出提煉，深入了解目標客戶的需求以及客戶心理。
本著嚴謹務實，安全性，實用性等原則，沉淀出一套符合目標人群的設計規范，應用并推廣到不同設計團隊以及推廣到廣大設計師中去。
我們需要不斷踐行適老化設計原則，體現設計的通用性和包容性，應當在設計表現和產品功能上更加的包容這個群體。人工智能大數據時代，雖說政府類客戶會比普通人更容易接受，但是受制于某些原因，推動解決老年人面對智能技術的問題解決才是重中之中。
設計師也需要運用自己的專業性，來幫助目標人群融入數字化的生活中去。
因為在不久的將來，我們也會變成這個群體，當我們面對這些束手無策時，那時的設計又會是如何適老的呢？適老化設計是適合所有人的設計，所有的設計師都應該密切關注。
1-不要依賴顏色來傳達信息（客戶更喜歡文本，有特殊含義除外：四色預警，國標色）；
2-文字展示要清晰，字號大小要更加適合目標群體；
3-提高顏色對比度，豐富畫面色彩，禁止使用單一色系；
4-界面中重要元素應盡量避免使用藍色（特殊行業除外：公安等其他）；
5-增加圖形以及圖標的視覺表現，盡可能做到一目了然，便于客戶理解；
6-盡可能拉近觀測距離，提升觀測體驗；
7-選用高性能，高清晰設備，提升觀感，優化客戶體驗；
8-針對政府客戶特點，做到態度嚴謹務實，安全實用，簡單高效；
9-針對政府客戶的需求，做到畫面清晰，視覺酷炫，色彩豐富明亮，邏輯清晰；
10-盲目照搬照抄而不去具體問題具體分析，這些無障礙設計在某種程度上就會成為“障礙”設計。
作者：AYONG_BDR 來源：站酷網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
什么是Resdesign
Redesign并不是一個簡單的美化過程，視覺只是Redesign的一部分而不是全部。如果你做產品重構只是為了視覺更美觀，從各種網站獲取靈感用樣機包裝，沒有任何產品架構以及交互邏輯，那么你的改版必定不會很完美。
但同時也會有很多人陷入這種誤區，產品中過時的設計規范會使你的用戶會流失到設計體系更好的競品那里。重構你的產品設計語言，讓他看起來更美觀，這當然很好，但是也不能盲目的跟隨設計趨勢，沒有任何邏輯做改版，這樣會導致交互邏輯的紊亂以及產品架構不清晰。
今天阿勇就從網上任意摘選了一個產品功能需求有問題的一個頁面來進行一個頁面改版，一起來看看吧！
產品邏輯分析
1、產品主視覺指意不明，貴州省地質災害防治指揮平臺，地圖處資源應集中于貴州省，且全國視角下可以下鉆貴州省市區。
2、地質災害防治主視覺應該著重展現崩塌、滑坡、泥石流、地裂縫、等地質現象的展示，并展示預警信息，以及現場地質現象視頻反饋，以便于指定指揮方針。
3、此平臺信息展示包含人員調度，現場指揮，設備數量，數據資源統計，覆蓋區域，預警告警，各地區地質災害排行，綜合防治等信息的內容。
4、產品布局不合理，各區域所占比重需要重新估量，并且主視覺數據資源匱乏，內容單一。
5、業務邏輯沒有很好的展現，各區域所要展現的數據信息不明確，業務紊亂。
6、畫面中對于業務的理解不夠深，導致畫面空洞，數據展現量不夠，產品失職。
如何進行頁面分析
根據顏色：顏色不宜太多，對于特殊行業，固定的顏色是有固定的含義的，比如紅橙黃藍四色預警。
對于畫面不合理的地方需要記錄下來，對當前板塊的內容進行正確的導向，比如你發現這個字體不合適，你的腦海中一定會有正確的用在此處的字體；比如間距，換行，字號等方面也是如此，心中得有一桿秤，去衡量設計的美感。
了解功能，分析數據之間的關系：
了解本產品的應用領域，以及產品功能，分析畫面需要展示的數據有哪些，合理的通過設計展示數據之間的關系。
構思主題，圍繞主題設計其他元素：
對原來的主題進行產品功能重構，設計新的配色方案，畫面內容布局，標題以及主視覺的重新設計，圍繞主題進行設計元素的制作。
分析數據，合理選用不同樣式圖表：
對各個數據進行分析，對內容進行編排，選擇合適的圖表去展示數據，合理的同時，又具有美感。
提取共性，結合需求做產品規劃：
提取各個模塊的設計形式的共性，并結合產品需求進行合理的規劃，重構頁面。
加強技法，了解可視化設計規范：
通過不同的設計技巧來表現畫面的美感，制定屬于產品的設計規范，并運用這些規范去規范頁面布局以及設計，這是要在深度了解可視化設計的前提下。
優化-01
優化-02
優化-03
新增告警列表，設備數量，資源調度信息，展示歷史告警記錄，合計設備數量，總結資源調度數量，真正掌握自動化地質防治指揮。
最終修改成品
設計師應該跳脫出自己狹義的視角重新來審視“設計趨勢”，為自己帶來更多的可能性。
視覺只是表現層，理解業務，理解數據，合理表述才是核心。道理大家都懂，但真正的理解數據卻是很多設計師邁不過去的門檻。
送給大家一句忠告，永遠不要迷信產品原型，設計也不應該被原型所制約，要勇于用自己的設計思維去驗證產品的合理性，要用商業眼光去對產品進行查漏補缺，要站在用戶的立場上去試想產品的可能性。
作者：AYONG_BDR 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
B 端設計離不開設計規范這個話題，而做好設計規范是一個龐大復雜工程，很多人對這些處于一知半解狀態，在這個系列文章里我通過結合自己平時的項目案例來談談自己對 B 端設計規范的一些理解，希望可以帶來一些啟發。
本篇先談談設計規范制作的指導思想--設計原則，后續文章再展開講一下常見各種組件的設計規范。
設計規范作為 B 端設計中非常重要的一環，它的作用主要體現在以下三個方面：
在日常工作中，當項目組收到一個新的需求時，如果已經具備了成熟的設計規范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：
通過前面內容我們知道了設計規范對于產品設計意義重大，那么制定設計規范制定依據又是什么呢？這里就要引出設計原則這個話題，設計原則是設計規范的總的綱領，所有的設計規范都應當以設計原則為基準。設計原則主要包含以下內容：
接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復四個方面。
① 對比：
對比是指界面中為了區分信息層級，強化元素對比度，使用的很常見的一種手段，例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕；又比如通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關鍵文字信息。
② 親密：
如果信息之間關聯性越高，它們之間的距離就應該越接近，也越像一個視覺單元；反之，則它們的距離就應該越遠，也越像多個視覺單元。親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層次一目了然。
③ 對齊：
在界面設計中，將元素進行對齊，既符合了用戶的認知特點（我們往往傾向使知覺對象的直線延續還是直線，曲線延續還是曲線），也能引導視用戶視覺流，讓用戶更流暢地接收信息。
④ 重復：
重復是指相同的元素在項目中重復引用，作用是可以有效降低用戶的學習成本，同時提高這些元素之間的關聯性。
高效原則體現在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產品操作更加便捷；交互體驗與內容更加輕量和簡化；以及產品風格保持一致。下面結合幾個常見案例說明如何應用這一原則。
① 合理利用拖拽--便捷、輕量：
在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。
② 盡量減少不必要的跳轉--便捷、輕量：
用戶操作過程盡量減少跳轉，以實現交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡...依次類推（優先級從高到低：原位 ＞ 展開收起 ＞ 氣泡 ＞ 彈窗 ＞ 抽屜 ＞ 新頁面）
③ 放大點擊熱區--便捷：
放大可點擊按鈕熱區，相對于較小點擊熱區，具備更絲滑操作體驗。
④ 懸停即現--輕量：
利用懸停即現，避免信息過于重復啰嗦，簡化頁面提高閱讀體驗。
⑤ 折疊次要功能--簡化：
頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內容簡潔。
⑥ 統一樣式--一致：
一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式，可有降低用戶學習成本與企業開發成本。
友好原則應貫穿用戶操作前，操作中以及操作后三個階段，給予用戶及時反饋與幫助。
① 操作前：
在用戶操作前給到合適的引導與幫助，有效減少用戶迷茫感。
② 操作中：
通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。
③ 操作后：
利用界面中元素變化清晰直觀展示當前的狀態
可控主要體現在自由和導航兩個方面。
① 自由：
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
② 導航：
導航是指用戶隨時知曉當前所在位置，而且可以利用導航隨意到達目標頁面。
通過本篇內容我們大概知道了制作設計規范主要方向，那么具體到每個組件上，我們該如何去設計呢？后續篇章將細分聊聊如何去設計 B 端常見組件的一些內容。
部分參考資料：
作者：huang。亮 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
談到 B 端組件，很多人的印象是多且雜，想要全面準確的熟悉這些它們，需要我們對它有個合理的歸納總結?？赡苊總€人會從不同的視角去做這件事情，我一般是按照使用場景去對組件分類整理。
下面我們根據這個分類框架來逐個聊聊這些組件。
說到基礎組件，我想再將其細分成兩個大類：一類是通用組件；一類是柵格/導航。怎么去更深刻的理解這兩類的區別呢，我們可以打個這樣的形象比方：
通過這個比方我們不難理解，柵格/導航是先給頁面定下了基本框架，而通用組件則是在這個框架基礎上搭建頁面的所用到基本元素。
常見通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來似乎很簡單，但卻是決定產品品牌調性、界面細節品質的重要因素，在設計過程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談談這三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產品的主要色調，在選取時應當優先選擇品牌色，但有一點要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調，則盡量考慮另選取一個冷色系作為主色，原因有兩點：一是為了避免和警告、錯誤色沖突，產生歧義；二是冷色系帶有商務、專業、冷靜的情感，更符合 B 端產品調性。
同時主色選取應避免高亮、熒光色、灰調高的顏色。
主色的應用
主色在設計中常見的應用包括可交互、選中狀態、可視化、插圖、圖標等場景。
② 功能色
功能色主要用于頁面表征狀態，常見有成功色、警告色、報錯色等。
成功色
主要用于操作結果成功提示以及標簽配色等。
警告色
主要用于警告提醒功能以及標簽配色等。
報錯色
主要用于系統報錯提示、圓點提示、以及標簽配色等。
③ 中性色
中性色在頁面設計中應用非常廣泛，從線條到文字再到圖形等等都可以見到它的影子。
Tips：無論我們主色調是什么，中性色在調色時建議可加入適量的藍色調，可讓頁面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個顏色的梯度呢？（這里主要指對主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當我們需要淺色，通過調整白色遮罩透明度得到合適顏色；而當我們需要深色時，則通過調整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優點是后續如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規范包含字體、字號、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規范即可：
② 字號
不同于 C 端，B 端在字號選擇上應當盡量保持克制。研究表明，Web 端上正文字號為 14 時，可以帶來最佳閱讀體驗。因此在字號選取上應盡量優先選取 14 號字。如果想要區分文字層級，優先級從高到低的手法應該是顏色、字重、字號，也就是說一般盡量不采用字號大小區分文字層級。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過公式算出行高非整數或非偶數，可就近取偶整數。
間距
關于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優先考慮 8px 的倍數作為間距值，在一些特殊場景可采用 4px 的倍數間距值。
分割線
分割線寬度一般統一為 1px 即可，同時注意顏色不可過深，以免干擾主體信息。如果需要不同層級分割線，可用顏色深淺來區分。
圓角
圓角大小一般根據使用場景控制在 2-3 個梯度即可，既不能全部統一一個圓角值，同時也不適合出現過多圓角值。同時圓角值不要過大，建議控制在 2-6px，以符合 B 端產品嚴謹專業調性。
按鈕
這里從按鈕的大小/狀態/排放位置幾個緯度來講。
① 按鈕尺寸
按鈕高度一般情況下可以設置 3-4 種尺寸按鈕，足以滿足各種使用場景。至于按鈕寬度，我們一般定義一個最小值，當超過最小值時，可設置 padding 值，按鈕寬度根據內容自適應。
② 按鈕狀態
操作按鈕過程中，按鈕會呈現不同的交互狀態。
③ 按鈕位置
對于主次按鈕組合，主次按鈕排放位置應該怎么規定呢？可分為兩種場景：一是當為從左到右閱讀順序時，主要按鈕應當排在次要按鈕左側。二是當為從右到左閱讀順序時，主要按鈕應當排在次要按鈕右側。而當一些特殊場景與這個原則沖突時，應權衡優先級做出取舍。
熟悉通用組件后，我們要通柵格/導航來確定產品頁面框架。
柵格
柵格可以有效地保證設計的一致性、讓頁面布局更具規律，并提高團隊協作效率。應該如何設計柵格呢？
① 柵格區域的劃定
我們一般習慣將頁面從下到上劃分為背景層、全局控制層、內容層、臨時層，而柵格區應當用在內容層。以下為常見幾種頁面布局柵格區的劃定。
② 柵格自適應規則
隨著頁面寬度變化，一般來說是通過欄寬變化實現自適應。
③ 柵格欄數的確定
根據頁面內容豐富程度，柵格欄數一般定 12 或者 24 欄，考慮到 B 端產品功能往往比較復雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導航
導航可分為全局導航與局部導航。
① 全局導航
全局導航包含頂部導航、側邊導航、混合導航。
這三種導航樣式各具特點，應結合產品特性選擇合適的導航樣式。這里要注意的一點是，當產品可用性和用戶體驗產生沖突時，應優先保證產品可用性。
② 局部導航
局部導航包含面包屑、標簽頁、步驟條、分頁器。
面包屑
面包屑導航的作用是告訴用戶當前頁面在系統層級結構中的位置以及父子級頁面間的關系，并且可以快速回到上幾級導航。
標簽頁
標簽頁可以幫助用戶在一個頁面實現快速切換不同內容，提升單個頁面內容擴展性?？煞譃榛緲邮?、標簽樣式、卡片樣式。
步驟條
當任務復雜或者存在先后關系時，可將其分解成一系列步驟，這里就會用上步驟條。步驟條是引導用戶按照流程完成任務的導航條，作用包含 3 點：一是讓用戶對操作流程長度和步驟有個預期，二是明確知道自己目前所在步驟，三是可以對用戶的任務完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當步驟條中有操作難度偏大的內容時，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經完成了大部分簡單操作，后面碰到高難度操作后，出于損失厭惡心理，不會輕易放棄操作。
分頁器
當有大量內容需要展現時進行分頁加載處理，分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內容有多少頁、當前所在頁碼、快捷前往目標頁碼。
分頁器一般分為迷你、簡易、自定義三種樣式。
妙用分頁器小 Tips：當表格中需要對數據全選操作時，為了提高操作效率，可將自定義每頁跳數調到最大。例如一共 100 條數據，默認每頁 10 條數據，要完成全選需要點擊 9 次翻頁，10 次全選（表格的全選框勾選后一般只選中當前頁面全部數據，而不是所有頁面總數據），當把每頁條數調整為 50 后，則只需翻頁 1 次，點擊 2 次全選即可。
到這里關于 B 端的基礎組件就全部梳理完了，后續我們就來揭開展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來源：優設網
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
SaaS，英文全稱 Software as a Service，意思為軟件即服務。是通過網絡提供軟件服務，可以理解為一種軟件交付模式，因為交付模式的不同也決定了和傳統軟件的差別。
在Saas之前傳統軟件需要購買后本地化部署，兩者最大的區別在于，賣軟件是將軟件作為一個軟件實體賣給客戶了；而賣SaaS 軟件的所有權還在廠商所有，提供的是“軟件服務”。
Saas模式的提出者是Salesforce創始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時候提出。有兩個原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統軟件部署實施交付的失敗率非常高；
2. 軟件的售賣價格非常高，很多中型、中小企業有需求但無法承擔高昂的費用。
基于以上兩個痛點及當時的現狀賣軟件給企業造成的影響，已經形成了惡性循環，市場受到嚴重的阻礙（據Gartner 高德納公司（美國咨詢公司）的調查研究曾表明：在所有CRM項目中大約55%沒有達到軟件用戶的完整交付和預期目的，通俗的說是實施失敗。）
從賣軟件變成賣服務，其中的技術方式的改變、交易模式的改變，促成了軟件時代的變革，對于傳統軟件公司來說，是一次大革命。原來賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務后，這筆錢就不能在短周期內一次性收了，現行的SaaS模式通常是按照用戶的使用年費來收取。
兩者差別在于，軟件商需要先主動改變可以短期的一次性高收入，從短期收入向長期收入的轉變；
所以SaaS是長期主義的事情。
失敗的Saas生意會出現一個問題：把長期生意做成了短期不可持續的生意；而短期生意帶來的就是經營成本的劇增，導致生意不可持續。
所以，Saas模式決定了需要客戶長期使用你的產品，才可以長期可持續賺錢，也就是通常意義上的客戶終身價值（LTV）。
那如何做到客戶長期使用，其實只有一種方式：長期為客戶創造價值，做到幫客戶成功（幫助客戶的業務成功），從而持續續約。
吳昊老師，在《SaaS創業路線圖》中的講到：SaaS的本質是續費。這個觀點我比較贊同，SaaS的經營本質在于可持續。
那么，決定SaaS的成功因素是什么呢？
我認為決定性因素有三個方面：產品強大且靈活、用戶體驗優質、服務的有效支持。產品強大和服務的有效支持不言而喻，具體我們來聊聊用戶體驗的價值。
傳統軟件在一次交付實施后，客戶付80%的錢，剩下的20%能不能收回來就不那么重要。但SaaS模式，客戶每年進行續費，若產品使用及用戶體驗滿意度低，帶來的影響和后果可能是客戶終止續費。
因此，和傳統軟件相比SaaS的用戶體驗的價值就更為重要，它直接影響SaaS的續費和流失。
相信“用戶體驗”這個詞大家應該非常熟悉，接下來我們從新認識什么是用戶體驗？
官方的定義是：用戶在使用產品過程中建立起來的一種主觀感受。“用戶體驗”這一概念是唐納德·諾曼（Donald Norman）在20世紀90年代中期提出的。產品大神俞軍老師說過用戶體驗的本質是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認為是幫助產品和用戶：最小成本滿足需求，同時創造「美·好」體驗。
怎么理解，因為用戶體驗是滿足商業目標的一種行為手段，我們來看下用戶體驗的需要考慮的雙邊關系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業最高效的服務用戶。
企業的本質就是創造商業價值，商業價值來源于用戶價值，同時考慮實現商業價值的效果和效率。我們常常會聽到“投入產出比”或者叫“投資回報率”；對于商業行為中的一環用戶體驗也如此。
所以，用戶體驗的核心的就是：平衡用戶最小成本滿足需求，及企業最小成本服務用戶。完成價值交換同時，滿足持續性。
由此，可以看出在SaaS的產品設計中，用戶體驗其實承擔著一個比較重要的責任，因為它關系到成本的邊際和規?；挠绊?，一頭是產品一頭是用戶。
那么作為產品體驗設計師，我們需要具備一定成本意識，做好“成本管控的設計”，更本質來說設計過程中我們應該：把復雜留給自己，把簡單留給用戶。
因為我們在設計的過程中把握產品的交互方式、使用流程，在用戶認知和效率層面有較強的把控空間，充分做到的以“用戶體驗”出發；那后續銷售、交付、客戶成功的全鏈路服務過程的學習效率和服務效率會呈指數級上升。
產品設計，應該把復雜留給自己、把簡單留給用戶。
關于用戶體驗，就不得不介紹一下“ 用戶體驗要素”模型，個人認為這是所有產品經理和設計師可以貫穿整個職業生涯中都需要經常性、反復對照思考的設計模型。
用戶體驗設計的價值遠不止于讓產品的視覺、顏值提升，設計更大的價值在于深入業務、洞察用戶，幫助業務梳理產品信息架構、任務流程、交互體驗。
構建系統的用戶使用方式和工作模式，從而達成用戶目標；通過達成用戶目標完成價值交換、以此完成商業交易達成商業目標。
回顧Saas的商業模式，Saas的商業模式決定我們提供的這個服務不是靠人海戰術，因為Saas軟件即服務的含義是所提供的軟件就等于提供自助化的服務，應該提供的是自助服務、開箱即用、開箱易用的服務。
那么Saas服務設計策略上，應該從降低系統使用門檻和提升用戶的自主化服務兩維度出發，根據這兩個核心維度，我們構建了每刻SaaS產品體驗的設計策略模型。
第一，設計“系統服務自動化”，這里的服務是功能使用的操作，符合“低認知、易上手”，那么從設計整個體系 需要遵守“易發現、低認知、高效率、有溫度”的設計原則展開，以用戶使用行為出發設計符合用戶心智認知的功能形態和交互流程。
第二，設計“系統幫助自助化”，什么意思在全系統中構建幫助引導的自助化體系，用戶需要幫助的時候提供人性化的引導幫助，我們從發現的維度、認知的維度，系統認知的維度，綜合考慮用戶系統的幫助引導。
設計原則，是指導我們做正確設計的方針。
設計原則的建立基于對用戶使用體驗全流程的基礎上，以每刻報銷的設計原則，圍繞用戶旅程、認知及行為出發構建。
1. 當用戶接觸系統從看出發，看見系統界面、發現操作入口；（發現）
2. 帶著操作任務用戶進入系統、看見導航、看見文字、看見按鈕，都需要理解認知；（認知）
3.用戶從何開始、如何操作，在完成整個業務事項的過程需要進行填寫、選擇、交互過程就產生了生產效率問題；（操作）
4. 當出現誤操作或系統出錯時，需要系統糾錯提醒、容錯的設計、幫助及引導，當完成整個業務事項后，用戶產生一種的情緒感受，這個感受即是印象、評價、口碑。（感受）
緊緊圍繞產品業務、用戶處理特性業務的基礎上，以終為始，回歸到用戶、業務、系統進行思考歸納的產物。
設計策略，是指導我們如何進行做正確的設計。
在SaaS產品分類上，常見的SaaS產品主要分為3類，行業SaaS、職能SaaS和通用SaaS。
每刻報銷產品從核心業務來說是職能類Saas，從提升財務人員報銷的發票審批、費用審核等效率展開，但報銷的來源又源于普通員工的業務報銷，業務報銷發生又和所在行業的費用發生行為特征有一定相關性，所以是結合職能和行業Saas的屬性，從用戶體驗的設計上需要考慮不同角色用戶對于系統的業務理解、功能交織使用的不同訴求，這個設計過程探索研究是相對比較有難度的，以后有機會可以展開聊。
下圖是每刻系統經過6年過程中統計的問題分布，分布比率呈現：認知問題 60%，效率問題 30%、情感問題10%。
我們在訪談客戶調研發現，企業服務雖然客戶已經用了好幾年我們的系統，但財務部門還是經常性會碰到新入職員工的系統使用問題，甚至財務部門來新人時 以前系統發生的使用問題會從新出現一遍，所以企業服務有一個現象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個遇到的問題就是認知問題，也輔證了我們對于Saas系統認知問題是用戶體驗的第一大問題。
幫助體系建立可以從系統層面體系化有效降低用戶使用的認知成本，圍繞用戶角色的核心業務操作使用流程、洞察用戶旅程上的疑惑和障礙點。用戶首次進入系統要建立介紹和引導，足夠簡單、降低陌生感，來減少人力咨詢回復的投入。
相比人，系統的自助化和自動化的服務，更具有復用性和規模效應。
SaaS的商業模式，按年使用賬號來收費和傳統軟件的付費模式區別非常大，因為需要先主動放棄自己本來可以唾手可得的收入，從短期收入向長期收入的轉變。
在SaaS模式的時代，商業模式決定其必須關注客戶成功、客戶持續續費、LTV客戶長期價值。
SaaS的產品更需要重視用戶體驗，用戶體驗的優劣決定其產品的長期發展，SaaS的用戶體驗設計則關注用戶使用認知和行為效率，以及系統服務自主化設計和系統幫助自動化設計，用戶體驗將在產品成長期后半程，逐漸成為SaaS商業模式不可或缺的產品競爭力。
作者：周大蝦07 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標在界面設計中，雖然很小，但是卻是界面中重要組成部分之一。通過將顯示物體圖形化的形式，將功能本意高度濃縮成一個圖標，再通過視覺隱喻更快地讓用戶理解功能，同時圖形與文字相比，圖形更加生動形象，視覺能力更強、更便于記憶，用戶可以根據圖形快速定位功能位置。而順著時代的發展，圖標不再僅僅以工具的形式出現，更多的起到裝飾頁面，也不斷延伸出不同的圖標類型與圖標設計風格。
圖形與復雜的文字相比，更加簡潔，相應的識別效率也會更高。圖標可以將復雜的文字描述高度濃縮成一個圖標，通過視覺隱喻的方式讓用戶聯想到現實生活中的物體，更直觀地呈現圖標代表的功能，更快理解功能的意義
1.2 減輕頁面負擔
像一些通用常見的圖標，如搜索、播放按鈕、更多等，僅需要一個圖標就能清晰地傳遞功能意義給用戶，省文字的描述，節省更多的頁面空間與閱讀壓力。
1.3 更快定位功能位置
圖標與文字相比有更豐富的表現形式與顏色，所以視覺沖擊也就更強，也能更快地被識別出來，當用戶熟悉了產品后，只需要通過圖標就能快速找到想要的功能，當功能位置發生變化時，不需再重新閱讀枯燥的文字找到對應的功能，只需從圖標形狀、顏色上區別，找到對應的功能。
2.裝飾層面
2.1 傳遞品牌調性
隨著互聯網的發展，同類型的產品越來越多，要在各個產品中突圍，除好用的功能外還要有特色的外觀。在圖標中融入能代表產品品牌的符號，強化品牌調性，保持圖標的獨特性，給用戶留下深刻的印象，一看圖標就知道是哪個產品。
2.2 增強產品吸引力
如今用戶對產品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標可以帶給用戶更好的第一印象，增強產品對用戶的吸引力。
2.3 渲染氣氛
根據不同的節日或運營活動，設計相應氛圍的圖標，幫助產品渲染節日氛圍或加強用戶對產品主題運營活動的感知力度
二、圖標繪制的基本原則
1. 可識別性
圖標與文字在一定程度上起到相同的作用，都是通過特定的表現形式來傳達某種信息給用戶。順著時代發展，圖標的設計更精細化，產生了更多的設計風格，但圖標的本質還是沒變的，是用戶進入功能的入口。因此，一個能被用戶快速識別、快速理解的圖標相當重要，是圖標設計的基本要求。我們繪制圖標時要盡量去掉輔助、無用的元素，保留最清晰、直接、有代表性的元素。
2. 風格統一
設計師在設計圖標時，除了會根據產品類型、用戶群體、品牌調性等因素決定使用哪種圖標風格外，還要根據圖標的具體使用位置，因此在一個產品中，常常會出現多種風格類型的圖標，而風格統一指的是在某個特定功能模塊內的圖標風格要保持一致，是面性的圖標就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小統一
圓形、正方形、三角形，在這三個圖形雖然高度相同，但是整體上三個圖形的視覺重量并不相同。在實際的操作中，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個方向缺得越多，就往那個方向移動一點。
4. 色彩統一
色彩的統一指的是圖標色彩在飽和度與明度上保持特征統一，數值在一定的范圍內發生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標，通常使用的都是產品的主題色，而多彩圖標，常會以主題色為主，拓展出臨近色、相似色、對比色，目前市面上大多數的圖標顏色會使用同類色與鄰近色。對于飽和度與明度的調節，我通過利用灰度模式進行輔助，使圖標視覺更統一柔和，不會出現其中一個亮眼或暗沉。
5. 占比統一
5.1 正負形占比統一
正負形的合理使用是圖標能否傳達準確意思的關鍵，因此也是常會出現的組成元素。在繪制圖標的正負形，注意保持占比統一，其中某個圖形正負形太大或太小，會顯得突兀、別扭，失去統一性，界面整體質感會大大降低。
5.2 顏色占比統一
在繪制圖標時，確定圖標中的主色和輔色，繪制時盡量保證主色和輔色占比相同，保持圖標的統一性。
6. 疏密統一
有規律地將線條組織在一起，利于形成統一的視覺風格。同時，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標，縮小后反而會影響識別。同時，給圖標留出一些空間，使線與線之間不會太擠，增強圖標的呼吸感。
安利一個國外的圖標大神Myicons?，簡單的線性圖標一樣可以很精致。
三、不同風格的圖標
目前市面上的圖標主要有四種類型，分別是：線性圖標、面性圖標、寫實擬物圖標和三維立體圖標。而不同的圖標中組合的元素都會有一些差異，相同類型的圖標中也會有不同的圖標風格。
1. 線性圖標
線性圖標主要還是由線性組成，設計師可以通過改變線的粗細、線的端點、圓角大小或加入一些面性元素在里面來使線性圖標更加豐富、有趣，但整體來說純線性圖標更纖細、簡潔，使得視覺沖擊力稍微弱了些。
1.1.1 單色
單色是線性最基礎的表達方式，這種設計風格單調、視覺沖擊較差，但是制作難度低，設計所耗費的時間頁更斷，因此常常會出現在個人中心頁中，僅需要有圖標顯示功能入口，設計要求并不高的功能模塊中。
1.1.2 雙色
雙色圖標與單色圖標相比，視覺沖擊力更強，應用范圍更廣，通常會融入品牌主色，是除了線面圖標外出現在首頁中的線性圖標。因為雙色圖標可以加入品牌色，增強品牌感的同時，使圖標增加了設計感，不會像單色圖標那么單調乏味，因此雙色圖標也會以“次要功能”的形式出現在首頁當中。
像在“去哪兒旅行App”和“平安銀行App”中，頁面已經存在一組視覺沖擊、視覺層級更高的一組面性圖標，但是因為業務需求露出更多功能入口，因此就可以使用線性圖標這種視覺沖擊力弱一點的圖標搭配，既不會搶走主視覺，也能滿足業務需求。
1.1.3 斷點圖標
斷點圖標在目前的app圖標設計上較少使用。雖然斷點風格圖標在表達上有一定的局限性，但是圖標設計感更強，圖標更有趣味性。
斷點圖標并不是隨便刪除某個描點，在斷點的位置選擇上和斷點的大小都是要注意的地方。斷點位置的選擇要注意兩點：
1 ) 保持相同角度，能更好地增強圖標的協調性，避免造成圖標的視覺混亂降低用戶的視覺體驗。
2 ) 選擇在線的拐角處，利用連續性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。
1.1.4 線面結合
在原本的線性圖標上加入色塊，就會產生新的設計風格--線面圖標。線面圖標比較特殊，圖標的視覺層級會隨著圖標中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強。因此在設計線面結合圖標時，要先確定圖標在該頁面中的重要程度，如果是主要功能則將色塊的占比加大。
1.2 線的影響
圖標中的線主要由兩個元素組成，一個是線的粗細，一個是線的端點，而這兩個元素也是主要控制線性圖標的性格。以常用的48px圖標盒子為例，常用線的粗細有2px、3px、4px，圖標的線越粗圖標越有力量感反之圖標越纖細；而圖標的圓角越小時圖標越穩重、專業，像一些辦公軟件、金融產品，圖標的圓角就比較小。圓角越大圖標越飽滿親和力更強，像一些兒童學習類軟件就會使用大圓角的圖標設計。
因此，圖標的線粗細與圓角大小，都根據不同產品類型與目標用戶確定。而大多數線性圖標主要有四種基礎造型：纖細+小圓角、纖細+大圓角、粗描邊+小圓角/無圓角、粗描邊+大圓角。
1.2.1 纖細+小圓角
精致、嚴謹，多用在銀行、新聞類APP。沒有圓角，會使圖標更加尖銳，對于銀行類APP會給人一種威脅，但是太大的圓角，顯得有點輕浮、可愛，不符合銀行莊嚴的感覺，所以稍微添加一些圓角，使圖標更有親和力的同時，也保留一些莊嚴的感覺。
1.2.2 纖細+大圓角
更加精致、有親和力，這種風格是目前市面上軟件使用得最多的一種線性圖標風格。
1.2.3 粗描邊+無圓角/小圓角
粗曠、個性、有很強的力量感。更多的用在運動、汽車這類主要用戶傾向男性的軟件，同時也會在一些潮流類電商軟件中出現，凸顯更有個性的設計風格。
1.2.4 粗描邊+大圓角
圓潤、可愛、親和力強，常用在偏向兒童的產品
2. 面性圖標
面性圖標時軟件使用的最多的一種圖標類型，設計師通過改變色塊、圖形圓角、正負形和底托等元素，讓面性圖標呈現不同的設計風格，但無論是哪種設計風格，面性圖標設計沖擊力相比面性圖標更強，因此市面上大多數核心功能都會用到面性圖標來提高功能的設計層級，讓功能在頁面中更加突出。
2.1 扁平風格扁平風格的圖標常為單色圖標，圖標整體沒有漸變、高光、陰影等裝飾性設計效果，因此更加簡潔，更突出功能本身，圖標功能性更強，圖標制作成本低，曾經也是風靡一時。但扁平風格的圖標缺少亮點與制作成本的原因，導致圖標同質化嚴重，缺少特點，很難被人記住，因此現在很少被使用。
2.2 漸變色塊
在扁平風的基礎上，在色塊上添加漸變色，在保留了扁平圖標的功能性外，使圖標色彩更加豐富，在不同類型的軟件中都可以使用這種風格，算是一個比較百搭的圖標風格。同時漸變色塊也是很多面性圖標的組合基礎，在漸變色塊這個基礎上還可以添加不同的效果形成不同設計風格。
在設計漸變色塊風格的圖標時要注意兩點：
1 ) 市面上的app都會選擇同類色作為漸變色，然后通過改變顏色的飽和度，使漸變色的明亮對比更加明顯的同時，顏色過渡也更加柔和舒服，使圖標更有通透感，增加視覺沖擊力。
2 ) 在設計這種有白色色塊在頂部的圖標時，可以給色塊添加一個淺淺的透明漸變，讓色塊過渡自然一些，同時也可以添加一層淺淺的陰影，增加層次感。
2.3 圖層疊加
圖層疊加風格的圖標看上去像兩個透明圖層疊加在一起的感覺，圖標層次感強，細節也更加豐富，圖標風格更新穎、更年輕化，因此如果在設計一個年輕人使用或者希望打造年輕化頁面感受的時候，可以嘗試使用圖層疊加風格。
繪制圖層疊加風格的圖標時要注意：
1 ) 重疊在一起的那個色塊是通過布爾運算得到的，并不是通過簡單的透明圖層得到的。而重疊在一起的那個色塊也不宜過于顯眼，畢竟看的是圖標的整體。因此可以參考一下“智行火車票”，通過改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標的變化，同時也不會是色塊太突兀影響觀感。
2 ) 盡量統一疊加部分圖形與圖標之間的占比。
2.4 毛玻璃
毛玻璃是近年最火的一種設計風格，不僅設計風格新穎、特別，而且還有很強的質感表現，因此不僅在金融產品，還是生鮮產品或票務產品，都有毛玻璃風格的圖標。
而在設計毛玻璃圖標時，里面也有很多細節需要注意：
1 ) 背景模糊效果不需要太大，有一種若隱若現的感覺就可以。如果調太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標，只需要將圖標的主色調低飽和度后，就可以使用。這樣的好處是不僅讓圖標顏色過渡更加自然，同時有更多的組合方式、更多的層次。
3 ) 使用邊緣光。毛玻璃圖標有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細節更加豐富。
2.5 晶白風格
晶白類圖標利用圓角正方形或圓形作為底托再在上面添加一個主色為白色的圖標，然后通過調節透明度、投影、漸變給圖標添加一些質感，是常見的圖標風格，也是使用了很久的一種設計風格。
后面也延伸出了另一種設計風格圖標主題通常不會是統一的造型，像喜馬拉雅這種圖標，圖標本身元素復雜、細節較多，形狀也更加不可控，因此用一個淺色圓形底托，將他們統一起來。不僅可以將復雜的圖形統一起來，還可以添加吸引人眼球的漸變色更好地增加圖標的視覺占比，有更強的視覺沖擊感。
在繪制晶白風格時，注意兩點：
1 ) 可以適當改變底托圖形的形狀，增強差異化。
2 ) 統一光源，越白的地方越亮，注意控制好透明度的變化與角度。
2.6 實物展示
這類圖標會出現在生鮮類、藥品類、潮流電商類產品中，因為使用圖標很難將這些類型概括起來，直接使用圖片展示更加直觀，但因為圖片細節、元素更多更復雜，如果使用太多會使圖標看起來很雜亂。
3. 寫實向圖標
寫實向圖標模擬現實中的物體，更貼近生活，用戶對這類圖標理解能力也更強，繪制難度也更高，繪制時間也更長。寫實向圖標除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來增強實感。常常用在運營設計上，或用在一些特殊界面模塊從而增強視覺層級。
3.1 輕擬物圖標
輕擬物圖標是最近很好的的設計風格，但是輕擬物圖標出現在界面設計上還是比較少的。因為輕擬物圖標元素比較復雜，視覺沖擊力強，放在界面上有可能搶走用戶對核心內容的關注度，通常會運用在運營設計長圖、彈窗、核心功能等。
而繪制輕擬物圖標，主要注意的是光影的打造。光影主要由這幾個元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標時，主要注意以下幾點：
1 ) 在繪制輕擬物圖標時，不一定需要使用統一色相中的顏色，可以通過改變顏色的飽和度明度的對比和冷暖色的對比來營造光影，使圖標色彩更豐富、對比更明顯。
2 ) 反光可以使用圖標主色的對比色，降低飽和度，提高明度，運用在輕擬物圖標邊緣，使邊緣更更清晰，不會糊在一起，圖標整體立體感更強。
3 ) 明暗對比越明顯，輕擬物圖標越顯通透、立體。
3.2 2.5D圖標
2.5D曾經是很火的一種設計風格，但是現在已經逐漸被輕擬物與建模替代。2.5D圖標固定展示了三個面，有很強的立體感，常常運用在科技類的網站設計中。
在繪制2.5D風格圖標時，要注意：
1)統一好圖標的厚度。
3.3 3D圖標
隨著時代進步，3D逐漸成為一個主流的設計風格。通過專業軟件給予了圖形材質質感、真實的光影，更加貼近生活真實物件，同時還可以配合動效的設計，有很強的視覺沖擊力和新鮮感。常常出現在網頁設計中、運營設計中。目前繪制3D圖標主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒有oc好，但是還是可以滿足日常工作。
而在繪制3D圖標需要注意以下幾點：
1 ) 統一主光源方向。建模里面會出現很多打光類型，如主光、輔光（有時不止一個）、邊緣光等。
2 ) 統一攝像機位置。攝像機與物體的距離、角度影響渲染的最終效果。
3 ) 用數值定義物體大小。建模軟件不像繪圖軟件那樣強調物體的數值大小，拉遠看物體就是小，拉近看就是大，做一個物體時還好，但是要做一組3D圖標時，就要定義好物體的大小，使圖標更加統一。
四、如何確定使用哪種類型的圖標
不同風格的圖標有著不同的特點，設計師要根據圖標放置位置和功能選擇圖標類型。其中最有決定性的因素就是圖標的重量，而影響圖標重量的因素有：占比、顏色、細節元素。線性圖標在界面中占比較少，因此看起來會更加簡潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標占比更高，視覺上會更加飽滿，同時顏色色塊使圖標更加顯眼，視覺沖擊力得到力增強，使用戶對圖標的感知力更高，是最常用的圖標類型，用在各個重要功能入口上；輕擬物和3D圖標除了占比高、顏色豐富，還有各種光影、材質的細節，圖標元素更多，視覺沖擊力也更強了，也因為圖標復雜、視覺沖擊力強，因此很少出現在界面上，通常運用在一些特殊運營入口或需要吸引用戶的大模塊中。
不同的類型在界面中也會搭配出現。
五、圖標的繪制
1. 圖標盒子
圖標盒子是輔助繪制圖標的一個工具，幫助設計師在設計圖標時更好地規范好各個圖標的尺寸大小。而圖標盒子也有很多種，我最常用的是48*48px，這個尺寸對于線條的控制比較方便，通常用1px、2px、3px。
工具始終都是工具，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個地方缺得越多，哪個地方就拉伸一點。
2. 圖標的繪制方法
圖標中會存在標準化圖標，像刪除就是一個垃圾桶、像首頁通常是一個家的圖標、還有搜索則是放大鏡的圖，照片是兩個山一個太陽，這些圖標都習慣以這種表達方式出現，用戶已經習慣了這種表現形式，因此對于標準化圖標，盡量維持以往的變現形式，讓用戶更好地理解圖標意思。
非標準化圖標可以細分為具象與抽象，對于具象類圖標，現實中有實物可以參照。這類圖標的設計較為簡單，可以在某度上尋找相關照片，根據實物的造型進行提煉和簡化。
抽象圖標則較為復雜，通常是某些特定行為的名詞，沒有具體直接的參照物。因此在設計前，我們要先充分理解功能本身，這個功能是什么、用戶怎么用，然后提煉關鍵詞，接著根據關鍵詞發散思維，尋找相關聯的圖形來表示含義。例如“社區”功能，功能目的是提供一個讓用戶互相交流的環境，同時吸引無目的的用戶逛起來發現感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關鍵詞：聚在一起、發現、交流。接著發散思維進行腦暴，聚在一起：一群人-圈子-同一個世界的人-星球，發現：看-眼睛；尋找-望遠鏡-雷達-指南針，交流：聊天-聊天氣泡-聲波。
六、圖標的使用場景
圖標運用在功能入口上是最基礎的使用場景之一，如首頁中的金剛區、個人中心都會用到很多圖標作為功能入口。
1. 金剛區
目前國內的APP包含的功能有很多，而金剛區的作用就整合產品功能并放置在首頁中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產品功能，增強用戶對產品的粘性。像美團，很多人對他的了解是一個外賣工具，但它里面還有很多其他功能，使用金剛區展示它多元化的服務。
金剛區圖標通常會有1～3行，根據業務具體需求做調整，在每行中會有4～5個圖標。尺寸范圍一般在40px～48px左右（@1x），同時會根據具體的業務需求，調整大小，最終都是一預覽效果為準。
2. 個人中心
個人中心是個人類型功能、運營活動入口和工具的集合地，是除了金剛區外，含圖標最多的一個地方。個人中心中包含很多不同類型的功能，可以使用卡片式的設計，將功能圖標更好地分類。在圖標風格的選擇上，個人類型功能是最重要的功能，通常會以面性風格放置在頂部，如果個人中心中需要展示運營入口時，需要減弱個人類型功能圖標的視覺沖擊，會使用線性風格圖標。
3. 運營入口
運營入口主要作用是讓用戶點擊后跳轉到產品活動頁，因此具有強視覺沖擊力的圖標，會更吸引用戶眼球，從而提高點擊運營入口的機會。
因此運營入口上，通常會使用面性圖標、寫實向圖標或3d圖標。因為寫實向圖標或3D圖標可以提高視覺層級，因此經常運用在主要運營板塊上，而面性圖標相比下較弱，當頁面已存在一個主視覺或主要功能時，運用在運營板塊上。
4. 主題板塊
在軟件中會有很多不同主題的信息板塊，同時信息板塊間有較大的差異，如果全部展示出來會使頁面樣式不同統一、信息混亂導致降低用戶的閱讀體驗。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關鍵信息在頁面中，保證視覺統一的同時，還可以起到流量分發的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗。
純文字的排版在信息流中略顯枯燥，而圖標在主題板塊中起到潤色主題的作用，渲染主題氣氛，提高不同主題板塊的識別度與差異化。對于一些長標題的主題板塊，只需要記住圖標就能快速定位主題板塊位置。
5. 底部tab欄
底部tab欄功能數量通常在2～5個，在設計時，要設計點擊前和點擊后兩個圖標狀態，同時幫助兩個狀態是有明顯的變化。底部tab欄圖標大小通常在22px（@1x）左右，而圖標底下的文字時10px（@1x）。底部tab欄作為最常出現的區域，是傳達產品品牌感、提升產品辨識度、記憶點的重要區域，很多產品都會在底部tab欄的圖標設計上加入品牌元素，增強辨識度。
七、如何提高圖標設計能力
1. 階段一：臨摹
臨摹是人類學習一個新技能開始，就像嬰兒學習父母說話一樣。但是一開始很多都不會臨摹，或者照著畫也不會，那我們應該如何去做？
1.1 臨摹效果不佳
1 ) 提高審美能力，多看一些主流的圖標，可以上追波看看目前流行的設計風格，不行的話就去看看大廠都在畫怎樣的圖標。
2 ) 明確自己的能力，對自己目前的設計水平有一個客觀的評價，到一個怎樣的水平。很多人都急于求成，最基礎的線性圖標都不會就上來搞輕擬物，畫來畫去都不好看，最后就放棄了。
3 ) 敢于支出自己的不足，許多人畫了許多時間去畫一組圖標，就很容易被自己催眠，以為自己已經畫得很好了，其實還會有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對比原作，自 己有哪些地方沒有原作做得好的
1.2 會了，但沒完全會
什么是會了，指的是可以繪制出于優秀原作一樣的圖標；什么是沒完全會，指的是不知道原作是怎么達到這個好看的效果的。而且很重要的一點是，你臨摹的作品可能也有一些不好，需要改進的地方，以此在這個階段我們要做的是：
1 ) 多看別人總結的知識點，知道如何去判斷一個圖標是否還有可以改進的地方，這樣繪制是不是正確的
2 ) 懂得總結與思考，原作是用來什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪
2. 階段二：半原創
臨摹是一個提升自己的手法，但不代表可以直接用到自己的作品中，直接復制別人的設計，并不叫設計師，復制粘貼誰不會啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創。這里說的半原創不是指在別人圖標的基礎上加上兩筆就是半原創，而是要吸取了優秀圖標的優點后，重新設計出一個有相同特點的圖標。那我們應該如何半原創呢？
1 ) 還是多看，但是不同于臨摹階段，我們在臨摹的時候還要多想，這個圖標的特點是什么、怎么做、還能怎么用，積累圖標不同的表現形式2 ) 多練，這個建立在多臨摹上，目的知道別人的技法是什么做的，練習了不同的技法后，將它們再融合在一起
3. 階段三：原創
第三個階段，也是最難得階段。目前很多情況都是只能成為融圖設計師，將不同作品優秀的點組合起來。但如果要建立自己的風格也是要做融圖設計師的基礎上，多想、多嘗試，敢于突破，在一次次的融圖后，發現出自己的特點，為自己的作品打上自己標簽，輸出具有差異化特點的設計。最有印象的就是夸克的設計，品牌特色很明顯，其實我們每個人也可以成為一個品牌，只要我們足夠努力
作者：阿恒的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
有人說它是全世界最牛逼的APP，因為它的算法難度和春運期間訪問量幾乎是全球之最；但有人說它是全世界最垃圾的APP，因為在使用這個產品的過程中，遇見很多奇葩、憤怒的體驗。關于這兩種說法，眾說紛紜，本期設計大偵探，就來全面拆解鐵路12306APP，一起來看看這個產品到底是如何設計的，用戶體驗如何。
1. 內容結構
全文9700字，分為六個部分，分別是導讀、產品畫像、出行服務、內容服務、思考總結和后記，你可以通過下面的思維導圖對本文內容快速的了解。
2. 適合人群
第一類，UI/交互設計師，可以跳出執行層，全方位體驗12306的產品設計，多維度去思考和總結如何規避類似的陷阱；第二類，產品經理/運營，通過全面的產品設計拆解、體驗反饋，獲取產品設計參考；第三類，旅游及出行相關行業從業者，通過對12306的全面拆解，獲取競品設計參考。
3. 分析模型
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于拆分和分析產品的功能價值。
第二個，尼爾森十大可用性原則。尼爾森十大可用性原則是界面設計中最基礎、最重要的設計原則，任何產品的設計，都可以通過這十個原則進行指導設計。尼爾森十大原則包括即系統可見性原則、環境貼切原則、撤銷重做原則、一致性原則、防錯原則、易取原則、靈活高效原則、易掃原則、容錯原則、人性化幫助原則，通過這十大原則，可以對12306的產品設計體驗進行全面的校驗和偵查。
第三個，設計心理學。包括常見的格式塔原理、費茨定律、巴甫洛夫反應、7±2效應、席克定律等常見設計基礎理論。
1. 產品介紹
鐵路12306是中國鐵路客戶服務中心推出的官方手機購票應用軟件，主要為全國各地的乘客提供火車票預定、機票預訂、汽車票預訂等購票業務，首個版本發布于2012年10月16日，根據易觀千帆數據，截止到2022年10月，12306月活躍用戶人數6,923.78萬。
2. 用戶畫像
鐵路12306的用戶群體主要以男性用戶居多，占比65.04%，女性占比34.96%；從年齡分布看，以24-30歲的用戶群體最多，占比36.52%，31到35歲的用戶占比24.23%，36到40歲占比20.27%，41歲以及以上占比10.30%；從用戶消費能力看，中高消費者占比33.48%，中等消費者占比30.43%，高消費者占比14.70%；從地域分布看，新一線城市用戶最多，占比27.93%，一線城市占比19.93%，二線城市占比19.00%，其中廣州用戶最多，其次為深圳、杭州和北京。
3. 信息結構
鐵路12306的一級菜單包含首頁、出行服務、訂單、鐵路會員和用戶中心?！甘醉摗怪饕獮橛脩籼峁┗疖嚻?、飛機票和汽車票的購買，其次還提供各種快捷功能入口和酒店預訂等服務；「出行服務」主要為用戶提供約車、酒店、訂單等服務；「訂單」是可查詢和管理在12306的各種訂單；「鐵路會員」是12306的會員版塊，提供車票兌換、會員活動等內容；用戶中心提供個人資料管理、出行向導和常用功能等內容。
4. 重要迭代記錄
根據七麥數據統計，鐵路12306的APP首個版本發布于2012年10月16日，截止到2023年1月12日，APP版本已經更新至V5.6.3版本，近一年版本更新次數為5次。
版本重要迭代記錄
2021年9月，發布V5.4.0版本，新增無障礙功能、老人及障礙人士購票更便捷，即愛心版；
5. 產品生命周期
作為中國鐵路客戶服務中心的官方購票平臺，鐵路12306距離首個版本發布時間已經過去10年。從易觀千帆數據觀察，截止到2022年10月，12306月活躍用戶人數6,923.78萬，日均活躍人數811.65萬。由于是國有企業運營，而且是壟斷業務，12306沒有任何商業變現的壓力，從產品發布時間和活躍用戶人數看，目前處于產品生命周期的成熟期。
6. 競爭圖譜
截止到2022年10月，易觀千帆數據顯示，鐵路12306APP在蘋果的APP Store應用市場APP總排名71位，旅游類排名第一，汽車火車船票預定類第一，月活躍用戶人數幾乎是其他APP的總和。
三、出行服務
作為12306最核心、最重要以及實現商業變現的服務，出行服務主要為用戶提供火車票、飛機票的銷售，其次還鏈接了眾多第三方合作伙伴，為用戶在出行的各種場景提供了便捷的服務。
1. 票務
「票務」是12306最核心的服務，主要為用戶提供火車票、飛機票和汽車票的查詢以及銷售，其次12306還對三種產品進行了組合，推出了空鐵聯運、鐵水聯運這樣的服務。
1.1 火車票
「火車票」就是為用戶提供火車和動車的票務銷售，用戶輸入出發站、終點站和時間以后，就可以進行查詢，其次還支持對已購買的車票進行變更到站、改簽和退票。
1.1.1 售票
1.1.1.1 售票頁
當用戶輸入目標站點以后，就進入了售票頁。在這個頁面，可以看到當天列車的所有車次，包括直達、中轉、出發時間和剩余票數。在底部，有一個菜單欄，包含了篩選、耗時最短、發時最早、顯示票價和候補下單五個功能，這主要是幫助用戶快速尋找符合自己需求的車次，比如出發車站、出發時間等。
體驗陷阱
這個頁面的操作體驗不太友好，底部的菜單欄不僅沒有實現全屏手機設備的兼容，而且幾乎和背景的元素貼合在一起，不夠醒目，如果用戶不注意，根本無法發現底部竟然還有一排菜單欄幫助用戶進行高效的檢索。
1.1.1.2 訂單頁
①在用戶選擇好車次以后，就進入訂單頁。用戶需要選擇座位的系別，包括硬座、軟座、二等座、一等座、特等座等。
②用戶需要選擇乘車人。添加乘車人的步驟比較簡單，在輸入用戶的真實姓名、身份證號碼和手機號碼以后，即可添加成功。首次使用12306的用戶需要進行身份核驗，用戶需要通過驗證系統發送的核驗信息才能添加成功。
細節偵查
「姓名」這里有一個非常友好的設計體驗，那就是針對無法輸入的生僻字、名字超過30個字符，以及外籍用戶的極端情況都給出了詳細的指導，針對用戶可能出現的極端的情況給與及時的提示，這就是尼爾森十大原則中的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
③在「選擇乘車人」的右邊，還有一個「選擇受讓人」的功能。這個功能有很高的學習成本，會讓用戶摸不著頭腦。我也是通過百度查詢才了解到這是一個用戶權益功能，它主要是指用戶可以把平時購買火車票獲得的積分轉讓給指定的用戶，積分又可以抵消火車票款，從而實現抵扣。
④選擇好乘車人以后，用戶可以進行選座，就進入了提交訂單、支付費用的環節。
1.1.1.3 支付頁
①訂單生成后，用戶需要在付款限定時間內支付火車票費用，否則訂單將會取消。其次在支付頁，也向用戶推薦相關的保險服務，比如鐵路乘意險，又分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險。
②「購買返程」其實一個非常便捷的功能，但12306設計的層級太深了，而且沒有加上一鍵返回首頁或訂單頁的按鈕，用戶如果想退回到訂單頁或首頁，需要不斷點擊返回，操作路徑實在太長。
體驗陷阱
底部菜單設計了三個按鈕，違反了費茨定律的設計原則。用戶在這個支付頁的主要目標是支付費用，但是菜單欄的三個按鈕權重設計得一樣高，取消訂單和購買返程這兩個按鈕，嚴重干擾了用戶的選擇，降低了操作效率。
1.1.1.4 支付成功頁
當用戶支付成功以后，「支付成功頁」為用戶提供餐飲預訂、出行保險、酒店入住、網絡約車等服務，非常便捷。不過內容的規劃比較亂，體驗稍差。
1.1.1.5 候補下單
「候補下單」是一個非常方便的功能，這個功能主要解決在當前車次沒票的情況幫助乘客自動排隊，如果有其他乘客退票，就自動搶票，非常貼心。這個功能也被譽為黃牛的終結者，幫助乘客自主排隊。
1.1.2 變更到站
「變更到站」是指乘客可以更改目標站點，進入訂單詳情頁后，點擊「變更到站」按鈕，點擊底部的「立即變更到站」就可進入變更頁面。在變更頁面，乘客可以重新輸入目標站點，然后再次進入車票售票頁，選中需要變更的車次以后，進入訂單頁提交訂單，變更成功。需要注意的是，變更到站只能辦理一次。
體驗陷阱
當用戶點擊「變更到站」的時候，如果不注意觀察頁面，根本感受不出原來需要在底部菜單欄進行操作，會讓乘客陷入焦躁，不知道下一步從哪里進入。其次在變更到站頁面，下半部分設計了很多快捷入口，比如車站大屏、約車、餐飲特產等，把用戶的注意力分散了。這兩個設計都嚴重了違反了費茨定律和席克定律，大大降低了用戶的操作效率。
1.1.3 改簽
「改簽」是指用戶可以更改出行的時間，改簽的流程和「變更到站」相似，進入售票頁后，選中需要變更的車次，進入訂單頁提交訂單，改簽成功。需要注意的是，車票改簽只能辦理一次，開車前48小時以上，退票費為票價5%，24小時至48小時之間為10%，不足24小時為20%。退票費最少2元起步。
1.1.4 退票
「退票」是指用戶可以退掉已經購買的車票，退票流程比較簡單，點擊退票后，進入退票確認頁，點擊確認退票成功。需要注意是，距離開車前8天以上的不收退票費，其他的時段將會根據列車開車前的時間收取手續費，最高20%。
迭代建議
在用戶點擊退票的時候，應該出現彈窗，再次提醒用戶是否確認退票，這樣能避免用戶誤操作。這就是尼爾森十大原則的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
1.1.5 購票后
當乘客購買車票后，12306的首頁會加入一個行程的版塊，向用戶展示最近的行程詳情，其次一級菜單欄「出行服務」內容也會同步更新。這個設計非常友好，直觀醒目地告訴乘客最近的行程信息，通過外部觸發避免乘客忘記行程。
1.1.5.1 行程頁
這個頁面從上至下包含四個部分，頭部是乘客詳細的車次信息，比如出發時間、經停站、天氣等；中間是車票信息，包含檢票口、座位號、車次和乘車二維碼等信息；接下來按乘客出行前服務、車站/列車服務和到達服務三個場景為乘客推薦其他服務，比如餐飲預定、酒店預定等服務；底部是關于出發站、到達站的天氣預報信息和優惠服務等信息。
細節偵查
行程頁把乘客的出行拆分為3個場景，出行前服務（提供重點客戶預約、我要選酒店、我要去車站、我要訂餐飲和禁帶物品規定）、車站/列車服務（提供臨時身份證證明、遺失物品查找、我要訂餐飲和站內導航）和到達服務（遺失物品查找、我要訂酒店、接站約車、旅游景點預定、投訴建議和站內導航），這就是以場景為中心的設計——將設計工作的焦點從“定義系統的操作”轉變到“描述什么人將使用該系統去完成什么任務”。
1.2 飛機票
「飛機票」就是為用戶提供飛機的票務銷售，用戶需要輸入出發站、終點站和出發時間，如果攜帶孩子或者嬰兒，還需要單獨勾選。飛機票同樣支持改簽和退票。
1.2.1 售票頁
售票頁的內容非常簡單，在頭部，用戶可以左右滑動選擇時間，頁面內容以Feed流向用戶展示詳細的航班信息，其次還為用戶提供了其他出行方案參考。底部設計了一個菜單欄，用戶可以進行篩選設置，還可以根據價格高低和出發時間排序。
1.2.2 選擇艙位
選中航班班次以后，進入到「選擇艙位頁」，在這個頁面可以查看到航班的詳細信息，比如航空公司、起飛時間、值機柜臺等。用戶需要選擇艙位等級，比如經濟艙、商務艙和頭等艙，選中后，即可進入預訂流程。
拓展閱讀
為什么同一架飛機同一個經濟艙飛機票價格不一樣？這是因為一個飛機的不同艙位實際上是不同的產品，所以座位有不同的等級，故而價格有了出入。其次他們主要的區別包括但不限于退票改簽的靈活程度、出票期限和目的地停留期限等等。
1.2.3 訂單頁
在訂單頁，可以查看到訂單的詳細信息，包括收費說明、退改說明等，在用戶添加乘客以后，就可以提交訂單。這里需要注意一下，如果乘客攜帶孩子或嬰兒，需要添加兒童出行人。
體驗陷阱
當乘客勾選了「攜帶兒童或嬰兒」的選項以后，在訂單頁準備支付的時候，系統提示乘客需要返回添加兒童出行人信息。但卻并沒有告訴乘客如何添加，或直接給出對應的功能跳轉鏈接，這讓用戶點擊「返回添加」后卻找不到功能入口。這就違反了尼爾森十大原則的防錯原則，不僅在用戶犯錯之前沒有給出提示，犯錯了還不給與指導，真的非常糟糕。
1.3 汽車票
「汽車票」為用戶提供客車的票務銷售，用戶輸入出發站、終點站和時間以后，就可進入售票頁。汽車票的訂單流程非常簡單，在選中客車車次以后，添加乘客支付費用后，訂單即可生成。
體驗陷阱
用戶在選擇「達到地」搜索框輸入地名時候，應該提供模糊搜索，比如輸入湖南的地名，應該為用戶提示相關聯的車站。
1.4 空鐵聯運
空鐵聯運，顧名思義就是把飛機和高鐵這兩個產品組合在一起銷售，支持用戶一站式購買“飛機+高鐵”的聯運行程，只需一次購票、一次支付。這個功能的使用場景主要是針對出發地和目的地沒有直飛的航班情況下，為用戶提供飛機+高鐵的轉運方案。這個功能對于乘客來說，支持一站式購買“飛機+高鐵”車票，可以節省購票時間，非常友好。
1.5 鐵水聯運
和空鐵聯運一樣，這也是一個組合產品的銷售，支持用戶一站式購買“高鐵+水運”的聯運行程。使用場景、功能價值以及操作流程和空鐵聯運一樣，我們就不必重復。
1.6 雪具快運
12306還推出了一個雪具快運的服務，為廣大旅客提供多種個性化雪具寄送產品服務，還支持隨車辦理或上門辦理寄送服務，目的是為用戶打造滑雪的新體驗?！秆┚呖爝\」的操作流程也比較簡單，采用預約制，選中服務后，填寫用戶詳細信息，支付成功后，訂單生成。
1.7 小結
作為12306最重要、最核心、最復雜的功能，從這個版塊的內容拆解和實操體驗來看，可以看出12306確實已經解決被譽為全世界最復雜的搶票算法邏輯（筆者通過實操測試，幾乎都能買到票），特別是在春運這種會出現超過上億用戶搶票場景，真可謂非常不容易。不過從用戶體驗來看，非常一般，甚至有很多不合理的設計。
2. 出行
出行是12360結合了乘客在出行的場景中潛在產生的需求設計的服務，有結合車站商家的在線點餐，有結合當地地域特色的旅游服務，還有約車、保險、酒店等服務。這些服務，多數由第三方合作方提供。
2.1 餐廳特產
「餐廳特產」是一個為乘客提供在線點餐的服務，在乘客輸入列車車次以后，就可以進行點餐，支持外賣配送至列車和到店自取兩種形式。這個功能設計得很友好，不僅解決乘客在乘車前的就餐問題，為車站的商家引流，還可以增加平臺的變現方式。
2.2 鐵路游
「鐵路游」是12306結合旅游出行的場景，為乘客推出的一項旅游服務，包含旅游專列、跟團游、周末游和自由行等。這個場景的鏈接其實非常好，但是版塊目前設計得比較簡單，內容也比較少。
2.3 約車
「約車」是為乘客提供接送站、接送機、打車和租車的服務。這是一個強剛需的需求，用戶在出行的前后都有用車服務。為乘客提供約車服務，不僅能增加變現方式，還能方便乘客出行。通過實操體驗，約車主要由第三方合作方提供服務，比如曹操出行、T3出行等公司，為乘客提供出租車、品質專車和商務車等車型。
2.4 保險
保險分為乘意險和出行保險。鐵路乘意險分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險，在乘客購買鐵路的訂單頁就會向乘客推薦，乘意險價格低，保障項目包含意外身故、傷殘、醫療費用、住院津貼等。出行保險由第三方公司中國太平洋保險提供，主要為乘客提供出行安心保、空鐵聯運險和旅程預定取消險。
2.5 酒店
酒店這個版塊的內容相對夯實，不僅有新客大禮包這樣的用戶權益，還有商旅專區、今夜甩賣、高端酒店這樣的內容。甚至還設計了專門的酒店會員VIP，包含普通會員、銀卡會員、金卡會員、白金卡會員和黑金卡會員，相對其他版塊而言，這個版塊花了比較多的心思。
2.6 鐵路商城
鐵路商城是12360以鄉村振興·幫扶推介為主題打造的一個商城，包含了幫扶專區、優選好物、兌換專區、今日特賣等內容，其次還支持企業集采，批量購買。
2.7 小結
從這個版塊，可以看出12360其實結合了用戶吃穿住行的剛需場景設計了對應的服務，有自主運營也有完全依靠第三方提供。不過整體的用戶體驗比較差，事實上可以參考像順豐速運、智聯招聘這些APP，通過內置小程序的形式來設計，完全可以把這些版塊讓第三方單獨設計和維護，同時還能為用戶帶來更好的體驗。
3. 會員
鐵路暢行會員是中國鐵路統一對外會員服務品牌，開通暢行會員不需要花錢，暢行會員主要是用于會員用戶積累乘車積分、用積分兌換車票等，主要包含積分權益，兌換車票、無票候補和會員活動四大會員權益。這個頁面設計得比較簡陋，也沒有太多價值的內容，可以看出12306在用戶運營方面比較欠缺。
4. 訂單
12306的訂單包含了火車票訂單、餐飲訂單、保險訂單、酒店訂單、空鐵聯運訂單、計次定期票訂單、約車訂單、出站引導服務訂單、鐵路商城訂單、汽車票訂單、旅游訂單和鐵水聯運訂單多達12種訂單，從這些訂單類型可以看出12306的服務特別多。
體驗陷阱
這個設計實在太糟糕，嚴重違反了7±2效應。琳瑯滿目，花枝招展，讓用戶在這個頁面幾乎迷失。更糟糕的是，當你有一個非常重要的待支付訂單，這個頁面竟然沒有角標提醒，最終你會因為這個糟糕的設計打亂自己的行程計劃。
內容服務是幫助產品實現用戶留存和運營的版塊，不過從12306的內容設計來看，整個產品的運營手段比較少，所以我把12306現有設計的功能拆分為便捷功能和向導功能。
1. 便捷功能
以下這七個功能，對用戶而言，是非常便捷、友好的功能，可以幫助用戶在出行的旅途中獲取很多幫助。
1.1 車站大屏
「車站大屏」是一個非常貼心的功能，通過這個功能，可以為用戶提供車站的實時列車信息，非常方便。大屏詳情頁可以拆分為三塊內容，左上角可以切換全國各地的火車站，頭部還有搜索框，為用戶提供車次的查詢，主體內容是當前車站向西的車次信息，包含發車時間、候車室、檢票口和候車狀態等。
1.1.1 車次詳情頁
進入列車的「車次詳情頁」，可以查看當前車次的完整信息，比如檢票狀態、候車室、檢票口和全程停靠站、停留信息。在這個頁面，還提供了「關注列車」的功能（關注后并無關注數據，顯得很雞肋），以及直接預訂當前車次的入口。
1.1.2 車站詳情頁
「車站詳情頁」就像一個站點的主頁，為用戶提供完整的車站信息查詢。這個頁面可以拆分為四塊，頭部可以切換其他站點，并提供當前車站的天氣情況以及車站基礎信息。金剛區位8個功能入口，包含車站車次、站內導航、重點旅游、餐飲服務、周邊酒店等。中間是當前車站的起售時間和換乘時間，底部是車站附近周邊的酒店精選。
迭代建議
這個頁面把車站當做一個主體，聚合了一個車站完整的功能，其實挺有創意，但頁面隱藏得很深，如果不去拆解，幾乎很難發現，很是可惜。我認為完全可以提高權重，升級為一級欄目，代替會員，或者和出行欄目進行整合升級。
1.2 站內導航
「站內導航」提供目標車站的LBS導航，對于乘客來說，到達一個陌生的站點，需要清晰的指引，這是一個非常便捷、溫馨的功能，能幫乘客解決很多問題。不過這里有一個莫名其妙的設計，那就是進入這個功能之前，系統提示請搖“8”字校準手機，事實上這里是一個加載動畫，但是畫面和內容卻誤導了用戶，我甚至每次進入都傻乎乎的搖動手機。
1.3 臨時身份證
臨時身份證是一個非常重要的功能，12306現在支持APP在線申請，極大方便了乘客的出行。申請流程也比較簡單，填寫個人信息，驗證審核通過后，就可以生成電子證照使用。每個人每個月有3次申請臨時乘車身份證機會。
1.4 遺失物品
這是一個非常貼心的功能，如果你在乘車的過程中不小心丟失物品，可以通過這個功能登記，輸入你的詳細信息就能登記成功。
1.5 重點旅客
這也是一個非常貼心的功能，主要為老年人、殘疾人服務，通過填入你的信息，列車會根據你的情況提供優先進站、協助乘降等服務。
1.6 愛心版
愛心版就是長輩版，專門為中老年用戶設計的版本，在用戶中心切換后就可進入愛心版。整個版本設計得非常簡潔，操作步驟也比較簡單，對中老年用戶比較友好。
1.7 英文版
英文版在用戶中心的設置點擊語言即可切換，整體的版本設計得直接簡潔，用戶體驗不錯。
1.8 小結
從這個版塊可以看出，一個產品如果以用戶為中心去設計，是可以為用戶帶來很大的便捷和愉悅體驗。比如像臨時身份證這樣的功能，過往我們只能提前出發去車站排隊辦理，但如今12306已經把這樣的痛點解決，為用戶節省了大量的時間。
2. 向導功能
以下8個功能，雖然屬于出行向導，不過體驗下來，感覺用戶體驗比較差，很多功能完全無法弄懂它的設計目的是什么，顯得非常雞肋。
2.1 快捷退票
「快捷退票」這個功能的設計，讓人摸不著頭腦。從操作流程看，首先需要輸入用戶的詳細信息，包括姓名、身份證號碼和手機，其次需要進行人臉核驗，到了第三步還需要選擇車票的日期車次，在最后的退票操作頁面，用戶點擊退款后，沒有和用戶再次確認就直接退票。整個流程體驗下來，非常糟糕。
體驗陷阱
這個功能和訂單頁的退票感受不出來有何區別？如果用戶要退款，不如直接去訂單頁進行退票，操作步驟簡單，一目了然。其次不支持自動導入用戶的購票信息實在太不方便，需要通過選擇車票購買日期和車次，這個設計實在讓人生氣和憤怒（我在體驗的過程中到了第三步只能退回到訂單頁把購票日期和車次截圖下來，又再次重復前面兩個步驟才到這個步驟）。
2.2 聯系方式
這也是一個看不懂的功能，進入頁面后，需要用戶輸入乘客的詳細信息，但是這個乘客信息和用戶在購買車票時候需要添加到乘客信息有什么不同？更糟糕的是，當你把自己的電話號碼、身份證信息填入后，系統會顯示核驗成功，然而當你再一次進入，頁面內容還是和之前并無區別，你不知道自己是不是還要重新輸一次？
2.3 時刻表
「時刻表」主要為乘客提供查詢列班車次的出發時間和到站信息，但這個功能「車站大屏」幾乎已經包含了，這個功能顯得意義不大。
2.4 查票價
這個功能非常雞肋，因為在火車票的售票詳情頁就可以清晰直觀地查詢到列車票價信息，相反在這個頁面，根本無法看到價格，因為價格的字體大小只有20px，乘客幾乎很難注意到。
2.5 查代售點
這個功能主要為用戶提供全國各地火車票代售點的查詢，不過在互聯網技術發展到今天，火車票代售點越來越少了。從12306采集的信息來看，部分代售點缺少電話等關鍵信息，對用戶來說，比較雞肋。
2.6 起售時間
這個功能為用戶提供各車站每日的起售時間，屬于一個低頻功能，可以解決乘客某些極端場景的需求。不過在我體驗下來，比如通過此功能查詢1月29日的車票，顯示北京站起售時間為10:00，但是在火車售票版塊，我也可以直接購買1月29日的車票，這讓我比較疑惑這個功能的價值在哪里。
2.7 正晚點
「正晚點」同樣是一個雞肋功能，而且還需要輸入準確的車次才能進行查詢，車站大屏已經完美可以取代這個功能。
2.8 列車狀態
「列車狀態」比正晚點都還雞肋，讓人憤怒，因為你需要輸入正確的出發地、到達地和出發時間，對了，還有正確的車次才能進行查詢，這樣的操作成本比下載12360APP都還麻煩。
2.9 小結
從這個部分的內容拆解和操作體驗來看，12360的產品設計得不夠細致和貼心，很多功能就像是硬生生塞進去一樣，濫竽充數。其次從他們的產品迭代記錄次數可以看出，近1年更新時間只有5次，也許每一次都是在做加法，沒有想過做減法，所以導致這部分的功能顯得雞肋而且有很大缺陷。
通過對鐵路12306的全面拆解，接下來我將從內容層、功能層、體驗層和視覺層進行總結。
1. 內容層
12306整個產品的內容設計，用一句話總結，可以歸納為——心有余力而不足?？梢钥吹?2306圍繞乘客購票、出行的潛在需求場景都設計了對應的服務，比如酒店、約車、點餐、商城等，甚至還有空鐵聯運、鐵水聯運這種多場景的組合售票方式，不過在實際的版塊內容打造中，則顯得比較空洞，體驗一般。這個產品，可以說幾乎沒有創新點，這主要也是由于它是由國有企業設計運營，背景極其復雜，設計目標也飄忽不定。
2. 功能層
在2015年之前，鐵路12360承擔了被譽為歷史上人口遷移最大的春運的搶票工作，那時候一票難求，春運去12360就像是一場噩夢。不過在經過多年的升級和優化以后，目前12360的購票效率非常高，經過筆者多次的測試和調研，目前通過12360購票已經不再是難事。而且還設計了候補搶票這樣的功能，幫助用戶解決買票痛點，可謂非常貼心、友好。
3. 體驗層
鐵路12306的用戶體驗，非常一般，我在這次的產品拆解中至少偵查出了20條體驗陷阱，這些陷阱都會給用戶帶來極其糟糕和憤怒的體驗。比如讓我像個傻瓜搖動手機的站內導航載入頁，這完全就是把用戶當成傻子一樣看待，其次還有一堆數不清的雞肋功能，對用戶的操作體驗造成了嚴重的干擾。我甚至認為愛心版和英文版比標準版使用起來更愉悅，更能減少我的焦慮。
4. 視覺層
作為一個UI設計師，在拆解12306的產品過程中，我對整個產品的設計感到絕望。首先，沒有做到統一性，整個產品毫無設計規范，比如卡片的圓角、品牌色、版塊間距根本不統一，這樣的視覺體驗一眼望去就非常糟糕；其次，圖標、活動圖、櫥窗圖以及詳情頁的設計毫無美感，滿滿的山寨APP風格，特別是訂單頁的ICON，花花綠綠、琳瑯滿目，連最基礎的統一都沒有做到。
作為一款國民級用戶APP，鐵路12306仿佛陪伴了80、90后的青春。還記得10年前老家是黑龍江和河北的大學室友，每年春運開啟之前就為了回家的火車票犯愁，不僅要去遙遠的火車站排隊，很多時候還可能空手而回，那便是最初對12306的記憶。
如今十年過去了，12306解決了億萬人的出行搶票需求，讓我們在春運的路上，可以輕松購買一張回家的票。但下一個十年，我更希望12360的產品團隊，可以重視用戶體驗設計，讓我們不再掉入那些體驗陷阱。
作者：設計大偵探 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn