首先
了解chattr命令：
Linux chattr命令用于改變文件屬性。
這項(xiàng)指令可改變存放在ext2文件系統(tǒng)上的文件或目錄屬性，這些屬性共有以下8種模式：
a：讓文件或目錄僅供附加用途。
b：不更新文件或目錄的最后存取時(shí)間。
c：將文件或目錄壓縮后存放。
d：將文件或目錄排除在傾倒操作之外。
i：不得任意更動(dòng)文件或目錄。
s：保密性刪除文件或目錄。
S：即時(shí)更新文件或目錄i。
u：預(yù)防意外刪除。
我們主要用的是 i 的模式
第二：
切換到 .user.ini 目錄
第三：
使用命令 chattr -i .user.ini 解除文件不可更動(dòng)屬性，之后就可以修改/刪除.user.ini這個(gè)文件了
第四：
chattr +i .user.ini 重新恢復(fù)文件不可更動(dòng)屬性
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：csdn
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
智能產(chǎn)品的設(shè)計(jì)過程中，常常用到動(dòng)效設(shè)計(jì)，那么動(dòng)效設(shè)計(jì)用在哪些地方及對提升智能設(shè)備體驗(yàn)帶來什么幫助，是這篇文章要講的。
通過大小、位置和透明度的變化，使得界面與界面之間、界面上元素的出現(xiàn)和消失都有關(guān)聯(lián)，讓用戶和產(chǎn)品的交互過程更流暢，給用戶更好的體驗(yàn)。請看以下案例：
Nest溫控器從時(shí)鐘轉(zhuǎn)變到溫控調(diào)節(jié)界面的過程中，時(shí)鐘的指針向圓心收縮，周圍的時(shí)間刻度生長并一起向中心收縮，指針收縮動(dòng)效對應(yīng)溫控調(diào)節(jié)界面溫度值的顯現(xiàn)，時(shí)間刻度的生長收縮動(dòng)效對應(yīng)溫度刻度的顯現(xiàn)，由于元素之間進(jìn)行有關(guān)聯(lián)的變化，操控過程中會(huì)有絲滑流暢感。
當(dāng)用戶調(diào)節(jié)行程時(shí)，中間的控制點(diǎn)跟隨手指實(shí)時(shí)運(yùn)動(dòng)，而進(jìn)度條會(huì)有延時(shí)拖拽效果。為什么會(huì)是這樣呢？原因是：用戶在控制面板上的操作是需要由面板向窗簾設(shè)備發(fā)送指令的，也就是說面板上控制窗簾到窗簾設(shè)備運(yùn)行中間會(huì)有一小段時(shí)間間隔，用戶會(huì)有延遲感，所以Gira在控制窗簾行程的過程中，進(jìn)度條為了與窗簾設(shè)備運(yùn)行同步，加入延時(shí)效果，讓用戶感覺操控響應(yīng)快的錯(cuò)覺。
用戶在滑動(dòng)切換功能時(shí)，功能icon會(huì)按照先后順序由大到小變化，由于連續(xù)性運(yùn)動(dòng)，每個(gè)元素運(yùn)動(dòng)都有銜接，會(huì)有流暢操控感受。
用戶輸入密碼后至鎖打開這段時(shí)間，數(shù)字依次向下消失，鎖icon逐漸出現(xiàn)并且打開，體現(xiàn)出柔緩的感覺；實(shí)際上動(dòng)效有時(shí)候可以彌補(bǔ)設(shè)備執(zhí)行緩慢的不足，當(dāng)設(shè)備需要長時(shí)間才能執(zhí)行時(shí)，這段時(shí)間加入動(dòng)效，動(dòng)效運(yùn)行時(shí)間和設(shè)備實(shí)際執(zhí)行時(shí)間一致，用戶就會(huì)覺得很順暢；也可以讓動(dòng)效運(yùn)行時(shí)間小于設(shè)備執(zhí)行時(shí)間，這時(shí)用戶會(huì)覺得操控反應(yīng)更快。
通過動(dòng)效能夠幫助用戶使用功能，對功能的方向、位置、喚出操作、路徑等進(jìn)行暗示和指導(dǎo)，方便用戶在最短的時(shí)間內(nèi)來學(xué)會(huì)操作產(chǎn)品的一些功能。請看以下案例：
大多數(shù)智能設(shè)備買回家后，需要用戶自己安裝，有的甚至牽扯到線路問題，Nest溫控器安裝界面采用與實(shí)物一致的模型元素，讓用戶有參照依據(jù)；通過零部件的運(yùn)動(dòng)告訴用戶安裝順序；通過放大細(xì)節(jié)，告訴用戶應(yīng)該選哪一個(gè)部件及如何鏈接。好的操作引導(dǎo)動(dòng)效可以讓用戶有更好的參與感、成就感，還可以降低公司的人力安裝成本、客服成本。
通過生動(dòng)形象的Mg動(dòng)畫，用戶很快就知道接下來要做什么，省去了看文字的枯燥感，提升了操作效率、趣味性。
用戶第一次設(shè)置好監(jiān)控后，通過放射動(dòng)效提示用戶雙擊屏幕，通過上下擴(kuò)張的箭頭動(dòng)效提示用戶可以通過手指來就行監(jiān)控畫面的放大縮小。
當(dāng)設(shè)備第一次配好網(wǎng)重新開啟后，通過遮罩、圓點(diǎn)大小位置運(yùn)動(dòng)搭配文字告訴用戶長按屏幕可以控制什么功能。
頂部弧形的上下變化，告知用戶下拉可以控制什么功能。通過簡單的元素既能起到提升用戶的作用，還不打擾用戶。
通過動(dòng)效給用戶展示用戶需要的內(nèi)容及產(chǎn)品側(cè)想讓用戶了解的內(nèi)容，讓用戶更樂意更易于理解，強(qiáng)化功能感知。請看以下案例：
用戶App第一次鏈接好溫控器后，為了告訴用戶溫控器的主打功能有日程安排節(jié)能、根據(jù)時(shí)間自動(dòng)設(shè)置溫度，用幾何元素圍繞日程icon放大縮小運(yùn)動(dòng)、太陽月亮旋轉(zhuǎn)切換直觀的強(qiáng)調(diào)這些功能，讓用戶加深對產(chǎn)品核心功能的認(rèn)識。
音樂服務(wù)類型列表選中狀態(tài)使用翻轉(zhuǎn)選中效果，列表這里為什么需要?jiǎng)有В?
原因有可能是：1、列表中的內(nèi)容為了很好的作出區(qū)分，以彩色的形式展現(xiàn)，層級較高，選中狀態(tài)如果不加入動(dòng)效，用戶就不容易快速感知自己選擇了哪一個(gè)；2、其次列表中加入動(dòng)效，在枯燥的操作中增添了趣味性，增強(qiáng)操作愉悅感。
雙擊音樂標(biāo)題，進(jìn)度條從左向右生長出現(xiàn)、操控點(diǎn)放大出現(xiàn)，既強(qiáng)調(diào)了進(jìn)度條這個(gè)隱藏功能，還暗示用戶可以拖動(dòng)操控點(diǎn)從左向右拖動(dòng)操作。
用戶從列表進(jìn)入調(diào)光燈界面時(shí)，調(diào)光條灰底從左向右弧度生長，隨后當(dāng)前亮度條生長出現(xiàn)、亮度值出現(xiàn)，先暗示了用戶可以從左向右弧度操作，后強(qiáng)調(diào)了當(dāng)前設(shè)備狀態(tài)。
用戶查看睡眠質(zhì)量數(shù)據(jù)時(shí)，睡眠質(zhì)量標(biāo)題信息漸隱漸現(xiàn)，睡眠數(shù)據(jù)條、數(shù)字生長，讓數(shù)據(jù)展示有主次之分，強(qiáng)調(diào)了用戶想要看的內(nèi)容據(jù)，更人性。
在產(chǎn)品設(shè)計(jì)里面有一個(gè)非常重要的原則：讓用戶有操縱感。這種操縱感不僅僅表現(xiàn)在對用戶的操作有了反應(yīng)、有了顯示，還有一種方式是讓用戶知道當(dāng)前產(chǎn)品運(yùn)行的狀態(tài)，是正在等待還是正在加載，還是正在下載或變化，那這種狀態(tài)的告知也是增強(qiáng)用戶操縱感的方式之一。請看以下案例：
當(dāng)用戶往洗衣機(jī)里加入衣物后，出現(xiàn)量杯倒入洗衣液的動(dòng)畫，告知用戶當(dāng)前洗衣機(jī)正在進(jìn)行哪一個(gè)環(huán)節(jié)，我們分析一下這里加入動(dòng)效的用意，首先，一般的洗衣機(jī)沒有屏幕，有的話也就顯示當(dāng)前的功能選項(xiàng)，LG的這款洗衣機(jī)是液晶屏，那么它的定位就是高端人群，通過融入動(dòng)效，打造差異化，提升使用體驗(yàn)，加深用戶對LG品牌的印象。
用戶設(shè)置好起床時(shí)間后，系統(tǒng)會(huì)根據(jù)時(shí)間段自動(dòng)進(jìn)行背景顏色的過度，來模擬天色的變化，直觀的告知用戶當(dāng)前的時(shí)間是白天還是晚上或是黃昏。
設(shè)備進(jìn)行除濕的過程中，面板上圓形元素進(jìn)行旋轉(zhuǎn)，伴隨粒子擴(kuò)散效果，模擬水分子消失的過程，直觀形象的告訴用戶現(xiàn)在正在做什么。
用戶接通貓眼后，通話icon進(jìn)行電播擴(kuò)散動(dòng)效，模擬聲波擴(kuò)散效果，準(zhǔn)確的向用戶告知當(dāng)前通話中的狀態(tài)。
當(dāng)用戶說話喚起語音控制時(shí)，原先的全屏畫面收縮，響應(yīng)用戶的指令，四周留白，為通話內(nèi)容提供展示空間，然后彩色點(diǎn)元素起伏變化，通話內(nèi)容出現(xiàn)，告知用戶已接收到指令；隨后彩色點(diǎn)元素旋轉(zhuǎn)加載，體現(xiàn)正在執(zhí)行中。在語音控制的每一個(gè)環(huán)節(jié)都加入動(dòng)效反饋，會(huì)讓用戶覺得他不是在和一個(gè)冰冷的機(jī)器講話，富有人情味。
運(yùn)用輕擬物效果和與實(shí)物一致的運(yùn)動(dòng)方式，用戶可以直觀的看到窗簾的行程位置與開合狀況，大大的提升了產(chǎn)品易用性。
面對一款新的智能產(chǎn)品時(shí)，用戶可能不知道怎么操作它，通過動(dòng)效向用戶交待頁面內(nèi)容之間的關(guān)系，讓用戶清楚的知道從哪里來，到哪里去，更易于理解從而可以快速上手使用。請看以下案例：
溫控器的設(shè)置模塊通過左右滾動(dòng)以便在有限的屏幕中展現(xiàn)，那么模塊的下一級頁面跳轉(zhuǎn)做成像App那樣左滑切入是無法明確層級內(nèi)容的，此時(shí)需要一個(gè)與左右滑動(dòng)不一樣的動(dòng)效來區(qū)分模塊的切換，Nest運(yùn)用翻轉(zhuǎn)效果，強(qiáng)化了層級感，清楚交待了頁面翻轉(zhuǎn)后面的內(nèi)容與頁面前的關(guān)系。
用戶從頂部導(dǎo)航中進(jìn)入設(shè)備列表過程中，設(shè)備列表頁面從右向左進(jìn)入，暗示用戶“當(dāng)你想返回上一級，可以左滑離開哦”，用戶上下滑動(dòng)設(shè)備列表時(shí)，屏幕左邊滑動(dòng)條出現(xiàn)，更加明確了“左滑返回上一頁”的功能；
當(dāng)用戶通過列表進(jìn)入操控界面以及切換功能頁時(shí)使用淡入淡出的效果，弱化它們之間的跳出感，來強(qiáng)調(diào)它們是一個(gè)層級的內(nèi)容，從細(xì)微處可見Google的設(shè)計(jì)師在動(dòng)效的使用、選擇上非?？酥疲档梦覀儗W(xué)習(xí)。
用戶發(fā)出查看日程安排的命令時(shí)，日歷界面從左到右進(jìn)入，告訴用戶這是一個(gè)新的頁面，接著日期數(shù)字21進(jìn)行大小位移變化，月份不做變化，為了強(qiáng)調(diào)這是21號的日程，2條日程信息按照時(shí)間先后從下向上運(yùn)動(dòng)，交代了日程處理的優(yōu)先級。Google設(shè)計(jì)師將信息展現(xiàn)的每一步都讓用戶看的清楚明白。
用戶在操控設(shè)備執(zhí)行一項(xiàng)指令時(shí)，會(huì)需要一段時(shí)間的加載或傳輸過程，期間使用動(dòng)效來引起用戶的注意，從而減少用戶在等待過程中的焦慮感，實(shí)際上在這個(gè)等待的過程中，品牌方還可以利用這個(gè)寶貴的時(shí)機(jī)與用戶建立情感連接，向用戶透傳其品牌調(diào)性，達(dá)到加深品牌記憶的目的。詳見下一段“07 品牌調(diào)性透傳”。
用戶在移動(dòng)端與設(shè)備連接時(shí)，會(huì)有一個(gè)連接等待過程，此時(shí)移動(dòng)端與設(shè)備界面中同時(shí)出現(xiàn)幾何元素在繪有Wi-Fi的灰色圖層中運(yùn)動(dòng)的動(dòng)效，形象的傳達(dá)了正在運(yùn)行的具體事項(xiàng)，我們在做加載動(dòng)畫時(shí)，不光要讓加載動(dòng)起來，還要貼合當(dāng)前的內(nèi)容，做到生動(dòng)有趣。
在可用性良好的前提下，通過一致性、趣味性的動(dòng)效設(shè)計(jì)和創(chuàng)新的交互方式為產(chǎn)品增加亮點(diǎn)，帶來更驚喜的體驗(yàn)，傳達(dá)產(chǎn)品的氣質(zhì)與態(tài)度。請看以下案例：
在品牌塑造上，Google已被證明做得極為成功，而且在視覺表現(xiàn)層面，Google系產(chǎn)品具備著“一致性”和“連貫性”，這讓Google獲得了品牌識別上的利益。在不同設(shè)備的動(dòng)效設(shè)計(jì)中，Google都統(tǒng)一使用代表品牌的紅、黃、藍(lán)、綠顏色和幾何圖形，遵循化繁為簡的設(shè)計(jì)準(zhǔn)則，通過簡潔貼近真實(shí)的運(yùn)動(dòng)方式，讓產(chǎn)品更有人情味，讓用戶更加專注于內(nèi)容。
用戶在搜尋AirTag過程中，手機(jī)屏幕粒子循環(huán)運(yùn)動(dòng)，隨后粒子組成了一個(gè)轉(zhuǎn)動(dòng)的箭頭指向一個(gè)圓點(diǎn)，隨著用戶離得AirTag越來越近，箭頭逐漸放大消失，圓點(diǎn)隨后演變成了一個(gè)旋轉(zhuǎn)的AirTag。交互方式新穎，搜尋結(jié)果又充滿驚喜，對于Apple這款新產(chǎn)品，無疑讓用戶加深了印象，感受到了Apple的科技創(chuàng)新態(tài)度。
用戶在靠近圓鏡設(shè)備時(shí)，鏡面中心人臉識別icon縮放，周圍點(diǎn)元素波動(dòng)擴(kuò)散，吸引用戶的同時(shí)，傳達(dá)出科技感。
當(dāng)HomePod在執(zhí)行一項(xiàng)指令時(shí)，頂部的屏幕會(huì)出現(xiàn)彩球融合翻轉(zhuǎn)動(dòng)畫，多變朦朧的色彩可以喚起用戶情緒，球體間的融合過程讓產(chǎn)品生動(dòng)有趣，讓用戶感受到品牌的人情味。
Apple Watch洗手功能開啟后，會(huì)有一個(gè)20秒的倒計(jì)時(shí)，倒計(jì)時(shí)以肥皂泡沫消失擴(kuò)散的形式展現(xiàn)，很貼合當(dāng)前洗手的情景，讓原本一個(gè)普通的倒計(jì)時(shí)變得生動(dòng)且有趣味性，用戶更加樂意使用，強(qiáng)化了用戶對品牌的感知。
這款溫控器已經(jīng)有一定年代了，當(dāng)時(shí)那個(gè)年代，能用到溫控器，那就很有科技感了，智能溫控器還將流動(dòng)的線條動(dòng)效運(yùn)用至透明背景上，向用戶傳達(dá)了超前的科技感，只要見了就會(huì)記住這款產(chǎn)品。
實(shí)際上智能產(chǎn)品中的動(dòng)效設(shè)計(jì)，并不是要向用戶炫技，也不是做的越炫酷越好。動(dòng)效是以解決問題為目的的一種手段。我們要去觀察現(xiàn)有好產(chǎn)品的動(dòng)效設(shè)計(jì)落地點(diǎn)及分析他們的小心思，從而運(yùn)用至自己產(chǎn)品中，提升產(chǎn)品使用體驗(yàn)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：木土君
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
一個(gè)優(yōu)秀的設(shè)計(jì)不僅要解決正確的問題，同時(shí)也是給用戶創(chuàng)造積極的情感。在過去，實(shí)體產(chǎn)品可以通過人類的五感來創(chuàng)造情感體驗(yàn)，但對于如今的數(shù)字化產(chǎn)品來說，這似乎很難達(dá)到，因?yàn)橹皇窃谄聊簧线M(jìn)行枯燥的交互來獲取服務(wù)。
所以，數(shù)字化產(chǎn)品設(shè)計(jì)師們需要更深入的理解每種類型的情感，以及創(chuàng)造它們的心理學(xué)原則。
根據(jù)唐.諾曼（Don Norman）的研究，人們對一個(gè)物體產(chǎn)生情感有三個(gè)層次：本能、行為和反思。
本能層: “用戶想要的感覺是什么”
行為層: “用戶想要做什么”
反思層: “用戶想成為什么樣的人”
在第一層，用戶將通過視覺和與產(chǎn)品的交互設(shè)計(jì)中產(chǎn)生情緒。因此，這是UI設(shè)計(jì)師擅長發(fā)揮的地方。除了美學(xué)和基本的平面設(shè)計(jì)原則外，下面是我在工作中經(jīng)常應(yīng)用到設(shè)計(jì)中的心理學(xué)原則。
人類的眼睛傾向于將相似的元素連接成一個(gè)組，而大腦會(huì)認(rèn)為這些元素都有相同的目的。
因此，在設(shè)計(jì)具有相同功能和內(nèi)容的界面元素時(shí)，就應(yīng)該要保持一致性。（彩云注：這也是為什么要保持一致性的理論解釋）
應(yīng)用場景: 導(dǎo)航、控件、卡片、banner、內(nèi)容、分頁
人眼會(huì)將連續(xù)的元素視為一組。這一定律與對稱性和相似性非常相關(guān)，通過在一個(gè)序列上設(shè)計(jì)相似和重復(fù)的元素，我們可以將用戶的視線引導(dǎo)到我們想要的方向，它能使得閱讀信息更加連貫和清晰。
一點(diǎn)點(diǎn)的切割是在暗示用戶，這里還有更多的內(nèi)容等待你去查看。
應(yīng)用場景: 菜單、列表、排序、輪播、服務(wù)進(jìn)度
當(dāng)看到一幅不完整的圖像時(shí)，大腦會(huì)依賴之前的經(jīng)驗(yàn)進(jìn)行填充。
這是圖形和logo設(shè)計(jì)中常用的規(guī)則，但是在產(chǎn)品設(shè)計(jì)中，我們也經(jīng)常把它用在圖標(biāo)和Loading設(shè)計(jì)中。
應(yīng)用: 圖標(biāo)、loading、數(shù)據(jù)可視化
這是UI設(shè)計(jì)中的一個(gè)基本規(guī)則，因?yàn)槿搜蹠?huì)將任何相鄰元素視為一個(gè)組。
在設(shè)計(jì)的時(shí)候，我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內(nèi)容組，然后使用小空間來分隔大內(nèi)容組中的小內(nèi)容組。
應(yīng)用場景: 導(dǎo)航、控件、卡片、banner、內(nèi)容、分頁
我們的大腦喜歡看到對稱和平衡的東西。它是所有設(shè)計(jì)領(lǐng)域中使用最頻繁、最安全的法則。它幫助我們創(chuàng)造一種穩(wěn)定和秩序的感覺。
當(dāng)設(shè)計(jì)需要簡單和諧可視化的產(chǎn)品時(shí)，我經(jīng)常使用對稱律。當(dāng)用戶需要關(guān)注重要的事情時(shí)，它也能讓他們感到更舒服。缺點(diǎn)是，如果過度使用，產(chǎn)品會(huì)變得乏味和單調(diào)。通常，我用標(biāo)題或CTA按鈕來更好地強(qiáng)調(diào)和號召行動(dòng)，打破畫面的單調(diào)格局。（彩云注：CTA是call to action的縮寫，中文通常翻譯為行為號召?？梢岳斫鉃橐龑?dǎo)用戶點(diǎn)擊的行為都算是行為號召）
應(yīng)用場景:控件，banner，強(qiáng)調(diào)內(nèi)容，產(chǎn)品顯示，清單，導(dǎo)航。
這個(gè)定律是關(guān)于人眼傾向于注意脫離背景或組合的事物。
我使用這個(gè)規(guī)則引導(dǎo)用戶的眼睛看到重要信息。它通常是一個(gè)卡片設(shè)計(jì)與一個(gè)輕投影在背景之上的層。此外，構(gòu)建整體也是應(yīng)用這一規(guī)則的一種方式。
應(yīng)用場景：卡片、內(nèi)容、列表、服務(wù)、摘要
在同一方向上移動(dòng)的元素被認(rèn)為比固定的元素或在另一個(gè)方向上移動(dòng)的元素更相關(guān)。這個(gè)規(guī)則應(yīng)用幫助我們建立組和狀態(tài)之間的關(guān)系。
在制作動(dòng)畫時(shí)，我經(jīng)常更明確地使用這個(gè)規(guī)則。然而，我們?nèi)匀豢梢赃m用于許多不同的因素。
應(yīng)用場景：導(dǎo)航/下拉菜單，折疊，手風(fēng)琴，工具提示，產(chǎn)品滑塊，視差滾動(dòng)和指示器。
當(dāng)我們看東西時(shí)，我們的眼睛傾向于首先關(guān)注最突出的元素。理解這種行為將幫助我們在設(shè)計(jì)中創(chuàng)建一個(gè)“錨點(diǎn)”，從而推動(dòng)用戶查看我們的場景之后的內(nèi)容。
應(yīng)用場景:內(nèi)容、落地頁、價(jià)格、產(chǎn)品頁、banner
（彩云注：維基百科解釋為指個(gè)人對學(xué)習(xí)材料或所見所聞的資訊，容易記住最特殊的部分的現(xiàn)象。例如：有一些參考書將重要的資料，以不同顏色或特殊的字體標(biāo)示出來，就是利用雷斯多夫效應(yīng)來加深讀者的印象。）
這也被稱為隔離效應(yīng)，它表明人們傾向于注意并記住與其他部分不同的部分。這條規(guī)則很容易與焦點(diǎn)定律混淆。不同的是，應(yīng)用此規(guī)則的元素通常是獨(dú)立的，沒有為用戶導(dǎo)航更多信息的額外功能。
應(yīng)用場景：定價(jià)表、促銷banner、不同會(huì)員介紹
基于現(xiàn)實(shí)世界打造的視覺體驗(yàn)。比如，當(dāng)我們看一個(gè)視頻，每個(gè)高潮笑話時(shí)都有旁白跟著一起笑時(shí)，我們會(huì)更容易發(fā)笑（彩云注：想想《快樂大本營》）。用戶會(huì)喜歡我們的設(shè)計(jì)，如果它讓他們感覺良好和舒適。
（彩云注：這個(gè)理論的意思是說盡可能讓用戶產(chǎn)生沉浸感，把產(chǎn)品用到真實(shí)的環(huán)境上，比如大家平時(shí)使用的手機(jī)樣機(jī)，把設(shè)計(jì)的界面放到這些樣機(jī)中就能夠給人直觀的感受到應(yīng)用后的效果，也是這個(gè)理論的運(yùn)用）。
應(yīng)用場景：產(chǎn)品配圖、插圖、攝影
有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學(xué)海報(bào)就足夠了（彩云注：感興趣的可以自行翻譯研究下）。
此外，我們不要忘記從早期到現(xiàn)在一直在廣泛使用的顏色，這些顏色的使用更符合用戶習(xí)慣：
紅色：錯(cuò)誤
綠色：成功
藍(lán)色：進(jìn)行中
黃色：警告
就像顏色一樣，人類的潛意識對不同的形狀也有不同的反應(yīng)。例如:
圓形、橢圓形：傳遞積極的信息，通常與社區(qū)或關(guān)系有關(guān)。
方形和三角形：帶有強(qiáng)烈的信息，通常與力量和穩(wěn)定聯(lián)系在一起。
豎線：代表強(qiáng)度、力量或攻擊性。
橫線：表示平靜、相等、安靜。
這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外，人類是視覺動(dòng)物，我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設(shè)計(jì)的有效性，我們不應(yīng)該去掉解釋性的文字。
（彩云注：根據(jù)這個(gè)理論，在做作品集時(shí)，就應(yīng)該盡可能的多用視覺化語言，文字作為輔助，對于視覺設(shè)計(jì)師來說，能用圖表達(dá)的就盡量減少文字的比重。）
一個(gè)很明顯的例子就是導(dǎo)航欄。大多數(shù)新的應(yīng)用或具有復(fù)雜功能的應(yīng)用都同時(shí)設(shè)計(jì)了圖標(biāo)和文字標(biāo)簽。
人類的眼睛傾向于看到平行因素比其他因素更相關(guān)。我經(jīng)常使用這一原則對同一屏幕內(nèi)的兩組不同內(nèi)容進(jìn)行分類。最容易看到的例子可能是Facebook messenger界面，當(dāng)帖子并排排列時(shí)，消息是平行的。
這一原則類似于格式塔原則中的相似定律，但它并不是完全相似。共同區(qū)域原則是通過我們使用分隔線、形狀或顏色的方式創(chuàng)建的。
如果一個(gè)界面需要用戶滾動(dòng)更多來查看內(nèi)容，我們應(yīng)該有一些方法來更清楚地劃分它，而不僅僅是使用間距。
應(yīng)用場景：列表清單、信息流
根據(jù)NNGroup UXPin等組織或團(tuán)體的各種研究，兩種最常用的掃描模式是“F”和“Z”。
F的使用最為廣泛，尤其是對于內(nèi)容量大的網(wǎng)站。
Z用于不太注重文本的網(wǎng)站，通常強(qiáng)調(diào)在最后的號召行動(dòng)。
一旦我們理解了如何使用這些模式，我們就可以選擇布局并有效地安排元素來實(shí)現(xiàn)我們的設(shè)計(jì)目標(biāo)。
第一印象是最令人難忘的，積極的體驗(yàn)可以在用戶和產(chǎn)品之間創(chuàng)造持久的關(guān)系。如果能讓用戶在一開始就喜歡上我們的設(shè)計(jì)，就能為我們的產(chǎn)品創(chuàng)造了一個(gè)很好的優(yōu)勢。
（彩云注：這些都是非?；A(chǔ)的理論，但基礎(chǔ)的厚度才是決定后期發(fā)展高度，我現(xiàn)在越來越能體會(huì)到這一點(diǎn)了，也希望大家能重視并加強(qiáng)基礎(chǔ)的學(xué)習(xí)。）
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：彩云Sky
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
RayData作為一個(gè)系列的可視化工具，內(nèi)容資產(chǎn)作為基礎(chǔ)的構(gòu)成發(fā)揮著重要的作用，在日益更新迭代的過程中，會(huì)發(fā)現(xiàn)每條產(chǎn)品線對圖表組件的需求都很繁重，無法避免地重復(fù)開發(fā)。通過開發(fā)通用型組件可以一定程度的解決問題，但是存在靈活性差，組件庫維護(hù)困難等問題，而且內(nèi)部產(chǎn)品圖表庫各自獨(dú)立，缺乏統(tǒng)一的設(shè)計(jì)語言。
通過對類似競品的調(diào)研，發(fā)現(xiàn)圖表做為承載數(shù)據(jù)信息的組件，本身只是工具，它的使用體驗(yàn)優(yōu)劣還往往取決于業(yè)務(wù)需求、數(shù)據(jù)類型、圖表本身的視覺效果接受度等因素。而且圖表類型的豐富和靈活程度，使用的框架及響應(yīng)時(shí)間，商業(yè)或免費(fèi)和開源狀態(tài)也都是評判標(biāo)準(zhǔn)之一。
無論是小而美的個(gè)人項(xiàng)目還是大數(shù)據(jù)可視交互管理系統(tǒng)，項(xiàng)目生命周期的前四分之三階段，進(jìn)行的緩慢糾結(jié)，充斥著大量需求變更，新想法的臨時(shí)加入。當(dāng)多個(gè)項(xiàng)目同時(shí)展開，圖表組件效果是否靈活多變、復(fù)用性的高低對制作人員生產(chǎn)力、客戶方耐力、項(xiàng)目最終達(dá)成時(shí)雙方的消耗力有極大考驗(yàn)。
通過對類似競品的調(diào)研，發(fā)現(xiàn)常見的可視化圖表庫都存在自身的局限性，體量大，功能冗余，更新緩慢。最終促成了我們從兩個(gè)維度入手，提煉關(guān)鍵詞，簡化并轉(zhuǎn)化成圖表庫系統(tǒng)的功能點(diǎn)。
圖表存在很多分類方式，基于形狀命名、作者命名、抽象概念命名和數(shù)據(jù)結(jié)構(gòu)命名等。
為了更好的幫助使用者快速定位，我們簡化了圖表大分類，依據(jù)人對形狀輪廓最初的感知，調(diào)動(dòng)直觀的感受來進(jìn)行分類和命名。
整個(gè)圖表庫的設(shè)計(jì)層包含顯性和隱性的兩種，顯性的規(guī)范面向用戶，隱性的規(guī)范面向開發(fā)。
通過調(diào)研常見的工具類產(chǎn)品，結(jié)合對產(chǎn)品易用性的理解，我們把產(chǎn)品的顏色方案提出來單獨(dú)定義一個(gè)全局的顏色方案，以便一套配色貫穿整個(gè)項(xiàng)目使用，然后對通用的設(shè)置和個(gè)性化設(shè)置分開設(shè)計(jì)。
可視化的組合來源有四種：視覺暗示、坐標(biāo)系、標(biāo)尺以及背景信息。
其中視覺暗示是比較重要的組成，以直角坐標(biāo)系結(jié)構(gòu)為例，對大分類下的參數(shù)進(jìn)行深入挖掘。
從設(shè)計(jì)的角度出發(fā)，我們希望賦予圖表樣式更多的可能性，開放高度自定義的調(diào)節(jié)參數(shù)。
通常用戶在初次瀏覽圖表時(shí)會(huì)把注意力放在圖形的差異化上，比如突出的顏色、突出的圖形，但并沒有及時(shí)將所有的數(shù)值聯(lián)系起來，之后才會(huì)進(jìn)行比較，然后再看整體、分布和多變量關(guān)系。在顏色和屬性系統(tǒng)中單獨(dú)設(shè)置最大值、最小值的顏色和樣式，可以使得圖表展示信息的信息維度更高一層。
數(shù)據(jù)可視化是基于物理世界反饋的信息，通過用各種視覺變量（例如圖形、顏色、維度）把數(shù)據(jù)進(jìn)行編碼、再現(xiàn)的過程。
色彩是數(shù)據(jù)可視化中濫用和忽視最嚴(yán)重的變量之一，也是所有視覺變量中最富于變化的一種。
信息圖表除圖形外感官最明顯的就是顏色，為了能夠達(dá)到圖表設(shè)計(jì)的高度自定義，色彩的搭配、自定義的程度，每個(gè)圖元都有對應(yīng)的顏色設(shè)置。
從設(shè)計(jì)的角度出發(fā)，嘗試在顏色系統(tǒng)中加入陰影、發(fā)光、全局陰影等結(jié)構(gòu)，進(jìn)一步還原設(shè)計(jì)的圖形處理習(xí)慣，豐富圖表的表達(dá)。
可視化項(xiàng)目的配色一般來源于實(shí)際需求和3D場景效果的搭配，通常是不能預(yù)判配色的。
在這種情況下如果需要幫助項(xiàng)目的快速搭建，預(yù)置方案就要做到覆蓋面廣，適應(yīng)性強(qiáng)，控制取色范圍，由此提出以下原則。
制定規(guī)范時(shí)候我們確定了默認(rèn)的布局方式，綜合實(shí)際使用，以柱狀圖為例，寬度滑塊的最大對應(yīng)100%寬度，圖形撐滿，更貼近使用者的直覺，另外考慮到多端融合，涉及到一些放大預(yù)覽的功能，默認(rèn)選用百分比布局更合理。
在實(shí)際配置圖表時(shí)候，圖形和文字的位置關(guān)系千變?nèi)f化，為了應(yīng)對這種情況我們引入了文字基線位置和相對位置作為位置參照。使用中配合偏移量調(diào)節(jié)基本能覆蓋所有的情況。
為了應(yīng)對項(xiàng)目靈活配置的需求，我們把圖表編輯和Config參數(shù)結(jié)合，可視化控制生成的圖表Config參數(shù)，直接導(dǎo)出到項(xiàng)目使用。
除了勻速動(dòng)畫，為了達(dá)成更自然的動(dòng)態(tài)效果，引入緩入緩出速度曲線，同時(shí)為了達(dá)成更豐富的表達(dá)，增加了一條簡潔的回彈曲線
動(dòng)效是圖表數(shù)據(jù)表達(dá)的一個(gè)重要構(gòu)成，針對圖表的動(dòng)效，通過總結(jié)圖元的運(yùn)動(dòng)方式，結(jié)合Material Design的一些處理方式，整理了一套圖表元素動(dòng)效規(guī)范集合。
針對缺乏靜態(tài)數(shù)據(jù)等真實(shí)數(shù)據(jù)源，檢驗(yàn)生成圖表的視覺效果的問題，我們?yōu)橛脩籼峁┝酥付ǚ秶S機(jī)數(shù)生成功能，可以快速生成與應(yīng)用項(xiàng)目數(shù)據(jù)相類似的效果。
顏色配置方案能在同一項(xiàng)目中起到控制整個(gè)顏色風(fēng)格的作用，可以快速應(yīng)用到圖表上。
圖表庫在項(xiàng)目中的應(yīng)用
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者:RayData實(shí)驗(yàn)室
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
這里用到的 等于(=)， 還有更多的條件 大于(>)、小于(<)、大于等于(>=)、小于等于(<=)、不等于(!=)....
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：csdn
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
很多網(wǎng)站仍然在使用老舊的頁面設(shè)計(jì)，比如國內(nèi)一些企業(yè)官網(wǎng)，萬年不變的相類似的模板，外國的則是hero頁面，帶CTA按鈕，三欄式的布局。這些設(shè)計(jì)不能說是不好的設(shè)計(jì)，很實(shí)用，用戶能夠預(yù)測展示的內(nèi)容，也容易找到需要的內(nèi)容。但是正因?yàn)榭深A(yù)測，用戶沒有新鮮感，沒有期待，所以我們找了一些不僅打破常規(guī)，也依然有良好用戶體驗(yàn)的網(wǎng)頁設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)(北京蘭亭妙微科技有限公司）是一家專注而深入的UI設(shè)計(jì)公司，公司對UI設(shè)計(jì)的追求一向很高，致力于為卓越的國內(nèi)外企業(yè)提供卓越的手機(jī)app/安卓ui設(shè)計(jì)、軟件界面設(shè)計(jì)、網(wǎng)站設(shè)計(jì)，用戶研究、交互設(shè)計(jì)服務(wù)。
接下來是精彩的UI設(shè)計(jì)賞析
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
隨著信息碎片化趨勢的加強(qiáng)，用戶的注意力也呈碎片化趨勢，本文主要分析了用戶注意力的類型以及如何合理吸引用戶注意力。
在界面設(shè)計(jì)中，我們常常能看到許多產(chǎn)品以各種形式搶奪用戶注意力，比如彈窗、通知提示等，亦或者通過色彩、大小等設(shè)計(jì)方式。大部分情況下，這些搶奪注意力的方式簡單粗暴，如果不能在適合的場景采用相應(yīng)的設(shè)計(jì)手法，不僅達(dá)不到期望的目標(biāo)，反而影響瀏覽體驗(yàn)。 
在信息量極其龐大的當(dāng)下，信息被割裂得更加碎片化，現(xiàn)在可以滿足用戶訴求的產(chǎn)品太多了，許多產(chǎn)品的拉新成本高得離譜，關(guān)鍵是拉新后，留存也是令人頭禿的問題。
每個(gè)企業(yè)都希望自己的產(chǎn)品可以獲取更多用戶流量、提升用戶活躍，自然就需要想方設(shè)法吸引用戶注意力。這是一個(gè)酒香也怕巷子深的時(shí)代，產(chǎn)品能滿足用戶需求、有著極致優(yōu)秀的體驗(yàn)還不夠，還需要讓用戶知道你的好，讓自身產(chǎn)品吸引更多目標(biāo)用戶，是每個(gè)產(chǎn)品的愿望。
用戶的注意力也呈碎片化趨勢，很容易受到外界的影響，并且這種注意力分散的趨勢會(huì)越來越明顯。可能用戶上一秒在看公眾號，下一秒就打開了抖音，然后看到微信消息，點(diǎn)進(jìn)去回兩句...一天過去了，最后發(fā)現(xiàn)好像什么事都沒有干成。
這就是矛盾的地方，一方面產(chǎn)品希望留住用戶，另一方面用戶在各產(chǎn)品間反復(fù)橫跳，就是不在你的產(chǎn)品里面待著。
研究表明，用戶的注意力只能維持在 10 分鐘左右，大腦在短暫休息后可以再次集中注意力 7-10 分鐘，7-10 分鐘差不多是人對任何任務(wù)保持專注的時(shí)間上限。
用戶容易受到各種信息的影響這不假，但是如果采用錯(cuò)誤的設(shè)計(jì)方式吸引用戶，非但不能如愿以償，反而可能引起反感。
作為交互設(shè)計(jì)師，我們要了解用戶的注意力是如何被吸引的、如何通過設(shè)計(jì)在不阻礙用戶的基礎(chǔ)上適當(dāng)吸引用戶注意力、哪些場景不該干擾用戶注意力，這些都是我們需要面對的問題。
現(xiàn)階段，由于體驗(yàn)設(shè)備的限制，大家大部分情況下還只是與手機(jī)、電腦等設(shè)備進(jìn)行交互，此時(shí)我們接收信息的方式主要包含：視覺、聽覺、觸覺。我們借助這些感官與世界和設(shè)備交流，下面會(huì)介紹設(shè)計(jì)師該用什么方式合理獲取用戶注意力。
界面設(shè)計(jì)的組成部分主要是控件、圖標(biāo)、文字信息、色彩等組成，而要想獲取用戶注意力，設(shè)計(jì)師必須清楚哪些信息應(yīng)當(dāng)突出，哪些應(yīng)當(dāng)弱化，如果所有信息都想突出，那就相當(dāng)于沒突出。
大腦有兩種處理信息的注意力機(jī)制。
一種是通過視覺、聽覺、觸覺等感官獲取信息，這種機(jī)制是“自外而內(nèi)”（自下而上）的，即我們從外界感知的，此時(shí)的影響因素是外界刺激而非內(nèi)心驅(qū)動(dòng)，甚至人們自身在這個(gè)過程中都沒有發(fā)現(xiàn)被吸引了注意力。
另一種是來自我們自身的，如記憶、想法等，是由我們的主觀能動(dòng)性進(jìn)行驅(qū)動(dòng)，比如你在專注思考今晚吃什么（這真的是一件糾結(jié)的事），這是“自內(nèi)而外”（自上而下）的，沒有這種注意力，就沒法專注起來。
這兩種注意力并沒有孰好孰壞之分，都在我們生活中起到至關(guān)重要的作用。區(qū)分這兩種處理信息的機(jī)制并不難，問題主要出現(xiàn)在我們了解這個(gè)有什么作用？
那當(dāng)然是有用的，舉個(gè)簡單的例子：
馬蜂窩的首頁是內(nèi)容信息推薦，用戶在這個(gè)場景中，如果是瀏覽首頁的旅游地點(diǎn)信息流，沒有攜帶特別明確的目的，就會(huì)更容易受到信息流推薦的影響，比如有吸引的圖片、標(biāo)題、按鈕等，都很容易吸引用戶，此時(shí)的注意力屬于“自外而內(nèi)”的。
此時(shí)設(shè)計(jì)形式以圖片為主，文字在界面中的占比相對較小，起輔助作用，在這種場景下，圖片相比于文字更容易吸引用戶。
而如果你想去成都旅游，于是你搜索了成都，想看看成都相關(guān)的游記，這時(shí)情況就不同了，因?yàn)槟阍谒阉鲿r(shí)具備了比較明確的目的。
你會(huì)關(guān)注搜索的內(nèi)容哪些是和成都相關(guān)并且你感興趣的，此時(shí)你注意力可能在搜索結(jié)果是不是能滿足需求，這時(shí)注意力屬于“自內(nèi)而外”的。
因此，頁面設(shè)計(jì)的關(guān)鍵就不是整些花里胡哨的操作，而是讓用戶便于高效搜尋，比如把你的搜索關(guān)鍵詞高亮突出，信息采用高效的列表排列。
說到這里，我們了解到了注意力的“自下而上”是被動(dòng)的（外界的刺激），“自上而下”是主動(dòng)的（個(gè)人意愿），而且針對這兩種不同的注意力機(jī)制，有不同的設(shè)計(jì)方式。
這次我們主要講的是：外界刺激下的“自下而上”的注意力類型，討論哪些設(shè)計(jì)可以更快、更直接、更合理地獲得人們注意力。
人們每天醒來就要與外界進(jìn)行各種“溝通”，只要一走出門，就是面對外界的各種變化和信息，觸覺的、視覺的、嗅覺的...所以人們不可能注意到所有事物，比如馬路上的車在跑，你可能只會(huì)關(guān)注到法拉利。
一般來說，人們更傾向于關(guān)注事物的顯著特征，比如顏色和大小，心理學(xué)家稱之為“顯著線索”（salient cue）。人們的注意力有限，所以大腦會(huì)關(guān)注比較重要的、差異化的信息。
人們不擅長區(qū)分細(xì)節(jié)信息，因?yàn)樵诖蠖鄶?shù)情況下，顯著線索已經(jīng)足以幫助信息之間的差異。不信，你看看下面哪個(gè)是小米的新 logo，拿來檢測視力，用的都說好！
所以，不要指望用戶一定會(huì)關(guān)注你界面中設(shè)計(jì)的關(guān)鍵信息，你所認(rèn)為的“顯著線索”對用戶來說未必很明顯。如果你擔(dān)心人們會(huì)過濾某些信息，可以嘗試用以下的方式吸引他們的注意力。
大腦有自身的信息處理注意機(jī)制，我們需要了解其基本運(yùn)作規(guī)律，在設(shè)計(jì)中更好突出我們的重點(diǎn)信息，弱化次要信息，在合理吸引用戶注意力的同時(shí)，盡可能降低對用戶的干擾。
視覺是一切感覺之首，大腦的大量資源都用于接收和解析眼睛見到的信息，上文講到，差異化的信息更容易吸引注意力。在設(shè)計(jì)中，有許多種方式可以達(dá)到這種效果，從視覺的角度看，有顏色對比、大小對比、形狀對比、清晰度對比、陰影對比、運(yùn)用圖片、動(dòng)態(tài)信息等方式。
如果設(shè)計(jì)師想吸引用戶進(jìn)行某個(gè)操作，顏色一定是最常用的手法，但這里的關(guān)鍵在于，加強(qiáng)顏色的對比，而非整個(gè)界面都用重點(diǎn)色突出。沒有對比，就沒有傷害，顏色也一樣，沒有對比，就沒有突出。
下圖中，美團(tuán)外賣“我的”界面，盡管“我的功能”、“我的服務(wù)”、“更多推薦”都是采用黃色高亮色，但由于缺少對比，所以在這幾個(gè)模塊中，并沒有哪個(gè)功能顯得更為突出。其次，一屏之內(nèi)，出現(xiàn)了 8 個(gè)小紅點(diǎn)，看起來更像是在玩消消樂，用戶看了，也不知道先點(diǎn)哪個(gè)后點(diǎn)哪個(gè)，那么干脆就不點(diǎn)了吧，如此一來，反而達(dá)不到預(yù)期的效果。
反觀懂車帝的界面，突出高亮顯示的功能，只有“發(fā)布”、“任務(wù)中心”，界面相比起美團(tuán)更清爽，減少了許多視覺壓力，此時(shí)用戶更容易聚焦到對應(yīng)的功能。
我們常能看到網(wǎng)上的鄙視甲方的話，甲方說標(biāo)題一定要大！要粗！但實(shí)際上，一般情況下，加強(qiáng)元素的大小、粗細(xì)對比，能夠豐富設(shè)計(jì)的層次，人們的視覺總是更容易受到更大視覺面積的影響，因此文字大小、粗細(xì)對比確實(shí)能夠讓用戶的視覺有非常清晰的聚焦點(diǎn)。
在大廠的設(shè)計(jì)中，我們能看到非常多設(shè)計(jì)都是遵循這種理念，比如 Apple、小米等。
apple 官網(wǎng)
小米官網(wǎng)
看看下面的圖片，你會(huì)注意到什么元素？
是的，我們的注意力會(huì)很自然地聚焦在差異性的圖形上，而忽略相同的視覺信息。形狀結(jié)構(gòu)差異性，在引導(dǎo)用戶視覺瀏覽動(dòng)線上，也是常用的手法。
以知乎為例，在知乎會(huì)員頁中，列表整體上均以左圖右文的形式展示，在這種相同結(jié)構(gòu)下，用戶瀏覽動(dòng)線相對比較統(tǒng)一，而界面中間配置了 banner 圖片，在結(jié)構(gòu)上形成了差異化，則更容易在視覺上形成突出效果。所以，就算這張圖片換成小圖，或者其他的結(jié)構(gòu)形式，也同樣可以達(dá)到區(qū)分的效果。
當(dāng)清晰的物體和模糊的物體放在一起時(shí)，人們會(huì)先注意到輪廓清晰的物體，而模糊的信息則容易形成背景。
iOS 是模糊效果運(yùn)用最多也是效果最好的系統(tǒng)，這種效果不僅使界面整體更沉浸，減少頁面層級變化的視覺割裂感，還能將邊緣輪廓清晰的內(nèi)容凸顯出來。
陰影效果可以讓元素在原有界面的 Z 軸方向上進(jìn)行突出，可以與界面其他未添加陰影效果的元素有明顯區(qū)分，在視覺層級上更高。
在 Material design 上，陰影被用來體現(xiàn)元素層級高度，陰影大小反映 Z 軸的卡片高度。感知上距離界面越高，陰影越大。
以美團(tuán)會(huì)員頁為例，頂部的會(huì)員卡片由于加上陰影效果，信息層級上顯得更高。
毋庸置疑，圖片信息相比于文字信息，更能吸引用戶的注意力，因?yàn)槿藗儗τ趫D像識別能力幾乎是與生俱來的，有時(shí)候圖片傳遞信息會(huì)比文字更快速、更直接。許多信息（比如情緒、氛圍感）很難靠文字傳遞，恰巧這些正是圖片最輕松傳達(dá)的。
以 App Store 為例，當(dāng)圖片與文字放置在一起的時(shí)候，圖片的吸睛效果會(huì)比文字更強(qiáng)。盡管圖片并非在頁面最上方，用戶未必會(huì)第一時(shí)間知道這是一張什么內(nèi)容的圖片，但知道視覺有一張圖片，視覺吸引到該處的概率會(huì)更大。
此外，人們對于圖片中人臉的識別更為突出，據(jù)研究，在大腦有一處特殊區(qū)域，專門用來識別人臉，稱為梭形臉部區(qū)，可以讓人臉識別繞過通常的視覺解析渠道，從而得到快速識別。
視覺對運(yùn)動(dòng)物體有一種特殊的處理機(jī)制，當(dāng)視線中出現(xiàn)了運(yùn)動(dòng)物體，眼睛就會(huì)不由自主地轉(zhuǎn)向運(yùn)動(dòng)物體，視覺焦點(diǎn)中心也隨之移至運(yùn)動(dòng)物體，這是反射性注意。在設(shè)計(jì)中，合理地使用動(dòng)態(tài)設(shè)計(jì)效果，能夠很輕松地引導(dǎo)用戶注意力。
以下面優(yōu)酷信息流為例，界面中的動(dòng)態(tài)圖片更容易獲取用戶的視覺注意力。
視頻也是動(dòng)態(tài)信息的一種呈現(xiàn)形式，在視覺媒介中，按照吸引用戶注意力的程度排序，分別是：視頻、圖片、純文字，視頻由于本身的動(dòng)態(tài)特性，在對靜態(tài)信息的對比中，吸引注意力的效果尤為明顯。
在手機(jī)上，許多產(chǎn)品都會(huì)采用視頻作為宣傳的形式，視頻能夠承載較大的信息量，同時(shí)傳達(dá)的效果又直截了當(dāng)。
聽覺在設(shè)備中的運(yùn)用也很頻繁，常見有提示音、鬧鐘等，比如支付寶、微信在收款時(shí)，也有收錢的提示音。
特別是在手機(jī)上使用聲音作為交互的某種反饋時(shí)，需要注意選擇恰當(dāng)?shù)穆曇?，避免引起用戶反感，在聲音的使用上要?jǐn)慎。
固定的聲音（如鈴聲）對于用戶而言可以形成條件反射，下課鈴聲響了，你會(huì)意識到是下課了；鬧鐘響了，你會(huì)意識到今天又是元?dú)鉂M滿的一天。需要注意的是，倘若聲音的出現(xiàn)與用戶沒有存在關(guān)聯(lián)，久而久之，這種聲音就容易被用戶忽略。
對于視障人士而言，聲音還是接收信息的主要渠道，比如 iPhone 的旁白功能，此時(shí)用戶操作的注意力會(huì)集中在對聲音的感知。
與觸覺相關(guān)的接收信息方式主要是振動(dòng)，在與設(shè)備交互功能中，人們對于振動(dòng)反饋的要求越來越高。在手機(jī)設(shè)備領(lǐng)域，許多廠商開始有意識地采用更好的振動(dòng)馬達(dá)，目前就是提升振動(dòng)反饋。
振動(dòng)也是在關(guān)鍵節(jié)點(diǎn)吸引用戶注意力，當(dāng)用戶操作成功、失誤的時(shí)候，給予輕微的振動(dòng)反饋，能夠加強(qiáng)用戶對當(dāng)前狀態(tài)的感知。
一次只做一件事，盡管許多人認(rèn)為自己可以一腦多用，同時(shí)處理多件事，但是研究表明，人們在大部分情況下，很難同時(shí)完成多個(gè)任務(wù)。大家在一定有時(shí)會(huì)遇到很煩躁的情況，比如一下子要做設(shè)計(jì)，一下子又要開會(huì)，時(shí)間被分散，注意力無法集中。同樣是，當(dāng)用戶面對復(fù)雜的界面時(shí)，也會(huì)出現(xiàn)這種情況。
在設(shè)計(jì)界面時(shí)，倘若界面有太多干擾項(xiàng)，就會(huì)增加用戶的認(rèn)知成本，無法快速辨別該執(zhí)行什么操作。
以 App Store 和潮汐為例，下面這兩個(gè)頁面都可以看出信息的專注性，App Store 以卡片形式清晰呈現(xiàn)每一個(gè)專注或應(yīng)用；潮汐首頁只突出了底部的四個(gè)操作。這些都讓用戶盡可能減少無謂的信息干擾，專注于當(dāng)前界面的操作。
你以為我講了 App store 和潮汐的例子就完了嗎？上面的 App 由于定位和商業(yè)化程度的不同，才有了這種簡約的設(shè)計(jì)形式，大多數(shù)設(shè)計(jì)師面對的界面是產(chǎn)品極力要求把所有信息都在一屏之內(nèi)塞得滿滿當(dāng)當(dāng)。
面對商業(yè)化，許多設(shè)計(jì)師可能會(huì)認(rèn)為毫無有心無力，但是日常處理復(fù)雜的信息量才是許多設(shè)計(jì)師的常態(tài)，大部分業(yè)務(wù)由于商業(yè)化等原因，都會(huì)往界面塞進(jìn)更多內(nèi)容。
交互設(shè)計(jì)師除了了解產(chǎn)品功能，還需要考慮如何組織、轉(zhuǎn)移這些復(fù)雜的信息，如果信息組織得當(dāng)，也可以強(qiáng)化重點(diǎn)功能模塊，合理引導(dǎo)用戶的注意力。
以貓眼為例，首頁承載著功能入口和電影資源推薦等功能，但是通過合理的信息布局，仍然可以使界面結(jié)構(gòu)變得清晰。
Krug 可用性第三定律提到：去掉每個(gè)頁面上一半的文字，然后把剩下的文字再去掉一半。
盡管上述提到的定律有點(diǎn)夸張，但是，繁雜、多余的信息文案，確實(shí)會(huì)讓用戶花費(fèi)更多時(shí)間理解，當(dāng)用戶無法快速了解內(nèi)容信息時(shí)，注意力就容易漂移。在設(shè)計(jì)時(shí)，設(shè)計(jì)師尤其要記住，在保證信息完整性的前提下，盡可能讓文案更加簡短，做到讓用戶快速領(lǐng)會(huì)到設(shè)計(jì)所表達(dá)的意思。
信息易讀性，是獲取注意力的基本，用戶是懶惰的，不要期待用戶會(huì)在如何了解你的產(chǎn)品這種事情上花費(fèi)太多時(shí)間。
以下圖為例，左邊文案“你必須先登錄才能提交訂單”明顯就不如“登錄并提交”來得直觀，在交互文案中，要格外注意信息表達(dá)的精簡性，當(dāng)然不能以犧牲表達(dá)的信息完整性為代價(jià)。
內(nèi)容相關(guān)性，即推薦的內(nèi)容與用戶相關(guān)，許多內(nèi)容型產(chǎn)品，通過算法等方式，根據(jù)用戶的偏好進(jìn)行內(nèi)容推薦。
抖音視頻推薦、頭條資訊推薦、網(wǎng)易云歌單推薦、淘寶商品推薦...你會(huì)發(fā)現(xiàn)，我們生活在一個(gè)所有資訊信息與我們相關(guān)性極高的世界，因?yàn)樗麄兺扑]算法，很大程度上就是基于我們歷史行為而推薦的，如果是不相關(guān)的信息，我們可能壓根就不會(huì)看，我們被這些信息吸引注意力，這些信息確實(shí)幫助我們降低了篩選的成本。盡管另外一方面，這些信息也可能限制了我們發(fā)現(xiàn)更多其他的信息。
本文介紹了注意力的主要類型：“自外而內(nèi)”、“自內(nèi)而外”，并且就“自下而上”的注意力類型進(jìn)行了分析。
在設(shè)計(jì)中，無論是無法讓用戶集中注意力，還是到處都在搶占注意力，都不算是好設(shè)計(jì)。作為設(shè)計(jì)師，我們需要了解如何合理吸引用戶注意力，以兼顧用戶體驗(yàn)和商業(yè)化。人們大多通過視覺、聽覺、觸覺與設(shè)備進(jìn)行交互，同時(shí)從信息設(shè)計(jì)的角度也進(jìn)行了分析。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：熱風(fēng)_
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
在如今的工作中（尤其是B端）越來越多的會(huì)開始出現(xiàn)數(shù)據(jù)可視化的身影，對于一部分小伙伴來說這個(gè)概念是較為陌生的，面對這道無形之中提升的“門檻”我們常常會(huì)表現(xiàn)的手足無措。所以，為了讓大家對于數(shù)據(jù)可視化不再那么束手無措，我希望能通過這篇文章和大家一起交流學(xué)習(xí)，解決一些屬于我們共同的問題
那么我們還是老規(guī)矩，想要了解一個(gè)事物首先需要知道的是它的定義
較為籠統(tǒng)的來說數(shù)據(jù)可視化是一種由圖形、圖像、數(shù)字等元素組成的語言用于解釋、呈現(xiàn)目標(biāo)數(shù)據(jù)之間的關(guān)系。從這個(gè)定義上來看，數(shù)據(jù)可視化從外觀層面來說是與圖形、圖像這些視覺元素密不可分，這也是數(shù)據(jù)可視化最為明顯的特征
而結(jié)合我們實(shí)際的生活與工作來說，數(shù)據(jù)可視化是一種以圖形符號為主要表現(xiàn)形式，將不可見的、抽象的、復(fù)雜的、枯燥的、專業(yè)的、不直觀的數(shù)據(jù)內(nèi)容，有趣的、淺顯的傳遞給用戶的有效手段。用戶可以通過這樣的手段在數(shù)據(jù)完成自己的目標(biāo)（例如對選定范圍內(nèi)的數(shù)據(jù)進(jìn)行分析發(fā)現(xiàn)數(shù)據(jù)的周期與規(guī)律、迅速找到自己目標(biāo)節(jié)點(diǎn)中的關(guān)鍵數(shù)值、對比幾組數(shù)據(jù)以了解當(dāng)下研究對象的情況等）這也是數(shù)據(jù)可視化最為明顯的價(jià)值
關(guān)于可視化的發(fā)展史上可追溯至1950年，當(dāng)時(shí)人們利用計(jì)算機(jī)創(chuàng)建出了首批圖形圖表，可以說是數(shù)據(jù)可視化圖表最為早期的雛形，而在50-60年代的可視化中又以查爾斯·約瑟夫·米納德的《1812－1813對俄戰(zhàn)爭中法軍人力持續(xù)損失示意圖》為代表
該圖描繪了拿破侖的軍隊(duì)自離開波蘭到俄羅斯邊界后軍力損失的狀況，也是后世分析拿破侖對俄戰(zhàn)爭的重要數(shù)據(jù)分析資料，后來這種帶狀圖被稱為“?；鶊D”用來解釋能量的流動(dòng)
而可視化真正被提到一個(gè)應(yīng)用理論的高度是到了1987年布魯斯·麥考梅克和馬克沁·布朗所編寫的美國國家科學(xué)基金會(huì)報(bào)告《Visualization in Scientific Computing》（科學(xué)計(jì)算之中的可視化），其意在強(qiáng)調(diào)了基于計(jì)算機(jī)的可視化技術(shù)方法的必要性，此時(shí)的概念已經(jīng)與現(xiàn)在我們所接觸的工作中的數(shù)據(jù)可視化是非常接近
到了90年代初人們發(fā)起了一個(gè)稱為“信息可視化”的研究領(lǐng)域旨在為許多應(yīng)用領(lǐng)域（科學(xué)、商業(yè)、行政、財(cái)務(wù)、數(shù)字媒體）之中對于抽象的異質(zhì)性數(shù)據(jù)集的分析工作提供支持，與前面提到的“科學(xué)可視化”交叉形成了現(xiàn)在耳熟能詳?shù)摹皵?shù)據(jù)可視化”，此時(shí)這個(gè)詞匯才慢慢的被更多的專業(yè)領(lǐng)域的人所接受，并在之后互聯(lián)網(wǎng)的不斷發(fā)展中擴(kuò)充著自己的分支
目前大量開始使用視覺可視化的原因其實(shí)非常簡單大致的原因可以分為需要處理的數(shù)據(jù)量太大了和人腦不夠用了
據(jù)不完全統(tǒng)計(jì)IBM公司每天有2.5億字節(jié)數(shù)據(jù)的吞吐量，麻省理工學(xué)院的研究科學(xué)家Andrew McAfee和Erik Brynjolfsson教授指出，如今在互聯(lián)網(wǎng)上傳遞的數(shù)據(jù)量比過去20年的總和還多，而且根據(jù)IDC預(yù)測，到2025年將有163萬億GB的數(shù)據(jù)
這是非常驚人的，而這么多需求的數(shù)據(jù)量單憑人腦的計(jì)算能力和處理能力來說是完全無法與之匹配的，研究表明人腦很難同時(shí)處理5組以上的抽象數(shù)據(jù)，所以這種單線程的處理方式就決定了需要借助外力
而對于用戶尤其是決策層的用戶來說在現(xiàn)實(shí)的工作場景中經(jīng)常需要同時(shí)處理超過5組以上的數(shù)據(jù)并需要對其建立精準(zhǔn)的分析模型以便于做出最準(zhǔn)確的決策所以基于這樣的需求，數(shù)據(jù)可視化設(shè)計(jì)氤氳而生
基于數(shù)據(jù)可視化的需求來看，數(shù)據(jù)可視化的優(yōu)勢是顯而易見的，可以概括為兩點(diǎn)認(rèn)知減負(fù)和傳遞賦能
認(rèn)知減負(fù)是使用者在使用數(shù)據(jù)可視化工具時(shí)候的最直觀感受，當(dāng)所面對的龐大的、復(fù)雜的枯燥海量數(shù)據(jù)集變成了圖像化、通俗化、形象化的視覺符號時(shí)我們會(huì)本能的放下對于面對再面對冰冷數(shù)據(jù)時(shí)候的抗拒和戒備，這是因?yàn)槿藢τ谝荒苛巳桓咏咏约菏煜さ挠腥な挛锏臅r(shí)候會(huì)更為親切和愿意去主動(dòng)理解
而且被處理過、規(guī)劃過的簡潔直觀表現(xiàn)形式能更為直接的讓使用者看到數(shù)據(jù)與數(shù)據(jù)之間的關(guān)聯(lián)，進(jìn)而分析出其潛在關(guān)系，在人對數(shù)據(jù)的認(rèn)知這個(gè)環(huán)節(jié)上降低了識別成本和分析成本
傳遞賦能上圖像傳遞更接近人類最本能的獲ju取信息的方式，比起文字來說圖像更像是一個(gè)解密的步驟，通過解開文字描述這重“密碼”將最本質(zhì)的信息進(jìn)行呈現(xiàn)，而且對比文字，圖像所能夠承載的信息其實(shí)更為廣泛，而且人類讀圖的效率要遠(yuǎn)遠(yuǎn)高于閱讀文字
無論是一個(gè)約定俗成的語義符號形象還是符合語境的配色都能夠起到比文字直白表述更為強(qiáng)烈的深入人心效果，并且圖解的形式并不受限于語言的障礙，極大的降低了溝通成本
基于用戶的使用目標(biāo)來說，使用數(shù)據(jù)可視化其實(shí)就像是一個(gè)偵探用“蛛網(wǎng)圖”輔助自己梳理思緒進(jìn)行破案的過程：將一些有關(guān)的，但是較為零散信息數(shù)據(jù)用一根根線索線穿插起來，形成體系化的聯(lián)系，方便使用者迅速把握各個(gè)節(jié)點(diǎn)之間的關(guān)系進(jìn)行推導(dǎo)
所以說我們在設(shè)計(jì)數(shù)據(jù)可視化的時(shí)候并不是對我們拿到的數(shù)據(jù)的無腦映射，而是要基于用戶的目標(biāo)經(jīng)過一定的處理和優(yōu)化后才能進(jìn)行呈現(xiàn)，隨時(shí)記住我們是給用戶在打輔助，所以我們每一步的設(shè)計(jì)一定要基于用戶的思考
用戶的期望是能夠高效、清晰、簡潔地完成數(shù)據(jù)的對比、關(guān)鍵節(jié)點(diǎn)的查詢、每組數(shù)據(jù)之間的分析等一系列交互，提升自己的工作效率，降低自己的學(xué)習(xí)和使用成本
數(shù)據(jù)可視化的應(yīng)用領(lǐng)域較為廣泛涉及醫(yī)療、統(tǒng)計(jì)、管理、金融、娛樂、人工智能等一系列領(lǐng)域，在UI的設(shè)計(jì)中我們最常接觸到的包括：PC后臺(tái)的數(shù)據(jù)概覽、數(shù)據(jù)可視化大屏、游戲UI、后臺(tái)實(shí)時(shí)監(jiān)控等
當(dāng)我們大致了解了數(shù)據(jù)可視化的歷史、使用原因、優(yōu)勢、用戶目標(biāo)、應(yīng)用領(lǐng)域后下面就要切入我們設(shè)計(jì)師最為關(guān)心的話題：我們在設(shè)計(jì)中的任務(wù)
數(shù)據(jù)可視化作為一門跨領(lǐng)域的學(xué)科，本身對于從業(yè)者而言就有著一定的綜合素質(zhì)要求，但由于國內(nèi)教育并沒有垂直教學(xué)學(xué)科所以在現(xiàn)在的階段從業(yè)人員一部分由純視覺設(shè)計(jì)專業(yè)的同學(xué)組成另一部分由純工科類型的專業(yè)的同學(xué)組成
于是這就導(dǎo)致了非視覺設(shè)計(jì)師在進(jìn)行設(shè)計(jì)時(shí)，會(huì)將全副精力放在強(qiáng)數(shù)據(jù)的準(zhǔn)確性、合理性上，從而讓視覺的易讀性上有一定的損失，表現(xiàn)形式也較為單一枯燥，視覺感官較差，反觀視覺設(shè)計(jì)師通常會(huì)將數(shù)據(jù)可視化在視覺表現(xiàn)形式上過度用力，雖然營造了很好的視覺體驗(yàn)，但是從其實(shí)用度、可用性上來說會(huì)大打折扣
于是設(shè)計(jì)的難點(diǎn)很多時(shí)候就會(huì)集中在平衡視覺與實(shí)用之間的關(guān)系
通過以上分析，不難看出設(shè)計(jì)的主要目標(biāo)，而面對這句較為抽象的“把握設(shè)計(jì)與實(shí)用之間的平衡”其實(shí)無外乎也就是拆解到功能和視覺這兩個(gè)方面
從功能上來說，我的目標(biāo)是提升用戶的數(shù)據(jù)閱讀效率、讓用戶能夠迅速Touch到目標(biāo)信息，提升交互效率，一切都是以結(jié)果為導(dǎo)向，以解決用戶問題為導(dǎo)向，一定記住人們不愿意接受未處理過的數(shù)據(jù)
而從視覺上來說，我們的目標(biāo)是處理好在視覺上各個(gè)模塊之間的統(tǒng)一、透氣關(guān)系，同時(shí)將數(shù)據(jù)進(jìn)行可視化的同時(shí)盡量提升感官上的審美體驗(yàn)與傳達(dá)上的有趣
以上會(huì)作為后文中我們每一步設(shè)計(jì)的指導(dǎo)和檢驗(yàn)和理性的方式，從實(shí)際操作的維度上來說二者也并不是五十比五十的分配，遵循的原則是：體驗(yàn)一定要讓位于功能，所以在視覺的層面發(fā)揮的空間其實(shí)需要比較克制
了解了數(shù)據(jù)可視化的設(shè)計(jì)難點(diǎn)，明確了數(shù)據(jù)可視化的設(shè)計(jì)目標(biāo)，那么我下面進(jìn)入我們最重點(diǎn)的環(huán)節(jié)：可視化頁面案例制作，由于數(shù)據(jù)可視化的形式較多，這次我們以工作中經(jīng)常接觸得到的PC頁面數(shù)據(jù)概覽頁為例
同樣的細(xì)化到數(shù)據(jù)概覽這個(gè)分支項(xiàng)目我們同樣需要明確了解其基礎(chǔ)定義和性質(zhì)，嚴(yán)格意義上來說數(shù)據(jù)概覽部分屬于Dashboard design（儀表盤設(shè)計(jì)）的一種，其主要的目的和功能可分為分析和操作兩塊
所以從綜合的角度來說數(shù)據(jù)概覽部分可以理解為：1.其他模塊的摘要視圖，并顯示來自應(yīng)用程序各個(gè)部分的關(guān)鍵信息，從這點(diǎn)上來說建議此模塊可以在其余模塊設(shè)計(jì)完后再進(jìn)行設(shè)計(jì)，如此有利于設(shè)計(jì)師從一個(gè)全局的視角切入進(jìn)行設(shè)計(jì)，理解上也會(huì)更加透徹，否則很可能會(huì)陷入在你設(shè)計(jì)其他模塊的時(shí)候不斷地返回對其進(jìn)行修改的怪圈
2.他也是核心功能、常用功能的快速操作助手和快捷頁面跳轉(zhuǎn)(有點(diǎn)類似于導(dǎo)航)，交互功能的排布和關(guān)鍵信息的顯示其共同的要求點(diǎn)是顯而易見的，即明確各個(gè)模塊之間的層級，做好順序、優(yōu)先級排布這就需要你對業(yè)務(wù)目標(biāo)有一定的了解，記住對業(yè)務(wù)目標(biāo)不了解你的設(shè)計(jì)將毫無意義
你可以通過查詢一些內(nèi)部資料、報(bào)告、也可以詢問產(chǎn)品經(jīng)理等相關(guān)負(fù)責(zé)人，還可以通過用戶調(diào)研得出，這里不展開說，具體可以去參考我的另一篇關(guān)于用戶畫像的文章，在動(dòng)手之前你需要搞清楚：各模塊之間優(yōu)先級如何、你需要在一張單獨(dú)的圖表內(nèi)展示多少變量、想展示一段時(shí)間內(nèi)的值還是項(xiàng)目和項(xiàng)目之間嗨是組與組之間、每段變量中有多少關(guān)鍵數(shù)據(jù)需要展示等問題
、
如上圖所示，在工作中我們經(jīng)常接到需求的時(shí)候是面對一堆冗雜的數(shù)據(jù)集，組成了若干個(gè)模塊，但是正如上文所說我們并不能對其進(jìn)行無腦的可視化映射，所以首先要做的就是要對各個(gè)模塊進(jìn)行優(yōu)先級的梳理排序
明確了各個(gè)模塊的優(yōu)先級排布之后我們開始對每一個(gè)單獨(dú)模塊進(jìn)行可視化轉(zhuǎn)化，即哪一個(gè)部分分別用什么類型的可視化形式表現(xiàn)，這一步非常類似于土地使用規(guī)劃，當(dāng)你在將土地劃分完后，為每一塊土地定義其使用類型
想準(zhǔn)確的將圖表與所要表現(xiàn)的數(shù)據(jù)進(jìn)行對應(yīng)現(xiàn)需要了解圖表本身所包含的基本元素
在這些元素中正常情況下一定在圖表中的有：標(biāo)題、時(shí)間范圍、圖形主體，經(jīng)常出現(xiàn)的有：坐標(biāo)系、圖例、提示信息，有時(shí)候會(huì)有的有：切換選項(xiàng)和值域
知道了這些重要的基礎(chǔ)信息了，那么在面對這么多圖表的時(shí)候我們該如何正確的選擇來進(jìn)行使用呢
、
其實(shí)和之前說的一樣：基于目的來進(jìn)行思考，所謂的基于目的來進(jìn)行思考也就是要明確你所確立的數(shù)據(jù)指標(biāo)需要分析的維度，而日常使用的數(shù)據(jù)需要分析的維度無外乎：比較、構(gòu)成、分布聯(lián)系
比較類圖表應(yīng)該是大家最為熟悉的范疇，第一時(shí)間能夠想到的就是柱狀圖，這也是運(yùn)用最為廣泛的圖表之一，經(jīng)常出現(xiàn)在PC端之中，用于描述分類數(shù)據(jù)之間的對比，描述的數(shù)據(jù)可以是地區(qū)、品類甚至一個(gè)時(shí)間周期，但由于其擴(kuò)展能力有限，所以一般不建議項(xiàng)目超過12條
條形圖與柱狀圖類似，看上去只是交換了X軸與Y軸，功能和承載數(shù)據(jù)種類較為類似，但不同的是，條形所能承載的項(xiàng)目數(shù)量相對于柱狀圖而言更多，由于其優(yōu)良的縱向延展性一般用于手機(jī)端較多，而且從上到下的閱讀方式符合人眼閱讀習(xí)慣，所以也會(huì)經(jīng)常用于排行榜的設(shè)計(jì)中
分組條形圖是條形圖的衍生之一用于比較多個(gè)變量在不同區(qū)域之間的數(shù)量關(guān)系，比如當(dāng)想比較同樣一款衣服和鞋子在四個(gè)門店中的一個(gè)季度的營業(yè)額時(shí)就可以使用分組條形圖
雙向條形圖表適合比較兩組以上的分類數(shù)據(jù)比較，和分組條形圖較為類似，但是由于自身外觀特征更適合用于比較兩組意義相反的數(shù)據(jù)，也正是如此，雙向條形圖的組內(nèi)二級分類數(shù)量一般不要超過3條最好
折線圖與前者最大的不同就在于在坐標(biāo)軸中加入了連續(xù)類別這個(gè)概念，數(shù)據(jù)基于時(shí)間等因素變得動(dòng)態(tài)了起來，注重變化趨勢的展現(xiàn)
面積圖是折線圖的延伸，除了表示變化趨勢之外還能比較所選范圍內(nèi)積累的值
玫瑰圖應(yīng)該算是可視化圖表中的“網(wǎng)紅”，因?yàn)槲覀儚男W(xué)的課本中就知道它還有一個(gè)別稱叫“南丁格爾玫瑰圖”它是一種圓形的直方圖，使用半徑長短表示數(shù)值大小，其特點(diǎn)就在于因?yàn)槠洫?dú)特的外觀可以將數(shù)值之間的差距在視覺層面進(jìn)行放大，和將坐標(biāo)軸范圍縮小來提升視覺上數(shù)值的碾壓是一個(gè)道理，發(fā)布會(huì)吹水最愛，但是要注意的是這不是一個(gè)表示占比構(gòu)成的圖，因?yàn)槊倒鍒D的每一份角度是一樣的，一定要和餅狀圖等圖區(qū)分開來，它用來表示的還是數(shù)值與數(shù)值之間的大小
雷達(dá)圖經(jīng)常用于分析一些多維的性能數(shù)據(jù)、評分?jǐn)?shù)據(jù)，經(jīng)常打游戲的朋友應(yīng)該不陌生，有多少五邊形選手可以扣個(gè)1，每一項(xiàng)指標(biāo)越接近圓心說明狀態(tài)越差，越向外說明越佳
子彈圖用于比較當(dāng)前數(shù)值與目標(biāo)之間的關(guān)系，比如看當(dāng)前業(yè)績是否達(dá)標(biāo)，也可以通過標(biāo)記劃分區(qū)域來進(jìn)行更好的評估
漏斗圖適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單項(xiàng)分析，一定要有清晰的環(huán)節(jié)，比如監(jiān)控買家從瀏覽到最后下單的數(shù)量統(tǒng)計(jì)以求得轉(zhuǎn)化率，不適合無邏輯、無流程的分類對比
構(gòu)成類圖表整體上來說主要用于觀察部分和整體的占比關(guān)系，最經(jīng)典的莫過于餅狀圖，這個(gè)不用多說，通過每一份半圓角度所占整個(gè)圓的大小來表示部分和整體的關(guān)系，但是由于其所占面積較大，經(jīng)常會(huì)讓視覺過于集中，影響注意力
相對于餅狀圖而言，環(huán)狀圖十分有效的避免的干擾視覺的問題，其本質(zhì)是將餅圖中間掏空，功能與餅圖基本一致，但是視覺上做到了輕量化，目前在日常設(shè)計(jì)中較為常用
旭日圖相當(dāng)于前面二者的結(jié)合，適用于展示多層級數(shù)據(jù)的占比關(guān)系，距離圓心越近代表層級越高，下一層級的總和構(gòu)成上一層級，存在一定的父子層級關(guān)系
堆疊面積圖出了可以表達(dá)趨勢外，其優(yōu)勢在于能夠表達(dá)總量和分量的構(gòu)成關(guān)系，堆疊面積圖上的最大的面積代表了所有的數(shù)據(jù)量的總和，是一個(gè)整體。各個(gè)疊起來的面積表示各個(gè)數(shù)據(jù)量的大小
堆疊柱狀圖的優(yōu)勢在于它既可以表達(dá)一級分類的比較，同時(shí)還能看出二級分類在各其一級分類中的占比，但是缺點(diǎn)在于二級分類并不是按照同一基準(zhǔn)線對齊的，相比于堆疊面積圖更為常用
瀑布圖用表達(dá)兩個(gè)數(shù)值之間的變化過程，過程值為正的時(shí)候，向上加，過程值為負(fù)的時(shí)候向下減
分布聯(lián)系類地圖在這兩年在國人的心中其實(shí)已經(jīng)非常熟悉了，因?yàn)橐咔榻衲甑牡貓D可視化的應(yīng)用經(jīng)常出現(xiàn)在我們的生活中，地圖可以結(jié)合不同的表達(dá)方式：
可以結(jié)合散點(diǎn)、可以結(jié)合動(dòng)畫、還可以結(jié)合引導(dǎo)線以及熱力圖的方式，圖的形式使用視具體的業(yè)務(wù)需求來定
最后就是氣泡圖，這是在查看分布關(guān)系中最為經(jīng)典的視覺模型，用氣泡的面積大小表示數(shù)量，結(jié)合輔助線可以更好地觀察分布情況
當(dāng)我們對每種圖表的功能和使用范圍有了一個(gè)較為明確的認(rèn)知之后，下面我們就可以對我們之前所規(guī)劃好的優(yōu)先級的模塊進(jìn)行可視化形式（圖表）的匹配了
進(jìn)行匹配過后，我們將對布局進(jìn)行重構(gòu)，整體重構(gòu)需要遵循的原則是
1.布局層級明確，首屏盡量曝光更多內(nèi)容
2.統(tǒng)一透氣，具有呼吸感
從首屏曝光更多內(nèi)容來說主要是因?yàn)榛诜治鲱惖臄?shù)據(jù)概覽工作場景和Analytical dashboard自身特征決定的，用戶希望能夠通過僅僅一屏的的大小進(jìn)行對各類信息的情況有基本的把控達(dá)到一眼全局的目的，其主要注意力都會(huì)放在首屏，所以我們需要盡可能的在首屏安排更多的信息
當(dāng)然首屏內(nèi)容也并不是越多越好，一般建議也盡量不要超過7組模塊，而在層級明確這塊兒主要是根據(jù)人眼閱讀習(xí)慣所產(chǎn)生的優(yōu)先級排布：正常情況下都是左上為優(yōu)先級最高，而右下優(yōu)先級較低，這是無數(shù)經(jīng)典的眼動(dòng)測試和設(shè)計(jì)總結(jié)產(chǎn)生的最常用結(jié)論，就不展開敘述了，所以當(dāng)我們按照優(yōu)先級、首屏曝光更多內(nèi)容的原則進(jìn)行處理后會(huì)得到如上圖的布局
這主要是視覺層面的問題，統(tǒng)一透氣的要求在首頁概覽中可以依靠柵格系統(tǒng)來來解決，它可以有效的幫助頁面布局的對其保持頁面布局一致性，為頁面建立基礎(chǔ)布局框架，將頁面中的所有元素都捆綁在一個(gè)體系之中，同時(shí)還能有效解決適配問題
完成了大規(guī)劃之后，下面我們開始對一個(gè)一個(gè)的模塊進(jìn)行拆解同樣的以目標(biāo)指導(dǎo)設(shè)計(jì)，邊設(shè)計(jì)邊驗(yàn)證
和大規(guī)劃一樣，單獨(dú)到每一個(gè)圖表同樣要時(shí)刻注意層級的梳理，銷售渠道部分很明確應(yīng)該是運(yùn)用一個(gè)折線圖的形式，由于業(yè)務(wù)目標(biāo)上來說更關(guān)注銷售額而不是銷售額和訂單數(shù)的比較，所以我們選用了一個(gè)帶有切換選項(xiàng)的折線圖形式
但是我們會(huì)很容易發(fā)現(xiàn)的在讀圖時(shí)會(huì)出現(xiàn)較大的視覺干擾，并沒有能夠很好地突出重點(diǎn)信息，視覺層級不清晰、混亂
于是我們對沒有重點(diǎn)的視覺層級進(jìn)行梳理，像之前劃分模塊那樣，對視覺元素進(jìn)行高、中、低的P0、P1、P2的設(shè)定，提升易讀性
P0：層級最高的自然是重點(diǎn)信息突出部分，所以我們需要在其之上做加法，給予內(nèi)容異形懸停樣式進(jìn)行具體強(qiáng)調(diào)，配合投影加強(qiáng)視覺效果，有效傳遞用戶，拉開與別的元素的層級，同時(shí)數(shù)據(jù)部分用特殊字體并適當(dāng)加大字號進(jìn)行設(shè)計(jì)，方便用戶第一時(shí)間能夠看到所要強(qiáng)調(diào)的數(shù)據(jù)具體值
P1: 其次就是主體圖形部分，這是用戶需要看到的重要部分，在使用場景中會(huì)長時(shí)間盯視，所以采用更低的明度與更高的飽和色顏色確保易讀性，但是也不致于會(huì)讓用戶太晃眼產(chǎn)生視覺疲勞，最后考慮到該模塊所處位置屬于頁面中較為核心的地帶，給予一定的顏色透明度漸變裝飾，在強(qiáng)化主體圖形的同時(shí)不致于太顯單薄
P2：前兩者都是一定程度的做加法，那么層級最低的元素比那需要開始做減法，此時(shí)軸線、刻度、切換選項(xiàng)等元素需要弱化視覺層級，降低透明度，尤其是背后的刻度線與背景的明度對比大概控制在1.6:1上較為合適
銷售總額、訂單數(shù)、渠道數(shù)同屬于一個(gè)數(shù)據(jù)統(tǒng)計(jì)的范疇，最忌諱的就是把以上提供的三個(gè)信息給做平，讓用戶抓不住重點(diǎn)，面對這樣的情況還是一樣，確立需要突出的重點(diǎn)信息給予特殊文字和大小的設(shè)計(jì)，選擇合適的主體圖形
但在這里需要注意的是由于在這個(gè)模塊中P0是金額數(shù)、訂單數(shù)、渠道數(shù)這些重要值，所以可視化圖形需要適當(dāng)為其讓步，不要放在閱讀中心位置，按照P1來進(jìn)行處理，而訂單數(shù)、轉(zhuǎn)換率這樣的標(biāo)題就成了P2需要適當(dāng)降低透明度和文字大小，不干擾主要信息的表達(dá)
說到統(tǒng)一，最先想到的一定是色彩，無非也就是需要處理好對立統(tǒng)一關(guān)系，而這其中統(tǒng)一的比例又要大于對立，配色上盡量選用同類色系，不宜太過花哨，尤其是對于B端而言，建議在可能的情況下不要超過5種，而且主色、輔助色，對比色的比例建議控制在6:3:1的比例（但不絕對），既能做到有所區(qū)別又不致于過于絢麗干擾視覺
你的主色不一定要遷就你的品牌色，但是一定要是如上文說的盡量低明度高飽和，以適應(yīng)于長時(shí)間的注視
顏色過后就是字體，字體字體的使用需要極為謹(jǐn)慎，如果可以盡量只出現(xiàn)一種字體（但不要超過三種），并且只采用基礎(chǔ)字體，正常情況下都是將其作為一個(gè)需要被降噪了的視覺元素來對待（比如降低透明度），在PC端中盡量也不要出現(xiàn)較多不同的字號，字重，造成沒有必要的視覺干擾
除了字體之外，在統(tǒng)一感的營造上卡片的布局結(jié)構(gòu)也需要盡量保持一致，這是為了提升易用性，同一個(gè)產(chǎn)品內(nèi)，相同布局會(huì)給予用戶相同交互、相同功能的暗示，也更容易培養(yǎng)用戶習(xí)慣，提升操作效率
呼吸感是留白的藝術(shù)，很考驗(yàn)設(shè)計(jì)師的排版能力，在單獨(dú)的模塊內(nèi)，元素與元素之間盡量不要用實(shí)線進(jìn)行間隔，可以的話利用親密性原則通過元素間距的遠(yuǎn)近進(jìn)行布局
而柱狀圖的設(shè)計(jì)上，柱與柱之間的間距最好大于柱寬的1.5倍，這樣才顯得視覺上較為透氣，不致于太臃腫
最后就是模塊中的邊距留白部分，這點(diǎn)一定要重視，不然不僅你的版心會(huì)變散，還會(huì)嚴(yán)重影響你的頁面呼吸感
細(xì)節(jié)上首先要說的就是橫縱坐標(biāo)軸上的文字，上面的文字一定不要過長，最好的方式是將文字進(jìn)行精簡。然后橫、豎排對齊處理，如果實(shí)在不能精簡那么再進(jìn)行斜排的方式
第二點(diǎn)就是橫縱坐標(biāo)軸有的時(shí)候會(huì)因?yàn)樾枰故镜臄?shù)據(jù)過多而過于密集影響閱讀，這個(gè)時(shí)候可以采用適當(dāng)增加一個(gè)值域的劃定的方式來進(jìn)行坐標(biāo)間距的縮放
第三點(diǎn)就是，在排行榜等模塊可以適當(dāng)增加一些小設(shè)計(jì)，比如金、銀、銅的設(shè)計(jì)，提升情感化元素的融入
第四點(diǎn)就是，盡量不要選用一些3D的酷炫效果來做可視化，因?yàn)檫@種效果很容易對數(shù)據(jù)進(jìn)行遮擋和扭曲，不是非常適用于高效閱讀，也不適合PC頁面上的交互，而且也不利于開發(fā)，比較得不償失
當(dāng)所有的模塊設(shè)計(jì)完成后，像拼高達(dá)一樣進(jìn)行組裝，組裝完成后適當(dāng)調(diào)整其過于干擾視覺的地方，然后進(jìn)行自檢
自檢不只是從檢查你的視覺、你的模塊間的布局，更重要的是帶入使用角色來進(jìn)行檢查，你可以模用戶使用中的各種需求場景，對已經(jīng)制作好的頁面進(jìn)行交互和閱讀，看是否能夠快速高效地完成使用目標(biāo)
當(dāng)然除了自己之外，你還能在有條件的情況下找專家用戶進(jìn)行使用，即使記錄使用中存在的問題并及時(shí)進(jìn)行調(diào)整，當(dāng)初步使用大致無問題后便可以交付
了解了圖表在PC頁面的布局使用之后，最后想和大家聊一點(diǎn)拓展性的話題：數(shù)據(jù)可視化大屏，目前在B端領(lǐng)域可視化大屏已經(jīng)是一個(gè)越來越熱的研究課題，同樣也是承載信息圖表的重要載體之一，但由于篇幅限制本篇并不展開討論
同樣從定義上來說，數(shù)據(jù)可視化大屏就是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)，聽著和PC端的數(shù)據(jù)概覽相比似乎只有載體的區(qū)別，但是兩者的差異卻不止于此
首先是尺寸上來說，數(shù)據(jù)可視化大屏要遠(yuǎn)遠(yuǎn)大于PC數(shù)據(jù)概覽，我們在市面經(jīng)常看到的大屏硬件有一整塊巨型的P3屏幕，也有用若干臺(tái)液晶電視拼接而成的大屏，而且不像是PC有一些固定尺寸的長寬約束，大屏的尺寸更自由
其次大屏的配色更為炫酷、科幻具有一種未來感，哪怕不是設(shè)計(jì)師朋友看過數(shù)據(jù)可視化大屏的朋友一定會(huì)感覺一種撲面而來的科技感、前衛(wèi)感，這主要是因?yàn)榇笃恋呐渖喟胧且运{(lán)黑等深沉的顏色為背景色主基調(diào)，然后在數(shù)據(jù)可視化展示部分以一些高明度、高飽和的色彩進(jìn)行呈現(xiàn)，給人會(huì)不由自主營造一種賽博朋克的味道
這并不是一開始就制定的配色準(zhǔn)則，而是大屏本身需要向其面向的用戶營造一種實(shí)力、科技、質(zhì)感的氛圍，所以慢慢大家不約而同的選擇了這樣的調(diào)性，還有就是考慮到大屏本身的體積問題，如果以明度較高的顏色作為背景色，很容易造成人眼的視覺疲勞和光污染，所以這也是為什么我們很少會(huì)看到可視化大屏用白色作為底色的原因
再次就是內(nèi)容上，可視化大屏比PC頁面信息承載的更多，但是頁面切換、交互操作更少，這是因?yàn)榭梢暬笃林饕繕?biāo)是對相關(guān)信息的全局展示，基本不存在PC頁面那樣的首屏、二屏的概念，用戶更多的使用場景是通過大屏的數(shù)據(jù)實(shí)時(shí)反饋來進(jìn)行決策，所以也很少會(huì)進(jìn)行頁面的跳轉(zhuǎn)、對某一個(gè)區(qū)域進(jìn)行編輯這樣的操作
最后就是在使用的時(shí)長上相對來說要比數(shù)據(jù)概覽頁面更長，這個(gè)也很好理解，尤其是在一些監(jiān)測、預(yù)防的重要部門中（如氣象監(jiān)測），很多時(shí)候都是24小時(shí)輪班來盯大屏的實(shí)時(shí)數(shù)據(jù)的，而很多PC頁面的數(shù)據(jù)概覽部分，用戶可能就是每天打開大致看一看然后就切換至別的頁面進(jìn)行其他工作了
從應(yīng)用場景的角度切入，可視化大屏的分類可以分為三種：
1.參觀視察類
2.展示宣傳類
3.辦公決策類
參觀視察類，其主要應(yīng)用場景是在企業(yè)內(nèi)部展廳，面對的用戶主要是領(lǐng)導(dǎo)、客戶、上級單位等
，這類大屏一般是不需要進(jìn)行交互的，其目的主要是盡可能完整清晰的，展示流程、業(yè)績、能力
展示宣傳類與參觀視察類其實(shí)比較類似，只是相對于參觀視察類更多的會(huì)在發(fā)布會(huì)、展臺(tái)展會(huì)等應(yīng)用場景出現(xiàn)，面向的的用戶主要是一些潛在客戶、媒體、同行等，像我們很熟悉的天貓雙十一展示大屏就屬于展示宣傳類大屏
其目的主要是用于展示公司、產(chǎn)品的品牌、價(jià)值、能力等屬性
以上兩者更多的偏向于一種純粹的對結(jié)果的呈現(xiàn)
相對于前兩者而言辦公決策類大屏的實(shí)現(xiàn)成本更高，使用的時(shí)效更長，定制化更深，工具屬性感更強(qiáng)
應(yīng)用場景上多用于交通指揮系統(tǒng)、天氣監(jiān)測預(yù)報(bào)系統(tǒng)，面向的用戶包括單位指戰(zhàn)領(lǐng)導(dǎo)、一線人員等，這樣的角色就決定了其具有較強(qiáng)的決策輔助價(jià)值
其目的主要用于讓用戶能夠通過使用大屏達(dá)到快速的指揮、調(diào)度、監(jiān)控、決策
最后給大家推薦一些數(shù)據(jù)可視化方面的工具，來助力我們平時(shí)的工作
以上是一些能夠更快速生成各種數(shù)據(jù)可視化圖表的工具，類型和樣式都十分豐富
以上是一些能夠在線生成可視化大屏模版的一些工具，有助于在日常工作中涉及數(shù)據(jù)可視化大屏的時(shí)候進(jìn)行參考
好了以上就是在B端設(shè)計(jì)中對于數(shù)據(jù)可視化尤其是PC端數(shù)據(jù)概覽的設(shè)計(jì)探討，當(dāng)然其實(shí)關(guān)于數(shù)據(jù)可視化的范圍還遠(yuǎn)遠(yuǎn)不止于此，感謝你能夠耐心看到最后，如果這對于你的工作有一點(diǎn)幫助那么備感榮幸
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：核糖bro
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
無論是在生活場景、工作場景還是學(xué)習(xí)場景中，視頻播放的普及度都已經(jīng)非常之高，為我們的多元化場景帶來便利。視頻功能在產(chǎn)品中的體現(xiàn)也已經(jīng)成為基礎(chǔ)功能，在設(shè)計(jì)層面的不斷優(yōu)化對于產(chǎn)品設(shè)計(jì)師來說至關(guān)重要。
本文特意結(jié)合目前比較熱門的產(chǎn)品，為大家梳理了涉及到視頻功能的產(chǎn)品在設(shè)計(jì)上面的解決方案。希望這些優(yōu)秀的設(shè)計(jì)思考可以帶給產(chǎn)品設(shè)計(jì)師更多的靈感，不斷探索和發(fā)現(xiàn)優(yōu)秀的設(shè)計(jì)解決方案。
影視類產(chǎn)品在不斷優(yōu)化用戶體驗(yàn)的時(shí)候，為了滿足用戶在一些特殊場景下的使用體驗(yàn)，推出了后臺(tái)播放的附加功能。比如用戶在步行中、騎行中，或者處于不便于觀看視頻的場景中，可以采用后臺(tái)播放。視頻將會(huì)以音頻的形式后臺(tái)播放，讓用戶從視聽體驗(yàn)轉(zhuǎn)為音頻體驗(yàn)，也是一種變相的解決方案。
思考：考慮到用戶的多場景需求，而不只是底層的需求。
很多用戶在睡覺前都會(huì)習(xí)慣刷一下視頻，有時(shí)候經(jīng)常會(huì)忘記關(guān)閉視頻就入睡了，第二天起來發(fā)現(xiàn)手機(jī)沒電啦！定時(shí)關(guān)閉功能的出現(xiàn)解決了用戶這一痛點(diǎn)，可以根據(jù)自己入睡的大致時(shí)間評估，設(shè)置定時(shí)關(guān)閉的時(shí)間段。人性化的功能設(shè)置在細(xì)微之處考慮到了用戶痛點(diǎn)，圖標(biāo)設(shè)計(jì)也是結(jié)合場景化表現(xiàn)，提高用戶對于產(chǎn)品的操作體驗(yàn)。
思考：幫助用戶培養(yǎng)習(xí)慣和解決用戶可能會(huì)出現(xiàn)的失誤，以情感化的方式拉近與用戶之間的親和力。
為了考慮到特殊人群的使用體驗(yàn)，讓視頻播放的效果符合不同用戶的視覺感知，色覺障礙優(yōu)化的功能設(shè)置人性化的呈現(xiàn)了解決方案。該功能針對色覺障礙用戶的臨床表現(xiàn)，優(yōu)化視頻色彩來提高畫面辨識度。
思考：考慮到特殊人群的使用體驗(yàn)，才能把產(chǎn)品的體驗(yàn)延伸到更多的場景。
隨著短視頻的盛行，利用空余時(shí)間刷視頻成為用戶消磨時(shí)間的方式之一。對于視頻上傳用戶來說，根據(jù)視頻拍攝的題材會(huì)選擇適合的比例，有些題材適合橫屏比例。
抖音作為短視頻平臺(tái)積累了龐大的用戶量，視頻的種類和播放比例也是豐富多樣。為了滿足用戶的播放需求，設(shè)計(jì)了“全屏觀看”的切換按鈕，方便用戶觀看寬屏視頻的需求。觀看體驗(yàn)的升級帶給用戶人性化的體驗(yàn)，也方便更多比例視頻的完美呈現(xiàn)。
思考：為用戶提供匹配當(dāng)前內(nèi)容的方式，而不要局限在內(nèi)容創(chuàng)造本身的匹配度上。
在刷短視頻的時(shí)候，刷到自己感興趣的內(nèi)容想要繼續(xù)看完續(xù)集，以往的做法是進(jìn)入作者主頁挨個(gè)尋找，視頻多了找起來很慢，用戶體驗(yàn)很差。短視頻平臺(tái)提供了“剛剛看過”的快速定位操作，點(diǎn)擊之后會(huì)直接定位到剛剛看過的視頻位置，方便用戶觀看續(xù)集。人性化的功能設(shè)置節(jié)省了用戶的操作成本，方便一些持續(xù)更新的視頻內(nèi)容更好的進(jìn)行觀看體驗(yàn)。
思考：節(jié)省用戶的時(shí)間就是提高自己的認(rèn)可度，培養(yǎng)用戶的依賴度。
在觀看一些兒歌、短片視頻合集的時(shí)候，右側(cè)的視頻目錄區(qū)采用名稱和視頻截圖預(yù)覽呈現(xiàn)，直觀的預(yù)覽效果增加點(diǎn)擊觀看的欲望。小朋友在刷兒歌視頻的時(shí)候，降低了學(xué)習(xí)成本，切換視頻也更加便利。
思考：降低用戶的理解成本，才能獲得用戶的青睞。
情感化的設(shè)計(jì)可以拉進(jìn)與用戶之間的親和力，體現(xiàn)產(chǎn)品人性化的一面。在特定的節(jié)假日或者特殊時(shí)間內(nèi)，為了增強(qiáng)氛圍，視頻播放暫停的設(shè)計(jì)上面設(shè)計(jì)師也投入了很多小心思。比如在跨年期間，雙擊屏幕暫停時(shí)會(huì)出現(xiàn)綻放的煙花效果和 2021 年的絢麗文字，氛圍的營造帶動(dòng)了跨年的氛圍，帶給用戶更加溫馨的感官體驗(yàn)。
思考：提高用戶體驗(yàn)的設(shè)計(jì)，就存在于細(xì)微之處的變化中。
有時(shí)候我們沒有明確的觀影目標(biāo)，打開一個(gè)視頻后還想繼續(xù)尋找更好的影片，又怕當(dāng)前影片有看點(diǎn)?！爱嬛挟嫛惫δ芙鉀Q了這個(gè)痛點(diǎn)，觀看視頻時(shí)點(diǎn)擊“畫中畫”當(dāng)前播放視頻縮小窗口顯示在側(cè)邊，用戶還可以繼續(xù)瀏覽新的內(nèi)容，篩選更多可能性。
思考：在用戶沒有明確目標(biāo)的時(shí)候，帶給用戶多種選擇性。
將影片投到電視觀看是家庭觀影的最佳選擇，讓觀影體驗(yàn)不局限于方寸之間的設(shè)備上，還能與家人朋友一起觀看影片。如果家里有小孩子需要看動(dòng)畫片之類的，除了投屏電視給他們觀看以外，自己還能繼續(xù)在 App 上觀看別的影片，雙向選擇提高了用戶的多場景需求體驗(yàn)。
思考：特殊場景下不僅需要滿足用戶的需求，也要考慮用戶可能會(huì)出現(xiàn)的周邊困境。
各種手勢的研究是產(chǎn)品設(shè)計(jì)師探索的方向，在刷短視頻的時(shí)候，向左滑動(dòng)除了進(jìn)入作者主頁以外，也有產(chǎn)品選擇曝光作者更多視頻作品。更多視頻的曝光不僅方便用戶觀看續(xù)集，還能通過更多視頻的觀看建立對作者的好感度，讓用戶充分的判斷是否需要關(guān)注作者。該交互形式給用戶提供了更多的判斷權(quán)，也提高了作者更多視頻作品的曝光度。
思考：通過交互形式的改變給用戶帶來便利，也給作者帶來曝光度，平臺(tái)也提高了使用體驗(yàn)，這是最穩(wěn)固的體驗(yàn)三角形。
在視頻播放中的手勢交互為用戶的操作提供了便利，短視頻中的單擊暫停/播放、雙擊點(diǎn)贊、長按浮層、左右滑動(dòng)也有對應(yīng)的內(nèi)容變化。目前運(yùn)用比較多的是單手操作的手勢，同樣的手勢在不同的產(chǎn)品中也激活不一樣的功能操作，比如影視 App 中通常是雙擊暫停/播放。作為產(chǎn)品設(shè)計(jì)師我們在交互設(shè)計(jì)的時(shí)候，手勢的變化在視頻功能中的運(yùn)用可以深入探索。
思考：手勢交互的運(yùn)用可以在原本的基礎(chǔ)上實(shí)現(xiàn)更多可能性。
在很多自媒體上大家經(jīng)常會(huì)看到很多影視片段的 GIF 動(dòng)畫，不僅增加了趣味性，也間接的傳播了視頻內(nèi)容。很多視頻類產(chǎn)品為了給用戶提供自動(dòng)生成短視頻和 GIF 動(dòng)畫的便利，提供了一鍵生成的操作，不僅可以選擇內(nèi)容區(qū)間，還可以自由控制時(shí)間。便利的操作降低了用戶的學(xué)習(xí)成本，還增加了用戶分享的趣味性。
思考：幫助用戶降低在外部平臺(tái)上分享內(nèi)容的制作成本，也是提高自身內(nèi)容被分享的概率。
截圖屬于手機(jī)系統(tǒng)自帶的功能，通過交互路徑操作或者設(shè)備按鍵快捷操作完成。而視頻播放器自帶的快照功能更便利，一鍵操作隨時(shí)定格畫面，還能快捷分享或者制作表情，非常的便利。
思考：只有把操作的時(shí)間和難度降低到臨界值，才能讓用戶逐漸形成依賴。
在觀看影片的時(shí)候，針對一些故事情節(jié)比較長的影片，我們可以選擇觀看指定角色的片段，或者選擇倍速播放等來實(shí)現(xiàn)個(gè)性化的觀影選擇。忙碌的生活讓我們少了一些觀影耐心，這也是短視頻備受喜歡的因素之一，片段的播放需求滿足了這部分用戶的需求。
思考：個(gè)性化的功能服務(wù)可以培養(yǎng)用戶對產(chǎn)品的忠誠度，這是形成種子用戶的關(guān)鍵。
由于移動(dòng)端設(shè)備的大小限制，如何在有限的屏幕內(nèi)進(jìn)行延展設(shè)計(jì)，是產(chǎn)品設(shè)計(jì)師探索的方向。分屏設(shè)計(jì)是在保持當(dāng)前視頻播放的前提下將屏幕劃分為更多模塊，不影響內(nèi)容進(jìn)展的情況下進(jìn)行更多功能操作。
比如愛奇藝觀看視頻時(shí)的夸夸功能操作，在操作功能的同時(shí)不影響用戶的觀影體驗(yàn)，增加用戶觀影時(shí)的互動(dòng)性。
思考：有限空間內(nèi)的更多可能性設(shè)計(jì)，是設(shè)計(jì)師不斷探索的過程，盡顯方寸之間的設(shè)計(jì)能力。
還有更多關(guān)于視頻功能在 UI 場景中的運(yùn)用案例，這里僅拋磚引玉的列舉了部分設(shè)計(jì)分析，更多分析我們下期繼續(xù)。
針對單一功能的體驗(yàn)總結(jié)，是分析和積累同一功能不同設(shè)計(jì)解決方案的形式，輔助增加設(shè)計(jì)需求中的效率發(fā)揮。產(chǎn)品體驗(yàn)日記總結(jié)的不同維度帶來不同的深度思考，希望這個(gè)維度的總結(jié)起到拋磚引玉的作用，帶給大家更多的思考方向和總結(jié)思路。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：優(yōu)設(shè) 作者：黑馬青年
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
需要對應(yīng)的js代碼和css樣式，大家可以通過www.htmldrive.net平臺(tái)下載，也可以在我文章的底部下載。對應(yīng)的資源如下，將資源引入頁面（別忘了JQuery）：
注意：jQuery最好使用1.3版本的，有些版本行不通，親測1.8版本不行
HTML代碼：
js代碼：
-
$(".test").imgbox({
-
'speedIn': 500,
-
'speedOut': 500,
-
'alignment': 'center',
-
'overlayShow': true,
-
'allowMultiple': false,
-
'autoScale': true
-
});
效果：
講解：
以上例子中，我們只用了一行js代碼“$(".test").imgbox();”，就實(shí)現(xiàn)了圖片彈出放大效果。這是因?yàn)樵趈query.imgbox.js中imgbox()函數(shù)有默認(rèn)的參數(shù)。當(dāng)我們調(diào)用函數(shù)但沒有傳遞參數(shù)時(shí)，會(huì)加載默認(rèn)的參數(shù)，顯示默認(rèn)效果和樣式。
如果覺得默認(rèn)樣式不合適，有兩種方式進(jìn)行修改：1、修改jquery.imgbox.js中imgbox()函數(shù)的默認(rèn)參數(shù)；2、調(diào)用imgbox()函數(shù)時(shí)，給參數(shù)賦值。
-
//在jquery.imgbox.js中，默認(rèn)參數(shù)如下，可以修改：
-
$.fn.imgbox.defaults = {
-
padding : 10,
-
alignment : 'auto', // auto OR center
-
allowMultiple : true,
-
autoScale : true,
-
speedIn : 500,
-
speedOut : 500,
-
easingIn : 'swing',
-
easingOut : 'swing',
-
zoomOpacity : false,
-
overlayShow : false,
-
overlayOpacity : 0.5,
-
hideOnOverlayClick : true,
-
hideOnContentClick : true
-
};
參數(shù)的含義：
padding：彈窗中圖片的邊框，0為沒有邊框。
alignment：彈窗的位置，“auto”或“center”，默認(rèn)情況下，它從縮略圖所在方向擴(kuò)展彈窗
allowMultiple：如果選true，允許多個(gè)彈出窗口同時(shí)打開
autoScale：如果為true，彈窗會(huì)自適應(yīng)窗口的大小
speedIn、speedOut:打開彈窗和關(guān)閉彈窗的速度，單位：毫秒
zoomOpacity：如果為true，會(huì)在彈窗縮放時(shí)改變透明度
overlayShow：如果為true，會(huì)有遮罩層（默認(rèn)為false；遮罩層的顏色在css中設(shè)置）
overlayOpacity:遮罩層的透明度（取值范圍0~1）
hideOnOverlayClick：當(dāng)點(diǎn)擊遮罩層時(shí)，關(guān)閉彈窗
hideOnContentClick：當(dāng)點(diǎn)擊圖片時(shí)，關(guān)閉彈窗
轉(zhuǎn)載自：https://blog.csdn.net/kangnan00/article/details/72518352
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：csdn
藍(lán)藍(lán)設(shè)計(jì)( www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.yvirxh.cn