一直有很多朋友会问一些关于移动端实现动效的方法，平时也会给大家做一些解答，但是可能没有那么系统性，这次抽点时间总结归纳下这方面的内容，跟大家分享下我日常设计中是如何完成动画实现的。
设计输出的方式大概可以分为位图和矢量两种，与常规的图片输出并无太大的差异。位图方式：PNG序列帧、APNG、GIF；矢量方式：Lottie、SVG动画。
当然除了以设计提供的方式之外，还可以设计完成好demo，开发通过代码进行实现例如：javascript直接实现、SVG（可伸缩矢量图形）、CSS3 transition、CSS3 animation、Canvas动画、requestAnimationFrame由于超出个人能力范畴就不展开讲了。
实现动画，首先还是得了解有哪些工具可以制作及合成相关的动效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等软件。另外最近准备学习一个新的专门制作svg动画的软件-KeyShape。
接下来讲解下各个软件输出对应格式的方法，实际上操作并不会太难，动效本身更重要的还是在于创意本身，因此当你把握了这些方式之后可以考虑进行创意设计。
由于GIF文件多种工具都可以输出，这里就不再作详细说明
1. PNG序列
具体如下视频
2. APNG
如上导出到PNG序列帧，拖拽到iSparta软件中，合成即可。合成时可以选择帧率、循环次数（0为无限循环）、导出质量等。如下视频
3. Lottie
更多Lottie相关可以前往https://lottiefiles.com/学习，里面有丰富等Lottie动画效果和一些插件下载，去研究下吧
4. SVG动画
建议大家自己下载软件后尝试
5. 格式大小比
通过试验几种格式的大小大概是排序依次为：PNG序列>APNG>GIF(质量较差)>Lottie / SVG，json文件和SVG动画文件比较接近，因此可以根据实际考虑决定即可，GIF虽然可以压缩到比较小，但是本身图片质量也较差，因此建议慎重考虑。
动效在UI设计中的应用场景很多，这里梳理了一下，之前我在项目中尝试过的动效，给大家分享下一些案例，希望可以对大家有所启发。
学习用什么工具导出什么格式的文件只是第一步，更重要的还是如何制造出一个有创意的动效，因此不要过于强调工具，更多应该培养自己思考设计的习惯。
文章来源：优设 作者：ID设计站
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在今天的 UI 设计领域，由扁平化设计风格占据主导地位，已经是无可辩驳的事实了。扁平化应用除了提升用户获取信息的效率外，对设计师而言就是设计的难度大大降低了。
一个界面的 UI 视觉元素，仅仅只需要图片素材、矢量图标、几何、文字，UI 设计师的工作仅仅是对内容进行组织和排版，涉及到绘制原创的也仅仅只有少量的图标（大多数人还画不好）。
这种状态持续了很多年，看起来岁月一片静好。
但是，这两年市场发出了一些不同的声音，那就是打破纯扁平风格的 UI 风格、元素开始越来越盛行了。
比如新拟态风格在年初炒了一波热度，各大平台和公众号都铺天盖地的发文和介绍，介绍它的设计理念和设计方法。
还有就是以饿了么、美团为首的国民级应用在主页显眼的位置里使用极具识别性的拟物图标，引起设计圈的热议。
首先讲讲新拟态设计，之所以之前只字不提，是因为我对这个风格实在没什么好感，有种对纯拟物借尸还魂的味道，且它的样式对于信息密度高的应用是完全不适用的，只能活在飞机稿里。
而国内大型应用开始在实际项目中上线拟物图标，意义就不一样了，证明这样的设计是经过几个大厂团队认可，且有共识的。
当然，这并不因为大厂用了就无脑推崇。而是纯扁平的设计已经越来越难满足部分需要强视觉效果的页面设计了。
今天的互联网和过去不一样，用户的增长留存不再是过去一样通过裂变和口碑完成，一个产品只要认真打磨体验、功能就能获得用户的青睐和驻留。用户的精力时间是固定的，而互联网产品又层出不穷，佛系的等待用户临幸是没有出路，这种现状也被称为互联网的下半场。
佛系不行，当舔狗更不行（成本太高），所以今天大型产品都在对待用户的态度都选择更具更具侵略性的霸道总裁人设。不仅是用色饱和度越来越高，运营活动越来越密集，广告和强提示也越来越多。比如刚打开了三个应用，进入的首页大家自己意会……
有点扯远了，回到话题上。在这种掠夺用户注意力的思路指引下，再做所谓的性冷淡、大留白、极简风就不会合适。当对扁平的视觉效果已经开发到极限以后，那么进一步在一些细节处应用拟物就成为必然的选择。
而拟物的应用并不可能铺设到整个应用中去，因为完全拟物化的设计降低信息浏览效率是必然的，所以它只适合做局部的视觉强化，来加强用户对特定区域的感知。
最常见的需要被凸出的要素，就是首页中应用的快速入口图标、分类图标和底部导航栏图标了。这些区域长期受运营活动支配，相信大家已经很习惯了。
只是，这些图标开始在脱离运营活动的状态下，也开始使用非扁平模式，那就不再是运营设计师的工作职责，而是 UI 设计师们绕不过去的槛了（知识盲区）！
且除了 APP 外，其它领域对于拟物设计的需求也会开始逐渐提升，尤其是目前越来越复（fu）杂（kua）的大屏数据展示、车载界面、定制系统等等。
作为新世代的 UI 设计师，多数人对拟物的设计可以说是完全空白的状态，所以是时候要重拾拟物设计这个传统艺能了。
前面我有提到，拟物主要应用在关键的图标上，但应用的拟物风格并不是过去我们追求的那种极其真实、复杂的拟物，而是经过一定简化、抽象后的拟物 —— 轻拟物。我们要先来明确一下轻拟物到底是什么。
首先我们看看，过去优秀的拟物图标和设计案例，它不仅表现元素本身的光影、透视、构造，甚至会非常完整的表现物体表面的材质和肌理。
这种图标单看起来确实很好看、细致。但是，把它丢进我们当前的页面中是非常违和的，因为它们细节实在太多了，而且画起来非常耗时间，不利于项目整体的推进。
所以为了符合画面的质感，又要考虑项目效率，轻拟物这个概念开始被提出和应用，作为一个折中的解决方案。
它和纯拟物设计的共同点在于，也表现光影、结构、透视，但它尽可能精简了轮廓的复杂度、肌理和层级，呈现出更概念化、理想化、易于辨识的拟物图形。
所以，我们主要去学习的内容是轻拟物的设计方法，而不是徒手画照片（这个可以缓缓）！
而轻拟物虽然 「轻」，但它依旧也还具备拟物的基本特征，是有实体质感的。但是扁平从插画到图标设计经过多年的改版，有各种叹（hua）为（li）观（hu）止（shao）的设计，应用大量的渐变、投影、模糊的效果，比如下图案例。
这在我们之前图标的系列干货中有提过，这类设计是面性图标的进阶版，它们依旧属于扁平风格的范畴之内，不能和轻拟物划上等号。
所以，先掌握这些概念，到下一篇中，我们就会展开具体的技法讲解和演示了。
对于这几年才开始学习 UI 设计的新手来讲，拟物已经变成一个很陌生的事物，这对行业来说是比较悲哀的一件事。
因为拟物的设计不仅仅是画图标而已，对它的学习可以全方位的提升设计师的基础素养，不仅包括对传统美术（结构、光影、色彩、透视）知识点的剖析，还包含对 PS 使用的深入探索。
可以说，自从拟物不成为必修题材以后，九成以上的UI设计师是不会用 PS 的，这极大的限制了他们自身的可能性和作品的多样性。
站内攻略作为每年大促玩法的预告者，承担了向用户输出平台节奏、吸引用户预约回流的重要任务。 不同于着眼于转化的卖货会场，或是着眼于分享的互动H5，如何能让用户更好地了解京东的大促平台玩法，便捷用户的购物旅程，就成为了它的主要任务。
在开始设计之前，我们对比了2017年至今的所有攻略页面，发现往年页面存在缺乏延续性、定位不清晰的问题。作为大促信息传达的先行军，往期的攻略反而更多承担了转化型的会场类任务，对于优惠信息的预告往往是轻描淡写地用文案带过。而每一次的攻略样式都是「船新版本」，也产生了较大的人力消耗。
然而尽管攻略的任务是信息传递，但作为整体大促链路中的一环，它终究还是需要为大盘GMV服务。那么应该如何平衡二者，以达成更好的数据效果呢？
首先，从攻略存在的核心意义——助力集团大盘GMV的提升出发，它需要达成以下几个目标：
然而纵观大促会场全局，许多卖货会场也可以达成这些目标，那么站内攻略和它们相比有具有哪些差异性呢？我们可以从对内和对外两个角度进行分析：
对内差异化：从站内来看，「我的」和「AI助手」也都承担了向用户进行活动会场推荐的功能，但「我的」是围绕用户已有的操作展开管理和推荐，是绝对精准的量身打造，「AI助手」是理性层级下的导购，需要用户先产生「想法」，再指导操作；站内攻略则是引导用户未来行为的指导和说明，先组织、筛选促销信息，再使用户产生「想法」，从而产生操作，有一定「逛」的性质。
对外差异化：从站外来看，站内攻略的定位与「什么值得买」有些近似。相比之下，站内攻略的优势则在于它能更紧密地围绕京东用户的消费习惯进行定制化推荐，和近年来以长图为主的阿里系攻略相比，则提供了更为丰富的操作（如预约），一定程度上能减少用户的记忆成本。
基于以上基础，我们对往年攻略的用户画像进行分析，并对攻略进行了横向与纵向的对比，总结出了攻略作为一个长线产品视角下的迭代思路，并根据攻略的特性制定了分时期的北极星指标：提升预热、专场期的预约加购率、提升全时期的活动分流以及提升高潮期的商品转化。那么我们又是如何根据这三个指标来拆解细分策略的呢？
交互层面：动效辅助内容聚焦
作为站内优惠信息的聚集地，如何清晰简洁传达内容，一直是交互侧需要重点思考解决的难题。于是在本次攻略中，我们对比了往期攻略中的预告样式，在数据表现较好的日历样式基础上，对页面的层级进行了进一步的简化，配合动效的引导操作，以便用户能够更聚焦地浏览日历部分的核心内容：
视觉层面：视觉层级清晰
经过对交互稿的分析理解，以下3个痛点，对此次页面的信息层级和画面舒适度是一个考验：
那么如何通过视觉的手段，让视觉层级清晰展示且画面颜色和谐呢？下面从最基础的视觉构成里的构图和色彩两方面进行分析并落地：
「构 图」整体用方形进行构图和内容分割
方形是最简洁的几何形态，对于信息量较大的页面，方形会让设计空间利用最大化，并且可以排除形态上的干扰，结构清晰的展示信息内容，让用户通顺的浏览页面。
简化视觉层级
在交互稿上，瓜分京豆模块和日历选择器两部分内容划分较为明显，但所留出的空间，会增加视觉层级的复杂度。为了尽量简化视觉层级，找交互同学商量是否可以在保持内容划分清晰的情况下，把瓜分京豆模块背景和日历选择器拉通，同时，也咨询了前端同学，视觉这样处理在实现上是否会有问题。最终，三方达成一致后，采用了视觉最终呈现的方案。
「颜 色」
为了更好的覆盖618全时期，挑选了色环上三种距离基本相等的色彩进行从暖色到冷色的色相渐变。
前端层面：复杂交互动画与跨平台功能适配
关于选中移动动画
日历选中动画部分我们需要实现的一种跟随移动的效果，那么我们需要考虑的是在当前日期是有可能去到任何一个可点击日期的位置。
实现方式：
用纯css方式控制，方块使用背景图的方式实现，通过控制类名移动位置，比如.move-[start]-[end]，缺点：需要写好每个日期对应到其它日期的位置，不够灵活
用js控制。把日期看成一个棋盘格子，每个格子都占相同的坑位大小。我们把当前日期看作a，移动至日期看作b。假设把a移动至b的横向占格子数设为n，把a移动至b的纵向占格子数设为m。那么n=当前下标 % 行个数，m=当前下标 / 行个数取整。那么a移动到b的x = w * n，y = h * m (w为格子宽度，h为格子高度)。
注：宽度获取使用block.getBoundingClientRect().width；clientWidth会忽略小数位
提升筛选效率
福利秘籍专区作为大促期间福利互动活动的集中地，承担了为互动分流，为用户提供快速查找筛选可参与活动的任务。而互动往往存在较为复杂的规则，对用户而言存在较高的理解成本。此次除了集团主推的互动，又增加了对于事业部互动的展示，对于保证页面展示效率也带来了一定的挑战。通过对往期迭代内容进行数据对比，同时参考其余会场对于多信息展示的策略，最终我们采用了BI展示，同时对用户弱相关的互动卡片进行折叠的方式提升页面的效率；而在卡片的信息展示上，选择重点突出活动可得的利益点，让用户一眼即可筛选出对自己最有价值的互动进行参与。
视觉创新优化
虽然运营同学对双11的秘籍视觉比较认可，但是仍然提出了希望有秘籍形式感的同时，能进行视觉创新的诉求。经思考后，我认为运营的诉求无法满足：
于是带着以上3点找运营同学再次沟通清楚对方的真正诉求到底是什么，经沟通，对方最重要的诉求是希望有视觉创新，秘籍形式感诉求较弱。接下来针对重要诉求集中发力，并结合此次618视觉概念（光点、光线），找到了视觉创新优化的解决方案，并和运营达成了一致。
「构图」
上面提到了方形可以排除形态上的干扰，考虑到活动入口图数量较多，且氛围图不可把控，左侧以方形构成，右侧结合了618主图形——光线，把文字和氛围图分开，让各部分信息更加聚焦。
「颜色」
结合双11用研结论——活动入口主题不够鲜明，除了活动文案类似的因素，我认为颜色也是影响因素之一。所以这次在上部分平台级活动入口，采用了2种暖色的近似色交替构成，下部分事业部活动入口，统一采用了1种和上部分近似色的冷色构成；单个活动入口，文字和氛围图的背景进行统一色相的明暗深浅变化。从整体楼层来看，从上至下，由暖至冷，不仅活动主题有了明显差异化，而且较好的过渡到下一楼层；从单个活动入口来看，左右深浅颜色的划分，不仅对不可把控的氛围图适应性更强，且主题文案更加明显。
「表现形式」
整体页面在按钮的部分采用新拟态风格，在保证吸引力的同时，也减少了颜色过多的问题，减少了信息层级。新拟态风格更适合工具功能类产品，本次只尝试使用在了页面的按钮部分，风格上也会有眼前一亮的感觉。
分时期变化的楼层策略
针对高潮期的转化指标，我们参考了往期的迭代经验，发现随着大促节奏的渐进，临近高潮期时，页面的转化模块表现往往有较大的提升。于是在本次设计中，我们针对这个数据表现，对楼层顺序进行了动态调整，高潮期将转化楼层前置，以更好地匹配不同时期的用户需求。
同时根据往期的楼层数据表现，本次我们也延续保留了数据表现较好的模块类型，例如增加了榜单的露出，以辅助页面目标的达成（以下数据来自于lan.jd.com)。
楼层整体化、内容吸引力包装
基于之前今日楼层视觉整体感较弱的问题，这次楼层背景色和页面背景色有所区分，楼层内模块颜色和楼层背景色同色，较往期此楼层来看更加整体化，又能让页面层级更加清晰。
其中，针对这次品牌入口和上海美影厂IP形象结合的策略，为了提升用户吸引力，且不干扰信息内容的前提下，视觉上采用了和用户共情，且和IP形象契合的元素——老电视机，同时按钮文案也进行场景契合的包装，增加趣味性。
与往期站内攻略对比，本次618站内攻略主要在以下方面有较为明显的提升：
品牌视觉契合及创新
在延续主视觉元素的同时，视觉风格有所创新，在页面的按钮部分采用新拟态风格，减少颜色过多而导致的复杂信息层级问题，同时也保证了视觉吸引力
视觉精致程度
整体页面颜色较有节奏，且更加清透舒适
元素细节（打光、投影等）的刻画更加精致
信息层级清晰度
通过对颜色的合理规划，有主次的文字信息，让单个楼层更整体化，各楼层模块划分清晰
数据表现
根据上线后的表现，本次福利互动模块的点击数据获得了显著的提升，今日模块的点击转化率相比往年也获得了成倍的增长，页面目标基本达成。
1. 好的经验
针对攻略这类规律性存在的活动会场，我们可以针对其主要的功能组成模块进行数据导向的设计与迭代，来更好地指导后续的优化方向；同时也可以辅助业务侧更加清晰地规划会场定位，提升页面对用户以及大促的整体价值。
2. 如何沟通
Q：需求方一味的追求热闹复杂的视觉样式创新，该怎么办？
A：热闹的氛围对于大促活动来说固然非常重要，但也要根据页面类型去判断（重氛围or重信息)。设计师要倾听诉求并搞清诉求的根本原因，并用专业的角度判断诉求的合理性，以及价值大与否。热闹氛围塑造的前提是不能影响信息的识别，否则就会本末倒置，并且热闹氛围的视觉样式要和该场景逻辑匹配 。
3. 待优化项
虽然本次页面大部分模块基于产品化的思路迭代均获得了一定的正向反馈，但产品的发展往往是个曲折上升的过程，活动会场也不例外。结合上线后反馈，站内攻略依然有以下可优化点：
日历操作体验
根据用研结果显示，日历操作体验问题反馈较多，日历模块为滑动改变日期，而非点击跳转日期的操作方式，与用户的认知不符，且首屏动效较复杂，在安卓机型上体验较为卡顿。后续如有同样的交互方式，需优化操作体验。
福利互动入口主题文案
根据用研反馈，主题文案描述不直观，不易理解，导致用户容易滑过整个模块。建议后续活动主题能简单清晰的描述优惠和玩法。
综上，未来站内攻略需要进一步探索主要功能模块对用户的价值，探索其在大促链路中独特的差异性；同时保留高用户价值模块并持续优化，以求达到更好的用户体验，用设计策略为用户与业务带来更多的价值。
文章来源：优设 作者：JellyDesign
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天的这篇文章也将围绕着「文字」展开，相信大家看完后会对「文字」有一个全新的了解，也将明白文字对于版面的意义是巨大的，处理好它，基本上你的版面也就编排的差不多了。好了，下面我们开始今天的内容吧。
首先来看几张不同类型的海报，第一张文字占比较高，第二张图片占比较高，第三张文字与图片占比是五五开。
然而不管是属于哪种类型的，它们的核心目的都是在传达信息。因为对于一张海报来说，我们不光会看还会去阅读它们。
平面设计就是通过文字来「说话」的。
而在广告设计中，图片的占比会非常高，因为广告多以图片为主，通过图片我们能大致的猜测出设计师想要表达的东西是什么。
总结一下：广告设计多以图片为主，意在通过图片传达概念；而平面设计则多以文字或图片为主，意在通过文字传达信息。
那么作为信息传达的载体，字体就显得格外重要了。下面我会从字体的分类、字体的搭配、字体的气质与设置细节着手，慢慢带领大家去认识字体，首先我们来看看字体的分类都有哪些。
中文字体大致可分为：黑体、宋体、圆体、书法体与卡通体等。
其中书法体又细分为：楷书、行书、草书与隶书等。
在列举的这些字体中，最常用就是：黑体、宋体和圆体，而在书法体中，最常用的是楷书与行书。为什么说这些字体常用呢？因为在许多优秀的设计作品中，这些字体的出现概率都非常高，尤其是黑体与宋体。
下面说一下英文字体，大致可以分为：衬线体、无衬线体、手写体与展示字型等。
其中最常用的就是：衬线体与无衬线体。理由与中文一样，它们也是使用率很高的字体，其次还有一个原因就是在以中文为主的设计中，它们与中文字体搭配起来比较契合。
拿黑体来说，与之搭配的英文字体就是无衬线体，因为它们的笔画特征相似度很高。
宋体搭配的就是衬线体，因为宋体的笔画特征是有粗细变化且有装饰线，而英文的衬线体也刚好有与之相似的地方。
而圆体则是搭配拥有相似特征的无衬线体。
因为常用的书法体通常使用毛笔书写，所以在笔画特征上没有与之相匹配的英文字体，大多数时候我们会选择用衬线体来搭配，具体原因我会在后面的字体气质环节为大家讲解。
虽然也有别的搭配方式存在，但我给大家提供的这些都是最常用和最安全的。说完字体搭配问题后，下面我们来看看这些字体，所包含的气质又有哪些。
首先是黑体，它具有科技感与现代感，这是由它简洁干练的笔画特征决定的。
其次黑体也能表现出运动与时尚的感觉，因为运动与时尚本就是偏现代的词汇。
接着是宋体，它具有文化与历史的气质，这个比较好理解。
而除了能表现出历史与文化感之外，宋体还能表现出清新与雅致的感觉，这是由宋体的笔画特征决定的，横细竖粗且末端带有装饰，与优雅精致的感觉十分契合。
圆体的特点也是非常明显的，在看到它时脑海中的第一印象就是可爱与卡通。
除了刻板印象外，圆体那种圆滚滚的笔画给我们的感觉还有安全和易亲近，所以圆体也能用来表现儿童与温暖感觉的题材。
一说到书法体，能直接联想到的关键词就是传统与历史，因为书法的演变就是我们汉字发展的轨迹。然后我们回过头来讲一下，为什么书法体可以和西文中的衬线体搭配。
原因就在于衬线体也具备书法体的某些气质，比如传统、文化、历史等。与书法体在早期的东方一样，衬线体在早期的西方也是主要的字体之一。
温暖、人情味儿，说到书法体可能很难联想到这两个词，但是书法体确实具备这种气质。跟黑体这种棱角分明的字体相比，书法体是手写出来的，它的笔画特征给我们的感觉就是有「温度」的。
在字符面板中，除了选择字体与改变字号以外，这两个区域相信大家用的还是比较多的，它们分别是：行距设置与字距设置。
拿行距来说，在使用时有几个比较常用的设置方法，比如用当前文字的字号乘以1.2、1.732或是2。不过，通过这个方法所算出来的数值只是一个参考，也就是说你可以在这个基础上做些调整。
比如：在计算出的数值的基础上进行递增或是递减，这时你要做的就是用眼睛去观察，觉得大了就减少一些，觉得小了就增大一些。
其中，用字号乘以1.2适用于标题。
比如上方那个标题的字号是40pt，那么行距的数值就是用40乘以1.2等于48。下方这个是在此基础上做的一个调整，稍微增大了一些行距。
字号乘以1.2适用于标题，而用字号乘以1.732或2则更适用于小字号的文字，比如内文。
上方是用字号乘以1.732的例子，字号是9pt，用它乘以1.732得出来的数值是15.588，四舍五入取个整数得到的行距就是16，下方这个是用字号乘以2得到的效果。
大多数情况下我建议大家用字号乘以1.732的行距，大小比较适中。
跟行距不同的是，基本上来说字距是无需调整的。当然还是那句话，要靠自己的眼睛来衡量，如果你觉得字与字之间离的很近的话，那么可以增大一些字距，反之，则可以减小一些。
其次就是，当你遇到一些偏轻松慢节奏的设计，比如典雅清新类的文学小说时，就可以适当的增加一些字距来营造这个感觉。
比如这两张海报，左边的是经典的居中结构，右边的是包围结构，构图都是可以的没有任何问题，但为什么看起来还是怪怪的呢？因为文字组没有刻画好。
为了让大家能更深刻地体会到文字组对于版面的意义，修改了这两张海报，其中构图不变只改文字组。
这个修改前后的对比还是非常直观的，可见文字组对版面的影响有多大。如果说构图是版面的骨架的话，那么文字组就是版面的五官，骨架再好五官不行结果也是可想而之的。
文字组分为：左对齐、居中对齐、顶对齐以及两端对齐。
其中与左对齐与顶对齐对应的有：右对齐与底对齐。
给大家找了一些各种对齐方式的案例。这是左对齐的形式。
这是右对齐的形式，与左对齐相比右对齐属于不常用的对齐方式，主要是出于易读性的考虑，但并不是说不能用。
这是居中对齐的形式，最经典的对齐方式之一。
这是顶对齐的形式，是文字竖排时最常用的对齐方式。
这是底对齐的形式，跟顶对齐相比也是属于不常用的对齐方式。
最后是两端对齐的形式，横排与竖排都可以使用这种对齐方式。
如果作品看得足够多，应该见过这种形式的组合，它同时包含了多种不同对齐方式，我们称其为「对齐组合」。
比如我们可以借鉴结构，以这个文字组为例，它的结构是这样的：两端对齐、中间的文字字号大，上下的文字字号小，按照这个套路我们来试着做一个组合。
在编排前，我们先阅读一下文案，通过文字可以得知，这是一个与篮球明星有关的内容，气质上来说会偏现代一些。
所以字体可以选择一款黑体，英文部分则搭配一款无衬线体。
根据之前总结到的这些特征，下面就可以开始编排文字了。
按照那个组合的套路，我们先将两端对齐中较大字号的文字给编排出来，而标题信息无疑是非常适合用来放大的。
接着再将上方和下方的小字号文字给编排出来。
其中要注意的就是这段文字的行距，我参考了logo的高度来进行设置。而整个组合中，字距是基本没有进行调整的。
值得一提的是，在两端对齐的文字组中，这种小大小的形式非常好用。因为它的节奏变化丰富，所以大家在做两端对齐的文字组时不妨试试。
这就是借鉴结构的效果了，精髓在于要多去分析别人的形式与套路，并从中获取做组合的灵感。除了能借鉴结构之外，我们还可以借鉴标题字数+结构，是什么意思呢？
以这个组合为例，它的标题有7个字，整个组合是由顶对齐与两端对齐构成的一个对齐组合。
它的组合结构为小中大，按照这些特点我们来尝试借鉴。
这是要用到的文案信息，通过阅读文案可以得知，这是一个关于炸鸡套餐的内容。
通过去看kfc的各种物料，发现运用黑体的场景还是比较多的。
所以，在字体搭配上选择用黑体与无衬线体。
根据之前总结到的这些特征，下面就可以开始编排文字了。
按照小中大的特点，依次将信息给编排出来。
完成后可以在组与组之间，添加一根小线段用于连接，以起到过度的作用，如果大家现在回过头去看原图的话，也能发现这一特征。
其中，标题的行距就是用标题的字号乘以1.2算出来的。
字距我也做了调整，因为默认0的字距看上去有些拥挤。
可以看出跟原图相比，在不破坏组合结构的情况下，针对文字信息的编排是做了些调整的，比如：原稿最左侧是两行顶对齐的小文字，在借鉴时将它换成了logo，因为我们是要借鉴它的结构，而不是为了跟原稿做的一模一样，具体还是要根据我们的内容来合理编排。
首先我们来看这张图，一个标准的两端对齐、组合结构与之前那个是一样的，中间的字号大，上下的字号小。
除去这些外还有一个小特征就是，在大字号中间还有一层小字号的文字。
接着我们再来看这张图，它的特点就是图片叠压在了文字的上方。至于它的结构我们可以不用考虑，因为结构已经找好借鉴了。
这是要用到的文案与图片。通过文字可以得知，这是一个关于介绍昆虫的图书，且配有一张插图。这个插图的风格是手绘形的，偏写实一些没有那么的卡通。
结合这些特点我选择的字体搭配方式是，宋体配衬线体。
因为字体搭配这部分我又借鉴了一些相关风格的书，发现它们的字体搭配方式用宋体比较多。
分析完文案找到字体搭配方式后，在结合之前总结的一些组合特征，我们就可以开始编排了。
先将中间比较大的那层文字给编排出来，然后在它中间处置入一个小字号的文字。
中间层编排完成后再来编排上下层的文字，字号不用太大，整体注意好两端对齐。
调整字距的地方有两处，首先是标题，调整的原因在于默认值我觉得有些小了，其次是标题中间的那行文字，调整它的原因在于不想字号放太大。
因为是两端对齐的结构，不调整字距的话。标题中间那行文字只能通过放大字号来达到目，然而这个效果并不是我想要的。
综合考虑，选择了这个，最后，把图片置入进去叠压在文字的上方。
图叠压在文字上有一个无法避免的问题就是，被压住的文字会出现无法识别的情况，英文还好但是中文却不行，因为在这个组合中，中文是用来阅读的文字，英文仅充当装饰用。
既然中文是重要的信息，那为什么还要去遮挡它呢？因为有提示，通过这两个字你也能猜出来被压住的文字是什么。
这就是借鉴结构+表现手法的例子，多一张图片的加入，混合借鉴后的效果与原稿的相似度就会降低。
下面我们来看这张图，它既有顶对齐又有两端对齐的感觉，像这种组合我将它称为顶部两端对齐。
它的组合结构也是一个小大小的形式。
分析完上一个组合后，再来看看这个组合，值得借鉴的地方有两处，首先就是整体的结构，其次就是字体搭配。由于已经借鉴了上一个组合的结构，所以这个组合要借鉴的就是字体搭配。
在原图的这个字体搭配中，英文是最好判断的，这个字体是衬线体，中文则比较陌生了，既不像黑体也不像宋体。
感觉是被设计过的，不像是字库里的字体，我通过观察发现，它既有宋体横细竖粗的笔画感觉，又有黑体干净利落的特征。
所以，我在字库字体中找到了一款具有类似感觉的字体：姚体。
在字体搭配上选择用姚体搭配衬线体。这里需要强调的一点是，在挑选字体借鉴的过程中已经考虑到了与文案的气质相匹配的问题，下面我们就来看看文案。
标题叫「遇见你之前」，给人的感觉比较文艺，而姚体我们前面也分析过了，它是具有宋体特征的，而且笔画细长，整体给人的感觉就是比较文艺的。
分析完成后，结合之前总结的组合特点就可以开始编排了。
第一步，还是按照小大小的感觉将组合给编排出来，注意好顶部两端对齐。
接着在组与组的缝隙处加入线条就完成了。
在这个组合中标题的行距与字距，默认状态下是左边这样的，字距还好，行距却非常大，这个时候你就不能套用之前讲到的倍数去算行距了。那样行距只会越来越大，所以这里我们要根据视觉效果来调整。
这样，一个借鉴结构+字体搭配的例子就完成了。
这是要用到的文案与图片素材，首先，老规矩分析一下文案，选择与之契合字体。书名叫《流星之绊》，还是比较文艺的。
根据这个书名，搜索了一下原书的样子，在这三个不同的版本中，所感受到的气质有：温情和雅致，在字体的选择上与之较为契合的有：书法体与宋体，这两个字体的选择在这三个不同的原版本中也都有体现。
打算用宋体，与其搭配的英文首选就是衬线体了。
这是第一个要借鉴的对象，可能有人会说这不像文字组，这确实不是文字组，但并不代表它不能被联想成文字组。
比如它的结构是由一个顶对齐与一个左对齐构成的对齐组合，而且下方的那个左对齐文字是放在了顶对齐的负空间处的。
其次，顶对齐的文字字号较大，下方左对齐的文字字号较小。
这就是根据那张图所总结出的一些组合特征，下面我们就根据这些特征来编排文字。
先排出顶对齐的文字，然后在其负空间处置入左对齐的文字信息。
排到这发现右下角还有块小缺口，既然是要做一个对齐组合的话，那么就要把它填满。
关于顶对齐的中间部分为什么要这么做，是因为标题的字数不足以作出顶对齐的感觉，为了解决这个问题，选择重复了一次标题并且将它的笔画打散了，而打散的灵感来源于「流星」，它们就像流星一样散布在天空中，不知道什么时候就会掉落下来。到这为止是书封的上半部分，下面我们来编排下半部分。
这是要用到的借鉴图，它也是一个由顶对齐与左对齐构成的对齐组合。
除了这个外它顶对齐部分的文字跟左对齐的比，也是属于较大的。
这是从那个组合中，总结出的组合特征，与上一个几乎一样。
按照总结出的组合特征，将文字给编排出来。
其中顶对齐与这段左对齐的文字，它们的行距是用字号乘以1.732算出来的，字距则是做了些微调整，因为当文字缩小后，它的字距在视觉上看着也会变小，所以我在默认0的基础上将字距增加到了50。
这就是根据那两张图片所借鉴出来的文字组了，下面把它们置入进版面中。
整体是一个上下结构的，这种类型在构图中属于上下构图。这也是为什么会找那两张图来当参考的原因，因为提前已经考虑好了构图。
接下来做烘托氛围的工作，先把底色换成夜空的黑色，然后配上图片。
接着更换字体的色彩恢复识别性，其中黄色的部分是为了与白色部分做区分。
然后给腰封换上色彩以恢复下方的文字的识别性，再挑选一些信息，在它们的下方配上黄色，目的是为了与上方的色彩做呼应。
最后，将书脊编排出来，这个案例就编排完成了。
以上就是版式三部曲之文字篇的所有内容了，回顾一下，由两个部分组成。第一部分是：字体的分类、字体的搭配、字体的气质与设置细节。具体包括：字体有哪些不同的类型、在选中字体的类型后，要如何选择与之搭配的英文字体。字体气质主要讲的是，不同类型的字体都有哪些味道，它的意义在于当你确定好项目的风格后，可以根据不同字体的气质，快速的找到与项目定位契合的字体。
文章来源：优设 作者：研习设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面，使作品不仅具有美感，还能清晰表达设计者的目的。不同构图能使画面产生不同的视觉变化，进而给观者带来不同的心理感受。同的心理感受。本期分享的是上下构图的使用方法，此构图形式具有良好的视觉效果，也比较容易掌握，是非常实用的构图方式。
上下构图形式是将版面分割为上下两部分，或让画面中的元素整体呈现出上下的分布趋势，主空间承载视觉点，次空间承载阅读信息，呈现的视觉效果平衡而稳定。
最典型的上下构图由「上图下字」或者「上字下图」两部分构成，图片及文字各占据一部分，互不干预，能清晰明了的传达出版面的信息。
主空间还经常使用图形化的标题文字充当画面主体，可以很好解决画面缺少图片层级的问题。
上下构图空间划分比较固定，为了得到丰富的视觉效果和良好的设计感，需要通过精心设计的编排来丰富版面的视觉效果。比如文字的横竖排版，元素之间的对比、点线面的运用、巧妙的留白等。
进行上下构图设计时，可以根据版面内容的信息体量划分画面的空间，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等。在设计时也可以反复进行调整，直到找到最为合适的构图比例。
1. 1:1分割
把画面平分为上下两部分，形成对称均衡的分割构成。
1:1分割比例构成方式，多用于版面中两部分内容处于并列或对立的关系。
2. 黄金分割
「黄金分割比例（1:1.618）」被认为是最具美感的分割比例，具有严谨的艺术性、和谐性，蕴藏着丰富的美学价值。
在设计中有意识地运用黄金分割比例进行设计，可以营造出富有美感的版式效果。
3. 白银分割
「白银分割比例（1:1.414）」是日本率先采用的一种分割比例，目前广泛运用在版式设计的布局中。
与黄金分割相比，白银分割次空间占据的比例更大一些，能够承载的信息量也更多。
4. 2:1分割
采用2:1的比例，图片主体在画面中占据主导地位，视觉焦点更清晰。
主要的信息（标题）常融入图片中放在主空间成为画面主体，阅读性文字则放在次空间。
5. 3:1分割
3:1分割的比例与2:1比例相似，但图片在画面中占据主导地位更强，主空间承载视觉点，次空间承载阅读信息。
通过比例，可以让版面分割更严谨。但没有那个比例关系绝对正确，需要根据画面的项目调性、信息体量、信息功能与图文主体而定。如使用其它比例分割的优秀案例：
把图文按比例分别编排在版面上下方，是比较严谨规范的构图方式，但是为了避免版面的呆板，可以通过调整版面空间变换出多种编排形式。如以下几个案例：
缩小图片和文字空间，使留白处形成外空间，增加层次感。
在背景（绘画作品）上重新划出新的空间，形成内外空间对比，既丰富了画面层次，又让版面变得生动有趣。
通过图片文字的错位排版和负空间的巧妙留白，让原本呆板的上下构图变得灵活多变，充满个性。
让图片位置重心偏移，打破均衡稳定的构图形式。标题的破图处理，也增加了版面的灵活性与丰富性。
在上方空间上划分出新的空间，这样的手法可以很好让空间具有多变性，也可以让我们的设计更加灵动。
上下构图的框架看似比较固定，但是也能通过设计手法，变换出多种编排形式，巧妙破除上下分割的单一性与呆板感。
1. 曲线分割
把生硬的直线改为呈现出动态的曲线或斜线进行画面的分割，版面显得更生动活泼。
2. 图片裁切
把方形图片裁切为其他形状，使上下构图没有明显的分割线，也可以呈现出良好的视觉效果。
3. 文字破图
使用文字串联起上下两个空间，破除上下构图版面的单一性。
4. 元素串联
利用图形、色块等元素串联空间，让主次空间建立起联系，具有丰富的视觉效果和良好的设计感。
5. 图片退底
把图片主体进行退底处理，重新营造场景，弱化空间的分区。
6. 空间留白
使用留白破除两个空间的间隙，拉开画面的空间感，具有良好的视觉效果。
什么是上下构图
构图比例
空间调整
灵活运用
总结
文章来源：优设 作者：艺海拾贝Design
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
今天分享一个很多设计师头疼已久的问题，关于网页响应式布局原理和设计方法。文章主要包含三个部分：
所以废话不多说，我们直接进入正题吧！
在过去，网站通常就是为了电脑大屏幕展示而设计，如果用手机访问，只能在巴掌大的屏幕里看缩小版的页面。虽然还有手机专供的 WAP 页面，但因为太简陋也无济于事。
随着智能手机、3G、4G、HTML5 的普及，使用手机访问网站的人越来越多，为了让用户在手机上看到更合适的布局，且兼顾开发的效率，响应式的概念就被提出了。
通俗解释，就是通过一套代码，可以无缝匹配符合电脑、平板、手机预览效果的前端技术。比如下方 Nike 官网，就是应用了响应式设计后在不同客户端、分辨率下的效果。
虽然响应式的应用越来越广泛，但是从零开始去写一个响应式效果的网站对于程序员来讲是非常复杂的，因为当中包含了大量的逻辑、判断、适配内容。
所以，今天市面上看见的响应式网站，多数使用了一些开源的代码或者框架。而应用最广泛的，就数 Bootstrap 了。
之所以提这个，是因为既然开发使用了别人写的框架，那么对于我们的设计稿也就上了紧箍咒，我们需要根据框架的要求来设计界面，这会稍后具体解释。
还有个问题，就是为了实现平板、手机和电脑不同的预览效果，并不是只有响应式布局一种技术，还有另一种技术 —— 自适应。
通俗点说，自适应就是为不同客户端分别提供一套独立的前端代码，和响应式使用一套代码适配多种客户端不同。
响应式适合应用在一些简单的官网、展示类页面，展示的内容大致相同。而自适应适合应用在需要在不同客户端类型有较大差异的网站，这样只使用一套前端代码就完全行不通了。
比如爱奇艺的官网，为了符合用户体验，在移动端网页布局中精简替换了大量的内容，和电脑版已经没有太直接的联系了。
两种做法并没有好坏之分，只有适不适合项目之别。了解了它们的不同，我们就可以进一步学习响应式的规则了。
响应式布局的规则并不是特别复杂，只要注意两个问题：
1. 分段响应规则
敲黑板，响应式的响应，面向的核心对象是浏览器窗口的宽度，而不是设备类型。所以打开使用响应式的网站，我们通过改变浏览器的宽度，就可以看见不同的展示效果，比如下图的星巴克官网。
我们可以发现，浏览器宽度每达到一个数值（Breakpoint）的时候，页面的排版和样式就会发生明显的变化，而这就是响应式设计最重要的功能 —— 分段展示。
也就是说，响应式规则就是为页面分配不同的宽度区间，每个区间有各自展示的样式，用来应对不同的场景和设备类型，常见的适配区间大致如下：
包含图片截图 320-800 ：移动端收集屏幕 800-1200：平板或上网本屏幕 1200-无穷：一般的电脑显示器
面对分段式的布局、样式变更，我们就要关注到底发生了哪些变化。总结起来，可以简单的归纳成三种组件的调整：内容增减、布局调整、样式调整。
第一种，内容增减。即部分模块在不同的分段内会有显示和隐藏的状态，尤其是一些网页端的内容觉得在小屏幕上展示会太多了，就在小屏幕场景中隐藏掉。
第二种，布局调整。主要是模块的排列和顺序发生变化，常见的就是模块一行的列数发生改变。
第三种，样式变更。即针对不同的分段设计完全不一样的样式，最多应用在导航栏的设计中，会为最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 样式。
所以，归纳起来，就是页面针对不同的分段展示不同的结果，即页面中的组件触发了对应的变化类型。每个组件都可以应用不同的变化类型，而无需进行统一。
2. 组件宽度适应
分段式响应，是响应式布局的第一层逻辑。而在触发关键值（Breakpoint） 之间的区间，我们拖动窗口的宽度，会发现组件的宽度也随之改动，这就是 —— 组件宽度适应。
组件宽度适应在手机 UI 的适配中非常重要，即完成不同屏幕宽的手机适配所应用的逻辑，所下面我们简单讲讲它的规则。
组件的宽度适应模式主要有两种类型，一种是容器宽度适应，一种是容器比例缩放，比如下面的图例。
容器是一个比较抽象的概念，类似设计软件中的编组，它集合了所有下级元素，但本身并没有实际的内容和样式。在响应式规则中，下级元素并不会和这个容器等比变动，出现下面这种错误的效果。
正确做法是会定义下级元素针对父容器的响应方法，做到容器变更的同时其自身的显示也是合理的。比如相对容器左右间距一致、对齐方向一致、尺寸固定等设置。
而这种规则的设置，就是 Sketch/Figma/XD 中的响应式设置功能。只要设置得当，就可以获得一样的宽度适应效果。
如果对软件响应式功能了解不全面的同学，就可以自己多搜索一下对应的说明，我就不在这里过多的展开了。
再总结一下，响应式的规则就是页面组件先遵循当前分段展示的布局效果，并在这个区间内支持小范围宽度的变更和适应。
响应式设计是一种源自技术的概念，而不是单纯的设计风格、方法，所以设计响应式设计其实就是 「面向编程设计」。
设计界面要吻合编程的真实方法和需求，而不是根据我们想怎么做就怎么做，所以整个流程不能只站在设计师自身的角度考虑，而要和前端程序员紧密沟通，首先确定响应几个宽度区间，以及它们对应的数值分别是多少。
然后我们就要完成对应数量页面的设计，因为前面我们说过，分段响应规则中会有明显的样式变动，这就要求设计师是一定要给出设计示例的，而不能依靠口头描述或程序员自由发挥。
完成这些设计稿以后，我们再进一步确定同一个区间内，组件的宽度适应规则是什么样的。多数情况下，这个阶段使用口述就可以，如果规则比较多，那么就可以在标注阶段把你要实现的效果记录上去即可。
全部设计稿和规则都沟通完毕以后，才进入切图导出的阶段。要提醒一次，在一些特殊的情况下，响应式的背景切图会和普通页面的背景切法不一样，尽可能让前端程序员检查一遍导出的文件。
只要根据上述的流程，在遇到不确定或者不清楚的情况，就和前端程序员做沟通，那么很快就可以将项目输出出来。
响应式这个概念虽然高大上，但并不是任何项目都要无脑往上套的。因为框架规则上的限制，导致我们很难在响应式页面中使用一些特别复杂、高级的视觉样式，导致最终呈现的效果往往非常简单或者过度依赖图片的质量。
所以，如果在功能较为复杂或需要复杂视觉支撑的网页中，就可以选择应用固定页面内容宽度的设计来完成。
响应式页面是什么
响应式布局的规则
响应式的设计流程
结尾
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
版式设计在我们的设计中是非常重要的技能，无论是UI设计还是平面设计，都会运用到版式设计相关的知识，在版式设计中最常见的就是图文排版、文文排版。一张图片一段文案在不同的需求情况下我们都可以排版出很多种样式，每一种样式展现出来给人的感觉也是不一样的，美的排版总是会使人眼前一亮，也会使整体的设计更耐看。
排版也是会根据重要程度划分层级，我们都知道主题文案都需要醒目，让人一眼就能看到，这样才能达到宣传的作用，当然仅仅只是展示主题文案也是远远不够的，达到主题排版，主图排版，小到副标题排版，我们都需要精心的排版，还可以更精细到小到辅助文案以及图形的排版，而今天我们就来看一下日期这样的文案我们可以怎么排版呢？
日期在一些重要的活动中也是比较重要的信息，比如展会时间，我们需要突出时间，不能用极小的文字排版在角落，用户不注意的地方，这样会给人一种焦虑的情绪，既然是展会活动，那么用户关心的是展会的主题是什么？活动时间是什么时候？活动地址在什么地方？所以这些重要的信息就需要重要突出。而在一些做纪念性的日期我们就可以小化（例如我自己记录自己的学习打卡练习）
我们常见的日期有年、月、日、时、分、秒，接下来我们就通过对日期的展现做一些不同的排版方式，通过与日期的普通排版方式做对比，我们就可以看出微小的日期排版对整体的设计展现也是有很大影响的。
简单的日期排版我们通常就只是将年月日对齐排版就算完成了，但是这样的排版方式会影响整体画面的美观，我们对于小文案也需要花一定心思去整理以及排版出更精细的样式，这样给用户的感觉就会觉得你的每一步设计都是用心设计的，并且为了整体的美观，我们 也不得不从细微之处出发。
日期排版01
例如下面对于日期的排版，TIME这个文案有时候我们也可以去掉，因为用户看到时间就会明白这是什么，在一定的情况下也是可以去掉的，当然有时候为了整体页面的展示效果，我们也可以加上，便于排版，左边只是将年、月、日并排，时间节点作为一个点排列，下面的文案我们可以根据实际情况选择一些特殊的提示文案做装饰
而通过对左边简单的日期排版进行改版后，我们会发现右边的日期排版会显得更美观，排版更精妙，也有更多的细节之处，例如2020后紧接着年（YEAR)的提示，08后面标识是周六(SAT.），年月日和时间节点也同时做了层次区分，这样更有利于阅读。
日期排版02
对于上面同样的日期文案，我们还可以排出右边不同的样式，整体采用横排的方式，将年、月、日同排，时间段缩小处理，使时间之间也能有层次感
日期排版03
下面的日期是年、日期段、时间段的组合，左边的排版显然是比较常规的分层排版，却主要突出了2020，而一般时间我们在这一年将要发生的事，我们更关心的是哪一天那个时间点，而右边的排版主要突出时间段/点，更能让用户看到自己关心的事件。
日期排版04
下面这一组日期是有不同年份的，所以我们在排版的时候可以突出显示年份，这样在排版的时候就可以注意层级关系，排除层次感
日期排版05
这一组日期是比较简单的，只有一个时间点，没有时间段，如果直接按照左边这样的日期排版方式，显然整体看着就很单薄，把这样的日期排版方式融入到版式整体画面中，也一定会显得毫无设计感，而我们只需要将简单的日期经过简单的排版，从年、月、日、时，从上至下依次排列，这样就可以显得信息有层次感，并且阅读也不会有困惑，加上精致的icon做装饰，这样的日期排版就显得更耐看。
日期排版06
这一组日期也很简单，只有月、日、时，都是属于时间段的信息，通过分析这个时间，月都是10月，是相同的，所以我们可以将月份单独拿出来，作为共用信息，这样就可以精简画面重复的信息，依然采用月、日、时这样从上至下的顺序排列，时间小化，但是利用色块突出，也不会柔化时间点的阅读，再通过一条线的连接，将斜线和时间icon相连，形成一个有趣味性的时间装饰，这样的排版更容易吸引用户的眼球
日期排版07
下面的日期也是年、日期段、时间段的组合，和第三个日期排版的案例类似，所以存在同样的问题，左边的排版显然是比较常规的分层排版，却主要突出了2020，右边改版后，我们同样弱化年份（2020），提取相同的月份（8月），突出显示日期
日期排版08
这一个和第五个也是一样的，左边都是年、月、日、时的时间点，没有时间段，第五个我们是采用竖排的方式，而这里我们改版后采用的是横排的方式，突出显示月、日，让整体的层次更加清晰
日期排版09
下面这一组时间改版，我们主要采用错位竖排的方式，像这样的排版方式，我们可以多用于一些比较有设计感或者比较唯美的画面中，显得每一个小的点，都有用心设计，并且也符合这样的气质
日期排版10
这一组日期只有年、月、日。左右两边的排版看起来很相似，但是通过对细节的调整，例如2020的弱化，间距的把控，星期几的友好提示，这样就会使整个日期排版看起来更精细、耐看。
我们通过对上面日期的排版分析和总结，会发现小小的日期排版也是很关键也很追重要的，所以下面我们将通过一张海报案例，来真正体现日期排版对整体画面的重要性。
海报主题是选择的立秋，虽然立秋以及过去两天了，但是我又学会了这个立秋新的排版技巧，所以我想将这一技巧分享出来，但是这里就不详细讲解海报的设计过程了，主要还是分享日期排版对整体画面的影响作用
这里就简单的说一下海报设计的思路，海报主题是立秋，所以我现在一片黄色的枫叶作为画面的主视觉，画面整体体现秋天的感觉，一片黄灿灿的画面，给人感觉就像是秋天到了，画面元素简约，只选择了一片枫叶加上它的投影，体现空间感，主题文案排版在枫叶上，与枫叶融为一体，这样用户得分第一视觉就会被主图吸引，同时看到主题相关文案，下面的其它文案通过从|秋|字垂落的竖线，分别右对齐以及左对齐，显得画面规整
第一张海报的日期排版就是采用普通常规的排版方式，我们会发现这样的日期排版方式，在整个画面中会显得有点僵硬，并且左右两边不对称的关系，会显得右边偏轻，使画面的平衡感缺失，也正是日期的排版太粗糙的原因，导致整张海报的精细度大减。
样机效果
我们保持其它元素以及排版都一致，只改变日期的排版方式，我们就会发现右边的海报整体给人的感觉更精美，平衡感更强烈，所以我们在做设计的时候不要忽略每一个点。将每一个点都细心的设计，这样的作品才会更耐看。
版式设计是我们设计中最基本的知识，我们在做设计的时候，通常会注意主题主图的排版，而经常会忽略哪些不是很重要的信息，但是我们在分析文案信息的时候，也需要考虑整体设计的目的，有时候日期信息也是非常重要的信息，所以我们在做排版的时候，也需要认真考虑日期与整体需求的关系，并且日期排版风格也会影响整体的气质。
案例分享
案例实操
总结
文章来源：优设 作者：设计小余
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
接下来的访谈翻译自微软官方博客，微软的 Office 设计部门的两位主管 Jon Friedman 和 Deepak Menon 在访谈中聊了一下 Surface Duo 背后的设计故事：
在过去的几十年当中，数码产品制造商经常会为了适应用户的习惯和需求，来不断创造产品。我们倾向于让事物变的更小、更轻、响应更快、更具包容性。我们将不同感官融入程序，创造而优雅的产品。
随着日常生活节奏和生产力的观念变化，我们经常需要反思一个问题：如何赋予人们在创作和消费、专业和个人之间流畅切换的可能性？
即将发售的 Surface Duo 是一款独特的双屏移动设备，它有着一套专门为它的硬件所定制化的产品体验，而它的设计也折射出我们探索问题的方式。
对于设计师来说，创造这样的独特产品的机会是难得的，就像你在一个住了十几年的房子里面，发现新的房间一样。会打开的是哪扇门？会通向哪个区域？会延伸出哪些创意？
对于 Surface Duo ，我们想知道，它的两块屏幕会延伸出哪些全新的工作流程，它的接缝要如何处理，怎样减轻用户的认知负荷？
受多年来我们在用户研究上的成果所启发，我们通过软硬件结合的方式来进行 Surface Duo 的研发，让它能适合你日常的需求，还可以带来独特的体验，比如在双屏上并排打开文档。
Surface Duo 仍然处于起步阶段，我们知道，它还有很多待解决的问题，这也是为什么微软会引入更多的用户和设计师，来不断地完善它。
为了让大家更好地了解 Surface Duo 的设计历程，我们请来了 Deepak Menon ，他不仅参与了 Surface Duo 的研发和设计，还是 Office 设计团队的负责人，让他来告诉大家，Surface Duo 背后的创意、研究和设计决策。
Jon：谢谢你能来，Deepak，在过去的2个月时间里，我们一直在非常密集地使用和测试 Surface Duo~
Deepak：实际上，我干脆是拿它单主力机，现在我都觉得我已经不需要其他的任何设备了。
Jon：我们当然会这么说，毕竟是我们设计了它。但是，我想这也证明了一件事情，就是这种拓展式的双屏，已经具备应对日常工作的能力，并且贴合大家的需求了。
Deepak：对。这不仅仅是「2块屏幕智能手机」所带来的体验，它更接近于是一款「折叠式的平板电脑」的感觉。它是新事物，尽管是通过铰链和转轴来实现这种可能性。
Jon：我们接触 Surface Duo 的时候，我们首先想到的一问题是：人类还有哪些需求是未曾被实现的？人们在达成目标过程中，有哪些问题是需要工具来弥合的？我们要如何来帮助用户达成这个目标？双屏的这种形态，让我们有重新思考生产力的切入点。
Deepak：对，尤其是在移动端的生产力上。
在双屏界面下，使用 Office 在 PDF 文档上签名，然后使用 Outlook 发送出去，签合同的便捷操作。
Jon：确实，你的团队在中国和印度这样移动端优先的国家做了非常深入的调研。
Deepak：我们注意到很多用户在同一设备上执行并完成一系列的任务，他们需要更快地切换。同时，企业也正在倚靠我们过去认为非常「娱乐化」的媒介来进行必要的经营。
Jon：在过去，生产力有这非常清晰的定量标准，比如一秒生产多少零件。但是如今，生产力和创意息息相关，你的情绪状态和输出的内容是一样重要的。我们在不断消费又不断创造，反思和行动来回切换。其实这都涉及到一种倾向或者流程，你会按照一定的方式来处理信息，或者当你脑中突然划过一个想法的时候，你会想立刻构建或者制作某个东西，而这也需要一系列的操作和任务来支撑。
从整个数字设备的发展历程来看，双屏的设备可能是最适合处理这种带有步骤的「流程」。Surface Duo 最精巧地的地方，就在于它可以按照你的各种需求来折叠翻转和交互，可大可小，同时也是一款贴合你的口袋尺寸的设备。
在横屏模式之下，你可以像翻书一样浏览 Word 文档
Deepak：当然，它将内容消费提升到一个全新的层次，对于丰富内容的处理，Surface Duo 更加适合和专业。在 Outlook 当中，你可以快速浏览整个星期的工作安排，在 Word 中，你可以像翻书一样阅读内容。屏幕 折叠所赋予的空间让更多的信息有了自然的展现空间。
借助 Surface Duo ，创造性的工作也得到了增强。当我使用 PowerPoint 来制作幻灯片的时候，我喜欢在一个屏幕上编辑，在另外一块屏幕上预览，两块屏幕当中，一块帮我保持专注内容制作，另一块帮我统领全局。另外，我也会在屏幕上开启多个不同的应用。
将团队的视频通话和 PowerPoint 并列摆放，让你一边沟通一边查看内容
Jon：使用它来进行远程会议可能是我最喜欢的场景之一。我喜欢在开会的时候使用双横屏模式，将视频置于顶端，在下面的屏幕浏览文档。
Deepak：或者用另外一块屏幕来调用婴儿监视器！哈哈，疫情让我们和家庭的关系更加密切，Surface Duo 让我可以更多兼顾到家庭这边。
Jon：对，很多人认为在疫情期间，家里有这么多人，移动设备的使用量可能会降低，但是很多数据表明，情况恰恰相反（仅2月初到3月下旬，微软的 Team 移动端的用户数量就增加了超过300%）。就我个人而言，我不想一直待在一个房间里面，盯着一块屏幕，其他人也都反映，需要四处走动，或者在外面工作。当我开始使用Surface Duo 的时候，开始从中获得更为强大的支撑，获得更加有效的体验。
当然，它最优雅的还是在窗口的管理上。打开多个窗口是一种非常常见的 PC 体验，但是在单屏的移动端设备上其实还不算太普遍和舒适，但是在 Surface Duo 上则很自然。
Outlook 中双屏带来的额外空间让你可以更快查看相关的收件箱和日历
Deepak：关于用户如何使用窗口来提高生产力，有过很多研究，并且两块屏幕之间的天然接缝，或者说转轴，其实很自然地造就了「两块屏幕」和「多窗口」的认知。在某些情况下，因为接缝的存在，在两块屏幕上打开完全不同的两个应用，其实是非常自然的事情。
在很多其他的情况下，用户可能会在一个屏幕中打开一个新的程序，打开新的界面，执行单独的操作，或者通过一个程序，在另外一个屏幕中打开下一步操作，然后再在两个界面之间来回操作，这都是非常平稳的。这种被分割开的两块屏幕，创造了一种全新的交互契机，而不是制造约束。
Jon：对于 Surface 的软硬件团队，我最为欣赏的一点，就是这种共生和互相促进的模式。使用 Surface Duo，你可以拥有更大的屏幕空间，而且拥有众多不同的使用应用的新方法，而 Surface Duo 也正好可以适应各种各样不同的使用场景。而我们在创建这个产品的过程中，想要兼顾到如此之多的场景和需求，其实是需要两个团队亲密无间地协作，才能做好。
对了，你刚刚说道关于照片、视频、语音等内容——这些输入方式的协作，对于创造性的工作到底有多重要？
Deepak：的确，在移动端设备上，摄像头和麦克风是必不可少的。我们希望最大限度地让 Office 最大限度地利用这些传感器，在移动地使用过程中进行协同。用户在通勤过程中如何参与到线上课程的互动？老师如何更快地给孩子批阅作业，家长要如何协助孩子？其实，Surface Duo 在研发探索的过程中，就有意识地在兼顾这些场景和问题。
从媒体库当中，将媒体拖放到 PowerPoint 当中
Jon：我喜欢这些富有包容性的解决方案。人们的学习方式和工作方式通常是截然不同的，这些自适应性良好的输入模型，能够帮助能力各异的用户完成他们所需的工作。
Deepak：当我们将新的输入模型和智能化的功能结合到一起的时候，有趣的事情就开始发生了。我们几乎还没有涉及到创作方面的内容，用户就已经拥有很多契机自由发挥，他们可以轻松、清晰地借用这种交互模式来表达自己。比如可以更加顺畅地利用模板来制作精美的 Word 文档和 PowerPoint 。
Jon：物理世界中有太多东西，我们可以将其逐渐的数字化。
Deepak：的确，将智能化的程序和多样的传感器耦合到一起，提高生产力的方式有很多——无论是提升工作效率、家庭安全性还是让内心更加平静。其实第三方开发者身上，我看到了更多思维和想法的延展，以及可能性。
Jon：对，我们已经看到很多非常有趣智能的东西了！在 Microsoft Hackathon 大会上，有人为 Surface Duo 设计了一款双人游戏，两个玩家各占一块屏幕，隔着转轴来来操作，彼此面对面，非常有趣！
Deepak：确实如此！
Jon：我们很高兴 Surface Duo 最终能够面向普通用户，我很期待它最终会在普通用户手中会迸发出怎样的创意和灵思，他们能够构建出什么样的创新软件。
Deepak：有太多值得期待的东西了 ！
译者按：
微软在硬件产品上，有着丰富的翻车历史。90年代的事情太过久远姑且不说，最近十几年，出过很多比较失败的产品，比如上架仅 6 天就全线下架的时尚社交手机 Kin One 和 Kin Two，比如被支付宝团队戏称为「1%」的 Windows Phone 系统和手机，比如几乎不存在兼容性的 Surface RT 系列的平板电脑。这些硬件我全都买过，可以说全是坑。
这些产品单独来看是失败的，但是放在更长的时间跨度上来看，却又是微软整个生态和产品链条的构成和发展上，不可或缺的部分。Kin One 是整个 Metro 设计美学真正成型并走入移动端智能设备的里程碑（之前仅用于Zune系列播放器上），Windows Phone 则是 Windows 系统向小屏幕探索的必经之路，而 Surface RT 固然失败，但是它是带着桌面端 Windows 系统从传统 X86 架构走上 ARM 的一次大胆尝试。
失败总是难免的，而微软这种大厂更是有着试错买单的底气。从内部设计和产品团队各自为战，到统一到一个部门来统一管理，Surface 系列产品的诞生就是分水岭，而这件事情是在 10 年发生的。
当然，在此之后翻车的产品依然会有，但是成功的概率比起更早的阶段（比如应对 iPad 诞生时，仓促推出的触摸屏PC），已经提升很多了。
如今只剩下拼硬件参数数字产品的世界简直是太无聊了。我很期待 Surface Duo 这类双屏折叠硬件能带来改变。
文章来源：优设 作者：Jon Friedman
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这并不是一篇关于设计趋势的文章，而是一篇关于基础的设计准则的文章。如果你是一名 UI 设计师，无论你经验是否丰富，有些设计的基准是需要保证的，有些容易遗忘的细节，需要借助速查清单来进行走查优化。
这份优化 UI 界面的速查清单，就是帮你搞定这件事情的。
首先声明，一个项目中最好不要使用超过2种主要字体。不过这种原则已经广为流传，就不多说了，下面说说更细节的事情：
纯大写的字母文本，要额外拉开字母之间的字间距，提升可读性。
字重超细的字体要谨慎使用。可以使用浅色，但是要根据字体情况进行选择。如果你设计的文本是装饰性也就算的，如果是需要用户能清晰阅读的，就要特别慎重，能不用就不用，否则在部分手机屏幕上看起来会非常糟糕。
先说说网页排版。标题通常分 H1 到 H6 总计6个不同层级，但是通常不会全部用到，你需要确保层级最多不超过 4 个，并且控制它们整体的逻辑和一致性。网页的首屏和登录页面上的大标题，可以用最大的那一级，毕竟，富有表现力的视觉排版是当下趋势。
但是其他的文本不要和这个标题文本差距太大。英文文本以Chrome 浏览器为例，正文使用 16px 和 17px 这种大小，并且保留 12px 文本作为最小文本。
另外，同一个段落中，不要同时使用 16px 和 17px 这样相近又不同的文本尺寸，会让用户感到迷惑。
尽量不要在行高上采用自动行高。通常，现在比较流行的做法，是将行高拉高一些，确保整体版面的透气性和可读性，尤其是涉及到大量文本的时候。
在需要突出显示的部分使用粗体。标题、链接、按钮都在这个范畴内。如果将粗体样式应用到全部文本，这样重点就不突出了。
请特别注意文本的色彩。控制好对比度，确保任何类型的显示器上都可以清晰阅读。在设计占位符文本的时候，这个问题特别突出。
留白对于整体设计的重要性是毋庸置疑的。留白的变化有助于设计师理清元素之间的关系，提供节奏感，增加平衡感。
将一个语义块和另外一个语义块分开，最简单的方法就是在两者之间增加一条 1px 的线。但是这并不是最好的方法。
我见过不少设计作品中，界面中一个又一个线条绘制的盒子相互嵌套，复杂无比，每个盒子都是用 1px 粗细的线绘制的。但是，如今的UI界面上基本不用这种手法了，大量的卡片替代了以往的各种「盒子」，通过投影和间距来控制卡片之间的关系。
边距有助于从视觉上来判断元素之间的亲疏关系。当我们考虑一个新闻资讯卡片的布局的时候，它包含有一张图片、一个标题，还有3~4行预览文本和发布日期，那么应该如何分组和间隔？标题和文本应该是一组，这一组和图片、日期的距离更远一些。听起来很令人困惑？看下面的图片你就理解了：
总会有客户或者产品会想把所有的功能和元素都怼到同一个页面或者 APP 当中。这个时候，要你让标题、菜单、文本、特价优惠、社交帐号和电话号码都齐齐整整地塞到一起，同时还要给每个组件搭配上图标。
说真的，这种问题总不能避免。这个时候可以使用这个理由来试图进行沟通：用户一次接收的信息越少，进行有效操作的可能性就越大。循序渐进地呈现信息，能够让人更加愉悦，用户对于信息的接受性也更强。
用户永远都不会费力巴拉地去拆解和分析你的页面布局，紧密局促的布局也早已不符合主流审美和日常需求了。
如果你设计的是海报、Banner 或者是 卡片 等我们所熟知的视觉元素，那么请注意边缘留白的设计。如果按照经典的方式来布置（从左上到右下），那么尽量让上方的留白更大，这看起来会让视觉更加稳当，并且更加具有视觉吸引力。
Logo、图像、图标、背景这些元素决定了整个设计给人的情绪。所以在设计的时候，需要有针对性地挑选和优化。
我并不经常做 LOGO，但是在我的职业生涯中也起码做过 20 个LOGO。我的经验是：好 LOGO 很难制作。但是设计师只要遵循基本的原则，就能创建出像样的 LOGO。
比如仔细选择配色。我有一次看到一家名为 「VIP catch」 的钓鱼用品店，他们使用了紫色的 LOGO，从名字、配色到色彩的选择都和钓鱼这个场景没有一点关系。如果选对配色，有针对性地加入一些和钓鱼相关的元素，其实也就好了。
另外就是，如果你时间有限，就不要试图给品牌 LOGO 设计一个特定的符号或者图形了，因为真的很难做好。最好制作成文本 LOGO，通过微调字体来制作。
元素下方的阴影一定不要用黑色。始终基于表层的、前景的元素来选取阴影的颜色和明暗。通常，一个看起来舒适的阴影是通过多个阴影叠加造就的，一个小且明确的阴影，位于正下方，另外一个阴影模糊且弥散，透明度更高。
任何可以矢量化的元素，都尽量制作成为矢量的。从符号、箭头到 LOGO ，现在都最好制作成为矢量 SVG 格式，方便开发人员嵌入到设计系统当中。PNG 图标的边缘模糊，在清晰度越来越高的视网膜屏幕上，矢量图形元素不仅更加锐利，而且消耗更少的系统资源。
如果你正在为网站处理一组图标，请尽量确保这些图标在视觉风格和细节处理上是统一的，看起来是同属一个「家族」的。这意味着图标的笔触宽度、边框半径、视觉重量都应该是一样的。
除了上面的几个常见的要点之外，我还要额外补充几点，它们很难直接归结为一类，但是同样重要。
很多 UI 界面元素在过去多年的发展过程中，已经形成了认知广泛的「最佳实践」。如果在设计这些 UI 组件的时候，采用打破甚至彻底违背「最佳实践」的做法，比如将图片+标题+ 文本 的顺序打乱，可能会让人感到迷惑。
熟悉的设计并不意味着无聊，你总能够在 UI 界面的一些地方找到发挥创造力的地方，而不是在这些有着清晰规则的地方搞创新。设计师和艺术家是截然不同的职业，在设计过程中，创意冲动应该在不干扰用户体验的前提下，进行发挥。
在设计移动端 UI 界面之前，应该和开发人员进行充分的沟通，这一点很重要。iOS 和 Android 端的 APP 的尺寸还相对固定，但是如果你设计的是移动端的网页，那么可能涉及到的页面尺寸就非常多了，这个时候就要用到断点非常多的网格系统来进行响应式的设计了。
Lorem Ipsum 在中文中叫乱数假文，它是自动生成的一种占位符。在如今的设计领域当中，直接使用乱数假文看起来非常不专业，因为无论是 Sketch 还是 Figma 当中都有太多的插件，可以帮你生成符合语境的占位符内容。在此基础上还有另外一个要点，就是展示性的组件内容也不要简单地复制，尽量使用不同的图片和配色，让它们看起来更加真实。
这份UI快速检查清单目前是比较符合当下 UI 设计行业的需求的，但是它并非是教条，在特定的情况下，你可能不用遵循它。当然，在多数时候，这份清单能够帮你让设计更加优秀。
1、字体版式
1.1、注意大写
1.2、注意超细体的字体
1.3、标题和正文字体尺寸
1.4、行高
1.5、文本和标题的层次结构
1.6、文字对比
2、间距和边距
2.1、去掉多余的框架和线条
2.2、梳理从属关系
2.3、少即是多
2.4、屏幕边缘留白不均匀
3、配色和图像
3.1、关于 LOGO
3.2、阴影
3.3、图标和图像
4、其他设计常识
4.1、避免使用怪异的布局
4.2、布局尺寸和参数
4.3、乱数假文
结语
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
