摘要：如何挑選合適的導航結構導航設計是應用設計的關鍵，設計規范以下簡稱規范中將導航元素分為對等層次和歷史導航等幾類，例如表和透視表導航窗格是對等導航元素，中心大綱細節屬于分層導航元素，返回則屬于歷史導航元素。

此文已由作者楊凱明授權網易云社區發布。

歡迎訪問網易云社區，了解更多網易技術產品運營經驗。

繼Windows 10系統發布之后，很多Windows用戶更新了系統。win10系統的發布，在以往的metro UI中加入了很多理性元素，可以看出win10在易用性和兼容性上面做了努力。

在之前的項目中接到了中國大學MOOC關于Windows應用設計的需求，在完成方案的過程中也從一知半解到認識這個Windows 10的通用應用平臺UWP（Universal Windows Platform），在這里向大家分享一些個人的總結和想法。

什么是UWP
Windows提出了UWP的概念，簡而言之，就是讓這個應用能夠在所有Windows設備平臺運行起來。UWP在continuum模式識別設備類型和設備模式的基礎上，根據目標設備的屏幕大小及斷點（一些關鍵的寬度，例如360、640、1024和1366 epx等）的判斷，實現以最少的開發量完成在多平臺運行的應用。Win10還提供了自適應控件，使用這套跨設備的自適應控件，從而提供了快速實現通用化應用的有力支持。Windows設備存在多種輸入模式共存的現象。UWP能夠針對目標設備進行識別，判斷出其兼容的輸入類型（如鍵盤、鼠標、觸摸、筆和Xbox One控制器），從而進行適配。例如Surface能夠接收來自鼠標和觸摸手勢兩種輸入，故針對Surface我們將設計其輸入模式兼容這兩種模式，以避免在一個模式下造成某一種功能無法使用。在了解了UWP基本概念的基礎上，展開了此次Win10應用設計，在此過程中一邊摸索現有規范一邊梳理業務范圍和設計應用，得到了針對導航、命令欄、磁貼等幾點的總結和思路。

如何挑選合適的導航結構
導航設計是應用設計的關鍵，Windows 10設計規范（以下簡稱『規范』）中將導航元素分為對等、層次和歷史導航等幾類，例如表和透視表、導航窗格是對等導航元素，中心、大綱/細節屬于分層導航元素，返回則屬于歷史導航元素。

1.『發現課程/我的學習』導航
『發現課程和我的學習』是主要信息架構，需要選擇合適的導航結構去承載這兩個模塊。導航窗格能夠根據斷點判斷其模式，對于寬屏展開，對于窄屏則收起窗格。在PC版能夠使用導航窗格的形式，將信息架構展現出來，而在移動版中若要復用該導航結構，則會將導航窗格的表現形式變為漢堡菜單。但是漢堡菜單在一定程度上對信息做了隱藏，增長了用戶去到『我的課程』的路徑。故在設計中，對移動版使用了和PC版不同的框架結構，即使用透視表來承載發現課程和我的學習，讓用戶能夠快速到達我的學習。

在規范中將選項卡稱為透視表和表，也稱為樞紐，其中透視表就是純文本的選項卡，而表就是帶圖標的選項卡。對于PC版本，透視表可用作用戶課程類目頁的類目篩選。移動版本，透視表將作為主體的導航框架。即使能夠使用同一套代碼，但針對不同的應用平臺仍需考慮定制化，滿足不同場景的業務露出，我們仍使用了兩套結構。

2.『課程學習頁』章節導航
大綱/細節，適合適用于列表細節布局的部分，常見的有郵箱客戶端。課程學習頁可采用該模式展示，課程目錄即為大綱，具體的課件內容即為細節。移動端則顯示大綱，點擊進入細節。規范提供了一一清空歷史所有細節再退出整體大綱的交互邏輯，但針對課件學習的行為來說，返回已經學習過的內容再次學習的場景較少，并且在學習頁是相對獨立的大綱細節模式，故學習的導航返回邏輯需要設置深度為1，即無需清空細節面板，直接退出學習頁，返回外部的導航窗格。大綱/細節與導航窗格交互方式很類似，其不同的地方在于導航窗格用于頂層頁面的顯示，是整體信息架構模式，而大綱/細節是對于底層頁面和功能的展現，應用于學習頁也是相對合適的。

3.『返回/歷史』
在規范中將返回歸屬于歷史導航元素，返回操作主要存在于標題欄。這里的后退傳承了Windows的資源管理器的后退邏輯，后退是返回到之前瀏覽的內容的一個操作。通過返回深度，記錄了歷史瀏覽記錄或頁面訪問層級。Android的虛擬返回鍵，也是基于用戶查看界面歷史返回的。而對于應用內的返回，Android和iOS中基本一致，均是針對業務層級的返回，或者說是信息架構的返回。但對于存在Android存在兩個返回的情況下，用戶可能會混淆兩個返回的不同邏輯，從而在使用過程中導致混亂。故在此次設計中，如上文提到的『課程學習頁』，將所有頁面的返回深度都設置為1，保證用戶后退按鈕導航到信息架構的上一層，而不是應用導航歷史記錄中的上一個位置。

命令欄和磁貼
UWP中的命令欄（也稱為應用欄），可用于考慮邊緣型的操作，例如分享、全部下載。定義邊緣性操作需要確定業務和功能，邊緣型操作用于輔助頁面主要功能，可適量弱化，必不可少的邊緣型操作可直接露出，非必要的可收起在溢出菜單中。針對頁面的不同業務情況，承載對應的操作，例如在課件詳情頁中的分享操作、課程列表頁中的排序、學習頁的批量下載等；

磁貼是延續metro UI的控件，可用于展示應用品牌，或承載push消息內容。磁貼具有高度自定義設置，提供了主磁貼和輔助磁貼以及十幾種樣式，根據推送內容，選擇合適的磁貼格式。當前磁貼的尺寸分為大、中、小、寬四種，而手機無法顯示大的磁貼，故移動端上只有中、小、寬。需要至少定義一種磁貼的顯示內容，兼容PC端和移動端。當前主要的消息體為課程維度消息，課程封面能夠吸引用戶的注意，因為用戶報名的課程為多個，告知消息體時需突出課程標題。### 兼顧變化的屏幕尺寸規范還提出了有效像素的概念，它使應用能夠自動調整控件、字體和其他UI元素的大小，以使它們在所有設備上清晰可見。 在本次項目中UI元素盡量使用有效像素，使得圖標基于該設備的可用屏幕像素數自行調整，同時在其他連續的區間內，屏幕的斷點將同步內容布局的變化，以保證在不同寬度的屏幕上的可讀性。例如卡片使用動態計算能夠使得整體的縮放效果是自適應的，用戶也能夠及時流暢地感受到改變窗口大小帶來的布局變化。

別忘了輸入設備的多樣性
UWP根據適配設備的不同，對應的輸入也不同，例如手機和平板擁有觸摸和語音等，PC擁有鼠標、鍵盤、有時會使用游戲板，Surface還有觸摸、手勢、觸筆等等。在這次項目中，移動場景主要的輸入設備是觸摸，移動場景可以借鑒已有的iOS和Android的交互形式。PC場景輸入設備主要為鼠標和鍵盤，此時快捷鍵就很大程度上方便用戶快速使用視頻播放的相關功能，比如使用左右鍵控制視頻進度、上下鍵控制視頻音量、全屏模式下使用ESC鍵退出全屏等，并以用戶首次引導，讓用戶能夠在PC場景下更方便的學習課程視頻。

總之，UWP還保持著很多操作系統的交互模式，包括返回的邏輯、頂部導航等。但相對于metro UI已經很大程度上做了平臺統一的設計，也向用戶提供更易用的平臺努力。Windows也在不斷更新中，最近也更新了新的系統UI，讓我們期待Windows新的突破吧。

網易云免費體驗館，0成本體驗20+款云產品！

更多網易技術、產品、運營經驗分享請點擊。

文章來源： 網易云社區