首页

解剖12大智慧零售案例!智慧零售案例创新商品化

蓝蓝设计的小编

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


2016 年开始的智慧零售浪潮,至今已经席卷大半个行业市场。所有零售企业都认识到:新的科技和应用正在重塑零售业,企业必须不断变化,以取得未来的主动权。作为一个古老的行业,零售业在中国的发展可以分为四个时期。1.0 时期,线下交易高速发展;2.0 开启了电商时代,C2C、B2C 服务模式遍地开花;3.0 时期则是移动互联网的主场;如今,零售 4.0 即智慧零售时代已经到来,线上线下的边界越来越模糊直至完全融合,逛超市、买衣服俨然变成了科技感十足的事情。2019 年将是零售界数字化转型的关键时期,也是对于企业的严峻考验。在“花样百出”的行业生态中,企业是不是真的理解了“智慧零售”?要想变得更加“智慧”,哪些事情需要改变,哪些需要坚持?

解剖12大智慧零售案例!商超服饰等6大行业巨头这样重生【附下载】| 智东西内参

本期的智能内参,我们推荐来自哈佛商业评论的报告《2018年度零售业数字化案例榜》, 以实战案例为更多期待“破茧重生”的企业带去经验和启发,为消费者提供更好的商品、服务和体验。如果想收藏本文的报告全文(2018年度零售业数字化案例榜),可以在智东西公众号:(zhidxcom)回复关键词“nc324”获取。

一、零售行业新商机

在2.5 亿年前,地球经历了一场由大规模火山爆发引起的大灭绝,90% 的物种销声匿迹。但不久之后,在形形色色的新生态系统中,新的生命形式爆炸式地出现。这场物种大灭绝事件,被称为二叠纪大灭绝。如今,大规模数字化使得很多零售商因此消失在市场中。但和二叠纪一样,许多新机构、新平台和新生态系统纷纷涌现,一场零售行业的革命正在进行中。数字化、娱乐化、全渠道化和平台化是智慧零售的四个基本元素,但这一变革的影响要远远超出人们目前所看到的表面。

1、虚拟与实体经济的数字化

数字化的影响几乎遍及所有行业。特别是在零售业,数字化往往从后勤部门的大数据和分析开始,涉及诸如客户细分、预测和供应链优化等流程。这些流程在面向客户的活动中都担负重任。

但“数字化”不等同于虚拟世界的数字化。如今,虚拟经济和实体经济都变得越来越数字化。随着智能设备的不断普及,对零售商来说,数字化的影响力和相关性呈指数级增长。数字世界可以通过多种方式和实体世界联结:在线订单追踪,定制打印名片或者在线设计 T 恤,追踪顾客去了哪家实体店铺,在供应链和库存管理中,引入自动驾驶工具、3D 打印机、理货机器人和 RFID(无线射频识别)标签等。

数字化所需求的并非只有后勤及运营业务的改变,还包括提升顾客体验及形成全渠道购物旅程。例如,如果顾客想要通过指定的补货按钮下单,或使用成像技术试穿。他们购买的产品和服务也会受影响。比如消费者通过物联网连接微波炉进行操作,或使用健身记录仪等可穿戴植入设备接受训练。因此,零售企业的任务不仅要进行数字化软件升级,还要以数字化工具覆盖线上和线下,创造出智能、数字、互联的体验性旅程,并提供与之匹配的产品、店铺和服务。比如现在实体店铺也能通过分析实时视频图像判断结账队伍是否过长,并在需要时从仓库调人帮忙收银和装货,以减少顾客等待时间。

当交易率(transaction rates)增加时,电商能通过云服务,自如地扩充计算资源。零售商并不需要分别制定线上数字化战略和实体数字化战略,而是需要一个融合了线上线下的整合数字化战略。

2、娱乐化并非唯一战略

消费者是复杂的人类,受各种功利(理性)和享乐(愉悦)动机的驱使,希望和零售商达成期待中的关系,满足自身需要和渴望,并从中获益。因此,如今零售转型的战略之一是“娱乐化”,增强享乐、体验和生活方式等元素。

虽然顾客有时很看重娱乐,但他们也有其他驱动因素。有时主要为获得娱乐,有时看重便利性,希望送货上门;有时是食材的纯度和新鲜度;有时是低价,为了省钱;有时看重速度,有时看重社交。零售商必须找出某类用户的核心需求,并抓住他们的购物动机,实现需求动机与关系类型的合理组合。

3、全渠道化要变为旅程化

对零售商来说,更重要的还是专注于增强顾客体验以及端到端顾客旅程:从客户意识到需求、评估、购买意向到下单、支付、送货、安装、维修等流程。如今,顾客旅程和接触点不仅涉及一线店铺员工,消费者和零售商之间可能还有亲友、社交网络好友及粉丝、竞争对手、替代产品、社交媒体意见领袖和博主、政府和学界等第三方加入。

正如下图例证所示,零售生态中的参与者有很复杂的互动关系。除了接触点,识别出覆盖多个接触点和流程(我称其为“交叉点”),面向顾客进行重复性活动及支持数据,也非常重要。包括客户关系管理、安全隐私、品牌标识、欺诈识别等。而且研究表明,针对流程或两个接触点交叉的地方,关注顾客旅程的零售商,财务表现有显著提高。

解剖12大智慧零售案例!商超服饰等6大行业巨头这样重生【附下载】| 智东西内参

▲零售生态

此外,客户体验绝非很多人所认为的是直接顾客体验,而是零售商接触消费者的所有接触点之和。它包括了成本、质量、时间等数不清的隐藏商业流程特性,并包含互动、需求、限制条件等现实和认知。这些环节中有很多问题,并不为零售商所知,也很难控制,但会影响顾客体验。

全渠道化和旅程化都与数字化相伴而生:所有消费者旅程和接触点的来源渠道是未知的,因此需要无缝实时整合客户、订单和产品信息,也需要支持系统、流程、产品和包括库存、定价、促销等服务。零售商在理解并完全支持消费者旅程的情况下,会更懂得从何处入手。尽管全渠道化很重要,但关注顾客旅程是当务之急。换言之,如果顾客通过任何渠道获得的体验都同样糟糕,那么一切就是白费力气。

4、平台必须进化到“集体亲密”

智慧零售的企业必须想方设法获取客户数据。占有客户的海量数据有时会被视为动机邪恶和侵犯隐私,但却是为了最高尚的目标服务:用最切题和及时的方案为顾客提供最优服务,或者设计未来解决方案。

为了能为客户做出个性化和场景化的推荐,企业需要将各式各样的数据和单个客户联系起来,也就是将客户和企业的匿名交易关系变为长期关系。企业可以先小规模进行试验,然后进化到集算法和数据、线上线下为一体的大规模应用。最初,一线店员负责维护客户关系,之后零售商开始使用会员卡追踪客户信息和他们的购物篮,研究得出数据洞见。

如今,注册设备、信标技术和面部识别等技术能帮助企业识别出每位客户,这意味着零售商能够以聚合方式获取海量数据,再落实到家庭、个人及人格形象上。如果顾客不信任零售商,当然不愿交出这些数据。因此,零售商需要以可信任的方式储存、保护这些数据,并从中得出能指导行动的洞见。最后,理解消费者的目标、意图和动机很关键,一个有效的解决方案只有针对具体需求才有效果。

场景也很重要。用有理论认为,社交好友的偏好对购物有很强的暗示作用,因此社交信息也逐渐被纳入考量。

当用户和零售商的关系到达最高级别,我愿意称之为“集体亲密”阶段——即企业为消费者提供数据密集程度最高的解决方案。通过数百万甚至是数亿级别的态度、行为、情境、人口统计、社交数据、历史信息等数据点,用复杂的算法和特定模型,针对从全部消费者那里搜集来的汇总数据进行分析,最后为每位消费者做出个性化推荐,从而减少粗制滥造,提供匹配度更高的产品和服务。

企业对顾客理解程度的加深有利于为其提供更好的个性化、定制化和场景化产品、服务和解决方案。这将全面改善客户体验,带来更大的品牌忠诚度,提高购买量和复购率,也将让零售商更加理解顾客。事实上,正如下图所示,这里存在很多正反馈循环。

解剖12大智慧零售案例!商超服饰等6大行业巨头这样重生【附下载】| 智东西内参

▲零售行业中的正反馈循环

企业对顾客理解程度的增强和对收益增长永无止境地追求,都有利于消解传统零售的行业壁垒,重新划分零售边界。同时,现在零售商正在变为制造商,反之亦然。在中国,支付优势和零售优势相互匹配,正成为转型的重要动力。而在美国,并无这样的匹配。亚马逊是由Visa、 万事达、美国运通或 PayPal 负责处理支付和信用问题。

总而言之,零售业并没有迎来像二叠纪那样的大灭绝,并同样迎来了重生的良机。这一良性循环意味着,最为适应环境的企业和最具创新的企业不仅能够生存,还能获得更加蓬勃的发展。但有一点需要铭记:无论线上、实体还是混合的数字化解决方案,只有在创造了独特的客户价值,让竞争差异化,并和零售商整体商业战略一致的情况下,才能带来改变。以下,我们将以下五个典型案例来具体说明新零售业的转变(原文共十二个案例,详情可在公众号回复nc324获取)。

解剖12大智慧零售案例!商超服饰等6大行业巨头这样重生【附下载】| 智东西内参

▲新零售数字化转型的十二个案例

二、新零售案例

1、永辉云创:零售“下半场”,向行业输送“科技力”

2018 年最后一个月,永辉旗下“云创”独立运营和发展。这个被业界认为是永辉智慧零售试验田的业务板块,旗下包含了永辉生活店、超级物种、永辉到家业务等业务。

2018 年,腾讯智慧零售的七大工具逐步落地应用到永辉的门店端、用户端及供应链端,通过这些工具,永辉逐渐看到了自身全场景、全链路的“数字化版图”。在线下,门店已经全面实现了扫码购、移动支付,永辉小程序也在不断渗透。用户可以通过小程序定位所在门店的位置,直接扫描商品条形码,随时买单而不用排队。而到家业务拓展了“场”的范围,用户在家打开永辉生活 APP 或者小程序会自动显示你附近的永辉门店及服务,线上下单,将直接由附近的门店和卫星仓履单配送到家。

在供应链端,通过对商品进、销、存、出四大环节的“全链路”数字化,预测某个商品的销售量,并根据销售情况实时反馈供应链,进行按需生产及订货,以控制生鲜食材的损耗率,从而降低仓储库存风险等。

在运营端,通过小程序和 APP 的运营,永辉完成了从线下到线上的引流。依托海量数据,门店可以获得店内实时客流量、客户店内轨迹及商圈实时热力图等数据,从而获得“货”的优化,使商品更加匹配用户需求,门店也可以做到“千店千面”,以满足用户个性化需求。

后期,当不同用户被分到线上各个微信社群中时,店员可以通过不同社群“人”的数据洞察,进行日常运营,以提升拉新、复购和留存率。比如永辉生活用户可以通过社群下单,并参与拼团秒杀活动等。而如果你是小程序用户,很大概率上都会收到这些优惠活动的线上广告。

通过数据洞察,永辉将更多“智慧”注入商超零售线上线下全场景,改变了传统“人货场”之间的关系,打造了“智慧零售”业态标杆店,让消费者获得线上线下的“一体化”服务和体验。

脱胎于永辉,永辉云创更像是一家互联网公司。它不仅先后获得今日资本、腾讯、创新工场、丹晟投资等机构的战略投资,还具有浓重的“互联网基因”,偏向于以“内力”驱动业务创新和自我颠覆。在智慧零售的“上半场”,互联网为传统零售场景注入“智慧”因子,带动了“人货场”的重构;而在“下半场”,永辉将以消费者诉求为核心,大数据、云计算、物联网、人工智能、区块链等技术将进一步重塑行业面貌,向行业输送零售“科技力”。

2、沃尔玛:一切创新都将围绕个性化顾客体验

沃尔玛中国门店里,一些新的零售 场景频频出现:顾 客在货架前拿出手机,扫描一包薯片或者一袋烤鸭背后的条形码,边逛边扫,一路走到收银台出口处,他们无视排队结账的 “长龙”,而是拿出手机,手指轻触几下,就可以通过 “扫玛购”专用通道快速结账离开门店。

整个过程行云流水。如果只买一件商品,最快不到 3 分钟即可实现一次愉快的购物。这就是沃尔玛中国“扫玛购”微信小程序。通过解决顾客排队结账的痛点,提升顾客购物体验,沃尔玛“扫玛购”在 2018 年 1 月推出以来,短时间成为零售商超行业首个千万级用户小程序,截至 2018 年 12 月初,用户数突破 2000 万,累计访问量超过 8.2 亿。

熟悉沃尔玛历史的人都知道,沃尔玛一直以来以科技创新引领零售变革。作为一家以“优质优价”为卖点的连锁零售企业,沃尔玛能够力压石油、汽车等行业,连续 5 年占据《财富》世界 500 强排行榜榜首,就是因为将“控制成本”写在了经营法则里。而控制成本的关键因素在于先进的数字化物流和供应链管理系统下的运营能力。

早在 20 世纪 80 年代,沃尔玛就斥巨资购买了自己的商业卫星,实现了全球联网。此后,沃尔玛第一个建立了全球性的零售大数据网络,协同遍布世界各地数千家门店,自动记录每一件货物的库存、上架、销售、运输和订货等实时数据,对接所有采购和供应商,整合上游下游全产业链,想尽一切办法来降低整个供应链的成本,从而将商品锁定在价格。

此外,沃尔玛还最早推行了射频标识 技 术(RFID 技 术:Radio Frequency Identificatian 即无需人工干预自动识别商品进行结账的技术)和 24 小时物流联网监控系统,节省物流成本。而所有节省下来的成本,沃尔玛都选择让利于消费者,从而真正实现“为顾客节省每一分钱”。

如今,在电商和物流发达的中国,网络购物和移动支付已经彻底改变了中国的零售商业生态。比如,相对于 RFID 技术,中国顾客显然更偏向于移动支付。因为相对于欧美普及已久的信用卡支付习惯,移动支付具有不可替代性。随着线下租金、人力资源成本的上升,沃尔玛近年来采用更加适应中国的进化之路——大力拓展电子商务,发展全渠道零售 , 包括与京东、达达 – 京东到家在渠道、数据、物流等方面的合作。2018 年,沃尔玛开始与腾讯智慧零售就购物体验、市场营销、支付创新和会籍体系等方面展开深入合作。

之所以全面上线“扫玛购”,就是因为这一小程序可以将沃尔玛大量的线下流量连接起来,提升门店的运营效率,为沃尔玛沉淀更多数字化用户,从而为顾客提供个性化的购物体验打下基础。“扫玛购”本质上相当于一个虚拟购物车,消费者可以通过小程序扫描商品上的条形码将商品加入“购物车”,再通过微信支付自助结算,生成离场二维码,全程无需等待排队结账。

如果你想更加节约时间,也可以直接线上下单选择配送到家。沃尔玛一方面推动线下门店进行数字化转型,扩大其线上订单拣货的区域空间,另一方面在门店覆盖不到的地方部署云仓网络。通过与达达 -京东到家的合作,顾客所在区域 3 公里内只要有沃尔玛门店或云仓,就可以线上下单选购沃尔玛商品,一小时内配送到家。目前,沃尔玛中国在深圳、上海、成都、北京等已建立 38 个云仓。

随着 80 后和 90 后成为消费主力,更多年轻人加入了“菜篮子”行列。由于沃尔玛大卖场门店面积较大,很多人逛着逛着就“迷失”了。为此,沃尔玛小程序专门推出了“找找货”功能,不仅可以帮助顾客在店内快速找到商品所在位置,还能搜索附近门店某个商品的库存情况。更重要的是,通过“扫玛购”和云仓等线上积累的数据,沃尔玛可以更好地进行消费数据洞察,以满足更多顾客个性化需求。顾客浏览了什么、添加了什么、搜索了什么,最后购买了什么,都汇总到数据终端并反馈,帮助沃尔玛更深刻地了解中国顾客的消费行为。

同时,小程序还能够帮助运营部门以更加精准的方式触达用户。比如在 2018年的 8·8 购物节期间,沃尔玛通过“扫玛购”在全国派发 1200 万张电子优惠券,即针对不同用户购买习惯的个性化优惠券。线上派券线下使用的便利性深受顾客喜爱,在 8·8 购物节的第一周,沃尔玛即取得了扫玛购用户增长翻倍的成绩。

越来越多的外资企业认识到,了解中国消费者是多么重要。而沃尔玛通过去中心化,在中国本土寻找更多合作伙伴,一起探索中国市场。这一开放姿态,不仅意味着沃尔玛中国数字化转型的加速,也是对中国零售生态圈和合作伙伴们释放的一个积极信号:一个更加开放的沃尔玛,必将更加适应中国。

3、步步高:以消费者为中心的全方位数字化转型

如今再去步步高逛超市,一些人 性化的购物体验越来越常见, 比如:消费者只需要使用集扫 码购、会员支付码、微信支付等功能于一身的“步步高 Better 购”小程序,通过扫码购物、微信自助收银就能实现即买即用即走,免去排队等待。距离门店 3 公里范围内的消费者,通过小程序线上下单或者现场下单的形式,还能享受到一小时内闪电送达的服务。

借助一系列的数字化工具,步步高正在褪去传统超市的外衣,全面转型智慧零售。两者最大的区别在于从商品思维向顾客思维的转变。用步步高集团董事长王填的话来说,“有了数字化以后,盈利模式会发生很大变化,我们要由以前经营商品的进销差价转变到经营顾客的全生命周期。”这可能是步步高成立 23 年以来做出的最正确的选择。

王填在不同场合都提到过,步步高的核心竞争力要立足于消费者,回归零售业的本质,不断挖掘人的价值。为此,步步高确立了自己的数字化转型战略:商品数字化、顾客数字化、运营数字化,并与腾讯智慧零售达成 战 略 合作, 借助腾讯的入口、数 据、流量优势进行全方位的数字化升级改造,最终目的都是为了上给顾客提供优质的消费新体验。

针对数字化转型的具体路径,步步高有着自己清晰的规划。2017 年步步高构建了数字化的蓝图,即做到顾客、商品、运营的全面数字化。具体来说,借助平台化的数据中台,做到顾客层面的可识别、可触达、可洞察、可服务,商品层面的可描述、可搜索、可跟踪、可预测,运营层面的可量化、可追溯、可评估、有优化。

2018 年是步步高数字化战略正式落地的一年。由于步步高旗下拥有超市、百货、电器城、便利店等丰富的业态,同时各个区域的发展程度存在差异,步步高决定采取稳扎稳打的战术,将智慧零售的各项能力先接入超市业态,等到全流程在超市业态跑通之后,再逐步推广到其他业态。

步步高梅溪湖店超市成为步步高与腾讯合作的首个智慧零售旗舰店。在这家经过改造的门店,数字化的消费场景随处可见。比如顾客只需要使用集扫码购、微信支付、会员码优惠券等功能于一身“步步高 Better 购”小程序,就能做到即买即用即走,购物体验更加便捷流畅。刷脸支付也是一大亮点。顾客可以先对微信支付进行“绑脸”设置,选定商品后仅需在人脸识别自助收银机进行面部识别认证、完成支付即可,无需拿出手机,实现“无停留、无感知”出店,整个过程只用 5-8 秒。购物完毕后,顾客只要在门店的小程序里输入车牌,就可以建立与车辆的导航路线,找到自己的汽车。这家店还开通了O+O 购物配送服务,在距离门店 3 公里范围内的消费者,可以通过线上下单或者现场下单的形式,享受一小时内闪电送达的服务。

小程序为步步高门店沉淀了大量的用户资产。截至 2018 年 12 月 31 日,步步高集团数字化会员 501 万,其中 63% 为新会员。与腾讯携手打造的首家智慧门店“步步高梅溪湖智慧零售旗舰店”,数字化会员破 20 万,首次交易的新客占比 65%, 数字化会员成为拉新客流最强动力。会员销售金额可比增长 53%,会员交易笔数可比增长 64%,来客数增长 130%;会员占比大幅增长,且保持强劲增速。因数字化战略实施的推动影响,步步高梅溪湖智慧零售旗舰店对比去年同期订单增长 20%,业绩增长 27%。

在零售业哀声遍野的时候,步步高选择回归零售业的本质,以消费者为中心展开全面的数字化改造:从会员数字化到商品数字化再到运营数字化。步步高的转型实践给了零售业一个很好的启发:数字化都只是手段,提升消费体验才是最终目的。

4、优衣库:一切以顾客体验为中心数据和技术都要服务于人

在中国,“服装零售”这件事正变 得越来越复杂。尤其是年轻人, 在穿衣打扮上,他们在意品牌, 在意性价比,在意衣服的舒适度,更在意透过服装所传达的个性、爱好和生活态度。在这种“高难度”需求之下,服装零售企业如何洞察并满足消费者的新需求?

作为“亚洲最会卖衣服的企业”,优衣库近年来不断推进数字化转型,成为吃到智慧零售红利的服装企业之一。

最近几年,全球服装时尚巨头们的日子不太好过。在电商的冲击下,GAP、ZARA、H&M 等众多品牌都曾陷入业绩低迷,不得不通过收缩海外市场、减少库存、关店和裁员来平衡利润收入。而优衣库则是一个“特例”。据优衣库母公司迅销集团 2018 财年财报显示,收益同比增长 14.4%;净利润 1548 亿日元,连续 2 个财年创出历史新高。其中,中国市场占比 25%,成为优衣库全球第二大市场。截至 2018 年 12 月,优衣库在中国店铺数量超过 660 家,遍布中国 150 多个城市。

近年来,迅销集团大力推动“有明计划”,这一计划的核心就是配合数字化及互联网时代,变革未来服装零售的消费模式,根据消费者在互联网时代的洞察,更快捷、更聪明、更好地去满足顾客。为此,迅销集团还在仓储、物流、AR 技术、无人、自动化等领域进行了先进的探索。

2018 年 11 月,优衣库推出了“掌上旗舰店 一键随心购”,用户可以从官网、官方 APP、微信小程序和线下扫码购进入。通过“掌上旗舰店”,优衣库有机融合了线上线下的多个场景。消费者可以第一时间看到新品资讯、优惠信息和穿搭建议,第一时间预购设计师款,随时随地一键购买;在线下门店,通过“扫码购”,用户不仅能够了解产品的详细信息,还能查看门店、网店等全部渠道的所有商品库存、颜色与尺码;通过电商购买的顾客可以线上买线下换,也可以选择线上下单 / 门店提货,A 地下单 /B地取货;在社交朋友圈,用户既可以自己分享,也能看到好友推荐的“心水好货”;注册会员,消费者还可以参加抽奖,享受定制数据线、视频网站会员、免费新品体验等会员好礼。

在应用数字化和转型智慧零售的过程中,优衣库非常坚持“工具论”——即数据和技术只是工具,服务于人才是根本。

对每个企业而言,智慧零售的切入点都不同。但优衣库始终坚持,智慧并不是因为拥有了多少数据,或采用哪些高科技,而是来源于品牌、内容、顾客体验等力量。换句话说,技术和数据只是外在,优质的产品和用户体验才是内核。

据麦肯锡《2019 全球时尚业态报告》显示,2019 年,中华区将首次超过美国成为全球最大的时装市场。而数字化也将对行业产生更加深刻的影响。从商业模式到品牌形象,从设计到售卖,各大品牌将在这一年加速自我颠覆。而优衣库的实践则为服装零售企业转型提供了一个重要借鉴:深耕用户需求才是最为实用的方法。据了解,优衣库下一步将继续深入中国二三线城市。在这些城市中,如何触及更多消费者,如何推广主力产品群,如何连接新的生活场景,如何融入不同城市的消费文化及生活方式,将是优衣库面临的新挑战和新机遇。

5、金王:美妆供应链零售业的颠覆、重构和复制

在济南万虹广场的青岛金王“众 妆优选”全球美妆智慧零售体 验店中,前来购买化妆品的年 轻人在收银台前排起了长队。“众妆优选”体验店中品类齐全的全球各大牌零时差化妆品、优惠的价格、年轻新潮的店面风格和令人兴奋的智慧购物体验,吸引着习惯了线上的年轻人们愿意花更多的时间来店里抢购。

万虹广场的这家“众妆优选”是继青岛大融城店后,金王与腾讯智慧零售在2018 年下半年合作开设的第二家线下美妆智慧体验店,这间 200 多平米的店面在去年 11 月开业,1 个多月时间里, 该店新增会员超过 2 万人,截至目前,微信群已达3000 人,线上销售占总销售额的比例一直保持 30% 以上,且客单价和线下维持同一水平。而金王待“智慧升级”的美妆门店,全国还有 9000 多家急需改造升级,线上线下一旦打通,商业机会无限。

传统的零售业面临着成本不断上涨,而流量、坪效、周转率及用户流失及转化率都在下降等诸多问题。不过青岛金王董事长陈索斌认为,这恰恰是零售业智慧化转型的适时机遇,其关键在于借助大数据及数字化工具对用户进行个性一对一精准化服务与智慧零售结合的能力,真正把“经营商品”转变为以“经营用户”为核心的新商业模式。

“众妆优选”体验店内采用进的数字化设备,从各类智能道具到会员人脸识别、检测,以及会员营销精准化服务系统、智能导购等各类黑科技,都能在用户购物的同时提升门店的智慧体验,这成为吸引年轻人到店的利器。针对这些用户,金王利用公众号、小程序以及微信群等多渠道的社交网络进行导流,将这些用户沉淀并转化为数字化会员,在完成基本数据画像后,再对会员进行一对一的精细化随时服务及运营,通过腾讯各平台的工具,增加用户触点时长和场景,实现用户全生命周期的管理,进而提升转化和复购率。

“举例来说,你在店内购买过一盒面膜,一个月后预计你面膜用完了,我们根据数据画像,可能向你推送更适你肌肤在这个季节的冬季面膜产品,又或者数据显示你不需要的面膜,和建议你近期不要使用那些产品,我们会精准推送给你建议,在收到推送后,你可能选择到店购买,也可能在线上店购买,无论哪种消费行为,你选择的通过线上线下都可以,因为从供应链源端货到零售都是我们提供服务的过程,这就实现了线上线下的一体化精准服务及运营。”

在金王合资及股东的 9500 家线下门店中,导购的总数近 10 万人,金王将企业微信应用于这些导购和社群中,即便导购离职,他若还能带来销量,也能继续获得奖励分佣,企业资产依旧存在,各方都乐见其成。基于这 10 万导购的的流量运营,诸如拼团砍价或者秒杀等活动,其在社交平台所产生的裂变效应十分惊人,社交立减金的初期测试数据显示其核销率高达 35%。

这些针对用户的立体化触点服务与管理的智慧化尝试在众妆优选体验门店中得到了初步的验证。眼下两家店的线上销量占比都保持在 30% 的水平,未来,陈索斌希望这个比例能更高。“因为线上是增量,所以线上目标未来远不止 30%这个比例。”

不过陈索斌认为,还需要耐心等待继续打磨的整体解方案,“我们最终是希望用户能享受性价比最高的商品和精准服务,但现在还在试错的阶段,还没有到说成绩的时候,希望到明年的这个时候,我们再用实际数字来证明我们的智慧化精准化服务转型是成功的。”

三、无摩擦商业时代,零售业如何加强个性化服务?

在当今这个由算法决定的商品社会,企业一方面要进行数字化转型,拥抱智慧零售;另一方面必须打破算法的桎梏,找到新的“摩擦力”。“智慧零售”,就是在产品、服务和用户需求之间,重新建立“摩擦力”的方法之一。

从电商时代起, 技术一直都在致力于把人们购 买 商 品 的 阻 力——即“摩擦力”消除掉。 随着数字技术和零售逐渐融合,消费者购买商品的“摩擦力”越来越小,零售逐渐进入了“无摩擦商业”时代。在智能手机的作用下,消费者几乎所有时间都“在线”,可以随时随地完成“购买”这一动作;在线上线下,消费者成为了新的商业节点,并与更多的品牌及个人实现了“超级连接”;而在终端,“算法”决定了人们在线看到的所有商品,并对消费者的最终购买产生直接影响。

无摩擦商业的终极体现是:对各类数据(比如已知偏好、先前行为、传感器数据等)进行实时结合,并在事先征得消费者许可的情况下,利用数据代表消费者自动发出购买指令。想象一台“智能冰箱”,它一旦感测到冰箱里的某种食品所剩不多,就会自动下单。对于零售企业来说,要想重新获得品牌“摩擦力”,必须从数据入手,提供个性化的产品和服务。

在无摩擦商业中,零售主体如何打造新的竞争力?首先,企业应该把注意力从渠道策略转向以消费者为中心的销售模式。数字连接似乎让各个销售渠道变得难以分辨。因此,与其耗费资源去了解渠道模式,倒不如把更多的资源投入到消费者洞察,包括内部组织资源的投入,数据获取渠道资源的投入,分析数据获得消费者洞察方面资源的投入等。

其次, 重新定义目标市场。如今,价值观在消费群细分模型中扮演越来越重要的角色。人口统计数据将逐渐被“性格统计数据”所取代——也就是说,未来的消费者决策模型将以定义明确的消费者群体作为根据,而各个群体的个体消费者的需要,则要用心理科学、人类学和社会学统计数据进行识别。为了转变细分模型,公司必须先了解个人消费者消费行为的变化,然后利用先进的技术来捕捉新兴群组的共同需求和偏好。

第三,成本是个性化产品和服务的最大挑战 ,而“规模化生产的个性化产品或服务”则是应对挑战的解决方案。数据是通向个性化消费的必然之路。但拥有大量消费者数据并不值得自满,具备更高级、更快速的分析能力和反应速度才是关键所在。同时,同伴影响力是一股正在增长的力量。消费者在哪里花钱、被什么品牌吸引,都是由它决定的。传统观念上的消费者权利来自于财富,但如今它却更多是来自消费者社群。这些社群由兴趣相同的人组成,而其人口结构也是由社群自己选出来的。

现在,一个有说服力的人能够相对轻易地改变品牌的命运。KOL 变革越来越重要,越来越多的“微影响者”(即与更细分群体有更亲密互动的 KOL)出现。亚马逊的创始人杰夫·贝佐斯指出 :“在线下世界,如果一个客户不满意,他会告诉 6 个朋友。在互联网世界,他会告诉 6000 个人。” 消费者之间的超级互联大大提升了影响力模式的重要性—— 个人的声音通过网络放大,进而影响市场动态。

因此,我们建议企业在增量市场侧重于吸引潜在消费者为自己的客户,而在存量市场则要经营好已有的客户群 ,以提升品牌忠诚度。不要再停留在舒适区,更不要自以为你的品牌有多强,客户忠诚度有多高,当前业务有多成功,因为现在品牌最大的敌人就是自满。

凭借电商和移动支付的快速发展以及BATJ 等互联网大平台的积极推动,中国已经在相当程度上迈出了无摩擦商业的重要一步。在线购买比例在国际高居前列,消费者持续在线时间超过 50% 等。相比其他国家,中国消费者对社交媒体中所出现的品牌植入、品牌广告接受程度极高。其中,年轻一代消费者对此类营销信息态度较上一代更为开放、正面。 研究还表明,互联网原住民和千禧一代在生活中的很多方面是可以追踪的,他们也更愿意分享自己的数据。但前提是,能通过数据提升自己或获取增值服务。其中,中国消费者的数据分享意愿最高。

值得注意的是,针对中国市场的调研表明,中国年轻一代消费者对本土知名品牌的喜爱度正逐渐超过国际品牌。互联网原住民(95 后)中的 71% 对本土知名品牌的信任度上升,57% 对国际大品牌信任度上升。这是本土品牌崛起的重要信号。对于中国企业而言,获取年轻一代消费者的喜爱正是最好的时机。

智东西认为,新的零售格局之下,了解消费者全方位、多场景下的个性化需求,是决定零售企业能否在未来占有一席之地的核心所在。因此,建议零售企业从以下三个方面做好准备,“智”胜未来。首先,以线上线下融合,建立流量壁垒。其次,以赋能合纵连横,构建生态平台。第三,以数据重塑管理模式,革故鼎新。未来,企业的核心价值将从最初的交易价值,转向通过交易价值和数据价值获取现金及利润,并最终形成以数据价值与衍生价值为利润核心。“智”胜未来将是每一个零售企业都需要面临的重要抉择。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

设计思维工作坊—头脑风暴法

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在我们的设计工作当中最不可缺乏的就是创意了,那这种创意是从何而来呢?当我们拿到一个项目时最熟悉不过的流程的就是小组讨论,那小组讨论中占据大部分的就是“头脑风暴”了,我们先来系统介绍一下头脑风暴。 

【一】什么是头脑风暴法?

头脑风暴法(Brain storming), 该方法主要由价值工程工作小组人员在正常融洽和不受任何限制的气氛中以会议形式进行讨论、座谈,打破常规,积极思考,畅所欲言,充分发表看法。它最早是精神病理学上的用语,指精神病患者的精神错乱状态而言的,如今转而为无限制的自由联想和讨论,其目的在于产生新观念或激发创新设想。 

 

【二】头脑风暴法的组织形式

1)设主持人一名,主持人只主持会议

2)设置记录员1-2名,要求认真将与会者每一设想不论好坏都完整记录下来

3)小组人数一般为6-10人

4)最好由不同专业或不同岗位者组成

5)时间一般为20-60分钟;(发散/收敛/整理3回合)

主持人和主持的注意事项:

1)提前了解会议主题及可能的引言内容

2)控制好自己主持人的气场

3)控制好时间

4)照顾好每一位成员;让每个人都能发言

5)引导会议流畅展开

6)保持团队积极参与气氛

7)适度延伸发展发言者的想法

8)随机应变   

【三】头脑风暴法遵循的主要原则

       (1)自由奔放思考

         

       2)不批判

         

       3)以量求质

         

       (4)搭便车,想法无专利

        

焦点时刻: 

      蓝蓝设计组织部分小组成员以“如何成为一家很牛的UI设计公司?”为主题进行了一次头脑风暴活动。我们将过程做了一下梳理。 

   (1)主持人引言之后,与会者每个人进行了积极地思考并将想法写在便利贴上

        

   (2)每人根据自己的想法畅所欲言,并延伸其他人的想法。

   (3)将便利贴适度的分类整理。

        

   (4)最后我们整理出来了结果(wow!/有了更好/基础的     

     

             



总结: 

脑力激荡并不是为了提出主意让他人去评估和选择。通常在最后阶段,本组成员会自己评估这些主意并从中挑选出解决问题的方法贯彻整个解决方案的每一步都必须对小组成员透明,并有责任分配给每一人以便他们在其中担任重要的角色。在项目还未明朗时,必须有一个共同的决策过程来推进协作努力的成果并对任务进行重新分配。在重要转折点上,需要有评判标准来决定小组讨论是否朝着最终的答案行进。在整个过程中需要不断的鼓励,以便让参与者保持他们的热情。

 通过这个过程,员工的亲身参与,对“很棒的UI设计公司”的定义,再落实行动,向着WOW的方面努力!

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

不会做插画banner? 请用DIY时尚人物素材

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

不懂手绘,但又想做插画风格的Banner?那就必须看看今天分享给大家的 humaaans 人物插画素材库,它由 Pablo Stanley 设计师设计,是一套符合现代扁平化设计风格插画素材,而它最大的特色是组件化绘制,用户可通过素材库的元素自行 DIY 成不同形象的插画,适用于网页、移动UI、以及 PPT 等用途。

DIY插画介绍

目前该素材包含有人物及场景元素,但最多的是以人物为主,包含有不同的头像、服饰、袜子,让用户能自由 DIY,就像下面演示图一样:

如果你是 Sketch 的用户,还可能利用 Sketch Symol 功能来款式,更加方便。

没有 Sketch 软件也不用担心,设计师将每个元素导出成 PNG/SVG 格式以及@2X大小版本,SVG 也是矢量格式,所以用 Photoshop 或 Ai 去自己 DIY 就行。

注:如果 Sketch 版打不开,通常是因为你的版本过低造成的,只要更新新版本就可以了。

还有几个场景可以切换:

humaaans 的设计元素包含男女生头像和服饰,个个都是年轻貌美啊,穿着都非常时尚呢……

这素材能用在什么地方?

网页 Banner:

这么漂亮的时尚的插画,不用在网页上就是浪费啊,但不建议直接使用,要要学会怎么去 DIY,通过设置大小、比例、旋转以及更改成和你界面一致的配色,让 UI 统一这样才算完美哦。

APP 启动界面

做移动端的引导页也很好看。

插画海报:

做一个这样的贺卡、海报是不是也很 Nice?

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

网易严选的插画是如何绘制的?设计师用了这个流程!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

插画在中国被俗称为插图,有着非常悠久的历史,最早在佛教文化中出现,以「变相」图解宣传佛教教义,如今一般指为企业、产品、服务所绘制的图画的一种艺术形式。作为现代设计的一种重要的视觉传达手法,插画以其直观的形象性,真实的生活感和美的感染力,广泛应用于现代设计的多个领域,涉及到企业宣传、社会文化活动、影视文化等诸多领域。

插画一方面富于灵活表现,可根据设计师思维和想法进行各类创意,适用于各类视觉主题,另一方面又与严选简约、精致的品牌形象契合度较高,因而是严选专题设计的一个主要表达方向,经常在严选各类专题设计中得到应用,受到广大用户的喜爱与推崇。

许多刚入行的视觉设计师认为插画风格专题设计需要非常专业的插画功底才能完成,因而尽管觉得插画风格专题唯美、形象却敬而远之不敢轻易尝试,今天个人从以下五个步骤去解构插画风格专题设计,通过相对简单易学的基本操作,让没接触过插画风格的设计师也能轻松驾驭与运用。

严选插画风格设计五部曲

整体构思

和所有风格的视觉设计一样,插画风格设计首先也需要进行整体的需求分析,主要进行以下方面工作。

1. 分析受众与目标

首先需要对专题的受众进行简单的社会化分析,通过分析大体了解受众的年龄层次、收入水平、审美品味、兴趣爱好等,根据社会化特征信息建立用户画像,有利于设计方向与基调的确定。比如严选的目标用户定位于20-35岁,具有稳定的工作与收入,追求高品质生活的都市白领。

其次需要深入分析专题所需要表达的目标和信息,通过色调、版式、字体、元素等设计手法准确传达信息内容的同时,带给用户更多美的感受,升华主题思想,强化品牌概念与服务。

2. 确定情感关键词

所谓情感关键词,就是我们产品的视觉所要表达的情感感受,比如情人节专题确定的「浪漫」、「温馨」、「甜蜜」,新年专题的「喜庆」、「欢快」、「热烈」,父亲节的「责任」、「担当」、「感恩」等等。确定好专题活动的关键词后,将有助于我们进行整体风格的把握与塑造。

3. 整体意境构思

确定好专题的方向后,接下来就可以构思整体的意境以及挑选合适的素材,如新年专题我们会想到用大面积红色作为主色调的布局,结合鞭炮、春联、灯笼、年画等中国传统元素,通过合理的组织和编排,加上中国风的字体设计与适当的细节完善,共同勾勒营造一派喜庆祥和的气象。

提取轮廓

基于前一步骤的构思的整体意境,我们需要对挑选的现实素材进行插画化改造。通常我们通过鼠标勾选的形式,将素材的轮廓勾勒出来并填充相应的颜色,使写实的风格形象化、概括化和扁平化。

简化图形

插画风格相对实物风格,去掉了大量的写实细节,只保留主要的特征信息因而显得扁平简约但不失形象生动。因此在这个步骤我们需要将勾勒好的图形进行简化操作,以简单图形代替写实描绘、多以面和色块去代替原有的细节,简化后的图形具有高度的概括性。

完善细节

除了保证插画的形象性与直观性外,我们需要进一步对素材进行细节上的完善,以满足进一步的审美性与趣味性,同时赋予元素一些创造性,可以尝试通过以下方法进一步完善。

1. 移花接木

移花接木指将现实中不同时间和空间各类元素进行解构和重组,创造出一些妙趣横生的新事物,增加插画内容的趣味性。

2. 区分主次

将重要的、核心的元素进行强调刻画、次要的元素进行弱化处理,从而拉开主次元素的层次关系,使画面更加具有层次感和空间感。

3. 突破现实

通过调整元素间的比例关系,夸张的创造现实中并不存在的事物,更加容易吸引用户的目光焦点。

优化整体

经过以上的步骤,我们的素材基本已完成插画风格的改造,但插画素材在整体专题界面中并非孤立的存在,而是和整体色调风格、版式、字体设计形成一套有机和谐的整体,共同去呈现专题需要表达的信息与目标。

案例分析

1. 千万和春住专题

整体构思

情感关键词:清新、唯美

整体意境构思:以嫩绿色作为主色调,结合桃花、阳光、汽车、风筝营造轻松出游踏青的欢快意境。

提取轮廓

从田野、桃花等几张现实图片中将页面需求的主体元素进行提取,作为背影进行主体页面的大面积辅色,将整体的色调感觉搭建出来。

简化图形

初步提取的轮廓由于过于具象,与唯美的主题风格不太协调,在这一步我们将主体元素进行简化处理,用圆润、可爱的几何图形加上明快的色块去代替树木,整体更加扁平、卡通化,营造更加轻松、自由的氛围。

完善细节

为了更好的体现春天外出郊游的意境,我们对细节进行完善,增加了汽车、风筝等小元素,将桃花进行树枝刻画、太阳光芒的刻画等处理,同时将远处山景进行虚化,形成层峦叠障的连绵山脉,拉开了画面的层次空间。

优化整体

最后我们根据主题进行专题的字体设计,将常规的宋体进行变形处理,部分笔划好似春风轻抚而飘逸,又加上了象征春天生机勃勃的嫩芽,富有生活趣味。通过一片桃花作为主体分别呈放若遇到新欢、若重拾旧爱的对应专题好礼,使页面整体和谐统一。

2. 爱恋物语专题

目标:呈现出情人节情侣间的爱情的甜蜜与浪漫。

情感关键词:浪漫、甜蜜

整体意境构思:以甜美暖色作为主色调,通过主体元素礼物盒与情侣间夸张的比例关系抓住用户眼球,浪漫甜美同时不失趣味性。

3. 新春集市新年专题

目标:呈现出春节喜庆热闹与琳琅满目的商品。

情感关键词:喜庆、热闹

整体意境构思:以中国传统舞狮、牌楼、鞭炮等作为主体元素,谷仓作为次要元素,前后对比主次分明、空间感强,呈现了新春集市的纵深与五谷丰登的产品,整体氛围热烈喜庆,激发用户的购买欲望。

总结

插画风格的表达,既遵循着艺术设计的通用规则,又具备自身独特的审核特征,需要设计师更多去发现生活中的美,通过以上五部曲将生活中各类元素进行不断的重组、创造,在专题中进行特有的形象性、生动性、趣味性、创造性的艺术表达,从而丰富专题内容,更好传达专题思想。

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

过稿神器-动效视觉的影响力

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

老话说得好,人靠衣装设计靠包装。无论你是UI设计师/UX设计师/App独立开发者,一个好的展示模板能让你的作品瞬间提升气质,在交稿时俘获甲方爸爸躁动的心。

今天神器小分队带来的这个神器,可以帮你快速生成UI界面的3D展示效果;无需学建模、无需学AE,只需要简单几步,就能产出堪比苹果宣传片的展示动效,简直方便到没朋友。

DesignCamera

下载链接:https://www.designcamera.app/download

△ Howard Pinsky@Pinsky

△ 官网演示

首先,点开软件下载主页→https://www.designcamera.app/download

打开网页就能看到这样的界面,非常简单,点击右上角的「Download」即可下载软件包。

解压后直接就是 Design Camera 的应用程序了,双击打开即可。

软件的界面也非常简单:

一时间记不住这么多控件?没关系,跟着木木玩一遍就学会啦~

入门玩法:一键拖拽,平面变3D

只需要将图片素材(支持JPG和PNG格式)拖入 Design Camera 的样机内,就可以直接获得一个3D模型。

可以修改阴影、背景颜色(包括透明背景)、机身颜色以及环境。

除了可以点击上方的预设切换显示,更能自由点击拖动改变3D模型的角度。

其中,按住「Alt」键时,鼠标滚轮为缩放,点击拖动为平移。

完成修改后,只需要点击最上方的「Snapshot」即可获取一张3840×2160分辨率的Png。

特别注意的是,右下角的缩略图是可以直接拖拽进软件中作为素材的。

基础玩法:视频展示也能一键3D

同理,只需要把视频素材拖进 Design Camare 的模型里即可,上述的参数均能修改。

完成修改后,如果觉得不够丰富,还可以打开动效栏,点击上方的「Live capture」录制视频;接着只需要在「Presets」里选择喜欢的动效,然后再次点击「Live capture」即可完成录制。

点击下方的「Export Mov」就能获得一个mov格式的高清视频(最高支持4K)。

当然,你也可以选择安装之前美丫姐推荐过的Gifski(Appstore下载,快速视频转GIF,可调整帧数画质),与Gifski 联动的 Design Camera 能在你点击「Gif」时快速启动Gifski,帮助你一键转动图。

进阶玩法:自定义动画

除了上述的预设动画以外,Design Camera还支持自定义动画,操作起来也是很简单。

只需要你选择几个关键帧,它就能自动为你添加酷炫到没朋友的缓动动画。

木木随便设了3帧,再随便点击关键帧,大片即视感的展示动画就做好了。

高级玩法:连接苹果手机,实时动效展示

看到界面左上角的这个充电线标志了吗?

当你的电脑插上苹果手机,它就会变成这样:

然后你就可以直接在 Design Camera 里看到手机界面的操作,再加上动效。非常适合App展示和游戏展示。

大神玩法:导入Sketch,一键变多维3D

只是简单的动效怎么够?Design Camera还支持 Sketch文件导入。

首先,打开Sketch文件和Design Camera,然后全选已经分好组的页面,快捷键「Ctrl+Alt+E」,就能一键导入Design Camera了。

分组会直接影响空间感的效果哦~

接着,我们可以在「Lens」中为模型加入一些摄影景深的感觉,让它的空间感更强烈一些。

勾选「Focus Blur」,修改焦距等数值,鼠标点击处即为焦点所在。

用改变焦点的方法,创建不同的关键帧,超强的空间感动画就做成了。

Design Camera 操作简单易上手,几秒钟的拖拖拽拽,就能实现苹果宣传片级别的流畅展示动画,简直太良心了。

目前,Design Camera正在开放公测,是免费直接下载使用全部功能的。机不可失时不再来,心动的小伙伴赶紧用起来吧。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

版式设计里的「张力」是什么意思?今天帮你解答!

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

 

本期给大家带来的内容是关于视觉张力的应用技巧,听到这个词也许会给人一种云里雾里的感觉,我们在日常工作中也总会听到这些「视觉张力」「视觉冲击力」「视觉重力」等等专业词汇。那么这些带有视觉前缀的力学词到底是什么意思呢?今天我们来一起分析一下这其中的「视觉张力」,看它在版式设计中都起着哪些作用。接下来让我们一起学习今天的内容吧。

何为张力

首先我们来了解一下张力的概念,从百科中的解释可以初步了解到,张力是物体受到拉力而产生的牵引力,这么说是不是还有点晕?

通俗一些解释,可以将它理解成在拔河时绳子两端受到的左右拉力,我们看整个画面在视觉心理上产生了一种向左右扩张的感觉。

就像上图中的气球一样,内部充气后产生了向外膨胀的扩张力。外部的包裹部分也同时向内产生收缩的力,从而产生了一种相互制约的紧张感。

在艺术和设计以及文学领域中,视觉张力这个词也经常用来形容和谐与冲突之间的强烈对比,它是一种经过美学经验与审美倾向后的主观评价。

原理与解析

今天我们不讲那么深奥的直觉式感受,而是从平面构成的角度来深度解析视觉张力在版式设计中的作用,客观的了解康定斯基在其著作《点线面》中所提及到的视觉张力理论。

支撑起我们身体外形的是藏在内部的骨骼部分。而在版式设计中也同样需要支撑起整个版面的骨骼元素。

新人设计师经常会出现的问题就是会把整个版面填充的很满,他们认为这样能让版面变得饱满。但事实上这样并不能解决什么问题。

我们需要转换思维模式,客观的重新认识版面中元素起到的作用。

从构成的角度说,版面中只要出现一个很小的点就已经足够吸引观者的注意力了。点是视觉力量的中心,它在版面中能够产生占据空间的作用。

当版面中出现两个点元素时,我们的视线会下意识的在他们之间形成一条隐形的线,即使他们离的很远。正是由于存在着这条无形的线段连接,才让两个点之间产生了关联。包括两点之间的空白区域在内,它们都会被看做一个整体。

当版面中出现三个点时,我们在心理上便会自然形成一个负形的三角形,它与背景之间会形成图底关系,点与点之间的距离决定了这个三角形的大小。

同样的道理,当版面中出现四个点时,矩形的负空间与版面形状产生了呼应。四个点之间的内部会形成一个假想的视觉面积,点与边界的距离也为我们定义的版心的大小,这也是版面中张力的主要来源。

点具有相互连接的属性,当很多个距离相等的点占着水平方向排列会产生线段的印象。

而一个阵列的点相互连接就成了一个面。

举个比较常见的例子,段落文字就是由许多个点组合而成的面。

古人为了记忆天空中的星象,会将相邻的星星连接起来,就像图中的北斗七星,通过同形联想,它就像是一个勺子。人们就是通过记忆勺子形状来找到北斗七星的。

西方的星座也是同样的道理,将相邻的点连接形成对应的图案,最终形成我们现在看到的星座图形。

当版面中只有两个点时,我们可以得到的信息只有版心的宽度距离,而想要得到一个完整的版面。我们还需要一个确定高度的点才行,通过这三个点的位置来脑补出整个版心的张力大小。

也就是说,想要达到支撑起整个版心的目的,版面内最少需要三个支撑点。

这种脑补的原因来自于视觉的闭合心理,我们会将那些区域闭合的图形自动视为一个完整的内容,就像图中的图形。通常人们会认为他们是三个完整的组,因为括号内的距离更接近,那么事实上真的是这样吗?

实际上六组图形的物理距离是完全相等的,之所以会产生括号外大于括号内的错觉完全是因为视觉心理在作怪。

到此我们可以大致总结一下版面中的张力是怎样产生的,以版面的四角作为支撑点,在这一基础上,如果还有剩余的元素可以编排在垂直与水平的位置上。这样整个版面就被支撑起来了,形成了一个完整的面积,给人传达出了饱满的视觉印象。在实际编排中由于层级的介入,版面中的元素并不一定都是等大的,同时随着主体轮廓的不同,也会形成绕排等不同位置的结果。但万变不离其宗,版面中每个元素的聚散离合都会影响到整个版面的张力大小。

案例解构

这个版面主要运用了点的分散和连接作用,点与点之间虽然面积较远但是依然在视觉上会被看成一个整体,其余层级的内容则是以线的形态出现在版面中。经过解构我们可以看出,版面中的张力主要来源于版心四角的位置,这个版面是通过四个点支撑起来的。

接下来看这个版面,首先我们标示出人物的面积,随后是山峰的面积,文字以点的形式分散于版面中。由于点与点之间的连接作用,我们可以将其看做四条竖线。而线与线之间相连就成了一个面,这个版面主要起到支撑作用的是边缘的三个点。

对于这个版面来说,与之前的版面相比,版面中元素并不是等大的。它的元素分布情况大概是这样的,接下来我们标出它的版心大小,可以明显看出这个版面中起到张力作用元素主要有三个,而其余的元素则分布在版心的内部空白位置。

从元素的排布上看就基本可以得出版心的大小了,元素之间通过对齐与扩张,形成了一个方形的面积,版心的四个角落都有支撑点。

我们再看这个版面,它由一个主体,和两个文字组以及 logo 构成,这是一个典型的由三点支撑起来的版面。

这个同样是由三个点支撑起来的。

这个版面经过结构可以很明显的看到,元素分散到版面的四角,形成向外扩张的结构,其余信息放置在空白位置。

这个版面较之前就要更复杂一些了,来看一下它的结构,标出版心后可以看出元素基本上是围绕着版心的大小进行排布的,左下角为了增加元素的张力作用,依然采用了三点的分布方式来占据更大的空间面积,从宏观角度来说版面依然采用了三个点的骨骼结构。

这个版面,可以看出版心采用了四个点来支撑,剩余两个文字信息分布在版面的水平方向,就是图中标注成蓝色的位置。

这个版面中出现了带有出血的元素,看一下它的版心和元素的构成情况,采用了四个点的出血结构。

这个版面的变化性相对难度更大,我们来看它的构成结构,可以看到整个版面大致分为两栏,左侧小栏和右侧大栏内的元素编排都采用了三大支撑点来产生版心的张力效果。从整体的角度观看版面,也会得出同样的三点支撑版心的印象。

这个版面中,主体的形状变化较强。除编排在四角的元素外,其余元素都采用了绕排的呼应形式安排在了空白位置上,整体看去采用了四个点来产生张力作用。

这个也是一样,采用纯文字的版面编排,占据四个角落,其余元素编排在空白位置。

这个呢,版心的张力主要来源是四个角落的元素位置。

我们来总结一下,当版面底部已经有一个很大的图像或者文字时,版面顶部只要有一个元素就可以撑起整个版面的张力。

顶部也可以是两个元素来同时产生张力作用。

对于主体位于中心位置的版面,我们最少需要三个点来起到支撑版心的作用。

这里也可以是四个点来描述版面的张力大小。

此外,如果这时还有其余的元素需要添加,可以添加到垂直和水平的空白位置上。

接下来我们拿这个版面来进行举例,中心的圆形是版面中最大的元素,被编排到了版面的正中心位置。

随后出现在版面中的是四个角落的文字元素,它们的出现加大了版心的张力大小。

随后,其余的文字信息被编排到了版心的垂直和水平的位置并贴近版心的边缘。

接下来在垂直位置添加装饰性的点元素来起到占据空间的目的。

最后在版面的空白处继续添加其余的文字信息,这个版面就基本上变得非常饱满了。

接下来我们看一下它的元素构成结构。

并不是只有文字的位置才能起到加强版面张力的作用,换成图形和图像也是同样的道理。我们看这个图,将周围的元素去除后,版面中原本热闹的氛围消失了,版面占据空间的张力也随之变小了,但绝对不是说底部的版面就是不对的,一切都是根据项目的定位来判定的。

这个版面同样具有热闹的节日氛围,去掉周围的图像元素后,明显变得冷清起来,版面的张力也随之缩小了很多。

这个版面也是同样的道理,去除周围的元素后,版面的视觉张力缩小了,与之前相比缺少了冲击力,变得安静了。

这个版面因为点元素的出现,整体给人的感受非常饱满,将点去除后,原本被占据的空间变小了,明显没有之前的版面具有视觉张力。

案例演示

这是广告牌,投放尺寸主要设定在一个人能够近距离观看的大小,也就是说版面中可以出现一些比较细小的文字。

(这里需要特别提醒的是,在实际应用中如果广告牌挂得比较高,就需要根据实际情况来调整最小的文字字号了。否则说明文字的出现也就没有实际意义了。)

接下来我们来看一下文案内容,一个航拍无人机的宣传广告,含有品牌的标志和文案以及图片信息。

根据文案信息,我们给项目添加气质关键词,及表现出科技的领先感,同时因为产品属于亲民定位,我们还需要加入具有轻松与温情的气质。主视觉决定采用文字为主强调产品名称,加入文字并放大成为版面中最大的面积。

这里需要注意的是,这个文字的外形轮廓给人一种浓厚的历史气息,就像演员走错了片场,完全与我们的定位不符。

换成无衬线体后,明显觉得好多了。但是还是觉得哪里怪怪的。原因在于它的外形没有给人很特别的印象。从「S」的收口处可以明显看出切割感很强,缺少一些书写的痕迹,整体显得有些平淡无奇。

这个字体大体感觉上还不错,带有书写感的曲线,几何形的外观似乎都很符合定位。但作为版面中的主视觉元素似乎还少了点装饰感。

最后选择了这个字体,同样具有书写感的曲线开口,带有几何特征的外形以及类似电路排线一样的装饰结构。

色彩方面采用橙红色作为主色调,烘托亲民的色彩氛围。接下来将产品叠压在文字之上,加强版面的层次感。

为了继续加强版面的中层次变化,我们在文字与图像之间添加阴影,细节决定成败,一个简单的阴影也是需要体现出层次变化的。从模糊到清晰,从暗淡到浓重的变化都是塑造细节的关键,这里为投影添加三层强中弱的变化,这样一来,阴影部分的刻画就完成了。

与之前相比,添加阴影后的画面在视觉层次上要更丰富一些。在视觉表现上也更立体。

最后我们将文字信息划分好层级后一次添加到版面中。这个画面就完成了。主体位于版面的中心位置,其余信息分布在版面四周,形成向外扩散的视觉张力,一共使用了三个点元素来支撑版心的大小,剩余的文字信息则添加在版面底部的空白位置。

我们试着将信息全都集中到一起会怎样呢?

可以看到,版面中元素全都集中在了版面的中心位置,这使得原本占据整个版面的视觉张力变小,版面的两端会显得很空旷,相对于之前的版面来说变得没有那么饱满了。这种情况下,也可以采用添加图形元素的手法来填充版面两端的空白处,让画面变得热闹起来,增强版面的动感与活力。

这里我们添加一些抽象的气泡元素,为版面添加一些概念性的印象。添加元素后,新的问题又出现了,由于两侧的元素仅作为装饰出现,但是目前的视觉又显得比较抢眼,这就有些干扰到了主视觉的层级地位了。

那么解决这个问题的方式也很简单,就是弱化掉两端的气泡元素,让主视觉与装饰元素之间的层次更分明。经过弱化处理后,这个版面看上去就舒服多了。这里需要注意的是,气泡的虚化程度也同样遵循了强中弱的层次变化,这样的处理也进一步加强了整体的视觉纵深感。

经过圆形气泡的填充后,版面的张力恢复到了之前的大小。整体给人更加饱满的视觉印象。

今天我们一起学习了视觉张力在版面中的应用技巧,一起了解到了图像与文字在版面中不同位置所起到的作用,也讲解了版面的骨骼是如何构成的,希望我们的内容依然能够对你有所帮助。

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

那些好色之徒,都做过这些训练之创建配色体系2

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

其实根据我的从业经验来看,如果想真正的了解色彩,就需要一套非常完整、系统的训练方法。可能很多人包括我自己,一开始都对这些训练不以为意,认为直接学习配色理论或方法不是更好么?为什么还要做这些色彩训练呢?认为这些训练没有意义,甚至有的人会觉得是小孩玩的游戏。

但殊不知其实我们每个人的色感,正是在儿童时期形成的,因为儿童时期的认知更加纯粹,对于色彩的想象力以及受到的限制要比成人少得多,所以赋予色彩的深度和广度也就比成年人更加丰富。

这也是为什么很多人看到小朋友的绘画,会觉得他们很有配色天赋了。

所以我们要做的就是打破对色彩的固有认知,让自己回归到一种单纯的状态,来重新认识色彩。

比如现在给你一个苹果,可能我们的第一反应就是直接把它吃了,事后要你回忆对苹果这个物体的印象,也许你体会的并不深刻。

而如果我们改变条件,假设你从未见过苹果,这一次你不仅要吃掉苹果,还要说出你的感受。

根据你的五官对其进行认知,这时你对苹果的体会将和前一次大不相同。

比如通过视觉我们可以看到绿色,通过嗅觉可以闻到果香,通过触觉可以感受到坚硬,通过味觉可以品尝到酸甜,通过听觉可以听到清脆声。

而重新认识色彩也是同样的道理,就像我们从未见过苹果一样去体验一个假设我们从未见过的色彩,然后通过不同的角度去对色彩进行拆解,最后组合在一起形成属于我们自己的配色体系。

赋予色彩名称

创建个人色彩体系的第一步,就是为色彩命名。

比如我们随便找一个颜色,就拿这个黄色来举例。

根据自己对这个色彩的感觉来命名,可以随意发挥,你想到什么就可以说什么,没有限制。

比如从最基本的色相角度出发,我们可以叫它鲜黄色。

根据这个颜色我们可以联想到向日葵,所以也可以命名为向日葵。

我们还可以联想到月亮,所以也可以起名叫月亮黄。

那我们还可以联想到《变形金刚》里的大黄蜂,所以也可以给这个颜色起名叫做大黄蜂。

还能联想到麦当劳的阳光橙,所以也可以命名为阳光橙。总之当你看到这个颜色时,脑海中能够联想到的词汇都可以使用,哪怕是跟这个颜色相差很多也没关系,最重要的是你自己的感受。

对色彩进行理性分析

对色彩进行命名之后,第二步要做的就是对色彩进行理性分析。

我们还是拿这个颜色来进行练习,先来找出它的色相、明度和饱和度。

首先根据色相环的大致位置,确定这个色彩的色相。

然后通过纯度和明度的调整来找到与右侧颜色相符的色值,这里我们得到了一个数值。

然后用吸管工具吸取右侧的黄色,得到的结果和我们猜测的做比较,只要结果不是相差很大都是可以的,如果相差很多那就说明你对色彩的敏感度还有欠缺。

HSB色值猜想完之后我们再来看看它的RGB色值。

根据RGB原理很明显黄色是由红色和绿色混合得到的。

但是我们对比来看很明显这两个黄色还是有差别的,所以还需要进一步分析。

我们调出RGB色相环,我们看采样的这个黄色是偏向红色多一些还是偏向绿色多一些,很明显是偏红一些,因为它比较偏橙色。

所以我们就可以适当的减少绿色的成分。

我们来看一下对比,已经接近了。

最后我们通过RGB色值来对照一下,虽然红色和绿色的色值相差不多,但是我们采样的颜色中还有少部分蓝色,肉眼其实很难看出来,但是我们可以自己去模拟一下。

这三个成分的三原色混合之后,得到的就是我们采样的颜色了。

△ http://www.rgbchallenge.com/

如果想提升对RGB的敏感度,可以通过这个小游戏来练习一下。

玩法很简单,根据画面中给出的RGB色值来选择你认为相对应的颜色,选对了继续下一关,选错了GAME OVER重来。

接下来我们来看CMYK色值。

黄色是CMY其中的一个原色,所以首先黄色肯定是最多的。

对比来看一下,很明显采样的黄色中还有其他颜色成分。

我们调出CMYK色相环,同样也是看采样的黄色偏向哪个方向,也是偏红色多一些。

所以我们得到这个颜色中需要加入红色,但是应该加多少呢?

这里我们加入了20%的红,同时将黄色的含量降到80%,这个是根据经验和感觉来的。

这时将两个颜色对比来看一下,已经相差不多了。

最后通过数值来比对,可以说几乎已经很接近了。

只不过采样的颜色中还带有少量的青色,但是影响不大。

然后我们再来看看色调。关于色调这种老生常谈的问题这里就不多讲了,因为之前我专门写过一篇关于色调的文章《高手的平面课堂!最容易上手的配色方法》,里面已经讲的很详细了。如果你看过这篇文章,那么当你得到了一个颜色的CMYK色值时,就已经可以判断出是什么色调了。

如果没看过也没关系,我带大家来区分一下,白色和纯色之间是明色和淡色,纯色和灰色之间是浊色和淡浊色,纯色和黑色之间是暗色。

将这些代表性色调提取出来一比对,就可以知道这个色彩的大致色调是什么了。

很明显我们采样的这个颜色是介于纯色调和明色调之间,你可以叫它纯色也可以叫它明色。

色调看完之后我们再来看看它的色彩家族,也就是这五大色相关系。

首先我们来看看它的同类色是什么,如果大家刚开始比较困难可以偷个懒,调出色相环。

这样找到相应的色相就非常简单了,但是不建议大家这样做,除非是新手或刚入门的同学。

然后是近似色,相距45度的颜色。

然后是中差色,距离在90度左右。

接着是对比色,120度左右。

最后是互补色,对比最强烈,也就是相距180度左右的颜色。

这五大色相关系是最基本也是搭配起来最常见的,一般不太容易出问题。这里需要说明一点就是我们在对色值进行猜测的时候,不需要要求太高必须要完全一致,只要差不多就可以。并且大家在看教程的时候可能会觉得有些复杂佷麻烦,我做这些为了给大家演示看上去是花了些时间,但是当你自己在猜想的时候可能只是一瞬间的事情。

对色彩进行感性分析

下面我们再来看看第三步,对色彩的感性分析,所谓感性分析也就是说这个色彩给你什么感觉。

比如这个黄色给我们的正面意象有:阳光、轻松、幽默、开朗、热闹、欢乐、幼儿、开放、快乐;负面意象有吵闹、廉价、不雅、软弱、浮躁、轻浮、稚嫩、散漫、不安。注意在提炼感觉的时候不要约束自己,能够联想到的都可以记下来。

对色彩进行行业分析

然后是第四步对色彩进行行业分析,也就是说你认为这个色彩适合哪些行业或者你见过哪些行业使用过这个色彩。

比如最明显的就是儿童、宠物、游戏、时尚、运动、促销、餐饮、农业、传统、汽车等等。

对色彩进行设计应用

以上这些训练做完之后就进入到了最后一步,也就是用这个色彩进行任意内容的设计。

这是我们的文案,这里我们要设计的是关于詹姆斯十六代战靴的三个Banner。

1. 案例一

首先根据尺寸创建版面,找到一张詹姆斯的图片去底之后放到版面中,然后将主题信息放大并选择一款具有力量感的字体编排到版面的中上位置,将中文标题和LOGO做重复编排。

将文字信息放置到人物下方,底部信息做描边和变形处理为画面增加形式感,最后将其他信息编排到空余的左侧。

最后在主标题下方添加色块来丰富一下版面,版式部分就完成了,接下来开始配色。

因为我们要用到采样的这个黄色所以主色已经确定了,但是这个画面只用一个颜色显然是不够的,所以我们还需要其他颜色。

因为考虑到设计的内容和风格所以我觉得配色上应该有一些对比,但是又不想使用对比很强的互补色,所以这里我选择对比色,但是黄色的对比色有两个应该选择哪个呢,这里我选择了紫色。

因为如果了解NBA的话应该知道,湖人队的球衣本身就是黄色和紫色,也就是人们所谓的紫金战袍。

但是这个紫色有些偏红,所以我们可以调整成偏蓝一些。这也是我想告诉大家的一点就是配色是灵活的,千万不要死脑筋。

辅色确定了之后就可以为画面填充颜色了,但是我们看填充完颜色之后人物图片的颜色有些不协调,所以人物的颜色也需要调整。

这样看上去就会好很多,那么第一个案例就完成了。

2. 案例二

第二个案例我们选择鞋子来当主体,然后编排主标题。

将其余信息围绕主体鞋子来编排,通过适当的变形角度来为画面增加灵动。

但是两侧很明显太空了所以可以添加色块和文字,版式部分就完成了。

因为我们设计的这三个Banner是一个系列的,所以配色也应该是统一的不需要改动。

3. 案例三

我们再来看看最后一个案例,前两个案例分别是以人物为主体和以产品为主体,所以第三个案例我就直接用文字编排,将文字信息进行分组给图片留好位置。

为了增加一些形式感,下方的标题同样进行描边处理并进行裁剪。

那么同样使用这组配色,将图片放置到预先留好的位置上,这个案例也就完成了。

最后我们来看一下整体效果和效果图。

本期教程到这里就结束了,我们从几个不同的角度去对色彩进行拆解,大家回去之后可以自己多加练习,每天解构一个色彩,这样长期积累下来,你就会在不知不觉中创建了一套属于你自己的配色体系。

但是我相信肯定会有人有疑问,如果照这样做那纠错机制在哪?因为这些都是大家自己去创建的很多内容不一定对,如果你有这样的疑问那说明你是认真学习的人,但是我这套方法并不是没有纠错机制,这个纠错机制就是你自己,在漫长的时间里你的成长、历练、感受、学习都会影响你对一个色彩的认知,可能几个月甚至几天之后你看待同一个色彩的感觉都是不同的。所以放心大胆的去做吧,只要你肯坚持,火候到的时候自然就会有所收获。

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

巧用Keynote,为你的演示锦上添花

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

对于今天的设计师来说,无论是知识分享会,还是项目提案评审,甚至是求职面试等等,越来越多的场合需要考验我们的演讲表达能力了。那么对于设计师来说,除了口述表达能力,美观大方的幻灯片往往也是必不可少的。而Keynote因其酷炫的动效俨然已经成为演示界的神器,但是现状是很多设计师朋友对于Keynote的掌握还不是很熟练,特别是五花八门的动效以及复杂的构建顺序,在此作者就与大家分享总结一些个人的使用心得,希望对大家能有所帮助。


目录

1、认识keynote

2、制作准备

3、动效

4、构件顺序

5、演讲相关



下图即是Keynote的主界面,与我们熟悉的Sketch还是挺相似的。其中中间为舞台区域,当前页面的所有元素都会出现在此;顶部是工具栏,包含一些常用的功能,并且跟Sketch一样支持自定义;左侧是幻灯片的导航,可以快速在各个幻灯片之间切换;右侧是参数调整,可以分别针对幻灯片以及其中的某个元素进行参数调整。

其中,右侧的参数调整又分为“格式”、“动画效果”和“文稿”三个Tab。当选中左侧导航中的幻灯片或舞台中的某个元素时,对应的参数调整面板是不同的。


在开始动手之前,还有一些准备工作需要完成。首先就是整个幻灯片的尺寸,常见的尺寸比例有4:3和16:9,需要根据演示现场的幕布宽高比来确定选择哪一种。如果是在移动设备上演示,就根据移动设备的屏幕比例来选择,一般手机是16:9,Pad是4:3。当然,也可以自定义幻灯片的宽高尺寸。幻灯片尺寸在右侧的“文稿”Tab中调整。

其次,编辑母版。母版有点类似于Sketch中的Symbol,改变了其中的某个元素,所有使用这个母版的幻灯片都会出现相应的改变。不同的是,母版的对象是整张幻灯片,而不是其中的某几个元素组合,也就是说,一张幻灯片只能选择一种母版。如果你的所有幻灯片都需要加上logo或者水印,使用母版就很方便了。母版的编辑以及调用在右侧的“格式”Tab中(选中幻灯片的情况下)。

最后,将你需要用到的图片元素,按幻灯片顺序整理好命名,以便于在后续调整构件顺序时使用(命名混乱会对调整构件顺序造成很大的干扰,在稍后构件顺序的时候会讲到)。


Keynote中的动效分为幻灯片之间的过渡动效和单个元素的动效。


幻灯片之间的过渡动效有以下这些:

这里重点要介绍的是神奇移动。它的原理是为两张幻灯片中的同一个元素添加补间动画,通过这个元素在两张幻灯片中的位置、大小、形状、颜色、旋转角度、透明度这些属性差异来实现过渡动画。当然,还可以选择抹入抹出来使其过渡更自然。

单个元素的动效又分为三个阶段:出现、动作、消失。


出现,顾名思义就是从无到有的一个过程,主要有以下这些:

动作,主要是移动、缩放、透明度、旋转这些基本的属性变化。大部分的动效都是通过这些基本属性的变化组合来产生的。

消失,顾名思义与出现相反,是一个从有到无的过程。

其中,打字效果和跟踪这两个动效只针对文本才会有效果。

这么多的动效,其中有一些还是蛮有意思的,比如“解体掉落”、“碎屑”、“轰然坠落”,这里就不展开细讲了,大家有兴趣可以一一去尝试一番。


使用动效还有一个误区就是,不是所有的页面之间或者元素出现消失都是需要动效的,过多泛滥地使用动效反而会给观众造成视觉疲劳,让他们的关注点都集中在你的动效上,从而对本身的演示内容失去关注。


构件顺序是针对单张幻灯片内添加了动效的元素而设定的。可想而知,一张幻灯片内的所有元素,很少会有同时产生动作的情况,因此必然有个先后顺序,这个顺序就是构件顺序。通过构件顺序,可以组合出变化多端的动画效果来。


构件顺序分为三种:一起、之后、点按。如下图:

可以看到,通过构件顺序列表上两个构件之间的样式变化,我们就可以一眼区分出它们之间是什么顺序。一起,两个构件连在一起并且中间没有分隔线;之后,两个构件连在一起中间有分隔线;点按,两个构件不相连。


点按比较好理解,就是两个构件动作之间需要手动控制。下面重点来讲一下,“一起”与“之后”。我们通过时间轴的形式,来让大家更容易理解。

当然,我们还可以设置延迟时间,让构件交替动作。

前面我们提到过,要为图片元素整理命名,其目的就是在构件顺序列表中便于查看。如果我们没有整理命名,那一张幻灯片中的构件顺序列表可能就是如下图这样:

那么这时候,我们如果要调整其中一个元素的动作顺序就显得异常困难了。因为在舞台区域中,这些元素可能都是叠加在一起的,想要通过点选找到元素几乎是不可能的,而构件顺序列表中的命名也显得很混乱……


此外,即使是整理命名了这些元素,最好也不要把许多动效做在一张幻灯片中。原因同上,如果后期要修改,寻找起来也是非常困难。我们可以利用幻灯片之间的自动过渡效果来将它们拆分到不同的幻灯片中。

图中在第2张幻灯片与第3张幻灯片之间选择“无过渡效果”,且开始过渡设置为“自动”,延迟“0秒”,那么第2张幻灯片播放完,就自动无缝进入第3张幻灯片了。


做完了演示稿,那么就要开始准备演讲了。首先需要考虑的问题就是文件大小了,如果图片内容不多倒还好,一旦图片较多,整个.key文件就会变得很大。这时候我们可以先压缩图片再将其置于Keynote中,或者有一些元素或者文字可以通过Keynote直接绘制,就不要采用图片的形式了。这样可以将.key文件的体积大大缩小。


其次,Keynote的版本也是需要考虑的问题,最好可以拿到演示所用的电脑来演示一遍,作者就曾经因为软件版本问题导致一个动效无法展现,进而影响了那个片段的演讲。


此外,我们不可能讲所有要讲的内容全部呈现在幻灯片上,适当的注释是必不可少的。

添加完成的注释我们可以在演讲者模式中看到。

演讲者模式中,我们还可以看到当前幻灯片、下一张幻灯片以及还有多少个构件动效没有播放。在顶部,靠左的是当前时间,靠右的则是定时器,可以设置成计时器或者倒计时来帮助我们控制演讲时间。

最后,如果你不在电脑边上而又不想别人帮你控制幻灯片播放时,可以利用iPhone来遥控播放。打开iPhone上的Keynote,点击右上角的遥控模式进入如下图左侧的界面,然后前往Mac端的Keynote,进入偏好设置,选择遥控器,然后连接上你的iPhone(需要在同一WiFi下),iPhone上的界面就会提示你开始播放幻灯片。

这时,你的iPhone就变身为一个遥控器了,并且点击右上角的菜单还有激光笔功能,便于你在演讲过程中做临时批注。


这篇文章旨在帮助你更充分地运用Keynote来传播分享知识、展示设计作品,并不能美化你的幻灯片。想要做出美观大方的幻灯片其本质还是需要版式排列、色彩搭配这样的基础技能;同样,酷炫的动效也需要多欣赏临摹别人的作品才能运用得恰到好处。

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

投影一直做不好?看这篇文章就搞定!

涛涛

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

平时设计工作中,关于投影,简单一点的就是一个图片中的主体抠下来放到画面中,这个时候就要设置一个投影,让主体在画面中更和谐。难一点的就是在合成设计里,涉及到每个物体的投影形状、颜色、透视等等,根据分析画出投影,这期教程就给大家普及一下投影的相关知识,以及如何去做投影。

阴影是什么呢?阴影是光带给这个世界的礼物。

阴影的概念

还是正经解释一下什么是阴影?

在客观世界中,光线总是从光源沿着直线方向发散。

在光线的照射下,受光部分称为亮面,仅次于亮面的受光是灰面,而光线无法照射到的部分,称为暗面;由于被受光面遮挡,物体所在环境中出现的阴暗部分称为影,阴与影的总和就是阴影。

阴影的要素

阴影形成的要素有哪些呢?

首先要有光源,光源就是光点,光点向下的垂线与承接面的焦点就是光足,阳光的光足在地平线上,灯光的光足在照射的基面上,然后是要有物体,光点发出的光线,经过物体上阴点,光足与物体底点也就是阴足连线,与光线相交的点就是影点,阴影就是阴足到影点的部分。

画阴影时,一般是先定光点和光足,然后是阴点阴足,光点连接阴点,光足连接阴足,这样阴影自然就画出来了。

用这张照片来做个简单说明:

光源的位置,就是太阳,向下垂线交于海平线于一点,这个就是光足。

然后,定出一些椅子上的阴点和阴足。

光点连接阴点,光足连接阴足,这样就能画出阴影的大致形状了。

光源的分类

光源总体上可以分为两大类,一类是自然光,比如:太阳光、月光。一类是人造光,比如:灯光、烛光。

1. 自然光

自然光有两个特点:光线平行;随着时间的变化而变化,不会为⼈的意志所转移。

光线平行

因为太阳、月亮这样的发光体离我们太过遥远,所以可以把它发散的光线视为平行的。

再来说下这张图片,同样是自然光,为什么它的光线不是平行的?

这是因为透视的现象,就像这个地板,不也是平行的吗?但是因为透视的关系,它们会相交于一点,光线也是同样道理,因为我们以这个角度观察,所以光线会出现透视现象。

也就是说,当我们从侧面观察的话,就很明显看到光线是平行的。

随着时间的变化而变化,不会为人的意志所转移

日升日落,阴晴圆缺,都是自然的规律,不会为我们的意志所改变。

2. 人造光

人造光有两个特点:光线不平行,呈放射状;根据需要变换位置。

光线不平行,呈放射状

用这张图片来举例,画面中光源是路灯,物体是消防栓,我们对它进行一个简单的分析:

它的光点是路灯,向下的垂线,到地面上的光足,然后是消防栓,光点连接阴点,光足连接阴足,画出阴影,可以看出,因为与光源距离近,所以光线是不平行的,呈现一种放射状,并且影子也会呈现放射状。

根据需要变换位置

为了呈现想要的视觉效果,可以随意移动光源的位置,甚至调整它的颜色、明暗等,可以人为改变。

灯光属于电光源,它可以是单一光源或者组合光源,常见的像这样的白炽灯,还有日光灯等等。

当各个方向都有光源的时候,投影就会消失。在医学上,用的无影灯就是根据这个原理制成的,因为医生做手术的时候,手和器械都有可能对手术部位造成干扰的阴影,所以无影灯就能尽量消除阴影。

阴影规律及其特点

我们模拟一个太阳移动的轨迹,当太阳位置比较低的时候,光线与地面的夹角就会比较小,影子会很长;升高一些,夹角就稍微大了些,影子缩短了点;再升高一些,夹角更大,影子很短了。然后当太阳在物体正上方的时候,与地面的夹角接近90度,影子基本就是一个点。那另一边,基本就是相同的情况,所以,光源离照射物体越高、越远、光线角度越大,阴影越短。

我们再通过几张图片来进一步了解阴影规律及特点。

我们看到人物的影子非常的长,光线与地面夹角比较小,说明它的光源在一个比较低的位置上。

这个正俯视的图片,影子也很长,说明它的光源也在一个较低的位置。

影子的长度也不算短,但是看光线与它的夹角比较大,证明它的光源在相对比较高的位置上。

这张照片比较明显了,影子比较短,接近中午的阳光。

△ 接近中午的阳光

我们之前在透视的那篇教程里说过,物体的透视线,最终都会消失在视平线上,所以,当画面中先有一条视平线,我们同样可以画出一个立方体。

当物体有一个阴影,我们可以通过影点与阴点和阴足的连线,找到光点和光足。这样也就找到光源的位置。

这张图片,我们就可以通过倒推的方式找到光点,如果画面中再放入其他物体,就可以用光点和光足对其连线,从而做出投影。

正常情况下,物体在光源下的投影,如果在其中出现一个台阶会怎样?

影子就会随着阶梯的形状而产生变化,也就是说阴影投在不同的承影面上,会随着受影面的变化而变化。

这两张图片就明显看出阴影根据地面起伏的形状而变化。

阴影在设计中的应用

第一个是接触阴影,是物体与物体之间接触所产生的阴影,一般这种我们都可以用图层样式当中的阴影来设置。

还有一种接触阴影,是物体立面与承影面之间的投影关系。

第二种是悬空式投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

第三种是倒影,针对反光较强的面会有,比如镜面、水面、琉璃台面等,并且在表现一些高端产品设计时候经常会使用到。

第四种是长投影,也是这几年扁平化流行起来,带动的一种投影形式。

第五种合成设计中的投影,和实际照片中的场景是一样道理的,这也是所有投影当中比较难操作的。

最后一个创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,当然,这个主要靠大家发散思维的联想了。

案例时间

用两个简单的小案例,来给大家讲解一下如何做投影。

给下面右侧的书籍做一个和左边一样的投影:

给图层添加投影图层样式,不透明度调整到45,角度137,距离26,扩展10,大小35。

我们把外围一圈的投影已经设置好,下面就再添加一个投影,也就是最贴近书籍边缘部分。这个部分投影我们可以称之为闭塞投影,是近光量最少的地方。

再添加一个投影,不透明度33,角度不变,距离5,扩展10,大小10。

利用图层样式的投影就完成了,大家在调整的时候可以边调整边观察,以达到一个自然的效果。

第二个方案,是给画面中的立方体添加一个投影,要符合光影关系。

第一步要按照透视关系,把立方体看不到的面给画出来。

根据之前我们学到的知识点和画面中其他阴影来进行分析:

先连接几个人物的影点和阴点,我们知道自然光的光线是平行的,并且我们标记出来的也确实近乎平行的光线,既然这样,我们就不需要找到光点的位置。

只要复制其中一条光线到立方体上的阴点即可,然后我们再去找光足的位置。

为了找光足,可以先把画面扩展一下,然后连接影点和阴足,三个参照物连线的延长线会相交于一点,这个点就是光足。

从光足往回连线,与阴足的延长线,相交于影点,这里为了区分,三条线我用三个不同的颜色,然后我们把三点连线,就是阴影的区域了。

可以发现绿色和蓝色是基本重合了,我们就可以忽略蓝色的那条线了。

立方体阴影的范围与形状,然后再进一步刻画。

做个高斯模糊处理,数值2。

在阴影上方新建一个图层,用钢笔工具勾勒一个闭塞阴影,不要太大哦,填充深灰色,模式正片叠底。

做高斯模糊,数值1.4。

为了不让影子边缘太生硬,选择滤镜 – 扭曲 – 波纹 – 41%。

用吸管工具吸一下旁边影子的颜色,填充到立方体影子。

如果影子太重,可以适当降低不透明度,再统一暗部的色调,这样阴影就做完了。

最后总结

图标该配上文字吗

用心设计

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

 

图标在增加界面美观性的同时也在破坏着界面的清晰性,在设计的过程中如果你纠结于图标是否需要配上文字那请仔细阅读这篇文章。

首先扪心自问下是否清楚在设计中什么时候用图标? 什么时候用文字?什么时候用图标+文字?你是否能清晰的分辨他们分别在什么场景下使用呢?


前言

之所以要写一篇这样的文章是因为最近有很多的设计小伙伴反复在争论一个观点 图标配上文字是否有必要?

举个栗子:

如下图一位设计同学觉得右上角红圈里面只需要图标就好了不需要文字的存在,并且节省屏幕空间,可是公司的开发和测试同学一脸懵,这个操作觉得不够清晰,识别性较差严重影响用户体验,当前视觉层面和功能层面产生了强烈的撞击。带着这个问题我们从图标的定义,图标变迁史,图标的优劣势来讲述今天的文章,相信文末你会有自己的答案。


图标定义

广义

图标是指代意义的图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性。应用范围很广,软硬件网页社交场所公共场合无所不在,例如:男女厕所标志和各种交通标志等。

狭义

应用于计算机软件方面,包括:程序标识、数据标识、命令选择、模式信号或切换开关、状态指示等。


图标变迁

图标是具有指代意义的具有标识性质的图形,它不仅是一种图形,更是一种标识,它具有高度浓缩并快捷传达信息、便于记忆的特性。它不仅历史久远,从上古时代的图腾,到20、21世纪具有更多含义和功能的各种图标,而且应用范围极为广泛,可以说它无所不在。一个国家的图标就是国旗;一件商品的图标是注册商标;军队的图标是军旗;学校的图标是校徽。

我们通过图标看到的不仅仅是图标本身,而是它所代表的内在含义。


而在计算设备上,图标随着时代的发展而迅速流行。从最早的计算机GUI(施乐之星Xerox Star)再到之后的乔布斯Apple lisa,Windows1.0,Amiga Workbench,从最初的黑白到随着显示技术在分辨率和色域上的提高出现的彩色图标,设计师渐渐的有了更大的发挥空间。


图标的优势

1.节省屏幕空间

图标可以替代文字,相对于长文字来说只需要占用一个图标的位置如:worktile移动端新建聊天操作四个文字如果用图标来代替的话只需要占用一个文字的文字,并且把干巴巴的文字变为图形符号,用户对于图形的识别速度对于文字来说更快。

2.没有地域语言限制,针对国际通用图标。

国际上通用的图标对于每个人来说都能很快的识别处理,比如同样一个“放大镜”图标经过长期许多不同的网站、应用程序和操作系统的用户培养,让放大镜图标作为搜索的操作代表符号变得越来越流行,不论任何国家任务种族,用户很清楚这是搜索操作,相对于文字来说图形识别大大减少的用户识别的时间,用户也可以花更多的时间去做他真正要去做的事情,从而提升工作效率

3.图标可以提供视觉引导,迅速识别减少用户思考时间

人脑处理图形图像的速度是处理文字的60万倍,人会记住80%看过的东西,20%阅读过的东西,和10%听到过的东西,所以在我们发朋友圈或者写文章的时候避免干巴巴的文字描述,劲量配上相关图片,提升整体的图版率,俗话说看图说话不是没有道理。

4.提升整体视觉体验

好的一套图标能够从图标的独特性、象征性、记忆性、应用性、组合性、变化性上打动人心,激发人们的点击欲望。这样才能使图标设计达到上乘水准,从而提升整体的视觉水准


图标不适用场景

1.表达含义复杂,难以揣测

图标的目的就是快速识别并引导用户,用户如果无法快速识别通常会下意识的回避掉无法识别的界面元素,这是人类的天性,反而logo的设计更加适合深层次的寓意。之前乔布斯做的一个实验,他拿着苹果设备到一个智障儿童福利院让儿童们把玩,每个小朋友都认识那些图标的含义,当时的写实图标都是来源于生活,对于来源于生活而设计的图标对于孩子们来说识别效率更高花费的识别成本更低。

2.图标存在多重含义

如果图标不能言简意赅的表达出寓意,并且存在争议的请避免使用,如果非要使用请采用图标+文字的形式。比如appstore侧边导航第一个你觉得是什么?收藏?标记?错!他是探索,如果我不告诉你可能每个人猜的含义都不同。所以我们在设计图标的时候要劲量去避免多重含义的图标。

3.专业性过强很难作为通用图标

图标如果专业性过强,而没有办法简化为一个很直观通用符号时,二八原则我们只能考虑80%的人,而20%的人需要付出学习成本,,比如下面的这个图标,如果用它来代表“研发”,我相信会有很大一部分人没法识别代表什么意思。但是对于开发人员就是一个很通用的图标,在这种情况下,只能是允许20%人员付出学习成本来解决这个问题,除非你配上文字。


小结

1.为了提升产品视觉体验,图标设计一定要极简,如果使用图标能够百分百表达其含义时,请优先使用

2.针对国际上面通用的有大众认知的如:搜索、wifi设置蓝牙等图标无需配上文字,除非做视觉引导为了保持一致而统一添加文字的列表

3.禁止使用多意图标(不让用户思考,如果用户不能在5s内很快识别出图标的意思,那这个图标的设计是失败的)

4.针对专业性很强的并且局限于空间的采用文字形式,或者二八原则只要考虑80%的人员无识别压力,而20%的人付出学习成本。

5.我们不讨厌图标加文字的形式,前提为图标要足够简化表达其含义(如文章开始的案例,图标简化为加号并且加文字放到商品2做一个通栏操作就好了,这样更加符合用户操作的视线流,这样做的还有钉钉的报销审批界面)

 

蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计

日历

链接

个人资料

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

存档