平面设计

当设计遇上AI——百度APP装扮体验AI创新探索

前端达人 平面设计

前言
 
随着AI技术的发展，越来越多的产品尝试结合AI进行功能升级，作为设计师的你是否也在面临这样的问题：如何将AI技术与场景需求更好的结合，为用户提供顺畅的AI原生设计体验呢？
 
本文将以AI装扮项目为例，分两部分介绍我们是如何通过深入分析用户痛点与需求，结合公司内部能力支持，找到AI创新突破口。同时发挥设计优势，在没有行业参考前提下，探寻出一条AI创新实践之路，设计主导创新方案优化落地。
 
 
第一部分：为什么要做装扮AI创新
 
1.百度APP装扮业务介绍
 
装扮是百度APP的一个基础能力，支持用户设置头像、皮肤、主页背景、套装等，以满足用户个性化诉求为目标，对设计有着较高的依赖。当前主要面临两个问题：
 
  •  
    功能缺少吸引力：
    各类装扮操作流程为选择→预览→装扮，体验单一，缺乏趣味性和吸引力
 
  •  
    装扮资源迭代慢：
    装扮资源更新对设计师依赖度较高，但手工绘图的成本高且周期长
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
2.装扮用户分析
 
通过用户调研和数据分析，对装扮用户有以下两点发现：
 
  •  
    个性化需求难以满足：
    通过装扮调研问卷发现，用户没有佩戴装扮的大部分原因是由于现有的免费装扮资源无法满足用户个性化需求
 
  •  
    年轻群体对AI的喜爱：
    装扮用户趋于年轻化，而年轻群体对智能化、趣味性产品有浓厚兴趣，同时对个性化、定制化也有着更高的要求
 
3.了解内部能力支撑
 
百度文心AI生图技术较为成熟，支持输入描述词后免费生成多张图片。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
4.设计机会点
 
通过前面的分析，我们提出一个洞察思考：
装扮是否可以接入文心AI生图的能力，让用户自主生图并用于装扮？
 
我们从用户、业务、设计三方视角分析装扮中心接入文心AI生图能力的可行性和价值：
 
  •  
    用户侧：丰富装扮玩法，提升装扮体验的趣味性和吸引力
 
  •  
    业务侧：吸引更多用户装扮，提高装扮用户量和渗透率
 
  •  
    设计侧：探索AI能力实际应用场景，积累AI原生设计经验；同时降低设计师生图成本，降本增效
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
 
第二部分：如何进行装扮AI创新突破
 
作为AI创新型项目，我们经历了三期迭代尝试，不断打磨升级AI装扮体验：1期快速试水验证效果，2期创新突破交互体验，3期结合数据持续优化，下面会从以下3个阶段讲述设计创新思考过程。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
Step1：快速试水，验证玩法
 
首先我们快速调研了国内外具有AI生成能力的产品做为体验摸底，发现竞品在AI生图的创作体验上趋于雷同，创作页主要分为描述词输入框、选择风格、尺寸及张数等操作模块，对于普通用户来说
创作体验复杂、输入门槛高
。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
在项目初期，我们希望能够快速验证用户对这套新玩法是否感兴趣，所以目标是低成本快速上线验证玩法。
 
我们将AI装扮流程分为4步：点击入口→开始创作→生成图片→预览装扮效果及装扮。
 
结合一期目标我们有两个设计难点：1.如何简化创作流程；2.如何精简步长减少折损
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
设计难点1：如何简化创作流程
 
解决思路：
在创作流程上我们决定简化方案，采取让用户选取关键词组合的简化方式来生成图片，简化创作流程快速上线验证。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
设计难点2：如何精简步长减少折损
 
解决思路：
在图片生成与装扮预览步骤中，通过缩短路径让用户快速直达装扮预览页，减少折损。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
在方案选择上，我们基于
路径更短、突出装扮预览效果
的目标，选择了方案1进行深化：
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
一期方案与上线数据
 
一期上线后装扮中心的日均设置量提升近3倍，AI装扮各环节转化漏斗较高，在各商城中，AI装扮设置量位列第二，仅次于头像，验证AI装扮对用户的吸引力较大，于是我们开始启动二期优化。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
Step2：创新突破，打造亮点
 
对比一期直接让用户选取主体词和风格词的半自动化方式生成图片，虽然自定义能力较弱，但是生图方式更容易；二期希望增加用户自行输入生成图片，满足用户更加个性化和多样性的需求，但同时输入门槛对用户来说也更高。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
现有AI生图输入门槛之所以较高，是因为一张高质量图片对生图描述词有很高的要求。我们分析发现，高质量描述词需要从画面风格、色彩、细节、光影效果、构图比例、画质甚至是相机设置等多维度来描述，专业词汇多，对于普通用户来说撰写门槛高、难度大。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
这就留给我们一个难题：
如何让用户低门槛生成一张高质量图片？
 
结合二期目标我们有两个设计难点：1.如何创新突破生图体验；2.装扮流程整体重构
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
设计难点1：如何创新突破生图体验
 
1）思路发散
 
首先我们发散了两个方向：
 
方向1：提供高质量描述词范例让用户直接使用
 
方向2：辅助用户写出高质量描述词，比如提供描述词润色功能、高级描述词库叠加、按公式引导用户选择词组组合等形式辅助创作
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
2）框架探索
 
如果创作页要给用户提供丰富的引导内容，同时兼顾输入面板的稳定露出，基础平铺框架承载力有限，无法兼顾丰富引导内容的展示和输入功能的稳定露出。我们提出使用双层框架的形式，将承载“引导内容”和“输入功能”的容器拆分相互独立，在承载“引导内容”的容器中支持用户像刷feed一样上滑，同时顶层容器稳定置底展示输入功能。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
3）多方案尝试
 
我们围绕以上两个方向进行了创作页从基础到高阶的多套方案探索。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
方案收敛过程中，我们决定进行用户测试，观察用户对不同方案的理解与接受程度。
 
4）用户测试与痛点分析
 
我们找了多名不同类型的用户，观察他们对各个方案的理解和使用情况，了解用户在使用过程中遇到的问题和痛点，并制作表格记录每一位用户的反馈与建议。
 
汇总后得到以下发现点：
 
1.用户对点击推荐描述词的生成图片效果没有预期，且表示操作难以理解
 
2.有配图会增强吸引力，文字或步骤多会有负面影响
 
3.用户对风格选择没有强烈诉求
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
5）提炼问题迭代优化
 
根据测试结论1&2我们想到，能否结合方案2-1与2-2，采用图片范例代替纯文字范例，这样用户对生成效果就有了直接的预期，同时提高了点击吸引力和可玩性；根据结论3我们对现有步骤进行了简化，省略风格选择步骤，采用智能识别描述词风格或默认智能推荐生图风格，来减少用户生图步骤。
 
最终方案与竞品对比生图难度更低、生图步骤更短，同时我们也进行了新方案的回访，所有用户均表示新方案更简单直接，且吸引力更强。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
设计难点2：装扮流程整体重构
 
在入口页和生成图片&装扮预览流程我们也发散了多个方案，同样通过用户测试选出最优方案。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
二期方案设计
 
用户在装扮中心点击入口进入创作页，点击图例或输入内容后点击底部生成按钮，跳转AI生成图片页面，支持用户在当前页面预览图片、重新生成、修改描述、保存图片及分享等操作，底部按钮强引导进入装扮预览页进行装扮。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
上线效果
 
1）上线数据漏斗分析
 
AI装扮2期上线后，在入口、输入页和装扮预览页转化较1期均有大幅提升，在输入难度大于1期的前提下，输入转化依然高于1期。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
2）实际图片生成效果
 
以下是一些真实用户生成的图片，不同风格的生成质量都能达到理想效果。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
3）数据指导持续优化
 
同时，进一步分析漏斗数据发现，虽然整体漏斗数据优于以往，但是在图片生成页的用户流失较大，于是我们开始探索在满足用户预览图片诉求的同时，是否存在能够快速进入装扮预览页的方案。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
Step3：持续迭代，精细体验
 
3期我们以简化操作流程，提升装扮转化率为目标进行设计方案探索，结合用户在创作页点击生成按钮后希望先看到生成图片的诉求，我们3期的设计难点是：
如何在预览图片和减步长中寻找平衡？
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
设计难点：在预览图片和减步长中寻找平衡
 
1）框架探索
 
考虑到用户想要先看到生成图片的诉求，所以在思考方案过程中引入动效来衔接页面之间的变化，减少用户跳转的可行性。
 
方向1:缩短主操作路径，次要功能建立预期，后置操作；优势是层级简单，核心操作聚焦
 
方向2:仅预览图片结果，后置操作；优势是操作路径短
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
2）方案细化与测试
 
根据框架探索我们细化了3个方案：
 
为了更直观的展示，我们制作了3个方案的Demo并进行用户测试，大部分用户认为方案1更直观且简洁。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
3）最终方案展示
 
生成中：展示重新生成、保存等相关操作，建立用户预期
 
生成后：展示生成图片并自动上滑，同时调起装扮预览面板，缩短装扮路径
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
优化后数据对比
 
对比2期方案，优化后方案点击生成按钮直达装扮预览页，缩短装扮路径，上线后日均装扮成功转化率显著提升。
 
当设计遇上AI——百度APP装扮体验AI创新探索
 
 
 
 
结语
 
本文以百度APP装扮体验AI创新探索为例，分享了从设计视角出发，设计师如何结合AI能力进行设计创新，为用户提供顺畅的AI原生体验，并分三步推动项目落地与优化的思考过程。通过本次项目，我们也积累了一些经验分享给大家：
 
1.避免惯性思维，站在用户视角看问题
 
作为设计师，可能我们已经看过、使用过很多AI类产品，对它的玩法非常熟悉。在设计前期，我们常常理所当然的认为用户已经理解掌握生图的方法，结果在测试阶段发现即便是公司内部互联网员工，理解使用起来也有一定门槛。所以我们一定要避免惯性思维，注意时刻抽身站在用户视角，多问问自己：我们的用户群体是否能够快速理解并掌握设计方案。
 
2.用户测试是有效的工具，可以帮助设计师获得更深入的用户反馈，并将其转化为理想方案设计点
 
整个过程中，我们遇到了很多困难与挑战，尤其是在2期输入体验的优化上，在竞品创作体验千篇一律且都不理想的情况下，初期思考的方案均没有达到简单且能直接输入高质量描述词的理想效果，设计思路此时也达到了瓶颈。这时候引入用户测试是一种很好的帮助设计师“换脑”的方式，用户不会直接告诉我们理想方案是什么，但是我们可以从用户的反馈中抽丝剥茧，转化成理想方案的设计点。
 
3.设计方案应尽量简单直观，避免需要用户进行过多的思考和转换
 
通过我们多次的用户测试发现，除了大家熟知的设计方案应该尽量简单清晰、避免过多的复杂步骤和操作以外，还应该尽量避免用户需要思考转化的步骤：比如给一段纯文字示例让用户来生成图片，这个文字与图片生成的效果是需要用户通过思考并转换的，也许生图结果与用户预期天差地别。所以在调研后我们采取了“图生图”的方式，用户喜欢哪张图片，就使用它的描述词来生成相似，这样更加直观，减少在大脑里转换思考的过程。
 
以上就是我们的思考全过程与全部心得，希望对大家做类似AI创新型项目有所帮助。百度AI装扮项目依然在持续优化与完善，欢迎有兴趣、有建议的小伙伴，来找我们一起沟通交流～
 
 
感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。
 
 
关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发



作者：百度MEUX
链接：https://www.zcool.com.cn/article/ZMTYxMDA5Ng==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
评论(0) 浏览(135)

logo设计全流程及案例分析

博博

作者：阳阳设计师
来源：知乎

一、前期调研

作为设计团队，我们知道一个品牌的诞生与发展，每个公司都投入了巨大的资源和心血。logo设计就像父母给孩子起名，被企业寄予了太多的期待与美好的祝愿，它不仅仅是一个图形一串文字，更代表了企业的形象和深厚的文化。因此我们在提供设计方案时，也同样肩负着品牌价值和品牌责任传输的职责，在接到设计任务之后，并不会漫无目的的就开始投入到logo设计之中。而是要对服务的公司进行充分系统的调研。

调研有助于我们对企业的文化、核心、价值观、产品等方面进行全面的了解。根据企业客户的消费行为、喜好，竞争品牌进行分析总结，有针对性的制定创意和设计方案，避免与其他品牌“撞脸”。

给大家介绍几个我经常会遇到的研究方法：

1. 用户采访

通过对客户的了解，团队预先准备一些问题，把那些重要的信息进行记录汇总，这样可以得到第一手的客户需求。客户是很愿意跟设计师进行品牌分享的，但是聊天式的采访往往达不到设计预期，因此我们一定要引导客户进行阐述，一点点把品牌最重要的信息和关键词梳理出来，这个过程对把握设计概念十分重要。

客户案例

2. 领域调研

很多客户表示不了解，为啥设计师可以设计各个行业的logo，甚至很多客户只找做过他们这个行业设计的设计师，其实大可不必这样，因为一个成熟的设计团队，做设计前都会对这个企业进行系统的领域研究，况且任何一个团队也不可能做过所有行业的设计。所以我们常常通过调研系统的了解企业及其上下游的品牌特征，并对此进行拓展梳理，而设计语言与方法是相通的，越成熟的设计师越能进行精准的设计。

（如该领域的视觉偏好是什么，对企业环境及产品进行实地考察，其他竞品的品牌符号有什么共性和区别，企业符号可以从哪些视觉方面进行表达等等）

3. 关键词头脑风暴

以最近给客户做的一个项目“食品加工器械”的logo设计为例，针对这个关键词我们可以想到什么？“机械、科技、食品、高端”等等，根据这些词汇，我们再次联想，拓展出二级、三级的词语，最终找出整个思维导图中最具创新性并符合客户定位的关键词。

客户案例

4. 其他方式

其实可用的方法还有很多，如：实地调研法、抽样调研法、统计调查法、文献调研法等，在这里就不一一列举了。

俗话说：“知己知彼，百战不殆”，我们在了解客户的基本诉求，深度挖掘企业核心价值与内涵之后，才能对企业进行明确的定位。基于此，产出最能代表企业的超级符号。

5. 案例分享

民宿品牌爱彼迎在升级品牌形象时便做了大量的设计调研，为了更好的理解与传达爱彼迎的经营理念，设计工作室Design Studio横跨4个大洲，往返13个城市，试住了18间房子，并与不同国家的爱彼迎员工进行交流。甚至深入爱彼迎公司内部，与工程师、设计师一同工作，共同交流，只为呈现出更完美的爱彼迎品牌视觉。通过长达数月的工作，最终完成了这一设计。

进行了大量调研，我们才有足够的话语权进行创作。我们根据调研的结果，找出最能体现品牌价值的创新点，再开始进入设计过程。

二、绘制草图

调研完成后，为得到最适合的设计方案，我们常常会使用头脑风暴的方式获得设计初稿。在一个集中时间段内，将之前的提取的关键词进行草图创意绘制，使用图形打散、重组的手法，将抽象思维用图形语言表达出来。要求既符合品牌行业属性，又具有创新突破的元素。

草图绘制完成之后，我们会对草图进行筛选，过滤掉实施性弱、美观性差、不够深刻的创意点。挑选出最适合客户需求的方案进行深入。大量的创意会在这一阶段经历打破与重塑，推倒与重来，优中选优，只为呈现最好的方案。

挑选最优方案后，我们才开始进行Logo的下一个阶段——成稿制图，而且会推进几个可行性较高的方案，这样在提案时，方便客户进行选择。

三、成稿制图

成稿制图通常被甲方理解为logo设计的主要部分，因此会觉得设计只是做图，却忽略了设计师在前期投入的大量时间和深度思考，还容易给人产生Logo设计十分简单的错觉。我们也经常遇到这样的客户“logo不就是做个图么，怎么这么贵？”这个时候，一定要跟客户进行沟通，让他们了解到logo设计的全过程是什么，为什么需要花费大量时间，如果客户知道你为此付出了这么多的经历，就会得到他们的理解。

实际制图只是将我们头脑中的想法表现出来，因此这一步骤仅占设计过程的十分之一。

四、细节优化与调整

经过之前的努力，到这时，基本设计方案已经完成。这一阶段主要针对Logo的细节、外形、颜色等方面进行调整。力求设计感、艺术感、实用性相统一。

案例分析

我们来看看苹果公司是如何做的：苹果公司在Logo设计时，将图形定义为一个苹果。但当Logo制作出来以后，图形的辨识度并不高。为了增强图形的识别性，避免让消费者误认为是“樱桃”，设计师决定在Logo图形上增加更多的趣味性，于是“被咬了一口的苹果”应运而生，可见细节修改至关重要。

另外，在基本方案完成的基础上，设计师会制定Logo使用规范，确保Logo在延展应用过程中能够保持高度的品牌辨识度。

以麦当劳为例，在品牌升级前，麦当劳长久以来并没有制定一个严格统一使用规范，不同国家地区的麦当劳Logo也并不相同，这对于麦当劳塑造品牌形象是非常不利的。

因此，麦当劳制定了一系列的标志应用规范，此后视觉上，统一规范的麦当劳变得更加具有辨识度。

为使Logo更具形式美，我们会对logo进行视觉优化。例如黄金分割比例是我们在这一阶段比较常用的手法。

为使Logo设计更理性、科学、美观，我们常常通过黄金分割比例来构建Logo。当事物之间各部分的比例呈现1:0.618的比例时，最能引起视觉上的美感，这一比例充满了理性与感性的统一。良好的比例关系在复制和传播的过程中更加方便快捷，也使后期的加工制造过程更加精准。

以上是我对logo设计流程的介绍，而这些其实也只是logo设计过程中的比较重要的步骤，一些具体的设计细节会根据每个不同的方案也会不同和更加深入，这样大家就明白了，为啥logo设计这么贵了吧，可不是单单一个图例制作那么简单

接下来再给大家分享一些经典的Logo设计案例，一起更加深入的理解那些著名的Logo设计背后的故事，一定对你有所启发～

五、Logo案例分享

1. 百事可乐logo

2006年，百事可乐花费100万美元升级了logo。当品牌视觉手册发布之后，甚至有网友调侃“看完百事的logo设计，终于明白logo的设计费为什么这么贵了。”

新的logo图形不再对称，字体也去掉边角变得纤细。与之前相比，现在的Logo更加扁平，便于记忆。

两条曲线，似是流动的液体，也像是微笑着的人。可别小看这简单的两条曲线，弧度细微的变化都会产生不同的效果。百事可乐还加入了几何角度的思考，通过几何学解释了Logo的原理。

在logo比例关系的处理上，也融入了对哲学问题的思考，从古代阴阳五行说到黄金分割比例，最后到地球能量磁场，小小的Logo蕴含了太多。

但是，Logo还存在一些不足之处，如：单色应用时缺乏辨识度、需要增加边框线使用等问题，导致Logo在具体使用时，会有一定的局限性。


2. 苹果logo

初代的苹果logo描绘了“坐在树下看书的牛顿”这样一副图案。相比于追求简约、便于记忆的Logo，这个图案无疑太过复杂，在传播上也有很大的劣势。可能是意识到了这一点，新logo进行了突破性的改变。

除了图形上创新之外，颜色上也采用了丰富的彩虹色。它标志着第一台支持彩色电脑的诞生。整个Logo营造出了温暖、积极的氛围，为企业注入了旺盛的生命力。

作为一个科技公司的logo，极具科技感的蓝色与边角处高光、阴影等细节为Logo营造出了立体感。

在追求极致简约的时代，纯黑的logo更便于识别记忆。

取代经典纯黑logo的，是具有光泽感的苹果Logo。与之前相比，Logo图形更为流畅、水润。在保持识别性的基础上，整体造型与材质也更加饱满。

随着iphone的推出，高光版本Logo被镀铬效果所取代。

简约、易记的logo图形，也向我们展示了近年标志发展简约化的设计趋势。时至今日，苹果仍延续这一Logo。

去年，苹果公司更是把Logo玩出了花样，动态的、静态的、丰富的材质，让苹果logo“多到用不完”。

因此一个好的logo设计是一定要给logo预留足够多的延展空间的


3. 腾讯logo

在成立20周年之际，腾讯更新了logo。仔细观察字体的笔画，我们会发现，Logo整体倾斜了。7度太小、9度太大，倾斜8度的腾讯字体自带科技感与运动感。

与logo一同发布的，还有一套定制品牌字体“腾讯字库”，这套字体包含了中英日文拉丁文多种类别，通过统一的字体，更好的传达了腾讯的企业个性，强化了企业形象的塑造。

由于汉字都是方正的，因此，在汉字的世界中，斜体汉字的概念闻所未闻。由于斜体的汉字很难依靠传统的字体结构。在文字的正负形、笔画、空间美感方面，设计师需要把握平衡与速度之间微妙的制衡。

在字体的笔画末端进行切角处理。使文字更具力量感与速度感。“腾讯”两字也做出了细微的调整，从笔画、间隔到转角弧度都发生了变化。

腾讯旗下产品众多，但风格形式都各不相同。“腾讯字库”有助于这些项目在视觉形象上的统一。

Logo整体颜色也变成了高明度的蓝色，这个颜色是与色彩机构潘通合作，定制了品牌标准色。蓝色取自海洋与天空，蕴含着极致的理性，体现了对技术精益求精的追求。

来自彩通的国际色彩大师Leatrice Eiseman，也是腾讯蓝的开发者之一介绍道：“它可以非常好的体现出腾讯的原则和哲学，也就是技术方面的精益求精对技术的追求，以及会不断地去追求新的创新。”

由此，还进行了一系列应用部分的延展。


4. 小米logo

小米斥资200万邀请日本设计大师原研哉操刀设计新logo。小米logo刚一发布，便引起了热烈的讨论，只不过是由方变圆，凭什么值200万？

 

我们知道，品牌Logo的升级换代，往往要考虑辨识度对品牌的影响。一旦失去了辨识度，相当于抛弃了原有几十年积累的品牌资产，相当于重新认识品牌。因此，近年来的品牌重塑，都是在保留了原版Logo的识别性的基础上，融入了更具价值的品牌理念。

作为设计行业的领军人物。原研哉致力于在设计中融入东方美学的概念，将复杂的事务化繁为简。深度理解小米“以科技创造美好生活为使命”的品牌理念后，原研哉提出“探索科技与生命的关系”融入“ALIVE”的概念，即接近生命的形态。

Logo中融入最具中国特点的“人情味”，整个logo历时三年，让小米的Logo具有了烟火气息，这也符合小米致力于发展一种高品质、常态化生活的品牌调性。

不仅如此，这个外形还运用到一个数学公式：|x|^n+|y|^n=1，通过“n”的变化来推算Logo进行由方至圆的演变，经过多种对比，最终选择了当n=3时，形成集美感与寓意于一身的Logo图形，也是最具“ALIVE”内涵的代表图形。

小米logo的英文字体也变得更加灵活圆润，而“ALIVE”的理念也贯穿了整个视觉系统，不论是产品展示还是品牌宣传，新Logo都变得更加灵活生动。（视频）

在沿用橙色作为品牌标准色的基础上，融入了具有科技感的黑色与银色作为辅助色，保持识别性的同时也注入了新的活力。

 

5. 麦当劳logo

看到这张图片，第一时间便能联想到麦当劳，在消费者心中，亮丽的金拱门早就形成了视觉符号。作为一个餐饮品牌，麦当劳的视觉设计也不甘示弱。由于疫情，为鼓励公众用餐卫生，麦当劳将自己的logo一分为二拆分成了两个分开的门。

 

通过分解Logo的“M”，在品牌延展上，同样也和其他品牌区分开来，将logo极致符号化。

明亮积极的“M”提高了麦当劳的品牌辨识度，红黄配色与字母“M”深入人心，哪怕只是局部，也能被一眼认出。这得益于麦当劳对于自身品牌的坚持塑造，通过不断的品牌价值输出，来影响消费者的心理。

时至今日，麦当劳形成了强大的品牌识别符号。简约的“m”更具记忆点。

 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

评论(0) 浏览(140)

一篇文章补齐你的平面设计八大构成！｜兰亭妙微UI设计公司

雪涛

一篇文章补齐你的平面设计八大构成！｜兰亭妙微UI设计公司

平面设计是一门艺术和科学的结合，通过合理运用各种设计元素和构成原则，创造出富有吸引力和有效传达信息的作品。在平面设计中，八大构成原则被广泛应用，它们是：对比、重复、对齐、对称、比例、空白、色彩和排斥。

对比（Contrast）：对比是通过相互之间的区别来突出一种元素或一个组合的方法。通过使用对比，可以增强图像的吸引力，并使关键元素更加显眼。比如使用不同的字体、颜色和大小来营造强烈的对比效果。

  1. 重复（Repetition）：重复是指在设计中重复使用一个或多个元素，以增强整体的统一感和协调性。通过重复使用相似的形状、颜色或图案，可以营造出一种重复的节奏感，从而使作品更加有序和有力。

  2. 对齐（Alignment）：对齐是将不同的元素或组件置于水平、垂直或对角线上，以增强整体的组织性和连贯性。通过合理的对齐，可以使作品的结构更加清晰，并使观众的注意力集中在重要的区域。

  3. 对称（Symmetry）：对称是指作品的形态、结构或布局两侧呈现相似或镜像关系。对称可以给人一种稳定和平衡的感觉，它适用于传达正式、庄重和可靠的信息。

  4. 比例（Proportion）：比例是指各种元素之间大小和比例的关系。通过合理的比例，可以使作品达到和谐、舒适和平衡的效果。合理的比例关系可以通过调整尺寸、距离和形状来实现。

  5. 空白（Whitespace）：空白是作品中未使用的空间，也被称为负空间。空白可以帮助调整元素之间的关系，营造出平衡和稳定的效果。合理运用空白可以提高作品的可读性和可视性，并使重要元素更加突出。

  6. 色彩（Color）：色彩是平面设计中非常重要的一部分，它可以通过情绪、情感和意义来传达信息。通过选择适合的色彩方案，可以增强作品的吸引力和表达力。色彩应该符合品牌的形象，并与其他设计元素相互协调。

  7. 排斥（Hierarchy）：排斥是指通过元素的大小、位置和颜色等方面的差异来创建层次感和视觉引导。通过合理的排斥，可以引导观众的目光，使他们更加关注重要的信息和设计元素。
    以上八大构成原则提供了一个设计师在平面设计中创造有吸引力和有效传达信息的作品的指导。设计师可以根据具体情况和目标，灵活应用这些原则，以实现更好的设计效果。
    蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司

评论(0) 浏览(302)

2个方法帮你从历史中学会字体设计｜兰亭妙微UI设计公司

雪涛

2个方法帮你从历史中学会字体设计｜兰亭妙微UI设计公司

引言：
字体设计是一门融合艺术和技术的复杂领域，深受历史的影响。通过深入研究历史中的字体设计，我们可以汲取灵感和经验，提升自己的字体设计能力。本文将介绍两种方法，帮助您从历史中学会字体设计。

来百度APP畅享高清图片
一、研究经典字体：

  1. 深入了解字体的历史背景：
    了解字体的起源、演变和发展历程，可以帮助您理解不同字体背后的文化、时代特征和设计理念。研究不同历史时期的经典字体，如文艺复兴时期的Garamond字体、18世纪的Baskerville字体等，可以获得丰富的设计灵感。
  2. 分析字体的构造和特点：
    细致研究字体的构造和特点，包括字母间距、笔画粗细、字形比例和曲线结构等。比较不同字体的细节差异，探究其设计目的和美感，有助于提升自己的设计技巧和审美能力。
  3. 进行实践练习：
    通过仿制经典字体的练习，可以深入研究字体的细节和运用。选择一款您喜爱的经典字体，用纸和笔或字体设计软件重新绘制它。这个过程中，您将更好地理解字体的结构和设计原则，并能够在实践中掌握相关技巧。

    二、探索地区文化中的字体设计：
  4. 研究不同地区的书法传统：
    不同地区的书法传统具有独特的美感和艺术特点。通过研究中国的楷书、日本的行书、阿拉伯的库法字等，您可以了解不同文化对字体设计的影响，发现新的设计元素和风格。
  5. 掌握当地历史纪录和文献：
    查阅当地历史纪录和文献，了解古代的书法作品和印刷品。这些记录可以帮助您理解当时的字体设计趋势和审美标准，启发您进行相关的创作。
  6. 利用地域标志和文化符号：
    探索地区的标志、传统服饰、建筑风格和艺术作品，寻找与字体设计相关的视觉元素。将这些地域符号运用到字体设计中，可以赋予您的作品独特的文化内涵和地域特色。
    结论：
    通过研究历史中的字体设计，我们可以获得灵感、丰富设计技巧，并提升自己的字体设计能力。通过深入了解经典字体和探索地区文化中的字体设计，我们可以更好地理解不同的设计理念和审美标准，并将其应用于当前的字体设计中，创造出独特而受欢迎的作品。不断学习和实践，将历史中的经验转化为自己的设计语言，让字体设计更加精妙和富有艺术性。
    蓝蓝未来将会持续在平台上分享关于设计行业的文章。此外蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，添加vx蓝小助ben_lanlan，报下信息，蓝小助会请您入群。同时添加蓝小助我们将会为您提供优秀的设计案例和设计素材等，欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
    蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
评论(0) 浏览(336)

多元好玩的科技庙会-好运中国年“新”体验

博博

本文主要阐述我们是怎样通过创新来打造一款具有科技感知多元玩法的百度好运中国年活动。


前言

每当临近春节时，互联网大厂的新年福利活动都会相拥而至，大家在各种活动中红包拿到手软。此时，百度APP的「好运中国年」系列活动也如期与大家见面，毫不吝啬的把“好运”传递给每个用户。

2019年至今，「好运中国年」已进行了五年，每年都会在品牌和玩法体验上进行探索与创新，今年进行了更深入的打磨，给用户一种“新”体验。在设计理念上，通过具有科技感和年俗气息的视觉创新，打造一场百度独有的“科技庙会”；活动玩法方面，较以往也更加丰富，包括了百度经典集卡玩法和多种红包玩法，给用户多元有趣的活动体验。今年春节的活动周期比往年更长，近一个月的好运中国年让用户乐此不疲。



打造好玩好逛的科技庙会

活动初期，我们从产品、用户、社会三个角度进行分析，确定活动的设计目标。

百度APP是百度在移动搜索方向的核心产品，代表了百度先进的搜索技术能力，具备很强的科技属性。今年团队设计的重点目标就是将活动与产品属性相结合，因此今年开始尝试打造「科技感」春节活动；好的活动体验可以加深用户对活动的记忆，为了让用户对「好运中国年」印象深刻，我们结合多种玩法营造科技庙会的氛围；而这么多的活动需要一个“集合体”来承载，“它”既要多元又要契合团队探索的有社会价值的年俗工艺，因此选用了“庙会”这个形式来承载。

经过分析，最终确定以好玩好逛的“科技庙会”作为本次活动的设计理念，给用户“新”的体验感受。



来场对“科技庙会”的探索

“科技庙会”是什么样子呢？通过将词拆解的方法，以“科技”和“庙会”为关键词进行思维发散，想象以什么样的视觉来呈现今年的春节活动。



探索过程中尝试AI绘画，用新的科技手段辅助寻找灵感。



定调

经探索，庙会的图像特征越来越清晰，它是一场热闹的具有多元文化载体的文化现象，拥有像舞狮/台戏/商铺/古楼/灯笼/风竹等事物，是民间艺术的结合体，描绘了老百姓新年期间的市井生活。



「科技感」则是一种视觉感知，既可以通过点、线、抽象图形进行感受，是粒子、发光体、光环、全息；又可以通过机器人、移动设备、全息屏幕等具象物体体现，是图形元素间的动态穿插或是一种变化发展的趋势。



我们将射线、光环、粒子、全息图像、速度感图形等元素植入具有人文特征的庙会中，切入“科技庙会”主题风格，进而确定视觉调性。

最终通过KV将探索的“科技庙会”视觉调性展示出来。打造出的视觉情绪是新奇热闹的，整体营造一场充满科技氛围的春节集市。以兔子形象IP为故事主体，讲述一个“兔年春节逛科技庙会”的世界观。通过“兔子舞狮”、“古镇建筑”、“商品小摊”等元素来体现庙会，道路上的全息路标、远处向上延伸的科技立光、城市建筑上的悬浮光圈来增加科技感。



定义“科技特色”的品牌体系

从确定设计理念开始，今年「好运中国年」的品牌设计就被贴上了“不一样”的标签。有别于往年的关键点是，需要在字体、图形和IP上充分体现今年“不一样”的“科技感”。

品牌字体

首先把“科技感”植入品牌字体中，形成独特的字体风格。“科技”体现的是一种发展与进步、速度与前进，代表了“硬”实力，我们把这种气质体现在今年的品牌字体中。与去年较圆润的字体相比，今年的字体更为硬朗，在此基础上字的斜度统一为12度，起落笔则用“尖角”延伸，整套字体现出科技创新带来的活力激发。



品牌图形

辅助图形是品牌的重要记忆点之一，能够强化品牌特征，提升用户对品牌的认知。今年的辅助图形保留了去年的基础形，不一样的是增加了「科技感」特色的图形元素，结合点、线、以及方格符号元素，进一步烘托科技氛围，在延续去年视觉感受的基础上增添了新的概念。



UI组件也注入科技感，在红包、btn、辅助入口等组件中增加科技感点线元素的点缀，信息载体使用半透明效果的异形面板，指引箭头则运用马赛克表现形式。将这些UI组件进行复用，科技气质贯穿到各活动中，确保在不同玩法上呈现统一的视觉感受。



品牌IP

今年的活动IP形象更具亲和力和辨识度。在兔子形象的设定过程中我们尝试多种头身比例，最终选用的比例为2:1，大头形象在面部特征和表情上能够体现更多细节，使整体更具亲和力，同时也可以让科技感的全息眼镜显得更为突出。IP贯穿活动始末，起到统一活动主题调性、强化引导，增加新年氛围和亲和力的作用。



旧瓶装新酒：经典重塑，打造多元好玩的集卡活动

集卡是百度历年春节的经典玩法，是用户最喜爱的玩法之一，也是「好运中国年」系列活动中在线时间最长的活动，无论在视觉还是玩法上都要更加丰富多元。

[一] 玩法升级，传承创新

过去两年中，活动采用双层卡玩法，集齐「好」「运」「中」「国」「年」基础卡后合成高级卡，集齐高级卡后奖励会翻倍。然而通过洞察研究发现，用户在高级卡阶段容易失去热情、感到无聊，由此发现高级卡阶段的活动体验仍有改善空间，因此尝试在今年进行了“新”的玩法体验创新。

今年团队在传统集卡玩法上探索变化，传承经典的同时，提出“新”的集卡闯关玩法。用户集齐「好」「运」「中」「国」「年」基础卡后，开启新的阶段，合成高级卡获得新春祝福语图鉴，通关全套祝福语图鉴获得终极奖励，同时整体降低集卡难度，让用户更容易玩下去。



[二] 传统工艺，氛围拉满

“新酒”还体现在工艺的多样上，与去年单一的年画工艺相比，今年的集卡高级卡场景中展示了四种工艺，汲取了庙会中出现的民俗文化和民间艺术品-剪纸、灯笼、爆竹、团扇。通过科技感的全息影像将每个场景串联，打造了一种科技庙会的感知。四个场景从家到国，层层递进，各场景结构源于品牌logo的熊掌元素，向用户传递着年俗文化、透传品牌，宣扬科技兴国的理念。



灯笼

说到春节，家家户户都会准备各式各样的灯笼来期盼阖家团圆。

因此活动中选择灯笼做为构建高级卡场景一的主元素，同时也是文字的主承载物，每个灯笼呈现不同的造型，「团」字的兔子造型和场景中的兔子IP，来呼应兔年生肖。通过地台上的庙会建筑和糖葫芦等元素的结合营造出庙会年俗氛围。

卡片则采用了较高挑的灯笼轮廓做为基础造型，强化卡片属性，也能够更好的承载文字和品牌的透传。



剪纸

剪纸艺术作为高级卡第二个场景的视觉呈现，带领用户感受其丰富内涵，感受设计对民俗生活的理解、对生活之美的追求。

场景中高级卡下端增加了以全息影像方式展现的庙会场景，同样营造出科技庙会的氛围。



爆竹

随着春节的脚步越来越近，人们最期待的便是新年的第一声爆竹，中国的爆竹文化，蕴含着华夏儿女的精神寄寓，表达着所有民族的共同期盼。近年来，随着大众环保意识的加强，爆竹声已离我们逐渐远去。因此，“爆竹”元素做为第三关高级卡的主元素，目的是为用户营造久违的爆竹带春声，配合一席冬雪，向用户描绘大自然对大地和人类的厚爱。



团扇

团扇是中国传统工艺品及艺术品，有着深厚的文化底蕴。同样寓意着吉祥如意。结合卡面文字，第四个高级卡主元素被设定为团扇。其外观分别为圆形、花瓣形、芭蕉式等。通过设计手法展现团扇的刺绣工艺，细致到边角和装饰。而场景层则通过掐丝珐琅的形式向用户展现了祖国的大好河山。卡的后面还点缀了具有科技属性的卫星元素，预示着未来科技的蓬勃发展。



[三] 科技庙会，独具特色

集卡是好运中国年系列活动中最先与大家见面的，为了让用户了解陆续开启的更多活动，我们在集卡活动页下方开辟了一个活动聚合专区，在设计上将传统与科技融合，打造了一个丰富又独具特色的庙会场景。前期提炼的科技元素转化为环绕道路的彩色全息路标，行驶中的百度无人车，LED光感的庙会建筑等，与各活动入口共同打造一个科技感十足的庙会街道。



亲朋共团圆：疫情后我们第一次团聚

在过去新冠疫情肆虐的三年中，大家与亲人朋友团聚的机会变得格外珍贵。在后疫情时代的第一个新年，活动从除夕到元宵节，逐步开启多个红包福利活动，与去年相比，在玩法上更多样，增加了3个邀好友和2个红包雨活动，为用户与亲朋创造了丰富多样的线上互动场景。

除夕和元宵节是春节的首尾时刻，通过红包雨游戏为用户发放福利。在除夕夜，特别开设了多个时段的大额红包玩法，用户与家人一起守岁抢红包、迎接新年到来。



团圆红包、新春大红包、开工领红包，是春节系列活动中的3个各不相同的邀好友活动，我们通过差异化的设计形态，向用户呈现丰富多样的红包福利。



在春节假期到来前，团圆红包活动的互动方式主打线上分享，提前为用户创造与家人线上联系领福利的场景。

而在春节假期后期推出的扫码领红包活动中，迎合朋友见面聚会场景，设计上强化扫码互动方式，便于线下面对面拉好友参与。

开工领现金是今年百度春节新增的特殊玩法，贴合新年后开工利是的现代习俗，吸引用户向身边的同事朋友分享这份好彩头。

年俗文化链通全局

当然这些活动的视觉也少不了科技和年俗文化的碰撞，将这些细节元素贯穿在各个活动中给用户更加统一完整的沉浸体验，如此多的年俗物件，是在去年活动中没出现过的。



倾听用户声音，点滴之中打磨更好的细节体验

今年的“新”体验也体现在我们的细节打磨上。秉承用户体验至上的原则，从去年春节活动开始，团队尝试通过投放问卷了解用户参与活动的感受，在今年为用户打造了更好的细节体验。

通过细致入微的设计思考、克制的细节处理，打磨出「更简单」、「更生活」、「更生动」的体验。在今年的体验反馈中，获得了很多用户的称赞。



[更生活]

更生活体现在高级卡的场景设计上，将灯笼的点亮态和未点亮态通过颜色和质感进行区分，通过集卡逐一点亮灯笼，制造小的惊喜点，寓意照亮全家人的平安与幸福。



[更简单]

为了让活动更易于上手，我们将主页和弹窗中的主按钮文字放大，提高主按钮的视觉层级，这种设计让白发人群也可轻松参与到活动中。



同样的，扫码活动中二维码的展示也进行了放大处理，节省了点击再放大的步骤，更便于识别和用户之间的面对面分享。



[更生动]

在红包雨活动中，为了保证用户的游戏体验，使用了二维游戏引擎，增强动画流畅度。同时在多种道具上增加了点击实时反馈，强化道具的生命力。



在开工领红包活动中使用动作捕捉数据，让人物的动作更真实，更灵活。同时设计了金币的碰撞反馈，提升用户的点击感和爽感。给用户更好的游戏感体验。




作者：百度MEUX来源：站酷网

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

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

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
评论(0) 浏览(351)

设计中的配图知识

博博

前言

配图是我们平时在设计工作中经常用到的，一个好的配图很多时候会直接影响到一个作品的好坏，图片本身也是一种视觉语言，通过学习跨领域的知识可以帮助我们提升自身所处的领域设计能力，本篇文章和大家讨论一些构图和景别知识，通过对这些知识的了解判断如何选择一个好的配图以及怎么应用好配图，大多数设计师选择配图时都是凭着主观意识在选择配图，你所选择的配图很大程度会受到你的主观意识的影响，这些主观意识来源于自身审美、文化、环境等因素的，因此在我们的主观意识基础上，应该具备一定的客观依据来帮助我们更好的选择合适的配图。

构图与景别知识在摄影、绘画、影视中应用很多，但很多设计师容易忽视这些知识，这些知识看似是摄影、绘画、影视等行业的知识与设计好像没太大关系，这些知识也是很有必要学习的的理论知识，对构图景别的理解很大程度会影响你能否把握好设计画面中的配图，配图本身也是一种视觉语言，提升构图和景别知识对设计师整体综合实力提升是有帮助的，当你做三维和插画等设计时同样也会用到这些知识，了解这些知识会让你以客观依据的角度，运用和判断设计中配图的好与坏。

01 关于构图

目前来看几乎所有的艺术或商业作品，无论是摄影、绘画、CG等都离不开画面的构图与结构，你甚至能在很多绘画大师的的经典作品中看到他们作品中也使用了构图理论，合理的构图作品，给观众美的视觉享受和与众不同的情感体验，同时提升画面表现，关于构图的知识很宽泛，构图方式方法也非常多，有的作品中可能包含多种构图形式，这里给大家大致介绍一些常见的构图知识，目的是抛砖引玉让大家意识到良好的构图能平衡画面同时，传达出更清晰明确的图像信息。

1.1 中心构图

中心构图是将画面主体放置在画面的视觉中心，让主体成为整个画面的视觉焦点，通过周围环境氛围烘托画面主体，这种构图形式聚焦主体，能更好的凸显画面主体。



1.2 一点透视

一点透视构图有较强的空间感和纵深感，画面的元素会向中心聚焦，会把观众的视觉引导向画面中心，比较适合表现画面空间感。



1.3 黄金法则

黄金法则构图遵循古希腊学者毕达哥拉斯的黄金分割比例进行构图，也就是我们常说的 0.618:1，黄金法则构图有采用像三分法那样井字构图，还有采用黄金螺旋的构图方式，构图时将主题放置在黄金比例焦点或线上。



1.4 对角线构图

对角线构图中主体在画面的对角线位置排列，对角线构图视觉冲击强，具有动感和不稳定性，更使画面更有趣味和视觉张力。



1.5 三角形构图

主体在画面中呈三角形状，正三角形构图画面更具稳定性，反之倒三角形构图会使画面有紧张感和不稳定性。



1.6 字母形构图

字母形构图画面呈现字母形态，不同的字母构图会给观众带来不同的视觉感受，S 形构图是一种比较常见的构图形式，S 形构图迂回延伸使画面产生优美、雅致、韵律感。



1.7 引导线构图

引导性构图利用画面中有形或无形的线，引导观众的视觉聚焦到画面的重点，引线不一定是一条线，它是一种具有引导性的东西，光影、道路、河流等都可以做为引导线，引导性构图视觉表现强，引导观众视线突出主体。



1.8 三分构图

三分构图是最常用的构图方法，结构由两条竖线和两条横线构成，形成一个井字，也叫井字构图法，在三分构图中主体通常放置在四个交点上或线条上，三分法是比较常见的构图形式，可以在很多摄影和绘画作品中看到。



1.9 对称构图

对称构图是根据对称轴，使画面形成的对称的构图形式，比较常见的对称构图上下对称、左右对称，对称构图具有平衡性、稳定性、均衡性。



1.10 水平线构图

水平线构图也是比较常见的一种构图，水平线构图通常表现宽广的场景，地平线、海面、湖面等主题，水平线构图给人宽阔、稳定、平静、舒适的感觉，水平线构图主要是是采用横画幅来表现。



1.11 垂直线构图

垂直线构图中主体呈现为垂直的线条，垂直线构图给人高耸、庄严、挺拔的感觉，具有较强的视觉张力，锤子线构图常采用竖画幅来表现。



1.12 十字形构图

十字形构图是水平线和垂直线的组合，十字形构图画面会给人平稳、安全、严肃、神秘的感觉。



1.13 夸张透视

夸张透视会以比较特别和夸张的的视角表现画面和主体，使画面整体都具有强大的视觉张力和冲击力。



1.14 虚实对比

虚实对比通过主体和背景的间的虚与实对比，从而突出画面主体，虚实对比使画面更有层次和空间感。



1.15 明暗对比

明暗对比通常以暗衬托明，在视觉感受中越暗感觉离我们越远，越明亮感觉离我们越近，明暗对比对比可以使画面更有立体感，层次感等，通过画面中的明暗对比形成的强烈反差，可以凸显画面中主体，引导观众视线到主体上。



1.16 色彩对比

色彩对比中包含三个要素色相对比、纯度对比、明度对比，同时根据色环中的色相变化，还可以分为同类色对比、邻近色对比、对比色对比、互补色对比，色相角度变化越大对比月强烈，通过色彩对比可以突出画面重点、丰富画面、提升画面层次，背景色彩与主体色彩形成对比，能凸显画面主体。



1.17 奇数原则

奇数原则画面通常是一个、三个或五个主体，通常不超过七个，超过七个时观众会将其视为一个整体，当画面中为主体为奇数时，在视觉上会比偶数更和谐、更美观。



1.18 视觉引导

视觉引导通过画面内容引导用户视觉，视觉引导形式有很多种，人物或动物直视、运动方向、肢体语言等，都可以引导用户在观看画面时的视线运动。



1.19 大小对比

通过大小对比使主体与周围元素形成差异化的视觉冲突，同时大小对比中的次要元素还可以作为比例参考，突出主体的大小，强烈的视觉落差增强版面节奏。



02 关于景别

裁剪图片为不同景别的图片对板式设计也有很大影响，不同景别的图片传达的视觉语言也是不同的，哪怕是图片朝向的位置都值得我们仔细思考，在配图时我们要思考通过图片传达什么视觉信息给观众，所以在我们做设计时，要想清楚当前页面要传达什么样的信息从而采用什么样的景别。

2.1 大远景

大远景通常表现广阔气势宏伟的场景，大远景的空间感非常强，强化景物与环境的关系，主体相对较小与场景形成强烈的大小对比。



2.2 远景

远景营造主体与场景的关系，通过画面场景叙述主体和场景的关系，远景具有较强的空间感，具有开阔的画面场景。



2.3 全景

全景通过场景来体现主体的处境，利用人物和场景的关系强化主题，全景中主体会被强化形成明显的内容中心，从而弱化场景。



2.4 中景

中景表现主要表现人物膝盖以上，在中景中人物在画面中的占比更大更为突出，人物会被强化，同时弱化场景。



2.5 近景

近景主要表现人物胸部以上，画面中人物或主体会占有主导地位，强调人物的情感特征，通过细微人物的动作、肢体语言、表情等表现画面主题。



2.6 特写

特写主要表现人物肩部以上或主体的细微部分，主体被放大，场景弱化到难以分辨，强调主体的情感、心理或产品的工艺结构等。



2.7 大特写

大特写会将主题放的更大，展现主体的局部细节，大特写具有强调和突出主体细节特征的作用，具有极强的视觉效果。



写在最后

配图知识是设计师在平时工作或设计练习中必备知识，很多时候我们在选择配图时完全是凭感觉在选，图片也是一种视觉语言，作品整体质量也会受到配图的影响，本次配图知识分享希望能帮助大家在之后选择设计配图时，在主观意识判断的基础上有一个客观的依据，写这篇文章的同时，我也正好根据文章大纲做了一套板式练习作为文章配图，最后给大家分享几个高质量的图片网站（需要翻墙）

图片网站分享

摄影类图片
https://unsplash.com/
https://burst.shopify.com/

CG类图片
https://www.deviantart.com/
https://wallhaven.cc/


作者：Tomato76      来源：站酷



蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作，也请与我们联系01063334945。 



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



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

评论(0) 浏览(522)

科幻机甲风格海报怎么做？

seo达人

图片

我们在去做这种类型的风格时，要学会总结，机能风的海报版面虽然整体呈现较为复杂的效果，但如果仔细观察，基础的元素都比较简单。

 

大家在做之前可以去先总结，通过观察这类作品可以得到以下元素，比如：

01. 电子元件/芯片

02. 机械感元素

03. 不规则标签

04. 警告符号，装饰性符号等

05. 黑白灰及荧光色的搭配使用 

 

图片

然后我在准备教程案例就开始画呀画，画了蛮多适合应用在机能风格海报中的元素，最后干脆想了一下，那就索性把所有的画完，源文件都送给大家吧…

教程突然就变成了素材分享…

下面我们来先看一下本期分享的素材，总共分为四个部分，每个部分的形状细节都有不同的差别。

图片

图片

图片

图片

但是下载素材只是第一步，很多同学平时电脑里也攒了不少素材了，误以为收藏等于学会，下载等于精通…

设计毕竟是个手艺活，还是要动手试试才知道怎么使用。

 

 

图片

01、首先我们从我给的素材里面挑选几个元素，我这里选择了三个，大中小。

图片

02、人物抠图后，先观察一下，人物本身自带了黄色的轮廓光，那么主色我们就尽量要选择黄色了，画面才会有合理性。

图片

03、这一步就是将图形按照较为平衡的构图方式进行放置，可以和人物有适当的叠压穿插关系。

为了避免图形太过零碎，强烈建议大家可以先以一个大色块为主，可以避免主体散乱。

图片

04、接下来将文字信息进行空白处放置，注意这里比较主要的信息就三块，人名，活动名称，时间地点，编排上主要突出这三个部分即可。

多余的装饰性英文信息适当缩小，起到一个点缀的作用就可以了。

图片

05、最后添加一个纸张褶皱的效果，因为我元素及色彩处理的比较简单，所以加深质感的处理，可以让海报更有层次感。

图片

 

 

 

图片

接下我们看第二个案例，这个案例我打算使用元素拼接的方式让画面更整体，细节可以适当处理多一些。

01、老规矩，开始挑选图形元素…

挑元素的过程确实是…太爽了，怪不得大家这么喜欢素材，尽管素材是我一个一个画的，但是我挑的时候也感觉…太方便了…

这里我顺便将元素组合了一下并且加了个颜色。

图片

02、如果只是在画面中间这样放置的话，四周缺乏呼应的元素，所以大家可以根据已经选好的图形特征自己简单画一些。

效果如下，是不是感觉完整性好多了。

图片

03、然后图片放置进图形中，图片整体也是呈现红色调的，所以整体的色彩和元素我已经用了红色，那么建议重点的信息在这里都用白色，可以简单做一个色彩突出的作用。

无论装饰元素和文字有多少，最终还是要想办法突出重点信息，这两者本身并不冲突。

图片

 

 

图片

看第三个案例，先选元素。

01、顺便选一些简单的图形装饰元素，比如箭头条形码等。

图片

02、这个图片本身已经蛮好了，底色也很简单，所以我不打算抠图了。

图片

03、接下来注意观察图片，底部有大量的黑色，所以我们的标签部分可以直接放图片下方就可以了。

其余文字环绕人物进行编排即可。

图片

04、正在这个案例中，我想添加一下类似毛玻璃和磨砂的效果，增强图形的质感。

图片

05、按照这个方法，我为其他地方也添加了这样的磨砂效果，下图为最终效果。

图片

 

 

图片

01、看第四个案例，先选元素。

其实我个人还是更喜欢这种带圆角的感觉，感觉有点高端的样子…

图片

02、将元素和人物图片进行合理构图，其实就是控制每个元素的大小和位置，放置他们的错落感，保证人脸不要被色块遮挡，文字信息顺便也放置进元素中即可。

图片

03、还是按照上个案例做磨砂效果的步骤，我们再加几处磨砂效果。

下图为最终效果。

图片

04、注意这里的磨砂效果除了加描边，我还加了投影，让整个画面的色块错落有点纵深感。

图片

 

 

图片

01、第五个案例我们换一下人物…一个题目做了四个案例,估计大家已经看腻了…挑几个图形元素。

图片

02、我们将图片和元素做一下结合处理，人物的部分我做了错位的处理，有点视觉迷幻的效果。

人物名字放置图片顶部即可。装饰性文字可以适当的跟元素做一个整体排版处理。

图片

03、最后，老方法，再加几个磨砂效果，你别说…这个效果确实有点上头，普通人受不了这种诱惑…

不要怪我非要做的花里胡哨，花天酒地也不是我想要的方式…

图片

 

 

图片

01、第六个案例，还是…

挑几个图形元素…

图片

02、人物图片本来是这个样子，背景是白色，不好处理整体的色彩变化，而我…也不想抠图…

所以在ps里加了一个渐变映射效果。

图片

03、图片用一个元素，标题用一个元素，这样就做好了构图排版处理。

图片

04、但是到这一步，画面还是会有点空空荡荡，填充一些呼应的元素即可。

最后，再加入纹理的效果叠上去就可以了。

图片

 

 

图片

01、第七个案例，挑几个细节较为复杂的元素，这次我们是单独拿来做背景使用。

图片

02、为了做出层次感，可以给色块适当添加渐变色和投影，有点立体的效果会更好，因为本来就都是偏白色的，没有投影和渐变的话效果不明显。

图片

03、重点信息我们就用以复本来的颜色就好，可以多一点装饰性元素作为点缀，不然白色的背景还是有点空，有一些点线面的变化版面会舒服一些。

图片

04、最后…

再加几个磨砂玻璃效果…

这次我是真的腻了腻了…

图片

 

 

图片

01、第八个案例，元素选好之后，我这里直接处理了渐变的效果，作为背景，有了一点质感。

图片

02、黑白的人物放上去就很适合，这一步我们就搞定了背景和人物的画面整体处理。

图片

03、然后将文字编排进画面中，但是整体除了黑就是白…

颜色有点太单调了，所以我们要换换颜色。

图片

04、这个颜色…

就…

挺好…夜店风的感觉…

图片

 

 

最后来放一下合集

图片

 

 

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

作者：王猛奇

转载请注明：学UI网》科幻机甲风格海报怎么做？

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


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

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



评论(0) 浏览(919)

P了两个圆，价值800万？

seo达人


下面这两个圆大家可能不熟悉，这个是万事达的最新logo，就是由两个圆组成，价值800万。那为什么两个圆形能够价值这么多，今天跟大家聊聊，几何在整个设计中的运用，怎么让你的图形更高级。

图片

图片来源于网络，版权归作者所有

 

一、几何简史课 

欧几里得常被称为“几何之父”，因为他写了一本叫《几何学》的书，这是数学史上最有影响力的著作之一。

图片

几何图案来源于几何学，几何学是数学中对形状和线与面之间关系的研究。图案被定义为“重复的装饰设计”。

在设计中，几何图案反复使用形状和线条来创造引人注目的设计。几何图案非常适合用于设计，因为从本质上讲，我们的眼睛自然会被它们吸引。通过将几何图案与合适的颜色相结合设计引人入胜的视觉内容。

图片

世界内外的一切都可以通过数学来推断和理解，这正是许多文化将几何视为神圣的原因，从一开始就被人类直观地使用和理解。

因此，几何形状和图案在艺术和设计中具有很大影响力。从伊斯兰艺术到包豪斯运动、立体主义、装饰艺术等等，几何图案一直并将继续在设计中发挥关键作用。

图片

我们可以将几何设计用于从品牌到产品、插画、网站、应用程序设计等等的任何设计中，下面带大家看一些几何图案在不同设计环境中的运用案例。

 

二、几何在设计中的运用 

1、平面设计

图片

杂志封面设计结合了三角形和充满活力的各种配色，创造出炫酷的图案，色彩缤纷的效果。

图片

平面设计师 Atul Charde 设计的长途汽车，展示了几何图案可以很好的吸引人的注意力。Charde 还结合了黄色、橙色、海军蓝和白色的配色，创造出一种正在忙碌行驶的感觉，很生动形象的体现了长涂汽车的概念，十分契合产品。

图片

几何设计也非常适用于包装上面，用简单的形状组成复杂的图案来包装产品。

图片

这瓶酒使用简单的线条来创造一个有趣的几何图像。这是一个很基本的设计方法，但通过巧妙地结合颜色填充几何形状，设计感就出来了。一个复杂的图案就是由一个简单的图形组成的。

图片

图片

卢塞恩纽巴德俱乐部音乐会系列海报，用绘画与几何的结合，表现了音乐的非常规和自由特点。

闪电形、星形、三角形表达音乐的激烈抑扬顿挫感；圆形、传达音乐的平静、缓和感；自由笔触有序直线，传达音乐的有序、绵长感。

 

2、品牌

图片

Nymble 健康套盒品牌视觉提取品牌首字母“N”与人奔跑时的姿态结合，虽然是简单的几何线条和点，却非常有动感，简洁而传神。

图片

图片

图片

品牌延展部分是对品牌标志更进一步的理解和演绎，沿用了标志中的点、线元素，通过对点与线的位置、距离、粗细、大小的调整，构建出一整套可变的网格图案。

图片

图片

涉谷时装周2020-2022的视觉设计用圆形几何化的视觉语言，将SFW2020组合成图标，并拆分重组成为辅助图形，运用到画面整个体系中。从2020-2022，通过不同视觉展现不同的视觉风格，2022的工业鬼马感、2021休闲时尚感、复古都市感。

图片

图片

玻璃质感和几何图形的结合完美诠释主题，体现宏大精致的美。元素简洁，通过细腻的质感增加丰富的对比。

图片

图片

这是一款国外的披萨品牌的logo设计，特别之处在于logo的名字和图形看似分开，实则是用一个邮票作为一个整体。图形的人物是一个由几何组合，用黄金比例切割出年轻妈妈的样子。

图片

图片

图片

这是国外的一个茶饮品牌的包装设计，插画的人物服装和植物元素是当地人的特点，设计师将这些具有丰富变化的民俗服装用几何图形有规律的重新组合。

通过将复杂的事物用几何有规律的概括后，再通过合适的配色，呈现的整体设计感很强。同时在文字以及装饰框上，也统一用了这种具有民俗风情的风格，在字体上也会用几何作为流苏一样去代替字母一部分的笔画。

 

3、插画

图片

图片

简单几何元素拼缀出的人物、场景，色彩上深浅深的对比，图形上方圆方对比增添了画面的呼吸感和视觉冲击力。

图片

图片

这种风格的插画区别于以往的插画风格，整体是几何体和不规则形状组合而成，噪点的运用和颜色的搭配完美，夸张的手法，大胆的设计让它脱颖而出。

图片

无论是简单的图案还是复杂的图案，几何设计都可以完美地制作出引人注目的壁画。

 

4、网页设计

图片

图片

这个网页运用极细的线条，规则的块面，将界面的功能展示区域分明，简约不失严谨，传达出品牌的专业度。

图片

B端设计的页面采用圆角卡片，以及大规模几何体使用，界面立体感和层级感比较突出，立体几何插画的表现效果很好可以在UI中运用。

图片

配图用三维几何体，搭配很年轻化的色彩风格，显得画面感很强。整体色调很舒服，界面干净整洁，很年轻。

图片

图片

这组网页设计首屏融入几何元素包裹着主图，灵动多变的几何装饰打破惯性的设计思维，创造出新奇的视觉效果。

图片

图片

这个体育网页头部使用红色和黄色，运用对比色，视觉冲击力强，使用三角形和异形，简单的几何图形，营造页面的空间感。

图片

图片

背景采用柔和的微渐变点缀淡淡几何图形，既不会喧宾夺主分散用户的注意力，又可以避免纯色背景的单调。

 

5、UI设计

图片

这个绿植商店页面采用大圆角搭配圆润的线性icon，用几何拼接形式表现插画，整体风格自然简洁。

图片

这个医美产品的UI设计，按钮和产品的背景沿用同类型的几何图形，类似超级符号的存在，加深品牌印象的同时，打破常规背景图的形态，使页面充满生机活力，贴合医美产品赋予肌肤青春活力的初衷。

图片

从画面感来看，有点像游戏或者娱乐产品风格的界面。背景用很多几何元素符号，画面感很活跃。

图片

这组启动页设计，通过人物和几何图形穿插，突出人物主体，拉开主体和几何形的层次感；并运用色彩叠加的方式，画面更具青春、趣味和视觉冲击力。

图片

图片

这是一款体育运动场馆预订的产品，用几何形状表达不同的运动，简约又生动，也与整体高级感匹配。

图片

几何插画设计风格，头部卡片像一个抽象的人物，整体风格偏年轻化，卡片和背景生动有趣不单调，颜色多彩充满活力。

 

三、最后 

今天的分享就到这里，期待每天一个小知识点，可以给你的设计路上增加一点点能量。

 

原文地址：我们的设计日记（公众号）

作者：叮当猫

转载请注明：学UI网》P了两个圆，价值800万？

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


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

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

UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司



评论(0) 浏览(890)

必看的线上图片使用攻略

纯纯

1-线上图片的四大类别

2-线上图片常见的五种处理方式

3-线上图片使用的五大要点

4-总结



一、线上图片的四大类别



1、 信息图片：


在页面中单独存在的图片，以图片为主要元素传达给用户有效信息。


例如好好住APP，它在“看图板块”中就使用了信息图片，重点表现图片的信息，周围无任何干扰元素或辅助信息元素。

 

2、 背景图片：


背景图片可以用于单个元素，也可以用于整体画面，主要作用于营造氛围。


单个元素：例如嘀嗒出行的“优惠券板块”，把插画图片应用在单个卡片中。


整体画面：例如网易云音乐的“听歌页面”，它就把歌曲封面的图片作为页面整体的背景。（图片进行了模糊处理）

 


3、 Banner图：


作为导航入口，引导用户点击进入详情页面，在各应用都普遍使用。


Banner图作为最常见的图片使用形式之一，大家再熟悉不过了，它可以出现在APP中的各个界面中，如：首页、个人中心、运营活动页等等，造作新家APP的首页就用到了banner图。


 

4、 信息配图：


作为文字的辅助元素，图片的含义需要和文字相符合才能更好地辅助传达文字的意思，反之会让用户觉得困惑。



二、线上图片常见的五种处理方式


1、图片遮照：


1-1黑色遮照：

图片与文字之间加黑色到透明度（10-60%）的遮罩，保证文字内容区域在黑色区域，目的是为了能让用户看清文字。

 

1-2颜色遮照：

根据图片整体的色调，在图片上加与图片色调统一的颜色遮照，保证文字的可识别性，不影响图片的正常显示。 


1-3渐变遮照：

图片与文字之间加透明度的渐变遮罩，让文字显得更加清晰，使画面过度更加协调。


 

2、背景模糊：

在很多场景下我们都会采用到封面图模糊处理后作为背景图的方案，为保证信息能够清晰显示会在背景上加一个深色半透明蒙层。半透明层可以取黑色、深灰色、背景颜色（深），透明度为（25%-40%），它们呈现出来的效果都各有不同，我们可以根据不同的场景选择不同的方案。


3、图片圆角：

图片圆角的使用也是十分有讲究，根据不同的产品属性去设定气质相符的圆角设计。


小圆角或直角：视觉印象是硬朗、高冷、具有攻击性的，多用于时尚、高端、冲突感强烈的设计中；


大圆角：视觉映像是有亲和力，柔软，安全的，多用于母婴产品、二次元产品、娱乐性强的设计中。

 

4、内容出界：

在设计banner图时我们如果只是在框框里做设计，有时候未免显得太呆板，我们可以突破画框让内容溢出，营造更大的氛围，近而使整个画面更具有冲击力。

 

 5、投影

图片投影的方式一共分为7大类别，分别为：普通投影、等高线投影、矢量投影、图层模糊投影、多层投影、移轴模糊投影、手动投影。（投影制作步骤可查看我之前发布的文章《七种投影详细解析》）。而在线上运用的最多的就是：普通投影、等高线投影、图片模糊投影，效果如下：



三、线上图片使用的五大要点


1、文件大小

对于位图，我们在线上场景中最常使用的文件格式无非是PNG与JPEG（在特殊情况下会用到动画GIF）。

 

PNG图片：

无损文件格式，我们UI设计师出图的首选，不会轻易造成细节像素模糊或输出文件变色的情况，并且支持alpha通道（透明度）。所以对于高质量图像文件建议输出为PNG格式，不过正因为像素无损，所以PNG文件大小相对较大，在特定情况下可以选择8位处理的做法来减小文件大小，在保证尽可能缩小文件大小的同时，也不会降低图像质量。

 

JPEG图片：

JPEG格式会损失掉图片中的一些像素细节，所以输出JPEG通常会比输出PNG的文件大小更小，适用于对于图片质量要求不过高的场景。并且JPEG格式支持对文件质量进行二次压缩，我们可以选择使用JPEG格式质量压缩的方式，在文件大小和图像质量之间找到平衡。


2、比例


UI界面中常用的图片比例是1:1、3:2、4:3、16:9。


1:1

1:1是传统的120胶片画幅，也叫大画幅，因为相机结构和其他一些原因导致了胶片是方形的，此比例更容易将构图规整的简单，能突出主体图片，通常用于头像、电商图片等。


3:2

3:2这个尺寸源于135胶卷的比例，采用这一比例并不是因为它是黄金比例，而是由相机的像场大小决定的，这个尺寸运用到线上时适用于以内容为主的应用。

 

4:3

4:3是随着摄影的发展，微单的出现而诞生的，3:2尺寸与4:3尺寸极为相似，在做设计时很容易混淆，不过在同屏显示中，4:3的图片内容显示略大于3:2，所以4:3尺寸更适用于以图片为主或图片与内容比重相同的应用。

 

16:9

16:9是根据人体工程学的研究，发现人的两只眼睛视野范围是一个长宽比例为16:9的长方形，所以电视、显示器行业根据这个的黄金比例尺寸设计产品。这个尺寸的图片在线上运用于视频播放的图片显示。


3、栅格系统


栅格系统以规则的网络阵列来指导和规范版面布局以及信息分布，而UI设计里常用的栅格系统是从平面栅格系统中发展起来，栅格系统有时候也称为网格系统。


栅格系统在图片的排版布局、尺寸设定方面给了设计者直观的参考，它让图片变得有规律，从而减少了设计决策成本，使整个画面更加具有条理，让内容的可读性变高。

 

移动端常用的栅格系统最小单位为4px（@1x）或3px（@1x），那么我们来看看airbnb是如何用3px（@1x）的栅格系统来确认banner的尺寸大小（sketch软件-显示-布局，就可以打开栅格系统布局面板）：


如上图，airbnb的栅格系统布局设置总宽为328px（总宽为中间6列+4个间距宽度），偏置为24px（左侧初始偏置像素），列数为6（一共分为6列），列宽45px（列数的宽度），间距宽度为12px（当不能除正数时，会自动把间距缩小1px，所以会看到有些间距为11px，有些间距为12px）


当设定好栅格系统后，我们就可以很好的得出图片的宽度：158px（45+11+45+12+45）。再根据图片比例的尺寸3:2，我们就可以算出图片的高度为：106px（158*3x2），所以图片的像素为：158px X 106px。根据相同的方法，我们可以用栅格系统+尺寸比例得出更多的尺寸大小。（注：不管是3px或4px栅格，都会出现除不整的情况，如上图中的11px，这个不用担心，不影响大局。）


4、倍率


在对banner图进行输出时要考虑倍率的大小，每个产品会根据产品的特性来决策输出的倍率，有些产品用二倍图输出，有些产品用3倍图输出，各有利弊。


标准分辨率的显示器具有1：1的像素密度（即@1x），其中一个像素占位一个点。高分辨率显示器具有更高的像素密度， 2倍或3倍的比例系数（即@2x、@3x）。当1倍的位图放在2倍或3倍的尺寸下时，就会出现图片损伤现象（失真），那么我们到底该用几倍图去制作banner图呢？


方案一：两倍图输出

优点：导出文件比@3x小，可平衡图片质量和线上文件大小的一个优质方案。

缺点：虽然@2x可向下适配@1x，但适配@3x放大后图片会微微模糊，所以我们如果要用@2x导出图片，那么banner内的文字不能过小或过于密集、粗旷，画面中也不能出现过多的效果，不然会看出明显的模糊痕迹（如下图的顶部文字与按钮文字放大后就有明显的模糊痕迹）


方案二：三倍图输出

优点：@3x可向下适配@1x与@2x，能够很好的保证不同尺寸下的图片质量，对视觉要求高的项目就必须用3倍图来设计。

缺点：输出的文件相对较大。


5、图片适配


图片的适配类型非常多，对于不同的布局适配场景我们选择的适配方案也不同，图片适配一共分为3大类：智能适配、设计师制图适配、用户裁剪适配。


1、智能适配：

简单来说智能适配是指通过后台代码的约束对上传的图片进行智能匹配，匹配内容包含图片大小、图片尺寸以及图片的展现方式。


图片大小：可以限制上传图片的最大尺寸。

图片尺寸：可以限制图片的长（宽）最小值，也可以限制图片的精准尺寸。

图片展现方式：可以设定图片在容器中的呈现方式，下面是最常见的8个图片呈现方式。


*智能适配之Feed流图片适配

当你无法保证用户发几张图片，无法预估图片的比例时，我们就可以去设定它相应的规则使之适配。


*1、单张布局：

不管用户上传几张图片，Feed流中以一张大图进行展现，使用大图布局的图片适配方式一般有两种，一种是给予图片一个容器大小，让其内容全部展示；另一种是按照图片的上传比例而变化。


*1-1给予容器大小

我们可以给予图片一个容器尺寸（如：300X300px），无论图片有多大都不能超过此容器，为了让图片内容全部展示出来且不变形，我们可以让图片保持正比例缩放，使长边能完全显示出来（左上或中心区域）。这一类的适配更偏向于以内容为主的产品，下面是常用的两种适配方案：


*1-2随图片比例而变化

如果你想保证图片最佳的大图预览效果，那么就可以采用随图片比例而变化的方案，当用户上传不同比例的图片时，图片展示的高度与宽度会根据我们提供比例缩放。采用该适配方式能将图片信息表达完善，图片占用空间大，适合图片质量高，这一类的适配更偏向于以图片为主的应用。


要做这类适配时我们首先要设定裁切的比例，裁剪比例一般设置为常用的图片比例 1:1、4:3、3:2、16:9。我们上传的图片可以根据图片的比例进行自行匹配。当图片越接近正方形则选择1:1，当图片长宽比例越大则选择16:9。


用户上传的很多图片并不是标准比例，如果存在多余像素，那么可以采用保持图片正比缩放，从图片中心区域展示，根据比例一共可以分为7种展现方式：


我们可以看到上图，根据不同比例的尺寸展现出来的页面占比也是不同的，如果产品对页面承载信息量有较高要求，那么可以去除16:9、3:2、4:3的纵向尺寸。



*2、瀑布流：

瀑布流的图片适配方法需要规定图片比例，并且每个比例的容器大小是固定的，呈现方式也是保持图片正比缩放，从图片中心区域展示。


*3、宫格：

宫格式布局简单来说就是有规律的方形布局(1:1尺寸)，宫格布局的形式多种多样可以是九宫格、四宫格、三宫格，下面以较为复杂的九宫格的适配为例，当然最好的参考或者最常见的就是微信朋友圈。


2、设计师制图适配

对于特殊页面的图片展示，我们为了呈现最好的视觉效果，需要设计师对图片进行单独尺寸的适配设计，并且输出多个尺寸的图片进行上传。

例如在适配开屏页时就对其进行了单独的制图适配，想要让二倍图适配三倍图，最简单的方法就是把画面的上下区域留出更多的空间，中心画面放大10%，可操作按钮放置画面安全区域：


如果设计师不进行制图适配，把适配交给程序处理，那么最终呈现的图片就会显得非常糟糕。如下图1的强行适配，使得整个banner比例非常不协调，让人看了后觉得十分廉价；下图2则稍微好一点，虽然保证了画面的视觉中心，但是整体画面看起来过于饱满，没有任何呼吸感，并且“点击参与”按钮过于靠下，容易与home指示器造成误操作。


3、用户裁剪适配

当用户想要呈现某些重要信息或识别性信息时，就可以把主动权交给用户，让用户进行自行裁剪，如头像、身份证信息。用户上传图片后，我们可以给用户设定一个默认裁剪区域，当用户不想进行繁琐时可以直接默认系统裁剪，如上传头像，我们可以把默认区域设置为图片的中心区域。


小红书在选择头像时默认裁剪区域是图片的中心区域1:1圆形，并且图片是短边显示，无论什么比例的图片都能全部展示在选区内，当你想要把图片脱离到选区外，系统会自动使图片弹回。未选择状态是选区内图片高清，选区外图片模糊，选择状态则是选区内图片高清，选区外图片黑色不透明遮罩（高透明度）。


微信在选择头像时默认裁剪区域是图片的中心区域1:1正方形，图片一样是短边显示，也不能让图片脱离到选区外，但是能拖动并放大缩小选区框。未选择状态是选区内图片高清，选区外图片有黑色不透明遮罩，选择状态则是图片内容全部高清呈现。



作者：黑狮力   来源：站酷

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

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

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



评论(0) 浏览(1362)

运营设计中的视觉动线

雪涛

我们的作品信息的传递效率高吗？
什么样的设计是清晰有效的？
想要搞清楚这些问题，首先你得了解视觉动线这个概念。


本文3200字，主要分为三个部分，阅读时间约15分钟。



—————   

      动线


动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计，我们会经常听到动静分离的概念，讲的就是动线的设计。住宅动线的设计目的是提高居住体验，减少在室内的重复行走轨迹。


例如家务动线的设计，从进门到厨房再到生活阳台，是家务劳动中最经常行走的路线。通过设计动线，减少家务劳动的行走，就能提高家务劳动的效率。在这里动线越短，效率越高。





在商业建筑领域，动线的设计也被频繁的运用。例如店铺的顾客动线设计，通过兴趣区吸引顾客，引导顾客尽量多的浏览店铺的商品，从而提高销售额。商业空间的动线设计讲究的是坪效（每平米的销售额）,动线的设计更侧重迂回。




还有比如动物园、游乐场的路线设计，就涉及到游玩顺序的体验，以及缓解拥堵等问题。因此动线设计的目的在于提高效率，在家居和商业空间领域已广泛应用。而在视觉设计领域，也存在动线的概念。



————————

      视觉动线


大家在生活中有没有遇到这样的情况，你要找的东西就在眼前，但是找了好久仍然没有找到。


人眼之所以能看清物体，是因为视网膜中央有个很小的区域叫做中央凹，这个区域集中了大多数的视锥细胞，专门负责视力的高清成像。


但是中央凹的面积极小，高清区域有限。人眼只有在10度视角范围内才最为敏感，30度范围内可以分辨出颜色。这就导致人眼可视范围有限，一次只能产生一个视觉焦点。因此人眼在观察物体时，没办法一下子看到所有信息，需要逐个地移动搜寻，这种视线的移动过程，就构成了视觉动线。


例如我们在阅读文章时，一般是从左到右逐行地阅读，这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃，没有规律，就会造成视觉焦点过多动线混乱的情况，容易出现阅读障碍，大大影响了阅读体验。





在视觉设计中动线的设计尤为重要，例如下图的banner，左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息，降低无效的阅读成本。
因此构建合理有效的视觉动线，将有助于打造良好的阅读体验，能更高效地让用户获取到信息，避免用户的流失。








我们以运营设计为例，来讨论一下常见的动线类型。在运营设计中，banner和活动专题是最为常见的，这类型的设计，画面往往很有感染力，内容丰富。这里介绍的动线，是指某张banner或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型：直线型、汇聚型、发散型、扇型、以及Z型。


———————

      直线型


直线型动线顾名思义，就是在一条路径上依次展示信息元素。我们以banner为例来看看如何应用。



在分析动线轨迹的时候，我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题，我们称第一眼看到的焦点为视觉入口点；紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。


banner中只在标题和火焰上使用了色彩，其他背景使用较灰的色系，这使得视觉焦点突出，动线清晰。



2.1.1动线角度  

直线型动线在运用的时候，不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。


例如左图这张banner就是对角线式的动线轨迹。对角线具有倾斜的角度，容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中，例如手机端的运营活动。右图的活动页面就构成了从上到下，从标题到主体人物的动线浏览轨迹。



2.1.2视觉焦点个数  

直线型动线中，人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点，但并不是焦点越多越好，一般2-3个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。 



———————

      汇聚型


汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。




例如下面这张banner，我们的视线会先被左右两侧英雄所吸引，延着他们冲刺的方向视线转移到了中间的标题，这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性，最终目的是让观众的视线聚焦到中心，以突出中心的标题或者主体信息。



汇聚型动线的视觉入口点一般在2个以上，例如下面这张活动头部，通过两侧的烟雾塑造视觉入口点，引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。




———————

      发散型


汇聚型动线是由四周向中心聚集的动线轨迹，而发散型动线则相反，它是由中心向四周转移的动线轨迹。视觉入口点在中心，并逐步向四周扩散的动线类型。



例如下面这个暑假活动页面，就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引，这就是视觉入口点。之后视线逐步地往两侧移动，依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。



而下面这个四周年的活动，最醒目的也是标题，它将观众的视线聚焦到了中心，之后逐步向四周发散。按照放射的方向，依次浏览了人物、按钮、奖励、圆球等信息。


可以看到发散型动线一般运用在有较多信息元素的画面中，浏览顺序层层递进，比较适合对信息元素进行归类阅读。


4.1入口点位置 

发散型动线一般是由中心往四周发散，视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张banner，作为视觉入口点的人物位于右下角，通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。



——————

      扇型


扇型动线一般会在中心线上塑造一个视觉入口点，之后保持着至上而下、从左到右的视线轨迹，这种轨迹就好比一把扇子。



例如下面这个手机端活动，我们第一眼会被可爱的小狗头部所吸引，之后视线往下，看到主标题和副标题，并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。


可以看到扇型的动线轨迹保持了从上到下的结构关系，一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。



—————

      Z型


Z型动线是最为常见的类型，它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。




例如下图的活动页面，我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题，再是副标题，最后是木牌上的信息。这构成了循环的Z型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。







在动线的设计过程中，比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧，如何更有效的来设计动线。


————————

      阅读顺序


第一种就是根据人们的阅读习惯来设计，也就是从左到右，至上而下的顺序。因为人的眼睛，左右转动所看到的角度和区域，要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准，横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素，就能保证有良好的阅读体验。



——————————

      元素指向性


第二种是利用元素本身的指向性来进行引导，特别是主体人物的肢体动作、手势等。例如下图中的banner就分别通过人物的眼神和手势进行引导，让观众的视线转移到标题上，构成了很强的关联性。让动线的引导更为自然紧密。




———————————

      引导线的设计


第三种是引导线的设计，我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线，或者虚拟的线条。

例如下图1的banner，就是通过左右两侧放射性的线条来增强引导，让观众的视线汇聚到中心，构成了汇聚型的动线。图2除了蜘蛛的视线引导外，标题文字的透视处理也构建出一条无形的引导线，让整个视线的引导更加紧密自然。在元素本身指向性不强的时候，引导线的设计能让视线的引导更加紧密，有规律。



—————————

      层级的设计


第四种是通过层级关系的设计来构建动线，也是经常要用到的方法，构建层级关系的方式有很多，这里只做简单介绍，有机会再跟大家交流。


例如下面这个活动头部，我们的阅读轨迹是从左到右的关系，先看到左边的人物然后是标题，最后是右边的人物，构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系，我们首先会注意到离我们近的物体，依据远近关系，形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。


通过层级的塑造，可以更有效的来制造动线，引导观众的阅读。



[ 小结 ]


综上，只要我们能够理解动线的概念和目的，在排列元素时就能有更清晰的目的性，设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁，也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会，希望对大家有帮助。

文章来源：站酷   作者：Tony老司机
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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



评论(0) 浏览(2824)

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档