文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

新Sketch设计背后的故事：如何重设计Sketch的工具栏图标？

在这之前我们也翻译了一篇关于Sketch设计师如何重塑Sketch图标的故事，大家可以看这篇 新Sketch图标背后的故事：如何为Big Sur重塑风格 Sketch作为一款关于设计的应用，小细节是非常重要的一环...团队在设计工具栏图标的时候非常谨慎小心，以确保用户不会对这些最常用的内容感到不适应。 Big Sur中的大更新 新图标的一个微妙但重要的变化是尺寸。...在尝试了几种不同的方法后，团队决定采用半填充样式，它提供了良好的易读性，同时又不会偏离 macOS 样式太远。...“虽然在某些情况下使用内部边框会更容易，但当你需要一个带有开放路径的图标时，事情很快就会变得混乱或不一致，”他说。...如您所见，当外边缘没有以完整像素展示时，图标最终看起来会很模糊。最后，Janik 将形状层的每边的周长扩大了 0.25pt，以在完成的图标上创建清晰的外边缘。

1.4K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【Java 进阶篇】深入了解 Bootstrap 按钮和图标

    Bootstrap 提供了多个内置样式类，您可以根据需要选择不同颜色的按钮，如 btn-secondary、btn-success、btn-danger 等。这使得按钮的设计和定制变得非常容易。...class="bi bi-heart"：这是 Bootstrap 图标的样式类。bi 是 Bootstrap 图标库的命名空间，bi-heart 是具体的图标名称。...Bootstrap 的图标库包含了大量常用图标，如心形、星星、下载、垃圾桶等等。您可以在 Bootstrap 文档中找到完整的图标列表，并选择适合您项目的图标。...改变图标的颜色 Bootstrap 图标也可以轻松更改颜色，以适应不同的设计风格。通过修改图标的样式类，您可以实现这一目标。...以下是一个示例，展示如何更改图标的大小： 在这个示例中，我们使用了内联样式来定义图标的大小，2rem

    27830

    条件格式小技巧——图表集！

    ▽▼▽ 也许大家用的不多，不过这个小技巧之所以要跟大家分享，是因为它采用的迷你小图标的形式，非常细致的刻画出整体数据的趋势，可以让人一目了然的观察出整体数据的涨跌趋势，功能类似于之前推送过的一篇迷你图。...选中原数据区域之后（不包含左列部门名称和底部标题），在开始——样式——条件格式中选中图表集中任意选择一个图表集样式进行套用。然后就可以输出带有图表集样式的图表。 ? ?...再次选择带有图表集的数据区域，在条件格式——管理规则中打开弹出菜单 ? 点击编辑规则，打开下一步的弹出菜单。 ?...绿色图标范围为>=80,60=图： ? ? 迷你饼图： ? ? 迷你方格图： ? ? 其实除此之外还有很多个样式，在这里就不再一一讲解了，大家会了方法之后可以自由发挥创意~~~ ?

    1.9K50

    ［ISUX译］iOS 9 人机界面指南(五)：图标与图形设计 - 腾讯ISUX

    添加细节时请慎重，如果一个icon的样式或形状过于复杂，它的细节可能会让用户迷惑，在小尺寸的icon中更可能会显示模糊。 注意： 想要测试你的图标在小尺寸下的显示效果，可以把它移动到主屏的文件夹下。...同样地，每个app都应该提供一个小尺寸的图标，用于在系统内置的设置页面中展示。 这些icon应该易于辨识，方便用户在搜索结果列表或者设置页的app列表中一眼就可以看出来。...通常情况下，启动图片不需要提供如下内容： “进入应用的过程”，例如载入进程图。 带有“关于信息”的窗口。 品牌元素，除非它们是 app 第一屏的静态内容。...创建有内部细节的图标的选中态版本时(例如收音机图标)，将内部细节反过来填充，以确保这些细节在选中态依然突出。...例如语音邮箱和阅读列表的图标的选中态就是使用了 2 点的描边，而未选中态是用 1 点来描边的。 ? 有些图标由于形状细节的关系，增加描边后看起来并不好。

    1.6K31

    Google数据可视化团队：数据可视化指南(中文版)

    取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。 ? 样式 数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。...图表可以从以下方面进行优化： · 图形元素 · 文字排版 · 图标 · 轴和标签 · 图例和注释 不同类型数据的样式设计 可视化编码是将数据转换为可视形式的过程。...但是应该保持克制，使用有限的字体样式。 ? 5. 图标 图标可以表示图表中不同类型的数据，并提高图表的整体可用性。...以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解： 渐进式披露 提供了按需求逐步展示详细信息的明确途径。...多个独立的图表有时可以比一个复杂的图表更好地表达故事。 仪表板设计 仪表板的目的应在其布局，样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据，它的设计应该适合它的使用方式。

    5.2K31

    【愚公系列】《微信小程序与云开发从入门到实践》016-基础功能组件

    警告样式图标：undefinedtype="warn"，表示警告。 等待样式图标：undefinedtype="waiting"，表示等待。...搜索样式图标：undefinedtype="search"，表示搜索。 清除样式图标：undefinedtype="clear"，表示清除。...运行效果： 运行代码后，页面将展示不同类型的图标，效果如下图（假设是图4-1）。每个图标的大小均为30px，展示了不同的状态提示图标。 icon 组件可配置的属性有3个，如表所示。...、clear size 数值 设置图标的大小 color 字符串 设置图标的颜色 2.progress 组件的应用 progress 是一种进度条组件，在实际页面开发中，有很多场景会使用到进度条组件...其本身使用非常简单，当我们新建一个页面时，默认生成的模板中就带有一个 text 组件，如下所示： <!

    11100

    B端产品设计规范

    在设计规范的指导下，开发部门在搭建全局共用控件时，产品设计规则就会更加清晰明了，如：产品设计中的按钮、间距、字体大小、颜色、列表等元素的设计明确。...中文采用标准字体:“微软雅黑”、“宋体”，英文采用“Arial”，不能使用特殊字体(如 隶书、草书等，特殊情况广告图可用图片替代)，来保证用户的阅读体验。...所有字体样式颜色组合需要尽量通过 3:1 的 WCAG AA 标准。 图标的思考：如下图所示。 图标现在是制作完成后，上传到阿里巴巴的字体图标库中。前端调用起来更方便，调整图标的大小和颜色就好。...图标尺寸的思考： 在制作图标时，尺寸以偶数尺寸为准。 为保证图标的显示效果，最小尺寸为 16px。 为保证 Web 页面的整体效果，图标的最大使用以不超过 48px 为准。...后台中常见的按钮类型分为线性按钮、文字按钮、图标按钮等。如下图所示。 表单 常见表单是由多个列表项构成的。

    4.4K46

    这款GAN能把故事画出来

    选自arXiv 作者：Yitong Li等 机器之心编译 参与：一鸣、路 当我们阅读的时候，我们的头脑可以想象书中发生的事情，似乎文本可以转换为脑海中栩栩如生的画面。这种能力似乎是人类的「专利」。...具体来说，图像中目标的外观和背景布局必须根据故事情节推进以恰当的方式呈现。 StoryGAN 如何解决这个难题 下图展示了 StoryGAN 的模型架构： ? 图 2：StoryGAN 架构图示。...这里需要解决两个问题： 如何在背景改变时有效地更新语境信息。 如何在生成每张图像时将新的输入和随机噪声结合，从而可视化角色的变化（变化可能非常大）。...图 3：故事判别器的结构。图像和故事文本特征的内积作为输入馈送到全连接层，并使用 sigmoid 非线性函数预测是生成的还是真实的故事对。 算法 StoryGAN 的伪代码如算法 1 所示： ?...研究人员使用如下方法将其改造为 CLEVR-SV： 将一个故事中最多的目标数量限制在 4 个。 目标为金属或橡胶制的物体，有八种颜色和两种尺寸。 目标的形状可以是圆柱体、立方体或球体。

    76230

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

    想要了解如何设计自定义图标，请参考本文第五章栏按钮图标(Bar Button Icons)部分。工具栏和导航栏图标的颜色可以通过tintColor属性来设定。...标签栏图标的颜色可以通过tintColor属性来设定。 想要了解每一个图标的名称及其含义，请参阅UIBarItem Class Reference中的UITabBarSystemItem部分。...活动是： 一种可定制对象，代表着某个可以让用户在app中执行操作的服务 以图标的形式呈现，外观与栏按钮图标相似 ? 用户通过点击活动的图标来启动某样活动。...默认型样式包括左侧的图标（可选），和图标右边左对齐的文字标题。 默认型样式适合展示一系列无须通过附加信息便可以区分的项。 ?...重要 以上四种单元格样式均支持添加表格视图元素，如勾选或展开标志。添加这些元素会缩小标题以及副标题单元格的可用宽度。 使用表格视图可以简洁而高效地展示少量或者大量信息。

    10.1K51

    谷歌Material Design可视化数据设计规范指南

    图表可以从以下方面进行优化： · 图形元素 · 文字排版 · 图标 · 轴和标签 · 图例和注释 不同类型数据的样式设计 可视化编码是将数据转换为可视形式的过程。...独特的图形属性可应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味或表达式）。...但是应该保持克制，使用有限的字体样式。 5. 图标 图标可以表示图表中不同类型的数据，并提高图表的整体可用性。...以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解： 渐进式披露 提供了按需求逐步展示详细信息的明确途径。...多个独立的图表有时可以比一个复杂的图表更好地表达故事。 仪表板设计 仪表板的目的应在其布局，样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据，它的设计应该适合它的使用方式。

    3.9K21

    Z-blogPHP《小清新》至简至美个人博客主题模板，自适应加SEO优化

    关于这个模板说多了都是故事，期初ZB官方发布投标公告，征集ZBP新版默认主题，当时正在制作2020年新款主题的时候，收到官方的公告。...2020/10/29 --适配部分H5标签，优化css样式表。 2020/10/12 -- 优化二级菜单样式。 -- 修复文章前台没有输出文中上下角标的问题。...2020/04/09 V、修复分类列表文章缩略图太小显示不全的问题。 V、优化列表分类之间间距，适配移动端显示效果。 V、修复用户模板页无法打开的BUG。 V、增加其他模板顶部背景图接口。...5.优化更新首页轮播图js代码，修复部分情况下360浏览器单击轮播不跳转的BUG。 6.修复分类列表作者头像加V错乱的bug。...预览图： 分类列表预览： 文章页预览：

    3.3K20

    「R」Shiny 教程笔记

    p3：Server server：集成输入生成输出。3 个步骤要点： 要展示的对象设置为 output 元素，如 output$hist。 通过 render* 函数生成要展示的元素。...例如讲解视频中的例子，当修改图标题时，代码重新运行，而数据来自随机函数，随机函数被重新执行，最终效果是不仅仅图标题改变了，生成的数据也发生了改变。 ? ? ? ? ?...p11：使用 isolate() 隔离响应表达式 如何在不更新图的情况下更新标题呢？这就需要使用 isolate() 了。 isolate() 创建一个非响应对象（看作 R 常规值）。...（注意这里虽然图更新了，但绘图数据并没有更新） ?...tabPanel: 带有独立的页面仪表板，一般与其他的 panel 组合使用，如 tabsetPanel。 tabsetPanel: 将多个标签组合为单个的仪表板。

    6.7K51

    腾讯微云文件图标的设计探索

    常规结构：由纸片背景、彩色横幅、文件后缀、图形符号四层组成，这种结构通常用于拥有多种后缀的文件类型或带有明显色彩属性的常见文件类型，如Word文档、音频文件、PDF文档等。 2....通过数据了解用户的使用习惯 文件图标是服务于用户内容的图标，一千个用户就有一千种文件列表，不同文件图标出现的频率、数量我们无法控制，但是我们可以借助大数据来了解这些文件类型的数量和分布。...文件夹由于来源多样也未列入其中）我们截取了前24种文件类型格式，并绘制了饼图： 从结果可以看出，微云内的文档类文件数量占比非常高。...好的设计也要为开发流程节省成本 从资源输出角度看，在以往的微云版本中，我们的图标资源一直是以位图格式进行输出的，根据使用场景的不同，每种文件图标我们需要输出超过7种尺寸，且每种尺寸还要根据不同的文件格式子集输出数量庞大的资源...以下ISUX文章，你可能也感兴趣 ▽ PUPU激萌表情设计故事 品牌设计探索-让品牌融于应用之中 亿级曝光品牌视频的幕后设定 DOV社交探索 | 贴纸极致设计 拨动情绪的内容设计 ---- 感谢阅读

    2.8K40

    设计效能 | QQ动漫的设计系统之路

    这样很难保证大家的设计版本都能得到统一的更新，当大家使用的组件版本不一致时，输出的界面就会出现杂乱无章的情况。...2）如果过程中遇到，自己组件中需要调用对方组件，比如某个图标没有在图标组件文件中，但自己的列表中又需要，可以先用其他组件中的图标代替，等图标组件库更新后，再同步更新这里的组件即可。...图标规范也会影响组件库的整理和日常使用，在做图标组件时，需要定义好图标的最大范围和最小范围，嵌套起来使用才不会出错。图标的规范要严谨，同一个尺寸下的图标视觉面积要保持一致。...不然在大小这个层级就会出现，虽然是相同尺寸的图标切图范围，但图标的体量看起来却并不一致。 将纯色或渐变图标中的颜色剥离，并使用颜色组件进行嵌套，这样做既方便替换又能减少图标组件库的复杂度。...对于图标的多种状态，建议做在同一个层级中方便选择。 对于图标来说，直接对画板设置切片即可，不需要再加切片框。

    66220

    07.HTML实例

    此例演示不同的"计算机输出"标签的显示效果。 此例演示如何在 HTML 文件中写地址。 此例演示如何实现缩写或首字母缩写。 此例演示如何改变文字的方向。 此例演示如何实现长短不一的引用语。...文本下划线与删除线 HTML 样式 HTML Style 元素 背景色样式 字体样式，颜色，大小 文本对齐样式 设置文本字体 设置文本字体大小 设置文本字体颜色 设置文本字体，字体大小，字体颜色...制作图像链接 创建图像映射 点击图片映射到另一张图 HTML 表格 简单的表格 没有边框的表格 表格中的表头 带有标题的表格 跨行或跨列的表格单元格 表格内的标签 单元格边距(Cell padding...创建一个按钮 本例演示如何在数据周围绘制一个带标题的框。...带有文本域与输入域的表单 点击提交 带有复选框与提交按钮的form表单 点击提交 带有单选框与提交按钮的表单 点击提交 发送邮件表单 HTML iframe 内联框架 (HTML页面中插入框架)

    8.2K40
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券