文字装饰性的样式 * 其它 * 字体族(font-family) -- serif 衬线字体：字体周围有装饰性的弯弯钩钩(比如 宋体) -- sans-serif 非衬线字体：字体笔画的开始和结束...span默认是inline的 也是没有定高的，给span规定高度也是没有用的(因为span是inline的)。...因此这种应用场景 一般是小图标。另外 解码base64也是会有 额外开销的。 * 多分辨率的适配 * 背景缩小 用在什么场景呢？...显示其余部分，滚动条 始终显示 auto：内容超出容器后，允许滚动 显示其余部分，滚动时 才显示滚动条。...图标字体：把图标做成文字，给他定义成特别的字体，在需要使用的地方 引入该字体。 * base64的使用 把图片变成文本的一种方式，然后把base64字符串 内嵌到css中 进行使用。
如果是一份儿童教育相关的图表，可爱的卡通字体或许能让孩子们更容易接受；而商务报告则更适合简洁专业的字体，彰显严谨态度。动态元素的巧妙运用Napkin支持添加连接线和装饰元素，让图表的层级结构更加清晰。...装饰元素则为图表增添细节和美感，比如在节日主题的图表中，添加一些应景的小图标，如春节的鞭炮、圣诞节的雪花等，瞬间提升图表的氛围感。调整图表层级结构也是Napkin的一大亮点。...图标与文本的完美融合Napkin拥有庞大的图标数据库，你可以从中选择合适的图标添加到图表中，或者与已有的图标进行交换。图标能够以简洁直观的方式传达信息，增强图表的表现力。...在一份城市交通流量分析图表中，用汽车图标代表机动车流量，自行车图标代表非机动车流量，让数据信息一目了然。图标与文本的搭配也十分重要。...你可以根据文本内容选择相应的图标，使两者相互呼应，加深观众对图表的理解。比如在描述不同类型的水果销量时，在对应的文本旁边添加相应水果的图标，让图表更加生动有趣。
我要说的是：每个人都知道如何把某个东西居中。小事一桩。如果你不知道怎么做，也有现成的知识供你查阅。 然而，如果我们查看下实际的应用程序就会发现，它们并没有使用这些方法。...图标字体 对齐矩形相对简单。对齐文本则很困难。图标是矩形。如果我们把图标放到字体文件中会怎样呢？ 现在，我们什么也对不齐了： 我们也没法设置图标大小。...在上面的例子中，所有图标的字体大小和行高都做了同样的设置。如你所见，它们的大小、边距都不一样，没有哪一个真正地对齐了。 尽管有很多缺点，并且几乎没有任何好处，各家公司还是争先恐后地到处添加图标字体。...但是，即使字体参数可以不平衡，也不意味着它确实如此。现实中会发生什么呢？...我们能做些什么：图标字体 不要再使用字体图标。 使用普通的图片格式。为了帮你做出决策，我画了下面这张图： 看看苹果公司怎么费力地将复选标记放入矩形内，以及将矩形放到文本标签旁： 然而他们还是失败了！
好吧，可能我理解的还有偏差，那么什么是玻璃拟态呢？来读一读这篇Boxi翻译的文章，一探究竟。 人的兴趣总是捉摸不定，设计趋势因此也会会钟摆一样摇摆不定。...不是整个产品都用，而是一小部分元素，这证明了我的观点，即如果审慎地少量采用，并且在这些背景上的对象在没有装饰的情况下仍能保持结构和可读性的话，这种风格是行得通的。 ?...这是一个相当激进的变化，只不过当时对超轻量字体以及丑陋的图标争议更大，这算是是未引起争议的改变之一了。大家似乎还喜欢。 ?...下拉通知很快变成了一件值得去做的趣事，因为（你慢慢地下拉通知时）可以看清楚新面板下的图标是如怎么淡出变模糊的。 ?...你用glass的话，喝水的玻璃杯也可以是glass，所以我认为这种风格应有一个便于识别的名称。 怎么才能实现这种效果呢？ 效果本身很容易实现，但是要考虑两点。
，次要内容过小 与其让字体大小独自承担所有重任， 不如尝试使用字体重量或颜色来完成同样的工作 在辅助文字上使用柔和的颜色而不是小号字体， 既能让人明白文字是次要的，又能降低可读性 尽量使用两到三种颜色...让文字更接近背景色才真正有助于创建层次，而不是让文字变成浅灰色 使用白色文字并降低不透明度，确实降低了对比度，但往往会导致文本看起来暗淡、失色，有时甚至是残缺的 在图像或图案上使用这种方法意味着背景会透过文字显示出来...如果您希望您的系统能让您轻松做出尺寸决定，请确保刻度中没有两个值的距离超过 25% # 确定系统 先确定一个合理的基值，然后使用该值的系数和倍数建立一个比例尺 16px 是一个很好的开始数字，因为它能很好地分割...行高和段落宽度应成正比--窄的内容可以使用较短的行高，如 1.5，但宽的内容可能需要高达 2 的行高 # 计算字体大小 当文字较小时，额外的行间距很重要，因为当文字换行时， 它能让你的眼睛更容易找到下一行...，就需要在亮度离 50% 越远时增加饱和度 # 利用可感知的亮度优势 如果您的底色饱和度已经很高，该怎么办呢？
信息层级并不仅仅是不同尺寸字体的组合，而是由字体尺寸，字重，字体颜色形成对比的正确组合。对比差异越大，层级关系表现越明显。 ? 1. 如何创建更好的对比度？...运用数学原理理解颜色 我们大多数人都不太擅长选择正确的颜色组合，每当我们看到具有精心配色的设计时，我们都会问自己：「他们是怎么做到的？」 ?...你可以轻松摆脱彩色背景上无聊的白色，并把它变成毕加索的作品。（如下图） ? 1. 那么HSB中的加法和减法怎么算呢？...实际上有两种方法，如下图，两种方法都具有相同的基色#B9F4BC（圆形背景色），但图标中文件夹和装饰条的颜色则不同。在我们开始时，记住第一个字母相当于色相，其次是饱和度，然后是亮度。 ?...但是对于用户，如果行与行之间没有很明显的区别，阅读起来会很困难。因此，除了使用线条之外，在列表中添加彩色背景对于阅读中的用户来说很有效，并且对于我们设计师来说也会更有乐趣。 ?
那能不能“当用户选中文字后在选中文本下方有突出强调、在文本上方出现翻译”呢？ （这个笔者在本文先不说，以免造成“长篇大论”，本文只把实现的基础知识全盘托出！）... 笔者的思路是：当用户鼠标“抬起”时，去判断有没有选中文本，如果没有则啥事没有、反之则要将这一部分选中的文本替换成标签！...selection （如上图）至此，选中状态已经差不多了 —— 至于没说的翻译，这里如果你没有足够的能力建一个“词库”，那么我还是建议你启用“第三方库/插件”或者在线翻译API。...这里还有一个问题是：在笔者实践过程中发现，ruby标签是没有办法嵌套在行内元素中的：它会带着其内包裹的文字消失不见 ！这一点一定注意。 好了，你总不能让用户一直处于这个状态吧。...我建议，在点击页面其余空白地方时改变状态 —— 因为为了更好的体验，上面选中使用的mouseup：这里涉及到一个“浏览器事件触发的优先级”。你可以让文本处于“高zIndex区域”、或者用JS去隔离。
作为一名UI设计师，我始终在思考一个问题：在进行适老化设计时，除了像老年机一样调大字号外，我们还应该进行哪些方面的设计，从而能让老年人们可以更加顺利地使用手机呢？...所以，今天我想跟大家分享下我自己的一些想法，如果大家有其他想法，咱们可以互相交流~ 如何做好适老化设计 文字 字号放大，是各大主流软件在适老化改版中最基础的功能改造。...简单理解，非衬线体（例如黑体）就是在文字末尾没有装饰性笔画，常应用于网页端或手机端，这类字体较为醒目且轮廓清晰，比较适合老年人阅读。...所以，在进行适老化设计中，色彩对比度要在4.5:1之上，增强界面信息与背景颜色的对比度，这样才足以让老年人看清手机上的信息。...比如，在进行图标设计时，需要尽量避免图形icon的单独出现，用图+文字的形式表达是最为合理的一种方式。
Widget 组件 , 其内部没有需要管理的状态 ; StatelessWidget 组件延伸出以下组件 : Container : 容器组件 ; Text : 文本组件 ; Icon : 图标组件...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色
我想我从来没有在任何专业项目中直接在图像上使用文本，之所以提到它，是把它看做是一种应该掌握的技巧，就是说这种方法虽然可能可以产生非常酷炫的效果，但使用的时候需要小心 ?...这可能是在图像上可靠地叠加文本的最微妙的方式，我在其他任何地方都没有见过(但它相当隐蔽)。不过要记下来，你或许在将来某些时候需要它。 5....通常，改变字体大小、大小写或字体权重会改变文本占用的区域大小，这种变化可以限制住悬浮效果。 所以还有哪些属性可以更改呢？...作者还没有把它打包成图标字体，但是有人在 Github 上放了一个字体版本，可以很好地跟踪原始设置（如果你只使用了套装中的10或20个图标，没有必要加载整个包）。...总是很棒的渐变，颜色和阴影。 Elegant Seagulls。如果你曾经想过“天哪，我怎么做比标准网格更有趣的事情？”，浏览他们的一些照片，这里有你想要的答案。 Cosmin Capitanu。
据说点击蓝色字体关注同学都升职加薪了 图标是一种比其他语言更能被普遍理解的视觉语言，它是一种强调对象特征的符号。...我倾向于使用表情符号或独特的图标。 重量 可以组合样式以创建不同的权重。如果服务主要是图片，图标的权重应该最小化，如果服务是面向文本的，重图标可以用来给用户带来视觉上的愉悦。...主要用于移动设备小区域的系统图标有时会以 4px 的倍数使用，以实现多功能性。 明晰 使用用户可以快速理解的最少元素进行设计。尽可能让用户友好，必要时应用简单的比喻。...复杂的图标可能不会或可能需要很长时间才能让用户理解它们的含义。 细节 建议在“快速信息传输”的狭窄区域内尽量减少细节，其中图标是最重要的目标。...特别是对于适合小区域的系统图标，最好只保留您正在谈论的最少内容并删除其他装饰元素。 一致性 在一项服务中执行相同功能的图标以相同的样式表示。
2）如果过程中遇到，自己组件中需要调用对方组件，比如某个图标没有在图标组件文件中，但自己的列表中又需要，可以先用其他组件中的图标代替，等图标组件库更新后，再同步更新这里的组件即可。...比如在做图标命名逻辑的时候，纠结于要先按尺寸分（图标/序号类别/尺寸/图标名），还是按功能分（图标 / 序号类别/尺寸/图标名/状态），不断调整多次，这时候就需要找大家一起探讨，怎么才是最方便的。...2）颜色 颜色库的设计，需要将产品中可复用的颜色汇总并分组，比如品牌颜色，按钮颜色，图标颜色，装饰颜色等等，这样可以使得用到颜色属性的组件更加灵活。...图标规范也会影响组件库的整理和日常使用，在做图标组件时，需要定义好图标的最大范围和最小范围，嵌套起来使用才不会出错。图标的规范要严谨，同一个尺寸下的图标视觉面积要保持一致。...3）内容更新权限与维护需要专人专办 举例：假设我负责字体，那么后续所有的字体更新相关都只找我来修改。
其实在此之前已经有很多小伙伴翻译或总结过类似文章来分析优秀网页设计的趋势，不过我还是希望我总结的东西能更宏观一点并为大家带来一些新的东西。...不论是用平面设计作为背景也好，或者是用平面设计的元素作为网页控件或者装饰也好，实际上好的平面设计会大大提高网站的视觉冲击力。...用户体验的一个准则是将用户需要的信息主动呈递给用户或是能让用户在三次点击内找到自己需要的信息，所以这种隐藏在一个图标里的菜 单目前还是略有风险。不过这种风险会随着普及程度降低。 ?...九、中文网站中矢量字体的使用逐渐上升 我们经常在国外的网站上看到网站内使用一套字体作为自己的网站字体，即使用户本地没有这个字体，网站也会很轻易加载到字体并在浏览器中运用。...但是随着中文在线字库的崛起以及在线制作矢量图标字体工具的发展，包括字蛛计划，我们可以使用矢量素材作为我们的字体了，而不仅限于矢量图标。 GOGORO ?
@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色..., BoxDecoration 是最常用的装饰器 // 可以自行查看 BoxDecoration 中可以设置的属性 decoration: BoxDecoration...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...@override Widget build(BuildContext context) { // 文本组件样式 , 可以设置给 Text 文本组件 // 设置字体大小 20, 颜色红色...faq/ ( 入门阶段推荐看一遍 ) 博客源码下载 : GitHub 地址 : https://github.com/han1202012/flutter_cmd ( 随博客进度一直更新 , 有可能没有本博客的源码
Text 组件显示一个特定的图标（通过 \ue679 这个 Unicode 编码对应的图标，可能是自定义字体图标集中的一个），设置了各种样式，如背景颜色、使用注册的 myFont 字体、字体大小、颜色、...listItem 函数主要用于给 Text 组件设置特定的宽高、背景颜色（使用之前注册的 myFont 字体、较大字体、白色字体颜色、圆形边框以及文本居中对齐等样式，从代码使用场景来看，可能用于那些作为图标样式展示的...注册这个字体后，后续就可以在界面中使用该字体来展示特定的文本样式了，例如显示一些自定义的图标字体等内容。...该函数接收三个参数： itemIndex（表示当前选项卡的索引） title（选项卡对应的标题文本） ico（用于显示的图标对应的字符编码，通常结合自定义字体来显示图标样式），并基于这些参数构建一个包含图标和标题文本的...对于图标对应的 Text 组件： 设置了固定的宽度和高度（width(30) 和 height(30)），指定使用之前注册的 myFont 字体，字体大小为 30，文本居中对齐（textAlign
驾车穿越大漠，用纵向视频也感受得到浩瀚的气象。 如果，主角的移动方式再狂野一些呢： ? △ 这是最终效果 运动场景也能驾驭，就算滑雪选手动作幅度再大，都可以收在狭窄的截取框里。 如果主角不止一位呢？...包装设计师们看到这，估计都馋哭了吧~ 花式字体自动生成 你们知道那种芝士字体么？ ? 就是这种，长得像芝士一样的字体，许多海报装饰文字中，经常用到类似的花式字体。...小伙把它放在摄像头前面，施展“挪移大法”，把上面海报上的字体用到了纸巾上。 ? 非常完美！ 这背后使用的，是一种深度学习技术，能够自动识别文本的风格，然后学习保存，字体再用起来的时候，就非常方便了。...反正我口水都止不住了…… 添加骨架，静图变动图 这个工具名为GoodBones，首先在静态图上，标记出一个骨架。 ? 然后，拖动骨架，就能让静态图片中的元素动起来。 ?...照片变视频 出去旅游的时候，拍了风景照片固然很棒，不过，如果你的照片会动呢？是不是听起来更鹅妹子嘤了？ Moving Stills这个功能就可以实现把静态的照片3D化，然后变成视频。
还没有广告！！！ 本系列主要从各种方面提高PPT使用技巧，今天的主角就是一款基于PowerPoint的插件工具——iSlide ? 使用说明 福利见文末↓↓↓ ?...其中每一个按钮都很棒，就不一一介绍了，挑选其中一部分为大家介绍。...iSlide插件里提供了一键优化功能： 选择相应的中英文字体即可更换，一键更改；在PPT设计中常用的行距是1.2，左右滑动即可调整，或者在右侧直接输入数字更改。 ? 设计排版：图片怎么排？...图标库：大家可以留意上图，在分页模板里的图标替换，就是在这个图标库里完成的。 ? 图片库：iSlide里所有图片都是免费可商用的，最重要的一点，全部都高清。 ?...插图库：插图功能让PPT可以跳出图标、图片这两种传统的辅助素材，它的存在也符合现在的审美趋近于扁平风的流行趋势。 ?
分类里面则展现品牌色的Logo、品牌色背景的Logo、Footer黑色背景的Logo。 ? Alt:Logo分类 2.标准色 颜色是设计最重要的部分，没有之一。...而带有装饰性的段落文本则不需要那么严谨，装饰性强就可以。需要注意的是在定义段落默认字体的时候还需要定义一个后备字体，即默认字体不能正常显示情况下显示的字体。...图标是网站形象的重要体现。3. 图标能使受众便于选择。根据图标大小和使用用途进行分类整理设计规范，这样才更清晰明了。 ? Alt:图标分类整理 ?...如果是图标按钮的话，除了上述参数值以外还需要标注icon和按钮文本之间的间距和icon图标的大小。 ?...在上传过程中，任何用户操作都应该有及时响应的动作，这样用户在使用的过程中才不会迷茫。 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
