开发者还应该让应用支持纵向和横向模式，因为更大的屏幕更可能在横向模式下使用。稍后我们会介绍 Material 自适应组件，来帮助您更好地利用更大的屏幕空间。...用户可以并排比较两个产品，在写文档时参考笔记，或者在规划事件时保持日历可见 输入模式 由于许多人使用大屏幕来提高生产力，平板电脑应该支持基本的键盘、鼠标和手写笔输入。...如果您使用的是带铰链的设备，并且铰链挡住了部分屏幕，它将自动把内容放置在铰链两边。 我们还引入了锁定模式，允许您控制窗格重叠时的滑动操作 (也支持编程切换)。...而在可折叠设备或平板电脑上，如果有空间并排显示两个视图，锁定模式会被忽略。 NavRail 垂直导航栏 在功能上等同于底部导航，并在大屏幕上提供了更符合人体工程学的导航体验。...因为在这种情况下，使用底部导航栏会造成遮挡，从而减少可见内容的数量，特别是当平板设备横向使用时。 其他组件 我们还对其他多个组件进行了更新。
众所周知，当初微软在Windows 8上做了非常大胆的变革，除了开创性的Metro设计语言，传统桌面和平板两种模式的融合也是一大特色，可这两种操作模式在使用体验上的不一致也成为Windows 8饱受用户诟病的原因之一...简单来说，在Windows 10上将真正实现以尽可能少的开发量即可打造全平台都可运行的应用，从电脑、平板、智能手机，甚至到Xbox One都无缝过渡，并且保持整体一致的用户界面和操作体验。...这套控件的视觉元素和交互体验都是整体一致的，但针对不同的操作场景和设备有细微不同的体现，比如触摸屏、应用弹出控件等，当用户触摸时自动使用较大面积按钮，使用键盘时与之相反。 ?...“平板模式”。...· 探索新的导航解决方案 既然Windows 10已决定弱化横向浏览，那必然需要一种更好的导航形式来替代之前的大字号横滑导航，大部分的通用应用都开始尝试采用“汉堡菜单”（Navigation Drawer
应用在大尺寸屏幕 (平板、可折叠设备甚至是 Chrome OS 和台式个人电脑) 上的使用体验是我们的关注点之一: 在过去的一年中，大尺寸屏幕的设备越来越受欢迎，用户使用率也越来越高，如今已增长到 2.5...响应式导航 在平板电脑这类宽屏幕设备或者横屏手机上，用户们通常握持着设备的两侧，于是用户的拇指更容易触及侧边附近的区域。同时，由于有了额外的横向空间，导航元素从底部移至侧边也显得更加自然。...△ 左图: 平板电脑的竖屏模式 (单窗格)。右图: 平板电脑的横屏模式 (双窗格)。 我们采用了 SlidingPaneLayout，它为上述问题提供了一个直观的解决方案。...可能有些反直觉的是，当平板电脑横屏时属于窄尺寸模式，而当其竖屏使用时属于宽尺寸模式。...△ 平板横屏时的搜索应用栏 (窄模式) △ 平板竖屏时的搜索应用栏 (宽模式) 此前，我们通过在搜索 Fragment 的视图层次中的应用栏部分使用 标签，并提供两种不同版本的布局来实现此功能
Standard drawers 可以永久可见或通过点击导航菜单图标打开和关闭。 它们只能用于平板电脑和台式机。 在手机上，使用 modal drawers 代替。 ?...它们可以在平板电脑和台式机上被 standard drawer 所取代。...它们可以在平板电脑和台式机上使用，但由于屏幕尺寸有限，它们不适合手机。...Dismissible drawer：如果用户可能将注意力集中在屏幕内容上，并且需要更加低频访问其导航目的地时，则可以使用 dismissible drawer。 ?...移动端打开（横向） 在移动端的横向方向上，较高的 bottom navigation drawers 会自动打开到全屏模式。 ? ?
原则 ·始终保持 Top app bar 出现在 app 中每个屏幕的顶部，并且可以在滚动时消失。 ·引导 Top app bars 提供了一种可靠的方式来引导用户浏览 app。...Title (optional) App bar title 可以用来描述： ·用户当前所在的屏幕 ·用户当前所在的部分 ·正在使用的 app 默认情况下，titles 在电脑桌面上左对齐。...手机和平板电脑上标题的默认位置取决于平台。 ? 如果标题文本很长，请使用 prominent app bar 并将标题折叠为两行 ? ?...在滚动时，它们会增加海拔并让内容在它们后面滚动 ? 当向上滚动时，使用带有图像的 prominent top app bars 可以转换为正常的 top app bars。...他们不应该返回到 prominent 模式，直到用户滚动回页面的顶部。 Nesting actions 当屏幕大小调整时， top app bar 会随之调整大小。
随着科技的快速发展，触摸屏设计的应用无处不在，它们不仅仅使用于手机和平板，也在台式电脑上使用。由于台式电脑的规模和尺寸更大，此类触摸屏的设计可能会给设计师带来一些独特的挑战。...3.确保导航始终可用 2.jpg 大多数用户使用超大触摸屏的心态，与第一次访问网站类似，导航显得尤为重要。模仿这种场景进行设计，很容易就能吸引用户进入你的设计并与之交互。...需要注意的是，设计师要确保用户在访问不同的内容时，导航始终可用。 为你的产品设计一个导航模式时，最好采用一般网站普遍使用的导航模式，如将导航栏设置在屏幕上方或侧边栏中。...当用户访问不同的内容或页面时，也要确保导航不会消失。虽然主屏幕的设计可能只包含了几个较大的导航按钮，但其他的屏幕最好使用传统的导航格式，以便用户使用。 另外，在这些屏幕上尽量减少基于键盘的输入。...思考一下：在公共场所，许多超大屏或者小屏设备（如可移动的信息亭或大型平板电脑）都是便携式的。这会涉及到设备对互联网的访问，以及网络连接是否能正常工作。
△ 左侧: 手机上的导航展示。右侧: 平板上的导航展示。 调整后: 当屏幕变宽时，我们显示导航轨道 (navigation rail) 来取代底部应用栏。...△ 在大屏幕上的导航轨道 虽然是考虑到较大屏幕的设备而进行的此项更改，但由于腾出了更多的纵向空间来显示任务列表，横向模式显示的手机也能够因此受益。...△ 横向显示的手机上的导航轨道 双窗格布局 调整前 : 任务 (Tasks) 和归档 (Archive) 界面完全占满了整个显示宽度，并且点击列表中某一项目时，其对应的详细信息会覆盖显示之前的列表。...原本全屏显示编辑界面时，这种请求很容易被拦截，因为唯一离开此界面的方式就是使用返回键。...小结 随着平板电脑和可折叠设备逐渐流行，创建响应式用户交互界面变得比以往更加重要。
这款软件是专门为平板电脑或手写笔写板设计的，提供专业水平的绘图和插图工具，并配有丰富的命令选项、参数，提供灵活高效的插图设计和绘图功能，干净整洁的软件环境，友好的图形界面，可以快速地找到您所需要的工具，...点透视导向器，具有按扣切换，消失点锁定和水平线可见2、弯尺：在标尺工具中找到，使用“弯曲标尺”绘制曲线和扫掠。...5、自然地处理图层：使用混合模式和图层分组添加无限的图层。...6、四个对称尺寸：使用X，Y，XY和多达16个扇区的径向对称图形进行绘制，以实现完美对称的设计7、预测性中风：使用预测笔划使线条流畅，并将基本形状校正为圆形，三角形和矩形8、用手机扫描草图：使用手机或平板电脑扫描草图...专门为笔式交互设计的速写本 Pro让你可以将桌面电脑、笔记本电脑或平板电脑转换成数码画板。用户界面使用户轻松访问主机工具和功能，包括铅笔、标记笔、画笔、颜色、导航、图层和混合效果。
以下是《卫报》网站的一个例子，展示了为什么开放的断点是不好的！ 浏览器中有一个检查元素的小组件，即 logo。看看它有多少覆盖！当我看到这么多覆盖时，我就知道代码有问题了！...Open breakpoints 打开断点 当我们使用媒体查询时，有一个起始值但没有结束值。例如: Closed breakpoints 闭合断点 当我们使用具有开始和结束值的媒体查询时。...在这张图片中，HTML 是相同的，但移动设备+平板电脑和桌面版本看起来完全不同！ 我所做的是将“移动导航栏”的样式放在移动+平板电脑的断点上，将桌面的样式放在桌面断点上。...移动设备+平板电脑——适用于0像素至1000像素宽度 桌面版 - 适用于1001像素及以上的屏幕 现在，“移动导航栏”的样式不会影响“桌面导航栏”的样式，反之亦然。它们都被封装了！...只有当一个组件的所有断点都需要使用公共样式时，才使用公共样式！否则，只将它们放在相关的断点中 CSS覆盖是有害的！
使用常见的网站模式和界面，不要增加用户的学习成本。 1.png 二、关于滚动页面 6. 只要明确页面下方的折叠区域有更多相关的信息，用户就会向下滚动页面。 7....如果用户需要用小拇指去点击手机网站或应用程序，这说明界面上的交互目标太小。 24. 当用户拿着平板电脑时，大拇指最容易接触到的地方是屏幕的两侧和底部。 25....在设计移动布局时，考虑用户是否会单手或两只手使用设备的情况。 5.png 六、关于导航设计 28. 在网站上设置一个明显的路径供用户访问导航菜单。 29....如果你的网站层次结构超过3-4级，是时候考虑重新设计了。 30. 考虑使用粘性菜单导航(跟随浏览器滚动的导航)，特别是在较长的网页中或需要快速访问时。 31....一个好的网站导航并不会妨碍网页，使用后会消失在背景中。 32. 导航与网站应该保持一致，不能改变整个网站的风格。 33. 导航标签需要具体化，使用承载信息最多的单词，不要超过2-3个单词。 34.
介绍 在 Flutter 中，NavigationRail 是一个垂直的导航栏组件，用于在应用程序中提供导航功能。它通常用于更大屏幕空间的设备，如平板电脑和桌面应用程序。...垂直布局： NavigationRail 的垂直布局使其在平板电脑和桌面应用程序中尤其有用。在这些设备上，垂直导航栏可以更有效地利用屏幕空间，并提供更直观的用户体验。...以下是在不同的屏幕尺寸上响应式地使用 NavigationRail 的一些最佳实践： 6.1 适应平板电脑、桌面和移动设备的最佳实践 使用媒体查询： 使用 MediaQuery 来检测当前设备的屏幕尺寸和方向...： 对于横向屏幕方向的设备，如平板电脑和桌面，可以考虑将 NavigationRail 放置在页面的左侧或右侧，而不是顶部。...A: NavigationRail 适用于需要在应用程序中提供导航功能的情况，特别是对于平板电脑和桌面应用程序。它提供了一种直观的方式来浏览不同部分或执行导航操作。
从手机和笔记本电脑，再到平板电脑、电视甚至汽车，Android 应用每天都在各种设备上支持着数十亿人的工作、娱乐、交流和创造。当越来越多的人开始依赖您所构建的体验，人们的期望也跟着水涨船高。...手势导航的沉浸模式 API 改进 - 我们简化了沉浸模式，使手势导航在多种场景下，如观看视频、阅读书籍或玩游戏时，更简单、更连贯。...针对平板电脑、可折叠设备和电视的优化 - 随着越来越多的人开始在可折叠设备、平板电脑和电视等大屏幕设备上使用应用，现在是确保您的应用或游戏为这些设备做好准备的大好时机。...当我们接近最终产品时，我们也将邀请消费者试用，届时将开放 Android Beta 注册。敬请关注后续信息，但目前 Android 12 尚未提供 Beta 版本。...了解本次发布的完整信息，请访问 Android 12 开发者网站。
应该做什么： 1.不管设备如何，都应该提供相同的用户体验 用户会使用不同的设备来访问你的网站：他们可通过台式电脑或笔记本电脑，平板电脑，手机，音乐播放器甚至手表上访问您的网站。...如果用户是通过手机访问你的网站，他们应该能毫不费劲的找到他们需要的所有东西，就像他们在家里通过桌面端查看你的网站一样。 2.设计一个简洁，易用的导航 导航是可用性的基石。...3.更改已访问链接的颜色 链接是导航过程中的关键因素。当已访问的链接没有改变颜色时，用户可能会无意中重复访问相同的页面。 ? 了解用户已访问过哪些页面可以避免让他无意中重复访问相同的页面。...Basecamp使用的Z扫描模式 5.仔细检查所有链接 当用户点击站点上的链接并收到提示404错误页面时，用户可能很容易变得沮丧。...当你设计网站或用户界面时，你希望让用户通过网站或应用程序掌控其浏览速度和移动。 ? MacPro页面使用一些令人烦恼的滚动效果。它使用单页视差布局，其中的点表示页面的每个部分。
一、优化平板电脑体验 提升Android在平板电脑上的用户体验是谷歌近年的目标。Android N与平板电脑结合有很大的想象空间，多任务功能还能更有所加强，而不仅仅是停留在同时打开多个窗口。...此外，谷歌还将推出真正意义上的平板电脑定制版Android应用套件，以及可定制化导航键、DPI切换器、迷你应用窗口和系统界面调节等深度定制的新功能。...虽然Google不能使用甲骨文的Java API。但这并不影响Google使用甲骨文的OpenJDK这一开源Java开发工具。...这是一个基础的Google密码管理器，可以用来存储应用程序的密码，在重置系统或是更换设备时，能够实现无缝登录。这个功能的引入可以给用户带来便捷，但事实上现在还没有大量的应用支持这一功能。...十、重现暗色主题 短命的暗色主题只在Android M的开发者版本中短暂出现后就消失无踪。
作者 / Chrome OS 团队 从发布我们的首款平板电脑和可拆分式笔记本，到在日本和德国等新市场推出 Chromebook，我们一直在努力使 Chrome OS 设备的生态系统满足如今应用用户们的需求...随着人们越来越多地在大屏幕设备或者多型态设备上使用应用，开发者们的作品也得以吸引大量全新的用户。 Android 支持各种各样的大屏幕设备，包括平板电脑、可折叠设备、Chrome OS 笔记本等等。...△ 同一个界面针对不同屏幕的布局文件 导航模式 同时，您的应用在不同的屏幕尺寸上都应该易于使用。提供纵向、横向等布局，使得应用可以根据可用的屏幕宽度，在底部导航、侧边导航和侧边扩展导航模式之间切换。...Reply 适配多屏幕尺寸: material.io/design/mate… △ Reply 在屏幕尺寸不同时会采用不同的导航模式 多屏幕 当用户使用多个显示器时，两个屏幕之间通常会存在像素密度差异。...△ 一键安装 Android Studio 通过 USB 连接使用 ADB 调试 不再需要开发者模式，只需使用 USB 连接手机即可进行调试。
左：默认尺寸 右：最小尺寸 悬浮响应式按钮应该放置在离手机边缘至少16dp的位置，平板电脑/pc上至少需要离24dp。 ? 悬浮响应式按钮在聚焦时改变颜色，在选择时上浮。 ?...一致地使用圆形图标以在app间强制最重要的操作的一致性。 ? 不要给悬浮响应式按钮多余的维度效果。 ? ---- 行为（此部分见原网站） 默认情况下，悬浮响应式按钮在屏幕上以动画形式展开。...跨屏幕 横跨多个横向屏幕（例如顶部标签屏幕）的悬浮响应式按钮应该短暂消失，然后如果其动作改变就重新出现（此部分动图见原网站）。...触发 悬浮响应式按钮可以简单地触发动作或在某处导航。 触摸波动的动画向外扩展导致UI变化。 工具栏 浮动动作按钮可以在按下时变换成工具栏。...滚动就消失的工具栏适用于： ·最开始进入时需要完整工具栏的屏幕 ·长列表顶部或底部需要完整工具栏的屏 当用户通过滚动表示他们有兴趣查看主要内容时，节省了屏幕空间。
大屏手机填补了传统触屏手机与平板电脑之间的空白地带，有些大屏手机的屏幕甚至达到7英寸之巨，因此也获得了一个略显蹩脚的绰号——平板手机。 ? 这类设备虽然有着巨大的身形，但人们仍然会将其作为手机使用。...点击之后将悬浮按钮变形为横向工具栏或辐射菜单也是不错的交互模式。 ? 与分体式Action Bar模式类似，位于屏幕底部的、有可能导致误操作的悬浮按钮同样体现着妥协的初衷。...这种模式通常适用于Tab导航。在小屏手机上，用户可以相对轻松地点击顶部Action Bar中的Tab；而在平板手机上，直接在内容区域左右滑动实现切换显然是最为便捷的。...实际上，早已普及的下拉刷新模式也是相同的道理，用户不必与界面远端的某个控件产生交互，只要直接在内容上进行手势操作即可。 对于移动版本的网页，仍然建议使用前文中介绍过的锚点链接导航模式。...总体上讲，功能控件位于屏幕左右边缘的模式更适用于双手拇指同时操作的情况，因此在平板电脑的界面中更为常见。 本文选自《触类旁通：多终端时代的触屏界面设计》
导航按钮 △ 三按钮导航相较之前更易访问 在屏幕较大的设备上，任务栏可以很方便地将应用转为分屏模式或者多窗口模式。...当需要针对不同的设备类型选择合适的布局时或者在多窗口模式下需要响应窗口的变化时，就需要用到 WindowSize 类。 之前在竖屏模式下，用户大多数时间仅仅操作一个应用，但是平板电脑通常是横屏模式。...兼容性模式 △ 兼容性模式 在大屏幕平板电脑 Chromebook 或外接显示器上运行仅针对小尺寸竖屏 Android 手机设计的应用时，如果拉伸进入全屏视图，那么应用外观和性能可能会差强人意。...像平板电脑和可折叠设备一样，Chrome 操作系统现在也有了兼容模式，针对小屏移动设备设计的应用可在手机尺寸或平板尺寸的窗口中显示。...关于针对 Chrome 操作系统以及大屏幕进行优化的详细文档，请访问 chromeos.dev。 折叠设备、平板电脑和 Chromebook 越来越受大家欢迎。
WordPress 如期发布了 3.8 了，这次更新是非常重大的一次更新，推出了全新的管理后台界面，支持任意设备访问 WordPress 管理后台，还支持后台配色，并且还推出了 2014 主题，可以将你的博客转换成杂志模式...支持所有的设备 除了笔记本，台式机之外，现在越来越多的用户使用手机，平台电脑来浏览网站，最新版的 WordPress 后台界面这方面做了最好的优化，现在支持所有的设备访问。...重新定义的主题管理程序 新的主题管理界面可以让首先快速浏览主题，点击可以了解详细信息，然后可以通过导航箭头查看你所有主题。...更流畅体验的 Wdiget，只需要拖动，Widget 管理就能完成，新的设计界面，让这一流程更加流畅，如果用的是大屏幕显示器，多 Widget 区可以并排使用可用的空间，如果是平板电脑，只需要点击 Wdiget...WordPress 3.8 还带来全新的杂志型主题：2014，它可以让你分分钟将自己的博客转换成杂志型主题，可以在首页通过网格和幻灯片显示推荐的内容，支持3个 widget，还可以通过2个页面模板更改网站的布局
、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用 //...，不需要鼠标移上 // showActiveTooltip: true, // //是否显示横向幻灯片的导航 // slidesNavigation: true,...// //横向幻灯片导航的位置，可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条，需要jquery.slimscroll...、导航、元素等时使用 // paddingTop: "100px", // //设置每个section底部的padding，当我们要设置一个固定在底部的菜单、导航、元素等时使用 //...// //横向幻灯片导航的位置，可以为top或者bottom // slidesNavPosition: bottom, // //内容超过满屏时是否显示滚动条，需要jquery.slimscroll
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
