设计语言是把设计作为一种“沟通的方式”，在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术，是需要理性的去解决感性的问题。它和艺术之间的差别就在于“解决问题”。
设计语言最底层是项目设计语言，具有典型特征和主题，比如医疗项目凸显专业冷静，节日项目凸显热闹氛围。往上一层是产品设计语言，强调个性品牌，比如小视频的设计深色更沉浸，电商从结构到色彩都凸显热闹。很多产品随着发展，形成一些系列平台服务，平台设计语言确保服务“统一规范”。最顶层是生态设计语言，跨设备跨平台和硬件呈现的设计语言。
百度直播业务，从单一业务形成系列平台服务，囊括的不只是B端和C端用户产品，还有8大垂类蓬勃发展，以及跨业务多宿主的呈现。庞大的平台业务，特别需要建设平台设计语言。
所有的设计语言，都是服务于业务顶层战略发展。制定设计策略前，需对业务所在的行业背景、品牌战略、用户群体、流行趋势有充足的认知。当返工无数次还是没方向时，说明以下前四点需要再深入明确。
设计语言以现代轻奢风格为基调，它大简至美、配色和谐、材质考究，以独具特色的现代格调，构筑起一个充满质感又十分舒适的直播间，给用户一致、友好、有品的体验。
设计动手前，按照风格基调具象化拆解分析必不可少，每一个元素的表达手法都要定位清晰。
在图标的设计中，我们基于专业亲和的品牌理念延展出2个不同的方向。方案一以直线折纸与光影为视觉元素，呈现一个用心专业的态度。方案二以曲线雕刻艺术展现专业亲和的魅力。
图标体系化，多场景验证一致性，发现方案一不够极致，造型复杂；方案二具备良好的一致性，但破坏了物体固有的结构，影响识别度。
在一致性的前提下，尝试简化、提高识别度。巧妙的将光影和结构交汇，极简到2个图层呈现主体；语义清晰识别度高；角度渐变光影带来舒适亲和感，15°x角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。
a）标准色
红色也有冷暖之分，此时提高色相、饱和度的颗粒度，H色相以350°为起点，以2°递增或递减，S饱和度以5°为阶梯，生成更多色阶（保持相同B明度100），在多界面和真机验证，得出直播专属红（H350S80B100），冷暖适中符合平台属性。
b)协调的辅助色
同时，运用色环建立辅助色彩体系。H色相以350°为起点，以15°递增或递减标准，创建24色相色板（保持相同B明度100、S饱和度80）；选取柔和与协调的类似色和邻近色作为家族色彩主体，调和互补色与对比色，平衡整体色调。因为不同色相的感官明度并不相同，校正每一个辅助色的HSB，达到色彩感官上一致。
C）调色版
一般会有2种方法，一种是使用明度差获得统一性佳的调色板，优点是落地成本低，代码可直接实现；另一种则是微调饱和度和色相，获得鲜明的色板，可使用在插图绘制上。
这种量身打造的稀缺材质运用在运营玩法上，如红包雨玩法，既能凸显平台专业用心的态度，又能强化用户消费行为转化，助力变现增长。
用户激励体系，采用3D玉石润泽质感+动态折射光影，体现有内涵不张扬的泛知识调性，凸显用户独特身份感
在每一个小元素的创作中，我们都时刻谨记，无论是项目的主题语言、还是产品的设计语言、甚至是生态的，终点都是传达企业文化以及价值观。从战略层重构业务的认知体系，再将品牌战略人格化，才能够在茫然期产生真正的笃定感，逐步拆解设计目标和构建符合业务气质的设计语言，达到最愉悦的体验。
通过研究分析，发现fogg模型可以帮助我们了解为什么用户不行动，又如何利用fogg模型让用户行动起来
我近期在做的一个项目，是成人直播在线学习的平台，主要以书画为主。
福格行为模型，是以BJFogg（斯坦福说服力科学实验室主任）命名的，表明一个行为得以发生，行为者首先需要需要有进行此行为的动力和操作此行为的能力。接着，他们有足够的动力和能力来实施既定行为，他们就会在被诱导/触发时进行。
fogg总结为一个人的行为产生需要三个要素：动力、能力、触发。B=mat，即行为=动机、能力、触发，三个要素必须同时满足才会形成一次有效的转化行动，否则不会发生。
fogg总结的动机分为3类：感觉、期待、归属感，人的本能都是追求快乐，逃避痛苦的；抱有希望，逃避恐惧的；寻求认同，避免拒绝的。
拿书画学习来说，为什么用户会来上课学习？首先是感兴趣，甚至喜欢和热爱才来的，学习书画
可以让她们感到快乐，愉悦身心，陶冶情操；其次会抱着学会和掌握的希望，幻想自己习得一技之长以后的样子；另外通过书画创作希望得到他人的认可和欣赏……
结合马斯洛需求层次理论，可以发现不同的人在不同的时刻有不同的需求，就会表现为不同的动机，越接近动物本性的需求，动机则更为强烈，只有低层次的需求得到满足，才会追求更高层级的需求。
还是说回书画学习的例子，用户只有能感受都书画魅力，在学习的过程中感到愉悦，她才会追求更高层次的需求，比如得到他人的认可，最后成名成家（自我实现）。
能力是指有能力（人本身的能力）完成，并且完成这件事的成本是可接受的范围内的。
可以有两种方式提高用户的能力：1、降低成本；2、通过利益等诱惑增加用户动机
1、降低成本
体力付出呢，比方说，我们的产品当中没有给用户提供购买材料的链接，用户就需要额外付出体力，可能是淘宝京东之类的电商平台去选购，又可能是到线下画材店去选购，那很有可能她就因此放弃了学习的念头…
社会压力：比如说我之前一位做设计的同事，后来辞职去北京油画村专注学油画去了，那其实在外人看来就不是很好理解，这时候他其实是顶着一定的压力的，也就付出了更多的成本。
习惯的力量：比如平时有空都是跳广场的王阿姨在李阿姨的鼓动下，也想学书画，但是学书画这件事破坏了她跳广场舞的习惯，产生了额外的成本。所以除非王阿姨的动力很足，不然她很容易就打消了学习书画的念头。
2、通过诱惑增加用户的动机
fogg认为用户最在的是成本，与其用更多的诱惑增加用户的动机，不如想办法降低用户的成本。
现在用户既有动机也有能力了，但还不一定能产生相应的行为，还需要触发因素。
触发因素主要有：刺激、辅助、信号
刺激：当用户有学画动机了，也有能力，但是她可能还是会犹犹豫豫，这时候我们通过文案“零基础，3-70岁都能学得会”，或许一下子就打消了她的顾虑，分分钟领课体验。
也就是说，用户动机弱能力强时，我们需要刺激用户产生或加强动机。
也就是说，用户动机强能力弱时，我们需要帮助用户，降低用户的操作成本。
信号：当用户既有了学画的动机也知道怎么领课体验，但是还是难免会因为其他事情冲突而忘记了来上课，这时我们就需要在合适的时机给她一个提醒。
也就是说，用户动机强能力强的时，我们只需要在合适的时机给出提醒就行，不要有过渡劝说行为，反而会适得其反。
说完这3个要素，再来分析我所做的项目，我利用fogg模型分析对比不同的用户的动机、能力、触发因素。
单看动机，每类用户的动机不足的原因是不一样的，三十几岁可能是感觉上不够愉悦，毕竟她年轻不太能静心领略国画带来的乐趣，这个和阅历有关，心气还不够沉稳；而50岁以上的中老年人非常享受作画的带来的身心愉悦，但是期待感可能会不够，总担心自己老了学东西费力，学不会，没信心。
那这样一顿分析之后，也就容易找到对应的策略了，这对产品设计真的很有帮助。
fogg认为增加用户的动机比降低用户成本要难。
确实如此，人的意愿很难被改变。用户如果对书画一点兴趣都没有，那这样的用户我们就可以直接放弃，而不是想方设法提升她的兴趣，多次劝说反而还会让用户反感。我们要做的是找到潜在用户，至少是有兴趣，愿意尝试的用户，想办法让她们来上课体验，并且在短期内入门，学习有效果，才有可能转化成我们的VIP用户。
fogg模型在电商领域运用特别多，商家的各种套路不是在强化我们的购买动机就是在降低我们的购买成本。不知不觉中就买买买，尤其是各种活动促销时，你有没有发现双十一买了很多东西，但东西寄到家后其实并没那么需要或者喜欢，所以又退掉了……
除了电商领域，fogg模型可以运用在各种媒介和场景中，比如我所做的这个书画学习项目，提升用户到课率和完课率为目标，可以用这个模型指导，换成提升转化率或者转介绍率同样也可以用这个模型来指导。
B=mat，行动=动机、能力、触发因素三者同时出现
动机主要体现在：感觉、期待、归属感
能力提升主要有两种方式：1降低成本，2提升用户动机(利益等诱惑)
触发因素主要有：刺激，辅助，信号
动态能激发用户的情绪，为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态，能让你的产品展现与众不同的魅力。另一方面，动态有助于支持可用性，通过自然流畅的物理运动，突显元素在过渡时的关联性与状态变化，增强用户对产品功能的感知。
因此，动态设计必须是有意义的，同时兼具可用性与美感，UX行业也将动态设计视为多学科的交集，细分成一个专业的设计门类。作为UI和UX设计中重要的组成部分，动态设计从三个层面发挥影响力：
提高连贯性（IncreaseContinuity）
让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。
连接场景（ConnectScenes）
在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。
视觉吸引（VisuallyAppealing）
聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。
增强表达（EnhanceExpression）
运用引人注目的表现手法将信息传递给用户，包括变形、动态文字和背景动画。
创造层次（CreateHierarchy）
在视觉平面中创建空间层次结构，遮罩与视差是常用的表现手法。
扩展维度（ExpandDimensions）
突破二维限制，将界面元素多维化营造空间感，例如3D动态图形和摄像机运动。
变形创造了一种连续的叙事状态，告知用户元素的状态或作用发生变化，是一种最引人注目的表现手法，能将形状、图像、色彩无缝地融合与过渡。
动画插图AnimatedIllustrations
2021年看到许多有趣、吸引人的插图，而更多的设计师开始为静态图像添加动态，也让GIF和动画插图越来越受欢迎。
动画插图看起来更生动，并带有叙事性质。在示例中，运用动画插图来呈现这杯果汁是由哪些水果打成，比起文字描述更能吸引观众的注意力。
byLobster
通过动画插图来呈现同一系列的转变，有利于延续外形上的特征，让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化，同样风格的系列家具利用动画来体现一致性。
byGracefulillustrations
流体动态LiquidMotion
动态的有机形状，包括流体、烟雾和火焰等粒子效果，能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换，而是颜色在流动的液体中扩散，进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡，并为设计增添有机感，也是2021年最引人注目的动画趋势之一。
运用流体动态来展现抽象的有机体，除了轻易地攫取受众目光，还让人不自觉地伫足在画面上，感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画，或是吸引目光焦点的主角。
byantonmishin
流体动态运用到网站设计所营造的视觉冲击力更为惊艳，能为用户带来独特、新鲜的视觉感受，使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动，因此会在许多特效网站见到流体动态的踪迹。
byGillesTossoukpé
动态渐变DynamicGradients
byPixelzStudio
微交互MicroInteractions
byИльяБабушкин
byGoogle
动画商标AnimatedLogos
过去几年动画商标是最流行的动画趋势之一，通过各种视觉效果，设计师能创造出不同类型的动画商标，许多企业开始采用动画商标作为吸引注意力的手段。多数情况下，商标是进入网站时最先看到的东西，因此商标应该令人难忘、引人入胜，并使用符号或排版来揭示品牌个性。结合动画的优势，设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征，并为静态排版和商标注入一股活力。
byYuliaK.
byMeta
动态文字是使用移动文本来吸引注意力的动画技术，许多卓越的品牌在网页设计中使用动态文字，为网站外观增添动感和视觉冲击力，是近年UI动画的趋势之一。
设计师使用动态文字为单词或句子添加生动的元素，借此定下情绪氛围与设计基调，吸引用户的注意力。几种常见的表现手法，挤压和拉伸一个词能会唤起一种俏皮感，而连续重复这个词则具有催眠感和前卫感。另外，使用大号和粗体字体来增强份量以强调某些信息，也是动态文字的特征之一。
byHOLOGRAPHIK?
byHrvojeGrubisic
byCarloSoleri
byKirillZhukovsky
遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物，等同于舞台幕布设计，能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效，是最常见的过渡动画之一。
切换场景Scene-Switching
其中一种遮罩过渡，是将当前场景完全置换，如同揭开蒙在上层的布，逐渐展露叠在下方的景，并利用景物相似性和动作延续性，让两个场景能够顺畅地衔接，不致于差异过大，造成用户心理负担。
byintent
byMinhPham
状态变换StateTransformation
另一种遮罩的表现形式，较无明显的场景过渡，而是利用遮罩来表现景物的状态变化，界面元素和布局基本保持一致，以此塑造无缝过渡的视觉效果，这种手法被广泛地使用，例如气候变化、人物换装、产品组合等。
byDanielTan
byOutcrowd
视差是利用不同的界面元素以不同的速率移动，创造前后景深的分离效果，借此在平面中塑造空间层次，已成为网站首页最为普遍的表现形式。
视差之所以能形成一股风潮，广为各个行业所接受，一方面是信息层级更加清晰，明确定义各种元素的关系，让用户专注于主要操作和内容，将背景或非交互元素往后退，同时保持设计的完整性。另一方面是丰富的层次变化，当用户滚动或滑动时，能在扁平化界面拉开空间关系，利用不同的速率和纵深，塑造多层次的感官体验。
byStudioVR
更生动的表情LivelyEmoji
动画的吸引力在于能够创建各种角色，并为无生命物体注入生命力，表情符号就是一个很好的例子。作为独特的网络语言，表情符号生动地描摹日常面对面交流的非言语信息，随着图形界面的设计趋势逐渐结合2D与3D，运用3D动态图形来创造更加动感、拟人化的表情，能让这些非言语信息更加丰富，有机会引领下一波风潮。
营造空间感SpatialAwareness
3D动态图形为平面设计建构了空间叙事框架，在扁平化界面中展现立体感，从而表达空间中元素的位置与层级关系。多维化的发展趋势，推动了视觉表达形式的演变，空间感让界面设计更符合人类的认知逻辑，运用各种3D运动特效，包括旋转、翻转、折叠、透视、Z轴位移等，打造令人难忘的感官冲击。
byUI8
byBrunoOrtolland
拟人动画AnthropomorphicAnimations
拟人化能让物体、植物、动物等非人类事物，表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的，1927年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引，越来越多设计师在界面中添加拟人元素，利用这种效果让画面更加生动有趣，增强用户体验的愉悦感。
byGregoryRiaguzov
推近/拉出DollyIn/DollyOut
推镜头是指被拍摄的对象不动，摄像机由远而近，朝着对象不断推进，用来突出人或物的主体。镜头推近的运动方式，用来呈现从整体到局部、由分散到集中的变化，引领用户进入故事情景，给人一种身临其境的感受。
相反地，拉镜头则是将摄像机后退，使画面逐渐远离被摄主体，侧重的是从局部到整体、由点到面的转变，强调主体所处的空间环境。随镜拉出的景象，能激起人们无限的想像。
byMichaelCrawford
byAliZafarIqbal
水平/垂直移动Truck/Pedestal
水平向左或向右，垂直向上或向下移动摄像机，使画面不断变化，让用户跟随镜头视角一起移动，产生一种置身其中的感觉。这种运镜方式，通常用于具体的场景，利用角色或景物的延续性来消除场景过渡时的边界，表现出一种流动感，无论是手势滑动或鼠标滚动都能有顺畅的操作体验。
byNetguru
结合多种运镜MultipleCameraMovements
运用多种摄像机运动相当普遍，既能扩大视野，又有很强的空间感，可以更加自由与多样地展示不同视角和情景。比方说结合横摇（Pan）、直搖（Tilt）和跟随（Tracking）镜头，连续而详尽地展示一个产品，由于画面始终跟随一个主体，有利于突出产品特征，并让用户从不同的角度和距离观看产品，是一种增强临场感和参与感的有效方法。
bySangNguyen
byPaulIlnitski
一镜到底OneShot
在电影中为了不将观众的情感和注意力割裂，使用一个镜头来完成全片的场景刻画和叙事，这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡，以此增强操作过程的流畅性，例如一气呵成的购物体验，或是贯穿全场的人物角色，其特点是给用户最沉浸的感官体验，无间断地体验整个流程。
byOrizon:UI/UXDesignAgency
本文归纳的设计趋势，有助于启发设计师对动态设计的想像，激发更多创作灵感，为静态界面赋予灵魂，打造令人难忘的视觉体验和品牌形象。
导航栏是用来帮助用户定位、导航、操作的基础组件。既负责告知用户当前所在位置，防止迷失，又负责连通页面跳转路径，允许用户在不同层级的界面之间来去自如。同时还承载了针对当前页面全局性的操作。
简要概述导航栏的作用，有以下6个：
实际上，导航栏的布局方式非常丰富，除了上文提到的几种基础布局之外，还有许多复杂的布局方式。
不同的布局方式体现了不同页面的信息架构。
为了方便描述，我将导航栏可以放置信息的部分划分为左、中、右三个区域。
接下来，我将从「结构简单」到「结构复杂」的顺序来讨论导航栏的各种布局方式。
视觉服务于功能，不同视觉权重背后对应的是不同功能权重。以搜索功能为例，不同产品、不同场景下，搜索功能的权重都是不同的。对于电商产品来说，首页搜索是非常关键的流量入口，必须足够突出，减少用户的认知和操作负担，使用户更加顺畅高效地使用产品。而对于不同产品或不同场景来说，搜索的优先级就未必有这么高。
提升视觉权重的本质是将重要信息和次要信息「区分」开来，而建立区分的本质则是「建立对比」。
我们以“搜索”功能为例。
我们从以下几个方面来拆解导航栏：
首先，我们要了解，页面固有的层级结构决定了某些信息是常驻于屏幕的，另外的信息是随着用户竖直方向滑动手势而滚动的。而导航栏绝大多数情况下是常驻于页面顶部的。
尽管导航栏一般都是常驻于页面顶部，但仍有不同的情况要分类讨论：
首先要明确，哪些内容属于常驻内容。
上方这种情况比较明显，头部区域是常驻区域，但要注意并不包括四个主图标。
我们再来看下面的案例。
上述变化的本质是从「状态a」过渡到「状态b」。
确定好了「常驻区域」和「被折叠区域」之后的交互就比较简单，直接折叠相应内容即可。
使用这种「状态过渡」的思路，相当于明确了变化的起点和终点，之后就可以将精力投入在如何使两种状态之间的过渡更加自然。
当我们确定了「过渡变量」之后，我们只需要考虑如何安排变量如何入场（进入状态b）。变量的出场（撤出状态a）并不需要考虑，因为变量是跟随内容层一齐滚动的，自然会被上层的导航栏遮挡。
1.1设计师为什么需要了解用研
我们对产品进行设计探索的本质是利用已知信息去挖掘未知信息，最终利用获得的信息进行决策的过程，信息的完整、准确程度与判断力、等共同决定了决策过程中错误决策的概率高低
用研的过程就是一个信息的收集与处理的过程，在信息不足时我们可以通过同理心来“侧写”用户心智推测信息，这一点从事C端设计的小伙伴应该感同身受，但由于B端用户画像与设计师自身往往偏差较远，单纯的通过同理心来感知用户心智的门槛和难度较大
此时我们就需要通过用户研究的手段获取更准确更完善的信息，通过用户研究，设计师可以贴近一线场景，了解用户的真实场景和工作诉求，切身感受到产品的业务逻辑和使用链路，以便我们进行更准确的设计决策，同样的，这样也可以让我们的设计方案在讲述时有理可依，有据可靠，更容易获得上下游的信任
1.2用研的纬度
那么什么是定量，什么是定性，行为和态度之间又有什么样的关系，在正式进入用研工作之前，有必要对这四个方向进行一个简单的了解
定性与定量
定性与定量是用户研究中常用的两种方法，两者之间性质和分析方法有一定的差异
通过上述示意可以发现，定量更加在意得出的数据，至于为什么会得出这个结果，就需要通过定性数据去验证，因此定性分析在一定程度上会更偏向于阐述某件事物的意义
行为和态度
在了解了定量与定性，行为与态度之后，我根据目前工作中常用到的可用性测试、用户访谈、问卷调研，并对每个方法的适用场景和进入调研的关键动作进行详细分析
在开始进行用户调研之前，我们需要根据具体情况确定调研形式，以便实施后续的展开工作，根据用研目的、产品设计阶段、频次、所需样本量和成本等多方面因素进行考虑，选定适合当下情况的调研方式
1.1明确测试目的
首先应该以目标为导向，确定需要测试的产品是什么，想要验证什么样的结论或者达到怎样的预期，是为了发现产品或原型中可用性的问题，还是借此与竞品进行有效性、效率、满意度的比较，或是对某些功能点进行测试
1.2设计测试任务
在明确测试目的后开始设计测试任务，测试任务是可用性测试的核心内容，需要根据已经确定的测试目的结合用户在实际使用过程中可能存在的场景和需求，将任务场景化，然后对复杂任务的整体流程进行拆解，列出任务列表，以此来编写任务提纲
任务包括场景，操作和具体目标，设计的任务要有代表性，对应的功能或模块必须是功能使用的典型场景、尽量模拟用户真实的使用场景；在任务描述时做到语言简洁，避免指定的操作或引导用户，若任务流程较长，可以进行拆解形成多个用户触点，但触点操作不需要告知用户，仅在用户操作时进行观察即可
1.3设定衡量指标
在设计好测试任务后，我们需要为任务匹配对应的可用性指标，目的是为了通过指标反应测试内容的可用性问题，帮助实施者有重点的进行观察和记录，还可以结合ASQ量表帮助测试者对每个测试任务的完成情况和满意度进行反馈
可用性指标主要包括有效性、效率性、满意度；这三者构成了衡量指标的一级指标，而每个一级指标下还包括更加细分的二级指标及衡量方式和标准，这就构成了可用性指标对照表；我们依照可用性指标对照表对每个任务的重点有了基本的概念，并且可以根据具体任务描述和衡量指标得到测试记录表
现在我们对每个任务的可用性指标有了基本的概念，但是可用性问题除了从实施者角度去观察用户行为和结果，还需要帮助测试者结合任务进行自评和反馈
而在帮助测试者进行任务反馈时，需要将有效性、效率性、满意度站在测试者的角度进行更加通俗易懂的拆分和信息传递，并且能够做到量化分析，这也就是ASQ评估量表的作用和目的
有效性可以理解为任务的完成情况，即成功完成、求助后完成，未能完成
满意度则是用户自我报告数据，包括任务完成难易度评价、任务完成满意度评价、及评价原因
根据场景描述、测试任务、节点反馈和ASQ评估量表，我们可以得到“任务卡片”，“任务卡片”可以帮助用户快速进入角色，明确内容，量化反馈，在每次任务完成后，将测试者所勾选的ASQ选项对应的分值相加，便可以得到任务评估分值
1.4准备测试脚本
可用性测试一般情况下需要两人协同配合进行，通常一人安排任务鼓励用户发声，一人观察记录，由于涉及内容较多，成本高样本含量低，对被试用户进行的活动任务也比较复杂且环环相扣，所以为了保障测试任务更好的实施，一般情况下会准备一份较为完整的测试脚本以供团队更好的配合
1.5准备测试原型
1.6招募用户
1.7准备场地
2.1暖场
2.2布置任务
向测试者发放任务卡，结合任务卡中的角色和使用环境对任务进行简单的介绍，如果是专家用户任务就不用过多描绘场景，可以具象更具体的任务——“上传一门新的课程、将课程分成基础班和进阶版分别售卖”等等
2.3观察并记录用户使用过程
这个过程观察记录和引动测试者随时的发声很重要，与其他用研方式不同的地方在于可用性测试可以了解到用户在操作时的想法和行为，用户的发声思考可直接影响可用性测试的效果和结论
我们可以适当引导用户进行思考发声，甚至可以为用户做一些简单的示范，例如在新建时，可以说“我准备新建一门课程”，“我正在寻找建班功能，我现在遇到一些问题”等等，将自己操作时的想法表达出来，不需要刻意去思考，这有助于主测员去了解测试者的想法和感受
2.4进行量表问卷
ASQ量表
上面在介绍可用性指标及任务卡片时我们有提到ASQ量表，其主要涉及有效性、效率性、满意度3个方面，安排在用户完成单个情景任务之后，这时用户对于任务流程的操作感受是最明确和清晰的
SUS量表（可选）
SUS量表一般在相对完整产品整体的大型可用性测试后才会使用，因为一般的中小型测试任务比较集中和针对，用户无法感知整个系统，量表针对测试设置10个问题（有效性、效率、满意度），包含5个选项：1分（非常不同意）、2分（不同意）、3分（一般）、4分（同意）、5分（非常同意）
在布置问题时，奇数问题采用正面阐述，偶数问题采用反面阐述，以此来确保用户评价的可靠性
单个测试者提交量表后，我们需要计算量表分值，奇数项计分采用“用户打分”-1，偶数项计分采用“5-用户打分”，由于是5点量表，每个题目的得分范围为0-4，共10题，所以最大值为40，而SUS的范围在0-100，所以需要将所有转换分相加后乘以2.5，即可获得SUS分数
3.1问题归类分析
问题优先级的划分方式
通过前期记录观察以及录音录屏我们可以发现用户在任务测试中遇到的问题，根据问题对任务完成度的影响，我们可以划分为P0（紧急问题）、P1（重要问题）、P2（次要问题）的方式对问题进行优化和排期
3.2输出测试报告
3.3后续跟进方案
在进行问卷调研之前，我们需要认识到问卷调研包括两种调研类型，定量调研与定型调研，实际上大部分的问卷都是定量调研，需要大量的用户样本，在收集问卷后需要分析数据占比来验证用户想法，另外小部分就是定型研究，一般原因是因为用户样本量较小，通过小样本量来研究产品的可用性问题
1.1明确调研目的
问卷调研中设计者并不直接接触用户，所以在问题的深度和广度上是有限的，一份问卷不能解决多个问题，通常会围绕解决1-2个核心问题去研究，在设计问题之前需要明确此次问卷调研的目的，然后围绕这个目的去思考各种问题，通过怎样的问题达到怎怎样的结果
例如通过思考和确认，针对我们这款由0到1的知识教育平台型产品，其调研的目的主要在于
问卷的目的一般可以分为六个方面：
1.2目标用户分析
对调研用户进行分类是较为重要的环节，用户类型不同，问题内容也不同，只有在不同角度不同用户下设计的不同问题才会获得有价值的结果
这种情况在问卷中还是比较常见的，例如我们填完问题一后，根据选择的不同，可能会跳转到问题三或者问题五，这就是问卷设计者根据不同用户分类进行的多种问题设计
问题根据用户分类设计的好处在于问卷后期可以快速验证产品的用户类型和比例，提高调研质量和数据可信度，便于后期对用户进行更加深入的调研
举例
结合上面调研的目的及用户分类，以此我们思考在问卷的设置方面：
对于B端（老师）来说，首先要了解的是客户目前是否有在使用我们提供的服务、什么时候会使用、使用的频率是多少、目前使用的体验如何、有没有遇到什么问题、有什么建议、对我们提供的解决方案是否愿意接受
1.3内部需求对齐
当需要有问卷调研的需要时，首先应该与团队内部各合作方对齐调研意向，一方面是为了避免过量的问卷投放打扰到用户，另一方面问卷调研属于团队项目，在团队内部充分讨论调研目的后或许你会了解到各业务方当下最关心的用户问题从而调整调研问卷的内容甚至得到更好的解决办法，这样一来才能将问卷调研的价值最大化
例如教育平台侧在新版本上线前为了调研售课老（机构）师对平台使用的满意度和深层次的需求问题，那么在发起调研之前，需要跟产品、教研、客服等业务合作伙伴对齐需求
2.1划分问卷模块
用户类：收集用户基本情况，方便我们了解用户群体，比如：职业、学历、团队构成
态度类：用户对产品的看法。比如:评价、好感、想要的功能；尽量避免提一些无法判断、没头没尾的问题，一方面对产品优化没有帮助，另一方面会降低用户的的期望
2.2衡量问题类型
问卷的问题形式是多样的，题目类型主要有封闭/半封闭问题、量表式问题、开放式问题组成，需要根据具体目的来选择相对应的问题
封闭/半封闭题型的选择在于能否将答案穷举，避免出现用户因为没有合适的选项而随便勾选答案的情况
量表题型在答案上有明显的程度高低区分，设计者对该问题有进行统计的需求
在问卷中应尽量避免较多的开放问题，一般在针对某种方向/某个定性的问题做预探索时使用
这里只对问题的类型做简单的概述，具体的形式是多样的，例如选择题可以有单选、多选、图片选择；量表题除了打分之外，还有排序和点数分配等其他形式
2.3问题重组
在得到具体的问题后，我们需要对问题进行重新编排，通过改变问题的前后顺序来保证用户在可控的情况下进行真实的问卷回答，除了按照问题的难易度之外，还需要根据问题的属性由浅入深的重组问题
例如问卷开始先安排过滤题用于过滤用户，识别用户是否符合问卷的目的来保证问卷数据的质量，然后按照暖场型问题、渐入型问题、高难度问题、敏感问题来对问题进行重组，当然这些顺序并不是固定的，需要依据具体的问卷内容进行调整
关于过滤问题：
比如在对于关于产品改版的满意度调研中，向用户询问有关产品功能的问题
如果用户回答“某某功能”，但在是否知道时选择了否，或者使用时长很久，但却不知道某某功能时，在后期数据中，可以将这部分无效问卷去除
3.1问卷评审
一切准备就绪，是不是准备投放问卷了？别急，许多问卷在投向用户之前，往往会忽视通过内部手段进行问卷自评，通过问卷自评可以发现这份问卷有没有偏离最初的调研目的，你所设想的问题用户是否可以正确理解、问卷是否有可优化的空间等
一般自评包括3个环节：问卷自审、问卷内审、问卷内测
不少公司内部有设立专门的用研团队，在确立调研需求初期就应该与需求方深度绑定，有明确的需求认知，有句话叫当局者迷，邀请用研团队参与审查可以从专业角度把控用研目标，评估问题是否能被用户接受等，他们可以从一些不同的角度发现问题
3.2预计采集样本量
内测完毕之后，就可以向用户投放问卷了，为了避免给过多的用户造成打扰，我们需要根据产品的用户数量判断问卷的投放数量
一般没有明确规范多少用户投放多少问卷，基本都是自己判断，一般如果总用户量不足30，需要至少覆盖50%（15个）；如果总用户量30-100，30人以上就可以；如果是总用户量100-1000，覆盖20%-50%就可以。
3.3选择投放渠道
我一般常用投放渠道有：1）飞书推送；2）站内公告；3）其他内部资源
一般用研团队会使用专业的解决方案快速作出数据分析，比如SPSS，而设计师在实际工作中很少会接触到此类工具，因为此类视角下探索的方向和内容更加具体，变量在可控范围之内，不太需要复杂的分析模型，较为常见的更偏向Excel或者问卷平台自带的分析功能，所以我们可以对分析思路做一个简单的了解
4.1数据清洗
4.2问卷分析
还记得我们设计问题的第一步划分问卷模块吗？模块通常围绕几个类型：用户类、行为类、产品类、态度等，在分析问卷时可以基于这些结构得出一个较为整体的情况分析，例如用户群体结构（用户类）、存在的问题和新的诉求（用户建议）等，通过对比相同角色的回答，找出共性的问题和信息
在得出整体结论之后，我们可以通过差异分析深入挖掘更多信息，例如观察不同用户角色对于产品的建议或者评分，会发现用户角色对于产品的建议和需求是不同的，这种分析方法重点在于找到两个可能存在关系的因素，通过对比不同角色的回答，找出差异和影响因素，根据上述举例就是将（是什么）（怎么样）进行差异对比
根据反映问题的模块对用户问题进行归类分析，写明用户的问题描述和具体模块，并且对后续优化提供解决方案
4.3产出报告
问卷报告一般包含调研背景、问卷回收情况、调研结论（功能优先级、用户反馈、数据展示等）、整体评价（功能评价、体验评价）、等，分析时从数据出发找出差异，分析原因，给出结论，在具体汇报时可以按照先结论后具体问题的方式呈现报告，同时可以结合数据提供相对应的解决方案
1.1明确访谈目标
1.2确定访谈类型
根据不同的访谈目标，可以分为三种访谈类型：
在围绕的主题和问题上都是开放的，没有固定的问题也没有固定的答案，采访者可以根据受访者的表现进行相应的问题补充，受访者可以充分表达自己的观点和意见，氛围最为轻松，接近人们日常的对话，适合进行定性研究。但即使是选择了开放式访谈也需要事先准备访谈提纲来确保此次访谈是有效的
有严格的问题顺序，采访者必须按照顺序和题目提问，受访者回答的答案都是固定的A、B、C、D，这就需要采访者必须有一个很清晰的目标，在问题的设计上要仔细推敲和打磨受访者可能回答的形式，当然，再缜密的设想在实际访谈中也会有意外，所以也会设置一些开放性的问题让受访者可以自由的进行表述，并给出更加开放和深入的回答，适用于定量数据的研究
是实际工作中运用的最多的一种形式，在形式上是结构式与开放式的结合，包含了固定的的问题之外，也设置了开放式的问题，根据访谈时的受访者的实际情况进行问题的增减，适合定性+定量研究
1.3设计访谈提纲
明确访谈目的与访谈类型后，就要基于访谈目的，拟定访谈提纲，访谈提纲是方便与用户交谈过程中抓住核心，保证访谈高效有序进行的关键，就类似一个标准流程，保证需要研究的问题都可以包含在内，访谈提纲一般包含五个部分，分别是访谈目的、开场白、提问访谈、用户演示、结束语（基本信息、过往经历、产品感受、流程体验、竞品体验），其中提问访谈可以根据具体的访谈内容展深挖细节或者发散问题
提问访谈是提纲中较为重要的一环，问题设计要由易到难，由浅入深，由边缘到核心，在开始阶段设计一些简单的开放式问题来营造访谈的氛围，这个过程中可以了解用户的基本情况或者对产品的使用情况，等访谈向一个方向聚焦时，再逐渐收缩问题范围，逐步追问核心问题
设计好的问题还需要整理成访谈记录表，在进行访谈、时，一方面按照访谈清单大纲尽可能的进行脱稿提问，另一方面则需要记录用户对于问题反馈，记录问题时记录员最好记录用户的逐字稿，以便于后期进行记录整理时不与用户表达产生偏差
1.4招募用户：
用户招募是较为重要的一环，承接访谈前后两个阶段的关键节点，用户招募准确，后面的访谈才有实际意义，招募哪些用户是由访谈目的所决定的，一般招募环节分为三部分
招募用户的选择是由访谈目的决定的，不同的访谈目的所招募的用户是不一样的，一般按照使用产品深度的纬度来划分用户
而访谈目的一般有两种情况
所以如果访谈目的是发现产品现存的问题，那么应该去寻找核心用户，他们那对于产品有着明确的认知；但如果为了增长，则应该寻找边缘用户和潜在用户，他们会告诉你他们需要什么，你需要做什么
面向内部用户的产品进行用户访谈时，一般直接找对应访谈者的leader或者pm沟通即可，而在对外产品时则需要根据确定的筛选条件进行用户招募工作
潜在用户由于对产品接触较少，一般通过问卷、外包招募、熟人推荐的形式进行招募
在得知用户是否愿意接受访谈后，需要再次验证这些用户是否真的符合样本特征，要注意的是，筛选访谈对象要注意平衡，避免同一类型的对象占了过多比例，导致访谈结果不全面
例如做一次关于学习平台APP的功能优化访谈，就要避免对象大部分是管理者、80后的情况，因为用户不是目标用户、80后用户的需求频率不大
很显然，90后/95后/00后、大学生/刚进入职场的职场新人才是我们的目标用户，那就根据这类人群的角色模型来筛选邀约对象
1.5准备场地和物料
用户访谈的可选场地有很多，大部分是请用户到公司来使用公司的会议室，或者有的公司拥有休息区或者共享空间，环境较为舒适和温馨，也是可以的
需要注意的是，场所的选择也会对访谈有些影响。应该尽量选择温馨舒适的环境来打消用户的紧张感
采访者需要提前准备好物料，包括访谈记录表、访谈提纲、录音设备；访谈时可以一人负责提问，另一人负责记录，在使用录音设备对受访者进行录音时，需要提前告知并取得同意
2.1开场白
在一切准备工作ready之后，可以进行访谈了，访谈中难免遇到一些不善表达的用户，如果一开始就切入正题进行访谈，访谈者可能在紧张的状态下无法与采访者达成信任关系，气氛就会有些尴尬
2.2访谈并记录
还记得咱们前面准备的访谈提纲吗？在进行简单的暖场之后，我们可以先对用户的基本情况和使用经历进行询问，从职业、流程、爱好等基础信息作为切入点，为用户营造特定的使用场景，然后再进入访谈环节
访谈时，抛出问题的目的不仅仅是得到用户的一个结论，而是希望用户借此将自己的体验和前因后果告诉采访者，然而很多时候，用户告诉我们的信息都比较浅显，比如“我想要个xxx功能”“我觉得xxx挺好的”，这时我们需要对用户想法刨根问底，从而证实用户说的“想要xxx功能”是否合理，或者看能否想到其他解决方案
1、结合梯子理论，通过问用户以下4个层层递进的问题，来了解用户需求和用户心理
2、情景再现
回答提问时，用户很少会去主动联想具体使用场景下的体验问题，比如当你问“上次旅行去哪玩了？”用户大概率会回答“去环球影城玩，人特多排队两小时，玩了个什么叫鹰马过山车，20秒，下次去绝对买优速通...”并不会告诉你怎么去的、以什么标准定的酒店、为什么选择这个项目/地点，等等这些更想要了解的问题告诉你
我们需要帮助用户在基本体验之上还原体验的动机，引导用户对使用场景进行还原，了解用户当时场景下的行为，再针对场景和行为去挖掘用户产生这种体验感受的动机
3、鹦鹉学舌
复述的时候，有时用户还会根据你的复述追加一些他当时没有想到的关联信息，比如“你的意思是。。。我的理解是。。。对不对？”这样可以避免双方理解的偏差，还可以总结提炼用户的观点。这样又可以挖掘到更多内容
2.3结束语
在访问结束后，我们可以与用户一起快速回顾访谈的内容，如果用户有提出一些意见或者建议我们可以再复述一遍进行查缺补漏，并将事先准备好的礼物或者酬劳送给用户表示感谢，向参与度高，善于沟通的优质用户表示保持联系，留下联系方式方便后续进行可用性测试或者再次访谈
3.1整理访谈内容
一般是在两个用户访谈之间的间隙进行笔记的整理，将用户的口头语言转换为书面语言，这样一方面减少后续因访谈内容大量堆积而形成的整理压力，另一方面可以根据上一场访谈进行复盘，从而对下一场即将开始的访谈进行内容调整，在整理时我们需要将重点放在用户的提出的问题和负向反馈上
3.2问题归类分析
整场访谈结束之后，我们会发现用户会提出各种各样的问题，我们需要依据问题的纬度进行分类，将不同用户遇到的相同问题进行归纳
问题归纳主要包含两个部分，主要问题和具体问题，主要问题就是访谈中出现的较为明显的反馈问题，例如“超7成用户对首页推荐的内容并不感兴趣”，而具体问题则需要明确用户反馈原因、对应的功能模块和问题类型
3.3产出报告
看完这一波网页UI类设计，再也不愁接下来该如何做设计创新了。
这是今年出镜率比较多的一种设计风格，不管你是在Dribbble还是Behance上都能见到它的影子。这种风格设计最大特点：形式感、聚焦、简约而不简单。
当然还可以是将线圈与文字叠加图片，有一种层叠纵深布局感受。
又或者说图形只是作为装饰作用。
上图是典型的文字图形化，将文字转化成线性设计。
图文混合设计风格大胆、新颖，让人眼前一亮。这种版式布局一般会出现在设计工作室网站居多一些，追求形式感与观赏性。
图文混合设计，不光只是图片与文字混合排版，还可以是图标与文字、粗字体与细字体之间的混合穿插。
圆形设计趋势一直都存在，在网页设计中出镜率高也是毋庸置疑的事情。毕竟圆形本身自带超强亲和力、聚焦。设计用它可以解决很多枯燥的版式，让画面瞬间活了起来。
还可以将文字处理成圆形，与圆形图相呼应。
文字轮廓化版式今年出镜率尤其之高，将文字轮廓化设计处理，减轻了文字的视觉重量感，更像是将文字线条化设计处理。
文字轮廓化设计还可以用在背景，作为设计装饰效果。
还记得今年年初大家追捧的新拟物化（Neumorphism）风格嘛？
线无疑是图形里面运用较多的，今年发现很多网页中都加了线条作为版式装饰，或者就是纯线条版式设计，让人眼前一亮，原来还可以这样玩。
线条在这里作用明显，除了美学设计装饰之外，它还用作信息层级区分。
项目的运作是需要多人合作完成的，在这个过程中会遇到内部和外部的各种的问题，我们这里主要讨论的问题属于内部问题，分人和事。
项目大小不同，投入资源会有所分别，但是项目成员专业构成上却都基本是一致的。大家的专业背景不同，相互并不了解各自的工作，思维方式也是不同的，大家在讨论工作的时候也是习惯用自己熟悉的方式进行沟通，相同的事物会存在认知的差异，在传递、执行的时候产生偏差，从而影响目标达成的效率。工作中各自的工作都有不同的专业目标和标准，大家讨论问题都是奔着解决自己的专业目标去的，目标不同，诉求肯定就不一样。
如下图，只有三方达成共识才能做出“好的产品体验”对用户有价值、高满意度的产品，缺少一方都无法完成这个目标。
举例：开发在实现一个页面的时候，他们首先要考虑的不是页面好不好看的问题，而是从实现角度考虑技术方案、难度、性能；设计则是考虑视觉上的美观性、易用性；产品需求方则是考虑是否能满足需求，达成目标数据；在这个项目执行过程中，如果大家都坚持自己目标不让步，这个项目就很难进行下去，然后就有了“妥协”，项目的执行其实就是成员之间相互妥协、博弈的过程。这个过程需要项目团队不断的“磨合”，然后形成共识、工作上的默契。
“妥协”这里不是退让和降低标准，而是需要站在对方的角度思考，他为什么会要这样做？他和自己的方案哪个更有利于项目，如果他的方案有利，自己需要做出那些改变和投入？（这里要考虑可行性）；如果自己的方案更有利项目，那就需要阐述自己方案的优势，有理有据说服对方接纳；这个过程必然是顺畅的，提升在执行项目时候的效率。
项目常见问题：项目从开始到结束会有很多个项目节点，在过程中因成本和难度，不断修改设计导致的结果偏差；参与决策者较多，之间没有达成共识，在项目不同阶段完成决策，导致的结果偏差；因外部因数导致目标的变化等等问题…
1、优化流程中的沟通、信息同步
明确流程节点上需要参与的人员，确保信息的同步触达范围；明确流程节点上需要完成的任务，并且有统一的输出标准、评价标准，让每一个人都清楚自己在做什么、如何去做；明确每一个阶段所需要达成的目标，让项目成员在项目进行过程中也清晰自己的任务，同时让新加入、合作的同事快速了解项目，提升协作上的效率，完成一致的目标任务
2、根据项目大小对流程进行分类
项目流程模块化，针对不同内型项目，明确任务需求模板：小项目（A任务）、中型项目（A+B任务）、大型项目（A+B+C任务），
3、加强目标在项目中的一致性，建立高效的决策机制
通过项目阶段任务评审，及时将信息同步给项目成员，建立由“项目核心成员”和“决策者”组成的“评审团”，有分歧和问题的时候快速决策，解决问题；避免只讨论不做决策的会议，因为永远都是没有结论的
再过往的项目经历中，不同公司在不同文化背景下对于项目的流程管控和要求有着比较大的区别。
我们可以从哪些维度强化品牌特质？我们在保留天虹品牌DNA的同时，实现新业态的呈现升级，向市场展示一个崭新的天虹。
如果聊起中国的零售巨头，我们一定不会忽略天虹商场（现“天虹数科商业股份有限公司”）最初所占据的一席之地。天虹是国有控股的上市公司，自1984年天虹注册成立后一年，第一家天虹商场——天虹深南店开业，正式开启零售业的征程，成为全国零售业的先行者之一。
天虹成立的30余年来，历经了经济发展的巨大变化所带来的市场繁荣，这也使消费需求多元化成为不可逆的潮流，越来越多中国零售企业采取了多业态发展战略，零售市场从过去的百货商店、副食店一统天下的局面迅速发展成为多业态并存的市场格局。
过去几年，天虹不断在全渠道方向转型，突破传统购物模式，践行数字化、体验式、供应链三大业务战略，大力发展线上线下一体化的智慧零售商业模式。如今，它更把自己定位为一家提供生活解决方案的服务商。
天虹零售行业数字化转型正在如火如荼的进行，产品线的扩张让目标客户发生了变化，反观消费人群对天虹的印象，仍然停留在天虹仅是一家老牌的实力零售国企的形象，天虹这次找到我们进行官网改版，目的就在于此——在保留品牌DNA的同时，实现新业态的呈现升级，向市场展示一个崭新的天虹。
品牌DNA不可复制，我们率先从品牌的视觉资产切入，计划在天虹新官网具体的视觉设计元素上，例如图标、颜色、配图等，结合品牌强化天虹DNA记忆符号，让记忆符号给访客在视觉、“触觉”等感官上加深印象。
这样给访客加深品牌印象的设计不在少数，例如从“了解更多”进入到天虹企业简介的Banner以及每个页面的底部导航，都有从天虹Logo特征延展出来的图形设计。
色彩是一个非常重要的品牌基因。从品牌色延展的色彩方案贯穿应用到网站中，是最为常用的建立品牌印象的方法。
用品牌色作为组件和高亮色自然是不用多说的：
但是，色彩并非越丰富越好，过于丰富反而会干扰访客对网站内容的吸收，我们根据品牌调性控制好品牌色的应用数量，有时候单色或者双色的配色方案更能形成突出的风格和印象。
大面积的色彩虽然能刺激用户的视觉感知，但是也可能分散用户注意力，因此，如果网站有更多资讯阅读类的内容就不适合用过多的色彩，否则会破坏用户的沉浸体验。
在现如今的新零售时代，顾客体验感的提升、用户和线上+线下移动端多渠道的互动影响，让企业核心竞争力不再是孤立的某一个因素。而天虹30余年以来，能够保持自身的核心竞争力——品质与服务，这是天虹站在顾客的立场角度，去思考自身企业真正能够带来的价值，我们专门为此设计了一个【品质与服务】页面。
在品质上，除了阐述天虹一直贯彻并强调的经营理念，以及一直以来的践行，我们通过呈现权威的认证证书、六项质量大数据以及天虹的质量管理规范，更强有力的证明天虹品质。
在服务上，我们分为顾客选择天虹的服务之前、天虹服务顾客时、完成服务之后这三个步骤，明确说明天虹可以向顾客保证的服务品质。
在顾客选择天虹之前，我们运用七种颜色的交互动效，展示天虹可以给顾客的七重品质保证，每项保证都有针对性的服务承诺。
这里还有一个在背后小小的设计想法，七种颜色正好对应彩虹的颜色，也正好和天虹的“虹”相呼应。
为顾客提供服务过程中，直接列出了天虹五项顾客服务的基本准则，体现了天虹为实现品质服务的切实行动。
天虹完成服务之后，分别展示四个场景、渠道保证顾客无忧售后。
天虹不同以往的是新业态的改变，要呈现具备科技力的天虹，我们在策划品牌网站时要确定这两大要素：
一个网站的诞生，是为了服务特定的用户，在网站设计阶段，产品经理通常需要把网站设计构想和思路提交给产品研发团队、视觉和交互设计团队进行网站的设计开发，我们的设计开发团队如何才能清晰理解访客的真实需求？
那么，除了网站需求文档、原型图为主，还要把用户画像作为辅助说明，让我们设计团队成员在设计网站的过程中，对网站目标访客群体有一个更形象化的认识。我们在这不做对访客基本人物属性的分析，而是主要分析访客的使用场景以及访客故事，从而对网站版块、访客体验、访客通过网站完成任务时的浏览路径进行设计。
经过一系列的访客画像分析，我们可以肯定的是，扩张了产品线之后的天虹，新官网的目标访客也会面向更多群体，因此我们将会从这四个应用场景来决定建站方向：
只有让这四个目标访客群体浏览了天虹的新官网，才能真正实现向市场展示出一个崭新的天虹。
我国社会数字化转型进程的不断加快，数字化转型是包括零售企业在内的所有企业，都绕不开的一个重大课题，它能够为企业带来新的发展机遇。
对于天虹这样的零售企业来说，便是借助数字化技术提升企业的运营效能、降低企业运营成本，构建新的数字化环境下新的商业模式是最终目的。在【智慧零售】版块，正式介绍天虹数字化转型发展的新业态。
在为顾客服务上，天虹零售形式的变革是以交付为主要方向的变革，重塑全渠道零售形式之后，【天虹APP】与【超市数字化】把到店与到家等零售形式相融合，实现了顾客“所想即所得”的交付需求，助力了消费升级。
我们在对应的展示版块，附上相对应的使用场景图片，以及天虹APP、天虹小程序的二维码，更有利于访客即刻体验由单一的到店交付，到到家等多场景的便捷交付。
天虹在进行数字化转型中，还瞄准了一个重点是以数据驱动购物百货运营模式的重塑，能够实现原先由人决策、执行、协同，转变为由数据决策、数据执行与数据协同。
天虹购物百货的运营模式在进行数字化重塑之前，仅是依靠商户品牌形象+店内交易才得以完成交易，在【购百数字化】的说明中，我们展示了天虹“Before+After"的数字化运营模式，向访客充分说明天虹从智能方面寻求新的突破，通过智能设备与数据智能，从而提高了入驻天虹商户的运营效率、降低运营成本的重要措施。
我们明白，信息架构作为网站交互视觉最底层的支撑，只有骨架搭好，对于用户的使用体验才能够有本质上的提升。在商户服务上，天虹还做到服务产品化，我们分别从这两类业务入手为访客做好阐述：
天虹具体赋能商户的四项支持，我们遵循整站的简约风格来做展示：
【天虹科技子公司】则直接跳转到灵智数科的官网，这是由天虹数字化经营中心孵化的数字化零售SaaS产品，为零售企业提供数字化转型方案，这更能表明天虹未来在实体数字化深耕的决心。
天虹在购物中心&百货、超市、便利店的运营模式中迅速铺开数据化、信息化、智能化的建设道路。其中，我们将天虹超市数字化运营细分为四个方面，真正做到可触达、可交互、可洞察、可追溯。
天虹微喔便利店同样运用线上+线上双模式，从四个方面共同打造天虹微喔的品牌力。
在天虹新业态的展示中没有做花哨的视觉和交互设计，因为当我们对信息架构有足够的认知时，我们在设计页面时才能有合理的思考方向，做出正确的设计，一家老牌的实力零售国企的数字化转型，我们更倾向通过展示一些应用场景，将具象化的价值传递给访客，能简则简。
消费升级时代的到来，数字化技术已经与传统的产品和服务产生了紧密相连的联系，正因有天虹这样的企业率先进行改变，我们早已能在日常生活中切实感受到服务的优化和改变。
我们团队通过品牌梳理进行本次天虹官网的改版，从天虹的品牌DNA、核心竞争力以及升级新业态的呈现等多个维度来强化品牌特质和传递品牌价值。我们在新官网做到对三个方面的升级，真正做到向市场展示一个亲和力与科技力并存的新天虹：
天虹的数字化新业态转型、品牌符号和视觉形象在新官网更清晰有力的传达给各个访客群体。天虹作为一家成立至今已有30余年的老牌零售国企，我们更倾向于谦虚地阐述天虹的营销理念，保持良好的信息层级可以让整体的浏览体验感更好，而不是对品牌展示的过度包装。
前两周字节发布了自己的中后台设计系统ArcoDesign，在仔细阅读官网文档了过后，想和大家聊聊我自己对于ArcoDesign设计系统的与阿里的Antdesign的一些对比和差异分析。
ArcoDesign是一套设计系统的简称，是基于字节跳动所有的中后台产品。ArcoDesign主要服务于字节跳动旗下中后台产品的体验设计和技术实现，主要由UED设计和开发同学共同构建及维护。
我的个人理解ArcoDesign是站在设计规范的基础出发点考虑，希望给用户传递出来的价值出发，让用户深刻感受到系统是「清晰」、「一致」、「韵律」和「开放」的，而AntDesign所传递出来的价值观似乎更加玄学或者说格局更高，上升到更高的思维境界，即大自然思想和社会责任。
当然这部分的内容相对比较虚，每个人侧重点想法都不同，大家可以自己去理解一下这部分内容。
接下来会从工作台、表格、表单几个典型高频的B端界面进行分析，看看两者的差别。
1）布局
Arco的卡片列布局灵活，基于24栅格进行布局，将整个栅格区域2:2:1的比例进行分割，信息卡片的宽度根据栅格宽度进行自适应，这样的工作台页面既灵活也能够满足业务需求。
Ant的卡片列布局采用3:2比例进行布局，同样是基于24栅格。目前主流的B端页面都是以24栅格为基础进行设计。3:2还是2:2:1这两种卡片布局方式没有绝对的优劣，主要是根据我们页面的信息量以及行业属性去确定。如果工作台所展示的单个信息量较多可采用少列大宽度进行布局，满足信息展示的最优布局。
作为B端的工作台页面，核心诉求是能够清晰找到用户想要的信息，想要做的内容，所以我们设计师要优先保证用户能够快速定位到核心的信息，快速到达要到达的功能。
2）信息展示
Arco针对同系列的模块设计了两种尺寸的间距，例如欢迎问候信息与下方的数据信息之间是大间距，数据信息与下方的团队动态最近项目之间是小间距。
Ant在卡片方面没有为卡片间距设置两种尺寸，从上下到左右都是一种尺寸，这样做的好处可以让视觉更加对齐，显得页面更加规整，不好的一点就是内容区域外间距与卡片之间的间距一样宽视觉上并没有聚焦，显得内容区域很散。标题方面没有进行加粗重色强调，将内容进行突出，使用户更加聚焦于内容。
3）导航方式
Arco导航区域与内容区域都使用同类浅色，采用线的方式进行分割，整体视觉比较清爽。Ant导航区域使用了传统的重色与内容区进行区分。
目前的设计趋势流行浅色导航，有几个产品的WEB端进行了一系列的大改，YouTube、Twitch、Twitter都进行了重新设计，他们不约而同地将块面去除，去掉多余的的灰色，通过留白和空间将页面拉开。这否是下一个WEB端所要追寻的趋势，我还不得而知，但是对于导航层级多的侧边栏导航，我仍然建议使用深色背景区分导航栏。
1）表格样式
表格作为组织整理数据的手段，可以有效地向用户展示数据信息，是B端产品中出现最高频的模块之一。
Arco和Ant的表格设计样式与市面上多数产品都类似，采用表格列无分割线条、表头与内容左对齐、数字右对齐的方式。
合格的表格设计要定义合理的表格行高，在具体设定表格行高时，由于表格中以文字信息为主，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑。
文字行高可以设定为字号的1.2~1.8倍，文字与分割线间距离可以设定为字号的1~1.5倍。
表格行高决定屏幕内能呈现的行数，即用户在一屏内能获取信息的数量，主要影响用户纵向对比数据的效率。
在B端用户使用场景中，数据量极大的表格的展示问题是体验优劣的关键因素。对于1920*1020（包含该分辨率）以上的大屏用户，对于一屏显示行数的感知不强，但对于1366×768、1280*720等这类小屏，显示行数有限，用户进行纵向数据对比的效率就会有所降低。在设计前，应当充分了解目标用户的行为诉求，了解目标用户设备屏幕分辨率的占比分布情况，有针对性的设置行高。
B端产品的特点之一是通用化，覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户，建议不是完全开放给用户去调整尺寸，而是给出一定阶梯度的快速选项，例如舒适、标准、紧凑三种高度来满足用户需求。
Ant的表格功能很齐全，很多功能都是B端产品的痛点，例如表格可以通过调整单元格行高来调整密度，紧凑模式下可以显示更多的数据。
3）操作路径
作为一个查询表格，我不是很理解为什么Arco将查询条件放置在表格右上角这么隐秘的位置，而将明显的左上角放一个添加按钮，如果存在多个查询条件是不是要从右往左放置呢？这里我不是很理解，大家也可以说一下自己的想法，相互探讨一下。
Ant的表格使用路径符合F型视觉动线布局，在B端的市场中这种表格的设计方式已经符合用户的操作习惯了。
在设计之前，我们先要去确定哪些内容最重要，明确信息的优先级，只有清楚知道你希望用户看到什么，才能将它们放在用户视线热点中。
个人认为在表格设计的完整度和设计的合理性方面来看，阿里的Ant系统做得比字节的Arco更好。
表单在界面中主要负责数据采集的功能，任何一个表单都可以被拆解成三个最基本要素：
标签（标题）、输入框和按钮。
1）表单布局
Arco的表单属于复杂表单，当表单条目数在7个以上，可归类到复杂表单，这时候就需要根据表单的复杂度、逻辑性、关联性进行判断，选择合适的分组方式，进行归纳简化，降低表单填写负荷。采用3列布局，便签与文本框上下左对齐，这样的对齐方式有利于用户浏览的效率、对齐的美观以及国际化拓展页面的对齐问题。
Ant的表单也是较为常规的布局方式，有一点差异就是文本框并没有右对齐，这里阿里自己也做出了解释：文本框是根据需要填写的字段进行长度展示的，需要填写内容比较长的文本框就会比较长。实际业务中，大部分input所需填写内容都存在理想长度，input的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。
2）标签对齐方式
Arco和Ant都使用了顶标签的形式对齐。
标签分为左标签、右标签、顶标签三种，不同的对齐方式，使用场景不同。
该如何选择呢？我们需要从3个方面进行考虑：操作效率、标签长度、屏效、视觉对齐。
①操作效率
因此当以操作效率为主时，推荐使用顶对齐的方式。
②标签长度
当标签长度超过8个字，或者需要考虑中英文双版本时，推荐使用顶对齐的方式，其容纳的标签文字更多，拓展性更好，比如Ones的建任务的标签，就采用标签顶对齐的方式：
③屏效
如果只考虑屏效，那么标签左对齐右对齐均可，但是如果还考虑表单录入效率，那么推荐使用标签右对齐的方式，比如蜂鸟汇报：
Arco的颜色主题配置可以说是让人眼前一亮了，可调整的范围非常广非常牛逼。可以编辑的维度从基础的颜色、字体、阴影、到组件的按钮、导航、分类、表格一共有接近40款组件的样式，并且都是可以进行可视化编辑与实时预览的。
如果你用了Arco过后，或许不用苦苦地站在前端后面，让他帮忙调整页面，作为设计师自己就能够搞定，并且每一个组件可以调整的粒度是非常之细，包含各种宽度、图标大小、颜色、投影，等等…在这里可以编辑自己的主题，也可以在商城社区查看到别人发布的主题，真的是很方便啊。
真的有些amazing！假如你需要去设计一套官方的设计系统，完全可以通过Arco进行设计和预览、落地。
Ant并没有做这方面的功能，颜色主题配置这一块确实是Arco很大的亮点。
对于大多数网页设计师来说，你的成品需要在各种类型和尺寸的设备上进行外观和工作，这是显而易见的。创建多个设计来实现同一目标的日子已经一去不复返了。
这一切都归结为选择响应式或自适应设计模型，以实现任何规模的一致网站设计。
1.与设备无关的设计的两种方法
2.响应式设计
现在比以往任何时候都更重要的是，我们正在设计旨在沿着不同体验的梯度观看的作品。响应式网页设计为我们提供了一条前进的道路，最终让我们能够“为事物的潮起潮落而设计”。
而这正是我们目前关于响应式网站的思想学派的起点。
自适应设计最常见的用途是将旧设计转换为更适合移动设备的设计。这并不是说它不会发生在新的开发中。