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

Material Design — 底部动作条(Bottom Sheets)

一个模态底部动作条滑到屏幕上,屏幕其余部分就会变暗,把焦点集中在动作条上。 ?...模态底部动作条可以显示长名称菜单项,带说明菜单项,带icon菜单项。 显示菜单项,完全扩展模态底部动作条与app 导航最底端要保持最小8dp距离。 ?...但是,这些深层链接可能不允许用户在打开app中导航:它们可能只停留在初始层级,更深入,或者返回到初始层级。 或者,深层链接可以将用户从底部动作条导航到另一个视图。...为了使底部动作条中深层链接向上导航,通过溢出菜单提供一个明确链接来打开app。底部动作条中动作可能会导致打开父级app,比如使用“添加联系人”操作。...左:网格底部动作条    右:长列表底部动作条 ---- 行为 1、底部动作条可以通过向下滑动底部动作条来关闭; 2、通过点击一个明显控制按钮,例如在app导航“X”,或者触摸Android系统后退按钮

1.8K71

最新iOS设计规范二|7大应用架构

不要在你APP中创建一个APP。如果一个模态任务太复杂,那么当用户进入模态视图,他们可能会忽略他们之前被暂停任务。...例如,模态视图包含导航,它应该采用与APP导航相同外观。 为模态视图展示提供合适过渡动画。使用与APP风格统一过渡动画,增强用户对内容转变认知。...用户应该知道他们在APP中位置以及如何到达下一个目的地。无论导航风格如何,操作路径必须符合逻辑,可预知易于遵循。一般情况下,一个页面只给用户提供一个入口。...例如,你可以让人们从页面侧面滑动以返回上一个页面。 使用标准导航组件。尽可能使用标准导航控件,例如页面控件,标签,分段控件,表视图,集合视图和拆分视图。...拆分视图提供与选项卡相同快速导航,同时更好地利用了大屏幕。 您具有内容类型相同多个页面,请使用页面控件。页面控件清楚地传达了可用页面的数量以及当前处于活动状态页面。

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

笔记53 | 管理系统UI(一)

图1展示了一个图库中图片,界面的系统都已被淡化(需要注意是图库应用完全隐藏状态,而不是淡化它);注意导航(图片右侧)上变暗白色小点,他们代表了被隐藏导航操作。 ?...setSystemUiVisibility()仅仅在被调用View显示时候才会生效。 从View导航到别的地方,用setSystemUiVisibility()设置标签会被清除。...隐藏导航 这节课将教您 在4.0及以上版本中隐藏导航 让内容显示在导航之后 本节课程将教您如何导航进行隐藏,这个特性是Android 4.0()版本中引入。...即便本小节仅关注如何隐藏导航,但是在实际开发中,你最好让状态导航同时消失。...在保证导航易于再次访问情况下,隐藏导航与状态使内容区域占据了整个显示空间,因此可以提供一个更加沉浸式用户体验。 ? 图1. 导航.

1.4K40

Android虚拟导航显示隐藏实例

,比如状态某些图标,但这个只是系统状态、虚拟按键等进入夜间模式,app内部控件并不会进入夜间模式,这个以后有时间再研究怎么在应用内部实现夜间模式。...3.View.SYSTEM_UI_FLAG_FULLSCREEN,这个Flag应该是大家比较常用一个Flag,设置之后会屏蔽掉状态等控件使界面全屏显示(不会隐藏虚拟按键),但是如果有actionbar...title则需要设置Window.FEATURE_NO_TITLE 如何在带有实体按键情况下调出虚拟按键 1.通过修改build.prop调出虚拟按键,其路径在system/下,在其中找到build.prop...打开可以看到qemu.hw.mainkeys=1 或者qemu.hw.mainkeys= 0,qemu.hw.mainkeys=1实体键盘起效,qemu.hw.mainkeys=0,显示虚拟键盘,...以上这篇Android虚拟导航显示隐藏实例就是小编分享给大家全部内容了,希望能给大家一个参考。

1.7K20

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

一、导航(Navigation Bars) 导航出现在页面的顶部,位于状态下方,可以给一系列层级页面进行导航点击进入新页面,其导航左侧会出现一个返回按钮,并带有前一页面的标题。...导航是半透明,也可以添加背景色,并且必要可以设置为隐藏。 ? 某些情况下可暂时隐藏导航,以提供更沉浸体验。例如,人们查看全屏照片时,“照片”会隐藏导航和其他界面元素。...在iOS 13及更高版本中,可以通过删除导航阴影来隐藏导航底部边框(滑动内容区域,边框会自动重新出现)。无边框样式在大标题导航中效果很好,因为它增强了标题和内容之间联系感。...搜索可以单独显示,也可以显示在导航或内容视图中。显示在导航,可以将搜索固定在导航中,以便始终可以调用。也可以将其折叠,当用户向上滑动展开显示。...人们导航到您应用中其他区域,请不要隐藏标签。标签可为您应用启用全局导航,因此它在任何地方都应保持可见。模态视图例外。

9.8K10

网页设计一致性

你可能希望用户与您网站关联最后一个词是“可预测”。这个术语在商业世界中具有负面的含义,并使您想到一个与其竞争对手无聊,无关紧要和相同品牌。 但是在一定程度上,用户期望并依赖于网站可预测性。...在您网站博客和社交媒体帐户上,内容一致性将在网站流量和潜在转换中得到很好回报。 创建网站元素之间一致性 你网站目标应该是减少用户学习,同时激起他们兴趣。...这听起来像一个难题,直到你意识到,当你保持主要UI设计元素统一,你可以自由地与您网站其余部分玩。在你网站骨骼一致性,让你摆动与身体其余部分空间。...以下是全面保持一致网站元素: 字体大小 空白 调色板 品牌标志和视觉效果 网站元素大小 高分辨率图像 按钮颜色 导航菜单 页眉,页脚和侧边 可点击元素 这是您用户希望在页面之间保持一致元素一个想法...无论图像多么美丽,内容多么优秀,或者主题创新如何,用户都不会停留在一个太复杂或混乱网站上。 通过保持您网站无缝并易于消化来避免这种情况。您可以自由尝试,但在当前网络用户认为可以接受范围内。

88620

浅谈 Android 自定义锁屏页发车姿势

Android系统实现自定义锁屏页思路很简单,即在App启动开启一个service,在Service中时刻监听系统SCREEN_OFF广播,屏幕熄灭,Service监听到广播,开启一个锁屏页Activity...划瓶解锁基本思路很简单,手指在屏幕上滑动,拦截并处理滑动事件,使锁屏页面随着手指运动,运动到达一定阀值,用户手指松开手指,锁屏页自动滑动到屏幕边界消失,如果没有达到运动阀值,就会自动滑动到起始位置...手指离开屏幕,doTraiggerEvent方法会对滑动距离与阀值进行一个比较,此处阀值为0.4*屏幕宽度,如果低于阀值,则通过ObjectAnimator在0.25s将mMoveView移动到初始位置...Android 4.4 之后加入Immersive Full-Screen Mode 允许用户在应用全屏情况下,通过在原有的状态/导航区域内做向内滑动手势来实现短暂调出状态导航操作,且不会影响应用正常全屏...这个“半透明化”包括了状态和通知开发者让应用支持这个新特性时候,状态导航可以单独/同时变为渐变半透明样式,如下图: ?

3.7K91

「知识」SEO+UX=成功

网站导航不是花式弹出窗口,一长串选项,捉迷藏游戏或死胡同地方,用户不知道如何返回到网站另一部分频道内容或返回网站主页。 此外,好网站导航和结构也可能导致附加链接出现在搜索结果中。...5、移动体验 您想到“移动体验”,速度无疑是一个考虑因素,但您手机网站也是一个整体:外观,感觉,导航,文本,图像等等。 移动端用户体验,将越来越重要。...现在,随着2018年移动优先索引即将到来,搜索引擎算法计算排名,您移动网站将被视为您“主要”网站,从而使得更好移动体验变得更为重要。...此外,有些网站菜单很小或放在不明显位置,甚至没有“菜单”,这不是一个非常人性化体验。 在移动端,菜单,一定要放在页面明显头部位置,而且,用户必须不需要花费很大力气,就能够看到菜单栏内容。...当我们在创建内容,我们是否想到您网站用户?我们该如何与设计团队合作协调,确保网站为您用户提供卓越移动体验?SEO因素和UX因素之间平衡是什么?

86290

❤️使用 HTML、CSS 和 JS 创建响应式可过滤游戏+工具展示页面 ❤️

可过滤作品集是一种流行网络元素,可用于各种网站。它是一种作品画廊,大量作品整齐地排列在一起。值得注意一点是,所有作品都可以在这里按类别排序。有一个导航,其中对所有类别进行了排序。...单击这些类别中任何一个。然后可以看到该类别中所有作品,而隐藏其余作品。结果,用户可以轻松地找到他选择图像。 我首先在网页上创建一个导航。在这里创建了五类按钮,一共使用了15张图片。...在导航分类中,你可以看到与您点击分类相关作品。同样,您单击另一个类别,该类别的作品将被看到,其余将被隐藏。我让它完全响应,以便它可以在所有设备上使用。...第 2 步:为类别创建导航 现在我已经使用下面的 HTML 和 CSS 代码创建一个导航。正如我之前所说,有一个导航,所有类别都在其中进行了排序。在这里,我使用了 5 个主题和 15 个图片。...您单击此类别,该类别其余部分所有图像将被隐藏,所有四个图像将并排显示。以下代码已用于使此重定位更加生动。此处使用了 0.5 秒,这意味着更改该位置需要 0.5 秒。

6.4K20

【Hybrid开发高级系列】ReactNative(七) —— RN组件专题

onSlidingComplete函数         当用户已经完成改变它值后,调用回调函数(例如,滑动块被释放)     onValueChange函数         当用户拖动滑动,连续不断调用回调函数...onTintColor字符串型         开关打开时候背景颜色。     onValueChange函数         当用户切换开关,调用回调函数。     ...按下按钮,包装后视图透明性就会降低,这样底衬颜色就会显示出来,使视图颜色变暗或者着色。...3.10 不透明触摸         一个包装器是为了让视图对触发做出合适响应。按下按钮,包装后视图透明性就会降低,变暗。...在默认情况下,标签是通过遍历所有孩子和累积所有由空间隔开文本节点创建。     accessible布尔型         值为真,说明视图是一个可访问元素。

39240

浅谈Android自定义锁屏页发车姿势

Android系统实现自定义锁屏页思路很简单,即在App启动开启一个service,在Service中时刻监听系统SCREEN_OFF广播,屏幕熄灭,Service监听到广播,开启一个锁屏页Activity...划瓶解锁基本思路很简单,手指在屏幕上滑动,拦截并处理滑动事件,使锁屏页面随着手指运动,运动到达一定阀值,用户手指松开手指,锁屏页自动滑动到屏幕边界消失,如果没有达到运动阀值,就会自动滑动到起始位置...Android 4.4 之后加入Immersive Full-Screen Mode 允许用户在应用全屏情况下,通过在原有的状态/导航区域内做向内滑动手势来实现短暂调出状态导航操作,且不会影响应用正常全屏...不会因为SystemUI变化而做layout;SYSTEM_UI_FLAG_IMMERSIVE_STIKY,能够在隐藏bar被呼出(比如从屏幕下边缘开始向上做滑动手势),使bar在无相关操作情况下自动再次隐藏...这个“半透明化”包括了状态和通知开发者让应用支持这个新特性时候,状态导航可以单独/同时变为渐变半透明样式,如下图: ?

2.2K80

实用五大WordPress下拉菜单插件推荐

WP Mega Menu带有一个拖放式菜单构建器,使初学者可以轻松地创建他们想要菜单。将小工具添加到菜单,导入或导出主题,添加搜索等。...通过为用户提供使用此插件搜索搜索内容选项,使用户可以轻松浏览您网站。 2 UberMenu UberMenu是WordPress用户一个流行选项。...使用UberMenu创建菜单可在任何设备上响应,因此用户无论与之交互如何,都可以享受您导航。 3....另外,其友好用户界面使它易于使用并添加到您网站。 4. Superfly Superfly是功能强大菜单插件,可为您网站创建独立菜单。...它与下拉菜单一起创建了许多其他类型菜单,包括推出、滑动、静态、全屏等。使用Superfly,您可以使用无穷选项自定义下拉菜单。

2.3K20

找不到交互设计实例?看这里!

3.富有星空元素搜索页 导航页面融入星空元素,每一个图标代表不同导航功能。在页面上滑动导航图标,被选中图标自动放大尺寸,其他图标则自动变换位置和大小。...每个文件夹存储量有变化时,环形统计图里数据和对应文件夹色块比例也会做出相应交互变化。 ?...网页交互设计实例 介绍完这些比较常见移动应用交互设计,接下来再给大家介绍一些比较优秀网页交互设计案例。 1. Sketchin 简洁导航使整个网站看起来十分简洁美观。 ? 2....Seeing Data 这个网站一个动态信息图表,它可以为用户提供信息统计,绘制图表。 ?...3. 1000 Chrome Experiments 这个网站是由Google创意实验室创建,不仅有华丽动画,而且它功能和网络技术方面也让人印象深刻。 ? 4.

1.5K50

找不到交互设计实例?看这里!

3.富有星空元素搜索页 导航页面融入星空元素,每一个图标代表不同导航功能。在页面上滑动导航图标,被选中图标自动放大尺寸,其他图标则自动变换位置和大小。...每个文件夹存储量有变化时,环形统计图里数据和对应文件夹色块比例也会做出相应交互变化。 ?...网页交互设计实例 介绍完这些比较常见移动应用交互设计,接下来再给大家介绍一些比较优秀网页交互设计案例。 1. Sketchin 简洁导航使整个网站看起来十分简洁美观。 ? 2....Seeing Data 这个网站一个动态信息图表,它可以为用户提供信息统计,绘制图表。 ?...3. 1000 Chrome Experiments 这个网站是由Google创意实验室创建,不仅有华丽动画,而且它功能和网络技术方面也让人印象深刻。 ? 4.

51530

iOS透明导航平滑过渡(进阶版)引实现过程结

引 如我在传送门:iOS导航切换界面隐藏和显示中所说,现在很多App个人中心模块都是不保留导航,会直接使导航透明,比如做很好QQ个人信息界面: 为什么说QQ做很好呢?...既然有透明导航也有不透明导航,那一定会在界面切换之间存在一个过渡过程,而这个过程,QQ做特别好,在从透明导航界面返回到不透明导航界面导航透明度是一个渐进过渡效果,甚至会有一种毛玻璃效果...直接隐藏起来意思是,整个导航就用不了了,也就是说,标题、返回按钮等都需要自己去做,这是一个比较麻烦地方,此外,在有无导航界面间切换,过程是比较生硬导航不是渐变出现。...,否则不隐藏,这样切换到其他界面,细线就又会出来了。...: 有一个参数就是界面滑动过程百分比,那么我们获取上一个界面的导航透明度、下一个界面的导航透明度、以及滑动进度,通过很简单数学计算就可以得出当前进度应该对应透明度是多少了,这里也可以看出我们给

2.9K40

react-navigation,刷新你导航一、属性介绍二、案例

直接切换 modal:iOS独有的使屏幕从底部拖出 headerMode:返回上级页面动画效果 float:iOS默认效果 screen:滑动过程中,整个页面都会返回 none:无动画 cardStyle...:自定义设置跳转效果 transitionConfig:自定义设置滑动返回配置 onTransitionStart:转换动画即将被调用功能 onTransitionEnd:转换动画完成被调用功能...iOS默认在底部,安卓默认在顶部 swipeEnabled:是否允许在标签之间进行滑动 animationEnabled:是否在更改标签显示动画 lazy:是否在app打开时候将底部标签全部加载...推荐打开 trueInitialRouteName:设置默认页面组件 backBehavior:按back键是否跳转到第一个tab,none为不跳转 tabBarOptions:设置标签 专属iOS...title={"chat with lucy"} /> ); } } 返回操作 第二个界面想要回归到上一个界面

19.5K90

如何规范移动应用交互设计?UIUX设计师须知11个小技巧

手机在极大程度上改变了人们生活,特别是智能手机,人们沉迷于手中这个小盒子里。是什么使人们如此无法自拔?打开手机才发现里面充斥着琳琅满目的移动应用程序。...使键盘与所需文本输入框相匹配 自定义键盘 据相关人员研究发现:用户在键盘模式和触摸屏模式之间这种切换,增加了用户认知负荷。如何减小用户认知负荷?设计师应该为用户提供一个可自定义键盘。...显示搜索 如果你能够设计出一个完美的搜索框,那么你用户体验几乎成功了一半。 尽管所有的应用程序都有自己独特性,但用户最喜欢搜索方式还是向下滑动然后搜索所需内容。...除此之外,设计师在设计搜索交互,为了提供良好用户体验,一定要根据用户使用习惯显示他们最近搜索和最喜欢搜索时间。...在设计产品,设计师应该多考虑如何让用户感到满意。 一个网站可以在一个屏幕上显示14张图片时,一个手机屏幕一次只能显示三张图片。

1.2K90

Flutter开发之路由与导航实现

其中,Route是页面的抽象,主要负责创建界面、接收参数以及响应导航器Navigator打开与关闭。...点击第一个页面上按钮导航到第二个页面,点击第二个页面上按钮将返回第一个页面。运行上面的代码,效果如下图所示。 ?...要实现上面的示例效果,首先需要新建一个底部导航,然后再由底部导航去嵌套其他子路由。...具体来说,就是在使用push()方法打开目标页面,可以设置目标页面关闭监听函数来获取返回参数,目标页面关闭路由使用pop()方法回传参数即可。...MaterialPageRoute 是Material组件库提供组件,它可以针对不同平台,实现与平台页面切换动画风格一致路由切换动画:打开页面,新页面会从屏幕右侧边缘一致滑动到屏幕左边,直到新页面全部显示到屏幕上

3.2K10
领券