首页

视频便捷手势 交互设计探索

分享达人

一、前言

视频播放器中承载着极其丰富的内容画面和播控功能,尤其是在寸土寸金的移动端视频播放器中,为使内容更沉浸消费,需尽可能克制界面中的功能元素/入口直接外露。基于此种场景下,合理的手势设计不但可为界面“减负”,还可帮助用户更快捷触达功能、提升操控便捷性。


视频场景中目前已有部分的常规单向手势已被用户广泛接受并形成习惯认知,如「单击 暂停」、「双击点赞」、「长按快进」、「横滑导航」、「纵滑切视频」、「双指捏合缩放视窗」等通用手势。

那么如何在保留用户对于常规通用手势认知的基础上,进一步对视频场景中的手势交互进行扩容升级?这也是我们接下来在手势进阶交互上的重点探索方向。

本次针对百度APP中的视频播放器场景,为提升手势操控效率,我们试图将常规的基础通用手势进行打散重组、并结合实践案例梳理出「组合手势」设计模型,以探索如何在视频场景中构建便捷高效的进阶手势体验设计。

二、什么是「组合手势」

「组合手势」是基于常规手势的组合扩展,其通常由两种或两种以上的常规基础手势所构成,若组合方式及使用场景得当,可助力用户更便捷的触达功能。

以前述的视频场景常规手势为例,其触发机制一般可分为两个阶段:step1交互信号step2执行任务,即用户通过某一基础手势发出交互信号,系统收到信号确认后便可立即执行任务,但整个过程是线性的,手势扩展性十分有限且难以满足视频场景对于手势扩容的诉求。

于是我们在现有常规手势两阶段触发机制的基础上,尝试引入「意图识别」环节,并梳理出「组合手势」的设计模型,以探索不同基础手势相互组合后的扩展可行性。

「组合手势」触发一般可分为三个阶段:step1交互信号step2意图识别step3执行任务,前两阶段均可由对应的基础分支手势构成并进行组合搭配、以寻求最高效的手势组合触发路径。

由于「组合手势」并不像常规手势那样早已被系统定义为可供直接调用的接口,因此,其差异化创新具有较大设计灵活度,尤其需根据具体的使用场景进行综合考量。

三、「长按组合手势」激活快捷菜单

1.项目背景

百度APP视频场景早期的播控功能较少,如“视频下载”等个别特色功能入口一般都融合于基础菜单之中。

随着后续视频场景的功能建设日渐完善,我们便在基础菜单面板中拓展了一行视频菜单,专门用于承载视频场景特有的播控功能。但当前播控功能已达10余项,菜单面板弹出后还需左滑才可露出后面的功能入口,因此也常收到用户反馈找不到常用功能、菜单面板功能排布无章且触发成本高。

2.竞品调研及选型

通过对竞品进行调研,我们发现竞品均有使用长按手势作为切入口以触发相关播控功能、并归纳出“视频播控触发”目前主流的三种长按交互选型,  分别为:长按触发独立播控面板、长按触发浮层播控选项、长按触发特定播控功能。

选型A

「长按触发独立播控面板」:通过长按手势可激活从屏幕底部弹出的独立播控面板,此方案扩展性较强,但对视频沉浸观感体验有一定的打断感;


选型B

「长按触发浮层播控选项」:通过长按手势可触发置于视窗上层的浮层选项入口,一定程度上可延续视频观看的沉浸体验,但浮层扩展性有限;


选型C

「长按触发特定播控功能」:通过长按手势触发特定的某个播控功能(如长按“快进”),一定程度上可满足此功能的重度用户,但对于长按手势的使用效率较低;

3.设计方案

1)长按手势交互扩容

针对目前视频播控菜单存在的问题,经过和业务对上述三种长按交互选型方案进行综合考量,最终决定聚焦于以方案“选型B”的「长按触发浮层播控选项」作为设计切入点。我们意图将部分高频播控功能从基础菜单中拿出进行前置,并探索一套更便捷的触发机制,以此对视频场景中的播控菜单进行设计升级。

但随之而来的难点是我们目前播放器中的长按手势已被“快进”功能占据,用户对此功能的使用频率高、并已形成较深的操控认知,若直接下线“快进”功能则会对用户使用习惯产生较大影响,尤其是视频场景的重度用户。

那么如何在兼容用户已有长按操作习惯的基础上再拓展“快捷菜单”呢?是否有可能将“快进”和“快捷菜单”进行融合?这也是本次项目对于便捷手势体验的重要设计探索点。

基于此,我们决定尝试使用「组合手势」设计模型来对视频播放器中的长按手势进行重新定义,通过「长按+滑选」的机制触发快捷菜单功能项,以缩短视频常用功能路径。对应到设计模型的三个阶段分别为:

step1:以“长按手势”创建一个新模式,即发出交互信号并唤出浮层菜单;

step2:若用户未松开手指,则系统默认开始识别用户意图,是否有以“拖拽手势”滑选至目标功能项以选择功能;

step3:用户滑选锚定至目标功能后,松手释放即可完成最后的功能执行确认。

「长按+向上滑选」快捷触发对应功能项;

「长按+向下滑选」快捷触发“快进”(一定程度上兼容老用户对于此功能的使用习惯)。

2)容错性兼容
在设定「长按+滑选」组合手势的同时,考虑到兼容主流的长按习惯、以及对于滑选手势需要有一定的适应过程,我们同时也支持点选的操作模式,即用户长按后若未产生滑选行为便松手,则松手后依然可通过点选的方式触发对应播控功能项。

3)易用性打磨

差异化的创新设计形式在前期总会面临质疑和挑战,本次项目也不例外。我们担心用户能否接受并认知「长按+滑选」组合手势的操作形式,于是在DEMO开发完成后便进行了一次小范围内的定性可用性测试,以预期在上线前可先收集一波体验问题进行快速打磨优化。

我们根据测试目标、用户类别、测试前序准备及测试步骤等环节提前拟好必要的测试脚本,并邀请了10+名不同年龄段的目标用户进行访谈测试。

测试访谈的过程中,被测用户在进行1至2次尝试操作之后,均可掌握如何使用「长按+滑选」的组合手势,这也为我们增添了不少信心。

同时,我们通过观察用户操作行为及用户主动反馈,发现仍有部分易用性细节可进一步打磨优化。

3.1 )扩展触发热区:

考虑到单手握持手机的使用场景,可尽可能扩大定义长按手势的触发热区,屏幕中除顶/底bar框架区以及本身就自带长按事件的按钮入口之外,其它大面积区域热区均可支持长按触发快捷菜单,以降低触发难度、提升易用性。

3.2 )支持跟手触发:

长按后浮出的快捷功能项,其浮出位置支持跟随手指的纵向触发位置而浮出,可减少手指在屏幕上的位移距离、操控更便捷。

3.3 )实时提示及响应反馈:

灵活判断当前手势触控状态(如滑入选择 / 松手触发),在界面中即时给出相对应的引导提示或振感反馈,以帮助用户快速适应新的手势触发机制。

方案上线及验证

以AB实验对本次设计方案进行定量测试验证:

「对照组」效果:长按触发“快进”(各播控功能入口仍归置于基础菜单面板之中);

「实验组」效果:长按触发“快捷菜单”选项(支持滑选和点选模式);

小流量实验上线后,经过近半个月的观察,大盘指标稳定、播放完成率等满意度指标稳步提升。

「实验组」长按快捷菜单中的功能使用率相对「对照组」均有大幅提升,说明用户对部分高频功能的确有很强的快捷触发诉求。

「实验组」的“快进”虽多了一步触发步长,实验前期“快进”使用率不及「对照组」,但随着用户对于「长按+滑选」手势整体的使用占比持续走高,通过滑选触发“快进”的操作习惯也快速被培养起来,对于用户来说,长按快捷菜单带来的整体收益是大于折损的。

二期扩展方案
随着长按快捷菜单的上线推全,长按手势的渗透率也持续走高,用户逐渐对视频场景更多的播控功能有了长按触发的诉求,于是我们对长按菜单进行了二期的设计升级,在长按浮层最右侧新增“更多”快捷入口以承接视频场景所有的播控功能,用户通过长按后的可选播控项增多,播控功能整体的使用量得到进一步提升。

四、「组合手势」拓展探索

手势交互是用户在现实世界行为的映射,无论是基础手势还是组合类高级手势,都须符合用户认知习惯、并融入具体的使用场景中进行设计。

以「组合手势」设计模型为指导基础、并结合具体的项目实践,我们进一步对视频播放器中更多功能场景进行了便捷手势的设计扩容探索。

1.「右滑返回手势」激活“小窗播放”

“小窗播放”旨在退出当前视频落地页、并可将当前视频切换成以悬浮视窗的形式进行延续消费。

基于用户的此种操控意图,我们以“右滑返回手势”发出交互信号而触发浮出小窗入口,随后系统根据用户“纵向拖拽手势”的行为来判断其是否有激活小窗的意图,若有短距上滑拖拽行为,松手释放即可快捷激活视频小窗,以提升观看体验的连续性。

2.「双指手势」激活“满屏播放”

“双指拖拽手势”可拖拽并清屏视窗画面,以此手势发出交互信号,若在“双指拖拽手势”基础上有识别到“双指扩张手势”行为,则松手释放即可快捷激活“满屏播放”,以满足更沉浸视频浏览体验。

五、结语

便捷手势的设计出发点是为提升操控效率、缩减功能触发路径,从而使视频内容更沉浸消费。希望本次基于视频播放器场景的手势体验设计实践能给大家带来帮助和启发,后续我们也将持续深耕视频领域、并进一步探索更贴合用户使用场景的手势交互体验。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

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


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


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

“老字号”互联网产品的年轻化之路

分享达人

一、项目背景

百度文库APP是一个在线文档分享平台,上线已有十余年的时间,是一款名副其实的老字号互联网产品。随着互联网的成熟以及年轻用户的涌入,时代语境和流行文化发生了变化。年轻化设计已经成为互联网产品设计中不可避免的话题。在日常对用户反馈的监测中,我们发现文库APP当时的体验已经不能满足用户多样化的需求。并且在体验走查以及用户访谈中发现,文库APP的视觉风格、交互方式、使用感受都存在老旧、不贴合流行趋势的问题。

二、由内而外,打造年轻化感知

通过对年轻市场进行洞察,我们发现年轻用户对产品的需求是多维度的。不仅对产品的“颜值”有高要求,他们更追求使用时的便捷和流畅度。他们对新鲜事物的接受程度更高,也更愿意去探索产品新的玩法,与产品进行沉浸的情感互动。

所以此次年轻化改版不能只是对“产品的外表”进行升级,要从视觉、体验进行全方位、多维度的年轻化升级。由内而外的打造年轻化感知。



三、“老字号”互联网产品的焕新之路

2.1 视觉升级-更好看















2.2 体验升级-更好用









写在最后

从UI设计诞生初期,设计师在屏幕上模拟现实世界的交互方式,用拟物化的设计风格帮助用户熟悉UI界面操作。到现在用户对移动屏幕越来越熟悉,设计师们可以在产品设计中去尝试更多的可能性。产品与用户共同成长才是年轻化设计的意义。

未来,我们也会保持好奇心和探索欲,不断打磨产品体验,与用户共同成长。


作者:百度MEUX
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


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


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


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

客户交付设计 —— 开启数字化转型设计篇章

seo达人

数字转型推动社会效率

在阿里云设计中心有着这样一只团队,谱写了这样一些故事…

“ 设计师成为逆行者,第一个定义健康码体验流程,为了百姓疫情防控出谋划策。

国民级应用不难用,新税改让人人都能三步退税,五步报税。

全球卓越家具品牌体验升级,让家居行业供应链建立合作更加便捷。

云上展厅,传统会展线上化,数字化,让厂家产品展示与投资突破空间阻碍。”

有人问…这也是ACD设计中心的工作范畴吗?是的,就是有这样一支团队,完成了上百家客户的产品设计体验护航,为大型企业和政府的线下交付项目提供有关产品体验升级的设计能力,在第一时间响应客户,奔赴现场,通过专业化设计解决方案,为项目提供体验助力,用设计帮助客户创造价值。在过去的十年,阿里累计了从底层基础设施,IoT到协同办公,大数据,AI,到软硬件一体化的云平台。致力于在数字经济时代实现我们的梦想与使命:让天下没有难做的生意。这个梦想的涟漪,成为了今天阿里云设计中心肩负的责任:与合作伙伴一起,助力数字化的能力赋予更多政府和企业。

 

设计打造客户价值

为什么要做这些事呢?数字经济的发展让越来越多的企业意识到数字化转型是长久发展方向下可采用的一种成本更低,方式更灵活的解决方案。政府也在加快推进全国一体化在线政务服务平台建设,实现“让群众少跑腿,让数据多跑路”,一证通办,一网通办,一事联办,推动政府治理现代化,建设人民满意的服务型政府。

我们常会有相似的体感,一些传统行业和对民众服务机构,在数字系统和服务体验质量上与科技互联网公司还有着很大差距。往往承担此类工作的软件服务商,也更多是从架构、数据出发,从而忽视产品体验和使用感官的重要性。

因此,以政企客户为主导的产品设计需求愈加凸显,既要满足客户业务需求,也要满足用户体验需求,设计已成为重要的一环,从底层到表层,渗透在项目交付的方方面面。我们依托于整个阿里云和数字转型的契机,坚信只有把自身的设计经验和能力注入进客户产品中,才能更好助力阿里云政企客户和伙伴,赋能整个交付生态。

 

专业赋能业务探索

ACD客户体验设计团队非常重视能如何将ACD沉淀的设计经验、方法、能力输出到行业中,以阿里云在数字转型中的重要作用为契机,更好的帮助行业企业、政府为公众提供更优质的产品与服务体验。这样体量的项目,设计师能提供哪些具体能力呢?

面向全球200多个国家和地区的数百款云计算产品,我们研发了Xconsole云产品一站式设计及研发解决方案,为产品体验保驾护航;面对企业全面上云,我们搭建了一套完整而灵活的设计系统去组织云上生长的各种企业级服务,即B-Design企业级设计系统;面向成百上千的并行项目,我们基于项目管理作业流程研发了内部设计标准化交付平台和数字生成平台,为项目提供丰富设计物料和经验累积;面对错综复杂多变的多端应用,我们在实践中沉淀下来一套云产品使用体验度量系统,包含UES度量模型,体验管理机制和易用性测试和数字化管理的体验工具集,同时我们也打造了一款深植于云业务体验管理场景的NPS调研工具;面向不同产品生态,我们探索制定了一套一致性测评方法与度量指标,并归纳成了体系方法模型形成论文,以扩展摘要形式被CSCW收录;面对特殊的用户群体,我们进行了无障碍设计方法的研究探索;同时,我们与中国工业设计协会设计标准分会一起对外发布3项设计标准:《云计算管控平台界面设计指南》《云计算软件产品使用体验度量模型及方法》《云计算软件产品易用性度量》,另外3项《数据可视化大屏设计指南》,《云计算管控平台无障碍设计规范与评估方法》,《云计算体验设计标准作业程序》还在筹备中,计划和业界一起合作发布…..

图片

在设计专业道路上,我们持续深耕探索,并结合数百个项目实践经历,通过DPM (design platform for manufacture)设计生产平台,高效产出行业数字设计解决方案,涵盖领域包括、金融、数字政府、新零售等多个领域,我们的方法论和经验体系经过多次验证,确保方案的准确与高质。针对不同的客户和项目阶段,我们可以输出独立完整的产品咨询体系,拉升项目、客户、设计中心共同对体验质量可关注度;遇到综合项目也可通过NPS和体验度量测试,更好的面向客户的目标群体,提供服务。我们面对商业服务提升设计增值,对公众服务提升使用效率与满意感知。

 

项目实践成就客户

1.数据可视化助力疫情防控:你今天有绿码吗?

2020年突如其来的新型冠状病毒让每个人都措手不及,疫情防控,关键是人的防控,任何一个环节的疏漏,任何一个节点的缺失,都可能让已有的战果付之东流甚至化为乌有。一个简单的二维码为不同人群在通行提供动态化数字凭证,小小“健康码”派上大用场,通过科技的手段助力提升疫情防控效果,对打赢这场战“疫”必将发挥至关重要的作用。

图片

湖北“健康码”的推行,是“数字政府”改革建设赋能疫情防控和社会治理的一项创新实践。一方面,“码”上通行更便捷,上班“企业打码”、下班“社区扫码”、出行“健康亮码”,另一方面“码”上监管更精准,依托红码、蓝码、黄码、绿码关注重点人。在设计的过程中,首先需要明确健康码的定义、关注目标人群的操作习惯,确定各种码颜色的优先级以及权重,通过集成电子病历、健康体检、生活方式管理的相关数据,在关联健康指标和健康码颜色的基础上,探索建立个人健康指数排行,通过防疫健康码的精细化设计更好助力疫情防控。

 

2.助力纳税人合理节税,放心交税,高效办理

谈到税收问题,大部分人对税务的相关法律法规了解不多,法律知识的不健全让个人纳税申报“行走”艰难,高收入者对不主动申报者的处罚力度低。同时没有税务管理基础型制度支持,想提高征收效果注定“心有余而力不足”。

图片

基于现状我们对个税申报系统进行了服务体验优化升级,让系统具有非常好的灵活性和可配置性,从界面外观到交互体验对每个细节进行打磨,秉承人性化的设计理念,始终以用户需求为目标而进行设计,让用户办理事务过程更加高效,真正将政府服务于人的理念渗透到各方面。同时极大的方便了远程办理缴税的纳税人,助力国家更好的保证打工人的纳税人权益,对于偷税漏税的个人和公司管控更加严格。

 

3.体验365天“永不落幕云上投洽会”

中国国际投资贸易洽谈会由商务部和主办,有23年历史,是国际展览业协会(UFI)认证的全球规模最大的投资性展览会。受到疫情的影响,同时得益于信息化技术的发展,“云展会”成为可能,更多的人不用去会场,在家可以体验到更便捷、高效、实时的参会与交流。

图片

阿里云携手中国国际贸易组织倾力打造了“云上投恰会”APP,参展方可实现云上展览、项目对接、招商洽谈、论坛研讨和云端签约,目前已经有近60家展商入驻3D云展厅,集成各类投资项目。5G、人工智能、实时渲染3D大屏、VR等新技术手段,提供了身临其境的云上参展体验。其中VR技术的应用给用户制造出了更加沉浸式体验,通过一系列视觉线索及交互反馈来增强虚拟世界与现实世界的关联,从人类认知及行为的基础原理中获得理论指导,充分利用虚拟空间打造最符合人们在现实当中的认知及行为规律的互动模式,让用户完全沉浸在虚拟世界中。

 

4.数据服务体验升级 – 实现实时,灵活,多维用户洞察

2021年1月,红旗品牌以月销突破32500辆的成绩,迈入月销3万辆俱乐部,实现单月销量再次突破;同比增长高达158%,当汽车销售购买成为很多人的需求,观看数据整理报表及销售量就会尤为复杂,所有的业务归根结底都是为了业务数据的提升和对比,数据查询成为了领导关心的话题。

图片

数据看板是公司驱动价值增长的重要工具,通过看板检测核心数据、及时洞察业务问题、沟通各部门的解决方案,在领导与部门查看数据的过程中,可视化的方式混乱常常是最大的问题,通过专业的设计原则和色彩搭配让数据看板变得更加专业,提高应用的效率是阿里云设计解决一汽集团痛点的最佳方式。

 

5.卓越家居品牌升级-让美好的生活不仅有诗和远方

美好的生活需要诗和远方,更需要沙发和床”是红星美凯龙董事长提出的品牌理念,如何让大众增强品牌的认同感,将消费者心中的产品效果无限放大是留给阿里云设计的困难之一。品牌使命也是品牌主张,是一个产品存在的价值与意义,建立起一个独特且立体的形象,不断通过渠道和产品与消费者建立联系,就能够在消费心中留下品牌烙印,建立认同。

图片

在多端设计的过程中,我们不断增强品牌的调性定位、提取品牌视觉的DNA,通过品牌色、插画、纹理等设计视觉元素减少市场上同质化的设计,将界面设计与品牌的提升密切结合,增强品牌友好度、扩大品牌影响力、深入洞察与了解目标用户。

 

6.金融技术协助行业服务转型升级

随着时代的发展,我们会发现保险行业出现了越来越多的保险类型和方式,一旦遇到重病,医疗费就如同流水般一去不回,对于普通家庭来说是一笔不小的开支,那么到底怎么买保险才比较划算、比较实用、每个类型哪种好?怎么筛选适合自己经济又保障的保险业务,也是生活中的必修课。

图片

阿里云助力新华保险为用户提供了丰富并可以筛选的业务,全面、优质的风险保障和理财服务,便捷、温馨的服务体验。7X24小时全年无休的投保咨询及理财顾问预约、理赔报案、保单查询、单证补发、联系信息修改、回访等内容。保险APP的服务升级开发方便行业转型、增加用户粘度、完善了销售功能、同时创新购买模式让保险与互联网真正实现接轨,让保险行业也逐渐繁荣起来。

 

篇章延续新的起始

客户交付设计开启了 to B时代产品设计篇章,接下来我们将会面对更广阔的项目场景,也有更多专业领域需要挖掘沉淀。在后续文章里我们会分享一系列在实战经验中得出的方法和心得,包括:设计服务体系,竞争力打造,产品孵化与定价,商业项目数据运营,业务发展,交付设计能力模型与人才成长路径,设计的商业价值探索,政企项目分析,设计中台建设等等。希望能与你一起在数字化转型设计的路上越走越远。


作者:阿里云

转载请注明:学UI网》客户交付设计 —— 开启数字化转型设计篇章

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


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


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




让设计方案更具说服力的10个心理学原理!

seo达人


图片

 

1.格式塔原则 

相似原则

人的眼睛会把具有相似特征的元素当成一个整体,认为这些元素具有相同的作用。

图片

▲ 界面中的绿色图标具有相同的功能,方便用户快速认知和操作。因此在设计具有相同功能或内容的界面元素时,应该保持一致性。

应用位置:导航、链接、按钮、内容页。

 

连续原则

用户倾向于把连续排列的元素视为一个整体。这条原则与对称性和相似性密切相关。通过在序列上创建相似且重复的元素,引导用户的视线方向,使操作更加连贯和清晰。

图片

▲ 只露出一部分的卡片会向用户发出信号,表示滑动可以查看更多的书。

应用位置:菜单和子菜单、列表、产品页、轮播页。

 

封闭原则

当看到不完整的图像时,我们会依据已有的经验把不完全封闭的图像当成一个统一的整体,这是在平面或logo设计中常用到的原则。

图片

▲ 尽管页面右上方的饼图只显示了一部分,我们仍然能够轻松地识别出来。

应用位置:图标、加载、数据可视化。

 

邻近原则

人们会将彼此相邻的元素视为一组。在设计时要注意使用间距将元素组合在一起。使用较大的间距来分隔大的内容组,再使用较小的间距来分隔大内容组中的小内容组。

图片

▲ 页面上的每个卡片中都含有4组信息,很难快速识别具体的内容。通过调整间距,可以将这些信息清楚地分为2组。

应用位置:导航、卡片、横幅、列表页、分页。

 

对称原则

我们喜欢看到对称且平衡的事物。它是所设计领域中最常用和最安全的原则,有助于营造一种稳定感和秩序感。

图片

▲ 对称的布局不仅增强了用户的印象,还强调了中间的视频播放按钮。

应用位置:产品展示页、列表、导航以及任何内容丰富的页面。

 

共同区域原则

通过信息分组和内容组织,实现内容的组合,有助于提升内容的层次结构和可扫描性。

图片

▲ 卡片式UI有助于将信息分组并创建内容的层级深度。

应用位置:卡片、内容、服务、摘要。

 

共同命运原则

向同一方向移动的元素被认为比静止或向另一个方向上移动的元素更相关。这个原则有利于建立不同分组或状态之间的关系。

图片

▲ 页面右侧的3个图形方向相同,有利于展示信息并让用户了解它们的功能。

应用位置:导航/下拉、折叠条目、工具提示、产品滑块、滚动条。

 

2.焦点 

看东西时,我们的视线往往会首先关注最突出的元素。理解这种行为有助于我们在设计中创建一个“锚点”,从而引导用户按照我们设计的场景查看内容。

图片

▲ 通过人物插画将用户的注意力引导到账单和人数等主要信息上。

应用位置:内容、登录页、产品页。

 

3.冯·雷斯托夫效应 

又称隔离效应,相对于普通事件或物体,独特、有特色的事件或物体更容易被人记住。应用此原则的元素通常独立存在,不需要向用户导航额外的信息。

图片

▲ 中间的升级插画部分在整个页面上是独立存在的,并且吸引注意力是号召性用语或转化的关键。

应用位置:价格表、促销页、图标入口。

 

4.本能反应 

根据现实中的用户行为创建视觉上引人入胜的体验。例如看幽默类视频的时候,如果在视频的高潮伴有笑声音效,我们也会更容易跟着笑起来。

图片

如果能让用户感觉良好和舒适,他们也会更喜欢我们的设计。

应用位置:产品图、插图、摄影。

 

5.色彩心理学 

许多研究表明,颜色对我们的潜意识有特殊的影响。性别、宗教和文化对颜色的理解也有所不同。

图片

▲ 关于颜色的运用,这张色彩心理学海报介绍了丰富的方法。同时也要记住最广泛使用的系统颜色:红色代表错误;绿色代表成功;蓝色代表进行中;黄色代表警告。

 

6.形状心理学 

图片

▲ 同颜色一样,人们的潜意识对不同的形状也有不同的反应:

圆形、椭圆形:传达积极的信息,通常与社区或关系有关;

正方形、三角形:传达强烈的信息,通常与强度和稳定性有关;

垂直线:表示强度或力量。

水平线:表示平静、相等或安静。

 

7.双重编码理论 

这个理论解释了人类需要视觉和语言信息来尽快处理信息。为了最大限度地提高设计的有效性,不应该删除必要的说明性文字。

图片

▲ 大多数App的底部导航栏都利用图标与文字相结合的方式让用户快速知道功能。

 

另一个好的设计案例:

图片

 

8.并行设计 

人眼倾向于看到平行因素比其他因素更相关。这一原理经常用来对同一页面中的两组不同内容进行分类。

图片

▲ 使用垂直排列的卡片代表相同的问题,水平排列的卡片代表不同的问题。

 

9.公共区域 

这一原理类似于格式塔原则中的相似原则。公共区域通过使用线、形状或颜色划分的方式创建。

图片

▲ 如果页面需要用户不断滚动来查看内容,可以考虑使用颜色来更清楚地划分这些内容,而不仅仅是使用间距。

 

10.扫描模式 

根据NNGroup、UXPin等设计团体的研究,最常用的两种扫描模式是“F型”和“Z型”:

“F型”应用最为广泛,尤其是对于内容丰富的网站。

“Z型”用于那些文字信息少,最后需要强调用户点击类的网站。

关于扫描模式更详细的内容可以查看我之前的文章:如何构建直观有效的导航结构(上)

了解如何使用这些模式后,我们就可以有效地选择布局和安排元素来实现设计目标。

 

最后 

第一印象是最令人难忘的,好的体验可以在用户与产品之间建立持久的联系。


作者:Hoang Nguyen

译者:Clippp

转载请注明:学UI网》让设计方案更具说服力的10个心理学原理!

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


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


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




干货迟到了,但三鱼不会让它缺席2

seo达人

产品体验设计师的核心价值

一款产品,本质是提供服务以解决某个用户问题。因此产品体验设计师对整个业务的核心价值一定是解决用户/业务问题,其次才是带来美的感受。“产品设计师的价值取决于业务需要他贡献出多大的价值”。如果你认同这个观点,你就能理解接下来的两个观点。

 

交互创造价值的机会大于视觉

交互在工作流程上在视觉上游,产品问题的讨论一定是先基于交互,所以在交互领域解决问题的机会远远多于视觉。因此在产品体验设计中,交互创造价值的机会往往大于视觉。所以我的建议是:体验设计师可以做纯交互,但尽可能不要做纯视觉,工作中一定要触及交互部分。

 

B端体验设计创造价值的机会大于C端

价值,应该是所有大厂设计师都被问到过的点。不管你的价值陈述对象是谁,本质上都是陈述给业务方,区别仅仅是由你直接陈述给业务方,还是由你的上级将大家的价值汇总打包陈述给业务方。

所以,业务方愿意买单的价值才算价值。

作为一个C端B端都待过的设计师,我说说二者的特点:

C端产品功能少+简单(面向小白)、产品体验有竞品可参考,因此体验设计难度可控。

B端产品功能复杂+庞大、竞品参考成本高 (赛道小众(无竞品)、专业门槛(跨行业)、收费门槛(企业版定制)),因此产品体验难度更大,业务只能依赖设计师所给出的体验方案。

从前文的观点“产品设计师的价值取决于业务需要他贡献多大的价值”来看,B端体验设计的难度更高,所以B端体验设计创造价值的机会应该更大。

坊间传言:tb的设计团队据说有上百人… dy的设计团队据说有数百人… wx的设计师连按钮是圆角还是方角都要展开讨论,还要做ABtest… 三鱼讲个小故事吧:

在C端的工作就好像在一艘装满水手的大船上

你在船上被分配到了负责擦拭桅杆的工作

你需要思考如何在擦桅杆的工作中展现自己的价值

于是你研究了不同擦拭工具的工作效率

研究不同温度、湿度下的桅杆油漆磨损情况

你越研究越痴迷

这份工作看似简单,但其实

有很多可以深挖的点

有很多值得研究的课题

甚至你的价值看起来还很好衡量

毕竟在大船上

哪怕是一根桅杆都会被天天使用

看来这真是一份有价值的工作

毕竟

体验设计就应该做到严谨且锱铢必较嘛!

可以思考一下,倘若一个领域能创造价值的机会已经很少了,那就意味着这个领域的竞争会变得残酷且事不由人。大家论证价值的成本越来越高,边际收益越来越低,俗称“内卷”…

再来看看B端,B端体验设计师往往可以负责一个完整产品(甚至多个),设计师会负责产品的框架搭建、逻辑梳理、页面设计、品牌、官网、运营等一系列设计。有趣的是,由于B端设计往往都是创新项目,产品经理其实对这个产品该是什么样的也没有清晰的认知,最终的产品形态往往是设计师和产品经理一同讨论出来的,设计对业务的价值不言而喻。

如果还是套用那个故事,在B端工作,你所负责的可能是一艘小船,你的注意力不再是这艘小船的桅杆是否擦得够严谨科学,而是这条小船的航道、动力、扩建规划等,这些将会更有意思。

工作难度决定价值,价值与职业寿命挂钩,职业寿命决定了焦虑感。那三鱼的建议也不言而喻。

 

动态思维是B端交互很重要的能力

一直以来我们把动效归为视觉能力。但事实上,动效背后的动态思维应该是交互尤其是B端交互必备的能力。看看下面这几个案例中设计师所解决的问题。

案例1

下图是AE的界面,当用户不选中任何图层时,点击“形状工具”,可以新建一个矢量图形,但当用户选中某个图层时,再点击“形状工具”,该功能则变成了给用户选中的图层创建蒙版。我相信用过AE的人,都见识过这个鬼畜的交互:即同一个按钮却有两种不同的含义。

Adobe After Effects-“形状工具”

在我所负责的一款数据分析产品中,也遇到了类似的问题 (即用户点击图表icon可以新建一个图表,用户选中某个已有图表时,再点击图表icon则是切换该图表的类型)。

因此在2.0版我们尝试将 “创建图表” 和 “切换图表类型” 两种场景区分开。可以看到下图中,图1和图2都解决了这个的问题。但图1的方式是直接将其拆分成两套功能区,虽然解决了问题,但也让导航的内容变得冗余。而图2的方式则更为巧妙,拆分功能区的同时,利用鼠标的点击和失焦,用动效的方式让用户感知到场景的切换,不影响操作的同时还节约了导航空间。

 

案例2

在一款数据产品中,我们上线了一款新功能,对用户有很大的学习成本,于是我们计划在承接页放一张功能全局流程图,它既可以对新功能有一个系统的介绍,同时也可作为功能入口快速定位想要的模块。但问题来了,由于功能复杂,导致流程图上的信息体量太大,倘若完整展示,则会超出一屏空间,用户就很难看清完整的功能流程。最终我们通过动效手段,兼顾了“模块介绍”和“流程展示”,这种展现形式也被业内好评,还被华为云等多家云服务厂商所借鉴,现在大家在很多B端产品中都能看到我们的影子。

 

案例3

以上两个案例比较复杂,再举两个简单的例子:B端产品限于专业性,表单信息通常很长,所以为了表单信息能尽可能完整展现,我们在下拉框展开的瞬间,往外“借”了一部分空间,以展示更多的信息。

 

案例4

这是一个“逻辑表”,一个数据模型中通常有N个逻辑表,信息密度极大,因此我们要尽可能节约空间,所以我们在不影响用户使用效率的基础上,把搜索框“收”了起来。

有没有发现这几个案例解决的都是交互问题,而且是直接影响用户感知的交互细节问题。我们可以看到,在不具备动态思维的时候,交互在面对“信息过载”这个B端绕不过去的课题时,唯一的解法只有“平铺”一招,但这招在面对复杂问题时明显不够用。而一旦具备动态思维,交互设计师就可以从“时间(出现顺序) + 空间(叠放层级)”两个维度对信息的展示进行重组,解题能力将大幅提升。

不止是前文提到的“信息过载”… 诸如“提升操作效率”、“降低认知成本”、“数据可视化”也全是B端体验中对用户体验影响极大的课题,对于交互的工作,也不仅仅只有产品框架的梳理,还有产品细节的打磨,尤其是一款产品成长到后期,一定会围绕体验细节精细化打磨,只靠“静态平铺”这一招恐怕远远不够解题,而动态思维能拓宽B端交互在细节上的解题思路,对交互而言是很重要的能力。

 

视觉创造价值的机会大于交互

我疯了吗?明明前面才说了“交互的机会大于视觉”。三鱼解释解释:对业务而言,交互的机会往往大于视觉,但对设计师自己而言,“交互”是一种必备的但不易被证明的能力,反之“视觉”是一种锦上添花的但容易出彩的能力。

再说详细一点:在设计师的职场博弈中,“交互能力弱”有可能会成为你的短板,但“交互能力强”却很难被塑造成你的长板,因为它的论证成本极高,尤其是在B端复杂的业务场景下。与之相比,“视觉能力弱”往往不会成为一个设计师的短板,但“视觉能力强”则可能成为一个设计师的长版,因为它的论证成本极低。不要小看论证成本,晋升答辩通常只有15-20分钟,如果不能在极短时间内论证清楚自己的能力(价值),就会很吃亏。所以短时间内把自己的能力(价值)论证清楚极为重要。

根据我的经验,短时间内将“交互”论证到“强”的难度远大于将“视觉”论证到“强”。所以成本最小、收益最大的方式应该是将交互论证到“不弱”+将视觉论证到“强”的能力组合。

但现实是几乎所有大公司的体验团队,视觉设计师往往被交互设计师“压着打”。因为“交互”是必备能力,“视觉”是锦上添花能力,“视觉能力弱”并不算短板,而“交互能力弱”却是明显的短板。在大部分设计师都谈不上具备明显长板的前提下,在职场博弈中,存在明显短板的一方一定会输,也就是说视觉一定会被交互压着打。所以如前文所讲,三鱼建议:“体验设计师的工作一定要触及交互部分”。

所以标题可以完善一下:“在交互已不是短板的前提下,视觉创造价值的机会大于交互”。

 

三鱼的做法

(这一段是题外话)既然讲到这里,大概能理解三鱼的做法了吧?我在站酷所发的作品,都是英文排版+动效展示,目的就是只展现视觉的“强”,因为它是一种观众只需要“看”就能感受到的、论证成本极低的能力,很适合线上场景。倘若有听过三鱼线下分享的同学就会发现,同样的作品我在线下会花很大的篇幅讲出背后的交互思考,因为要想论证清楚交互的“强”,就离不开阐述业务原理,这是需要观众付出“看+听+提问互动”的理解成本才能get到的,因此只有线下场景才比较适合展现出交互的“强”。

嗯,虽然前面说了交互的论证成本很大,但谁规定了“视觉”和“交互”必须要孤立论证。有机会我也分享一下体验设计该如何论证交互的“强”。

 

B端的劣势

我不喜欢很多人鼓吹的“B端是一片蓝海”,仿佛转行B端就进入职业发展的快车道一样。三鱼必须坦言,B端比起C端,同样存在着极大的劣势:开发成本大就不多讲了,B端产品往往服务于一小戳群体的工作,这些用户群体本身数量较小,而且很多还是新兴职业,所以B端产品发展初期的用户体量都很小。那么就带来一个问题,一小戳用户的收益往往短时间摊不掉研发成本,如果没有公司战略上的强投入,那么产品更新迭代将是极慢的,甚至90%的产品会因为收益不足,永远停留在1.0版,也就意味着大部分B端产品可能连体验流程都无法闭环,更别说打磨体验了。这些问题在C端不容易遇到,但在B端却很常见。

这也就导致了开发资源都优先投入到功能研发中,留给体验打磨的开发资源很有限,这会影响设计师的价值论证。我亲眼见过一些设计师负责了很多1.0的B端项目,这些产品在几个核心功能上线后,就停止更新迭代了,产品经理和研发只在意核心功能能让用户用起来,至于体验是否流畅,流程是否闭环,对他们而言并不重要。因此这些设计师忙了一年,却没有一个可以论证自己价值的体验设计故事。这在B端是一个普遍现象,是B端相对于C端的劣势。那些只讲B端的好,不讲B端存在问题的言论是不负责的。

当然,哪怕存在这样的劣势,B端体验设计依托复杂业务所带来的价值优势依然是C端无法比拟的。而B端的劣势其实是可以克服掉的,也就是接下来我要分享的“干货”。

 

干货来了

先说说上次那篇文章中,我认为通常情况下设计师要讲出有价值的好故事主要靠两点:

1. 时+运:B端产品更新迭代慢,你如果有充足的耐心陪伴它成长,且它足够好运地成长起来了,且你也足够好运没有被中途变更业务,那么恭喜你总算等来了一个讲出好故事的机会。但目前互联网早就过了野蛮生长的时期,这种机会已经越来越少了;

2. 权力:依靠你能调动的资源,以体量来堆出一个好的体验故事,比如造轮子。好处是简单粗暴,故事往降本提效上讲业务肯定是买单的,缺点是轮子不能经常造,造多了就不降本了。而且故事的效果受限于业务体量,有多大体量讲多大故事,所以这种故事更多地适合大厂的管理层去讲。但这似乎就把鸡和蛋颠倒了,倘若设计都熬到这个位子上了,又何必来等我的“干货”呢?

所以在过去两者都不具备的前提下,我有一招自己的玩法。先来看一个案例:

https://www.zcool.com.cn/work/ZNTczNjg3MDg=.html

如果你把案例中的视频看完,你大概能感受到这是一个涵盖了产品框架、角色路径、界面设计、品牌设计的还算蛮大而全的方案,虽然限于保密,对外只能看视觉,连Logo我都不敢多解释两句。所以我大致讲讲:一开始,产品经理所提过来的需求仅仅只是几个核心功能的设计需求,大概4-5页原型图,这时大部分设计师可能会按照原型图把交互和视觉完善,然后产出设计稿的标注和切图,交付开发。

但三鱼了解完业务之后,发现这个1.0的需求用户的路径并没有闭环,于是我继续深入理解业务,为产品定义了三种不同的使用角色,并根据每一种角色的诉求推导出场景和体验路径,从而重新梳理了整个产品框架,补全了缺失场景。

然后将产品能力集成并可视化展现出来,最终交付了一套流程闭环、交互创新、视觉感知强烈的体验方案。

这套产出令业务很惊喜,也认可了整套方案并愿意为之投入开发资源。但三鱼实话告诉你,目前大半年过去了,我所提交的方案被开发上线的只有60%,因为目前的用户体量实在支撑不起更多开发人力投入了,所以哪怕那40%的功能是对的,也需要很久以后才能开发上线。

但没有关系,对我而言,我已经得到了一个流程闭环、交互创新、视觉感知强烈、能充分反映设计价值的故事了。

这便是三鱼的思路,概括下来就一句话:把1.0的需求按3.0的质量产出。毕竟当现实条件无法支撑你展示自己的价值,那就自己创造机会去展示。靠这个思路,当别人还在耐心且不确定地等待业务慢慢成长时,三鱼已经在短时间内积累了大量优质故事,这也让我的职场博弈占了优势。

这里有个问题:就是我创造的价值,并不是业务方当下买单的价值,似乎与前面我所说的观点有出入。

这里我要再讲一个观点:设计对业务的价值不一定以设计师对当前业务的价值为转移。通俗来说,所有业务方都希望自己的产品是功能完善、流程闭环、体验舒适的,这个诉求可能会因为当下开发成本的短缺而被抑制,但却是可预见的只要条件成熟业务就一定会产生的诉求。因此设计师主动往前走一步的做法一定是业务方所认可的,哪怕最后没有开发人力落地这些设计,业务方也清楚是现阶段的业务水平所导致的,而不是去否定设计的价值。而对于设计师而言,只要你提供的设计方案是超预期的,总有一天会有优质的业务场景愿意为之买单 (意会) … 总之,“把1.0的需求按3.0的标准交付”是一条经过三鱼验证过的行之有效的手段。

以上输出的都是认知,认知的提升会带来成长的幻觉。但事实上,哪怕你知道了动画对交互的提升巨大,但不具备动画能力也是空谈;哪怕你知道视觉创造价值的机会更大,视觉能力不够成为你的长板也是空谈;哪怕你知道把1.0的需求按3.0来产出收益巨大,你不具备3.0的视野也是空谈… 认知更像是临门一脚的点破,手上功夫才是你的基本盘。

 

手上功夫的成长

最后聊聊成长,三鱼的经历可能会给你一些参照吧。先附上我的培训班作品,这就是三鱼最初的水平,那时我已是工作了两年转行的状态,年龄和经验都很吃亏。

培训班作品-《爱情小管家》

但三鱼运气还算好,赶在互联网的末班车进了大厂。这保证了我的成长环境至少是不错的,也更有机会接触到一些好的产品、优秀的设计师,能学到更多的东西 (说真的,当初能进大厂,也许有能力的加持,但更多的要归功于时代的运气)。

但进了大厂也未必就踏上了快车道,大厂的竞争很激烈,好的项目机会从来都是抢手货。从培训班出来的我,因为没有工作经验,被分配去做广告图优化,三鱼先解释一下这个工作:就是客户在我们的产品中投放广告,有些客户投放的广告点击率并不理想,为了确保客户的推广费花得值 (不然人家不投了),于是我们会对一些不理想的广告图进行设计优化。对设计师来说,这些广告图的质量参差不齐,且没有源文件,优化工作是一件繁琐且低价值的事。这种事,很适合我这个刚转行的菜鸟来干。下图是一些我优化过的广告图,这就是三鱼在大厂一开始的主要工作。

广告图优化

这对当时的我来说已经很满足了,毕竟能创造价值、能挺过试用期三鱼就谢天谢地了。于是我很认真地完成手上的工作,还沉淀了一套广告图优化“方法论”,比如把广告图分为电商、工具、游戏、社交等,每一种类别有特定的优化方式,还附带最后的数据验证… 嗯,这是我第一次接触 “大厂套路”。

看我广告图优化得还不错,于是主管给我新增了一项任务:我们团队每天都要在Facebook上发一条动态,每条动态都会附一张配图,所以每周我需要画5张运营配图。

日常运营支持

日常运营配图所要求的质量并不高,倘若只是按可交差的水准来产出设计,这5张图其实费不了多少功夫,于是三鱼决定利用富余的时间去锤炼自己的专业能力。具体来说:每周一业务方会告知本周需要绘制的5个主题,我会用一天的时间把其中4个主题快速地画完交差,然后留一个自己最感兴趣的主题,去设计平台上学习新的风格,并结合主题去创作。比如下图的产品矩阵纪念日:https://www.zcool.com.cn/work/ZMTQ4MTQyMDg=.html  。就是花了心思去做的。

产品矩阵纪念日

再比如美食节活动:https://www.zcool.com.cn/work/ZMTUwNDk4NzY=.html  。我不仅尝试了新的风格,还给它加入了爱情故事。

还有一些名人名著的纪念日闪屏:https://www.zcool.com.cn/work/ZMTY3MTkzMjg=.html  。

于是我就一直用这种刻意练习的方式,把自己的手上功夫越练越扎实了。而对于业务方来说,本来预期就不高,偶尔还能收到三鱼超预期的设计交付,自然是很欣喜的,于是对我的评价也很高。

随着我的交付质量不断提升,业务方的预期也越来越高。一次在别的设计师的运营事故中,业务方指名要三鱼来设计。于是我站出来救了场,这次事件过后,大家突然意识到我不是一个初入行的菜鸟了。

地球一小时

但三鱼的目标还是想往产品体验方向发展,但产品设计的机会是很稀缺的。但三鱼随即等来了一个机会:我们的核心产品要进行一次体验升级,这种级别的项目只有最资深的设计师才能参与的。所以我们的主管选了三位资深设计师来比稿定方案。

三鱼很积极地表示自己也想参与比稿,不仅表达了自己的职业规划,还保证参与比稿不会耽误手上的工作。由于我之前的工作中已经积累了不错的口碑,主管同意了我的请求。

我很珍惜这样的机会,于是一口气出了两套方案 (都在站酷中)。

但现实很残酷,大家并不认可我作为一个设计新人的实力,我的方案在一开始的内部评审中就被提前“毙掉”了 (其实这很正常,没有人会相信一个新入行的设计师的实力)。不过主管考虑到我认真的态度,虽然让我失去了上台提案资格,但还是把我的两套方案作为“更多风格探索”放在PPT的最后了…

三鱼的两套方案

但戏剧性的一幕又来了,提案的过程很不顺利。可能是因为那时流行扁平风,但过于千篇一律导致几个大领导看腻了,反而认为我这种带质感的方案让人耳目一新。结果我的陪跑方案居然奇迹般地被采纳了…

这可把三鱼牛逼坏了,当晚我把这个结果告诉小白,小白叮嘱我:“这个时候很尴尬,这么重要的项目不可能完全交给你这个新人来负责,你现在最好的做法是一定要低调,明天去了公司别吭声,等你的主管来找你聊,听安排就是了,切记切记,我看你已经飘得不行了”!

于是第二天三鱼全程装蒜,默默地等待着。果然!主管来找我了,希望我能加入到产品改版的项目中来,她会安排一位资深设计师带着我一起做,至于我手上目前的工作,就交接给其他设计师吧。于是三鱼开开心心地服从了安排。

噢对,由于原来业务方对我实在太满意了,这次的业务调整,那些业务方纷纷跑去请求我的主管“让三鱼再为我们画最后一张吧…” 我也被主管戏称为设计团队的“头牌”。

写到这里,三鱼算不算靠努力与运气就走上快车道了?事实上还早… 目前为止我的手上功夫还仅限于PS用得不错罢了,其它能力为0。而能力的欠缺很快就让我遇到了难题。

那就是:动效设计师不干了。

以前的一些大厂会设置专门的动效设计岗,由一位擅长动画软件的同学来帮其他设计师实现动画上的创意演示,但这种“只能替别人实现创意”的工作模式,对动效设计师的职业成长不利,于是越来越多动效设计师转行去做产品体验。

这可苦了那些不会做动效的设计师 (包括三鱼),工具类的产品,对动效的要求比较高,倘若没人替自己实现脑海里的动画创意,工作对接就很吃力了。

所以只好去学。三鱼觉得动效比3D还难学,它难在几乎找不到针对性的动画教程,那时我能从网上找到的动画教程全是教“影视后期”的。可没办法,只能硬着头皮学,不然我的创意就不得不妥协于手上功夫了。于是三鱼一路东拼西凑,艰难地把动效学会了。

下图是我做的第一个动效,一开始我只会简单的位移旋转,动画虽然生硬,但好在PS画的素材质量本身不错。

这是一年以后的水平,那时我已经能3D+动效结合着玩了。

说到3D能力,也是在这期间,我和小白一起报名了第一期的白无常C4D课程培训班 (三鱼喜欢抱团学,可以互相监督,一个人学很容易半途而废),我还把学到的东西应用到了实际工作案例中。

当我把这两张图发给白无常老师看的时候,老师很诧异:“我没有教角色建模呀”?其实图里的熊是PS画的,说明那时我的PS水平已经比较强了。

说到PS绘画,这种风格受李舜影响比较大。在李舜的风格刚出现的时候,我觉得很惊艳,就去学习了她的画法 (她写过一篇教程,感兴趣的朋友可以去她的站酷找找)。下图的IP算比较出名的了,因为这套作品时不时被我发现放在了某些淘宝店里挂羊卖狗…

那段时间是我过得最快乐的时候,我同时负责产品体验和品牌设计,包容的大厂环境也给了我学习和应用新技能的空间,一年的时间我的手上功夫突飞猛进。

再后来去了福厂,那是三鱼最痛苦、但也是成长最大的经历:

我遇到了一个很糟糕的主管,在福场的三年多时间里,三鱼一方面依托平台加速成长,一方面对抗来自主管的PUA,并最终完成了反杀。细节不多讲了,说说最后的结果吧:这三年里,我的绩效全是最优(凭借着无法否定的能力和成果,三鱼逼着主管给自己打了好绩效),反观这位主管,三年里有两年拿了最差绩效,最后被迫转岗…

我在福厂的成长不仅是手上功夫,更多的成长是“认知”,而后者对我的职业突破起了决定性作用。但这段经历很痛苦,如果说在百度的成长是技能上的成长,它是一个逐渐变好的过程,是愉快的,那么在福厂的经历更像是把人打碎以后的重塑,因为认知的成长一定是伴随着否定、怀疑、焦虑的,三鱼在其中艰难地探索出了一条可能是对的的路,以后有机会再慢慢分享吧。

回想起来,三鱼算幸运的,我赶上了互联网的末班车,在狼厂宽容的环境下锻炼了能力,在福场如日中天的阶段实现了个人的成长。但三鱼也是不容易的,我的成长经历并没有大家臆想的那么一帆风顺。大厂的竞争非常惨烈,被打碎以后是一蹶不振还是再重塑?这么多大厂设计师,能出头的有几个?玩明白的又有几个?

 

写在最后

这篇文章真长,如果你能耐心读完… 嗯,算你厉害。我最后再总结一下吧:

前半部分讲了认知,是三鱼基于自身环境所形成的认知,但这些认知希望大家斟酌着看:第一,它是基于三鱼的成长路径和自身条件所得出的,未必适合所有人;第二,行业是不断发展的,认知也不会一成不变,也许一年以后这套认知就失效了。

后半部分讲了成长,当然主要集中在专业上的成长,这也是目前大部分设计师更需要的,也是比较适合在站酷分享给大家的。

认知可以让你们前进的过程中少走弯路,但是技能才是推动你前进的核心动力。三鱼能讲的东西还有很多,后续再慢慢聊。

 

原文地址:站酷

作者:三鱼先生

转载请注明:学UI网》干货迟到了,但三鱼不会让它缺席2

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


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


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



如何做简单又高级的设计?这21个设计方法总结的太全面了,必须收藏!

seo达人


图片

现如今企业都在不断追求打造简单好用的产品,期望在产品中有更多的功能,更新的技术以及更强的能力但仍然能有一个非常轻量和简单使用体验。但通常情况下,做减法反而是最难的事情。

 

一、如何定义”简单“?

我们可以把简单定义为容易理解,不难做到的事情。然而简单是主观的,某些事情对某些人来说简单,但对另一些人来说又会很难。一般来讲,我们对任何简单或复杂的过程形成个人意见,大致分为三个阶段:

图片

为用户在实现他们目标的路上消除困难,帮助他们轻松的到达目的地。John Maeda在《简单法则》一书中提出了在商业、技术和设计中平衡简单与复杂的十条法则,核心思想就是希望做更少的动作但得到更多。

图片

《简单法则》 John Maeda: http://lawsofsimplicity.com/

Maeda是MIT媒体实验室教授,也是世界著名的图形设计师,他一直在探索如何重新定义”改进“的概念,使得这个概念不再人云亦云。这本书非常不错,所以推荐大家去看看。

 

二、什么是复杂的?

谈到简单的时候,需要考虑到它的反面范围。简单或是复杂是比较主观的感受。经过适当的培训,即使是造火箭都可能不会那么难。但有几个因素会使非常简单的任务复杂化。在产品设计中,应该尽可能地避免以下这些情况:

图片

我们应该如何应用到产品设计中?

1、建立产品的核心价值

有许多产品都希望尽可能地满足所有用户,然后成为行业中领头羊。如果你希望你的产品变得简单,就需要定义产品的核心价值,并且确定你真正想要服务好的用户群体。不是每一个产品都需要内置一个facebook。

图片

2、移除掉任何不必要的元素

变简单最直接的办法就是深思熟虑地做减法。当你犹豫这个元素要不要拿掉时,拿掉就好。次要信息,不经常使用的控件需要处理,把样式尽量弱化。就是这么简单,一旦你使用这个原则后,效果是立竿见影的。只是你需要考虑清楚,哪些需要移除掉。

图片

”简单不意味着没有复杂的功能,只是在结果上简单。简单是某种程度上描述一个物件和产品的目标及位置。不复杂是说产品本身的功能设计不是杂乱无章的,要做到这一点并不简单。“——Jonathan Ive(苹果的乔纳森)说。

3、数据转换为更直观的样式

我们日常设计的大多数产品都聚集在用户需要理解的大数据上,以便有效地执行他们的日常任务。当你知道用户对于趋势和变化更有兴趣,把数据可视化会比单纯的数字表格对用户来说更有帮助。在数据图表中,还可以根据需要显示更多有价值的信息,并将这些直观呈现在用户的面前。

图片

4、支持快速决策

用户被各种选择狂轰滥炸,不得不花时间去理解和决定,给他们增加了不必要的工作。这里可以用一个非常著名的希克定律来解释,选项增多会增加用户做决定的时间和精力。所以,如果你想提升用户体验,让用户感觉到简单,那么就尽可能地帮助用户更快地做出决定。尽可能地减少不必要的选择。

图片图片

5、太多的选择会吓跑用户

当前的心理学理论和研究肯定了个人选择对情感和动机的积极影响。这些发现导致了一种流行的观念,即选择越多越好——人类管理选择的能力和欲望是无限的。但在现实中,研究证明了相反的情况。

Jam实验是消费心理学中最著名的实验之一,减少消费者的选择有利于销售。重要的是,研究表明准确地提供较少的选择可能会提高你的销量。

图片

这个实验似乎证明了,与选择较多的顾客相比,选择较少的顾客购买的可能性是前者的10倍。它一直是选择过多的一个关键例子,即给顾客提供太多的选择实际上会抑制顾客购买。

图片

6、在有多个选择的时候提供建议

当多选不可避免时,试着增加一些建议。给选择增加推荐选项,或分享其他客户最喜欢的数据。通过设计清晰地向用户传达选项之间的关键区别。这种方法通过用于选择不同套餐的界面。

图片

7、将用户的注意力吸引到正确的区域

当你理解用户实现目标的过程时,每个步骤都有一些更相关的内容,这些内容将帮助你朝着最终目标前进。找到这些关键区域并让用户能聚集在这些区域上。(彩云注:给操作设定好清晰的优先级)

图片

8、使用颜色和排版来传达内容的层次结构

你应该经常能听到——”用户不喜欢阅读“。这没错,我们对能记住和对需要深入了解的东西是有选择性的。如果你曾经一个字都不愿意读就选择同意了用户协议,你肯定懂我的意思。有许多因素会影响传达:字体类型、尺寸、字间距、行距、大小写、颜色。用这些要素来组织内容的结构层次,使用正确的颜色和字体,将能够增强品牌感,使其更好地被识别,更有吸引力和记忆。

图片

9、合理的组织能够帮助系统看起来更简单好用

让我们做一个简单的测试。下面的2张图片,用秒表来记录下你大概花多久时间数完所有的黑点。

图片

结束了吗?就像你自己会看到的那样,计算不规则的圆点方块会花费更多的时间,除此之外,还会给你带来更多的认知负担。为什么我们会得到这个结果?因为正方形中有相同数量的点。

把这些点摆成一个特殊的矩阵,在视觉上可以帮助扫描,成组的非常好统计。在左边没有组织的方块中,我们必须逐个计算。另外,对于左图来说,有时候你还可能会统计错误,需要再次确认才能放心,太麻烦了。

图片

组织好的元素不仅仅好认,而且还非常好记。不论是操作什么样的产品,记住所有控件位置和功能非常重要。让我们做另一个小练习,一分钟前,你还在认真的数两张图中的点,现在请你回忆下两个正方形中的每个点的位置。对大多数人来说,回忆这种无序的结构几乎是不可能的。

图片

10、将内容分组

简化一个页面,有一个简单的办法就是把内容进行分组。此时,用户在处理组信息时,精力耗费很少,而不是要看大量不相关的元素。在元素或元素组周围添加边框是创建与周围元素分离的一种简单方法。格式塔心理学中有多种分组原则可以帮助物品产生关联性:接近性、相似性、连续性、封闭性和连通性。

图片

11、把大任务分解成小步骤,尝试用一列来布局

现在几乎每个产品中都有不同的表单,为了收集你的资料。有时候即使去掉所有不必要的东西后,它依然会很复杂。这些表单会让用户失去完成的动力。所以我们能做的就是把这个大任务分解成一系列的小任务。眨眼间,把这个过程进行到底似乎变得容易多了。完成小的子任务会给用户带来一部分内啡肽和继续进行的满足感。

在设计这个表单时,用单列布局替代多列布局。单列布局更容易填写。这样用户就不大需要考虑下一步要填什么,只需要沿着直线向下移动填完就好了。

图片

12、及时告知进度和当前状态

不确定性让我们感到焦虑,在操作过程中应该尽可能地给用户确定的信息。用户需要知道他现在的位置,下一步要做什么。常驻一个信息进度摘要会是一个非常棒的做法,能让用户降低认知压力,并能方便退回前一步确认信息。

图片

13、帮用户自动计算

人类大脑不擅长涉及数字的原始计算。尝试让系统自动完成所有计算对用户来说会有更好的体验。

图片

14、采用渐进式呈现复杂信息

渐进呈现是UX设计中更容易让用户理解的一种用户界面设计模式。它涉及到在多个界面上排列信息和动作,这样就不会让用户淹没在无关信息中,直至优化到所有信息都强相关。渐进呈现属于从”抽象到具体“的典型概念,包括用户行为和交互顺序。一个非常好的渐进案例就是iOS的嵌套开关设置界面。

图片

15、设计普遍接受的模式和交互

用户将大部分时间花在其他产品上。这意味着用户喜欢用在其他产品上他已有习惯来使用你的产品,他们会对你的产品的外观和性能有特定的期望。

这句话适用于从互联网产品到你家冰箱的任何数字或实体产品,反映了用户心态。但这并不意味着你应该停止创新,更多的是评估背离传统的导航或控制方式是否能让用户改变他们的思维模式。

图片

16、设计一个精简的新手引导

设计的主要目标是为了将用户与产品提供的价值联系起来。任何阻挡在用户和他实际操作之间的东西都是障碍,除非它服务于功能性需求。首次体验对于产品来说非常重要,我们人类会很快形成对产品的看法,当我们不满意就会立即离开。

你在第一次操作时,即使是最简单的任务也可能是一项挑战。有时在我们操作产品之前需要额外的学习。在数字设计中,用户期望的是产品应该足够简单易懂,他们希望根据需求得到帮助,或者在出现问题时得到帮助。提供上下文帮助,而不是预先为用户提供学习材料,设计一堆引导页。

图片

17、牢记人体工程学和使用产品的环境

简单,正如我们已经定义的,你可以多么容易地使用产品。人体工程学是设计、产品和系统的考虑因素,以使它们适合操作它们的人。大多数人认为这与座位或汽车控制装置和仪表的设计有关,事实确实如此。但它的意义远不止于此。人体工程学适用于任何与人有关的设计,包括数字产品。

1954年,心理学家保罗·菲茨(Paul Fitts)对人体运动系统进行了研究,发现移动到一个目标所需的时间取决于它与目标的距离,与目标的大小成反比。因此,要确保常用元素的尺寸较大,并将它们放置在靠近用户的常用位置。

图片

18、支持内联编辑和自动建议值

删除每个流程中所有不必要的交互、视图和步骤。用户操作系统有一个最佳速度,它被称为“心流状态”。不要用弹出窗口打破这种流畅。对于以后可以更改的所有操作/值,尽可能支持内联编辑。当有大量值可用时,应当自动建议值。

图片

19、使用智能默认值来减少认知负荷

智能默认设置是给问题预先填入答案,让用户更快地完成表单。在定义相关的默认值时,设计师需要理解用户以及他们将在何种环境下使用产品。这只有通过深入的研究和测试才能实现,从用户身上学习,并根据用户的历史数据和使用模式调整默认值。如果需要明确的选择,就将默认选项设置为绝大多数用户(比如90 – 95%)会选择的选项。

图片

20、预防错误

错误消息会带来很大的压力,让用户觉得他们搞砸了或者不能胜任任务。确保自动检查输入的数据,并对不适当的数据输入提供警报或提醒,以减少错误。要么消除容易出错的条件,要么检查这些条件,并在用户提交操作之前向他们提供确认选项。应使用强制功能保护破坏性和不可恢复的操作,以确保用户意识到他们的选择将产生的影响。

图片

21、无障碍设计

作为一名设计师,你的目标是维护易用性,确保你的产品能够被更广泛的受众所访问。全世界有超过10亿人有残疾。不要把颜色作为传达信息的唯一视觉手段(彩云注:增加图标不仅仅是为了好看,也为了提升操作的识别性)。确保文本和背景之间有足够的对比度,支持键盘导航等。可访问性并不局限于具有某些不同能力的一组用户,当针对可访问性进行设计时,你将改善每个使用产品的人的体验。

图片

 

三、总结

设计出好用简单易于理解的产品不容易,但那是一个方向,这些快速的小技巧能够快速地让界面变得简单。如有学到,记得点赞分享给朋友们~


作者:彩云Sky


转载请注明:学UI网》如何做简单又高级的设计?这21个设计方法总结的太全面了,必须收藏!

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


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


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



数据可视化与信息可视化浅谈!

seo达人


1.柱状图

2

适用场景:它的适用场合是二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。
优势:柱状图利用柱子的高度,反映数据的差异。肉眼对高度差异很敏感,辨识效果非常好。
劣势:柱状图的局限在于只适用中小规模的数据集。

2.折线图

3

适用场景: 折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合。它还适合多个二维数据集的比较。
优势:容易反应出数据变化的趋势。

3.饼图

4

适用场景:适用简单的占比图,在不要求数据精细的情况下可以适用。
劣势:饼图是一种应该避免使用的图表,因为肉眼对面积大小不敏感。

4.漏斗图

5

适用场景:漏斗图适用于业务流程比较规范、周期长、环节多的流程分析,通过漏斗各环节业务数据的比较,能够直观地发现和说明问题所在。
优势:能够直观地发现和说明问题所在。在网站分析中,通常用于转化率比较,它不仅能展示用户从进入网站到实现购买的最终转化率,还可以展示每个步骤的转化率。
劣势:单一漏斗图无法评价网站某个关键流程中各步骤转化率的好坏。

5.地图

7

适用场景:适用于有空间位置的数据集。
优劣势:特殊状况下使用。

6.雷达图

8适用场景:雷达图适用于多维数据(四维以上),且每个维度必须可以排序。但是,它有一个局限,就是数据点最多6个,否则无法辨别,因此适用场合有限。
劣势:需要注意的时候,用户不熟悉雷达图,解读有困难。使用时尽量加上说明,减轻解读负担。

数据可视化使用小贴士
饼图顺序不当

9

(最好的做法是将份额最大的那部分放在12点方向,顺时针放置第二大份额的部分,以此类推。)

2.在线状图中使用虚线

10

(虚线会让人分心,用实线搭配合适的颜色更容易区分。)

3.数据被遮盖

11

(确保数据不会因为设计而丢失或被覆盖。例如在面积图中使用透明效果来确保用户可以看到全部数据。)

4. 耗费用户更多的精力

12

(通过辅助的图形元素来使数据更易于理解,比如在散点图中增加趋势线。)

5.柱状过宽或过窄
13

(经过调研,柱子的间隔最好调整为宽的1/2。)

6.数据对比困难

14

(选择合适的图表,让数据对比更明显直接。上图的数据作用是为了比较,显然,柱状图比饼图在视觉上更易于比较。)

7.错误呈现数据

15

(确保任何呈现都是准确的,比如,上图气泡图的面积大小应该跟数值一样。)

8.不要过分设计

16

(清楚标明各个图形表示的数据,避免用与主要数据不相关的颜色,形状干扰视觉。)

9. 数据没有很好归类,没有重点区分

17

(将同类数据归类,简化色彩,帮助用户更快理解数据。上图的第一张没有属于同类型手机中不同系统进行颜色上的归类,从而减少了比较的作用。下图就通过蓝色系很好的把iPhone,Android,WP版归为一类,很好的与iPad版,其他比较。)

10.误导用户的图表

18

(要客观反映真实数据,纵坐标不能被截断,否则视觉感受和实际数据相差很大。左图的数据起始点被截断从50开始。)

信息可视化案例
信息可视化囊括了数据可视化,信息图形,知识可视化,科学可视化,以及视觉设计方面的所有发展与进步。下面是信息可视化的案例分享。
19
(上图为关系网——基于60000封电子邮件存档数据,用不同颜色深度的线条呈现了地址簿中用户和个体之间的关系,比如回复、发送、抄送。)

20
(上图通过数据化的比较,用变形的柱状图等图形,形象的展示了不同国家老师的收入水平,社会包括学生和公众对其的尊重度。)

如何制作信息可视化?
第一步:确定表意正确明确信息图表达内容,确定最主要的表现内容。
第二步:优化展现形式内容正确还不够,还要易懂。我们需要在这个步骤里寻找信息图最优表现形式,让读者 一目了然,降低理解难度。
第三步:探索视觉风格在探索视觉风格时要注意抓大放小,先定下来最主要模块的风格,再做延展。
第四步:完善细节视觉风格确定后,可根据需要添加、完善细节。
第五步:风格延展“一致”的视觉设定有助于用户理解,也能更好的提升品牌形象。所以主风格确定后,我们需要把它延展到其它有需要的页面上。

以上是分享了数据可视化和信息可视化相关内容,不过信息可视化和数据可视化是两个容易混淆的概念,基于数据生成的数据可视化和信息可视化这两者在现实应用中非常接近,并且有时能够互相替换使用。但是这两者其实是不同的,数据可视化是指那些用程序生成的图形图像,这个程序可以被应用到很多不同的数据上。信息可视化是指为某一数据定制的图形图像,它往往是设计者手工定制的,只能应用在那个数据中。信息可视化的代表特征:具体化的,自解释性的和独立的。为了满足这些特征,这个图是需要手工定制的。 并没有任何一个可视化程序能够基于任一数据生成这样具体化的图片并在上面标注所有的解释性文字。
数据可视化则是普适的,比如平行坐标图并不因为数据的不同而改变自己的可视化设计。可视化的强大的普适性能够使用户快速应用某种可视化技术在一些新的数据上,并且通过可视化结果图像理解新数据,与针对已知特定数据进行信息可视化设计绘制相比,用户更像是通过对数据进行可视化的应用来学习和挖掘数据,而普适性的数据可视化技术本身并没有解释数据的功能。

(感谢数据平台组同仁们对此文章的贡献,感谢魏茜璐的视觉配图。)

文章来源:京东设计中心

转载请注明:学UI网》数据可视化与信息可视化浅谈!

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


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


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



数据可视化设计浅析与研究(一)

seo达人

一. 数据可视化历史渊源

从人类诞生之日起,便有了信息的呈现形式,并伴随着人类发展足迹不断变迁。如今出现的任何信息可视化类型,并非一夜之前突现的新物种,几乎都是从过去经典的表达式中发展而来。

17000 年前

如果你问最早的信息图表设计师是谁,很多学者认为是远古时代的洞穴人,他们是最早用图像描绘成日常生活比如战斗,野生动物、死亡和庆祝活动等等。

法国发现的洞穴绘画遗址-拉斯科壁画,距今约17000年

 

公元前 3000 年

古埃及象形文字,作为那时的正式书写系统,开始使用符号来代表字母和概念,可追溯到公元前3000年。

 

公元前 550 年

希腊哲学家阿那克西曼德创造了第一个出版的世界地图,这可以说是最早的可视化地图了。

 

公元 950 年

欧洲人画出了基于时间变化的折线图,用于展示太阳,月亮等行星的位置变化趋势,开始出现如今的数据图表的雏形。

 

17 世纪

统计图形之父威廉·普莱费尔,发明了我们今天经常使用的折线图和条形图,也被认为创建了面积和饼图。普莱费尔是苏格兰工程师和政治经济学家,并在1786年出版了商业和政治地图集。

智能时代

随着时代的发展,智能时代AR、VR 技术的兴起,我们开始看多更多新颖的的数据可视化形式。

1992-2010年内世界小型武器和弹药的进出口贸易数据展示

 

“里约+20”地球峰会期间的Twitter话题汇集成一颗颗大树

 

二. 认识主流可视化图表

如今随着科学技术的发展,已经沉淀出丰富且经典耐用的信息可视化表达。无论在传统的纸质媒体,还是如今手机、电脑,电视等各类终端的电子媒体都得以大放异彩。目前,各大可视化工具中有非常详尽的图表类型介绍,比如 Excel2010 的版本里面,提供了 10 类共 53 个图表。AntV 平台则提供了 15 类近 200 个数据图表,现在我们就来普及一下基本知识。

常用可视化图表分类

目前主流的可视化平台把常用图表分成九大类(来自 AntV ),分别是:比较、分布、关联、占比、区间、流程、趋势、时间、地图。

1. 比较

显示值与值之间的不同和相似之处。使用图形的长度、宽度、位置、面积、角度和颜色来比较数值的大小,通常用于展示不同分类间的数值对比,不同时间点的数据对比。

典型图表:柱状图、条形图、直方图、K 线图、矩形树图等

 

2. 分布

显示频率,数据分散在一个区间或分组。使用图形的位置、大小、颜色的渐变程度来表现数据的分布,通常用于展示连续数据上数值的分布情况。

典型图表:散点图、气泡图、热力图、箱型图

 

3. 占比

显示同一维度上占比关系

典型图表:饼图、环形图、堆叠面积图、堆叠柱状图

 

4. 关联

显示数据之间相互关系。 使用图形的嵌套和位置表示数据之间的关系,通常用于表示数据之间的前后顺序、父子关系以及相关性。

典型图表:和弦图、桑基图(我有点读不懂)

 

5. 区间

显示同一维度上值的上限和下限之间的差异。 使用图形的大小和位置表示数值的上限和下限,通常用于表示数据在某一个分类(时间点)上的最大值和最小值。

典型图表:仪表盘、堆叠图

 

6. 流程

显示流程流转和流程流量。一般流程都会呈现出多个环节,每个环节之间会有相应的流量关系,这类图形可以很好的表示这些关系。

典型图表:漏斗图、桑基图

 

7. 趋势

分析数据的变化趋势。使用图形的位置表现出数据在连续区域上的分布,通常展示数据在连续区域上的大小变化的规律。

典型图表:折线图、K 线图、堆叠面积图

 

8. 时间(个人认为时间可以放在各大类型中作为一个维度)

显示以时间为特定维度的数据。使用图形的位置表现出数据在时间上的分布,通常用于表现数据在时间维度上的趋势和变化。

 

9. 地图

显示地理区域上的数据。使用地图作为背景,通过图形的位置来表现数据的地理位置,通常来展示数据在不同地理区域上的分布情况。

典型图表:地图

 

常用可视化图表举例分析

1) 柱状图

条形图

展示多个分类的数据变化和同类别各变量之间的比较情况。使用垂直或水平的柱子显示类别之间的数值比较。其中一个轴表示需要对比的分类维度,另一个轴代表相应的数值。

优点:对比分类数据。

缺点:分类过多则无法展示数据特点。

 

# 相似图表

堆积柱状图:比较同类别各变量和不同类别变量总和差异。

百分比堆积柱状图:适合展示同类别的每个变量的比例。

 

2) 条形图(也可归到柱状图大类中)

类似柱状图,只不过两根轴对调了一下。

优点:类别名称过长,将有大量空白位置标示每个类别的名称。

缺点:分类过多则无法展示数据特点 。

 

#相似图表

堆积条形图:比较同类别各变量和不同类别变量总和差异。

百分比堆积条形图:适合展示同类别的每个变量的比例。

双向柱状图:比较同类别的正反向数值差异。

 

3) 折线图

折线图

堆积面积图

展示数据随时间或有序类别的波动情况的趋势变化。

优点:有序的类别,比如时间。

缺点:无序的类别无法展示数据特点。

 

# 相似图表

面积图:用面积展示数值大小,展示数量随时间变化的趋势。

堆积面积图:同类别各变量和不同类别变量总和差异。

百分比堆积面积图:比较同类别的各个变量的比例差异。

 

4) 散点图(以及气泡图)

散点图

 

气泡图

 

用于发现各变量之间的关系。

优点:存在大量数据点,结果更精准,比如回归分析。

缺点:数据量小的时候会比较混乱。

 

# 相似图表

气泡图:用气泡代替散点图的数值点,面积大小代表数值大小。

 

5) 饼图

饼图

玫瑰图

饼图可以很好地帮助用户快速了解数据的占比分配。

优点:了解数据的分布情况。

缺点:分类过多,则扇形越小,无法展现图表。

 

# 相似图表

环形图:挖空的饼图,中间区域可以展现数据或者文本信息。

玫瑰饼图:对比不同类别的数值大小。

旭日图:展示父子层级的不同类别数据的占比。

 

6) 词云

词云

 

7) 箱型图

箱型图

以上只是部分常用图表样式,更多详细的图标样式及其介绍,可前往阿里数据可视化平台 AntV 学习。

 

数据图表使用指南

数据图表如此繁杂多样,到底该如何灵活运用呢?

数据图表专家 Andrew abela 设计了一张汇总图,从全局出发,帮助我们快速确定图表样式

Andrew abela 绘制的图表选择指南被广泛运用

 

这其实为我们提供了一种快速选择数据图表类型的思考流程,四步走:

1.分析数据源

2.确定展示的类型

3.选择的变量类型及数量

4.选择对应的数据图表

 

三. 实用的学习通道

介绍这些基本知识是远远不够的,网络上有非常多的平台、工具和团队可以供我们深入学习和研究数据可视化设计,以下列举了我平时经常光顾的学习资源。

1. 了解数据可视化设计的历史渊源(完整版):

数据可视化图表发展史:http://www.datavis.ca/milestones/index.php?group=Pre-1600&mid=ms9

 

2. 各类可视化图表的概念及用法(超详细):

蚂蚁金服可视化解决方案 AntV:https://antv.alipay.com/zh-cn/index.html

图表示例:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html

图表用法:https://antv.alipay.com/zh-cn/vis/chart/index.html

 

3. 前端可视化图表库(前端可直接调用):

ECharts:http://echarts.baidu.com/index.html

AntV:https://antv.alipay.com/index.html

Google Chat:https://google-developers.appspot.com/chart/

 

4.数据分析工具:

Google Analytics: https://analytics.google.com

百度统计:https://tongji.baidu.com/

 

5.运用可视化工具搭建自己的可视化图表(可以建立自己的可视化图表):

BDP个人版:https://me.bdp.cn/home.html

平时还可以使用 Excel 或 Numbers 整理和输出可视化图表

 

写在最后

除了学习巩固数据相关的基础知识以外,更需要在日常工作学习中培养习惯,养成数据化的思维方式。

  • 1.保持对数据的敏感度
  • 2.尝试利用可视化工具创建图表,锻炼分析整理的能力
  • 3.密切关注自家产品线的用户行为数据,解读各类数据指标,培养分析的习惯
  • 4.关注前沿技术和可视化新形式,保持开放包容的心态

好了,文章就介绍到这里,大家一起学来吧。

预告:下一篇系列文章着重介绍可视化设计的具体方法,譬如从色彩、布局、交互等方面如何设计数据图表,欢迎持续关注。


作者:又彬

转载请注明:学UI网》数据可视化设计浅析与研究(一)

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


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


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



数据可视化设计浅析与研究(二)

seo达人

第一部分: 图表布局 

图表的基本构成(来源网易 UEDC)

 

图表标题

标题一般居中或居左对齐,但是布局时,需要综合考虑副标题、图例甚至筛选器控件等元素的位置。

 

坐标轴

坐标轴包括 X 坐标轴和 Y 坐标轴,有时还会出现次坐标轴。

1. X 轴刻度方向的改变,如果维度过多,则横向刻度的展示范围会非常有限,为了展示更多内容,通常会用其他替代图表(比如横向柱状图),不能替代的情况下,可以考虑将标注文案进行倾斜(不鼓励)。

2. 数据类刻度值尽量转化为千位分隔符(如 K,M,B),保持简洁,以节省空间。坐标轴上的最大值取值要恰当,保证图表占据 2/3 以上,画面更饱满。

3. 还需考虑坐标轴上的极值。

坐标轴

 

图例

离散型数据包括横向排列和纵向排列,连续型数据包括连续图例。

1. 所有图表类型的排列方式要统一,所以要考虑整体的图表空间是适合横向排列,还是纵向排列。

2. 所有形式总长度超过内容区换行或换列。

3. 双轴图包含了 2 种图表类型,不同类型的图例样式要有所区分。

4. 连续型数据通过渐变色来展示数据大小的变化,具体渐变颜色定义在下文中有详细介绍。

图例

 

背景栅格

背景栅格主要用来帮助用户快速读取数据值,方便参考和对比。背景栅格一般有网格线、虚线、点阵、斑马纹等。在设计栅格时,应该尽可能减少对数据的干扰,在合适的场景下,甚至可以去掉背景栅格。

栅格

 

Hover 态(或点击态)

用户在查看某一项数据指标时,给出明确的反馈和提示。数据详情多时,还会通过浮窗的形式展现。此时该状态下数据可以突出显示,可以变化颜色、增加背景元素(线/面)、或者增加动态变化等。

 

字体

数据图表的字体一般采用无衬线体,另外需要考虑字体的辨识度,防止在显示上产生歧义。多数情况下,数据图表会运行在不同分辨率的大小屏中,所以在文字排版上。

做到以上几条,我们在设计图表时就可以避免掉绝大多数的坑,不过毕竟图表类型这么多,在实际场景中也会遇到各种情况。总之有这么几条总的原则

1. 保持数据图表简洁、清晰、易读

2. 强调用户关注的数据,帮助用户快速聚焦

3. 弱化次要元素,如栅格、图例等

4. 删除不必要的元素,阴影效果、酷炫动画

5. 合理布局图表的间距、留白等

6. 充分考虑页面的适配效果

7. 最好使用真实的数据进行设计排版

 

 第二部分: 图表配色 

考虑到图表颜色在设计中至关重要,我把它单独分出来讨论。由于数据的复杂性和趋势变化,配色方案需要考虑非常多的因素,比如可辨识度、舒适性,还需要考虑特殊人群(色盲色弱人士等)对颜色的可读性等等。在配色过程中我们需要区分背景色和图表配色。

 

背景配色

背景色一般分为深色、浅色、彩色。在很多 LED 大屏上展现数据时,多采用深色背景,比如即将到来的天猫双十一活动,官方数据展示基本上会用深蓝色作为背景,这样可以减少屏幕拖尾,观看时也不会过于刺眼。深色背景中的图表配色一般不会采用太多的色彩,且图表也不会设计得过于复杂。

中小屏幕的背景选择性更大,中小屏幕背景色选择范围就比较广,浅色、彩色、深色均可以做出很好的设计。在 Web 端,大多数场景下,我们会采用浅色甚至白色作为背景,浅色背景更适合展示大量的数据信息,而且识别度更高。

 

图表配色

图表配色最关键的一点,就是要有辨识度。

我们可以通过明度上的变化增加辨识度,也可以采用大跨度的不同色相来增加辨识度,另外这两者也可以有机结合,常用于色彩较多的图表中。

 

明度变化

当我们需要使用单一色相配色时,势必要用明度差来进行设计,明度的跨度也要尽可能大才能更清晰。我们可以通过在灰度模式下配色的辨识度来判断明度差是或否合适。

(Google Material Colors 中的 Light Blue 色卡)

需要注意的是,采用单一色相的配色种类不宜太多,建议不超过 6 种。一旦种类过多,色彩之间的明度差异势必会变小,因而影响辨识度。

 

色相跨度变化

通过色相跨度来增加颜色辨识度也是我们常用的方式。

色环

需要的颜色较少时,我们尽量避免使用相近的色相,比如同类色和相近色。尽量选择对比色或互补色,这样可以使不同属性数据在图表中展示更加清晰。

 

 

美国大选图

 

所需颜色较多时,建议最多不超过 12 种色相。

通常情况下人在不连续的区域内可以分辨 6〜12 种不同色相。过多的颜色对传达数据是没有作用的,反而会让人产生迷惑。

 

三种常用的取色方法

01. 色环提取

可以采用色环中同一明度下的不同色调作为图表颜色。前面提到的单色相内取色,也可以在这个色环中进行采集,此外 Google Material Colors 是一个不错的色板,可以结合使用。

 

02. 借鉴自然界中的色彩

自然界中有非常丰富的渐变色彩,而且被大家所熟知,这些色彩更容易给人们带来愉悦感。

自然界中的色彩

 

在借鉴过程中,我们需要注意,比如天空经常会出现红、蓝、紫的渐变色,但这颜色的明度会有其规律,通常是浅黄到深紫,但绝对不会出现浅紫到深黄色。还有一些自然界其他的经验配色,比如浅绿色到紫蓝色,浅黄色到深绿色,橙棕色到冷灰色。

 

03. 渐变与明度叠加取色

在正常渐变色的基础上叠加一层只有明度变化的灰色渐变,形成既有明度差异也有色相跨度变化的配色。

 

渐变与明度叠加取色

 

渐变色应用案例

好了,配色部分就探讨到这里。除了以上关键内容以外,我们平时还需要注意数据图表的适配效果、交互细节、以及动画设计方面的问题,由于篇幅的关系暂不展开,以后有机会进一步探讨。

 

说在最后

我们在参与此类项目设计时,通常会通过以下的流程去思考:

1. 为谁设计,用户想要什么

2. 明确设计目标和价值

3. 明确数据指标

4. 选择最合适的数据图表

5. 规划设计,输出方案

前三步更多会由产品经理、运营人员去思考并输出结果,最后两步则由我们设计师来完成,这两步也正是这两篇系列文章的主题所在。

在学习过程中,我们每个人可有不同的思考方式和侧重点,以我个人的角度出发:能够读懂常见的数据可视化图表,并从图表中能获取到关键信息。当有一堆数据摆在面前,能根据业务目标选择合适的数据展示类型,并运用设计手段完整的表达给用户。有了这些沉淀,我就能更好的和产品、运营打交道,更多的关注链路上游的信息,从而进一步提升设计的产出质量。

欢迎交流、批评和指正。


作者:又彬

转载请注明:学UI网》数据可视化设计浅析与研究(二)

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


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


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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档