提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
本节主要介绍我们的应用结构,包括移动端应用和桌面端应用的架构,涵盖了下面的几点指导。
应用有很多种,分别满足不同的需求:
开始界面的布局需要花更多的心思。这是用户打开应用看到的第一个画面,需要能够满足新用户,兼顾老用户。
问自己这样一个问题:“一般用户最想用我的应用来干什么?”,据此构建开始界面的用户体验。
很多优秀的应用都关注内容的呈现。尽量避免纯导航界面,,在开始界面就以内容为核心,让用户立即与内容交互,获取核心体验。选择适合数据呈现和屏幕尺寸的布局。
跟工具栏一样,在应用的操作栏上可以组织排列一些重要操作的按钮。理想的导航放置区域是屏幕的顶端,包括标签的切换、左侧侧拉导航,都可以放在屏幕顶端。如果你的内容是可以搜索的,在应用操作栏中要包含搜索按钮,用户可以快速搜索,直达内容。
当你的应用有大量的功能和操作时,关键点在于:要适度指引用户,将用户的注意力焦点转移到你想要的地方。在内容区域,要凸显重要的导航。一些特色功能可以用悬浮按钮来表示。在你的应用中不要强调那些不常用的操作路径。
最顶层的界面向用户传递应用最主要的功能和内容。有些应用功能会专注内容,简化导航。而另外一些应用中,顶层界面可能会包含多个视图,务必确保这种情况下,用户可以在多视图之间高效地导航。
选择最适合您应用需求的导航的方式。
将所有必要导航元素内联到内容中,能极大提高导航的可见性。当应用的导航架构非常简单时,可以采用这种方法。然而,当导航系统过于庞大时,大量的导航路径会占据内容的空间,且导航路径可能会全屏散布,而不是集中在某个位置,方便用户导航。
在这些情况下使用内容内部导航
如果你应用中功能区域很少,且层级较浅,可使用在顶层界面中使用标签选项卡,只需轻轻点击或滑动便可切换界面。。然而,使用标签选项卡会占据大量空间,不过当标签选项较少时,这种导航设计模式较为高效。
在这些情况下使用标签选项卡:
左侧导航面板可以同时显示大量的导航目标。当你的应用功能围绕主界面而构建时,这种导航模式极为有效,然后将抽屉可以作为一个不经常访问的链接索引。如果你的应用程序需要从较低级别的层级跨越信息架构层级直达另一个页面时,这种快捷导航方式让用户可以更灵活操作。然而,这种导航模式并不明显,需要一定的学习成本,让用户熟悉这种导航模式。
在这些情况下使用抽屉:
不管选择何种顶层视图设计策略,都推荐内容内联导航,可以迅速的导航至相关内容。例如,推荐同一歌手的其他歌曲, 根据浏览历史推荐相关产品,例如浏览一个用户发布的其他内容。这些关联导航让相关内容可以更自然的进一步呈递。
该结构包括一个永久的应用栏和悬浮操作按钮。一个附加的底部栏,里面可以添加一些附加功能和操作。提供了用户可以导航的侧拉菜单,同时侧拉菜单会覆盖其他元素结构。
该结构包括一个永久的应用栏和悬浮操作按钮。应用栏吸收了平板电脑和手机的底部元素。一个附加的底部栏,里面可以添加一些附加功能和操作。左侧为导航菜单,用户如需访问,会覆盖所有其他结构元件。右导航菜单可以暂时访问或固定作为永久陈列。
该结构包括一个永久的应用栏和悬浮操作按钮。操作栏吸收从平板电脑和手机的底部元素。窗口控件可被归纳到操作栏中。侧面导航菜单可以暂时访问或固定作永久陈列。侧面导航菜单以及内容可以有自己的二级工具栏,显示标签选项卡,样式,或辅助操作。
主要由水平或垂直的分割线来定义。
划分的区域不宜太多,否则会导致L型布局(就是页面分散)。相反,用空白字符语言(WhiteSpace,是一种只用空白字符(空格,TAB和回车)编程的语言:译者注)来描绘中间地带。
卡片和悬浮按钮,打破页面区域。
使用卡片来组织内容,可满足一些特殊的交互行为,也可以组织信息。卡片式布局需要大量的留白空间,也需要分割线来划分清晰。
工具栏具有多种用途,适用于应用程序的各个区域。以下是您可以使用工具栏的一些例子。
宽屏、默认高度的应用栏
宽屏,高度扩展的应用栏 跨越多个列宽
单栏宽的工具栏,可以清晰的显示出层次结构
灵活的工具栏和卡片工具栏
悬浮工具栏
分离的工具栏面板
底部的工具栏,,紧挨着键盘或其他底层组件
底部工具
应用栏,前身为Android的操作栏,用于品牌推广,导航,搜索,和操作。
如果你的应用程序使用侧拉抽屉。那么点击Nav Icon(导航图标),便可打开侧拉,同时导航图标变为箭头。标题可以是一个应用程序的标题,页面标题或网页过滤器。
图标应该和应用相关操作有关联。点击Menu Icon(菜单图标)可出现一堆菜单项,其中包含帮助,设置和反馈。
亮色
暗色
有颜色
透明的
默认高度:
手机竖屏: 48dp
手机横屏: 56dp
平板电脑/台式机: 64dp
如要扩展应用栏,其高度等于默认高度加上内容增加量。
菜单是一个临时的卡片,总是覆盖应用栏,而不是作为应用栏的扩展。
左抽屉和右导航可以固定显示,也可以暂时悬空覆盖于主界面中。在左侧侧拉菜单主要用于导航。在右边的侧拉菜单主要展现二级内容相关信息。
侧滑抽屉会临时覆盖的内容。
移动端:侧导航宽度=屏幕宽度 - 应用栏的高度
示例:
Nexus 4: 304 dp
Nexus 5: 288 dp
iPhone: 264 dp
桌面:最大宽度左侧导航是400dp。右测导航可根据内容的不同而不同。
桌面端/平板电脑:固定,宽度应与列对齐。
浮动最大宽度:304dp
手机侧滑
平板侧滑
网页侧滑
Whiteframes提供了各种结构布局的的方法,分层和阴影。(均可以下载)基本框架
15 MB (.ai)
卡片内容的扩大和缩小
在移动设备中,覆盖的内容细节和聚焦的应用栏
移动端,拥有多个工具栏的内容重叠卡片和背景图像
扩展应用程序栏和右侧拉抽屉
左导航抽屉和瀑布流
资源列表
嵌入搜索字段的全屏背景图像 和 卡片式搜索结果
可扩展页脚的抽屉
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册