082022-2

如果你很迷茫，就做好这几件事

作为 UI 设计师来说，当你比较迷茫的时候，就去体验产品。我们在项目设计中之所以灵感枯萎，还是看得太少；设计质量不尽人意，还是眼界不够高。多去体验产品，记录优秀的设计表现和交互设计思路，这些优秀的总结将会成为设计过程中的灵感参考。

体验产品无需只是同行业中的产品，各行各业的都可以。从漫无目的的碎片化积累开始，只要是个人觉得不错的设计都进行记录。然后针对性的体验某一类功能进行总结，记录同样的功能不同产品是如何进行设计解决的。

体验产品是一个习惯的培养，不在于每天要记录很多，而是充分利用闲余时间去体验，培养成自发的习惯。

二、坚持采集灵感素材

当你比较迷茫或者焦虑的时候，就去看看设计网站，采集优秀的作品。设计时进行灵感借鉴属于正常，闷着头做设计反而容易思维固化。而灵感的来源并不是需要的时候去找，你会发现越是着急寻找越是难以如愿，要养成日常采集灵感素材的习惯，在需要的时候才能信手拈来。

要不定期的访问国内外优秀的设计平台，采集优秀的设计作品，通过采集、分析、总结来提高眼界。将优秀设计分析出轨迹，这将成为我们灵感思维来源的有效途径。

要创建属于自己的灵感资源库，分类越细越好，采集进去的作品要属于日常亲自挑选。不要一次性转存别人的过多分享，这样是形成不了记忆的，需要用到的时候是想不起来它的存在的。要养成日常采集，不在于量而在于坚持。

三、坚持学习和深入专研

我们之所以迷茫就是不知道自己该干嘛，也不知道想要获得什么，没有自己的目标和方向。当我们迷茫时，可以选择去看书学习或者进阶学习，系统性的梳理和提升自己的专业能力。俗话说“当局者迷，旁观者清”，有时候自己看不出自己的问题就要通过系统性的学习去查漏补缺。

找一个自己不擅长或者不会的技能，去学习和深入专研，不带任何目的性，只是为了丰富自己的闲余时间。当我们在学习的时候就不会去想太多的事情，只要按部就班的完成学习目标即可，可以让我们不再去焦虑那些没有意义的事情，走出“迷雾森林”。

四、坚持强化动手能力

当我们比较迷茫，不知道该做什么的时候，就去撸图吧！总是需要找点事情做起来才不会不知所措。如果不知道自己应该做什么作品，就去临摹，从临摹到改装、借鉴到半原创、最终输出自己的原创作品。临摹可以快速提高我们的动手能力，熟能生巧很重要，这样才能提升精细化设计的一面。

也可以选择以前做过的项目进行优化，这也是积累作品的有效途径。如果没有做过项目，就选择自己用过且熟悉的产品进行改版，也能积累出作品量。日常输出至关重要，不仅可以积累作品，也能提高我们的设计执行力，强化动手能力可以让我们在任何时候都能实现自己心中所想的创意。以前自己也经常制定 UI 100 天的计划，在撸图的过程中可以忘记烦恼，不会在意工作中的不顺心，最终看到作品合集的时候，也是一种成就感的体现。

五、坚持输出经验总结

突破动手能力是设计能力的基础保障，当我们撸图时间长了也会迷茫，这时候需要换个计划啦！我会选择去梳理自己的经验总结，选择自己熟悉的一个专业分枝，去梳理相关的方法论，这也是一种通过输出倒逼输入的过程。在总结的过程中会遇到模棱两可的知识点，就会去查资料和翻阅书籍，也是一种学习的过程，能让自己的专业基础更稳固。

所以，我们也需要定期去总结，不能只是停留在视觉层面的作品输出，能把简单的原理总结得更有方法也是很重要的。只有总结后的经验才能理解更全面，也能有助于自己培养团队人员，提高自己进阶的一面。

六、坚持阶段性复盘

出现迷茫也有可能是不知道自己的问题在哪里，而发现问题需要去总结过去，这也是很多设计师在年底都会输出作品集的原因。输出作品集不一定是为了求职，更多的是对过去工作和学习的一次总结。

我们在阶段性的时间里面要对过去完成的项目进行复盘，总结经验、发现问题、制定目标是最常规的三步。不能一直朝前走，这样会迷失方向；也不能一直停歇不前，处于原地踏步。边走边回顾，及时调整方向和目标，制定新的计划。

七、小结

当我们处于迷茫或者焦虑的时候，就要通过一些必须要坚持的事情逼着自己去自我驱动，通过焦点转移的形式让我们的心态发生变化。往往影响迷茫的就是我们的心态，如果自己一个人走不出迷茫，要善于寻找带你走出迷茫的导师或者团队，当局者迷是会越陷越深的，只有旁观者清才能引导你看清自己的不足，调整自己的奋斗方向。

希望这些坚持可以让你在闲余时间过得很充足，不用去思考我今天应该做什么。还有更多进行自我调节的形式，这里仅作为抛砖引玉，希望可以带给大家一些帮助！

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》如果你很迷茫，就做好这几件事

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1886)

082022-2

有经验的设计师更应该学习

seo达人

记得刚毕业那会，我在广州一家本土的4A广告公司上班，我和一位美术指导是同一天入职的，而且是同桌，所以比较聊得来。有一天他问我：“你平常在家喜欢干什么？”

我说：“主要是看书和看电影吧。”

他又问：“什么书？”

“主要是设计之类的书，”

“呵呵，设计书呀，做设计不需要看书的。”

我瞬间变得尴尬起来，心想，我在他眼里会不会是一个很无趣、很笨、很死板的人啊。不过内心深处对他的这种观点还是比较怀疑的，即使他当时要比我资深很多。

而后来，这位美指没有通过公司的试用期。

时至今日，我大学毕业快11年了，在公众号里写文章也已经写了五年多，我发现，很多有了几年以上工作的设计师都不大爱学习，他们除了找参考的时候会去网上看看案例，平时几乎不会去看设计之类的书籍，也不会专门去设计网站、或者设计公众号里看干货文章，更不会去看设计教程，他们觉得这些事情是初学者和小白干的。

这是一个很大的误区，葱爷觉得有一定经验的设计师更应该去学习，而且同样可以去学一些很基础的东西，因为很多方法和技巧都在不断更新，而且并不是都能从日常工作中悟出来的。

我常听很多设计师说做设计几年以后就会遇到瓶颈，并且其中的大部分人都会在这个阶段停留很久，甚至是一直出不来，于是就会自暴自弃，或者转行去做其他的工作，很多人会把原因归结于天赋不够，葱爷觉得，不坚持学习才是最重要的原因。

我前公司的一位创意总监，自己原本是平面出身，但由于客户对短视频的需求越来越大，公司的剪辑师又常常不能理解他的需求，于是他就自学AE剪辑视频，现在他已经是一个很专业的剪辑师了，剪出来的片子比很多剪辑师都要专业，因为他有扎实的设计功底，也更清楚自己想要表达什么。

[优化输出图像]

其实我也有很多技能是最近几年才习得的，比如利用网格系统排版，我们大学的书籍里就没有这一方面的内容，老师没提过，在工作中领导也没说过，甚至也没见人用过，所以我一直不知道排版还要用这么一个东西，后来是在公众号里看到相关的文章才开始去了解和学习的。

网格系统并不容易掌握，所以很多初学者学了以后，做出来的设计并没有多大改善，反而变得比以前更僵硬、更缺少变化了。这就是因为他们太过于遵守网格，而且对设计的一些基本原则还没有真正掌握，审美也还不够成熟。而已经有了几年工作经验的设计师在这方面会有一定的优势。

再比如，一些关于字体设计的知识我也是前几年才知道的，比如我以前并不知道什么叫字面、灰度等等，后来看了书才有所了解，让我对字体设计又有了一些新的认识，也能设计出更专业的字体。

其实直到现在我也还会去学习一些设计方法和技巧，比如网上时不时又会冒出一些好玩、高效的Ai小技巧，我学了以后很快就能用到工作中去。比如我经常会总结一些排版的小技巧分享到公众号里，这其实也是我自己的一个学习过程，很多我也是最近才学会，以及正在学习和使用的技巧。

很多设计新人在看完一些设计教程或者方法后总会说：一看就会，一学就废。之所以会这样除了是因为他们练习还不够以外，还有很大一部分学原因是因为他们还没有基础，所以学起来会更难。就好像一个人学打篮球，如果基本的运球都还不是很熟练，就去学花式的过人技巧，那么势必会很难，哪怕学会了,也很难灵活地用到实战中去。

所以说，很多设计理论、设计方法和技巧、甚至是设计软件，恰好是有设计经验的人更容易领悟和掌握，更容易快速地从懂得变成学到，并投入到实际工作中，而没有经验的设计师学起来相对会吃力很多。但偏偏有经验的设计师不太爱学习，你说可惜不可惜。

一个正处于学东西的大好年纪，就应该好好学习，而不是老带着批判的眼光去看所有东西。当然，每个圈子里都需要有质疑的声音和不同的看法，但这不应该成为阻挡我们学习和进步的借口，如果一个人总是带着挑刺的眼光去看待事物，那么他们将看不到别人的任何优点，自然也学不到任何东西。

牛人之所以会越来越牛，关键在于他们会持续不断的更新和提升自己，并且不仅仅是提升专业技能，还包括身体、社会、情感、精神等方面。让我们一起向新人学习，始终保持饥渴、始终保持愚笨。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学UI网》有经验的设计师更应该学习

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1697)

082022-2

2022年，设计师如何学习HMI设计？

seo达人

1.什么是HMI？

在汽车领域，HMI通常被称为（Human-Machine Interface，即人机界面；或者Human-Machine Interaction，即人机交互）。汽车HMI研究的是人与汽车之间的所有交互关系，包括人与车的互动关系，车与车之间如何互动、车与城市互动。

车车互联-图来自百度车联网前瞻团队（42team）

人与车之间互动就存在多种交互信息媒介，比如中控一字屏、AR-HUD（前挡风）、车顶屏、环绕屏、智能车窗等。

AR-HUD-图来自网络

那么车载HMI交互模式又是多通道交互组合，如语音交互、人脸识别、多模手势、多点触控等，共同构成车载端交互方式。

人车语音交互-图来自百度车联网前瞻团队（42team）

那么对于HMI视觉设计师来说，我们就需要学习掌握车载信息设计合理性，比如AR-HUD本身距离驾驶者较远，所以考虑距离可视性因素也是非常关键，小到图标字体设计，大到整块区域的布局定义，等都是设计师需要考虑的问题。

2.车载HMI前景如何？

如何才能知道一个行业前景如何？其实很简单，看国家政策，看市场需求，看大厂动向。

2021年，国务院办公厅关于印发新能源汽车产业发展规划（2021—2035年）的通知，发展新能源汽车是我国从汽车大国迈向汽车强国的必由之路，是应对气候变化、推动绿色发展的战略举措。

国家在大力推动新能源汽车产业发展，这中间就会诞生出更多的造车新势力的崛起，汽车体验设计人才必然是逐年增加。

所以如果你想入局互联网，但是因为C端的高度饱和，没有机会，那么何不尝试一个处于蓝海领域的HMI？

3.如何入门？

很多人最关心的就是如何入门，对于汽车HMI设计，如果想要要入行，最快速的方式就是了解这个领域的知识体系架构？有了框架可以跟着这个框架内容去学习与填充知识。

上图，是一个给大家初步认识HMI结构路径，早期阶段可以先这样逐步去了解。

我们做移动端设计，安卓和苹果两个大平台已经沉淀出了一些通用的设计原则与规范尺寸。车载HMI设计这块目前还没有比较权威性原则规范，目前还是百花齐放阶段，所以还需要靠大家前期自行去收集学习整理。

当你对HMI设计了解有基本了解后，下面可以继续进入下一个阶段研究学习。

这时候，你可以关注UX设计是怎样的？需要考虑哪些因素？

还可以去一些权威性公众号学习，比如百度的Apollo智能驾驶体验设计中心，通读一遍所有文章，认识HMI设计，有一个初步概念了解，知道这个领域HMI相关范畴，下一步就是开始搭建HMI知识框架。

HMI设计开发流程其实是很宽的一个范畴，作为早期阶段，我们主要还是专注在UIUX领域学习，深耕，至少你要掌握完整的HMI设计流程。

4.写在最后

HMI学习是一个长期的过程，大家不要急着一蹴而就，毕竟算是一个刚兴起的行业。前期了解这个领域的知识是非常关键的，先熟悉，再深入学习，这也是我们学习任何技能的方法。

今天文章算是一个入门了解，后续我会逐步分享一些学习提高方法给大家，喜欢的就给我们的文章多点赞支持下。

原文地址：功夫UX （公众号）

作者：Tony

转载请注明：学UI网》2022年，设计师如何学习HMI设计？

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1966)

082022-2

中国设计师必须知道的8种中国风

seo达人

1.国画

国画是最具代表的中国风，用毛笔、墨水和颜料作画，但现在的插画师也可以通过手绘板里的毛笔笔刷，画出类似国画的效果，最常被用于设计的国画主要是水墨画和工笔画。

2. 现代国风插画

指插画师通过手绘板创作的，颜色更丰富、细节更细腻、组合更随意、元素更多样、形式更具创意的，类似中国画的画风。

3.剪纸风

常常被设计师认作是剪纸风格的剪纸设计，其实有两种风格，一种是传统的中国剪纸，另一种是纸艺。

a.中国剪纸

是一种用剪刀或刻刀在纸上（通常是红纸）剪刻花纹、图案的艺术创作，效果是平面的。现在设计师也可以通过电脑创作出类似剪纸艺术效果，而且可以做得更灵活、更丰富。

b.纸艺

指以各种纸张为主要材料，通过剪、折、刻、拼、叠、编织等多种手段制作出来的艺术品，效果通常是立体的。

4.毛笔书法

指用毛笔和墨水写出来的文字，并且书体局限于行书体、草书体、隶书体、篆书体、楷书体这五种，很多中国风设计作品，会直接以毛笔字作为设计的主体。

5.汉字

汉字本身就是是中国元素，所以我觉得，直接以汉字作为设计的主要元素也是中国风设计，其中宋体字以及宋体字的笔画是最常用的元素。

6.版画

指通过刀、化学药品等在木、石、麻胶、铜、锌等版面上，雕刻或腐蚀后印刷出来的图画，其中木刻版画在20世纪30年代至60年代之间尤为鼎盛，形成了独特的中国特色。这种艺术手法也被很多设计师和插画师用到平面设计中来，满满的复古气息。

7.民国风

中华民国时期诞生了一大批独具特色的美术和海报作品，画风细腻，元素常以穿着旗袍的女人为主。也是当代设计师很喜欢效仿的中国风。

8.刺绣

刺绣是用针线在织物上绣制的各种装饰图案的总称，属于中国民间传统手工艺，也被设计师用到现在的设计作品中来，除了绣图案也还可以绣文字。

以上8种就是常常用于表现中国风设计的艺术风格，在创作时，为了使最终效果既具有中国特色，又不致于太过传统，常常需要设计师或插画加入现代的元素、字体、色彩、构图、创意、以及排版。好了，现在可以开始你的创作了。

原文地址：葱爷（公众号）

作者：葱爷

转载请注明：学UI网》中国设计师必须知道的8种中国风

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2559)

082022-2

做设计改版前，如何准确洞察产品问题

seo达人

？

1.从业务视角出发

首先需要理解“业务”的范畴，指的是公司层面和产品层面出发，这个问题会影响产品体验、市场占有率、收益、活跃度等关键性问题。我们从业务视角出发挖掘产品问题，可以从两个视角切入：公司发展战略和产品需求。

举个例子，公司下个季度的需求目标，是要提升产品的语音交互次数（语音唤醒次数）。

我们拿百度地图来举例，除了导航，语音就是比较核心的一个功能。我们在使用百度地图时，有时候会使用语音输入地址功能，然后发起导航。在导航过程中，继续唤醒语音为你提供服务，那么这个唤醒的频次，就是这次公司下个季度的战略发力方向。如果这次设计中没有去着重解决这个问题，那么我们下个季度的目标也是无法完成的。

所以大家应该明白理解业务目标了，在做设计前，是一定要了解业务视角下的产品具体需求，这样才能真正解决具体问题。

2.从用户视角出发

回到用户身上，洞察问题，也是挖掘产品问题的主要手段。例如：我们需要思考为谁而设计？这些用户的行为习惯这样？他们的喜好及影响到他们操作使用的问题是哪个？用户期待产品是什么样子的？他们印象中产品应该是怎样？

从用户视角洞察问题，常用的方法有，桌面研究，用户画像，用户旅程图等。

桌面研究：日常用户反馈收集，应用商店收集整理。

用户画像：用户人群细分，不同类型用户需求痛点研究，一般情况下，如果需要这一步，都需要用研同学加入，毕竟他们比设计师更专业可靠。通过用研研究分析，我们可以知道用户期待的产品会是怎样的气质？性格特点。

用户旅程图：按照用户使用产品全流程，需构建一个用户体验路径中的各个时间段的做的任务和触点。例如：一个运动产品分为运动前、开始运动、运动中、运动结束等4个大阶段，那么你要做的就是研究这4个阶段体验糟点研究和分析。分析出来的结论用于设计指导。

通过上面我们可以看出，用户视角出发可以通过三个方向去做，当然并不是每个层面都需要做，你可以选择其中一个点深入。

3.从行业竞品视角出发

从竞品视角出发，帮助我们对照竞品找出自身产品问题，取长补短。从竞品视角出发我们一般都是看什么？以设计师视角为例，分析行业竞品，首先从目标出发，在竞品中找到一部分关键性设计策略。

看功能：竞品核心功能怎么做的？功能布局差异化怎么做的？然后和自家产品进行对比优劣分析。

看体验：核心功能体验路径如何做的？峰值体验如何创造？情感化场景如何设定的。

看视觉：看品牌DNA如何打造，品牌多元化场景穿透思路，品牌差异化创新设计思路。

从行业竞品视角出发，逐步分析设计机会点，在同质化的今天，找到解决策略。

4.写在最后

今天主要讲了，设计改版或者设计探索前期的必备工作，洞察产品问题。如何才能真正的找对问题，洞察到设计机会点。本文从三个视角切入：业务视角、用户视角、行业竞品视角切入，三者环环相扣，系统化思考产品的本质问题。

从侧面也反应出，设计师需要具备多元化思维，多个维度立体化思考，才能精确地定位问题，为产品找到准确的发力方向。

原文地址：功夫UX（公众号）

作者：Tony

转载请注明：学UI网》做设计改版前，如何准确洞察产品问题

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1948)

082022-2

进了大厂后，我才知道原来我的细节差这么多！

seo达人

01 这个叠加是假的

我看钉钉群里有人问下面这种风格的图标是用的什么模式叠加的：

我之前有做过类似的，其实这个叠加的效果是假的，和毛玻璃一样的原理，中间叠在一起的地方，其实是一个单独的图形：

我们把这个单独的图形加上一个渐变色，放在最上面，效果就出来了：

这个渐变的是可以任意更换颜色的：

所以，这个叠加效果，并不是我们想象中那样用叠加模式调出来的。

反正我是这样做的，供大家参考。

02 包装的问题

下面这组练习，单从图标来看其实是没有啥问题的：

统一性啥的都还ok，但是毁在包装上了，比如黑色方块下面尽量就不用加投影了，太脏了：

其次就是黑色下面的背景色用了一块浅紫色，毫无关联性，不如直接用灰色，或者如果色块是深紫色，背景是浅紫色，那也ok：

总之就是要有一定的关联性，不然就会比较奇怪。

03 关于圆角的和谐性

其实我们在看圆角的时候，并不仅仅只是一组图标之间的统一，单个图标的圆角统一也要注意。

比如之前有一次优化的图标，就是因为图标顶部和底部的圆角大小不一：

今天看的这个是优惠券的：

也是感觉有点难受，但是如果是下面这个优惠券就精致很多：

其实也是因为图标内部圆角统一的问题，都是直角就会舒服很多，但外轮廓是大圆角，里面是尖角就会比较难受。

04 为什么这组半原创没有原版耐看

有一位星友做了一组半原创练习，原版是这组：

半原创是这组：

我们会发现，原创的图标没有原版耐看，为什么呢？

因为原版的细节足够丰富，但是半原创的细节就很单薄，比如我们看原版的奖杯，底座加了两侧矩形，如果只是一条横线就会相对非常单薄普通：

再比如这个放大镜，把手也并不只是一条竖线，而是分了两段，加了细节：

按照这个理念来分析，我们可以发现半原创的几个图标，只有第四个看起来比较耐看，因为它的细节相对比较丰富，可以跟得上原作，其他都相对单薄一些。

虽然第二个钱包纽扣那里也加了两层，但是疏密度有点问题，而且也比较常规。

05 看几组星友精选的练习

最后再看几位同学的精选打卡，非常用心：

第一组是donna的！

融合很多细节，也有很多自己的想法，变得更加丰富、精致、统一，非常优秀：

第二组是小7的

统一性做了很好的优化，又加入了自己的断线想法：

第三组是慢格调的：

很精致，疏密度、大小、长短高矮，用色比例全都进行了统一性调整，非常优秀。

也融入了很多自己的想法，继续加油：

总结

今天就先分享这么多了，每天进步一点点，现在开始，永远不晚！

原文地址：菜心设计铺（公众号）

作者：菜心设计铺

转载请注明：学UI网》进了大厂后，我才知道原来我的细节差这么多！

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(1775)

082022-2

快学，简单出彩的刷屏级弥散光教程来了

seo达人

什么是弥散光感？

弥散光感的形成，一般由单色或者多色模糊渐变混合，形成虚实集合的模糊效果。在这其中还可以加入不同的元素使其具有新奇和记忆点，来丰富单调乏味的画面，增加画面空间层次感，增添画面的细节，还能聚焦产品的记忆点、优化信息层级，让平淡无奇的排版瞬间活了起来，下面我们就来看看弥散光感的一些优点。

弥散光感的优点

1. 丰富设计细节，增添画面感

2. 聚焦重点，吸引目光

3. 营造空间层次感

弥散光感常用的形式

1. 虚实结合

一侧进行虚化模糊，另一侧保持清晰的轮廓，整体从观感上多了一些动感变化效果。因此，不管作为版面的主视觉，还是作为辅助部分都能有不错的效果。

2. 单体模糊虚化

将一种或者两种以上颜色进行全部模糊虚化掉，一般多作为背景装饰来使用。在此基础还可以加上不同的元素，再增加一点噪点质感，细节满满。

3. 多重混合

使用多种不同模糊方案或手法，以弥散光感为基础，来达到视觉聚焦和丰富设计细节，增添画面感和空间层次感。

如何设计这种弥散光感？

看到这里大家都肯定要嚷嚷，光说不练假把式，安排上菜，我们先从简单的开始，萝卜要一个一个吃，坑要一个一个的埋，翠花，上酸菜！

第一步

首先我们来设计一个banner,这个案例就用最简单的高斯模糊来做，这种全弥散的渐变实现起来比较简单，颜色我设置为如图三个颜色和三个圆形。

第二步

为了保留模糊参数的后期可编辑行，模糊之前，先给三个圆形转换为智能对象，可以三个一起起智能对象，也可以单个一个个的智能对象，后者的好处是可以随时调整图形的位置与大小。然后给智能对象一个高斯模糊（滤镜-模糊-高斯模糊）

第三步

高斯模糊后，有时候有的颜色融合的不是很好，这个时候我们可以通过调整图层叠加模式或者透明度，让颜色之间融合的更协调，案例中我觉得青色过于实了，降低一下透明度70%，到这里，基本的背景就完成了。弥散光感背景就是这么简单！

第四步

确定信息层级

我根据之前的梳理和自己的意愿，把文案分为了4个层级，中文英文的主题信息作为最高层级存在；然后我想突出时间，所以把它放在第二层级，其他元素依次往后排。

第五步

添加主文案

我们先确定大标题，然后再用小字来进行版面的填充与平衡，让整体的文字排版形成视觉层次变化与平衡。由于图形位于对角线位置，在文字分布上我顺应这个构图方式。英文和中文之间互相叠压一点，这是压抑不住都要买的节奏啊！颜色一黑一白加强之间的对比关系。

第六步

添加第二、三层级内容

为了让版面的保持视觉上的平衡，二、三层级的内容和主题内容形成交错穿插，让整体的文字排版形成视觉上的一个层次变化。

第七步

细化排版

到这一步，整体排版基本完成了，但整体感觉信息之间比较独立，我们添加一些装饰元素，让画面更整体饱满紧凑。OK，一张banner完工

马上要过年了，新的一年，换新的工作，所以这次的案例就为大家做个作品集封面，俗话说：作品封面做的好，工资翻番少不了。

第一步

确定信息层级

作品集文案的内容并不如一些展览海报类那么多，所以在整体的编排上难度不是很大，根据内容需要找到自己想要突出的重点即可。

信息文案一般大致上可以分为三种类型，①主题信息适合作为主标题存在；②与活动相关的具体信息则次之，当然，我们也可以根据内容选择性的突出其中某一项，如价格、时间或是其他；③其他的补充辅助性信息，这类的信息一般作补充说明，相对不是很关键，所以适合作为装饰性的元素来放在需要的地方。

第二步

弥散光感背景

建立4个大小不同的圆形，填充不同的颜色，然后单独给每一图层智能对象后，调整各自的模糊数值。根据需要调整图层叠加样式或者透明度

第三步

添加虚实渐变

①光这样的话，稍显单调，所以我们再加点料。新建一个圆形，填充浅蓝色，然后新建2个图层并创建剪贴蒙板，用柔边画笔画深浅2个大小不一的颜色，然后把3个图层合并一个智能对象。

②给智能对象一个场景模糊（滤镜-模糊画廊-场景模糊），场景模糊具有定义不同模糊量的多个模糊点来创建渐变的一种模糊效果。将多个图钉添加到图像，并指定每个图钉的模糊量，从而达到一种虚实模糊不同的模糊效果。本案例定义2个模糊点，一个模糊量0.一个为60，通过一边模糊，一般不模糊来达到一种虚实结合的变化，

③为了让背景更丰富有层次感，再用①的方式再新建一个圆形，填充不一样的颜色，然后执行场景模糊，图层叠加为“色相”，效果如图。

第四步

添加文案信息

为了体现层次空间感，大标题我用虚实模糊的圆形压住一部分，交错穿插，让整体的文字排版形成视觉上的一个层次变化。

第五步

细化排版

细化排版，添加一些辅助元素，填补版面的负空间，这件，一个作品集封面就完成了。

这次来运用光圈模糊做一个展览海报。

“光圈模糊”对图片模拟浅景深效果，选择“光圈模糊”（滤镜-模糊画廊-光圈模糊），将在图像上放置默认的光圈模糊图钉、单击图像可以添加其他模糊图钉，说明:A. 锐化区域 B. 渐隐区域 C. 模糊区域，拖动句柄移动它们以重新定义各个区域。拖动模糊句柄以增加或减少模糊。一个图片中可以添加多个光圈模糊进行重复叠加来达到不同的效果。

第一步

确定信息层级

第二步

弥散光感背景

基于文案内容是港澳台三地及青年艺术家，所以在背景上希望能表达出三地的概念，颜色上用浅青+黄色系表达出青年艺术家这一人群。青年嘛总是要嫩点，鲜点。

建立三个大小不一的椭圆，智能对象后，再分别进行光圈模糊，制作方法上除了光圈模糊，当然也有其他的实现方法，只不过个人觉得光圈模糊会更方便一点~

第三步

完善弥散光感背景

海报弥散光感背景基础完成了，现在复制三份，从上往下排列，体现三地的概念，为了让每个色块之间有所差异，在大小排列上做了一些调整与变化。

第四步

添加标题

根据上面的信息层级，放上主标题，根据主题意义，对字体做一些简单的笔画裁剪，英文用底色做一点点遮挡，点缀点星星，群星闪耀港澳台。

第五步

添加其他信息

将其它文案分布在海报的下面，注意平衡一下整个画面。

第六步

最后用网格规范下文字信息编排，用网格可以比较精确地将版面编排出来。大家可以清晰地看到，所有的文字的大小和位置都是有依据的，都卡在模块网格之中的。

旋转模糊通常用于创建圆形或者椭圆形的模糊，比如飞驰中的轮胎，转动的摩天轮等等都是旋转模糊的具象表现。滤镜-模糊画廊-光圈模糊，点击拖动椭圆边框改变模糊的大小。中间的模糊圈可以用来调整模糊的量，或者模糊的角度。也可以增加多个模糊点

移轴模糊点击滤镜-模糊画廊-移轴模糊，如下图样式。虚化的大小可以通过白色圆圈调节，虚化位置可以通过移动位置或者旋转进行调整。这样就实现了虚实集合的光感设计。

第一步

确定文案信息层级

第二步

建立任意门

根据文案的信息内容，我想用眼睛和日出来表现这个海报的主题概念。根据上面方形旋转模糊的特性，我在画面中建立了一个任意门的图形，它可以带去往不同的时空，咳咳咳…传错了，还是传回来写完这个教程了。

第三步

执行旋转模糊

先把任意门图层转为智能对象，然后执行旋转模糊，具体参数所见及所得，根据实际效果来调整参数即可，这一步，可能会有点慢，耐心等候，不急哦。

第四步

一起看日出吧

进行到这一步，发现画面缺少一个视觉中心来作为视觉聚焦点，然后在眼眶中心新建一个红色的圆形，转换智能对象，执行移轴模糊。太阳出来了！有人要一起看日出吗？

第五步

日出倒影

对日出图层，执行滤镜-液化工具，用“向前变现工具”来回擦，一边往里擦，另一边往外擦的的节奏来回擦，为日出擦出水面倒影，这一步需要耐心，一次不行，可多尝试几次，以达到理想效果。

第六步

添加文案信息

根据画面的图形构图，文案信息的编排方式上采用压四角的编排方式，留出中间的视觉中心点。

第七步

网格规范

最后根据网格来规范下文字信息编排。

最后一个案例我们来用下最近流行的毛玻璃效果，看看弥散光和毛玻璃能碰撞出怎样的爱情火花，好了，话不多说，直接干货走起。

第一步

弥散光感背景

拉出4个大小不一，颜色各异的圆形，摆放位置按自己想的构图排列就行，把握不好也可以模糊后再调整都可以，方法不一，效果达到就行。然后把4个园一起转换为智能对象后，并进行高斯模糊。一个弥散光感背景就这么简单的做好了。

第二步

毛玻璃制作

新建一个浅蓝色圆形图层，crtl+j复制图层，2个图层前后错开一定的位置，底下图层填充一个从浅到深色的渐变，确定好厚度位置后，将浅色层和深色层重叠的部分用蒙板遮住，只留边缘，这样就可以形成玻璃厚度的效果。

第三步

优化毛玻璃细节

将上面浅色层的透明度降低，这样就形成了玻璃半透明效果。接着对玻璃的转角和边框高光等细节进行处理。加上玻璃的受光面和暗面

第四步

完善构图版面

将上面做好的圆形玻璃，复制2个，根据自己的构图需求摆放，为了不至于形状都过于统一，把其中一个智能对象，然后ctrl+t进行扭曲变化，做一个倾斜点的毛玻璃，让整体构图更灵活层次感。

第五步

添加文案

添加文案信息，编排好文字信息主次关系。标题设计上采用了一个渐变叠加的处理，在呼应主题的“融合、共”的意思，同时，让标题增加一点细节，让它有那么一点点的设计感。

第六步

模糊文字

将与玻璃块叠加部分的内容模糊掉，这样毛玻璃质感效果就更像了。至此这个具有UI风格的海报就完成了，如果，觉得背景比较单调了，还可以继续把前面的毛玻璃智能对象复制一个，ctrl+t变形扭曲，或者添加噪点纹理，为背景填充更多的细节。

最后

前面几款案例中，如果想要更有质感，还可以在做完再给画面增加噪点质感，增加方法有2种，①滤镜-滤镜库-纹理-颗粒。②滤镜-camera raw滤镜-效果-颗粒。我个人比较倾向后一种，颗粒比较细腻自然。

原文地址：胡晓波工作室（公众号）

作者：胡晓波工作室

转载请注明：学UI网》快学，简单出彩的刷屏级弥散光教程来了

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2262)

272022-1

APP项目设计总结

seo达人

我们是有底线的~O(∩_∩)O~

原文地址：黑马家族（公众号）

作者：黑马青年

转载请注明：学UI网》寻工鸟招聘APP项目设计总结

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2460)

272022-1

彩铅肌理扁平插画教程（附笔刷）

seo达人

* 本篇教程的示范作品，由我的助理琳琳原创绘制，如需转载教程请申请授权，盗用作品或未授权转载，侵权必究！



知识重点：彩铅肌理刻画技法
操作工具：数位板 |  Photoshop
操作难度：★★★☆☆

在学习彩铅肌理插画之前，我们先来简单了解一下什么是彩铅。
彩铅画，是一种综合了素描和色彩之间的绘画形式。它的独特性在于色彩丰富且细腻，线条感清晰，可以表现出较为轻盈、通透的质感。
给大家介绍一位英国插画师 Melissa Castrillón 。
Melissa Castrillón 她出生在英国的一个叫 Hitchin 的小镇，2014 年她在 Cambridge school 获得了硕士学位，她绘画的儿童书籍获得了一等荣誉学位，现在她生活工作在剑桥，是一位自由插画师。
她的插画运用了彩铅肌理与丝网印刷结合的技法，加上独特的双色调配色，让她的画面从插画绘本里脱颖而出。

* 图片来自英国插画师：Melissa Castrillón，仅供赏析
*
分析 Melissa Castrillón 的

画风特点

//
1.与丝网印刷叠透效果相结合
* 图片来自英国插画师：Melissa Castrillón，仅供赏析

2.双色调配色
* 图片来自英国插画师：Melissa Castrillón，仅供赏析

3.使用大量的装饰线条

* 图片来自英国插画师：Melissa Castrillón，仅供赏析

说了辣么多，想必对这次的彩铅肌理插画大家也有了一个大致的了解了。那让我们马上进入今天的主题吧~

生活不止眼前的电脑、手绘板，还有诗和远方，你要是没办法去远方，那可以上百度找找。
我们通过搜索关键词【奇花异草】就可以得到很多相关联的图片。
TIPS:在选择植物的时候选择块面清晰的植物。

只画一些植物似乎有些单调。为了让画面更有趣，可以加一个人物主角。我的想法是让我的主角靠着树看书，所以选择了一个类似的人物动态照片作为参考。


照片降低透明度垫底，用火柴小人提取动态。

对火柴小人的动态进行夸张处理。

给火柴小人拾掇拾掇，加上五官，设计服装。

最后，给在衣服上设计一些装饰花纹。

主角就画好了，我们再来回顾一下步骤。


接下来，我们来绘制植物。先对照片的轮廓进行概括，提取植物形态。


接着进行二次变形，再次简化造型。

最后，将植物围绕主角摆放，组成完整的一个画面，线稿就完成了。


接下来就到了万众瞩目的配色环节。

以蓝绿色为底色，运用对比色与互补色，使画面具有氛围感的同时加强视觉冲击力。

使用大面积的暖调橙和红色，加上一些深蓝色点缀，使画面达到一种热烈明媚的感觉。

使用大面积的绿色背景，加上紫红，橙色对比色搭配，使画面富有活力氛围。
TIPS:在配色的过程中，改变色相、饱和度和明度带来的色彩冷暖感受也不一样，那么冷暖也是需要对比才能感受到。



接下来，我们开始给画面增加细节。本次用到的肌理笔刷有四个。

第一步：背景刻画。
使用「村口交错肌理」给背景增加粗糙肌理。吸取比底色浅一些的颜色绘制肌理，再吸取比底色深一点的颜色叠加肌理。

使用「村口彩铅」吸取比底色亮的颜色，沿着植物的外轮廓绘制密集的虚线装饰。
背景就搞定了。

第二步：植物刻画。

· 叶子

使用「村口彩铅」绘制粗细不同的线条给叶子增加脉络。

用「村口彩铅」在叶子边缘绘制线条。

再使用「村口彩铅」延着叶子经脉绘制白色亮线肌理。
TIPS:在绘制线条时可密集一些，绘制长短不一的线条。

· 莲蓬

用「村口彩铅」绘制肌理，沿着边缘绘制亮暗线条。



用「村口彩铅」沿着莲子周围由外向内绘制明暗线条。


吸取比底色浅的颜色，用「村口彩铅」沿绘制亮线，增加莲蓬质感。再吸取深一些的红色绘制线条装饰莲蓬。

· 花朵

吸取紫色用「村口硬边圆」绘制花瓣内壁。


吸取深紫色使用「村口彩铅」从里向外绘制暗部线条，线条要密集。再吸取花瓣外壁的颜色继续绘制亮部线条。



吸取比花瓣底色深的红色用「村口彩铅」绘制花瓣暗部，吸取绿色绘制叶子经脉。

最后在花瓣上绘制一些亮线，在叶子上使用绿色从里向外绘制暗部细节。

第三步：人物刻画
使用「村口彩铅」绘制粗细不一的头发线条，再使用饱和度低的棕色叠加头发线条。

使用淡黄色和蓝绿色使用「村口速写」给衣服绘制一些简单的装饰。


使用「村口彩铅」绘制裤子的红黄蓝的条纹装饰。

使用「村口速写」在头发与衣服重叠处，手臂与身体重叠处绘制投影。再使用「村口彩铅」在暗面绘制深色暗部线条。

使用「村口速写」在手指尖尖，手臂两侧绘制暗线条，线条从指尖逐渐向手臂内减少。在手臂中间绘制一些亮线，增加皮肤通透质感。

面部同理。在鼻尖，耳朵边边，腮红边绘制深色线条，再使用浅色在面部绘制一些亮线。

最后，使用「村口速写」绘制暗面，就完成了！

第四步：增加丝网印刷效果
复制花蕊，挪动错位，并调整模式。我这里使用的是“线性加深”，大家可以多去尝试其他的模式，不同颜色和不同模式之间会产生不同的效果。
关于丝网印刷具体内容跳转至《有趣又炫目！丝网印刷风格插画教程（附专用笔刷）》

在这张插画里，丝网印刷效果多用于投影。

咻咻咻的一顿操作以后，一张「彩铅扁平」插画就duangduang的完成了！
本次教程用到的笔刷包，文末可以获取。

【彩铅笔刷】链接：https://pan.baidu.com/s/1c8qol3_QaxANZCrxSGx4vQ 提取码：2022

原文地址：胡晓波工作室（公众号）

作者：蓝贵莲

转载请注明：学UI网》彩铅肌理扁平插画教程（附笔刷）

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计  、包装设计、图标定制、用户体验、交互设计、网站建设  、平面设计服务

评论(0) 浏览(3260)

252022-1

3种状态+5种模式，从UX角度分析加载设计

seo达人

三种加载状态

页面加载进程会受多方面的影响，例如页面里图片、图标的数量，页面中是否有三维场景或模型，是列表式设计还是卡片式设计…

逐一加载

对于可以同时进行多个加载任务的产品，更适合应用逐一加载的形式，这样做能减少用户对于等待的感知程度。任务列表逐一加载的过程会给用户带来一种秩序感。

完全加载

进入一个网站或App，很多页面都会一下就显示出来所有内容，这种页面完全加载的形式对用户来说更熟悉。

同样，页面完全加载的形式会让用户的操作和浏览过程更流畅。

延迟加载

延迟加载是用户主动触发的操作，根据操作系统反馈对应的结果。延迟加载包括三种形式：

无限滚动：当检测到用户快要到达列表或页面的末尾的时候，通过无限滚动来作为触发器，引导用户获取更多内容。

加载更多：通过点击“加载更多”按钮来获取更多内容，这个过程由用户主导决定，是否选择点击。

分页加载：分页是在不同页面上进行的延迟加载。这个过程也是由用户主动选择，但和“加载更多”按钮不同的地方在于，分页是页面间的切换，并且用户能清楚地看到具体的页面数量。

五种加载模式

加载模式需要依托场景去考虑。比如一个1秒就能加载的页面和一个需要5秒才能加载出来的页面，我们就需要考虑使用不同的加载模式设计，这样才能做到差异化设计。

这里我做了一个表格，将页面加载需要的时间以及对应的加载模式进行了整合。

0.1秒以内

如果加载时长低于0.1秒，用户不需要等待加载过程，内容就能即时呈现出来，有一种“还没开始就已经结束”的感觉。

0.1秒以内的加载不需要在页面中添加任何加载状态，但要一个场景需要格外注意，如果用户刚完成一系列复杂的操作，点击提交之后，考虑为用户提供撤消机制。

▲用谷歌邮箱发送邮件时，发送成功之后会弹出一个撤销提示，允许用户在5s内撤销刚才发送成功的邮件。

0.1-1秒间

大多数产品的页面加载速度都在这个区间，用户几乎不会注意到这种加载延迟。所以我们不需要增加额外的加载动效来填充这段加载时间，不然可能会起到画蛇添足的反面效果。

试想一下，如果在每个页面加载的过程中都加上加载动效，不仅会分散用户的注意力，并且屏幕上总出现不断跳动的内容，会让人感到很焦躁。

1-2秒间

如果加载时间超过1秒，用户就会感知到这个加载过程，这个时候我们就可以考虑适当添加加载动画，缓解用户等待的焦急感。

微加载：1-2秒的加载时间对用户来说，说长不长说短也不短，优先推荐轻量级的动画加载形式，为用户提供一种进度感。

▲在下载内容的过程中，使用这种轻量级的环形动画来显示加载进度，简洁清晰，而且还能作为组件来复用，能够极大提升工作效率。

骨架屏：用于整页加载，这种加载形式在产品中的应用也越来越频繁。骨架屏可以让用户在等待加载的过程中，先了解页面的架构。

在骨架屏基础上，可以“选装”一些好看的效果，增加页面加载时的视觉体验观感：

微光效果：在骨架屏基础上添加微光效果，光感的加入能将用户的注意力从等待中转移开，有效地减少等待感知。

脉冲效果：效果和微光效果很像，差异的地方在于脉冲效果用于单个的任务或卡片列表。

2-10秒

这个加载时间对于用户来说已经很长了，对于设计师来说，需要对这段加载时间进行合理有效地设计，来提升用户体验。

时间提示：在开发中很难以分和秒为单位来精确地估计加载时间。

如果在加载的过程中，想给用户一个期望的时间值，告诉用户整个加载过程需要多长时间，我们可以用“这可能需要几秒钟”这种提示方法，既能展示加载需要的时间，又能给用户一个时间预期。

进度条：最常使用的加载形式，加载过程中使用缓入动画会让整个过程看起来更像在加速。

分步提示：如果加载过程过长，可以将整个过程分为几个不同的步骤，帮助用户预估操作完成需要的时间。如果系统正在处理多个项目，分步提示的设计能让用户明确了解已完成的操作。

10秒以上

百分比加载：使用百分比加载虽然不能告诉用户加载完成需要多长时间，但是能提供一种过程感，让用户自己来估计加载时间。圆形进度条+百分比是最常见的加载形式。需要注意的是，不要在加载到99%的时候让进度条卡住不动，这样会让用户感到焦急。

后台加载：如果一项任务需要加载很长时间，我们不能让用户看着进度条干等，其他什么都做不了，这种情况我们可以考虑将任务放到后台去加载。

在Google Drive中上传较大的文件时，系统会立即给出反馈，将任务窗口缩放到屏幕的右下角，我们可以通过这个小窗口检查上传进度和上传情况，而且还不耽误使用页面上的其他功能。

最后

把加载细分成这五种模式，可以覆盖很多使用场景，这样的对症下药既能保证用户体验，还能让产品丰富化，起到锦上添花的作用。

在对的时间和对的场景下做对的事，这句话用在什么地方都不为过，设计也是一样。

最后考虑到大家经常使用卡片式UI排版，为大家整理了90+个iOS卡片模板，源文件已经打包好，大家可后台领取。

领取方式：关注公众号，后台回复【小组件】获取源文件。

慢慢来比较快，希望对你有帮助！

原文地址：Clip设计夹（公众号）

作者：Clippp

转载请注明：学UI网》3种状态+5种模式，从UX角度分析加载设计

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务

评论(0) 浏览(2005)

首页

目录

1.什么是HMI？

2.车载HMI前景如何？

3.如何入门？

4.写在最后

1.国画

2. 现代国风插画

3.剪纸风

4.毛笔书法

5.汉字

6.版画

7.民国风

8.刺绣

1.从业务视角出发

2.从用户视角出发

3.从行业竞品视角出发

4.写在最后

01 这个叠加是假的

02 包装的问题

03 关于圆角的和谐性

04 为什么这组半原创没有原版耐看

05 看几组星友精选的练习

总结

画风特点

三种加载状态

五种加载模式

最后

分类

日历

链接

个人资料

存档