大家平時多的界面應該都是常規類型的居多，應該很少會接觸到游戲類型的界面設計吧？哈哈。今天就給大家分享一個游戲類型的排行榜界面，看看是怎么做。和咱平時的又有什么不同呢？

先來看看效果：

確實和普通頁面還是有很大差異的哈，可以發現所有的模塊更風格化，也蘊含了光影細節在里面。

這樣一張界面細節很多，我們今天主要講講1、2、3名的頭像框怎么做出等級差異。

1. 明確風格

首先我們就要先明確游戲風格的界面和普通界面有什么不同，特點有哪些，造型、光影、質感等等。

明確了才能動手去執行。

2. 等級差異

大家平時應該也會遇到很多排行類的需求，需要做出等級感。那是如果如何表現等級差異的呢？我主要是從以下三個點去推進，分享給大家：

2.1顏色

·主色：

首先就是三個等級的顏色差異

比如第一名最尊貴，我們就可以選用和背景色對比最強烈的金色去表現。

金色本身也帶有尊貴感。

第二名和第三名的顏色就可以選用背景的類似色或者同類色比如紫色和藍色，讓它們在視覺上天然的弱化下去一個等級。

·微漸變：

采用微漸變的形式，讓顏色更豐富，不會顯得很平，同時靠顏色的變化也能表現出輕微的質感。

2.2復雜度

第二點就是復雜度了。

這個很好理解，就是越重要的，在造型上就會有越多的細節和層次。第一名層次細節非常豐富，第三名就簡簡單單的，從造型上表現出等級差異感。

2.3大小

比較常規的一個方法就是大小差異了，第一名最大，二三名一樣大就可以了。

3.細節精致度

明白了原理，怎么把細節做到位也是很重要的，我們拿第一名框的造型舉例，說說是怎么做出復雜度這么高的造型的。

3.1 重復

先有一個基礎圓，然后我們重復幾個。這一步很簡單，很多同學都會做。但也有很多同學到這就做不下去了。重點要學會后面怎么做。

3.2 圓的對比

全是相同的圓就會顯得很重復，沒有細節。我們可以調整圓線段的不同粗細、形式去增加細節。

把他們組合到一起看看。

有點那味了，有些同學做到這一步就不知道該怎么繼續了，可能會繼續加圓，這肯定是不行的。

3.3 豐富基礎形

如果我們繼續加圓圈可能又會變得重復了，這是因為我們的基礎形單一，所以我們要加入別的基礎性在畫面里去。

為了方便理解，我們加入一個比較直觀的形狀正方形看看：

正方形組合又組成很多三角形，造型一下就豐富了很多！所以基礎形狀的多樣性是我們豐富造型很重要的一個點哦。

本案例就加入了其它相對更復雜一些的基礎形，效果會更細膩一些，但道理是相同的。

4. 加入點綴和光影

因為是游戲風格的，加上一點外發光更有感覺，再加上一些星星點綴，可以進一步提升豐富度。

看下頁面效果：

等級差異明顯，造型精致，整體還是比較滿意的。

  藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。 

作者：菜心輕量文    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

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

01 顏色掉層次了

很多時候，我們會發現，我們加的質感有點平，比如像下面這種：

很明顯，這種地方就有點平：

原因就是因為“顏色掉層次了”，我們只需要在他的中間再加一層顏色，就可以讓它的質感飽滿起來。

具體步驟就是，我們可以先給它加一些“形狀”然后進行羽化:

我們可以看下前后對比，這樣就不會那么平了：

一旦發現質感有點平，就可以用這種“顏色掉層次”的思維去嘗試優化！

02 顏色要透

這是一位同學做的質感臨摹練習：

顏色有點太悶了，不夠透徹，我們先來把顏色弄的透一點，我用圓形來表示，首先我們的顏色不能太重，弄個小漸變：

這是我們的一個基礎，如果感覺明暗對比不夠，可以再適當加強對比：

然后加一點反光，這是非常靈魂的一個步驟：

然后再加一點左上角的高光：

這時候我們再來加中間的暗部形狀，我們看原版的有一個很大的問題，就是中間的暗部愛心和背景有點糊在一起了：

就是因為兩層都是暗色，所以沒有區分開，所以這也是為什么我們把背景色調亮的一個原因，我們把中間的形狀加上去：

然后再來個內陰影和邊緣光：

大功告成，我們再來對比下前后的質感：

是不是好了很多。

03 不重要的顏色千萬不能高飽和

有時候我們會覺得自己的設計有點主次不分，這種感覺往往和顏色有關。

下面兩個圓形，你會覺得那個更吸引你的眼球：

對，沒錯，肯定是第一個，因為第一個顏色的飽和度比較高，顏色比較純，所以更加吸引眼球。

那我們看下面跟米同學的啟動圖標作業：

感覺所有顏色有點糊在一起，甚至感覺背景比形象還要吸引眼球，就是因為背景的顏色飽和度太高了！

當跟米把背景的顏色飽和度降低時，我們再看下效果：

我們可以很清晰的把視線聚焦在吉祥物的身上。

所以我們在做視覺的時候，一定要注意，你的重點是什么，注意飽和度對比、明暗對比，千萬不要本末倒置！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。 

作者：菜心輕量文    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

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

一、改版背景
QQ游戲中心是手Q用戶觸達游戲的重要場景，每天有海量用戶來此進行游戲相關的互動操作，隨著產品的功能迭代，體驗的逐步更新，用戶對QQ游戲中心也有著更多更強的訴求。
在2022年的研究報告《游戲中心核心價值及機會點定性研究》中發現用戶在游戲中心內最為關心的是領取福利，通過在游戲中心獲得游戲相關的禮品道具幫助提升游戲體驗。同時用戶對游戲有著較強的社交感、成就感、沉浸感訴求。
隨著產品目標的調整，游戲中心的功能也逐漸豐富化，除開領福利和找游戲，用戶可以在此消費游戲內容、購買游戲道具、以及使用游戲相關功能等，用戶觸達游戲的方式變得更加多元，用戶的粘黏性也進一步提升，產品依勢也需要打造更好的產品游戲氛圍感和品牌印象來建立用戶口碑、提升轉化。
同時，以“生機”為設計理念的QQ，也進行了體驗上的版本迭代，游戲中心作為QQ內的重要業務，也將跟隨緊隨其后完成體驗的更迭，提升用戶體驗、延續QQ品牌基因。

二、制定設計策略
對用戶、產品、設計的訴求進行整合后，梳理出本次改版的基本設計思路——在提升產品用戶體驗的基礎上，以品牌符號強化產品的記憶點，一方面從產品體驗上給用戶帶來更順暢體驗，同時以品牌圖形強化游戲感和沉浸感，提升用戶心中的品牌印象。
優化基礎體驗：跟隨手Q“生機”設計理念和界面風格，統一UI界面樣式 ；重構內容消費的信息容器，提升內容消費效率；提升設計效率，以及打造更高效團隊合作方式。
打造品牌記憶點：通過品牌基因的植入、游戲氛圍感的增強，讓產品更具辨識度，同時加強產品的游戲屬性，強化用戶的沉浸感。

游戲中心改版總覽圖

三、解決問題
3.1 基礎體驗優化
游戲中心本次改版在體驗上的優化聚焦在3方面：

① 煥新界面
隨著產品功能的擴充和迭代，游戲中心的界面風格開始趨于參差，同時伴隨QQ設計規范——Q語言的更新，游戲中心的首要任務即完成界面風格的統一。

· 統一風格

以往的游戲中心，采用更為豐富多彩的設計語言，導致從手Q進到游戲中心較為強烈的割裂感。而本次改版中延續手Q的簡約透氣的風格表現，通過色彩樣式、組件、圓角等設計要素將界面進行規范統一，保證體驗的一致性。

· 求同存異

在首頁、游戲、攻略這3個場景，界面的風格向手Q設計語言靠攏，色調以手Q藍為主，以相對簡潔的界面風格保證內容傳遞的高效性。
同時根據業務訴求，也保持了游戲中心自有特色——在福利和商城tab兩個主場景下強化游戲氛圍感：采用3D圖形和多彩圖標、界面主色調使用情緒更高的橙黃色，讓整體感知更符合產品的特質。

除開界面風格，圖標的設計也融入了游戲中心的特色——保持基礎型與手Q圖標一致外，同時將一些圖標通過游戲化語義表達出來，使其更具趣味性和游戲感。

②重構容器

· 優化內容消費體驗

內容卡片結構化
游戲中心的消費內容來源豐富，包含問答站、小世界、頻道等多處內容源，給用戶帶來海量內容的同時，也導致了信息容器的冗雜，增加用戶的認知負擔、降低瀏覽效率。
在前期和產品的梳理中，發現游戲中心的feed類型可以分為4大類，總計有21種樣式。為解決用戶的瀏覽體驗問題，對feeds結構進行了結構化整理，以流式布局將所有樣式整合為6個部分，基于不同消費內容去排列組合feed類型，簡化產品邏輯，同時用戶更聚焦內容閱讀。

· 提升游戲分發效率

游戲tab作為游戲分發的主要場景，改版前主要以橫向列表容器去承載游戲信息，用戶探索新游的效率較低，同時雷同化的結構，容易瀏覽疲勞。
針對以上情況，在頁面設計上豐富了承載容器的樣式，采用高效率的游戲圖標排列或者游戲合集卡片，提高了瀏覽效率，也讓用戶更容易命中自己鐘愛的游戲類型，不同的容器類型組合也讓整個瀏覽更有節奏，減少疲勞感。

③提升設計效率
游戲中心在以往產品功能的快速迭代中，由于規范和組件的不完善以及和開發同學協作模式的不確定性，讓產品界面的實現往往不盡滿意，無論是開發效率還是還原程度都受到一定的影響，最終導致用戶體驗的不完滿，所以本次的改版，提升設計的效率也是體驗提升的重要一環

· 統一設計規范

界面的基礎樣式和控件，和手Q基本規范保持一致，包括顏色、圖標風格、基礎控件、圓角、柵格等。同時基于業務的訴求，我們在手Q基礎上拉出一條規范支線用于游戲中心的設計——主要在基礎色、圖標等拓展了更多樣式。

· 提升協作效率

以往黑夜模式的適配，開發和設計需要同時輸出和還原兩次設計稿，導致適配成本較高。在本次改版中，將新風格頁面的組件token化，搭建起設計和開發之間界面樣式的映射關系，開發和設計只需還原一次設計稿，即可完成黑夜模式的適配，達到高效設計、快速上線迭代目的。

黑夜模式的上線，也提升了游戲中心的瀏覽感受，讓用戶的體驗更友好、更親近用戶，回歸Q語言親和自然的設計原則。

3.2 打造品牌記憶點
① 打造品牌記憶符號
QQ圍繞社交有效性、社交廣度與深度、社交動力等維度，打造一個積極向上充滿生命力的社交生態體系。生機的理念承載樂觀活力與積極延續，具備有序和精致的特點，也象征萬物發展所蘊含的生命力。——Q語言-設計理念
在游戲的世界觀中，“能量”經常作為源動力元素以推動游戲進展，QQ游戲中心承接Q語言“生機”的設計理念，提煉衍生“能量”概念，以能量元素將生機理念具像化，賦予產品積極快樂充滿活力的品牌感知。

在確定能量作為核心關鍵詞后，對此發進行情緒版關鍵詞的發散，結合前文提到各方訴求，最終把關鍵詞鎖定到能量、游戲感、氛圍上。

② 品牌基因拓展
在對關鍵詞的發散階段，討論和嘗試了多種能將“能量”概念視覺化的元素，考慮到UI界面的延展性和可用性，最終把可視化元素鎖定在寶石和光上——寶石造型上相對簡單，光在動畫塑造上能擁有多樣豐富的表現形式。
為契合概念的設定和后續的延展，我們把寶石定義為能量石。在能量石的設計上，特意營造出能量充盈、光感琉璃的視覺感受，造型上采用多面切割結構，色彩上兼容藍色和黃色兩種色調，以匹配游戲中心的整體界面風格。

除開主體圖形，也從其他設計維度去落地能量的設計理念：

• 圖形

能量之石
除開前面的基礎寶石，也設計了多種能量石的造型，并兼容磨砂質感，以應對不同場景使用。

 

在UI界面的運用
在產品的核心界面上，將能量石作為背景圖案使用，強化品牌和氛圍感；
和業務也進行結合——以能量石將商城的幸運值圖形化，讓品牌和功能直接連接起來；
把能量石材質和游戲元素進行結合——王者皮膚墻功能內，將游戲LOGO賦予能量石材質，讓游戲和平臺品牌之間產生品牌上的關聯。

能量之石圖形在界面內的運用

與3D圖形的結合
寶箱是游戲中心一個重要道具，每日有大量活躍用戶來游戲中心做任務開寶箱，開寶箱成為了產品觸達用戶的高頻場景。

因此對寶箱進行了設計，希望在高觸發場景加強用戶的品牌感知，強化游戲感。寶箱在造型上采用了和寶石一樣的切割造型，同時寶箱上加入了能量石，把3D圖形和能量石進行結合。

除開寶箱外，對業務內常用的圖標進行了3D化處理。

3D圖形在界面內的運用

· 動效

在動效的設計上，也承接能量的設計理念，以光為設計靈感，設計了游戲感強烈，電光火石般的的動畫效果——能量光，用于界面內UI界面和3D圖形動畫，強化整個產品的游戲氛圍感。 

動效在界面中的運用

· 顏色

在界面顏色的使用上，主界面延續手Q的標準藍色調，包括控件、字色也與手Q統一，保證界面整體色調的延續性。同時基于業務訴求，拓展了情緒感知更強烈的“游戲橙”。

對于以內容體驗為主的頁面——比如游戲中心的首頁、游戲發現頁、攻略頁，使用手Q的標準藍；在需要強氛圍和游戲感的頁面——游戲福利頁和游戲商城頁，采用游戲橙。

· 質感

由于游戲中心內多處用到的3D元素，對3D的質感進行了規范統一。

材質
考慮到UI界面的通用性，避免3D材質的喧賓奪主，材質風格以簡單通用為主，顏色以界面主色調為基礎，漫射材質多營造輕黏土的通用質感；針對能量石的材質，則采用光感通透的玻璃材質。

燈光
燈光采用基本的三點布光，旨在表現物體的質感、立體感和空間透視感。整體布光氛圍積極，友好，明朗，透傳QQ活力生動的品牌氣質。 

· 字體

游戲平臺內，有著較多需要運營設計的場景，字體是信息展示的重要元素，選擇了造型感較強造字工房的逼格青春字體，作為界面內的強調字體，更好的營造游戲氛圍感。   

字體在運營活動和UI界面中的運用

四、總結
QQ游戲中心作為QQ用戶觸達游戲的重要途徑，用戶們在體驗鏈路上有著各式各樣的訴求。產品功能的多元化也讓用戶體驗必須追隨功能持續迭代。擁有幾億用戶的QQ，各類產品的統一優質體驗，也是“一切以用戶為中心”原則的必要體現。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。 

作者：騰訊ISUX團隊    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

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

引言

如今人們出行都離不開手機，都通過手機接觸過互聯網地圖，手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優勢，形成了成熟的地圖交互體驗。在解析手機地圖的體驗設計前，讓我們先看看地圖的發展歷程。

一、地圖的發展

地圖擁有著古老的歷史，記錄了人類對世界認知的演進過程，經歷過泥板、壁畫、羊皮、紙張等載體，依據使用和文化需要擁有著豐富多樣的美術形式。不同時期、材質、美術形式的地圖見證人們認識世界的過程。

隨著照相機和飛機的發展，出現了航空攝影測量技術，讓地圖的測繪精準度達到頂峰。交通、旅游、印刷業的發展，讓紙媒地圖開始融入人們的生活，地圖的平面設計更是百花齊放，有具體也有抽象，讓地圖兼顧功能、美感、有趣。

再隨著衛星影像、瓦片地圖技術和互聯網的發展，人們可以日常地使用電子地圖。受限于網絡速度的限制，矢量地圖應運而生，在特定范圍顯示相應的矢量瓦片信息，讓互聯網地圖的形狀趨向統一化。

iPhone革命性的觸屏體驗，通過手勢與地圖進行直觀自然的交互體驗，結合內置GPS、陀螺儀傳感器，小藍點成為地圖定位的通用標志，激發更多地圖的功能和創意。

二、手機地圖的創新體驗

手機地圖繼承了互聯網電子地圖的可快速迭代、信息可實時更新的優勢，結合觸屏手勢操作后，大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務和社交娛樂中，這些場景也不斷豐富和完善著地圖的信息。

手勢交互讓地圖從移動到縮放都高效地動起來，激勵人們探索更廣的區域。更革命性的是讓地圖從平面到立體之間的順滑轉換，幫助人們更好的映射到真實世界。

可視化信息是互聯網地圖的主要優勢之一，將數據轉化為可視化圖形，歸類在不同的數據層，可以單個或多個層級疊加在地圖上展示，傳達位置上的數據。

底圖是手機地圖的基礎，通常就是地圖本身，它承托著上面的可視化信息。隨著地圖可更自由地縮放，地圖本身的內容不斷細化和歸類，在不同的縮放層級下，展示符合用戶查看場景的核心內容。

三、手勢交互：全方位呈現地圖立面

觸屏手勢交互有別于搖桿、鼠標、觸控筆等物理外設的控制方式，讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作，讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現方式。

單指拖動

拖動是地圖最基本的閱讀操作，一般以用戶的定位為初始中心點，用戶可以有目的有方向地查看附近的地點。

單指劃動

當用戶想快速翻閱時會撥走要略過的內容，劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下，向用戶展示地圖的新區域，是比拖動要快速的瀏覽方式。

雙指拖動縮放

物理控件只能讓地圖根據屏幕中心進行縮放，而觸屏縮放能讓地圖根據兩個指尖的中心點縮放，并同時位移，符合用戶空間操控認知。

雙指劃動縮放

劃動縮放和劃動一樣，讓用戶以更輕量的手勢加速的縮放地圖，并以一定的摩擦力減速停止，讓用戶快速找到目標位置。

單指快捷縮放

為了讓用戶能單手并可控地縮放地圖，不少地圖都設計了自己獨有的縮放方式。 zenly，通過屏幕兩側的邊緣，直接完成地圖的最大和最小縮放跨度。

snapchat拖動右側邊可緣喚起縮放滑塊，并使用emoji來表達距離，充滿幽默感。

騰訊地圖，通過劃動右側的滑塊，實現單手順滑地縮放，滑塊也支持劃動手勢。

百度地圖，通過點擊一個縮放控件，讓地圖以當前中心點進行分段縮放。

無限循環的地圖

地球是圓的，可以無限巡航，一些應用將縮到最小的世界地圖做循環處理，以呼應地球的循環轉動體驗。

方向視角切換

在陌生的環境用戶未必能分得清楚南北方向，利用手機的陀螺儀，可以告知用戶正在面向的方向。定位按鈕的二次點擊，將地圖從南北向轉到用戶面向的方向，有助于用戶二次確認自己的定位。

更多地圖使用了2D/3D視角的切換方式，2D是南北向的標準地圖，3D是用戶面向方向的地圖，幫助用戶更直觀地對應物理空間。

旋轉方向

可通過雙指或陀螺儀旋轉地圖，地圖上的文字也做出相應調整，保持水平、沿道路方向調整，以保證可讀性。

3D的旋轉也一樣，在保持水平和沿道路方向的同時，文字保持垂直。

當縮小到足夠遠時，用戶面向的方向意義就不大了，蘋果在縮小到一定范圍時，將地圖回彈保持南北向。

雙指拖動調整視角

地圖3D視角也支持自由調節，通過雙指平行的上下滑動，可以平順調整3D視圖鳥瞰的角度。

在地圖的最低視角做回彈處理，生動不呆板。

遠近也能影響鳥瞰的視角變化，視角越低越接近平視，拉進時有俯沖的感覺。

四、可視化信息：生動呈現地圖動態數據

從古代開始，人們就已經懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標記，地圖本身就是一個信息可視化工具。 互聯網地圖最大的優勢，就是能提供實時的信息數據。將數據標記在相應位置的坐標上，并分別歸類在不同的層級，疊加在地圖上查看。

地圖的常用數據形式可大致分為：點、線、面、熱力圖等，一個地圖可同時喚起多種類型、多個圖層的信息內容。

點數據

點數據是單個地理坐標上的標記，代表該位置上的信息，是地圖上最常用的數據信息。地圖通過不同的小圖標來區分位置類型，使用頻率越高的樣式越簡潔，地標建筑做形象化圖形標識。

聚合圖在地圖上呈現也是點數據，它實質是顯示一定區域內的信息聚合，但不強調具體的區域。聚合圖可以避免因為該區域的點數據過多，在地圖上信息過于密集。

百度的充電樁地圖就是以區域聚合充電樁數量，根據縮放調整數據的聚合。

騰訊地圖的文博地圖也是聚合圖，并根據文物的類型做了快速篩選。

線數據

線數據在地圖上呈現為線性，一般都沿著可行道路展示信息。導航路線是最常用的線數據，它提供具體行駛路線方案，并實時展示線路行駛的進度與方向。

也有粗略表示進度的線路數據，如快遞的物流進度路線就不需要具體的實際線路，只需要示意大致進程。

街景地圖則僅展示有全景圖的道路范圍，不提供進度與方向。

面數據

面數據要展示地圖上的具體區域，疫情環境下出現了區域風控需求，需通過了面數據畫出區域范圍。疫情地圖采用了聚合圖、面區塊兩種數據形式。

zenly使用了反向的面數據，根據用戶的行走記錄，將用戶走過的范圍擦亮，用戶未走過的地方是一塊彩色的平面，充滿娛樂感。

熱力圖

熱力圖以特殊的高亮梯度顯示地圖上區域的熱度，熱力圖的數據不會指向地圖上具體的位置，它能呈現熱度變化的趨勢。百度地圖用熱力圖直觀展示地區上的擁擠程度。

高德地圖的空氣質量地圖，使用聚合圖作為空氣質量評分，熱力圖作為空氣質量范圍。

snapchat使用熱力圖來表現該區域用戶發布動態的熱度，引導用戶發現內容，由于熱力圖不指向具體位置，能更好的保護用戶隱私。

熱力圖并不局限于面，路線也可以反映道路的熱度。Strava利用用戶的騎行數據，生成光點線路的熱力圖，可以看出哪些是熱門的騎行線路和必經地點。

路況也是一種線性的熱力圖，路況使用按段測量的方式，熱力值的梯度相對跳躍。

讓數據動起來

地圖是安靜的，但真實世界是忙碌的，讓數據動起來，給地圖增添更多情感化設計，緩解用戶的等待壓力。

忙碌的商家

外賣小哥端午節雨中送餐

公交努力奔來

五、底圖：為更好呈現信息的色彩系統

手機地圖的底圖最常使用矢量瓦片地圖，因為數據體積小，在互聯網環境下讀取速度快。矢量地圖用幾何圖形來表達區域，不展示具體細節，因此需要通過顏色去傳達不同區域的屬性或功能。

人們對于顏色和環境是能建立一定的聯想的，如綠色想到大自然，藍色想到水，紅色想到警示。根據人們對色彩的聯想，給矢量地圖中不同屬性的區域進行配色，幫助用戶理解地圖。谷歌地圖就曾經為不同類型的信息標記出700多種顏色，最后簡化為25個顏色，形成了地圖的色彩系統。

工具類地圖應用以地圖為核心基礎，對矢量圖形有最全面的歸類，因而擁有最豐富的配色系統。由于人們對區域功能的顏色聯想是相似的，各地圖廠商的標準地圖的配色都很接近。地圖用色素雅，才能讓多個顏色能和諧的同時存在，降低用戶的視覺疲勞，并能突出地圖上的信息圖層，讓用戶聚焦所關心的數據。

而一些垂直場景的應用，地圖區域功能的描述相對次要，通常會對地圖的用色進行大幅度精簡。以打車應用為例，地圖用色少且色調相近，突出核心的打車狀態信息顏色，同時體現應用的品牌特色。

不少運用地圖的概念設計中，會更極致的使用單色系地圖，僅突出數據信息的顏色，充滿未來感。

六、未來的地圖

隨著網絡速度的提升，手機硬件的升級，順應AR/VR技術的發展，地圖逐步進入3D和全真時代。蘋果地圖在現有的地圖的3D視圖下，已對地標建筑賦予更多細節，并在夜間模式模擬了燈光效果。

3D地圖就像是虛擬世界中的基礎建設一樣，蘋果地圖添加精細地標模型后，同時應用到Carplay的導航中，在駕駛時可直觀看到與現實世界對應的3D地標。

谷歌更是提出“沉浸式視圖”的高保真3D地圖，使用圖像還原一座城市的面貌，為瀏覽一座城市提供了幾乎真實的鳥瞰視角。

同時全真模擬日照和天氣系統，和現實一樣模擬東升西落的光線方向，模擬晚上和雨天下的城市面貌。

隨著地圖的立體全真化，地圖的數據也將向空間延伸。相對全真地圖而言，人們本身就身置真實的地圖場景中，未來借助AR設備，人們無需對照地圖即可完成導航。

結語

地圖歷來是人們借助藝術的手法，以極具想象力的方式對世界進行再現，它遵循科學測量的法則，使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認知，而現代的科學技術讓地圖呈現盡可能客觀。但地圖并非單純地呈現地球，而是呈現人們眼中的世界，它寄托著人們對美好生活的想象，更好的認識、探索和規劃世界。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。 

作者：騰訊ISUX團隊    來源：站酷


分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 

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