1、点击[命令行窗口] 2、按键 3、点击[命令行窗口] 4、按键 5、点击[命令行窗口] 6、按键
你可以同时提供自定义的蒙版图像，以便系统在转场过渡时使用此蒙版为按钮标题设置动画效果。 不要包括多段面包屑路径。后退按钮始终执行单个操作：返回上一屏幕。...如果你认为没有到当前屏幕的完整路径，因此导致用户迷路，那么可以调整APP的层次结构，使其更加扁平。 给带有标题的按钮留出足够的空间。...如果导航栏包含多个文本按钮，需要通过在按钮之间插入固定的空格项目来增加分隔。以此来避免按钮文本同时显示造成按钮无法区分的问题。 考虑在导航栏中使用分段控件，使APP的层次结构更加扁平。...当您在搜索字段中键入时，“股票”会显示结果列表。随时点按一个，而无需再输入任何字符。 可以将搜索栏下添加范围栏，缩小搜索范围。 ? 不鼓励使用范围栏，应当努力改善搜索结果。...在iPhone上侧边栏又分为半屏和全屏，手机QQ、滴滴打车都从原来都半屏改为了全屏，曹操专车采用的是半屏。 ? 您可以通过使用边栏样式列表并将其放置在拆分视图的主列中来创建边栏。
浮动按钮(Raised button)， 常见的方形纸片按钮，点击后会产生墨水扩散效果。 扁平按钮(Flat button)， 点击后产生墨水扩散效果，和浮动按钮的区别是没有浮起的效果。 ...编辑 ** 卡片布局准则 ** 字体设计 正文：14 sp 或 16 sp 标题：24 sp 或更大 扁平按钮：Roboto Medium, 14 sp, 10 sp 字间距 移动设备上的卡片间距...编辑 编辑 靠近屏幕边缘时，位置可适当错开。 编辑 菜单过长时，需要显示滚动条。 编辑 菜单从当前选项固定位置展开，不要跟随点击位置改变。 ...Snackbars在移动设备上，出现在底部。在PC上，应该悬浮在屏幕左下角。 编辑 不一定要用户响应的提示，可以使用Snackbars。非常重要的提示，必须用户来决定的，应该用对话框。 ...编辑 滚动时，如果列表较长，小标题会固定在顶部，直到下一个小标题将它顶上去。 编辑 存在浮动按钮时，小标题要让出位置，与文字对齐。
一般最多显示12列，如果只想要显示四列，可以将12列均分到四列上） 参数介绍： col-lg-3：lg（当屏幕大于1200时，大屏幕） con-md-3：md...（在002-1200之间的屏幕） con-sm-3：sm（768-992之间的屏幕） con-xs-3：xs（小于758的屏幕） 2.辅助类 文字类:text- text-primary：默认基础字体颜色... 用户名 //通过点击文字也可以选中输入框...激活状态和禁用状态 激活：active 禁用：disabled 按钮式的下拉菜单 将ul列表转换为下拉菜单，添加dropdown-menu类 给button添加dropdown-toggle类 利用data-toggle...堆叠式：nav-stacked ? 堆叠式pills：nav-pills nav-stacked ? 8.导航条：navabar ?
在屏幕处于同一方向时，最好不要改变不同屏上导航栏的背景图片、颜色和透明度。 确保你自定义的返回按钮的外观与操作仍然像一个返回按钮。...如果你担心用户在没有了这种多节式的、如同面包屑一般的返回按钮后会迷路，那么你也许该好好考虑如何扁平你的信息层级了。 在用户需要专注于内容的时候，可以考虑隐藏导航栏。...结果列表图标(The results list icon)。结果图标说明此次搜索有搜出结果。当用户点击它时会出现用户最近一次搜索的搜索结果。 ? 提示(Prompt)。描述性标题，我们称之为提示。...为每一个活动设计清晰简练的文字标题。标题将会出现在活动菜单图标的下方。一般来说短标题效果最好，因为它在屏幕上的显示效果更好并且更容易本地化。...无论是平铺型还是分组性，用户点击某一行中的某一项时都可以显示一个选项列表。当用户点选了一个不属于表格行的按钮或者其他UI元素的时候，可以使用平铺型表格视图来展示唤起的选项列表。 展示层级信息。
使用无边框的按钮。默认情况下，所有的栏(bar)上的按钮都是无边框的。在内容区域，通过文案、颜色以及操作指引标题来表明该无边框按钮的可交互性。...通过使用一个在主屏幕上方的半透明背景浮层，这样文件夹就能清楚地把内容和屏幕上其他内容区分开来。 ? 如图所示，备忘录（Reminders）以不同的层级展示内容条目。...今天的日期依然处于高亮状态，年份会显示在返回按钮处，这样用户可以清楚地知道他们在哪儿，他们从哪里进来以及如何返回。 ?...确保用户在退出模态视图时可以预期操作的结果。 一个任务需要多层级的模态视图时，确保用户理解点击非最高层级下的完成按钮的结果。点击一个低层级视图上的完成按钮是完成这个视图中任务的一部分，还是整个任务。...返回按钮使用多个线索指明其可交互并传达其功能:它出现在导航中，显示了一个指向后方的图标，使用了关键色，并且显示了上一级页面的标题。 ? 一个图标或者标题提供了清晰的名称指引用户点击它。
该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息。...是项目无序列表的容器。...每一个单独的项目都使用绝对定位，并设置100%的高度和放置在它们父容器.cd-project-info的左上角位置。开始它们是堆叠在一起的。...这样就是3个项目分别在同一个屏幕中显示1/3的部分。...当用户点击了.cd-nav-trigger按钮之后，所有的项目被移动到屏幕的下方，这时全屏导航菜单被显示出来。
MJPopupViewController - 实现弹出视图的各种弹出和消失效果，包括淡入淡出（淡入，淡出），从屏幕上方飞进，下方飞出，从屏幕左方飞进，右方飞出等等效果，弹窗。...kxmenu - kxmenu弹出菜单，点击视图上任意位置的按钮，会弹出一个菜单，并且有个小箭头指向点击的按钮，类似气泡视图。弹出的菜单位置会根据按钮的位置来进行调整。...QBPopupMenu - QBPopupMenu弹出菜单，实现类似UIMenuItem的弹出菜单按钮。点击按钮，弹出一个菜单，上面可以排列多个按钮。纯代码实现，不需要任何图片。...DXPopover - DXPopover微信右上角的+点击展示列表效果，弹窗菜单。...CustomPopOverView - 自定义弹出视图，内容支持传一组菜单标题，也支持自定义view，或者自定义viewController，支持任意按钮触发，会显示在按钮底部，也支持切换按钮的对齐方式
四.虚拟桌面 Win10在任务栏上新增了Task view按钮（快捷按钮win+tab），点击后可查看当前桌面正在运行的程序，在底部区可快捷添加、切换、关闭虚拟桌面。...五.Metro应用桌面窗口化 在Win10中，metro应用默认以窗口化方式运行，在应用标题栏图标右侧的“…”菜单中可点击“全屏显示”来全屏化。 ?...九.语音助手Cortana 任务栏上新增了搜索按钮，点击后会打开一个小的搜索窗口。默认先搜索本机程序，然后再搜索互联网内容，也会给出相应的搜索建议。 ?...十.新增“主页“文件夹 点击任务栏上的文件资源管理器按钮，默认会进入一个名为“主页”的文件夹，里边包含了一些用户文件夹。相关资料有待补充。 ?...总结 Win10在变化上的一些缘由和启示： 照顾传统PC用户。 迎合扁平的设计趋势。 功能在部署完善，跟上竞争者步伐。 微软在不断优化大屏系统体验。 跨终端统一体验。
未点击的按钮投射出一个稀薄地阴影——在放大的截图中能看的更清楚。 点击后的按钮，底部依然比顶部还要暗一些，并且整个按钮全都更暗。这是因为它与屏幕本身处于同一个平面，光线就不能轻易的照到它了。...常见向内凹陷的视觉元素： 文本输入框 点击后的按钮 滑块 单选按钮（未选中） 复选框 常见向外突出的视觉元素： 按钮 (未点击) 滑块按钮 下拉控件 卡片 选中的单选按钮 弹框 扁平化设如何 扁平化设计是一种视觉风格...在平面设计中，当点击元素时，可以适当加些阴影效果增强体验。 扁平化设计的另一个例子:谷歌的 Material Design language。...从较难的问题开始(在小屏幕上可用的应用程序)，然后采用更容易的问题的解决方案(在大屏幕上可用的应用程序)。 这里有另一个类似的结束:黑白优先。...或者看看列表标题。“播放列表” 和下划线之间有 15px 的空间。这比字体本身还要高，更别提每个列表之间间隔了 25 个像素了。 顶部的导航条有更多的空间。文字“搜索音乐”占了整个导航条高度的20%。
将“取消”按钮作为默认按钮，并使用粗体文本。 允许用户通过退出APP到主屏幕来取消警示框。当警示框出现时，退出到主屏幕可以退出APP。这个操作产生与点击取消按钮的效果是相同的。...非模态浮层可以通过点击屏幕上浮层以外的部分或浮层上的按钮来取消/关闭。而模态浮层则是通过点击浮层上的取消或其他按钮来关闭/取消的。...通过在全屏模式视图中显示信息而不是在弹出窗口中来利用所有可用屏幕空间。 使用“关闭”按钮仅用于确认和指导。...通过点击屏幕非浮层区域部分，很容易误点而关闭非模态弹出窗口。仅当用户点击取消按钮时才取消当前的任务。 在屏幕适当的位置显示浮层。浮层的箭头应尽可能直接指向触发它的元素。...可为“删除”按钮自定义标题。如果某行支持删除并且有助于提供清晰性，请将系统提供的删除标题替换为自定义标题。 在用户做出选择时给予相应的反馈。用户在与列表进行交互时，希望被点击的列表可以突出显示。
三种标准按钮实例 选择按钮样式 选择按钮样式取决于按钮的优先级，屏幕上的组件数量和屏幕布局。...推荐的按钮放置 标准提示框 屏幕上的按钮对齐方式：右边 将肯定性按钮放在右侧，否定性的放在左边。 表单 屏幕上的按钮对齐：左边 将肯定性按钮放在左侧，否定性的放在右边。...---- 扁平按钮(Flat button) 用法 平面按钮印在材料上。 不会浮起，但点击时会填充颜色。...可以在以下位置使用扁平按钮： ·在 toolbars上 ·在提示框中，将按钮操作与对话框内容统一起来 ·Inline, with padding，因此用户可以轻松找到它们 ?...例如，可用状态可以显示为文字，颜色或icon的列表。 当用户与按钮交互时，Menus会覆盖按钮并显示可能的状态。 按下某个状态会取消Menus并更新按钮以显示此新状态。
关闭提示框 提示框可以通过点击提示框外部或点击系统后退按钮（在Android上）来关闭。 有时候，用户必须做出选择动作后才能关闭提示框。...标题要明确告知结果 ---- 简单菜单 仅限手机和平板电脑 消除歧义：简单提示框显示列表项目的详细选项或提供相关操作。 简单提示框可以显示与简单菜单相同的内容。...不该有明确的取消按钮 明确说明 ·在简单提示框中，行高可以变化； ·简单的对话框在屏幕上垂直和水平都居中显示； ·提示框与屏幕左右边缘的距离应该至少为40dp，距离顶部和底部至少为24dp； ·该对话框的内容距离提示框边缘为...要提供明确的“取消”与“确定”按钮 ---- 全屏提示框（Full-screen Dialogs） 仅限手机：由于空间有限，全屏幕对话框可能更适合使用在手机，而不是屏幕较大的设备上。...全屏提示框支持日期选择器 操作 在屏幕顶部放置全屏对话框的确认和离开操作。 确认 屏幕右上角的确认按钮使用描述性动词，例如：保存，发送，分享，更新或创建。
由于这是一个基本的例子，我们将创建两个屏幕，每个屏幕包含一个按钮。 点击第一个屏幕上的按钮将导航到第二个屏幕。 点击第二个屏幕上的按钮将使我们的用户回到第一个！ 首先，我们将设置视觉结构。...现在我们在第二个屏幕上，我们如何关闭它并返回到第一个屏幕？...路线 定义主屏幕 添加一个启动选择屏幕的按钮 在选择屏幕上创建两个按钮 轻触一个按钮时，关闭选择屏幕 在主屏幕上使用snackbar显示选择 1.定义主屏幕 主屏幕将显示一个按钮。...它将包含两个按钮。 当用户点击按钮时，应该关闭选择屏幕并让主屏幕知道哪个按钮被点击！ 现在，我们将定义UI，并确定如何在下一步中返回数据。..., ); 5.在主屏幕上使用snackbar显示选择 既然我们正在启动一个选择屏幕并等待结果，那么我们会想要对返回的信息进行一些操作！ 在这种情况下，我们将显示一个显示结果的Snackbar。
Google 的新 MD 设计规范有了一些更加细节的规定，通过一种叫“纸片”的方法来创造更多的层级关系。 2. 实体按钮 Android 有一个返回按钮，点击它可以返回上一个屏幕。 ?...iPhone 上则没有这样一个按钮，所以需要有一种方式能够让用户回到先前的屏幕。通常的解决方案是在屏幕的左上角放置一个返回键。 3....所以，我推荐你在设计的第一页就定义好标题栏的样式，然后在其他的屏幕上使用一个占位的方框来替代，这样能省下不少时间，但是你应当向程序员说明标题栏在不同的屏幕上都是一样的样式。...在 iOS 上，分类控制控件的外观很像我们刚才提到的按钮。而在 Android 上，通过间距来展现它们的分离关系，同时用下划线来标明目前所处的位置。 ? 11....Android 的警告框使用的按钮样式，就是我们先前提到过的扁平按钮，你可以在 MD 说明文档中找到它们应有的尺寸。动作按钮位于卡片的右半部分。实际上，所谓的按钮其实就是一个文本。
点击 ，通过以下方式调节光圈值： 设置背景光效：选择虚拟光圈后，在快门下方点击 ，或在快门按键附近上滑，调出百宝箱，点击 ，选择想要的效果。 如选择物理光圈，不支持设置背景光效。...在控制中心，点击播控中心右上角的 ，然后点击列表中的某个设备，将手机的音频投播至对应的设备中。 如播控中心未出现投音设备列表，请点击 切换。...点亮屏幕，您可实现以下操作： 在锁屏实况窗胶囊上滑，展开播控中心卡片，可实现快速切换曲目，调整进度等操作。 点击锁屏实况窗卡片左侧的应用图标，进入播控中心实况窗沉浸态，进行更多操作。...点击录音尾部的 > 查看录音转写，设备会按照声纹自动识别发言人，并将转写结果按照不同的发言人和发言顺序分段显示。您还可以对转写结果进行如下操作： 点击 ，可隐藏或呈现某发言人的录音转写结果。...点击 ，可搜索转写结果中的关键字，搜索结果会高亮显示。 点击 > 复制全文，可将转写结果全文复制粘贴到需要的地方。 点击 > 文本替换，可对转写结果中的某些内容批量替换。
前言其实标题有点吹牛逼了，谁也不敢说能完美适配平板，只能说尽力去做，包括显示和使用的各个方面尽力去做，才有可能在更多的平板设备上更加完美的运行起来，因为安卓的设备实在是太多了，之前手机在卷，现在平板也一样在卷...API 调用，确定应用如何显示其 activity（并排或堆叠），系统处理其余的工作，根据创建的配置确定呈现方式。...鼠标和触控板支持鼠标或触控板在电脑上我们使用的太多了，一般有左边按钮点击、右边按钮点击、悬停以及拖拽，下面咱们来分别看看吧。...点击点击分为左键点击和右键点击，左键点击就是普通按下事件，就不细说了，这里主要来看下右键点击。右键点击会使应用显示上下文菜单的所有操作（如轻触并按住列表项）也应该对右键点击事件作出反应。...这方面最常见的两个示例如下：通过改变鼠标指针图标，向用户表明某个元素是否具有交互行为，如可点击或可修改当指针悬停在大型列表或网格中的项目上时，向这些项目添加视觉反馈View.setOnHoverListener
对比度 对比度属于可阅读范畴，检测结果显示“背景色和前景色没有足够的对比度”（点击 文本元素必须与背景有足够的颜色对比度(https://dequeuniversity.com/rules/axe/3.3...表单控件的名字和标签 检测结果显示“表单元素没有关联的标签”（点击 input 元素必须要有标签(https://dequeuniversity.com/rules/axe/3.3/label)查看更多...需要手动检查的项目，我们在第二小节中介绍。 4. 通过的测试项 通过的测试项，包括：按钮有可访问的名字、文档有标题、id 唯一、图片有alt属性等等。详见下图。 ? 5. 未应用到的项 ?...但此时，键盘焦点丢失 列表区 图像/标题/按钮 通过 通过 按Enter跳转至其它页面 翻页区 按钮 通过 通过 80% 1. 按Enter触发翻页2. 按Tab进行下一项3....按Tab+Shift进入上一项同理，可优化成“形式”的交互 屏幕阅读器 操作系统都有自带的屏幕阅读器，我们就直接用它了。
Widget 的高度是可定制的，并且可以包含按钮、文本、定制布局、图像等。 使用3D Touch将压力施加到主屏幕上的 app 图标时，widget 会出现在快速操作列表的上方。...人们还将他们关心的窗口 widget 添加到搜索屏幕，通过在主屏幕和锁定屏幕上向右滑动来访问搜索屏幕。 你的目标应该是设计一个人们想要添加到搜索屏幕的 widget。 ?...不要包含一个占空间的“打开app”按钮，而是让用户自己点击内容后即可在 app 中查看或修改内容。例如，在日历 widget 中，您可以点击事件以在日历 app 中打开它。...如果您使用自定义标题，请考虑在 app 名称前加上前缀。例如，用于显示附近位置的Map 的 widget 标题为“Maps Nearby”。...·为快速操作列表选择一个 widget 如果 app 有多个 widget ，请选择一个出现在使用3D Touch在主屏幕上向 app 图标施加压力时显示的快速操作菜单中。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
