首页

B端交互设计过程中的思考

seo达人


前言

写这篇文章的初衷是由于工作中带新人发现他们从拿到一个需求不知道如何下手开展自己的工作,即使开展了也是丢三落四,需要反复回炉重造。希望通过这篇文章可以对他们有一些帮助的同时也是对自己工作的一个思考总结。有什么不足之处还请各位见谅,也可以和我一起探讨一下。
 
由于我的工作内容基本都是设计一些B端产品,并且团队项目中没有产品经理的岗位,经常的情况就是直接对接客户,接触最原始的需求,这些需求很可能是客户的一段话,也可能是一个需求文档,所以对于我们设计人员理解需求的要求就比较高了。我常常跟别人说,一定要多思考。因为设计师所有的产出物都依赖于我们的思维。在动手之前一定要多动脑。

 

01.B端产品设计原则  

B端产品最重要的价值应该就是降本增效了。那么我们设计师如何通过专业的角度,去发现问题,解决问题,实现企业通过产品达到降本增效的目的呢?
 
我总结了十个设计原则:可用性、易用性、可见性、明确性、一致性、合理性、习惯性、便捷性、高效性、扩展性。
 
可用性:我们做的任何产品和需求都是给人使用,解决某人在某种场景下的某个问题的,那就要可实现可用。举个例子:小明是个光头,你走过去跟他说,洗剪吹了解一下。那他一定不会搭理你。对他来说当下你的建议没有可用性。
 
易用性:我们经常会说这个东西太好用了,这个东西设计的反人类,太难用了。这就是易用性的价值。直接影响用户体验的问题。
 
可见性:我认为可见性的问题就是信息结构分类分层的问题,重要的信息是否清晰可见,可以快速引导用户当前在什么场景能做什么事。
 
图片
 
明确性:产品信息内容的准确表达,用词明确。
图片
 
一致性:产品的跳转逻辑,交互方式,结构布局,语言体系都要保持统一,并且和品牌形象保持一致,创建用户的认知和使用习惯。减少用户的学习成本。
图片
 
合理性:业务流程符合操作逻辑,交互设计和视觉设计层符合规范,遵循一定的现实物理特性。
 
习惯性 : B端产品很大一部分需求是将一些线下流程的线上化处理,所以在设计业务流程的时候要考虑用户处理流程的习惯性问题以及用户使用平台操作的习惯性问题。比如我们习惯把五角星的图标识别为收藏功能。就不要打破用户的这种认知习惯。
 
便捷性:基于B端产品的业务复杂性,我们要适当的在某些地方提供快捷操作,提高用户的操作便捷性。比如导航的快捷搜索功能。
 
高效性:B端产品里用户的使用目标就是高效处理任务。所以平台在功能设计上要尽量简化操作,能一步完成的事一定不用二步,提高用户的工作效率。
图片
 
扩展性:在设计框架和内容的过程中要考虑后续扩展的可能性,有些框架内容如果有增加或者修改要怎么处理和展现。
 
接下来我们就结合B端产品的特点围绕这十个原则,讲述一下交互设计过程中的思考总结。
 
 

02.设计目的和业务逻辑的理解  

积极有效的沟通贯穿整个设计过程!一定要沟通!沟通!沟通!我们设计的过程要与项目组的很多角色对接,客户,需求,开发,测试,每个角色站的角度不同,考虑问题的方向就不同,积极有效的沟通可以避免走很多弯路。一定不要自己闷头想当然,你以为的并不是你以为的!简单说就是有疑问就找相关负责人沟通。“打破沙锅问到底”在这里非常适用。
 
首先我们要了解需求(也可能是产品,这里就拿需求来讲)的背景,结构和内容。

 

1.为什么做这个需求?

这个需求从何而来?这个问题有助于我们了解它产生的原因,挖掘真实的需求。它是为解决什么问题而产生的,跟它所关联的内容有哪些?这个需求是属于新增的还是优化的,还是bug修复?如果是优化的需求,是什么原因要做这个优化?方便我们快速找到问题,做出优化方案。比如我们发现有一些需求是隶属于某一个系统下的,那么我们设计的时候就要遵循一下以往的设计规范与原则。保留用户的操作习惯等等一些继承的问题。

 

2.这个需求有什么功能?

大概了解一下这个需求要实现哪些功能?这些功能的复杂程度是怎样的?(这里需要跟开发人员也沟通一下大概实现的难度和周期。)实现的周期是多少(我们要根据周期制定我们设计的方案)?要在哪些终端上展现?权限是怎样划分的?用户角色有哪些?

 

3.怎么实现这些功能?

这些功能要通过哪些技术手段实现?实现的方法有很多,我们要判断在资源,时间,成本,实现难度,用户体验等等的各种因素下用那种实现方案更优?这个阶段需要跟各方人员共同商议出一个解决方案。当然这是一个比较概括的方案。我们往往会制定几套方案,在实际执行的过程中随时调整这个方案。

 

结构梳理

这里就需要用到思维导图了。我们要对整个需求的信息架构做梳理。包括功能结构,业务流程,跳转逻辑。

 

1.功能结构

功能结构其实就是对整个需求的框架结构的呈现。根据需求功能划分框架结构。主要分为树形结构,矩形结构,线性结构,信息结构。
 
树形结构:从上到下的信息架构完整地容纳需求的所有内容。基本单位是节点。比如个人设置是一个大的模块单元,里面包含基本信息设置/账号密码设置等。适用于层级较深,每个单元模块之间保持一定的独立性,呈树形结构的信息内容系统。
矩形结构:这种结构用户可以带着不同的需求快速找到自己想要的内容。不同分类下的内容相互穿插。适用于内容的标签分类筛选系统。例如表格页面的标签分类筛选功能。
 
线性结构:单向流程结构。适用于专注度高,业务流程单一的结构,用户在当前页要么返回,要么下一步,只能沿着一条线往下进行。例如注册,新建内容等场景。
信息结构:适合简单的信息呈现,按照信息的重要程度做分层处理,划分出结构。

 

2.业务流程

这一步需要画出业务流程图。
业务处理的每一步过程去向,下一步的处理逻辑和反馈结果,返回路径,业务角色权限划分,操作流程路径是否一致?异常情况,例如中断的处理与提示。
图片

 

3.跳转逻辑

在分析跳转逻辑之前要明确业务功能之间的关联,是上下级关联关系,还是分属同级模块?或者是页面操作的新增,修改,编辑,详情等内容?页面层级关系决定跳转逻辑,同样层级关系的跳转逻辑&跳转方式要保持一致。业务流程如何跳转才能清晰引导用户?一个页面中操作会不会有关联或冲突?这些问题都要在这一步考虑清楚。
 
常见的跳转方式有直接跳转、左右跳转、上下跳转,侧滑,弹窗等,在设计时需要考虑好其中的关联性,给出最符合用户心理预期的过渡方式,从而做出最合适的设计。具体的跳转方式的使用这里就不详细讲解了。网上有很多相关的教程。

 

 03.交互设计  

这一步我们需要交付交互设计文档和线框图。这一步一边做一边也要及时跟开发和需求去沟通,一方面确认自己的业务理解和展现形式符合业务逻辑和客户的要求。一方面确认你的设计方案开发可以有效高效地实现(很多设计小伙伴说我的设计方案很好呀,只是开发没能力实现。emmm….)。每个公司的开发团队能力都不一样,要根据团队里的实际情况去做设计推动项目的落地。毕竟我们做的设计还是要让人用起来的呀。所以懂一些开发知识是很有必要的,到底真的是开发哥哥想偷懒,还是真的有难度,岂能躲过我们的火眼金睛!!
 
交互设计这件事如果展开说恐怕要说三天三夜也说不完。我这里只给大家提供一个设计思路,大致需要注意的一些关键点。详细的交互设计知识,还需要大家慢慢了解学习。尤其是想专注做交互设计的伙伴们。
 
我们在输出交互设计的过程,大致要从信息载体,信息设计,导航设计,权限设计,图表设计,组件设计,反馈机制,语言设计,特殊场景,动效设计这几个方面去考虑。
 
注意设计过程中交互时的操作状态是否明确合理,交互效果是否可以实现以及不同终端的设计规范和原则。

 

1.信息载体

我们要清楚我们做的需求是要在哪些终端上展现?不同的终端有不同的交互方式。是pc端还是移动端或者是车载设备,电子屏幕?是ios系统还是安卓系统?我们的设计要符合不同系统和平台的设计规范。横竖屏幕要如何展现?分辨率都有哪些?如何适配不同分辨率下的展现效果?是否需要版本适配?是否需要硬件交互:话筒,蓝牙,定位,相机等。是否需要硬件联动:打印机,出票机等。

 

2.信息设计

B端的信息设计包括信息来源,信息分类,信息状态,信息显示等。
信息来源:我们要明确信息的来源是哪里?后台传输还是前台展示还是用户录入。
信息获取的方式是什么?自动更新还是操作触发?刷新的方式是手动还是自动?
信息分类:根据业务需求,划分信息类型,显示层级,由高到低,按照设计原则规划信息展现的比重和方式,把数据结构化。
图片
 
信息状态:要考虑信息的默认状态,为空状态,常规状态,内容过期状态下应该怎么显示和布局。
 
信息显示:信息的显示要考虑信息的极限值,非最优展示效果,重复或短缺(显示不全怎么办)情况,异常显示:敏感词,内容违规,数据获取异常,加载时间过长等情况。

 

3.导航设计

导航的结构决定了整个需求的架构系统,页面层级。简单清晰的导航可以让用户快速清晰地获取整个需求的功能和内容概览。一般根据导航层级和内容的不同,我们会分为横向导航,竖向导航,标签导航,组合导航等方式去安排布局。功能复杂的导航应提供搜索与快捷菜单。

 

4.权限设计

角色权限影响功能和数据的展现。要注意角色类型的清晰划分。角色能不能转变?怎么创建角色转变的系统感知?

 

5.图表设计

图表的内容分为:标题,指标,指标值。我们要根据业务需要选择合适的图表形式展现图表的内容。比如柱状图一般适合表示各个指标之间的对比关系,折线图一般适合一段时间内的指标变化趋势。还要根据页面布局空间大小选择合适的展现形式。确定指标的枚举值,指标值的范围。图表之间的关联性等。

 

6.组件设计

这里就不一一列举了,具体的分类和使用方法可以在ANTD的官网查看一下就知道了。
https://ant.design/docs/spec/overview-cn
组件的交互形式按照使用场景,保证功能的全面性,避免漏掉组件交互状态。
这部分我会在以后的文章里详细总结。

 

7.反馈机制

反馈分为系统反馈给用户的,用户对系统的主动反馈,系统通知。
用户反馈要设置好入口与方式。防止反馈对用户的干扰,简化反馈流程。
系统的通知要确认好方式,是邮件,信息还是其他。通知时间,内容格式的统一规范。
 
操作后的结果反馈时间,方式,位置的设定。操作异常的提示,公告引导的提示,错误纠正。
 
反馈机制要做到简单明确,轻重得当,前后统一。既防止用户的误操作,又做到人性化的提醒作用。

 

8.语言设计

平台的语言表述要统一,提示用语,称谓,菜单与命令用语,标点格式,产品和功能名称要保持一致性,符合操作场景,能明确引导下一步操作,要有一定的人性化表达。以人为本,风格恰当。B端产品的语言体系要区别于其他产品,大众化词语难以达到业务术语的精炼效果,强制大众化反而不易理解。

 

9.特殊场景

注意一些极端情况下的设计,比如恶意使用的场景考虑,我们的使用场景和规则都是基于正常的使用场景去做设计,但是不能排除就是有些人想跟你唱反调,我就是要这么做,系统该怎么反应?如何处理这种操作?内容缺省异常状态该怎么设计?中断情况,比如硬件故障,断网,用户退出,系统该如何处理当前的场景?设计的过程中不要漏掉这部分的容错和防错机制。
 
还有一些其他因素的考虑,比如一些情感趣味性,品牌传达,商业性的融合设计。

 

10.动效设计

在设计这部分内容的时候主要考虑转场过渡方式的选择以及节奏的把控。具体的设计方法笔者会在以后的分享里跟大家碎碎念,一起来探讨。也会出一部分动效的作品给大家。希望大家到时候能关注。笔芯~

 

 04.视觉设计  

这部分想聊一个问题:总是会有非设计人员对你的界面指指点点,我相信几乎每个设计师都会遇到这个问题。我们要用专业的视角去告诉别人,你为什么这么做?而不是凭感觉做设计,哪怕是界面上的一根线,也要做到有理有据。给予别人专业的建议,一个圆和一个方形,那个更适合放在界面当中,为什么?会让人更理解你的设计。我们要具有解释设计作品的能力。
 
视觉设计要运用到很多相关的知识体系。
比如人的视觉焦点:会沿着f曲线运动,人的大脑处理图形的速度远大于文字。
注意设计过程中的对比和一致性,配色,排版,文字,间距,图形的运用。
比如栅格系统,可以使你的界面布局保持一致,整洁和规范。
 
B端系统的配色要注意红绿色的使用。因为一般会用这种颜色区分一些业务等级,随便的使用可能会造成一定的误解。整套的配色方案应该和品牌形象结合在一起,根据颜色的性格,明确主色,辅色,点缀色,注意不同色块体积的运用。
排版要做适当的留白,对齐。文字的颜色、大小,字重区分层级,间距。
整个系统的视觉表达风格统一。 

 

原文地址:墨染动效(公众号)

作者:乔公子

转载请注明:学UI网》B端交互设计过程中的思考

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

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

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

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

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



从微信朋友验证功能迭代,看交互设计对产品的价值

seo达人


一、功能背景

随着社交网络的扩大,用户网络好友越来越多,但是这些好友并不是真正的朋友。久而久之用户开始陷入社交恐慌,不愿意发朋友圈或者发朋友圈时反复斟酌。
于是微信在添加朋友和朋友验证时增加了关系分级设置,有利于减少用户发圈的心理压力,提高发圈积极性。
其实该功能并不是新功能,微信7.0.9版本已经上线了,只不过功能并没有植入在朋友验证页面,信息层级比较深,导致用户可能不知道或者懒得设置。
图片
从8.0版本开始,该功能添加到了朋友和朋友验证页面,强化了曝光展示,方便用户快速完成朋友权限设置。

 

二、设计迭代

1、初始版本
最初上线时,“朋友权限”功能需要用户手动选择,并将“仅聊天”作为了首选项。用户选择了“朋友圈”选项,会展示关联信息设置。
“完成”按钮延续了7.0版本的布局,放置在右上角,根据选项是否选择,增加了按钮状态区分。
图片

 

但是无论组件形式还是视觉表现,用户都不太容易感知到朋友权限是可操作项和必选项。加之7.0版本培养的行为习惯,用户不会主动浏览完所有内容后再进行操作,而是直接点击右上角“完成”按钮。
用户的行为过程就变成了“点击按钮>>发现错误提示信息>>完成权限选择>>二次点击按钮“,无形之中增加了用户交互成本。
图片

 

对于好友数量少的用户,或许没有切身体会。但是对于一些引流号,每天都要添加好友时,则增加了操作步骤,影响了行为效率
下面是我从网络上找到的一些用户反馈,虽然用户数量不多,但是代表了部分用户的心声。
图片

 

2、版本迭代记录
紧接着朋友验证页面开始了密集更新,粗略估计已经迭代了3~4个版本。

 

版本迭代1
图片

 

1)增加标签功能,提高用户效率
为了更好的管理好友关系,朋友验证页面增加了“标签”功能,并将标签平铺展示开来,方便用户快速选择。

 

2)优化布局
“完成”按钮从右上角转移到了页面下方,用户视觉动线更加顺畅,有利于引导用户完成内容浏览,操作更加便捷。
从产品角度出发,朋友友权限首选项调整为了“朋友圈”。因为作为一款社交产品,还是希望用户更多的交流互动。

 

版本迭代2
图片

 

1)精简页面信息
或许是数据显示设置标签的用户数量并不多,平铺展示反而增加了页面的信息量。或许是考虑到小屏幕手机空间有限,标签平铺影响到“完成”按钮在一屏内露出,需要上下滚动才能完全查看屏幕内容,增加了用户的行为成本。
于是标签功能弱化为入口和选择结果展示,引导用户跳转二级页面操作,减少了页面的信息负荷。

 

2)统一展示样式,强化功能引导
朋友权限调整了视觉样式,背景色与其他可操作项统一,增加必选说明和操作选择框,引导用户做出选择。但是必选功能还是让用户无法理解,为什么联系人较多,就要手动设定权限呢?

 

3)增加防错设计,减少用户错误几率
用户未进行出朋友权限选择时,“完成”按钮处于不可用状态,有效防止用户直接点击的错误。

 

版本迭代3
图片
经过一段时间的学习,用户已经形成了功能认知。最终微信将“手动设置”调整为了“默认选择”。既保留了用户的选择权,又简化用户操作并且精简了选项信息内容,与朋友权限页面文案保持一致,便于用户浏览和理解。

 

三、设计总结

1)产品设计不一定必须一步到位
为什么微信在初始版本中不采用系统默认选择,提高用户效率呢?是设计师没想到吗?
我个人认为“系统默认选择”必然是最初的设计方案之一,之所以初始版本强制用户做出选择,或许是产品为了收集用户真实行为数据、培养用户对新功能的认知而制定的发展策略。所以交互设计需要服务于整个产品发展策略和目标。

 

2)用户是懒的
大多数用户喜欢简单,对于某些信息会“视而不见”。因此某些场景下,需要增加一定的行为障碍点,引起用户的关注,培养用户认知。当然前提是用户对你的产品有足够的依赖性,否则就可能放弃你的产品了。

 

3)设计是不断试错迭代的
设计师可以通过各种设计策略去影响用户行为,但是需要充分考虑用户认知、行为习惯、操作效率、学习成本等多方面的因素。只有通过不断地迭代,才能找到真正满足用户需求的设计方案,即使是一个小功能。

 

写在最后
说到功能本身,对于我个人而言确实挺鸡肋的。我不是朋友圈的重度用户,也不会去设置朋友圈的权限。但是每次通过好友验证时,都要面对着一行行的内容信息,忍不住会多看几眼,生怕出现什么设置项变动,影响到好友关系。
大家是怎么这个功能的呢?欢迎留言评论交流~

 

原文地址:子牧UXD(公众号)
作者:子牧先生
   

转载请注明:学UI网》从微信朋友验证功能迭代,看交互设计对产品的价值

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

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

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

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

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




详解|交互设计中的色彩搭配,这样更有效!

seo达人

图片

△ 豆瓣 App 电影榜单卡片

 

颜色的搭配其实是一个非常值得研究的问题。深入剖析的话内容也会很多,本文会告诉你,颜色如何挑选会更有规律,并保证基本和谐

 

1. 色彩学概念浅谈

想要做好色彩的搭配,需了解一些色彩学概念。色彩学将颜色分为:同类色、类似色、邻近色、中差色、对比色、互补色。这几种颜色通过色相环的角度进行取色,如下图所示:

图片

任意颜色都可以作为基色,每一个基色都有其相对应的同类色、对比色、互补色等等。

通常情况下,相邻的两个颜色,选择基色和邻近色之间的颜色,也就是与基色之间的角度 ≤ 60° 的颜色,会让页面的颜色显得和谐统一。

图片

△ 得到 App 服务内容卡片

 

图片

△ QQ 音乐 App 榜单卡片

 

如果选用对比色和互补色,则需要控制颜色的面积,比如以红色为主的页面中可以出现蓝色,但蓝色的面积占比最好不要超过 20%

除了色相上的变化,颜色还有明度纯度上的变化,对于颜色的影响也至关重要。这三个词汇的概念如下:

  • 色相 Hue:也称色调,是指色彩的相貌
  • 纯度 Saturation:也称饱和度,是指色彩的鲜艳程度
  • 明度 Brightness:也称亮度,是指颜色的明暗程度

色相、纯度、明度三者构成了色立体的概念,让色相环由二维变成了三维的概念。

图片

 

2. HSB 色彩模式

RGB 和 CMYK 是我们较为熟知的色彩模式。而根据上文提到过的色彩学概念,在实际工作中我们也可以借鉴 HSB 色彩模式进行调色和选择颜色。

在 sketch 和 PS 的 HSB 色板界面如下图:

图片

其中:

  • 色相 Hue (H):取值在 0-360 度之间
  • 纯度 Saturation (S):取值在 0-100 之间,数值越高色彩就越纯艳
  • 明度 Brightness (B):取值在 0-100 之间,数值越高色彩就越明亮

图片

由于纯度 Saturation (S) 和明度 Brightness (B) 之间的数值都是在 0-100 之间,因此两者具备一定的对应关系。这些数值可以为你在选择颜色时提供依据。

具体怎么使用这些数值,我们用案例来说明:

 

案例  

某 PC 端产品功能卡片需要做配色设计:

图片

已知产品的品牌色是以下两个颜色,其 HSB 色值如下图所示:

– 颜色 A:H=233,S=74,B=100(主色)

– 颜色 B:H=267,S=79,B=100(辅色)

图片

因此卡片的衍生色我们可以使用:蓝色调 + 临近色,且临近色的颜色最好介于蓝色和紫色之间,会使产品页面颜色的搭配更加和谐统一。

于是我们可以先根据品牌主色:

– 颜色 A:H=233,S=74,B=100

来确定初步颜色,我们只改变色相(H)的数值,分别在 233 的基础上进行 +10 和 -10,由此可以得到三个颜色 A1、A2、A3,呈现效果如下图:

– 颜色 A1:H=253,S=74,B=100

– 颜色 A2:H=243,S=74,B=100

– 颜色 A3:H=223,S=74,B=100

图片

现在的卡片颜色略显单薄,我们可以再给每一张卡片加一个颜色,做出过渡色效果。于是我们在数值 A1、A2、A3的基础上,保持色相(H)不变,只改变这三个数值的明度(B)和纯度(S)的数值。以颜色 A1 为例:

– 颜色 A1:H=253,S=74,B=100

现在,我们想要得到一个比 A1 更深一点的颜色 A1-1,根据色彩学理论,我们可以降低明度(B)的数值,这样颜色会变深,同时增加纯度(S)的数值,这样颜色会更沉稳纯正,为了保证数值可控,我们将明度(B)降低 26,将纯度(S)提高 26,所以可以得到颜色 A1-1 的色值:

– 颜色 A1-1:H=253,S=100,B=74

A1 和 A1-1 的颜色效果如下图:

 

图片

按照此方法,我们可以得到两组颜色和其数值:

图片

所以我们的卡片可以使用渐变色:

图片

这样卡片的颜色就基本确定下来了,我们可以再调整下卡片的细节,比如增加相关的背景插图,调整卡片上的文字排版等等,这组 PC 端卡片最后的效果如下图:

图片

 

3. 补充说明

一个页面中元素的色彩选择有很多影响因素,比如:产品的品牌色、页面的功能、页面的内容、氛围等等,所以还是要具体情况具体分析,综合考虑选择颜色。

当然,以上提出的这些数值只是参考,为的是给你的颜色选择提供理论支撑。在实际应用中,也还是需要设计师根据具体情况,以及人眼视觉感知的效果,酌情做颜色上的优化处理。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》详解|交互设计中的色彩搭配,这样更有效!

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

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

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

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

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



渐进式披露!交互设计领域独有的设计方法论

seo达人


一、什么是渐进式披露?      

在产品设计中常常能听到这样的说法:把控制权给用户,确保用户明白一切都在自己的掌控之中。

虽然更多的选择会让用户兴奋,但问题是过多的选择也会让用户无法轻易的作出决定,反而造成体验上的负担。

图片

渐进式披露不再是简单地给用户提供大量的信息和选择,而是将这个过程分解成几部分,让用户集中注意力在当前的事件上,从易到难地引导用户。

这样不仅可以确保用户不会被新信息淹没,还可以分解用户不想做的任务。例如将一个特别长的表单分成三或四个步骤,分步进行填写,同时还能单独查看每个步骤的内容。

图片

 

二、渐进式披露的优势

想象一下这样的场景,我们刚下载了一款新游戏,进入游戏后发现里面有各种各样的游戏规则和操作细节,如果只是简单地将所有游戏信息推送出来,那么我们可能就会淹没在各种规则和细节里,根本记不下这么多规则,甚至会影响游戏体验。

产品设计也是如此,以一种渐进的方式呈现信息,可以让用户在深入了解产品细节前就投入到产品的使用中。

图片

对新用户来说,渐进式披露让他们有足够的时间熟悉产品的基本知识,然后再进行更复杂的功能或任务,这样可以让整个产品更易于探索并提升可用性。

渐进式披露可以让用户的整个体验更加高效,改善用户对设计的第一印象,并帮助他们克服学习曲线。

 

三、渐进式披露设计准则

划分主次和优先级

渐进式披露主要的目的是将用户注意力集中在重要的事情上,尤其是在一开始的时候。

在设计时,我们要考虑导航菜单以及选项的优先级,信息和功能的呈现也必须如此,通过渐进式披露能让用户首先体验产品最核心的功能和信息。

图片

将注意力集中在关键功能上。比如进入电商App,重点是引导用户如何完成从看到买的整个过程,至于用户是从主页购买、搜索购买,还是从直播购买,这些等待用户慢慢去发现。

 

从主要内容向次要内容过渡

对于想要了解产品中每个功能的用户来说,除了明显的主要内容,次要内容的呈现也变得很重要。

通过好的按钮设计或可点击的链接来实现从主要内容向次要内容过渡。

图片

 

四、渐进式披露案例分析

Noom

Noom不会一上来就向新用户介绍众多的功能,而是随着用户不断滑动查看产品,一次推出一个功能。

图片

Noom通过这种让人感觉比较自然的方式来完成信息的呈现,从整体上提升了用户体验。

 

谷歌浏览器

谷歌浏览器的导航支持个性化设置,这样用户就可以把常用的内容设置到上面,通过点击主导航栏上的更改就可以轻松定义内容。

图片

谷歌浏览器的高级设置包含了大多数用户不需要触摸的内容。这些内容不是立即可见的,但在用户需要的时候仍然很容易就可以找到。

 

刺客信条

在《刺客信条》创建的游戏世界中,玩家不会从一开始就被各种信息轰炸,而是随着他们深入游戏时,在动画和对话框中获得更多的游戏信息。

图片

游戏中信息披露的一个好处是,玩家只会收到与当前玩游戏时相关的信息。这让玩家尽情享受当前的游戏,不用担心会忘掉各种规则。

 

多邻国

学习一门全新的语言多少有点困难,需要在开始的时候记住太多的细节和信息。多邻国可以帮助用户掌握每节课上的一些关键概念,不会给人们带来大量的细节或复杂的短语。

图片

渡过新手期后,多邻国会在主页逐步披露课程内容,因此用户调整自己的学习节奏慢慢来,避免产生畏惧心理。

 

最后

渐进式披露在体验设计中扮演着重要角色,可以有效改善用户的初次体验,缩短学习曲线,并帮助用户通过产品实现目标。

 

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

作者:Clippp

转载请注明:学UI网》渐进式披露!交互设计领域独有的设计方法论

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

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

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

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

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




干货|交互设计中的「有效反馈」7大准则!

seo达人


准则 1.  Timely —— 找准时机,即时反馈

在用户操作后尽快 / 立即给予反馈是最有效的。即时反馈有助于帮助用户养成正确的操作习惯,或纠正用户的不当操作。

如果反馈内容需要较长时间的加载,也可以给用户设计一些有特点的 / 情感化的加载状态,缓解用户等待的不耐烦,又可以传达一定的品牌调性

例如:知乎 App 在加载内容的过程中,增加了 IP 形象的动态效果:

图片

 

准则 2.  Specific —— 具体分析,差异对待

在设计交互反馈时,不仅仅要给出正确或错误的判断结果,同时也应该考虑到用户的个性化需求,针对不同类型、场景、地区的用户提供差异性引导和服务。

例如:大众点评、高德地图可以根据用户的位置,在用户开始使用产品时就推送个性化信息:

图片

 

准则 3.  Balanced —— 正负反馈,穿插结合

通常来说,正面的反馈会激发用户的自信等积极情绪,因此我们更习惯使用正面反馈。但是一些不得不使用负面反馈的时候,我们可以在其中穿插一些正面的消息,减少或缓解用户的因负面反馈带来的消极情绪。

这就好像是别人跟你说:“ 坏消息是……,但是,这样做的好处是…… ”,坏消息不可避免,但加上一点转折,就会让他人心里稍微舒服一些。

例如:美团单车在你骑完车之后,需要支付费用时提示你可以购买单车套餐,虽然是在劝用户花钱,但看上去依旧很友善,其中的话术包括:“本次骑行免费”,“当前已是最优价格”:

图片

 

准则 4.  Instructive —— 提示下步,指引行动

有效的反馈会主动多引导一步,对用户的下一步行动给出清晰的、正确的、指导性的意见,有助于驱动用户继续做出有效操作。

很多 App 在截屏之后都会给出下一步分享的路径引导:

图片

 

准则 5.  Emotional —— 情感属性,引起共鸣

有科学依据证实,人脑会更容易被附带情绪的信息所吸引。用户更有可能会注意那些看上去承载了一些情绪的反馈,从而也更有可能改变其行为方式。

例如:虽然只是一个提醒弹窗,QQ 音乐会员到期的续费提醒文案却经过精心的设计,由各类歌名组成的一句话,每天的到期提醒都不同:

图片

 

准则 6.  Traceable —— 可被溯源,可供反馈

一些特殊情况下的、有重大意义的反馈可以被追溯到其根本原因,可以提供给用户进行申诉和询问的渠道,供用户进行反馈。

例如:电商平台和外卖平台都会在用户下单或退单之后,提供商品物流的详细信息,在查看购买的商品的当前状态时,并可以追溯到商品所在的各个历史环节:

图片

再比如,高德打车如果发现用户的行程订单金额与预估金额差距较大时,会给用户发短信提示,并给出客服和投诉渠道:

图片

 

准则 7.  Less is more —— 质量优先,减少数量

在这个信息过载而注意力稀缺的时代,好的反馈在于质量,不在于数量。有时数量越多,反而会对用户造成不必要的负担。用户并不需要给出很多反馈或者记录生活中一切信息的产品,而是需要能够帮他们理出头绪、提出有效解决方案、呈现有用信息的产品。

以上这 7 大准则,来源于我们日常工作中的积累和沉淀,对于设计产品的交互反馈具备较高的指导意义,希望对你有启发。

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》干货|交互设计中的「有效反馈」7大准则!

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

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

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

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

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



B端交互设计在产品需求全周期中的质量保证

seo达人



为什么需要设计质量保证

在设计中,最常见的质量保证方式就是在产品验收环节进行「设计走查」。不过因为是上线前的最后验收环节之一,经常会出现因临近上线时间,且交互和UI类的问题在修改优先级中一般都是较低的,最后只能修改部分设计上的「bug」,其他只能舍弃或放入永远不会开工的下次迭代再改。设计师在各种来回扯皮之间筋疲力尽,看不到设计价值在需求中的体现,各种“这里设计不好”的锅一不小心也接了一堆。更严重的问题在于,用户得不到更优秀的体验,轻则耗费更多时间,重则放弃使用功能。不管哪种结果,对于产品整体满意度都会有不同程度的影响。

由此可见,设计质量保证仅靠最后临门一脚的设计走查远远是不够的。在需求全周期中各个环节都可以加入对设计质量的把控(Design QA)。Design QA的概念来源于研发流程中测试环节。质量保证缩写为QA(Quality Assurance),是产品交付流程中非常重要的一环,一般就是大家了解的测试工程师的岗位职责内容。在这个环节中,测试人员需要对产品功能进行仔细认证,确认是否满足了产品需求并且可以正常使用。但与测试不同,设计QA须加入到产品需求全周期的各个环节中,最终形成与产品设计并行的一个流程,才能有效保证质量。

 

设计QA实施步骤和方案

步骤1: 需求分级,确定是否需要设计QA

要保证设计质量,在B端设计中不是易事。我们经常会听到:

· “这个功能能用就行”:公司/团队不理解或不够认同设计价值是什么,不明白为什么体验会在每一处未还原的设计稿上慢慢丢失

· “这还原的不挺好,和你设计稿我看一样啊”:非专业的同事无法分辨设计稿与研发实现稿的细微差异

· “没时间改了,下次再说吧”:设计质量保证低于功能质量保证,或者团队必须在有限的时间交付需求

 

在接到需求后可以根据以往经验或与产品经理的沟通,确定本次需求设计等级:

  • A:公司级和部门级重点、设计周期长内容多、设计可沉淀输出的内容多的需求
  • B:正常迭代、量级一般的需求
  • C:时间紧迫倒逼排期、无前端研发资源、少量调整、评估不需要设计的需求

在确认等级后,作为设计师可以有一定的心理预期。对于A类可能各个环节都需要详细的进行QA,而对于C类有可能连设计走查都没有预留时间,只能靠后续线上的直接验证了。后面的几个步骤可针对不同的等级选取全部或部分进行实施。

 

步骤2:交互设计中,考虑极限下的正确展示

B端交互设计中,很重要却经常制作不到位的就是极限情况。看起来都是各种表格,简单的给定一个宽度即可,但在上线后经常发现,填充了真实商家数据的表格,总有意想不到的错位折行和重要信息截断,用户的可阅读性降低。

图片

                                             左:重要信息被截断;右:折行错位

 

步骤3: 设计评审与交付,交互说明与UI标注一体化

在完成制作后一定要进行评审,对功能完整性、页面流程、页面文案、组件特殊交互逻辑要求、交互可实现性与开发成本进行评估。项目相关利益人都需要参加,尤其是测试同事需要参与评审,保证后续测试用例编写质量。在交互与UI全部评审完成并通过后,交付给研发的设计稿最好可以做到交互说明文档与UI标注一体化,方便研发同事查看。避免在交互说明与UI标注中来回切换,导致交互或UI细节遗漏。这里推荐一个sketch插件:NoteBook Pro (需要付费,lite版大约¥76),方便在sketch中添加交互说明标注,在上传到可以在线查看UI标注的平台,比如Zeplin/Relay等。

图片

交互说明+UI标注在一个页面上同时呈现

 

步骤4: 参加测试用例评审,确保测试用例涵盖所有交互细节

一般来说,交互稿与UI稿交付给研发同学后,设计师就要开始忙下一个需求了。直到通知设计走查前,设计师暂时不会再随时跟进需求进展,而是交接到产品或项目经理手中。而在这个从设计稿到研发实现的过程中,设计师也需要在关键节点参与其中,确保设计质量。测试用例是其中一个设计师可以参与的环节。其实有时候很多交互文档中的内容会被用作测试用例,所以需要再次和研发与测试同学对齐所有交互内容,保证交互设计内容不会在此阶段被降级甚至直接去掉。

 

步骤5:设计走查,输出并记录结果

此环节很重要的一点就是走查文档或记录。未完成修改的内容,建议研发给出一个解释,并以文档的方式记录下来抄送给相关利益人,标明可能带来的风险。同时尝试与产品或项目经理沟通,推动迭代优化的具体时间,避免「下次一定」的无效承诺。

 

总结

设计QA是贯穿整个产品需求全周期的设计流程,在以往的点状设计走查之外,需要与团队上下游通力合作沟通,才能确保优秀的产品呈现在用户面前。

图片

参考文献:

https://blog.prototypr.io/the-qa-process-in-ux-design-7cd3ffa771ad

https://www.nngroup.com/articles/quality-assurance-ux/

https://uxdesign.cc/the-importance-of-design-qa-in-digital-product-design-c3f3d128270

https://wearebrain.com/blog/customer-ux-ui/ux-designers-and-qa-engineers-collaboration/

https://owl.tools/notebook-sketch-plugin

 

原文地址:京东设计中心JDC(公众号)

作者:唐朋博、李小猛

转载请注明:学UI网》B端交互设计在产品需求全周期中的质量保证

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

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

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

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

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




案例锦囊|交互设计中「情感化」设计优秀案例(二)

seo达人


1.  本能层 —— 感官刺激

对于本能层,设计师需要在符合功能需求的前提下,尽可能的给用户带来听觉、视觉、触觉的感官刺激,极力去促成用户与产品的 “一见钟情”。

 

案例 1  App Store 的卡片推荐做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名为:熊帮手。

图片

 

案例 2  微博长按点赞按钮,可以选择不同的点赞状态。图标还是动态的,很有趣。

图片

 

案例 3  淘宝双十一预热,首页的 icon 变成了 “今晚 20 点双 11 抢预售”的字样,烘托氛围又打了广告。

图片

 

案例 4  微信拨打语音的界面,在等待好友接听的过程中,可以看到好友朋友圈的图片,缓解用户等待时的无聊,也为即将进行的语音聊天提供了话题。

图片

 

2. 行为层 —— 细节引导

对于行为层,设计师需对用户的行为进行预判和引导,利用细节处理打动用户,让用户对产品产生信任感和依赖感。

 

案例 1  :当苹果公司发现用户最近在官方渠道购买了新的 iPhone ,老 iPhone 的设置页面就会给出提示,让用户为新的 iPhone 做好数据迁移准备。

图片

 

案例 2  iOS 系统后台在看缩略效果时,会将用户的敏感、私密的信息的 App 页面进行模糊处理,保护用户的隐私安全。

图片

 

案例 3  :在屏幕很暗的情况下,打开微信支付二维码,屏幕会瞬间亮起,便于商家扫码付款。

图片

 

案例 4  货拉拉在展示搬家车辆详细信息时,使用了剖面图,并模拟了不同搬家场景下的家具内容,让用户更好估算车辆空间。

图片

 

3. 反思层 —— 认知共鸣

对于反思层,设计师要调动用户最深层的记忆和感知,将视觉效果、产品功能和用户认知紧密结合,形成用户对于产品和品牌的深刻认知。

 

案例 1  FigJam 是一款来自 Figma 的多人协作在线白板工具,可以进行头脑风暴、绘制流程、多人协同标记等。里面也有很多人性化的小功能,比如:当两个人同时长按 “H” 键时,就会出现 highfive(击掌的动效),非常适合当设计师达成共识时使用:

图片

 

案例 2  小睡眠 App 发现学生时代的我们经常会在枯燥的课堂上睡觉,所以准备了各种课堂讲解、校长发言、领导开会的声音作为催眠、助眠的音乐,让人会心一笑。

图片

 

案例 3  饿了么在异常天气下通过在界面上增加天气的元素,让用户看到外卖小哥的辛苦,使用视觉和内容共情,唤起用户的同理心,降低用户因外卖迟到而做的投诉和差评。

图片

 

案例 4  QQ音乐上线了宠物功能,一共有五个品种的宠物让用户可以选择领取,多听歌能喂饱宠物,然后送它出去参加演唱会或者和好友进行互动。

图片

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网》案例锦囊|交互设计中「情感化」设计优秀案例(二)

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

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

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

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

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



如何设计好消费向app产品

纯纯

本文算是一篇产品分享文吧,主要科普一下消费向内容在KillTime方面都是怎么玩的。



Part I - 消费向产品及其发展科普

大家看上面那句英文,我用的是“Spend Oriented”,Spend这个词本身是一个偏中性的词,不光有花钱的意思。“消费”一词其实如果大家去查它的原始定义是指“利用社会产品来满足人们各种需要的过程”今天在这里说到的其实是“用户在上面消费内容”的app产品,这个内容可能是图文,可能是流媒体。也就是说,今天讲的app都和“Kill Time”有关。

那我们不妨先来看下面三页ppt:


1.消费向产品的演变:

我大概把今天要讲的消费向产品分为四类,第一类游戏略过就还剩三类:

a.图文Feed类app产品:

这一类产品其实是经历了从门户到app的演变的,早期互联网时代,所有的图文内容都在门户网站上,这时候的门户网站比如新浪搜狐网易,他们其实是内容为中心,用户围着内容转,用户会自己去挑选甄别自己想消费的内容进行消费。


然后从门户到app的过程中,最开始比如搜狐新闻app他其实是一个从门户到app的纯移植,他的本质没有变化,还是以内容为中心,用户围着内容转,不过后来随着移动互联网的发展,因为移动端的特性是“高频多次”,他就不像门户我只能上班的时候坐在电脑面前看,移动端的特性决定了我无论拉屎还是乘车,随时随地打开都可以看,那这个时候如果还是内容为中心,用户每次进来都需要进行一个很长时间的甄选内容的过程,真正消费内容的时间就相应的会被压缩,这时候就有了整个新闻移动端app产品从“内容为中心”到“用户为中心”的转型。第一次有了用户中心的概念,比如有了账号系统,用户可以收藏点赞(Mark)一些的自己感兴趣的内容,然后通过用户的点赞阅读点击行为进行推送和订阅:

除了新闻门户之外,还有一类图文产品就是兴趣聚合,最开始大家会发现都是一个产品主公一个方向,大家想看什么内容就去相应的地方:比如天涯猫扑就是一个讲故事和段子社区,榕树下主攻青年文学,虎扑是体育相关。大家在自己垂直的领域发展,互相也不怎么干涉。但是这些UGC平台的本质还是生产者,是人,随着每个平台都有自己的大V出现之后,网易推出了博客,这是一个以人为中心的分发结构的产品,除了以人为中心的分发结构外,百度心里想,不是之前的门户都很垂直么,那我是不是可以建一个平台,让各种兴趣在我这里以”吧“的形式聚合?于是就有了一个兴趣内容聚合平台”贴吧“,然后随着发展,大家发现博客这种东西用户消费成本太高了,一个大V一篇文章好几千字,生产内容也费尽,用户看着也费尽,那不如就做一个微型博客更多的让人发声就好了,于是有了微博。

△.既然说到这个了,在这里多扯远一点,其实互联网发展的进程都是这样,绕不开平台和垂直,大家想想五六年前的电商产品是不是一个道理,当年只有淘宝一家是平台,其他的,比如京东主攻家电,一号店是零食,聚美是化妆品,美丽说蘑菇街则是衣服(蘑菇街主打职场美丽说主打校园)


b.泛娱乐类类产品 & c.工具类产品:

泛娱乐类产品我这个框子画的很大,大概最初的原型是为了解决我们“听歌”和”看视频“的需求,然后最开始的几大门户大家都知道优酷土豆、腾讯视频、爱奇艺、搜狐视频、乐视等等。最开始那几年互联网基础建设不行嘛,科技也没发展到位,所以那时候视频清晰度都好低,而且下载率非常高,大家一般消费内容会采用”在家wifi先下好然后再看“这样的办法,但是随着基础设施的加固,大家发现流量好便宜,这时候在15年才开始有网红直播这一块的业务出来(游戏直播是很早就有的哈),我个人会认为催生网红直播产品的归因是科技进步流量不花钱了。随着网红直播类兴起的另一类产品就是短视频类,我个人认为短视频产品的出现本质归因除了流量不花钱了之外,更多的是解决之前门户视频网站内容消费成本过高的问题,众所周知,现在人越来越懒了,一集电视剧40分钟,很难坐得住不分心的看完,所以现在视频app出了倍速播放。这本质的原因是用户消费内容的High点(达到满足的点)越来越高了。

再说听歌这条线的演变,最开始听歌,然后唱吧、全民K歌,国外的Starmaker等等出来做了唱歌app,这时候的app本质是一个工具,但是用户UGC内容的时候沉淀了很多作品在这些工具app里,所以这一类产品就开始做去工具化,变成了一半社交一半工具的产物。另外K歌产品火了之后,才有的FM类产品,因为都是消费音频和音频直播嘛有共性在这里就不展开了。最后就是这类音频产品不满足只做音频,所以就开始做视频了,这就导致你现在打开全民K歌或者唱吧或者国外的好多app,你会发现只要是娱乐产品都有短视频的原因。


2.消费向产品的核心目标:

GNT是一个罗振宇2016年年终演讲时候提出的词,我们假设平均每个人每天8点到家到晚上12点的时间是可支配时间,那中国网民每年新增数量(今年是1000w)已经稳定在和出生数量一样了,所以我们认为网名总数不太会有啥变化,比如之前我用三个小时在优酷腾讯爱奇艺上看电视剧,一个小时听网易云音乐,现在我大概只用一个小时看电视剧其他三个小时都在刷抖音,这时候,大家会发现消费向产品的决战维度就不是自身的垂直领域了,之前我们会认为视频门户哪家片源优质哪家就牛逼,现在不是的,现在的产品除了垂直比较之外更多的竞争是在时间维度的较量,这是为什么抖音这种产品突然一下很火的原因,我稍后会着重说抖音这里就先略过了。

3.为了占用更多的用户时间,设计师可以发力的点:

内容源是否优质(这里的”优质“指的是内容和用户的March值)其实是用户是否消费的最大的一个指标,因为内容源和用户的March值主要反映在下面的前两个问题中:

给用户展示什么内容?

这些内容的优先级是怎样的?

这两个问题一般我们设计师并不能控制,关于什么时间什么环境下给用户展现什么内容,往往跟用户历史行为和算法有关,如果大家看了头条的算法公开课大家会知道头条的推荐算法其实是有三大类(内容维度、用户侧特征、环境特征)几千万个向量特征去控制的,如果不是纯算法推荐也会有运营去干预内容的露出,所以这部分其实设计师可以干预的比较少,我们真正可以干预的东西是后两个问题:

如何让用户迅速找到自己感兴趣的内容进行消费?

——这就涉及到内容源呈现方式的抉择问题。

如何尽可能的降低用户消费内容时的交互成本?

——这就涉及到两个问题,一是从交互上让用户尽可能沉浸消费,二是交叉推广和分流的问题。


Part 2 - 消费向内容的主流呈现形式:Feed Flow

△.谁能告诉我一下Feed Flow(我们工作中所说的”Feed流“中文怎么翻译?Orz...)


1.RSS vs Facebook's New Feed

如果大家是一个早期互联网民,一定听说过RSS的概念:

RSS (Really Simple Syndication简易信息聚合协议)是一种的工具,使得用户可以在客户端借助于支持RSS的聚合工具软件,在不打开网站内容页面的情况下阅读支持RSS输出的网站内容。举个栗子:如下图所示,小张在pc时代,每天会定时打开华尔街日报网,ChinaDaily,王老三的博客看里面的内容,但是每天都打开三个网站让小张觉得很烦,这时候借助RSS工具,他可以把三个(支持RSS协议的)内容源聚合到一个第三方的RSS工具上,这样他就不用每天反复打开三个网站了,除了获取这三个网站的陈旧内容之外,这三个网站每天的更新内容也会被实时呈现在这个RSS中:

一个RSS聚合工具内,每一个单条内容源,就称为Feed(取的是滋养的意思,就是源源不断的满足用户消费需求的含义),那早期的Feed序列大家也看到了是从RSS衍生出来的概念,Feed流的排序也是用户定义的,比如可以按照Timeline排序,或者是按照用户自定义Tag聚合,或者是按照interest标签(收藏,喜欢,点赞都属于泛意义上的interest),那大家就明白了,RSS里的Feed流本质上是一个用户自定的,关于内容收集的工具而已。

到了2006年,我们的爸爸Facebook开始做社交,因为Facebook是人和人的关系聚合,其实当时Facebook就借用了Feed的概念,创造出了以“关注Follow”为核心的新型Feed,在书上(我忘记是哪本书了)把它称为Facebook‘s New Feed,它其实有三个特征:

1、内容源从URL到人的状态(其实本质也是一个一个URL序列)。

2、不仅仅是Timeline的基础排序,更多的指标参与进来决定内容排序

3、订阅内容中夹杂费非订阅内容(参考微博),让用户永远刷不完没有尽头的消费

上图是RSS和Feed的对比。

到了今天,其实几乎市面上所有消费向产品(新闻类、微博、Instagram、Snapchat、短视频、等等),都在Facebook New Feed的基础上进行了改进,所以今天我们把这种New Feed更习惯的叫做Feed,大家可以去PM社区之类的搜Feed能发现一堆文章可以阅读,在这里就不赘述了。


Part 3 - 匹配、分发与消费

知道Feed的概念能方便我们理解接下去的问题,还记得接下去是什么问题吗?

1、如何让用户迅速找到自己感兴趣的内容进行消费?

——这就涉及到内容源呈现方式的抉择问题。

2、如何尽可能的降低用户消费内容时的交互成本?

——这就涉及到两个问题,一是从交互上让用户尽可能沉浸消费,二是交叉推广和分流的问题。


1.先分发,再消费的app模型:

我们不妨先来看主流的Feed分流的两种模式:

一种是微博这样的关注序列插入非关注序列(推荐、广告等),另一种就是关注序列浏览完用户拉不出新Feed的时候有个分流按钮提示,别小瞧这个小提示,往往能带来每天5-7%(我自己的工作经验数据)的新模块引流。


再说用户迅速找到自己感兴趣的内容进行消费的问题,这里就涉及到内容源的呈现方式。我之前唱吧的那篇文章举过这样一个例子:

唱吧7.0到8.6的三次改版牺牲了展示效率(从7到5)HighLight了文字信息,是因为我们发现图片信息不足以让用户做兴趣判断,大家看下图就明白了:

快手的图片本身就是内容的简略呈现形式,大家可以基本通过图片来得知里面的内容大概是什么,如果遇到用户难以判断的,快手在用户上传视频的时候鼓励用户打字说明,比如大家能看到图中的红字,就是说明视频内容的。这样的话,用户通过图片能清晰得到点击之后的内容预期,比较符合用户心智。大家再来看唱吧,大家会发现图一图二图三都是漂亮的小姐姐,这个就没办法告知用户里面的内容究竟是啥样的,那支撑用户点击进去的除了颜值之外,更多的可能是歌名,和这个人的歌手等级,收听量这样的数据才能支撑用户点击。唱吧这么改之后我印象中模块CTR是有明显的提升的,但是具体数据我离职太久忘记了...

所以其实内容源的呈现方式本质上和内容相关,这里的UI应该以“如何让用户迅速找到自己感兴趣的内容”为核心设计目标去设计,具体问题具体分析咯~


再来说常见的消费向内容的交互模式,最常见的就是Push&Back的模式:

所谓Push&Back就是用户一次点击进到详情页消费内容,看完之后再点击返回回到Feed列表,然后继续在列表里寻找下一个想要消费的内容的模式,比如下图:

传统的Push&Back交互成本太高,用户看完之后需要点击返回,然后浏览内容列表选择自己想看的,然后再次点击进入。这种就是很难达到沉浸式消费,用户跳出率和关闭率都比较高。

于是有了另一种模式就是让用户不跳出,直接挨个在当前Feed下的内容:

举个例子就是知乎的“下一个回答”点击按钮和下拉交互,以及微博的视频关灯流:

这种模式使得用户在消费内容的时候交互极其便捷,轻轻滑动或者一次点击就可以消费下一个内容,大大增加了沉浸的消费体验:

关于如何尽可能的降低用户消费内容时的交互成本这个问题,上面这一种办法,其实还有另一种,就是所谓的交叉推广,大家看下面这个图,前两张是头条Feed,后三张是陌陌:

头条点击一个视频后,下面会给你推和这个视频相关的一些视频(可能是内容维度相同都是做饭的,可能是用户侧特征相同都是美女做饭,可能是环境特征相同都是教你明天中秋节怎么做月饼)让你去观看(而且你发现没头条iOS版本和抖音iOS版本都是默认隐藏statusbar的,你看不到当下几点了,为的就是让你一直看下去...)。

陌陌这款产品就更有意思了,比如我点击第二个入口(右1)进去,这时候有个上下滑动切换的交互,app的指示意是:“切换到下一个主播”,那按照常理来说,我松手之后,应该消费的是第三个入口(左2)的内容没错吧?但是你会发现事实并不是这样,它其实跳转到了一个全新的Feed序列,所以交叉推广的概念如下图所示:


2.直接消费的app模型:

上面我们讲的都是先分发再消费的模型,它一定要有一个内容承载的Feed页,然后用户根据自己兴趣去选择性的消费内容。那本着:“降低用户消费内容时的交互成本”这个思路,有没有可能去掉分发这个步骤,不要内容承载页,直接上来就让用户消费呢?这就是大家熟悉的抖音:

Musical.ly(后改名Muse然后被抖音抄然后被抖音收购)这款app创造了一种直接消费内容的产品模型,这种模型有什么特征呢?

1、交互成本最低,打开即消费,一次上下滑动即分流,左右滑动(或一次点击)即分流,极强的沉浸性。

2、依靠算法把很多Feed序列整合成了一个无穷尽的Feed,完全依赖算法和用户行为数据、短视频数据判断展示优先级。

我们不妨来对比一下“先分发再消费”和“直接消费”的两种产品吧:

“先分发再消费”类的产品,由于有一个内容承载页,用户可以选择性的点击消费,比较尊重用户。而抖音这类产品呢,直接把内容强制用户消费,本质上是带有一定胁迫性质的。直接让用户消费内容的比如抖音类产品,不给用户自主选择的机会,胁迫用户消费产品提供的内容,如果内容足够优质的话会有奇效,如果内容差强人意,戳不中用户的High点,则有可能适得其反。


我认为抖音这种直接让用户消费内容的产品模型本身是一把双刃剑。


大家玩了这么多app应该也能发现了,市面上壳子抄抖音的产品现在特别多,大家会发现只有抖音好看,别的都是看一两个就看不下去了想关掉,这里的原因就是因为用户被胁迫消费你提供的内容。

我们假设你是一家内容实在不怎么行的app,如果强行用抖音的模式,你第一个内容是一坨屎,用户吃了一半滑动跳过了,这时候他发现第二个内容还是一坨屎要给他吃,用户意愿会下降得特别厉害,甚至一两个视频过后就直接关掉了。但是如果是先分发的模型,里面都是一堆屎,但是我告诉你了,第一坨屎是草莓味的,第二坨屎是橘子味的,这时候用户自己想消费哪一坨内容是他自己的点击选择,和你无关,你app设计者不用承担胁迫用户消费的风险,自然用户对自己选择的内容的容忍度也会高一些,可能不会看一两个就关掉了,没准儿会看四五个。这样是不是浏览时长就增加了?


给大家讲一个理论性的东西吧,抖音内容的理想时间模型(名字是我自己随便取的):如下图所示

我们假设理想状况下这个用户没别的事不会被中途打断,只要想刷可以一直刷一辈子抖音,然后我们来研究内容质量和用户浏览时长的关系:我们假设,每一个个体用户都有一条平均匹配线Marchline(这个匹配可能是内容维度的比如我喜欢看dota不喜欢看lol,喜欢科普不喜欢鸡汤等等),内容只要比匹配线高,对于我们的心智就是一个正向刺激(Positive)。

我们假设每个视频都是15s,大家会发现你们每天打开抖音的第一条视频总是很优质(其实抖音最初冷启动的时候准备的视频都是1500-3000一条买的优质脚本之类的,花了几千万呢,所以这些优质视频源奠定了第一波龙湖留存),如果第一个视频总是很优质,用户很喜欢,那心智就会上升,是一个正反馈,然后第二个视频如果也很精彩,那就会把用户推向high点,如果这时候第三个视频一下子推了一个特别烂的或者没算准给用户推了一个用户不是很中意的,理论上用户交互成本很低,可能只看了一半划过就行了,但是如果连续两三次都给用户推了很烂的内容,那用户的负向刺激(Negative)越来越多,一半两到三次就退出了。

在这里面有一个我总结的思考就是,用户的Marchline其实是浮动的:

Marchline(new) = Marchline(old) + △Willing

用户每次打开app到关闭app的过程中正负向刺激的向量和。

所以本质上抖音这种点开即消费的短视频设计方法,是对自家内容极度自信之后的产物,记住抖音模型是把双刃剑,如果你不是对自家内容那么自信或者不愿意花钱来砸内容,就尽量不要用抖音这种交互,很容易塞用户一嘴屎得不偿失!




3.一边消费一边分发的app模型:

上文已经讲过了快手(先分发再消费)和抖音(直接消费)两种产品模型。

他们各有利弊,但是在最近半年,热爱创新的产品设计师们在短视频领域让我见到了眼前一亮的第三种模式,就是Instagram的旗下的IGTV(入口在Ins的右上角,也是一个独立的IGTV app),它采用的是一种创新的一边消费一边分发的模式,可以说这个创新是很亮眼了,大家有空可以去下载体验一下:


这款产品默认打开是图1所示,后边的视频是在播放的,这就满足了直接消费,但是下面有一个推荐列表可以滑动选择,满足了分发,然后如果需要沉浸的观看某个视频,手指在图1上下滑就会变成图二,这就变成了一个完全沉浸式的抖音,和抖音的区别是抖音采用上下切换,IGTV采用左右切换,它最绝的地方是把消费属性做到了极致,甚至在搜索或者在发评论的时候,后面的视频也依然在播放。

这就很好的解了交互效率和分发的问题,大胆预测IGTV的交互模式是明年短视频、视频直播、视频社交抄的重点。(其实现在已经看到Azer之类的产品在大量采用这种交互了)

总结一下吧,其实设计的本身在解决问题,只不过随着时间的推进,大家的认知层次会逐渐升高,最初我们认为快手这种分发效率过低,于是抖音出来了之后大家都抄抖音,但是别的app没有抖音这么好的内容,于是取了折中有了我个人认为更合适的IGTV这种交互模型。

其实今天这篇文章想要阐述的一个思想是“目标导向的设计”,我们为了解决一个又一个的问题,在不断解决问题的过程中交互一次一次的微创新,微创新到一定量就会变成一个大的创新。每次看到很多有创新的产品都会感觉到欣喜,作为设计师大家也可以多看一些app产品,大量的试用不同的app产品,然后归类总结一下,相信也会有所收获。


文章来源:站酷   作者:Seany

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


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

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


图标设计,你需要了解这些...

纯纯

目录

  • 图标风格汇总

  • 图标设计流程

  • 案例讲解

  • 图标资源输出



01 常见图标风格汇总

  • 线性

  • 面型

  • 线面



1、线性

  • 单色

  • 双色

  • 渐变

  • 不透明度

  • 一笔成形

  • 断点



1.1单色

单色线性拥有简洁、清晰的特性,在视觉层级上较低,适用于基础功能图标。b端较为常见,移动端常见在设置页面或导航栏通知、分享等图标设计上。 


1.2双色

双色线性在单色的基础上丰富配色,解决了单色线性原本过于单调的问题,在提升趣味性的同时,也将视觉层级进行了提高,同样适用于基础功能图标。在使用过程中需要注意的是丰富的配色会偏向年轻化,需要考虑是否符合产品风格及主流目标用户审美。 



1.3渐变

线性渐变还可以在用色上进行区分,简洁的用色可以给人带来科技、炫酷感,在车载ui中较常见。丰富的渐变配色则更适合运营入口设计,有着年轻化、热烈的氛围。 



1.4不透明度

线性双色可以和不透明度风格进行很好的比较,前者视觉更跳跃,个性更鲜明。而后者在使用时普适性更强,即丰富配色细节,又避免视觉过于跳跃(可以把它理解为同类色配色)。所以在大多数使用场景下,不透明度风格都是一个很好选择。 



1.5断点

断点风格有线性单色&双色该有的个性,并且在线性双色基础上继续提升趣味性,使用需要注意产品目标人群年龄段。 



1.6一笔成型

该风格设计感和个性都极强,很考验设计师对造型绘制的把控,功底不够就很容易导致设计后出现识别问题。所以设计难度较大,且延展性较弱,难以表达复杂语义,使用需谨慎。



2、面性

  • 单色

  • 双色

  • 不透明度

  • 晶白

  • 磨砂玻璃

  • 等轴侧(2.5d)

  • 渐变

  • 新拟态

  • 轻质感

  • 明暗质感

  • 写实

  • 抽象

  • 卡通插画

  • 像素风格



面性与线性的区别在于前置视觉面积更大,整体视觉层级比线性高。下面部分和线性风格重叠的内容就不赘述。




2.1单色



2.2双色



2.3不透明度

面型不透明度风格,通过调节前后不透明度可以带来较强的空间感,使用场景较广泛。



2.4晶白

晶白严格来说也算质感图标(白色质感)的一种,常见于品类图标设计,通过透明度、投影、渐变等参数调节,使整体立体感和空间感都很强。



2.5磨砂玻璃

又叫毛玻璃风格,是通过背景模糊,或剪切模糊图层的技法来表达通透、有层次、精致的视觉感受,但由于容易与浅色背景相融,造成对比度不足难以识别的问题,所以在使用中需要注意无障设计。



2.6等轴侧

也叫2.5d,有很强的趣味性,及识别度,适合重要入口或运营设计。但这类风格较为卡通,且表现花哨。使用需要注意应用场景及目标人群年龄段,避免干扰信息阅读和不符和产品风格。



2.7渐变

这类风格可以很好的吸引用户注意力,在电商、美食类产品中较常见,主要注意配色干净协调。



2.8新拟态(Neumorphism)

新拟态图标色彩相对单一,与背景融合度较高,通过高光、投影表现一定的立体感。通常是整个产品就是新拟态风格时才使用。所以该风格局限性较大,再有这类风格与背景对比较弱,无障设计问题较大。



2.9轻质感

通过大量渐变、投影来表现立体感,整体风格偏年轻化,常见在教育类产品中,使用注意配色干净和谐。



2.10明暗质感

通过调节同一色相不同明度、饱和度来营造前后空间感,整体风格统一。


2.11写实

这类图标特点很明显,有极高的识别度,目前美团外卖品类区入口就是该风格,整体偏年轻化。主要考验设计师造型绘制、技法表现能力。



2.12抽象

通过几何图形组合、色彩使用来表达美的视觉感受。这类图标艺术(装饰)价值更大,不追求识别度,美观即可。



2.13卡通插画

这类风格既可以做图标又可以做空状态插图,设计美观有特色即可。



2.14像素风格

这类移动端界面较少见,目前只在一个海外电商产品(Jollychic)中看过,还有就是一些像素游戏中,比如「泰拉瑞亚」、「我的世界」。



3、线面

  • 线面

  • 描边插画



3.1线面

和线性双色图标类似,趣味性较强,具备个性化特点,可以做Tab选中状态。 



3.2描边插画

类似卡通插画,在卡通插画基础上加入描边。同样颜色,在一些特定的前后交接处利用线条做区分,算是多一种设计表现形式,同样美观有特色即可。 




4性格

  • 粗线

  • 细线

  • 圆角

  • 直角



4.1粗线

力量感、稳重、男性等感受



4.2细线

品质感、精致、女性化 



4.3圆角

安全、亲和、年轻



4.4直角

严谨、正式、果断利落 

由于图标风格繁多,所以以上列举并不包含所有图标风格。



02 图标设计流程

  • 明确语义

  • 关键词详解发散

  • 确定风格

  • 提取造型

  • 创意输出



1、明确语义

图标存在的目的是起引导作用,在丰富页面视觉的同时,帮助用户更快的获取信息(当然图标的使用意义还有很多)。设计师在将文字翻译成图标前,必须先理解其文字含义。因为最终呈现的图标,需要用户一眼能准确反翻译其中含义(艺术抽象、装饰类图标除外)。

在C端设计中,以Tab为例,一些常见文案:首页、分类、发现、我的,这类语义还算比较清晰的。但在B端设计或工具类APP中就会遇到一些复杂语义。以我的工作来说,目前在做一款网站搭建工具,后台常会需要设计组件及对应的图标,比如:滑动商品、多图列表、上拉图文列表这些语义比较复杂的图标,在一定程度上会比较难精准传达文案。



2、关键词详解发散

这一步有点类似情绪版使用,但不同的是:我们需要将确定的词(A)进行详细解释,再将解释文案中关键的词语进行发散,得出一系列相关联的词(A1、A2、A3…)。有时间还可以根据这些词找到对应的图片,再看在这些相关联的图片中,有哪些细节可以传递最开始我们确定的那个词(A)的意思。



3、确定风格

我们可以借助情绪版,根据产品定位和目标用户描述,再结合应用场景,在目前已有的风格中找到符合产品气质,符合当前模块视觉层级的图标风格。

前面我们已经了解了目前常见的图标风格有三大类:线性、面型、线面,其中还有很多细分,比如在线性中又分粗线(沉稳、力量)、细线(品质)、曲线(女性化),还有圆角、直角,每种类型所传递的感受都不同。在创意前期,我们将每个点合理进行随机组合(如下图)即可创造一种更新颖的风格。



4、提取造型

经过关键词详解发散,其实我们已经获得了很细节点,接下来将这些细节点进行合理融合后,就可以得到代表同一语义但形式各异的基础图标样式(此时还只是想法阶段,可以通过手绘方式记录组合形式,不用特别精细化)。




5、创意输出

在设计执行前我们需要先了解两个大知识点: 
  • 图标设计规范

  • 图标设计注意点


5.1图标设计规范

  • 常见图标尺寸

  • 图标盒子使用


5.1.1、常见图标尺寸

在界面图标设计中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



5.1.2、图标盒子使用

什么是图标盒子?其作用是什么?

图标盒子即图标约束网格,来源于Material design。使用图标盒子有利于使我们创造的系列图标保持规范与统一。



5.2图标设计注意事项

  • 简洁美观

  • 易于识别

  • 细节统一

  • 像素对齐

  • 视觉大小一致

  • 饱满透气

  • 融入品牌基因



1、简洁美观

图标是否美观,会受设计师对图标造型把控、图标构成元素比例、配色等设计能力影响。在UI界面功能图标设计中,通常会尽量减少不必要的细节,降低图标复杂度,来帮助用户快速识别。当然图标也有丰富细节的做法,常见在一些重要运营入口上。



2、易于识别

识别度的问题,在最前面明确语义中就有提到过,这里就不赘述。



3、细节统一

在细节中包含:表现风格、描边粗细、端点类型、圆角大小、斜角角度、配色、投影参数等(不同风格图标的细节不同,这里只是列举部分),上述细节在系列图标中都应保持一致。



4、像素对齐

在图标绘制中,需尽量避免坐标位置xy或宽高参数出现小数点,以此保证最终导出的图标是清晰的。



5、视觉大小一致

由于不同图标外轮廓不同,就会导致哪怕在物理大小上相同的图标(假设都是24x24),但视觉上可能还是会给人大小不一致的感受,因此我们需要借助前面提到的图标盒子进行约束调整。


6、饱满透气

图标的饱满透气,不一定需要加入很多笔画(描边、装饰等)细节。而是尽可能在形成风格的同时,简化能影响识别度的关键笔画,通过调节笔画大小、长短、位置使图标达到一个最平衡状态。


以如下途牛_我的页面_功能区图标为例:

图中标红图标就存在饱满度不足,及内部较拥挤的情况,第一感受是看起来不舒适,品质感比较低。除此外,还存在如下问题:


  • 图标大小很明显不一致

  • 设计语言不统一,有圆角有直角

  • 图标风格不一致,有透明度+分割形式(我的保单)、有纯透明度形式(专属顾问、我的收藏)、还有其余单色实心形式



7、融入品牌基因

在图标中融入品牌基因可以有效的提升产品品牌感,作为高阶设计师必备技能之一,常见提取维度:

  • 颜色

  • 设计语言

  • Logo轮廓 


以我之前的豆果美食项目为例,提取到如下细节:

颜色:提取黄色、绿色两类颜色 
曲率(设计语言):品牌Logo走线顺滑、自然、圆润,个性鲜明 
分离(设计语言):黄色区域与绿色区域虽不相交,但存在联系。(分离间留白) 


根据提取到的基因,最终得到如下两套风格不同,但语言相同且都具备品牌感的图标。


Logo轮廓:在图标中融入品牌logo外轮廓(Google Play),或根据logo轮廓结合应用特性进行延展(Microsoft)。



03案例展示

就以途牛为例,对我的页面功能图标进行优化。 


1、明确语义

根据文案进行详细翻译,帮助我们充分理解文案。



2、关键词详解发散

以「专属顾问」为例:

释义:有专门的知识或经验,受聘为机关团体或单独个人提供专门咨询的人。

提取释义中关键信息,生成关键词:专业专人,再根据关键形容词发散一系列具象名词。



3、确定风格

根据产品调性和模块视觉层级以及考虑延展性,初步确定如下风格组合起来是比较适合:


线性:双色、不透明度、断点 
面性:单色、双色、不透明度、轻质感、明暗质感 
线面:线面 


在实际查看中,发现Tab的风格为单色+不透明度+断点风格。

为了和Tab拉开差异,最终确定以如下风格进行组合表现比较符合产品调性:

线性:双色

面性:单色、双色、不透明度、轻质感、明暗质感

线面:线面



4、提取造型

通过手绘或大脑想象进行造型构思,这里我就不展示手绘过程(行吧,我承认就是画的太丑了不敢放)。



5、设计执行

由于不同风格对图标造型构思有所影响,且图标类型很多,不同特点组合起来样式更多。案例精力有限,所以只以线性双色风格做演示,希望大家灵活使用。


这一步就是将手绘图形矢量化,在矢量化创意过程中,我们可能会对手绘的图形进一步简化细节或新增造型,这都很正常。只需注意在整个绘制过程中遵循图标设计规范,以及注意图标设计注意事项即可。

图标盒子使用


创意输出


Tips

在绘制造型时需注意,图标文案详解中的关键词也有优先级,以如下「礼品卡」图标为例,是表达礼品的意思多?还是表达卡的意思多?这个会影响图标中相关元素的面积大小。站在商业角度看可能会更倾向于方案2,突出礼品,来吸引用户。站在入口文案清晰传达的角度,可能我会更倾向于方案1。 

1or2?


最后对专属客服进行多风格尝试,最终效果如下:


附上部分绘制过程中的淘汰稿:



04图标资源输出

在将图标输出给前端前,需要沟通好使用何种格式,目前常用图标格式分为两大类: 


矢量格式

  • SVG:缩放无损、体积小、支持前端样式修改参数、单色情况下方便前端修改颜色来表达图标状态,减少重复上传。


位图格式

  • PNG:支持透明格式

  • JPG:兼容性强,适合大尺寸高饱和度图像

  • GIF:动态图标使用,缺点是透明情况下边缘容易出现锯齿。



这里主要介绍静态图标中,svg格式在工作中如何输出给前端同学使用(借助iconfont)。


svg图标交接方式:

1、图标资源优化

在iconfont官方绘制指南中有描述,在导出前需要按如下规则优化图标资源:



2、选中图标导出svg格式

以Figma为例,优化图标资源后,选中图标将输出格式选择为导出svg。



3、上传iconfont

在资源管理下,选择需要上传的位置。


选择上传图标 



4、选择颜色提交模式

去除颜色并提交:适合单色图标,去除颜色提交可以方便前端使用代码修改参数,减少不同状态图标重复上传。

保存颜色并提交:适合多色图标(注意:在单色情况下,选择保留颜色提交,前端则无法通过代码修改图标颜色)。



最后当我们把图标都上传好后,就可以将前端同学拉入团队项目中开心进行玩耍。



好了,以上就是本篇要分享的全部内容,希望对各位有所帮助。



文章来源:站酷 作者:幺零三

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

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

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

别光抄了,信息卡片应该这样设计!

纯纯

工作中我们经常会接到一些信息卡片的设计需求,在早期很长一段时间里都困扰着我。和大多数刚入门的小白一样,当接触到这类需求的时候,下意识就是打开自己的的Eagle,找合适的参考,去借鉴排版布局。但是其实最后只知道参考这样做好看,对于作者的设计思路并不清楚。后面我尝试去总结其中的规律,也得出了自己的一些设计思路。





02 这里讲的信息卡片是什么?

让我们先看下各类App中,一些比较不错的信息卡片长什么样:




03 一个信息卡片包含什么内容?

  • 图片

  • 图标

  • 文字

  • 标签

  • 按钮

  • 布局



1图片 】

图片理解很简单,就是该卡片想表达的信息主体,可以是商品、风景、插画等,PGC内容图片通常由运营把控,UGC内容为用户自行上传。虽然上线后实际上传的图片,对于设计来说没有太多关系,但在设计稿中还是需要严格控制图片质量。(一定程度上也能提高过稿率)

图片挑选需要注意如下:

  • 高清无码

  • 主体突出且简洁

  • 配图与文字信息相关联

  • 多图片情况下,视线保持同一水平线或同一角度



2【 图标 】

图标的出现有以下几类:品牌特定logo、特殊字段图形化(如性别、定位、点赞、VIP、关闭等等,将字段图形化后可以减少该组件内的文本信息,方便设计排版的同时提升整体阅读体验)、氛围点缀(主要在于丰富卡片,提升设计感来吸引用户注意)

图标设计需要注意如下:

  • 清晰度:品牌图标避免过小,导致难以分辨。

  • 识别度:字段图形化后一定需要确保拥有足够的识别度,尽量在大众认知范围内。比如“+”可以代表添加和关注、“x”代表关闭,“大拇指”和“爱心”代表点赞、“皇冠”代表VIP等等。

  • 风格一致:氛围点缀图标在配色上,需要保证与产品调性一致,或在色彩情绪上,与该模块传递的感受一致。还有一些细节,比如线性图标描边粗细,圆头还是方头端点,这类尽量保持一致(当然也可根据情况演变新的风格,但注意风格种类不宜过多)



3【 文字 】

文字即对图片的描述信息,通常分为:标题、正文、辅助信息、优惠信息、数据信息(评分、价格、点赞评论数等) 

文字信息处理需要注意如下:

  • 对比:需明确页面信息权重,突出重点,便于有效传递信息。移动端常见对比方式:特殊字体对比、字号差对比、色彩对比、修饰元素(点线面)点缀对比。重点需要注意,避免在一个卡片中,采用过多不同大小字号和颜色去表现信息层级,尽量使层级精简与规范。

  • 对齐:保证卡片内信息之间存在某种视觉联系,信息结构清晰。对齐方式分类:左对齐(符合左到右的阅读习惯,阅读体验最佳)、右对齐(阅读类文本比较少见,一般是为了将分好组的信息填充卡片四角)、居中对齐(居中传递严肃、正式感,在移动端中较少见,适合信息较少的情况下使用)

  • 亲密性:将信息通过留白、分割线、色块等方式来成组划分,避免信息散乱。



4【 标签 】

标签指活动通知、产品卖点、重要时间、优惠信息等这类需要突出的内容,标签按视觉层级由高到底依次划分为:异型标签、色块型标签、描边型标签3大类。 


标签处理需要注意如下:

  • 视觉层级:一个卡片内可能出现不同类型的标签,比如同时有活动通知、优惠信息、产品关键词,这个时候就需要了解各类信息重要层级,正确选择标签形式(异型、色块、描边),帮助用户快速抓住产品重点。

  • 极限场景:标签内字段不宜过长,需要考虑最大宽度,进行合理布局。(牵扯到屏效比)

  • 呼吸感:合理定义标签内部文字与底板的上下左右间距,避免拥挤。

  • 设计感:标签多数是带有活动属性,在设计手法上可以尝试破型设计,还可以尝试加入一些小图标、纹理,一方面营造活动氛围,提升产品品质感。一方面图标具有一定语义,可辅助用户识别。(适合单个特殊标签添加,而不是一类标签,因为多个一样的标签配上图标同时展示太乱)

  • 对比度:在色块标签中需要重点注意,通常色块标签又分以下3类:有彩色底板+白色文字、带不透明度的有色彩底板+有彩色文字、消色底板+消色文字,在挑选颜色时需注意文字与底板对比足够清晰,减少阅读障碍。



5【 按钮 】

按钮是卡片上最重要的元素之一(部分卡片也可能没有),作为一个行动点,Ta的作用在于吸引用户点击。按钮在表现形式上和标签一致,我们最常见的有彩色底板+白色文字、消色底板+消色文字、描边框+文字(有彩色描边或有彩色字)。 


按钮和标签在处理上很相似,可参照标签。



6【 布局 】

布局指上述所有图片、图标、字段等信息,在卡片内的排布方式,常见布局方式:上下布局、左右布局、居中布局。 


信息布局需要注意如下:

  • 拓展性:卡片中字段的长短对布局的影响较大,字段较长且多的情况下需要的占用的空间更多,所以常见是上下布局。

  • 屏效比:上述拓展性与屏效比的关联紧密,在卡片中,为了保证一行文字最大显示,通常文字都是单独一行,避免左右存在元素占用文字横向空间。但单独一行就意味着增加了卡片高度,虽然单个卡片内文字显示多了,但整个一屏中展示内容变少。为了便于理解上面这段话,这里我们可以看到淘宝这个案例,淘宝的推荐卡片中信息很多,在遇到文案很长的情况下,为了平衡上面讲的这个问题,使用到了如下较少见的布局方式。

  • 合理性:在列表式左右布局中,是选择左文右图,还是左图右文。这需要看产品类型,在新闻资讯类产品中常见是左文右图,而在美食、电商类产品中是左图右文。再有在信息布局上也应符合人眼左到右,上到下的阅读习惯。



04 如何做好一个信息卡片?

  • 明确产品类型

  • 明确应用场景

  • 了解目标用户

  • 划分信息权重

  • 同类信息归组

  • 增强信息对比

  • 设计细节表现

  • 确定最终布局


1【 明确产品类型 】

产品类型不同主要对布局产生影响。

  • 以文字为主的产品,比如前面讲到的新闻资讯类,通常采用左文右图的布局。

  • 以图片为主的产品,比如美食、电商类,通常采用左图右文或上图下文。 

原因:新闻资讯类,吸引用户产生点击的并不是因为图片,而是具体的标题,通过标题用户才能了解更多关于该卡片的信息。而美食、电商类产品则相反,这类产品图片比文字更吸引人。



2【 明确应用场景 】

在我之前一号店改版中提到,信息卡片可以分为列表式和卡片式两大类,对应的优缺点如下: 


卡片式:在卡片式中图片是设计的重中之重。这是因为人是视觉动物,在卡片式设计中使用高质量的图片能瞬间抓住用户的眼球。卡片式设计实现了图文的完美结合,能给用户呈现良好的视觉效果。

应用场景:

  • 图片为主,需要利用图片给用户带来良好的视觉冲击,提升浏览过程中的趣味性,从而吸引用户长时间浏览。

  • 适合随机推荐的内容,不适合进行查找。

  • 丰富内容展示,适合元素较多情况,可以让各种形式的元素保持井然有序。


列表式:信息集合一般是简单的图文组合(小图+标题)或纯文本信息。由于列表垂直排列每一行内容,相对卡片式,在同样大的屏幕中可以展示更多内容,可供用户阅读信息更多,新闻类和数据类应用更青睞于这种设计。


应用场景: 
  • 信息直白,用户无需点击查看,即能尽可能了解内容信息,适合快速查找。

  • 文本重要程度高于图片,需要靠标题吸引用户点击。

  • 小屏幕应用场景。




3【 明确目标用户】

目标受众的属性,对信息权重的划分影响很大,比如对价格敏感的用户,优惠信息的视觉层级就需要抬高。为了便于理解下面的案例,这里我定义的就是对价格敏感性用户。



4【 划分信息层级 】

定义了目标用户后,将卡片内所有元素罗列出来,并借助四象限分析的方法,对各个元素的权重进行划分。



5【 同类信息分组 】

将同类信息分组,便于后面确定元素之间的亲密性关系。



6【 增强信息对比 】

前面我们借助四象限,将信息重要程度进行了划分。接下来对元素之间亲密性和对比进行处理,设计用户浏览视线,在该过程中对案例中的元素进行如下处理:

  • 图片:这里图片及比例保持不变

  • 图标:将原版会员图标+字段的方式更改为图标,原因有两个:1、会员图标+字段的方式占用了较多的横向空间,导致标题字段信息展示减少,同时还导致用户在阅读完标题后,阅读下一行内容时视觉错行严重(会员图标+字段过长导致)。2、由于会员图标代表会员内容,这是绝大对数产品对用户有过的教育,所以这里重设了会员图标并单独展示。

  • 字体:对标题字体进行加粗,(16pt,Medium),价格字体加大加粗(24pt,Medium),划线价加粗(12pt,Medium),按钮文字&活动标签文字(14pt,Medium)精简其他辅助信息层级(12pt,Regular)

  • 标签:优惠信息标签由0.5pt改为1pt,提升视觉层级。活动标签为色块降低不透明度+有彩色文字。

  • 按钮:由于标签为描边样式,为了拉开差异,突出按钮,所以将按钮改为实心色块。


做完上面这些后,可能大部分人觉得到这就可以了,但其实我们还可以再增加设计细节,这也是你与其他设计师拉开差距的地方。



7【 设计细节表现 】

由于案例不同,增加细节的方式不同,所以需要具体案例具体分析。在本次案例中,我通过新增图标设计以达到丰富卡片细节的作用。在活动标签中新增小喇叭图标,来增强活动氛围、增强信息视觉上的互动性、增强代入感。在按钮中新增时钟图标,配合预约文案,让用户预知操作后可能的结果,并且提升按钮视觉层级、提升点击欲望。



8【 确定最终布局 】

在布局中主要考虑两个点:

1、合理性&拓展性

由于该卡片的应用场景为推荐列表,所以这里保持原有的上下布局,遵从人眼阅读习惯。

2、屏效比

将活动标签选择放置在图片与底板分割处,好处有: 
  • 借助这个方式,使图文内容过渡顺畅,阅读体验更佳。

  • 尽可能减少了标签对产品图的遮挡。

  • 压缩卡片高度,最终达到提升屏效的目的。



解决部分人可能存在的疑惑:


Q1: 3张设计稿中活动标签为什么进行修改?

:稿1到稿2,活动标签样式修改,位置调整,对应不同的用户,对于价格敏感性用户,显然稿2更能刺激他们点击。稿2到稿3,对标签样式再次进行加强。稿3到稿4,考虑该应用场景是在推荐列表中,为了避免出现多个同类型活动的卡片,导致过乱,所以修改了设计样式。


Q2:在稿3到稿4中优惠标签这一排内容,和预约按钮这一排内容,上下调整的原因是什么?

:1、将文字区域看做一块完整的矩形区域,稿3整体看起来更完整,而稿2像是右下缺了一个角。2、在信息阅读顺序设计上,稿3的处理是优先让用户看到优惠相关信息,更加迎合价格敏感性用户的需求。


Q3:你认为最终稿还有优化空间吗?

:这个案例,是我截图与我司相关App的。我认为如果可以,还需要再了解目标用户画像,了解用户真正在意的信息是那些,这些都会对最终方案产生影响,也只有知道这些才能得出最合适的哪个方案。这里我定义的是对价格敏感的用户,基于这类用户来说,我认为最终方案是合适的

文章来源:站酷 作者:幺零三

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

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

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


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档