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

折叠屏上应用设计规范,了解一下?

最重要一点是,栏式网格提供了一种合理方式来思考当屏幕尺寸变大或变小时如何将内容进行重排,从而帮助您对不同屏幕尺寸作出一致响应。...例如,屏设备上,您可使用 Navigation rail (左侧边栏导航条) 代替 底部导航 (Bottom navigation),两者功能相同,视觉表现方式也类似,但 Navigation rail...例如,几乎所有标准手机竖屏模式下采用了较小 (Compact) 宽度和中等 (Medium) 高度组合,由于普遍使用垂直滚动,对大多数应用而言,根据宽度尺寸类别进行适配就已足够。...△ 响应式界面可根据屏幕尺寸变化而调整内容布局 设想一下,当您调整浏览器窗口大小时,如果浏览器回退了一个页面,或者重定向到另一个页面,又或者修改了历史记录,这种体验非常奇怪。...窗口模式 下,您应用可以与其他应用并排使用,除了响应式调整之外,还可以考虑如何让应用在这种模式下发挥更大作用,比如支持拖拽等。这种小功能可以提高用户工作效率,用户便更乐意使用您应用。

4.3K20

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

△ 针对屏优化 Microsoft Outlook 应用界面 我们还观察到那些针对所有屏幕尺寸进行优化应用,围绕用户互动度、留存率等指标上,取得了不错成绩。...△ 基于高度窗口大小表示 总而言之,窗口大小出现,代表了 Android 自适应和响应式布局开发中进步,包括更新和优化指南、Jetpack WindowManager 中新 API...通过这种方式更新应用导航,无论屏幕尺寸如何都能够拥有相同导航图,这意味着调整屏幕尺寸不会产生导航变化,从而让用户感到困惑。...,可以发现对屏幕空间利用有了非常改善。...但这次更改是针对屏幕尺寸做决策,我们是不是可以让单个组件自身根据页面而拥有不同尺寸呢?例如我们有一张卡片,当在列表中因为空间限制只展示标题和副标题,而有更多空间时,则调整为显示图像。

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

最新iOS设计规范九|10系统能力(System Capabilities)

使用屏幕空间显示用于关键标签、注释和说明文本。如果需要在3D空间中显示文本,请确保文本面向人,并且使用相同字体大小,而不管文本和带标签对象之间距离如何。...一个辅助窗口经常支持模态任务或包含单个对象和与它相关联动作; 在这两种情况下,人们倾向于完成辅助窗口后关闭辅助窗口。例如,邮件中,主窗口包含所有邮箱和邮件,而辅助窗口显示单个邮件。...细看小部件 您可以创建小,中或尺寸小部件。iPhone,iPad和Mac上,人们可以在窗口小部件库中找到窗口小部件,还可以在其中选择窗口小部件大小。...中等“天气”小部件显示相同数据,并添加了六个小时预报。 ? 大型“天气”小部件还显示相同数据,包括六个小时预报,并添加接下来五天预报。 ?...这样做可以为您小部件提供多种尺寸,从而增加价值。通常,避免简单地扩展较小窗口小部件内容以填充较大区域。创建一个尺寸最适合您要显示内容窗口小部件比提供所有大小窗口小部件更为重要。

4.2K20

Android 与 Chrome OS 中针对大屏幕设备更新

多任务处理 从 Android 12 开始多任务处理已经成为日常操作,所有应用均可以窗口模式下运行。但是需要注意是应用可能以分屏模式运行或以窗口形式出现在另一个应用旁边。...这是因为所有应用无论是否声明尺寸可切换,都可以分屏模式或者单独窗口下运行,所以有必要更新您应用以适配尺寸变化,同时避免应用重启或者进入兼容模式。...包括优化主屏幕布局,大幅调整通知外观和风格,加入了弹出窗口使 PIN 码输入更加简单。您无需采取任何操作就可以应用中自动采用新系统外观。...基于可用屏幕空间以及您提供设置,库可以自动选择合适展示类型,从而避免了分支应用内导航代码就能处理不同部分中大小屏幕。...接下来我们聊聊 Chrome 操作系统以及 Android 平板电脑和可折叠设备中避免应用出现在兼容模式中所需要做到重要几件事: △ 运行在开放形式模式充分利用屏幕空间 为不同设备类型提供合适屏幕布局

2.3K40

最新iOS设计规范七|10视觉规范(Visual Design)

用户更喜欢不同方向使用APP,因此最好是你能能够满足用户这种期望。 做好更改文本大小准备。用户希望大多数APP设置中选择不同文本大小时都能做出响应。...例如,如果您应用在纵向模式下显示图像网格,则不必横向模式下显示与列表相同图像。相反,它可能只是调整网格尺寸。尝试在所有情况下保持可比体验。...设计全屏体验 扩大可视元素以填满屏幕。确保背景延伸到显示器边缘,并且垂直方向可以滚动布局(如表和集合),一直延伸到底部避免屏幕底部和角落放置交互式控件。...系统视图和控件使APP文本在所有背景上看起来很好,并自动调整以适应是否有Vibrancy。当你可以使用系统提供视图来显示该文本时,请不要自己绘制文本。...使用字体粗细,大小和颜色突出显示应用程序中最重要信息。 响应文本大小更改时优先处理内容。并非所有内容同样重要。

7.9K30

最新iOS设计规范三|3界面要素:栏(Bars)

如果你认为没有到当前屏幕完整路径,因此导致用户迷路,那么可以调整APP层次结构,使其更加扁平。 给带有标题按钮留出足够空间。...如果导航栏包含多个文本按钮,需要通过在按钮之间插入固定空格项目来增加分隔。以此来避免按钮文本同时显示造成按钮无法区分问题。 考虑导航栏中使用分段控件,使APP层次结构更加扁平。...所有页面的标签栏应保持相同高度,并且弹出键盘时隐藏。 标签栏可能包含N个标签,但可见标签数量因设备大小和方向而异。...为了使界面具有可预测性,选择一个选项卡应始终影响直接连接到选项卡栏视图,而不影响屏幕上其他位置视图。例如,拆分视图左侧选择一个选项卡不应导致拆分视图右侧突然改变。...tips:了解选项卡栏和工具栏之间区别很重要,因为两种类型栏都出现在应用程序屏幕底部。标签栏可让人们应用程序不同部分之间切换,例如“时钟”应用程序中“警报”,“秒表”和“计时器”选项卡。

9.8K10

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

数据显示,因为更大屏幕空间,可折叠设备多任务处理量增加了 7 倍,开发者有必要平衡布局简单性与灵活性以优化应用,例如开发者使用新窗口尺寸类别和视口断点时,如果要优化断点布局,可以将其视为 3...如果您已经做到了这一点,那么接下来您应该确保应用能够窗口模式下运行,并且应用大小可动态调整。...使用 ConstraintLayout,您可以根据布局中视图之间空间关系指定每个视图位置和大小。这样一来,当屏幕尺寸改变时,所有视图都可以一起移动和拉伸。...虽然 ConstraintLayout 并不能应对所有布局场景,但无论您使用何种布局,都应该始终避免对布局大小进行硬编码。...问: 当开发者 Chrome OS 上调整窗口尺寸时,如何将应用组件顺畅转换为新尺寸? 答: 请关注 Material 官方文档,关于这个类型问题未来我们可能会专门安排一个章节来说明。

3.5K10

控件anchor和dock属性_控件常用属性

设计窗体时,这两个属性特别有用,如果用户认为改变窗口大小并不容易,应确保窗口看起来显示不是那么乱,并编写很多代码来实现这个效果,许多程序解决这个问题都是禁止给窗口重新设置大小 这显然是解决问题最简单方法...1、Anchor属性用于指定在用户重新设置窗口大小时控件应该如何响应,可以指定如果控件重新设置了大小,就根据控件边界去锁定它,或者其大小不变,但根据窗口边界来锚定它位置 正如名称暗示那样...,它将在父窗体中保留一个相对左右位置,其它也是一样 ②如果选择了所有Anchor值控件,控件只是调整父窗体大小时,随着增大和缩小–与窗体边缘比较起来它所有边缘保持静止不变...2、Dock属性用于指定控件应该停放在窗口边框上,用户重新设置了窗口大小,这个控件将继续停放在窗口边框上,例如,如果指定控件停留在窗口底部边界上,则无论窗口大小怎么改变,这个控件都将改变大小,...或移动其位置,确保总是位于屏幕底部

1.3K30

一个创建产品动画说明视频新手指南

选择所有图层并在时间轴上完全缩小,将鼠标悬停在彩色条右侧。你应该得到一个调整大小句柄。点击并拖动到时间轴右侧。每层现在应该持续30秒。...当我们它,按command+option+F(或ctrl + alt + F)调整动画到新合适大小。预览时 它应该与以前一样,只是缩小。 使用关键帧来缩放大小和位置。...看看为什么我们使PSD如此之大? ? 现在,您可以时间轴窗格中复制并粘贴图层,并将每个图层缩小到新位置,以显示多个窗口。(专业提示:使用键盘上J和K图层上关键帧之间向前和向后跳过。)...导入logo.psd,你早就学会了如何做,并把它放到我们composition。将其拖出屏幕,并在其他元素离开屏幕时间轴中某处创建位置关键帧。...向前移动半秒钟,并将logo移动到屏幕中心(cmd +选项+ F)。 预览您动画以查看logo转换。 图形编辑器 现在,我们将使用图形编辑器使所有内容流动得更好一些,从而可以调整关键帧之间转换。

2.9K10

最新iOS设计规范四|3界面要素:视图(Views)

提供“取消”按钮,使人们可以重新考虑破坏性操作。“取消”按钮应出现在动作表单底部。 突出显示破坏性选择。将红色用于执行破坏性或危险操作按钮,并将这些按钮显示动作表单顶部。 避免让操作表滚动。...理想情况下,应对图像进行预分类以适应视图,避免系统再进行任何缩放。如果系统必须执行缩放,那么所有图像具有相同大小和形状时,最容易实现。...通过全屏模式视图中显示信息而不是弹出窗口中来利用所有可用屏幕空间。 使用“关闭”按钮仅用于确认和指导。...当需要改变浮层大小时,提供一个平滑过渡方案。一些浮层对于相同信息提供了精简视图和扩展视图两种展示方式。如果你调整浮层大小,请为更改设置一些动画,以避免用户产生新浮层替换旧浮层意识。...以上所有系统提供标准列表单元格样式,同样支持图形元素,例如勾选图标或其他指示性控件。当然,添加这些元素会减少标题和子标题可用空间。 保持文本言简意赅,避免显示不全。

8.4K31

【visionOS】从零开始创建第一个visionOS程序

在任何SwiftUI应用中,你都可以使用场景将内容放到屏幕上。场景包含要在屏幕上显示视图和控件。场景还定义了这些视图和控件出现在屏幕上时外观。...当一个人手指与屏幕项目占据相同空间时,系统就会报告一个交互。额外手指和手部动作定义手势类型。 这张照片显示了一个人桌子上物理键盘上打字。一个虚拟建议条显示物理键盘上方。...将指针移动到窗口栏旁边圆圈上,显示窗口关闭按钮。将光标移动到窗口一个角落,以将窗口栏变为调整大小控件。 tips:应用程序不能控制窗口空间位置。...使用visionOS,应用程序自动获得具有visionOS外观和感觉材料,完全可调整大小窗口,间距调整为眼睛和手输入,并为您自定义控件提供高亮显示调整。...系统显示时间设置每个窗口和音量初始位置。系统还增加了一个窗口条,允许用户重新定位窗口调整窗口大小

75340

如何在Mac上轻松更改Finder外观

实际上,可以对Finder进行很多方面的调整,以使其外观更符合您喜好。 让我们看一下macOS中自定义Finder一些方法。...Finder中隐藏各种元素 Finder在其窗口中显示各种项目,如侧栏,工具栏,路径栏和状态栏。这些选项使您可以快速跳转到Mac上各个位置。...路径栏显示Finder窗口底部,显示当前文件夹完整路径。...你们准备好了 Finder中更改文件夹图标 Finder对所有文件夹使用相同图标,但是您可以为所选文件夹更改此图标。...您可以通过右键单击Finder窗口空白区域并选择显示视图选项来访问这些选项。 新打开面板中,您可以更改图标大小,字体大小,隐藏某些元素,甚至更改Finder背景颜色。

5.9K00

Human Interface Guidelines —— Tab Bars

Tab Bars Tab Bars出现在app屏幕底部,并提供在app不同部分之间快速切换能力。...Tab Bars是半透明,可以具有背景色调,在所有屏幕方向上保持相同高度,并且显示键盘时隐藏。 Tab Bars可能包含任意数量tabs,但可见tabs数量因装置大小和方向而异。...如果由于水平空间有限而无法显示某些选项卡,则最后几个可见tab将变为“更多”tab,从而在单独屏幕上显示列表中其他tabs。...例如,选择左侧分割视图(split view)tab不应导致分割视图右侧突然更改。popover中选择一个tab不应该导致弹出窗口后面的视图发生变化。...TIP:理解 tab bar 和 toolbar 之间区别很重要,因为这两种类型都出现在app屏幕底部

1.4K150

Human Interface Guidelines —— Popovers

Popover Popover是一个短暂视图,当您点击某个控件或某个区域时,它会出现在屏幕其他内容上方。 通常,Popover包含指向其出现位置箭头。...弹出窗口也不应该继续弹出popover。 ·一次显示一个popover 显示多个popovers使界面变得混乱并引发困惑。永远不要显示一个堆叠或几层由上个popover引出popovers。...·可能的话,让用户点击一次就能关闭一个popover同时打开另一个popover 当几个不同按钮每个打开一个popover时,避免额外点击是特别明智。...·避免让popover过大 Popover不应该占用整个屏幕。最好使其大小刚好能展示内容,并指向出现地方。请注意,系统可能会调整popover大小以确保它适合屏幕显示。...·更改popover大小时采用平滑过渡 一些popover提供了相同信息简明和扩展视图。如果您要调整popover大小,请用动画过渡,以免让用户误以为产生了新popover。

1.3K110

可折叠设备桌面模式

这是一个简单媒体播放器案例,它会自动调节尺寸以避免让折叠处出现在画面中间,并且调整播放控制组件位置,从屏幕完全展开时嵌入画面中,变为当屏幕部分折叠时显示为单独面板。...这样一来该控件会在屏幕完全展开时被隐藏,而当屏幕部分折叠时又出现在底部。 请注意第 28 行 layout_constraintGuide_end 属性。它就是当您移动参考线时需要改变值。...如果您要实现横屏功能,那么大多数时候,边界会以一个屏幕中垂直居中矩形来表示,它和屏幕一样宽,并且高度与铰链相同 (对于可折叠设备而言值为 0,对于双屏幕设备而言会是两个屏幕之间距离)。...在其他所有情况下 (非全屏) 您需要考虑导航栏或屏幕上其他 UI 组件占据空间。 为了移动参考线,您必须指定它距离父布局底部距离。...{ // 视图在窗口位置要与显示特征同一坐标空间中。

2.3K30

如何在Ubuntu 16.04上安装和使用Byobu进行终端管理

虽然这通常是一个非常有用功能,但是,例如,如果其中一个连接窗口尺寸小得多(因为Byobu将自行调整大小以匹配最小窗口),则会导致问题。...在这种情况下,您可以使用ALT+F6,它将分离所有其他连接并使当前连接保持活动状态。这确保只有当前连接在Byobu中处于活动状态,并且如果需要,将调整窗口大小。...当移动分割时,这将自动调整窗口内周围面板大小,并且当您在其中工作时可以轻松地使窗格变大,然后焦点移动时放大不同窗格。...以下是将一个窗口拆分为三个窗格情况: 既然您知道如何使用会话,窗口和窗格,我们将介绍Byobu另一个功能:状态通知。 第8步 - 使用状态通知 状态通知是Byobu屏幕底部状态栏中通知。...将显示所有可用状态通知列表; 您可以选择要启用或禁用那些。 启用状态通知后,它们将显示底部状态栏中,与窗口指示器一起显示。默认情况下会启用一对,通常包括日期,负载和内存。

9.8K00

Unity基础教程系列(新)(一)——游戏对象和脚本(Creating+a+Clock)

确保所有时钟位置和旋转值设置为0。其缩放应统一为1。 2D对象呢? 使用2D而不是3D时,可以忽略三个尺寸之一。...因此,让我们设计时钟时要牢记相同方向,这意味着当我们沿Z轴查看时钟时会看到其正面。将圆柱体X旋转设置为90,并调整场景视图,以使时钟front部分可见。 ?...复制这两个指示器,并否定它们Y位置和旋转来创建第4小时和第5小时指示器。然后第1、2、4、5小时使用相同技巧来创建剩余指标,这一次否定它们X位置,再次否定它们旋转。 ?...还要将其Z位置更改为-0.35,使其位于小时顶部。请注意,这适用于手臂,而不是其枢轴。 ? (调整分针Transform) 调整秒针。...尽管编译器会自动将它们转换,但通过向它们添加f后缀,我们可以使我们清楚所有数字均为float类型。 ? 每小时度数始终相同

4.2K20

巧妙再构想Slax发行版成功突破便携式Linux局限性(Reviews)

无需任何修改,就可以添加应用程序和更改配置,所有更改永久存储USB驱动器上,这也包括把所有重要文件存储U盘上。...更好方法是从USB驱动器运行Slax。这样可以选择启用持久存储。 外观 Slax为您提供了一个简单,外观简洁桌面。 您可以将工具栏或面板栏放置屏幕任何边缘。 默认位置底部。...image.png Slax桌面可以调整打开窗口大小虚拟工作区之间移动应用程序以及对系统配置进行最小程度变更。 面板左端菜单按钮整个屏幕上显示类似GNOME图标。...右键单击面板,桌面,打开窗口顶部边框或面板中停靠图标,以将正在运行应用程序发送到任何虚拟工作区。 右键单击屏幕或面板还可以访问一些系统调整。...要使用作弊代码,请像往常一样Slax启动期间按Esc键激活启动菜单,然后在看到启动菜单时按Tab键。 命令行将出现在屏幕底部。 您可以开发人员网站上找到作弊代码列表。

2.9K10

Android 软键盘那些事

:该Activity总是调整屏幕大小以便留出软键盘空间(可以显示全部屏幕) 【I】adjustPan:当前窗口内容将自动移动以便当前焦点从不被键盘覆盖和用户能总是看到输入内容部分(软键盘会遮挡屏幕...) android:windowSoftInputMode 活动窗口如何与包含屏幕软键盘窗**互。...2> 活动窗口调整——是否减少活动主窗口大小以便腾出空间放软键盘或是否当活动窗口部分被软键盘覆盖时它内容的当前焦点是可见。..."adjustUnspecified" 这个是软件盘行为默认设置。它不被指定是否该Activity主窗口调整大小以便留出软键盘空间,或是否窗口内容得到屏幕上当前焦点是可见。..."adjustResize" 该Activity主窗口总是被调整屏幕大小以便留出软键盘空间 "adjustPan" 该Activity主窗口并不调整屏幕大小以便留出软键盘空间

1.9K10

Web浏览器滚动方案一览| rAF等

Window 大小与文档大小要获取窗口大小和文档大小,我们可以使用JavaScript编程语言。...而要获取文档大小,我们可以使用document对象clientWidth和clientHeight属性。这些属性将返回以像素为单位值,从而使我们能够准确地确定窗口和文档尺寸。...它有一个参数alignToTop:如果 top=true(默认值),页面滚动,使 elem 出现在窗口顶部。元素上边缘将与窗口顶部对齐。...如果 top=false,页面滚动,使 elem 出现在窗口底部。元素底部边缘将与窗口底部对齐。亦或是接受一个包含以下属性对象:behavior:定义滚动是立即还是平滑动画。...如果它增加了(滚动条消失后),那么我们可以 document.body 中滚动条原来位置处通过添加 padding,来替代滚动条,这样这个问题就解决了。保持了滚动条冻结前后文档内容宽度相同

11010
领券