在阿里云設(shè)計中心有著這樣一只團隊,譜寫了這樣一些故事…

“ 設(shè)計師成為逆行者，第一個定義健康碼體驗流程，為了百姓疫情防控出謀劃策。

國民級應(yīng)用不難用，新稅改讓人人都能三步退稅，五步報稅。

全球卓越家具品牌體驗升級，讓家居行業(yè)供應(yīng)鏈建立合作更加便捷。

云上展廳，傳統(tǒng)會展線上化，數(shù)字化，讓廠家產(chǎn)品展示與投資突破空間阻礙?！?

有人問…這也是ACD設(shè)計中心的工作范疇嗎？是的，就是有這樣一支團隊，完成了上百家客戶的產(chǎn)品設(shè)計體驗護航，為大型企業(yè)和政府的線下交付項目提供有關(guān)產(chǎn)品體驗升級的設(shè)計能力，在第一時間響應(yīng)客戶，奔赴現(xiàn)場，通過專業(yè)化設(shè)計解決方案，為項目提供體驗助力，用設(shè)計幫助客戶創(chuàng)造價值。在過去的十年，阿里累計了從底層基礎(chǔ)設(shè)施，IoT到協(xié)同辦公，大數(shù)據(jù)，AI，到軟硬件一體化的云平臺。致力于在數(shù)字經(jīng)濟時代實現(xiàn)我們的夢想與使命：讓天下沒有難做的生意。這個夢想的漣漪，成為了今天阿里云設(shè)計中心肩負的責(zé)任：與合作伙伴一起，助力數(shù)字化的能力賦予更多政府和企業(yè)。

設(shè)計打造客戶價值

為什么要做這些事呢？數(shù)字經(jīng)濟的發(fā)展讓越來越多的企業(yè)意識到數(shù)字化轉(zhuǎn)型是長久發(fā)展方向下可采用的一種成本更低，方式更靈活的解決方案。政府也在加快推進全國一體化在線政務(wù)服務(wù)平臺建設(shè)，實現(xiàn)“讓群眾少跑腿，讓數(shù)據(jù)多跑路”，一證通辦，一網(wǎng)通辦，一事聯(lián)辦，推動政府治理現(xiàn)代化，建設(shè)人民滿意的服務(wù)型政府。

我們常會有相似的體感，一些傳統(tǒng)行業(yè)和對民眾服務(wù)機構(gòu)，在數(shù)字系統(tǒng)和服務(wù)體驗質(zhì)量上與科技互聯(lián)網(wǎng)公司還有著很大差距。往往承擔(dān)此類工作的軟件服務(wù)商，也更多是從架構(gòu)、數(shù)據(jù)出發(fā)，從而忽視產(chǎn)品體驗和使用感官的重要性。

因此，以政企客戶為主導(dǎo)的產(chǎn)品設(shè)計需求愈加凸顯，既要滿足客戶業(yè)務(wù)需求，也要滿足用戶體驗需求，設(shè)計已成為重要的一環(huán)，從底層到表層，滲透在項目交付的方方面面。我們依托于整個阿里云和數(shù)字轉(zhuǎn)型的契機，堅信只有把自身的設(shè)計經(jīng)驗和能力注入進客戶產(chǎn)品中，才能更好助力阿里云政企客戶和伙伴，賦能整個交付生態(tài)。

專業(yè)賦能業(yè)務(wù)探索

ACD客戶體驗設(shè)計團隊非常重視能如何將ACD沉淀的設(shè)計經(jīng)驗、方法、能力輸出到行業(yè)中，以阿里云在數(shù)字轉(zhuǎn)型中的重要作用為契機，更好的幫助行業(yè)企業(yè)、政府為公眾提供更優(yōu)質(zhì)的產(chǎn)品與服務(wù)體驗。這樣體量的項目，設(shè)計師能提供哪些具體能力呢？

面向全球200多個國家和地區(qū)的數(shù)百款云計算產(chǎn)品，我們研發(fā)了Xconsole云產(chǎn)品一站式設(shè)計及研發(fā)解決方案，為產(chǎn)品體驗保駕護航；面對企業(yè)全面上云，我們搭建了一套完整而靈活的設(shè)計系統(tǒng)去組織云上生長的各種企業(yè)級服務(wù)，即B-Design企業(yè)級設(shè)計系統(tǒng)；面向成百上千的并行項目，我們基于項目管理作業(yè)流程研發(fā)了內(nèi)部設(shè)計標(biāo)準(zhǔn)化交付平臺和數(shù)字生成平臺，為項目提供豐富設(shè)計物料和經(jīng)驗累積；面對錯綜復(fù)雜多變的多端應(yīng)用，我們在實踐中沉淀下來一套云產(chǎn)品使用體驗度量系統(tǒng)，包含UES度量模型，體驗管理機制和易用性測試和數(shù)字化管理的體驗工具集，同時我們也打造了一款深植于云業(yè)務(wù)體驗管理場景的NPS調(diào)研工具；面向不同產(chǎn)品生態(tài)，我們探索制定了一套一致性測評方法與度量指標(biāo)，并歸納成了體系方法模型形成論文，以擴展摘要形式被CSCW收錄；面對特殊的用戶群體，我們進行了無障礙設(shè)計方法的研究探索；同時，我們與中國工業(yè)設(shè)計協(xié)會設(shè)計標(biāo)準(zhǔn)分會一起對外發(fā)布3項設(shè)計標(biāo)準(zhǔn)：《云計算管控平臺界面設(shè)計指南》《云計算軟件產(chǎn)品使用體驗度量模型及方法》《云計算軟件產(chǎn)品易用性度量》，另外3項《數(shù)據(jù)可視化大屏設(shè)計指南》，《云計算管控平臺無障礙設(shè)計規(guī)范與評估方法》，《云計算體驗設(shè)計標(biāo)準(zhǔn)作業(yè)程序》還在籌備中，計劃和業(yè)界一起合作發(fā)布…..

在設(shè)計專業(yè)道路上，我們持續(xù)深耕探索，并結(jié)合數(shù)百個項目實踐經(jīng)歷，通過DPM （design platform for manufacture）設(shè)計生產(chǎn)平臺，高效產(chǎn)出行業(yè)數(shù)字設(shè)計解決方案，涵蓋領(lǐng)域包括、金融、數(shù)字政府、新零售等多個領(lǐng)域，我們的方法論和經(jīng)驗體系經(jīng)過多次驗證，確保方案的準(zhǔn)確與高質(zhì)。針對不同的客戶和項目階段，我們可以輸出獨立完整的產(chǎn)品咨詢體系，拉升項目、客戶、設(shè)計中心共同對體驗質(zhì)量可關(guān)注度；遇到綜合項目也可通過NPS和體驗度量測試，更好的面向客戶的目標(biāo)群體，提供服務(wù)。我們面對商業(yè)服務(wù)提升設(shè)計增值，對公眾服務(wù)提升使用效率與滿意感知。

項目實踐成就客戶

1.數(shù)據(jù)可視化助力疫情防控：你今天有綠碼嗎？

2020年突如其來的新型冠狀病毒讓每個人都措手不及，疫情防控，關(guān)鍵是人的防控，任何一個環(huán)節(jié)的疏漏，任何一個節(jié)點的缺失，都可能讓已有的戰(zhàn)果付之東流甚至化為烏有。一個簡單的二維碼為不同人群在通行提供動態(tài)化數(shù)字憑證，小小“健康碼”派上大用場，通過科技的手段助力提升疫情防控效果，對打贏這場戰(zhàn)“疫”必將發(fā)揮至關(guān)重要的作用。

湖北“健康碼”的推行，是“數(shù)字政府”改革建設(shè)賦能疫情防控和社會治理的一項創(chuàng)新實踐。一方面，“碼”上通行更便捷，上班“企業(yè)打碼”、下班“社區(qū)掃碼”、出行“健康亮碼”，另一方面“碼”上監(jiān)管更精準(zhǔn)，依托紅碼、藍碼、黃碼、綠碼關(guān)注重點人。在設(shè)計的過程中，首先需要明確健康碼的定義、關(guān)注目標(biāo)人群的操作習(xí)慣，確定各種碼顏色的優(yōu)先級以及權(quán)重，通過集成電子病歷、健康體檢、生活方式管理的相關(guān)數(shù)據(jù)，在關(guān)聯(lián)健康指標(biāo)和健康碼顏色的基礎(chǔ)上，探索建立個人健康指數(shù)排行，通過防疫健康碼的精細化設(shè)計更好助力疫情防控。

2.助力納稅人合理節(jié)稅，放心交稅，高效辦理

談到稅收問題，大部分人對稅務(wù)的相關(guān)法律法規(guī)了解不多，法律知識的不健全讓個人納稅申報“行走”艱難，高收入者對不主動申報者的處罰力度低。同時沒有稅務(wù)管理基礎(chǔ)型制度支持，想提高征收效果注定“心有余而力不足”。

基于現(xiàn)狀我們對個稅申報系統(tǒng)進行了服務(wù)體驗優(yōu)化升級，讓系統(tǒng)具有非常好的靈活性和可配置性，從界面外觀到交互體驗對每個細節(jié)進行打磨，秉承人性化的設(shè)計理念，始終以用戶需求為目標(biāo)而進行設(shè)計，讓用戶辦理事務(wù)過程更加高效，真正將政府服務(wù)于人的理念滲透到各方面。同時極大的方便了遠程辦理繳稅的納稅人，助力國家更好的保證打工人的納稅人權(quán)益，對于偷稅漏稅的個人和公司管控更加嚴(yán)格。

3.體驗365天“永不落幕云上投洽會”

中國國際投資貿(mào)易洽談會由商務(wù)部和主辦，有23年歷史，是國際展覽業(yè)協(xié)會（UFI）認證的全球規(guī)模最大的投資性展覽會。受到疫情的影響，同時得益于信息化技術(shù)的發(fā)展，“云展會”成為可能，更多的人不用去會場，在家可以體驗到更便捷、高效、實時的參會與交流。

阿里云攜手中國國際貿(mào)易組織傾力打造了“云上投恰會”APP，參展方可實現(xiàn)云上展覽、項目對接、招商洽談、論壇研討和云端簽約，目前已經(jīng)有近60家展商入駐3D云展廳，集成各類投資項目。5G、人工智能、實時渲染3D大屏、VR等新技術(shù)手段，提供了身臨其境的云上參展體驗。其中VR技術(shù)的應(yīng)用給用戶制造出了更加沉浸式體驗，通過一系列視覺線索及交互反饋來增強虛擬世界與現(xiàn)實世界的關(guān)聯(lián)，從人類認知及行為的基礎(chǔ)原理中獲得理論指導(dǎo)，充分利用虛擬空間打造最符合人們在現(xiàn)實當(dāng)中的認知及行為規(guī)律的互動模式，讓用戶完全沉浸在虛擬世界中。

4.數(shù)據(jù)服務(wù)體驗升級 – 實現(xiàn)實時，靈活，多維用戶洞察

2021年1月，紅旗品牌以月銷突破32500輛的成績，邁入月銷3萬輛俱樂部，實現(xiàn)單月銷量再次突破；同比增長高達158%，當(dāng)汽車銷售購買成為很多人的需求，觀看數(shù)據(jù)整理報表及銷售量就會尤為復(fù)雜，所有的業(yè)務(wù)歸根結(jié)底都是為了業(yè)務(wù)數(shù)據(jù)的提升和對比，數(shù)據(jù)查詢成為了領(lǐng)導(dǎo)關(guān)心的話題。

數(shù)據(jù)看板是公司驅(qū)動價值增長的重要工具，通過看板檢測核心數(shù)據(jù)、及時洞察業(yè)務(wù)問題、溝通各部門的解決方案，在領(lǐng)導(dǎo)與部門查看數(shù)據(jù)的過程中，可視化的方式混亂常常是最大的問題，通過專業(yè)的設(shè)計原則和色彩搭配讓數(shù)據(jù)看板變得更加專業(yè)，提高應(yīng)用的效率是阿里云設(shè)計解決一汽集團痛點的最佳方式。

5.卓越家居品牌升級-讓美好的生活不僅有詩和遠方

美好的生活需要詩和遠方，更需要沙發(fā)和床”是紅星美凱龍董事長提出的品牌理念，如何讓大眾增強品牌的認同感，將消費者心中的產(chǎn)品效果無限放大是留給阿里云設(shè)計的困難之一。品牌使命也是品牌主張，是一個產(chǎn)品存在的價值與意義，建立起一個獨特且立體的形象，不斷通過渠道和產(chǎn)品與消費者建立聯(lián)系，就能夠在消費心中留下品牌烙印，建立認同。

在多端設(shè)計的過程中，我們不斷增強品牌的調(diào)性定位、提取品牌視覺的DNA，通過品牌色、插畫、紋理等設(shè)計視覺元素減少市場上同質(zhì)化的設(shè)計，將界面設(shè)計與品牌的提升密切結(jié)合，增強品牌友好度、擴大品牌影響力、深入洞察與了解目標(biāo)用戶。

6.金融技術(shù)協(xié)助行業(yè)服務(wù)轉(zhuǎn)型升級

隨著時代的發(fā)展,我們會發(fā)現(xiàn)保險行業(yè)出現(xiàn)了越來越多的保險類型和方式,一旦遇到重病,醫(yī)療費就如同流水般一去不回,對于普通家庭來說是一筆不小的開支,那么到底怎么買保險才比較劃算、比較實用、每個類型哪種好？怎么篩選適合自己經(jīng)濟又保障的保險業(yè)務(wù)，也是生活中的必修課。

阿里云助力新華保險為用戶提供了豐富并可以篩選的業(yè)務(wù)，全面、優(yōu)質(zhì)的風(fēng)險保障和理財服務(wù)，便捷、溫馨的服務(wù)體驗。7X24小時全年無休的投保咨詢及理財顧問預(yù)約、理賠報案、保單查詢、單證補發(fā)、聯(lián)系信息修改、回訪等內(nèi)容。保險APP的服務(wù)升級開發(fā)方便行業(yè)轉(zhuǎn)型、增加用戶粘度、完善了銷售功能、同時創(chuàng)新購買模式讓保險與互聯(lián)網(wǎng)真正實現(xiàn)接軌，讓保險行業(yè)也逐漸繁榮起來。

篇章延續(xù)新的起始

客戶交付設(shè)計開啟了 to B時代產(chǎn)品設(shè)計篇章，接下來我們將會面對更廣闊的項目場景，也有更多專業(yè)領(lǐng)域需要挖掘沉淀。在后續(xù)文章里我們會分享一系列在實戰(zhàn)經(jīng)驗中得出的方法和心得，包括：設(shè)計服務(wù)體系，競爭力打造，產(chǎn)品孵化與定價，商業(yè)項目數(shù)據(jù)運營，業(yè)務(wù)發(fā)展，交付設(shè)計能力模型與人才成長路徑，設(shè)計的商業(yè)價值探索，政企項目分析，設(shè)計中臺建設(shè)等等。希望能與你一起在數(shù)字化轉(zhuǎn)型設(shè)計的路上越走越遠。

作者：阿里云

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》客戶交付設(shè)計 —— 開啟數(shù)字化轉(zhuǎn)型設(shè)計篇章

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

1.格式塔原則 

相似原則

人的眼睛會把具有相似特征的元素當(dāng)成一個整體，認為這些元素具有相同的作用。

▲ 界面中的綠色圖標(biāo)具有相同的功能，方便用戶快速認知和操作。因此在設(shè)計具有相同功能或內(nèi)容的界面元素時，應(yīng)該保持一致性。

應(yīng)用位置：導(dǎo)航、鏈接、按鈕、內(nèi)容頁。

連續(xù)原則

用戶傾向于把連續(xù)排列的元素視為一個整體。這條原則與對稱性和相似性密切相關(guān)。通過在序列上創(chuàng)建相似且重復(fù)的元素，引導(dǎo)用戶的視線方向，使操作更加連貫和清晰。

▲ 只露出一部分的卡片會向用戶發(fā)出信號，表示滑動可以查看更多的書。

應(yīng)用位置：菜單和子菜單、列表、產(chǎn)品頁、輪播頁。

封閉原則

當(dāng)看到不完整的圖像時，我們會依據(jù)已有的經(jīng)驗把不完全封閉的圖像當(dāng)成一個統(tǒng)一的整體，這是在平面或logo設(shè)計中常用到的原則。

▲ 盡管頁面右上方的餅圖只顯示了一部分，我們?nèi)匀荒軌蜉p松地識別出來。

應(yīng)用位置：圖標(biāo)、加載、數(shù)據(jù)可視化。

鄰近原則

人們會將彼此相鄰的元素視為一組。在設(shè)計時要注意使用間距將元素組合在一起。使用較大的間距來分隔大的內(nèi)容組，再使用較小的間距來分隔大內(nèi)容組中的小內(nèi)容組。

▲ 頁面上的每個卡片中都含有4組信息，很難快速識別具體的內(nèi)容。通過調(diào)整間距，可以將這些信息清楚地分為2組。

應(yīng)用位置：導(dǎo)航、卡片、橫幅、列表頁、分頁。

對稱原則

我們喜歡看到對稱且平衡的事物。它是所設(shè)計領(lǐng)域中最常用和最安全的原則，有助于營造一種穩(wěn)定感和秩序感。

▲ 對稱的布局不僅增強了用戶的印象，還強調(diào)了中間的視頻播放按鈕。

應(yīng)用位置：產(chǎn)品展示頁、列表、導(dǎo)航以及任何內(nèi)容豐富的頁面。

共同區(qū)域原則

通過信息分組和內(nèi)容組織，實現(xiàn)內(nèi)容的組合，有助于提升內(nèi)容的層次結(jié)構(gòu)和可掃描性。

▲ 卡片式UI有助于將信息分組并創(chuàng)建內(nèi)容的層級深度。

應(yīng)用位置：卡片、內(nèi)容、服務(wù)、摘要。

共同命運原則

向同一方向移動的元素被認為比靜止或向另一個方向上移動的元素更相關(guān)。這個原則有利于建立不同分組或狀態(tài)之間的關(guān)系。

▲ 頁面右側(cè)的3個圖形方向相同，有利于展示信息并讓用戶了解它們的功能。

應(yīng)用位置：導(dǎo)航/下拉、折疊條目、工具提示、產(chǎn)品滑塊、滾動條。

2.焦點 

看東西時，我們的視線往往會首先關(guān)注最突出的元素。理解這種行為有助于我們在設(shè)計中創(chuàng)建一個“錨點”，從而引導(dǎo)用戶按照我們設(shè)計的場景查看內(nèi)容。

▲ 通過人物插畫將用戶的注意力引導(dǎo)到賬單和人數(shù)等主要信息上。

應(yīng)用位置：內(nèi)容、登錄頁、產(chǎn)品頁。

3.馮·雷斯托夫效應(yīng) 

又稱隔離效應(yīng)，相對于普通事件或物體，獨特、有特色的事件或物體更容易被人記住。應(yīng)用此原則的元素通常獨立存在，不需要向用戶導(dǎo)航額外的信息。

▲ 中間的升級插畫部分在整個頁面上是獨立存在的，并且吸引注意力是號召性用語或轉(zhuǎn)化的關(guān)鍵。

應(yīng)用位置：價格表、促銷頁、圖標(biāo)入口。

4.本能反應(yīng) 

根據(jù)現(xiàn)實中的用戶行為創(chuàng)建視覺上引人入勝的體驗。例如看幽默類視頻的時候，如果在視頻的高潮伴有笑聲音效，我們也會更容易跟著笑起來。

如果能讓用戶感覺良好和舒適，他們也會更喜歡我們的設(shè)計。

應(yīng)用位置：產(chǎn)品圖、插圖、攝影。

5.色彩心理學(xué) 

許多研究表明，顏色對我們的潛意識有特殊的影響。性別、宗教和文化對顏色的理解也有所不同。

▲ 關(guān)于顏色的運用，這張色彩心理學(xué)海報介紹了豐富的方法。同時也要記住最廣泛使用的系統(tǒng)顏色：紅色代表錯誤；綠色代表成功；藍色代表進行中；黃色代表警告。

6.形狀心理學(xué) 

▲ 同顏色一樣，人們的潛意識對不同的形狀也有不同的反應(yīng)：

圓形、橢圓形：傳達積極的信息，通常與社區(qū)或關(guān)系有關(guān)；

正方形、三角形：傳達強烈的信息，通常與強度和穩(wěn)定性有關(guān)；

垂直線：表示強度或力量。

水平線：表示平靜、相等或安靜。

7.雙重編碼理論 

這個理論解釋了人類需要視覺和語言信息來盡快處理信息。為了最大限度地提高設(shè)計的有效性，不應(yīng)該刪除必要的說明性文字。

▲ 大多數(shù)App的底部導(dǎo)航欄都利用圖標(biāo)與文字相結(jié)合的方式讓用戶快速知道功能。

另一個好的設(shè)計案例：

8.并行設(shè)計 

人眼傾向于看到平行因素比其他因素更相關(guān)。這一原理經(jīng)常用來對同一頁面中的兩組不同內(nèi)容進行分類。

▲ 使用垂直排列的卡片代表相同的問題，水平排列的卡片代表不同的問題。

9.公共區(qū)域 

這一原理類似于格式塔原則中的相似原則。公共區(qū)域通過使用線、形狀或顏色劃分的方式創(chuàng)建。

▲ 如果頁面需要用戶不斷滾動來查看內(nèi)容，可以考慮使用顏色來更清楚地劃分這些內(nèi)容，而不僅僅是使用間距。

10.掃描模式 

根據(jù)NNGroup、UXPin等設(shè)計團體的研究，最常用的兩種掃描模式是“F型”和“Z型”：

“F型”應(yīng)用最為廣泛，尤其是對于內(nèi)容豐富的網(wǎng)站。

“Z型”用于那些文字信息少，最后需要強調(diào)用戶點擊類的網(wǎng)站。

關(guān)于掃描模式更詳細的內(nèi)容可以查看我之前的文章：如何構(gòu)建直觀有效的導(dǎo)航結(jié)構(gòu)（上）

最后 

第一印象是最令人難忘的，好的體驗可以在用戶與產(chǎn)品之間建立持久的聯(lián)系。

作者：Hoang Nguyen

譯者：Clippp

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》讓設(shè)計方案更具說服力的10個心理學(xué)原理！

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

一款產(chǎn)品，本質(zhì)是提供服務(wù)以解決某個用戶問題。因此產(chǎn)品體驗設(shè)計師對整個業(yè)務(wù)的核心價值一定是解決用戶/業(yè)務(wù)問題，其次才是帶來美的感受。“產(chǎn)品設(shè)計師的價值取決于業(yè)務(wù)需要他貢獻出多大的價值”。如果你認同這個觀點，你就能理解接下來的兩個觀點。

交互創(chuàng)造價值的機會大于視覺

交互在工作流程上在視覺上游，產(chǎn)品問題的討論一定是先基于交互，所以在交互領(lǐng)域解決問題的機會遠遠多于視覺。因此在產(chǎn)品體驗設(shè)計中，交互創(chuàng)造價值的機會往往大于視覺。所以我的建議是：體驗設(shè)計師可以做純交互，但盡可能不要做純視覺，工作中一定要觸及交互部分。

B端體驗設(shè)計創(chuàng)造價值的機會大于C端

價值，應(yīng)該是所有大廠設(shè)計師都被問到過的點。不管你的價值陳述對象是誰，本質(zhì)上都是陳述給業(yè)務(wù)方，區(qū)別僅僅是由你直接陳述給業(yè)務(wù)方，還是由你的上級將大家的價值匯總打包陳述給業(yè)務(wù)方。

所以，業(yè)務(wù)方愿意買單的價值才算價值。

作為一個C端B端都待過的設(shè)計師，我說說二者的特點：

C端產(chǎn)品功能少+簡單(面向小白)、產(chǎn)品體驗有競品可參考，因此體驗設(shè)計難度可控。

B端產(chǎn)品功能復(fù)雜+龐大、競品參考成本高 (賽道小眾(無競品)、專業(yè)門檻(跨行業(yè))、收費門檻(企業(yè)版定制))，因此產(chǎn)品體驗難度更大，業(yè)務(wù)只能依賴設(shè)計師所給出的體驗方案。

從前文的觀點“產(chǎn)品設(shè)計師的價值取決于業(yè)務(wù)需要他貢獻多大的價值”來看，B端體驗設(shè)計的難度更高，所以B端體驗設(shè)計創(chuàng)造價值的機會應(yīng)該更大。

坊間傳言：tb的設(shè)計團隊據(jù)說有上百人… dy的設(shè)計團隊據(jù)說有數(shù)百人… wx的設(shè)計師連按鈕是圓角還是方角都要展開討論，還要做ABtest… 三魚講個小故事吧：

在C端的工作就好像在一艘裝滿水手的大船上

你在船上被分配到了負責(zé)擦拭桅桿的工作

你需要思考如何在擦桅桿的工作中展現(xiàn)自己的價值

于是你研究了不同擦拭工具的工作效率

研究不同溫度、濕度下的桅桿油漆磨損情況

你越研究越癡迷

這份工作看似簡單，但其實

有很多可以深挖的點

有很多值得研究的課題

甚至你的價值看起來還很好衡量

畢竟在大船上

哪怕是一根桅桿都會被天天使用

看來這真是一份有價值的工作

畢竟

體驗設(shè)計就應(yīng)該做到嚴(yán)謹(jǐn)且錙銖必較嘛！

可以思考一下，倘若一個領(lǐng)域能創(chuàng)造價值的機會已經(jīng)很少了，那就意味著這個領(lǐng)域的競爭會變得殘酷且事不由人。大家論證價值的成本越來越高，邊際收益越來越低，俗稱“內(nèi)卷”…

再來看看B端，B端體驗設(shè)計師往往可以負責(zé)一個完整產(chǎn)品(甚至多個)，設(shè)計師會負責(zé)產(chǎn)品的框架搭建、邏輯梳理、頁面設(shè)計、品牌、官網(wǎng)、運營等一系列設(shè)計。有趣的是，由于B端設(shè)計往往都是創(chuàng)新項目，產(chǎn)品經(jīng)理其實對這個產(chǎn)品該是什么樣的也沒有清晰的認知，最終的產(chǎn)品形態(tài)往往是設(shè)計師和產(chǎn)品經(jīng)理一同討論出來的，設(shè)計對業(yè)務(wù)的價值不言而喻。

如果還是套用那個故事，在B端工作，你所負責(zé)的可能是一艘小船，你的注意力不再是這艘小船的桅桿是否擦得夠嚴(yán)謹(jǐn)科學(xué)，而是這條小船的航道、動力、擴建規(guī)劃等，這些將會更有意思。

工作難度決定價值，價值與職業(yè)壽命掛鉤，職業(yè)壽命決定了焦慮感。那三魚的建議也不言而喻。

動態(tài)思維是B端交互很重要的能力

一直以來我們把動效歸為視覺能力。但事實上，動效背后的動態(tài)思維應(yīng)該是交互尤其是B端交互必備的能力?？纯聪旅孢@幾個案例中設(shè)計師所解決的問題。

案例1

下圖是AE的界面，當(dāng)用戶不選中任何圖層時，點擊“形狀工具”，可以新建一個矢量圖形，但當(dāng)用戶選中某個圖層時，再點擊“形狀工具”，該功能則變成了給用戶選中的圖層創(chuàng)建蒙版。我相信用過AE的人，都見識過這個鬼畜的交互：即同一個按鈕卻有兩種不同的含義。

Adobe After Effects-“形狀工具”

在我所負責(zé)的一款數(shù)據(jù)分析產(chǎn)品中，也遇到了類似的問題 (即用戶點擊圖表icon可以新建一個圖表，用戶選中某個已有圖表時，再點擊圖表icon則是切換該圖表的類型)。

因此在2.0版我們嘗試將 “創(chuàng)建圖表” 和 “切換圖表類型” 兩種場景區(qū)分開?？梢钥吹较聢D中，圖1和圖2都解決了這個的問題。但圖1的方式是直接將其拆分成兩套功能區(qū)，雖然解決了問題，但也讓導(dǎo)航的內(nèi)容變得冗余。而圖2的方式則更為巧妙，拆分功能區(qū)的同時，利用鼠標(biāo)的點擊和失焦，用動效的方式讓用戶感知到場景的切換，不影響操作的同時還節(jié)約了導(dǎo)航空間。

案例2

在一款數(shù)據(jù)產(chǎn)品中，我們上線了一款新功能，對用戶有很大的學(xué)習(xí)成本，于是我們計劃在承接頁放一張功能全局流程圖，它既可以對新功能有一個系統(tǒng)的介紹，同時也可作為功能入口快速定位想要的模塊。但問題來了，由于功能復(fù)雜，導(dǎo)致流程圖上的信息體量太大，倘若完整展示，則會超出一屏空間，用戶就很難看清完整的功能流程。最終我們通過動效手段，兼顧了“模塊介紹”和“流程展示”，這種展現(xiàn)形式也被業(yè)內(nèi)好評，還被華為云等多家云服務(wù)廠商所借鑒，現(xiàn)在大家在很多B端產(chǎn)品中都能看到我們的影子。

案例3

以上兩個案例比較復(fù)雜，再舉兩個簡單的例子：B端產(chǎn)品限于專業(yè)性，表單信息通常很長，所以為了表單信息能盡可能完整展現(xiàn)，我們在下拉框展開的瞬間，往外“借”了一部分空間，以展示更多的信息。

案例4

這是一個“邏輯表”，一個數(shù)據(jù)模型中通常有N個邏輯表，信息密度極大，因此我們要盡可能節(jié)約空間，所以我們在不影響用戶使用效率的基礎(chǔ)上，把搜索框“收”了起來。

有沒有發(fā)現(xiàn)這幾個案例解決的都是交互問題，而且是直接影響用戶感知的交互細節(jié)問題。我們可以看到，在不具備動態(tài)思維的時候，交互在面對“信息過載”這個B端繞不過去的課題時，唯一的解法只有“平鋪”一招，但這招在面對復(fù)雜問題時明顯不夠用。而一旦具備動態(tài)思維，交互設(shè)計師就可以從“時間(出現(xiàn)順序) + 空間(疊放層級)”兩個維度對信息的展示進行重組，解題能力將大幅提升。

不止是前文提到的“信息過載”… 諸如“提升操作效率”、“降低認知成本”、“數(shù)據(jù)可視化”也全是B端體驗中對用戶體驗影響極大的課題，對于交互的工作，也不僅僅只有產(chǎn)品框架的梳理，還有產(chǎn)品細節(jié)的打磨，尤其是一款產(chǎn)品成長到后期，一定會圍繞體驗細節(jié)精細化打磨，只靠“靜態(tài)平鋪”這一招恐怕遠遠不夠解題，而動態(tài)思維能拓寬B端交互在細節(jié)上的解題思路，對交互而言是很重要的能力。

視覺創(chuàng)造價值的機會大于交互

我瘋了嗎？明明前面才說了“交互的機會大于視覺”。三魚解釋解釋：對業(yè)務(wù)而言，交互的機會往往大于視覺，但對設(shè)計師自己而言，“交互”是一種必備的但不易被證明的能力，反之“視覺”是一種錦上添花的但容易出彩的能力。

再說詳細一點：在設(shè)計師的職場博弈中，“交互能力弱”有可能會成為你的短板，但“交互能力強”卻很難被塑造成你的長板，因為它的論證成本極高，尤其是在B端復(fù)雜的業(yè)務(wù)場景下。與之相比，“視覺能力弱”往往不會成為一個設(shè)計師的短板，但“視覺能力強”則可能成為一個設(shè)計師的長版，因為它的論證成本極低。不要小看論證成本，晉升答辯通常只有15-20分鐘，如果不能在極短時間內(nèi)論證清楚自己的能力(價值)，就會很吃虧。所以短時間內(nèi)把自己的能力(價值)論證清楚極為重要。

根據(jù)我的經(jīng)驗，短時間內(nèi)將“交互”論證到“強”的難度遠大于將“視覺”論證到“強”。所以成本最小、收益最大的方式應(yīng)該是將交互論證到“不弱”+將視覺論證到“強”的能力組合。

但現(xiàn)實是幾乎所有大公司的體驗團隊，視覺設(shè)計師往往被交互設(shè)計師“壓著打”。因為“交互”是必備能力，“視覺”是錦上添花能力，“視覺能力弱”并不算短板，而“交互能力弱”卻是明顯的短板。在大部分設(shè)計師都談不上具備明顯長板的前提下，在職場博弈中，存在明顯短板的一方一定會輸，也就是說視覺一定會被交互壓著打。所以如前文所講，三魚建議：“體驗設(shè)計師的工作一定要觸及交互部分”。

所以標(biāo)題可以完善一下：“在交互已不是短板的前提下，視覺創(chuàng)造價值的機會大于交互”。

三魚的做法

（這一段是題外話）既然講到這里，大概能理解三魚的做法了吧？我在站酷所發(fā)的作品，都是英文排版+動效展示，目的就是只展現(xiàn)視覺的“強”，因為它是一種觀眾只需要“看”就能感受到的、論證成本極低的能力，很適合線上場景。倘若有聽過三魚線下分享的同學(xué)就會發(fā)現(xiàn)，同樣的作品我在線下會花很大的篇幅講出背后的交互思考，因為要想論證清楚交互的“強”，就離不開闡述業(yè)務(wù)原理，這是需要觀眾付出“看+聽+提問互動”的理解成本才能get到的，因此只有線下場景才比較適合展現(xiàn)出交互的“強”。

嗯，雖然前面說了交互的論證成本很大，但誰規(guī)定了“視覺”和“交互”必須要孤立論證。有機會我也分享一下體驗設(shè)計該如何論證交互的“強”。

B端的劣勢

我不喜歡很多人鼓吹的“B端是一片藍?！保路疝D(zhuǎn)行B端就進入職業(yè)發(fā)展的快車道一樣。三魚必須坦言，B端比起C端，同樣存在著極大的劣勢：開發(fā)成本大就不多講了，B端產(chǎn)品往往服務(wù)于一小戳群體的工作，這些用戶群體本身數(shù)量較小，而且很多還是新興職業(yè)，所以B端產(chǎn)品發(fā)展初期的用戶體量都很小。那么就帶來一個問題，一小戳用戶的收益往往短時間攤不掉研發(fā)成本，如果沒有公司戰(zhàn)略上的強投入，那么產(chǎn)品更新迭代將是極慢的，甚至90%的產(chǎn)品會因為收益不足，永遠停留在1.0版，也就意味著大部分B端產(chǎn)品可能連體驗流程都無法閉環(huán)，更別說打磨體驗了。這些問題在C端不容易遇到，但在B端卻很常見。

這也就導(dǎo)致了開發(fā)資源都優(yōu)先投入到功能研發(fā)中，留給體驗打磨的開發(fā)資源很有限，這會影響設(shè)計師的價值論證。我親眼見過一些設(shè)計師負責(zé)了很多1.0的B端項目，這些產(chǎn)品在幾個核心功能上線后，就停止更新迭代了，產(chǎn)品經(jīng)理和研發(fā)只在意核心功能能讓用戶用起來，至于體驗是否流暢，流程是否閉環(huán)，對他們而言并不重要。因此這些設(shè)計師忙了一年，卻沒有一個可以論證自己價值的體驗設(shè)計故事。這在B端是一個普遍現(xiàn)象，是B端相對于C端的劣勢。那些只講B端的好，不講B端存在問題的言論是不負責(zé)的。

當(dāng)然，哪怕存在這樣的劣勢，B端體驗設(shè)計依托復(fù)雜業(yè)務(wù)所帶來的價值優(yōu)勢依然是C端無法比擬的。而B端的劣勢其實是可以克服掉的，也就是接下來我要分享的“干貨”。

干貨來了

先說說上次那篇文章中，我認為通常情況下設(shè)計師要講出有價值的好故事主要靠兩點：

1. 時+運：B端產(chǎn)品更新迭代慢，你如果有充足的耐心陪伴它成長，且它足夠好運地成長起來了，且你也足夠好運沒有被中途變更業(yè)務(wù)，那么恭喜你總算等來了一個講出好故事的機會。但目前互聯(lián)網(wǎng)早就過了野蠻生長的時期，這種機會已經(jīng)越來越少了；

2. 權(quán)力：依靠你能調(diào)動的資源，以體量來堆出一個好的體驗故事，比如造輪子。好處是簡單粗暴，故事往降本提效上講業(yè)務(wù)肯定是買單的，缺點是輪子不能經(jīng)常造，造多了就不降本了。而且故事的效果受限于業(yè)務(wù)體量，有多大體量講多大故事，所以這種故事更多地適合大廠的管理層去講。但這似乎就把雞和蛋顛倒了，倘若設(shè)計都熬到這個位子上了，又何必來等我的“干貨”呢？

所以在過去兩者都不具備的前提下，我有一招自己的玩法。先來看一個案例：

https://www.zcool.com.cn/work/ZNTczNjg3MDg=.html

如果你把案例中的視頻看完，你大概能感受到這是一個涵蓋了產(chǎn)品框架、角色路徑、界面設(shè)計、品牌設(shè)計的還算蠻大而全的方案，雖然限于保密，對外只能看視覺，連Logo我都不敢多解釋兩句。所以我大致講講：一開始，產(chǎn)品經(jīng)理所提過來的需求僅僅只是幾個核心功能的設(shè)計需求，大概4-5頁原型圖，這時大部分設(shè)計師可能會按照原型圖把交互和視覺完善，然后產(chǎn)出設(shè)計稿的標(biāo)注和切圖，交付開發(fā)。

但三魚了解完業(yè)務(wù)之后，發(fā)現(xiàn)這個1.0的需求用戶的路徑并沒有閉環(huán)，于是我繼續(xù)深入理解業(yè)務(wù)，為產(chǎn)品定義了三種不同的使用角色，并根據(jù)每一種角色的訴求推導(dǎo)出場景和體驗路徑，從而重新梳理了整個產(chǎn)品框架，補全了缺失場景。

然后將產(chǎn)品能力集成并可視化展現(xiàn)出來，最終交付了一套流程閉環(huán)、交互創(chuàng)新、視覺感知強烈的體驗方案。

這套產(chǎn)出令業(yè)務(wù)很驚喜，也認可了整套方案并愿意為之投入開發(fā)資源。但三魚實話告訴你，目前大半年過去了，我所提交的方案被開發(fā)上線的只有60%，因為目前的用戶體量實在支撐不起更多開發(fā)人力投入了，所以哪怕那40%的功能是對的，也需要很久以后才能開發(fā)上線。

但沒有關(guān)系，對我而言，我已經(jīng)得到了一個流程閉環(huán)、交互創(chuàng)新、視覺感知強烈、能充分反映設(shè)計價值的故事了。

這便是三魚的思路，概括下來就一句話：把1.0的需求按3.0的質(zhì)量產(chǎn)出。畢竟當(dāng)現(xiàn)實條件無法支撐你展示自己的價值，那就自己創(chuàng)造機會去展示?？窟@個思路，當(dāng)別人還在耐心且不確定地等待業(yè)務(wù)慢慢成長時，三魚已經(jīng)在短時間內(nèi)積累了大量優(yōu)質(zhì)故事，這也讓我的職場博弈占了優(yōu)勢。

這里有個問題：就是我創(chuàng)造的價值，并不是業(yè)務(wù)方當(dāng)下買單的價值，似乎與前面我所說的觀點有出入。

這里我要再講一個觀點：設(shè)計對業(yè)務(wù)的價值不一定以設(shè)計師對當(dāng)前業(yè)務(wù)的價值為轉(zhuǎn)移。通俗來說，所有業(yè)務(wù)方都希望自己的產(chǎn)品是功能完善、流程閉環(huán)、體驗舒適的，這個訴求可能會因為當(dāng)下開發(fā)成本的短缺而被抑制，但卻是可預(yù)見的只要條件成熟業(yè)務(wù)就一定會產(chǎn)生的訴求。因此設(shè)計師主動往前走一步的做法一定是業(yè)務(wù)方所認可的，哪怕最后沒有開發(fā)人力落地這些設(shè)計，業(yè)務(wù)方也清楚是現(xiàn)階段的業(yè)務(wù)水平所導(dǎo)致的，而不是去否定設(shè)計的價值。而對于設(shè)計師而言，只要你提供的設(shè)計方案是超預(yù)期的，總有一天會有優(yōu)質(zhì)的業(yè)務(wù)場景愿意為之買單 (意會) … 總之，“把1.0的需求按3.0的標(biāo)準(zhǔn)交付”是一條經(jīng)過三魚驗證過的行之有效的手段。

以上輸出的都是認知，認知的提升會帶來成長的幻覺。但事實上，哪怕你知道了動畫對交互的提升巨大，但不具備動畫能力也是空談；哪怕你知道視覺創(chuàng)造價值的機會更大，視覺能力不夠成為你的長板也是空談；哪怕你知道把1.0的需求按3.0來產(chǎn)出收益巨大，你不具備3.0的視野也是空談… 認知更像是臨門一腳的點破，手上功夫才是你的基本盤。

手上功夫的成長

最后聊聊成長，三魚的經(jīng)歷可能會給你一些參照吧。先附上我的培訓(xùn)班作品，這就是三魚最初的水平，那時我已是工作了兩年轉(zhuǎn)行的狀態(tài)，年齡和經(jīng)驗都很吃虧。

培訓(xùn)班作品-《愛情小管家》

但三魚運氣還算好，趕在互聯(lián)網(wǎng)的末班車進了大廠。這保證了我的成長環(huán)境至少是不錯的，也更有機會接觸到一些好的產(chǎn)品、優(yōu)秀的設(shè)計師，能學(xué)到更多的東西 (說真的，當(dāng)初能進大廠，也許有能力的加持，但更多的要歸功于時代的運氣)。

但進了大廠也未必就踏上了快車道，大廠的競爭很激烈，好的項目機會從來都是搶手貨。從培訓(xùn)班出來的我，因為沒有工作經(jīng)驗，被分配去做廣告圖優(yōu)化，三魚先解釋一下這個工作：就是客戶在我們的產(chǎn)品中投放廣告，有些客戶投放的廣告點擊率并不理想，為了確?？蛻舻耐茝V費花得值 (不然人家不投了)，于是我們會對一些不理想的廣告圖進行設(shè)計優(yōu)化。對設(shè)計師來說，這些廣告圖的質(zhì)量參差不齊，且沒有源文件，優(yōu)化工作是一件繁瑣且低價值的事。這種事，很適合我這個剛轉(zhuǎn)行的菜鳥來干。下圖是一些我優(yōu)化過的廣告圖，這就是三魚在大廠一開始的主要工作。

廣告圖優(yōu)化

這對當(dāng)時的我來說已經(jīng)很滿足了，畢竟能創(chuàng)造價值、能挺過試用期三魚就謝天謝地了。于是我很認真地完成手上的工作，還沉淀了一套廣告圖優(yōu)化“方法論”，比如把廣告圖分為電商、工具、游戲、社交等，每一種類別有特定的優(yōu)化方式，還附帶最后的數(shù)據(jù)驗證… 嗯，這是我第一次接觸 “大廠套路”。

看我廣告圖優(yōu)化得還不錯，于是主管給我新增了一項任務(wù)：我們團隊每天都要在Facebook上發(fā)一條動態(tài)，每條動態(tài)都會附一張配圖，所以每周我需要畫5張運營配圖。

日常運營支持

日常運營配圖所要求的質(zhì)量并不高，倘若只是按可交差的水準(zhǔn)來產(chǎn)出設(shè)計，這5張圖其實費不了多少功夫，于是三魚決定利用富余的時間去錘煉自己的專業(yè)能力。具體來說：每周一業(yè)務(wù)方會告知本周需要繪制的5個主題，我會用一天的時間把其中4個主題快速地畫完交差，然后留一個自己最感興趣的主題，去設(shè)計平臺上學(xué)習(xí)新的風(fēng)格，并結(jié)合主題去創(chuàng)作。比如下圖的產(chǎn)品矩陣紀(jì)念日：https://www.zcool.com.cn/work/ZMTQ4MTQyMDg=.html  。就是花了心思去做的。

產(chǎn)品矩陣紀(jì)念日

再比如美食節(jié)活動：https://www.zcool.com.cn/work/ZMTUwNDk4NzY=.html  。我不僅嘗試了新的風(fēng)格，還給它加入了愛情故事。

還有一些名人名著的紀(jì)念日閃屏：https://www.zcool.com.cn/work/ZMTY3MTkzMjg=.html  。

于是我就一直用這種刻意練習(xí)的方式，把自己的手上功夫越練越扎實了。而對于業(yè)務(wù)方來說，本來預(yù)期就不高，偶爾還能收到三魚超預(yù)期的設(shè)計交付，自然是很欣喜的，于是對我的評價也很高。

隨著我的交付質(zhì)量不斷提升，業(yè)務(wù)方的預(yù)期也越來越高。一次在別的設(shè)計師的運營事故中，業(yè)務(wù)方指名要三魚來設(shè)計。于是我站出來救了場，這次事件過后，大家突然意識到我不是一個初入行的菜鳥了。

地球一小時

但三魚的目標(biāo)還是想往產(chǎn)品體驗方向發(fā)展，但產(chǎn)品設(shè)計的機會是很稀缺的。但三魚隨即等來了一個機會：我們的核心產(chǎn)品要進行一次體驗升級，這種級別的項目只有最資深的設(shè)計師才能參與的。所以我們的主管選了三位資深設(shè)計師來比稿定方案。

三魚很積極地表示自己也想?yún)⑴c比稿，不僅表達了自己的職業(yè)規(guī)劃，還保證參與比稿不會耽誤手上的工作。由于我之前的工作中已經(jīng)積累了不錯的口碑，主管同意了我的請求。

我很珍惜這樣的機會，于是一口氣出了兩套方案 (都在站酷中)。

但現(xiàn)實很殘酷，大家并不認可我作為一個設(shè)計新人的實力，我的方案在一開始的內(nèi)部評審中就被提前“斃掉”了 (其實這很正常，沒有人會相信一個新入行的設(shè)計師的實力)。不過主管考慮到我認真的態(tài)度，雖然讓我失去了上臺提案資格，但還是把我的兩套方案作為“更多風(fēng)格探索”放在PPT的最后了…

三魚的兩套方案

但戲劇性的一幕又來了，提案的過程很不順利?？赡苁且驗槟菚r流行扁平風(fēng)，但過于千篇一律導(dǎo)致幾個大領(lǐng)導(dǎo)看膩了，反而認為我這種帶質(zhì)感的方案讓人耳目一新。結(jié)果我的陪跑方案居然奇跡般地被采納了…

這可把三魚牛逼壞了，當(dāng)晚我把這個結(jié)果告訴小白，小白叮囑我：“這個時候很尷尬，這么重要的項目不可能完全交給你這個新人來負責(zé)，你現(xiàn)在最好的做法是一定要低調(diào)，明天去了公司別吭聲，等你的主管來找你聊，聽安排就是了，切記切記，我看你已經(jīng)飄得不行了”！

于是第二天三魚全程裝蒜，默默地等待著。果然！主管來找我了，希望我能加入到產(chǎn)品改版的項目中來，她會安排一位資深設(shè)計師帶著我一起做，至于我手上目前的工作，就交接給其他設(shè)計師吧。于是三魚開開心心地服從了安排。

噢對，由于原來業(yè)務(wù)方對我實在太滿意了，這次的業(yè)務(wù)調(diào)整，那些業(yè)務(wù)方紛紛跑去請求我的主管“讓三魚再為我們畫最后一張吧…” 我也被主管戲稱為設(shè)計團隊的“頭牌”。

寫到這里，三魚算不算靠努力與運氣就走上快車道了？事實上還早… 目前為止我的手上功夫還僅限于PS用得不錯罷了，其它能力為0。而能力的欠缺很快就讓我遇到了難題。

那就是：動效設(shè)計師不干了。

以前的一些大廠會設(shè)置專門的動效設(shè)計崗，由一位擅長動畫軟件的同學(xué)來幫其他設(shè)計師實現(xiàn)動畫上的創(chuàng)意演示，但這種“只能替別人實現(xiàn)創(chuàng)意”的工作模式，對動效設(shè)計師的職業(yè)成長不利，于是越來越多動效設(shè)計師轉(zhuǎn)行去做產(chǎn)品體驗。

這可苦了那些不會做動效的設(shè)計師 (包括三魚)，工具類的產(chǎn)品，對動效的要求比較高，倘若沒人替自己實現(xiàn)腦海里的動畫創(chuàng)意，工作對接就很吃力了。

所以只好去學(xué)。三魚覺得動效比3D還難學(xué)，它難在幾乎找不到針對性的動畫教程，那時我能從網(wǎng)上找到的動畫教程全是教“影視后期”的。可沒辦法，只能硬著頭皮學(xué)，不然我的創(chuàng)意就不得不妥協(xié)于手上功夫了。于是三魚一路東拼西湊，艱難地把動效學(xué)會了。

下圖是我做的第一個動效，一開始我只會簡單的位移旋轉(zhuǎn)，動畫雖然生硬，但好在PS畫的素材質(zhì)量本身不錯。

這是一年以后的水平，那時我已經(jīng)能3D+動效結(jié)合著玩了。

說到3D能力，也是在這期間，我和小白一起報名了第一期的白無常C4D課程培訓(xùn)班 (三魚喜歡抱團學(xué)，可以互相監(jiān)督，一個人學(xué)很容易半途而廢)，我還把學(xué)到的東西應(yīng)用到了實際工作案例中。

當(dāng)我把這兩張圖發(fā)給白無常老師看的時候，老師很詫異：“我沒有教角色建模呀”？其實圖里的熊是PS畫的，說明那時我的PS水平已經(jīng)比較強了。

說到PS繪畫，這種風(fēng)格受李舜影響比較大。在李舜的風(fēng)格剛出現(xiàn)的時候，我覺得很驚艷，就去學(xué)習(xí)了她的畫法 (她寫過一篇教程，感興趣的朋友可以去她的站酷找找)。下圖的IP算比較出名的了，因為這套作品時不時被我發(fā)現(xiàn)放在了某些淘寶店里掛羊賣狗…

那段時間是我過得最快樂的時候，我同時負責(zé)產(chǎn)品體驗和品牌設(shè)計，包容的大廠環(huán)境也給了我學(xué)習(xí)和應(yīng)用新技能的空間，一年的時間我的手上功夫突飛猛進。

再后來去了福廠，那是三魚最痛苦、但也是成長最大的經(jīng)歷：

我遇到了一個很糟糕的主管，在福場的三年多時間里，三魚一方面依托平臺加速成長，一方面對抗來自主管的PUA，并最終完成了反殺。細節(jié)不多講了，說說最后的結(jié)果吧：這三年里，我的績效全是最優(yōu)(憑借著無法否定的能力和成果，三魚逼著主管給自己打了好績效)，反觀這位主管，三年里有兩年拿了最差績效，最后被迫轉(zhuǎn)崗…

我在福廠的成長不僅是手上功夫，更多的成長是“認知”，而后者對我的職業(yè)突破起了決定性作用。但這段經(jīng)歷很痛苦，如果說在百度的成長是技能上的成長，它是一個逐漸變好的過程，是愉快的，那么在福廠的經(jīng)歷更像是把人打碎以后的重塑，因為認知的成長一定是伴隨著否定、懷疑、焦慮的，三魚在其中艱難地探索出了一條可能是對的的路，以后有機會再慢慢分享吧。

回想起來，三魚算幸運的，我趕上了互聯(lián)網(wǎng)的末班車，在狼廠寬容的環(huán)境下鍛煉了能力，在福場如日中天的階段實現(xiàn)了個人的成長。但三魚也是不容易的，我的成長經(jīng)歷并沒有大家臆想的那么一帆風(fēng)順。大廠的競爭非常慘烈，被打碎以后是一蹶不振還是再重塑？這么多大廠設(shè)計師，能出頭的有幾個？玩明白的又有幾個？

寫在最后

這篇文章真長，如果你能耐心讀完… 嗯，算你厲害。我最后再總結(jié)一下吧：

前半部分講了認知，是三魚基于自身環(huán)境所形成的認知，但這些認知希望大家斟酌著看：第一，它是基于三魚的成長路徑和自身條件所得出的，未必適合所有人；第二，行業(yè)是不斷發(fā)展的，認知也不會一成不變，也許一年以后這套認知就失效了。

后半部分講了成長，當(dāng)然主要集中在專業(yè)上的成長，這也是目前大部分設(shè)計師更需要的，也是比較適合在站酷分享給大家的。

認知可以讓你們前進的過程中少走彎路，但是技能才是推動你前進的核心動力。三魚能講的東西還有很多，后續(xù)再慢慢聊。

原文地址：站酷

作者：三魚先生

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》干貨遲到了，但三魚不會讓它缺席2

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》B端產(chǎn)品-BI分析工具

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

現(xiàn)如今企業(yè)都在不斷追求打造簡單好用的產(chǎn)品，期望在產(chǎn)品中有更多的功能，更新的技術(shù)以及更強的能力但仍然能有一個非常輕量和簡單使用體驗。但通常情況下，做減法反而是最難的事情。

一、如何定義”簡單“？

我們可以把簡單定義為容易理解，不難做到的事情。然而簡單是主觀的，某些事情對某些人來說簡單，但對另一些人來說又會很難。一般來講，我們對任何簡單或復(fù)雜的過程形成個人意見，大致分為三個階段：

為用戶在實現(xiàn)他們目標(biāo)的路上消除困難，幫助他們輕松的到達目的地。John Maeda在《簡單法則》一書中提出了在商業(yè)、技術(shù)和設(shè)計中平衡簡單與復(fù)雜的十條法則，核心思想就是希望做更少的動作但得到更多。

《簡單法則》 John Maeda: http://lawsofsimplicity.com/

Maeda是MIT媒體實驗室教授，也是世界著名的圖形設(shè)計師，他一直在探索如何重新定義”改進“的概念，使得這個概念不再人云亦云。這本書非常不錯，所以推薦大家去看看。

二、什么是復(fù)雜的？

談到簡單的時候，需要考慮到它的反面范圍。簡單或是復(fù)雜是比較主觀的感受。經(jīng)過適當(dāng)?shù)呐嘤?xùn)，即使是造火箭都可能不會那么難。但有幾個因素會使非常簡單的任務(wù)復(fù)雜化。在產(chǎn)品設(shè)計中，應(yīng)該盡可能地避免以下這些情況：

我們應(yīng)該如何應(yīng)用到產(chǎn)品設(shè)計中？

1、建立產(chǎn)品的核心價值

有許多產(chǎn)品都希望盡可能地滿足所有用戶，然后成為行業(yè)中領(lǐng)頭羊。如果你希望你的產(chǎn)品變得簡單，就需要定義產(chǎn)品的核心價值，并且確定你真正想要服務(wù)好的用戶群體。不是每一個產(chǎn)品都需要內(nèi)置一個facebook。

2、移除掉任何不必要的元素

變簡單最直接的辦法就是深思熟慮地做減法。當(dāng)你猶豫這個元素要不要拿掉時，拿掉就好。次要信息，不經(jīng)常使用的控件需要處理，把樣式盡量弱化。就是這么簡單，一旦你使用這個原則后，效果是立竿見影的。只是你需要考慮清楚，哪些需要移除掉。

”簡單不意味著沒有復(fù)雜的功能，只是在結(jié)果上簡單。簡單是某種程度上描述一個物件和產(chǎn)品的目標(biāo)及位置。不復(fù)雜是說產(chǎn)品本身的功能設(shè)計不是雜亂無章的，要做到這一點并不簡單?！啊狫onathan Ive(蘋果的喬納森)說。

3、數(shù)據(jù)轉(zhuǎn)換為更直觀的樣式

我們?nèi)粘ＴO(shè)計的大多數(shù)產(chǎn)品都聚集在用戶需要理解的大數(shù)據(jù)上，以便有效地執(zhí)行他們的日常任務(wù)。當(dāng)你知道用戶對于趨勢和變化更有興趣，把數(shù)據(jù)可視化會比單純的數(shù)字表格對用戶來說更有幫助。在數(shù)據(jù)圖表中，還可以根據(jù)需要顯示更多有價值的信息，并將這些直觀呈現(xiàn)在用戶的面前。

4、支持快速決策

用戶被各種選擇狂轟濫炸，不得不花時間去理解和決定，給他們增加了不必要的工作。這里可以用一個非常著名的?？硕蓙斫忉?，選項增多會增加用戶做決定的時間和精力。所以，如果你想提升用戶體驗，讓用戶感覺到簡單，那么就盡可能地幫助用戶更快地做出決定。盡可能地減少不必要的選擇。

5、太多的選擇會嚇跑用戶

當(dāng)前的心理學(xué)理論和研究肯定了個人選擇對情感和動機的積極影響。這些發(fā)現(xiàn)導(dǎo)致了一種流行的觀念，即選擇越多越好——人類管理選擇的能力和欲望是無限的。但在現(xiàn)實中，研究證明了相反的情況。

Jam實驗是消費心理學(xué)中最著名的實驗之一，減少消費者的選擇有利于銷售。重要的是，研究表明準(zhǔn)確地提供較少的選擇可能會提高你的銷量。

這個實驗似乎證明了，與選擇較多的顧客相比，選擇較少的顧客購買的可能性是前者的10倍。它一直是選擇過多的一個關(guān)鍵例子，即給顧客提供太多的選擇實際上會抑制顧客購買。

6、在有多個選擇的時候提供建議

當(dāng)多選不可避免時，試著增加一些建議。給選擇增加推薦選項，或分享其他客戶最喜歡的數(shù)據(jù)。通過設(shè)計清晰地向用戶傳達選項之間的關(guān)鍵區(qū)別。這種方法通過用于選擇不同套餐的界面。

7、將用戶的注意力吸引到正確的區(qū)域

當(dāng)你理解用戶實現(xiàn)目標(biāo)的過程時，每個步驟都有一些更相關(guān)的內(nèi)容，這些內(nèi)容將幫助你朝著最終目標(biāo)前進。找到這些關(guān)鍵區(qū)域并讓用戶能聚集在這些區(qū)域上。（彩云注：給操作設(shè)定好清晰的優(yōu)先級）

8、使用顏色和排版來傳達內(nèi)容的層次結(jié)構(gòu)

你應(yīng)該經(jīng)常能聽到——”用戶不喜歡閱讀“。這沒錯，我們對能記住和對需要深入了解的東西是有選擇性的。如果你曾經(jīng)一個字都不愿意讀就選擇同意了用戶協(xié)議，你肯定懂我的意思。有許多因素會影響傳達：字體類型、尺寸、字間距、行距、大小寫、顏色。用這些要素來組織內(nèi)容的結(jié)構(gòu)層次，使用正確的顏色和字體，將能夠增強品牌感，使其更好地被識別，更有吸引力和記憶。

9、合理的組織能夠幫助系統(tǒng)看起來更簡單好用

讓我們做一個簡單的測試。下面的2張圖片，用秒表來記錄下你大概花多久時間數(shù)完所有的黑點。

結(jié)束了嗎？就像你自己會看到的那樣，計算不規(guī)則的圓點方塊會花費更多的時間，除此之外，還會給你帶來更多的認知負擔(dān)。為什么我們會得到這個結(jié)果？因為正方形中有相同數(shù)量的點。

把這些點擺成一個特殊的矩陣，在視覺上可以幫助掃描，成組的非常好統(tǒng)計。在左邊沒有組織的方塊中，我們必須逐個計算。另外，對于左圖來說，有時候你還可能會統(tǒng)計錯誤，需要再次確認才能放心，太麻煩了。

組織好的元素不僅僅好認，而且還非常好記。不論是操作什么樣的產(chǎn)品，記住所有控件位置和功能非常重要。讓我們做另一個小練習(xí)，一分鐘前，你還在認真的數(shù)兩張圖中的點，現(xiàn)在請你回憶下兩個正方形中的每個點的位置。對大多數(shù)人來說，回憶這種無序的結(jié)構(gòu)幾乎是不可能的。

10、將內(nèi)容分組

簡化一個頁面，有一個簡單的辦法就是把內(nèi)容進行分組。此時，用戶在處理組信息時，精力耗費很少，而不是要看大量不相關(guān)的元素。在元素或元素組周圍添加邊框是創(chuàng)建與周圍元素分離的一種簡單方法。格式塔心理學(xué)中有多種分組原則可以幫助物品產(chǎn)生關(guān)聯(lián)性:接近性、相似性、連續(xù)性、封閉性和連通性。

11、把大任務(wù)分解成小步驟，嘗試用一列來布局

現(xiàn)在幾乎每個產(chǎn)品中都有不同的表單，為了收集你的資料。有時候即使去掉所有不必要的東西后，它依然會很復(fù)雜。這些表單會讓用戶失去完成的動力。所以我們能做的就是把這個大任務(wù)分解成一系列的小任務(wù)。眨眼間，把這個過程進行到底似乎變得容易多了。完成小的子任務(wù)會給用戶帶來一部分內(nèi)啡肽和繼續(xù)進行的滿足感。

在設(shè)計這個表單時，用單列布局替代多列布局。單列布局更容易填寫。這樣用戶就不大需要考慮下一步要填什么，只需要沿著直線向下移動填完就好了。

12、及時告知進度和當(dāng)前狀態(tài)

不確定性讓我們感到焦慮，在操作過程中應(yīng)該盡可能地給用戶確定的信息。用戶需要知道他現(xiàn)在的位置，下一步要做什么。常駐一個信息進度摘要會是一個非常棒的做法，能讓用戶降低認知壓力，并能方便退回前一步確認信息。

13、幫用戶自動計算

人類大腦不擅長涉及數(shù)字的原始計算。嘗試讓系統(tǒng)自動完成所有計算對用戶來說會有更好的體驗。

14、采用漸進式呈現(xiàn)復(fù)雜信息

漸進呈現(xiàn)是UX設(shè)計中更容易讓用戶理解的一種用戶界面設(shè)計模式。它涉及到在多個界面上排列信息和動作，這樣就不會讓用戶淹沒在無關(guān)信息中，直至優(yōu)化到所有信息都強相關(guān)。漸進呈現(xiàn)屬于從”抽象到具體“的典型概念，包括用戶行為和交互順序。一個非常好的漸進案例就是iOS的嵌套開關(guān)設(shè)置界面。

15、設(shè)計普遍接受的模式和交互

用戶將大部分時間花在其他產(chǎn)品上。這意味著用戶喜歡用在其他產(chǎn)品上他已有習(xí)慣來使用你的產(chǎn)品，他們會對你的產(chǎn)品的外觀和性能有特定的期望。

這句話適用于從互聯(lián)網(wǎng)產(chǎn)品到你家冰箱的任何數(shù)字或?qū)嶓w產(chǎn)品，反映了用戶心態(tài)。但這并不意味著你應(yīng)該停止創(chuàng)新，更多的是評估背離傳統(tǒng)的導(dǎo)航或控制方式是否能讓用戶改變他們的思維模式。

16、設(shè)計一個精簡的新手引導(dǎo)

設(shè)計的主要目標(biāo)是為了將用戶與產(chǎn)品提供的價值聯(lián)系起來。任何阻擋在用戶和他實際操作之間的東西都是障礙，除非它服務(wù)于功能性需求。首次體驗對于產(chǎn)品來說非常重要，我們?nèi)祟悤芸煨纬蓪Ξa(chǎn)品的看法，當(dāng)我們不滿意就會立即離開。

你在第一次操作時，即使是最簡單的任務(wù)也可能是一項挑戰(zhàn)。有時在我們操作產(chǎn)品之前需要額外的學(xué)習(xí)。在數(shù)字設(shè)計中，用戶期望的是產(chǎn)品應(yīng)該足夠簡單易懂，他們希望根據(jù)需求得到幫助，或者在出現(xiàn)問題時得到幫助。提供上下文幫助，而不是預(yù)先為用戶提供學(xué)習(xí)材料，設(shè)計一堆引導(dǎo)頁。

17、牢記人體工程學(xué)和使用產(chǎn)品的環(huán)境

簡單，正如我們已經(jīng)定義的，你可以多么容易地使用產(chǎn)品。人體工程學(xué)是設(shè)計、產(chǎn)品和系統(tǒng)的考慮因素，以使它們適合操作它們的人。大多數(shù)人認為這與座位或汽車控制裝置和儀表的設(shè)計有關(guān)，事實確實如此。但它的意義遠不止于此。人體工程學(xué)適用于任何與人有關(guān)的設(shè)計，包括數(shù)字產(chǎn)品。

1954年，心理學(xué)家保羅·菲茨(Paul Fitts)對人體運動系統(tǒng)進行了研究，發(fā)現(xiàn)移動到一個目標(biāo)所需的時間取決于它與目標(biāo)的距離，與目標(biāo)的大小成反比。因此，要確保常用元素的尺寸較大，并將它們放置在靠近用戶的常用位置。

18、支持內(nèi)聯(lián)編輯和自動建議值

刪除每個流程中所有不必要的交互、視圖和步驟。用戶操作系統(tǒng)有一個最佳速度，它被稱為“心流狀態(tài)”。不要用彈出窗口打破這種流暢。對于以后可以更改的所有操作/值，盡可能支持內(nèi)聯(lián)編輯。當(dāng)有大量值可用時，應(yīng)當(dāng)自動建議值。

19、使用智能默認值來減少認知負荷

智能默認設(shè)置是給問題預(yù)先填入答案，讓用戶更快地完成表單。在定義相關(guān)的默認值時，設(shè)計師需要理解用戶以及他們將在何種環(huán)境下使用產(chǎn)品。這只有通過深入的研究和測試才能實現(xiàn)，從用戶身上學(xué)習(xí)，并根據(jù)用戶的歷史數(shù)據(jù)和使用模式調(diào)整默認值。如果需要明確的選擇，就將默認選項設(shè)置為絕大多數(shù)用戶(比如90 – 95%)會選擇的選項。

20、預(yù)防錯誤

錯誤消息會帶來很大的壓力，讓用戶覺得他們搞砸了或者不能勝任任務(wù)。確保自動檢查輸入的數(shù)據(jù)，并對不適當(dāng)?shù)臄?shù)據(jù)輸入提供警報或提醒，以減少錯誤。要么消除容易出錯的條件，要么檢查這些條件，并在用戶提交操作之前向他們提供確認選項。應(yīng)使用強制功能保護破壞性和不可恢復(fù)的操作，以確保用戶意識到他們的選擇將產(chǎn)生的影響。

21、無障礙設(shè)計

作為一名設(shè)計師，你的目標(biāo)是維護易用性，確保你的產(chǎn)品能夠被更廣泛的受眾所訪問。全世界有超過10億人有殘疾。不要把顏色作為傳達信息的唯一視覺手段（彩云注：增加圖標(biāo)不僅僅是為了好看，也為了提升操作的識別性）。確保文本和背景之間有足夠的對比度，支持鍵盤導(dǎo)航等?？稍L問性并不局限于具有某些不同能力的一組用戶，當(dāng)針對可訪問性進行設(shè)計時，你將改善每個使用產(chǎn)品的人的體驗。

三、總結(jié)

設(shè)計出好用簡單易于理解的產(chǎn)品不容易，但那是一個方向，這些快速的小技巧能夠快速地讓界面變得簡單。如有學(xué)到，記得點贊分享給朋友們~

作者：彩云Sky

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》如何做簡單又高級的設(shè)計？這21個設(shè)計方法總結(jié)的太全面了，必須收藏！

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

1.柱狀圖

適用場景：它的適用場合是二維數(shù)據(jù)集（每個數(shù)據(jù)點包括兩個值x和y），但只有一個維度需要比較。
優(yōu)勢：柱狀圖利用柱子的高度，反映數(shù)據(jù)的差異。肉眼對高度差異很敏感，辨識效果非常好。
劣勢：柱狀圖的局限在于只適用中小規(guī)模的數(shù)據(jù)集。

2.折線圖

適用場景: 折線圖適合二維的大數(shù)據(jù)集，尤其是那些趨勢比單個數(shù)據(jù)點更重要的場合。它還適合多個二維數(shù)據(jù)集的比較。
優(yōu)勢：容易反應(yīng)出數(shù)據(jù)變化的趨勢。

3.餅圖

適用場景：適用簡單的占比圖，在不要求數(shù)據(jù)精細的情況下可以適用。
劣勢：餅圖是一種應(yīng)該避免使用的圖表，因為肉眼對面積大小不敏感。

4.漏斗圖

適用場景：漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的流程分析，通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較，能夠直觀地發(fā)現(xiàn)和說明問題所在。
優(yōu)勢:能夠直觀地發(fā)現(xiàn)和說明問題所在。在網(wǎng)站分析中，通常用于轉(zhuǎn)化率比較，它不僅能展示用戶從進入網(wǎng)站到實現(xiàn)購買的最終轉(zhuǎn)化率，還可以展示每個步驟的轉(zhuǎn)化率。
劣勢:單一漏斗圖無法評價網(wǎng)站某個關(guān)鍵流程中各步驟轉(zhuǎn)化率的好壞。

5.地圖

適用場景：適用于有空間位置的數(shù)據(jù)集。
優(yōu)劣勢：特殊狀況下使用。

6.雷達圖

適用場景：雷達圖適用于多維數(shù)據(jù)（四維以上），且每個維度必須可以排序。但是，它有一個局限，就是數(shù)據(jù)點最多6個，否則無法辨別，因此適用場合有限。
劣勢：需要注意的時候，用戶不熟悉雷達圖，解讀有困難。使用時盡量加上說明，減輕解讀負擔(dān)。

數(shù)據(jù)可視化使用小貼士
餅圖順序不當(dāng)

（最好的做法是將份額最大的那部分放在12點方向，順時針放置第二大份額的部分，以此類推。）

2.在線狀圖中使用虛線

（虛線會讓人分心，用實線搭配合適的顏色更容易區(qū)分。）

3.數(shù)據(jù)被遮蓋

（確保數(shù)據(jù)不會因為設(shè)計而丟失或被覆蓋。例如在面積圖中使用透明效果來確保用戶可以看到全部數(shù)據(jù)。）

4. 耗費用戶更多的精力

（通過輔助的圖形元素來使數(shù)據(jù)更易于理解，比如在散點圖中增加趨勢線。）

5.柱狀過寬或過窄

（經(jīng)過調(diào)研，柱子的間隔最好調(diào)整為寬的1/2。）

6．?dāng)?shù)據(jù)對比困難

（選擇合適的圖表，讓數(shù)據(jù)對比更明顯直接。上圖的數(shù)據(jù)作用是為了比較，顯然，柱狀圖比餅圖在視覺上更易于比較。）

7.錯誤呈現(xiàn)數(shù)據(jù)

（確保任何呈現(xiàn)都是準(zhǔn)確的，比如，上圖氣泡圖的面積大小應(yīng)該跟數(shù)值一樣。）

8.不要過分設(shè)計

（清楚標(biāo)明各個圖形表示的數(shù)據(jù)，避免用與主要數(shù)據(jù)不相關(guān)的顏色，形狀干擾視覺。）

9. 數(shù)據(jù)沒有很好歸類，沒有重點區(qū)分

（將同類數(shù)據(jù)歸類，簡化色彩，幫助用戶更快理解數(shù)據(jù)。上圖的第一張沒有屬于同類型手機中不同系統(tǒng)進行顏色上的歸類，從而減少了比較的作用。下圖就通過藍色系很好的把iPhone,Android,WP版歸為一類，很好的與iPad版，其他比較。）

10.誤導(dǎo)用戶的圖表

（要客觀反映真實數(shù)據(jù)，縱坐標(biāo)不能被截斷，否則視覺感受和實際數(shù)據(jù)相差很大。左圖的數(shù)據(jù)起始點被截斷從50開始。）

信息可視化案例
信息可視化囊括了數(shù)據(jù)可視化，信息圖形，知識可視化，科學(xué)可視化，以及視覺設(shè)計方面的所有發(fā)展與進步。下面是信息可視化的案例分享。

(上圖為關(guān)系網(wǎng)——基于60000封電子郵件存檔數(shù)據(jù)，用不同顏色深度的線條呈現(xiàn)了地址簿中用戶和個體之間的關(guān)系，比如回復(fù)、發(fā)送、抄送。)

（上圖通過數(shù)據(jù)化的比較，用變形的柱狀圖等圖形，形象的展示了不同國家老師的收入水平，社會包括學(xué)生和公眾對其的尊重度。）

如何制作信息可視化？
第一步：確定表意正確明確信息圖表達內(nèi)容，確定最主要的表現(xiàn)內(nèi)容。
第二步：優(yōu)化展現(xiàn)形式內(nèi)容正確還不夠，還要易懂。我們需要在這個步驟里尋找信息圖最優(yōu)表現(xiàn)形式，讓讀者 一目了然，降低理解難度。
第三步：探索視覺風(fēng)格在探索視覺風(fēng)格時要注意抓大放小，先定下來最主要模塊的風(fēng)格，再做延展。
第四步：完善細節(jié)視覺風(fēng)格確定后，可根據(jù)需要添加、完善細節(jié)。
第五步：風(fēng)格延展“一致”的視覺設(shè)定有助于用戶理解，也能更好的提升品牌形象。所以主風(fēng)格確定后，我們需要把它延展到其它有需要的頁面上。

以上是分享了數(shù)據(jù)可視化和信息可視化相關(guān)內(nèi)容，不過信息可視化和數(shù)據(jù)可視化是兩個容易混淆的概念，基于數(shù)據(jù)生成的數(shù)據(jù)可視化和信息可視化這兩者在現(xiàn)實應(yīng)用中非常接近，并且有時能夠互相替換使用。但是這兩者其實是不同的，數(shù)據(jù)可視化是指那些用程序生成的圖形圖像，這個程序可以被應(yīng)用到很多不同的數(shù)據(jù)上。信息可視化是指為某一數(shù)據(jù)定制的圖形圖像，它往往是設(shè)計者手工定制的，只能應(yīng)用在那個數(shù)據(jù)中。信息可視化的代表特征：具體化的，自解釋性的和獨立的。為了滿足這些特征，這個圖是需要手工定制的。 并沒有任何一個可視化程序能夠基于任一數(shù)據(jù)生成這樣具體化的圖片并在上面標(biāo)注所有的解釋性文字。
數(shù)據(jù)可視化則是普適的，比如平行坐標(biāo)圖并不因為數(shù)據(jù)的不同而改變自己的可視化設(shè)計。可視化的強大的普適性能夠使用戶快速應(yīng)用某種可視化技術(shù)在一些新的數(shù)據(jù)上，并且通過可視化結(jié)果圖像理解新數(shù)據(jù)，與針對已知特定數(shù)據(jù)進行信息可視化設(shè)計繪制相比，用戶更像是通過對數(shù)據(jù)進行可視化的應(yīng)用來學(xué)習(xí)和挖掘數(shù)據(jù)，而普適性的數(shù)據(jù)可視化技術(shù)本身并沒有解釋數(shù)據(jù)的功能。

（感謝數(shù)據(jù)平臺組同仁們對此文章的貢獻，感謝魏茜璐的視覺配圖。）

文章來源：京東設(shè)計中心

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化與信息可視化淺談！

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

從人類誕生之日起，便有了信息的呈現(xiàn)形式，并伴隨著人類發(fā)展足跡不斷變遷。如今出現(xiàn)的任何信息可視化類型，并非一夜之前突現(xiàn)的新物種，幾乎都是從過去經(jīng)典的表達式中發(fā)展而來。

17000 年前

如果你問最早的信息圖表設(shè)計師是誰，很多學(xué)者認為是遠古時代的洞穴人，他們是最早用圖像描繪成日常生活比如戰(zhàn)斗，野生動物、死亡和慶?；顒拥鹊?。

圖表的基本構(gòu)成（來源網(wǎng)易 UEDC）

圖表標(biāo)題

標(biāo)題一般居中或居左對齊，但是布局時，需要綜合考慮副標(biāo)題、圖例甚至篩選器控件等元素的位置。

坐標(biāo)軸

坐標(biāo)軸包括 X 坐標(biāo)軸和 Y 坐標(biāo)軸，有時還會出現(xiàn)次坐標(biāo)軸。

1. X 軸刻度方向的改變，如果維度過多，則橫向刻度的展示范圍會非常有限，為了展示更多內(nèi)容，通常會用其他替代圖表（比如橫向柱狀圖），不能替代的情況下，可以考慮將標(biāo)注文案進行傾斜（不鼓勵）。

2. 數(shù)據(jù)類刻度值盡量轉(zhuǎn)化為千位分隔符（如 K，M，B），保持簡潔，以節(jié)省空間。坐標(biāo)軸上的最大值取值要恰當(dāng)，保證圖表占據(jù) 2/3 以上，畫面更飽滿。

3. 還需考慮坐標(biāo)軸上的極值。

坐標(biāo)軸

圖例

離散型數(shù)據(jù)包括橫向排列和縱向排列，連續(xù)型數(shù)據(jù)包括連續(xù)圖例。

1. 所有圖表類型的排列方式要統(tǒng)一，所以要考慮整體的圖表空間是適合橫向排列，還是縱向排列。

2. 所有形式總長度超過內(nèi)容區(qū)換行或換列。

3. 雙軸圖包含了 2 種圖表類型，不同類型的圖例樣式要有所區(qū)分。

4. 連續(xù)型數(shù)據(jù)通過漸變色來展示數(shù)據(jù)大小的變化，具體漸變顏色定義在下文中有詳細介紹。

圖例

背景柵格

背景柵格主要用來幫助用戶快速讀取數(shù)據(jù)值，方便參考和對比。背景柵格一般有網(wǎng)格線、虛線、點陣、斑馬紋等。在設(shè)計柵格時，應(yīng)該盡可能減少對數(shù)據(jù)的干擾，在合適的場景下，甚至可以去掉背景柵格。

柵格

Hover 態(tài)（或點擊態(tài)）

用戶在查看某一項數(shù)據(jù)指標(biāo)時，給出明確的反饋和提示。數(shù)據(jù)詳情多時，還會通過浮窗的形式展現(xiàn)。此時該狀態(tài)下數(shù)據(jù)可以突出顯示，可以變化顏色、增加背景元素（線/面）、或者增加動態(tài)變化等。

字體

數(shù)據(jù)圖表的字體一般采用無襯線體，另外需要考慮字體的辨識度，防止在顯示上產(chǎn)生歧義。多數(shù)情況下，數(shù)據(jù)圖表會運行在不同分辨率的大小屏中，所以在文字排版上。

做到以上幾條，我們在設(shè)計圖表時就可以避免掉絕大多數(shù)的坑，不過畢竟圖表類型這么多，在實際場景中也會遇到各種情況?？傊羞@么幾條總的原則

1. 保持?jǐn)?shù)據(jù)圖表簡潔、清晰、易讀

2. 強調(diào)用戶關(guān)注的數(shù)據(jù)，幫助用戶快速聚焦

3. 弱化次要元素，如柵格、圖例等

4. 刪除不必要的元素，陰影效果、酷炫動畫

5. 合理布局圖表的間距、留白等

6. 充分考慮頁面的適配效果

7. 最好使用真實的數(shù)據(jù)進行設(shè)計排版

 第二部分： 圖表配色 

考慮到圖表顏色在設(shè)計中至關(guān)重要，我把它單獨分出來討論。由于數(shù)據(jù)的復(fù)雜性和趨勢變化，配色方案需要考慮非常多的因素，比如可辨識度、舒適性，還需要考慮特殊人群（色盲色弱人士等）對顏色的可讀性等等。在配色過程中我們需要區(qū)分背景色和圖表配色。

背景配色

背景色一般分為深色、淺色、彩色。在很多 LED 大屏上展現(xiàn)數(shù)據(jù)時，多采用深色背景，比如即將到來的天貓雙十一活動，官方數(shù)據(jù)展示基本上會用深藍色作為背景，這樣可以減少屏幕拖尾，觀看時也不會過于刺眼。深色背景中的圖表配色一般不會采用太多的色彩，且圖表也不會設(shè)計得過于復(fù)雜。

中小屏幕的背景選擇性更大，中小屏幕背景色選擇范圍就比較廣，淺色、彩色、深色均可以做出很好的設(shè)計。在 Web 端，大多數(shù)場景下，我們會采用淺色甚至白色作為背景，淺色背景更適合展示大量的數(shù)據(jù)信息，而且識別度更高。

圖表配色

圖表配色最關(guān)鍵的一點，就是要有辨識度。

我們可以通過明度上的變化增加辨識度，也可以采用大跨度的不同色相來增加辨識度，另外這兩者也可以有機結(jié)合，常用于色彩較多的圖表中。

明度變化

當(dāng)我們需要使用單一色相配色時，勢必要用明度差來進行設(shè)計，明度的跨度也要盡可能大才能更清晰。我們可以通過在灰度模式下配色的辨識度來判斷明度差是或否合適。

（Google Material Colors 中的 Light Blue 色卡）

需要注意的是，采用單一色相的配色種類不宜太多，建議不超過 6 種。一旦種類過多，色彩之間的明度差異勢必會變小，因而影響辨識度。

色相跨度變化

通過色相跨度來增加顏色辨識度也是我們常用的方式。

色環(huán)

需要的顏色較少時，我們盡量避免使用相近的色相，比如同類色和相近色。盡量選擇對比色或互補色，這樣可以使不同屬性數(shù)據(jù)在圖表中展示更加清晰。

美國大選圖

所需顏色較多時，建議最多不超過 12 種色相。

通常情況下人在不連續(xù)的區(qū)域內(nèi)可以分辨 6?12 種不同色相。過多的顏色對傳達數(shù)據(jù)是沒有作用的，反而會讓人產(chǎn)生迷惑。

三種常用的取色方法

01. 色環(huán)提取

可以采用色環(huán)中同一明度下的不同色調(diào)作為圖表顏色。前面提到的單色相內(nèi)取色，也可以在這個色環(huán)中進行采集，此外 Google Material Colors 是一個不錯的色板，可以結(jié)合使用。

02. 借鑒自然界中的色彩

自然界中有非常豐富的漸變色彩，而且被大家所熟知，這些色彩更容易給人們帶來愉悅感。

自然界中的色彩

在借鑒過程中，我們需要注意，比如天空經(jīng)常會出現(xiàn)紅、藍、紫的漸變色，但這顏色的明度會有其規(guī)律，通常是淺黃到深紫，但絕對不會出現(xiàn)淺紫到深黃色。還有一些自然界其他的經(jīng)驗配色，比如淺綠色到紫藍色，淺黃色到深綠色，橙棕色到冷灰色。

03. 漸變與明度疊加取色

在正常漸變色的基礎(chǔ)上疊加一層只有明度變化的灰色漸變，形成既有明度差異也有色相跨度變化的配色。

漸變與明度疊加取色

漸變色應(yīng)用案例

好了，配色部分就探討到這里。除了以上關(guān)鍵內(nèi)容以外，我們平時還需要注意數(shù)據(jù)圖表的適配效果、交互細節(jié)、以及動畫設(shè)計方面的問題，由于篇幅的關(guān)系暫不展開，以后有機會進一步探討。

說在最后

我們在參與此類項目設(shè)計時，通常會通過以下的流程去思考：

1. 為誰設(shè)計，用戶想要什么

2. 明確設(shè)計目標(biāo)和價值

3. 明確數(shù)據(jù)指標(biāo)

4. 選擇最合適的數(shù)據(jù)圖表

5. 規(guī)劃設(shè)計，輸出方案

前三步更多會由產(chǎn)品經(jīng)理、運營人員去思考并輸出結(jié)果，最后兩步則由我們設(shè)計師來完成，這兩步也正是這兩篇系列文章的主題所在。

在學(xué)習(xí)過程中，我們每個人可有不同的思考方式和側(cè)重點，以我個人的角度出發(fā)：能夠讀懂常見的數(shù)據(jù)可視化圖表，并從圖表中能獲取到關(guān)鍵信息。當(dāng)有一堆數(shù)據(jù)擺在面前，能根據(jù)業(yè)務(wù)目標(biāo)選擇合適的數(shù)據(jù)展示類型，并運用設(shè)計手段完整的表達給用戶。有了這些沉淀，我就能更好的和產(chǎn)品、運營打交道，更多的關(guān)注鏈路上游的信息，從而進一步提升設(shè)計的產(chǎn)出質(zhì)量。

歡迎交流、批評和指正。

作者：又彬

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》數(shù)據(jù)可視化設(shè)計淺析與研究（二）

藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司