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

Material Design —卡片(Cards)

自上次参加完回音分享会后,我下定决心要洗心革面乖乖打基础,于是开启了这个part,争取两个月不间断更新,写完Material Design与iOS中的组件(顺便学学英语),以便今后在使用的时候完全不虚...放置在图像背景上的文本应该保留文本的易读性。 ? 左:不同布局的卡片    右:排版方式能突出重点内容 ?...卡片不会翻转以显示背面的信息。 支持的手势 卡片手势应始终在卡片集合中实施。 支持的手势包括: 滑动手势(swipe gesture)可以在每张卡片上使用。限制视图内的轻扫手势,使其不会彼此重叠。...例如,可滑动的卡片不应该包含可滑动的图像,以便在滑动时只发生一次动作。 如果用户对集合内的卡进行分类很重要,则可以使用拾取并移动手势(pick-up-and-move gesture)。...UI控件 与主内容内联放置的UI控件(如滑块)可以修改主内容的视图。 例如,可以选择日期的滑块,评分内容的星星,或选择日期范围的分段按钮。 ? ? ? 溢出菜单(可选) 溢出菜单通常放置在卡的右上角。

4.3K100

腾讯文档的7个秘笈

但如果在没有启动搜索的时候,不应该遍历 layoutTree,而是应该直接返回。提前返回,可以节省大约 2 ms 的搜索高亮收集时间。...08 文本缓存 绘制可复用的部分处理完了,但是绘制增量的部分耗时依然很高,经常可以达到 20 ms 。因为它需要先收集 painter,然后去绘制 widget。...看板由于需要记录用户上次打开滚动条的位置,再次打开的时候需要跳转过去。为了避免滚动的时候,再去实时计算当前应该新增或减少哪些卡片,会在最开始的时候一次性计算好所有的卡片宽高。...09 总结与思考 腾讯文档团队优化后的FPS接近 60 帧,从 20 多帧提升到 58 帧左右,也就是提升了两倍多。 在这期间,团队总结了相关经验:应该尽量避免滚动的时候有阻塞主线程的耗时操作。...我们用了这种方案 |腾讯工程师聊ChatGPT技术「文集」 |腾讯云开发者热门技术干货汇总 |一文读懂 Redis 架构演化之路 技术盲盒:前端|后端|AI与算法|运维|工程师文化 关注我并点亮星标

4.8K51
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Lattics:一款简单易用、好看强大的「类脑式」知识管理工具,笔记应用与写作软件二合一

    通过基于白板的图谱,可以快速查看文章之间的结构关系、标签/备注等信息以及文章之间的引用关系。这对于组织内容,强化思考十分有帮助。思维导图情节视图鸟瞰视图这是我最喜欢的功能。...写作强化Lattics 十分重视用户的内容输出。对此,Lattics 围绕写作特性,提供了一系列写作相关的强化功能。...支持插入 Zotero 链接,点击可跳转至原文件分享与导出Lattics 支持以 Markdown、Word、PDF、TXT、图片等多种标准格式导出数据,提供了丰富的自定义导出样式。...比如,与特定发布平台的对接「wordpress、medium 等」。图谱操作逻辑。操作还有一点不方便。这儿主要是指添加「关系连线」,需要多个步骤才能实现。视图切换:希望能优化鸟瞰视图下的卡片布局。...新增卡片。在图谱中,创建新的独立卡片的时候,理论上是应该出现在卡片库。目前,在思维导图和情节视图中新增的卡片,在编辑器页面却不显示内容。建议优化。注释:Lattics 访问地址

    2.2K30

    异步分片计算在腾讯文档的实践

    {} } console.timeEnd(); 这段代码在我的 MacBook M1Pro 上面执行都要耗时3秒多,这期间页面上的任何操作都不会响应了。...比如页面上的卡片,应该按照什么样的规则来计算呢? 最初我们是从头计算完一个分组所有卡片,再去计算下一个分组的,但是一个分组可能有很多的卡片,可能会影响了后面卡片的计算。...一般来说,一个文档不会有很多分组,所以卡片应该要横向计算,优先计算所有分组的第一个卡片,然后再计算所有分组的第二个卡片,依次类推......然后开始计算可视区域之外的,这里最好的方式是以可视区域作为中心往两边扩散。如果此时文档有更新,或者用户滚动了页面导致可视区域变化了,之前计算过的卡片高度应该缓存起来,再继续剩余的卡片。 7....如果用户移动了卡片到另一个分组,此时应该将两个分组标记为 dirty,重新计算两个分组的高度。

    80730

    微商城订单模块重构实践

    为了在新订单列表重构的过程中,尽可能的规避掉旧订单列表中相关的坑点,Android 侧将订单列表页面从不同的维度进行了拆分: 1.从 UI 层面 新的订单列表将订单状态选择器、订单类型选择面板、订单卡片分别拆分成了不同的视图...与此同时,将订单卡片中各个子内容封装为控件,以便于卡片视图内部对各个子组件来对订单视图进行组合,来支持多种样式的订单卡片。...微商城的动态路由配置版本号,跟随客户端版本号 低版本客户端不存在新订单模块,无法支持新路由,未来也可能会存在其它不兼容的新路由;客户端版本号约束所有业务版本,可以保证跨业务的路由的一致性 路由组件自身增加降级处理...新订单列表中将权限相关的逻辑与对应订单操作处理统一在一起,防止操作逻辑变更时遗漏掉权限处理。...同时在开发重要模块功能时也要准备好充分的降级方案与灰度方案,来将新功能上线带来的问题影响范围尽可能缩小。每个基础的SDK看起来功能相对较为单一,但是组合起来就能达到不错的效果。

    1.8K30

    完全免费、开源的Flutter,到底有哪些优势?该如何学习Flutter?

    但是作为跨平台开发技术不可避免的需要去维护底层适配层和各种插件实现与原始平台的通信,这是所有跨平台的通病。 3、高效,对开发者来说,使用 Flutter 开发应用十分高效。...Flutter独特功能: 专注于可定制的小部件,可以使用Material Design和Cupertino包(而不是android XML)中的所有小部件集来轻松开发UI。...安装Flutter 您应该做的第一件事是获取SDK –软件开发工具包–它是一组软件工具,这些工具打包在一个软件包中,并且可以在您的开发环境中使用。...如果您还不知道,那么 widget(小部件)可以是视图内的任何东西- button(按钮),list(列表),table(表格),input box(输入框),card view(卡片视图),等等。..., MaterialApp 是小部件的封装,Material 是 materials 中的一种,Center 是将元素居中的小部件。Text 将添加文本字段小部件。

    1.8K10

    盘点那些具有特色的写作软件

    与笔记软件相比,写作软件相对来说少很多。尽管如此,写作软件市场已经不少拥有特色的写作工具。今天,我尝试在有限的视野范围内对已发现的一些拥有特色的写作软件进行逐一盘点。...解决拖延症,除了截止日期这一治病良方,应该还有极限写作模式。 极限写作模式,即 Dangerous Mode,译为危险写作模式也可。这类写作应用的核心理念是,Write or Die....正像这款应用的自我介绍一样,这应该是唯一一款使你强制断开网络进行离线写作的写作软件。如图是这款应用的起始页面。你只有关闭网络,才能进入编辑页面。...关于写作软件的发展,希望在未来能将思维导图、概念图、白板、卡片等思维工具与写作文本的结构与内容实现耦合,真正将构思与内容创作融为一体。在 Effie 之外,一些卡片写作软件也能很好地实现上述理念。...情绪板卡片笔记法雪花写作法氢图官网氢图如果你对氢图感兴趣,可以进一步阅读相关文章《建立你的知识图谱:在可视化卡片笔记氢图中思考和记录》这些卡片写作软件所提供的各种类型的卡片视图,本身便是一种非常棒的构思工具

    1.2K20

    【软件开发规范七】《Android UI设计规范》

    2.2 材质与空间 材质 ​编辑 Material Design 中,最重要的信息载体就是魔法纸片。纸片层叠、合并、分离,拥有现实中的厚度、惯性和反馈,同时拥有液体的一些特性,能够自由伸展变形。...卡片通常是通往更详细复杂信息的入口。卡片有固定的宽度和可变的高度。最大高度限制于可适应平台上单一视图的内容,但如果需要它可以临时扩展(例如,显示评论栏)。卡片不会翻转以展示其背后的信息。 ​...通过按压动作可以触发悬浮卡片(或者是全屏视图)中的 Chip 对应实体的视图,或者是弹出与 Chip 实体相关的操作菜单。 狭小空间内表现复杂信息的一个组件,比如日期、联系人选择器。 ​...网格列表与应用于布局和其他可视视图中的网格有着明显的区别。 ​...编辑 单选按钮(Radio button) ​编辑 复选框(Checkbox) ​编辑 开关(Switch) Tabs ​编辑 在一个 app 中,tabs 使在不同的视图和功能间探索和切换以及浏览不同类别的数据集合起来变得简单

    5.1K20

    优秀笔记软件盘点(五)—那些强大的卡片笔记写作法软件

    优秀笔记软件盘点(五)——那些强大的卡片笔记写作法软件我应该选择什么工具实践卡片笔记法呢?...在阅读完《卡片笔记写作法:从阅读到写作》后,你或许会有个问题:我应该选择什么工具实践卡片笔记法呢? 关于这个问题,你可以详细阅读《在找适合自己的卡片笔记应用?我的选择思路分享》。...支持卡片拟态化,即支持卡片视图等功能;2.最好支持双向连接等功能,方便建立知识网络。基于这个标准,我推荐以下工具。...Agenda 官网卡片+ 速记:Flomo如果你并不是重度笔记用户,而是想在碎片化时间记录一些碎碎念,那么选择轻量级的笔记应用 Flomo 就对了。介绍一款卡片式设计的轻量级速记工具。...比如,Roam Like 产品的灵活与自由,Notion Like 产品的 Database 多视图的强大.今天主要介绍 Notion Like 产品 FlowUs.介绍一款具有特色的、 Notion

    1K20

    工具:“类脑式”知识管理工具Lattics试用体验 | 知识管理

    除了普通的文本编辑器,Lattics支持3种编辑视图:思维导图、情节视图和鸟瞰视图,通过拖拉拽的操作方法,进行内容结构化编辑。...创建/导入卡片 Lattics的卡片,相当于《卡片笔记写作法》中闪念笔记/永久笔记,用于随时记录未经整理过的想法,处于一种离散的状态,并通过标签、内容引用和反向链接进行分类和关联,形成知识图谱——这一点与...Lattics文档可以由Lattics卡片转换而来,或者从外部直接导入已有内容。导入文档的逻辑与导入卡片相同。...另外,Lattics可支持丰富的数学公式,这一点非常令人印象深刻,貌似在MD编辑器中比较难实现。由此也可以看出,Lattics的编辑功能还是比较丰富的。...除了普通的文本编辑器,Lattics还支持思维导图、情节视图和鸟瞰视图3种编辑视图,进行内容结构化编辑,以思维导图编辑方式为例。

    37710

    草图风?新粗野主义?下一个设计趋势?(附快速设计指南)

    它有助于颜色更好地与其他色调联系起来,同时避免过高的对比度和眼睛疲劳。 002.阴影 代替柔和的阴影,它适用于卡片下方的硬黑色矩形。它不是典型的几乎看不见的边界,而是厚、暗和明确的轮廓。...虽然这对于可访问性来说非常好,但它也为我们的大脑添加了更多要处理的对象。虽然还没有在一些用户身上进行测试,但相信这些设计让我们的大脑更加紧张。 大多数阴影或假 3d 对象使用等距视图。...它实际上总是某种形式的 45° 角。 现代极简主义与新野蛮主义卡片——典型的阴影 003.颜色 颜色正朝着大多数其他风格会认为丑陋或冲突的方向发展,例如将红色与蓝色或绿色混合在一起。...更引人注目的是,最典型的外观卡片的按钮也略微错位。Post 按钮中的文本离左边太远了,而且按钮本身也被放置在与右边不同的距离,而不是与顶部的距离。...这种造型方式使丑陋的东西正常化,让初学者更容易认知——他们会想“我可以自己做!” 我相信这就是一些品牌采用这种风格的原因。它没有威胁性,任何人都可以做到。

    65430

    OpenGLES(一)- GLKit以及常见API

    GLKController 是GLKView的容器,继承自UIViewController。用于绘制视图内容的管理与呈现。 ios12以后苹果大大废弃了GLKit,使用了Metal。...,将3D图形通过观察者、视口转为2D图形。...度(以像素为单位) drawableHeight //底层缓存区对象的宽度(以像素为单位) drawableWidth // 绘制视图的内容 //绘制视图内容时使用的OpenGL ES上下⽂ EAGLContext...:(GLKViewController *)controller; //视图控制器调用视图以及更新视图内容的速率 NSInteger preferredFramesPerSecond; //视图控制器调用视图以及更新其内容的实际速率...textureOrder GLKit中至多允许出现2个纹理 配置雾化 //应⽤于场景的雾属性 fog 配置颜色信息 //布尔值,表示计算光照与材质交互时是否使⽤颜⾊顶点属性 colorMaterialEnable

    1.3K30

    MindManager2023免费版思维导图软件

    项目管理功能强大,将图形思维和软件本身完美结合,将用户头脑中涌现的想法、计划、流程等付诸行动,获得简洁直观的视图,轻松捕捉、结构化处理和组织信息,有效提高小组成员之间的协作性和项目组的工作效率。...在该版本中进行了全面的升级和优化,新增文本加速器、主题信息卡片、可用性和效率、Microsoft Word 集成、 导图汇总、位置导入与导出、对象形状、 强大的流程图扩展、幻灯片和演示文稿等多种功能,满足用户多样化的使用需求...将形状内的主题或流程部件分组,区分重要区域;或组合可自定义的 智能图形 以构建支持您的独特目标的新模板和图表类型。...使用角星、箭头、方括号、漏斗等 12 种新形状,丰富、澄清和扩展导图内容,轻松地在形状内对内容进行分组,以定义流程、阐释概念等,使用新的智能漏斗和矩阵,快速、轻松地创建自定义图表。...zoneid=50131下载一键安装包如上!

    4.3K20

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

    在上下文环境中,使用动画和可交互性循序渐进地引导用户。要避免显示看起来像可交互的屏幕截图。...父视图或上一张卡片的顶部边缘在当前卡片的后面可见,这样可以帮助人们记住他们在打开卡片时暂停的任务。...当用户进入模态任务时,他们会离开之前的页面,因此最好使前后操作清晰连贯。你也可以在视图的其他部分中,提供更全面描述任务或指导的文本。 模态视图外观应与APP风格统一。...例如,当模态视图包含导航栏时,它应该采用与APP导航栏相同的外观。 为模态视图的展示提供合适的过渡动画。使用与APP风格统一的过渡动画,增强用户对内容转变的认知。...在iPad上,使用拆分视图而不是标签栏。拆分视图提供与选项卡栏相同的快速导航,同时更好地利用了大屏幕。 当您具有内容类型相同的多个页面时,请使用页面控件。

    2.6K20

    Ios常用第三方动画框架(三)

    RMParallax - RMParallax是一个app启动页引导开源项目,除了细微的翻页视差效果,描述文本的过渡也非常美观(版本新特性、导航页、引导页)。...ADo_GuideView - 转动的用户引导页(模仿网易bobo) 因为没有从app包里抓到@3x的图片,建议在iPhone5模拟器运行,保证效果~ (版本新特性、导航页、引导页)。...用于简化实现各种类型的旋转木马(分页滚动视图),无限轮播 ,iOS开发之多图片无缝滚动组件封装与使用。 KIPageView - 无限循环PageView,横向TableView,无限轮播。...ZLSwipeableViewSwift - swift 卡片堆叠效果的实现(ZLSwipeableView)】可实现类似Tinder和Potluck应用程序的卡片堆叠效果,该项目基于ZLSwipeableView...INPopoverController - OS X可自由定制的 Popover 视图。 WZXJianShuPopDemo - 仿简书、淘宝等等的View弹出效果,已封装好,使用简单。

    9.2K30

    美团App页面视图可测性改造实践

    视图信息的获取和存储-XrayDumper 视图信息的输出-XrayServer SDK整体功能结构 视图信息的增强 动态布局自动化的收益 未来展望 使用视图解析原理解决WebView元素定位 视图可测性改造更多的应用场景...页面视图可测性改造-XraySDK 定位方案对比 既然知道了Drawable没有填充AccessibilityNodeInfo,也就说明我无法接入目前的自动化测试方案来完成页面内容的获取。...Drawable比View使用资源更少,绘制性能更好,放弃使用Drawable就等于放弃了性能的改进 使用图像识别进行定位 动态卡片中有很多图像中包含文字,还有多行文本都会对图像识别的准确性带来很大的影响...(Xray-Server) 自动化内部或者三方系统内部 JAR包或基于其他语言的依赖包 XraySDK如何才能获取到我们需要的Drawable信息呢?...动态布局自动化的收益 基于视图可测性的提升,美团动态化卡片的自动化测试覆盖度有了大幅的提升,从原来无法做自动化测试,到目前80%以上的动态化卡片都实现了自动化测试,而且效率也得到了明显的提升。

    78240

    “罗马不是一天建成的”:Roam Research 101 系列之每日笔记与页面引用

    未来使人焦虑,过去使人抑郁。可以说是间歇日记的记录方式配合 Roam Research,治愈了我的 抑郁 和 焦虑。...+ 卢曼 卡片盒笔记法,一元化笔记可转化为具体的永久笔记放入卡片盒。...via @Innis 2.2 闪念笔记、项目笔记、永久笔记 示例 《卡片笔记写作法》所提到的几个概念,跟 Daily Notes 每日笔记最相关的,应该是闪念笔记(Fleeting Notes)。...项目笔记(Project Notes)只与某一特定项目有关,保存在特定项目的文件夹内,项目结束后可丢弃或存档。...3.1 第二大脑的“抽象与再具象化” 《卡片笔记写作法》 在书中提到关于“抽象与再具象化”的片段: 要想与思想共舞,我们首先要通过抽象和再具体化的手段,把想法从原来的上下文中剥离出来。

    1K40

    【CSS】1287- 一行 CSS 实现 10 种强大的布局

    现代 CSS 布局使开发人员只需按几下键就可以编写十分有意义且强大的样式规则。上面的讨论和接下来的帖文研究了 10 种强大的 CSS 布局,它们实现了一些非凡的工作。 01....我们在这里做的是将最小侧边栏大小设置为 150px ,但在更大的屏幕上,让它伸展出 25% 。侧边栏将始终占据其父级水平空间的 25%,直到 25% 变得小于 150px 。...向组件添加 display: grid 将为您提供一个单列网格,但是主区域的高度将仅与页脚下方的内容一样高。...在这里, clamp() 函数所做的是使该元素保持 50% 的宽度,直到 50% 大于 46ch (在较宽的视口上)或小于 23ch (在较小的视口上)。...不过,我确实想提及这一点,因为这是一个经常遇到的问题。这只是简单地保持图像的宽高比。 使用 aspect-ratio 属性,当我调整卡片大小时,绿色视觉块保持 16 x 9 的宽高比。

    4.7K20
    领券