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

Material Design —卡片(Cards)

何时使用 显示以下内容时使用卡布局: ·作为一个集合,包含多种数据类型,如图像,视频和文本 ·不需要直接比较(用户不直接比较图像文本) ·支持高度可变长度的内容,例如评论 ·包含可交互式内容,例如+1...最大高度限于平台上可用空间的高度,但可以暂时扩大(例如,显示评论)。 卡片不会翻转显示背面的信息。 支持的手势 卡片手势应始终卡片集合中实施。...支持的手势包括: 滑动手势(swipe gesture)可以每张卡片上使用。限制视图内的轻扫手势,使其不会彼此重叠。例如,可滑动的卡片不应该包含可滑动的图像以便在滑动时只发生一次动作。...从左到右,从上到下 滚动 卡片集合只能垂直滚动。 超过最大卡片高度的卡片内容会被省略,内部不会滚动,但可以扩展卡片。 一旦展开,卡片可能会超过视图的最大高度。...集合中的卡片中,始终展示操作。 补充操作 使用图标,文本和UI控件(通常放置卡的底部)明确调出卡内的补充操作。 除了溢出菜单之外,补充操作限制为两个操作。 ? ?

4.3K100

最新iOS设计规范四|3大界面要素:视图(Views)

视图(Views) 包含用户APP中看到的基本内容,例如:文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。 控件(Controls) 控件,是用于触发操作并传达信息的。...将红色用于执行破坏性或危险操作的按钮,并将这些按钮显示动作表单的顶部。 避免让操作表滚动。如果表单选项太多,用户必须滚动才能看到所有选项。但滚动需要用户额外花时间来做出选择,而且很容易造成误点。...一旦启动,活动可以立即执行任务,或者之前页面的基础上访问更多信息。活动由活动视图管理,工作表或弹出窗口的形式显示,具体取决于设备和方向。活动被用来给用户APP中执行一些自定义服务或任务。...此外,提供“取消”按钮,以便用户可以安全地退出破坏性操作。将“取消”按钮作为默认按钮,并使用粗体文本允许用户通过退出APP到主屏幕来取消警示框。当警示框出现时,退出到主屏幕可以退出APP。...图像视图中,图像可以被拉伸、缩放、调整大小适合或固定到特定位置。默认情况下,图像视图是不可进行交互的。 ? 如果可能的话,请确保动画序列中的所有图像大小一致。

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

26个你需要学习的Firefox配置技巧,改进体验和加快浏览器响应速度

如何访问“about:config” Firefox的地址栏中输入about:config。 你将会看到警告页面。点击“我接受风险!”...如果您想要查看Firefox声称不兼容的扩展是否真的可以工作,请执行以下操作 右击about:config页面上的任何地方,然后单击“New -> Boolean” 类型扩展。...在所有文本字段中启用拼写检查 默认的拼写检查功能只检查多行文本框。您可以更改布局中的选项layout.spellcheckDefault使它对单行文本框进行拼写检查。...中,你可以通过返回前一或者向上滚动页面来设置退格,如果是滚动页面的话。...如果你愿意,你可以选择让它一直可见,而不是通过切换browser.fullscreen.autohide为“False”始终显示工具栏。

3.8K20

用微妙动效改善用户体验的简单方法

之间的动画 对页面标题和页面加载进行动画,是一种对网站添加动效的有效而不会过火的方法。 当访问者访问您的网站时,可以看到页面之间的平滑过渡。...无限滚动是一种体现动效的好方式,只要页面上的组件是干净、有粘着力的。 太多的色块或太多的动效会混淆访客并带来不可预测的负载。可以考虑使用大背景图片或者是带有令人愉快色调的网格来创建粘结性和简洁性。...模块化滚动功能使用户可以滚动浏览各个面板。 这种类型的动画是很有效果的,因为它可以用于多个行业。例如,建筑公司可以允许用户滚动一个面板的图像作为工作组合,而另一个面板则具有单独的菜单按钮和公司信息。...它允许公司的重要信息旁边的页面上展示你的品牌个性。 模块化滚动意识流方式传递信息和图像。 我们的大脑多个层面上工作,不同的速度处理信息并与模块化滚动相呼应。...它展示了如何使用彩色底片、褪色、轮廓和其他小细节突出显示锚文本。它是一个非常小规模的动画,但它仍然对用户有影响。

2.1K70

180多个Web应用程序测试示例测试用例

18.页面上的所有按钮都应该可以通过键盘快捷键访问,并且用户应该能够使用键盘执行所有操作。 19.检查所有页面上是否有损坏的图像。 20.检查所有页面上是否有损坏的链接。 21.所有页面都应有标题。...11.检查下一,上一,第一和最后一的分页功能。 12.重复的记录不应显示结果网格中。 13.检查所有列是否可见,并在必要时启用水平滚动条。...2.检查图像上传和更改功能。 3.使用不同扩展名的图像文件(例如 JPEG,PNG,BMP等) 检查图像上传功能。4.使用文件名中带有空格或任何其他允许的特殊字符的图像检查图像上传功能。...17.检查发送大量电子邮件。 Excel导出功能的测试方案 1.文件应以正确的文件扩展名导出。...17.测试文件扩展名处理,以便exe文件不会在服务器上上传和执行。 18.诸如密码和信用卡信息之类的敏感字段不必启用自动完成功能。

8.2K21

iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

使用滚动条效果的时候,当前页面将滚动到下一;而使用翻页效果时,页面上会出现一个模拟实体书或笔记本翻页效果的翻页动画 使用页面视图控制器来展示那些线性的内容(比如一个故事的文本),或者是一些可以被自然地拆分成块的内容...如果需要的话,设计一种自定义的方式让用户可以非线性的方式来获取内容。页面视图控制器让用户从一移动到前一或者后一,而并不支持用户并不相邻的页面间快速切换。...可以应用在页模式(paging mode)中,在此模式下用户可以通过拖拽和轻击等手势来浏览一的内容 使用滚动视图来允许用户固定的空间内浏览大尺寸或大量的视图。 适当地支持缩放操作。...展开标志告知用户点击这一列中的任何位置,都将展开新的列表展示其子类信息。 展示可以概念上进行分组的信息。平铺型和分组型列表都允许你通过提供页眉和页脚来对信息进行分组和分段。...iOS提供了各种不同的键盘类型,以便用户输入不同类型的文本

10.1K51

【交互探讨】无限滚动还是分页展示,这是个问题!

用户完成一的浏览,并且开始下一的内容时,这里有个非常明显的“切断”,用来区分已看过的和未看到的内容,以及整个导航过程中完成的状态。...“加载更多”电子商务中应用效果很好 ——因为所有项目都显示一个页面上,并且页脚总是可以到达的,因此用户可以很好控制他们看到的所有项目。...当有新的内容加载进来时,我们视觉上将项目分开,并允许用户列表中标记他们以后想要继续浏览的位置。我们还可以允许他们单独的页面上查看他们看到的所有产品,这样他们就可以将查看过的选项与所有选项分开。...另外,我们可以直接展示通讯框,允许用户复制当前页面当前位置的链接。还有一个好处就是能让我们收集用户的电子邮件,以便稍后向他们发送有关新项目的提醒。 将文案改为“复制当前列表位置的链接”。...例如,一旦用户浏览了“页面”1、2 和 3,现在已经登陆“页面”4,是否应该单击“返回”按钮将他们从第4带到第3或者到他们第1之前访问过的上一

3.1K20

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

视图(Views) 包含用户APP中看到的基本内容,例如:文本、图片、动画以及交互元素。视图可以具有滚动、插入、删除和排列等交互行为。 控件(Controls) 控件,是用于触发操作并传达信息的。...你可以同时提供自定义的蒙版图像以便系统转场过渡时使用此蒙版为按钮标题设置动画效果。 不要包括多段面包屑路径。后退按钮始终执行单个操作:返回上一屏幕。...当显示导航栏中时,可以将搜索栏固定在导航栏中,以便始终可以调用。也可以将其折叠,当用户向上滑动时展开显示。 使用搜索栏而不是仅仅通过“搜索”文字来实现搜索。文字没有用户所期望的标准搜索栏外观。...例如,如果iOS设备上没有歌曲,则“音乐”应用中的“立即收听”选项卡将说明如何下载歌曲。 始终附加视图中切换上下文。...可以标签上做标记 - 包含白色文本的红色椭圆(即小红点),或者一个数字或一个感叹号,用以提示用户有新信息,并且新信息与该视图或模式是相关联的。 确保标签栏标志符号视觉上保持一致和平衡。

9.8K10

Material Design — App bars: topApp bars: top

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后使用的时候完全不虚...Top app bar 可以转化为一个 contextual action bar。 ? 原则 ·始终保持 Top app bar 出现在 app 中每个屏幕的顶部,并且可以滚动时消失。...Title (optional) App bar title 可以用来描述: ·用户当前所在的屏幕 ·用户当前所在的部分 ·正在使用的 app 默认情况下,titles 电脑桌面上左对齐。...Top app bars 可以与内容位于同一高度。 滚动时,它们会增加海拔并让内容它们后面滚动 ?...当向上滚动时,使用带有图像的 prominent top app bars 可以转换为正常的 top app bars。 他们不应该返回到 prominent 模式,直到用户滚动回页面的顶部。

2.2K60

2029年前端这个行业需求递增超过8%,你需要掌握这七项技能要掌握

另一方面,前端设计用户如何与您的平台交互以及执行其功能的各个组件为中心。...02、JavaScript HTML 和 CSS 非常适合文本网站,因为它们主要是静态的。JavaScript可以成为响应式网站的有用补充。...这种客户端编程语言允许您向网站添加交互功能,包括投票、幻灯片和表单。它还提供对动态元素的支持,包括但不限于页面动画、滚动、音频和视频。...浏览器工具允许开发人员适合特定浏览器的方式测试和微调网页。此外,开发人员使用响应式设计技术来更改站点布局和设计,具体取决于访问它的设备类型。...但是,了解基础知识可以帮助您确定在网站上放置标题、元描述和文本的位置,以便搜索引擎可以轻松找到它们。 再告诉大家一个好消息,美国预计到 2029 年 Web 开发人员职位将增长 8%,那么中国呢?

73000

最新iOS设计规范七|10大视觉规范(Visual Design)

用户没有必要通过水平滚屏来阅读重要文本或者放大才能查看主要图像,除非用户自己选择改变尺寸。 整个APP中保持整体一致的外观。通常,具有相似功能的元素应该看起来是相似或者统一的。...保持对齐让用户浏览更简单,并传达组织和层级关系。对齐使APP看起来整洁有序,用助于用户滚动时集中注意力,并使查找信息变得更加容易。缩进和对齐还可以表明内容之间的关系。...较大的设备上显示文本时,应留有可读性边距。这些边距使文本行足够短,确保舒适的阅读体验。 适应上下文的变化 在上下文变化期间确保聚焦在当前内容。内容是APP中优先级最高的。...当设备横向放置时,可能适合某些应用程序(例如游戏)将可点击的控件放置屏幕的下部(安全区域下方延伸),以便为内容留出更多空间。...你还应该允许用户根据个人喜好在全屏和适应屏幕模式之间自由切换。 始终原生纵横比显示视频内容。

7.9K30

优美整洁的引导大神框架Onboard

通过创建OnboardingContentViewController的实例创建单个页面,为操作按钮提供标题,正文,图像文本,以及在用户按下按钮时您想要执行的操作。...自定义 模糊(Blurring),掩蔽(Masking)和淡入淡出(Fading) 默认情况下,您用于背景的图像将在其上应用蒙版,使其变暗一点。这是添加一点点对比度,所以文本可以更容易看到。...当您滚动时,内容淡出,下一的内容向内滚动时淡入。...另外,你可以禁用通过设置swipe,swipingEnabled属性设置为NO。如果您愿意,这允许您更好地控制引导过程。...最后,如果你的设计适合没有页面控件,或者它只有一个页面,你可以设置hidePageControl属性为YES和页面控制点(page control dots)不出现。

2K50

ONLYOFFICE 桌面编辑器 v7.3 新特性:表单的角色、增强密码保护、电子表格的查看窗口、全新打印预览选项等功能

请继续阅读了解更多信息。 可填写的表单中分配角色和使用新字段类型 与 ONLYOFFICE文档 v7.3 一样,借助桌面编辑器最新版您也可为需要填写表单的用户分配各种角色,简化文档工作流。...选项位置:“表单”标签(DOCXF 文件中)-> 管理角色 此外,桌面编辑器处理表单时,您可以发现新的即用型字段,以便使表单创建过程更快:日期与时间、邮政编码、信用卡。...现在,您可以允许其他用户执行某些操作:他们可以打开文件阅读,填写字段,留下评论或在跟踪修改的模式下进行编辑。...您可以在打印前预览文本文档或演示文稿。当您点击打印按钮时,您会看到打印出来的文件会什么样子。 选项位置:“文件”标签 另外,您现在可以快速打印文本文档、电子表格、演示文稿和可填写的表单。...快速打印功能使用默认打印机或使最后使用的打印机。 选项位置:顶部工具栏上的快速打印按钮 启用自动更新功能 ONLYOFFICE 桌面编辑器 v7.3 允许您将应用程序始终更新到最新版本。

1.3K40

HTML-CSS基础学习

-noimageindex 禁止搜索引擎索引页面上的图片 -none 页面将不背搜索,且页面上的连接不可以被查询 -follow 不管页面是否允许索引...,会生成两个键,私钥存储客户端,公钥发送到服务器,公钥可以用来验证用户的客户端证书。...word-break 对象内文本的字内换行行为,默认normal,允许字内换行 text-align 内容的水平对齐方式 text-align-last 块内最后一行或者被强制打断的行的对齐方式...背景图像如何铺排填充 background-attachment 背景图像随着对象内容滚动或者固定 background-position 背景图像位置 background-origin 背景图像显示的原点...-scoll 裁剪内容,提供滚动机制 -auto 如果溢出,则赢提供滚动机制 -no-display 如果内容不适合内容框,则删除整个内容 -no-content 如果内容不适合内容框,则隐藏整个内容

4.8K30

最新iOS设计规范六|10大交互规范(User Interaction)

尤其是列表和选择器中,必需能很简单地选择一个值。可以考虑将字段值列表按首字母排序或是其它逻辑排列,以便于加快用户浏览和选择的速度。 文本字段中显示提示,帮助传达目的。...为达到更好的混合音效,你的APP可以单独调整不同层级音频间的相对音量实现多种音频的混合。但是,最终音量的输出应始终由系统音量控制。 允许适当时重新选择输出路径。人们经常想选择其他音频输出设备。...使触觉反馈设计是可选的。如果用户愿意,让他们可以选择关闭触觉或者使触觉静音,并确保他们没有触觉模式的情况下依然可以很好的享受你的APP。 游戏APP中,可以考虑自定义触觉反馈来增强玩家体验。...使涂鸦可以人们可能想要输入文本的任何地方使用。 避免写作时分散人们的注意力。 人们文本字段中书写时,请确保其保持静止并且其内容不会滚动。 给人们足够的写作空间。...拖动内容时,用户可以通过多任务处理,退出到主屏幕或从屏幕底部向上滑动显示Dock来访问另一个应用程序。 支持拖放 使拖放可用于所有可选和可编辑的内容。 如果适用,允许将内容拖放到控件上。

4K30

Flutter中构建布局 顶

Flutter中,几乎所有东西都是一个小部件 - 甚至布局模型都是小部件。 您在Flutter应用中看到图像,图标和文本都是小部件。...注意:本教程中的大多数屏幕截图均以debugPaintSizeEnabled设置为true显示,以便可以看到可视布局。...此应用程序将背景颜色更改为白色,将文本更改为深灰色模仿Material应用程序。 而已! 当你运行这个应用时,你应该看到: ?...您可以将行或列的子项放置扩展小部件中,控制沿着主轴的小部件大小。 扩展小部件具有flex属性,它是一个整数,用于确定小部件的弹性因子。 扩展小部件的默认弹性因子是1。...GridView提供了两个预制列表,或者可以构建自己的自定义网格。 当GridView检测到其内容太长而不适合渲染框时,它会自动滚动

43K10

17个最佳WordPress画廊插件

这个WordPress画廊插件使您能够通过用户友好的拖放式管理面板完全自定义播放器的外观和功能 ,或者使用设计中心为您的视频画廊生成与品牌兼容的外观。...bcasal用户说: “这个插件及其插件正是我们需要的,以便能够我们的网站上播放360º视频。 强烈推荐!” 基本网格图库 您在寻找灵活性吗?...数十种完全可自定义的外观和动画选项使可以完全控制画廊的外观。 用户iamacreator说: “插件各个方面都运作良好。 许多自定义选项,易于使用。 客户支持非常好。”...页面在后台渲染,确保流畅的阅读体验,智能平底锅会自动最舒适的方向显示翻书,以便在任何设备上阅读。...平面360°全景图像查看器 借助此WordPress图片库,使您的全景照片栩栩如生。 该插件使用WordPress 添加热点并滚动到静态全景照片,创建超逼真的沉浸式360°观看体验。

7.9K31

Mac电脑必备屏幕截图软件,Snagit

或者通过工作流程引导人们,并通过快速屏幕录制回答问题。 文档中添加视觉效果如果您的所有文档都可以快速创建,更新易于使用,并且用户可以轻松遵循该怎么办?使用Snagit,只需点击几下即可保持图形最新。...始终用户提供最新的教程,操作指南和手册。即使您正在记录的软件发生变化。 更有吸引力不影响质量或依赖昂贵的设计工具的情况下提供引人入胜的可视内容。...3.捕获屏幕上的任何内容 Snagit使可以更轻松,更直观地捕获屏幕或录制视频。捕获整个桌面,区域,窗口或滚动屏幕。 4.只需点击几下即可修改获得一整套编辑工具。并自己创建图像。...文字替换 Snagit识别屏幕截图中的文字以便快速编辑。更改屏幕截图中文本的字词,字体,颜色和大小,而无需重新设计整个图像。 魔棒工具 使用魔棒工具根据颜色选择图像上的区域。...标记捕获始终保持项目的有序性。 调整图像大小 将图像调整到正确的大小,直到像素。使用“调整大小”选项输入新尺寸缩放图像的大小。

1.9K40

Stirling-PDF一款开源可本地托管的pdf处理利器

另外在页面上编辑功能,如注释、绘图、添加文本图像。(使用PDF.js与Joxit和Liberation.Liberation字体) • 全交互式GUI用于合并/分割/旋转/移动PDF及其页面。...• 自动涂黑文本。 其他操作 • 添加/生成/写入签名。 • 修复PDF。 • 检测并删除空白。 • 比较两个PDF并显示文本差异。 • 向PDF添加图像。...这可以用来更改任何图像/图标/CSS/字体/JS等Stirling-PDF中。...要添加新用户,请到“账户设置”底部点击“管理员设置”,在这里您可以添加新用户。这里提到的不同角色用于限速。这是一个正在进行的工作,将来会有更多扩展。...支持自动扫描的文件夹支持,执行操作 文本涂黑(通过用户界面,不仅仅是自动化方式) 添加表单 多布局(将PDF页面拼接在一起)支持x行y列和自定义页面大小 手动或自动填写表单 Q2: 为什么我的应用程序正在下载

65510

达芬奇DaVinci Resolve Studio 18

剪切页面允许您导入,编辑,修剪,添加过渡,标题,自动匹配颜色,混合音频等。无论您传送广播或YouTube上,切有你需要的一切得到完成任务,同一个地方! 计算机上的非线性编辑多年来并没有真正改变。...这样可以轻松擦除所有镜头,找到所需的部件,并快速将其编辑到时间线!这是一个老式的概念,完全现代化,帮助您快速找到所需的镜头! 2、双时间轴 放大和缩小以及滚动时间轴非常慢!...使用双时间轴,您将始终知道自己的位置,因为您始终拥有一个放大的时间轴,非常适合使用上下文工具修剪和微调您的编辑。 3、专用修剪工具 通常情况下,唯一可以执行精确修剪的地方是时间轴。...快速导出菜单位于所有DaVinci Resolve页面上,因此您现在可以立即渲染完成的编辑,而无需使用传递页面。您还可以创建自己的快速导出预设保存本地文件。...您可以获得基于鼠标位置自动波动,滚动,滑动或滑动的上下文相关工具。您可以使用动态JKL修剪,执行非对称修剪,同时修剪多个剪辑,甚至循环播放期间实时修剪进行精确编辑!

2.4K20
领券