首页

关于体验管理的几点思考

seo达人


图片

数据来源:《2021年中国互联网行业体验设计工具趋势研究》

但体验是的一种主观感受,是用户在使用一个产品、系统或服务之前、使用期间和使用之后的全部感受。公司的品牌、网站、系统、产品、服务、营销活动、线下门店等等各个环节的用户触点都会是用户体验的影响要素,面对如此复杂的情况,体验管理的边界是什么?内核又是什么?接下来我将结合自己开展体验管理工作的相关经验,谈谈我对于体验管理几方面的思考。

 

一、如何理解体验管理

顾名思义,体验管理即为对体验的管理,既可以是用户的体验,也可以是商家的体验、供应商的体验、经销商的体验,合作伙伴的体验,还可以是内部员工的体验。但无论是哪类角色的体验,都是一种主观的情绪感受,都会受到多个环节、多种因素的影响。因此,对于一家公司来说,体验的提升和优化也势必涉及多个部门团队的工作协同,需要从宏观视角、从战略视角对“整体”体验进行管理,充分分析并把握用户与公司产品或服务接触的每一个触点环节,聚合和分析全渠道、全流程的体验数据,洞察用户痛点、需求及偏好,并以全链路整体体验提升为目标,通过各部门团队的协同,不断改善公司产品或服务的触点体验,从而为用户提供系统性价值交付,为企业提供持续性增长动力。

 

二、为什么要做体验管理

首先,从体验提升的宏观价值视角来说,提升用户体验是企业在流量红利逐步消失、行业竞争日益加剧的宏观背景下,继降低成本、提升效率之后实现业务增长的共识性举措。实施体验管理有助于提升用户满意度、忠诚度;有助于提升品牌口碑、品牌影响力;有助于促进用户增长、商业目标达成;有助于促进产品创新、营销创新以及企业升级。

其次,从体验提升的工作开展痛点来看,现阶段国内体验管理仍处于刀耕火种期,虽然越来越多的公司纷纷入局,但多数只是停留在散点式、被动性的体验需求研究、体验问题收集及优化、用户反馈及态度采集上,缺少对体验的整体性管控能力,因此在开展体验提升工作的过程中往往会遇到以下困境:

1. 缺少统一的量化指标。各团队对体验的理解、当前的体验水平、体验影响的大小均不像转化率、用户量等业务指标那么清晰,所以团队之间缺少统一的体验语言,导致体验提升工作的推进成本远高于更明确的业务目标提升工作。

2. 传统体验研究分析的周期长,时间跨度和体验触点的覆盖范围有限,导致体验优化工作难以适应现有产品或服务的迭代更新节奏。

3. 体验分析与体验优化有脱节现象,未形成完整的体验提升进度跟踪保障机制。

4. 公司同事体验意识参差不齐,缺少统一的体验文化引导。导致先上线后优化的不良模式盛行,增加了用户首试体验受损的风险,增加了体验挽回所需付出的成本。

因此,开展体验管理所能带来的直观可见的价值是能帮助我们解决以体验提升为目标的各项工作的难点,提升各项工作的效率。同时,从体验管理的长远价值来看,开展体验管理可以提升企业竞争力,促进整体商业目标达成。

 

三、体验管理的通用模型

结合国内公司在体验管理工作开展上的主要内容,大致可将体验管理工作分为三大类:

1. 数据采集为主的研究执行,即诊断用户使用产品或服务全链路上的体验现状和问题,为体验优化提供方向指引;

2. 体验优化为主的机制建设,在公司层面建立规范的流程或机制,保障体验优化工作顺利开展;

3. 体验管理工具或系统建设,结合公司体验管理需求,依托现有体验分析及优化的工作流程、机制,设计开发体验管理工具或系统,提升体验管理的系统化能力。

图片

数据来源:《2021年中国互联网行业体验设计工具趋势研究》

综合现有各公司所开展的体验管理工作内容以及我们现有的工作实践,我将体验管理工作的具体内容按照覆盖范围分为三层结构:数据层、系统层和运营层。

图片

图1. 体验监测管理体系

 

每一层级上都有对应的工作目标和工作内容:

数据层:建设体验数据,量化体验水平,追踪体验变化。

图片

图2. 体验监测数据示例

做体验的监测管理,首先我们需要看到它,并且能及时的掌握它的现状和变化情况,这样我们才能针对现状去分析判断我们应该怎么提升它,改善它,才能针对变化情况来分析、判断、衡量我们所做的提升和改善措施是否有效,才能不断沉淀经验方法,在体验提升的台阶上逐级而上,而不是原地打转。

但正如前文所述,体验是用户的主观情绪感受,无论是对单个用户的情绪感受的测量方法,还是对整体用户主观情绪感受数据的收集技术都不是很成熟,所以,体验数据不像运营数据或财务数据那么容易追踪和衡量。

在这样的背景下,我们首先需要找到那些可以直接或间接反映用户情绪感受的数据,构建收集渠道来收集可以反映用户情绪感受的数据。

那这类数据都有哪些呢?结合用户体验度量的数据维度来看,大概可以将其划分为两类:用户自我报告式的主动反馈类数据和系统埋点收集的客观行为类数据。

自我报告式的主动反馈类数据主要有满意度评价(CSAT)、推荐意愿(NPS)、客户费力度(CES)等反映整体感受的数据,以及用户通过客服或在线反馈等渠道针对特定问题的反馈数据。此类数据主要通过直接询问用户或用户主动反馈的方式来采集。

系统埋点收集的客观行为类数据主要是用户与产品或服务的交互过程数据,比如App的整体使用频率,使用时长,App分享率等,以及重点功能或页面的点击率、转化率、跳出率等。此类数据主要通过系统后台自动记录来采集。

为了能更精细化的对体验状况进行分析,也可以增加一些体验水平分析的辅助型数据,比如用户的性别、年龄、会员等级等特征类数据。以便我们看到整体体验水平有所变化时,能具体的分析出是哪个群体的变化导致。

系统层:构建体验管理系统,承载体验数据,提效体验运营。

图片

图3. 体验监测管理系统界面截图

体验监测管理体系的中间层重点在于系统的建设。这主要是因为:

首先,体验管理系统是体验数据的承载系统。单独一期的体验数据采集因为缺少对比的基准,所以参考意义不大,我们需要长期的采集体验数据,并进行不同时间的体验水平对比,这样才能及时有效的发现体验水平的变化,找到需要重点提升体验的用户群体、产品模块或服务环节。

而长期的数据采集及分析需要耗费较大的人力成本,且工作重复性较高,数据的人工分析也容易出现失误,因此,通过系统来完成数据的自动采集、数据的自动分析、数据的自动诊断,不仅能及时且长期的采集体验数据,而且能有效的节省人力成本,减少人工计算的失误。

其次,体验管理系统是体验运营工作的主要辅助工具。体验数据的监测分析诊断只是基础,依据监测分析诊断的结果如何能有效的促进产品或服务体验提升才是体验管理的最终目的,围绕用户体验提升所要做的运营工作还有很多,比如产品/服务体验问题的优化跟踪,团队/公司体验文化的建设等。为了能高效的完成各方面的体验运营工作, 我们依然需要借助系统的能力。

因此,体现管理系统的建设在体验管理体系的构建工作中是非常重要的一部分内容。

运营层:构建运营机制,分析体验数据,管理体验问题,维护体验用户,建设体验文化

图片

图4. 体验监测管理相关运营产出

体验运营主要是指围绕用户体验所进行的人工干预工作的总称。我们的日常运营工作主要包含体验数据分析、体验问题管理、体验用户维护和体验文化建设四个方面。

体验数据分析主要是对体验数据结果进行统计整理跟踪以及综合性的分析,比如结合主观数据及客观数据来综合评估特定功能或服务的体验情况;并及时将体验数据分析结果同步给对应功能/服务的责任团队,协助其分析体验水平的变化。

体验问题管理主要是对体验问题的分析和优化。体验数据的监测可以让我们更及时的发现体验上的问题,但单纯的发现问题仅仅是开始,我们需要联合相应的责任团队一起对问题进行分析优化,在这过程中经常需要我们通过快速的调研来验证问题,评估问题的严重性,找到问题的解决方案,同时需要推动或协助责任团队完成优化方案,跟进优化进度和效果。

体验用户维护主要是对产品/服务典型用户群体或社区的日常管理和活动组织。主要是为了能及时的获取产品/服务方面的体验情况,及时了解产品/服务创新方案的用户态度评价,让用户更深入的参与到产品/服务的设计开发过程中,引导用户为产品/服务的迭代创新贡献优秀创意。

体验文化建设主要是通过体验数据分析结果/体验专项研究结果传播,体验问题协同机制构建,体验活动组织,体验考核机制创建等方式不断培养各团队及时关注体验水平的意识,营造各团队积极推动体验优化的氛围,激励各团队推行体验优化/体验创新的主动性。

 

四、体验管理的趋势展望

随着越来越多的公司开始进入体验管理的行列,势必会促进体验管理不断的发展变化。结合对现有体验管理工作现状的观察,我认为可以用三个关键词来概括体验管理将来可能的三个发展方向。

精细。体验涉及用户与公司接触的方方面面,时时刻刻,体验管理也将围绕用户的全部场景,完整链路触点,以及用户的整个生命周期来进行更加精细化的数据采集、分析和优化,全方位的监测、诊断和管理。

多元。从宏观行业到微观数据都将变得更多元。未来的体验管理不仅仅只是用户体验部门的工作重点,也将作为抓手逐渐成为整个企业从上至下的重点工作方向。体验管理不再只是互联网企业的专属,也将逐步渗透至各行业的企业公司。不同行业、不同企业的产品或服务类型多种多样,用户与产品或服务的交互触点、场景也各不相同,为了满足不同行业、不同企业的多样化需求,体验数据的采集渠道和场景也将结合多样的触点场景变得更多元,体验数据的采集维度也将变得更丰富,分析数据的方式方法以及体验管理工具的功能类型也将在不同行业/不同企业中呈现出个性化、多元化的趋势。

智能。技术的进步和发展也势必会带来体验管理能力的不断提升,体验数据的采集、体验水平的分析诊断、体验问题的优化管理将借助新技术而变得更智能、更高效。体验数据的采集将在用户无意识中完成,且能兼顾体验数据的多种维度,使体验场景的还原更便捷,更真实;体验水平的分析诊断将结合更多维的数据来进行综合性的自动化诊断,并提供切实可行的优化方案,使体验问题的暴露更准确,更人性;体验问题的分发、进度跟踪、效果评估等管理工作的自动化程度更高,使体验优化的效率更高。

 

 

转载请注明:学UI网》关于体验管理的几点思考

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

截屏2021-05-13 上午11.41.03.png

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

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

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




B端后台产品的设计细节-设计说明指南篇

seo达人


一、建立原子化组件思维

1、什么是原子化组件思维?

原子思维:原子最早是由英国化学家/物理学家约翰·道尔顿提出的,继承古希腊原子论和牛顿微粒说,提出的原子论。化学元素由不可分的微粒(原子)构成的,它在一切化学变化中是不可再分的最小单位。

原子理论同理适用于我们的设计系统中:

页面是由原子(最小单位设计元素)、分子(基础控件)、组织(基础功能组件)、模版(业务定制组件)、页面构成。

原子:原子是最基本和最小颗粒度的单位,无法进一步细分的UI元素,在界面中以「元素」的形式存在,例如:颜色、文字、图标、分割线等。

分子:原子排列组合构成了分子,在界面中多以「设计控件」的形式存在,形成相对简单的UI组件的原子的集合。例如:导航栏、标签栏、搜索框、按钮、弹窗等。

组织:原子、分子排列组合形成界面离散部分的相对复杂的组件,在界面中多以「基础组件」的形式存在,例如:内容卡片、表单页面。

模版:原子、分子、组织按照业务需求排列组合构成了模板,在界面中也称为「业务组件」,例如:筛选列表。

页面:按照一定规则后排列组合而成的满足业务需求且包含品牌属性的一个完整「页面」。

图片

2、组件化的内核

设计组件不是把UI元素堆积到一个地方,然后各处集中引用这么简单。组件化的工作方式信奉独立、完整、自由组合。

目标就是尽可能把设计与开发中的元素独立化,使它具备完整的局部功能,通过特定规则自由组合来构成整个产品。

独立:一个组件就是一个独立的产品:在制定组件的过程中要考虑到组件应用中的各个场景,降低、拆解组件中的耦合度,同时把一个组件当作一个独立产品来设计 考虑空状态、极端情况、尺寸变化 尽可能灵活适应各种使用场景

完整:一个完整组件构成包含三种属性:

A.响应状态-包含组件库中原子的大小类型、分子的响应和组合方式、多状态的交互;

B.行为状态-组件中元素的与背景的组合方式、组件中不同组件拼合的层级关系、组件与用户行为的交互;

C .数据状态-包含组件不同的状态枚举:如提交中、审核中、已结束状态。

自由:每个组件都是相互独立的,组件间的组合方式灵活且多样的。灵活多变的同时也要遵循统一的栅格尺寸与表达约束,最大程度上保证页面呈现出一种有秩序的美。

 

二、建立设计说明指南

1、什么是设计说明指南?

针对企业级产品反复出现的设计问题,设计模式给出一般性的解决方案,实现跨应用交互一致性的有效融合。减少了不必要的认知成本,提升交互确定性和设计的效率。

考虑到需要适应各种独特的业务场景,模式的规则具有一定的灵活性,万变不离其宗,通过了解设计模式的构建逻辑,可以衍生出更具场景特性的解决方案。

设计模式包含以下内容:

原则:基于价值观衍生出的一般设计技巧,包括如何高效组织信息、帮助建立用户与界面的互动等原则性要求。

全局规则:通过规范常见的互动行为,包括导航、数据录入、数据展示、反馈、操作、帮助等,呈现组件元素的标准用法和弹性空间,并了解如何将他们组织在一起来创建良好的体验。

构图模版:我们总结了表单、列表、数据可视化、详情页、工作台、异常、结果、编辑器几类页面的典型解决方案,介绍每类页面的设计目标、设计技巧以及典型页面内容等,帮助设计师和产品经理可以快速开始构建界面。

2、服务于谁

A.设计师:交互设计时,整体流程框架或分支流程可快速复用。

B.产品经理:原型设计时,可复制并套用现有交互模式进行原型绘制,或直接引用进行开发。

C.研发人员:可作为标准交互流程的参照,统一相似流程的代码设计方式。

3、有什么内容

前言:对这次建立设计说明指南的目的性说明;

设计概览:描述这次调整的范围的维度;

设计原则:基于哪些设计原则输出设计内容;

构图模版:页面的构图模版、组合控件和组合范围;

全局规则:全局范围出发,除了页面构图以外,涉及到共用组件,制定的规范;

组件:基础控件和组织控件,甚至涉及到业务定制控件(模版)。

4、设计说明指南的输出

《GM Design》交互设计说明指南,涉及几十个产品线的成百上千个的功能,业务体量和复杂度极大,为了让整体SaaS产品具备简洁高效的一致性交互体验,设计说明指南是设计过程中问题解决的核心方法,也是构建整个平台或框架所要遵循的基础和标准。

设计模式辅助设计者将业务引向实践,并使设计更具有一般性、简单性、一致性及稳定性。同时,设计者也可结合不同业务情境,实现模式在一般性和特殊性的衔接并作要素与结构的调整。

 

最后

最后,为大家提供一份详细的GM Design交互设计文档,里面包含设计概览、设计原则、构图模版、全局规则、组件等多类B端后台交互设计内容。

完整版交互设计说明文档-体验链接:https://lanhuapp.com/url/947cJ

大家可以在公众号后台回复文档,获取访问密码。

慢慢来比较快,希望对你有帮助!

图片


 

原文地址:Clip设计夹(公众号)

作者:Clippp

转载请注明:学UI网》B端后台产品的设计细节-设计说明指南篇

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

截屏2021-05-13 上午11.41.03.png

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

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

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



想要优化好UI作品,这14个设计细节一定要检查到位!

seo达人


图片

 

今天会跟大家分享一些被广泛运用的界面设计规则,它们能快速使得你的界面设计更干净、高效。

 

1. 文案要易于理解

用更容易让用户理解(说人话)的引导文案,提升使用体验。

(彩云注:下面2个案例中,左侧的“购物车”和“库存2”太过于术语化,右侧的“仅剩2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候,也一定要注意界面中的文案,尤其是说明文字,控件文字等等,这个点经常容易被忽略。)

图片

 

2. 垂直对齐易于扫视

良好的对齐方式,可以增强内容的可读性,让用户的视线更容易扫描。

(彩云注:左侧的“之”字形视动线比较难阅读,且不够专业;右侧的垂直对齐增强了可读性,也让设计看起来更加统一,能够快速的提升设计细节。)

图片

3.给选项加图标

使用图标、动画作为标签,有助于更轻松地理解内容,它使界面看起来更加理性和丰富,能瞬间抓住用户的眼球。

(彩云注:左侧的导航相较于右边,很难第一时间准确识别它的意思,增加图标后不仅更快看清,视觉上也更加美观。)

图片

 

4. 大段内容要拆分

大段的长句会让内容变得难以阅读。为了获得好的体验和UI,应该注意拆分内容,并使用项目符号突出关键点,利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时,提炼要点有助于提升用户体验,这样也不至于让用户直接忽略。

(彩云注:左侧的大段文字我想应该没多少人会去阅读,右边的至少还能在短时间内快速看看几个关键词。)

图片

 

5. 流程增加进度条

进度条帮助用户追踪流程,它也能使查看上下步骤更加容易。线上购物,表单填写,申请流程等场景使用这种格式能很好的简化流程。

(彩云注:左边的表单UI不方便跟踪进度和流程,右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。)

图片

 

6.错误提示要明确

错误提示一定要明确,易于理解,方便用户进行下一步的操作。如果用户不理解界面上出现的错误,用户就会感到很失望,可能会放弃接下来的流程。在UI设计时,在正确的地方用通俗的语言说明问题,以避免歧义,这一点非常重要。

(彩云注:我常常遇到各种出错,但出现的提示太过于术语化,也没有提示在正确的地方让我非常苦恼。)

图片

 

7.按钮要正确合理

从菲茨定律(Fitt’s Law)中我们应该知道,目标区域的距离和外观与所采取的行动成正比。因此,为了将注意力集中在转化按钮上,按钮应该准确放置在合理位置上。此外,按钮的大小应该易于点击,避免用户因尝试点击时不方便而流失。

(彩云注:左侧的按钮不在正确的决策位置以及按钮太小,右侧的按钮简洁明了并且符合用户的心理预期,能够让用户更快决策并点击。)

图片

 

8. 用好色彩心理学

颜色是UI中不可缺少的部分,它能影响用户使用应用时的情绪。正确地使用颜色将使UI看起来更加丰富合理。

(彩云注:左侧的蓝色按钮颜色并不符合用户对于删除的心理预期,右侧的红色按钮对用户的心理预期有危险和警告,用红色代表删除能够让用户集中注意力关注这一特殊的操作。)

图片

 

9. 单列更易保持关注度

用单列展示内容,能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时,将所有信息垂直对齐时,能更好的保持用户关注度。

图片

 

10. 优先社交媒体账号登录

当用户准备登录或注册你平台的时候,把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号,能很好地增加点击率。

图片

 

11. 选择状态要清晰

在用户做选择的时候,需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

(彩云注:左侧的问题在于选中状态不清晰且选项的颜色过于丰富,右侧的选中状态清晰且选项颜色只有2种,选中和非选中,体验会更好。)

图片

 

12. 用留白分组

如果想给信息分组,使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素,空白能让UI看起来更加干净和优雅。用线分组的情况适用于类似Twitter、Medium之类的重内容平台等场景。

图片

 

13. 控件样式保持一致

保持设计的一致性,能够降低功能复杂度并让用户更快决策,一致性设计让用户更快熟悉操作而不需要太多思考。(彩云注:左侧的选项圆角不一致,会让用户思考为什么这里会有不同,而右侧的一致性选项设计,能让用户忽略内容外的干扰。)

图片

 

14. 搜索中的占位符要用好

在搜索输入栏添加适当的占位符,提示用户可以在平台上搜索和找到的内容,这样可以提供用户参考并带来更好的用户体验。

图片

 

总结

以上这些就是在设计数字产品体验时应该遵循的14个基本规则,这些点虽然基础,但却经常被人忽略,我在星球中帮大家看作品集时发现上面提到的这些点出现的是最多的,希望大家可以把这些知识运用到自己的设计中,提升UI产品体验。

原文:https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4
作者:Ayushi Verma
译者:彩云Sky
本文翻译已获得作者的正式授权(授权截图如下)

图片

希望对大家有帮助,欢迎转发分享~

原文地址:彩云译设计(公众号)
作者:彩云Sky
转载请注明:学UI网》想要优化好UI作品,这14个设计细节一定要检查到位!

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

截屏2021-05-13 上午11.41.03.png

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

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

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



超全干货!五个方面帮你掌握标签栏设计

博博

快速迭代的产品存在着同质化趋向,如何做出差异性?如何将品牌精神向外传达?如何在有限的时间内,满足产品需求的同时带给用户更好的

体验感,进而体现设计的价值呢?静态画面动起来或许是个不错的选择!

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计

超全干货!五个方面帮你掌握标签栏设计


作者:多点MP

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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


想优化 UI 作品,这14个设计细节一定要检查到位!

博博


Hi,我是彩云。界面是用户在与任何产品、APP 或平台交互时看到的内容,用户体验就是建立在坚实的界面设计基础之上的。所以,如果你想要在 UI 设计上提升能力,应该多去思考界面设计背后的原因。

想优化 UI 作品,这14个设计细节一定要检查到位!

今天会跟大家分享一些被广泛运用的界面设计规则,它们能快速使得你的界面设计更干净、高效。


文案要易于理解


用更容易让用户理解(说人话)的引导文案,提升使用体验。

(彩云注:下面 2 个案例中,左侧的“购物车”和“库存 2”太过于术语化,右侧的“仅剩 2”和“加入购物车”更加贴近用户的日常理解。大家平时工作的时候,也一定要注意界面中的文案,尤其是说明文字,控件文字等等,这个点经常容易被忽略。)

想优化 UI 作品,这14个设计细节一定要检查到位!

垂直对齐易于扫视


良好的对齐方式,可以增强内容的可读性,让用户的视线更容易扫描。

(彩云注:左侧的“之”字形视动线比较难阅读,且不够专业;右侧的垂直对齐增强了可读性,也让设计看起来更加统一,能够快速的提升设计细节。)

想优化 UI 作品,这14个设计细节一定要检查到位!

给选项加图标


使用图标、动画作为标签,有助于更轻松地理解内容,它使界面看起来更加理性和丰富,能瞬间抓住用户的眼球。

(彩云注:左侧的导航相较于右边,很难第一时间准确识别它的意思,增加图标后不仅更快看清,视觉上也更加美观。)

想优化 UI 作品,这14个设计细节一定要检查到位!

大段内容要拆分


大段的长句会让内容变得难以阅读。为了获得好的体验和 UI,应该注意拆分内容,并使用项目符号突出关键点,利用拆分好的内容块让用户更快抓住重点。特别是在“功能说明和条款条件”或任何声明时,提炼要点有助于提升用户体验,这样也不至于让用户直接忽略。

(彩云注:左侧的大段文字我想应该没多少人会去阅读,右边的至少还能在短时间内快速看看几个关键词。)

想优化 UI 作品,这14个设计细节一定要检查到位!

流程增加进度条


进度条帮助用户追踪流程,它也能使查看上下步骤更加容易。线上购物,表单填写,申请流程等场景使用这种格式能很好的简化流程。

(彩云注:左边的表单 UI 不方便跟踪进度和流程,右边的表单把进度放在顶部能帮助用户清楚的知道流程进度。)

想优化 UI 作品,这14个设计细节一定要检查到位!

错误提示要明确


错误提示一定要明确,易于理解,方便用户进行下一步的操作。如果用户不理解界面上出现的错误,用户就会感到很失望,可能会放弃接下来的流程。在 UI 设计时,在正确的地方用通俗的语言说明问题,以避免歧义,这一点非常重要。

(彩云注:我常常遇到各种出错,但出现的提示太过于术语化,也没有提示在正确的地方让我非常苦恼。)

想优化 UI 作品,这14个设计细节一定要检查到位!

按钮要正确合理


从菲茨定律(Fitt’s Law)中我们应该知道,目标区域的距离和外观与所采取的行动成正比。因此,为了将注意力集中在转化按钮上,按钮应该准确放置在合理位置上。此外,按钮的大小应该易于点击,避免用户因尝试点击时不方便而流失。

(彩云注:左侧的按钮不在正确的决策位置以及按钮太小,右侧的按钮简洁明了并且符合用户的心理预期,能够让用户更快决策并点击。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用好色彩心理学


颜色是 UI 中不可缺少的部分,它能影响用户使用应用时的情绪。正确地使用颜色将使 UI 看起来更加丰富合理。

(彩云注:左侧的蓝色按钮颜色并不符合用户对于删除的心理预期,右侧的红色按钮对用户的心理预期有危险和警告,用红色代表删除能够让用户集中注意力关注这一特殊的操作。)

想优化 UI 作品,这14个设计细节一定要检查到位!

单列更易保持关注度


用单列展示内容,能更好地帮助用户扫描。当你的应用和网站上要展示大量信息时,将所有信息垂直对齐时,能更好的保持用户关注度。

想优化 UI 作品,这14个设计细节一定要检查到位!

优先社交媒体账号登录


当用户准备登录或注册你平台的时候,把所有可用的社交媒体登录尽量放在首位。这将避免用户填写表格时付出额外的认知负担和时间消耗而流失。首先使用社交媒体账号,能很好地增加点击率。

想优化 UI 作品,这14个设计细节一定要检查到位!

选择状态要清晰


在用户做选择的时候,需要清晰地告诉用户选中的到底是哪一个选项。模棱两可的颜色会增加用户的认知负担。更少的颜色和清晰的选中状态能让用户获得更好的体验。

(彩云注:左侧的问题在于选中状态不清晰且选项的颜色过于丰富,右侧的选中状态清晰且选项颜色只有 2 种,选中和非选中,体验会更好。)

想优化 UI 作品,这14个设计细节一定要检查到位!

用留白分组


如果想给信息分组,使用留白是最好的方式。加条线作为分组符号会在界面中增加了一个额外元素,空白能让 UI 看起来更加干净和优雅。用线分组的情况适用于类似 Twitter、Medium 之类的重内容平台等场景。

想优化 UI 作品,这14个设计细节一定要检查到位!

控件样式保持一致


保持设计的一致性,能够降低功能复杂度并让用户更快决策,一致性设计让用户更快熟悉操作而不需要太多思考。(彩云注:左侧的选项圆角不一致,会让用户思考为什么这里会有不同,而右侧的一致性选项设计,能让用户忽略内容外的干扰。)

想优化 UI 作品,这14个设计细节一定要检查到位!

搜索中的占位符要用好


在搜索输入栏添加适当的占位符,提示用户可以在平台上搜索和找到的内容,这样可以提供用户参考并带来更好的用户体验。

想优化 UI 作品,这14个设计细节一定要检查到位!

总结


以上这些就是在设计数字产品体验时应该遵循的 14 个基本规则,这些点虽然基础,但却经常被人忽略。


作者:彩云Sky¹

转载请注明:优设网

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



那些高效的界面设计工具

纯纯

近年来界面设计工具不断推陈出新,一些新兴的实用界面设计工具渐渐走进设计师们的视野,逐步改变着设计师的工作模式。作为互联网设计师,效率至上的工作原则敦促我们不断尝试新工具,建立新的工作模式。本文将回顾界面设计工具的发展历程,并着眼界面设计工具的发展趋势,为大家推荐一些新兴、高效的界面设计工具,涉及UI、动效设计领域,希望对大家有所帮助。




Part1

——————————

界面设计工具的发展历程


随着互联网行业的日益繁荣,界面设计领域逐渐走向成熟,界面设计工具也一直在以惊人的速度发展。界面设计工具的发展历经了三个阶段:


1. 第一阶段是最早期界面设计领域刚刚起步,设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具,因此界面设计师在界面的绘制、文件的交付上都存在一定不便。


2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件,但其作为一款专门针对界面设计的工具,以其高效、小巧的优势迅速占领界面设计市场,逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺,出现了Principle、Flinto、Protopie等专门设计界面动效的工具,一般设计师都会将其搭配使用。


3. 当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野,它们专注于界面设计领域,不断挖掘和突破Sketch的短板,为设计师们打造更良好的使用体验。




Part2

——————————

界面设计工具的未来发展趋势

界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展,旨在实现更高效的设计生产活动。



云端性


随着云计算的发展,界面设计工具也在逐步走向云端化。设计从本地转向云端,不再依赖于本地硬件的性能,云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制,只要有网络,设计师可以随时随地的工作,临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方,变成发送链接给对方。前者耗费本地内存与下载时间,后者有网即可打开。设计工具的云端性使得设计的灵活度增强,设计效率大大提高。


协作性

注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具(如Figma、Framer Web)试图将产品、设计、开发、测试融为一个整体,让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生,扫除各工种之间的协作障碍。


通用性

今年9月Figma举办的第二届Config Europe大会,其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性,设计工具不仅可以帮助设计师输出设计稿本身,而且致力于打破设计与代码之间的壁垒,降低交接成本。让设计实现变得更加轻松高效。




Part3

——————————

界面设计工具推荐


1 UI工具篇

1.1 Figma

Figma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示,Figma的使用率从12%增长至26%,在今年的Config Europe大会上Figma也预告了一些即将推出的功能迭代,其便捷高效的特性使其受到众多设计师的追捧,正在逐步抢占sketch的用户市场。


Figma与Sketch相比,亮点功能有哪些?


(1)Windows用户也可随心使用

与sketch只支持苹果生态系统相比,Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用,理论上只要你能打开浏览器,就可以使用Figma愉快地设计。



(2)云端文件使用不卡顿,支持离线编辑


Figma创建的文件全部存储在用户的云端账户中,不占用本地内存。当文件过大时,sketch会出现卡顿现象,拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小,大文件也几乎不存在卡顿的情况。设计师们最关心的无网或若网情况下Figma的使用问题,Figma也给出了相应的解决方案。其支持离线编辑,离线时会自动把内容保存在本地,当网络恢复后自动同步到云端。



(3)一键导入sketch文件


Figma可导入Sketch文件,大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。





(4)更强大的组件功能


Figma和Sketch都拥有组件功能。当原始组件更改时,复制组件就会同步变化,在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步,复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时,原始组件不受影响。此时二者的关联逻辑仍然存在,当再次修改原始组件,复制组件仍然会同步变化。相比于Sketch,Figma把组件做的更加灵活限制更少。


同时Figma也在不断优化其组件功能,在Config Europe大会上,Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件,在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。


如下图中的按钮组件,设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。




(5)与代码紧密结合


在使用sketch输出设计稿时,设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合,本身自带交付功能。 其文件中的每个模块都有代码模式,只需要将开发同学的账号开通查看权限并发送链接,就可以直接在设计文件上获取标注,也可自行导出所需的CSS、ios、Android样式。





(6)一键恢复历史版本


Figma会将设计师的每一次修改存成对应的历史版本,当老板说想要某一版时,设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件,也有机会一键抢救。



(7)团队协作


团队协作功能可谓是Figma最大的核心竞争力。当几位设计师需要维护同一份设计文件时,Figma可以支持几位设计师同时在线修改,只要将文件链接分享给对方并给到相应权限(查看、编辑权限)即可。如果使用sketch,设计师一般会发送源文件给对方修改来达到协作效果。来回传输源文件不仅容易造成文件同步出错,而且有一定的下载时间成本和存储成本,相比之下Figma的优势显而易见。


除了设计师之间的协作,Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比,Figma的评论功能使得同事可以在设计文件中实时标注讨论方案,提高了线上评审效率。




小结

设计师受文件本地存储的限制,在工作中把源文件给同事、设计稿给产品、切图给开发、一项简单的输出对接任务变得琐碎起来。Figma的出现打破了设计师长久以来的孤岛工作状态,设计师只需分享一个链接,同事可以修改设计稿、产品可以评审、开发可以查看界面模块的属性甚至查看代码,大大提升了设计师的工作效率。如果您的团队正在考虑更换设计工具,Figma是一个不错的选择。




2 动效工具篇

2.1 Framer Web

Framer Web是一款在线动效设计软件,于今年5月上线正式版,相比于Framer家族的前两款产品Framer classic、Framer X, Framer Web突破了其以代码为操作核心的理念,上线的新版本对设计师来说更加易用友好。


Framer Web的核心亮点是什么?


(1)网页端全平台可用


相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑,Framer Web是一款基于浏览器的在线设计工具,因此windows用户也可以安心使用。同时个人版本免费,大大降低了设计师的使用成本。



(2)文件导入

Framer Web可通过import选项导入Sketch甚至Figma文件,可搭配Sketch和Figma快速制作高保真动效。




(3)轻松实现复杂动效


Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效,但对于设计师们来讲十分不友好,学习成本过高。此次发布的Framer Web为了解决这一问题,增加了适合设计师使用的可视化界面控制动效,设计师可以通过Magic Motion轻松实现复杂动效。


Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后,可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态,那么在画板切换时该元素就会生成补间动画发生相应变化。



同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video,本身会有一些独特的交互行为如End、Pause、Play(播放、停止、暂停),当进行这些操作时,会触发相应的页面变化。




(4)从设计到代码


代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板,设计师还是可以在设定了动效后,通过点击顶部的handoff调出相应代码。如果你是一个需要使用代码的设计师,你仍然可以通过编辑代码实现更复杂的动效。对于设计师来说,Framer提供的丰富动效已经可以满足绝大部分诉求。绝大部分设计师已经无需再关注代码部分,通过可视化界面完全可以做出很丰富的交互效果。而Framer Web最终的野心是希望设计师通过可视化界面设计出参数化的动效,可以直接导出相应的能交付生产端的代码。目前Framer Web 已经可以实现导出相应动效代码,但导出的效果仍有待完善,只是可以导出Transiton的参数而已。




(5)高效协作


Framer Web和Figma一样,也非常注重团队协作。设计师可以将链接分享对方进行查看、编辑,方便几位设计师合作一个项目的情况。与需要反复传输文件相比,Framer Web省时省力,大大提高了设计师的工作效率。


小结


Framer Web放弃了攻占界面设计领域的策略,转而和Figma官方达成积极的战略合作,专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整,相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能,非常值得期待。




3 插件篇


虽然云端化的设计工具正逐渐兴起,但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外,也会介绍一些好用的sketch插件,大家可以根据自己的需求自行尝试体验。


3.1 Design Lint(Figma)

设计师在做较大项目时可能会绘制几十个页面,难免会存在界面丢失元素的情况。Design Lint就能帮助你解决这一问题。它可以在你工作的时候进行实时更正,检查不同界面直接的差异,包括颜色、字体、填充、半径值等样式差异并纠正错误。如果你做了一些修改,Desgn Lint也会根据你的修改实时更新。这款插件可以让你更专注于设计本身,而不用浪费时间检查不同页面的元素是否使用正确,大大提高了设计师的工作效率。

https://www.figma.com/community/plugin/801195587640428208/Design-Lint



3.2 TinyImage Compressor(Figma)


设计师在做较大项目时导出的设计稿过大,存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件,导出多个图片时还会自动生成一个zip压缩包。

https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl




3.3 Design System Organizer(Figma)


这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时,会遇到如图所示的:“Buttons-Small-Default...”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后,该组中所有组件的名称都会随之改变,十分方便。

https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer




3.4 Juuust Handoff(Figma)


Figma本身自带交付功能,但该插件的好处是生成的是离线文件,导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。

https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff




3.5 Image Optim (Sketch)


设计师在导出设计稿时有时图片过大,Image Optim可以在导出图片时压缩图片,但不会影响图片的质量。使用时需先安装app再安装Sketch插件。

https://oursketch.com/plugin/imageoptim



3.6 FontFinder(Sketch)


设计师在做较大项目时可能会绘制几十个页面,难免会存在字体使用错误的情况,Font FInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体,你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改,大大提升了工作效率。

https://oursketch.com/plugin/font-finder





3.7 Craft(Sketch)


Craft插件十分强大,其中填充功能可以大大提升设计师的效率。在设计如列表页时,设计师为了效果需要编辑不同的标题、图片,都要冥思苦想编内容。Craft可以一键填充文字,如姓名、文章、日期、邮箱、地址、国家等。不同类别下面也设置了一些分类,方便设计师选择。除此之外,Craft还可以一键填充真实不重复的照片,为设计师节省了很多时间。

https://www.invisionapp.com/craft



3.8 BaseAlign(Sketch)


Sketch自带的对齐工具对形状来说很好用,但对于文字来讲一般是文字的文本框对齐,并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐,这样就以保证不同大小的文字都可以对齐,设计效果更完美。

https://oursketch.com/plugin/basealign



4 协作工具篇

4.1 XSHOW


XSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种,提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW,就可以将文件链接分享给产品经理、开发等同学。产品经理在手机小程序上就可以预览方案,设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。

网址:https://xshow.tencent.com





XSHOW是如何实现高效协作的?

对于设计师

(1)可视化上传文件

设计师先在Sketch中安装XSHOW插件,可使用快捷键或直接点选需要上传的文件画板,接着直接选择XSHOW中的“导出”,就可直观快速的将文件上传到XSHOW。




(2)记录所有版本迭代,轻松找回第一稿


设计师每一次上传的文件都会有云端记录,设计师可以通过时间轴便捷找回历史文件,轻松找回第一稿。



(3)灵活丰富的分享权限


对于项目分享的权限,XSHOW的设置更为灵活,除了支持私密、公开、指定人或团队可见外,也可以控制权限的时效。




对于项目管理者

(1) 直观了解团队输出,组建团队展示能力空间

XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况,同时可以组件团队展示能力空间。



(2)方案变更及时知道


XSHOW有记录所有版本迭代的能力,因此作为项目管理者可以及时知道团队成员对方案的修改变更,解决了团队内部有时同步不及时的问题。


(3)便捷组建项目和管理团队成员

项目管理者可以在XSHOW便捷组建项目和管理团队成员,大大提高了项目管理者的管理效率。





对于合作产品经理或甲方

(1)多端查看更方便

XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果,如果合作方身边没有电脑也可以及时查看稿件。




2. 查看历史变更


XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况,大大提升了信息同步效率。



对于开发工程师

(1)便捷查看标注与管理切片

设计师将文件上传到XSHOW后,只要将链接分享给开发,开发就可以直接在线查看文件标注、下载切片。


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司






设计工具的后起之秀——AffinityDesigner功能提炼

纯纯

一、基础操作


1.焦点显示

按住option单击图层缩略图,视图上会只显示该图层内容(暂时性隐藏其他图层,进行其他操作依然会显现出来)

2.蒙版(同PS剪切蒙版)

在AD中同样也是有蒙版功能的。例如下图,这三个字实在是太霸气了,我们想变怂一点,那该怎么办呢?在右侧图层面板中,按住矩形层缩略图,拖入文字层的缩略图与图层名称之间(也可以看作是缩略图层),即可完成蒙版操作。

但是要想调整文字大小,但是依然只显示矩形所在区域范围的内容呢?那么我们需要勾选上方工具栏中的【锁定子项(lock children)】按钮,在进行调整就OK了。


3.历史记录(history)※

1)定位滑块

历史记录工具包含一个定位滑块(position),拖动滑块,可快速撤销与复原,效率很高。同时也可以点击列表的特定步骤,点击后就会回到该步骤操作。

2)历史分支

在文件菜单栏中有个【随文档保存历史记录(save history with document)】,勾选后,保存的文件将保留历史记录。当你在历史记录中选中曾经的特定操作的情况下,进行一步新操作,则历史记录会产生一个小分支符号,分支符号代表不同的未来。例如我新建一个黄色矩形,然后将颜色调整为蓝绿色渐变。然后通过点击历史记录,回到新建黄色矩形的步骤,然后把颜色改成蓝紫色渐变,这样在填充步骤就会出现分支符号,通过点击分支可快速切换至蓝绿色渐变,可用于尝试性创作,并通过同时存在的两种结局来进行对比。


4.快速副本(power duplicate)

复制粘贴和复制图层操作与PS完全一致,不同的是power duplicate部分。首先,我们在画布上绘制一个矩形,然后按command J复制出一个矩形副本,将矩形副本移动到矩形的左边,然后缩放它,操作完成后按command J,在矩形副本的左边就会出现一个比矩形副本更小的矩形副本2副本2矩形副本的距离与矩形副本矩形的距离相同。好,我们回到第一步,绘制一个矩形。然后按住command 拖动矩形,则会出现矩形副本,然后移动矩形副本后,按command J,同样可以达到上面的效果,我们把这个操作叫做power duplicate,也就是快速副本。PS也有同样的功能,但是操作逻辑有些许不同,AD的更为清晰一点。


5.图层与像素图层

1)图层概念

在AD中,有两个图层的概念,一个叫做图层(就是普通图层,可以包括像素图层和矢量图形图层),另一个叫做像素图层。如果选中图层的状态下添加像素图层,则该像素图层会默认放置在该图层下,普通图层与组的概念类似。如果选中画板层的情况下添加像素图层,则像素图层自动创建在画板层,与其他图层同级。

2)三大角色模块(personas)

在AD中有矢量部分、像素部分、导出部分的区别。不同部分的工具区是不一样的。在矢量部分下,包括拖动矩形与钢笔绘制形状,所创建的都是矢量图层;像素部分创建出来的都是像素图层,这两者是不一样的,同时也是AD与AI的重要区别之一。


二、高级操作


1.等距视图※

1)内置网格

与AI需要自己手动绘制等距视图网格线不同,在AD中内置了一套优秀的网格系统,可以帮助我们快速的搭建出2.5D插画需要的网格线,并且支持角度变换。在调节角度时可以预览网格线的具体效果,就这一点就足以让2.5D插画作者扔掉AI转投AD。

2)等轴测工具(isometric)

isometric工具可以帮助我们快速绘制等距视图插画。我们可以想象一下在AI中,好不容易利用旋转复制人肉做出了参考线,还需要用钢笔工具去点击参考线的交点来绘制插画的一个个立体块面。在AD中这项繁复的工作将不复存在。通过等轴测工具,我们将告别手动对齐这种令人头大的工作。

等轴测工具功能由两部分构成,上方的三个立方体表示参考线当前描述的是哪个平面,并且可以通过这三个立方体来快速切换当前平面(current plane)。

在下方平面编辑选项部分,有这样几个功能项。

  • 在平面中编辑(重点):在该选项选中的状态下,我们通过图形绘制工具在画布上直接就能拖动出符合参考线角度的图形,特别是在绘制圆形时简直不要太方便。

  • 适应平面(重点):在画布中我们通过矩形工具绘制了一个正常的矩形,横平竖直那种,然后点击【适应平面(Fit to plane)】,只听得啪的一声,矩形就被啪到参考线上了,变成等轴视图的一个部分。

  • 在平面中翻转/旋转:这个没什么说的,就是普通的翻转旋转操作,变成了等距视图的翻转旋转操作。


2.资产(assets)

相当于UI组件库,Sketch与XD都有同样的功能。


3.符号(symbols)

视图(view)-studio-符号(symbols),将图形拖进去,就形成了symbols。

如果想要单独修改某一个符号,则需要点击符号面板右上方的【同步(sync)】来取消全局修改,然后单独修改某一个符号。修改后,该符号将脱离符号控制,不受符号修改影响


三、设计帮助


1.曲线吸附(curve snapping)

选择节点工具[A],去调整一条曲线的锚点,可以通过上方面板中的吸附(snapping)来选择各种吸附方式。


2.参考线管理器(guides)

视图-参考线管理器,可打开参考线面板,已存在的参考线都会在上面显示,同时可以点击参考线的数值来修改参考线的具体位置。

因为需要时间消化的原因,我会将文章分为几部分整理,在此阶段如果有朋友感兴趣可以去Affinity官网下载试用,同时结合本文上方的链接(官网的教学视频被异次元封印了)可以更好地了解AD。再次提一下,一定要看官方教学视频,不要想凭借着自己PS、AI的基础去直接上手,AD真的不一样。

AffinityDesigner(下文都用AD表示)是Affinity系列中偏向于矢量绘制与界面设计功能的工具,其并没有能够准确对标的竞品,如果非要对标的话,可能就是Adobe Illustrator和Sketch了。Affinity系列中的另外两款作品Affinity Photo(偏向图像处理,对标Adobe Photoshop)与Affinity Publisher(印刷排版,对标Adobe InDesign)也是非常有潜力的作品,不过目前这两款还没有办法完全替代掉Adobe家族的作品。

但是AD,我觉得是可以完全有实力跟Adobe Illustrator一较高下。在用过Sketch之前,我从未感觉用PS做UI有多低效,同样,在了解AD之前,我也从来没感觉Ai有多难以忍受,顶多有些地方感觉反人类罢了。但是经过两三天的了解与试用,我立即就在App Store下单入正并抛弃了AI。

因为AD,真的有点东西。

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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司




设计的“整理术” —组件化设计思维沉淀

纯纯

『 写在之前 』


最近在阅读《佐藤可士和的超整理术》,书里讲述的是作者通过对空间、信息和思考的整理,来解决复杂问题,让工作变得高效。生活和工作离不开“整理”,好的设计也要从“整理”开始,组件化设计思维,也可以看做一种“整理术”。本篇文章将与大家探讨如何运用组件化设计思维去“整理”项目,并发挥更高的价值。

文章分为两个部分:

1. 组件化设计思维

2. 滴滴表单优化项目的沉淀总结:组件化思维的推动和执行



『 组件化设计思维 』


1. 什么是组件化设计思维

我们知道“分子是由原子组成的,分子分成原子,原子也可以重新组合成新的分子”。一个界面是由独立的分子组件搭建而成,分子组件由原子元件构成,这些原子可通过不同的组合方式,组成新分子组件,继而重组构成新的界面。

组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成规范化的组件,通过多维度组合来构建整个设计方案,从而提升设计效能。


2. 滴滴运用组件化带来的收益

随着滴滴业务的飞速增长,组件化为滴滴带来了一致的设计语言和工作效率上的提升,因此滴滴在组件化道路上的决心愈发坚定。选择以组件化展开设计实践,带来的变化与收益主要体现在公司、项目和个人三个维度:


2.1 公司维度

一款产品的更新迭代是依附于产品、设计、开发、测试等多个团队协作进行的,随着产品功能的完善,背后支撑的团队也在不断壮大。以运用组件化推动的产品设计与迭代,可以使团队增效,降低成本。设计师可以只用几个小时设计出几十个页面,开发人员也可以通过查看prd文档,直接调取组件代码完成需求,使得我们的生产力产生质的飞跃。在保证数量和质量的前提下,原本200人的团队,可以缩减为100人,为公司节省了人力成本。组件化能让公司以更快的速度和更低的成本开发产品,也能对产品想法快速验证。


2.2 项目维度

● 从设计方案上

对于一些适用组件化的产品形态,我们可以运用组件化思维将其“化整为零”,对需求有更规范的统筹,理清框架,建立一个可复用的组件结构并持续优化,以保证交互和视觉的一致性。


● 从工作流程上

传统的设计流程大多是同属性多角色并行的,从需求到设计,从设计到前端的工作流程会涉及到不同的设计师及不同的前端工程师。相同角色间无交集、缺乏沟通会导致大量重复性工作,增加项目周期和管理难度。


而将组件化思维贯穿其中的设计流程,带来了工作流程上的创新。我们建立了一套设计组件库来提高协同效率,大量需求均通过需求评估来判断是否需要新增或复用组件,对于组件库里已有的组件,设计师可直接调取,组合构建出新页面。对于新增组件则经过常规设计流程后,归纳沉淀并由组件委员会审核通过后方可入库,以提升后续组件扩展能力,助力产品快速更新迭代。 


2.3 个人维度

利用组件化,设计师可以从低价值的机械式工作中解放出来,参与到设计创新中去,发挥更高的设计价值。

另外,在工作中运用组件化设计思维有助于设计师更完整的思考,培养全局思维的能力;也有助于我们专注于细节,提供个性化的创新方法,产出适应不同场景的最优方案。


下面用一款优秀案例来解析组件化设计思维


『 滴滴表单优化项目沉淀 』


1. 项目背景


1.1 为什么要优化表单

滴滴出行5.0版本从2016年11月上线至今,随着用户体验痛点不断增加,业务的需求逐渐多元化,我们希望对表单进行一次统一的整合梳理和升级。为未来更多业务发展提供快速支撑和拓展,同时也注重用户体验的提升。

滴滴出行作为出行服务类应用,精准的发单表达是触达用户进入服务流程的关键。每个业务在确认呼叫的节点上拥有独立的入口并满足不同的需求(如下图),确认呼叫页表单(以下简称表单)作为最重要的多功能、多信息载体,需要高效、精准的表达和流畅的体验。


1.2 跨业务共建

滴滴出行是涵盖出租车、专车、快车等多项业务在内的一站式出行平台,我们希望在保证全平台统一化的基础上,与业务寻求一种相辅相成的关系,并且在保证规范化输出的同时,展现出业务特色。在需求阶段,确定各业务接口人,收集需求,沟通评审促成各方达成一致目标。在方案执行阶段,平台设计师产出方案,与各业务线沟通并优化,1~2次循环后方案评审到最终确立。开发和测试阶段,各方验收通过后发版上线,上线后平台沉淀设计规范,完善组件库,跟踪反馈,推动体验优化形成工作流程闭环。 



2. 确立设计目标


项目初始,平台设计师需从业务诉求及用户诉求两方面着手,在收集到两方需求后,对其进行归类整理并定义优先级,从而确立设计目标,制定出具体的设计策略,提炼交互框架,再深入到细节的设计。 


在表单项目中,基于满足业务未来多元化及提升用户体验的需求,输出目标为:

1)兼容各业务需求,建立具有可承载多种业务共性及特性的组件能力框架;

2)主要信息及次要信息的合理化分布;

3)传递真实感及专业感,拉近用户体验共鸣。



3. 以组件化设计思维展开设计探索


有了明确的目标后,根据目标制定相应的方向策略,也便于我们在后续的设计工作中寻找发力点。和业务沟通后,明确整体方案的设计基调聚焦在“扩展性”“统一性”“逻辑性”“个性”四个方向上:

扩展性——组件化视觉表达,能够随着滴滴多场景、多业务需求的变化进行延展和扩充;

统一性——各业务信息归类统一、简化;

逻辑性——信息层级清晰,增强主焦点认知,次要信息弱化;

个性——设计个性化表达



3.1 以组件化思维进行框架探索

在方案构思阶段,我们是以组件化设计的思维方式先去全面的思考并分析问题,再进行拆解分类,最后归纳重组。


● 全面多维度分析问题

框架层:针对快、专、豪的确认呼叫表单的关键场景进行框架分析


因为业务不同,场景不同,确认呼叫这个流程触点在各业务中是具有共性和差异性的。我们重新梳理了确认呼叫页表单各业务的功能点(如下图),可见各业务表单虽有一致模块,但信息内容十分繁杂,层级区分无规律可循;操作区位置不统一,样式各异;框架的兼容性及扩展性不高。


表现层:在视觉表现层面上,也暴露了很多问题,如:不同业务的车型选择分别有各自的展示方式;价格区选中项的感知较弱且各业务的样式不统一;价格小数点展示位数不一致等等。


新增业务特性诉求:新的框架还需满足业务特性的诉求(如下图)。


● 拆解并简化

如何让新的框架既能满足越来越多的业务类型,保证体验的统一,又能体现出业务特性,平衡取舍促进产品更新迭代呢?

我们回归到本质,从以下四个方面对框架进行重新构思:

删除——去掉无用的功能点

组织——根据类别将这些功能点分解后重新划分成组

隐藏——突出主焦点的认知并隐藏次要信息

抽取——抽取共性,对比差异性

综上,即对框架进行简化,保证框架可灵活适配具有业务共性与特性的组件。 



● 重组

简化后的框架几乎可以覆盖所有必要功能点,有很强的适应能力和扩充能力,可以轻松应对未来多元化的出行服务及场景。


在共性中寻找差异性:全局操作、车型与价格、发单按钮是业务共性部分,除车型/价格区和发单按钮外,其余均可显示或隐藏,可根据业务特点灵活配置。 

在差异中寻找共性:车型与价格区所包含的服务选择与附属操作是业务差异部分,快车需要在一个卡片中呈现三个车型比价、需要有附属操作,专豪则需要强调车型图片的露出和服务配置。我们要找一个平衡去把这些差异点串联起来,确保用户拥有同样的感受,不仅是交互方式、动效流转,也需要关注同一层级信息的视觉表达。



3.2从框架层到表现层——从整体到细节的设计

● 视觉尝试探索

在交互框架明确后,便进入视觉设计阶段。平台设计师基于统一的的框架进行视觉风格探索,兼顾扩展性和逻辑性,同时不能忽视业务特性,从而迸发更加出彩的设计想法。设计师是界面的规划师,也是品质的把控者,大到页面布局、组件的组合方式、颜色定义,小到按钮在空间布局上的占比是否合理都要面面俱到。在这个过程中,不断打磨微调,进一步细化并且有针对性的进行动效设计,以呈现更完美的方案。


 组件化设计的细节打磨

在方案确定的同时,将模块再次拆分成组件,组件包含不同类型、不同状态的基本元件,进行深入打磨,从而实现与设计目标的高度吻合。


● 根据组件构建页面

表单运用了组件化设计方法,建立了可承载业务共性与特性的框架。通过设计评审敲定最终方案后,提炼规范,设定组件标准,提取组合用法以覆盖各业务场景。由于业务线设计师更了解业务的需求根源及业务流程,所以由其枚举场景并输出业务遍历图。

平台与业务共建的过程,可以更好的调动业务线设计师的积极性和参与度,也能从业务的角度验证组件的扩展能力;“共建”也能更快速的将组件规范推动落地,实现组件的复用、协调与升级,是快速搭建页面、促进产品快速迭代的重要因素。



4. 项目反思

表单在 2017年10月19日 随乘客端 V5.1.16 发布,我们通过数据分析来验证表单优化的合理性。(以ios为例,分析上线一周后10月25日-10月31日的发单率和发单时长数据) 



4.1 体验量化

- 新表单较老表单,发单量增加,发单率提升14.83%;

- 新表单较老表单的平均发单时间降低了2%

数据分析表明,表单的设计优化是成功的,是设计师运用组件化思维在自驱项目中的每一个环节发挥高价值的体现。


4.2 快速落地

“共建”和“组件化”是促成表单项目在短时间内达成落地目标的关键因素,平台与业务共建的工作方法也扩展运用到了更多项目中,是平台与业务之间迅速确立方案、搭建设计规范、推动体验优化和迭代的最高效路径。


4.3 设计研发一体化

不仅如此,表单优化项目取得成功,离不开“组件化设计思维”在设计全流程上的应用。我们坚信,滴滴将在组件化道路上继续前行,然而这条路任重而道远。就现状而言,我们的两个组件库——设计库和开发库仍需要分别维护,且设计和开发在沟通时成本较高。这使得我们需要创建一个能够同时面向设计师和开发人员的共享组件库,实现设计和研发一体化,让设计师面向开发,让开发贴近设计,减少设计及开发人员的额外工作量。我们设想,在设计和研发一体化的生态系统下,不论设计师或开发人员,通过搜索名称就可以从共享组件库中调取相应的组件进行设计,这些组件都有一对一的设计和开发数据,这会让工作变得十分高效。

在滴滴的未来,设计研发一体化是可以将代码实时渲染到设计软件中审阅设计的生态系统,且并不遥远。


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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


如何输出清晰有效的设计方案

纯纯

本文从What/How两个部分循序渐进地阐述如何输出清晰有效的设计方案,希望给大家一些建立系统性设计思路的启发,帮助大家更好地输出设计方案,为决策设计方案提供更有力的参考。





 WHAT: 什么是清晰有效的设计方案


首先我们需要对清晰有效有一个整体的认知。所谓清晰,从字面上理解是指看得很清楚、明朗,设计层面来说就是方案能做到方向明确,方案明了。而有效字面上指的是有效果,有效力,从设计层面来说就是输出的方案可以解决存在的问题,能达到设定的目标以及可以切实落地。


清晰和有效的考量维度是不一样的:清晰更多是针对设计这一环节,在于不同方向/方案的差异度和侧重点;而有效则更多需要联合设计上下游(用户/产品/开发)。对于优秀的设计方案来说两者相辅相成,缺一不可。


接下来我们来详细拆解什么是清晰和有效。




1.清晰 - 方向明确,方案明了

——————————


很多设计师对方案输出的数量有个认知误区,认为设计方案越多越好,可以给老板、合作方更多选择,往往不假思索地用大量的时间输出所有可能的方案,并拿出来让别人评审,认为把所有的可能性列出来就不会错,这正是对方案清晰性缺乏认知的表现。


在设计最初期,不要着急动手输出界面,先结合目标(近期目标和远期目标)综合考量,系统性地思考有哪些途径达到目标,确保所有实现手段的方式都有考虑到,并且可以整合途径一致、方向近似的方案。对差异性不大的方案进行合并划归,才能在合理范围内整理出具有不同思考维度与目标侧重的提案方向。前期规划思考的深度决定了方案的广度,只有清晰的思考方案才会创造无限的可能。



 用案例来让大家对清晰这个定义有更具象的认知:


相册小程序Logo这个需求的目标是需要突出相册元素,并强化品牌识别度。


这是设计师输出的Logo提案初稿,虽然输出了28个方案之多,但没有设计思路的规划,想到哪就画到哪,很多方案是重复的,还有一些方案在设计初期就应该Pass,设计的整个细致度也不够充分。



于是设计师对设计方向重新进行规划整合,按照输出形式重新规划了分类。



按照分类筛选出四个可以继续优化的方案。并且拿着四个不同方向的方案去汇报。最终确定D方案。



我们重新回顾一下这个需求,28个方案 VS 4个方案,设计师需要的不是尽可能输出多方案的能力,方案越多可能表示你在错误的道路上越走越远,需要的是通过前期系统的思考能一次把方案做对的能力。



2. 有效 - 解决存在的问题、能达到设定的目标、可以落地的方案

——————————


很多设计师拿到产品需求会立即动手,认为满足了产品这个角色提的需求便是好的设计输出,或者把方案出的天花乱坠,当产品或者其他角色提出不同意见就会觉得他们不懂什么是好的设计。这些现象大多是因为设计师在项目前期没有正确思考和评估这个需求本身需要解决什么问题、方案能否达到团队共同设定的目标,以及方案是否能平稳落地这三个维度。




解决存在的问题—从问题出发


我们在实际输出方案的时候,不能从产品经理的需求文档开始,而是要把考量维度更前置,从项目现有的问题出发。这个问题的搜集包括外部用户的反馈,内部团队的声音,但需要注意的是用户的反馈不一定是真正的问题,需要做到筛选和甄别。比如新发布一个版本可能会碰到的一个情况是很多用户打一星反馈说界面太难看太丑,这种属于用户感受,我们可以再深挖一下用户觉得丑的原因,是不是改变了太多用户习惯,但又没有给用户真的带来更好的体验和更多的收益。



能达到设定的目标—从目标启动


问题还需要结合目标一起考虑,解决问题的思路并不完全等同于目标,目标是大家一起制定的未来产品的发展方向。比如我们新发布的版本里面新加了一个Tab改变了用户习惯,大批用户投诉,但如果这个新Tab是符合我们目标的,我们不能为了短期解决用户投诉把这个Tab下掉,应该继续观察用户在这个使用过程中碰到了什么问题,解决实际操作中碰到的问题。


用案例来让大家对问题和目标有更具象的认知:


我们需要优化QQ空间的为空界面,首先我们梳理下现网存在的问题,风格整体比较老旧,很多图形表意不明确,新出模块就会有新风格,所以存在很多不统一的地方,空间整个业务有一百多个为空界面,导致开发也不清楚到底应该怎么用,用什么,所以很长一段时间是处于乱用的状态。




接着我们梳理了这次优化的目标:


1 界面统一,用户能对表意感知明确(解决现网问题)

2 强化QQ的品牌

3 做成基础组件,保证复用性

4 低成本开发


确定了优化目标以后我们没有马上急于尝试风格,而是先遍历了所有为空异常页,整合了所有场景最后梳理出八种情况,这八种情况可以覆盖所有的为空场景,梳理整合场景是目标1、3、4能实现的前提。



然后我们基于这八个场景来输出设计风格,要低成本开发,所以这里没有考虑加动画,用企鹅剪影结合具体的场景来表意,不仅强化了品牌,也能做到表意清晰明确。图形定好以后我们马上也输出了规范,Push给对接的开发同学方便调用。



在输出方案过程中,始终都要紧紧贴合问题和目标,避免无效设计。



能落地的方案—技术可以实现


在输出设计方案的时候,设计师需要考虑到开发成本是什么,需要消耗多少资源去实现这个需求,最低成本达到目标的路径是什么。如果有些方案开发成本很大却收益价值却很小,我们就需要斟酌它是否仍有执行的必要。避免一味的追求设计效果不去对齐成本、人力,最后也只会是设计的自嗨。


用案例来让大家对清晰这个定义有更具象的认知:


产品提了好友生日推送礼物的需求,目标是想用生日这一比较温情的场景去设计专门的祝福页,用来提升写操作和大盘活跃。我们需要设计送给用户的礼物卡片,从实现手段的难易规划了三个方向:


A 手势交互但开发难度大: 3D手势交互动画

B 趣味动图且开发成本适中:局部小动画

C 静态但开发成本低:全静态视觉,复用已有开发流程



最后团队对齐了人力成本,决定采用方案C,把设计精力放在本身卡片的表现上。



HOW: 如何输出清晰有效的设计方案


那如何才能输出清晰有效的设计方案呢?设计方案归根结底是思维方式的具体体现,输出清晰有效的设计方案最核心的点在于体系化的思考方式,我总结了一下几点:




1 拓宽边界

——————————

拓宽边界需要设计师站在更高的视角和有更广的视野,把设计从表现和执行抽离往前后延展,在整个设计过程中往前去挖掘需求和规划产品结构,往后做到把控和沉淀,能站在上下游各维度去Review整个项目,只有站在更全局的视角审视,才能跳出片面设计的维度。




2 转换视角

——————————

从不同的视角看待问题,学会拆解问题和解决问题,从产品/开发不同的角度来全盘看整个产品,分析这个需求的投入产出比是不是足够,是不是能达到目标(包括设计目标和产品目标)。设计、产品、开发从来都不是对立的,都是不同角色为了整个产品发力。


举个例子,产品同学觉得输出的方案不好看,是在用感性表达,我们可以尝试继续拆解不好看背后的原因,比如是不是核心内容不够突出、担心按钮转化率等,一开始就抱着产品不懂设计这种想法是没有办法解决问题的。


还有一个就是用户同理心,很多时候我们不能只站在设计师和产品的角度看待用户反馈的问题,比如新功能内部团队觉得很厉害,但实际门槛太高,用户根本不知道怎么操作,而我们长期体验这个产品反而忽略了产品的易用性。



3 结构思维

——————————

我们在启动项目的时候,不要单点去看要在某个页面要做什么改动,而是从问题入手,和产品同学对齐好目标,结合设计理念,最后找到发力点在哪里,循序渐进,这样很大程度上能避免项目的反复,对设计流程的准确把控也是输出优秀设计方案的基础。


举一个日常生活的例子帮助大家理解,比如我的问题是长得丑,我的目标是要变得更年轻漂亮,我的理念就是改善体型和优化五官,最后找到具体的发力点比如晚上不吃晚饭,去美容院打美容针、学会怎么化妆等。




4 认知创新

——————————

有些新设计师对设计创新的认知还停留在是去做一些创造世界、改变世界的事情,认为创新就是把原项目进行翻天覆地的改变,初入职场会觉得负责的业务和项目都很小,没有什么意思,其实创新的维度有很多,包括设计工作流程的优化、还有从小的问题点着手去深挖和思考,找到合适的解决方案并打磨细节给用户创造惊喜。摆正心态才能做对事做好事。



5 及时复盘

——————————

完成项目以后需要不断的总结方法,遇到的问题,除了技法层面的提升,更重要的还包括思考层面的提升。学会去总结之前踩过的坑,避免重复性的问题,比如你的输出一直存在层级不清晰的问题,那么你需要关注后续输出的界面里大模块之间以及元素之间的层次是否还存在这个问题。可以犯错误,但是尽量避免总是犯同样的错误,这样才能加速成长的脚步。



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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司


让动画生动的技巧

纯纯

前言

前人早已总结了让动画生动的技巧,早在1981年由两位迪士尼动画师所撰写的《The illusion of life:Disney Animation》一书就提到了动画的12项基本法则,该法则也是受用至今。法则虽是针对传统动画而制定,但对于我们日常需求中所接触的动效/动画需求也同样受用。


目录

1)动画原则介绍

2)结合案例应用原则

3)流程方法论沉淀

4)结语








01: 挤压与伸展

挤压与伸展是我们最常用的运动技巧。使用挤压与拉伸来强调物体的质感、重量、速度。挤压和拉伸会给予物体运动时具备质量感和体积感的错觉。例如当一个皮球正在进行下落运动,在运动过程中让皮球体积产生一定拉伸来表现它的速度感,皮球落地后则因力的作用产生挤压变形。






技巧建议

挤压与伸展的幅度影响着物体的质感、重量。设计师们可根据物体的质感去决定挤压伸展的幅度。动画虽存在夸张性,但对于物体挤压拉伸的体积尽可能保持视觉统一,避免较大的体积误差导致运动的突兀。











02: 预期动作

预期动作可告知观者物体运动即将发生,增强观者的场景代入感,使运动更加生动真实。如果我们去除前期的预备过程物体所呈现的运动感知像是突然被前方磁铁所吸引。






技巧建议

预期动作可对观者视线进行引导,设计师可以根据预期动作所引导的方向来衔接镜头/场景的转场。反之预期动作也可以用来欺骗观众,当用户预期与画面不符时也可增加动画舞台的趣味性。








03: 演出方式

每个角色/运动元素在运动过程中都会流露出独特的态度和气质。针对不同的角色/元素的运动特性运用不同的运镜、表演技巧、时间节奏以及舞台的编排技巧,传递贴合角色/元素气质的动态感知。








04: 持续动作与关键动作

在现今动画工作流程中,考虑到流程效率及技巧利弊,我们可以使用两者相互结合的方式。关键动作描述的是设计师们熟知的关键帧动画的方式(类似AE)。在动画设计前进行基本运动的关键动作提炼,再进行细化,一层层的递进。底层的关键运动越完善,在后续添加细节时才不会耗费大量时间调整。而对于持续动作(逐帧动画)的技巧,我们可以利用它处理一些复杂效果例如(涉及到运动空间的变化、形状上的灵动变化等)。






1)持续动作(Frame by Frame)

逐帧动画。

优点:自由且流畅的动态。

缺点:难以把控时间长短、体积大小。


2)关键动作(Key Frame)

关键帧动画。

优点:清晰、可靠、规范。

缺点:修改成本略高。









05: 跟随与重叠动作

跟随动作指的是元素运动结束后不会立刻停止,会因为质量、惯性等因素,元素会慢慢进行振动减幅的过程。重叠动作则指的是运动不会同一时间发生,主体与附属部分的运动会因质感、外力等因素产生不同的速率。






技巧建议

1)表达运动的力量、速度感

当一个人跳跃的时候,自身的衣帽等附属物也会随之摆动。跟随&重叠动作反应着运动的力量感和速度感,利用好跟随与重叠动作,可以更好地表现角色/元素主要动作/运动。当主要动作/运动力量大、速度快的时候,跟随与重叠的物体运动幅度大,反之则运动幅度小。









06: 缓动

真实世界的运动遵循着缓动运动的规律,而并非匀速运动。根据物体运动情况、动态质感去编排元素合适的运动速率。关于运动的速率编排相关内容,可以看看过往的文章-《动效的质感》








07: 弧形运动

仔细观察可发现自然界中的运动多为弧形运动的组合,而匀速运动只存在于机械运动中。






技巧建议

1) 弧形运动路径

角色动画:

在人物运动过程中使用弧形运动增添角色动画表现力。比如当人物抬头或转头时,通过弧度的变化映射人物的情感,是充满好奇心的还是沮丧的。


交互动效:

在交互动效中,弧形运动路径会给予观者运动表现力较年轻活泼的感知隐喻。设计师可根据品牌调性及产品属性去选择运动路径类型。









08: 附属动作

当主体在运动时,设计师可通过附属物运动来辅助表达主体运动气质。比如人物敲门时,捏紧拳头的敲(代表生气)与翘起兰花指敲的(代表精致)区别。








09: 时间控制

在上篇文章其实我们有提到影响动效质感的原因之一就是时间,控制好物体的运动时间也是表现良好动画节奏感的关键。








技巧建议

1) 时间偏差(角色动画侧)

使用「时间偏差」的技巧,可以让你的动画更加生动。因为受力、质感等因素影响,主体运动时附属部分的运动不会同时发生。比如当人物正在打哈欠时,首先是从嘴巴发力,再扩散至五官眉毛。






2) 时间偏差(体验动效侧)

为保持动效的连续性以及营造自然流畅的交互体验,适当的使用时间偏差,可避免动效元素变化过程出现空档期,提升信息传递效率减少认知负荷。








10: 夸张

通过夸张手法增添动画表现张力,加强运动元素的吸引力令动画更有代入感和戏剧性。








11: 多维表现

动画设计时可通过营造镜头透视感、景深感模拟真实的空间感打破二维扁平视觉效果,提升画面表现力。








12: 吸引力

一部好的动画作品一定会有令人吸引的人事物,比如动态气质或视觉风格等它们都能很好的吸引观众。除此之外,如何讲好一个故事,通过趣味幽默的故事表达手法也可以增添动画的吸引力。








原则归类

通过对十二大基本原则的学习,我将技巧分为以下两大类:设计技巧和表演技巧。

设计技巧:动画设计的技法,增添动画细节令动画表现更生动自然。

表演技巧:舞台表演的技巧,提升动画舞台全局的表现力。












结合案例

接下来我们结合上述所提及的动画原则,根据实际案例进行结合应用。一起来探讨下当接到动效设计需求时,我们需要思考哪些点?才能使我们的动效表现力更上一层楼。








脚本背景

假设在项目中我们需要对设计元素(猪猪存钱罐)添加动效以提示用户已省钱成功的情感氛围。设计前我们先来分析下元素以什么动态/动作表现会更贴合元素性格。考虑到猪猪的可爱属性,采用了跳跃的运动方式。并拟定了跳跃后天上落下金币的动画脚本。








动态分析

将脚本确定后,我们在脑海里已经有大概的运动画面。但在进入动效设计前,还需要明确在动画中使用哪些动画原则来提升动画生动性。








应用技巧

在添加动画细节前,我分享下在项目中经常用到的两个技巧。


1) 实现挤压与伸展的多种形式

实现挤压与伸展的方式有很多种,最常见的是直接改变物体的缩放比例或形状路径来实现。但在设计项目中我们往往会遇到非矢量的设计元素,利用xxx可实现图层的弯曲扭曲等变形效果。






2) 考虑运动物体质感

质地坚硬的物体受外力的影响较小,质地柔软的物体受外力的影响较大。而像猪猪这类柔软的物体在恢复静止吋肉肉会有一个跟随&重叠动作(抖动)。在处理这类抖动的效果除了使用常规的弹性表达式外还可配合使用AE的 CC bend it 效果增加形变细节令物体运动更为生动自然。








差异对比

当我们去除这些动画原则后,再去作对比明显的感知差异就出来了。








经验沉淀

根据过往项目经验,我总结了动效/动画设计的流程思路。从业务目标的分析到动画脚本的确定,层层递进。前期的目标和框架确定后,之后进行动画原则的梳理及最后的动效输出。设计师们不妨在项目中尝试上述的流程思路及原则技巧,将自身动画的表现力提升一个档次。








结语

随着动画/动效的落地方式愈来愈完善,像Lottie、svga等新型的动画落地形式所带来的高品质画面呈现。设计师们不能满足于动画仅仅只是动那么简单,如何去塑造生动的动画形象还有不少我们需要考虑的细节。恰好前人总结了相应的原则技巧,帮助我们站在巨人的肩膀上看得更远。除《The illusion of life:Disney Animation》外,近期也在阅览《动画师的生存手册》里面涵盖了不少关于角色动画的运动技巧及细节。其中部分技巧并不局限于角色动画的设计中,下期文章我将分享关于角色动画的知识沉淀内容。



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

魏华的微信.png

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司









日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档