學(xué)習(xí)UI設(shè)計，軟件只是UI設(shè)計的第一階段，新手或者零基礎(chǔ)的小伙伴可以從軟件入手，到后面的設(shè)計理論，規(guī)范，交互這些設(shè)計思維學(xué)起。
成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計制作、做網(wǎng)站與策劃設(shè)計,仙居網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:仙居等地區(qū)。仙居做網(wǎng)站價格咨詢:13518219792
學(xué)習(xí)UI設(shè)計，首先要明白UI設(shè)計師需要做的工作，大致介紹就是界面、圖標、動效、交互、切圖、標注等，這些內(nèi)容都需要用到不同的軟件。
在這里主要列舉UI設(shè)計常用的四款軟件：PS，AI，AE、ARP、XD、另外還有一些輔助軟件偶爾也會用到
Adobe Photoshop
Adobe Photoshop，簡稱“PS”，是由Adobe Systems開發(fā)和發(fā)行的圖像處理軟件。 Photoshop主要處理以像素所構(gòu)成的數(shù)字圖像。使用其眾多的編修與繪圖工具，可以有效地進行圖片編輯工作。ps有很多功能，在圖像、圖形、文字、視頻、出版等各方面都有涉及。PS可以用來從事，平面設(shè)計，網(wǎng)頁設(shè)計，UI設(shè)計等多種設(shè)計工作。在UI設(shè)計中PS的使用率在90%以上，所以作為一個合格的UI設(shè)計師。PS是肯定得掌握的。PS可以在UI設(shè)計中，繪制界面設(shè)計，圖標設(shè)計等
Adobe illustrator
Adobe illustrator是一種應(yīng)用于出版、多媒體和在線圖像的工業(yè)標準矢量插畫的軟件，作為一款非常好的圖片處理工具，Adobe Illustrator廣泛應(yīng)用于印刷出版、海報書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等，也可以為線稿提供較高的精度和控制，適合生產(chǎn)任何小型設(shè)計到大型的復(fù)雜項目。在UI設(shè)計中AI的使用率也是非常之高，主要可以用來繪制圖標，界面等設(shè)計，插畫等
Adobe After Effects
Adobe After Effects簡稱“AE”是Adobe公司推出的一款圖形視頻處理軟件，適用于從事設(shè)計和視頻特技的機構(gòu)，包括電視臺、動畫制作公司、個人后期制作工作室以及多媒體工作室。屬于層類型后期軟件。在UI設(shè)計中主要主要是用來做動效設(shè)計，交互效果，
Axure RP
Axure RP是美國Axure Software Solution公司旗艦產(chǎn)品，是一個專業(yè)的快速原型設(shè)計工具，讓負責(zé)定義需求和規(guī)格、設(shè)計功能和界面的專家能夠快速創(chuàng)建應(yīng)用軟件或Web網(wǎng)站的線框圖、流程圖、原型和規(guī)格說明文檔。作為專業(yè)的原型設(shè)計工具，它能快速、高效的創(chuàng)建原型，同時支持多人協(xié)作設(shè)計和版本控制管理 。
Axure RP已被一些大公司采用。Axure RP的使用者主要包括商業(yè)分析師、信息架構(gòu)師、可用性專家、產(chǎn)品經(jīng)理、IT咨詢師、用戶體驗設(shè)計師、交互設(shè)計師、界面設(shè)計師等，另外，架構(gòu)師、程序開發(fā)工程師也在使用Axure。
在UI設(shè)計中主要起的作用主要是用來做交互原型圖
Sketch
這里重點介紹一下Sketch，它是個很好的界面設(shè)計工具，很方便，完全就是為扁平化界面而生的。這在做做流行的扁平化界面設(shè)計方面確實方便，比ps效率會高，現(xiàn)在很多UI設(shè)計師都喜歡用，但是我們做設(shè)計，肯定會接觸到各種東西，你可能要畫個擬物圖標，做個宣傳海報，做個網(wǎng)站bannr，做個酷炫的字體效果，那就還是得乖乖打開ps，在圖像處理方面目前地球上沒有什么軟件能超過ps，還有一點，目前Sketch只有mac版，如果公司沒有給你配蘋果電腦的話就還是安靜的用Adobe公司的PS和XD吧，能做好東西就行，不要太糾結(jié)一定要用哪個工具。
Experience Design CC
Adobe XD官方版全稱Adobe Experience Design CC，是Adobe旗下專業(yè)的交互原型設(shè)計工具。Adobe XD官方版跨平臺支持Win10 與 macOS，并且所有用戶均可免費下載使用。Adobe XD CC 2018可快速進行APP設(shè)計、網(wǎng)站設(shè)計，UX/UI 產(chǎn)品設(shè)計，是設(shè)計師、產(chǎn)品經(jīng)理和開發(fā)者們必備的設(shè)計工具
Adobe Dreamweaver
簡稱“DW”，中文名稱 "夢想編織者"，最初為美國MACROMEDIA公司開發(fā) ，2005年被Adobe公司收購。DW是集網(wǎng)頁制作和管理網(wǎng)站于一身的所見即所得網(wǎng)頁代碼編輯器。利用對 HTML、CSS、JavaScript等內(nèi)容的支持，設(shè)計師和程序員可以在幾乎任何地方快速制作和進行網(wǎng)站建設(shè)。
Cinema 4D
UI設(shè)計師的附加軟件，最近幾年非常流行的建模軟件，建模渲染效果特別好！因而，成為了設(shè)計創(chuàng)意工作者的效率生產(chǎn)工具。現(xiàn)在，無論是影視后期、還是工業(yè)設(shè)計、或平面設(shè)計行業(yè)，C4D軟件都得到了廣泛的運用。用來做一些平面軟件達不到的3D效果，視覺效果，能做很多的概念設(shè)計，這個軟件，能讓你的設(shè)計表現(xiàn)力更豐富更有趣。
Mindjet MindManager簡稱思維導(dǎo)圖
MindManager，中文商標譯作C，俗稱“腦圖”，又叫“心智圖”，是一款創(chuàng)造、管理和交流思想的通用標準的繪圖軟件，由美國Mindjet公司開發(fā)，界面可視化，有著直觀、友好的用戶界面和豐富的功能。在UI設(shè)計中主要用來整理交互邏輯思維層。
藍湖
藍湖，產(chǎn)品設(shè)計協(xié)作平臺＆原型制作工具。中文版、全免費，支持Mac、Web、iOS。 支持從Sketch一鍵分享、在線討論、自動為設(shè)計圖生成標注，而且只需簡單幾步就能將設(shè)計圖變成一個可以點擊的演示原型，支持分享給同事，讓他也可以在手機中查看設(shè)計效果。藍湖已經(jīng)成為新一代產(chǎn)品設(shè)計的工作方式。
墨刀
一款在線原型設(shè)計與協(xié)同工具，借助墨刀，產(chǎn)品經(jīng)理、設(shè)計師、開發(fā)、銷售、運營及創(chuàng)業(yè)者等用戶群體，能夠搭建為產(chǎn)品原型，演示項目效果。墨刀同時也是協(xié)作平臺，項目成員可以協(xié)作編輯、審閱 ，不管是產(chǎn)品想法展示，還是向客戶收集產(chǎn)品反饋，向投資人進行Demo展示，或是在團隊內(nèi)部協(xié)作溝通、項目管理
基本的思維導(dǎo)圖工具應(yīng)該擁有增加節(jié)點和刪除節(jié)點的功能。
在某個節(jié)點上增刪節(jié)點時，為了使得所有子節(jié)點的高度相對于該節(jié)點垂直居中，都會重新渲染子節(jié)點的垂直位置。
思維導(dǎo)圖軟件如下：
1、XMind
XMind 是一個開源項目，這意味著它可以免費下載并自由地使用。 XMind 也有 Plus/Pro 版本，提供更專業(yè)的功能。除了地圖結(jié)構(gòu)， XMind 同時也提供樹，邏輯和魚骨圖，具有內(nèi)置拼寫檢查，搜索，加密，甚至是音頻筆記功能。
2、Coggle
Coggle 是一個免費的在線協(xié)作思維導(dǎo)圖工具，讓您直觀地用一個精美的呈現(xiàn)分支結(jié)構(gòu)定義的連接。它可以讓你制作出漂亮的筆記，方便快捷。與朋友和同事分享，和他們協(xié)同工作，展現(xiàn)你的想法。
3、Mindmaps
這是一個開源的應(yīng)用程序，使任何人都可以輕松地創(chuàng)建好看的思維導(dǎo)圖。它可以創(chuàng)建分支（子想法）與無限層級，其中所有這些都互相連接。它是完全基于?HTML5，CSS3 和JavaScript 實現(xiàn)的。
4、FreeMind
FreeMind 是用 Java 編寫的免費心智圖軟件。最近的發(fā)展希望把它變成高生產(chǎn)力的工具。操作 FreeMind 的導(dǎo)航比 MindManager 快，因為它有一鍵式"折疊/展開"和"跟隨鏈接"操作。
5、GitMind
這是一款實現(xiàn)了全平臺通用的思維導(dǎo)圖軟件，只要登錄同一個賬戶所有數(shù)據(jù)都會實時同步，對于需要跨設(shè)備使用的朋友來說非常方便，電腦編輯好的內(nèi)容在通勤路上依然繼續(xù)能用平板編輯。
軟件沒有節(jié)點數(shù)量的限制，支持導(dǎo)出多種格式也沒有水印，基礎(chǔ)功能全部都齊全，是一款我愛不釋手的思維導(dǎo)圖軟件。
深入淺出丨帶你看懂?dāng)?shù)據(jù)可視化「美」的歷程
古人說：“人不可貌相”，但從古至今，人類卻是一群感性動物，容易受到外在表象影響，先感性才理性。
《韓非子》里提到，春秋末期魯國人澹臺滅明，天生異像，“額低口窄，鼻梁低矮，不具大器形貌”，拜孔子為師，孔子沒有拒絕，但對他不上心，愛答不理，讓他坐冷板凳。于是，他毅然決然地離開孔子，自學(xué)成才，獨辟蹊徑，游歷講學(xué)，積極傳播儒家學(xué)說，并培養(yǎng)出很多人才，深受老百姓愛戴?？鬃勇犅勊氖论E之后，幡然醒悟。
在今天，好看這件事也一樣是很重要的。“顏值即正義”，長得好看的人，似乎更容易受到歡迎和優(yōu)待。
但古人也說過：“相由心生”，從一個人的外表和精神狀態(tài)可以大概知道這個人的內(nèi)在狀況，相反，一個人的內(nèi)心思想狀態(tài)，也會投射到形象外表。
因此，我們要注重自身內(nèi)在涵養(yǎng)的健康發(fā)展，也要學(xué)會對外在美的表達與審視。
同樣地，好的設(shè)計也應(yīng)該是兼具內(nèi)容與形式。
信息時代讓人們的生活節(jié)奏加快，人們每一天都變得匆忙，時間被碎片化，甚至沒有多少時間完整看完一段文字。文字的力量是有限的。只有借助可視化，信息才能高效地傳播。
數(shù)據(jù)可視化是數(shù)據(jù)領(lǐng)域一個重要的分支，目的是“讓數(shù)據(jù)說話”，展現(xiàn)數(shù)據(jù)之美。好的圖表會說話，好的圖表可以抓住用戶的心。
一、歷史篇：人類對世界的認知與表達從圖畫開始
研究發(fā)現(xiàn)，人腦處理圖片信息是同步進行的，而處理文字信息則是一步一步循序漸進的，而且一篇文字下來，大部分人只記住了其中的20%；人在看報紙時，99%的文字信息會自動被過濾掉，腦子里只殘留了可憐的1%；人腦處理圖片的速度是處理文字的6000倍。也就是說，如果一篇6000字的文章需要10分鐘看完，而壓縮成一張圖片則只需要10/6000分鐘的時間。
圖片可以表達的內(nèi)容要比文字更豐富，同時也可以給人留下很大的想象空間 ，可以體現(xiàn)真實性（有圖有真相），可以讓人賞心悅目。
其實，在遠古時期，我們遙遠的祖先——智人就已經(jīng)學(xué)會畫畫，基于自己對周邊生活環(huán)境的認知，將人、鳥、獸、草、木等事物以及狩獵、耕種、出行、征戰(zhàn)、搏斗、祭祀甚至男女交媾等日常活動刻畫在巖石上、石壁上、洞穴里......到目前為止，歐洲、亞洲、美洲、大洋洲的70多個國家150多個地區(qū)發(fā)現(xiàn)巖畫遺址，而僅非洲和澳洲少數(shù)族群目前還存有巖畫制作的傳統(tǒng)，例如著名的巖畫遺址拉斯科洞窟壁畫、阿爾塔米拉洞窟壁畫、大麥地巖畫、拉文特巖畫、平圖拉斯河手洞壁畫、非洲大象巖刻、將軍崖巖畫等。
巖畫學(xué)家埃馬努埃爾·阿納蒂在《世界巖畫：原初語言》一書中提到：隨著智人技術(shù)水平的提高、抽象和感知能力的增強，促使了復(fù)雜語言和藝術(shù)的產(chǎn)生，而巖畫正是這種語言的一種記錄形式；目前所知的70%巖畫都是狩獵采集社會的作品，剩余30%是游牧和農(nóng)耕時期的作品，在這些巖畫的結(jié)構(gòu)中存在著共同的記憶和普遍性的認知模式。巖畫是象形文字，是無文字時代的寫作，是人類隱沒記憶的見證。
可見，人類對世界的認知與表達是從圖畫開始的。
圖1. 遠古時代的巖畫
人類造出文字之前，還經(jīng)歷過“結(jié)繩記事”、“圖畫記事”等階段。
但隨著社會的發(fā)展，人類發(fā)生了“農(nóng)業(yè)革命”，不再單純依靠狩獵為生，制造和使用工具更加嫻熟，剩余產(chǎn)品逐漸增加，社會組織逐步成熟。這時，社會組織不斷產(chǎn)生大量的信息，除法令條紋外，還必須記錄各種交易、稅收、商品庫存、節(jié)假日以及打勝仗的日期等。在此之前，人類雖然可以利用圖畫記事，但更多的還是用自己的大腦記錄信息。隨著信息的大量產(chǎn)生，容易產(chǎn)生記憶過載，于是就有了文字。
象形文字是由原始的圖畫發(fā)展而來的。由于社會的發(fā)展，加上圖畫效率低，難以滿足社會化需求，于是人們逐漸從圖畫中抽離出一個個元素，形成象形文字。象形文字是一種最原始的造字方法，純粹利用圖形來作文字使用，而這些文字又與所代表的東西在形狀上很相像，圖畫性質(zhì)減弱，象征性質(zhì)增強。蘇美爾楔形文字、甲骨文、古埃及象形文字、瑪雅文字都是獨立地從原始社會最簡單的圖畫和花紋產(chǎn)生出來的。
但象形文字也有很大的局限性，因為有些實體事物和抽象事物是畫不出來的，而且寫起來很慢又難讀懂。
圖2. 世界四大古文字
隨著社會的進一步發(fā)展，文字也得到了很大的發(fā)展，在象形文字的基礎(chǔ)上逐步分化出“表音”和“表意”兩種文字。文字是用來記錄和傳播語言的，而記錄和傳播只有兩種途徑，或“表音”，或“表意”。就漢字來說，其發(fā)展脈絡(luò)大致是：結(jié)繩記事—圖畫文字—象形文字—形意文字—意音文字。
社會的發(fā)展，推動了文字的發(fā)展，使得人們在對事物的表達上可以更加豐富多樣，可以指事、象形、形聲、會意、轉(zhuǎn)注、假借。人們對世界的認知和表達在廣度和深度上也都有了很大的延伸。反過來，由于更多樣化的文字，人們能夠更加準確、生動、深刻、靈活地記錄下所見所聞和所思所想，加快了知識的傳播與傳承，推動了社會的大發(fā)展。
文字即使再豐富，也有難以突破的局限性。文字需要理解，不能一目了然，對抽象事物及個體的表達，還不夠形象、到位。因此，在出現(xiàn)文字之后的時代，許多文獻就以圖文結(jié)合的形式流傳下來。例如，在1912年發(fā)現(xiàn)的伏尼契手稿中，字母和語言至今無人破解，但其中的植物、天體出浴美女等許多圖片，甚至出現(xiàn)了構(gòu)造精致的精美圖案，一目了然，讓人驚嘆。
圖3. 伏尼契手稿
二、發(fā)展篇：進入了“百花齊放、百家爭鳴”的時代
計算機出現(xiàn)之前，人們已經(jīng)能夠靈活地運用柱形圖、線圖、餅圖等基本圖表來展示數(shù)據(jù)，而且也衍生了很多新型、創(chuàng)意的數(shù)據(jù)圖表。
大家應(yīng)該都知道南丁格爾（國際上以她的生日命名了護士節(jié)），但很多人應(yīng)該不知道南丁格爾玫瑰圖（下圖）就是她創(chuàng)造的。在克里米亞戰(zhàn)爭期間，南丁格爾通過搜集數(shù)據(jù)，發(fā)現(xiàn)很多死亡原因并非是“戰(zhàn)死沙場”，而是在戰(zhàn)場外感染疾病，或是在戰(zhàn)場上受傷，卻沒有得到適當(dāng)?shù)淖o理而致死。為了解釋這個原因，降低英國士兵死亡率，她畫了這個著名的圖表，于1858年遞交到維多利亞女王手中。(這么漂亮的圖表，想必女王一定很受感動)
圖4. 南丁格爾玫瑰圖
世界著名的繪圖大師米納德，開創(chuàng)了許多重要的主題繪圖技巧，改良了其他技術(shù)。他是首個把餅圖和地圖結(jié)合在一起的人，并將流線放入地圖中。以下圖表是米納德最廣為人知的作品，被EdwardTufte認為是史上最杰出的統(tǒng)計圖。它描繪了拿破侖的軍隊自離開波蘭－俄羅斯邊界后軍力損失的狀況，在一張圖中通過兩個維度呈現(xiàn)了六種維度信息：拿破侖軍隊人數(shù)、行軍距離、溫度、經(jīng)緯度、移動方向以及時間－地域關(guān)系。
圖5. 拿破侖行軍圖
計算機出現(xiàn)后，特別是互聯(lián)網(wǎng)的興起，人類社會以“摩爾定律”的速度，進入一個全新的時代，科學(xué)技術(shù)也得到了前所未有的革新與發(fā)展，同時也給人們帶來了很多新思維。
技術(shù)的進步，讓我們能夠采集到比以前多得多的信息，數(shù)據(jù)規(guī)模不斷成指數(shù)量級的增長，數(shù)據(jù)的內(nèi)容和類型也比以前要豐富得多，改變了人們分析和研究世界的方式，也給人們提供了新的可視化素材，推動了數(shù)據(jù)可視化領(lǐng)域的發(fā)展。
與以前相比，數(shù)據(jù)可視化領(lǐng)域發(fā)生了很多的變化，得到了很大的發(fā)展。
1. 可視化的表現(xiàn)形式和場景更豐富
在當(dāng)今信息時代，信息出現(xiàn)了“泛濫”與“過載”，人們每天都受到各種信息的“轟炸”。當(dāng)我們打開網(wǎng)頁或手機APP時，首先進入我們視野的就是各種彈出的廣告信息。這些信息從內(nèi)容到形式，都經(jīng)過了精心設(shè)計。我們走在大街上，映入我們眼球的則是滿大街的廣告海報，還時常有人站在街邊向路人派發(fā)傳單。我們不僅僅只從書上看到了可視化的圖表，還從海報、信息圖、PPT、數(shù)據(jù)產(chǎn)品、大屏等獲取到了大量的可視化信息。
圖6. 可視化的表現(xiàn)形式
2. 可視化展現(xiàn)方式更多樣和靈活
數(shù)據(jù)圖表是最常用的可視化元素。除柱形圖、條形圖、餅圖、環(huán)形圖、線圖、散點圖、面積圖、雷達圖、K線圖、地圖等基本圖表外，現(xiàn)在也出現(xiàn)了更多新式的圖表，如山峰圖、雷達圖、氣泡圖、熱力圖、漏斗圖、樹圖、箱形圖、瀑布圖、河流圖、詞云圖、儀表盤、南丁格爾玫瑰圖、旭日圖、和弦圖、?；鶊D、3D圖，等等。另外，智慧的人們也常常創(chuàng)意性地將各種圖表混搭，例如下圖，地圖和餅圖、散點圖、柱形圖等搭配使用。
圖7. 各種圖表的混搭
除圖表外，對圖片和圖標的靈活運用，使得可視化更加美觀、形象、貼切。
圖9. 圖標的靈活運用
3. 從靜態(tài)到動態(tài)
由于技術(shù)的發(fā)展，實時數(shù)據(jù)采集、實時數(shù)據(jù)傳輸以及實時數(shù)據(jù)計算得以實現(xiàn)，人們終于得以欣賞到數(shù)據(jù)的靈動之美。以前人們只能看到事后數(shù)據(jù)形成的分析結(jié)果，看到的是數(shù)據(jù)的過去式，領(lǐng)略的是數(shù)據(jù)的靜態(tài)之美。而現(xiàn)在，通過實時計算及數(shù)據(jù)可視化，人們可以知道“當(dāng)前時刻發(fā)生了什么”，看到了數(shù)據(jù)的變化，看到了數(shù)據(jù)的動態(tài)之美。
4. 設(shè)計上更注重用戶體驗
由“信息泛濫”引起“信息過載”，從而導(dǎo)致“信息焦慮”。無論是風(fēng)格、元素、配色、文字、交互上還是細節(jié)上，人們的可視化作品都越來越注重用戶的視覺體驗，希望能讓用戶一目了然，不多花一點兒時間去理解。在設(shè)計風(fēng)格上，從3D擬物化到簡潔扁平化再到擬物扁平化的發(fā)展變化，也在不斷地為用戶“做減法”。
三、原則篇：關(guān)于設(shè)計的四大原則
“別忘了，你是為讀者進行可視化設(shè)計?！?/p>
——《數(shù)據(jù)之美：一本書學(xué)會可視化設(shè)計》
所有的設(shè)計細節(jié)，都必須經(jīng)過精心構(gòu)思，都必須站在用戶角度來思考。
顏值高或者打扮好看的人，總能牢牢地吸引別人的目光，相反，衣著邋遢不修邊幅的人，卻往往是別人瞅一眼就嫌棄。那些聰明的人，必然深諳這樣的秘訣：好看的PPT報告，總能在第一時間吸引受眾，再加上生動的演講，就會收到很多好評；廣告牌做得越好，就越吸引路人的注意力，越能讓路人記住，廣告效果也就越好。
當(dāng)你看到別人的可視化作品時，你是否總覺得不好，但怎么也說不出到底哪些地方不好？如果你熟悉以下基本原則，就算不是一個專業(yè)的設(shè)計人員，你也可以快速看出哪里出了問題并提出非常中肯的建議。如果你還能熟練運用這些原則，那你的可視化作品將煥然一新，更加專業(yè)、好看、有趣，也將收獲更多讀者的贊賞。
親密性（分組）
在生活中，幾乎每件事都有邏輯，人們也喜歡遵循一定的邏輯去理解世間之事，例如時間先后、空間、因果、總-分-總等邏輯結(jié)構(gòu)。
在做可視化設(shè)計的時候，我們所要表達的內(nèi)容一定不能是一些無序呈現(xiàn)，這樣會給讀者造成理解上的混亂。我們的可視化作品應(yīng)當(dāng)能夠遵循多數(shù)讀者所能理解的思維邏輯，將內(nèi)容分成幾部分按順序一步一步地表達出來。
相同部分的內(nèi)容，彼此相關(guān)，應(yīng)當(dāng)靠近，放在一起。這樣閱讀起來才能被理解成為同一單元的內(nèi)容，而不是多個孤立的不相關(guān)的內(nèi)容。不同部分的內(nèi)容，應(yīng)當(dāng)明顯地區(qū)隔開來，例如上下部分內(nèi)容之間用一空行隔開或者間距放大。這樣有助于組織信息，減少混亂，為讀者提供清晰的結(jié)構(gòu)。
圖10. 親密性原則
對齊
在版式布局上，任何元素的擺放，都可能會影響甚至主導(dǎo)用戶的視覺流程。因此，任何元素都不能隨意擺放，否則會造成混亂，而混亂會令人不適。對齊，使每個元素都與其它元素建立起某種視覺聯(lián)系。對齊，也讓可視化作品更加清晰、精巧、清爽。
對齊，不僅包括左對齊、右對齊、頂端對齊、低端對齊，還包括水平居中、垂直居中、橫向分布、縱向分布，等。
圖11. 對齊原則
重復(fù)/統(tǒng)一
我們都有“先入為主”的“陋習(xí)”，當(dāng)看到與之前不和諧不一致的東西，常感突兀，甚至本能抗拒。因此，在可視化作品中反復(fù)使用一些視覺要素，建立上下文之間的聯(lián)系，增加條理性，保持視覺上的統(tǒng)一。
任何視覺元素都可以在同一作品中重復(fù)使用，例如顏色、形狀、材質(zhì)、空間關(guān)系、線寬、字體、大小和圖片，等等。
圖12. 重復(fù)原則
對比/強調(diào)
在做可視化設(shè)計時，我們的初心是以圖文的形式把所要表達的信息清晰的傳遞給用戶，讓用戶一目了然，盡量不需要太多思考和理解。為了達到這個目的，我們需要強調(diào)重點，弱化次要，避免作品中所有的元素看起來重要程度都是一樣的。如果所有的東西都同等重要，那就相當(dāng)于所有的東西都不重要。
圖13. 強調(diào)重點，弱化必要
如果你想突出某些信息要點，那就讓對應(yīng)的元素（字體、顏色、大小、線寬、形狀、空間等）與其它元素不相同，讓它們截然不同，讓用戶首先能夠關(guān)注到它們。
圖14. 對比原則
表達，力求準確、到位、簡潔、易懂
當(dāng)用戶看到我們的可視化作品時，我們最好要保證所表達的信息能被用戶正確理解。除使用上面幾個原則外，我們還要附加一些輔助信息，例如文字、箭頭等。在可視化作品中，文字必不可少，但篇幅要加以控制。
文字的表達，要準確、到位、簡潔、易懂，要能引導(dǎo)用戶正確地理解圖表的意思，要能不引起任何歧義。
圖15. 表達，要準確、到位
四、流程篇：要有數(shù)據(jù)可視化的正確姿勢
沒有什么比親手創(chuàng)造美這件事更給人帶來成就感了。
當(dāng)我們滿懷激動地開始數(shù)據(jù)可視化時，請不要馬上鉆入某個細節(jié)里，不要急著考慮用什么酷炫的圖表來展現(xiàn)，也不要糾結(jié)于用什么顏色、什么字體。我們要有數(shù)據(jù)可視化的正確打開姿勢。
不同形式的數(shù)據(jù)可視化流程有所不同，這里主要講重要且相通的部分。
(一) 了解你的需求
關(guān)于需求，在實現(xiàn)之前，一定要聽清楚做什么，想清楚怎么做，說清楚怎么做。
了解與分析數(shù)據(jù)可視化需求，主要圍繞以下幾點來展開：
1. 看什么，即哪些內(nèi)容需要可視化。
很少需求方能夠準確、全面地說出他們真正想要什么。他們只能描述出大概的樣子，因此需要不斷引導(dǎo)他們以明確真正詳細的需求。
· 可視化的目的是什么，用戶是誰，在哪里看，什么情況下看，多久看一次；
· 了解數(shù)據(jù)，看看有哪些指標，哪些指標可以直接取，哪些需要復(fù)雜計算，哪些可以實時，哪些只能離線；
· 哪些指標必須展現(xiàn)，哪些指標不展現(xiàn)，哪些指標可展現(xiàn)可不展現(xiàn)；
· 展現(xiàn)的維度有哪些，按時間、部門、地域、指標，看實時數(shù)據(jù)還是歷史數(shù)據(jù)；
· 通過可視化，期望從中知道哪些信息，等等。
2. 誰看，即用戶是誰。
如果面對的是求真務(wù)實的老板，那可能需要側(cè)重于內(nèi)容，追求邏輯的合理性和數(shù)據(jù)的準確性；如果是來訪參觀的貴客，那可能為了展示公司實力與形象而追求高大上的圖表設(shè)計；如果是不懂技術(shù)的業(yè)務(wù)人員，在可視化時可能需要避免過于技術(shù)性。
3. 在哪里看，即有哪些可視化形式。
一次性的工作匯報，可使用PPT，如果老板嫌棄做PPT太慢，可以直接用Excel，或者其它工具，如腦圖；如果為很多用戶提供周期性計算的指標數(shù)據(jù)，且滿足不同條件下的查看，那適合做一款數(shù)據(jù)產(chǎn)品或者可視化報表；向來訪的貴客介紹公司情況時，如果想給客人們提供一種賞心悅目的視覺享受，用大屏可視化數(shù)據(jù)再合適不過了；如果想給公司各部門同事普及知識、介紹成果、通知活動等，做一張可視化信息圖，并在線發(fā)布，圖文結(jié)合，有趣生動，既吸引更多讀者關(guān)注，提升閱讀體驗。
4. 什么情況下看。
“第一印象”肯定是重要的。用戶“第一眼”感覺不好，當(dāng)然就沒有了然后，就不會有“第二眼”、“第三眼”，也就不會再往下看了。所以，要帶給用戶“第一眼”足夠良好的視覺體驗，就要多想想用戶會在什么場景下去看你的可視化作品。
例如，打開手機，多數(shù)情形下，用戶只會根據(jù)標題有選擇地瀏覽少量文章，因此，取一個生動、有趣、亮眼的標題，比普通標題更有視覺沖擊力，會讓你的文章從眾多內(nèi)容中脫穎而出，贏得更多用戶點擊閱讀。
圖16. 取一個有吸引力的標題
例如，在企業(yè)內(nèi)部（特別是人多的公司），海報、信息圖形式的內(nèi)容，每天都大量地以郵件地方式群發(fā)給各部門人員，或活動通知、或展現(xiàn)成果、或宣傳典型，等等。每個員工都“信息過載”，只能閱讀少量的信息。
除標題要吸引人外，還需要注意用戶打開郵件的實際場景。不少用戶打開這種群發(fā)郵件時，常常是下面的情況，一堆的收件人，一堆的抄送人，這已經(jīng)占據(jù)了有限電腦屏幕的一部分，剩下的部分就是點擊某個郵件時出現(xiàn)的正文內(nèi)容的部分。因此，在這一區(qū)域完整顯示出標題（以及內(nèi)容摘要），才能吸引用戶往下看。
圖17. 多想想具體的場景
（二）可視化設(shè)計
可視化設(shè)計是最重要的環(huán)節(jié)。只有做好這一環(huán)節(jié)，后面的事情才會變得簡單順暢。
1. 梳邏輯
我們在閱讀時，只要遇到稍微難懂的知識，基本上會本能地第一時間選擇退縮，不再看下去。之所以覺得難懂，最主要是因為邏輯不清晰給我們帶來理解上的困擾。邏輯就像一棵樹的樹干，如果我們只見樹葉不見樹干，就會迷失方向。因此，在可視化設(shè)計前，一定要站在用戶的角度，梳理出清晰的邏輯結(jié)構(gòu)。這一步，想清楚怎么做，很重要，多花點時間也沒關(guān)系。
對于數(shù)據(jù)可視化來說，邏輯就是確定各部分的核心內(nèi)容，以及內(nèi)容之間的先后次序和關(guān)聯(lián)關(guān)系，即講什么不講什么，先講什么后講什么。
把邏輯設(shè)計得簡單一些，清晰一些，用戶就能越快明白你的“良苦用心”。
2. 定風(fēng)格
風(fēng)格營造一種氛圍，驅(qū)動用戶沉浸式閱讀。不同的風(fēng)格，適合不同的用戶不同的場景，例如科技、學(xué)院、活潑、嚴肅、可愛，等等。
3. 排版式
版式設(shè)計就是關(guān)于如何處理信息重點，因為在任何設(shè)計中，最重要的信息需要首先被注意到，然后是次要信息。
好的版式就像導(dǎo)盲犬，合理地對內(nèi)容進行布局，適當(dāng)?shù)匕才虐媸街械囊曈X流程，引導(dǎo)用戶第一時間看到最需要被關(guān)注的部分，暗示用戶“先看什么，后看什么”。
一般來說，可視化作品一般包括標題、正文、圖表、說明文字等要素。版式就是基于上述提到的幾個原則，確定元素之間的層次結(jié)構(gòu)，合理擺放這幾個要素。
4. 選圖表
不是越酷炫的圖表就越適合。這首先要看展現(xiàn)什么數(shù)據(jù)。某些圖表只適合展現(xiàn)相應(yīng)格式的數(shù)據(jù)。其次，也需要對展現(xiàn)數(shù)據(jù)的圖表進行個性化定制，包括樣式、風(fēng)格、顏色、字體，使之契合上下文語境，也讓圖表更有溫度。
不要將就而選擇默認設(shè)置的圖表，不要做那個“Mr.差不多”或“Ms.還行”。如果將默認設(shè)置的圖表放在可視化作品中，總是顯得那么突兀和不協(xié)調(diào)。另外，對默認設(shè)置的棄用，可以強迫自己不斷精進，不斷提升可視化的能力。
5. 調(diào)細節(jié)
對單個部分的可視化設(shè)計，并不能完全保證整體上的和諧一致。因此，回到整體，根據(jù)前面提到的幾個原則，發(fā)現(xiàn)細節(jié)問題，對某些細節(jié)進行調(diào)整，使之整體上保持一致。例如，各部分視覺元素之間保持對齊，如標題、正文、圖表等；在配色、字體或其它細節(jié)上，各部分要盡量做到統(tǒng)一；各部分之間要有明顯的區(qū)隔，等等。
（三）指標計算
巧婦難為五米之炊。有數(shù)據(jù)，才能談數(shù)據(jù)可視化。數(shù)據(jù)的獲取、整合、計算，會占用大量的時間。這一部分工作是相對獨立的。
但需要注意的是，模擬數(shù)據(jù)和真實數(shù)據(jù)是有區(qū)別的。根據(jù)模擬數(shù)據(jù)設(shè)計的圖表，一定要用真實數(shù)據(jù)展現(xiàn)與驗證，驗證圖表與真實數(shù)據(jù)的契合程度。例如下圖，模擬數(shù)據(jù)展示的圖表中各部門之間存在明顯的差異，但改為用真實數(shù)據(jù)展示時，卻“看起來感覺都一樣”，這時候就需要調(diào)整圖表的設(shè)置，凸顯視覺上的差異。
圖18. 用真實數(shù)據(jù)驗證可視化的效果
指標的計算過程，這里略去不講。
（四）前端開發(fā)
數(shù)據(jù)產(chǎn)品、大屏的可視化實現(xiàn)，還需要前端開發(fā)。
理論上來講，只要設(shè)計出的圖表，就一定能在前端實現(xiàn)。但這個可能會受到前端開發(fā)人員的技術(shù)水平和展現(xiàn)工具的限制。所以，可視化設(shè)計有時候需要尋求一種關(guān)于設(shè)計與實現(xiàn)之間的平衡。
可視化設(shè)計人員最好事先有所評估，采用復(fù)雜圖表設(shè)計之前最好與開發(fā)人員溝通探討實現(xiàn)的可行性。
五、工具篇：你會用Excel設(shè)計圖表嗎？
Excel是最常用、最基本、最靈活且最應(yīng)該掌握的圖表制作工具。 可以說，大多數(shù)圖表樣式都可以用Excel畫出來。如果你認為用Excel畫不出來某種樣式的圖表，有可能是你還未掌握Excel的高階技巧。
Excel展現(xiàn)的圖表是靜態(tài)的，且支持的數(shù)據(jù)量比較有限。所以，如果是企業(yè)級的動態(tài)數(shù)據(jù)展現(xiàn)，還需要借助專業(yè)的大數(shù)據(jù)可視化工具。
專業(yè)可視化工具有很多，大致可分為三類：企業(yè)級專業(yè)可視化工具、輕量級在線可視化工具、編程式圖表工具。
企業(yè)級專業(yè)可視化工具
ECharts 是國內(nèi)使用率非常高的開源圖表工具，可以流暢的運行在 PC 和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，底層依賴輕量級的 Canvas 類庫 ZRender，提供直觀、生動、可交互、可高度個性化定制的數(shù)據(jù)可視化圖表。ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對移動端做了深度的優(yōu)化。
D3.js 是最好的開源數(shù)據(jù)可視化工具庫。D3.js運行在JavaScript上，并使用HTML、CSS和SVG。 D3.js使用數(shù)據(jù)驅(qū)動的方式創(chuàng)建漂亮的網(wǎng)頁。 D3.js可實現(xiàn)實時交互。這個JS庫將數(shù)據(jù)以SVG和HTML5格式呈現(xiàn)，所以像IE7和8這樣的舊式瀏覽器不能利用D3.js功能。
Tableau是一款企業(yè)級的大數(shù)據(jù)可視化工具。Tableau 可以讓你輕松創(chuàng)建圖形，表格和地圖。 它不僅提供了PC桌面版，還提供了服務(wù)器解決方案，可以讓您在線生成可視化報告。服務(wù)器解決方案可以提供了云托管服務(wù)。
輕量級在線可視化工具
BDP個人版，類似Tableau的在線免費的數(shù)據(jù)可視化分析工具，不需要破解、不需要下載安裝，在線注冊后就能一直使用，操作很簡單，只需要拖拽。支持幾十種圖表類型，也支持制作數(shù)據(jù)地圖（自帶坐標糾偏）。除可視化之外，BDP還有數(shù)據(jù)整合、數(shù)據(jù)處理、數(shù)據(jù)分析等功能。
百度圖說，基于ECharts，在線圖表制作工具，采用Excel式的操作方式制作樣式豐富的圖表，圖表自定義的選項很豐富，使數(shù)據(jù)呈現(xiàn)的方式更加美觀個性，易分享傳播。
文圖主要用在你要出一份包含文字說明的報告時使用，提供幾個確定好風(fēng)格配色的主題供選擇，讓整個報告風(fēng)格統(tǒng)一、簡潔美觀！文圖能夠良好地適配移動端。但文圖的排版不是很好用。
創(chuàng)客貼，在線平面設(shè)計工具，簡單，快速，輕松完成在線設(shè)計，據(jù)說是2016最好的在線設(shè)計網(wǎng)站。
編程式圖表工具
對于掌握編程語言的程序員來說，設(shè)計新穎、令人驚艷的數(shù)據(jù)圖表也可以通過代碼來實現(xiàn)。
Python有很多具有畫圖功能的包，如matplotlib、Seaborn、ggplot、Bokeh、pygal、Plotly、Geoplotlib、Gleam、missingno、Leather，等等。
R語言提供了很多數(shù)據(jù)可視化工具包，例如ggplot2、ggthemes、ggmap、ggiraph、ggstance、GGally、gganimate、ggradar、ggTimeSeries、ggseas、lattice、rgl、ggvis、htmlwidgets、leaflet、dygraphs，等等。
類似提供強大繪圖編程功能的語言還有PHP、HTML、JavaScript、CSS等。
六、技巧篇：刻意練習(xí)是提升可視化技能的唯一途徑
不斷練習(xí)，不斷精進
提升數(shù)據(jù)可視化技能的唯一途徑就是在理解可視化設(shè)計原則和方法論的基礎(chǔ)上，不斷練習(xí)，不斷精進。
除此之外，還要有點完美主義。
技巧在于平時的積累。多觀察，生活中看到好的設(shè)計，多想想為什么人家設(shè)計那么好，讓你忍不住多看幾眼?？吹讲缓玫脑O(shè)計，多想想到底哪里不好?？吹胶每吹膱D表，看到別人介紹的小技巧，動手做一做。
技巧太多，這里不做展開細講。
“去設(shè)施傾向”
“這是章北海看到的另一個以前很少有人想象到的現(xiàn)代技術(shù)特色——去設(shè)施傾向。這種傾向在地球上還只是初露端倪，但‘去設(shè)施化’已成為比地球世界更先進的艦隊世界的基本結(jié)構(gòu)。這個世界到處都是簡潔空蕩的，幾乎見不到任何設(shè)施，只有在需要時，設(shè)施才會出現(xiàn)，而且是在任何需要的位置出現(xiàn)。世界在被技術(shù)復(fù)雜化后，正在重新變得簡潔起來，技術(shù)被深深地隱藏在現(xiàn)實的后面?！?/p>
——《三體》
科幻小說《三體》里面的這段話，給了我們提示。當(dāng)我們做分析和可視化數(shù)據(jù)時，如果不用選項框和菜單欄時，應(yīng)該隱藏起來，用到時才打開。另外，也盡量讓所使用的軟件最大化。這樣可以讓內(nèi)容信息展現(xiàn)在最大的視野區(qū)域內(nèi)，這樣有助于讓我們從中獲取更全面的信息，指導(dǎo)我們下一步做正確的決策。
圖19. 限的視野區(qū)域，信息最大化
顏色不宜過多，配色要合理
我們在可視化設(shè)計時，最好不要使用超過三種以上的主色調(diào)。顏色過多，無形中會分散用戶的注意力，使得用戶無法聚焦。
顏色的搭配要合理。大自然是最好的色彩家，可以借鑒大自然的色彩搭配。另外，如果你第一眼看到別人的設(shè)計，感覺很舒服，賞心悅目，那也可以借鑒作品中的色彩搭配。相信你的直覺，至少你的身體不會欺騙你。
圖20.顏色不宜過多，配色要合理
圖21.從生活和自然中學(xué)習(xí)配色技巧
重慶分公司
重慶分公司
