首页

响应式设计应该怎样做?

雪涛

响应式设计是一种页面设计布局,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

什么是响应式设计?

响应式网站设计(Responsive Web design)的理念是:页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等,以适应不同设备;换句话说,页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

简单来说就是:响应式设计是一种页面设计布局,可以智能地根据用户行为以及使用的设备环境进行相对应的布局。


(来自百度百科)


自适应与响应式布局的区别?

实现页面设计布局的响应效果,除了响应式布局,自适应也是常用的一种技术。两者时常被混淆。


我们来概括一下它们之间的区别:



自适应

为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。


响应式

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。不必为不断到来的新设备做专门的版本设计和开发了。



响应式布局的优势?

提高用户体验

通过合理的设计方案配合规范的技术实现,使同一个页面在不同设备,提高屏幕利用率,最大化操作效率,在不同分辨率屏幕上都能有最佳的用户体验。


降低开发成本

响应式的设计只需开发一套代码,同时兼容多种尺寸的设备。不用同时维护好几个版本内容,只需维护一套代码即可。


降低设计成本

设计师需和前端程序员紧密沟通,确定响应几个宽度区间,以及对应的数值区间。根据响应式制定了一套能在多终端适配的设计方案,横向拉通页面以及容器布局的适配规则,一套设计规则能够高效适配多终端。


提高业务迭代效率

业务方在迭代过程中,会考虑多终端不同的使用场景、业务特性,响应式能够基于同一个客户端、后台和运营系统,一次运营多端同步生效,保障业务发展效率最大化。



响应式布局的设计要点?

设计师在做响应式设计时,不仅仅是单纯的缩放页面容器大小就可以了,需要有规律的进行设计,这样能够降低开发人员的开发成本,提高效率。并且需要在设计时,关注设计的界面,是否符合用户的操作体验,交互是否流畅,能不能在各个不同的终端给予用户最佳的使用体验。


响应式与栅格系统搭配使用

响应式设计的前提有两点:页面布局具有规律性;元素宽高可用百分比代替固定数值,而这两点正是栅格系统本身就具有的典型特点,所以利用栅格系统进行响应式的设计高效快捷,搭配使用能够提高设计与开发效率。


Ant Design为例:采用 24 栅格体系。以上下布局的结构为例,对内容区域进行 24 栅格的划分设置,如下图所示。为页面中栅格的 Gutter 设定了定值,即浏览器在一定范围扩大或缩小,栅格的 Column 宽度会随之扩大或缩小,但 Gutter 的宽度值固定不变。



什么是断点?

响应式页面中的容器大小是动态的,我们可以提供给开发在不同的页面宽度区间,对应的布局应该是怎么样的。而这些区间的临界点,就是“断点”。


如何确定断点?

进行响应式设计之前,与产品、前端开发人员共同商讨出自身产品的常用设备类型及尺寸,敲定产品所需要覆盖的设备类型,制定出几个适合自身产品的断点。


以Ant Design 为例:https://ant.design/components/layout-cn/  感兴趣的可以了解一下



为什么页面宽度区间以最小的宽度设计?

设计师在进行设计的时候,考虑极限值,以最小的宽度来进行设计,能够避免内容展示不下的尴尬场景。


响应式布局的响应策略方案?

Ant Design 两种较为典型的适配方案:


一、左右布局

常被用于左右布局的设计方案中,常见的做法是将左边的导航栏固定,对右边的工作区域进行动态缩放。



二、上下布局

常被用于上下布局的设计方案中,做法是对两边留白区域进行最小值的定义,当留白区域到达限定值之后再对中间的主内容区域进行动态缩放。



这两种非常简单的适配的思路,一套完美的适配方案需要设计师根据交互、体验、以及判断页面内容的层级等来进行设计。


三、内容增减

内容增减:部分模块在不同的内容会有显示和隐藏的状态,网页端的内容在大屏幕上展示的内容,在小屏幕场景中部分会被隐藏掉。


如下图:大屏幕中banner区域展示的推荐列表,在小屏幕中被隐藏。



四、布局调整

布局调整。主要是模块的排列和顺序发生变化,常见的就是内容的布局发生改变、模块一行的列数发生改变。


如下图:大屏与小屏幕中的banner的排列布局方式不同。



响应式设计如何交付?

设计界面需要符合前端开发人员编程的方法和需求,所以在设计过程中,需要与开发人员紧密沟通,并且输出对应的设计页面,作出标注,并且与开发人员沟通确定响应策略,而不是依靠口头传达。



在一些特殊的情况下,响应式的背景切图会和普通页面的背景切法不一样,尽可能与前端开发人员沟通清楚需要导出的文件。


总结

响应式设计是一种源自技术的概念,需要设计师与开发人员紧密沟通,共同配合完成。


在写本文之前,参考借鉴了很多文章,更加深入了解了响应式设计的设计原理,以上内容,是对于响应式设计学习的一些复盘及心得,希望对大家有所帮助,如有不同意见,欢迎指正!




文章来源:站酷   作者:船长的成长日记

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

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

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


运营设计中的视觉动线

雪涛

我们的作品信息的传递效率高吗?
什么样的设计是清晰有效的?
想要搞清楚这些问题,首先你得了解视觉动线这个概念。


本文3200字,主要分为三个部分,阅读时间约15分钟。



—————   

      动线


动线一词最早是源自建筑与室内设计领域。指的是人在某个空间内的移动轨迹。例如住宅空间的动线设计,我们会经常听到动静分离的概念,讲的就是动线的设计。住宅动线的设计目的是提高居住体验,减少在室内的重复行走轨迹。


例如家务动线的设计,从进门到厨房再到生活阳台,是家务劳动中最经常行走的路线。通过设计动线,减少家务劳动的行走,就能提高家务劳动的效率。在这里动线越短,效率越高。





在商业建筑领域,动线的设计也被频繁的运用。例如店铺的顾客动线设计,通过兴趣区吸引顾客,引导顾客尽量多的浏览店铺的商品,从而提高销售额。商业空间的动线设计讲究的是坪效(每平米的销售额),动线的设计更侧重迂回。




还有比如动物园、游乐场的路线设计,就涉及到游玩顺序的体验,以及缓解拥堵等问题。因此动线设计的目的在于提高效率,在家居和商业空间领域已广泛应用。而在视觉设计领域,也存在动线的概念。



————————

      视觉动线


大家在生活中有没有遇到这样的情况,你要找的东西就在眼前,但是找了好久仍然没有找到。


人眼之所以能看清物体,是因为视网膜中央有个很小的区域叫做中央凹,这个区域集中了大多数的视锥细胞,专门负责视力的高清成像。


但是中央凹的面积极小,高清区域有限。人眼只有在10度视角范围内才最为敏感,30度范围内可以分辨出颜色。这就导致人眼可视范围有限,一次只能产生一个视觉焦点。因此人眼在观察物体时,没办法一下子看到所有信息,需要逐个地移动搜寻,这种视线的移动过程,就构成了视觉动线


例如我们在阅读文章时,一般是从左到右逐行地阅读,这个阅读顺序就构成了视觉动线。如果文字的排版过于跳跃,没有规律,就会造成视觉焦点过多动线混乱的情况,容易出现阅读障碍,大大影响了阅读体验。





在视觉设计中动线的设计尤为重要,例如下图的banner,左图动线混乱主次不清。右图则能清晰地引导观众从左到右阅读信息,降低无效的阅读成本。
因此构建合理有效的视觉动线,将有助于打造良好的阅读体验,能更高效地让用户获取到信息,避免用户的流失。








我们以运营设计为例,来讨论一下常见的动线类型。在运营设计中,banner和活动专题是最为常见的,这类型的设计,画面往往很有感染力,内容丰富。这里介绍的动线,是指某张banner或者活动头部同屏类的动线轨迹。一般我们可以将常见的动线分为这几个类型:直线型、汇聚型、发散型、扇型、以及Z型。


———————

      直线型


直线型动线顾名思义,就是在一条路径上依次展示信息元素。我们以banner为例来看看如何应用。



在分析动线轨迹的时候,我们应该逐一地寻找视觉焦点。这个案例中我们第一眼看到的是左侧的标题,我们称第一眼看到的焦点为视觉入口点;紧接着视线转移到了右侧的龙身上。这就构成了一条清晰的从左到右的视线轨迹。


banner中只在标题和火焰上使用了色彩,其他背景使用较灰的色系,这使得视觉焦点突出,动线清晰。



2.1.1动线角度  

直线型动线在运用的时候,不一定都是从左到右的横向角度。常见的有对角线以及竖线的形式。


例如左图这张banner就是对角线式的动线轨迹。对角线具有倾斜的角度,容易塑造出速度感。因此这样的动线轨迹往往画面更加的有动感。而竖向的动线一般用在窄长比例的画面中,例如手机端的运营活动。右图的活动页面就构成了从上到下,从标题到主体人物的动线浏览轨迹。



2.1.2视觉焦点个数  

直线型动线中,人们的浏览轨迹是根据视觉焦点的位置进行的。在直线上依次排列视觉焦点,但并不是焦点越多越好,一般2-3个视觉焦点较为合理。较多的视觉焦点反而影响阅读效率。 



———————

      汇聚


汇聚型动线是将用户的视线聚焦到中心的一种动线轨迹。一般有多个视觉入口点来引导用户的视线。




例如下面这张banner,我们的视线会先被左右两侧英雄所吸引,延着他们冲刺的方向视线转移到了中间的标题,这就构成了汇聚型的视觉动线。汇聚型动线在元素摆放上一般具有引导性,最终目的是让观众的视线聚焦到中心,以突出中心的标题或者主体信息。



汇聚型动线的视觉入口点一般在2个以上,例如下面这张活动头部,通过两侧的烟雾塑造视觉入口点,引导观众视线汇聚到中心。是一种侧重突出中心内容的动线类型。




———————

      发散


汇聚型动线是由四周向中心聚集的动线轨迹,而发散型动线则相反,它是由中心向四周转移的动线轨迹。视觉入口点在中心,并逐步向四周扩散的动线类型。



例如下面这个暑假活动页面,就是视线由中心往四周转移的发散型动线。我们第一眼会被醒目的标题所吸引,这就是视觉入口点。之后视线逐步地往两侧移动,依次看到人物、书本、台灯以及两侧的云朵。构成了渐进式的视觉浏览轨迹。



而下面这个四周年的活动,最醒目的也是标题,它将观众的视线聚焦到了中心,之后逐步向四周发散。按照放射的方向,依次浏览了人物、按钮、奖励、圆球等信息。


可以看到发散型动线一般运用在有较多信息元素的画面中,浏览顺序层层递进,比较适合对信息元素进行归类阅读。


4.1入口点位置 

发散型动线一般是由中心往四周发散,视觉入口点一般在中心线位置。不过入口点也有位于边缘的情况。例如下面这张banner,作为视觉入口点的人物位于右下角,通过手势逐步引导观众阅读标题和玩具。是一种单边发散的动线类型。



——————

      


扇型动线一般会在中心线上塑造一个视觉入口点,之后保持着至上而下、从左到右的视线轨迹,这种轨迹就好比一把扇子。



例如下面这个手机端活动,我们第一眼会被可爱的小狗头部所吸引,之后视线往下,看到主标题和副标题,并按从左到右的视线轨迹阅读了标题。这就构成了扇型的动线轨迹。


可以看到扇型的动线轨迹保持了从上到下的结构关系,一般用在画面较长的版式中。容易塑造至上而下、内容由少及多的阅读关系。



—————

      Z


Z型动线是最为常见的类型,它遵循了人们从左到右的阅读顺序习惯。并且在长页面中可以一直做反复的延续。




例如下图的活动页面,我们的阅读顺序就是从左到右逐行地扫视关系。先是主标题,再是副标题,最后是木牌上的信息。这构成了循环的Z型动线轨迹。此类动线比较适合应用于文字类信息较多的画面中。







在动线的设计过程中,比较难的是如何去引导信息之间的先后关系。这里介绍几种便捷的技巧,如何更有效的来设计动线。


————————

      阅读顺序


第一种就是根据人们的阅读习惯来设计,也就是从左到右,至上而下的顺序。因为人的眼睛,左右转动所看到的角度和区域,要比上下转动所看到的要广阔的多。从左到右也是人们通用的阅读习惯和标准,横向阅读也更为舒适。在设计中我们只需要按照从左至右自上而下的规律来摆放信息元素,就能保证有良好的阅读体验。



——————————

      元素指向性


第二种是利用元素本身的指向性来进行引导,特别是主体人物的肢体动作、手势等。例如下图中的banner就分别通过人物的眼神和手势进行引导,让观众的视线转移到标题上,构成了很强的关联性。让动线的引导更为自然紧密。




———————————

      引导线的设计


第三种是引导线的设计,我们可以通过设计一些引导性的线条来引导观众的视线。常见的有放射线,或者虚拟的线条。

例如下图1的banner,就是通过左右两侧放射性的线条来增强引导,让观众的视线汇聚到中心,构成了汇聚型的动线。图2除了蜘蛛的视线引导外,标题文字的透视处理也构建出一条无形的引导线,让整个视线的引导更加紧密自然。在元素本身指向性不强的时候,引导线的设计能让视线的引导更加紧密,有规律。



—————————

      层级的设计


第四种是通过层级关系的设计来构建动线,也是经常要用到的方法,构建层级关系的方式有很多,这里只做简单介绍,有机会再跟大家交流。


例如下面这个活动头部,我们的阅读轨迹是从左到右的关系,先看到左边的人物然后是标题,最后是右边的人物,构成了直线型的动线轨迹。如果我们拉开人物之间的空间关系,我们首先会注意到离我们近的物体,依据远近关系,形成了一条视觉引导轨迹。这就是层级对于视线引导的作用。


通过层级的塑造,可以更有效的来制造动线,引导观众的阅读。



[ 小结 ]


综上,只要我们能够理解动线的概念和目的,在排列元素时就能有更清晰的目的性,设计更有方向感。信息的传递是我们构建作品和观众之间交流的桥梁,也是设计中首要考虑的因素。有效的信息传递才能发挥设计最大的价值。以上仅是个人的观感与体会,希望对大家有帮助。

文章来源:站酷   作者:Tony老司机
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



B端设计师·如何从0到1建立3D规范及组件库

雪涛

大家好,新年了,先祝大家新年快乐。这次分享一下自己学习道路上的小总结,仅此而已,以做纪念。希望能和大家多多交流。感谢。瑞思拜~


本次给大家带来一篇关于如何从0到1的建立一个符合自己产品调性的3D组件库,以及如何运用到日常的工作中去,并可以大幅度提升设计师产出的效率,起到降本增效的作用,还可以赋能给你的业务(尽量体现在汇报PPT中),让你在写年中年度总结的时候不会被问到,“你的价值又在哪里呢?”这种不得不回答的问题。虽然自己感觉还是做的不成熟,但是还是想分享给大家,自己也做一个沉淀,继续努力。我想在你看完这篇文章并且可以做出尝试以后,你和你的老板一定会喜欢。



一.首次升级改版

我们现在看到的无论是阿里云,华为云,腾讯云,金山云等等这些优秀的云产品设计当中,都在大量的使用3D建模渲染与2.5D风格互相搭配的运用。京东云官网也分别在4月和10月份各做了一次大的改版升级,很有幸都有参与到当中,那么就先说4月份的品牌站改版,以下的效果,用C4D的默认渲染器完全可以做到。


1.早期2.5D的积累

这次的改版是第一次从2.5D风格转向3D风格的探索性尝试。再此之前,设计师们有着3年多的2.5D风格组件库的大量积累。面向新用户以全新的面貌向用户传递科技引领,助力全球产业数字化升级,推动实体经济高质量发展的使命。

早期同学们积累的2.5D组件库。


第一次升级后的组件库。


第二次升级后的组件库。


2.组件库及规范的建立

在3D规范的产出过程中,我们严格围绕着新的设计策略「通用」和「差异」两个点相互融合,以提炼设计通用的元素,差异以规范为基础。根据不同的场景化的突出特点,3D及留白节奏的合理使用,突出3D的干脆,严谨,从而约束好网站的整体调性,让用户无论是在视觉感官体验上还是使用体验上都十分舒适。所以我们最后得到的四个关键词即为:探索、开放不封闭、共生攻坚和用户信赖。


3.建立组件库的四个维度

为了利用三维与二位的冲突感凸显视觉表现的主体信息,强化是觉得一致性。表达出通透和呼吸的开放组合。因而我们映射到了色彩,质感,字体,构成四个维度上。


/1.色彩:

在色彩上以京东红为底色,黑色代表着科技专业以及智慧未来。在规范出主色调的同时为了保持京东科技品牌调性的一致性规定了品牌的业务色及辅助色,同时也规范了使用颜色建议的搭配以及占比关系,作为设计师使用时的有效参考。


/2.字体:

在字体上,规定京东朗正体为品牌名称级产品名称字体,在楼层中的字体为方正兰亭黑系列,英文字体为思源黑体。字体行高的1.5倍行距,段落间的上下间距为字号的1倍。



/3.构成:

在构成上,用高度概括简单干脆的几何形式展现,既可以突出文字的信息层级,又渲染了整体的气氛进而增强了页面层级更加清晰的效果,强化了严谨的几何形体,让用户感受到秩序化。


/4.质感:

在质感上,三种不同的材质——金属材质、发光材质以及磨砂玻璃材质。


4.渲染及模型参数

在规范好了基础的四个关键点后,进行了渲染的尝试,最后投票确定了一套大家都认可的效果。并且产出了预设工程文件,方便设计师建立白模且通过设计评审后直接导入进行渲染。


5.动画的渲染及精灵图的制作

为了满足页面中部分鼠标移入移出的交互效果,我们渲染了动效以及精灵图的制作。关于精灵图的制作,在之前的文章当中我们有详细的说明和制作方法,这里就不再赘述。

以上就是我们的第一次3D视觉升级,这一次升级做的还是比较系统且完善的。从构建组件的价值开始到设计策略——竞品分析——实现策略——规范要求——模型——颜色——质感——构成——渲染——动画——应用场景和最后的开发上线。



第二次升级改版

那么到了10月份,为了更加贴合业务和升级产品调性。进行了第二次的改版,这一次的改版我使用了新的OC渲染器以及在原有的基础上做了完善和调整。


1.通用底座的新增

幸运的是这一次改版我就顺手了很多,还是老生常谈规定了规范说明、模型、品牌颜色、质感、构成方式等等。新增了对通用底座的规范。更加规范了使用。


2.HDR环境贴图

由于使用了OC渲染器,对环境的设定以及HDR贴图的使用变的十分重要,尝试了很多效果。


3.灯光参数

至于打光,没有做过度的布置。在环境亮度满足的情况下,只用了2盏补光,并且做了参数的说明。


4.组件配色占比

规定了每种颜色的占比参考。


5.组件渲染实例

下面看一些我们渲染出来的实例。以及我们优秀的小伙伴建模并渲染的Banner。

那么以上就是本文的全部内容,希望能对大家的日常工作有一些帮助。很多地方还不成熟,会继续沉淀把更好的东西分享给大家。瑞思拜。

文章来源:站酷   作者:能补拙
分享此文一切功德,皆悉回向给文章原作者及众读者.

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

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



用例驱动设计,让你的设计更严谨

雪涛

设计师在业务流程中,若想对整体流程有所把控,推动产品方案的落地实现,则可以借用某种设计思路,达成统筹效果。用例驱动也许是一种不错的设计思路。本篇文章里,作者就对用户驱动设计的流程做了整体梳理,一起来看一下。


一、背景

产业赋能如火如荼,B端产品因其复杂的业务逻辑令人生畏,再加诸多角色的分层、平台化技术架构,俨然在构造一个复杂的系统。

单纯基于角色现状的行为洞察、业务流程的梳理,仍不易完整把控其产品设计。从业务方传递到设计方的信息存在断层,含杂其中的体验设计则显得扑朔迷离,设计师较难“从外向内”摸到产品的核心逻辑,遑论其业务逻辑。面对既定的、不完美的“产品结构”爱莫能助,只能试图在框架层或表现层做缓解,长期下来,将失去对设计逻辑的控制。

用例驱动设计,让你的设计更严谨!

复杂的AutoCAD与Inventor工具

我们需要一种能应对该局面的设计思路,有效地连接业务逻辑、产品逻辑,层层渗入对体验的考量,最终构造出既契合B端业务,又具有良好体验的产品服务,设计在此过程中有条不紊的推进和管理。

用例(Use Case)的概念早在1986年就已被提出,它是需求分析的好帮手,可有效地划定范围、锚定用户、区分关系、定义价值,通过不同颗粒度的抽象层次,不断瓦解复杂系统,使设计和管理有序化。

本文基于早已发展成熟的用例驱动设计理念,试图从中找到一条适合体验设计师介入的小径,来应对复杂业务的产品设计(备注:用例、参与者、UML等详细的内容不在阐述范围内,本文仅探索一条可行的方式)。

一、什么是用例

定义:参与者与系统交互的一系列活动的集合。

可以发现,一个用例以一组活动集合来表现,集合中包含两个角色,参与者、系统。参与者是“活的”(不一定是人类),TA的诉求驱动了这一系列活动,此诉求即用例的核心,也是价值的体现。一个参与者可以对系统有多个诉求,详见如下案例:

用例驱动设计,让你的设计更严谨!

由用例驱动的体验设计过程,着重关注对“行为”的设计。与系统的互动“行为”被协调的、有组织的设计后,为界面表现设计建立坚实基础,避免因逻辑的变更使界面设计反复推倒重来。试图通过在界面设计的过程中寻找线索和灵感,反向的去设计背后逻辑是本末倒置的,个中原由在于我们更易于把控具象的视觉感知,较难把控抽象的行为。

二、系统用例和业务用例的关系

在划分用例前,有必要澄清系统用例和业务用例的关系。

业务用例是从客户当前的业务逻辑中抽象出的用例,与数字产品无关,即便没有该产品服务,客户的业务体系也可以流转。新的产品服务实际上是对传统业务体系的替换关系,而系统用例就是从该产品服务中抽象出来的,图示业务侧和产品侧的对接关系:

用例驱动设计,让你的设计更严谨!

用例驱动设计的案例

总述:

为清晰阐释我们是如何利用“用例”这个概念作为切入口,最终一步步驱动、解构、细化体验设计的,下面将完整展示一个注册登陆试用产品的案例进行讲解,本案例为虚拟案例,方便设计过程的串连。

用例驱动设计,让你的设计更严谨!

step1:整理故事与确定用例

故事中包含了用户的行为及其所处情境,将更易于被理解、共情和传递,故事情节的内在联系,上下游的完整性也直指价值的辐射范畴。在开始设计前,我们能从各个渠道收集到相关、相似的诉求,整合这些信息后以“故事”的方式表达出来,非常重要。

本案例的注册登陆试用故事从“企业”、“用户”两个维度进行描述,能确保在用户诉求达成的情况下,也能达成商业诉求,和谐统一的以产品服务提供出去。

1)企业故事

公司统一了Platform账号体系,在保证多设备产品端的一键畅通体验的同时,收集用户行为信息,以提供更精准的售后服务。同时与授权中心合作,通过网上商城定期开展活动,以下放试用天数,获得试用授权。

产品经理与销售部门达成持续的合作,通过试用用户的手机号进行电话回访,提高购买转化率。同时软件的设计应能最大限度的提升客户自发购买行为,需要在何时的时机,合适的位置提供购买入口。

获取用例的方式:

  • sys_运营人员→获取用户信息;
  • sys_运营人员→开展活动。

2)用户故事

新家装项目开展在即,大量的图纸设计使张经理感到困难。

在受到同行推荐的Platform出图软件后,回到办公室,通过Platform官网找到软件信息,并利用现场wifi网络下载安装;迫不及待地启动软件,虽没有购买,但软件提供了试用入口,张经理提交Platform账号后开始试用软件。

连续使用了两天,后面每次自动登录提高了试用的体验过程,产品一键自动化生成图纸初步解决了张经理的烦恼。

经过和集团沟通后,张经理在界面上找到购买入口,并购买软件正版。

他将软件推荐给朋友刘经理,他是Platform造价产品的老用户,且已购买过Platform加密锁,启动软件后,界面自动显示为正式版, 不用登录试用让张经理艳羡不已。

获取用例的方式:sys_采购经理→试用软件。

step2:快速描摹流程图

用户和企业的“故事”是一种情节式的、场景式的描述,它易于想象、理解和整合。

但为了更清晰地辅助设计,我们需要根据描述,进一步梳理出流程关系,将其具象化。

在绘制流程图时,可不用关注角色的职责关系,旨在快速描摹出所涉及到几个业务点的关系,将企业和客户的诉求点包含进去,并在反复确认过程中思考、推敲,大体设计出其中的基本结构。

过程中,可能需要补足新的故事描绘,或对既有的故事描述进行修正,以达成一个诉求与技术实现的平衡点。

用例驱动设计,让你的设计更严谨!

step3:泳道角色化

理清核心业务流程关系后,将进一步绘制其角色泳道图,每个泳道下对应参与的角色。

泳道图仍然是分析过程的一步,它在这里的意义是可清晰地观察到各个模块间的协作互动,是细化过程,各个“对象”的职责不同,他们之间的交互关系存在进一步优化的可能,以保证整体行为的和谐,减低系统冗余。

用例驱动设计,让你的设计更严谨!

step4:业务实体的获取

事实上,带有角色的泳道图仅是在很粗的层面描述了业务所参与的对象,是单纯从流程图层面归纳出来的“对象角色”。

在面对详细的功能分析时略显不足,可能缺失实际参与的“对象角色”,如不分析出来,将导致用户与系统的交互“行为”的缺失。

我们需要进一步挖掘其中涉及的各个参与“角色”,完整地描绘出其交互行为过程,才能对该封闭系统做完整的设计。

从哪里可以获取到全部业务实体呢?当然还是故事。业务实体天然地包含在用户或企业故事中,才得以支撑故事的完整发生,这与故事描述的程度有关,我们第一步就需要填充完整的故事。

备注:什么是业务实体——用于达成业务目标的实体与过程中的记录信息。诸如“点餐”用例中的“打印单”就是一个实体,打印单上的手机号是记录信息。外卖员之所以能将外卖送到你的手上是通过打印单,查看上面的手机号和地址才能找到你。

下面是结合“故事”,进一步获取业务实体的案例,把所涉的可见的业务实体标识出来。

1)企业故事

公司统一了Platform账号体系,在保证多设备产品端的一键畅通体验的同时,收集用户行为信息,以提供更精准的售后服务。同时与授权中心合作,通过网上商城定期开展活动,以下放试用天数,获得试用授权。

产品经理与销售部门达成持续的合作,通过试用用户的手机号进行电话回访,提高购买转化率。同时软件的设计应能最大限度的提升客户自发购买行为,需要在何时的时机,合适的位置提供购买入口。

用例驱动设计,让你的设计更严谨!

2)用户故事

新家装项目开展在即,大量的图纸设计使张经理感到困难。在受到同行推荐的Platform出图软件后,回到办公室,通过Platform官网找到软件信息,并利用现场wifi网络下载安装。

迫不及待地启动软件,虽没有购买,但软件提供了试用入口,张经理提交Platform账号后开始试用软件。

连续使用了两天,后面每次自动登录提高了试用的体验过程,产品一键自动化生成图纸初步解决了张经理的烦恼。经过和集团沟通后,张经理在界面上找到购买入口,并购买软件正版。

他将软件推荐给朋友刘经理,他是Platform产品的老用户,且已购买过Platform加密锁,启动软件后,界面自动显示为正式版, 不用登录试用让张经理艳羡不已。

用例驱动设计,让你的设计更严谨!

step5:时序图的绘制

接下来,我们将进行最重要的一步:基于已明确的核心业务流程和已拆分出的业务实体,构造出一整套完整的系统行为。将使用到UML语言的重要工具——时序图。

时序图能天然地表达多个对象间的复杂行为关系,在产品研发领域应用广泛(时序图的绘制有一整套完整的语法,本文不讲解该部分内容)。

时序图的“对象对话”形式,原生地契合了“交互”这一概念,游戏大师Chris Crawford和设计专家Jon Kolko都对此有所定义:

发生在两个或多个活跃主体之间的循环过程,各方在此过程中交替地倾听、思考和发言,形成某种形式的对话(conversation)

——《Chris Crawford on Interactive Storytelling, 2nd Edition》

所谓交互设计,是指在人与产品、服务或系统之间创建一系列对话(dialogue)

——《houghts on Interaction Design, Second Edition》

时序图重点强调了“行为”的发生与互动,使整体目标达成。一系列有边界的行为活动合集,就组成一个完成的、有意义的“用例”。

让我们再次回到开头的“用例”上来,并将该用例系统化。

用例:

  • sys_运营人员→获取用户信息;
  • sys_客户人员→试用软件;
  • sys_客户人员→授权软件。

用例驱动设计,让你的设计更严谨!

除确保能服务于运营人员、客户外的核心逻辑能达成外,为带来更好的使用体验。我们需要从诸多体验维度考虑各个系统行为。

“体验因子”将作为系统行为的一部分目标,使整个交互活动更易于理解和顺畅。可直接借鉴一些通用的体验因子来评估,对于不同形态、业务的产品,体验因子有所偏重,诸如工具类产品对“操作便捷度”、“工具易学性”、“工具帮助引导”有较高要求。

回到注册案例上来,考虑到“易学性”和“帮助引导”两个体验因子,可以对用户“输入手机账号”的行为进行优化设计,提前或实时对手机账号进行校验,避免出错后再提示,徒增挫败感。同时提供“获取验证码”的触发入口,引导用户执行该操作,很大程度上降低系统的理解负担。

在行为设计过程中,存在颗粒度问题,复杂系统涉及到大量互动会话行为,可以有粗细地逐步细化

用例驱动设计,让你的设计更严谨!

step6:触点行为的竞品调研

完成系统互动行为的设计后,可以开始正式的界面信息设计。“行为”的表达是极度精炼的,行为本身就是价值取向,并暗合用户的内心想法,由用例行为来驱动界面设计,才能真正做到按需设计。诸如“我感到肚子饿,第一想法是吃饭”、“早上该上班了,第一想法是走路去、打车去或坐地铁”。

在面对“输入手机号码”行为的界面设计时,除了个人创新外,也可调研市面上有哪些优秀的界面承载方式,作为一种“学习输入”,或者激发出新的创新行为。这种由内而外的驱动设计,能使设计过程变得更有序,且避免遗漏。

用例驱动设计,让你的设计更严谨!

step7:触点支线、异常、极限情况的排查

最后一步是对支线、异常、极限情况的排查,得益于时序图系统行为的可视化表达,我们可以清晰、有序地排查每一个对话过程中可能出现的异常或错误,诸如“验证码无法到达”、“信息返回错误”等异常,都将被有效地排查出来。

同时,还能从行为对话结构中,洞察到新的设计优化机会点,诸如“提交账号信息”环节,必然需要网络的通畅,故断网环境下需要给出明确的反馈。

如下示例:信息返回错误、异常流程高发地、页面跳转……

用例驱动设计,让你的设计更严谨!

用例驱动设计,让你的设计更严谨!

时序图会话的先后顺序也将直接影响到界面的表达,图示中“输入手机账号”与“填写验证码”是有先后时间顺序的,如果同时在界面中展示两个输入信息,无疑造成并列的误解(可惜市面上几乎大多数注册环节都如此,大家早已习惯)。

三、找到体验的最大撬动点

总结

所谓用例驱动体验设计,是借用例的概念来定义问题和范围,并使用UML来分析问题,使整个设计过程变得有序、系统、严谨,在应对复杂系统、多链路多角色的业务时较为有效。

用例在整个设计过程中是核心的存在,一旦模糊就会出现偏差,引入无关内容,同时也会失去对用户价值的把控。

用例的获取很不容易,而精准统一的用例更难,涉及到颗粒度、抽象层次、参与者、受众等等内容。

撬动点

以用例为中心的体验设计,从业务逻辑出发,转化为系统逻辑,在构建这个过程时就持续考虑体验因素,是把控体验的有效办法,我们站在结构上思考体验,将彻底地优化系统的体验。

单纯从界面表现和框架呈现上做体验优化,上限明显,只有扎得更深,才能从结构上找到优化的“最大”杠杆点,带来体验提升,并有可能直接对研发程序设计带来指导。

而UML的建模语言是有效的辅助工具,两者的配合使这一切成为可能。

用例驱动设计,让你的设计更严谨!


文章来源:人人都是产品经理   作者:酷家乐用户体验设计

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

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

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


六个“反共识”的经营思路,打开 2022 私域想象空间

雪涛

编辑导语:在过去,我们可能会发现一些私域观念在实践过程中会受到限制。在2022年开年,本文总结了6个“反共识”的经营思路,帮助你打开私域的想象空间,实现更多样化的私域运营,一起来看看。


我发现,过往我们对私域的很多观念都是值得怀疑的,比如:

  • 做私域的目的,是让流量得以复用;
  • 想要做好私域,关键是要投入足够多的运营人员;
  • 社群是私域的最强形态。

如果你真这么想,那你就把私域看窄了。2022年开年,为你提供六个“反共识”的经营思路,帮你打开私域的想象空间。

一、拆掉社群的墙

2021年的双11,名创优品靠“快闪群”拉了一波销量。

名创优品有一个数据中台,他们发现:在大促时,不同用户的需求是不同的,如果在大群里群发促销信息,会打扰到群里绝大多数人。

所以,名创优品想了一个办法:建很多个快闪群,每个快闪群只拉对产品有需求的一小波用户,这样,既不会伤害到大群用户的体验,还能精准地转化用户。

就拿洗脸巾群来说,他们先在数据中台提取数据标签,把曾经购买过洗脸巾的老用户找出来,给他们再拉一个社群,在新社群里发布免单活动信息。

同时,名创优品还会把大群里活跃的KOC拉进小群充当气氛组。精准建群+免单福利+KOC助阵,名创优品只用了3个小时就聚集了一万多名用户。

名创优品的快闪群和其它社群最大的不同是:名创优品的快闪群是在服务即时的活动需求,活动结束后不会继续投入精力运营。

这种做法似乎与很多私域操盘手所说的“流量复用”的观点是相悖的。那是因为很多人拘泥于用社群圈住用户,忽略了私域真正存在的意义是构建关系。

美国户外家居品牌Outer,做私域时就跳出了“圈住用户”这个思维。作为一个成立不久的品牌,Outer 没有钱、也没有足够的人力搭建社群,更不用说搭建技术接口、给用户提供1对1服务了。

因为美国用户有定期查看邮件的习惯,他们把家具装修方案发到用户邮箱,用户被品牌理念和产品格调吸引后会主动点击链接。

把新用户吸引过来之后,如何刺激他们下单并实现裂变呢?

Outer 发现大家买了家具,都是直接摆放在自家后院,于是他们将目光投向了老用户的后院。

他们发起了“邻居体验家”项目,邀请老用户把自家后院变成产品展厅,接待想要体验产品的潜在客户,大家坐在一起聊聊自己是怎么和品牌结缘的、买沙发后和家人经历了什么故事、甚至是鸟屎落在沙发上要怎么打理等等。

【梁将军】六个“反共识”的经营思路,打开 2022 私域想象空间

▶️ Outer “邻居体验家”展厅页面

疫情期间,Outer 把“邻居体验家”项目搬到了线上。有位体验家的老用户在网上把后院开放给新用户,隔空给对方介绍产品。最后,这位新用户买了产品,还在生活中和老用户成为了很好的朋友。

这些开放自己家后院的老用户,每次接待完潜在客户,都能额外获得20-50美元不等的酬劳。事实上,在美国能够买得起5000美元家具的用户,在意的根本不是几十美元的酬劳,而是有一个恰当的理由,和自己志趣相投的邻居建立友好的关系。

相比把用户圈在一起,拆掉社群的墙、用兴趣活动吸引用户自发聚集,更能留住用户。

二、交付人情,让客户变成生态的一部分

2014年,为了解决客户投诉问题,阿那亚的村长马寅和业主们一起建立了第一个业主群。

为了保证业主体验,他招了一批颜值很能打、服务很周到的客服。如果业主提出问题,5分钟内必须给出回应,当天的事情一定要当天解决。

除了服务响应速度要快,阿那亚还鼓励工作人员和业主交朋友:有位北京的老业主是位糖尿病患者,但因为疫情出入京很困难,老业主的胰岛素运不进来,阿那亚的客服就亲自帮老业主把胰岛素从北京带到北戴河,解决了业主的燃眉之急。

还有位小业主即将毕业,找实习单位时很迷茫,阿那亚的客服会发动身边的家人和朋友,帮小业主联系实习单位。

阿那亚的私域逻辑是:不是交付服务,而是交付人情。

阿那亚还鼓励价值观趋同、兴趣相投的业主们自主建立兴趣社群,面对面交流。

热爱戏剧的业主共同组建了戏剧社,他们聚在一起讨论诗歌,体验戏剧表演的魅力。后来,戏剧社的群友共同创办了阿那亚戏剧节,每年都会迎来几十场戏剧演出。

阿那亚戏剧节艺术总监孟京辉,甚至把新作《伤心咖啡馆之歌》都带到阿那亚做首演。通过戏剧节,阿那亚把将近240位素人推上了北京一线话剧舞台。

【梁将军】六个“反共识”的经营思路,打开 2022 私域想象空间

▶️ 《伤心咖啡馆之歌》表演画面

现如今,阿那亚业主已经搭建了戏剧、美食、建筑、运动等上百个社群,这些社群衍生出阿那亚电子音乐节、单向街书店文学节等一大批文化活动。

在阿那亚,每年会举办一千多场活动,其中有一半以上都是业主自己对接的。这些文化活动,吸引大批游客从全国各地涌向阿那亚,驱动阿那亚进入商业正循环。

可以说,阿那亚的商业生态是围绕私域社群逐渐搭建起来的。在阿那亚的商业形态中,客户不只是客户,他们是阿那亚生态的一部分,和阿那亚共同享受商业红利。

私域不是榨取客户价值,而是释放客户的价值。

三、私域不是比拼技术和运营,而是内容

我们将意咨询是和赞意合资成立的公司,赞意旗下有个子公司叫赞意增长。前几天,我和赞意增长CEO曾波聊天。他告诉我,现在玩私域已经不是比拼技术和运营的时代了,拼的都是内容。

过去,说到私域裂变拉新,我们立马就能想起来红包。企业设置一个红包金额,你得邀请十几个好友注册账号,才能得到这个小红包。门槛又高,又伤害自己的朋友圈。

去年,赞意增长给安慕希做用户拉新,用的就不是这个套路。

安慕希有一款叫“蓝胖纸”的酸奶,赞意增长把酸奶的三种颜色跟红绿灯结合起来,和一位做过交警的B站UP主谭乔合作,设计了一款“谭sir同款”摘果小游戏。这个游戏跟我们小时候玩的打地鼠很像,只要你的速度超过系统,就有可能获得新产品的优惠券。

有了这个游戏,很多谭sir的粉丝心甘情愿被导流到私域上来,成为品牌的新用户,每个人都自发地玩了将近3次游戏。

当时客户还在跟跑男合作,所以赞意增长围绕跑男,开发了一款裂变小游戏。

在游戏里,用户要和跑男团进行拔河PK,如果对方有2个人,你想要赢过他们,就要邀请超过2位好友参与进来。

用内容链接用户,没有红包和奖励,用户也能自动加入你。

如果一个普通企业想获得目标用户画像,你猜他们会怎么做?

以前,很多企业会邀请一批用户,填写企业的问卷,填完之后,企业可能会给你送几件自家产品,或者包一个红包。后来,大家从数据银行,抓取用户的消费行为,通过数据库描绘用户画像。

其实,这道题还有一个解法:靠内容获取兴趣标签。

赞意增长发现大家都很喜欢《跑男》里撕标签游戏,所以设计了一款贴标签小游戏。用户邀请好友进入游戏,可以互相贴标签,如果你认为自己的朋友是个吃货,那就给他贴一个“吃货”标签,如果他很内卷,那就给他贴个“斜杠青年”标签。

这些兴趣标签数据,最终都会进入客户的数据库,辅助他们完成用户画像。在后续的私域运营中,他们可以依据用户的兴趣标签,策划内容活动。

比如在有吃货标签的用户群中,策划和试吃有关的内容;在斜杠青年多的社群中,发送补充精神能量的小贴士等等。

相比于用问卷和用大数据捕捉用户标签,用内容创意辅助完成用户画像,成本更低效率更高。

接下来,将意和赞意增长会尝试把「故事链」方法论跟私域结合起来,寻找更多用故事化内容经营私域的方法。

四、关键不是怎么“去运营”,而是怎么“去运营化”

做私域总归绕不过社群,但我发现,很多人被社群话术模板洗脑了:用户入群有欢迎语、每天下午会有下午茶问候、促销节点还有特定的提醒话术。

建立了话术模板之后,一大波企业的运营群是这样的:

【梁将军】六个“反共识”的经营思路,打开 2022 私域想象空间

某个食品品牌,甚至制定了严密的运营计划:周一、三、五KOC种草、周二通过科普知识输出价值、周四推出限时秒杀活动、周五提出话题,和群内成员一起互动。

模板化运营下,每个文字都是编辑仔细雕琢之后发出来的,很少出错。不同的小编运营这个群,用户都不会觉得有太大差异。

模板化运营最大的弊病是人情味丢失,大家看消息就像看资讯,很难对品牌产生真感情。

相比之下,日食记的对话方式套路感就少了许多:

【梁将军】六个“反共识”的经营思路,打开 2022 私域想象空间

日食记跟用户对话的语气很真实,即使知道对方是官方运营,那也是有人情味的运营。

前几年,我认识了W公司的创始人李三水老师,他把我拉进他们公司的社群——“野狗舱”,这个社群都是W公司的“伙伴”,大家每天都在一起讨论最近有什么好听的音乐、自己喜欢的画作、哪部广告片又出圈了。更夸张的是,有位粉丝活跃得像水军一样,经常给群里的小伙伴们讲《易经》。

有意思的是:这个社群基本上没人专门运营它,完全是用户自发地聊天。一家广告公司,正常做的是2B生意,凭什么能聚集一个2C的社群呢?

我觉得得益于W公司的价值观。比如“不做创意人,只做创造者”、比如他们口中的“野狗精神”,这些锐利的价值观,很是吸引年青一代,让他们彼此产生认同。

私域运营的关键不是怎么“去运营”,而是怎么“去运营化”。

“去运营化”最基本的操作是:摆脱模板套话,交流语态重新回归人与人的交流状态。

另外一个和“野狗舱”氛围很相像的,是公众号毒眸的社群。他们的主理人眸爷也是常年在群里潜水,但不管群主在不在,群里的粉丝每天都很活跃。

跟“野狗舱”不同的是,毒眸社群的粉丝讨论的内容会比较聚焦一些,都是最近哪部电影又火了、哪部电影制作班底不行。这个元旦假期,大家都在群里讨论“《穿过寒冬拥抱你》可以去看吗?”、“要不要看《爱情神话》”等等话题。

毒眸是一个专注电影或电视剧分析的公众号,粉丝都是因为对娱乐内容拥有强烈的兴趣,才聚集到社群里的。而W公司的社群,粉丝们是因为受到W公司价值观的影响,自愿聚集的。

“去运营化”不是撒手不管,而是设置合理的价值导向,能够感召用户、自发地交流。

五、私域流量变“私域经济”

前几年,日食记上线了一档美食节目《深夜一碗面》,这档节目其实是为了推广他们的自营产品手延素面,做了几期之后,他们发现用户很少关注面,都在问“在哪里可以买到这种葱油酱?”。

日食记的团队想,既然用户需求这么高,不如自己生产产品满足他们。于是,他们跑流水线、跑供应链,花了半年时间研发出葱油酱,产品一上线就火了。

【梁将军】六个“反共识”的经营思路,打开 2022 私域想象空间

这款葱油酱,正式帮日食记打开做私域的格局:将私域流量做成私域经济。

跟传统生意模式不同,日食记的私域生意是C2B模式,即用户驱动生产。

他们研发产品不是拍拍脑袋决定的,而是从内容中洞察消费者需求,拿着需求联系供应链,以客户需求为引擎,倒逼工厂“柔性化生产”。

去年11月,名创优品的草莓熊玩偶成为爆品,采用的也是日食记同款模式。

名创优品在做新品策划时,先在私域调研过消费者需求,根据需求安排买手做样品。然后将样品拿给微信群里的用户投票,用户投票投出来的产品,才会在小程序进行新品预售。预售结束,名创优品才会拿着订单,找工厂大批量做产品。

产品正式上线后,他们还会在社群和直播间进行产品试卖,根据用户实时反馈,再次进行产品升级。比如用户希望有更大的、能够搂在怀里的草莓熊,他们就根据需求,开发出PLUS版本。

私域流量变“私域经济”,不是卖更多的货品给用户,而是和用户共创产品、共创品牌。

六、私域的终极形态:从社群到社区

2005年,乐高发起「乐高大使」计划,从全球30多个成人玩家团体中挑选出20名大使,每个大使背后都有大大小小不同的社群,乐高只需要对这些社群进行官方认证,形成专属RLUG(Recognized LEGO User Group),就能激发玩家对品牌疯狂的爱护。

围绕认证社群,乐高推出了乐高大使平台LAN(Lego Ambassador Network),玩家在这个平台上能够看到所有认证社群的简介,大家可以在这个平台上畅所欲言,和品牌方交流对产品的看法。

乐高通过链接超能力「玩家」,建立起一个庞大的社区生态。

2014年,乐高搭建专属线上社区——LEGO Ideas,在这个平台上,大家DIY自己对乐高未来的想象,进行创意提案。如果有讨论热烈的创意,乐高就会把它们研发成产品,并推向市场。像NASA的土星5号火箭套装、美剧《老友记》的Central Perk玩具套装都是用户提议创造的产品。

2020年,乐高还和内容制作平台Tongal合作,建立LEGO World Builder(乐高世界建筑师)平台,鼓励创作者们和乐高相互合作,一起孵化新创意。任何18岁以上的人,都可以加入社区,创作自己的故事,也可以与其它作家、动画师一起进行内容创作。

【梁将军】六个“反共识”的经营思路,打开 2022 私域想象空间

表面上,乐高耗费巨大物力财力,为玩家们搭建了很多个交流空间。实际上,社区是个无限游戏平台,也是乐高的创意银行,只要社区存在,乐高就能一直获得收益。

这就是私域的终极形态:从社群到社区。

得到搭建了自己的知识社区,而不是知识社群,你猜为什么?

假如吴伯凡老师在得到授课,但他不是看完你的留言后跟你交流,而是在社群里和你即时交流。上完《认知方法论》,他就在群里@你,让你回答一下“认知的「微创伤」是什么?”

你会不会突然有一种被老师提问的紧张感?我猜你应该会紧张的。

这就是社区和社群最大的区别:

社群是一个相对狭小和封闭的空间,为即时交流而存在,人们在社群中社交压力更大;社区是个相对自由的平台,用户在社区可以自由选择是否要聚集,社交压力相对小一些。

社群为交换信息存在,和商业目的是对立的。社区是一个包容性平台,用户接受生意信息更容易。

社区的自由度和包容性,让它成为容纳生意信息的最优选择。

回顾一下,我们共同消化了六个“反共识”的私域经营思路:

  1. 拆掉社群的墙;
  2. 交付人情,让客户变成生态的一部分;
  3. 私域不是比拼技术和运营,而是内容;
  4. 关键不是怎么“去运营”,而是怎么“去运营化”;
  5. 私域流量变“私域经济”;
  6. 私域的终极形态:从社群到社区。

七、结语

企业运营私域的方式不断在进化,但大家做私域的焦点一直模糊的,放不下对场域的执念、摆脱不了对工具的依赖,却唯独忽略了一点:对用户关系的打磨,才是私域的底层逻辑。


文章来源:人人都是产品经理   作者:梁将军

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

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

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




PAG揭秘篇|高效动画解决方案

雪涛

在终端APP中,动画非常常见,它可以辅助视觉制造焦点,同时也可以让用户交互更加顺滑,但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端APP上是业界不断探索和解决的问题。


图1 传统动画实现流程图


当前最好的动画设计软件是Adobe After Effects(简称AE),从AE动画制作到终端APP呈现,传统的实现方式如图1所示,有三大痛点:实现成本高、沟通成本高和性能难以保证。


近几年,业界诞生了像Lottie、SVGA这样的动画工作流解决方案,虽然在一定程度上提升了生产效率,但存在AE支持能力有限、动画性能难以保证、配套工具支持有限的问题。


1 :PAG解决的问题

——————————

PAG(Portable Animated Graphics)是腾讯PCG发布器中台自主研发的一套完整的动画工作流解决方案,助力于将AE动画方便快捷的应用于各平台终端。PAG的流程图如图2所示,设计师在AE上设计出动画后,可以通过导出插件导出pag文件,同时PAG提供了桌面端预览工具,支持实时预览效果,在确认效果后,通过运行配置上线,各平台终端可以通过PAG SDK加载渲染pag动画。


图2 PAG动画工作流流程图



与Lottie、SVGA相比,PAG增加支持了服务端。除此之外,如图3所示,PAG动画方案在导出动画文件大小、AE特性支持和可编辑性方面具有较大的优势。


图3 PAG和Lottie对比图


2: PAG支持的AE特性能力

——————————

2.1 矢量特性能力的支持

和Lottie、SVGA实现不同的是,PAG不依赖平台端渲染接口,可以实现各平台的渲染一致性。PAG与Lottie、SVGA的矢量能力支持如附表1《AE特性能力支持》所示。


2.2 BMP预合成--全AE特性支持

无论是PAG还是Lottie、SVGA,所支持的AE特性仅仅是AE众多特性中的很少的一部分,这在一定程度上限制了设计师的创造力。针对这个问题,PAG新增了BMP预合成的导出方式,支持导出所有AE特性,适用于不可编辑的场景。其原理如图4所示,在合成的层面将渲染结果截取成图片,然后进行视频编码。

图 4 BMP预合成原理图



针对视频不支持透明通道而动画需要包含透明通道的问题,在编码的层面扩展了透明通道的支持,如图5所示。


图6 PAG矢量和BMP预合成混合导出




3: PAG导出插件

——————————

3.1 不支持AE特性提示

针对导出动画和AE设计动画存在偏差的问题,PAG导出插件增加了使用了不支持AE特性提醒功能,如下图7所示。

图7 PAG导出面板


在预览界面,同样有不支持特性的提示,如图8所示。

图8 PAG导出面板预览窗口


在使用AE设计动画的过程中,设计师可以方便快捷的提前查看使用了那些不支持直接导出的AE特性,换种实现方式或者导出成BMP预合成,有效的解决了设计动画和导出动画存在偏差的问题。


3.2 BMP预合成一键设置

在AE动画设计的过程中,PAG导出面板提供了一键设置BMP预合成的方法,如下图9所示。需要提示的是,一旦设置了BMP预合成,该合成中的文本和图片将不能再被用户编辑。


图9 BMP 预合成设置


由于BMP预合成可能会影响到可替换图片的数量,PAG同时会实时更新可替换图片的数量给设计以提示。


3.3 图片填充模式设置

在用pag设置的素材中,经常会遇到用户填充的图片与默认占位图尺寸不一致的情况,在导出面板中PAG增加图片填充的四个规则,如图10所示:


图10 可替换图片填充设置



其中:


不缩放:画面不缩放,从左上角位置开始裁剪


黑边:在保持高宽比的情况下缩放到设备的可用屏幕大小,图像不发生变形,如果图片尺寸和填充区域比例不一致,会出现黑边,为默认填充模式


拉伸:不保持宽高比填充,会发生失变形


裁剪:在保持高宽比的情况下缩放到完全填满可用的屏幕大小


具体效果如图11所示。


图11 图片填充效果图


4桌面预览工具PAGViewer

——————————

4.1 效果预览

PAGViewer支持桌面端预览PAG文件动画效果,如下图所示。支持查看动画文件中包含有多少个可编辑文本和可编辑图片,且支持设计师本地填充素材,实时预览填充效果,无需等待上线后才能确认真实效果。图片占位图支持填充图片或视频,如果PAG文件内置了音频文件,支持播放音频效果。具体效果如图12所示。

图12 PAG效果预览



4.2 性能检测

在pag动画实际使用的过程中,PAG经常遇到的问题是设计师辛辛苦苦设计的动画在终端上性能表现不佳,需要进行返工优化,同样的问题在使用Lottie方案时候也会存在。


除了效果预览,PAGViewer还增加了性能展示面板,可以很方便的看到pag动画的基本信息,如时长、帧率、尺寸、bmp预合成的数量,图层总数等,还有量化的性能指标,定量的评估pag文件的性能,如图13所示,方便设计师进行针对性的优化,而不需要等到上线前才会暴露性能问题。具体效果如图13所示。


图13 PAG性能展示面板




5: PAG的应用场景

目前PAG方案已经广泛应用于腾讯公司内外几十款产品中,涵盖了众多的国民级应用。



总结下来,PAG目前主要使用在以下几大场景:


5.1 UI动画

图15 UI动画场景


设计师设计出动画文件后,研发只需要替换预设的文本内容即可,并且文件体积非常小。


5.2 贴纸动画

图16 贴纸动画场景


5.3 照片/视频模板

图17 照片/视频模板场景


PAG支持将内置的图片作为占位图替换,并保留所有动画效果。因此可以将整个PAG动画设计成一个模板,把预设的占位图替换成用户选取的照片,自动套用效果生成视频。全程可以让设计师自由批量生产模板,无需研发介入。


仍然基于图片替换原理,PAG也支持将占位图替换为视频,实现视频模板功能。



5.4 智能剪辑

图18 智能剪辑场景


智能剪辑是围绕用户上传的视频内容,生成定制化的模板,模板本身是不固定的,可以从多个PAG文件组合而成,类似活字印刷。设计师可以利用这个特性,构建自己的特效组件库,然后对接AI的识别能力,根据一定规则组合得到无限数量的模板效果,可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能,随机生成游戏高光时刻视频。


文章来源:站酷   作者:腾讯ISUX

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

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

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


如何通过品牌符号打造差异化产品?

雪涛

互联网产品同质化越来越严重的情况下,如何打造产品差异化与品牌调性,是每一个设计师都需要去思考的问题去面对的挑战。


前言

最近在做项目的过程中,发现同类竞品的同质化非常严重,在思考如何做出符合自己产品品牌调性设计方案的过程中,发现运用品牌符号能很好的与竞品公司在设计上拉开差异化,提高品牌的辨识度。
因此对品牌符号进行了的分析学习运用,一方面是对自己学习的总结,另一方面是分享给大家自己学习的心得体会。



什么是品牌符号?

品牌符号是区别产品或服务的基本手段,通过视觉、声音、语言、颜色等各种各样的符号,与消费者从精神层面上沟通,这些识别元素形成一个有机结构,对用户施加影响。它是形成品牌概念的基础,成功的品牌符号是公司的重要资产,对于企业而言是最节省沟通成本的做法。


品牌符号的作用?

在当前互联网产品同质化越来越严重的情况下,如何打造产品差异化与自身品牌调性,使产品能够脱颖而出,成为每一个设计师都需要去思考的问题,也是每个设计师需要去面对的挑战。
合理的运用品牌符号能够帮助设计师打造产品的品牌感和进行差异化的设计,在品牌与用户的互动中发挥作用。帮助用户简化对品牌的判断;降低用户对品牌的认知成本,增加用户信任感。




品牌符号有哪些类型?

说起品牌符号,大家第一个反应可能就是认为是logo设计,其实logo只是品牌符号定义中的一小部分。
品牌符号还包括但不限于:颜色/图形符号/声音/slogan/IP形象等,包括可见的、不可见的、无形的、抽象的概念符号。


品牌符号的种类很多,本篇文章重点来讲讲品牌图形符号是如何运用在产品中的。




如何提炼品牌符号?

品牌符号通常从 logo 本身提取,根据品牌关键词,或公司愿景与业务诉求,赋予提取的品牌图形含义,并在公司各个方向设计中进行延伸应用。


比如:马蜂窝从 logo 中提取了一个代表微笑的弧度,传递友好、温暖的品牌形象、蚂蚁财富logo中提取的自由角、网易考拉海购从logo中提取圆形代表美好世界的含义等等


再比如,可口可乐的包装,一个比较重要的品牌符号就是红色背景之下的白色飘带,即使包装上没有名字,很多人也能通过这两种搭配识别出可口可乐这个品牌。
线条符号在设计上各自都有自己独特的特点,即具有很强的识别性,且易记、易传播,让消费者牢牢地烙印在心智中。



如果品牌处于创立初期,可以根据产品定位与业务背景,与业务方讨论定出核心关键词,建立情绪板,提取出符合品牌调性的:图形、颜色、字体、质感、构成,再提炼出符合产品调性的品牌LOGO,从中提取品牌符号,此处相关内容太多,不展开细说,简要概括一下。


品牌符号运用的设计手法:

通过提取品牌图形元素,再运用点线底纹、分形、抽象几何等设计手法形成品牌纹理,在 UI 设计或者运营推广设计方面都能有很好的运用。




品牌符号的运用场景?

品牌符号的运用场景可以包含平台设计的各个方向,如:线上/线下辅助/插画/品牌周边/运营活动 等等,在越多的地方合理融入品牌符号,越多的在用户面前展示品牌符号,就越能向用户传达品牌理念,使品牌深入人心。


以网易考拉海购在品牌图形符号的运用场景为例:


品牌符号在图标设计的运用


品牌符号在产品底纹的运用

点线底纹的设计手法,形成品牌纹理,运用在产品中,使整体页面更加高级,品牌感更加强烈。




品牌符号在线下广告牌等延展


品牌符号在VI中的应用


品牌符号在动效的运用

除了静态的图形设计,动效也是品牌基因延续的关键要素。一个好的动效能够帮助企业建立起足够有效的品牌形象,更高的品牌识别度,让品牌在竞争中脱颖而出,动态图形比静态的图像更容易为用户所理解,也更容易被记住,同用户更好地建立情感联系。延续品牌基因。


启屏页



loading状态


图片来源:www.plus-ex


品牌符号可以运用在产品的方方面面上,以上的案例只是图形符号的一部分使用案例,还有对外运营推广的海报、banner等,也可以反复运用品牌符号,加深用户对品牌的认知度。



总结

在当前互联网产品同质化越来越严重的情况下,每一个设计师都需要去思考如何打造产品差异化与自身品牌调性,而不是盲目的跟随所谓的趋势,趋势是一直在变化的,只有符合自己品牌定位的设计语言,使产品在设计上能够脱颖而出。互联网产品同质化越来越严重的情况下,如何打造产品差异化与品牌调性,是每一个设计师都需要去思考的问题去面对的挑战。


前言

最近在做项目的过程中,发现同类竞品的同质化非常严重,在思考如何做出符合自己产品品牌调性设计方案的过程中,发现运用品牌符号能很好的与竞品公司在设计上拉开差异化,提高品牌的辨识度。
因此对品牌符号进行了的分析学习运用,一方面是对自己学习的总结,另一方面是分享给大家自己学习的心得体会。



什么是品牌符号?

品牌符号是区别产品或服务的基本手段,通过视觉、声音、语言、颜色等各种各样的符号,与消费者从精神层面上沟通,这些识别元素形成一个有机结构,对用户施加影响。它是形成品牌概念的基础,成功的品牌符号是公司的重要资产,对于企业而言是最节省沟通成本的做法。


品牌符号的作用?

在当前互联网产品同质化越来越严重的情况下,如何打造产品差异化与自身品牌调性,使产品能够脱颖而出,成为每一个设计师都需要去思考的问题,也是每个设计师需要去面对的挑战。
合理的运用品牌符号能够帮助设计师打造产品的品牌感和进行差异化的设计,在品牌与用户的互动中发挥作用。帮助用户简化对品牌的判断;降低用户对品牌的认知成本,增加用户信任感。




品牌符号有哪些类型?

说起品牌符号,大家第一个反应可能就是认为是logo设计,其实logo只是品牌符号定义中的一小部分。
品牌符号还包括但不限于:颜色/图形符号/声音/slogan/IP形象等,包括可见的、不可见的、无形的、抽象的概念符号。


品牌符号的种类很多,本篇文章重点来讲讲品牌图形符号是如何运用在产品中的。




如何提炼品牌符号?

品牌符号通常从 logo 本身提取,根据品牌关键词,或公司愿景与业务诉求,赋予提取的品牌图形含义,并在公司各个方向设计中进行延伸应用。


比如:马蜂窝从 logo 中提取了一个代表微笑的弧度,传递友好、温暖的品牌形象、蚂蚁财富logo中提取的自由角、网易考拉海购从logo中提取圆形代表美好世界的含义等等


再比如,可口可乐的包装,一个比较重要的品牌符号就是红色背景之下的白色飘带,即使包装上没有名字,很多人也能通过这两种搭配识别出可口可乐这个品牌。
线条符号在设计上各自都有自己独特的特点,即具有很强的识别性,且易记、易传播,让消费者牢牢地烙印在心智中。



如果品牌处于创立初期,可以根据产品定位与业务背景,与业务方讨论定出核心关键词,建立情绪板,提取出符合品牌调性的:图形、颜色、字体、质感、构成,再提炼出符合产品调性的品牌LOGO,从中提取品牌符号,此处相关内容太多,不展开细说,简要概括一下。


品牌符号运用的设计手法:

通过提取品牌图形元素,再运用点线底纹、分形、抽象几何等设计手法形成品牌纹理,在 UI 设计或者运营推广设计方面都能有很好的运用。




品牌符号的运用场景?

品牌符号的运用场景可以包含平台设计的各个方向,如:线上/线下辅助/插画/品牌周边/运营活动 等等,在越多的地方合理融入品牌符号,越多的在用户面前展示品牌符号,就越能向用户传达品牌理念,使品牌深入人心。


以网易考拉海购在品牌图形符号的运用场景为例:


品牌符号在图标设计的运用


品牌符号在产品底纹的运用

点线底纹的设计手法,形成品牌纹理,运用在产品中,使整体页面更加高级,品牌感更加强烈。




品牌符号在线下广告牌等延展


品牌符号在VI中的应用


品牌符号在动效的运用

除了静态的图形设计,动效也是品牌基因延续的关键要素。一个好的动效能够帮助企业建立起足够有效的品牌形象,更高的品牌识别度,让品牌在竞争中脱颖而出,动态图形比静态的图像更容易为用户所理解,也更容易被记住,同用户更好地建立情感联系。延续品牌基因。


启屏页



loading状态


图片来源:www.plus-ex


品牌符号可以运用在产品的方方面面上,以上的案例只是图形符号的一部分使用案例,还有对外运营推广的海报、banner等,也可以反复运用品牌符号,加深用户对品牌的认知度。



总结

在当前互联网产品同质化越来越严重的情况下,每一个设计师都需要去思考如何打造产品差异化与自身品牌调性,而不是盲目的跟随所谓的趋势,趋势是一直在变化的,只有符合自己品牌定位的设计语言,使产品在设计上能够脱颖而出。


文章来源:站酷   作者:船长的成长日记 


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

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

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


如何进行设计走查?

雪涛

设计走查是每个设计师的工作之一,我根据自己的日常经验总结了一些设计走查的要点,内容如有不足的地方还请多包涵~

引言


设计稿不仅是设计师设计水平的体现,它同时也体现了公司的设计水平。即使我们设计师使用蓝湖这种带标注功能的软件给到前端,也阻挡不了他们有自己的想法。如果原设计是100分的话,开发实现是50分,那么在客户眼里我们公司产品设计能力就只有这50分。所以设计走查在整个产品设计过程中起着很重要的作用。

    

在讲述设计走查前,我想先给说一下盒模型。理解盒模型能更好的做出设计稿,也能更好的和开发进行对接。


当我们明白前端是如何布局咱们设计稿后,我们设计师在作图的过程中就会懂得如何从落地的角度思考问题。


有开发思维的设计稿弄好、待开发实现后,就可以开始设计走查了。


笔者在做设计走查的时候最常用的就是浏览器自带的“检查”工具。


我们从检查里看它的CSS样式,如字体、字号、颜色、边框、背景色、间距等等。如果这个div没有样式,也可以去它的父级看看。这里就简单的拿字体、字号、颜色举个例子,涉及的元素过多,就不一一展示啦~


设计师开始走查时,意味着前端框架搭建结束、产品即将定型、用户即将见到的版本,所以在交付之前设计师需要查验以下内容:


一、整体架构


1.导航是否清晰易理解?

一般设计走查检查的是【全局导航】,所谓全局导航指的是它可以覆盖整个产品的通路,一般情况都是产品的一级分类。用户可以根据导航快速定位到目标节点。


2.页面中信息层级是否清晰合理?

一般通过设计评审的设计稿在信息层级这里都没有问题。设计师可以看看公司过往的项目,检查一下有没有需要改进的地方。


3.样式是否符合高保真?


4.内容距离上下左右的间距是否统一 、是否符合规范?


二、视觉走查


1.文本:

(1)文字是否使用公司规范字体?

(2)标题字号、内容字号是否和规范保持一致?需要加粗的字体有无加粗?

(3)文字颜色是否使用正确?(需要检查的有普通文本、标题、超链接、提示/重点信息等等)

(4)行间距、段落间距是否正确?


2.按钮

(1)是否根据功能划分为主按钮、次按钮、文字按钮及特殊按钮?

(2)按钮状态是否分为以下四种状态:默认状态、悬浮状态、点击状态、禁用状态?

(3)按钮各个状态下样式是否正确?

         需要检查:长度、高度、字号、字体颜色、边框颜色、圆角、背景颜色。 

         按钮宽度如果为自适应,需检查文字到按钮两边的间距(padding)是否为规范固定值。


3.页签

(1)是否根据功能划分为选中态、未选中态和悬浮状态?三种状态区分是否明显?

(2)页签各个状态下的样式是否正确:

         需要检查:长度、高度、字号、字体颜色、边框颜色、背景颜色。  

         页签宽度如果为自适应,需检查文字到按钮两边的间距(padding)是否为规范固定值。


4.选择器(单选、多选、日期选择、开关切换、下拉选择、 滑块选择等)

(1)单选是否为圆形、多选是否为方形?横向纵向的间距是否符合规范?

(2)日期选择分为标准日期和组合日期,样式是否统一?使用场景是否正确?

(3)下拉选择要区分普通下拉、树选择、级联选择,需要判断使用场景是否正确?


5.表单

(1)表单状态是否齐全?样式是否正确?

         默认状态、悬停状态、激活状态、只读状态、禁用状态、报错状态。

         需要检查各个状态下的样式:字体颜色、输入框边框颜色、长度、宽度、圆角。

(2)表单是上下结构还是左右结构?如果是左右结构,是否为文本右对齐、输入框左对齐?

         文本最长为多少字,超出的文字统一用什么样的形式体现?

         输入框内如果有图标,图标样式是否统一?


6.表格

(1)表格样式是否正确?

         长度、宽度、文本、边框、斑马线、鼠标悬停、选中行。

(2)对齐方式、间距等是否符合规范?

(3)分页器样式是否符合规范?


7.其他

弹窗、提示、缺省状态、图表、图标样式等是否和高保真保持一致?


三、交互走查


1.流程

(1)是否支持自动保存?退出前是否有保存提示?

(2)异常流程是否有提示?是否可以恢复?


2.页面操作

(1)是否在1秒内打开新页面?

(2)下钻页、新开页场景是否使用正确?

(3)执行具有破坏性的操作(如删除、格式化等)是否有弹窗提示?


3.显示内容

(1)语言是否简洁、易懂、有礼貌?


(2)文字内容是否无错别字、无歧义、无语法错误?

(3)数据的极值、排序规则是否考虑周全?

(4)数据显示的内容是否涉及权限和隐私?


4.选择输入

(1)是否选择了正确的表单形式?

(2)输入前是否有提示?

(3)输入完成是否需要及时反馈?(填写正确、填写错误等)

(4)是否设置默认项和自定义选项?

(5)是否告知用户的完成时间及进度展示?(测试、线上考试等)


5.反馈

(1)成功操作的反馈,是否需要引导下一步操作?(根据实际业务来定)

(2)预警类的信息是否存在提示?

(3)失败操作的反馈,是否存在解释与建议?


6.用户

(1)新用户是否需要新手提示?

(2)多种用户之间是否可以角色切换?

(3)角色变更后用户是否清楚?



设计走查插件推荐


1.Copiexl


Copixel是字节跳动的一款走查验收浏览器插件,通过在网页上放置设计稿图片检查设计稿与开发结果是否完全重叠来判断开发的还原精度,精确到像素实现高质量的项目还原效果。

因为官网里有使用教程,所以这里就不过多讲解,大家可以点击官网查看。官方网址为https://copixel.bytedance.com/



2.CSS Peeper


这是一个设计走查 / 样式复制 / 资源下载的效率神器,它能够轻松查看网页端当中所有元素的 CSS 属性。如果是作为设计走查工具的话,它的特色主要就是高效,不像“检查”一样要在众多CSS中去找我们需要的,但是弊端就是查看不了全局。查看全局还是需要我们使用浏览器自带的检查功能哦。

官网往下翻也有教程哦,官方网址为https://csspeeper.com/


有些人认为走查是测试工程师的工作,我并不否认,但我也不是很赞同。只能说这种想法太过于理想化,并不是每个测试工程师既懂视觉、又懂开发、又懂业务流程的。毕竟是在我们自己的专业领域里,所以设计师做好走查还是很重要的~


文章来源:站酷   作者:阿三Ason 

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

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

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


信息获取与适老化系统体验升级

雪涛


前言:

鉴于老年人一次次在“数字围城”中遭遇的困境,2020年11月,国务院办公厅印发《关于切实解决老年人运用智能技术困难实施方案》的通知,2021年1月起,工信部将在全国范围内开展为期一年的“互联网应用适老化及无障碍改造专项行动”,要求各地区、各部门建立工作台账,明确时间表和路线图,推进互联网网站和移动互联网应用(APP)适老化及无障碍改造。



此政策一出,引发了资管行业针对金融产品适老化改造的积极探索与思考,同时各金融机构研究团队也相应推出互联网金融产品适老化改造的改进方向和原则,信息无障碍理念是近年国家推进可持续发展的一项重要工作。在此也引发了我针对互联网金融产品适老化改造的深入探索。

本篇调研报告由以下五大部分构成:


- 行业分析—探讨适老化改造趋势背景

- 用户分析—研究用户对象习惯特征及需求痛点

- 改造方向—总结改造方向和部分具体措施

- 信息获取—以证券交易为例的信息列表优化

- 完成效果—分析目前各家产品适老化改造成果




一、适老化改造趋势背景


截至2019年年末,我国65周岁及以上人口1.76亿人,占总人口12.6%;至2024年,65岁及以上人口将突破2亿;若以60岁作为老年标准,至2050年,老年人口将达5亿。中高收入老年家庭数持续增加,金融服务需求将显著增长,2017年家庭月收入逾4000元的老人已超过1.06亿人,其中1600万老人的家庭月收入逾10000元。和许多无房无车年轻人相比,绝大多数老年人拥有一套或多套住房。



新生事物的发展也潜移默化的影响着老年人的消费思维方式。在如今互联网不断发展的今天,老年人的触网热情也不断提高。根据CNNIC发布的《中国互联网发展状况统计报告》,截至2019年6月,我国50-59岁网民群体占比达到6.7%,较2016年12月的5.4%提升了1.3个百分点;60岁及以上网民群体占比6.9%,较2016年12月的4.0%上升了2.9个百分点



二、老年人使用互联网产品存在的问题


从根本上分析,为什么老年人“不会用”,最根本的原因就是身体机能的衰弱。这是我们无法抗拒和改变的自然生理现象。



「适老化及无障碍改造」其实包括2个方面。

一方面是「适老化」,对老年人的关怀。另一方面是「无障碍改造」,针对残障人士,比如视力障碍、听力障碍、肢体障碍人士的关怀。

这两方面的改造,也统称为「信息无障碍改造」,需要过信息化手段弥补身体机能、所处环境等存在的差异,使任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)都能平等、方便、安全地获取、交互、使用信息。

整体来看,当前我国公共服务类网站及移动互联网应用(APP)无障碍化普及率较低,适老化水平有待提升。比如:

- 多数存在界面交互复杂、操作不友好等问题,使得老年人不敢用、不会用、不能用

- 普遍存在图片缺乏文本描述、验证码操作困难、相关功能与设备不兼容等问题,使得残疾人等群体在使用互联网过程中遇到多种障碍。

- 当前互联网应用中强制广告较多,容易误导老年人,特别是有些付款类操作的诱导式按键

目前国内「老年人」相比「残障人」的用户群体大很大,并且「适老化」和「无障碍改造」属于两个完全不同的改造方向,加上「适老化」改造难度低,普适性更强。所以目前国内的互联网产品,主要从「适老化」入手进行改造,「无障碍改造」开展的工作还非常有限。



三、3个方面着手,针对性提出建议


产品如何进行「适老化」改造?

首先我们可以看看,老年用户的几个特点:

1、视觉、听觉能力变差

2、记忆力、注意力下降

3、身体机能下降,对互联网认知不足



同时,工信部工信部「行动方案」中,对「适老化和无障碍改造」提出了几个基本要求:

1、大字体、大图标、高对比度文字。 2、操作简单、界面简洁,实现一键操作、文本输入提示等多种无障碍功能

3、提升方言识别能力,方便不会普通话的老人使用智能设备   4、 去广告,禁止诱导

从老年人的特点、工信部要求、以及当前互联网产品适老化实践中,我总结了3大产品「适老化」设计要点。



3.1视觉、听觉退化导致信息获取障碍

实验心理学家赤瑞特拉一项关于人类获取信息的来源显示,人类获取信息的83%来自视觉,11%来自听觉,3.5%来自嗅觉,1.5%来自触觉,1%来自味觉。


1. 字体选择

那么在获取信息的来源时文字,是产品界面中最重要的一个元素,当产品中的文本字号很小、文字辨认不清的时候,用户想阅读的意愿就会降低。产品的信息传达的目标就无法完成。所以在标准的文本传递信息的时候推荐使用非衬线体


衬线指的是字母结构笔画之外的装饰性笔画。有衬线的字体叫衬线字体(serif)中文比较常见的如宋体、明体、白体;没有衬线的字体,则叫做无衬线体(sans-serif)。简单的理解就是非衬线体(例如黑体等)就是没有装饰性笔画的末尾,无衬线体则更统一、时尚、简约,中文常见的如黑体、微软雅黑。这种无衬线体也被广泛应用网页端或手机端的产品,所以非衬线字体有醒目而且轮廓清晰的特点,是提升屏幕可读性的首选。


*需要注意的是,在常规页面的设计过程中避免使用多种字体或者精心设计的造型字体,因为这可能会造成用户混淆。营销页面不在此列



2、字号大小

根据Ant Design设计语言中讲到关于计算最小字体的方法,通过肉眼到物体之间的距离、物体的高度以及人的最小可接受视角,构成的三角函数关系进行计算。

普通用户的最小视角为0.3度时阅读效率最好,一般眼睛距离电脑屏幕为50cm。有学者研究表明,老年人由于视觉能力下降,最小可接受视角为0.75度,视距为43cm,换算之后相当于字高为5.62mm,经过换算为16px。

在JIS规格对于印刷品等反射原稿中《不同年纪最小可阅读文字大小》的建议中,60岁以上的老年人,最小可接受的字体大小的绝对高度是4.9mm,经过换算为14px。


考虑针对老年人的应用使用的文字越大越好,建议最小使用16px字号。为什么文本字号要设计为16像素呢?有研究表明在我们屏幕上 16 像素的文本大小与印刷在书籍或杂志上的文本大小相同,这很符合人的阅读习惯。但是人阅读还有一个因素是不能忽视的,就是人和屏幕之间的距离。


换算网站:https://www.gaitubao.com/tools/pixel2cm.html



3、颜色选择

建议使用相对融合的中性色;使用对比强烈的互补色来突出重要元素信息内容和功能位置。同时要符合WCAG 2.0(Web Content Accessibility Guideline,Web 内容无障碍指南)中对颜色对比度的指导意见:


- 对比度(AA级):文本的视觉呈现以及文本图像至少7:1的对比度;大号文本(字重为Bold时大于18px,字重为Regular时大于24px)以及大文本图像至少有4.5:1的对比度。


- 对比度(AAA级):文本的视觉呈现以及文本图像至少要有4.5:1的对比度;大号文本(字重为Bold时大于18px,字重为Regular时大于24px)以及大文本图像至少有3:1的对比度。


可以通过WebAIM`s Color Contrast Checker、Contrast-ratio、EightShap es Contrast Grid、等网站点击进行测试对比查看是否满足 WCAG 2.0 AA 的「色彩无障碍设计」标准。


避免使用蓝色和紫色

由于老年人的晶状体变黄、变浑浊,会选择性的吸收蓝光,从而导致老年人对蓝色的鉴别能力比红、绿色的鉴别能力下降的更明显,因此页面中的重要元素要避免使用蓝色或不同深浅的紫色。




4、听力和身体机能的退化

听觉也是我们获取信息的重要来源,可以考虑使用语音通道获取信息。但随着年龄的增长,人的大脑听觉中枢开始退化,脑皮质逐渐萎缩,耳蜗的基底膜、听觉细胞及听神经也开始老化,导致老年人出现听力下降甚至“老年性耳聋”,主要表现:

1、听到声音,但听不清内容; 

2、正常语速的音/视频无法全部接收;

3、低频段声音听不到(如鼓声),高频段声音受不了(如尖细的刮擦声),立体声成为噪音;


因此在进行语音通道设计时,需要考虑:

1、加大音量,老年人听觉平均感知音量在67.5~75.3分贝之间,因此在视频开始播放时,我们对低于设定值的音量适当增加到约44%。同时处理掉环境声音,使内容声音更清晰。


2、为了保证老年人有效的接收到声音信息并进行理解,音/视频的播放速度也需要适当下降。因此,我们减少了高档位语速,并提供了高、中、低3档语速,使老年人选择适合自己的速度,更有效的获取声音信息。同时加入字幕等实时信息,实时播放双层保障老年人的信息获取


3、使用语音交互形式,帮助老年人更方便的进行信息输入及获取,如百度大字版的语音搜索功能及“今日要闻”点击播放功能、酷狗音乐大字版听歌识曲功能、支付宝关怀版客服语音功能等。



3.2记忆力、注意力下降


1、简化交互操作

人在手机上的交互手势会有很多种,根据不同的业务场景,我们使用的交互手势也不相同。

大致分为四类:单击(tap);长按(long press);双击(Double Tap);长按&拖拽(long press & Drag)。

这么多交互手势,甚至还有组合手势。老年人在使用过程中会显的很烦索。所以操作手势尽量简单、符合人的常规, 以“点击、滑动” 为主。或者是一种切换支持2种手势切换页面。

老年人除了生理上的手指偏大,身体机能退化引起控制能力下降、行动迟缓,动脉硬化、震颤麻痹、帕金森等疾病导致手部抖动,使得老年人无法进行精确、复杂的操作手势;因此针对老年人应用的操作手势应该注意:


- 简化操作手势:单指操作的手势比双指和多指手势更易用(比如电脑触控板的多指手势);

- 尽量使用单击:单击屏幕比双击、多击更易用。老年人手指不灵活无法在指定时间内完成连续点击屏幕两次。

- 大的点击热区:在移动端,按钮尺寸根据手指触摸屏幕的最小点触区域,平均长度在10-14mm之间,指尖的长度为8-10mm,所以10mm x 10mm就是一个最小触摸目标尺寸。按钮高度35px-50px之间,字号13pt-17pt,圆角4-8·web端:按钮高度24px-48px,字号12-18,圆角6-10。



2、精减功能、减少信息干扰

内容可以多,内容要做好清晰分类,清晰易懂。信息导航不要多个维度嵌套,不要让长辈晕头转向。信息层级不宜过深,2-3层为宜,不要让长辈迷路。

要考虑哪些功能该提供,哪些不该提供?是否要针对老人提供一些专属的功能或服务?

如果可以,结合自己的业务,提供老年群体的针对性内容和服务。比如:如果你是做资讯的,内容推荐符合老年人口味,视频、音频形式,就很重要。如果你是做医疗健康的,老年人慢病管理,用药提醒,就比较贴心。


如高德地图长辈版:减少了很多不必要的功能,附近、消息、我的、打车等等。只保留首页而且把长辈会关心的公共厕所、医院、银行、公园等目的地列出。方便快速出行。做好了一个地图工具箱的职责。不去做干扰的信息。美团长辈版也是只保留核心的点餐功能。把更多的页面空间都留给了餐厅的信息展示。方便长辈点餐。



3、流程明确化、减少每屏信息密度

能懂会用,可以有效减少老年人在使用线上产品时焦虑感和挫败感。让老年人知道看到的是什么,正在做什么,接下来要这么做,可以达成什么目标,这是在使用线上产品进行一切操作的基础条件。

如做一件事情共需要几步,当前是百分之多少,还需要多少才能完成,在过程中少一些选择,多一些指引,将容易混淆的内容进行提示,告诉你应该如何操作,减少判断和操作失误。在长任务中,给出明确的反馈和最终目标的提醒



3.3认知能力、身体机能退化


1、理解能力

更易辨识的图标、提供图标名称。由于在互联网时代、年轻人接受的信息非常多,日新月异比如我们现在流行的矢量化图标、线条极简风格的图标,对于老年人来说,存在认知障碍。他们可能并不理解这些图标代表着什么意思。学习需要过程,因此,在老年人未熟悉我们的常用图标前,可适当调整图标的设计方向,更加“拟物化”,符合他们的认知。消除认知水平带来的差距



2、提示反馈

例如在一些需要精确移动的操作,而这个功能又必不可少的情况下。应该怎么解决。可以通过线性的视觉提示,加上每一个颗粒度的移动都给到振动反馈,加强长辈用户的感知。而不是所有的提示都通过界面单一展示。也是可以在资讯版块加入语音播放的功能,通过声音来告知信息。



四.信息获取优化—以证券交易为例的信息展示优化



1、信息展示的重要性

新闻资讯和行情列表展示的字段很大程度上决定着用户对行情的了解。是否做出交易的行为。行情列表阅读的现状:在一些产品中,基于阅读模块的相关设计在关注度和方法论上都有所欠缺。线上的行情列表阅读版式(参考同花顺、东方财富)处理较陈旧,视觉体验较差,用户在使用过程中障碍较多。归根究底,由于整体的设计思路缺失,表面的调整一直是修修补补状态,没有根本解决阅读体验的问题。


因此在信息展示上,需要加强逻辑与秩序,在易认性和可读性上优化信息传达和记忆质量,最终给用户打造0干扰的阅读体验。

这里解释下几个概念:

易认性:(Legibility)针对文字,能准确无误的让读者阅读,不因为过于接近带来困惑。

可读性:(Readability)针对版式,阅读的容易程度,文字的组合呈现。

0干扰:能将自己的设计不动声色的隐藏起来,不以设计本身分散人的注意力,达到阅读的沉浸状态。



2、目前证券交易产品列表存在的问题,总结与分析

基于此现状,分析了几个头部证券交易产品的页面,梳理目前存在的一些问题,每个列表的盒子宽度不一致,有的宽有的窄,导致在整体阅读时跨越度比较大。盒子的宽度不同对字段数据范围理解不清晰,导致同一页面数据字体大小不统一。展示的信息过多,密度高、信息过载出现视觉疲劳。又或者间隔太大显示的太松散



通过各个维度的对比,总结出这个表格

一、字体分析

1、字体iOS端文字基本以苹方为主,数字字体以din为多数(部分调整)2、字号整体以32-34居多。4个平台文字与数字字号相同常规状态下)

3、字重以中文常规体,数字中黑体为主

二、盒子分析

1、固定盒子间距,盒子宽度根据字段调整

2、固定盒子宽度,间距。字体大小(牛牛)

3、盒子间距不固定,超过盒子部分缩小字体

三、适老/大号字体调节

1、牛牛/腾讯自选股/同花顺:字体大小5档,可以全局调整,也可以分区调整,牛牛:行情、交易、资讯、聊天室、其他(同花顺有长辈模式)

2、东方财富/新浪财经:支持全局字号的修改,但是支持的档位有所不同有2档3档5档

3、老虎:不支持调整/雪球:只支持调整资讯部分字体



3、确认展现形式,并验证可行性

经过总结各家产品的体验分析,开始了设计方案的尝试。首先考虑了字段数据高频出现的范围、考虑极限值情况,确定字体大小在32-38之间比较合适。第一屏内仅展示最新价、和涨跌幅即可。同时把对比表中出现的高频率行高、字号。统一进行对比,产生问卷调研进行盲试,选择觉得最舒服的列表方式。最终34号字体/104列表高度被最多的人选择。


在确定字号大小和列表高度之后,开始设计验证,把要展示的字段和常规、极限状态的数据放入盒子模型内。确保在不改变字号大小和盒子间隔的的情况下都能完整展示。最后在适配泛金融交易的,A股、港/美股、期货、外汇等列表信息。在标题、或者数据达到8个-9个的情况下依然能完整展示。



最后在进行字号大小的调整,适合长辈用户使用。在保障展示完整的情况下,同时调整字号和列表高度,字号以2个字号为一档支持5档调节,最大支持44号120行高。同时在涨跌幅处用色块做视觉吸引,增强涨跌感知。详情页内也是全局调整,不能像某些产品一样只是单纯的形式上的做“适老化”


开发实现与落地,在和开发同事了解相关背景后,相当于是皮肤系统对应不同字号拥有不同的UI展示。由于不是时实展示,实现难道不大。全局调整字体,可以实现。但是具体效果不好确定。主要是自适应布局方式产生的问题。面临部分页面需要重新编写。由于目前使用的是frame布局方式需要调整成和Auto Layout(自动)布局才能比较好的适应效果。



4、文章资讯展示优化与落地

屏幕阅读与纸质阅读不同

人的阅读习惯会根据阅读环境而改变,包括文本的书写格式、文本的媒介、语言符号等。基于屏幕的阅读行为,往往表现了如下特征:很少人会一字一句阅读页面,更多的是在浏览、关键词确认、非线性阅读、有选择性的阅读。因此文章的间距非常影响阅读体验。文字的间距包括两部分,第一是横向字与字的间距;其次是纵向行与行的间距。



1. 页面版式留白探索(行间距,段落间距等)

行间距是决定版面中的栏宽是否具有阅读性的重要因素。许多平面大师都非常注重行距,段落间距的设置。过窄与过宽的行距会有意识或无意识的让读者困惑,造成某种心理障碍。


行距过大会打破文本连续性,每一行会被孤立,缺乏紧凑感,会降慢阅读速度。行距太小会让页面灰度过重,读者眼睛承受过多的负担,无法集中阅读单独一行,时间久了会增加疲劳感。



根据当前现状,再结合行业设计经验,我们选择了字号与行高倍数组合的一系列方案,进行了眼动实验和用户访谈,确定用户可接受的行间距为1.50-1.70的范围,再通过对比不同机型下的屏幕显示效果,以及不同档位字体显示效果、阅读效率,最后确定了图文落地页正文文字,扩大行间距1.65倍行号的设计方案。



2. 对齐方式研究

研究完行间距显示,段落里文字对齐的研究也很重要。

文字对齐方式有:左对齐,右对齐,左右对齐,居中对齐这几种,大段落文字阅读右对齐或者居中对齐几乎没有,所以这里我们对比左对齐和左右对齐的优劣。来看下优劣对比:

左右对齐的优势较多,主要体现在视觉感受舒服(规规整整的版式),更主要是眼睛在固定位置换行,在易读性上做得比较好。

缺点也是有的,文章存在2种字间距,而左对齐优势在于只有一个固定字间距。好在新闻阅读文章长度并没有特别长,篇幅受限,影响也就不会扩大,且2个间距尺寸也是在可接受范围里。


综上对比,我们认为左右对齐的版式在新闻类阅读里,是明显优于左对齐版式。



3.引入概念—「垂直韵律」

「垂直韵律」是阅读节奏感的重中之重,打造一切视觉阅读节奏。行距,是垂直韵律的基础属性(同版式中的网格概念接近)。

版式规范中,中文汉字1.5~2倍的行距是最为适合的。整体来说,字号越小,行间距应该相对越大,反之亦然。

确定1.65倍行距最符合各项指标行距确定完后,基础间距就有了数值a,之后页面相关的元素纵向之间间距都依赖这个数值(a的n倍)。



倍数间距的引用,整体页面来看,所有的留白都有规律可循,形成自己的韵律感。

这么做的好处就是用户对规律间隔的理解度更高,有节奏的留白除了满足了它本身需要的功能属性,用户阅读过程中不容易受到来自间隔过多的干扰,这样易读性就提升了。同时由于字号大小的不同,行间距相应的调整。展现的效果也不一样

来看下我们看看不同字号版式页面样子,自带韵律感~



4.字体、字重选择

我们除了需要选择无衬线字体,更应该选择字重更全的字体我们发现目前在一些安卓手机上,一些字体在增加字重后出现沾粘情况,不能保证可读性。

字重,即字形的重量,字重的等级用来标明同一字体家族不同粗细笔画的字形。

但通常一个特定的字体家族仅会包含少数的可用重量。若一个指定的字重不存在时,CSS会就近匹配其他字重:较重的字重映射到更重的重量、较轻的字重会映射到更轻的重量。

目前落地页代码中字体的设置,安卓使用的第一顺位的字体字重仅2档字重,所以在小字场景和分辨率较低的安卓机型上,会匹配到更粗的字重,出现文字沾粘的情况。




这里插入一件趣事,当时我走查安卓UI页面时,发现粗体字体比设计稿上粗很多,又对比了一下ios的粗细,就让他们改细一点。

他们表示:“没问题”啪一下,我一看发现加粗完全没有了,变成常规体了。就说“在加粗一点啊”。

开发小哥看了我一眼“行”啪一下,又回到那么粗壮的状态。

就问“为什么加粗会这么粗,iOS没有这么粗啊,不要这么粗,要细一点的那种粗!”

他白了我一眼说:因为是系统字体不一样的原因,iOS 用的是Helvetica,安卓字体是Roboto,其字体本身就设计加粗效果就是这么粗。没有办法了!

我:……暂时受挫,退去了!回去之后我越看越不行,就选择查找解决方案,最终在csdn论坛找到了方法。并且发现了相同遭遇的设计师与开发小哥。果然这个粗细问题都让设计师无法接受!




最终通过找到的方案化解了这个问题,不过我们还是调整了font-family中的字体适配顺位,在安卓端优先适配字重更全的字体,保证安卓端加粗字体的展现,优化内容可读性。



五、各家产品适老化改造成果

如今已经到2022年的年初,各家app适老化做的怎么样。是应付要求,还是真的为老年人打造适合他们用的产品呢?接下来我那几个正反面案例给大家分析一下。谁才在真正用心做产品


反面教材 :

支付宝

辨识度:支付宝仅在辨识度上还比较可观,字体、图标的色彩对比度都可以较好的辨识。但是在易懂方面,支付宝做的比较差劲,整体的交互依旧沿用普通版的,没有对于理解性做调整,对于老人来说操作比较复杂,难以学会。而且支付宝的老年版并没有很用心的去精简功能,比如这个个人中心页面,对于老人来说,支付宝会员、余利宝、蚂蚁宝、相互宝这些几乎没有用处,存在于页面中只会让老人误触,支付类软件对于老人来说核心功能就是支付、收款、查余额、查账单,类似于工具类的产品。在首页部分还是保留了蚂蚁森林的部分,一方面是基于公益的性至,另外一方面还是需要用户的活跃度、留存率。理财页面功能布局上是保留了稳健的、较安全的债券产品,以及保险产品。相对来是比较合理,但是进入到下一级页面后,又回归了正常模式。


而支付宝的口碑页在老年版中应该直接拿掉,口碑里的每个业务单拿出来,体量都不亚于一个大型APP,而且每个业务的内页都并没有去适配老年化,点进去依然是普通版的,这样的页面存在于老年版的业务中,只会分散老人的注意力,加大老人的误触率与学习成本。在新版本中加入的生活模块,更是连字体大小都没有改变,完全没有适配。如果是没有时间加入适配,不如在老年版不上这个功能反而更加干爽。


虽然适老化涉及的页面可能很多,资源成本很大回报率低,但是作为国内首屈一指的金融产品,立足于全球化的目标。格局也可以大一点,并且未来随着中国老龄化人口越来越多,老年人掌握的财富会越来越多。针于他们做优化也不一定是“亏本买卖”




同花顺

作为头部的证券交易产品,适老化做的可以用灾难来形容了。本来主要的用户人群就是中老年较多,界面风格也偏沉稳,结果在适配上做的像是在应付交作业。首页上半部分是加大了的图标,选项栏也是加大字号。但是下面资讯的部分似乎和上半部分图标分割了一样毫无关系,依然是正常大小,详情页中也是如此。行情列表页中一级页面是老年版的放大效果,点击查看更多时,列表又回到正常状态。列表页的适配难度是最小的,并且外面一层已经有了,结果还做的如此糟糕。并且在长辈模式中,字体大小调整也暂停生效了,也无法调节长辈模式效果不好的字号大小。



正面教材今日头条大字版 :

今日头条

是国内最具影响力的综合类资讯平台,内容五花八门,涵盖的分类众多,但是今日头条的老年版(今日头条大字模式)却适配的非常好,进入个人中心,把老人不常用的功能收拢起来,给人感觉就没有过多的冗余元素,把每个模块的字号与间距都做了适当的调整,整体非常易于阅读。首先在图标颜色上,调整成对比度强的颜色,同时今日头条的老年版了解老人喜欢热闹与分享的心理,将头条分享做的更加突出,便于老人方便的把喜欢的资讯转发到“姑舅一家亲”中。1、首先在图标颜色上,调整成对比度强的颜色,增强识别度。

2、图形化图标改成文字按纽,单一的图标,因为认知方面的差异,老年入无法理解。改用文字形式方便老年人理解涵意。

3、在交互方面的调整,比如暂停、全屏的调整外置,更加方便操作。

4、信息布局适应调整,重点需求突出,优化不常用入口。图标与文字相结合强化提示。

5、字体变大的同时,行间距离也做了想应的调整。


综合来说今日头条的老年版的适老化是非常成功的,不论从辨识度,易学,易操作上,都针对老年群体做了专门的优化 ,这样的产品才是更适合老人使用的。而不像某些产品的只是单纯的大、大、大而已。




写在最后

其实通过总结经验 ,结合案例来看,做适老化不只是将一个产品的字体放大了,而是根据老人的生理与心里特性将APP重新设计了一番,做一款更适合老年人使用的产品,让老人更加容易的学习并使用。


互联网产品的适老化之路道阻且长,做适老化可能会影响企业的利益,也可能会增加产品的维护成本,受制于某些原因,推动解决老年人面对智能技术的问题解决也是重中之中。但是设计师也需要运用自己的专业性,来帮助目标人群融入数字化的生活中去。

因为在不久的将来,我们也会变成这个群体,当我们面对这些束手无策时,那时的设计又会是如何适老的呢?适老化设计是适合所有人的设计,所有的设计师都应该密切关注。我们也应该让老人群体更好的体验互联网带来的便捷,享受中国科技腾飞所带来的福利,这也是我门后一代人应尽的责任。


文章来源:站酷   作者:枫枫枫枫锋 

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

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

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



万能活动方案策划篇

雪涛

随着互联网行业的快速发展,关于活动方案策划是活动运营很必要掌握的一个技能,本文为大家提供了一个万能活动方案策划的一个技巧,传授给大家,有需要的小伙伴儿快快接招!

思想的高度决定运营的深度,而运营的深度则体现在方案的专业性,方案的专业性则用活动的效果来判定。所以,这篇《2021运营人年度工作总结- -万能活动方案策划篇》要远远比我的上一篇总结《2021运营人年度工作总结- -常用模型篇》更重要,它不只是强调纯粹的学习,而更重要的是学以致用。

很多人认为运营是服务产品和用户的中间纽带,在这里,我再次强调一遍,我并不认可这个观点。

我认为的运营是营销与运作的组合。首先,是通过营销帮助企业赢得市场和客户,让企业获得生存下去的可能;然后,才是运作通过营销获取的客户和市场,实现盈利。

如果说营销是运营中的重中之重,那么方案策划则是营销中的重中之重,而方案的落地形式活动则是保证方案效果的重中之重,这也是为什么我们做梦都想做一款爆款方案策划,执行出一款爆款活动的原因,为什么2022年元旦已经过去了1周,我还在孜孜不倦的整理《2021运营人年度工作总结- -万能活动方案策划篇》。

一、方案策划思维养成

在正式的活动方案策划模板讲解之前,我们先来简单探探方案策划思维的养成。如何通过唾手可得的身边小事培养思维,通过通过分析不同行业的方案策划中心,培养自己的方案策划思维的全局性。

1. 从身边小事养成

针对策划,根据体量大小可以分为:小方案策划与大方案策划。可能有些人会好奇,什么是小活动方案策划,什么又是大活动方案策划?

我们在各大社交平台发表观点、发布朋友圈、参与各种话题活动。有些人的内容非常具有吸引力、反响特别好;而有些人的内容确是平淡无奇。前者正是把这些事件,当成小的活动方案进行策划的,思考更容易燃的点;而后者完全是自嗨,只是注重自我感情的抒发。

而我们常见的线上线下的各种形形色色的活动、各大企业的品牌宣传广告和会议都属于大方案策划。而在互联网中常见的转盘抽奖、集卡活动、种树活动、砍一刀等等活动更是属于大方案策划,并且这种活动越来越常见、越来越繁多,对专业人手的需要越来越高。

2. 向不同的行业大厂学习

由于方案设计包含市场营销和活动设计,而市场营销又是一个特别大类别。所以,在这里我们不做分析,主要分析和运营息息相关的方案策划,特别是用的最多的活动方案策划。互联网公司包含社交类、电商类、内容类等公司。虽然同属于互联网行业,但是,不同的类别往往方案策划的方向、展现程度、关注重点也不同。

比如社交类、娱乐类软件往往更喜欢话题类、低价领会员类、信息推送类、短信通知类。

举例,职场社交软件脉脉会推送#选错专业的你,过的怎么样 #长期摸鱼会怎们样 等话题活动;短视频娱乐软件抖音可以添加各式各样的热门话题,比如#人类萌宠养成记 #厉害了,我的国等等。

电商类软件往往更喜欢满减活动、砍一刀、拼团等优惠类的活动。比如;每一年的618、双11、双12活动。

内容类活动由于考虑到内容的增长和用户的增长,往往喜欢培养作者、培养用户使用习惯的活动。比如:今日头条、知乎针对自媒体作者的培训活动;趣头条针对用户阅读达到一定时间的红包奖励活动。

所以,作为方案策划人员,或者希望从事方案策划的人员,需要全面的向不同类型的大厂学习,提前明确自己所在的行业或者未来期待的行业,基于行业的现实情况进行方案策划。同时,我们也可以尝试着把其它不同行业的优秀策划方案引入到自己所在的行业,带来新的增长。

二、万能活动方案策划模板

一个人焦虑,是因为对自己所做工作的不自信;

一个人害怕,是因为对陌生事物的担惊受怕;

而这一切都是因为缺少一位领路人,或者缺少一个简单明了易理解的知识体系。俗话说:麻雀虽小,五脏俱全。那么,活动方案包含哪些元素,这些元素需要注意哪些事项呢?

模板必需元素1:活动名称

能够占领心智、简单易懂、易传播

模板必需元素2:活动目的

活动目的分为5类,分别是拉新类、活跃类、转化类、留存类、裂变类,主要用于为活动定基调和方向。

模板必需元素3:活动目标

为什么有了活动目的,还要有活动目标呢?这两块是否重复呢?

其实活动目的是为了定活动的方向和活动的基调,活动目标是为了制定数字化、具体化、可量化、可执行、可考核的目标。这些目标一方面让方案策划人员,目标更清晰;同时,也便于公司后期对公司内部人员的考核。

模板必需元素4:活动预算

活动预算分为两类:

一类是方案策划人员根据活动提前预估的预算,这类预算只具参考意义,不可具体对下执行;

另外一类是公司审批通过的预算,这类预算是活动的具体可以开支的预算,活动方案策划人员需要根据最终的预算进行调整,以及寻找奖品合作方洽谈价格和预算,实现预购、预生产或者采购的行为。

模板必需元素5:可行性设计

大部分运营新人对活动无从下手,往往是因为缺乏可行性设计的切入口。可行性设计可以参考电商活动的RSM模型。

R指Role,通过数据分析,筛选符合参与活动的角色用户;

S指Scene,打造符合角色用户的常用场景,通过场景让角色用户尽快进入角色,参与活动;

M指Motivation,用户参与活动的动机。这方面的内容相对较为复杂,主要是对人性的分析。有些活动方案策划人员希望利用七宗罪分析,有些人喜欢利用九型人格分析。如果没有太多想法,可以基于人群对名、利、权、色的基本需求进行分析。

模板必需元素6:活动形式

活动形式多种多样,当然也更多的形式需要活动方案策划人员进行开发。常见的活动类型有排名互动、游戏活动、优惠促销活动、拼团活动。

拉新方向的活动往往使用拼团活动,效果更好一些;比如,我们常见的2人成团或3人成团的拼团活动,在理想状态下往往是依据2ⁿ或3ⁿ等指数函数进行设计的;

活跃方向的活动往往使用游戏活动,效果更好一些;比如转盘活动、红包活动、老虎机活动、蚂蚁森林、开心农场等等;

转化和留存的活动往往使用优惠促销活动,效果更好一些;我们常见的618、双11、双12、会员生日活动都是优惠促销类活动;

裂变方向的活动往往使用排名活动,效果更好一些;这种排名活动可以依据用户的订单数、成交额、邀请新用户数量进行排名,从而实现订单的裂变或者新用户的裂变;

模板必需元素7:活动内容

在互联网的活动中,用户很少可以见到原版的活动内容,我们通常看到的比较多的是活动海报、详情页、落地页、广告链接等等。针对这一块内容,普通人的理解往往也是缺失的。但并不代表没有这方面内容,或者这方面内容不重要。

举例,我们参加的新品发布活动、会销活动,是不是都有工作人员精心准备的PPT。讲师通过对PPT的讲解,让大家对活动的内容更清晰、更明了。如果,作为一种创新型的活动,是十分有必要对种子活动用户,进行明细的活动内容讲解。

模板必需元素8:活动规则

活动规则的设计,需要为活动目标服务,同时规则需要具备引导性、易读性、易懂性、挑战性。如果一场活动的规则,方案策划人都需要思考良久才能明白其中逻辑,可谓是非常失败的典型了。同时,我们也不建议活动不利于用户的规则,通过小字的形式在不明显的位置展现,这不符合用户思维、粉丝思维和诚信品牌思维。

模板必需元素9:活动流程

每一场活动都需要有明确流程、路径、排期等信息,这便于与其它部门进行沟通协作;同时也方便执行人员有着清晰明了的执行方向、节奏、动作。针对流程设计,可以使用免费的ProcessOn在线快速便捷设计。

为了方便活动的实施把控监督与后续复盘,建议活动设计时提前思考活动路径数据埋点动作。这些数据都将成为公司的宝贵资产。

模板必需元素10:风险预案

风险与机会同时存在,在活动策划的同时,需要全面考虑来自政治、法律法规、友商、道德方面的风险。

模板必需元素11:协调资源

一场优秀的活动方案策划,绝对不是一个人能够完成的。

需要产品经理在APP上的活动应用的规划;

需要研发人员在繁忙的开发工作中做好活动程序的开发和测试;

需要设计人员安排好海报设计、规则设计、奖品设计等内容的设计;

需要采购人员对奖品的提前准备和仓储人员对活动管理等等。

模板必需元素12:活动复盘

一场活动无论效果好,还是效果差,都需要进行复盘。为了更好的扬长避短,也是为了后续活动的不断迭代。这种迭代思维对于活动方案策划人员绝对是不可或缺的。复盘包括不限于数据复盘、路径复盘、成本复盘、文案复盘。

最后附上《万能活动方案策划模板》,通过工具化的内容和标准化的SOP让活动策划的效率高上数千倍。

三、最后

作为一名活动方案策划人员或者准活动方案策划人员,需要善于发现自己身边与活动方案策划相关的小事,比如:朋友圈、话题活动等,善于通过这些小事培养自己的活动方案策划思维;合理利用本文中的万能活动方案策划模板,培养系统化的大型活动设计思维;同时,还需积极参与和学习其它互联网大厂的活动,为自己提供更多的思考和参考;另外,积极洞察市场上新的营销知识、运营知识,快速学习并学以致用。


文章来源:人人都是产品经理   作者:互联网运营的那些事

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

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档