前言 折叠屏设备从展开到折叠的切换过程中，同一个设备可能出现多种屏幕尺寸的使用状态。...这让开发者在应用程序适配中面临着不小的挑战，比如说屏幕难以完美适配，导致的UI错位以及反应迟缓等体验性问题，本文将从app设计和开发过程中给出支持不同屏幕尺寸和像素密度建议指导，确保应用界面能够在各类屏幕上美观的呈现...一 应用resizeable能力支持 本节概述了这些主题以及 Android 上已有的可用功能，以帮助您的应用进行相应调整。支持不同屏幕尺寸，确保您的应用界面在不同的屏幕尺寸下可以全屏的显示。...Fig在展开时可以全屏显示 （图以MateX示例） Fig折叠后可以全屏显示 （图以MateX示例） 如上图，在应用界面能够不同的屏幕尺寸下铺满全屏显示，且响应布局和操作按键功能正常。...开发者为每种屏幕配置优化用户体验，方法是为不同的屏幕尺寸添加专门的布局，并为常见的屏幕密度添加优化的位图图像。
一个摄像头，如何敲开空间计算的大门？ 计算机诞生，让电子信息的交互由此开端。为了便携性，计算机也从台式、笔记本变成了掌机（手机）；但不变的是交互界面——电子显示屏的形式。...用户的便携需求注定了电子显示屏无法更大，而这个形态下，手指交互的形式也决定它不可能变得太小。于是屏幕的尺寸进化范围不断被缩小；人们只能通过增加屏幕的方式来呈现更多的信息。...如何能在便携的同时，让信息的显示更多、更丰富，交互更自然流畅？ 空间计算恰如其分地解决了这个问题。...与Vision Pro不同，Rokid选择了OST路径，并且在轻薄上做到极致。Rokid通过透明的镜片，将计算机生成的虚拟图像与用户的真实视野进行叠加。...因此，它让你看到的现实世界永远是真实的，同时经过摄像头定位和芯片计算，让虚拟物品和现实产生交互。 除了Rokid，微软也是这个走这个技术路线。
结果是，大多数开发者只会为所有屏幕尺寸使用同一张图片，并让浏览器调整图片的大小以适应屏幕。这是一种不好的做法，因为浏览器仍会下载完整尺寸的图片（通常非常大），即使它只以其一部分尺寸显示。...如何处理不同的像素密度 有时候，您可能有一张图像在屏幕上始终保持相同的尺寸，但您希望它在高分辨率设备上看起来很好。...在那一点上，图像在我们的屏幕上永远不会占用超过800像素的空间，所以我们应该根据这个800像素的尺寸来调整我们的图像尺寸。...这意味着第二个媒体查询（max-width: 500px）50vw 将永远不会被使用，因为只有在屏幕小于500像素时才为真，而在这些尺寸范围内第一个媒体查询将始终为真，因此它将始终被优先选择。...picture 元素 到目前为止，我们主要讨论了如何以不同尺寸渲染相同的图像，以帮助提高加载时间，但这并没有涵盖在不同屏幕尺寸下显示不同图像的情况。
您可以将 Widget 理解为一个 "一目了然" 的应用视图，让用户在无需从主屏幕打开应用的前提下，就能对应用数据和核心功能一览无余。...那么如何做到让 Widget 随着尺寸的变化而动态更新显示内容呢，用如下代码举例，我们定义了三个不同的参数，分别包含最小支持宽度和高度，以及在此大小范围内对应的 RemoteView，系统会自动根据实际的尺寸而自动对...Widget，但是处理不同的响应式布局也并非易事，Glance 就试图通过定义三种不同的 SizeMode 选项从而让这种工作变得稍微轻松一些。...如下图所示，使用了 SizeMode.Single 选项的 Widget，无论其尺寸如何变化，其输出的尺寸大小永远不会得到变化，这是因为 Content 方法只被调用了一次，内容在尺寸发生变化时并没有得到刷新...△ SizeMode.Responsive 选项示意图 同样，我们还可以在 Content() 方法中定义更加多元化的样式，让 Widget 在不同的尺寸下展示更独特的内容。
重复的动画 我们可以看到密码框在不断的循环进入屏幕，反方向退出屏幕这个操作，并且登录按钮也始终没有渐变出现。...由此可以知道UIViewAnimationOptionRepeat参数不仅是让动画循环播放，并且还导致了completion的回调永远无法执行。...，分别传入这四个不同的参数，然后让这四个view在同一时间y轴上向上移动。...取值范围0 ~ 1，值越低震动越强 velocity：初始化速度，值越高则物品的速度越快 当一个圆角按钮高速移动的进入界面中，接着狠狠的震动，这绝对会狠狠地吸引住你的眼球。...比如我尝试着让某个UICollectionView的分类按钮从屏幕下方弹入视图的时候；又或者我让这个小球弹到右下角，以提示用户该如何操作： ?
如果我们从收集到的数据点中筛选出前20个独特的视口尺寸，主要都是较小的尺寸。你可能会推测这些都是移动设备——特别是前10个——但也值得考虑的是，视口尺寸也会因环境条件而有所不同。...当你从一个像智能手表这样的小视口访问时，它又是如何呢？从横屏手机访问时又如何呢？ 基于一些宽高比和尺寸的组合，我们有信心这些情况在我们的数据中都有所体现。而且，人们也这样告诉我们。...最安全的假设是，桌面或笔记本设备上的用户不会让浏览器占满整个屏幕。...即使是平板用户也不会让浏览器填满整个屏幕，因此在考虑更大视口设计时，请务必考虑这一点——尤其是如果你为小屏幕隐藏内容，而为“桌面用户”显示内容时。...来看看所有的视口尺寸 受到2015年Open Signal关于Android屏幕碎片化报告的启发，我们用砖石布局展示了前150个最常见的视口尺寸。你也可以看到所有2,300个不同的视口尺寸。
表格45-1所罗列出来的尺寸可以为自定义图标和图片做参考。 表格45-1 ：自定义图标和图像的尺寸(像素) ? 注意： 如果你需要在主屏幕快捷操作上创建自定义icon，请参考主屏幕快捷操作 。...在iOS中，各个不同尺寸的icon将被用于Game Center，搜索结果，设置之中，还会用于代表由这个app创建的文档。 ? 为了让icon达到最好的效果，你可以求助于专业设计师。...举个例子，邮件App会使用信封作为icon元素，而不会用邮箱、邮递员的邮包、或者邮局的标志。 追求简约。尤其是避免把一大堆不同的图形都塞到你的icon中去。...代表真实物品的icon或者图像应该精确地描摹出实物的特征，如织物、玻璃、纸张、金属等等，还要能表达实物的重量和质感。 保证你的icon在不同的背景图中都是好看的。...同样的icon含义却有轻微不同，还同时出现在整个系统的不同位置之中，这会让用户非常困惑。 为不同设备准备不同大小的icon。你需要确保你的应用icon支持所有的设备。
，AI程序会获取游戏的屏幕截图，并使用它来进行预测，以更新其内部状态。...此外，在上面的代码中，屏幕捕捉要在主线程上运行。所以整个程序要等待获取到图像，在此期间不会和游戏发生处理或交互。...，AI程序会获取游戏的屏幕截图，并使用它来进行预测，以更新其内部状态。...世界点坐标 & 投影点 表3：内部地图 回忆一下第二部分的内容，投影地图类允许画面上的任何像素映射到3D坐标（假设玩家总是在xy平面上，然后该3D坐标会被量化为某个任意精度，让AI的世界地图变成均匀间隔网格的点...内部地图保留每个单元格的预测结果，并在查询单元格时报告预测最频繁的类别。第二和第三个CNN需要联合使用以检测敌人和物品。
替代文字标签在屏幕上看不到，但是他们让VoiceOver听起来可以描述屏幕上的内容，使视觉障碍的人更方便导航。...摄影细节在小尺寸上很难看出。屏幕截图对于应用图标来说太复杂了，通常不会帮助您传达应用的目的。图标中的界面元素具有误导性和混淆性。 不要使用苹果硬件产品的副本。...您无法预测哪些壁纸会为主屏幕选择，所以不要只是测试您的应用程序的光或暗的颜色。看看它如何看待不同的照片。尝试在具有动态背景的实际设备上，随设备移动而改变透视图。 保持图标角落正方形。...为了确保系统中的备用图标始终保持一致 - 用户不应该在主屏幕上看到图标的一个版本，而在“设置”中则看不到完全不同的版本，请以与您为主应用程序图标提供的尺寸相同的尺寸提供它们（App Store图标除外）...因为启动屏幕是静态的，任何显示的文本都不会被本地化。 低调发射。人们很可能会频繁切换应用，因此设计一个不会引起对应用程序启动体验的启发屏幕。 不要做广告 发射屏幕不是品牌的机会。
Perceivable可感知 简单地说，可感知意味着不同的压力情况不会阻止用户阅读，观看或收听您的内容。 排版：可感知的内容必须是可读的！...2.Operable可操作 这意味着不同的压力情况不会阻止用户访问所有页面和阻止他们填写表单。...这有助于涵盖与用户如何解释您网站的消息相关的认知压力案例。 简单明了：正如乔治卡林经常提出的那样，最好的语言是简单，诚实和直接的。用夸大术语写作会让用户厌恶，虽然看起来令人印象深刻。...这对你来说很明显，但你永远不会知道它对用户有多么明显。这可能不是由于认知压力案例，文化压力案例或仅仅是网络新手。永远不要依赖隐含的象征意义。...响应式设计 考虑设备种类和屏幕尺寸，例如： 智能手表（可能） 手机 平板 大型外接显示器 投影仪屏幕 电影屏幕 与其他类型相比，屏幕尺寸可能会影响Web应用程序，尤其是随着渐进式Web应用程序的兴起
物流行业，最痛的永远是货物分拣的“最后一公里”，涉及到将不同的货物挑拣，分门别类递送，需要消耗末端大量的人力，完成递送。...一种可伸缩的薄金属刮刀可以在臂端工具展开之前进入储物箱，并在必要时四处移动物品以腾出空间。...IEEE Spectrum：当机器手在储物箱中的物品信息不完整的情况下进行操作时，如何确保不会损坏任何东西？ Parness：这里有两点需要强调。一个是方法以及我们如何决定采取什么行动。...其次是如何确保在执行这些操作时不会损坏物品，例如尽可能地挤压。 首先，我们使用决策树。我们使用该物品信息来领取所有简单的东西——如果储物箱是空的，请将最大的东西放入储物箱。...当我们决定采用桨式方法并封装物品时，它给了我们对物品的六个自由度控制，以确保它不会进入我们不希望它进入的空间，同时也给了我们夹具上已知的工程表面。
据推测，AirTags会通过粘合剂或环形附着点联结到其他物品上，针对不同的物件可能会有不同的连结方法。...可能比瓶盖大一点点，也可能有一大一小两种尺寸。这倒是与「Tile追踪器」的方形外观不同。 AirTags如何工作 AirTags有内置芯片，可以连接到iPhone，传递它们所连接设备的位置。...AirTags如何发挥作用 如果带AirTag的东西丢了，用户的iPhone就会收到一个通知，按照「查找（Find My）」的提示来操作，AirTags会发出鸣叫声，这样在一定的范围内，用户就可以循着声音找到丢失的物品...苹果可能会采用AR增强现实技术——ARKit 追踪丢在附近的东西。「拿着iPhone在房间里走几步，上下移动iPhone，直到看屏幕上出现一个气球」。...如果一个带AirTags的物品在一个安全的地方(比如你家) ，用户就不会收到东西被落下的通知。 一旦出了这个范围，用户就会收到通知，也可以跟朋友家人共享物品的位置信息。
当我们为每个背景设置不同的移动速度的时候，他们就有表现出了视觉差的效果，看上去很酷吧！ 看到画面上漂浮着一些白色的小圆点了没？我创造了这些圆点并为他们设置了随机的位置和尺寸，接着我让他们做圆周运动。...气泡的动画 我使用交错动画来做这个效果。这个动画可以操控柱子里面所有的气泡元素，并且可以让每个气泡有一个小小的延时，让他们不会同时开始运动。...justify-content: space-between让球的容器永远靠着屏幕的顶部，而柱子容器永远靠着屏幕的底部。...Flexbox让整个界面变得如此整洁有条理，写码简直爽翻了. 让游戏界面可缩放 做这个游戏，最重要的事情是让画面变得可缩放。看下这款游戏在不同尺寸的屏幕上达到了完美的效果！...因此，我们需要让整个游戏的容器以相同的尺寸放大，这样当缩放界面的时候，容器可以100%的占据屏幕的尺寸。
他们在集结成群后的功效最大。 接下来是十个左右中等尺寸的显示屏(比面包盒稍稍大一点),安装在家具和电器上, 与办公室的主人进行更频繁、更直接的互动。...而每件物品的行为则取决于用它次数最多的人拿它来干什么。对于客人说来,这个让人捉摸不定的房间怪兽似乎失控了。 可适应的技术是指技术能适应局部环境。网络逻辑促成了区域性和地方性。...谁也不会像我一样清楚我办公室的技术特性;我也不能将他人的技术应用得像我自己的这般得心应手。 但是我发现,这种新兴的生态学在其初期阶段就已经让不了解的人们感到害怕了。...我们曾经用过一种电脑编辑器,可以让每个人有不同的界面。于是大家都设置了各自的界面。然后我们发现这个主意很糟糕,因为我们无法使用别人的终端。于是我们又走回老路:一个共享的界面,一个共同的文化。...这也正是使我们聚集在一起成为人类的因素之一。」 机器永远不能完全靠自己而发展,但它们会变得更能意识到其他机器的存在。
viewport 值 rem 和 vw 的值是根据什么计算的 1px 显示问题 如何适配刘海屏 回答关键点 viewport 相对单位 媒体查询 响应式图片 移动端开发的主要痛点是如何让页面适配各种不同的终端设备...为了在不同尺寸和密度比的设备上表现出一致的视觉效果，使用逻辑像素描述一个相同尺寸的物理单位。在具有高密度比的屏幕下，一个逻辑像素对应多个物理像素。...一个单位的逻辑像素映射到不同像素密度比的设备下，实际对应的物理像素不同。 因此，同样尺寸的图片在高密度比的设备下，由于一个位图像素需要应用到多个物理像素上，所以会比低密度比设备中的视觉效果模糊。...为了让移动端也能正常显示未适配移动设备的页面，从而引入布局视口和视觉视口的概念。 布局视口（layout viewport） 布局视口的宽度默认为 980px，通常比物理屏幕宽。...如果不进行 viewport 元标签的设置，可能会导致开发者设定的较小宽度的媒体查询永远不会被使用，因为默认的布局视口宽度为 980px。
这篇文档剩下的部分讲述了你该如何考虑这些影响并为不同类型的屏幕提供一个好的设计。 使用Viewport 元数据 Viewport是指用以展现你的页面的区域。...也就是说，一个web页面在扩张到整个屏幕之前占用的像素数据是由viewport的尺寸（dimensions）来定义的，而不是设备屏幕的尺寸。...除了将viewport尺寸定义为精确的数值以外，你还可以将其设置为永远和设备屏幕尺寸匹配，即将viewport的height和width分别赋值为device-height 和device-width。...设置 viewport width=device-width or initial-scale=1.0的web页面. 设置viewport尺寸永远和屏幕尺寸匹配结果如figure 3所示。...根据你设置的viewport性质不同，你要调整的对不同像素密度的styles的风格也应该不同。为了让你的页面能在不同像素密度下都有合适的styles，你需要将viewport的宽度设置为与设备匹配。
大数据文摘作品 作者：Mickey 物流行业，最痛的永远是货物分拣的“最后一公里”，涉及到将不同的货物挑拣，分门别类递送，需要消耗末端大量的人力，完成递送。...一种可伸缩的薄金属刮刀可以在臂端工具展开之前进入储物箱，并在必要时四处移动物品以腾出空间。...IEEE Spectrum：当机器手在储物箱中的物品信息不完整的情况下进行操作时，如何确保不会损坏任何东西？ Parness：这里有两点需要强调。一个是方法以及我们如何决定采取什么行动。...其次是如何确保在执行这些操作时不会损坏物品，例如尽可能地挤压。 首先，我们使用决策树。我们使用该物品信息来领取所有简单的东西——如果储物箱是空的，请将最大的东西放入储物箱。...当我们决定采用桨式方法并封装物品时，它给了我们对物品的六个自由度控制，以确保它不会进入我们不希望它进入的空间，同时也给了我们夹具上已知的工程表面。
此时它有助于让用户在主屏幕上的其他图标中找到自己，但是什么能使应用程序图标脱颖而出呢？ 关于这个主题有很多文章，其中大部分都与保罗兰德的设计原则有关。这并不奇怪！应用程序图标是一个品牌。...它们是我们需要考虑的许多方面。让我通过借鉴经验和使用好看的头条新闻来告诉你。 1，可扩展性 应用图标必须很小。这就是重点，用户无法对其进行拉伸检查。因此无论大小如何，图标都必须保持其易读性。...Slack是一个关于一致性的好例子 如果他得到的申请与预期不同，肯定会不开心。不要在图标中包含屏幕截图和界面元素 – 它可能会误导用户。相反，暗示应用程序的功能，使用相同的样式和颜色。...这是我们在开发应用程序图标时应该注意的事项。现在是时候创造了！当然，如果你在路上没有更多的问题……画布的尺寸应该是多少？如何使用网格？如何导出图标？是时候深入了解技术部分并找到答案。...根据设备的不同，Android会应用不同形状的蒙版。将图像放在安全区域内，这样就不会被剪裁。网格本身显示系统中使用的所有基本形状：圆形，方形，垂直和水平矩形。 ? 图标的最终版本： ?
如何统一数据 如何快速把四个版本的数据全部统一？我们针对静态直出这种模式做了小型的自动构建系统，产品经理在管理端配置数据要同步dataServer时，我们会立刻启动我们内部称为vnues的构建系统。...难道H5页面要针对不同的手机QQ版本去准备不同的HTML？或者图片资源发布到CDN上时生成两个不同格式的链接，然后在H5内部根据终端版本选择不同的链接？这个开发成本当然是不可接受的。 ?...除了图片格式的问题，我们发现用户的不同机型会存在流量浪费的情况。我们的UI设计通常都是针对iPhone6的屏幕尺寸做的，默认是750px的图片素材。...小屏幕的手机，比如640px和480px，同样是下载750px的图片，然后在渲染的时候进行缩小。 这样实际浪费了非常大的带宽，所以我们思考CDN是否能根据用户手机屏幕尺寸来下发不同格式的图片。...我们内部讨论过是否可以把屏幕尺寸直接写在User-Aagent里，这样以后Android出了一些新的屏幕分辨率我们也能在后台做更好的自适应，为每种机型去生成不同格式的图片。
它重新定义了您的应用如何向用户显示新信息。小部件是应用程序的扩展，您可以显示重要信息，而无需用户打开您的应用程序。...小组件尺寸 可用的窗口小部件尺寸（称为小，中，大） 无论小部件的大小如何，它都应始终专注于一件事。在大多数情况下，小部件会根据您应用的主要功能提供信息。...上图的布局还可以，但我觉得可以增加一些圆角，让观感更加柔和一些。 请注意圆角半径的嵌套会出现的差异，外围图形的圆角要比内部的圆角要大一些。 OK，现在我们开始设计最大尺寸的小组件。...003.另一个设计案例-Duolingo Duolingo提供游戏化的学习经验。学习者可以通过学习赚取宝石，以购买可解锁的物品。因此，应用中圆环进度条非常重要，也是激励学习者最重要的一环。...一个中等的小部件显示了我当前正在学习的语言，可以点击其中任何一个圆环，直接进入挑战屏幕。 Duolingo小部件 请注意小部件中的“ 18h 20m ago”字样。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
