如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

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

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

首先，我們來看看權威方對交互設計的定義：

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

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

 

百度定義如下：

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

 

唐納德諾曼給出的定義：

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

 

首先要知道什么是交互

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

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

 



 

人和人之間的交互比較好理解，那人和機器呢？其實也是非常好理解的。我們都忘不了微信推出的搖一搖功能，打開搖一搖，搖動手機，就會出現“咔咔”的聲音，然后加載，搜尋出一個和你同時在搖的人。其實，我們和任何機器之間的發生互動關系，都是屬于交互。往更廣的意義上說，如果失去了交互，地球將不再運轉，將毫無生機?，F在，智能時代已經到來，我們除了研究人和人、機器、產品、環境、服務、系統等之間的關系，還要研究機

器和人、機器、產品、環境、服務、系統之間的關系。

 



 

總之，當人（或機器）和事物（無論是人、機器、產品、服務、系統、環境等等）發生雙向的信息交流和互動，就是一種交互行為。

 



 

其次，我們來聊聊設計

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

 


 

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

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

通過上述的描述，我們不難發現，設計主要表現在發現問題–解決問題。而交互設計就是發現和解決人（或機器）和事物（包括人、機器、產品、服務、系統、環境等等）之間的互動關系問題。

所以說，交互設計的范圍是非常廣的，和各個學科都有涉及，我們可以通過下面的圖來看看交互設計和各個領域之間的關系。

 



 

那交互設計主要是做什么工作呢？

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

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

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

 



 

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

 

原文地址：站酷
作者：Luyeelin

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

第一段：工具

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

第二段：新產品、新思路

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

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

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


看看前輩是怎么說的：

交互設計目前發展得怎樣，前景如何？
答：現在我們接觸到的交互設計可能只局限在網頁或者APP這種，交互設計是個很廣泛的概念，前景肯定是有的?；ヂ摼W是人和服務的對接，很多嶄新的設計和商業模式一旦出來，那就是新的商機。

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

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

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

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

（內容來源網絡，如有侵權請聯系，承諾必定刪除）

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

常見的網頁設計、文章設計錯誤
本文來自阮一峰分享

 1.內容未按邏輯分成塊

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

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

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

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



 

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

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





4.背景圖片和文字 應該對比鮮明

 


5.在一頁中，樣式過多

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

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



 

6.背景顏色塊過于狹窄




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

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

為什么有時候在「朋友圈」發狀態，文字信息會被折疊？

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

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

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

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

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

如何保證用戶的操作行為，始終位于手部舒適區之內？

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

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

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

天天聽「網易云音樂」的你，可能都沒發現這個小秘密

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

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

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

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

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

在社交產品發布狀態收到CEO的點贊，是種什么樣的心情？

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

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

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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



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>導航元素</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 組件的所有參數（某些參數除外，如：jump/elem） - 詳見文檔
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定義分頁布局
                //,curr: 5 //設定初始在第 5 頁
                ,limit:10 //一頁顯示多少條
                ,limits:[5,10,15]//每頁條數的選擇項
                ,groups: 2 //只顯示 2 個連續頁碼
                ,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: '是否已經認證'}
                ,{field:'money', width:280, title: '金額'}
                ,{field:'created_time', width:280, title: '訪問時間',sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
            ]]

        });


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

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

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

    });

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

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

頭像設置流程

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

1. 選擇圖片源

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

2. 上傳條件限制

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

3. 裁剪處理

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

4. 效果預覽

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

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

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

騰訊的回應如下：

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

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

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

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

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

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

設置頭像的12種方式

1. 默認頭像

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

2. 系統推薦頭像

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

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

3. 隨機選擇頭像

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

4. 使用歷史頭像

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

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

5. 文本頭像

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

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

6. 角色頭像/匿名頭像

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

7. 動態視頻頭像

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

8. 輪播頭像

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

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

9. 捏臉頭像

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

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

10. 頭像掛件

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

11. 使用第三方頭像

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

12. 群組頭像

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

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

結語

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

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

 最近遇到一個作業，要求使用 Echarts 散點圖，本來這個圖是很容易的，官網上也有很多的教程。但是如果可以動態的更新 Echarts 散點圖就更好了。我本身對 js 不感興趣，經過不停的查找資料最終實現了這一功能。
我的項目是 Servlet + jsp + Echarts。先從 Servlet 入手，我們的項目需要傳遞的數值是 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 來傳遞的數據，所以 json 相關的包還是少不了的。
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());
        //最重要的就是這一句，將數據發送給誰來申請的位置
        response.getWriter().write(jsonArray.toString());


    }

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

    }
}


好了，現在到了最重要的前端方面了。
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);

數據接收部分：

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

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

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

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

                }

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

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

              }

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




完畢

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

<%@ 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數據分析</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, //異步請求（同步請求將會鎖住瀏覽器，其他操作須等請求完成才可執行）
            url : "BackServlet", //請求發送到TestServlet
            data : {},
            dataType : "json", //返回數據形式為json

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

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

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

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

              }

            },
            error : function(errorMsg) {
              //請求失敗時執行該函數
              alert("圖表請求數據失敗!");
              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>
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

△ 文中配圖均來自美團官方和產品截圖，僅作為設計交流使用

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

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

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

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

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

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

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

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

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

為什么是黃色，而不是將所有色系都變為青綠色？

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

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

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

下面再來對比一下產品頁面 UI 的變化：

△ 升級前主頁面UI

△ 升級后主頁面UI

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

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

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

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

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

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

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