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

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

工作了很多年，卻依然說不出何為交互設(shè)計(jì)。一說道理，大家都懂，但是當(dāng)別人問你什么是交互設(shè)計(jì)時(shí)，你又一臉懵逼了。為什么會(huì)這樣呢？因?yàn)槲覀儧]有自己去總結(jié)，沒有形成自己的知識(shí)庫(kù)。

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

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

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

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

 

百度定義如下：

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

 

唐納德諾曼給出的定義：

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

 

首先要知道什么是交互

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

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

 



 

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

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

 



 

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

 



 

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

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

 


 

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

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

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

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

 



 

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

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

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

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

 



 

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

 

原文地址：站酷
作者：Luyeelin

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

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

第一段：工具

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

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

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

第三段：人——對(duì)人和需求的研究

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


看看前輩是怎么說的：

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

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

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

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

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

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

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

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

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

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

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

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

2.每個(gè)邏輯塊的空白大小不一致 

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



 

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

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





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

 


5.在一頁(yè)中，樣式過多

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

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



 

6.背景顏色塊過于狹窄




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

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

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

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

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

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

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

旅游達(dá)人都愛的Booking為什么這么好用？

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

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

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

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

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

為了改善長(zhǎng)文閱讀體驗(yàn)，我們悄悄開發(fā)了這個(gè)小功能

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

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

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

當(dāng)你在「騰訊視頻」追劇播放進(jìn)程被電話打斷…

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

「抖音」是怎樣利用一個(gè)按鈕的小心機(jī)，達(dá)到鼓勵(lì)用戶分享行為的目標(biāo)的？

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

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

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

「支付寶」收款碼的隱藏小心機(jī)

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。

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

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



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="">首頁(yè)</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'] //自定義分頁(yè)布局
                //,curr: 5 //設(shè)定初始在第 5 頁(yè)
                ,limit:10 //一頁(yè)顯示多少條
                ,limits:[5,10,15]//每頁(yè)條數(shù)的選擇項(xiàng)
                ,groups: 2 //只顯示 2 個(gè)連續(xù)頁(yè)碼
                ,first: "首頁(yè)" //不顯示首頁(yè)
                ,last: "尾頁(yè)" //不顯示尾頁(yè)
            }
            ,cols: [[
                {field:'id', width:80, title: '代理ID', sort: true}
                ,{field:'username', width:100, title: '代理名稱'}
                ,{field:'level', width:100, title: '代理級(jí)別'}
                ,{field:'email', width:80, title: '電子郵箱'}
                ,{field:'phone', width:280, title: '手機(jī)號(hào)'}
                ,{field:'agent_id', width:280, title: '上級(jí)代理ID'}
                ,{field:'status', width:280, title: '是否啟用'}
                ,{field:'isAuth', width:280, title: '是否已經(jīng)認(rèn)證'}
                ,{field:'money', width:280, title: '金額'}
                ,{field:'created_time', width:280, title: '訪問時(shí)間',sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
            ]]

        });


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

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

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

    });

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。

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

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

頭像設(shè)置流程

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

1. 選擇圖片源

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

2. 上傳條件限制

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

3. 裁剪處理

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

4. 效果預(yù)覽

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

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

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

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

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

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

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

因?yàn)檎掌緛硎欠降?，方頭像更符合用戶習(xí)慣。

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

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

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

1. 默認(rèn)頭像

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

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

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

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

3. 隨機(jī)選擇頭像

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

4. 使用歷史頭像

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

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

5. 文本頭像

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

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

6. 角色頭像/匿名頭像

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

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

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

8. 輪播頭像

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

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

9. 捏臉頭像

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

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

10. 頭像掛件

頭像掛件、等級(jí)徽章、認(rèn)證標(biāo)志也屬于頭像的一部分，不過需要結(jié)合付費(fèi)會(huì)員、用戶成長(zhǎng)體系、認(rèn)證規(guī)則進(jìn)行討論才有意義。

11. 使用第三方頭像

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

12. 群組頭像

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

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

結(jié)語(yǔ)

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。

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

 最近遇到一個(gè)作業(yè)，要求使用 Echarts 散點(diǎn)圖，本來這個(gè)圖是很容易的，官網(wǎng)上也有很多的教程。但是如果可以動(dòng)態(tài)的更新 Echarts 散點(diǎn)圖就更好了。我本身對(duì) js 不感興趣，經(jīng)過不停的查找資料最終實(shí)現(xiàn)了這一功能。
我的項(xiàng)目是 Servlet + jsp + Echarts。先從 Servlet 入手，我們的項(xiàng)目需要傳遞的數(shù)值是 x 坐標(biāo)和 y 坐標(biāo)。我首先寫了一個(gè) 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中的代碼，因?yàn)槭褂玫氖?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();//這是我們項(xiàng)目中的一個(gè)類，不重要。
        }catch (Exception e)
        {
            System.out.println(e.toString());
        }


        JSONArray jsonArray = new JSONArray(list);
        System.out.println(jsonArray.toString());
        //最重要的就是這一句，將數(shù)據(jù)發(fā)送給誰(shuí)來申請(qǐng)的位置
        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
正常聲明散點(diǎn)圖，只要把data聲明為空就好。

  var myChart = echarts.init(document.getElementById('man'));
          var option = {
            title : {
              text: '死亡分布圖',
            },
            xAxis: {axisTick: {//決定是否顯示坐標(biāo)刻度
                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, //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，其他操作須等請(qǐng)求完成才可執(zhí)行）
            url : "BackServlet", //請(qǐng)求發(fā)送到TestServlet
            data : {},
            dataType : "json", //返回?cái)?shù)據(jù)形式為json

            //7.請(qǐng)求成功后接收數(shù)據(jù)name+num兩組數(shù)據(jù)
            success : function(result) {
              //result為服務(wù)器返回的json對(duì)象
              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(); //隱藏加載動(dòng)畫

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

              }

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




完畢

我把整個(gè)jsp都放上來了，但是里面的 css 還有 js 就不放了,重點(diǎn)是傳數(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">
          // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
          var value=[];
          $.ajaxSettings.async=false;
          var myChart = echarts.init(document.getElementById('man'));
          var option = {
            title : {
              text: '死亡分布圖',
            },
            xAxis: {axisTick: {//決定是否顯示坐標(biāo)刻度
                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, //異步請(qǐng)求（同步請(qǐng)求將會(huì)鎖住瀏覽器，其他操作須等請(qǐng)求完成才可執(zhí)行）
            url : "BackServlet", //請(qǐng)求發(fā)送到TestServlet
            data : {},
            dataType : "json", //返回?cái)?shù)據(jù)形式為json

            //7.請(qǐng)求成功后接收數(shù)據(jù)name+num兩組數(shù)據(jù)
            success : function(result) {
              //result為服務(wù)器返回的json對(duì)象
              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(); //隱藏加載動(dòng)畫

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

              }

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






        </script>
      </div>
      <div class="ly-triangle21"></div>
    </div>
  <!--試驗(yàn)-->

  <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>
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。

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

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

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

△ APP圖標(biāo)目前是第二個(gè)，猜測(cè)是想給用戶一個(gè)過渡期

為什么美團(tuán)突然要進(jìn)行品牌升級(jí)？

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

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

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

為什么品牌升級(jí)，只升級(jí)品牌色？

因?yàn)槠放祁伾淖兓怯脩糇钪苯?、最容易感知出的變化，品牌色是最容易吸引用戶，占領(lǐng)用戶心智的方式。

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

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

我們都知道，美團(tuán)升級(jí)前是「青綠色」、美團(tuán)外賣是「黃色」、大眾點(diǎn)評(píng)是「橘黃色」，是各自不同的色系。

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

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

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

△ 升級(jí)前主頁(yè)面UI

△ 升級(jí)后主頁(yè)面UI

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

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

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

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

另外，還有一些其他線下場(chǎng)景品牌色運(yùn)用：

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

藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)。