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

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

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

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

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

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

如何挑選合適的導(dǎo)航結(jié)構(gòu)
導(dǎo)航設(shè)計(jì)是應(yīng)用設(shè)計(jì)的關(guān)鍵，Windows 10設(shè)計(jì)規(guī)范（以下簡(jiǎn)稱『規(guī)范』）中將導(dǎo)航元素分為對(duì)等、層次和歷史導(dǎo)航等幾類，例如表和透視表、導(dǎo)航窗格是對(duì)等導(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)去承載這兩個(gè)模塊。導(dǎo)航窗格能夠根據(jù)斷點(diǎn)判斷其模式，對(duì)于寬屏展開(kāi)，對(duì)于窄屏則收起窗格。在PC版能夠使用導(dǎo)航窗格的形式，將信息架構(gòu)展現(xiàn)出來(lái)，而在移動(dòng)版中若要復(fù)用該導(dǎo)航結(jié)構(gòu)，則會(huì)將導(dǎo)航窗格的表現(xiàn)形式變?yōu)闈h堡菜單。但是漢堡菜單在一定程度上對(duì)信息做了隱藏，增長(zhǎng)了用戶去到『我的課程』的路徑。故在設(shè)計(jì)中，對(duì)移動(dòng)版使用了和PC版不同的框架結(jié)構(gòu)，即使用透視表來(lái)承載發(fā)現(xiàn)課程和我的學(xué)習(xí)，讓用戶能夠快速到達(dá)我的學(xué)習(xí)。

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

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

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

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

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

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

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

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

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

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