首页

AI 时代的设计

涛涛

这是5月参加阿里设计周“智能与计算”分论坛后的感想小结,因为论坛大部分在讲算法和实现方式,所以在这里我就其中的AI与设计相关部分做一些深入分享。undefined

我的思路大概分为三个部分:AI时代的来临;AI如何影响设计;未来的设计何去何从。

undefined

undefined

第一部分:聊聊AI时代来临,设计的世界发生了什么变化?

undefined每个时代的设计都有不同的定义,农业和工业时代的设计更多是指设计师通过手工制作的方式阐释自己对美感和艺术的理解。

undefined到了信息时代,设计除了要考虑美感,还要考虑是否实用和好用。设计的对象开始从真实世界转向数字世界,设计思想开始考虑以用户为中心的设计;设计方向也增加了很多领域,包括都多媒体艺术、游戏设计、网页设计、移动应用设计等。

undefined在人工智能时代下,AR设计、智能硬件逐渐发展,设计的改革更多考虑的是如何将真实世界和数字世界进行融合,如何在自己产品上更好地阐释艺术、美感和实用性。

第二部分,AI如何影响设计,设计因为人工智能而产生了哪些改变呢?

结合论坛的内容,我觉得从以上五个方面产生了较为深远的影响。

人工智能帮助设计师解决在创意过程中面临的一系列问题,将重复劳动变得自动化 ,节省设计师大量的时间,减轻设计师的工作量。

undefined数据驱动自动生成,取代人工建模,减少了设计的时间成本。通过组件标准化,来构建三维几何,然后geometry格式入库,最后由渲染引擎绘制。

undefined再比如,双11期间有1.7 亿个BANNER,都来自阿里的“鹿班”AI设计系统。设计数据—机器学习、训练模型—生成设计结果并评估。如果这些工作量由人工来完成,那么设计师真的就成了“没有感情的作图机器”了。

当今社会,随着产业智能的发展,在这个变革中,挑战不单单来自技术,也来自客户对智能数字体验的极致追求。这给开发人员和设计师都提出了全新的难题,在可视化领域,通过技术和设计两个角色更紧密的捆绑,产生了让人欣喜的化学反应。

从原始数据到图表并不是直接的,它需要经过交互的分析,得到指标结果,最终以可视化图表呈现,而呈现的视觉方式是多样化的。

这就是所谓的两种数据,三层讲述

第一步是原始数据的准确转译,工具需要数据对接能力,即对现状的讲述。

第二步是分析过程,从脚本模式跨入数据驱动,让数据的分析变得可知可信。

第三部是观点数据的表达,也就是创作强化,将结论以可视化的多样形式被表达。

这是根据地图的原始数据得到的多种可视化设计方案,同一份原始数据,却得到了不同的形式表达。

因为仅仅有准确的数据结论是不够的,因为数据需要更好地被讲述和表达,如果仅仅将数据呈现给用户,那么理解难度将会大大提高,而设计是为了让产品变得更加容易使被理解和使用

第二点,体现在建筑的三维可视。

首先,在二维地图选取建模范围,通过智能化的处理,根据数据构建初始的三维地图。

然后通过数据联动,将城市建筑虚拟还原。

整个过程从数月—> 数周—> 数天,时间大大缩短,人力成本减少,释放更多的精力去进行创意工作。

建筑三维化的应用:比如车道级地图。

相比于传统地图,车道级地图导航在信息精细度、定位准确性、动态信息丰富度上有大幅提升。

undefined车道级导航能清晰显示道路上的虚实标线、自己的车行驶在哪条车道上,还能在地图上看到车身摄像头和雷达检测到的周围车辆、锥桶、防撞桶等。

当设计对象从单个产品转变到用户的经历和当前环境时,设计师不能只考虑自己的产品体验,需要从大局出发,思考每个产品之间的联动,考虑不同场景下自己的产品如何服务用户以及如何与其他产品联动。产品设计从单体变成一块需要考虑兼容上下左右外部环境的拼图。

智能化的场景的改变对设计有哪些影响呢,我们来看这张图:设计的场景从有形—>无形、静态—>动态、永恒—>瞬间的转变。体验设计的趋势从GUI到TUI(实体交互),再到Radical Atoms,场景的改变对设计的影响维度不是单一的

undefined

设计场景在AI时代不仅局限于手机,还涉及到实时场景的设计情况。

比如谷歌的实时翻译、语音翻译。输入与输出是同步进行的,这就对设计提出了新的要求。

此外,还有语音智能VUI,彻底打破了以往的交互体验,改变了人和工具之间的互动关系,反向塑造着人类的认知方式和学习行为。下面来看一个小爱5.0案例:

undefined

对话是人与人之间交换信息的普遍方式,语音交互设计涉及系统学、语言学和心理学,因此它比 GUI的交互设计更加复杂。

undefined体验设计经历了PC时代、Mobile时代,现在进入IoT体验时代。设计的解决方案与技术的发展息息相关,设计和技术互相促进带来新的体验革命,设计师一直在探讨和实践在新技术环境下的新体验设计,并基于出行、医疗、社区、政务等行业持续挖掘服务聚合模式与场景体验的创新。

在新零售的场景下,购买和支付流程发生了改变,这就需要设计师重新思考消费者的心理地图。例如无人零售、Amazon Go、支付宝IOT支付等等。下面来看一下Amazon Go的案例:

undefined

如何让用户使用更便捷、体验更顺畅;要向用户提供什么样的服务,如何让用户注意到我们的产品,如何向他们传递企业的服务价值和特点,这是IOT新零售下需要设计深入研究的方面。

在云端实现企业产品的全区域管控,监控的设计视觉和交互又是不一样的,比如论坛上的案例:荷鲁斯之眼、全区域覆盖的云监控等等。

通过对多个实体空间中的数字设计探索,重新塑造人与空间的交互界面,提升人们对于空间的使用体验。下面举个例子:

AT&T discovery district是一个数字化的互动商业社区。

它从重新审视建筑本体开始。通过虚实和光影的变幻,营造出了实体空间体验,空间本体就是对话的那个界面。实体空间和数字内容的结合,构建出人与建筑之间新的交互界面。

广场的数字球体入口,人的位置和数量变动,球体内的灯光也会跟随变动。

undefined

人工智能促使了交叉学科的工种产生:数字体验设计师、创意工程师。这两种职业是做什么呢?面对正在到来的智能时代,体验设计师和创意工程师将共同面对“AI”这一全新的命题,在智慧工地、智慧教育、数字警务室、神经符号AI等应用中,提炼出智能感设计方法、利用图形技术能力自研产品并赋能业务。

数字世界中的设计师:横跨了艺术、文化、科学、商业多个学科;从传播学、心理学、应用科学和统计学进行用研,去解决用户遇到的问题。

它不仅涉及到需求分析和产品设计,还贯穿至产品运维、测试、发布、分析,从设计洞察中做出创新设计。

未来的设计师将融合人工智能和创意编程技术,在世界数智化的大潮中找到新的定位和新的机遇。

undefined

第三部分,在人工智能时代下,未来的设计会走向哪里?新时代的设计师怎样找准自己的定位呢?

人工智能的成熟对部分设计师来说简直是灾难性的打击,之前无论是通过技法还是数据分析才能完成的工作,人工智能一下子就可以完成,后续根本不需要这么多设计师来完成这些工作。那么设计师是否会被人工智能取代?我们先来看一张人类能力地图:

这张图中,海拔高度代表这项任务被计算机执行的难度,不断上涨的海平面代表计算机现在能做的事情。从图中可以看出,目前人工智能水平预警线距离代表艺术的山峰还很远。

人工智能没有人类的跨领域推理、抽象类比能力,也没有人类的主观能力如灵感、感觉和感受;更没有人类特有的灵魂、爱、意识、理想、意图、同理心、价值观、人生观等,这导致人工智能在未来很长一段时间内都无法很好理解人类的心理和行为是什么,在解决推理和情感问题时会不尽人意。

undefined设计除了解决问题外,还涉及对美的理解和创作,美感是对美的体会和感受,它是复杂的,包含了历史、文化、环境、情感等客观因素和主观因素,所以在不同的时代、阶级、民族和环境中,有着不同文化文化修养和个性特征的人对美的定义也不同。

人工智能依赖数据和经验解决问题,它能解决大部分智力可解决的问题,但解决不了需要情感和美感才能解决的问题。而设计的擅长领域,是人工智能不擅长的:跨领域推理、抽象能力、常识、审美、自我意识与情感。那么AI与设计的关系怎样的呢?

设计是为了解决问题。人工智能使机器代替人类实现认知、识别、分析、决策等功能,其本质是为了让机器帮助人类解决问题,也就是说,人工智能在一定程度上也是一种设计,它会创作出与人类思维模式类似的解决方案。所以AI与设计师是一种共生关系。因此设计师不用杞人忧天,担心自己被人工智能取代。

随着AI 技术的成熟,设计必定会发生新一轮的变化,在未来,更多领域和行业需要用到界面设计、人机交互等技能,各行各业的设计师需要掌握以上技能才能更好地服务当前业务。那么未来的设计将走向哪里呢?

undefined新一代的设计师是“与互联网共同成长的一代”,相信在未来几年里有更多的新晋设计师会掌握编程开发能力以及其他能力,综合素质会比目前的设计师更强,所以我们要保持终身学习,懂得如何将自己的能力和经验转换为优势,这样才能在设计道路上不被超越。

undefined那设计师可以从哪些方面来应对智能时代的机遇和挑战呢?

undefined每一代人都有被下一代人取代的风险,但有些很厉害的人就不容易被取代?因为他们在不断创造价值。无论在社会、行业还是在企业里,当具备一定的影响力后,他们能更容易积累人脉和资源,然后反哺自己的价值,就跟滚雪球一样,当雪球越大,他们越不容易被别人取代,设计师需要有这样的意识。

undefined设计师需要懂得更多领域的知识和技术才能拓宽自己的视野,这些领域包括但不局限于传感技术、网络技术、智能仿真技术、虚拟技术、生物技术、纳米技术等。因此科学与艺术是可以并且很有必要相通与交融的,设计师一定要学会跨界思考。人工智能时代下,数字世界和物理世界会逐渐融合,大到城市建设、公共服务、衣食住行和医疗;小到智能家居、穿戴式设备,这些机会将会留给已准备好的挑战者,所以设计师一定要拓宽自己的视野,不要把自己的目光局限在界面设计上。

undefined如果不想被人工智能领先,人类的设计应该是创新的(未成熟、未被发现规律的),包含更多元素的(更多复杂参数如历史、文化、环境、情感等),“设计”这个词语就涵盖了以上元素。人工智能在艺术设计上还远远达不到人类的水平,深耕艺术设计将会为设计师带来更多机会。

undefined在人工智能时代下,当产品基本都能满足永不需求时,能为产品带来活力和差异的除了自身的底层技术基础,更多的是艺术型设计师的理念和风格,以及自身的品牌。就像时尚品牌优衣库和Gucci,单件商品两者的品牌和设计所带来的的利润差距巨大,相信未来的人工智能产品也会面临类似的问题,设计师应该考虑如何为产品赋予更多价值,如何彰显用户的个性。

undefined既然AI是一个强大的工具,那么我们要思考如何运用它来创造更多的价值。AI能够快速便捷地获取大量信息,帮助设计师拓展自己的视野,不断更新自己的世界观,从新的视角看待问题和解决问题。除了快速获取信息外,设计师也应该考虑如何通过AI提高自己的工作效率,例如哪些纯劳动力工作交给AI去做效率会更高;哪些工作可以和AI一起协同完成更能激发创意。

undefined

最后,用一本科普书改编的话来结尾:一想到,还有95%的问题留给开发同学,我就放心了。

最后附上一张本文的脑图:

undefined


参考资料:

[1]阿里设计周.智能与计算.2021

[2]薛志荣.AI改变设计.2019

[3][美]詹姆斯·弗拉霍斯.智能语音时代.2019

[4][美]梅瑞狄斯·布鲁萨德.人工不智能.2018


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

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



文章来源:站酷   作者:西子zhulijuan 

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

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


7000+超详细智能产品深度解析:智能面板篇

涛涛

智能家居越来越普及,智能化的生活是由一个个智能设备组成,这次通过近距离体验智能面板,来研究一下它们是如何提升产品体验的。

7000+超详细智能产品深度解析:智能面板篇

前言

随着互联网的发展,生活智能化越来越普及,各类智能产品逐渐出现到人们面前,在体验的过程中,其实里面有很多细节需要深挖和思考。很多产品细节的背后都是为了提升用户操作效率、兼容用户使用场景、满足用户情感表达,以最终达到对用户体验的提升。作为智能产品的设计师只有充分了解市面上的智能产品,才能设计出更好的产品。

7000+超详细智能产品深度解析:智能面板篇

什么是智能面板

开关对于每个人都不陌生,它用来控制设备的状态,传统开关的数量和要控制的设备数量有关,设备越多,开关越多,为了简化人们的操作,智能面板孕育而出,它不仅可以操控家中单独的设备,还可以对一系列设备进行联动控制。

1. 使用场景

室内近场控制,满足用户家中近距离控制设备的场景。

2. 产品选择

Gira、ORVIBO、绿米

为什么选他们?

  • Gira 从事智能建筑系统技术有 100 多年的历史,算是做智能开关的先驱;
  • ORVIBO、绿米国内做智能开关相对成熟的品牌。

3. 研究方向

本文将从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

设备基础信息

Gira g1

TFT 屏、KNX 协议、定价 8000 元起

KNX 属于欧洲总线技术,稳定性最好,需要从设计阶段介入,高门槛的技术要求让 KNX 难以实现全民普及。

ORVIBO 智能开关

多点触控电容屏、Wifi、蓝牙、Zigbee、定价 899 元

Wifi、蓝牙、Zigbee 属于无线通信技术,稳定性不如 KNX,但免布线,易扩展,利于全民普及。

Aqara 智能开关 S1 触摸屏

IPS 屏、zigbee 协议、定价 899 左右

通过以上分析,Gira 的人群定位是有全屋定制需求的高消费人群,其他两个品牌的人群定位是面向尝鲜体验的广大普通消费群体。

7000+超详细智能产品深度解析:智能面板篇

1. 功能点对比

通过功能列表中的对比发现,三个品牌的产品都通过场景联动设备执行来提高人们的操控体验,通过左右滑动来快速切换功能模块类型;

Gira 和 ORVIBO 支持快速返回首页、面板内排序;

ORVIBO 的个性化体验最好,它具有语音控制、设备自动添加、设备自动归类功能,这些差异点让它比其他两个产品更加智能。

7000+超详细智能产品深度解析:智能面板篇

Gira G1

以 Gira G1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

界面整体用以黑白灰为主,搭配少量颜色,给人简洁干净的感觉;

思考:智能面板除了具有功能属性,还具有装饰属性,黑白灰为经典搭配,可以更好兼容各种家装风格,还可以更好的展现内容;少量的颜色用来强调正在运行的设备状态。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

辅助色大方向上使用两对互补色,在色环上形成了一个矩形,通过调节亮度饱和度达到统一和谐多彩的效果。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:功能卡片列表、设置为第一层级,设备控制为第二层级;

对于 gira 这种全屋定制的产品,家中一般会有很多设备,功能卡片放置在第一层级的好处是,便于用户浏览锁定目标功能卡片。

7000+超详细智能产品深度解析:智能面板篇

4. 首页布局

区域 1 显示 KNX 协议类型,室内外温度,时间;这部分内容占比很小,说明这些内容用户不常用,但用户会偶尔还是会看一下;

区域 2 为房屋名称,返回上一级、返回首页、设置、展示形式切换,这一区域全局置顶显示,用户在多级操作后,可以很快速的返回到首页;

区域 3 显示设备、场景的数量,用户可以清楚的掌握家中设备场景的数量;

区域 4 为设备场景列表,用灰色背景来强调主操作区域。

一屏最多 6 个设备,通过左右滑动来展示更多设备

思考:为什么不是上下滑动,而是左右滑动

有 2 点猜测:

  • 左右滑动下面的点相当于页码,用户在找某个设备的时候可以方便记住某个设备在第几个点的页面里
  • 在设备控制界面中左右滑动快速切换其他设备,这样可以统一用户对于左右滑动切换的认知

7000+超详细智能产品深度解析:智能面板篇

5. 卡片展示

卡片内容从上到下依次为设备场景 icon、名称、状态及快捷操作;

用户可以通过 icon 快速锁定设备类型,通过名称确定目标设备,进行快速操作;

各功能模块独立划分,快捷操作区域可以很好的兼容不同设备的功能键。

7000+超详细智能产品深度解析:智能面板篇

6. 设备控制区域布局

操控界面划分为 2 部分,一部分为信息展示区,内容为设备名称、所属区域;

另一部分为控制区,这部分区域固定,可以让不同的设备控制看起来更统一;

大面积区域留给核心功能,辅助功能布局在四周,便于用户准确操控。

7000+超详细智能产品深度解析:智能面板篇

7. 手势

设备控制界面通过左右划动快速切换其他设备,不需要返回菜单界面。

7000+超详细智能产品深度解析:智能面板篇

8. 手势

手掌长按屏幕,可唤起提前设置好的开关功能,这时面板相当于简单的开关,可以很快速的关闭开启所在区域的灯。

Gira 这样做还原了开关的本质,当想要开启或关闭该房间内的灯时,就不需要到菜单界面找这个设备了。

7000+超详细智能产品深度解析:智能面板篇

9. 设备控制

灯操控界面用刻度形式表现,每一度为一个刻度,并且还可以通过中间的加减号进行精确到 1 个百分比的亮度微调,品牌方想为用户打造成清晰准确调控的形象;

但在实际使用场景中,我们不大会对灯进行这么精确的调节。

温控器

温控界面同样可以精确调节,每 0.5 摄氏度为一个刻度;

温控的精准调节,就比较贴近我们日常的使用习惯,温控器控制界面是没有开关的,因为目标人群家中多数是中央空调,随便就可以关闭,对于大户型的用户来说是不友好的。

右下角的定时按钮可以让设备在特定时间内以某一状态运行。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘的状态值与操控条左右排列,这样的排布好处是可以让操控条长度最大化,便于用户控制;

窗帘控制界面只分为有调角度的和没有角度的;

窗帘操控条竖直排列,向上滑到顶部为窗帘全开,滑到底部为全关;

窗帘的行程和角度都用百分比的形式展现。

7000+超详细智能产品深度解析:智能面板篇

设计设备控制界面的思考方向一般有 2 种:

1. 界面控制方式要和设备的实际运行方式一致

这种思考方向要考虑实际窗帘有左右运行和上下运行之分,上下划动的操控方式来控制左右运行的窗帘会有认知上的偏差;

百叶帘的角度有正向和反向转动之分,如果只按最后的遮光百分比来做,会造成设备兼容问题。

也就是说为了模拟真实的操控方式,需要设计出若干不同种类窗帘控制界面。

2. 界面控制方式与设备运行结果关联

这种思考方式不需要考虑窗帘的种类及开合方向,将所有种类的窗帘行程及角度归为开、关两种结果状态,

就像 Gira 这样,只需要做两套界面就可以兼容几乎全部的窗帘设备。

Gira 竖排控制条的优势

如果横向布局,那么左右滑动切换设备时,会触发控制条左右手势,造成误操作。

7000+超详细智能产品深度解析:智能面板篇

背景音乐

设备列表中背景音乐卡片的快捷按钮很特别,由静音、播放、下一曲组成,我们设计的时候一般会做成对称的:上一曲、播放、下一曲,Gira 并没有这么做,因为在背景音乐的使用中,一般有几种需要快速响应的场景:用户在家中发起临时谈话,需要暂时安静一下;不想听了;这首歌的风格不喜欢;

背景音乐操控界面功能和音乐应用差不多,唯一不一样的是,底部可以快速切换歌单,可以很快速切换不同音乐风格。

7000+超详细智能产品深度解析:智能面板篇

文件夹功能

随着设备、场景的增多,用户可以根据自己的喜好将设备或场景归类放置,便于快速定位功能卡片;

点击文件夹卡片,进入到显示着众多功能名称的文件夹界面,点文件夹,才能进入功能卡片列表,为什么要多一个文件夹查看的界面。

我们想象一下有这样一种场景:面板中有几十个功能卡片,用户想开启娱乐场景,这个场景好像在客厅文件夹或走廊文件夹里,于是去客厅文件夹快速翻看这里面有没有,再点进去操作。

Gira 这样做符合用户在功能卡片多的情况下快速选择的习惯。

7000+超详细智能产品深度解析:智能面板篇

排序功能

可以通过拖动来调节设备卡片在菜单中的位置,省去了去后台设置的步骤;

定时功能

定时列表用具象的时钟来体现开始运行时间,还用黑白来区分夜晚和白天,对于用户来说扫一眼图片就可以知道运行时间,这种体验很好。

7000+超详细智能产品深度解析:智能面板篇

ORVIBO Mix Pad

以 ORVIBO Mix Pad 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

整体运用深色色调,使用几何图案作为背景;

用白色体现基础信息,用色彩强调设备场景的状态及天气信息;

运用圆角元素,更加生活化。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

颜色运用比较丰富,以蓝、橙两互补色为主,其他颜色分别为它们的邻近色;既能保持强对比,还能让颜色变得柔和。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:首屏、设备控制界面、场景列表、闹钟为第一层级;设备类型、设置为第二层级;

智能面板一般装在墙面,用户站立操作,用户不可能花太长时间来操控;

欧瑞博的人群为广大普通消费群体,家中的设备不会太多,设备控制界面层级前移,可以方便用户直达控制区,用完即走。

7000+超详细智能产品深度解析:智能面板篇

4. 首页布局

首页主要分为 2 个区域:

日期天气区

时间、日期、天气状况信息,可以满足用户日常出门关注的内容,并且在这个区域有多种表现形式供用户选择,既保持个性化还不失统一感。

快捷控制区

可以将常用的功能置顶在首页展示,最多设置 2 个,用户在首屏既能看到日期天气还可以控制设备,大大提升了屏幕的利用率和用户的操作效率。

这样做的好处:

当用户准备出门时,看了一眼面板上的天气,点一下关玄关灯,就可以直接出门了,不需要滑到灯的菜单界面找到玄关灯然后再关闭它,真的很方便。

底部有向上滑动提示,告诉用户下面还有重要内容。

7000+超详细智能产品深度解析:智能面板篇

5. 卡片展示

卡片内容左右排布,从左到右依次为 icon、名称及状态、快捷控制,这种排布的好处是可以缩小每个卡片的高度,从而提高屏幕利用率;

但有个问题就是,左右排布的方式,内容最多呈现 4 个文字,需要考虑这几个字能否清楚的定义该卡片功能。

7000+超详细智能产品深度解析:智能面板篇

6. 上滑手势

上滑可以查看全部功能卡片,给用户在手机上浏览信息的熟悉感;

在新的操控设备运用用户熟悉的交互方式可以降低用户的学习成本;

移动端上常见的手势对应结果有:左右滑——代表切换,向下滑——代表唤起相关功能设置,向上滑动——浏览更多信息。

7000+超详细智能产品深度解析:智能面板篇

7. 左右滑手势

用户在首屏左右滑动就可以切换不同功能模块,不需要返回上一级,在设备类型少的情况下,这种盲操会比较方便。

7000+超详细智能产品深度解析:智能面板篇

8. 下滑手势

下滑进入功能类型选择、系统设置界面,这一区域相当于导航,可以实现功能模块间的快速切换。

7000+超详细智能产品深度解析:智能面板篇

9. 手势问题

多种手势的组合可以在有限的屏幕内操作更加灵活,但手势太多会带来一些问题:

  • 误操作问题,在空调界面,左右切换设备时,容易触发空调温度操作;
  • 认知上的负担,在欧瑞博面板的逻辑定义里,首屏和控制界面属于同一层级,然而上滑手势只能在首屏操作,在设备控制界面上滑就无法使用,下滑手势却可以全局操作,这里面的逻辑会让用户混乱。

针对以上问题解决的方法可以是:

  • 改变空调左右滑动设置温度的操控方式;
  • 首屏和控制界面层级做区分,或简化手势。

7000+超详细智能产品深度解析:智能面板篇

10. 场景运行效果

场景卡片分为未激活、运行中、运行结束三种状态;

场景运行状态变化在卡片 icon 区域体现,既传达了运行的过程,又不会打扰到用户。

7000+超详细智能产品深度解析:智能面板篇

12. 卡片首页置顶

点击卡片列表最底部的编辑按钮,可以选择将某一功能卡片置顶到首屏,方便用户快捷操作。

7000+超详细智能产品深度解析:智能面板篇

13. 设备控制区域布局

将普通灯、场景、门窗等操控方式相近的设备进行了归类显示,并且和空调、色温灯、背景音乐等设备放置在同一层级;

从交互体验层讲:由于家里的普通灯、场景、门窗的操控方式简单统一、数量多,按照类别整合在一起便于查找控制;

从视觉层讲:设备操控界面布局形式多,会给用户造成整体视觉上的不统一,增加学习成本。

7000+超详细智能产品深度解析:智能面板篇

14. 设备控制

空调

空调控制界面,只能通过左右滑动以整数的形式来调节温度,开启中的时候,背景会有对应模式的色彩氛围效果,给用户更直观的感受;

底部只保留用户最常用的模式、风速、风向三个功能。

色温灯

色温灯界面默认为用户推荐 6 种不同场景下使用的色温选项,底部提供亮度调节功能,用户只需要去选择,大大缩短了用户的操作路径。

个性推荐在电商类产品中很常见,推荐机制基于对用户行为习惯的分析,需要强大的后台数据支持,智能家居这一块通过穷举用户生活中的设备使用场景、目的从而提炼出对应的功能选项可以大大提升产品使用体验。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘控制界面采用半写实风格,给用户更加直观感受,学习成本低,拖动窗帘区域就可以进行行程的控制,由于没有微调按钮和行程状态百分比,所以无法做到窗帘精准控制;

选择这种写实的设计风格,需要考虑设备控制界面布局、样式对新增窗帘类型的兼容性。

7000+超详细智能产品深度解析:智能面板篇

背景音乐

背景音乐默认界面只保留了当前播放音乐封面元素,更多复杂操作被隐藏到了下一级界面,用户在当前界面可以进行暂停、播放、收藏等简单操作;

在小屏幕中做设计时,有时候会在一个层级界面中堆砌许多功能按钮,使界面变的臃肿,一来容易让用户误操作,二来让用户找不到重点功能,操作效率低下;

我们在处理这些信息时应该结合使用场景,按用户的使用频率进行权重划分,将权重低的进行隐藏处理,突出核心功能,减轻用户操作负担。

智能家居厂商大多都是靠卖硬件赚钱,欧瑞博巧妙的运用会员机制结合背景音乐功能来售卖音乐服务(49 元一年),更加具有互联网商业思维。

7000+超详细智能产品深度解析:智能面板篇

15. 语音控制

在语音设置中,可以选择是否开启语音控制,系统默认 2 组唤醒词激活语音控制;

欧瑞博为用户提供了更便捷的语音控制功能——快捷口令,说出指令就可以快速执行,由于没有房间、设备名称的限定,这个功能只能实现面板内所有同类型设备的开或关,适用于小户型简单的场景。

7000+超详细智能产品深度解析:智能面板篇

16. 快速添加设备

传统上添加一台新设备需要:选择要添加的设备——选择网关——输入正确Wifi密码——进入设备配网流程——配网成功——设备名称设置,操作流程繁琐,中间稍微有些环节没有操作对,最后就无法成功添加设备,欧瑞博通过简化中间过程,成功解决了这一痛点。

7000+超详细智能产品深度解析:智能面板篇

17. 个性化设置

用户可以在面板中直接设置首屏的风格样式,系统一共有 3 种风格外和一个随机演示选项供用户选择,并且这三种风格的功能架构是一样的,只是对背景图、元素大小、布局做了设计区分。

7000+超详细智能产品深度解析:智能面板篇

AQARA S1

以 AQARA S1 为例,从结构、色彩、手势操控方式、卡片形式、功能点这些方向展开分析。

7000+超详细智能产品深度解析:智能面板篇

1. 首屏

整体使用黑色做背景,用白色体现基础信息,底部的色块元素貌似起装饰作用,和天气情况并没有联系;

首屏主要分为日期时间和环境状况 2 个区域,天气、温度、湿度、空气质量信息并行排列,个人认为用户对这 4 个信息的关注度是不一样的,看看我们手机上的天气 app 的信息排布就知道了,这样并列排布会让用户分不清主次。

7000+超详细智能产品深度解析:智能面板篇

2. 辅助颜色

颜色以蓝色及其邻近色为主,搭配少量的对比色,整体色调统一。

7000+超详细智能产品深度解析:智能面板篇

3. 层级划分

主要分为 2 大层级:首屏、设备控制界面、场景列表为第一层级;设置为第二层级;

形式和欧瑞博一致,都是为了让用户更便捷的操控;

但进入设置页面,设置主题类型的步数比欧瑞博的多一步,用户设置完成后还得一步步返回,这里可以将用户常用的“显示”内容上移一个层级,减少页面跳转次数;

AI 手势这种有特色的功能隐藏的太深,不便于用户的使用。

7000+超详细智能产品深度解析:智能面板篇

4. 左右滑手势

绿米同样运用左右滑动进行首屏、场景列表、设备间的快速切换,对于相同类型的窗帘设备,并没有整合成列表放置同一屏,而是另起一屏,设备多的时候就会存在操控效率低的问题。

7000+超详细智能产品深度解析:智能面板篇

5. 下滑手势

下滑进入系统设置界面,这个区域只有一个设置功能,有点浪费空间,索性就把设置下一级的功能选项移到下拉页面,还能提高用户的操作效率。

7000+超详细智能产品深度解析:智能面板篇

6. 场景运行效果

场景运行过程以进度条的形式在卡片底部体现,对用户的干扰小,并且只传递出开始到结束的过程,没有成功提示,这种逻辑是正确的,因为面板只是传达出了一个命令出去,具体什么时候传出、接收设备是否正常运行,这些信息面板是获取不到的。

7000+超详细智能产品深度解析:智能面板篇

7. 设备控制区域布局

场景列表与设备控制界面一个层级,温控器、调光灯运用半圆的元素作为控制区域,新颖的设计风格是绿米智能面板的特色;

仔细看,会发现设备控制界面不统一,相同功能的开关按钮,在不同的设备中位置却不一样,还有就是普通灯是偏写实的 3 路开关样式,其他界面却是抽象的圆环几何样式,不统一的界面会增加用户的学习成本。

7000+超详细智能产品深度解析:智能面板篇

8. 设备控制

空调

空调控制界面,通过上下滑动以整数的形式来调节温度,新颖的操控方式让用户加深对品牌的印象;

底部开关、模式、风速同级展示,这里存在几个问题:1、用户在设置空调时很容易误点关闭按钮;2、缺少常用的风向调节,功能缺失造成较差使用体验。

普通灯可以在 App 中设置 1、2、3 路开关样式,这种形式同样存在问题:一屏最多放三个开关,屏幕下方大片区域空置,利用率低。

7000+超详细智能产品深度解析:智能面板篇

窗帘

窗帘控制界面显示窗帘的名称及行程状态;窗帘的开、合,绿米给了 2 种方式:滑动控制、全开全关按钮;

增加暂停功能可以提升使用体验,因为用户在操控窗帘设备时,会以窗帘实际的运动行程为依据来决定窗帘需要开合到什么程度,而不是看界面上窗帘的位移,当用户觉着窗帘行程可以了,按暂停键就可以准确停留在用户想要的位置上。

7000+超详细智能产品深度解析:智能面板篇

调色灯

调色灯用户可以自定义或选择系统推荐的颜色;

为了涵盖大多数的用户偏好,调色灯的 4 个推荐色采用色环上差距大的颜色,并且根据用户使用场景筛选出常用的几种色调,排除了用户不常用的绿色、紫色、粉色。

7000+超详细智能产品深度解析:智能面板篇

9. 开机默认页设置

用户可以根据自己的使用偏好,将最常用的功能模块页面放到第一屏,这个功能在一定程度上可以提升操作效率,当设备多,还是需要切换很多屏。

用户使用面板分为:紧急情况、常用情况,紧急情况不一定常用,就像出门需要关灯;常用情况不一定紧急,例如看时间

绿米为了让用户便捷,给出默认页自定义功能,存在的问题是:如果用户把灯作为开机第一页,那么日常中看时间要翻页;日期时间作为第一页,开关灯需要翻页,都不是特别便捷。实际上可以做成像 Gira 那样,通过增加手势唤起快捷开关功能,首屏留给日期时间,既满足了日常需要,又能满足紧急需求。

总结

通过上述分析,我们得到了这些产品的共同点与差异点,以及背后的思考方式,了解共同点可以让我们弥补自己产品的不足,不被市场淘汰;学习它们差异化的思考方式可以帮助提升我们产品的竞争力。

作为一名合格的设计师,除了学习视觉技法和理论,还应该多玩、多看、多思考真实的线上产品,体验其核心操作流程,推敲和思考产品设计背后的原理和逻辑,才能不断提升体验设计思维。



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

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



文章来源:优设   作者:Aaron杜斌 

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

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


超详细智能产品深度解析:交互动效篇

涛涛

智能产品的设计过程中,常常用到动效设计,那么动效设计用在哪些地方及对提升智能设备体验带来什么帮助,是这篇文章要讲的。

上期回顾:

流畅的操控感

通过大小、位置和透明度的变化,使得界面与界面之间、界面上元素的出现和消失都有关联,让用户和产品的交互过程更流畅,给用户更好的体验。请看以下案例:

1. Nest 温控器控制界面

超详细智能产品深度解析:交互动效篇

Nest 温控器从时钟转变到温控调节界面的过程中,时钟的指针向圆心收缩,周围的时间刻度生长并一起向中心收缩,指针收缩动效对应温控调节界面温度值的显现,时间刻度的生长收缩动效对应温度刻度的显现,由于元素之间进行有关联的变化,操控过程中会有丝滑流畅感。

2. Gira 窗帘设备

超详细智能产品深度解析:交互动效篇

当用户调节行程时,中间的控制点跟随手指实时运动,而进度条会有延时拖拽效果。为什么会是这样呢?原因是:用户在控制面板上的操作是需要由面板向窗帘设备发送指令的,也就是说面板上控制窗帘到窗帘设备运行中间会有一小段时间间隔,用户会有延迟感,所以 Gira 在控制窗帘行程的过程中,进度条为了与窗帘设备运行同步,加入延时效果,让用户感觉操控响应快的错觉。

3. Nest 新款温控器

超详细智能产品深度解析:交互动效篇

用户在滑动切换功能时,功能 icon 会按照先后顺序由大到小变化,由于连续性运动,每个元素运动都有衔接,会有流畅操控感受。

4. Nest 智能锁

超详细智能产品深度解析:交互动效篇

用户输入密码后至锁打开这段时间,数字依次向下消失,锁 icon 逐渐出现并且打开,体现出柔缓的感觉;实际上动效有时候可以弥补设备执行缓慢的不足,当设备需要长时间才能执行时,这段时间加入动效,动效运行时间和设备实际执行时间一致,用户就会觉得很顺畅;也可以让动效运行时间小于设备执行时间,这时用户会觉得操控反应更快。

直观明确,降低用户学习成本

通过动效能够帮助用户使用功能,对功能的方向、位置、唤出操作、路径等进行暗示和指导,方便用户在最短的时间内来学会操作产品的一些功能。请看以下案例:

1. Amazon Echo

超详细智能产品深度解析:交互动效篇

用户第一次设置好监控后,通过放射动效提示用户双击屏幕,通过上下扩张的箭头动效提示用户可以通过手指来进行监控画面的放大缩小。

2. Lenovo Smart Clock

超详细智能产品深度解析:交互动效篇

当设备第一次配好网重新开启后,通过遮罩、圆点大小位置运动搭配文字告诉用户长按屏幕可以控制什么功能。

超详细智能产品深度解析:交互动效篇

顶部弧形的上下变化,告知用户下拉可以控制什么功能。通过简单的元素既能起到提升用户的作用,还不打扰用户。

强调内容

通过动效给用户展示需要的内容及产品侧想让用户了解的内容,让用户更乐意更易于理解,强化功能感知。请看以下案例:

1. B&O 触控音箱

超详细智能产品深度解析:交互动效篇

双击音乐标题,进度条从左向右生长出现、操控点放大出现,既强调了进度条这个隐藏功能,还暗示用户可以拖动操控点从左向右拖动操作。

2. Google Nest Hub 调光灯界面

超详细智能产品深度解析:交互动效篇

用户从列表进入调光灯界面时,调光条灰底从左向右弧度生长,随后当前亮度条生长出现、亮度值出现,先暗示了用户可以从左向右弧度操作,后强调了当前设备状态。

3. Google Nest Hub 睡眠质量检测界面

超详细智能产品深度解析:交互动效篇

用户查看睡眠质量数据时,睡眠质量标题信息渐隐渐现,睡眠数据条、数字生长,让数据展示有主次之分,强调了用户想要看的内容据,更人性。

提升用户掌控感,让用户心中有数

产品设计里面有一个非常重要的原则:让用户有操纵感。这种操纵感不仅仅表现在对用户的操作有了反应、有了显示,还有一种方式是让用户知道当前产品运行的状态,是正在等待还是正在加载,还是正在下载或变化,那这种状态的告知也是增强用户操纵感的方式之一。请看以下案例:

1. LG 智能洗衣机

超详细智能产品深度解析:交互动效篇

当用户往洗衣机里加入衣物后,出现量杯倒入洗衣液的动画,告知用户当前洗衣机正在进行哪一个环节,我们分析一下这里加入动效的用意,首先,一般的洗衣机没有屏幕,有的话也就显示当前的功能选项,LG 的这款洗衣机是液晶屏,那么它的定位就是高端人群,通过融入动效,打造差异化,提升使用体验,加深用户对 LG 品牌的印象。

2. Lenovo Smart Clock 起床闹钟功能

超详细智能产品深度解析:交互动效篇

用户设置好起床时间后,系统会根据时间段自动进行背景颜色的过度,来模拟天色的变化,直观的告知用户当前的时间是白天还是晚上或是黄昏。

3. Orvibo 除湿界面

超详细智能产品深度解析:交互动效篇

设备进行除湿的过程中,面板上圆形元素进行旋转,伴随粒子扩散效果,模拟水分子消失的过程,直观形象的告诉用户现在正在做什么。

4. Lenovo Smart Clock 猫眼通话界面

超详细智能产品深度解析:交互动效篇

用户接通猫眼后,通话 icon 进行电播扩散动效,模拟声波扩散效果,准确的向用户告知当前通话中的状态。

5. Google Nest Hub 语音唤起

超详细智能产品深度解析:交互动效篇

当用户说话唤起语音控制时,原先的全屏画面收缩,响应用户的指令,四周留白,为通话内容提供展示空间,然后彩色点元素起伏变化,通话内容出现,告知用户已接收到指令;随后彩色点元素旋转加载,体现正在执行中。在语音控制的每一个环节都加入动效反馈,会让用户觉得他不是在和一个冰冷的机器讲话,富有人情味。

6. Orvibo 窗帘控制界面

超详细智能产品深度解析:交互动效篇

运用轻拟物效果和与实物一致的运动方式,用户可以直观的看到窗帘的行程位置与开合状况,大大的提升了产品易用性。

明确层级关系,提升用户理解效率

面对一款新的智能产品时,用户可能不知道怎么操作它,通过动效向用户交待页面内容之间的关系,让用户清楚的知道从哪里来,到哪里去,更易于理解从而可以快速上手使用。请看以下案例:

1. Nest 温控器设置界面

超详细智能产品深度解析:交互动效篇

温控器的设置模块通过左右滚动以便在有限的屏幕中展现,那么模块的下一级页面跳转做成像 App 那样左滑切入是无法明确层级内容的,此时需要一个与左右滑动不一样的动效来区分模块的切换,Nest 运用翻转效果,强化了层级感,清楚交待了页面翻转后面的内容与页面前的关系。

2. Google Nest Hub 设备控制界面

超详细智能产品深度解析:交互动效篇

用户从顶部导航中进入设备列表过程中,设备列表页面从右向左进入,暗示用户“当你想返回上一级,可以左滑离开哦”,用户上下滑动设备列表时,屏幕左边滑动条出现,更加明确了“左滑返回上一页”的功能;

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

当用户通过列表进入操控界面以及切换功能页时使用淡入淡出的效果,弱化它们之间的跳出感,来强调它们是一个层级的内容,从细微处可见 Google 的设计师在动效的使用、选择上非常克制,值得我们学习。

3. Google Nest Hub 日程提醒界面

超详细智能产品深度解析:交互动效篇

用户发出查看日程安排的命令时,日历界面从左到右进入,告诉用户这是一个新的页面,接着日期数字 21 进行大小位移变化,月份不做变化,为了强调这是 21 号的日程,2 条日程信息按照时间先后从下向上运动,交代了日程处理的优先级。Google 设计师将信息展现的每一步都让用户看的清楚明白。

品牌调性透传

在可用性良好的前提下,通过一致性、趣味性的动效设计和创新的交互方式为产品增加亮点,带来更惊喜的体验,传达产品的气质与态度。请看以下案例:

1. Google 多端运行动效

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

超详细智能产品深度解析:交互动效篇

在品牌塑造上,Google 已被证明做得极为成功,而且在视觉表现层面,Google 系产品具备着“一致性”和“连贯性”,这让 Google 获得了品牌识别上的利益。在不同设备的动效设计中,Google 都统一使用代表品牌的红、黄、蓝、绿颜色和几何图形,遵循化繁为简的设计准则,通过简洁贴近真实的运动方式,让产品更有人情味,让用户更加专注于内容。

2. 智能圆镜

超详细智能产品深度解析:交互动效篇

用户在靠近圆镜设备时,镜面中心人脸识别 icon 缩放,周围点元素波动扩散,吸引用户的同时,传达出科技感。

3. Apple HomePod 命令反馈界面

超详细智能产品深度解析:交互动效篇

当 HomePod 在执行一项指令时,顶部的屏幕会出现彩球融合翻转动画,多变朦胧的色彩可以唤起用户情绪,球体间的融合过程让产品生动有趣,让用户感受到品牌的人情味。

4. Apple Watch 洗手提示界面

超详细智能产品深度解析:交互动效篇

Apple Watch 洗手功能开启后,会有一个 20 秒的倒计时,倒计时以肥皂泡沫消失扩散的形式展现,很贴合当前洗手的情景,让原本一个普通的倒计时变得生动且有趣味性,用户更加乐意使用,强化了用户对品牌的感知。

5. 智能温控器

超详细智能产品深度解析:交互动效篇

这款温控器已经有一定年代了,当时那个年代,能用到温控器,那就很有科技感了,智能温控器还将流动的线条动效运用至透明背景上,向用户传达了超前的科技感,只要见了就会记住这款产品。

下面为大家整理了一份动效在产品中的应用场景以及设计思路:

超详细智能产品深度解析:交互动效篇

总结

实际上智能产品中的动效设计,并不是要向用户炫技,也不是做的越炫酷越好。动效是以解决问题为目的的一种手段。我们要去观察现有好产品的动效设计落地点及分析他们的小心思,从而运用至自己产品中,提升产品使用体验。


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

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



文章来源:优设   作者:Aaron杜斌 

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

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


这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

涛涛

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

相比于去年发布的 macOS 11 和 iOS 14 的 WWCD 2020,今年的 WWDC 确实是显得变化没有那么大,在系统视觉层面上,macOS 12,iOS 15,iPadOS 15,watchOS 8 似乎并没有那么多「革命性」的改变。老实说视作为一次日常的产品功能迭代就好了。

不过,iOS 15 当中有不少颇为不错的新功能,比如实况文本(Live Text),功能更强的 Spotlight,全新的 Safari 浏览器,全新的安全机制,等等等等,这些功能足以为用户提供更好更安全的使用体验,但是另外一方面,有很多功能对于设计师和开发者这边有着巨大的影响。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

目前来看,Facetime 的多人通话的升级,共享当前界面和屏幕给他人的 Shareplay 很大程度是为了应对全球疫情之下,用户被封闭和隔离的使用场景,这些功能需要系统级的支持。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

而从照片中获取文本信息的实况文本功能、超强的聚焦搜索功能,还有新的相册自动生成回忆视频的功能,则和苹果自身在机器学习领域的挖掘息息相关,对于想要在这一领域有所建树的团队,可以参考这些内置的功能,如何用好神经网络的软硬件,可以参考相关的开发文档。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

关于 iOS 15 在我看来最值得聊且对于设计和运营有较大影响的部分,其实是全新的通知推送系统,以及 「专注模式」这一功能。在整个发布会结束之后,苹果的 HIG 页面当中,只有一小部分的内容随着新系统的发布而随之更新了,而这其中就包含信息推送和 「专注模式」的部分。

信息推送和当下用户日常内容和信息消费习惯紧密关联。越来越多的 APP 和越发频繁的信息推送给用户带来的信息压力已经成为一个广泛存在的问题,一直到今天,这个问题都没有一个足够完美的解决方案。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

针对注意力管理的问题,iOS 15 所给出的解决方案算是一个比较折衷且比较合理的处理机制。

1、视觉优化

在基础的信息推送内容的视觉设计上,iOS 15 针对通知栏的小卡片的排版视觉进行了优化,放大了 APP 图标并置于卡片的左侧,对于通讯类 APP 当中用户发送的信息,则采用了用户大头像 + APP 小图标 的组合形态,增加信息来源的辨识度,并以这种形式更清晰地告知用户,所收到的信息的来源,以及它的属性。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

iOS 15 还可以根据用户设置的时间表或者所处的模式,快速收集每天收到的的通知,构建成为一个较大的通知摘要大卡片,而摘要的内容呈现将会按优先级进行智能排序,位于顶部的卡片相关度最高。(所以 APP 通知推送会因为这种机制开始一轮新的内卷么?)

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

值得注意的是,新的推送摘要因为是按照优先级排列,所以各种 APP 当中优先级最高的通知将会被汇总到一起。

摘要信息的组织并不是借助单一算法来实现的,同样的,其中用到了机器学习的功能,借助神经网络芯片来更好地对信息进行针对性的筛选,并推送给用户,以图更好的体验。

2、通知管理层级的提升

在原本的 iOS 14 当中,对于单个 APP 的推送管理方式比较简单,除了「关闭」,就只能选择「隐式推送」,

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

在 iOS 15 当中,用户可以针对单个 APP 的推送进行更细致的选择和处理:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

更多选项当中,可以选择让 APP 「静音一小时」或者「今天不再推送」以避免干扰。

整个 iOS 15 的通知处理的机制都是围绕着降低用户信息载荷的目标来进行的,除了管理层级的细化,专注模式更是之前 iOS 14 中「勿扰模式」的全面升级。

其中,为了对推送通知进行更加细致的处理,通知功能的类型也有了更为详细的分类,并且在 HIG 设计规范进行了更为详细的说明。相关详细内容在第四节。

3、围绕场景构建的专注模式

「专注模式」是为了应对信息过载的问题,并且试图改善推送通知影响用户注意力的情况,希望借此来帮助用户更加专注于进行中的任务。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

系统基于常见的几个使用场景,提供了「个人」「工作」「睡眠」三个场景,并且保留了之前的「勿扰」模式,单击底部「+」号还能添加更多模式,其中还包括「驾驶」和「游戏」等不同的预设场景模式。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

除了「勿扰」模式之外,其他模式下,用户可能会收到与这些场景相关的应用,而用户可以在 iOS 15 的系统智能推荐之下,快速增删当前模式下可以推送通知的 APP。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

在指定模式下,用户收到的推送通知的内容、类别都会高度相关,降低干扰性。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

同样的,为了搭配不同的专注模式,还可以基于模式设置特定的主屏和桌面小插件,成为当前模式下的信息和管理中心,更加方便地管理当下的任务,达到「专注」的目标。

而「专注模式」更为智能的一点,是系统会根据地理位置信息,有意识地提醒用户是否要切换模式:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

同时,当用户将手机设为特定模式之后,绑定同一帐号的其他设备也会自动切换到同一专注模式之下,达到统一管理的目的:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

当然,除了基于位置进行「专注模式」的切换之外,用户可以通过右上角下拉的「控制中心」对「专注模式」进行手工的切换管理。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

4、通知系统规范

而无论是新的通知系统还是「专注模式」,在信息管理的颗粒度上都比以往更加细致,这很大程度上是基于新的推送通知的类别管理,这一部分内容在 HIG 设计规范上已经得到更新,并且有着非常详细的说明。

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

下面是关于推送通知章节更新的主要部分(考虑到篇幅,对部分非关键内容进行了精简)。

https://developer.apple.com/design/human-interface-guidelines/ios/system-capabilities/notifications

4.1、通知的管理

用户希望收到他们关心的事情的通知提醒,但并不总是喜欢被打扰。为了帮助用户管理整体体验,需要在发送任何通知提醒之前获得用户的许可;系统允许用户在「设置」>「通知」中更改,并调整推送提醒样式,可以预览,并且可以和 Siri 交互。用户还可以在「设置」>「专注」中让所有通知都静音(某些地区的政府警报除外)。

相关开发人员说明,请参阅 UserNotifications

4.2、帮助用户管理通知

在 iOS 15 及更高版本中,用户可以通过指定专注模式时间,设置专注模式下通知推送的具体行为,而进行细粒度的管理。专注模式可帮助用户在他们为睡眠、工作、阅读或驾驶等不同状态下,定义这一时间段内通知推送的具体行为。

用户可以筛选出哪些通知或者 APP 可以在特定专注模式下,被推送给用户。比如在工作专注模式下,用户可能希望收到来自同事、家人以及工作相关的 APP 推送的信息,用户可能还希望收到时效性较强的通知。

尽管专注模式下,可能会有一些通知被延迟推送给用户,但是通知信息在收到的时候即立刻发挥作用。

4.3、通知的类型

想要定制化地推送信息,那么你需要确保你的 APP 能够支持信息直接推送,就像电话或者短信样的通讯通知(communication notifications),而其他类型的弱时效性的推送则使用非通讯通知(noncommunication notifications) ,而想要支持通讯通知,你需要引入 SiriKit ,这也意味着用户可以使用 Siri 来进行自定义通知推送行为。具体的参阅INSendMessageIntentUNNotificationContentProviding

为了更好的方便用户针对推送通知进行管理,你需要对你的 APP 的推送通知的中断级别进行定义,不同级别的定义决定了通知何时推送,系统在不同状态下是否要推送,以及如何处理。目前,将推送通知的中断级别划分为4个等级:

  • 被动型通知。用户可以在闲暇时候查看的推送通知,比如周边餐厅推荐。
  • 活动型通知(默认状态)。用户可能希望了解这个信息何时能够推送,比如最喜欢的球队的最新比分。
  • 时间敏感型通知。需要用户立刻关注到的通知,比如账户安全相关的通知和快递通知。
  • 关键通知。直接影响到用户声明安全和需要立刻得知且优先级超高的公共通知,比如来自政府机构的安全通知,或者医疗保健类应用的推送。

具体的属性还可以参考下面的表单:

这份 iOS 15 推送通知设计指南,值得设计师们仔细阅读!

值得注意的是,这4个层级是逐渐递进的,因为后两种推送通知需要的优先级较高,所以最好获得用户的许可。

此外,在设计通知推送系统的时候,还有3个关键的注意事项:

  • 需要对每个通知的优先级和中断级别进行准确的判断,不要让非关键性的通知占用专注模式下的用户注意力,这样才能获得用户的信任。错误的优先级设置会导致用户对你的 APP 产生不信任感。
  • 仅将与此刻紧密相关的事件信息设置为被时间敏感型通知,这样的时效性才能对应得上它的优先级。具体可参阅 UNNotificationInterruptionLevel
  • 不要将营销类信息推送设置为时间敏感型通知。

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

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



文章来源:优设   作者:陈子木

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

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



轻松三步搞定数据统计分析:统计+分析+可视化!

涛涛

我们都知道,数据是支撑决策的重要依据,于是我们可以看到,几乎所有的产品,都会具有数据统计分析的功能模块。往大了说,比如数据中台;往高端了说,比如数据大屏、数据看板、数据驾驶舱;往本质了说,其实就是数据的统计分析。作为一个非数据型产品经理,或者是初级产品经理,该怎样设计这个功能模块呢?

如果你刚好为此苦恼,不妨试一下我最近研究的这三步曲:统计+分析+可视化!

前言

关于数据统计分析,首先表达一个我蛮认同的观点:

好的数据分析师,要像眼科医生一样:配眼镜可能有很多专业的方法,有很多专业的工具,可在配的过程中,医生纠结的不是自己的理论,而是关注用户看得清不清楚,不断问用户“这样可以吗?这样更清楚吗?再这样试试呢?”

—— 接地气的陈老师

相信在工作中,大家经常会碰到一些“孔乙己”式的数据统计分析,一开口就是“xx 指标体系”,再加上一大堆什么“权威的、标准的、BAT 认定的”这之类的修饰词汇。这特么就是典型的虚假数据分析啊,因为这些大多数时候,耗时费力,却没有解决实际问题。

并且这种虚假的数据统计分析,还有它遵循的理论模型:

轻松三步搞定数据统计分析:统计+分析+可视化!

而真正的数据统计分析,就像太极拳的精髓一样:“只重其义,不重其招,你忘记所有的招式,就练成太极拳了。”(以解决业务问题为根本)

统计

要搞数据的统计分析,那第一步我们得先有数据,也就是数据的统计工作。提起数据统计,那自然绕不开数据埋点。如果你们公司从来没整过埋点这个事,那也不用大费周章,因为界内已经有很多成熟的埋点公司了,例如神策、友盟等等,直接花钱办事就完了,也不贵。

我们今天研究的,是通过埋点,能够获得哪些数据呢?总结下来,大概有这么五类:

埋点获取五类数据

  1. 整体概况
  2. 用户获取
  3. 活跃与留存
  4. 事件转化
  5. 用户特征

来来来,我们逐个剖析一下,这几类数据,具体都包含什么,以及获取这些数据有啥用。

1. 整体概况

轻松三步搞定数据统计分析:统计+分析+可视化!

实时数据意义:可以获取到每个小时的产品实时数据,帮助你了解产品目前的实时情况。

使用概况意义:产品整体的使用情况,包括用户量、访问情况、留存等,帮助你对产品整体指标有一个大致的了解。

2. 用户获取

轻松三步搞定数据统计分析:统计+分析+可视化!

渠道访问意义:每个渠道的用户的使用情况,包括渠道中新用户的占比、留存等,帮助你了解产品在获客层面上的优势与不足。

版本数据意义:每个版本的使用情况,帮助你了解在产品升级的过程中,是否在活跃和留存方面有所改善。

3. 活跃与留存

轻松三步搞定数据统计分析:统计+分析+可视化!

访问流量意义:产品的每日访问数据,指标集中在新老用户的访问行为上,提供访问次数、时长、次数分布、访问时段高峰等指标,帮助了解新老用户在使用产品时的一些行为特征。

用户留存意义:提供用户 7 日,次日,次周,次月留存的数据,帮助你了解新老用户的使用粘性。

4. 事件转化

轻松三步搞定数据统计分析:统计+分析+可视化!

自定义事件意义:用户自定义关键事件,系统会自动生成该事件的发生次数、人数以及分布情况,也就是能够看到用户都在干啥。

收益类事件意义:用户自定义收益类事件,系统会自动生成该事件的发生次数、人数以及分布情况,会根据你选择的数值类型属性,计算该数值的总值、人均值以及次均值。也就是能够看到用户都咋花钱的。

5. 用户特征

轻松三步搞定数据统计分析:统计+分析+可视化!

用户特征意义:能够看到我们的用户,都是哪些牛鬼蛇神~

分析

有了埋点的数据以后,那就是怎样利用这些数据,充分发掘这些数据的价值了。数据分析的套路就更多了,把下面这些学会,应该“二八原则”里面的“八”就能够搞定了~

1. 常见的数据分析指标

轻松三步搞定数据统计分析:统计+分析+可视化!

综合性指标:反映产品的整体情况。

流程性指标:反映用户的使用行为。

业务性指标:反映具体的业务情况。

2. 常见的数据分析维度

轻松三步搞定数据统计分析:统计+分析+可视化!

数据细分:通过不同的细分维度分析,往往可以追溯到问题发生的原因,还能为后续的一些动作提供参考依据。

数据对比:没有对比就没有伤害,一方面是横向比较,即自身和别人进行对比,如常见的同比、环比;另一方面是纵向比较,即自身和自身进行对比,比如行业竞品、全站数据、AB 测试等。

3. 常见的数据分析方法

轻松三步搞定数据统计分析:统计+分析+可视化!

HEART 模型:Google HEART 模型的提出,可以让大家反思自己的产品设计思维,同时运用相关设计工具去提高 HEART 五项指标来完善用户体验,打造更好的产品。

AARRR 模型:该模型出自于《增长黑客》,它是在 2007 提出,当年的获客成本还比较低廉,而这种模型很简单又很直观地突出了增长的所有重要元素,所以这个模型很长时间内都很受欢迎。

RARRA 模型:而现在获客的成本与日俱增,市场情况和 2007 年已经完全不同。现在黑客增长的真正关键在于用户留存,而不是获客。于是,一个突出了用户留存重要性的模型 RARRA 诞生了。

可视化

有了统计的数据以及分析的维度之后,最后一步工作就是可视化啦!

而想要完成这一步,又快又好的方法,那自然就是参考各种规范啦,首先我们可以去一个叫做「e-charts」的网站,去查看各种可视化图表,因为开发很多时候,就是依照这些开源的图表库进行撸代码的~

轻松三步搞定数据统计分析:统计+分析+可视化!

而我们设计的时候,就需要借助各种原型组件啦。数据可视化的内容有很多,我们来举几个典型例子:

1. 折线图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:选用的线型要相对粗些,线条一般不超过 5 条,不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。预测值的线条线型改为虚线。

2. 柱形图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,纵坐标轴一般刻度从 0 开始。一般来说,柱形图最好添加数据标签,如果添加了数据标签,可以删除纵坐标刻度线和网格线。

3. 条形图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:同一数据序列使用相同的颜色。不使用倾斜的标签,最好添加数据标签,尽量让数据由大到小排列,方便阅读。

4. 饼图

轻松三步搞定数据统计分析:统计+分析+可视化!

注意事项:把数据从 12 点钟的位置开始排列,最重要的成分紧靠 12 点钟的位置。数据项不要太多,保持在 6 项以内,不使用爆炸式的饼图分离。不过可以将某一片的扇区分离出来,前提是你希望强调这片扇区。

饼图不使用图例,不使用 3D 效果,当扇区使用颜色填充时,推荐使用白色的边框线,具有较好的切割感。

5. 其他

轻松三步搞定数据统计分析:统计+分析+可视化!

这种数据可视化的图表还有很多,而它的意义就在于,用图表代替大量堆砌的数字,有助于阅读者更形象直观地看清楚问题和结论。我也在工作中搜集到了一些不错的数据可视化原型组件,有需要的同学可以自行下载啦~

结语

好了,以上就是今天的所有内容了,正如前言所说的,我们今天只讨论武功招式,不讨论内功心法。

延伸一下:数据统计分析,最终还是要从业务中来,到业务中去,一切的形式,都是次要的,关键还是要以解决业务问题为根本、但对于我们这些“新手”来说,经验主义自然也是要借鉴的!相信今天总结的内容,也足够支撑大家比葫芦画瓢啦。


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

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



文章来源:优设   作者:晓庄同学产品笔记

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

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




掌握好「视觉重力原则」,构图的奥秘很简单!

涛涛

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

生活在地球上的我们,每时每刻其实都在感受着重力的存在。除了物理层面的影响,重力是否会改变我们对于视觉画面的认知呢?又或者说,物理学中经常听到的重力概念,和设计中的构图、排版又存在着怎样的关联呢?

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们或许能够从格式塔学派对认知心理学的研究里,寻找到一些蛛丝马迹。

人们的大脑总是会去脑补眼前看到的事物。就像我们看到的这三个被遮挡住的圆形图案,位于中心的倒三角虽然没有实际出现,但我们确实认为它是存在的对吧。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

视觉本身是很容易被周围环境影响的,就像我们现在看到的这个画面。如果忽略掉空间和透视的话,你还会觉得右侧的竖线更高吗?

而实际上的情况是,左边的竖线高度要远远高于右边的竖线高度。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

再看这个例子,两侧位于中央的白色球形,它们之间,谁看起来更大,谁又看起来更小?也许有的朋友会说左边更大,这个答案是没错的,但它也仅仅是看起来更大而已。

如果我们在画面中拉出两条辅助线,我们就会发现,原本右边看起来更小的圆球,要比左边的圆球更大。

通过刚刚的几个小测试,相信大家已经对于用眼睛的判断能力有了一些认识了,是不是有一种眼见不一定为实的感觉?视觉重力原则,其实就是建立在这样的认知基础之上的。我们大脑所认为的重心或平衡感,和真实的情况,往往并不相同。

在做版式设计的时候,我们的构图越接近重心的平稳状态,就越会激发和谐的美感。因为重力在自然界中是再平常不过的现象了,生活在这样环境中的我们,自然也会有这种审美上的倾向了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们来看这个例子,这张纸最稳定的位置在哪里呢?答案是它的正中心。

我们把信息添加在页面的中心位置,现在它看起来更平稳了吗?然而并没有,可问题出在哪?一定是我们没有把文字摆正吧?上方的区域(a),看起来要比下方的区域(b)面积更大一些,真的是这样么?

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

可实际上,文字确实是在页面的正中心位置上了,这同样我们的眼睛在作怪。

所以为了抵消视觉上的这种坠落感,我们需要将文字略微向上移动,这样我们看这段文字才是真正居中的。

正向

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们再举个例子,这是一个数字 8,我们来仔细观察一下它的造型,顶部与底部的负空间看起来是一样大的对吗?

垂直翻转

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而事实上并不是这样的,通过将它倒置,我们就会更明显的看出来,其实为了抵消人眼的错觉,我们在做字的时候,需要将上面做的更小,底部做的更大一些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这是两个完全等大的黑色圆形,但它在视觉上其实并不是平衡的,人们的眼睛会觉得右边更轻,这虽然没有顶部和底部那么明显,但也确实存在。那么解决的方法就是将左边的圆形略微缩小一些,现在这个页面看起来平衡多了。我们总是会下意识的认为左侧要更重要些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

⇧ 画作:The Creation of Adam

看这幅画,很明显左侧的内容要比右侧更少,可如果我们将它镜像翻转过来,它原版的平衡感就会被打破了。人们更多会认为左边看起来更重了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

同样的,在我们的汉字设计中,也会应用这种做法,比如林字的两个木字旁,就并不是左右等大的,因为这样在视觉上会显得不平衡。所以需要将左侧的偏旁削弱,才会在视觉上看起来更加和谐。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

具有左右结构的汉字,基本上都遵循了这个原则。形成了左收右放的构成样式。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

汉字“田”的中心十字笔画,为了看起来是居中的感觉,实际上也特地微调了文字的重心部分。利用辅助线,我们会更容易察觉到这其中的变化。可以看到,横笔部分,向上移动了很多。竖笔部分也相应向左做了位置上的调整。

人们常说,细节决定成败。也正是这些不起眼的细节,拉开了专业平面设计和业余设计师之间的距离。相信看到这里的小伙伴们,应该已经领略到了视觉重力原则在设计中的重要地位了。那么光知道有这么一回事儿可不行,我们更应该去了解它的特点,以及尝试着去掌握它。

我们看到的所有图像,无论抽象的还是具象的,其实都是具有重量感的。那么都有哪些因素会影响到视觉重力的大小呢?找到视觉重心之后,我们又要怎样去利用它们?接下来我们就一起去寻找相应的答案。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

色彩对视觉重量有影响吗?我们看画面中的这两个图形,是不是很明显感觉到右边更重呢?黄色的色相本身的视觉明度就要比蓝色更浅,所以我们会感觉到右边更重。

为了抵消颜色对视觉重量的影响,我们需要降低蓝色的面积,这样才能让两个图形看起来是平衡的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么换成具象的物体呢?道理其实也是一样的。我们依然可以把它们看成是纯粹的色彩。经过这一步分析,我们是不是发现了左侧红色的苹果,显然会更深和更重呢?

所以,为了保持左右的平衡感,我们也需要把红色相应的缩小一些。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们看这两个图形,它们谁更重?左侧的八边形,它的页面边缘更复杂,角度变化也更多,所以承载了更多的信息量,相比正方形更简洁的造型来说,左侧会更重。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么换成大小相同的秤砣和棉花呢?谁更重?几乎没悬念了,棉花完败。当具象的物体出现时,结合以往的视觉经验后,谁更重谁更轻也就很显而易见了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

对齐也需要考虑到视觉重力吗?如果你也有这种疑问的话,接着往下看。这是两个马克杯,它们虽然造型类似,但是色彩却不同。很显然蓝色的版本会更重,而在位置上更靠近左边,也就显得更重了。

所以,为了抵消这种重量上的轻微不平稳,我们可以把颜色更浅的橙色放到左侧的位置上。这样虽然色彩上橙色更轻,可由于它的位置更重要,也就不会给人不平稳的感觉了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

那么构图基本确定之后,我们为这两个杯子搭配上一段文案信息。这样两个商品的展示也就做完了。你发现这两个组合出现什么问题了吗?当文字信息加入到页面之后,是不是觉得哪里不对呢?

电脑是看不懂图像的,所以用到对齐命令时,它们会围绕着像素的边缘去做对齐。可问题在于,并不是所有图片的视觉重心都刚好在方框的中间位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

所以我们要去修改的地方,也正是这个视觉重心的对齐位置。现在再看这两个组合,是不是感觉和谐了很多。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当西文和汉字相互组合时,需不需要考虑到视觉重心的对齐呢?我们看,如果仅仅是依据边缘进行对齐的话,就会让西文部分看上去很小。而正确的做法是需要我们忽略掉一些文字边缘的。

分别找到两组文字的视觉大小。只有这样,才能让两组文字在视觉面积上达到相同的重量。当然,文字字重部分也是需要做出相应匹配。我们看,经过调整后,中西文的搭配明显要更加平稳了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

但也是有例外的,比如这个例子,明明是按照之前的调整方式,仅仅是更换了文字的内容。为什么它看上去依然没有对齐呢?这里的问题其实出现在西文部分,有些单词组合,字母并没有占据下伸部的空间。所以在整体上,就会显得有高低的错落感。

这种情况,当然就需要重新去匹配了。解决方法依然是对齐文字之间的视觉重心部分。所以,方法并不是死记硬背的。我们需要根据不同的情况去做出有针对性的调整。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

接下来我们来做一个包装的案例。它是一个螃蟹口味的海鲜调味料。首先,我们选择这个手绘的螃蟹作为这个画面中的视觉焦点,把它放在版面的中心位置。经过前面的学习,我们知道了,选择对齐元素时,我们要忽略掉那些细枝末节的部分,才能找到真正的视觉中心位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

找到了视觉重心后,我们把它安排到页面真正的中央部位。顶部和底部的空间,我们就继续调整其他的信息。首先从层级上来说,在页面顶部我们需要一个相对第二大面积的文字组合。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而其余的元素,围绕着底部的负空间去排列就可以了,到这里这个包装也就做完了。

无论是版式设计,还是绘画摄影,构图从来都是一个讲究的事情。想要做一版在视觉上平稳的版面,最简单的办法,就是把主体固定在页面的中心位置。可是这种对称的设计,由于太过完美,也多少会给人一种单调和乏味的印象。那么有没有一种既让页面保持平衡,又能在结构上做出变化的设计方法呢?这就引出了我们接下来的内容了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这个案例,属于网页中会出现的广告页面。首先,如果我想要让版面达到平衡状态,就需要把主体的重心安排在页面的中央位置。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

但是,为了让页面中加入更多信息,我们也不得不让主体向页面的一端靠拢,从而预留出足够的空间。

可这样就导致了页面的不平衡,左侧的文字重量并不能平衡整个版面。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

其实,解决的办法也很简单,我们可以试着将主体略微移向页面的中心部分。这样一来,就实现了一种动态的平衡状态。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这背后的知识其实很简单,就是最基本的杠杆原理。如果天平两端并不平衡,那就让更重那个的靠近中心,更轻的远离中心。这样也就恢复到平衡状态了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

这同样是一个网页中会出现的广告页面。我们看,它都出现了哪些问题。版面中所有的元素都集中到了顶部,这就导致了页面底部重量过轻,顶部重量过重的极端对比。也就是我们俗称的头重脚轻。那么经过调整之后问题依然存在。过多的空白,会让人们感觉这个版面作品没有完成。所有的重量都集中到了版面的左侧,这依然是一个极端的构图。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

正确的做法应该是怎样的呢?我们可以将重量最大的元素安排在中心位置。并且让其他元素以对称的样式排布。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当然,你也可以将信息放大,和原本的图像进行一个叠压组合,形成一个更重更大的整体。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,采用顶部图像,底部文字的做法,让页面中的重量分配均等。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

反过来也是一样的,顶部安排文字,底部安排图像。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

再或者,我们可以将信息安排在页面的左侧,形成左字右图的配置。这样的构成,有助于人们第一眼发现你想传达的信息。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

而反过来呢?图像就成为了更重要的那个。人们会先看到图,然后紧接着去阅读相应的文字信息。

到这里,我们分别从细节的刻画,再到元素的重心对齐;又从视觉重心的动态调整,一直讲解到了宏观页面的构建思路。我们可以看到,视觉重力原则几乎渗透了整个设计流程。很多时候我们其实并不缺乏理论知识的武装,可一到自己实际动手,就马上缴枪投降了。矛盾点还是出在对理论知识点灵活运用上,接下来我就带着大家再做几个案例。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

打算做一套大米的包装设计。产品的名字就叫高山岩米。它长什么样子呢,就像我们现在看到的这样,类似葡萄干一样,和我们平时见到的大米颜色是有一些区别的,据说营养价值很高,也被誉为米中黄金。

我想利用图形的切割来表现这个岩米的部分。同时,在辅助一个篆书结构的山字,以这样的图形来体现这个主题内容。并且,我也希望这个大米的部分是镂空的,能够透过它看到真实的米。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

主视觉的刻画差不多后,接下来我把它放到包装上,并且将其他信息也一并加入到版面里。不过这样一来,信息和主视觉相互叠压,对于内容来说可能会有些相互干扰了。所以我们来试着编排一下。到这里,好像出现了我们前面提到过的问题了,那就是,整个布局显得头重脚轻了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

接下来再试着调整一下。现在我们把底部和顶部的空间都占据了,同时也预留出了三分之一的留白,这该不会有什么问题了吧。相信看到这里的小伙伴应该都能看出问题了,那就是这样的配置确实有些左重右轻了。留白可以有,但绝对不是这样做的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

除了我们之前提到的上图下字,或者是左图右字之外。我们当然也可以综合的应用它们。我们现在这个构成,其实就是一种全包围的结构。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,将一部分内容放在底部,而主要去刻画上方的文本样式。这就形成了类似半包围的结构。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

如果说之前的版本是上下样式的半包围构成的话。那么接下来的这个构图,就是融合了重心动态布局的左右样式半包围构成了。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

当我们不知道怎样去安排版式构成时,视觉重力原则就成为了一个很好的参考依据。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们再做一版活动海报。画面中出现的各种电器,都是经过退底处理的。这样的处理,能够让它们毫无违和感的出现在同一个页面中。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

在页面的部分,我加入了这个活动的具体内容。展览的主题叫《模块世界展》,是著名设计师迪特拉姆斯的个人展览。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

拿到这样的内容时,最保险的做法就是让顶部的图片成为一个更大的组合。上图下字,很平稳,也很保守。

我们可以看到,图片部分,我尽量将它们还原成了现实中它们本来的比例关系。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

或许,我们也可以再换一种思路,相对的更突破一些。将图片通过颜色划分成组。我们能够看到,其中有全黑的,也有彩色的,更有白色的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

除了像刚刚的堆积到角落,我们也可以把图片组合规划成对角线的样式,在这样的形式下,版面构图依然是平衡的。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

我们当然也能让图片组合划分成一个更大的组合,以及一个更小的组合。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

又或者,打乱图片的顺序,完全依据视觉重心去匹配其中的位置关系。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

最终,我决定从展览的主题中寻找突破口,以“错位”的手法去呼应“模块化”这个概念。不仅仅是文字部分的错位和拆解,图片部分也通过硬边的投影,形成了一种嵌套于版面中的视觉印象。

掌握好「视觉重力原则」,构图的奥秘很简单!(超多案例)

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

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



文章来源:优设   作者:研习社

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

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





立方体轮播图(3d轮播图)

前端达人


<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      list-style: none;

    }

    html {

      height: 100%;

    }

    .container {

      width: 400px;

      margin: 200px auto;

      height: 100px;

      position: relative;

    }

    .box {

      width: 100px;

      height: 100px;

      position: absolute;

      float: left;

    }

    #rigth {

      background-color: rgba(0, 0, 0, 0.3);

      position: absolute;

      right: 0px;

      top: 50%;

      transform: translateY(-50%);

    }

    #left {

      position: absolute;

      left: 0px;

      background-color: rgba(0, 0, 0, 0.3);

      top: 50%;

      transform: translateY(-50%);

    }

    span:hover {

      cursor: pointer;

      color: red;

    }


    ul {

      width: 100px;

      height: 100px;

      transform-style: preserve-3d;

      float: left;

      transition: all 1s;

    }

    .top {

      background-color: red;

      transform: translateY(50px) rotateX(-90deg);

      transform: translateY(50px) rotateX(-90deg);

      background: url('./image/4.jpg') no-repeat;

    }

    .footer {

      transform: translateY(-50px) rotateX(90deg);

      background: url('./image/2.jpg') no-repeat;

    }

    .left {

      transform: translateX(50px) rotateY(90deg)

    }

    .rigth {

      background-color: yellow;

      transform: translateX(-50px) rotateY(-90deg);

    }

    .Front {

      background-color: pink;

      transform: translateZ(50px);

      background: url('./image/1.jpeg') no-repeat;

    }

    .behind {

      background-color: blue;

      transform: translateZ(-50px) rotateX(-180deg);

      background: url('./image/3.jpg') no-repeat;

    }

    /* 前 */

    .container ul:nth-child(2) .Front {

      background-position: -100px 0;

    }

    .container ul:nth-child(3) .Front {

      background-position: -200px 0;

    }

    .container ul:nth-child(4) .Front {

      background-position: -300px 0;

    }

    /* 底部 */

    .container ul:nth-child(2) .footer {

      background-position: -100px 0;

    }

    .container ul:nth-child(3) .footer {

      background-position: -200px 0;

    }

    .container ul:nth-child(4) .footer {

      background-position: -300px 0;

    }

    /* 后面 */

    .container ul:nth-child(2) .behind {

      background-position: -100px 0;

    }

    .container ul:nth-child(3) .behind {

      background-position: -200px 0;

    }

    .container ul:nth-child(4) .behind {

      background-position: -300px 0;

    }

    /* 上面 */

    .container ul:nth-child(2) .top {

      background-position: -100px 0;

    }

    .container ul:nth-child(3) .top {

      background-position: -200px 0;

    }

    .container ul:nth-child(4) .top {

      background-position: -300px 0;

    }

  </style>

</head>

<body>

  <div class="container">

    <ul>

      <li class="box top"></li>

      <li class="box footer"></li>

      <li class="box left"></li>

      <li class="box rigth"></li>

      <li class="box Front"></li>

      <li class="box behind"></li>

    </ul>

    <ul>

      <li class="box top"></li>

      <li class="box footer"></li>

      <li class="box left"></li>

      <li class="box rigth"></li>

      <li class="box Front"></li>

      <li class="box behind"></li>

    </ul>

    <ul>

      <li class="box top"></li>

      <li class="box footer"></li>

      <li class="box left"></li>

      <li class="box rigth"></li>

      <li class="box Front"></li>

      <li class="box behind"></li>

    </ul>

    <ul>

      <li class="box top"></li>

      <li class="box footer"></li>

      <li class="box left"></li>

      <li class="box rigth"></li>

      <li class="box Front"></li>

      <li class="box behind"></li>

    </ul>

    <span id="rigth">下张</span>

    <span href="JavaScript:;" id="left">上张</span>

  </div>

</body>

<script>

  var rigth = document.getElementById("rigth")

  var left = document.getElementById("left")

  var ul = document.querySelectorAll(".container ul")

  var index = 0

  var flags = false

  rigth.onclick = function () {

    if (flags == false) {

      flags = true

      index++

      for (var i = 0; i < ul.length; i++) {

        ul[i].style.transform = "rotateX(" + index * 90 + "deg)"

        ul[i].style.transitionDelay = "" + i * 0.3 + "s"

      }

      setTimeout(function () {

        flags = false

      }, 2000)

    }

  }

  left.onclick = function () {

    if (flags == false) {

      flags = true

      index--

      for (var i = 0; i < ul.length; i++) {

        ul[i].style.transform = "rotateX(" + index * 90 + "deg)"

        ul[i].style.transitionDelay = "" + i * 0.3 + "s"

      }

      setTimeout(function () {

        flags = false

      }, 2000)

    }

  }

</script>

</html>



作者:yuanzhuang

链接:https://www.jianshu.com/p/10c90c482795

来源:简书

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

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


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

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


css简单样式(旋转正方形、纸片旋转、轮播图3D、简单轮播图)

前端达人

 
  1. 旋转正方形
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta charset="utf-8">
  7. <title>旋转立方体</title>
  8. <style type="text/css">
  9. .stage{
  10. position: relative;
  11. perspective: 800px;
  12. }
  13. @keyframes rotate-frame{ /* 设置动画效果 */
  14. 0% {
  15. transform: rotateX(0deg) rotateY(0deg);
  16. }
  17. 50% {
  18. transform: rotateX(360deg) rotateY(0deg);
  19. }
  20. 100% {
  21. transform: rotateX(360deg) rotateY(360deg);
  22. }
  23. }
  24. .container{
  25. width: 450px;
  26. height: 450px;
  27. margin: 0 auto;
  28. transform-style:preserve-3d;
  29. animation: rotate-frame 8s infinite linear;
  30. animation-timing-function: all;
  31. animation-direction: normal;
  32. animation-fill-mode: backwards;
  33. transform-origin: 50% 50% 75px;
  34. /*background: yellow; 容器屏幕背景色*/
  35. }
  36. .container:hover{
  37. /*覆盖时暂停动画*/
  38. animation-play-state: paused;
  39. }
  40. .side{
  41. width: 150px;
  42. height: 150px;
  43. position: absolute;
  44. text-align: center;
  45. line-height: 150px;
  46. font-size: 50px;
  47. }
  48. .top{
  49. left: 150px;
  50. top: 0;
  51. transform: rotateX(-90deg); /* 设置角度 */
  52. transform-origin: bottom;
  53. background-color: rgba(0,0,255,0.5);
  54. }
  55. .bottom{
  56. left: 150px;
  57. top: 300px;
  58. transform: rotateX(90deg);
  59. transform-origin: top;
  60. background-color: rgba(0,255,0,0.5);
  61. }
  62. .left{
  63. left: 0;
  64. top: 150px;
  65. transform: rotateY(90deg);
  66. transform-origin: right;
  67. background-color: rgba(255,0,0,0.5);
  68. }
  69. .right{
  70. left: 300px;
  71. top: 150px;
  72. transform: rotateY(-90deg);
  73. transform-origin: left;
  74. background-color: rgba(0,0,100,0.5);
  75. }
  76. .front{
  77. left: 150px;
  78. top: 150px;
  79. transform: translateZ(150px);
  80. background-color: rgba(0,100,0,0.5);
  81. }
  82. .back{
  83. left: 150px;
  84. top: 150px;
  85. background-color: rgba(100,0,0,0.5);
  86. }
  87. .rotateX180{
  88. /*让倒置的数字倒置回正常状态*/
  89. transform: rotateX(180deg);
  90. }
  91. </style>
  92. </head>
  93. <body>
  94. <div class="stage">
  95. <div class="container">
  96. <div class="side top" >1</div>
  97. <div class="side bottom">2</div>
  98. <div class="side left">3</div>
  99. <div class="side right">4</div>
  100. <div class="side front">5</div>
  101. <div class="side back">6</div>
  102. </div>
  103. </div>
  104. </body>
  105. </html>
 
  1. 纸片旋转
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Document</title>
  7. <style type="text/css">
  8. .zpbox{
  9. /*设置3D视角*/
  10. perspective: 800px;
  11. perspective-origin: bottom right;
  12. }
  13. .box{
  14. height: 200px;
  15. width: 100px;
  16. margin: 50px auto;
  17. /*preserve-3d 指定子元素定位在三维空间内 */
  18. transform-style: preserve-3d;
  19. /*指定变换为:linear-线性过渡*/
  20. transition-timing-function:linear;
  21. /*指定旋转动画*/
  22. animation-name: action_b1;
  23. animation-duration: 4s;
  24. animation-timing-function: all;
  25. animation-direction: normal;
  26. animation-iteration-count: infinite;
  27. animation-fill-mode: backwards;
  28. position: relative;
  29. }
  30. .box:hover{
  31. /*覆盖时暂停动画*/
  32. animation-play-state: paused;
  33. }
  34. .b1{
  35. /*声明第一个卡片为浮动,使得两个卡片能重叠*/
  36. float: left;
  37. height: 200px;
  38. width: 100px;
  39. background-color: #000;
  40. text-align:center;
  41. line-height: 100px;
  42. color: #fff;
  43. font-size:50px;
  44. }
  45. .b2{
  46. height: 200px;
  47. width: 100px;
  48. background-color: #000;
  49. text-align:center;
  50. line-height: 100px;
  51. color: #fff;
  52. font-size:50px;
  53. /*第二个卡片旋转90度*/
  54. transform: rotateX(90deg);
  55. /*第二个卡片位于中间位置*/
  56. position: absolute;
  57. margin-left: 0;
  58. margin-top: 0;
  59. }
  60. .rotateX180{
  61. /*让倒置的2、4数字倒置回正常状态*/
  62. transform: rotateX(180deg);
  63. }
  64. @keyframes action_b1{
  65. 100%{
  66. transform: rotateX(-360deg);
  67. }
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <div class="zpbox">
  73. <div class="box">
  74. <div class="b1">
  75. <div>1</div>
  76. <div class="rotateX180">3</div>
  77. </div>
  78. <div class="b2">
  79. <div>2</div>
  80. <div class="rotateX180">4</div>
  81. </div>
  82. </div>
  83. </div>
  84. </body>
  85. </html>
 
  1. 轮播图3D
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Document</title>
  7. <style type="text/css">
  8. html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; } /*去掉多余的像素*/
  9. body{
  10. perspective: 800px;
  11. }
  12. .box{
  13. width: 800px;
  14. height: 360px;
  15. margin: 100px auto;
  16. text-align:center;
  17. position: relative;
  18. left: 50%;
  19. margin-left: -400px;
  20. /*background-color: #eee;*/
  21. transform-style: preserve-3d; /*设置为3D模式*/
  22. /*transform: rotateY(-30deg) rotateX(57deg);*/
  23. /*transition:5s ease;*/
  24. animation-name: animate;
  25. animation-duration: 10s;
  26. animation-iteration-count: infinite;
  27. }
  28. .box>div{
  29. width: 800px;
  30. height: 360px;
  31. position: absolute;
  32. }
  33. .box>.up{
  34. background: url(flower.jpg); /*引入照片*/
  35. transform: rotateX(90deg) translateZ(180px); /* 设置角度 */
  36. }
  37. .box>.down{
  38. background: url(flower.jpg);
  39. transform: rotateX(90deg) rotateZ(180deg)translateZ(-180px);
  40. }
  41. .box>.before{
  42. background: url(flower.jpg);
  43. transform: translateZ(180px);
  44. }
  45. .box>.after{
  46. background: url(flower.jpg);
  47. transform: translateZ(-180px) rotateX(180deg);
  48. }
  49. .box:hover{
  50. animation-play-state: paused; /* 当鼠标悬停的时候停止 */
  51. }
  52. @keyframes animate{
  53. 0%{
  54. }
  55. 25%{
  56. transform: rotateX(90deg);
  57. }
  58. 50%{
  59. transform: rotateX(180deg);
  60. }
  61. 75%{
  62. transform: rotateX(270deg);
  63. }
  64. 100%{
  65. transform: rotateX(360deg);
  66. }
  67. </style>
  68. </head>
  69. <body>
  70. <div class="box">
  71. <div class="up"></div>
  72. <div class="down"></div>
  73. <div class="before"></div>
  74. <div class="after"></div>
  75. </div>
  76. </body>
  77. </html>
  
  1. 轮播
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>轮播</title>
  7. <style>
  8. .frame{
  9. position:absolute;
  10. margin: 50px 200px;
  11. width:280px;
  12. height:200px;
  13. overflow:hidden;
  14. border-radius:6px;
  15. background-color: #000;
  16. }
  17. .imgdiv img{
  18. float:left;
  19. width:280px;
  20. height:200px;
  21. }
  22. .imgdiv {
  23. position: absolute;
  24. width: 1500px;
  25. }
  26. .play{
  27. animation: lbt 10s ;
  28. animation-direction: normal;
  29. animation-iteration-count: infinite;
  30. }
  31. .play:hover{
  32. animation-play-state: paused;
  33. }
  34. @keyframes lbt {
  35. 0%,20% {
  36. margin-left: 0px;
  37. }
  38. 20%,40% {
  39. margin-left: -300px;
  40. }
  41. 40%,60% {
  42. margin-left: -600px;
  43. }
  44. 60%,80% {
  45. margin-left: -900px;
  46. }
  47. 80%,100% {
  48. margin-left: -1200px;
  49. }
  50. }
  51. </style>
  52. </head>
  53. <body>
  54. <div class="frame" >
  55. <div class="imgdiv play">
  56. <img src="lunbo.jpg" > <!-- 引入照片 -->
  57. <img src="lunbo.jpg" >
  58. <img src="lunbo.jpg" >
  59. <img src="lunbo.jpg" >
  60. <img src="lunbo.jpg" >
  61. </div>
  62. </div>
  63. </body>
  64. </html>

1

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

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


部分借鉴自:csdn  

原文链接:

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

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

这样做设计,可太香了~

seo达人



今天我将告诉大家一个更加简单高效的技巧去定义一个色板。在星球里还有很多这样的文章,无论是现有的500+精华文章,还是每天100+设计干货,我们坚信相信水滴石穿的力量。请看今天的分享,Enjoy it。

图片

a

一套界面需要哪些颜色?

图片

说到色板,我们得首先弄清楚一套APP需要哪几种色彩,我们从airbnb的色板中,以及很多很多产品中大概可以得出一个公式:品牌色 + 提醒类型颜色(成功,错误,警告)+ 中性黑白灰颜色(各种字体,背景,分割线颜色等)

图片

在定义了上述大的色彩原理下,我们需要对界面中使用场景进行梳理得出下列大概色彩类型。

图片

a

如何去做呢?

重点来了,那我们如何去做呢?首先,我们先创建3个方块,这些方块后面会成为基础颜色!这里我设置的是被3整除的高度和宽度,我创建了一个300X300的正方形:

图片

接着我们填充3个颜色,红,绿,蓝,为什么是红,蓝绿,因为在色彩体系里面,这三种颜色属于色光三原色(色光三原色为:红、绿、蓝。光线会越加越亮)

红,绿,蓝怎么定义,大家可以从自己品牌色里面去定一个,然后可以根据HSB的方法去得出同色温下面的绿和蓝!

图片

h值(色相)以15,S和B不变,递增得到基于品牌色的24个色带,有人可能会问为什么是24个?因为24X15=360刚好围绕色环盘一圈。

图片

所以我们得到一圈基于品牌色,明度和饱和度一致性的颜色!

图片

你也可以依据https://coolors.co/去生成一套蓝色或者绿色

第二步

第二步,将这三个方块横向等分,因为每个方块300X300,所以除以3就是100PX

图片

图片

图片

将一个矩形与画板顶部对齐,然后填充微白色,将第二个矩形与画板底部对齐,填充微黑色,然后将顶部的白色,和黑色透明度调整微20,这样我们就过得到,三种不同的红色,绿色,和蓝色。

第三步

第三步,我们需要定义垂直等分的区间,我们需要画2个矩形,这2个矩形的宽度刚好是300X300的三分之一也就是100X100,将他们和正方形的右侧对齐。

图片

现在到了这篇文章的核心,就是我们需要将这个颜色改为黄色,很多人可能会好奇,为什么是黄色,因为黄色是色彩的三原色之一(可以参考上面我们通过HSB得出黄色)

图片

图片

调整黄色的模式改为叠加,将其中一个透明度降低为40%,另外一个降低为80%,然后将他们复制到绿色和蓝色的画布上,借助叠加模式,我们得到了明亮和鲜艳的颜色。

第四步

这样我们就快速的得出了一套色彩体系,然后根据我们的需求选取一部分颜色成为这个色盘体系:

图片

图片

然后添加到我们的整个色盘里面去,同理我们可以得出黑白灰色颜色,比如我们的颜色最黑是#333333

图片

顶部20%白色,底部80%黑色得出

图片

图片

纵向叠加40%白色,80%白色得出

图片

得出文字3个梯度颜色

生成最终色板

图片

通过上面的步骤就可以得出整个色板

注意

色彩感觉不好的同学,如果没有品牌色,或者品牌色搭配出来不太和谐,强烈推荐大家使用这个网站进行配色。

图片

他是基于设计师人工智能匹配出来的颜色,都比较和谐,使用起来的,我们随便试试。

图片

在这个网站上输入一个红色,锁定,然后按空格随机生成颜色,最终确定,蓝色,绿色黄色,制作出色盘。

图片

得出色盘

关于色彩系统构建的方法就是这样,不知道大家掌握没有,希望大家在做设计时候,色彩运用更加科学,一定要自己动手试试!

 

原文地址:我们的设计日记(公众号)

作者:sky


 

转载请注明:学UI网》这样做设计,可太香了~

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

                                                            微信图片_20210513163802.png

 

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

 

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

设计心理学系列(03)——雅各布定律与心智模型

seo达人



在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。今天我们继续设计心理学第3篇——雅各布定律。

本文主要内容包括:
  • 雅克布定律与心智模型
  • 心智模型对设计的影响

 

01雅各布定律与心智模型

雅各布定律指的是如果用户已将大部分时间花费在某个网站上,那么他们会希望你的网站可以与那些他们已熟悉的网站一样拥有相似的使用模式。
这个定律揭示了用户认知事物的过程和特点——用户是“懒”的,会通过已有的经验去认知新的事物。当经验无法匹配时,用户会产生各种不适应,极端情况下用户会放弃使用产品。
比较典型的就是长期使用Windows的用户,最开始使用Mac时会表现出各种不习惯。最根本的原因就是用户在Windows系统中建立的使用心智,无法适用于Mac系统,为此有人在MacBook 中安装了Windows 系统。
图片
Don Norman 将心智模型定义为:“存在于用户头脑中的关于一个产品应该具有的概念和行为的知识,这种知识可能来源于用户以前使用类似产品的经验,或者是用户根据使用该产品要达到的目标而对产品的概念和行为的一种期望。”

因此我认为雅各布定律其实是用户心智模型的外在表现。

 

02心智模型对设计的影响

设计师如何去应用心智模型呢?主要有以下3个方面。

图片

1、匹配用户心智

匹配用户心智模型来改善体验是设计师的首要任务。当设计方案与用户心智模型一致,用户可以轻松地将已有经验从一个产品转移到另一个产品上,无需额外的理解和学习成本。

 

最常见的就是与真实环境相匹配。例如手机系统中开关样式、日历风格,都是与现实生活中相匹配的,用户的认知成本很低。同样在电商平台中,很多弹窗套用类似于微信红包样式,希望可以提高活动对用户吸引力带来更多点击和转化。

图片

之前曾经碰到一个案例。在某一数据监控系统中,数据正增长时采用红色表示,负增长采用绿色表示,理由是与股市的涨跌配色保持一致,但是系统跟股市并没有任何关系。该系统中红色又代表了告警色,绿色代表了健康色,同一系统中采用了两套设计形式,结果造成了用户困扰。

 

因此匹配用户心智需要综合考虑用户场景、应用目的等多种因素。

 

例如常见的地图,在不同的场景中表现方式也是有所差异的。在高德地图中,用户需要查询地点、导航出行等等,所以地图与我们常见的实物地图更加匹配。而在滴滴打车中,地图更多是为了确定用户地理位置、上车地点、周边车辆数量等等,所以地图更多的是作为背景进行了简单化的处理。

图片

 

2、建立新的心智

我们在设计工作中会遇到各种新的场景、新的功能,无法完全匹配用户已有的认知,因此需要借助一定的设计手段建立用户新的心智,主要包括以下3种设计形式。

图片

 

1)产品心智植入

最开始我对slogan之类的品牌心智是无感的,感觉这种口号太虚了,用户不会care,或者很难引起用户共鸣。但是今日头条改变了我的认知,短视频逐渐占领了我的碎片时间,通过短视频让我看到了别人不一样的生活,跟着别人的镜头也让我“看见了更大的世界”。

拼多多月卡为了建立用户的省钱心智,在页面中突出了产品slogan,并且将“4张5元无门槛券”打造成标志性权益,降低用户的决策成本,并且形成权益记忆点,方便营销传播。

图片

 

2)心智引导

当产品设计无法与用户心智相匹配,或者改变了用户已有心智时,需要通过引导方式让用户快速建立新的心智。例如常见新手引导、功能入口提示、功能调整说明等。

图片

 

3)行为培养心智

为了培养用户习惯,签到类产品都会采用“定时玩法”打造用户心智。例如淘系的各种游戏化产品,都采用了每天早上7点定时收获游戏奖励的玩法,通过日复一日的行为刺激固化用户心智模型。

图片

对于会期比较长的年卡付费会员,用户对权益感知比较散碎,同样需要周期性权益激发用户与产品之间的互动,不断的增强用户的省钱感知。因此不少付费产品增加了月度权益。例如京东每月100元优惠券,淘宝88VIP每月兑换优惠券,1号会员店每月领鸡蛋,考拉海购黑卡月度专享购物券权益等。

 

这些月度权益在用户生命周期中形成了一个个记忆点,逐渐增强用户对产品的“省钱”心智,并且可以持续的激活用户,为续费活动做好衔接。

图片

 

3)利用心智

设计师既要为用户服务,又要考虑商业价值实现。所以某些场景下,设计师需要利用已有的心智为产品服务。

例如弹窗可以更好地吸引用户注意力,并且用户对于弹窗主要有两种操作,要么关闭要么点击。基于这样的心智,某些App开机广告就采用弹窗样式吸引用户点击。

图片

 

另外广告作为互联网平台重要的收入来源,需要考虑投放效果,因此广告大都采用软植入的方式,在形式上尽可能的与实际内容保持一致,从而借助已有的心智引导用户浏览和点击。

图片

写在最后
我个人认为心智模型其实包括交互和品牌两个层面。

在体验设计层面,设计师需要匹配用户心智和引导用户心智。而产品设计更需要建立品牌心智,提升用户对品牌的忠诚度。因此在产品和运营活动设计时需要充分考虑对品牌心智的影响,避免带来负面效果。

 

原文地址:子牧UXD(公众号)

作者:子牧先生


 

转载请注明:学UI网》设计心理学系列(03)——雅各布定律与心智模型



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

                                                            微信图片_20210513163802.png

 

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

 

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


日历

链接

个人资料

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

存档