交互 设计师 画稿时需要充分考虑输入输出（反馈）的状态，保证输入无障碍、反馈清晰易懂，使整个交互体验流畅。刚好近期做了一些表单的 优化设计 ，整个优化过程中就疏忽了很多细节体验，今天做个复盘，以表单举例来聊聊设计时应该如何拆解完善细节体验。

进阶阅读：

腾讯高手出品！如何从零开始提高产品用户体验？ 之前和大家分享了「产品体验设计-产品认知篇」一些基础认知相关内容，这次内容主要是关于如何在成熟产品形态上去提升产品体验设计的方法讲解。

阅读文章 >

输入前 输入前的页面重点是传达需要做什么、一般达成传达的目的有两种形式，一种是通过标题文字+辅助文字来说明，比如：需要输入文字、数字、需要点击、需要上传图片…；另一种是直接将输入控件直接采用特定的控件，比如：邮箱输入框、电话输入框…，这类控件一看就知道要填入啥信息。

辅助说明更多是为了帮助用户提前了解，减少出错率，如：需要上传 png 格式图片

帮助用户做决策，如：微信红包的群人数就是为了帮助用户输入红包个数，避免用户需要确认人数而返回看群人数，也算是一种提醒信息

输入 输入部分除了常见的快捷输入、输入联想、自动识别等方式帮助用户快速输入外，在涉及输入数字的时候，需要关注数字键盘上的输入行为可能会有哪些情况，而这些情况同时也需要和我们的输入项字段要求有关。举个例子：

例 1：微信红包个数字段与总金额字段对应的键盘设计不同，因为个数不会有小数点

根据特定的字段信息属性提供相应的数字键盘，减去多余内容，干扰、造成错误输入

例 2：能够根据输入要求智能判断，当总金额输入 0 后在此输入其他数字，自动去 0；首次输入小数点，则默认为 0.

这就是能够根据用户输入的内容结合输入项的输入要求，智能判断，呈现最终合理结果

例 3：实时判断输入内容，有问题即时报错反馈，微信红包通过顶部常驻提示及表单标红高亮展示错误

输入后 到这一步表示前几部输入行为已完成，但还存在用户需要重新调整输入的可能，这里就需要考虑修改的交互方式，考虑如何帮助用户更顺畅的对已输入字段的重新调整。

例 1：很多输入框当用户重新触发后会有“一键删除”的按钮，这就是为了方便用户快速修改，提高效率，有时候这种短字符的输入项一键删除重新输入比找到问题点删除再输入快许多。

例 2：QQ 红包这边，当点击已输入完成的个数、金额时，就会默认选中已有内容，重新输入直接是覆盖输入，相信这边也是考虑到在这么小的区域用户很难精准将光标插到数字中间吧

例 3：为了帮助用户拖动光标，苹果的原生键盘就支持长按键盘后移动，直接将移动热区从小小的输入框的面积扩大到整个键盘，真的是非常巧妙与贴心的设计

像以上说了这些都是非常细节的点，这些细节的点都是要基于大框架，大流程没问题的前提下我们要去花时间去思考，去改善的点，可能很多人会说这些细节其实对大框架的使用影响很小，事实确实如此，但我要表达的是我们可以将这种关注细节的喜欢，考虑多重场景放到我们平时框架、流程的设计中可以让我们发现更多设计需要思考的延伸点，只有这样不断的考虑场景、用户可能发生的行为、可能面临的问题可以帮助我们画稿过程中养成主动去思考更多，推敲更多的习惯，这样方案会在日积月累的锻炼中画的越来越好。

所以要逐渐养成这样的习惯的方法是多问，盯着页面多看，看看竞品。

这样设计能满足需求吗？ 符合用户使用场景吗？ 用户可能会怎样操作？是否都能满足？ 别人是怎么做的？ 这个步骤我是否有缺了什么页面或规则没想清楚？ 养成这样的习惯，慢慢的就会让自己一点点的考虑地更加深入，做出的方案也会更加完整。

欢迎关注作者微信公众号：「小发的设计笔记」

交互 设计师 画稿时需要充分考虑输入输出（反馈）的状态，保证输入无障碍、反馈清晰易懂，使整个交互体验流畅。刚好近期做了一些表单的 优化设计 ，整个优化过程中就疏忽了很多细节体验，今天做个复盘，以表单举例来聊聊设计时应该如何拆解完善细节体验。

进阶阅读：

腾讯高手出品！如何从零开始提高产品用户体验？ 之前和大家分享了「产品体验设计-产品认知篇」一些基础认知相关内容，这次内容主要是关于如何在成熟产品形态上去提升产品体验设计的方法讲解。

阅读文章 >

输入前 输入前的页面重点是传达需要做什么、一般达成传达的目的有两种形式，一种是通过标题文字+辅助文字来说明，比如：需要输入文字、数字、需要点击、需要上传图片…；另一种是直接将输入控件直接采用特定的控件，比如：邮箱输入框、电话输入框…，这类控件一看就知道要填入啥信息。

辅助说明更多是为了帮助用户提前了解，减少出错率，如：需要上传 png 格式图片

帮助用户做决策，如：微信红包的群人数就是为了帮助用户输入红包个数，避免用户需要确认人数而返回看群人数，也算是一种提醒信息

输入 输入部分除了常见的快捷输入、输入联想、自动识别等方式帮助用户快速输入外，在涉及输入数字的时候，需要关注数字键盘上的输入行为可能会有哪些情况，而这些情况同时也需要和我们的输入项字段要求有关。举个例子：

例 1：微信红包个数字段与总金额字段对应的键盘设计不同，因为个数不会有小数点

根据特定的字段信息属性提供相应的数字键盘，减去多余内容，干扰、造成错误输入

例 2：能够根据输入要求智能判断，当总金额输入 0 后在此输入其他数字，自动去 0；首次输入小数点，则默认为 0.

这就是能够根据用户输入的内容结合输入项的输入要求，智能判断，呈现最终合理结果

例 3：实时判断输入内容，有问题即时报错反馈，微信红包通过顶部常驻提示及表单标红高亮展示错误

输入后 到这一步表示前几部输入行为已完成，但还存在用户需要重新调整输入的可能，这里就需要考虑修改的交互方式，考虑如何帮助用户更顺畅的对已输入字段的重新调整。

例 1：很多输入框当用户重新触发后会有“一键删除”的按钮，这就是为了方便用户快速修改，提高效率，有时候这种短字符的输入项一键删除重新输入比找到问题点删除再输入快许多。

例 2：QQ 红包这边，当点击已输入完成的个数、金额时，就会默认选中已有内容，重新输入直接是覆盖输入，相信这边也是考虑到在这么小的区域用户很难精准将光标插到数字中间吧

例 3：为了帮助用户拖动光标，苹果的原生键盘就支持长按键盘后移动，直接将移动热区从小小的输入框的面积扩大到整个键盘，真的是非常巧妙与贴心的设计

像以上说了这些都是非常细节的点，这些细节的点都是要基于大框架，大流程没问题的前提下我们要去花时间去思考，去改善的点，可能很多人会说这些细节其实对大框架的使用影响很小，事实确实如此，但我要表达的是我们可以将这种关注细节的喜欢，考虑多重场景放到我们平时框架、流程的设计中可以让我们发现更多设计需要思考的延伸点，只有这样不断的考虑场景、用户可能发生的行为、可能面临的问题可以帮助我们画稿过程中养成主动去思考更多，推敲更多的习惯，这样方案会在日积月累的锻炼中画的越来越好。

所以要逐渐养成这样的习惯的方法是多问，盯着页面多看，看看竞品。

这样设计能满足需求吗？ 符合用户使用场景吗？ 用户可能会怎样操作？是否都能满足？ 别人是怎么做的？ 这个步骤我是否有缺了什么页面或规则没想清楚？ 养成这样的习惯，慢慢的就会让自己一点点的考虑地更加深入，做出的方案也会更加完整。

欢迎关注作者微信公众号：「小发的设计笔记」

Hi，我是彩云。留白和网格是任何设计的基础，一旦真正掌握并正确使用，网格将帮你设计出可靠且具有吸引力的设计解决方案。所以，今天将分享我在 UI 设计中掌握的网格设计技巧，文章不长，认真看完，定有收获。

近期 网格设计 的干货：

新手如何做好海报设计？试试网格这个神器！ 大家好我是花生~前几天有小伙伴在社群中讨论海报设计，提到了一个问题：虽然自己知道做海报的时候需要用网格，但是不知道网格的行列数量设置成多少比较好；也有小伙伴说自己用了网格，但是海报做出来还是不好看，不知道是哪里出了问题。

阅读文章 >

什么是网格设计？ 网格是设计好任何界面的基础，可以将其理解为布局的框架。这套框架有助于组织 UI 元素、引导用户并确定设计的各个部分。

常用术语 网格（Grid）由网格单元（Grid unit）组成。布局放在网格上，它包含一定数量的列，列的左侧和右侧都有外边距（Margin），每列之间都有内边距(Padding)，也叫水槽。

技巧 1，正确地选择列数

虽然 12 列 Bootstrap 类似网格是最受欢迎的选择，但它不是强制性的。选择网格时，根据设计真正需要来确定用多少列的网格，做到不多不少。（彩云注：可以根据自己的界面主要尺寸来定义列数，常见的可以按 4 的倍数或者 8 的倍数来设置）

技巧 2，了解限制条件

始终以你正在设计的设备屏幕为基准，了解目标用户的使用习惯， 利用这些限制并学习使用它们进行设计

最常见的屏幕分辨率 (px)

PC: 1440×1024 平板电脑: 768×1024 手机：320×640（这里指的是 1x 图） 技巧 3，间距保持一致

统一垂直和水平间距，使得布局更具吸引力和一致性。

技巧 4，用好网格基线

使用基线网格来排列内容并为文本和布局元素带来视觉一致性。（彩云注：保持文字底部对齐网格）

额外提示——调整字体行高以匹配基线网格。

例如：如果选择 4px 作为基线/网格单位，对齐文本，需要将字体的 line-height 设置为单位的倍数，即行高应该是 4、12、32、64 等

技巧 5，利用好框架和颜色

把框架作为一种工具，将用户的注意力集中在某个布局部分上， 在需要的地方添加额外的视觉重量。（彩云注：比如为凸显某个数据而改个卡片颜色，在做后台界面时比较常见）

技巧 6，打破网格

将某些元素排除在网格之外，使用这个分解技巧来增加价值并使你设计的某些部分能脱颖而出，引导用户。（彩云注：比如出界的设计，或者大小有比较大的对比）

技巧 7，动态网格

确保你设计的布局能适应常见的屏幕尺寸、并适配多终端保持体验一致。（彩云注：改布局不改变网格体系，间距那些依然可以保持不变）

技巧 8，灵活运用 网格系统

没有网格的设计对于小型项目确实是可以的，但对于相对较大的项目，使用网格就非常有必要了，甚至是强制的。

学习使用网格进行设计，但也并非生搬硬套，你需要不时观察布局，为你的需求找到最有创意的解决方案。

一些有价值的设计资源和插件

资源：

google 网格设计规范 https://material.io/develop/web/supporting/layout-grid ; Apple 网格设计规范 https://developer.apple.com/design/human-interface-guidelines Flexbox 网格设计规范 https://www.w3schools.com/css/css3_flexbox_container.asp Bootstrap 网格设计系统规范 https://getbootstrap.com/docs/5.0/layout/grid 插件：

Figma 网格设计可视化插件 https://www.figma.com/community/plugin Grid generator 网格设计插件 https://www.figma.com/community/plugin 欢迎关注作者的微信公众号：「彩云译设计」

大家好，我是和你们聊设计的花生~

最近关于人教版小学数学教材插画的事件受到广泛关注，想必大家也都有所了解。最开始看到报道里的教材插画时，我的第一感觉是震惊，然后是觉得不可思议。因为我对课本插画的印象仍停留在自己上学的时候：明亮的圆月下闰土站在瓜田里屏息举叉、小女孩和妈妈一起站在树下摇桂花雨、将棉衣让给战士的军需处长被冰雪埋没于大山中……实在是难以相信现如今教材 插画 的质量尽然还不如以前。

近期热门话题文章↓

视觉炸裂！揭秘《爱死机》压轴大作《Jibaro》背后的宝藏插画师 Mielgo 如果你也关注影视，最近真的太容易被《爱死机》第三季给刷屏了。

阅读文章 >

教材插画事件发酵后，很多网友都开始回忆自己上学时的课本插画，一时间各种老课本的插图开始刷屏。这些经典的课文插画的创作时间距今既有四五十年了，但依然受到人们的喜爱，且放在现在来看插画的质量和艺术性仍旧非常高，这足见这些“老”插画的优秀。

语文课本上那些令人印象深刻的插图

其实上个世纪七八十年代正是中国插画发展的繁荣时期，在那个没有手机、电视也还没有普及开来的年代，看各种连环画报和小人书就是人们主要的娱乐活动之一 。人民的需求、国家的重视使得当时涌现出一大批优秀的连环画创作者和高质量的优秀作品。今天要为大家推荐的这个网站就收录了很多当时优秀的画刊，一起来看看吧

老画报网 老画报网 （ http://www.laohuabao.com/index.html ）是一个专门收录上个世纪七八十年代各种中国画报、小人书的公益性网站，站内连环画种类繁多，图片高清，还有不少名家作品。

比如中国影响力最大的画报《连环画报》，自 1951 年创刊至今已有 71 年。《连环画报》的第一期以潘崮绘制的油画为封面， 茅盾先生为封面题写“ 连环画报 ”四个字。中间几经改版，历久弥新，滋养了几代中国人的精神世界，也培养扶持了不少优秀的青年画家。

老画报网目前收录《连环画报》1978 年 12 期至 1989 年 6 期一共 88 期的内容。点开每一期的封面，就能看到一个个单独小故事的连环画，有百姓故事、名人典故、名著小说，也有一些幽默笑话和当时的行业资讯。

《虚心就教》连环画报1985年3期 丨编文：卢禾丨绘画：邵瑞刚 丨老画报网藏书扫描

《盗金案》连环画报1986年4期丨编文：陈国英丨 绘画：李乃蔚丨老画报网藏书扫描

《差不多先生传》连环画报 1986年7期丨原著：胡适 丨编文：杜少峰丨老画报网藏书扫描

除了《连环画报》，那个年代流行的《富春江画报》《故事画报》《广西美术》《万花筒连环画报》的期刊内容老画报网站也都有收录。身为设计师或者插画师，空闲时浏览一下不仅是一种娱乐，也能开阔视野提高审美。

不同画报的封面丨老画报网藏书扫描

免费可商用！90000+高质量矢量素材网站SVG Silh 大家好，我是和你们聊设计的花生~ 今天为大家推荐一个免费开源的素材网站 SVG Silh，上面有非常多高质量的剪影及写实线条风的素材，而且提供 SVG 的下载格式，方便我们在设计中进行再次编辑，一起来看看吧~ 「网站直达」 https://svgsilh.com/ ，网站首页看起来比

阅读文章 >

除了期刊类的画报，老画报网站还有各种类型的小人书也非常有意思。我大概翻阅了一下，有不少名著和经典故事的绘本，比如《木兰从军》《阿里巴巴与四十大盗》《西厢记》《聊斋志异》等，也有根据国外故事改编的连环画。

《木兰从军》丨刘旦宅绘制丨老画报网藏书扫描

各种小人书封面丨老画报网藏书扫描

以上就是对老画报网内容的介绍，不知道有没有大家以前看过的连环画呢？

在浏览老画报网站的时候，有一种回到小时候的感觉，那时候经常捧着一本小小画册读得津津有味，现在再读这些几十年前的老画报则更多了一些尊敬和感激。我现在能从事与设计有关的工作，很大一部分原因就是很喜欢小时候看过的一些美丽的插画。无论是课本上插画、讲故事的小人书还是动画片，都让我无比着迷，并因此喜欢上了画画，从而进一步学习了很多与设计有关的东西。所以很感谢那些用心创作的艺术家，他们的优秀作品让我受益良多。

现代美术教育家、画家陈之佛先生在《儿童画本教授指要》谈及图画与儿童的关系时，提出图画教育对儿童成长有重要意义和价值：图画能使美的观察力发达，而美感的发达能促使人格向上，且图画对提升儿童的创造力、想象力和表达能力都有积极影响。

人教版小学语文教材插画由景绍宗老师绘制，非常好看

人教版数学教材事件发生后，广大网民对其的热烈关注和讨论表明大家对图画的影响有深刻认识，迫切希望教材的插画质量能有进一步提升。人民教育出版社很快作出表态将更换教材配图，国家教育部也部署了对全国中小学教材进行全面排查。相信在国家和社会的共同努力努力下，教材的配图问题会妥善的解决。

Hi，我是彩云。留白和网格是任何设计的基础，一旦真正掌握并正确使用，网格将帮你设计出可靠且具有吸引力的设计解决方案。所以，今天将分享我在 UI 设计中掌握的网格设计技巧，文章不长，认真看完，定有收获。

近期 网格设计 的干货：

新手如何做好海报设计？试试网格这个神器！ 大家好我是花生~前几天有小伙伴在社群中讨论海报设计，提到了一个问题：虽然自己知道做海报的时候需要用网格，但是不知道网格的行列数量设置成多少比较好；也有小伙伴说自己用了网格，但是海报做出来还是不好看，不知道是哪里出了问题。

阅读文章 >

什么是网格设计？ 网格是设计好任何界面的基础，可以将其理解为布局的框架。这套框架有助于组织 UI 元素、引导用户并确定设计的各个部分。

常用术语 网格（Grid）由网格单元（Grid unit）组成。布局放在网格上，它包含一定数量的列，列的左侧和右侧都有外边距（Margin），每列之间都有内边距(Padding)，也叫水槽。

技巧 1，正确地选择列数

虽然 12 列 Bootstrap 类似网格是最受欢迎的选择，但它不是强制性的。选择网格时，根据设计真正需要来确定用多少列的网格，做到不多不少。（彩云注：可以根据自己的界面主要尺寸来定义列数，常见的可以按 4 的倍数或者 8 的倍数来设置）

技巧 2，了解限制条件

始终以你正在设计的设备屏幕为基准，了解目标用户的使用习惯， 利用这些限制并学习使用它们进行设计

最常见的屏幕分辨率 (px)

PC: 1440×1024 平板电脑: 768×1024 手机：320×640（这里指的是 1x 图） 技巧 3，间距保持一致

统一垂直和水平间距，使得布局更具吸引力和一致性。

技巧 4，用好网格基线

使用基线网格来排列内容并为文本和布局元素带来视觉一致性。（彩云注：保持文字底部对齐网格）

额外提示——调整字体行高以匹配基线网格。

例如：如果选择 4px 作为基线/网格单位，对齐文本，需要将字体的 line-height 设置为单位的倍数，即行高应该是 4、12、32、64 等

技巧 5，利用好框架和颜色

把框架作为一种工具，将用户的注意力集中在某个布局部分上， 在需要的地方添加额外的视觉重量。（彩云注：比如为凸显某个数据而改个卡片颜色，在做后台界面时比较常见）

技巧 6，打破网格

将某些元素排除在网格之外，使用这个分解技巧来增加价值并使你设计的某些部分能脱颖而出，引导用户。（彩云注：比如出界的设计，或者大小有比较大的对比）

技巧 7，动态网格

确保你设计的布局能适应常见的屏幕尺寸、并适配多终端保持体验一致。（彩云注：改布局不改变网格体系，间距那些依然可以保持不变）

技巧 8，灵活运用 网格系统

没有网格的设计对于小型项目确实是可以的，但对于相对较大的项目，使用网格就非常有必要了，甚至是强制的。

学习使用网格进行设计，但也并非生搬硬套，你需要不时观察布局，为你的需求找到最有创意的解决方案。

一些有价值的设计资源和插件

资源：

google 网格设计规范 https://material.io/develop/web/supporting/layout-grid ; Apple 网格设计规范 https://developer.apple.com/design/human-interface-guidelines Flexbox 网格设计规范 https://www.w3schools.com/css/css3_flexbox_container.asp Bootstrap 网格设计系统规范 https://getbootstrap.com/docs/5.0/layout/grid 插件：

Figma 网格设计可视化插件 https://www.figma.com/community/plugin Grid generator 网格设计插件 https://www.figma.com/community/plugin 欢迎关注作者的微信公众号：「彩云译设计」

大家好，我是和你们聊设计的花生~

最近关于人教版小学数学教材插画的事件受到广泛关注，想必大家也都有所了解。最开始看到报道里的教材插画时，我的第一感觉是震惊，然后是觉得不可思议。因为我对课本插画的印象仍停留在自己上学的时候：明亮的圆月下闰土站在瓜田里屏息举叉、小女孩和妈妈一起站在树下摇桂花雨、将棉衣让给战士的军需处长被冰雪埋没于大山中……实在是难以相信现如今教材 插画 的质量尽然还不如以前。

近期热门话题文章↓

视觉炸裂！揭秘《爱死机》压轴大作《Jibaro》背后的宝藏插画师 Mielgo 如果你也关注影视，最近真的太容易被《爱死机》第三季给刷屏了。

阅读文章 >

教材插画事件发酵后，很多网友都开始回忆自己上学时的课本插画，一时间各种老课本的插图开始刷屏。这些经典的课文插画的创作时间距今既有四五十年了，但依然受到人们的喜爱，且放在现在来看插画的质量和艺术性仍旧非常高，这足见这些“老”插画的优秀。

语文课本上那些令人印象深刻的插图

其实上个世纪七八十年代正是中国插画发展的繁荣时期，在那个没有手机、电视也还没有普及开来的年代，看各种连环画报和小人书就是人们主要的娱乐活动之一 。人民的需求、国家的重视使得当时涌现出一大批优秀的连环画创作者和高质量的优秀作品。今天要为大家推荐的这个网站就收录了很多当时优秀的画刊，一起来看看吧

老画报网 老画报网 （ http://www.laohuabao.com/index.html ）是一个专门收录上个世纪七八十年代各种中国画报、小人书的公益性网站，站内连环画种类繁多，图片高清，还有不少名家作品。

比如中国影响力最大的画报《连环画报》，自 1951 年创刊至今已有 71 年。《连环画报》的第一期以潘崮绘制的油画为封面， 茅盾先生为封面题写“ 连环画报 ”四个字。中间几经改版，历久弥新，滋养了几代中国人的精神世界，也培养扶持了不少优秀的青年画家。

老画报网目前收录《连环画报》1978 年 12 期至 1989 年 6 期一共 88 期的内容。点开每一期的封面，就能看到一个个单独小故事的连环画，有百姓故事、名人典故、名著小说，也有一些幽默笑话和当时的行业资讯。

《虚心就教》连环画报1985年3期 丨编文：卢禾丨绘画：邵瑞刚 丨老画报网藏书扫描

《盗金案》连环画报1986年4期丨编文：陈国英丨 绘画：李乃蔚丨老画报网藏书扫描

《差不多先生传》连环画报 1986年7期丨原著：胡适 丨编文：杜少峰丨老画报网藏书扫描

除了《连环画报》，那个年代流行的《富春江画报》《故事画报》《广西美术》《万花筒连环画报》的期刊内容老画报网站也都有收录。身为设计师或者插画师，空闲时浏览一下不仅是一种娱乐，也能开阔视野提高审美。

不同画报的封面丨老画报网藏书扫描

免费可商用！90000+高质量矢量素材网站SVG Silh 大家好，我是和你们聊设计的花生~ 今天为大家推荐一个免费开源的素材网站 SVG Silh，上面有非常多高质量的剪影及写实线条风的素材，而且提供 SVG 的下载格式，方便我们在设计中进行再次编辑，一起来看看吧~ 「网站直达」 https://svgsilh.com/ ，网站首页看起来比

阅读文章 >

除了期刊类的画报，老画报网站还有各种类型的小人书也非常有意思。我大概翻阅了一下，有不少名著和经典故事的绘本，比如《木兰从军》《阿里巴巴与四十大盗》《西厢记》《聊斋志异》等，也有根据国外故事改编的连环画。

《木兰从军》丨刘旦宅绘制丨老画报网藏书扫描

各种小人书封面丨老画报网藏书扫描

以上就是对老画报网内容的介绍，不知道有没有大家以前看过的连环画呢？

在浏览老画报网站的时候，有一种回到小时候的感觉，那时候经常捧着一本小小画册读得津津有味，现在再读这些几十年前的老画报则更多了一些尊敬和感激。我现在能从事与设计有关的工作，很大一部分原因就是很喜欢小时候看过的一些美丽的插画。无论是课本上插画、讲故事的小人书还是动画片，都让我无比着迷，并因此喜欢上了画画，从而进一步学习了很多与设计有关的东西。所以很感谢那些用心创作的艺术家，他们的优秀作品让我受益良多。

现代美术教育家、画家陈之佛先生在《儿童画本教授指要》谈及图画与儿童的关系时，提出图画教育对儿童成长有重要意义和价值：图画能使美的观察力发达，而美感的发达能促使人格向上，且图画对提升儿童的创造力、想象力和表达能力都有积极影响。

人教版小学语文教材插画由景绍宗老师绘制，非常好看

人教版数学教材事件发生后，广大网民对其的热烈关注和讨论表明大家对图画的影响有深刻认识，迫切希望教材的插画质量能有进一步提升。人民教育出版社很快作出表态将更换教材配图，国家教育部也部署了对全国中小学教材进行全面排查。相信在国家和社会的共同努力努力下，教材的配图问题会妥善的解决。

大家好~这里是跟大家一起进步的南清音~

在现代的海报设计中，无衬线体的出现十分频繁，因为它直接、简洁、直观，不易产生视觉疲劳，并且可以运用到很多设计中，因而受到了 设计师 的偏爱。今天就为大家梳理一下优优教程网上的一些高质量的无衬线英文字，让大家能做出更多好看的作品，一起来看一下吧~

顶级字体公司蒙纳出品！2022年10大字体设计趋势 蒙纳公司最近刚刚发布了 2022 字体设计趋势报告，这份报告对于视觉、LOGO、平面、字体/字库设计师有着相当的参考价值。

阅读文章 >

Titillium Web 「字体详情及下载链接」 https://uiiiuiii.com/software/401645.html

Titillium Web 的出现主要是为 html、Css 和 java 脚本语言编程使用而设计的。后面也被广泛应用于海报，印刷等方面。Titillium Web 的字体垂直方正，笔划直角的设计也让它的存在变得更有辨识度，而且更加适用于电子设备显示。Tiltillium Web 一共有 6 种字重，11 种字体样式，使它能够更广泛地运用到各种不同的用途之中。

Manrope 「字体详情及下载链接」 https://uiiiuiii.com/software/392006.html

Manrope 是一种现代的无衬线字体，总共拥有 7 种字体样式，方便大家能在更多的场景中使用。通用性是这个字体的主要目标之一，无论是标题还是内文，Manrope 都能体现出良好的适配性。

Antonio 「字体详情及下载链接」 https://uiiiuiii.com/software/388320.html

Antonio 是一款超好用的个性 英文字体 ，专为需要使用大字号的标题、横幅设计。Antonio 共有 7 种字体样式，整体字体瘦长，无衬线的设计让它看起来更加简洁。用在标题上会使标题很醒目哦~

近期免费英文字体推荐：

还缺免费英文字体？7款付费级的优雅风格字体打包！ 本期给大家推荐 7 款优雅时尚的西文字体，全部都是免费商用！

阅读文章 >

Robot 「字体详情及下载链接」 https://uiiiuiii.com/software/373643.html

Roboto 是由谷歌开发，2011 年由 Christian Robertson 设计，用作 Android 4.0 移动操作系统的字体。这个字体家族包含 7 种字重、12 个字体样式，其中 Thin、Light、Medium、Bold、Black 版都有其相对应的斜体。字体整体规整，粗细对比度很低，字形垂直，同时字体的半圆曲线又为其注入了几分欢快之风。

Nice 「字体详情及下载链接」 https://uiiiuiii.com/software/429536.html

Nice 是平面设计大师设大叔 19 年参加比赛方正字体大赛时设计出来的一款无衬线西文字体。这款字体字形饱满、结构规则方正，观感大气且独特，是拿来做标题再好不过的选择。除此之外，设计师在字体的转角和笔划边缘加入圆角的设计，减掉字体的锋利感，给整款字体增添了几分亲和力。

设计时用得到的特殊字体推荐：

用一篇文章，帮你全面认识哥特风英文字体（附下载包） 对于设计师而言，熟知各种字体的特征和使用方法可以说是基本功，除了了解各种经典的中文字体之外，对经典英文字体的理解和使用也是非常重要的。

阅读文章 >

Trap* 「字体详情及下载链接」 https://uiiiuiii.com/software/474888.html

Trap* 是由 Aayush Mayank 创建的一款拥有 7 个字重的现代无衬线字体。这款字体做的陷印设计在小尺寸印刷上面显得十分别致。Trap* 字体字形比较规则，结构清晰，整体看来和普通标准字体的外形相差不大，但是如果将字体放大后就会见到细节处其实是有经过精心设计的。它在笔划的连接处都做了向内延伸的缺口，就很自然的给这款字体增加了一种设计感。

以上就是今天给大家带来的免费字体推荐了，想拥有更多好看又免费的字体，请大家去优优教程网点击「 免费字体 」板块进行挑选和下载吧~

查看更多字体戳链接→ https://uiiiuiii.com/tool/typeface

5个经典的付费英文字体，我们都帮你找到了免费可商用替代款！ 大家好我是花生~现在一提到字体资源，大家最关注的点肯定是能不能免费商用吧？

阅读文章 >

五月第四波设计干货合集来了！这次的干货合集整合了一波颇为有意思的视觉设计工具，而且绝大多数的工具只需要有浏览器就可以搞定，比如专门包装 APP 截图的 在线工具 ，比如生成复古的 ASCII 字符插画的工具，比如可以给网页取色的工具 Chroma，甚至还有在浏览器中一站搞定产品和促销图物料的工具，可以说非常值得收藏了！另外，这一期干货合集当中还有几个颇为不错的 Figma 应用，也相当给力。对了，上一期干货合集也记得看看：

第三波！2022年5月精选实用设计干货合集 五月第三波设计干货合集来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费网页模板下载网站 https://webdesign.gdn/

看名字就知道这个网站是高度聚焦于网页设计的，网站会每天更新最新的免费可下载的网页模板，这些网页模板当中，多数都是着陆页相关的，视觉风格多变，其中不少都用到了当下比较流行的扁平插画，用色也大都比较简约大气，在多数时候，稍加调整就能够拿来使用，网站的实用性可以说相当强了。

2、专业的 APP 展示设计工具 https://screenshots.pro/

新 APP 上线软件商店的时候，通常需要有一套视觉惊艳的截图用来攥取用户的注意力。这个名为 Screen Shot Pro 的工具是专门设计这类视觉素材的，它内置了专门针对 iOS 和 Android 的样机模板，你只需要准备好截图，就可以借助它完成后续的设计。当然，这类设计图的应用场景也不止限于软件商店，还能用于社交媒体等不同场合。这个工具目前是收费的，但是提供免费试用。

3、免费的艺术壁纸生成工具 https://apps.apple.com/cn/app/effekt-wallpaper-art-creator

这是一个横跨 iOS、iPadOS 和 macOS 的超强壁纸生成工具，它会使用你的电脑、手机和平板的 GPU 来生成色彩惊艳效果独特的艺术风格壁纸，这种机制将会充分利用 GPU 强大的性能来调用苹果的 Metal 框架，渲染出足够细腻的壁纸。这个工具除了本身生成的效果足够漂亮，还允许用户根据自己的喜好来调整配色和细节，其生成的壁纸尺寸最高可以达到 8000 x 8000 px。

4、免费 ASCII 字符插画编辑器 https://github.com/Kirilllive/ASCII_Art_Paint

ASCII 插画早在图形化界面还没有出现的时代，就已经诞生了！使用 ASCII 字符拼接出插画如今依然在很多命令行工具当中流行，在这个追求高保真图像的时代，这种独特的视觉艺术依然极具生命力，由于它独特地呈现形式，使得它在某种意义上有着更强的宅、极客和二次元的属性，如果你对于这个感兴趣，可以试试这个离线的 Web 应用。你可以在 Github 上下载，并且使用浏览器打开使用。

5、Figma 可用的 Smartcat 翻译器 https://www.smartcat.com/figma

这可能是 Figma 本身一直缺失的一个重要功能，那就是多语言翻译！借助 SmartCat 的这个插件，你无需离开 Figma 就能将草图中的文案内容直接翻译成不同的语言，这也意味着你所获取的很多其他语言的 Figma 素材，也能快速翻译成为中文！

6、使用 Figma 设计无代码应用 https://try.thunkable.com/product-hunt-thunkable-figma-integration/

Thunkable 是一个越来越多人选择的无代码开发平台，如今他们开发了专门的 Figma 插件，如果你是 设计师 ，可以在完成设计之后，快速地将设计稿导入到 Thunkable 中，然后在可视化的界面下，通过拖拽快速完成应用的开发，无需代码知识。

7、网页取色工具 Chroma https://chroma.dev/

这个名为 Chroma 的取色工具是专门为 Chrome 浏览器所设计的插件，当你看到配色惊艳的网页的时候，可以使用这个插件快速取色并保存下来，这个插件兼容基于 Chromium 开发的浏览器，包括 Edge 和 Brave 。这个插件可以作为其他取色工具的补充。

8、小工具合集 Super Designer https://superdesigner.co/

有时候用对小工具，做设计真的能事半功倍，这个名叫 SuperDesigner 的小工具集成了9个日常设计经常会用到的小功能，包括漂亮的背景图片生成器、图案生成器、波点效果生成器、CSS 背景生成器、渐变背景生成器、配色方案生成器和明暗色阶生成器，直接在它的基础上输出设计，超级省心。

9、产品图生成工具PhotoRoom https://app.photoroom.com/create

现在做做专业的产品图也已经不需要打开修图软件了，PhotoRoom 这个工具干脆就把修产品图常见的功能全部一次性给你集成到网页里面了，在机器学习的加持之下，你可以直接上传图片，抠掉背景，然后 PhotoRoom 提供各种不同风格的产品图样式，比如杂志风、极简风，还有各种各样的促销元素和样式搭配，不用开 PS，一次搞定产品图。

更多往期干货：

第一波！2022年5月精选实用设计干货合集 五一假期结束了，给大家贡献一波设计干货吧！

阅读文章 >

第二波！2022年5月精选实用设计干货合集 五月的第二波设计干货合集紧跟着就来了！

阅读文章 >

五月第四波设计干货合集来了！这次的干货合集整合了一波颇为有意思的视觉设计工具，而且绝大多数的工具只需要有浏览器就可以搞定，比如专门包装 APP 截图的 在线工具 ，比如生成复古的 ASCII 字符插画的工具，比如可以给网页取色的工具 Chroma，甚至还有在浏览器中一站搞定产品和促销图物料的工具，可以说非常值得收藏了！另外，这一期干货合集当中还有几个颇为不错的 Figma 应用，也相当给力。对了，上一期干货合集也记得看看：

第三波！2022年5月精选实用设计干货合集 五月第三波设计干货合集来了！

阅读文章 >

下面我们具体看看这一期的干货：

1、免费网页模板下载网站 https://webdesign.gdn/

看名字就知道这个网站是高度聚焦于网页设计的，网站会每天更新最新的免费可下载的网页模板，这些网页模板当中，多数都是着陆页相关的，视觉风格多变，其中不少都用到了当下比较流行的扁平插画，用色也大都比较简约大气，在多数时候，稍加调整就能够拿来使用，网站的实用性可以说相当强了。

2、专业的 APP 展示设计工具 https://screenshots.pro/

新 APP 上线软件商店的时候，通常需要有一套视觉惊艳的截图用来攥取用户的注意力。这个名为 Screen Shot Pro 的工具是专门设计这类视觉素材的，它内置了专门针对 iOS 和 Android 的样机模板，你只需要准备好截图，就可以借助它完成后续的设计。当然，这类设计图的应用场景也不止限于软件商店，还能用于社交媒体等不同场合。这个工具目前是收费的，但是提供免费试用。

3、免费的艺术壁纸生成工具 https://apps.apple.com/cn/app/effekt-wallpaper-art-creator

这是一个横跨 iOS、iPadOS 和 macOS 的超强壁纸生成工具，它会使用你的电脑、手机和平板的 GPU 来生成色彩惊艳效果独特的艺术风格壁纸，这种机制将会充分利用 GPU 强大的性能来调用苹果的 Metal 框架，渲染出足够细腻的壁纸。这个工具除了本身生成的效果足够漂亮，还允许用户根据自己的喜好来调整配色和细节，其生成的壁纸尺寸最高可以达到 8000 x 8000 px。

4、免费 ASCII 字符插画编辑器 https://github.com/Kirilllive/ASCII_Art_Paint

ASCII 插画早在图形化界面还没有出现的时代，就已经诞生了！使用 ASCII 字符拼接出插画如今依然在很多命令行工具当中流行，在这个追求高保真图像的时代，这种独特的视觉艺术依然极具生命力，由于它独特地呈现形式，使得它在某种意义上有着更强的宅、极客和二次元的属性，如果你对于这个感兴趣，可以试试这个离线的 Web 应用。你可以在 Github 上下载，并且使用浏览器打开使用。

5、Figma 可用的 Smartcat 翻译器 https://www.smartcat.com/figma

这可能是 Figma 本身一直缺失的一个重要功能，那就是多语言翻译！借助 SmartCat 的这个插件，你无需离开 Figma 就能将草图中的文案内容直接翻译成不同的语言，这也意味着你所获取的很多其他语言的 Figma 素材，也能快速翻译成为中文！

6、使用 Figma 设计无代码应用 https://try.thunkable.com/product-hunt-thunkable-figma-integration/

Thunkable 是一个越来越多人选择的无代码开发平台，如今他们开发了专门的 Figma 插件，如果你是 设计师 ，可以在完成设计之后，快速地将设计稿导入到 Thunkable 中，然后在可视化的界面下，通过拖拽快速完成应用的开发，无需代码知识。

7、网页取色工具 Chroma https://chroma.dev/

这个名为 Chroma 的取色工具是专门为 Chrome 浏览器所设计的插件，当你看到配色惊艳的网页的时候，可以使用这个插件快速取色并保存下来，这个插件兼容基于 Chromium 开发的浏览器，包括 Edge 和 Brave 。这个插件可以作为其他取色工具的补充。

8、小工具合集 Super Designer https://superdesigner.co/

有时候用对小工具，做设计真的能事半功倍，这个名叫 SuperDesigner 的小工具集成了9个日常设计经常会用到的小功能，包括漂亮的背景图片生成器、图案生成器、波点效果生成器、CSS 背景生成器、渐变背景生成器、配色方案生成器和明暗色阶生成器，直接在它的基础上输出设计，超级省心。

9、产品图生成工具PhotoRoom https://app.photoroom.com/create

现在做做专业的产品图也已经不需要打开修图软件了，PhotoRoom 这个工具干脆就把修产品图常见的功能全部一次性给你集成到网页里面了，在机器学习的加持之下，你可以直接上传图片，抠掉背景，然后 PhotoRoom 提供各种不同风格的产品图样式，比如杂志风、极简风，还有各种各样的促销元素和样式搭配，不用开 PS，一次搞定产品图。

更多往期干货：

第一波！2022年5月精选实用设计干货合集 五一假期结束了，给大家贡献一波设计干货吧！

阅读文章 >

第二波！2022年5月精选实用设计干货合集 五月的第二波设计干货合集紧跟着就来了！

阅读文章 >