如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

當別人問你什么是交互設(shè)計時，你又一臉懵逼了。本篇文章就來好好聊聊什么是交互設(shè)計

工作了很多年，卻依然說不出何為交互設(shè)計。一說道理，大家都懂，但是當別人問你什么是交互設(shè)計時，你又一臉懵逼了。為什么會這樣呢？因為我們沒有自己去總結(jié)，沒有形成自己的知識庫。

交互設(shè)計，它由IDEO的一位創(chuàng)始人比爾?莫格里奇在1984年一次設(shè)計會議上提出，他一開始給它命名為“軟面（Soft Face）”，由于這個名字容易讓人想起和當時流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后來把它更名為“Interaction Design”――交互設(shè)計。

首先，我們來看看權(quán)威方對交互設(shè)計的定義：

交互設(shè)計協(xié)會(The Interaction Design Association (IxDA))解釋如下：

交互設(shè)計師以創(chuàng)造有用且實用的產(chǎn)品及服務(wù)為宗旨。以用戶為中心作為設(shè)計的基本原理，交互設(shè)計的實際操作必須建立在對實際用戶的了解之上：包括他們的目標、任務(wù)、體驗、需求等等。以用戶為中心的角度出發(fā)，同時努力平衡用戶需求、商業(yè)發(fā)展目標和科技發(fā)展水平之間的關(guān)系，交互設(shè)計師為復(fù)雜的設(shè)計挑戰(zhàn)提供解決方法，同時定義和發(fā)展新的交互產(chǎn)品和服務(wù)。

 

百度定義如下：

交互設(shè)計（英文Interaction Design, 縮寫IXD)，是定義、設(shè)計人造系統(tǒng)的行為的設(shè)計領(lǐng)域，它定義了兩個或多個互動的個體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達成某種目的。交互設(shè)計努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以“在充滿社會復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計的目標可以從“可用性”和”用戶體驗“兩個層面上進行分析，關(guān)注以人為本的用戶需求。

 

唐納德諾曼給出的定義：

重點關(guān)注人與技術(shù)的互動。目標是增強人們理解可以做什么，正在發(fā)生什么，以及已經(jīng)發(fā)生了什么。交互設(shè)計借鑒了心理學(xué)、設(shè)計、藝術(shù)和情感等基本原則來保證用戶得到積極的、愉悅的體驗。

 

首先要知道什么是交互

交互，及溝通交流，發(fā)生互動關(guān)系。比如人和人之間的交互就比較好理解，最經(jīng)典的一幕可以用孫悟空智斗金角大王、銀角大王。金角大王說：孫行者，我叫你一聲你敢答應(yīng)嗎？然后，金角大王就叫：孫行者。孫悟空回答：爺爺在此。就這樣，孫悟空就被收進去了。這就是一個簡單的交互。

再比如，我們每天上班，到公司和同事打招呼。你說：“早上好呀”，同事回答“早”。這也是一個常見的交流互動。

 



 

人和人之間的交互比較好理解，那人和機器呢？其實也是非常好理解的。我們都忘不了微信推出的搖一搖功能，打開搖一搖，搖動手機，就會出現(xiàn)“咔咔”的聲音，然后加載，搜尋出一個和你同時在搖的人。其實，我們和任何機器之間的發(fā)生互動關(guān)系，都是屬于交互。往更廣的意義上說，如果失去了交互，地球?qū)⒉辉龠\轉(zhuǎn)，將毫無生機?，F(xiàn)在，智能時代已經(jīng)到來，我們除了研究人和人、機器、產(chǎn)品、環(huán)境、服務(wù)、系統(tǒng)等之間的關(guān)系，還要研究機

器和人、機器、產(chǎn)品、環(huán)境、服務(wù)、系統(tǒng)之間的關(guān)系。

 



 

總之，當人（或機器）和事物（無論是人、機器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）發(fā)生雙向的信息交流和互動，就是一種交互行為。

 



 

其次，我們來聊聊設(shè)計

聊設(shè)計之前，我們要先說說藝術(shù)，原研哉老師對設(shè)計和藝術(shù)的描述非常精辟，下面就引用他的話。

 


 

藝術(shù)說到底是個人意愿對社會的一種表達，其起源帶有非常個人化的性質(zhì)，所以只有藝術(shù)家自己才知道其作品的來源。這種玄虛性使得藝術(shù)“很酷”。當然，解讀藝術(shù)家生成的表達有多種方式。非藝術(shù)家通過對藝術(shù)的有趣闡釋與藝術(shù)互動，欣賞之，評論之，在展覽中對藝術(shù)進行再創(chuàng)作，或把藝術(shù)當做一種知識資源使用。

而設(shè)計，則基本上不是一種自我表達，它源于社會。設(shè)計的實質(zhì)在于發(fā)現(xiàn)一個很多人都遇到的問題，然后試著去解決的過程。由于問題的根源在社會內(nèi)部，除了能從設(shè)計師的視角看問題外，每個人都能理解解決問題的方案和過程。設(shè)計就是感染，因為其過程所創(chuàng)造的啟發(fā)，是基于人類在普遍價值和精神上的共鳴。（來源，原研哉，設(shè)計中的設(shè)計）

通過上述的描述，我們不難發(fā)現(xiàn)，設(shè)計主要表現(xiàn)在發(fā)現(xiàn)問題–解決問題。而交互設(shè)計就是發(fā)現(xiàn)和解決人（或機器）和事物（包括人、機器、產(chǎn)品、服務(wù)、系統(tǒng)、環(huán)境等等）之間的互動關(guān)系問題。

所以說，交互設(shè)計的范圍是非常廣的，和各個學(xué)科都有涉及，我們可以通過下面的圖來看看交互設(shè)計和各個領(lǐng)域之間的關(guān)系。

 



 

那交互設(shè)計主要是做什么工作呢？

作為交互設(shè)計師，也應(yīng)該好好問問自己這個問題。通常，外界的人就認為我們就是畫畫原型，或者有時候畫畫UI，而我們通常就是這么做的，所以也不得不讓人們這么想。而現(xiàn)在大多數(shù)交互設(shè)計就是指移動端、網(wǎng)頁端的交互設(shè)計。

那么交互設(shè)計的核心競爭力是什么呢？對于很多公司來說，其實是沒有交互設(shè)計這個崗位的，交互的工作就由產(chǎn)品經(jīng)理和UI設(shè)計師各自分擔了?，F(xiàn)在產(chǎn)品經(jīng)理基本都掌握了原型技能，而且產(chǎn)品經(jīng)理通常在做需求移交的時候已經(jīng)把交互表達的很清楚了。而且很多UI設(shè)計師能力較強一點的，在做設(shè)計的時候都會考慮到交互。如果交互設(shè)計師在公司就只做做原型，那么，你就會被取代。

那么交互設(shè)計的工作內(nèi)容到底包含哪些呢？《用戶體驗要素》這本書很好的說明了這些內(nèi)容。本書把用戶體驗要素分五個層級：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。不同層級，表示著你的不同能力，引用一下大眾點評高級交互設(shè)計經(jīng)理范怡的一張圖，比較形象的描繪了交互設(shè)計的能力范疇和價值。

 



 

怎么樣，看到這些是不是有一點點覺悟了呢。如果想做好一名交互設(shè)計師，就應(yīng)該擴大自己的能力范圍，提升自身價值。怎樣做好交互設(shè)計呢？如何運用設(shè)計原理來做交互設(shè)計呢，我們下篇來聊聊唐納德羅曼老師書里的交互設(shè)計6要素：示能、意符、約束、映射、反饋、概念模型。

 

原文地址：站酷
作者：Luyeelin

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

第一段：工具

設(shè)計師學(xué)習(xí)的第一階段其實都是從工具開始的。這分為兩種：
第一種是有形工具，比如PS、AI、Axure之類的軟件；
另一種是無形工具，就是設(shè)計時用到的思維方式。
1、有形工具
先說第一種有形工具。
很多人在學(xué)習(xí)UI時很容易陷到工具的學(xué)習(xí)里去，覺得工具學(xué)的越多能力就越強。其實根本不是這么一回事，軟件對交互來說是非?；A(chǔ)的一部分。
從UI視覺方面來考慮，PS就足夠了，AI都顯得略有多余，不需要其他軟件。PS其實是一款非常強大的視覺軟件，切圖也比較方便，BAT等公司也是用的PS。
還有輸出交互文檔的工具，一種是PPT，一種是Axure，這兩款軟件就足夠覆蓋絕大多數(shù)交互文檔了。當然還有其他軟件，如果是快速迭代的原型直接在紙上畫也可以。
交互需要快速溝通，你要拿著設(shè)計反復(fù)和其他人對接。要是搞了個很生僻的軟件給別人，結(jié)果別人打不開，老板就會罵你。要記住自己是設(shè)計的一環(huán)，能快速傳遞自己的設(shè)計思路才是最重要的，不要搞一些生僻的軟件、格式和字體，這都是門外漢干的事。
像AE、Flash面試時可能會給你加分，因為公司可能有一些高保真的動畫展示要做，其實在真實工作中用到的機會非常少。
2、無形工具
第二種是無形的思考工具。設(shè)計思維其實最不好培養(yǎng)，說的殘酷點，你可能看五年的書都出不來思維，最好能有人指點一下。

第二段：新產(chǎn)品、新思路

前沿的設(shè)計意識，是很多設(shè)計師容易忽略的。
這個怎么練呢？
每天一定要抽出三十分鐘的時間看新產(chǎn)品和新思路，這是今天的互聯(lián)網(wǎng)設(shè)計師必須要干的一件事。很多一線團隊每天都會分享各種各樣的新聞，百度有自己的分享機制，三星喜歡每個月讓設(shè)計師找的交互、用研、技術(shù)信息，收集起來專門搞一個月報。
設(shè)計師有很多渠道可以看前沿信息，比如互聯(lián)網(wǎng)一些事，愛范，36kr，癮科技之類的網(wǎng)站。這種前沿意識非常重要，它決定了你能在二流公司還是一流公司，這是排在第二位的。
這個堅持三個月以后，自然而然就會飛躍，不需要怎么特意去學(xué)，這可不是培訓(xùn)可以得到的，養(yǎng)成一個好的習(xí)慣，每天看半小時其實就是最好的學(xué)習(xí)。

第三段：人——對人和需求的研究

工具和思維的問題比較好解決，最難解決的問題其實是“人”的問題?？赡芎芏嘣O(shè)計師一輩子都解決不了“人”的問題，而它對企業(yè)的影響又是最大的，交互設(shè)計最重要的就是解決“人”的問題。這一點甚至能決定一款千萬級甚至上億級產(chǎn)品的生死。要知道你的一切設(shè)計行為都是為商業(yè)負責(zé)的，所以前期對交互不甚了解，可以先從PS開始，后期就是“思維”和“人”，這兩個東西是比較難的。


看看前輩是怎么說的：

交互設(shè)計目前發(fā)展得怎樣，前景如何？
答：現(xiàn)在我們接觸到的交互設(shè)計可能只局限在網(wǎng)頁或者APP這種，交互設(shè)計是個很廣泛的概念，前景肯定是有的?；ヂ?lián)網(wǎng)是人和服務(wù)的對接，很多嶄新的設(shè)計和商業(yè)模式一旦出來，那就是新的商機。

新手自學(xué)UI應(yīng)該從何處入手？
答：視覺基礎(chǔ)不好的就學(xué)PS去臨摹，現(xiàn)在很多開源的信息，比如學(xué)UI網(wǎng)。如果臨摹到一定程度，可以看一看dribbble，其實視覺非常好解決，思維的提升才困難。

學(xué)習(xí)交互設(shè)計需要掌握什么軟件？
答：PPT和axure足夠了，這兩個東西都不需要學(xué)。隨便來個人學(xué)兩三天都能拿著軟件畫出漂亮的線框圖，關(guān)鍵是你的線框圖從哪里來、為什么要這么畫。

交互設(shè)計師需要學(xué)習(xí)代碼嗎？
答：交互設(shè)計師不需要學(xué)代碼。知道為什么企業(yè)招聘要求你們懂代碼嗎？因為很多企業(yè)希望你做了設(shè)計做前端，節(jié)省人力成本，正式公司都不會有這個要求。就算你覺得設(shè)計師應(yīng)該學(xué)代碼，建議你還是先把本行的設(shè)計能力學(xué)好。當兩件事你都要做的時候意味著哪件事你都做不好，這是自我管理的問題。

交互需要手繪功底嗎？
答：手繪功底？有或者沒有都可以，交互不需要你造型能力多強，你只要能把邏輯關(guān)系畫出來就行了，不需要搞什么素描陰影。你不是要做畫家，朋友們，畫家和設(shè)計師是有區(qū)別的。

（內(nèi)容來源網(wǎng)絡(luò)，如有侵權(quán)請聯(lián)系，承諾必定刪除）

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

常見的網(wǎng)頁設(shè)計、文章設(shè)計錯誤
本文來自阮一峰分享

 1.內(nèi)容未按邏輯分成塊

用戶可以根據(jù)邏輯塊輕易的獲取信息。

具體做法為：將padding設(shè)置為120px-180px，同時不同的邏輯塊使用不同的背景。

2.每個邏輯塊的空白大小不一致 

對于每個邏輯塊，需要設(shè)置同等大小且適宜的空白。否則網(wǎng)頁看起來會很混亂，作者不會對每個邏輯塊同等對待。



 

3.Padding不能設(shè)置過小，否則用戶無法將內(nèi)容分為邏輯塊

 為了這點，插入大的空白（至少120px），以使內(nèi)容按邏輯塊分開。





4.背景圖片和文字 應(yīng)該對比鮮明

 


5.在一頁中，樣式過多

太多不同 的排版和樣式將會使得頁面不太專業(yè)以及難以閱讀。

解決的方法是，以字體為例，設(shè)置一種字體，字體為正?；虼煮w（保證在兩種不同樣式之內(nèi)）



 

6.背景顏色塊過于狹窄




7. 在一個狹窄的列中，放入了過多的文字

這導(dǎo)致用戶閱讀需跳很多行，整體看起來也不行。推薦的做法為，減少列的數(shù)量，精煉文字。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

解決問題的最佳方式可以是最大限度地降低問題的負面影響甚至將其消除，也可能是讓事物呈現(xiàn)出其應(yīng)有的樣子，此外再無更好的選擇。就像 Facebook 的產(chǎn)品設(shè)計師 Ruthia He 提到的「Good design is both invisible and obvious」（好設(shè)計是無形也是顯而易見的）。真正的好設(shè)計能給到用戶的是用戶心中對它所期待的樣子，所以「設(shè)計」會符合常理到讓人無從察覺。其實這其中的每一個體驗流程、觸點安排抑或是設(shè)計細節(jié)，都是設(shè)計師們的精心策劃與用心。

為什么有時候在「朋友圈」發(fā)狀態(tài)，文字信息會被折疊？

自從「微信」發(fā)布 7.0 的新版本后，部分朋友圈信息會被折疊的問題受到了廣泛的討論。騰訊的公關(guān)總監(jiān)張軍對此給出了官方解釋：當用戶在「微信」發(fā)表原創(chuàng)內(nèi)容即直接輸入文字，信息會折疊較少，文字會得到較大面積的展示；而當用戶發(fā)布粘貼復(fù)制的內(nèi)容時，文字只會顯示一行，其他信息將會被折疊。團隊做這樣的信息呈現(xiàn)設(shè)計是為了鼓勵用戶多發(fā)原創(chuàng)內(nèi)容，提升朋友圈的整體使用體驗。

旅游達人都愛的Booking為什么這么好用？

從「Booking繽客」預(yù)定酒店住宿后，系統(tǒng)會自動下載訂單信息至本地。這樣，當用戶到達目的地時無論當?shù)鼐W(wǎng)絡(luò)狀況如何（哪怕出現(xiàn)因網(wǎng)絡(luò)原因無法正常訪問 App 的情況），仍可毫無壓力地隨時查看訂單詳情頁。畢竟作為一家定位于幫用戶在網(wǎng)絡(luò)上預(yù)訂世界各地住宿的國際化平臺，用戶身處異國地區(qū)需要查看住宿信息的使用場景很普遍。這個看似不起眼的小細節(jié)，卻從設(shè)計邏輯的層面優(yōu)化提升了產(chǎn)品的易用性，讓產(chǎn)品真正貼近用戶真實的使用場景，變得更加好用。

B站是如何營造陪伴感，讓用戶看劇不孤單的？

Bilibili 網(wǎng)站的電腦端不僅會在主頁顯示在線總用戶人數(shù)，還會在每個視頻的播放頁面顯示當前正在觀看此視頻的人數(shù)。將原本后臺統(tǒng)計的數(shù)據(jù)顯性化呈現(xiàn)在用戶可見的頁面，一方面利用訪問數(shù)據(jù)吸引用戶的好奇心進行觀看，另一方面也會給予用戶陪伴感與歸屬感。當看到有這么多小伙伴與你同時在線觀看同一部影片，雖然看不見彼此，但心理上會有陪伴感。一個人在家看劇仿佛也沒那么孤單了。

如何保證用戶的操作行為，始終位于手部舒適區(qū)之內(nèi)？

多數(shù)產(chǎn)品在設(shè)計頁面模態(tài)彈窗引導(dǎo)用戶操作行為時，都會將操作控件放在固定的頁面位置（一般居中或者處于頁面底部）。但「抖音」的設(shè)計卻讓人眼前一亮：系統(tǒng)會自動檢測用戶進行操作時手指與屏幕的接觸位置，并將模態(tài)彈窗的操控按鈕顯示在離用戶手指最近的地方。隨用戶手部活動區(qū)域變化而靈活變更位置的模態(tài)彈窗設(shè)計，使用戶在進行手勢交互的過程中，操作動作能始終在手部的舒適區(qū)域內(nèi)進行，是應(yīng)對大屏?xí)r代十分友好的體驗設(shè)計。

為了改善長文閱讀體驗，我們悄悄開發(fā)了這個小功能

不知道你有沒有發(fā)現(xiàn)「優(yōu)設(shè)」的文章瀏覽頁面右下角隱藏有「文章目錄」的按鈕。將鼠標移到按鈕上可以看到文章目錄的小導(dǎo)航。小標題的羅列既清晰呈現(xiàn)了文章結(jié)構(gòu)，幫助讀者迅速理解文章；又能起到快速定位文章內(nèi)容的作用，一鍵直達想看的內(nèi)容區(qū)域。閱讀篇幅較長的文章對于缺少耐心或講究效率的同學(xué)而言，無疑是痛苦的。有了這個「目錄」功能的設(shè)計，看長文時的舒適度與閱讀效率都加倍了。

天天聽「網(wǎng)易云音樂」的你，可能都沒發(fā)現(xiàn)這個小秘密

我們天天聽歌的「網(wǎng)易云音樂」，在有網(wǎng)與無網(wǎng)狀態(tài)下打開應(yīng)用的跳轉(zhuǎn)頁面其實是不同的。因為對用戶而言，只有在有網(wǎng)絡(luò)尤其是無線網(wǎng)絡(luò)的場景里才會在線聽歌，當播放器處于無網(wǎng)狀態(tài)下能夠播放的只有本地音樂資源。所以設(shè)計團隊根據(jù)用戶具體的使用場景，設(shè)定用戶在有網(wǎng)狀態(tài)下打開 App 會進入「發(fā)現(xiàn)」的音樂首頁，而在無網(wǎng)情境里會直接跳轉(zhuǎn)「我的音樂」頁面。音樂首頁便于用戶發(fā)現(xiàn)音樂資訊與歌單推薦，在線聽歌；而「我的音樂」方便直接打開「本地音樂」列表，離線聽歌。區(qū)別化的頁面跳轉(zhuǎn)為用戶縮短了行為路徑，節(jié)省了操作步驟，讓使用體驗更貼合具體使用場景。

當你在「騰訊視頻」追劇播放進程被電話打斷…

在「騰訊視頻」看視頻如果遇到播放進程被其他任務(wù)打斷暫停的情況（比如接電話或者分享），當再次回到播放界面時當前視頻并不是接著剛剛的暫停處播放的，而是會從暫停處往前倒幾秒播放。這就如同我們追劇時會看到很多片頭都有回顧上一集劇情的道理。在這里，「騰訊視頻」是想讓用戶通過復(fù)習(xí)倒回的幾秒老畫面回憶起之前的劇情，接著看新畫面時就能更好地連接完整劇情，得到更加沉浸的觀看體驗了。同樣擁有這個貼心設(shè)計的還有「優(yōu)酷視頻」。

「抖音」是怎樣利用一個按鈕的小心機，達到鼓勵用戶分享行為的目標的？

在「抖音」的內(nèi)容推薦頁面刷視頻時，你會發(fā)現(xiàn)正常情況下頁面右側(cè)的「分享」按鈕顯示為代表分享含義的普通 icon。但如果你在當前頁面停留時間較久觀看該短視頻第三遍時，系統(tǒng)會預(yù)判用戶對此內(nèi)容感興趣并有潛在分享意愿，此時右側(cè)的「分享」按鈕就會變成閃動的朋友圈或微信圖標了。差異化的圖標變化設(shè)計突出了「分享」功能，一方面是對用戶心理與動作的預(yù)判揣摩，另一方面也從潛意識里起到了鼓勵用戶分享行為的目的。做產(chǎn)品，想辦法驅(qū)動用戶分享行為真的很重要。

在社交產(chǎn)品發(fā)布狀態(tài)收到CEO的點贊，是種什么樣的心情？

玩「即刻」的同學(xué)應(yīng)該都有發(fā)現(xiàn)，「即刻」CEO 瓦恁的賬號在社區(qū)內(nèi)活躍得像高仿。時常更新自己的狀態(tài)分享生活日常以及常常點贊回復(fù)用戶的舉動，讓瓦總收獲了一批忠實粉絲。還有一個很有意思的互動是：所有用戶在「即刻」發(fā)表的第一條狀態(tài)都會被 CEO 瓦恁點贊，這對于新用戶而言會得到很大的驚喜和虛榮心上的小滿足吧。雖然新用戶第一條點贊應(yīng)該是代碼小哥哥又調(diào)皮了，但 CEO 時不時地參與到用戶的互動中，確實是不錯的增加用戶粘性的方式。

「支付寶」收款碼的隱藏小心機

「支付寶」的收錢功能我們都很熟悉：打開自己的收款碼設(shè)置好金額，再拿給對方掃碼即為收錢。但你可能沒注意，當手機處于向下傾斜的角度給對方進行展示時，界面會自動旋轉(zhuǎn)二維碼的朝向并將按鈕置灰不可點擊。這里的二維碼旋轉(zhuǎn)設(shè)計是為了方便對方看即掃碼，而按鈕置灰則是防止用戶誤操作點擊到設(shè)置金額。從用戶日常行為出發(fā)，解決掃碼不便的麻煩，真是隱藏很深的小細節(jié)大體驗。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

實現(xiàn)的最終效果圖（文末會貼出全部代碼，方便參考） 



1， 將此行代碼加在紅線所在的位置

,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}


2，在合適的HTML位置加入 

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">編輯</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">刪除</button>
    </div>
</script>
全部代碼：

{include file="common/header"}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首頁</a>
        <a href="">演示</a>
        <a>
          <cite>導(dǎo)航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">?</i></a>
</div>

<table class="layui-hide" id="test" lay-size="sm" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">編輯</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">刪除</button>
    </div>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:"{:url('admin/user/page')}"
            ,page: { //支持傳入 laypage 組件的所有參數(shù)（某些參數(shù)除外，如：jump/elem） - 詳見文檔
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
                //,curr: 5 //設(shè)定初始在第 5 頁
                ,limit:10 //一頁顯示多少條
                ,limits:[5,10,15]//每頁條數(shù)的選擇項
                ,groups: 2 //只顯示 2 個連續(xù)頁碼
                ,first: "首頁" //不顯示首頁
                ,last: "尾頁" //不顯示尾頁
            }
            ,cols: [[
                {field:'id', width:80, title: '代理ID', sort: true}
                ,{field:'username', width:100, title: '代理名稱'}
                ,{field:'level', width:100, title: '代理級別'}
                ,{field:'email', width:80, title: '電子郵箱'}
                ,{field:'phone', width:280, title: '手機號'}
                ,{field:'agent_id', width:280, title: '上級代理ID'}
                ,{field:'status', width:280, title: '是否啟用'}
                ,{field:'isAuth', width:280, title: '是否已經(jīng)認證'}
                ,{field:'money', width:280, title: '金額'}
                ,{field:'created_time', width:280, title: '訪問時間',sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
            ]]

        });


        //監(jiān)聽工具條
        table.on('tool(test)', function(obj){ //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應(yīng)的值"
            console.log(obj);
            var data = obj.data; //獲得當前行數(shù)據(jù)
            var layEvent = obj.event; //獲得 lay-event 對應(yīng)的值（也可以是表頭的 event 參數(shù)對應(yīng)的值）
            var tr = obj.tr; //獲得當前行 tr 的DOM對象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //刪除
                layer.confirm('真的刪除行么', function(index){
                    obj.del(); //刪除對應(yīng)行（tr）的DOM結(jié)構(gòu)，并更新緩存
                    layer.close(index);
                    //向服務(wù)端發(fā)送刪除指令
                });
            } else if(layEvent === 'edit'){ //編輯
                //do something

                //同步更新緩存對應(yīng)的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

    });

</script>
</body>
</html>

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

在這個看臉的時代，無論是真實社交，還是網(wǎng)絡(luò)社交，甚至虛擬形象社交，都是「顏值即正義」。長得好看是一大優(yōu)勢，或者至少要滿足彼此的審美才有進一步發(fā)展的可能。當然要想真正地完成社交目的，還是要看個人的社交能力。在進行網(wǎng)絡(luò)社交時（興趣社交除外），可謂「無頭像，不社交」，畢竟跟陌生人搭訕的篩選成本太高，看頭像照片是最直接快速的方式。據(jù)說，有好事者在三里屯注冊了某一款陌生人社交軟件，并將頭像設(shè)置成了一個在盧浮宮的露背少女照片，在短短時間內(nèi)，居然收到了 10000 多次點贊，頭像的魔力可見一斑。

頭像設(shè)置流程

頭像設(shè)置流程一般包括頭像選擇、上傳、裁剪、預(yù)覽四個步驟，在用戶界面展現(xiàn)時，部分步驟可合并或跳過，但至少要包括裁剪和預(yù)覽。

1. 選擇圖片源

頭像圖片的來源包括本地圖片、系統(tǒng)推薦頭像、用戶個人線上相冊、即時拍攝等。同一產(chǎn)品在不同端可以支持不同的上傳渠道，比如 PC 端攝像頭拍攝質(zhì)量不佳，而且臺式機不一定配備，一般可以不做支持。

2. 上傳條件限制

上傳本地圖片作為頭像時，圖片的格式、尺寸、文件大小規(guī)則應(yīng)盡量放開限制，至少要支持 JPG、GIF、PNG、JPEG、BMP 等格式。隨著手機拍攝照片的尺寸和大小越來越大，所以 5~6M 是一個比較合適的上限。關(guān)于服務(wù)器圖片存儲，應(yīng)保留一張高清大圖和多套不同尺寸的縮略圖。

3. 裁剪處理

圖片裁剪包括系統(tǒng)自動裁剪和用戶手動裁剪。如果不支持手動裁剪，最好把系統(tǒng)自動裁剪和截取做了。京東商城 web 端就沒有截取圖片中央?yún)^(qū)域，而是直接擠壓或拉伸圖片，導(dǎo)致圖片變形效果很差。手動裁剪時，一般要輔助縮放、旋轉(zhuǎn)、鏡像等功能。縮放時需注意極限值，否則會導(dǎo)致背景空白（如QQ空間），要做相應(yīng)的填充處理。裁剪框最好加入輔助線（如九宮格、方圓）和遮罩，方便實時預(yù)覽方形和圓形頭像的效果。有時也會加入濾鏡、貼紙等功能。

4. 效果預(yù)覽

「所見即所得」是打造優(yōu)良用戶體驗的訣竅之一，所以提供實時反饋和預(yù)覽是必不可少的。比如裁剪得到的各種形狀和尺寸的預(yù)覽，濾鏡效果實時渲染等。當然，實時性也和系統(tǒng)性能有關(guān)。

頭像的常見展示形狀包括方和圓，有時也有異形頭像。關(guān)于頭像形狀的「方圓」論證可以參考微信和 QQ 設(shè)計師的官方回復(fù)。

同樣作為騰訊的產(chǎn)品，為什么 QQ 的頭像是圓的？而微信的頭像是方的呢？

騰訊的回應(yīng)如下：

相比方形，人的頭像更接近圓形。圓形 QQ 頭像能更突出頭像弱化背景，也更鼓勵用戶使用真實自拍作為 QQ 頭像。

QQ 作為平臺會接入游戲和第三方應(yīng)用內(nèi)容，圓形 QQ 頭像在這些方形、異形圖標環(huán)境中提高辨識度，降低用戶的認知門檻。

QQ 希望給用戶傳遞樂在溝通，展現(xiàn)年輕個性的態(tài)度，圓形 QQ 頭像更具靈動和活力，與之無縫銜接的頭像掛件也為用戶帶來更個性化的搭配和豐富的自我展示。

因為照片本來是方的，方頭像更符合用戶習(xí)慣。

《為什么微信頭像是方的？QQ頭像是圓的？｜你問鵝答》

還有百度小程序關(guān)于頭像的規(guī)范可供參考：頭像應(yīng)保證清晰，頭像的主體元素在方形或圓形參考線內(nèi)，不遮擋關(guān)鍵信息，確保前端展現(xiàn)時能在圓形輪廓中展現(xiàn)完全。

設(shè)置頭像的12種方式

1. 默認頭像

為縮短注冊流程，減少潛在用戶流失，用戶注冊過程中一般不會強制用戶設(shè)置頭像。所以，為防止用戶不去設(shè)置頭像以及頁面中頭像加載不出來，系統(tǒng)會提供默認頭像以便在相關(guān)位置展示?？梢圆捎没疑^像，也可以采用基于企業(yè)吉祥物卡通形象設(shè)計的彩色頭像（例如蝦米、轉(zhuǎn)轉(zhuǎn)）。二者各有好處，灰色頭像可以時常提醒用戶去設(shè)置頭像，彩色頭像則可以豐富畫面、增加趣味性。不過唯一的遺憾是一旦設(shè)置了新頭像，改不回默認頭像了，畢竟有的默認頭像還是挺好看的。有的社區(qū)允許游客用戶進行點贊、評論等操作，這時便會用到游客默認頭像。當然，同一系統(tǒng)內(nèi)，默認頭像也可以不唯一，比如，根據(jù)用戶性別、星座匹配頭像，根據(jù)用戶身份角色匹配頭像（司機/乘客，招聘者/求職者），或者制作頭像庫為用戶隨機分配頭像。

2. 系統(tǒng)推薦頭像

讓用戶自己拍攝或找到一張自己滿意的圖片做頭像，對有些用戶而言其實是一件成本比較高的事情。如果用戶群體足夠大，圖片質(zhì)量難以保證，甚至內(nèi)容監(jiān)管又會帶來新的問題，所以推薦一些優(yōu)質(zhì)頭像供用戶挑選，就成了一個很不錯的輔助解決方案。QQ 很早就推出了類似功能，甚至成了會員服務(wù)的一部分。平安金管家 APP 也有類似功能，提供了四個商務(wù)風(fēng)格的卡通頭像供用戶選擇。

最近比較火的匿名社交APP Soul 也同樣支持使用系統(tǒng)推薦頭像，而且是只能使用系統(tǒng)頭像，如下圖所示，用戶可以根據(jù)自己所設(shè)置的性別，頭像風(fēng)格選擇心儀的頭像。Soul 不允許用戶上傳其他照片作為頭像，也是希望用戶能拋開顏值，找到真正的靈魂伴侶。這些頭像本身也體現(xiàn)了用戶個體的審美情趣、價值觀等。最近 Soul 新上線了「超萌捏臉功能」，下文會著重詳細分析，不過捏臉而成的頭像依然可以算是系統(tǒng)推薦頭像，只是把頭像拆解成了頭發(fā)、臉、眉毛、眼睛、鼻子、嘴巴、衣服配飾等元素，然后再由用戶自己排列組合。

3. 隨機選擇頭像

前文也提到了隨機頭像，即系統(tǒng)會在用戶注冊成功后為其隨機匹配頭像，避免單一默認頭像的沉悶，記憶中以前 GitHub 就是采用這種做法。另一種隨機頭像是指用戶主動選擇隨機頭像，獲得相應(yīng)的驚喜，比如嗶哩嗶哩就采用了這種做法。不過實在難以琢磨出這種類似「變臉」的玩法背后的設(shè)計邏輯。

4. 使用歷史頭像

在用戶使用過一段產(chǎn)品之后，可能會積累大量的歷史頭像（主要是用戶自主上傳的，使用過的系統(tǒng)頭像不記錄在內(nèi)）。QQ 就把用戶的這些頭像收集起來展示給用戶，以便用戶查看或重新選擇，雖然用戶重新使用的幾率并不大，但不失為一種增進用戶情感、提高用戶粘性的做法，畢竟這里面滿滿都是青春的回憶，很容易給用戶帶來觸動。

微信也有類似的做法，不過只能查看上一張頭像。微信的設(shè)計哲學(xué)是不去刻意討好用戶，所以這里更多的是防止用戶反悔，方便用戶在最近使用的兩張頭像之間切換對比。馬蜂窩的做法與 QQ 類似，不過增加了刪除歷史頭像的功能（當前頭像不可刪除）。聊天寶（原子彈短信）有很多錘子的設(shè)計基因，錘子的設(shè)計師們推崇工匠精神，愛為用戶創(chuàng)造小驚喜，所以聊天寶不能查看自己的歷史頭像，但卻能查看好友的歷史頭像。不妨推測下背后的設(shè)計動機：現(xiàn)代人分分鐘互相加個好友，但可能來不及備注，而人們對圖像的記憶更準確、持久，所以看到頭像可能就會很快地回憶起好友姓名、相識的場景等信息。

5. 文本頭像

文本頭像在商務(wù)類應(yīng)用中比較常見，例如 OA。由于辦公社交的社交屬性并不是很強，更多在于及時通訊，所以圖片頭像并不是特別重要，并且文本頭像中的字號更大，更容易辨識。要注意文本顏色和背景顏色的對比度，另外同一個應(yīng)用中，文本和背景可以多做幾個配色方案隨機展示，以豐富視覺效果。此外還要注意文本的取值顯示規(guī)則，下圖是釘釘?shù)牟糠猪撁娼貓D，可以從中推測：

• 漢字類：單個或兩個漢字展示全部漢字，三個及以上漢字僅展示后兩個漢字；
• 英文類：一個單詞時取前兩個字母，兩個及以上單詞取前兩個單詞的首字母；
• 數(shù)字類：單個或兩個數(shù)字展示全部數(shù)字，三個及以上數(shù)字僅展示后兩個數(shù)字。

6. 角色頭像/匿名頭像

相信很多人都玩過 QQ 的匿名聊天功能，然后就被管理員禁止了，它更像是一種娛樂性玩法。其實還有類似的做法，在游戲中較為常見，在角色確定前顯示的是用戶頭像，角色確定后就顯示角色頭像。比如斗地主，地主身份確定前顯示用戶本身頭像，確定后則顯示角色頭像，而且還會根據(jù)角色性別顯示相應(yīng)頭像。

7. 動態(tài)視頻頭像

動態(tài)視頻頭像可以讓用戶跨越時間維度從多角度展示自己。依然以 QQ 為例，動態(tài)頭像分兩種，一種是 QQ 會員才可使用的動態(tài)頭像，由系統(tǒng)推薦，用戶自主選擇；另一種是讓用戶自己拍攝錄制。具體流程如下圖，用戶先錄制視頻，然后選擇一幀作為靜態(tài)頭像，以便能在不支持展示動態(tài)頭像的地方展示。這也是目前的一大趨勢，不過如果好友列表的頭像都在動也還挺嚇人的。

8. 輪播頭像

針對陌生人社交場景，如探探，頭像更顯得重要，左滑還是右滑就在剎那之間，點進去主頁也根本不會下滑屏幕細看具體的興趣、資料，所以就要盡量在首屏展示更多更大更清晰的照片，輪播圖就是一種很好的形式。探探最多可設(shè)置 6 張圖片或 6 段視頻作為輪播頭像。其實，輪播頭像類似 QQ 照片墻的概念，不過自我展示意味更濃。

采用類似輪播頭像做法的還有音遇 APP，雖說主張以歌會友，但誰都喜歡唱歌好聽的小哥哥小姐姐還有高顏值。如下圖，個人主頁背景圖即頭像輪播。還有一些社交軟件可以將個人系列頭像設(shè)為私密，然后定向開放展示給需要的人。

9. 捏臉頭像

ZEPETO（中文名：崽崽）的火爆刮起了一陣虛擬形象社交的風(fēng)潮，雖然是三維形象的玩法，但和之前紅極一時的臉萌并沒有本質(zhì)的區(qū)別，要想實現(xiàn)從工具到社交的轉(zhuǎn)變，獲取關(guān)系鏈才是王道。多閃和 Soul 動作也很快，已經(jīng)上線了捏臉功能，雖然目前是二維的，但相信巨頭們早已開始布局三維虛擬形象社交了。目前 ZEPETO 可編輯臉型，甚至可以進行簡單的化妝。服裝配飾則包括衣服、頭飾、首飾等，且支持按上架時間、價格等排序。室內(nèi)裝飾則涵蓋了地板、家具、擺件、樂器等等。手勢主要是一些肢體動作庫，動作效果十分連貫?？梢哉f ZEPETO 集成了用戶對場景搭建+服飾搭配+顏值定義+炫酷動作的完美幻想，同時也擴充了人們對虛擬形象社交乃至電商新形態(tài)的想象空間。

目前市面上，尤其是游戲領(lǐng)域，不管畫風(fēng)是 Q萌，還是 3D，時尚亦或仙俠，人物建模及捏臉系統(tǒng)已經(jīng)比較完善，且得到廣泛應(yīng)用。這里推薦一款叫做 IMVU 的 APP，它的人物畫風(fēng)、服飾質(zhì)感比 ZEPETO 更加寫實，更偏成人化，視角轉(zhuǎn)換也更加流暢，支持俯視/仰視。不過，臉萌早已涼涼，美圖的圖片社交之路似乎完全和 ins 對不上標，所以 3D 虛擬形象社交的未來之路也未可知。

10. 頭像掛件

頭像掛件、等級徽章、認證標志也屬于頭像的一部分，不過需要結(jié)合付費會員、用戶成長體系、認證規(guī)則進行討論才有意義。

11. 使用第三方頭像

使用第三方社交賬號快速登錄已經(jīng)成為登錄注冊頁面的標配，畢竟一個授權(quán)就解決了賬號注冊、頭像及昵稱設(shè)置等問題。這兩天，吃瓜群眾們又一次見證了「頭騰大戰(zhàn)」。多閃使用了用戶的微信頭像和昵稱，可是并沒有得到相應(yīng)授權(quán)，因為之前的授權(quán)是給抖音的，當然現(xiàn)在也停止授權(quán)了。不管是不是抖音碰瓷，但微信/QQ 賬戶上的頭像、昵稱的權(quán)益歸屬確實是個問題。個人上傳的頭像還好說，如果用的是系統(tǒng)推薦頭像，這些圖片的版權(quán)是不是歸屬騰訊呢？用戶使用第三方登錄后，最好還是引導(dǎo)用戶盡快綁定手機并設(shè)置完善其他資料。

12. 群組頭像

這里以 QQ、微信和釘釘為例進行分析。微信群聊頭像由群成員頭像組合生成，在方框內(nèi)嵌套群成員的方形頭像，根據(jù)群成員的數(shù)量多少（1-9）進行相應(yīng)排布，多于 9 人時顯示前 9 人頭像。另外，微信暫不支持設(shè)置圖片為群頭像。釘釘群與微信類似，不過外觀上是圓形外框嵌套群成員的方形頭像，顯示數(shù)量也有所限制（最多顯示前4個），但可以選擇其他圖片作為群組頭像。QQ 群比較復(fù)雜些，可分為討論組和群，雖然現(xiàn)在統(tǒng)稱「群聊」，根據(jù)創(chuàng)建方式區(qū)分如下：選人創(chuàng)建（對應(yīng)的是討論組）和按分類創(chuàng)建（對應(yīng)的是群）。討論組也是不能設(shè)置頭像的，是在圓形內(nèi)嵌套群成員的圓形頭像，最多可顯示前 5 個成員的頭像。而群頭像由管理員設(shè)置，且可以查看歷史頭像、使用系統(tǒng)推薦頭像等。另外還有 TIM，定位是對抗釘釘?shù)霓k公軟件，比 QQ 更輕量化，視覺風(fēng)格也大不相同， TIM 中討論組頭像的展示就采用了類似釘釘?shù)淖龇īぉA形外邊框+方形頭像。

延伸一下，有人說微信重新定義了群的設(shè)計形態(tài)，更貼近用戶自然使用方式：無需群ID，無需刻意創(chuàng)建群，隨時拉人開聊，無需命名，默認不保存到通訊錄，搜索群時可通過直接搜人實現(xiàn)等。

結(jié)語

本文列舉分析了頭像設(shè)置的相關(guān)設(shè)計思路和案例，對社交產(chǎn)品的頭像設(shè)計大有裨益。在設(shè)計時，尋求相關(guān)設(shè)計參考是獲取靈感和解決方案的有效方法，認真發(fā)現(xiàn)生活中的好設(shè)計，及時積累并總結(jié)，才能在關(guān)鍵時刻有高質(zhì)量的輸出。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

 最近遇到一個作業(yè)，要求使用 Echarts 散點圖，本來這個圖是很容易的，官網(wǎng)上也有很多的教程。但是如果可以動態(tài)的更新 Echarts 散點圖就更好了。我本身對 js 不感興趣，經(jīng)過不停的查找資料最終實現(xiàn)了這一功能。
我的項目是 Servlet + jsp + Echarts。先從 Servlet 入手，我們的項目需要傳遞的數(shù)值是 x 坐標和 y 坐標。我首先寫了一個 JavaBean

julie.java

package JavaBean;

public class julei {
    public julei(double x, double y) {
        this.x = x;
        this.y = y;
    }
    double x;

    public double getX() {
        return x;
    }

    public void setX(double x) {
        this.x = x;
    }

    public double getY() {
        return y;
    }

    public void setY(double y) {
        this.y = y;
    }

    double y;

    @Override
    public String toString() {
        return "[" + this.x + "," + this.y + "]";
    }
}


Servlet中的代碼，因為使用的是 json 來傳遞的數(shù)據(jù)，所以 json 相關(guān)的包還是少不了的。
BackServlet

package Servlet;

import JavaBean.Readtxt;
import JavaBean.julei;
import org.json.JSONArray;
import org.json.JSONObject;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@javax.servlet.annotation.WebServlet("/BackServlet")
public class BackServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {



        List<julei> list = new ArrayList<>();
        try {
            list = Readtxt.out();//這是我們項目中的一個類，不重要。
        }catch (Exception e)
        {
            System.out.println(e.toString());
        }


        JSONArray jsonArray = new JSONArray(list);
        System.out.println(jsonArray.toString());
        //最重要的就是這一句，將數(shù)據(jù)發(fā)送給誰來申請的位置
        response.getWriter().write(jsonArray.toString());


    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

    }
}


好了，現(xiàn)在到了最重要的前端方面了。
index.jsp
正常聲明散點圖，只要把data聲明為空就好。

  var myChart = echarts.init(document.getElementById('man'));
          var option = {
            title : {
              text: '死亡分布圖',
            },
            xAxis: {axisTick: {//決定是否顯示坐標刻度
                alignWithLabel: true,
                show:true
              },},
            yAxis: {},
            series: [{
              symbolSize: 20,
              data: [],
              type: 'scatter'
            }]
          };
          myChart.setOption(option);

數(shù)據(jù)接收部分：

var num = [];
          var gao = new Array();
          $.ajax({
            type : "post",
            async : true, //異步請求（同步請求將會鎖住瀏覽器，其他操作須等請求完成才可執(zhí)行）
            url : "BackServlet", //請求發(fā)送到TestServlet
            data : {},
            dataType : "json", //返回數(shù)據(jù)形式為json

            //7.請求成功后接收數(shù)據(jù)name+num兩組數(shù)據(jù)
            success : function(result) {
              //result為服務(wù)器返回的json對象
              if (result) {
                //8.取出數(shù)據(jù)存入數(shù)組

                for (var i = 0; i < result.length; i++) {

                  gao.push([result[i].x,result[i].y]);//這一句很重要，它將數(shù)據(jù)轉(zhuǎn)化為了正確的格式。

                }

                myChart.hideLoading(); //隱藏加載動畫

                //9.覆蓋操作-根據(jù)數(shù)據(jù)加載數(shù)據(jù)圖表
                myChart.setOption({
                  series : [ {
                    // 根據(jù)名字對應(yīng)到相應(yīng)的數(shù)據(jù)
                    data : gao//在這里對data進行賦值。
                  } ]
                });

              }

            },
            error : function(errorMsg) {
              //請求失敗時執(zhí)行該函數(shù)
              alert("圖表請求數(shù)據(jù)失敗!");
              myChart.hideLoading();
            }
          })




完畢

我把整個jsp都放上來了，但是里面的 css 還有 js 就不放了,重點是傳數(shù)據(jù)的那一部分。

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>LOL數(shù)據(jù)分析</title>
  <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript" src='js/echarts.js'></script>
  <link rel="stylesheet" href="css/jquery.fullPage.css">
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" >
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
  <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
  <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
</head>

<body>
<div class="bgcolor">
  <div style="z-index:100;" id="dowebok">
    <!--第一屏-->

    <div class="section">
      <div class="ly-box01">
        <img class="ly-img01" src="img/logol.png" style="width:100%;height:100%">

      </div>
    </div>

 

    <!--第三屏-->

    <div class="section">
      <div class="timeline"></div>
      <div class="timepoint21"></div>
      <div class="ly-box11">
        <div id="man" style=" width: 600px;height: 500px;"></div>

        <script type="text/javascript">
          // 基于準備好的dom，初始化echarts實例
          var value=[];
          $.ajaxSettings.async=false;
          var myChart = echarts.init(document.getElementById('man'));
          var option = {
            title : {
              text: '死亡分布圖',
            },
            xAxis: {axisTick: {//決定是否顯示坐標刻度
                alignWithLabel: true,
                show:true
              },},
            yAxis: {},
            series: [{
              symbolSize: 20,
              data: [],
              type: 'scatter'
            }]
          };
          myChart.setOption(option);






          var num = [];
          var gao = new Array(4);
          $.ajax({
            type : "post",
            async : true, //異步請求（同步請求將會鎖住瀏覽器，其他操作須等請求完成才可執(zhí)行）
            url : "BackServlet", //請求發(fā)送到TestServlet
            data : {},
            dataType : "json", //返回數(shù)據(jù)形式為json

            //7.請求成功后接收數(shù)據(jù)name+num兩組數(shù)據(jù)
            success : function(result) {
              //result為服務(wù)器返回的json對象
              if (result) {
                //8.取出數(shù)據(jù)存入數(shù)組

                for (var i = 0; i < result.length; i++) {
                  gao.push([result[i].x,result[i].y]);
                }

            //  document.write(gao);
                myChart.hideLoading(); //隱藏加載動畫

                //9.覆蓋操作-根據(jù)數(shù)據(jù)加載數(shù)據(jù)圖表
                myChart.setOption({
                  series : [ {
                    // 根據(jù)名字對應(yīng)到相應(yīng)的數(shù)據(jù)
                    data : gao
                  } ]
                });

              }

            },
            error : function(errorMsg) {
              //請求失敗時執(zhí)行該函數(shù)
              alert("圖表請求數(shù)據(jù)失敗!");
              myChart.hideLoading();
            }
          })






        </script>
      </div>
      <div class="ly-triangle21"></div>
    </div>
  <!--試驗-->

  <ul class="bg-bubbles">
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
    <li><img src="img/logol.png" style="width:100%;height:100%"></li>
  </ul>

</div>

<audio src="music/1.mp3" autoplay="autoplay" loop="loop" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/diy.js"></script>
</body>
</html>
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

△ 文中配圖均來自美團官方和產(chǎn)品截圖，僅作為設(shè)計交流使用

這是在設(shè)計群看見的一個啟動頁視頻，第一感覺就是品牌色由「青綠色」變成了「黃色」，采用 C4D 渲染出各種使用場景和產(chǎn)品的各種服務(wù)品類，表明產(chǎn)品內(nèi)部依然囊括了吃喝玩樂等一系列服務(wù)。風(fēng)格比較年輕化，第一感覺還是蠻不錯的，所以我立馬去 App Store 升級了產(chǎn)品，發(fā)現(xiàn) APP 啟動圖標也變了。

△ APP圖標目前是第二個，猜測是想給用戶一個過渡期

為什么美團突然要進行品牌升級？

官方給的說法是：為了「將所有線上線下曝光進行視覺化統(tǒng)一，流量到品牌的一體化」。同時希望以統(tǒng)一品牌色為起點，未來實現(xiàn)從線上到線下，從流量到品牌的四者一體。

確實是這樣，就是為了品牌的統(tǒng)一，這就是這次升級的核心意義。這是典型的由公司經(jīng)營戰(zhàn)略為導(dǎo)向而進行的一次產(chǎn)品升級，這樣做也是為了搶占用戶心智，為了以后讓人一看到黃色，就只會想到美團，而不是其他品牌，畢竟現(xiàn)在的產(chǎn)品太多元化了，每家大廠都應(yīng)該有自己的一個獨有的品牌色，這樣品牌就不會過于分散。比如微信的綠色、淘寶的橘黃色、天貓的紅色……如何讓用戶第一時間就想到你的產(chǎn)品，對于競爭異常激烈的今天這真是太重要了。

說到用戶心智，前兩天看見一篇關(guān)于品牌的文章，里面提到：早期的品牌戰(zhàn)略是「定位理論」，它告訴了我們：品牌的競爭，是關(guān)于潛在用戶心智的競爭，如今這一理論也一樣適用。

為什么品牌升級，只升級品牌色？

因為品牌顏色的變化是用戶最直接、最容易感知出的變化，品牌色是最容易吸引用戶，占領(lǐng)用戶心智的方式。

為什么是黃色，而不是青綠色？

為什么是黃色，而不是將所有色系都變?yōu)榍嗑G色？

我們都知道，美團升級前是「青綠色」、美團外賣是「黃色」、大眾點評是「橘黃色」，是各自不同的色系。

美團的四大業(yè)務(wù)支柱是：外賣、到店、酒店&旅游、出行。其中外賣的流量最大，每天外賣的訂單有數(shù)百萬計，這是一個巨大的流量，所以變身外賣「黃」也是為了流量和品牌更好地綁定。并且大街上奔忙的穿黃色衣服的外賣小哥，你一眼就知道是美團外賣，這些都是無形中的廣告，也早已扎根于你的心智之中。相信很多人心中的美團 = 美團外賣，所以變成「黃色」是最合適的。

但是「美團黃」和美團外賣的「黃色」還有所區(qū)別，只能算是一個色系，美團外賣的黃色更顯年輕一點。而「美團黃」官方的解釋是：黃色代表著熱情、溫暖，象征著美團始終堅守「幫大家吃得更好，生活更好」的使命，致力于為用戶提供更優(yōu)質(zhì)、有溫度的一站式生活服務(wù)，幫助人們向美好生活靠近。

下面再來對比一下產(chǎn)品頁面 UI 的變化：

△ 升級前主頁面UI

△ 升級后主頁面UI

單從頁面對比來看，整體布局結(jié)構(gòu)沒有什么變化，不出所料，主要的區(qū)別就是將新的品牌色「美團黃」進行了視覺上的強化。

這種大塊的品牌色比較突出的設(shè)計似乎和當下流行的簡潔優(yōu)雅的設(shè)計風(fēng)格背道而馳，似乎只有在電商產(chǎn)品中比較常見，但我認為，這樣的設(shè)計應(yīng)該只是暫時的，相信在經(jīng)過一段時間占據(jù)了用戶心智之后，美團勢必會順應(yīng)當下的流行趨勢，在此期待一下。

去年被收購的摩拜一直虧損嚴重，繼改名為「美團單車」之后，掃碼騎車入口也整合進了美團 APP，如今為了讓線下場景都統(tǒng)一成一個色系，單車也要變成黃色了：

對此，網(wǎng)上有人喊話美團：順便把小黃車也收購了吧，畢竟黃色的單車給我們的第一印象就是 OFO，這樣線下黃色的單車就全都是你家的了，我們的押金也就有著落了……

另外，還有一些其他線下場景品牌色運用：

這次美團的升級，不管你喜歡與否，它已經(jīng)發(fā)生，就像年前的微信升級一樣。一開始勢必會有很多人不習(xí)慣，這其實也是受用戶心智的影響，我們都會帶有一種現(xiàn)狀偏見來看待事物的新舊變化，這是很正常的心理狀態(tài)，但是過了一段時間以后，都會淡忘，直到習(xí)慣，都逃不過「真香」理論。

藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。