首页

一个按钮让我扣了3天细节!!!

博博

按钮设计是我们经常会遇到的一个类型,一个好的按钮其最重要的就是激起点击欲,让人忍不住去戳戳戳。

我们来看看下面这个按钮:

很普通,处处都很常见的一种按钮,没有任何点击欲。

那我们应该怎么做出她的点击欲呢?

其实就是要让按钮更有立体感,话不多说直接上干货!

1.层次

可以用不同的颜色,放大一圈,形成对比:

上下错开一些让按钮的造型饱满立体一些,从原来的单一一层变为两层:

2.层次

为了让按钮更立体我们可以把这两层个复制一层,往下移动几个像素:

这样按钮是不是就已经立体多了?别急,还有呢!

3.光影

这里细节就比较多,想把按钮做到晶莹剔透可不容易,给大家好好讲一下。

先给图形加上一个内发光:

使用剪切蒙版,涂颜色或者再来一层内发光,加强这个效果:

复制一层,选用更深的颜色,向下移动,剪切蒙版到里面去,把按钮有一个明显的明暗分割线,形成这种光的层次和厚度:

沿着造型刻画高光,和边缘有些间隔:

在白色的底座上加入按钮的投影:

这样一个剔透,立体感强的按钮造型就完成啦!

那还能不能让点击欲更强一些呢?

4.表像图形

放上文案看看:

就还是有点单对吧。

这种时候我们就可以从按钮的文案出发,加入一些图案,让它更生动!

比如这里的文案是“发射”,就联想到了火箭,我们可以绘制一个火箭出来。

把它加入到按钮上:

这样一个丰富且有点击欲的按钮就完成了!

并可以用同样的逻辑去延展别的按钮,让他们保持统一性:

总结

增强按钮的点击欲的方式,其实就是让它变得立体且丰富。

1.层次:单独的一个色块,会很单薄,增加层次增加其在造型上的丰富度。

2.厚度:厚度可以让按钮变得更立体。

3.光影:让按钮富有变化,更立体和吸引人。

4.表像图形:一个关联文案信息的点缀图案,可以让人更有食欲。



作者:菜心轻量文      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

Instagram的视觉体验分析

博博

国外社交软件Instagram体验分析

今天和大家分享用了几年的一个社交软件Instagram。发现这款软件整体的设计与体验有值得学习的地方,从10个维度分享分享,希望大家喜欢啦~~

1.logo的变化

下图是关于Instagram的从2010-2022整个图标变化的过程,从中能发现:
1.图标从拟物的风格慢慢变成扁平的风格。
2.从具象的相机变成更加简约线形的相机图标。
3.颜色越来越艳丽、明亮,给人年轻、炫彩、简约的设计感受。
4.从logo的变化中能看出页面将从拟物的时代跨进了扁平时代,也能折射Instagram界面必将是往极简、炫彩的方向走。


2.图标设计

我重新临摹Instagram启动图标,发现里面有许多的设计小知识点值得学习。

例如:图标背景颜色有黄色、红色、紫红色、紫色,相邻的两个颜色互为邻近色,使得绘制出的背景自然而炫彩,非常不错的设计,渐变的融入也很自然。

当我们自己做渐变的图标背景时可以用两两相邻的颜色,让渐变融入的更自然。


3.颜色的规律

明显的发现Instagram颜色跟色谱的规律一致,颜色从左到右色相的变化值在50度左右,4种颜色都是用的高饱和度、高明度的色彩,非常艳丽、明亮,利用渐变附在英文上做出英文版的logo。

iPhone 14的字体渐变也是用的这种方法,利用两两相邻的颜色来做渐变。连苹果、Instagram都在用,赶紧学起来吧,你也可以的~~


4.圆角的设计

1.通过自己仔细的观察发现Instagram摄像头图标圆角是带有平滑过度的圆角,和普通的圆角不一样。

2.平滑圆角给用户的感受会更舒适、平滑、有活力,而普通的圆角显得更加生硬、不自然。

3.苹果的主题图标都是带有平滑过度的圆角而不是一个普通圆角,使得图标显得更加自然。

4.可以去看看之前原研哉帮小米设计的logo,会发现他们的logo给人干净会更加有活力、生命力,而不是使用这种普通圆角,而是一种平滑过度的圆角~


5.主界面的分析

1.从Instagram的启动页面看出,Instagram追求的是简约、突出品牌色的方向。

2.主界面主要以用户发的图片为主而不是文字,往往图片比文字更容易产生阅读与反馈

3.整体的界面简约、素白,图标都是统一用黑色线条的描边。

4.当自己关注的用户,发了一些视频,头像上附带Instagram的品牌色的圆形,在白色的界面用品牌色进行了点缀,让单调的界面更具有识别性。


6.界面布局分析 

Instagram的发现页面做的很不错,我重新绘制了这个页面,发现系统想推送给你的图片或者视频会做等比放大2倍处理,一屏显示图片或者视频至少有一个最大显示,给用户的感受是有主次。同时开发也能很好实现这种布局,具有一定的规律性。


7.轮播点的设计体验

在Instagram界面当用户发的图片超出5张时,图片下方的轮播点会出现变化,有大有小。

我重新绘制了一个用户发的7张图片的示例,当用户在左右滑动图片时,轮播的点会跟着动,同时会有大小的显示,暗示用户后面或者前面还有多张图片,有近大远小的感觉,非常细节的设计~(可以利用在自己的一些设计上)


8.设计的细节

1.在Instagram的用户界面,视频、多张图片、单张图片和置顶4种状态右上角有个图标的标识,让用户清晰知道图片的内容状态,提前给用户有个心理预期与区分。

2.当用户点击进去类似抖音的布局,可以进行上下滑动切换视频内容,双击可给该视频点赞,整体的体验很丝滑,没有任何的卡顿与拖沓。同时界面图标用线性的形式,布局统一、和谐。



9.图标风格 

Instagram整体的图标设计是线性的图标,线性图标给人的感觉是可点击、可操作的,同时感觉简洁明快的气质。图标的统一让每一个界面的视觉感受都是一致的。



10.经典界面 

这个界面放在你面前可能都会知道是Instagram这个应用,这个界面框架已经形成品牌意识。 Instagram几年一直没有更改这个布局,非常经典的设计,没有太多花里胡哨的图标与信息,只有简约的线性图标与用户发布的图片,克制的设计。也有很多相机应用、户外广告都借鉴了Instagram布局,已经在用户的心智里面了~



总结

1.越来越多的企业的品牌色往鲜艳的方向走,突出品牌形象。
2.图片的排版不一定是同样大小的,可以有大有小,取决于更想给用户传达什么。
3.图标的统一性很重要,当整个app的图标风格都一致时,给用户的体验的感受也是一致的。
4.不断重复一个设计框架、设计组件时,会形成品牌意识,让用户记得你的产品。


作者:黄小伟      来源:站酷

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

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

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

如何把控设计的画面整体?这个六个视觉语言一定要了解

博博

不管是一部电影,还是一张视觉创意,想要消费者或者老板买单,从形、意、色、字、构、质等一系列视觉语言,都需要很好的掌握。

作者:Peng蓬的芝士追光      来源:站酷

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

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

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

千万级小说产品,会员全链路设计复盘

博博

本文通过强化会员品牌、全链路精细化运营和提升会员服务的设计手段阐释如何为用户提供更好的服务。

百度小说是百度APP内的垂直频道,拥有过亿月活和行业最全的正版书籍。随着著作权保护意识逐步上升,越来越多的用户愿意为优质的资源和阅读体验付费。2019年底,为了满足用户消费升级所产生的一系列需求,百度小说初步建立了会员体系。经过两年多的打磨,我们不断提升会员的服务体验,并进行了多次优化升级,现在将我们的设计经验分享给大家。

一、设计背景

2021年我国数字阅读用户规模达到5.06亿,同比增长2.43%,半数以上用户愿意为电子阅读付费,占比最重的人群为19~25岁用户,达到44.63%(数据来源《中国数字阅读报告》),“Z世代”已经成为我国数字阅读的主要群体。随着消费升级,用户对服务的需求不断提升,更看重信息之上的附加价值,如认同感、归属感和仪式感。

二、改版原因

2019年,由于时间紧、任务重,我们完成了小说会员从无到有、从0-1的基础场景搭建。但随着设计趋势的变化,当时小说会员的设计风格与主流用户的喜好不完全匹配,在使用场景中也存在易用性不足、内容缺乏吸引力等问题。下图是2019年小说会员的界面。

同时,我们对小说用户进行了视频访谈,搜集了用户在使用会员服务中遇到的问题,如会员福利少、找不到会员专属内容、购买过程有卡顿等,最终梳理为的三大核心问题:身份感知弱、购买路径长和资源内容少。

三、设计目标


在小说会员亟待改版的背景下,我们结合业务目标、旧版核心问题和用户诉求,推导出了本次改版的设计目标—品牌化、链路化和服务化。

1、品牌化—强化会员品牌

小说会员作为百度APP众多会员之一,设计团队希望能带给阅读用户一些不同的品牌记忆点。

1)设计关键词

基于会员的主流用户、产品属性和用户诉求,我们衍生出以下关键词:年轻、品质、尊贵、超值。年轻用户群体的占比越来越高,新版的设计风格力求更好满足年轻用户的审美需求。

2)会员符号

符号是最直观的视觉元素之一,能够以最快的方式传递产品记忆点。在会员品牌符号设计的草图阶段,我们从字母V、VIP、钻石、王冠和小说IP白嘟嘟等多个方向进行了方案发散。最终采用了白嘟嘟图形与尊贵感的V形符号相结合的形式。该方案既延续了小说的视觉符号,又与竞品的会员标识形成差异,从而加深用户的品牌感知和视觉记忆。

3)会员色彩

为了确定更加独特的品牌色,设计团队搜集了大量的尊贵氛围图片,提炼出了玫瑰金,牙金,赤墨等8个具有品质感的颜色。在视觉初稿阶段,我们选择了玫瑰金和黄金两种主色进行了方案尝试。最终根据整体效果确定主色为明亮、高贵的玫瑰金,辅色为黑茶棕,深支子和漆黑的配色方案。新的配色方案让用户感受到新颖、现代,焕然一新。

4)会员图标

在图形元素上,为了增强亲和感,我们选择了圆润的面形图标样式,通过大圆弧和小圆角的细节处理,传递给用户一种年轻、品质的品牌印记。

5)信息传达

我们对会员购买页和权益详情页进行了布局重构,采用深色的背景衬托卡片信息,使得产品框架层和内容信息层更加明确,突出核心内容。

在各类场景中,我们通过会员品牌色彩、图形、符号和IP形象的渗透,强化会员品牌印记。

经过分析研究和实践,我们完成了主场景的设计升级。

2、链路化—精细化运营

就会员体验而言,我们需要关注用户在各种时间和各类场合下的需求,因此我们将会员的全链路状态分为时机、场景和人群三个维度。

1)时机

在不同的时机状态下,我们需要传递给用户不同的信息。只有深入剖析不同状态下的用户诉求,才能为其提供更好的服务。接下来我们从购买前、购买中、购买后和即将过期四个阶段阐述:

①购买前—权益/优惠信息引导

在用户购买前,我们强化了低价和省钱信息,让用户直观感受到购买会员后的价格福利。为此我们从三个方向上进行优化,在开通购买页,外露省钱金额,帮助用户了解开通会员可享受的收益;在会员频道页,采用外露多项权益,让用户快速了解会员权益;在章节购买页,采用突出会员折扣和会员优惠价,让用户感受到开通会员的折扣福利。

②购买中—优化路径流程

在用户购买中,我们在会员购买链路环节进行简化,采用当前页弹出半层面板替代跳转至会员聚合页的方式,缩短等待加载时间;在章节付费链路环节,将商品选择区信息结构进行优化,减少多章购买的页面跳转,使得用户能够更流畅完成支付,提升付费体验。

③购买后—强化权益感知

在用户购买后,鉴于付费用户对商品和服务品质有着更高追求,为此我们通过在各类重要入口展示会员权益,包括省钱金额、去广告次数以及各类场景VIP状态提示等方法,以达到强化用户的权益感知。

④即将过期—轻引导续费

在即将过期前,为了避免对用户造成强付费的不友好感知。过期前3天,我们采用了轻量化的形式告知用户续费,通过各类引导信息的提示,让用户知晓会员服务期限届满。

2)场景

我们在入口和功能场景中也进行了精细化设计,让用户更便捷地使用会员服务。为了突出会员优质内容和服务,我们设置了会员专属的频道和书库,方便用户选择。

在各类功能场景中,为了方便用户在使用功能的过程中随时购买,我们设置了多个功能场景的会员开通入口。让用户快捷享受会员服务。

3)人群

通过小说用户数据分析,我们将用户人群分为会员用户、潜在用户、新用户和过期用户。

为了让会员用户能够体验到区分于普通用户的尊贵感,我们在付费页、批量离线、TTS播放页和签到页等场景均采用了会员定制化的配色方案和引导提示,这样使得会员用户在体验服务的各类场景中有更强的身份专属性。

所谓潜在用户,是指仍在犹豫是否购买会员的用户。我们通过限时优惠券、激励视频试用15分钟、书架省钱提示、挽留弹窗和降级版免广告权益等方式,让潜在用户不仅可以先试后买了解会员权益,而且可以通过各类信息提示通晓会员体验,更好地判断是否通过会员服务减少付费金额和提升阅读体验。

我们针对新用户建立了新人见面礼活动,用户在新手福利活动期内可享受超值折扣开通会员,低价体验会员权益。而针对已过期的用户,我们通过下发优惠券、强化特权等形式唤醒用户,以免错过各类福利和特权。

3、服务化—提升会员服务

在内容为王的时代背景下,为了增加会员产品的核心竞争力,我们持续扩充会员书库的数量和类目、拓展会员权益,让用户阅读到更加丰富的小说内容和体验到更多权益的会员服务。小说书库的付费和免费书数量大幅扩充,且书籍类型新增了有声书和短篇故事,增添了小说资源的多样性。

在权益上,对内我们持续拓展会员特权,从最初的4项扩展为10项,新增了有声免费听、免费读故事、整本离线、专属字体、签到1.5倍书币等权益;对外我们联合其他产品,推出了会员赠礼和联合会员服务,用户可以根据自己的需求进行购买,享受组合购买的优惠。

通过多个版本的迭代,我们完成了会员体系的设计升级和落地,用户体验得到了显著提升。

四、未来规划

提升付费产品的用户体验是一个体系化的研究课题,需要各个角色通力合作,合力同行,开拓革新。将来我们还会不断探索,通过不断优化体验细节,不断增加用户权益感知,不断尝试方案创新,形成设计组合拳,为用户提供更好的服务。






作者:百度MEUX      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

用这三步流程,打造百度酒店比价认知

博博

百度酒店以比价及低价感知传达、高效预订低价为设计目标,实现划分为了“提升感知、建立认知、强化记忆”三个阶段建立用户认知。


百度酒店以比价为核心特色,经历多次设计探索,初步建立了用户认知。

设计中通过“核心流程分析-明确用户关注信息-探索比价价值”的方式去制定设计策略,并在方案探索与落地阶段,通过思路发散、多轮数据验证与方案迭代,验证了“氛围感知强化、价值信息传达、聚合比价”等设计手段的作用,希望给服务和电商等比价类产品的设计师一些启发和参考。

一、项目背景

酒店住宿在线预订市场中,各个平台基于用户权益、运营补贴等差异进行着激烈的价格竞争,导致行业存在天然的价差。而在我们进行的一次酒店预订访谈中发现,超过半数的用户在预订酒店时会进行比价,而比价的用户中多数会使用2个以上的酒店APP。因此,在市场存在价差且用户有比价诉求的背景下,百度酒店通过接入多家供给及会员低价,旨在建立酒店聚合比价平台,为用户提供性价比最高的酒店搜索服务。

二、设计策略与落地触点

1.目标和策略制定

在上述背景下,我们与产品侧对齐业务目标,结合对用户诉求的分析,确定了设计目标。


为了达成设计目标,需要明确比价在酒店预订的各个触点下对用户的价值是什么,以探索比价如何发挥作用。下图列出了酒店预订的核心流程、核心模块及用户关注信息,由于用户在各个环节关注的信息不同,比价所能发挥的价值也就不同,因此基于比价是否影响用户进行选择和决策,我们又将核心流程分成服务报价选择前、服务报价选择时、服务报价选择后。



设计目标的实现也对应上述3个环节如下图:

  • 在服务报价选择前,比价还未对用户决策、预订体验产生直接的影响,此时要去传达比价的概念和价值,并尽可能的强化这种氛围感知,让用户清晰地认识到百度酒店可以比价,以吸引用户使用比价。
  • 在服务报价选择时,用户会利用比价进行选择和预订,此时要突出低价、辅助用户进行高效的对比和预订。
  • 在服务报价选择后的下单环节,可以进一步强化比价的感知和价值,以加深用户对百度酒店比价的印象。

2.明确落地触点

为了找到一些好的比价概念和价值的传达方式,以及提升比价体验的方式,我们进行了竞品调研,竞品包含酒店、商品等不同行业,调研结论归纳如下:

  • 利用流程中的主要模块,传达比价概念以及“享低价”、“省钱”等比价价值认知;
  • 结合“产品缝隙”渗透比价概念,具体指“当前内容”到“下一个阅读内容”的停顿时间,包括跳转时的过渡页、阅读完结的结束过程等,在用户不排斥的状况下,给用户带来一些基础的认知教育;
  • “聚合比价”模式,将针对同一商品或服务的报价由低到高排列,以便用户快速对比和选择低价。


结合竞品调研结论,我们根据百度酒店的核心流程和触点进行了设计策略的拆解,建立了策略和落地的映射关系。



三、方案探索与落地

1.提升感知-让用户知道百度酒店可以比价

这一环节的设计目标是要让用户知道百度酒店可以比价,以吸引用户在百度酒店完成下单行为,因此清晰、有吸引力的比价元素设计十分重要。基于竞品调研内容,我们进行了设计探索。

1)酒店列表-氛围感知强化及价值信息传达

下图所示为酒店列表比价设计的探索过程,最初的方案,为了保证酒店信息的获取体验,采用了与传统酒店预订平台采用一致的结构和信息优先级,仅结合图片区域和价格做了比价信息的结合,但这种设计与传统酒店预订平台差异很小,比价感知和价值的传达效果并不好。因此设计侧转变思路,在酒店列表中通过更强化的模块来突出比价的感知,同时结合“比某平台低xx”的文案说明比价结果,传达“比价获得更低价”的感知


酒店列表覆盖多个场景,为了建立百度酒店一致的体验和认知,我们将列表的设计覆盖到了搜索结果页和小程序的多个页面,如图所示。


2)房型及服务报价-基于低价推荐去强化比价

房型及服务报价模块对应酒店精准需求和酒店详情页,与酒店列表思路一致,方案在逐渐与传统酒店预订平台产生差异化,去强化比价、低价的感知,形成记忆点。

下图为搜索结果页的方案,最初外露了多个房型,以满足用户的选择诉求,但从用户行为数据来看,百度酒店的绝大多数用户会选择酒店的最低价房型及报价,因此我们调整设计方案,结合最低报价,用模块式的对比方式去强化比价,并通过“低价立省xx”的信息去传达低价感知。另外,这一部分的设计也和聚合比价有所结合,后面会进行详细的说明。


详情页的主要模块设计与搜索结果页基本一致,如下图所示,详情页中将最低报价作为低价房型推荐,以建立一致的比价认知同时便于用户快捷预订低价。另外,在常规的报价列表中,为了提升用户查找报价的效率,相比于最低价房型,采用了弱化的形式。最终方案上线后,数据上也取得了正向的效果,报价展现到预订点击的转化得到了提升。


3)“产品缝隙”中的比价概念渗透

“产品缝隙”并不像上述列表模块那样感知强烈,设计的目的是为了进一步加深“百度酒店可以比价”的用户印象。结合百度酒店的核心页面,我们重新设计了酒店列表和房型报价列表的加载态,利用“多资源方交替动效+文案说明”的方式,构建动态的比价感知,在用户进入页面或者进行筛选等场景时会出现。另外,我们也利用了小程序首页和详情页的页尾,在阅读结束时去传达全网比价的概念。


2.建立认知-聚合比价模式的构建

在竞品调研部分,我们提到了聚合比价模式,百度酒店由于报价复杂,也适合用这种方式去简化报价。

如图所示,常规酒店预订平台,同一房型(如标准大床房)会存在不同服务政策(早餐服务、取消规则、支付方式)的报价,而在百度酒店中,由于又加入了预订平台的差异,报价会更加复杂,数量更多且同质化严重,即服务政策相同,仅预订平台不同的报价多次出现,这就导致了报价列表的查看和选择效率较低。



聚合比价模式就是要将这些服务政策相同的报价聚合在一起进行比价,以简化报价列表提升选择效率,同时在服务相同的情况下,绝大部分用户会更倾向于低价,在报价聚合后,可以突出低价以便用户预订

我们也在探索如何让聚合比价更简单,初始方案采用点击展开的形式,用户可以保持滑动浏览的交互体验,整个过程的交互体验比较流畅,但页面的层级关系较为复杂,用户认知成本高。因此我们又尝试了调起面板展示比价详情,让用户聚焦在当前报价的对比,并通过模块式的设计,清晰罗列了每个平台的服务、优惠明细等差异信息,让信息的对比更高效,同时强化低价平台,与前面的比价模块保持认知一致


聚合比价模式下,存在了两种用户路径,如图所示。用户可以直接选择最低价资源方完成预订,也可以通过比价详情弹,查看针对同一服务的所有平台报价,对比平台的详细服务、优惠差异后再选择预订。

这种预订模式的目的,一方面在教育用户建立百度酒店可以比价、可以买到低价的认知,另一方面也提升了用户选择低价平台的效率。另外,聚合比价要具有清晰的规则才能被理解和信任,在比价详情中,为了进一步降低认知成本,我们通过标题突出了聚合项,并增加了比价说明入口,让聚合规则更明确。聚合比价的方案上线后,报价的预订点击到成单转化也得到了提升。


另外,前文提到的精准需求搜索结果页和详情页的低价房型推荐也利用了这种模式,不过在比价感知上做了更强化的处理。用户可以在详情页直接点击各个平台报价完成预订,也可以点击文字部分查看房型详情,在页面底部的比价详情中完成报价的对比和预订。



3.强化记忆-比价价值感的再次强化

填单场景是在预订完成后,这个环节我们可以将比价的概念和价值再次展示给用户,以加深用户对比价的认知。这里的设计手段与“提升感知”阶段类似,如图所示为一些方案探索,在用户选择低价平台预订,点击跳转至填单页后,我们会强化用户“预订到最低价”以及“为用户节省xx元”的感知。另外,在用户提交订单时,会存在一定的加载时间,我们也利用了这里的“产品缝隙”,结合加载态继续传递低价、省钱的认知。


四、结语

回顾百度酒店的比价设计过程,我们以比价及低价感知传达、高效预订低价为设计目标,基于百度酒店的核心预订流程,探索比价在各个环节如何发挥作用,进而将设计目标的实现划分为了“提升感知、建立认知、强化记忆”三个阶段,并为业务带来转化提升。

提升感知过程结合流程中的主要模块,通过模块式对比形式、传达比价价值感、基于低价推荐强化比价、以及利用“产品缝隙”等手段,去吸引用户了解和使用比价;建立认知过程利用“聚合比价”模式去精简报价,同时结合对低价报价、低价平台的强化,让用户更便捷的预订低价;最后强化记忆的环节,我们进行了一些方案尝试,再次强调比价的价值。另外,为了建立一致的比价认知,整体的设计中也坚持一致性的原则。百度酒店的比价设计也在不断地尝试和优化中,希望能给用户创造更好的使用体验。




作者:百度MEUX      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

消息通知 | 提升消息推送转化率的必备知识!

博博

前言

通知是产品中极其重要的一部分,它能快速将内容的状态及变化通过不同的方式传达给用户,以便用户在收到信息后根据所传递的内容及时做出应对策略。
在这里,有一个很现实的问题,很多产品喜欢一股脑的把有效的/无效的、重要的/不重要的、用户想知道的/不想知道的等所有信息通通推送给用户。那么,你的推送渠道真的用对了吗?是否做了信息优先级区分?推送时间段是否有效?站在用户角度,下面这些场景你肯定碰到过:

◇ 手机屏幕总是频繁弹出信息,接二连三的震动、提示音让你一怒之下卸载了一些不太常用的APP;

◇ 桌面图标99+、主页的消息入口99+、进入消息分类还是99+,清理起来非常麻烦,还不如关闭几个分类通知,少一个也能缓口气;

◇ 一天少看了几个小视频,好不容易节省出来的流量被通知无情的消耗,还不如关闭系统通知权限来得快;

◇ 每隔一段时间,都要在手机短信中回复一大堆TD(退订),想吐的感觉;

◇ ......


在频繁地打扰下,用户关闭了一个个通知权限、甚至一度卸载APP。不难看出,好的消息通知能巧妙的将用户求留住(部分用户利用通知就能保持对微信、QQ的控制欲),做的不好就会起到负面作用、失去了消息通知的初衷,这里面最需要把控就是推送的一个“度”。
用户可能因为一条走心的推送而转化、也可能因为被打扰而放弃使用,站在设计角度,需尽可能打造让用户更喜欢的通知系统。那么,对于不同的业务需求及使用场景,又该如何差异化的进行消息推送,笔者通过本文进行分析总结,与大家一起了解。



分享目录

一、消息推送的基本知识
二、消息通知渠道
三、让用户再次开启通知权限
四、提高触达率的小技巧
五、结语


一、消息通知的基本知识

1.什么是消息通知

消息通知是产品提供的一项服务,能够及时将产品的期待或内容的变化、根据其等级权重合理的通过不同渠道及时同步给用户,常见的如互动提醒、老用户召回、活动拉新、产品更新或帮助提醒等,通过站内红点、弹窗、短信、邮件等方式与用户进行信息交换。


2.消息推送的目的

用户层面,方便及时获取到想要知道的信息、以及对信息交换的控制权。例如:用户发布一条新的短视频想要对评论/点赞及时掌控、给心上人发了信息想在第一时间看到回复...等,产品也是借此用户对内容的控制欲,利用消息推送提升用户的使用体验。
产品层面,通过主动推送想让用户知道的信息,以达到新/老用户转化的目的。例如:通过手机短信形式发放优惠券对老用户召回、应用内通知或桌面推送对用户拉新...等,以此提高产品收益,获取更大的商业价值。

3.通知设计的基本原则

首先,一个好的消息系统首先需要将消息内容设计的全面,以便用户通过消息通知能准确无误的了解到对应内容;
其次,消息的触达方式需合理有效,必须提供便捷的操作入口以供用户及时反馈;
另外,为了避免过于打扰用户,需选择合理的推送渠道,提高用户触达概率及反馈效率。


二、消息通知渠道

消息通知渠道分为应用内通知应用外通知。应用内通知主要来源于消息中心或系统主动触发的弹窗来体现,而应用外通知包括桌面图标红点、手机短信、电子邮件、push、公众号信息(需绑定)等渠道推送。

1.应用内通知

1)消息功能入口
消息功能入口提示也称为红点提示,主要有底部Tad栏、首页右上角、个人中心右上角三种形式。当有新的通知出现时,对应图标的右上角会出现小红点提示,清晰明了,关于小红点设计,之前《小红点篇 | 用好这招,让用户的触达率大幅度提升!》这篇文章有详细说明。
红点提示的用户触达率较高,但需要用户在登录状态下才能查看,比如订单状态变化、用户与用户/产品之间的互动消息、产品活动通知等。

2)消息列表

当产品的消息类型较多时,点击消息功能入口即可跳转至二级分类列表。与上述相比,消息列表的内容则更加清晰,通过第一次消息入口功能的引导触发,这里的用户触达率将成倍增加。

3)弹窗通知

以弹窗的形式覆盖在页面内容顶层,阻碍用户的当前操作并迫使用户对弹窗做出决策,可以是系统主动弹出或用户手动触发,对用户的干扰极大。
弹窗通知最大的优势在于会100%被用户看到,无法忽略,否则将不能进行其他操作,很适合产品的一些重要事件提醒,例如应用升级、活动通知、优惠券引流等。


4)Toast 通知

Toast通知是用户在操作之后给出的即时反馈,与当前页面内容关联性极强,但不会中断用户的操作,出现的时间很短,一般持续3秒后自动消失,对用户的干扰也比较小。
需要注意的是,Toast容易在用户不注意的情况下被遗漏,所以适合用于操作后不影响大局、且不可二次操作、不可逆转的轻量提示,例如删除成功、提交成功等。


2.应用外推送

1)桌面小红点

小红点通常以圆点+数字的形式出现在图标右上角,用来提示应用内的未读消息数量,进入应用查看或清除后小红点则会消失。桌面小红点有一个必备前提,需要同时开启设备和应用内的通知权限方能接收提醒通知。
在部分应用中,桌面小红点具有较大的价值,能对用户产生积极的影响,使用频率得到进一定的提升。例如:社交类应用中的私信、评论、点赞等;商家端的咨询信息、下单提醒等,用户在看到后都会有强烈的点击欲望,对一些数据的提升起到推动作用。


2)PUSH推送

PUSH推送通知常见于设备顶部横幅(几秒后消失)、通知中心以及锁屏后的中部区域,用户可从卡片中的内容获取信息类型及重要程度,用以决策是否需要立即打开。
这种推送方式,用户几乎很难忽略,不处理的话会长时间浮于屏幕之上,非常适合价值及时效性较高的消息通知。除视觉提醒之外,还可通过听觉触达用户,例如支付号、微信的收款信息等,不过依然要同时开启设备和应用内的通知权限。


3)手机短信

短信推送是大家很熟悉的通知渠道了,毕竟现在都是用手机注册账号,手机号获取难度几乎为“0”,常见的有验证码短信(用户请求)、营销短信(产品推送)两种:
验证码类似“一问一答”的互动,没有什么特别的玩法;
营销类短信对于拉取新用户、老用户召回、节日/活动促销能起到不可替代作用,产品可通过短信发送图片、文字以及超链接,内容的时效性、用户的触达率都相对较高。
着重说明一点,因为短信通知的成本较高,在使用之前需要足够的思考分析,细分用户群体做到精准投放,避免所花费的成本与产生的价值不成正比。另外,如果需要放超链接,那么短信内容一定要有足够的说服力及吸引力,总是被用户当做诈骗短信删除、举报的话还不如不放。
为了减少对用户的打扰,让产品更人性化,一般会在短信结尾提供TD(退订)提示,用户回复即可取消后续的推送,但是否真的取消成功,这就得看产品了(¬◡¬)...

4)电子邮件

电子邮件推送方式使用的并不多,一方面需要产品有web端服务,纯粹的移动端APP邮件推送不会有什么效果;另一方面,绝大多数的用户登录电子邮箱并不频繁,还容易被用户一键清理或误删。
电子邮件唯一的好处就是用户可通过超链接直达内容出处,相比APP应用,免去了下载等一系列操作,还可以长时间滞留,便于用户随时查看或添加星标,处理时间段选择较为灵活,很适合web端服务。针对一些商业化的邮件推送,也需要花费一定的经济成本。


产品获取用户邮箱地址的难度较大(邮箱账号除外),不难理解,使用手机号一键登录、验证码登录、第三方账号登录远比邮箱地址登录要方便的多。除此之外,还可以通过个人设置的添加邮箱、问卷调查的邮箱地址预留来获取,不过这就要看用户的主动意愿了。

5)公众号消息

公众号背靠社交应用,普及程度及用户触达率是极高的,不过这需要产品利用部分业务、活动为导向,引导用户关注公众号后方能接收到消息通知。
目前公众号只能向用户发送符合部分场景要求的服务通知,例如刷卡通知、物流轨迹变化、商品购买等。如果预算足够的话,还可以购买公众号列表、内容详情页、朋友圈等产品广告位进行特定用户群体推送,无需用户关注也可以看到并进行转化。


三、让用户再开启通知权限

用户一旦关闭通知权限,对产品来说无疑是一个损失,这意味着没有消息通知的推动,用户的使用频率以及与产品之间的互动显然会减少(就连夫妻之间都需要时常互动与沟通交流,何况对于有选择余地的产品),时间长了,用户转投其他产品的“怀抱”也不是不可能。
有没有想过,用户只是关闭通知权限而已,并没有卸载APP,真的就没办法了吗?是不是该做点什么...


1.寻找关闭原因

用户之所以还未卸载APP,说明还有价值,归根结底,关闭通知权限的原因都是因为消息的“狂轰乱炸”带来的无尽骚扰,几乎没有例外,而产品还会添上一把火,用户再次打开APP时无底线的催促用户再度开启,耗尽用户最后一点耐心后,或许再也没有机会了。
这个时候,设计师考虑的不是频繁提醒用户开启,而是用户关闭通知的真正原因(“狂轰乱炸”只是概括),细化各种可能性,然后从中找出机会点,但凡有所改进都值得试一试,毕竟相比什么都不做不会更糟。这么解释似乎毫无说服力,下面举个例子:
当产品中的某项免费服务突然有一天开始收费了,但受到了大多数用户的抵触,这个时候你该怎么做,是无视用户诉求继续收费、还是恢复到之前的免费?这并不是一个选择题,继续收费会导致大量用户流失、恢复免费可能连维持运营成本都难,所以不经思索的选择草草收场、连下下策都算不上。用户抵触的原因可能收费过高或是与实际价值不符,有没有想过利用限时折扣、附加其他增值服务(成本较小)或者组合捆绑销售也不失为一种策略。
那么,到底该如何做既能愉快的发送消息通知、还能能挽回用户的心呢?

2.引导二次开启

用户关闭通知权限,并非没有需求,最典型的就是在某宝、某东加了满满一“车”商品等待降价,然后抱怨消息通知太吵关掉了通知权限,最后就是无法收到折扣通知、还把问题怪在了APP身上,着实太冤。用户只要还有需求,通知权限就还有被重新开启的机会。

1)损失厌恶/利益引诱

首先,我们需要找出对应的价值点,利用优秀的文案给予用户思考的余地,用户每多思考一会,结果都有可能发生改变。
人们都讨厌失去,对于损失的不可控很难接受,在引导用户开启通知权限时,需要强调不开启会失去什么,毕竟面对“得到”和“失去”时,损失更加让人难以忍受,例如物流产品告诉用户“未开启通知,将错过重要的快递信息”。还可以通过激励等进行利益引诱,如“开启后能及时获取红包卡券、折扣通知”等,并提供快捷通道,促使用户重新开启通知权限。

2)消息分类/分别处理

每种类型的通知都不可能符合所有用户的“胃口”,针对社交、电商类产品,可将通知类型分类处理,用户希望接收哪种类型的消息单独开启即可。
例如支付宝将消息拆分为多个类型;京东还增加了午休免打扰设置,开启后在12:30-13:30不会收到任何消息提醒;微信群过多、消息太吵时,开启免打扰又担心错过重要人的信息,于是微信在去年上线了开启群消息免打扰后、可设置群内4个人的消息正常通知,算是比较人性化的设计了。

3)提供关闭/关不彻底

部分产品提供了关闭消息通知功能,但又关不彻底,这是产品基于妥协的基础上,依然在低频推送消息的“流氓”玩法,与用户完全关闭相比,已经算是不错的结果了。
常见于PC客户端,就像很多软件的插件一样,不管怎么关,总是无法彻底关闭,甚至还将开启操作伪装成其他内容引导用户误触;手机短信推送也会有这种情况,用户回复过“退订”后依然会收到相关短信。


这种方式需谨慎使用,在用户关闭通知后,需通过后续推送内容的质量、频率试探用户底线,然后逐渐提升,切不可无视用户操作。


四、提高消息触达率的小技巧

1.减少重复通知

反复推送相同的内容只会让用户更加反感,回复退订、卸载应用都可能在这一刻发生。
很明显,消息发出后,如果用户的触达率较高就没必要再次推送。反之触达率较低,重复推送会让用户有种被催促、胁迫的感觉,适得其反,触达率低有没有可能是文案不够友好、表达不够清晰或者吸引力不够?即便同一件事情,也尽量使用不同的表达方式,如何想办法重新引起用户的关注才是关键点。


2.言语得当、避免误会

中华文字博大精深,且有56个民族,其性格习惯各异,特别在利用当前社会热点、媒介进行的营销推送时,尽可能规避掉敏感信息,如地域/民族歧视、性暗示等。


3.细分受众群体

很多时候,消息推送太少无法满足产品目标、太多则会惹恼用户导致通知权限被彻底关闭,所以不仅要考虑消息推送频率,更重要的是对受众群体进行分类、分别推送,不要每次都一股脑的将消息发给所有用户,当然,能做到千人千面(成本大)则会更好。


4.内容清晰简洁

没有用户愿意在不明所以的情况下来看长篇大论的内容,需确保消息内容简单直接、清晰易懂,并符合用户认知习惯,还得保持友好的语气以及富有创造力的品牌形象。
处于营销目的时,可利用感兴趣的事件/事物勾起用户的点击欲望,例如网络热词、时下热点等,笔者虽然并不提倡“标题党”,但不得不说,很多标题党都能起到不错的效果。


5.提供“下一步”入口

消息通知需要一个有效操作入口,并且在消息内容中有对应的指向,点击应用内通知切换APP界面、应用外推送链接跳转至web页,从始至终都需要为用户提供一个查看更多内容或参与的有效途径。


五、结语

消息通知设计的主要目的是在正确的时间、以正确的方式将内容呈现给用户,并提高产品的转化率,不管用户愿不愿意接受,这始终都是一个呈现信息的不错途径。
本文主要总结了消息的通知渠道、常见问题处理、提升用户触达率的方法,以帮助新手设计师快速掌握完整的消息系统。或许最终的结果事与愿违,但不能否认其魔力,需要做好的是确保消息内容质量、对应的受众群体及合理的推送渠道,相信总有一种方式适合你产品。



作者:大漠飞鹰CYSJ      来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

引导帮助在产品中的作用

博博

合理的产品引导功能,可以使用户在较短时间内了解产品的特性与使用

用户怎么知道此功能的使用方式?

前几天眼睛不太舒服,去医院做了一个检查(视疲劳导致)。因为要走商保,所以要使用社保卡,之前我记得用社保结算都需要去人工窗口,我刚过去就被一个穿着红马褂的大妈拦住说自助机也可以用社保,要我扫她胸前挂的码(可以快速到达电子社保二维码界面),扫完她就开始帮我点击操作。 

她觉得我应该不会操作,所以让我看一遍,其实这个操作并不难,只是因为我不知道自助机上可以用,自助机周围也没引导操作流程。而且她这种方式让很多年纪大的人和外地过来看病的觉得你是个骗子,后面好几个人都还是去了窗口。 

在B端产品中也有很多类似问题,用户不知道有这个功能、也不知道这个功能怎么使用,特别是一些大数据产品,专业性比较强。产品、技术都认为用户和他们一样都懂,实际上并不是,这个时候你需要提供一些邀请,引导用户进行使用。

邀请就是引导用户进行操作前的提醒和暗示,通常包括实时的提示信息和预期功能,以表明在下这个界面或下个界面可以做什么,这是成功的交互式界面关键所在。

例如:飞书我的空间,当鼠标停留在可编辑区域上时,就会实时地显示邀请(复选框),这个例子的缺点是鼠标如果不处于相应区域上,就不会显示邀请。 



另一种方案是任何时候都显示邀请,例如:石墨文档我的桌面,复选框一直显示。



静态邀请

静态邀请就是通过直接在页面上给出交互提示,可以让用户随时看到期望的界面功能。

静态邀请主要有两种模式:引导操作邀请、漫游探索邀请

1、邀请操作 

步骤邀请 

例如:华为云HECS服务器产品就给出1、2、3操作步骤 引导操作会占据页面较大的空间,同时也会吸引用户的眼球。所以在设计时需要思考一下,你希望引导用户执行什么操作,用户是否可以多次查看,这样有利于设计出明晰的页面和信息层。



白板引导 

另一种引导操作邀请叫作白板式引导。 意思很明确:现在只有一个空白页面,需要引导用户创建内容。





利用空白区域“变废为宝”,如何对该区域应有的功能给出提示,是诱导用户创建内容(填补空白)的有效方式。

2、漫游探索邀请

与引导操作邀请关系密切的是漫游探索邀请。假设你重新设计了某个页面并添加了一组全新的功能,怎样才能保证用户恰当地使用新页面,同时发现新添加的功能呢?漫游邀请是向用户介绍新功能最好的方法。



最佳实践:

1、漫游功能用户可能不想用,所以需要有可选功能,也就是可以跳过或关闭;

2、漫游功能不是“创可贴”不要乱用,只有针对精心设计的界面使用才能发挥价值;

3、设计漫游的关键在于保持简单,让它容易开始也容易停止。漫游应该只是页面本身的一个演示。脱离页面的“教程”式漫游很难起到作用。

动态邀请

静态邀请适合提示用户当前界面中包含什么功能。然而,许多调查试验表明,用户经常不会阅读指导说明性的文字。而在用户交互过程中,在他们需要的时候提供邀请则是一种不错的方式。动态邀请就是在用户交互过程中的某个点上吸引用户,并引导他们继续下一步操作。

1、悬停邀请:在鼠标悬停期间发出邀请 

吸引用户的一种方式是通过鼠标悬停来显示邀请



例如:飞书消息列表鼠标移入后, 背景变化的同时会有一个“勾”图标来吸引用户,鼠标移入上去后提示可以勾选完成,点击完成后消息移除列表。 

最佳实践

1、当操作没有内容重要,而且希望界面整洁时,使用悬停邀请。

2、在实现悬停邀请时,可以通过改变光标、改变背景和显示提示条共同配合表明所邀请的操作

3、在交互的不同阶段,尽量点缀一些用户熟悉的元素,通过熟悉的概念引出新概念有助于用户快速理解新功能。最常见的元素是按钮、链接、下拉箭头和众所周知的图标。

4、通过距离表明邀请操作的目标对象。 

2、预期功能邀请:使用熟悉的实物引出新实物 

唐纳德·诺曼将这个术语引入到设计领域。最经典的例子是门把手,门把手的预期功能是可以抓握、扭转或按压。屏幕元素可感知的预期功能没有物理属性,不过,由于习惯、术语、图形及一致性等原因,用户能够在某种程度上感觉到他们可以操作这些元素。





例如:第一张图飞书文档sheet页“加号”图标与第二张图“三个点”图标,就是一种预期功能邀请。用户没触发之前就能猜到触发后会是什么效果。 

预期功能邀请之所以有效,是因为利用人们已知的习惯与认知引入交互,从而让用户顺利完成一连串操作。 

最佳实践

1、通过人们习以为常、司空见惯的概念来引出新的、不熟悉的交互方式。

2、使用可感知的预期功能来给出邀请提示(例如,用向下的箭头表示可以打开下拉菜单,而用向上的箭头表示可以关闭菜单) 

3、把邀请安排在适当的上下文中,特别是要靠近交互的主体。 

3、推论邀请:用于交互期间

设计邀请时怎么才能猜测用户的想法,也是一项重要挑战。如果用户下一步可能会执行多种操作,而事实上又不可能准确判断用户想法,那么面临的困难就会比想象的大很多。 

在google sketchup ( 3D)绘图工具中,当鼠标点击某个点后,进行第二个点连接时,会有多种可能性,这个时候系统也不确定用户会怎样连接,但会给出对应的提示,比如:端点、中点、背面、侧面等点位来辅助用户进行连接。 



例如:这种工作流场景个人觉得也算是一种,点击“加号”右侧会滑出面板,给出你可以添加的动作。 这种在交互期间以可见方式向用户表明系统推断出的用户想法被称为推论邀请。

4、更多内容邀请:用于邀请用户查看更多内容

图片类型的更多邀请,例如:站酷相关推荐 



文字更多邀请,例如:QQ邮箱右侧最近联系人 



邀请的优点

精心设计的应用能够通过邀请体现出各自的细微差别,无论是静态还是动态,都是引导用户顺利进入下一个交互层次的有效方法。

谢谢观看!


作者:夜莺YEAH      来源:站酷

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

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

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

白嫖!2022年最新免费可商用的101款中文字体包(附下载)

seo达人

优设网(4种字体)

优设字由棒棒体 – 优设&字由

优设好身体 – 优设

优设标题黑 – 优设&字由

优设标题圆 – 优设

图片

庞门正道系列(5种字体)

庞门正道细线体 – 庞门正道 x 胡晓波工作室

庞门正道真贵楷体 – 庞门正道

庞门正道轻松体 – 刘兵克工作室

庞门正道粗书体 – 6.0车港敏

庞门正道标题体3.0 – 庞门正道 x 12位设计师

图片

 

站酷(6种字体)

站酷庆科黄油体 – 郑庆科

站酷小薇LOGO体 –  李大卫

站酷文艺体 – 刘兵克工作室

站酷酷黑体 – 胡晓波等多名设计师

站酷快乐体 – 刘兵克等多名设计师

站酷高端黑 – 胡晓波、刘兵克等

图片

 

胡晓波系列(3种字体)

胡晓波男神体 – 胡晓波

胡晓波骚包体 – 胡晓波

胡晓波真帅体 – 胡晓波

图片

 

阿里巴巴普惠体 (9个字重)

图片

 

千图网系列(6种字体)

千图雪花体 – 千图网 x 字魂网

千图纤墨体 – 千图网 x 字魂网

千图马克手写体 – 千图网 x 字魂网

千图厚黑体 – 千图网 x 字魂网

千图笔锋手写体 – 千图网 x 字魂网

千图小兔体 – 千图网 x iFonts

图片

 

叶根友字体(3种字体)

叶利航九龄卡通 – 叶根友

叶根友守中曲画 – 叶根友

叶根友锐劲体 – 叶根友

图片

 

霞鹜系列(4种字体)

霞鹜文楷 – 落霞孤鹜

霞鹜漫黑 – 落霞孤鹜

悠哉字体 – 落霞孤鹜

小赖字体 – 落霞孤鹜

图片

 

仓耳字库(4种字体)

仓耳舒圆体 – 仓耳字库 x 张少龙

仓耳周珂正大榜书 – 仓耳字库 x 周珂

仓耳小丸子 – 仓耳字库 x 张少龙

仓耳渔阳体 – 站酷 x 张少龙

图片

 

Keynote研究所(5种字体)

演示秋鸿楷 – 人生哥 x 叶运鹏

演示夏行楷 – 人生哥 x 刘锡栋

演示春风楷 – 人生哥 x 徐占海

演示悠然小楷 – 人生哥 x 孟祥媛

演示佛系体 – 人生哥 x 纪国才

图片

 

荆南字坊系列(3种字体)

荆南波波黑 – 荆南字坊

荆南麦圆体 – 荆南字坊

荆南缘默体 – 荆南字坊

图片

 

三极字库(4种字体)

三极泼墨体 – 三极字库

三极素纤简体 – 三极字库

三极行楷简体-粗 – 三极字库

三极力量体简-粗 – 三极字库

图片

 

素材集市(2种字体)

素材集市酷方体 – 素材集市

素材集市康康体 – 素材集市

图片

 

字由系列(3种字体)

点字浅夏体 – 字由

字由文艺黑 – 字由

字由芳华体 – 字由

图片

 

钟齐字库(4种字体)

马善政毛笔楷书 – 马善政

钟齐志莽行书 – Zhimang

钟齐流江毛草 – Liu Zhengjiang

有字库龙藏体 – 钟齐字库

图片

 

字体视界(2种字体)

字体视界法棍体 – 字体视界

字体视界法棍体拼音版 – 字体视界

图片

 

像素字体系列(6种字体)

粗宋 – diaowinner

点点像素字体 – wixette

坊宋 – diaowinner

凤凰点阵体 – Haoyu Qiu

观致8px字体 – 夏夏

中文像素字体 – Luckeee

图片

 

字体传奇(2种字体)

字体传奇南安体 – 字体传奇

字体传奇特战体 – 字体传奇

图片

 

其他系列字体(26种字体)

创客贴金刚体 – 创客贴 x 郑庆科

刘欢卡通手书 – 刘欢

雷盖体 – 猫啃新人

美呗嘿嘿体 – 美呗设计中心

逐浪萌芽字 – 逐浪字库

白无常可可体 – 白无常

斗鱼追光体 – 斗鱼

文道潮黑体 – 文道字库

汇文明朝体 – 天王帝廷

Oz焦糖下午茶 – 新蒂字体

图片

摄图摩登小方体 – 摄图网 x iFonts

鸿雷板书简体 – 鸿雷字迹

江西拙楷 – 黄煜臣

卓健橄榄简体 – 卓米品牌设计

问藏书房 – 造字工房

阿朱泡泡体 – 朱振杰

沐瑶随心手写体 – 春颜秋色

包图小白体 – 包图网 x 字体视界

联盟起艺卢帅正锐黑体 – 卢帅

锐字潮牌真言简 – 锐字家族

图片

贤二体 – 汉仪字库

途牛类圆体 – 途牛UED

杨任东竹石体  – 杨任东

醍醐书体 – 字体维基网友

黄引齐招牌体 – 黄引齐

柳体 – Hiweed team

图片

 

结语

以上字体在整理之时,均可免费个人/企业商用,但不做任何保证,如有任何字体在以后更改为收费字体,不做另行通知,请各设计师随时留意字体出品方的版权资讯。

字体整理只为让更多设计师使用,绝无任何非法传播或售卖,如后续有任何字体不允许传播,请联系本人,会立即删除。极少部分字体需进入官网授权下载,所以未提供安装包,请查看对应的指引说明。

 


作者:黑马青年

转载请注明:学UI网》白嫖!2022年最新免费可商用的101款中文字体包(附下载)

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


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


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



设计灵感不应该被一个网站而限制

seo达人


不能被一个网站而限制

最近 Behance 封停了国内账号,导致很多设计师无法访问,因此也流传了很多解决方案。今天黑马哥就不和大家讨论这个解决方案了,其实有很多同学就算在能访问的时候也没看几次~O(∩_∩)O~。

图片

这个事件告诉我们,设计师的习惯是多么的重要,我们的设计灵感不能因为一个网站平台而局限。退出账号依然可以访问,只是很多同学纠结的是自己的收藏没有了,如果平时养成本地化采集的习惯,你就不会出现这个问题。我们不要把希望寄托在云端,只是买一个硬盘就能解决的事情,也不要觉得不方便,其实很多作品我们也不会经常看,存储只是为了不时之需。每年都对采集的作品进行一次整理,近两年的放在电脑里面,时间过长的存储在硬盘里面就可以了。主要还是要对作品进行分析,掌握作品的技法经验和设计思维才是关键。

除了存储习惯以外,我们也不要只是固定访问一个网站获取灵感,优秀的设计类平台是很多的,我们要发现更多新大陆。下面黑马哥为大家精选几个访问频次较高的国外平台,国内的大家都比较熟悉这里就不列举了。

 

设计/插画等灵感网站推荐

以下推荐一些个人比较常用的几个网站,排名不分先后,属于随机性排序。

1、notefolio

https://notefolio.net/

notefolio 是韩国的一个设计交流网站,很多设计师都会在这里分享自己的设计作品和进行设计交流。和国内很多设计作品分享平台类似,是一个综合型设计师交流社区,有平面设计、UI/UX 设计、插画、产品包装设计、摄影、版式设计、数字艺术、美术、工艺等等。

图片

 

2、Mobbin

https://mobbin.com/

这是一个汇集全球优秀 APP 截图的网站,有超过 50000 个优秀 APP,节省了下载应用的时间,对于 UI 设计师来说非常实用。

同样的应用还提供了 iOS 和 Android 两个不同版本的截图,简直非常的人性化。这是一个使用起来非常简单的网站,海量的设计必将开启你的灵感脑洞。

图片

 

3、Pinterest

https://www.pinterest.com/

这绝对是一个灵感采集的绝佳网站,经过众多用户的长期积累,已经汇集了全球大量的优质图片资源,其中设计作品也是非常丰富,且质量都普遍偏高。

你可以通过关键词搜索、画板关注、以图搜图等操作获得灵感,而且相似推荐还能延伸出更多类似构图、配色、主题等图片资源。点击作品还能跳转到原始出处,顺藤摸瓜找到更多优质资源,真的是非常便利。

图片

 

4、Designspiration

https://www.designspiration.com/

该网站除了通过关键词搜索图片内容以外,在搜索栏有⼀个调色板的图标,点击可以通过指定的颜色进行搜索相关配色的图片或者设计。在选择颜色的时候不是单一的色彩选择,可以选择几个配⾊组合进行搜索,对于设计师来说⾮常实用。

图片

 

5、Abduzeedo

https://abduzeedo.com/

Abduzeedo 是一个优秀的设计博客,提供给设计师创意和灵感的社区,这里有设计、摄影和 UX 等相关的文章提供给那些想寻找灵感的设计师。这是一个开放的设计社区,它是设计师日常的灵感来源。

图片

 

6、UI Garage

https://uigarage.net/

UI Garage 提供了很多应用设计的截图和模板,专业细分的类别和精挑细选的设计截图,还有很多设计工具推荐,是一个非常实用的网站。在这里不仅可以获得设计灵感,还能获得优秀的设计工具或者插件来提高我们的工作效率。

图片

 

7、Dribbble

https://dribbble.com/

Dribbble 相信很多喜欢 UI 设计打卡的同学比较熟悉,汇集了大量设计师的一些日常创意作品。该网站不同之处是发布作品需要邀请码,就是需要有邀请码的设计师邀请加入才能发布作品,获得邀请码也相当于设计能力获得认可。

整体作品的质量还是不错的,如果当你设计时没有想法,这是一个不错的灵感采集地。

图片

 

8、ndc

https://www.ndc.co.jp/works/

这个网站展示了很多非常不错的设计作品,偏向于简约风。相信这些项目设计的灵感,可以带给我们更多的设计思考。

图片

 

9、FolioArt

https://folioart.co.uk/

FolioArt 是一个插画艺术作品展示网站,拥有高质量的插画作品,形式也多种多样。就像一个插画家的资源库,让有商业需求的客户通过这个平台,和世界顶尖的插画师进行合作。

图片

 

10、unDraw

https://undraw.co/illustrations

这里提供的插画作品数量众多,各种小场景的插画无论是独立使用,还是组合使用,肯定可以满足很多场景需求了。平台内置的编辑器还可以对插画进行调色,导出格式也是支持后期编辑,非常的实用和便利。

图片

 

小结

设计的灵感来源途径是很多的,不局限于某一个单一路径,以上的推荐仅为抛砖引玉,还有很多优秀的网站给我们带来设计灵感和经验学习。每个人的关注焦点和选择角度不同,以上仅为个人推荐,不足之处欢迎大家留言补充。

 

原文地址:黑马家族(公众号)

作者:黑马青年

转载请注明:学UI网》设计灵感不应该被一个网站而限制

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


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


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



平面设计和演示设计的区别

seo达人



Keynote是Mac用户使用的幻灯片软件,我们平常看到的苹果发布会,国内手机发布会基本都用的是Keynote。当然Mac系统也兼容PPT。Keynote因为其简约而高级的动效而备受青睐,很多企业开发布会首选就是Keynote。我做了几张动效图来示意一下发布会的高级效果。





演示设计这个概念,包含了上述PPT,Keynote发布会。常见的PPT商业定制项目包含: 企业介绍PPT、产品型发布会PPT、白皮书、商业计划书等等。我们今天讨论的不是这两款软件跟平面设计PS AI的区别, 我们要讨论的是平面设计和演示设计的区别,所以下文的阐述中,我有可能一会儿讲PPT,一会儿讲Keynote,讲的都是一码事,都叫(幻灯片)演示设计。

对PPT感到非常诧异

在没有接触演示设计之前, 我一直是做平面设计(这些年做过UI,平面海报,电商类,游戏视觉,官网)。这两年才刚接触PPT,算是一个跨界选手了。当我第一次听到PPT居然还需要设计,我感到十分诧异。我不是很能理解一款毫不起眼的Microsoft PowerPoint,我意思是说,一款职场人士的常用的幻灯片演示软件,一款根本算不上是设计软件的PowerPoint,能跟设计有什么挂钩的呢?有什么沾边呢?

让我感到更诧异的是,还有专门PPT设计师这种职业的吗?他们的日常工作是怎么样的?PPT设计师跟平面设计师有什么区别呢?如果说设计是为了解决问题,优化体验。那么,PPT设计需要解决的是什么样的问题呢?什么样的客户,有这类需求呢?有多少这样的群体,愿意为毫不起眼的PPT而付费呢?我刚接触PPT那会儿,我实在是太多的疑惑了。

第一直觉,好丑,好Low.

作为一个资深平面设计师,当第一次看到一些所谓很“不错”的PPT作品,我第一反应真的是看吐了。感觉好丑好low啊!这就是我的第一直觉。有一些配色,一些阴影,很多细节,简直完全侮辱我这么多年的审美。这也更加加深了我对PPT的疑惑:

· 就这玩意,这么土的效果,以我的技术不是随便降维碾压这些人么?
· 为什么会有这么丑的PPT?
· PPT设计不遵循平面的规则吗(透视,颜色,投影等)?
· 要是我来做的话,肯定能做的更好。
· 就这些东西,居然还有那么多人说好?





发布会,不就是大图叠字么?简单!

在没有跨入这个行业之前,如果你问我对PPT和发布会的第一直觉,我会这么回答你:不就是大图配文字吗?如果说让我来操刀发布会, 我所认为的演示设计,难道不应该是高逼格大图加简约而且少的文字么?发布会不应该就是这样的吗?是的,我的第一直觉没有错。我们现在看到的比如小米、华为、OV、苹果,汽车发布会等等,都是大图配字。



这样的设计,背后的逻辑是什么呢?设计看起来很简单,真的做起来很容易吗?

演示设计的逻辑

回想一下,我们是什么时候开始接触PPT这款软件?我想大部分人基本都是从学生时代开始吧。老师讲课都会用到PPT。在学生时代如果老师讲课讲得无聊,那台下的学生肯定就打瞌睡了,要么就在窃窃私语或者玩手机,总而言之,注意力肯定被分散了。无聊的老师讲课,PPT大片大片的文字,丑陋的配色,台下学生总是不爱听,讲课生动的老师往往更受欢迎。


同样道理,教室的场景换成了发布会现场,老师角色换成了演讲人,黑板换成了演示大屏幕。人依然还是从学生时代过来的人。

一切都没有变。


发布会演示设计,如果你不能抓住观众的眼球,那台下就没人听你讲了,场面也会逐渐失控,台下的人玩手机的玩手机,交流的交流,甚至还会有人觉得浪费时间直接走了。就像看一部乏味的电影,继续看下去也是在浪费时间。还不如睡觉。这种情况的出现,对于台上演讲人来讲,也是一种巨大的压力。


所以,演示设计要考虑一个非常重要的问题就是,如何让每一页的呈现,深入人心,抓人眼球。这就是为什么发布会,总是用无比震撼的大图或者视频,简约的大字文案来呈现。因为精彩的内容(图片和视频)可以吸引观众的注意力,再配合演讲人高超的演讲技巧,把要传递的信息,借着幻灯片传递出去。发布会的主体是人。幻灯片是辅助演讲人的工具。你不会见到有人会把一大堆的文字放巨大的屏幕上吧?那坐后排的观众看着多费劲。那观众到底是自己阅读大屏幕上面的字呢,还是听人(演讲人)讲呢?

请记住,最没吸引力的当然是枯燥乏味的文字,而且是大段大段的文字。这里我做一个案例展示你感受一下你就明白了。假设你现在正在观看一场苹果发布会,这一个页面密密麻麻排满了iPhone 14的相关参数和文字介绍。这里无意冒犯 , 只是想通过一个错误的案例展示来表达我自己的观点。



抓住观众的注意力

不管是平面设计还是演示设计,有一条永恒不变的设计规则,那就是观众的注意力特别容易走神。我就拿官网举例子。做过官网的同学应该有所体会,首页Banner区域的位置,一般不会超过5张Banner图,每一张图片的轮播时间,一般不会超过3秒。你的Banner如果不能第一时间吸引用户注意力,逗留时间再长也没用。并且,如果第一张Banner停留时间过长,将影响用户注意后面几张banner。用户的注意力非常有限。同理,偌大的会场,巨大的屏幕, 台下成千上万的观众,发布会如何能吸引用户的注意力?按照设计的逻辑,要想吸引观众的注意力,画面视觉呈现上能用动态元素优先用动态(视频、三维),其次是图片(吸引眼球的图片),最后才是文字(尽量少而精简)。当然一整场发布会下来不可能全是视频,这样也会造成视觉疲劳,仿佛看了一场两三小时的电影。 这样源文件也会超负荷过大,硬件设备也未必跟得上。所以一场发布会,是需要控制好视频,图片,占总页数的比例。

演示设计,就是推演+视觉展示。

说到这里,我给演示设计下一个定义。平面设计是用符号,文字,图形等一系列的元素进行排列组合成视觉呈现出去给受众群体。演示设计则是,通过符号,文字,形象,图形,动画等等,运用合理的视觉化,用复合逻辑的手段去推演,去展示,把关键的point,有力power地传达出去给台下受众。


演示演示,就是推演+视觉展示。和平面设计不同的是,幻灯片演示,不适合在一页内容上去表达过多的信息,要保持简约和克制。所以你会看到尤其是手机发布会,演讲的文字内容一大段一大段,但是画面上字少却铿锵有力,图片大气且震撼。



当我第一次动手实战的时候,我错了。

前面说到我刚开始接触演示设计的时候,我的认知就是,做PPT不就找符合文案意境的图,然后把字摆上去嘛。比如讲企业愿景,大概率就是配高山,大海,攀登,地球等等元素。比如讲医疗的时候,就是配医生,实验室等等配图。这样的认知也没错。



当我第一次做项目实战的时候,我也是这么干的。 然而我又犯错了,我对PPT又有了新的认知。

首先是用途。用途上分为 阅读型PPT 和 讲解型PPT。

| 阅读型PPT

如果PPT是用作商业计划书,项目提案,品牌介绍,白皮书等等这类场景,这一类型的PPT称为阅读型PPT。 阅读型PPT页面上承载了很多的信息,页面布局整整齐齐,板块分明。这一类型的PPT一般是发给其他受众去仔细阅读的,尺寸一般为16:9,4:3,或者2:1 , 3:1。



| 讲解型PPT

如果PPT是用在大型发布会现场这类场景,这一类的PPT称为讲解型的PPT。 这一类PPT,上面也提到过,演讲的主体是人,PPT只是辅助的工具,整场发布会下来主要靠演讲人把PPT的内容给讲清楚,所以发布会级别的PPT,一般字少,大图,大背景,配合动画,三维去演绎。



我第一次动手做商业项目的时候,我错就错在我的需求是阅读型PPT,我却按照讲解型的思路去做。每一页PPT把内容大部分都删了, 只留下部分重要的信息,再配以大图。下面这个就是一个反面教材,随便找个图片胡糊过去,No Way。

当我再次实战做发布会时, 我又犯错了。

犯了一次错,我弄明白了什么是讲解型的PPT,什么是阅读型PPT。在我第二次接到发布会需求的时候,我记得当时是给一个医疗项目做发布会,我配了一张水珠的超高清大图。我当时认为这个图片非常匹配画面要表达的场景,但现实又再一次给我打脸。

我记得客户的反馈就是这个图过于素材化,一看就是免费摄影图库,不符合他们企业的调性。我这才意识到原来我们平常看到的发布会级别的演示,一张大图配的一些剪短而有力的文案,这个图片的来由不是网络上找张图贴上去,或者请摄影师拍一张那么简单。反过来想,找个合适的图或者付费买一张合适的图然后直接打文字上去,真有那么容易,那发布会也太容易做了,钱哪有那么好赚呢,对吧。



最合适的图片来自哪里?

那如果图片不是找一张匹配的图就能完成演示设计的工作,那最合适的图片从哪里找呢?他们大厂发布会的图从哪里来呢?答案是,网络上从来就不存在100%合适匹配的图片,如果你随便找一张图就能糊弄甲方过稿,说明你的甲方好忽悠,或者说要求并不高。

我们拿苹果来举例子。你去看苹果的每一次新品发布会,你去看苹果的官网上面的图,他们的选图绝对不会是随便在网络上找合适的图片,他们的图片,视频,一定是团队亲力亲为拍摄的。尤其是在展示自己的大楼,车间,生产线,员工,企业文化等等,网络上怎么可能存在匹配合适的图片呢?最优质,最合适的图片一定是请专业摄影团队拍摄。这是解决商业需求首选的方案。

下图为 苹果官网截图





大多数客户没有这个预算,要求咱去网络找图。预算充足的甲方能让设计师用上付费高质图片。预算不足的,设计师只能靠免费图库。这里我拿一个我之前做过的商业案例来给大家展示,这是一页飞机稿,由于涉及商业,所以画面所有信息都去除,我们只看画面视觉。


这一页客户要表达的是企业文化,不畏险阻,勇攀高峰。于是我找了一座高山来表达这个意象。当然这座山不能直接拿来用,于是我对这个照片进行了处理。



图片压缩有摩尔纹



这个效果很不错了对吧。我发过去给客户,尽管已经对图片进行了二次处理符合这一次的意象,但是客户仍然对图片提出质疑,认为这座山光秃秃,而且没有生命力,攀登起来感觉像是探险运动,很危险的感觉。当然客户的顾虑是对的。后面经过了沟通,我把山峰换成了绿油油的有树林的山,然后才过稿。

你看,哪怕是精心处理过的图片,它依然没法100%匹配客户的要求。PPT商业定制,着重在定制两个字,这就是为什么我每次对客户介绍自己的时候,我给自己的title都是【PPT商业定制设计师】。如果你还不是很明白我在讲什么,我用两件T恤来告诉你,什么叫定制。

左边是一件纯白T恤,是工厂批量生产的类型。价格也比较亲民,大概几十块钱左右。那什么叫定制化呢? 右边的T恤就是定制,根据客户的要求私人定制。价格能翻好几倍。很多年前就听闻过某位设计大师说过一个非常经典的比喻: 设计就好比裁缝做衣服。


作为设计师,需要在每一次的项目中倾听客户的内心需求,再运用手里的素材给客户定制匹配的图片,对于反映企业文化的意象图片,客户自然有他自己心中的考量。





字给我再放大点!

有一次做国内某知名游戏工作室的发布会PPT。 主办方会场有3个屏幕,一个主屏,两个副屏。副屏上基本是放字,来辅助大屏的有奖问答。我当时在设计副屏的时候,我认为字已经放得足够大了,再大就破坏了画面的平衡和比例,至少在平面领域来讲,画面的字傻大粗,完全没有美感比例可言。我已经调了五六版了老板还是不满意,最后老板自己调了一版超级大的字,我才意识到原来我做不好PPT是思维上没有扭过来,不是因为技法的问题。平面讲究的字体大小比例均衡,不适合用在演示项目,尤其是发布会项目。为什么呢?我们要从用户的维度去思考,设想一下在会场,如果你的字放得不够大,那么后排的观众可能无法阅读到文字。给观众体验感不是很好。所以,为什么发布会一般不会放很多的文字?因为确实阅读起来很费劲。这就是平面设计跟演示设计的区别。

那问题来了, 到底发布会现场,用多大的字才合适呢?业内有这么一个公式,可以大概推算出字体用多少号,能够让发布会现场最后一排的观众也能清楚的看见。



A是指现场最后一排座位到大屏幕的距离,

B是发布会大屏幕的宽度,

Pa是指人到电脑屏幕的距离,

Pb是指你制作幻灯片时,你电脑屏幕的宽度。


假设A是16m, 也就是说最后一排到大屏幕的距离大约是16米,B(发布会屏幕)的宽度大约是4米,你再用尺子测量一下你的电脑屏幕宽度(Pb值),假设Pb值是80cm,那我们可以算出Pa,人到电脑屏幕的距离是320cm. 也就是3.2m. 为什么要推算这个3.2m这个数值呢? 这个数值至关重要,得到3.2m这个数值之后,你就站在距离你电脑3.2m的位置,去看你电脑上面的字,能不能看清,如果不能看清就把文字调试到 你站在3m外还能看清的字号大小。



我再强调一遍。此时在电脑桌前做PPT的你,就站在距离你电脑3.2米的位置,然后去调试你PPT中的字体,这个时候就做个测试,字号大概放多小,仍然能被你自己看得清。那么,这一份PPT在发布会现场就能被最后排的观众看清。 当然允许的话 ,还是尽量把字调大一点点。


业内这个粗略的测试方法, 有点类似于我们小学数学知识里面的比例尺。这个方法不是万能的,如果条件允许的话,最好就是带着你的电脑去现场控台测试,这是最直观的方法。因为发布会屏幕亮度,现场灯光等等,各方面很多不可控的因素都有可能影响到你的PPT阅读性。

平面设计或许不需要对文案进行提炼。但是演示设计需要!

上一篇文章我有提到,演示设计师的第一重任,就是要对客户想要传达的信息进行提炼处理。化繁为简,有所取舍。但是平面设计尤其是版式设计,是允许画面上大片大片文字的存在的。

那么问题来了,客户如果给了你很多的文字内容,都想塞在PPT里面,怎么办?

答案是,做删减或者分页。我们要针对内容和客户沟通,让客户做取舍,删减提炼。一页PPT保持言简意赅的表达。 如果很多内容实在都想保留,那就拆页,分开好几页来讲。记住,就因为你是设计师,所以你更应该引导甲方(牵着甲方走)。而不是让自己陷入被动,在设计的时候左右为难,寸步难行不知道该怎么办。大胆告诉甲方,这一页内容实在太多了,放不了那么多,影响阅读。

演示设计也遵循平面设计排版四大基本准则

如果要说平面设计和演示设计,有什么共同的点。那我一定要讲,从排版上他们都遵循四大基本准则。从本质出发,如果一份设计稿,画面信息排布凌乱不堪,那还不如直接阅读文字。四大准则:对比,对齐,重复,亲密性。这个已经是老生常谈的话题了,这里不展开阐述。同样的,演示设计也是需要对画面进行信息处理,把重要的信息区分开来。

问题来了: 平面的排版技法用在ppt里面合不合适?

不合适。 前面有提到,PPT最重要的是简单,直接,生动。如果平面的技法用在PPT上面,很显然阅读起来是很费劲的。 不信你看下面这两个案例。就拿我日常最爱喝的杨枝甘露做一个例子 左边是我找的一个平面案例。很不错对吧。 但是如果我用这个排版迁移到发布会大屏上,或者16比9的PPT里面,我也不多说了,你就自己对比一下吧。



你会发现,在现场大屏幕下,阅读如此多的信息,会感到非常费劲,

这就是平面设计和演示设计的区别。

工作流程的异同之处

做了将近快3年的演示项目,很多流程已经算是烂熟于心。今天趁着这个机会,把自己心中的方法论,系统地写下来,方便给各位入行的新人设计师指明一条道路。写,是为了查漏补缺,是为了让知识更加系统化,缝合进自己的知识体系。对自己对他人都是一件有利的行为。

这里我重点说说,演示设计的工作流程。请看下图:



首先第一步是提炼文稿。甲方会给你演讲人的讲稿,大篇的word文字,需要你摘录分页放在PPT里。提取关键信息,梳理清楚表达逻辑。也有一些甲方,会提前把内容已经放在PPT里了,对于内容多的阅读型PPT例如白皮书,需要把布局摆整齐。对于内容少的,需要用图片来撑整个画面,有一些还需要进行尺寸迁移,比如客户提供的是16比9, 但是我们要改成发布会的超宽屏尺寸。

第二步是看分页。我们把内容分好页数之后,需要发给客户确认,客户可能会因为预算不够,让设计师删减页面。因为PPT是按页数来算钱的,比方说一场发布会,1页报价1000元,客户预算1万5.但是你却分页分出了20页内容,这无疑超出了客户的预算,如果乙方这边不肯让步的话,甲方只能删减内容了。疫情大环境下,大家都得勒紧裤腰带过日子。甲方也不好过。

第三步是沟通风格。每一个行业其实风格大体上是固定的,比方说党政风,水墨风,地产有地产的风格,保险金融也有保险金融的风格。国内手机大厂发布会风格,都以简约风格为主。国内新能源汽车发布会,一律向国外BBA,特斯拉等明星企业看齐。所以平时看发布会,就应该多看国外的东西,毕竟很多东西都是借鉴回来的。颜色方面万变不离其宗。来来去去也就那些。我把定风格这件事情说的如此的轻松,是因为我已经参与了大大小小数百个商业定制项目,所以很多风格已经烂熟于心。

第四步出风格稿。风格稿一般出3页就够了。分好页之后,选比较能出效果的页面做风格稿,不要选简单好做的,尤其是一页只有一句话,或者只有几个词的,这种页面无法作为风格稿的代表。

第五步定规范。规范主要包含以下几种东西,布局规范、颜色规范、字体字号规范、元素运用规范、通底。



首先是布局规范,每一页PPT都应该设定参考线,我们应当把内容规定在参考线之内,这样看起来每一页都是统一美观的,这一点对于阅读型的PPT尤为重要。布局规范类似于版式(画册、DM、白皮书)的设计规范。

不管是平面设计还是演示设计,我们都应该设定颜色规范。主色,次主色,辅助色,颜色一般不要超过三种,这是一句老生常谈的话了。字体字号规范也是平面设计和演示设计项目都需要指定的规范。在演示项目中,需要制定大标题、副标题、内页标题、正文规范,还有主题字体。

元素规范是指,通篇设计稿中不断复用的元素,比如圆圈,三角形,或者某一些光效,标题修饰等等。

通底是指每一页PPT的背景。背景通常根据KV元素色调,或者通用元素来指定,通用背景也是为了让整套PPT看起来更加规整。

这里我做了一个表格,写了平面设计和演示设计的工作流程的区别。当然,平面设计下面有很多细分的领域,我这里一个表格可能没法阐述全部, 我只挑其中一两个范畴来讲,大家可以进行知识迁移,举一反三来对比一下平面设计和演示设计的区别。



设计中的设计

大家有没有读过原研哉的这本书?建议入行几年的朋友,对设计行业有一定了解的人,可以读一下这本非常有深度的书。这里我为什么起这个标题 - 设计中的设计。设计中的设计,是你看不见的设计心思。一场发布会,除了台前幕后的策划以外,其实有很多甲方的小心思在里头。


比如,甲方为了让观众能够好理解一些复杂的概念,可能会提供一些动画视频让演示设计师放在画面里。甲方也会纠结一些页面的字眼描述是不是够严谨,会不会误导观众引起争议,他们经常会在现场修改文案;甲方会针对整套PPT进行一个全局的梳理,先说哪个,后说哪几个点,这里的环节应该说多少分钟,那个卖点要让谁上台来讲;现场的提词器需要反复校对文稿;怎么样控制这个节奏,才不会让观众打瞌睡。在哪里穿插亮点,或者提问题,能够和台下一起互动?哪里需要增加动画?一切策划细节,都是人为的设计。不要以为设计只是呈现在屏幕上。设计环节,也算是设计。这些背后的东西,都是设计小心思,我把它称为,设计中的设计。


原文地址:站酷

作者:我是叶老师

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


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


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



日历

链接

个人资料

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

存档