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