雙鉆模型是設(shè)計師在創(chuàng)作過程中可以循環(huán)復(fù)用的系統(tǒng)，他不僅可以在我們設(shè)計界面時運用到，在一些數(shù)據(jù)提升優(yōu)化等方面同樣適用，雙鉆模型可以使設(shè)計更加理性，它能夠在我們做項目時思維更加具有邏輯性，我們設(shè)計過程中更多的方法還是遇到問題，直接輸出解決方案，而該模型可以讓我們的思考過程更加具象化、合理化，他與常規(guī)的思考方式不同，該模型更加注重問題的本質(zhì)，全流程圍繞問題去解決問題，并且在大的項目上能夠提升團隊效率，與其他模型不同，該模型的適用場景更加廣泛。
雙鉆模型是由2005年英國設(shè)計委員會正式公布并進行驗證，但是在之前BDC就提到過雙鉆模型，而我們現(xiàn)在看到的模型是通過改良后進行使用的，不過這不重要，我們只需要了解它的用處價值以及如何使用就行了。
我們看下圖中，雙鉆模型主要為4個大階段，發(fā)現(xiàn)期、定義期、發(fā)展期、交付期。左邊的鉆石我們可以理解為發(fā)散思維階段，我們?yōu)橐粋€沒有目標(biāo)的項目去腦爆出想法或者問題，其次選擇出正確的方向，右邊的鉆石我們可以理解為從正確的方向中抽取正確的事情，最后把正確的事情完成。
發(fā)現(xiàn)期我們理解為是探索期，該階段主要是發(fā)散思維和收集資料，研究問題的本質(zhì)，把我們能想到與該問題具有關(guān)聯(lián)性的信息全部列出來。
質(zhì)疑：對一切信息的質(zhì)疑，簡單理解就是我們需要多問自己為什么，需求的合理性、用戶流程是否合理、為誰而做、會在什么場景使用、會遇到什么問題等等，把所有能想到的不合理事情列舉出來，這個小階段我們可以理解為是探索和發(fā)掘問題。
研究：針對問題去做對應(yīng)的調(diào)研，如不知道用戶使用場景，我們通過用戶調(diào)研可以得到結(jié)果，需要做什么研究調(diào)研可以根據(jù)需求遇到的具體問題去使用不同的研究方法，例如一些訪談、競品分析、數(shù)據(jù)分析等等。
該階段主要是把發(fā)現(xiàn)期的問題收攏聚焦，即基于發(fā)現(xiàn)期的調(diào)研分析、問題洞察形成結(jié)論，尋找可以突破的機會點，例如我們在發(fā)現(xiàn)期發(fā)現(xiàn)的問題是用戶的目標(biāo)是什么，影響用戶目標(biāo)的點可能有哪些，那么在定義階段就需要針對我們提出的這些假想進行聚焦，用戶是怎么完成目標(biāo)，通過什么場景完成目標(biāo)等等，篩選問題時一定要綜合評估，尋找可行性。
該階段是已經(jīng)開始要開始進行落地了，第一第二階段是找到正確方向，而現(xiàn)在則是用正確的方法去做正確的事情，我們要把聚焦的問題具象化，構(gòu)思我們能夠想到的方案，比如設(shè)計前期探索定義的是年輕、輕盈，在該階段我們就需要根據(jù)關(guān)鍵詞去考慮如何進行設(shè)計，這個階段是一個不斷生產(chǎn)和推翻的流程，一直重復(fù)，直到找到能夠落地的方案。
這個階段就顧名思義比較簡單了，根據(jù)發(fā)展期確定的方案，最后進行實際的落地，并且是可實施、可執(zhí)行的，通過團隊項目流程推動上線，最終展現(xiàn)給用戶。
以上便是雙鉆模型的定義，先舉個通俗的例子大家理解下模型，例如節(jié)假日我們想去旅游，a）我們?nèi)ナ裁吹胤?？參觀古都？自駕游？游樂園？這個就是發(fā)現(xiàn)期，我們把想去的想玩的全部列出來，b）經(jīng)過篩選我們絕定去游樂園，這個就是大的方向，c）我們要去哪個游樂園？歡樂谷？方特大世界？這個階段就是發(fā)展期，我們要找到能去的地方，d）最后，怎么去？開車？跟團？玩多久？等等，這個就是交付期，可落地的。
當(dāng)然這個案例是結(jié)合生活方便大家理解，在實際項目中它的用處不止如此。
網(wǎng)上也有很多雙鉆模型的案例，但大多都是偏向理論，并且案例也跟設(shè)計無關(guān)聯(lián)，我從設(shè)計角度單刀直入的引入雙鉆模型，很簡單，很粗暴～～
例如我們要做一個唱歌產(chǎn)品的改版，站在設(shè)計師的角度我們需要去定義他的基本風(fēng)格和基本色彩規(guī)范等等，但是總不能上來就去做設(shè)計吧，我們要知道我們產(chǎn)品的群體是誰？具體的用戶屬性是什么樣的？有什么樣特征呢？等等。這個階段就是“雙鉆模型”的第一個階段，發(fā)現(xiàn)期。
發(fā)現(xiàn)期就是要發(fā)散思維，比如我們”唱歌“產(chǎn)品的用戶群體是年輕群體，用戶特征是18-25歲的在校大學(xué)生，用戶使用場景大多是宿舍、教室等校園環(huán)境，我們就需要去根據(jù)這些信息去進行設(shè)計思維發(fā)散，例如什么的風(fēng)格符合這類群體，先把關(guān)鍵詞舉例出來，如年輕、活力、青春、潮流、二次元...，依據(jù)這些關(guān)鍵詞做一些飛機稿，不斷進行探索。
當(dāng)然不止這一個思路，我們也可以通過競品分析的方法去擴展思路，如比較潮流的RAPAPP、二次元較重的B站，在比如現(xiàn)在的劇本殺相關(guān)的app等等，分析他們的設(shè)計風(fēng)格和表現(xiàn)方式，嘗試融合出飛機稿。
小結(jié)：第一步的核心就是發(fā)散思維，把要做的產(chǎn)品背景信息全部羅列出來，通過橫向縱向的方式去散發(fā)關(guān)鍵詞，最后做出對不同風(fēng)格的設(shè)計，進行探索。
像前面說的，該階段就是把發(fā)現(xiàn)期散發(fā)的想法往回收一收，畢竟那么多想法哪一個才是我們需要的，我們需要在這個階段去篩選出來。
我們按照年輕、二次元、潮流、國潮這些關(guān)鍵詞出了一些飛機稿，我們需要去收攏起來看看那些可以與產(chǎn)品特性和用戶屬性真正具有關(guān)聯(lián)性，假設(shè)用戶群體雖然是18-25歲的學(xué)生，但是我們通過訪談和其他調(diào)研方式發(fā)現(xiàn)這類群體中喜歡二次元歌曲的群體偏少，而潮流、國潮等關(guān)鍵詞更符合這類群體定位，并且也能夠跟產(chǎn)品的主打方向匹配上，那么就可以剔除二次元相關(guān)的飛機稿了。
該階段最好能收縮到同一個維度2-3個方案便于我們?nèi)ミM行驗證，假設(shè)我們通過后續(xù)調(diào)研發(fā)現(xiàn)，國潮與潮酷用戶群體喜好占比差不多，但是潮酷是產(chǎn)品未來的方向，我們就可以嘗試剔除國潮，但在潮酷這個范圍內(nèi)可能還會存在多種飛機稿，這是我們就需要進一步篩選，比如通過延展性，宣傳性，用戶認知度以及用戶的審美特性等等多維度去篩選，最終保持少量的方案。
到了這個階段我們應(yīng)該比較熟悉了，嘗試把上述的方案繼續(xù)收攏聚焦，提取出一個可行性方案展開后續(xù)的設(shè)計，具體怎么篩選，同樣可以繼續(xù)使用橫向和縱向維度進行對比，如潮酷風(fēng)格方案還剩下2個，我們就可以通過用戶調(diào)研、競品分析去嘗試衡量優(yōu)劣勢。
交付期其實就是我們設(shè)計側(cè)工作全部完成了，流程已經(jīng)進入到了開發(fā)，我們把完整的設(shè)計稿、切圖等素材交付開發(fā)，同時還需要橫向輸出設(shè)計規(guī)范供團隊后續(xù)使用。
雙鉆模型用途非常廣泛，如數(shù)據(jù)方面、產(chǎn)品方面、設(shè)計方面甚至管理方面都可以使用到，在不同的領(lǐng)域使用的方法都類似，區(qū)別就是使用的深入如何，像本篇以純設(shè)計維度出發(fā)去使用雙鉆模型，使用的方式偏向單維度。
若以提升數(shù)據(jù)或優(yōu)化用戶體驗為目標(biāo)使用雙鉆模型，那么每一個階段的思維散發(fā)會變得更加廣泛，每條結(jié)果交叉的情況也非常多。
再次提醒，本篇只以設(shè)計維度出發(fā)教大家使用雙鉆模型
該模型是講述用戶使用產(chǎn)品的感受，它包含五個維度：有效（Effective）、效率（Efficient）、吸引（Engaging）、容錯（Error tolerant）、易學(xué)（Easy to learn），我們看每個維度的英文解釋，會發(fā)現(xiàn)首字母都是E開頭，所以被稱為5E體驗設(shè)計模型。
5E 模型在整個體驗設(shè)計流程中可用性非常強，它可以幫助我們的團隊更具有創(chuàng)造力和理性的分布式領(lǐng)導(dǎo)模型，它可以讓復(fù)雜的設(shè)計簡單化，可以幫助產(chǎn)品構(gòu)建一個具有標(biāo)準性的體驗框架，我們無論做簡單還是復(fù)雜的設(shè)計時都可以依據(jù)這5個維度進行體驗評估。
不知道大家有沒有發(fā)現(xiàn)，我們經(jīng)常講的產(chǎn)品可用性或者易用性，其實跟5E模型很像，5E模型的五個維度其實就是產(chǎn)品可用性的基礎(chǔ)，當(dāng)一個產(chǎn)品不滿足其中一條的時候，那這個產(chǎn)品就不存在所謂的可用性，接下來我們對這五個維度進行解析。
顧名思義，有效指的就是產(chǎn)品功能的有效性，產(chǎn)品是否能夠為用戶帶來價值，是否能夠幫助用戶完成目標(biāo)，如果不能幫助用戶完成目標(biāo)，那么就不存在產(chǎn)品有效性，就像我們買筷子是為了吃飯、買開瓶器是為開蓋、買車是為了代步.....如果筷子只給我們一只，開瓶器無法開啟瓶蓋，車子沒有輪子跑不起來，那這個產(chǎn)品就是殘缺的最基礎(chǔ)的可用性都未達到。
字面意思指我們在保證精準度的前提下保證完成事項的效率，準確度越高速度越慢，這個的衡量通常指產(chǎn)品與競品相比同一個任務(wù)流程效率的高低，以及出錯的頻率，假如我們刷抖音刷10個視頻需要1分鐘，而影響時間的因素是單個視頻的內(nèi)容是否足夠吸引，亦或者網(wǎng)速是否夠快。
這個就比較好理解，就是界面是否能夠吸引用戶，能夠讓用戶愉快的使用我們的頁面，當(dāng)然不止視覺上的，人的感知包括視覺、嗅覺、觸覺、味覺，一個優(yōu)秀的界面是不僅僅只有視覺，它還可以通過視覺的感知引起用戶的遐想，例如一個美食的產(chǎn)品，我們把首頁做的更加紅火、火爆可能就會引起用戶遐想起辣、熱等感知。
容錯我們可以理解為是一個防錯機制，或者說是容錯率，當(dāng)用戶在操作某一個功能時，容易發(fā)生錯誤，我們就需要讓產(chǎn)品幫助用戶及時更正錯誤，例如自動修復(fù)，在比如打王者榮耀時我們選擇陣容都會經(jīng)常說容錯率，這里就是指5個英雄，2個打團時可能優(yōu)勢不是那么大，但是另外3個的容錯率非常高能把劣勢補救回來，而產(chǎn)品的容錯就相當(dāng)于這3個英雄，負責(zé)把用戶可能出現(xiàn)的錯誤操作給補救回來。
易學(xué)和產(chǎn)品如何支持初次使用和更深度的學(xué)習(xí)相關(guān)。一個產(chǎn)品可以使用一次，或一會兒，或一天。它可以完成一個容易的或復(fù)雜的任務(wù)，用戶可能是一個專家或新手。但每一次使用，界面必須能夠記憶或重新學(xué)習(xí)，而且使用一段時間后能夠發(fā)掘更多的功能，通常產(chǎn)品的易學(xué)性體現(xiàn)在用戶的操作效率。
有效性就像他定義的那樣，存在即合理，存在差異的是準確性，基本每個產(chǎn)品都必須具備有效性，例如地圖軟件，我要做公交車，能夠通過該功能查看離我最近的一輛公交還有多久到，這個功能的存在就是為了便于我們乘坐公交，防止無效等待，而差異上就是公交到站的時間可能因為某種原因不夠準確，這個就是有效上的差異因素。
如何讓用戶體驗更好，效率是其中任何重要的一個點，部分的產(chǎn)品的存在就是為了“讓人變懶”，例如外賣、打車、購物等等，以聊天為例1v1聊天時消息能否及時的傳輸，群聊時同時加載n條消息，而我們能夠第一時間看到信息，在新聞資訊的軟件中，怎么保證用戶閱讀的效率，同樣的產(chǎn)品怎么排版才能夠符合用戶閱讀習(xí)慣，提高效率，大多行業(yè)的產(chǎn)品想要做到好的體驗，效率是不可缺失的。
一個產(chǎn)品通過不同的視覺表現(xiàn)或者音樂效果能夠加強用戶在感知層的認知，不同的群體，不同的階段，所展示的風(fēng)格不同，像下圖中的金融產(chǎn)品，使用紅色為主色傳遞的感覺是積極向上的感知，因為在國內(nèi)股票和基金里紅色代表漲，在看閱讀產(chǎn)品和教育產(chǎn)品，都根據(jù)產(chǎn)品特性和用戶群體來設(shè)定風(fēng)格，試想一下，一個閱讀的軟件做成卡通風(fēng)格，那會不會嚴重影響閱讀呢。
上面所說，容錯更像自動修復(fù)或者幫助用戶解決錯誤操作問題，在系統(tǒng)上我們可能會經(jīng)?？吹?，例如電腦崩潰時像MAC系統(tǒng)會詢問是否重啟，而Windows崩潰時會直接藍屏幫用戶自動重啟。
在產(chǎn)品中也會有相關(guān)的功能，例如聊天頁面中，我們因為網(wǎng)絡(luò)因素發(fā)送失敗會進行紅點提示，包括一些內(nèi)容加載失敗會提示重新加載等等。
易學(xué)應(yīng)用場景非常之多，我們在做產(chǎn)品時大多都是優(yōu)先考慮用戶使用是否有阻礙，這個概念還是比較成熟的，當(dāng)然產(chǎn)品功能有些時候也避免不了復(fù)雜化，這時我們可以用新手引導(dǎo)進行解決，但是還是需要提醒大家，在設(shè)計頁面的時候一定一定要優(yōu)先遵循識別性和認知性，其次再去考慮創(chuàng)意，例如一個分享圖標(biāo)，把它設(shè)計的不像一個分享，設(shè)計感是有了，但是可用性無了。
為什么分享這兩個模型呢，這兩個我理解是體驗設(shè)計的基礎(chǔ)，雙鉆模型讓我們從0-1一步一步解決問題，而5E模型是在我們解決問題的過程中時刻提醒我們不要偏移基礎(chǔ)的體驗，就像開車一樣，雙鉆模型就像是一個地圖的起點與終點，5E模型就像在行駛這段過程中的超速提醒、危險駕駛提醒等。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
對于很多設(shè)計師來講在設(shè)計界面過程中往往會忽略掉很多的細節(jié)，比如卡片的排版、文字的排版、各種狀態(tài)的反饋等等，特別是剛?cè)胄械脑O(shè)計師在做頁面時往往是直接拿到競品的頁面搬運到自己產(chǎn)品上，這種做法理論上不會讓自己的頁面出錯，但是很多人往往忽略了一點，就是別人這么設(shè)計的目標(biāo)是什么，是否會匹配自己的設(shè)計目標(biāo)，如果不了解這些貿(mào)然的去搬運設(shè)計，那么時間久了會養(yǎng)成一個不好的習(xí)慣，需要設(shè)計師去進行設(shè)計時可能就會遇到很多難點，作為初級設(shè)計師或者剛?cè)胄械脑O(shè)計師，前期可以去進行搬運設(shè)計，但是一定要了解別人為什么這么做。
接下來將分享12個設(shè)計上的小技巧，大部分在日常設(shè)計中都會遇到，了解到這些設(shè)計細節(jié)，可以讓我們的界面更加高效、易用、美觀提升用戶體驗。
一、快捷交互
二、提升交互路徑
三、問題前置
四、提升可讀性
五、點擊引導(dǎo)
六、注意飽和度
七、禁止特殊字體
八、按鈕也要有層級
九、圖標(biāo)保持一致
十、利用對比
十一、圖文疊加
十二、注意遮罩透明
我在做界面時可以時常利用交互手勢去幫助用戶提升操作效率，避免繁雜小操作步驟
左側(cè)為什么錯？？
左圖中針對單條消息的操作匯聚到了icon內(nèi)，對于用戶理解成本比較高，當(dāng)用戶想要去刪除或者屏蔽消息時需要通過聚合入口才能完成操作，大大的提升了用戶操作成本。
建議正確做法～～
我們可以在類似的消息場景或者其他列表形式的場景中，添加一些交互手勢，隨著手機系統(tǒng)的更新，用戶的操作習(xí)慣已經(jīng)被各大產(chǎn)品培養(yǎng)的非常成熟，并不用擔(dān)心用戶無法操作的情況，增加手勢有弊端也有優(yōu)勢，右圖中手勢增加了用戶首次使用的學(xué)習(xí)成本，但是降低了高頻功能的操作成本，這個理論上是可以接
受的。
實際產(chǎn)品中的運用
利用拇指定律把關(guān)鍵的操作入口元素等，放置右側(cè)提升用戶操作效率。
左側(cè)為什么錯？？
左圖中把按鈕放置了模塊左下側(cè)，這樣是不利于用戶進行操作，當(dāng)然如果整個模塊的熱區(qū)都是同一個，這樣并沒有什么問題，用戶點擊卡片區(qū)域任何位置都能夠完成下一步操作，如果出現(xiàn)一個模塊內(nèi)存在多個熱區(qū)入口，而用戶想要到達目標(biāo)必須通過按鈕點擊才能進入，那么左圖中的排版位置就會提升用戶的操作時間。
建議正確做法～～
當(dāng)一個頁面內(nèi)出現(xiàn)多個相同模塊或者一個模塊出現(xiàn)多個熱區(qū)入口時，按鈕點擊區(qū)域有限，我們設(shè)計時就可以利用拇指定律進行排版，如右圖中布局，將按鈕放置右側(cè)可以便于用戶在右手操作時快速到達目標(biāo)，因為國內(nèi)使用右手的人數(shù)遠遠大于左手用戶，所以我們需要滿足大部分的體驗，合理利用拇指定律。
相關(guān)定律：費茲定律、拇指定律
實際產(chǎn)品中的運用
對于我們來講很多東西是簡單的，但是不乏會有一些用戶是陌生的，對于他們來講可能會有填寫成本。
左側(cè)為什么錯？？
左圖中理論上并不是錯，我們經(jīng)常設(shè)計表單時都會用的提示話術(shù)，但是我們需要考慮更多維度的東西，對于我們來講填寫這種表單非常簡單，例如個別用戶，可能會臨時忘了郵箱格式，又或者輸入手機號時多填了一位數(shù)等等情況，用戶錯誤一次操作步驟就會多一步，反之就是降低使用產(chǎn)品時的體驗。
建議正確做法～～
如右圖中，我們設(shè)計時可以更改提示的話術(shù)，幫助用戶把問題前置，當(dāng)用戶看到提示郵箱時就會按照格式去填寫，通過把手機號的位數(shù)拆分，讓用戶更好的記憶數(shù)字，這樣無論對產(chǎn)品還是用戶都沒有任何損失，反而能降低錯誤頻率。
實際產(chǎn)品中的運用
無論是頁面還是模塊，用戶在閱讀時是已掃讀的方式進行瀏覽，我們需要保證頁面的文字元素具備一定的規(guī)律，以此來提升閱讀效率。
左側(cè)為什么錯？？
左圖中可以看到，文字與輸入框放在同一列進行展示，這樣一方面不利于后續(xù)的文字擴展，通常這種表單填寫的頁面，在頁面中都是具有很大的空間位置，這樣排布會造成視覺上的不規(guī)律和擁擠，降低了篩選效率，當(dāng)然如果是模塊區(qū)域很小的情況下，可以適當(dāng)?shù)倪M行使用。
建議正確做法～～
右圖中我們把文字與輸入?yún)^(qū)域上下排布，雖然文字長短不一，但依據(jù)對齊原則在豎列情況看是具備對齊規(guī)律的，有效的提升信息篩選效率。
實際產(chǎn)品中的運用
我們在做系統(tǒng)功能模塊時需要注意添加功能點擊引導(dǎo)，用戶對此類消息模塊認知上會默認不可點擊，因此需要我們加以引導(dǎo)。
左側(cè)為什么錯？？
我們常見的消息模塊內(nèi)容為兩種，一種是互動類消息即用戶與用戶，另一種時是系統(tǒng)消息即產(chǎn)品推送的內(nèi)容，前者基于用戶習(xí)慣而言用戶已經(jīng)沒有使用成本默認是可以進行點擊交互，后者因為部分產(chǎn)品會把系統(tǒng)消息作為展示的形式給用戶，但是有些產(chǎn)品的系統(tǒng)消息卻是可以點擊交互，這就導(dǎo)致了用戶認知上出現(xiàn)了混亂，左圖中像系統(tǒng)通知功能通知其實從視覺上看，并不具備點擊欲望，因此可能會對用戶造成錯誤的理解。
建議正確做法～～
當(dāng)我們在設(shè)計時需要注意，若消息列表中存在系統(tǒng)類消息并且可以進行交互，在設(shè)計時可以添加向箭頭、紅點提示等方式告知用戶可以點擊，如果該功能有數(shù)據(jù)指標(biāo)，這種方式也同樣能賦能產(chǎn)品指標(biāo)。
實際產(chǎn)品中的案例
目前市場上產(chǎn)品幾乎都有深色版本，我們在設(shè)計時深色版本的顏色時需要注意飽和度的高低，同樣的飽和度在黑色背景上會比白色背景上更加亮，這跟人的視覺感官有很大的關(guān)系，因此我們在做黑色版本時需要注意是否調(diào)整飽和度。
左側(cè)為什么錯？？
在黑色背景中使用過高的飽和度會刺激眼睛，很多深色版本都是從白色模式通過反向顏色直接調(diào)整，而彩色元素會直接運用到深色中，那么就會造成一個問題，因為我們習(xí)慣在白色模式下看顏色，忽然切換到黑色中看彩色刺激程度非常高“就像黑夜中忽然打開手電筒”，對眼睛的傷害很高。
建議正確做法～～
我們在設(shè)計深色版本時可以根據(jù)產(chǎn)品主色降低飽和度，包括圖標(biāo)等元素，以此來緩沖對用戶視覺感官的刺激，目前很多大廠的處理方式是直接在彩色元素上添加一層黑色透明遮罩進行處理，這樣無需在添加更多的顏色規(guī)范。
實際產(chǎn)品中的案例
在設(shè)計模塊或者頁面時不建議使用特殊字體來突出文字層級，這樣會導(dǎo)致視覺不統(tǒng)一，以及開發(fā)成本增加。
左側(cè)為什么錯？？
左圖中灰色字使用了特殊字體，看起來雖然好看，但在實際開發(fā)中會導(dǎo)致開發(fā)成本增加，我們產(chǎn)品一般使用的是系統(tǒng)字體，若使用特殊字體需要讓開發(fā)同學(xué)添加對應(yīng)字體包，這樣會導(dǎo)致我們的產(chǎn)品包的內(nèi)存過大，除非產(chǎn)品中默認一直使用該特殊字體，這樣才有使用的價值。
建議正確做法～～
一般系統(tǒng)字體就能夠滿足我們的設(shè)計需求，在UI設(shè)計中我們可以通過不同的字體粗細來調(diào)整文字層級，這樣能夠保證視覺更加統(tǒng)一，減少產(chǎn)品包大小。
實際產(chǎn)品中的案例
在設(shè)計時需要注意多個入口在同一位置時，需要把它們進行層級劃分，避免影響用戶決策
左側(cè)為什么錯？？
圖中可以看到，兩個面性按鈕非常明顯的在模塊中，當(dāng)用戶在瀏覽頁面中很容易出現(xiàn)困惑，到底需要點擊哪個才能購買預(yù)定，因為兩個都是面性無法快速進行定位入口，這樣不僅影響用戶決策效率，還會影響產(chǎn)品點擊率。
建議正確做法～～
建議設(shè)計類似模塊中時，無論是pc還是移動端都需要對入口進行結(jié)構(gòu)劃分，這樣能夠使用戶在瀏覽頁面時快速定位到入口，提升決策效率，做體驗是解決用戶的思考時間。
實際產(chǎn)品中的案例
在UI設(shè)計中使用圖標(biāo)時，要保持一致性，確保他們共有相同的視覺風(fēng)格，相同的重量，填充和描邊。不要混搭。
左側(cè)為什么錯？？
可以看到左圖中的圖標(biāo)并不統(tǒng)一，線性里面摻雜著面性點綴，這在UI設(shè)計中嚴重違背了一致性的原則，會導(dǎo)致我們的頁面不夠嚴謹專業(yè)。
建議正確做法～～
在設(shè)計圖標(biāo)時，首先要保證圖標(biāo)風(fēng)格一致，其次在這個基礎(chǔ)上保證圖標(biāo)的描邊粗細、視覺占比重量、顏色等，不要出現(xiàn)混搭風(fēng)格。
實際產(chǎn)品中的案例
在設(shè)計頁面模塊時，可以多利對比度的方式來體現(xiàn)設(shè)計的表現(xiàn)力，鮮明直接的色值能夠直接表達事物的性質(zhì)以及特點，通過對比，也能夠更加清晰的強調(diào)設(shè)計中的重點，這樣給用戶的印象會更深刻，同樣會給產(chǎn)品帶來一定的趣味性。
左側(cè)為什么錯？？
左圖中單看視覺也沒問題，只是在表現(xiàn)上圖標(biāo)與背景融入到一塊了，導(dǎo)致視覺表現(xiàn)力較差，在設(shè)計中如果符合產(chǎn)品風(fēng)格的前提下，我們可以避免這種方式，這種方式雖然具有視覺效果但不夠強，對用戶的記憶點不夠深刻。
建議正確做法～～
設(shè)計到類似的模塊時我們可以利用對比的關(guān)系，以此突出視覺元素，通過顏色焦點引導(dǎo)用戶關(guān)注，強化用戶印象同時還能增加頁面的視覺表現(xiàn)力和氛圍感。
實際產(chǎn)品中的案例
在設(shè)計圖文疊加的卡片或者頁面時，我們需要注意不同明度的圖片上，文字識別是否有阻礙，一般情況會通過遮罩方式避免這個情況。
左側(cè)為什么錯？？
左圖中在深色圖片下字體的可讀性是沒有問題的，但當(dāng)出現(xiàn)文字底部區(qū)域的圖片相對復(fù)雜時便會影響識別，第二種情況當(dāng)圖片明度過高時文字同樣無法識別，試想一下，一張白色調(diào)性的圖片上放文字，那基本無法看清，嚴重影響閱讀體驗。
建議正確做法～～
在界面設(shè)計時如果遇到類似的卡片，建議在文字區(qū)域添加漸變遮罩的方式，以此保證文字的識別度，或者添加純黑色透明遮罩進行處理，這樣可以兼容不同環(huán)境的圖片與文字的重疊，保證基本的閱讀體驗。
實際產(chǎn)品中的案例
UI設(shè)計中經(jīng)常會遇到彈窗，彈窗是需要配合頁面遮罩來讓用戶進行專注操作，不同的遮罩透明度所帶來的專注度也不同。
左側(cè)為什么錯？？
左圖中我們看到，遮罩的透明度過低，我案例設(shè)置的是17%，此時彈窗內(nèi)容與頁面內(nèi)容結(jié)構(gòu)上區(qū)分并不是很明顯，一般彈窗是用來讓用戶跳脫頁面內(nèi)容，從而瀏覽彈窗內(nèi)容，轉(zhuǎn)變用戶目標(biāo)，當(dāng)彈窗無法聚焦時便很難達到目標(biāo)，并且視覺上層級更加混亂。
建議正確做法～～
右圖中案例我把透明度調(diào)整到了37%，我們此時再看彈窗很容易就忽略頁面內(nèi)容，因為灰色越高，遮擋度越高，用戶跳脫感就越強，這樣我們可以讓用戶專注彈窗內(nèi)容，同時視覺結(jié)構(gòu)上也區(qū)分很明顯。
實際產(chǎn)品中的案例
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
UI新手設(shè)計學(xué)習(xí)100問，顧名思義，主要是通過100個常見問題解決初學(xué)者在學(xué)習(xí)UI設(shè)計初期的困惑，比如什么是UI設(shè)計？設(shè)計的目的是什么？UI設(shè)計需要學(xué)會什么必備技能？UI設(shè)計又有什么常見的學(xué)習(xí)方法等等。
為什么用問答的形式？這是受一個朋友的創(chuàng)作啟發(fā)，讓我確定了以這種形式來創(chuàng)作，這樣更易于大家理解和學(xué)習(xí)。另外這個欄目的內(nèi)容，我也將會盡自己最大的精力，從百度百科、維基百科以及國內(nèi)外的設(shè)計書籍中一邊查一邊寫，努力制作成一本UI設(shè)計新手學(xué)習(xí)的知識手冊，解決新手初學(xué)者的種種困惑，給他們提供一個學(xué)習(xí)的知識樹和進度條。
這個欄目會有多少字，多長更新完？我已經(jīng)完成了第一章大部分內(nèi)容，目前已經(jīng)撰寫了約5000字，平均每個問題800字，以我目前創(chuàng)作內(nèi)容的篇幅看，這份專欄應(yīng)該在10萬字左右，相當(dāng)于一本300頁左右的實體書籍。至于完結(jié)時間，除了需要參考百度百科和維基百科，還要翻閱各種設(shè)計書籍和查找資料，我個人預(yù)計時間3個月，不過如果大家喜歡，我就會加快腳步！
我在2022年轉(zhuǎn)型到知識付費以后，認識了太多的設(shè)計師朋友，也建立了自己的社群。其中讓我印象最深的有這么一類用戶群體，他們很早就在大學(xué)期間為了學(xué)習(xí)UI設(shè)計，花了很多錢報了各種培訓(xùn)班，但最后的結(jié)果卻不如人意。很多培訓(xùn)班太注重于軟件技能的操作，而忽略UI設(shè)計其實是一門學(xué)科，如果學(xué)生知其然不知其所以然，那么即便學(xué)會了Sketch、Figma這些工具，他們也不知道學(xué)了UI設(shè)計到底能有什么用，未來又該如何去規(guī)劃自己的職業(yè)生涯。
這些朋友里面，留給我印象最深的，是一個剛畢業(yè)的女孩。她給我說，貸了兩次款，畢業(yè)后還是不知道UI設(shè)計到底能干啥，現(xiàn)在勉強找到一份設(shè)計的工作，每個月還要還著貸款走。我當(dāng)時把這個朋友免費邀請到我的私董會星球了，讓她去看我講的書、錄的課程，期望能給她帶來一絲溫暖和希望。
其次在我最早開始建立社群的時候，有一個探友在站酷看到我的產(chǎn)品拆解以后，跑來加我，然后給我說：“我一直質(zhì)疑培訓(xùn)班老師的講課內(nèi)容，因為我覺得設(shè)計這門職業(yè)，如果只學(xué)會軟件，那是不夠的，肯定需要學(xué)習(xí)一些設(shè)計原則和理論。所以當(dāng)我看了你的產(chǎn)品拆解以后，我很受啟發(fā)，我覺得學(xué)會這些設(shè)計理論特別重要?！?br />
這些真實的故事，讓我印象深刻，也讓我開始反思，造成這種現(xiàn)象的原因是什么。所以這個專題的內(nèi)容，在很久之前就藏在我的心里了。我想去做一個UI設(shè)計的知識樹，給那些準備學(xué)習(xí)UI設(shè)計以及正在從業(yè)的設(shè)計師們提供一個清晰、可視化的學(xué)習(xí)體系，從而幫助他們從一個宏觀、系統(tǒng)的角度去勘察這個行業(yè)，發(fā)展趨勢是什么、是否值得入行，從0到1又需要哪些步驟。
這個專題，主要為這幾類朋友而創(chuàng)作。第一，正在上學(xué)，準備想學(xué)習(xí)UI設(shè)計的大學(xué)生；第二，剛畢業(yè)準備報班學(xué)習(xí)UI設(shè)計，或已經(jīng)從培訓(xùn)班剛畢業(yè)出來的應(yīng)屆生。第三，雖然已經(jīng)從事UI設(shè)計三五年，但對UI設(shè)計還是一知半解，混混霍霍做設(shè)計的職場設(shè)計師。
最后，這個專題是我的第一個付費內(nèi)容，我將會免費分享30個內(nèi)容，如果你覺得有價值，可關(guān)注我們獲取全部內(nèi)容。
目前我把這個專欄拆分為四塊內(nèi)容，分別是認識UI、就業(yè)前景、學(xué)習(xí)方法和如何求職四個章節(jié)。
第一章是認識UI，我會從設(shè)計的目的、UI設(shè)計的定義和分類開始讓初學(xué)者對UI設(shè)計有一個初步的了解。（這個部分的內(nèi)容也許適用于80%的UI設(shè)計師，雖然很多設(shè)計師已經(jīng)從業(yè)了多年，但對UI設(shè)計還是一知半解。）
第二章是就業(yè)前景，通過UI設(shè)計當(dāng)前的工作內(nèi)容、薪資收入和職業(yè)發(fā)展等維度告訴初學(xué)者UI設(shè)計的就業(yè)趨勢，降低就業(yè)選擇風(fēng)險。
第三章是學(xué)習(xí)方法，我想給初學(xué)者提供一個學(xué)習(xí)知識樹和能力晉升模型，只有知道最終要去哪里，自己當(dāng)前又在哪里，應(yīng)該如何努力，他們才能像玩游戲一樣，每天對知識的汲取都充滿動力。
第四章是如何求職，通過拆解企業(yè)對UI設(shè)計師的招聘需求，抽絲剝繭地讓初學(xué)者理解求職的本質(zhì)和方法。
這是初步擬定的目錄，非最終交付目錄。其次這份專欄我將會篩選30個左右的問答免費給大家分享試看。
1. 認識UI
什么是設(shè)計？（已完結(jié)）
設(shè)計的目的是什么？（已完結(jié)）
設(shè)計和藝術(shù)的區(qū)別？（已完結(jié)）
UI設(shè)計是什么？（已完結(jié)）
UI設(shè)計有什么分類？（已完結(jié)）
UI和UE、UX的區(qū)別？（已完結(jié)）
UI設(shè)計和平面設(shè)計的區(qū)別（已完結(jié)）
UI設(shè)計和電商設(shè)計有什么區(qū)別？（已完結(jié)）
UI設(shè)計有什么價值？
國內(nèi)UI設(shè)計的發(fā)展歷程
2. 就業(yè)前景
UI設(shè)計師現(xiàn)在的就業(yè)前景怎么樣？
哪些公司和行業(yè)需要招聘UI設(shè)計師？
UI設(shè)計師飽和了嗎，還值得選擇嗎？
失業(yè)的UI設(shè)計師越來越多，還能選擇UI設(shè)計嗎？
UI設(shè)計師的工作流程是怎樣的？
UI設(shè)計師主要負責(zé)什么工作內(nèi)容?
新手UI設(shè)計師的薪資收入一般在哪個水平？
UI設(shè)計師的薪資收入晉升模型
UI設(shè)計師會經(jīng)常加班嗎？
UI設(shè)計師的工作壓力大嗎？
UI設(shè)計師職業(yè)發(fā)展路線圖是怎樣的？
UI設(shè)計師是不是過了30歲就會過氣？
技術(shù)崗位未來是否一定要朝著管理崗發(fā)展嗎？
一二三線城市的環(huán)境對UI設(shè)計師就業(yè)和成長有影響嗎
談不上對UI設(shè)計特別熱愛，但覺得UI設(shè)計工資高，可以選擇這個行業(yè)嗎？
學(xué)會UI設(shè)計可以創(chuàng)業(yè)或做自由設(shè)計師嗎？
3. 如何學(xué)習(xí)
UI設(shè)計師需要學(xué)習(xí)什么內(nèi)容？
UI設(shè)計師需要掌握哪些必備技能？
UI設(shè)計學(xué)習(xí)的步驟是什么？
需要多久才能成為一個優(yōu)秀的設(shè)計師?
除了設(shè)計，UI設(shè)計師還需要培養(yǎng)什么職業(yè)技能？
學(xué)習(xí)UI設(shè)計的常見方法
UI設(shè)計可以自學(xué)嗎？
自學(xué)UI設(shè)計有什么難點和挑戰(zhàn)？
審美能力不好，可以學(xué)好UI設(shè)計嗎？
UI設(shè)計需要學(xué)習(xí)什么軟件?
學(xué)會軟件一般需要多長時間？
UI設(shè)計需要買蘋果電腦嗎？
用Photoshop可以設(shè)計UI嗎？
UI設(shè)計需要看什么設(shè)計書籍？
有哪些免費學(xué)習(xí)的教程網(wǎng)站？
錄播課程和設(shè)計培訓(xùn)班有什么區(qū)別？
有那些物美價廉的付費課程推薦？
選擇設(shè)計培訓(xùn)班需要注意什么？
培訓(xùn)班學(xué)完以后就能成為UI設(shè)計師了嗎？
培訓(xùn)班對找工作有幫助嗎？
UI設(shè)計師需要美術(shù)相關(guān)專業(yè)嗎
什么樣的專業(yè)更適合UI設(shè)計？
學(xué)歷對UI設(shè)計師的學(xué)習(xí)有影響嗎？
設(shè)計臨摹對新手UI設(shè)計師有什么幫助？
設(shè)計臨摹有什么技巧和方法？
設(shè)計臨摹的作品可以加入個人作品集嗎？
一名好的UI設(shè)計師應(yīng)該具備什么素質(zhì)？
優(yōu)秀的設(shè)計師都有什么好的設(shè)計習(xí)慣？
4. 如何求職
企業(yè)招聘UI設(shè)計師的流程是什么？
企業(yè)招聘UI設(shè)計師主要考核標(biāo)準是什么？
企業(yè)愿意招聘新手UI設(shè)計師嗎？
新手UI設(shè)計師應(yīng)該選擇什么樣的企業(yè)？
去不了大廠，新手設(shè)計師是不是就沒前途？
創(chuàng)業(yè)團隊、小公司值得新手UI設(shè)計師去嗎?
UI設(shè)計師的求職流程是什么？
UI設(shè)計師求職需要準備什么資料？
簡歷設(shè)計對UI設(shè)計師重要嗎？
如何設(shè)計一份優(yōu)秀的作品集？
新手UI設(shè)計師有什么求職技巧？
學(xué)歷低對UI設(shè)計師的求職有沒有影響，如何規(guī)避？
沒有工作經(jīng)驗怎么辦，能找到工作嗎？
一直找不到工作怎么辦，是不是應(yīng)該放棄UI設(shè)計？
設(shè)計是什么？為什么需要設(shè)計？UI設(shè)計這個行業(yè)又是怎么誕生的？UI設(shè)計師的工作內(nèi)容具體是什么？非科班畢業(yè)的大學(xué)生適合從事設(shè)計行業(yè)嗎？這個行業(yè)需要學(xué)習(xí)多久才能成為一名優(yōu)秀設(shè)計師？作為此次專題的開篇內(nèi)容，我們在這個章節(jié)將會抽絲剝繭向大家介紹UI設(shè)計的由來、定義、分類和價值，幫助大家快速對UI設(shè)計這門學(xué)科有一個宏觀的了解。
我們先看百度百科對設(shè)計的定義。設(shè)計，是指設(shè)計師有目標(biāo)、有計劃地進行技術(shù)性的創(chuàng)作與創(chuàng)意活動。維基百科認為，所謂設(shè)計，即“設(shè)想和計劃，設(shè)想是目的，計劃是過程安排”，通常是指有目標(biāo)和計劃的創(chuàng)作行為及活動。
著名的美國設(shè)計理論學(xué)家維克多·帕帕奈克認為，設(shè)計是為構(gòu)建有意義的秩序而付出的有意識的、直覺上的努力。他認為設(shè)計有兩個步驟。第一步：理解用戶的期望、需要、動機，并理解業(yè)務(wù)、技術(shù)和行業(yè)上的需求與限制。第二步：將這些知道的東西轉(zhuǎn)化為對產(chǎn)品的規(guī)劃（或者產(chǎn)品本身），使產(chǎn)品的形式、內(nèi)容和行為變得有用、能用、令人向往，并且在經(jīng)濟和技術(shù)上可行。
簡單總結(jié)一下，設(shè)計是有目的的，有計劃的、滿足用戶的期望的行為。比如企業(yè)需要設(shè)計一個官網(wǎng)進行對外宣傳，網(wǎng)站的設(shè)計就屬于有目的、有計劃的工作，而宣傳則是企業(yè)的核心需求。
為什么我們需要先了解“設(shè)計”的概念？這是因為UI設(shè)計只是設(shè)計的一個細分領(lǐng)域，設(shè)計的種類非常多，設(shè)計在許多領(lǐng)域都有應(yīng)用，涉及的方面也比較廣泛。只有初步了解這個宏觀的大概念，我們才能更清晰地看清楚UI設(shè)計的本質(zhì)，從而為我們的學(xué)習(xí)進行指導(dǎo)。
參考文獻：
百度百科-設(shè)計
維基百科-設(shè)計
《步步為贏：交互設(shè)計全流程解析》- 董尚昊
我們先看世界上第一所完全為發(fā)展設(shè)計教育而建立的學(xué)院包豪斯對于設(shè)計的三個基本觀點。
①設(shè)計是藝術(shù)與技術(shù)的新統(tǒng)一；②設(shè)計的目的是人而不是產(chǎn)品；③設(shè)計必須遵循自然與客觀的法則來進行。
包豪斯提出“以解決問題為中心”的設(shè)計理念。他們認為設(shè)計是為了解決問題，不論是設(shè)計一個水壺，還是一款手機應(yīng)用軟件，設(shè)計師都是在為他人服務(wù)，在幫使用者解決問題。這個設(shè)計理念深深地影響了設(shè)計界。設(shè)計是理性和感性的結(jié)合，并以解決問題、滿足人們的需要為目的。
中國現(xiàn)代設(shè)計和現(xiàn)代設(shè)計教育的重要奠基人之一、美國設(shè)計教育最高學(xué)府——美國藝術(shù)中心設(shè)計學(xué)院教授王受之在他的著作《世界現(xiàn)代設(shè)計史》中寫過這樣一句話：“設(shè)計是為他人服務(wù)的活動。”
日本當(dāng)代國際級平面設(shè)計大師藝術(shù)總監(jiān)原研哉在《設(shè)計中的設(shè)計》一書中也有類似的表達：“設(shè)計的實質(zhì)在于發(fā)現(xiàn)很多人都遇到的問題然后試著去解決的過程。”
綜上所述，設(shè)計的目的是用設(shè)計方案來滿足用戶的需要，而不是單純產(chǎn)出設(shè)計師認為美觀的方案。這是設(shè)計過程中最重要的指導(dǎo)原則之一。如果不理解設(shè)計的本質(zhì)，我們在以后的商業(yè)設(shè)計中就很容易陷入一個怪圈，我覺得這個界面這樣設(shè)計得非常好看，但客戶卻讓我去臨摹另外一個我認為很普通的產(chǎn)品界面，客戶覺得那個才是他想要的。
參考文獻：
《步步為贏：交互設(shè)計全流程解析》- 董尚昊
我們看看維基百科對藝術(shù)的介紹。藝術(shù)是指憑借想象力、經(jīng)驗等綜合人為因素的融合與平衡，以創(chuàng)作隱含美學(xué)的器物、環(huán)境、影像、動作或聲音的表達模式。而百度百科則對藝術(shù)沒有明確的定義。藝術(shù)是一種社會現(xiàn)象、社會事物，屬上層建筑中的社會意識形態(tài)，其次也指向各種技術(shù)活動，比如畫、雕刻、建筑等活動。
藝術(shù)的目的可以分為無動機的及有動機的兩類。無動機的藝術(shù)是指那些本來就是人類不可或缺一部分的藝術(shù)，這類的藝術(shù)超越個人，或是不是為某一特定目的所創(chuàng)作。有動機的藝術(shù)是指那些因為特定目的產(chǎn)生的藝術(shù)。可能是為了政治的變革、表達特定的感情、陳述個人心理，或是作為一個交流的工具。
原研哉在《設(shè)計中的設(shè)計》對設(shè)計和藝術(shù)也發(fā)表了自己的看法。
藝術(shù)說到底是個人意愿對社會的一種表達，其起源帶有非常個人化的性質(zhì)，所以只有藝術(shù)家自己才知道其作品的來源。而設(shè)計，則基本上不是一種自我表達，它源于社會。設(shè)計的實質(zhì)在于發(fā)現(xiàn)一個很多人都遇到的問題，然后試著去解決的過程。
簡單總結(jié)，設(shè)計和藝術(shù)有很多重疊的部分，兩者最本質(zhì)的區(qū)別是設(shè)計的本質(zhì)是滿足需要，包含更多的商業(yè)述求，而藝術(shù)的目的是表達藝術(shù)家對世界的看法，不受外界的約束。為什么要弄懂這兩者的區(qū)別，這是因為在商業(yè)設(shè)計中或許不會給你有太多充足的時間去完成完美的稿子，而是要以甲方或企業(yè)的設(shè)計目標(biāo)為主、商業(yè)設(shè)計，不是藝術(shù)，而是要通過設(shè)計滿足甲方的需求。
參考文獻：
維基百科-藝術(shù)
《設(shè)計中的設(shè)計》- 原研哉
由前UI設(shè)計屬于近代興起的設(shè)計分類，這是隨著科技的快速發(fā)展才催生出來的新興行業(yè)。目前對于UI設(shè)計的定義，目前國內(nèi)有兩種流派。
第一種，UI設(shè)計包含界面設(shè)計（Graphical User Interface，簡稱GUI）、交互設(shè)計（Interaction Design，簡稱IxD）和用戶體驗設(shè)計（User Experience Design，簡稱UX）。
我們先看百度百科對UI設(shè)計的定義描述。UI是User Interface(用戶界面)的簡稱，是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。UI是一個廣義的概念，可以通過以下三個層面來理解UI的概念。
首先，UI是指人與信息交互的媒介，它是信息產(chǎn)品的功能載體和典型特征。比如以視覺為主體的界面，強調(diào)的是視覺元素的組織和呈現(xiàn)，包含圖形、圖標(biāo)、色彩、字體等，這就是我們常說的視覺表現(xiàn)層，用戶從視覺就可以直接感知的部分。在這一層面，UI就是用戶界面，也是國內(nèi)普遍對UI設(shè)計的認知。
其次，UI是指信息的采集與反饋、輸入與輸出，這是基于界面而產(chǎn)生的人與產(chǎn)品之間的交互行為。在這一層面，Ul可以理解為User Interaction，即用戶交互，需要通過界面對功能的隱喻和引導(dǎo)用戶來完成對應(yīng)的操作。因此，UI不僅要有精美的視覺表現(xiàn)，也要有方便快捷的操作，以符合用戶的認知和行為習(xí)慣。
最后，UI的高級形態(tài)可以理解為User Invisible（中文：看不見的）。對用戶而言，在這一層面UI是“不可見的”，這并非是指視覺上的不可見，而是讓用戶在界面之下與系統(tǒng)自然地交互，沉浸在他們喜歡的內(nèi)容和操作中，忘記了界面的存在。其實這就是用戶體驗，不僅僅是界面，而是以用戶為中心進行界面結(jié)構(gòu)、行為、視覺層面的設(shè)計。
從百科的對UI設(shè)計的定義可以看出，UI設(shè)計包含了界面設(shè)計、交互設(shè)計和用戶體驗設(shè)計，這也是國內(nèi)眾多UI設(shè)計書籍中的對UI設(shè)計的定義。比如在《術(shù)與道：移動應(yīng)用UI設(shè)計必修課》、《視界·無界：寫給UI設(shè)計師的設(shè)計書》、《UI設(shè)計精品必修課》等國內(nèi)設(shè)計書籍都有類似的觀點。甚至有這么一個很流行的比喻：如果把一款軟件產(chǎn)品比作一個美女的話，視覺就是一個美女的化妝和打扮，交互就是一個美女的五官位置及骨骼體態(tài)，用戶體驗就是美女是否善解人意、功能貼心、易用好用等。
第二種，UI設(shè)計、交互設(shè)計和用戶體驗設(shè)計是獨立的學(xué)科，他們雖然有很多重疊部分，但交互設(shè)計和用戶體驗設(shè)計不屬于UI設(shè)計，甚至UI設(shè)計等同于界面設(shè)計。
在Joel Marsh的《用戶體驗設(shè)計：100堂入門課》這本書中，作者舉了個例子：“UI和UX（用戶體驗設(shè)計）是兩種不同的工作。如果有的公司有‘UI/UX’這一職稱，那說明這家公司根本不了解什么是UX，或者他們想花一份錢就讓人做兩份工作。要當(dāng)心?！?br />
在《這才是用戶體驗設(shè)計：人人都看得懂的產(chǎn)品設(shè)計書》里，作者認為界面設(shè)計包括信息層和呈現(xiàn)層。UI設(shè)計的范圍比界面設(shè)計要小得多，通常僅關(guān)注虛擬產(chǎn)品的信息呈現(xiàn)，而且較少涉及藝術(shù)向的視覺設(shè)計。信息層則由交互設(shè)計師負責(zé)，待界面上要呈現(xiàn)的信息架構(gòu)和具體信息明確后，UI設(shè)計師才開始設(shè)計工作。其次UX設(shè)計師主要關(guān)注上層設(shè)計，而UI的工作非常細，比如如按鈕、字體的設(shè)計。
這種觀點也是目前國內(nèi)多數(shù)企業(yè)和設(shè)計師對UI設(shè)計的定義，UI設(shè)計就主要是負責(zé)界面設(shè)計的工作，尤其指移動端產(chǎn)品界面，比如APP、智能設(shè)備等。
結(jié)合以上兩種流派對UI設(shè)計的定義，我認為，從視覺層面，UI設(shè)計可以定義為用戶界面設(shè)計，不管是web端、移動端還是其他智能設(shè)備，凡是涉及到用戶界面的設(shè)計，都可以歸納為UI設(shè)計；從交互層面，UI設(shè)計還需要思考界面對功能的隱喻和引導(dǎo)，從而幫助用戶完成對應(yīng)的操作；從體驗層面，UI設(shè)計需要從視覺、色彩、行為和交互等方面為用戶提供優(yōu)秀的體驗，讓用戶可以和系統(tǒng)自然地交互，沉浸在他們系統(tǒng)操作中。
總之，一名優(yōu)秀的UI設(shè)計師，絕非只是畫好圖標(biāo)、完成界面設(shè)計這樣的基礎(chǔ)工作，而是從整個產(chǎn)品的用戶體驗出發(fā)，從視覺到實際操作，為用戶提供最友好的使用體驗。理解這個概念，我們才能確立真正的學(xué)習(xí)目標(biāo)和職業(yè)定位，朝著一名優(yōu)秀的UI設(shè)計師而努力。
參考文獻：
百度百科-UI設(shè)計
《術(shù)與道：移動應(yīng)用UI設(shè)計必修課》- 余振華
《視界·無界：寫給UI設(shè)計師的設(shè)計書》- 王涵
《UI設(shè)計精品必修課》- 常麗 李才應(yīng)
《用戶體驗設(shè)計：100堂入門課》- Joel Marsh
《這才是用戶體驗設(shè)計：人人都看得懂的產(chǎn)品設(shè)計書》- 李磊
從用戶人群劃分，像淘寶、美團這樣以個人消費者（Customer）使用為主的產(chǎn)品，稱為C端產(chǎn)品，屬于最常見的UI設(shè)計，稱為C端UI設(shè)計；而像有贊、微盟這樣的以服務(wù)企業(yè)（Bussiness）的產(chǎn)品，稱為B端產(chǎn)品，這就是B端設(shè)計師的由來，目前市場對B端UI設(shè)計師的需求比較大。
從使用設(shè)備劃分，從事電腦端設(shè)計的稱為WUI（Web User Interface），也就是網(wǎng)頁設(shè)計師，從事移動端設(shè)計的稱為GUI（Web User Interface，圖形處理設(shè)計師），是我們普遍理解的UI設(shè)計師。
從設(shè)計對象劃分，UI設(shè)計可以分為電腦界面、APP界面、平板、智能手表、車載導(dǎo)航設(shè)備、智能電視界面、可穿戴設(shè)備界面、醫(yī)療及各種數(shù)碼機床等自動化控制界面和微型嵌入式設(shè)備界面等類型。
從交互方式劃分，UI設(shè)計可以分為GUI和VUI，GUI就是我們上文提到的圖形處理設(shè)計師，而VUI（Voice User Interface）則是通過語音交互的界面設(shè)計，比如小度、天貓精靈。
從行業(yè)劃分，UI設(shè)計師可以分為不同行業(yè)的設(shè)計師，比如從事醫(yī)療產(chǎn)品的UI設(shè)計師，從事人工智能的UI設(shè)計師。
簡單總結(jié)，未來隨著各種智能設(shè)備、人工智能、AR的發(fā)展，將會誕生出更多細分行業(yè)的UI設(shè)計師，不管是現(xiàn)在最火爆的B端設(shè)計師，還是車載設(shè)計師，未來面對日新月異的科技發(fā)展，只有理解UI設(shè)計的本質(zhì)和方法，才能應(yīng)付越來越多的不確定性。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
ThingJS 基于 HTML5 和 WebGL 技術(shù)，可方便地在主流瀏覽器上進行瀏覽和調(diào)試，支持 PC 和移動設(shè)備。
ThingJS 為可視化應(yīng)用提供了簡單、豐富的功能，只需要具有基本的 Javascript 開發(fā)經(jīng)驗即可上手。
ThingJS 提供了場景加載、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度云圖、界面數(shù)據(jù)展示、粒子效果等各種可視化功能網(wǎng)頁鏈接。
谷歌人工智能寫作項目：小發(fā)貓
如果可視化平臺還覺得太難了，那真的沒有簡單的了，程序員還得寫代碼，全靠經(jīng)驗判定呢typescript是用來干什么的，為什么要用typescript。
軟件是由程序員編寫的代碼出現(xiàn)的，一般開發(fā)軟件需要有UI前端，后臺程序員，還有數(shù)據(jù)庫人員等來一起完成一個項目，一般沒有專業(yè)知識的是沒有辦法去獨立開發(fā)一個軟件平臺的哦。首先要開發(fā)軟件，需要知道要什么功能？
達到什么效果？最終實現(xiàn)目的。這幾個問題搞清楚之后，就可以考慮自己的預(yù)算，考慮好了預(yù)算之后，才好結(jié)合自己的需求，提供給軟件開發(fā)公司進行溝通，溝通之后，確定價格，這樣就可以簽合同開始制作啦。
如果有疑問，可以在下面補充，我們一起討論吧。
HEC-DSSVue是一個基于Java的可視化實用程序，允許用戶在HEC-DSS數(shù)據(jù)庫文件中繪制，制表，編輯和操作數(shù)據(jù)。
HEC-DSSVue生成的圖形是高度可定制的，可以以各種格式保存，包括“jpeg”和“png”（便攜式網(wǎng)絡(luò)圖形），或者打印或復(fù)制到剪貼板以包含在報告中。HEC-DSSVue包含六十多個數(shù)學(xué)函數(shù)。
除了這些函數(shù)之外，HEC-DSSVue還提供了幾個實用程序函數(shù)，這些函數(shù)提供了一種將數(shù)據(jù)集輸入到HEC-DSS數(shù)據(jù)庫中、重命名數(shù)據(jù)集名稱、將數(shù)據(jù)集復(fù)制到其他HEC-DSS數(shù)據(jù)庫文件以及刪除數(shù)據(jù)集的方法。
一、AdobeEdge目前還處于預(yù)覽階段的AdobeEdge是用HTML5、CSS、JavaScript開發(fā)動態(tài)互動內(nèi)容的設(shè)計工具。內(nèi)容可以同時兼容移動設(shè)備和桌面電腦。
Edge的一個重要功能是Web工具包界面，方便確保頁面在不同瀏覽器中的架構(gòu)一致性，此外Edge還將整合T...。
。
前端需要掌握的技術(shù)還是很多的1.熟練掌握前端開發(fā)技術(shù)(HTML5、CSS3、JS、JSON、XHTML)，了解各項技術(shù)的相關(guān)標(biāo)準；2.掌握Ajax異步編程，能夠?qū)懗龈咝阅?、可?fù)用的前端組件；3.對OO、MVC、MVVM等編程思想、前端框架有深刻理解，熟練掌握至少一個前端框架了解其原理（常用前端框架Vuejs，AngularJS，React，Bootstrap，QUICKUI，移動端有：FrozenUI，weUI，SUI，MUI，AUI）；4.善于Web性能優(yōu)化，可訪問性、對SEO等有良好的體驗；理解表現(xiàn)層與數(shù)據(jù)層分離的概念、Web語義化；5.了解前端安全機制，熟悉HTTP協(xié)議以及瀏覽器緩存策略；6.熟悉常見JS開發(fā)框架源碼實現(xiàn)（如：prototype、jQuery、Mootools，Ext，Dojo，underscore、YUI、Kissy）；7.擁有良好的代碼編寫，設(shè)計文檔撰寫的經(jīng)驗，熟練使用Git等版本控制工具；8.對常見的瀏覽器兼容問題有清晰的理解，并有可靠的解決方案；如IE6/7/8/9、Firefox、Safari、Chrome。
。
可往3D開發(fā)工程師轉(zhuǎn)型，前提要熟練掌握js，熟悉webgl，這里你可以練練手網(wǎng)頁鏈接ThingJS基于HTML5和WebGL技術(shù)，可方便地在主流瀏覽器上進行瀏覽和調(diào)試，支持PC和移動設(shè)備。
ThingJS為可視化應(yīng)用提供了簡單、豐富的功能，只需要具有基本的Javascript開發(fā)經(jīng)驗即可上手。
ThingJS提供了場景加載、分層級瀏覽，對象訪問、搜索、以及對象的多種控制方式和豐富的效果展示，可以通過綁定事件進行各種交互操作，還提供了攝像機視角控制、點線面效果、溫濕度云圖、界面數(shù)據(jù)展示、粒子效果等各種可視化功能。
ThingJS提供如下相關(guān)組件和工具供用戶使用：CityBuilder：聚焦城市的3D地圖搭建工具，打造你的3D城市地圖。CamBuilder：簡單、好用、免費的3D場景搭建工具。
ThingPano：全景圖制作工具，輕松制作并開發(fā)全景圖應(yīng)用，實現(xiàn)3D宏觀場景和全景微觀場景的無縫融合。ThingDepot：上萬種模型，數(shù)十個行業(yè)，自主挑選，一次制作多次復(fù)用。
初學(xué)者必看干貨web前端學(xué)習(xí)路線圖，隨著移動互聯(lián)網(wǎng)的發(fā)展，web前端逐漸受到企業(yè)的重視，前端開發(fā)人員的薪資也水漲船高，越來越多的人看好前端行業(yè)的發(fā)展，想要轉(zhuǎn)行加入。
下面，給大家分享一份web前端學(xué)習(xí)路線圖，希望對初學(xué)者有所幫助。Web前端行業(yè)的發(fā)展，讓前端人員能完成比以前更多的職責(zé)范圍，所以未來前端可以寬口徑就業(yè)，前景非常好。
除此之外，目前web前端工程師日均崗位缺口超50000，平均薪資10820元/月。對于零基礎(chǔ)的人而言，要怎么學(xué)習(xí)web前端呢？1、前端頁面重構(gòu)。
主要內(nèi)容為PC端網(wǎng)站布局、Photoshop工具及切圖、H5移動端網(wǎng)頁布局、HTML5+CSS3新特性與交互。學(xué)習(xí)目標(biāo)是完成PC端網(wǎng)站布局，可實現(xiàn)響應(yīng)式布局，一套代碼適配PC端、移動端、平板設(shè)備等。
2、前后端網(wǎng)頁交互。
主要內(nèi)容為JavaScript語法全面進階、ES6到ES10新語法實踐、jQuery應(yīng)用及插件使用、設(shè)計模式及插件編寫、封裝JS工具庫及WebAPIS、AJAX+PHP+MySQL前后端交互、前端工程化與模塊化應(yīng)用以及PC端全棧開發(fā)項目等。
學(xué)習(xí)目標(biāo)是可以掌握前端工程化工具，如git、gulp、webpack等，搭建項目及開發(fā)項目。3、+前端框架。
主要內(nèi)容為全面進階、Koa2+MongoDB搭建服務(wù)、框架、框架、小程序云開發(fā)與小程序框架、原生APP與混合APP、數(shù)據(jù)可視化與桌面應(yīng)用等。
學(xué)習(xí)目標(biāo)是掌握桌面應(yīng)用及可視化大數(shù)據(jù)，實現(xiàn)復(fù)雜數(shù)據(jù)展示類項目，能夠獨立完成前后臺相關(guān)功能，勝任HTML5全棧開發(fā)工程師職位。
很多學(xué)習(xí)web前端的朋友都希望在學(xué)成后能找到一份滿意的工作，所以我們在學(xué)習(xí)過程中一定要注意實戰(zhàn)經(jīng)驗的積累，如果你所學(xué)的東西對企業(yè)沒有用，那你所做的一切都是無用功。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(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ù)字指標(biāo)，以及懸浮于地圖之上的分級菜單以及圖例。
文字加數(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é)，或者說是與正常字體不同的地方，提煉出他的特殊樣式，再運用到其他的圖表當(dāng)中去，這個從0到1的過程，我把它叫做組件化的過程。在你多做了幾套組件的時候，就會覺得圖表可以千變?nèi)f化，但你還是能夠知道他是怎么利用基礎(chǔ)圖形變形而來的?？炊嗔?，做多了，網(wǎng)上看到好看的圖表，一眼就能提煉出他的特殊點，再運用組件化思維，真正的化為己用。
再教大家一個方法，設(shè)計出一套組件的時候，只有運用到項目中，實現(xiàn)出來，才是一個成功的商業(yè)組件化過程（我自己做項目就是，看到好的設(shè)計，我下次做項目怎么我都要用上去）。此處指的不是抄襲，而是提煉不同點，運用到自己的組件中。
找出所有圖表的共性
區(qū)分不同圖表的差異性
結(jié)合基礎(chǔ)組件，去變形，去豐富
了解組件的顏色以及風(fēng)格，去運用
拓展文字排版，地圖樣式
拓展撒點，以及彈框
在布局的時候，挑選合適的布局方式，需要考慮到字段的長短，圖表的寬窄，圖標(biāo)的大小，以及畫面的平衡，需要提前進行布局（就跟繪畫構(gòu)草圖一個道理）。
1. 標(biāo)題與logo沒有形成好的聯(lián)系
2. 指標(biāo)數(shù)字類的東西，沒有與地圖關(guān)聯(lián)，比較分散
3. 地圖主視覺表現(xiàn)內(nèi)容太少，空洞
4. 文字區(qū)域示意不明，圖表？地圖內(nèi)容？
5. 整體布局不和諧，各處模塊太分散
6. 畫面裝飾無法連接各個模塊
1. 標(biāo)題與LOGO之間要建立聯(lián)系
2. 將指標(biāo)類的數(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(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)式液晶顯示裝置。
當(dā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ā)一套的時間去適配兩個甚至是多個終端，這是我們需要注意的。當(dāng)然考慮到一些實際情況，會有一定程度上的修改，但是一定是要從節(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è)計的，大屏展示正常才是我們的唯一標(biāo)準，投屏電腦可能會出現(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(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)的指標(biāo)。數(shù)據(jù)可視化也有很多分類, 不過也許你也懶得了解了。
比如，網(wǎng)站后臺分析，可以說是可視化分析報表類的，例如百度統(tǒng)計，谷歌統(tǒng)計等等；比如，面對B端后臺的數(shù)據(jù)可視化，國內(nèi)做的最好的無非就是antdesign，element；我們此處說的是基于G端的數(shù)據(jù)可視化大屏，G端數(shù)據(jù)可視化從本質(zhì)上來說是注重直接解決問題，通過直觀的展示數(shù)據(jù)圖表去了解各個指標(biāo)的詳細數(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)格，比如射擊類，格斗類，動作類游戲等等（賽博朋克，堡壘之夜，絕地求生）。
相對于當(dā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è)計理念，提升視覺技法，這才是當(dāng)下比較重要的。
最近由于工作中的一個項目，對自己充滿了懷疑，究竟什么叫科技感？不同的應(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)該是以上指標(biāo)中，最令人可以接受對科技感風(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(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ù)字屏幕閱讀時，字體的選擇要選用無襯線體（比如黑體，微軟雅黑）厚重一點，不可選用襯線體（比如宋體，書法體）比較單薄。
標(biāo)題可以用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ù)展示更加友好。
政府類客戶對于文字大小粗細的追求可以說是非常的偏激，字體加大加粗幾乎成了標(biāo)配，這種需求下，我們能做的就是在原有規(guī)范的基礎(chǔ)上盡量去提升字號和字重。
常規(guī)16：9指的是1920*1080的分辨率
在字體大小的選擇上，參考了頁面上常規(guī)大小，定義了一套關(guān)于不同尺寸下的標(biāo)準字號，正常1080P頁面，最小字號不小于16px。
此處字號并不是絕對，因為考慮到目標(biāo)群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗，具體字號大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距，人為原因等因素。
常規(guī)32：9指的是3840*1080的分辨率
在字體大小的選擇上，其實是兩塊1080P的屏幕進行拼接，因此如果畫面內(nèi)容較多時，定義最小字號不小于16px。
如果畫面內(nèi)容較少時，具體字號大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素，對字體進行相應(yīng)的放大，比例合適即可。
此處字號并不是絕對，因為考慮到目標(biāo)群體適老化的原因，我們主動提高了字體的大小，一切都是為了提高客戶的觀測體驗。
特殊尺寸指的是非主流的分辨率，比如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
中文字體包含了一些可以做標(biāo)題的一些造型比較好看的字體，比如優(yōu)設(shè)標(biāo)題黑，站酷高端黑體，盧帥正銳黑體，胡曉波男神體等等?？勺稣淖煮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)容較少時，可以適當(dāng)提高字號，反之亦然，比例合適即可。
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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(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ū)別各種不同色彩的最準確的標(biāo)準。比如紅色、黃色、藍色等。色相可以具體到各個行業(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)、旅游。
缺點： 當(dāng)綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
藍色是大多數(shù)人最喜歡的顏色。由于藍色自帶的親和力，它是數(shù)字產(chǎn)品設(shè)計中最常用的顏色（除了黑色和白色）。
含義： 平靜、和平、安全、寧靜、信任。
適用： 公安，監(jiān)控，交通，政府機關(guān)。
缺點： 由于其流行性與適用性，作為品牌主色很難脫穎而出。
電力行業(yè)一般以國家電網(wǎng)的綠色系為主，給人一種安全可靠，綠色環(huán)保的電力行業(yè)。
含義： 安全、可靠、綠色、環(huán)保。
適用： 電力，電網(wǎng)，網(wǎng)絡(luò)安全。
缺點： 當(dāng)綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
生態(tài)代表著健康，和諧，自然，綠色是大自然的顏色，人們對綠色的喜愛程度僅次于藍色，綠色具有絕佳的親和力。
含義： 健康、自然、平靜、放松、成長。
適用： 醫(yī)療康復(fù)、生態(tài)、旅游。
缺點： 當(dāng)綠色作為主色時，你可能需要再找一個顏色表示成功消息了。
金融行業(yè)非常注重屬性搭配，暖色系可以增加購買欲望，使人有溫暖的感覺。橙色被認為是一種非常有活力和熱情的顏色， 它促進活動和創(chuàng)造性思維。
含義： 創(chuàng)意、能量、熱情、活躍、煩躁。
適用： 金融，證券，貨幣，黨建。
缺點： 當(dā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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(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)當(dāng)也包含對于特殊人群的基本考慮，要讓目標(biāo)人群覺得：魚和熊掌都可兼得，既照顧了特殊人群的使用，又兼顧所有人。
原則 ：好的設(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)于不同尺寸下的標(biāo)準字號，正常1080P頁面，最小字號不小于16px，具體字體大小還需要參考設(shè)備清晰度，環(huán)境燈光，視距等因素。
界面中的前景與背景的對比度，是否足以讓政府類客戶清楚識別；
顏色不應(yīng)該用作傳達信息的唯一視覺手段，需要用額外的文字提示；
通過 H（色相）S（飽和度）B（明度）的數(shù)值來劃分色域，在保持H值不變的前提下，定義了10個色域。所以在前后景的顏色選擇上，滿足跨度至少為6，才能讓目標(biāo)人群準確識別文字信息。
視覺呈現(xiàn)以及文案圖像對比度至少要有7:1，大文本至少有4.5:1的對比度。有很多在線工具可以幫助檢測顏色對比度以及是否達標(biāo)，如Contrast Ratio 在線檢測工具：
畫面采用多種飽和度較高的顏色，而不是單色；
顏色的豐富程度決定了畫面的視覺表達，色彩越豐富，畫面表現(xiàn)越好；
增加圖形的占比大小，提升視覺上的表現(xiàn)；
盡量采用識別度較強的圖形和圖標(biāo)，盡可能貼近客戶的認知范疇；
圖標(biāo)和圖形盡量搭配文字描述，方便客戶更清晰更快速理解。
觀測距離的遠近，也決定著畫面的展示效果，盡可能的拉近觀測距離；
正常視距觀測下，以常規(guī)設(shè)計規(guī)范去制定即可，如若觀測距離較近，則可適當(dāng)縮小相應(yīng)的視覺表現(xiàn)，反而觀測距離較遠，則放大視覺。
設(shè)備的尺寸、精度，分辨率大小都會影響目標(biāo)人群的體驗；
在設(shè)備精度較低，或者說點間距過大時，應(yīng)當(dāng)適當(dāng)放大視覺表現(xiàn)，點間距小的則顯示非常清晰，可適當(dāng)縮小視覺表現(xiàn)。
為了保證適老化的推廣，需要在適老化的基礎(chǔ)上統(tǒng)一標(biāo)準，在字體，顏色，框架，圖形等內(nèi)容上做出提煉，深入了解目標(biāo)客戶的需求以及客戶心理。
本著嚴謹務(wù)實，安全性，實用性等原則，沉淀出一套符合目標(biāo)人群的設(shè)計規(guī)范，應(yīng)用并推廣到不同設(shè)計團隊以及推廣到廣大設(shè)計師中去。
我們需要不斷踐行適老化設(shè)計原則，體現(xiàn)設(shè)計的通用性和包容性，應(yīng)當(dāng)在設(shè)計表現(xiàn)和產(chǎn)品功能上更加的包容這個群體。人工智能大數(shù)據(jù)時代，雖說政府類客戶會比普通人更容易接受，但是受制于某些原因，推動解決老年人面對智能技術(shù)的問題解決才是重中之中。
設(shè)計師也需要運用自己的專業(yè)性，來幫助目標(biāo)人群融入數(shù)字化的生活中去。
因為在不久的將來，我們也會變成這個群體，當(dāng)我們面對這些束手無策時，那時的設(shè)計又會是如何適老的呢？適老化設(shè)計是適合所有人的設(shè)計，所有的設(shè)計師都應(yīng)該密切關(guān)注。
1-不要依賴顏色來傳達信息（客戶更喜歡文本，有特殊含義除外：四色預(yù)警，國標(biāo)色）；
2-文字展示要清晰，字號大小要更加適合目標(biāo)群體；
3-提高顏色對比度，豐富畫面色彩，禁止使用單一色系；
4-界面中重要元素應(yīng)盡量避免使用藍色（特殊行業(yè)除外：公安等其他）；
5-增加圖形以及圖標(biāo)的視覺表現(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è)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
藍藍設(shè)計的小編 http://sillybuy.com