设计师需求中 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》。
设计师在还原 3D 类型的互动 H5 项目的时候一定想过这个宇宙终极问题：为什么 H5/Web 实现的 3D 效果和 C4D 里渲染出来的差异那么大？
其实这是我们对实时渲染引擎（UE、Unity、three.js 等）和离线渲染工具（Redshift、Octane、Vray 等）的差异存在误解：一是离线渲染工具是基于真实光照环境来计算每颗像素的着色，实时渲染如果要实现这种效果需要耗费更多硬件基础和算力去模拟光照（没个好显卡都开不动光追）。
虽然 UE5 的实时渲染技术和硬件兼容性已经让大家大吃一惊，但在实际项目，尤其是需要兼容低端设备的 H5 来说，渲染能力还是相对有限的。二是对于游戏或 H5 互动网站实际应用来说，流畅的互动体验优先级往往高于画面精细度，所以牺牲视觉保性能也是常见情况。
图 1-Octane 离线渲染效果 vs three.js 实时渲染效果：材质细节、全局光照及投影、以及抗锯齿表现差距明显
当实时渲染效果与设计预期差距过大时，设计师能多了解一些基础的计算机图形学，也许就能更好地和开发同学商讨性价比更高的视觉实现和资源优化方案（以及更多 Battle 的筹码）。
首先我们要知道计算机之所以能在 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 材质时，就会发现他们在呈现时的差异。
图 2-Flat、Gouraud、Blinn-Phong 着色法比较 [ F1, ©️Stefano Scheggi ]
平直着色法 Flat Shading
这种着色法认为模型中所有面都是平的，同一个多边形上的任意点的法线方向都相同。着色时，会优先选择多边形的第一个顶点或三角形的几何中心计算颜色。这种着色法实践上的效果很像低面模型，也比较适合使用在高速渲染的场景。值得注意的是，这种着色法难以做出平滑高光效果。
高洛德平滑着色法 Gouraud Shading
这是一种平滑的着色方法，在着色时会先计算三角形每个顶点的光照特性，利用双线插值去补齐三角形区域内其他像素的颜色。这个着色法比起平直着色法增加了插值的细节，而且也比 Phong 着色法渲染单个像素的光照特性的性能要高。
但是在渲染高光时，可能会因为无法获取精确的光照值而出现一些不自然的过渡（或 T 型连接容易被错误绘制），此时可以考虑对模型进行细分或使用漫反射材质。
Phong 平滑着色法 Phong Shading
与 Gouraud Shading 不同的是，它会对顶点的法线进行插值，并透过每个像素的法向量计算光照特性。这种做法能绘制出精致、精准的曲面，但是计算量较大。Blinn-Phong 是 Phong 的进阶版，着色性能更好，且高光弥散更自然。
简单了解计算机如何绘制 3D 图形后，再来看看它要如何具体理解我们所设计的 3D 场景。
3D 转换成 2D，也就是 3D 栅格化的过程中，每一个像素的颜色是需要基于它所在的环境计算出来，而基于被渲染物体表面某个点的光强度计算模型就被称为光照明模型（Illumination Model）或光照模型（Light Model），透过计算光照模型所得到表面位置对应像素颜色的过程被称为表面绘制（Surface Render）。
*请注意这里说的光照模型并不是指设计师理解的 3D 立体模型，而是指模型对象表面光照效果的数学计算模型。
影响光照模型的因素有两大方面，一是本身给渲染物体材质设置的各种光学特性（颜色反射系数、表面纹理、透明度等），二是场景中光源光及环境光（场景中各个被照明对象的反射光）。
传统光照模型都是对漫反射和镜面反射的理想化模拟，如果要还原基于真实物理世界的效果，光照模型需要遵循能量守恒定律：一个物体能反射的光必然少于它接受的光。在实践层面则表现为，一个漫反射更强且更粗糙的物体会反射更暗且范围更大的高光，反之亦反。
图 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©️Joe Wilson ]
光照模型与着色组合在不同的渲染需求下也会有不同的应用：
图 4-真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]
真实感渲染 Photorealistic Rendering
考虑到真实感渲染对硬件的依赖，目前 webGL 中使用的一般以简单的局部光照模型为主（只计算光源对物体的光照效果，不计算物体间的相互影响，我们看到的“假反射”通常透过贴图来进行模拟），根据反射形态，经典的光照模型有下列几种：
这种模型的粗糙表面（如塑料、石材等）会将反射光从各个方向反射出去，而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体（Lambertian Reflectors），也就是我们熟悉的橡胶材质。
图 5-漫反射模型与其他光照模型对比 [ F4, ©️ViroCore ]
这是一种以实验及观察为合成基础的非物理模型。它的表面反射同时结合了粗糙表面漫反射和光滑表面镜面反射，但 Phong 模型在高光处的表现有过渡瑕疵。
图 6-Phong 镜面反射模型视觉构成 [ F5 ]
是在 OpenGL 和 Direct3D 里默认的着色模型，一种调优后的非物理的 Phong 模型，顶点间的像素插值使用 Gouraud 着色算法，比 Phong 着色算法性能更好，而且高光效果也更平滑。
图 7-Phong 及 Blinn-Phong 镜面反射模型对比 [ F6 ]
如果你用过 C4D 的默认渲染器，那么一定在材质的反射通道设置中见过它俩。
这是相对高级的光照模型，不同于 Phong 和 Blinn-Phong 模型仅仅对漫反射及镜面反射进行理想化模拟，这两个光照模型基于不同物理材质加入了微表面（Microfacet）的概念，并考虑到表面粗糙度对反射的影响，对镜面反射进行了调优，使得高光的长尾弥散更加自然，也是目前 PBR 渲染管线（Unity、UE）中较常用的光照模型。
图 8-Phong、Blinn-Phong 与 GGX 镜面反射模型对比 [ F7, ©️ridgestd ]
终于有一个设计师们常见的概念了。次表面散射是指光穿透不透明物体时（皮肤、液体、毛玻璃等）的散射现象。现实生活中，大部分物体都是半透明的，光会先穿透物体表面，继而在物体内被吸收、多次反射、然后在不同的点穿出物体。以皮肤为例，只有大概 6%的反射是直接反射，而 94%的反射都是次表面散射。
BSSRDF（双向次表面反射分布函数）是用于描述入射光在介质内部的光照模型，目前也被应用在最新的虚拟角色皮肤实时渲染中；但由于 SSS 材质的计算需要依赖深度/厚度数据，所以 webGL 对这种高级光照效果的还原程度还是相对有限的。
图 9-Unity 中模拟次表面散射光照模型效果 [ F8, ©️Alan Zucconi ]
非真实感渲染 Unphotorealistic Rendering
也就是我们常说的 3 渲 2，非写实渲染风格也是从人们对 3D 场景套以 2D 绘画或自然媒体材质需求而演化过来的。因此非写实渲染技术实际上是不同光照模型+不同着色处理共同作用的风格化输出，目前也被大量应用在动画及游戏中，像《英雄联盟：双城之战》《蜘蛛侠：平行宇宙》都是顶级三渲二大作。
图 10-在不同通道中混合应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]
卡通着色，一种最常见的以 3D 技术模拟扁平风格的着色形式，通常以极简的颜色、渐变及明确的外框线等漫画元素作为风格特征。
图 11-Blender 中不同类型的 Toon Shader 效果 [ F10, ©️Blendernpr]
日本创意编程师 Misaki Nakano 制作了一个非常有趣的 Toon Shading H5 互动页面，大家可以体验一下不同着色形态下非常模型的视觉表现。点击体验： https://mnmxmx.github.io/toon-shading/dst/index.html
图 12-Misaki Nakano 的 Toon Shader 互动网站 [ F11, ©️Misaki Nakano]
目前越来越多渲染器可支持设计师及工程师根据项目需求对着色进行定制化处理，以产出更具风格化和艺术化的着色效果。例如工业界插画常用的冷暖着色（Gooch Shading），以及更具绘画质感的素描着色（Hatching）及油画水墨画等自然媒体着色，都已经深入到了我们日常的创作之中。
图 13-在 Unity 中，基于真实感渲染的贴图效果与 NPR 水墨风格化着色效果对比 [ F11, ©️邓佳迪]
说完真实感与非真实感渲染差异后，我们再来看看 Three.js 中的材质。
和许多渲染引擎一样，除了原生材质外，webGL 的材质和着色都是可以根据需求进行定制的，但这往往会也带来较高的开发成本及兼容性风险。考虑到 H5 项目的实际应用场景，下表罗列了 Three.js 原生材质的对比，包含了材质特性优势、贴图差异及适用场景，大家可以基于项目需求快速选择并混合使用：
图 15 – three.js 材质对比表
虽然着色、光照模型以及材质渲染对 3D 表现有着最为直观的影响，但 3D 工作流仍有一个隐秘而关键的环节——色彩管理。
真实世界中按照物理定律，如果光的强度增加一倍，那么亮度也会增加一倍，这是线性的关系。理想状态下，像素在显示屏上的亮度也应为线性关系，才能符合人眼对真实世界的观察效果（如图 b：横坐标为像素的物理亮度，纵坐标为像素显示时的实际亮度）。
但是显示器的成像由于电压的影响，导致输出亮度与电压的关系是一个亮度等于电压的 1.7-2.3 次幂的非线性关系，这就导致了当电压线性变化时，亮度的变化在暗处转换时变慢，如果显示器不经过矫正，暗部成色也会整体偏暗（如图 c）。目前大多数显示器的 Gamma 值约为 2.2，所以也可以理解 Gamma2.2 是所有显示器自带的一个遗传病。
图 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），像素的实际亮度也会高于它的物理亮度。
图 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，咱们需求再见。
像素着色器 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），两者结合可以让简单的模型快速获得细分曲面。（例如，含细分曲面效果的模型加上置换贴图就可以获得极其逼真细腻的模型）
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 负责给图形配上颜色的专门通道。管线越多，画面越流畅精美。
图 17-渲染管道细节工作流 [ F12 ]
Rasterization：光栅化/点阵化/栅格化，就是将管线处理完的图元转换成一系列屏幕可视的像素，过程包括：图元拼装（Primitive assembly）-三角形遍历（Triangle Traversal）- Pixel Processing-Merging。
文章来源：优设 作者：ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
随着媒体发展，品牌广告演变出众多创新十足、彰显品牌调性的创意。广告创意日益精进的同时用户体验阈值也不断提升，如何实现创意突破、触动用户心弦、实现用户体验与商业价值的双赢是品牌广告面临的挑战。
百度品牌广告为寻求自我突破，塑造对用户有价值、对客户强权益的新型广告形态，从全局进行思考，打破现有样式的局限，进行创新形态重构。我们将结合卡间联动的创新实践分享品牌广告的创意探索。
超级品专是品牌广告的重要产品形态，通过品牌广告结合自然搜索结果，逐步帮助客户构建在百度搜索生态的品牌运营阵地，同时给用户带来更完整的品牌信息获取满足（下图左）。在实际运用中发现，超级品专在样式上希望进一步做突破：
1）沉浸感：提升下方白色组卡品牌调性。
2）触达率：提升下方组卡的触达及感知。
基于以上分析，我们进行了系统性的样式创新，推出卡间联动创新形态，该形态的本质在于通过彩卡形态提升沉浸感，通过互动化的炫动浮层动效引导用户下滑浏览探索，从而提升品宣和数据效果，达到品效双赢的终极目标。
1. 整体视觉升级，沉浸式彩卡，突显品牌调性
界面背景上做了多种设计尝试，将白卡区升级为彩卡，提取头卡物料进行智能取色，使头卡和下方组卡更融合，强化整体性，提升沉浸感，将整体区域打造成“品牌运营阵地”。
2. 首屏强动效吸引，提升视觉冲击力，增强品牌认知
首屏以动效形式展现品牌主推信息，加强用户感知，使用户快速理解品牌亮点，获取品牌信息。此外，我们针对不同行业、不同营销目标，以差异化的动效形式作为品牌服务的延伸，增强视觉冲击力，突显产品亮点，强化品牌认知。
3.下滑展现动画，强化品牌卖点，激发用户探索兴趣
组卡区结合品牌信息，根据用户搜索品牌的诉求和目标，强化品牌的 2-3 个卖点，通过用户下滑操作触发一段动画，引导视觉动线持续向下，玩法上增加了惊喜感，激发了用户的探索兴趣，吸引用户关注到价值信息后形成点击转化。
4. 控制展现时长与展现频次，减少对用户的干扰，注重用户体验
前续通过动效传递品牌信息价值，同时我们还以不干扰用户操作为目标，控制动效展现时长及展现频率，让用户更专注并沉浸于内容本身，体验更加友好。
那么卡间联动设计创新是否真正实现品效双赢？实现商业价值与用户体验的共赢？我们通过线上数据分析和用户体验调研，来揭秘卡间联动效果。
1. 数据分析显示：有效提升转化效果和停留时长
首发客户来自汽车行业，通过该客户投放超级品专和卡间联动样式的实验对比，后者数据显著提升，点击率平均提升 11%，停留时长提升 20.2%。
2. 定性调研显示：有效激发用户兴趣，增强品牌认知和记忆
在调研方法的选择上，考虑到卡间联动的设计创新效果与用户视觉注视息息相关，因此，我们引入眼动追踪技术，通过记录用户的视觉注视过程，获取客观数据，同时结合问卷评分和深度访谈，从主客观全面了解用户的真实体验感受。
在调研用户的选择上，为了找到最具代表性的目标用户，我们根据行业用户画像设定年龄和性别配比，同时结合百度 App 使用习惯进行筛选。
评估维度的选择，重点参考了广告效果评估理论模型（AIDMA 模型），该模型阐述了用户对品牌从“注意”到“行为”转变的心理过程，基于该心理机制，结合品牌广告关注品牌吸引和印象增强的特点，从中提炼了注意兴趣、情感偏好、记忆效果三个维度来衡量品牌宣传效果。
关于这个模型的详细介绍：
在实验设计上，我们对比了超级品专和卡间联动样式。调研结果如下：
1. 注意兴趣：卡间联动吸引用户关注，引起用户兴趣，可提升品牌宣传效果
卡间联动能有效提升用户注意兴趣，整卡的注视时长提升 37.5%。用户在浏览整页过程中，分配更多的时间在卡间联动样式区域，注视时间占比从 46.6%提升至 55.8%，增幅 19.7%，注意吸引提升效果明显。
进一步细分数据发现，卡间联动首屏和下方组卡注视时长均有所提升，其中首屏动效最先吸引用户，提升效果更明显。
2. 情感偏好：卡间联动用户主观偏好更高，增强用户对品牌的印象
整体上，用户对卡间联动表现出更高的情感偏好，其中，卡间联动广告设计感和惊喜感提升效果最好，评分提升高于 50%。
结合来自用户的主观反馈可以看到，卡间联动提升用户情感偏好的原因主要为动效生动形象，互动性强，能更好的突出品牌特征，传达品牌调性。
3. 记忆效果：卡间联动视觉冲击力强，有互动感，用户印象更深刻，品牌记忆效果更好
卡间联动通过动效突出品牌卖点，用户可回忆起更多的品牌细节，相较于超级品专，用户记忆印象更深刻。
综上，卡间联动设计样式，在效果数据和品牌宣传上均有不错的表现，是品牌广告“品效双赢”的一次成功尝试。我们不仅考虑样式的精品化，更注重行业的通用性和规模化，目前卡间联动样式已覆盖了汽车、旅游、食品饮料、奢侈品等行业客户的通用诉求，满足新品宣发、卖点展示等多维度营销诉求。
同时最大程度降低物料制作难度，赋能客户低成本实现创意表达，如汽车行业客户仅需提供汽车前视图、侧视图、顶视图三张图片，即可生成炫酷的动效效果，快速投放。
在品牌广告自我突破和创新发展的道路上，我们也将继续探索、持续优化，始终不变的初心是，用设计创新的力量，提升用户体验，创造价值。
文章来源：站酷 作者：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
“时间”作为人机交互界面中经常出现的元素，本质上都是为了去传递时间维度的信息。但是我们平时在使用一些互联网产品时会发现，关于“时间”的显示状态或形式在不同场景、不同页面里往往是不太一样的，这是出于怎样的考虑呢？今天我们就来聊一聊，如何在产品设计中把握“时间”显示的诀窍，让其在页面中发挥最大的作用。
按照“时间”元素在页面中的出现场景和所起到的作用，可以大致归为以下几类：
时间作为描述整个事件的重要组成部分，缺失后会对原本所要传达的内容产生严重的影响，进而影响用户的使用预期和结果，比方说用户可能不能以一个较低的价格完成商品购买，或错过了产品发布会的时间。
指用户本人作为行为主体或行为的接收对象，在某一动作发生后为其所打上的时间标记，比方说“我”购买商品下单的时间或收到一封邮件的时间。
用户在使用产品进行内容消费时，时间作为该条内容的附属信息，起到补充说明的作用，比方说一条短视频或新闻的发布时间。
在上面的案例中，我们会发现“时间”在对应场景里所发挥的作用不同，用户在使用产品时往往对时间存在不一样的关注程度。因此我们在做页面设计时，要根据具体场景和用户诉求判断“时间”元素的重要性和优先级，通常情况下：时间作为事件的关键构成要素＞行为的时间标记＞内容的附属信息，之后再思考用什么样的设计形式去展示来达到我们的目标。
“时间”的呈现方式和运用技巧
在讨论“时间”元素的设计之前，我们先共识一些有关时间的理解和概念。时间可以划分为“时间点”和“时间段”两个维度，类似我们高中物理时学过的“时刻”和”时间间隔“的概念。
拿开会举例子：“下午 4:30 会议开始”、“下午 6:00 会议结束”描述的是事件开始、结束的时间点，而“整个会议持续 1.5 小时”、“会议时间为下午 4:30-6:00”描述的是事件过程的时间段；但是，我们在会议开始时也可以这样讲“会议将在 1.5 小时后结束”。
通过上面的例子我们可以发下，同样是描述一件事情，运用不同的时间点、时间段的方式去表达，意思一样但却传递出不一样的情感，并且两者存在如下的“换算”关系：
1）时间段加上定语会变成时间点（但同样是时间点，“下午 6:00”是绝对时间，而“1.5 小时后”是相对时间，刚好对应到我们设计时两种时间戳类型）；
2）两个时间点之间则表示时间段。
所以，我们在平时表达或设计时，要先想清楚用“时间”是想侧重表达某一事件、动作发生的即刻时间节点？还是想描述其所持续的时间过程？之后我们再针对不同语境去选取合适的文案和呈现方式。
时间的呈现方式离不开：时间戳类型、时间显示格式、时间颗粒度。其中，时间颗粒度指的是描述时间的最小单位，往往颗粒度越细，给用户传达的确定感越强（如转账时间是 12 日 15:15:20），对用户的激励作用越明显（如距抢购结束仅剩 00 时 01 分 23.6 秒）。
1. 绝对时间戳
绝对时间可理解为事物发生时的确切时间，由具体日期（年、月、日）和时间（时、分、秒）组成。使用绝对时间戳的优势是信息传达精准，显得正式，给人确定感和安全感，同时排布规整，便于形成认知习惯；但缺点是内容显示过长不利于阅读，并且占用空间较大。
在时间显示格式的选择上，为了避免混淆，推荐使用文字格式或“-”分隔符来分隔日期，而“/”分隔符在不同国家有不同的展示顺序习惯，容易造成误解，尽量少用。
时间颗粒度的选择依情况而定，一般场景总结如下：
2. 相对时间戳
相对时间在产品设计领域通常是指内容生产、到达、或状态发生改变时，距当前时间点的时间差值，多用于 push 通知、信息流产品，侧重强调内容的时效性；而“倒计时”也算相对时间的一种，侧重营造时间的紧迫感。使用相对时间戳的优势是用户辨识、理解成本低，不用通过计算来判断时间过去或还剩下多久；缺点是不够精确、正式，并很难衡量两个时间点的临近性。
在使用相对时间时，要注意格式友好。时间单位可随着时间的推移自动改变；数字不要过多，尽量取整；并且可设置其与绝对时间转换的临界点。
在设计界面中的“时间”元素时，要遵循场景贴合、便于阅读理解的总体原则；之后根据场景和目标，再选取合适的“时间”呈现方式（包括时间戳类型、时间显示格式、时间颗粒度）。
当时间作为“A.事件的关键构成要素”时
一般情况下使用绝对时间，并且要看是为了强调某一关键时间节点，还是侧重表达整个持续过程。此外，选用关联场景的文案或者运用倒计时（相对时间）的形式，可一定程度上促进用户更加集中注意力，提升对信息的关注度，并达到特殊的激励作用和转化效果。
当时间作为“B.行为的时间标记”时
该场景通常是为了追求确定感，通过提供精准的时间和日期便于用户定位到过去或将来的某个时间点（段）去查找、回顾相应内容，因此大多数采用绝对时间，时间颗粒度依具体情况而定。
当时间作为“C.内容的附属信息”时
如果所设计的产品供给内容的更新速度快，用户活跃度高，并且此时内容的时间信息准确性不那么重要反而更侧重于内容的时效性，那么通常会使用相对时间。部分信息流产品（比如新闻资讯类、社区类）会在列表页使用相对时间，在详情页使用绝对时间，时间颗粒度也是依情况而定；并且会随着时间推移，在某一时间节点前把相对时间转换为绝对时间。
文章来源：优设 作者：VMIC UED
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
表单在B端产品中是重要的组成部分，设计表单是比较考验设计师综合能力和设计细节的。一定程度上，表单设计的好坏也决定了产品的成败。
在实际项目中随着B端产品的复杂化，出现冗余的视觉干扰信息，降低信息传达的效率，使得用户认知成本高，操作难度大。那么对于表单如何提升表单的易用性又该如何数据量化易用性呢？本文从4大方面阐述全面提升表单的易用性并验证。
表单由表单标签、表单域、提示信息、操作按钮组成。
在我们设计B端产品的过程中，总会遇到用户信息填写逻辑混乱、资料收集不全的状况，导致用户在浏览和编辑时的操作体验大打折扣。主要反映在以下几个方面：
1、用户浏览信息顺序混乱，信息层逻辑不清
2、不同信息内容风格及交互不统一，用户难以建立统一心智
3、产研协作与资产沉淀之间有断层，无法有效沉淀与跟踪管理
4、整体页面操作时间长，用户跳脱率高
5、用户客诉数据高
提升表单易用性的4大原则：易阅读 、易操作 、安全感 、所见即所得
a、采用扁平化设计，化繁为简，去除冗余的视觉干扰，使得页面更加简洁清晰。
如：当必填特别多时，就不用都标出来了，只需要单独标出非必填项即可，最大化得信息降噪。
b、尽量采用单列布局，视觉动线流畅，不容易遗漏信息；按Enter换行，可以最大程度得提升表单的输入效率。此处的用户心智与操作效率比屏幕利用率更为重要。
c、面对多行或复杂表单可以采用逻辑分组+合适的折叠度，提高页面有效信息的透传，增加用户填写表单的效率，让用户快速填写，快速离开。
a、为用户提供合适的默认项，可以减少用户操作步骤，提高填写效率。
b、在表单中填写上部分信息即可自动获取下面信息，无需用户再次填写，也大大增加了操作效率。
c、根据搜索、联想，自动现实匹配信息，大大减少用户记忆和认知的负担。
d、对于一些标准证件、文本信息的录入，可以通过OCR识别文件内容。当用户上传图片后，运用图像识别技术提取关键信息并自动录入。
如果图片不清晰或存在水印，此时也应提供修正渠道，可逐一校对并修改。
a、操作前给予正确提示，避免用户重复试错，缺乏安全感。
b、操作中给予实时反馈，为用户封闭不正确的道路。
c、操作后的提醒和纠错，告诉用户哪里错了，而非简单粗暴的错误警告。
边设置，边预览，适合对移动端、小程序、H5的配置。
通过用户点击数据，辅助设计洞见。从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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
大家看到我整篇文章里面，没有提及市场调研分析，用户分析等。网上很多文章讲得特别全而大，我相信有部分设计师看完就很懵逼，怎么入手？因此今天给大家支一个晓招，聚焦一个点分析，但偶尔我们可以适当在拓宽一些维度。好了，本文就到这，大家还需要多去实战练习，才能找到比较顺手的方法。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每个人，在处理自己熟悉的事物时，往往都会有 「思维定势」。我们在设计页面时，会去考虑用户的思维定势，而在处理设计问题时，也是同样的道理。
在与许多 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端设计师的四点建议
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
每个人，在处理自己熟悉的事物时，往往都会有 「思维定势」。我们在设计页面时，会去考虑用户的思维定势，而在处理设计问题时，也是同样的道理。
在与许多 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端设计师的四点建议
设计系统的基础工作之一就是给组件命名。这个工作看上去并不起眼，似乎还有些机械重复，但实际上却需要具备严谨的逻辑和对细节的锱铢必较。
组件的命名方式并不唯一，你可以按照你对组件构成的理解，来规划你的命名逻辑。下图以我工作中用到的一款组件库为例，呈现出组件的命名逻辑：
可以看到，我们在命名时分了 5 个层级，依次是类别，元件，模式，等级，状态。
1、类别
类别指的是组件最本质的作用和宽泛的应用场景。通常我们会分为：通用、导航、数据录入、数据展示、反馈等几个类别，类别以及其中的部分组件如下图所示：
2、元件 / 组件
元件即具体的、单一的组件，比如 “导航” 这个类别下就包括了固钉（返回顶部）、面包屑、下拉菜单、导航菜单、分页、页头、步骤条等几个组件：
3、模式
目前的模式通常会分成暗黑模式（Dark Mode）和浅色模式（Light Mode）两种，但随着对用户体验的不断重视，未来也有可能会出现 “护眼模式”、“色盲模式”、“高对比度模式” 等模式。
4、等级
等级的分类和数量由组件的基本功能和在产品的具体需求决定，有些组件比如 “分页器”、“面包屑” 通常只有一个等级，在命名的时候就可以不体现；而有些组件如 “按钮”、“标签页” 、“导航” 则会有多个等级：
5、状态
状态即组件在交互时的变化样式，通常包括普通（默认）、悬浮（悬停）、点击、失效（禁用）等，根据不同组件的特性，也可能会包括危险提示、聚焦等状态。
根据上述这个规则，我们就可以对所有组件进行有规律的命名，下图中组件悬停状态的命名为：Navigation/Sidemenu/Light/Primary/hover
组件的命名能够清晰的体现组件的性质和状态，不要仅仅使用数字 1、2、3 来代替状态。举个例子，你的产品品牌色主色名称的结尾应该是：“……brand/primary”，而不是 “brand/blue1”，或 “brand/ #E60326”。
除了色板，我们对于组件也是要尽量清晰的描述组件的类别和状态，而不是它的外观。比如按钮在“悬停状态”的时候是浅蓝色，你命名到 “悬停” 的状态就可以了，这时你的按钮名称后半部分应为：“……/button/primary/hover”，不需要提及按钮的颜色变化。
这种命名结构可以最大程度上确保组件与系统一起发展，如果当主按钮的颜色发生变化，你也不必在整个系统和组件中更新其名称。
2. 遵守逻辑
命名结构要有逻辑，名称根据一定的逻辑结构进行推导，以便于当组件有新增、或组件库有革新时可以顺畅的添加和修改。
由于不同组件的等级和状态千差万别，建议你也可以先梳理出上文图中的命名逻辑层级表，按照表单进行工作，简单清晰，也方便团队的其他设计师一同协作。
3. 良好习惯
养成良好的工作习惯，建立标准的工作流程和规范，包括：
在公众号后台回复 “组件”，会看到更多与之相关的干货讲解。如果你还有其他与组件相关的问题，欢迎向我提问。
原文链接：长弓小子（公众号）
作者：元尧
转载请注明：学UI网》工作经验｜设计资产库中的组件，应该如何命名？
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在我们平时的工作中，经常需要创建各种各样的情绪板：用于品牌、App、海报、服装……等涉及到设计领域，但我经常会发现在整理素材和归纳的时候，很容易遗漏某些步骤，或者创建过程晚了被客户拒绝，所以我决定写一篇总结文章，其中包含一系列技巧和工具。
有些人将其称为风格图、参考图，但它们之间的差异存在争议，但总而言之，它是一组图像，把它们汇总在一起代表品牌（或项目）将采用的视觉方向。
我们可以将情绪板的作用总结为三个主要目标：
我在刚参加工作时的项目中所犯的第一个错误就是收到一个新的设计需求简介后，就立即疯狂收集参考图，我想这是与品牌匹配的，没有任何问题。（然而这样的设计方式非常错误且痛苦）
现在看来，与之相反的，应该先花点时间分析下设计需求简介，让自己真正了解品牌的背景、历史、未来计划、行业、竞争、目标受众、品牌信息和价值主张。如果以上任何一块缺失并影响了创建情绪板，你最好都需要先跟需求方沟通清楚缺失部分的细节。针对这些缺失的细节发送品牌调查问卷，避免甲方推翻重新设计，影响设计进程。
情绪板在品牌推广过程中占有一席之地，但在一开始的时候肯定是没有的。假设你已经从客户那里收集了所有信息，现在我们准备进一步推进情绪板创建的实际步骤：
1） 研究并搜集参考
2） 排版和优化
3） 情绪版展示（可选）
接下来，会详细的为大家分享每一个步骤。
在我开始找图之前，我喜欢把需求介绍中的形容词或其他关键词放在自己面前，这样我就可以检查研究的内容是否与关键词产生共鸣。
另外，不要忘记还要了解目标受众和市场细节！
在我们谈论研究之前，我想分享几个我喜欢使用的图像收集工具。
Pinterest 几乎是图像收集的首选工具之一。你们中的许多人可能已经在用了， 优点是很容易设置收集画板，并且关联图片和以图搜图都非常方便，而且还是免费的。
Sample board from Pinterest 来自 Pinterest 的样板
（彩云注：原作者这里还介绍了另外两款工具，但经过彩云的研究，发现不那么好用，不符合中国设计师的使用习惯，所以我去掉了这部分的内容。）
你也可以直接保存到桌面。但我喜欢用工具进行整理，所以当我完成研究过程后，我至少对于搜集整理方面的工具有一个广泛的了解。
一个非常新的收藏工具叫做 mymind ( https://mymind.com )，由设计师 Tobias van Schneider 开发。这是一个浏览器扩展程序，它可以帮助你保存图像、文本、视频、完整的文章、产品或其他内容，方法是使用插件扩展或右键单击添加到一个大集合（收集上也可以用）。
这是对不太喜欢打标签和分组的人做的工具，因为它会自动搜索已保存材料之间的联系并添加标签，因此在某些方面要比 Pinterest 更易于搜索
好了，工具够用了！你准备好获得灵感了吗？在开始搜索之前，我们需要记住我们之前定义的那些品牌形容词（工业、坚定、空灵等等）。
因为我知道搜索过程会让我陷入困境，所以第一件事就是给自己设置一个计时器（对我来说大部分搜索收集图片时间是 1.5 小时）。
我首选的工具是 Google 和 Pinterest，重要的是在这个阶段不要把自己限制在任何事情上并保存所有吸引你眼球的东西，这样你就有足够的材料可以使用。
我会有针对性的找一些关键元素来向客户（或我自己）展示并在以后为设计决策提供信息：颜色、排版、行业和整体氛围、包装、摄影、插图风格、纹理、图案、logo。
这听起来很简单，但如果品牌形容词没有太多引导作用呢？这里有一些提示可以尝试：
分享一些我常用的额外资源：
[Designspriration] — 精选灵感搜索
[PICDIT] — 高级摄影作品网站（彩云看了下貌似近期没有更新了,但以前的内容还是值得一看的）
[Flickgraphics] — 艺术排版灵感库
[Adultartclub] — 艺术摄影灵感库
[Dayinthelandofnobody] — 艺术摄影
[Visualgraphic] — 版式灵感
[typophile] — 排版灵感
[logos.ai] — 排版和logo
在你收集了一堆图片之后，接下来我们将看看如何处理它们。
1. 选择一个工具（Canva、Figma、Miro 等，彩云经常用sketch）
将图片组合成可展示的格式。我建议选择一些客户无需安装即可轻松使用的东西，这样反馈周期会更短。如果平台也有一些主题选项，那就太好了，例如，你可以根据客户的品牌颜色对其进行定制，并且可以将相同的结构重新用于不同的产品。
2. 挑选和组织图片
将每个图片下载到本地并把它们归纳分配在相关的风格或品牌形容词下。
如果只需要部分图片，记得裁切好需要的部分。
3. 将图片进行排版分组
在组织这些图片时，首先要记住的是颜色。我们需要避免用户在单个对象上花费太多时间，也不是自然地从一张图流向另一张图。
你可以尝试限定好图片的数量，对我来说10-15是一个很好的起点。
彩云也收集了一些比较优秀的情绪版排版供大家参考
4. 检查并最终确定方案
如果你已经到了这个阶段，那就太好了！现在是时候对最初的品牌形容词做检查标记，看看情绪版是否整体传达了品牌氛围。
在情绪版中有一个能自检的列表非常不错，我们要问自己的问题：
如果一切都考虑妥当，就该进行情绪板演示了。 最后，我收集了一些最终笔记，它们可能有助于你将其展示给其他人。
如何与客户交流情绪板？
提醒客户不要从字面上理解任何内容，情绪板上的任何元素都不意味着要对他们的品牌(或项目)进行一对一的翻译。例如，如果在一张图片上有紫色的魔方飞来飞去，这并不意味着品牌会用魔方做任何事情，可能是形状，也可能是颜色。
强调这是品牌所在的视觉世界，而不是具体的元素。总而言之，鼓励客户关注整体，而不是个别部分。
如果在这个阶段一切都很糟糕并客户不认同它怎么办？
事情可能会出错，但请记住，我们可以随时后退一步，然后再前进。是时候回到关键词了，尤其是基调部分。这时候与观众一起仔细阅读每个词，并质疑相同的词是否仍然与品牌愿景产生共鸣，这是很有帮助的。
如果答案是肯定的，那么最好再进行一次会议，以了解观众根据关键词所想象的内容，以便下次符合预期。我的经验是，如果情绪板与观众或决策者一起策划，很容易获得早期支持以避免这种情况发生。
如果答案是否定的，可能要探索品牌愿景是否有任何变化，并从问卷开始回到开头。尽管这一步看起来令人生畏，但客户的舒适度确实至关重要，否则当你在整个设计过程中进一步推进时，他们将不会感到这是设计是为他们做的。
译者：彩云Sky
转载请注明：学UI网》情绪版还能这样做？难怪大厂的设计师那么强
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com