通过以上的实际应用和案例分析，我们可以看到删格系统和响应式设计的结合在B端网页设计中的重要性和实用性。这种结合方式能够兼顾页面的整体结构和内容的自适应显示，为用户提供更加舒适、便捷的浏览体验。因此，设计师在实际项目中可以考虑充分融合这两种设计方法，以创造出更加出色的网页设计作品。
菲茨定律在App产品设计中强调了目标区域的大小和距离对用户操作的影响。通过增大重要按钮的大小、减少操作间距离、设计适合手势操作的界面以及提供清晰的反馈指引，可以优化用户体验，提高用户操作的准确性和效率。这个原理指导着设计师如何布局界面元素，使得用户更轻松、更快速地进行交互操作，进而提升产品的易用性和吸引力。
在互联网的广袤世界中，门户网站犹如一扇通往信息宝库的大门，其设计的优劣直接影响着用户的访问体验和网站的价值。那么，在设计门户网站时，究竟有哪些关键内容需要我们格外留意呢？
首先，用户体验至上是不变的原则。门户网站的布局应当简洁明了，易于导航。用户在进入网站的瞬间，就能迅速找到自己所需的信息分类和功能入口。页面的加载速度至关重要，过长的等待时间会让用户失去耐心。因此，优化图片、脚本和代码，确保网站能够快速响应，是提升用户体验的基础。
视觉设计的吸引力也不容忽视。色彩搭配要协调舒适，符合网站的主题和定位。字体大小、行距和对比度要便于阅读，避免造成视觉疲劳。同时，合理运用图片和视频等多媒体元素，能够增强页面的生动性和吸引力，但要注意不要过度使用，以免影响页面加载速度和分散用户注意力。
内容的组织和呈现是门户网站的核心。信息架构要清晰合理，分类明确，便于用户快速定位感兴趣的内容。重要的信息和热门内容要突出展示，采用醒目的标题和布局。而且，内容的质量和更新频率至关重要，只有提供有价值、新鲜的信息，才能吸引用户持续访问。
响应式设计是适应不同设备的关键。如今，用户通过各种终端访问网站，包括电脑、平板和手机等。门户网站必须能够自适应不同的屏幕尺寸和分辨率，提供一致且优质的用户体验，确保在任何设备上都能完美呈现。
安全性是必须坚守的底线。保护用户的隐私和数据安全是门户网站的责任。采用可靠的加密技术，防止数据泄露和恶意攻击，让用户能够放心地在网站上进行操作和交流。
搜索引擎优化（SEO）也是设计过程中需要考虑的重要因素。选择合适的关键词，优化页面标题、描述和内容结构，有助于提高网站在搜索引擎中的排名，增加网站的曝光度和流量。
此外，交互性设计能够增强用户的参与感。例如，提供用户评论、投票、分享等功能，促进用户之间的交流和互动，让网站不仅仅是信息的提供者，更是一个活跃的社区。
最后，测试和优化是不断完善门户网站的必要环节。在网站上线前，进行全面的功能测试、兼容性测试和用户体验测试，收集反馈意见，及时发现并解决问题。上线后，持续监测网站的性能和用户行为数据，根据分析结果进行优化和改进。
总之，门户网站设计是一个综合性的工程，需要综合考虑用户体验、视觉设计、内容管理、技术实现等多个方面。只有精心打造每一个细节，才能设计出一个功能强大、用户友好、具有吸引力的门户网站。
在数字化时代，PC端应用作为人们工作、学习、娱乐的重要工具，其界面UI设计直接关乎到用户的使用体验和满意度。一个优秀的PC端应用界面UI设计，不仅应当具备美观的视觉效果，更要注重功能布局、交互逻辑以及用户体验的全面提升。那么，如何进行PC端应用界面UI设计，以打造高效与美观并重的用户体验呢？以下是一些关键要点。
不同操作系统、不同浏览器下的默认字体是不同的，在网页项目中可以通过 CSS 的 font-family 和 @font-face 来让页面渲染出适合当前网页的字体。
相信很多设计师同学都接触过B端产品，对于很多设计师而言，遇上B端产品是一件令人又爱又恨的事情，爱是因为目前市场上大多数的公司主要经营的都是B端系统，B端系统相对于C端来说UI界面显得并没有那么的重要，所以设计师的责任也相对没有那么重，而恨是因为目前大多数B端系统页面都是由前端UI框架搭建的，前端同学很多时候直接套用组件即可，所以UI设计师对于整个系统来讲也显得可有可无，导致设计师话语权也特别的低，甚至有些做B端系统的公司压根不用UI设计师也能完成项目开发。
但是作为交互设计师(小公司一般是产品经理)在B端却特别吃香，并且拥有主要的话语权，因为我们主导这整个系统的基础逻辑与业务逻辑设计，所以无论是前端还是后端同学都需要根据我们的设计进行开发，最终完成整个系统。
因此，今天这篇文章并不是告诉大家有哪些前端UI框架或后台组件等..（相信这些大家也看得太多了，工作中都是套框架，能用得上的没几个），而是从交互上如何去看懂B端后台的基础逻辑以及以后自己晋升成产品经理或者交互设计师时，怎样去设计一个完整闭环的系统。
B端产品和C端不同，C端产品大多数都是针对个人用户，设计的关系结构相对来说比较简单，每一个用户拥有的权限都是一样的，例如微信、淘宝等，我能看到的页面你都能看得到，很少不存在权限差异问题。
而B端产品的用户一般都是企业，企业用户一般会管理着多个角色，也就是角色多元化（例如一些校园系统角色就分为：普通教师、级长、主任等角色），不同的角色对系统的需求和职能也不一样，我们需要根据角色的需求去划分不同的权限，让他们互不干扰但又满足他们的需求问题，因此B端产品的基础逻辑比C端产品相对复杂。
看完上面文字的同学可能蒙了，又角色又权限的，能不能说点人话？
行！其实很简单，B端系统无非三个逻辑（也是三个页面）：用户管理、角色管理以及菜单管理。（有些系统因为业务需求可能有部门管理，那么算上部门管理就四个）
为什么我把菜单放到最前面跟大家讲？是因为菜单管理比前面两个相对简单，而什么是菜单也特别好解释，大家可以直接认为系统左侧的页面列表就是菜单，系统中拥有多少个页面那么就有多少个菜单，你的菜单越多就以为着你的权限就越多。
菜单管理的作用就是用于管理员对整个系统页面的管理（管理最主要就是增删改查），而有一些公司为了减少开发工作量会直接不要菜单管理，有多少个页面都由代码直接写死，管理员不能通过页面进行人工配置，这样会导致以后扩展会非常麻烦，当然了，有一些系统的菜单几乎不改的话，代码写死也没问题。
在讲解用户之前我需要提前跟大家讲一下什么是权限，准确来讲应该是权限分为哪些？
在目前的后台系统中，权限一共分为三种权限，分别是菜单权限（也就是上面介绍的）、数据权限以及操作权限。
菜单权限决定了用户有没有这个页面，例如学校系统中，主任有看到所有教师的教学数据的界面，而教师却没有这个功能，那么在给主任新增账号的时候就应该把对应菜单赋予进去。看上去很复杂，其实具体操作就是新增的时候把对应的菜单勾选上就可以了。
数据权限则决定用户能不能看到对应的数据。还是学校系统的例子，初中部主任只能看到初中部所有教师的教学数据，而高中部主任也只能看到高中部教师的教学数据，不同用户能看到的数据也是不同的，所以在新增的时候需要给用户配置（一般配置就是勾选）好对应的数据权限。
但是这里有一个问题，配置数据权限时我们如果一个一个人去勾选配置的话会特别的麻烦，假如初中部主任只能看到初中部的老师，那么我在给他配置账号的时候需要一个一个的初中老师勾选上，张三、李四、王五..等等，如果人多的话可能需要勾选成百上千次，用户体验就会变得特别差，因此现在的系统在配置数据权限时都是以部门为单位进行配置，也就是说，直接选择部门就代表着拥有整个部门的数据权限。
最后操作权限即决定了用户有没有对数据进行操作（一般是增删改查）的功能。还是上面的例子，初中部主任拥有查看教师的页面以及数据，那么他能不能对教师们的数据进行增删改查或者导入导出呢？这就取决于操作权限的配置了。目前很多的后台系统在配置菜单权限的时候同时需要把操作权限进行配置（因为只能先有页面才能进行操作），操作权限一般就是增加、删除、修改以及查询，当然如果页面还有导入导出或者其他功能，这些也需要在操作权限中进行配置。
用户其实也很容易理解，B端系统的用户其实就是需要登录进系统的账号，所以有一些系统的用户管理也叫账号管理。
因此用户管理的作用就是对登录进系统的账号进行增删改查等，当我们需要对别人提供一个账号时，我们就新增一个用户的账号密码给他们，直到他们用完了再把他们的账号进行删除。
那么问题来了，上面我们说到，不同的用户可能有不同的需求问题，那么就意味着我们每一个用户给要他们分配不同的菜单去做他们的事情。
例如在学校系统中：普通教师只负责自己班级学生的成绩录入，所以普通教师只有班级成绩录入的菜单，但是学校主任却不一样，他不仅仅能看到各班学生成绩，还能根据各班成绩进行对比分析，年级学生排名等等..
因此在刚开始的传统权限系统中，我们会直接把相应的菜单权限、数据权限、操作权限赋予给用户，每新增一个用户我们就选择好所有的权限都勾选上赋予给用户，最后提供给用户进行操作。
然而这种操作方式有一个弊端，就是如果每新增一个用户，系统管理员就需要重复进行勾选相同的权限，那么就会耗费大量的精力（一个用户要配置的权限特别多，如果用这个方式操作的话新增一个用户可能就需要花费很长时间）。因此，为了解决这个问题，我们在用户与权限之间建立了角色管理。
系统中角色的定义其实跟生活中是一样的，我们把固定的权限集合到一起从而形成了角色。例如，生活中UI角色就负责页面的视觉设计，而交互设计师则负责了产品的逻辑或者用户体验设计，这些角色拥有的权限一般很少变化，也几乎不会进行删除或者修改，就好像UI设计师或者交互设计师这些角色不会一时半刻就被完全消灭一样。
有了角色，我们可以先把对应的权限集合赋予给角色，然后新增用户时，再选择用户对应的角色即可。
这样做的好处是什么呢？好处就是当我们新增用户的时候，如果是相同角色的用户，我们不再需要重复去大量勾选相应的权限了，只需选择好该用户是那个角色就可以间接对用户赋予权限，并且后续要对用户进行权限的修改也十分便捷。因此，在现在的后台系统中，大多数都是采用权限赋予角色，然后新增用户时再选择用户对应的角色的方式。
如果看完上面的知识点还有点懵的话也没关系，这部分给大家展示在后台系统中菜单管理、角色管理与用户管理的实际应用是怎样的。
第一步先查看菜单管理有哪些内容，一般情况下，一个成熟系统的菜单页面几乎是已经固定不变的，那么也就是说菜单管理列表中所拥有的菜单都不需要怎么操作，列表中有多少数据就代表着系统总体有多少菜单。
第二步进行角色管理，如果是成熟系统的话，角色管理的角色也早已经分配好了，我们并不需要过多的进行操作，但如果是刚研发完成的系统，那么我们就需要根据现实的用户需求进行角色的设置，具体添加角色的主要参数包括角色名称、菜单权限、数据权限以及操作权限（其实也就是上文介绍的三种权限），其他的参数都是根据自身业务进行添加。
最后一步就是用户管理，配置好角色后，我们就可以根据需求进行用户的新增操作，例如现在我们需要新增一个账号进行登录系统，那么在用户管理页面中点击新增按钮，随后填写用户名称与密码，最后选择用户角色，点击确定按钮即可完成（因此，新增用户的三个必要参数是用户名、密码以及角色，有部门的需要填写所属部门，其他参数根据系统业务进行添加）。添加完成后你们可以试一试使用自己所填写的用户名密码登录后台系统，随后体验一下作为其他角色是否能完成自身需要的业务。
用户管理、角色管理以及菜单管理是B端系统最基础的逻辑，也是同学们将来需要转岗B端交互设计师或者产品设计师所必须掌握的知识，上面所介绍的仅仅是RBAC模型中最简单的一种，现实设计中可能出现各种情况，因此关于这次的B端产品设计我想给大家几点Tips：
1、在现实开发中，后台系统并不一定像我上面所说的那么完善，有些系统并不需要菜单管理，老板要求直接代码写死就好了，又或者有些系统就只有一个角色，那么角色管理也不需要了，这些情况都是有可能发生的，所有我们做设计的时候除了运用自己的知识以外，更多的是工作经验，知识是死的，人是活的，永远别忘了设计的本质是解决用户需求问题。
2、很多时候后台的逻辑管理会比我上面说的要复杂的多，例如一个用户可以拥有多个角色吗？不同角色能不能有相同的权限？如果有角色被删除了，那么该角色关联的所有用户应该怎么处理？可能你认为这些并不是自己目前需要考虑的问题，但是除非你以后并不想晋升到更高的位置，不然这些问题以后肯定会遇到的。
3、上面介绍的管理操作都是基于超级管理员账号（admin）进行操作的，如果你拿一个普通账号的话一般是没有对应的菜单权限，我担心有同学看完文章后马上登录自己的后台系统进行操作，接着登录进去找了半天都没有找到对应的菜单在哪里。
好了，最后希望文章能让大家有所收获，如果大家有不明白或者其他想法的话，欢迎大家一起探讨，共勉。
文章来源：优设网 作者：北沐而川
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
可视化图表是提升信息传递效率的一种有效方法，特别是在B端平台中经常遇到对统计的数据分析总结的呈现。我们设计师在设计图表的过程中，如果没有系统的可视化知识，会出现设计的图表虽然美观但图表不能很好的反应数据的情况。那么，在复杂的数据关系中如何设计和选用图表，如何在好看的同时提升信息传达效率，看完这篇文章希望对你的设计过程有所帮助。
// 为什么要数据可视化
数据可视化就是用图表来表示数据信息，它所传达的信息包括你所拿到的数据源和你分析后的结果，再通过图形强化用户的理解和记忆。能让用户简洁明了的获取更多的信息，是我们可视化的最终目的。
举个例子，同样一组数据，用表格的形式呈现是很难有所洞察的；如果将各个地区维度的数据聚合以柱图形式呈现，很容易就能看出各个地区间数据的差异，并从中洞察规律
关于如何设计好数据可视化图表，这边总结了三个步骤：选择适合的图表，强化视觉层次，图表响应式适配。
一、选择适合的图表
数据可视化的图表种类繁多，当我们真的开始作图，往往会遇到一个困境：有这么多类型，要如何选择正确的图表呢？首要依据是考虑所要传达的信息意图，即所要制作的图表它的任务是什么，再通过分析数据关系来选择表达方式；第二层意图是图表传达内容，这时候我们就需要根据数据的特征去突出和强化。
1. 分析数据关系
根据数据分析的方式来看，每一种图表都对应了一种数据关系。从数据的维度出发弄清呈现结构，再结合数据关系作出选择。了解图表的可能知道，一般图表的数据关系有构成、比较、分布，以商业数据为例，常见的还有流转关系。
构成关系
构成关系的图表表达的是部分和整体的关系，用于分析总体和各部分的占比比例，构成关系一般局部元素加起来为总数。如果只是想对比个别组成部分的大小，也可以使用比较关系的图表。
常用图表：饼/环图、堆叠图、面积图等，如涉及到层级结构，还会用矩形树图或旭日图等特殊结构图表。
关键词：“占比、比例、百分比”
比较关系
比较关系是基础分析中常用的一种图表类型。在一定的取值范围内，通过对两个或两个以上的指标分析，可以直观的看到变化和差距。对比分析包括趋势对比和分类对比两种形式，趋势对比用于表示一段时间内数据的变化，分类对比用于比较数据规模。
常用图表：趋势对比常用图表有折线图、散点图等；分类对比常用条形图、柱状图、气泡图等。
关键词：“增减、升降、涨跌、波动”
分布关系
利用空间分区来展示数据之间的分布关系，常用于体现两个或以上数据的相关性。
常用图表：散点图、热力图、雷达图等
关键词：“随着……而变化、A/B之间的相关性、交/并集”等
关联与流转
流转关系是B端数据常用的一种关系，它可以动态的体现相关路径下对象之间的关系、状态、数据量的流转变化等，以面积或颜色深浅展示了多个状态或对象之间的流动量或流动强度。
常用图表：关系图、桑基图、漏斗图、进度图等
关键词：“流程步骤、留存、转化、关系”
2. 分析数据特征
按数据关系和分析目的选择好图表类型后，第二步是根据数据特征选择更加适合的展示方式。从数据分析的角度常见数据特征有：变量特征、维度特征、层级特征、流程特征。
变量特征
分辨一个指标通常有两类特征，按变量值是否连续可分为连续数据与离散数据两种。连续数据通常会统计一组数据的变化趋势，离散数据通常统计各分类下数量的变化。
维度特征
多维度分析需要将多个变量在同一平面上直观的表示，可以选择使用极坐标系去展示多个维度变量。如果希望对比多组数据，可使用不同颜色进行分类
层级特征
多层级数据由多个部分构成一个整体，又称树形结构数据。除了用结构树图表表现以外，还可以考虑以下两种图表类型：
例如：上图显示了市场销售额的来源结构。长方形的大小取决于各国家的平均销售额，通过色调来区分不同类型，颜色的深浅代表分类下的子集，面积体现销售占比。对比一般结构树图表，它的优势在于可以有效利用空间。
流程特征
流转关系是表达数据转化流程的重要类型，不仅包含统计意义上的数据总和，同时还表达了信息流转的路径；其中桑基图和漏斗图都可以表达路径中流量的变化，不同的是桑基图重点强调流量的强度和走向，漏斗图更加注重突出转化率和效果，根据不同的表达目的选用。
二、强化视觉层次
选择合适的图表后，在信息传达上也需要正确的表达，展示形式美观的同时能够清晰的体现数据特点。
1. 强化数据特性
使用图表正确的表达信息，需要设计师在强化数据特性的同时避免偏差
2. 色彩视觉传达
除了在设计构图上优化以外，颜色的选择也是图表重要的的信息表达元素。颜色会影响我们对数据的感知，错误的取色会让信息读取产生误解。我们可以通过不同的分析目的设置意图色板，精确传达信息同时后续的项目在选用时也可以达到用色的统一。
我们在之前的文章里有介绍过图表的取色模型，通过调整颜色HSL值的区间，可以得到以下三种意图色板：
那么我们要怎么样去使用这些色板呢？下面几个案例将带你了解其中的差异。
定性型：使用色调来进行分类
数据内在没有顺序差别时，建议使用色调值（H）进行区分；如定义国家、行业等类型。如果希望图表看起来更加专业，以下有几项分类色板的小建议：
定量型：使用深浅色板强调内在顺序
如果在同一个分类下包含子类别，或者数据本身具有排名属性，那么建议使用连续色板来突出他们内在的顺序，使图表更加易读。
三、图表中的响应式设计
B端图表可视化的数据一般是在网页或移动端上动态显示。不同于平面展示或汇报，在基础设计完成后还需要考虑到图表展示的环境，根据不同端去适配显示效果，以适应各种复杂情况。而动态显示带来的交互特性也让数据展示有了更多的可能性。
1. 布局框架适配
在网页端显示时，有时候同一个图表需要考虑不同容器下的适配方式。根据数据相关性变化元素的适应形态，将非必要的的元素转化或隐藏，保留重要的图形元素去适应当前空间；元素隐藏后使用悬浮交互来保证信息的展示，保持图表的可读性同时也避免产生元素的重叠。
如案例中的图表，在不同尺寸下通过改变和隐藏图表元素，以达到适配当前空间的效果。
2. 图表元素适配
要适配移动端，网页端横向延展的显示方式需要适应移动端纵向空间的显示。除了呈现角度的改变外，还需要考虑手机屏幕的尺寸和图表元素的适配性，去兼容相关的交互操作。
3. 极值适配
因B端平台的特性，我们无法预知客户传入的数据量，可能会遇到因数据量过多，造成图表显示不佳，数据读取困难等问题。这种情况下，提前考虑数据极限场景，通过交互的形式变化的方式让用户获取完整信息，提升理解同时信息展示更灵活。
还有悬浮放大、点击下钻、联动图表等交互行为可以组成更加丰富的图表。因篇幅原因，在这篇文章就不做深入讲解了，以后可独立介绍。
// 结语
数据可视化在B端设计场景中发挥着重要作用。设计师在表达数据之美的同时更加准确，才能更直观地向用户传达数据的价值。使业务人员能够从复杂的业务数据中快速、直接地找到重要数据，确保用户能够更好的接收信息，才是可视化的关键。
* 以上图表中均为虚拟数据，仅作为案例参考
感谢阅读，以上内容均由百度MEUX团队原创设计，以及百度MEUX版权所有，转载请注明出处，违者必究，谢谢您的合作。申请转载授权后台回复【转载】。也欢迎加入MEUX,视觉/交互/运营设计师，可投简历至MEUX@BAIDU.COM (注明信息获取来源如：站酷）
关于我们：
MEUX,百度移动生态用户体验设计中心，负责百度移动生态体系的用户/商业产品的全链路体验设计。服务的产品包括百度APP、百度搜索、百度百科、百度贴吧、百度商业产品等。MEUX以「简单极致」为设计理念，创造极致用户体验的同时赋能商业，推动设计行业的价值和影响力，让生活因设计而更美好。
博学多闻，不同凡响。
博闻美育，是一款致力于提升用户文化素养的产品。研发团队以“长见识，会思考，懂审美”作为核心理念，设计出《中国故事》《四方采风》《高端文学》等的系列课程。
面对一个真正落实人文素养的全新课程产品，我们作为视觉设计师，首先希望的就是为用户打造出最美的课堂，使用户在高品质的美学场景中能沉浸式体验到学习的乐趣。当然，我们同样希望探寻如何通过设计帮助青少年在使用产品时养成高审美意识，加强文化自信。
在此次对博闻产品的视觉品牌设计中，设计团队探寻了如何将视觉设计体验与课程教学更好的结合，以下为我们的设计过程以及设计成果。
首先，我们通过对产品特性的分析，明确了此次视觉品牌探索的主要设计目标 —— 重新定义什么是提升学习体验的人文素养产品，从用户视角转变为参与者，更加沉浸于课堂。
基于对设计目标的进一步探索，我们提炼出了提升学习体验的三种核心理念：
近年来，国潮文化与传统艺术在青少年群体中“走红”，成为青年对话传统的方式。体现了青少年对中华优秀传统文化的价值认同和情感认同。我们希望在青少年养成审美与内在的关键阶段，也尽到自己的一份小小的努力。
在保留传统艺术精华的基础上，我们寻求视觉上的创新，突破设计的思维惯性，使用户可以通过现代的视觉表达形式与经典文化产生共鸣，传达国风之美，多角度唤起青少年用户对于传统经典的文化价值和艺术价值的理解。
我们希望将国风之美呈现在用户面前，将有道博闻系列课程全面包装成能够让学生身临其境的国风互动课堂，丰富用户的心智，发挥产品的双重价值。
确立核心理念后，我们将中国传统艺术中的精髓进一步提炼，最终选择了以下关键词作为视觉设计的表现点：
接下来，我们基于各个关键词对具体方案展开探索
容纳承载，历史渊源。
为了确保博闻三个系列的课程（《中国故事》《四方采风》《高端文学》）在品牌视觉设计上能够更好的进行拓展应用、传播差异化、与用户情感共鸣。我们结合了三个系列课程的特点与对传统文化的研究，分别为各个课程建立了代表性的元素作为超级符号，加强用户的记忆点：
① 中国故事 —— 讲述中华经典
中国故事系列课程会通过诗、词、歌、赋、散文、小说全类型文学作品，讲述中华经典。玉玺作为皇帝的玉印，是至高权力的象征，在各朝各代中见证了各色各样的传奇故事。因此选用【玉玺】作为中国故事的符号图形。
四方采风系列课程首次“走出屏幕”，采用文化直播结合外景采拍的形式，在历史文化名城中讲述各地的风土人情。使用【中国古建筑】作为这一系列课程的超级符号，见证和反映了各地社会的发展和历史变迁。
高端文学系列课程将带领用户学习重磅文学作品，该系列选用【卷轴】作为代表符号，卷轴不仅承载了国人对中国绘画、书法的认识，更是写入了古人的思想与信念。
在确认好三个系列的代表符号后，我们将构图一分为二，左边作为系列的重点信息区域，右边作为符号以及视觉表现区域。
浓墨淡彩，总相宜。
在视觉品牌的色彩方面，我们从古代写意的浓墨重彩中，提取出了富有中国气质的一抹颜料。
历史厚重的「红」，风光写意的「绿」，静心阅读的「蓝」代表了三个系列课程各自独有的气质。
刚柔并济，行云流水。
我们依据行楷的笔画特点，设计了三个系列的第一识别字体。「行楷」介于楷书与行书之间，比端正的楷书多一分活泼自由，又比随性的行书多一份端庄。我们在此行楷的灵活中增添一抹稳重，刚柔并济，恰到好处。
第二识别字体的设计灵感来源于印章。「印章」的历史可以追溯到战国，至今仍在生活中广泛应用，古人凿铜刻玉，力艰功深，我们希望这种信念依旧可以传承在青少年的品格中。受到印章印面形式的启发，设计了第二识别字体。文字采用现代字体为基础，增加辨识性。
清新淡雅，水天一色。
国画，以其永恒的艺术魅力穿越时空。国画的绘制讲求布局、造型、运笔、赋彩，不拘泥于自然物象的再现，强调主观意境的创造，是中华民族传统文化的瑰宝。我们借鉴了国画中工笔画的「留白」构图理念，并添加水墨画中的「墨韵」作为细节补充，创作了既符合现代视觉风格，又不失古韵的插画；
最终，我们将提炼出的「符号」「色彩」「书法」「国画」这四个关键词融合在系列课程之中。
除了设计课程产品常规的讲义以及线上页面，为了进一步提升用户的沉浸式学习体验，有道博闻独创了「手账本」这一教辅材料，并且随课程附赠可以使用户进一步体验传统艺术魅力的「国风礼盒」。
「手账本」可以帮助用户将课上的知识融会贯通，并收入「手抄报」「旅行MAP」「作家名片」「思维导图」等模块，让用户深度参与到【输入-加工-输出】的产品结构中，使用户充分吸收课堂知识、加入自己的思考理解，并最终输出观点和总结。【听-想-做】循环，巩固知识印象。我们最终会收集用户的优秀作品，并集结成刊，出版成册，进一步提升用户的参与度，增强他们的学习热情。
在手账本的视觉设计中，我们根据课程内容绘制了精美插图，考虑到用户书写的便捷性，设计了古风的书写外框，力求用户可以时时刻刻沉浸在充满国风之美的课堂中，使视觉设计与教学内容完美融合。
「国风礼盒」将“长见识，会思考，懂审美”的概念植入到礼盒的选品和包装中。封面设计我们选用了「时空穿梭」的概念，通过时空隧道，串联古今，大开眼界。礼品内容里，充分尊重用户的喜好，最终选取了「国画颜料」「手绘扇子」「国风笔记本」「考古盲盒」。每一份礼品，都充满着我们对它的严格要求和对用户参与的期待。
“古老的种子，它生命的胚芽蕴藏于内部，只是需要在新时代的土壤里播种。” ——泰戈尔
中华传统文化正是一颗充满惊喜和生机的种子，静待着我们的细心发掘。我们会继续探索，用设计在新时代中传承优秀传统文化。让传统艺术拥抱青少年，让东方美学成为青少年心中最引以为豪的文化。
本次有道博闻项目的设计过程中，我们牢记以用户为中心的理念，做与课程产品融合的设计，最终收获了一份宝贵的经验，也获得了用户的一致好评和赞许。未来，设计团队也会坚持做以用户为中心的产品，传达设计的力量。
相信种子，相信力量。
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系。
作者： 有道LCT设计团队 来源：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
Apple One里面有6款不同类型的应用捆绑在一起，页面开篇这6款应用图标横向平铺，随后依次翻转，接着Apple One也翻转出来，向用户强调它们被包含在该产品里。
品牌图标演化出多种圆形内容，内容还会不断变化切换，最后又融合成品牌图标，简单明了直观告诉用户这个功能可以解决用户哪些问题。
开篇在浅黄色背景上告诉用户智能家居应用被重新设计，随后不断加深的黄色房屋造型逐渐由大变小叠加起来组成了Home app的图标，引出介绍内容；通过放大品牌情感温度从而向用户传达品牌理念。
为了让更多的人使用Apple Pay，苹果向用户展示了真实的使用过程，降低认知成本，让用户更容易接受并使用。
用全屏视频内容刺激用户感官，然后内容逐渐缩放到电视内，一开始就把试听体验注入到了用户脑海中。
背景颜色及内容伴随电视中的视频一同切换，让用户明确感知产品能做哪些内容。
特写展示遥控器，随着遥控器角度变化，内容也跟着变化，就像有位销售拿着产品在你面前，详细为你讲解每一个按键的功能。
苹果钱包图标及文字逐渐放大向下移动，并将文字顶出屏幕以外；整体接着放大，钱包底子继续下移消失，只留下钱包内的彩色卡片，说明文字上升出现。
随着页面往下，蓝色卡片向上移动，卡片内文字渐显，页面整体变成蓝色，苹果巧妙的将图标元素与卖点内容结合，并通过不同颜色来区分不同内容。
滑到页面最底部，四张彩色卡片又逐渐插到钱包里，最后再强调用户去使用。
卖点先后出现，层层递进，随后产品被新功能及核心特点弹开， 将产品大、有多大、续航强以及新功能先后映射到了消费者脑海里。
产品用广角的视角依次出现，一方面展示产品颜色规格、另一方面暗示产品屏幕大。
Plus和电池一同进行充电动画，仅仅一个关键词和一个图标，就形象的描述了电池容量大的事实，紧接着更加具体的参数逐一显示，强化究竟有多大。
产品旋转运动最后合并成一个由大变小，最后出现价格，强调改产品很实惠。
手机旋转放大，原来的桌面壁纸变成了产品卖点的背景，将产品和卖点顺滑的联系在一起。
电池图标与卖点一起进行充电动画，将卖点顺其自然的表达出来。
让每一句文案丝滑的连接出现，让用户能够感知出产品低延迟的优点，接着产品侧影出现将之前内容擦除，引出处理器的强大。
就如卖点所说，产品很贴心的前后为你旋转展示它的面板，让用户看的真真切切。
水花下落被手机弹开，直观的告诉用户它是防水的。
漆黑的背景写着14Pro的标题，随后标题消失，同时产品从无限大缩小，看完这个动画才发现，原来之前漆黑背景是新款产品的灵动岛，随后灵动岛展示了在不同场景下的状态，吸引了用户注意。
产品说明内容使用新款手机墙纸进行渐变显示，加强了用户对新款产品的感知。
运用视差，营造空间感，手机和里面的内容先是很大，并且展示第一段说明内容；随着鼠标往下滑，手机缩小屏幕内容变化，营造了一个真实的场景画面，来强化新功能的卖点。
标题不断放大，文字中间的圆逐渐演变成一个圆角矩形，随后带出灵动岛功能动画，用户从头到尾都沉浸在苹果编排的情节中，用户喜欢了解新功能也就顺理成章了。
内容往下看，箭头按钮从左向右滑动，显示查看详细内容的入口，引导用户点击查看，这样做没有哪位用户会拒绝自己的好奇心点进去看看。
最开始只有大标题和一个科技感的芯片，随着页面下滑，详细内容显现，芯片伴随着分层镜头元素逐渐组装起来，展现出了产品的科技与精密。
手机背部摄像头用特写镜头伴随机身从平视到俯视的角度变化，将用户视线引到摄像头上，随后显示说明文案强化产品宣传。
开篇全屏出现一朵具有科技感的3d花朵收拢绽放的视频，随后镜头后推，2台产品旋转展开，呈现出一个展翅翱翔的造型，传达出产品性能强劲展翅高飞的势能。
处于合起的笔记本渐渐被打开，里面播放着三维动画界面，暗示用户它正在处理三维任务，随后旋转出2台电脑，关于电脑的核心参数被显示出来，告诉用户具体哪些性能有了提升。
电脑屏幕做爆炸图动画处理，形象展示内部结构，吸引用户关注产品特点内容。
多台不同颜色的电脑旋转排列，镜头不断变换角度，最后依次排在一起用侧视图来唤出标题，在营造出欢快的氛围的同时，还体现出产品多彩的特点。
颜色文案内容不断切换，电脑变换不同组合方式轮番切换展示，接着营造欢快氛围。
体现电脑薄的文案放大显示，随着页面往下，文字缩小，逐渐被电脑侧边遮住，用动态对比的方式让用户感受到电脑的厚度很薄，再往下，屏幕微抬，搭配关于屏幕旋转角度的卖点。
电脑切换颜色体现内容发生变化，旋转角度可以全方位看清新版插口的位置以及体现更方便的使用。
支持多方应用的文案在应用图标的包围中下落，下落的过程中同步显示的应用可以体现支持的应用多，最后和详细介绍文案碰撞，可以很好的衔接用户的阅读视线。
产品逐渐被放大，镜头进入内部，里面迸发碰撞的液体体现产品内部有着强劲动力。
承接上一个内容，体现刚才那么强大的动力的源泉就在你眼前，去选一个吧，伴随着芯片的光影运动，让你觉得这是一个具有魔法般的崭新器物。
深入产品内部，不同颜色的光束旋转流动，用具象的形式体现产品在散热方面的工作原理以及性能是多么强。
产品快速运动对文字造成拖尾效果，体现产品的轻，以及速度快。
文案内容居于2台电脑狭小缝隙之间，有一种压迫感，体现出新产品的实力很强大，紧接着M2芯片由大变小出现，交代出产品之所以强大得益于芯片。
屏幕里的应用在不停的变换，体现电脑在进行不同的应用操作，随后文字出现，强调续航能力很高。
2台电脑屏幕旋转变化，对比出2者间摄像头位置做了更新。
产品旋转，展现轻薄侧面，搭配携带更少，携带更多的文案，让消费者更加肯定它的轻薄。
看了苹果公司网站中的动画，不难看出，动画的核心功能就是用关联的方式强调、强化卖点
具体方法如下：
1、产品如果有多种颜色，那就尽量在画面中一起体现
2、让产品自己说话，善于利用产品的不同角度、运动方式强化产品功能特征
3、不做无用动画，让每一个动画表达明确的意图，不要让用户觉得它只是在动
4、把控文案展现在用户眼前的先后顺序，用故事把它们串联在一起，从而掌控用户阅读节奏
最后我们试想一下，如果网站中的动画内容全部变成静态，那会带来什么样的后果
1、内容会变得枯燥，卖点得不到强化，用户购买欲下降
2、静态内容很难描述一些抽象的功能，例如：如何体现产品散热很好，音质怎么个好法
3、内容太多占空，原本一个动画就能说明的内容，非要写大篇文字
蓝蓝设计的小编 http://www.lanlanwork.com