· 叶子
· 莲蓬
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-3d877ca29e.gif)
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-5550561596.gif)
· 花朵
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-d731e300d5.gif)
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-4fb58e7c7a.gif)
![[优化输出图像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-6-c995e82cd4.gif)
原文地址：胡晓波工作室（公众号）
作者：蓝贵莲
转载请注明：学UI网》彩铅肌理扁平插画教程（附笔刷）
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
页面加载进程会受多方面的影响，例如页面里图片、图标的数量，页面中是否有三维场景或模型，是列表式设计还是卡片式设计…
逐一加载
对于可以同时进行多个加载任务的产品，更适合应用逐一加载的形式，这样做能减少用户对于等待的感知程度。任务列表逐一加载的过程会给用户带来一种秩序感。
完全加载
进入一个网站或App，很多页面都会一下就显示出来所有内容，这种页面完全加载的形式对用户来说更熟悉。
同样，页面完全加载的形式会让用户的操作和浏览过程更流畅。
延迟加载
延迟加载是用户主动触发的操作，根据操作系统反馈对应的结果。延迟加载包括三种形式：
加载模式需要依托场景去考虑。比如一个1秒就能加载的页面和一个需要5秒才能加载出来的页面，我们就需要考虑使用不同的加载模式设计，这样才能做到差异化设计。
这里我做了一个表格，将页面加载需要的时间以及对应的加载模式进行了整合。
0.1秒以内
如果加载时长低于0.1秒，用户不需要等待加载过程，内容就能即时呈现出来，有一种“还没开始就已经结束”的感觉。
0.1秒以内的加载不需要在页面中添加任何加载状态，但要一个场景需要格外注意，如果用户刚完成一系列复杂的操作，点击提交之后，考虑为用户提供撤消机制。
▲用谷歌邮箱发送邮件时，发送成功之后会弹出一个撤销提示，允许用户在5s内撤销刚才发送成功的邮件。
0.1-1秒间
大多数产品的页面加载速度都在这个区间，用户几乎不会注意到这种加载延迟。所以我们不需要增加额外的加载动效来填充这段加载时间，不然可能会起到画蛇添足的反面效果。
试想一下，如果在每个页面加载的过程中都加上加载动效，不仅会分散用户的注意力，并且屏幕上总出现不断跳动的内容，会让人感到很焦躁。
1-2秒间
如果加载时间超过1秒，用户就会感知到这个加载过程，这个时候我们就可以考虑适当添加加载动画，缓解用户等待的焦急感。
▲在下载内容的过程中，使用这种轻量级的环形动画来显示加载进度，简洁清晰，而且还能作为组件来复用，能够极大提升工作效率。
在骨架屏基础上，可以“选装”一些好看的效果，增加页面加载时的视觉体验观感：
2-10秒
这个加载时间对于用户来说已经很长了，对于设计师来说，需要对这段加载时间进行合理有效地设计，来提升用户体验。
如果在加载的过程中，想给用户一个期望的时间值，告诉用户整个加载过程需要多长时间，我们可以用“这可能需要几秒钟”这种提示方法，既能展示加载需要的时间，又能给用户一个时间预期。
10秒以上
把加载细分成这五种模式，可以覆盖很多使用场景，这样的对症下药既能保证用户体验，还能让产品丰富化，起到锦上添花的作用。
在对的时间和对的场景下做对的事，这句话用在什么地方都不为过，设计也是一样。
最后考虑到大家经常使用卡片式UI排版，为大家整理了90+个iOS卡片模板，源文件已经打包好，大家可后台领取。
领取方式：关注公众号，后台回复【小组件】获取源文件。
慢慢来比较快，希望对你有帮助！
原文地址：Clip设计夹（公众号）
作者：Clippp
转载请注明：学UI网》3种状态+5种模式，从UX角度分析加载设计
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
以这款Helvetica字体为例，我们可以把字体名称分为5个部分。
我们先看第一部分，第一部分包括了两个词，前半部分是字体名字，而“Neue”可以理解为升级版。
“HelveticaNeue”是Linotype公司在1983年更新的新版字体。在原有的基础上，对许多字符进行了精细的修改，还增加了更多不同的粗细与宽度的选择。
2019年4月，Monotype公司正式发布了全新的字体“Helvetica Now”，共有三种形体，分别为：Micro、Display和Text。
Micro版本将专门为移动设备等小屏幕而设计，可以解决目前Helvetica字体在小屏幕中难以辨认等非常多的问题。
Display版主要针对较大的标题，如广告和横幅的字体使用。
Text版本则针对标准尺寸的书面文字所使用。
Helvetica Now更趋近完美，如需使用此Helvetica，可以优先考虑这个版本。（文末有下载）
第二部分代表的是字体公司名称，如此款字体“LT”则是“Linotype”莱诺字体公司的缩写。
当然，不同公司出版字体，显示的公司简称也不一样。如著名的衬线体“Bodoni”则是由“MT-蒙纳字体”公司出版。
比较常见的还有“MS-微软字体”、“ITC-国际字体”等。
第三部分，“Std”是英文单词“Standard”的缩写，代表着这个字体只支持基础的字符集。与其相对应的“Pro”是英文单词“Professional”，代表具有更多的字符集。
第四部分为字重（线幅），是指字母笔画的粗细级别，以：“Helvetica Now Display”为例，共有以下10种字重：
汉字因笔比较复杂，粗细变化比较少，远不及英文字体丰富，以思源字体为例，共有以下7种字重：
第五部分为字体的格式，目前主流的格式为OTF和TTF。
那该选哪个格式呢?这主要取决于用户的场景。
如果你需要使用MS Office进行大量工作，建议使用.ttf字体，因为它是由Apple和Microsoft所开发，与Microsoft软件兼容性更佳，例如:只能将.ttf字体嵌入到Word和PPt中，而不能嵌入.otf字体。
如果你是一名设计师，需要使用Adobe软件进行大量的印刷设计工作，建议使用.otf字体。因为它是由Adobe和Microsoft所开发。OTF格式还提供了更多风格的替代方案和字距调整选项，对于设计师更实用。
通过本期讲解，相信大家对于字体名字中的英文含义有了一定程度的了解，下一期我们继续讲解更多冷知识，下期见！
“Helvetica Now”全套字体 ，可以在公众号对话框回复【HE】获取。（如需商用请购买正版字体）
原文地址：艺海拾贝Design（公众号）
作者：邓海贝
转载请注明：学UI网》不懂就问！为什么英文字体名字这么长？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
转载请注明：学UI网》这是一份汇集全球优秀APP截图的资源
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
百度健康发挥搜索入口直达服务的优势，通过搜索快速连接人与信息、人与服务，形成了健康科普、在线咨询服务、商城购药服务、慢病管理服务以及互联网医院服务五大服务体系。同时，基于百度强大的AI和技术实力，在海量搜索数据中直接地获取用户真实意图，智慧化连接服务。通过大数据对患者和医生进行有价值的匹配引导，提供从健康科普到在线医疗的一站式服务中心，全面覆盖用户个人及家庭健康需求，形成完整服务链条。在设计理念上，我们致力于用智慧化方式给病患提供更加可及性和便捷性的互动体验，并围绕多端场景提供多元化体验服务设计。
1.医学可视化图形，提升用户阅读体验
用户在阅读医疗相关知识内容时，内容的表现形式较单一，文字的描述晦涩难懂，用户很难真正的理解内容。医学可视化图形，能够明确有效的补充用户对词条的理解，形成对内容的权威认知。
我们结合科学+美学双线标准，从医学、解刨、浏览舒适度等多维度视角绘制插图，通过更直观、舒适、生动形象的方式传达内容，解决了日常大众对疾病知识感到晦涩难懂的痛点。这也成为了医疗搜索体验中一个独具匠心的创新，是百度健康打造产品医疗权威感知的重要基础。截止目前已经应用一千多幅插图，覆盖32科室共计3000个疾病词条。
2.Ai交互+互动模板，高效在线问诊
AI智能交互互动模板，实现智能诊疗对话模型，智能分析预诊导诊，通过AI学习构建适合临床辅助诊断的体验流程，深度将筛查、自测、诊断等多环节嵌入到诊疗流程中，自然、及时、流畅的应答患者提问，极大的提升了诊疗效率。
疫情期间，百度健康和政府合作打造智能诊疗系统解决方案，帮助人们快速获得智能化诊断、在线诊疗和心理疏导等帮助，帮助无症状用户进行预防，高危患者及时获得诊疗建议。
单新冠肺炎AI自测在疫情初期高发时段累计服务用户超千万人。其余自测分型也已覆盖四百多种。
3、线下场景线上映射，模拟真实场景
1）「线上处方药单」的设计样式，模拟现实中去医院开药的「线下打印处方单」样式，将无情感的界面转化成用户熟悉的可感知形态，缓解在线的疏离感，充分体现情感化设计，使沟通更具沉浸感。最大程度的降低用户的理解成本，加深用户对产品的信赖感，使用户有更真实的服务体验。
疫情期间，线上购药的需求猛增。线上开处方项目，实现了用户可以足不出户，从问诊到开处方再到药品到家一站式的服务体验。
2）互联网医院一站式线上线下诊疗闭环
针对公立医院百度健康搭建了全套互联网医院服务场景解决方案，提供一站式线上线下诊疗闭环，诊前、诊中、诊后建立整套服务体系，无缝衔接线上线下场景，立体式给用户提供服务。通过对医院线下就医的全流程的观察，将线下体验流程还原至线上，从挂号、缴费、查询到复诊、复查再到诊后慢病管理，打通‘医-方-药’闭环，全面提交就诊效率，形成患者、医院、医生完整的三端服务闭环。同时，成为国家分级诊疗工作的有利补充。
百度健康做为全网领先的医疗科普服务平台。为用户打造无障碍智能化健康管理服务中心，做到灵活、共享、及时、关怀。未来还将不断优化深耕，推动健康产业建设智慧化进程，为全面构筑以人为本的健康生态而努力，为早日实现“健康中国”的国家战略助力，成为中国百姓首选的“健康管家”。
原文地址：百度MEUX（公众号）
作者：做你健康管家的
转载请注明：学UI网》百度健康服务化体验
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
Mac OS 系统快捷键
Windows 快捷键
Mac OS 系统快捷键
Windows 快捷键
其实就算不用快捷键，也可以通过鼠标调准顺序。
但是毕竟中心哪个圆圈面积太小不好找，数量不多的话，用快捷键会更快一些。
Mac OS 系统快捷键
Windows 快捷键
通过自动布局设置，可以让元素的尺寸根据间距大小自动调整宽度。
利用这一点，可以用来做很多东西，例如滑动条。
把间距数值改成 auto， 会自动均分 Frame 内元素的间距。
虽然右上角的布局图标也能起到同样的作用，但是那样操作的步骤更多：需要先调整好两边的元素的位置，不能根据所在 Frame 自动调整。
Figma 不允许输入 0 高度，如果你尝试这么做，按下回车后数值会变成 1。
但是有个小漏洞，那就是如果你输入 0.001，按下回车后就会发现数值变成 0 了。
一定要小数点后三位，如果只输入小数点后一位或两位，就不会有这个效果。
如果分组或 Frame 层级过多，想要选择下层的元素，通常是双击。
但是层次多了，也还是很麻烦。
还可以按下 Command 的同时用鼠标点击，这样可以直接选择最里层的元素。
可是，如果想要选择的不是最里层，而是倒数第 N 层呢？
这种情况，用快捷键会更方便一些：
往自动布局里放东西，很容易打乱布局，一下子就变化很大。
如果想要避免这种“手误”，可以在拖动元素的同时按下空格键，这样元素就不会被放到任何自动布局里。
上面卡片的自动布局，其实可以用 Space Between 一键设置出来。
其实中间的图标和卡片同宽，只是背景透明所以看起来是居中对齐的。
标题其实不止左上角那一个，卡片左下方还有一个一模一样的，只是可见度设置为 0%，所以看不出来。
很多组件（如上图文本框）有个最小宽度，如果简单地使用自动布局是无法满足的。
方法也不难，就是文本框的 Frame 里加一条不可见的线段，而这个线段的宽度就确定了文本框的最小宽度。
没想到 Figma 的自动布局有这么多门道，使用起来多做些组件，肯定能大大提高设计效率～
原文地址：体验进阶（公众号）
作者：设计师ZoeYZ
转载请注明：学UI网 »Figma的自动布局也太好用了吧！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大家看到这张图的第一感受是什么？是不是觉得大气，高级、简约，而且不会觉得不精致。
再来看这张图，是不是同样的感受，给人高级感。那么有没有想过是什么影响了这些高级感？是不是我们肉眼能看到的颜色、留白、阴影、大小、图片、排版、质感等细节。就是这些元素的和谐处理，才使得整体看上去同一个世界，让我们感官愉悦。
因此我们做设计时候，也需要和谐的处理这些元素关系。把这些关系处理好了，设计细节自然丰富，精致度自然也就上来了。
下面我们看看间距节奏、投影质感、高级图片等在设计中如何处理。
我们常说的间距节奏，其实就是留白或者负空间的应用。那么在UI版式中，这些负空间就是间距网格的应用，间距节奏的把控，下面看这张图。
上图，就是一张基础的版式间距节奏。好的版式节奏，就像音乐一样，它通过变化的节奏来表达动听的音乐。
对于间距节奏，我们在设计中尽量体现倍数关系，这样的节奏是最明显的，而且设版式节奏感也会更强，比如看下面这个案例。
在UI的设计语言中，投影是其中一个基础层风格样式，它处理好坏也会直接影响到界面品质感。
Dribbble@Gleb Kuznetsov✈
上图是Gleb Kuznetsov的作品，虽然界面设计中没有过多复杂的设计，但是整个界面品质感和细节处理还是挺值得学习的。
我们可以注意以下几个细节，红圈的地方。底部语音是轻拟态质感，其他部分的卡片设计和按钮均用了细腻的投影，而且按钮的投影还有带有色相。
所以对于投影的处理，我们可以看出可以存在两种思路，按钮的使用带有色相的，卡片类的统一灰色投影。
对于这种投影的处理思路，大家可以看上图，以按钮为例，首先将按钮基本形态做好。其次复制一个上层按钮，然后将其长度左右缩小一些，降低透明度50%，第三步就直接将这个按钮模糊处理，模糊值大小可以调节到合适的范围即可。
其实我们看一些优秀的Web端设计，投影出现的概率也是比较大的。通过投影可以增加细节，丰富质感，而且还可以有多种颜色渐变模糊。
图片在整个设计中可以说是重中之重，因为图片占比也是非常大。特别是以图片为主的产品，一定要注意图片的品质感。
29cm的官网，整体版式质感看着就会很高级。大家可以去看看苹果官网，图片又高级，又大，产品质感精致，对于用户来说，只要进入官网就会有想购买的冲动。
29cm官网
选择图片需注意的陷阱，比如上图，右侧的图其实作为生活中的照片是很温馨的，也适合发朋友圈。但是如果在设计中，就会显得元素多，而且不够聚焦，左侧的就会更聚焦有力量，有质感。
好了，今天的内容就先讲到这里，我们下期见。
转载请注明：学UI网》3个好用到尖叫的设计细节，再不知道就晚了！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
原文地址：胡晓波工作室（公众号）
作者：小章鱼
转载请注明：学UI网》五个案例教会你怎么做卡通 LOGO （二）
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝 http://www.lanlanwork.com
