隨著信息碎片化趨勢的加強，用戶的注意力也呈碎片化趨勢，本文主要分析了用戶注意力的類型以及如何合理吸引用戶注意力。
在界面設計中，我們常常能看到許多產品以各種形式搶奪用戶注意力，比如彈窗、通知提示等，亦或者通過色彩、大小等設計方式。大部分情況下，這些搶奪注意力的方式簡單粗暴，如果不能在適合的場景采用相應的設計手法，不僅達不到期望的目標，反而影響瀏覽體驗。 
在信息量極其龐大的當下，信息被割裂得更加碎片化，現在可以滿足用戶訴求的產品太多了，許多產品的拉新成本高得離譜，關鍵是拉新后，留存也是令人頭禿的問題。
每個企業都希望自己的產品可以獲取更多用戶流量、提升用戶活躍，自然就需要想方設法吸引用戶注意力。這是一個酒香也怕巷子深的時代，產品能滿足用戶需求、有著極致優秀的體驗還不夠，還需要讓用戶知道你的好，讓自身產品吸引更多目標用戶，是每個產品的愿望。
用戶的注意力也呈碎片化趨勢，很容易受到外界的影響，并且這種注意力分散的趨勢會越來越明顯?？赡苡脩羯弦幻朐诳垂娞?，下一秒就打開了抖音，然后看到微信消息，點進去回兩句...一天過去了，最后發現好像什么事都沒有干成。
這就是矛盾的地方，一方面產品希望留住用戶，另一方面用戶在各產品間反復橫跳，就是不在你的產品里面待著。
研究表明，用戶的注意力只能維持在 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 年的絢麗文字，氛圍的營造帶動了跨年的氛圍，帶給用戶更加溫馨的感官體驗。
思考：提高用戶體驗的設計，就存在于細微之處的變化中。
有時候我們沒有明確的觀影目標，打開一個視頻后還想繼續尋找更好的影片，又怕當前影片有看點。“畫中畫”功能解決了這個痛點，觀看視頻時點擊“畫中畫”當前播放視頻縮小窗口顯示在側邊，用戶還可以繼續瀏覽新的內容，篩選更多可能性。
思考：在用戶沒有明確目標的時候，帶給用戶多種選擇性。
將影片投到電視觀看是家庭觀影的最佳選擇，讓觀影體驗不局限于方寸之間的設備上，還能與家人朋友一起觀看影片。如果家里有小孩子需要看動畫片之類的，除了投屏電視給他們觀看以外，自己還能繼續在 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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
App界面設計對于設計師而言一直是盛久不衰的話題，尤其是如今越來越多的流量轉移到了移動平臺，使得更多的UI設計師涌入移動端領域，甚至出現了市場飽和的言論，對于從事移動端的UI設計師來講，充滿壓力的同時又面臨無限機遇，唯有不斷的學習才能滋生出源源不斷的設計靈感，站穩腳跟。
摹客想在這方面給各位設計師朋友做點什么，除了提供簡單好用的設計工具，我們也整理了非常多的優秀設計案例，希望可以對設計師朋友有借鑒意義。這將會是一個系列的專題，我們以月為單位，整理了國內外設計師的優秀APP界面設計案例，我們是搬運工，更是好設計的傳達者，希望你會喜歡。
接下來為大家分享精美的app UI設計案例：
--手機appUI設計--
更多精彩文章：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前兩天一個從事UI設計的朋友問了我一個這樣的問題：我從事UI設計一年多， UI設計上的一些基本知識差不多已經掌握，但是想更進一步的提升下自己，讓自己的作品更加有優秀，但不知道從哪里入手?胡老師有沒有什么好的建議。今天給大家分享十個UI設計套路！
1 盡量使用單列而不是多列布局
單列布局能夠讓對全局有更好的掌控。同時用戶也可以一目了然內容。而多列而已則會有分散用戶注意力的風險使你的主旨無法很好表達。最好的做法是用一個有邏輯的敘述來引導用戶并且在文末給出你的操作按鈕。
2 放出禮品往往更具誘惑力
給用戶一份精美小禮品這樣的友好舉動再好不過了。具體來講，送出禮品也是之有效的獲得客戶忠誠度的戰術，這是建立在人們互惠準則上的。而這樣做所帶來的好處也是顯而易見的，會讓你在往后的活動進展(不管是推銷，產品更新還是再次搞活動)中更加順利。
3 合并重復的功能而使界面簡潔
在整個產品開發期間我們會有意無意地創建很多模塊，版面或者元素，而它們的功能可能有些是重疊的。此種情況表明界面已經過度設計了。時刻警惕這些冗余的功能模塊，它無用且降低了電腦性能。此外，界面上模塊越多，用戶的學習成本就越大。所以請考慮重構你的界面使它足夠精簡。
4 客戶的評價好過自吹自擂
在獲得項目機會或提高項目轉化率時客戶的好評是一種極為有效的手段。當潛在客戶看到其他人對你的服務給予好評時，項目機會會大增。所以試著提供一些含金量高的證據證明這些好評是真實可信的。
5 頻繁展示你的主旨來加深印象
多次重復主旨口號這種方法適用于界面很長或者分頁的情況。首先你肯定不想滿屏刷出相同的信息，這樣會讓人生厭。但當頁面足夠長的時候這些重復就顯示自然多了并且也不顯得擁擠。所在在頁面頂部放一個按鈕然后在頁面底部再適當放個突出的按鈕的做法沒有什么不妥。這樣當用戶到達頁面底部在思考接下來該做什么的時候，你提供的按鈕就可以獲得一個潛在的合同或者即使用戶不需要你的服務這個按鈕也可以起到過濾的作用。
6 將選項與按鈕區分開來
諸如顏色，層次及模塊間的對比這些視覺上的設計可以很好地幫助用戶使用產品：他時刻知道當前所處的頁面以及可以轉到哪些頁面。要傳達這樣一個好的界面，你就需要將可點擊的元素(比如連接，按鈕)，可選擇的元素(比如單選多選框)以及普通的文字明顯區分開來。在下圖的例子中，我將點擊操作的元素設置為藍色，選中的當前元素為黑色。這樣適當的設計可以讓用戶很方面地在產品的各模塊間切換。但千萬不要把這三種元素設計得混亂不堪。
7 給出推薦而不是讓用戶來選擇
當展示許多項服務時，給出一個重磅的推薦項是個不錯的做法，盡管推薦的設置無法滿足所有用戶。這么做是有理論依據的，一些研究已經揭示了這么一種現象：當面臨的選擇越多時，用戶就越難做出決定。所以你可以高亮某個選項來幫助用戶做出選擇。
8 給出撤銷操作來代替確定操作
假設你剛點擊了一個連接或者按鈕，撤銷操作可以讓操作流暢自然，這也符合人類的本能。而每次操作都彈一個確定框則好像是在質問用戶你明白不明白這個操作會產生什么后果。我還是更習慣假設用戶每次操作都是正確的，其實只有極少數情況下才會發生誤操作。所以，為了防止誤操作而設計的確認窗口其實是不人性化的，用戶每次操作都需要進行毫無意義的確定。所以請考慮在你的產品里實現撤銷操作來增加用戶的操作友好度吧。
9 指出產品適用人群而不是做成全年齡
你是想把產品做成大眾化的呢還是有精確的適用人群?在產品定位上你需要更精確些。通過不斷了解目標客戶的需求及標準，你能把產品做得更好得到更多與客戶交流的機會，并且讓客戶覺得你很專業，在這方面是獨家提供的優質服務。把產品定位得精確的風險就是可能縮小了目標潛在客戶的范圍，也使自身變得不那么全能。但這種做得更專業的精神卻反過來會贏得信任，權威。
10 試著直接果斷而不要唯唯諾諾
你可以通過不確定而顫抖的聲音來表達傳遞自己的意思，當然也可以通過很自信的方式表達。如果你在界面中的表述用語多以問號結束，比如"也許"，"可能"，"感興趣?" 或者"想要試試么?"，那么你完全還可以把語氣變得更堅定一些。不過萬事無絕對，或許適當放松措詞讓用戶有自行思考的余地也是可以的。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
移動UI設計切圖是UI設計師最重要的設計輸出物，切圖資源輸出是否規范直接影響到工程師對設計效果的還原度。設計師的切圖輸出物是是體現一個設計師專業水準的重要標準，同時也是設計師表達自己對設計態度的最有力的語言。合適、精準的切圖可以最大限度的還原設計圖，起到事半功倍的效果。如何輸出具有全局把控和細節專注的高段位切圖，應該是所有設計師一直需要追求的能力。
設計切圖的原則
設計切圖輸出的目的是跟下游的工程師團隊協同工作，那么在團隊協作過程中首先應該保證切圖輸出能夠滿足工程師設計效果圖的高保真還原的需求。其次切圖輸出應該盡可能的降低工程師的開發工作量，避免因切圖輸出而導致的不必要的工作量。最后輸出的切圖應當盡可能的壓縮大小，以降低APP的總大小，提升用戶使用時的加載速度。所以切圖輸出應當做到切圖精準、便與協同和壓縮大小。
1.切圖資源尺寸必須為雙數
眾所周知智能手機的屏幕大小都是雙數值，比如iphone 7的屏幕分辨率是750*1334px。切圖資源尺寸必須為雙數是為了保證切圖資源在工程師開發時是高清顯示。因為1px是智能手機能夠識別的最小單位，換句話說就是1像素不能在智能手機被分為兩份。所以如果是單數切圖的話手機系統就會自動拉伸切圖從而導致切圖元素邊緣模糊，進而造成開發出來的APP界面效果與原設計效果差距甚遠。
2.圖標切圖輸出應根據標準尺寸輸出并且考慮到手機適配
在切圖資源輸出中圖標切圖輸出是至關重要的部分。因為在開發中由于各機型的屏幕分辨率不同，需要針對一些大屏機型進行適配。為了適配大分辨率手機圖標在切圖的時候需要輸出@2x和@3x的切圖，其中@2x的切圖可以滿足雙平臺大部分機型的適配要求，@3x是用來適配iphone手機的各種plus版本的手機(后邊會有文章專門講解關于適配的問題)。@3x是@2x尺寸的1.5倍，例如一個圖標切圖@2x尺寸是44px，那么@3x尺寸是66px。
3.為了提升APP使用速度，盡量降低圖片文件大小
在切圖資源輸出中圖標切圖輸出是很重要的部分，比如新手引導頁、啟動頁面、默認圖、廣告圖等。圖片切圖一般情況下文件大小都是相對較大，不利于用戶在使用app過程中加載頁面。因此圖片切圖要盡量壓縮圖片文件的大小。
4.可點擊部件應當注意其點擊區域不小于88px
44px的點擊區域數值是在iphone 3 (320×480px)普通顯示屏下制定出來的，在手機分辨率大幅提升的現在，這個數據自然要與時俱進。在iphone11 (750*1334px)的 顯示屏下44px點擊區域就變為了88px。但無論是320*480px尺寸下的44px還是在750*1334px尺寸下的88px，換算成物理尺寸后大致是在7mm-9mm之間。早在人機工程學的研究中曾得出結論，認為人類舒適的觸擊范圍需在7-9mm的大小。所以在ios官方的空間尺寸也經常出現88px的數值，比如菜單欄的高度便是88px。
5.可點擊部件要把相關狀態都切圖輸出，比如正常狀態、點擊狀態。
在切圖過程中不僅要輸出正常狀態的切圖，更要注意不要遺漏其他狀態的切圖。這個也是設計師經常會出現的失誤，比如在按鈕切圖的過程中可能會忽略點擊切圖的狀態。所以設計師在做設計圖是最好盡量把頁面中會出現的各種狀態展示出來，避免后期切圖的時候遺漏狀態。
切圖輸出類型
1.桌面圖標切圖輸出
app的桌面圖標會被運用在很多不同的地方展示，比如手機桌面、APP store、手機的設置列表，所以app桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對相應桌面圖標設計輸出尺寸也不盡相同，在輸出的時候要把雙平臺的這些尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可，手機系統會自動生成圓角效果。
2.系統圖標切圖輸出
一套圖適配雙平臺：
ios平臺和安卓平臺公用44*44px切圖素材，即可實現一套切圖適配兩個平臺的開發。
適配大屏幕：
為了適配iphone 6plus、iphone 7plus單獨切一套比原有44*44px切圖大1.5倍的切圖，即66*66px大小的切圖。(UI設計的適配問題會在后邊單獨的文章中詳細講解)
3.圖片類切圖輸出
圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的大小尺寸以便于工程師開發使用。另外一般這些切圖的文件較大在切圖過程中需要控制切圖文件的大小。(后邊文章會詳細講解如何壓縮切圖大小的方法)
全屏切圖類
局部切圖類
4.可拉伸元素切圖輸出
可拉伸元素一般是指按鈕、輸入框等切圖過程中可以對切圖進行瘦身壓縮的元素。這些元素通過瘦身壓縮可以極大地見效圖片的大小提升用戶在使用app中的加載速度。在ios中這種切圖方式叫做平鋪切圖，在安卓中這種切圖方式叫做點九切圖法。
橫向拉伸切圖
豎向拉伸切圖
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近，我花了一些時間觀察UI設計的發展方向。我偶然發現了一些非常有創意的趨勢，我認為這些趨勢將在不久的將來將重新塑造UI設計。
以下是根據我的觀察得出的10種趨勢：
新形態在不斷發展，我想它會一直存在（無論你喜歡與否）。它最初的形式并沒有持續很長時間，但是它正在朝著更加復雜和易于訪問的方向發展。這幾乎就像擬物象，但有一種新鮮、現代、更美學的氛圍。
漸變無處不在！實際上，我在背景和UI元素（例如按鈕，卡片和圖形）上看到了很多。
混合兩種以上的顏色以創建一個彩色模糊的背景也是一件事！
無論是作為主要的背景或主題，還是只是讓設計看起來更有趣的一個細節——幾何元素越來越受到關注。通常將它們混合在一起以創建馬賽克——結果看起來非常酷！
不得不說我喜歡這種趨勢，我見過許多令人驚艷的、輕量級的、美觀的設計，其具有非常精致、明亮柔和的配色方案。
它使設計看起來非?，F代、沒有干擾、清新而令人愉悅，其中內容扮演主要角色，其他一切只是一個微妙的背景。
插圖仍然很流行，不同的樣式、配色方案、或多或少的抽象，所以它們符合產品的特點。不僅是平面的，而且還模仿了3D的外觀。我相信這是一個很好的改變，在地球上的每一個數字項目使用了這么多年的庫存圖片之后，我在這里給出了一些有關如何創建簡單插圖的提示：
用于背景和不同的UI元素，它們使界面看起來更“有機”和好玩，我認為這是一件好事。使用鋼筆工具編輯最簡單的形狀（正方形，橢圓形），使用不同的邊框半徑，嘗試使用不同的顏色/漸變，你可能會得到一個非常有趣的結果。在這里嗎，我們或許可以嘗試一下這個簡單卻神奇的工具Blobmaker。
暗模式是界面的顏色反轉版本，以使其在晚上更易于訪問。由于我是典型的夜貓子，因此我經常在晚上使用深色模式。創建暗模式時，記住要在不同元素和版式之間保持正確的對比。
不僅用于Dribbble shots，而且還用作以非標準方式在網站上呈現不同內容的方式。它使內容看起來更有趣和吸引眼球。那么，如何快速實現這一效果呢？首先，對0度的角度拼貼元素。把他們分成一組。然后，更改組角度（從30°到50°），瞧！這樣，你就不必手動更改每個元素的角度了。
這是另一個我最喜歡的趨勢，柔和的陰影使UI看起來更深入。這種效果通常非常微妙，但在美學上令人愉悅。一般來說，陰影使某些UI元素變得“可單擊”，并且它們有助于區分內容之間的層次結構。你可以在此處了解如何進行操作：
我從不喜歡比較薄的字體（在iOS7時代），所以我很高興看到這種趨勢消失了?，F在，我正在觀察使用更粗、更簡單的形式（幾乎為方形）的可讀字體。它們使界面看起來更加現代和優美。如果你要搜索類似的產品，可以試試Poppins、Montserrat（免費）、Gilroy、Sofia Pro、Proxima Nova（付費）。
來源：Diana Malewicz：10 Newest and promising UI design trends
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
uni-app 代碼
選擇圖片代碼（uniapp 代碼示例）
uni.chooseImage({ success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; } });
tempFilePaths 為選擇圖片res 里面的其中一個對象
注意：uniapp 上傳圖片不能上傳選中的File 文件（tempFiles這個數組的東西不能夠上傳） 要上傳（tempFilePaths）讀取圖片后數組的 此數組可以用來瀏覽，上傳
選擇圖片加上傳圖片代碼
*多圖上傳注意 files 數組 對象不能直接傳 tempFilePaths這個數組 必須要更改
let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; }
uni.chooseImage({ count: 9, success: (res) => { //上傳文件的臨時路徑 const tempFilePaths = res.tempFilePaths; let img = []; for (let i = 0; i < tempFilePaths.length; i++) { let obj = new Object(); obj.name = `file` + i; obj.uri = tempFilePaths[i]; img.push(obj); obj = null; } const tempFilePaths = res.tempFilePaths; console.log(res); uni.uploadFile({ url:'http://192.168.88.15:8978/Mailbox/'+that.api.pudatefiles, filePath: tempFilePaths[0], files: img , name: 'file', success: (uploadFileRes) => { console.log(uploadFileRes) uni.hideLoading(); if (back.status == "0") { console.log(that.host + back.filepath[0]) that.editorCtx.insertImage({ src: that.host + back.filepath[0], alt: '圖像', success: function() {} }) } else { console.log(back.msg); } }, fail: () => { uni.hideLoading(); console.log('圖片上傳失敗，請聯系開發'); } }); } })
var express = require("express"); //Express框架 const multer = require("multer"); // multer中間件上傳圖片 接收文件post數據 // 設置文件上傳的地方 let storage = multer.diskStorage({ destination: (req: any, file: any, cb: Function) => { cb(null, "./StaticResource/pudate/"); }, filename: (req: any, file: any, cb: Function) => { cb(null, Date.now() + "-" + file.originalname); }, }); let multerObj = multer({ dest: "./StaticResource/pudate/", storage }); //存放上傳的文件 app.use(multerObj.any()); // 存放所有的類型文件 //設置跨域訪問 app.all("*", (req: any, res: any, next: Function) => { res.header("Access-Control-Allow-Origin", "*"); res.header( "Access-Control-Allow-Headers", "Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild" ); res.header( "Access-Control-Allow-Headers", "content-type,SelfSummerHeader,Authorization" ); //自定義請求頭 res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By", "3.2.1"); res.header("Content-Type", "application/json;charset=UTF-8"); res.header("Content-Type", "text/xml"); if (req.method === "OPTIONS" || req.url === "/favicon.ico") { // 攔截請求 return res.send(); } next(); }); app.listen(COMPort, (err: Error) => { if (err) { console.log('啟動錯誤', err) } console.table({ 端口: COMPort, IP: systemOs.IP(), 服務地址: `http://${systemOs.IP()}:${COMPort}/Mailbox`, 靜態資源: `IP端口地址加上文件名`, 描述: `Node服務已啟動成功`, "swagger-ui": `http://${systemOs.IP()}:${COMPort}/api (ts代碼轉為js代碼可以正常使用)`, }); // 掛載自定義中間件 app.use(middleware_router.bodyData); }); router.all( "/pudatefiles", (req: { files: { path: string }[] }, res: any, next: any) => { let data: Array<string> = []; console.log(req.files); req.files?.forEach((item: any) => { let url = item?.path.replace(/\\/g, "/"); data.push(url?.replace("StaticResource", "")); }); res.sendSuccess(data, "上傳成功"); } );
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
本文出自 “旋木的技術博客” 博客，請務必保留此出處http://mrxiong.blog.51cto.com/287318/1651098
一.數值類型
Mysql支持所有標準SQL中的數值類型，其中包括嚴格數據類型(INTEGER,SMALLINT,DECIMAL,NUMBERIC)，以及近似數值數據類型(FLOAT,REAL,DOUBLE PRESISION),并在此基礎上進行擴展。
擴展后增加了TINYINT,MEDIUMINT,BIGINT這3種長度不同的整形，并增加了BIT類型，用來存放位數據。
整數類型 字節 范圍（有符號） 范圍（無符號） 用途
TINYINT 1字節 (-128，127) (0，255) 極小整數值
SMALLINT 2字節 (-32 768，32 767) (0，65 535) 小整數值
MEDIUMINT 3字節 (-8 388 608，8 388 607) (0，16 777 215) 中整數值
INT或INTEGER 4字節 (-2 147 483 648，2 147 483 647) (0，4 294 967 295) 大整數值
BIGINT 8字節 (-9 233 372 036 854 775 808，9 223 372 036 854 775 807) (0，18 446 744 073 709 551 615) 極大整數值
FLOAT 4字節 (-3.402 823 466 E+38，1.175 494 351 E-38)，0，(1.175 494 351 E-38，3.402 823 466 351 E+38) 0，(1.175 494 351 E-38，3.402 823 466 E+38) 單精度浮點數值
DOUBLE 8字節 (1.797 693 134 862 315 7 E+308，2.225 073 858 507 201 4 E-308)，0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 0，(2.225 073 858 507 201 4 E-308，1.797 693 134 862 315 7 E+308) 雙精度浮點數值
DECIMAL 對DECIMAL(M,D) ，如果M>D，為M+2否則為D+2 依賴于M和D的值 依賴于M和D的值 小數值
INT 類型:
在 MySQL 中支持的 5 個主要整數類型是 TINYINT，SMALLINT，MEDIUMINT，INT 和 BIGINT。這些類型在很大程度上是相同的，只有它們存儲的值的大小是不相同的。
MySQL 以一個可選的顯示寬度指示器的形式對 SQL 標準進行擴展，這樣當從數據庫檢索一個值時，可以把這個值加長到指定的長度。例如，指定一個字段的類型為 INT(6)，
就可以保證所包含數字少于 6 個的值從數據庫中檢索出來時能夠自動地用空格填充。需要注意的是，使用一個寬度指示器不會影響字段的大小和它可以存儲的值的范圍。
萬一我們需要對一個字段存儲一個超出許可范圍的數字，MySQL 會根據允許范圍最接近它的一端截短后再進行存儲。還有一個比較特別的地方是，
MySQL 會在不合規定的值插入表前自動修改為 0。
UNSIGNED 修飾符規定字段只保存正值。因為不需要保存數字的正、負符號，可以在儲時節約一個“位”的空間。從而增大這個字段可以存儲的值的范圍。
ZEROFILL 修飾符規定 0（不是空格）可以用來真補輸出的值。使用這個修飾符可以阻止 MySQL 數據庫存儲負值。
FLOAT、DOUBLE 和 DECIMAL 類型
MySQL 支持的三個浮點類型是 FLOAT、DOUBLE 和 DECIMAL 類型。FLOAT 數值類型用于表示單精度浮點數值，而 DOUBLE 數值類型用于表示雙精度浮點數值。
與整數一樣，這些類型也帶有附加參數：一個顯示寬度指示器和一個小數點指示器。比如語句 FLOAT(7,3) 規定顯示的值不會超過 7 位數字，小數點后面帶有 3 位數字。
對于小數點后面的位數超過允許范圍的值，MySQL 會自動將它四舍五入為最接近它的值，再插入它。
DECIMAL 數據類型用于精度要求非常高的計算中，這種類型允許指定數值的精度和計數方法作為選擇參數。精度在這里指為這個值保存的有效數字的總個數，
而計數方法表示小數點后數字的位數。比如語句 DECIMAL(7,3) 規定了存儲的值不會超過 7 位數字，并且小數點后不超過 3 位。
忽略 DECIMAL 數據類型的精度和計數方法修飾符將會使 MySQL 數據庫把所有標識為這個數據類型的字段精度設置為 10，計算方法設置為 0。
UNSIGNED 和 ZEROFILL 修飾符也可以被 FLOAT、DOUBLE 和 DECIMAL 數據類型使用。并且效果與 INT 數據類型相同。
二.字符串類型
MySQL 提供了8個基本的字符串類型,分別:CHAR、VARCHAR、BINARY、VARBINARY、BLOB、TEXT、ENUM 各SET等多種字符串類型。
可以存儲的范圍從簡單的一個字符到巨大的文本塊或二進制字符串數據。
字符串類型 字節大小 描述及存儲需求
CHAR 0-255字節 定長字符串
VARCHAR 0-255字節 變長字符串
TINYBLOB 0-255字節 不超過 255 個字符的二進制字符串
TINYTEXT 0-255字節 短文本字符串
BLOB 0-65535字節 二進制形式的長文本數據
TEXT 0-65535字節 長文本數據
MEDIUMBLOB 0-16 777 215字節 二進制形式的中等長度文本數據
MEDIUMTEXT 0-16 777 215字節 中等長度文本數據
LOGNGBLOB 0-4 294 967 295字節 二進制形式的極大文本數據
LONGTEXT 0-4 294 967 295字節 極大文本數據
VARBINARY(M) 允許長度0-M個字節的定長字節符串，值的長度+1個字節
BINARY(M) M 允許長度0-M個字節的定長字節符串
CHAR 和 VARCHAR 類型
CHAR 類型用于定長字符串，并且必須在圓括號內用一個大小修飾符來定義。這個大小修飾符的范圍從 0-255。比指定長度大的值將被截短，而比指定長度小的值將會用空格作填補。
CHAR 類型可以使用 BINARY 修飾符。當用于比較運算時，這個修飾符使 CHAR 以二進制方式參于運算，而不是以傳統的區分大小寫的方式。
CHAR 類型的一個變體是 VARCHAR 類型。它是一種可變長度的字符串類型，并且也必須帶有一個范圍在 0-255 之間的指示器。CHAR 和 VARCHGAR 不同之處在于 MYSQL 數據庫處理
這個指示器的方式：CHAR 把這個大小視為值的大小，不長度不足的情況下就用空格補足。而 VARCHAR 類型把它視為最大值并且只使用存儲字符串實際需要的長度
(增加一個額外字節來存儲字符串本身的長度)來存儲值。所以短于指示器長度的 VARCHAR 類型不會被空格填補，但長于指示器的值仍然會被截短。
因為 VARCHAR 類型可以根據實際內容動態改變存儲值的長度，所以在不能確定字段需要多少字符時使用 VARCHAR 類型可以大大地節約磁盤空間、提高存儲效率。
VARCHAR 類型在使用 BINARY 修飾符時與 CHAR 類型完全相同。
TEXT 和 BLOB 類型
對于字段長度要求超過 255 個的情況下，MySQL 提供了 TEXT 和 BLOB 兩種類型。根據存儲數據的大小，它們都有不同的子類型。這些大型的數據用于存儲文本塊或圖像、
聲音文件等二進制數據類型。
TEXT 和 BLOB 類型在分類和比較上存在區別。BLOB 類型區分大小寫，而 TEXT 不區分大小寫。大小修飾符不用于各種 BLOB 和 TEXT 子類型。
比指定類型支持的最大范圍大的值將被自動截短。
三.日期和時間類型
在處理日期和時間類型的值時，MySQL 帶有 5 個不同的數據類型可供選擇。它們可以被分成簡單的日期、時間類型，和混合日期、時間類型。
根據要求的精度，子類型在每個分類型中都可以使用，并且 MySQL 帶有內置功能可以把多樣化的輸入格式變為一個標準格式。
類型 大小(字節) 范圍 格式 用途
DATE 4 1000-01-01/9999-12-31 YYYY-MM-DD 日期值
TIME 3 '-838:59:59'/'838:59:59' HH:MM:SS 時間值或持續時間
YEAR 1 1901/2155 YYYY 年份值
DATETIME 8 1000-01-01 00:00:00/9999-12-31 23:59:59 YYYY-MM-DD HH:MM:SS 混合日期和時間值
TIMESTAMP 4 1970-01-01 00:00:00/2037 年某時 YYYYMMDD HHMMSS 混合日期和時間值，時間戳
DATE、TIME 和 TEAR 類型
MySQL 用 DATE 和 YEAR 類型存儲簡單的日期值，使用 TIME 類型存儲時間值。這些類型可以描述為字符串或不帶分隔符的整數序列。如果描述為字符串,
DATE 類型的值應該使用連字號作為分隔符分開，而 TIME 類型的值應該使用冒號作為分隔符分開。
需要注意的是，沒有冒號分隔符的 TIME 類型值，將會被 MySQL 理解為持續的時間，而不是時間戳。
MySQL 還對日期的年份中的兩個數字的值，或是 SQL 語句中為 TEAR 類型輸入的兩個數字進行最大限度的通譯。因為所有 TEAR 類型的值必須用 4 個數字存儲。
MySQL 試圖將 2 個數字的年份轉換為 4 個數字的值。把在 00-69 范圍內的值轉換到 2000-2069 范圍內。把 70-99 范圍內的值轉換到 1970-1979 之內。
如果 MySQL 自動轉換后的值并不符合我們的需要，請輸入 4 個數字表示的年份。
DATETIME 和 TIMESTAMP 類型
除了日期和時間數據類型，MySQL 還支持 DATETIME 和 TIMESTAMP 這兩種混合類型。它們可以把日期和時間作為單個的值進行存儲。
這兩種類型通常用于自動存儲包含當前日期和時間的時間戳，并可在需要執行大量數據庫事務和需要建立一個調試和審查用途的審計跟蹤的應用程序中發揮良好作用。
如果我們對 TIMESTAMP 類型的字段沒有明確賦值，或是被賦與了 null 值。MySQL 會自動使用系統當前的日期和時間來填充它。
復合類型
MySQL 還支持兩種復合數據類型 ENUM 和 SET，它們擴展了 SQL 規范。雖然這些類型在技術上是字符串類型，但是可以被視為不同的數據類型。
一個 ENUM 類型只允許從一個集合中取得一個值；而 SET 類型允許從一個集合中取得任意多個值。
ENUM 類型
ENUM 類型因為只允許在集合中取得一個值，有點類似于單選項。在處理相互排拆的數據時容易讓人理解，比如人類的性別。ENUM 類型字段可以從集合中取得一個值或使用 null 值，
除此之外的輸入將會使 MySQL 在這個字段中插入一個空字符串。另外如果插入值的大小寫與集合中值的大小寫不匹配，MySQL 會自動使用插入值的大小寫轉換成與集合中大小寫一致的值。
ENUM 類型在系統內部可以存儲為數字，并且從 1 開始用數字做索引。一個 ENUM 類型最多可以包含 65536 個元素，其中一個元素被 MySQL 保留，用來存儲錯誤信息，
這個錯誤值用索引 0 或者一個空字符串表示。
MySQL 認為 ENUM 類型集合中出現的值是合法輸入，除此之外其它任何輸入都將失敗。這說明通過搜索包含空字符串或對應數字索引為 0 的行就可以很容易地找到錯誤記錄的位置。
SET 類型
SET 類型與 ENUM 類型相似但不相同。SET 類型可以從預定義的集合中取得任意數量的值。并且與 ENUM 類型相同的是任何試圖在 SET 類型字段中插入非預定義的值都會使
MySQL 插入一個空字符串。如果插入一個即有合法的元素又有非法的元素的記錄，MySQL 將會保留合法的元素，除去非法的元素。
一個 SET 類型最多可以包含 64 項元素。在 SET 元素中值被存儲為一個分離的“位”序列，這些“位”表示與它相對應的元素?！拔弧笔莿摻ㄓ行蛟丶系囊环N簡單而有效的方式。
并且它還去除了重復的元素，所以 SET 類型中不可能包含兩個相同的元素。
希望從 SET 類型字段中找出非法的記錄只需查找包含空字符串或二進制值為 0 的行。
通過對每種數據類型的用途，物理存儲，表示范圍等有一個概要的了解。這樣在面對具體應用時，就可以根據相應的特來來選擇合適的數據類型，使得我們能夠爭取在滿足應用的基礎上，
用較小的存儲代價換來較高的數據庫性能。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
文章來源：csdn
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn