模型 反射 材质 前言设计师需求中 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 互动网站实际应用来说，流畅的互动体验优先级往往高于画面精细度，所以牺牲视觉保性能也是常见情况。图 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 材质时，就会发现他们在呈现时的差异。图 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 立体模型，而是指模型对象表面光照效果的数学计算模型。影响光照模型的因素有两大方面，一是本身给渲染物体材质设置的各种光学特性（颜色反射系数、表面纹理、透明度等），二是场景中光源光及环境光（场景中各个被照明对象的反射光）。传统光照模型都是对漫反射和镜面反射的理想化模拟，如果要还原基于真实物理世界的效果，光照模型需要遵循能量守恒定律：一个物体能反射的光必然少于它接受的光。在实践层面则表现为，一个漫反射更强且更粗糙的物体会反射更暗且范围更大的高光，反之亦反。图 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©️Joe Wilson ]光照模型与着色组合在不同的渲染需求下也会有不同的应用：真实感渲染（Photorealistic Rendering）：目的是基于真实物理世界对 3D 场景进行仿真还原。非真实感渲染（Unphotorealistic Rendering）：也被成为风格化渲染（Stylistic Rendering），会更抽象化地对模型进行重绘。图 4-真实感渲染及非真实感渲染对比 [ F3, ©️Autodesk ]真实感渲染 Photorealistic Rendering考虑到真实感渲染对硬件的依赖，目前 webGL 中使用的一般以简单的局部光照模型为主（只计算光源对物体的光照效果，不计算物体间的相互影响，我们看到的“假反射”通常透过贴图来进行模拟），根据反射形态，经典的光照模型有下列几种：Lambert 漫反射模型：这种模型的粗糙表面（如塑料、石材等）会将反射光从各个方向反射出去，而这种光反射也称为漫反射。理想的漫反射体我们通常称作郎伯反射体（Lambertian Reflectors），也就是我们熟悉的橡胶材质。图 5-漫反射模型与其他光照模型对比 [ F4, ©️ViroCore ]Phong 镜面反射模型：这是一种以实验及观察为合成基础的非物理模型。它的表面反射同时结合了粗糙表面漫反射和光滑表面镜面反射，但 Phong 模型在高光处的表现有过渡瑕疵。图 6-Phong 镜面反射模型视觉构成 [ F5 ]Blinn–Phong 模型：是在 OpenGL 和 Direct3D 里默认的着色模型，一种调优后的非物理的 Phong 模型，顶点间的像素插值使用 Gouraud 着色算法，比 Phong 着色算法性能更好，而且高光效果也更平滑。图 7-Phong 及 Blinn-Phong 镜面反射模型对比 [ F6 ]Cook-Torrance/GGX 光照模型：如果你用过 C4D 的默认渲染器，那么一定在材质的反射通道设置中见过它俩。这是相对高级的光照模型，不同于 Phong 和 Blinn-Phong 模型仅仅对漫反射及镜面反射进行理想化模拟，这两个光照模型基于不同物理材质加入了微表面（Microfacet）的概念，并考虑到表面粗糙度对反射的影响，对镜面反射进行了调优，使得高光的长尾弥散更加自然，也是目前 PBR 渲染管线（Unity、UE）中较常用的光照模型。图 8-Phong、Blinn-Phong 与 GGX 镜面反射模型对比 [ F7, ©️ridgestd ]次表面散射模型 Subsurface scattering/SSS：终于有一个设计师们常见的概念了。次表面散射是指光穿透不透明物体时（皮肤、液体、毛玻璃等）的散射现象。现实生活中，大部分物体都是半透明的，光会先穿透物体表面，继而在物体内被吸收、多次反射、然后在不同的点穿出物体。以皮肤为例，只有大概 6%的反射是直接反射，而 94%的反射都是次表面散射。BSSRDF（双向次表面反射分布函数）是用于描述入射光在介质内部的光照模型，目前也被应用在最新的虚拟角色皮肤实时渲染中；但由于 SSS 材质的计算需要依赖深度/厚度数据，所以 webGL 对这种高级光照效果的还原程度还是相对有限的。图 9-Unity 中模拟次表面散射光照模型效果 [ F8, ©️Alan Zucconi ]非真实感渲染 Unphotorealistic Rendering也就是我们常说的 3 渲 2，非写实渲染风格也是从人们对 3D 场景套以 2D 绘画或自然媒体材质需求而演化过来的。因此非写实渲染技术实际上是不同光照模型+不同着色处理共同作用的风格化输出，目前也被大量应用在动画及游戏中，像《英雄联盟：双城之战》《蜘蛛侠：平行宇宙》都是顶级三渲二大作。图 10-在不同通道中混合应用真实感渲染及非真实感渲染效果 [ F9, ©️Polygon Runway]Cel Shading/Toon Shading:卡通着色，一种最常见的以 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]Customized Shading：目前越来越多渲染器可支持设计师及工程师根据项目需求对着色进行定制化处理，以产出更具风格化和艺术化的着色效果。例如工业界插画常用的冷暖着色（Gooch Shading），以及更具绘画质感的素描着色（Hatching）及油画水墨画等自然媒体着色，都已经深入到了我们日常的创作之中。图 13-在 Unity 中，基于真实感渲染的贴图效果与 NPR 水墨风格化着色效果对比 [ F11, ©️邓佳迪]3. Three.js 材质着色对比说完真实感与非真实感渲染差异后，我们再来看看 Three.js 中的材质。和许多渲染引擎一样，除了原生材质外，webGL 的材质和着色都是可以根据需求进行定制的，但这往往会也带来较高的开发成本及兼容性风险。考虑到 H5 项目的实际应用场景，下表罗列了 Three.js 原生材质的对比，包含了材质特性优势、贴图差异及适用场景，大家可以基于项目需求快速选择并混合使用：图 15 – three.js 材质对比表4. 色彩描述与管理 Color Space虽然着色、光照模型以及材质渲染对 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，咱们需求再见。附录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 负责给图形配上颜色的专门通道。管线越多，画面越流畅精美。图 17-渲染管道细节工作流 [ F12 ]Rasterization：光栅化/点阵化/栅格化，就是将管线处理完的图元转换成一系列屏幕可视的像素，过程包括：图元拼装（Primitive assembly）-三角形遍历（Triangle Traversal）- Pixel Processing-Merging。3. 参考文献[1] Hearn, D. and Baker, M.P., 2004. Computer graphics with OpenGL, 计算机图形学第四版 . Upper Saddle River, NJ: Pearson Prentice Hall,.[2] Akenine-Möller, T., Haines, E. and Hoffman, N., 2019. Real-time rendering. Crc Press.[3] 锐萌瑞, 经典光照模型（illumination model）https://blog.csdn.net/qq_34552886/article/details/79089418[4] Krishnaswamy, A; Baronoski, GVG (2004). “A Biophysically-based Spectral Model of Light Interaction with Human Skin” (PDF).[5] List of Common Shading Algorithm：https://en.wikipedia.org/wiki/List_of_common_shading_algorithms[6] 0 向往 0, 剖析 Unreal Engine 超真实人类的渲染技术 Part 1 – 概述和皮肤渲染https://www.cnblogs.com/timlly/p/11098212.html[7] 毛星云, 「《Real-Time Rendering 3rd》 提炼总结」(十) 第十一章 · 非真实感渲染(NPR)相关技术总结https://zhuanlan.zhihu.com/p/31194204[8] 卜噪大仙，局部光照模型杂记「Lambert/Phong/Blin-Phong/BRDF/BSSRDF/Cook-Torrance」https://www.jianshu.com/p/96ca495669d6[9] puppet_masterm, Unity Shader-Matcap（材质捕获）https://blog.csdn.net/puppet_master/article/details/83582477[10] WestLangley, documentation on gamma correction incorrect? #11110https://github.com/mrdoob/three.js/issues/11110[11] donmccurdy, Best practise for color managementhttps://github.com/aframevr/aframe/issues/3509https://github.com/mrdoob/three.js/issues/11337#issuecomment-440795075[12] alteredq, Questions about the use of Gamma Correction in the WebGL Renderer #1488https://github.com/mrdoob/three.js/issues/1488[13] Friksel, What’s this about gammaFactor?https://discourse.threejs.org/t/whats-this-about-gammafactor/4264/3[14] PZZZB，Linear Space Lightning、Gamma、sRGB 详情讲解：https://zhuanlan.zhihu.com/p/66558476[15] Learn OpenGL, Gamma Correctionhttps://learnopengl.com/Advanced-Lighting/Gamma-Correction[16] 柯灵杰，3D 图形学基础：https://zhuanlan.zhihu.com/p/27846162[17] Klayge 游戏引擎，关于 D3D11 你必须了解的几件事情（三）http://www.klayge.org/?p=1404[18] 拓荒犬, GPU 渲染流水线简介https://zhuanlan.zhihu.com/p/61949898[19] Steve Baker, Learning to Love your Z-buffer.https://www.sjbaker.org/steve/omniv/love_your_z_buffer.html[20] Steve Baker, Alpha-blending and the Z-buffer.https://www.sjbaker.org/steve/omniv/alpha_sorting.html[21] Microsoft, Direct3D 11 Graphics-Tessellation Stageshttps://docs.microsoft.com/en-us/windows/win32/direct3d11/direct3d-11-advanced-stages-tessellation#domain-shader-stage[F1] Stefano Scheggi, Flat shading vs. Gouraud shading vs. Blinn-Phong shadinghttps://www.youtube.com/watch?v=VRw3GuVdldo[F2] Joe Wilson, Physically-Based Rendering, And You Can Too!https://marmoset.co/posts/basic-theory-of-physically-based-rendering/[F3] Autodesk, Apply Visual Effectshttps://download.autodesk.com/us/mudbox/help2011_5/index.html?url=./files/WS1a9193826455f5ff5cf1d02511b1d000978-6b44.htm,topicNumber=d0e8759[F4] Virocore, Lighting and Materialshttps://virocore.viromedia.com/v1.0.0/docs/3d-scene-lighting[F5] Wikipedia, Phong Reflection Modelhttps://en.wikipedia.org/wiki/Phong_reflection_model[F6] Wikipedia, Blinn–Phong reflection modelhttps://en.wikipedia.org/wiki/Blinn%E2%80%93Phong_reflection_model#cite_note-4[F7] Ridgestd，从 Microfacet 到 GGX 反射模型http://ridgestd.github.io/2019/03/18/ggx-shader/[F8] Alan Zucconi, Fast Subsurface Scattering in Unity (Part 2)https://www.alanzucconi.com/tag/sss/[F9] Polygon Runway, Toon Shading Tutorial for Blender 2.8 with Commentaryhttps://www.youtube.com/watch?v=kriKwtzZWFg[F10] Blendernpr, Basic Toon Shaders with Blender http://blendernpr.org/basic-toon-shaders-with-blender-internal/[F11] 邓佳笛，在 Unity 进行水墨风 3D 渲染的尝试， https://zhuanlan.zhihu.com/p/25346977[F12] Wikipedia, Graphics_pipeline， https://en.wikipedia.org/wiki/Graphics_pipeline硬核干货！各路专家编制+腾讯翻译的《PBR指引手册》（二）万物皆可 PBR， 本手册带你知其然也知其所以然。阅读文章 > 欢迎关注作者微信公众号：「腾讯ISUX」本篇来源：优设网原文地址：https://www.uisdc.com/3d-to-h5-workflow
期刊 设计规范 设计师 本篇文章邀请了我们团队的期刊主设计师升哥来参与共同写作，感谢升哥提供的大量关键素材。对于一个设计团队来说，除了要完成产品设计外，海报、banner、网站、电子刊物等也是我们要去设计的。这些设计并不比设计产品界面来的简单，里面门道多多。2022 开年，我们就接下了公司内部电子期刊整年设计的工作，为了把设计支持好，让公司成员能喜欢这份刊物，同时为了团队内部设计师能形成良好的协作，在多人协作中依然能保证期刊视觉设计的一致性，我们团队加班加点，齐心协力，完成了年度电子期刊的设计规范指南。好了，话不多说，我们开始「电子期刊」设计规范指南的七七八八吧。背景随着公司技术栈能力越来越丰富，人工智能、区块链、大数据、云原生、微服务等的崛起，技术栈本身的趋势与赋能业务的情况越来越好，这就需要通过一个渠道来让公司员工同时感受到技术带来的好处。这个渠道本就存在，而如何让它的影响力更大，内容更充实、阅读感受更好，是我们与期刊策划团队要一起去思考的。构建一套实用的设计规范我们团队几乎每年都有类似的设计需求，因此也积累了一些经验，但往年一个设计师就可以完成，因此也就没有去系统性地整理一套设计规范。这次不同，团队协同是完成本年度期刊设计的基础，因此我们好好捋了捋可以把期刊设计好的一些要素。我们把期刊设计定位在「实用」、「生长」两个关键词上，为什么会选择这两个词呢？一来，期刊是服务于需求方表达品牌诉求用的；二来期刊的目标用户是员工阅读者；三来，可以把期刊看成产品，是产品就会越来越好。那我们来细看「实用」与「生长」的分解。首先，设计规范要可落地，也就是需求方认可，规范可表达需求方的原始诉求，而不是设计师的艺术感受；其次，设计规范要保证切实给阅读者带去效用，设计规范是有效用指南，也就是通过设计的手段让读者可以更沉浸地进行阅读体验，获取他们想要的知识；再次，设计规范要保证设计师之前的协作是高效、无歧义的。我们不应该整理一套还要学习半天、理解半天、咨询半天的设计规范，最终只是华而不实；最后，设计规范一定是随着业务的生长而生长的，因此我们将产品化的视角带入期刊规范中，以迭代的方式构建期刊设计规范。设计规范的物料构成在为电子期刊输出设计规范前，我们需要对期刊所涉及到的内容进行解构，以保证设计规范的输出卡在要点上。我们本次的物料范畴包括以下几部分：「布局框架」包括版式、页眉、封面框架、封底框架、目录页框架、正文页框架、推荐页框架、网格规则……「设计风格」包括配色、字体字号、图标、间距、容器……「组件」代码片段、表格、人物、图形、作者简介、结束符号……「正文」摘要、大标题、段落、插图……「模块/场景」标题+作者简介……设计规范详情下面我选取「布局框架、设计风格、组件、正文、模块/场景」中的一些设计规范，与大家分享下我们的电子期刊设计规范，若有有更好的设计方案或补充经验欢迎小伙伴公众号留言哈。1. 布局框架纵观一些纸质期刊杂志，例如《第一财经》，可以发现它们的整体框架布局都是有一定规律的，以保证每期即使内容不同，也不会影响杂志的整体品牌调性，同时向读者传达一定的认知。因此我们将本年度电子期刊布局框架划分成「版式、页眉、封面、封底、目录页、正文页、推荐页」这几部分，同时使用网格规则将同类内容约束在一定的范围之内。版式：我们通常见到的期刊版式都是竖版的，本次我们最终定了横版，可能大家觉得看起来扁扁宽宽的不好看，期初我们也这么认为，后来我们集体商讨后，确实认为横版比竖版更利于用户浏览与阅读。主要在于三栏竖版在纸质期刊上问题还不大，但在电子屏幕上问题就比较大了，阅读者需要来回滚屏查看内容，阅读体验不连贯。页眉：在现代 PC 电子文档中，通常称每个页面的顶部区域为页眉。常用于显示文档的附加信息，可以插入时间、图形、公司徽标、文档标题、文件名或作者姓名等。在我们的电子期刊中，由于分为好几个版块，那么我们需要为每个版块定义各自的页眉，方便阅读者通过页眉快速定位和查找信息。并且可以让用户在阅读中不迷失方向，知道自己目前所处的位置。封面与封底：封面和封底是期刊的核心框架结构，因此在这块上我们参考了业内很多优秀杂志的做法，依据我们期刊封面与封底所要放置的内容，输出了如下规范。一般来说，封面与封底的插图部分会依据每次期刊主题不同而个性化设计，但内容敲定布局后，除非期刊大改版，或某期作为特刊出现，否则不建议随意挪动它们的位置。目录页：目录页的内容包括封面缩略图，主办方与编委人员等相关信息，版块与文章引导等。我们将这些信息按照重要程度进行依次排序，例如「主办方、编委人员等相关信息」属于必须要有，但不重要的，那么我们将其放在页面偏左下角的位置。「版块与文章引导」是主要部分，放在了视觉落点区域，占据了页面三分之二空间。正文页：正文页我们定义了每篇文章的框架结构，保证不论任何设计师排版的文章都是妥妥地一致。首先我们约定正文页的内容区域，保证内容均在此范围内呈现。接着我们约定标题、作者简介、摘要、大标题、正文部分的细节规范，通过逐层下探的方式完成正文页框架规范。推荐页：推荐页放在整个期刊的尾巴，起到总结作用。我们的推荐页中主要是书籍推荐，因此包括了书籍封面、谁推荐的、书籍标题和书籍推荐理由这几部分。我们将其进行了结构划分，设计师在设计推荐页时候，只需填入对应的内容即可。辅助线：辅助线分为横向辅助线和纵向辅助线，根据需要我们可以定义所需的辅助线情况 。本次电子期刊我们定义了外边距辅助线、栏间辅助线与横向辅助线。有了辅助线，可以保证文章布局的整齐统一与提升排版效率。2. 设计风格设计风格包括了配色、字体字号、图标、间距、容器等内容，这些规范定义了期刊的整体基调，可以保证期刊的整洁与美观。配色：关于配色，我们对期刊的不同版块定义了不同的主题色（通过主题色赋予版块人格化形象），逐步让读者通过颜色可以判断自己目前在哪个版块。各版块下的辅助色，则是由主题色进行延展的，例如版块一的主题色是深蓝，那么其下的一系列辅助色则是由深蓝拓展出来的。字体字号：在一篇文章中，除了文章标题、正文外，还会需要更多的字号形式来保证页面的美观性和用户的阅读节奏。因此，我们为不同场景建立了不同的字体大小、颜色、字重。如下为期刊的字体规范。图标：在期刊中也会遇到需要使用图标的情况，用合适的图标可以为文章点睛。我们约定了两种类型的图标提供给设计师在不同的场景中使用，假如页面效果已经比较丰富了，那么图标就用比较简单的线面图标；假如页面效果不那么丰富，那么我们可以使用有一点设计感的图标。对于这两种图标，我们约定了基础的设计要素，包括圆角、线条粗细、圆的大小等，由于期刊的图标是作为配图出现的，因此如果时间不够充裕，无需和我们在产品设计中的图标一样严谨地设计。间距：间距在期刊中无处不在，包括文章标题与作者名的间距，一级标题与正文的间距，正文行间距，正文与图片的间距等等。由于时间紧张，我们目前按照视觉舒适原则定义了一些固定值。之后我们会采用计算规则进行拓展，保证设计师在遇到例外场景时，可以自由拓展，这个思路与我们 B 端设计规范中的间距规则设计思路不谋而合。容器：期刊中的容器主要是指元素的框，我们的期刊中，有框的元素包括作者简介、摘要、插图等，因此我们定义了相应框的圆角、背景、边框的样式，如下图所示。3. 组件组件是指可被高频复用的元素，且他们可以解决某类特定场景的需求。期刊中的组件包括代码片段、表格、人物、图形、作者简介、结束符号等，这里我们引入了组件的思路主要是为了提升设计效率。每次期刊设计，需要绘制大量插图，进行大量协作与沟通，以及细节的校对等，如果所有设计都是从 0-1 开始做，那会消耗大量不必要的设计资源，因此我们引入组件来释放一部分劳动力，同时提升设计效率与设计质量。代码片段：由于我们是技术型期刊，代码块就很常见，在一篇文章中占据的篇幅不少。因此，我们梳理了代码块的设计规范，保证代码清晰易阅读。以下为代码块的设计规范。代码与正文字体一致，行高 20px；容器宽度和正文列宽保持一致；容器和内部文字上下左右间距为 20px；容器与上一层辅助线的距离为 15px。表格：以往我们没有对表格进行整理，导致每篇文章的表格设计各异，这让界面看起来非常不美观，同时每个设计师各自画一遍，也非常耗时。因此我们索性采用 B 端组件化的思路，直接将表格进行了样式规范。如下是表格的设计规范。容器宽度和正文列宽保持一致；表格行高与表头高度为 40px；容器和表格上下左右间距为 20px；容器与上一层辅助线的距离为 15px。人物：我们制作了一套图形化的人物，提供给期刊用，关于这套人物怎么设计的，我就不在这里详述了，我们设计了很久，迭代了无数个版本，等下次有机会我分享给大家，大家可以关注我的公众号「知果日记」，让信息不错过哟。人物的部分形态如下图所示。图形：我们的期刊内容包括了技术、管理、项目、流程、用户体验、测试等，因此图形是根据期刊核心需求专门输出的，以让图形能高频地被使用，而不是画一次就无效了。当然，假如给出的图形不够用，设计师可以根据规则拓展（包括画板尺寸、圆角、颜色、角度等），这部分规则也会之后专门给大家讲。以下是部分图形的示例。作者简介：每篇文章都会出现作者简介，当读者看到作者简介，就知道新的一篇文章开始了。我们给该部分也设计了规范，保证每篇文章起头部位的一致性，如下图所示。结束符号：在期刊设计上，有一个细节，那就是文章结束都会放一个「结束符号」，表示文章阐述完了，如下为结束符号。4. 正文正文包括了「摘要、大标题、段落、插图」等元素，下面我们就来看看正文的规范解构。摘要：摘要是对一篇文章的精要概括，很多读者通常会在看了摘要后选择是否要阅读全文，因此摘要写得好，对引导读者阅读全文有很重要的作用。那在设计时，我们也会将摘要与正文样式区分出来，让读者明确知道这是摘要。大标题：大标题的设计规范比较简单，包括字体、字体大小、字重、是否折行、与周边的间距等。段落：段落的文字大小、字间距、行高等可以整体表达段落的稀疏程度，稀疏程度刚刚好的段落，可以保证读者长时间阅读不疲劳。以下是段落排版规范。插图：在电子期刊中，图作为对文字的解释，以及缓解用户长期阅读文字的视觉疲劳，被作为文章必不可少的一部分出现。没有图的文章，会让人觉得少了些什么。以下是插图的设计规范。插图背景为白色 + 金色边框，要求结构清晰，用色克制（首先选择版块辅助色，或用主题色拓展），文字大小尽量往正文字体大小靠拢（不要过小或过大）；插图内容容器距离主容器上下左右 20px。5. 模块/场景模块和场景是组件的 plus 版本，它是将一些带有业务要素但又非常常用的原子级组件进行了组装。这里举个「标题+作者简介区域」的 plus 组件例子。这块区域是非常固定的，做成组件后，方便设计师直接拉取粘贴用，如下图所示。设计协作分工说完了设计规范，我再和大家说说支持设计规范可以被较好落实下去的团队协作方式。期刊每两个月一期，我们每期会有不同的小组跟进完成，那么这里就需要有协作的规则被定下来，并真切地传达到每一位设计师心中。我们定了每期的期刊负责人、主设计师与辅助设计师。期刊负责人：主要是项目跟进、进度把控、任务分配、沟通协调、全局统筹等；主设计师：需要关注期刊主题如何被呈现和传达，他需要输出主 KV 与把控期刊整体视觉基调；辅助设计师：主要的职责就是文章排版咯。我这里和大家分享下「主设计师」的具体职责。常见问题总结我们还汇总了一些在期刊设计中的常见问题，为新进来协作的设计师提供指导，保证他们能在设计中提前预防。标点符号如“”，很容易打错成““ ，需要注意；文本之间很容易多加空格，需要去掉；数字标点要么统一半角，要么统一全角。延展情况是：文章中出现的标点要统一，不要出现中英文标点混用；项目符号样式要统一，每篇文章保持一致；文章内容有配图时，“如图一”、“如下图”等描述尽量保持统一；配图下面的解释排版需要一致，例如位置；属于同一段落的内容，段落间无须特意换行；复制代码，勿漏掉括号、符号等内容；内容缩进要符合逻辑，避免造成错乱；算式排版要符合逻辑，不可随意裁剪；保证每行文字占总宽的 30%，不要出现一行只有一个字或者只有一个标点符号的情况。END本文主要和大家聊了聊「电子期刊」的设计规范，我自己整体的感觉是和做 B 端设计规范很类似，在定下大框架后，需要下钻细节，并且可以使用组件化的思维构建期刊规范。本规范只是 1.0 版本，我们目前还在迭代，根据每次实践进行复盘与反向总结，保证「电子期刊」设计规范指南的持久生命力和可用性、易用性。5000 字干货！超全面的B端设计规范总结不知不觉已经深耕在 B 端这个领域 3 年有余，很多人接触过 B 端后会觉得乏味，因为 B 端的设计在视觉上并没有 C 端那么有冲击力，更多的是结合业务逻辑，设计出符合业务需求的交互，以及界面排版的合理性，达到产品的可用性、易用性、好用性。阅读文章 > 欢迎关注作者微信公众号：「知果日记」本篇来源：优设网原文地址：https://www.uisdc.com/electronic-journals-design
影片 静音 就能 在 Instagram 拍摄影片限时动态时只要将上方的喇叭图标按掉，影片就会变成静音状态，要将影片转为无声非常简单，但是一般情况下如果想让影片静音要怎么做呢？有时候我们还真的会需要类似工具，例如我想分享自己录制的影片画面，但是背景声音很吵、很大声或是和影片完全没有关连，这时候就可以考虑将影片的音频移除、消音，仅保留下影片画面。若手边没有影片编辑软件或是相关的应用程序，最简单的方法就是使用在线工具，优点是无需下载或安装软件，只要透过浏览器打开网站、将影片文件上传后服务就会把影片转为静音，缺点是影片需要上传到第三方服务器，不一定每个人都能接受，使用前请自行斟酌。本文收录六个免费在线影片静音工具，支持常见的影片格式例如 MP4、AVI、MOV，它们可上传的影片大小不太一样，此外，还有一些号称免费的服务会强制在影片加入水印，需要付费订阅才能下载影片，我就不在这篇文章里面附上，当然它们可以做到的功能都差不多，如果无法正常使用可以选择其他同类型服务试试看。AudioRemoverAudioRemover 是一个免费服务，提供用户从影片移除音频服务而且无需重新编码，以浏览器开启就能使用，无论是 Windows 和 Mac 都能正常执行。这项服务支持 MP4、AVI、MOV 等影片格式，单个文件最大不超过 500 MB，开启 AudioRemover 点选「Browse」然后选择要静音处理的影片文件后按下「Upload Video」就能移除音效，处理完成后会跳出下载链接。Kapwing Mute VideoKapwing Mute Video 是 Kapwing 提供的影片静音工具，可在线将使用者上传的影片移除音效内容，依照说明在线的影片消音工具不用下载、安装任何软件，而且免费、操作简单，甚至可以在手机、平板使用，Kapwing Mute Video 除了支持本机影片文件，也能直接输入影片网址进行静音编辑。要注意的是在下载 Kapwing 处理后的影片时需要注册或登入账号，可直接以 Google、Facebook 账号登入，无需额外付费，不过转换后的影片无法设定为私人模式，下载后记得手动删除。Apowersoft Mute Video OnlineMute Video Online 是 Apowersoft 旗下的免费在线服务，只要将影片拖曳到网站就能去除背景音频、达到让影片静音的效果，网站没有明确标示支持的影片格式或文件大小，将影片上传后自动处理，显示最终预览，没问题的话储存影片就能完成编辑，非常简单。Remove Audio from VideoRemove Audio from Video 是 Online UniConverter 提供的在线工具，比较特别是除了支持从本机计算机上传影片文件，也能透过 Dropbox、Google Drive 或 YouTube 汇入文件，还有调整影片速度、重复循环播放影片和制作影片倒带效果。没有注册或免费会员可上传最多 100 MB 影片文件，没有广告、也不会加入水印，支持所有格式包括 MP4、MOV、WMV、MKV、AVI 等等，也不会因为压缩或编码而降低影像画质。Ezgif Mute VideoEzgif Mute Video 是知名的 Ezgif 提供的影片静音工具，旗下还有各种图片影片的编辑、转档或优化工具，Ezgif 影片静音工具支持 MP4、WebM、AVI、MPEG、FLV、MOV、3GP 和各种常见常用的影片格式，单个文件最大不能超过 100 MB，支持贴上影片网址直接汇入文件。Mute a Video Online by MP4CompressMute a Video Online 是 MP4Compress 提供的在线免费影片静音工具，可以从 MP4 影片将音频内容移除，100% 免费！只要选择 MP4 文件（最大不超过 500 MB）然后点选「Upload Video File」将文件上传就能进行处理，这项服务完全免费、全自动，也不会在影片加入水印或其他广告内容，和最前面介绍的 AudioRemover 有点像，可能是同一间公司的服务。后记刚好最近自己有需要将影片音频移除、仅留下影片画面的静音需求，搜索一下网络工具，将自己实际使用的选项整理成一篇文章和大家分享。我个人比较喜欢「影片上传后自动静音处理」的类型，完全不需要进行任何编辑，可以说方便性最高！除此之外，还有一些会在影片加入水印广告的工具要用户付费升级来移除广告，我就不在这里列出，有很多服务都能免费做到，不一定需要多花钱。在线就能剪辑音频！这个免费网站太酷了！本文要介绍的「AudioMass」是一个免费、开放源码的线上音频编辑器，在浏览器中就能编修音乐，可从本机电脑上传、以网址汇入音频或是直接录音，编辑器会呈现像是一般音频编辑软件的波形图，利用鼠标就能进行修剪、裁切、剪贴或是加入更多效果，例如分段压缩、均衡器（Equalizer）、效果器、延阅读文章 > 本篇来源：优设网原文地址：https://www.uisdc.com/6-auto-mute-tools
客户 政府 包容性 前言调查显示，2020 年我国老年人口达到约 2.43 亿，占比 18%，50 岁以上的网民群体占比 22.8%，G 端可视化面对的主要群体就是政府领导，而政府大领导普遍都是市级及其以上，年纪大多数为 60 岁往上，属于适老化的涵盖范围，因此探索适老化在 G 端大屏中的体现，也是很有必要的。有人说：适老化是减少操作，注重呈现，是在设计方案中的体现。并且适老化设计，本身也是给老年人群体的一种特殊定制。在我眼里看来：G 端（政府端 ）可视化大屏本身就是面向定制化，不存在特殊化或普遍化，因为他的群体本身就是老年客户，既然是这个群体，那么适老化就是我们设计师需要考虑的。通用性和包容性设计首先一般讲适老化无障碍设计，我们都要提到的就是通用性设计和包容性设计。1. 通用性设计原则：强调设计所有的系统和产品，使每个人都能使用，无论他们的年龄或能力。百度百科将通用设计定义为：“能被失能者所使用，就更能被所有的人使用。通用设计的核心思想是：把所有人都看成是程度不同的能力障碍者，即人的能力是有限的，人们具有的能力不同，在不同环境具有的能力也不同。”通用设计中应当也包含对于特殊人群的基本考虑，要让目标人群觉得：鱼和熊掌都可兼得，既照顾了特殊人群的使用，又兼顾所有人。2. 包容性设计原则 ：好的设计应该满足尽可能多得使用者的需求。百度百科将包容性设计定义为：包容性设计着眼于清楚源于使用主体而造成的各种障碍，使每个个体都能平等、自信、独立的正常使用，为同一适用条件下的互动提供了新的视角，也为创造性和问题解决导向的设计提供了机会。那么我们应该如何践行通用性和包容性设计在 G 端可视化中的理念呢？客户的困境-现状分析通过分析客户的困境，结合现状进行深入分析，发掘政府端客户的普遍性存在的问题。1. 年龄分布适老大多数政府省市级领导人的年纪均在 60 左右，由于年龄普遍较大，对于设计的认知会有偏差，对于审美的把控以及设计本身的价值理解会偏弱。从去年十月上旬开始，省级党委换届拉开大幕，在至今近 8 个月的时间里，全国 31 个省区市先后展开换届。经过此次换届，干部队伍的年龄结构得到进一步优化，初步形成“50 后”为主导、“60 后”渐成中坚的格局。根据公开资料统计，31 省区市书记平均年龄为 58.1 岁。其中，“40 后”书记有 6 位，“50 后”有 22 位，“60 后”也有 3 位，某区党委书记胡 XX 和 XX 省委书记孙 XX 同为 63 年出生，是最年轻的书记。2. 生理机能下降视力：老年人视力的下降，影响眼睛对空间、颜色、明暗等加工等；听力：听力弱化造成的听不清楚，尤其是在嘈杂的环境中，老年人听起声音来会更吃力；表达力：专业化的术语以及需求，会使表达和沟通不便；3. 认知能力不足互联网和人工智能等技术发展变化太快导致认知力的不足。绝大多数的老年人对现在数字化的产品很陌生，再加上复杂的界面操作，需要反复的学习使用才能熟悉掌握。设计的探索-客户心理ToG 类型的项目，我们的客户群体是政府的某个部门（G 端行业中，政府部门因为权限和管辖内容的不同，客户的诉求也会不一样，同时由于决策层是一级一级往上的，对于各个层级的领导都需要去进行满足，对于设计的要求也就更高了），因此我们需要对客户的心理进行重点挖掘。1. 政府部门客户的特点严谨务实原则政府部门的领导或者员工大多数都是高知人群，对于工作的态度都是非常严谨，喜欢按规矩办事，分工明确，力求事情做到一丝不苟，有理有据，讲究严谨做人，务实做事。安全性原则政府部门的保密工作需要做的非常到位，尤其是关于公安等民生问题时。另外政府类客户一般对于数据的保密做的非常好，基本都是内网开发，私有化部署，一切互联网的东西连接内网都会报警。如果是外网开发，则需要做好数据存储，一定要非常注重数据安全。实用性原则政府类的软件或者产品，基本都有很强的实用性，实用好用才是客户最关心的问题，因此在系统架构上需要做到，简单高效，快速触达，减少客户的学习成本。所以针对政府客户特点，我们需要做到严谨务实的态度，安全实用，简单高效。2. 政府部门客户的需求正文字要大对于文字大小的需求比较强烈，提及最多的就是字体放大，加粗。屏幕要看清对于画面能够看清，需要重点表现在前景和背景的色彩对比度。画面要酷炫对于画面的表现，要更加的酷炫，在客户眼里，动态图形效果远远大于静态效果图。饱和度要高随着年龄增长，人类的晶状体会变黄变浑浊，导致选择性的吸收蓝光。所以蓝色色调在老年人眼中可能会出现模糊褪色的视觉效果，从而降低元素在界面中的对比度， 因此需要提高色彩的饱和度。逻辑要清晰产品整体架构以及内容逻辑清晰，简单高效，上手简易。所以针对政府客户的需求，我们需要做到画面清晰，视觉酷炫，色彩明亮，逻辑清晰。策略的应对-解决方案通过对政府类客户的分析，挖掘客户最深层的需求，针对于以上的关键点，提出适合的解决方案，大体在一下 6 个方面的全面解析。1. 解决方案：框架对于系统框架以及布局进行一屏式展示，减少系统层级的递进。对于展示形式上可以更清晰准确， 尽量模块化展示每个需求，做到聚焦用户视角，提升画面表现。整体交互流程简化，复杂以及多层级弹框尽量少使用。2. 解决方案：字体中文字体中文字体类型的使用，在使用数字屏幕阅读时，字体的选择要选用无衬线体（比如黑体，微软雅黑）厚重一点，不可选用衬线体（比如宋体，书法体）比较单薄。英文字体英文字体类型的使用，英文数字的字体选择更明显的粗体，因为要展示数据，使得数据展示更加直观，依旧是选用无衬线体，比较推荐：D-DIN 字体。字体大小字体大小的定义。在字体大小的选择上，参考了页面上常规大小，定义了一套关于不同尺寸下的标准字号，正常 1080P 页面，最小字号不小于 16px，具体字体大小还需要参考设备清晰度，环境灯光，视距等因素。3. 解决方案：颜色颜色对比界面中的前景与背景的对比度，是否足以让政府类客户清楚识别；颜色不应该用作传达信息的唯一视觉手段，需要用额外的文字提示；通过 H（色相）S（饱和度）B（明度）的数值来划分色域，在保持 H 值不变的前提下，定义了 10 个色域。所以在前后景的颜色选择上，满足跨度至少为 6，才能让目标人群准确识别文字信息。对比度检测视觉呈现以及文案图像对比度至少要有 7:1，大文本至少有 4.5:1 的对比度。有很多在线工具可以帮助检测颜色对比度以及是否达标，如 Contrast Ratio 在线检测工具：https://contrast-ratio.com/颜色多样画面采用多种饱和度较高的颜色，而不是单色；颜色的丰富程度决定了画面的视觉表达，色彩越丰富，画面表现越好；4. 解决方案：图形增加图形的占比大小，提升视觉上的表现；尽量采用识别度较强的图形和图标，尽可能贴近客户的认知范畴；图标和图形尽量搭配文字描述，方便客户更清晰更快速理解。5. 解决方案：视距观测距离的远近，也决定着画面的展示效果，尽可能的拉近观测距离；正常视距观测下，以常规设计规范去制定即可，如若观测距离较近，则可适当缩小相应的视觉表现，反而观测距离较远，则放大视觉。6. 解决方案：设备设备的尺寸、精度，分辨率大小都会影响目标人群的体验；在设备精度较低，或者说点间距过大时，应当适当放大视觉表现，点间距小的则显示非常清晰，可适当缩小视觉表现。规范的提炼-应用推广为了保证适老化的推广，需要在适老化的基础上统一标准，在字体，颜色，框架，图形等内容上做出提炼，深入了解目标客户的需求以及客户心理。本着严谨务实，安全性，实用性等原则，沉淀出一套符合目标人群的设计规范，应用并推广到不同设计团队以及推广到广大设计师中去。未来的期许-设计使命我们需要不断践行适老化设计原则，体现设计的通用性和包容性，应当在设计表现和产品功能上更加的包容这个群体。人工智能大数据时代，虽说政府类客户会比普通人更容易接受，但是受制于某些原因，推动解决老年人面对智能技术的问题解决才是重中之中。设计师也需要运用自己的专业性，来帮助目标人群融入数字化的生活中去。因为在不久的将来，我们也会变成这个群体，当我们面对这些束手无策时，那时的设计又会是如何适老的呢？适老化设计是适合所有人的设计，所有的设计师都应该密切关注。全篇总结不要依赖颜色来传达信息（客户更喜欢文本，有特殊含义除外：四色预警，国标色）；文字展示要清晰，字号大小要更加适合目标群体；提高颜色对比度，丰富画面色彩，禁止使用单一色系；界面中重要元素应尽量避免使用蓝色（特殊行业除外：公安等其他）；增加图形以及图标的视觉表现，尽可能做到一目了然，便于客户理解；尽可能拉近观测距离，提升观测体验；选用高性能，高清晰设备，提升观感，优化客户体验；针对政府客户特点，做到态度严谨务实，安全实用，简单高效；针对政府客户的需求，做到画面清晰，视觉酷炫，色彩丰富明亮，逻辑清晰；盲目照搬照抄而不去具体问题具体分析，这些无障碍设计在某种程度上就会成为“障碍”设计。超全面的数据可视化设计指南：设备篇各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。阅读文章 > 欢迎关注作者的微信公众号；BDR可视化设计本篇来源：优设网原文地址：https://www.uisdc.com/g-end-aging-design
样机 工具 在线 大家好，2022 年第一波设计干货合集来了！全新的黑白照片图库、动态样机生成工具、像素风纹理生成器、免费的 iPhone 13 样机和风格现代的 PPT 模板，都包含在本次的合集当中，另外，特别推荐 NextMockup 平台，它可以帮助设计师将闲置的飞机稿化为收益，感兴趣的同学往下看：1、高素质黑白照片图库https://blackwhite.pictures/这个名为 Black White Pictures 的图库网站提供的全部都是高素质的黑白照片，这里的找都是免费的。和日常使用的彩色照片不同，黑白照片对于构图和元素形体对比有更高的要求，优质的黑白照片能够提供更强的形式感，这个图库就可以专门应对这种需求。2、页面滚动样机生成工具https://scrollingmockup.io/Scrolling Mockup 是一个在线样机生成工具，不过和很多同类同居不同的地方在于，Scrolling 能够生成动态的效果，能够将你的网页插入到它所提供的样机当中，生成自动滚动的视觉效果，方便你来展示实际效果。3、多样式按钮生成器https://markodenic.com/tools/buttons-generator/这个名为 Buttons Generator 的工具提供了很多不同的按钮样式，从3D到渐变、阴影、描边、复古、动画、等等全都有，你需要做的就是找到你想要的样式，复制代码，然后贴到你想用的地方，直接使用。4、免费开源截图优化包装工具https://pika.rishimohan.me/Pika 是一个非常省心的在线图片包装工具，它可以将你需要包装的截图或者图片直接置入到这个工具当中，添加渐变背景，调整阴影，添加圆角，调整间距，实现图片的快速包装。这个工具是完全免费的。5、像素风重复纹理生成工具https://fffuel.co/pppixelatepppixelate 是一个可以在线绘制像素肌理，并且生成重复的矢量图案的工具，这个工具和之前推荐过的很多工具一样，除了可以导出 PNG 格式的图片之外，还能生成 SVG 格式的图片和代码。6、高效的设计平台 NextMockuphttps://nextmockup.com/collect-and-customize做设计的同学手头应该都攒了不少飞机稿了吧，这个名为 Next Mockup 的平台可以供你销售自己闲置的飞机稿，然后用户也可以在这里以较低的价格下载和定制这些飞机稿，毕竟 90 % 的网页、APP 在结构上都是高度相似的，很多时候只需要稍加定制就能满足自己的需求。7、高素质免费 iPhone 13 样机这是 Aksapix Studio 最新发布的免费 iPhone 13 样机，整体质感颇为突出，内置的智能图层可以快速进行替换和定制，这个样机是完全免费可商用的，可以在文章开头和结尾的百度云链接中下载。8、风格现代的展示模板这个名为 Waves Presentation Template 的 PPT 模板的核心视觉元素就是这种扁平风的波纹元素，这套模板总计有 48 张，内置的版式丰富而多样，可以应对绝大多数的设计需求。这套PPT 是免费的，不过仅可供个人使用，具体文件可以在文章开头和结尾的百度云链接中下载。9、带有肌理的手写字体Soulyouth手写字体总能够很好的增加版面和内容的质感，这套名为 Soulyouth 的英文字体和绝大多数的字体不一样，笔触并非平滑规律的，而是带有明显的笔触肌理，字符结构老道细致，连笔自然舒适，可以说是装饰性极强的一款手写字体了。这款字体是免费的，不过仅供个人使用，文件可以在文章开头和结尾的百度云链接中下载。往期干货：本篇来源：优设网原文地址：https://www.uisdc.com/2022-1-design-resources-vol1
视觉 图标 内容 背景顺丰速运 APP 围绕寄件生活场景，为用户提供寄快递、查包裹、查运费、网点服务等一站式快递物流服务。随着 2021 年业务发展和内容丰富，用户对产品体验有着更高的诉求。基于用户声音及产品目标，从体验设计纬度定位出现有界面风格陈旧、操作体验不统一、品牌感知弱等问题，因此我们对顺丰速运 APP 进行全新设计升级。接下来，我们将此次改版的内容以及设计上的思考拿出来与大家一起分享，感兴趣的小伙伴可以前往应用市场下载「顺丰速运 APP」进行体验哦。前期分析通过数据分析、用户声音、体验自查、竞品分析、行业设计趋势分析，存在以下几个问题：产品特色不够明显，与竞品拉不开差异，核心功能体验路径冗长且复杂视觉风格近一年没有更新迭代品牌感知弱，缺乏情感化传达1. 设定设计目标针对现有问题，最终确定设计目标为提升顺丰速运 APP 的视觉美观度、操作易用性及品牌辨识度，强化产品的核心竞争力。实现这一目标我们提取三个关键词：「美观 – 全新视觉升级」从界面布局、色彩、图标、字体等进行全新视觉体验升级，让用户感受到更好的视觉体验「多元 – 更丰富的服务体验」针对日益增加的多样化需求，设计上从多元工具整合和自定义设置两个角度出发，进行多元化服务设计探索「高效 – 服务高效性」强化信息层级展示，提高用户查找信息效率2. 全新视觉现有视觉风格满足不了年轻用户群体的审美诉求，新旧版本交替导致视觉界面体验不一致。伴随着产品服务体验不断升级，视觉风格也亟需进行升级。本次视觉升级围绕颜色年轻化、极简化布局、字体规范化、图标亲和力、情感化传达进行展开。色彩年轻化黑红作为顺丰的品牌色，升级后持续强化品牌感知；同时在明度和饱和度做了优化，相比之前得沉闷，优化后整体更加活泼与透气。中性色作为贯穿整个产品的颜色，进行了规范化定制 ，让 APP 整体视觉更统一成体系。极简化布局旧版本页面边距较小，呼吸感较差，内容层级不清晰。从产品的信息展示效率上考虑突出重要信息和功能，因此对承载内容的容器——信息卡片的样式和内容布局进行了结构化设计，使之可以较好地聚合各类信息，更加有利于信息流内容的清晰展现。圆形在人的视觉过程中更容易被认知，给人一种柔软治愈的感受，圆角的合理运用对容器来讲，会突显矩形内的内容，将用户的视线聚焦在内容本身。两个圆角矩形排列时更容易区分内容归属，模块化更强。字体规范字体的运用 ，为整体视觉风格一致性打好基础提升产品体验。图标识别性：颜色采用顺丰的品牌色黑红，运用了叠加撞色的手法，打造独特的视觉语言，同时强化信息层级功能性：通过设计上手法进行区分，例如：图标线性的表现形式一致性：采用圆角，结合圆润视觉语言，统一视觉风格美观性：整体视觉风格更加年轻，活泼底部导航栏图标在图标微动效设计上贴合图形的意义，增加弹动效果，让用户在切换时感知状态的变化。想学更多的图标动效：本篇来源：优设网原文地址：https://www.uisdc.com/express-app-v9-0
用户 语义 个性 日常生活和工作中，我们与各种各样的界面打交道。作为设计师，我们花很多时间去设计好用便捷的流程，打磨精美的视觉呈现，关注数据带来的变化，亦或是从全局出发制定体验策略。往往会忽略了界面中一个重要的组成——语言文字。本篇将重点介绍UX语义个性，包含语义个性的价值、定义、展示场合、塑造方式、典型文案语体等。本指南适用于交互、UI、视觉、产品设计人员、文字设计工作者，以及所有希望通过语言文字让设计更美好的人 为什么？语义个性的价值1. 对于品牌&产品随着经济水平的不断提高，如今用户的消费导向已经悄然从以前的功能导向转移到体验导向，大家愿意为美好的感受买单。同样，许多互联网产品已经进入成熟期，但很多产品功能模式趋同难以在用户心中拉开差异。在这种大环境下，想让品牌&产品在用户心中占有一席之地，除了规划自身独特的功能、打造品牌之外，设计“一种带有个性的语义”同样能够低成本地让产品脱颖而出，提高其友好度、信任度，甚至产生溢价效应。2. 对于用户带有个性的UX语义，能使用户与产品愉悦沟通，产生情感的连接，调动用户快乐、惊喜、信任等情绪。让用户感觉是和一个“人”或是“朋友”在对话，而不是面对着一个冷冰冰的机器。了解一下，什么是语义个性？个性，亦称为人格，通常指个人面貌或心理特征。语义个性，即通过语言文字表达，展现出的鲜明的人格特质。简单来说，就是定义出与用户对话的，是什么样的人，年龄多少，是男是女，做什么职业，性格如何，甚至还可以构想出TA的长相和行为。虽然大部分的UX文案更注重短期价值，只需达到效力即可，但我们也希望文案能在整个产品中延续、更具生命力和影响力。这就需要文案有「被记住」的力量，让用户能感受到的产品背后的性格，也就是语义个性。一旦语义个性构建起来，产品的所有表达和文案都要符合这个“人设”。注意！在适当的场合展示当我们跃跃欲试，想要开始发挥创意书写个性文案之前，必须要注意的一点是：并不是所有产品和所有场合都适合添加个性。一些大综合类服务平台（如58）需要覆盖更多元的业务，更广泛的用户群体，很难聚焦某一个性去触达所有用户。另外，像一些追求效率的场景，需要用户聚焦当下流程、快速做出决策，过多的个性展现可能会产生干扰。例如：B端管理后台，需要快速高效的执行任务我们常接触到的，有以下4个适合展示语义个性的场景：1. 建立初印象用户与产品初次接触的场景，是建立初印象的过程，第一印象非常重要。社会心理学中，对他人“印象”的形成有一个非常重要的规律：首因效应 (primacy effect) ，即“第一印象效应”，是说人们比较重视最先得到的信息，并据此对他人作出判断。通过个性语义的表达，有助于产品更好地展示特点，在用户心中留下更为深刻、加分的初印象。具体体现在产品中，如启动页、开屏、登陆流程、新手引导等。2. 空置场景某些情况下，由于技术或用户操作原因，导致行为空置，且无需进行决策。此时，用户无法与产品产生交互，可能无事可做，甚至可能产生焦虑或烦躁等负面情绪。这时，个性语义的表达，有助于产品更好地安抚用户，甚至成为加分项。具体体现在产品中，如缺省状态、加载等。3. 对话式场景随着技术的发展，自然对话愈发频繁出现在功能中，用户与产品有些天然的对话式场景。如聊天机器人、微聊、直播等。这时，用户的预期便是与“人”对话，对产品的心理预期也随之提高。个性语义在此时需要为用户塑造一个正在与之聊天的“人”，让用户感受到真实。4. 重品牌传递场景还有一些本身就重品牌传递的场景，需要强化个性，强调品牌展现。如成长体系、个人中心、详情页等。产品需要不断告诉用户我们是谁，我们能为你做什么，让用户记住。写！如何塑造语义个性唠叨了这么多，你一定想知道到底如何写？如何才能塑造语义个性？接下来我们就不废话，直接来实际的！（作者在此处小小施展了一下个性）语义个性的塑造是一个复杂而又迷人的过程，涉及「用户分析」「场景分析」「字词选择」「语言风格选择」「语言结构」等等多个方面。从实用可执行的角度来说，我们总结了以下3个步骤，能够顺利地塑造我们产品独特的语义个性：STEP1. 基于用户与产品产品是表达的主体，需要展示个性；用户是表达的对象，要接纳其个性。这是一个双向的过程。因此，我们在开始塑造个性前，要率先进行双向思考：我们的用户（表达对象）是谁？他们的偏好和诉求是什么？我们的产品（表达主体）想向用户展示什么个性？如何让对方接受并喜欢？58UXD公众号语义塑造案例STEP2. 考虑场景与情绪语义个性是相对统一，可辨认的，但语气是会随着场景产生变化的，不同场景下，表达是有差异的。就像我们在与家人唠家常时的语气和在工作开会时的语气显然是不一样的。我们要充分考虑不同场景特征（欢迎、提供错误消息、庆祝成功…），以及用户在此时的情绪（期待、欢喜、紧张…），去定义文案如何相应变化。58UXD公众号语义塑造案例STEP3. 明确表达方式综合用户与场景的考量，最终落到表达上，需要我们反复斟酌，包括字词选择、句式选择，以及语言组合方式等。热情洋溢或简单直给，走心煽情或高冷忧郁，通过不同的表达方式，会给用户带来截然不同的感受，也会使产品在用户心中留下完全不同的个性印象。58UXD公众号语义塑造案例形成语体，让个性可复刻大多数产品和使用场景下，语义表达具有共性和通用特征。在对公司内部产品以及市面上的产品进行大量分析后，我们总结归纳出了以下5种常用语体，具备一定的辨识度，并对每一种语体的特征、写法及应用场景进行详细解读。1. 服务体特征乐于帮助，谦逊礼让，服务感强，对用户展示尊敬语言1）使用敬语词汇，如“您”“请”“尊敬的xx”..2）句式完整，标点使用规范。3）描述详尽，体现关怀。适用场景1）顾问/客服2）用户遇到问题&困难时2. 霸总体特征霸道酷拽，高冷直率，强硬但不强迫，让用户心服口服语言1）主语为“我”，如：“我只说一遍”2）语句简短有气势：“爱发不发”“点我！”“看我！”适用场景引起用户注意，反向刺激用户做某事3. 可爱体特征乖巧惹人爱，无公害，让用户感到亲近语言1）使用可爱软萌的词汇：“好呢”“么么”“好哒”“嗷嗷”“加油鸭”2）生动活泼的语气：“哇哦”“哦～”“呀”“呦”“吧”“！”适用场景1）鼓励或激励用户做某事2）助手&可爱角色的对话表述4. 专家/导师体特征严肃认真，严谨细致，让用户感到专业语言1）陈述客观事实2）使用专业词汇适用场景1）凸显专业性的产品：如知识类/金融类等2）涉及信任相关的场景：保障3）影响用户重要决策场景：下单/支付5. 销售体特征氛围强烈，相对夸张，善用消费者心理语言1）打造消费氛围：“爆卖xxx件” “直降”“5折快抢”“限时抢购 ”“券后仅需xxx元 ”“秒杀价”“首单惊喜价”等2）低价辅助说明：“近59天最低价，即将恢复3.58元”“比日常省7元”“每人限领1次，11月11日24点内有效”等3）推荐场域营造：“好评如潮”“2000+人付款”“收藏上千”“人气飙升店铺”“您多次消费过的商家”“819个质感女人逛过”“200位达人深度挖掘”“近7天销量上千”等适用场景1）运营营销活动2）电商3）直播写在最后个性化文案构建需要综合产品调性、用户特征、当下场景等多方面因素，选择最合适的语体及合适的出现时机。虽然优秀的个性化文案可以对品牌、产品、用户产生正向影响，但切不可违背在《UX语义设计指南基础篇》中提到的三大基本原则[准确] [清晰] [精炼]，否则将存在让用户产生认知负荷(无法理解产品想传达的信息)的风险，顾此失彼。附.参考文献《小小的文案》《触动人心的体验设计文字的艺术》本篇来源：优设网原文地址：https://www.uisdc.com/ux-semantics
动画 终端 设计师 在终端 APP 中，动画非常常见，它可以辅助视觉制造焦点，同时也可以让用户交互更加顺滑，但动画的实现却是设计师和研发群体的一个痛点。如何辅助设计师设计高性能炫酷的动画、如何将设计师设计的动画准确无误的还原到终端 APP 上是业界不断探索和解决的问题。图 1 传统动画实现流程图当前最好的动画设计软件是 Adobe After Effects（简称 AE），从 AE 动画制作到终端 APP 呈现，传统的实现方式如图 1 所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。近几年，业界诞生了像 Lottie、SVGA 这样的动画工作流解决方案，虽然在一定程度上提升了生产效率，但存在 AE 支持能力有限、动画性能难以保证、配套工具支持有限的问题。本篇来源：优设网原文地址：https://www.uisdc.com/pag
银发 用户 手机 银发用户，顾名思义，是指那些头发开始花白或已经花白了的中老年人。根据世界卫生组织的标准，本文把银发用户定义为 45 岁及以上使用移动智能手机设备的中老年人。国家统计局数据显示，近年来我国 45 岁及以上人口增长迅速，从 2010 年的 4.5 亿，占总人口 33%，到 2019 年达到 5.9 亿，占总人口 42%。我国老龄化程度明显加深主要来源于上世纪六七十年代我国第二波婴儿潮陆续步入中老年。银发族有时间，特别是半退休或退休后的中老年人，有更多的空闲时间，玩手机成为他们的新宠。此外，银发族也有钱，根据中国老龄科学研究中心的预测，到 2050 年，我国老年人口消费潜力将达到 106 万亿，占 GDP 33%，是我国未来经济增长的重要引擎。然而随着年龄的增长，人们在认知和生理上会出现老化现象，表现在接触新产品时容易受挫，使用手机也存在诸多困难。如何让中老年同胞理解一个产品怎么用，并能快速用起来，就变得非常关键。2020 年 11 月，国务院办公厅印发了《关于切实解决老年人运用智能技术困难的实施方案》，从国家层面大力推动解决老年人使用智能设备时遇到的困难。对于手机等智能终端产品，需要进行适老化改造，使其具备大屏幕、大字体、大音量、大电池容量、操作简单等更方便老年人使用的特点。重视银发用户，为他们设计出更方便、更贴心的好产品，首先需要走入他们的生活，深入了解他们这代人。前不久 MEUX 用研对银发用户开展了专项调研，了解银发族的成长背景、生活状态、消费观、审美观、手机 APP 选用等方面。本文把关键发现整理成 9 问 9 答，带大家一起走进银发用户的世界！银发用户的特点Q1 他们的成长背景是怎样的？时代变迁对他们带来了哪些影响？与生于繁华盛世的年轻一代不同，现在处于 45-65 岁的银发族们成长于峥嵘岁月。以 60 岁的老年人为例，他们出生时赶上了三年自然灾害，读书时碰上文革，上有老下有小的年纪遇到下岗潮，物质匮乏和社会动荡带来这群人的安全感较低，更加规矩本分，能吃苦。中年人相比之下则好多了，以 50 岁为例，个性形成期在改革复苏和国家加速腾飞的阶段，这些改革和突破让这群人相对于上一辈来说更加开放包容，更富有开创精神。时代的变迁对他们使用互联网也产生了重要影响。生于互联网时代的年轻人，从小就接触电脑、手机，如果说年轻一代是“移动网络原住民”，那中年人是很典型的从 PC 时代到手机时代的“移动网络移民”，而触网特别是接触手机比较晚的老年人则可以堪称“网络难民”。Q2 银发族的生活状态是怎样的？退休前后有怎样的变化？生活阶段决定生活状态。他们在不同阶段，生活状态很不一样。1. 事业末期的中年人，上有老下有小，还要担心被年轻人超越和淘汰。他们是“忙碌”、“疲惫”和“焦虑”的，是肩负重担的一族。2. 刚退休的老年人，退休后是他们真正人生的开始，他们有更多时间投入到自己的爱好中，可以放飞自我，是典型的“乐活族”。3. 等有了孙子以后，银发族就开始围着孙子转，有一些也跟着子女来到大城市生活，帮子女带第三代，忙里偷闲娱乐，成为典型的“北漂养老族”。对于退休老人来说，除了普遍性的带孙辈获得成就感以外，退休的阿姨们主要通过社交重拾成就感，比如广场舞、K 歌、做音乐相册等，也相应爆红了像「糖豆」、「全民 K 歌」、「小年糕」这样的线上产品。阿姨们通过社交，证明自己的美和年轻。而对于退休了的叔叔们，他们不像阿姨们对社交有着强诉求，对他们来说，更多是要证明自己还很牛。比如在兴趣层面，他们不少是运动达人，公园里的高低杠区堪比奥运会体操比赛现场，各种硬核健身让外国人误以为中国人都会功夫；他们中也不乏文艺青年，带着长枪短炮去拍照，又或是在小区里一边高谈论阔一边下象棋，还有的人拿着大毛笔在广场的地板上写书法；还有一些则是理财达人，这不前段时间 A 股大涨不少叔叔们跑步进场，继续创造财富。然而，对于老年男性来说，目前市面上并没有像退休阿姨们那么火爆的线上产品，这块还有着很大的机会和空间。Q3 银发族的消费观念是怎样的？如何撬动他们的钱袋子呢？虽然这几年养老金不断上涨，但是银发族毕竟是经历过苦日子的人，平时除了日常开销，还要攒钱应对身体情况的不时之需，也要为改善自己或子女的居住条件储蓄。因此相比氪金悦己的年轻人，银发族更愿意把钱花在实打实的地方，他们薅羊毛的水平无人能敌！在他们的手机中我们发现了大量网赚类 APP，平时哪里促销打折冲在前面的肯定是他们。Q4 他们的审美又是怎样的？有什么特点？这是年轻人爱用的表情包这是银发族爱用的表情包没错，银发族爱用的表情包，通常以花草树木或微笑美女为背景，高饱和度色彩，带立体动态效果，再配上正能量的祝福语，我们尽情感受一下。银发用户使用手机及 APP 的情况Q5 他们爱用哪些手机 APP？根据 Quest Mobile 2020 年 12 月的数据，46 岁及以上用户月活 TOP30 APP 中排名第一位是微信，在银发手机用户中的渗透率接近 80%！这说明银发族对微信的依赖非常强，微信是他们获取资讯和知识的重要渠道。此外，46 岁及以上用户月活 TOP30 APP 中有 10 个是系统工具类软件，这个数量是年轻用户的 1.7 倍！银发用户更愿意使用实用性的工具类 APP，手机清理、手机助手、浏览器等产品成为使用主体。月活 TOP30 APP 中第二多的是移动视频类软件，总共有 6 个，这个数量几乎与年轻用户持平，说明银发用户们同样也很喜欢看视频，长视频、短视频都爱。以下是几个细分领域他们最喜欢的 APP：社交类：微信巨头明显购物类：淘宝单一头部突出长视频类：爱腾双头部明显短小视频类：抖音单一头部突出浏览器&资讯类：百度 APP、头条分天下Q6 他们喜欢的热门小众 APP 有什么特点？前面介绍了银发族普遍用得多的手机 APP，接下来我们看一看他们用的热门小众类产品。热门小众 APP 的圈选标准是：该 APP 整体月活在 1000-2000 万，按在银发用户中的活跃渗透 TGI 排序，取 TOP APP。银发族的热门小众 APP 以腰部的长短视频 APP（如咪咕视频、风行视频、乐视视频，火山极速版、波波视频、土豆视频、糖豆等）、天气 APP 和网赚类 APP 为主。视频类 APP 中值得说的是糖豆，这款定位于广场舞、健身操的短视频平台，深得银发族的喜爱。此外，我们还发现一个很有意思的现象，银发族的热门小众 APP 中有一些明显不是他们用的，比如各种学习和拍照搜题的 APP，还有像香肠派对和迷你世界这种孩子们喜爱玩的小游戏，这说明部分银发族的手机是被“一机多用”的，被第三代孙子孙女们作为学习或娱乐的工具使用。Q7 衰老对他们使用手机及 APP 带来了怎样的影响？年龄的衰老（老化）对银发族使用手机产生影响，主要表现在以下几方面：（1）判断力下降，更难分辨信息真伪认知老化带来中老年人对信息真伪的判断能力下降，对于网上纷繁多样的信息，他们很容易上当受骗。银发族依赖官方渠道和媒体帮助判断真伪。特别是疫情期间，微信群里经常有人转发各种信息，他们无从分辨哪些是真消息，哪些是无中生有的假消息。在用户调研中，不少中老年用户提到，他们很喜欢看人民日报等官媒发布的新闻，还有百度 APP 里“疫情辟谣”里的内容，用他们的话说，就是“这些新闻错不了”，特别是对于辟谣了的内容，他们会把它分享在微信群里，让更多的老友们了解到。“假新闻假消息很多，我主要看官方新闻，上海有上海发布官方新闻，还有比如看人民日报这些新闻比较官方的就不会上当受骗。”——杨叔叔，50岁，上海，职员（2）操控力下降，接触信息自主性弱不像年轻人，银发族很少自己主动去应用商店发现一些新的手机 APP。操控力下降，导致他们接触信息的自主性变弱，在选择手机 APP 上，更依赖于通过别人推荐，或是看到别人在微信等社交平台上分享的软件之后下载，再或者是直接选择手机自带的 APP。（3）表达力下降，表达啰嗦，语气词多在日常生活中，我们能非常明显地感觉到中老年人的表达能力不如年轻人，他们在表达时有较多重复的地方，中间也会夹杂大量不重要的语气词，加上有些人还有方言，这些对语音交互方式、语音识别技术等都带来了更高的挑战。（4）感官力下降，视力退化最早最明显视力衰老，会带来看不清小字，对色彩分辨力减弱，出现老花眼等问题，也容易眼疲劳。在用户调研中他们提到，喜欢使用 TTS（语音播报）的一个原因是可以避免长时间看手机屏幕，能缓解眼睛的疲劳。“我爱在百度上看新闻，有时在手机上看字看得时间长眼睛累，对眼睛不好，百度还能听资讯。这样不错，缓解疲劳。” ——史叔叔， 56岁，咸阳，管理者银发用户眼中的百度Q8 他们对百度搜索的印象是怎样的？银发族对百度搜索的印象和年轻一代是比较一致的。年轻人觉得百度搜索像老师或长辈，主要承载学习成长的需求，银发族觉得百度搜索是睿智的老师，乐于助人，有求必应。“像一个比较睿智的老师。”——芦阿姨，52岁，镇江，已退休“像一个老教授，我不知道的，想知道的，通过百度都可以知道。“——于叔叔，45岁，丹东，个体“像一个乐于助人的人，有求必应。“——鲍阿姨，65岁，上海，已退休Q9 他们对百度 APP 的印象又是怎样的？在他们看来，百度 APP 是一个内容丰富的平台，里面内容贴近生活，丰富有趣，并且会根据个人爱好推送更多个性化的内容，他们对百度 APP 寄予了厚望。“百度 APP 贴近生活，丰富有趣。“——高阿姨，53岁，北京，已退休“百度 APP 就像我们自己家的青年，它是我们自己国家的东西我们很爱它。但是它还是一个成长期嘛，我觉得它将来还是要更好的发展，做一些功能有更多的人使用。”——王叔叔，65岁，武汉，已退休结语银发用户和我们息息相关。关心他们，给他们提供更好的产品和服务，不只是呵护当下我们的父母长辈，也是呵护未来的我们。夕阳是晚开的花，陈年的酒，迟到的爱，未了的情。银发用户，他们有着无限的可能。以上是对于中老年银发用户 9 问 9 答的所有内容。你印象中爸妈那辈人是怎样的呢？他们喜欢用哪些 APP 呢？如果看完本文，你受到了启发或者有什么感想，欢迎留言或评论。本篇来源：优设网原文地址：https://www.uisdc.com/elderly-user
状态 信息 产品 缺省状态属于交互的边缘状态，很容易被忽略，造成设计不完整。为了保证设计完整性，对缺省状态进行整理很有必要，以免缺漏。大纲：缺省状态的出现原因和分类缺省状态的组成缺省状态的视觉样式组件化与复用缺省状态的出现原因和分类UI 界面上展示的信息可大致分为固定信息和动态信息两类。所谓固定信息是指，不需要请求服务器的信息类型，例如底部标签栏的图标是以切片的形式存在于安装包中，总是可见。而动态信息是会随场景变化的，如下拉刷新操作一般都伴随着信息的实时更新，这类信息就属于动态信息。以请求服务器是否成功为依据，缺省状态主要分类两大类：请求失败：网络环境原因 或 设备原因请求成功：数据正常且为空 或 数据异常其中，数据正常且为空的状态，我们习惯性称其为空状态。除了空状态之外的其他缺省状态，可以认为是异常状态。缺省状态的组成不同场景、不同产品，缺省页组成都可能不同。为了便于讨论，拿电商产品的搜索无结果为例进行分析。从组成上来看，淘宝和小红书进行了状态说明：根据当前关键词，无搜索结果，提示用户可以尝试更换关键词。而京东将状态提示压缩在很小的区域范围内，一句文案简单表意，使用了绝大多数屏幕空间来推荐其他商品。造作除了商品推荐之外，提供了行为引导。不同的形式有不同的目标侧重，从体验的角度上来讲，淘宝和小红书状态更加清晰明确。而推荐商品更大程度上是为了促成交易。产品层面，空状态也有可以发挥的空间，主要是引导用户行为和推荐相关内容。行为引导，目的是让用户快速熟悉产品并产生使用记录，增加粘性。内容推荐，不论是电商推荐商品或者社交平台推荐人，都是增加用户和产品之间联系的一个很好手段。缺省状态的视觉样式缺省状态的视觉表达样式有多种，不同的表达形式体现了不同的产品调性。从简约克制到丰富的情感化表达，也是逐渐增加视觉元素的过程。组件化与复用当业务模块众多时，可能涉及到的空状态和异常状态对应的具体页面数量巨大，将所有情况遍历、梳理、归类为 n 种类型，再进行统一设计，不仅节约设计成本，更可以使产品群整体性更强，进一步突出专业性和品牌感。以下是有道词典的案例。结语：尽管缺省状态是边缘状态，但是很好体现了产品的质感、特性和细节，值得仔细打磨。更多设计缺省页的方法：本篇来源：优设网原文地址：https://www.uisdc.com/the-default-design
图标 图形 基线 在内容为主的用户界面设计上，图标起到了降低理解成本、高效传递信息等举足轻重的作用。随着矢量格式与高分屏的普及，对图标字体的精细度与视觉匹配度也有了更高的要求，这对设计师来说也是一个不小的考验。本篇将介绍目前业界优秀的图标案例，并以日常图标绘制中遇到的问题，解析背后原理给出对应解法。注：以下部分示例仅为个人处理方法，仅供参考。本期提纲：业界的优秀案例矢量规格的效率画法图标绘制的注意点图标中的平衡业界的优秀案例“SF Symbols” 是苹果为 San Francisco 系统字体设计的一套内置图标合集，每个符号图形都能与所有磅重、大小的文本进行自动对齐，达到与字体无缝结合的效果。目前已更新到 3.0 版本，根据应用界面中各种使用、展示场景，默认提供 3,200 个符号各自拥有 9 种磅重，设计师可根据官方提供的合集库直接引用到设计稿中，或使用符号模板来添加自定义图标。1. 多种磅重“SF Symbols” 拥有与 “San Francisco” 字体相呼应的 9 种字重，在字母参考线（字母顶线与基线）下支持 Small、Medium 和 Large 3 种显示比例，总计 27 种样式，以达到与各个字形最佳的匹配效果。图形磅重与比例参考表图形比例与字形排列参考2. 字形参照定位以字体设计方式处理图形的垂直定位，在设计图标时需要将图形中心部分放置在模板基线以上的位置，系统读取时将根据图形基线计算图形的 baselineOffsetFromBottom（基线与底边的偏移值）进行垂直定位，使图形与文本的基线一致，达到图形和文本水平视觉对齐。图形参考线相同基线下对齐效果，使图形重心处于小写字母区域常用的块级元素对齐效果，重心稍微偏下3. 多色应用通过读取图形内的分层信息，可赋予每个分层不同的渲染模式达到更加丰富的表现形式。不同渲染模式下的多色效果4. 图形本地化适配除磅重与比例以外，当图形出现需要使用文字表达含义时，针对特定语言与书写顺序 “SF Symbols” 提供了不同的适配图形，包含拉丁语、阿拉伯语、希伯来语、印地语、泰语、中文、日语和韩语等语言类型与 LTR/RTL（从左到右、从右到左）两种布局。矢量规格的效率画法随着像 Retina 这样的高分屏与 SVG、PDF 等矢量格式在设备上普及，文字和图标在精细度与匹配度上有了更多的追求，一般应用会根据常用的字体磅重去定义默认图标的粗细，因此我们会看到一些图标出现非整数规格的情况，这对新人来说会造成一定的设计门槛。1. 微信的图标规格以微信客户端为例，需要在 24*24pt 的网格中默认使用 1.2pt 线条进行绘制，同时在图形自然拐角处需要保持外圆内方的样式。2. 为什么会有设计门槛对新手来说在 Sketch、Figma 或 Photoshop 中使用描边设计非整数规格图标可以是噩梦，即便有经验的设计师在绘制过程中也会因为计算路径余数而影响设计效率，以 Sketch 为例路径属性中虽然支持像素对齐、半像素对齐和不对齐像素三种模式，但如果需要绘制 1.2x 描边时，我们只能使用不对齐像素的模式再计算路径落点位置，因此需要不断计算落点是否处于 0.2、0.8、0.2……Sketch 的对齐模式3. 建议方法：倍化绘制所以在处理非整数图标时我们不妨把画板等比放大 5 倍，可以获得一个 120*120pt 的新画板同时描边放大为 6pt，这时候我们只需要使用像素对齐模式直接进行绘制即可，同理其他数值规格我们也可以使用倍化调整，使图形在画板内变成整数，最直接方式是小数点后奇偶数进行判断，奇数放大 10 倍，偶数放大 5 倍。输出资源时如果使用 svg 这类矢量格式可根据业务需要决定是否缩放输出，而位图则根据所需尺寸进行倍数缩放再输出。4. 工具使用差异使用 Sketch 对图形进行倍化后绘制和调整已经友好很多了，但是其实 Sketch 中还有不少绘制效率工具是没有放在默认工具栏里的，这里可以根据需要使用自定义工具栏把这些工具外置。Sketch 中的路径工具Figma 相对而言路径编辑功能比较简单，但依赖社区丰富的插件也能达到对应的效果，这里推荐一些常用的矢量图形处理插件。更多插件推荐：本篇来源：优设网原文地址：https://www.uisdc.com/icon-design-details
用户 利益 视觉 签到提醒、会员购买引导、福利发放等场景都需要依托于弹窗为载体进行展示。分类并拆解设计细节，是画好运营弹窗的先决条件。大纲：弹窗属性介绍运营弹窗的作用运营弹窗在用户行为路径中的出现节点运营弹窗的 8 种细分运营弹窗的设计逻辑拆解运营弹窗的视觉分析弹窗属性介绍弹窗是一种典型的模态视图，所谓“模态”是指，暂时中断用户操作，以确保用户接收到重要通知，或专注做出某项决策，半透明蒙版起到隔绝内容层与浮出层的效果。当用户点击弹窗中的按钮时，才能退出模态视图。由于弹窗的阻断感极强，弹窗的出现必然伴随体验的牺牲，因此，除非有足够的理由，不然慎用弹窗。弹窗大分类：基础弹窗：通知类、决策类运营弹窗基础类型弹窗承载着重要功能，且与流程紧密相关，不容易引起用户抵触，而运营类弹窗，往往背负着明确的运营指标，以商业为导向，需要合理布局和策划，提供足够的利益点或趣味性，才能避免引起用户反感。运营弹窗的作用运营弹窗的出现势必对应着一个明确而关键的目的，不同的运营目标影响视觉呈现的方式。运营弹窗的目标有 3 大类：为了转化：刺激用户消费，不管是发放折价券或者联合会员，都是用利益引导用户购买，从而实现转化。为了活跃：引导签到或参与时效性活动，以利益为驱动，增加用户打开产品的动力。为了拉新：以拼多多为代表，用现金的形式吸引用户大量分享，依附微信强大的社交网络，力求达到指数型裂变。运营弹窗在用户行为路径中的出现节点弹窗本身带有一定的强迫性，用户没有办法禁止弹窗出现。糟糕的弹窗设计不仅达不到运营目标，反而会让用户对产品整体的观感直线下降。不妨以弹窗出现为起点，梳理用户使用路径。运营弹窗的 8 种细分基于以上分解的目标维度和行为路径维度，我们可以将运营弹窗细分为以下 8 类：利益发放、开卡弹窗、签到弹窗、活动弹窗、分享弹窗、反馈弹窗、挽留弹窗、回归弹窗。运营弹窗的设计逻辑拆解1. 利益发放弹窗利益发放弹窗的核心是：给用户一个能激发消费的理由，这个理由可以是具体的折扣优惠、也可以是拼手气抽奖或者其他福利形式。当利益足够吸引时，用户越倾向冲动消费，而当利益吸引不够时，可以通过增加形式感或趣味性的玩法进行补充。2. 开卡弹窗开卡弹窗，顾名思义，是为了引导用户购买会员。核心是突出会员的优越性，常见的具体手法是，计算节省金额、展示专属功能、制造紧迫感、提供免费体验机会等。根据产品不同的核心竞争力，选择合适的利益点，如工具性产品主要以产品性能为核心卖点，如果对自己产品有信心，不妨提供免费会员体验机会，“由奢入俭难”，一旦体验过流畅高效的会员服务之后，升级服务的欲望将会更加强烈。3. 签到弹窗签到是很好的提升粘性的手段，根据签到功能的权重，分配不同的展示形式。首页导航栏、个人中心都是常见的放置签到入口的位置。部分产品着重突出签到，当用户进入首页之后，直接跳出签到弹窗。在流量最大的首页跳出签到弹窗，好处是在总量上提升了进入签到流程的 UV，但是坏处也相当明显，对于没有签到意愿的用户来说，这无疑是一种强硬的打断，影响体验。4. 活动弹窗活动弹窗主要是为了推广活动而存在，活动的具体形式不胜枚举，因此视觉样式也多种多样。根据活动性质、品牌调性和目标人群视觉偏好，选择合适的视觉风格进行展示。5. 分享弹窗在获客成本越来越高的当下，如何有效拉新成为关键和难点。被拼多多“套路”过的用户已然对分享提现有了防备。清晰明确的门槛和足够强的利益点，才是撬动用户主动分享的关键。6. 反馈弹窗反馈弹窗顾名思义，是告知用户结果的弹窗，分为正反馈弹窗和负反馈弹窗两种。正反馈弹窗很好理解，告知用户得到了某些福利，氛围热闹愉悦。而负反馈弹窗的设计方向有两种，一种是“以正面姿态传递负面信息”，如下图图 3，整体氛围还是热闹喜庆的；另一种设计思路是“情感化表达负面信息”，将“遗憾”和品牌 IP 做结合，通过 IP 形象将负面情绪拟人化、卡通化，减轻用户的失落感。7. 挽留弹窗当用户关闭某些弹窗后，又会立即出现一个祈求用户回心转意的挽留弹窗。挽留弹窗最需要注意的两个重点：文案突出利益点：表明用户将要放弃的福利是很可观的，强化损失厌恶。按钮位置：根据用户习惯，右侧按钮是惯常行动点，一般是顺应用户意愿的，有“确定”的默认内涵，而挽留弹窗的行动点布局是逆反的，用户的“确定”实际上被放置于左侧。8. 回归弹窗回归弹窗见于用户在一段时间内都没有打开应用或界面，用户本身对产品的粘性较低，为了争取用户，在此机会给用户发放福利，希望能尽量留住用户。运营弹窗的视觉分析从视觉表现的角度拆解利益发放类弹窗，从简约到复杂的过程中，信息传递的效率逐渐下降，氛围感逐渐抬升。针对不同的场景，权衡信息与氛围之间的平衡。有些时候，设计师下意识会在弹窗上增加许多氛围装饰，虽然起到了丰富视觉的作用，但一定程度上也影响了信息的传达。活动弹窗由于主题灵活多变，对应视觉呈现方式也多种多样。常见弹窗有基础形状，一般是矩形，而有些弹窗突破了形状的限制，没有底板约束，更加自由。工具性、金融性产品更加适合规则弹窗，凸显专业克制，而娱乐性产品，如微博，重视氛围打造，更加适合无边框弹窗。小结设计运营弹窗，首先要了解设计目标，做到心中有数，根据信息优先级进行视觉上的突出和弱化，平衡氛围和信息传达效率。整理并归纳优秀案例，使设计更加有的放矢，有理有据。本篇来源：优设网原文地址：https://www.uisdc.com/run-popover-design
角色 设计师 方向 在整个设计领域趋向于多元化的今天，已经很难出现某一个设计风格主导整个领域了，10年前拟物化全面倒向扁平化的盛况，大概率是不再会有了。取而代之的，是各色风格独特、在各自分野中酝酿成熟之后，从小众范畴走向大众事业的「设计方向」，甚至于用「趋势」二字来形容都有点过于「用力」了。这些设计方向不一定是最大众最流行的选择，但是正在被越来越多的品牌和设计师所青睐。结合国内外的设计师和平台的总结，我梳理了 9 个值得关注的视觉设计方向，这几个设计方向并不拘泥于 UI、平面、网页、动效、交互等领域，它们通常在多个范畴适用，对于想要打破惯性、寻求新鲜风格的设计师而言，都有借鉴和参考意义。有意思的地方在于，今天所提及的很多设计方向之间，有着隐秘的关联，设计风格和设计技巧大都相辅相承，这种互相耦合互相成就的关系让这些设计方向，大多数时候都不是孤立存在，两两出现甚至多个结合都是正常的现象。1、NFT 催化下的 3D 角色设计对于NFT，国内通常称之为「数字藏品」，随着今年「元宇宙」概念的快速膨胀，越来越多的基于元宇宙概念的设计开始发展。它到底是不是未来？我不清楚，但是元宇宙概念的扩张和膨胀，让这个数字世界中，对应用户本身角色的基础设施需求量大涨，这也使得 3D 角色为主的 NFT 正在大规模发行，这一点是确定的。Mekaverse 所发布的 4 款最为昂贵的传奇级 NFT比如去年一度炒得火热的 Mekaverse 就是这种类型的 NFT。当然，3D 角色设计的快速发展并非毫无根基，它植根于之前已经快速崛起的 IP 角色设计和急剧扩张的 3D 设计，而 NFT 领域的火爆又变相促进了 3D 角色在 UI、网页、H5 等各种日常使用场景下的应用：设计师 Mike 的作品设计师 Masud Rana 的作品设计师 Leo Natsume 所设计的角色设计师 Nguyen Nhut 所设计的角色动画不管 2021 年是否是元宇宙发展的元年，3D 角色设计从需求到应用都会快速发展，有很大概率能够成为某种程度上流行起来的趋势。它会是视觉设计中，越来越常见的元素，是品牌和产品设计时更好用的「代言人」，是值得关注的设计方向。设计师 Conceptzilla 的设计作品关于元宇宙和 NFT 在国内的具体发展，可能涉及到相关政策和要求，在这里很难作出具体的预测，但是——但是从宏观上来说，3D 角色的设计这个领域，呈现出越来越多的需求，对于专业性、独创性、趣味性是有越来越旺盛需求的。另外，这篇文章可以看看：本篇来源：优设网原文地址：https://www.uisdc.com/2022-visual-design-trends
广告
广告
表哥
张大湿
飞翔的企鹅
在路上
落霞与孤鹜
