首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为任意屏幕尺寸构建 Android 界面

另一个案例是 Microsoft Outlook,它最近的更新通过使用双窗口布局充分发挥了大屏优势,可以同时查看收件箱和电子邮件内容,并能够拥有多个显示屏的某个单独窗口中独立撰写电子邮件。...其中,较小型代表了竖屏模式下手机的典型模式,中等型代表了大部分平板电脑和更大的可折叠设备的尺寸,展开型则代表了平板电脑或更大的可折叠设备,或是桌面设备横屏模式下的显示情况。...通过这种方式更新应用导航,无论屏幕尺寸如何都能够拥有相同的导航图,这意味着调整屏幕尺寸不会产生导航的变化,从而让用户感到困惑。...其中比较有趣的一点是思考应用如何在不同尺寸布局之间转换,例如对于可折叠手机,应用可能会从较大的屏幕变为较小的屏幕。...JetNews 最初以主页面和文章页面构建而成,每个页面都有自己的 ViewModel,导航和 ViewModel 之间的集成意味着两个页面始终不同的导航路径上。

4.2K20
您找到你想要的搜索结果了吗?
是的
没有找到

从零开始的Android:常见的UI设计模式

本教程中,您将学习其中的一些模式,以及它们如何通过使用应用程序时创造出色的体验来帮助用户。 1.主画面 用户在打开应用程序时看到的第一个屏幕通常是最重要的。...2.导航和动作 虽然您刚刚了解了可以应用程序主屏幕上使用的几种用户界面模式,但您可能仍需要一种导航至应用程序内其他部分的方法。...根据Android的材料设计指南,选项卡也可以存在于屏幕底部,如Google+应用程序所示。 导航抽屉 导航抽屉是一个视图,可以从应用程序的侧面滑出,以便向用户显示选项列表。...请勿将这种模式用于次要动作或任何具有破坏性的操作,因为浮动动作按钮旨在在使用时屏幕上有很强的显示感。 3....用户可以几行项目之间移动,然后水平滚动以查看他们可用的内容。 当用户找到要查看的项目时,可以选择该项目以查看详细信息屏幕,该屏幕提供了该项目的操作列表。

2.7K20

iOS 图标图像 (官方翻译版)

应用程序的名称显示屏幕下方的图标下方。不要包含重复该名称的不重要的单词,或告诉人们如何处理您的应用程序,例如“观看”或“播放”。...避免两个不同的图标设计之间切换,如固体版本和概述版本。 避免图标中加入文字。 如果您需要文字,请在图标下方显示标签,并相应调整其位置。 不要使用苹果硬件产品的副本。...如果您在应用程序完成启动时包含看起来不同的元素,则可能会在启动屏幕和应用程序的第一个屏幕之间遇到不愉快的闪光。 避免启动屏幕上包含文本。因为启动屏幕是静态的,任何显示的文本都不会被本地化。...例如,日历工具栏中使用“今天”,“日历”和“收件箱”。您还可以使用固定的空格元素来提供导航和工具栏图标之间的填充。 ?...相机导航栏和标签栏图标 拍摄照片或视频,或显示照片库。相机取消 ? 取消 关闭当前视图或结束编辑模式,而不保存更改。取消 ? 撰写导航栏和标签栏图标 在编辑模式下打开新视图。撰写 ?

3.6K40

C# WPF MVVM开发框架Caliburn.Micro Screens, Conductors 和 Composition⑦

屏幕集合中的任何内容都保持打开状态,但一次只有其中一项处于活动状态。像VS这样的MDI风格的应用程序中,导体将管理ScreenCollection成员之间切换活动屏幕。...首先,它们都继承自屏幕。这是这些实现的一个关键特性,因为它在屏幕和导体之间创建了一个复合模式。假设您正在构建一个基本的导航样式应用程序。...View-First 如果您正在使用WP7或Silverlight导航框架,您可能想知道是否/如何利用屏幕和导体。到目前为止,我一直假设外壳工程主要采用ViewModel优先的方法。...之前,我们Caliburn.Micro中讨论了屏幕和导体的理论和基本API。现在,我将介绍几个示例中的第一个。此特定示例演示如何使用导体和两个“页面”视图模型设置一个简单的导航样式shell。...该类MEF中注册为非共享,以便希望显示本地模态的应用程序的每个部分都将获得自己的实例,并能够维护自己的状态,如上面讨论的CustomServiceWModel所示。

2.5K20

处理视觉冲突 | 手势导航 (二)

自 API 1 以来,它们就以各种形式存在着,并且每当系统 UI 重叠显示您的应用上方时,这个方法就会被调用。常见的例子是下拉状态栏和导航栏,或者弹出屏幕软键盘 (IME)。...系统使用手势导航模式时 (即导航栏变成屏幕底部的一条粗线,也就是导航条),由于导航条有动态色彩调整功能,这个冲突可能不会那么明显。...但是请记住,系统 UI 可以随时切换为半透明遮盖模式,所以我们有必要彻底解决这个问题。 再强调一次,您现在最好在所有的导航模式下测试您的应用。 那么我们如何处理这种视觉冲突呢?...Android 10 带来了新的手势导航模式,允许用户通过手势动作,而不是导航按钮来进行导航: 从屏幕左/右边缘向中间滑动,相当于后退按钮 (Back)。...在有些显示模式下 (比如放松模式和沉浸模式),系统 UI 可能会根据情况可见与不可见之间切换 (如游戏、照片浏览、视频播放器等)。

2.8K30

Apriso开发葵花宝典之八Portal Session篇

屏幕之间导航屏幕上的交互以及业务逻辑的运行都是通过Actions完成的。...屏幕之间导航——按钮调用的“转到屏幕”动作 屏幕上的交互——切换选项卡 运行业务逻辑——调用标准操作的按钮 Apriso中一个应用通过一组页面组合形成一个页面流(Screen Flow)堆栈来实现...屏幕之间导航时,可以将屏幕推入堆栈或从堆栈中拉出并呈现给用户。当导航到普通屏幕时,屏幕被放置屏幕堆栈中,可以稍后返回。但是,您可以使用导航类型更改屏幕屏幕堆栈交互的方式。...客户端模式下则不执行任何操作,Screen Flows Server模式下也会刷新当前页面 返回Back:返回到堆栈中的上一个屏幕,并恢复门户会话变量Portal Session Variable 关闭所有...l 它可以包含业务控件 l 附加功能(例如,从数据库加载数据以显示) 门户会话变量处理 门户会话是视图操作和业务逻辑操作之间交换的所有变量的占位符/容器,门户会话变量用于不同操作之间交换数据,例如视图

15610

实践 | Google IO 应用是如何适配大尺寸屏幕 UI 的?

单窗格还是双窗格 日程功能中,我们用列表-详情的模式来展示信息的层次。屏幕设备上,显示区域被划分为左侧的会议列表和右侧的所选会议详细信息。...由于 Google I/O 应用使用了 Jetpack Navigation 实现不同界面之间的切换,这个挑战对导航图有怎样的影响,我们又该如何记录当前屏幕上的内容呢?...经过一些实验,我们发现即使是屏幕的平板上,竖屏模式同时显示出双窗格内容会使得信息的显示过于密集,所以这两个宽度值可以保证只横屏模式下才同时展现全部窗格的内容。...当您在搜索时,可以选择不同的标签来过滤需要显示的搜索结果,我们也会把当前生效的过滤标签显示以下两个位置之一: 窄模式时位于搜索文本框下方,宽模式时位于搜索文本框的后面。...宽尺寸屏幕上,这些列表项会转换为一格一格的卡片,卡片上直接显示了详细的内容。 △ 左图: 窄屏幕显示 Codelabs。右图: 宽屏幕显示 Codelabs。

2.1K20

FAQ | 为大屏幕设备构建应用的常见问题解答

多任务处理方面,大屏幕提供给用户更多空间进行多项操作,如果用户折叠设备上使用应用,开发者要考虑优化的是当用户展开设备时确保应用有良好的连续性、良好的界面显示效果和外观。...导航优化方面,以往在对直板手机竖屏模式的部分导航组件进行优化时,导航组件几乎始终停靠在屏幕底部,可折叠设备或更大的设备中情况就不同了,用户实际上大多数时间是用双手持握设备,这就意味着导航组件最好是放置设备边缘和侧面...MAD Skills 系列之导航组件系列文章 支持不同的屏幕尺寸 问: 对开发者而言,如何用最简单的方法各种尺寸的屏幕上优化应用界面?...提及折叠形态,需要注意组件的过渡,将会在更大设备更大屏上使用各种组件,尤其是桌面模式,需要特别注意界面,例如,模式下,关键操作或大多数操作是底部屏幕完成的,而大多数内容组件实际上会放在另一个屏幕上...;折叠的桌面模式下,用户看起来像是操作一部笔记本电脑,点触屏幕,手机可能会出现不稳晃动;这种模式下摄像头位置也可能会挡住后面的屏幕内容,虽然内容会被渲染,但因为被挡住而不可见。

3.5K10

响应式网站建设怎么做好?做好响应式网站的方法

2、响应式规则确定 不同的内容,不同的响应式规则下的展现形式应该是不同的,即使是同样的内容,设备不一样展示形式也是有差异的,有的展示形式适合大屏幕,有的适合小屏幕,需要根据展现的内容确定好的响应式规则...,规划在不同分辨率规则下的显示形式。...比如从大分辨率到小分辨率应该如何变化,导航应该如何变化,页面结构应该如何变化等。 3、清晰的网站导航 导航是网站的综合轮廓,所有网站内容通过栏目了解,简洁的网站导航设计便于用户快速找到感兴趣的内容。...PC端可以考虑头部导航与尾部导航结合的方式进行设计,移动端的时候,导航放在页面底端做悬浮更符合用户的操作习惯,不管哪种方式,导航结构要简单,最好不要超过2层,导航的文字要精准,最好的能包含核心关键词...除了获取针对智能手机关于响应式设计的优秀建议和技巧外,你也会了解你需要做的事情—如何使网页不同的手持设备上快速加载。

1.7K60

Cocoa编程中视图控制器与视图类详解

UIView是iPhone屏幕上很多控件的基础类。每个iPhone用户界面都是由显示UIWindow(这其实也是个特殊的UIView)内的众多UIView及其专门化子类构建的。...UIViewController实例负责设置视图的外观和它显示的子视图。 UINavigationController类 1. 导航控制器使用内置动画在视图之间切换; 2....UITabBarController类       选项卡类允许用户多个视图控制器之间移动并在屏幕的底部可定制该栏。...•管理视图上显示的数据。 •设备方向变化,调整视图大小以适应屏幕。 •负责视图和模型之间的数据及请示的传递。 2....设计模式     传统的mvc设计模式 image.png 添加描述    iOS mvc设计模式 image.png 添加描述 主要区别在于view和model之间的数据交换都要通过控制器来协调

5K50

开启全面屏体验 | 手势导航 (一)

我们 Android 10 中添加了新的系统导航模式,用户可以通过手势交互执行后退、返回至主屏以及打开设备助手等操作。 ?...△ Android 10 中新加入的手势交互 通过使用手势交互来执行系统导航,应用可以使用到更多的屏幕空间。这有助于您为用户打造更加沉浸的体验。 大多数设备上,用户都能选择他们喜欢的导航模式。...本系列文章会着重为开发者们介绍如何让应用支持手势导航,涵盖的主题如下: 开启全面屏体验,让应用的内容铺满整个屏幕 处理与系统 UI 的视觉冲突 处理与系统手势之间的冲突 各种全面屏体验场景,以及如何适配它们...如果您的应用针对的是 SDK 28 或更低版本,则系统不会显示遮盖,而是提供透明的导航栏。 ?...△ 使用手势导航模式时系统提供的半透明遮盖 否则,系统将使用动态色彩适应。上文中列出的条件是目前系统用来判断的依据,将来可能会更改。

2.4K30

详解 Android 12L|更好地适配大屏幕设备

△ 拖放应用以使用分屏模式 最后,我们对兼容模式的视觉效果和稳定性方面进行了改进,为用户提供更好的宽屏显示,并优化了应用在默认情况下的显示。...该指南涵盖了生态系统中常见的布局模式,有助于激发和开启您的工作: △ Material Design 指南中的自适应 UI 模式 利用新的导航组件构建响应式 UI 为了向用户提供最佳的导航体验,您应该提供针对用户设备窗口尺寸类量身定制的导航界面...推荐的导航模式包括适用于 紧凑屏幕导航栏,以及适用于 中等屏幕宽度的设备类和更大屏幕设备 (600dp 以上) 的导航栏。...可调整尺寸的模拟器可以帮助您在四个参考设备 (手机、可折叠设备、平板电脑和台式机) 之间快速切换。这使得设计时验证布局和在测试运行时行为变得更容易,两者使用的参考设备相同。...我们即将推出全新的指南,为您说明如何在全新和现有的应用中支持不同的屏幕尺寸、如何为 View 和 Compose 实现导航如何利用可折叠设备的优势等内容。

3.7K20

最新iOS设计规范二|7大应用架构

提供启动屏幕。系统会在应用启动时显示启动屏幕,并迅速将其替换为应用的第一个屏幕。启动屏幕的功能是给人一种印象,即您的应用程序快速且响应迅速,同时允许加载初始内容。...如果使用当前上下文模式视图样式拆分视图窗格,弹出窗口或其他非全屏视图中显示模式内容,则在紧凑环境中显示模式内容时,应切换为使用工作表。 模态设计规范如下: 模态要在合适的时机使用。...一些APP会结合多种导航样式,例如:使用平级导航的应用可以每个类别中使用分层导航导航设计规范如下: 始终提供清晰明确的路径。用户应该知道他们APP中的位置以及如何到达下一个目的地。...让用户以最小的阻力页面之间跳转。例如,你可以让人们从页面侧面滑动以返回上一个页面。 使用标准导航组件。尽可能使用标准导航控件,例如页面控件,标签栏,分段控件,表视图,集合视图和拆分视图。...标签栏可让人们快速轻松地不同类别之间切换。 iPad上,使用拆分视图而不是标签栏。拆分视图提供与选项卡栏相同的快速导航,同时更好地利用了大屏幕。 当您具有内容类型相同的多个页面时,请使用页面控件。

2.6K20

超大触摸屏设计的7大注意事项

2.增大文本和图形的显示比例 增大文本和图形这种情况设计中通常不会出现,因为设计师必须大幅放大视觉元素才足以超大屏幕显示。...用户需要被具体可见的元素吸引到屏幕上。 用户需要看到可视化的提示,帮助他们识别出用于公共场合的屏幕没有指令的情况下,屏幕元素必须具有可导航和清晰的显示功能。...需要注意的是,设计师要确保用户访问不同的内容时,导航始终可用。 为你的产品设计一个导航模式时,最好采用一般网站普遍使用的导航模式,如将导航栏设置屏幕上方或侧边栏中。...较大的屏幕上,键盘可能会变得笨拙和缓慢,需要消耗用户额外的体力。但是,如果你确实有基于键盘的输入,请在导航中设置一个键盘切换命令,这样用户就可以需要的时候轻松地显示和隐藏键盘。...4.不要创建太多的选项 屏幕越大,用户选择的余地就越大,需要耗费的时间就越多。不如将按钮和交互看作是如何让用户快速做决定的游戏。设计的诀窍在于让他们两个元素之间进行选择,而不是提供太多的选项。

1.4K70

开启全面屏体验 | 手势导航 (一)

我们 Android 10 中添加了新的系统导航模式,用户可以通过手势交互执行后退、返回至主屏以及打开设备助手等操作。...△ Android 10 中新加入的手势交互 通过使用手势交互来执行系统导航,应用可以使用到更多的屏幕空间。这有助于您为用户打造更加沉浸的体验。 大多数设备上,用户都能选择他们喜欢的导航模式。...本系列文章会着重为开发者们介绍如何让应用支持手势导航,涵盖的主题如下: 开启全面屏体验,让应用的内容铺满整个屏幕 处理与系统 UI 的视觉冲突 处理与系统手势之间的冲突 各种全面屏体验场景,以及如何适配它们...如果您的应用针对的是 SDK 28 或更低版本,则系统不会显示遮盖,而是提供透明的导航栏。...△ 使用手势导航模式时系统提供的半透明遮盖 否则,系统将使用动态色彩适应。上文中列出的条件是目前系统用来判断的依据,将来可能会更改。

16810

iOS 9人机界面指南(一)上篇:UI设计基础 - 腾讯ISUX

它能协调视图的内容显示,实现与用户交互的功能并能在不同屏幕内容之间切换。比如,“设置”使用了一个导航控制器来展示其视图层级。...从这个角度来看,应用里,屏幕内容一般对应于一个独特的视觉状态或者模式。 注:一个iOS应用程序包含一个窗口。...想要定义一种显示环境,你需要定义一种横屏尺寸类别,与一种竖屏尺寸类别。如你所想,一个iOS设备竖屏模式可以使用一套类别,而横屏模式下可以使用另一套类别。...例如,如果你水平的常规模式下使用了网格来显示图像,那么无需压缩模式下使用列表来展示同样的内容,虽然你可能调整了网格的尺寸。 如果你的应用只一个方向上运行,那么请直接一点。...某些情况下,一个应用中结合多种导航类型会有很好的效果。例如,对于扁平信息结构中某一分类下的内容,用分层导航的方式来显示可能会更好。

1.9K41

如何规范移动应用交互设计?UIUX设计师须知的11个小技巧

使键盘与所需的文本输入框相匹配 自定义键盘 据相关人员研究发现:用户键盘模式和触摸屏模式之间的这种切换,增加了用户的认知负荷。如何减小用户的认知负荷?设计师应该为用户提供一个可自定义的键盘。...不要隐藏密码 移动设备中不需要显示和隐藏密码选项。由于移动设备的屏幕较小,用户使用起来也比较安全。因此,删除显示和隐藏选项将有效减少不好的用户体验。...注意应用程序的屏幕方向 对于移动应用程序的设计,我们总是竖屏模式下进行设计。设计师应该同时检查屏幕横向和纵向的适应效果,不要忘记在横屏模式下测试你的应用程序。...90%的时间里用户都试图使用他们已经习惯的系统模式导航,用户使用这种导航可以使你的应用程序更加智能,但前提必须是你导航足够直观,用户不会因为搜索导航太久而卸载你的应用程序。...设计产品时,设计师应该多考虑如何让用户感到满意。 当一个网站可以一个屏幕显示14张图片时,一个手机屏幕一次只能显示三张图片。

1.2K90

2020年网站首屏设计:最佳实践和例子

但如果是一个圆形的标志,其实也可以把它放在屏幕的中心,尽管它的效果仍然没有放在左边好。 导航。一定注意不要令网站的导航部分过于杂乱。 太多的链接会压倒访客。...不违反整体设计概念的情况下,请固定导航栏。无论对桌面还是移动设计,这都是一个很好的想法: 电子商务网站-购物车总是在用户面前。 服务网站-电话号码或CTA会持续显示。...用户需要很容易地导航,了解最新的交易,如何快速联系经理,以及在哪里看到他们已经下好的订单,因此在这种情况下,为了让位于其他类别,首屏可能更简洁。...Meal Service Home Page 隐藏导航(汉堡菜单) 这是一种使用得越来越多的网站设计解决方案。汉堡包菜单是三条条纹的小图标,点击时显示完整的菜单。...Skate Store Versatility Case 响应式的首屏设计 首屏不仅应正确显示在网站的桌面端,还应正确显示移动端上。

2K10

SAP S4 HANA业务伙伴工具集(BDT)

图片SAP S4 HANA业务伙伴工具集(BDT)几乎所有S/4 HANA项目中,都会出现这样一个问题,即BP如何与BDT一起工作。本文就这个话题给大家做一个简短的介绍,并分享一些BDT的知识。...日期的转换 注:没有对话框的维护模式下执行相同的编码(例如直接输入)。没有冗余编码。事件BDT在对话框流中使用固定事件。所有应用程序都能够通过自己的程序逻辑扩展对象。...它是配置(定制对象)和工作台对象(如PBO/PAI功能模块)之间的连接。视图定义字段收集一个视图中,如果: •具有相同的上下文 •检查是相同的 视图中的字段位于子屏幕上,每个视图都分配给技术子屏幕。...2 视图被分配给要维护的对象 子屏幕的流程逻辑 1 PBO中调用功能模块BUS_PBO(字段修改,消息) 2 PAI中调用功能模块BUS_PAI(确定光标位置) 数据集的特殊重要性另一个有趣的点是如何处理角色和技术元素之间的连接...请记住,对于BP事务,每个选定的角色都以不同的屏幕布局(可见选项卡)显示。系统是如何管理这一点的?每个视图都被分配给视图定义中的数据集。所选数据集被分配给所谓的BP视图(事务BUSD)。

44130
领券