第6講移動u設(shè)計第六

1、UI設(shè)計Mobile User InterfaceDesign（主講：）移動應(yīng)用UI設(shè)計模式：導(dǎo)航篇本講內(nèi)容摘要2嶺南師范學(xué)院主導(dǎo)航模式全局導(dǎo)航跳板式(Springboard) 列表菜單式(List儀表式(Dashboard) 陳列館式(Gallery)選項卡式(Tab) 隱喻式(Skeuomorphic)嶺南師范學(xué)院用戶遇到的問題安裝某款A(yù)PP時，是如何 作為用戶，他們在決定是否做出決定的呢？評分挺高哦，下載下來用一用！嶺南師范學(xué)院用戶遇到的問題 而對于一款評分較低的軟件，往往都可以從用戶的評論中找到低分的。關(guān)鍵功能軟件界面設(shè)計使用通用的UI設(shè)計模式可以解決這些常見的問題。導(dǎo)航欠佳嶺南師范學(xué)

2、院主導(dǎo)航模式全局導(dǎo)航6 As soon as you open an app with persistent navigation, it is immediately clear what the primary navigation options are. 只要打開具備全局導(dǎo)航的應(yīng)用，主導(dǎo)航的選項立刻一目了然。嶺南師范學(xué)院主導(dǎo)航模式瞬時導(dǎo)航7 Transient navigation, however, must be explicitly revealed with a tap or gesture. 而瞬時導(dǎo)航則必須通過點(diǎn)擊或者手勢才能夠。嶺南師范學(xué)院主導(dǎo)航模式瞬時導(dǎo)航8 These

3、 patterns arise from the constraints of smartphone screen sizes, which have pushed mobiledesigners to think “outside of the box”.十分有限（通常4到6英寸之 由于智能的屏幕間），這使得移動應(yīng)用設(shè)計師們不得不思考如何打破“屏幕”框架，在有限的屏幕空間上承載足夠多的內(nèi)容。嶺南師范學(xué)院學(xué)會跳出既有框架9 下面我們先做一個有趣的小練習(xí)：用4條或者更少的直線將全部的9個圓點(diǎn)連接起來，要一筆完成，且各線之間不能重疊。嶺南師范學(xué)院學(xué)會跳出既有框架10 經(jīng)過許久的思索與嘗試之后，我們

4、會發(fā)現(xiàn)解決這個謎題的唯一辦法就是打破由9個點(diǎn)構(gòu)建成的虛擬的邊界。嶺南師范學(xué)院學(xué)會跳出既有框架11畫布”，即Off- 在移動領(lǐng)域，這種思想稱作“canvas。 現(xiàn)在安卓與iOS上流行的側(cè)邊抽屜（漢堡菜單）、Windows Phone中的全景控件等都是這種設(shè)計思想的體現(xiàn)。WP中的全景控件嶺南師范學(xué)院全局導(dǎo)航與瞬時導(dǎo)航的抉擇12應(yīng)用層次應(yīng)用的菜單分類是同級的還是有優(yōu)先級的？主要的類別是否只有少數(shù)幾個？如果這些問題的回答中出現(xiàn)了是的話，則需要使用全局導(dǎo)航?？焖倌愕挠脩羰欠裥枰藛我恢碧幱诳梢姞顟B(tài)以便快速呢？狀態(tài)提示菜單分類有沒有狀態(tài)提示，比如論等等？新評嶺南師范學(xué)院全局導(dǎo)航跳板式(Springboar

5、d)13 The Springboard pattern, also called a Launchpad, is alanding screen with options that ainto the application.launch points 跳板式設(shè)計模式，也稱作啟動面板(Launchpad)，指的是一個帶有菜單選項的登陸界面，而菜單選項是進(jìn)入應(yīng)用各個功能的起點(diǎn)。嶺南師范學(xué)院全局導(dǎo)航跳板式(Springboard)14 One of the reasons for its popularity was that itworked equally well across platf

6、orms. 跳板式模式流行的一個地工作。是它在多個平臺上都能很好嶺南師范學(xué)院全局導(dǎo)航跳板式(Springboard)15 It was also popular because up to nine options (in a 3×3 grid) could be displayed, compared to the limits of three to five tabs imposed by iOS and Android tabbars. 同時相比于iOS和欄上有限的3到5個選項卡，跳板式一個頁面上可以放置多達(dá)9個選項。嶺南師范學(xué)院全局導(dǎo)航跳板式(Springboard)16G

7、owalla for AndroidTrulia for iOS嶺南師范學(xué)院全局導(dǎo)航跳板式(Springboard)17 The main drawback of the Springboard pattern is that it flattens all options to the same level of importance. 跳板式設(shè)計模式的主要缺點(diǎn)是全部選項被扁平化，沒有任何層級關(guān)系和優(yōu)先級。嶺南師范學(xué)院全局導(dǎo)航跳板式(Springboard)18在三大操作系統(tǒng)中使用的跳板式導(dǎo)航模式嶺南師范學(xué)院全局導(dǎo)航卡片式(Card)19 Card navigation is based o

8、n a card deck metaphor, including common card deck manipulations such asstacking, shuffling, discarding, and flipping. 卡片式導(dǎo)航的原型是牌，模仿了牌中常見的切牌、洗牌、棄牌和翻牌等。嶺南師范學(xué)院全局導(dǎo)航卡片式(Card)20 卡片模式最早流行于Palm webOS系統(tǒng)中，每一個應(yīng)用像紙牌一樣。嶺南師范學(xué)院全局導(dǎo)航卡片式(Card)21Now的發(fā)布重新流行起來， 卡片模式隨著Now以一連串的信息卡片堆疊的方式展示了進(jìn)入應(yīng)用的。嶺南師范學(xué)院全局導(dǎo)航卡片式(Card)22不能幫助就

9、向下滑動卡片向右滑動收藏當(dāng)前卡片嶺南師范學(xué)院全局導(dǎo)航卡片式(Card)23嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List)24 The Listpattern is similar to the Springboard inthat each list item is a launch point into the application, and switching modules requires navigating back to the list. 列表菜單式中的每一個列表項都是進(jìn)入該應(yīng)用各項功能的，并且模塊間的切換需要返回到列表主頁。嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List)25 In

10、a hierarchical app, users navigate by making one choice per screen until they reach their destination. To navigate to another destination, users must retrace some of their stepsor start over from the beginning and make different choices. 蘋果iOS設(shè)計指南嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List)26點(diǎn)擊“Home”返回嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List

11、)27iOS版Day One嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List)28 The Listnavigation pattern is similar in Android,but the Back button is called the Up button, conveyingthe patterns hierarchical structure.中，列表菜單式導(dǎo)航與iOS中差不多，只是表 在示返回到上一級的返回按鈕被稱作向上按鈕。嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List)29 The Up button is used to navigate within an app based on

12、 the hierarchical relationships between screens. For instance, if screen A displays a list of items, and selecting an item leads to screen B then screen B should offer an Up button that returns to screen A. 安卓設(shè)計指南嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List)30點(diǎn)擊向上按鈕返回嶺南師范學(xué)院全局導(dǎo)航列表菜單式(List)31嶺南師范學(xué)院全局導(dǎo)航(Dashboard)式32 With a q

13、uick glance, a good Dashboard gives the user a snapshot of the most relevant information she needs to know, without making her navigate into anotherscreen.式與跳板式和列表菜單式類似，優(yōu)秀的可以讓用戶一眼看到他最需要的信息概覽，而不用跳轉(zhuǎn)到另一個頁面。嶺南師范學(xué)院全局導(dǎo)航(Dashboard)式33Mint for iOS嶺南師范學(xué)院全局導(dǎo)航(Dashboard)式34嶺南師范學(xué)院全局導(dǎo)航陳列館式(Gallery)35 The Gallery

14、 pattern displays live contentlike news stories, recipes, or photosarranged in a grid, acarousel, or a slideshow. 陳列館式設(shè)計可以用來呈現(xiàn)實時內(nèi)容，比如、菜譜或者，可以采用網(wǎng)格布局或者布局，還可以使用幻燈片進(jìn)行展示。嶺南師范學(xué)院全局導(dǎo)航陳列館式(Gallery)36彼此、無層級關(guān)系的內(nèi)容項嶺南師范學(xué)院全局導(dǎo)航陳列館式(Gallery)37浮層式文本嶺南師范學(xué)院全局導(dǎo)航陳列館式(Gallery)38嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)39 就選項卡式設(shè)計而言，安卓、iOS及Wind

15、ows都有各自特定的術(shù)語和設(shè)計規(guī)范。 下面我們以iOS安卓Windows Phone的順序分別理解它們的設(shè)計原則。嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)40 Since the first release of iOS, Apple has the Tab Bar for navigating flat apps. 蘋果自第1版iOS系統(tǒng)發(fā)布以來，就建議我們把為扁平式應(yīng)用的導(dǎo)航。mended欄作嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)41 In an app with a flat information structure, users can navigate directly from o

16、ne primary category to another because all primary categories are accessible from the main screen. Music and App Store are good examples of apps that use a flat structure. 蘋果iOS設(shè)計指南嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)42舊版中采用的漢堡菜單新版中采用的選項卡式嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)43嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)44iOS版沃爾瑪iOS版嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)45 理解i

17、OS中的在iOS中欄與工具欄之間的區(qū)別非常地重要。欄的作用是在應(yīng)用的主要類別之間進(jìn)行切換；工具欄上顯示的是工具，或者是指向特定的頁面的可執(zhí)行的操作。我是工具欄嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)46 Some applications, rely so heavily on the user taking a single action (like taking a picture or starting a run) that they place calls to action in their Tab Bars. 某些應(yīng)用由于非常依賴于用戶去執(zhí)行例如拍照或者開始跑步之類的單一操作，因而

18、將此類操作作為行為召喚按鈕放置在欄上。嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)47RunKeeper中的跑步“行為召 喚”中的拍照“行為召喚”嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)48要確保在視覺上突出選中的選項卡嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)49為主導(dǎo)航提供了三種不同的選項卡菜單模式：Fixed Tabs固定選項卡Spinners下拉菜單Navigation Drawers導(dǎo)航抽屜嶺南師范學(xué)院選項卡全局導(dǎo)航選項卡式(Tab)50嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)51 在以下場景中使用固定選項卡：預(yù)計你的用戶會經(jīng)常切換試圖。頂級內(nèi)容視圖有限。你想讓用戶清楚地知道有可供選擇的視圖。嶺南

19、師范學(xué)院全局導(dǎo)航選項卡式(Tab)52以3個圖標(biāo)作為固定選項卡以4組文字作為固定選項卡嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)53錯誤的使用滾動標(biāo)簽欄作為主導(dǎo)航嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)54 In Windows Phone, the Tabis called App Tabs,and tabs that extend offscreen are accessible via panning, through the Pivot control. Windows Phone系統(tǒng)中的選項卡菜單被稱為應(yīng)用選項卡，通過水平滾動來瀏覽延伸至屏幕之外的選項卡頁面。嶺南師范學(xué)院全局導(dǎo)航選項卡式(

20、Tab)55 You can use the Pivot control to implement the App Tab UI style. This control allows the user to navigate right and left through each page (called a pivot page).Windows Phone設(shè)計指南嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)56Netfix中的應(yīng)用選項卡嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)57 This Retracting Tab design is showing up in native apps too

21、, when the user swipes down to browse content the Tabs retract, when the user swipes up the Tabs reappear. 在某些應(yīng)用中會看到折疊選項卡式設(shè)計，當(dāng)向下滑動瀏覽內(nèi)容時，選項卡收起來，當(dāng)向上滑動時，選項卡重新顯示。嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)58向上滑動時顯示選項卡嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)59 Configurable Tabs are another variation of thestandard Tab. 可配置選項卡式是標(biāo)準(zhǔn)選項卡菜單式的另一個變種，例如聚合應(yīng)用

22、中添加一個頻道就增加一個新的選項卡，選項卡過多時，則變成滾動選項卡。嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)60Frequency中的可配置選項卡嶺南師范學(xué)院全局導(dǎo)航選項卡式(Tab)61嶺南師范學(xué)院全局導(dǎo)航隱喻式(Skeuomorphic)62 The Skeuomorphic pattern is characterized by an interface designed to match its real-world counterpart. 隱喻式（擬物式）的特征是用頁面來模仿應(yīng)用的隱喻對象。嶺南師范學(xué)院全局導(dǎo)航隱喻式(Skeuomorphic)63 Some apps can sti

23、ll aid usability by emulating objects and tools from the real world. 雖然時下正流行扁平化設(shè)計，但是某些應(yīng)用仍然能夠通過模實世界的物體和工具來提升可用性。嶺南師范學(xué)院全局導(dǎo)航隱喻式(Skeuomorphic)64中的隱喻式導(dǎo)航設(shè)計嶺南師范學(xué)院全局導(dǎo)航隱喻式(Skeuomorphic)65音樂軟件中的隱喻式導(dǎo)航設(shè)計嶺南師范學(xué)院全局導(dǎo)航隱喻式(Skeuomorphic)66Awesome Note中的文件夾式設(shè)計Newsstand中的書架式設(shè)計嶺南師范學(xué)院全局導(dǎo)航隱喻式(Skeuomorphic)67FlightBoard中的航班

24、公告牌式設(shè)計嶺南師范學(xué)院全局導(dǎo)航隱喻式(Skeuomorphic)68嶺南師范學(xué)院 Exercise restraint in choosing the metaphor to mthe navigation ona poor implementation can result in the Novel Notion antipattern. 一定要謹(jǐn)慎地使用隱喻式導(dǎo)航。 蹩腳的模仿很可能會造成標(biāo)新立異的飯模式。主導(dǎo)航模式瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)下拉菜單式(Toggle轉(zhuǎn)盤菜單式(Pie)嶺南師范學(xué)院主導(dǎo)航模式瞬時導(dǎo)航70 The term transient means

25、staying a short time, they are hidden until we reveal them; then we make a selection and they disappear again. “瞬時”的意思是短暫停留，也就是說瞬時導(dǎo)航只有在我們需要的時候才消失。，在我們做出選擇后，它會再次嶺南師范學(xué)院主導(dǎo)航模式瞬時導(dǎo)航71 常見的用于主導(dǎo)航的瞬時導(dǎo)航有：Side Drawers側(cè)邊抽屜式Toggles下拉菜單式Pies轉(zhuǎn)盤菜單式嶺南師范學(xué)院瞬時導(dǎo)航瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)72 側(cè)邊抽屜式有兩種常見的風(fēng)格： 浮層(Overlay)，通過輕滑或點(diǎn)擊

26、打開抽屜，抽屜部分遮擋或覆蓋原來頁面的內(nèi)容； 嵌入層(Inlay)，通過輕滑、平移或點(diǎn)擊打開抽屜，把原先的頁面內(nèi)容部分推出屏幕外。嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)73RetailMeNot中的浮層式側(cè)邊抽屜嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)74Path中的邊抽屜側(cè)嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)75 Upon first launch of your app, introduce the user to the navigation drawer by automatically opening it. This ensur

27、es that users know about the navigation drawer and prompts them to learn about the structure of your app by exploring its content. 安卓設(shè)計指南嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)76側(cè)邊抽屜可以在左側(cè)，也可以在右側(cè)嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)77可能會跟操作系統(tǒng)的一些操作側(cè)邊抽屜千萬不要放在底端嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)78側(cè)邊抽屜還可以顯示導(dǎo)航以外的信息嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(

28、Side Drawer)79側(cè)邊抽屜還可以擁有多個層級嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)80側(cè)邊抽屜還可以在級的場景中進(jìn)行切換嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)81嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)82帶有3D效果的側(cè)邊抽屜嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)83讓人非常疑惑的側(cè)邊抽屜嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)84嶺南師范學(xué)院瞬時導(dǎo)航側(cè)邊抽屜式(Side Drawer)85嶺南師范學(xué)院 Then, if a Side Drawer seems to make sense, you

29、 should prototype and test a couple of variations to see which one works best. 如果側(cè)邊抽屜行得通，你應(yīng)當(dāng)做出幾種不同的應(yīng)用原型進(jìn)試，看看哪一種效果最好。瞬時導(dǎo)航下拉菜單式86(Toggle)響應(yīng)式網(wǎng)頁設(shè)計中的下來菜單嶺南師范學(xué)院瞬時導(dǎo)航下拉菜單式87(Toggle) Like the Side Drawer, the Togglecan be an inlaythat pushes the content down below the, or anoverlay that appears as a layer ab

30、ove the content. 與側(cè)邊抽屜式一樣，下拉菜單也可以是的，將頁面內(nèi)容推到菜單之下，或者可以是浮層式的，菜單層浮于內(nèi)容頁之上。嶺南師范學(xué)院瞬時導(dǎo)航下拉菜單式88(Toggle)APP中浮層式下拉菜單更為常見嶺南師范學(xué)院瞬時導(dǎo)航下拉菜單式89(Toggle)嶺南師范學(xué)院瞬時導(dǎo)航下拉菜單式90(Toggle)嶺南師范學(xué)院瞬時導(dǎo)航下拉菜單式91(Toggle)下拉菜單僅可用于同一類別下的不同視圖間進(jìn)行切換嶺南師范學(xué)院瞬時導(dǎo)航轉(zhuǎn)盤菜單式(Pie)92嶺南師范學(xué)院瞬時導(dǎo)航轉(zhuǎn)盤菜單式(Pie)93嶺南師范學(xué)院瞬時導(dǎo)航轉(zhuǎn)盤菜單式(Pie)94嶺南師范學(xué)院 If you have an appli

31、cation with flat information architecture, consider the Tabfamiliar to all usersinstead. 如果你的APP的信息結(jié)構(gòu)是扁平化的，那么可以考慮使用對于多數(shù)用戶來說都很熟悉的選項卡式菜單。次級導(dǎo)航模式翻頁式(Page Swiping)滾動選項卡(Scrolling Tabs)伸縮面板式(Expand/Collapse Panel)嶺南師范學(xué)院次級導(dǎo)航模式(Secondary Navigation)96 此處的次級導(dǎo)航指的是在一個選中的類別內(nèi)活動的導(dǎo)航。Springboard作為次級導(dǎo)航Tab作為主導(dǎo)航嶺南師范學(xué)院

32、次級導(dǎo)航模式(Secondary Navigation)97 All of the primary navigation patterns can also serve as secondary navigation patterns. 所有主導(dǎo)航模式同樣可以用作次級導(dǎo)航模式。嶺南師范學(xué)院次級導(dǎo)航模式(Secondary Navigation)98 It is common to see Tabs with Tabs, Tabs with Lists, Tabs with a Dashboard, a Springboard with a Gallery,and so on. 選項卡式導(dǎo)航中可

33、以包含選項卡、列表或者板式導(dǎo)航里包含陣列館式等等。，跳嶺南師范學(xué)院次級導(dǎo)航模式(Secondary Navigation)99Gallery作為次級導(dǎo)航Side Drawer作為主導(dǎo)航嶺南師范學(xué)院次級導(dǎo)航模式(Secondary Navigation)100Springboard作為次級導(dǎo)航Side Drawer作為主導(dǎo)航嶺南師范學(xué)院次級導(dǎo)航模式翻頁式(Page Swiping)101 Page Swiping can be used to navigate quickly through content using the swipe gesture. 翻頁式導(dǎo)航可以通過滑動手勢快速在內(nèi)容頁

34、間進(jìn)行導(dǎo)航。嶺南師范學(xué)院次級導(dǎo)航模式翻頁式(Page Swiping)102 The most common way to communicate this navigation pattern is via page indicators (the iOS term for the horizontal line of little dots). 體現(xiàn)這種導(dǎo)航模式的最常見的方式是利用頁面指示器。嶺南師范學(xué)院次級導(dǎo)航模式翻頁式(Page Swiping)103iOS版Audibleing作航Tab作為主導(dǎo)航嶺南師范學(xué)院次級導(dǎo)航模式翻頁式(Page Swiping)104安卓版谷歌地圖通過滑動翻

35、頁切換搜索結(jié)果通過滑動翻頁查看其他郵件嶺南師范學(xué)院次級導(dǎo)航模式翻頁式(Page Swiping)105缺乏必要的頁面指示器嶺南師范學(xué)院次級導(dǎo)航模式翻頁式(Page Swiping)106嶺南師范學(xué)院次級導(dǎo)航模式翻頁式(Page Swiping)107嶺南師范學(xué)院次級導(dǎo)航模式滾動選項卡(Scrolling Tabs)108 Scrolling Tabs are useful for displaying multiple categories or views within a specific module. 滾動選項卡非常適合用于在某一個模塊中顯示多個類別或者視圖。嶺南師范學(xué)院次級導(dǎo)航模式滾

36、動選項卡(Scrolling Tabs)109 Scrolling Tabs are usually thinner than standard Tab Bars since they are not necessarily touch targets, moretypically, they are an affordance to swipe horizontally. 滾動選項卡通常會比標(biāo)準(zhǔn)的欄要窄一些，因為它們沒有必要作為可以觸摸的對象，更典型的是將它們作為水平滾動指示器。嶺南師范學(xué)院次級導(dǎo)航模式滾動選項卡(Scrolling Tabs)110Scrolling Tabs作為次級導(dǎo)航視覺設(shè)計上要清晰地指出選中的項嶺南師范學(xué)院次級導(dǎo)航模