分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计系统里面所有涉及到组件圆角值，都要基于8网格来定义。大圆角一般会用在页面级别的组件设计，比如沉浸式浮层或者弹窗等。
包括整个系统页面级别的布局，都需要基于8pt网格来建立规则。上图是web端和移动端基于8pt的布局系统，需要确保水槽和边距是遵循这个规则的。
以上就是一个8pt网格设计系统的大致思路框架，当然除了上面这些，一个设计系统里面需要涉及到8pt网格系统还有响应式布局等，大家先一步步深入了解学习，将这套理念应用在项目中，发挥最大价值。
最后今天既然讲到了设计系统，我正巧也找到了iOS15的figma格式的UIKT，是在线版本的，可直接打开。大家可提前研究下iOS 15的一些新的规则与变化。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
早在平面设计开始之初，就有对“栅格”的使用记录。（不过那时不叫栅格，而叫网格）因为印刷机器以及切割工具的限制，导致在页面的板式设计需要一定的出血线用于防止书籍内容的缺失，因此出现了当时非常火爆的《平面设计中的网格系统》一书。
虽然这是一本非常老的书，但是设计本身就是相通，将其核心思想用在图标设计、网页设计、B端设计当中都有着明确的指导意义。
而在设计（网页端、桌面端）产品时，对于空间上的理解，一直以来都是令人头疼的问题。
我们将屏幕当中的设计空间分为 横向 与 纵向 两个维度：
横向：
由于大多数显示器都是宽屏的形式，导致我们大多数页面内容都是通过横向的方式进行列式排布，也就导致纵向导航、二三级内容分布较多；而市面上所要兼容的横向尺寸较多，大致分为：1920、1440、1366、1280，而怎样将如此多的尺寸，摆放不同的元素，这仿佛才是设计的难点。
纵向：
屏幕的纵向的空间同样十分关键，当内容在横向无法满足时，则会增加屏幕纵向的内容量。但是我们可以通过浏览器的特性，纵向的内容通过滚动条进行收折，进而实现兼容。
前面说了这么多，我们来聊聊栅格的定义。
栅格：是对界面当中元素横向排布的一种模式，主要用于大型区块间距的排列，不适用于 图标与文字 间隔的小型元素。
这里有两个重要点：
横向排布：代表着栅格的用法，这也是为什么栅格都是一列一列的原因。
用于大型区块：不是任何内容都可以用栅格，比如在 卡片当中的图标、文字，更多是要分析整个卡片，将其看作一个整体，如上图。
在一个常见的栅格当中，一般分为 页边距、水槽、栅格宽度：
页边距：是栅格与外层信息的保护区域
因为在整个栅格系统当中，除了栅格之外，往往还会有其他的内容进行展示（如上上方图，栅格日常的使用页面），而我们正好可以通过页边距的方式，将其进行区分。我们以常见的B端界面为例，通过页边距可以将侧边导航与内容页进行区分，保证页面间的亲密性，常见的页边距尺寸一般为 20px、24px。
水槽：是确定栅格宽度间的固定间距，通常是帮助栅格内的元素进行更为合理的排布。
水槽目的就是为了统一元素间的距离。比如现在页面当中有两个卡片的内容，而使用水槽，我就可以将这两个卡片的内容，确定其间距（再次强调栅格用于确定横向内容）方便栅格当中元素的信息排列。
栅格宽度：是栅格当中内容所占的基本宽度，一个栅格宽度往往是通过 内容宽度、页边距、水槽 排除过后所剩的宽度平均得出，一般会分为 12栏、24栏 两种方式。
栅格宽度的确定，其实就是一个数学题，先给你一个公式（不建议使）：
(A×n) – i = W
A：一个栅格单元的宽度；a：一个栅格的宽度；n：正整数；i：水槽宽度；W：页面的宽度。
虽然公式好像是万能的，但我不喜欢死记硬背，来深入讲一讲这个公式背后的逻辑和使用方法。
以1440的页面为例，通常B端产品左侧会有一个导航菜单，假设为 200px，因此整个栅格的内容页则为1440 – 200=1240px。
然后设定页边距宽度为 24px，一个栅格会有两条页边距，剩下宽度则为：1240 – (24*2)=1192px
接着设定整个栅格为12栏，水槽宽度为8px。因为水槽位于 栅格 的左右两侧，也就意味着水槽的数量会比栅格少一列（别问为什么，问就自己去下面图片数一数）也就是1192 – (8*11)=1104px
最后因为在水槽已经确定栅格为12栏，整个栅格的宽度则为：1104/12=92px
如果还不能理解，建议跳到开头，再看一遍。
整个栅格的顺序不能乱：页面宽度→页边距→水槽→栅格宽度。因为我们的栅格一定是从大到小，从外到里，不然做出来的内容很容易无效。
将元素摆放在栅格中，还需要注意起始位置与结束位置。这里教你们一个口诀：起始在左，结束在右；换句话说就是元素的起始位置必须放在栅格宽度的左侧（也中的红线）；
结束位置必须放在栅格宽度的右侧（图中的蓝线）
这样的方式也是为了避免很多设计师知道画栅格而不会用栅格，出现一些低级错误。
关于栅格的定义就先聊到这，下期来与大家讲一讲关于栅格应用当中的自适应布局、响应式布局，以及其中的断点等内容，我们下期见～
原文链接：CE青年（公众号）
作者：CE青年
转载请注明：学UI网》B端设计指南 – 栅格的定义
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
设计语言是把设计作为一种“沟通的方式”，在特定的场景中进行内容与信息的传达。设计是介于科学与美学之间的一种艺术，是需要理性的去解决感性的问题。它和艺术之间的差别就在于“解决问题”。
设计语言最底层是项目设计语言，具有典型特征和主题，比如医疗项目凸显专业冷静，节日项目凸显热闹氛围。往上一层是产品设计语言，强调个性品牌，比如小视频的设计深色更沉浸，电商从结构到色彩都凸显热闹。很多产品随着发展，形成一些系列平台服务，平台设计语言确保服务“统一规范”。最顶层是生态设计语言，跨设备跨平台和硬件呈现的设计语言。
百度直播业务，从单一业务形成系列平台服务，囊括的不只是 B 端和 C 端用户产品，还有 8 大垂类蓬勃发展，以及跨业务多宿主的呈现。庞大的平台业务，特别需要建设平台设计语言。
所有的设计语言，都是服务于业务顶层战略发展。制定设计策略前，需对业务所在的行业背景、品牌战略、用户群体、流行趋势有充足的认知。当返工无数次还是没方向时，说明以下前四点需要再深入明确。
建立设计原则时（设计语言的标准），不妨尝试把品牌战略人格化，由所有人解决所有人问题的愿景，得出产品是一个解决问题的行业专家的身份，Ta 传达的气质是简洁大方的仪表，亲和有力的仪态，和专业权威的素养。
设计语言以现代轻奢风格为基调，它大简至美、配色和谐、材质考究，以独具特色的现代格调，构筑起一个充满质感又十分舒适的直播间，给用户一致、友好、有品的体验。
设计动手前，按照风格基调具象化拆解分析必不可少，每一个元素的表达手法都要定位清晰。
在图标的设计中，我们基于专业亲和的品牌理念延展出 2 个不同的方向。方案一以直线折纸与光影为视觉元素，呈现一个用心专业的态度。方案二以曲线雕刻艺术展现专业亲和的魅力。
图标体系化，多场景验证一致性，发现方案一不够极致，造型复杂；方案二具备良好的一致性，但破坏了物体固有的结构，影响识别度。
在一致性的前提下，尝试简化、提高识别度。巧妙的将光影和结构交汇，极简到 2 个图层呈现主体；语义清晰识别度高；角度渐变光影带来舒适亲和感，15°x 角度的精准把控传达专业的品牌特性。因此总结出图标绘制要遵循的法则为识别性、品牌性、愉悦性、一致性。
a）标准色
初期直播品牌色继承百度 App 品牌色，随着业务逐渐中台化，需要专属直播色。运用色彩心理学传递给人不同的情绪及心理感受，寻找直播的专属色相，而活力、温暖的红色色调，更能体现亲和有力的产品气质。
红色也有冷暖之分，此时提高色相、饱和度的颗粒度，H 色相以 350°为起点，以 2°递增或递减，S 饱和度以 5°为阶梯，生成更多色阶（保持相同 B 明度 100），在多界面和真机验证，得出直播专属红（H350 S80 B100），冷暖适中符合平台属性。
b)协调的辅助色
同时，运用色环建立辅助色彩体系。H 色相以 350°为起点，以 15°递增或递减标准，创建 24 色相色板（保持相同 B 明度 100、S 饱和度 80）；选取柔和与协调的类似色和邻近色作为家族色彩主体，调和互补色与对比色，平衡整体色调。因为不同色相的感官明度并不相同，校正每一个辅助色的 HSB，达到色彩感官上一致。
C）调色版
一般会有 2 种方法，一种是使用明度差获得统一性佳的调色板，优点是落地成本低，代码可直接实现；另一种则是微调饱和度和色相，获得鲜明的色板，可使用在插图绘制上。
亚克力，这种具有透明质感、光学品质的材质，在设计领域最早应用在家居设计上，被互联网设计师熟知是在微软的概念视频里，随之逐渐应用到 icon 绘制上，亚克力 1.0 版本背景和主体层次没拉开，2.0 版本更趋向加大不透明度和模糊值，达到清晰舒适又兼具艺术美感。
这种量身打造的稀缺材质运用在运营玩法上，如红包雨玩法，既能凸显平台专业用心的态度，又能强化用户消费行为转化，助力变现增长。
用户激励体系，采用 3D 玉石润泽质感+动态折射光影，体现有内涵不张扬的泛知识调性，凸显用户独特身份感
在每一个小元素的创作中，我们都时刻谨记，无论是项目的主题语言、还是产品的设计语言、甚至是生态的，终点都是传达企业文化以及价值观。从战略层重构业务的认知体系，再将品牌战略人格化，才能够在茫然期产生真正的笃定感，逐步拆解设计目标和构建符合业务气质的设计语言，达到最愉悦的体验。
文章来源：优设 作者：百度MEUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
通过研究分析，发现fogg模型可以帮助我们了解为什么用户不行动，又如何利用fogg模型让用户行动起来
我近期在做的一个项目，是成人直播在线学习的平台，主要以书画为主。
我们发现用户的到课率和完课率较低，所以我们花了挺多时间在研究分析用户，讨论用户为什么没来上课？用户来了为什么没有坚持看完直播？她们出于什么动机来学习的？又在学习过程中遇到了什么困难？……
通过研究分析，我发现用fogg模型来解释特别清晰，所以我特意深入了解了这一模型。所以就有了这篇文章。
福格行为模型，是以BJ Fogg（斯坦福说服力科学实验室主任）命名的，表明一个行为得以发生，行为者首先需要需要有进行此行为的动力和操作此行为的能力。接着，他们有足够的动力和能力来实施既定行为，他们就会在被诱导/触发时进行。
fogg总结为一个人的行为产生需要三个要素：动力、能力、触发。B=mat，即行为=动机、能力、触发，三个要素必须同时满足才会形成一次有效的转化行动，否则不会发生。
fogg总结的动机分为3类：感觉、期待、归属感，人的本能都是追求快乐，逃避痛苦的；抱有希望，逃避恐惧的；寻求认同，避免拒绝的。
拿书画学习来说，为什么用户会来上课学习？首先是感兴趣，甚至喜欢和热爱才来的，学习书画
可以让她们感到快乐，愉悦身心，陶冶情操；其次会抱着学会和掌握的希望，幻想自己习得一技之长以后的样子；另外通过书画创作希望得到他人的认可和欣赏……
结合马斯洛需求层次理论，可以发现不同的人在不同的时刻有不同的需求，就会表现为不同的动机，越接近动物本性的需求，动机则更为强烈，只有低层次的需求得到满足，才会追求更高层级的需求。
还是说回书画学习的例子，用户只有能感受都书画魅力，在学习的过程中感到愉悦，她才会追求更高层次的需求，比如得到他人的认可，最后成名成家（自我实现）。
能力是指有能力（人本身的能力）完成，并且完成这件事的成本是可接受的范围内的。
可以有两种方式提高用户的能力：1、降低成本；2、通过利益等诱惑增加用户动机
1、降低成本
至于成本，有几个方面的成本：时间成本、金钱成本、体力付出、脑力付出、社会压力、习惯力量。
肯来学习书画的人多少都是愿意付出时间和金钱成本的。
体力付出呢，比方说，我们的产品当中没有给用户提供购买材料的链接，用户就需要额外付出体力，可能是淘宝京东之类的电商平台去选购，又可能是到线下画材店去选购，那很有可能她就因此放弃了学习的念头…
社会压力：比如说我之前一位做设计的同事，后来辞职去北京油画村专注学油画去了，那其实在外人看来就不是很好理解，这时候他其实是顶着一定的压力的，也就付出了更多的成本。
习惯的力量：比如平时有空都是跳广场的王阿姨在李阿姨的鼓动下，也想学书画，但是学书画这件事破坏了她跳广场舞的习惯，产生了额外的成本。所以除非王阿姨的动力很足，不然她很容易就打消了学习书画的念头。
2、通过诱惑增加用户的动机
诱惑可以是利益相关的诱惑，比如说学习书画，平台定期举办活动或者比赛，评选优秀作品并送出丰厚奖品；甚至平台有帮助用户卖画的渠道，可以额外增加收入或名气，那用户的学习动力也会大很多。
fogg认为用户最在的是成本，与其用更多的诱惑增加用户的动机，不如想办法降低用户的成本。
现在用户既有动机也有能力了，但还不一定能产生相应的行为，还需要触发因素。
触发因素主要有：刺激、辅助、信号
刺激：当用户有学画动机了，也有能力，但是她可能还是会犹犹豫豫，这时候我们通过文案“零基础，3-70岁都能学得会”，或许一下子就打消了她的顾虑，分分钟领课体验。
也就是说，用户动机弱能力强时，我们需要刺激用户产生或加强动机。
辅助：当用户有足够的学画动机，但是不知道怎么领课体验学习，那我们就需要简化领课的流程，或者增加辅助，只需打个电话就能找到专属的客服进行问询和帮助。
也就是说，用户动机强能力弱时，我们需要帮助用户，降低用户的操作成本。
信号：当用户既有了学画的动机也知道怎么领课体验，但是还是难免会因为其他事情冲突而忘记了来上课，这时我们就需要在合适的时机给她一个提醒。
也就是说，用户动机强能力强的时，我们只需要在合适的时机给出提醒就行，不要有过渡劝说行为，反而会适得其反。
说完这3个要素，再来分析我所做的项目，我利用fogg模型分析对比不同的用户的动机、能力、触发因素。
详细项目方案：https://www.zcool.com.cn/work/ZNTU3NDY5NDg=.html
单看动机，每类用户的动机不足的原因是不一样的，三十几岁可能是感觉上不够愉悦，毕竟她年轻不太能静心领略国画带来的乐趣，这个和阅历有关，心气还不够沉稳；而50岁以上的中老年人非常享受作画的带来的身心愉悦，但是期待感可能会不够，总担心自己老了学东西费力，学不会，没信心。
再看能力，也是各有不同的，对于三十几岁的用户而言时间就是金钱，所以她会比较看重学习效率，如果我们的每节直播课都是一个多小时两个小时，那她就会觉得需要付出的时间成本实在是太高了，就容易放弃，反而我们告诉她，可以利用碎片化时间学习，那她还是愿意尝试的；而四十几岁、五十几岁的用户学习新东西的能力远不如年轻人，并且他们的行为习惯已经非常固化，所以他们需要付出的成本更多的是脑力付出和习惯改变/养成。
那这样一顿分析之后，也就容易找到对应的策略了，这对产品设计真的很有帮助。
fogg认为增加用户的动机比降低用户成本要难。
确实如此，人的意愿很难被改变。用户如果对书画一点兴趣都没有，那这样的用户我们就可以直接放弃，而不是想方设法提升她的兴趣，多次劝说反而还会让用户反感。我们要做的是找到潜在用户，至少是有兴趣，愿意尝试的用户，想办法让她们来上课体验，并且在短期内入门，学习有效果，才有可能转化成我们的VIP用户。
fogg模型在电商领域运用特别多，商家的各种套路不是在强化我们的购买动机就是在降低我们的购买成本。不知不觉中就买买买，尤其是各种活动促销时，你有没有发现双十一买了很多东西，但东西寄到家后其实并没那么需要或者喜欢，所以又退掉了……
除了电商领域，fogg模型可以运用在各种媒介和场景中，比如我所做的这个书画学习项目，提升用户到课率和完课率为目标，可以用这个模型指导，换成提升转化率或者转介绍率同样也可以用这个模型来指导。
B=mat，行动=动机、能力、触发因素三者同时出现
动机主要体现在：感觉、期待、归属感
能力提升主要有两种方式：1 降低成本，2 提升用户动机(利益等诱惑)
成本主要有：时间成本、金钱成本、体力付出、脑力付出、社会压力、习惯力量
触发因素主要有：刺激，辅助，信号
文章来源：站酷 作者：酥酥d
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
因为后台是一个非常广泛的且深奥的东西，里面包含了太多的业务逻辑，而且每个产品面向的用户群体又不同，因此不可能说的面面俱到，但是我提炼的这七个步骤适用于大部分后台的一个宏观方向，对于一个没有后台项目经验的人去从头制作一款后台产品应该是非常有帮助的。
导航是后台的主躯干，一切操作都需要在导航的指引下进行切换，目前常用的有两种导航，顶部导航与树状导航。
顶部导航是大多数Web端网站使用的导航模式，因为人的阅读视觉是从上往下，从左往右，因此，顶部是视角最先达到的地方，顶部导航可以让用户快速了解整个网站的主要内容结构，通常在营销级官网，内容浏览平台被广泛应用（例如京东，阿里云，站酷...）。
但是其弊端也是很显而易见的，因为屏幕宽度的限制，在小屏下，顶部显示文本内容有限，通常只有几个字符的内容，更多内容或二级标题则需要进行隐藏显示。其次因为人类身体结构，成年人的头颅约为4.5～5.5公斤，占据身体7.7%左右的重量，我们的颈椎承受了太多，因此人在左右扭头时要比上下点头更舒服。再者人类的眼睛是左右排布的，与生俱来两边的视线就优于上下的视线，顶部导航如果需要高频次使用的话会让用户非常的劳累。
优点：节约空间、可以快速吸睛
缺点：显示文本内容有限，不符合人体工程学，不方便查找
在很多生产力工具上，后台网站上，B端产品上，阅读软件上，树状导航被广泛运用。树状导航是以父子层次结构来组织对象的，其优点非常显著：兼容性强，结构清晰，拓展性强等等。
先说兼容性，因为每条导航标题呈上下排布，因此一排只需显示一条标题，对于长标题与外文适配显得格外的友好。树状导航具有良好的层次关系，每一层内容都可以固定性的展示出来，不会像顶部导航必须鼠标悬浮才会显示子层级，不论是从便于梳理层次关系的角度来讲，还是频繁操作的简单化来说是都是完胜于顶部导航的。因为网页默认是上下滑动来查阅更多内容的，因此树状导航的拓展性方面碾压顶部导航，树状导航可以无限的向下拓展，就像书籍的目录一样，而顶部导航则只能显示寥寥无几的几个单词。
优点：可以展示更多的标题内容、可以不限制标题条数无限拓展、结构清晰易懂
缺点：占据空间较大，对于小屏可能需要频繁展开、收起导航
后台的主要功能是支撑前台产品，管理资源，因此在逻辑与结构的梳理上应当与前台产品保持一致性，在布局的制定上应当遵循模块化、响应式、高效化的布局，以便于清晰地传达信息。
在后台的布局中，通常需要将数据统计、展示与列表、操作区分开来，达到看归看，做归做的原则，如果混淆到一起就会大大的提升认知难度和操作难度， 就像老款的汽车的仪表盘与中控操作区分开来，用户就会很快的上手，但是像特斯拉都集成在一块屏幕上就会让用户傻傻分不清楚，一时间难以找到相应的操作区域。因此模块化在后台则显得格外重要，每个模块、每个区域都应当赋予它独特且自始至终不变的属性，比如顶部的导航条，全局都在顶部区域展示，而不是这个页面在顶部，下个页面在底部。
后台的布局中，常用的模块就是导航模块（整个后台功能的结构提纲），总导航就是我在上文提到的两种，顶部导航和树桩导航，其他还有二级导航，面包屑导航等等，但是需要注意的是，导航就像路标，起到指引用户的作用，因此在全局的样式与位置应保持统一。
顾名思义就是提示用户有新的消息，新的功能等等，提醒模块十分重要，因为它是实时性的，在设计提醒模块时应当遵循全局化、机动化，高亮化，动态化的规则，在常规状态下，提醒模块应该隐藏展示，不过多的打扰用户，但是如果在需要出现时，不论用户处于什么样的场景，提醒模块都应该在第一时间出现，并以醒目的方式告知用户。
数据统计通常是作为后台页面头部的存在，用户一进网站映入眼帘的就是整个产品或者整个项目的数据统计，数据是作为衡量某一件事情好坏的重要标准，数据也通常可以说明一个决策、一项任务的最终结果，在数据统计模块的设计上应该保持直观，一针见血的设计方式，比如股票的K线图，红涨绿跌，一目了然。
有许多使用频次非常高的功能可能会贯穿全局，比如谷歌Email，不论在哪个页面，日期、Task功能都会在右侧进行显示，方便用户随时添加待办，记笔记等等。在后台中，有很多时候一个小工具就可以提升很大的效率，不必在来回切换软件、页面，有很多情况下，我们看到了一个东西，联想起了某一件事情，打算记录下来，但是退出这个页面再去打开记事本的时候发现已经忘记了（这该死的7秒记忆）。因此在有些情况下，缩短操作路径是一个不错的选择，而快捷操作模块也同样要遵循全局固定位置，不可随意变动的原则，如果违背，效果往往会适得其反。
信息展示，这个模块应该是最难搞定的了，不管是什么页面，信息都是重中之重，没有信息的页面那和没有肉的肉夹馍一样。内容展示模块不同于以上的模块是全局静止的，内容展示模块承载了后台95%以上的页面量，每一个页面都不同。因为后台页面大部分时间都是以电脑端网页的形式呈现，人在看电脑时通常会和显示器之间有30-50cm的距离，甚至可能更远，因此在内容的展示模块上应当给予友善的设计，比如加大文字之间的字间距，行间距，突出重要信息，以图文并茂的形式将枯燥的信息情趣化，没有内容的模块放置缺省提示图。
操作模块通常是与内容展示模块共同存在的，两者互相配合使用，凡是在页面中涉及到可以点击交互的区域统称为操作模块，操作模块应该全局统一视觉语言以及操作语言，比如，按钮样式及大小，开关样式，分页器摆放位置及样式等等。所有的操作模块表意性要强，让用户可以快速明白点击后的结果，如果遇到难以理解的操作功能，应该配合图标使用并给予操作引导。
编辑模块就是通常说的表单填写页，编辑模块拥有新建，上传，输入，选择一系列的交互方式，其目的是为了让用户录入信息内容，因此在编辑模块的设计中应该按照相对应的前台项目理清顺序，从头至尾合理引导，引导语尽量简短并阐明要义。在操作的过程中，应当给予用户清晰、及时的反馈，并给予用户返回、撤销、清空、保存等操作。在表单的设计中，尽量将信息进行单行纵向排列，每一条信息各占一行，并保持信息对齐方式一致，保证用户视线流畅舒适。
电脑端常见的操作方式：
鼠标单击是指鼠标点击UI控件后释放点击的一种交互行为，在整个过程中，用户点击和释放的坐标点是一致的，不可有移动的行为，点击是建立在悬浮动作之后的。左键单击是最常用的PC端交互方式，其作用是触发某一操作，整个页面由很多链接、控件组成，而鼠标单击则是触发这些可被操作的控件。
Hover就是我们通常说的鼠标悬浮，当用户用鼠标指针移过UI控件时，UI控件给予的反馈效果就是悬浮交互方式。悬浮的主要功能是「拓展」与「指示」。在很多情况下，我们的屏幕无法将更多的信息进行展示时，通常会将众多功能收纳至一个控件当中，而鼠标悬浮则会触发控件将其隐藏的功能进行显示。鼠标悬浮的指示意义是为了让我们更好的理解控件的属性并提供及时反馈，比如将鼠标悬浮在文字上，鼠标会变成工字梁，将鼠标悬浮在可点击的控件上会变成小手表示可操作，悬浮至不可点击控件上会变成问号等等。
在实际的设计当中，我们可以为鼠标悬浮赋予更多的可能性，鼠标悬浮可以将未完全展示的文字进行展示，也可以对收纳起的功能进行展示，还可以进行许多快捷预览等等，但是鼠标悬浮最重要的功能则是为用户提供交互行为时的「及时反馈」。
自从计算机操作系统诞生后就为右键赋予了「系统菜单」的交互意义，在不同的场景下点击右键所出现的内容是不一样的，这取决与网页与应用的开发者，在网页的设计中，将常用的快捷操作写入右键菜单，会极大的提升工作效率，因为右键的菜单弹窗始终在鼠标指针附近触发，因此对于用户寻找功能是非常友善的，但是需要注意的是右键的操作应该全局统一，在同一套产品中，右键的内容不应该出现过多的功能，否则会对使用者造成困扰。
拖拽，顾名思义就是鼠标单击某一文件不放进行拖拽，拖拽操作相对与其他交互更具有操作感，因此在设计拖拽时，动画是一个必要的选择，动画是表现交互给予反馈最直观最有趣的选择，拖拽的动画最基础的表现为被拖拽对象跟随鼠标进行位移，而且松开鼠标后，文件的最终归属位置。拖拽常用与复制、移动顺序、上传、下载文件的场景，相对与普通的多步骤点击操作，拖拽所反馈的定位更加明确，可以大大缩短寻找目录、寻找文件的时间。
布局框架是一套产品的骨架和基础。只有在框架确定之后，设计师才可进行下一步的构建统一的视觉元素，清晰的功能操作，具体的交互流程等等。后台产品是一个庞大的体系，除了对应前台产品的功能之外，还包括对产品部门的管理，产品相关的功能管理，不同身份对应的权限管理等等，因此太过单一的布局形式并不能适用，因此我们在设计后台布局时应该遵循简约化、统一化、规范化、拓展性强的原则。
对于拥有着众多功能的后台，我们应该做到化繁为简，多而不乱，如果想做到这一点我们就应该参考《简约至上》一书中所说的简约四要素：删除、组织、隐藏、转移。
在iPhone的外观设计上，乔帮主一直信仰「少即是多」，就是我们通常说的做减法，这一伟大信仰在苹果公司的产品上完美的体现了出来了，苹果不论是线下门店还是官网、硬件、系统等等都将一切简约到了极致。用在我们的产品布局上，删除就是将无用、重复的功能删除，保留必要的功能，不要将和业务与用户使用功能完全不相干的东西放在页面上。
组织的作用就是把业务相关的元素放一起，分个类，让用户可以更容易理解，比如有众多的水果蔬菜，将水果放在一个篮子，将蔬菜放置在另一个篮子要比它们都混合放在一起更容易辨认、查找。
人类喜欢规划一切，喜欢井井有条的秩序，组织就是规划，将整个页面众多的元素进行规划分类，把相关联的元素模块化，每个模块之间应该做好分割，分割包括：留白分割，分割线分割，模块分割，Tab点击分割，分割强度级从左至右越来越高。要注意的一点是组织存在争议性，有的人他认为番茄归类为水果，而有的人认为番茄应该归类为蔬菜，这辩论起来双方似乎都有道理，所以在设计中，组织元素时应该细细斟酌，对于这种墙头草类型的功能，应该谨慎处理，在了解用户心智之后再做定义。
隐藏是一种并不快捷的简约化的方案，隐藏通常是将使用频次低的功能藏起来，等需要时再手动调出使用，这些功能不常用但也并不代表没用，比如设置头像、名称等等，隐藏可以让页面在视觉上更加轻量化，毕竟有限的空间还是要留给更重要的功能。
我们上学时做题，当看到一道应用题有足足几百字，那我们下意识的想法就是，这题™的太难了，虽然还没有开始思考。但是人们的潜意识就是对看似复杂的东西排斥。在诺基亚还处在全键盘的时候，Android机还有三大金刚键的时候，iPhone就已经简约到了只保留home键、音量键和开机键，那么iPhone把其他所有的功能键都移除了，真的操作起来就简约了吗，按照复杂度守恒定律来说并没没有，复杂依旧存在，只不过是将原本学习按钮的过程转移到了去屏幕里交互的过程，但是这样子更容易被人所接受，因为是对复杂进行了分步引导操作，就像跑马拉松，如果你目标想着跑完全程，那么你多半半路就废了，但是如果你把目标变成每5公里为一段，分为八个小目标那么你可以很轻松坚持到终点，这就是一种魔力，因为每个人都不喜欢把自己搞得很累。回归至设计当中，后台是一个复杂的系统，功能可能多到眼花缭乱，但是如果将很多的步骤的一个流程分为众多小步骤去合理引导，那么是否会更加的易于理解、便于操作呢，这就是转移的用法。
在制作后台时，我们应该遵循模块化布局，并提前规划好静态模块与动态模块。比如导航模块、面包屑、按钮等这些组件，在全局的位置应该保持一致，这些就是静态模块，全局样式与位置上不会出现过多变化。而动态模块一般就是内容区域，因为业务与功能的不同，内容模块所展示的内容是一定不同的，这一块的内容则是需要变化的。提前规划静态与动态的布局在开发方面可以节省代码量与开发成本，开发只需要将静态模块写成固定的组件就可以达到全局复用，快速修改的效果，在用户方面也可以大大的节省用户的学习成本，因为用户在学习了静态模块之后，之后则只需要再去学习动态模块就可以，而不需要每个页面、每个组件都要去进行学习。
因为后台大多数情况都是在Pc端与Pad端使用，这两个终端的屏幕没有固定的尺寸，可能有4k屏，可能有1k屏，当然还有可能是笔记本电脑所使用的更小尺寸，因此在设计时不能使用固定的设计稿尺寸，而应该使用较小的横屏设计尺寸进行设计，最早的屏幕分辨率低，通常都是使用900px~1100px的尺寸作为设计稿尺寸，但是随着科技的发展，目前市面上的屏幕最低都是1080p的屏幕了，因此在设计时可以使用横向「1200px」与「1440px」的尺寸作为设计稿尺寸，最大不应该超过1600px的尺寸。
定好尺寸之后，在设计时我们应该以响应式布局的思维去设计，什么是响应式布局，通俗说就是在屏幕变大的同时，页面内容会跟随屏幕的变大而展示更多的内容，需要注意的是：在屏幕变大的过程中，页面的内容应该只会出现信息数量的变化与信息之间距离的变化，不应该出现元素尺寸放大。在目前的设计中很多设计师喜欢使用栅格的设计方法，栅格布局具有易响应、设计规范化等优点，缺点就是可能会束缚设计师的发挥，在制作页面时完全按照制定的栅格走，缺少了灵动的感觉。虽然不见得要使用栅格布局法进行设计，但是我们要了解栅格的原理，要使用栅格的思维去制作。
栅格就是将页面划分为不等的几个模块，可以是12个模块，也可以是24个等等，每个模块之间的间距使用固定的距离，叫做水槽，可以将这些模块看做是参考线，水槽内就是禁止区，我们在设计时，将内容设计在模块内，用水槽作为模块之间的间距与留白使用，水槽只作为留白区域，不可以放置任何元素，最终开发时，响应式布局就是将模尺寸块随着屏幕宽度的变化而变化，而水槽则不动，如果屏幕变窄，不足以放下一个模块时，这是则将模块下移至第二行，水槽依然是不变的。
懂得了水槽的原理，那么我们设计的时候就算不用固定的栅格方式去制作，页面也不会出现太大的错误。
看懂了栅格之后总结一下，这不就是说一个模块一个模块的去设计么。没错，在设计时我们就是将元素按模块进行设计，这里说的模块不单单是指灰背景与白色块这样的组合，元素之间使用排版四要素中的亲密也可以哦，只要是视觉上看起来是一块一块的，就算没有分割线、分割块它依然算是一个模块。
回到了响应式布局，当我们按模块进行设计后，那么响应式布局就是毛毛雨了，开发只需要在屏幕尺寸变宽的时候将模块之间的距离拉大就可以了，这时就不是设计该去管的事情了。
总而言之就是，遵循响应式布局的目的就是为了屏幕尺寸在不断变化的同时，不会去影响改变内容的整体观感与体验，不会出现图片拉伸，字体忽大忽小的情况。
间距这个东西真是老生常谈的事了，其实也没什么太多说的，但是这里还是去大致说下，什么样的间距比较合理，视觉上看起来比较舒服。
屏幕的分辨率都是以偶数为主，1600*900、1920*1080、2560*1440等等，因此我们在使用间距的时候最好使用偶数作为最小基数，然后其他间距以最小基数的倍数去制定，比如你最初制定的最小基数为2px，那么整套页面的最小间距就使用2px，接着随着间距的增大，就以2的偶数倍作为其他间距，比如2*2=4px、2*4=8px、2*8=16px等等，这样做页面不仅看起来比较规范，而且易于开发，易于记忆，不容易出现锯齿。
因为我们的后台产品通常是在电脑屏幕上使用的，电脑屏幕距离人眼的距离相对于手机较远，而且后台产品业务种类繁多，功能错综复杂，因此元素之间并不太适合过度拥挤，否则阅读起来就像报纸一样，难以辨认，效率低下。而过大的留白又会导致展示的信息量少，出现信息密度不足的情况，同样会导致阅读效率下降，因此在间距上我们应该取中度，这个中度的标准就是将一个24寸的显示器放在距离眼睛50cm的地方，然后去看这个页面的间距，两个元素看起来刚好不会很拥挤的时候，差不多就是刚刚好的，为什么使用24寸的显示器呢，因为24寸的显示器市场占有率较高，也是在日常环境中眼睛视线范围内看起来比较舒服的尺寸，比24存再小的显示器大多数就是笔记本屏幕了。
元素之间的科学距离通常使用等分原则与五分原则，就是同一模块的元素距离使用a，不同模块之间的距离则使用2a。
总结一下就是层级相同的模块之间保持相同的间距（等分原则），层级不同的模块保持不同的间距（五分原则）。
场景驱动间距，听起来有点不易理解，其实是so easy的，举个例子，当你要去一个陌生的停车场找自己的车，你又不知道你车放哪的时候，这时，你最希望的就是来一架无人机，从航拍的角度去看所有车辆，然后看哪个像自己的车，在做决定。当你找到你的车了，你要看看你车有没有被剐蹭，油还多不多了，你就需要放下无人机，走到车前仔细观看，而这时，整个停车场的布局什么的对你就没什么太大意义了。
这回应该很好理解了吧，找车就是信息检索，找到车了进去看车里有木有油就是内容阅读。信息检索，通常在后台以列表的形式存在，且常常配合检索功能（搜索、筛选、排序）等，这时检索出的信息密度一定要大，因为用户需要在大密度信息中快速浏览，找到符合自己的东西，假如你要是在淘宝搜索一个袜子，结果一屏就显示一条，你要浏览时，你还要来回翻页，你是否会很崩溃呢？
而筛选出的内容，这条内容就是用户千挑万选出来属于他的精华，他会仔细查看这个信息的详情，这时，我们要做的就是将留白加大，字间距加大，字号加大，让他很舒服的把这个信息阅读完成。还是上个例子，你淘宝搜索到了袜子，你要看看它的颜色，布料材质，穿上臭不臭等，这时袜子的的详情页信息比报纸还要拥挤，还需要你用放大镜才能看清，这时，你是否再次奔溃了呢。然后就直接关闭淘宝，前往京东查看了。。。
说了这么多就是，用户在进行信息检索时需要将间距适当调小，在保证有效阅读的条件下，尽量在一屏内显示更多的内容，当用户筛选完成准备阅读内容时，我们就要放大间距，最大的保证阅读的舒适性。这只是其中的一条小例子，场景可能千千万，这就需要设计师自己动脑去思考，去模拟了。
上帝说：要有光！！而颜色就是我们对光产生的视觉效应，目前我们肉眼可见的颜色大约是100多万种，那么这么多种颜色，选什么色作为主要的色彩使用在页面上呢，其实很简单，这么多颜色，我们只需要把色彩大致的分成：赤橙黄绿青蓝紫这7个颜色就可以了，毕竟人类更注重的是全局观，一个颜色，你稍微深一点，稍微浅一点，99%人都分辨不出来，毕竟大多数男性连口红色都分辨不出来呢。
在色彩中，色彩有三个属性：色相、明度、饱和度，这三个属性只要我们了解了原理就可以手动调色了，有人说，手调的不准确，不科学，那么如果你会写色彩的算法，请略过此处，普通人还是手动调调比较好，因为，只要是掌握了色彩心理学，色感别太差，全局色彩统一，对于中小公司完全可用。
调色怎么调呢，第一看色相，色相决定的色彩的大方向，那么色相条中这么多颜色，用那个色相范围好呢，这个就要看色彩心里学了，通常我们看到红色想起什么？五星红旗、党、激情、慷慨激昂、股票大涨，那老外看到红色呢，血腥、暴力、闹鬼了，同样一个红色，咋国内外差距这么大呢，这要说的就多了，毕竟是历史遗留问题，政治问题，生活传统问题等等，具体请参考度娘。。。除了红色，还有橙黄绿青蓝紫六种颜色呢，当你看到其他的颜色你想到什么，那这就是色彩心理，因为你什么都没干，就看个颜色就能脑补各种东西，有了各种感觉，色彩是不很神奇，没错就是很神奇，不同的色彩对于不同的地域的人群，不同职业的人群，不同年龄的人群都会有不同的色彩心里，这个具体就不细说了，知乎，百度一大堆相关研究。而我们要做的就是根据你的业务属性和面对的相关人群，使用他们的色彩心里去制定你的色相，要是面对医疗行业，可能绿色是个不错的选择，如果要是面对政府行业，或许红色更讨领导们喜欢。
确定好色相范围了，那么接下来我们就需要再考虑考虑饱和度问题了，饱和度是什么，爱修图的女性朋友一定知道，色彩的饱和度越高，那颜色越鲜艳，饱和度越低，色彩越枯燥，饱和度为0，嗯没错，50年前的电视机就没有饱和度。在制定颜色的时候，饱和度往往决定了年龄属性，一般年龄偏大的人不喜欢那花里胡哨的鲜艳，更喜欢柔和中性的颜色，年轻人更喜欢炫酷潮流的高饱和颜色，这么一说你们应该就恍然大悟了吧，年龄高的人群用低保和，年龄低的人用高饱和，对，也不全对，饱和度不只是和年龄挂钩，也和产品的属性挂钩，就像兰州拉面的门头看上去貌似有点low，但是看苹果的门头，觉得好像挺高端，为什么呢，因为过重的饱和度给人亲近感，但是相对来说就少了高级感，低保和俗称性冷淡风，给你一种高级感，比如莫兰迪色，饱和度较低的颜色会给人高级感，但会显得不近人情，饱和度较高给人廉价感，但是更亲民一些。
至于明度，就是颜色的亮度了，当你调完色相和饱和度时，发现这个颜色貌似有点刺眼，那么你就把亮度调低点，如果发现有点看不清，那么你就把明度调高点，明度就是这样子使用的吧~~~~
在使用颜色的同时还需要注意可视度，过浅颜色的按钮放上白色的字，眼神不好是看不清的，具体对比度什么样才算合理，请参考WCAG标准，能通过这个标准的，在可访问性上就没问题。
后台，大部分情况是企业自己用，或者给客户的幕后人员使用，相对于品牌色来说或许更在乎颜色的舒适性，红色波长，通常用作警示，所以看起来就比较刺眼，蓝色紫色波短，看起来就相对柔和，后台也许是很多人日常高频使用的工具，因此在舒适度上尽量要完美，舒适度包括较大的交互区域，合理的间距，基于人类视线的合理排版等等，这里我们只说颜色，不同人对于颜色的感知是不同的，但是基于色彩心理来讲，蓝色给人冷静理智安逸的感觉，因此，在大多数的后台产品当中，蓝色作为主题色的居多。
最终总结一下，不管是选择什么颜色作为主题色，一定要保证不能刺眼，否则对于长时间使用的操作者来说会是一个灾难性的问题，可能轻者视疲劳，重者干眼症青光眼。。。再者饱和度尽量不要过高，饱和度为：100是绝对不可以的，因为过于炫目的颜色会激起使用者的负面情绪，引起焦躁和不安的情绪，因此过高的饱和不可取。
文字，是我们记录信息的主要工具，在后台页面的设计中，我们不需要对字形进行设计，只需要使用Web端常用的标准字体就可以。
文字还有许多其他的属性，合理运用属性可以大幅的提高文字的阅读效率。后台的元素较为简约朴素，以文字为主，较少的图形作为辅助元素，在整屏页面的元素中，文字占据了大多数，那么如何体现出哪些信息重要，哪些信息次要，这时文字的字重属性与字体尺寸属性就可以完美的帮我们解决这个问题。字重越重的字越有力量感，辨认度越高，视觉重点越高，字重越轻的字体，给人文艺典雅高端的感觉，后台算是B端产品，应该是不大需要高端文艺的感觉的，引导视觉与可读性更重要一些，因此我们常规下就使用标准Regular字重就可以，再轻的字体阅读起来比较费劲就没必要再去使用了，而像标题、主文案、按钮这些文字，我们可以使用更重的字体与更大的尺寸来突出，将重点信息的层级拉开，引起用户的视觉注意。
当整页的阅读信息较多时，我们需注意将文字适当放大，正常情况下网页的文字为14px，但是在大篇幅的连贯性文字出现时，我们应该将文字的尺寸合理升至16px或者18px的大小，在行间距与字间距上也应该适当加大，那么行间距（行高）为多少比较适合呢，正常情况下我们使用sketch自带的行高就可以，对于文字信息较多的情况下，我们使用1.2-1.8倍的行高就比较容易阅读，在以阅读为主的页面中，比如文章阅读页、文档页这些情景下，使用1.5-2.5倍的行距更好，有人会说1.5倍间距就已经很大了，其实不然，当你在长时间阅读信息的时候，越到后面阅读效率越低，那么超大的行距可以有效缓解阅读疲劳感，在长时间阅读的情况下也可以避免串行的问题发生。
字体颜色也是一个需要注意的地方，通常我们为了便于记忆，使用灰度色就可以，一般色值为#222222、#333333、#666666、#999999、#CCCCCC这些，在一个页面中，正文文字的颜色不应该超过3种色值，通常为一个标题色，一个文本色，一个辅助色，高亮色另说。颜色的使用主要目的是为了凸显信息，过多的使用颜色会给用户造成有很多层级的错觉，导致层级混淆，页面混乱。
当后台产品的结构与信息元素全部排版完成后，这时我们会发现，整个页面除了文字和按钮貌似没有什么其他的东西了，确实，我们作为一个开发人员看起来都倍觉单调，更不用说每天使用我们产品的用户了，更是枯燥的要死。有人说，B端产品以效率为主，本身不就是枯燥的文字嘛，道理是这么个道理，但是作为开发人员，让用户使用的开心也是我们的一个任务，俗言道：一图胜千言，假如我们要学习一段历史，我相信比起来看书本上的文字，看电视剧的方式应该更受人青睐吧，谁都不喜欢全是文字的东西，客户也是一样的，因此我们应该对页面进行适当修饰，不应该把页面做成一个txt的文本文件。那么怎么去合理的修饰页面呢，很简单，图表化、图形化。
什么是图表化，简单解释来说就是将有规律的数据进行分类总结，用适合此类数据的图表进行展示，举个简单的例子，狗蛋想要去买股票，但是不知道买哪一只，于是想上网查一查最近5年每个公司的股票走势，结果找到了两份文件，一个是满是文字的数据列表文档，另一个是精美直观的K线图，那么你是狗蛋你会阅读哪个呢，当然去看k线图了，毕竟3秒钟就能知道个大概，如果看数据报表，眼花不说，一上午都不见得能阅读完。这时你就会发现图表的魅力。
那么图形化又是什么呢，依然很简单，就是将固定不变得字段图标化，将难以理解的字段插画化。人天生对于图形的识别能力就优于文字，对那些静态的字段给与图标的展示会大大提高用户的识别效率，什么是静态的字段呢？比如固定的按钮、导航、目录、设置等等，全局都长那样，不会因为切换场景而改变文字，这些就非常适合使用文字与图标相互配合来提升趣味度与辨识度了。
那么插画化又是什么呢？说白了就是将用户懒得看的那些字配张图，读书时我们的课本都是图文并茂的，那教育部就是怕学生光看文字产生厌倦导致不好好学习。同样的道理，有很多情况下，用户也懒的看文字，比如升级页，升级功能信息那么多字，不如多放几张图来的实在，这也就是那些APP产品为什么都有引导页的原因。
当你看到这一步的时候，说明你的后台已经完成的差不多了，后台是个极其复杂的系统，一个新手去学习使用一套后台就像一个菜鸟去学习玩一款新游戏一样，只不过游戏有我们的兴趣驱动，兴趣是最好的老师，而后台则不同了，学习使用后台的那都是为了工作，兴趣可就没那么强了，如果恰恰碰到了做的很复杂的后台，那客户可能当场崩溃，古有唐雎之怒，流血五步，今有员工之怒，当场跑路，没准产品学不会，人家就辞职了。想想都觉得很严重，这时就体现出了合理引导的重要性，那么什么叫做合理引导呢？引导分为很多种，有新手引导、新功能引导、版本变更引导，操作流程引导等等，但是最终的目的是为了让用户快速学会使用你的产品。
可以使用视频教学，文字教学，体验教学等等，具体怎么使用应该根据自身的业务进行分析，看看适合用哪种的方法。
要多提示，可以是红点提示，高亮提示，弹窗提示等，这块的主要目的就是：要将新功能在什么位置、有什么功能告知用户，别你功能去年就更新了，用户今年还不知道呢~，这就尴尬了。
每个版本交互设计师，产品经理，体验设计团队等等一大堆人去探讨，将旧版本不合理的功能升级，去除，换位置，合并等等，每动一点，用户都需要从新学习，因此当版本变更导致操作习惯和之前不同时就要提示用户最新的版本内容，最重要的是要对比引导，旧版本怎么回事，新版本怎么回事，在这一块可供参考的有很多，如Adobe全家桶每年的大版本更新，Autodesk全家桶的大版本更新，游戏的大版本更新等等，他们甚至还会出一个专门的文档来描述新旧版本更新对比。
顾名思义就是引导用户完成某一套操作流程，就像LOL里，刚注册游戏时，系统会引导你完成一局游戏，告诉你该点击哪里进行匹配，点击哪里选英雄等等，这种引导通常是让用户在真实场景下边操作边引导，纸上得来终觉浅，须知此事要躬行嘛，身临其境的体验才是快速学习的王道，这种的引导非常适用于操作步骤繁琐的产品。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
视觉品牌这一概念，既陌生又熟悉。大部分ui设计师都或多或少做过视觉改版或者风格升级，先来看两个概念：视觉风格&视觉品牌。
▲视觉风格&视觉品牌重点偏向
风格是艺术概念，是在整体上呈现的有代表性的一种面貌。风格能反映时代、思想、审美等特性。也是设计师对审美独特鲜明的理解。那么视觉品牌呢？它除了要体现产品本身特性，融入产品希望传达的感受，也要思考什么对用户有意义。研究视觉品牌，就是探索如何通过设计维护用户对于产品的好感度 ，通过有共鸣的设计传递正能量，让产品获得最大的认同。简单来说：视觉风格重点是设计师对审美的传达；视觉品牌则是通过挖掘产品有价值的特点，创造有共鸣的视觉去打动用户，助力产品。
▲视觉品牌作用
了解完视觉品牌的概念，我们简单聊下它的作用。视觉品牌最大作用是建立用户和产品的关系。vivo互联网单个产品的视觉品牌也受vivo母品牌影响，不同业务被渗透的程度不同。比如vivo品牌对vivo官网，vivo商城影响比较大，但是对浏览器，i视频，短视频的影响就比较小。
那么，如何定义好产品的视觉品牌？借企业文化里的一句话：做正确的事，并把事情做正确。在设计工作中，这句话也有一定的指导意义，我们先要确定是否要做视觉品牌，再用合理的流程规划好每一步。
结合过往的业务经验来看，对于已有视觉风格的产品来说，需要满足以下两个情况之一才是最适合做视觉品牌工作的时候：1、产品转型、重大业务调整（包括用户人群、需求变化等）；2、与相关行业设计语言水准差距巨大。另外需要考虑的还有时间安排，由于整个流程耗时需要大约12周（3个月），所以设计师前期就要做好时间规划。
确定要做视觉品牌工作后，需要准备哪些资料？项目环节和流程如何？让我们来看下这12周需要做的事情和基本顺序：
▲视觉品牌的流程
我们接下来会重点介绍流程中关键的8个步骤（图标标蓝色的step1～8）：1、品牌定位资料熟悉 2、明确视觉品牌关键词 3、关键词发散和可视化 4、提取元素建立视觉符号 5、完善主要页面 6、验证视觉风格喜好 7、完成所有页面的视觉效果 8、整理成视觉品牌规范手册。
大部分项目的产品，运营和用研角色会提前做一些品牌定位的工作（品牌屋），品牌屋有助于我们对产品各方面进行解读。这类资料一般我们都可以获得，设计师可以从中了解到目前我们产品全面信息，包括：产品形象、调性、核心价值观等。我们需要的关键信息：产品关键词就可以从中找到。如果品牌屋资料不够明确或者设计师对确定的词汇抱有疑问，我们还可以通过工作坊形式，邀请项目核心成员进行脑暴会议，讨论出合适的词语。
▲案例：vivo浏览器品牌屋
图中为浏览器品牌屋资料案例，经过项目成员讨论，浏览器产品最终关键词：智慧、有趣、默契、可靠、年轻。
然后，从产品关键词里，我们需要选出符合产品定位又能达到受众心理预期的视觉品牌关键词，聚焦产品的视觉调性。视觉关键词一般有2～5个，需要视觉专业团队、项目相关人员、核心用户一起来挑选，用户的选择可以放在问卷里进行，通过快速测试了解用户对产品的视觉感受和期待。如果确定的视觉品牌关键词比较多，可以适当确立1～2个核心视觉词汇，便于聚焦后期的风格指导。
▲明确视觉品牌关键词
选择标准有两条：1、延展性高，有一定视觉可视化潜力：词汇要抽象化，不能过于具体，一般都是描述情绪，气氛，氛围或者感受之类的。2、贴合公司品牌文化：追求乐趣、充满活力、专业音质、极致影像、愉悦体验、敢于追求极致、持续创造惊喜。
视觉品牌关键词选定后，在绘制可视化的情绪版之前，还差一步，就是针对选出来的词进行发散。做这一步的目的是希望设计师的思维能够尽可能打开，收获更大范围的灵感和思考。我们通过三层映射方式，分别对2~5个视觉品牌关键词进行发散收获大量衍生词。（图中以词语“友好”为案例，分别进行物化、心境、视觉映射出大量衍生词语。）
▲三层映射案例：词语友好
在大量衍生词里，我们还要经过一轮讨论筛选，去掉不合适的词语。主要看衍生词和我们的视觉关键词的关联度是否足够高，以及是否适合用视觉语言表达等。
如果项目没有做品牌相关的工作，没有产品关键词，那我们前3步骤怎么办？遇到这种情况，我们要怎么深入下去？当然，你可以尝试推进项目去做一下品牌屋，这对各个角色在产品认知上有很大的帮助。其实还有一个工具方法能够帮助我们较好的完成各类关键词提取。(Design O to O 主要是察觉用户情感化的一个工具，工具里得出该类别情感相关词汇和我们想要得出的视觉品牌关键词概念非常接近，所以推荐作为遇到这类情况的解决方法。)
▲Design OtoO方法
这套工具方法的核心步骤分别是：收集，组织，反应，评估。每一步都有一些工具模型可以套用，能够较准的帮助大家达到目标，找出合适的关键词。
前面我们得出筛选后的衍生词，是为了之后可以做出更全面、精准的可视化情绪版。很多设计师在情绪版制作上比较随意，这里也给大家一些我们团队常用来搭建情绪版的方式。一般我们将收集的图片依照3个维度（人物、场景、物体）进行归纳整理，这样共性的东西更容易被发现。当然，拼贴整理的方式很多种，也包括常见的任意拼贴、参考式拼贴和精致化拼贴。大家可以多试一些平时不怎么用的维度进行拼接，也许会带来不一样的灵感。
▲情绪板拼贴常用方法
每个情绪版带来的设计灵感都不相同，所以最终会有多个视觉符号方案。第四个step就是来解说如何从单个的情绪版里提取视觉符号的特征。
▲组成视觉语言最基本的五个维度
“形色字构质”是组成视觉语言最基本的五个维度，当你描绘一个东西的样子时，你通常会从这五个维度去阐述。所以，我们也从5个维度来提取视觉符号的特征。需要注意：五个维度不一定需要全部进行提炼，有时候遇到前期已经确定的就可以直接拿来用，也有的不涉及的，比如字体可能在部分图标里没有出现也就不需要提炼。让我们来对色彩、图形、字体、质感、构成这5个维度来细细展开：
▲快捷工具Dopelycolor对图片进行色彩分析
色彩提取常规是可以从情绪版里找出的，最简单的办法就是找出占比高的色彩并判断选择。这里分享一个快捷工具Dopelycolor ，能快速让你提取图片中颜色，以及占比，让你清晰的了解图片用色情况。
▲提炼色彩需要重要关注4点
需要注意的有以下几点：1、已有的品牌色是否要延续使用 2、选中颜色需要后期调整三元素，达到最好的视觉效果 3、如果有辅色，主辅色多结合色环考虑合理性 4、你选的颜色是不是和市面竞品太过雷同，是否要做点差异化？
对于我们大多数产品目前现状，符号基础图形是不宜变动的。大环境也是如此，例如很大一部分视频类应用图标都围绕播放三角展开。因为变化会引起用户新的理解，可能会带来识别和理解的成本，所以项目设计师在方案的设计阶段，会多做几个保守的常用图形相关方案。
另外，在没有基础图形的产品品牌中，通常需要通过脑暴会去讨论出适合产品的符号基础形态。例如vivo积分商城在视觉品牌探索阶段，组织脑暴会议，邀请项目中各个关键角色一起来发散讨论适合积分产品的货币符号图形（这也是积分定义的视觉品牌符号）
▲vivo积分商城货币符号发散脑暴会现场
基础图形获取方法介绍完了后，图形的艺术表达，也就是图形设计是需要我们通过情绪版或者常用创意手法来捕捉的。通过情绪版，我们可以提取出零碎的一些特征，这些通过观察就可以提取了。比如下面这张情绪版图上能得出的共性图形特征有：描边图形、线面结合等。另一张能看出的有：大圆角、简单几何、Q型。
▲情绪板图片提取共性特征
特征好提取，但是如何去用于输出我们的视觉品牌符号，这块就依赖各位设计师的设计表达了。到这一步，建议参与的设计师们进行视觉比稿。比稿的设计师们可以看一看常用的6种创意设计手法，这些创意手法都是较常见的，在设计中协助我们创意的迸发。
▲6种常见图形创意手法
严格意义上，符号里的文字也是图形的一种。不过，针对用文字来做的符号，可以参考字体创意设计的10个方法。这里不一一阐释含义了，大家可以在网上找到更多每一类图形的案例和应用解说。
▲10种常见字体创意设计方法
如果要进行质感的提炼和确定，除了从情绪版里能够找到一些共性的东西以外，也可以多在流行趋势、设计网站材质图形相关专题里，去尝试获取思路。在设计方案阶段，可以多去尝试不同的设计质感。
▲质感素材专题
构成通常会用在版式，招贴之类的平面设计中。很多产品标志在构成上都很讲究，图标的内容和留白比例搭配合理，具备设计舒适感。我们在做符号设计时候，同样要非常关注构成，好的构成会让我们的符号更具魅力。常用的图形构成有9种，我们在做图形时候可以多去尝试，也可以叠加尝试，找到适合的构成样式。
▲9大图形构成
回到视觉符号提炼的5大维度方法，我们来看下vivo浏览器是如何提炼视觉品牌符号的。由于不同设计师整理的情绪版，方案都不一样，接下来来看浏览器视觉品牌探索众多方案其中的一个例子。
▲视觉符号提炼的5大维度
首先来看下浏览器目前一些背景设定，去除既定的情况，我们需要在这几个方面找寻特征（辅色、图形艺术、质感、构成），来完成我们的视觉符号。
▲vivo浏览器背景设定
在这个方案中，设计师从情绪版提取了想要的特征（图片中蓝色文字）：
颜色：从情绪版提出占比较高的颜色，归纳成色组，在色环中逐一讨论去留，去除对比强烈的黄色（因为浏览器作为工具类产品并不想传达出刺激，冲突，过于活力的感受，故去除。）在邻近色（青色、皮粉色）里考虑避开性别因素，青色更加适合。然后调整一下rgb，饱和度提高一些。
图形艺术：延续地球元素，情绪版提炼的：大圆角、简单几何、Q型，描边图形，线面结合。
质感：浏览器在先前资料收集的时候就有倾向，考虑近两年手机背面AG磨砂玻璃广泛使用，界面上苹果和微软也整体设计转向毛玻璃风格，关于这类品质感和空间感明显的处理方式，浏览器设计师也想进行尝试。
构成：结合情绪版和图形构成9个方法，提取并运用的主要特征是动势，也是想赋予符号活力感受。
最后，经过草稿比稿，评审通过的方案和确定的符号5个特征如下：
▲vivo浏览器符号的5个特征
视觉品牌符号完成以后，接下来需要继续绘制与符号强关联的页面。这些模块有：loading、缺省、核心页面、插画插图场景。不是把视觉品牌符号简单的原封不动放在各个页面里，而是通过一些设计手法将它更好的融入在页面中。
通常，核心页面模块的视觉呈现，都是基于已定的视觉品牌符号特征去发散。目前我们团队有两种不同的思路：一个是从先前符号里提取主要某个特征并结合场景做出版式布局的延展。类似我们做vi时候常用取logo的一部分进行图形组合再创意。另一个是将已定符号的不同特征进行多个组合，创作出符合这些特征的衍生的新视觉。
浏览器用的第二种方法，提取出的符号特征和定好绘制要求，其中为了保持整体风格的一致性，需要绘制的模块特征应不少于一半目前特征（满足1/2)，如果有新增的特征需要保持和谐，不应该有其它明显的风格倾向。这个也是用来检查你做的系列衍生效果是否整体的标准。经常有同学做了一个很好看的缺省图，但是风格特征与已定视觉符号风格相差甚远，最后导致不能使用。
下面是vivo浏览器视觉品牌符号延展的图形或页面样式：
▲缺省图样式（6/8特征）
▲装饰icon图样式（4/8特征）
▲特殊弹出层样式（4/8特征）
▲视频操作引导样式（4/8特征）
▲应用在整体页面效果
看完浏览器的符号延展方法，再来感受下另一个方法：通过符号，延展多个版式视觉的案例——短视频视觉品牌探索。项目设计师主要对视觉品牌符号图形特征做了延展，局部提炼并创新版式。
下图是短视频视觉品牌符号，基于此为基础型，设计师根据总结的6种手法，用对称、平移 等方式进行拓展，结合页面实际情况完成。
▲短视频品牌符号以及图形应用解说
▲短视频品牌符号页面背景应用
▲ 物料拓展概念
完成主要页面后，我们会进行风格测试，用来验证不同的设计方案在用户眼里的喜好程度，从而修正设计师的认知偏差。我们建议至少完成3个视觉品牌符号方案和对应3套页面来供用户测试。
关于风格测试，是将已有的方案通过问卷和简单的线下访谈，得出用户的喜好结论。因为是敏捷测试，只需要一周就可以出结论。在这一步，有5条测试重点和对应解读需要设计师关注，具体内容参考下图：
▲5条测试重点与解读
目前vivo浏览器和i视频都在视觉品牌升级时候，运用了这个较为敏捷的测试方法。
▲i视频视觉品牌3套方案风格测试复盘
▲vivo浏览器视觉品牌升级核心页面风格测试
经过用户的验证和后期修改，我们确定好了唯一的一套最合适的视觉品牌。在设计组内部评审+项目组核心成员评审效果通过后，接下来工作就是按部就班的去完成后续页面的规划和落地。这一环节的工作体量较大，需要花时间去梳理替换所有页面。整体t替换预计耗时需要2周左右，建议多些成员参与完成。
最后一步也是最重要的一步，需要把视觉品牌的设计指导和规范进行沉淀。视觉品牌规范手册是需要项目组设计师一起维护的。好的设计语言是第一步，维护和让其发挥最大价值（原则、一致性、效率）是视觉品牌规范手册的意义。
▲视觉品牌规范手册4大模块
目前我们已经梳理出vivo浏览器、短视频的视觉品牌规范手册。内容包括4个部分：品牌概述、品牌符号、视觉语言、物料规范。对产品的视觉品牌理解和如何应用会完整的体现在手册里，建议每一个参与项目设计师都应该在设计前先整体看一遍。
视觉品牌的定义流程以及方法，是我们团队资深ui设计师第三季度重点研究和探索的产物。希望能给正在做视觉品牌相关工作的设计师带来一些帮助和启发，如果有建议或者疑问，欢迎通过VMIC UED公众号和我们交流，让我们一起优化好这个视觉品牌定义体系，为用户创造更好的视觉体验。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
动态能激发用户的情绪，为静态的视觉设计注入活力与生命力。有趣、奇妙、吸引人的动态，能让你的产品展现与众不同的魅力。另一方面，动态有助于支持可用性，通过自然流畅的物理运动，突显元素在过渡时的关联性与状态变化，增强用户对产品功能的感知。
因此，动态设计必须是有意义的，同时兼具可用性与美感，UX 行业也将动态设计视为多学科的交集，细分成一个专业的设计门类。作为 UI 和 UX 设计中重要的组成部分，动态设计从三个层面发挥影响力：
提高连贯性（Increase Continuity）
让界面元素在用户流程中顺畅地转变与过渡，将用户操作导向期望的任务结果。
连接场景（Connect Scenes）
在转换场景的过程中扮演润滑剂的角色，阐明场景之间的位置、层级与空间的关系。
视觉吸引（Visually Appealing）
聚焦用户视线，将其注意力放在重要的事情上，从而起到信息传达、提升识别度的作用。
植基于 UI 和 UX 设计而发展的第三维度，动态设计的趋势自然与两者密不可分。综观近年，多数作品巧妙地运用绚丽的动态图像（Motion Graphics）与动效设计，让新的视觉手法得以表现更为出彩。再者，随着移动端芯片性能提升，跳脱二维平面的表现形式不再难以实现，让设计师能够解开束缚，发挥无限的想像空间。2021 年的动态设计可归纳为三个趋势：
增强表达（Enhance Expression）
运用引人注目的表现手法将信息传递给用户，包括变形、动态文字和背景动画。
创造层次（Create Hierarchy）
在视觉平面中创建空间层次结构，遮罩与视差是常用的表现手法。
扩展维度（Expand Dimensions）
突破二维限制，将界面元素多维化营造空间感，例如 3D 动态图形和摄像机运动。
变形创造了一种连续的叙事状态，告知用户元素的状态或作用发生变化，是一种最引人注目的表现手法，能将形状、图像、色彩无缝地融合与过渡。
动画插图 Animated Illustrations
2021 年看到许多有趣、吸引人的插图，而更多的设计师开始为静态图像添加动态，也让 GIF 和动画插图越来越受欢迎。
动画插图看起来更生动，并带有叙事性质。在示例中，运用动画插图来呈现这杯果汁是由哪些水果打成，比起文字描述更能吸引观众的注意力。
by Lobster
通过动画插图来呈现同一系列的转变，有利于延续外形上的特征，让不同的物体具有连结性。比如从桌子、衣柜到灯具的连续变化，同样风格的系列家具利用动画来体现一致性。
by Graceful illustrations ™
流体动态 Liquid Motion
动态的有机形状，包括流体、烟雾和火焰等粒子效果，能够极大地增强视觉效果。流体动态并非明确的过渡与场景转换，而是颜色在流动的液体中扩散，进而创造出抽象或真实的视觉形状。这种风格能实现无缝过渡，并为设计增添有机感，也是 2021 年最引人注目的动画趋势之一。
运用流体动态来展现抽象的有机体，除了轻易地攫取受众目光，还让人不自觉地伫足在画面上，感受流体变化的韵律与美感。这类动态设计可作为烘托主题的背景动画，或是吸引目光焦点的主角。
by ✞anton mishin✞
流体动态运用到网站设计所营造的视觉冲击力更为惊艳，能为用户带来独特、新鲜的视觉感受， 使得流体动态深受风格前卫的设计师喜爱。网站还能利用鼠标悬停与流体进行互动，因此会在许多特效网站见到流体动态的踪迹。
by Gilles Tossoukpé
动态渐变 Dynamic Gradients
扁平化设计缺少现实质感的元素，搭配渐变色能有效缓解不足，为设计创造深度与层次。变化中的渐变色同时带有动感与舒缓，充满活力却又平静。使用动态渐变能让设计师展示一系列不断变化的情绪，许多内容创作者和品牌已经注意到这一点，开始在广告活动、识别设计和数字内容使用动态渐变。
by Pixelz Studio
微交互 Micro Interactions
在用户体验设计中微交互变得日益重要，而动态设计正是微交互的灵魂所在，即使只是微小的视觉提示或反馈，都是人机交互易于使用的关键。从经典案例来看，微交互的动画细节必须带有明确的目的性，让用户获得实时反馈，指导用户进行下一步。从近几年的设计趋势来看，微交互已成为不可或缺的存在。
by Илья Бабушкин
by Google
动画商标 Animated Logos
过去几年动画商标是最流行的动画趋势之一，通过各种视觉效果，设计师能创造出不同类型的动画商标，许多企业开始采用动画商标作为吸引注意力的手段。多数情况下，商标是进入网站时最先看到的东西，因此商标应该令人难忘、引人入胜，并使用符号或排版来揭示品牌个性。结合动画的优势，设计师可以运用一些动态或效果来讲述简短的故事以强调品牌特征，并为静态排版和商标注入一股活力。
by Yulia K.
by Meta
动态文字是使用移动文本来吸引注意力的动画技术，许多卓越的品牌在网页设计中使用动态文字，为网站外观增添动感和视觉冲击力，是近年 UI 动画的趋势之一。
设计师使用动态文字为单词或句子添加生动的元素，借此定下情绪氛围与设计基调，吸引用户的注意力。几种常见的表现手法，挤压和拉伸一个词能会唤起一种俏皮感，而连续重复这个词则具有催眠感和前卫感。另外，使用大号和粗体字体来增强份量以强调某些信息，也是动态文字的特征之一。
无论在电商网站、电视广告或音乐视频，动态文字都占有举足轻重的地位，有利于加深用户对品牌的关注与印象。
by HOLOGRAPHIK®
by Hrvoje Grubisic
通过背景动画来强化叙事，成为许多行业常用的品牌传播手段。你可以创建动态的品牌故事，展示有趣的制造过程、产品的使用场景。背景动画深获大众喜爱，它能让用户在进入登录页或网站首页时，轻易地了解更多有关公司或产品的信息。调研显示，从银行、医疗保健公司、电商零售商、餐馆到 B2B 供应商，这些跨越不同细分市场和行业的网站都开始使用背景动画。
by Carlo Soleri
by Kirill Zhukovsky
遮罩过渡是将几何或有机形状作为衔接下个场景的遮挡物，等同于舞台幕布设计，能在界面元素进场或退场时创造连续性效果。这种表现手法简洁高效，是最常见的过渡动画之一。
切换场景 Scene-Switching
其中一种遮罩过渡，是将当前场景完全置换，如同揭开蒙在上层的布，逐渐展露叠在下方的景，并利用景物相似性和动作延续性，让两个场景能够顺畅地衔接，不致于差异过大，造成用户心理负担。
by intent
by Minh Pham ✪
状态变换 State Transformation
另一种遮罩的表现形式，较无明显的场景过渡，而是利用遮罩来表现景物的状态变化，界面元素和布局基本保持一致，以此塑造无缝过渡的视觉效果，这种手法被广泛地使用，例如气候变化、人物换装、产品组合等。
by Daniel Tan
by Outcrowd
视差是利用不同的界面元素以不同的速率移动，创造前后景深的分离效果，借此在平面中塑造空间层次，已成为网站首页最为普遍的表现形式。
视差之所以能形成一股风潮，广为各个行业所接受，一方面是信息层级更加清晰，明确定义各种元素的关系，让用户专注于主要操作和内容，将背景或非交互元素往后退，同时保持设计的完整性。另一方面是丰富的层次变化，当用户滚动或滑动时，能在扁平化界面拉开空间关系，利用不同的速率和纵深，塑造多层次的感官体验。
by Studio VØR
by Studio VØR
近年来，结合 3D 动态图形的界面设计呈现爆炸式增长，虽然创建 3D 动画需要更多的时间、技巧与协作，但不可否认的，3D 动画比 2D 图形更加逼真，从而提供更具吸引力和互动性的用户体验，并有效地展示品牌的活力。
更生动的表情 Lively Emoji
动画的吸引力在于能够创建各种角色，并为无生命物体注入生命力，表情符号就是一个很好的例子。作为独特的网络语言，表情符号生动地描摹日常面对面交流的非言语信息，随着图形界面的设计趋势逐渐结合 2D 与 3D，运用 3D 动态图形来创造更加动感、拟人化的表情，能让这些非言语信息更加丰富，有机会引领下一波风潮。
by Outcrowd
营造空间感 Spatial Awareness
3D 动态图形为平面设计建构了空间叙事框架，在扁平化界面中展现立体感，从而表达空间中元素的位置与层级关系。多维化的发展趋势，推动了视觉表达形式的演变，空间感让界面设计更符合人类的认知逻辑，运用各种 3D 运动特效，包括旋转、翻转、折叠、透视、Z 轴位移等，打造令人难忘的感官冲击。
by UI8
by Bruno Ortolland
拟人动画 Anthropomorphic Animations
拟人化能让物体、植物、动物等非人类事物，表现出人类属性的行为与状态。动画片运用拟人的手法是最普遍的，1927 年迪士尼第一部系列动画《幸运兔子奥斯华》的主角便是拟人的兔子形象。由于人们容易被以人类行事的事物所吸引，越来越多设计师在界面中添加拟人元素，利用这种效果让画面更加生动有趣，增强用户体验的愉悦感。
by Gregory Riaguzov
在动态设计中，摄像机运动是最自由、灵活的一种表现形式，能让画面过渡更有张力，突破 2D 平面在视角上的限制，创造一个无界线的立体空间。常见于影视、动画和广告的摄像机运动，包括推近、拉出、平移、跟拍等方式，备受动态设计师青睐，让用户以多变的视野探索数字产品。
推近/拉出 Dolly In/Dolly Out
推镜头是指被拍摄的对象不动，摄像机由远而近，朝着对象不断推进， 用来突出人或物的主体。镜头推近的运动方式，用来呈现从整体到局部、由分散到集中的变化，引领用户进入故事情景，给人一种身临其境的感受。
相反地，拉镜头则是将摄像机后退，使画面逐渐远离被摄主体，侧重的是从局部到整体、由点到面的转变，强调主体所处的空间环境。随镜拉出的景象，能激起人们无限的想像。
by Michael Crawford
by Ali Zafar Iqbal
水平/垂直移动 Truck/Pedestal
水平向左或向右，垂直向上或向下移动摄像机，使画面不断变化，让用户跟随镜头视角一起移动，产生一种置身其中的感觉。这种运镜方式，通常用于具体的场景，利用角色或景物的延续性来消除场景过渡时的边界，表现出一种流动感，无论是手势滑动或鼠标滚动都能有顺畅的操作体验。
by Netguru
by Minh Pham
结合多种运镜 Multiple Camera Movements
运用多种摄像机运动相当普遍，既能扩大视野，又有很强的空间感，可以更加自由与多样地展示不同视角和情景。比方说结合横摇（Pan）、直搖（Tilt）和跟随（Tracking）镜头，连续而详尽地展示一个产品，由于画面始终跟随一个主体，有利于突出产品特征，并让用户从不同的角度和距离观看产品，是一种增强临场感和参与感的有效方法。
by Sang Nguyen
by Paul Ilnitski
一镜到底 One Shot
在电影中为了不将观众的情感和注意力割裂，使用一个镜头来完成全片的场景刻画和叙事，这种拍摄手法被称作一镜到底或长镜头。连续镜头逐渐被运用到界面过渡，以此增强操作过程的流畅性，例如一气呵成的购物体验，或是贯穿全场的人物角色，其特点是给用户最沉浸的感官体验，无间断地体验整个流程。
by Orizon: UI/UX Design Agency
by Minh Pham ✪
动态设计作为近年热门的创作形式，广泛应用到各个领域，逐渐成为设计的主流趋势。受益于技术演进与发展，从创意生产到落地实现，动态设计的门槛不再遥不可及。设计师得以将想法转化为生动、有趣的作品，并有机会创造新的表现手法，玩出许多新花样，成为 2021 年动态设计的特色。
本文归纳的设计趋势，有助于启发设计师对动态设计的想像，激发更多创作灵感，为静态界面赋予灵魂，打造令人难忘的视觉体验和品牌形象。
文章来源：优设 作者：腾讯ISUX
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
导航栏（Navigation Bar）作为一个基础控件，极高的复用率和看似单调的设计样式，往往会让人习惯性忽略其中隐藏的诸多细节，以及背后的设计原因。本篇文章主要探讨导航栏视觉和交互上的各种组合可能性和相关设计细节点，希望能提炼出一般性的设计规律。观点仅是个人粗浅的分析，如果有哪里说得不对的地方，希望大家多多指点。
导航栏是用来帮助用户定位、导航、操作的基础组件。既负责告知用户当前所在位置，防止迷失，又负责连通页面跳转路径，允许用户在不同层级的界面之间来去自如。同时还承载了针对当前页面全局性的操作。
简要概述导航栏的作用，有以下 6 个：
实际上，导航栏的布局方式非常丰富，除了上文提到的几种基础布局之外，还有许多复杂的布局方式。
不同的布局方式体现了不同页面的信息架构。
为了方便描述，我将导航栏可以放置信息的部分划分为左、中、右三个区域。
接下来，我将从「结构简单」到「结构复杂」的顺序来讨论导航栏的各种布局方式。
视觉服务于功能，不同视觉权重背后对应的是不同功能权重。以搜索功能为例，不同产品、不同场景下，搜索功能的权重都是不同的。对于电商产品来说，首页搜索是非常关键的流量入口，必须足够突出，减少用户的认知和操作负担，使用户更加顺畅高效地使用产品。而对于不同产品或不同场景来说，搜索的优先级就未必有这么高。
提升视觉权重的本质是将重要信息和次要信息「区分」开来，而建立区分的本质则是「建立对比」。
我们以“搜索”功能为例。
我们从以下几个方面来拆解导航栏：
首先，我们要了解，页面固有的层级结构决定了某些信息是常驻于屏幕的，另外的信息是随着用户竖直方向滑动手势而滚动的。而导航栏绝大多数情况下是常驻于页面顶部的。
尽管导航栏一般都是常驻于页面顶部，但仍有不同的情况要分类讨论：
首先要明确，哪些内容属于常驻内容。
上方这种情况比较明显，头部区域是常驻区域，但要注意并不包括四个主图标。
我们再来看下面的案例。
上述变化的本质是从「状态 a」过渡到「状态 b」。
状态 b 决定了常驻于屏幕的元素数量，这和内容层显示效率息息相关，需要在页面设计之初就考虑好。
确定好了「常驻区域」和「被折叠区域」之后的交互就比较简单，直接折叠相应内容即可。
使用这种「状态过渡」的思路，相当于明确了变化的起点和终点，之后就可以将精力投入在如何使两种状态之间的过渡更加自然。
当我们确定了「过渡变量」之后，我们只需要考虑如何安排变量如何入场（进入状态 b）。变量的出场（撤出状态 a）并不需要考虑，因为变量是跟随内容层一齐滚动的，自然会被上层的导航栏遮挡。
上方微信读书的案例用了硬切的方式，过渡变量直接出现在状态 b 中。通过观察 iOS14 的信息，我们不难发现，iOS 系统采用的标题栏过渡方式是渐现。本质上没有区别，细节上，渐现相对于硬切更加柔和丝滑。
以上是我个人对导航栏相关的一些整理和总结。
分别从功能作用、布局样式、如何突出重点、视觉细节、交互细节几个层面梳理了导航栏设计策略和设计思考。基础且复用率极高的控件蕴含了许多细节和门道，通过大量细致观察总结出一般性的规律，希望我的文章能帮助大家看到一些平时可能会忽略的细节。
文章来源：优设 作者：设计师doo
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com