左：不同内容与布局的卡片集合 右：不同布局与不同内容层次的卡片集合 ---- 行为 卡片具有恒定的宽度和可变的高度。最大高度限于平台上可用空间的高度，但可以暂时扩大（例如，显示评论）。...卡片不会翻转以显示背面的信息。 支持的手势 卡片手势应始终在卡片集合中实施。 支持的手势包括： 滑动手势（swipe gesture）可以在每张卡片上使用。限制视图内的轻扫手势，使其不会彼此重叠。...对于依赖焦点遍历进行导航（手柄和键盘）的页面，卡片应具有主要操作或打开包含主要和补充操作的新视图。 ? 选择操作 ?...在集合中的卡片中，始终展示操作。 补充操作 使用图标，文本和UI控件（通常放置在卡的底部）明确调出卡内的补充操作。 除了溢出菜单之外，补充操作限制为两个操作。 ? ?...UI控件 与主内容内联放置的UI控件（如滑块）可以修改主内容的视图。 例如，可以选择日期的滑块，评分内容的星星，或选择日期范围的分段按钮。 ? ? ? 溢出菜单（可选） 溢出菜单通常放置在卡的右上角。
菜单项还可包含： ·图标和提示文本（如下图中展示的键盘快捷键）； ·如复选标记之类的控件（已选择的打勾），表明多个已选的项目或状态。 菜单排序 带有静态内容的菜单应该在菜单的顶部放置最常用的菜单项。...例如，重做在没有任何可重做的操作时被禁用。 剪切和复制在没有选择内容时不可用。 ? 不可用的例子 ---- 行为 菜单出现在app内所有其他UI元素之上。 ?...将菜单放置在触发菜单元素的下方会将其与上下文环境分开（如下图）。 ? 关闭菜单 可以通过点击菜单外部或点击触发菜单的元素（如果可见）来关闭菜单。 选择一个菜单项后也应该关闭菜单。...·简单菜单始终在屏幕的左侧和右侧保持16dp的留白（手机）或24dp留白（平板）。 ? ·如果简单菜单中的文本长到需要换行，就改为使用Simple Dialogs，因为可以有不同高度的行（如下图）。...·内容可滚动时，菜单一直显示滚动条。 ·简单菜单的最大高度应小于页面高度的一行或多行。 这确保了可点击简单菜单之外的区域来关闭菜单。 ·不在菜单中重复展示已选项（同Menus）。
大多数使用标准系统提供的UI元素（如导航栏，表格和集合）的应用程序会自动适应设备的新外形。背景材料延伸到显示器的边缘，并且UI元件被适当地插入和定位。...如果您的应用假定固定状态栏的高度用于将内容定位在状态栏的下方，则必须更新您的应用，才能根据用户的设备动态定位内容。...同样，全屏iPhone X图稿在显示时被裁剪或被柱状显示全屏显示在4.7 寸iPhone上，确保重要的视觉内容保持在两种显示尺寸上。 避免将交互式控件明确放置在屏幕底部和角落。...不要重复系统提供的键盘功能。在iPhone X上，即使使用自定义键盘，Emoji / Globe按钮和Dictation按钮也自动显示在键盘的下方。...您的应用程序不能影响这些按钮，因此避免在键盘中重复这些按钮造成混乱。请参阅自定义键盘。 资源 下载Photoshop和Sketch 资源中的 iPhone X UI设计模板。 原文链接
Always show full path in window header(始终在窗口标题中显示完整路径) 始终在窗口标题中显示完整路径，开启前效果: 开启后效果: Display icons in...Greyscale(灰度): 建议此选项用于非LCD显示器或垂直放置的显示器。...No antialiasing(无抗锯齿):此选项可用于高分辨率的显示，其中非抗锯齿的字体渲染速度更快，并且外观可能更好。...LCD显示器或垂直放置的显示器。...No antialiasing(无抗锯齿):此选项可用于高分辨率的显示，其中非抗锯齿的字体渲染速度更快，并且外观可能更好。 \5.
不要换行不要缩小 目的地icon（可选） Icon 可以对标签作为目的地的进行补充。 使用时，应始终放置在文本之前。 App 内组件和内容应参考这些图标。 ?...如果 navigation drawer 占了页面的整个垂直高度，则可以在 header 区域放置品牌元素或产品名称 ?...如果 navigation drawer 被 top app bar 截断，请勿在 header 中放置品牌元素或产品名称。 在这种情况下， top app bar 是该内容的更合适的地方。...Modal navigation drawers 高于 app 的大部分 UI，并且不会影响屏幕的布局网格。...滚动 Bottom navigation drawers 一旦打开至全屏高度，就可以在内部滚动。 当最初打开到屏幕高度的50％时，在显示其他项目之前，必须将 drawer 拖到屏幕高度。
UI Kit是一种定义通用界面元素的编程框架，这个框架不仅让APP在视觉外观上保持一致，同时也为个性化设计留有很大空间。...页面元素通常会显示有多少页面，多少屏，或者多少数量的内容是当前可用及可见的。如果你在滚动视图中显示页面控制元素，则需要关闭滚动视图中的滚动条以免为用户带来困扰。...以上所有系统提供的标准列表单元格样式，同样都支持图形元素，例如勾选图标或其他指示性控件。当然，添加这些元素会减少标题和子标题的可用空间。 保持文本言简意赅，避免显示不全。...文本视图可以是任何高度，并可以通过滚动的方式显示额外的内容。 默认情况下，文本视图中的文本是左对齐的，并使用黑色的系统字体。如果文本视图可编辑，则在视图内部点击时，屏幕下方会弹出键盘。 ?...还应该在启用了辅助功能选项（例如粗体文本）的情况下测试内容单显示情况。 显示恰当的键盘类型。iOS提供了几种不同的键盘类型，每种键盘都对应着一种具体的输入方式。
而在约束布局 1.1 版本中，通过允许您轻松地将任何视图限制为百分比宽度或高度，一切将变得很简单。 ? 使用百分比指定按钮的宽度，以便在保持设计效果的同时适应可用空间。...android:layout_height="wrap_content" app:layout_constraintWidth_percent="0.7" /> 链条 通过链条功能来放置多个元素可以让你配置它们该如何填充可用空间...在布置国际化字符串或显示用户生成的无法预测大小的内容时，屏障非常有用。 ? 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外，并且您可以使用它来限制其他视图。...在上面这个例子中，右视图被限制为始终处于最大文本视图的末尾。 群组 有时您需要一次显示或隐藏多个元素。为了支持这个，约束布局增加了群组功能。...当您有多个需要显示或陈列在一起的元素时，这将很有用。
而在约束布局 1.1 版本中，通过允许您轻松地将任何视图限制为百分比宽度或高度，一切将变得很简单。 ? 使用百分比指定按钮的宽度，以便在保持设计效果的同时适应可用空间。...android:layout_height="wrap_content" app:layout_constraintWidth_percent="0.7" /> 链条 通过链条功能来放置多个元素可以让你配置它们该如何填充可用空间...在布置国际化字符串或显示用户生成的无法预测大小的内容时，屏障非常有用。 ? image 屏障允许您通过几个视图来创建一个约束。 屏障将始终将自己置于虚拟群组之外，并且您可以使用它来限制其他视图。...在上面这个例子中，右视图被限制为始终处于最大文本视图的末尾。 群组 有时您需要一次显示或隐藏多个元素。为了支持这个，约束布局增加了群组功能。...当您有多个需要显示或陈列在一起的元素时，这将很有用。
改进产品的无障碍功能可以增强所有用户的可用性，这是非常值得做的事情。 Material design 的内置的无障碍功能将帮助你的应用适应所有用户。本节内容主要适用于移动端 UI 设计。...无障碍调色板 为应用选择支持可用性的主色、辅助色和强调色。确保元素之间有足够的颜色对比度，以便视力低下的用户也可以使用你的应用。...视觉反馈（如标签、颜色和图标）和触摸反馈向用户显示了可用的 UI。 导航应该具有清晰的任务流程，和最少的步骤。在频繁使用的任务上，应该实现聚焦控制、或控制键盘和读取焦点的功能。...层次 根据项目的相对重要性，将项目放置在屏幕上。...错误示例 此命令 “点击” 是不准确的，因为这不是激活此控件的唯一方式（它也可以通过按下键盘、开关切换或盲文显示来激活）。
大多数使用系统提供的标准 UI 元素（如导航栏、表格和集合）的应用程序能够自适应设备的新外形。背景材料可以延伸到屏幕的边缘，而且 UI 元件也能够被适当地插入和定位。 ? ?...iPhone 上的显示高度为 4.7 英寸，并且它的屏幕上提供了更多的垂直空间内容，状态栏占据了你的应用程序本来可以使用的屏幕区域，状态栏还显示了对人们有用的信息，只有在交换附加值时候才能被隐藏。...避免将交互式控件放置在屏幕最底部和角落里。人们可以使用显示屏底部的滑动手势来访问主屏幕和对应用程序进行切换，这些手势可能会覆盖掉你在此区域中设定的自定义手势。另外屏幕的两个角落令人很难进行有效操作。...不要遮挡或突出显示关键显示特性。不要隐藏设备的圆角和传感器外壳，也不要通过在屏幕顶部和底部放置黑色条的方式来突出主屏幕的指示器。...在键盘的下方会自动显示Emoji/Globe 和 Dictation 按钮。你的应用程序并不能影响这些按钮，所以不要在你的自定义键盘中出现这些按钮，以免造成混乱。 请参阅 自定义键盘。
这样能够保证在关联特定意义的按钮改变了外观的情况下，你的应用中的UI仍然是可用而有意义的。...即使标签当前不可用，也不要把它从标签栏中删除。让某些标签时而出现时而隐藏，会让用户觉得你的应用UI不稳定而且难以预测。最好的解决方式是确保每个标签都可用，然后给用户解释某个标签的内容不可用的原因。...无论是平铺型还是分组性，用户点击某一行中的某一项时都可以显示一个选项列表。当用户点选了一个不属于表格行的按钮或者其他UI元素的时候，可以使用平铺型表格视图来展示唤起的选项列表。 展示层级信息。...，将唤起键盘（键盘的布局和类型取决于用户的系统语言设置） 始终确保文字的易读性。...想要了解可用键盘类型，可以参考UIKeyboardType.想要了解如何在管理你的应用中的键盘，请参考Managing the Keyboard. 4.2.13 网络视图 网络视图是一个可以展示丰富的HTML
UI Kit是一种定义通用界面元素的编程框架，这个框架不仅让APP在视觉外观上保持一致，同时也为个性化设计留有很大空间。...搜索栏可以单独显示，也可以显示在导航栏或内容视图中。当显示在导航栏中时，可以将搜索栏固定在导航栏中，以便始终可以调用。也可以将其折叠，当用户向上滑动时展开显示。...有几种常见的技术可以做到这一点： · 在APP中使用导航栏，该导航栏会自动显示状态栏背景，并确保内容不会显示在状态栏背后 · 在状态栏背后显示自定义图像，如渐变色或纯色 · 在状态栏背后放置模糊的视图...所有页面的标签栏应保持相同的高度，并且在弹出键盘时隐藏。 标签栏可能包含N个标签，但可见标签的数量因设备大小和方向而异。...如果在某些情况下可以使用标签，但在其他情况下则无法使用，则应用程序的界面将变得不稳定且不可预测。确保所有选项卡始终处于启用状态，并说明为什么选项卡内容不可用。
有各种可用的Fiori元素模板。以下是SAPUI5 App开发中最常用的那些： 列表报告模板 –由列表和对象页面组成。...OData集合应该始终是整个数据模型的主要实体。在这里，我们必须选择航空公司实体，因为它是主要实体。OData导航必须是必须在导航上显示的下一个实体。 7.单击下一个选项卡中的完成，将创建项目。...由于未放置任何UI元素，因此Fiori应用程序中不会显示任何标签或其相应的值。为了在应用程序中显示智能表，窗体，字段等，我们利用UI批注将UI元素放置/放置在Fiori应用程序上。...将屏幕中的编号与UI注释表中的编号进行比较。 同样，我们为航班信息和航班时刻表创建元数据。以下是构建元数据并使用UI注释正确放置后的Fiori应用程序。...使用所有UI注释和Fiori元素模板，现在可以构建类似Display的应用程序。
它还可以设置UI元素的层级关系，用于控制UI元素的显示顺序。在运行时，Canvas Renderer会根据UI元素的层级关系和参数来渲染UI元素，并将其显示在屏幕上。...它是一个容器，可以包含其他UI元素，如文本、按钮、图像、滚动视图等。Canvas可以在场景中放置，并且可以在屏幕上显示出来。...垂直布局组越接近其偏好高度，每个子布局元素也越接近偏好高度。 如果垂直布局组高度大于其偏好高度，则会根据各子布局元素的灵活高度按比例为子布局元素分配额外的可用空间。...使用Aspect Ratio Fitter可以创建具有一致纵横比例的UI布局，使UI元素的纵横比例始终保持一致，无论屏幕尺寸和分辨率如何变化。...与其他交互控件一样，输入字段本身不是可见的 UI 元素，必须与一个或多个可视 UI 元素组合才能显示。 用于在UI界面中显示可编辑的文本框。
在Android中，要在单个屏幕上显示多个UI视图，请使用Fragments，它们类似于可在应用程序的Activity中运行的可重用组件。...widget的方向仅仅是其宽度相对于高度的一个系数。...如果一个[Column]部件的宽度超过了它的高度，它的方向是横向的，即使它以垂直的形式显示其子元素。...3.1.5 FractionallySizedBox FractionallySizedBox widget将其子元素的大小调整为可用空间的一小部分。...AspectRatio 可以使用AspectRatio小部件将子元素的大小调整为特定的长宽比。
在键盘显示时它未将Activity的Screen向上推动，所以你Activity的view的根树的尺寸是没有变化的。 在这种情况下，你也就无法得知键盘的尺寸，对根view的作相应的推移。...} // 获取界面可用高度，如果软键盘弹起后，Activity的xml布局可用高度需要减去键盘高度 private void possiblyResizeChildOfContent...() { //1､获取当前界面可用高度，键盘弹起后，当前界面可用布局会减少键盘的高度 int usableHeightNow = computeUsableHeight(...= usableHeightPrevious) { //3､获取Activity中xml中布局在当前界面显示的高度 int usableHeightSansKeyboard...= mChildOfContent.getRootView().getHeight(); //4､Activity中xml布局的高度-当前可用高度 int
一个显示在应用底部的材质小部件，用于在少量视图中进行选择，通常介于3到5之间。 底部导航栏由文本标签，图标或两者的多个项目组成，并放置在一块材料的顶部。 它提供了应用程序顶级视图之间的快速导航。...在这种情况下，假定每个项目将具有不同的背景色，并且背景色将与白色形成鲜明对比。...输入和选择 TextField 触摸文本字段将放置光标并显示键盘。 TextField部件实现了这个组件。 ? Checkbox 复选框允许用户从一组中选择多个选项。...ExpansionPanel 扩展面板包含创建流并允许轻量级地编辑元素。 ExpansionPanel小部件实现了这个组件。 ? SnackBar 带有可选操作的轻量级消息，简要显示在屏幕底部。...布局 ListTile 单个固定高度的行，通常包含一些文本以及前导或尾随图标。 ? Stepper 材质设计步骤部件，通过一系列步骤显示进度。 ? Divider 一个逻辑像素粗横线，两边都有填充。
例如：无论可用的屏幕空间多大，你都可以约束一个按钮，使其始终水平居中并定位在距离图像下方8pt的位置。 当检测到某些环境变化（称为特征）时，自动布局会根据指定的约束自动调整布局。...较大的元素也更容易点击，这对于处在极易分散用户注意力环境下的APP尤为重要，例如用户在厨房或健身房。 通常将主要内容或元素放置在屏幕的上半部分中，并在从左至右的阅读习惯中放置在屏幕的左侧附近。...设计全屏体验 扩大可视元素以填满屏幕。确保背景延伸到显示器的边缘，并且垂直方向可以滚动的布局（如表和集合），一直延伸到底部。 避免在屏幕底部和角落放置交互式控件。...通过对背景色进行采样并修改饱和度和值，Vibrancy 使UI元素变亮或变暗。充满活力的用户界面元素能更好地与材质相结合，并增强半透明效果。 标签和填充每个都提供几个级别的活力值；分隔符只有一个级别。...当人们按已连接的蓝牙键盘上的空格键时，播放或暂停媒体播放。人们希望通过按空格键键来控制媒体播放是一种互动，而不管他们使用的键盘是什么。 确保自定义视频播放器的行为符合预期。
第一步：创建Canvas画布 首先，我们需要在HTML中放置一个Canvas元素，这个元素将承载我们的游戏画面： 的就是用JavaScript控制它的大小。 第二步：让Canvas自动全屏 为了让Canvas全屏显示，我们需要在页面加载时动态设置它的宽度和高度为浏览器窗口的大小。...我们通过canvas.width = window.innerWidth设置Canvas的宽度为浏览器窗口的宽度，canvas.height = window.innerHeight设置高度为窗口的高度...而且在这个过程中，不论玩家如何调整窗口大小，游戏画布始终都能覆盖整个窗口区域，游戏内容不会被压缩或者扭曲。...多设备适配：在移动设备上，全屏Canvas也是不错的选择，但注意可能会遇到软键盘弹出或者横竖屏切换的情况，需要额外处理这些变化。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
