1. 什么是数据可视化
把相对复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。
在当前新技术支持下，数据可视化除了「可视」，还有可交流、可互动的特点。数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。
△ 数据可视化作品《 launchit 》，作者：Shane Mielke
作者写了本书，地图上显示了世界各地读者的分布情况及对应人数。
△ 数据可视化作品《 world-drawn-by-travelers 》，作者：TripHappy
国家之间相互连通的旅游路线，颜色越相近的国家，表明两个国家的人们互动越频繁。
2. 什么是大屏数据可视化
大屏数据可视化是以大屏为主要展示载体的数据可视化设计。
「大面积、炫酷动效、丰富色彩」，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。电商双11时大屏利用此特点打造了热烈、狂欢的节日氛围，原本看不见的数据可视化后，便能调动人的情绪、引发人的共鸣，传递企业文化和价值。
利用面积大、可展示信息多的特点，通过关键信息大屏共享的方式可方便团队讨论和决策，故大屏也常用来做数据分析监测使用。大屏数据可视化目前主要有信息展示、数据分析及监控预警三大类。
数据分析类：
△ 图片来源：必应，图片作者：帆软软件有限公司
大屏数据可视化设计原则：设计服务需求、先总览后细节。
1. 设计服务需求
大屏设计要避免为了展示而展示，排版布局、图表选用等应服务于业务，所以大屏设计是在充分了解业务需求的基础上进行的。那什么是业务需求呢？业务需求就是要解决的问题或达成的目标。设计师通过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。
2. 先总览后细节
大屏因为大，承载数据多，为了避免观者迷失，大屏信息呈现要有焦点、有主次。可以通过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展示逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户需要时可通过鼠标点击等交互方式唤起。
规范的流程是好结果的保证。找到一个可参考的流程，然后步步为营，就能避免很多不必要的返工，保证设计质量和项目进度。
关键指标是一些概括性词语，是对一组或者一系列数据的统称。一般情况下，一个指标在大屏上独占一块区域，所以通过关键指标定义，我们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。以共享单车电子围栏监控系统为例，这里的关键指标有：企业停车时长、企业违停量、热点违停区域、车辆入栏率等。
确定关键指标后，根据业务需求拟定各个指标展示的优先级（主、次、辅）。
「横看成岭侧成峰」。同一个指标的数据，从不同维度分析就有不同结果。很多小伙伴做完可视化设计，发现可视化图形并没有准确表达自己的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种情况很大程度就是因为分析的维度没有找准或定义的比较混乱。
上图向大家展示了数据分析常用的4个维度，我们在选定指标后，就需要跟项目组其他小伙伴讨论：我们的各个指标主要想给大家展示什么，更进一步的讲，是我们想通过可视化表达什么样的规律和信息。而上图，可以引导我们从「联系、分布、比较、构成」四个维度更有逻辑的思考这个问题。
当然，上图例举的示例图表都比较传统，在大屏数据可视化中常还有另一类地理信息（常以2/3D地图、地球呈现）出现。上图虽未包含这类图形，但它提供给我们的确定数据分析维度的思路和方法是相通的，可借鉴。
当确定好分析维度后，事实上我们所能选用的图表类型也就基本确定了。接下来我们只需要从少数几个图表里筛选出最能体现我们设计意图的那个就好了。
选定图表注意事项：易理解、可实现。
易理解
可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不需要思考和过度理解，因而选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。
可实现
我们需要了解现有数据的信息、规模、特征、联系等，然后评估数据是否能够支撑相应的可视化表现。
我们设计的图形图表，要开发能够实现。实际工作中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用 Ps / Ai / Ae 这些工具模拟时会发现比较困难；同样的，某些效果设计师用设计工具可以轻易实现，但开发要用代码落地却非常困难，所以大屏设计中跟开发常沟通非常重要，我们需要明确哪些地方设计师可以尽情发挥，哪些地方需要谨慎设计。一个项目总有周期与预算限制，不会无限期的修改迭代，所以设计师在这里需要抓住重点，有取舍，不钻牛角尖、不死磕不放。
多数情况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时，就会有多个设计稿，此时每个设计稿的尺寸即对应信号源电脑屏幕的分辨率。
一般情况下设计稿的分辨率就是电脑的分辨率，当有多个信号源时，有时会通过显卡自定义电脑屏幕分辨率，从而使电脑显示分辨率不等于其物理分辨率，此时，对应设计稿的分辨率也就变成了设置后的分辨率。此外，当被投电脑分辨率长宽比与大屏物理长宽比不一致时（单信号源），也会对被投电脑屏幕分辨率做自定义调整，这种情况设计稿分辨率也会发生变化。所以设计开始前了解物理大屏长宽比很重要。
尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据我们之前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其余的指标按优先级依次在核心指标周围展开。一般把有关联的指标让其相邻或靠近，把图表类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。
很多小伙伴也许没接触过大屏设计工作，但大多数人都应该有 APP 或者 Web 风格定义的经验。我们在定义一款 APP 或者 Web 页面设计风格时常用的方法是什么呢？情绪板。
大屏虽酷炫，但实际上也是运行在浏览器里的 Web 页面，所以大屏设计风格定义方法也同样可以用情绪板来做，这种方法也是目前比较科学的风格定义手段。
上图提供了情绪板应用的脑图，具体操作细节不做介绍，不太了解的小伙伴可以自己找找资料。
编者按：一篇好文帮你扫盲，运用情绪板搞定设计→《该怎么运用情绪板，才能让设计作品更有说服力？》
情绪板的一套流程下来，我们定义的风格基本是科学准确的，可以指导我们执行设计。如果是给甲方做大屏，这个流程也可以让我们提出的方案更有说服力。
根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来说大屏可视化主要有指标类信息点和地理类信息点两大可视化数据。指标类信息点可视化效果相对简单易实现，而地理类信息点一般可视化效果酷炫，但是开发相对困难，需要设计师跟开发多沟通。地理类信息一般具有很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特点，所以对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的情况下可能出现卡顿甚至崩溃的情况，所以这点也是需要提前沟通评估的。
这里的沟通分三个层面：设计师对内沟通、设计师对外沟通、设计师与大屏的「沟通」。
样图沟通环节，最初的样图不需要十分精致，我们可以把它理解为一个「低保真」原型，然后通过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一下子走到终点，然后又大修大改的情况。
因为我们在前几步已经分别确定了页面布局、图表类型、页面风格特点，所以这一步我们需要用尽可能简单的方法 ，把之前几步的成果在页面上快速体现出来，然后根据样图效果尝试确定五方面内容：
跟大屏「沟通」是比较重要也是个特殊的环节，这也是我觉得大屏设计跟其它设计不一样的地方，大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，这里的很多问题只有设计稿投到大屏上才能够被发现，所以这一步在样图沟通确认环节非常重要，有时候需要开发出 demo，反复测试多次。
事实上页面开发阶段并不是到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工作在定义好分析指标后就已经开始进行了，而我们当前的工作是把数据接入到前端，然后用设计的样式呈现出来。
切图与标注
由于大屏实际就是一个 web 页面，所以开发阶段的切图与标注是少不了的。
切图：哪些元素需要切图，怎么切？
一般开发用代码写不出的样式或动效，都需要设计师切图作支持：比如数据容器的边框、小的动效、页面整体大背景、部分图标等。切图按正常网页设计标准切就可以了。
标注：Web页面用什么插件做标注这个大家都很熟悉，我就不多说了。需要注意的是，如果大屏页面需要在不同比例的终端展示，那么此时的标注与开发可以使用 rem 作为基本单位来实现，这样实现的大屏页面在后期会有更好的扩展性与适应性。
这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化。这里主要有两部分工作。
视觉方面的测试（有点像 APP 的 UI走查）：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等情况。
性能与数据方面的测试：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展示是否存在崩溃、卡死等情况；后台控制系统能否正常切换前端页面显示。
1. 字体使用
字体优先使用系统默认字体，需要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。
如果页面是云端部署，需要嵌入字体包时，我们可以使用 FontCreator 这类的软件把那些用不到的字符从字体包中删掉，然后重新打包上传，减小字体包大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。（一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字）
2. 颜色搭配
色彩明度与饱和度差异显著、对比鲜明， 尽量避免使用邻近色配色。
使用深色暗色背景：深色暗色背景可减少拼缝带来的不适感。由于背景面积大，使用暗色背景还能够减少屏幕色差对整体表现的影响；同时暗色背景更能聚焦视觉，也方便突出内容，做出一些流光、粒子等酷炫的效果。
渐变色慎重使用：大屏普遍色域有偏差，显示偏色，因而使用渐变色需要根据大屏反馈确定是否调整，纯色最佳。
3. 页面布局
主次分明、条理清晰、注意留白，合理利用大屏上各个小的显示单元，并尽量避免关键数据被拼缝分割。
1. 设计稿投到大屏上显示效果不佳怎么办？
大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下，我们应该在设计开始前，就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品，然后投上去查看实际效果。因为大多数时候大屏都会存在色彩偏差，这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现，如果不可以，那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面，样图沟通环节及时测试也很重要。
2. 大屏设计定稿后，切图切几倍图？
由于是将我们电脑屏幕投射到了大屏，大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率，正常切1倍图就可以了。
3. 1920*1080的设计稿，投到9000*4320的屏幕上，文字图片会虚么？
看情况，视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流一下。
大屏逻辑分辨率（设计稿尺寸）、显卡输出分辨率、视频矩阵切换器（ DVI ）支持分辨率、大屏实际物理分辨率。
一般后两个是没问题的，大屏跟矩阵切换器是由大屏厂商提供，一般刚好配套大屏。容易出问题的是显卡输出分辨率，我们电脑屏幕分辨率并不是最终显卡传递到 DVI 接口的分辨率，传递到 DVI 接口的分辨率是电脑显卡所能输出的最大分辨率（部分电脑可设置或自定义输出分辨率）。输出分辨率等于 DVI 支持分辨率时显示效果最佳。输出分辨率低于 DVI 支持分辨率，DVI 会将信号放大后传递到大屏，放大的过程中就有图像信息丢失，虽然此过程中有各种算法支持去保证图像尽可能清晰，但算法再好，跟真实图形还是有差距的。此外，多信号源投射效果优于单个信号源投射。对于现场直播数据大屏，一般至少有两个信号源，一个投屏，另一个也投屏但是处于备用状态。
离大屏的距离也影响观感，一般离得近，颗粒感明显，距离稍远，会显的较为清晰。
4. 设计稿完成开发后，发现在大屏上页面有被拉伸或者压缩的情况，怎么补救？
一般来讲，开发只需要对设计图做还原即可。但特殊情况下，比如显示器扩展不正确导致页面被拉伸或压缩，这时就需做处理：我们可以先得到被拉伸/压缩的比例，然后对整体视图做压缩/拉伸处理，再由其拉伸/压缩，这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。另外，了解被投电脑硬件特点，有的电脑可以通过自定义分辨率解决这部分问题。
5. 除自行开发可视化大屏外，还可以通过哪些第三方服务来快速实现？
阿里云 DataV、腾讯云图、百度 Sugar 等。
6. 数据可视化的图表样式可以在哪些地方找到参考？
图表部分的二个库是我们设计师可以打开浏览查看的，这里面所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础上修改。
工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式，是我们设计师不知道的，所以彼此多沟通交流实在太重要了。
数据可视化是一门庞大系统的科学，本文所有讨论仅针对大屏数据可视化这一特定领域，管中窥豹，如有遗漏或不足之处欢迎大家讨论交流。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
文章目录
此前，除了产品名及代言人的形象露出外，产品层面尚未有过明确且体系化的品牌概念传达，因此无既有的概念或相关信息可遵循或参考，需从头理清。
如上所述，由于目前所处阶段，本次将以品牌自身单方面输出为主，因此我们访谈了相关业务负责人，探讨了产品当前在服务层面关注的方向以及力争为用户营造的体验。
同时，我们也想了解用户在使用安居客过程中所形成的总体印象并将其作为补充，因此，抓取了应用市场上安居客用户的正面反馈并从中提炼出高频词汇。
△ 用户评价词云图
通过绘制品牌心智地图，可将以上零散的信息分类及提炼，以此来组织并简化我们对产品品牌认知的心智结构，最终描绘出一幅由品牌内核所延展出的图景，其组成可以是品牌的各个方面，凝练了关于一个品牌之所以是一个品牌的构成。
△ 品牌心智地图
进一步的，从品牌心智地图中提炼出构成品牌的核心部分，分别从品牌功能（Brand Functions）、描述性修饰语（Descriptive Modifier）及情感性修饰语（Emotional Modifier）这三个维度去诠释。
品牌功能描述了产品或服务的性质，即品牌能够向用户提供的体验或益处的类型；描述性修饰语将进一步分类及明确品牌所传达出样貌之性质；情感性修饰语则解释了给用户带来的益处是什么。
对安居客而言，作为连接房地产行业中中介与需求端的平台，其本质上是一个信息服务平台；而由其对信息的深度、广度及有效性的努力以及对信息传达效率的追求可看出，其力求提供的是一种专业的信息服务；结合监管机制的建设力争为用户营造一种可靠、安心的体验。
△ 品牌精髓
小结
通过以上步骤，基本能够逐渐抽象出所要表达之物。可简单将上述过程的目的理解为定义视觉风格的方向。
△ 品牌概念抽象过程
明确所要表现的对象后，便可开始构建从内容到形式这一转化过程，最终构建出契合品牌的设计风格。
首先，尝试将品牌概念人格化，以作为后续推导过程中的灯塔，避免偏离航向。基于所提炼出的品牌精髓，演绎出以下设定：
改版前文案风格分析
现有方案中可窥见以下特征：
△ 改版前文案风格
设计策略
为了贴合所设定的人格化形象，笔者制定了以下策略来调整文案写作风格：
此前，空状态经手不同设计师，且团队中尚无可遵从的写作风格指南，原有文案多少显得混杂零乱，而句式结构也是文案风格的构成要素，因此，笔者尝试构建统一的句式结构来满足现已发现的五十多处以及将来仍会不断产生的空状态在表达时的需求。
将重新设计的所有文案按句式结构的异同分类，从中可发现明显的规律，其对应的正是针对不同场景所使用的差异化策略，对于单独出现的句型，在分析其所属场景及所需引导策略后，判断其是必要句型还是可复用其他句型，最终形成了能够覆盖当前所有场景的五种句式结构，可指导未来同类场景的应用。
△ 句式结构构建过程
风格构建
构建思路：以品牌精髓中的情感修饰语及描述性修饰语作为核心意象，同时解构对应表现形式的形态要素，其后分别以形态要素为对象将核心意象进行演绎。由于品牌精髓所处抽象层次较高，无法直接指向具体表达方式的选择——再以得到的具体情感意象作为标尺，寻求契合的表达方式。
色：将品牌精髓以颜色能够触发的感受为视角进行演绎，并根据颜色与人类心理感知的映射关系确定基本色相范围。
而对颜色具体的定义可在相同的表达诉求下进一步控制色彩要素来获取，如中性色的视觉表现在于色相上的控制，我们通过在色相上加入蓝来获取「高级感」；而由于安居客本身的品牌色即属绿色，因此我们直接选用；对于蓝色，考虑到实际应用时与绿色的搭配，在色相上融入绿色使两者呈现时能够相互融合。
△ 色的定义
形：在实际建构「形」的表达方式与情绪感受的映射关系时笔者发现，不同于颜色的千变万化，「形」在各维度的表达方式上更多的呈现一种二元对立的局面，这种情况下，不对品牌精髓进行演绎亦可对表达方式作出选择。
△ 形的定义
风格应用
色的应用：由空状态设计中对所有场景的意象设定，可对场景刻画中所需的元素进行如下分类：
针对插画，且处于空状态这种非正常场景，当前浓郁的品牌色不便直接使用，因此从明度层面对其进行处理，以得到适用的颜色。
△ 品牌色的处理
人作为场景构建中的组成部分，并非主体，且需要与物形成对比，因此使用白色。
△ 人的颜色应用
物在场景的构筑中承担了以下角色：
对应到结构，分别为：
对于前者，以中性色呈现其主体，主色点缀于次一级元素；而后者，远景作为主要场景元素施以中性色，近景混合应用主色。如此，既保证情绪色的露出，也丰富画面的细腻程度。
△ 物的颜色应用
光影
△ 光照的颜色应用
背景：白色或明亮的颜色更让人有安全感，且我们希望图示能融入界面中，因此设定为白色。
形的应用：元素形状、元素方向、主体占比、主体位置。
元素形状：避免锐利的切角，更多的用矩形及圆形这类相对更稳定的形状。
△ 元素形状定义
元素方向：以水平面或不同面构成的稳定体系为主，避免单独应用斜切面。
△ 元素方向定义
主体占比：占据画面中较大比例。
△ 主体占比定义
主体位置：置于画面中心偏下。
△ 主体位置定义
我们的设计目标是形成契合品牌的视觉风格，若目标达成，用户应当能被具备明确视觉风格的界面激发相应感受，从而可得到如下测试过程：安排被试浏览相关界面，测量其情感感受。
那如何测量人的情感呢？
在对情感测量方法的搜寻中，笔者发现了心理测量（相对的是生理测量）中常用的语义差异量表（semantic differential scale），其由若干表达情感体验的词汇和量尺组成，由用户根据感受程度选取相应的等级，从而获取到情感信息。
最终，可得到如下验证思路：
△ 验证思路
定性研究方法并非如定量研究方法那般天然具备确定样本量的统计技术，目前也尚无通用的技术，业界较为熟知的 Jakob Nielsen 所提出的「可用性研究只需测试5个用户」的说法，由于其限于可用性研究，「测试5个用户」的说法也只是总结性的论述，实际也需酌情判断，因此，为了确保获取足够的数据，笔者尝试寻求更和通用的解决方案，最终锁定在了市场研究公司 Research by Design 的 Donna Bonde 所提出的指南（Qualitative market research: When enough is enough）。
笔者认为其建设性在于：
因此，笔者参照其分析进行了对样本量的设定。先根据实际项目及团队情况，对相关因素进行赋值：
△ 样本量设定
再根据以下公式可得出适用于本项目的样本量：
量尺设计
量表类型：由于对评价对象提供了对立的形象，自然需要使用双级量尺，即要求被试从0点开始向两端方向发展的数值中做出评选。
标度数：设定标度数时需平衡两点，足够精细，充分满足被试表达的需求；控制数量，避免选项太过琐碎。
常用的标度数中，七点评分量表相比五点评分量表能够得到更准确的结果，而11点量表所能收集到的数据虽然最接近正态分布，但对被试来说成本也会随之增加，增大疲劳效应，因此，笔者最终选择了七点标度：
△ 量尺标度数
修饰词：对于量尺的数字，需要通过形容词来赋予意义，否则被试很难进行判断；且修饰词需在意义上和相应数值对应，这似乎很难实现，幸而前人已对不同量尺形容词就其表示的程度水平进行过系统的评估，使得笔者能直接绕过这个问题。
笔者按照所用的标度数，选择了对应能产生等现间距的修饰词：
△ 量尺修饰词
测量对象的语义转化
基于输出的文案风格与视觉意象及其对应策略，可分别确定具体的测量对象，再以此设定能够显示其对立形象的形容词：
△ 语义转化过程
量表结构设计
为了避免语义启动造成被试评价时产生偏差，需将有关系的条目随机摆放，并将褒义词和贬义词分布在量表两端而不是互相集中在一边，以起到语义抑制效果，避免被试在作答前不经思考。
另外，在第一轮测试中，笔者发现不止一位被试在对某一条目评价时混淆了其描述对象，除了其个人认知水平外，某些条目在当前语境下所展现出的描述关系依然不够明确，因此笔者按照条目的描述对象对其进行了分类，并说明其描述对象。
△ 量表结构
关于空状态本身，相对于本文所涉及的其他内容，其作为范式更被设计师所熟识，但在设计策略及视觉表现上似乎又并非如想象中简单。
「空状态」之称乃立足于表现层之观察，其承载的实际是若干种场景，反馈「空」只是其中的一种也是最后一种手段，条件允许的情况下，应当首先考虑如何去引导用户。因本项目落地于空状态，上述其他设计策略不在此展开，下文将详述空状态的设计。
空状态内容
空状态由两部分构成——反馈和引导。基于当前情境的反馈能让用户获悉所发生的事；在此基础之上，还需提供引导以帮助用户完成最终的任务。
反馈：反馈通常由图像与文案组成，其风格应契合品牌调性，其内容除了基本的反馈信息外也应更多地考虑如何引导用户。
引导：此处的引导指的就是最终根据实际情境提供的操作，如无可支持的功能，可以文案形式进行表达。
空状态结构类型
针对安居客产品中的场景，除了完整的空状态结构，对于模块化的页面，由于模块本身的高度有限，在数据为空时，只取描述文案作为反馈，并在样式上弱化按钮使其在当前结构下保持原有的视觉权重，以其为另一种空状态结构。
△ 空状态结构
视图结构类型
空状态本身的结构和布局应当一致，但对于平台型产品，伴随着业务复杂性的是页面结构的多样性，这使得空状态呈现于不同容器中，为达到一致的视觉效果在视觉输出环节就需要针对性地定义布局逻辑。
而上述所谓的一致效果即为空状态模块应当居中展示于所有容器中，但由于空状态模块的重心并非在其物理中心上，因此为达到视觉居中的效果，在将其物理居中的基础上还需在垂直方向上作相应调整。
完整视图：视图的高度随设备而变化，因此使用相对定位，布局逻辑即为将空状态模块相对于视图中心垂直上移固定距离。
△ 完整视图的布局逻辑
模块与列表：对于相近的模块，可统一其高度（无法通用的场景还需另外定义高度），此时可使用绝对定位，布局逻辑即为空状态模块相对容器顶部保持固定距离。
△ 模块布的局逻辑
对于列表，由于其高度不固定，在空状态时常规的处理方式是将空状态置于背景之上或 cell 之中，前者不适用于基于白色背景的空状态设计，而后者的形式与其实际层级关系不符，因此我们最终选择了添加 view 来实现效果，如此就需定义高度来满足此种场景中的所有情况，其布局逻辑也就与模块中所应用的相同。
图示的设计策略核心在于其内容的表达即意象的设定，常规的以空对象为意象的做法，无更多信息传达，亦无助于信息传达，是一种徒增冗余的可视化；以情绪为意象的做法由于其抽象程度和表意当应用于所有空状态，这种重复容易让用户厌烦且无趣；而近来越来越多见的场景化表现形式，设计者对于意象的设定依旧未脱离于上述范畴，更有甚者，一股脑钻进表现形式中不可自拔，竟无明确意象的设定。
基于上述分析，笔者认为更合适的做法是：内容上表现所引导的行为（如有），形式上以场景的构筑间接表达意象。此作法更丰满地引导了行为，表达方式上也更具感染力。
根据场景笔者设定了三类意象：
对于「虚无」的概念，即以写实的方式在空间层面描绘出来，并让人置身其中，营造出一种孤寂的氛围。
△ 「虚无」的意象表达
对于行为及环境，笔者将抽象的概念具象化，以其为意象。以「用户未曾对相关对象发表评论」为例，对事物进行主观或客观的阐述是一种抽象的概念，难以直接可视化，因此笔者将视角落在了行为的表达或实施形式上，从中选择了「书写」这一动作作为意象，同时在构建场景时，打破人和物的比例关系并夸张处理，形成一种趣味性的观感，进一步触发用户的共情。
△ 「评论」的意象表达
其他场景示例：
△ 其他场景示例
定性类验证方法相对于埋点数据这类定量方法附带的优势是可在设计过程中帮助改进设计，因此，整个过程中我们根据测试结果和测试过程中遇到的问题迭代着设计方案以及测试流程本身。
第一轮测试中，被试被触发的情感感知与我们的目标方向相反，且还发现了超出我们预期的视觉可用性问题；文案方面，多组条目用户无法感知（本身为中性对象除外）。
△ 第一轮测试轮廓图
具体分析如下：
△ 第一轮测试结果分析
经过对这些结果和反馈的分析后，我们着手调整视觉表现：进一步地分解插画中视觉表达构成的元素，并探究不同的处理手段与受众感受间的关系，以此摸索达成目标风格的设计策略。并在此基础上，调整对应的形容词词对，使其更的表达对应的情感感受。
△ 迭代前后方案对比
其后，我们选择了几个具有代表性的场景进行了应用便进行了第二轮测试，在得到了命中预期范围的测试结果后，再对其他页面进行了统一调整。
△ 第二轮测试轮廓图
在所有方案产出后，针对整体视觉和文案风格进行了第三轮测试，最终的结果基本都达到了预期，测试到此结束。
△ 第三轮测试轮廓图
1. 明确「品牌精髓」的定义及应用
在撰写此文的过程中，伴随着对品牌精髓产生了更深的理解，笔者对于描述性修饰语及情感性修饰语的定义及提炼方式产生了疑问——如「专业」一词作为描述性修饰语是否会显得宽泛？且由于品牌精髓作为后续加工过程的源头，决定了整个加工过程的顺利和准确，因此，对其的准确理解和应用显得尤为重要。
2. 进一步探索情感转换及其应用
在有形产品设计领域，早在上世纪八十年代初便开始关注人的感性需求及意象与产品设计的形态要素间的关系，并形成了体系化的理论——感性工学，并从日本汽车行业的应用渗透到了日本各个产品设计领域，进而逐渐传播到西方国家及中国等国家。但在「用户体验设计」行业，尚停留在对「情感化设计」一词朗朗上口却又浑然无知的阶段。
而目前业界所「熟知」的 Donad. A. Norman 教授提出的三层次理论——亦是情感化设计领域除感性工学理论外另一个被公认的理论体系，更接近于一种世界观，解决「是什么」的问题，而非方法论；解决「怎么办」的问题。这和 Jesse Jame Garrett 提出的「用户体验要素」在软件产品设计领域知识框架中的定位类似，因此，在实际应用于交互设计与界面设计时还需弥补中间的断层。
借此次空状态改版，笔者在品牌输出的过程中摸索着情绪感受与设计风格的映射关系，形成了初步的构建思路，且在关于感性工程的相关文献中得到了印证，但在风格应用层面，此次只是初作尝试，尚存在很大优化空间。未来，将以此为基础针对界面进行尝试，并在情感转换层面进行更深入的挖掘与探索。
3. 尝试建立视觉情感语义词库
在设计量表的过程中，笔者明显感受到为测量对象设定形容词词对的困难——准确把握测量对象与对应形象间的联想关系，甚至在实际测试过程中基于用户的测试结果和反馈，笔者持续迭代着问卷条目及对应形容词词对的选用。
而以笔者目前对语义差别量表的理解和应用，其作为「测量某一客体对受众的意义」的工具，对于视觉风格的构建将会是重要的设计验证手段。
基于此，有必要寻求并建立一套视觉情感语义词库，以保证量表设计的有效性。
4. 确认情感测试中建立基准线的必要性
在测试过程中，笔者明显觉察到不同被试对相同概念显著的理解差异，大致分为如下两种情形：
这直接影响到数据收集的准确性。
笔者当下的反应是应当对被试先建立基准线，从而能够对数据进行加权处理，但鉴于需要针对问卷条目设计对应的问题及素材，笔者选择了更敏捷的做法——把通过访谈所认定的存在明显偏差的结果作为异常值剔除出最后的统计。
因此，如后期将语义差别量表列入针对视觉风格构建的标准验证方法之中，为保证数据的准确性，有必要对是否加设「建立被试对相关概念理解及程度的基准线」这一环节进行研究和确认。
本文以项目为描述对象，因此，并未冗述所涉及到方法的更多细节（诸如其概念、优劣、使用原则、注意事项等），待时机成熟时我们会陆续输出相关方法及工具（如定性研究中样本量的设定、量表中量尺的设计、访谈中的注意事项、语义差别量表的设计和使用等）的使用指南，包括封装好的文档工具，望能抛砖引玉。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
当你的产品短时间内无法使用时，如断网、跨平台无法分享等等。用户可能会因而产生挫败感，产生焦虑不爽的负面情绪。如何安抚用户情绪？如何拉近用户和平台的距离？如何改善或提高用户体验呢？本期案例，就分享一些有趣的小彩蛋、微交互，让你灵感爆棚！
往期回顾：
如果不是互联网从业者，大概你永远都不会发现百度主页的代码控制台（console）里藏着那条最浪漫的招聘启事。因为只有拥有开发网页习惯的人，才会在浏览喜欢的网站时按下F12 调出网页代码查看。所以这条百度针对程序员的招聘被写进网站首页代码的console里，可谓是绝对精准的招聘广告投放了。
据说这个彩蛋的设计并非百度的独创而是 Google 先使用过的「小心机」，可是由于无从考证，所以小编并不能确定是哪家公司有才华的程序员小哥哥想出了这个妙计（知道的大神麻烦留言告知哦）。
但不得不承认的是，很多时候我们都对程序员有太多刻板印象的误解。那些看起来「木讷无趣」的程序员们认真起来，真的可能是最浪漫的人呢。
Google Chrome 是一款由 Google开发的 Web浏览工具，大气的界面设计、良好的使用体验以及强大的插件扩展功能，使其受到大量用户的喜爱。在完善产品功能的同时，Google 的设计师们也不忘花费一些「小心思」让产品更加有趣味性：在浏览器出现错误或无网的情况下（想试试么？断开Wi-Fi或者拔下网线看看），我们会看到这只可爱的像素小恐龙。
小恐龙出现时是静止的，但只要你按下键盘的左右键，这只小恐龙就会跑起来，而操控上下键它就能躲避路上的障碍物。当出错页面变成可爱的小游戏，原本焦虑不爽的负面情绪好像也就没那么严重了。一旦网络恢复，浏览器会自动刷新到你所要浏览的页面。真的是超贴心的设计了。
小米计算器内置「亲戚计算器」的功能，各种复杂的亲戚关系帮你一键解决。老婆弟弟的妻子应该怎样称呼呢？相信很多人都有过类似的对亲戚关系产生疑问的困扰。
梳理亲戚关系有时候真让人头大，小米手机就很贴心的在系统里自带了「亲戚计算器」。将日常的复杂关系都罗列了出来，真是符合中国特色的计算器设计呢～
「作文纸条」App对于每日信息与文章的推送有着自己独特的设计逻辑，如果推送内容用户当天未读，系统会将推送内容自动移到「废纸篓」里。为了让用户在浏览「废纸篓」内容时，明确感知到被删内容与正常内容的差别，躺在「废纸篓」里的信息视觉上模拟了揉皱纸团的形象。
如同我们在现实生活里，会将写作时不满意的内容从笔记本中撕掉，并揉成纸团丢进垃圾桶的行为一般。将用户熟悉的真实生活里的行为状态，移植到虚拟的交互设计里，会使用户与产品的交互过程更形象生动。
偶然在支付宝的芝麻信用里发现满700分，就可以免押金租用一些数码产品了。觉得很不错想分享这个信息给朋友，就点了一下转发微信好友，结果发现微信不让分享支付宝的信息。
本来分享受限的挫败感让人心情很不好，但当看到支付宝很无奈的提示文案「微信又不让分享了，整个人都不好了」，不愉快的心情立马被逗乐了。相较之前微信分享失败的一串链接，这样幽默的微文案提示真的可爱多了呢～
当初在制作优优网首页的时候，为了不让 hover状态（鼠标悬浮）过于无趣，分别在「灵感频道」「教程排行榜 」「软件排行榜」的 hover状态里设计了不同的3个小表情，而且设计者大有来头，正是人见人爱、花见花开的美丫姐。
她机灵的调整了图标状态后，从后台数据来看，这里的点击确实停驻时间长了一些，相信让用户会心一笑的同时，也拉近了用户和平台的距离感。不妨在你的下一个案例里也试试哟~
登录网站或应用在输入密码时，无论周围环境如何，我们总会潜意识里产生一丝不安全感。B站对于这个问题的处理方式显得十分可爱，在用户登录账号输入密码时背景里的2233娘会出现双手捂眼的小动画。整个输入密码的操作其实与其他应用可能并无差别，但因为有了这个蒙眼动作的心理暗示作用，用户会感到自己的隐私受到保护与尊重从而产生安全感。
drygital设计工作室的网站有着个性又炫酷的视觉与交互效果。团队展示界面的 hover效果，就让人意想不到眼前一亮：当鼠标的光标移到单个成员的半身像时，原本正襟危坐的照片会变成另一张，展示该成员个性或喜好的搞怪照片。
原照片展示了团队成员在工作中严谨专业的一面，而 hover效果呈现的图片则展示了成员们私下生活里幽默有趣、个性鲜明的另一面。这样的设计不仅突出了团队成员的个人特色展示，利于团队的归属感与凝聚力提升，也展现了团队的开放包容与活力创新。
大家都知道 iOS系统的时钟桌面图标会始终显示当前时间，但很少有人关注过时钟图标里秒针的走动方式。在常规状态下，时钟图标的秒针会呈现扫秒式地转动；但当桌面图标处于长按状态的晃动效果时，小时钟的秒针会立马变为跳秒式滴答滴答地走动起来。
据说这个隐蔽的小细节设计是想表达向传统时钟的运行模式致敬的意思。机械钟秒变石英钟，你 get到了 iPhone时钟的小秘密了么？
似信息崩溃，或加载缓慢的问题，在产品实际使用中实在在所难免，一旦出现，用户的好情绪一定会受到影响。在这种时刻，一句生动而有温度的文案就是可以安抚用户情绪、改善使用体验的利器法宝。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
很多设计师根据直觉进行产品设计。虽然大部分情况下是没问题的，但是已经证明了的通用标准可以更好的帮助你从逻辑上构建有理有据的UI解决方案，而不是仅仅依赖于你的直觉。
本文我们将探讨UI设计中的模态通用标准，讨论为什么仅有两种类型的原因，并且分析App和网站在将信息体系结构和用户信息流转换为直观的用户界面是如何失败的，本文将使用“Purrrfect”这个产品来讲解。
两种基本屏幕类型：模态屏幕、非模态屏幕
基本每个可视化窗口几乎都属于这两类中的一个。为了理解模态与非模态的区别，我们首先要定义模态屏幕。
什么是“模态屏幕”？
模态屏幕示例
模态屏幕有不同的形状和大小：
全屏模态视图（左1）
弹出窗口（左2）
气泡弹窗（左3）
灯箱弹窗（左4）
快讯/通知
...
模态屏幕和非模态屏幕这两种类型看起来似乎很好理解，它们都从属于App的主窗口。但是有一个重要的区别：
模态窗口
创建一个禁用主窗口的模式，模态窗口作为前面的子窗口使其保持可见。用户必须先与模态窗口进行交互才能返回父级应用程序。
—— 维基百科
大多数模态屏幕，特别是在桌面应用上可以轻松识别，因为它们覆盖主窗口并且可见：主窗口背景遮罩的弹出窗，弹出菜单和弹出框对话框，灯箱弹框，警告等...
但是移动设备上的屏幕空间有限，这也是移动设备上的许多模态屏幕占据整个屏幕的原因。它们不再保持底层主窗口可见，所以很难将它与非模态屏幕区分开来：
iOS示例：移动设备上的模态屏幕
两者的主要区别在于屏幕的交互方式不同。虽然非模态屏幕允许用户简单地返回到父级屏幕，但是模态屏幕要求用户在返回主窗口之前完成操作（示例中为“保存”）或取消当前操作。
非模态屏幕最明显可视信息便是导航栏（示例中为标签栏）。即使在子级页面，非模态屏幕也允许用户在主导航来回跳转。另外模态屏幕要求用户在再次使用主导航之前必须关闭窗口（示例中为“Save ”或“ Cancel ”）。
为什么要使用模态？
模态屏幕解决了一个简单的问题：用户容易分心，所以有时候必须让用户全神贯注的进行操作。单一的模态屏幕正是要求人集中在单一的任务上，然后再继续其他操作。
“模态通过阻止人们在完成任务或解除消息或视图之前做其他事情来创造焦点”
—— Apple
什么时候应该使用模态？
模态屏幕的规则我们已经了然于胸，与非模态屏幕相比，它能达到的目的是什么，应该在什么样的情况下使用它呢？
试想一下，我们正在创造一个巧妙而新颖的App：“ Purrrfect ” ， 一个小猫数据库，它允许用户上传，查看和评论可爱的猫咪GIF。
资料来源：https：//giphy.com/gifs/tDgXAst2PhIYw
我们App（简化）用户流程如下图所示：用户打开App，进入几个可用选项卡之一（我们的小猫数据库），点击其中一只小猫（进入详细的单一小猫视图），然后点击评论部分（进入评论部分）。
Purrrfect用户流程
另外用户可以在每个阶段执行补充操作。例如他可以在小猫数据库页面中将另一只小猫添加到数据库中，又或者他可以在小猫详情页中编辑数据。
如何分辨模态与非模态，其实没有那么容易，这些只是我个人的经验总结：对自包含过程使用模态屏幕，对其他所有内容使用非模态屏幕。
“自包含过程”是指每个操作都有明确的起点和终点。此操作有明确的时间范围，将用户从一般用户流中移出，让他专注于操作，然后再将他带回到开始的位置。
“需要特定的用户任务，决策或确认的关键信息”
对于Purrrfect App来说，这意味着主要用户流不是模态的。但是特殊的限时操作，如添加小猫，编辑小猫和撰写评论都是模态的。
在用户返回主流程之前，可以取消或保存完成所有模态操作。因此模态屏幕使用取消和保存按钮（或其他类似操作）而不是后退按钮。如果您的后退按钮在非模态屏幕中触发保存操作，您可能需要考虑使用取消和保存按钮切换到模态屏幕。如果在模态屏幕中有两个不同的操作，例如取消和保存，则无意义（因为它们会触发相同的操作）您可能希望切换到非模态视图。在这种情况下，主导航（例如标签栏）也应保持在屏幕上可见。
让我们回到我们改变游戏规则的App，Purrrfect界面如下图所示：
Purrrfect用户界面
在实际情况中，模态和非模态屏幕之间的区别通常没那么明显。例如图像全屏页面在大多数应用中都是模态的，尽管它不是进程或对话框。在一些特殊情况下，模态屏幕可能会承载页面的焦点。如果我们的App屏幕中间是没有其他操作（如编辑或评论）的情况，我们可能使用模态（全屏视图）。但由于它允许用户更深入地进入信息架构并执行各种附加操作（显示注释，编辑 ......），因此它不再具有明确的终点，因此它是主流程的一部分，所以应该选择非模态视图。
设计师有责任了解清楚App的流程，评估某个操作是否应该单独展示，从而决定来模态是否有意义。如有疑问，请记住Apple的指导方针：
尽量减少模态的使用。通常人们更喜欢以非线性的方式与应用交互。只有在获得某人注意、任务必须完成或放弃，以继续使用应用或保存重要数据时，才考虑创建一个模态来连接上下层级。
—— Apple
虽然不需要严格区分模态和非模态，界面也可以完美展现。但是模态的概念深深植根于Apple，Google，Microsoft等企业的界面生态系统中，且用户已经形成了相应的期望值。
如果Apple时不时的违反自己的规则，那么Apple将不会是Apple。例如，新版App Store在“今日”标签中打开亮点作为模态屏幕，但仍然允许用户在屏幕底部导航到下一步（没有明确的终点）。这样用户就可以在模态屏幕内部更深入地导航到其他流程。从推荐以外的其他内容打开相同的App屏幕会导致屏幕显示为非模态屏幕。这将保留标签栏和后退操作（再次单击当前标签栏图标以转到其主屏幕）。
不一致的Apple UI
左边的不一致可以通过....来解决
A：...在非模态子屏幕中打开高亮显示，并带有后退按钮并保留标签栏
B：...一旦用户点击模态屏幕内的链接并继续在App的父级别上的非模态子屏幕操作，从而关闭模态屏幕。
如何使用模态？
现在我们对何时使用模态有了一个大致的了解。那么“我们如何进行设计？”这是目前唯一的问题。下面是对模态屏幕检查后得到的列表：
顶部导航栏始终显示关闭按钮（或“取消”/“丢弃”/“最小化”/ ...）。当用户迷路时，可以轻松关闭叠加层并导航回App的顶层。
iOS和Android上的取消按钮通常位于导航栏的左上角。Android更喜欢关闭/“x”图标，而iOS则喜欢“取消”文本，但是图标按钮在ios也很常见，经常使用ios设备的应该都知道。
一般情况下，iOS和Android上的保存按钮都位于导航栏的右上角。但是这种放置规则在大屏幕设备上是不可取的。所以在屏幕底部固定浮动或页面末端的内嵌是我个人推荐的放置位置。
多步模态
一旦模态对话框由多个步骤或子级页面组成，事情就会变得更加复杂。一般情况下，继续按钮显示在右上角。第二步不会打开新的模态屏幕，而是保留在当前模态屏幕，并在现有模态上覆盖非模态子屏幕。
当在屏幕底部放置主要操作（“保存”，“应用”或“继续”）时，模态第二步的右上区域释放了可选取消按钮的空间。虽然会从左到右跳转，但这种方案仍然比不能在子屏幕上直接关闭更好一些。
动画
截止目前，iOS和Android在模态的使用方面非常相似。但是动画方面并不是这样的。
iOS：动画在iOS中高度标准化。
非模态屏幕从右侧进入框架。标签栏在屏幕底部保持不变。顶部的导航栏也保持不变，但其内容在自定义转换中淡入淡出。此动画还为用于返回的边缘滑动手势提供了基础。
另一方面模态屏幕从框架的底部滑入并覆盖整个界面（新的顶部导航栏）。他们不使用边缘滑动手势，如果没有保存之类的重要操作，自定义下拉关闭手势可能会好一些。
Android： Android上的动画更加的丰富多样。
Google建议在Material Design指南中使用“有意义的过渡” 。Android本身并不区分动画是否为模态或者非模态。
总结
大部分设计师根据直觉来进行产品设计。有时候直觉的确很重要。但是更重要的是要我们需要了解一些通用标准，以便于在特定的时候选择更好的适应或者改变。
在我看来模态的概念是当今应用设计中最被忽视的UX原则之一。跨平台和Web本地混合应用并不能很好的使用模态的指南和规范。但是模态的基本规则你应该了解，以便在必要的时候适应或者改变它。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
我是从十几人的小公司逐步跳槽到目前2千多人的中型公司的，朋友们吐槽的PM傻*、设计当牲口、需求临时乱改等等都经历过，即使现在偶尔也有该情况发生。
如果你真的非常想进阶高级UI设计师行列、想突破底层职业生涯的瓶颈，
请逐渐放弃“你看领导傻逼不懂设计，领导看你傻逼瞎JB设计”的态度。
对待工作的态度绝对是初中级UI设计师和高级UI设计师之间最大的区别；
有朋友说因为他们是大牛，自带“牛逼设计”Buff，拿出来的东西别人第一印象就认可，领导没那么多事；自己在公司里就是个打杂UI，谁都能上来捅一刀，没可比性。
从大湿个人经历来看，任何环境的领导和工作本质上都一样，不可能说看人下菜碟：给高级UI设计师的需求就完美清晰、需求明确，到手就能丝滑流畅不便秘的出稿；
给初中级UI的需求就逻辑混乱、模糊不清，到手是一坨屎还是稀的，握都握不住。
————————我是分割线————————
造成UI设计师高低级别之分的原因一个是能力差距，另一个是处事态度。
首先除工作经验之外的能力都是需要初入职场就主动训练的，这和所处工作环境无关，它不会随着工作年限增长而有所提升，只能有意识的训练才行，包括沟通能力、分析能力、控场能力、分享能力等等。
工作初期不训练自身的主导能力，想着等有经验了、是大牛了的时候别人就认可那是不可能的；等到职业中后期你已经发育不起来了，只能沦为被动型美工，你们肯定也见过30多岁还是底层的平庸程序员、设计师。
初期能力确实有限但一定要敢说敢练，想法无论对错一定要表达出来，这是训练沟通和思考能力；最怕的就是做设计师的有话憋着不说，久而久之连敢想的能力都没了。
————————我是分割线————————
能力差距是高低之分的硬性条件，但成为行业精英的人还是只有那20%的人，处事态度就是决定成就的另一软性条件。
当然不要求步入职场没多久的人就有工作十多年的认知和觉悟，借用华强哥的话：“年轻人不气盛那还叫年轻人吗？”
只是希望能及早的开始矫正工作中的负面情绪，妄自菲薄绝对会造成恶性循环。
心里定位上就认为自己不行，别人当然也会觉得你不行，所以说自信也是搞设计的必备心理素质，实话来讲负面情绪在潜意识里确实会影响你的真实水平。
————————我是分割线————————
从进入行业职场开始，就要树立一个良好的行业价值观和从业态度。
很多从事UI设计的朋友，可能是学校相关专业、亦或培训转行、再或者就是为了赚钱，怎么进入这行无所谓，毕竟移动互联网爆发时给了所有人一块蛋糕；
但是进入后可能发现这一行不那么好做，丝毫不比之前从事行业轻松，更别提在学校的状态了，钱难赚事还多；不过既然从事这个行业，就要受得住压力，摆的正态度，有做到行业精英的觉悟和冲劲，因为你不做还有数十万的人要涌入这个行业等着做。
· Part01 设计流程解析 ·
大部分设计师可能受限于公司环境处于一种被动设计环节里，我们来看下标准设计流程中设计所处的位置：
与设计相关的环节几乎处于流程底部了，这也导致了一个现状：设计师不参与前期工作又或者名义上参与了前期工作，但没有从设计角度提出任何意见，只是被动接受。
虽然很多招聘需求上已经写明了：参与项目前期规划，参与产品需求拟定等等；
但说实话很多人把这个只当作企业招聘的套话模版，其实这是企业真的希望设计师去参与的事，因为这样可以帮助你更好的理解产品诉求，更有效的进行本职工作。
————————我是分割线————————
下图是大湿根据我目前的设计部日常工作总结的设计流程，也是我这里对设计师的基本能力要求；
它其实是一个闭环，不过这里为了容易说明我把它拆开拉直了：
从上图我们可以看到对UI设计师来说，它分为设计流程和设计职能两个方面；
那这里来看一下为什么使用这种设计流程可以减少“需求难、设计难”的尴尬，同时我们也来看一下作为UI设计师，在不同阶段的具体职能有哪些。
————————我是分割线————————
前期职能主要集中于产品阶段和交互阶段，目的是参与到产品整体设计中，从需求层和交互层理解产品功能，并以实际用户角度和设计师角度去考虑产品是否合理。
这里只是给各位一个大纲，具体的交互可用性验证都会在后期内容中详细解读。
————————我是分割线————————
中期职能就是所有设计师的本职工作阶段，大湿这个系列的文章内容多数集中于这个阶段；主要是视觉设计层面的各类设计方法论如何应用于实际工作设计中，这个我们后续也会有很多篇幅去详解，这里不拓展了。
————————我是分割线————————
后期职能才是实际流程中最重要的环节，因为就算前中期规划再好，他终究只是个未面世的概念阶段；一旦实际开发效果把控不好，产品一旦投入市面给用户第一印象不好，想要挽回就太难了，所以作为设计师，一定要时刻跟进着最后的一环。
————————我是分割线————————
不过这里还有一个默认的设计师职场规则：
不要越权，80%专注于本职工作内容，20%参与建议其他环节内容。
也就是说，作为UI设计师，你可以参与到需求环节或交互环节、对其提出建议和辅助修改内容，但不可以横插一杠子去干涉其他环节的工作决定。
所以如果目前你现在处于被动接受型状态，那可以开始尝试改变现状。
本意不是要求你去改变现有公司的状态和环境，这也不是作为设计师能轻易改变的；
而是说要开始培养对UI设计师自身的一个认知和定位，从而培养主动性。
那也有朋友说了你就会在这瞎JB扯，我们公司没有PM、交互，都是老板直接说要做个什么什么，然后需求、交互、设计都自己一个人做了，你说这有屁用？
这我就觉得奇怪了，这公司都这样了你还坚持干嘛呀，我写这个系列的目的不就是帮有需要的朋友早日进入资源更好的环境吗？
· Part02 设计方法论预热 ·
下图是我们团队工作中实际用到的设计方法论，现在不需要了解具体内容，
因为后续文章就是要向大家阐述这些方法如何结合到实际工作中的：
朋友们可能有疑问：我不是设计师吗，弄这些方法论干嘛，我又不是PM，会做图就行呗。但其实这是目前市场对高级设计师的要求，不仅要有视觉设计能力，更要有数据分析能力；
从13年互联网爆发、万众皆UI的盛况；到如今18年，热度褪去行业清场；但凡是能留下来的互联网公司都摸清了如今环境下怎么去更贴合用户口味，从市场中分一杯羹；
对设计师的能力要求也由13年的会做图标给8K，到现在七十二般武艺样样会的境地，这其实和冰山原理是一样的，视觉表现层始终只是水上的一小部分，需求分析和用户体验可用性才是水下的重头部分，如今的企业如果真的想站得住脚，只能在这方面进行竞争，市场就这样，想立足的我们也没办法只能跟着前进。
你从之前的专注视觉式工作到如今的数据、场景、用户分析式工作势必会觉得很累，但这是一个必经阶段。
————————我是分割线————————
方法论主要结合着上文的工作流程来看，是不同阶段使用不同的理论指导：
这些方法论具有模版性高、通用性强的特点，可以复用到任何产品的设计分析中；
不需要对每种理论都理解透彻，我们本职是设计师，对设计常用理论吃透就可以了；
掌握其他相关理论只是为了更好的帮助我们去理解和配合其他环节工作。
像“五导家”是阿里提出的产品设计流程，也是总监来之后时刻向我们经常灌输的，作为产品设计流程的总体指导理论；
5W1H需求分析法能帮助我们更好的挖掘用户实际需求，当然这是PM常用的理论，但作为UI设计师也是我们日常工作中常用到的方法；
KANO 模型是狩野纪昭发明的对用户需求分类和排序的工具，延展出来的有“十字分析法”，在分析页面内容、主次排版时使用非常有效，这是交互和UI常用的理论，上文的设计流程中期职能也体现了对应的应用。
当然我们这里还要清楚的认识一点，大湿从来不认为设计师是理论派：
学习的所有理论知识目的都是为了经我们手设计的产品体验更好、作出的设计稿更加站的住脚。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
今年互联网行业已步入了寒冬，整个行业大规模的裁员。美团、拉勾、阿里、京东等公司均不同程度的“缩招”与裁员，预计会持续到2020年。时代发展很迅速，社会很残酷，永远不要认为危机离自己很远而安心地一直停留在舒适圈，因为当时代抛弃你的时候，并不会和你打招呼。面对环境的波动，最好的方式就是保持危机感，面对变化接受变化，并不间断的学习。
——“在这个变幻莫测的时代，别只顾着低头拉车，更要抬头看路。”
文章一共分为三个部分，它们之间的关系是循序渐进，逐层深入，又相辅相成。所以大家读的时候，希望能够融会贯通。
第一部分：设计行业的发展趋势
我们正经历着巨大的商业模式变革与互联网转型，在这样的驱动下，设计师所承担扮演的角色也会发生变化。根据设计价值，设计师被划分为更靠近产品的UXD（User Experience)、以及在UXD基础上提升出与业务更密切的UGD（User Growth Design)，最后就是更偏纯视觉的VD（Visual design)。那么在新的转型中，设计师应当如何去打造自身的价值呢？
本文主要探讨偏产品与业务方向的UXD与UGD。
一、设计与产品的关系
以前，设计师在团队里的位置会比较尴尬，因为没法验证自己对业务的推动是否产生了什么明确的价值。而大数据的来临，设计的价值变得显性化，作为与用户关系密切的设计师，善用好数据，可以发挥的作用其实很大。我们可以通过自己的设计思维与专业能力，为公司创造更大的价值，不单只是一个美观的输出。这就使得设计与产品业务关系越来越密切，是整个行业发展的必然趋势。
举一个设计以小成本提高业务的实例。这是我之前做的两个双11活动运营位的入口图。在改动前banner点击率大概是不到16%，改动后提高到了40%，不消耗任何其他人力、物力成本，就可以用设计让CTR翻倍。
设计目标：提高首页banner与入口图的点击通过率
现有问题：利益不突出、视觉点不够集中、缺少点击动机
改进方案：1、简化文案突出利益点；2、增加商品推荐提高命中率；3、用抢的动态按钮引导用户点击；4、用动态gif吸引用户。
二、找到自身价值的重要性
前几天帮一个朋友招设计，面完后朋友问我的意见。我说手活可以，执行也没问题。朋友打断我说，除了基本的专业技能外，是否还能为公司带来更进一步的价值。很遗憾，这位设计师因缺少或者没法证明自己有更高一层的价值，未满足职位要求，最终没有拿到offer。尽管我试着为她辩解说插画画的还是很漂亮的。PM回我一句，我们不是招插画，我们有更专业的插画师。
像这样的案例比比皆是，在我看了近百份简历，面了不下十个设计师后，我觉得有必要跟大家分享一下设计师找到自身价值的重要性。而这个价值，不是我们觉得，而是要让企业觉得我们能带来他们需要的价值。
的确，很多招聘帖上会写：会插画、动效可以加分。但我们必须得明白，加分是满足必要条件之后才去考虑的。如果是去年，你也许会因为有这样的差异化优势而拿到一份还不错的offer，但是今年，10份简历中有8份都会插画，其中至少有3份以上画的还挺不错。所以这个优势就会被大大削弱。并且形势变了，公司更看重我们的设计能给产品的发展带来多大的价值。
第二部分：了解设计师的价值分层
设计师的价值可以分为以下三层：设计协同、设计推动业务增长、设计驱动产品。
第一层：设计协同
一个出色的执行者，能够在拿到需求后又完美地实现落地。简单地说就是手上功夫好。
做好这个阶段需要有优秀的专业能力，良好的沟通能力，并参与到产品的探索与构思中来。
第二层：推动业务增长
这个阶段的设计师，会比上一个阶段更能体现设计师的设计价值，并对产品产生一定的影响力。能在以用户为中心的基础上，推动业务的增长，所以这个阶段的设计也被称为UGD（User Growth Design）。
需要设计师具备用户洞见力，数据分析能力，从这两个维度出发，去熟悉业务、分析业务，从而推动业务。这个阶段的设计师，也是市场最需要并且很稀缺的。
第三层：设计驱动产品
这个阶段的设计师，在团队中的价值可以说是非常大了。从被动的需求接收方，转化为从战略层，能主动提出需求的一方。做到这一点的设计师是非常了不起的，也是我们UXD发展的终极方向。
第三部分：设计师需要具备的哪些思维？
一、从AARRR转化型漏斗，培养增长思维
设计师需要去深入探索产品本身，熟悉业务，熟悉用户。增长黑客里有一个“AARRR”流量转化漏斗型理论，就是根据不同阶段的用户参与行为的深度和类型，将我们的整个目标拆分概括为：acquisition(获取用户）、Activation(激发活跃）、Retention(提高留存）、Revenue(增加收入）、Referral（传播推荐）。在整个漏斗中，被导入的用户在每个环节都会出现部分流失，最后层层深入到达底层的，实现最终转化。
通过产品生命周期，设计师可以运用自己的设计思维和专业技能，将每一层的漏斗直径做到最大化，减少用户的流失，抵达下一层的用户就会更多，从而提高最终的转化。
二、运用GSA思维模型做设计
什么是GSA？
GSA分别代表的是：目标（G=Goal），策略（S=Strategy）,行动（A=Action）
举一个通俗易懂的例子，比如我想减肥，这是我定的目标（G)，然后我的策略(S)就是少吃多动，最后具体的做法（A)就是，不吃晚饭、每天运动2小时。
如何在具体项目中体现呢？下图，运用一个具体项目举例：
GSA的特点是“以终为始”，优势在于可以帮助我们快速聚焦到最能帮助我们达成目标、杠杆率（也就是投入产出比）最高的Action上。
三、培养数据思维，利用数据提升设计的价值
项目与需求上线后，设计师一定要去验证自己的设计是否有效地达成了目标。这个时候你就需要去看数据反馈。没有数据就就没有比较，没有比较就不能进步。
关于数据的用处有很多，举个例子，当两个人对各自的方案争执不休，分别觉得对方不好，但站在各自的逻辑上似乎都能说得通，那怎么办呢？分别做一个A/B测试，数据不会说谎，哪一个方案更有效，一目了然。
那么如何将数据结合到我们的设计中呢？首先在设计前,我们需要先定一个目标，而每一个目标就应有一项对应的数据指标。比如，提高了某一块的CTR（点击通过率），提高CVR（转化率），提高商品曝光、1/7/15/30日留存率等等。方便之后去验证自己的的action是否完成了自己的Goal。
拿到了数据之后，还需要分析数据。不管是有没有达到目标，都要去分析原因，进行复盘总结。复盘的好处是可以让我们在这一次项目中吸取有价值的经验--失败了就找失败的原因，方便以后避开同样的错误；成功了就分析成功的原因，并将成功的策略复制运用到今后的工作中，增加以后的成功率。如此，不管有没有成功，都能给我们带来最大化的价值。我们也会更加的接近用户、接近产品、接近业务。从而帮助我们进一步洞察用户、挖掘新的需求。
小结：
以上就是今天所要分享的全部内容。再带大家回顾一下，一共分为三部分：第一个是了解设计师的发展趋势，第二个是趋势下的设计师价值分层（设计协同、设计推动增长、设计驱动），第三个就是在价值分层的逐步递升中所需要培养的用户洞察力、GSA的策略、数据增长思维等。
最后提示一下大家，阅读的时候多融会贯通。另外，方法不是唯一的，要懂得去掌握方法的方法很重要。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
在互联网快速发展的进程中，越来越多人将个人财产、隐私、数据，以及心理安全都存放在产品平台上。这么一来，想要产品获得用户芳心，让用户用得放心，不仅要为用户提供安全可靠的保障系统，也要将安全氛围显化传达给用户。那么，可以从哪些方面着手设计产品，提升用户安全感呢？下面一些案例，会从新的角度给你灵感。
很多时候我们可能只是心血来潮想尝试一下某款app，并没有注册帐号长期使用的打算。所以每当打开的应用，如果出现强制要求注册，才能开启使用的情况，真的会对产品的体验好感全无，甚至怕麻烦放弃使用。一些产品会提供「游客」身份试用简版「会员」享全部功能的选择给新用户，这无疑是一种体验不错的方案。
但如果受限于功能使用，或者就是要提高产品的用户量，必须引导注册，该如何减少用户的反感情绪呢？
最近爆红的ZEPETO的登录界面就很值得借鉴。用「制作ZEPETO」和「已有ZEPETO」的文案，替代生硬的「登录」与「注册」。相同的功能设计，但因文案传达情绪的不同给人带来不一样的感受。
「制作ZEPETO」几个字不仅直白地说明了产品意图，还悄悄将「注册」转化成了用户制作ZEPETO过程的一部分，无形中降低了用户对强制性注册的心理防备。
为了吸引粉丝，短视频的作者会争相模仿，一些观众用户也会因为有趣去体验尝试，但很多视频里的体验和动作都是存在安全隐患的。为了规避风险，「抖音」里某些视频的下方会提示：「效果未知，请勿轻易尝试」或者「该行为存在危险，请勿轻易模仿」。
如果刷「抖音」时长超过五小时，也会提示看视频时长并提醒用户注意适当休息。这些小提示的出现，都是出于对用户健康安全着想与负责的引导，也是产品团队规避责任与风险的方式。
用户在进行语音交互时，想取消当前操作的概率非常大。如果系统按照错误的指令执行，会给用户带来挫败感。「支付宝」的语音交互会根据用户当前的手势进行操作提醒，以减少用户的学习成本。
不存在干扰或打断用户操作行为进行的强制性，又能给予用户对当前操作进行修正的机会。让用户轻松胜任操作，利用「控制错觉」打破用户对不熟悉操作的顾虑与恐惧感。
对于大多数团队来说，敏捷开发时间短任务重，在有限时间内并不能把所有功能都上线。「微信」团队在订阅号里，添加了未开发功能提示。
当用户长按文章时会出现toast提示，用特定的交互与简要文字说明提示用户「功能正在开发未上线」。
「工具提示」往往出现在新用户引导流程，但微信团队将它用在了未完成开发功能的提示上，让用户对之后上线的功能产生期待感。
在支付宝的「我的」页面中，「总资产」的后面会显示绿色的「账户安全保障中」的文案。同样的，「财富」页面的「总资产」项后面也会显示「保障中」的微文案。不断出现强调资金安全性的文案，其实是支付宝在通过细节设计提升用户在使用产品期间的安全感。因为当涉及金钱交易时，用户都是极其慎重与不安的。
所以产品不仅要为用户提供安全可靠的保障系统，也要将不可见的安全氛围显性化传达给用户。通过界面细节，比如文案展示出产品的安全性，能借助心理暗示的作用缓解用户内心的不安情绪，增强对产品的信任感。
「即刻」app对于用户评论的审核机制十分具有萌点：如果用户在发表评论的内容中，包含不友善或具有人生攻击的词句，系统会自动弹出模态弹窗，提醒用户修改留言。如果用户依旧不愿修改言论并坚持发布，评论内容是可以发布成功的，但言论中包含的不符合平台规定的字眼会被系统强制修改。
比如在发布的评论中包含具有攻击性的词语「智障」，发布成功后会被系统修改为「大笨蛋」。没有强行阻断用户的评论行为对用户造成评论失败的挫败感，又巧妙化解了不友善言论的发布,维护了社区的和谐。将所有负面甚至不文明的言论全都自动过滤强行变萌，设计出这个审核功能的小哥哥或小姐姐一定有着一颗敏感又温柔的心吧～
「恐惧症」是一种以恐惧症状为主要临床表现的精神类疾病，指对特定的人、物或场景有按耐不住的焦虑、紧张甚至是恐惧的心理。如果在「百度」搜索含有「密集恐惧症」、「深海恐惧症」等类似关键词的图片，会在呈现完整加载结果前出现遮罩遮蔽图片，并用文案提醒用户图片可能引起不适请自行选择是否继续查看。
由于无法确保浏览内容的用户是否具有相关病症，强制性阻断操作给予提醒并将是否继续的选择权交与用户，算是对用户的使用体验很用心的考量了吧。
对于上班族而言，每天吃什么简直是个世纪难题。面对海量的店家及不同的组合优惠，常常挑花了眼，还是无从下手。如果你也存在这样的问题，不如来试试「美团外卖」新推出的「满减神器」吧。
针对店家的优惠特点，系统会提前帮你罗列出最佳的优惠选择。不仅会标注出各个套餐近期购买的人数，还会优先推荐「高回头率」的套餐选择。解决了选择困难的痛点，让用户吃得实惠又省心。
「支付宝」与「微信」早在几年前就推出了「延时到账」功能，但由于入口隐藏较深使用的人并不多。更重要的是即便中途发现被骗，也无法立马撤销交易，一旦延迟转账超时钱，还是会直接打到对方账户。而这一次新版「支付宝」联合警方优化了反诈骗的流程，对「延时到账」功能的升级可谓是真正解决了转账安全的痛点。
对于选择「延时到账」的用户，如果在到账前发现被骗，虽无法自行撤回款项但只要上传报警的相关凭证，这笔转账就会被临时冻结。一旦警方判定被诈骗的情况属实，用户的转账就能原路返回转出帐号了。更贴心的是，即便用户没有进行「延时转账」操作，当「支付宝」的风控系统识别到转账存在风险（比如对收款方账户的交易历史行为存疑）会自动提醒用户进行「延时转账」。
今天在用「美团外卖」与商家进行联系时，发现了一个「加密号码」的弹窗。当你确认联系商家后，会出现语音提示：「美团外卖保护你的隐私，商家将不会知道你的号码」。这个小细节很赞是因为在保护了用户隐私的同时也通过语音提示在用户心中强化了平台的安全性与贴心。
以前如果用户给商家差评了，很有可能会接到不少商家的骚扰电话，造成不好的产品使用体验。因此团队设计了「加密号码」的功能，加强了用户隐私的保护，让联系商家变得更安心无负担。
1、ZEPETO是如何做到强制用户注册，却不让人反感的？
2、「抖音」的另类温馨提示，规避责任和风险
3、好的用户提示能给用户增加「安全感」
4、适当的「工具提示」,能增加用户的期待感
5、怎样向用户传达隐性的安全感？
6、「即刻」让社区不友善言论自动变萌的魔法是什么？
7、也许你都不知道，自己会有「恐惧症」
8、替用户做决定，不一定是坏事
9、转账也终于有「后悔药」可以吃了
10、美团外卖上线「加密号码」，让订餐更安心
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
是什么让你选择进入设计行业？能否讲讲你的成长经历？Steve Wolf：
很幸运，在我的成长过程中，我的家庭非常支持我。我记得在5岁的时候就开始跟着父亲一起画画，有时候我会让他给我画一些东西，然后我就跑开了，自己去画它。我的父母都是音乐老师，所以音乐在我成长中对我的影响也很大。
△ AFE
大约在高中快结束的时候，我就决定做一名工业设计师。我自己设计汽车，于是我就在内布拉斯加大学卡尼尔分校学习艺术、CAD和素描课程。大二的时候，一个平面设计教授邀请我参加一个平面设计的资讯会议，当时我对平面设计还不太了解，参加这个会议改变了我的人生轨迹，这之后，我的职业愿望从一个工业设计师改为平面设计师。
△ Bloody Mary Morning Poster
2011年，大学毕业没多久，我搬到了达拉斯，在一家 Panini America 的体育球星卡公司担任设计师，开始了我的第一份工作，在这里，我为NFL，NBA，NHL和MLB设计了球星卡，并成为艺术总监。四年后，我想要做一些改变，所以和妻子搬到德克萨斯州的奥斯汀，在那里我在GSD＆M（GSD&M是美国德克萨斯的一家广告公司，成立于1971年，客户包括美国空军、西南航空、凯撒赌场及酒店集团等）广告公司担任高级设计师。快进到今天，我和我的妻子目前经营自己的设计工作室 Steve Wolf Designs。
△ working
在成长中，增加了设计经验，同时我也犯了很多错误。但作为设计师，重要的就是不断的尝试新的风格，看看什么最适合你。直到今天，我依旧在努力提高自己的技术，并在我的工作中尝试新的风格，只有这样，我才能够一直保持进步。
优设：
以一个案例为例，能为我们讲解一下设计过程么？
Steve Wolf：
Blueprint 是有史以来第一个全球性的学生运动员发展数字平台/社区，集数字媒体、学习、资源、工具和指导的独特融合！他们的使命是关注学生运动员的整体发展与健康。
△ BluePrint
在与客户进行沟通时，首先要确保了解他们是谁，以及他们想要什么样的效果。在这个阶段中，应该从客户那里获得尽可能多的信息。我看到简报中的主要讯息是：这个品牌的核心价值观是社区化、指导性、自我发现与灵感。该品牌的视觉设计是为了吸引各年龄段的学生运动员，包括年轻和年长的。我拥有的信息越多，我就越有能力确保达到他们的期望并提供更有意义的工作。
△ BluePrint
△ BluePrint
△ BluePrint
在与客户进行初步对话之后，我开始了情绪板阶段：收集设计，颜色，类型和摄影样本，以创建可以进行设计的可能方向。我向客户提出了1-3个方向，这有助于我们所有人都能在风格上找到相同的页面。一旦客户批准了情绪板，我就开始研究阶段。
△ BluePrint
在研究阶段，我查找竞争对手的标识/品牌，以确保我知道目前使用的是什么。我总是想努力创造出一些在竞争中能够脱颖而出的东西。我也研究别的设计实例，以帮助我获得灵感。在研究阶段，查看设计书籍、博客和 Pinterest 等内容可以起到作用。
△ BluePrint
研究完成后，我就会开始设计。根据项目和工作范围，我通常会向客户提供1-3种选择。我们项目的大多数初始「草图」通常直接在 Illustrator 中完成。初步设计探索完成后，我开始完善最终选项以呈现给客户。并确保我不会进行无休止的修改。
△ BluePrint
一旦客户确定了一个方向或者方案，我就开始改进，并准备最终设计方案。这个项目经过了几次修改，但最终的结果是让客户满意，这是每个人都为之自豪的事情。
△ BluePrint
△ BluePrint
对比鲜明的色彩的搭配受到了体育产业的启发，并且对希望加入这个社区的学生产生吸引力。 字母「B」的造型作为了 Logo 的标识，可以在整个品牌中使用全彩色或黑白色。
优设：
在你的设计中，客户的想法起到什么作用？
Steve Wolf：
它在整个过程中占比较大的部分，当然也会影响最终的结果。每一天的结束，设计师的工作都应该是把客户的想法变成现实。
△ Degrees Of Perfect
在Steve Wolf Designs，我们将重点放在与客户直接合作以获得最佳结果。通过与客户的对话，收集有关他们的想法的更多信息并提供新的观点，可以将他们的想法提升到一个新的水平，并使他们更强大。
优设：
您在设计过程中软件操作与草图部分是怎么操作的？
Steve Wolf：
我在整个作品中使用 Adobe Illustrator 最多。我发现它是我工作中最强大的工具，我喜欢用它工作。我也经常使用 Indesign 和 Photoshop。
△ Herb Lester
我不会直接在纸上涂鸦，而是直接打开 Ai 来绘制草稿，当然他们达到的目的是一样的，一旦确定一些好的选项，我就会将这些选项进行细化，然后实现它们。
优设：
在进行不同语种的 logo设计，会有什么不同么？
Steve Wolf：
如果是其它语种，那肯定是一项挑战，但它不应该成为设计的障碍。我的母语是英语，所以如果我的任务是设计一些使用中文字符的东西，首先我需要确切的图像来表示字符需要的样子，保持可读性，这样我才能设计出适当的 logo。
△ Otto Cafe
这一切都是为了清楚地传达一些东西，所以找一些能讲或者读这种语言的人帮忙是很有好处的。
优设：
您的设计灵感一般来源于什么？
Steve Wolf：
我受到平面设计行业以外的一些启发，比如烹饪、旅行和美术。我喜欢看烹饪节目和欣赏美食，这本身就是一种艺术形式。厨师准备食物和掌握工艺的方式能够激发我，并应用在平面设计中。
△ CAFE BAR
每当我到不同的城市或国家旅行时，我总会感到神清气爽并且有动力去创造一些东西。沉浸在不同的文化中，看到我从未见过的建筑和自然之类的东西，总能激发我内心的新想法。
△ Nature Preservation Series
最后，美术，特别是绘画，一直在激励着我。我在大学期间实际上专注于绘画，所以它在我的创作中占有特殊的位置。在绘画中创造的形式和颜色总是激发我尝试新的东西。
优设：
你觉得优秀的 Logo 应该是什么样的？
Steve Wolf：
好的 Logo 应该起到这样的作用，它应易于阅读并传达客户提供的行业或服务，它也应该是令人难忘和独特的，以便它能够脱颖而出，当然确保 Logo 适合其预期用途也很重要。
△ Austin
我尝试将所有这些内容融入到我自己的工作中，并且在创作过程中，我会时不时的进行判断和考量。
优设：
您的典型一天是怎样的？
Steve Wolf：
我的一天从咖啡开始。这成为了我们每天上班的动力源泉。查看并回复电子邮件后，我开始处理工作项目。我的工作时间每天都有所不同，这取决于我的工作量或我需要在一天中完成的任务。有时候我工作得很晚，有时候我可能只需要工作几个小时。只要我完成工作，我就会保持灵活性。
△ working for BigCommerce
我和我的妻子离开我们的家一起去工作，真的很有趣！
优设：
有什么建议可以给正在学习的设计师，您有推荐的书或网站么？
Steve Wolf：
我最喜欢的一些关于设计的书籍是 Alina Wheeler的《全品牌识别设计》（Designing Brand Identity），Robert Bringhurst的《印刷风格元素》（The Elements of Typographic Style），Josef Albers的《色彩互动》（Interaction of color）和Josef Müller-Brockmann的《平面设计中的网格系统》（ Grid Systems in Graphic Design）。
△ Pattern
这些都是刚开始学习设计时值得阅读的好书。 Skillshare 对于有兴趣了解更多设计的设计师来说也是一个很好的工具。他们提供在线网络视频，其中包括教授各种知识和技巧的设计师。专注于学习设计过程的视频会非常有用。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
能知道产品改进的工具，先上车吧！
某个时间我们下载了许多优秀的APP，定了伟大的目标“每天赏析一款优秀产品，学习前沿的交互和视觉风格，努力提高自己的审美和眼界，确保在工作中能迅速找到参考^_^…”
嗯，相信大家都有过类似的做法（不管你信不信，反正我信了）。自觉更新自己审美和眼界，值得表扬啊!（先给一颗糖吃）但是，时间一长你会发现 索 mei 然 luan 无 yi 味 si、没有突破，基本每个设计点都有共同的理论支撑，而且每次赏析只能停留在基本的交互体验和视觉风格上。
没有强大的数据支撑，不知道为什么这么做？只知道设计理论 却不知产品现状？只能看到“点” 却不知“面”的精彩？竞品的优劣势有哪些，我们应该如何改善？不知道？因为你没有做深度分析！
下面开始梳理我最近学习《产品体验报告》的一些心得，先上车吧，老铁！
一、什么是产品体验报告？
产品体验报告，是体验者在深入了解某个产品的商业模式、目标用户、使用场景、市场现状、产品功能、交互体验以及视觉风格，同时还包含了竞品主要功能的对标，是先有深度再到广度的分析报告，是全方位总结出来的图文报告。
这里的“体验者”可以是：运营、产品、交互、UI等产品相关人员，现在已经不局限于产品经理做报告了，因为行业需要多元化人才嘛，同时也为你跳槽、转岗、晋升打好基础嘛（重点是为涨薪带来机会）~
既然是一份图文报告，就必须具备可呈现、可阅读、可传承的相关条件，类似于我们的工作总结、项目复盘等，产品体验报告也有特定的输出框架和规范。
二、写这个有什么用？
· 一般利用产品体验报告来指导产品改进；
· 用于加深对目标产品和目标岗位的了解，深度体验相关产品是必备流程；
· 也可以用于新入职或应聘时，为了摸清自身产品以及竞品而进行的研究分析、面试时也能证明你对该产品做了充分准备；
· 当然也可以用来了解一些新生产品、感兴趣的产品，拓展产品思维、设计思维。
产品体验是一个常规的手段，也是一个必要的流程，只有随时随地做到对行业，市场，用户的了解，才能在关键时刻提出合适的解决方案。
三、前期准备
熟悉产品&体验产品
熟悉APP是做报告的基础，可以根据自己的经验、看法，去体验它，感受它的优劣势。正如前面所说，这个优劣势不光是停留在视觉、交互方面，还可以包括核心功能、特色功能等，甚至是战略层面的。每个人都是用户，所以不要怕判断错误，大胆去感受、去思考、去提意见，然后把你的想法记录下来，零零散散的笔记没事，后面再统一整理，第一感受是最真实的。
在记录想法时候，最好把你的理由罗列出来：哪里好、哪里还可以优化、我应该怎么做？这个记录好了，后面写报告的时候会很轻松。当然也不要闭门造车，尽量和身边的产品人员共同探讨，发掘他们对产品的看法，或许能收集到你遗漏的点。
如果是你参与设计的产品，那直接把你之前的设计思考和建议 复盘即可。
收集&整理资料
资料收集是一个比较繁琐的过程，需要多渠道去发掘信息，并把他们串联起来再分类，相信收集过后会对整个产品的战略层、范围层、结构层、框架层、表现层（用户体验五要素）有大致的了解，后面会根据这5个层面做产品解剖。
收集具体层面：需要了解APP的市场反馈：各端下载量、使用评论，以及这个APP有哪些竞品，这些竞品的相关数据又是怎样的。
如何获得数据？可以通过：手机应用市场、APP Annie、神策数据等数据网站来收集。很多自家产品还有内部研发的“数据观象台”，这些都能记录留存、转化、用户特征、行为、点击事件等重要数据，是产品报告中的有力证据。
收集宏观层面：可以直接通过公司官网、产品介绍、招聘网站、用研报告、运营报告等方式收集
分析资料
可以在写报告的时候同时进行。如果提前做好初步的资料分析，将会提高后面写报告的效率。
分析具体层面：
（1）根据用户的评论反馈初步判断，提炼关键信息点进行分类。同时可以查看竞品的用户评价，两者之间做对比，分析为什么会出现这些优势或差距；
（2）竞品的行为数据我们基本看不到，是人家的产品机密，我们主要是自家产品的行为数据，竞品只是参考意义；
（3）最后可以从功能、交互、视觉、运营的维度思考如何解决问题并优化，把这些都记录下来。
分析宏观层面：
根据搜集来的产品的背景、新闻、研究报告等信息进行分析，提炼其中的重要观点，然后把这些观点按照“用户体验五要素”归类，把搜集来的观点和自己对产品的想法进行碰撞，记录思考过程。
推荐工具
为了便于共享、传播及图片处理，产品体验报告通常以PPT的形式记录，因此我比较推荐的排版工具有：office PPT、Keynote、Axure、Mockplus、Sketch、Ps、Ai。
注意：制作一份产品体验报告，你要面向的是企业高层、上级领导、面试官、产品团队的同事、客户等，所以需要结构清晰，排版精美、简洁，这样才会让人很有读下去的欲望，正如文章开头所说：可呈现、可阅读、可传承。特别是自己以设计师的身份拿出报告的时候，排版是否精美、信息主次区分是否明显，也是对自身专业性的一种考量（文章最后我会分享一些简单的模板供大家参考）
四、输出框架
讲到这里，准备工作就已经做的差不多了，现在我们开始规划写作思路。下面列举的是比较全面思路，可根据现状自定义框架（重点是产品分析那一步，绿筛那部分）：
五、体验环境
六、产品背景
产品背景可以结合上面宏观层面收集来的资料加以描述，尽量保证描述的逻辑性，要让现状、痛点、价值、目标一目了然。不要记流水账、也不要复制粘贴。具体思路如下：
可按照发散到聚焦、聚焦再发散的逻辑描述：先介绍市场环境→当前环境造成什么问题→用户存在什么痛点→产品如何解决痛点→产品能达到什么目的→产品价值和未来的方向
为了更容易理解，下面拿Uber的一段产品背景做举例参考：
七、产品分析
1.战略层
产品定位：为“谁”提供什么样的服务，解决“谁”的什么需求；
产品类型：提供服务的产品属于哪个领域，具有什么样的产品属性；
功能特性：代表了一个产品核心情绪，可以从产品定位和主要功能中提炼出关键词。
目标用户&特征：大方向描述完后，现在开始对产品的主角（用户）进行细分，用户是谁、特征是什么、他有什么问题、使用场景是怎样的。
用户信息可以通过用户调研、后台数据、产品数据、竞品数据、市场数据等渠道收集，在我前2篇文章中有讲到过，如果前期有做这些准备，可以提取相关信息写入报告：
用户需求&解决办法：需求可以从实际数据和用户反馈中提炼出来，有些运营团队会通过组建铁粉群、论坛、问卷调查等方式集中活跃的目标用户，在这里可以得到他们的诉求，当然最好的方法还是面对面做访谈。解决办法对应到需求，可以利用“KANO模型”归类，举例：
使用场景：通过“KANO模型”归纳了需求和解决办法，然后就要列举出用户使用产品的环境：
· 什么情况下使用产品？这个情况会不会导致情绪波动？
· 什么地方使用产品？
· 这些地方网络环境好不好？不好该怎么办？
· 定位有没有覆盖到？精不精准？不精准怎么办？
· 移动支付时账号内无零钱怎么办？
· 正在等车时，手机没电怎么办？
…
这个时候需要你保持一颗同理心，通过一个切入点把思维发散开，产品设计要考虑到极端情况，必须不停的问“为什么”。可以借助团队的力量一起完善，C端产品每个人都是用户。B端产品就需要身临其境去现场，或者实实在在找用户调研。
行业分析：这个分析完全是宏观层面的东西，一般通过政策、经济、社会、科技方面来发掘，行业新闻资料网上都能找的到，其次就是看你平时对行业的关注度了。当然一些数据平台也有直观的信息可以参考：
应用数据：通过对比竞品在应用市场的下载量可判断出自身产品的市场占有量。用户评论评星可以大致分析出产品口碑。迭代记录是个好东西，可以了解竞品的研发方向。阶段数据可以通过“友盟”等数据平台接入应用市场获取：
2.范围层
这里从产品提供的功能(服务)层面来分析，可以按以下2个维度区分，并描述他们带来的价值：
· 基础功能（必备的功能、解决问题的、代表产品属性的）
· 特色功能（核心且重要的、打破同质化寻找差异化的、提升用户满意度的）
3.结构层
可以通过：功能架构图、业务流程图、页面流程图去了解产品结构，并且能清晰的看到用户完成一个任务的路径，中间会发生什么，有多少步骤，然后把你的看法记录下来。
对于竞品我们可以边操作边记录，我建议一定要自己画一遍，流程图能帮助你梳理产品逻辑，画完之后可以分析其中的优缺点，对比之下你会一目了然（解剖主要功能即可，像注册/登录/绑定 这些常规功能你自己看着办~）
推荐工具：XMind、Axure
4.框架层
主要是对产品的重要界面进行分析，并总结出优劣势和整改意见，因为这些是整个产品的灵魂，例如：一级导航页、主要业务流程页、重要功能页、特色功能页以及用户最喜欢的页面。
5.表现层
表现层就是一个产品注入灵魂之后的肉体，既呈现层、UI设计。人的审美观会根据时间发生变化，所以这里是检验你平时有没有经常性把玩优秀APP、有没有关注设计趋势。有设计基础的当然可以尽情发挥，不是设计出生的可以对应以下几个维度做参考：
· 视觉舒适度
每个人都有评价设计的资格，当你在使用一款产品的时候是否被包装所吸引，一眼看上去辣不辣眼睛，这是产品最基本的脸面问题。
（1）颜色、布局、版式、微交互、精致度等，如果这些让你的情绪产生正面增长，那么恭喜你，你已经被产品的“本能层次设计”所吸引；
（2）如果情绪波动不大，说明还看得过去~（同质化很严重嘛）
（3）如果从视觉上让你感觉不舒适、皱眉头等负面情绪产生，那只能说明：还有优化的空间（够委婉了吧）
· 视觉和交互的一致性
比如：页面切换方式、反馈机制、加载刷新、空状态、功能性按钮的状态、图标风格、元素细节、设备适配、视觉语言等是否将一致性覆盖到整个产品
· 品牌感
品牌设计是最容易在视觉上打破产品同质化现象的方式，很多优秀的产品早已深入人心，比如：企鹅-QQ、熊掌-百度、猪脸-飞猪……
将这些形象元素融入到APP里面，创造属于自己的视觉效果，这是除功能以外寻找差异化的最佳方法。我举一个“飞猪”的栗子：
“飞猪”将一个Logo特征融入到搜索框、toast、图标、标签等地方，从而提升视觉的一致性和品牌感，这是一种思维灌输式的洗脑，将品牌映入人心
· 功能可见性
围绕“视觉服从于功能”的原则。UI设计要把握好功能的视觉权重，比如：功能优先级、入口层级、按钮层级、哪些可操作等，这些都需要通过设计让用户感知到。
假设一个可点击的地方，但用户看不出来、没感知到，这就是功能可见性极弱，影响使用体验。
同时还要考虑到用户群体，如果是一款老年人、色盲者使用的产品，你的功能可见性又是怎样的呢？
总之，我们做一个设计或者评价设计之前，脑袋里都要过一遍用户使用场景。
八、竞品分析
基于战略层面收集到的数据，我们需要和竞品做宏观对比、具体对比，看看别人家产品是怎么做的，为什么受用户喜欢：
宏观对比：
具体对比：
· 功能差异化对比
· 视觉和交互对比
这里可以运用文章开头提到的“APP赏析”，站在UI设计和交互体验的角度做对比分析，罗列出双方的优劣势，并提出自己的建议。
另外，这么多资料没有模板嵌套 会影响工作效率，我简单整理了一些PPT，后面会把这些文件都分享出来。
九、假如我是产品经理
相信你做到这一步的时候，已经对产品了解的比较透彻了，在解剖过程中你肯定有很多疑问和自己的想法，没关系，大胆把他写出来，这能够检验你的分析成果。
假如你是产品经理或设计负责人，你会如何优化、把控产品呢？就从以下四个方面开始你的表演吧：
· 功能问题
· 交互体验
· 视觉风格
· 产品未来发展的设想
十、总结
（1）千万别急着动手，先收集相关资料和数据，认真分析并做记录；
（2）了解产品定位、用户群体和市场现状，知道产品为哪些人解决问题、设计机会在哪里？；
（3）找到用户诉求，参考竞品，结合产品现状给出合理建议；
（4）与竞品做对比，找到优缺点，设想改进方案。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
“设计思维意识形态”强调亲身实践、坚持以用户为中心的方法解决问题，并达到设计创新，进而实现差异化、增强竞争力。这种 “亲身实践” 的、“以用户为中心” 的方法由 “设计思维过程” 决定。
很多人都有一个误解，认为设计思维才刚刚兴起。实际上，人们对设计思维的运用已有年头：纪念碑、桥梁、汽车、地铁系统等都是其产物。纵观历史，优秀的设计师早通过以人为本（human-centric）的创造性设计过程来缔造寓意深刻、富有感染力的设计方案。
早在20世纪初夫妻档设计师 Charls 与 Ray Eames 在设计 “埃姆斯椅” 之前就坚持 “在做中学”，挖掘了椅子背后的大量需求和限制条件；这款椅子在70年后的今天，依然被投入生产制造。20世纪60年代，服装设计师 Jean Muir 有 一个很著名的设计策略 “常识论（’common sense’ approach）”，非常重视自己设计出来的衣服在别人眼里是什么样子。
这几位设计师都是当时的创新先驱，他们的设计方法论也被看做是早期的设计思维——深入了解用户的生活方式以及人们未被满足的需求。
纽约州商业部标识 “ I LOVE NY ” 的设计师 Milton Glaser 也对设计思维做了很好的阐释：
“ 我们一直都在思考，但并没有真正领悟（什么是用户真正需要的）……是关注（attention）这一行为本身让我们真正了解了用户的需求本质、对用户需求有了充分认识。”
尽管早期就有了用户为中心的设计产物，但设计在商界的地位并不高。往往事后才被人想起，也仅仅是一种提高美感的润色手段。所以很多公司根本就没有满足顾客的真实需求。因此，有些公司将设计师的角色从受限的的产品开发后端前置到了产品设计之初。以人为本的设计方法（human-centric approach）也让他们独树一帜：其设计产物不但满足了用户需求，也成功盈利。
大公司在落实以人为本前，需要一套标准化机制。设计思维（design thinking）就是一套用创造性设计流程解决传统商业问题的规范化框架。
20世纪 Roger Martin 和 IDEO 设计师 David Kelly & Tim Brown 共同提出了设计思维，将酝酿多年的设计方法和思想概括成了一个统一的说法。
设计思维是一个流程化的意识形态（Design thinking is an ideology supported by an accompanying process.）。要彻底理解这一概念，先要弄清楚 “设计思维意识形态” 和 “设计思维过程” 。
定义：“设计思维意识形态”强调亲身实践、坚持以用户为中心的方法解决问题，并达到设计创新，进而实现差异化、增强竞争力。这种 “亲身实践” 的、“以用户为中心” 的方法由 “设计思维过程” 决定。设计思维过程有6个鲜明的环节，接下来会一一详述。
（1）与用户产生共鸣（empathize）
与用户产生共鸣（即带着同理心去理解用户）：开展用户调研，了解用户的行为、语言、思想、和感受。
假设你的目标是改善新用户的登机体验。那么在这一阶段你需要和真实的用户对话，观察他们做了什么、如何进行思考、以及想要什么，同时思考 “是什么激励着用户或阻碍着用户”、“用户在哪儿受到了挫折”。其目的是收集尽可能多的信息，力求与用户产生共鸣、真正理解他们。
（2）定义问题（define）
定义问题：根据调研结果，观察用户有哪些痛点（pain point）。明确用户需求后，罗列出优化点。
该阶段以上一阶段为基础，帮助我们进一步了解用户。还以登机体验为例，根据之前的调研结果，我们可以总结出乘客当前的体验概况，思考不同乘客之间是否存在相同痛点，找出乘客未被满足的需求。
（3）形成概念（ideate）
形成概念：针对用户未被满足的需求，脑暴一系列疯狂的想法和创意。参与者可以自由发挥、天马行空一番；这一阶段，点子的数量重于质量。
最好整个团队一起参与，简要描述下各个想法。然后成员之间观念互换，将好的点子相互融合、修正，形成一套全员认可的解决方案。
（4）绘制原型（prototype）
绘制原型：将概念方案制作成真实、可感触的原型。其目的是分辨方案中哪些内容有效，哪些无效。同时，依据原型的反馈信息权衡我们的解决方案应该更具影响力还是可行性。
如果你的任务是设计一个全新的登录注册页，绘出线框图，在团队内讨论、汇总建议。然后根据建议快速调整方案，换一组人进行再次讨论。
（5）测试（test）
测试：带着你的原型走进用户、获取用户的反馈。同时思考 “这个设计方案有没有解决用户痛点、满足用户需求？有没有让用户感觉更好、思路更清晰、任务执行更顺畅？”
邀请真实用户试体验产品原型，验证设计目标。乘客对登机体验的抱怨有没有减少？新做的登录注册页有没有增加用户的时间和金钱成本？为了实现最终的设计愿景，多测试几遍吧。
（6）实施（implement）
实施：将你的设计愿景开发上线，确保它能为最终用户带来生活品质的真正改善。
这是设计思维最重要的一环，也最容易被忽略。Don Norman 说过：“我们需要做更多的设计。” 设计思维不是变戏法，空有理论而不实践是没用的。同时记住 Milton Glaser 的教诲：“创新设计是最难的。”
因为 ‘创新’ 是一个动词，要花费很长的时间。我们要先在头脑里产生一个点子，然后将它实现。通常这是一个漫长且艰难的过程，但如果你掌握到了其中的真谛，你的工作就被赋予了价值和意义。
为什么要学习和使用设计思维？其理由很多。通过归纳，我们发现设计思维的优势在于：
Jakob Nielsen 告诉我们：“如果一个伟大的设计解决的是一个错误的问题，它必将失败。”
初次接触设计思维，你会觉得它复杂深奥。但要告诉大家的是，设计思维的6个阶段不必生搬硬套，非按顺序操作。我们可以把它当作指导思想，在需要时运用即可。要学会做主厨，而不是打杂的厨子：产品设计流程就像烹饪食谱，完全可以根据实际情况稍作调整。
这6个阶段是可迭代、可循环的，与纯线型设计过程（详见图2）完全相反。在完成最初的原型后，我们常常会再次回到 “理解” 的前两个阶段，与用户进一步产生共鸣、深入定义问题。只有产出好的点子、绘制出完整的原型，你才能真正表达出你的设计理念，也能在设计之初就准确评估方案的有效性。
基于这一点，再次进行用户调研很有价值。在决策前理清：用户的哪些信息未被了解到，原型中的哪些用例未被调研到。
每一个阶段也皆可重复操作。我们常常会在其中一个环节里多次反复，达到这一阶段的目的再继续下一个阶段。
举例说明：由于不同的参与者背景不同、专长各异，“定义问题”时会产生很多解决方法。这一阶段需要全部参与者集思广益，花费的时间普遍较长。如果大家无法达成一致，就有必要多重复几次 “定义问题” 。每个阶段的产出都应当足够合理，以作为余下阶段的指导原则，同时不要偏离我们的关注点。
设计思维方便、无障碍的本质赋予了其很强的扩展性。过去那些不肯转变观念的公司，现在也有了自己的设计指导规范。设计思维不仅适用于传统的产品设计等领域，也适用于社会、环境和经济领域等的问题解决。
设计思维简单易懂，可被广泛应用；但如果“问题”定义得不准确，整个设计过程将会十分棘手。设计思维既可以用于优化小的功能点，如搜索功能；也可以用来制定重大变革性方案，如为教师设计职业发展阶梯，以留住更多教育人才。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com