UI界面設計

基于Windows 10的UWP設計指南

3945

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

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

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

一、關于 UWP

UWP（Universal Windows Platform）是基于 Windows10 的通用應用平臺，UWP 應用可以在所有 Windows10 的設備上運行，比如電腦端、手機端、或其他設備端。且只支持 Windows10，基于 UWP 設計的應用在商店里只會有一個安裝包，同時顯示可用于哪些設備，點擊“獲取”會自動下載符合當前設備的安裝包

? ? ? UWP 優(yōu)缺點

? ? ? ?1）優(yōu)點

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

* 一套代碼適應多個設備端，且支持單個平臺功能的修改，不影響其他平臺

* 直接通過應用市場下載軟件，更安全

? ? ? ?2）缺點

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

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

廠商對于 UWP 版本的維護熱情不大，因為手機 APP、游戲的開發(fā)思路，大多直接使用 Android/iOS 系統(tǒng)，沒什么必要從一個熟悉的平臺遷移到一個不習慣的PC平臺，換一個平臺還得遵循新的設計規(guī)范

二. UWP 設計指南

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

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

? ? ? 2.1 響應式設計

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

官方建議劃分斷點為640以及1007，640px 以下的屏幕為小屏幕，641-1007px 之間為中等，1008以上為大屏幕

PS：這里說的屏幕大小不僅僅指顯示器的大小，更多的指的是應用的窗口大小，當應用全屏時，應用窗口的大小和屏幕的大小相同，當應用不全屏時，窗口的大小小于屏幕的大小

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

當整體寬度介于 641px 和 1007px 之間時，左側導航折疊成條形，導航折疊后的寬度建議48px，展開后建議320px

當整體寬度大于1008px 時，左側導航完全展開

? ? ? 2.2 對話框

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

一般情況下，確認按鈕（主要按鈕）位于左側，取消按鈕（輔助按鈕）位于右側

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

PS：上面所說的建議確定按鈕放左側，取消放右側，與其他平臺不同，是因為大多數(shù)用戶習慣用右手拿著手機，那左側的按鈕處于用戶的拇指拇指弧范圍內，更為舒適，而右側的按鈕需要用戶將拇指向內收縮到不太舒適的位置

? ? ? 2.3 顏色

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

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

而程序主題指的是 UWP 提供的深色、淺色主題，這個更換的話會對應用的背景、文本、圖標和常見控件的顏色造成影響。所以在設計之初就需要確定選擇哪一套

? ? ? 2.4字體

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

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

? ? ? 2.5圖標

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

? ? ? 2.6動效

用戶即時感知的最長時間是 500ms ，建議以此作為基準，退出場景或關閉頁面時，建議150ms

進入場景或打開頁面，建議300ms

場景切換，建議≤500ms，持續(xù)時間受移動距離的影響

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

三、Fluent Design

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

? ? ? ?3.1 Material（材質）——亞克力設計

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

亞克力設計主要應用到兩個場景：背景以及應用內，背景亞克力指的是當前窗口和桌面背景之間的效果

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

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

在設計交互菜單和應用界面時， Light 通過照亮元素從而吸引用戶，發(fā)光的元素能引導用戶輕松上手一款應用或提示應用的亮點功能所在。

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

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

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