第6讲移动u设计第六

1、UI设计Mobile User InterfaceDesign（主讲：）移动应用UI设计模式：导航篇本讲内容摘要2岭南师范学院主导航模式全局导航跳板式(Springboard) 列表菜单式(List仪表式(Dashboard) 陈列馆式(Gallery)选项卡式(Tab) 隐喻式(Skeuomorphic)岭南师范学院用户遇到的问题安装某款APP时，是如何 作为用户，他们在决定是否做出决定的呢？评分挺高哦，下载下来用一用！岭南师范学院用户遇到的问题 而对于一款评分较低的软件，往往都可以从用户的评论中找到低分的。关键功能软件界面设计使用通用的UI设计模式可以解决这些常见的问题。导航欠佳岭南师范学

2、院主导航模式全局导航6 As soon as you open an app with persistent navigation, it is immediately clear what the primary navigation options are. 只要打开具备全局导航的应用，主导航的选项立刻一目了然。岭南师范学院主导航模式瞬时导航7 Transient navigation, however, must be explicitly revealed with a tap or gesture. 而瞬时导航则必须通过点击或者手势才能够。岭南师范学院主导航模式瞬时导航8 These

3、 patterns arise from the constraints of smartphone screen sizes, which have pushed mobiledesigners to think “outside of the box”.十分有限（通常4到6英寸之 由于智能的屏幕间），这使得移动应用设计师们不得不思考如何打破“屏幕”框架，在有限的屏幕空间上承载足够多的内容。岭南师范学院学会跳出既有框架9 下面我们先做一个有趣的小练习：用4条或者更少的直线将全部的9个圆点连接起来，要一笔完成，且各线之间不能重叠。岭南师范学院学会跳出既有框架10 经过许久的思索与尝试之后，我们

4、会发现解决这个谜题的唯一办法就是打破由9个点构建成的虚拟的边界。岭南师范学院学会跳出既有框架11画布”，即Off- 在移动领域，这种思想称作“canvas。 现在安卓与iOS上流行的侧边抽屉（汉堡菜单）、Windows Phone中的全景控件等都是这种设计思想的体现。WP中的全景控件岭南师范学院全局导航与瞬时导航的抉择12应用层次应用的菜单分类是同级的还是有优先级的？主要的类别是否只有少数几个？如果这些问题的回答中出现了是的话，则需要使用全局导航。快速你的用户是否需要菜单一直处于可见状态以便快速呢？状态提示菜单分类有没有状态提示，比如论等等？新评岭南师范学院全局导航跳板式(Springboar

5、d)13 The Springboard pattern, also called a Launchpad, is alanding screen with options that ainto the application.launch points 跳板式设计模式，也称作启动面板(Launchpad)，指的是一个带有菜单选项的登陆界面，而菜单选项是进入应用各个功能的起点。岭南师范学院全局导航跳板式(Springboard)14 One of the reasons for its popularity was that itworked equally well across platf

6、orms. 跳板式模式流行的一个地工作。是它在多个平台上都能很好岭南师范学院全局导航跳板式(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个选项卡，跳板式一个页面上可以放置多达9个选项。岭南师范学院全局导航跳板式(Springboard)16G

7、owalla for AndroidTrulia for iOS岭南师范学院全局导航跳板式(Springboard)17 The main drawback of the Springboard pattern is that it flattens all options to the same level of importance. 跳板式设计模式的主要缺点是全部选项被扁平化，没有任何层级关系和优先级。岭南师范学院全局导航跳板式(Springboard)18在三大操作系统中使用的跳板式导航模式岭南师范学院全局导航卡片式(Card)19 Card navigation is based o

8、n a card deck metaphor, including common card deck manipulations such asstacking, shuffling, discarding, and flipping. 卡片式导航的原型是牌，模仿了牌中常见的切牌、洗牌、弃牌和翻牌等。岭南师范学院全局导航卡片式(Card)20 卡片模式最早流行于Palm webOS系统中，每一个应用像纸牌一样。岭南师范学院全局导航卡片式(Card)21Now的发布重新流行起来， 卡片模式随着Now以一连串的信息卡片堆叠的方式展示了进入应用的。岭南师范学院全局导航卡片式(Card)22不能帮助就

9、向下滑动卡片向右滑动收藏当前卡片岭南师范学院全局导航卡片式(Card)23岭南师范学院全局导航列表菜单式(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. 列表菜单式中的每一个列表项都是进入该应用各项功能的，并且模块间的切换需要返回到列表主页。岭南师范学院全局导航列表菜单式(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设计指南岭南师范学院全局导航列表菜单式(List)26点击“Home”返回岭南师范学院全局导航列表菜单式(List

11、)27iOS版Day One岭南师范学院全局导航列表菜单式(List)28 The Listnavigation pattern is similar in Android,but the Back button is called the Up button, conveyingthe patterns hierarchical structure.中，列表菜单式导航与iOS中差不多，只是表 在示返回到上一级的返回按钮被称作向上按钮。岭南师范学院全局导航列表菜单式(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. 安卓设计指南岭南师范学院全局导航列表菜单式(List)30点击向上按钮返回岭南师范学院全局导航列表菜单式(List)31岭南师范学院全局导航(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.式与跳板式和列表菜单式类似，优秀的可以让用户一眼看到他最需要的信息概览，而不用跳转到另一个页面。岭南师范学院全局导航(Dashboard)式33Mint for iOS岭南师范学院全局导航(Dashboard)式34岭南师范学院全局导航陈列馆式(Gallery)35 The Gallery

14、 pattern displays live contentlike news stories, recipes, or photosarranged in a grid, acarousel, or a slideshow. 陈列馆式设计可以用来呈现实时内容，比如、菜谱或者，可以采用网格布局或者布局，还可以使用幻灯片进行展示。岭南师范学院全局导航陈列馆式(Gallery)36彼此、无层级关系的内容项岭南师范学院全局导航陈列馆式(Gallery)37浮层式文本岭南师范学院全局导航陈列馆式(Gallery)38岭南师范学院全局导航选项卡式(Tab)39 就选项卡式设计而言，安卓、iOS及Wind

15、ows都有各自特定的术语和设计规范。 下面我们以iOS安卓Windows Phone的顺序分别理解它们的设计原则。岭南师范学院全局导航选项卡式(Tab)40 Since the first release of iOS, Apple has the Tab Bar for navigating flat apps. 苹果自第1版iOS系统发布以来，就建议我们把为扁平式应用的导航。mended栏作岭南师范学院全局导航选项卡式(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设计指南岭南师范学院全局导航选项卡式(Tab)42旧版中采用的汉堡菜单新版中采用的选项卡式岭南师范学院全局导航选项卡式(Tab)43岭南师范学院全局导航选项卡式(Tab)44iOS版沃尔玛iOS版岭南师范学院全局导航选项卡式(Tab)45 理解i

17、OS中的在iOS中栏与工具栏之间的区别非常地重要。栏的作用是在应用的主要类别之间进行切换；工具栏上显示的是工具，或者是指向特定的页面的可执行的操作。我是工具栏岭南师范学院全局导航选项卡式(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. 某些应用由于非常依赖于用户去执行例如拍照或者开始跑步之类的单一操作，因而

18、将此类操作作为行为召唤按钮放置在栏上。岭南师范学院全局导航选项卡式(Tab)47RunKeeper中的跑步“行为召 唤”中的拍照“行为召唤”岭南师范学院全局导航选项卡式(Tab)48要确保在视觉上突出选中的选项卡岭南师范学院全局导航选项卡式(Tab)49为主导航提供了三种不同的选项卡菜单模式：Fixed Tabs固定选项卡Spinners下拉菜单Navigation Drawers导航抽屉岭南师范学院选项卡全局导航选项卡式(Tab)50岭南师范学院全局导航选项卡式(Tab)51 在以下场景中使用固定选项卡：预计你的用户会经常切换试图。顶级内容视图有限。你想让用户清楚地知道有可供选择的视图。岭南

19、师范学院全局导航选项卡式(Tab)52以3个图标作为固定选项卡以4组文字作为固定选项卡岭南师范学院全局导航选项卡式(Tab)53错误的使用滚动标签栏作为主导航岭南师范学院全局导航选项卡式(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系统中的选项卡菜单被称为应用选项卡，通过水平滚动来浏览延伸至屏幕之外的选项卡页面。岭南师范学院全局导航选项卡式(

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设计指南岭南师范学院全局导航选项卡式(Tab)56Netfix中的应用选项卡岭南师范学院全局导航选项卡式(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. 在某些应用中会看到折叠选项卡式设计，当向下滑动浏览内容时，选项卡收起来，当向上滑动时，选项卡重新显示。岭南师范学院全局导航选项卡式(Tab)58向上滑动时显示选项卡岭南师范学院全局导航选项卡式(Tab)59 Configurable Tabs are another variation of thestandard Tab. 可配置选项卡式是标准选项卡菜单式的另一个变种，例如聚合应用

22、中添加一个频道就增加一个新的选项卡，选项卡过多时，则变成滚动选项卡。岭南师范学院全局导航选项卡式(Tab)60Frequency中的可配置选项卡岭南师范学院全局导航选项卡式(Tab)61岭南师范学院全局导航隐喻式(Skeuomorphic)62 The Skeuomorphic pattern is characterized by an interface designed to match its real-world counterpart. 隐喻式（拟物式）的特征是用页面来模仿应用的隐喻对象。岭南师范学院全局导航隐喻式(Skeuomorphic)63 Some apps can sti

23、ll aid usability by emulating objects and tools from the real world. 虽然时下正流行扁平化设计，但是某些应用仍然能够通过模实世界的物体和工具来提升可用性。岭南师范学院全局导航隐喻式(Skeuomorphic)64中的隐喻式导航设计岭南师范学院全局导航隐喻式(Skeuomorphic)65音乐软件中的隐喻式导航设计岭南师范学院全局导航隐喻式(Skeuomorphic)66Awesome Note中的文件夹式设计Newsstand中的书架式设计岭南师范学院全局导航隐喻式(Skeuomorphic)67FlightBoard中的航班

24、公告牌式设计岭南师范学院全局导航隐喻式(Skeuomorphic)68岭南师范学院 Exercise restraint in choosing the metaphor to mthe navigation ona poor implementation can result in the Novel Notion antipattern. 一定要谨慎地使用隐喻式导航。 蹩脚的模仿很可能会造成标新立异的饭模式。主导航模式瞬时导航侧边抽屉式(Side Drawer)下拉菜单式(Toggle转盘菜单式(Pie)岭南师范学院主导航模式瞬时导航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. “瞬时”的意思是短暂停留，也就是说瞬时导航只有在我们需要的时候才消失。，在我们做出选择后，它会再次岭南师范学院主导航模式瞬时导航71 常见的用于主导航的瞬时导航有：Side Drawers侧边抽屉式Toggles下拉菜单式Pies转盘菜单式岭南师范学院瞬时导航瞬时导航侧边抽屉式(Side Drawer)72 侧边抽屉式有两种常见的风格： 浮层(Overlay)，通过轻滑或点击

26、打开抽屉，抽屉部分遮挡或覆盖原来页面的内容； 嵌入层(Inlay)，通过轻滑、平移或点击打开抽屉，把原先的页面内容部分推出屏幕外。岭南师范学院瞬时导航侧边抽屉式(Side Drawer)73RetailMeNot中的浮层式侧边抽屉岭南师范学院瞬时导航侧边抽屉式(Side Drawer)74Path中的边抽屉侧岭南师范学院瞬时导航侧边抽屉式(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. 安卓设计指南岭南师范学院瞬时导航侧边抽屉式(Side Drawer)76侧边抽屉可以在左侧，也可以在右侧岭南师范学院瞬时导航侧边抽屉式(Side Drawer)77可能会跟操作系统的一些操作侧边抽屉千万不要放在底端岭南师范学院瞬时导航侧边抽屉式(Side Drawer)78侧边抽屉还可以显示导航以外的信息岭南师范学院瞬时导航侧边抽屉式(

28、Side Drawer)79侧边抽屉还可以拥有多个层级岭南师范学院瞬时导航侧边抽屉式(Side Drawer)80侧边抽屉还可以在级的场景中进行切换岭南师范学院瞬时导航侧边抽屉式(Side Drawer)81岭南师范学院瞬时导航侧边抽屉式(Side Drawer)82带有3D效果的侧边抽屉岭南师范学院瞬时导航侧边抽屉式(Side Drawer)83让人非常疑惑的侧边抽屉岭南师范学院瞬时导航侧边抽屉式(Side Drawer)84岭南师范学院瞬时导航侧边抽屉式(Side Drawer)85岭南师范学院 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. 如果侧边抽屉行得通，你应当做出几种不同的应用原型进试，看看哪一种效果最好。瞬时导航下拉菜单式86(Toggle)响应式网页设计中的下来菜单岭南师范学院瞬时导航下拉菜单式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. 与侧边抽屉式一样，下拉菜单也可以是的，将页面内容推到菜单之下，或者可以是浮层式的，菜单层浮于内容页之上。岭南师范学院瞬时导航下拉菜单式88(Toggle)APP中浮层式下拉菜单更为常见岭南师范学院瞬时导航下拉菜单式89(Toggle)岭南师范学院瞬时导航下拉菜单式90(Toggle)岭南师范学院瞬时导航下拉菜单式91(Toggle)下拉菜单仅可用于同一类别下的不同视图间进行切换岭南师范学院瞬时导航转盘菜单式(Pie)92岭南师范学院瞬时导航转盘菜单式(Pie)93岭南师范学院瞬时导航转盘菜单式(Pie)94岭南师范学院 If you have an appli

31、cation with flat information architecture, consider the Tabfamiliar to all usersinstead. 如果你的APP的信息结构是扁平化的，那么可以考虑使用对于多数用户来说都很熟悉的选项卡式菜单。次级导航模式翻页式(Page Swiping)滚动选项卡(Scrolling Tabs)伸缩面板式(Expand/Collapse Panel)岭南师范学院次级导航模式(Secondary Navigation)96 此处的次级导航指的是在一个选中的类别内活动的导航。Springboard作为次级导航Tab作为主导航岭南师范学院

32、次级导航模式(Secondary Navigation)97 All of the primary navigation patterns can also serve as secondary navigation patterns. 所有主导航模式同样可以用作次级导航模式。岭南师范学院次级导航模式(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. 选项卡式导航中可

33、以包含选项卡、列表或者板式导航里包含阵列馆式等等。，跳岭南师范学院次级导航模式(Secondary Navigation)99Gallery作为次级导航Side Drawer作为主导航岭南师范学院次级导航模式(Secondary Navigation)100Springboard作为次级导航Side Drawer作为主导航岭南师范学院次级导航模式翻页式(Page Swiping)101 Page Swiping can be used to navigate quickly through content using the swipe gesture. 翻页式导航可以通过滑动手势快速在内容页

34、间进行导航。岭南师范学院次级导航模式翻页式(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). 体现这种导航模式的最常见的方式是利用页面指示器。岭南师范学院次级导航模式翻页式(Page Swiping)103iOS版Audibleing作航Tab作为主导航岭南师范学院次级导航模式翻页式(Page Swiping)104安卓版谷歌地图通过滑动翻

35、页切换搜索结果通过滑动翻页查看其他邮件岭南师范学院次级导航模式翻页式(Page Swiping)105缺乏必要的页面指示器岭南师范学院次级导航模式翻页式(Page Swiping)106岭南师范学院次级导航模式翻页式(Page Swiping)107岭南师范学院次级导航模式滚动选项卡(Scrolling Tabs)108 Scrolling Tabs are useful for displaying multiple categories or views within a specific module. 滚动选项卡非常适合用于在某一个模块中显示多个类别或者视图。岭南师范学院次级导航模式滚

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. 滚动选项卡通常会比标准的栏要窄一些，因为它们没有必要作为可以触摸的对象，更典型的是将它们作为水平滚动指示器。岭南师范学院次级导航模式滚动选项卡(Scrolling Tabs)110Scrolling Tabs作为次级导航视觉设计上要清晰地指出选中的项岭南师范学院次级导航模