首页

快速搞定B端需求,看这篇就够了

分享达人

在产品设计过程中,了解需求是产品落地的基础之一,而在B端产品中,需求可能会涉及到业务需求、用户需求及管理需求三个方面,具体该如何保障B端需求的快速洞察、快速实现呢?不妨看看作者的总结和梳理。

一、需求的定义

需求是产品存在的基础,贯穿整个产品的整个生命周期。本文聊聊需求的管理方法论。需求管理方法论概念包含了,需求调研和挖掘、需求分析、需求管理(输出需求文档),也可以用一句话来说明,就是收集客户想要什么,最终确定实际做什么。

本文会涉及到面试过程中问到的需求相关内容,可以先收藏后细品。

二、B端需求的分类

在我看来,B端需求主要分为业务需求、用户需求和管理需求。

  • 业务需求,就是B端行业的业务流程中产生的需求,业务流程是行业知识体系的一部分。
  • 管理需求,在B端行业为实现业务目标而进行的决策、计划、控制等的过程产生的需求。
  • 用户需求,用户在系统使用过程中产生的其他需求。

在下文中会用这三类需求进行详细说明。

快速搞定B端需求,看这篇就够了。

三、需求的调研和挖掘,需求收集

1)调研的8大科学方法已经前面写过,这边介绍一下调研时的几个小技巧。

① 用图形作为调研助手

用图形会引导大家的讨论方向一致,收敛,不易跑题。图形会引起参与者的视觉共鸣,从而加速、加深理解的程度。图形的逻辑清晰,可以避免讨论结果似是而非的现象,为后续需求变动提供证据(甩锅)。

② 找到调研的合适颗粒度

对于颗粒度的把握,是没有一个定数,但如果调研结束后,不需要再向客户进行咨询就可以进行设计工作了,那么这个调研就做到位了。第一次调研现场,颗粒度尽量越细越好,因为后续的调研会增加更多成本。

2)业务流程优化的一个方法-ESEIA方法ESEIA流程优化方法是由五个首字母组成,包括E(Eliminate)清除、S(Simplify)简化、E(Establish)增加、I(Integrate)整合和A(Automate)自动化,用来减少流程中的非增值活动,增加流程中的增值活动,然后进行整合和自动化,如图所示。

快速搞定B端需求,看这篇就够了。

  • E:清除,找出并清除不增值的活动;
  • S:简化,清除不必要的活动后,对必要的活动进行简化;
  • E:增加,根据需要增加增值的活动;
  • I:整合,对简化后的活动进行整合,使流程连贯;
  • A:自动化,充分利用信息技术自动化功能,提高流程处理速度和质量。

案例:蓝湖SaaS,是一款针对产品设计到开发阶段的流程优化工具,从产品原型设计——原型上传——UI设计师打开——根据原型设计——设计稿切图——打包上传——程序员下载——打开设计稿并查找相应切图——开发时不定时查询,一系列流程中找到可清除的不增值的活动,简化相应活动,增加增值的活动(在线编辑和设计),整合后使流程连贯,数据上云,让整个上传下载自动化,提高流程处理速度和质量。

四、筛选,如何对需求的判断

1. 摆正需求方的位置

需求的来源会有各种不同的渠道,有内部同事、领导、自己产生的需求。也有外部市场、用户、竞品分析、行业规范等产生的需求。我们需要先把他们产生的需求分类,摆正位置,才能对症下药。不管是哪个渠道来的需求,在上文有说到,可分为三类,业务需求、管理需求、用户需求。业务需求和管理需求分别来自于业务流程优化和管理流程方面,如图(房产营销部分业务流程)。

快速搞定B端需求,看这篇就够了。

1)业务需求,那需要从直接相关方和上下游的间接相关方来看,比如房产营销中的客户锁定期和解锁期,就会可能影响到销售、财务、采购、管理者等各个相关方,需要每个相关方都接触了解后才能设计。

2)管理需求,主要在上层管理的需求,一般只需要针对相关领导的需求就行,但需要知道需求方真实的需求,和该需求是否能够实现。由于管理流程是附加于业务流程之上的,所以如果业务流程没有能够产生这个管理需求的能力,那就需要从业务流程中去重新审视这个管理需求的真实性和可行性。

3)用户需求,这个就比较简单了,主要就是使用习惯,交互等事宜。可以从同一层级的直接相关方了解后进行分析。

2. 判断真实的需求

1)方法一:逻辑演绎

当产品经理不清楚客户的业务但又感到有问题时,可以用逻辑推演来判断,通过逻辑推演可判断客户的需求是不是合理的、正确的。

例如:为什么需要做这个功能?缺少这个功能会如何?这个功能与其上游的工作流的关系,与下游的工作流的关系?思考新需求对现有业务逻辑的影响,会不会影响现有业务功能,当然也同样要考虑到一些潜在的影响,这同样是你对需求评估的一个重要标准。

2)多维度观察

产品经理与客户在专业知识方面是不对等的,客户并不知道他提的需求将来在系统中会带来什么后果,产品经理也未必听懂了客户的真实需求,因此对客户提的“表面需求”要经过侧面的判断才能确定为“真实需求”。为了解决这个问题,可以参考使用5W1H分析法帮助做好判断工作:

  • 对象(what):什么事情。
  • 场所(where):什么地点&场景。
  • 时间(when):什么时候、顺序。
  • 人员(who):相关方、责任人。
  • 为什么(why):原因。
  • 方式(how):如何。

在需求调研中使用5W1H方法,首先要理解的是What、How,而作为判断的重要依据的是Why,其他Where、When、Who是附属信息,没有经验的产品经理只会从正面进行调研,即询问“做什么”“怎么做”,但是最为重要的“为什么做(Why)”却往往不问,这样就会失去多维度观察需求的机会,也同时失去了识别需求的虚实的机会。

3)价值判断

对于复杂的、规模较大的需求,用简单的、操作层面的能够做评估的依据难以确定是否是真实的需求,可以用“目的、价值和功能”三要素来分析和判断。目标,客户的需求目标是什么?价值,确认该目标达成后,客户可以获得什么价值?功能,做什么功能可支持该价值的实现?

如果针对某个需求的判断符合下述条件,那么它就可能不是真实的需求。

  • 确定不了这个需求的目标是什么?
  • 虽然知道目标,但是看不出目标达成后会给客户带来什么价值(回报)。
  • 提出的功能需求实现后,并不能给客户带来预期的价值等。

五、搭建需求池&需求的优先级

从各个渠道来的需求,经过上述的分析后,可以放入到需求池中。需求池里的需求主要有:

  1. 真实的需求,还未进行过价值评估;
  2. 可能转化为需求的一些思考、想法、灵感。也可能是从竞品那分析所得。

过滤了一些伪需求,通过挖掘知道了用户的真实目的,确定了需求方意愿度,明确了需求价值点,根据需求价值来提供解决方案,整理出了需求池,接下来就是对需求的优先级排序:

1)从需求分类的层级来排序,在B端产品中,因为业务需求是所有需求的底层,所有业务需求是第一位的,然后才是管理需求,最后才是用户需求。这就是为什么很多B端产品不讲究交互设计,而在业务流程上做了很大的投入。

2)可以从两个纬度四个象限进行划分,一个是紧急程度,一个是重要程度。按照优先级划分为重要紧急、不重要紧急、重要不紧急、不重要不紧急。

如果产品在0-1阶段,那根据KANO模型的基本型需求>期望型需求>兴奋型需求来判断,如果产品在1-N的迭代期,根据,产品价值大实现成本低>产品价值大实现成本高>产品价值小实现成本低>产品价值小实现成本高来判断(图来自网络)。

快速搞定B端需求,看这篇就够了。

六、需求文档的输出

功能需求整理输出产品方案,做需求文档输出时,为了全面考虑产品方案的逻辑完整性和流程的完整性,可用以下三个点来自查自检。

1. 功能触发的前提

1)前置条件:触发该流程的前提条件,如领取优惠券的前置条件为“注册且登录账号”,甚至还有其他比如是否是新用户等等。

2)数据来源:流程中数据来源,如审核功能中:审核人员审批下级发起的审核单。审核人员的操作流程中,下部发起审核产生审批单就是审核人员的操作流程中的数据来源;数据来源通常是在发生数据流转的场景下需要进行说明。

3)角色及权限:即用户在系统中承担的作用的抽象,是否已经把功能抽象到权限中去,这样可针对权限的设置来分配某些角色可以用,某些角色不可以用。

2. 操作流程

1)事件:主要是指功能的交互规则及逻辑判断。

这个模块用来说明用户和系统之间发生的交互。交互规则是泛指的交互规则,包含功能的页面布局、触发功能的动作及触发后的交互效果;逻辑判断则是指当用户在前端发生行为,系统对用户行为进行识别、判断并返回相应的动作的过程。

2)触发反馈:指用户与系统完成交互后,用户和系统会得到什么样的反馈及产生什么样的数据和结果。

3)异常处理:是对主流程补充,我们尽可能全的罗列并写清楚异常流程时,可以有效避免在产品设计时的场景遗漏。异常流程的梳理建议是参考测试同事的正反例原则。

3. 通用说明

1)数据埋点:埋点就不多进行赘述,但不管是采用第三方系统还是自己的埋点体系,都要做好数据分类,后续提取数据时能减少很多功夫。

2)数据需求:主要为业务方和产品经理在使用和运营提供决策依据,在设计产品方案时一定要规划相对的监控数据指标,以便于后续运营和迭代时有数据进行支撑。

3)数据字典:不要出现这个数据在这是姓名,到另外一个页面成为了用户名这样的事情。以上,是我对B端产品(项目)的理解,后续会对业务需求、管理需求、用户需求分别分析一下。

文章来源:人人都是产品经理   作者:pm老潘

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

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

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

一纵一横,搭建完整数据分析体系

雪涛

如今随着互联网不断发展,各产品的数据体量都变得很大,数据分析体系就发挥了巨大的作用;搭建一个完整有效的数据分析体系,可以提高你的工作效率以及准确度。本文将整个体系概括为:一纵一横。推荐对搭建数据分析体系感兴趣的用户阅读。

新年伊始,很多公司都在制定年度计划,有同学会问:数据分析的计划该怎么定呢?

今天给大家一个最全面的数据分析体系,涵盖了公司级全部场景。大家可以对着参照,看自己的发力点在哪里。

整个体系可以概括为:一纵一横。话不多说,上干货!

一、一纵:从效果角度看工作

问一个简单而关键的问题:数据分析,到底有啥用?

答:站在业务的角度,数据分析有6大用处

  1. 目标制定:确定量化目标,分解下发目标
  2. 趋势预测:预测正常走势,提供决策参考
  3. 过程监控:监控业务发展,发现过程问题
  4. 结果复盘:复盘绩效表现,总结成果经验
  5. 原因分析:分析问题原因,探索解决方法
  6. 方法测试:测试优化方法,选择更优做法

这六个场景,贯穿业务工作全过程,最能体现数据分析的价值。因此,当我们思考数据分析可以做什么的时候,可以先思考这六个场景,目前的工作满足了多少需求?还有哪些是可以做的(如下图)?

一纵一横,搭建完整数据分析体系

注意:数据并非不可替代!这6步即使没有数据,业务方也能做。

比如,经典的场景是:

  1. 目标制定,是老板授意财务整出来的。
  2. 趋势预测,是领导们拍脑袋拍出来的。
  3. 结果复盘,业务自己往自个脸上贴金。
  4. 方法测试,压根就不存在(老夫说是,丫就是!)

最有可能,只有过程监控,与发现问题以后的原因分析,是甩给数据分析做的。

但这样的话,工作就太被动了。不清楚目标,不清楚业务基础走势,不清楚方法背后业务逻辑,光看一个数字是很难分析出原因的。

因此相当多数据部门退化成只能监控个数据。甚至只能提个数。

这种被动局面,是在年初定规划的时候要尽力避免的。此时不争,更待何时!

此时可以:

  1. 向大老板开展游说,灌输“全流程数据管理”的理念,增加工作场景。
  2. 结合行业内成功的数字化案例,向所有人安利数据价值,扩大工作。
  3. 观察每个部门的工作风格,看哪些部门容易谈,能找到合作机会。

这样做,就得认真研究企业内各部门分工情况,这就涉及到“一横”概念。

二、一横:从部门角度看机会

问一个简单的问题:是否各个部门对数据重视程度一样?

答:当然不一样!

从部门职责上看,部门可以分为四大类:

1. 管理型

典型如:总裁办、战略发展部、财务部。

这些部门直接与公司最高层沟通,很多重大的发展计划,年度KPI目标,经营任务,都是这些部门参与制定的。这些部门很重视数据!

因为所有的目标、任务、计划都得量化。他们常见的问题是:知其然,不知其所以然,以财务部尤甚。算账算得很精明,可对于业务细节不甚了解。

此时,想要和这些部门交好,可以从提供基础数据突破。

在提供数据的同时,主动帮他们梳理关键业务流程,清晰常规的业务基线,补齐他们在业务理解上的短板。这样能有更多机会合作。(如下图)。

一纵一横,搭建完整数据分析体系

2. 收入型

典型如:销售、投放、增长部门。

这些部门负担主要的收入任务,是业绩、利润的主要来源。但是,这些部门一般都不重视数据。能看到任务目标、完成率就差不多了。

他们更喜欢看案例拆解,看操作指南,看具体做法。总之,手里用得上的才是好东西。

此时,想要和这些部门交好,可以从工具入手。

不要整复杂的报表,而是根据看表人关心的内容,分层级提供数据。越是基层的,给看的数据越少,最好只留关键KPI。

功能上,和CRM等工具打通,在提供数据的同时,直接提供可操作功能,这样才受一线欢迎(如下图)。

一纵一横,搭建完整数据分析体系

3. 成本型

典型如采购、研发、设计。

这些部门基本都在消耗成本,很难直接见成效,万一做不好了引发用户讨厌、产品积压、库存不足,还会影响销量……而且,这些部门又受到销售、营销营销,很难独善其身。

这时候要区别对待:

对于采购、生产、供应这种容易产生硬损失的部门,重点做好数据滚动预测与数据监控。

对于来自上游供给、下游需求、大促活动等影响因素及时收集,结合供给进度与库存情况,预报可能存在的积压/缺货问题(如下图)。

一纵一横,搭建完整数据分析体系

对于研发、设计、产品这种容易产生软损失的部门,重点最好测试平台和测试服务。用常规监测发现问题,用好的测试来检验改善效果(如下图)。

一纵一横,搭建完整数据分析体系

4. 混合型

典型如营销、运营部门。这些部门很喜欢看数据,且其工作效果,是叠加在销售基础上产生的,很难观察。因此做分析的时候特别纠结。好在,他们的工作多是项目制的,可以逐个攻破。

常见的项目,包括:

  1. 大促活动
  2. 用户洞察
  3. 品牌传播
  4. 社群运营

这些在之前的文章已经有很多分享,这里就不赘述了。想洞察得深刻,想分析得到位,重点是培养业务部门的好习惯,打好数据基础。

比如:

  1. 用户标签、商品标签、内容标签、渠道标签等标签库的完善与维护。
  2. 活动标签与活动分类信息管理,活动考核标准记录,事前参照组设计。
  3. 社群运营、新媒体运营、短视频带货、直播带货基础数据收集

基础工作做好了,事后大量数据可以分析。

基础工作没做好,事后分析个屁……

一纵一横,搭建完整数据分析体系

整体安排:分阶段,做出标杆项目。

注意:上述的工作,在业务部门那里是有先后顺序的。

  1. 一般1、2、3月,做年度规划的比较多
  2. 上半年招新人、组团队、小规模试点多
  3. 重大促销、节日活动集中在下半年

清晰了业务部门行动以后,数据部门的整体安排就很清晰了:

  1. 年初,以预测、目标制定、搭建体系等基础工作为主。
  2. 上半年,优先强化基础能力,对基础数据、测试平台、标签库等工具,能强化尽量强化。
  3. 下半年,以重大项目为主,做好项目支持,做好监控与复盘,做好用户洞察。

输出的目标,以每个月都能有一个项目上线/更新为目标。这样每个季度的季报容易写,来年年度总结也就不纠结了(如下图)。

一纵一横,搭建完整数据分析体系

以上,就是数据部门规划的整体思路。当然每个企业具体情况不同。同学们可以量体裁衣,根据自己面对具体情况做调整。

当然,可能有同学会说:“规划这种高大上的事轮不到我,我就是一个小兵,日常都在跑数,咋办?!”

碰到这种情况,等待别人施舍肯定不是好办法。普通的日常工作,也能延伸出很多有价值的项目,这是数据分析工作的独特优势。

文章来源:人人都是产品经理   作者:接地气的陈老师

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

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

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

一文看懂元宇宙的投资逻辑和哲学思考

雪涛

元宇宙的热度持续不断,许多品牌和企业加入了元宇宙的行列当中。但到底什么是元宇宙,元宇宙涉及哪些内容和模块?为何品牌和企业如此重视元宇宙?本文围绕元宇宙进行了深度解析。推荐对此感兴趣的伙伴阅读。


尽管距离Facebook改名为Meta已经过去了几个月,有关元宇宙(Metaverse)的讨论依然热度不减。2022年1月18日,微软宣布以687亿美元的现金交易收购视频游戏巨头动视暴雪。

微软CEO Nadella表示游戏在元宇宙发展中“扮演了重要角色”,动视暴雪CEO Kotick更是在内部信中向员工表示,游戏“元宇宙化”是公司接受微软收购的主因。在当下,似乎没有任何一个概念比元宇宙更宏大、更抽象、更模糊、更适合炒作。我们隐约感觉到元宇宙似乎代表着数字未来和互联网的下一种形态,但是元宇宙的演进路径和终局的形态为何,相信很多读者仍然没有让自己信服的答案。

在参考了大量Metaverse相关资料后,本次Scale Partners 势乘资本将分享我们对Metaverse概念的认识框架和相关思考。我们力求去伪存真、删繁就简,帮助读者认识元宇宙这一概念最关键的要素,提升对各类元宇宙主题或概念讨论的辨识力。

一、元宇宙的内涵

给元宇宙下一个边界清晰的定义和描述移动互联网是什么一样困难。虽然如此,我们还是需要先要明确元宇宙大概是什么。著名哲学家赵汀阳从Metaverse这个词本身入手进行的分析很有启发:英文中Verse可以理解为“版本”,而Meta有两个含义。

一是“在某种事物之外的另一片领域”;

二是“在某种事物的背后更为根本性的东西”。由于元宇宙的设想最终都需要真实世界的能量去支撑,元宇宙应该不是更根本性的宇宙,更可能是在真实世界之外的另一片世界,即元宇宙更像是一个“超世界”。

我们这里采纳了MetaZ创始人、MIT Technology Review中文版前首席顾问陈序对元宇宙的描述,给出我们对元宇宙的理解:元宇宙不是与现实物理世界割裂或者并行的虚拟世界,而是人以数字身份参与和生活的数字世界。这里重点为读者解释三个要点:

  1. “数字身份”VS“数字账号”。数字账号只是数字身份的一部分,只记录了我们我们每个人的一部分信息。每个数字账号本身是要依附于拥有真实身份的人。在元宇宙中,每个人可以有多个数字身份;
  2. “参与”指的是“自由参与”。元宇宙不属于任何一个国家或者企业没有任何提前写好的剧情,没有什么已经被制定好的角色,也没有像游戏通关那样的一个终点或者主线索。元宇宙中每一个人都有权利参与规则的制定,创造自己的世界;
  3. “生活”不同于“观看”。元宇宙中的交互和体验形态不同于我们使用电脑或智能手机,用扎克伯格的话说,元宇宙是一个“我们参与的、可以沉浸式置身其中的互联网”,是一个所有感官体验都被数字化的世界。

如果接受以上的讨论,那么相信各位读者可以轻松地得出这样的判断:VR/AR、各种游戏、3D虚拟世界中的UGC平台(比如Roblox)、英伟达的Omniverse平台等等都不是元宇宙,就像是智能手机、移动App、抖音等视频UGC平台、应用开发工具等不是移动互联网一样。

二、广义和狭义的元宇宙

当前很多关于元宇宙的讨论之所以显得“差异大于共识”,除了对元宇宙的内涵理解不一致外这个原因外,跟作者未明确讨论的元宇宙是“狭义”还是“广义”版本也有关系。因此,我们有必要了解一下“两个版本”的元宇宙。

1. 狭义元宇宙

把线下的物理世界完全映射到数字世界里面,线上线下融为一体。人们在现实世界中是谁,在元宇宙里就是谁。可以看出,狭义的元宇宙本质是一个比现在映射更充分、更完备的虚拟世界,可以理解为数字孪生推向极致的一种情况。

2. 广义元宇宙

广义的元宇宙不满足于只将现实世界充分映射到数字世界,甚至不强制要求数字世界需要体现现实世界中的全部或者部分要素。因此,理论上广义元宇宙可以有无数个。

广义元宇宙如果推向极致,某种程度上就是《黑客帝国》中生活在母体(Matrix)中的人类见到的情景(此处我们无意讨论脑机接口的相关内容)。

有关广义元宇宙的一个不可回避的疑惑是:如果真的有多个元宇宙,那么同一个人如何在元宇宙之间互联互通呢?要知道,企业构建自己势力范围的问题即便在当下行政强力干预的情况下都没被很好解决,在元宇宙中,谁有能力、有意愿、有资质来解决这个潜在的问题呢?

三、元宇宙存在的价值

如果我们仔细思考就会发现,超过九成对元宇宙价值的讨论本质都是在分析VR/AR行业的价值。那么元宇宙这样一个宏大的叙事概念,其本身的价值是什么?此处给出我们的阅读和思考成果:给人们创造自己想要的世界、构建或者更好地维护关系的机会,体会作为人的存在感。应该说,元宇宙让人们对人生的设想有了落地的可能,具体体现为:

  • 在元宇宙中人们自己去建立规则、定义价值,实现自己的想法,以此来更好地认同自己,获得存在感。
  • 人的本性就是通过互动定位自己。元宇宙可能能帮我们跟他人建立起更多的关系,有可能会带来更多积极的体验。
  • 为增速放缓的互联网发展进程注入新的活力,同时应对AI和机器人可能对人类构成的威胁:
  • 目前在视觉(文字、图片、视频、直播)和听觉(音频)领域,互联网发展机遇在不同的社会阶层之间较好地实现了扁平化的延伸。在未来,元宇宙将从视觉、听觉、触觉、嗅觉和味觉五个感觉维度实现人的感官数字化,打破当前流量红利见顶的背景下大公司内卷化竞争的局面。
  • 未来AI和机器人的大规模应用很可能会造成一系列问题(比如大量人口失业),而元宇宙里可能会产生新的雇佣模式、就业模式,甚至诞生全新的职业,让人创造出全新的价值,从而为现实世界的问题提供解决方案。

四、元宇宙三要素和核心支持技术

对一级市场的创业者和投资人来说,如何判断项目跟元宇宙到底有没有关系呢?结合第一部分中对元宇宙的内涵的探讨,我们认为如下三个要素至关重要:

  1. 提供沉浸式、真假难辨的体验的硬件设备:元宇宙最直观的体现形式就是所有感官体验数字化的一个虚拟世界。因此,能够为用户提供真实且舒适体验的硬件设备重要性不言而喻。
  2. 身份系统:元宇宙中的身份系统与现实世界的身份之间需要有适当的隔离。为了让每个人的数字身份独立、长期存在,元宇宙中没有谁有“超级权限”可以管理或者删除数字身份。
  3. 价值系统:包括运行规则和经济系统。元宇宙中的运行规则不由中心化机构提前预设好,元宇宙中的经济系统则可能代表着全新的社会关系和生产关系。

显然,从实践和落地的角度看,区块链毫无疑问是元宇宙的核心支持技术:一方面,身份系统需要借助区块链去中心化的特点来维持其独立性;另一方面,基于区块链的NFT(Non-Fungible Token)能够实现让数字世界的物品(游戏、艺术品、收藏品、数字音乐等等)具有不可分割、不可复制的特性(从而解决物品唯一性的问题),并追溯这个物品或者事物信息的所有权,便于人们交换和交易数字物品。

补充:区块链上的数字加密货币分为原生币(native coin)和代币(token)两大类,前者代表是比特币、以太币等,拥有自己的主链,使用链上的交易来维护账本数据;代币则是依附于现有的区块链,使用智能合约来进行账本的记录。代币又分成同质化代币和非同质化代币两种,前者可以互相替代、接近无限拆分,而后者不可分割和替代,独一无二。

五、元宇宙的六大投资版图

元宇宙可能是继智能手机之后的第二个巨大的整合式创新机会从目前来看,实现元宇宙的难度可能和1980年代建设整个互联网世界的难度在一个量级上。我们汇总整理了元宇宙的六大投资版图,方便创业者和投资人更好地识别和把握机会。

1. 硬件与操作系统

元宇宙的沉浸式特性要求设备能够提供三维的信息呈现和交互方案,而智能手机、平板电脑等电子设备通过一块屏幕把人和信息世界隔离开,使得我们与外部环境只能间接交互。

因此,元宇宙概念下的硬件机会集中于能够带来优秀的沉浸体验和仿真效果的VR/AR/MR设备上。在未来,一体式的XR设备上可能会适配更多配件,从而更好地给予用户视觉、听觉、触觉、味觉和嗅觉五种感官刺激。操作系统是用户与硬件之间的接口,控制和管理整个硬件和软件资源。

从历史经验来看,XR设备的操作系统竞争烈度会远高于XR硬件本身的竞争烈度。在操作系统之争中,时间是不可忽视的影响因素,同时谁能够更好地平衡开发者的创造性和消费者的体验,谁就更有机会胜出。

2. 后端基建

(1)通信网络

要保证巨量用户在能够实时、共享、持久地在虚拟环境中交互,需要保证大量数据能够顺畅地发送、接受,而4G网络显然无法处理如此大规模的数据负载。5G网络让元宇宙中高清图像、视频、海量数据等信息的顺畅传输成为可能。同时,沉浸体验和应用场景的特性对通信网络的延迟也提出了很高的要求,而5G网络的低延迟特性能够满足这一要求。

(2)算力/云计算与边缘计算

由于元宇宙中信息以三维形态呈现,同时大量用户会灵活化、个性化地参与其中,实现元宇宙会带来历史上对持续、稳定算力的最大规模需求。

解决这个恐怖的算力问题很有可能需要依靠量子计算领域的重大突破。另外,受限于网络带宽、计算吞吐量等因素,以及出于保护数据安全的考虑,目前来看将云计算和边缘计算结合起来是必然选择:云计算负责全局性、非实时、长周期的大数据处理与分析,能够在长周期维护、业务决策支撑等领域发挥优势;边缘计算更适用于局部、实时、短周期数据的处理与分析,能更好地支持本地业务的实时智能化决策与执行。

说明:边缘计算是指在靠近数据源头的网络边缘侧,融合网络、计算、存储、应用核心能力的分布式开放平台。它可以作为连接物理和数字世界的桥梁连接智能资产、智能网关、智能系统等。

3. 底层架构

(1) 区块链

正如我们在第四部分中介绍过的,区块链为元宇宙的身份系统和价值系统提供支持。尽管区块链技术已经在一些场景中被应用了多年,但我们必须认识到,目前区块链技术因为对数据存储要求高、可扩展性差等原因,很难支持大范围的应用(比如零售级别的支付)。这个行业有大量的创新和Libra式“中心化的分布式处理架构和区块链技术线相结合的分层混合技术路线”这样的实践值得我们关注。

(2) 数字孪生

我们曾在第二部分中提到,元宇宙的构建可能需要将现实世界的全部或部分映射到数字世界中。在这个过程中,数字孪生是必不可少的技术。数字孪生指的是物理实体在数字世界的孪生,强调的是数字世界与物理世界的一体性,最早被应用于工业制造领域。目前,通过设备扫描环境形成数据点云,识别和提取物品模型的技术已经逐渐成熟,城市级别的超大规模三维重建也进入应用阶段。

(3) 引擎与开发平台 

为了让每一个人都有可能参与到数字世界的构建过程中,从而建设一个开放的元宇宙,我们需要有面向普通用户的低门槛内容创作工具(如引擎、开发设计工具平台等)。在这方面,海外相关厂商已经领先一步:例如,Unity把自己重新定位为“交互式内容创作引擎”,将引擎应用拓展到动画、影视、建筑、制造等其他行业。

 4. 人工智能

在未来,为了降低构建元宇宙的时间和人力成本,相比PGC、PUGC或UGC等方式,由AI生成的可供人类消费的内容或服务会越来越多;另一方面,依靠现有的方式处理所有元宇宙情境下的数据已经不现实,我们需要依靠具备自主学习和决策功能的AI来辅助,从而降低支持和维护元宇宙运行的成本。

 5. 内容与场景

预计元宇宙时代的内容消费端大体会经历如下的发展阶段:

(1)娱乐和社交内容先行,抢夺用户注意力:游戏相比其他内容领域综合准备度最高,是元宇宙内容的起点。而XR设备将元宇宙在社交方面的优势体现得淋漓尽致,吸引大量用户使用;

(2)生产、生活的多个领域被渗透:人们会逐步摆脱对元宇宙“高阶游戏形态”或“高阶社交形态”的印象,例如形成闭环的虚拟消费体系、与物理世界打通的虚拟化服务等会逐渐兴起;

(3)出现新的内容和应用:元宇宙内可能也会出现房屋、家居、汽车等物品的生产商,游戏、艺术品展览等传统活动可能会有新的内容和呈现形式……我们甚至可以畅想建立在数字资产上的金融体系会如何运行。

6. 协同方

元宇宙很可能会催生出很多新市场和新业态,孕育出新的伟大企业。这个过程中会有部分的技术方案、服务方凭借自身禀赋而充分受益,或者在新的竞争格局确定前与其他企业形成新的生态合作体系。

六、元宇宙投资演进逻辑

在上一部分中,我们分析了元宇宙概念下的六大投资版图。考虑到各个板块并不会呈现齐头并进式的发展局面,我们需要对这些领域之间的演进逻辑有一个大体的判断,从而帮助创业者和投资人把握住恰当的时间节点入局:

1. 硬件与内容先行

XR硬件在未来几年内的增长势头已经较为清晰,且与硬件配套的内容已经与硬件形成相互促进的正循环(我们后续将发布VR/AR行业研究报告,进一步探讨这个要点)。

未来新内容/场景的制作、运行、交互都需要依赖底层架构的大力升级(游戏引擎/工具集成平台等),底层架构在这一时期也会进入发展的快车道。

2. 随着底层架构的升级、内容与场景的不断丰富,后端基建与人工智能

将在数据处理、内容合成等领域发挥巨大的功效。我们将看到AI将替代或辅助人类完成建设性的工作,成为元宇宙里的核心生产力。

3. 相较于其他板块,内容与场景

板块下的变数最大。新内容、新场景、新业态可能会重塑内容产业的规模与竞争格局。同时在这个过程中,会有大量繁荣整个生态的技术协同方、服务协同方一起发展壮大起来

七、中美元宇宙发展方向预判

从某种程度上说,关注元宇宙就是在关注中国在世界科技领域的未来。目前,中美引领全球元宇宙发展,日、韩、欧洲紧随其后。短期来看,各国在移动互联网时代积累的禀赋将影响各国在元宇宙领域的发力方向。这里我们简单讨论一下短期内中美元宇宙发展的大体方向:

(1)美国:在硬件与操作系统、后端基建、底层架构三个板块内优势明显,同时在人工智能领域也具有较强的竞争力。从应用层面来看,美国企业已经在面向C端消费者的娱乐场景上取得了一定成绩,在工业设计等给B端赋能的场景上也走在世界的前列。

(2)中国:庞大的人口基数、巨大的地域差异以及独特的社会历史阶段,都是让我们相信中国在内容与场景创新方面的想象力巨大的理由。我们期待中国的创业者能像在移动互联网时代改造社交、出行、支付等领域一样,在实现元宇宙设想的过程中,创造世界级的内容与创景创新,并诞生新的协同生态中长期看,存在很多变数,谈论终局为时过早。当前,中国在底层架构板块也有一定的积累,正在逐步缩小与美国的差距。

加之中国在基础设施建设方面的投入意愿和力度巨大,我们乐观地相信,未来中国在人工智能与后端基建领域存在弯道超车的机会。期待未来中国在元宇宙发展的历史阶段中逐步超越美国,引领世界。

八、重要玩家和实践

结合我们在第四部分中对“元宇宙的三大要素”的讨论,我们认为应当重点关注具备“区块链技术应用”、“数字内容创作”和“消费硬件实力”的公司。这里我们将选取并介绍几家国内外值得关注的公司,并阐述我们的理由:

1. Facebook(Meta)

目前,Facebook是全世界唯一一家在“区块链技术应用”、“数字内容创作”和“消费硬件实力”三方面都做出成绩的公司:¡ 通过Oculus产品线提供VR硬件,解决沉浸式体验的问题;¡ 曾推出数字钱包Novi等应用,作为区块链技术储备;¡ 积累了运营区块链交易的经验,并有开发NFT产品的计划;

2. NVIDIA 英伟达

如果我们把元宇宙比作一个全新的、有无限可能的“淘金浪潮”,那么除了某些公司作为”“幸运的淘金者”是赢家外,为元宇宙淘金者提供工具的企业也是赢家。英伟达给元宇宙的开发者提供生产力工具,比如通过显卡和AI技术,简化开发者进行3D建模和图像渲染的难度。

这里建议大家重点关注英伟达的Omniverse平台:这是一款可以下载到搭载了英伟达显卡的设备的软件。Omniverse软件平台在英伟达显卡的计算、渲染逼真图像的能力基础上,添加了很多英伟达自研和第三方的软件工具包,帮助人们更好地去设计元宇宙内的东西,或者用于一些场景下的数字孪生,如模拟工业制造、自动驾驶、虚拟建筑等。

3. 腾讯

腾讯对Epic Games、Spotify、Snap等公司的投资以及自身在社交领域掌握的资源,都可以看做是腾讯对元宇宙的关键布局。在2020年腾讯还提出要在未来5年,拿出700亿美元加强自身在云、AI、区块链、5G、量子计算等领域的能力。不过我们也看到腾讯在消费硬件领域有明显短板,腾讯对国外公司的投资很可能面临较大的政策不确定性。

当然,我们也可以按照第五部分中提供的投资版图判断大公司在元宇宙概念里的布局情况。这里我们列举了一些公司和对其分析后的结果,供大家参考。

九、围绕元宇宙的争论和担忧

在本部分中,我们将先列举一些围绕元宇宙设想产生的争论。不论是元宇宙的支持者还是反对者,我们认为都有必要思考这些问题,因为这些讨论对元宇宙建设过程中形成价值共识至关重要。

1. 元宇宙会不会让人类文明停滞不前?

人们很容易担忧,元宇宙会让大量人群沉浸于虚拟内容不能自拔。如果越来越少的人花费时间和精力去关注现实世界,现实世界中的问题被解决的速度,或者人类文明进一步的探索进度都会受到影响。

另一派则认为,发展元宇宙和探索外太空这类推动人类向前的活动并不是非此即彼的关系,因为元宇宙可以帮助我们更好地认识问题(比如借助VR设备激发孩子们对天文知识的探索热情、学习知识),同时也可以为生活中受到物理条件限制的实践提供解决方案(比如借助数字孪生技术模拟各种设想,最终得到可靠方案后再应用到现实的城市建设中)。

2. 元宇宙会不会让人在现实世界中彻底躺平?

如果每个人通过VR设备都能轻松沉浸在一个虚假的美好生活场景中,那么我们很容易生发这样的忧虑:元宇宙可能会让人失去改变真实生活的动力。不过针对这个说法,反对一方认为元宇宙并不会导向这样的结果,因为元宇宙中人们同样必须付出代价(时间、创意等)才能够交换想要的东西。

反对者进一步指出,人们可以通过参与创造新的经济形式来把能力变现,并可能将虚拟世界中创造的价值带回现实世界,从而为现实世界中的“失败者”提供了改变命运的机会。 除了以上两个主要争论外,还有两个担忧是目前元宇宙的支持者没有很好地给出回应的。我们在这里也将简单介绍,以促进相关讨论:

(1)元宇宙会不会给现实世界带来巨大的能源负担,甚至影响人类在地球的生存?

元宇宙想要运行,需要我们生活的实体世界稳定、持续地为之提供包括电能在内的一切能源。那么问题来了:如果元宇宙不能证明从实体世界抢占的资源创造的价值超过这些资源的机会成本,那么谁能保证元宇宙还将稳定运行或进一步发展,不被人“拔掉插头”呢?

另外,即使元宇宙创造了巨大的价值,我们势必也要进行成本收益分析,判断元宇宙对地球资源和人类环境施加的压力(例如碳排放)是否能被抵消。

(2)元宇宙中如何进行机制设计,或者构建价值共识?

如前所述,元宇宙不属于任何一个国家或者企业,没有任何提前写好的剧情,没有什么已经被制定好的角色,也没有像游戏通关那样的一个终点或者主线索。简单来说,元宇宙是在用户共创的过程中发展、壮大起来的。

问题是,这种对公平和创造力给予最大限度支持的元宇宙如果保证具备基本的秩序?我们如何相信和保证元宇宙不走向霍布斯所论述的“一切人对一切人的战争”局面?

目前有关元宇宙的讨论中,对元宇宙可能放大网络时代的匿名性,从而带来更多道德伦理问题的风险讨论得并不多,对实体世界中的权力机构在元宇宙中将以何种形式存在、履行职责的讨论更是非常有限,这不由得让人怀疑元宇宙是否只是一个承载了美好想象的概念,其设想必然部分或全部落空?

补充新闻:在“Horizon Worlds”测试期间,一名女性测试者报告她在虚拟世界里遭到了性骚扰。这名测试者称,有一个陌生人试图在广场上“摸”自己的虚拟角色。她写道,“这种(不适的)感觉比在互联网上被骚扰更为强烈”。

可参考MIT Technology Review报道:https://www.technologyreview.com/2021/12/16/1042516/the-metaverse-has-a-groping-problem/

十、一些观点和想法

在本部分中,我们将分享一些对元宇宙概念本身、元宇宙相关讨论的看法和观点,供各位读者参考。我们无意为这些观点背书,但我们认为这些观点极具启发性,希望能够激发读者对元宇宙更深层次的思考:

1. 如果我们梳理了时间线就会发现,关于元宇宙的解读和讨论基本都集中出现在Facebook宣布更名为Meta之后。我们需要对Facebook改名为Meta这件事的商业逻辑有所判断,这有助于提升我们对各类关于元宇宙的讨论的鉴别力。

2. 考虑到Facebook为元宇宙投入真金白银(计划投资超过100亿美元),全世界恐怕没有其他公司对元宇宙这个概念有超过Facebook的影响力。从某种程度上说,Facebook掌握了对元宇宙这个概念解释的权利。在短期的3-5年内,创业者如果要以元宇宙为奋斗方向,紧盯Facebook相关的动作是很有意义的。

3. 元宇宙在今天似乎成为了“一个筐”,关于人类未来的任何设想、设施、计划、工具等等都可以往里面装。但是我们必须清晰地认识到,科技的发展有它客观的路径和速度。与其谈论元宇宙本身,不如追根溯源,聚焦支持这个故事底层的技术演进和行业发展。

4. 赵汀阳认为,元宇宙是人类第一次把一个可能世界变成真实世界的努力方向。元宇宙与文学不同的地方在于,文学作品虽然是在描述可能世界,但它思考的其实都是真实世界的问题。而元宇宙会以全新形式争夺每个人有刚性约束的资源——时间(或者寿命),很可能对真实世界产生“虹吸效应”,是一个从结果上说“非此即彼”的事:元宇宙越有吸引力,人们就会逐渐搬迁到元宇宙当中,体会现实世界中无法做到或者无法改变的事。

5. 有着“主体唯一性”的人很难承载起不同的身份设定以及与每种设定紧密关联的一切(社交关系、行为方式、掌握的资源等等)。如果我们在元宇宙中有多个难以统一起来甚至是矛盾的身份(比如既是男人又是女人),那么按赵汀阳的说法,“最终结果可能不是我们拥有多重身份,而是哪个身份都不是我们”。从保持自我的角度来说,多个元宇宙的设想最终对每个人来说就是切割、放大每个人身份的不同侧面,让我们在一定范围内去“潇洒走一回”。

附录:元宇宙公司生态图谱

2021年,Newzoom.com发布了“元宇宙生态图”。我们将图谱附在此处,供各位读者参考:


文章来源:人人都是产品经理   作者:光锥智能

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

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

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


3D to H5工作流应用手册:理论篇

雪涛

前言

设计师需求中 3D 视觉平移到互动 H5 中的项目越来越多,three.js 和 PBR 工作流的结合却一直没有被系统化地整理。

和各位前端神仙一起做项目,也一起磕磕碰碰出了爱与痛的领悟。小小总结,希望 3D 去往 H5 的道路天堑变通途。

本手册主要分为两大部分:

Part 1 理论篇:主要让设计师了解计算机到底是如何理解和实时渲染我们设计的 3D 项目,以及 three.js 材质和预期材质的对应关系。

Part 2 实践篇:基于 three.js 的实现性,提供场景、材质贴图的制作思路、以及 gltf 工作流,并动态讨论项目常常遇到的还原问题。

本文主要面向刚接触 3D 图形学的设计师,仅截取了最常用的理论知识和大家一起学习;部分涉及技术美术或计算机图形学的描述可能不甚严谨,希望大家多多交流讨论哈。

其实无论 H5 开发用到的是哪种 webGL,设计相关的材质制作基本还是基于 PBR 思路进行的,所以这边建议各位亲可以先去阅读一下 Substance 官方宝册《The PBR Guide》。

Part 1 理论篇

设计师在还原 3D 类型的互动 H5 项目的时候一定想过这个宇宙终极问题:为什么 H5/Web 实现的 3D 效果和 C4D 里渲染出来的差异那么大?

其实这是我们对实时渲染引擎(UE、Unity、three.js 等)和离线渲染工具(Redshift、Octane、Vray 等)的差异存在误解:一是离线渲染工具是基于真实光照环境来计算每颗像素的着色,实时渲染如果要实现这种效果需要耗费更多硬件基础和算力去模拟光照(没个好显卡都开不动光追)。

虽然 UE5 的实时渲染技术和硬件兼容性已经让大家大吃一惊,但在实际项目,尤其是需要兼容低端设备的 H5 来说,渲染能力还是相对有限的。二是对于游戏或 H5 互动网站实际应用来说,流畅的互动体验优先级往往高于画面精细度,所以牺牲视觉保性能也是常见情况。

硬核干货!3D to H5工作流应用手册:理论篇

图 1-Octane 离线渲染效果 vs three.js 实时渲染效果:材质细节、全局光照及投影、以及抗锯齿表现差距明显

当实时渲染效果与设计预期差距过大时,设计师能多了解一些基础的计算机图形学,也许就能更好地和开发同学商讨性价比更高的视觉实现和资源优化方案(以及更多 Battle 的筹码)。

1. 着色器与着色算法差异(硬核预警)

首先我们要知道计算机之所以能在 2D 屏幕上画出 3D 的图像,是因为有着色器(Shader)在绘制,它将我们三维空间里的模型与光照信息进行转换,并光栅化为二维图像。在计算机图形学中,着色器是用于对图像的材质(光照、亮度、颜色)进行处理的程式。

常用的着色器分为四种:像素/片元着色器(Pixel/Fragment Shader)、顶点着色器(Vertex Shader)、几何着色器(Geometry Shader)、细分曲面着色器(Tessellation Shader)。

像素/片元着色器与顶点着色器(Vertex Shader)在 webGL 处理过程中都有使用,顶点着色器先将模型中每个顶点的位置、纹理坐标、颜色等信息进行转换装配,再由片元着色器对 3D 信息光栅化并转换成 2D 屏幕信息。(关于着色器差异,感兴趣的同学可以直接跳到附录查看。)

着色器是怎么把顶点中所带有光照、纹理等信息转换并重建在二维图像的像素中呢?GPU 中是透过不同的着色算法来实现的。

一种是获取每个三角形的插值(Interpolate)来实现,这种方法称作 Per Vertex Lighting,但是当三角型很大的时候,插值往往不够精准。此时还可以引用另一种方法 Per Pixel Lighting,计算每个像素的光照信息,获得更好的渲染效果,但是往往也带来更大的计算量。

一般常见计算机图形着色算法有三类:Flat Shading、Gouraud Shading、Phong Shading。这些算法虽然看起来和我们设计师没啥关系,但事实上在后面了解 three.js 材质时,就会发现他们在呈现时的差异。

硬核干货!3D to H5工作流应用手册:理论篇

图 2-Flat、Gouraud、Blinn-Phong 着色法比较 [ F1, ©️Stefano Scheggi ]

平直着色法 Flat Shading

这种着色法认为模型中所有面都是平的,同一个多边形上的任意点的法线方向都相同。着色时,会优先选择多边形的第一个顶点或三角形的几何中心计算颜色。这种着色法实践上的效果很像低面模型,也比较适合使用在高速渲染的场景。值得注意的是,这种着色法难以做出平滑高光效果。

高洛德平滑着色法 Gouraud Shading

这是一种平滑的着色方法,在着色时会先计算三角形每个顶点的光照特性,利用双线插值去补齐三角形区域内其他像素的颜色。这个着色法比起平直着色法增加了插值的细节,而且也比 Phong 着色法渲染单个像素的光照特性的性能要高。

但是在渲染高光时,可能会因为无法获取精确的光照值而出现一些不自然的过渡(或 T 型连接容易被错误绘制),此时可以考虑对模型进行细分或使用漫反射材质。

Phong 平滑着色法 Phong Shading

与 Gouraud Shading 不同的是,它会对顶点的法线进行插值,并透过每个像素的法向量计算光照特性。这种做法能绘制出精致、精准的曲面,但是计算量较大。Blinn-Phong 是 Phong 的进阶版,着色性能更好,且高光弥散更自然。

2. 基本光照模型 Illumination Model

简单了解计算机如何绘制 3D 图形后,再来看看它要如何具体理解我们所设计的 3D 场景。

3D 转换成 2D,也就是 3D 栅格化的过程中,每一个像素的颜色是需要基于它所在的环境计算出来,而基于被渲染物体表面某个点的光强度计算模型就被称为光照明模型(Illumination Model)或光照模型(Light Model),透过计算光照模型所得到表面位置对应像素颜色的过程被称为表面绘制(Surface Render)。

*请注意这里说的光照模型并不是指设计师理解的 3D 立体模型,而是指模型对象表面光照效果的数学计算模型。

影响光照模型的因素有两大方面,一是本身给渲染物体材质设置的各种光学特性(颜色反射系数、表面纹理、透明度等),二是场景中光源光及环境光(场景中各个被照明对象的反射光)。

传统光照模型都是对漫反射和镜面反射的理想化模拟,如果要还原基于真实物理世界的效果,光照模型需要遵循能量守恒定律:一个物体能反射的光必然少于它接受的光。在实践层面则表现为,一个漫反射更强且更粗糙的物体会反射更暗且范围更大的高光,反之亦反。

硬核干货!3D to H5工作流应用手册:理论篇

图 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©️Joe Wilson ]

光照模型与着色组合在不同的渲染需求下也会有不同的应用:

  • 真实感渲染(Photorealistic Rendering):目的是基于真实物理世界对 3D 场景进行仿真还原。
  • 非真实感渲染(Unphotorealistic Rendering):也被成为风格化渲染(Stylistic Rendering),会更抽象化地对模型进行重绘。

硬核干货!3D to H5工作流应用手册:理论篇

图 4-真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]

真实感渲染 Photorealistic Rendering

考虑到真实感渲染对硬件的依赖,目前 webGL 中使用的一般以简单的局部光照模型为主(只计算光源对物体的光照效果,不计算物体间的相互影响,我们看到的“假反射”通常透过贴图来进行模拟),根据反射形态,经典的光照模型有下列几种:

  • Lambert 漫反射模型:

这种模型的粗糙表面(如塑料、石材等)会将反射光从各个方向反射出去,而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体(Lambertian Reflectors),也就是我们熟悉的橡胶材质。

硬核干货!3D to H5工作流应用手册:理论篇

图 5-漫反射模型与其他光照模型对比 [ F4, ©️ViroCore ]

  • Phong 镜面反射模型:

这是一种以实验及观察为合成基础的非物理模型。它的表面反射同时结合了粗糙表面漫反射和光滑表面镜面反射,但 Phong 模型在高光处的表现有过渡瑕疵。

硬核干货!3D to H5工作流应用手册:理论篇

图 6-Phong 镜面反射模型视觉构成 [ F5 ]

  • Blinn–Phong 模型:

是在 OpenGL 和 Direct3D 里默认的着色模型,一种调优后的非物理的 Phong 模型,顶点间的像素插值使用 Gouraud 着色算法,比 Phong 着色算法性能更好,而且高光效果也更平滑。

硬核干货!3D to H5工作流应用手册:理论篇

图 7-Phong 及 Blinn-Phong 镜面反射模型对比 [ F6 ]

  • Cook-Torrance/GGX 光照模型:

如果你用过 C4D 的默认渲染器,那么一定在材质的反射通道设置中见过它俩。

这是相对高级的光照模型,不同于 Phong 和 Blinn-Phong 模型仅仅对漫反射及镜面反射进行理想化模拟,这两个光照模型基于不同物理材质加入了微表面(Microfacet)的概念,并考虑到表面粗糙度对反射的影响,对镜面反射进行了调优,使得高光的长尾弥散更加自然,也是目前 PBR 渲染管线(Unity、UE)中较常用的光照模型。

硬核干货!3D to H5工作流应用手册:理论篇

图 8-Phong、Blinn-Phong 与 GGX 镜面反射模型对比 [ F7, ©️ridgestd ]

  • 次表面散射模型 Subsurface scattering/SSS:

终于有一个设计师们常见的概念了。次表面散射是指光穿透不透明物体时(皮肤、液体、毛玻璃等)的散射现象。现实生活中,大部分物体都是半透明的,光会先穿透物体表面,继而在物体内被吸收、多次反射、然后在不同的点穿出物体。以皮肤为例,只有大概 6%的反射是直接反射,而 94%的反射都是次表面散射。

BSSRDF(双向次表面反射分布函数)是用于描述入射光在介质内部的光照模型,目前也被应用在最新的虚拟角色皮肤实时渲染中;但由于 SSS 材质的计算需要依赖深度/厚度数据,所以 webGL 对这种高级光照效果的还原程度还是相对有限的。

硬核干货!3D to H5工作流应用手册:理论篇

图 9-Unity 中模拟次表面散射光照模型效果 [ F8, ©️Alan Zucconi ]

非真实感渲染 Unphotorealistic Rendering

也就是我们常说的 3 渲 2,非写实渲染风格也是从人们对 3D 场景套以 2D 绘画或自然媒体材质需求而演化过来的。因此非写实渲染技术实际上是不同光照模型+不同着色处理共同作用的风格化输出,目前也被大量应用在动画及游戏中,像《英雄联盟:双城之战》《蜘蛛侠:平行宇宙》都是顶级三渲二大作。

硬核干货!3D to H5工作流应用手册:理论篇

图 10-在不同通道中混合应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]

  • Cel Shading/Toon Shading:

卡通着色,一种最常见的以 3D 技术模拟扁平风格的着色形式,通常以极简的颜色、渐变及明确的外框线等漫画元素作为风格特征。

硬核干货!3D to H5工作流应用手册:理论篇

图 11-Blender 中不同类型的 Toon Shader 效果 [ F10, ©️Blendernpr]

日本创意编程师 Misaki Nakano 制作了一个非常有趣的 Toon Shading H5 互动页面,大家可以体验一下不同着色形态下非常模型的视觉表现。点击体验: https://mnmxmx.github.io/toon-shading/dst/index.html

硬核干货!3D to H5工作流应用手册:理论篇

图 12-Misaki Nakano 的 Toon Shader 互动网站 [ F11, ©️Misaki Nakano]

  • Customized Shading:

目前越来越多渲染器可支持设计师及工程师根据项目需求对着色进行定制化处理,以产出更具风格化和艺术化的着色效果。例如工业界插画常用的冷暖着色(Gooch Shading),以及更具绘画质感的素描着色(Hatching)及油画水墨画等自然媒体着色,都已经深入到了我们日常的创作之中。

硬核干货!3D to H5工作流应用手册:理论篇

图 13-在 Unity 中,基于真实感渲染的贴图效果与 NPR 水墨风格化着色效果对比 [ F11, ©️邓佳迪]

3. Three.js 材质着色对比

说完真实感与非真实感渲染差异后,我们再来看看 Three.js 中的材质。

和许多渲染引擎一样,除了原生材质外,webGL 的材质和着色都是可以根据需求进行定制的,但这往往会也带来较高的开发成本及兼容性风险。考虑到 H5 项目的实际应用场景,下表罗列了 Three.js 原生材质的对比,包含了材质特性优势、贴图差异及适用场景,大家可以基于项目需求快速选择并混合使用:

硬核干货!3D to H5工作流应用手册:理论篇

图 15 – three.js 材质对比表

4. 色彩描述与管理 Color Space

虽然着色、光照模型以及材质渲染对 3D 表现有着最为直观的影响,但 3D 工作流仍有一个隐秘而关键的环节——色彩管理。

真实世界中按照物理定律,如果光的强度增加一倍,那么亮度也会增加一倍,这是线性的关系。理想状态下,像素在显示屏上的亮度也应为线性关系,才能符合人眼对真实世界的观察效果(如图 b:横坐标为像素的物理亮度,纵坐标为像素显示时的实际亮度)。

但是显示器的成像由于电压的影响,导致输出亮度与电压的关系是一个亮度等于电压的 1.7-2.3 次幂的非线性关系,这就导致了当电压线性变化时,亮度的变化在暗处转换时变慢,如果显示器不经过矫正,暗部成色也会整体偏暗(如图 c)。目前大多数显示器的 Gamma 值约为 2.2,所以也可以理解 Gamma2.2 是所有显示器自带的一个遗传病。

硬核干货!3D to H5工作流应用手册:理论篇

图 15-红色上曲线=Gamma0.45=sRGB Space;绿色下曲线=Gamma2.2=显示器真实成像缺陷;蓝色斜线=Gamma1.0=Linear Space 真实物理世界线性关系

为了矫正显示器的非线性问题(从图 c 校正回图 b),我们需要对它进行一个 2.2 次幂的逆运算(如图 a),在数学上,这是一个约 0.45 的幂运算(Gamma0.45)。经过 0.45 幂运算,再由显示器经过 2.2 次幂输出,最后的颜色就和实际物理空间的一致了,这套校正的操作就是伽马校正(Gamma Correction)。

而我们常见的 sRGB 就是 Gamma0.45 所在的色彩空间,是 1996 由微软与惠普共同开发的标准色彩空间。当照片素材一开始储存成 sRGB 空间,相当于自带一个 Gamma0.45 的遗传病抗体,当它被显示器显示时,就自动中和了显示器 Gamma2.2 的缺陷,从而显示出与物理世界相符的亮度。

另一个校正原因是因为人眼在接受光线时的敏感度也不是线性的,人对于暗部的感知更敏感,对高亮区域感知较弱,而且人眼感知光强度与光的物理强度也刚好是对数关系。为了在暗部呈现更多人眼可感知的细节,Gamma0.45 的色彩空间中(如图 a),像素的实际亮度也会高于它的物理亮度。

硬核干货!3D to H5工作流应用手册:理论篇

图 16-人眼感知光强度与发射光真实物理强度对比

上面那一大段确实有点绕,但也就说回来为什么建议渲染时使用线性空间(Linear Space)了。因为在计算机图形中,着色器的运算基本上都是基于物理世界的光照模型来保证渲染真实性的,如果模型的纹理输入值是非线性的(sRGB),那么运算的前提就不统一,输出的结果自然就不那么真实了。

而在大多数工作流及渲染软件中,大部分贴图资源都是默认输出 sRGB 的(设计师作图环境一般也在 sRGB,所见即所得),而法线贴图、光线贴图等纹理(纯数值类纹理,只用于计算)又是 Linear 的,这个部分就需要我们根据渲染引擎本身的特性,来判断是否需要对不同的贴图进行不同的“去 Gamma 化”处理了(WebGL、Unity、Octane 等)。

将所有贴图进行去 Gamma 化,统一为 Linear 空间后,再在渲染输出时由引擎统一进行 Gamma 校正,这个时候在显示屏里显示的就是接近真实世界的效果了。

更多色彩空间的实际效果比较,大家可以看下 Unity 的文档:《Linear/Gamma 渲染比较》:https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html

回到 H5 所用的 Three.js,它的着色器计算也是默认在 Linear 空间,如果最终渲染时不转化为 sRGB,在设备显示时可能会造成色彩失真。在 three.js 中色彩管理的工作流会根据导入模型 Asset 的差异而有所不同,如果贴图与模型是分别导入场景,则建议可尝试以下流程:

1. 输入贴图数据 sRGB to Linear: 含色彩的贴图(基础材质、环境、发光)设编码为 sRGB(texture.encoding = sRGBEncoding),或将渲染设置 renderer.gammaInput 设为 True,可将原为 sRGB 的贴图转换为 Linear,而原纯数值类贴图(法线、凹凸等)仍旧保持 Linear;这一操作可保证贴图输入数据的正确性与统一性。

2. 刷新材质:当材质编码类型被修改后,需要设置 Material.needsUpdate 为 True,以重新编译材质。

3. 输出渲染 Linear to sRGB: 校正渲染输出值的 Gamma:

renderer.gammaOutput = true; renderer.gammaFactor = 2.2;以供显示屏正确显色。

《Part1-理论篇》就先告一段落啦,如果你偶发失眠,建议可以反复咀嚼延伸阅读的内容。

《Part2-实践篇》会继续完善 three.js 场景、材质贴图的制作思路、以及 gltf 工作流,并动态讨论项目常常遇到的还原问题。

2022,咱们需求再见。

附录

1. 着色器差异

像素着色器 Pixel Shader

也称为片元/片段着色器(Fragment Shader), 为二维着色器。它记录了每一个像素的颜色、深度、透明度信息。最简单的像素着色器可用于记录颜色,像素着色器通常使用相同的色阶来表示光照属性,以实现凹凸、阴影、高光、透明度等贴图。同时,他们也可以用来修改每个像素的深度(Z-buffering)。

但是在 3D 图像中,像素着色器可能无法实现一些复杂的效果,因为它只能控制独立的像素而并不含有场景中模型的顶点信息。不过,像素着色器拥有屏幕的坐标信息,可以依据屏幕或邻近像素的的材质进行采样并增强,例如,Cel Shader 的边缘强化或一些后期的模糊效果。

顶点着色器 Vextex Shader

是最常见的 3D 着色器,他记录了模型每个顶点的位置、纹理坐标、颜色等信息。它将每个顶点的 3D 位置信息转换成 2D 屏幕坐标。顶点着色器可以处理位置、颜色、纹理的坐标,但是无法增加新的顶点。

几何着色器 Geometry Shader

是最近新兴的着色器,在 Direct3D 10 和 Open GL3.2 中被引用。这种着色器可以在图元外生成新的顶点,从而转换成新的图元(例如点、线、三角等),而优势也是在于可以直接在着色中增加模型细节,减低 CPU 负担。集合着色器的常用场景包括点精灵(Point Sprite)生成(粒子动画),细分曲面,体积阴影等。

细分曲面着色器 Tessellation Shader

在 OpenGL4.0 和 Direct3D 11 中出现,它可以在图元内镶嵌更多三角体。为传统模型新增了两个着色步骤(一是细分控制着色,又称为 Hull Shader,二是细分评估着色,又称为 Domain Shader),两者结合可以让简单的模型快速获得细分曲面。(例如,含细分曲面效果的模型加上置换贴图就可以获得极其逼真细腻的模型)

2. 一些术语的简单理解

GL: Graphics Library, 图形函数库。

webGL:Web Graphics Library,Html 5 可接入的 3D 绘图协议/函数库,可以为 H5 Canvas 提供 3D 渲染的各类 API。

Z-Buffering:深度缓冲,3D 图像在渲物体的时候,每一个生成的像素的深度会存储在缓冲区中。如果另一个物体也在同一个像素中产生渲染结果,那么 GPU 会比较两个物体的深度,优先渲染距离更近的物体,这个过程叫做 Z-Culling。当两个物体靠很近的时候(16-bit),可能会出现 Z-Fighting,也就是交叠闪烁的现象,使用 24 或 32bit 的 Buffer 可以有效缓解。

Rendering Pipeline:渲染管线/渲染流水线/像素流水线,为 GPU 的处理工作流,是 GPU 负责给图形配上颜色的专门通道。管线越多,画面越流畅精美。

硬核干货!3D to H5工作流应用手册:理论篇

图 17-渲染管道细节工作流 [ F12 ]

Rasterization:光栅化/点阵化/栅格化,就是将管线处理完的图元转换成一系列屏幕可视的像素,过程包括:图元拼装(Primitive assembly)-三角形遍历(Triangle Traversal)- Pixel Processing-Merging。

文章来源:优设 作者:ISUX


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

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

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


如何利用卡间联动设计提升关注度?

分享达人

随着媒体发展,品牌广告演变出众多创新十足、彰显品牌调性的创意。广告创意日益精进的同时用户体验阈值也不断提升,如何实现创意突破、触动用户心弦、实现用户体验与商业价值的双赢是品牌广告面临的挑战。

百度品牌广告为寻求自我突破,塑造对用户有价值、对客户强权益的新型广告形态,从全局进行思考,打破现有样式的局限,进行创新形态重构。我们将结合卡间联动的创新实践分享品牌广告的创意探索。

卡间联动是什么?

超级品专是品牌广告的重要产品形态,通过品牌广告结合自然搜索结果,逐步帮助客户构建在百度搜索生态的品牌运营阵地,同时给用户带来更完整的品牌信息获取满足(下图左)。在实际运用中发现,超级品专在样式上希望进一步做突破:

1)沉浸感:提升下方白色组卡品牌调性。

2)触达率:提升下方组卡的触达及感知。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

基于以上分析,我们进行了系统性的样式创新,推出卡间联动创新形态,该形态的本质在于通过彩卡形态提升沉浸感,通过互动化的炫动浮层动效引导用户下滑浏览探索,从而提升品宣和数据效果,达到品效双赢的终极目标。

卡间联动如何设计?

1. 整体视觉升级,沉浸式彩卡,突显品牌调性

界面背景上做了多种设计尝试,将白卡区升级为彩卡,提取头卡物料进行智能取色,使头卡和下方组卡更融合,强化整体性,提升沉浸感,将整体区域打造成“品牌运营阵地”。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

2. 首屏强动效吸引,提升视觉冲击力,增强品牌认知

首屏以动效形式展现品牌主推信息,加强用户感知,使用户快速理解品牌亮点,获取品牌信息。此外,我们针对不同行业、不同营销目标,以差异化的动效形式作为品牌服务的延伸,增强视觉冲击力,突显产品亮点,强化品牌认知。

3.下滑展现动画,强化品牌卖点,激发用户探索兴趣

组卡区结合品牌信息,根据用户搜索品牌的诉求和目标,强化品牌的 2-3 个卖点,通过用户下滑操作触发一段动画,引导视觉动线持续向下,玩法上增加了惊喜感,激发了用户的探索兴趣,吸引用户关注到价值信息后形成点击转化。

4. 控制展现时长与展现频次,减少对用户的干扰,注重用户体验

前续通过动效传递品牌信息价值,同时我们还以不干扰用户操作为目标,控制动效展现时长及展现频率,让用户更专注并沉浸于内容本身,体验更加友好。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

品效双赢效果揭秘

那么卡间联动设计创新是否真正实现品效双赢?实现商业价值与用户体验的共赢?我们通过线上数据分析和用户体验调研,来揭秘卡间联动效果。

1. 数据分析显示:有效提升转化效果和停留时长

首发客户来自汽车行业,通过该客户投放超级品专和卡间联动样式的实验对比,后者数据显著提升,点击率平均提升 11%,停留时长提升 20.2%。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

2. 定性调研显示:有效激发用户兴趣,增强品牌认知和记忆

在调研方法的选择上,考虑到卡间联动的设计创新效果与用户视觉注视息息相关,因此,我们引入眼动追踪技术,通过记录用户的视觉注视过程,获取客观数据,同时结合问卷评分和深度访谈,从主客观全面了解用户的真实体验感受。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

在调研用户的选择上,为了找到最具代表性的目标用户,我们根据行业用户画像设定年龄和性别配比,同时结合百度 App 使用习惯进行筛选。

评估维度的选择,重点参考了广告效果评估理论模型(AIDMA 模型),该模型阐述了用户对品牌从“注意”到“行为”转变的心理过程,基于该心理机制,结合品牌广告关注品牌吸引和印象增强的特点,从中提炼了注意兴趣、情感偏好、记忆效果三个维度来衡量品牌宣传效果。

关于这个模型的详细介绍:

实战案例!如何利用卡间联动设计提升19.7%的关注度?

实战案例!如何利用卡间联动设计提升19.7%的关注度?

在实验设计上,我们对比了超级品专和卡间联动样式。调研结果如下:

1. 注意兴趣:卡间联动吸引用户关注,引起用户兴趣,可提升品牌宣传效果

卡间联动能有效提升用户注意兴趣,整卡的注视时长提升 37.5%。用户在浏览整页过程中,分配更多的时间在卡间联动样式区域,注视时间占比从 46.6%提升至 55.8%,增幅 19.7%,注意吸引提升效果明显。

进一步细分数据发现,卡间联动首屏和下方组卡注视时长均有所提升,其中首屏动效最先吸引用户,提升效果更明显。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

2. 情感偏好:卡间联动用户主观偏好更高,增强用户对品牌的印象

整体上,用户对卡间联动表现出更高的情感偏好,其中,卡间联动广告设计感和惊喜感提升效果最好,评分提升高于 50%。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

结合来自用户的主观反馈可以看到,卡间联动提升用户情感偏好的原因主要为动效生动形象,互动性强,能更好的突出品牌特征,传达品牌调性。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

3. 记忆效果:卡间联动视觉冲击力强,有互动感,用户印象更深刻,品牌记忆效果更好

卡间联动通过动效突出品牌卖点,用户可回忆起更多的品牌细节,相较于超级品专,用户记忆印象更深刻。

结语

综上,卡间联动设计样式,在效果数据和品牌宣传上均有不错的表现,是品牌广告“品效双赢”的一次成功尝试。我们不仅考虑样式的精品化,更注重行业的通用性和规模化,目前卡间联动样式已覆盖了汽车、旅游、食品饮料、奢侈品等行业客户的通用诉求,满足新品宣发、卖点展示等多维度营销诉求。

同时最大程度降低物料制作难度,赋能客户低成本实现创意表达,如汽车行业客户仅需提供汽车前视图、侧视图、顶视图三张图片,即可生成炫酷的动效效果,快速投放。

实战案例!如何利用卡间联动设计提升19.7%的关注度?

在品牌广告自我突破和创新发展的道路上,我们也将继续探索、持续优化,始终不变的初心是,用设计创新的力量,提升用户体验,创造价值。

文章来源:站酷   作者:百度MEUX


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

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

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


时间显示的设计细节

雪涛

背景

“时间”作为人机交互界面中经常出现的元素,本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现,关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的,这是出于怎样的考虑呢?今天我们就来聊一聊,如何在产品设计中把握“时间”显示的诀窍,让其在页面中发挥最大的作用。

“时间”元素的分类

按照“时间”元素在页面中的出现场景和所起到的作用,可以大致归为以下几类:

A. 事件的关键构成要素

时间作为描述整个事件的重要组成部分,缺失后会对原本所要传达的内容产生严重的影响,进而影响用户的使用预期和结果,比方说用户可能不能以一个较低的价格完成商品购买,或错过了产品发布会的时间。

从3个方面,帮你掌握时间显示的设计细节

B. 行为的时间标记

指用户本人作为行为主体或行为的接收对象,在某一动作发生后为其所打上的时间标记,比方说“我”购买商品下单的时间或收到一封邮件的时间。

从3个方面,帮你掌握时间显示的设计细节

C. 内容的附属信息

用户在使用产品进行内容消费时,时间作为该条内容的附属信息,起到补充说明的作用,比方说一条短视频或新闻的发布时间。

从3个方面,帮你掌握时间显示的设计细节

在上面的案例中,我们会发现“时间”在对应场景里所发挥的作用不同,用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时,要根据具体场景和用户诉求判断“时间”元素的重要性和优先级,通常情况下:时间作为事件的关键构成要素>行为的时间标记>内容的附属信息,之后再思考用什么样的设计形式去展示来达到我们的目标。

“时间”的呈现方式和运用技巧

在讨论“时间”元素的设计之前,我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度,类似我们高中物理时学过的“时刻”和”时间间隔“的概念。

拿开会举例子:“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点,而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段;但是,我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。

通过上面的例子我们可以发下,同样是描述一件事情,运用不同的时间点、时间段的方式去表达,意思一样但却传递出不一样的情感,并且两者存在如下的“换算”关系:

1)时间段加上定语会变成时间点(但同样是时间点,“下午 6:00”是绝对时间,而“1.5 小时后”是相对时间,刚好对应到我们设计时两种时间戳类型);

2)两个时间点之间则表示时间段。

所以,我们在平时表达或设计时,要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点?还是想描述其所持续的时间过程?之后我们再针对不同语境去选取合适的文案和呈现方式。

从3个方面,帮你掌握时间显示的设计细节

时间的呈现方式离不开:时间戳类型、时间显示格式、时间颗粒度。其中,时间颗粒度指的是描述时间的最小单位,往往颗粒度越细,给用户传达的确定感越强(如转账时间是 12 日 15:15:20),对用户的激励作用越明显(如距抢购结束仅剩 00 时 01 分 23.6 秒)。

1. 绝对时间戳

绝对时间可理解为事物发生时的确切时间,由具体日期(年、月、日)和时间(时、分、秒)组成。使用绝对时间戳的优势是信息传达精准,显得正式,给人确定感和安全感,同时排布规整,便于形成认知习惯;但缺点是内容显示过长不利于阅读,并且占用空间较大。

从3个方面,帮你掌握时间显示的设计细节

在时间显示格式的选择上,为了避免混淆,推荐使用文字格式或“-”分隔符来分隔日期,而“/”分隔符在不同国家有不同的展示顺序习惯,容易造成误解,尽量少用。

从3个方面,帮你掌握时间显示的设计细节

时间颗粒度的选择依情况而定,一般场景总结如下:

从3个方面,帮你掌握时间显示的设计细节

2. 相对时间戳

相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时,距当前时间点的时间差值,多用于 push 通知、信息流产品,侧重强调内容的时效性;而“倒计时”也算相对时间的一种,侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低,不用通过计算来判断时间过去或还剩下多久;缺点是不够精确、正式,并很难衡量两个时间点的临近性。

从3个方面,帮你掌握时间显示的设计细节

在使用相对时间时,要注意格式友好。时间单位可随着时间的推移自动改变;数字不要过多,尽量取整;并且可设置其与绝对时间转换的临界点。

从3个方面,帮你掌握时间显示的设计细节

总结

在设计界面中的“时间”元素时,要遵循场景贴合、便于阅读理解的总体原则;之后根据场景和目标,再选取合适的“时间”呈现方式(包括时间戳类型、时间显示格式、时间颗粒度)。

当时间作为“A.事件的关键构成要素”时

一般情况下使用绝对时间,并且要看是为了强调某一关键时间节点,还是侧重表达整个持续过程。此外,选用关联场景的文案或者运用倒计时(相对时间)的形式,可一定程度上促进用户更加集中注意力,提升对信息的关注度,并达到特殊的激励作用和转化效果。

当时间作为“B.行为的时间标记”时

该场景通常是为了追求确定感,通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点(段)去查找、回顾相应内容,因此大多数采用绝对时间,时间颗粒度依具体情况而定。

当时间作为“C.内容的附属信息”时

如果所设计的产品供给内容的更新速度快,用户活跃度高,并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性,那么通常会使用相对时间。部分信息流产品(比如新闻资讯类、社区类)会在列表页使用相对时间,在详情页使用绝对时间,时间颗粒度也是依情况而定;并且会随着时间推移,在某一时间节点前把相对时间转换为绝对时间。

文章来源:优设  作者:VMIC UED


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

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

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


如何提升表单的易用性及数据量化

雪涛

表单在B端产品中是重要的组成部分,设计表单是比较考验设计师综合能力和设计细节的。一定程度上,表单设计的好坏也决定了产品的成败。


在实际项目中随着B端产品的复杂化,出现冗余的视觉干扰信息,降低信息传达的效率,使得用户认知成本高,操作难度大。那么对于表单如何提升表单的易用性又该如何数据量化易用性呢?本文从4大方面阐述全面提升表单的易用性并验证。


一、表单的构成及应用场景


表单由表单标签、表单域、提示信息、操作按钮组成。


二、为什么要提升表单的易用性


在我们设计B端产品的过程中,总会遇到用户信息填写逻辑混乱、资料收集不全的状况,导致用户在浏览和编辑时的操作体验大打折扣。主要反映在以下几个方面:


1、用户浏览信息顺序混乱,信息层逻辑不清

2、不同信息内容风格及交互不统一,用户难以建立统一心智

3、产研协作与资产沉淀之间有断层,无法有效沉淀与跟踪管理

4、整体页面操作时间长,用户跳脱率高

5、用户客诉数据高



三、如何提升表单易用性


提升表单易用性的4大原则:易阅读 、易操作 、安全感 、所见即所得


1、易阅读


a、采用扁平化设计,化繁为简,去除冗余的视觉干扰,使得页面更加简洁清晰。

如:当必填特别多时,就不用都标出来了,只需要单独标出非必填项即可,最大化得信息降噪。


b、尽量采用单列布局,视觉动线流畅,不容易遗漏信息;按Enter换行,可以最大程度得提升表单的输入效率。此处的用户心智与操作效率比屏幕利用率更为重要。


c、面对多行或复杂表单可以采用逻辑分组+合适的折叠度,提高页面有效信息的透传,增加用户填写表单的效率,让用户快速填写,快速离开。


2、易操作


a、为用户提供合适的默认项,可以减少用户操作步骤,提高填写效率。


b、在表单中填写上部分信息即可自动获取下面信息,无需用户再次填写,也大大增加了操作效率。


c、根据搜索、联想,自动现实匹配信息,大大减少用户记忆和认知的负担。


d、对于一些标准证件、文本信息的录入,可以通过OCR识别文件内容。当用户上传图片后,运用图像识别技术提取关键信息并自动录入。

如果图片不清晰或存在水印,此时也应提供修正渠道,可逐一校对并修改。


3、安全感


a、操作前给予正确提示,避免用户重复试错,缺乏安全感。


b、操作中给予实时反馈,为用户封闭不正确的道路。


c、操作后的提醒和纠错,告诉用户哪里错了,而非简单粗暴的错误警告。


4、所见即所得


边设置,边预览,适合对移动端、小程序、H5的配置。


四、如何量化体验度量衡


通过用户点击数据,辅助设计洞见。从4个方面量化体验度量衡:任务完成率、任务完成时长、必填项目数、易用度评分


1、任务完成率

通过埋点获取数据使用公式进行计算或让技术搭建看板直接看。新版上线后,用户会有一定的学习适应周期,最好选取一个月以后的数据,比较具有参考意义。


2、任务完成时长

数据分析发现,任务完成时长数据呈现伪正态分布状态,取众数最具代表意义。


3、必填项目数量

结合业务场景,减少不必要的必填项,只设置必要的信息填写,能自动获取则自动获取,减少操作步骤,增加操作效率。


4、易用度评分

通过在产品后台投放调研问卷,获取真实的用户,使用登门槛效应让其进行评分。最后可把被筛选的对象圈到访谈对象池,有机会可以成为产品成长用户。


五、总结


以上就是对于提升表单易用性及验证的思考,总结如下:


对于用户来说

提升表单易用性可以提高信息内容理解和操作效率,更便于管理账户

对于产品来说

提升表单易用性可以提升获取用户和企业信息内容的效率,优化企业框架结构,提升信息质量

对于设计来说

提升表单易用性可以提升信息获取效率,节约设计和开发成本


文章来源:站酷   作者:牛肉咖喱garry 

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

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

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

问卷调查的那点事

雪涛

问卷调查,是定量分析过程中一种较低成本且能快速收集数据的工具,一般通过问卷来进行大样本的数据收集(一般最小例子数要保持在300份左右),主要以用户的基础数据、行为数据和态度数据为主,问卷既可以作为独立的调研项目,可以跟其他调研方式进行结合,比如说结合访谈、结合企业内部的数据横向对比来看,可以得到更加可靠的调研结论,整个问卷设计的过程看似简单,但是在整体设计的过程却是需要很多的思考与技巧


老规矩!在做所有事情之前,通常我们都需问个为什么?为什么要做问卷调查?因为这会关系到设计问卷的核心内容是什么,所得到的的回答通常会影响后续问卷的构成,当然最后也会产出不同的结果


1、收集用户基本信息

很多时候,我们或许知道理想目标用户是谁,但是谁才是真正使用我们产品的用户呢?了解真正使用的用户,可以对用户进行更针对性的分析和设计


2、了解用户使用场景

了解用户在什么场景下会使用产品,以及用户的使用产品来进行什么类型的操作,这是很有必

要,也是验证一个环境与功能定位准确与否的一种手段


3、获取用户相关问题

了解用户对产品或某功能的满意程度,从问卷中收集用户的心声,对于用户不满意的方面,可以进行归纳总结,并给出合理的解决方案


4、给改版或优化指明方向

产品有大改版前,或想要优化某功能前,由于之前缺乏相应的用户调研数据,此时可以用问卷来评估当前对应产品或功能的体验如何,以便在重新设计的方向上能更好聚焦


5、验证需求是否合理

很多时候,产品需求可能没那么明确,用户和产品需求间始终存在着Gap, 我们有时对方案琢磨不定时,可能会试运行,后续看用户反馈,通过合理设计问卷,我们也可以稍微窥探到用户的真实需求,

但是对需求的验证,单通过问卷调查的结论还是比较难确定其可靠性,问卷仅能窥探到比较浅的一层,最好后续可以对用户进行访谈来做后续跟踪,以便全面性的掌握问题本身


确认问卷调查的目的后,下一步就是设计问卷,在设计问卷前先不妨整理出对应的大纲,从而确保问卷的严谨性


问卷大纲的意义是在帮助我们设计问卷前,先梳理清楚本次问卷的意义,以及背后需要解决的核心问题是什么?


1、明确问卷对象

我们需要对目标群体有一定的了解,包括他们掌握的相关信息、习惯使用的场景等,才能够提出合适的问题,设计者甚至可以通过目标对象,来确定投放渠道,以及用户过滤

举个栗子

假设我们本次要做一个关于”自由造型“环境的问卷大纲

那么问卷对象就是:”使用自由造型环境的用户“

设计师是够已掌握相关用户的画墙?若没,则可将其一并加入至调查的问题中,如何将问卷精准曝光给”使用过自由造型的用户“,对应的投放渠道也将清晰化



2、明确问卷目标

每次制作调研问卷前,都需要确定目标——明确知道「我们要调研什么」、「我们要从哪几个方面调研」,之后所设计的问题,都必须是围绕调查目的最必要的题目,可要可不要的题目最好不要列入问题,最有回收问卷后的报告可以总结目标是否达成

同样举个栗子

假设此次问卷的目标是:”掌握自由造型存量用户的用户画像、使用场景以及定位的合理性“

那么问卷相关问题的范围就必须围绕这三点目标展开


一份问卷的基本结构包含标题、招募语、题库,三部分组成


1、问卷标题

是对问卷调查内容的概括,简明扼要,溢于言表,若能引起答卷者额兴趣更佳


2、招募语

包括问候语、介绍说明,填写说明,开场白往往会影响受访者们决策,是否参加此项目调研,需要表述仔细,为调研打下基础


3、问卷题库

题库原则:先易后难,开放题置后,时间一般控制在3-10mins,必须包含甄别题,已过滤掉不可靠的问卷


举个栗子

您使用过以下哪些自由造型功能?(多选题)

□画弧

□偏移

□阵列

□以上都没有用过


若用户选择第四项的同时,有选择了其他选项,则可将该问卷废弃



问卷中出现的问题类型大致分为三类


1、封闭题

即指能够让调研对象用“是”或“否”来回答的提问,或是使调研对象的回答限制在可能的答案中


2、开放题

即指能够让调研对象自由回答的提问,一般多为文本框


3、半开放题

即指将可能的答案枚举出之后,最后再增加一个自由回答的选项,以免遗漏可能的答案,一般开放式问题能够引导受访者采用更丰富的语言,或列举,或讲故事来作答,但回答成本较高,而封闭式问题往往限制了可能的答案,这时不妨采用半开放题目的形式试试


问卷问题的措辞需要好好设计,以避免不必要的测量误差


1、问题的陈述要简洁、清楚,避免模糊信息

图中栗子

很明显,正确示例由于加入的时间的范围,从而将问题变的更加清晰


2、注意问题的严谨性

严谨性包括两个方面,一是指设问的严谨性,即一个问题只包含一项内容,另外所涉及的答案选项能包括被访者的所有情况

图中栗子

错误实例中的”喜欢“一词的内容范畴太大,从而可能导致用户的理解发生偏差


3、最好不用或避免使用否定句

询问问题的方式要恰当,平白直叙的疑问句,能够获得受访者更直接的答案

图中栗子

错误实例以及对应选项,会让用户很抓狂,短时间内无法理解与给出对应答案


4、避免使用引导性的语句

这样的问题很容易引起从众效应,可能受访者本来觉得自由造型有问题要反馈,但是看到题目里,就会选择和大家一致的观点


5、注意问题的排序

熟悉问题在前,生疏问题在后;简单易答问题在前,复杂难答问题在后;感兴趣的问题在前,顾虑紧张的问题在后;行为问题在前,态度问题在后;封闭式问题在前,开放式问题在后


6、注意问卷的长度

一个好的用户研究问卷,需要控制它的长度,超过20分钟答题时间,会让受访者感受到焦躁的情绪,从而放弃回答或者是随意填写


1、保证问题的选项种类适合所有用户

最好列出所有可能,如果无法做到,也可以提供一个「其他」选项给那些没有被覆盖到的用户,避免强迫用户选择


2、保证选项的具体直观

不要有含糊不清的表述,能够用数字表达的尽量不用「很少、一般、经常」这类表述


3、保证选项的顺序一致

如果一份问卷的选项需要遵循一定的逻辑顺序,比如选项1-6永远是一种渐进的过程,那么就不用轻易改变个别问题的排序,否则用户可能没有注意到或者习惯性按照原来的方向进行选择,另外答案没有逻辑顺序,则需尽量做到随机排列,顺序可能会影响用户的选择,我们通过随机的方式来降低这种影响


经历了问卷设计这第一道关卡后,面对回收后的大量数据,我们如何获取可靠成果?由于本人问卷多采用阿里UONE,本身自带数据分析系统,回收、清洗、统计与报告所以目前这一领域本人并不专业,结合网上搜集相关资料后,总结大致分为四个步骤,分享给大家


剔除有效范围外的数据:排除异常作答时间值(比如作答时间为 10 秒),判断为作答不认真,可以根据题项来确定,一般 10 道题设置筛选出 60 秒之内的问卷


剔除连续重复值:在时间范围内,再核查问卷是否出现连续重复值,出现的问卷予以删除,如果问卷数量较大,可以使用 STATA 软件编码或 Excel 条件函数判断进行处理


剔除违背逻辑一致性的数据:在时间范围内,核查问卷是否存在前后逻辑不一致的题,比如总体满意度打分为非常满意,但后续题目都选择了非常不满意


剔除有缺失值的数据:严格来说应该将有缺失值的用户予以删除,但有时候回收样本量没有那么大,则可保留


数据分析方法有非常多,要在众多的分析方法中选择一种也是比较难的事,无论选择什么样高大上的方法都是其次,最重要的是选择的分析方法能说明问题,能体现数据的价值


比较分析是一个简单的、比较通用的、易于理解的数据分析方法,可以分成趋势分析、特征重要性、分组分析三种 

文章来源:站酷   作者:肉圆子 

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

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

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


设计师,如何高效完成竞品分析!

seo达人


1.什么时候开始竞品分析

竞品分析其实一般在任何时候都可以进行,做足市场竞品研究,可以有效帮助我们理解竞品,发现可以使我们产品脱颖而出的机会,同时也可以减少竞品对我们的直接影响。
那么启动竞品分析的几个关键时间节点,新项目启动、项目改版、竞品有重大更新时,这三个阶段去做竞品分析,是相对不错的时间点。

 

2.竞品分析方法

竞品分析方法有很多,在这里,我分享大家能快速掌握并上手使用的方法。通过以下四个步骤,我们可以初步完成一份竞品分析文档。下面我们来看看每个维度如何进行?
(1)寻找合适竞品
挑选竞品是非常关键的第一步,一般需要根据自家产品定位,选择垂直TOP级别的产品几个不同用户群体产品就可以,不需要把所有的都拿来分析。但是除了这个方向,我们还需留意一些潜力较好的产品,比如产品口碑较好、用户下载量增长快,这也是值得我们研究的一个竞品。
挑选完竞品后,我们需要将竞争产品进行分级,比如一级竞争对手,二级竞争对手,细分市场竞争者。因为不同等级,意味着我们花时间会有所不同。最直接竞争产品,当然需要去深入研究。
如果不知道你这个领域那些产品做得好,这里推荐大家一个产品查询的工具Sensortower,可以去看看排名。
图片
https://app.sensortower.com/ios/rankings/top/iphone/us/all-categories?locale=zh-CN&date=2021-09-07

 

(2)定义分析维度
我一直秉承的一个观点,也是在之前一个大师哪里学到,竞争分析切忌大而全的分析,因为越是大范围分析,越是无法分析透彻,从而价值感就会越低。我们在分析时候,需要定义一组关键的维度。
比如,这次竞品分析,只看某个重点功能的内容布局设计趋势,那么我接下来的研究分析中,都只围绕这个主题进行。

 

(3)将竞品进行比较
针对这一步,需要深入挖掘产品核心亮点,要去思考为什么这款产品是这样的设计?同时将优缺点都说明清楚。这里比较推荐的一种方法就是截图进行对比,快速有效。
图片
比如以音乐软件的搜索入口为例,站在用户视角看,这个产品核心功能是怎么布局的?体验亮点怎么设计吸引用户的?视觉质感呈现如何打造?主流表现技法?需要将每个竞品的做法优劣截图对比,并将优缺点写出来。
图片
同时还可以进入到更深层级,比如,搜索不到情感化如何处理的?搜索过程中加载表现方式等?当然,这些差异化打造,还可以看看其他行业做得较好的产品。

 

(4)得出关键结论
关键结论,就是将前面分析的重要要点进行整合筛选,得出最终的产品参考策略,后续可根据这份分析策略可作为产品设计参考点。
这里需要注意的是,竞争分析得出结论,是给我们学习别人如何把用户体验做到极致的?关注竞品如何解决用户体验问题的?品牌穿透如何做?我们完全可以充分利用这些打造自己的产品优势。

 

3.写在最后

大家看到我整篇文章里面,没有提及市场调研分析,用户分析等。网上很多文章讲得特别全而大,我相信有部分设计师看完就很懵逼,怎么入手?因此今天给大家支一个晓招,聚焦一个点分析,但偶尔我们可以适当在拓宽一些维度。好了,本文就到这,大家还需要多去实战练习,才能找到比较顺手的方法。

 

原文地址:功夫UX (公众号)
作者:Tony
转载请注明:学UI网》设计师,如何高效完成竞品分析!

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

截屏2021-05-13 上午11.41.03.png

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

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


B端问答 – 给新手B端设计师的四点建议

seo达人


一、改变固有的思维方式

每个人,在处理自己熟悉的事物时,往往都会有 「思维定势」。我们在设计页面时,会去考虑用户的思维定势,而在处理设计问题时,也是同样的道理。

在与许多 C端转B端的资深设计师 交流过程中会发现,他们在去处理 “问题” 时,仿佛还是按照之前的思维定势。也就导致在工作过程当中遇到诸多麻烦,比如:

  • 领导抱怨其经验不够,但他又是一位从事多年的设计师
  • 在处理设计需求时,只会在乎“表面问题”
  • 在团队中得不到重用,名副其实的组件设计师

究其原因是在C端时代,设计师的口中都是围绕着用户进行展开;

图片

而到了B端时代,我们聊的就不再是用户,而更多是营收,是流程、是业务。

图片

因此在去处理B端需求时,设计风格就一个“表面工程”,并不是说它不重要,而更多是为了服务产品真正的“灵魂”。

回过头去看作品集,我们要求的就不是:你作品集的排版究竟有多好、我选择了什么好看的字体、用了哪些亮眼的配色,而更多是从你的作品集当中,看出你的思考,通过你在交互流程上的调整,产品进而得到哪些优化。

 

二、跳出自己的舒适圈

在自己的舒适圈,可以理解为 安逸”。

安逸这个词,在我一个成都人面前,简直“不值一提”,它既能够表达你对于当前状态的一种赞叹,同时也是对别人的一种羡慕。因为在说安逸时,我们往往只会说别人过得多么安逸。

很多人会认为,跳出自己的舒适圈不就是内卷么?

但是我更愿意把它理解成一种学习态度,因为刚接触到的B端事物,一定是全新的,打破你之前认知的东西。比如 聊低代码产品,我们肯定会去说 对象、布局、配置表单。

而这些东西,稍微延展都是非常多的内容,如果你从事多年B端设计过后,你会发现你越来越像一个产品经理,只是因为大家站的立场会有所不同,所产出的内容会存在些许差异。而如何了解业务?可以看看之前的文章《B端设计师如何快速了解业务》。

当你产生焦虑的时候,就特别想要跳出舒适圈。我自己也是一样,之前上班工作时,每天早上10点到岗,我却在6点50的天府三街沉浸学习,这也能够有充足的时间去做工作以外的事情。

图片

 

三、选择更有潜力的行业

在B端产品当中,行业选择是非常重要的一件事。因为想在这一行业深入发展,一定是需要陪伴企业走过 2-3 年,并且在后续的跳槽过程中,行业属性是你非常重要的标签。可以看到各类招聘信息当中都明确指出行业的重要性。

因此选择一个更有潜力的行业,能够在后续的职业生涯当中,加分不少。这里给你们推荐一些出名的企业与前景广阔的行业(感谢4群同学的分享~):

图片

想要高清图片,可以查看公众号原文, 点赞/在看 原文章,然后截图私信CE青年的微信即可(vx:ceqingnian)。

 

 

四、专注深耕某一领域

看似与上一条重复,但是想要给大家讲得关注点会有所不同。

这里的重点是深耕,因为在与一些工作 2-3 年的B端交互设计师的接触过程中,会发现他们对于自身业务仿佛并不了解、甚至有些陌生。而深耕某一领域,也就意味着你在一个行业有着专家级的水平。而后续的跳槽,也可以通过你自身的实力,快速上手该行业的对应业务。

而深耕虽然会在职业发展的后期带来诸多困境,但是不得不说在B端市场的前期,能够教会你很多分析B端问题的道理。

 

总结

B端设计与C端不同,业务形态上就会存在巨大差异。同时在工作的态度上,不建议大家过于浮躁,因为B端需要较长的研发过程,导致需要你能够在某一个行业深耕,因此在职业发展上,希望能够做出谨慎选择!

 

原文链接:CE青年(公众号)

作者:CE青年

转载请注明:学UI网》B端问答 – 给新手B端设计师的四点建议

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

截屏2021-05-13 上午11.41.03.png

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

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



日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档