SaaS，英文全稱 Software as a Service，意思為軟件即服務。是通過網(wǎng)絡提供軟件服務，可以理解為一種軟件交付模式，因為交付模式的不同也決定了和傳統(tǒng)軟件的差別。
在Saas之前傳統(tǒng)軟件需要購買后本地化部署，兩者最大的區(qū)別在于，賣軟件是將軟件作為一個軟件實體賣給客戶了；而賣SaaS 軟件的所有權還在廠商所有，提供的是“軟件服務”。
Saas模式的提出者是Salesforce創(chuàng)始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時候提出。有兩個原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統(tǒng)軟件部署實施交付的失敗率非常高；
2. 軟件的售賣價格非常高，很多中型、中小企業(yè)有需求但無法承擔高昂的費用。
基于以上兩個痛點及當時的現(xiàn)狀賣軟件給企業(yè)造成的影響，已經(jīng)形成了惡性循環(huán)，市場受到嚴重的阻礙（據(jù)Gartner 高德納公司（美國咨詢公司）的調(diào)查研究曾表明：在所有CRM項目中大約55%沒有達到軟件用戶的完整交付和預期目的，通俗的說是實施失敗。）
從賣軟件變成賣服務，其中的技術方式的改變、交易模式的改變，促成了軟件時代的變革，對于傳統(tǒng)軟件公司來說，是一次大革命。原來賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務后，這筆錢就不能在短周期內(nèi)一次性收了，現(xiàn)行的SaaS模式通常是按照用戶的使用年費來收取。
兩者差別在于，軟件商需要先主動改變可以短期的一次性高收入，從短期收入向長期收入的轉(zhuǎn)變；
所以SaaS是長期主義的事情。
失敗的Saas生意會出現(xiàn)一個問題：把長期生意做成了短期不可持續(xù)的生意；而短期生意帶來的就是經(jīng)營成本的劇增，導致生意不可持續(xù)。
所以，Saas模式?jīng)Q定了需要客戶長期使用你的產(chǎn)品，才可以長期可持續(xù)賺錢，也就是通常意義上的客戶終身價值（LTV）。
那如何做到客戶長期使用，其實只有一種方式：長期為客戶創(chuàng)造價值，做到幫客戶成功（幫助客戶的業(yè)務成功），從而持續(xù)續(xù)約。
吳昊老師，在《SaaS創(chuàng)業(yè)路線圖》中的講到：SaaS的本質(zhì)是續(xù)費。這個觀點我比較贊同，SaaS的經(jīng)營本質(zhì)在于可持續(xù)。
那么，決定SaaS的成功因素是什么呢？
我認為決定性因素有三個方面：產(chǎn)品強大且靈活、用戶體驗優(yōu)質(zhì)、服務的有效支持。產(chǎn)品強大和服務的有效支持不言而喻，具體我們來聊聊用戶體驗的價值。
傳統(tǒng)軟件在一次交付實施后，客戶付80%的錢，剩下的20%能不能收回來就不那么重要。但SaaS模式，客戶每年進行續(xù)費，若產(chǎn)品使用及用戶體驗滿意度低，帶來的影響和后果可能是客戶終止續(xù)費。
因此，和傳統(tǒng)軟件相比SaaS的用戶體驗的價值就更為重要，它直接影響SaaS的續(xù)費和流失。
相信“用戶體驗”這個詞大家應該非常熟悉，接下來我們從新認識什么是用戶體驗？
官方的定義是：用戶在使用產(chǎn)品過程中建立起來的一種主觀感受。“用戶體驗”這一概念是唐納德·諾曼（Donald Norman）在20世紀90年代中期提出的。產(chǎn)品大神俞軍老師說過用戶體驗的本質(zhì)是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認為是幫助產(chǎn)品和用戶：最小成本滿足需求，同時創(chuàng)造「美·好」體驗。
怎么理解，因為用戶體驗是滿足商業(yè)目標的一種行為手段，我們來看下用戶體驗的需要考慮的雙邊關系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業(yè)最高效的服務用戶。
企業(yè)的本質(zhì)就是創(chuàng)造商業(yè)價值，商業(yè)價值來源于用戶價值，同時考慮實現(xiàn)商業(yè)價值的效果和效率。我們常常會聽到“投入產(chǎn)出比”或者叫“投資回報率”；對于商業(yè)行為中的一環(huán)用戶體驗也如此。
所以，用戶體驗的核心的就是：平衡用戶最小成本滿足需求，及企業(yè)最小成本服務用戶。完成價值交換同時，滿足持續(xù)性。
由此，可以看出在SaaS的產(chǎn)品設計中，用戶體驗其實承擔著一個比較重要的責任，因為它關系到成本的邊際和規(guī)?；挠绊?，一頭是產(chǎn)品一頭是用戶。
那么作為產(chǎn)品體驗設計師，我們需要具備一定成本意識，做好“成本管控的設計”，更本質(zhì)來說設計過程中我們應該：把復雜留給自己，把簡單留給用戶。
因為我們在設計的過程中把握產(chǎn)品的交互方式、使用流程，在用戶認知和效率層面有較強的把控空間，充分做到的以“用戶體驗”出發(fā)；那后續(xù)銷售、交付、客戶成功的全鏈路服務過程的學習效率和服務效率會呈指數(shù)級上升。
產(chǎn)品設計，應該把復雜留給自己、把簡單留給用戶。
關于用戶體驗，就不得不介紹一下“ 用戶體驗要素”模型，個人認為這是所有產(chǎn)品經(jīng)理和設計師可以貫穿整個職業(yè)生涯中都需要經(jīng)常性、反復對照思考的設計模型。
用戶體驗設計的價值遠不止于讓產(chǎn)品的視覺、顏值提升，設計更大的價值在于深入業(yè)務、洞察用戶，幫助業(yè)務梳理產(chǎn)品信息架構(gòu)、任務流程、交互體驗。
構(gòu)建系統(tǒng)的用戶使用方式和工作模式，從而達成用戶目標；通過達成用戶目標完成價值交換、以此完成商業(yè)交易達成商業(yè)目標。
回顧Saas的商業(yè)模式，Saas的商業(yè)模式?jīng)Q定我們提供的這個服務不是靠人海戰(zhàn)術，因為Saas軟件即服務的含義是所提供的軟件就等于提供自助化的服務，應該提供的是自助服務、開箱即用、開箱易用的服務。
那么Saas服務設計策略上，應該從降低系統(tǒng)使用門檻和提升用戶的自主化服務兩維度出發(fā)，根據(jù)這兩個核心維度，我們構(gòu)建了每刻SaaS產(chǎn)品體驗的設計策略模型。
第一，設計“系統(tǒng)服務自動化”，這里的服務是功能使用的操作，符合“低認知、易上手”，那么從設計整個體系 需要遵守“易發(fā)現(xiàn)、低認知、高效率、有溫度”的設計原則展開，以用戶使用行為出發(fā)設計符合用戶心智認知的功能形態(tài)和交互流程。
第二，設計“系統(tǒng)幫助自助化”，什么意思在全系統(tǒng)中構(gòu)建幫助引導的自助化體系，用戶需要幫助的時候提供人性化的引導幫助，我們從發(fā)現(xiàn)的維度、認知的維度，系統(tǒng)認知的維度，綜合考慮用戶系統(tǒng)的幫助引導。
設計原則，是指導我們做正確設計的方針。
設計原則的建立基于對用戶使用體驗全流程的基礎上，以每刻報銷的設計原則，圍繞用戶旅程、認知及行為出發(fā)構(gòu)建。
1. 當用戶接觸系統(tǒng)從看出發(fā)，看見系統(tǒng)界面、發(fā)現(xiàn)操作入口；（發(fā)現(xiàn)）
2. 帶著操作任務用戶進入系統(tǒng)、看見導航、看見文字、看見按鈕，都需要理解認知；（認知）
3.用戶從何開始、如何操作，在完成整個業(yè)務事項的過程需要進行填寫、選擇、交互過程就產(chǎn)生了生產(chǎn)效率問題；（操作）
4. 當出現(xiàn)誤操作或系統(tǒng)出錯時，需要系統(tǒng)糾錯提醒、容錯的設計、幫助及引導，當完成整個業(yè)務事項后，用戶產(chǎn)生一種的情緒感受，這個感受即是印象、評價、口碑。（感受）
緊緊圍繞產(chǎn)品業(yè)務、用戶處理特性業(yè)務的基礎上，以終為始，回歸到用戶、業(yè)務、系統(tǒng)進行思考歸納的產(chǎn)物。
設計策略，是指導我們?nèi)绾芜M行做正確的設計。
在SaaS產(chǎn)品分類上，常見的SaaS產(chǎn)品主要分為3類，行業(yè)SaaS、職能SaaS和通用SaaS。
每刻報銷產(chǎn)品從核心業(yè)務來說是職能類Saas，從提升財務人員報銷的發(fā)票審批、費用審核等效率展開，但報銷的來源又源于普通員工的業(yè)務報銷，業(yè)務報銷發(fā)生又和所在行業(yè)的費用發(fā)生行為特征有一定相關性，所以是結(jié)合職能和行業(yè)Saas的屬性，從用戶體驗的設計上需要考慮不同角色用戶對于系統(tǒng)的業(yè)務理解、功能交織使用的不同訴求，這個設計過程探索研究是相對比較有難度的，以后有機會可以展開聊。
下圖是每刻系統(tǒng)經(jīng)過6年過程中統(tǒng)計的問題分布，分布比率呈現(xiàn)：認知問題 60%，效率問題 30%、情感問題10%。
我們在訪談客戶調(diào)研發(fā)現(xiàn)，企業(yè)服務雖然客戶已經(jīng)用了好幾年我們的系統(tǒng)，但財務部門還是經(jīng)常性會碰到新入職員工的系統(tǒng)使用問題，甚至財務部門來新人時 以前系統(tǒng)發(fā)生的使用問題會從新出現(xiàn)一遍，所以企業(yè)服務有一個現(xiàn)象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個遇到的問題就是認知問題，也輔證了我們對于Saas系統(tǒng)認知問題是用戶體驗的第一大問題。
幫助體系建立可以從系統(tǒng)層面體系化有效降低用戶使用的認知成本，圍繞用戶角色的核心業(yè)務操作使用流程、洞察用戶旅程上的疑惑和障礙點。用戶首次進入系統(tǒng)要建立介紹和引導，足夠簡單、降低陌生感，來減少人力咨詢回復的投入。
相比人，系統(tǒng)的自助化和自動化的服務，更具有復用性和規(guī)模效應。
SaaS的商業(yè)模式，按年使用賬號來收費和傳統(tǒng)軟件的付費模式區(qū)別非常大，因為需要先主動放棄自己本來可以唾手可得的收入，從短期收入向長期收入的轉(zhuǎn)變。
在SaaS模式的時代，商業(yè)模式?jīng)Q定其必須關注客戶成功、客戶持續(xù)續(xù)費、LTV客戶長期價值。
SaaS的產(chǎn)品更需要重視用戶體驗，用戶體驗的優(yōu)劣決定其產(chǎn)品的長期發(fā)展，SaaS的用戶體驗設計則關注用戶使用認知和行為效率，以及系統(tǒng)服務自主化設計和系統(tǒng)幫助自動化設計，用戶體驗將在產(chǎn)品成長期后半程，逐漸成為SaaS商業(yè)模式不可或缺的產(chǎn)品競爭力。
作者：周大蝦07 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
圖標在界面設計中，雖然很小，但是卻是界面中重要組成部分之一。通過將顯示物體圖形化的形式，將功能本意高度濃縮成一個圖標，再通過視覺隱喻更快地讓用戶理解功能，同時圖形與文字相比，圖形更加生動形象，視覺能力更強、更便于記憶，用戶可以根據(jù)圖形快速定位功能位置。而順著時代的發(fā)展，圖標不再僅僅以工具的形式出現(xiàn)，更多的起到裝飾頁面，也不斷延伸出不同的圖標類型與圖標設計風格。
圖形與復雜的文字相比，更加簡潔，相應的識別效率也會更高。圖標可以將復雜的文字描述高度濃縮成一個圖標，通過視覺隱喻的方式讓用戶聯(lián)想到現(xiàn)實生活中的物體，更直觀地呈現(xiàn)圖標代表的功能，更快理解功能的意義
1.2 減輕頁面負擔
像一些通用常見的圖標，如搜索、播放按鈕、更多等，僅需要一個圖標就能清晰地傳遞功能意義給用戶，省文字的描述，節(jié)省更多的頁面空間與閱讀壓力。
1.3 更快定位功能位置
圖標與文字相比有更豐富的表現(xiàn)形式與顏色，所以視覺沖擊也就更強，也能更快地被識別出來，當用戶熟悉了產(chǎn)品后，只需要通過圖標就能快速找到想要的功能，當功能位置發(fā)生變化時，不需再重新閱讀枯燥的文字找到對應的功能，只需從圖標形狀、顏色上區(qū)別，找到對應的功能。
2.裝飾層面
2.1 傳遞品牌調(diào)性
隨著互聯(lián)網(wǎng)的發(fā)展，同類型的產(chǎn)品越來越多，要在各個產(chǎn)品中突圍，除好用的功能外還要有特色的外觀。在圖標中融入能代表產(chǎn)品品牌的符號，強化品牌調(diào)性，保持圖標的獨特性，給用戶留下深刻的印象，一看圖標就知道是哪個產(chǎn)品。
2.2 增強產(chǎn)品吸引力
如今用戶對產(chǎn)品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標可以帶給用戶更好的第一印象，增強產(chǎn)品對用戶的吸引力。
2.3 渲染氣氛
根據(jù)不同的節(jié)日或運營活動，設計相應氛圍的圖標，幫助產(chǎn)品渲染節(jié)日氛圍或加強用戶對產(chǎn)品主題運營活動的感知力度
二、圖標繪制的基本原則
1. 可識別性
圖標與文字在一定程度上起到相同的作用，都是通過特定的表現(xiàn)形式來傳達某種信息給用戶。順著時代發(fā)展，圖標的設計更精細化，產(chǎn)生了更多的設計風格，但圖標的本質(zhì)還是沒變的，是用戶進入功能的入口。因此，一個能被用戶快速識別、快速理解的圖標相當重要，是圖標設計的基本要求。我們繪制圖標時要盡量去掉輔助、無用的元素，保留最清晰、直接、有代表性的元素。
2. 風格統(tǒng)一
設計師在設計圖標時，除了會根據(jù)產(chǎn)品類型、用戶群體、品牌調(diào)性等因素決定使用哪種圖標風格外，還要根據(jù)圖標的具體使用位置，因此在一個產(chǎn)品中，常常會出現(xiàn)多種風格類型的圖標，而風格統(tǒng)一指的是在某個特定功能模塊內(nèi)的圖標風格要保持一致，是面性的圖標就是面性，是毛玻璃效果就是毛玻璃效果。
3. 大小統(tǒng)一
圓形、正方形、三角形，在這三個圖形雖然高度相同，但是整體上三個圖形的視覺重量并不相同。在實際的操作中，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標的大小，要根據(jù)圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個方向缺得越多，就往那個方向移動一點。
4. 色彩統(tǒng)一
色彩的統(tǒng)一指的是圖標色彩在飽和度與明度上保持特征統(tǒng)一，數(shù)值在一定的范圍內(nèi)發(fā)生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標，通常使用的都是產(chǎn)品的主題色，而多彩圖標，常會以主題色為主，拓展出臨近色、相似色、對比色，目前市面上大多數(shù)的圖標顏色會使用同類色與鄰近色。對于飽和度與明度的調(diào)節(jié)，我通過利用灰度模式進行輔助，使圖標視覺更統(tǒng)一柔和，不會出現(xiàn)其中一個亮眼或暗沉。
5. 占比統(tǒng)一
5.1 正負形占比統(tǒng)一
正負形的合理使用是圖標能否傳達準確意思的關鍵，因此也是常會出現(xiàn)的組成元素。在繪制圖標的正負形，注意保持占比統(tǒng)一，其中某個圖形正負形太大或太小，會顯得突兀、別扭，失去統(tǒng)一性，界面整體質(zhì)感會大大降低。
5.2 顏色占比統(tǒng)一
在繪制圖標時，確定圖標中的主色和輔色，繪制時盡量保證主色和輔色占比相同，保持圖標的統(tǒng)一性。
6. 疏密統(tǒng)一
有規(guī)律地將線條組織在一起，利于形成統(tǒng)一的視覺風格。同時，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標，縮小后反而會影響識別。同時，給圖標留出一些空間，使線與線之間不會太擠，增強圖標的呼吸感。
安利一個國外的圖標大神Myicons?，簡單的線性圖標一樣可以很精致。
三、不同風格的圖標
目前市面上的圖標主要有四種類型，分別是：線性圖標、面性圖標、寫實擬物圖標和三維立體圖標。而不同的圖標中組合的元素都會有一些差異，相同類型的圖標中也會有不同的圖標風格。
1. 線性圖標
線性圖標主要還是由線性組成，設計師可以通過改變線的粗細、線的端點、圓角大小或加入一些面性元素在里面來使線性圖標更加豐富、有趣，但整體來說純線性圖標更纖細、簡潔，使得視覺沖擊力稍微弱了些。
1.1.1 單色
單色是線性最基礎的表達方式，這種設計風格單調(diào)、視覺沖擊較差，但是制作難度低，設計所耗費的時間頁更斷，因此常常會出現(xiàn)在個人中心頁中，僅需要有圖標顯示功能入口，設計要求并不高的功能模塊中。
1.1.2 雙色
雙色圖標與單色圖標相比，視覺沖擊力更強，應用范圍更廣，通常會融入品牌主色，是除了線面圖標外出現(xiàn)在首頁中的線性圖標。因為雙色圖標可以加入品牌色，增強品牌感的同時，使圖標增加了設計感，不會像單色圖標那么單調(diào)乏味，因此雙色圖標也會以“次要功能”的形式出現(xiàn)在首頁當中。
像在“去哪兒旅行App”和“平安銀行App”中，頁面已經(jīng)存在一組視覺沖擊、視覺層級更高的一組面性圖標，但是因為業(yè)務需求露出更多功能入口，因此就可以使用線性圖標這種視覺沖擊力弱一點的圖標搭配，既不會搶走主視覺，也能滿足業(yè)務需求。
1.1.3 斷點圖標
斷點圖標在目前的app圖標設計上較少使用。雖然斷點風格圖標在表達上有一定的局限性，但是圖標設計感更強，圖標更有趣味性。
斷點圖標并不是隨便刪除某個描點，在斷點的位置選擇上和斷點的大小都是要注意的地方。斷點位置的選擇要注意兩點：
1 ) 保持相同角度，能更好地增強圖標的協(xié)調(diào)性，避免造成圖標的視覺混亂降低用戶的視覺體驗。
2 ) 選擇在線的拐角處，利用連續(xù)性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。
1.1.4 線面結(jié)合
在原本的線性圖標上加入色塊，就會產(chǎn)生新的設計風格--線面圖標。線面圖標比較特殊，圖標的視覺層級會隨著圖標中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強。因此在設計線面結(jié)合圖標時，要先確定圖標在該頁面中的重要程度，如果是主要功能則將色塊的占比加大。
1.2 線的影響
圖標中的線主要由兩個元素組成，一個是線的粗細，一個是線的端點，而這兩個元素也是主要控制線性圖標的性格。以常用的48px圖標盒子為例，常用線的粗細有2px、3px、4px，圖標的線越粗圖標越有力量感反之圖標越纖細；而圖標的圓角越小時圖標越穩(wěn)重、專業(yè)，像一些辦公軟件、金融產(chǎn)品，圖標的圓角就比較小。圓角越大圖標越飽滿親和力更強，像一些兒童學習類軟件就會使用大圓角的圖標設計。
因此，圖標的線粗細與圓角大小，都根據(jù)不同產(chǎn)品類型與目標用戶確定。而大多數(shù)線性圖標主要有四種基礎造型：纖細+小圓角、纖細+大圓角、粗描邊+小圓角/無圓角、粗描邊+大圓角。
1.2.1 纖細+小圓角
精致、嚴謹，多用在銀行、新聞類APP。沒有圓角，會使圖標更加尖銳，對于銀行類APP會給人一種威脅，但是太大的圓角，顯得有點輕浮、可愛，不符合銀行莊嚴的感覺，所以稍微添加一些圓角，使圖標更有親和力的同時，也保留一些莊嚴的感覺。
1.2.2 纖細+大圓角
更加精致、有親和力，這種風格是目前市面上軟件使用得最多的一種線性圖標風格。
1.2.3 粗描邊+無圓角/小圓角
粗曠、個性、有很強的力量感。更多的用在運動、汽車這類主要用戶傾向男性的軟件，同時也會在一些潮流類電商軟件中出現(xiàn)，凸顯更有個性的設計風格。
1.2.4 粗描邊+大圓角
圓潤、可愛、親和力強，常用在偏向兒童的產(chǎn)品
2. 面性圖標
面性圖標時軟件使用的最多的一種圖標類型，設計師通過改變色塊、圖形圓角、正負形和底托等元素，讓面性圖標呈現(xiàn)不同的設計風格，但無論是哪種設計風格，面性圖標設計沖擊力相比面性圖標更強，因此市面上大多數(shù)核心功能都會用到面性圖標來提高功能的設計層級，讓功能在頁面中更加突出。
2.1 扁平風格扁平風格的圖標常為單色圖標，圖標整體沒有漸變、高光、陰影等裝飾性設計效果，因此更加簡潔，更突出功能本身，圖標功能性更強，圖標制作成本低，曾經(jīng)也是風靡一時。但扁平風格的圖標缺少亮點與制作成本的原因，導致圖標同質(zhì)化嚴重，缺少特點，很難被人記住，因此現(xiàn)在很少被使用。
2.2 漸變色塊
在扁平風的基礎上，在色塊上添加漸變色，在保留了扁平圖標的功能性外，使圖標色彩更加豐富，在不同類型的軟件中都可以使用這種風格，算是一個比較百搭的圖標風格。同時漸變色塊也是很多面性圖標的組合基礎，在漸變色塊這個基礎上還可以添加不同的效果形成不同設計風格。
在設計漸變色塊風格的圖標時要注意兩點：
1 ) 市面上的app都會選擇同類色作為漸變色，然后通過改變顏色的飽和度，使?jié)u變色的明亮對比更加明顯的同時，顏色過渡也更加柔和舒服，使圖標更有通透感，增加視覺沖擊力。
2 ) 在設計這種有白色色塊在頂部的圖標時，可以給色塊添加一個淺淺的透明漸變，讓色塊過渡自然一些，同時也可以添加一層淺淺的陰影，增加層次感。
2.3 圖層疊加
圖層疊加風格的圖標看上去像兩個透明圖層疊加在一起的感覺，圖標層次感強，細節(jié)也更加豐富，圖標風格更新穎、更年輕化，因此如果在設計一個年輕人使用或者希望打造年輕化頁面感受的時候，可以嘗試使用圖層疊加風格。
繪制圖層疊加風格的圖標時要注意：
1 ) 重疊在一起的那個色塊是通過布爾運算得到的，并不是通過簡單的透明圖層得到的。而重疊在一起的那個色塊也不宜過于顯眼，畢竟看的是圖標的整體。因此可以參考一下“智行火車票”，通過改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標的變化，同時也不會是色塊太突兀影響觀感。
2 ) 盡量統(tǒng)一疊加部分圖形與圖標之間的占比。
2.4 毛玻璃
毛玻璃是近年最火的一種設計風格，不僅設計風格新穎、特別，而且還有很強的質(zhì)感表現(xiàn)，因此不僅在金融產(chǎn)品，還是生鮮產(chǎn)品或票務產(chǎn)品，都有毛玻璃風格的圖標。
而在設計毛玻璃圖標時，里面也有很多細節(jié)需要注意：
1 ) 背景模糊效果不需要太大，有一種若隱若現(xiàn)的感覺就可以。如果調(diào)太大，可能就看不出是毛玻璃效果了。
2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標，只需要將圖標的主色調(diào)低飽和度后，就可以使用。這樣的好處是不僅讓圖標顏色過渡更加自然，同時有更多的組合方式、更多的層次。
3 ) 使用邊緣光。毛玻璃圖標有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細節(jié)更加豐富。
2.5 晶白風格
晶白類圖標利用圓角正方形或圓形作為底托再在上面添加一個主色為白色的圖標，然后通過調(diào)節(jié)透明度、投影、漸變給圖標添加一些質(zhì)感，是常見的圖標風格，也是使用了很久的一種設計風格。
后面也延伸出了另一種設計風格圖標主題通常不會是統(tǒng)一的造型，像喜馬拉雅這種圖標，圖標本身元素復雜、細節(jié)較多，形狀也更加不可控，因此用一個淺色圓形底托，將他們統(tǒng)一起來。不僅可以將復雜的圖形統(tǒng)一起來，還可以添加吸引人眼球的漸變色更好地增加圖標的視覺占比，有更強的視覺沖擊感。
在繪制晶白風格時，注意兩點：
1 ) 可以適當改變底托圖形的形狀，增強差異化。
2 ) 統(tǒng)一光源，越白的地方越亮，注意控制好透明度的變化與角度。
2.6 實物展示
這類圖標會出現(xiàn)在生鮮類、藥品類、潮流電商類產(chǎn)品中，因為使用圖標很難將這些類型概括起來，直接使用圖片展示更加直觀，但因為圖片細節(jié)、元素更多更復雜，如果使用太多會使圖標看起來很雜亂。
3. 寫實向圖標
寫實向圖標模擬現(xiàn)實中的物體，更貼近生活，用戶對這類圖標理解能力也更強，繪制難度也更高，繪制時間也更長。寫實向圖標除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來增強實感。常常用在運營設計上，或用在一些特殊界面模塊從而增強視覺層級。
3.1 輕擬物圖標
輕擬物圖標是最近很好的的設計風格，但是輕擬物圖標出現(xiàn)在界面設計上還是比較少的。因為輕擬物圖標元素比較復雜，視覺沖擊力強，放在界面上有可能搶走用戶對核心內(nèi)容的關注度，通常會運用在運營設計長圖、彈窗、核心功能等。
而繪制輕擬物圖標，主要注意的是光影的打造。光影主要由這幾個元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標時，主要注意以下幾點：
1 ) 在繪制輕擬物圖標時，不一定需要使用統(tǒng)一色相中的顏色，可以通過改變顏色的飽和度明度的對比和冷暖色的對比來營造光影，使圖標色彩更豐富、對比更明顯。
2 ) 反光可以使用圖標主色的對比色，降低飽和度，提高明度，運用在輕擬物圖標邊緣，使邊緣更更清晰，不會糊在一起，圖標整體立體感更強。
3 ) 明暗對比越明顯，輕擬物圖標越顯通透、立體。
3.2 2.5D圖標
2.5D曾經(jīng)是很火的一種設計風格，但是現(xiàn)在已經(jīng)逐漸被輕擬物與建模替代。2.5D圖標固定展示了三個面，有很強的立體感，常常運用在科技類的網(wǎng)站設計中。
在繪制2.5D風格圖標時，要注意：
1)統(tǒng)一好圖標的厚度。
3.3 3D圖標
隨著時代進步，3D逐漸成為一個主流的設計風格。通過專業(yè)軟件給予了圖形材質(zhì)質(zhì)感、真實的光影，更加貼近生活真實物件，同時還可以配合動效的設計，有很強的視覺沖擊力和新鮮感。常常出現(xiàn)在網(wǎng)頁設計中、運營設計中。目前繪制3D圖標主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒有oc好，但是還是可以滿足日常工作。
而在繪制3D圖標需要注意以下幾點：
1 ) 統(tǒng)一主光源方向。建模里面會出現(xiàn)很多打光類型，如主光、輔光（有時不止一個）、邊緣光等。
2 ) 統(tǒng)一攝像機位置。攝像機與物體的距離、角度影響渲染的最終效果。
3 ) 用數(shù)值定義物體大小。建模軟件不像繪圖軟件那樣強調(diào)物體的數(shù)值大小，拉遠看物體就是小，拉近看就是大，做一個物體時還好，但是要做一組3D圖標時，就要定義好物體的大小，使圖標更加統(tǒng)一。
四、如何確定使用哪種類型的圖標
不同風格的圖標有著不同的特點，設計師要根據(jù)圖標放置位置和功能選擇圖標類型。其中最有決定性的因素就是圖標的重量，而影響圖標重量的因素有：占比、顏色、細節(jié)元素。線性圖標在界面中占比較少，因此看起來會更加簡潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標占比更高，視覺上會更加飽滿，同時顏色色塊使圖標更加顯眼，視覺沖擊力得到力增強，使用戶對圖標的感知力更高，是最常用的圖標類型，用在各個重要功能入口上；輕擬物和3D圖標除了占比高、顏色豐富，還有各種光影、材質(zhì)的細節(jié)，圖標元素更多，視覺沖擊力也更強了，也因為圖標復雜、視覺沖擊力強，因此很少出現(xiàn)在界面上，通常運用在一些特殊運營入口或需要吸引用戶的大模塊中。
不同的類型在界面中也會搭配出現(xiàn)。
五、圖標的繪制
1. 圖標盒子
圖標盒子是輔助繪制圖標的一個工具，幫助設計師在設計圖標時更好地規(guī)范好各個圖標的尺寸大小。而圖標盒子也有很多種，我最常用的是48*48px，這個尺寸對于線條的控制比較方便，通常用1px、2px、3px。
工具始終都是工具，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區(qū)別，因此不能單純地利用統(tǒng)一的寬高或線去界別圖標的大小，要根據(jù)圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內(nèi)的區(qū)域占滿，哪個地方缺得越多，哪個地方就拉伸一點。
2. 圖標的繪制方法
圖標中會存在標準化圖標，像刪除就是一個垃圾桶、像首頁通常是一個家的圖標、還有搜索則是放大鏡的圖，照片是兩個山一個太陽，這些圖標都習慣以這種表達方式出現(xiàn)，用戶已經(jīng)習慣了這種表現(xiàn)形式，因此對于標準化圖標，盡量維持以往的變現(xiàn)形式，讓用戶更好地理解圖標意思。
非標準化圖標可以細分為具象與抽象，對于具象類圖標，現(xiàn)實中有實物可以參照。這類圖標的設計較為簡單，可以在某度上尋找相關照片，根據(jù)實物的造型進行提煉和簡化。
抽象圖標則較為復雜，通常是某些特定行為的名詞，沒有具體直接的參照物。因此在設計前，我們要先充分理解功能本身，這個功能是什么、用戶怎么用，然后提煉關鍵詞，接著根據(jù)關鍵詞發(fā)散思維，尋找相關聯(lián)的圖形來表示含義。例如“社區(qū)”功能，功能目的是提供一個讓用戶互相交流的環(huán)境，同時吸引無目的的用戶逛起來發(fā)現(xiàn)感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關鍵詞：聚在一起、發(fā)現(xiàn)、交流。接著發(fā)散思維進行腦暴，聚在一起：一群人-圈子-同一個世界的人-星球，發(fā)現(xiàn)：看-眼睛；尋找-望遠鏡-雷達-指南針，交流：聊天-聊天氣泡-聲波。
六、圖標的使用場景
圖標運用在功能入口上是最基礎的使用場景之一，如首頁中的金剛區(qū)、個人中心都會用到很多圖標作為功能入口。
1. 金剛區(qū)
目前國內(nèi)的APP包含的功能有很多，而金剛區(qū)的作用就整合產(chǎn)品功能并放置在首頁中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產(chǎn)品功能，增強用戶對產(chǎn)品的粘性。像美團，很多人對他的了解是一個外賣工具，但它里面還有很多其他功能，使用金剛區(qū)展示它多元化的服務。
金剛區(qū)圖標通常會有1～3行，根據(jù)業(yè)務具體需求做調(diào)整，在每行中會有4～5個圖標。尺寸范圍一般在40px～48px左右（@1x），同時會根據(jù)具體的業(yè)務需求，調(diào)整大小，最終都是一預覽效果為準。
2. 個人中心
個人中心是個人類型功能、運營活動入口和工具的集合地，是除了金剛區(qū)外，含圖標最多的一個地方。個人中心中包含很多不同類型的功能，可以使用卡片式的設計，將功能圖標更好地分類。在圖標風格的選擇上，個人類型功能是最重要的功能，通常會以面性風格放置在頂部，如果個人中心中需要展示運營入口時，需要減弱個人類型功能圖標的視覺沖擊，會使用線性風格圖標。
3. 運營入口
運營入口主要作用是讓用戶點擊后跳轉(zhuǎn)到產(chǎn)品活動頁，因此具有強視覺沖擊力的圖標，會更吸引用戶眼球，從而提高點擊運營入口的機會。
因此運營入口上，通常會使用面性圖標、寫實向圖標或3d圖標。因為寫實向圖標或3D圖標可以提高視覺層級，因此經(jīng)常運用在主要運營板塊上，而面性圖標相比下較弱，當頁面已存在一個主視覺或主要功能時，運用在運營板塊上。
4. 主題板塊
在軟件中會有很多不同主題的信息板塊，同時信息板塊間有較大的差異，如果全部展示出來會使頁面樣式不同統(tǒng)一、信息混亂導致降低用戶的閱讀體驗。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關鍵信息在頁面中，保證視覺統(tǒng)一的同時，還可以起到流量分發(fā)的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗。
純文字的排版在信息流中略顯枯燥，而圖標在主題板塊中起到潤色主題的作用，渲染主題氣氛，提高不同主題板塊的識別度與差異化。對于一些長標題的主題板塊，只需要記住圖標就能快速定位主題板塊位置。
5. 底部tab欄
底部tab欄功能數(shù)量通常在2～5個，在設計時，要設計點擊前和點擊后兩個圖標狀態(tài)，同時幫助兩個狀態(tài)是有明顯的變化。底部tab欄圖標大小通常在22px（@1x）左右，而圖標底下的文字時10px（@1x）。底部tab欄作為最常出現(xiàn)的區(qū)域，是傳達產(chǎn)品品牌感、提升產(chǎn)品辨識度、記憶點的重要區(qū)域，很多產(chǎn)品都會在底部tab欄的圖標設計上加入品牌元素，增強辨識度。
七、如何提高圖標設計能力
1. 階段一：臨摹
臨摹是人類學習一個新技能開始，就像嬰兒學習父母說話一樣。但是一開始很多都不會臨摹，或者照著畫也不會，那我們應該如何去做？
1.1 臨摹效果不佳
1 ) 提高審美能力，多看一些主流的圖標，可以上追波看看目前流行的設計風格，不行的話就去看看大廠都在畫怎樣的圖標。
2 ) 明確自己的能力，對自己目前的設計水平有一個客觀的評價，到一個怎樣的水平。很多人都急于求成，最基礎的線性圖標都不會就上來搞輕擬物，畫來畫去都不好看，最后就放棄了。
3 ) 敢于支出自己的不足，許多人畫了許多時間去畫一組圖標，就很容易被自己催眠，以為自己已經(jīng)畫得很好了，其實還會有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對比原作，自 己有哪些地方?jīng)]有原作做得好的
1.2 會了，但沒完全會
什么是會了，指的是可以繪制出于優(yōu)秀原作一樣的圖標；什么是沒完全會，指的是不知道原作是怎么達到這個好看的效果的。而且很重要的一點是，你臨摹的作品可能也有一些不好，需要改進的地方，以此在這個階段我們要做的是：
1 ) 多看別人總結(jié)的知識點，知道如何去判斷一個圖標是否還有可以改進的地方，這樣繪制是不是正確的
2 ) 懂得總結(jié)與思考，原作是用來什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪
2. 階段二：半原創(chuàng)
臨摹是一個提升自己的手法，但不代表可以直接用到自己的作品中，直接復制別人的設計，并不叫設計師，復制粘貼誰不會啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創(chuàng)。這里說的半原創(chuàng)不是指在別人圖標的基礎上加上兩筆就是半原創(chuàng)，而是要吸取了優(yōu)秀圖標的優(yōu)點后，重新設計出一個有相同特點的圖標。那我們應該如何半原創(chuàng)呢？
1 ) 還是多看，但是不同于臨摹階段，我們在臨摹的時候還要多想，這個圖標的特點是什么、怎么做、還能怎么用，積累圖標不同的表現(xiàn)形式2 ) 多練，這個建立在多臨摹上，目的知道別人的技法是什么做的，練習了不同的技法后，將它們再融合在一起
3. 階段三：原創(chuàng)
第三個階段，也是最難得階段。目前很多情況都是只能成為融圖設計師，將不同作品優(yōu)秀的點組合起來。但如果要建立自己的風格也是要做融圖設計師的基礎上，多想、多嘗試，敢于突破，在一次次的融圖后，發(fā)現(xiàn)出自己的特點，為自己的作品打上自己標簽，輸出具有差異化特點的設計。最有印象的就是夸克的設計，品牌特色很明顯，其實我們每個人也可以成為一個品牌，只要我們足夠努力
作者：阿恒的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
有人說它是全世界最牛逼的APP，因為它的算法難度和春運期間訪問量幾乎是全球之最；但有人說它是全世界最垃圾的APP，因為在使用這個產(chǎn)品的過程中，遇見很多奇葩、憤怒的體驗。關于這兩種說法，眾說紛紜，本期設計大偵探，就來全面拆解鐵路12306APP，一起來看看這個產(chǎn)品到底是如何設計的，用戶體驗如何。
1. 內(nèi)容結(jié)構(gòu)
全文9700字，分為六個部分，分別是導讀、產(chǎn)品畫像、出行服務、內(nèi)容服務、思考總結(jié)和后記，你可以通過下面的思維導圖對本文內(nèi)容快速的了解。
2. 適合人群
第一類，UI/交互設計師，可以跳出執(zhí)行層，全方位體驗12306的產(chǎn)品設計，多維度去思考和總結(jié)如何規(guī)避類似的陷阱；第二類，產(chǎn)品經(jīng)理/運營，通過全面的產(chǎn)品設計拆解、體驗反饋，獲取產(chǎn)品設計參考；第三類，旅游及出行相關行業(yè)從業(yè)者，通過對12306的全面拆解，獲取競品設計參考。
3. 分析模型
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環(huán)節(jié)，主要用于拆分和分析產(chǎn)品的功能價值。
第二個，尼爾森十大可用性原則。尼爾森十大可用性原則是界面設計中最基礎、最重要的設計原則，任何產(chǎn)品的設計，都可以通過這十個原則進行指導設計。尼爾森十大原則包括即系統(tǒng)可見性原則、環(huán)境貼切原則、撤銷重做原則、一致性原則、防錯原則、易取原則、靈活高效原則、易掃原則、容錯原則、人性化幫助原則，通過這十大原則，可以對12306的產(chǎn)品設計體驗進行全面的校驗和偵查。
第三個，設計心理學。包括常見的格式塔原理、費茨定律、巴甫洛夫反應、7±2效應、席克定律等常見設計基礎理論。
1. 產(chǎn)品介紹
鐵路12306是中國鐵路客戶服務中心推出的官方手機購票應用軟件，主要為全國各地的乘客提供火車票預定、機票預訂、汽車票預訂等購票業(yè)務，首個版本發(fā)布于2012年10月16日，根據(jù)易觀千帆數(shù)據(jù)，截止到2022年10月，12306月活躍用戶人數(shù)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. 信息結(jié)構(gòu)
鐵路12306的一級菜單包含首頁、出行服務、訂單、鐵路會員和用戶中心?！甘醉摗怪饕獮橛脩籼峁┗疖嚻?、飛機票和汽車票的購買，其次還提供各種快捷功能入口和酒店預訂等服務；「出行服務」主要為用戶提供約車、酒店、訂單等服務；「訂單」是可查詢和管理在12306的各種訂單；「鐵路會員」是12306的會員版塊，提供車票兌換、會員活動等內(nèi)容；用戶中心提供個人資料管理、出行向?qū)Ш统Ｓ霉δ艿葍?nèi)容。
4. 重要迭代記錄
根據(jù)七麥數(shù)據(jù)統(tǒng)計，鐵路12306的APP首個版本發(fā)布于2012年10月16日，截止到2023年1月12日，APP版本已經(jīng)更新至V5.6.3版本，近一年版本更新次數(shù)為5次。
版本重要迭代記錄
2021年9月，發(fā)布V5.4.0版本，新增無障礙功能、老人及障礙人士購票更便捷，即愛心版；
5. 產(chǎn)品生命周期
作為中國鐵路客戶服務中心的官方購票平臺，鐵路12306距離首個版本發(fā)布時間已經(jīng)過去10年。從易觀千帆數(shù)據(jù)觀察，截止到2022年10月，12306月活躍用戶人數(shù)6,923.78萬，日均活躍人數(shù)811.65萬。由于是國有企業(yè)運營，而且是壟斷業(yè)務，12306沒有任何商業(yè)變現(xiàn)的壓力，從產(chǎn)品發(fā)布時間和活躍用戶人數(shù)看，目前處于產(chǎn)品生命周期的成熟期。
6. 競爭圖譜
截止到2022年10月，易觀千帆數(shù)據(jù)顯示，鐵路12306APP在蘋果的APP Store應用市場APP總排名71位，旅游類排名第一，汽車火車船票預定類第一，月活躍用戶人數(shù)幾乎是其他APP的總和。
三、出行服務
作為12306最核心、最重要以及實現(xiàn)商業(yè)變現(xiàn)的服務，出行服務主要為用戶提供火車票、飛機票的銷售，其次還鏈接了眾多第三方合作伙伴，為用戶在出行的各種場景提供了便捷的服務。
1. 票務
「票務」是12306最核心的服務，主要為用戶提供火車票、飛機票和汽車票的查詢以及銷售，其次12306還對三種產(chǎn)品進行了組合，推出了空鐵聯(lián)運、鐵水聯(lián)運這樣的服務。
1.1 火車票
「火車票」就是為用戶提供火車和動車的票務銷售，用戶輸入出發(fā)站、終點站和時間以后，就可以進行查詢，其次還支持對已購買的車票進行變更到站、改簽和退票。
1.1.1 售票
1.1.1.1 售票頁
當用戶輸入目標站點以后，就進入了售票頁。在這個頁面，可以看到當天列車的所有車次，包括直達、中轉(zhuǎn)、出發(fā)時間和剩余票數(shù)。在底部，有一個菜單欄，包含了篩選、耗時最短、發(fā)時最早、顯示票價和候補下單五個功能，這主要是幫助用戶快速尋找符合自己需求的車次，比如出發(fā)車站、出發(fā)時間等。
體驗陷阱
這個頁面的操作體驗不太友好，底部的菜單欄不僅沒有實現(xiàn)全屏手機設備的兼容，而且?guī)缀鹾捅尘暗脑刭N合在一起，不夠醒目，如果用戶不注意，根本無法發(fā)現(xiàn)底部竟然還有一排菜單欄幫助用戶進行高效的檢索。
1.1.1.2 訂單頁
①在用戶選擇好車次以后，就進入訂單頁。用戶需要選擇座位的系別，包括硬座、軟座、二等座、一等座、特等座等。
②用戶需要選擇乘車人。添加乘車人的步驟比較簡單，在輸入用戶的真實姓名、身份證號碼和手機號碼以后，即可添加成功。首次使用12306的用戶需要進行身份核驗，用戶需要通過驗證系統(tǒng)發(fā)送的核驗信息才能添加成功。
細節(jié)偵查
「姓名」這里有一個非常友好的設計體驗，那就是針對無法輸入的生僻字、名字超過30個字符，以及外籍用戶的極端情況都給出了詳細的指導，針對用戶可能出現(xiàn)的極端的情況給與及時的提示，這就是尼爾森十大原則中的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
③在「選擇乘車人」的右邊，還有一個「選擇受讓人」的功能。這個功能有很高的學習成本，會讓用戶摸不著頭腦。我也是通過百度查詢才了解到這是一個用戶權益功能，它主要是指用戶可以把平時購買火車票獲得的積分轉(zhuǎn)讓給指定的用戶，積分又可以抵消火車票款，從而實現(xiàn)抵扣。
④選擇好乘車人以后，用戶可以進行選座，就進入了提交訂單、支付費用的環(huán)節(jié)。
1.1.1.3 支付頁
①訂單生成后，用戶需要在付款限定時間內(nèi)支付火車票費用，否則訂單將會取消。其次在支付頁，也向用戶推薦相關的保險服務，比如鐵路乘意險，又分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險。
②「購買返程」其實一個非常便捷的功能，但12306設計的層級太深了，而且沒有加上一鍵返回首頁或訂單頁的按鈕，用戶如果想退回到訂單頁或首頁，需要不斷點擊返回，操作路徑實在太長。
體驗陷阱
底部菜單設計了三個按鈕，違反了費茨定律的設計原則。用戶在這個支付頁的主要目標是支付費用，但是菜單欄的三個按鈕權重設計得一樣高，取消訂單和購買返程這兩個按鈕，嚴重干擾了用戶的選擇，降低了操作效率。
1.1.1.4 支付成功頁
當用戶支付成功以后，「支付成功頁」為用戶提供餐飲預訂、出行保險、酒店入住、網(wǎng)絡約車等服務，非常便捷。不過內(nèi)容的規(guī)劃比較亂，體驗稍差。
1.1.1.5 候補下單
「候補下單」是一個非常方便的功能，這個功能主要解決在當前車次沒票的情況幫助乘客自動排隊，如果有其他乘客退票，就自動搶票，非常貼心。這個功能也被譽為黃牛的終結(jié)者，幫助乘客自主排隊。
1.1.2 變更到站
「變更到站」是指乘客可以更改目標站點，進入訂單詳情頁后，點擊「變更到站」按鈕，點擊底部的「立即變更到站」就可進入變更頁面。在變更頁面，乘客可以重新輸入目標站點，然后再次進入車票售票頁，選中需要變更的車次以后，進入訂單頁提交訂單，變更成功。需要注意的是，變更到站只能辦理一次。
體驗陷阱
當用戶點擊「變更到站」的時候，如果不注意觀察頁面，根本感受不出原來需要在底部菜單欄進行操作，會讓乘客陷入焦躁，不知道下一步從哪里進入。其次在變更到站頁面，下半部分設計了很多快捷入口，比如車站大屏、約車、餐飲特產(chǎn)等，把用戶的注意力分散了。這兩個設計都嚴重了違反了費茨定律和席克定律，大大降低了用戶的操作效率。
1.1.3 改簽
「改簽」是指用戶可以更改出行的時間，改簽的流程和「變更到站」相似，進入售票頁后，選中需要變更的車次，進入訂單頁提交訂單，改簽成功。需要注意的是，車票改簽只能辦理一次，開車前48小時以上，退票費為票價5%，24小時至48小時之間為10%，不足24小時為20%。退票費最少2元起步。
1.1.4 退票
「退票」是指用戶可以退掉已經(jīng)購買的車票，退票流程比較簡單，點擊退票后，進入退票確認頁，點擊確認退票成功。需要注意是，距離開車前8天以上的不收退票費，其他的時段將會根據(jù)列車開車前的時間收取手續(xù)費，最高20%。
迭代建議
在用戶點擊退票的時候，應該出現(xiàn)彈窗，再次提醒用戶是否確認退票，這樣能避免用戶誤操作。這就是尼爾森十大原則的容錯原則，幫助用戶從錯誤中恢復，將損失降到最低。
1.1.5 購票后
當乘客購買車票后，12306的首頁會加入一個行程的版塊，向用戶展示最近的行程詳情，其次一級菜單欄「出行服務」內(nèi)容也會同步更新。這個設計非常友好，直觀醒目地告訴乘客最近的行程信息，通過外部觸發(fā)避免乘客忘記行程。
1.1.5.1 行程頁
這個頁面從上至下包含四個部分，頭部是乘客詳細的車次信息，比如出發(fā)時間、經(jīng)停站、天氣等；中間是車票信息，包含檢票口、座位號、車次和乘車二維碼等信息；接下來按乘客出行前服務、車站/列車服務和到達服務三個場景為乘客推薦其他服務，比如餐飲預定、酒店預定等服務；底部是關于出發(fā)站、到達站的天氣預報信息和優(yōu)惠服務等信息。
細節(jié)偵查
行程頁把乘客的出行拆分為3個場景，出行前服務（提供重點客戶預約、我要選酒店、我要去車站、我要訂餐飲和禁帶物品規(guī)定）、車站/列車服務（提供臨時身份證證明、遺失物品查找、我要訂餐飲和站內(nèi)導航）和到達服務（遺失物品查找、我要訂酒店、接站約車、旅游景點預定、投訴建議和站內(nèi)導航），這就是以場景為中心的設計——將設計工作的焦點從“定義系統(tǒng)的操作”轉(zhuǎn)變到“描述什么人將使用該系統(tǒng)去完成什么任務”。
1.2 飛機票
「飛機票」就是為用戶提供飛機的票務銷售，用戶需要輸入出發(fā)站、終點站和出發(fā)時間，如果攜帶孩子或者嬰兒，還需要單獨勾選。飛機票同樣支持改簽和退票。
1.2.1 售票頁
售票頁的內(nèi)容非常簡單，在頭部，用戶可以左右滑動選擇時間，頁面內(nèi)容以Feed流向用戶展示詳細的航班信息，其次還為用戶提供了其他出行方案參考。底部設計了一個菜單欄，用戶可以進行篩選設置，還可以根據(jù)價格高低和出發(fā)時間排序。
1.2.2 選擇艙位
選中航班班次以后，進入到「選擇艙位頁」，在這個頁面可以查看到航班的詳細信息，比如航空公司、起飛時間、值機柜臺等。用戶需要選擇艙位等級，比如經(jīng)濟艙、商務艙和頭等艙，選中后，即可進入預訂流程。
拓展閱讀
為什么同一架飛機同一個經(jīng)濟艙飛機票價格不一樣？這是因為一個飛機的不同艙位實際上是不同的產(chǎn)品，所以座位有不同的等級，故而價格有了出入。其次他們主要的區(qū)別包括但不限于退票改簽的靈活程度、出票期限和目的地停留期限等等。
1.2.3 訂單頁
在訂單頁，可以查看到訂單的詳細信息，包括收費說明、退改說明等，在用戶添加乘客以后，就可以提交訂單。這里需要注意一下，如果乘客攜帶孩子或嬰兒，需要添加兒童出行人。
體驗陷阱
當乘客勾選了「攜帶兒童或嬰兒」的選項以后，在訂單頁準備支付的時候，系統(tǒng)提示乘客需要返回添加兒童出行人信息。但卻并沒有告訴乘客如何添加，或直接給出對應的功能跳轉(zhuǎn)鏈接，這讓用戶點擊「返回添加」后卻找不到功能入口。這就違反了尼爾森十大原則的防錯原則，不僅在用戶犯錯之前沒有給出提示，犯錯了還不給與指導，真的非常糟糕。
1.3 汽車票
「汽車票」為用戶提供客車的票務銷售，用戶輸入出發(fā)站、終點站和時間以后，就可進入售票頁。汽車票的訂單流程非常簡單，在選中客車車次以后，添加乘客支付費用后，訂單即可生成。
體驗陷阱
用戶在選擇「達到地」搜索框輸入地名時候，應該提供模糊搜索，比如輸入湖南的地名，應該為用戶提示相關聯(lián)的車站。
1.4 空鐵聯(lián)運
空鐵聯(lián)運，顧名思義就是把飛機和高鐵這兩個產(chǎn)品組合在一起銷售，支持用戶一站式購買“飛機+高鐵”的聯(lián)運行程，只需一次購票、一次支付。這個功能的使用場景主要是針對出發(fā)地和目的地沒有直飛的航班情況下，為用戶提供飛機+高鐵的轉(zhuǎn)運方案。這個功能對于乘客來說，支持一站式購買“飛機+高鐵”車票，可以節(jié)省購票時間，非常友好。
1.5 鐵水聯(lián)運
和空鐵聯(lián)運一樣，這也是一個組合產(chǎn)品的銷售，支持用戶一站式購買“高鐵+水運”的聯(lián)運行程。使用場景、功能價值以及操作流程和空鐵聯(lián)運一樣，我們就不必重復。
1.6 雪具快運
12306還推出了一個雪具快運的服務，為廣大旅客提供多種個性化雪具寄送產(chǎn)品服務，還支持隨車辦理或上門辦理寄送服務，目的是為用戶打造滑雪的新體驗?！秆┚呖爝\」的操作流程也比較簡單，采用預約制，選中服務后，填寫用戶詳細信息，支付成功后，訂單生成。
1.7 小結(jié)
作為12306最重要、最核心、最復雜的功能，從這個版塊的內(nèi)容拆解和實操體驗來看，可以看出12306確實已經(jīng)解決被譽為全世界最復雜的搶票算法邏輯（筆者通過實操測試，幾乎都能買到票），特別是在春運這種會出現(xiàn)超過上億用戶搶票場景，真可謂非常不容易。不過從用戶體驗來看，非常一般，甚至有很多不合理的設計。
2. 出行
出行是12360結(jié)合了乘客在出行的場景中潛在產(chǎn)生的需求設計的服務，有結(jié)合車站商家的在線點餐，有結(jié)合當?shù)氐赜蛱厣穆糜畏眨€有約車、保險、酒店等服務。這些服務，多數(shù)由第三方合作方提供。
2.1 餐廳特產(chǎn)
「餐廳特產(chǎn)」是一個為乘客提供在線點餐的服務，在乘客輸入列車車次以后，就可以進行點餐，支持外賣配送至列車和到店自取兩種形式。這個功能設計得很友好，不僅解決乘客在乘車前的就餐問題，為車站的商家引流，還可以增加平臺的變現(xiàn)方式。
2.2 鐵路游
「鐵路游」是12306結(jié)合旅游出行的場景，為乘客推出的一項旅游服務，包含旅游專列、跟團游、周末游和自由行等。這個場景的鏈接其實非常好，但是版塊目前設計得比較簡單，內(nèi)容也比較少。
2.3 約車
「約車」是為乘客提供接送站、接送機、打車和租車的服務。這是一個強剛需的需求，用戶在出行的前后都有用車服務。為乘客提供約車服務，不僅能增加變現(xiàn)方式，還能方便乘客出行。通過實操體驗，約車主要由第三方合作方提供服務，比如曹操出行、T3出行等公司，為乘客提供出租車、品質(zhì)專車和商務車等車型。
2.4 保險
保險分為乘意險和出行保險。鐵路乘意險分為平安險、行運險和順意險，主要為乘客提供意外傷害疾病身故等保險，在乘客購買鐵路的訂單頁就會向乘客推薦，乘意險價格低，保障項目包含意外身故、傷殘、醫(yī)療費用、住院津貼等。出行保險由第三方公司中國太平洋保險提供，主要為乘客提供出行安心保、空鐵聯(lián)運險和旅程預定取消險。
2.5 酒店
酒店這個版塊的內(nèi)容相對夯實，不僅有新客大禮包這樣的用戶權益，還有商旅專區(qū)、今夜甩賣、高端酒店這樣的內(nèi)容。甚至還設計了專門的酒店會員VIP，包含普通會員、銀卡會員、金卡會員、白金卡會員和黑金卡會員，相對其他版塊而言，這個版塊花了比較多的心思。
2.6 鐵路商城
鐵路商城是12360以鄉(xiāng)村振興·幫扶推介為主題打造的一個商城，包含了幫扶專區(qū)、優(yōu)選好物、兌換專區(qū)、今日特賣等內(nèi)容，其次還支持企業(yè)集采，批量購買。
2.7 小結(jié)
從這個版塊，可以看出12360其實結(jié)合了用戶吃穿住行的剛需場景設計了對應的服務，有自主運營也有完全依靠第三方提供。不過整體的用戶體驗比較差，事實上可以參考像順豐速運、智聯(lián)招聘這些APP，通過內(nèi)置小程序的形式來設計，完全可以把這些版塊讓第三方單獨設計和維護，同時還能為用戶帶來更好的體驗。
3. 會員
鐵路暢行會員是中國鐵路統(tǒng)一對外會員服務品牌，開通暢行會員不需要花錢，暢行會員主要是用于會員用戶積累乘車積分、用積分兌換車票等，主要包含積分權益，兌換車票、無票候補和會員活動四大會員權益。這個頁面設計得比較簡陋，也沒有太多價值的內(nèi)容，可以看出12306在用戶運營方面比較欠缺。
4. 訂單
12306的訂單包含了火車票訂單、餐飲訂單、保險訂單、酒店訂單、空鐵聯(lián)運訂單、計次定期票訂單、約車訂單、出站引導服務訂單、鐵路商城訂單、汽車票訂單、旅游訂單和鐵水聯(lián)運訂單多達12種訂單，從這些訂單類型可以看出12306的服務特別多。
體驗陷阱
這個設計實在太糟糕，嚴重違反了7±2效應。琳瑯滿目，花枝招展，讓用戶在這個頁面幾乎迷失。更糟糕的是，當你有一個非常重要的待支付訂單，這個頁面竟然沒有角標提醒，最終你會因為這個糟糕的設計打亂自己的行程計劃。
內(nèi)容服務是幫助產(chǎn)品實現(xiàn)用戶留存和運營的版塊，不過從12306的內(nèi)容設計來看，整個產(chǎn)品的運營手段比較少，所以我把12306現(xiàn)有設計的功能拆分為便捷功能和向?qū)Чδ堋?/span>
1. 便捷功能
以下這七個功能，對用戶而言，是非常便捷、友好的功能，可以幫助用戶在出行的旅途中獲取很多幫助。
1.1 車站大屏
「車站大屏」是一個非常貼心的功能，通過這個功能，可以為用戶提供車站的實時列車信息，非常方便。大屏詳情頁可以拆分為三塊內(nèi)容，左上角可以切換全國各地的火車站，頭部還有搜索框，為用戶提供車次的查詢，主體內(nèi)容是當前車站向西的車次信息，包含發(fā)車時間、候車室、檢票口和候車狀態(tài)等。
1.1.1 車次詳情頁
進入列車的「車次詳情頁」，可以查看當前車次的完整信息，比如檢票狀態(tài)、候車室、檢票口和全程?？空?、停留信息。在這個頁面，還提供了「關注列車」的功能（關注后并無關注數(shù)據(jù)，顯得很雞肋），以及直接預訂當前車次的入口。
1.1.2 車站詳情頁
「車站詳情頁」就像一個站點的主頁，為用戶提供完整的車站信息查詢。這個頁面可以拆分為四塊，頭部可以切換其他站點，并提供當前車站的天氣情況以及車站基礎信息。金剛區(qū)位8個功能入口，包含車站車次、站內(nèi)導航、重點旅游、餐飲服務、周邊酒店等。中間是當前車站的起售時間和換乘時間，底部是車站附近周邊的酒店精選。
迭代建議
這個頁面把車站當做一個主體，聚合了一個車站完整的功能，其實挺有創(chuàng)意，但頁面隱藏得很深，如果不去拆解，幾乎很難發(fā)現(xiàn)，很是可惜。我認為完全可以提高權重，升級為一級欄目，代替會員，或者和出行欄目進行整合升級。
1.2 站內(nèi)導航
「站內(nèi)導航」提供目標車站的LBS導航，對于乘客來說，到達一個陌生的站點，需要清晰的指引，這是一個非常便捷、溫馨的功能，能幫乘客解決很多問題。不過這里有一個莫名其妙的設計，那就是進入這個功能之前，系統(tǒng)提示請搖“8”字校準手機，事實上這里是一個加載動畫，但是畫面和內(nèi)容卻誤導了用戶，我甚至每次進入都傻乎乎的搖動手機。
1.3 臨時身份證
臨時身份證是一個非常重要的功能，12306現(xiàn)在支持APP在線申請，極大方便了乘客的出行。申請流程也比較簡單，填寫個人信息，驗證審核通過后，就可以生成電子證照使用。每個人每個月有3次申請臨時乘車身份證機會。
1.4 遺失物品
這是一個非常貼心的功能，如果你在乘車的過程中不小心丟失物品，可以通過這個功能登記，輸入你的詳細信息就能登記成功。
1.5 重點旅客
這也是一個非常貼心的功能，主要為老年人、殘疾人服務，通過填入你的信息，列車會根據(jù)你的情況提供優(yōu)先進站、協(xié)助乘降等服務。
1.6 愛心版
愛心版就是長輩版，專門為中老年用戶設計的版本，在用戶中心切換后就可進入愛心版。整個版本設計得非常簡潔，操作步驟也比較簡單，對中老年用戶比較友好。
1.7 英文版
英文版在用戶中心的設置點擊語言即可切換，整體的版本設計得直接簡潔，用戶體驗不錯。
1.8 小結(jié)
從這個版塊可以看出，一個產(chǎn)品如果以用戶為中心去設計，是可以為用戶帶來很大的便捷和愉悅體驗。比如像臨時身份證這樣的功能，過往我們只能提前出發(fā)去車站排隊辦理，但如今12306已經(jīng)把這樣的痛點解決，為用戶節(jié)省了大量的時間。
2. 向?qū)Чδ?/span>
以下8個功能，雖然屬于出行向?qū)В贿^體驗下來，感覺用戶體驗比較差，很多功能完全無法弄懂它的設計目的是什么，顯得非常雞肋。
2.1 快捷退票
「快捷退票」這個功能的設計，讓人摸不著頭腦。從操作流程看，首先需要輸入用戶的詳細信息，包括姓名、身份證號碼和手機，其次需要進行人臉核驗，到了第三步還需要選擇車票的日期車次，在最后的退票操作頁面，用戶點擊退款后，沒有和用戶再次確認就直接退票。整個流程體驗下來，非常糟糕。
體驗陷阱
這個功能和訂單頁的退票感受不出來有何區(qū)別？如果用戶要退款，不如直接去訂單頁進行退票，操作步驟簡單，一目了然。其次不支持自動導入用戶的購票信息實在太不方便，需要通過選擇車票購買日期和車次，這個設計實在讓人生氣和憤怒（我在體驗的過程中到了第三步只能退回到訂單頁把購票日期和車次截圖下來，又再次重復前面兩個步驟才到這個步驟）。
2.2 聯(lián)系方式
這也是一個看不懂的功能，進入頁面后，需要用戶輸入乘客的詳細信息，但是這個乘客信息和用戶在購買車票時候需要添加到乘客信息有什么不同？更糟糕的是，當你把自己的電話號碼、身份證信息填入后，系統(tǒng)會顯示核驗成功，然而當你再一次進入，頁面內(nèi)容還是和之前并無區(qū)別，你不知道自己是不是還要重新輸一次？
2.3 時刻表
「時刻表」主要為乘客提供查詢列班車次的出發(fā)時間和到站信息，但這個功能「車站大屏」幾乎已經(jīng)包含了，這個功能顯得意義不大。
2.4 查票價
這個功能非常雞肋，因為在火車票的售票詳情頁就可以清晰直觀地查詢到列車票價信息，相反在這個頁面，根本無法看到價格，因為價格的字體大小只有20px，乘客幾乎很難注意到。
2.5 查代售點
這個功能主要為用戶提供全國各地火車票代售點的查詢，不過在互聯(lián)網(wǎng)技術發(fā)展到今天，火車票代售點越來越少了。從12306采集的信息來看，部分代售點缺少電話等關鍵信息，對用戶來說，比較雞肋。
2.6 起售時間
這個功能為用戶提供各車站每日的起售時間，屬于一個低頻功能，可以解決乘客某些極端場景的需求。不過在我體驗下來，比如通過此功能查詢1月29日的車票，顯示北京站起售時間為10:00，但是在火車售票版塊，我也可以直接購買1月29日的車票，這讓我比較疑惑這個功能的價值在哪里。
2.7 正晚點
「正晚點」同樣是一個雞肋功能，而且還需要輸入準確的車次才能進行查詢，車站大屏已經(jīng)完美可以取代這個功能。
2.8 列車狀態(tài)
「列車狀態(tài)」比正晚點都還雞肋，讓人憤怒，因為你需要輸入正確的出發(fā)地、到達地和出發(fā)時間，對了，還有正確的車次才能進行查詢，這樣的操作成本比下載12360APP都還麻煩。
2.9 小結(jié)
從這個部分的內(nèi)容拆解和操作體驗來看，12360的產(chǎn)品設計得不夠細致和貼心，很多功能就像是硬生生塞進去一樣，濫竽充數(shù)。其次從他們的產(chǎn)品迭代記錄次數(shù)可以看出，近1年更新時間只有5次，也許每一次都是在做加法，沒有想過做減法，所以導致這部分的功能顯得雞肋而且有很大缺陷。
通過對鐵路12306的全面拆解，接下來我將從內(nèi)容層、功能層、體驗層和視覺層進行總結(jié)。
1. 內(nèi)容層
12306整個產(chǎn)品的內(nèi)容設計，用一句話總結(jié)，可以歸納為——心有余力而不足?？梢钥吹?2306圍繞乘客購票、出行的潛在需求場景都設計了對應的服務，比如酒店、約車、點餐、商城等，甚至還有空鐵聯(lián)運、鐵水聯(lián)運這種多場景的組合售票方式，不過在實際的版塊內(nèi)容打造中，則顯得比較空洞，體驗一般。這個產(chǎn)品，可以說幾乎沒有創(chuàng)新點，這主要也是由于它是由國有企業(yè)設計運營，背景極其復雜，設計目標也飄忽不定。
2. 功能層
在2015年之前，鐵路12360承擔了被譽為歷史上人口遷移最大的春運的搶票工作，那時候一票難求，春運去12360就像是一場噩夢。不過在經(jīng)過多年的升級和優(yōu)化以后，目前12360的購票效率非常高，經(jīng)過筆者多次的測試和調(diào)研，目前通過12360購票已經(jīng)不再是難事。而且還設計了候補搶票這樣的功能，幫助用戶解決買票痛點，可謂非常貼心、友好。
3. 體驗層
鐵路12306的用戶體驗，非常一般，我在這次的產(chǎn)品拆解中至少偵查出了20條體驗陷阱，這些陷阱都會給用戶帶來極其糟糕和憤怒的體驗。比如讓我像個傻瓜搖動手機的站內(nèi)導航載入頁，這完全就是把用戶當成傻子一樣看待，其次還有一堆數(shù)不清的雞肋功能，對用戶的操作體驗造成了嚴重的干擾。我甚至認為愛心版和英文版比標準版使用起來更愉悅，更能減少我的焦慮。
4. 視覺層
作為一個UI設計師，在拆解12306的產(chǎn)品過程中，我對整個產(chǎn)品的設計感到絕望。首先，沒有做到統(tǒng)一性，整個產(chǎn)品毫無設計規(guī)范，比如卡片的圓角、品牌色、版塊間距根本不統(tǒng)一，這樣的視覺體驗一眼望去就非常糟糕；其次，圖標、活動圖、櫥窗圖以及詳情頁的設計毫無美感，滿滿的山寨APP風格，特別是訂單頁的ICON，花花綠綠、琳瑯滿目，連最基礎的統(tǒng)一都沒有做到。
作為一款國民級用戶APP，鐵路12306仿佛陪伴了80、90后的青春。還記得10年前老家是黑龍江和河北的大學室友，每年春運開啟之前就為了回家的火車票犯愁，不僅要去遙遠的火車站排隊，很多時候還可能空手而回，那便是最初對12306的記憶。
如今十年過去了，12306解決了億萬人的出行搶票需求，讓我們在春運的路上，可以輕松購買一張回家的票。但下一個十年，我更希望12360的產(chǎn)品團隊，可以重視用戶體驗設計，讓我們不再掉入那些體驗陷阱。
作者：設計大偵探 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
配圖是我們平時在設計工作中經(jīng)常用到的，一個好的配圖很多時候會直接影響到一個作品的好壞，圖片本身也是一種視覺語言，通過學習跨領域的知識可以幫助我們提升自身所處的領域設計能力，本篇文章和大家討論一些構(gòu)圖和景別知識，通過對這些知識的了解判斷如何選擇一個好的配圖以及怎么應用好配圖，大多數(shù)設計師選擇配圖時都是憑著主觀意識在選擇配圖，你所選擇的配圖很大程度會受到你的主觀意識的影響，這些主觀意識來源于自身審美、文化、環(huán)境等因素的，因此在我們的主觀意識基礎上，應該具備一定的客觀依據(jù)來幫助我們更好的選擇合適的配圖。
構(gòu)圖與景別知識在攝影、繪畫、影視中應用很多，但很多設計師容易忽視這些知識，這些知識看似是攝影、繪畫、影視等行業(yè)的知識與設計好像沒太大關系，這些知識也是很有必要學習的的理論知識，對構(gòu)圖景別的理解很大程度會影響你能否把握好設計畫面中的配圖，配圖本身也是一種視覺語言，提升構(gòu)圖和景別知識對設計師整體綜合實力提升是有幫助的，當你做三維和插畫等設計時同樣也會用到這些知識，了解這些知識會讓你以客觀依據(jù)的角度，運用和判斷設計中配圖的好與壞。
目前來看幾乎所有的藝術或商業(yè)作品，無論是攝影、繪畫、CG等都離不開畫面的構(gòu)圖與結(jié)構(gòu)，你甚至能在很多繪畫大師的的經(jīng)典作品中看到他們作品中也使用了構(gòu)圖理論，合理的構(gòu)圖作品，給觀眾美的視覺享受和與眾不同的情感體驗，同時提升畫面表現(xiàn)，關于構(gòu)圖的知識很寬泛，構(gòu)圖方式方法也非常多，有的作品中可能包含多種構(gòu)圖形式，這里給大家大致介紹一些常見的構(gòu)圖知識，目的是拋磚引玉讓大家意識到良好的構(gòu)圖能平衡畫面同時，傳達出更清晰明確的圖像信息。
中心構(gòu)圖是將畫面主體放置在畫面的視覺中心，讓主體成為整個畫面的視覺焦點，通過周圍環(huán)境氛圍烘托畫面主體，這種構(gòu)圖形式聚焦主體，能更好的凸顯畫面主體。
一點透視構(gòu)圖有較強的空間感和縱深感，畫面的元素會向中心聚焦，會把觀眾的視覺引導向畫面中心，比較適合表現(xiàn)畫面空間感。
黃金法則構(gòu)圖遵循古希臘學者畢達哥拉斯的黃金分割比例進行構(gòu)圖，也就是我們常說的 0.618:1，黃金法則構(gòu)圖有采用像三分法那樣井字構(gòu)圖，還有采用黃金螺旋的構(gòu)圖方式，構(gòu)圖時將主題放置在黃金比例焦點或線上。
對角線構(gòu)圖中主體在畫面的對角線位置排列，對角線構(gòu)圖視覺沖擊強，具有動感和不穩(wěn)定性，更使畫面更有趣味和視覺張力。
主體在畫面中呈三角形狀，正三角形構(gòu)圖畫面更具穩(wěn)定性，反之倒三角形構(gòu)圖會使畫面有緊張感和不穩(wěn)定性。
字母形構(gòu)圖畫面呈現(xiàn)字母形態(tài)，不同的字母構(gòu)圖會給觀眾帶來不同的視覺感受，S 形構(gòu)圖是一種比較常見的構(gòu)圖形式，S 形構(gòu)圖迂回延伸使畫面產(chǎn)生優(yōu)美、雅致、韻律感。
引導性構(gòu)圖利用畫面中有形或無形的線，引導觀眾的視覺聚焦到畫面的重點，引線不一定是一條線，它是一種具有引導性的東西，光影、道路、河流等都可以做為引導線，引導性構(gòu)圖視覺表現(xiàn)強，引導觀眾視線突出主體。
三分構(gòu)圖是最常用的構(gòu)圖方法，結(jié)構(gòu)由兩條豎線和兩條橫線構(gòu)成，形成一個井字，也叫井字構(gòu)圖法，在三分構(gòu)圖中主體通常放置在四個交點上或線條上，三分法是比較常見的構(gòu)圖形式，可以在很多攝影和繪畫作品中看到。
對稱構(gòu)圖是根據(jù)對稱軸，使畫面形成的對稱的構(gòu)圖形式，比較常見的對稱構(gòu)圖上下對稱、左右對稱，對稱構(gòu)圖具有平衡性、穩(wěn)定性、均衡性。
水平線構(gòu)圖也是比較常見的一種構(gòu)圖，水平線構(gòu)圖通常表現(xiàn)寬廣的場景，地平線、海面、湖面等主題，水平線構(gòu)圖給人寬闊、穩(wěn)定、平靜、舒適的感覺，水平線構(gòu)圖主要是是采用橫畫幅來表現(xiàn)。
垂直線構(gòu)圖中主體呈現(xiàn)為垂直的線條，垂直線構(gòu)圖給人高聳、莊嚴、挺拔的感覺，具有較強的視覺張力，錘子線構(gòu)圖常采用豎畫幅來表現(xiàn)。
十字形構(gòu)圖是水平線和垂直線的組合，十字形構(gòu)圖畫面會給人平穩(wěn)、安全、嚴肅、神秘的感覺。
夸張透視會以比較特別和夸張的的視角表現(xiàn)畫面和主體，使畫面整體都具有強大的視覺張力和沖擊力。
虛實對比通過主體和背景的間的虛與實對比，從而突出畫面主體，虛實對比使畫面更有層次和空間感。
明暗對比通常以暗襯托明，在視覺感受中越暗感覺離我們越遠，越明亮感覺離我們越近，明暗對比對比可以使畫面更有立體感，層次感等，通過畫面中的明暗對比形成的強烈反差，可以凸顯畫面中主體，引導觀眾視線到主體上。
色彩對比中包含三個要素色相對比、純度對比、明度對比，同時根據(jù)色環(huán)中的色相變化，還可以分為同類色對比、鄰近色對比、對比色對比、互補色對比，色相角度變化越大對比月強烈，通過色彩對比可以突出畫面重點、豐富畫面、提升畫面層次，背景色彩與主體色彩形成對比，能凸顯畫面主體。
奇數(shù)原則畫面通常是一個、三個或五個主體，通常不超過七個，超過七個時觀眾會將其視為一個整體，當畫面中為主體為奇數(shù)時，在視覺上會比偶數(shù)更和諧、更美觀。
視覺引導通過畫面內(nèi)容引導用戶視覺，視覺引導形式有很多種，人物或動物直視、運動方向、肢體語言等，都可以引導用戶在觀看畫面時的視線運動。
通過大小對比使主體與周圍元素形成差異化的視覺沖突，同時大小對比中的次要元素還可以作為比例參考，突出主體的大小，強烈的視覺落差增強版面節(jié)奏。
裁剪圖片為不同景別的圖片對板式設計也有很大影響，不同景別的圖片傳達的視覺語言也是不同的，哪怕是圖片朝向的位置都值得我們仔細思考，在配圖時我們要思考通過圖片傳達什么視覺信息給觀眾，所以在我們做設計時，要想清楚當前頁面要傳達什么樣的信息從而采用什么樣的景別。
大遠景通常表現(xiàn)廣闊氣勢宏偉的場景，大遠景的空間感非常強，強化景物與環(huán)境的關系，主體相對較小與場景形成強烈的大小對比。
遠景營造主體與場景的關系，通過畫面場景敘述主體和場景的關系，遠景具有較強的空間感，具有開闊的畫面場景。
全景通過場景來體現(xiàn)主體的處境，利用人物和場景的關系強化主題，全景中主體會被強化形成明顯的內(nèi)容中心，從而弱化場景。
中景表現(xiàn)主要表現(xiàn)人物膝蓋以上，在中景中人物在畫面中的占比更大更為突出，人物會被強化，同時弱化場景。
近景主要表現(xiàn)人物胸部以上，畫面中人物或主體會占有主導地位，強調(diào)人物的情感特征，通過細微人物的動作、肢體語言、表情等表現(xiàn)畫面主題。
特寫主要表現(xiàn)人物肩部以上或主體的細微部分，主體被放大，場景弱化到難以分辨，強調(diào)主體的情感、心理或產(chǎn)品的工藝結(jié)構(gòu)等。
大特寫會將主題放的更大，展現(xiàn)主體的局部細節(jié)，大特寫具有強調(diào)和突出主體細節(jié)特征的作用，具有極強的視覺效果。
配圖知識是設計師在平時工作或設計練習中必備知識，很多時候我們在選擇配圖時完全是憑感覺在選，圖片也是一種視覺語言，作品整體質(zhì)量也會受到配圖的影響，本次配圖知識分享希望能幫助大家在之后選擇設計配圖時，在主觀意識判斷的基礎上有一個客觀的依據(jù)，寫這篇文章的同時，我也正好根據(jù)文章大綱做了一套板式練習作為文章配圖，最后給大家分享幾個高質(zhì)量的圖片網(wǎng)站（需要翻墻）
攝影類圖片
https://unsplash.com/
https://burst.shopify.com/
CG類圖片
https://www.deviantart.com/
https://wallhaven.cc/
作者：Tomato76 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
可視化圖表是提升信息傳遞效率的一種有效方法，特別是在B端平臺中經(jīng)常遇到對統(tǒng)計的數(shù)據(jù)分析總結(jié)的呈現(xiàn)。我們設計師在設計圖表的過程中，如果沒有系統(tǒng)的可視化知識，會出現(xiàn)設計的圖表雖然美觀但圖表不能很好的反應數(shù)據(jù)的情況。那么，在復雜的數(shù)據(jù)關系中如何設計和選用圖表，如何在好看的同時提升信息傳達效率，看完這篇文章希望對你的設計過程有所幫助。
// 為什么要數(shù)據(jù)可視化
數(shù)據(jù)可視化就是用圖表來表示數(shù)據(jù)信息，它所傳達的信息包括你所拿到的數(shù)據(jù)源和你分析后的結(jié)果，再通過圖形強化用戶的理解和記憶。能讓用戶簡潔明了的獲取更多的信息，是我們可視化的最終目的。
舉個例子，同樣一組數(shù)據(jù)，用表格的形式呈現(xiàn)是很難有所洞察的；如果將各個地區(qū)維度的數(shù)據(jù)聚合以柱圖形式呈現(xiàn)，很容易就能看出各個地區(qū)間數(shù)據(jù)的差異，并從中洞察規(guī)律
關于如何設計好數(shù)據(jù)可視化圖表，這邊總結(jié)了三個步驟：選擇適合的圖表，強化視覺層次，圖表響應式適配。
一、選擇適合的圖表
數(shù)據(jù)可視化的圖表種類繁多，當我們真的開始作圖，往往會遇到一個困境：有這么多類型，要如何選擇正確的圖表呢？首要依據(jù)是考慮所要傳達的信息意圖，即所要制作的圖表它的任務是什么，再通過分析數(shù)據(jù)關系來選擇表達方式；第二層意圖是圖表傳達內(nèi)容，這時候我們就需要根據(jù)數(shù)據(jù)的特征去突出和強化。
1. 分析數(shù)據(jù)關系
根據(jù)數(shù)據(jù)分析的方式來看，每一種圖表都對應了一種數(shù)據(jù)關系。從數(shù)據(jù)的維度出發(fā)弄清呈現(xiàn)結(jié)構(gòu)，再結(jié)合數(shù)據(jù)關系作出選擇。了解圖表的可能知道，一般圖表的數(shù)據(jù)關系有構(gòu)成、比較、分布，以商業(yè)數(shù)據(jù)為例，常見的還有流轉(zhuǎn)關系。
構(gòu)成關系
構(gòu)成關系的圖表表達的是部分和整體的關系，用于分析總體和各部分的占比比例，構(gòu)成關系一般局部元素加起來為總數(shù)。如果只是想對比個別組成部分的大小，也可以使用比較關系的圖表。
常用圖表：餅/環(huán)圖、堆疊圖、面積圖等，如涉及到層級結(jié)構(gòu)，還會用矩形樹圖或旭日圖等特殊結(jié)構(gòu)圖表。
關鍵詞：“占比、比例、百分比”
比較關系
比較關系是基礎分析中常用的一種圖表類型。在一定的取值范圍內(nèi)，通過對兩個或兩個以上的指標分析，可以直觀的看到變化和差距。對比分析包括趨勢對比和分類對比兩種形式，趨勢對比用于表示一段時間內(nèi)數(shù)據(jù)的變化，分類對比用于比較數(shù)據(jù)規(guī)模。
常用圖表：趨勢對比常用圖表有折線圖、散點圖等；分類對比常用條形圖、柱狀圖、氣泡圖等。
關鍵詞：“增減、升降、漲跌、波動”
分布關系
利用空間分區(qū)來展示數(shù)據(jù)之間的分布關系，常用于體現(xiàn)兩個或以上數(shù)據(jù)的相關性。
常用圖表：散點圖、熱力圖、雷達圖等
關鍵詞：“隨著……而變化、A/B之間的相關性、交/并集”等
關聯(lián)與流轉(zhuǎn)
流轉(zhuǎn)關系是B端數(shù)據(jù)常用的一種關系，它可以動態(tài)的體現(xiàn)相關路徑下對象之間的關系、狀態(tài)、數(shù)據(jù)量的流轉(zhuǎn)變化等，以面積或顏色深淺展示了多個狀態(tài)或?qū)ο笾g的流動量或流動強度。
常用圖表：關系圖、?；鶊D、漏斗圖、進度圖等
關鍵詞：“流程步驟、留存、轉(zhuǎn)化、關系”
2. 分析數(shù)據(jù)特征
按數(shù)據(jù)關系和分析目的選擇好圖表類型后，第二步是根據(jù)數(shù)據(jù)特征選擇更加適合的展示方式。從數(shù)據(jù)分析的角度常見數(shù)據(jù)特征有：變量特征、維度特征、層級特征、流程特征。
變量特征
分辨一個指標通常有兩類特征，按變量值是否連續(xù)可分為連續(xù)數(shù)據(jù)與離散數(shù)據(jù)兩種。連續(xù)數(shù)據(jù)通常會統(tǒng)計一組數(shù)據(jù)的變化趨勢，離散數(shù)據(jù)通常統(tǒng)計各分類下數(shù)量的變化。
維度特征
多維度分析需要將多個變量在同一平面上直觀的表示，可以選擇使用極坐標系去展示多個維度變量。如果希望對比多組數(shù)據(jù)，可使用不同顏色進行分類
層級特征
多層級數(shù)據(jù)由多個部分構(gòu)成一個整體，又稱樹形結(jié)構(gòu)數(shù)據(jù)。除了用結(jié)構(gòu)樹圖表表現(xiàn)以外，還可以考慮以下兩種圖表類型：
例如：上圖顯示了市場銷售額的來源結(jié)構(gòu)。長方形的大小取決于各國家的平均銷售額，通過色調(diào)來區(qū)分不同類型，顏色的深淺代表分類下的子集，面積體現(xiàn)銷售占比。對比一般結(jié)構(gòu)樹圖表，它的優(yōu)勢在于可以有效利用空間。
流程特征
流轉(zhuǎn)關系是表達數(shù)據(jù)轉(zhuǎn)化流程的重要類型，不僅包含統(tǒng)計意義上的數(shù)據(jù)總和，同時還表達了信息流轉(zhuǎn)的路徑；其中?；鶊D和漏斗圖都可以表達路徑中流量的變化，不同的是?；鶊D重點強調(diào)流量的強度和走向，漏斗圖更加注重突出轉(zhuǎn)化率和效果，根據(jù)不同的表達目的選用。
二、強化視覺層次
選擇合適的圖表后，在信息傳達上也需要正確的表達，展示形式美觀的同時能夠清晰的體現(xiàn)數(shù)據(jù)特點。
1. 強化數(shù)據(jù)特性
使用圖表正確的表達信息，需要設計師在強化數(shù)據(jù)特性的同時避免偏差
2. 色彩視覺傳達
除了在設計構(gòu)圖上優(yōu)化以外，顏色的選擇也是圖表重要的的信息表達元素。顏色會影響我們對數(shù)據(jù)的感知，錯誤的取色會讓信息讀取產(chǎn)生誤解。我們可以通過不同的分析目的設置意圖色板，精確傳達信息同時后續(xù)的項目在選用時也可以達到用色的統(tǒng)一。
我們在之前的文章里有介紹過圖表的取色模型，通過調(diào)整顏色HSL值的區(qū)間，可以得到以下三種意圖色板：
那么我們要怎么樣去使用這些色板呢？下面幾個案例將帶你了解其中的差異。
定性型：使用色調(diào)來進行分類
數(shù)據(jù)內(nèi)在沒有順序差別時，建議使用色調(diào)值（H）進行區(qū)分；如定義國家、行業(yè)等類型。如果希望圖表看起來更加專業(yè)，以下有幾項分類色板的小建議：
定量型：使用深淺色板強調(diào)內(nèi)在順序
如果在同一個分類下包含子類別，或者數(shù)據(jù)本身具有排名屬性，那么建議使用連續(xù)色板來突出他們內(nèi)在的順序，使圖表更加易讀。
三、圖表中的響應式設計
B端圖表可視化的數(shù)據(jù)一般是在網(wǎng)頁或移動端上動態(tài)顯示。不同于平面展示或匯報，在基礎設計完成后還需要考慮到圖表展示的環(huán)境，根據(jù)不同端去適配顯示效果，以適應各種復雜情況。而動態(tài)顯示帶來的交互特性也讓數(shù)據(jù)展示有了更多的可能性。
1. 布局框架適配
在網(wǎng)頁端顯示時，有時候同一個圖表需要考慮不同容器下的適配方式。根據(jù)數(shù)據(jù)相關性變化元素的適應形態(tài)，將非必要的的元素轉(zhuǎn)化或隱藏，保留重要的圖形元素去適應當前空間；元素隱藏后使用懸浮交互來保證信息的展示，保持圖表的可讀性同時也避免產(chǎn)生元素的重疊。
如案例中的圖表，在不同尺寸下通過改變和隱藏圖表元素，以達到適配當前空間的效果。
2. 圖表元素適配
要適配移動端，網(wǎng)頁端橫向延展的顯示方式需要適應移動端縱向空間的顯示。除了呈現(xiàn)角度的改變外，還需要考慮手機屏幕的尺寸和圖表元素的適配性，去兼容相關的交互操作。
3. 極值適配
因B端平臺的特性，我們無法預知客戶傳入的數(shù)據(jù)量，可能會遇到因數(shù)據(jù)量過多，造成圖表顯示不佳，數(shù)據(jù)讀取困難等問題。這種情況下，提前考慮數(shù)據(jù)極限場景，通過交互的形式變化的方式讓用戶獲取完整信息，提升理解同時信息展示更靈活。
還有懸浮放大、點擊下鉆、聯(lián)動圖表等交互行為可以組成更加豐富的圖表。因篇幅原因，在這篇文章就不做深入講解了，以后可獨立介紹。
// 結(jié)語
數(shù)據(jù)可視化在B端設計場景中發(fā)揮著重要作用。設計師在表達數(shù)據(jù)之美的同時更加準確，才能更直觀地向用戶傳達數(shù)據(jù)的價值。使業(yè)務人員能夠從復雜的業(yè)務數(shù)據(jù)中快速、直接地找到重要數(shù)據(jù)，確保用戶能夠更好的接收信息，才是可視化的關鍵
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
本次針對百度APP中的視頻播放器場景，為提升手勢操控效率，我們試圖將常規(guī)的基礎通用手勢進行打散重組、并結(jié)合實踐案例梳理出「組合手勢」設計模型，以探索如何在視頻場景中構(gòu)建便捷高效的進階手勢體驗設計。
二、什么是「組合手勢」
「組合手勢」是基于常規(guī)手勢的組合擴展，其通常由兩種或兩種以上的常規(guī)基礎手勢所構(gòu)成，若組合方式及使用場景得當，可助力用戶更便捷的觸達功能。
以前述的視頻場景常規(guī)手勢為例，其觸發(fā)機制一般可分為兩個階段：step1交互信號→step2執(zhí)行任務，即用戶通過某一基礎手勢發(fā)出交互信號，系統(tǒng)收到信號確認后便可立即執(zhí)行任務，但整個過程是線性的，手勢擴展性十分有限且難以滿足視頻場景對于手勢擴容的訴求。
于是我們在現(xiàn)有常規(guī)手勢兩階段觸發(fā)機制的基礎上，嘗試引入「意圖識別」環(huán)節(jié)，并梳理出「組合手勢」的設計模型，以探索不同基礎手勢相互組合后的擴展可行性。
「組合手勢」觸發(fā)一般可分為三個階段：step1交互信號→step2意圖識別→step3執(zhí)行任務，前兩階段均可由對應的基礎分支手勢構(gòu)成并進行組合搭配、以尋求最高效的手勢組合觸發(fā)路徑。
由于「組合手勢」并不像常規(guī)手勢那樣早已被系統(tǒng)定義為可供直接調(diào)用的接口，因此，其差異化創(chuàng)新具有較大設計靈活度，尤其需根據(jù)具體的使用場景進行綜合考量。
三、「長按組合手勢」激活快捷菜單
1.項目背景
百度APP視頻場景早期的播控功能較少，如“視頻下載”等個別特色功能入口一般都融合于基礎菜單之中。
隨著后續(xù)視頻場景的功能建設日漸完善，我們便在基礎菜單面板中拓展了一行視頻菜單，專門用于承載視頻場景特有的播控功能。但當前播控功能已達10余項，菜單面板彈出后還需左滑才可露出后面的功能入口，因此也常收到用戶反饋找不到常用功能、菜單面板功能排布無章且觸發(fā)成本高。
2.競品調(diào)研及選型
通過對競品進行調(diào)研，我們發(fā)現(xiàn)競品均有使用長按手勢作為切入口以觸發(fā)相關播控功能、并歸納出“視頻播控觸發(fā)”目前主流的三種長按交互選型， 分別為：長按觸發(fā)獨立播控面板、長按觸發(fā)浮層播控選項、長按觸發(fā)特定播控功能。
選型A
「長按觸發(fā)獨立播控面板」：通過長按手勢可激活從屏幕底部彈出的獨立播控面板，此方案擴展性較強，但對視頻沉浸觀感體驗有一定的打斷感；
選型B
「長按觸發(fā)浮層播控選項」：通過長按手勢可觸發(fā)置于視窗上層的浮層選項入口，一定程度上可延續(xù)視頻觀看的沉浸體驗，但浮層擴展性有限；
選型C
「長按觸發(fā)特定播控功能」：通過長按手勢觸發(fā)特定的某個播控功能（如長按“快進”），一定程度上可滿足此功能的重度用戶，但對于長按手勢的使用效率較低；
3.設計方案
1）長按手勢交互擴容
針對目前視頻播控菜單存在的問題，經(jīng)過和業(yè)務對上述三種長按交互選型方案進行綜合考量，最終決定聚焦于以方案“選型B”的「長按觸發(fā)浮層播控選項」作為設計切入點。我們意圖將部分高頻播控功能從基礎菜單中拿出進行前置，并探索一套更便捷的觸發(fā)機制，以此對視頻場景中的播控菜單進行設計升級。
但隨之而來的難點是我們目前播放器中的長按手勢已被“快進”功能占據(jù)，用戶對此功能的使用頻率高、并已形成較深的操控認知，若直接下線“快進”功能則會對用戶使用習慣產(chǎn)生較大影響，尤其是視頻場景的重度用戶。
那么如何在兼容用戶已有長按操作習慣的基礎上再拓展“快捷菜單”呢？是否有可能將“快進”和“快捷菜單”進行融合？這也是本次項目對于便捷手勢體驗的重要設計探索點。
基于此，我們決定嘗試使用「組合手勢」設計模型來對視頻播放器中的長按手勢進行重新定義，通過「長按+滑選」的機制觸發(fā)快捷菜單功能項，以縮短視頻常用功能路徑。對應到設計模型的三個階段分別為：
step1：以“長按手勢”創(chuàng)建一個新模式，即發(fā)出交互信號并喚出浮層菜單；
step2：若用戶未松開手指，則系統(tǒng)默認開始識別用戶意圖，是否有以“拖拽手勢”滑選至目標功能項以選擇功能；
step3：用戶滑選錨定至目標功能后，松手釋放即可完成最后的功能執(zhí)行確認。
「長按+向上滑選」快捷觸發(fā)對應功能項；
「長按+向下滑選」快捷觸發(fā)“快進”（一定程度上兼容老用戶對于此功能的使用習慣）。
2）容錯性兼容
在設定「長按+滑選」組合手勢的同時，考慮到兼容主流的長按習慣、以及對于滑選手勢需要有一定的適應過程，我們同時也支持點選的操作模式，即用戶長按后若未產(chǎn)生滑選行為便松手，則松手后依然可通過點選的方式觸發(fā)對應播控功能項。
3）易用性打磨
差異化的創(chuàng)新設計形式在前期總會面臨質(zhì)疑和挑戰(zhàn)，本次項目也不例外。我們擔心用戶能否接受并認知「長按+滑選」組合手勢的操作形式，于是在DEMO開發(fā)完成后便進行了一次小范圍內(nèi)的定性可用性測試，以預期在上線前可先收集一波體驗問題進行快速打磨優(yōu)化。
我們根據(jù)測試目標、用戶類別、測試前序準備及測試步驟等環(huán)節(jié)提前擬好必要的測試腳本，并邀請了10+名不同年齡段的目標用戶進行訪談測試。
測試訪談的過程中，被測用戶在進行1至2次嘗試操作之后，均可掌握如何使用「長按+滑選」的組合手勢，這也為我們增添了不少信心。
同時，我們通過觀察用戶操作行為及用戶主動反饋，發(fā)現(xiàn)仍有部分易用性細節(jié)可進一步打磨優(yōu)化。
3.1 ）擴展觸發(fā)熱區(qū)：
考慮到單手握持手機的使用場景，可盡可能擴大定義長按手勢的觸發(fā)熱區(qū)，屏幕中除頂/底bar框架區(qū)以及本身就自帶長按事件的按鈕入口之外，其它大面積區(qū)域熱區(qū)均可支持長按觸發(fā)快捷菜單，以降低觸發(fā)難度、提升易用性。
3.2 ）支持跟手觸發(fā)：
長按后浮出的快捷功能項，其浮出位置支持跟隨手指的縱向觸發(fā)位置而浮出，可減少手指在屏幕上的位移距離、操控更便捷。
3.3 ）實時提示及響應反饋：
靈活判斷當前手勢觸控狀態(tài)（如滑入選擇 / 松手觸發(fā)），在界面中即時給出相對應的引導提示或振感反饋，以幫助用戶快速適應新的手勢觸發(fā)機制。
方案上線及驗證
以AB實驗對本次設計方案進行定量測試驗證：
「對照組」效果：長按觸發(fā)“快進”（各播控功能入口仍歸置于基礎菜單面板之中）；
「實驗組」效果：長按觸發(fā)“快捷菜單”選項（支持滑選和點選模式）；
小流量實驗上線后，經(jīng)過近半個月的觀察，大盤指標穩(wěn)定、播放完成率等滿意度指標穩(wěn)步提升。
「實驗組」長按快捷菜單中的功能使用率相對「對照組」均有大幅提升，說明用戶對部分高頻功能的確有很強的快捷觸發(fā)訴求。
「實驗組」的“快進”雖多了一步觸發(fā)步長，實驗前期“快進”使用率不及「對照組」，但隨著用戶對于「長按+滑選」手勢整體的使用占比持續(xù)走高，通過滑選觸發(fā)“快進”的操作習慣也快速被培養(yǎng)起來，對于用戶來說，長按快捷菜單帶來的整體收益是大于折損的。
二期擴展方案
隨著長按快捷菜單的上線推全，長按手勢的滲透率也持續(xù)走高，用戶逐漸對視頻場景更多的播控功能有了長按觸發(fā)的訴求，于是我們對長按菜單進行了二期的設計升級，在長按浮層最右側(cè)新增“更多”快捷入口以承接視頻場景所有的播控功能，用戶通過長按后的可選播控項增多，播控功能整體的使用量得到進一步提升。
四、「組合手勢」拓展探索
手勢交互是用戶在現(xiàn)實世界行為的映射，無論是基礎手勢還是組合類高級手勢，都須符合用戶認知習慣、并融入具體的使用場景中進行設計。
以「組合手勢」設計模型為指導基礎、并結(jié)合具體的項目實踐，我們進一步對視頻播放器中更多功能場景進行了便捷手勢的設計擴容探索。
1.「右滑返回手勢」激活“小窗播放”
“小窗播放”旨在退出當前視頻落地頁、并可將當前視頻切換成以懸浮視窗的形式進行延續(xù)消費。
基于用戶的此種操控意圖，我們以“右滑返回手勢”發(fā)出交互信號而觸發(fā)浮出小窗入口，隨后系統(tǒng)根據(jù)用戶“縱向拖拽手勢”的行為來判斷其是否有激活小窗的意圖，若有短距上滑拖拽行為，松手釋放即可快捷激活視頻小窗，以提升觀看體驗的連續(xù)性。
2.「雙指手勢」激活“滿屏播放”
“雙指拖拽手勢”可拖拽并清屏視窗畫面，以此手勢發(fā)出交互信號，若在“雙指拖拽手勢”基礎上有識別到“雙指擴張手勢”行為，則松手釋放即可快捷激活“滿屏播放”，以滿足更沉浸視頻瀏覽體驗。
五、結(jié)語
便捷手勢的設計出發(fā)點是為提升操控效率、縮減功能觸發(fā)路徑，從而使視頻內(nèi)容更沉浸消費。希望本次基于視頻播放器場景的手勢體驗設計實踐能給大家?guī)韼椭蛦l(fā)，后續(xù)我們也將持續(xù)深耕視頻領域、并進一步探索更貼合用戶使用場景的手勢交互體驗。
作者：百度MEUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
提到按鈕，大部分人印象就是文字加個背景框，并沒有太多需要設計的空間。但是作為B端設計師，相信很多同學在工作過程中都產(chǎn)生過以下問題：
按鈕作為最基本的交互單位之一，幾乎在每個頁面中我們都會使用到。由于不同行業(yè)下業(yè)務場景的復雜性，很多時候很難直接參照其他產(chǎn)品的按鈕進行復用，也無法用一套布置方案復用所有場景，所以作為B端設計師需要對按鈕控件具備足夠的認知，理解其背后的使用邏輯和規(guī)范，才能滿足多層級跨場景的設計需要。
本文結(jié)合自身的工作經(jīng)驗，對按鈕進行了系統(tǒng)性的整理和總結(jié)，希望對各位B端設計師同學的日常工作和學習有所幫助。
在詳細介紹按鈕前，我們先簡單了解下按鈕的發(fā)展歷史。按鈕的概念起初是源自現(xiàn)實物理世界的實體按鈕，在日常生活中如電源開關、計算器、電話等都是通過實體按鈕進行控制，由于其簡單直觀易操作的特性，即使如今各種電子產(chǎn)品都逐漸發(fā)展為觸控屏操作，實體按鈕依舊被保留了下來。
當數(shù)字屏誕生后，人機交互設計開始走向數(shù)字屏幕后，為方便用戶理解，在很長一段時間內(nèi)設計師都是采用擬物風按鈕來暗示用戶可執(zhí)行的操作。伴隨著客戶端設備升級和開發(fā)方式的變更，至2013年 Apple 在iOS7上第一次采用了扁平化設計，至此按鈕樣式開始往扁平化發(fā)展。隨后歷經(jīng)了多年發(fā)展，按鈕的樣式開始層出不窮，但是無論樣式如何變更，其背后的體驗交互邏輯依舊是物理世界按鈕的映射。
在B端設計中什么樣的組件可以定義為按鈕？我們先來看看國內(nèi)外設計系統(tǒng)中對按鈕組件的定義：
總結(jié)來說，按鈕可以理解為用于承載即時操作和命令的組件。由于B端產(chǎn)品業(yè)務邏輯復雜、頁面流程多，相較于傳統(tǒng)意義上的按鈕，B端中的按鈕被設定為可復用、規(guī)范化的組件，通過對組件元素進行拆解、歸納、重組，將其劃分為特定類型的組件方便管理和使用。
按鈕相較于輸入框、選擇器、單選框等控件無法進行數(shù)據(jù)輸入，相較于標簽、文字提示等控件也無法進行信息瀏覽，其關鍵在于【即時性】和【承載操作】，既可單獨完成操作，也可與其他控件聯(lián)動，作為觸發(fā)操作的行動點。
雖然同樣翻譯為標簽，但是此處指的是 Tag 標簽，而非 Tabs 標簽頁。標簽在樣式上與按鈕幾乎相同，且同樣可以添加圖標標識和觸發(fā)操作。兩者的區(qū)別在于，標簽側(cè)重于信息的選擇、篩選和分類，而按鈕則只是單純用于觸發(fā)即時操作，因此很多時候標簽會設置不同顏色樣式以便信息區(qū)分。
和其他錄入控件相比，開關Switch最顯著的特點便是和按鈕一樣觸發(fā)后立即生效，因此很多初級設計師很容易將其與按鈕歸為一類。
其區(qū)別是，開關承載的是兩種互斥狀態(tài)的切換，如打開/關閉、顯示/隱藏、啟用/禁用等，此外由于在視覺上符合用戶對現(xiàn)實世界中開關的認知，所以可以直接展示當前項的狀態(tài)。
單選框和多選框一般用于狀態(tài)標記，但是無法直接觸發(fā)操作，所以通常會和按鈕配合進行使用。最常見的搭配場景便是在登錄頁，用戶勾選【記住密碼】或【自動登錄】后標記其狀態(tài)，再點擊按鈕進行登錄。
相較于其他組件，按鈕的元素構(gòu)成較為簡單，分為內(nèi)容層和容器層，通過將不同元素進行搭配組合，即可設計出不同類型的按鈕類型和按鈕狀態(tài)。
內(nèi)容層：圖標和文字自由組合。內(nèi)容層作為操作引導的核心必須存在。
容器層：控制顏色、圓角、描邊、投影等樣式，有些設計系統(tǒng)下還會加上交互動效，提升用戶體驗感。
在查閱大廠的設計規(guī)范時，相信以下按鈕名稱大家應該都不陌生：主按鈕、懸浮按鈕、圖標按鈕、危險按鈕、下拉按鈕、文字按鈕、CTA按鈕……很多新手設計師會產(chǎn)生疑惑：
為什么要劃分如此多的按鈕類型？
這些按鈕間的區(qū)別是什么？
為什么各家設計系統(tǒng)下按鈕分類都不相同，我應該選擇哪種作為參考？
為了區(qū)分好按鈕類型，關鍵要先明確類目劃分的邊界。這里為了方便大家學習，我從按鈕的強調(diào)程度和使用場景2個緯度將按鈕進行劃分，基本涵蓋了常見的按鈕類型：
在同一個頁面中往往會存在多個行動點，因此需要將按鈕依據(jù)強調(diào)程度進行劃分，確保用戶可以依據(jù)設計的按鈕層級快速找到最需要操作的按鈕。常見的按鈕強調(diào)程度可以分為3個層級：
高度強調(diào)：承載頁面上最重要和突出的行動點。為了保證視覺層級最高，通常會采用大面積主色填充或投影增加空間層級的方式進行區(qū)分，例如主按鈕和FAB按鈕（懸浮按鈕）
中度強調(diào)：承載僅次于最重要行動點的常規(guī)操作。為了避免太過吸引用戶注意，通常采用中性色進行描邊或填充，也被稱之為次按鈕。
輕度強調(diào)：對頁面中其他操作補充或可選操作。為了確保視覺上不凸顯，通常不會填充背景色，常見于文字按鈕和圖標按鈕。在輕度強調(diào)中還可以劃分為弱強調(diào)（內(nèi)容填充主色）和不強調(diào)（內(nèi)容填充中性色），由于文字按鈕填充中性色難以和正常文本進行區(qū)分，所以一般內(nèi)容填充中性色只會用在圖標上。
由此我們得到了依據(jù)強調(diào)程度劃分的幾個常見按鈕類型：主按鈕 > 次按鈕 > 文字按鈕 > 圖標按鈕。接下來針對每種類型我們來展開說明。（FAB按鈕在B端頁面中屬于特定場景下使用的按鈕，不具有通用性，故劃分到使用場景中進行討論）
主按鈕代表著頁面中的核心操作項，是視覺權重最高的按鈕，常用于突出提交、完成、確定等操作。為吸引用戶注意，常使用品牌色填充背景引導用戶視覺焦點。關于主按鈕的使用需要遵循以下2個原則：
次按鈕是使用最頻繁的按鈕，當在頁面中不確定選擇哪種按鈕時，使用它往往是最安全的。次按鈕通常使用中性色，其樣式可以分為描邊型和填充型：描邊型使用最為廣泛，是次按鈕首選的樣式，而填充型相對特殊，在不同設計系體下會根據(jù)業(yè)務場景選擇是否使用。
相較于描邊型，早年在B端產(chǎn)品中很少會見到使用填充型樣式作為次按鈕使用的，但是可以發(fā)現(xiàn)近幾年國內(nèi)外設計系統(tǒng)如Arco Design、Marterial等，開始陸續(xù)將填充型次按鈕納入到按鈕組件庫中。
填充型次按鈕更多的使用場景是在移動端上，其視覺強調(diào)程度弱于主按鈕但又高于描邊型，可以更好的表達組件的整體性和吸引用戶注意。
伴隨著硬件設備的發(fā)展，桌面端和移動端的操作邊界開始逐漸模糊，各產(chǎn)品開始追求全生態(tài)環(huán)境下的統(tǒng)一性。為降低用戶在設備切換時的體驗隔閡，一套設計系統(tǒng)需要能同時滿足多端設備的兼容，而填充型樣式更符合其場景需求。最典型的便是iPadOS連接鼠標操作時，懸停態(tài)下填充型按鈕明顯比描邊型更容易被識別。
基于以上考慮，在工作中選擇次按鈕樣式時可以參考以下建議：
如果當前項目上已經(jīng)有在使用的開源庫，盡量以原有組件庫為主。除非自身產(chǎn)品有設備互通的場景或需要同一套設計語言兼顧不同端，否則增加多余的次按鈕樣式只會更加復雜且影響用戶的體驗一致性。
如果是項目是0～1搭建組件庫，根據(jù)自身業(yè)務場景選擇其中一種樣式使用即可。一般桌面端產(chǎn)品使用描邊型，如果產(chǎn)品生態(tài)中有移動端，為了保持設計語言的統(tǒng)一更建議采用填充型。
此外還需考慮前端修改組件庫樣式時的開發(fā)成本。
文字按鈕適合承載如取消、還原等無需特意強調(diào)的操作，通常使用在表格操作欄、表單頁等場景。為了和普通文本做區(qū)分，提示當前內(nèi)容可交互，需要加上鏈接色（一般是藍色）提醒用戶。
文字按鈕和鏈接（Link）的默認樣式一致，在搭建組件庫時很容易發(fā)生混淆。其區(qū)別在于按鈕用于發(fā)起動作，觸發(fā)相應的業(yè)務邏輯，而鏈接的作用是導航，作為頁面跳轉(zhuǎn)或錨點定位的觸點。為了更好的區(qū)分，可以在交互樣式上進行處理：
文字按鈕：指針懸停時容器添加背景色。
鏈接：指針懸停時文本添加下劃線。
圖標按鈕的視覺層級最弱，但是由于占據(jù)空間小，常用于同時展示多個操作項時使用。由于缺少文字解釋，單純的圖標可能會造成用戶的理解偏差，故建議在指針懸停時加上Tooltip的文字提示進行輔助說明，對于特定操作還可加上快捷鍵指引。
在依據(jù)強調(diào)程度劃分的基礎上，還有部分按鈕只應用于在特定的業(yè)務場景中，所以各設計系統(tǒng)下的按鈕分類會有所不同。以下按鈕的應用場景較為頻繁，故被單獨劃分為一類方便交流和管理。
功能按鈕順應用戶心智，采用綠色、橙黃色、紅色代表了成功、警告、危險三種功能按鈕，用戶無需瀏覽按鈕內(nèi)容，直接通過色彩即可識別當前操作可能導致的后果。
由于功能按鈕的視覺權重往往比主按鈕還高，在頁面中需謹慎使用，避免對其他頁面信息造成干擾。
相較于普通的描邊型按鈕，虛線按鈕只承載傳輸文件或新增配置項等操作，為方便用戶感知，將其描邊設計為虛線樣式。
由于虛線按鈕只能支持單純的觸發(fā)操作，在很多上傳情景下不能滿足其業(yè)務需求，故逐漸衍生出單獨的上傳組件，相較于虛線按鈕：
上傳組件支持批量上傳
通常有更大的交互區(qū)域且允許支持拖拽上傳，以降低用戶的操作門檻
搭配展示文件列表，用于對已上傳文件進行預覽、重新上傳、刪除等操作
顧名思義，幽靈按鈕不具備實體性，一般底色為透明，其按鈕的內(nèi)容反色，通常使用在復雜或顏色較深的背景中，例如 banner 圖、官網(wǎng)首圖等，避免按鈕突兀地破壞背景的整體性。由于幽靈按鈕使用的場景不固定，因此無須嚴格遵循現(xiàn)有規(guī)范，只要滿足其特定場景下的業(yè)務需求即可。
CTA，即“Call to Action”的縮寫，意思是行為召喚。該詞原本是營銷領域的術語，后來逐漸引用至互聯(lián)網(wǎng)領域中，即目的在于給用戶一個明確的反饋：當前事件的操作流程已經(jīng)完成或即將發(fā)起一個新的流程。
CTA按鈕之所以會被單獨歸類，因為當按鈕作為吸引用戶采取點擊行為的載體時，時常在事件操作的最后一步出現(xiàn)，作為產(chǎn)品的關鍵觸點之一，可以有效提高頁面或屏幕的轉(zhuǎn)化。也因此當頁面中存在多個按鈕時，CTA按鈕的優(yōu)先級往往是最高的，可以通過色彩對比、元素點綴等方式引導用戶點擊。
懸浮按鈕FAB，即Floating Action Buttons的縮寫，其特點是會始終懸浮在頁面的固定位置，不會隨著頁面滾動而消失。
在B端產(chǎn)品中，F(xiàn)AB按鈕更多的使用場景是承載全局性的附屬功能，常見操作包括咨詢、客服、快捷鍵、點贊、收藏、分享、回到頂部等。在設計FAB按鈕時需注意以下要點：
不能干擾用戶在當前頁的正常操作和瀏覽。盡量放置在頁面的固定位置，當操作數(shù)過多時可將其他操作下鉆至更多按鈕中。
承載操作須是當前頁的全局操作，無須與其他頁面元素發(fā)生聯(lián)動即可觸發(fā)。如不能承載保存、刪除、清空等操作。
按鈕組不是單獨的按鈕類目，而是按鈕組的集合體，當多個同級操作項同時出現(xiàn)，但不想占有太多頁面空間時使用。通常按鈕組會將最關鍵的主操作露出，其他操作收入更多操作項中。
嚴格來說 下拉菜單Dropdown 并不屬于按鈕類型，但因為其使用場景較為頻繁且時常用來承載多個按鈕操作，故在此處作為單獨類型進行講解。下拉菜單作為操作命令集合使用時，可以簡單理解成按鈕組：將多個操作按鈕收納到同一菜單下。在使用時有兩點需要額外注意：
選擇器Select 屬于錄入控件，在基本形態(tài)上和 下拉菜單Dropdown 高度相似，都是通過下拉浮層來容納更多信息，在實際應用時經(jīng)常容易被混淆。要區(qū)分兩種組件，最關鍵是理解其使用場景：
下拉菜單：當頁面上的操作命令過多時，用此組件可以收納操作元素。核心是菜單導航和命令集合
選擇器：用于一組選項中選擇一個或多個數(shù)值。核心表單填寫和數(shù)據(jù)篩選
當下拉菜單用來承載操作項時，各操作項關聯(lián)性也會引起下拉菜單樣式上的區(qū)別，這里用實際的案例輔助大家理解：
乍一看似乎都是差不多的樣式，在工作中很多設計師也是隨機選擇其中一種進行使用，但是作為設計師，就是應該從細節(jié)之處見真章，每一處設計都應有理有據(jù)。
簡單來說，以上三種組合按鈕中的操作關聯(lián)性是逐漸疏遠的，這一點從按鈕樣式上也可以看出。
新建一：合并同類項。突出新建操作本身，更多操作項是新增的數(shù)據(jù)類型進行區(qū)分，減少重復文案的出現(xiàn)。
新建二：操作延展。強調(diào)的是數(shù)據(jù)導入的形式，提供更多操作渠道供用戶選擇。
新建三：信息收納。各操作項之間并沒有關聯(lián)性，只是緩解空間壓力或突出使用最頻繁的操作。
在了解了以上按鈕類型，我們來看看按鈕的交互狀態(tài)。不管哪種按鈕類型都會存在相應的交互狀態(tài)，設計師在交付設計稿時需要將不同狀態(tài)下的按鈕樣式進行標注，方便前端開發(fā)。
在剛開始接觸按鈕時也曾被一堆狀態(tài)給亂花了眼，光是理解不同狀態(tài)的區(qū)別已經(jīng)頭大。其實回頭來看，開始只要記住4種最關鍵的按鈕狀態(tài)便可滿足大部分的使用場景，即按鈕的正常態(tài)、懸停態(tài)、點擊態(tài)和禁用態(tài)。
在日常工作中，沒有設置聚焦態(tài)和加載態(tài)并不會影響用戶的正常使用，但是加上后可提升用戶的產(chǎn)品使用體驗，大家可以根據(jù)開發(fā)成本和實際的業(yè)務情況考慮是否加上。
按鈕的初始狀態(tài)，即默認情況下的基礎樣式，此處不多做介紹。
當鼠標指針移入按鈕時的狀態(tài)。為了暗示用戶鼠標指針已進入按鈕的可交互區(qū)域，按鈕相較于正常狀態(tài)在背景色彩等樣式上會有明顯的區(qū)別。懸停態(tài)通常還會配合鼠標指針變化輔助用戶理解，在前端CSS樣式表中常用 cursor:pointer ，指針變化為伸出食指的手。
由于懸停態(tài)是由鼠標指針移動引起，故只有設計桌面端產(chǎn)品時需要考慮到，而在移動設備上通過手指操作故按鈕不存在懸停的狀態(tài)。（在iPadOS更新至13.4版本后開始支持連接鍵鼠操作，但是在日常工作中很少會出現(xiàn)，此處不予以討論）
鼠標點擊即按下按鈕時的狀態(tài)。激活態(tài)是在懸停態(tài)基礎上發(fā)生變化，鼠標指針樣式和懸停態(tài)保持一致，按鈕背景色發(fā)生變化，提示用戶已觸發(fā)點擊操作。
按鈕無法操作被鎖定時的狀態(tài)。該狀態(tài)是為避免用戶誤操作而設立，如在登錄頁未完成信息填寫時將提交按鈕禁用，提示用戶無法點擊，只有填寫完必填字段后才可以點擊提交。在鼠標懸停時指針變化為禁用狀態(tài)，在前端CSS樣式表中常用 cursor: not-allowed，通常會配合tooltip文字解釋說明行動點不可用的原因，避免用戶疑惑。
值得一提的是，禁用按鈕并非只有置灰一種樣式，只降低色彩飽和度和明度也是禁用按鈕的表現(xiàn)手法之一，且相較于置灰更方便用戶識別主次按鈕。
以上是針對不同按鈕狀態(tài)的說明，這里并沒有針對不同狀態(tài)的樣式進行詳細說明，因為不同的設計體系下可能會采用不同狀態(tài)樣式進行展示。為方便對比，這里將常見組件庫中的按鈕狀態(tài)進行了整理：
可以發(fā)現(xiàn)，除了TDesign中描邊按鈕激活態(tài)下增加了中性色填充外，基本按鈕狀態(tài)都是保持著一致的梯度變化。這里以正常態(tài)的按鈕樣式為基準，將懸停和激活狀態(tài)下的色彩變化進行整理：
總結(jié)來看，在不同色彩的按鈕上按鈕狀態(tài)會按照不同梯度分布：
主色（品牌色）按鈕色彩梯度從淺到深：激活 〉正常 〉懸停
中性色按鈕色彩梯度從淺到深：激活 〉懸停 〉正常
之所以出現(xiàn)這種情況，主要是因為在搭建產(chǎn)品色彩體系時，品牌色一般會采用色板中間色作為主色（通常是第六個顏色），故不管往淺往深都有更多靈活調(diào)整的空間。而背景使用的中性色為了避免干擾視覺層級，通常選擇色彩較淺的中性色，因此沒有再往下延伸色彩梯度的空間。
以上介紹的四種狀態(tài)建議采用色彩組件庫中色卡進行配色，上圖標注了不同按鈕狀態(tài)的配色選擇，下面是AntD和ArcoD的色板生成工具（關于產(chǎn)品取色未來會專門出一期文章進行講解）。
ArcoDesign Palette 色彩工具
Ant Design 色板生成工具
該狀態(tài)用于指示電腦光標的位置。在有些場景下不操控鼠標，只通過鍵盤方向或Tab切換選擇頁面元素進行操作，反而是更高效的操作方式。常見的聚焦態(tài)按鈕樣式為增加描邊，有的設計系統(tǒng)下會采用和懸停態(tài)一樣的樣式。鍵盤操控快捷鍵推薦：
【Tab】前進
【Shift + Tab】后移
【Enter】激活
表明用戶操作后系統(tǒng)正在處理的狀態(tài)。由于服務器響應或網(wǎng)絡延遲等問題，有時候用戶操作完需要間隔一段時間才能響應，加載態(tài)可緩解用戶的焦慮情緒，避免用戶由于未收到反饋而反復操作的情況。
源自 Arco Design-組件按鈕
接下來便到了本文的最關鍵部分，也是按鈕設計中出現(xiàn)最頻繁和令人頭痛的問題：我的按鈕究竟應該放在哪里？
在此之前先要理解按鈕設計的目標是引導用戶采取我們希望用戶采取的行動。這就需要盡量幫助用戶快速找到需要操作的按鈕并了解執(zhí)行該操作的結(jié)果，同時盡可能避免誤操作?；谝陨夏繕?，我們從用戶實際操作路徑的視角來梳理按鈕設計時應考慮的問題：
按鈕區(qū)在頁面中的什么位置——空間位置
有多個按鈕時采用怎樣的閱讀順序更合適——排列順序
按鈕采用怎樣的樣式更合適——視覺樣式
當用戶進入頁面時，除了瀏覽當前頁的信息內(nèi)容還需要尋找接下來可執(zhí)行操作的可交互區(qū)域，即按鈕區(qū)。除了單純通過視覺差異區(qū)分按鈕和頁面其他元素外，還需考慮到用戶在信息瀏覽過程中的視覺動線。結(jié)合古騰堡法則和格式塔原理，給出以下設計建議：
在沒有其他視覺效果引導時，F(xiàn)型和Z型網(wǎng)頁瀏覽模式可以作為用戶視覺動線的基礎指導，關于以上2種瀏覽模式網(wǎng)上有太多相關介紹，此處就不再贅述。
將關聯(lián)性強的信息放在一起，可以降低閱讀成本，提高用戶的感知效率。
這里先討論一下開頭提到的問題：主操作項放在左邊合適還是右邊合適？我們先來看看一些案例：
可以發(fā)現(xiàn)，即使是業(yè)內(nèi)頂尖的互聯(lián)網(wǎng)公司也并沒有遵從同一套確定方案。我們再看看這位在英國學人機交互的研究生所做的課題實驗：https://www.woshipm.com/pd/3104897.html。具體的實驗過程不再詳細贅述，直接來看結(jié)果：對于新用戶而言，確定按鈕的位置對操作時間和錯誤率影響并沒有太大差別。并由此得出更關鍵的結(jié)論：不要輕易改變當前產(chǎn)品中用戶已經(jīng)習慣的按鈕位置。
在此基礎上對于操作項不固定的頁面，給大家整理了以下建議：
最典型的案例便是編輯器類產(chǎn)品的操作項，將同類操作區(qū)整理分組，方便用戶查找。
此處的閱讀順序并非特指從左往右、從上往下，而是依據(jù)用戶當前視覺動線，優(yōu)先滿足用戶預期或操作可能性最大的按鈕需要最先被用戶發(fā)現(xiàn)。
考慮到人體工程學操作習慣和操作后果的影響，還需注意一些特定的場景：
流程屬性的按鈕如上一步、返回、后退等操作用戶習慣在左邊，而下一步、前進、更多等操作在右邊。
如刪除或清空按鈕，盡可能放置在遠離主按鈕的位置，甚至可以下鉆至更多按鈕中，避免誤觸。
在文章開始基于強調(diào)程度劃分按鈕類型時，按鈕的視覺樣式便是基于其強調(diào)程度劃分的，頁面中越是需要強調(diào)的按鈕其視覺權重越高。前文中只劃分了主按鈕、次按鈕、文字按鈕、圖標按鈕這4種基本類型，此外還可以通過文本粗細、內(nèi)容量等方式進一步細分。
按鈕的尺寸優(yōu)先體現(xiàn)在其高度上，而寬度一般根據(jù)內(nèi)容區(qū)大小自動適配。通常會將按鈕分為大、中、小三個規(guī)格，以滿足不同場景下的使用需求。
關于按鈕寬度需要注意的是，由于按鈕內(nèi)容的不固定，同規(guī)格按鈕可能因為內(nèi)容量差異引起視覺上的層級誤判。故為了減少按鈕錯綜不齊的情況，建議設置按鈕最小寬度的界限，一般為4個文字+左右內(nèi)邊距。
相較于其他方面，似乎大家對產(chǎn)品文案總是保持著“點到為止”的態(tài)度，但是并不意味著文案不重要，錯誤的文案會讓用戶產(chǎn)生疑惑，嚴重影響用戶體驗。相反好的按鈕文字甚至可以做到即使不去閱讀上下文，單憑按鈕文案即可做出正確的判斷。在一些關鍵節(jié)點的CTA按鈕，文案的優(yōu)化可以帶來轉(zhuǎn)化率大幅度的提升。因此關注文案細節(jié)也是設計師平時需要考慮的問題。優(yōu)秀的按鈕文案包含以下幾個要點：
按鈕區(qū)域寸土寸金，每一個字都要有其存在的意義，如果刪除也不影響信息表達即沒必要存在。
文字表達清晰，避免使用用戶難以理解的專業(yè)術語。
常見的“登陸&登錄”、“收獲&收貨”、“即時和及時”都是容易打錯的詞。
以下給大家整理了常見易錯的按鈕文案表，建議保存收藏。
如統(tǒng)一采用動賓結(jié)構(gòu)：修改價格、提交工單、查看更多等。
結(jié)合自身品牌特性，在按鈕中融入適當?shù)那楦谢陌?，也是塑造品牌心智的觸點之一。
當前市面上主流的互聯(lián)網(wǎng)產(chǎn)品大多都采用了圓角設計，因為圓角矩形相較于直角更具安全感和親和力、在相似內(nèi)容中識別度更高，且圓角對信息的聚焦性更強。同樣B端設計中通常也會在按鈕中加入圓角，方便用戶更高效的辨別和獲取信息，但是需要注意的是圓角并非越大越好，過大的圓角會導致按鈕操作熱區(qū)的縮窄，更不易被點擊觸發(fā)。如在移動端產(chǎn)品上都是采用手指按壓，而桌面端采用鼠標指針單擊，相較之下后者對點擊按鈕的觸發(fā)精度要求更高，也因此全圓角按鈕（也被稱為膠囊按鈕）更適合在移動端產(chǎn)品上使用。
此外按鈕的圓角設置還需考慮到產(chǎn)品整體的視覺一致性，在不同場景下都要保證統(tǒng)一的感官體驗，如在大尺寸的按鈕上圓角的曲率也應設置更大。
作者：蝦米的設計筆記 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言：
1886年，由卡爾·本茨發(fā)明的第一輛汽車距今已經(jīng)有130多年了，汽車座艙的發(fā)展已經(jīng)來到了一個新的階段，現(xiàn)階段我們稱其為智能座艙。它不僅有著先進的數(shù)字化儀表中控大屏，還有流媒體后視鏡、抬頭顯示、智能空調(diào)、智能氛圍燈等功能，看得見的看不見的地方無不凸顯著科技進步帶來的變化。
作為HMI設計師，在這個領域也工作了許久，對于智能座艙、HMI的設計有了些見解和思考，本文試圖通過總結(jié)實車座艙、工作經(jīng)驗、設計來展望未來的HMI設計趨勢，以及嘗試分析作為HMI設計師我們應該如何在設計這一領域去趕上智能汽車發(fā)展的風口。希望這些想法能讓剛?cè)胄谢蛘呦肴胄械脑O計師同學們對于HMI設計有一個幫助。
一、時代變革下的智能座艙——“第三空間”
二、科技發(fā)展帶來的設計需求改變
三、用戶體驗帶來更高的設計要求
四、情感需求引領新的設計方向
五、總結(jié)
隨著自動駕駛等技術的進步，智能座艙最后將圍繞座艙電子、座艙內(nèi)飾全面升級到移動的“第三空間”，將信息、娛樂、互聯(lián)等功能進行全面融合，為消費者提供更便捷的體驗。汽車將不再是代步工具，用戶在車內(nèi)即可實現(xiàn)娛樂和辦公，汽車有望進化成為家庭、辦公場所之外的“第三空間”。
盡管也有人認為汽車只是個代步工具，但更智能化更數(shù)字化的智能座艙就是大勢所趨，各家車企八仙過海各顯神通，不停進行車輛的智能化升級，提升智能座艙的體驗，軟件定義汽車，這是行業(yè)的共識，許多互聯(lián)網(wǎng)公司也加入了這場戰(zhàn)爭。
在這樣的背景下，作為設計師的角度，看著智能座艙的智能化在不斷提升，我們對于HMI設計有了些思考。我們認為會有這幾個方面帶來HMI設計需求或要求的的變化：
硬件技術的革新帶來體驗形式的改變，而完善的設計升華用戶對于新科技的體驗。在“未來”還沒有到來的時候，發(fā)揮設計的主觀能動性能，能讓現(xiàn)在成為更好的現(xiàn)在。好的視覺體驗不應只是數(shù)字化的體驗，硬件能夠給予視覺更加完整，更加豐富的體驗感受。智能座艙科技能力不斷提高對設計有了不一樣的需求。作為設計師，關注科技和車機硬件技術的進步能夠拓寬我們的視野，延展設計的畫卷。
傳統(tǒng)的HMI由中控系統(tǒng)，屏幕，?向盤控制等模塊組成，受限于應?場景?多只滿?于?駛功能，強調(diào)的只有?和?的關系，但隨著??駕駛解放了?的雙?，?和?的關系將被重新思考定義。
1、通過設計提升自動駕駛的體驗，增強用戶的使用信心：
自動駕駛模式下，通過攝像頭特、毫?波雷達、超聲波雷達等掃描記錄下當前?輛所處的環(huán)境信息，將路況信息和道路周圍環(huán)境車輛等信息進行可視化呈現(xiàn)在屏幕上。在這個過程中，除了硬件的可靠性能否掃描出周圍環(huán)境車輛物體之外，可視化的視覺設計也會影響到用戶的信心。
交互層面，需要有更多自動駕駛可視化圖像的交互思考和創(chuàng)新，例如當開啟自動駕駛的車輛在一個復雜的十字路口等待紅綠燈是，周圍復雜的情況會讓用戶恐慌，特斯拉的fsd就會在停下等紅綠燈時，抬高視角，這種方式可以通過屏幕的可視化信息觀察到更多路況車輛信息，從而讓用戶對機器產(chǎn)生信任感。
視覺層面上，一般來說識別度比較重要，能更直觀的展示模型可視化信息就好，但是可視化信息的表現(xiàn)形式可以作為視覺設計的重點，可以是線性模型，也可以是白模等等，要去契合車機的主題、顏色、概念，又要達到可視化的要求。
2、不同的主題模式以及新的視覺風格：
作為決策者的汽車用戶當然需要更多的主題顏色或主題風格選擇，他們不再簡單要求能用就行，不僅僅是更好用的交互，對視覺設計當然也有了新的要求。
一般來說，現(xiàn)在的車機系統(tǒng)最少都要有一套黑白模式，分別匹配白天黑夜的的駕駛場景；有的更是需要在越野、城市、長途情況下有不同的視覺主題界面；或者是運動和沉浸駕駛有不同的界面風格，這些根據(jù)需求都是需要去考慮的，如何匹配視覺設計。最常見的黑白模式來說，在設計其中一套的過程中，就要去考慮如何適配成另一套，比如白色模式下的卡片投影，在黑色模式下如何顯示，如果不顯示投影如何去區(qū)分卡片。
設計的視覺風格的趨勢不是一成不變的，我們認為他的發(fā)展是螺旋式上升的，手機的UI最開始的擬物風格滿滿的向著扁平化發(fā)展，但扁平化后大家又開始追求擬物，后面就誕生了輕擬物風格和2.5d等風格，現(xiàn)在又流行簡約3d風格。以前由于車載芯片性能等問題，隨著車載芯片、屏幕性能的不斷發(fā)展，未來的HMI設計風格絕對不會一塵不變，他同樣也會追求不同的設計風格，輕擬物、簡約3d圖標甚至3d界面的交互都會不斷產(chǎn)生甚至已經(jīng)產(chǎn)生，也要求設計師去了解和掌握更多的設計風格。
電動汽車行業(yè)飛速發(fā)展,智能AI和人際互聯(lián)等人車交互概念也跟著興起,對于中控臺的需求和功能復雜度也跟著越發(fā)精細起來，全液晶顯示和HUD已經(jīng)成了基本操作，炫酷、科技感爆棚的HMI設計成為標配。
1、越來的大的車載屏幕：
燃油車時代評價一輛車不可避免的會討論汽車三大件：發(fā)動機、底盤和變速箱。但是智能座艙時代，不少人戲稱新的三大件是：彩電、冰箱和沙發(fā)。雖然是戲稱，但是我們也可以看出來大屏幕車機等提升座艙體驗的設備越來越成為用戶購買汽車的一個指標。當然也有人不這么認為，但是市場是很誠實的，大屏幕的車機就是更受歡迎，筆者曾問過一個剛畢業(yè)幾年準備買自己人生中第一輛車的朋友，你買車會在意車的中控屏大小嗎？他的回答是：當然會，大就是好。
可以看出，作為HMI設計師，面對的情況就是越來越大的屏幕尺寸和分辨率以及越來越多屏幕數(shù)量。這也給了設計師更多的發(fā)揮空間。交互上可以有更多的交互形式，同時也有了更高的視覺要求，需要有場景、有主題、有氛圍等等等。作為座艙內(nèi)最顯眼的屏幕，也不簡單是呈現(xiàn)功能那么簡單，它也成為汽車內(nèi)飾的一部分，除了車內(nèi)的氛圍燈，屏幕內(nèi)也需要呈現(xiàn)更多的設計美感。
2、虛擬現(xiàn)實技術的發(fā)展：
雖然前文提到了駕駛員不再是單單駕駛者，但是首先駕駛這一需求是不會消失的，其次且隨著自動駕駛的發(fā)展，用戶也希望能通過虛擬現(xiàn)實技術看到更多的信息來幫助自己完成抉擇決策。未來虛擬現(xiàn)實增強技術將在安全駕駛方面扮演著更為重要的角色。虛擬現(xiàn)實增強技術對于用戶而言，具有很大的直觀性，通過結(jié)合現(xiàn)實路況信息，實時出現(xiàn)一些虛擬箭頭來直觀地引導我們前進，從而避免在駕駛中出現(xiàn)開過路口和分散駕駛員注意力的情況。
其實目前大面積應用的hud也算是虛擬現(xiàn)實技術的一種，AR-hud早已經(jīng)成為了現(xiàn)在智能汽車的標配，未來幾年，我認為會有越來越的的用戶擺脫低頭看儀表的習慣，hud可以幫助駕駛者更便捷更安全的獲取駕駛、車輛、車道等信息。
我們都知道hud這一技術最早是作用于軍用戰(zhàn)斗機的，隨著技術的進步虛擬現(xiàn)實技術會不斷下放到民用汽車上，所以作為設計師對這方面的技術也需要有更多的了解，如何運用在汽車上，設計出更加符合汽車操作和行駛邏輯的虛擬現(xiàn)實技術的視覺信息。
另一個方面就是虛擬成像，科幻電影中的虛擬成像來進行互動和對話或許也會成為未來的HMI設計趨勢，但這可能要很久以后才能實現(xiàn)了，或許同元宇宙一樣久-_- !!!
以用戶更能理解、更能接受的方式展現(xiàn)全新的智能化座艙，提升操作的舒適性和高效：用更簡單的方式傳達更直觀的信息。這是我們在用戶體驗基礎上做設計需要做到的。
用戶對于智能座艙的操作不熟悉，產(chǎn)生不信任感，我們需要以設計為連接點，和用戶溝通?？萍紳M足人的基本需求，藝術升華體驗。在科技飛速進步的當下，科技研發(fā)固然關鍵，以眼睛為窗戶讓用戶體驗到科技的進步同樣不可缺少，幫助用戶用視覺感受未來、提高體驗是作為設計價值的最高追求。
·沉浸式的體驗感
當車輛從工具變?yōu)橐粋€能夠讓人沉浸和享受的空間，在原有的交通屬性之外增強智能座艙的空間的娛樂屬性。當在車內(nèi)等待或者不想下車在車內(nèi)躺一會，小憩、k歌、電影等可能都是會干的事，露營、閑聊等也可以是智能汽車提供的環(huán)境。所以我們需要將有限的畫面變成無限的遐想空間。
1、契合功能的氛圍設計：
不要好奇為什么有人為什么會在車上睡覺，會在車上看電影，但是這個需求是一定存在的，作為“第三空間”，這是智能座艙應該要勝任的能力。
設計師需要做的就是打造契合這些場景下的氛圍感，通過氛圍燈音效可以打造出一個適合觀影、聊天的氛圍，前文提到屏幕也是車輛內(nèi)飾的一部分，也需要通過視覺畫面、動效去一起營造這個可以沉浸的氛圍。
2、視覺設計的畫面感：
當科技滿足了基本需求后，我們需要更出色視覺設計來升華用戶的視覺體驗。屏幕作為一幅畫框呈現(xiàn)我們想要的畫面，我們認為HMI的界面設計會更多的趨向于整體的畫面感以及場景化，通過打造一個屏幕內(nèi)的場景空間，在服務和交互體驗上突破創(chuàng)新，給用戶體驗智能座艙的沉浸式體驗空間。
目前已經(jīng)有不少汽車的都已經(jīng)用場景化的UI來上到自己的中控儀表上。場景主題的HMI已經(jīng)不只是單單的概念無法落地，虛幻引擎技術的加入也能讓更多的三維場景能夠落地到實車上。
·信息內(nèi)容需化繁為簡
智能座艙的一個很大的特點就是幾乎將所有車內(nèi)功能按鍵、報警都搬進了屏幕內(nèi)，那么幾乎所有的信息都要通過屏幕獲取，所有的功能都需要通過屏幕點擊操作完成，但是當所有的內(nèi)容信息功能都堆積在一起時，任誰看著都會產(chǎn)生信息焦慮。
通過設計去凸顯重要消息和重要功能是解決問題的重要方法。許多汽車中控屏都將空調(diào)和座椅的快捷操作加入到了屏幕的底部dock欄，因為空調(diào)是使用頻率十分高的功能。交互層面的設計需要做到簡化常用功能的使用層級步驟，視覺設計需要做到讓重要功能顯眼易操作。
·一觸即動的反饋
我相信所有人都會認為如果車機使用起來如果不流暢，體驗會很糟糕，特別是如果極其卡頓，會不愿意使用，這也是許多人駕駛車輛的時候?qū)幵阜胖蟮闹锌仄敛挥?，而去用手機導航的一個重要原因。受制于車載芯片的性能和屏幕的質(zhì)量，過去確實這種卡頓是沒有辦法解決的。但是這些隨著芯片性能和技術能力的提升，或許芯片已經(jīng)不是造成車輛卡頓的罪魁禍首。
如果車機上的動效做的不夠流暢舒適，也會產(chǎn)生“卡頓”感，同樣是對用戶體驗的破壞。所以一定要做好動效反饋，掌握好動效節(jié)奏，讓用戶感受到一觸即動舒適感，是可以大大提高用戶體驗的。關于具體的動效設計受篇幅影響就不展開了，我認為這一塊車機與手機和pad上的動效體驗一致，蘋果靠著極其出色絲滑流暢的動效設計讓人使用起來體驗感十分舒適。界面中的元素彼此關聯(lián)，而非獨立存在。好的動效設計是在界面中某一個元素發(fā)生變化時，與之相關聯(lián)的元素也會產(chǎn)生邏輯上合理的變化。動效不是獨立存在的，而是彼此關聯(lián)著的。界面是由元素所組成的整體，所以當界面中的某一些元素發(fā)生變化時，周圍的環(huán)境也會受到影響。
動效設計像交互設計、視覺設計一樣已經(jīng)成為用戶體驗的一個重要組成部分。一款具備舒適動效標準的車機系統(tǒng)能給車主帶來更好的客戶體驗。當然，做好同開發(fā)的對接也很重要哦?。?！
當科技水平很高且生活中處處是科技的產(chǎn)品，人類就會越加渴望高情感的環(huán)境。科技本身并不是冰冷的，它帶有溫度、靈感、和情感；科技也不是孤立、靜止的，它在不斷地尋求自身的發(fā)展并拓展與人類的關系。我們需要通過設計讓科技與用戶完成情感上的交流，讓其更具有藝術感和親和力，讓車機從“孤島”成為烏托邦。
·是助手更是伙伴
語音助手通過智能對話與即時問答的智能交互，實現(xiàn)幫忙用戶解決問題，而智能語音助手在智能座艙中的地位越來越受到重視。在功能的基礎上，如果智能語言助手能夠跟有溫度有情感，用戶也能夠更信任系統(tǒng)，擁有更好的使用體驗。
如何讓語言成為助手和伙伴呢，我們認為如果只是冰冷的vui光效反饋，是做不到溫度和感情的，可能我們需要一個語言形象。當用戶喚起語言是，會有一個具體的形象出現(xiàn)在屏幕上或屏幕外，讓用戶產(chǎn)生與系統(tǒng)對話的感覺，產(chǎn)生愿意與其對話的意愿，建立情感觸點；另一方面，也可以打造一個提高汽車品牌產(chǎn)品力點IP形象。
所以語音形象的設計，我們認為也是HMI設計師需要考慮和思考的，需要設計出契合品牌的IP形象，來成為用戶的專屬語音助手和伙伴。他or她需要有豐富的表情、豐富的肢體動作，甚至有情緒來與用戶進行互動反饋，從而達到提升用戶體驗的目的。
如何設計出一個有溫度有情感的語音助手大家可以翻翻之前發(fā)的文章《車載智能助手設計：智能座艙的合作伙伴》，希望能對大家有所幫助?。?！
·無微不至的細節(jié)設計
博大而深沉的情懷讓人贊賞，但微小而細膩的情感讓人感動。總有人能夠被某個看似平凡的細節(jié)深深打動，這便是細節(jié)設計的價值，我們精準的去定位用戶群體，探索用戶的情感需求，當然希望能夠做出打能夠做出打動人心的細節(jié)設計。除了下面幾個點當然還有更多的細節(jié)設計，就需要在設計過程中去慢慢體會和發(fā)現(xiàn)了了。
1、多模態(tài)交互方式：
人機的交互方式早就已經(jīng)不再是單單的觸屏操控，理想L9的后排屏幕，通過手勢或者語音都可以進行操作，將手放在屏幕前半米外的位置挪動，屏幕就會有光標跟著手移動，握拳就是點擊確認，盡管這種交互方式目前來看還有瑕疵，但是作為設計師看到的應該是在車上，會有更多更自然的多模態(tài)交互方式出現(xiàn)，可不僅僅只是手勢，通過文字、語音、視覺、動作、環(huán)境等多種方式進行人機交互，充分模擬人與人之間的交互方式，這不只是個噱頭，而是實打?qū)嵉捏w驗設計。語音不就是一個典型的多模態(tài)交互的方式嗎。我們相信會有更多更自然交互方式，讓人既自然更加自然，做到“無感”的舒適。
2、情感化設計：
前文說到語言助手的設計需要情感，但情感化設計是不僅僅體現(xiàn)在語音上，其實情感化設計是共通的，這是一種設計思維，這種思維可以體現(xiàn)在很多設計方面，比如，我們在視覺設計上也可以去傳遞感情。而我們認為，未來的HMI設計在很多地方都需要去考慮到用戶群體的情感共鳴。下面這個例子，重型卡車的儀表設計，鋼鐵元素是賴以生存的車，“門”是向往的家。依托大卡車司機在慢慢長路上對家的思念和向往，用“門”的元素去撬動這種情緒，以情感作為窗口，去引起卡車司機的共鳴。
HMI設計當然不僅僅只有這些，還有很多，我們試圖總結(jié)一些關于HMI設計師需要去思考去了解的東西。新能源汽車的快速發(fā)展，同時也帶著智能座艙有了更高的需求，隨著這些因素，智能座艙對設計的要求無疑會越來越高。作為HMI設計師也需要對技術帶來的革新變化有敏銳的觀察能力并思考；同時也要有充足的知識體系和思考發(fā)掘能力去完成提高用戶體驗的設計；同時也要有代入式的情感去進行情感化的設計.... 等等等等。這當然也不是一朝一夕的事情，也需要我們設計從業(yè)者伴隨著快速發(fā)展的汽車這個行業(yè)一同去進步。共勉?。。?
作者：EPUX 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
在上一篇《如何設計高質(zhì)量B端調(diào)研問卷？用戶研究方法(一)》一文中，詳細介紹了如何通過調(diào)研問卷的方式，整理發(fā)現(xiàn)用戶的淺層需求。
本文將分享另一個更為深層全面的B端用戶研究方法——用戶訪談。通過面對面地溝通，以及觀察用戶的表情、行為去挖掘更深層的需求。（文末附模板下載鏈接）
下面是本次分享的文章結(jié)構(gòu)，標??的為重點部分。
01
用戶訪談的兩種路徑
用戶訪談通?？梢圆捎?strong>線上會議、電話或者線下面對面交流兩種形式。
線上會議和電話訪談的優(yōu)勢顯而易見，可以不受地域限制展開調(diào)研訪談，整體的成本也比較低，設計師可以自己找領導或者協(xié)調(diào)資源去推動。
缺點也是比較明顯，溝通起來效率低下，比如我們一定有過“電話里說不清，我們見面詳談”的經(jīng)歷。
所以，相較而言線下訪談無疑是最佳的調(diào)研形式。首先當面溝通更加高效，其次對于搭載硬件設備的產(chǎn)品來說，讓受訪者在真實場景里操作演示，可以發(fā)現(xiàn)更多隱性問題。
02
常見的3種受訪者類型
在訪談過程中通常會接觸到以下3種類型的受訪用戶，不同類型的用戶我們應該怎么接觸交流呢？
話癆型的受訪者占大多數(shù)，通常就是想法、意見比較多。他們不僅有一大堆不滿意的點要訴說，甚至連對應的解決方案都想好了。
整體接觸下來，我覺得該類型的受訪者，可提供的有價值信息會更多一點。只不過我們要學會過濾信息。因為他們的修飾用詞通常比較多，例如：“太難用”、“超級麻煩”、“哎 我真的是受不了啊”...
訪談話癆型的受訪者，我們需要注意無論怎么聊都要緊扣主題，防止變成了吐槽專場。
其次也要表達肯定，安撫情緒，并對問題進行進一步提問：“您的這些建議真的很棒，也給我們提供新的思路，我都記下來了，我還想確認下，剛才您說的3個關于結(jié)算環(huán)節(jié)的問題，哪一個給您造成的困擾最大？”
顧名思義，受訪者可能是因為性格內(nèi)向或害怕說錯了不好意思等緣故，在受訪過程中問一句答一句，比較容易冷場。答案的價值也比較低，例如：“對，是的”、“還行吧”、“沒啥感覺啊”、“反正就這樣用用吧”、“說不上來”。
這種情況下要嘗試緩解下氛圍壓力，換個形式溝通：“就是隨便聊聊，公司派我們來呢，就是因為非常關注用戶的使用感受，想收集一波用戶反饋與建議，您有啥不滿意的地方都可以跟我講講，越多越好?！?/span>
其次我們在提問的時候也要帶有引導性，例如：“還有呢、然后呢、具體說說呢”，如果對方實在說不出所以然，最有效的辦法就是進入上機操作環(huán)節(jié)，通常操作過程中那些問題也會隨之暴露出來。
專業(yè)型的受訪者一般是老板或者店長、經(jīng)理崗位的員工，他們對于產(chǎn)品或整個門店乃至行業(yè)都了解的比較透徹。
和這樣的受訪者溝通，不僅是局限于產(chǎn)品的一些問題挖掘，他們會從這個行業(yè)的角度闡述一些個人的見解觀點，給我們提供一些有價值的優(yōu)化方案或者改進方向。
例如餐飲的老板其實并不是很關心點餐、結(jié)算的流程有多么的順暢高效，畢竟他們不需要親自去做這些執(zhí)行，而且坦率的說，對于絕大部分產(chǎn)品而言，好用并不能成為其核心競爭力。
他們關心的是如何帶來更大的商業(yè)價值，類似于如何提升坪效，如何提升門店會員的儲值能力等等。而這些老板的關注點，也會給我們未來的產(chǎn)品優(yōu)化方向打開新的思路，去思考如何給我們的用戶創(chuàng)造更高的商業(yè)價值。
03
我們在做訪談之前，首先一定要熟悉產(chǎn)品業(yè)務的相關背景、受訪商戶的基本情況。
訪談過程中可能會提及一些專業(yè)名詞，例如餐前餐后模式、明檔、一魚多吃、坪效、估清等等。我們具備了這些基礎相關知識以后，省去了不必要的解釋環(huán)節(jié)，可以使訪談推進地更順利。
其次建議要了解下行業(yè)相關的基礎知識。尤其是餐飲業(yè)態(tài)，華南、北方、四川等地都因為飲食習慣的不同，在產(chǎn)品的功能和使用上的需求也是相差很大。具備了這些知識點以后，在提問過程中，也更利于提出一些深刻的問題，而不是浮于表面的提問。
行業(yè)相關的分析報告，可以去艾瑞、36氪、發(fā)現(xiàn)報告等網(wǎng)站進行查詢收集，在此不做贅述。
在訪談初期，需要準備一份訪談框架，但并不意味著我們整個過程只能按提綱來提問。尤其是B端這種千載難逢的訪談機會，只按規(guī)定的框架提問屬實是太吃虧了。所以在時間允許的情況下，除了框架以內(nèi)的問題，盡可能多發(fā)散的去提問。
例如餐飲業(yè)態(tài)，會有各種不同載體的終端設備聯(lián)動使用，一體機POS、手持的POS、廚房KDS、廚顯大屏、各類打印機等等都可以順便了解、調(diào)研下，讓我們對于全鏈路的協(xié)作流程也會有更深刻的認知。
再例如后廚會涉及到KDS大屏顯示，可以問問目前的大屏顯示是否夠清晰（字夠大），也可以和負責海鮮稱重的工作人員聊聊，海鮮的售賣、計價流程，以及菜品雙單位（例如：1【條】魚，重量1【公斤】）的使用等等。
在溝通過程中，一定會有一些觸類旁通的收獲與問題被發(fā)現(xiàn)。這些問題也許來自一個模塊、或者某個特定角色，又或者是主產(chǎn)品關聯(lián)的其他后臺產(chǎn)品。
在提問的時候要考慮到受訪者的年紀和理解能力，如果措辭過于專業(yè)，可能會導致受訪者理解不到位，因此溝通的過程中要盡可能的說大白話。
我們都知道沒有經(jīng)歷過的事，很難感同身受。有時候看到客戶群里，因為產(chǎn)品的各種原因?qū)е律虘羟榫w激動，我們理智上非常理解，但是情感上很難共鳴。
因此每次的門店調(diào)研，我都會抓住機會觀察整個門店的運營情況，去感受那種忙碌的氛圍。有時候開始進入營業(yè)高峰期，機器出現(xiàn)卡頓或者外賣不接單等情況時，自己的情緒都會一下子緊張起來，也能夠深刻感受到產(chǎn)品給客戶帶來的困擾。
當再次有產(chǎn)品迭代優(yōu)化時，這些體驗總能讓自己能更容易代入用戶的角度思考問題。
除了去體會產(chǎn)品對情緒的直接影響，還可以關注下整個門店的布局、收銀產(chǎn)品的數(shù)量與擺放位置、不同產(chǎn)品的協(xié)同使用等等。
這些都會幫助我們發(fā)現(xiàn)，到底什么是門店運營環(huán)節(jié)里最重要的模塊。
在訪談過程中，不排除受訪客戶會反饋一些暫時無法解決的問題。這時候一定要告訴受訪商戶：“您的問題我已經(jīng)記錄下來，回去會針對這個問題反饋上報，最遲X天我會讓顧問給您回復的”。
這么做一方面也是細節(jié)處維護公司品牌的整體售后體驗，其次也有助于我們再次回訪時，受訪商戶樂意花時間跟我們聊。
04
了解了用戶訪談的一些基本信息和注意點以后，到了本文核心部分，關于整個訪談的推進過程，一共分為3個階段。
首先明確訪談的類型，用戶訪談的類型主要分為以下三種，最常見的就是第三種類產(chǎn)品使用回訪。
新品調(diào)研的訪談，一般是由于業(yè)務的發(fā)展，可能需要升級或者打磨一款新產(chǎn)品來滿足市場的需求。
在訪談的過程中，我們需要關注的點就是用戶畫像、商戶訴求、使用場景、終端載體等一系列因素。
當去往一個城市進行批量客戶調(diào)研的時候，偶爾會有拜訪潛在客戶的調(diào)研機會。這種類型訪問的關注點集中在商戶的痛點與需求上。
由于是潛在客戶，我們勢必是要了解他們想要購買或者替換產(chǎn)品的前因后果。也是借此機會了解到競對的優(yōu)劣勢，他們放棄競對的原因，以及我們當前產(chǎn)品的功能是否滿足客戶的需求，還有哪些點不滿足，客戶重點關注的是什么。
使用回訪是最常見的訪問類型，主要目的是對商戶進行售后維護、提升使用體驗。
且由于B端產(chǎn)品的復雜性和遠距離特點，以及新功能同步給商戶存在的滯后性，公司會安排定期的上門回訪。如果有這樣的機會，UED一定要盡量申請跟著去門店調(diào)研。
到了最關鍵的一步，就是關于訪談的問題設計。
總結(jié)一下，問題的設計渠道來源主要有3種。主要還是根據(jù)調(diào)研目標進行問題設計，另外兩種方式，作為輔助。
那具體問題應該怎么設計，這邊我們分為3個步驟，從面到點依次拆解進行問題設計。
B端產(chǎn)品的特點可以借用《U一點料》的9個字概括，“多場景、全鏈路、多角色”，所以設計問題前，我們可以從場景+鏈路+角色/節(jié)點功能的維度來設計問題。
以餐飲行業(yè)的產(chǎn)品舉例，首先建議了解自家產(chǎn)品的全場景業(yè)務能力。即從商家端到消費端會經(jīng)歷的產(chǎn)品模塊和具備的現(xiàn)有功能，做到心中有數(shù)即可，畢竟不會一下子調(diào)研這么多模塊和功能。
其他ToB產(chǎn)品同理，可根據(jù)某個操作鏈路為主線，確定主流程后進行問題設計。其實就可以理解為確定調(diào)研的目標。例如下圖要調(diào)研的主流程，就是提取點餐>下單>結(jié)算為主線。
根據(jù)剛才確定的主流程 我們找到所有關鍵節(jié)點進行問題框架設計。
以上3個步驟可以理解為，如何在功能極其復雜的B類產(chǎn)品當中，篩選出與訪談目標緊密相連的功能鏈路。避免我們的訪談提綱做的過于冗余沒有核心。
這點也非常重要，每一次去門店調(diào)研之前，先由當?shù)刎撠煹念檰柵c受訪商戶提前溝通。
一方面是需要與對方預約時間，另外一方面這種訪談對商戶而言就相當于優(yōu)質(zhì)的售后服務，會有受訪商戶提前列框架，準備問題。
那么這種情況更有利于調(diào)研，因為受訪者明確自己的問題點在哪里，就等著調(diào)研團隊（售后團隊）來門店后，好好拉扯一番。
萬事具備，只欠東風。我們再盤點確認下本次訪談的各類工具是否備齊，準備進入訪談階段，大致需要準備的東西是以下4種材料工具。
在了解了受訪者類型、采訪者需要注意的點，以及帶著我們設計好的問題，下面正式進入訪談階段。
到達門店后，我們的顧問會給受訪客戶做一下來訪成員介紹，并講明此次到店的目的。一般都是產(chǎn)品使用回訪，或者新功能推薦培訓。
通常來說，受訪商戶對來訪團隊總是有很多”心里話“想嘮一嘮，因此暖場氛圍比較容易起來，也有助于我們接下來的溝通
進入正題以后，我們會先大致了解下受訪者最近使用的體驗以及遇到的問題，而后會根據(jù)問題框架進行提問。在整個過程中也需要注意觀察用戶在描述問題時候的表情和肢體語言，搜集用戶對于產(chǎn)品的真實態(tài)度。
其實整個訪談流程我們歸納一下，需要關注的就是四個關鍵點，手+口+心+顏。
關于實操演示放在第一個講，是因為這個環(huán)節(jié)非常重要。線下訪談時強烈不建議“脫機訪問”，這種形式對受訪者而言需要花更多的時間去思考問題的答案。
會遺忘甚至想不起來當時的具體情況，隨便的敷衍回答“嗯，還行”、“挺好的”，或者干脆彼此都不在一個頻道上。
其次，在操作過程中，建議用手機進行拍攝記錄。因為每個人對產(chǎn)品的理解方式與程度不同，在用戶操作的過程中，會發(fā)現(xiàn)一些有意思的代償方案。這些也是思考的切入點。代償方案是否比原先設定的實現(xiàn)方法更便捷。
回去通過視頻仔細分析受訪者的操作路徑，以及每個操作之前是否有遲疑等等。并且將問題點一一記錄下來。
這個就是根據(jù)問題框架進行提問。在這個過程中，通常會穿插著上機操作演示，在現(xiàn)場記錄的時候可以先記錄個大概，等結(jié)束后再仔細整理。
問受訪者的心理感受，其實就比較偏主觀了，我們可以從“我們家的產(chǎn)品”和“人家的產(chǎn)品”兩個維度去對比詢問心里感受。值得注意的是，即使是這樣開放式的提問，也有提問技巧。
比如“你覺得現(xiàn)在還有什么不好用的地方”就比“你感覺現(xiàn)在的產(chǎn)品好用么”這樣的提問方式更有效。
因為產(chǎn)品一定是有可有優(yōu)化的空間，“有什么不好用的地方”這樣提問的方式就是具體到了某個點上面，具體什么點不好用。
而后者的提問方式是基于整個產(chǎn)品，受訪者可能會出于不好意思等原因直接說“你們的東西還行吧，還可以”。
當我們提問產(chǎn)品優(yōu)缺點的時候，受訪者大部分都會帶上表情和肢體語言，并且情緒表現(xiàn)和性格有比較大的關系。
性格比較雷厲風行、急躁一點的，通常會像連珠炮一樣瘋狂輸出，并且措辭會比較極端。例如：“真的太難用了”、“太麻煩了”、“嚴重影響門店營業(yè)了啊”。
接受到這種信息我們首先要做的就是安撫對方的情緒，其次對于這些信息要學會剔除一些夸張描述。
而性格溫和一點的受訪者，在闡述問題的時候也會比較婉轉(zhuǎn)。“不是太方便”、“這個改動沒啥感覺”、“也還行、都可以”，如果某個高頻操作真的很影響日常工作效率，往往會表現(xiàn)得很無奈，甚至還有點委屈。
那么無論是哪種表現(xiàn)，其實都要考驗采訪者的經(jīng)驗，結(jié)合產(chǎn)品的功能去考慮，找到反饋中真實有效的部分。
通過以上4個環(huán)節(jié)，其實就可以收集到很多有用的信息，語言信息、視頻信息、動作表情信息等等。接下來的任務就是信息的梳理歸納。
訪談結(jié)束后，我們需要做個簡單的總結(jié)回顧。將關鍵問題再次復述確認，進行查漏補缺并且再次感謝受訪者，表達他們今天提的建議價值很大，后續(xù)會梳理出可落地的點優(yōu)化到產(chǎn)品當中。
如果說聊得比較開心，大多數(shù)的受訪商戶都會邀請來訪團隊吃個飯再走，也算是額外的福利。在就餐過程中的非正式場合交流，也可以聊聊門店的一些運營情況等等，幫助我們更深入的了解這個行業(yè)。
我們在訪談過程中會有大量未整理的一手記錄，結(jié)束后需盡快的梳理，盡可能詳細的記錄下用戶描述的細節(jié)、肢體動作表情語言等等。建議使用石墨、語雀、騰訊文檔等在線編輯工具，方便分享修改。（本文提供模板可下載）如果是連續(xù)訪談幾位商戶，我會在訪談結(jié)束以后，迅速地將剛才的訪談內(nèi)容整理出一份原始資料。并羅列出一些受訪者反饋但訪談提綱里沒有的問題，去下一家受訪商戶的時候可以驗證下該問題的普遍性。
② 整理落地
輸出后我們需要再次進行提煉，將有價值可落地的問題點提取出來，進行匯報分享，并找到相對應的產(chǎn)品研發(fā)進行探討排期，這樣就形成了一個完整的閉環(huán)，真正做到了發(fā)現(xiàn)問題、解決問題.
③ 流程概括
前文絮絮叨叨說了很多，其實關于用戶訪談這事用6個字就可以概括，簡單理解：
問誰？問啥？答啥？改啥？
能夠回答清楚這4個問題，那么這就是一次有價值的訪談經(jīng)歷。
ToB業(yè)務的特點就是會有一定的行業(yè)壁壘，設計師在剛接觸的時候一定會有很多茫然時刻。對于各種專業(yè)詞匯的一臉懵，對于行業(yè)的不了解。
或者很多人對于B端的認知還停留在，B端好像沒啥好設計的，都是現(xiàn)成的組件庫拖一拖，成就感比C端差遠了。
那么做訪談、體驗優(yōu)化的意義是什么呢？
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
你有沒有注意過，App底部的圖標是如何變成選中的？大多數(shù)產(chǎn)品是將靜態(tài)圖標替換（硬切過渡），來完成狀態(tài)切換。
當我看完上百個動態(tài)后，找到了更有趣的方式...
02 App底部導航構(gòu)成
通常由圖標、文字/點線裝飾、和底板卡片組成，（當然也有些產(chǎn)品只使用圖標或文字），但設計師在進行動態(tài)設計時則是針對這3部分。
03 Tab Bar動態(tài)類型
動態(tài)效果由弱到強，視覺層級由低到高依次排序：圖標動態(tài) — 裝飾元素動態(tài) — 底板卡片動態(tài)。（根據(jù)本文案例效果來排序，但效果不同會有所差異）
▍圖標動態(tài)?
我們知道圖標風格可以簡單的分為：線性、面性還有線面。在這基礎上通過修改顏色或造型，又能延展出更多風格。
最常用的是添加修剪路徑（Ae的一種路徑效果），你可以把它理解成托尼老師，可以通過調(diào)整百分百參數(shù)來控制線條生長。
但只是單色修剪，看起來很單調(diào)。我們可以在這個動畫基礎上再多復制幾層，并分別加入品牌色，這樣可以讓視覺看起來更豐富。
也可以換一種方式，只調(diào)整不同顏色圖標的位置屬性，便能得到故障效果。
如果你覺得這些太浮夸，那么單個圖標添加修剪路徑，再配合位移、旋轉(zhuǎn)等基礎屬性則是更好的選擇。
通用的方法是調(diào)整不透明度，相比于硬切更柔和，且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產(chǎn)品來說，可能會顯得有些普通。
我們可以考慮使用遮罩來制作動態(tài)，首先在圖標周圍繪制幾個圓，再將圖標外輪廓，作為圓的遮罩，來控制其顯示范圍，最后調(diào)整圓的縮放即可。
在一些特殊的時間，設計師們可能會技癢，而將圖標繪制的更加豐富，來營造氛圍。
對于這類圖標，只需要參考它們的物理狀態(tài)[下方解釋]，再遵循從下往上，從中心往四周擴張的原則來調(diào)整基礎屬性，便能制作出細節(jié)豐富的出場動畫。
（物理狀態(tài)：該物體在現(xiàn)實場景下的狀態(tài)，上圖獎杯真實世界狀態(tài)通常是放置地面，所以出場方向是從下到上。但假如你的圖標是錦旗，那么物理狀態(tài)應該是掛在墻上，所有出場方向是從上到下）
當然如果去掉高光和投影，在制作一些動態(tài)時會更方便。
例如：復制一顆星，將其初始位置設定為一個獎杯的距離，并記錄關鍵幀，然后整體再移動一個獎杯距離。耳朵則調(diào)整路徑來完成移動和變形，這樣便能營造出3d旋轉(zhuǎn)的錯覺。
對于結(jié)構(gòu)復雜的圖標，可以提前分層。其中線條依舊可以使用修剪路徑（在Tab bar中，不同圖標修剪路徑的起始點方向通常相同，以便保持一致性），而填充只需要調(diào)整元素縮放，并借助蒙版限制其顯示范圍就行。
▍裝飾元素動態(tài)?
如果你覺得前面這些方案不夠新穎，那我們可以對裝飾元素下手。（當然這類方案很少見，原因在于商業(yè)價值不足，實現(xiàn)成本高，所以這里也只是提供一些創(chuàng)意練習思路）
在一些年輕化產(chǎn)品中，如果圖標含義很容易理解，那么設計師可能會用線或點來替代文字，讓整體更簡潔。
國外設計師Tubik，通過讓點元素在移動時呈現(xiàn)心電圖樣式，讓人眼前一亮。
通過動態(tài)效果，甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。
嘗試修改軌跡樣式，然后為元素不透明度和位置添加動畫，你能猜出這是什么類型的產(chǎn)品嗎？
又或者再夸張些，將軌跡設計成電路圖。其中線條添加修剪路徑，再借助Ae路徑跟蹤方法，使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍，這個方案看起來適合科技或游戲類產(chǎn)品。
通過調(diào)整元素路徑來改變其造型，模擬液體滴落，再通過蒙版縮放，讓選中狀態(tài)下的圖標出現(xiàn)。
假如你的圖標設計的足夠巧妙，我們可以提前繪制好關鍵筆畫的運動軌跡，便能通過修剪這條軌跡來完成筆畫的移動。
▍底板卡片動態(tài)?
這類動態(tài)少見的原因在于其動態(tài)效果面積大，視覺層級高，容易過度吸引用戶注意力。目前也只是在個別產(chǎn)品中看過卡片凸起效果。
在Ae中要制造這樣的效果，最先想到的可能是調(diào)整卡片路徑，但這樣的方式在制作彈性時非常麻煩。
我們有更簡單的方法，先多畫出一個圓，然后與卡片路徑合并。
為了讓邊緣圓滑，整體添加高斯模糊和簡單阻塞，分別加大參數(shù)，便能讓邊緣圓滑。（這種方式有個缺點：會收縮原有卡片寬高。所以添加效果后，需要借助參考線再次調(diào)整卡片大?。?/span>
完成圓滑處理后，修改其他元素的基礎屬性即可。
目前能記起的只有美團外賣看過這效果。但為了降低視覺干擾，其弱化了彈性次數(shù)。
這個效果靈感來源于Dribbble設計師（EuroART93），我們只需要將凸起案例中，圓與底板卡片的布爾運算模式改為相減就行，其他元素同樣調(diào)整基礎屬性。
此方案目前還沒有在其他產(chǎn)品中看過，究其原因還是效果太過搶眼。
看了這么多，其實不難發(fā)現(xiàn)。同一個圖標，只需要改變不同屬性或元素的運動方式，便能帶來不一樣的感受。
或許創(chuàng)意的產(chǎn)生，并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合，給我們帶來了新鮮感，或許這就是我們要的創(chuàng)意。
最后再說兩句：
每個產(chǎn)品都有自己的調(diào)性和目標用戶，動態(tài)效果也有強有弱。好的動態(tài)應該是能與其進行匹配，而不是根據(jù)某個產(chǎn)品得出一個絕對的答案。
本文演示了不同類型圖標用什么動態(tài)，并不代表只能這樣用。動態(tài)效果類型遠遠不止這些，而以上只是最常見的動態(tài)屬性組合方式，所以請不要局限你的想法。
作者：幺零三 來源：站酷
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://m.yvirxh.cn