构图是在有限的空间内把文字、色彩、图形等元素结合起来构成画面，使作品不仅具有美感，还能清晰表达设计者的目的。不同构图能使画面产生不同的视觉变化，进而给观者带来不同的心理感受。同的心理感受。本期分享的是上下构图的使用方法，此构图形式具有良好的视觉效果，也比较容易掌握，是非常实用的构图方式。
上下构图形式是将版面分割为上下两部分，或让画面中的元素整体呈现出上下的分布趋势，主空间承载视觉点，次空间承载阅读信息，呈现的视觉效果平衡而稳定。
最典型的上下构图由「上图下字」或者「上字下图」两部分构成，图片及文字各占据一部分，互不干预，能清晰明了的传达出版面的信息。
主空间还经常使用图形化的标题文字充当画面主体，可以很好解决画面缺少图片层级的问题。
上下构图空间划分比较固定，为了得到丰富的视觉效果和良好的设计感，需要通过精心设计的编排来丰富版面的视觉效果。比如文字的横竖排版，元素之间的对比、点线面的运用、巧妙的留白等。
进行上下构图设计时，可以根据版面内容的信息体量划分画面的空间，常用的版面分割比例有：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界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
之前我也无意中看到饿了么把「超级会员」改成了「吃货卡」，感觉还不错。虽然并不了解饿了么的会员业务，但这次改版体现了一些有趣的设计思路，正好对应了我们在设计上的疑惑点。于是就着该读者的问题，一起来聊聊其中有意思的点。
比如，如何在同质化的功能上做出一些创新且有价值的改变；如何降低营销感，把商业需求统一到用户需求上；如何不需要再纠结今天到底吃什么了……
我们「以为」的，就是真实的吗？
今天的文章，从一张图开始。
在《认知与设计》的第一章里，作者提到了关于感知的话题，在影响感知的几种方式里，第一种就是「感知的启动」，其中很典型的案例是下面的一张素描，你能看出画面中是什么吗？
一条斑点狗。
或者你没看出来？如果你看到了这只狗，就很难再回头把这张素描看做随机无序的点了。就像书里说的那样，我们看到的很多东西取决于别人告诉我们它是什么。
产品功能也是如此，它告诉了我们这是什么，我们就会这么认为。如果一开始设计的就是吃货卡，也许很多人不会想到它是会员的变体，而是仅仅当做一个福利卡来看了。对于超级会员和吃货卡的感知差别仅仅在于定义上的不同，而非本质的改变，这是很有意思的一个点。
拿生活中的一个例子去看，相同的杯子，我们可以叫它咖啡杯，同样也可以叫它养生杯，当面对不同的叫法时，我们是不是就会产生不同的代入感？
而产品大多数时候都是通过渲染场景、营造氛围来达到这个目的，我们通常将其称之为产品定位。
所以产品需要定位，需要一个鲜明的形象，然后让产品中的所有信息、功能、风格、色彩都去表现它，才能树立起用户的认知，带来深入人心的记忆点。于是，相同的功能在不同产品中的差异除了内容的填充、使用的方法、规则的定义外，还可以改变的就是 —— 包装。
就饿了么这次改版的「吃货卡」而言，它本身并非一个新功能，只是「超级会员」的一个变体，会员的本质就是产品根据用户的投入而给予的特权。所以产品只是集合了这一部分有投入有特权的群体罢了，至于怎么称呼，会员也好、吃货也罢，在产品层面都是一样的。
会员，官方的解释是：通过正式手续加入某个会社或专业组织的人。
在任何地方，我们都可以成为会员，但不是任何地方，我们都能变成吃货。所以吃货卡这个定义，一下子就把强烈的产品属性透传了出来，并联结了我们的目标用户，会员的「积分」也自然地转化成了「吃货豆」，这种概念上的改变，就是一种包装。
这是我在这篇文章中要聊的第一个点，就是通过品牌塑造来重新包装一个功能，而包装的形式要依附于产品定位。
第二大点，我们来聊营销广告与产品功能的碰撞。
在广告滥用和形式多变的今天，我们已经逐渐习惯至无感那些具有丰富色彩和设计元素的广告内容，以至于可以自动筛选出它们，打上标签，从我们的视觉中过滤出去。
但总有一些广告似乎天生具有一种隐秘的商人气质，带着精明的窥探，去诱导大家浏览、点击、分享、消费。
广告是产品的一种营销语言，而营销有时就是让利，以广告的形式，通过优惠与福利来抓住用户的心，而用户往往会认为这是欺骗。那么当商业目标和用户目标无法趋于一致的时候，我们又该如何让用户为产品站台呢？
首先，对于广告的刻板印象常源自我们接触广告的失败经验，其大致可分为三类。
第一类「虚假利益」。夸大好处，或拿非最终的利益引诱，直到我们了解了详情才发现自己是个被骗的傻瓜。
于是，产品通过弱化营销性的信息流广告，并加上清晰的广告标签，公开透明的让用户感受到自己被平等地尊重，即满足商业利益，又解决了用户的诉求问题，将两者利益统一。
但这一类并不是我们今天要聊的重点，我们继续往下看。
第二类「难度操作」，比如那些假的关闭图标、广告背景中极小的跳过按钮、或者在领取福利时的层层步骤，都是用户在接触广告时难度操作的体现。
前两种对用户来说无法原谅，而最后一种往往会作为一种营销策略，去增加用户获得奖励前对产品的投入，比如浏览、转发、消费等，这是没有问题的，关键是用户是否提前获知了我们得到奖励的所有条件。我们厌恶的，是超出我们预期的那些负担任务。
吃货卡的任务模块在优化后就直接展示了任务详情。但是首页领任务的提示却隐藏了任务的重要条件，比如「下 2 单，赚 400 吃货豆」，实际是两笔超 20 元的订单。那是否会存在一类用户，没有点击查看详情而直接下单，下单之后，发现并没有完成进度？因为外卖费用没有超过 20 元。
如果产品是担心用户因为 20 元的门槛而不做任务，那么在点击查看后的任务详情不是把这一类用户推向进一步的否定吗？我们因这样的手段能够额外获得多少增长，同时，又有多少用户因此对所有的任务失去信任，我们无法准确计算，因为得到是显性的，而失去是隐性的。比如一些音乐产品的会员机制，用户办理好之后想听某首歌，发现还需要另外再付费，于是卸载了软件。
另外，改版后吃货豆的领取方式也对应发生了改变，不是直接的发放，而是转为点击领取。
虽然趣味的动效消解了部分用户对冗余操作的厌恶感，但还是能从反馈渠道中看到用户对这种强制限时去领取奖励做法的反感。这种领取模式也可说是一种变相签到，只不过这种签到的奖励不是你通过额外行为主动赚取的，而是在已经得到的情况下被迫操作领取，和支付宝领取积分的方式一样。限定时间内不领取，还会消失。
游戏积分的领取，之所以有领取操作，是因为积分积攒的宝箱奖励，是额外的收获。玩家玩游戏的目的是体验游戏而不是为了积分与宝箱，这两者之间是有差异的。
多余的操作看起来增加了页面的曝光度，带来了更多的转化可能，却「实在」地提高了用户获得奖励的成本，从而间接降低了奖励的价值，因为投入产出比太低，所以用户常常宁愿放弃这样的奖励。
产品想要让用户感觉到方便和实惠，体验满意，但又通过这种点击才能领取的方式，强制绑定用户与页面，来触发用户的下一步行动。表面上可玩性增强了，实则是体验感的缺失。
第三类是关于「过度选择」。交互设计有一本经典的入门书籍叫《Don’t make me think》，描述了如何通过设计帮助用户理解与操作，来提高产品的易用性。同理，当我们思考营销在产品中的表现时，难道就不需要考虑用户了么？
过去的营销就像过去的产品一样，以产品实现而非用户为中心，表现产品的实现方式而不去考虑用户的心理模型。
比如软件需要我们命名才能保存，特别是系统自带的记事本软件，不仅需要自己输入文件名，还用 *txt 占了命名位，使用星号让我们无法直接保存。相比之下，很多软件已不再需要用户命名，会直接提供默认命名，还有像 Typora 这类产品，可以自动将我们的第一段文本内容作为默认文件名。
对营销而言，以实现为中心的设计想法体现在制造了尽可能多的活动类型和规则上，希望触达不同的用户。而事实是，在过度选择的压力下，很多用户直接选择了忽视。
如果去看饿了么会员旧版的设计，我们会发现它有红包、奖励金和折扣商品三类福利，三者的关系是相对分离的。
其中的规则是，当我们成为了会员：
所以我们有三种获得红包的途径：领取、购买、兑换。
再看新版吃货卡的设计，在直接领取与购买红包不变之外，新版强调以用户的消费去获得奖励，不管是直接兑换红包或者兑换店铺的专属红包，都是以吃货豆兑换为核心。相比旧版，将商铺折扣商品，替换为吃货豆兑换专项红包，其实本质是一样的，无非就是为了提高吃货豆与吃货卡的利用率罢了。
在这样一个前提下，产品增加了红包类别，给予了用户更多选择的自由。虽然随着红包的分类维度变多（专享和吃货联盟的红包、特定品牌和分类的红包、具体店铺的红包），产品的规则趋向复杂，但是理解变简单了，我们也只需要做好兑换这一件事就可以。
复杂的规则仍然可以呈现出简明的设计，我们不需要用户来负责过滤这些复杂信息，而应当要求产品，站在用户这边，去降低理解成本。自然地，产品与用户就能并轨而走，商业需求与用户需求也可统一。
当然，或许也会有用户反感这样的功能被活动化，但不得不说，这确实是一个品牌的升级。
这篇文章从几个角度聊了「吃货卡」好与不好的地方。
当然它不仅仅是一个会员功能的改版，在概念玩法上也是一种升级。从设计角度看，确实有创意的表现，虽然也有不可取之处，但是它背后的设计思考是值得学习的。
我们知道，设计虽然会受到许多框架和规则的限制，但从问题出发，思考方案的过程才是设计本身最有意思的地方。好比游戏，也是因为规则与框架的限制，以至于才有了如今丰富多彩的游戏形态。
所以即使看向那些常规的功能和成熟的设计，我们也可以融入一些不一样的东西，站在过去到现在的经验上，再做出一点改变，使其更具可玩性。
文章来源：优设 作者：呆呆U理
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
2020年已经过去一大半，这些时间以来，我一直在关注数字设计领域未来的设计趋势。从年初就开始收集，到今8月份了，我想是时候将发现的一些趋势风格分享出来，这些风格很有可能继续延续到2021的产品设计上。
对于UI界面视觉趋势，同样需要我们高度重视。毕竟每年改版方向，视觉风格研究是必不可少的一个环节，下面正式开始。
今年在各网站上看到大面积的渐变色设计，相对前两年来说越来越少，设计上有所克制。大面积的渐变色虽然视觉冲击力强，但大部分停留在概念中。
从今年设计中我们可以看到设计更加理性与克制，将渐变色彩运用到关键功能上，突出强调重要信息。
机票选购界面，将渐变色运用到头部位置去强调功能。
运用在功能卡片上，突出重点信息。
如上图，设计上同样只将渐变色运用在背景上，其他卡片上基本没有渐变色。
几何图形设计是目前运用最多一个设计手法，今年发现一些比较抽象艺术化包豪斯风格几何图形，在UI设计中大量运用，且效果还不错。
这种图形带来好处就是记忆性强，应用广，它不仅可以拓展在品牌包装，品牌图形延展，还可以运用在UI设计中。
卡片设计采用一些具有意向符号的图形，来表达功能的设计，形成记忆点。
品牌设计上，也是重复这种极简包豪斯风格几何图形。将logo元素提取，进行包豪斯风格化，重复运用在设计中。
今年这样的设计屡见不鲜，大量3D运用在界面设计中，二维的界面已经不再满足当前设计需要。设计师去探索更多维度学科与UI界面融合，形成一种全新的视觉感官。
uber的概念官网就通过3D来呈现，表达功能亮点。
将二维世界三维化，将是2021年重要的趋势。目前国内外线上有一些产品，开始在部分功能模块使用这样设计手法，如Naver，支付宝等。
可以说是趋势轮回，毛玻璃的效果又回来了。这也是今年在各网站设计上出现频次多一些的设计。
新的毛玻璃效果更加去注重功能说明，用在视觉强调的地方。
如上图设计，毛玻璃运用在顶部关键信息上。这样设计即可减少其他色彩运用，还可以对功能信息进行强调。
毛玻璃效果运用在个人中心，人物头像位置，进行设计强调。
运用毛玻璃去包装UI界面，可以提升品质感与神秘感。
将功能与场景融合设计，用户在使用产品过程中，能产生更多情景体验感触。这也是最近今年喊的比较火的一种设计思路。在各网站上，这样设计出现次数越来越多，设计效果冲击力强，得到很多设计师的认可。
场景中关键人物元素与设计进行巧妙集合。
运用超现实设计手法，将人物与酒店场景进行排版布局。
将制作材料与产品集合。
拟真植物元素与土地进行巧妙集合，在视觉上传达逼真效果。
杂志化设计风格鲜明，可以有助产品去打造强化记忆点。杂志化设计的优势可以不受到网格约束，排版使用大字体，同时设计排版上更加个性。我们在做产品概念探索前期，可以多去尝试这样的风格。
拟物图标又回来了，Apple新版本的Big Sur系统，就采用拟态图标，这也是一个新的尝试，当然也是一个开始。我们很有必要时刻关注这个趋势，未来将会在更多设计中看到拟物化图标的出现。
不过这种风格也不能大面积运用在界面中，我们可以运用在一些关键功能入口设计上。
在天气上的运用，相对之前扁平化设计，目前具有空间的拟物化设计，增加了真实感。
圆形趋势，我想大家也许会忽略的点，最近几年设计中，圆形的设计无处不在。它的好处不言而喻，亲和力强、场景覆盖广，几乎任何设计都能去用圆形。因此我们有必要去注意圆形运用技巧。
星巴克的web UI概念设计，采用圆形与产品进行集合设计排版。
新拟态趋势是2020年受到广泛关注的趋势之一，这种趋势大量使用了柔和的阴影和微弱渐变，使设计既具有未来感又具有现实感，并且为熟悉的界面带来了新的感觉。相对之前大面积浓厚阴影而言，目前新的简化拟态界面，会克制使用这些元素。
2021年拟态界面，更注重功能与体验。拟态效果会使用在关键功能上，如仪表、按钮，又或者需要重点强调的地方，避免了大面积使用这种设计手法。
2021年的趋势相对来说，有继续延续2020年一些设计风格，这些风格将会在继续加强，同时我们也有发现，目前越来越多3D元素与二维界面进行集合设计，能更生动传达功能与将故事，2021年大家务必要注意这种趋势的延续。
作为设计师，我们对设计的思考不能只停留在表象层面，而更多的需要围绕信息传达这一设计的本质功能，以充满自省的精神深化和反思自己的设计意识，同时要时刻保持对趋势的敏感度。将新趋势合理的运用在产品设计中，以产生最大化收益。
文章来源：优设 作者：功夫UX
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
很多时候，设计师需要在公开场合借用幻灯片演示设计作品，或者给客户展示的设计方案，又或者是需要在文章当中，展示作品，选取配图。如果你希望你的展示和演讲更加具有吸引力，那么可能需要针对这些视觉素材进行处理，让你的观众或者读者，被内容吸引，被信息打动，能够 Get 到你所要表达的东西。
今天这篇文章，梳理了 20 个对关于幻灯片/演示文稿的处理技巧和经验总结，希望能够帮到你。
在创建任何用来展示的幻灯片之时， 你首先要搞清楚一个问题——你的目标或者目的是什么。明确了这一点，才能做好下一步的设计。
除了了解自己的目标，你还要搞清楚你的观众或者你的受众是做什么，有什么特征，对什么感兴趣，会具备什么样的动机，这样你在设计的时候，才能够更加具有针对性。如果是甲方，那么甲方是什么样的人？你是否要提供一个具有代入感的故事，在最后再进行报价是否合适？搞清楚观众，后面的问题你就有答案了。
如果你的幻灯片准备得过长，那么最好大概每20分钟就需要中断，适当休息一下，或者调整演示内容的媒体形态，让你的听众可以借此修整，并重新集中注意力。
讲故事能够更好地同用户建立联系，保持用户的参与感，集中注意力。如果用户无法集中注意力，那么你的展示和设计做得再好都没有用。你可以参考一些常见的、有效的叙事框架，拿捏好关键的因素：
关键角色：客户、用户、组织、团队等；
核心问题：挑战、痛点、风险等；
框架指南：产品、公司、服务等；
完整历程：解决问题的愿景、具体执行计划等；
抵达成功：光明的未来、最终的成就等；
这意味着，如果你的幻灯片当中的内容，下面的观看者无法在 8 秒内消化，那么它可能就失去效果，并且用户会快速分心。
幻灯片要简短，不要让它像书本一样堆满信息，你应该提供最快速有效的简短展示，减少文字，增加辅助的视觉效果，帮助用户集中注意力。
如果你的文本内容无法进一步增减，那么你需要做的就是梳理出它的层级关系，让字体的层级来辅助观看者更快 Get 到其中的信息。我们习惯于快速扫视，而不是逐字阅读。
凸显重要内容，控制好字号大小，排版结构，让观看者能够清晰阅读内容。过于鲜艳的色彩会产生视觉频闪，对比度过低会让可读性极差。
在实际的展示的过程中，展示者在电脑上看到的，和最终在大屏幕上演示的内容是不一样。演示给下面观众的内容一定要简约直观，而更多的辅助信息只需要显示在展示者自己的电脑上，作为提示即可。
提取最重要的信息点，使用更大的展示性的字体来呈现，这是有助于让这些信息脱颖而出的，而不是简单地、没有筛选地铺陈出来。
信息图和简单的数据展示有着极大的差别，信息图所展示的信息更易于被观看者理解和吸收，使用信息图还能让整个展示过程更加视觉化、富有创意。
我经常会听到这样的要求：「这套幻灯片只能有7个页面，同时我们不能删除任何内容。」
千万不要将内容塞到固定数量的幻灯片当中，那是没有任何意义的。一套用来演示的幻灯片的数量应该是可以增删的，它们的数量取决于你所要展示内容的多少，以及呈现的方式。对于绝大多数的展示和演讲而言，20~30 张幻灯片是一个合理的数量。
留白是制作幻灯片时最容易被忽略的元素，通常而言，我在修改幻灯片的时候，将留白的空间放大三倍，视觉上的呼吸感就正正好好。
好的图片素材，通常会有着相对充沛的感情和自然的叙事。在你的幻灯片当中，需要采用更加富有真实感的照片，以营造真实的叙事感。不幸的是，这种设计知易行难，绝大多数的图库所提供的照片都缺乏这种应有的真实感。当然， Unsplash.com 所提供的照片，相对而言会好一些，而且是免费的。
影响幻灯片视觉样式的因素有很多，主题、受众、品牌等等等等，都会有影响。但是不论情况如何，你都应该让整个幻灯片所采用的字体、图标、配色、插画的样式始终保持一致。其中，最常用的方法是定义整个幻灯片的模板，来协助你保持一致性。
不要把幻灯片用信息全部填满，可以在其中插入一些可以帮助观看者「中场休息」的幻灯片，它可以起到过渡作用，也可以帮助观看者不用一直紧绷着情绪。
转场动效和动画可能会成就你的整场演示，也可能让它沦为一场灾难。我的建议是，尽量让动画和动效微妙一点，让它们紧贴内容，对信息提供支撑，而不是喧宾夺主。
对于较长且复杂的演示，让观众看到进度条，了解整个演示的进程是非常有必要的，当他们感受到演示的进程，就能体会到掌控感和安全感。
做好幻灯片之后，一定要自己排练一下整个过程，走一遍之后会让你对于整个演示过程中，哪里有问题，哪里要改进有更清晰的认知。借助排练来排查问题，迭代展示，非常有必要。
当然，设计幻灯片和设计 APP、网页是截然不同的，但是设计思维层面上，这几个领域确实完全相通的。你可以借用各种设计规则和方法来将幻灯片设计得更加合理优秀。
文章来源：优设 作者：Taras Bakusevych
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
你平时填写过的最复杂的表单是什么？调查问卷还是文档信息录入？如果一个表单字段内容巨多，结构多变，填写耗时耗力，那你将如何设计你的表单，使之体验更佳？
1. 业务复杂，功能较多；
不知道大家是否看过法律合同之类的文件，多则好几箩筐，少也有厚厚一叠，类似的文档如果进行线上结构化，势必要同样要花费巨大的人力去填写表单，完成基础信息的录入工作，同时，由于录入的时间不确定，流程不明确等问题，也制约着表单的填写。
2. 流程较长，操作繁琐；
多个不同表单之间的互有关联又相互区别，填写的时候需要来回查看以确认信息，查阅和填写相互并行，操作繁琐。
3. 字段较多，关联项较多；
几乎每一个字段都有对应的关联项，每个单选字段的不同项决定不同的内容，同时，由于字段数量，层级划分不明确，会使填写的人失去定位，产生迷惑。
1. 内容分组，分步填写；
根据业务内容分级，合理运用颜色、间距、字体大小、卡片层级等进行信息分级
2. 实时保存，避免数据丢失，提供草稿功能，避免任务中断；
3. 字段分组，示意结构，联动项隐喻；
4. 信息自动带入，节省时间；
一般表单是与某项功能挂钩的，信息会在多个入口录入，因此在填写长表单的时候，如果能从系统中自动获取到数据，就可以自动为其填充，可根据业务场景，判断是否让其修改和更新。
5. 提供二次编辑功能，防止信息输入有误；
一般的长表单在涉及非审批流的时候，可以让其无限二次编辑，如果是处于审批流，则需要根据业务场景限制其编辑次数或者限定其编辑规则（草稿可编辑，一旦提交则不可编辑）。
6. 提供多人协作编辑功能；
如果一个长表单，需要多个不同的业务域的人来填写，那么需要协同编辑，并实时显示编辑的人员信息，同时，为了避免信息丢失和编辑错乱，在同一个表单下，同一时间应该限制只允许一个人进行编辑，等其提交完后，可允许其他人进行编辑。
7. 实时检验；
前端实时校验字段输入规则，后端统一校验信息交换规则。
比如对于数字输入框的校验、电话号码的校验、身份证号的校验，应该在前端实时完成，在鼠标离开焦点区域或定位到下一个字段的时候，提示其填写有误，这样做的目的是减少后续修改的次数，在长表单下，统一提示其填写错误会是一场灾难。
在点击保存并填写下一步或点击提交信息的时候，就需要跟后端交换数据，验证录入的信息，如果不匹配，则提示错误，并从上至下定位至相应的错误字段。
8. 做好填写引导功能；
要通过多种方式，引导表单的填写，
在开始填写之前，简要说明该表单的业务目标，大概需要花费的时间等；
开始填写后，关于每个字段的特殊说明，都需要标注出来，重要的要显示在页面上，不重要的就收起在注释符号中；
填写的过程中，切记不要到最后才告诉用户哪里出错了，重要的信息一定要提示到位，否则一旦出错，前功尽弃；
填写完成后，引导其下一步的操作，或者返回至列表。
9. 详情页也需要注意信息分级
表单填写完毕后的产出物就是详情页，详情页是需要浏览的，因此在设计详情页的时候，应该本着让用户浏览方便的原则去设计，需要注意以下几个点：
结构清晰。是指不要将内容一股脑的全堆在页面上，要做好信息的分类，同时，注意规划页面的层级。
设置快捷导航。如果一个表单是长且复杂的，那么其对应的详情页也会变得复杂和冗长，因此在页面的右侧或者顶部设置合理的快捷导航是很有必要的。
1. 提供快速返回顶部的按钮；
快速返回顶部按钮的使用要注意场景，如果你的页面比较长，且没有分组浏览的导航，那就需要设置快速返回顶部的按钮，但是在存在分组浏览导航和顶部悬浮标签的情况下，不建议使用快速返回顶部的按钮，因为在填写表单的时候，使用快速置顶的场景比较少。
2. 提供分组模块收起展开功能；
当一个模块混杂着各种信息的时候，单纯的模块分组已经无法处理它的复杂度了，因此需要收起高频且信息量大的模块，可以合理的减少页面的复杂度。
3. 步骤提供信息填写完成度提示；
步骤条可以单纯的作为步骤指示器使用，也可以作为一个表单完成度的提示区域。
4. 重要说明性文字尽量显示而非收起；
在填写大量字段的表单时，阅读表单内容和填写表单同样耗时耗力，如果我们将所有的提示信息隐藏在提示符中，一般情况下，用户不会去查看，但是如果去挨个查看提示信息，则会多花费一个步骤去点击或者悬停来查看提示信息，浪费了大量的时间，因此如果涉及到重要的提示信息，请直接展示在字段的后面，不要隐藏起来。
5. 产品内组件应该规范统一；
在后台产品上，关于组件的规范统一，想必是人尽皆知的设计原则，无论是各类平台型设计组件，还是各个公司自造的设计组件，保持统一和规范对产品设计有着重要的作用，在这里不赘述组件应该怎样规范统一，因为无论是Ant Design还是其他设计语言，都有详尽的关于组件的定义方法，我在这里讲述一个产品设计更高层面或者更深层面的原因：
组件的规范统一并不仅仅是为了省时省力，而是为了使用户在使用的过程中达到认知上的统一和行为上的统一，在进行高频次的操作后，界面的流程或者组件样式已大致在用户脑海中形成固定印象，因此在操作相同类的流程时，用户会有更多的掌控感，试想一下，如果你在操作人事相关的流程后，去填写绩效部分的内容时，发现一个迥异的界面或者弹窗，你肯定觉得这是不是哪里出错了，甚至会怀疑这是否是同一个系统，目前大多数公司的管理系统经过多次缝缝补补，内部的跳转逻辑已经异常感人，界面风格也大放异彩，但是使用起来却无从下手，深感迷茫。
因此大到界面样式，小到间距大小，产品设计的规范和统一应该是最基础又不可缺少的原则。
6. 庞大的信息录入，表单内部要分步填写，外部可拆分成不同的表单分别填写；
对付复杂的表单，你需要解决的主要问题并不是填写方式或者页面设计，而是信息分级和结构拆分，解决了这个问题，基本上就解决了业务问题，其余部分就跟我们常用的表单一致。
将复杂度降低并不意味着减少页面的信息，而是通过设计师合理的信息划分，降低视觉上的复杂度和流程上的复杂度，这样才会达到当前场景下的「最佳解决方案」。
随着互联网信息化的深入发展，复杂是避免不了的，我知道大家都推崇简洁的设计，但那只是对视觉和样式的定义，而非对信息的定义，我们所处的世界是复杂的，行业更是复杂的，信息的复杂度与日俱增，想要处理复杂的信息，就需要从复杂中寻求规律，这规律与业务息息相关，
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
