摘要：如何挑選合適的導(dǎo)航結(jié)構(gòu)導(dǎo)航設(shè)計是應(yīng)用設(shè)計的關(guān)鍵，設(shè)計規(guī)范以下簡稱規(guī)范中將導(dǎo)航元素分為對等層次和歷史導(dǎo)航等幾類，例如表和透視表導(dǎo)航窗格是對等導(dǎo)航元素，中心大綱細(xì)節(jié)屬于分層導(dǎo)航元素，返回則屬于歷史導(dǎo)航元素。

此文已由作者楊凱明授權(quán)網(wǎng)易云社區(qū)發(fā)布。

歡迎訪問網(wǎng)易云社區(qū)，了解更多網(wǎng)易技術(shù)產(chǎn)品運(yùn)營經(jīng)驗。

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

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

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

如何挑選合適的導(dǎo)航結(jié)構(gòu)
導(dǎo)航設(shè)計是應(yīng)用設(shè)計的關(guān)鍵，Windows 10設(shè)計規(guī)范（以下簡稱『規(guī)范』）中將導(dǎo)航元素分為對等、層次和歷史導(dǎo)航等幾類，例如表和透視表、導(dǎo)航窗格是對等導(dǎo)航元素，中心、大綱/細(xì)節(jié)屬于分層導(dǎo)航元素，返回則屬于歷史導(dǎo)航元素。

1.『發(fā)現(xiàn)課程/我的學(xué)習(xí)』導(dǎo)航
『發(fā)現(xiàn)課程和我的學(xué)習(xí)』是主要信息架構(gòu)，需要選擇合適的導(dǎo)航結(jié)構(gòu)去承載這兩個模塊。導(dǎo)航窗格能夠根據(jù)斷點(diǎn)判斷其模式，對于寬屏展開，對于窄屏則收起窗格。在PC版能夠使用導(dǎo)航窗格的形式，將信息架構(gòu)展現(xiàn)出來，而在移動版中若要復(fù)用該導(dǎo)航結(jié)構(gòu)，則會將導(dǎo)航窗格的表現(xiàn)形式變?yōu)闈h堡菜單。但是漢堡菜單在一定程度上對信息做了隱藏，增長了用戶去到『我的課程』的路徑。故在設(shè)計中，對移動版使用了和PC版不同的框架結(jié)構(gòu)，即使用透視表來承載發(fā)現(xiàn)課程和我的學(xué)習(xí)，讓用戶能夠快速到達(dá)我的學(xué)習(xí)。

在規(guī)范中將選項卡稱為透視表和表，也稱為樞紐，其中透視表就是純文本的選項卡，而表就是帶圖標(biāo)的選項卡。對于PC版本，透視表可用作用戶課程類目頁的類目篩選。移動版本，透視表將作為主體的導(dǎo)航框架。即使能夠使用同一套代碼，但針對不同的應(yīng)用平臺仍需考慮定制化，滿足不同場景的業(yè)務(wù)露出，我們?nèi)允褂昧藘商捉Y(jié)構(gòu)。

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

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

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

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

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

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

網(wǎng)易云免費(fèi)體驗館，0成本體驗20+款云產(chǎn)品！

更多網(wǎng)易技術(shù)、產(chǎn)品、運(yùn)營經(jīng)驗分享請點(diǎn)擊。

文章來源： 網(wǎng)易云社區(qū)