去年的時(shí)候公司 PC 端準(zhǔn)備改版，就在考慮有沒有必要做一套 UWP 的應(yīng)用，調(diào)研之前下意識(shí)的覺得，要改版肯定要嘗試新的風(fēng)格。但調(diào)研之后，發(fā)現(xiàn)并不是這樣，做不做 UWP 風(fēng)格的應(yīng)用不是設(shè)計(jì)師可以決定的，更多的是系統(tǒng)以及開發(fā)層面上的。

UWP 應(yīng)用本身官方就給出了詳細(xì)的設(shè)計(jì)指南，而 Fluent Design 的出現(xiàn)只是讓 UWP 應(yīng)用顏值更高、更好用了，舉一個(gè)不恰當(dāng)?shù)睦?，UWP 的設(shè)計(jì)指南是自帶相機(jī)， Fluent Design 是美顏相機(jī)，都能用但是美顏之后更好看。

不過由于 Windows 系統(tǒng)的復(fù)雜性， Fluent Design 并沒有完全覆蓋 Windows10 系統(tǒng)，也就是說某些場(chǎng)景下是用不了美顏的，而要全部覆蓋估計(jì)還需要很長(zhǎng)的時(shí)間。

一、關(guān)于 UWP

UWP（Universal Windows Platform）是基于 Windows10 的通用應(yīng)用平臺(tái)，UWP 應(yīng)用可以在所有 Windows10 的設(shè)備上運(yùn)行，比如電腦端、手機(jī)端、或其他設(shè)備端。且只支持 Windows10，基于 UWP 設(shè)計(jì)的應(yīng)用在商店里只會(huì)有一個(gè)安裝包，同時(shí)顯示可用于哪些設(shè)備，點(diǎn)擊“獲取”會(huì)自動(dòng)下載符合當(dāng)前設(shè)備的安裝包

? ? ? UWP 優(yōu)缺點(diǎn)

? ? ? ?1）優(yōu)點(diǎn)

沒有亂七八糟的彈出廣告，產(chǎn)品更純凈。UWP 的消息推送只能通過通知中心，在設(shè)置里還可以選擇是否接收應(yīng)用的通知，就不會(huì)出現(xiàn)出現(xiàn)玩著電腦突然彈出一個(gè)軟件通知的情況了

* 一套代碼適應(yīng)多個(gè)設(shè)備端，且支持單個(gè)平臺(tái)功能的修改，不影響其他平臺(tái)

* 直接通過應(yīng)用市場(chǎng)下載軟件，更安全

? ? ? ?2）缺點(diǎn)

UWP 跨平臺(tái)使用，只能跨 Windows 系統(tǒng)，并且 UWP 的應(yīng)用不兼容 Windows 7 等一些老的系統(tǒng)，而根據(jù)目前 Windows 各系統(tǒng)的使用占比來看（數(shù)據(jù)來源：市場(chǎng)調(diào)查機(jī)構(gòu)NetMarketShare）Windows 7 占了大頭，這意味著開發(fā) UWP 應(yīng)用就需要做兩套

其次 PC 和手機(jī)的操作習(xí)慣、軟件功能差異太大，大多數(shù)產(chǎn)品其實(shí)不適合共用一套

廠商對(duì)于 UWP 版本的維護(hù)熱情不大，因?yàn)槭謾C(jī) APP、游戲的開發(fā)思路，大多直接使用 Android/iOS 系統(tǒng)，沒什么必要從一個(gè)熟悉的平臺(tái)遷移到一個(gè)不習(xí)慣的PC平臺(tái)，換一個(gè)平臺(tái)還得遵循新的設(shè)計(jì)規(guī)范

二. UWP 設(shè)計(jì)指南

UWP 應(yīng)用運(yùn)行在所有 Windows 10 的設(shè)備上，系統(tǒng)通過算法自動(dòng)縮放 UI 元素，以保證元素在所有設(shè)備上都清晰可見，此縮放算法會(huì)根據(jù) DPI(每英寸點(diǎn)數(shù))和設(shè)備的觀看距離來自動(dòng)縮放

介于 UWP 的縮放算法是按照 4 的倍數(shù)縮放 UI 元素，所以建議應(yīng)用內(nèi)所有尺寸、邊距和填充的數(shù)值都為 4 的倍數(shù)。

? ? ? 2.1 響應(yīng)式設(shè)計(jì)

UWP 應(yīng)用支持所有屏幕，為了避免在小屏幕上顯示的效果，到了大屏幕的設(shè)備上顯的空，浪費(fèi)了顯示空間。所以我們需要自定義應(yīng)用在屏幕超過特定大小時(shí)（也就是屏幕斷點(diǎn)）顯示更多的內(nèi)容，比如在小屏幕上一排顯示一個(gè)產(chǎn)品、在大屏設(shè)備上就可以顯示多個(gè)產(chǎn)品...

官方建議劃分?jǐn)帱c(diǎn)為640以及1007，640px 以下的屏幕為小屏幕，641-1007px 之間為中等，1008以上為大屏幕

PS：這里說的屏幕大小不僅僅指顯示器的大小，更多的指的是應(yīng)用的窗口大小，當(dāng)應(yīng)用全屏?xí)r，應(yīng)用窗口的大小和屏幕的大小相同，當(dāng)應(yīng)用不全屏?xí)r，窗口的大小小于屏幕的大小

根據(jù)屏幕的寬度不同，左側(cè)導(dǎo)航顯示樣式也有所不同，當(dāng)整體寬度小于或等于640px時(shí)，默認(rèn)狀態(tài)下，左側(cè)導(dǎo)航完全折疊

當(dāng)整體寬度介于 641px 和 1007px 之間時(shí)，左側(cè)導(dǎo)航折疊成條形，導(dǎo)航折疊后的寬度建議48px，展開后建議320px

當(dāng)整體寬度大于1008px 時(shí)，左側(cè)導(dǎo)航完全展開

? ? ? 2.2 對(duì)話框

對(duì)話框包括標(biāo)題、內(nèi)容區(qū)域、和按鈕，一個(gè)按鈕時(shí)右對(duì)齊，兩個(gè)、三個(gè)時(shí)均分，彈窗用描邊區(qū)分，描邊的顏色會(huì)跟隨著系統(tǒng)主題的變化而變化

一般情況下，確認(rèn)按鈕（主要按鈕）位于左側(cè)，取消按鈕（輔助按鈕）位于右側(cè)

當(dāng)有三個(gè)按鈕時(shí)，左側(cè)第一個(gè)為第一個(gè)可執(zhí)行的操作，中間為第二個(gè)可執(zhí)行的操作，此時(shí)還可以指定一個(gè)默認(rèn)按鈕，該按鈕可以做特殊處理，比如顏色高亮。當(dāng)用戶在鍵盤上按 Enter 鍵時(shí)，默認(rèn)按鈕自動(dòng)觸發(fā)選中。不過建議慎用三個(gè)按鈕，能用兩個(gè)搞定的就用兩個(gè)按鈕

PS：上面所說的建議確定按鈕放左側(cè)，取消放右側(cè)，與其他平臺(tái)不同，是因?yàn)榇蠖鄶?shù)用戶習(xí)慣用右手拿著手機(jī)，那左側(cè)的按鈕處于用戶的拇指拇指弧范圍內(nèi)，更為舒適，而右側(cè)的按鈕需要用戶將拇指向內(nèi)收縮到不太舒適的位置

? ? ? 2.3 顏色

在 UWP 應(yīng)用中，顏色主要取決與系統(tǒng)主題以及程序主題，系統(tǒng)主題指的是通過系統(tǒng)設(shè)置更換的主題樣式，更換后字體顏色、壁紙等都會(huì)發(fā)生改變

也可以為應(yīng)用自定義主題色，使之不受系統(tǒng)主題的影響

而程序主題指的是 UWP 提供的深色、淺色主題，這個(gè)更換的話會(huì)對(duì)應(yīng)用的背景、文本、圖標(biāo)和常見控件的顏色造成影響。所以在設(shè)計(jì)之初就需要確定選擇哪一套

? ? ? 2.4字體

UWP 應(yīng)用默認(rèn)的字體是 Segoe UI ，適用于英語(yǔ)等一些語(yǔ)言，對(duì)于其他語(yǔ)種，官方也推薦了不同的字體樣式，根據(jù)推薦表可以得出在簡(jiǎn)體中文的界面中，中文字體為 Microsoft YaHei UI，英文字體為 Segoe UI

而為了保證字體在界面中的層級(jí)，幫助用戶輕松的閱讀內(nèi)容，在字體大小上也做了推薦

? ? ? 2.5圖標(biāo)

圖標(biāo)建議使用 SVG 格式的，保證在不同的屏幕進(jìn)行縮放時(shí)不會(huì)模糊。官方有一個(gè)圖標(biāo)推薦庫(kù)，做之前可以先看一下，如果你要的圖標(biāo)已經(jīng)存在的話，就可以直接用官方自帶的

? ? ? 2.6動(dòng)效

用戶即時(shí)感知的最長(zhǎng)時(shí)間是 500ms ，建議以此作為基準(zhǔn)，退出場(chǎng)景或關(guān)閉頁(yè)面時(shí)，建議150ms

進(jìn)入場(chǎng)景或打開頁(yè)面，建議300ms

場(chǎng)景切換，建議≤500ms，持續(xù)時(shí)間受移動(dòng)距離的影響

小貼士：用 AE 等一些軟件做動(dòng)效時(shí)，會(huì)涉及到幀與秒、毫秒之間的換算，很多人不知道怎么換算，這里簡(jiǎn)單的科普一下，AE 里面新建合成時(shí)有一個(gè)幀速率，多少幀等于 1s，建議設(shè)置成 25幀/s ，這樣 1幀=0.04s=40ms

三、Fluent Design

Fluent Design 是微軟在2017 Bulid 上公布的全新設(shè)計(jì)語(yǔ)言，它能夠讓 Windows 10 系統(tǒng)更加好看和好用。該設(shè)計(jì)語(yǔ)言有五大核心元素，Material（材質(zhì)）、Light（光感）、Depth（深度）、Motion（動(dòng)畫）、和 Scale（縮放）

? ? ? ?3.1 Material（材質(zhì)）——亞克力設(shè)計(jì)

亞克力設(shè)計(jì)，俗稱透明度，有點(diǎn)像 iOS 里的毛玻璃效果，主要目的是增加界面的層次感，用戶可以在系統(tǒng)設(shè)置里自由選擇是否開啟

亞克力設(shè)計(jì)主要應(yīng)用到兩個(gè)場(chǎng)景：背景以及應(yīng)用內(nèi)，背景亞克力指的是當(dāng)前窗口和桌面背景之間的效果

應(yīng)用內(nèi)亞克力多出現(xiàn)在左側(cè)導(dǎo)航，或者局部地方，如下圖音樂類 APP 的頭部，為界面增加層次感

? ? ? ?3.2 Light（光感） —— 模擬現(xiàn)實(shí)世界

在設(shè)計(jì)交互菜單和應(yīng)用界面時(shí)， Light 通過照亮元素從而吸引用戶，發(fā)光的元素能引導(dǎo)用戶輕松上手一款應(yīng)用或提示應(yīng)用的亮點(diǎn)功能所在。

Material Design 通過光引入了 Shadow（投影），而 Fluent Design 引入了 Light（光感）

? ? ? 3.3 Depth（深度） —— 從二維到三維立體空間

Depth 將 Z 軸也考慮到了設(shè)計(jì)和交互中（類似 Material Design 的 Elevation），通過放大或伸縮的動(dòng)作，一些重要的事項(xiàng)會(huì)放大呈現(xiàn)在用戶面前，造成一種深度變化的錯(cuò)覺，從而增加設(shè)計(jì)載體的空間。借助 Depth 元素，UI 會(huì)呈現(xiàn)物理環(huán)境的變化，能減少審美疲勞，增加用戶的黏性。同時(shí)也是為了在 VR/AR 應(yīng)用做準(zhǔn)備

? ? ? 3.4 Motion（動(dòng)畫）更合理的動(dòng)效

Motion 元素的加入可以為用戶提供更好看且互動(dòng)性強(qiáng)的動(dòng)效，吸引用戶的注意力。在場(chǎng)景切換時(shí)，能夠更好的引導(dǎo)用戶進(jìn)入下一個(gè)場(chǎng)景。動(dòng)效現(xiàn)在也成為一個(gè)優(yōu)秀產(chǎn)品必不可少的一環(huán)，恰如其分的動(dòng)效能夠提升產(chǎn)品的質(zhì)感，增加用戶參與的欲望。

? ? ? 3.5 Scale（縮放） 更合理的動(dòng)效

在電腦屏幕上看起來比較合適的物體放在 AR 或 VR 頭戴設(shè)備中觀看，可能就會(huì)變得過大或過小，這時(shí)候就需要對(duì)物體進(jìn)行縮放，這也是3D 交互界面和 VR/AR 時(shí)代的必備功能，而 Scale 元素的出現(xiàn)就能夠解決這一點(diǎn)

? ? ? 四.總結(jié)

本文主要講述了 UWP 應(yīng)用的現(xiàn)狀、優(yōu)缺點(diǎn)、設(shè)計(jì)指南，以及 Fluent design ，主要內(nèi)容大多來自于 Windows 官網(wǎng)以及自己的理解，關(guān)于 UWP 官網(wǎng)里有更詳細(xì)的解析，感興趣的同學(xué)可以自行查閱，這里只是挑選了一些跟設(shè)計(jì)相關(guān)的內(nèi)容。

想了解更多UWP設(shè)計(jì)的可以下載：適用于 UWP 應(yīng)用的設(shè)計(jì)工具包

原創(chuàng)： 橙子的橙子