首页

最新安卓规范入门解析

涛涛

零基础 UI 入门六:最新安卓规范入门解析

零基础 UI 入门六:最新安卓规范入门解析


安卓英文名是 Android,它是系统级源码的总称,而谷歌官方为这套系统提供的设计规范,叫做 Material Design (下称 MD),我们了解官方的设计规范,即了解 Material Design 的过程。

目前,Material Design 已经更新到第 3 代,与 Andoirid 12 代共同发布,它的设计进行了大量的更新和调整,虽然我写作的时候这代 MD 设计还没有正式上线,但下文也将以该版本做说明。

零基础 UI 入门六:最新安卓规范入门解析

建议学习前先下载安卓官方的组件文件(MD2 版本,以后会更新的)和对应字体,可以通过下方官方链接获取。也可以在这个网址中用网页翻译查看官方的规范介绍。

零基础 UI 入门六:最新安卓规范入门解析

1. 安卓布局规范

安卓和 iOS 类似,也包含状态栏、头部标题、底部导航栏以及 …… 底部指示器,我们简单对它们做个介绍。

首先,顶部状态栏在 MD2 中,是有背景色的,而在 MD3 则改成了和 iOS 一样的透明背景。它的高是 52dp(安卓的单位,和 PT 就名字的差别),使用方式和 iOS 状态栏基本一致。

零基础 UI 入门六:最新安卓规范入门解析

顶部标题栏上,MD 提供了 4 种模式,依次为 center-aligned, small, medium, large,在实际界面中可以根据自己的需要选择。

零基础 UI 入门六:最新安卓规范入门解析

在 MD3 中,基本取消了安卓过去在顶部放导航的 “优良传统”,所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar,不过我们依然可以用中文称呼它为底部导航栏。

它和 iOS 底部导航类似,提供了 3-5 个选项的不同版本,可以根据自己的需要选择。并且使用底部指示器的过程中,需要将导航底部延长,覆盖底部指示器的高 28dp。

零基础 UI 入门六:最新安卓规范入门解析

零基础 UI 入门六:最新安卓规范入门解析

在 MD3 中,官方默认使用的画布是 412*892,左右页边距默认为 24。所以如果我们要创建一个以 MD3 规范为标准的页面,就可以通过置入所需的官方元素完成基础布局,进行后续设计。

零基础 UI 入门六:最新安卓规范入门解析

至于其它的官方组件,可以在源文件和官方的规范文档中查看,就不在这里展开了。

2. 安卓规范细节

MD3 和 MD2 看起来完全像 2 套规范,原因就在于细节层面变化太大。MD3 一改以往直男的设计风格和配色,摇身一变成年轻人喜闻乐见的网红风……

零基础 UI 入门六:最新安卓规范入门解析

而相比起来,颜色填充的逻辑比色彩风格的变化更大。在安卓 12 中,提供了用户自定义系统色彩风格,和色彩根据场景自动化生成和填充的强大特性……

零基础 UI 入门六:最新安卓规范入门解析

这套规范异常的复杂,这是一个针对 MD3 色彩配置的万字干货才能讲清楚的特性,我只在这边做一些最基本的讲解。

首先就是 MD3 中,也强调了色彩的角色:

  • 主色 Primary Key Color
  • 二级主色 Secondary Key Color
  • 三级主色 Tertiary Key Color
  • 中性色 Neutral Color
  • 错误色 Error Color

只要这些角色的色值被确定,系统就会自动帮助我们生成不同的明度等级,并应用在不同的场景,比如下方左侧是我们设置的角色色值,右侧是系统会自动生成的关联色彩。

零基础 UI 入门六:最新安卓规范入门解析

下面是色彩应用的示例:

零基础 UI 入门六:最新安卓规范入门解析

零基础 UI 入门六:最新安卓规范入门解析

零基础 UI 入门六:最新安卓规范入门解析

这些角色的具体色值,可是是我们作为 APP 开发方定义的,也可以完全交给客户端自动生成(独立设置或背景生成)。

所以当我们使用 MD3 规范做设计的时候,就要借助官方的插件来完成角色色值的生成。感兴趣的同学可以在 Figma 官方社区搜索 Material Theme Builder 插件,并根据下方介绍了解它的使用方法。

零基础 UI 入门六:最新安卓规范入门解析

除色彩外,MD3 使用了更多、更大的圆角,让界面元素变得更圆润。圆角使用 4 的倍数,根据元素尺寸分别应用了 4、8、12、16、28 等圆角。

零基础 UI 入门六:最新安卓规范入门解析

在使用了圆角的同时,还弃用了 MD2 中核心材质 —— 投影(我忍它很久了)。让元素之间通过色彩的对比来实现分隔,而不是应用一大堆厚重的投影来突出元素。

零基础 UI 入门六:最新安卓规范入门解析

除此之外,MD3 中篇幅最多的还包括设备适配有关的规范,就不在这边介绍,留到后面的分享中讲解。

如果是面向国内市场的 UI 设计师,针对 MD3 只需要停留在了解的层面就行,在真实的工作环境里基本没有应用场景。

3. 国产安卓设计现状

为什么我们作为 UI 设计师可以对 MD3 停留在了解的层面,而不是真实的实践?

因为面向国内市场的安卓界面设计,基本不遵守谷歌官方的设计规范!这里面包含了非常多复杂的历史问题,有谷歌自己规范做的不清不楚(对比 iOS)的关系,也有每个厂商各自为战推出自己的设计系统的原因。

零基础 UI 入门六:最新安卓规范入门解析

更底层的因素,是谷歌系统在国外才能获取完整的体验,没有进入国内(被墙),缺乏了厂商去支持和适配它的基本动力。同时在商业层面上,如果我们每设计一个 APP,iOS 和 Andorid 使用各自的规范,会对产品规划、设计、开发和测试都造成非常大的压力,是一般公司完全承受不起的。

再者,国内的安卓项目,多数是在完成 iOS 端的设计后,安卓工程师直接参照该设计稿适配到安卓端中。只有少数安卓特定的需求需要为其设计独立的页面。

零基础 UI 入门六:最新安卓规范入门解析

所以常规情况下,我们只需要提供标准的 iOS 界面即可。只有在产品经理提供的特殊需求和页面,要根据它输出安卓尺寸的对应界面,但设计风格、元素依旧可以保持 iOS 版本的样式。

要提升对安卓官方系统的理解,就一定要在你们的安卓手机上刷原生的系统,同时安装 Google 三件套,否则你们体验的就只有魔改版 iOS。

零基础 UI 入门六:最新安卓规范入门解析

今天的分享到这里结束!仔细研究了下 MD3 的新增规范花了不少的精力,个人意见,MD3 实在是非常难做出能让我们满意的设计……

文章来源:优设   作者:酸梅干超人

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

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

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




《如何定义APP视觉品牌》——设计流程与操作方法浅析

鹤鹤


概念简述 

 

 

视觉品牌这一概念,既陌生又熟悉。大部分ui设计师都或多或少做过视觉改版或者风格升级,先来看两个概念:视觉风格&视觉品牌。

 

▲视觉风格&视觉品牌重点偏向

 

风格是艺术概念,是在整体上呈现的有代表性的一种面貌。风格能反映时代、思想、审美等特性。也是设计师对审美独特鲜明的理解。那么视觉品牌呢?它除了要体现产品本身特性,融入产品希望传达的感受,也要思考什么对用户有意义。研究视觉品牌,就是探索如何通过设计维护用户对于产品的好感度 ,通过有共鸣的设计传递正能量,让产品获得最大的认同。简单来说:视觉风格重点是设计师对审美的传达;视觉品牌则是通过挖掘产品有价值的特点,创造有共鸣的视觉去打动用户,助力产品。

▲视觉品牌作用

 

了解完视觉品牌的概念,我们简单聊下它的作用。视觉品牌最大作用是建立用户和产品的关系。vivo互联网单个产品的视觉品牌也受vivo母品牌影响,不同业务被渗透的程度不同。比如vivo品牌对vivo官网,vivo商城影响比较大,但是对浏览器,i视频,短视频的影响就比较小。


流程

 

 

那么,如何定义好产品的视觉品牌?借企业文化里的一句话:做正确的事,并把事情做正确。在设计工作中,这句话也有一定的指导意义,我们先要确定是否要做视觉品牌,再用合理的流程规划好每一步。

 

结合过往的业务经验来看,对于已有视觉风格的产品来说,需要满足以下两个情况之一才是最适合做视觉品牌工作的时候:1、产品转型、重大业务调整(包括用户人群、需求变化等);2、与相关行业设计语言水准差距巨大。另外需要考虑的还有时间安排,由于整个流程耗时需要大约12周(3个月),所以设计师前期就要做好时间规划。

 

确定要做视觉品牌工作后,需要准备哪些资料?项目环节和流程如何?让我们来看下这12周需要做的事情和基本顺序:

▲视觉品牌的流程

 

我们接下来会重点介绍流程中关键的8个步骤(图标标蓝色的step1~8):1、品牌定位资料熟悉 2、明确视觉品牌关键词 3、关键词发散和可视化 4、提取元素建立视觉符号 5、完善主要页面 6、验证视觉风格喜好 7、完成所有页面的视觉效果 8、整理成视觉品牌规范手册。

 

1 、品牌定位资料熟悉

大部分项目的产品,运营和用研角色会提前做一些品牌定位的工作(品牌屋),品牌屋有助于我们对产品各方面进行解读。这类资料一般我们都可以获得,设计师可以从中了解到目前我们产品全面信息,包括:产品形象、调性、核心价值观等。我们需要的关键信息:产品关键词就可以从中找到。如果品牌屋资料不够明确或者设计师对确定的词汇抱有疑问,我们还可以通过工作坊形式,邀请项目核心成员进行脑暴会议,讨论出合适的词语。

▲案例:vivo浏览器品牌屋

 

图中为浏览器品牌屋资料案例,经过项目成员讨论,浏览器产品最终关键词:智慧、有趣、默契、可靠、年轻。

 

2、 明确视觉品牌关键词

然后,从产品关键词里,我们需要选出符合产品定位又能达到受众心理预期的视觉品牌关键词,聚焦产品的视觉调性。视觉关键词一般有2~5个,需要视觉专业团队、项目相关人员、核心用户一起来挑选,用户的选择可以放在问卷里进行,通过快速测试了解用户对产品的视觉感受和期待。如果确定的视觉品牌关键词比较多,可以适当确立1~2个核心视觉词汇,便于聚焦后期的风格指导。

▲明确视觉品牌关键词

 

选择标准有两条:1、延展性高,有一定视觉可视化潜力:词汇要抽象化,不能过于具体,一般都是描述情绪,气氛,氛围或者感受之类的。2、贴合公司品牌文化:追求乐趣、充满活力、专业音质、极致影像、愉悦体验、敢于追求极致、持续创造惊喜。

 

3、 关键词发散和可视化

发散

视觉品牌关键词选定后,在绘制可视化的情绪版之前,还差一步,就是针对选出来的词进行发散。做这一步的目的是希望设计师的思维能够尽可能打开,收获更大范围的灵感和思考。我们通过三层映射方式,分别对2~5个视觉品牌关键词进行发散收获大量衍生词。(图中以词语“友好”为案例,分别进行物化、心境、视觉映射出大量衍生词语。)

▲三层映射案例:词语友好

 

在大量衍生词里,我们还要经过一轮讨论筛选,去掉不合适的词语。主要看衍生词和我们的视觉关键词的关联度是否足够高,以及是否适合用视觉语言表达等。

 

如果项目没有做品牌相关的工作,没有产品关键词,那我们前3步骤怎么办?遇到这种情况,我们要怎么深入下去?当然,你可以尝试推进项目去做一下品牌屋,这对各个角色在产品认知上有很大的帮助。其实还有一个工具方法能够帮助我们较好的完成各类关键词提取。(Design O to O 主要是察觉用户情感化的一个工具,工具里得出该类别情感相关词汇和我们想要得出的视觉品牌关键词概念非常接近,所以推荐作为遇到这类情况的解决方法。)

▲Design OtoO方法 

 

这套工具方法的核心步骤分别是:收集,组织,反应,评估。每一步都有一些工具模型可以套用,能够较准的帮助大家达到目标,找出合适的关键词。

 

可视化

前面我们得出筛选后的衍生词,是为了之后可以做出更全面、精准的可视化情绪版。很多设计师在情绪版制作上比较随意,这里也给大家一些我们团队常用来搭建情绪版的方式。一般我们将收集的图片依照3个维度(人物、场景、物体)进行归纳整理,这样共性的东西更容易被发现。当然,拼贴整理的方式很多种,也包括常见的任意拼贴、参考式拼贴和精致化拼贴。大家可以多试一些平时不怎么用的维度进行拼接,也许会带来不一样的灵感。

▲情绪板拼贴常用方法

 

4、 提取元素建立视觉符号

每个情绪版带来的设计灵感都不相同,所以最终会有多个视觉符号方案。第四个step就是来解说如何从单个的情绪版里提取视觉符号的特征。

▲组成视觉语言最基本的五个维度

 

“形色字构质”是组成视觉语言最基本的五个维度,当你描绘一个东西的样子时,你通常会从这五个维度去阐述。所以,我们也从5个维度来提取视觉符号的特征。需要注意:五个维度不一定需要全部进行提炼,有时候遇到前期已经确定的就可以直接拿来用,也有的不涉及的,比如字体可能在部分图标里没有出现也就不需要提炼。让我们来对色彩、图形、字体、质感、构成这5个维度来细细展开:

 

(1) 色彩

▲快捷工具Dopelycolor对图片进行色彩分析

 

色彩提取常规是可以从情绪版里找出的,最简单的办法就是找出占比高的色彩并判断选择。这里分享一个快捷工具Dopelycolor ,能快速让你提取图片中颜色,以及占比,让你清晰的了解图片用色情况。

▲提炼色彩需要重要关注4点

 

需要注意的有以下几点:1、已有的品牌色是否要延续使用 2、选中颜色需要后期调整三元素,达到最好的视觉效果  3、如果有辅色,主辅色多结合色环考虑合理性 4、你选的颜色是不是和市面竞品太过雷同,是否要做点差异化?

 

(2) 图形

对于我们大多数产品目前现状,符号基础图形是不宜变动的。大环境也是如此,例如很大一部分视频类应用图标都围绕播放三角展开。因为变化会引起用户新的理解,可能会带来识别和理解的成本,所以项目设计师在方案的设计阶段,会多做几个保守的常用图形相关方案。

 

另外,在没有基础图形的产品品牌中,通常需要通过脑暴会去讨论出适合产品的符号基础形态。例如vivo积分商城在视觉品牌探索阶段,组织脑暴会议,邀请项目中各个关键角色一起来发散讨论适合积分产品的货币符号图形(这也是积分定义的视觉品牌符号)

▲vivo积分商城货币符号发散脑暴会现场

 

基础图形获取方法介绍完了后,图形的艺术表达,也就是图形设计是需要我们通过情绪版或者常用创意手法来捕捉的。通过情绪版,我们可以提取出零碎的一些特征,这些通过观察就可以提取了。比如下面这张情绪版图上能得出的共性图形特征有:描边图形、线面结合等。另一张能看出的有:大圆角、简单几何、Q型。

▲情绪板图片提取共性特征

 

特征好提取,但是如何去用于输出我们的视觉品牌符号,这块就依赖各位设计师的设计表达了。到这一步,建议参与的设计师们进行视觉比稿。比稿的设计师们可以看一看常用的6种创意设计手法,这些创意手法都是较常见的,在设计中协助我们创意的迸发。

▲6种常见图形创意手法

 

(3) 文字

严格意义上,符号里的文字也是图形的一种。不过,针对用文字来做的符号,可以参考字体创意设计的10个方法。这里不一一阐释含义了,大家可以在网上找到更多每一类图形的案例和应用解说。

▲10种常见字体创意设计方法

 

(4) 质感

如果要进行质感的提炼和确定,除了从情绪版里能够找到一些共性的东西以外,也可以多在流行趋势、设计网站材质图形相关专题里,去尝试获取思路。在设计方案阶段,可以多去尝试不同的设计质感。

▲质感素材专题

 

(5) 构成

构成通常会用在版式,招贴之类的平面设计中。很多产品标志在构成上都很讲究,图标的内容和留白比例搭配合理,具备设计舒适感。我们在做符号设计时候,同样要非常关注构成,好的构成会让我们的符号更具魅力。常用的图形构成有9种,我们在做图形时候可以多去尝试,也可以叠加尝试,找到适合的构成样式。

▲9大图形构成

 

案例

回到视觉符号提炼的5大维度方法,我们来看下vivo浏览器是如何提炼视觉品牌符号的。由于不同设计师整理的情绪版,方案都不一样,接下来来看浏览器视觉品牌探索众多方案其中的一个例子。

▲视觉符号提炼的5大维度

 

首先来看下浏览器目前一些背景设定,去除既定的情况,我们需要在这几个方面找寻特征(辅色、图形艺术、质感、构成),来完成我们的视觉符号。

 

▲vivo浏览器背景设定

 

在这个方案中,设计师从情绪版提取了想要的特征(图片中蓝色文字):

颜色:从情绪版提出占比较高的颜色,归纳成色组,在色环中逐一讨论去留,去除对比强烈的黄色(因为浏览器作为工具类产品并不想传达出刺激,冲突,过于活力的感受,故去除。)在邻近色(青色、皮粉色)里考虑避开性别因素,青色更加适合。然后调整一下rgb,饱和度提高一些。

图形艺术:延续地球元素,情绪版提炼的:大圆角、简单几何、Q型,描边图形,线面结合。

质感:浏览器在先前资料收集的时候就有倾向,考虑近两年手机背面AG磨砂玻璃广泛使用,界面上苹果和微软也整体设计转向毛玻璃风格,关于这类品质感和空间感明显的处理方式,浏览器设计师也想进行尝试。

构成:结合情绪版和图形构成9个方法,提取并运用的主要特征是动势,也是想赋予符号活力感受。

 

最后,经过草稿比稿,评审通过的方案和确定的符号5个特征如下:

▲vivo浏览器符号的5个特征

 

5、 完善主要页面

视觉品牌符号完成以后,接下来需要继续绘制与符号强关联的页面。这些模块有:loading、缺省、核心页面、插画插图场景。不是把视觉品牌符号简单的原封不动放在各个页面里,而是通过一些设计手法将它更好的融入在页面中。

 

通常,核心页面模块的视觉呈现,都是基于已定的视觉品牌符号特征去发散。目前我们团队有两种不同的思路:一个是从先前符号里提取主要某个特征并结合场景做出版式布局的延展。类似我们做vi时候常用取logo的一部分进行图形组合再创意。另一个是将已定符号的不同特征进行多个组合,创作出符合这些特征的衍生的新视觉。

 

浏览器用的第二种方法,提取出的符号特征和定好绘制要求,其中为了保持整体风格的一致性,需要绘制的模块特征应不少于一半目前特征(满足1/2),如果有新增的特征需要保持和谐,不应该有其它明显的风格倾向。这个也是用来检查你做的系列衍生效果是否整体的标准。经常有同学做了一个很好看的缺省图,但是风格特征与已定视觉符号风格相差甚远,最后导致不能使用。

 

下面是vivo浏览器视觉品牌符号延展的图形或页面样式:

▲缺省图样式(6/8特征)

▲装饰icon图样式(4/8特征)

▲特殊弹出层样式(4/8特征)

▲视频操作引导样式(4/8特征)

▲应用在整体页面效果

 

看完浏览器的符号延展方法,再来感受下另一个方法:通过符号,延展多个版式视觉的案例——短视频视觉品牌探索。项目设计师主要对视觉品牌符号图形特征做了延展,局部提炼并创新版式。

 

下图是短视频视觉品牌符号,基于此为基础型,设计师根据总结的6种手法,用对称、平移 等方式进行拓展,结合页面实际情况完成。

▲短视频品牌符号以及图形应用解说

▲短视频品牌符号页面背景应用

▲ 物料拓展概念

 

6、验证视觉风格喜好

完成主要页面后,我们会进行风格测试,用来验证不同的设计方案在用户眼里的喜好程度,从而修正设计师的认知偏差。我们建议至少完成3个视觉品牌符号方案和对应3套页面来供用户测试。

 

关于风格测试,是将已有的方案通过问卷和简单的线下访谈,得出用户的喜好结论。因为是敏捷测试,只需要一周就可以出结论。在这一步,有5条测试重点和对应解读需要设计师关注,具体内容参考下图:

▲5条测试重点与解读

目前vivo浏览器和i视频都在视觉品牌升级时候,运用了这个较为敏捷的测试方法。

▲i视频视觉品牌3套方案风格测试复盘

▲vivo浏览器视觉品牌升级核心页面风格测试

 

7、完成所有页面的视觉效果

经过用户的验证和后期修改,我们确定好了唯一的一套最合适的视觉品牌。在设计组内部评审+项目组核心成员评审效果通过后,接下来工作就是按部就班的去完成后续页面的规划和落地。这一环节的工作体量较大,需要花时间去梳理替换所有页面。整体t替换预计耗时需要2周左右,建议多些成员参与完成。

 

8、 整理成视觉品牌规范手册

最后一步也是最重要的一步,需要把视觉品牌的设计指导和规范进行沉淀。视觉品牌规范手册是需要项目组设计师一起维护的。好的设计语言是第一步,维护和让其发挥最大价值(原则、一致性、效率)是视觉品牌规范手册的意义。

▲视觉品牌规范手册4大模块

 

目前我们已经梳理出vivo浏览器、短视频的视觉品牌规范手册。内容包括4个部分:品牌概述、品牌符号、视觉语言、物料规范。对产品的视觉品牌理解和如何应用会完整的体现在手册里,建议每一个参与项目设计师都应该在设计前先整体看一遍。

 

结语

 

视觉品牌的定义流程以及方法,是我们团队资深ui设计师第三季度重点研究和探索的产物。希望能给正在做视觉品牌相关工作的设计师带来一些帮助和启发,如果有建议或者疑问,欢迎通过VMIC UED公众号和我们交流,让我们一起优化好这个视觉品牌定义体系,为用户创造更好的视觉体验。

 

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

文章来源:站酷。 作者: vivo互联网UED
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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

 

应用程序设计中的色彩原则

鹤鹤

颜色会潜意识地为观看者提供有关应用程序的大量信息,即使他们从未阅读过任何文字。


什么是色彩心理学?

不同的颜色实际上可以对人类的情绪甚至行为产生深远的影响。这是全球各城市许多绿色和蓝色倡议者背后的想法:绿色和蓝色使观看者感到更加平静和放松。

绿色对减轻压力(和其他因素)的影响如此深远,以至于实际上可以帮助人们延长寿命

这对应用程序设计意味着什么?

嗯,颜色的影响不仅仅是观众喜欢与否,还会影响他们的感受。例如,深浅不一的蓝色会激发忠诚和可靠的感觉。绿色激发舒适和幸福。黄色与快乐和刺激有关。红色让人兴奋并引发欲望。

但是那些不一定是感觉的东西呢?人们是否也倾向于将某些价值观与颜色联系起来?

这项调查要求人们选择与某个词相关的颜色。他们发现:

  • 信任 = 蓝色(34% 的受访者)

  • 速度 = 红色 (76%)

  • 便宜或便宜 = 橙色 (26%) 和黄色 (22%)

  • 高品质 = 黑色 (43%)

  • 高科技 = 黑色 (26%)、蓝色 (23%) 和灰色 (23%)

  • 可靠 = 蓝色 (43%) 和黑色 (24%)

  • 乐趣 = 橙色 (28%) 和黄色 (26%)

  • 恐惧、恐怖 = 红色 (41%) 和黑色 (38%)

应用程序设计人员在开发应用程序时最好牢记这些关联。然而,这些都不是应用程序开发人员绝对必须遵循的硬数据。相反,它们是开发人员可以遵循的指南,并结合下面讨论的其他设计原则。


围绕颜色的文化差异


在选择颜色时,牢记应用程序的受众始终是至关重要的。

例如,在西方文化中,白色往往代表纯洁或纯真。然而,在亚洲的某些地区,白色是用来表示哀悼、厄运和死亡的。显然,如果应用不当,这可能会产生严重的意外后果。

为此,设计人员应该了解他们的受众并相应地选择颜色,这在日益全球化的社会中并非易事。


选择主调色板


应用程序设计人员和公司等都应该在确定其品牌的主要调色板之前进行仔细研究。最重要的是考虑观众和他们想要传达的内容。

蓝色是一种流行的颜色,因为它与信任和可靠性有关,但它也变得有点过度使用了。

橙色可以与廉价联系在一起,但也可以与乐趣联系在一起。

红色可以令人兴奋和振奋,但也代表恐惧。

更好的使用颜色来设计应用将有助于塑造观众的感知。设计人员需要了解颜色关联以及用户如何下意识地查看设计以创建成功的调色板。


色彩和谐


一旦应用程序设计人员确定了主要颜色,就该选择其他颜色了。使用一种颜色很简单,通常不会很引人注目。

但是,选择的颜色需要很好地搭配。

冲突的颜色会让观看者感到不安或有压力。相反,应用程序设计者应该寻求创造一种赏心悦目的组合。一种会让用户感兴趣并让他们对应用程序感觉良好的应用程序,从而引导他们尝试它。

这里有一些设计师可以遵循的基本原则,以在他们的设计中创造和谐的色彩。


单色

首先是在整个设计中坚持使用相同的颜色,但使用不同的色调。这增加了产品的兴趣但又不会很突兀。


类似色

另一个流行的选择是使用类似的颜色。这种方案也很难搞砸,尽管设计人员确实需要了解每种颜色的饱和度。

此方法可以使用色盘上彼此相邻的颜色。例如,绿色和蓝色,或橙色和红色。


互补色

互补色方案使用调色板上彼此相反的颜色。例如,黄色和紫色或蓝色和橙色。

使用互补色时,设计师必须仔细选择阴影和色调。如果做得不好,很容易创建一个视觉上不和谐的方案。

但是,如果做得好,互补色可以使应用程序设计真正流行起来,并在众多其他不那么吸引人的应用程序图标中脱颖而出。这可以使用户更有可能选择该应用程序而不是其他类似功能的应用程序。


分裂互补色


这种方法有点复杂,但可以产生一些引人注目的结果。它采用三种颜色,一种颜色和两种相邻颜色的互补色。例如,从紫色开始,然后添加橙色和绿色。

设计师必须小心使用这种方法,错误的组合会使设计从有趣变成突兀。


正确的应用程序设计颜色

总而言之,应用程序设计中的颜色世界非常复杂。没有一种颜色会吸引所有观众,也不会适合所有品牌。然而,选择正确的颜色绝对意味着一个成功的应用程序和一个普通的应用程序之间的区别。

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

文章来源:站酷 作者:ZZiUP

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

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

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

移动端信息超载设计怎么做?

涛涛

移动端由于屏幕尺寸较小,而产品经常需要展示过多的信息,因此对用户浏览行为进行设计,即“页面信息超载设计”。

     从两个大环境下看待这个问题,一个是移动端产品,另一个是PC端产品,这里我们主要讨论移动端产品。

由于移动端页面尺寸较小的特性,常常无法像PC端那样在一个页面中展现出多信息多任务,因此在面对多级的信息架构设计时,最常规且传统的做法是将某一场景/任务下的信息,通过设计页面的跳转/或增加页面的长度来实现。

但是一个现实的问题在于,用户愿不愿意滑动?根据埋点数据显示,在首屏没有做好内容曝光的前提下,多数移动端页面超过首屏的内容点击量会急剧下滑,说明用户很少主动的查看一屏以外的内容。

因此对于移动端产品来说,一些重要的内容必须保证用户在一屏内可以看到,而用户有必要进一步阅读的内容也需要做好用户浏览行为的引导。

从适用场景角度,可将信息超载的设计类型分为「页面展示信息超载」和「页面版块信息超载」,本文将分为上下两节针对此将进行详细的案例分析分享。

页面展示信息超载

根据不同的用户需求以及适用场景,当用户仅限于当页的浏览时,如何保证大量的信息能有节奏、有目的的传达给用户是我们需要考虑的。

在此类型中主要实现手段有隐藏化设计、场景分页、无限加载、向下展开按钮。

隐藏化设计

在探索更多业务场景的同时,APP的迭代不仅仅是优化更需要考虑功能的叠加,强调不同的场景聚焦于不同的核心信息上成为了重中之重,为了向用户营造一种架构全面而使用简单的用户体验,隐藏化设计的概念可以帮助我们拓展更多交互的可能性。

优势:

  1. 满足用户不同场景不同需求

  2. 产品架构更清晰,用户使用更简便

劣势:
没有提示和线索的隐藏则需要做好新手引导,如早期微信小程序的下滑打开方式等。

适用性:
适用于一些多场景的产品,和用户场景具有明显行为特点的产品功能模块中

交互细节:
结合上面的案例展示,主流app的隐藏化设计主要体现于卡片模态面板、屏幕扩展、浮窗。

卡片模态面板

自从19年ios13发布新设计特性,卡片模态面板就陆陆续续被运用到各大产品中。

  1. 使用热区高频于屏幕的中下方,且手势方便快捷,适合单手操作,因此广泛的用于一些出行类的app

  2. 具有可伸缩的特性,可适用于一个页面的不同场景

  3. 处理当前模态面板的任务时,仍然可以看到面板后的界面环境,并不会让用户有太大的抵触感。

  4. 但是使用时需要注意,模态的用途是切换任务状态,不要仅因为喜欢它的样式和动效而使用。

  5. 不适合用于展示沉浸阅读内容,建议设计于复杂度不高的支线任务。

屏幕扩展

如案例展示的系统负一屏、虾米音乐)

当页面的功能属于重要但低频时,可以考虑使用屏幕扩展进行设计。

此类型常见的交互设计方式有两种:一种是常见于各大手机系统主页以及微信的“负一屏”设计;另一种是app首页的“二楼”设计,如上面案例展示的“虾米番你街”,还有淘宝之前推出的“淘宝二楼”。

使用时需要最注意的是:

此形态的设计和产品卖点已经运营思路是紧密相关的,需要综合考虑

浮窗

这个控件的使用可能会和屏幕扩展的使用联系较为紧密,从微信前期浮窗的使用情况来看,不排除是为了解决当使用小程序时无法接受到新消息,但又怕退出后无法找回而产生的焦虑感而诞生的功能。但同样也是为了解决用户不同场景的不同任务需求。

但当浮窗中只有一个待看文章时,需要单击浮窗后再点击热区才能打开内容,两次点击行为可以考虑是否有优化的空间。

除了隐藏化设计,以下传统页面信息过载的处理方式也值得思考:

场景分页

翻页场景常伴随着分页器的使用,通过上下页翻阅来进行信息浏览。

优势:

  1. 快速告知用户信息量

  2. 可自主性选择浏览内容

  3. 便于定位回找

  4. 浏览信息更有节奏感

劣势:
需要点击跳转来获取更多内容,如果设计不符合使用情景,会在一定程度上打断用户的思路,很有可能就会导致用户的流失。

适用性:
移动端中可适用于一些对内容的掌控更强的场景,需要用户更专注,如后台表单等,

但随着移动互联网的发展与移动设备的普及,早期的网页端社区类产品和线下书籍的阅读也开始尝试转战移动端,可受限于功能形式和用户习惯的使用差异,以至于需要在两端之间做好平衡,去考虑用户操作习惯以及两端适配的问题。

因此,较为早期的一类互联网产品和由线下普及到线上的场景,会采用分页的方式来综合用户在两者之间的行为习惯,我们也可以看到像知乎这类普及于移动端的产品都并没有选用分页的方式进行内容的设计,而是直接设计贴合用户移动端行为习惯的交互方式。

交互细节:
在移动端使用分页器,一般常见为滑动条和动作面板这两种控件进行设计。

仔细去体验了这两款产品,发现它们的分页并不是单纯意义上的分页,而是整合了无限加载与分页选择。

类似于无限加载下滑,但是会自动定位到具体页数上,比如我滑了 6 次,页数就到了第 2 页了。

从这里看出,移动端出现内容加载的情况时,还是以无限加载为主要方式,即使有分页,也是辅助作用。

引发思考:

滑动条的选页方式也考虑在滑动滑块的过程中页面展示跟随滑块位置而变化,选定内容位置后点击确认,否则可以点击取消回到选择前原来的位置。

无限加载

即无限滚动加载,通常以 Feed 流/瀑布流的形式出现于产品中,允许用户通过滚动浏览大量内容而不刷到页面最底层的技术。当你向下滚动页面时,这种技术将会持续地刷新页面。

优点:
沉浸式信息浏览,不会被打断,增加用户参与度,促进用户停留更长时间。

比起小热区范围的点击行为,滑动对于用户来说更为简便更友好,尤其在移动端可以快速浏览到感兴趣的内容

缺点:

  1. 无法预知有多少信息,用户容易产生迷失感,却无法回定位内容

  2. 对页面性能要求更高,用户向下滚动页面越多,页面上承载的内容就越多,会导致页面性能越来越慢

  3. 对设备资源要求更高,在含有大量内容的app中,资源有限的设备(如iPad)可能由于其已加载的内容信息过多而开始降速

适用性:
在移动端更方便使用,适用于快速浏览内容和发现内容的场景,如休闲娱乐为主的社交型产品/资讯性产品

交互细节:
对于这类交互形式,最高频的用户需求是回到顶部和资讯内容的刷新以快速寻找感兴趣的内容。


回到顶部

这类需求常规解决问题的方式是点击界面顶部回到顶部(ios用户常用操作),除此之外最常规的操作是在页面右下角的回到顶部悬浮按钮。

还有一种结合用户心理认知的交互行为设计——底部栏首页icon的利用,如上面案例的淘宝和同花顺,点击首页icon可回到初始位置重新加载,淘宝/同花顺过把这一隐藏操作显性化,并且合理利用用户回到顶部的需求,当用户不断下滑页面时icon变成火箭/刷新的样子,点击后立即回到顶部并可进行所有资讯的重新浏览。


寻找感兴趣的内容

无限加载最大的优势就是能帮助用户快速浏览以找到感兴趣的内容,但当页面本身预加载的内容就都不能吸引用户兴趣,就需要考虑如何通过设计帮助用户找到真正感兴趣的内容。

如上面案例的同花顺和知乎,当浏览同花顺时,长时间没有点击进入任何一篇文章时,在浏览中部就会出现刷新提醒;当在知乎的搜索结果页滑动大概3屏后,知乎会分析判断用户没有找到他想要的信息,于是出现“向知友提问”的按钮,引导用户直接提问自己想要的(亮点之处在于对用户行为进行潜意识分析,而不是全程展示这个提问按钮,避免减少用户实际浏览区域,造成干扰)。

向下展开按钮

在pc端的网页中,为了折中分页和加载的利弊,常常会选用“查看更多”的按钮,点击后向下继续进行加载,同时也能给用户更多的停顿和节奏去主动的获取更多的信息。

而对于不停强调活跃度的移动端的产品来说,向下展开的“查看更多”按钮,不仅仅只是折中的思考,还有运营层面的考虑。

(向下展开更多的情况还分为两种,一种是向下展开更多选择,另一种是向下展开看到全部内容,以下讲的更多是后者)

优势:
产品运营层面

1、增加点击促进引流/转化

引导注册、关注、付费等的转化

2、为精准推荐提供更多依据

网站可以通过用户点击“阅读更多”按钮的行为,获取有效点击的用户数,精准收集用户阅读喜好,开发完善用户画像,便于日后精准推送某个作者、某类作者、某类文章给点击的用户以及相似的用户群体,优化智能推荐。

3、判断文章真实质量

通过文章点击的人数、点开率等对创作者进行管理,便于把控平台内容质量,重点支持优质创作者,从而建立更好的内容生态。

用户层面

  1. 增加半遮面的神秘感

  2. 保证稳定快速的阅读体验,提升加载性能

  3. 降低阅读成本

劣势:
若不是为了提升转化率或者增加曝光率,仅是展示型文章,就会牺牲掉部分的用户体验。

适用性:
适用于需要考核的内容创造者、需要收集更多用户数据的产品

总结

移动端由于界面空间有限,具有「一个界面一个任务」的特点,因此当面临产品增加功能时,不能一味在界面中进行功能的堆积排列,而应该更强调于页面场景化的设计,同时页面中的每一个细节设计都应该做到恰到好处,减少用户思考是否需要使用的精力。

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

文章来源:站酷 作者:六月星光

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

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

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


金刚区的交互设计思考

涛涛

金刚区是什么,想必大家都有所了解。

没有的话看这张图就懂了:

不止画图标!5 个金刚区的交互设计思考

图片来源:淘宝首页

我在微信上搜了一下,发现大部分讨论金刚区设计的文章,都是在讲怎么画图标。

但是我自己在使用各大 APP 的过程中,发现很多金刚区并不是那么好用,而且这跟图标好不好看无关。

金刚区设计不好,会对我的使用造成直接影响:

  1. 不够清晰易懂根本不想去看
  2. 首次使用找不到需要的内容
  3. 下次使用记不住图标的样子
  4. 图标设计得怪怪的不好理解

我今天就来总结一下,对于金刚区设计的交互/体验思考:

  • 数量
  • 顺序
  • 颜色
  • 样式

数量

金刚区里有多少项比较合适?

这其实是米勒法则(Miller’s Role)的典型运用了。

如果你还不太了解米勒法则,看看下面这张图里的词语:

不止画图标!5 个金刚区的交互设计思考

现在,半分钟回忆一下,你记住了多少个?

……

大部分人能记住 5~9 个。

米勒的研究发现,普通人的工作记忆(Working Memory)只有 7±2 个信息块。

如果给的信息超出了这个数字,大部分人也只能记住这么多。

所以说,金刚区里的图标数量,最好也维持在这个数,否则就是对用户的记忆能力要求过高了。

通常来,4 个图标很轻松,说 6 个图标是比较理想的,8~9 个就有点吃力了,10 个就超纲了。

例如支付宝这个就过分了,好在这只是工具类产品,复杂一点也没办法:

不止画图标!5 个金刚区的交互设计思考

顺序

人们在看阅读文字时,视线轨迹是之字形:

不止画图标!5 个金刚区的交互设计思考

人们在阅读表格时,视线轨迹是除草机形:

不止画图标!5 个金刚区的交互设计思考

上图来源:这样设计表格,看着真难受!

虽然金刚区的眼动图我没有,但第一步肯定是从左上角开始往右扫。

不止画图标!5 个金刚区的交互设计思考

所以,用户最有可能使用的图标,应该从左到右排在最上面一行,最不常用的可以排在右下角。

例如美团外卖这个设计,看着就挺合理。不但把重要内容放在第一行,而且还做了很大的视觉区分:

不止画图标!5 个金刚区的交互设计思考

不过一些不愁流量的 APP 会选择把黄金位置用做商业宣传,难免损失点易用性。

颜色

1. 仿真图标

如果追求质感,多半会使用物品本身的颜色,例如每日优鲜这个:

不止画图标!5 个金刚区的交互设计思考

这种图标就没什么颜色好讨论了,注意一下整体和谐就好。

2. 数量较少

如果图标数量不多可以使用一个颜色,那么颜色上,同样没什么好讨论的。

例如 QQ 音乐:

不止画图标!5 个金刚区的交互设计思考

3. 数量适中

如果图标数量在 7 个左右或以内,那么可以每种颜色的图标都来一个,这样用户也能记住大概什么颜色代表什么。

例如京东这样:

不止画图标!5 个金刚区的交互设计思考

4. 数量很多

图标数量远超过 7 时,就不可能每种颜色来一个了,否则颜色都不够用了。

如果还是想要划分颜色,可以将类型作为依据,这样用户在寻找图标时会比较有方向。

当然,其实也可以简单点,干脆都一个颜色,例如联通手机营业厅:

不止画图标!5 个金刚区的交互设计思考

样式

1. 底框

一些产品为了统一感,会用圆圈或者圆角矩形,把所有图标都框起来。

这样视觉上是好处理了,但交互上很不推荐,因为会大大降低图标的识别度,乍眼一看都长一样。

这种底框在主流产品里已经很少见了,不过这么做的设计师还是不少:

不止画图标!5 个金刚区的交互设计思考

这种图标数量少,有颜色区分还好,如果数量多又一个颜色,那就很难辨认了。

风格

纵观常见的金刚区图标,通常不外乎四种样式:线条、形状、2D、3D、仿真。

不止画图标!5 个金刚区的交互设计思考

联通手机营业厅

不止画图标!5 个金刚区的交互设计思考

QQ 音乐

不止画图标!5 个金刚区的交互设计思考

京东

不止画图标!5 个金刚区的交互设计思考

美团外卖

不止画图标!5 个金刚区的交互设计思考

每日优鲜

任何样式都能让用户识别和记忆,但是不同的样式给人的感官不同。

真实性越高的视觉样式,就越容易给人高级的感觉;相反真实性越低的视觉样式,越容易给人简单边界的感觉。

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

文章来源:优设  作者:ZoeYZ

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

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

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



feed流应该如何设计

涛涛

编辑导语:在当今内容为王的时代,传统的信息流无法承载日益丰富的产品内容,一种个性化的内容推荐方式-feed流逐渐孕育而生。本篇文章中作者分析了feed流的组成元素,以及常见的feed流样式。推荐对feed流感兴趣的朋友们阅读。


在这个内容为王的时代,各个类型的产品都开始围绕着自己所处的赛道营造丰富的信息流,传统的信息流不再能承载当下丰富多样的内容,信息流也不再单纯属于信息类以及文娱类产品,许多金融类产品甚至是工具类产品都开始有了社区,不同类型的内容开始进入用户的视野。

因此传统的信息流无法承载日益丰富的产品内容,逐渐一种个性化的内容推荐方式-feed流逐渐孕育而生,其样式丰富,其中包括大卡流、双列流、沉浸流、动态流、文本流、动态流、橱窗流…..笔者将在本文中分析feed流的组成部分,以及使用场景和设计要点。

一、feed流的主要组成部分

笔者调研了不同类型的feed流,发现feed流主要由以下几个部分组成。如下图:

笔者为大家挑选了几个比较常见的元素为大家进行分析。

1. 图片/视频

在大多出产品的feed流中,占最大面积的就是图片或视频。相较于文字,图片更能够激发用户点击的欲望,在带有社区属性的产品中,设计师还需要考虑如何适配横屏以及竖屏封面。

其次是如果该位置出现的是视频。在常见的视频产品中,当系统识别出该内容处于用户界面的中间区域,则会自动进行预告播放。在1-2秒的时间内,用户能够快速浏览视频中最精彩的部分。在展现方式上通常使用带有圆角的距形进行展示,圆角一般设置为:8、10、12、14、16、20PX。

2. 标题

在feed的设计中,标题是最不可缺少的部分,在字体的设计上,大多数采用黑色字体。在排布方式上在一行至两行,如出现标题字数过多,可以用「 … 」的方式进行呈现。其次需要限制产品的创作者以及运营在配置标题时,注意文案应该简明扼要,不要过于累赘。

3. 文案

该区域可以叫做文案区域或二级标题区域,在该区域的设计中,字体颜色建议大多数采用灰色进行展示。在文案的编写上可以加入更带有引导性的词汇用于引导用户点击。

4. 标签

标签的出现目的主要有两个方面,第一个方面是帮助用户能够快速的区分内容的种类如:预告、独播、直播、精选、推荐等。用户可以在众多feed流中通过快速查看标签进行筛选,从而快速找到自己想看的内容。

第二个方面主要是帮助产品进行更加精准的流量分发,产品会根据用户的操作习惯进行分群,再根据用户兴趣给每个群体打上相对应标签。而这些标签则是对应了不同群体的用户,因此也就有了淘宝商城中千人千面的推荐形式。

5. 辅助信息

辅助信息主要是为了满足不同产品的信息呈现,如在视频平台中,辅助信息可以承载电影评分、电视剧的集数、播放量、综艺的更新日期、点赞数、评论等,甚至会加入相关的快捷操作如静音。辅助信息在设计中,不易做的过于突出,需要清晰单个feed的信息层级,挑选必要的信息进行展现。

6. 操作

操作区域的目的是为了产品的算法更加了解用户的偏好,因为用户的兴趣是会发生变化的,如果用户在某段时间突然特别不想看到某些内容,就可以通过点击操作将内容进行「不喜欢」或「减少相关内容」的操作,这样也能给予用户对于feed流一定的自定义。

在交互形式上,点击操作区域后,建议采用较为轻量的交互方式,如点击后出现底部弹窗或气泡的形式。

二、feed流的形式

仅仅了解了feed的组成部分是不够的。单个的feed流其实就像是英语学习中的单个单词一样,单独的去死记硬背某个单词其实意义是不大的,feed流的设计也同样如此。

我们还需要拥有能够将前面提到的组成元素,拆开和重组的能力,因为不同的产品业务属性不同,所需要给用户提供的内容也就不同。接下来笔者就给大家介绍一下常见的feed流形式。

1. 文字流

介绍:文字流多在信息类产品如知乎、百度,或产品的用户评论区当中。此类样式可以运用在以文字为主的feed流设计中,并且还可以与动态流(下文会提到)之间搭配使用。

由于适配度高,可容纳更多的操作按钮,因此可以服务与以UGC内容为主的产品,UGC产品需要强调用户之间的互动,需要将互动类快捷操作外露。

如下图:

使用场景:以文字为主的信息类产品,新闻资讯类产品、评论区、产品发现页/社区

设计要点:在文本流的设计中,需要注意的是区分信息的优先级,其中标题可以采用大字号加粗的方式进行区分,正文则可以采用黑色常规的字体。

操作区域以及辅助信息可以布置在正文的下方,灰色处理,头像以及标签可以作为一个整体进行布局。在交互上,可以将分享/评论/点赞等按钮外露,从而降低用户的互动成本。

2. 大卡流

介绍:该样式主要服务与以图片/视频信息为主要内容的feed流。以淘宝为例,在淘宝2020年提出“逛淘宝”的理念后,不再一味的追求交易的最短路径,而是让用户在首页点击了某件商品之后,进入的是一系列同类商品的feed流,而不是商品的详情页。可以看出,大卡流非常适用于图片/视频信息的展示。如下图:

使用场景:以图片为主的内容且需要搭配相关操作,如评论/进入详情/分享/点赞等。劣势是单排仅显示一条feed,所需空间较大,在首页不适合单独使用,需要和其他feed样式进行搭配。

设计要点:在大卡流的设计中,由于空间较大,需要注意标题和操作区域的摆放位置,其次是需要把控创作者或合作媒体上传的图片质量。最重要的是需要考虑适配横屏和竖屏的封面,由于图片比例的不同,会涉及到相关操作交互一致性以及视觉一致性的统一。

3. 双列流

介绍:笔者认为将双列流带到用户视野的产品非小红书莫属,从小红书发布之初到现在一直采用双列流的形式。它的好处是能够最大限度的将以图片为主的feed内容呈现给用户。

样式最初以长卡样式为主,主要用于适配竖屏图片,但随着现阶段UGC内容的发展,双列流也开始适配横屏封面。如优酷的首页feed,则是采用了双卡流中的短卡样式,也不乏将长卡和短卡搭配使用的情况。

使用场景:主要适用于需要以图片为主的UGC产品,非常适合用于首页,但不推荐与其他feed样式结合使用,容易打破双列流左右两则的排布节奏。对于相关操作按钮从数量上有局限性,不建议外露过多按钮,可以探索长按吊起更多操作的交互方式。在具体的设计样式上,建议参考小红书,仅将创作者与点赞数的操作进行外露。

设计要点:在设计双列流的过程中需要考虑左右两列之间以及上下两行之间的间距,由于内容与内容之间图片的高度不同,标题字数不同,因此需要制定良好的规范,从而保证用户在浏览内容的过程中保证两列内容之间的节奏感。其次是控制操作按钮的个数,需要根据产品实际需求,仅将最总要的操作进行外露。

4. 沉浸流

对于沉浸流的使用最具有代表性的是抖音以及快手,随着各个产品赛道都加入了短视频以及直播间的模块,该类样式几乎能够在所有头部产品中见到。如在淘宝的商品详情页以及首页都加入了直播的模块,点击进入后可以沉浸的了解电子产品的测评或是服装的实际上身效果,从信息传达上会比单一的图片更加多元更具有沉浸感。

使用场景:该类样式主要适用于短视频、直播间

设计要点:由于在不同产品中,短视频起到作用不同。

比如在淘宝,短视频的目的是给予用户更直接的效果展示,让用户能够快速的了解到产品的优点,从而下单。

因此短视频在淘宝详情页中的作用就是激励用户购买,所以会在左下角加入购买的链接。再比如在视频类产品中,如优酷则是提供相关的电影片段,那么目的就是为了给产品中的电影播放区导流,因此在设计过程中也会有相应的改变。

在使用沉浸流的过程中,需要结合实际项目需求,不能将抖音快手的设计方式直接照搬到自己的产品中,这样容易导致产品功能割裂的情况。

其次是需要将功能进行分区展示,如可以将同类的相关操作聚合放置在固定的区域,由于沉浸流功能按钮会非常多,因此对用户容易造成干扰,容易找不到想要操作的按钮。

5. 动态流:

介绍:微博和微信朋友圈是笔者认为将动态流使用的最为广泛的产品,由于在这两款产品中,内容过于丰富,不仅需要适配横屏或竖屏的图片/视频,还需要考虑适配不同数量。

并且需要将所有图片展现给用户,其中还不乏动图。因此对于feed的兼容性提出了极高的要求。

使用场景:动态流可以运用在主打UGC的社区类产品当中,以及单个产品中的社区模块。

设计要点:由于发布内容的主题是合作的媒体以及用户用于记录个人生活,因此动态流的优势非常明显,可以适配不同数量的图片以及用户的自定义标签,因此动态流很难说是呈现以图片/视频为主的内容,还是以文字为主的内容,需要设计师与业务册进行协商,找到feed对于产品的定位是什么。

劣势则是用户难以抓住单条内容中的重点。因此设计师在设计的过程中,需要明确制定相关规范,灵活适配单数或双数的图片数量,从视觉上保证平衡。

6. 橱窗流

介绍:橱窗流在近两年越来越多的出现在各大产品中,由于头部产品都在往超级APP的方向进行发展。

前面笔者给大家介绍的各种feed样式之间都存在着各自的优势和劣势,但是依然无法满足现在日益丰富的产品内容,因此橱窗流诞生了。其样式可以理解为将不同样式的feed进行排列组合,给予用户矩阵式的内容推荐。

使用场景:多用于产品首页金刚区的下方,作为产品中某项功能或服务的入口进行承载,如新品首发、现实抢购、正片回顾等。其次是运用在某类内容的聚合场景下。如将某一类视频形成一个组合的片单,或者是将某一类书籍形成书单,但是由于内容过多,封面难定的问题,此时可以采用橱窗流的方式进行承载。

设计要点:虽然说橱窗流能够承载丰富的内容,容易烘托产品氛围。但是设计师在设计过程中需要对视觉进行整体进行把控,由于单个区域中,可能会出现过多个内容,容易造成页面混乱对情况。因此不宜把单个feed设计对过于出跳,这样容易影响产品的流量分发。

其次是需要区分单个feed之间对样式差异,由于在橱窗流中,单个feed属于内容的集合,因此需要注意区分不同feed之间的样式。

三、总结

在本文中,笔者粗略的分析了feed流的组成元素,以及常见的feed流样式。其中不同的样式各有利弊,并没有某一种万能的样式,因此在设计过程中,需要结合业务目标以及用户目标进行分析,分别分析对于标签/图片/文字/操作的需求,从而设计出最适合产品需求的feed。


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

文章来源:人人都是产品经理   作者:黑羊

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

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

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

为什么要用卡片设计?好在哪,怎么做?

涛涛

很多人对APP中的卡片设计习以为常,但对于卡片设计流行的原因,优点,以及如何做好卡片设计却可能不甚了解。关于这些问题,彩云之前也写过一篇非常受欢迎的卡片设计经验原创文章《想做好卡片设计,原来要注意这么多细节》,文章中讲了非常多的卡片设计实用技巧。今天这篇国外大佬写的文章,算是从为什么这样做的角度来分析卡片设计,一起来学习吧。

 

undefined

从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台,卡片设计似乎是无处不在的,这些大厂广泛应用使得卡片设计很快流行了起来。


作为一个信息容器,卡片能承载包括文本、富媒体、按钮等所有UI元素。基于这些内容,卡片设计可以根据不同的设备和屏幕调整其大小,平衡界面视觉和用户体验。


什么是卡片设计?


卡片是一个UI组件,包含了某一个内容的信息和操作。卡片可以包含各种元素,但它们都应该属于同一个主题。

undefined

这样做的目的是为了避免冗长的文字,并呈现更多的内容。即使从设计的角度来看,用户可能不熟悉卡片的概念,但他们马上就知道如何使用它们,因为它们与实体卡片是一样的。(彩云注:这个就是用户心理学中隐喻的运用)


为什么它会如此流行?


卡片之所以流行,是因为它们能更好的把控内容。卡片是模块化的,所以不同的内容可以堆叠在一起,而不需要注意它们的差异。


卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容,而无需担心设计会变得杂乱无章。


卡片可以将内容分解成易于理解的小块,以便用户与之互动。通过给内容一个容器,卡片向用户表明内容是真实和感性的。


卡片 UI 设计流行的原因还有很多:


  • 直观:卡片在界面中看起来与现实世界中的卡片相同,它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前,它们在现实生活中无处不在:名片、棒球卡、便签。卡片代表了一种有益的视觉类比,它允许我们的大脑直观地将卡片与其所代表的内容联系起来,就像在现实生活中一样。


  • 易于阅读:卡片不占用太多空间,并敦促设计师优先考虑其内容。不同的是,每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。


  • 有吸引力且对用户更友好:基于卡片的设计通常非常依赖视觉效果(尤其是图片);就信息架构而言,视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。


  • 有利于响应式设计:卡片是矩形的,可以平滑地调整大小,以适应不同屏幕的水平和垂直正面,这意味着用户可以在所有设备上获得统一的体验。


  • 便于分享:卡片可以鼓励用户在社交媒体上分享内容,因为它允许用户只分享特定的内容,而不是整个页面。



什么时候应用卡片设计?


这通常是当你有:

  • 基于搜索的界面:  卡片能通过模块的内容快速显示合适的内容,这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。


  • 信息浏览:当用户浏览信息时,卡片的兼容性更好。


  • 任务管理:当可以将流程中的单个任务作为卡片进行说明时, 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好,其中每张卡片代表一个单独的任务。


  • 类似项目:卡片最适合于异构项目的集合(当并非所有内容都是相同的基本类型时)。


  • 可视化分析:  仪表板通常在同一页上同时显示各种内容样本。在这种情况下,卡片类比可以帮助在不同物品之间创造出更明显的差异,其中每张卡片可以适应不同的角色。


卡片解构


卡片的布局可以不同,以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。

undefined

(1)富媒体: 卡片可以包含缩略图,以显示图片,插图,头像,Logo,图标或图形。


(2) 标题: 标题文本可以包含相册或文章的名称或标题。


(3) 描述: 支持文本,如文章摘要或简短的描述。


(4) 行动按钮: 卡片可以包含用于操作的按钮。


(5) 副标题: 副标题文本可以包含详细介绍,如文章的署名或标记的位置。


(6) 图标: 卡片可以包含操作图标。


设计技巧


有一些小的技巧可以快速提高卡片设计细节。


1. 使用相关主题的图片


图片是卡片设计的主角,你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像,卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体,但需要与内容主题相关。 

undefined


2. 增加视觉层次


卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部,并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。(彩云注:视觉层级对于信息表达至关重要!) 

undefined


3. 限制内容长度


一张卡片应该只包含重要的信息,并提出一个相关的观点,以获取额外的细节,而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时,卡片可能会变得很冗长,并失去与卡片类比的实际联系,因为它不再像一张卡片了。 

undefined


4. 避免嵌入链接


不要包含内联链接,卡片应该自己链接。嵌入文字链接会让用户误操作。 

undefined


5. 区分操作主次


包含不同操作的卡片应该在视觉上形成对比。在下面的例子中,我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。 

undefined


6. 去掉分割线


对于新手设计师来说,用分割线来区分内容是一种常见的方式,以此定义不同的组。这些边框会造成不必要的视觉干扰,从而影响内容。

undefined


如何做到视觉上更美观?


APP中的卡片并不是纯粹的拟物概念,但通常情况下,使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下,你可以做几件事:


1. 使用圆角


在形态上与真实世界的卡片进行视觉对比。圆角更有效,因为它们让我们的眼睛容易跟随视觉动线,“因为它更适合头部和眼睛的自然运动”。 

undefined


2. 增加一个轻微的外边框或者投影


增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次,这有助于我们区分UI元素。


然而,在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果,让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。

undefined


3.注意字体和留白


重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白,让用户有时间处理并进行视觉重置,有精力看完一张卡再到下一张。


选择简单和基本的字体,因为基本的排版最大限度地提高了可读性,并有助于浏览。


一些优秀卡片设计的例子


让我们看看一些真实项目中的卡片设计案例:


信息流中的卡片设计


保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构,但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素,以使读卡片的人更容易理解它们。 

undefined

由Diseno Constructivo和Webpixels设计


他们突出特色图片和标题作为最突出的元素,这能帮助用户决定文章或发布的内容是否适合他们。


电商卡片设计


产品卡片是一个很重要的东西,它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意,激发人们获得产品的欲望,激励人们购买,并在搜索结果中得到高效推广。 

undefined

由Webpixels设计


产品的名称应该放在最显眼的地方,这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语,所以你需要一个高质量的产品配图来设计完美的产品卡片。


如果产品有特价,不仅要在价格栏中注明促销价格,还要注明常规价格,以及客户可以节省多少钱。


个人中心卡片设计


简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要,卡片设计在这里也能发挥重要作用。 

由Neelesh Chaudhary设计


就像每一张卡片一样,配置文件卡片也是一个UI组件,它包含了对它所代表的内容至关重要的信息。为了达到你的目标,你要向其他人推销你自己。


确保只包括必要的信息(例如,照片,名字,职业),让你的“关于”页面有剩余的细节来完善你的个人资料。


仪表盘卡片设计


仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型,每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。 

undefined

由Simmmple设计


仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI,允许用户精确地控制哪些数据需要在仪表板的前端做好。


只包括最相关的信息,为用户使用方便。当你的数据集在一起看更容易理解时,找到在一张卡片上显示它们的方法。但是要小心,不要让用户感到困惑。


日常计划卡片设计


看板任务卡似乎是一件非常简单的事情——拿一张便签,写下你需要做什么,然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息,清楚地传达了必须做什么。 

undefined

由Neelesh Chaudhary设计


卡片上包含的信息包括任务的名称和重要的细节,如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”,但是状态可能因项目而异。


卡片结构最适用于添加或删除任务这样的小改变,而不是改变像你的总体目标这样的大想法。


总结


有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片,我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效,而不是简单地作为内容列表的现代替代品。

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

文章来源:站酷   作者:彩云sky

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

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

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

适老化设计研究实践

涛涛

编辑导语:现今以至遥远的将来,我们将面对一个残酷的现实问题:人口老龄化。未来将有很多人群去关注这个群体,但是在市场上,对老年人的产品还是很少的,还存在很多问题。本文应对这个问题,展示不同适应老年人的产品设计细节,我们一起来看看。

当前,我们正面临老龄化问题的严峻挑战。

统计表明,中国的老龄化人口已达到2.64亿,且这一数据仍在持续增长,而老年人在生活、情感上都面临诸多问题。

  • 首先,老年人在视觉、听觉、肢体、认知方面都出现了不同程度的退化,无法平等地获取信息和服务;
  • 其次,年轻人涌向大城市寻找机会,老年人被迫成为空巢者,疫情的发生更使亲人长期两地分离,老人情感孤独缺少陪伴;
  • 另外,疫情的爆发也促使线下服务转为线上化,老年人不能很好适应这一转变,遇到很多困难。

但是研究发现,市场上目前没有产品很好解决了上述问题。

当下移动APP产品缺少对老年人体验的深层次关注与设计,只通过单一加大字号与简化功能等解决基础体验,缺乏通过新技术应用和更全面的适老化设计服务老年群体,老年人的需求依旧未得到关注和满足。

因此,百度基于自身雄厚的AI技术和精细、系统的适老化设计适时推出百度大字版,使老年人更平等地获取信息和服务、获得情感陪伴。

百度大字版精细系统的适老化设计研究实践

百度大字版精细系统的适老化设计研究实践

一、精细系统的适老化设计:易阅读、易收听、易操作、易理解

目前行业内缺失成体系的老年人研究报告,针对老年人的研究资料分散在建筑/平面/医疗/家居等各个行业,同时业内也缺少针对老年人系统的设计标准或设计指南。

现有无障碍设计标准针对残障人士,且部分标准只适用于PC端,不适用于老年人和移动产品。

因此在进行百度大字版的适老化设计时,我们系统的研究了老年人面临的问题、PC端无障碍设计标准及其他相关资料,产出了系统的移动端适老化设计标准体系,同时结合百度大字版实际场景产出了解决方案。

适老化设计包含:易阅读、易收听、易操作、易理解四个方面,后续将详细阐述。

百度大字版精细系统的适老化设计研究实践

1. 易阅读

随着年龄增长,老年人会出现视力下降、色彩感知弱、动态视觉减弱的问题。

老花眼、眼睛进光量减少等问题会导致视力下降。

眼睛晶体浑浊,晶体变黄的现象会导致色彩感知弱。视力减退,注意力降低,导致眼睛失去快速对焦的能力,动态视觉减弱。

因此为了使老年人更易获得视觉信息,我们对界面元素做了一系列的改造,使内容更易阅读。

1)增大字号

增大字号是适老化设计最有效的手段。

PC端WCAG无障碍设计标准建议字号可以放大到200%。

按不同的阅读媒介与人眼距离进行推导,移动端字号大小建议在60px-81px之间,标题、正文、辅助信息等不同信息层级采用不同的字号标准。

此字号标准经过眼动实验和用户访谈进行了双向论证,形成完整覆盖各信息层级的字号大小标准,已经在百度大字版落地。

百度大字版精细系统的适老化设计研究实践

字号与眼睛距离对照图

百度大字版精细系统的适老化设计研究实践

字号标准体系

百度大字版精细系统的适老化设计研究实践

字号应用场景

2)使用符合老年人生理、心理特征的颜色

老年人眼睛晶体变浑浊、变黄,导致对色彩的感知减弱,且研究表明老年人更喜爱温暖明亮的颜色,更希望感受到活力而不是苍老。

因此在颜色的设计上,我们通过增加色彩对比度到不小于3:1、大量使用暖色调、减少紫色和青色的使用3个手段,来进行界面色彩的设计。

百度大字版精细系统的适老化设计研究实践

颜色的选取和使用

3)提供有效的反馈提示

老年人的动态视觉减弱,对动态内容的捕捉和感知速度明显下降。

因此,对界面中短暂出现的提示性信息,我们在现有提示时长的基础上延长了一档。

例如现有提示的停留时间小于3秒时,百度大字版延长到3秒,现有提示的停留时间在3-5秒之间时,百度大字版延长到5秒。

现有提示的停留时间在5-7秒时,百度大字版延长到7秒。超出以上时间则提供适当的关闭机制,避免打扰。

百度大字版精细系统的适老化设计研究实践

提示时长适当延长

2.易收听

随着年龄增长,老年人也会逐步出现听力下降的问题,听力损失程度受地域、受教育程度、疾病等多重因素影响,且高频和低频听力损失程度更深。

因此我们通过增加音量、适当降低语速等方式帮助用户更好的获取听觉信息。

1)增大音量

针对老年人听力下降这一现象,我们适当增大了音/视频的音量。

研究表明,老年人听觉平均感知音量在67.5~75.3分贝之间,因此在视频开始播放时,我们对低于设定值的音量适当增加到约44%。

百度大字版精细系统的适老化设计研究实践

iOS系统音量分布

2)降低语速

为了保证老年人有效的接收到声音信息并进行理解,音/视频的播放速度也需要适当下降。

因此,我们减少了高档位语速,并提供了高、中、低3档语速,使老年人选择适合自己的速度,更有效的获取声音信息。

百度大字版精细系统的适老化设计研究实践

速度档位选择

3.易操作

移动应用需要通过手势交互来完成任务,但老年人的肢体运动能力也会逐渐下降。

动作精准度下降使老年人无法准确的完成手势操作,对动作的精细控制程度降低。

同时老年人相较年轻人运动更加迟缓,逐渐出现操作迟疑、犹豫或暂停,运动幅度或速度也会下降。

因此为了保证老年人可以准确的完成操作,我们采用了增大触控区、降低手指运动距离和精准度要求、提供有效的反馈提示、操作功能显性化等方式。

3)增大触控区

增大触控区是使移动应用易操作的最简单有效的方式,同时视觉设计上也需要让老年人感知到触控区增大。

我们通过对iPhone XS Max三倍屏的分辨率和物理尺寸换算,结合人拇指和食指的点击区域大小,推导出移动应用上,触控区应大于等于112px×120px。

百度大字版精细系统的适老化设计研究实践

触控区域示意

2)降低手指运动距离和操作精准度要求

老年人的肢体运动能力下降,难以完成长距离、长时间、连续、高级的操作。

因此我们集中界面的主要操作在屏幕下半部分,保证用户在使用时手指移动的距离更短,同时减少使用具有明确方向性、精准度要求的高级手势,如双击、旋转图片到正向等。

百度大字版精细系统的适老化设计研究实践

降低手势操作的精准度要求

3)提供明确的操作反馈

为了提醒老年人注意、告知其已完成操作、增强操控感,我们在特定场景增加了振动反馈,如临界值、出错、滑块、警告场景。

百度大字版精细系统的适老化设计研究实践

振动反馈

4)隐性操作显性化

为了减轻用户的学习难度,我们将所有隐性功能或需要手势操作触发的功能进行了显性化设计,如点击底bar刷新,功能隐性不易发现,百度大字版采用动态刷新图标的形式,增强底bar可点击刷新的感知。

百度大字版精细系统的适老化设计研究实践

隐性操作显性化

5)辅助用户输入

现实生活中,很多老年人不会使用输入法,而且肢体运动能力的退化也为输入带来了不便,移动设备的输入法操作区域小难以精准操作。

因此我们依托百度的AI技术,提供了语音搜索和图像搜索能力,使老年人可以方便的通过语音和图像搜索主动探索获取新知,答疑解惑,跟上时代进步。

百度大字版精细系统的适老化设计研究实践

依托百度AI技术提供语音和图像搜索能力

4.易理解

随着年龄的增长,人的认知能力也会逐步下降,老年人会出现反应慢、学习力下降、判断力下降的情况。

他们很难一遍学会新内容,也难以判断信息的真伪。因此我们通过简单直白的文案话术、清晰明确的图标设计、可信的来源设计来使内容易理解,安全可信。

1)采用通俗易懂的文案

由于老年人触网时间短、受教育程度不同,难以理解专业的互联网术语,为了帮助他们更好的使用产品,我们对专业术语都进行了简化,采用了通俗易理解的文案。

百度大字版精细系统的适老化设计研究实践

文案适配前后对比

2)提供清晰明确的图标设计

为了帮助老年人更好的理解和使用产品,百度大字版的图标设计都采用了简单易理解的图形,同时功能入口大部分采用图形和文字结合的方式,通过双重手段帮助老年人理解产品功能。

百度大字版精细系统的适老化设计研究实践

图形对比示意

3)提升信任感

在内容信息来源中或涉及经济交易的环节,百度大字版通过增加官方标签、提供官方平台保障的方式来提升产品整体的可信度,增强老年人对产品的信任感。

百度大字版精细系统的适老化设计研究实践

官方标识和保障示意

4)提供即时的帮助

为了随时解决老年人遇到的问题,百度大字版提供了暖阳热线,使老年人可以随时打电话获取专业人员的帮助和解答。

二、AI赋能,情感陪伴

由于很多年轻人去大城市寻找机会,导致产生很多空巢老人,他们情感孤独,缺少陪伴。

疫情的爆发,更使老年人在节假日也难以与家人团聚。

因此百度大字版通过语音合成等AI能力,还原儿孙亲友的真实声音,用于全局内容播报朗读,使老年人感受到至亲至爱仿佛陪伴在他们身边,缓解老年人的孤单和思念之情。

全局语音朗读也能解决老年人的阅读障碍和长时间阅读导致的视觉疲劳问题,同时可以解放双手,使老年人随时随地听朗读。

百度大字版精细系统的适老化设计研究实践

语音合成

百度大字版精细系统的适老化设计研究实践

全局内容朗读场景

三、丰富内容,充盈生活

百度大字版围绕老年人的实际生活需求,依托百度的内容生态和个性化推荐技术,提供了符合老年人兴趣的图文和音视频内容,一站式满足了老年人的内容消费需求。

  • 在设计上,我们通过AI技术,对视频增加智能字幕,方便老年人获取视频信息;
  • 在内容流的操作上,通过统一的容器和流式交互,为老年人提供便捷的操作体验,使他们更方便、平等的获取信息和内容。

百度大字版精细系统的适老化设计研究实践

智能字幕

四、生活助手,便捷服务

百度大字版还提供了多种实用工具,满足老年人疫情时代和日常的生活诉求。

疫情导致线下服务线上化,因此为了帮助老年人适应这一生活方式的转变,百度大字版提供了在线政务工具。

很多老年人承担了教育孙辈的责任,因此我们提供了一些辅助教学工具,帮助他们带孩子。

更有疫情地图、垃圾分类等贴合日常生活场景的工具,使智能技术更贴近、融入老年人的生活。

百度大字版精细系统的适老化设计研究实践

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

文章来源:人人都是产品经理   作者:百度MEUX

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

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

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

2021-2022设计趋势·社交APP篇

涛涛

互联网社交发展方向

先来看看技术发展和现阶段人口结构的变化对线上社交有什么影响。

1. 技术上:

2G 时代的社交实现了跨地域聊天,用户可以在 QQ 里和天南地北的人聊天,强调在线状态。QQ 号是用户社交虚拟身份的 id,是用户自我创造的线上人设。2G 时代的社交寻求更为方便的沟通方式。

3G 进入了移动社交,著名风投公司合伙人约翰·杜尔提出 SoLoMo 概念(社交化、本地化、移动化)。用户可以基于位置进行交友,比如附近的人;基于行为匹配,比如微信摇一摇。没有在线状态,可以随时随地的联系,随时在朋友圈获取对方线下的生活状态。

4G 时代,手机硬件、大数据和 AI 的发展,大大提升了匹配的效率,高效地建立潜在社交关系。不论是看脸社交还是灵魂匹配,都能在很短时间内找到合适的人聊天。信息传输越来越快,沟通互动的方式不断革新,用户从文字、图片聊天进而习惯于实时语音和视频。

随着 5G 到来,高带宽互联网、云、AR/VR/MR 的高速发展,视频作为主要的信息和沟通载体变得日益普及,疫情让在线沟通和协作越来越方便,更多的线下社交场景转移到线上,线上社交的频次大大增加的同时,副作用也开始呈现,社交隔离让人们感到更孤独,对云社交的需求愈发强烈。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2. 人口结构变化:

独生子女群体在 80 年代出现,但由于父母辈基本是有数量较多的亲兄弟姐妹,因此第一代独生子女的同辈中有较多的表兄弟姐妹或堂兄弟姐妹互为玩伴。而由第一代独生子女繁衍出的第二代独生子女,也就是现在的大部分 00 后,家庭规模越来越小,亲属同辈越来越少,加上人口流动频繁,少有的亲属同辈也较为疏远。

00 后这一阶段的出生率跌至了最低点,平时家庭、学校二点一线的生活,繁重的课业负担,原本在亲属同辈圈的社交就少,在学校的熟人同辈圈的社交也越来越少。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2018 年发布的《00 后来袭-腾讯 00 后研究报告》中说到,“75%的 00 后渴求有更多的时间跟同伴在一起”。00 后在现实生活中缺失的同辈圈社交,更有强烈的诉求去互联网上寻找。他们有着更为复杂的社交需求,通过与同辈圈的互动,建立同辈伙伴关系,从中获得陪伴感、归属感和自我认同,形成自我认知。

回顾这几年社交的变化,技术让社交体验从“线上线下割裂”向“虚拟空间映射真实世界”发展,00 后的线上社交需求更加强烈,我们如何解读用户、解读人群,寻找他们的需求痛点。接下来,本文从自我展示、匹配连接、沟通互动的社交体验路径来探讨社交的设计趋势和特点。

腾讯出品!2021-2022设计趋势报告:社交APP篇

更多样化具象化的自我展示

最初的互联网社交身份是简单的虚拟身份 ID:虚拟头像、昵称、个性签名、QQ 秀,当时的社交体验线上和线下完全割裂,用户的自我展示强调纯线上人设打造。随着硬件设备和图像技术发展,用户慢慢丰富社交资产,用真实身份交友,高清美颜自拍、沙雕表情包和声音名片,线上的自我展示与线下生活紧密联系。而现在,更多人用虚拟形象代表自己,技术的进步让虚拟形象的展示更完美、更逼真。

1. 真实身份展示从单一趋向于全面

用户在展示自我的时候往往需要填写大量文字信息和传输多张精修过的照片,导致编辑成本高、浏览效率低。视频化的普及让用户随时随地记录自己,在这种沉浸式的自我展示中,身份信息传达更加有效和真实,也进一步放大用户的自我炫耀感。

Feels 的个人资料由全屏照片、视频、问答组成,用 story 的交互方式进行浏览。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2. 从声音名片到声音形象,更加赋予了情感和灵魂

语音的优点在于比文字传输效率高,一篇完整的文字自我介绍用语音三言两语就说完了。而语音的缺点是无法在嘈杂的公共环境中使用,所以老年人最爱用语音,因为他们私人空间较多。疫情让人们大大减少了旅游和外出娱乐,享受个人空间的时间变多了,从而缩小了语音使用环境受限的缺点,放大了传输效率的优点。在今年,出现大量语音房社交,语音从“萝莉音”“正太音”的声音社交名片变成展示个人形象的方式。

Clubhouse 带来语音社交热潮,Facebook、Twitter 也相继上线语音房 hotline 和 Spaces,用户可以找到一个感兴趣的主题房进行聊天或围观,那些通过短短几分钟发言就吸粉的高质量用户,通过声音赋予了个人的情感和有趣的灵魂。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Reddit Talk

3. 从“我是谁”到“我们的关系”

展示自我除了从展示者的角度来设计“如何更好的展示社交资产”外,也要从看的人的角度考虑“如何更好地了解他”。

ios15 从 spotlight 输入联系人的名字,对方个人信息会智能拉取你们相关联的信息,包括最近的聊天、共享的位置和照片。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Snapchat 能根据生日、出生时间、地点生成个人星座运势和个性,还能和好友进行星座合盘。通过个人资料之间的交互,强化双方身份的情谊特点。

腾讯出品!2021-2022设计趋势报告:社交APP篇

4. 虚拟和真实之间,越来越强调“真实”

虚拟形象的概念不新鲜了,2003 年 QQ 秀是虚拟形象的雏形,Y 世代网民根据自己的喜好拼出属于自己的 QQ 秀形象,用于 QQ 聊天时的自我形象炫耀和情感表达。Z 世代逐渐成为互联网的主力军时,他们的个性习惯和独特的表达方式让虚拟形象在社交中的使用需求愈发强烈。《Z 世代圈层消费大报告》提出 z 世代五大典型兴趣圈层为:电竞、国风、二次元、模玩手办、硬核科技。Z 世代已经从他们的兴趣中建立了对虚拟形象的情感,兴趣成为他们建立自我人设的重要手段,他们跳出固定人设,在不同兴趣圈层展示多样个性,使用特定冲浪语,以此获得归属感和认同感。

高新技术的发展让虚拟形象变得越来越高质量。苹果的 Memoji、Snapchat 的 Bitmoji 和 Facebook 的 avatars 让虚拟形象成为自己的化身,用于个人资料展示以及聊天表情包、合照、视频互动等场景。Snapchat 最新的资料设计中展示了 3DBitmoji。

腾讯出品!2021-2022设计趋势报告:社交APP篇

依靠面部捕捉、表情捕捉、动作捕捉的技术,实现了真人与虚拟形象的动态同步,降低了真人化虚拟形象的设置成本。在 SXSW2021 音乐节上,展示了 Facebook 新 avatar 系统推出的 VR 社交应用 Horizon。人与人能通过虚拟形象进行实时互动,除了有自己逼真的形象外,还具备真实的眼神表情和肢体动作,还会根据肢体动作变化不同情绪。

腾讯出品!2021-2022设计趋势报告:社交APP篇

大数据和人工智能时代,融合了 AI 技术的虚拟形象也在近几年层出不穷。与真人虚拟形象不同的是,它不受对方在线的限制,能随时进行实时互动,来满足用户对陪伴和娱乐的需求。麦当劳推出一位唱跳型爱豆的虚拟形象,她可以和小朋友进行沟通互动,一起跳舞,跟小朋友讲故事,增加与消费者之间玩伴、陪伴关系。

腾讯出品!2021-2022设计趋势报告:社交APP篇

麦当劳虚拟偶像“开心姐姐”

用户在社交网站分享动态,维系自己的人设,获得群体的存在感和认同感。在未来,这些记录和创作的内容是否会形成自己的虚拟空间?每一个人不同的故事动态与空间产生联系,形成自己独有的虚拟空间社交资产。

腾讯出品!2021-2022设计趋势报告:社交APP篇

5. 社交人格从「完美人设」到「透明人设」

随着好友列表数量增多,很多人开始逃离朋友圈,人们在朋友圈的人设经营也越来越谨小慎微,开始疲于“完美”人设的表达,社交产品开始减压。正如越来越多的年轻服装品牌进行的「透明商品运动」,他们在品牌宣传时,将商品从生产到制作的全过程透明化公开给消费者。「透明人设」是反对当今社交信息流充斥着的完美人设,鼓励自我展示更加真实和未经编辑。

Dispo 复古相机拍摄后需要 24 小时才出片,并且没有任何美图的编辑工具。传达现实生活中不完美的时刻也是值得捕捉和分享的。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Poparazzi 能连续拍照变成 GIF 进行分享,同样也传达未经过编辑的更真实的自我展示。用户用 emoji 进行互动,仅展示动态收到的 emoji 表态数量。

腾讯出品!2021-2022设计趋势报告:社交APP篇

你是否会因为动态无人互动而焦虑?是否会因为很久不更新动态而失去展示的动力,慢慢社恐?instagram 和 Facebook 允许用户隐藏帖子的赞数,来减轻用户的压力和焦虑。

腾讯出品!2021-2022设计趋势报告:社交APP篇

更懂我的匹配

1. 匹配趋向于多元化

调查发现,现实中两位互不相识的陌生人要花 50 小时,才可以在路上叫出对方名字,再投入 40 小时,才能蜕变为真正的友情。互联网帮助用户高效匹配,缩短认识的时间,降低认识的成本。

近几年,用户的喜好正在极速分裂和细化。《00 后来袭-腾讯 00 后研究报告》表明 73%的 00 后会主动地获取资源来发展自己感兴趣的领域。由于现实中同辈社交圈狭窄,他们需要在互联网的社交阵地上寻找更垂类的兴趣伙伴,比如云学习伙伴、游戏玩伴、coscp 等,线上社交在不断垂直细分以便更快捷的连接同辈伙伴。

随着传输速度的发展,匹配连接的体验具有更实时的交互和面对面的互动体验。Distance Disco 是一款云蹦迪平台,疫情期间,大家在各自房间里通过在线视频就能开启一场线上舞会,结识一起蹦迪的朋友。界面上的视觉元素和色块会随着音乐节奏变化,增强迪斯科的互动氛围。

视频链接:https://v.qq.com/x/page/w32687gdpf8.html?start=46

Honk 匹配陌生人聊天的动画,传达了穿越了人山人海,遇见了你的感觉。头像出现时,出现招手动画,像是刚刚见面的人招手打招呼。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2. 匹配提升安全感和隐私保护

现实生活中我们都有意识地保护自己的隐私,而到了互联网,却容易放下戒心将自己的信息分享给他人,线上社交会放大陌生人有趣、友善的一面,却也隐藏了人性的缺点。社交产品的在帮助用户建立社交关系的同时,也要提升用户隐私保护和社交安全的体验。

Instagram 帐户注册时,未满 16 岁的未成年人默认使用私人帐户,仅粉丝才能查看其发布的信息,在平台内容分发和互动上与成年人帐户进行隔离。当用户更改成公共帐户时,会给到提示强调私人帐户的好处。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Snapchat 推出“好友检查”,用户可以快捷私密地删除不联系的人,确保好友列表里仍是真正的朋友。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Tinder 的一项调查显示,40%的人在 Tinder 中发现了前任,24%的人遇到了家人。为了保障用户隐私,用户可以上传他们的联系人名单以选择不想在 app 中遇到哪些人,屏蔽所选的联系人。

腾讯出品!2021-2022设计趋势报告:社交APP篇

更富有乐趣和临场的沟通

在社交产品中,聊天是关键的一环,匹配到合适的用户后,如何加强双方情感连接和信任的纽带让用户为关系而留?从书信到电报到电话到视频通话,都是通过技术的发展获得了更高效真实的沟通体验,线上沟通的用户体验一直不断还原线下的真实体验,疫情加速了多人在线视频通话的发展,既让人在沟通时保持社交距离,又让人感觉对方近在迟尺。

1. 更临场

相较于面对面沟通交流,线上的交流在听觉、视觉、触觉、情绪传递的体验上,决定了用户社交临场感的强弱。

Honk 用文字交流时,能看到对方一个字一个字实时的输出,模拟真实的说话方式。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2021 年 Google I/O 大会的 3D 视频聊天设备 Project Starline,利用多个高分辨率摄像机和深度传感器在不同角度捕捉用户,以 3D 的效果进行人物呈现,营造对方真的就在对面的裸眼 3D 感。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2021 年 F8 大会上,Facebook 提出用于 AR 视频通话的 MultipeerAPI,更方便创作者制作 AR 特效,用于多用户、多屏幕的共享 AR 体验。用户在多人视频通话时,视频中会出现太空或篝火的 AR 特效,让视频者感受到大家都在同一个共享空间。还支持轻量级游戏,多位玩家屏幕由一根曲线贯穿,玩家用脸引导甜甜圈共同完成接力游戏。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2021 年 IOS15 的更新,Facetime 使用的空间音频让通话的听感更加自然、逼真,仿佛在同一房间面对面聊天。

腾讯出品!2021-2022设计趋势报告:社交APP篇

面对疫情人们在生活中的社交礼仪都以非身体接触式动作替代,线上社交的频次和密度大大增加,视频通话在视、听处理上越来越自然和逼真,在触觉上也向着《头号玩家》的男主角在虚拟空间中感受到的虚拟触觉传递到现实中那样在进化。美国西北大学的研究中,一位妈妈与孩子视频通话时,通过抚摸屏幕,能把来自妈妈的抚摸传递到孩子身上的“AR 皮肤”上。未来在虚拟社交中也能获得真实的触碰,加强情感的连接。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2. 更个性

个人展示是单向的,沟通交流是双向的,双方在不断交换彼此之间的状态和感受,从中获得被了解和认可。个性聊天气泡、表情包、自定义聊天背景,帮用户在沟通交流时展现自己独一无二的个性。线上社交的用户语言设计要打造个性化的社交氛围,让用户的个性在沟通中被挖掘和展现。

MUZE 在聊天中可以自由摆放文字、贴图、涂鸦,让交流更个性化和自由。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Google I/O 大会推出的全新设计语言 Material You 中,系统会基于用户选择的壁纸进行自由取色,并应用到 UI 中。是否聊天的 UI 也能随着聊天中的图片,或是聊天发送的表情文字提取心情语义,进行 UI 的变化,加强情绪的传达。

腾讯出品!2021-2022设计趋势报告:社交APP篇

3. 场景化

人和人的社交通常依附于不同的场景,群聊或好友分组就是将特定的社交关系进行场景设定。比如“火锅突击队”“老废物乐园”“吃瓜小分队”依附社交场景来进行互动,帮助用户带入社交氛围。

咖啡馆社交,通过构建咖啡馆场景,传达和陌生人进行一场闲聊的慢社交体验。

腾讯出品!2021-2022设计趋势报告:社交APP篇

森遇

Facebook 的视频通话,用烟花和礼帽的 AR 特效来构建派对的社交场景。

腾讯出品!2021-2022设计趋势报告:社交APP篇

2021 年 WWDC 大会上,现场用不同的 Memoji 营造了线上观众参与会议的场景。

腾讯出品!2021-2022设计趋势报告:社交APP篇

4. 感官刺激

2021 年 Google 的一份统计数据表明,用户平均注意力时长从 12s 下降到 9s,而 00 后的平均注意力仅 8s。面对这样的用户,需要让他们在短时间内获得极大的感官刺激来延长注意力,以及在沟通交流时有更极致的情绪表达。

Honk 可以同时发送大量的 emoji 表情。

腾讯出品!2021-2022设计趋势报告:社交APP篇

QQ 团队运用 Lottie 技术推出每秒 60 帧超高帧率、动效更细腻的小黄脸表情包。

腾讯出品!2021-2022设计趋势报告:社交APP篇

微信的表情包不仅带来视觉上逼真的 3D 动画效果,屏幕上其他内容也会随之震动,还有触感上的冲击。

腾讯出品!2021-2022设计趋势报告:社交APP篇

网络表情包

5. 轻娱乐、游戏社交

《社交媒体趋势报告》提到“和朋友保持联系”一直被列为是使用社交媒体首要原因,但在 16-24 岁的用户中,主要驱动力变为“寻找搞笑和有趣的内容”。青少年通过线上社交弥补线下社交缺口,获得同辈认同,排解孤独和学习压力。“组队开黑”“一起微光”“找长期固聊固玩”,00 后们的社交需求更多放在娱乐、游戏化社交上。社交体验也从物理空间的连接转变到精神空间的连接。

用户在 Housparty 进行视频聊天时,如果感到无聊,可以玩一场轻松的游戏,游戏过程中可以通过视频看到对方的状态。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Snapchat 正推出一种叫 Connected Lenses 的新型增强现实镜头,它可以让不在同一个物理空间的用户一起进行 AR 游戏,比如共同组建乐高模型。

腾讯出品!2021-2022设计趋势报告:社交APP篇

IOS15 中 Facetime 加入 Shareplay 功能,可以与朋友共享屏幕,一起线上追剧、听音乐、玩游戏。

腾讯出品!2021-2022设计趋势报告:社交APP篇

Tinder 在今年推出第二季 Swipe Night 活动,用户通过观看每周一集的互动故事,向左或向右滑为故事中的角色做决定,每一集结束后会匹配到在故事中做出类似选择的用户,并可以继续相关话题的聊天。

腾讯出品!2021-2022设计趋势报告:社交APP篇

结尾

科技重塑了我们的生活。线上社交让我们日常沟通更为方便,也让我们轻松维系现实中的社交关系,越来越多的人依靠它构建新的虚拟关系,互联网带来沟通便利的同时,也减少了人与人面对面交流的机会。

美国传播学家艾伯特·梅拉比曾给出一个公式:信息沟通传递=55%视觉+38%声音+7%语义。大意是人们在现实生活中进行面对面沟通交流时,7%是语言上的内容,剩下的是面部表情、肢体动作、目光接触、语速语调等非语言内容的交流。随着技术的进步,社交不断在补充非语言内容交流的缺失。在自我展示中,无论是视频化、声音形象、富有表情和肢体动作的虚拟形象,还是沟通场景中越来越临场的体验和充满感官刺激的表情符号,线上社交的趋势都在不断映射线下社交的体验。


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

文章来源:优设   作者:腾讯设计

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

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

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


信息流产品个人资料卡如何设计?这些思路供你参考!

涛涛


在信息流产品中,个人资料卡是一个很重要的页面。一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导用户关注;另一方面,消费型用户通过这个页面了解创作者,查看创作者更多内容,是众多消费型用户消费内容中重要的一环。只有把这个循环做好才能长期促进平台生态发展。

这个页面承载着这么多的价值,该如何设计?本篇将以 QB 看点号资料卡升级的设计思路为例,进行分析解答。

前言

在前期分析过程中,我们发现当前版本存在诸多问题。

从数据上看,对比公司内同类产品,关注按钮转化率较低(出于数据保护,数据隐藏)。

信息流产品个人资料卡如何设计?这些思路供你参考!

从样式上看,信息布局较乱,重点不突出。

信息流产品个人资料卡如何设计?这些思路供你参考!

基于以上背景,我们开始对资料卡进行改版升级。

设计前应该思考什么

做任何一个设计前,都应该思考设计目标,否则设计出来的结果没有意义,也缺乏过程依据和支撑。那么资料卡的设计目标是什么呢?这要从资料卡在信息流产品中的使命和价值说起。

一方面,消费型用户通过这个页面了解创作者,查看更多内容;另一方面,创作者通过这个页面展示账号价值,突显账号魅力,引导浏览者关注。

如果创作者能够在资料卡充分展现自己的才华和魅力,带来了更多浏览者的“关注”,那他们就更有动力分享或生产优质内容,进而使产品内容更加丰富;从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存,让内容生产者有更多的涨粉空间,粉丝规模做起来之后再进行商业化。这样对消费型用户、内容生产者、平台方都有利,进而处于良性循环。

信息流产品个人资料卡如何设计?这些思路供你参考!

信息流产品个人资料卡如何设计?这些思路供你参考!

如何进行资料卡设计

了解了资料卡的使命和价值,设计目标也呼之欲出,作为平台方,我们需要帮创作者解决两个问题:辅助创作者吸粉 & 助力商业化变现

当然,创作者产出优质的内容才是吸粉的关键,平台方只能助攻。但不同的信息流产品有着不同的定位和侧重点,吸引着不同的用户,所以资料卡设计的样式也不尽相同。

信息流产品个人资料卡如何设计?这些思路供你参考!

1. 辅助创作者吸粉

在辅助创作者吸粉这里,有两个维度可以思考:

  • 内容展示维度
  • 用户关注维度

内容展示分析

在资料卡中,有三个大区域:头图区、信息区和作品区。

  • 头图区:指的是顶部的头图区域,这里可以让创作者设置个性化头图,展示个性。
  • 个人信息区:主要是作者的基本信息,包括昵称、账号名、简介、粉丝数、认证信息等…这里通常还承载着一些等级、榜单,属于信息展示和官方背书区。
  • 作品区:主要展示账号发布的内容,这部分通常是浏览者最关注、浏览时间最长的部分。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过对比市面 20+信息流产品,我们发现了一些有趣的规律:

信息流产品个人资料卡如何设计?这些思路供你参考!

① 头图区:越是社区类产品,对头图个性化重视程度越高,而资讯类的产品则不太重视。

从产品功能上来看,越是偏向于社区类属性产品,头图区域越大,可自定义替换的范围也越广。从用户使用角度来看,社区类产品的用户也更爱展示自我,头图替换的比例也更大,风格更多样化。而资讯类产品的创作者大多使用默认头图,并不进行个性化设置,自定义头图的比例很小。

所以我们在设计页面布局时,需要思考自身产品定位以及创作者需求,把有限的空间利用在刀刃上。

信息流产品个人资料卡如何设计?这些思路供你参考!

② 信息区:越是追求多元化收益商业化的产品,信息区承载量越大。

创作者不是活雷锋,想让他长久的留在平台必然需要给到创作者更多收益(收益除了显性也有隐形的,比如 B 站,很多创作者在 B 站发文平台收益相比其他平台少,但因为品牌声量大、氛围好,获得了巨大的关注和曝光,所以即使收益低,创作者也会持续在平台投稿)。

除了流量分成外,平台们也在帮助创作者实现多元化的收益,比如商铺、直播、付费课程粉丝圈等。甚至抖音很多创作者直接把商务合作写在了个人简介中招商引资。所以这个区域,随着多元化商业收入的更多尝试,信息承载量也越来越大。

信息流产品个人资料卡如何设计?这些思路供你参考!

③ 内容区:越是长内容,越倾向于展示更多作品和更多信息;越是短内容,越是“看就完了”。

对比多款产品我们发现,越是长内容的产品,在内容区越是注重效率选择。通常会显示更多内容,且单条内容会显示更多维度帮助浏览者决策是否点击查看。猜测可能是因为内容较长,浏览者通常会花费更多精力在选择上。而越是短内容,把单条内容放大,促进浏览者点击,直接“看就完了”,反正一条也没太长时间。

所以设计资料卡时,需要设计者清晰了解自己平台内容特征以及用户行为偏好,做出更合适自己平台风格的设计。

信息流产品个人资料卡如何设计?这些思路供你参考!

综上,在做内容布局展示时,需要综合考虑产品定位,思考这些区域对于产品和创作者浏览者意味着什么。

比如头图区域,资讯类产品并不重视,毕竟账号还是靠内容说话,即便是放张个性化头图,浏览者也不会因此而关注。而且大家都使用默认头图,个性化无从说起,就更没有什么意义了。

那么如何让头图有价值?创作者愿意为此更换,而浏览者看到能够感受到帐号的特殊性?

笔者提供一个思路抛砖引玉,参考 App Store 的编辑精选:只有精选的 APP 才可以有头图权利,其他 APP 都是默认样式。而稀缺性和被认可,正是人类所追逐和渴望的。如果平台选出一些精选帐号,赋予其设置头图资格。作为创作者,非常有意愿去更换,因为可以体现出和其他账号的不同。浏览者也可以通过头图感受到当前账号的优质属性。

信息流产品个人资料卡如何设计?这些思路供你参考!

用户行为关注调研

既然要帮账号吸粉,那么我需要了解浏览者的行为偏好,知晓浏览者根据哪些内容判断是否关注该账号。这里我们线下调研了 12 名用户,了解他们在信息流产品中(产品不限于 B 站、抖音、小红书、知乎、快手等)进入资料卡后,通过哪些信息和元素来决策是否关注账号。

信息流产品个人资料卡如何设计?这些思路供你参考!

通过访谈,我们得到了 12 名用户的原始表述。

信息流产品个人资料卡如何设计?这些思路供你参考!

我们发现,浏览者在关注账号的时候,主要在意“内容是不是感兴趣” 、“粉丝量多少” 和 “内容领域”。少量同学提到了会关注下作品数,其他信息基本不看。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 主要看作者发的内容,把高播放量的看一下,如果都比较感兴趣就会关注。会看一下粉丝量,粉丝量多代表质量比较好,关注不会踩坑。作品数会看一眼,如果作品太少,比如5个以下就不关注了直接看。
  • 只看内容,其他作者资料基本都不看,偶尔看一下粉丝数。教程不看粉丝数,教程如果是我需要的内容,就算粉丝少我也会关注。
  • 主要看作者别的视频,关注主要是为收藏,不看别的只看所有视频。会关注最近内容的播放量怎么样,其他基本不看。
  • 那肯定是看内容是不是感兴趣啊,关键还是看内容,粉丝量和点赞作品数会看一下,但不会作为关注的主要原因。如果粉丝量作品数多的话,关注动力会大一些。其他的都不看。
  • 还是看内容是不是感兴趣。粉丝量分情况,特别需要的内容不关注粉丝量,搞笑类生活类的会看下粉丝量再考虑是不是关注。有一些作者如果只看个别内容感兴趣但整个领域不感兴趣的话不会关注。通过标题大概判断是不是自己喜欢的类型,最主要的还是内容,其他的不看,粉丝量会看一下别太差就行。

而在操作路径上,进入资料卡后:先到作品区查看内容列表 → 拖动页面向上查看更多内容 → 返回信息区查看粉丝量 → 关注账号。呈现先下后上的操作路径。

信息流产品个人资料卡如何设计?这些思路供你参考!

行为路径结合关注决策,有三个关键元素是形成操作链条并绑定在一起:内容、 粉丝数 、关注按钮,且内容为高播放量内容。所以高播放量内容,粉丝数是决策关键,激发下一步关注行为。

信息流产品个人资料卡如何设计?这些思路供你参考!

而且我们在访谈中发现,关注行为也是一个偏冲动行为,用户通常在进入资料卡的几分钟内做出决定,在页面停留时间越长,越不容易发生关注行为。所以在设计中,尽量缩短决策路径,减少决策时间。

基于以上结论我们做了两个方案再次进行测试:

  • 方案1:传统样式
  • 方案2:高播放量内容,粉丝量,关注按钮放置在同一区域,缩短决策路径

信息流产品个人资料卡如何设计?这些思路供你参考!

为什么做一个传统方案进行对比测试也是因为现在很多产品资料卡页面趋同,大家已经形成了认知惯性,而尊重用户习惯也是产品设计中需要考量的因素。接下来,我们又找了 12 名同学进行访谈和测试。

出乎意料的是,大家对于新事物的接受程度很高,有八名同学选择方案 2。虽然只是理论上的选择,并没有延伸到实际行为,但也佐证了大家对于高播放量内容确实存在很高的需求。对于选择方案 1(传统样式)的同学来说,主要是不喜欢横滑操作和不想改变既有习惯。

信息流产品个人资料卡如何设计?这些思路供你参考!

原话摘录:

  • 喜欢方案1,不喜欢横滑,习惯竖着操作,标题清晰
  • 喜欢方案1,横着这样展示好像没有竖着这样展示清晰,喜欢这种长条的样式
  • 喜欢方案2,喜欢这个,重点突出,符合我的习惯,如果高播放量内容都不错我就会关注,省得找来找去了
  • 喜欢方案2,上面这个类似youtube的popular uploads的东西能让你第一眼看出这个UP主牛在哪

不管哪种样式,内容都是重中之重。既然是重中之重,大家也会注意到,有些内容区视频是双列形式,有些视频是单列形式。那么浏览者如何看待这种区别呢?会对关注产生影响吗?

基于两种样式进行访谈,比分最后打成平手。虽然在 2 选 1 的要求下大家各有各的选择,但最后也都表示差不太多,都能接受。从信息利用率上来讲,双列的形态展示的内容更多,而且对视频更加友好,预览图比较大。所以如果是视频内容,可以使用双列大预览图样式。

信息流产品个人资料卡如何设计?这些思路供你参考!

以上是关注吸粉的部分,设计时需要综合考虑产品定位和用户行为特征进行页面布局。

2. 助力商业化变现

商业化能力是创作者与平台形成强关系的纽带。平台为帮助创作者变现,不仅通过各类扶持政策给予补贴, 更是通过整合各类商业资源,不断拓展商业化渠道,打通全流程商业链条,帮助创作者实现内容价值最大化。

一般平台提供商业化有三种类型:

基础工具

  • 商业基础:平台提供流量分成、现金奖励等
  • 商业化功能:打赏、电商功能、内容付费功能、直播功能等
  • 精准推送功能:粉丝分组推送、粉丝必达等

平台政策

  • 扶持计划:出台各类流量扶持政策,赋能变现
  • 奖励政策:MCN 签约、创作活动

资源整合

商业资源整合:整合平台内外部的广告主资源、商业活动资源、投融资服务、新媒体账号孵化等各类资源

资料卡涉及到的商业化展示主要为:电商能力,内容付费,粉丝圈/粉丝付费。当有这些商业化内容的时候,通常占用信息区一行区域,大多数信息流产品多如此。

信息流产品个人资料卡如何设计?这些思路供你参考!

但当多种商业化能力同时提供时,不同的产品给出了不同的解决方案。比如大多数产品合并在信息区的一行,通过横划展示更多,以保证其他内容的露出。毕竟对于浏览者来讲,内容才是最重要的。

信息流产品个人资料卡如何设计?这些思路供你参考!

有一些产品则没有选择合并的方式而每个占用一行空间,与此同时,把创作者的信息展示的也更为详细,可能和本身社区类产品的定位有关,希望更能关注除了内容以外,创作者自身的独特价值。

信息流产品个人资料卡如何设计?这些思路供你参考!

还有一些产品则利用了内容 tab 区域承载橱窗和付费服务,减少信息区的占用,还可以通过逻辑把不同渠道或不同场景的用户引导不同 tab,让浏览者看到更适合自己的内容。

信息流产品个人资料卡如何设计?这些思路供你参考!

总结

资料卡里承载了很多的信息,从创作者的个性展示到内容到商业化变现,需要我们不断平衡每个区域的关系。

别的产品这么做,并不一定适合自己的业务,需要我们找准自己产品的定位,结合当下业务重点去综合考虑。

业务是偏资讯的还是偏社区的?是偏短内容平台还是长内容?有没有提供足够多的商业变现能力给到创作者?商业化能力做的如何?不同模块的用户数据怎么样?只有对现有业务充分了解,才知道哪些是现阶段的重点,才能对一个页面做出更有依据的设计。

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

文章来源:优设   作者:腾讯设计 

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

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

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




日历

链接

个人资料

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

存档