從6月分的全球開發者大會至今，大部分蘋果用戶都更新至iOS 14正式版系統。Widget成為新版本系統中討論度最高的部分，知乎、小紅書、公眾號各個平臺都能會看到關于桌面小組件的討論以及各種關于小組件排版設計攻略。本文帶你了解Widget的「前世今生」，除了很Android外，Widget這次為什么會成為這次iOS 14更新的重中之重，各大應用搶先適配iOS 14，搶占流量的新入口。

小部件最初來源于蘋果電腦工程師Rose的一個插件工具—Konfabulator，用來更換桌面運行工具的皮膚和外觀。2003年的Konfabulator是運行在蘋果操作系統之上的，而其中的主運行文件叫做Widget。就像現在很多的新型產品一樣，當年的Konfabulator一經發布，在美國引起眾多人的關注，兩位開發者也最終決定將這款工具命名為Widget。

一直到2004年11月Widget1.8版本正式對外發布，此時的Widget不再局限于某一平臺，而是一款跨平臺的產品。Windows和Mac用戶可以根據自己的喜好開發或使用Widget工具，這只是這款工具的開始。

時間來到2008，當時的蘋果已經推出了iOS 2。而Google聯合多家廠商開發了安卓系統，當時Android的最大特色就是開放，開發者可以根據自己的喜好隨意的修改底層文件，我們當時印象中多變的Android桌面使用的就是Widget程序。我們熟知的小米最早出圈的正式基于Android的MIUI。正是由于各家的隨意設計導致后來的Android設計語言碎片化嚴重、交互感受相互割裂。一直持續到Google將物理設計體驗帶入屏幕的設計語言Material Design，利用具象化的設計語言規范各家的開發，遵守統一的設計語言和交互感受，由于篇幅限制就不詳細展開去說。

Widget的定位其實相當于應用程序的擴展程序，使用的關鍵點在于用戶可以在不打開應用、無需加載等待的情況下，在屏幕上快速獲取信息甚至進行簡單的操作。

Widget按應用可分為三種：Desktop Widget、WEB Widget以及Mobile Widget，目前討論最多的iOS14更新的Widget其實是運行在移動設備上的Desktop Widget，又稱為Mobile Widget。

注：Widget在剛進入中國的時候，沒有通用的譯名，由當時的中搜命名為“微件”。直到這次iOS 14才使用“小組件“的命名。

蘋果多次強調Widget不是進入應用的另一種快捷方式，Widget是一種的信息展現方式，用來快速提供展示某些用戶關心的應用程序數據。

Widget按照用戶使用場景的不同，可以分為：信息小組件、集合小組件、控件小組件及混合小組件。而iOS 一直將主屏幕的控制放置于控制中心中進行交互，因此小組件類型的主要是信息小組件及集合小組件。

信息小組件

在人們的日常生活中有一類應用，無需進行操作，但應用需要經常性的更新信息。比如：天氣、時鐘等等。信息小部件將應用的關鍵性信息展示在小部件上，同時跟蹤相關信息的變化。根據小部件的大小選擇性的展示信息的密度。

集合小組件

將同一類型的眾多元素展示在小部件內，常見的比如：新聞報道、系列圖片或電子郵件等等。這類小部件有兩個特點：1.信息集合；2.點擊集合元素中的某一個元素可快速進入詳情頁進行瀏覽。集合小部件可進行垂直滾動，但在iPhone端由于交互限制，并不能進行此項操作。例如：微博、知乎。

控件小組件

控件小組件子除了顯示常用的功能狀態外，用戶可直接在主屏幕進行簡單的觸發操作，不需要打開相關應用，類似相關應用的外部遙控器。例如：音樂類小部件，用戶可以在當前小部件上進行簡單的暫停、切換曲目等操作。而iOS系統傳統的“控制中心”包括大部分的手機操作部分，因此iOS 14的小組件還是以展示信息為主。

混合小組件

實際上更多的小部件是同時具備以上兩個到三個特性的混合小部件。比如：音樂類小部件，不僅可以進行簡單的交互，同時也展示了當前播放音樂的基本數據。

蘋果作為全球化的頂級手機制作商，一直追求通用的設計語言。設計規范包括：完整性、一致性、直接操作、反饋、隱喻，用戶控制等幾個設計原則。蘋果有別于其他手機系統的封閉式系統，作為一個習慣于為用戶做決定的父系公司，雖然這次Widget的跟新被看做是蘋果對于之前控制的減少，但在iOS 14關于Widget的官方設計指南中，也有明確的關于Widget尺寸的限制、卡片式的圓角半徑的限制、展示內容形式限制、設計交互的限制。

iOS桌面小組件的內容雖然可以通過開發定制，但在手機桌面仍然保留規范的視覺規則。

三種尺寸

Android小部件之前雖然也有限制minHeight和minWidth的大小屬性，但卻可以通過左右上下拉伸大小，調整小部件信息展示內容的多少，因此大小其實是不受控制的。

在iOS 14這次更新的小部件，同一應用限制只提供3種尺寸2x2、2x4、4x4。

小組件的核心功能是讓用戶無需進入app便可獲得信息，即少量但即時、有用且高度相關的信息。因此針對不同作用的應用需要先進行展示信息的梳理整合，明確小部件的核心目標。

• 2x2小尺寸的小部件類似動態圖標，僅顯示當前當地的天氣，并可以打開應用。

• 2x4中等尺寸以及4x4大尺寸的小部件，則可以在2x2的基礎上額外展示更豐富的信息，并且可以與用戶進行交互。

同時為了確保所有小部件的圓角看起來都是一樣的，要求所有小部件采用SwiftUI容器應用正確的角半徑。相關開發文檔ContainerRelativeShape

位置吸附

Android手機桌面的widget可以隨意的放置在任何位置。而iOS的小部件和之前的所有圖標一樣，仍然要緊貼其他應用吸附在屏幕的頂端，不能居住只能靠邊放置。

智能堆棧

當在同一區域希望有多個小組件進行展示時，可以使用智能堆棧功能。根據不同的使用場景，通過上下滑動進行切換。Siri會根據時間的變化，顯示不同的小組件內容。

蘋果從iOS7開始借鑒了微軟以及谷歌的設計語言，減少視覺裝飾、拋棄了擬物化的設計風格，盡量以內容為核心，在這次的iOS小部件也對內容展示進行了限制。

• 聚焦內容目標點。小部件的關鍵點在讓用戶易于瀏覽，所以需要前期進行設計目標的梳理，僅展示少量的信息，專注于程序的某一部分內容。

• 顯示內容與大小的關聯性。創建不同尺寸的小部件時，不應該只是簡單的擴大小部件的大小，而應該是在大尺寸時考慮展示更多內容，更詳細的可視化效果，圍繞基本信息的基礎上修改表現形式，進行優化和調整。

• 提供真正有用的信息。小部件的意義在可以在主屏幕立即為用戶提供有意思的內容，而不是像桌面圖標一樣成為另一種快捷打開方式。

• 保持展示內容的更新。小組件的展示數據需要不斷的更新，否則無法吸引用戶的注意。

• 尋找應用的特殊性。例如日歷小組件，可以針對特定的時間和事件進行獨特的視覺處理。

• 合理的設置選項。長按小組件會出現“編輯小組件”的選項，可以對組件的展示內容做分層或重要程度展示。例如：天氣、時間切換城市的定位。網易云音樂“定制我的云音樂小組件”切換“每日音樂推薦、我喜歡的音樂、私人FM、歌單推薦、私人雷達”的順序。

• 避免在小組件中加入過多的交互元素。避免過多的目標，以至于用戶無法點擊所需的目標。根據內容小尺寸，設置一個點擊元素便可，中大尺寸的小組件，可設置多個點擊元素。如中等尺寸的微博，可以通過點擊任意一條熱點，查看熱點內容。

• 僅支持點擊，不具備垂直滑動。在Android的集合類小部件除了基礎的點擊交互外，支持部件內信息的垂直滑動，但在iOS系統中的小部件不具備垂直滑動的操作方式，應該是蘋果考慮到小部件在左劃的homescreen，可以無限堆疊小部件，容易引起交互操作的沖突。唯一的交互方式就是點擊打開應用。

可以看到iOS 14的widget沒有其他交互方式，只能通過點擊喚醒應用或某條資訊的詳情頁。蘋果在保證一貫簡單明了的用戶體驗外，不建議應用商設計過于復雜的樣式來呈現內容，盡可能的減少用戶電池、網絡方面的消耗。

weight設計系統內容常見布局形式，可以作為設計小組件時的參考。

由于蘋果本身自帶的話題屬性，在2020年6月22日第一次線上開發者大會—WWDC20發布的widget，到iOS14正式版上線期間，國內外熱度一直高居不下，首先各家應用廠商、個人設計開發師都推出自己對widget適配的產品；小紅書、知乎、微博等公眾流量平臺的個大私欲流量博主基于產品的適配推出各種風格主屏幕的應用攻略，widget迅速成為巨大的流量入口。

從6月分的開發者大會到正式版上線，蘋果在自家的應用App store的Today專題、iOS 14精選App對widget進行了針對性的推薦，當搜索“小組件”等關鍵詞時還會出現“超實用的小組件”專題推薦。

基于蘋果用戶的巨大市場，App能夠獲得蘋果的推薦意味著大量有效曝光以及話題熱度，此時很大一部分應用，根據產品特點，搶先適配小組件功能，獲得蘋果推薦，搶占一波流量。

從9月份開始，color Widgets、倒數日、Widgetsmith、我的天氣等多款以時鐘、計時、日歷、天氣功能的小組件應用多次輪番登上App Store應用免費榜第一。（數據來自七麥數據）

并且直到現在依然維持相對穩定排名的高度，及高下載量。

這些數據一方面不僅因為用戶在知乎、小紅書、抖音對于如于如何使用小組件的功能、如何更定制化的設計布局自己桌面的討論，還在于各大社交平臺應勢對于小組件話題的推送，使蘋果的小組件獲的了更多的關注度，與用戶關注度。

而有些設計師看到這其中的巨大流量賺的盆滿缽滿。9月20日設計師@Traf在自己的社交媒體賬號發布了自己設計的iOS 14主屏幕，立刻獲得大量用戶的喜歡。Traf轉手將自己的這套圖標以28美元的價格出售，開始就獲得了3626人的支持（有興趣的小伙伴可以點擊https://icons.tr.af/ 購買），六天就賺了10 萬美元，有人要去畫圖標了嗎？

蘋果對widget的特性定義為：簡單明了（Glanceable）、恰當展示（Relevant）、個性化定制（Personalized）。阿里和京東于9月中旬基于對iOS新特性widget的理解與限制，分別對自家產品手淘和京東進行了適配設計。

京東根據iOS 14 widget提煉出的關鍵詞：簡潔、高效、內容化。整合自己出自己品牌的設計三大原則：個性、信息、情景。在設計原則的基礎上，結合京東的業務指標和用戶場景，制定出了京東widget的四個方向：物流（工具）、直播（互動）、店鋪（私域）、秒殺（營銷）。

• 物流——提升獲取信息的效率。及時查看物流通知，跟蹤物流進度，提升用戶獲取信息的效率

• 店鋪——建立用戶與產品間的連接。利用widget的展示功能，在桌面推出店鋪的新品，方便用戶隨時隨地關注不同店鋪的新品。

• 秒殺——聚焦首頁獲取核心信息。為用戶實時提供秒殺商品，紅包，配合京東的簽到形式，承載京東營銷矩陣的業務背景。

• 直播——用戶互動。推薦熱門、感興趣的直播，預告明星直播，增加用戶與用戶、用戶與主播間的互動。

手淘根據數據得出：用戶雖然平均每天進入屏幕的次數超過90次，但停留的總時長不過幾分鐘。結合一閃而過的快速切換應用的主屏幕里，設計交互復雜的應用界面并不能契合用戶的需求。得出設計要素：一目了然、高相關性、個性化。

• 所見即所得的物流——將查看物流信息之前需要“打開手淘、點擊我的、進入訂單、查看物流”4步操作，簡化至前臺widget透出，用戶輕松掌握包裹的一舉一動。

• 強大的訂單管理——基于手淘人群60%的目標在訂單模式，快速啟動功能。以及對一些必要widget做了深色模式的顏色適配。

• 便捷的互動權益提醒——針對淘寶人生、淘金幣、芭芭農場等互動專區，可在widget組件上時效了解自己互動權益的完成狀態。

• 千人千面內容定制——基于商品、社區、直播、店鋪等手淘的廣泛產品，通過多元的方法將前臺的展示權利交給用戶。例如：關注的店鋪，關注的直播內容，愛豆的時裝秀。

京東立足于自身的業務指標和用戶場景制定京東widget的四個方向，手淘根據數據導向一目了然的用戶需求。但由于京東與手淘都是購物應用，結合widget信息展示的特點，最終的聚焦點都是在于信息的獲取效率及提醒。使用戶在不打開應用的前提下，滿足不同的場景需求。但淘寶常年的游戲營銷，淘寶人生、淘金幣、芭芭農場的互動場景使他的業務場景化比京東更游戲化，在視覺方面也更豐富。

推薦閱讀：

京東APP iOS14適配解鎖

來了來了，iOS14 和淘寶新功能一起來了??！

下面推薦幾款我自己覺得非常不錯的小組件。

開發者David Smith發布的一款用戶可以自己創建定制天氣、日期、天文等widget的應用。該應用采用了直觀的圖形界面話，精確調整每個widget包括字體、顏色、背景色等的顯示信息和樣式。支持大、中、小三個尺寸，與iOS 14的Widget 大小是完整匹配。

與其他小組件不同的是，Widgetsmith可以根據時間自動變換小組件，在編輯小組件時選擇“Add a Timed Widget”，然后在表盤上劃分時間，并添加對應的小組件。放置在桌面的小組件就會隨著時間變化成相對的畫面。

這款應用與其他天氣類應用不同的地方在于，它提供了9種的widget樣式，17個主題，滿足用戶各種風格的需求。除了常規的天氣預報外，還有實時天氣，空氣質量、世界天氣、生活指數可供選擇這款應用與其他天氣類應用不同的地方在于，它提供了9種的widget樣式，17個主題，滿足用戶各種風格的需求。除了常規的天氣預報外，還有實時天氣，空氣質量、世界天氣、生活指數可供選擇。

我的天氣同一家開發團隊的另一款小組件倒數日，是一款可以直接在屏幕上看到不同主題倒數天數的小組件，能根據自己心情更換背景。此外還可以設置日歷小組件和時鐘小組件。

西窗炷采用白底黑字簡約的界面風格，每天推送一首詩詞，點擊便可閱讀全文。也可以通過編輯小組件選擇自己想看朝代、體裁和顯示字體。

沒有買過豆瓣日歷的舉手，買完心心念念覺得自己會每天看一部電影，em……然而并沒有。豆瓣的小部件除了兩種電影日歷的樣式外，實時熱門書影音排行的界面也能讓用戶不用打開應用，便可獲得及時的影音信息，點擊進入詳情頁面。

當然也有網友做出了史上最強小組件，以及其他有趣的組件

目前每個手機用戶主屏幕上都會有越來越多的app，我們的衣食住行娛樂都需要各種app的協助完成，但隨著app的增長，用戶會將各種app按照種類、類型進行劃分，靠線索記憶或肌肉記憶，熟悉app的位置，但隨著時間的推移，我們可能又會有各種新的應用需要下載使用。重復分類、查找、點擊進入的行為，其實是很浪費時間的步驟。

首先我將之前的主屏幕全部隱藏，只留一個主屏幕頁面。數據顯示日常對手機的操作交互中，有50%左右的通過左手/右手單手握持操作，而我本人習慣左手單手握持操作。操作熱區如下圖中所示的從左到右從下到上。

其中頂部區域及右邊區域放置，豆瓣、西窗燭、我的天氣等展示類小組件；Todoist、Thing3、倒數日等任務管理類小組件；知乎、微博、頭條等咨詢類小組件則可以放置于畫面中間，不妨礙點擊某條信息。也可以使用智能堆放功能，將多種小組件放置同一區域，通過上下滑動進行切換。最后放置自己平時使用頻繁的應用圖標即可，使用頻率也是按從左向右的順序。大小方面

蘋果的app資源庫會默認經常使用應用可以直接點擊進入，在使用其他app不常用的app時，可以通過上方的查找區域進行搜索。

目前已經使用1個月左右，之前也試過各種好看的小部件，最后還是以效率為出發點，將大部分的app放置在app資源庫中。

在我們的認知中，手機桌面更像是一個應用程序的目錄。我們不會過多的在主屏幕停留，需要借助啟動圖標點擊進入應用進行操作，用戶打開某個桌面應用，在應用內進行操作；另一方面在當前app應用越來越多的現在，高頻應用與低頻應用混合，常常在使用時，陷入查找應用中，降低了信息獲取的效率。小部件的使用，使得用戶雖然還是不能在主屏幕界面進行數據處理，但小部件作為應用程序的擴展程序，用戶卻可以在不打開應用、無需加載等待的情況下，在主屏幕上快速獲取信息甚至進行簡單的操作，不得不說是在改變用戶長久以來的使用習慣。

無論是Google從碎片的Android系統轉向物理設計體驗的Material Design設計語言來規范各家的開發。還是最早提出“One productfamily，One platform，One store”希望將手指與手機觸摸交互與鼠標指針交互的打通，保證多設備的一致性，但最后卻被自己各種花樣作死的微軟磁鐵設計。各家都在嘗試統一設計語言，以及交互感受。而這次iOS 14的，我們已經看到了蘋果在iOS、iPadOS、macOS、watchOS乃至于tvOS上的聯動與融合，而小部件就是最重要的一步。

文章來源：站酷  作者：9號自習室

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

“今天吃什么啊？”

“不知道啊，看看大眾點評，哪家店比較靠前”

“一會去看什么電影？”

“我看豆瓣上，這部片子評分特別高，我們去看這個吧”

當我們每天面對類似“吃什么”“買哪個品牌”“周末去哪玩”等等需要抉擇的問題時，面對的選擇越多卻越不知道如何做決定，或者當下做了決定覺會一直思考做的這個決定是不是最好的，選擇困難變成了大眾病。面對用戶的選擇需求各大平臺都有自己的方式，幫助用戶做決定的同時，引導用戶購買目標產品，極大的降低了用戶的選擇成本，其中排行榜就是平臺的常用套路。用戶的選擇成本是什么？排行榜為什么能夠幫助用戶降低選擇成本？排行榜僅僅是用來降低用戶的選擇成本，為什么商家對排行榜也趨之若鶩？下面帶你了解為什么人人都愛排行榜，及我們生活無處不在的“顯性”“非顯性”排行榜。你可能都不知道，我們的生活正在被各種排行榜所支配！

排行榜的本質是一個沒有感情的信息篩選機制，某一相關的同類事物之間通過比較，反映同類事物客觀實力。排行榜建立的基礎在于用戶對信息篩選平臺權威性的認可，比如我們買衣服會首選淘寶，電子類產品會首選京東，看電影會看豆瓣評分，這些都是對平臺某一領域權威性的認可。用戶信任平臺權威性對信息的篩選，由于錨定效應降低用戶自己的選擇成本，準備快速的做出選擇。同時由于用戶的從眾心理或者羊群效應，也會對上榜主體產生強烈的品牌認可，為上榜主體帶來更多的利益、強烈的榮譽感、甚至流量和平臺背書標簽，比如：B站的百大up主，各個平臺排行榜的銷量冠軍、朝陽地區必吃榜第一名。那這一切背后的原理是什么？

一個完整的排行榜需要平臺、上榜主體、用戶三大組成部分，俗話說屁股決定腦袋，不同的定位決定了排行對三大組成部分不同的作用，當然背后的原理也不盡相同。

1.選擇類排行榜-降低用戶選擇成本

在沒有各種應用前，當我們決定購買什么東西或去哪家消費，前期需要花費大量的人力、物力，搜集相關的信息進行整理集合后，對比集合信息后才能做出決定，也就是說用戶需要經過信息的搜集-備選集的建立-擇優決策3個過程才能等到最終的結果。在建立備選集后，做出擇優決策階段發生的成本或費用都是用戶付出的選擇成本（前兩個階段發生的成本是交易費用，而不是選擇成本）。在備選集的建立過程中，包含的選擇越多，用戶選擇的難度就越大，選擇成本就會越高。

選擇性排行榜在備選集建立完成后，利用沉錨效應在用戶心理建立潛意識的目標參照，幫助用戶完成擇優決策，降低用戶的選擇成本。（另一方面平臺在幫助降低選擇成本的同時，也會影響這用戶的最終選擇，在接下來的平臺側方面會有詳細的分析）

比如說：當我需要買個耳機時，如果在沒有各大應用的前提下，我需要找到我身邊的耳機發燒友或數碼電子方面方面的內行人，收集信息建立備選集，但由于京東在電子設備方面的權威性，我會優先查看京東的耳機類排行榜，也就是說京東完成了前期的信息搜集及備選集建立，而用戶出于對平臺權威性的信任，根據平臺給出的維度參照、品牌參照、價格、標簽參照等信息，最終快速的完成自己的選擇。整個過程就是用戶在對錨的尋找，以及用戶對信息確定性的尋找過程。

2.信息類排行榜-滿足社交需求

在馬斯洛需求中，當個人的生理需求和安全需求被滿足時，與他人建立情感聯系或關系成為人們最強烈的需求，即社交需求。社交又分為：為達到某種目的產生的功利社交或為獲得情感連接及體驗的共情社交需求。例如：QQ音樂新增的撲通社區、微博明星超話打榜等功能模塊的火熱正是滿足了擁有共同興趣愛好的用戶對于共情社交的需求。

無論是“功利社交”還是“共情社交”首先需要的是溝通，溝通的本質則是信息的流通，但當雙方都沒有可以溝通的信息時則社交不成立，而類似：微博熱搜、今日頭條、澎湃新聞等信息類排行榜，則給有社交需求的用戶提供了相通的談資。

在選擇類排行榜中，提到的從眾心理（又稱羊群效應），是指人類由于對信息壓力及規范壓力，會希望融入到群體中尋求安全感的特性，即便此類信息與自己無關。大部分人由于對未獲得及時信息的焦慮感，會熱衷于瀏覽此類排行榜來獲取實時信息，融入群體生活。每天早上，在通勤的路上用戶利用碎片時間刷微博、瀏覽知乎或今日頭條等應用了解最近發生了什么社會事件，在上班電梯或工作間隙討論各自掌握的信息，及對事件的見解，甚至在與他人有相同的見解或之后，會對對方產生莫名的親近感，滿足自己的社交需求。

3.分享類排行榜-自我確認需求

過年期間各家app紛紛推出自己的用戶年度報告總結榜，不知道你有沒有參與到其中，并分享到自己的朋友圈。在我們的平常生活中也會在朋友圈、B站等看到各種測試自己隱藏能力或性格的小程序，人們對于這類活動的空前熱情其實是因為人類除了需要信息的確認外，還需要了解自身在大數據下的自我確認，通過各種各樣的榜單，判斷自身的能力、情緒、價值等，來達到自我認同，否則就會感到焦慮不安。

加拿大社會學家歐文·戈夫曼在《日常生活中的自我呈現》中提出他對社會生活的理解“社會是舞臺，人人皆演員”。 在社會這個舞臺我們需要對外有印象管理的過程，我們想要呈現給觀眾怎樣的形象，需要我們對自身及身邊人有所思考和了解。所以在社會生活中我們呈現的是自己思考管理下被他人和社會接受的自己，為了維持自身的平衡防止崩潰，人類會自發“忠誠、紀律、謹慎”的維護自己的外在形象。而互聯網平臺大數據則折射出“隱形”的自己，讓用戶更加清楚的認知自己，同時通過分享，滿足自我確認以及他人確認的需求。

我目前只總結出這三種類型的排行榜，如果有小伙伴想到其他類型歡迎在評論區提出，一起參與討論。

無論哪種排行榜，用戶信任的基礎都來自對平臺的信任，那么用戶為什么信任平臺？排行榜對平臺意味著什么？背后原理是什么？

對于用戶來說排行榜是為了滿足用戶對于數據參數、社交信息、自我個人的確定性，選擇成本是品牌經濟學的核心，而用戶對于排行的信任首先要建立在平臺品牌的權威性下。

1.平臺權威性—用戶側

從我們記事起，我們對世界的認識來自自己的父母或老師，而這些教導我們什么是對、錯，對當時的我們來說是權威的化身。長大后我們對于權威的認可更傾向于某一領域的專家，比如：醫生、律師、教授等。認為處于權威地位的人在某一領域相對普通用戶的判斷更可靠，可以幫助普通用戶節省研究問題的工作，做出更輕松的決定，雖然不一定是正確的。

搜索我們會第一時間想到百度，影視、書籍會想到豆瓣，想聽音樂會打開網易云音樂、QQ音樂等等。各大應用經過長時間的廝殺各自在用戶心中建立了某一領域的權威性，形成品牌號召力，推動用戶做出需求決策。另一方面排行榜中也會說明數據來源，比如京東會在排行榜頁面有明確的榜單說明，豆瓣根據平臺數據更新，汽車之家依靠外部的權威數據等等方式力證自己榜單的公正、透明，減少用戶做出決定中的思考、猜測，獲得用戶的信任，增強平臺的權威性。那對于平臺來說權威性的建立意味著什么？

2.平臺權威性—平臺側

• 影響用戶的決策方向

平臺權威性意味著說服力和影響力，在減輕用戶的決策壓力的同時，影響用戶做出平臺所需的決策方向；

• 平臺自帶話題性

每年蘋果發布會都會帶來范圍極大的熱度討論，而app store內的熱門推薦自帶話題度和討論熱度

• 輸出口優化

排行榜作為內容輸出口，在平臺權威性的背書下，產品優化自身的價值，而平臺也可以通過排行榜優化自身平臺價值

• 平臺盈利

平臺權威性下，可以通過多種方式達到盈利，比如蘋果app store應用商店內的付費應用，百度的鳳巢系統、微博熱搜的第3、4位排名等。

3.平臺權威性—廣告告知

在平臺完成建立權威性開始利用排行榜進行商業變現時，比如百度、58的競價排名，現在大部分應用會使用明顯的方式告知用戶，防止平臺建立品牌權威性。比如微博熱搜第3、4位廣告位的“薦”，淘寶、小紅書推薦猜你喜歡的“廣告”。

上榜主體作為整個排行榜的內容中心，由于排行榜自帶的競爭機制、篩選機制，使得用戶會很樂于分享出去，比如游戲類應用王者榮耀的勝利者排位、微信運動排行榜。 

由于馬太效應上榜主體中的頭部用戶會獲得平臺更多的曝光量、絕大部分用戶的關注度，以及各種潛在資源，比如：流量、資源、人脈、某一領域影響力、平臺背書等等，這些都是潛在的社交貨幣。這種激勵機制極大的滿足了上榜主體的榮譽感、及平臺歸宿感，比如bilibili不同粉絲量級會送出相對應的粉絲牌。

而平臺方也利用上榜主體挖掘潛在的用戶，為平臺帶來更多的新用戶，加強平臺權威性，形成平臺和上榜主體的良性循環。甚至與出現上榜主體自己的流量超過平臺自身流量，帶走平臺用戶的情況。比如去年和熱鬧的“巫師財經推出b站，簽約西瓜視頻”，各大平臺也時不時會出現搶占流量up主的情況。

排行榜資源的建立

排行榜設計要達到用戶攀比的效果，很重要的充分條件就是相同需求的好友基數足夠大，這樣才能構成排行榜設計成功的必要條件。

1. 同系同門資源導流

對于已有成功產品的公司，可以借助平臺相互間的導流完成初試資源的搭建，比如：微信初期借助QQ好友流量，帶來好友初期的爆發；抖音最初的活躍借助今日頭條的流量輸入。

2.自建用戶體系

不斷推送已關注好友的信息流，當通訊錄好友開始使用頭條都要發送系統推送。比如全年年低火爆全網的cloubhouse就是利用的熟人社交，你要先有這個人聯系方式才能要求好友，關注的人越多才能解鎖更多的聊天室。通訊錄、地理位置、興趣偏好等等，不斷社區建設推送動態信息流和好友卡片推薦。

3.偽造

當應用建立初期，沒有很多的資源和內容時，需要平臺自行填充內容，使得排行榜信息量大，增加用戶活躍，才能挖掘用戶的需求和個性化。不如一些小編推薦、猜你喜歡等等，或是平臺pgc發布推送的內容。

面對不同的用戶人群及使用場景排行榜的入口表現形式也會千變萬化，根據表現形式大體可分為“顯性排行榜”和“隱形排行榜”。

在界面有明顯的榜單名稱、排序、評判規則、上榜主體、賣點信息等。排序和內容主體是這個排行榜的基本構成，其他則根據不同產品類型及產品需求決定是否展示。

1.頁面tab

在首頁底部或頂部tab形式出現，多出現在以UGC或文字信息為核心的產品，以內容信息為主，常見以信息熱度為主要功能的資訊、新聞類應用。比如：知乎、今日頭條、36氪。

知乎熱榜內容完全展開；36氪分為話題榜、人氣榜，話題榜僅展示前5條，人氣榜展示10條，僅在前5條有名次圖標，在36氪熱榜的中部還會出現收藏榜，綜合榜。

而今日頭條僅在整個頁面的1/3處展示部分“頭條熱榜”，點擊“查看更多”后，展開“頭條熱榜”及“今日關注”“北京熱榜”，整個交互形式類似微博熱搜。

2.圖標入口

首頁功能入口處明顯排行榜圖標，優先級較高，常見自帶推薦屬性，能夠幫助用戶快速選擇，減少選擇成本，比較依賴榜單的應用。比如：豆瓣、音樂類、騰訊動漫等應用。

其中豆瓣、網易云音樂由于各種類型的排行榜很多，在圖標點擊開后，在當前頁面平鋪不同維度榜單類型，用戶進行點擊跳轉；騰訊動漫相對榜單類型較少，在左邊側邊欄切換不同的榜單。

3.商品詳情頁榜單入口

用戶查看商品詳情時，可能會希望能夠橫向對比同類商品，才能最終決定購買那件商品。常見于電商類應用，比如：京東、拼多多、得物等。點擊后進入不同的榜單頁面，獲取更多產品信息進行篩選。（淘寶的商品詳情頁沒有排行榜，但在首頁卻存在隱形排行榜，在隱形排行榜模塊會有詳細說明）

4.搜索-篩選（無明確搜索目的）

當用戶沒有明確搜索目的時，搜索框的下方，平臺會推薦沒有明確指向性但有熱度的產品信息。衡量的標準一般為搜索熱度或信息本身的熱度。利用榜單效應留住用戶，比如：微博熱搜、淘寶熱賣、抖音熱榜等。

沒有明顯排名及規則，但經過大數據、平臺或榜單制作者篩選后呈現在平臺用戶的面前，位置越靠前，在用戶心目中的默認位置越靠前，比如淘寶的“有好貨”、編輯精選等。

1.編輯推薦/小編推薦

在平臺建立初期沒有特別的內容供平臺呈現，這時候就需要平臺人工有目的的推薦一些內容，不同于“猜你喜歡”建立在用戶的行為數據下，編輯推薦更多的平臺希望用戶看到的內容，一方面作為平臺內容的輸出口引導用戶，另一方面內容是平臺自己發布內容，也可以保證內容的高質量。

2.猜你喜歡/相關推薦

平臺根據用戶之前的瀏覽量、收藏量、轉發、搜索等用戶行為數據推薦給用戶相關內容。這個時候的應用基本已度過最初的獲客期，并且存在大量的平臺用戶使用數據，“猜你喜歡或相關推薦”模塊用來增加用戶的瀏覽時長及購買的可能性，各大應用平臺適用性強，一般出現在首頁部分。

3.年度總結排行榜

朋友圈每年年底都會曬出的各種各樣的生活、音樂、消費的排行榜，這些其實是用戶自己確定了解自己，且喜歡他人了解自己的一種方式。用戶通過網絡數據折射出自我的輪廓，清楚的認識自己。

4.TOP排行榜

不知道大家小時候看沒看過《第10放映室》，那是我最早關于排行榜的印象，里面會有各種最佳動作片總結、最佳男配角總結等等，以香港電影偏多，是我早年的電影信息資料庫。現在我們也會在小紅書、抖音、公眾號平臺刷到各種各樣的top推薦，這其實也是排行榜的一種。TOP類是已經經過人為篩選的排行榜，從眾多選擇中選擇出部分答案，給出理由，而用戶只需在已被篩選過的內容中進行決定，節省選擇成本，比如豆瓣每年都會舉行的豆瓣電影。另外一種TOP榜并不能幫助用戶做決定，但可以迎合用戶對確定性需求的各種盤點性質的排行榜，比如抖音的TOP榜哥就是盤點各種內容，人物。

5.搜索-篩選（有明確搜索目的）

相比其他排行榜，篩選后的內容已經體現了用戶的具體需求，高效明確的給用戶提供選項，引導用戶快速選擇。

排行榜一般由必需的榜單頭部、上榜主體，及非必需的榜單規則、更新信息構成；而上榜主體由必需的主體信息、排序，以及非必需的推薦理由、排名變化、熱度信息構成。

好的榜單能夠快速吸引用戶快速找到自己的需求點，引導用戶點擊排行榜進行查看。而榜單頭部也由于功能需求的不同分為唯一性榜單頭部、可復用性榜單頭部。

1.唯一性榜單頭部

當排行榜在整個應用中有且只有一個時，通常會對榜單頭部的背景及榜單名稱進行個性化、品牌化設計。比如微博的微博熱搜、知乎的鹽選榜單、今日頭條的頭條熱榜、大眾點評的大眾點評榜單等。其中微博、頭條、大眾點評都在名稱上有做品牌漏出，增加平臺的品牌權威性。

2.可復用性榜單頭部

有些應用平臺會存在內容需要多種不同緯度的排行榜展示的情況，為了平臺的統一性、降低后期的維護成本，一般會使用可復用的榜單頭部，如豆瓣、京東、QQ音樂等。

得物通過替換左右切換商品進行宣傳。豆瓣、微博、馬蜂窩雖然都是通過替換圖片及文案的形式達到適配，但根據場景又有不同。豆瓣、微博因榜單效應根據榜單第一位的變化更換底圖及文案；馬蜂窩沿用自己品牌的蜂窩形狀及“馬蜂窩榜單”的標簽設計形式，通過更換文案底圖達到適用不同主題；京東就相對比較簡單，只是更換標題的文案達到多主題適配。

排行榜上榜主體由于不同的場景業務需求，一般有純文字形式、圖文結合形式、橫排+列表結構3種表現形式，其中主體信息及排序為排行榜必須信息，而推薦理由、排名變化、熱度信息、評分等等非必須信息則根據用戶關注信息點選擇漏出。

1.純文字形式

純文字的排行榜一般是以內容（或標題）加排名的形式出現，常見以信息為主的排行榜，比如微博、知乎、今日頭條等以信息為主要關注點的應用，或是搜索列表下方的熱度排行榜。信息類排行榜一般以信息熱度為衡量標準，因此會在標題及排位外，增加各種突出熱度信息的表現形式，如關注熱度人數，或是“熱”“新”“爆”等等表示熱度的標簽，如抖音、微博。而淘寶搜索熱度則是在標簽外增加了上升下降的排名變化。

2.圖文結合形式

相對于純文字形式，圖文結合的排行榜因為圖片信息的增加，使整個榜單主體占居更多的空間也可以展示更多的產品信息，輔助用戶進行選擇。

• 圖片形式

上榜主體圖片尺寸一般會有橫版、方版、豎版3種形式。頭條、知乎等資訊類應用都采用傳統的橫版圖片形式，延續了用戶閱讀新聞類資訊的習慣；而豆瓣、騰訊動漫等由于現實中書籍封面、電影海報等用戶視覺場景都是豎版構圖，因此沿用至線上使用的也是豎版圖片形式；而京東、大眾點評、馬蜂窩則使用方版的圖片形式，大概是因為產品的多樣性需要考慮多種圖片的適配問題。（視頻、游戲類由于使用場景大部分采用橫版圖片形式；但由于游戲封面、宣傳海報也會有豎版的形式，比如：游民星空、小黑盒）

• 左文右圖VS左圖右文

每當設計圖文結合的部分，首先要考慮到底是采用左圖右文還是左文右圖的形式呢？可能很多人會說這兩種形式沒有什么大的區別啊，有什么可糾結的！或者認為由于視頻、圖片、文字對人類的吸引力是呈遞減形式的，因此應該選擇左圖右文的形式。但實際上這跟我們長久以來的閱讀習慣以及應用希望觸達的用戶類型有很大的關系。

人類對畫面的閱讀及掃描方式通常為三種布局方式，包括：古騰堡圖（Gutenberg），Z型（z-pattern）和F型（f-pattern）。其中產品列表頁中最常使用的就是F型布局模式，F型布局是雅各布·尼爾森（Jacob Nielsen）在公司進行眼動追蹤研究后首次提出的。與其他模式相同的是，眼睛從上/左，水平移動到上/右，然后回到左邊緣再此進行水平掃描。但在F型布局第二次掃頻后，向右掃動的次數會越來越少，并且會隨著向下移動，眼球會緊貼左邊緣。用戶也傾向于F型模式瀏覽瀏覽整個頁面，即自左向右自上而下的閱讀模式，越向下信息獲取效率會越低。

因此今日頭條、知乎等需要通過文字傳遞給用戶準確、豐富的新聞資訊類應用普遍以左文右圖的形式展現。而電影、游戲、動漫等以畫面觸達用戶需求的應用則都采用的是左圖右文的表現形式，比如：騰訊動漫、愛奇藝、得物等等。

3.橫排+列表表現形式

說到排行榜我們一般第一個會想到領獎臺，很多平臺也采用領獎臺這種前三名橫排+其他排名列表的結構。純列表形式的排行榜，平臺用戶的注意力大部分集中在第一名，而領獎臺的形式模仿現實生活中的獎勵形式和儀式感，將整個排行榜的關注范圍從第一名擴展至3名，另一方面排行榜的競爭關系從單一爭爭奪一名變成前三名的競爭關系，增加了第一名的高度。（目前這種形式我只在微博的明星勢力榜及抖音的直播全站榜中有看到）

榜單規則是排行榜規則的描述，是平臺權威性的體現。榜單規則有些平臺本身具有數據庫，會有相關的平臺數據支持如京東；而汽車之家則依靠“汽車工業協會”外部的數據支持，增加平臺的權威性及榜單的可信度；

信息更新一般存在在榜單頭部和上榜主體的中間，有些是固定時間更新，也有類似微博熱搜是實時更新的模式，而騰訊動漫的更新作為用戶的痛點會在延續企鵝形象的側邊欄頭部標明榜單更新周期。

排行榜的成功看似是人們對于選擇困難、信息獲取的解決方案，但歸根到底因為人們對于不確定性的懼怕，無論是信息的不確定性或是對自身價值的不確定性。而平臺方利用金錢、名譽、獎勵的外部激勵方式，結合滿足感、確定性、社交性的內在激勵相互作用使得排行榜成為無論何種平臺都非常受歡迎的產品功能。作為平臺方因產品使用受眾、產品側重點、宣傳方式的不同，排行榜會以多種入口及展現形式出現。作為設計師需要深入了解排行榜等功能背后的產品邏輯，以及用戶操作行為背后的思考及心理效應，提出合理的設計，幫助用戶了解產品功能，滿足用戶需求。

文章來源：站酷  作者：9號自習室

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

join()方法：將數組中所有元素通過指定分隔符連接成一個字符串

舉例：

myArr.join('-') // 用'-'符號拼接  


    

        1
    

concat()方法：將兩個數組或多個數組合并成一個數組

舉例：

myArr.concat(arr1, arr2, ..., arrN)  


    

        1
    

注意：該方法不會改變現有的數組，所以可以和空數組合并實現復制舊數組，在操作新數組數據時不污染舊數組數據

sort() 方法：用于對數組的元素進行排序

如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較

舉例：

myArr.sort() // 按字母排序
myArr.sort(function(a, b) {
    return a - b
}) // 按數字升序，降序為b - a
// 箭頭函數寫法
myArr.sort((a, b) => a - b)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

reverse() 方法：用于顛倒數組中元素的順序

舉例：

myArr.reverse()  


    

        1
    

push() / unshift()方法：向數組的末尾 / 開頭添加一個或多個元素，并返回新的長度

舉例：

myArr.push(item1, item2, ..., itemN)
myArr.unshift(item1, item2, ..., itemN)  


    

        1
    

    

        2
    

shift()方法：刪除數組的第一個元素，并返回第一個元素的值

舉例：

myArr.shift()  


    

        1
    

pop()方法：刪除數組的一個元素（默認最后一個元素），并且返回該元素的值

舉例：

myArr.pop() // 刪除數組最后一個元素
myArr.pop(1) // 刪除數組中索引為1的元素  


    

        1
    

    

        2
    

splice()方法：向/從數組中添加/刪除項目，然后返回被刪除的項目

myArr.splice(index, count, item1, item2, ..., itemN)
// index 必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置
// count 必需。要刪除的項目數量。如果設置為 0，則不會刪除項目
// item1, item2, ..., itemN 可選。向數組添加的新項目  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

forEach()方法：方法用于調用數組的每個元素，并將元素傳遞給回調函數(相當于for循環)

舉例：

myArr.forEach(function (item, index, arr) {
    if (index === 3) {
        item = 123
    } 
}) // 循環數組，將索引為3的元素值更改為123
// 箭頭函數寫法
myArr.forEach((v, i, arr) => if (i === 3) { v = 123 })  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

注意：以下方法均不會對空數組進行檢測，不會改變原始數組

indexOf()方法：查找數組是否存在某個元素，返回下標，沒有則返回-1

舉例：

myArr.indexOf(item)  


    

        1
    

注意：indexOf() 方法對大小寫敏感！

slice()方法：可提取字符串的某個部分，并以新的字符串返回被提取的部分（淺拷貝數組的元素）

舉例：

const newArr = myArr.slice(0, 1)
// 截取數組myArr索引從0到1的部分元素
// 參數:
// begin(可選): 索引數值,接受負值，從該索引處開始提取原數組中的元素,默認值為0。
// end(可選):索引數值(不包括),接受負值，在該索引處前結束提取原數組元素，默認值為數組末尾(包括最后一個元素)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

every()方法：用于檢測數組中的元素是否滿足指定條件（函數提供）(如某個值是否都為true)

如果有一個元素不滿足，則整個表達式返回 false，且停止檢測；如果所有元素都滿足條件，則返回 true

舉例：

const state = myArr.every(function (item, index, arr) {
    return item > 10
}) // 檢測數組myArr的所有元素是否都大于10，返回一個布爾值state
// 箭頭函數寫法
const state = myArr.every((v, i, arr) => v > 10)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

some()方法：用于檢測數組中的元素是否滿足指定條件（函數提供）(如某個值是否都為true)

如果有一個元素滿足，則整個表達式返回 true ，且停止檢測；如果沒有滿足條件的元素，則返回false

舉例：

const state = myArr.some(function (item, index, arr) {
    return item > 10
}) // 檢測數組myArr中是否存在元素大于10，返回一個布爾值state
// 箭頭函數寫法
const state = myArr.some((v, i, arr) => v > 10)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

includes()方法：用于判斷數組是否包含指定的值，如果找到匹配的值則返回 true，否則返回 false

注意：includes() 方法區分大小寫
參數:
searchvalue：必需，要查找的值
start：可選，設置從那個位置開始查找，默認為 0

舉例：

const state = myArr.includes(3) // 檢測數組myArr中是否存在元素3，返回一個布爾值state
const state = myArr.includes(3, 3) // 從索引3開始檢測數組myArr中是否存在元素3，返回一個布爾值state  


    

        1
    

    

        2
    

filter()方法：創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素

舉例：

const newArr = myArr.filter(function (item, index, arr) {
    return item > 10
}) // 檢測數組myArr中所有元素都大于10的元素，返回一個新數組newArr
// 箭頭函數寫法
const newArr = myArr.filter((v, i, arr) => v > 10)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

map()方法：返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值

map()方法按照原始數組元素順序依次處理元素

舉例：

const newArr = myArr.map(function (item, index, arr) {
    return item * 10
}) // 數組myArr中所有元素都乘于10，返回一個新數組newArr
// 箭頭函數寫法
const newArr = myArr.map((v, i, arr) => v * 10)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

舉例（用于數組嵌套對象的類型）：

const newArr = myArr.map(function (item, index, arr) {
    return {
        id: item.id,
        newItem: '123'
    }
}) // 處理數組myArr中指定的對象元素里面的元素或新元素，返回一個新數組newArr
// 箭頭函數寫法
const newArr = myArr.map((v, i, arr) => {
    return {
        id: v.id,
        newItem: '123'
    }
})  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

find() / findIndex()方法：返回通過測試（函數內判斷）的數組的第一個元素的 值 / 索引。如果沒有符合條件的元素返回 undefined / -1

舉例：

const val = myArr.find(function (item, index, arr) {
    return item > 10
}) // 返回數組myArr中第一個大于10的元素的值val，沒有則返回undefined

const val = myArr.findIndex(function (item, index, arr) {
    return item > 10
}) // 返回數組myArr中第一個大于10的元素索引，沒有則返回-1  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

reduce()方法：返回一個新數組，數組中的元素為原始數組元素調用函數處理后的值

這個方法接收兩個參數：要執行的函數，傳遞給函數的初始值
要執行的函數(total, currentValue, currentValue, arr)：
total：必選，初始值, 或者計算結束后的返回值
currentValue：必選，當前元素；
currentValue：可選，當前元素索引；
arr：可選，當前元素所屬的數組對象

舉例1：

const myArr = [1, 2, 3]
const sum = myArr.reduce(function(pre, cur, index, arr) {
    console.log(pre, cur)
    return pre + cur
})
console.log(sum)
// 輸出值分別為
// 1, 2
// 3, 3
// 6  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

舉例2（設置初始迭代值）：

const myArr = [1, 2, 3]
const sum = myArr.reduce(function(pre, cur, index, arr) {
    console.log(pre, cur)
    return prev + cur
}, 2)
console.log(sum)
// 輸出值分別為
// 2, 1
// 3, 2
// 5, 3
// 8  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

應用：

1.求和、求乘積
const myArr = [1, 2, 3, 4]
const result1 = myArr.reduce(function(pre, cur) {
  return pre + cur
})
const result2 = myArr.reduce(function(pre, cur) {
  return pre * cur
})
console.log(result1) // 6
console.log(result2) // 24

2.計算數組中每個元素出現的次數
const myArr = ['liang','qi','qi','liang','ge','liang'] 
const arrResult = myArr.reduce((pre,cur) =>{
    if(cur in pre){
        pre[cur]++
    }else{
        pre[cur] = 1
    }
    return pre
},{})
console.log(arrResult) // 結果：{liang: 3, qi: 2, ge: 1}

3.對對象的屬性求和
const myArr = [
    {
        name: 'liangqi',
        weigth: 55
    },{
        name: 'mingming',
        weigth: 66
    },{
        name: 'lele',
        weigth: 77
    }
]
const result = myArr.reduce((a,b) =>{
    a = a + b.weigth
    return a
},0)
console.log(result) // 結果：198  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

Array.of()方法：用于將一組值轉化為新數組

舉例：

Array.of() // []
Array.of(undefined) // [undefined]
Array.of(1) // [1]
Array.of(1, 2) // [1, 2]  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

flat()方法：數組拍平方法也叫數組扁平化、數組拉平、數組降維，用于將嵌套的數組變成一維數組，返回一個新數組

轉自：csdn論壇， 作者：Assam180

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

一.HTML基礎

1.網頁開發工具

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

（1）<！DOCTYPE >標簽

• 它是文檔類型聲明，作用就是告訴瀏覽器使用哪種HTML版本來顯示網頁。
• 聲明位于文檔中的最前面的位置，處于< html> 標簽之前。
• 它不是一個HTML 標簽，是文檔類型聲明標簽。

（2）lang語言

• 用來定義當前文檔顯示的語言。
• en定義語言為英語 , zh-CN定義語言為中文
• 對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義成zh-CN的文檔也可以顯示英文

（3）charset 字符集

• 字符集(Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。
• 上面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統一使用“UTF-8”編碼。

2.常用基本標簽

（1）文本標簽

• 標題

<h1>標題一共六級選,</h1> <h2>文字加粗一行顯。</h2> <h3>由大到小依次減，</h3> <h4>從重到輕隨之變。</h4> <h5>語法規范書寫后，</h5> <h6>具體效果刷新見。</h6>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

<h1 align="對齊方式">文本內容</h1>  


    

        1
    

三種對齊方式：left，center，right

• 文本

上標與下標：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>個人信息注冊</title> </head> <body> <h4 align="center">個人介紹 </h4> <table align="center"> <tr> <td>姓名</td> <td> <input type="text" value="請輸入您的姓名"> </td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex" id="nan" checked="checked"><label for="nan"><img src="images/up.jpg" width="10" />男 <input type="radio" name="sex" id="nv"><label for="nv"><img src="images/down.jpg" width="10" />女 </td> </tr> <tr> <td>出生日期：</td> <td> <select> <option>--請選擇年份--</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> </select> <select> <option>--請選擇月份--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <select> <option>--請選擇日--</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </td> </tr> <tr> <td>籍貫</td> <td> <select> <option>北京</option> <option>重慶</option> <option selected="selected">山西</option> <option>山東</option> </td> </select> </tr> <tr> <td>個人愛好：</td> <td> <input type="checkbox" name="love">唱歌 <input type="checkbox" name="love">畫畫 <input type="checkbox" name="love">跳舞 </td> </tr> <tr> <td>求職原因</td> <td> <textarea cols="30" rows="10">對公司的描述</textarea> </td> </tr> <tr> <td>手機號：</td> <td><input type="text"></td> </tr> <tr> <td></td> <td> <input type="submit"> <input type="reset" value="重新填寫"> </td> </tr> <tr> <td>了解更多</td> <td><a href="#">關注公司</a> </td> </tr> <tr> <td>附件</td> <td> <h5>選拔標準</h5> <ul> <li>態度認真</li> <li>陽光開朗</li> <li>專業技能突出</li> </ul> </td> </tr> </table> </body> </html>

轉自：csdn論壇， 作者：董宇燕

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

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

不知道大家有沒有被說過，設計做的不精致？拿圖標舉例，其實不精致的原因就是統一性沒做好。我們總說做圖標要統一，但是到底要統一哪些要素？有沒有一個完整的自檢表呢？以前我總結了 5 到 6 個要統一的要素，最近觀察大家的練習之后，直接擴增到 9 個了，今天就以線形圖標為例，看看我們需要統一哪 9 個要素。

大綱如下：

1. 大小統一
2. 圓角統一
3. 語言統一
4. 粗細統一
5. 疏密統一
6. 間距統一
7. 比例統一
8. 正負形統一
9. 角度統一

大小統一

這個很容易理解，就是一組圖標看起來大小是一致的。但是最近發現了一個比較重要的點，就是很多同學做一組練習，相鄰的圖標都差不太多，但是隔的比較遠的圖標放在一起就差很多了，比如下面這幾個圖標，就是逐漸變大的：

所以對于大小統一，我們必須要做到，一組圖標里，任意兩個圖標拿出來都是大小統一的，否則就是不及格。

保持大小統一的方法見這篇 – 圖標設計規范。

圓角統一

圓角統一也是比較好理解的點，無非就是圓角大小，像下面這兩個圖標：

如果圓角差很多，你很容易發現，因為都是差不多大小的矩形，但是我們很容易忽略一些細節，比如下面第一個圖標的三角形，和旁邊的日歷相比，就過于尖銳：

這是圖標里面很細的細節，所以容易被忽視，大家一定要重視。

語言統一

語言統一你可以理解為設計風格統一，如果一組圖標里面出現了多種風格，那會顯得非常不專業。

比如下面這組練習：

大體看好像是一種語言，但仔細觀察其實還是有很多細節不統一的，比如外輪廓上面有的有白色，有的沒有，白色還分帶描邊和不帶描邊：

這就是在語言上不統一的案例，大家在做練習的時候，一定要想清楚你的語言是什么。

粗細統一

粗細統一就不用說了吧，基本就是用在線性圖標線條粗的，比如像這種比較明顯的粗細不一致，就不應該出現了：

這都是最最基礎的問題。

疏密統一

疏密統一其實是很多新人朋友容易犯的錯，比如下面這一組圖標：

大部分地方是比較透氣疏松的，但是只有第二個比較密集，這樣就會讓人感覺比較突兀，整體不夠和諧。這就是疏密程度的統一性，一定要把握住節奏感，否則就會不舒服。

間距統一

這個點一般用在斷線圖標上，也就是你開口大小的統一性，比如一個開很大，一個開很?。?

那就證明細節沒有做到位。

比例統一

比例可以分很多種，比如顏色比例，像下面這個原作的顏色比例就沒有太統一：

在小 y 優化臨摹之后，達到了顏色比例的平衡：

再比如之前說的一個案例，粗細線條的比例：

• 第一個圖標，粗線與細線的比例：95:5
• 第二個圖標，粗線與細線的比例：70:30
• 第三個圖標，粗線與細線的比例：100:0

在這樣不統一的情況下，圖標是一定不會精致的。這些都是比例統一問題出現的實際場景。

正負形統一

正負形也是沒那么容易看出來的，舉個例子，下面這組周楠做的圖標，乍一看沒什么問題，但是仔細一觀察，其實我們會發現，白色面積的重量其實是不統一的，那個消息上面的“#”會偏重一點：

當優化之后，我們再看：

整體就會比之前統一精致很多。

角度統一

角度，也是增加圖標統一感的因素之一，最常見的角度統一方式就是按照一定的倍數來制定規范，比如 30 度的倍數：

再舉一個角度其他方面的例子，在做下面這組圖標的時候，最初沒有考慮斷線的規律：

所以看久了會覺得有些凌亂，于是我將斷線處定為右下角 45 度，如遇到圓角拐角處，可挪動靠近拐角處進行斷線：

這樣我們就會看到所有的圖標斷線位置都大致出現在右下角的地方，最終效果如下：

很大程度上提高了圖標的統一性，并且在延展執行的時候節省了大量的思考時間（思考在哪里斷）。

但是對于斷線的位置是否一定要規定其出現的角度，我覺得不一定，也可以從其他角度考慮，但最終的目的還是讓整體統一和諧，且延展性高。

總結

以上就是目前總結的 9 個需要統一的點，只要能把所有的統一性做好，精致一定是沒問題的。

文章來源：優設網     作者：菜心設計鋪

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

空間感是指藝術形象通過一定手法引起的類似現實空間的審美感受。包括作品直接表現的空間和作品具體形象之外的使人想象到的空間。這種空間感，一定程度上決定著版面的視覺效果與美感。巧妙的利用空間，可以集中觀眾的注意力，豐富的層次感使作品更具觀賞性，同時又可以讓作品主次分明，更有效的傳達信息。

通過對設計作品的參考分析，設計師深海總結了營造空間感的方法，大致分為以下九個類別，希望這篇文章能對大家有所幫助。

一、遮前掩后

“遮前掩后”的意思是：通過畫面設計元素之間的遮擋，交代空間關系，從而產生一定的空間感。這種形式可能空間感較弱，但易于表達，可以使文字和圖片更好的結合。

設計時為了保證信息的傳達，普遍會選擇將文字信息完整的展示出來。其實像上面兩個案例一樣，適當使用遮擋關系，反而能讓文字與圖像結合的更好。

人的大腦有“慣性閱讀”的能力，這使得即使文字被遮擋，也不會影響太多識別性。

利用蒙版，然后局部破出，這也是營造空間感常用的手法。本質上，這也屬于使用遮擋關系的一種方式，這種效果空間感更強，讓觀眾有一種打破次元壁的感覺。

使用這種樣式時需要注意：用作蒙版的圖形或文字，必須簡潔，并且識別性足夠高，否則會影響信息的傳達。

二、以小見大

“以小見大”指的是：利用近大遠小、近疏遠密的基本透視原理，來營造空間感的一種方式。

在平面設計中，面積大的元素使我們感覺更近，面積小的感覺更遠，即使是單一的設計元素，只要遵循基本的透視原理，也能塑造出空間感。

從這兩個案例可以看出，元素的面積大小變化越大，空間的縱深感就越強；通過控制元素之間的位置關系，可以使空間看起來平整或者曲折，表現力非常豐富。

三、山重水復

“山重水復”是“以小見大”的進階版，同樣是利用近大遠小的物理規律，塑造空間感。不同的是，通過元素的無限重復，會讓空間感更強，對排版的把控能力也要求更高一些。

重復的元素會讓畫面有很強的沖擊力，強烈的空間感讓觀眾仿佛在無限的跌落。使用這種版式一定要注意近疏遠密的空間關系，否則會降低畫面的可信度。

四、橫峰側嶺

“橫峰側嶺”是指：通過變形，改變元素的透視，在整個版面中塑造多個平面，以此來增強作品的空間感。

將同一平面的元素對齊，創造出虛擬的邊界線，借助這些參考線來塑造不同方向的平面。如果覺得空間感不夠強烈，可以借助輔助線加強透視。使用這種形式的重點在于，要注意閱讀順序和空間平面之間的關系，不要為了畫面，一味地堆砌空間，信息的傳達永遠都是最重要的。

最近非常流行的立體效果，因為空間感強，很容易出效果，深受設計師們喜愛。其實這種類型也是通過透視和多個平面來塑造空間感，制作時大多需要3D軟件進行輔助，才能實現如此真實的透視效果。

五、冰厚三尺

“冰厚三尺”指的是通過給元素添加厚度，增強元素的立體感，從而提升空間感。這是一種非常簡單粗暴的方式，立體化后的元素，可以展現更多的角度，使排版方式更加多變，畫面也更加靈動。

最常見的2.5D風格，去除了透視感，依靠立體元素來營造空間感，可以使整個版面更加穩定和諧。有些設計師還會引入矛盾空間，讓設計作品看起來更有趣味性，吸引用戶目光。

六、潛蹤隱跡

“潛蹤隱跡”的意思是：通過改變透明度，模擬霧中的物體，距離越遠的元素可見度越低，從而營造出空間感。

在中國傳統國畫中，就會通過控制水墨的濃淡，來展現畫面的空間感。因此這種方法很適合中國風的設計，讓整個作品富有神秘、幽寂的氣質。

七、霧里看花

“霧里看花”和“潛蹤隱跡”很相似，通過虛實的變化，模擬現實世界中的景深效果，從而塑造空間感。這種方法是最常見的，也是最出效果的，在塑造空間感的同時，還可以強調主體信息。

在對版面元素進行模糊處理的時候，要考慮元素與焦點的位置關系：距離焦點越遠，模糊程度越高，普遍情況下，會將最主要的視覺元素作為焦點，保證信息的準確傳達。

八、浮光掠影

有光的地方就存在影子，投影本就是空間感的一種直接反應，“浮光掠影”就是利用光影的變化，在平面中營造視覺上的空間感。

光影的變化非常豐富，因此，光影的表現方式也是五花八門。殊途同歸的是，所有的光影都是為空間感服務的，所以大多數情況下，都要遵循現實世界中的規律，確定一個光源，保證整個畫面的光影統一。

九、鏡花水月

隨著軟件功能越來越強大，重現現實世界越來越容易?！扮R花水月”指的就是：參考現實世界的折射、反射等自然現象，在平面空間塑造空間感。這種方式看起來質感很強，效果也非常酷炫。

需要注意的是：在設計之前一定要考慮好效果與內容的關系，一味的堆加效果，除了炫技毫無價值。

文章來源：站酷  作者：設計師深海

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

什么是數據可視化：概述

Jorge Rey的化石燃料Dataviz 

它是如何工作的？

如果我們能看到它，我們的大腦就可以內在化并對其進行反思。這就是為什么理解圖表和查看趨勢比閱讀大量的文檔要花費大量時間和精力進行合理化更容易和有效的原因。我們不想重復人類是視覺生物的陳詞濫調，但這是事實，可視化更加有效和全面。

在某種程度上，我們可以說數據Viz是講故事的一種形式，目的是幫助我們根據數據做出決策。這些數據可能包括：

• 追蹤銷售

• 識別趨勢

• 識別變化

• 監控目標

• 監測結果

• 合并數據

秘密7 –塞爾吉奧·費爾南德斯（Sergio Fernandez）提出離婚可視化的理由 

什么時候使用？

數據可視化對于每天處理大量數據的公司很有用。必須立即顯示您的數據和趨勢。勝過瀏覽龐大的電子表格。當趨勢立即脫穎而出時，這也可以幫助您的客戶或觀看者理解它們，而不會迷失在混亂的數字中。

話雖如此，Data Viz適用于：

• 年度報告

• 簡報

• 社交媒體微敘事

• 信息手冊

• 研究

• 趨勢販運

• SciViz

• 燭臺圖，用于財務分析

• 確定路線

可以看到數據可視化的常見情況是在銷售和營銷，醫療保健，科學，金融，政治和物流中。

娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金統計信息圖 

為什么要使用它？

簡短的答案：決策。數據可視化具有快速識別模式和解釋數據的不可否認的好處。更具體地說，它是確定以下情況的寶貴工具。

• 識別變量關系之間的相關性。

• 獲得有關受眾行為的市場見解。

• 確定價值與風險指標。

• 隨時間監視趨勢。

• 通過頻率檢查速率和潛力。

• 應對變化的能力。

太空垃圾-BBC科學焦點，作者：Federica Fragapane

數據可視化類型

您可能已經猜到了，Data Viz不僅僅是簡單的餅圖和圖形，而且還具有視覺吸引力。該分支用于可視化統計信息的方法包括一系列有效類型。

地圖

地圖可視化是一種很好的方法，可以分析和顯示與地理位置相關的信息，并通過地圖準確地將其呈現出來。這種直觀的方法旨在按區域分布數據。由于地圖可以是2D或3D（靜態或動態），因此可以使用多種組合來創建Data Viz地圖。

COVID-19支出數據可視化POGO，George Railean

但是，最常見的是：

• 區域地圖：顯示國家，城市或地區的經典地圖。對于每個區域中的不同特征，它們通常以不同的顏色表示數據。

• 線圖：它們通常包含空間和時間，由于對特定場景進行了分析，因此通常是路線選擇的理想選擇，尤其是該地區的駕車或出租車路線。

• 點地圖：這些地圖分發地理信息的數據。它們是企業確定區域中建筑物確切位置的理想選擇。

• 熱圖：它們根據特定屬性指示地理區域的權重。例如，熱圖可以按區域分布感染者的飽和度。

圖表

圖表以圖形，圖表和表格的形式顯示數據。由于圖形確實是圖表的子類別，因此它們經常與圖形混淆。但是，兩者之間的差別很小：圖形顯示數據組之間的數學關系，并且僅是表示數據的統計圖方法之一。

圖表數據可視化，作者：Madeline VanRemmen

順便說一句，讓我們談談數據可視化中最基本的圖表類型。

條狀圖

他們使用一系列的條形圖來說明數據。它們是較輕量數據的理想選擇，并遵循不超過三個變量的趨勢，否則，條形變得混亂且難以理解。

餅狀圖

這些熟悉的圓形圖按部分劃分數據。切片越大，部分越大。它們非常適合描述整體的各個部分，它們的總和必須始終為100％。當您需要顯示一段時間內的數據發展或缺少任何部分的價值時，請避免使用餅圖。甜甜圈圖與餅圖具有相同的用途。

線形圖

他們使用一條線或多條線來顯示隨著時間的發展。它允許同時跟蹤多個變量。一個很好的例子是跟蹤品牌多年來的產品銷售情況。面積圖與折線圖具有相同的用途。

散點圖

這些圖表使您可以通過數據可視化查看模式。它們有兩個不同值的x軸和y軸。例如，如果您的x軸包含有關汽車價格的信息，而y軸包含有關薪水的信息，則正向或負向關系將告訴您某人的汽車所反映的薪水。

表格

與我們剛剛討論過的圖表不同，表格幾乎以原始格式顯示數據。當您的數據難以以視覺方式呈現，并且旨在顯示應該閱讀而不是可視化的特定數值數據時，它們是理想的選擇。

數據可視化| Aishwarya Anand Singh的養蜂與否 

例如，圖表非常適合顯示特定區域內一段時間內特定疾病的數據，但是當您還需要了解具體原因（例如原因，結果，復發，治療時間和治療方法）時，最好使用表格。

數據可視化與信息圖表

5個主要差異

它們并沒有什么不同，因為它們在視覺上都代表數據。通常，您搜索信息圖表并找到標題為“數據可視化”的圖像，反之亦然。但是，在許多情況下，這些標題都不會引起誤解。這是為什么？

1. 數據可視化僅由一個元素組成。它可以是地圖，圖表或表格。另一方面，信息圖表通常包含多個Data Viz元素。

2. 與可能簡單或極其復雜且繁重的數據可視化不同，信息圖表簡單易行，并且面向更廣泛的受眾。即使對于信息圖表代表的研究領域之外的人，后者通常也是可以理解的。

3. 有趣的是，數據Viz不提供敘述和結論，而是提供這些敘述和結論的工具和基礎。雖然信息圖表在大多數情況下提供了故事和敘述。例如，數據可視化地圖的標題可能是“按區域劃分的空氣污染飽和度”，而帶有相同數據的信息圖則顯示為“ A區和B區在C國污染最嚴重”。

4. 數據可視化可以在Excel中進行，也可以使用其他自動生成設計的工具，除非將其設置為演示或發布。但是，信息圖表的美學非常重要，其設計必須吸引更廣泛的受眾。

5. 在交互方面，數據可視化通常提供交互式圖表，尤其是在線形式的圖表。另一方面，信息圖表很少互動，通常是靜態圖像。

Skype通過可視化.com進行可視化

如何創建有效的數據可視化？

5有用的技巧

該過程自然類似于創建信息圖表，并且圍繞了解您的數據和受眾。更準確地說，這些是準備有效的數據可視化以使您的查看者立即了解的主要步驟和最佳實踐。

1.做功課

準備工作已經完成了一半。在甚至開始可視化數據之前，必須確保您了解該數據的最后細節。

不可否認的是，了解您的數據查看對象是另一個重要部分，因為不同的人對信息的處理方式不同。您要為數據可視化的對象是誰？他們如何處理視覺數據？只需給他們一張餅圖就足夠了，否則您將需要更深入的可視化報告？

您正在可視化什么樣的信息，它能反映出您的目標嗎？

最后，考慮要使用多少數據并加以考慮。

圖片來自Brodie Vissers

2.選擇正確的圖表類型

在上一節中，我們列出了可在數據可視化中使用的基本圖表類型。要確定最適合您工作的人，需要考慮的因素很少。

• 圖表中將有多少個變量？

• 您將為每個變量放置幾項？

• 值之間的關系是什么（時間段，比較，分布等）

話雖如此，如果您需要展示整個項目的各個部分，那么餅圖將是理想的選擇。例如，您可以使用它來展示特定產品的市場份額的百分比。但是，餅圖不適用于時間范圍內的分布，比較和跟蹤趨勢。在這些情況下，條形圖，散點圖，s和折線圖更為有效。

另一個示例是如何在圖表中使用時間。使用水平軸會更準確，因為時間應該從左到右。它在視覺上更直觀。

Oberhaeuser的MagnaGlobal廣告市場海報 

3.對數據進行排序

首先刪除所有不會增加價值并且基本上是圖表多余的數據。有時，您必須處理大量數據，這不可避免地會使您的圖表變得非常復雜且難以閱讀。不要猶豫，將您的信息分成兩個或多個圖表。如果這對您不起作用，則可以使用突出顯示或使用更合適的內容更改整個圖表類型。

提示：使用條形圖和柱形圖進行比較時，請按值（而不是字母順序）以升序或降序對信息進行排序。

圖片由薩曼莎·赫爾利（Samantha Hurley） 

4.利用顏色發揮自己的優勢

在每種可視化形式中，顏色都是您最好的朋友和最強大的工具。它們產生對比，重音，強調并直觀地引導眼睛。即使在這里，色彩理論也很重要。

設計圖表時，請確保不要使用超過5或6種顏色。除此之外，任何其他操作都將使您的圖表不堪重負，并且難以為觀眾閱讀。但是，您可以使用顏色強度來發揮自己的優勢。例如，當您在不同的時間段內比較同一概念時，可以將數據從所選顏色的最淺陰影到其較深的顏色進行排序。它會創建適合您時間線的強烈視覺效果。

選擇顏色時要考慮的事項：

• 不同類別的顏色不同。

• 系列中所有圖表的采用一致調色板，方便以后將進行比較。

• 最好使用對色盲友好的調色板。

Jamie Kettle可視化塑料廢物污染數據 

5.獲取靈感

當您想成為數據可視化設計中的佼佼者時，請多多發揮自己的靈感。查看優秀的示例、信息圖、其他人的工作，并了解哪種方法最適合您需要實現的每種數據。

下圖這個Twitter帳戶數據可視化是一個很好的例子。同時，我們還將精選一些令人稱贊的示例，這些示例將使您有信心開始為數據創建視覺效果。

lilit Hayrapetyan創作的大數據紀錄片的人臉 

8個數據可視化示例

作為另一種藝術形式，Data Viz為一些令人驚嘆的精心設計的圖表提供了沃土，這些圖表證明了數據也可以是美麗的?，F在，讓我們來看看一些例子。

1.黑暗之魂III體驗數據

我們從孟小偉的個人項目開始，介紹他玩《黑暗之魂3》的經驗。這是信息圖表和數據可視化也是個人設計工具的完美例子。這項研究非常龐大，但非常專業地歸類為針對不同概念的不同類型的圖表。所有數據可視化都使用相同的調色板進行制作，并且在信息圖表中看起來很棒。

我的黑暗之魂3孟小偉在播放數據 

2.有史以來最偉大的電影

凱蒂·西爾弗（Katie Silver）根據評論家和觀眾的評論匯總了有史以來最偉大的100部電影。可視化顯示了每部電影的關鍵數據點，例如發行年份、奧斯卡提名和獲勝、預算、利潤、IMDB得分、類型、拍攝地點、電影背景和制作工作室。所有電影均按發行日期排序。

凱蒂·西爾弗（Katie Silver）的100部最佳電影數據可視化 

3.最暴力的城市

費德里卡·弗拉加帕內（Federica Fragapane）顯示了2017年全球50個最暴力城市的數據。這些項目根據人口在垂直軸上排列，并根據兇殺率在水平軸上排序。

4.家族企業作為數據

這些數據可視化和插圖由Valerio Pellegrini為《透視》雜志制作。它們顯示了一個餅圖，其中包含行業細分以及對就業貢獻的散點圖。

視角雜志–家族企業by Valerio Pellegrini 

5.太陽系的軌道圖

該地圖顯示了太陽系中18000多個小行星的軌道數據。每個小行星都顯示在1999年除夕的位置，并按小行星的類型進行了著色。

埃莉諾·盧茲（Eleanor Lutz）的太陽系軌道圖 

6.標題的語義

KatjaFlükiger對頭條新聞的故事情有獨鐘。數據可視化旨在傳達銷售對算術的影響程度。該項目在馬里蘭大學藝術學院完成，目的是可視化對移民的引用，并對用詞選擇和上下文所暗含的價值判斷進行顏色編碼。

標題語義學KatjaFlükiger 

7.月球和地震

該數據可視化用于回答月球是否引起地震。該圖顯示了根據月球的相位和軌道位置而發生的地震的時間和強度。

月亮與地震艾西瓦婭·阿南德·辛格（Aishwarya Anand Singh） 

8. Nanosats的黎明

可視化效果顯示了從2003年到2015年發射的衛星。該圖表示了專注于項目的機構類型以及為其提供資金的國家。左側顯示了每年的發射次數和衛星應用次數。

有線英國–由Nanosats拍攝的黎明（Valerio Pellegrini） 

最后的話

數據可視化不僅是一種科學形式，而且還是一種藝術形式。其目的是幫助任何領域的企業快速理解復雜數據，并開始根據該數據做出決策。為了使您的圖表高效且易于閱讀，這一切都與了解您的數據和受眾有關。這樣，您就可以選擇正確的圖表類型，并使用可視化技術來發揮自己的優勢。

文章來源：站酷  作者：ZZiUP

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

接下來為大家分享一下我收集到的案例：

藍藍設計(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設計公司，公司對UI設計的追求一向很高，致力于為卓越的國內外企業提供卓越的手機 ui設計、軟件界面設計、網站設計，用戶研究、交互設計等服務。

--網站建設UI設計--