如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
即使是进的技术，也通常有一个非常原始的起点。从最初的手机到如今大规模普及的智能电话，其实经历了差不多30年的演变。
随着硬件设备和各种技术的逐步成熟，每个人都想知道技术的下一个变革在哪里。在诸多被广泛关注的革命性技术当中，AR，也就是现实增强技术领域所发生的变化，是最引人瞩目的。
随着苹果、谷歌和亚马逊这样处于排头的公司开始在 AR 领域发力，这种技术正在逐步成为主流。
「AR能够将人的表现力放大，而不是孤立起来」——Tim Cook
虽然 AR 和 VR 经常会被混淆，但是两者其实并不相同。从关系上来讲，AR 和 VR 并非是对立的敌人，更像是血脉相近的堂兄弟。两者之间的区别其实很简单：在 VR 中，我们眼中的物理现实世界被计算机所生成的数字世界给彻底取代了。相比之下，AR技术让数字信息直接叠加在我们可见的物理世界中。如今很多人都已经借助类似 Snapchat 滤镜之类的东西感受到 AR 在现实生活中的运用。
这种集成于各种摄影和即使通讯类软件中的AR滤镜，和如今 iPhone 在设计和研发上隐约一脉相承。
Tim Cook 在接受采访的时候曾经提及，AR 在他眼中并非是一种孤立产品，而是一种核心技术。对于这一技术，Cook 是这样评论的：「智能手机是给每一个人的，我们没有必要将它孤立而片面地放在某一国家、地区或者某个垂直市场中来看待，它是面向每一个人的。我们认为 AR 是一个宏大的技术范畴，对此我感到非常振奋，因为在此基础上可以从方方面面来改善人们的生活。」
根据 Deloitte 所发布的一份报告，在年营收超过1亿美元的企业中，近 90% 都已经在其业务或者APP 中开始应用AR或者VR技术。就目前的数据来看，他们这方面的财务状况也相当乐观。到2023年，AR 和 VR 相关的全球市场估计将会达到944亿美元。
当然，另外一方面企业和品牌也在竭尽全力地挖掘在未来商业领域的潜力，这也是他们推动AR技术的诸多原因之一。
接下来，我们可以深入讨论一下 AR 的内涵外延，以及它会如何改变我们和世界的互动方式。
我们生活在一个大数据所驱动的世界当中，大型的结构化和非结构化的数据，包裹着我们地每一个动作。这些数据本身就已经是一个很大的话题了。设计师和技术革新者们一直在思考如何理解这些信息，并且合理地运用它们。
那么AR 将会如何切入到其中呢？
简而言之，数据是二维的。它存在于计算机屏幕上，而物理世界是三维的，这两个世界将会怎样协调一致？AR 的作用就在这个时候发挥出来了。
基本上， AR 技术所充当的就是将数字和物理现实接驳在一起的那个接口。AR 所带来的是一个全新的技术范例。在这个新领域当中，数据的复杂性将会被分析和转化，以更加直观的交互式图形和动画所替代，覆盖在现实世界层以上。
在这一点上，AR同法国哲学家鲍德里亚所梦寐以求的超现实主义在精神内核上高度统一。对于有想象力的技术革新者和科技企业而言，AR 技术的潜在应用场景是无止境的。这一技术将会被大规模普及开来，在未来，你不必像现在这样仅仅只能在游戏中体会这一技术。当然，像亚马逊和 Facebook 这样的商业巨头也开始认真探索如何更有意义、以更有影响力的方式来使用 AR 工具。
而这也是大势所趋。下面我将会拿出一些更为创新的方式，为你呈现 AR 技术是如何具体地改变我们的生活的。
原本在游戏中作为噱头的 AR 技术逐渐脱颖而出，在通信、商业和建筑领域开始展现出无尽的潜力。
而最能感受到AR的这种影响力的，是在品牌和营销市场上。
由于 AR 能够承载复杂的数据，并且将它们转化为可同现实世界进行沟通的交互，身为用户，我们能够从中吸收更多的信息。换句话说，AR 将可以更好、更快更加有效地影响用户的决策机制。我们如今常见的社交媒体和大量的信息，已经让人疲劳了，而 AR 这种全新的切入方式，将可以改变营销，进而影响世界。品牌能够在 AR 的协助下以前所未有的方式来宣传自己和产品。
举个简单的例子。AR 所带来的体验并非传统的二维平面的图像，它让用户可以走进商店，尝试产品，帮你判断产品的实际效果，它用 X射线一般的视觉帮你更好地了解眼前的一切，把所有的可能性明明白白地展示在你眼前，甚至提供360度无死角的视觉。
「在后网络时代，AR就是狼来了的故事——大家早已听说过，但是很少见到足够优秀的呈现形式。」——Om Malik
对于一线的设计师而言，AR 技术是一件听起来非常令人兴奋的事情。但是事情的前后逻辑我们确实需要仔细捋一下。Pokemon Go 的成功到底是源于AR技术的加成，还是源自于品牌本身原有的吸引力？
另一方面，AR 技术改变生活各方面的巨大潜力直到现在才刚刚显现。别忘了，移动端设备的普及和成熟是经历了超过10年的酝酿，直到今天才说得上是比较成熟了。对于 AR 而言，想要立竿见影地看到某种效果，你可能要求有点高。
AR 是一种全新的媒介。设计师面对的最主要的挑战，是要进入三维空间进行思考。在接下来用户要如何同APP进行交互？他们会做出什么样的动作？附近会有其他的人和物体吗？这种情况下用户会做什么？它并非看起来那么简单，本质上这是一次概念上的彻底飞跃。设计师需要在脑海中开始反思这件事情了。
当然，只有时间能够最终证明 AR 是否会成为 iPhone 一样划时代的产物。一切是会因为 AR 彻底改变吗？又或者像 Hi-Fi 一样进入小众市场，逐渐收缩？可以确信的是，AR 技术是有相当大潜力的，这就是为什么你会听到越来越多相关的传闻。一旦一项技术开始每天都被提及，那么一切就皆有可能。我们很可能将会在未来以一种截然不同的方式来体验这个世界，谁敢轻易否定呢？
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
UI走查表有什么用？
一套成熟的UI走查表能更科学更地改稿；减少设计中的反复试错、评审交付时更言之有物；不仅仅停留于“看上去顺眼”、“我觉得挺好”、“先这样”的视觉表层。更深一层来说，走查表有助于培养设计师的结构化思维，形成一个完整的设计体系。
01.页面要表达的意思是否正确
在设计页面的时候，需要注意页面要传达给用户的信息重点，例如本次案例的产品需求中，该页面的功能是促使用户快速下单，信息上则要侧重于价格与优惠信息。
首屏信息是给用户的第一印象，在用户打开页面，尽可能展现出更多用户感兴趣的内容， 而此次页面需要突出促销优惠信息，次要信息则放在后面。
02.页面视觉重点
相信大家平时经常听说0.618的黄金比例（斐波那契数列），屏幕方寸间合理运用黄金比例可以让界面视觉重心更加平稳，视觉更加舒适。同时有助界面区域分割，集中视觉焦点，承载更重要的信息，让整个界面布局更加合理。
淘宝、京东到家等成熟的一线产品黄金比例运用，o在视觉焦点区域都向用户展示了关键信息。
02.元素间距符合各层级的关系
为什么页面会杂乱无章？主要是信息一味地堆砌，分布没有区别，但只要遵从以下方法，页面就会清晰很多，有节奏的呼吸感也出来了。
同类的板块不应被混乱的间距区隔开来，他们应该更集中，并且整体与别的板块区别开来，同理，不仅仅是板块，元素与元素之间也是如此，这样用户可以更加快速地看到自己想要的东西。
那么，如何更好地让信息按照相似属性分布合理呢？这就要利用5分、等分原则来让分布变得更合理，假设相同板块的间距值为a px，则不同板块为2apx。这样不仅在视觉可以将信息分布开来，还能让整体的布局更加规整，不会凌乱，尽可能使用同一或者同倍数的间距，更便于开发。
案例中，相近元素的间距为16px（a px），则不同类别的元素则为32px（2a px）。
01.字体种类的控制
一个产品如果字体种类过多，会导致界面的不统一与混乱。通常字体控制尽量在3种以内，中文字体、英文字体以及特殊数字字体。如下图：
02.字号与粗细控制
字号过多使信息失去重点，基础字号控制在3种以内，目的在于清晰区分信息的层级。正文字号建议为28px，副文案为24px，大标题、价格等重要信息需按实际情况加大，令信息的层级区分更明显。
加粗字体往往是整个界面的视觉焦点，重点的文本（如标题、价格）需要加粗处理，注意控制字体加粗的使用，以免造成信息层级的混乱。 下图为调整字号及粗细的前后对比：
03.行距控制
行距太小不便于用户阅读，太大会显得松散，所以控制在1.2-1.5倍的范围是较为舒适的范围。下图为调整行距的前后对比：
04.字体颜色
字体主要以黑白灰为主：#333333､#666666､#999999；字体颜色深浅有序能让信息层级主次分明，产品应该根据不同模块以及同一模块的层级需要调整不同的灰度值，并在产品中反复使用，统一规范输出。
信息越重要，字体颜色越深。除此之外我们还需要注意到什么呢？也是很多刚入行的设计小伙伴很容易忽略的细节，产品的实际使用环境。比如，我们此次改版的产品详情界面就是线上下单，线下提货的运营模式，不仅需要考虑室内使用环境，还需要考虑到特殊的室外强光环境。结合下图感受一下。
如何在强光环境下保证产品良好的视觉体验呢？这也是UI走查表需要注意到的细节点：强光测试(大于4.5:1)。
4.5：1经验数值参考前辈行业经验总结：
https://www.sitepoint.com/making-bootstrap-accessible/
我们先观察一组颜色对比，如下图：
我们会发现字体颜色层级依然是深黑色、中黑色、浅黑色，相信很多设计师朋友已经注意到我们使用的颜色更深了，为什么呢？为了保证好在强光环境下的信息阅读可阅读性，如下图：字体信息最浅层级，浅黑色的色彩数值对比数值都大于4.5:1。
强光测试链接：https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF
有细心的设计师朋友或许已经注意到色彩值并没#333/#666/#999那么便于记忆了，为什么呢？
为了提升更好的视觉感受与界面的品质感，我们在字体颜色中采用了偏蓝灰，至于为什么，大家不防给我一起观察下图，上图灰色看上去略微有一些脏脏的感觉，下图视觉更耐看、更有质感。
腾讯新闻、金色财经App中的也应用到了偏蓝灰，带来种扑面而来的清爽。
除了常用字体层级的颜色对比，在界面中针对关键的卖点信息还用到强调色，即品牌色
品牌色也会经常运用到特殊字体、提示文字、链接等等。
改版前，促销信息缺少提示入口；改版后，以品牌色作为入口字体颜色，引起用户注意。
01.视觉比例
由于图标通常都是成群结对的出现，彼此之际的统一性显得非常重要，但是常常容易被忽略，可以制定如下图的图标盒子来规范尺寸。
02.图标设计要点
设计图标时应注意基础形状复用，保持整体识别性。如下图重复使用矩形、圆形、椭圆形等基础形状进行设计，既能统一大小又有整体感。
面性图标
设计时需要注意挖空比例的一致性，保持图标的整体性。如价格走势、降价通知这一排图标，挖空比例控制在20%
线性图标
设计时应注意保持良好的线条粗细的统一，案例中使用2px的粗细线条重复使用，所有图标的粗细与文字粗细一致，和谐统一
03.图标尺寸
在app中，功能图标大致可分成两种：可以点击的按钮；不可点击的展示图标。
可以点击的按钮常用于导航栏、tab栏、操作栏（吸底按钮图示）常用尺寸为：48x48px 64x64px。如下如的导航和吸底按钮都用了48x48px的大小。
不可点击的展示图标常用于信息展示位置（价格走势/规格/评论等图示）常用尺寸为：24x24px 32x32px，如下图，评论模块中的展示图标使用24x24px，价格走势则使用了32x32px的尺寸。
04.标签的走查规范
从商业的角度，标签是为了凸显产品卖点，比如你在商场时常能看到“全场低至2.9折”这类的促销信息，其实在界面中同样也会有，目的就是为了抓住用户贪小便宜的消费心理，对比没有标签的同类商品，用户会更佳倾向与有有标签的商品。
常用标签样式有三种表现样式，面性：填充一整个色块；线面结合：低饱和度的色块结合高饱和度的描边；线性描边：1px粗细描边；
如上图：为展示清楚，在原来基础上放大了1倍，运用规则与之前提到的图标一样，根据模块功能的重要性去搭配，按照重要到次要的排序是：面性>线面>线性
标签呼吸感规律：
很多初级设计师都在疑惑到底标签文字定多大合适呢？标签字号一般为：18-22px
以"自营"标签为例
如上图：外框边距横纵向成2倍的倍数关系，所以以后在画标签，只要先定好字号大小，剩下的边框边距就按照2倍的关系去拓展
为了确保我们做视觉稿的时候易于文本的阅读我们通常会用到一些配图，而这些配图通常也影响着我们整个界面的美观度，一个优秀的设计师在设计作品时都会特别的注重图形与图象的比例，图片的选取当然也是重中之重，那么我们在项目中应该如何选取图片并且正确的使用图片的比例呢？
01.图片使用的规范
第一点：首先就是要做到让图片的背景保持统一并且做到干净整洁
第二点：图片主体的比例大小跟其他图片保持统一避免出现有些图片展示局部有些图片展示整体
02.图片模块的常用使用比例
UI设计中图片的比例会比较的多常用的有下列几种
1：1，这种比例比较适用于电商，它可以让商品图片展示最大化。也是目前电商最主流的图片使用尺寸。如下图：
16：9，这种比例比较适用于视频，这是标准的人体工程学比例，根据人体工程学家的研究发现人的两只眼睛的视野范围并不是方的，而是一个长宽比例为16：9的长方形，所以我们看到的视频比例通常会采用16：9。如下图：
4：3，这种比例应用于新闻类APP比较的多，它源自于一些微小型相机最原始的尺寸比例，不需要进行过多比例的裁剪，应用起来比较方便，对于需要展示大量的图片信息类的产品来说特别的适用。如下图：
如果你还是不知道如何去使用尺寸，那么你可以直接查找相关竞品进行设计。
压轴给大家带来一个小惊喜，我们整理了一个较为完整的设计走查表，希望在实践中能够帮到大家。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.字号的设置
2.根据需求随意组合
3.英文的行高
4.英文的行间距
5.中文的行高
6.中文的行间距
7.行高的禁忌
8.标题行高
9.正文行高
10.混合编排
11.字体选择
1.字号的设置
字号就是字体的大小，文字从大标题H1-H7、小标题、正文、注释都要配置相对应的字号。页面的字号我是以4为基数进行递增的，最好采用偶数。像14号字的正文和13号字的注释，这种比较小的字可以不以4为基数来做。不管设计师怎么去定义字号，只要视觉上美观大方并具有关联性，采用哪种规则去约束它都可以。
另外所有的字体都要调试出深色和浅色两种配色，并分别应用在白色底色和黑色底色当中。黑色底色展示效果不好就不做展示了。
2.根据需求随意组合
当我们定义好字号，标题和正文就可以根据实际项目需求进行自由搭配了。在给标题和正文选择字号时要注意它们之间的对比关系，字号差异越大它们的层级关系就越明显，但它们之间的差异又不能太大，差异过大会影响整体的视觉平衡性，给人一种不和谐不自然的感觉。
例如：标题字号20px搭配正文字号12px；标题字号24px搭配正文字号16px。选用哪种标题搭配哪种正文也是由设计师的美感决定的。
3.英文的行高
在设置文本行高的之前，需要理解一下“行高”与“行间距”的差别。前端DIV+CSS和设计Affinity Designer等绘图软件都是以“行高”来进行定义的。在CSS-Style line-height属性是行高，值分别以百分比、数值和像素来表示。例如：h1.test {line-height:112px}，那标题h1的行高就是112像素了；绘图软件中控制行上下距离的也是行高。好的言归正传，中文的行高与英文行高会有一些差异，英文的行高指的是一行英文的基线与下一行英文的基线之间的距离，如下图所示。
基线是英文字体结构中的概念，先简单了解一下它吧，以后讲到字体的时候再讲它吧。我们在绘图软件填写行高的数值时，改变的就是上图所示的这段距离。
4.英文的行间距
英文的行间距就没有行高那么复杂，也不用画基线。英文的行间距跟中文相同，指的是一行英文的底部线与下一行英文的顶部线之间的距离。其实也可以简单的理解为“行与行之间的距离”并称之为行间距。另外英文底部和顶部都有对应的专有名词的，在英文字体结构中最顶部/最底部隐性的两条线称为“上沿线/上限线”和“下沿线/下限线”。这块的知识先了解一下就行，以后在字体结构中会讲到。
5.中文的行高
接下来理解下中文的行高。上面讲到说英文的行高是由基线决定的，但中文字体与英文字体结构不一样，中文里没有基线的概念，那该怎么定义行高呢。中文的结构属于方块字没有基线，所以中文的行高指的是一行中文的最底部与下一行中文最底部之间的距离。中文字体结构中没有上沿线/上限线和下沿线/下限线的概念，它们只存在于英文字体结构中。
6.中文的行间距
中文的行间距就比较好理解了，跟英文的行间距的道理相同。是指一行中文的最底部与下一行中文的最顶部之间的距离。也可以理解为行与行之间的距离。
虽然说行高与行间距的差别不太好区分，而且还有些绕，但理解它们还是很有必要的。
7.行高的禁忌
不管是标题、正文还是注释，他们的行高都不宜过高，行高过高会导致内容不易阅读，文字之间的整体性也会被打散。标题的字号越大行高应该越小，正文的字号越小行高应该越大。当然这些规则都是相对的，行高大小要合理把控，不能太大或过小。那要如何合理设置行高呢，往下看。
8.标题行高
标题的行高由字号决定的。平面设计中有时候可以把行高设置与字号相同，例如120pt的字号设置120pt的行高是没有问题的。在页面中行高是这么计算的，字号x倍数=行高。例如下图所示，大标题H3设置的字号是48px（12a），那行高就是62.4，即48x1.3倍=62.4。字号与行高的倍数是一点点测的，因为字号与行高的比例不会小于1.0（1倍），我就根据自身审美进行测试，从1.0/1.1/1.2/1.3....开始测，直到测出自己满意的行高。如下图所示，带颜色数字的是倍数。
最终的行高还是由设计师直观判断决定的。所以做设计要理性中夹杂感性，规则与创意并存才是一个优秀设计师需要兼备的品质。那我就拿中文字号36px和英文字号24px来举个例子，这样大家好理解一些。如下图所示：
从测试结果中找到自己满意的行高就可以了。字号x倍数=行高，这里也不怕倍数小数位太多的问题。在绘图软件中是以像素为单位，但有时候前端代码会用父继承单位“em”。例如：大标题H3的字号是48px，行高是62.4px（48x1.3倍），62.4px=1.2816667em，那转换为前端代码就是h3.test{line-height: 1.3em}，直接做约等于就行了，差一点点看不出来的。
9.正文行高
来接着往下讲。正文行高与标题行高相同，差异就字号的不同选择的行高也不同。标题行高倍数大概1.0-1.6不等，正文行高倍数大概1.6-2.4不等，这也没有一定的标准，还是得根据项目情况与实际效果综合来看。如下图所示，带颜色的数字是行高的倍数。
说到这里，经常有人问我正文的行高的值应该怎么设置，大家在做设计时都会采用1.5/2倍关系，但这不是绝对的，行高的倍数也是受字号大小影响的。像新浪新闻的正文，字号是18px，行高设的是32px，即字号（18px）x1.777（倍数）=32px（行高），如果行高倍数设置2倍以上，字与字之间的距离变大，就不太好阅读了。
10.混合编排
好的，完全理解上述所有知识就可以把标题、正文和注释进行混合编排了。大标题字号40px、正文字号20px、正文行高40px、注释字号18px、注释行高32px、标题与正文的间距88px、正文与注释的间距64px。
11.字体选择
选择字体就没有什么技术含量了。做页面常用字体就只有那几种，微软雅黑、宋体、Verdana、arial、Times New Roman，就不举例说明了。中文网站最常用的就是微软雅黑+Arial，浏览器兼容性也最好。读到这里有人可能就会问了，载入其他字体也可以啊，是的做企业网站可以载入其他字体，但像做功能页面啊、后台页面啊，载入其他字体几乎就不可能了。所以还是要估计实际项目需求/品牌需求来选择与其相符的字体样式。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
随着折叠屏手机的发布，我们看到未来手机的形态可能会朝着柔性手机方向发展，那么，让我们来思考一件事：如何在折叠屏手机上做交互设计呢？最近三星、华为和柔宇各发布了一款折叠屏手机，它可以把一台8英寸的平板电脑通过折叠的方式变成一台方便携带的6英寸手机。折叠屏手机属于新的手机品种，也是我目前最看好的手机形态之一（未来手机的形态应该是柔性手机，现在已知有柔性电路板的存在了）。通过几天的观察和思考，我认为折叠屏手机有以下好处：
以上基于「展开」态的想法，在折叠状态下还有一些不错的想法供大家思考。
华为在MWC2019上演示了一个名叫「镜像智拍」的功能，它可以让被拍摄的人实时看到拍摄效果，并调整面部表情与姿势。用自己最了解的角度及构图使得拍摄事半功倍，妹子们再也不用担心自己的男朋友把自己拍得很丑了。
在折叠状态时可以把背面当做一个附加的交互空间，实现一些简单的交互操作，例如打吃鸡游戏时我们可以考虑在背面屏幕增加一些手势操作进行8倍镜的缩放，这种背部触控方式并不是什么新鲜事，在2011年索尼旗下的掌上型游戏机 PSV 已经在背部增加了电容式多点触控面板。
除了附加的交互空间，我们真的可以把它当做第二块屏幕进行使用。在平时我们可以通过两块屏幕同时运行两个不同的应用程序，例如我们可以用主屏幕玩游戏，在加载游戏时翻转屏幕刷个微博，操作起来十分方便。
折叠屏当然不只有展开和折叠两个状态，还有翻折状态，它区别于传统手机和平板的独立状态。最直接的效果就是它可以不需要支架就立在桌面上，实现中远距离的自拍；同时它可以进行多角度拍摄，成为制作 VR 内容的利器。在玩法上，翻折状态可以通过两面屏幕的不同内容引入多人互动的概念，但这种应用场景比较难想象。
相比外折叠设计，内折叠设计玩法相对较少，在这里我只想到了任天堂NDS 的概念：在翻折状态时它就是两块独立屏幕，它可以独立显示不同的内容，例如上屏显示内容，下屏显示操作区域，打游戏时翻折状态明显要比其他状态舒服。
个人观点：从以上案例来看，外折叠设计在交互和玩法上都比内折叠设计好，未来很有可能以外折叠设计为主。
当折叠屏从小屏模式转变成大屏模式时不应该只是画面的等比例变大，而是要考虑响应式布局设计。
描述响应式设计最著名的一句话就是「Content is like water。如果将屏幕看作容器，那么内容就像水一样」。在以前响应式设计更多用在PC Web设计上，但现在手机也应该考虑响应式设计，以下是设计时需要考虑的细节。
它不是简单的响应式设计。从上文得知，「展开」态时要考虑是平板模式还是双屏幕模式，如果是平板模式，那么内容应该在一个整体里；若是双屏幕模式则可以考虑不同屏幕展示不同内容。设计时需要根据实际需求和场景进行模式选择。
考虑通过 Fragment（片段）来设计。Fragment 是 Android3.0提出的 API，出现的初衷是为了 UI 更灵活地适应大屏幕的平板电脑。以下是 Android 对 Fragment 的官方介绍：「Fragment 表示 Activity 中的行为或用户界面部分。您可以将多个 Fragment 组合在一个 Activity 中来构建多窗格 UI，以及在多个 Activity 中重复使用某个 Fragment。（ Activity 可以理解为一个页面，Android 开发中最重要的概念之一）」
参考微软的 UWP 设计概念。UWP 即 Windows 10中的 Universal Windows Platform（Windows 通用应用平台）。UWP 应用的理念并不是为某一个终端而设计，而是同一套代码和设计可以在所有 Windows 10设备上运行，包括Windows 10 Mobile / Surface / PC / Xbox / HoloLens等等。
它的响应式设计的设计技巧包括以下6点：
调整位置：你可以改变 UI 元素在不同屏幕上的位置。比如下面这个例子：为了确保同时展示两个元素，在手机上我们必须采用纵向滚动界面，而在平板电脑上，我们可以调整框架的位置，变为横屏滚动界面。如果你用网格设计这些位置，你也可以不改变内容框架，但其他 UI 元素可以使用响应式设计。
调整尺寸：你可以通过调整空白和 UI 元素的尺寸来优化框架，比如下面这个例子，可以通过简单的增大内容框架尺寸来提升大屏幕的阅读体验。
调整顺序：通过调整 UI 元素的顺序和方向，优化内容显示效果。举个例子，在大屏上运行时，可以再添加一栏，并且加入分类列表，这些都是合理的。这个例子展示了在手机上使用一栏纵向滚动，而在平板上使用两栏横向滚动的优化。
展现：你可以基于屏幕的真实大小，设备支持的功能，特定的情况或者屏幕方向展示界面。下图是媒体播放器的例子，小屏幕上这些按钮通常是被删减的，但在大屏幕上这些按钮是被完全保留的。PC 上的媒体播放器比手机上的有更多的功能。
换位：这项技巧是为特定屏幕尺寸或屏幕方向切换特定的界面。下面这个例子是导航菜单：小屏幕上他是隐藏在汉堡菜单中纵向排列的，但是在大屏幕上，更大的 Tab 是更好地选择。
改变结构：你可以为特定的设备优化特定的结构。下面这个例子就是两种不同的接合结构。
以上6点引用了Windows 开发人员中心 《Design Basics：Responsive design 101 for UWP apps》
考虑用户翻转折叠屏幕时的场景和动机是什么，从而优化现有界面及交互流程，举几个例子。
以 RPG 游戏为例。当玩家使用小屏模式时我们可以收起所有功能界面，使游戏的沉浸感更强；当玩家采用大屏模式时，我们可以认为玩家需要获取更多信息，这时候把聊天、装备等相关功能界面展示出来。
当用户在微信里查看定位信息有新消息提醒时，手机变成大屏模式时应该同时存在地图界面和聊天界面。
相关注意事项
Google 在2018年11月就宣布了对折叠屏的支持，包括多窗口支持、不重启适配等等。如果想要在折叠屏手机上设计良好的用户体验，必须考虑以下两个方面：生命周期管理以及转场动效。
生命周期管理
目前大部分手机应用为了有更流畅的体验会做适量的生命周期管理，例如退出页面时会释放相关内存。因此设计师在设计折叠屏交互时要考虑哪些页面不能被销毁，一定要让用户进行展开、折叠等操作， 应用任务不中断重启，产品可以自动适应各种屏幕下的静态布局规格。
转场动效
从目前 Google 公布的新版 Android系统来看，已经可以做到当折叠/展开设备的时候，页面、内容从一个屏幕自然地切换至另一个屏幕。设计师在设计时应该基于 Google 的技术规范考虑内容、组件等模块的转场效果。
参考案例：
华为基于HUAWEI Mate X发布的折叠屏官方适配方案，相关链接：https://www.infoq.cn/article/mPwQk57bK5fg_FTcXa2i
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
看过或听过一大堆理论知识的你，有没有被很多自相矛盾的设计原则搞混过？比如你把做好的设计发给总监看，然后他告诉你太乱了，要统一，于是你苦苦调整了一番。当再发给他看时，他却说太平淡了，要有对比。你心想，一会要统一，一会要对比，这不是自相矛盾吗？当然不是，其实你自己心里明白，只是你不知道如何平衡这两者的关系。类似这种「矛盾」的设计原则还有好几对，接下来葱爷要把它们一一理清，让这些理论知识能真正指导设计实践。
对齐是版式设计最基础的原则之一，具体指版面中的字与字、字与图、图与图要对齐，常用的对齐方式有左对齐、右对齐、上对齐、下对齐、居中对齐、两端对齐等。对齐的目的是为了使版面更整洁，更便于阅读，比如下面这些作品都用到了大量的对齐关系。
我们来举个实例，假设你现在要设计一则手机banner图，目的是宣传某款手机的拍照功能，文案如下：
这种图不难做，你打算直接用一部手机和几张摄影作品作为画面的主视觉，于是去图片网站找了几张能体现该手机拍照功能好的图片：
图片找好后，你把其中一张图片填充到手机里作为屏幕背景，其余图片分散在手机周围，然后你把整个视觉主体放在了版面中央，文字则按主次排在了两侧，大致效果如下：
你盯着画面，正琢磨着还要加点什么的时候，总监不知何时出现在了你身后，他面无表情地盯着你的电脑，嘴里慢吞吞地吐出几个字：「太乱了，好LOW」，之后就消失了。你很聪明，立刻明白了总监是想要自己排得更整洁、更有序一点。
在目前的版面中虽然个别元素之间有对齐关系，但是缺乏整体的对齐，且图片采用了自由式排版，所以会显得混乱。于是你尝试把图片对齐排列，文字则以图片为基准进行对齐。
△ 左边的文字部分与右边的图片部分保持上下对齐，标题与内文为左右两端对齐，icon 与文字则是左对齐。
上图很「完美」地执行了对齐原则，整个版面干净、整洁了许多，视觉流程也更简单了。这下总可以了吧，然而事情并没你想的简单。因为总监不知何时又出现在了你的身后，他瘪着嘴一脸嫌弃地说道：「太呆板了，有点变化好不好？」
变化？难道又要调回改之前那种状态啊？当然不是，你其实是要在现有的基础上做一些变化。排版的难点和精妙之处就在这里，既要对齐，又不能机械地对齐；既要整洁有序也要灵活有变化。如何做到这一点呢？我的理解是：要在对齐中制造一点变化，在变化中找到对齐关系。比如下面这些作品：
现在你知道了，上面的方案之所以死板主要是因为文字部分与图片部分对得太整齐，所以需要改变其中一个版块。该版面的视觉主体是图片，所以调整图片更合适。由于文字是呈水平排列的，那么图片部分是不是可以倾斜摆放形成一定的反差呢？这样既可以制造变化还能加强版面的空间感。
△ 除了把图片倾斜之外，LOGO也与内文错开移到了左上角，最下边的直线也可以延伸到了版面之外。
我们现在再回过头来看看这件作品是否符合前面我说的，「要在对齐中制造一点变化，在变化中找到对齐关系」这一要素。
从上图中可以看出，图片虽然做了倾斜，却是在对齐的基础上做的变形扭曲。版面中的元素虽然不是都对齐了某条直线，但是没有哪一个元素是孤立的，每一个元素都与版面中的其他元素有对齐关系。更重要的是，左边文字版块的视觉重心与右边图片版块的视觉重心也是呈水平对齐的，所以整个画面才得以平衡。
虽然设计的构成要素只有文字、图片、色彩，但是每一个要素都有无数种表现形式，不同的字体、字号、色值、质感、风格、图片、方向等等。如果在一个版面内含有太多不同的东西，会显得很杂乱，从而让人心生厌烦，所以，需要通过某种方式把这些「不同」统一起来，以达到舒适、协调的效果。
以一则运动品牌的轮播图设计为例，文案如下：
这类设计以运动员作为主体最容易出效果，所以我们需要找一个正在奔跑的人物图片。
△ 这个人的姿势不错，就他了。
运动品牌最重要的是要设计出动感和时尚感，所以我把背景分割成一红一蓝两个倾斜的色块，然后把人物放在画面中央，文字分布在左右两边，以制造出强烈的视觉冲击。
由于有一个动感十足的模特和背景，所以整体看来还是比较符合运动海报的调性，但视觉上有点乱，因为有很多细节没有统一，比如人物倾斜的角度和背景色块、标题倾斜的角度不一样，主要文字的字体风格不一样（NIKE和JUST DO IT的字体比较硬朗，而蓄势待发的字体相对较柔），元素的风格也不统一（圆角的了解更多按钮与整体风格不搭），还有各元素的颜色也缺少联系等等。
那该怎么办呢？这里就需要用到统一的原则了，我们可以试着把上面提到的不统一的地方都统一起来，如下图：
△ 调整后的方案二，字体都是简洁有力的黑体字，而且把左右两边的字体进行了水平对齐、背景色改为单一的渐变色、人物和文字的倾斜角度也统一了，「了解更多」的按钮也改成了平行四边形色块、颜色更是被缩减到了三种。
调整之后确实不乱了，但是也有了新的问题，因为各元素太过统一使得画面缺乏层次和对比，该突出的信息也没有得到突出。这时候就需要用到与统一对立的另一个原则——对比。
对比，是把具有明显差异、矛盾和对立的双方安排在一起，进行对照比较的表现手法，目的是为了使设计更有层次、增加视觉冲击力。设计中常见的对比有大小对比、字体对比、色彩对比、空间对比、方向对比、长短对比、粗细对比、曲直对比、轮廓对比、虚实对比等等。
想要处理好统一与对比的关系，需要记住两个要领：
顺着这样的思路，我们来给上图增加一些对比关系，例如方案二的标题倾斜角度太大，不美观，所以我干脆把它的倾斜方向改为垂直倾斜，既保留了动感也增强了对比，更加美观。在文字的字号上，我选择突出品牌名缩小广告语，加强了大小对比，并且还恢复了之前把背景一分为二的做法，只是增加了一点空间感，并把人物服装的颜色与背景色做了统一。调整后的效果如下：
我们可以观察一下，方案三确实比方案一更协调，比方案二更有层次和视觉冲击力，且整体调性依然年轻、时尚、有动感，这里就是运用了统一与对比的原则。
简单应该是大家听得最多的设计原则，简约、极简风格的设计也非常受欢迎，但是我们也很困扰，因为自己做的所谓极简设计经常会被人说太单调、不够丰富；而那些自我感觉很丰富的设计又会被说成是杂乱。为什么会这样呢？我们先来正确地认识一下简单与丰富。
简单并不是指做设计要用最少的元素、不做任何修饰，而是指设计主旨要简单，视觉流程要清晰，视觉要聚焦，主次要分明。
△ 上图的设计虽然元素和色彩都很多，但整体给人的感觉也还是简单的。
而丰富也不是指画面中一定要有很多元素或叠加一堆的效果，而是指有细节、有层次、有品质感。
△ 上图的设计虽然整体看来很简单，但是并不会显得单调。
为了方便理解，我们还是来举个例子：一款农产品册子的封面设计。该封面的必要元素很简单，只有一个 Logo 和一句文案，因此，我们很容易想到做个极简风格的设计。白色背景加一个 Logo 和一行文字，再配一款特种纸，做点工艺，就可以显得很高大上，很多大品牌也是这么做的。
这也是一种还过得去的解决方案，但表现手法确实太过简单，既体现不出设计师的设计功底，也没有体现出农业品牌的调性和特色，且缺乏吸引力，所以我们需要做加法，让其变得更加丰富。
怎么丰富呢？最直接的办法就是引入图片和色块，由于品类为农产品，且文案重在强调健康和安全，所以我们可以找一张绿色、生态的图片。
为了与狭长的版面保持统一，我把图片也裁剪成了竖版的矩形，并与一个同样大小的绿色色块结合在一起，组成版面的主视觉，logo放在图片左侧，如下图：
这么做还是有些设计感的，也增加了品类属性，不过缺少细节、不耐看，所以还需要加点东西。当然，新增加的元素只能作为辅助，不能太过抢眼，图片方面我很快想到了叶脉，叶脉与图片中的叶子元素也能产生关联，且适合做底纹，于是我又找来了一张叶脉的图片。
把叶脉图片放在图层最底部作为背景处理，这里会遇到三种情况，一是如果把叶脉纹完全平铺的话，整个版面就没有留白了，所以会显得压抑；二是把整片叶子都显示出来，但这么处理会显得很小气。所以我只用叶脉纹覆盖了一半左右的版面，与图片部分形成呼应，这样的效果看起来是比较舒服的。
图片部分得到了改善，但现在画面中还缺少一点小的装饰元素，增加一点文案是个不错的思路，所以我把文案和品牌名的英文加了进来。
做完加法后整个画面变得丰富了不少，层次也拉开了，而且给人的感觉依然比较简单，既不杂乱也不压抑，因为各元素主次分明，既有联系又没形成干扰。不过做加法的时候也要把握度，例如下图就有点堆砌过度了，看起来很繁杂、不精致。
想要处理好简单与丰富的关系，需要注意两点：
规范与打破是存在于版式设计中的一对矛盾原则，规范是指把版面中的元素要按某种规律，或是在特定的范围内设计布局，目的是为了让画面更有条理和秩序，也更像一个整体。
△ 上图的主要元素都规范在一个矩形中，然后各个小矩形又组合成一个大矩形，看起来很整体，很有设计感。
与规范对立的是打破，指打破规范、打破束缚、打破平静，目的是为了使画面看起来更灵活、更有动感、更具视觉冲击。
△ 用色块或图片来创造束缚感，然后把部分元素冲出色块，是规范与打破的一个经典组合形式。
可以说经过了严格规范而变得很好看的优秀设计很多，而有些设计却选择了打破规范，也得到了很惊艳的效果。那什么时候该严格遵守规范？什么时候应该打破规范呢？其实在一件完整的设计中最好两者都要有，而平衡这两者的要领就是：先规范后打破，即在规范好的基础上选择一些局部来打破。
葱爷还是以一个画册的封面设计来作为讲解案例。这是一本中国移动云服务平台方案介绍的册子，文案如下：
很明显该封面的视觉调性应该要有科技感，要能体现互联网、信息、大数据这些关键词，所以我找了一张看起来很有科技感的图片。
这类画册的版式通常应该偏向简洁、规矩，所以我决定用网格系统来辅助排版。以图片作为封面的主视觉，除了Logo，所有元素都排列在矩形图片内，并且所有文字都按照网格的设定保持左对齐，所有元素的高度、宽度，以及各元素之间的间距，都严格按照网格来排版。
△ 经过规范的版面整体看起来十分严谨。
不过这么做也造成了版面缺少变化、太过规矩等问题，所以我们可以尝试在此基础上做一些「打破」。
比如原本的 LOGO 与图片靠得太近，显得很压抑，这里就不必完全按照网格来排版，我们可以根据自己的感觉将 LOGO 与图片分得更开一些；中文标题、短线、英文标题这三者也太拥挤了，可以挪开一点；文字部分不一定全部都在图片范围内，所以我给英文标题加了一个蓝色块，并把色块移出了图片区域；以及把最下面的公司名称排在了图片下方等。调整后的效果如下：
△ 调整后的方案，构图也相应发生了变化，之前为上下构图，现在变成了对角构图。
在规范的基础上做了打破之后，我们可以看到，版面的整洁性依然在，整体的调性也依然简洁、严肃，但相比调整之前显得更灵活、更有设计感。
设计不是简单的加减法，也不是只要做到对齐、统一这些很简单，方向很明确的原则就可以了，因为根本不存在什么原则可以让我们直接通向设计的终点，但是我们的目标是明确的，就是要做有效的设计，所有的设计原则、设计手段都要为这个目标服务。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
不管是做设计（感性）还是设计规范（理性），都是仁者见仁智者见智的，都很主观。我是想阐述出自己的想法供大家参考，文章中的数值也不是固定标准，还是希望大家根据不同的项目需求，去解决不同的实际问题。
目录
1.下拉菜单
1.1 了解侧边导航栏
1.2 绘制矩形框
1.3 文本行高
1.4 层级划分
1.5 确定距离
2.分页
2.1 了解分页
2.2 绘制普通分页
2.3 绘制首末分页
2.4 绘制跳转分页
3.步骤条
3.1 了解步骤条
3.2 绘制步骤条
1.1 了解侧边导航栏
侧边导航栏就是固定在侧边或从侧边划出的导航栏，一般应用在企业网站的触发型导航栏上，或后台页面/系统的左侧功能性导航栏上。侧边导航栏的方向是根据业务需求来做调整的，方向在那边就往哪边对齐。我们先了解一下侧边导航栏的样式。
设计师的对设计的理解和审美决定了周围要留多少的空白。
1.2 绘制矩形框
矩形框的高度可以随着屏幕高度的变化而变化，所以不需要考虑。那只定义矩形框的宽度就行了，宽度分别是：小（240px）、中（280px）、大（280px）。当我们决定采用哪种尺寸后，就要定义矩形框与内容之间的距离了。下图所示的例子是以中等尺寸来做参考的。
1.3 文本行高
当我们绘制好矩形框，就要往里填内容了。文本行高上一章已经讲过了，就不多说了。文字的行高是由鼠标状态（Hover）的高度来确定的，Hover的高度有多高，文字的行高就有多高。但要注意的是，侧边导航栏的文本左右多留一下白，不能使导航栏看上去太紧凑，给人感觉太压抑，就会显得不是很美观了。
1.4 层级划分
因为侧边导航栏中有树形结构，一个主级别可以分散为多个子级别，所以就需要划分一下层级。划分层级的方法也有很多，可以改变字号、改变颜色、改变字形、改变距离，那我用的方法是改变距离。采用哪种方法还是要看具体需求，像那种需要想突出层级且对比强烈的需求，可以采用改变字号和改变字形（加粗）。下图中颜色越深层级越高，另外要注意的是，大类也有层次，越往上层级越高。
1.5 确定距离
当我们把矩形框绘制好，文本也填进去后，就要确定每一个层级的距离了，我们要做出1>2>3的感觉出来，细微调整每个层级的间距，使它们的差异突显出来。确定距离指的是每个层级左侧的距离，这就像楼梯一样，在上层的楼梯往往优先级是最高的。层级1（收藏夹）与层级2（艺术类）之间多留了4px的空白，目的是为了突显主级别与子级别之间的差异，稍微强化了一下主级别。
来看一下最终效果吧。
2.1 了解分页
侧边导航的讲完后来讲讲分页，分页有三种样式：普通分页、首末分页、跳转分页，名字是随便起的，能理解什么意思就行了，来让我们了解一下它的样式。
2.2 绘制普通分页
接下来我们学着画一下它。我把所有的分页分为三种尺寸（大中小），分别是32px（小）、36（中）、40（大），每一个小按钮的曲率分别是4px（小）、6px（中）、8px（大）。每个小按钮之间的间隔我用的是4px，也可以用8px，4px虽然更容易误触，但视觉效果要比8px好很多。
当然了以上数值也不是绝对的。尺寸、曲率和间隔都是需要根据项目需求与设计师自身审美来决定的。
2.3 绘制首末分页
首末分页就是在普通分页的基础上加两个按钮，分别是“跳转到首页”和“跳转到末页”。只要注意把“数字按钮（分页）”与跳转首末页按钮”按优先级分隔就可以了，要把控好这首末按钮与数字按钮之间的距离，距离过短容易误触，距离过长会破坏整体性。
2.4 绘制跳转分页
跳转分页是在首末分页的基础上加上“总页数”与“跳转至指定页数”这两个功能。跳转分页前端显示总页数，后端显示跳转至指定页数。所有按钮模块的间隔都成倍递减，这样不同分页的功能，区分就会更明显一些，而且它们之间也有隐性的关联。
将分页组件与其他组件组合起来看一下最终效果。图片压缩效果不是很好，要与实际效果（原始比例）差很多。
3.1 了解步骤条
步骤条相对比较简单，这里穿插一下讲了吧。步骤条的样式比较多，但他们的绘制方法都大同小异，我只单拿出一个来讲，就不一一的进行讲解了。
3.2 绘制步骤条
步骤条其实不难绘制的，注意对象和元素之间的距离就可以了。留的距离也要讲究一些，要匀称不能出现左面留太多而右面留太少的情况，具有关联性的部分距离差异不能太大。另外就要考虑视觉平衡性的问题，不能一味的采用水平或垂直居中。只要熟练把控好距离，知道什么需求下留多少的白，那绘制不同样式的步骤条，也会显得游刃有余，做出的东西也更自然舒服体验也更好。
做设计要精益求精，把每一个像素点都要考虑到并合理运用它们。
蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计
蓝蓝设计的小编 http://www.lanlanwork.com
