隨著大數據產業的蓬勃發展，很多企業都開始應用數據可視化。所以數據可視化設計，絕對是熱門的設計之一。很多 UI 設計師突然會接到公司數據可視化設計的需求，如果不了解數據可視化設計，肯定是一頭霧水，不知從何入手。本文結合最近設計案例，分享大屏可視化設計過程中遇到的一些問題以及設計思路，供大家一起交流與學習。
△ 最終動態效果圖
首先放的是項目改版前的頁面：
1. 需求介紹
某某應用云，分為五大云平臺模塊：云端綜合調度、數據查詢通道、數據應用處理、數據存儲管理、管理運行維護。每個大模塊下?有若干個子系統。
可視化?屏首頁需要展示的內容包括：
2. 需求分析
分析大屏可視化的一些共性：
結合大屏的一些共性特點針對看到的線上舊版本設計，分析存在的問題。
3. 布局
整合數據，分析出主要數據、次要數據、總量數據、細分數據、各數據的維度等等。首先優化頁面布局，可以先在紙上畫一畫，然后腦子里有大概思路以后再用電腦繪制，如下圖：
采用柵格化對稱布局，讓整體視覺左右平衡。
4. 風格
一提到數據可視化大家往往能想到科技、數據、藍色等一些普遍關鍵詞。
了解到客戶是想做一個科技感強、炫酷的視覺效果?？梢栽诰W上找一些效果圖或是自己曾經做過的案例供客戶選擇，確定一個大致的風格，然后結合具體的業務場景進行設計。
5. 顏色
顏色上結合產品使用場景，以及整個產品調性還是以藍色為主，背景選用深色調，讓視覺更好聚焦，內容部分采用比較透亮的藍色系，保證內容與背景有一定的對比關系，便于業務信息傳達。
6. 主體地圖
地圖為大屏的主要展示內容，首先分析展示的目的是為了看清各個城市間的不同分布情況，和城市數據的匯集效果。
如圖：
改版前：地圖過于單薄，沒有立體感，太平缺乏層次，顏色黃色不符合產品調性。
改版后：主色調改為科技藍，在原有地圖上增加外發光和多層陰影疊加，增加地圖的立體感，地圖上增加科技線條上升的效果代表每個城市數據變化的提升，地圖背景采用比較弱化的轉動線條圓形，襯托地圖主體，使得畫面更加豐富。
7. 地圖效果的實現方法
首先用 ps 拉框助手新建一個山東的地圖（拉框助手的使用獲取方法可以參照上篇文章）。
完成后會得到一個叫 map 文件夾的地圖分層文件，如圖所示。這里需要對每個城市的顏色進行調整，為了區分每個城市之間的數據不同關系。
調整完塊之間的顏色后，就需要給地圖整體增加立體效果。
首先，是整體給地圖加了一個描邊和外發光。描邊是為了強化地圖邊緣，外發光是為了地圖與背景有一個區分。
其次為了增加地圖立體感，需要給地圖增加多層陰影疊加的效果。復制現有形狀層，拼合成一個山東省的地圖，如下圖：
最后，把拼合好的圖層移動到 map 文件夾下面，陰影可以添加多層，這里針對每一層進行不同顏色大小的調整，就是下面的這種效果了，地圖的體積厚度感也就出來了。這里只是提供一個大概的思路，大家可以多去嘗試。
整體地圖效果調整完成后，就是給地圖增加些紋理，和上升線條這些細節上的效果了。紋理可以用圖案疊加，或者找一張紋理圖剪切蒙版實現，最后再添加上升線條的效果，地圖的效果就完成了。
最后加上線條上升的動態效果：
8. 數據圖表拆分
在選定數據圖表之前，首先要確定圖表之間的關系，可以從以下四個維度進行思考分析：
可以參照下面這個圖：
△ 圖片來自于網絡，侵刪
當確定好分析維度后，事實上我們所能選用的圖表類型也就基本確定了。接下來我們只需要從少數幾個圖表里篩選出最能體現我們設計意圖的那個就好了。
傳統的圖表比如 echarts 圖表在視覺上展示可能不是很美觀好看，可根據選擇的圖表在其基礎之上進行美化設計，總之選定圖表最重要的兩個點就是：易理解、可實現。
易理解：就是要考慮最終用戶，可視化結果應該是一看就懂，不需要思考和過度理解，因而選定圖表時要理性，避免為了視覺上的效果而選擇一些對用戶不太友好的圖形及元素。
可實現：主要是跟開發前期溝通好實現方式，一般都采用開源組件庫的居多，比如 echarts 組件庫，我們設計的圖形圖表，要開發能夠實現。實際工作中，一些可視化效果開發用代碼寫很容易實現，效果也不錯，但這些效果設計師用 Ps/Ai/Ae 這些工具模擬時會發現比較困難。同樣的，某些效果設計師用設計工具可以輕易實現，但開發要用代碼落地卻非常困難，所以大屏設計中跟開發常溝通非常重要，我們需要明確哪些地方設計師可以盡情發揮，哪些地方需要謹慎設計。一個項目總有周期與預算限制，不會無限期的修改迭代，所以設計師在這里需要抓住重點，有取舍，不鉆牛角尖、死磕不放。
案例中在圖表選擇上，強化科技感元素，條形圖打破傳統條形圖的展示形式，采用電池晶格的展示形式，在保持圖表功能的同時更加凸顯科技感。
從頁面的整體看，已經有兩處用到了條形圖、柱狀圖，如果這里還是條形圖，那么頁面看起來會很單調，圖表也沒有表現出多樣性，所以現在設計要體現圖表的多樣性也能夠有排名的直觀呈現。以下圖表采用科技圓盤的形式，運用科技線條的上升狀態代表排名的先后順序，所有圖表都采用數據降序來展示排名更加直觀。
改版前的圖標樣式比較單一，改版后針對每組數據不同的對比形式，采用比較貼合的圖表進行展示，篇幅原因就不一一做展示了。
附上最終視覺效果圖：
大屏設計需要注意的點：
以上是我對數據可視化大屏的案例總結，希望能幫助到你。除此之外還有很多地方沒有涉及到，包括具體設計的操作方式、選取圖形元素的具體方法，以及在各種大屏中所需要的相對應的組件等，在龐大的可視化大屏設計系統中，還有很多值得學習參考和優化的知識，歡迎溝通交流，大家一起努力。
文章來源：優設
有句話叫：「設計無小事」，很多看似不起眼的東西卻起著至關重要的作用，比如這期要說的線條，很多人對于線條的理解有局限性，比如：線條的形態可以是曲線、直線、折線、粗線、細線、實線、虛線等等。其實已經牽扯到了點、線、面的知識，這也是很多科班生在學校必學的知識點，但是這期所說的線與點線面中的線還是有所不同的，點線面中的線可以是線條、可以是文字或者是看不到的視線，而是今天著重說的是設計中很直觀的線條。下面我們還是通過實際的案例逐一分析：
設計類的知識很多都和日常生活息息相關，嘗試著把設計類的知識點與日常生活想結合，對于記憶和理解來說會更加得心應手，例如：
圖中的閃電可以視作為設計中的線條，給人的視覺感受是通過閃電把天與地連接為一個整體，而閃電在圖中的作用就是串聯整體，那么回到這里的正題：線條有引導視覺的作用該怎么理解呢？再舉一個現實生活中的案例：
我們選擇從北京到拉薩開車去，出發之前可能需要在地圖上看下路線，知道途徑哪些省市，規劃好行程路線，這里綠色的虛線就起到了引導視覺的作用。回歸設計中道理是一樣的，線條可以引導用戶把原本雜亂無章的視覺點規整為有次序的視覺元素，例如：
當看到左側這張海報時我們視覺次序會出現很多變化，比如：1>A>3>B>4>C>2 或者 A>2>C>4>B>3>1 等等 N 多種順序，這時給人的感覺就是雜亂無章的，毫無視覺次序而言；而看右側的海報給人的感覺卻是條例清晰的，相比而言只是多了兩條線，但是卻在整個海報中起到了引導視覺的作用，它可以給與用戶閱讀海報時視覺輔助的作用，讓用戶以右>左>右的視覺次序欣賞、閱讀，看似很不起眼，其作用卻至關重要。
前面也說了，線的形態可以有很多種，例如：
這里是以真實的可口可樂吸管作為設計中的線條，同樣起到了視覺引導的作用，但是我們不難發現，這里的線條不僅僅只有一個作用，也牽扯到另一個作用：線條有串聯整體的作用。
在排版時我們有分組原則，即把互想關聯的元素彼此靠近，無關聯的相互疏遠。在頁面中我們會把同一色塊上的元素視作為一個整體；下面我們說下線條所帶來的串聯整體的作用是如何體現的，比如：
△ 圖一
△ 圖二
圖一因為大面積的留白能使得用戶很容易分辨出自行車與文案是一個整體，但是相較于圖二而言，其整體性略顯不足，而且給人的感覺太過單薄、重心不穩；圖二的整體性更強，這里的矩形線條就起到了串聯主題的作用，類似的還有：
不難看出，這些案例中的線條都有串聯主題的作用，線條使得主題元素整體感更強、畫面板式更加嚴謹；對于整體的視覺傳達也起到了串聯、引導的作用；在文字排版中，也有類似的線條，比如：
同樣是通過線條把文案更加整體化，也起到了串聯的作用。
突出主題的方式有很多種，像我們之前所說到的留白、對比。接下來繼續說下另一個可以突出主題的方式—線條，下面看個案例：
通過對比觀察我們發現，右側海報整體感更強，主題文案信息更加清晰，主體更明確。其中的原理可以理解為：因為線條的存在，使得主題信息有了一定的范圍，在視覺上等于是在海報中劃定了視覺焦點，從而起到了突出主題的作用。當然還有其他的表現形式，比如：
很好的詮釋了線條的作用——突出標題序號。在進行創作時，作品的每個元素都要做到有理有據，否則只是一味的抄襲，到再創作時腦袋里還是一片空白，只有明白了其中的設計原理，才能做到活學活用。再看幾個案例：
突出主題也許一個線條就可以表現的淋漓盡致，因設計目的的不同，線條所發揮的作用也不盡相同。下面繼續分析：
前面說了線條有串聯整體的作用，而這里又說可以分割整體，是否存在矛盾呢？下面舉個簡單的例子：
在小文案的區域中間我加了兩個線條，看似很小的改變，其目的是把文案很準確、嚴謹地分割為三個小整體，希望能給用戶帶來識別性更強的閱讀性，再舉個例子：
這里的線條把月份和日期分割、英文和中文分割開，使得用戶對于信息的捕捉能力以及可辨識性都提升了很多，而線條的作用就起到了分割的作用。
線條也能起到修飾、襯托的作用，很多小伙伴會忽視這一點，其實線條也可以成為海報中襯托畫面、修飾主題的元素，例如：
海報中的線條起到了襯托、修飾主題的作用，假如把這些線條都刪除，畫面整體會顯得相對單薄。
更多設計中線條的應用：
線條的作用我們分為四個逐一分析，其實它們之間也存在著相輔相成的作用，不能以一概全，線條所起到的作用可以是一種，也可以是多種，比如：我們前面「可口可樂」的案例，即有串聯整體的作用，又有引導視覺的作用。只要我們在使用的時候能明確目的，而不是機械式的抄襲，那么最終一定會得心應手。
文章來源：優設 作者：美工美邦
未來熒黑是一個基于思源黑體、Fira Sans和Raleway的開源字體項目，支持簡體中文、繁體中文與日文。
思源黑體的7種字重被擴展為9種字重，并增加了5種字體寬度，全家族共包含44款字體。
相比于思源黑體，未來熒黑的造型更加簡明現代，版面效果清新輕快。未來熒黑的中宮與字面更加收斂，重心在字重之間經過了重新配置；筆畫細節上處理得更加干練，簡潔而平直化。
開發者：Celestial Phineas
字體文件以SIL Open Font License 1.1發布，構建字體開發的代碼以MIT License發布。
發布地址：github.com/welai/glow-sans
網盤地址：https://pan.baidu.com/s/1f2UuFO8ZxWa8v5XXYUEmig 提取碼 2e8w
備份下載鏈接：https://pan.baidu.com/s/1E1woRsZX91bCrq5FT1SAzg 提取碼: 92t2
文章來源：優設 作者：GrayDesign
微信在3.23號上線了傳聞已久的 「暗黑版」，用來適配 iOS 的深色模式，相信不少同學已經安裝并體驗上了，如果還沒安裝的可以看看下面圖例。
微信每有一次大動作都會引發全網性的討論，而針對設計上的調整，往往只會迎來一片罵聲。比如我們看看知乎中討論的內容，感覺民憤都快壓抑不住了。
但我們先別急著參與網上的聲討，現在站在設計師的角度，來評價一下遲到的微信深色模式。
很多人會把深色模式和夜間模式搞混，這里必須強調這是兩種不同的模式，所以我們要對還沒搞清楚狀況的同學先做一個掃盲（最近掃盲好像搞的比較多…）。
先說夜間模式，是一個專門針對夜晚環境適配的設計版本。騰訊的 ISUX 團隊之前做過調研，有 71.1% 的用戶習慣在夜間不開燈看手機。
如果在深夜漆黑的房間中看手機屏幕，對我們的健康有非常大的損害，不僅表現在對視力的傷害上面，視網膜和神經元容易受損，同時主流的研究項目還表明會這會抑制我們褪黑素的分泌造成失眠。
所以，夜間模式，是一個用來降低屏幕對用戶傷害，提升夜間使用體驗的特殊模式。
通常，夜間模式會采取 降低尼特值、減少對比度、降低色彩明度、增加深色遮罩的方法，比如之前 QQ 官方的夜間模式示意圖，大家感受一下，是不是有內味兒了？
這里提一下尼特這個概念，尼特是用來說明亮度的術語，1nit=1坎德拉／平方米。是現在各大手機發布會中介紹屏幕的時候都要強調的參數之一，因為尼特值越高，證明在戶外大白天的環境中屏幕內容可以越清晰，而夜間模式做的就是用來降低顯示亮度尼特值的。
然后再解釋一下蘋果的深色模式，蘋果的 DarkMode，并不是一個專門面向深夜環境的模式。官方對此版本的解釋，詳見我們翻譯的 iOS 官方文檔中 112 頁。
這是一個面向全天候的視覺風格，同時通過深色背景的對比，來加凸顯圖片、文字內容。包括上面那種官方的配圖，大家應該就能感覺到主體元素比白色模式下更凸出，更激烈。
所以了解了這兩個模式的區別，我們才能好好展開對微信深色模式的討論。
接下來，我們先來總結一遍微信的深色模式。首先是分析一遍它使用的背景色。
背景色純灰色，有3個等級的灰度。熟悉我的都了解，看色彩的奧秘，靠16進制代碼和 RGB 那是分析不出個什么所以然的。如果我們把它們轉化成 HSB 一看，規律性就來了。
背景色從深到淺色的灰度值 B 值分為 10、14、18，是不是朗朗上口。應用的層級雖然和官方規范一樣使用了三級，但是設置和官方的不同。
然后再看看其中使用的其它配色，其中主色保持了不變，其它應用到圖標色彩，都進行了明度的調整，比如下圖案例。
再看看文字的用色，也是純灰色，標題使用 B:85，正文使用 B:65，注釋使用 B:35（主要用色）。
而官方使用的文字色彩中，卻并不是純灰色，除了第一級的白色以外，其它灰階的文字是由帶有藍色色相的色彩通過降低透明度來呈現的。
對中性色增加藍色色值是一個常規操作，可以讓這種灰色看起來有一點活力，不會像純灰色那么單調，不過這次微信明顯在文字的應用上更保守，一點色相也沒有給。
這次微信被大面積吐槽的，就是顏色的應用上和官方的規范不一致，作為從業人員直接開噴是相當不專業的（最起碼要先走個形式），這就是我要分析的重點了。
要說微信的 UED 團隊，專業性肯定是國內最頂尖的，你們網上所有看過有關交互的方法論、可用性測試的分享， 他們肯定都有做過，而且執行得更專業。
直接用官方規范的黑底白字模式，微信團隊不可能沒有出過這樣的方案。但很明顯，這個方案最后被斃了，上了我們看見的這個版本，雖然不知道以后會不會變。
再看看下面官方發的一條微博。
其中已經提及了，是和蘋果 「共同探索」 出來的方案，這是非常耐人尋味的。也就是說，這個不用官方的模式是蘋果團隊也通過的。
那么為什么要做的不一樣呢？沒有內幕消息，就根據自己的經驗來判斷一下。
我自己認為的一個非常重要的原因，就是對于 「夜間模式「 的兼容。前面不是講暗黑模式和夜間模式不一樣嘛？為什么微信的暗黑模式又去兼容夜間模式了。
這里面有幾個小彩蛋，首先就是官方對深色模式的態度，在我看來越來越曖昧了。比如在顯示與亮度設置頁面里，有一個自動設置外觀 —— 日出前保持深色外觀的功能。這樣，就等于默認將深色模式和夜間模式掛鉤。
還有，如果過去我們沒有整理 iOS13 的翻譯，就不會發現，上面我們展示的那句專注于內容的解釋，現在在官網已經被刪掉了（你品，你細品）。
再說關于用戶認知的問題上面，在 UI 群體中，能了解暗黑模式和夜間模式是不一樣的可能就只占 10 分之一，那么對于普通用戶來說，這個情況就更不樂觀，能有 1% 的用戶了解這個概念就不錯了。所以，絕大多數用戶會直接認為暗黑模式就是夜間模式。
如果暗黑模式直接當成夜間模式用，在深夜的環境里，觀感會特別差，因為 —— 明暗對比度過高。
如果在黑底中直接用白字，那么可以說屏幕的文字和背景的對比度就是 100（HSB中 B 的差值），在一個漆黑的環境中會非常應驗 「讓內容脫穎而出」 的效果，刺激性會非常強烈，文字將變得非常尖銳，比如 QQ 暗黑模式，大家可以在被窩里打開下面這張圖感受一下。
新的深色模式版本中，文字和背景的對比度基本控制在 50 左右，降低了一半。
并且，中英文字形在正負形上的差異（簡單理解就是中文筆劃更復雜），這個感覺會更強烈。比如我們用一個公眾號頁面舉例，使用純黑底白字，采用相同字號的中英文，看看顯示的效果。
還有，純黑背景色和白色的對比度，會根據屏幕的類型和參數不同而有不一樣的感受，比如蘋果從 X 后旗艦機型使用 OLED 屏幕，純黑色區域將不會發光，進一步擴大對比度，使得文字變得更尖銳，更讓人難以接受。
如果不是使用 OLED 屏幕的同學光看一個案例可能很難受，所以我們用純黑的案例來對比一下現在的狀態。
是不是發現明顯在夜間的情況下黑白模式并不如另一個模式看起來舒適？而這種不舒適的差別并不會隨著屏幕亮度降低而變化。
所以色彩并沒有符合官方的原因，我的判斷就在大環境中無法割裂夜間和深色模式的區別，同時也要讓深色模式更適應夜間環境，做出了調整。而又因為它不是真正的夜間模式，所以對比度也不能像 QQ 之前的夜間版本一樣將整體環境完全壓暗。
你看，真是一個讓人矛盾的過程……
最后再簡單討論一個問題，為什么深色模式來得這么晚。很多用戶一直嘲諷，不就是換一套皮膚的事嘛，為什么就是不上線。
外行可以看熱鬧，但是如果是從業人員就應該知道，微信這種體量的應用，上線深色模式絕對不是一個非常容易的事情。
適配黑暗模式首先需要使用蘋果新的 iOS 13 SDK（開發者工具）進行編譯，等于應用中有大量的代碼需要調整，而這種升級調整的結果還會導致沉重的測試壓力。有經歷過 Darkmode 開發的團隊應該都知道這絕對不是改改顏色就能上線的皮膚。
再看到知乎另一個回答中提到的：
另一方面點大家隨便聽聽。使用 iOS 13 SDK 之后，Apple 要求 VoIP 推送必須使用 CallKit，否則應用程序會被終止。而由于眾所周知的原因,CallKit 在中國大陸是無法使用的,這樣的改動會降低微信語音電話的體驗。
原文地址：https://www.zhihu.com/question/378027349/answer/1069072154
再者，拋去大量用戶體驗調研相關的工作，微信整個生態對于暗黑模式的不友好可以說是無解的。比如說公眾號，有大量公眾號內部的標題、分割線、引用語句是用圖片做上去的，而圖片還用的是白底（透明底黑字的也有），于是現在就產生了災難性的閱讀體驗。
比如我的公眾號：超人的電話亭，其中文章展示的截圖。
而且因為公眾號發出去是不能修改的，只能刪除，那么這部分存量文章將無法更改，體驗也無法扭轉。而且公眾號還支持文字色彩等自定義，那么你在白色背景下添加的顏色，可不會直接適配深色模式，尤其是官方也不可能輕易直接給你們 「適配」 掉。
而在夜間模式，正常訪問的文章網頁，也和公眾號會很像，但是打開以后是白色背景的話，統一的體驗在哪里？
再者還有小程序，小程序雖然也可以通過微信官方提供小程序的深色模式適配文檔，對應的 SDK，但是小程序不是 APP，其中有大量小程序開發后是缺少維護的。
因為線下門店通過外包方做好一個小程序上線以后，沒特殊的原因不會直接去更新它，那么這部分小程序的升級適配無從談起，會出現打開小程序一個白一個黑的窘境。
最后，再講一個微信里最高頻使用的功能 —— 發表情。深色模式直接造成大量自定義表情報廢，無法正常顯示的問題，比如看看下面我自己發的表情。
前面提到的，都是不能解決的問題，這就是做深色模式的挑戰，因為用戶 UGC 內容是不可控的，官方不可能通過算法直接幫用戶強行 「適配」。
而這些，就是做深色版的難點。
以上總結內容多數為主觀分析，純粹站在 UI 設計師角度進行專業解讀，不帶入個人立場。而一定要我自己評價的話，那就是 ：趕緊把這模式給我移除！！
再順便提一點小感想，一個有數億用戶的產品，每一個小調整分量都不輕，都要慎之又慎。同時，你做的每一個決策，都意味著要站在其中一部分用戶的對立面，因為你滿足不了所有用戶的需求。所以，這就是設計師的壓力與挑戰。
文章來源：優設 作者：超人的電話亭
各行各業的設計師每天都在和顏色打交道，UI 設計師設計用戶界面也不例外。
用戶界面是一個設計師用理性思維解決用戶感性需求的窗口。如果對色彩的運用不加以克制，界面可能會顯得花哨而沒有主次；但過于拘謹又容易使界面保守，難以激發用戶情緒。所以如何讓色彩的搭配平衡，是 UI 設計師需要修煉的一課。
但色彩畢竟是感性的元素，我們總是仰慕一些對色彩天賦異稟的設計師，總能不拘繩墨給作品帶來驚艷的視覺效果。我們難以偷習他們的天賦，但或許你有沒有想過，干脆我們另辟蹊徑，用理性推導來制定一套色彩系統？
那么今天我用我的項目示例，教給大家一個科學推導顏色搭配的方法。也許能夠帶你發現一些色彩背后的數學秘密。
在此之前我們需要先熟悉一下顏色模式。
在 PS 菜單欄的「圖像-模式」下可以看到非常多的顏色模式：RGB、CMYK、Lab 等等。那是因為 PS 是一個需要滿足設計行業水平領域的軟件，要解決各類設計師需求，所以涵蓋的顏色模式非常豐富。
但 UI 大多數時候需要關注的是線上場景，成果的展示渠道一般是自發光設備。所以弄明白垂直領域軟件 Sketch 中的幾種顏色模式，其實就足夠了，分別是 RGB、HSB 和 HSL。
RGB 是指通過 R（Red：紅）、G（Green：綠）、B（Blue：藍）三個顏色通道的變化以及它們相互之間的疊加得到各式各樣的顏色。三個通道分別有「0-255」這 256 個值，這些值分別代表著各通道的亮度層級。
雖然 RGB 在機器表現上很友好，但并不夠人性化。因為人們判斷顏色，往往是通過「這是什么顏色？是不是太鮮艷了？亮了還是暗了？」這樣的感官維度，而很難通過紅綠藍的亮度層級去判斷。所以人們后來基于 RGB 衍生出了 HSB 模式和 HSL 模式。
HSB 是指通過 H（Hue：色相）、S（Saturation：飽和度）、B（Brightness：明度）來控制顏色。Hue（色相）的取值范圍是色環上 0-360° 的圓心角度；而 Saturation（飽和度）與 Brightness（明度）是在 0-100% 的量占比。
HSL 中的 H、S 與 HSB 相同，都是指 Hue（色相）、Saturation（飽和度）。但 L 所指的則是 Lightness（亮度）。
HSL 和 HSB 稍微有一些不同，我們在兩個顏色模式下輸入相同的數值，會發現顏色實際是不一樣的。雖然 H、S 指代的都是色相和飽和度，但 L（Lightness：亮度）與 B（Brightness：明度）分別被認為是「顏色中白色的量」和「顏色中光線的量」。
Lightness 和 Brightness 的概念要深度研究下去的話其實是計算機算法領域的問題了，感興趣的朋友可以查閱更多資料，但我個人認為對于 UI 來說沒有太大必要。
關于 HSB、HSL 的使用場景，記住以下兩點即可：
支付寶 Alipay Design 團隊提出過一個配色原則：
以同色系配色為主導，多色搭配為輔。
同色系為統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性；由于業務的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設定不同的任務屬性和情感表達；再搭配中性色黑白灰，賦予更多的變化和層次。兩種配色通過主次、使用比例，可靈活運用在業務的各個場景中，具有非常好的延展性。
那么知道了這個原則，我們又該如何科學、合理地得出產品的色彩系統呢？接下來我就用我的一個項目示例給大家做講解。
步驟一：找到符合產品調性的品牌色
我負責的該項目主要業務與高校支付、繳費相關，所以希望整個產品視覺風格首先要給用戶帶來安全感。又因為主要用戶群體是高校師生居多，新潮、年輕化是主要用戶的一大標簽，所以我們選擇了用飽和度較高的藍色來作為品牌色。
最終選擇品牌色的 Hex 值為 #1585FF ，HSB = （211,92,100）。
步驟二：提取24色
選定了品牌色之后，以品牌色的 H（色相）為基礎，不斷地遞增、遞減 15，在 0-360 之間可以得出 24 個顏色，也就是將 360° 色環分割為 24 份，可以得到 24 色。
為什么要提取 24 色，并且以 15 為公差呢？
我們知道，想得到鄰近色、類似色、互補色這一系列的顏色，我們就會使用到色環。
而 24 色色板是幫助我們提取輔助色的便捷工具。
步驟三：找到同色系配色
同色系是指與品牌色 H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產生的色組。同色系色組的推導需要借助拾色板坐標。
我們建立一個基于 S（飽和度）與 B（明度）的平面坐標系，設定當前品牌色為色值為（S?，B?），連接品牌色色值點與右上純白點（0，100）、右下純黑點（100，0），得到兩條線段。
我們各在兩條線段上均分取得 5 個點坐標（包含首位兩點）。這樣兩條線段一共就會產生 11 個（S，B）坐標值，對應著 11 個同色系色組。
經過上圖的計算，我們可以得到基于品牌色的同色系色階。
步驟四：多色搭配
用于搭配的輔助色應滿足以下兩個條件：
于是根據以上條件，基于品牌色可衍生出 3 個輔助色：一個與品牌色傳遞調性有明顯區分的類似色；兩個互補色的鄰近色。
步驟五：感官明度校準
經過計算后，我們已經得出了品牌色和三個輔助色。
可以看出，雖然我們提取出的輔助色明度色值都一致，但因為顏色本身自帶的感官明度屬性有所區別。為了讓輔助色和品牌色的感官明度盡量一致，我們要對第一次提取出的輔助色進行感官明度校準。
校準方式是：依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色模式調整為 Hue（色相），就可以通過無彩色系下的明度色值，進行對比。
這樣我們終于得到以品牌色為基準的 3 個輔助色了。
步驟六：全色系輸出
將得到的輔助色依次進行步驟三的計算，可以得到輔助色的同色系色階。
但因為明度過低時，顏色已經非常接近于黑色，色相在肉眼上幾乎已經趨于一致。所以刪除最左邊的三種同色系顏色。最后得到基于品牌色推導出的全色系色階色板。
完成了以上的工作，當然還不算結束。一套標準的色彩系統還會包含中性色規范、顏色的使用規范等等。但相信解決了大部分的需求，剩下的工作也難不倒大家了。畢竟以上的方式只是給大家提供了一個理性科學的方法，色彩的使用最終還是要融合設計師個人的共情能力。
比如許多產品有了一套自己的色彩方案后，設計師還會根據具體的業務場景去賦予 icon、卡片背景等元素不一樣的色彩方案。
希望這個方法能夠帶你發現一些色彩背后的數學秘密。
文章來源：優設 作者：UCD耍家
很多同學投票想看看設計師的草稿本，今天就來滿足大家了！我們來看看六位淘寶設計師的草稿本們，有些是紙質派，有些是電子黨，Here we go！
草稿本是設計師工作生活必不可少的工具，比起正兒八經的作品集，設計師的草稿本其實也是十分有趣的，它是設計師腦海里千奇百怪想法的隨手記錄。
Shiyu：本人是被脅迫公開草稿本的卑微設計師
手繪裝備：iPad Pro+Procreate
以下是被迫營業現場對話
△ 給「老同學」的公眾號形象草稿
老同學：「好久不見~我記得你畫畫挺好的~幫畫個形象唄~我現在在做一個公眾號，需要*&%￥#……你明白吧？你就簡單畫一畫就好~謝謝啦」
我：「….」
△ 給「朋友」畫的頭像草稿
朋友：「好久不見~我記得你之前幫誰誰畫的那個頭像挺不錯的~也幫我畫一個唄~我現在在做blablabla，需要*&%￥#……你明白吧？很簡單吧~謝謝啦」
我：「….」
Dajing：我的草稿本就是平時畫畫原型圖或者需要做文檔整理規范的時候拿出來畫畫草圖，對我來說我的草稿本是幫我理清思路的一個很好的助手。
手繪裝備：A4點格草稿本+馬克筆
△ 智能配色草稿
△ 中后臺加框草稿
Dajing：里面有當時做中后臺框架的時候導航的原型，還有之前做智能配色的時候HSB色環推演的草圖，還有些文檔維度整理草圖，畫出來方便查看也便于直觀梳理自己的邏輯。
Wanru：畫畫是我記錄生活、尋找靈感的一種方式。
手繪裝備：MUJI筆記本、水彩、鉛筆、馬克筆等等…
△ 沖繩旅行水彩
Wanru：水彩是我最喜歡的繪畫形式，非常浪漫，食物也是我擅長畫的題材。這是在沖繩旅行時的第一頓晚餐，新鮮的海鮮和爽口的啤酒也具有明亮的顏色，讓人忍不住想去表達。燒肉店的杯墊被我帶了回來，日本的平面設計做得很好，是很好的素材～
△ 電影小漫畫
用小漫畫記日記的習慣已經很多年了，我是非常喜歡漫威的，這是13年《鋼鐵俠3》上映和兩個朋友看電影的場景。這個場景必須用美漫的風格了！偶爾會嘗試各種畫畫風格。
△ 隨手小速寫
偶爾會畫些小速寫，勾一些人物、小物品、小動物，速寫可以很好地練習造型能力。
Zoey：作為一個熱愛喝奶茶、追番和打手游的肥胖又無助的設計師，感覺累了就在草稿本上放空自己。
手繪裝備：iPad Pro+Procreate & Sketches Pro
△ 記錄日常生活的草稿
Zoey：我很喜歡用草稿本記錄自己的生活（食物為主），喜歡的電影角色也會簡單畫下來。
△ 二次元小畫
作為半個二次元 ，草稿本當然也被滿屏的羞恥占領~ 這兩張草稿是我畫的Persona 5里面的人物，因為我個人真的特別喜歡P5 ，對于自己喜歡的事情即便996也會熬夜畫下去~
Dribbble 經歷了資本入駐、創始人出走之后，最大的事情應該就是這次改版吧？這個全球最大、最有影響力的設計師社區的每一個動作都必然會牽扯著每個設計從業者的注意力，新版背后到底有哪些變化？這些變化又是出于什么樣的想法來修改的？看看 Dribbble 的官博是怎么說的吧：
在過去的10年當中，Dribbble 已經成長成為一個全球性的社區，成千上萬的人從這里獲得啟發和靈感，助力設計，而我們從最初分享設計作品小樣的創意社區，逐步成長為一個全球設計師產品和作品集展示和社交的平臺。在此，而我們也第一次開始問自己一個簡單的問題：【我們到底是在做些什么？】
今天，我們很高興宣布，我們在過去的10年當中首次進行了徹底的重設計。
在過去十年當中，我們所設計的 Dribbble 頁面的特點，是將設計師的作品和內容放在首位，所以叫我們不追隨潮流，采用了極簡風格的設計，即使潮流來來去去，它們也只是 Dribbble 展示內容的一部分。我們提供了一幅未經修飾的畫布，這樣就可以和最瘋狂最激進的設計探索相輔相成。不過，這么多年來，Dribbble 這種「隱形」的設計，在視覺美學上確實和時代脫節了。這次，我們創建了一套有著一致樣式的設計和代碼庫，用以替代以往不斷修改、龐大且不一致的代碼。
「我們新的設計系統旨在保持整個視覺和諧的同時，展示你的創造力?！?
如今，我們正在改進 Dribbble 的界面，以更加干凈的布局、統一的設計系統、更加簡化的配色方案、更加輕便的代碼庫（加載也更加迅速），以及全新配置的文件，來更好地幫你將作品推到最前沿，正確而合理地展示你的創作和個性。
我們新的設計系統旨在保持整個視覺和諧的同時，展示你的創造力。它是你分享設計作品和創造力的理想畫布，而新的美學特質也可以更好地反應此刻我們的公司的氣質。
在進行重設計的時候，我們明確知道，我們要完全重新思考社交化的設計師作品展示，并且將創意更大化地呈現。對于 Dribbble Pro 用戶和 Pro Business 訂閱者，你現在擁有一個全新的、經過全面修改的設置和配置頁面，可以在 Dribbble 上充分展示自己的個性，
Pro 用戶和 Pro Business 用戶可以通過上傳你自己的首圖和定制化的歡迎語，來個性化你的個頁面。
你還會注意到，你的個人頁面還可以上傳更大的照片，這可以讓你的作品對于頁面的訪客、你的客戶、招聘設計師的企業人事而言，看起來都是非常出挑的。新的網格布局是可以自定義的，因此你可以充分完美地設置和展示內容。
此外，我們還修改了「關于我們」這個部分，新版當中，這個部分你可以將所有的個人信息匯集到一起，以便完整而充分地展示你的個人經歷、展示簡歷和技能。
如果你正在尋求工作機會，新的信息發送組件，確保了你的客戶或者招聘企業可以一鍵聯系到你，他們可以直接從你的個人資料頁向你發送信息，非常輕松地和你取得聯系。
當然，并非是只有 Pro 和 Pro Business 用戶才能擁有高度定制化的個人頁面，無論你是普通用戶、內容創作者還是內容策劃人，Dribbble 上每個普通用戶的個人頁面也都會升級。尚未訂閱 Pro 服務的設計師會注意到，他們的個人頁面會更加簡潔，而設計作品會以更加聚焦的形式，吸引到每一個訪客的目光。
我們將以往的帶有分享功能的收藏合集頁（之前叫 Buckets）給翻新了，你可以精心策劃整頁內容和案例，從一個情緒板到完整的項目，這意味著，借助這個收藏頁功能，你可以更加輕松地在 Dribbble 上尋找和搜集靈感。
現在，我們可以非常自豪地宣布，即使你并沒有將 Dribbble 作品給分享出來，每個人也都會擁有一個策劃人頁面，你可以在其中搜集和整理自己喜歡的作品，來展示你的個人品味，通過保存別人的作品，來創建新的合集，我們會自動將它添加到你的個人頁資料頁當中，讓全世界的同好因為品位而關注你。
我們在整個改版設計過程中，面臨最大的挑戰，其實是圖片網格，因為這是絕大多數用戶每天瀏覽圖片、發現設計靈感的地方，我們有意識地去弱化 Dribbble 本身 UI，避免喧賓奪主，讓每個用戶的作品成為視覺焦點，減少噪音。
2020 年才剛剛開始，我們迫不及待地想要展示我們計劃中的一切。從案例研究到更好的視頻支持，再到作品集展示，擺在我們眼前的改版路線圖足以證明我們的雄心，所有的這一切都是為了讓全球的設計師能夠從中獲益，走向成功。請期待我們進一步的改版升級吧！
文章來源：優設 作者：Dribbble
快速變化的技術每年都在影響著設計趨勢。作為設計師，我們需要時刻保持關注，對設計趨勢擁有較高的敏感度，不斷學習，擴充自己的設計技能，目的是為了跟上的市場環境?；谖业恼{研，經驗和觀察，我甄選了在2020年你將會看到的最為關鍵的8個UI/UX設計趨勢。讓我們一起來看看吧。
插圖被應用到APP中已經有很長一段時間了，它們在最近幾年的演變令人印象深刻。插圖作為一種非常流行的設計元素，為我們產品的整體產品增加了情感化體驗。插圖非常能抓人眼球，尤其是在融入動效后會顯得更加的自然，將產品帶入生活的氣息，使得產品功能更加突出，同時也增添了更多的細節和個性。
△ Welcome to Swiggy by Saptarshi Prakash
△ Onboarding animations — Virgil Pana
另一個好處是使用動效后，能抓住用戶的注意力使其能夠更加沉浸在你的產品中。動效同樣是講好品牌故事，產品或者服務最有影響力的途徑之一。
微交互存在與每一個網頁或者app界面中。每當打開你最喜歡的那些應用時，都有機會看到它們，比如像Facebook中就有大量不同的微交互，我認為「Like」功能就是一個完美的例子。有時，我們幾乎意識不到它的存在，因為它們非常的不顯眼，非常自然地融到界面中去了。但是，如果當你把這些微交互移除掉的話，你又會非?？斓淖⒁獠⒛芨惺艿揭恍┓浅Ｖ匾臇|西丟失了。
△ Menu toggle close animation — Aaron Iker
△ Tab bar active animation — Aaron Iker
一般來說，在UI/UX中即使非常小和細節處的設計都可能會帶來巨大的沖擊力。微交互就是完美的證明，細節和對它的關注能極大的改善產品的整體體驗，并讓產品體驗上升一個臺階。每年，新設備的發布伴隨著新的機會，能給產品塑造新品牌和創造富有創意的微交互。
3D圖形設計幾乎無處不在，比如在電影，游戲或者運營廣告里等等。3D圖形設計早在10年前就出現了然后一直在不斷提升和進化。手機和web技術進展迅猛，新的web瀏覽器能力打開了3D設計新世界的大門，這給了設計師們在web和手機界面中創造炫酷3D設計的機會。
△ 3D flip menu by Minh Pham
△ Car health report UI by Gleb Kuznetsov
創造并整合這些3D創意設計到web和手機界面中需要特殊的技能和花費大量的工作，但這些付出會得到回報。
△ Apple AirPods Pro landing page
3D設計對于產品和服務來說，具有非常大的吸引力，例如在交互上能夠支持用戶360度查看產品，從而大大提升整個的產品體驗。
在2020年會有更多的品牌利用3D渲染模型的產品和服務去模仿線下購物體驗。
VR技術在2019年有一個巨大的飛躍。最近的一年我們激動地看到了頭戴式設備有了非常大的發展，尤其是在游戲領域。我們需要記住的是，游戲行業經常在引領著新技術的發展并落地到實際的產品設計中。研究表明，VR也不例外，在Oculus Quest于2019年推出后，許多機會為其他行業打開了大門。Facebook CEO 扎克伯格已經測試了激動人心的手部交互功能，并正式宣布將在2020年初為Quest進行更新。
△ Oculus Quest — hand interaction feature
△ PlayStation Virtual Reality Website Design by Kazi Mohammed Erfan
索尼和微軟計劃在2020年夏季發布他們的新設備，這就給VR技術帶來巨大的機會和發展空間。
學習VR 可以閱讀優設這個專題：https://www.uisdc.com/zt/vr-design
在最近幾年，我們能看到在AR（增強現實）這塊有了很大的進步和驚喜。世界引領著科技公司在AR開發方面進行了巨大的投入，所以我們應該期待這項技術在2020年有更大的成長和發展。蘋果公司也發布了他們自己的AR套件叫AR KIT3來幫助設計師和開發者在他們的產品中打造AR體驗。
△ Apple ARKit 3 by Apple
△ Public transit app by Yi Li
△ House of Plants AR Concept by Nathan Riley
在AR空間里會有無限的機會和創意去打造一個新的品牌和激動人心的體驗。為AR做UI設計會在2020年成為一大趨勢，這就要求設計師們在面對創造AR產品體驗前，應該去準備和抓緊學習新的工具，原型之類的知識。
學習AR 可以閱讀優設這個專題：https://www.uisdc.com/zt/ar-design
一般來說，擬物化設計是指以現實風格/方式創造出來與現實中的物體相匹配的設計元素。不斷發展的VR/AR技術以及在各大最流行設計平臺（Dribbble,Behance等）上展示的設計作品趨勢來看，預示著擬物化的回歸，但這次換了個更現代，更酷略微高大上的名字叫「新擬物風」（也叫Neumorphism）。
△ Skeuomorph Mobile Banking | Dark Mode by Alexander Plyuto
△ Simple Music Player by Filip Legierski
△ Sleep Cycle App — Neumorphism Redesign by Devanta Ebison
你可能注意到了：Neumorphism代表了豐富細節和明確的一種設計風格。高光，投影，發光，這些細節非常令人印象深刻。Neumorphism風格已經鼓舞了全世界一大批的設計師創作作品，它也會成為2020年最大的設計趨勢。
學習新擬物風可以閱讀優設這個專題：https://www.uisdc.com/zt/neumorphism
最近一年我們也注意到一種不對稱風格正在快速發展。傳統基于「模板」的布局肯定會消失。這種設計趨勢給2020年的設計帶來了更多的差異化。合適的不對稱風格將會在我們的作品中增多一大批不同的性格，火力以及個性，所以設計不再單純的基于模板。
△ Limnia Fine Jewelry Grid — Zhenya Rynzhuk
△ Carine fashion store — selection screen concept — Dawid Tomczyk
當設計這種不對稱風格時，設計師擁有非常多的選項以及巨大的發揮空間。但是，想設計好這種不對稱風格需要大量的練習，它絕不是將元素隨機的擺放在網格中，而應該小心使用和實現它們，時刻需要把用戶的訴求考慮到設計中。我們并不想讓用戶迷失在我們的產品中，對嗎？
故事在整個用戶體驗中扮演著非常重要的角色。你可能經常會在著落頁看到它作為品牌介紹，產品或者一個新的服務。講故事就是利用創意的形式把信息傳遞給用戶。這可以通過強大的視覺元素來呈現（字體，插畫，高清圖片，顏色，動畫，交互元素）。
△ A+WQ / Young Lab Page Story of The Week Animation by Zhenya Rynzhuk
△ Free Sketch Template :: Mimini by Tran Mau Tri Tam
講故事可以幫助產品創造出品牌和用戶之間積極的情感連接。講故事可以為你的產品創造出非常多的記憶點，讓用戶感受到自己就是產品或服務的一部分，他們便會更加愿意使用你的產品。話雖如此，講故事也是一種非常有效的營銷手段，它可以極大地提高你的產品/服務的銷量。講故事作為一種非常成功的手段，將在2020年繼續發揚光大。
1. 動態插圖
通過把動畫和插圖進行結合，我們可以使得設計變得更加突出，并把它帶入用戶的日常生活，為產品賦予了的細節和個性化。
2. 微交互
微交互被證明是可以在當用戶注意到他們是能夠帶來非常大的驚喜體驗，它能夠有效的提升整個產品的用戶體驗并把產品的品質提升一個等級。
3. 3D圖形的應用
新的瀏覽器技術打開了3D圖形應用的大門，能夠給設計師帶來非常大的創意機會去打造讓人驚嘆的3D圖形設計應用到網頁和手機APP中。
4. 虛擬現實
游戲行業將迎來新的變革，新的技術能夠應用到產品設計中。
5. 增強現實
在AR空間中擁有無限的機會去創造新的品牌和令人激動的新體驗。為AR技術服務的UI設計將在2020年成為主要趨勢，設計師需要位為之準備并去學習新的工具，原型，當真的需要你去做一款AR應用時就需要用到。
6. 新擬物風
AR/VR技術不斷發展，以及在各大流行設計平臺上大量涌現的寫實設計作品預示著擬物風的回歸，但只是這次換了個新的更加現代化的名字。
7. 不對稱布局
運用不對稱布局能讓設計創意變得擁有更多選項和機會。雖然，設計一個成功的不對稱布局需要投入大量的練習和時間。
8. 講故事
講故事就是利用創意形式把信息傳遞給用戶。講故事是一個非常好的營銷工具，可能會大大增長產品的銷售額或服務。
文章來源：優設 作者：彩云譯設計
最近關于新擬物化 Neumorphism 的風太大，簡直是傳遍大江南北無人不知。對于它的看法大家也都眾說紛紜，大部分的觀點都集中于：第一看過去非常的高大上，再仔細琢磨一下就感覺只能是飛機稿中的戰斗稿。對此我表示非常的理解，畢竟在國內體制下的用戶界面設計基本都延續商業設計的命脈──低效能、不實用、不能帶來良好轉化的東西統統給我丟掉，哪怕是用戶體驗也是建立在商業目標驅動下的存在。
盡管觀點如此，我還是想為新擬物化這位誕生在不平凡 2020 年的新生兒稍稍正個身，它并非空穴來風，也并非完全無法落地使用，相反如果合理加以優化應該能達到意想不到的雙贏效果。
一切的開始都源于一個叫 Alexander Plyuto 的設計師在各平臺發布了一個他的新作品──「Skeuomorph Mobile Banking（擬物化手機銀行）」。
在去年末的時候這名設計師還一直沿用 Skeuomorph（擬物化）這個名詞來命名自己的一系列設計作品，直到 HYPE4 的 CEO-Michal Malewicz 寫了一篇關于此風格的文章，并賦予了它一個新名詞 Neumorphism（New+Skeuomorphism），自此之后大家就都照著這個新名詞進行傳播了。
在詳解新風格之前，先讓我們回憶一下這些年移動端用戶界面設計風格的演變歷程。自 2013 年蘋果推出了 iOS7 之后開始刮起的扁平風潮，所有走在設計前沿的大廠都開始不約而同地對自己家的 app 進行了大刀闊斧的改版。
這扁平風一刮就是 7 年，仔細分析一下就能明白為何 ta 如此長壽：內容優先的認知簡約，不僅拓展性強且具有能的特性，解放了一大堆「手活」不是那么好的設計師，讓他們有更多時間專注在設計解決問題的命題上。
但就算一個風格再適應市場的需求，用戶和時代還是會對它逐漸疲憊，審美疲勞和新的市場需求都會催生新的變革。
1. 新擬物化≠輕擬物
第一次看到這個風格介紹的時候險些以為就是曾經的輕擬物重返江湖了，但仔細看看原設計師輸出的設計原則，發現確實是完全不同的 2 種定義。
輕擬物從本質上來說是 Y 軸面原質化層級分離的，而新擬物是在 Y 軸面不分離的情況下物理化擬態。
來看一個輕擬物與新擬物卡片的比對：
從上圖可以感受到新擬物在保留輕質感的同時，更貼近事物的物理還原，但真實感與舒適度帶來的代價就是它的辨識度和對比度明顯較其他風格低了很多，這也是它被大家吐槽飛機稿中的戰斗稿的重要原因之一。
2. 新擬物化控件示例
原設計師對新擬物化的「淺色版」控件規范如下，基本涵蓋了核心的界面設計控件，整體對于控件的定義就在于良好使用投影和漸變來打造物理化界面肌理。
另外還有可以良好適配當前流行黑色模式的「黑色版」。
在了解新擬物化的設計語言特點之后，大家應該都發現這種風格的設計是有一定局限性的，它并不適用于一部分商業產品，大部分時候也不適合全局控件應用。那么如果我們想要把新擬物化應用到我們的落地項目設計中，需要注意哪些地方，并進行什么樣的改良呢？
1. 深淺模式疊加解決弱可視難題
新擬物的按鈕肌理很多是建立在素色白板上的淺色按鈕，如果繼續沿用淺色按鈕，且不說色弱用戶的可視問題，普通用戶的操作行為也會大打折扣，所以這里我們建議將新擬物的深淺模式疊加來使用，如下圖：
2. 局部高光使用解決層級難辨問題
如果將新擬物化全控制使用，確實容易造成界面層級混亂的問題，因為畢竟它的設計語言就是 Y 軸面不分離的設計定義，但如果我們合理選擇它來作為局部高光，應該大部分情況下還是不錯的。如下圖，我們僅在銀行卡部分使用新擬物化（深淺雙模式均可用），其他的控件部分保持扁平，使用 2 個風格相融合的方式可以良好保障層級的劃分：
3. 拿什么解決開發崩潰的問題？
之前看到很多文章在轉發一個生成新擬物化 css 代碼的網站：Neumorphism.io，說是用這個就可以輕松解決開發的問題。
然而事實的真相總是令人落淚的，這個網站提供的 css 代碼只是網頁代碼，移動端是完全用不了的。而且就算有對應的 css 代碼，對于開發來說也是遠不夠的，他們還是要寫框架來支持這套 css 代碼，不然是跑不起來的。所以我們要如何解決開發小哥哥手寫新擬物化設計稿崩潰的問題呢？
很簡單，就是給他們切圖。按鈕的軟點擊切兩張狀態圖，卡片背景只需要切一張，ppduck 壓縮走一波，對 app 性能的影響基本可以忽略不計（因為上文我也說過了這種風格不大可能大面積或者全界面應用）。
至于新擬物風不適用的場景大家應該都心知肚明了，信息承載大，層級關系復雜，我就不一一舉例了，基本就涵蓋了大部分現在市面上主流的產品的大部分場景。但即便如此我們還是需要對新的設計保有一絲激情與希望，不要輕易的去否定，畢竟新生事物總是有它的魅力與獨到之處。
文章來源：優設 作者：Nana的設計錦囊
我們總在期待 Next Big Thing，企盼下一次數字革命。喊了這么多年的物聯網現在還沒有明顯起來的跡象，而 VR 也因為頭戴設備的大型化和沉浸式場景的泛用性較差的原因，反倒是 AR 和 MR 依托智能手機、浴霸式鏡頭組和 APP 有一定起色，但是也沒有到革命性改變的程度，只能算是一個小趨勢。當然，人工智能/深度學習所帶來的影響更加深遠，但是短時間以內，它所帶來的變化趨近于隱形。
而最近2年，各種雙屏和柔性屏的發布，則可能是距離我們最近的硬件變革，可能和柔性屏/雙屏設備有關。
也許現在說硬件交互設計到了類似 2007 年 iPhone 發布一樣拐點有點夸張，但是對于現在幾乎純粹拼配置死水微瀾一樣的手機電腦市場而言，這種明顯區別于以往的硬件設計，將會直接帶來交互、設計和體驗上的改變。
2019年是否算得上是雙屏設備元年，現在下結論為時過早，但是去年三星 Galaxy Fold 和 Moto Razr 的發布，確實給廣大硬件廠商好好打了一個樣。
盡管Galaxy Fold 去年折戟沉沙了，但是高昂的沉沒成本和大勢所趨讓三星肯定不能就這么算了， 回爐再造一番之后今年又帶著船薪版本的 Galaxy Fold 2 殺將回來，順帶還兼顧女性市場整了一個對標 Moto Razr 的化妝盒手機 Galaxy Z flip。
圖片來自 TheVerge
當然，華為的 Mate Xs 也是相當優秀的產品，這款明顯對標三星 Galaxy Fold 2 的產品，并沒有將柔性屏制作成為向內折疊，而是完全翻過來，將它作為外屏來進行設計，反向折疊，展開的時候，屏幕自然延展。
圖片來自 TheVerge
不過思路最為清奇的并非是華為，而是 TCL。就在這幾天，TCL 帶來了兩款全新的原型機，一款手機帶有兩個折疊軸，相當于是將傳統手機屏幕延展到以往的3倍，徹底折疊開相當于是一個 10英寸的平板電腦（回過頭來想，就像是將一個平板電腦反向折疊到手機的大小，但是重量不變……）。
圖片來自 TheVerge
另外一款原型機則選擇了抽拉式的設計，機身可以如同抽屜一樣拉開，柔軟的屏幕會被拉出，延展開來差不多和 iPad Mini 一個大小了。
圖片來自 TheVerge
圖片來自Engadget
除了這幾款之外，在今年年初的 CES 消費電子展上，聯想、戴爾、華碩，這些目前世界上最大的消費電子制造商，紛紛帶來了各自的折疊屏和雙屏設備。
聯想帶來的 ThinkPad X1 Fold，是一個價格昂貴的柔性折疊屏平板電腦，它額外附帶了一個藍牙鍵盤。
圖片來自 TheVerge
考慮到聯想在此之前已經發布過帶有LEC+墨水屏的雙屏設備 Yoga Book 2，可以說聯想是已經具備了制造兩種不同類型屏幕設備的能力。
作為對手的戴爾，帶來了分別對標聯想這兩個系列的對應產品：Concept Ori 和 Concept Duet。
Concept Ori 采用的是兩塊傳統硬屏，你既可以讓一款屏幕作為屏幕，另一塊作為虛擬輸入鍵盤或者手繪板，也可以使用配備的藍牙鍵盤，吸附在底下的屏幕上來進行輸入，而且當鍵盤移動到靠近轉軸的地方，還能讓底下露出的半塊屏幕作為觸控板來使用：
圖片來自 TheVerge
Concept Duet 在概念上則和 聯想的 ThinkPad X1 Fold 類似，一塊柔性可折疊的屏幕，便于收納，一體連接。
圖片來自 TheVerge
看了這么多硬件，是不是覺得信息量有點大？不過簡單來說，所有的這些產品，都在說一件事情：屏幕要延展開，這是一個正在發生的趨勢。
同時，我們還注意到一個很明顯的特征，就是所有的這些柔性屏設備都非常的……騷，且貴。動輒兩三千美元的起步價，如果可靠堅挺也就算了，不僅轉軸易損，且屏幕也存在易損的問題。根據 ifanr 的上手評測，即使是在優化了轉軸和屏幕折疊角度之后，三星所發布的 Galaxy Z Flip 的屏幕中段依然有著不可忽視的折痕，這一問題可能會是絕大多數折疊柔性屏設備的通病。
圖片來自愛范兒
與之相反，采用硬質雙屏設計的硬件設備，從生產成本、工藝成熟度、價格上，都更加有優勢。
值得注意的是，柔性折疊屏和硬質雙屏設備，在基本的使用體驗和邏輯上是一致的，除了極少數特殊的設備之外（比如 TCL的雙折疊式的概念機），多數情況下，兩者是差不多的。
只不過存在一個問題，雙屏設備的交互和體驗，需要有對應操作系統支持，因為從單屏到雙屏，其實交互邏輯已經發生了巨大的改變。
一直在創新且「穩健」地更新軟硬件的蘋果公司，應該不會在市場未曾成熟的情況下選擇發布硬件，這意味著你不會很快看到雙屏 iOS 硬件，而面向著大量 OEM 廠商的 Android 和 Windows 則截然不同。著兩年廠商已經身體力行證明了一件事情：只要操作系統和設計跟上，硬件馬上量產不是問題。
最近泄漏的 Android 11 的新特性已經出現了可折疊屏幕的影子，但是具體情況恐怕要到因為疫情跳票的 Google I/O 大會上會揭曉答案。但是另一邊，賊心不死的微軟，已經開始布局面向可雙屏設備的新一代操作系統 Windows 10X了。
圖片來自 TheVerge
去年微軟發布的兩款雙屏設備 Surface Duo 和 Surface Neo 并不都是采用尚未發布的 Windows 10X 操作系統，但是兩者都沿用了幾乎相同的交互邏輯，較小的 Neo 采用的是 Android 操作系統。這兩款硬件和系統交互設計，將會在未來一段時間以內，成為雙屏硬件的軟件交互的重要參考和主要標桿，聯想和戴爾這波 OEM 廠商，無疑是參考著微軟的風向標來搞硬件產品的。
圖片來自 TheVerge
傳統而臃腫的「開始」菜單欄在 Windows 10X 當中，被精簡為我們更熟悉的模式，新的 Windows 10X 在原有的 Windows 10 的基礎上，應該有對移動端（比如 ARM 架構的CPU）和小屏幕有更好的支持。
但是，更有價值的，是微軟為雙屏設備所制定的交互設計規范。
下面是基于微軟官方文檔，精簡編譯后的規范：
雙屏交互概述
雙屏設備可以基于不同的工業設計，有多種硬件樣式。微軟發布的 Surface Neo 和 Surface Duo 可以作為典型的雙屏設備作為參考。雙屏本身可以借由鉸鏈、轉軸來連接，也可以基于柔性屏來實現。
所有的雙屏設備都具備有折疊、旋轉、翻轉的功能，兩塊屏幕都可以用來作為顯示，也可以一個做屏幕一個承載虛擬鍵盤，當然也可以借由外設，構建、組合成為新的模式。所以，為這樣的硬件設計的時候，需要考慮到各種不同的情況，并且適配硬件，幫助用戶實現更多的目標。
:no_upscale()/cdn.vox-cdn.com/uploads/chorus_asset/file/19247637/akrales_190930_3649_0139.jpg)
圖片來自 TheVerge
當用戶打開應用的時候，它的主要界面窗口應該最大化，占據一塊屏幕的全寬和全高。這樣用戶可以一次打開多個不同的應用，顯示在雙屏上。
圖片來自 TheVerge
當然，你的APP 也可以完整鋪滿兩個屏幕，這個界面布局被稱為「跨屏布局」。在默認情況下，它應該像在大屏幕上一樣，一個窗口跨屏幕顯示。但是你可以修改這種模式，讓它可以鋪滿兩個屏幕的同時，還可以兼顧到中間有轉軸和鉸鏈的硬件。對于這個問題，我們隨后有詳細的討論。
響應式布局
比起傳統的響應式布局，對于雙屏硬件，我們要討論的「響應」模式要復雜得多。就像下面這張圖中所說的，要為這樣多樣、復雜的情況進行設計：
我們默認用戶在多數時候，是處于雙屏展開的狀態，當用戶打開 APP 的時候，它的主要界面窗口，將會最大化占據一個屏幕，這個時候另一個屏幕處于空置狀態，用戶可以在這個屏幕上打開另外的應用，并且用戶可以通過托拽窗口的方式，來重新整理窗口和APP的排布模式。
同時，單個應用程序也應該可以進行跨屏布局，既可以讓單個應用分別在兩塊屏幕上各呈現一個窗口，也可以作為單個窗口完整鋪滿兩塊屏幕。不論是充分利用接縫的存在，還是說盡可能地利用全部屏幕區域來聚焦單個內容，應用程序應該都可以做到。當然，這些情況我們隨后會單獨說到。
首先，作為一個已有的應用程序，在雙屏設備上應該能夠繼承原有的功能，并且盡可能地兼容雙屏的體驗。在開始討論如何為雙屏場景進行設計應用之前，我們先應該對雙屏交互進行介紹。
雙屏的響應式布局
首先，無論屏幕尺寸如何，方向如何，應用程序應該都可以保持良好的外觀，善用 UI 平臺的現有的布局技術，通過合理地縮放來自適應，填滿屏幕。如果你的屏幕元素依賴屏幕長寬比，那么應該善用平臺給的 API 來進行靈活的優化。
考慮到你的應用將會在很多不同尺寸、不同長寬比、不同類型的設備上運行，所以你的應用程序應該足以應對各種不同的情況。請記住，你的設計將會遭遇和以往截然不同的屏幕尺寸和長寬比，比如縱向（全景視圖）、橫向（較寬的全景視圖）、縱向雙屏分別顯示等不同情況。
考慮所有的屏幕方向
用戶在很多平臺上有習慣的、常見的屏幕方向，比如在 Android 和 iOS 上，通常應用是豎屏顯示的，在 Windows 上，多數情況下是橫向全屏顯示的。而在雙屏設備上，這種情況會發生改變。
比如你的應用原本是為豎屏設計的，但是需要經常輸入內容，那么你要考慮到雙屏設備上，你的應用可能是會被橫屏顯示，用戶會像用筆記本電腦那樣來使用應用，也就是說兩塊屏幕都橫向顯示，靠下平攤在桌面的屏幕會顯示虛擬鍵盤或者手寫區域，作為輸入窗口，而顯示窗口也是橫向的。
雙屏為多任務提供更好的顯示環境，你不會知道用戶會在什么樣的場合，以什么樣的姿勢來握持設備，但是考慮潛在的使用姿態，可以讓你更好得對應用進行設計和優化。
根據我們的研究，如果你的應用是注重輸入的應用，那么用戶在平面上打字和輸入將會是最舒服也最常見的姿勢。那么在這種情況下，你應該針對橫屏顯示進行針對性的優化。
支持多種輸入模式
對于新的雙屏設備，通常都支持多種輸入模式，包括打字輸入，屏幕觸摸和手寫筆這樣的截至。這意味著用戶可以靈活地根據需求，選擇不同的姿勢和輸入模式，并且快速切換，以適應不同的需求。
換句話來說，就是你在設計的時候，需要支持所有的輸入方式，以便用戶可以自由選擇交互模式。
托拽交互
你的應用應該支持屏幕托拽，這不僅是為了兼容雙屏設備，而是對于絕大多數的設備的使用情況而進行兼容，確保用戶體驗的一致和靈活。只不過相比于在屏幕單屏上進行托拽移動，在雙屏上托拽移動，將會帶來更多的可能性，并且這樣也將會在雙屏使用場景之下，最為重要的交互模式之一。
為了確保托拽操作的自然，你需要確保諸如文本、圖像、視頻等常見的交互對象和元素，可以在任何地方進行剪切、復制、粘貼，并且對于共享和放松之類的操作也啟用托拽操作，這將最大化地利用雙屏的優勢。
應用的多屏呈現
用戶會希望在兩塊屏幕上并排顯示同一應用中的不同內容，因此你的你用應該支持多實例呈現和運行。
多媒體內容畫中畫體驗
如果你的應用是一個多媒體應用，那么應該支持畫中畫模式，用戶可以邊看視頻邊執行別的操作。
上面提及的很多功能屬于基礎應用要求，并不是專門針對雙屏設備而做，但是如果你的應用支持上面的功能，那么在雙屏上將會明顯擁有更好的用戶體驗。接下來，我們著重聊一下在雙屏設備上進行設計的問題。
在雙屏設備上，你的應用應當支持在單個屏幕上運行，也可以在雙屏上運行，當一個應用在兩個屏幕上顯示的時候，我們稱之為「跨屏」，而跨屏顯示這個問題對于雙屏設備而言，是至關重要的，如何顯示將會帶來巨大的影響。這種獨特交互模式可能會解鎖前所未有的使用方法。比如，有轉軸和接縫的雙屏設備，因為屏幕的特征而非常適合分隔并行式的生產力解決方案。
跨屏是用戶的選擇
用戶有選擇如何使用應用的方式的權力，包括何時跨屏顯示。某些應用可能在單屏或者跨屏顯示的時候，看起來不夠好看，但是如何使用的權力，應該交給用戶去選擇。
盡管本文會針對如何處理多屏布局提供幾種不同的方案和想法，但是請選擇適合你的用戶和應用的呈現方式。
考慮用戶意圖和設備方向
當你的兩個屏幕都被利用起來的時候（橫向雙屏，縱向雙屏），了解用戶的意圖至關重要。盡管還有更多的調研需要做，但是結合我們目前已有的觀察，可以得出如下的趨勢：
在為雙屏設備設計應用的時候，有四種常見的布局方案是你需要考慮的。通常這取決于應用是單屏還是跨屏，是默認視圖還是全屏視圖：
1、單屏默認模式
2、跨屏默認模式
3、單屏全屏模式
4、跨屏全屏模式
當單個應用以單個窗口運行，并且跨越兩個屏幕的時候，跨屏布局就出現了。如果你原有的應用從未針對雙屏設備進行優化的話，那么系統會提示你「應用將會擴展并占據所有屏幕」，并且這個時候，應用界面會自行調整大小，適應新的尺寸。
這種情況下，界面中間的接縫會顯得非常明顯。這是雙屏設備先天的副產物。要如何優雅地處理接縫？這就是下面這節內容將會探討的問題，我們將會提供一些常見的處理方案yi。
是否總是要適應接縫？
如果你的應用不作任何優化就直接在雙屏設備上投放使用，接縫并不總會給用戶體驗帶來影響。比如地圖類應用，用戶可以隨意移動地圖內容，接縫帶來的割裂并不會對使用體驗造成實質性的影響。在后面「擴展畫布」這一節，將會對這個問題進行深入討論。
但是對于另外一部分應用，接縫帶來的問題就非常嚴重了。比如在一個表格類應用當中，如果不作修改和調整，有的內容會直接被接縫給割裂開，你必須進行滾動才能正常查看。而對于某些相對更加固定無法移動的元素而言，接縫帶來的體驗是破壞性的。而這個時候，我們需要使用一些技術方案來處理這個問題。
規避接縫
將元素移到一邊
由于兩塊屏幕之間有明顯的接縫，因此當用戶在使用應用的時候，某些 UI 元素可能會正好被穿過接縫，邏輯上這不會影響功能，但是如果將這些 UI 元素移動到屏幕的一邊來顯示，會提供更好的體驗。最好避免在接縫處顯示文本內容，這會影響可讀性。
應用程序對話框應該移到屏幕的一邊，尤其是需要點擊按鈕操作的時候。
底部菜單應該移動到屏幕一側，而不是延伸到兩個屏幕上。
用戶調用上下文菜單的時候，應該將接縫視作為屏幕邊界處理，尤其是在靠近屏幕邊緣的地方觸發菜單的時候。
應用內的下拉菜單或者可擴展容器如果可能會跨越接縫的話，應該改變擴展方向。
當整個應用界面擴展開來的時候，應該整個移動到屏幕的上側，而不是在靠近中心的位置橫跨接縫。
貼合接縫
使用偶數列并和接縫對齊
當界面中使用網格布局的時候，垂直或者水平方向盡量使用偶數行或者偶數列，這樣可以讓接縫和界面間隙正好重合，用戶可以更加舒適地查看信息。
在網格中使用偶數列，尤其是對于容器、表單，并且考慮到接縫來控制間距。
除此之外，還有許多應用會考慮充分利用另外一個屏幕來顯示彈出菜單或者下級頁面的內容。這種使用邏輯確實會讓應用更加易用，并且在視覺上會更加干凈清爽。但是請記住，如果彈出的界面并不是全屏的，可能會暗示它是可折疊和可關閉的，因此，你需要根據實際的設計需求，來靈活的處理呈現樣式。全覆蓋另外一屏的彈出界面，更加適合小尺寸屏幕。
重新排列 UI 元素
移動到接縫的任一側
還有一種用來優化響應式布局的方法是，當屏幕方向或者大小發生變化的時候，重新排列你的內容。這種方式讓你可以在兩個屏幕上隨意擴展你的內容，你可以通過分組來重新排列，以更有目的的方式來適配屏幕和內容。
遮罩和分割
對于一些無法重新排列的元素，比如全屏圖片和視頻，這個時候只能使用遮罩和分割的方式來處理。
遮罩的思路是，將接縫視作為一個遮罩元素，而圖片被它給遮擋了一部分，根據格式塔原理，我們的大腦會自動補足缺少的部分，遮罩遮罩處理方式適合處理多媒體（視頻，圖片等）這樣的畫布類型的場景，在這些場景下，保持圖像的連續性比顯示內容的完整性更加重要。
分割的思路是將內容均勻切割為兩個部分，完整呈現，這對于包含有多個控件和元素的普通界面而言，是更加合理的處理方式，包括可能會出現在屏幕中間的按鈕。
根據類型的不同，這兩種處理方式各有優勢，我們將繼續跟進不同的用戶行為特征，來尋求更優的解決方案。
文章來源：優設
藍藍設計的小編 http://www.syprn.cn