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

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

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

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

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

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

設(shè)計(jì)打造客戶價(jià)值

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

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

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

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

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

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

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

項(xiàng)目實(shí)踐成就客戶

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

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

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

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

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

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

3.體驗(yàn)365天“永不落幕云上投洽會(huì)”

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

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

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

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

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

5.卓越家居品牌升級(jí)-讓美好的生活不僅有詩和遠(yuǎn)方

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

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

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

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

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

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

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

作者：阿里云

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

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

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

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

1.格式塔原則 

相似原則

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

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

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

連續(xù)原則

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

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

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

封閉原則

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

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

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

鄰近原則

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

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

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

對稱原則

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

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

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

共同區(qū)域原則

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

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

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

共同命運(yùn)原則

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

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

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

2.焦點(diǎn) 

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

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

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

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

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

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

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

4.本能反應(yīng) 

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

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

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

5.色彩心理學(xué) 

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

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

6.形狀心理學(xué) 

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

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

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

垂直線：表示強(qiáng)度或力量。

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

7.雙重編碼理論 

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

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

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

8.并行設(shè)計(jì) 

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

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

9.公共區(qū)域 

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

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

10.掃描模式 

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

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

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

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

最后 

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

作者：Hoang Nguyen

譯者：Clippp

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

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

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

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

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

交互創(chuàng)造價(jià)值的機(jī)會(huì)大于視覺

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

B端體驗(yàn)設(shè)計(jì)創(chuàng)造價(jià)值的機(jī)會(huì)大于C端

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

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

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

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

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

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

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

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

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

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

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

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

你越研究越癡迷

這份工作看似簡單，但其實(shí)

有很多可以深挖的點(diǎn)

有很多值得研究的課題

甚至你的價(jià)值看起來還很好衡量

畢竟在大船上

哪怕是一根桅桿都會(huì)被天天使用

看來這真是一份有價(jià)值的工作

畢竟

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

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

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

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

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

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

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

案例1

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

Adobe After Effects-“形狀工具”

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

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

案例2

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

案例3

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

案例4

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

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

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

視覺創(chuàng)造價(jià)值的機(jī)會(huì)大于交互

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

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

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

但現(xiàn)實(shí)是幾乎所有大公司的體驗(yàn)團(tuán)隊(duì)，視覺設(shè)計(jì)師往往被交互設(shè)計(jì)師“壓著打”。因?yàn)椤敖换ァ笔潜貍淠芰Γ耙曈X”是錦上添花能力，“視覺能力弱”并不算短板，而“交互能力弱”卻是明顯的短板。在大部分設(shè)計(jì)師都談不上具備明顯長板的前提下，在職場博弈中，存在明顯短板的一方一定會(huì)輸，也就是說視覺一定會(huì)被交互壓著打。所以如前文所講，三魚建議：“體驗(yàn)設(shè)計(jì)師的工作一定要觸及交互部分”。

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

三魚的做法

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

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

B端的劣勢

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

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

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

干貨來了

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手上功夫的成長

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

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

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

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

廣告圖優(yōu)化

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

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

日常運(yùn)營支持

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

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

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

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

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

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

地球一小時(shí)

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

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

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

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

三魚的兩套方案

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

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

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

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

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

那就是：動(dòng)效設(shè)計(jì)師不干了。

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

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

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

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

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

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

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

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

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

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

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

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

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

寫在最后

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

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

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

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

原文地址：站酷

作者：三魚先生

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

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

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

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

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

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

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

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

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

一、如何定義”簡單“？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4、支持快速?zèng)Q策

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

5、太多的選擇會(huì)嚇跑用戶

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

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

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

6、在有多個(gè)選擇的時(shí)候提供建議

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

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

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

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

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

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

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

結(jié)束了嗎？就像你自己會(huì)看到的那樣，計(jì)算不規(guī)則的圓點(diǎn)方塊會(huì)花費(fèi)更多的時(shí)間，除此之外，還會(huì)給你帶來更多的認(rèn)知負(fù)擔(dān)。為什么我們會(huì)得到這個(gè)結(jié)果？因?yàn)檎叫沃杏邢嗤瑪?shù)量的點(diǎn)。

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

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

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

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

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

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

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

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

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

13、幫用戶自動(dòng)計(jì)算

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

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

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

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

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

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

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

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

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

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

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

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

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

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

19、使用智能默認(rèn)值來減少認(rèn)知負(fù)荷

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

20、預(yù)防錯(cuò)誤

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

21、無障礙設(shè)計(jì)

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

三、總結(jié)

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

作者：彩云Sky

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

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

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

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

1.柱狀圖

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

2.折線圖

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

3.餅圖

適用場景：適用簡單的占比圖，在不要求數(shù)據(jù)精細(xì)的情況下可以適用。
劣勢：餅圖是一種應(yīng)該避免使用的圖表，因?yàn)槿庋蹖γ娣e大小不敏感。

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)化率比較，它不僅能展示用戶從進(jìn)入網(wǎng)站到實(shí)現(xiàn)購買的最終轉(zhuǎn)化率，還可以展示每個(gè)步驟的轉(zhuǎn)化率。
劣勢:單一漏斗圖無法評(píng)價(jià)網(wǎng)站某個(gè)關(guān)鍵流程中各步驟轉(zhuǎn)化率的好壞。

5.地圖

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

6.雷達(dá)圖

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

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

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

2.在線狀圖中使用虛線

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

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

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

4. 耗費(fèi)用戶更多的精力

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

5.柱狀過寬或過窄

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

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

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

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

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

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

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

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

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

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

（要客觀反映真實(shí)數(shù)據(jù)，縱坐標(biāo)不能被截?cái)?，否則視覺感受和實(shí)際數(shù)據(jù)相差很大。左圖的數(shù)據(jù)起始點(diǎn)被截?cái)鄰?0開始。）

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

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

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

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

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

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

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

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

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

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

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

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

17000 年前

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

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

圖表標(biāo)題

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

坐標(biāo)軸

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

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

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ù)大小的變化，具體漸變顏色定義在下文中有詳細(xì)介紹。

圖例

背景柵格

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

柵格

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

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

字體

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

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

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

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

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

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

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

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

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

 第二部分： 圖表配色 

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

背景配色

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

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

圖表配色

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

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

明度變化

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

（Google Material Colors 中的 Light Blue 色卡）

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

色相跨度變化

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

色環(huán)

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

美國大選圖

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

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

三種常用的取色方法

01. 色環(huán)提取

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

02. 借鑒自然界中的色彩

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

自然界中的色彩

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

03. 漸變與明度疊加取色

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

漸變與明度疊加取色

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

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

說在最后

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

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

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

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

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

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

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

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

歡迎交流、批評(píng)和指正。

作者：又彬

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

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

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

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

1、避免使用鮮艷的顏色

明亮鮮艷的顏色就像是把所有的字母都大寫想要強(qiáng)調(diào)一樣，你的聽眾感覺你在對他們大聲推銷。而當(dāng)有很多人在大喊大叫時(shí)，通常是很難集中注意力聽他在說什么。單調(diào)的顏色，反而能很好地用于數(shù)據(jù)可視化，因?yàn)樗鼈兛梢宰屇愕淖x者理解你的數(shù)據(jù)，而不至于被數(shù)據(jù)淹沒。

當(dāng)你想要強(qiáng)調(diào)數(shù)據(jù)時(shí)，可以使用更亮的顏色。比如你的公司與競爭對手相比較時(shí)，或者你可以在現(xiàn)有顏色基礎(chǔ)上加深顏色。

多彩的顏色效果就像把文字全部大寫一樣

2、避免使用餅圖

盡管它們很受歡迎，但餅圖并不是一種可視化數(shù)據(jù)的有效方法。 為什么？ 因?yàn)槟愕拇竽X很難確定每塊餡餅的相對大小

Stephen Few詳細(xì)介紹了這個(gè)問題 鏈接在：

https://www.perceptualedge.com/articles/visual_business_intelligence/save_the_pies_for_dessert.pdf

多使用條形圖， 它能使受眾更容易理解和比較數(shù)據(jù)的相對大小。

Tip：按降序或升序?qū)?shù)據(jù)進(jìn)行排序，能更輕松地比較數(shù)據(jù)。

餅圖不是可視化數(shù)據(jù)的有效方式， 請嘗試使用條形圖。

3、避免數(shù)據(jù)噪音

正如“數(shù)據(jù)界的達(dá)芬奇”Edward Tufte 所說，圖表上的每一點(diǎn)信息都應(yīng)該有存在的理由。

把不重要的東西減到最少或者去掉。這包括減弱或移除圖形線，改變軸線、圖形線的顏色，以及用淺灰色描繪電子表格行。使得“數(shù)據(jù)比率”可以達(dá)到一個(gè)很高的水平，聽眾會(huì)更容易明白其中的數(shù)據(jù)情況。

Tip: 如果有人評(píng)價(jià)你的圖表華而不實(shí)，你只需要優(yōu)化數(shù)據(jù)比率就好了。

隱藏或減弱非數(shù)據(jù)項(xiàng)能使數(shù)據(jù)脫穎而出

4、使用簡單易讀的字體

有些時(shí)候，排版可以提升視覺效果，增加額外的情感和洞察力。但數(shù)據(jù)可視化不包括在內(nèi)。堅(jiān)持使用簡單的無襯線字體(通常是Excel等程序中的默認(rèn)字體)。無襯線字體即是那些文字邊緣沒有小腳的字體。

不用使用手寫體，以及其他會(huì)分散數(shù)據(jù)可視化注意力的字體

5、使用表格數(shù)字字體

表格間距賦予所有的數(shù)字相同的寬度，使它們排列時(shí)能彼此對齊，使比較更容易。大多數(shù)流行字體都內(nèi)置了表格。不確定字體是否正確?就看小數(shù)點(diǎn)(或任何數(shù)字)是否對齊就行。

使用一個(gè)表格數(shù)字字體，這樣每個(gè)數(shù)字間都保持對齊(像右邊的那個(gè))，比較起來更容易

6、使用相同細(xì)節(jié)和精度的數(shù)字

添加的細(xì)節(jié)(和數(shù)字)越多，大腦處理的時(shí)間就越長。想想你想要用你的數(shù)據(jù)傳達(dá)什么，以及最有效的方式是什么。

每一個(gè)額外的數(shù)字都需要大腦去理解

7、使用基礎(chǔ)圖形

一個(gè)很好的經(jīng)驗(yàn)法則是，如果你不能高效理解，你的讀者或聽眾可能也難理解。因此，堅(jiān)持使用基礎(chǔ)圖形:直方圖、條形圖、維恩圖、散點(diǎn)圖和線形圖。

譯者注：關(guān)于這些數(shù)據(jù)圖的區(qū)別以及使用方法，我這里就不作展開說了，有興趣的可以自己去網(wǎng)上翻翻。每種圖形都用它的特點(diǎn)和使用場景，還蠻有意思的。以下是我在網(wǎng)上搜集的圖形示例：

直方圖

條形圖

維恩圖

散點(diǎn)圖

線形圖

作者：Becca Selah

譯者：彩云Sky

轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》提升數(shù)據(jù)可視化的7個(gè)實(shí)用技巧

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

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

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

原文地址：站酷

作者：UXBoy

 轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》大屏監(jiān)控系統(tǒng)數(shù)據(jù)可視化界面設(shè)計(jì)

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

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

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