今天帶來的是《交互設(shè)計沉思錄》第一部分的第二章「管理復(fù)雜性」。
主要講述的是交互設(shè)計師是如何理解&組織所獲取到的數(shù)字、文字數(shù)據(jù)。
通過這些步驟&方法能夠幫助交互設(shè)計師更加清楚信息間的關(guān)系，建立很強的心智圖景。
其間也穿插了很多職能相關(guān)部分的對比，如「交互設(shè)計師與信息架構(gòu)師」「交互設(shè)計師與界面設(shè)計師」「交互設(shè)計師與電子工程師」。
作者：Viola_1241 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
莫奈是一款主要服務(wù)京東內(nèi)部用戶的數(shù)據(jù)可視化平臺，它以容器的形式將京東城市各種與智慧城市建設(shè)及運營相關(guān)的能力聚合，并以可視化的形式面向客戶呈現(xiàn)。
作為京東莫奈的設(shè)計負責(zé)人，過去三年一直負責(zé)莫奈可視化平臺的用戶體驗設(shè)計工作，由于本人日常設(shè)計主要以智慧城市、數(shù)據(jù)可視化大屏為主，所以我即是莫奈的設(shè)計負責(zé)人也是莫奈的深度使用者或者說專家用戶。在長期使用莫奈的過程中，本人梳理了大量與視覺、體驗相關(guān)的問題，這些問題，部分在產(chǎn)品日常迭代中得到了優(yōu)化，但是也有相當一部分解決起來具有一定的難度和成本；與此同時，作為用戶體驗設(shè)計師，我日常與業(yè)務(wù)方、客戶方以及用戶接觸緊密，所以在與大量用戶溝通后，也從用戶側(cè)收集了不少使用體驗相關(guān)的問題。我對以上兩個渠道的問題整體梳理匯總，并與產(chǎn)品側(cè)討論溝通后，大家認為這些問題比較嚴重的影響了用戶使用莫奈的效率，降低了莫奈對業(yè)務(wù)側(cè)賦能的質(zhì)量，提高了客戶使用莫奈的成本。所以我們必須規(guī)劃出一個產(chǎn)品迭代的周期，針對莫奈體驗問題，進行一次密集的優(yōu)化和革新，這便是本次莫奈體驗升級改版的基礎(chǔ)背景和原因。
本篇文章寫作的主要目的，是想將本人在這次改版設(shè)計中用到的一些方法、流程和經(jīng)驗與大家做次交流和分享，希望能為同行在類似的改版設(shè)計中提供一定的借鑒和參考。
實際上，在梳理出整個體驗升級流程之前，通過與產(chǎn)品負責(zé)人的多次溝通，我們事實上已經(jīng)對體驗升級這個需求達成了共識，而流程圖解決的是做什么、怎么做的問題。
下圖展示的這套體驗升級流程較為通用，大多數(shù)產(chǎn)品的體驗升級都可參考下面的流程執(zhí)行。
這套流程的主要作用有兩個，一是通過它可以更直觀的跟產(chǎn)品負責(zé)人、開發(fā)負責(zé)人等關(guān)鍵角色溝通，讓大家對體驗升級這件事兒有整體且全面的了解，方便大家評估工時、預(yù)估成本和安排排期；另一方面也能夠使我自己的工作推進的更加有節(jié)奏有條理，避免工作內(nèi)容長時間停滯在某一個環(huán)節(jié)而影響整體進度。
基于STAR法則，背景概況部分向大家介紹莫奈體驗升級的必要性。在企業(yè)中，想要推動一個需求順利執(zhí)行，那一定是需求上下游以及相關(guān)方的利益都得到了體現(xiàn)和滿足。莫奈此次升級，從體驗設(shè)計師角度來講，我們作為用戶的代言人，在了解到用戶大量反饋和建議后，有責(zé)任將用戶的聲音轉(zhuǎn)化為需求，并推進落地為產(chǎn)品的一部分；從產(chǎn)品團隊來講，莫奈想要不斷發(fā)展，持續(xù)為客戶和業(yè)務(wù)方帶來顯著的效率提升、明顯的成本下降，也必須對過去老舊的產(chǎn)品架構(gòu)做一次深度的革新和優(yōu)化；從前端工程師、研發(fā)同學(xué)的角度看，以往不合理的底層代碼設(shè)計，使產(chǎn)品在性能、穩(wěn)定性等方面留有大量隱患，因此在日常迭代工作之外，研發(fā)同學(xué)總要消耗部分精力去維護那部分不穩(wěn)定的存在，從而導(dǎo)致研發(fā)同學(xué)人效比低、開發(fā)體驗差；從上級Leader來看，公司的核心經(jīng)營理念是“成本、效率、體驗”，但成本的降低、效率的提升、體驗的優(yōu)化都依賴于強悍的技術(shù)和優(yōu)秀的產(chǎn)品，而莫奈此次體驗升級正是踐行公司核心理念的有效嘗試，綜上，此次體驗升級于多方有益，符合部門整體利益，所以大家很快達成共識。
通常我們說用戶體驗時，用戶是一個群體的概念，而這個群體如上圖所示，可以被進一步細分為多種角色，理想情況是每一類角色的體驗都被滿足，但現(xiàn)實執(zhí)行中我們必須要有策略和取舍。所以要想產(chǎn)品有好的體驗，首先我們要知道用戶群體中不同角色對產(chǎn)品的使用情況如何，并找到對產(chǎn)品依賴度強使用頻次高的那部分用戶和場景，然后針對他們以及他們使用的場景做高優(yōu)先級的優(yōu)化。
從莫奈典型用戶使用場景可以歸納出：
首先，莫奈的主要使用者為各個項目的產(chǎn)品經(jīng)理及開發(fā)工程師，其中設(shè)計師也有相當大的使用強度，這三類用戶他們直接使用莫奈，并把莫奈作為解決數(shù)據(jù)可視化場景構(gòu)建相關(guān)需求的主要工具和方案，所以，以上三類用戶，我們將其稱之為莫奈的核心用戶。核心用戶使用莫奈產(chǎn)出的作品，經(jīng)由上下游同事傳達和部署給業(yè)務(wù)方及客戶后，莫奈的商業(yè)價值便得以體現(xiàn)。
其次，每類用戶使用莫奈不同功能模塊的頻次不同。從使用場景中我們也發(fā)現(xiàn)，莫奈的使用具有上下游的關(guān)聯(lián)性，核心用戶處于流程的下游，中上游的用戶雖不是核心用戶，但他們因為更接近客戶和業(yè)務(wù)，往往具有比核心用戶更高的決策權(quán)。因此我們優(yōu)先讓核心用戶體驗提升并不意味著放棄上游的體驗，而是資源有限的情況下我們的工作必須有取舍有重點。實際上我們是通過建立核心用戶的聲量和口碑來向上游用戶傳達莫奈的價值和特色，通過核心用戶使用莫奈交付的結(jié)果來證明莫奈的可靠。與此同時，我們也通過對內(nèi)外的宣講和培訓(xùn)，持續(xù)接收上游用戶的反饋，并在迭代中持續(xù)優(yōu)化。
知道了核心用戶是誰，那么核心用戶的體驗痛點是什么呢？
雖然在日常的交流溝通中我們已經(jīng)獲取了不少用戶反饋、收集了相當?shù)膯栴}建議，但作為體驗升級的系統(tǒng)性工作，為了更全面的了解用戶體驗痛點，我們還是設(shè)計了一次完整的用戶調(diào)研活動。本次調(diào)研主要采用線上問卷調(diào)研、線下訪談+用戶行為觀察的方式進行。線上問卷采用京東良研問卷系統(tǒng)，除了面向核心用戶推送，我們還面向莫奈主流用戶及邊緣用戶推送了問卷內(nèi)容，因此，問卷調(diào)研整體覆蓋較為全面。線下訪談除了邀請部分核心用戶，我們也從問卷系統(tǒng)中篩選了部分反饋問題多且愿意參加線下訪談的用戶參與。線上線下均包含內(nèi)外部用戶，以期獲得更加客觀真實的反饋。
用戶調(diào)研的核心目標是充分收集用戶反饋，并將反饋結(jié)果量化及系統(tǒng)化，量化后的結(jié)果可做為設(shè)計側(cè)推動產(chǎn)品執(zhí)行體驗優(yōu)化的關(guān)鍵依據(jù)，也可以作為后續(xù)驗證優(yōu)化結(jié)果的對照項。
本次問卷設(shè)計我們參考了PSSUQ整體可用性量表，并結(jié)合本次調(diào)研目標做了部分調(diào)整。
PSSUQ整體可用性量表可以從系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個方面將體驗結(jié)果量化，然后通過與行業(yè)基本經(jīng)驗值比較，既可以知道用戶對莫奈在以上三項的滿意度，也可對莫奈當前整體體驗結(jié)果有一個全局的概況性評價。同時根據(jù)三個方向的評分也可以更細致的指導(dǎo)后續(xù)的設(shè)計優(yōu)化方向，為設(shè)計決策提供更多科學(xué)可信的依據(jù)。
PSSUQ整體可用性量表作為一個通用模版，其內(nèi)容比較固定，為避免多次打擾用戶，提升問卷調(diào)研效率，我在PSSUQ的基礎(chǔ)上添加了少量關(guān)鍵信息甄別、用戶反饋積極性識別類問題，從而使問卷內(nèi)容更加符合本次調(diào)研目標。
問卷設(shè)計好之后，接下來就是問卷發(fā)放以及結(jié)果分析了。
PSSUQ量表內(nèi)每個問題均有8個選項，【1-7】是對該項描述的認可程度，得分越低代表用戶對該項描述越認可；【NA】代表用戶對該項描述無法評價。本次調(diào)研通過京東良研發(fā)放線上問卷100份，共收到有效問卷反饋87份（大于PSSUQ所需的最少樣本數(shù)量：20），說明問卷結(jié)果具有較好的可信度，其結(jié)果值得進一步研究。
通過整理和統(tǒng)計問卷數(shù)據(jù)，可以得出以下結(jié)論：
1、內(nèi)外部用戶在系統(tǒng)易用性、信息質(zhì)量、界面質(zhì)量三個維度對莫奈均不滿意
2、對比行業(yè)經(jīng)驗值（均值），莫奈系統(tǒng)總體體驗質(zhì)量與行業(yè)同類產(chǎn)品存在明顯差距
3、莫奈用戶群體整體積極性較高，具有較強的溝通及反饋意愿
整體評分結(jié)果與日常同相關(guān)同學(xué)的溝通結(jié)果一致，以上評分結(jié)果也反映出此次體驗升級的緊迫性，作為由設(shè)計驅(qū)動的改版設(shè)計，設(shè)計側(cè)面臨較大壓力。
在設(shè)計問卷的環(huán)節(jié)我也提到過我們的問卷在PSSUQ量表的基礎(chǔ)上針對本次調(diào)研目標做了部分調(diào)整和優(yōu)化，而線上問卷最后兩個選項以問答題的形式向被調(diào)研用戶提供了對莫奈各方面建議的反饋渠道，通過問答項我們收集到用戶反饋的各類問題80多條，我們采用親和圖對這些反饋做整理，親和圖顧名思義，它可以使具有類似特征和關(guān)聯(lián)屬性的問題更加臨近，從而將零散的問題被歸類，方便從雜亂的問題中找到規(guī)律，并通過比較不同類型問題的占比，更直觀的了解用戶反饋的問題主要集中在那些方向。
如下圖所示，產(chǎn)品的反應(yīng)速度及穩(wěn)定性、模板和組件豐富度是用戶反饋問題最集中的兩項，前者影響用戶最基礎(chǔ)的使用體驗，后者決定產(chǎn)品能多大程度上便捷的服務(wù)用戶。良好的穩(wěn)定性和反應(yīng)速度可以讓用戶專注于任務(wù)本身，而使用模板能最快速的產(chǎn)出作品，降低新手的使用門檻，豐富的組件能夠滿足用戶在各類復(fù)雜場景下的業(yè)務(wù)需求，減少組件二開成本，提高交付效率。針對這兩個大的問題點，首先，對于那些能夠在當前產(chǎn)品日常迭代中優(yōu)化的點，我整理后會以需求的方式向產(chǎn)品團隊提出，并在日常迭代中逐步優(yōu)化；然后，對于那些需要“傷筋動骨”做底層優(yōu)化以及長期運營沉淀才能有效改善的問題，我們會進一步向用戶收集和完善相關(guān)信息，并將相關(guān)問題梳理到本次改版任務(wù)中，做系統(tǒng)的解決和處理。
在【05、體驗痛點分析-用戶調(diào)研部分】已經(jīng)介紹了本次參與訪談的用戶來源，但在實際執(zhí)行時，我們也邀請了部分在線上問卷反饋中描述模糊不清、難以理解，需要面對面交流或者演示才能理解的問題的用戶。
訪談先通過與用戶簡短的溝通了解用戶的崗位/職業(yè)以及使用莫奈的主要場景、頻次、設(shè)備等，然后通過給用戶設(shè)置一到兩個簡單的任務(wù)，觀察用戶在完成任務(wù)過程中的行為、表情、語氣等，以了解莫奈在一些典型使用場景下的易用性及可用性。比如，對于視覺設(shè)計師：請在畫布中添加一個條形圖，并將條形圖的顏色修改為綠色、激活縱軸輔助線、修改輔助線為虛線樣式....; 對于開發(fā)工程師：請在畫布中添加一個環(huán)形圖，并使用json為環(huán)形圖添加一組動態(tài)數(shù)據(jù)....。之后，在用戶完成基礎(chǔ)任務(wù)后，我們還會針對用戶關(guān)心的問題進行更細致的溝通，了解用戶更細致的反饋。對于用戶反饋的問題，我們整理后會在公司內(nèi)部的需求及研發(fā)管理系統(tǒng)“行云”中以需求的方式提交給產(chǎn)品團隊并同步添加反饋問題的用戶為該需求的關(guān)注者，后續(xù)，當該需求的狀態(tài)有任何更新時，問題反饋者都能及時收到更新。如此，受訪者反饋的問題從需求提交到需求最終提測驗收，都能在線跟蹤并閉環(huán)。這樣做既是我們團隊的責(zé)任，也可以增進用戶對莫奈的信任，并期望活躍用戶后續(xù)能繼續(xù)為莫奈提供建議和反饋。
通過線上問卷調(diào)研及線下訪談，我們已充分了解了用戶心聲，接下來我們通過用戶體驗5要素模型，將各類問題進一步歸納并按照產(chǎn)品建設(shè)的上下游協(xié)作關(guān)系，把每一個具體的問題匯總給對應(yīng)的角色，并由對應(yīng)的角色產(chǎn)出具體的解決方案，然后通過線下會議同步各自方案并對方案進行評審和溝通，由此，關(guān)于體驗升級的所有事項及具體任務(wù)便可周密安排，之后便是資源投入、推進升級工作具體執(zhí)行。
用戶體驗5要素模型，從產(chǎn)品的戰(zhàn)略層出發(fā)，層層遞進直到表現(xiàn)層，把影響用戶體驗最根本的因素分層并可視化，借助這一模型可以讓大家對“用戶體驗”這個概念有更好的理解，并能促成大家在更大的層面上達成共識。以往談到用戶體驗，大家首先想到的是界面是否好看、交互是否流暢，然而一些對用戶體驗也有著重要影響但“不可見、不直觀”的因素卻往往被忽視，尤其對開發(fā)側(cè)同學(xué)更是如此，他們鮮有意識到產(chǎn)品的目標、內(nèi)容以及性能等這類的因素，也是構(gòu)成用戶體驗的重要部分。對于莫奈這樣一款長期維護持續(xù)迭代的產(chǎn)品來說，好的用戶體驗并不能以“畢其功于一役”的方式來實現(xiàn)，而是要通過持續(xù)不斷的改進和優(yōu)化才能持續(xù)滿足并提升用戶體驗，所以借助用戶體驗5要素等模型，我們引導(dǎo)產(chǎn)品及研發(fā)團隊更好的理解用戶體驗，這樣不僅能幫助設(shè)計師在本次體驗升級改版工作中與大家高效協(xié)作，也非常益于之后日常產(chǎn)品迭代的溝通與協(xié)作。
上一步，我們通過用戶體驗金字塔將體驗問題匯總并劃分給了不同的角色，之后各個負責(zé)人產(chǎn)出解決方案并與大家評審和溝通，而體驗升級方向正是基于大家對各類方案一致溝通后達成的共識和結(jié)果，體驗升級方向以設(shè)計為主導(dǎo)，同時兼顧產(chǎn)品和研發(fā)的部分目標，我們用5個短句將五個升級方向概括，每個方向盡量解決一個維度的問題，比如“界面視覺質(zhì)量提升”解決表現(xiàn)層的問題、“信息層級優(yōu)化”解決框架層的問題。體驗升級方向作為對體驗升級結(jié)果的導(dǎo)向，將指導(dǎo)后續(xù)設(shè)計動作的展開。
基于體驗升級方向，接下來就要制定具體的設(shè)計策略，來實現(xiàn)體驗升級方向中要達成的結(jié)果。設(shè)計策略制定第一步先確定設(shè)計目標，我們將設(shè)計目標拆解為三個方向，每個方向通過兩個關(guān)鍵詞定義。設(shè)計目標主要分為視角與交互兩個方向，同時兼顧產(chǎn)品側(cè)“易拓展、易維護”的需求。實際設(shè)計中，視覺與交互并非獨自分開進行，在設(shè)計開始的階段，需要先定義設(shè)計風(fēng)格等基礎(chǔ)設(shè)計要素，之后視覺便可在此基礎(chǔ)之上全面展開，此時視覺設(shè)計要考慮交互的效果，交互設(shè)計也需要斟酌設(shè)計的展現(xiàn)。
對于設(shè)計目標中關(guān)鍵詞所代表的那些抽象概念，每個人的認知可能都不一樣，但是搜索引擎和大數(shù)據(jù)推薦的算法，可以告訴我們普通大眾對那些關(guān)鍵詞所表現(xiàn)出來的意象是如何認知的，之后我們便可從符合大家普遍認知的視覺素材中，提取出符合關(guān)鍵詞所表達出的意象的設(shè)計要素，之后通過在設(shè)計中應(yīng)用這些設(shè)計要素，就能把關(guān)鍵詞定義的抽象的設(shè)計概念轉(zhuǎn)化為具象的認知，我把這個過程稱之為“抽象概念的可視化”。而“情緒版”是我完成上述工作的主要工具。
我們使用搜索引擎以及AI推薦的關(guān)聯(lián)算法，針對“科技和高效”這兩個視覺目標的關(guān)鍵詞收集了海量的音視頻設(shè)計素材，把這些素材集合在一個畫布上形成“情緒版”，然后通過歸納這些素材共有的特點/要素，就能將體現(xiàn)“科技、高效”這兩個概念的所有設(shè)計要素剝離出來，并通過簡潔的文字加以描述和歸納。此后，我們通過在視覺設(shè)計執(zhí)行的過程中應(yīng)用這些設(shè)計要素，通過合理的搭配和組織，將這些設(shè)計要素融入到莫奈新的設(shè)計語言，如此，產(chǎn)品最終便可在視覺上呈現(xiàn)出與視覺目標關(guān)鍵詞定義的一致的視覺和心理感受。
基于情緒版提煉出的設(shè)計要素其實已經(jīng)足夠具體，但是如何將這些要素應(yīng)用在設(shè)計中，我們還需要進一步歸納。我個人一直以來習(xí)慣從形、色、字、質(zhì)、構(gòu)、動、音7個維度分析一個設(shè)計作品的設(shè)計風(fēng)格，就如同人體是由肌肉、骨骼構(gòu)成的一樣，以上7個維度也是構(gòu)成一個設(shè)計作品的“經(jīng)、骨、肉”。所以，我認為對于一個設(shè)計作品，尤其是UI設(shè)計作品，以上7個維度基本能夠完全概況它的風(fēng)格，所以當我要為自己的產(chǎn)品做風(fēng)格設(shè)定時，我也是從這7個維度出發(fā)來為每個維度定義具體的風(fēng)格和策略。
這種細分維度然后定義風(fēng)格的方式有多種優(yōu)勢，其中最明顯的是它能夠?qū)⑽覀冿L(fēng)格定義的設(shè)計工作條理化，避免反復(fù)嘗試和摸索造成的大量返工和思緒混亂，比如，如果我對質(zhì)感的定義有偏差，不符合情緒版中提取出來的設(shè)計要素的特點，這時候我只需要對“質(zhì)感”這個維度的風(fēng)格進行優(yōu)化和調(diào)整，而不需要推翻整個7要素重新再來。這種設(shè)計方式讓我的設(shè)計更加理性，也讓后續(xù)設(shè)計執(zhí)行的工作更加的有條理和舒適，從設(shè)計風(fēng)格落地的角度來講，這種方式我個人認為是最能夠忠于情緒版所歸納出的設(shè)計感受的方法。
對于產(chǎn)品界面的造形設(shè)計，一方面依照情緒版中提取的設(shè)計要素“透視、空間感、異構(gòu)造形”來考慮，另一方面我也結(jié)合莫奈的產(chǎn)品Logo做了適當?shù)某橄蠛脱堇[；兩者結(jié)合最終確定了當前莫奈的造形設(shè)計。
首先，產(chǎn)品左側(cè)主導(dǎo)航采用了具有一定透視角度的異形設(shè)計；產(chǎn)品頂部標題區(qū)域也采用了相同的設(shè)計思路：左側(cè)為品牌Logo設(shè)計了一個容器，Logo在其中容納放置；Logo右側(cè)收起的區(qū)域預(yù)留了常用公告、跑馬燈的設(shè)計，方便產(chǎn)品把日常重要信息同步給用戶；最右側(cè)呈現(xiàn)用戶個人中心、空間管理、使用幫助等菜單項。
對于這種異形的設(shè)計，用戶是否能夠接受，在設(shè)計開始時我存在一定的疑慮，因此在設(shè)計初稿定稿后我們邀請了部分用戶做了測試，大部分用戶認為新的設(shè)計有創(chuàng)意具有鮮明的特點，也有部分用戶認為透視的設(shè)計看著較為怪異，尤其是左側(cè)主導(dǎo)航的文字在添加透視效果后識別性存在一定的問題。因此針對用戶反饋我優(yōu)化了透視的角度，從多個透視數(shù)值中選擇了一個即能展示透視的設(shè)計效果、又不至于透視過大導(dǎo)致文本圖標等變形嚴重而不易識別的角度，其次，我還配合開發(fā)同學(xué)對導(dǎo)航透視文本和圖標的渲染做了一些優(yōu)化，從而使其具有更好的識別性和清晰度。在以上兩項優(yōu)化完成后，新的用戶測試表明大家對該設(shè)計的滿意度有很好的提升。
莫奈在改版之前就已經(jīng)有自己的品牌色，新的色彩升級圍繞“科技與高效”兩個關(guān)鍵詞，結(jié)合情緒版提取的設(shè)計要素，將原有品牌色做了細微的調(diào)整。首先藍色飽和度增加，綠色調(diào)整色相使其偏向藍色的一端并增加亮度。如此，當兩個顏色搭配使用時，藍色作為主色調(diào)體現(xiàn)科技、可靠的視覺和心理感受；綠色作為點綴色和強調(diào)色，體現(xiàn)活力、高效與創(chuàng)新。藍綠對比強烈，具有很好的場景適應(yīng)性和品牌特色。
字體作為UI界面中最常見的元素以及作為信息呈現(xiàn)的主要載體，字體的使用對產(chǎn)品的易用性和視覺表現(xiàn)有著非常重要的影響。結(jié)合體驗升級方向中定義的“增強品牌特色”的目標以及情緒版中提取的非襯線的設(shè)計要素，對于字體的設(shè)計風(fēng)格，我將其歸納為"定制化、品牌性和非襯線"。
為了實現(xiàn)字體風(fēng)格的設(shè)計目標，我選取了兩款京東品牌的定制字體“京東朗正體”及“京東正黑體”。京東朗正體經(jīng)過多次迭代，目前具有豐富的字重和獨特的品牌特色，將該字體用于莫奈的品牌Logo，可以很好的體現(xiàn)京東的品牌特色并體現(xiàn)出與其它產(chǎn)品差異化的字體設(shè)計。京東正黑體主要用于莫奈產(chǎn)品中的數(shù)字、拼音、英語、數(shù)值符號四個場景，該字體也是京東金融APP的系統(tǒng)數(shù)字字體，其最大的特點是等寬、簡潔、緊湊具有很好的識別性與易讀性，并且該字體有較小的字符寬度，所以當其用于大屏編輯器時，能夠在相同的空間下容納比其它字體更多的字符，而這個特點對于“寸土寸金”的屬性面板尤為重要。此外，該字體在作為數(shù)字字體使用時，其小數(shù)點、千分符等也具有很強的特色，具有不錯的辨識度與個性。
而產(chǎn)品中的中文字體Mac與Windows系統(tǒng)有不同的方案。在Windows下，由于系統(tǒng)自帶的微軟雅黑當字號小于14pt時，字符在水平方向上存在明顯“參差不齊”的現(xiàn)象，加之該字體很少更新，沒有針對當前高像素密度、高分辨率的屏幕特點做相關(guān)的適配優(yōu)化，所以在高分屏下，其字體邊緣會有明顯的鋸齒。之前在用戶調(diào)研中，有用戶反饋字體模糊不清、識別困難也是上述原因造成，所以Windows系統(tǒng)下莫奈界面字體選取了思源黑體，思源黑體是Adobe與Google聯(lián)合開發(fā)的開源字體，其字重豐富、字形簡潔、現(xiàn)代，能夠很好的適應(yīng)PC與移動端的顯示，也能適應(yīng)當前已漸趨主流的高分屏，所以使用該字體能夠給用戶帶來不錯的信息呈現(xiàn)。除此之外，思源黑體的字形特點與MacOS系統(tǒng)下的蘋方字體相似，因而使用思源黑體在一定程度上也能夠保證用戶在不同平臺使用莫奈時體驗的一致性。
質(zhì)感的呈現(xiàn)主要通過色彩、透明度的變化、毛玻璃效果的模擬來實現(xiàn)，色彩與透明度的變化搭配毛玻璃效果使用，可以呈現(xiàn)科技、輕盈的質(zhì)感。
結(jié)構(gòu)設(shè)計主要目標是組件化及原子化，莫奈最核心頁面是大屏場景編輯器，該頁面承載著可視化大屏由0到1構(gòu)建所需的大多數(shù)功能，也是莫奈產(chǎn)品日常迭代維護投入資源和成本最集中的模塊。以往編輯器的界面設(shè)計雖然也有不錯的設(shè)計規(guī)范，但是并沒有按照原子化、組件化的思路來考慮各類組件組合使用時的搭配問題，因此基于以往的設(shè)計規(guī)范，大屏編輯器頁面的產(chǎn)品需求總是需要UI產(chǎn)出設(shè)計稿研發(fā)才能開發(fā)，且由于沒有系統(tǒng)的梳理過編輯器頁面各種組件的類型，所以部分組件在同一頁面的不同位置存在不同的形態(tài)；還有一些組件，在具體頁面中的使用并不符合該組件的功能和用途，存在錯用亂用的情形，由此造成編輯器的界面設(shè)計、開發(fā)和維護都具有較高的成本。
新的改版設(shè)計，在設(shè)計之初就聯(lián)合產(chǎn)品對編輯器內(nèi)的各個模塊所包含的各類組件進行了梳理，通過將各個模塊的組件羅列出來，然后重新梳理組合、去重、合并之后，我們就可以知道當前編輯器界面總共有哪些類型的組件，以及每類組件用在何處，而組件原子化后也通過間距規(guī)范、使用場景示例等方式解決了如何用的問題。
原子化的組件，精簡了組件的數(shù)量，同時每個組件也針對自身功能和用途的特點進行了優(yōu)化，在此過程中也考慮了組件搭配、組合使用的適配和呈現(xiàn)問題。比如，針對顏色選擇組件，我們默認以十六進制展示顏色色值，并在色值后以百分比顯示該顏色的透明度，我們還在色值后面增加了色值預(yù)覽的小色塊，這樣的設(shè)計兼顧了開發(fā)與設(shè)計同學(xué)使用莫奈的場景。對于開發(fā)同學(xué)，他們在代碼中習(xí)慣使用十六進制色值，而設(shè)計師更習(xí)慣于RGBA或HSLA的調(diào)色模式，因此，雖然十六進制的色值也能包含透明度信息，但我們依然在顏色后面增加了百分比及小色塊，已幫助設(shè)計同學(xué)確認顏色的正確性，此外我們還通過色彩顯示模式切換、自動輸入校正等手段，確保不管用戶輸入的顏色采用何種方式，最終屬性欄都是按照用戶設(shè)置的模式以統(tǒng)一的格式呈現(xiàn)。而諸如此類優(yōu)化，在本次體驗升級中不勝枚舉。
莫奈的動效設(shè)計主要有兩類，一類是用于頁面視覺效果營造的氛圍類點綴動效，另一類是用于功能及信息傳遞的交互類動效。兩類動效都通過“節(jié)奏感、輕盈”的設(shè)計風(fēng)格，傳遞科技、高效的視覺感受。
在本次動效交付中，為了保證動效的清晰度與流暢感、并減少動效的體積和提升動效加載速度，動效文件均采用Json代碼的形式交付前端，該類動效由瀏覽器在網(wǎng)頁端實時渲染，具有矢量動畫的特點，能適應(yīng)多種設(shè)備及屏幕分辨率，具有優(yōu)秀的前端呈現(xiàn)效果。
首頁科技感流光氛圍動效
頁面及大屏加載Loading動畫
針對視覺層面設(shè)計優(yōu)化后，接下來針對莫奈典型的用戶使用場景以及之前線上問卷、線下訪談中用戶反饋問題比較集中的一些場景進行交互層面的優(yōu)化，我們交互優(yōu)化的目標是“簡單、流暢”。
首先進行交互優(yōu)化的是各類圖表的屬性及配置項設(shè)置相關(guān)的交互優(yōu)化。莫奈作為一款可視化場景搭建平臺，為用戶提供了各類型的圖表，每個圖表均具有“樣式、數(shù)據(jù)、交互”三大類配置屬性，這三大屬性，從圖表看起來是什么樣、圖表展現(xiàn)了什么數(shù)據(jù)、圖表可以與用戶進行那些互動三個維度解決了圖表在數(shù)據(jù)可視化呈現(xiàn)中最基礎(chǔ)的需求。由于圖表在數(shù)據(jù)可視化呈現(xiàn)中頻繁使用，所以與圖表配置相關(guān)的操作自然也是相當高頻和常用。當前版本下，圖表配置項主要問題有兩個：一個是圖表配置項層級過深，用戶需多次點擊才能對某一內(nèi)容進行修改；第二是批量對多個圖表的相同屬性進行修改在當前版本不可用，導(dǎo)致用戶圖表配置成本高。針對用戶最關(guān)心最影響體驗的兩個交互問題，我的優(yōu)化方案如下。
要解決問題，首先要知道問題從何而來。經(jīng)過深入與產(chǎn)品、研發(fā)同學(xué)及部分用戶訪談溝通后，我發(fā)現(xiàn)當前導(dǎo)致圖表配置項層級過深主要有兩個原因，分別是產(chǎn)品規(guī)劃與設(shè)計展現(xiàn)。
具體來講，產(chǎn)品層面有三個問題：
01、產(chǎn)品對于當前圖表配置項的結(jié)構(gòu)梳理是以程序的邏輯來呈現(xiàn)，而非以用戶的視角來歸納。舉個栗子，在當前版本如果用戶要修改柱狀圖某個柱子的顏色，操作路勁如下：樣式>數(shù)據(jù)系列>系列名稱>形狀設(shè)置>顏色設(shè)置。而這一路徑為何如此設(shè)計？因為顏色這個屬性的后端代碼就是這樣的結(jié)構(gòu)。這一路勁把用戶最易理解、最直觀的屬性名放到了路勁的末位，而在它之前呈現(xiàn)的內(nèi)容、名詞其實都有一定的理解難度，尤其對于新手更是如此！用戶想要更改顏色，Ta首先需要知道什么是數(shù)據(jù)系列、其次還要了解形狀設(shè)置可能包含哪些屬性等，正因具有一定的門檻且不直觀，所以用戶初次進行上述設(shè)置時往往需要在樣式一級菜單下點擊多個屬性、反復(fù)嘗試確認，才能最終完成顏色修改的設(shè)置，這樣一個使用的流程自然會給用戶“層級過深”的感受
02、圖表配置結(jié)構(gòu)存在冗余、不夠精簡。還是上面那個栗子，用戶修改顏色需要觸達第5級。但是這種細致的分層分級的結(jié)構(gòu)設(shè)計是必要的么？答案是并不是！因為只有用戶關(guān)注的才是有用的，產(chǎn)品應(yīng)該提供用戶想要的內(nèi)容而不是強塞給用戶產(chǎn)品具有的所有的功能，所以我們沒有必要把圖表在后端具有的所有屬性都羅列出來，適當?shù)膶ε渲庙椬鲂┚?，合并一些同類的屬性、然后通過“更多”按鈕隱藏一些對圖表呈現(xiàn)無關(guān)緊要的內(nèi)容，如此，圖表配置項便能瘦身，用戶使用起來也更輕松。
03、圖表配置項的各個屬性，在屬性列表的排序沒有遵循用戶使用的頻次和習(xí)慣。排列在前面的屬性并非用戶最常用的那些，因此用戶要在列表中從上而下的“翻找”，這種使用過程中的頓挫感，一方面影響了用戶使用產(chǎn)品的效率，另一方面也加深了用戶“層級過深”的感受。
知道了問題從何而來，那么解決問題便也變的簡單。首先，我們聯(lián)合產(chǎn)品經(jīng)理，對莫奈已有的60多個各類圖表組件，逐個進行了配置項的梳理，當所有圖表的配置項都以思維導(dǎo)圖的形式呈現(xiàn)時，他們的共同點、同類項便一目了然。此時，之前存在的“圖表配置結(jié)構(gòu)存在冗余、不夠精簡”的問題便可解決。而對于先前存在的01與03問題點，在上述梳理工作完成后有了一定的優(yōu)化和改善空間，但仍然存在一些不確定的因素影響設(shè)計和產(chǎn)品的決策。比如、“屬性列表中，哪些屬性是用戶最常用的”，類似這樣的問題我們通過訪談幾個用戶并不能得到可靠的結(jié)論，對此，一方面我們通過為配置項區(qū)域增加數(shù)據(jù)埋點，分析用戶對各個配置項使用的頻次來為后續(xù)的持續(xù)優(yōu)化提供決策支持，另一方面我們也參考、調(diào)研了同類產(chǎn)品中一些用戶量較大、設(shè)計質(zhì)量較高的產(chǎn)品來進行當前有限的優(yōu)化。
配置項層級過深的另一個原因，是屬性配置列表的結(jié)構(gòu)及布局設(shè)計存在“深層級、空間利用率底”的特點。
如下圖，左側(cè)圖片示意了舊版莫奈的配置列表設(shè)計結(jié)構(gòu)?？梢钥吹脚f版設(shè)計完全采用樹結(jié)構(gòu)的形式將各項自上而下排列，并且采用每級向右縮進一個字符的形式來做層級的區(qū)分，舊版的設(shè)計基準尺寸為1440PX，屬性配置欄本身較窄，而逐級縮進的策略更是導(dǎo)致信息展示困難；其次，樹狀的結(jié)構(gòu)在展開層級較多時，部分一級屬性會被擠到一屏之外，用戶需要頻繁滾動鼠標滾輪才能看全信息，綜上，舊的設(shè)計策略也給了用戶“層級深”的直觀感受和交互體驗。
新版設(shè)計首先增加了配置屬性欄的寬度，讓其能夠在橫向上展示更多信息；其次，新版設(shè)計，將提煉后的一級屬性標簽固定在屬性配置列表左側(cè)。相較于之前，這樣的設(shè)計始終能夠讓用戶清晰的看到所有一級屬性，用戶可以隨時在各類屬性中切換，并且右側(cè)屬性內(nèi)容的滾動也不會影響一級屬性的位置，如此就給了用戶很好的全局觀和使用的便利性與確定性。最后，新版設(shè)計采用分隔線與色塊結(jié)合的方式來表達屬性列表內(nèi)的層級關(guān)系，去掉逐級縮進后，配置列表在視覺上更加整齊一致、且空間利用率也有了進一步的提升。
在數(shù)據(jù)可視化場景搭建過程中，用戶對多個圖表的相同屬性進行統(tǒng)一修改、一次性調(diào)整的需求非常迫切和剛需。比如當前可視化大屏中有N個圖表，此時，用戶想要將其中6個圖表的橫軸顏色調(diào)整為相同的綠色，在用戶的視角下，此時的操作應(yīng)該是先選中6個想要調(diào)整的圖表，然后找到橫軸顏色設(shè)置項，之后統(tǒng)一調(diào)整色彩。但莫奈當前的版本，如果用戶按照上述流程操作，看到的將是下圖左側(cè)的示例：圖表多選之后，對齊、坐標等基礎(chǔ)項仍然可用，而與屬性相關(guān)的其它設(shè)置并沒有被聚合并呈現(xiàn)，在此情況下，用戶想要完成最初的目標就只能6個圖表逐個依次調(diào)整！顯然，這樣的操作并不符合用戶預(yù)期，它使用戶的操作效率大大降低。
上述問題是一個體驗相關(guān)的問題，同時也是一個強技術(shù)相關(guān)的問題，我們想要讓多個圖表的同類項聚合顯示，首先要能在底層對各個圖表的配置項有十分清晰的梳理，好在我們解決第一個問題：“配置項層級過深”時，已經(jīng)完成了對60多個圖表的細致分析，有了這項工作的基礎(chǔ)，當前面臨的問題便不那么棘手。如右側(cè)示例：當用戶多選圖表時，圖表的同類項會被聚合，并以用戶視角的理解，將屬性類別進行分類，這樣的分類打破了傳統(tǒng)的按照圖表固有屬性排列的慣例，而是把圖表固有屬性整合歸納到用戶易于理解的類目下，如此，用戶多選圖表之后便能夠便捷的對圖表的各類屬性進行統(tǒng)一的調(diào)整和修改，而這樣的操作是符合用戶習(xí)慣和預(yù)期的。
新建大屏作為創(chuàng)建數(shù)據(jù)可視化場景的第一步，它的易用與否直接給了用戶最直觀的對莫奈的第一感受。對于新建大屏的交互優(yōu)化主要有三個方面：創(chuàng)建流程、模板預(yù)覽與模板展示。
創(chuàng)建流程優(yōu)化：首先，舊版的創(chuàng)建流程：新建可視化>選擇模板>大屏命名>創(chuàng)建成功。 這一流程中“大屏命名”是沒有必要的，因為用戶在新建可視化大屏?xí)r可能存在多種需求的可能性，也許用戶只是想看看創(chuàng)建完成后內(nèi)部編輯器是什么樣，或許用戶有實際項目，但當前項目名稱也并未確認，所以在此時添加一個不可跳過的步驟著實讓人不爽，況且大屏創(chuàng)建成功之后在多個位置有多種方式都能便捷的修改大屏名稱，因此，更快速的進入編輯器開始設(shè)計創(chuàng)作才是用戶創(chuàng)建可視化最根本的目標，所以，拿掉“命名流程”，顯然可以讓整個交互的過程更加流暢。
模板預(yù)覽與模板展示優(yōu)化：原有的設(shè)計，當用戶點擊創(chuàng)建大屏按鈕后，會在頁面底部拉起一個小的抽屜，抽屜內(nèi)包含一個空白模板以及有限多個其它內(nèi)容模板，而在如此狹小的區(qū)域展示這么多內(nèi)容，不管是從交互效率還是視覺效果上看，都顯得格外的拘謹和難受。新的設(shè)計首先是全屏鋪開，盡可能充分的利用頁面空間。
在模板展示及預(yù)覽方面，我設(shè)計了列表展示與縮略圖分布展示兩種方式，并添加了分類標簽和搜索按鈕，此外還聯(lián)合產(chǎn)品增加了模板收藏功能，這樣用戶可以把自己喜歡的、常用的模板收藏，方便之后更快速的使用
模板預(yù)覽方面，在兩種布局模式下，用戶鼠標滑過模板縮略圖時，模板均會以較大的視圖動態(tài)呈現(xiàn)模板內(nèi)容。在列表模式下，模板預(yù)覽窗口固定在頁面右側(cè)區(qū)域；縮略圖分布的模式下，預(yù)覽窗口根據(jù)鼠標指針的位置激活。當用戶選中某個模板時，點擊底部創(chuàng)建按鈕即刻進入大屏編輯器界面，此時用戶便可基于模板內(nèi)容進一步完成自己的定制化設(shè)計。
如今移動端各類產(chǎn)品已經(jīng)給用戶養(yǎng)成了算法推薦+自主搜索的產(chǎn)品使用習(xí)慣，這種習(xí)慣當前也逐步從移動端往PC端轉(zhuǎn)化。搜索能從海量信息中最快速的找到用戶關(guān)心的內(nèi)容，因而提高搜索功能的易用性，能明顯提高用戶使用莫奈的效率。
以往的搜索功能按照不同模塊和場景分布在不同位置，用戶需要先找到對應(yīng)模塊才能進行搜索，降低了搜索的便捷性和易用性。新的設(shè)計在保留之前搜索能力的基礎(chǔ)上，新增全局搜索，用戶在一個位置即可完成對組件（優(yōu)先展示當前畫板內(nèi)組件）、屬性、幫助等內(nèi)容的搜索和查找，進一步提升搜索的效率。
一個數(shù)據(jù)可視化場景，通常是由N個數(shù)據(jù)圖表與其它數(shù)據(jù)要素一起構(gòu)成的多個頁面來呈現(xiàn)和展示的。這些頁面內(nèi)包含大量的元素，而對這些元素的管理主要通過大屏編輯器頁面左側(cè)的圖層管理面板來實現(xiàn)。一般我們對圖層管理的手段主要有三種：命名、分組和查找。
給組件命名是一個耗時且麻煩的行為，我們在做用戶調(diào)研時發(fā)現(xiàn)，大部分用戶都沒有給組件規(guī)范命名的習(xí)慣，大多數(shù)情況下，組件在圖層面板列表內(nèi)都是以默認名稱或者默認名稱+1、2、3的形式存在。這導(dǎo)致了當頁面組件較多時，通過組件命名來查找組件其實相當困難，所以自動生成縮略圖的形式相比讓用戶耗費大量時間為圖層命名更能改善用戶體驗。縮略圖以快照方式保存當前組件最新狀態(tài)截圖，從而幫助用戶更快速的將圖層組件與頁面上的內(nèi)容對應(yīng)起來。
新的設(shè)計，圖層成組后也取消了縮進字符的效果，我采用給成組對象設(shè)計更明顯的分組示意圖標以及為組內(nèi)列表添加深色色塊的方式，完成了成組對象與列表內(nèi)其他要素區(qū)分的需求，新的設(shè)計使成組對象更易查找和識別。
此外，我們還增加了對圖層列表的搜索功能，幫助用戶快速定位名稱已知的設(shè)計元素。
此次體驗升級是設(shè)計主導(dǎo)推動，產(chǎn)品與研發(fā)緊密配合的結(jié)果。體驗設(shè)計師作為最接近用戶的群體，是產(chǎn)品與用戶溝通的橋梁。時刻關(guān)注用戶心聲，并能將用戶細碎的吐槽和各類反饋轉(zhuǎn)化為體驗痛點、制定對應(yīng)的優(yōu)化策略是體驗設(shè)計師的基本功。而對于設(shè)計和產(chǎn)品本身是否熱愛，也是設(shè)計能否不斷精進、體驗是否能夠不斷提升的關(guān)鍵。好的設(shè)計不僅服務(wù)了產(chǎn)品、幫助了用戶、同時也成就了設(shè)計師本身。
本人為莫奈提供設(shè)計支持的三年多時間，在沒有KPI要求和外部壓力的情況下，通過公司內(nèi)部需求管理系統(tǒng)“行云”，為莫奈提交231個體驗優(yōu)化建議；以線下線上的形式面向莫奈產(chǎn)品及研發(fā)團隊進行了20多次專業(yè)分享。正是日常這些積極主動且持續(xù)的努力，使我本人與莫奈產(chǎn)品團隊建立了非常友好緊密的聯(lián)系，這也為推動本次體驗升級改版提供了巨大的助力。我認為作為體驗設(shè)計師，我們不僅要對用戶有同理心，為用戶創(chuàng)造愉悅舒適的感受，同時也要對身邊的同事、職場中的合作伙伴有相似的同理心和換位思考的意識，體驗關(guān)乎人、環(huán)境與生活，嘗試在生活中磨煉自己創(chuàng)造好的體驗的能力，并將其應(yīng)用到體驗設(shè)計師的職業(yè)工作中，我相信，倘若如此實踐，必能在職業(yè)和生活中都獲得有不錯的成就。
好的產(chǎn)品，必然是持續(xù)關(guān)注用戶訴求，不斷迭代發(fā)展的產(chǎn)品，好的體驗設(shè)計也必然是陪伴產(chǎn)品不斷優(yōu)化、持續(xù)精進的設(shè)計，復(fù)盤的意義不僅是沉淀過去的經(jīng)驗，更是為未來更好的體驗蓄能。
此次分享如能為大家?guī)砟桥乱稽c點的啟發(fā)，本人便倍感榮幸、開心至極！ 期望大家能夠與我有更多交流，么么噠~~
作者：BYMD 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
有許多小伙伴經(jīng)常會有這種疑問，我做的可視化設(shè)計為什么按著需求做了，可是為什么畫面卻被吐槽空，太簡單，不夠炫。因為在可視化領(lǐng)域會經(jīng)常存在誤區(qū)，要把他們跟平面或者UI區(qū)分開，拆解開來講?？梢暬I(lǐng)域所注重的小伙伴們一定不陌生：字要大，顏色多一點，要酷炫，要科技感。沒錯這就是老板口中的設(shè)計，但并不否認，這些點都說在了可視化的關(guān)鍵點上，但是想要更了解可視化如何制作，我們需要從以下幾個方面去解讀數(shù)據(jù)可視化。
靈活運用點線面構(gòu)成（可以單獨去找一下三大構(gòu)成中的平面構(gòu)成內(nèi)容），科技感線條，不可太過顯眼而喧賓奪主，只求使畫面豐富，透氣，不影響整體畫面效果。
下圖就是我選用的一種畫面裝飾線，并通過點線面等元素來設(shè)計成的一個畫面
邊框的樣式很大程度決定了畫面的整體協(xié)調(diào)性，在邊框融入整體畫面的時候，要考慮到與主視覺的協(xié)調(diào)性。一般邊框的顏色可以根據(jù)主視覺所展現(xiàn)出來的色彩傾向，從而進行選擇，最大程度上保持協(xié)調(diào)統(tǒng)一。
分級邊框可以很大程度上切割大的模塊，獨立的同時融于整體。由各種方塊分割，同時選取最適合畫面的切割比例。（大框套小框）
主要包括：主視覺撒點，地圖彈框，主視覺數(shù)字指標，以及懸浮于地圖之上的分級菜單以及圖例。
文字加數(shù)字，文字是數(shù)字的描述，數(shù)字是對文字的統(tǒng)計 （可以著重展示數(shù)字，數(shù)字大，文字小，一般可以上下結(jié)構(gòu)，或者結(jié)合圖形，特殊情況特殊對待）
凡是出現(xiàn)對比，占比或者其他需要做對比的東西，一般推薦用餅圖
出現(xiàn)多條數(shù)據(jù)，多個維度，多角度進行比較的時候，一般推薦用柱狀圖（包含柱折圖），出現(xiàn)趨勢，走勢等字眼時，一般采用折線圖。
例：描邊，描邊可以虛線，虛線可以調(diào)整間距，間距可以調(diào)圓角和直角。
例：發(fā)光，發(fā)光可以外發(fā)光，可以內(nèi)發(fā)光。
例：漸變，漸變可以線性漸變，角度漸變，鏡像漸變。
例：填充，可以漸變填充，可以純色填充，可以填充有透明，透明度沒有透明。
在你嘔心瀝血做完一兩個圖表的時候，如果想讓他有更多的同風(fēng)格的東西，就好比做字體設(shè)計一樣，所有字體都要寫完，才是一套完整的，所以需要提煉該“字體”的細節(jié)，或者說是與正常字體不同的地方，提煉出他的特殊樣式，再運用到其他的圖表當中去，這個從0到1的過程，我把它叫做組件化的過程。在你多做了幾套組件的時候，就會覺得圖表可以千變?nèi)f化，但你還是能夠知道他是怎么利用基礎(chǔ)圖形變形而來的?？炊嗔?，做多了，網(wǎng)上看到好看的圖表，一眼就能提煉出他的特殊點，再運用組件化思維，真正的化為己用。
再教大家一個方法，設(shè)計出一套組件的時候，只有運用到項目中，實現(xiàn)出來，才是一個成功的商業(yè)組件化過程（我自己做項目就是，看到好的設(shè)計，我下次做項目怎么我都要用上去）。此處指的不是抄襲，而是提煉不同點，運用到自己的組件中。
找出所有圖表的共性
區(qū)分不同圖表的差異性
結(jié)合基礎(chǔ)組件，去變形，去豐富
了解組件的顏色以及風(fēng)格，去運用
拓展文字排版，地圖樣式
拓展撒點，以及彈框
在布局的時候，挑選合適的布局方式，需要考慮到字段的長短，圖表的寬窄，圖標的大小，以及畫面的平衡，需要提前進行布局（就跟繪畫構(gòu)草圖一個道理）。
1. 標題與logo沒有形成好的聯(lián)系
2. 指標數(shù)字類的東西，沒有與地圖關(guān)聯(lián)，比較分散
3. 地圖主視覺表現(xiàn)內(nèi)容太少，空洞
4. 文字區(qū)域示意不明，圖表？地圖內(nèi)容？
5. 整體布局不和諧，各處模塊太分散
6. 畫面裝飾無法連接各個模塊
1. 標題與LOGO之間要建立聯(lián)系
2. 將指標類的數(shù)字通過主視覺結(jié)合起來
3. 豐富地圖區(qū)域，增加表現(xiàn)形式
4. 文字區(qū)域單獨模塊，獨立又與主視覺有聯(lián)系
5. 優(yōu)化整體布局，添加邊框，豐富模塊
6. 調(diào)整畫面裝飾，與模塊結(jié)合
在設(shè)計的過程中我們經(jīng)常會遇到一個模塊的內(nèi)容（一個畫面），兩個或者多個都是同樣的數(shù)據(jù)或者需求（或者同樣的圖表），這就要求我們在設(shè)計的過程中有變化可循，那么該如何解決此類問題呢？
1. 可以通過不同的表現(xiàn)方式來進行區(qū)分，兩個或者多個情況時，可以通過改變一些輕微的東西，來使之具有差異性，同時又有統(tǒng)一的風(fēng)格。
2. 兩個或者多個的情況下，該處區(qū)域只夠展示一個，但又必須展示，可以通過tab列表的方式，或者做切換等方式（例如柱狀圖時，x軸顯示不完時，可以做個x軸滑動功能）。
在同一個畫面里有同一個類型的圖表時（比如兩個餅圖），盡可能地不要讓這兩個餅圖靠近顯示，盡量互相遠離，在數(shù)據(jù)導(dǎo)入的情況下，一左一右，呼應(yīng)的同時又統(tǒng)一。
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
政府大屏主要以點間距去區(qū)分屏幕的精細度，點間距越小，造價約昂貴；面積越大越整體，造價越高。離屏幕越近顆粒感越強，設(shè)計效果也就越不清晰，LED顯示屏表面不平整是導(dǎo)致LED顯示屏圖像失真的主要原因。LED顯示屏表面粗糙度的好壞主要取決于生產(chǎn)工藝。
拼接屏相比于點間距比較小的LED屏，價格方面會更便宜一點，拼接屏設(shè)計時最主要就是拼縫的處理，注意拼縫，設(shè)計時非必要情況下，都要跳過拼縫，尤其是“圓”這個造型。
拼接屏：46寸，55寸 物理分辨率：1920*N 1080*N（n代表屏幕數(shù)量），1.7mm、3.5mm 、0.88mm、0.44mm、無縫隙；企業(yè)常用（1.7mm 和3.5mm）
大屏拼接縫隙：設(shè)計時應(yīng)盡量不要跨屏去設(shè)計，會使畫面交叉，不重疊，尤其是圓形。
大屏拼接處理器主要功能是將一個完整的圖像信號劃分成N塊后分配給N個視頻顯示單元，完成用多個普通視頻單元組成一個超大屏幕動態(tài)圖像顯示屏。大屏拼接處理器輸入信號數(shù)量和類型取決于用戶需要，輸出信號數(shù)量等于顯示單元數(shù)量。
矩陣是將多路輸入信號切換輸出到多個顯示設(shè)備，一般來說輸入信號數(shù)量要大于輸出信號數(shù)量。（我們想在9塊顯示器上同時監(jiān)控100個攝像頭傳來的信號，就用矩陣來實現(xiàn)即可）
視頻矩陣是指通過陣列切換的方法將m路視頻信號任意輸出至n路監(jiān)控設(shè)備上的電子裝置，一般情況下矩陣的輸入大于輸出即m>n。有一些視頻矩陣也帶有音頻切換功能，能將視頻和音頻信號進行同步切換，這種矩陣也叫做視音頻矩陣。
模擬視頻矩陣的輸入設(shè)備：監(jiān)控攝像機、高速球、畫面處理器等很多個設(shè)備，顯示終端一般監(jiān)視器，電視墻，拼接屏等（通常視頻矩陣輸入很多，一般幾十路到幾千路視頻，輸出比較少一般2-128個顯示器；例如64進8出，128進16出，512進32出，1024進48出等）。
4*2大屏展示端，我們通過控制端，借由拼接處理器可以對大屏進行隨意開窗，漫游，疊加，畫中畫等效果。在控制端拖動布局，大屏?xí)S之改變布局，非常方便。下面我就借由我以前做過的一個項目幫助大家理解一下拼接處理器的優(yōu)勢以及如何設(shè)定不同場景。
如果你們企業(yè)還在因為屏幕適配以及尺寸問題而糾結(jié)，或者想展示：開窗，漫游，疊加，畫中畫等效果，毫無疑問你們應(yīng)該選擇拼接處理器，這比傳統(tǒng)投屏方式更合適，更沒有比例不對的困擾。
把控制端的分屏進行編號，接下來移動控制端對應(yīng)的編號區(qū)塊，就可以對大屏進行重新布局，圖中展示的正是我們的預(yù)設(shè)正常場景。場景為居中布局，左右兩側(cè)為圖表展示。
對控制端進行隨機布局，將主視覺模塊移動到左側(cè)四塊屏幕，圖表都集中在右側(cè)，由此我們就由預(yù)設(shè)場景的居中布局變成了左右布局，左側(cè)為主視覺。
可以隨意的關(guān)閉大屏某個模塊的漫游，通過控制端進行屏幕的顯示以及不顯示。
畫面的任何一個模塊都是可以進行平移操作的，我們將模塊一和模塊五可以平移拖拽到任何一個位置。
畫面的任何一個模塊都是可以進行疊加到屏幕任何一處，還可以控制模塊置頂和置底，非常靈活。
基于web網(wǎng)頁端的展示方式，通過在web開發(fā)，有需要時會投屏到大屏上去展示。設(shè)備比例一定不能差距過大，比如16:9的投屏到32:9的大屏就不是合適，解決方案可以是外接一塊1920的顯示器即可。
此處要注意web端演示時，記得全屏顯示，瀏覽器邊框滑動條等可以不考慮，前端會做相應(yīng)的瀏覽器細節(jié)考慮，設(shè)計按正常分辨率走即可。
觸摸屏（Touch Panel）又稱為“觸控屏”、“觸控面板”、“觸控臺“，是一種可接收觸頭等輸入訊號的感應(yīng)式液晶顯示裝置。
當接觸了屏幕上的圖形按鈕時，屏幕上的觸覺反饋系統(tǒng)可根據(jù)預(yù)先編程的程式驅(qū)動各種連結(jié)裝置可用作控制端操作大屏，原理等同于ipad控制，只是載體不同。
設(shè)計規(guī)范以及按鍵反饋等交互體驗與ipad類似。
滑軌互動屏系統(tǒng)——又稱為滑軌電視、滑軌播放等，通過特殊設(shè)計的機械滑軌控制裝置，結(jié)合高清液晶拼接幕墻，實現(xiàn)對屏幕內(nèi)容的互動控制?；瑒拥讲煌恢闷聊徽故鞠嚓P(guān)信息，包括圖片、文字、視頻等，是一種全新的互動展示形式，可與觸摸同時使用。
虛擬沙盤/數(shù)字沙盤就是用計算機通過投影儀或者LED大屏顯示屏動態(tài)/靜態(tài)三維顯示：智慧交通、智慧市政、智慧農(nóng)業(yè)、智慧物流、智慧停車、智慧公交、智慧公安、智慧交運等模型，這是一種高科技的模型操作員通過程序，可以隨意調(diào)整沙盤的尺寸、規(guī)劃區(qū)域、區(qū)域布置，快速展示多種全新的創(chuàng)意。
具有三維顯示效果，并可以從不同角度觀察創(chuàng)意模型，篩選創(chuàng)意方案。注意虛擬沙盤和實體沙盤的聯(lián)動效果，實體沙盤為底，虛擬沙盤做效果疊加。
分辨率：物理實際分辨率
A：首先我們需要了解適配最主要的痛點就是：靈活，復(fù)用性高，可延展。
圍繞這幾個點我們可以通過模塊化開發(fā)去做，將每個模塊單獨開發(fā)。我們設(shè)計師做這種需求之前，就需要提前去構(gòu)思，在設(shè)計各模塊時，盡量使用可擴展和可自適應(yīng)的圖形，這樣面對適配的時候我們可以通過移動，縮放這些模塊，來完成適配。盡量避免二次設(shè)計以及開發(fā)，提升時間成本。
圖形放大適配
圖形位移適配
A：我們適配一定要記住靈活，減少工作量這些原則，如果不遵循這些原則，那么我們做適配的初衷就錯誤了。這樣我們還不如直接就重新開發(fā)一套了。就好比我們通過控制端去控制大屏，如何用開發(fā)一套的時間去適配兩個甚至是多個終端，這是我們需要注意的。當然考慮到一些實際情況，會有一定程度上的修改，但是一定是要從節(jié)省工作量去出發(fā)的。
從命題我們可以看到4*2的拼接屏，我們可以通過一塊屏幕為1920*1080去計算，那么通過計算分辨率應(yīng)該是1920*4 &1080*2，也就是7680*2160，這樣就計算出我們的分辨率了。
工作中相信不少同學(xué)都遇到過這種只知物理尺寸而不知道分辨率的項目，那么我們只能通過計算大概的設(shè)計分辨率來出初期的設(shè)計稿件。
此場景下公式為：15/4=X/2160 X=8100 那么可以大概得出寬度大概為8100像素（只是我們通過計算大概得出來的）
此場景下公式為：15/4=X/1080 X=4050
結(jié)果一：如果正方形比例不變，設(shè)計尺寸無限接近于大屏實際比例；
結(jié)果二：如果正方形比例被拉伸，設(shè)計尺寸小于大屏實際尺寸；
結(jié)果三：如果正方形比例被壓縮，設(shè)計尺寸大于大屏實際尺寸。
等比例投屏，投屏電腦投到2*2大屏（4K）
投屏電腦支持輸出4K分辨率，投屏電腦分辨率以3840*2160作為設(shè)計，投到4K拼接屏上，大屏?xí)昝勒故?，并且畫面非常清晰?
投屏電腦支持輸出2K分辨率，投屏電腦分辨率以1920*1080作為設(shè)計，投到4K拼接屏上，只會以1920*1080進行輸出，因為輸出像素只能支持2K，也只是1920*1080的放大。
使用場景：科技展廳，以及一些帶主機的設(shè)備。
此種情況，一般我們的大屏?xí)詭е鳈C，大屏本身就可以看成一個顯示器非常大的電腦。我們?nèi)绻枰M行可視化演示，那么我們直接就可以通過顯示器的尺寸去做設(shè)計，這樣就是大屏的設(shè)計尺寸。
一般這種靠硬件的投射，都是在拼接處理器的處理下，將多個屏幕拼合成一個大的顯示器，再通過拼控系統(tǒng)（硬件投屏）進行輸出。
一般我們可以將我們大屏的（UE4或者U3D開發(fā)）應(yīng)用程序打包，打包成一個后綴為.exe的應(yīng)用程序，在大屏電腦上直接點擊，程序就可以在大屏上完美的跑起來，也不需要去進行電腦投射大屏。
如果通過控制端去控制大屏，那么投射設(shè)備就可以通過多種方式去展示了，可以是手機，平板，觸摸屏，手勢控制，體感控制等等。
這種情況下投射設(shè)備的尺寸就按照本身設(shè)備的規(guī)范去設(shè)計就可以了（比如750*1334，2048*1536），設(shè)計尺寸就是我們大屏本身的分辨率就可以了。
此種情況主要使用場景：屏幕寬度非常高，并且內(nèi)容可以分很多模塊展示，模塊彼此之間不受影響?yīng)毩⒄故?，這種情況下我們就可以通過此種方式去投屏。
通過多個主機分別去投射大屏的同等大小區(qū)域，比如圖中的場景模塊被我分成了四等份，我們就可以通過四臺主機去分別投射四個模塊，形成一個完整的大屏。
此種大屏設(shè)計尺寸我們以輸出設(shè)備的尺寸為主要參考，四臺主機那么整體寬度就是1920*4=7680，高度就是1080（如果設(shè)備支持4k輸出，那么提升相應(yīng)的設(shè)備尺寸*2就可以了）。
A：我們要記住，如果面對的是正常比例投屏到非等比的大屏，我們需要遵守的規(guī)范一定是：一切以大屏展示為主。所以我們設(shè)計尺寸一定是按照20:3來設(shè)計的，大屏展示正常才是我們的唯一標準，投屏電腦可能會出現(xiàn)的問題，我們只能妥協(xié)（投屏電腦可能只能展示很小的一部分，但也是沒有辦法的）
那么我們遇到這種是否就沒有辦法了呢？在這阿勇給大家提供了三種解決辦法，在實際工作中，我也遇到過這種問題，所以在這給大家分享一下。
A：前面的文章我們已經(jīng)介紹過拼接屏的尺寸的問題，這個問題的解答：1920*9/1080*6 ，這個就是設(shè)計分辨率，通過計算得出，最終設(shè)計稿尺寸為17280*6480?？梢钥闯鲈O(shè)計分辨率確實太大了，設(shè)計的時候如何去優(yōu)化設(shè)計尺寸呢？
通過命題我們可以看出電腦分辨率是支持4K的，就是說輸出分辨率和顯示分辨率我們都是可以上4K的，而4K的分辨率一般會做3840*2160，再結(jié)合設(shè)計稿尺寸17280*6480，可以將整個效果圖尺寸縮小三倍，也就5760*2160。設(shè)計可以按照這個分辨率去出圖，最終交付給開發(fā)的就是切三倍圖，并提示開發(fā)是縮小三倍做的。
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
總結(jié)了商業(yè)項目中遇到的一些可視化案例以及科幻可視化風(fēng)格，大體的將其分為三個大類：傳統(tǒng)風(fēng)格、HUD風(fēng)格、FUI風(fēng)格。
傳統(tǒng)狹義上的數(shù)據(jù)可視化, 更多是純圖形去代表數(shù)據(jù)，通過圖形去展示數(shù)據(jù)，直觀的展示所需要表現(xiàn)的指標。數(shù)據(jù)可視化也有很多分類, 不過也許你也懶得了解了。
比如，網(wǎng)站后臺分析，可以說是可視化分析報表類的，例如百度統(tǒng)計，谷歌統(tǒng)計等等；比如，面對B端后臺的數(shù)據(jù)可視化，國內(nèi)做的最好的無非就是antdesign，element；我們此處說的是基于G端的數(shù)據(jù)可視化大屏，G端數(shù)據(jù)可視化從本質(zhì)上來說是注重直接解決問題，通過直觀的展示數(shù)據(jù)圖表去了解各個指標的詳細數(shù)值；
也有甚者比較注重視覺效果，要酷炫，心理學(xué)家說, 人腦70%的神經(jīng)信號來自視覺, 我們的視覺系統(tǒng)最完善, 而不同的感官之間, 多少是可以轉(zhuǎn)化的, 而且是每個人的天性。國內(nèi)傳統(tǒng)可視化對于此處的接受程度確實不一樣。B端和G端的用戶，對于可視化風(fēng)格的接受程度確實是不太一樣的，B端對于前沿技術(shù)以及可視化表現(xiàn)會有一定的接受能力，但是G端更多注重于界面酷炫，功能反而不是很重要了，這多少有點本末倒置的感覺。
平視顯示器(Head Up Display)，以下簡稱HUD，是運用在航空器的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要要的重要資訊。平視顯示器最早出現(xiàn)在軍用飛機上，降低飛行員需要低頭查看儀表的頻率，避免注意力中斷以及喪失對狀態(tài)意識(Situation Awareness)的掌握。
因為HUD的方便性以及能夠提高飛行安全，民航機也紛紛跟進安裝，汽車也開始安裝，在一些游戲用戶界面，很多地方都會采用HUD的風(fēng)格，比如射擊類，格斗類，動作類游戲等等（賽博朋克，堡壘之夜，絕地求生）。
相對于當前流行的扁平化設(shè)計，F(xiàn)UI可謂是在Ul設(shè)計中獨樹一幟，設(shè)計風(fēng)格十分鮮明，極具未來感和科技感。
FUI是一個非常有趣的Ul設(shè)計領(lǐng)域，是我們在日?，F(xiàn)實生活之中天法探索的用戶界面設(shè)計方式。在我們的日常工作中，通常日常設(shè)計很難有機會為宇宙飛船、時間旅行設(shè)備，或者感知型人工智能和外星人使用的用戶界面做設(shè)計。FUI使設(shè)計師有機會去突破現(xiàn)有的用戶體驗和用戶界面的限制，探索一個新的領(lǐng)域。通過虛幻界面設(shè)計我們可以大膽的設(shè)想以及尋找新的解決方案。例如我們可以大膽的設(shè)想AR技術(shù)的應(yīng)用，地圖可以采用全息投影技術(shù)、人與智能硬件的環(huán)境交互等等。
虛幻界面設(shè)計甚至可以是新的發(fā)明，它們可以作為一種概念的驗證它們可以啟發(fā)我們，提出問題，探索什么可行，什么不可行。正如科幻小說可以激勵人們登上月球或建造自動駕駛汽車一樣，虛幻用戶界面可以激勵人們?yōu)槲磥韯?chuàng)造技術(shù)。
如何培養(yǎng)和完善自己的可視化設(shè)計風(fēng)格呢？其實這個問題有點狹隘，不同客戶不同使用場景我們可能風(fēng)格都會不太一樣，但是唯一我們不會變的是我們對于組件圖表的理解，圖表圖形的展示形式。
一個合格的可視化設(shè)計師，對于任何可以參考的頁面，都可以迅速領(lǐng)略到可以應(yīng)用的部分頁面和展示形式，多吸收知識，提升自己，這就是取其精華，去其糟粕的正確解答吧！所以要將現(xiàn)有風(fēng)格結(jié)合，完善設(shè)計理念，提升視覺技法，這才是當下比較重要的。
最近由于工作中的一個項目，對自己充滿了懷疑，究竟什么叫科技感？不同的應(yīng)用場景，科技感是否還依舊有效？同展示條件下不同應(yīng)用場景，又會有什么樣的差異？究竟是什么樣子的設(shè)計，才能被“甲方爸爸"認定為科技感十足，并且很酷炫呢？從酷炫科技感出發(fā)，總結(jié)了以下四個方面去解析科技感風(fēng)格。
相信很多可視化設(shè)計師聽到最多的一句話：要酷炫，要科技感！每每聽到這句話我都會變得非常暴躁。究竟是酷炫科技感代表可視化？還是數(shù)據(jù)可視才是可視化的內(nèi)核？每每遇到這種令人糟心的問題，我想的是如何通過自己的專業(yè)知識去解釋，可是我發(fā)現(xiàn)根本解釋不清楚，也無法令甲方客戶信服，甚至和同為乙方的總包也無法達成統(tǒng)一戰(zhàn)線。那么我們應(yīng)該如何去做呢，又應(yīng)該如何去解釋科技感這個抽象的概念呢？
提到科技感色系一般我們想到的就是藍色系（科技藍），但是很多人可能走進了一個誤區(qū)，科技感的專屬色彩并不是只有藍色，而且一些藍色確實讓我們有審美疲勞的感覺。如圖，就是我們比較常見的傳統(tǒng)可視化設(shè)計，一眼看去滿屏都是藍色，具有中國特色的藍色科技感。正如所有人都公認的黨建題材為紅色加黃色，那么科技感真的只有藍色專屬嗎？黨建題材都是紅色專屬嗎？
由此可見，紅色并不是黨建題材的專屬色彩，存在即合理，也并沒有說黨建可視化一定要做成紅色的。制約的因素有很多：項目背景，項目需求，設(shè)計提案，專業(yè)認知等等，可視化大屏歸根結(jié)底還是做的是服務(wù)設(shè)計，因此服務(wù)好客戶，得到客戶的認可，就能體現(xiàn)設(shè)計的價值。但是在設(shè)計稿中可以發(fā)現(xiàn)，界面運用到了一些黨建色彩的元素，也是通過這種方式去展示，這也是設(shè)計師需要注意的一點。
藍色并不是科技感的專有屬性，任何一種顏色都是可以塑造科技感的感覺的。比如適合用綠色的場景做的界面，沒有做好看，那只能怪自己學(xué)藝不精，跟配色無關(guān)。不排斥藍色，但是討厭到處都是用藍色，上來就是用藍色。
說到背景這是一個影響科技感非常重要的因素，一張超神比比皆是，一張超鬼也是隨處可見，究竟什么樣的背景才是一個優(yōu)秀的可視化界面所具備的？不是畫面發(fā)光，有閃光點，宇宙或者銀河那種圖；也不是科技點線，帶漸變的線條（混合工具做出來的那種）看起來就特別復(fù)雜；也不是那種亮度超過畫面任何一個元素的圖。
科技感的背景所起到的作用應(yīng)該是襯托畫面，而不是在畫面中比較跳，搶視覺，一大坨發(fā)光或者復(fù)雜的圖形，只會起到反作用。
圖形應(yīng)該是以上指標中，最令人可以接受對科技感風(fēng)格詮釋的一種，科技感的圖形到底有哪些特征，我們又該如何去做呢？
通過以上案例我們可以發(fā)現(xiàn)，所謂圖形表現(xiàn)科技感，最大的特征就是點線面應(yīng)用的多元化，通過一種或者多種規(guī)律將點線面組合起來，線條粗細長短不一，點大小不等。在使用圖形進行點綴搭配時，切不可過于花哨，從而搶了主要內(nèi)容的風(fēng)頭。
此處可能會出現(xiàn)一些三維樣式的圖形，特殊的視角以及不常見的設(shè)計都會增加科技感的元素，但是也不是所有的三維都可以比二維更有科技感的。我最近做的就是甲方客戶一直覺得：三維元素太少了，科技感不夠。我就納悶了，到底什么才是科技感？難道科技感只能用三維的來表示了？只能說一定條件下，三維是優(yōu)于二維展示的，但這也不是絕對的。如果你的場景主視覺本身就是二維范疇的，何必要要求組件三維展示。
下圖的二維科技感表現(xiàn)上肯定是超過三維地球的，至少我是這么認為的。
動效應(yīng)該是最能體現(xiàn)科技感的方式了，通過動態(tài)演示組件，通過動效展示界面，遠遠比靜態(tài)頁面要合理的多。動效主要是通過：位移、旋轉(zhuǎn)、透明度（閃爍）、縮放等方式去制作，形成獨特的動畫節(jié)奏。
可以發(fā)現(xiàn)科技感動效一般都伴隨著極快的閃爍動畫，動畫的節(jié)奏也是比較偏快，再通過出現(xiàn)動畫，字符偏移，剪切路徑等演示組件的形成過程。
可能大家沒有遇到過這種情況，比如在三維建筑可視化中，科技感本身就依賴于場景的表現(xiàn)，但是不知道大家有沒有試過，將三維建筑可視化換成二維GIS之后，我們?nèi)绾稳ナ巩嬅姹憩F(xiàn)的更具科技感呢？
圖一，圖二，圖三分別就是替換不同的場景，那么我們來看看這些場景為什么不適合原本的之前的科技感風(fēng)格呢，我們一起思考一下~
大家可能會覺得科技感只針對于一些特殊的場景，或者說是深色場景，比如一些實景地圖和衛(wèi)星地圖又該如何去表現(xiàn)科技感的元素呢？那么如果是淺色可視化我們又該如何去做科技感呢？
其實這本身就是一個偽命題，三維表現(xiàn)對畫面的沖擊力是非常強的，對于畫面視覺效果的提升有很大的幫助。不過是否所有的三維就是最合適的呢，這個也確實有待商榷。不過能肯定的是，一定程度上，三維一定會比二維更加具有沖擊，更加具有科技感。
其實最正確的表現(xiàn)就是二維表現(xiàn)加上三維場景展示，兩者相輔相成，對于畫面的展示才是最好的。通過下面這組案例可以發(fā)現(xiàn)，二維表現(xiàn)加上三維場景才是最優(yōu)解。
很多同學(xué)對于文字需求如何制作科技感有很多的疑問，通過最近的作圖，總結(jié)出四種關(guān)于文字排版科技感的展示，總結(jié)起來其實就那么幾點：裝飾，圖形，字體，版式，表現(xiàn)形式...
其實對于數(shù)據(jù)可視化設(shè)計科技感的研究，不僅需要了解表現(xiàn)層，更需要上升到業(yè)務(wù)層。一些特定的圖形或者裝飾，對于畫面的豐富程度一定是有幫助的。
講了這么多，不知道對大家理解科技感是否有幫助，如何提升畫面科技感，是我們做為數(shù)據(jù)可視化設(shè)計必定會面臨的一大難題。希望大家在以后的工作或者項目中，多多酷炫，多多科技感?。?！
因此我們要確定的是，根據(jù)這四個“W”去確定整體業(yè)務(wù)框架的基礎(chǔ)構(gòu)成，這對于設(shè)計風(fēng)格的初步意向確認有著很積極的意義。
who：王局長
when：領(lǐng)導(dǎo)人會議時
where：公安局
what：新基建建設(shè) 數(shù)字化轉(zhuǎn)型事項
在領(lǐng)導(dǎo)人會試上，公安局王局長提議通過了關(guān)于新基建，數(shù)字化轉(zhuǎn)型的各種措施。面對這一場景，有以下幾個問題。受眾是誰？需要干什么事情？誰去干？數(shù)字化轉(zhuǎn)型怎么做？怎么實現(xiàn)？需要用到的技術(shù)？展示風(fēng)格？重功能？還是重展示？
在有了這些的前提下，對于我們設(shè)計風(fēng)格的選擇就有了很強的指導(dǎo)意義，比如王局長比較喜歡多色搭配，科技感強的風(fēng)格，主要為了配合展示匯報，那么就可以通過這一些需求，初步制定風(fēng)格為效果酷炫的展示類大屏，但是主視覺的展示形式還是要根據(jù)其他的具體情況去進一步確認。
在面對一些特有的項目時，一般客戶會給出一些參考術(shù)語：“3個一帶”，“2個方針”，“八大成果”“三山，兩水，百林，千田”......
面對這種問題，能做的就是理解其包含的真實意義，究竟需要展示哪方面的，了解清楚項目的背景需求，結(jié)合客戶所說的一些關(guān)鍵字段，剖析以上的內(nèi)容可以發(fā)現(xiàn)，客戶通過一些方針和方法，對“山水林田”進行治理，取得了一些階段性成果。
因此展示的內(nèi)容可以確定為智慧治理，或者智慧生態(tài)方向的，然后就可以根據(jù)項目背景的內(nèi)容去選擇可以應(yīng)用的具體的一些方案了。
因在到了需求分析的階段，可以根據(jù)客戶提供的大量的資料和業(yè)務(wù)需求，去明確的設(shè)計方向，究竟是需要展示哪些內(nèi)容？可以提供的數(shù)據(jù)有哪些？展示條件（硬件設(shè)施）是否具備？想要的效果有哪些？
比如客戶需要查看到山水林田的各個改進措施的效果，以及改進前后的效果對比。說到這單純的二維GIS和影像已經(jīng)不太好滿足了，那么可以將場景風(fēng)格定位到三維展示，需要實際1:1建模，至于是通過WEBGL，UE，UNITY就看各自的團隊擅長的方向了。
場景大體風(fēng)格確定，那么展示面板需求根據(jù)場景去搭建就可以了，這樣一個完整的風(fēng)格選擇過程就算初步走通了，具體的驗證環(huán)節(jié)，可以在一次次會議中再去進行交流和修改即可。
展示容易，風(fēng)格切換皮膚多，可編輯性高，開發(fā)難度低，地圖資源較多，適合快速搭建可視化大屏模版，開 源內(nèi)容較多，前端開發(fā)直接調(diào)用樣式即可。
展示形式較普通，地圖風(fēng)格樣式不出彩，設(shè)計效果也會打很多折扣，很難與同行拉開差距。
開發(fā)過程中可能需要基于高德API以及一些平臺，對封裝地圖進行二次開發(fā)，沒有GIS開發(fā)經(jīng)驗的前端，會比較困難。
https://lbs.amap.com/product/mapstyle#/ Mapbox，高德API，百度API，超圖，天地圖等等。
以高德API為例
展示靈活，可下載svg矢量區(qū)塊，并可下載json文件直接交付開發(fā)，可下鉆到縣級，可編輯性高，一般會結(jié)合二維GIS來展示，有插件可以直接繪制全國地圖。
不夠立體，可選樣式比較少，畫面主視覺容易空洞導(dǎo)致畫面效果不強。
開發(fā)對于設(shè)計圖的一些效果還原比較困難，例如發(fā)光，漸變等等。只能做一些比較基礎(chǔ)屬性的修改，對于效果還原可能達不到80%以上。
http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4
以DATAV地圖下載器為例
展示效果好，三維場景，有立體效果，材質(zhì)貼圖不同效果會完全不一樣，可編輯性較強，相比較二維更推薦這種表現(xiàn)形式。
三維范疇，不會三維知識的小伙伴會比較難，此處會涉及到三維軟件合并擠壓，展UV，漫射貼圖，QGIS制作高度貼圖，PS制作法線貼圖等等知識點。
對于不懂三維的小伙伴比較困難，涉及知識點較多，容易一知半解。
https://mp.weixin.qq.com/s/zjR_pJyU1jpeLJMXZ-4FyA（原作者已授權(quán)）
3D地圖建模及貼圖的制作獲取方法
展示形式新穎，展示效果非常好，三維表現(xiàn)往往讓人耳目一新，對于可視化的展示可以說是所見即所得，深得客戶喜愛。
開發(fā)難度高，專業(yè)性人才比較少，懂三維的設(shè)計也是非常的少，對于三維知識以及引擎開發(fā)知識需要比較熟悉才行。
人才稀缺，入門難，做好更難，教程自學(xué)難度有點大，例如cityengine程序化建模，houdini程序化建模等等。
https://space.bilibili.com/21247145?from=search&seid=10582171815506234319
cityengine程序化建模
主視覺效果強，特殊場景的處理能夠很完美的講清邏輯，對于圖形化的理解有很強的意義。
邏輯復(fù)雜，難懂，比較抽象，專業(yè)難度高，對業(yè)務(wù)理解能力需要很強。
邏輯處理比較難，設(shè)計效果比較難以想象，設(shè)計容易偏離主題，比如數(shù)據(jù)中臺，是一個非常虛幻的東西，很難講清楚處理邏輯和過程。
https://www.zcool.com.cn/work/ZMzg4OTQ5ODQ=.html
以知識圖譜為例
可視化風(fēng)格三大分類以及對于圖形的應(yīng)用（傳統(tǒng)、HUD、FUI）；
如何培養(yǎng)自己的數(shù)據(jù)可視化設(shè)計風(fēng)格（色彩+圖形+板式）；
影響科技感風(fēng)格的四大影響因素（配色，圖形，背景，動效）；
設(shè)計風(fēng)格的選擇以及確定思路（根據(jù)場景、含義、需求）；
可視化風(fēng)格的應(yīng)用以及拓展（各種主視覺的應(yīng)用優(yōu)缺難點）。
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
今天就帶大家好好聊一聊可視化大屏設(shè)計中的字體、字號、字重、字體優(yōu)化等一系類注意事項。字體篇主要分為四大模塊：字體選擇與字重、字號規(guī)范與應(yīng)用、字體優(yōu)化與交接、常用字體與推薦。
文字是界面中最核心的元素，是產(chǎn)品傳達給用戶的主要內(nèi)容，它的承載體即是字體。從字體的最基本屬性（字族、字類、字重、字號等）說起，熟悉字體的那些特征，了解字體在界面中的作用。
襯線又被稱為“字腳”，襯線體就是有邊角裝飾的字體。我們常用的西文字體Times New Roman等；中文比較常見的比如宋體、明體等。
無襯線體則與襯線體相反，通常是機械和統(tǒng)一粗細的線條，沒有邊角的裝飾。最具代表性的Arial、Helvetica的西文字體，中文比較常見的比如黑體，微軟雅黑等。
無襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞，騰訊谷歌等互聯(lián)網(wǎng)企業(yè)都是選用的無襯線體；襯線字體的優(yōu)雅與復(fù)古，則常用于藝術(shù)性文字，時尚品牌等。
因此在具有濃厚技術(shù)的可視化氛圍中，體現(xiàn)科技感和數(shù)字感，結(jié)合我們的觀測體驗，展示形式等，我們統(tǒng)一選用的字體是無襯線體。
在使用數(shù)字屏幕閱讀時，字體的選擇要選用無襯線體（比如黑體，微軟雅黑）厚重一點，不可選用襯線體（比如宋體，書法體）比較單薄。
標題可以用Bold，更厚重，更加醒目，且不需要長時間觀看；正文由于需要長時間觀看，因此采用Regular字重，觀感以及體驗更佳；
英文字體類型的使用，英文選擇更明顯的粗體，因為要展示數(shù)據(jù)，使得數(shù)據(jù)展示更加直觀，依舊是選用無襯線體，比較推薦：D-DIN字體。
字重用Regular，更加纖細精致，英文字體分為大小寫，一般推薦使用純大寫模式，因為大寫可以保證字體本身整齊，并且寬高都是一致的，對于排版以及展示會更加友好。
數(shù)字字體類型的使用，考慮畫面的字體的種類不超過三種，并考慮到字體的統(tǒng)一性，數(shù)字的字體與英文字體保持統(tǒng)一，比較推薦：D-DIN字體。
數(shù)字字體的字重盡量使用Bold，因為展示更加明顯，數(shù)字的展示一般都為數(shù)據(jù)展示，在界面的展示中，一般數(shù)字字體會比同字號下中文小4-6px，因此展示是保證數(shù)據(jù)清晰顯示，數(shù)字的字體大一點數(shù)據(jù)才能更清晰，更符合數(shù)據(jù)可視化展示。
數(shù)字字體盡量選用等距字體，比如數(shù)字“1”和“0”，有些字體的間距會相應(yīng)的縮小，我們要選用的就是等距字體，這樣在做一些列表數(shù)據(jù)對齊的時候，數(shù)據(jù)展示更加友好。
政府類客戶對于文字大小粗細的追求可以說是非常的偏激，字體加大加粗幾乎成了標配，這種需求下，我們能做的就是在原有規(guī)范的基礎(chǔ)上盡量去提升字號和字重。
常規(guī)16：9指的是1920*1080的分辨率
在字體大小的選擇上，參考了頁面上常規(guī)大小，定義了一套關(guān)于不同尺寸下的標準字號，正常1080P頁面，最小字號不小于16px。
此處字號并不是絕對，因為考慮到目標群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗，具體字號大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距，人為原因等因素。
常規(guī)32：9指的是3840*1080的分辨率
在字體大小的選擇上，其實是兩塊1080P的屏幕進行拼接，因此如果畫面內(nèi)容較多時，定義最小字號不小于16px。
如果畫面內(nèi)容較少時，具體字號大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素，對字體進行相應(yīng)的放大，比例合適即可。
此處字號并不是絕對，因為考慮到目標群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗。
特殊尺寸指的是非主流的分辨率，比如2880*1920的分辨率
這塊的字號大小比較難定義，因為需要考慮的因素很多，總體來說字號大小如果高度在1080px左右，那么就按16:9的字號規(guī)范來算。
如果高度高于1080且很多，則需要等比計算或者放大，具體實踐出的準確數(shù)值還得需要根據(jù)大屏的實際情況來綜合考慮，這里只是提供一些基礎(chǔ)計算方式。
字號的大小受到屏幕大小的影響；
字號的大小受到界面內(nèi)容的影響；
字號的大小受到觀測距離的影響；
字號的大小受到設(shè)備性能的影響；
字號的大小受到主觀人為的影響；
給開發(fā)的字體太大怎么辦？如何優(yōu)化？開發(fā)采用默認字體去開發(fā)怎么辦？開發(fā)用部署電腦沒有這個字體去打發(fā)你又該怎么辦？
其實我們可以用一些特殊的方法對原有的字體包進行優(yōu)化，比如英文字體，我們可以刪除非必要的中文字體和數(shù)字，符號，只保留一些必要的英文字母。具體方法如下，我們可以用FontCreator軟件去進行字體的優(yōu)化與刪減，并修改字體細節(jié)，重新命名發(fā)布。
同時如果有意向的同學(xué)，也可以用自己設(shè)計的字體去應(yīng)用到開發(fā)，這樣的操作不是一舉兩得嗎？
優(yōu)化字體教程：https://www.bilibili.com/video/av82311138
默認字體開發(fā)可能有時候會出現(xiàn)文字換行，或者文字放不下的情況，因為不同字體的字間距以及大小可能是不同的，因此在初期就需要跟開發(fā)協(xié)調(diào)好，跟設(shè)計效果圖的字體保持同步，這樣才能保證設(shè)計效果的還原。
字體的存放一般是有兩種，一種是放到單獨的服務(wù)器然后每次加載去服務(wù)器訪問字體，另一種是跟代碼放到一起。對于字體大小的要求。本地存儲不需要考慮字體包的大小，云存儲需要考慮字體包大小。
云存儲一般字體包大小的話可以限制在2、3M左右，5、6M的字體包就已經(jīng)非常大了，太大會影響我們字體的讀取，畫面加載很慢。
最優(yōu)解就是在部署本地的電腦上安裝你需要的字體，這樣的話程序就自動讀取，可以識別本地部署的字體；如果不支持本地化部署的，字體是存放在服務(wù)器或者是跟代碼打包放一起的，可以要求開發(fā)在全局代碼中多寫幾個備用的字體。
比如你是Windows系統(tǒng)，哪呢么自帶的就是微軟雅黑，IOS系統(tǒng)自帶的就是蘋方平臺，會自動根據(jù)寫出的代碼按順序篩選自帶的系統(tǒng)字體。
一些特別好用的字體，會在設(shè)計過程中提升畫面視覺，因此給大家推薦并分享了一些可以做可視化大屏的商用中英文字體。
可視化商用免費字體鏈接: https://pan.baidu.com/s/1QCihCIs5OK0w-f0oFv8BQQ 提取碼: owve
中文字體包含了一些可以做標題的一些造型比較好看的字體，比如優(yōu)設(shè)標題黑，站酷高端黑體，盧帥正銳黑體，胡曉波男神體等等?？勺稣淖煮w的比如，蘋方簡體，思源黑體等等。
英文字體和數(shù)字字體主要是分享了一些數(shù)據(jù)展示比較奇特的造型字體，比如：DS-digital、Furore、以及正常數(shù)據(jù)展示的D-DIN字體家族等。
1、字體的最基本屬性：字族、字類、字重、字號，通過四種基本屬性為切入點，精準的去講述大屏可視化的字體規(guī)范和樣式。
2、在可視化大屏設(shè)計中，字體更加偏向于無襯線體，無襯線字體所具備的技術(shù)感和理性氣質(zhì)，更受科技型企業(yè)或品牌青睞；
3、在可視化大屏中，展示數(shù)據(jù)的重要性不言而喻，因此要注意中文、英文、數(shù)字字體的選擇以及注意事項，一切以數(shù)據(jù)展示更加明顯為前提；
4、在不同屏幕中，可視化大屏的字號大小規(guī)范是有區(qū)別的，并且需要結(jié)合影響字號的五大因素：屏幕大小、界面內(nèi)容、觀測距離、設(shè)備性能、主觀人為去制定字體規(guī)范；
5、通過FontCreator軟件去對字體進行優(yōu)化，掌握字體的刪減發(fā)布以及交付開發(fā)的方法；
6、了解開發(fā)存儲字體的兩種形式，一種是本地化部署，一種是與代碼打包服務(wù)器云存儲，以及了解兩種方式的優(yōu)缺點；
7、了解可視化開發(fā)關(guān)于字體交接時的注意事項，可以通過自己的理解去解決工作中的關(guān)于字體的問題；
8、推薦了常用的可視化大屏的字體：中文字體、英文字體；
9、如果畫面內(nèi)容較少時，可以適當提高字號，反之亦然，比例合適即可。
10、可視化大屏設(shè)計字體規(guī)范不存在絕對字體規(guī)范。
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
色彩篇主要分為：色彩三要素、配色方法、可視化中的顏色擴展、色彩選用原則、行業(yè)配色
主要想通過色彩的原理，配色的多種方法，以及如何拓展可視化界面中的元素顏色（文字，裝飾，背景，彈框等），最后總結(jié)了顏色的記憶屬性（行業(yè)配色）。
色相是色彩的首要特征，是區(qū)別各種不同色彩的最準確的標準。比如紅色、黃色、藍色等。色相可以具體到各個行業(yè)所代表的不同顏色，比如公安為藍色，黨建為紅色，金融為橘色等。
色相只是顏色的另一種說法。
明度可以簡單理解為顏色的亮度，不同的顏色具有不同的明度，例如天藍色就比紅色的明度高，如綠色中由淺到深有粉綠、淡綠、翠綠等明度變化。
明度定義了顏色的明亮程度，從黑色到白色。
飽和度也叫純度，通常是指色彩的鮮艷度。
色彩的純度強弱，是指色相感覺明確或含糊、鮮艷或混濁的程度。色彩的純度變化，可以產(chǎn)生豐富的強弱不同的色相，而且使色彩產(chǎn)生韻味與美感。
是指顏色從純度（100%）到灰度（0%）的取值范圍。
圖片配色法可以運用PS工具，選擇你鐘意的一張圖，拖進PS里，執(zhí)行：濾鏡-像素化-馬賽克，就可以得到基于圖片的馬賽克像素點，然后吸取顏色即可。
插件配色法可以通過Eagle、美葉等軟件直接獲取圖片色，非常之方便，此種方法相比較于圖片配色法，更具科學(xué)性和準確性。
利用色環(huán)配色大家可能都知道，但是我們需要做到的是如何靈活的配色以及進行適量的處理。
1、鄰近色配色法
三種顏色組成，觀感更加舒適，色系搭配更舒服。
2、補色配色法
補色是指色環(huán)中兩個對稱的色塊，他們是色環(huán)中相隔最遠的兩個顏色，因此兩種顏色的對比也是最大的。
3、補色分割配色法
補色分割與補色配色相似。首先選定一個顏色，然后使用它一個鄰近色，最后找出它的補色。（也叫等腰三角形配色）
4、三角配色法
三角色由三種顏色組成，是色環(huán)上平均分布的三種顏色，共同在色環(huán)上連接成三角形。這種方法更適合色彩鮮艷。
5、四角配色法
這種方法由兩對補色組成，共4種顏色，其中只有一個是主色，另外三個顏色是輔助色。
通過對主色的疊加不同透明的黑色與白色（擴展白度和擴展黑度），可以擴展出背景、彈框、裝飾、文字等顏色。
擴展白度就是為所有顏色創(chuàng)建出更多較淺的顏色（增加白色透明）。比如我們通過大幅提升主色的白度，可以作為項目的文本色，那么我們該如何增加白度呢？
擴展黑度就是為所有顏色創(chuàng)建出更多較深的顏色（增加黑色透明）。比如我們通過大幅提升主色的黑度，可以作為項目的背景色和卡片底色，那么我們該如何增加黑度呢？
我們通過將主色增加黑度的方式，去定義背景色。具體數(shù)值：主色增加90%-95%黑色，作為背景色。
我們通過將主色增加黑度的方式，去定義彈框色以及模塊背景色。具體數(shù)值：主色增加75%-85%黑色，作為彈框色和模塊背景色。
我們通過將主色增加黑度的方式，去定義裝飾線色。具體數(shù)值：主色增加50%-70%黑色，作為裝飾線的顏色。
我們通過將主色增加黑度的方式，去定義裝飾點色。具體數(shù)值：主色增加30%-50%黑色，作為裝飾點的顏色。
我們通過將主色增加白度的方式，去定義正文文字色。具體數(shù)值：主色增加90%-95%白色，作為正文的顏色（輔助文字可以減少一半透明度）。
餅圖中可以會用到很多的顏色去配置，那我們應(yīng)該如何去配置呢？
遵守“631”“三不”“兩多”這幾個原則，可以讓你在可視化中的色彩搭配能力更加自如。
運用配色631法則，將配色定義為主色60%，輔助色30%，對比色10%去貫穿整套界面。文字的顏色通過重要，普通，次要去分配，帶有色彩傾向豐富頁面視覺。
1、不選用同一色系
同色系會使畫面看起來對比度非常弱，色彩指代感弱，色彩之間不好拉開層級。
2、不選用顏色接近
鄰近色會使畫面感覺偏弱，沒有強對比，畫面層次感不足。
3、不選用同色透明
同色透明會讓畫面非常的灰，是可視化中的大忌，切勿使用。
1、多選用對比色
強對比可以拉開視覺層級，突出畫面，視覺至上。
2、多選用黑白灰
黑白灰可以使畫面變的非常高級，并且畫面細節(jié)度拉滿。
色彩具有很強的記憶屬性，因此用戶會將他們感受到的內(nèi)容與色彩聯(lián)系起來。
可以從大量資源池中去尋找靈感，比如金融行業(yè)，我們可以從已知的金融元素都是紅黃搭配的，因此我們在配色時肯定需要注意這一特征的。
交通一般以藍色為主調(diào)，配合紅黃綠（紅綠燈顏色）三種代表著道路擁擠程度，藍色是大多數(shù)人最喜歡的顏色。由于藍色自帶的親和力，它是數(shù)字產(chǎn)品設(shè)計中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧靜、信任。
適用： 交通，公安，監(jiān)控，政府機關(guān)。
缺點： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
文化旅游代表著健康，和諧，自然，戶外，綠色是大自然的顏色，人們對綠色的喜愛程度僅次于藍色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長。
適用： 醫(yī)療康復(fù)、生態(tài)、旅游。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
藍色是大多數(shù)人最喜歡的顏色。由于藍色自帶的親和力，它是數(shù)字產(chǎn)品設(shè)計中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧靜、信任。
適用： 公安，監(jiān)控，交通，政府機關(guān)。
缺點： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
電力行業(yè)一般以國家電網(wǎng)的綠色系為主，給人一種安全可靠，綠色環(huán)保的電力行業(yè)。
含義： 安全、可靠、綠色、環(huán)保。
適用： 電力，電網(wǎng)，網(wǎng)絡(luò)安全。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
生態(tài)代表著健康，和諧，自然，綠色是大自然的顏色，人們對綠色的喜愛程度僅次于藍色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長。
適用： 醫(yī)療康復(fù)、生態(tài)、旅游。
缺點： 當綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
金融行業(yè)非常注重屬性搭配，暖色系可以增加購買欲望，使人有溫暖的感覺。橙色被認為是一種非常有活力和熱情的顏色， 它促進活動和創(chuàng)造性思維。
含義： 創(chuàng)意、能量、熱情、活躍、煩躁。
適用： 金融，證券，貨幣，黨建。
缺點： 當橙色作為主色時，你可能需要另一種顏色作為警告色。
1、加強對色彩三要素：色相、明度、飽和度的認知；
2、掌握三種配色方法：圖片配色法、插件配色法、色環(huán)配色法，以及了解配色的原理；
3、可視化界面中如何擴展顏色（白度，黑度，背景，彈框，裝飾，文字，輔助色等）；
4、配色631原則，主色、輔助色、對比色應(yīng)用原則；
5、“三不”原則：不選用同一色系、不選用顏色接近、不選用同色透明；
6、“兩多”原則：多選用對比色、多選用黑白灰；
7、不同行業(yè)配色注意事項，通過元素搜集以及情緒版，配置不同行業(yè)可視化配色；
8、顏色的含義以及適用的地點；
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
首先一般講適老化無障礙設(shè)計，我們都要提到的就是通用性設(shè)計和包容性設(shè)計。
原則：強調(diào)設(shè)計所有的系統(tǒng)和產(chǎn)品，使每個人都能使用，無論他們的年齡或能力。
百度百科將通用設(shè)計定義為：“能被失能者所使用，就更能被所有的人使用。通用設(shè)計的核心思想是：把所有人都看成是程度不同的能力障礙者，即人的能力是有限的，人們具有的能力不同，在不同環(huán)境具有的能力也不同?！?
通用設(shè)計中應(yīng)當也包含對于特殊人群的基本考慮，要讓目標人群覺得：魚和熊掌都可兼得，既照顧了特殊人群的使用，又兼顧所有人。
原則 ：好的設(shè)計應(yīng)該滿足盡可能多得使用者的需求。
百度百科將包容性設(shè)計定義為：包容性設(shè)計著眼于清楚源于使用主體而造成的各種障礙，使每個個體都能平等、自信、獨立的正常使用，為同一適用條件下的互動提供了新的視角，也為創(chuàng)造性和問題解決導(dǎo)向的設(shè)計提供了機會。
通過分析客戶的困境，結(jié)合現(xiàn)狀進行深入分析，發(fā)掘政府端客戶的普遍性存在的問題。
大多數(shù)政府省市級領(lǐng)導(dǎo)人的年紀均在60左右，由于年齡普遍較大，對于設(shè)計的認知會有偏差，對于審美的把控以及設(shè)計本身的價值理解會偏弱。
從去年十月上旬開始，省級黨委換屆拉開大幕，在至今近8個月的時間里，全國31個省區(qū)市先后展開換屆。經(jīng)過此次換屆，干部隊伍的年齡結(jié)構(gòu)得到進一步優(yōu)化，初步形成“50后”為主導(dǎo)、“60后”漸成中堅的格局。
根據(jù)公開資料統(tǒng)計，31省區(qū)市書記平均年齡為58.1歲。其中，“40后”書記有6位，“50后”有22位，“60后”也有3位，某區(qū)黨委書記胡XX和XX省委書記孫XX同為63年出生，是最年輕的書記。
視力：老年人視力的下降，影響眼睛對空間、顏色、明暗等加工等；
聽力：聽力弱化造成的聽不清楚，尤其是在嘈雜的環(huán)境中，老年人聽起聲音來會更吃力；
表達力：專業(yè)化的術(shù)語以及需求，會使表達和溝通不便；
互聯(lián)網(wǎng)和人工智能等技術(shù)發(fā)展變化太快導(dǎo)致認知力的不足。
絕大多數(shù)的老年人對現(xiàn)在數(shù)字化的產(chǎn)品很陌生，再加上復(fù)雜的界面操作，需要反復(fù)的學(xué)習(xí)使用才能熟悉掌握。
ToG類型的項目，我們的客戶群體是政府的某個部門（G端行業(yè)中，政府部門因為權(quán)限和管轄內(nèi)容的不同，客戶的訴求也會不一樣，同時由于決策層是一級一級往上的，對于各個層級的領(lǐng)導(dǎo)都需要去進行滿足，對于設(shè)計的要求也就更高了），因此我們需要對客戶的心理進行重點挖掘。
政府部門的領(lǐng)導(dǎo)或者員工大多數(shù)都是高知人群，對于工作的態(tài)度都是非常嚴謹，喜歡按規(guī)矩辦事，分工明確，力求事情做到一絲不茍，有理有據(jù)，講究嚴謹做人，務(wù)實做事。
政府部門的保密工作需要做的非常到位，尤其是關(guān)于公安等民生問題時。另外政府類客戶一般對于數(shù)據(jù)的保密做的非常好，基本都是內(nèi)網(wǎng)開發(fā)，私有化部署，一切互聯(lián)網(wǎng)的東西連接內(nèi)網(wǎng)都會報警。如果是外網(wǎng)開發(fā)，則需要做好數(shù)據(jù)存儲，一定要非常注重數(shù)據(jù)安全。
政府類的軟件或者產(chǎn)品，基本都有很強的實用性，實用好用才是客戶最關(guān)心的問題，因此在系統(tǒng)架構(gòu)上需要做到，簡單高效，快速觸達，減少客戶的學(xué)習(xí)成本。
對于文字大小的需求比較強烈，提及最多的就是字體放大，加粗。
對于畫面能夠看清，需要重點表現(xiàn)在前景和背景的色彩對比度。
對于畫面的表現(xiàn)，要更加的酷炫，在客戶眼里，動態(tài)圖形效果遠遠大于靜態(tài)效果圖。
隨著年齡增長，人類的晶狀體會變黃變渾濁，導(dǎo)致選擇性的吸收藍光。所以藍色色調(diào)在老年人眼中可能會出現(xiàn)模糊褪色的視覺效果，從而降低元素在界面中的對比度， 因此需要提高色彩的飽和度。
產(chǎn)品整體架構(gòu)以及內(nèi)容邏輯清晰，簡單高效，上手簡易。
通過對政府類客戶的分析，挖掘客戶最深層的需求，針對于以上的關(guān)鍵點，提出適合的解決方案，大體在一下6個方面的全面解析。
對于系統(tǒng)框架以及布局進行一屏式展示，減少系統(tǒng)層級的遞進。
對于展示形式上可以更清晰準確， 盡量模塊化展示每個需求，做到聚焦用戶視角，提升畫面表現(xiàn)。
整體交互流程簡化，復(fù)雜以及多層級彈框盡量少使用。
中文字體類型的使用，在使用數(shù)字屏幕閱讀時，字體的選擇要選用無襯線體（比如黑體，微軟雅黑）厚重一點，不可選用襯線體（比如宋體，書法體）比較單薄。
英文字體類型的使用，英文數(shù)字的字體選擇更明顯的粗體，因為要展示數(shù)據(jù)，使得數(shù)據(jù)展示更加直觀，依舊是選用無襯線體，比較推薦：D-DIN字體。
字體大小的定義。在字體大小的選擇上，參考了頁面上常規(guī)大小，定義了一套關(guān)于不同尺寸下的標準字號，正常1080P頁面，最小字號不小于16px，具體字體大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素。
界面中的前景與背景的對比度，是否足以讓政府類客戶清楚識別；
顏色不應(yīng)該用作傳達信息的唯一視覺手段，需要用額外的文字提示；
通過 H（色相）S（飽和度）B（明度）的數(shù)值來劃分色域，在保持H值不變的前提下，定義了10個色域。所以在前后景的顏色選擇上，滿足跨度至少為6，才能讓目標人群準確識別文字信息。
視覺呈現(xiàn)以及文案圖像對比度至少要有7:1，大文本至少有4.5:1的對比度。有很多在線工具可以幫助檢測顏色對比度以及是否達標，如Contrast Ratio 在線檢測工具：
畫面采用多種飽和度較高的顏色，而不是單色；
顏色的豐富程度決定了畫面的視覺表達，色彩越豐富，畫面表現(xiàn)越好；
增加圖形的占比大小，提升視覺上的表現(xiàn)；
盡量采用識別度較強的圖形和圖標，盡可能貼近客戶的認知范疇；
圖標和圖形盡量搭配文字描述，方便客戶更清晰更快速理解。
觀測距離的遠近，也決定著畫面的展示效果，盡可能的拉近觀測距離；
正常視距觀測下，以常規(guī)設(shè)計規(guī)范去制定即可，如若觀測距離較近，則可適當縮小相應(yīng)的視覺表現(xiàn)，反而觀測距離較遠，則放大視覺。
設(shè)備的尺寸、精度，分辨率大小都會影響目標人群的體驗；
在設(shè)備精度較低，或者說點間距過大時，應(yīng)當適當放大視覺表現(xiàn)，點間距小的則顯示非常清晰，可適當縮小視覺表現(xiàn)。
為了保證適老化的推廣，需要在適老化的基礎(chǔ)上統(tǒng)一標準，在字體，顏色，框架，圖形等內(nèi)容上做出提煉，深入了解目標客戶的需求以及客戶心理。
本著嚴謹務(wù)實，安全性，實用性等原則，沉淀出一套符合目標人群的設(shè)計規(guī)范，應(yīng)用并推廣到不同設(shè)計團隊以及推廣到廣大設(shè)計師中去。
我們需要不斷踐行適老化設(shè)計原則，體現(xiàn)設(shè)計的通用性和包容性，應(yīng)當在設(shè)計表現(xiàn)和產(chǎn)品功能上更加的包容這個群體。人工智能大數(shù)據(jù)時代，雖說政府類客戶會比普通人更容易接受，但是受制于某些原因，推動解決老年人面對智能技術(shù)的問題解決才是重中之中。
設(shè)計師也需要運用自己的專業(yè)性，來幫助目標人群融入數(shù)字化的生活中去。
因為在不久的將來，我們也會變成這個群體，當我們面對這些束手無策時，那時的設(shè)計又會是如何適老的呢？適老化設(shè)計是適合所有人的設(shè)計，所有的設(shè)計師都應(yīng)該密切關(guān)注。
1-不要依賴顏色來傳達信息（客戶更喜歡文本，有特殊含義除外：四色預(yù)警，國標色）；
2-文字展示要清晰，字號大小要更加適合目標群體；
3-提高顏色對比度，豐富畫面色彩，禁止使用單一色系；
4-界面中重要元素應(yīng)盡量避免使用藍色（特殊行業(yè)除外：公安等其他）；
5-增加圖形以及圖標的視覺表現(xiàn)，盡可能做到一目了然，便于客戶理解；
6-盡可能拉近觀測距離，提升觀測體驗；
7-選用高性能，高清晰設(shè)備，提升觀感，優(yōu)化客戶體驗；
8-針對政府客戶特點，做到態(tài)度嚴謹務(wù)實，安全實用，簡單高效；
9-針對政府客戶的需求，做到畫面清晰，視覺酷炫，色彩豐富明亮，邏輯清晰；
10-盲目照搬照抄而不去具體問題具體分析，這些無障礙設(shè)計在某種程度上就會成為“障礙”設(shè)計。
作者：AYONG_BDR 來源：站酷網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
什么是Resdesign
Redesign并不是一個簡單的美化過程，視覺只是Redesign的一部分而不是全部。如果你做產(chǎn)品重構(gòu)只是為了視覺更美觀，從各種網(wǎng)站獲取靈感用樣機包裝，沒有任何產(chǎn)品架構(gòu)以及交互邏輯，那么你的改版必定不會很完美。
但同時也會有很多人陷入這種誤區(qū)，產(chǎn)品中過時的設(shè)計規(guī)范會使你的用戶會流失到設(shè)計體系更好的競品那里。重構(gòu)你的產(chǎn)品設(shè)計語言，讓他看起來更美觀，這當然很好，但是也不能盲目的跟隨設(shè)計趨勢，沒有任何邏輯做改版，這樣會導(dǎo)致交互邏輯的紊亂以及產(chǎn)品架構(gòu)不清晰。
今天阿勇就從網(wǎng)上任意摘選了一個產(chǎn)品功能需求有問題的一個頁面來進行一個頁面改版，一起來看看吧！
產(chǎn)品邏輯分析
1、產(chǎn)品主視覺指意不明，貴州省地質(zhì)災(zāi)害防治指揮平臺，地圖處資源應(yīng)集中于貴州省，且全國視角下可以下鉆貴州省市區(qū)。
2、地質(zhì)災(zāi)害防治主視覺應(yīng)該著重展現(xiàn)崩塌、滑坡、泥石流、地裂縫、等地質(zhì)現(xiàn)象的展示，并展示預(yù)警信息，以及現(xiàn)場地質(zhì)現(xiàn)象視頻反饋，以便于指定指揮方針。
3、此平臺信息展示包含人員調(diào)度，現(xiàn)場指揮，設(shè)備數(shù)量，數(shù)據(jù)資源統(tǒng)計，覆蓋區(qū)域，預(yù)警告警，各地區(qū)地質(zhì)災(zāi)害排行，綜合防治等信息的內(nèi)容。
4、產(chǎn)品布局不合理，各區(qū)域所占比重需要重新估量，并且主視覺數(shù)據(jù)資源匱乏，內(nèi)容單一。
5、業(yè)務(wù)邏輯沒有很好的展現(xiàn)，各區(qū)域所要展現(xiàn)的數(shù)據(jù)信息不明確，業(yè)務(wù)紊亂。
6、畫面中對于業(yè)務(wù)的理解不夠深，導(dǎo)致畫面空洞，數(shù)據(jù)展現(xiàn)量不夠，產(chǎn)品失職。
如何進行頁面分析
根據(jù)顏色：顏色不宜太多，對于特殊行業(yè)，固定的顏色是有固定的含義的，比如紅橙黃藍四色預(yù)警。
對于畫面不合理的地方需要記錄下來，對當前板塊的內(nèi)容進行正確的導(dǎo)向，比如你發(fā)現(xiàn)這個字體不合適，你的腦海中一定會有正確的用在此處的字體；比如間距，換行，字號等方面也是如此，心中得有一桿秤，去衡量設(shè)計的美感。
了解功能，分析數(shù)據(jù)之間的關(guān)系：
了解本產(chǎn)品的應(yīng)用領(lǐng)域，以及產(chǎn)品功能，分析畫面需要展示的數(shù)據(jù)有哪些，合理的通過設(shè)計展示數(shù)據(jù)之間的關(guān)系。
構(gòu)思主題，圍繞主題設(shè)計其他元素：
對原來的主題進行產(chǎn)品功能重構(gòu)，設(shè)計新的配色方案，畫面內(nèi)容布局，標題以及主視覺的重新設(shè)計，圍繞主題進行設(shè)計元素的制作。
分析數(shù)據(jù)，合理選用不同樣式圖表：
對各個數(shù)據(jù)進行分析，對內(nèi)容進行編排，選擇合適的圖表去展示數(shù)據(jù)，合理的同時，又具有美感。
提取共性，結(jié)合需求做產(chǎn)品規(guī)劃：
提取各個模塊的設(shè)計形式的共性，并結(jié)合產(chǎn)品需求進行合理的規(guī)劃，重構(gòu)頁面。
加強技法，了解可視化設(shè)計規(guī)范：
通過不同的設(shè)計技巧來表現(xiàn)畫面的美感，制定屬于產(chǎn)品的設(shè)計規(guī)范，并運用這些規(guī)范去規(guī)范頁面布局以及設(shè)計，這是要在深度了解可視化設(shè)計的前提下。
優(yōu)化-01
優(yōu)化-02
優(yōu)化-03
新增告警列表，設(shè)備數(shù)量，資源調(diào)度信息，展示歷史告警記錄，合計設(shè)備數(shù)量，總結(jié)資源調(diào)度數(shù)量，真正掌握自動化地質(zhì)防治指揮。
最終修改成品
設(shè)計師應(yīng)該跳脫出自己狹義的視角重新來審視“設(shè)計趨勢”，為自己帶來更多的可能性。
視覺只是表現(xiàn)層，理解業(yè)務(wù)，理解數(shù)據(jù)，合理表述才是核心。道理大家都懂，但真正的理解數(shù)據(jù)卻是很多設(shè)計師邁不過去的門檻。
送給大家一句忠告，永遠不要迷信產(chǎn)品原型，設(shè)計也不應(yīng)該被原型所制約，要勇于用自己的設(shè)計思維去驗證產(chǎn)品的合理性，要用商業(yè)眼光去對產(chǎn)品進行查漏補缺，要站在用戶的立場上去試想產(chǎn)品的可能性。
作者：AYONG_BDR 來源：優(yōu)設(shè)網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
B 端設(shè)計離不開設(shè)計規(guī)范這個話題，而做好設(shè)計規(guī)范是一個龐大復(fù)雜工程，很多人對這些處于一知半解狀態(tài)，在這個系列文章里我通過結(jié)合自己平時的項目案例來談?wù)勛约簩?B 端設(shè)計規(guī)范的一些理解，希望可以帶來一些啟發(fā)。
本篇先談?wù)勗O(shè)計規(guī)范制作的指導(dǎo)思想--設(shè)計原則，后續(xù)文章再展開講一下常見各種組件的設(shè)計規(guī)范。
設(shè)計規(guī)范作為 B 端設(shè)計中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個方面：
在日常工作中，當項目組收到一個新的需求時，如果已經(jīng)具備了成熟的設(shè)計規(guī)范體系，其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程：
通過前面內(nèi)容我們知道了設(shè)計規(guī)范對于產(chǎn)品設(shè)計意義重大，那么制定設(shè)計規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計原則這個話題，設(shè)計原則是設(shè)計規(guī)范的總的綱領(lǐng)，所有的設(shè)計規(guī)范都應(yīng)當以設(shè)計原則為基準。設(shè)計原則主要包含以下內(nèi)容：
接下來就圍繞設(shè)計原則清晰、高效、友好、可控這四個方面展開講解。
清晰原則主要從視覺角度讓界面信息傳達合理，提高用戶信息獲取效率。主要包含對比，親密，對齊，重復(fù)四個方面。
① 對比：
對比是指界面中為了區(qū)分信息層級，強化元素對比度，使用的很常見的一種手段，例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關(guān)鍵按鈕；又比如通過對文字字號加大，字體加粗，顏色加深來與弱文案形成對比，凸顯關(guān)鍵文字信息。
② 親密：
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個視覺單元；反之，則它們的距離就應(yīng)該越遠，也越像多個視覺單元。親密性的根本目的是實現(xiàn)組織性，讓用戶對頁面結(jié)構(gòu)和信息層次一目了然。
③ 對齊：
在界面設(shè)計中，將元素進行對齊，既符合了用戶的認知特點（我們往往傾向使知覺對象的直線延續(xù)還是直線，曲線延續(xù)還是曲線），也能引導(dǎo)視用戶視覺流，讓用戶更流暢地接收信息。
④ 重復(fù)：
重復(fù)是指相同的元素在項目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時提高這些元素之間的關(guān)聯(lián)性。
高效原則體現(xiàn)在便捷、輕量、簡化、一致幾個方面，目的是通過合理的方式讓產(chǎn)品操作更加便捷；交互體驗與內(nèi)容更加輕量和簡化；以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合幾個常見案例說明如何應(yīng)用這一原則。
① 合理利用拖拽--便捷、輕量：
在涉及到諸如上傳文件，排序，滑動輸入，搭建等需求時，合理采用拖拽交互往往可以打造更加便捷用戶體驗。
② 盡量減少不必要的跳轉(zhuǎn)--便捷、輕量：
用戶操作過程盡量減少跳轉(zhuǎn)，以實現(xiàn)交互減步長，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起；能用展開收起就不用氣泡...依次類推（優(yōu)先級從高到低：原位 ＞ 展開收起 ＞ 氣泡 ＞ 彈窗 ＞ 抽屜 ＞ 新頁面）
③ 放大點擊熱區(qū)--便捷：
放大可點擊按鈕熱區(qū)，相對于較小點擊熱區(qū)，具備更絲滑操作體驗。
④ 懸停即現(xiàn)--輕量：
利用懸停即現(xiàn)，避免信息過于重復(fù)啰嗦，簡化頁面提高閱讀體驗。
⑤ 折疊次要功能--簡化：
頁面功能按鈕過多時，可將次要按鈕收納到一起，點擊時再展開，外面只展示高頻操作或重要按鈕，保證頁面內(nèi)容簡潔。
⑥ 統(tǒng)一樣式--一致：
一致性是指在不同頁面中相同操作應(yīng)保持一致視覺與交互樣式，可有降低用戶學(xué)習(xí)成本與企業(yè)開發(fā)成本。
友好原則應(yīng)貫穿用戶操作前，操作中以及操作后三個階段，給予用戶及時反饋與幫助。
① 操作前：
在用戶操作前給到合適的引導(dǎo)與幫助，有效減少用戶迷茫感。
② 操作中：
通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。
③ 操作后：
利用界面中元素變化清晰直觀展示當前的狀態(tài)
可控主要體現(xiàn)在自由和導(dǎo)航兩個方面。
① 自由：
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
② 導(dǎo)航：
導(dǎo)航是指用戶隨時知曉當前所在位置，而且可以利用導(dǎo)航隨意到達目標頁面。
通過本篇內(nèi)容我們大概知道了制作設(shè)計規(guī)范主要方向，那么具體到每個組件上，我們該如何去設(shè)計呢？后續(xù)篇章將細分聊聊如何去設(shè)計 B 端常見組件的一些內(nèi)容。
部分參考資料：
作者：huang。亮 來源：優(yōu)設(shè)網(wǎng)
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://www.yvirxh.cn