首页

界面设计——视觉层面的三维解析

鹤鹤



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


在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。




界面设计是一个很庞大的体系,具有很多原则,比如轻量、容错、清晰等等,其中包含了交互层面以及视觉层面等,今天我想单独把视觉剥离出来,来讲一讲我对界面设计“视觉层面”的理解与认知。


在我看来,界面设计的视觉层面主要可以分为三个维度来解析:信息传递、视觉美化、创意创新。


信息传递是让用户看的明白,快速清晰的获取信息;

视觉美化是让用户看的舒服,让界面足够美观;

创新创意是让用户看的惊喜,看到一些不一样的创意点。


如下图:



三个维度的目标如何实现呢?我提取了以下三个关键词:



清晰、和谐、独特是我们要达成的目标,达成目标一定会有一些原理所在,而有了原理就会有具体的执行方法,所以后面的每一个知识点,我都会按照“设计目标-执行原理-执行方法”的逻辑给大家讲解,大纲如下:


1 清晰 

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大


2 和谐

2.1 和谐-呼应-颜色呼应

2.2 和谐-节奏-变化对比

2.3 和谐-饱满-负形缩减


3 独特

3.1 独特-品牌延展-IP形象结合

3.2 独特-事物本意-事物图形化



1.清晰 

1.1清晰-降噪-容器整合  

设计目标:清晰

执行原理:信息降噪

执行方法:容器整合



当界面信息过于分散时,会对用户造成不必要的干扰,导致用户产生疑惑甚至直接离开界面。


作为设计师,要做的就是对信息进行整合,我们可以称之为信息减噪,目的就是让页面更加清晰,减少干扰。


这里我经常使用“容器整合法”来让内容更加清晰、聚焦。


当分散的内容装进一个“容器后”,就可以使内容聚焦在容器当中,让信息更加规整。而卡片就是一个很好的“容器”。


实际案例:

在改版腾讯动漫个人中心的时候,头部就存在信息分散不聚焦的问题,四个视觉触点(绿色圈处)分散在四个角落,形成极大干扰。



这里我就采用了”卡片容器“的方法,将信息装进容器中,减少分散信息的干扰,使界面更加清晰、工整,效果如下:


 

现在很多产品都在使用卡片化的布局,尤其是在信息数量、层级较多的时候,更加需要有容器将其规整起来,这样才会让界面保持不乱!



1.2 清晰-聚焦-局部放大  

设计目标:清晰

执行原理:聚焦

执行方法:局部放大




我们在平时做需求的时候,经常会遇到信息特别多,特别乱的时候,如果此时我们选择什么都想突出,最后的结果一定适得其反,什么都突出部不了,这时候就需要我们选择一些内容来进行局部放大,反而可以让整体信息更加聚焦、清晰。


这种方法经常用在有数字展示的页面当中,比如下面这种页面:



再比如,下面这个模块信息,如果”3“没有放大,整体的信息会乱到你眼花缭乱,我们看下对比:



所以,大家在遇到有数字,且信息杂乱的时候,就可以采用局部放大的方式来使整体更加聚焦、清晰。



2.和谐  

2.1 和谐-呼应-颜色呼应 

设计目标:和谐

执行原理:呼应

执行方法:以颜色呼应为例


 

很多时候我们会觉得自己做的东西很不和谐,其中一个很重要的原因就是因为页面中没有贯穿的元素,也就是没有呼应,很常用的一个呼应的方法就是颜色呼应。


例如这个画面总看起来不够和谐,你会觉得绿色很突兀,就是因为颜色上没有呼应:



而一旦你想办法,让绿色“事出有因”,比如取自眼镜的颜色:



那么,突兀的问题解决了,和谐的目标也就实现了。

而刚才那个人中心的界面:



我们会发现,图标的颜色也是取自背景色,所以整体看起来才会如此和谐。


除了颜色呼应,还有很多呼应的方式,比如图形、图标风格等等,这里就不再举例了。



2.2 和谐-节奏感-对比变化 

设计目标:和谐

执行原理:节奏感

执行方法:对比变化



对于音乐,节奏感是非常重要的,如果一段音乐一直是一个频率,那可能也算不上音乐了。


界面也是一样的,节奏感是让页面变得“和谐”很重要的因素之一,如何做到呢?


我们在展示文字列表的时候,你觉得下面两种哪个更舒服些呢?



我猜你会觉得第二个舒服一些,因为它有变化,有节奏感,所以它和谐、舒适。


我们会发现很多产品首页带有封面图的列表都有很多种排法,例如1带多,1x2,2x2,2x3等等:



就是为了防止每个模块过于重复,如果每个模块都是每排两张封面,一直下来:



看起来会非常乏味。


2.3  和谐-饱满-负形缩减 

设计目标:和谐

执行原理:饱满

执行方法:负形缩减



在做图标或者字体的时候,经常要讲一个原则就是“饱满”,界面上每个“不能拆分的元素”都需要尽量做到饱满,比如图标,再比如下面这个信息组件:



正文就属于不能拆分的单一原子,大家可能会问,这种信息不就是方方正正的一个信息块吗,怎么会不饱满呢,比如行间距过大:



再比如,我在优化腾讯动漫信息流的时候,发现正文出现的表情远远大于文字,如下图:



表情一旦出现,就会造成大量空隙(负形过大),导致整体不够饱满、和谐。

我们可以看下其他产品,表情和文字几乎都是一样的大小,他们都会尽量缩小负形空间(也就是空隙小大):



在这样的原则之下,优化后的效果如下:



以上是关于和谐的几点方法。


3.独特 

如果你的界面做到了清晰、和谐,在视觉层面就已经算是及格了,如果还能加上一点小创意,就可以让人眼前一亮。

如何能够做到独特?可以从两方面出发,1是品牌,2是内容本身含义。


3.1独特-品牌延展-吉祥物结合  

设计目标:独特

执行原理:品牌延展

执行方法:IP形象结合



从品牌出发,可以有很多方向,比如logo,图形,品牌吉祥物等,下面以品牌吉祥物为例:

在做小说阅读器的时候,有一个设置选项是选择文字的背景颜色,选择控件是圆形,而品牌形象也偏圆形,此时就可以将圆形控件与形象相互结合:



但是选择控件有两种状态,为了更加生动,就让给形象正面面对你的时候作为选择状态,而转过身作为非选择状态,大概效果如下:



此创意已在腾讯动漫小说落地实现。


3.2 独特-事物本意延展-事物图形化 

设计目标:独特

执行原理:事物本意延展

执行方法:事物图形化



除了品牌,还可以根据事物本身的意思来延展图形,比如日间夜间模式的切换按钮,男女性别的切换按钮,都可以利用事物本身的含义来延展图形设计:



此创意已在腾讯动漫个人中心模块落地。


再比如,弹幕的展示方式,就可以联想到电视机,再把电视机图形化,如下图:



此创意已经在腾讯动漫小说频道页实现。


这里需要注意下,有时候如果图形过于普通,可以配合动效来增加独特性,但一定要注意开发成本。

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


如何写出清晰易懂的交互文档?

鹤鹤

在做交互文档之前,我们先要明白什么是交互文档、为什么要做以及做了给谁看。


一、什么是交互文档 


交互文档,即交互设计说明文档。英文 Design Requirement Document ,简称DRD。主要是用来承载设计思路、设计方案、信息架构、原型线框、交互说明等内容。


二、为什么需要交互文档          


有些人可能对文档这种东西比较反感,尤其是从事工作不久的朋友。其实工作得越久,越会发现文档的重要性,它可以帮助你理清思路,并记录下来,便于回顾。


工作上而言,有一份规范的文档可以让你的设计更有说服力,也易于工作对接,提高彼此之间的沟通效率。 


三、交互文档给谁看的   
   

交互文档其实要说给谁看,其实具体情况具体分析。有的公司老板也要盯交互文档,以及甲方爸爸、运营部门同事,都有查看的可能。


【产品经理】产品经理与交互设计师可能是沟通最多的人,产品经理主要在文档中确认设计思路和业务流程,然后过一下页面交互模块。


【视觉设计】UI设计师通常最关注的是页面交互模块,有着产品思维和体验思维的设计师也会仔细看一下设计思路和产品背景,以便于自己更了解产品业务逻辑和用户心理。


【开发人员】前端的开发同事和UI设计师一样,最关注页面交互模块,其他的作为提升会辅助了解。而后端开发人员关注更多的是业务逻辑、信息架构、操作流程等,这些都清晰了,他们才能输出一份准确合格的开发文档。


【测试人员】因为测试人员是把关产品上线的一群人,所以各个模块、步骤都应该去了解透彻,才能提出有效的bug。



四、如何撰写交互文档 


本文主要阐述以Axure软件为撰写工具,大家可以根据实际需求决定用什么软件(Sketch、PPT、Word、PS、AI 等)。比如小需求可以用Sketch,快而。如果是要给甲方爸爸/大老板看的,使用PPT会让他们更好理解。



通常,一个比较基础、规范的交互文档(DRD)由:文档封面、更新日志、文档图例、设计背景/思路、业务流程、页面交互、全局通用说明、废纸篓八部分组成。当然,这不是绝对,你可以根据你的实际工作需要进行增减。


比如,如果是C端产品的话,用户调研的结论、用户画像、用户体验地图等等,都可以放进去给看的人一个参考。尤其是在如今这么关注用户体验、产品思维的一个大环境下,这些数据支撑很有力量。同时还可以帮助开发人员、界面设计人员培养产品思维、体验思维,大家一起将产品变得更好。


其次,交互文档的整洁与美观也很有必要。相信在过去几年不少人有遇到过这样的产品经理(兼交互),他们会输出一些有时连他们自己都看不太懂或者直接从其它竞品截图来的线框图。当开发和界面设计的人提出质疑的时候还美其名曰线框不重要,重要的是里面的业务逻辑。。。其实用产品思维想,交互文档就是交互设计师的产品,而看的人就是用户,保持良好的可读性,可谓至关重要。


1、文档封面

交互文档的封面如上图,通常包括产品的名称、Logo、版本号以及版本发布时间、所属部门、对接负责人/对接人。


2、更新日志

我们都知道,在产品的迭代的过程中,需求/功能是会不断调整的。而更新日志,就是为了迭代而生。它一般由修改日期、修改内容、修改人、版本号和备注组成。如果是新增的功能或模块,建议是要加上链接可直接跳转至新增内容的,如上图。

 

版本号也是同理,都应加上对应的版本链接,便于查看者回溯之前的内容,与当前的新版本形成对比。这一点对开发人员来说很重要,其次对于新同事深入理解产品也能起到很大的帮助。

 

修改日期,通常是按时间倒序排列,查看起来会比较方便。



3、文档图例


文档图例,顾名思义就是关于此文档的一些辅助说明,目的是为了让读者更好地理解文档。如上图的:操作/跳转图例、标签图例、流程图例以及手势操作图例。


4、设计背景/思路

设计背景,根据实际工作需要,放置一些关于思路整理、灵感来源的文档。 


比如用研报告、用户画像、竞品分析报告、商业画布等等。增强文档的说服力,尽量让每一个人都能理解到产品的战略目标和业务逻辑。 


因为我今年对接最久的是一个B端产品的项目,所以整理了一个产品画像,仅供参考。


5、业务流程


业务流程图,不是操作流程图也不是页面流程图。它是产品的整体业务流程,直接和业务挂钩,可以说是产品的核心流程。


例如淘宝APP,买家购物由始至终的流程就是它的业务流程。通常用泳道图的形式展示,多数情况下是由产品经理绘制。


以上是我所负责产品的核心业务的流程图。因为是B端产品,涉及角色较多,针对3个代表性角色分别进行了绘制,仅供参考。(涉及到保密协议,所有关键词都去掉了)


6、页面交互


(1)信息架构

信息架构属于用户体验的结构层,是产品的骨架。一般是由产品经理或者更高层的管理人员给出大框架。除非是大的产品迭代,否则不会大改。


(2)权限说明

如果是C端产品,权限这一块相对简单,比较好整理的。B端产品涉及角色众多,可能要单独拎出来分析整理。以上仅供参考,大家具体情况具体分析。若是功能很单一的产品,交互文档中也可省去这个模块。


(3)操作流程图

产品操作流程图就是通过图形化的表达形式,阐述产品在功能层面的逻辑和信息。它能够更清晰、直观地展示用户在使用某个功能时,会产生的一系列操作和反馈的图标。

 

注:不要将所有流程汇总在一个表里,或者展示在同一个页面中,而应跟随具体的操作或者功能模块放置。时刻想着看文档的人的感受,怎么易懂怎么来。 

上图是登录、注册和找回密码的操作流程图。仅供参考。模板源文件下载,后台回复“交互”即可。


(4)页面线框图

页面线框图,是通过图形化的表达形式,阐述产品在页面层面的信息。包括: 


【页面标题】即每一个页面的对应标题,一般就是导航栏标题


【页面内容】以黑白为主,保证信息规整易读


【交互说明】用标签将其对应起来,包括交互逻辑、操作流程及反馈、元素状态、字符限制、异常/特殊状态、相关规则 等等


【主流程线】只需要画出主流程线即可,千万不可太多太杂,时刻考虑读者的感受

以上是注册/登录的线框图和详细的交互说明。将重点内容用红色标记,可以让查看者一目了然更好理解文档。


7、全局通用说明


全局通用说明,指整个产品可通用或者复用的元素。一般是边做文档边整理出来的,方便自己或者接手该项目的设计师直接调用。其次,对开发及时封装可复用控件也是有参考价值的。 


(1)常用控件

常用控件类似UIKit,通常将极具复用价值的控制整理在一起,方便及时调用。


(2)复用界面

顾名思义就是全局可复用的一些内页,比如选择联系人、独立搜索页等。 


(3)时间规范

在做产品的第一步,就应该约定一个时间规范。不然各个端开发出来,你会发现iOS是斜杠的,Android是横杠的,WEB是圆点的...真到了发现的时候再改,那真是彼此都是无比崩溃的。 


(4)缺省页汇总

缺省页一般包括加载失败、加载中、网络中断和无数据的空页面。为空页可以按照模块整理在一起,方便UI设计师最后一起设计缺省页,保持风格统一。 


8、废纸篓 


废纸篓,被称为是交互文档的“后悔药”。在需求不断变动的情况下,改改改的过程中,请把你改过的稿子,放这里!!!因为很可能最后还是用的第一个方案...(此刻内心有点绝望) 



五、总结


文档、软件只是工具,最重要的还是要落地、实行起来才能对产品有所帮助。所以在撰写文档的每时每刻,都应该站在“读者”的角度思考,他们看的时候感受会是怎样的,会觉得很难理解吗?

转自-站酷

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

全面的图标设计类型和风格总结

鹤鹤

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

图标是 UI 设计中极为重要的一个环节,我们在做每个界面的设计几乎都会涉及到图标的表达,出色的图标设计可以让界面表达更加精致、有趣。图标的设计往往也体现着设计师的基本功,因此除了日常多画提升对图标造型的把控力外,我们也更需要了解和学习图标设计的趋势类型,从而帮助我们提高在设计中的效率。

基于自我学习的目的,平时在浏览一些设计网站时也会做相对应的收集。因此本文主要对于图标设计的 「类型、风格」 进行了整理,以及自己对于每种图标类型的思考。




图标的类型划分

设计网站上的图标可以说是多种多样,不同类型的图标都有着独特的魅力。例如,线性图标简洁轻量、面性图标厚重直接,当然同一种类型的图标也具有很多不同的表现形式。

因此基于本人对图标的理解,大致划分为三类:线性、面性、线面结合。结合三种基础类型的表达方式可以创造出各式各样的表现形式。



线性图标

使用轻量的线条勾勒的图标,整体感受也趋向于精致、细致而具有锐度感。不同的线条表现具有不同的视觉感受,细线轻量、直线硬朗、曲线柔美。

1. 线型图标基础分析及想法

粗细对比

粗细不同,图标的力度和重量感就会有差异。粗线的图标,视觉关注力来说会更加突出,但较于细线的图标也会显得粗壮、厚重。细线的图标,精致、透气、秀美。

但在设计时需要依据 「整体的 UI 风格」 来决定线的粗细,而并非单纯的考虑图标的关注度,反而更需要考虑图标与界面整体的平衡感。

柔度对比

直角与圆角决定了外形的感知和风格的走向,如下图对比中看出,圆角越大图形越趋向于可爱柔美(如下右图),圆角越小则越直接、硬朗和阳刚(如下左图)。因此刚或柔或中间值完全取决于早期对于整体风格的定调。




繁简对比

除了轻量化和简洁之外,图标的识别性也是极为重要。如下左图,「过度简洁」 导致图标失去该有的识别度而出现歧义,而下右图的元素叠加使得图标稍显复杂。在繁与简的平衡中,应该保持在不影响图标识别度的情况下,最大限度的提升图标的简洁程度。




特征的识别度

除了简洁程度,也需要考虑图标该有的特征。例如下图 「评论」 图标的案例,当我把图标中的「三个点」 去掉时,图标依旧具有 「对话/评论」 的表意,而当我把下面的 「箭头」 去掉保留 「三个点」 时,则会出现歧义,它可以被表意为 「更多」 的意思,因此在设计图标时需要对于表意做精准把握,避免歧义出现。




保持图标的特征美感

如下面的 「心形」 图标,下左图是我们具有普识性的图标,与圆形组合之后依然保持着原有的形态美感。但我们不时也会看到第三种设计,整体外形虽然保持着爱心,但为了与整体风格「一致」 强行对外轮廓进行切割,与原图形在美感上则稍微有些出入,这也是我们需要思考的关键点。




组合型比例

组合型的比例会影响到图标的精致程度,准确的 「比例值」 能让整体的造型趋向平衡,更具有美感。如下图案例尝试了两组不同比例的效果,这里以图标窄边作为 「基准值」 进行尝试。当内形为外形的 1 : 2 时(下图2),图标的整体视觉效果较为平衡;当大于 1 : 2 并接近 4 : 3 时,图标内部结构会显得过于饱满。而小于 1 : 2 并接近 4 : 1 时(下图3)则会产生稀疏不紧凑的效果。(这里的比例只是案例需要,实际设计以最终的视觉感知为准)



2. 线性类型拓展

基础的理论,结合延展的应用,可以迸发出更多的创意想法。线形图标也并非只有一种设计形态。通过以下案例,可以看看线型图标设计类型的多样性。

极简风格

整体风格极为简约,没有多余的线条,通过线条还原图形的本质,外形 「简单」 却具有很强的识别性,在视觉感知上轻松、干净。

极简的风格图标在于对图形的把控,多一笔可能显得复杂,少一笔可能影响识别程度。以上图为例,图标的组合元素保持在 2 个左右,整体较为干净。

实际应用:Instagram、Airbnb、Facebook、Twitte




双色

相较于 「纯色的图标」 更具表现力,细节上也会更加丰富,形态感知上多了一层变化。结合颜色的叠加、对比、互补提升了图标的层次感和丰富度。

同色系:同为冷色系、暖色系或同一色系的表达形式。如下图案例,以暗色为主色,亮色点缀提亮,使得图标具有一种高光提亮的感觉。




另一组案例是亮色主色结合暗色,整体图标效果还算可以,但较亮的颜色没有应用在图标的关键特征上,使得图标第一眼的感知稍有减弱。





对比互补色:颜色跨度更大,层次更加分明。如下图案例,红色与蓝色的撞色之后相比单色的图标更加出彩和具有记忆点。





实际案例:腾讯动漫我的页面





透明度变化

本质上与上面一种为一个类型的设计,通过透明度的叠加和变化,提升图标的层次感和空间感,降低图标的压迫性。




实际案例:爱奇艺9宫格图标




渐变层次叠加

渐变带出了图标的质感,结合「不同深度」或「不同饱和度」的变化,让图标更具有细节和层次。





黑白+品牌色

黑白色作为主色调,结合品牌色作为点缀色。与常规的黑白图标相比,既产生了变化,同时兼顾了品牌色的透出。




实际案例:大众点评攻略页面图标





线性渐变

结合渐变的颜色,丰富了整个图标的视觉表达,并提升了图标的视觉冲击力和设计感。案例结合黑白背景作为尝试,白底:粗线比细线的视觉效果相对较好,渐变也能较为清晰地被表达;黑底:细线比粗线的视觉效果显示得更加精致和具有锐度感。





实际案例:网易考拉、NAVER




一笔成形

此类图标在视觉表达上具有较高的线性流畅度和设计感,关注点在于整组图标的 「开口起始点」 设定上需保持一致。例如,「从左到右」或「从右到左」形成一体化的连贯线条,开口起始点不一致会影响整组图标的一致性,应用在页面时也会显得杂乱。



断点图标

与上一种较为类似,但没有连贯度的要求。在线形图标基础上面,寻找一个缺口来打破 「全包边图标」 的沉闷感,使得图标具有透气性和线条的变化。缺口的位置尽量保持统一的方向及大小,另外需要控制开口个数避免过多导致图标外形过于零碎。




实际案例:腾讯体育、京东



面性图标

面性图标比线性图标更能表达出图标的力量感和重量感,比线性图标会更加容易吸引用户目光。在识别度上,面性图标更加依赖于外轮廓的清晰度,因此在设计时对于外形的打磨是重中之重,清晰的外轮廓可以帮助提高识别度。


  1. 面型图标基础分析及想法

轮廓对比

轮廓的差异会体现出不同的气质,如下图的左边和右边的区别,一个气质较为直接硬朗,另一个则较为柔美可爱。流畅的外形可以让面形图标的整体更加简洁、规整,如下图中间的图标在轮廓的处理上则显得比较碎,整体外轮廓造型的连贯度有所欠缺。





镂空对比

适当的镂空除了补充了图形的识别度之外,还提升了面性图标的设计细节。另外需要控制好镂空部分与整体的外形比例,过小或过大都可能影响图标的平衡感。如下图的中间和右边,镂空过小对图标的辨识度并没有多大作用,没有镂空则少了一些透气感。




形体对比

形态上的差异也会具有不一样的视觉感知。以「星」和「心」为案例,单独形体与组合之后的形体相比视觉感知更直观些,而组合形的图标相对会精致一些,多了一些层次。在日常设计中的经验是:越小的图标形体应该越简单,因此建议单体出现较好;若图标的尺寸足够大时可采用组合型的设计,补充图标的细节。



繁简对比

设计面性图标时,对于多余细节的管理也很重要。随着细节的增加,块面切割过多,会使得整体图标变得过于零碎(如下右图)。保持简约的设计提高图标的识别度,在关键的特征细节上做补充(如下中间图的相机闪光灯)。


2. 面性图标类型拓展

面性图标在设计时也可以结合各种不同的表达方式,来提升图标的质感和创意,而非只是简单的填充颜色。

单色面+点缀色

整体的外形使用统一的颜色,结合图标的属性感知使用不同的颜色进行点缀,通过点缀色提亮了图标的视觉效果,达到既统一又具有差异化。





多彩双色

通过对比色、邻近色的搭配来营造整体的图标氛围,提升了图标的层次和丰富度,双色的表达也增添了图形的趣味性。在日常使用的 APP 中极为常见,简单且容易出效果。




微质感渐变

微弱的渐变提升了图标的质感。渐变的方向会影响整体图标的视觉效果,因此可以根据不同设计的需要进行调整。如下图案例:




实际案例:全民K歌





透明度/灰度变化

透明度/灰度的变化,让原来单色的图标变得更加具有层次感和空间感,设计细节更加丰富,降低了单色面性图标的厚重感。





实际案例:企鹅FM我的页面




透明度变化+渐变

渐变的设计提升了面性图标的质感,从颜色上具有一定的丰富度。在渐变的基础上对组合型做透明度差异化,使得图标具有了层次感。




透明叠加的图标+渐变的背景

此类图标常常被应用在 UI 界面中的列表或者顶部入口的位置。





实际案例:全民K歌点歌页面





颜色叠加穿透

图标透明叠加之后产生了交错的负形,叠加出第三个面。虽然整体设计依然保持着扁平化,但却多了一份层次感,并且增加了图标的细节。




实际案例:百度网盘





渐变层次叠加

整体的效果与透明度变化的图标较为接近,通过渐变的深浅变化,使得形状的衔接处出现了明暗对比,因此图标也具有了厚度感和层次感。





实际案例:NAVER、掌上生活





高斯模糊

此类图标基本没有在 APP 中看到,与「透明度变化」或「颜色叠加」相比都更具层次感和空间感,同时图标也具有较强的设计感。





线面结合

结合了线性和面性的优点,既保持了面性的重量感,同时具有线性的精致、细腻。因此在设计时可以根据图标具体想要表达的感觉对线面比例进行把控,不同比例可以呈现出不同的视觉感知。



  1. 线面结合图标的基础分析及想法

线面比例

线面比例的差异,图形呈现出来的张力也会有不同的感受。基于中间填充的图标形态尝试了三种不同的比例,从下图中可以看出,当填充与外形窄边比为 1 : 3 时(左图)图标呈现往内收的感觉;填充与外形窄边比为 1 : 2 时(中间)图标整体较为平衡;当填充与外形窄边比为 2 : 3(大于1:2)时(右图)整体具有外扩趋势。




组合形式

线面可以通过不同的组合形式进行绘制。基于不同的组合形态可以设计出多种多样的线面图标,不同的组合形式会体现出不同的设计风格,因此在设计时尽量多发散思考,寻找出适合你的组合方式。




繁简对比

线面结合本身就由两种形式组合,因此在设计的时候更需要对整体造型进行把控,单体(线和面)造型必须保持较高的简洁程度,这样最终组合形成的图标才不会过于复杂(左图),若本身形态过于复杂,则会降低图标的辨识度和视觉美观度。


2. 线面结合图标类型拓展

线面结合的图标集合了线性和面性的优点,在设计方式上也继承了两者的优点。设计方式也是基于以上两种的结合,因此可以结合出更多设计的可能性。

黑白线+面性品牌色

与「线性+品牌色」的做法较为接近,统一的线性颜色叠加品牌色的透出。




实际案例:好好住、soul




线面双色

基于线面的基础上,在线和面的颜色上做差异。具体做法与线性或面性的双色接近。




线面结合-阴阳

线和面的结合按 50% 的比例进行设计,依据上下、左右、居中等基础方式的结构化设计,整体图标的视觉效果较为跳跃,非常规。



线面双色+错位

在双色图标的基础上,线和面按照统一的 「百分比」 进行缩放,并进行透视和位移的设计,整体呈现出来的是一种交错叠加的视觉效果,相比普通的线面双色更加丰富。




实际案例:闲鱼底部tab、脸球底部tab




线面错位+渐变

基于上一种风格,对面或者线的颜色进行渐变设计,丰富了图标的质感和颜色更加细腻。




线面透明度变化

与「线面透明度变化」的设计方式大致一样。如下图案例,「弱线强面」的第一识别度较弱,而「弱面强线」 的外形识别度较高,也更符合图标的表达。




实际案例:新浪微博、腾讯新闻

基于三种基础的类型表达,可以拓展出多种多样的设计形式。除了以上的案例之外,还收集了一些其他的设计。





线面结合 – 插画

整体比较偏向插图的感觉,细节和元素较多,常见于一些 APP 的空白页设计。




线面结合 – 卡通插画

整体感觉比较可爱、卡通、二次元,常见于一些二次元或漫画类的 APP。





面性 – 渐变强质感

整体风格的光影质感会比较强烈,常在一些活动运营或小游戏的界面出现。




面性 – 扁平写实

整体感觉比较扁平,细节的丰富度与现实感知接近。





线面+渐变插画

整体风格比较偏向绚丽多彩的颜色风格,质感和细节较为丰富。


写实风格




3D质感图标

由于 C4D 的制作成本相对较高,目前较少在常规的 APP 中看到。但 3D 作为一个主流的设计趋势,在时间和能力允许的情况下需要多做这方面的尝试。




等距的线面结合

等距的设计,让原本线面的图标丰富了层次,并具有立体透视的感觉。




除了以上这些之外,我们在实际场景中也会发现一些较为特别的图标设计。

Facebook 更多页面的列表图标

整体风格偏向插画风+渐变质感。由于更多的页面为纯列表的设计,因此整个页面在图标的设计上做了很大胆的尝试,与常规的单色图标相比更具有吸引力。为了区别不同的业务,系统性质的功能图标做了色调的区分。




APP Store 游戏和新APP界面下的类别列表图标

整体为具象化扁平风格的设计表达,图标的颜色还原了最基本的现实感知。




iOS 系统办公类软件的起始页面图标

整体风格比较偏商务简约,具象的图形表达+轻微的渐变质感。




QQ手机版中延展的功能图标

整体风格偏向轻写实+微弱渐变。每个图标都具有丰富的细节表达,色调方面基于业务属性结合品牌色进行了区分,整体既统一又具有差异化。




大众点评顶部入口的图标

整体风格偏向写实+强渐变+炫光感,每个图标都具有丰富的细节表达。




旅法师营地

游戏、二次元类的 APP,因此在图标的设计上也偏向细节较为丰富的插画风格。




哔哩哔哩动漫

图标风格偏向卡通插画,选中态与默认态的设计较为巧妙。



总结

本文的重点在于透过这些设计类型或者技法的了解,帮助我们在日常设计中提升输出效率。图标虽然作为 UI 设计的基础,却有很深的学问,精致的图标更是可以起到点睛的作用,提升界面的质感和氛围。

图标的种类远远不止本文所提到的这些内容,但是万变不离其宗,都是「线性、面性、线面结合」 再结合 「透明度、渐变、颜色叠加、质感、多维空间」等等的表达方式而设计出来的。

我们除了需要掌握这些内容之外,还需要提升图标设计的造型能力,更需要日积月累的练习和思考,从量到质的变化。

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


解决nodejs koa express以及vue,nuxt项目中使用别名映射vscode不提示的问题,兼容webpack的@和best-require 的:xxx 别名映射

seo达人

nodejs中使用别名映射,兼容webpack的@和best-require 的:xxx 别名映射

项目地址: https://github.com/langyuxiansheng/biu-server-admin



写在前面

研究了很久,找了很多资料发现都没有,只好自己去想办法,查资料.才弄好的,凌晨发布的,转载请注明出处.

在做nodejs项目开发的时候,你是不是也在为

require('./posts');

require('./controllers/posts');

require('../controllers/posts');

require('../../controllers/posts');

require('../../../apis/controllers/posts');



或者



require(ROOT_PATH + '/application/apis/controllers/posts');

// other require()...

require(ROOT_PATH + '/application/apis/controllers/users');

require(ROOT_PATH + '/application/apis/controllers/products');

require(ROOT_PATH + '/application/apis/services/rest');

require(ROOT_PATH + '/application/apis/config');



这样的写法而困扰;



那看完这篇文章,从此之后就可以告别这个烦恼了;



感谢一下 best-require 这个模块包的作者,不然还需要自己去写这个

npmjs 链接 https://www.npmjs.com/package/best-require

github 链接 https://github.com/yuezhihan/best-require



不废话了,进入正题 往下看:

  1. 安装库 best-require 进行别名映射





    npm i best-require --save


  2. 映射别名. 实例在本项目中 server/index.js 中





    const path = require('path');

    const ROOT_PATH = process.cwd();

    const SRC_PATH = path.join(ROOT_PATH, /server/src);

    console.log(ROOT_PATH, SRC_PATH);

    //映射目录别名

    require('best-require')(ROOT_PATH, {

        root: ROOT_PATH,

        src: SRC_PATH,

        controllers: path.join(SRC_PATH, '/controllers'),

        models: path.join(SRC_PATH, '/models'),

        routes: path.join(SRC_PATH, '/routes'),

        crawlers: path.join(SRC_PATH, '/crawlers'),

        services: path.join(SRC_PATH, '/services'),

        middleware: path.join(SRC_PATH, '/middleware'),

        lib: path.join(SRC_PATH, '/lib'),

        config: path.join(SRC_PATH, '/config'),

        logs: path.join(SRC_PATH, '/logs')

    });



    //运行服务

    require('./src/bin/Server').run();


  3. 设置 jsconfig.json





    {

        "compilerOptions": {

            "allowSyntheticDefaultImports": true,

            "baseUrl": "./",

            "paths": {

                "@/": ["client/"],

                ":root/": [""],

                ":config/": ["server/src/config/"],

                ":lib/": ["server/src/lib/"],

                ":services/": ["server/src/services/"],

                ":controllers/":["server/src/controllers/"],

                ":models/": ["server/src/models/"],

                ":routes/": ["server/src/routes/"],

                ":crawlers/": ["server/src/crawlers/"],

                ":middleware/": ["server/src/middleware/"],

                ":logs/": ["server/src/logs/"]

            }

        },

        "include": ["server/*/","client/*/"],

        "exclude": [

            "node_modules",

            "nuxt-dist",

            "server-dist"

        ]

    }


  4. vscode要安装 path-intellisense 插件 并在设置中配置setting.json



    vscode 中的设置,setting.json



    workspaceRoot 是当前的工作空间,就是当前编辑器打开的目录.



    配置如下





    {

        "path-intellisense.mappings": {

            "@": "${workspaceRoot}/client",

            ":root": "${workspaceRoot}",

            ":lib": "${workspaceRoot}/server/src/lib",

            ":controllers": "${workspaceRoot}/server/src/controllers",

            ":models": "${workspaceRoot}/server/src/models",

            ":routes": "${workspaceRoot}/server/src/routes",

            ":crawlers": "${workspaceRoot}/server/src/crawlers",

            ":services": "${workspaceRoot}/server/src/services",

            ":middleware": "${workspaceRoot}/server/src/middleware",

            ":config": "${workspaceRoot}/server/src/config",

            ":logs": "${workspaceRoot}/server/src/logs",

        }

    }


  5. 重启vscode,试试看吧!

    作者的目录结构









    vue中使用







    后续更新

    nodejs中使用sequelize的model映射,这样就解决了没得提示的烦恼了,让你的效率提升2个档次

    写在后面

    如果你遇到难题或者有疑问,有好的建议请留言反馈.

    这种提示以及Ctrl + 鼠标左键的跳转,只针对 .js 的文件, .vue的没试过.这个也只是为了解决 js方法映射后没提示的问题.


vue生命周期过程简单叙述

seo达人

vue 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程。设置数据监听、编译模板、挂载等等。vue生命周期还是不太容易理解,这里就简单地说一下它的整个过程。

1创建一个vue实例



new vue({

data () {

return {

}

    }

})



2 初始化事件和生命周期 beforeCreate 创建实例之前执行的钩子函数

3 初始化·注入和校验 created 实例创建完成后执行的钩子



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

}

})



4 渲染页面 编译 beforeMount 将编译完成的html挂载在虚拟dom时执行的钩子

5 mouted钩子 挂载完毕对数据进行渲染 会做一些ajax情求初始化数据 mounted整个实例过程中只执行一次



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

},

// 一些钩子函数

mouted: function () {

console.log('mounted')

}

})



6 修改数据 beforeUpdate 更新之前的钩子

7 updated 修改完成重新渲染

8 准备解除绑定子组件以及事件监听器 beforeDestroy

9 销毁完成 destroyed


图片切换简易版

seo达人

css:

*{margin:0;padding:0;}

tu{margin: 50px auto;padding: 10px;width: 500px;

background: rgb(201, 230, 128);text-align: center;}



html:



<body>

    <div id="tu">

        <P id="info"></P>

        <img src="jiao.jpg" alt="冰棒">

        <input type="button" id="yi" value="第一张">

        <input type="button" id="er" value="第二张">

    </div>

</body>



javascript:

window.onload = function(){

var yi = document.getElementById(“yi”);

var er = document.getElementById(“er”);

var img = document.getElementsByTagName(“img”)[0];

var imgArr = [ “jiao.jpg”,“san.jpg”,“bao.jpg”,“hua.jpg”,“pei.jpg”,“tu.jpg”,“xin.jpg”,“niu.jpg”]

var index = 0 ;

var info = document.getElementById(“info”);



    info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    yi.onclick = function(){

        index--;

        if(index < 0){

            index = imgArr.length - 1; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    }



    er.onclick = function(){

        index++;

         if(index > imgArr.length - 1){               

            index = 0; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "张图片,当前第"+(index+1)+"张";

    }

}


破熵而行-驱动产品增长

鹤鹤

本文是基于我对《破茧成蝶2》读后的观点和反思,自己的项目经历跟作者相似,也是为了更好的总结这两年对产品、对设计的心得。

本文篇幅较长,请耐心阅读。主要是总结一个完善的体系,便于大家理清自己的设计思路和自我定位。


阅读本文你可以获得什么?

一、前言——拥抱变化,破熵而行

二、产品设计师的思维转变

三、对设计师的能力模型

四、设计师该关注的数据

五、产品周期影响设计策略

六、设计师顺势而为,自我定位 



一、前言——拥抱变化,破熵而行

在人口红利、流量红利、资本红利逐渐消退的互联网下半场,从“买流量、买用户”为代表的粗放式发展进入了稳扎稳打的精细化时代,需要考虑在有限的资源及能力的基础上精打细算、量入为出,让产品可持续地发展下去。


互联网产品正在从标准化、大众化转向个性化。针对垂直领域或细分用户群体的产品越来越有市场。战略层也需要抽丝剥茧,抛去形式注重产品的本质。比如一些下沉型电商业务,红包和会员都只是一种形式,其实本质还是用户追求“性价比”有利可图,所以一旦用户的“便宜需求”难以达到,还是会引发数据的下降,这就需要大量可持续资本投入维持。见利期的变长,传统电商行业的锋芒也被新零售掩盖,投资人也不断转移更创新可收的项目。所以真正的留存是可持续发展的,且需要根据企业自己的实际情况,在战略上和运营上,有一个人无我有的本质上的创新点(核心竞争力),而非形式上的创新。

Image title


在日新月异,变化百态的互联网下半场,创业者和产品设计工作者都需要改变自己的想法,拥抱变化破熵而行,保持自己战斗力,用更科学客观的方法来提升产品价值。



二、产品设计师的思维转变

产品设计师的重要标志是“以产品为中心”的思维及觉悟,即能打破本位主义,站在产品的角度,从整个项目闭环上协同解决问题,提升产品价值。设计师的角度理解,就是打开自身格局,扩展上下游的知识,通过自己的综合能力助力于业务。在此过程中职能会有跨界,比如我会提出验证数据的方法,比如ABtest,从业务角度推设计可以通过哪些数据进行提升,然后做出不同方案进行评审,推动项目实施落地。


产品设计者可以由产品经理,UX,UI担当或转变,我更倾向是全栈的UX,通过思想认知的转变,职能界线的打破来扮演这个角色。自己也是这样努力的在转型。得益于公司的开放包容,这两年我还是能承担起这样的角色,建立组织,带领团队,通过设计来提升产品价值。对于产品设计师,第一个需要改变的就是产品设计思维。



2.1从“问题驱动”到“价值驱动”

Image title


2.2 始终贯彻精益思维


互联网寒冬,连阿里都要把钱花在刀刃上。阿里8月15日发布的财报上,虽然新零售收入水平同步增速高达134%,高于上一季度132%,成阿里本季营收增长引擎,但是阿里本财季对盒马新零售业务投入仍然十分谨慎。最近两个季度盒马开始由原先的大门店业态转向更多元、成本更低的小业态的转型期,本财季内净增门店仅为15家。所以需要我们始终贯穿精益思维去做产品。


精益思想(Lean Thinking)源于20世纪80年代日本丰田发明的精益生产(Lean Production)方式,精益生产方式造成日本汽车的质量与成本优势,曾经压得美国汽车抬不起头。世界汽车工业重心已向日本倾斜。精益思想的核心就是(消除浪费)以越来越少的投入——较少的人力、较少的设备、较短的时间和较小的场地创造出尽可能多的价值;同时也越来越接近用户,提供他们确实要的东西。


那么要做到产品上的精益思维,一方面要贯彻“以提升产品价值为目标”并用数据验证;另一方面建议先用较小成本在小渠道验证,然后在扩大投入。

Image title



整个产品团队,不管是产品负责人、产品经理、设计、运营、开发都需要紧密联合在一起,为提升产品价值而努力。为什么这么说,其实本质上大家都是为了业务好,但是每个人却扛着不一样的KPI,产品经理有业务指标,运营有运营指标,设计师也有自己的设计价值观。如果大家都只为了自己,产品和运营会唯业务指标做导向,典型的就是引入大量无法留存的流量,耗费资源,最终对整个产品长期发展并没有太多价值。对设计师来说,我见过很多设计都很有偏向性,要么就是一味追求好看,感觉业务挡了自己发挥才能,要么一味分析竞品和交互,却给不出有效、有价值的解决方案。其实都不是站在产品价值上看问题,更希望是自己能交出一份满意的答卷。我自己也在一个电商摸索期犯过类似错误,无法忍受一个没有细节的产品,过多追求设计质量,而其实产品初期,负责人只想着能快速迭代,找到活下去的出路。



2.3以始为终打造数据闭环 


数据闭环就是从你的产品价值目标来拆分你的量化目标,通过设计上线等验证数据,形成闭环,然后循环优化的这个过程。需要从传统的“问题驱动”转变成“价值驱动”,因为解决问题是难以被价值量化的,整个业务发展过程中也会出现很多产品问题需要被优化,我们把“提升产品价值”作为目标就形成了“以终为始”的数据闭环。其实现在大部分企业都是以目标驱动业务的,拆分目标,变成颗粒度目标数据再进行逐步达成,这个过程不是说不去“发现问题-解决问题”,而是需要知道工作要务,“重要紧急”的先做,“重要不紧急”的长期计划实行,至于用户体验上的东西也是要有节奏的去优化。

Image title




三、对设计师的能力模型


对设计师的能力模型一直在提出不同的更高要求,无论是哪个大咖提出来的理论似乎都是非常的正确和所需要的,导致很多设计师的恐慌,我是不是要被淘汰了。

Image title

Image title


其实还是要抓住本质,因人而异看待。设计的能力分布模型,大概分为 “I”型 、“一”型、“T”型。


“I”型为单一型,传统对设计师的定义就是单一的,领域分的比较细。单一型主要看深度,深度达到一定程度可以成为专家,但是如果浅薄又单一很容易被淘汰。


“一”型为广博型,广博型最忌讳的就是成为什么都会却什么都不精的“万金油”,看似什么都懂,结果做起来什么都废。


新型模式“T”型,“T”型既有较深的专业知识,又有广博的知识面,这类是集深与博于一身的人才,也是市面上最有市场的一类。


综合性人才都是需要一个长期由深度到广度,再由广度到深度循环提升的过程,在此过程中也很容易迷失,跟“I”型对比,无法通过有限的时间都提升上去,那么需要掌握一定的方法,认识自我逐步提高。

Image title



3.1、强大扎实的专业能力——知行合一 广而不范


为什么强调专业能力,《破2》里面提到,思维是1,技能是0,话是没有错,但是80%以上的设计师还是靠技能在吃饭。有的东西你想得再好无法落地,也是无济于事。所以一个专业合格的设计师必须有强大扎实的专业能力,当然思维是内驱力,如果你的专业很出色,估计内核也不会差。


首先要有一个专业优势判断,然后强化自己的优势,再根据横向模型去扩展对自己工作最优帮助的继续加强,做到广而不范。比如你是一个ui设计师,你要保证自己的视觉能力,然后去扩展交互能力,其次再去强化动效,体验等等。再比如你是一个交互设计要保证自己对交互的精通,然后提高用研、数分能力,再去扩展其他能力。还有要做到知行合一,其实大部分我们都在通过不同的学习提升自己的能力,但是要把理论性,缥缈性的知识概念落实到自己的工作中去,努力去实践,再复盘总结不断提升自己的实操能力。比如你学了插画,你的项目上能不能用上;你竞品分析了更好的体验,能不要也变相用到自己的项目里;你新学了一些分析原理,能不能用同样的思维来分析自己的项目等等。



3.2、保障基础软实力 —— 一颗强大正能量的心


心力、脑力、体力,都要保障,尤其是互联网年轻化后,体力也非常重要,京东就直接把不能加班的员工全开了,多么痛的领悟。那么对于产品设计师其实更关键的是心力和脑力,越是高阶设计师,思维能力、洞察能力越是重要。无论是ui、ue、还是产品设计师我觉得都需要有强大的自我驱动能力,打破本位主义,不断扩展自己的专业素质,才能更好的融合于业务。阿里提出:人才是聪明的,的确很多人忽略了先天的差距,事实上同样的努力,不一样的天分,总还是有区别的,有的人适合做小兵,有的人适合做将军,但是你可以保证的是心态,心态里我总结了两个我觉得非常重要的点,一个就是皮实、一个就是积极,就是有一颗强大而正能量的心!



3.3、先让自己变得足够优秀再考虑做管理


对于走技能线还是走管理岗,很多人会想的很多。其实先让自己变得足够优秀,不断提升,一切自然水到渠成。领导者或许需要天分,管理者是每个人都可以成为的,且有一些理论和工具可以支撑的,所以很多团队会内部提拔,因为培养起来并不难。只要你足够优秀,还是很有希望做管理,相反过早做管理,自己的基石没打好,管理起来也会比较艰难。有兴趣的人可以去听一下喜马拉雅上的《可复制的领导力》。如果你励志要走向管理层,也可以根据阿里的纵向能力模型对号入座,不断提升,不过很多时候机遇也很重要。



四、设计师该关心的常规数据


想要驱动产品增长必须要对数据有所了解,来帮助我们产出更贴近用户行为的设计,同时需要了解数据产生的过程和基础工具。最基础的就是产品提出数据,让开发进行埋点,此过程中设计也可以提出自己想要关心的数据点。公司有后台可以直接观测数据,现在也像GrowingIO数据分析产品无需在网站或app中埋点,即可获取并分析全面、实时的用户行为数据,需要观察数据可以直接去后台关注,也可以让产品经理或者数据分析师给你拉数据。


页面浏览量(PV)

用户每1次对网站中的每个网页访问(成功访问/进入)均被记录1次。用户对同一页面的多次访问,访问量累计。在一定统计周期内用户每次刷新网页1次也被计算1次。理论上PV与来访者数量成正比,但是它不能精准决定页面的真实访问数,比如同一个IP地址通过不断的刷新页面,也可以制造出非常高的PV。


独立访客人数(UV)

访问网站的一台电脑客户端为一个访客。00:00~24:00内相同的客户端只被计算一次。使用独立用户作为统计量,可以更加精准的了解一个时间段内,实际上有多少个访问者来到了相应的页面。


用户访问次数(VV)

当用户完成浏览并退出所有页面就算完成了一次访问,再次打开浏览时,VV数+1。VV同时也是视频播放次数(Video View)的简称。


跳出率(BR)

表示用户来到网站后,没有进行操作就直接离开的比例,代表着陆页面(访客进入网站的第一个页面)是否对用户有吸引力,常用的计算方式是落地页面的访问量除以总访量。


退出率(GA )

针对网站内某一个特定的页面而言,退出率是衡量从这个页面退出网站的比例,通过一个页面的退出次数除以访问次数。退出率反映了网站对用户的吸引力,如果退出百分比很高,说明用户仅浏览了少量的页面便离开了,因此需要改善网站的内容来吸引用户,解决用户的内容诉求。


平均访问时长(AAT )

指在特定统计时间段内,浏览网站的一个页面或整个网站时,用户所停留的总时间除以该页面或整个网站的访问次数的比例。该数据是分析用户粘性的重要指标之一,也可以侧面反映出网站的用户体验。平均访问时长越短,说明网站对用户的吸引力越差。


转化率(CR )

在一个统计周期内,完成转化行为的次数占推广信息总点击次数的比率。常用的是登录注册的新流量转化率和产生实际支付的转化率。转化率是产品盈利的重要指标之一,它直接反映了产品的盈利能力。提升转化是提升产品价值的重要性指标,一般用A/Btest去检验更优方案来提升转化率。


回购率(RR)

指用户对商品或者服务的重复购买次数(回头客),是针对有购买功能的产品,回购率越高,用户粘性越高。


新增用户

既安装应用后,首次成功启动产品的用户,按照统计跨度不同分为日新增(DNU)、周新增(WNU)、月新增(MNU)。新增用户量指标主要是衡量营销推广渠道效果的最基础指标。新增用户占活跃用户的比例也可以用来用于衡量产品健康程度。如果某产品新用户占比过高,那说明该产品的活跃是靠推广得来,这种情况非常有必要关注,尤其是新增用户的留存率情况,这种情况留存率低对产品来说也非常危险,视为不可持续发展的流量。


活跃用户

既在特定的统计周期内,成功启动过产品的用户。除此之外,我们还可以将活跃用户定义为某统计周期内操作过产品核心功能的用户(按照设备去重统计)。

活跃用户是衡量产品用户规模的重要指标,和新增用户相辅相成。


DAU(日活):某个自然日内成功启动过应用的用户,该日内同一个设备多次启动只记一个活跃用户;

WAU(周活):某个自然周内成功启动过应用的用户,该周内同一个设备多次启动只记一个活跃用户。这个指标是为了查看用户的类型结构,如轻度用户、中度用户、重度用户等;

MAU(月活):某个自然月内成功启动过应用的用户,该月内同一个设备多次启动只记一个活跃用户。这个指标一般用来衡量被服务的用户粘性以及服务的衰退周期。


留存率

留存率是验证用户粘性的关键指标,既在某一统计时段内的新增用户数中再经过一段时间后仍启动该应用的用户比例(留存率=留存用户/新增用户*100%)。统计留存用户的颗粒度有:
自然日:包括1天后、2天后、3天后、4天后、5天后、6天后、7天后、14天后和30天后
自然周:包括1周后、2周后、3周后、4周后、5周后、6周后、7周后、8周后、9周后......
自然月:包括1月后、2月后、3月后、4月后、5月后、6月后、7月后、8月后、9月后......
自然日的留存中主要关注(次日留存、7日留存、30日留存并观察留存率的衰减程度。一般来说,留存率低于20%会是一个比较危险的信号。)

日留存率:快速判断App粘性
日留存率:可以很快的帮助我们判断 App 的粘性到底强不强。我们可以通过日留存率的数值来判断一个 App 的质量,通常这个数字如果达到了 40% 就表示产品非常优秀了。我们可以结合产品的新手引导设计和新用户转化路径来分析用户的流失原因,通过不断的修改和调整来降低用户流失,提升次日留存率。

周留存率:判断App用户忠诚度
周留存率:我们可以通过周留存率来判断一个用户的忠诚度,在一周的时间段里,用户通常会经历一个完整的使用和体验周期,如果在这个阶段用户能够留下来,就有可能成为忠诚度较高的用户。

月留存率:了解App版本迭代效果
月留存率:通常移动 App 的迭代周期为 2 - 4 周一个版本,所以月留存率是能够反映出一个版本的用户留存情况,一个版本的更新,总是会或多或少的影响用户的体验,所以通过比较月留存率能够判断出每个版本更新是否对用户有影响。


流失率

指那些曾经使用过产品或服务,由于各种原因不再使用产品或服务的用户。用户流失率=某段时间内不再启动应用的用户/某段时间内总计的用户量。流失率和留存率有紧密关联,流失率高既留存率低,但活跃度不一定高,因此需要综合分析。也是重点关注次日、7日、30日的流失率。对于流失用户的界定依照产品服务的不同而标准不同。社交类产品用户几乎每天登录查看,可能用户未登录超过1个月,我们就可以认为已经流失了。而电商类产品用户可能3个月未登录或者半年内没有任何购买行为可以被认定是流失了,所以不是每个产品都有固定的流失期限,而是根据产品属性而判断。


一次性用户

既新增日后再也没有启动过应用的用户。一次性用户是关键的营销指标,和判断无效用户的标准,从中把目标用户过滤出来。一般划定的界限是至少超过7天时间才能够定义是否是一次性用户。


使用时长

既统计时间段内,某个设备从启动应用到结束使用的总计时长。一般按照人均使用时长、次均使用时长、单次使用时长进行分析,衡量用户产品着陆的粘性,也是衡量活跃度,产品质量的参考依据。


启动次数

既统计时间段内,用户打开应用的次数。重点关注人均启动次数,结合使用时长可进行分析。用户主动关闭应用或应用进入后台超过30s,再返回或打开应用时,则统计为两次启动,启动次数主要看待频数分布情况。


使用间隔

既用户上次使用应用的时间与再次使用时间的时间差。使用频数分布,观察应用对于用户的粘性,以及运营内容的深度。虽然是使用间隔,但是通过计算同一设备,先后两次启动的时间差,来完成使用间隔统计,充分考虑应用周期性和碎片化使用的特征。


常规数据基本就这些,值得思考的是不同类型的产品,定义每个数据的具体量是不同的,而且产品周期中的不同阶段关注的主要数据指标也会有不同侧重点。



五、产品周期影响设计策略 


产品阶段就是产品生命周期,可分为探索期、成长期、成熟期、衰退期,每个阶段的设计策略和工作权重都有所不同。虽然每个阶段侧重点不同,凡是还是需要辩证看待结合实践,比如大厂的产品初期起点较高,有大流量的引流和背后大数据支撑,所以各种方式都没有太大的限制,根据业务,资源不同来根据产品用方法。

Image title


5.1探索期(产品初创期)


目标:掌控产品方向(活下去)

关注:用户价值

用户:假设用户

策略:最小成本验证产品方向

方法:假设的用户画像、产品故事地图、设计冲刺法、访谈、用户研究(定性分析)

关注数据指标:推荐意愿/新增用户数/满意度

品牌:不急于建立

Image title



5.1.1、通过访谈、调研,初步建立用户画像,抽象假象用户,提炼关键点。


用户画像是在大数据时代背景下,用户信息充斥在网络中,将用户的每个具体信息抽象成标签,利用这些标签将用户形象具体化,从而为用户提供有针对性的服务。


产品摸索期我所定义的目标用户其实并不准确,而是假象用户,此阶段的概念用户一直随着产品方向的改变而改变,所以无法确立明确针对性的用户画像信息,但是我们应该先确定一个大概的目标用户定性的去分析,区分用户角色,挖掘不同角色的痛点,然后找到解决问题的切入点。

Image title


5.1.2、利用用户诊断法建立产品假设,并进行价值评估,明确产品方向。

Image title


5.1.3、利用用户故事地图筛选核心任务及对应功能


用户故事地图可以用小会议的形式展开,就是让所有参与者一起用便签,一张一个动作,从左至右按照时间线,描绘用户在产品使用场景下所发生的所有用户行为。同一时间发生的,就写在同一位置的下方;出现同一场景不同可能的动作时,可能会形成不同的分支动作;直到重回主线或者结束支线。最后关键还是总结用户痛点和产品核心的功能点。

Image title

Image title



5.1.4、贯穿最小成本原则,最小成本试错——MVP和设计冲刺法


最小可行产品(MVP)是指可以产生预期成果的最小产品发布,对于迭代产品来说,又可以讲最小可行方案:最小可行方案是指可以产生预期成果的最小发布方案。


设计冲刺法的本质理念跟MVP还是一致的,只不过所用成本更小。设计冲刺法特点:参与人员较少且有最终决策权;闭关冲刺使用白板随时记录;适用于风险高、时间紧、起步难的情况。


MVP是最小可行方案进行发布验证,而设计冲刺是更短时间产生一个头脑风暴的真实原型,进行真人测试,这个过程并没有真正设计一款产品,而是通过设计方式做了一次早起用户调研,并获得相对有验证性的结果,避免真实上线效果不好对用户造成的负面影响。


其实市面上大部分还是用的MVP,因为实际上用设计冲刺,一个是对设计人员的要求较高,二是验证的结果由于测试范围的限制不一定与市场反应一致。与做一个小产品来说,现在更流行保险的办法可以做一个小程序,或者几个小程序进行方案对比,大流量下好乘凉,小程序的开发成本,用户引入成本更低。



5.1.5、定性为主,不断试错中掌控产品方向


船小才好调头,对于产品来说如果本身战略层出现问题,后续投入越多的资本越难收场,用户量不上不下,用户粘性不高,结果资金不够了,用之鸡肋弃之可惜,再转方向还是比较困难。尤其是用户对产品建立一定认知后,重新调整大方向,基本等于刷新用户流。



5.2成长期(产品高速增长期)


目标:巩固差异化的产品定位(活得好)

关注:产品核心竞争力

用户:目标用户

策略:大胆创新巩固差异化的产品定位

方法:提炼用户画像不断校验、用户体验地图、设计接力法(定性+定量)

关注数据指标:新增用户数/留存率/复购率/活跃度

品牌:建立有创意且能落地的品牌,加深用户认知,占领用户心智

Image title


5.2.1、用户校验,确立产品定位


产品成长期用户大量涌尽,掌握一定数据和掌控产品方向后可以通过数据分析或用户调研,来看实际用户特征和之前假设的用户人群特征是否符合。集中精力服务好最重要的用户群体,定性挖掘、定量验证的思路去完成用户画像。


可针对目标用户进行调研和深度访谈,从用户选择产品最关键因素提炼产品目前的核心吸引点。用户的关心点也要跟产品本身的当前定位做对比,看用户接受到的点是否是产品让他们感受到的点,感受不到又是什么原因,不断提炼核心竞争点的优势。

Image title


成长期需要确认产品的定位,就是差异化的产品方向,即差异化的目标用户群体(价值排序)、差异化的产品及服务(竞争优势)、差异化的产品价值(核心优势)。


价值排序:通过了解用户特征,明确用户分类及相关利益群体,然后明确把谁放在第一位。在实际产品设计过程中,我们也可以用价值排序,来设计产品功能和交互体验,比如平台收费是针对买方还是卖方。


竞争策略:避实就虚地找到竞争对手的盲区或自己的优势所在,为用户提供差异化服务。竞争策略主要依赖高层的洞见和判断,如果你出产品和竞争对手没有本质差异,那就考虑是否可以服务与不同种类的人群或者能提供不一样的价值。比如同样是做电商,你的质量、价格、物流、种类是不是有优势。



5.2.2、确立增长指标


增长指标是对应于产品差异化定位的可量化指标。增长指标要符合:可成长性,客观性,有方向性。避免主观,虚荣的指标,最常见的就是过分关注获客拉新指标,留存不足,及前后导向不一致的情况。至于用户满意度、任务完成度等主观的体验指标可以作为参考,但是不能作为最终的增长指标。核心关注点是转化、留存、复购、活跃度等指标,既侧面体现了良好的用户体验,增加了用户与产品粘性,让产品长期可持续发展。



5.2.3、利用用户体验地图(E-Experience Map),同理心地图,结合增长指标大胆提出假设,排优先级,并根据开发成本等因素通过四象限原则,选择最小成本提升指标   


用户故事地图、用户体验地图、同理心地图的区别:用户故事地图强调用户使用产品/服务的任务流程,用它来筛选当前最重要的任务及对应功能,以完成最小可行产品设计;用户体验地图不仅包括任务流程,还包括与之对应的体验问题,更关注用户的体验情绪,从而找到提升体验的机会点;同理心地图帮助我们在每个不同场景下与用户换位思考、打开思路,挖掘用户选择决定的深层动机。在实际使用场合没有严格界线,可根据实际情况使用核心点进行分析。

Image title

Image title



5.2.4、体验升级——逐步发布验证(设计接力)

大版本迭代的优点就是一旦成功,可以大幅度拉开和竞争对手的差距,但是一旦失败,会影响业务的发展得不偿失。所以为了预防风险,大多数公司会在上线前先进行可用性测试,进行必要的线上验证再发布。通过不断分析增长指标,找选设计方向,进行模块拆分,接力发布,循环验证,提升产品价值。


先验证后发布方法:


a、A/BTest

制作两个(A/B)或多个(A/B/n)版本,在同一时间维度,分别让组成成分相同(相似)的访客群组(目标人群)随机的访问这些版本,收集各群组的用户体验数据和业务数据,最后分析、评估出最好版本,正式采用(消除UX、bug带来的影响数据),并不断迭代进入一下个A/BTest。产品成长期,中小型企业可以用局部变量测试,大型成熟产品可以重叠实验(更多、更好、更快)。

要求:1、随机抽样;2、足够的样本量。

优点:可以在同时段观测效果,受到环境影响因素一致,容易客观验证方案

缺点:需要占用开发资源,完整的一次测验需要花费时间较多


b、灰度测试

先进行一个小范围的尝试工作,然后再慢慢放量,直到这个全新的功能覆盖到所有的系统用户。比如Facebook先发布1%,慢慢推广到全部,现在普遍大厂也会用到这个方法,减少大版本试错带来的损失。灰度测试的同时可以A/Btest,在灰度测试过程中选出最佳方案,然后全部发布。

合适:用户群体较大,否则会因为流量小而导致结果不准确。


c、分时段测试

可以通过不同时段测试,对比数据。为减少对用户过多干扰和负面影响,可以先用夜间或用户量较小时段切换到新版本。

缺点:得到的是环比数据,不像ABtest对比结果明显有参考意义。而且在没有确定方向的摸索阶段,用分段测试,数据指向不明确,通常会存在数据一直不好的情况,频繁换方案, 自乱阵脚。


d、分渠道测试

渠道推广对业务支出也是占比较大,优秀的商业设计也能让渠道转化提高,从而减小获客单价。所以渠道上的设计都会做n版,优化总结,提升最终的数据。


e、新旧版本切换

新版本上线后留出”返回旧版“的入口,这样一旦用户不喜欢新版可以切换到老版本。这样可以很大程度降低风险,还可以监测不同版本数据,还给用户一个缓冲时间让用户逐渐接受新版本。

缺点:如果新版本运行效果不佳,决策者会进退两难,一般在较有把握,或者想教育用户新的体验会局部用这个方法。



5.2.5、寻求差异,扩大竞争优势


A、疯狂联想法

a、横向联想

结合产品定位,先得出核心关键词,再在核心关键词的基础上继续发散。比如一个男士护肤品电商网站,核心关键词是:垂直、B2C、男用户多、护肤品等,可以根据这些关键词找到合适的参考。值得注意的是关键词的选择也可以根据你需要的提升的核心价值点去联想。

Image title


b、纵向联想

纵向联想是从一个关键词出发,纵向不断延展出新的关键词,并找到对应竞品。比如保健品有一个重要的特征就是注重功效,我们可以想到具有同种特征的护肤品。

关于联想,在头脑风暴中并没有特备严格的步骤方法规定,可以根据自己的认知由近至远拓展。思维跟横向纵向也是类似,可以先参考最典型接近的,再利用共同关键特征来扩散,也可以利用不同组合的关键词重新找到相应的竞品。最后根据四象限原则,把相关度高,体验好的,更有参考价值的竞品拿来精细分析。

Image title


B、竞品对比分析法

通过联想发我们也能联想出不同维度的竞品,这师我们需要考虑竞品哪些部分类似可以参考的,哪些部分不同需要注意的,但同时也可以考虑借鉴不同部分的优势转化成自己的优势。比如最早弹幕只出现在视频上,抓住弹幕可以活跃气氛,满足观众发表评论和观看时时评论达到的心里共鸣,增加用户之间的互动性,从而提高用户粘性的核心点后,弹幕也出现在直播、音频、新闻,甚至是炒股软件上。

Image title



5.2.6、做有创意且能落地的品牌设计


品牌的核心点就是让人“记住”,最好能找到目标用户心智中空缺的领域,在这个垂直领域占领优势位置,所以品牌强调差异化。比如一想到打车就想到滴滴,一想到购物就想到万能的淘宝,一遇到问题就上百度。


传统的方法:了解业务——发散关键词——情绪版——视觉方案

精益方法:内外调研——语言钉——个性关键词——视觉锤(快速落地)


成长期的品牌建设更需要突出创新性,让人眼前一亮,记忆犹新。这里展示展示了御膳房网站的品牌三元法示例,御膳房的风格的确做到了主题感强烈,让人眼前一亮,不过个人认为作为科技网站,还是略显了花哨,安全感不足。品牌三元法是也是通过对产品的了解,分别从理性业务层和感性业务层出发,延伸个性创造层,记录关键词展开设计,其本质还是围绕业务拓展价值。成熟的品牌设计者,不仅要从业务出发,更要考虑不同场景的品牌应用,打造统一有个性的全方位品牌。

Image title


5.3成熟期(产品稳定期)


目标:提升产品价值(赚的多)

关注:商业变现

用户:活跃用户

策略:科学严谨提升商业价值

方法:用户体验地图、设计跨栏法(定量为主)

关注数据指标:活跃度/流失率/营收/成本率/现金流

品牌:扩大品牌影响力和品牌价值

Image title


5.3.1、用户分层,寻找核心价值用户


a、核心价值用户是留存用户中最活跃的部分

b、找到核心价值的用户特征


通过RFM模型来筛选核心价值用户

R=Recency最近一次消费

F=Frequency消费频率

M=Monetary消费金额

(RFM,1代表高,0代表低)

(111)重要价值客户:最近消费时间较近、消费频次和消费金额都高,典型的核心价值用户,高留存、高活跃度

(011)重要保持客户:最近消费时间较远,但是消费频次和金额都很高,说明这是一段时间没来的忠实客户,需要与他保持联系,召回

(101)重要发展客户:最近消费时间近、消费金额高,但是频次不高,忠诚度不高,很有潜力的用户,必须重点发展

(001)重要挽留客户:最近消费时间较远、消费频次不高,但消费金额高的,可能是将要流失或者已经流失的用户,应当采用措施挽留


一般公司都会有利用RFM来观测核心用户,针对不同类型来做不同的措施,但是所有数据的利用率都跟产品客观成长度有挂钩,成长期可能还不是那么细分,成熟期就会更精细的分析。最简单粗暴的就是看看最近一次消费,超过多少天就短信消息召回给个优惠券之类的。


c、总结核心规律,改进产品,调整运营策略

找到核心价值的用户特征后,需要探测他们的行为模式与贡献的规律,从而激励更多用户贡献更多价值。比如喜马拉雅,找到订阅节目的用户明显留存度更高,用户活跃度也高于随便听听的用户的规律后,在产品设计时会把订阅放在显眼的位置,并且在首页把用户感兴趣的模块放在优先的位置来提升订阅度。

Image title



5.3.2、商业价值提升


a、以科学创新为代表的产品核心竞争力:数据和技术驱动一切,科技提升效率。

b、用户价值:用户价值是商业变现的基础,没有人会在没有用户转化的平台上投入资金。

c、商业变现:用户付费,广告收入,与用户体验合理价值平衡。


在商业变现阶段,除了要着眼于如何更的赚到钱,也需要平衡用户体验,且不断提高产品本身的价值。百度在成为巨头后,百度贴吧过多不相关的推送导致用户粘性急剧下降,魏则西事件等负面消息,再到陆奇离职,目前市值缩水至365.38亿,被拼多多赶超。而微信和抖音这方面做的较为出色。微信是迫不得已不愿打扰用户,所以广告频率一直不高,广告质量也有所保障,会根据用户的喜好推荐广告。抖音是沉浸式的广告体验,一不留神就进入了广告的坑,而且广告的形式与抖音原生用户的不谋而合,有些有创意的网红视频用户的接受度也很高,从而会极大的提高转化,对用户体验的影响也较少。



5.3.3、增值假设——围绕目标增长(量化设计师的价值)


设计策略:稳定、规范、统一、科学严谨


a、拆分变量科学测试

到了成熟期,设计师在修改设计方案的时候不是改的越多越好,有的时候一个模块的重构,一个按钮的颜色变化都能影响数据转化,所以需要通过科学的方式,调整到合适的颗粒度去测试。  

Image title


b、把AB测试作为一项基本制度

如果想要验证设计效果,那么可以在保持功能不变的情况下,只看设计方案的区别,这样就可以有效的量化设计。


2018 年,中国移动互联网用户增长放缓,上半年仅增长 2 千万。但是头条系却异军突起,超过百度系、阿里系稳居总使用时长第 2 名。头条系的崛起有许多的原因,强大的数据监控系统,成熟的增长引擎,上百组同时进行的AB测试等等都在帮助产品经理和运营们找到最优的方案。


c、用户增长地图

用户增长地图是借用AARRR概念作为骨架的展开的,通过AARRR模型针对没一步提出增值假设,以提升总体价值指标。

Image title


5.3.4、提高整体效率:通过DPL(Design Pattern Library)组件库批量优化;科技力量-人工智能


a、根据长期积累下来的AB测试结果,沉淀规范后,把这些规范内容快速复制到若干条产品线上。从产品周期来说,摸索期需要建立一定的视觉规范,但不合适做细致化的组件,等业务慢慢稳定下来,不会有大方向的改变后,需要慢慢建立细致的组件库,以方便团队合作。每个业务也有其特殊性,to B的业务一般建立组件库会比较早,模式化的东西较多,针对不同的B端也会有定制化的内容,DPL可以大大提高整个业务的效率。

Image title



b、通过智能科技的力量来提升整体的效率。比如阿里的千人千面,通过消费者偏好进行个性化投放,鲁班系统对banner进行简单的合成,大大提高大促期间海报生成的效率。



5.3.5、打造统一的全业务线品牌设计


a、形成统一且独特的品牌印记

成熟期面对繁多支线,先对内树立统一的品牌形象;主品牌与产品调性统一;线上线下风格的统一。


b、品牌印记提取与深化

品牌趋势都是化繁为简,比如苹果、奔驰的logo就越来越简单,利于大众记忆,也利于线下拓展。

提取出logo基因去强调品牌作为拓展延伸,比如天猫和考拉的吉祥物头部图形的简化应用,都比较简约,易记,易拓展


C、成熟期的品牌也不是一成不变的

成熟期,产品在市场中已经有了稳固位置,品牌不宜过度设计,而需要采取保守、稳重、扩展性强的风格。品牌的更新升级,一方面顺应企业的战略方向的改变,一方面顺应整个设计前瞻潮流。比如美团变黄的品牌升级,是为了更好的从外卖这个触点深入用户心智,而OPPO ,vivo等品牌升级感觉更美有特色,其实也是顺应国际化的设计趋势,更有文字辨识度,更国际化。

Image title



5.4衰退期

每个产品都有一个生命周期,这是受市场因素导致的,此时用户会逐渐流失,既被其它新产品的体验模式所吸引,所以这时应该更关注用户流失后使用的产品,分析竞品的商业模式和功能,同时监测流失速度,需尽快拓展产品边界,寻找新的切入点。不过好的产品都是在不断优化,迎合新时代的需求,不断扩大自己的影响力和产品价值。之前文章我也写过关于微信的未雨绸缪,不断优化。微信的用户粘性强大,谁也不好说他能再打几年,像抖音这种迅速崛起的产品是否是现象级的昙花一现,也要看它是否能与时俱进。



六、设计师顺势而为,自我定位

一般来说小公司的大部分项目处于探索期和成长期,而大公司的项目很多处于成熟期,也有一些孵化探索的项目。处于探索期的项目,需要大胆创新同时,有可能变化极快,无法冷静下来根据数据用不同设计方式达成增长目标,我就经历过一个首页一星期全新大改版n次的惨痛经历。反观大公司很多流程复杂,验证方式系统完善,有些设计师感觉没有用武之地,不能施展才华。


根据不同阶段采取适合自己的设计方法,驱动产品提高设计价值,切勿漫无目标、抱怨环境,浪费时间。


如果你思维极其颠覆爱挑战可以选择从0到1的新行业;如果你喜欢创新可以选择成长型的行业及公司,或是成熟公司里的成长型项目;如果你追求科学、严谨、,那么可以选择成熟型的公司、项目。

转自-UI中国

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

详解交易型电商/内容型电商中的消费者行为差异

涛涛

本文列举了交易型电商与内容型电商的对比,以及他们的消费者交易行为的四大区别。

No1  :单独评估vs联合评估

消费者看到一个产品的时候,有两种典型场景:

在内容电商(比如看到新媒体文章推荐)时,用户一般处于单独评估状态。

比如顾爷发过一个软文卖“电表箱挂画”——家里电表箱很丑、不美观,用一副画把它遮住,显得家里美观又有逼格。

当看到这个商品推荐广告的时候,你就进入了“单独评估”状态,只比较眼前的画以及你的现状(没有电表画)。

这个时候你在意的是产品本身好不好,带给你的感觉怎么样,以及价格能不能接受。

很可能的结果是,你看到这幅画200多块钱,也不太贵,所以就买了。

而如果你不是在阅读顾爷公众号的时候看到商品,而是进入淘宝、京东这种交易型电商,心理就不一样了。

在交易型电商中,用户一般处于“联合评估”状态。

比如淘宝搜“电表箱挂画”,你看到的页面是这样的:

这个时候,你进入了“联合评估”状态,你主要的比较点不再是“电表箱挂画”和你的现状(没有电表画),而是众多的电表箱挂画中哪个最好。

如果你仔细盯着上面的淘宝图看,我想你此时的消费者心理已经发生了这些变化:想要看看不同价位的画之间到底有什么区别。

材质?大小?印染工艺?谁画的?急于寻找一些让自己感觉到熟悉的信息。

比如扫一眼看看哪个品牌是你听过的(即使是华为牌的画,此时都更能抓你的眼球)。

赶紧比较哪个店销量大、好评多(咦?刚刚看到顾爷的,怎么不这么关心销量信息?)

开始在意价格,并且重新思考买这个画到底值不值。

然后,你可能不会买电表箱挂画了,甚至会觉得买一幅这样的画很多余,还不如买一箱牛奶补补身体。

表面上看,一样的产品,你仅仅切换了评估方式(单独评估VS联合评估),你选择产品的标准却产生了巨大的变化。

而就像我们前面说的,为了“在竞争中存活”,你不得不了解,“决定用户选择”的因素,到底产生了什么改变:

NO2:感性线索vs理性线索

联合评估环境下,消费者更加注重容易对比的理性线索,比如材质、大小、印染工艺等,这是因为联合评估的时候,我们看的是选择项之间的不同,而不是选择项和现状之间的不同。

而在单独评估的时候,消费者会更加容易受到感性线索的影响,大脑进入的不是“计算模式”而是“感觉模式”,会更容易感觉到增加一个画带来的生活改变、这幅画整体的设计感、流露出的艺术气息等。

所以,如果你是在参数上占优的产品,比如小米或乐视的手机,进入联合评估会非常有利,因为用户非常在意跑分。

如果你是在参数以外的体验上占优的产品,比如设计精美和有情怀的手机,进入单独评估会比较有利,因为你的优势无法被直接计算,难以在联合评估中占优。

有研究发现,假设有两款同等价格的冰激凌,一款是满满地装在小杯子里,总共50毫升;另一款是在200毫升的杯子里装了半满,相当于100毫升。

看到两款冰激凌,消费者却又会选择半满但是量多的冰激凌——废话,大家又不傻,看数据明显这个给的多。

再比如,找工作的时候,如果只看到一个职业选择,大部分人会对那种工作内容激动人心、公司名让人仰慕、发展前景好的工作更满意(而不是单纯的薪水)。

而在联合评估的时候(同时拿到很多offer),大家比较来比较去,最终更容易选择薪酬更高但自己实际上并不喜欢的工作。

因为联合评估的时候,我们更容易忽略主观感受,选择那些“数据”和“参数”上更牛的选项。

所以在淘宝上,你可以直接根据材质、大小等性价比选择一个画,即使这个画买回去后你并没有像买顾爷的画那样惊喜。

这也意味着,在交易型电商环境下,拼参数、拼数据的产品容易获胜,而在设计感、原创性上占优的产品,难以赢得顾客选择。

而在内容型电商中,我们是单独评估,这时候设计师原创设计带来的冲击感,可能直接让我们选择去购买。

这同样意味着,在交易型电商中,我们更容易受到销量领先、知名品牌等信息的影响,因为这也容易比较。

而在内容型电商中,我们则直接感觉对这个产品喜欢不喜欢。

NO3:高端vs低端

  • 联合评估状态下,我们会进入“计算模式”,更加注重价格信息(因为容易比较),所以低价品的销售会非常好。
  • 单独评估状态下,我们会更加注重主观感受,更有可能忽略成本,放纵一下买个自己喜欢的,所以高价品、享乐品的销售会非常好。

之前我遇到一个自媒体卖产品的客户,同样的产品(高端有设计感的杯子)推送给同样的粉丝,一个用淘宝平台,一个直接用微信嵌入的电商平台,结果后者转化率高了十几倍。

其实一个很重要的原因就是:淘宝本质上属于交易型电商,会强迫所有消费者自动进入联合评估的状态。

在这种状态下,用户会更加在意成本信息,价格敏感性增强,从而导致更少人选择高端产品、享乐产品。

所以高端品牌(比如LV)在线下一定是用专卖店,而不会进入卖场,因为后者是联合评估。

总结

在内容电商环境下,更多人会在单独评估状态下购物,出现这些变化:

  • 性价比的作用性降低,而感性因素的影响会升高(比如设计感、悠久历史、情怀、故事等)。
  • 低端产品的销售会降低,原来很难卖出去的高端产品、享乐型产品会更容易卖。

NO4: 主动搜索vs被动搜索

如果在淘宝、京东购物,此时你的心理状态经常是:我要买东西。

你处于“购物”(shopping)心态中,大脑中经常装着某个潜在的任务——比如要看看有没有好看的衣服或者想买一箱牛奶存放到冰箱。

这个时候,我们就说你处于“主动搜寻”的心理,你会对将来可能会购买的产品信息更加敏感,而对无关信息不那么敏感。

而在内容电商环境中,你本身正在专心看网红的直播或者某个自媒体的内容,这个时候突然看到有个产品信息(比如讲健康的播主,推荐了新型智能牙刷),此时,我们说你处于“被动接受”的心理。

这有什么区别呢?

研究发现,在主动搜寻的心理中,我们会更加关心直接与任务相关的信息,而对与任务无关的信息减少关心。

比如你想挑一款面霜,会在大量的面霜相关的商品中进行比较,对面霜相关的信息非常敏感。

而如果此时偶尔看到有个叫做“面部喷剂”的新型产品,你可能压根不会关心(因为你正在找面霜),即使它也可以帮助你改善和保养皮肤。

(ps:这个产品是我编的,用来制造未知感,实际上不存在这个产品)

所以在交易型电商中,各种新奇、未知的产品,其实并不好卖。

有个知名的“看不见的大猩猩”心理实验证明了这一点。

心理学家召集一些志愿者,给他们布置任务:数一下在接下来的视频中,球员一共传了多少次球。

然后在视频一半的时候,有个人穿着大猩猩的衣服进场并且做了欢呼的动作。

实验结束,心理学家问志愿者:球员一共传了多少次球?大部分人答案都对了。

但是接着问:你们有看到一个大猩猩吗?结果超过半数的人声称没有看到大猩猩。

这是因为看视频的时候,大部分人聚焦于“数传球”这个任务中,从而自动忽略了与任务无关的信息(大猩猩)。

这也导致了用户在京东选购面霜的时候,可能更容易关注面霜本身,而不是主动好奇地去寻找除了面霜还有什么新型产品可以替代。

而如果是在内容型电商,用户事先没有觉得要买面霜,而是在看一档教你如何保养面部的节目,就更容易接受一种新型的护理面部的方式(比如XX面部喷剂)。

总结

内容型电商,比交易型电商更适合销售新奇产品。

文章来源:人人都是产品经理

试图颠覆在线文档协作的微软 Fluid Framework,到底有什么独特之处?

涛涛

一次会议的演示文稿,通常是一个 .pptx 格式的文档,而日常来往的邮件附件里的文档则多是 .docx 和 .pdf 格式的文档。当然,设计师更熟悉的可能是在 Adobe Photoshop 中可以打开的 .psd 格式的源文件。

我们熟悉了这种各司其职的格式体系。

而网络正在改变这种格式体系。各种服务和功能大都「在线化」,大家都熟悉在线看视频,已经不会去分它是 .mp4 还是 .flv,在线音乐是 .mp3 还是 .flac 已经无人在意。而更为重要的文档和效率类的服务也是如此,且不说微软的 Office 365 和相对更加轻量的 Google Doc,国内的 腾讯文档和石墨文档等在线文档工具,让我们越来越少地接触带有.docx 后缀的本地文档。当然,这并不是意味着本地文档就此消亡,但是这种去本地化的趋势非常明显。

如果文件的格式已经不再清晰可见了,那么概念的界限自然也会逐渐淡化。一个记录文本的文档和记录表单的文档为什么不干脆融合到一起,并且适应用来展示的需求?当然可以。

今年年中在 Microsoft Build 大会上微软展示的 Fluid Framework 就做的更加彻底。

打破格式界限的一体化文档服务

无论是源自 Word 里面的富文本还是 Excel 当中的表格,它们甚至不用以单一完整的文件而存在,它们在网络上传递的时候,将会是一段简短的链接。但是在 Fluid Framework 的支持之下,呈现出来的,则是一段可交互的、具备编辑功能的、带有内容的模块。

说起来,并不难理解。在有 Fluid Framework 支持之下,任何网络环境都会是一个简单纯净的画布,一个可以承载不同类型文档和功能的空间。整个 Office 庞杂功能体系,你都可以按需取用,提取出来拉到 Fluid Framework 中使用。

「我们确实需要在关键领域,针对核心技术进行创新,」 Microsoft 365 负责人Jared Spataro在接受The Verge采访时说道:「 Fluid Framework 是我们既是协作创新的新方式,也是未来承载各色内容的文档的新载体。」这种新的文档框架让用户能够拆解不同类型的内容,并在不同的应用场景和不同文档中轻松地取用。

Spataro 还说道:「Fluid Framework 沿用了一部分以往文档的概念,但是将这些格式和文件彻底拆碎、打散,然后用云端的网址链接将它们逐一代替代。不同的链接承载放置不同的内容和组件,因此从文字到表格,再到图形化的可视化内容,所有这些都可以随意地整合,轻松集结在一个地方。然后,Fluid Framework 让你实时访问所有这些内容,因此它是动态的,可交互的,是完全可协作的,并且可以便捷共享的」。

面向下一个时代的交互模式

作为一个尚且处于早期阶段的服务,目前Fluid Framework 还只是打通了 Office 自家的文档体系。但是即便如此,这意味着你可以将任何一个文档当中带有相应功能的内容,无缝地与人在 诸如笔记工具 OneNote 随时随地嵌入 Excel 的模块和丰富的表单、即时通讯工具 Teams 中加入演示文稿,并且和同事一起修改其中的样式,替换图片,增删动画而无需离开,你甚至可以直接在你网页的 Outlook 邮箱里面,直接编辑当月网站数据所生成的表单和相应的柱状图。

当然,这还不止。人工智能功能的加入,让 Fluid Framework 可以做到更多事情,比如发布会现场所演示的,实时发布信息,然后 AI 协助将信息实时翻译成不同的语言,分发给不同国家的同事。

 

这种全新的功能,让内容协作中间大量复杂的概念和环节都被移除了,这种程度的变化是惊人的,它意味着交互的模式,从最底层的概念到呈现的方式,都发生了改变,而这种改变还会随着产品迭代和时间推移,而进化得更加智能、无缝、微妙。

Spataro 总结道:「不同格式的文档,一直是人们思考如何制作内容的思维框架。但是 Fluid 往后退了一步,重新审视了一下这个既有的体系,然后展现了一个新的可能:我们不再需要这些主导一切的文档格式和不同类型的文件。我们不用在处理表格的时候就必须联想到 Excel,写文本的时候也不必去限定工具必须为 Word,而可视化内容的展示也不再拘泥于 PowerPoint,你可以在任何地方用任何类型的内容,我要说的是,我们不再有文档了,我们拥有一个无所不能的画布。」

而这个全新的东西,最近刚刚开始对外开放了申请入口:

Fluid Framework Developer Preview

从3G时代就开始的探索

当然,如今看起来颇为具有想象力的 Fluid Framework ,它的核心思路其实并不是什么新鲜东西。

在线协作的概念由来已久,《连线》杂志前主编凯文凯利在他1994年出版的《失控》当中早已提及相关的概念和想法,但是在如今实际上要打通新的领域,纳入一个新的格式,加入一个新的功能,都需要足够的基础才行。

Google Wave 是这个领域的先行者。在一个画布之下,进行多格式、多样式、多人在线协作,几乎完全无界的在线协作模式是令人炫目也让人无所适从的,这一产品最终失败了,但是它在技术和架构上的遗产足以反哺出 Google Doc、Google Drive 这种级别的产品。

Google Wave 的想法在当时确实略有一点天马行空,实际应用场景和需求并没有跟上,对于网络带宽的要求在当时也相当苛刻。而如今上线的 Fluid Framework ,应该也是从这些失败的前辈身上汲取了不少经验。

立足于微软最扎实的 Office 365 这一云端服务来进行铺设和测试功能,在服务群体上,则选择了需求更加清晰具体的企业用户(尤其是协作服务),来作为初始的切入点。这样的限制,足以说明微软的审慎和重视,他们甚至准备好了以年为单位来进行迭代。

微软对 Fluid Framework 充满了期待,他们相信这个东西能够重塑行业,甚至重塑网络本身,也许到明年5月的开发者大会上,能够看到一个截然不同的 Fluid Framework。

文章来源:优设

为什么要进行竞品分析以及关键准则

涛涛

竞品分析是UX设计师的标准工具之一, 且用户体验设计师的主要交付品之一就是竞品分析报告。在设计一个新的方案之前,我们往往会查看其他类似的产品,了解其他人做的相关工作,希望从中找到任何弱点或者优点,并期望在此基础上进行改进,这将利于你的设计。事实上,竞品分析已经不再局限于一种工具方法,更是一种思维模式,如何对比分析,如何批判性的进行比较以及从差异中获取价值。


UX设计项目会遇到哪些类型的竞争对手?

这个问题可以理解为,我们要分析哪些竞争对手?一般来讲,所有UX项目都面临两种竞争,一种是直接竞争对手,即业务有直接冲突,涉及到具体的利益冲突,商业冲突。例如滴滴和uber,淘宝和京东。另一种则是“间接竞争对手”,往往针对某些相似的产品模块,这里的竞争并没有准确的定义,只是为了比较而给与的一个名称。 例如你在进行自家产品登录注册模块的设计,此时你不仅仅可以研究一些直接竞品,也可以研究其他拥有此功能模块的产品。而该产品与你的产品并没有构成竞争的关系,只是提供了一个参考方向。


为什么要进行比较?

关于这个问题有两个答案,首先,调研竞品发掘哪些功能或服务是他们不能做或者没有实现的,这就是我们的产品可以利用的机会点,以提供新颖的或者说更强大的功能,从而提高产品竞争力。例如顺丰快递首先开创了机器填写快递信息的功能,从而大大提高用户填写订单的效率、准确度和满意度,进一步提高品牌竞争力和服务水平。


其次,检查其他设计师对相同需求的解决方案必然会对你有所启发,有利于你从中获取灵感来优化自家产品。例如信息架构的优化、或者简单地操作流程的优化。参考竞品意味着你可以不断从中学习,把竞品的每个模块、步骤拆解开来,分析其背后的设计原因及它们如何发挥作用,这将有利于你的产品设计。


参考竞品首先意味着你能够达到和竞品同一水平的用户体验,因为有了参照标准相当于指路明灯,竞品的优秀体验也会督促你不断优化自己的产品。但竞品虽然为你创造了一个标准,同时也会限制你的思路和想法,使你可能错过一些更优秀的解决方案,参考竞品能让你追赶别人,但无法让你完全超越他人。因此仅仅复制是不够的,必须融入自己的见解且时刻保持创新意识。


对直接竞争对手进行分析

通常,竞品分析发生在项目的早期,你或许会寻找市面上是否会有竞争对手,然后尝试着从竞品中寻找优点和弱点,以推动自己的产品。如果没有竞争对手时,往往可以从目标用户入手,因为用户实际上拥有自己的解决方案或者说策略,例如在滴滴流行起来之前,对应的用户群往往使用出租车来代替出行方式。目标用户在这之前是如何解决他们的需求的?你应该可以获得一些间接可比的方案,收集用户的相关想法有利于推动你的产品设计。


在产品上线后的运行阶段,仍然需要做竞品分析,此时或许存在一些新兴的的竞品,虽然是后来者,但往往会在交互、体验或者运营策略等方面碰撞出一些新的创意。根据竞品的功能策略,你需要进行一定的调整,不断对产品迭代优化。除此之外,产品有时需要做一些追随趋势的更新,例如视觉风格、新的交互设计语言等。


如何从间接竞争对手那里获得灵感

间接竞争对手也会给你一定的启发,作为一个用户体验各种产品时,留心那些优秀的设计,可能是视觉方面也可能是交互方面,总之这些优雅的设计将会成为你的灵感之源。然而所有的设计都有其适用场景及背后的设计原理支撑,在海外设计经验中一再强调的 context(上下文)就是这个意思。


优秀的设计都是最适合自己的产品和策略的设计,而不是最美观或最的。因为设计不仅仅包涵体验更是要兼顾业务。同一个设计在一个地方发挥作用并不意味着移植到其他地方仍然有效。


例如一个简单的登录模块的设计,按照常规经验,以目前微信的受众数量做参考,可以无脑选择微信快捷登录,这无疑是最便捷的方案,但为什么很多产品仍然采用手机登录?因为一个注册的手机号码能为公司的未来带来极大的增值,每个号码背后都是一个用户,且通过手机号可以对这个用户进行持续的推广营销,如拼多多的短信推广,移动联通的电话推广。


所以,一切的设计都应以设计背景,业务诉求为基本原则来进行,盲目的追寻极限的视觉和效率,盲目的信奉设计潮流趋势都是不可取的。好的设计和时尚的设计不同,好的设计有持久的价值,是美学和体验的结合,并以基于心理学社会学的用户研究为后盾。这样的设计符合用户的需求同时能为企业带来收益。而时尚的设计则会随着时间流逝而销声匿迹。


一味追寻潮流的应用程序设计,公然违背基本的可用性惯例,违背交互设计的基本原理,很有可能在市场中失败。——Prototyper.io UX首席负责人Miklos Philips



竞品分析时谨记五个原则

为了保证你所进行的竞品分析的有效性,需要谨记以下五个原则。 


1.理解背后的需求

分析任何设计之前都需要理解设计背后的核心需求,这并不是简单的查看表面内容,除了交互体验上的思考,更要深入产品本身,去更多的理解业务层商业策略等方面的内因。每个设计都有对应的场景、上下文甚至各种限制条件。只有理解这些你才清楚这个设计是否适合你的产品,或者是否有一定的参考意义。


比如观察淘宝的搜索功能你会发现首页的搜索和店铺的搜索有很大差异,即首页的搜索比重要远远大于店铺的搜索。店铺中的搜索按钮仅仅展示一个双指面积的btn,而首页则是展示一个接近通栏的搜索条。那么分析下来,店铺的搜索btn小巧精致,简易美观是否应该借鉴,答案是看情况。淘宝首页入口提供的是一级搜索,涵盖了淘宝百亿级别的商品,因此搜索功能的优先级极高。而店铺商品有限,用户浏览商品往往按照分类,很少使用搜索功能,这种情况下搜索的优先级很低。 

因此,理解设计背后的理念,解决的问题、如此设计的原因才是竞品分析重点关注的方向。切记浮于表面。


2.确定真正的竞争者

认清自己的竞争者,他们往往并不仅仅是表面的直接对手。事实上应用程序只是一种帮助用户达成目标的技术手段从用户角度,有很多可选方向,而你的产品想要获得成功,你就要做那个体验最好,满意度最高的选项。回想一下,便利贴的功能应用程序是否能实现?答案是肯定的,但现在为止并没有任何应用程序能够撼动便利贴的霸主地位。因此,滴滴的竞品真的只是其他网约车公司吗,事实上滴滴最大的竞品是出租车。通常,你最强大的对手并一定不是和你一样的科技产品。


3.通过标准来判断,而不是个人臆测

每次进行比较都意味着根据某个标准来进行判断,如何决定两者的功能孰优孰劣,最好的方法是引入标准或者用数据说话。例如竞品某个模块转化率高,那必然有其内因。另外,我们可以根据业界的标准来评判产品的可用性体验,如尼尔森的启发式评估原则(后面会详细讲到)。


4.盲目模仿是导致失败的罪魁祸首

在特定环境中行之有效的方法在另一环境中可能根本行不通。每个设计解决方案不仅是针对眼前的问题,而且还针对目标受众。请记住,良好的设计是仔细的分析研究产生的,需要付出大量的努力来与用理解用户,定义问题,并 根据上下文构思,最终产出最终设计和评估解决方案。


你可能会说,别人已经验证了的功能,我们没必要花费时间去重复测试,但他人的功能是针对特定的场景特定的业务目标,或许并不适用你的产品。所以,在模仿之前,请仔细考虑您的问题与原始设计师的方案匹配程度。


5.用户测试无可替代

在竞品研究中我们需要时刻保持怀疑的态度,在将竞品的设计应用于自己的产品之前,需要评估设计背后的需求、场景,以判断会否适合自家产品。这个过程可以没有用户参与,例如选择专家进行的可用性评估。但最终,在你决定将设计投入自己的产品时,你需要意识到只有真实场景下的用户测试,才能判断该设计是否成功。 


无处不在的“汉堡菜单”按钮。最初是Facebook率先取得成功的设计,现在有大量证据表明该设计带来了很大的可用性问题。通过将图标与其他导航方式(例如ios的菜单导航)进行比较的A / B测试,发现了这些问题。


时刻留意竞争对手的产品设计有利于你不断更新和迭代,从而保持竞争优势,但你必须知道,研究竞品只能让你和它处于一个水平,他不会教给你如何开辟新的想法,如何解决未解决的问题。并且能从竞品分析中收获的有效信息完全取决于你的个人能力和经验。因此保持质疑,持续思考,以创新意识探索更可能是UX设计师长远的目标。 


NNG的十项UI界面启发评估的原则

前面提到我们应该通过标准来衡量产品的设计,而不是个人的主观臆测。尼尔森的启发式评估原则就是这样一套可实践的评估标准,共有十项,主要涉及到用户体验、可用性的评估。使用这是个标准能够评估出大部分的可用性问题。


1系统状态的可见性

任何情况下都应该显示易于理解的界面信息和系统状态,以保证用户正确执行操作。


这其中其实不仅仅要求“可见”,也要求“隐藏”。因为系统界面的展示目的是使用户易于理解其中的信息,因此要清晰展示有效信息,同时隐藏无效信息和干扰项。概括来说这一项原则的关键在于视觉传达的效率,如CTA按钮高亮来聚焦注意力,文字链按钮添加下划线或箭头来传达可点击的状态等。

2.系统与用户习惯的匹配

设计师应根据目标用户的经验习惯进行界面设计,如使用符合用户认知的语言、概念、预测用户的常规行为方式如单手操作,减轻认知负担,并使系统更易于使用。


在电脑屏幕右键弹出的菜单窗口恰好在鼠标附近,因为用户当时视觉聚焦于此。移动端阅读类产品的目录按钮总在右下角,因为大部分人使用右手单手操作,而在IPAD端的阅读产品,目录置于左下角,因为用户一般需要双手持设备,此时左手点击目录更符合用户习惯。


当然,不仅仅要考虑用户操作习惯,更要考虑用户的心理预期。这就要用到隐喻,例如按钮按下后模拟出下沉的视觉效果,再如最早的阅读类产品模拟真实书架,还原用户习惯的书架浏览查找书籍然后阅读的体验。



3.用户控制和自由

产品应该允许用户自由控制自己的操作行为,例如可以撤销重做,或在不同内容间自由跳转。



4.一致性

界面设计人员应确保在相似的平台之间维护图形元素和术语的统一。例如,代表一个类别或概念的图标在不同的设备上使用时不应代表不同的概念。垃圾桶应当代表删除、回收等操作,而不是其他的语义。


5.防错

提前预测可能发生的错误,尝试尽量避免它们,将潜在的错误保持在水平。用户不乐意处理错误同时不擅长处理错误,为了减少用户遇到错误的,试着消除问题部分。例如验证码部分只允许填写数字,且自动唤起数字键盘无法切换字母键盘,这样就防止用户输入错误信息格式的可能。


6.降低用户认知负荷

人类注意力是有限的,不要尝试一次行给用户灌输过多信息,试着一次只展示一个核心功能或内容,每个步骤只用来做一件主要的事情。目前主流的注册流程都遵循这个原则,一次只进行一个步骤,输入手机号、发送验证码、填写验证码、登录成功。


7.灵活性和效率

使用更少的交互,让用户更便捷的完成目标,例如使用缩写、语音输入、自动填充等技巧。目前有些产品通过自动填充手机号码来提高登录注册效率,或自动填充短信验证码来提高验证效率,这就是一种优化交互来提高产品使用效率的方式。(但这种方式对权限要求较高)


8.美学原则与极简设计

减少混乱和多余的元素,不要争夺用户注意力,提供清晰可见的导航。根据海外的调研,有三到四成用户离开一个网站的原因是导航混乱不易理解。


9.帮助用户识别、诊断错误并恢复

采用通俗的语言解释错误的情况并提供解决方案或说明情况。


10.帮助文档

我们期望不需要说明文档(类似说明书)也能让用户正常使用和产品和解决遇到的问题。但我们仍然需要一定的说明文档,来解释特殊情况或常见问题,以保证用户在需要时能轻易找到解决方案。

文章来源:UI中国

日历

链接

个人资料

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

存档