为什么觉得英文比中文字体排版好看？
1．结构
中文由汉字组成，汉字由不同多样的笔划组成，多直线、直角、锐角。英文以26个字母组成，字母以直线和圆弧组成，小写的字母大多可以用一条连笔线条完成，大写也不过4笔；汉字在结构上更加复杂多样，英文结构则更加简单和谐。
2．包含的信息量
汉字是以象形为原始基础，也就是每个字都具有特别的意义，一个简单的字可能在远古时代就代表了一个复杂的生活场景，是世界上最形象的文字，传递的信息量也比英文字母更多。
视觉上和心理上都会让人觉得汉字更复杂，英文更简单。
3. 规律性
英文中，26个字母的反复组合出现，使整个句子有一致和谐的感觉（相反，不一样和突出的东西都会迎来视觉冲击，同时也增加用户的视觉负担），中文字体虽然也有规律（例如：相同的边旁结构等），但是由于中文单个字体结构过于复杂，规律性的东西并不显见。
英文的组成的句子比中文的句子看似更有规律和组织性，视觉上更加轻松舒适。
4. 节奏感／呼吸感
本身单个汉字就比单词更加饱满，每个汉字像是被笔划填充饱满的方块；
单词是由横向的一组字母组成，单词里辅音多为竖长，元母多为短圆，结合起来大多都高低起伏，不会看似一个填满的明显长方块，更像是律动的线条，整个单词之间仿佛流通着空气感。
5．句子组织方式
中文由汉字组成句子，字与字之间一般不留太大空隙，影响阅读的连贯性。
英文以单词组成句子，单词与单词之间需要一定的小空隙，不然会影响单词的理解。
对比之下，英文句子比中文句子，视觉上会带来更好的节奏感和呼吸感。
6．认知／文字的识别度
首先，我们看到图形和文字的时候，会有不同的心里反映，看到图形会想着这个图形好不好看，什么含义，看到文字的第一反映就是它的含义。虽然中文是象形文字，但我们是中文母语者，看中文的时候，第一反应不是将他图形化，而是直接快速看到文字传递的含义，不会对它的结构和形状进行任何思考，跳过了图形（包括图形好不好看的想法）直接到字面意思。而看到英文的第一反应会更倾向于将其图形化和符号化，会看到字体的形状线条，会觉得它好看或者不好看，会把它当作视觉元素与整个画面结合在一起。
另外，我们能发现，无论国内和国外的大品牌，他们都使用了自己的语言文字来做logo，但是他们都将字体进行了设计，让人无法第一时间解读出来，否则会让人感觉更廉价。
举个例子：左边的英文给人感觉会联想到苹果公司的系列高端产品，简洁大气。右边同样的版式换成中文字就会在心理上给人一种廉价感。很像华强北某小商店打出来的广告，让人觉得不够高级。
因此，英语更容易让我们感觉到好看。一般的，在人们的认知中：图形的美观程度>字符的美观程度。
其实博大精深的中文并不比英文逊色，只是在使用的场景不同下各有优劣势，然而我们对中文的排版设计还知之甚少，更无法将中文的字体设计表达的淋漓尽致，所以会导致一个错觉：英文排版（字体）比中文排版（字体）好看，下面欣赏几张设计不错的国内电影海报，看看他们是怎么做中文字体排版的吧~
▼
1．极简化设计
这是一种以信息内容为优先的去风格化设计。
在这信息爆炸的时代，让用户聚焦信息的难度越来越高。如何减少干扰，让信息有效传达给用户正是极简化设计所推崇的。加大字号，拉大层级对比，增加留白，减少颜色以及不必要的装饰等手段越来越多地在设计中体现。
极简化设计的核心是围绕信息内容本身而呈现的，因此这种方式首先在产品UI设计层面开始流行起来。 尽管极简的设计风格导致很多应用的风格越来越趋同。但它是真正以用户为核心的设计发展趋势。设计不再作为独立于内容之外的元素存在，而将着眼于内容本身，为用户打造直观的视觉体验。
2．大投影
大投影，或是微投影，是指轻微的、若有似无的投影，它不易被立刻察觉到，因为不会给人厚重的写实感，反而增加了设计元素的深度，更好地表现了扁平化操作层级。从iOS 11的App Store开始就使用了大投影的卡片式设计，它令设计元素更加独立醒目，极好地抓住用户的注意力。
3．粗标题
在扁平化设计中，文字排版影响着信息层级展示的清晰与否，通过文字的字号、字重、颜色等的对比去建立清晰的信息层级，而不用太多的装饰元素。
4．留白
设计元素和元素之间保持足够的间距，可以减少用来区分层级关系的不必要装饰元素，例如分割线、边框等，利用元素的排版、文本的对比和色彩的搭配建立一种更加简单的设计风格。大间距的设计能让界面具有呼吸感，大量的留白可以增加或减少元素的易见性，元素周围的间距越大，元素和元素之间的独立性就越强，每一个元素就越显得醒目突出，有助于用户把视觉聚焦在内容本身。
Airbnb是极佳的范例，它采用了一种既不是列表设计也不是卡片设计的极简设计，大标题文本包含一组带有图片和描述的元素，组元素和组元素之间保持较大的间距，既保证了它们互不干扰，又不会令界面看上去显得松散，因而带给用户非常轻松的浏览体验。
5．生动明亮的色彩渐变
关于渐变色这一块其实早在去年的时候设计圈中就有很多采用渐变色的设计手法，渐变色设计的优势在于可以让页面层次感更丰富，突出页面更加重要的元素，以及可以使内容相对复杂的一些图片和元素更加统一，而且与此同时也增加了视觉上的感官，更加能起到吸引用户的作用。
▼
1. 优化视觉图片
在上一版的设计中大面积采用科技蓝作为设计的主色调，看久了之后会给人一种稍显压抑的情绪。最新版在整体上做了一次大面积的改变，将原先的白色导航栏优化为深空蓝，并加上微投影的效果。给人更专业和可靠的视觉感受。整体图片抛弃了大面积蓝色调，而是采用暖色调的图片来给人更和谐温暖的感受。在banner的文字排版和按钮上都进行了优化升级，让页面更有呼吸感。整体界面给人更专业、严谨、温暖的气氛。
2.可视化图表优化
在上一版页面较为零散排布的基础上进行了规整设计，让页面变成更易于阅读的卡片式设计。在各个卡片的内部做了新的排版及布局优化。让页面给人更清爽简约的感受。便于用户更好的理解与获取可视化图表传达的核心理念。
3.页面表现形式优化
以调查问卷页面为例，这个页面将原先的设计做了一个打破的处理。为了重新寻找更优化的设计方式。这里采用的设计方式是将问卷连成一串，每个问题都可以进行点击展开式的收缩设计，并且当用户每答完一题，下一题会自动展开。旨在为页面节省更多的空间，这样就可以有效减少用户的困惑感，使问卷的形式更轻松的进行。同时让原本需要两个页面显示的问卷内容可以在同一个页面更好的呈现。
4.流行趋势的运用
这里以市场动态页为例，整个PC端的设计都采用了卡片式及弱阴影的效果。在色彩上也是运用了较为舒适的明暗度的对比方式，在整体图片的选择上采用冷暖交替的对比手法，让页面更和谐、大气又不失乏味。版式上针对上一版做了进一步的优化，让文字的排版更透气，图文的结合给用户更有点击欲的感受。
作者：余盼Panda 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
黄金分割在界面设计中的应用
黄金分割大家应该早有耳闻，作为一名设计师，怎么来利用黄金分割线使其构图更加完美呢？
说实话，构图时是否使用黄金分割线构图并不是绝对的，它只是方法之一。但是黄金分割比例在全世界乃至全宇宙确实都是至高无上的。
01
至高无上的黄金分割比例
这种东西是很神奇的事情，你了解的越多越会觉的这是一个不可思议的事情。甚至有人称之为上帝的密码。
那黄金分割线到底是个什么东西呢。它在什么位置？它在画面中的哪个地方呢？
“有一条线条，如果我们从中切一段，如果左边是0.618这么一个比列，右边则是1这么一个比例。”如果符合这样的左右比例我们称之为黄金分割比。那么中间切割的位置就是我们黄金分割线的位置。
我们大体概括一下：
黄金分割线是指将整体一分为二
较大部分与整体部分的比值
等于较小部分与较大部分的比值
其比值约为0.618
这个比例被公认为是最能引起美感的比例
总结一句话就是
0.618的比值最美
0.618的比例怎么来的？
有人做了一个实验，他们拿着一些长方形去问全世界的人，说哪个长方形最好看？结果所以的人都不约而同的选择了这种长方形。西方的，东方的，土著的都选择了如下图的这种长方形。
科学家们就很奇怪它到底奥秘在哪？要分析分析它。这个长方形如果从中间画一条线，把它分割成俩个形状的话，右边可以是一个正方形，左边小的长方形的比例和原来的长方形的比例是一摸一样的。
小的长方形也可以切割出一个正方形和一个等比例的更小的长方形。这种长方形只有黄金风格的长方形才能做到。
02
运用黄金分割线构图
画面长宽比不同，黄金分割线位置也不同。这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1。
在移动端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。这俩个尺寸正好等同于一倍图375*667的比例。
不同长宽比的画面我们按照0.618:1的比例，一个画面可以切割出4条黄金分割线，上分割线/下分割线/左分割线/右分割线。我们在实际构图怎么利用黄金分割线快速排版？
2.1、基本的运用方法
2.1.1、把主体放线上，当然线状的主体才能放线上。
在构图中我们经常遇到正方形/长方形等规则的形状，前期我们把规则的形状中心放在黄金分割线上，等所有内容添加完成后再分析画面的重量，微调来平衡画面。
不是所有的物体都是刚刚好放在黄金分割线上。轮廓化的形状应该根据什么来跟黄金分割线重合呢？应该是形状的重心，而不是中心。
（如上图）长方形的图片是有规律的形状，我们把它的中心暂时先放在右黄金分割线上，从平衡角度来看还是右边重，因为我们还没有把页面所以元素放进去，到时候可以根据画面的平衡感来微调。
2.1.2、多条黄金风格线构图
一个画面中，可以切割成上下左右四个黄金分割线，前期练习时可以尽可能把黄金分割线利用好。
（如上图）我们把图片放在右黄金分割线上，正文大标题放在上黄金分割线上。这样就搭上俩条黄金分割线了，再加上logo/分类/导航等信息整个界面就更完整了。（如下图）
2.2、具体选择哪一条？
初期进行练习的时候，黄金分割线能搭上几条就搭上几条。这么多黄金分割线，如果我用1条到2条，到底选择哪一条？
2.2.1、根据元素选择
界面设计时要根据元素多少进行选取更合适的黄金分割线。
（如上图）最终所有元素都确定后，我们把图片放右黄金分割线上，正文大标题放在上黄金分割线上，正文跟按钮的中心放在下黄金分割线上，图片轮播按钮的中心放在左黄金分割线上。这样四条黄金分割线搭上都利用起来。在这基础之上再去微调相信画面会更出彩的。
2.2.2、根据哪边更精彩选择画面
把上下或左右两条黄金分割线对比一下就能确定参考哪一条黄金分割线了。
（如上图）我们开始把图片放在下黄金分割线上，上面留了太多空间，图片的内容展示的也很少，画面感不够丰富。
（如上图）根据画面的丰富程度，我们把图片放在靠近上黄金分割线的位置，把图片中主体的放在靠近右黄金分割线附近。然后再添加内容丰富画面，我们为画面添加logo/数据/导航/分类/按钮，让画面更丰满。（如下图）
2.2.3、视线的影响
人和动物的视线朝向会影响到它的摆放位置。
（如上图）小狗狗的视觉朝向是左边，所以我们肯定得把小狗狗放右边。因为它是一个不规则造型，当遇到不规则造型时我们应该尝试找到它的重心，正好它整个形态成一条直线，它的重心应该是沿鼻子的往右的一条隐形的线。主体确认好后，我们在加上logo/标题/正文/导航进行排版，保证画面平衡进行微调。（如下图）
简化的黄金分割线
三分线
我们还有个困难，那就是0.618:1的黄金分割线的位置确实不是很好找。所以对于设计师来说，我们有一种简化黄金分割线的做法？就是三分线。
什么意思呢？左边是黄金分割线，右边是三分线。三分线就是均匀的把长方形的长和宽切三段，均匀的砍三段，每个方格都是一样大小。
三分线的位置跟黄金风格线的位置差不了多少，但是黄金分割线比起三分线更靠近中央的位置，是这么一个概念。
(如上图)绿色的虚线是右黄金分割线的位置，黄色的虚线是右三分线的位置，我们没有直接把主体的重心直接放在黄金分割线上，在这个画面中，因为左右的信息量很大，给人很重的压迫感，所以主体如果太靠近左边就会让画面失去平衡，这时候我们就把主体放在了三分线上。
不要说很严谨的把它重心摆在三分线上，一来黄金分割线真实所在的位置是三分线往里靠一点的位置，二来我们说黄金分割线构图／三分线构图不是说让你一定要完全重叠，大差不差就行，具体情况还是要具体分析。
黄金分割还不止这么多的表现形式。它还有一种更复杂的表现形式叫黄金螺旋线。而从黄金螺旋线里可以推倒出一个黄金兴趣点。
于是我们就把最佳兴趣点和黄金螺旋线都统称为黄金分割的衍生品。在设计中应该是算比较高级的一种构图技法了。
03
最佳兴趣点
来看看黄金螺旋线衍生的最佳兴趣点在什么位置？（如下图）
在设计中实际应用的时候，想找出这个点来绝对不是很容易的事情。所以怎么办呢？有简单找到最佳兴趣点的方法吗？长方形的一条斜线链接起来，另一个顶点画一条垂直于这条斜线的点基本就是最佳兴趣点的位置。（如下图）
画面中不止一个最佳兴趣点，一个画面中会有四个兴趣点。会更好的方便我们利用。（如下图）
画面长宽比不同，最佳兴趣点的位置也不同。这里我们列举常用的长宽比尺寸4:3/3:2/16:9/1:1。（如下图）
在移动端主流尺寸中，iOS尺寸使用750*1334，安卓尺寸使用1080*1920。这俩个尺寸正好等同于一倍图375*667的比例。
案例分析
（如上图）图片案例来自摄影师7kidz的摄影作品，图片质量很高，整体风格很符合现在主流的抖音风，那就顺便做个直播类的ui界面设计来诠释最佳兴趣点的魅力。
案例一同样大小的图片我们按照两种方式进行摆放，左边的图片我们参考黄金分割线，把人物的眼睛靠近上黄金分割线的位置；右边的图片我们把人物的右眼放在了右上的最佳兴趣点的位置。然后我们去掉辅助线再对比下（如下图）
虽然我们参考了两种方式进行排版，图片本身就很精美，很多人就感觉随便放放就好了，左边的黄金分割线构图单看也是很棒的，所谓没有对比就没有伤害，当黄金分割线遇上最佳兴趣点，哪个好效果是显而易见的。从画面的饱和度跟视觉引导显然右边的整体感觉更饱满一些。加上直播平台元素整个界面（如下图）
案例二画面中人物前方的效果很出彩，想办法尽可能保留，所以把人物右眼放在右上最佳兴趣点的位置，正好左前方灯管不规则的物体的重心也恰巧在左上最佳兴趣点的位置，这样就有运用了两个最佳兴趣点，画面更加丰富起来，加上直播平台元素整个界面（如下图）
案例三画面中人物的睫毛放在右上最佳兴趣点的位置，刚看到画面的时候我们第一眼会被美美的胸部所吸引，但是我们眼神会顺势往右上看到美女的睫毛。是的因为我们把它放在了最佳兴趣点的位置，不会因为它占的面积很小而被忽略。这个案例其实最具代表性。加上直播平台元素整个界面（如下图）
“最佳兴趣点是不是和黄金分割线是重叠的？”
最佳兴趣点和黄金分割线交点不重合的，黄金分割线的交叉点比最佳兴趣点更靠近画面中心。
“那是不是就是三分线的横竖线相交处啊？”
最佳兴趣点和三分线交点也不重合？最佳兴趣点比三分线还要更外一点。
最佳兴趣点可以和黄金分割线或三分线一起使用吗？
答案是肯定的，一起使用会增加我们布局的多样性，内容可以排的更加丰富。
（如上图）画面中最突出的是人物的头发，我们把头发的形成的点放在了左上最佳兴趣点的位置，微调人物，在画面中的人物重心差不多在三分线所在的这条直线上。标题正好做为一个整体的中心放在下黄金分割线的位置上。再加上音乐封面/歌曲名/播放按钮，微调画面使画面达到视觉平衡。
（如上图）音乐专辑封面为正方形，最佳兴趣点就是正方形的中心点，封面人物重心放在正方形的中心，封面放在靠近上黄金分割线的位置；大标题差不多在左上最佳兴趣点的位置，整个画面重心在左黄金分割线的位置，为了达到视觉平衡，右上角加了一个头像形成大小对比，让画面更稳定，不至于左边太重而失去平衡。加上播放按钮/推荐的封面后再调整。（如下图）
04
黄金螺旋线
斐波那契螺旋线也称“黄金螺旋”，是根据斐波那契数列画出来的螺旋曲线，自然界中存在许多斐波那契螺旋线的图案。是自然界最完美的经典黄金比例。
斐波那契螺旋线，以斐波那契数为边的正方形拼成的长方形，然后在正方形里面画一个90度的扇形，连起来的弧线就是斐波那契螺旋线。
斐波那契数列（FibonacciSequence）数列是这样一个数列：
1、1、2、3、5、8、13、21、34、55、89…
在数学上，斐波那契数列是以递归的方法来定义：
F0=1
F1=1
Fn=F(n-1)+F(n-2)
(n>=2，n∈N*)
斐波那契数列比在字号大小、界面布局、Logo设计上具体有哪些用法？
字号大小
4.1.1 大字体与小字体比例系统
我们在选择一个字号大小做为参考时，我们正常会选择最大字号或最小字号做为参考。按照黄金比1:1.618可以得到比它大的字体，按照黄金比1:0.618可以得到比它小的字体。
为了方便排版，我们除了可以使用黄金分割比外，还可以使用斐波那契数列比。可以有更多灵活的排版方式，通过对比可以选择最适合的。
斐波那契数列比1:1/1:2/1:3/2:3/1:5/2:5/3:5 ...
如上图我们可以根据字体的高度比来排版，这里我们大字高度：间距：小字高度比为8:5:5，可以灵活使用斐波那契数列比，多排几个版式找到最适合的一个。
4.1.2 文字的长度比例
在设计字体大小的时候，可以根据字体的长度来做为参考，黄金螺旋线整体长度为140px,下面的字体比较长我们就乘以1.618来得到比较大的比例226.52，取整数为226，我们对应长度字号取整数即可。
界面布局
上图案例由UISTAR提供，整个界面的布局很舒服，字间距也恰到好处。在做后台界面，客户端界面时候很多时候会出现界面分段布局，很多时候认为后台不是特别重要而忽略了它的美观性。看下图我们应该怎么通过斐波那契数列比来切割画面
我们通过斐波那契数列比8:5:3:2:1绘制了正方形，在后台复杂的界面中我们肯定要参考画面中重要的最小宽度来确定这个比例大小，红框就是我们确定的最小宽度，确定宽度后8:5:3:2:1得到大小不一的方格，剩下来就是根据内容自由组合合适的方格。
很神奇的事情发生了，好的作品大体都符合这个规律，几像素的偏差已经不重要的，所以前期我们可以参考方法论，当你的能力上来之后就可以放弃它慢慢凭自己的感觉来判断作品的好坏。
LOGO设计
黄金斐波那契螺旋法是国际上通用的LOGO设计手法，也是最工整最严谨的设计手法。
BIGD牛大大已经出了类似教程，具体请查看。《Ai中用黄金比例法快速作图》
这边引用BIGD视频教程是想让知识更系统，也省点精力撸其他的干货。
我写了一篇《如何学习Yoga Style？》，里面有圆切法的基础教程。
这里说一下为什么要用黄金螺旋线去重新定义标识呢？
打个比方很多时候我们会找一张动物图片用圆切法去绘制它，但是我们绘制时候因为不知道怎么去做减法，会让这个形态变的复杂，绘制结果更多像是图案或者图形，而不是标识。我们使用黄金螺旋比例去切形态的时候要抓住动物的主体形态和特征，尽可能的抽象化简单化。
黄金螺旋线在logo中的应用
黄金螺旋比例用圆去切割很多人已经会了，但是最最最高级的就利用好黄金螺旋线。最近站酷很火的一个设计师DAINOGO，它的作品中就用到了黄金螺旋线，能用一个圆解决的绝对不用俩个圆。我们在设计中如果有运用到弧线的地方可以考虑使用黄金螺旋线做为参考。
作者：水手哥 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
设计中的重复是什么？
在平面设计中，重复构成是常用的一种构成方法，通过重复可以使画面达到和谐、统一的视觉效果，并能加强给人的印象，也可以达到一种有规律的节奏感和形式美感。
排版的四大原则：对比、对齐、亲密性、重复，重复在排版中也占据了一席之地，可见它在设计中分量是不可小觑的。
格式塔原理：接近性、相似性、连续性、封闭性、对称性、主体/背景、共同运动，格式塔原理中的对称性就是重复的一种表现方式；格式塔原理中的相似性算是重复中自带的一种突变。
01、重复
重复是设计中最基本的形式。在同一设计中，相同的形象出现过两次或两次以上就形成了重复。
在产品设计中重复的元素有大小、形状、配色、间距、组件、圆角值；在交互层面重复的元素有位移（方向）、旋转、缩放、不透明度、相同属性交互要一致。
在产品设计的前期设计师需要输出界面设计，为了方便下游前端工程师更好的规范和适配，也要保重产品后期上线产品视觉稿的高度还原，这就要求设计师输出一整套产品的视觉和交互规范。
重复配色
在app store 的页面中使用了相同的颜色进行提醒，方便用户快速查找和点击，整体的蓝色又给人理性的感觉，看到付费app的好评数可以看出是因为产品好才推荐你进行理性消费。
重复大小
INS主页第一排头像相同大小进行重复排列，与内容的人物头像有大小对比之分；INS搜索页采用了九宫格布局，为了重复中有变化它把右边的四个方格合并成一个内容展示区域，推荐好的热门视频。
重复间距
Airbnb界面中的间距非常规范，首页大体采用了谷歌里面的8px原则，每个间距之间的规范很多1:2的比例关系。好的比例规范会给界面带来简洁大气的感觉。
重复组件
（如图标注）INS界面中用了统一组件，相同的圆角和高度规范又给画面增加了统一性和连贯性。
02、突变
在相同的形象重复出现时，尝试去改变某一形象的形状、颜色、大小、不透明度等来丰富画面时我们称之为突变。
格式塔原理中的相似性也是重复中突变的一种形式。
在产品设计中我们运用的突变的目的很简单就是为了让其更加突出，多用于区分当前状态、选中状态和默认状态。
banner轮播
banner轮播图上面的提示状态会根据当前状态和默认状态进行区分，把当前状态进行变化从而进行凸显出来。
导航栏分类
导航栏分类上面的提示状态也是根据当前状态和默认状态进行区分，把当前状态进行变化从而进行凸显出来。
按钮
在登录注册页面中，我们会通过大的色块凸显登录按钮，引导用户快速登录进入到app里面。也减少了用户的思考过程，符合大脑的惰性。
但是在很多windows系统中，卸载软件时会跟你玩文字游戏，会用非、否、不是等诱导你作出错误的判断。
feed流
feed流是产品中持续更新并呈现给用户内容的信息流。feed流在产品展现形式有列表、瀑布流、卡片形式。
站酷首页feed流里面会把内容分为作品和文章，之前版本中的作品和文章的样式是一样的，新版本中重点是推作品，当文章出现时通过改变文章的排版进行区分，重复里面又带有变化。
03、节奏感
多少元素排列可以形成节奏感，一般来说是3个或3个以上，两个你不能说是节奏感只能说它是重复。当3个或3个以上整齐的排列就会形成一种节奏感。
左右滑动
（如图来自uistar）界面中三个书籍整齐的排列在一起，可以通过左右滑动来获取更多的书籍。在使用左右滑动效果时，应考虑元素的数量，尽量不要超过10个以上。
列表页
（如图来自uistar）列表页面整齐的排列在一起有一定的节奏感，通过改变icon的配色来丰富画面。
04、韵律
元素在排列的过程中有形状、颜色、大小、不透明度等有规律的变化就形成了一种韵律感。在动效上主要还是通过位移、放大缩小、旋转、不透明等变化来制作界面动画。
最美有物
最美有物app中的画报界面中，通过改变每个界面的大小比例有序的排列在一起，通过上下滑动可以快速浏览标题，进行查找翻阅，整个过程很流畅，整个界面有流动性和韵律感。
图表
图表在设计的时候通过不同颜色来区分不同的时间段，线条错落有致的排列增加了界面的韵律感。
配色
（如图来自Prakhar Neel Sharma和crisssamson）这俩个作品都是通过色彩按照红橙黄绿青蓝紫规律运用到界面中的背景和列表中，增加了画面的丰富感和韵律感。
重复在动效中如何运用才会有韵律感？
界面动效中主要分成当前状态动效变化和转场动效变化，界面中的元素a1对b1、a2对b2、a3对b3信息对等，能帮助界面做出很有韵律感的动效。
总结：
重复可以使画面秩序化、整齐化，形成和谐、富有节奏感的视觉效果，更加有利于人们加强对画面的记忆。
重复、突变、节奏感、韵律几种不同的方式都是存在于产品当中的，几种不同的美感可以同时存在的，只不过它适应不同人群的审美能力，审美能力高一点的更喜欢一些变化，审美能力相对基础更喜欢简单的重复。
所以画面中不断出现同样的元素这叫重复，而在很多重复里面突然出现一个变化这叫突变，相同元素整齐的排列在一起这叫节奏感，而这些元素在排列的过程中有形状、颜色、大小、不透明度等变化就形成了一种韵律感。
作者：水手哥 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
当不确定成为常态，公司的组织架构频繁变动，产品不断迭代，设计师需要跟随用户需求、业务、产品进行技能迭代，UI设计师学习数据分析、运营、交互等技能提升自己。这些技能都需要产品界面设计为载体，那么界面设计中有哪些确定不变的方法和技巧呢？那就需要对界面有更深入的理解。
互联网的项目职能有产品经理、用户体验设计师、交互设计师、UI设计师、视觉设计师、前端工程师、后端工程师、测试工程师等，每个职能岗位对界面设计的理解深度也各不相同。
交互设计师会从信息架构、概念设计、导航设计、标签设计、表单设计、搜索、筛选、关系、用户、目标、行为、场景、组件、模式等维度去观察和理解界面设计。
产品经理、交互设计师、UI设计师、前端工程师共同搭建设计系统语言时，他们会从逻辑、关系、信息、载体、容器、技术等维度把界面拆分成一个一个的组件，比如Button、Modal、List、Icon、Tab、Card、Toast、Popover等。
UI设计师、视觉设计师的视角会关注界面设计中的字体、色彩、图标、图片、布局、编排、比例、质感、栅格、风格、趋势等。
前端工程师会从代码视角理解界面结构，相关知识点有框架、容器、盒子原理、样式、标签、表单、模式、绝对定位、自适应、响应式、百分比等。
基于以上视角，现在我会以一种新的视角带你去理解和学习界面设计，它就是界面三重构。简单说就是分别从X轴、Y轴、Z轴三个维度去理解和解读界面设计。但是在模型抽象时遇到了困难，如图模型一是从界面、交互、前端的X轴、Y轴、Z轴去解读，模型二是从X轴、Y轴、Z轴的界面、交互、前端的去解读。
模型的抽象不够简洁，有很多重复的点。这种结构很像组件化中的类别和状态。我尝试用组件化命名的方式梳理出平面逻辑图。梳理出界面—X、界面—Y、界面—Z、界面—XY、界面—XZ、界面—YZ，因为交互和前端都是建立在界面之上的，所以就有了界面+交互—X、界面+前端—X。当写到界面X轴相关知识时，如果有交互、前端的知识点，可以在此基础上接着写。
根据平面逻辑图我抽象出一个更简单的模型。可以从界面的X、Y、Z、XY、XZ、YZ去输出相关知识点，交互、前端在界面三重构的基础上阐述。
X轴设计中有位置的结构关系，位置的排序，段落文本行长的易读性，交互和前端中的应用。
X轴从位置上可以简化为左右、左中右的结构关系。
在左右的结构关系中，自古就有左为上，人的视线浏览顺序是从左到右，从上往下。所以重要的信息内容可以优先放在左边。在舞台剧表演中，重要的角色登场往往也是从左边进场。微信的发现列表页把图标加文字放置左边，右边放箭头指向。
左中右的结构布局让层级更加丰富，从而增加层次感。左中右的位置顺序是可以被定义的，常见的有左中右对应一二三的位置关系，也可以对应二一三的位置关系。这两种位置关系分别巩固了左或中为最重要的地位。
我们来看看App界面的底部Tab栏的结构，当我们随意打开一个App时，你还记得底部Tab从左到右的栏目分别是什么呢？可能经常使用的App我们很熟悉，对于不熟悉的应用可能就不是很了解。但是我们依然可以从中找到规律，就是第一个栏目往往是首页，最后一个是我的个人中心，其他的相对比较模糊。
由此我们推断出从左往右的顺序并不是一二三四依次递减，而是一三四二递减结束处呈上升趋势。这种秩序不但适用于C端产品的界面设计，同样也适用于B端的界面设计。B端产品界面的导航结构第一个是首页（工作台）或最重要的内容分类，最后一个是更多或设置。同样遵循以上规则。
右侧位置重要最典型就是模态设计，在对话框设计中，确定和取消按钮往往把最重要的放置在界面的右侧，这时位置的排序确定为一，取消为二。
文字段落编排时更多的需要考虑段落文本的易读性，当你设计C端产品时，因为屏幕尺寸的原因会忽略段落文本的行长，但在Web、B端设计中，行长的定义可以影响到读者的阅读效率和体验。
美国芝加哥有学者做过一个试验，人的眼睛是在不停地跳动，在跳动的时候是看不见字的，停下来的时候才能看见字，而且每次停下来只能看六个字。所以一段文字不要排得太长，过长眼睛在阅读时会很疲劳，在阅读时我们更适合阅读较短的文字。
网页新闻详情页面的行长，我研究了纽约时报为640px、华盛顿邮报680px、Medium680px，所以我们设计师可以控制行长最大在640—680px。但是西文和汉字还是有区别的，站在前人的规则上去学习定义规则更加重要。
位置的重要秩序其实是很容易打破的，在界面固定不变时结构中相对稳定，当交互大兄弟来了，说我想尝试改变改变，如图把手机的网易云音乐和QQ音乐进行组合成组，原来的一二三四的结构就被打破了，变成了一三二的视觉结构关系。点开组合后，这时候用户大兄弟来了，网易云音乐与QQ音乐的排列先后次序取决于产品在用户心中的重要程度和操作频次。因人而异，所以大家一定要带着客观的心态去学习，不同视角和不同思考维度都会有异样的结果。
X轴设计从前端的角度就是响应式和断点，因为载体的容器大小不同，前端代码主要用Media来打断点，不同断点之间会定义相对应的样式。内容元素按照栅格系统进行适配调整。
物理几何中心是居中的，但是人的视觉中心是偏上的，有时候眼见为实是假的，视错觉中有大量的案例，在色彩和图形设计中需要视错觉的矫正。
如下图APP的闪屏页的Logo居中布局，考虑到有向下的重力和视觉中心偏上的理论，往往把Logo居于物理中心上方。
倒金字塔结构是按重要性递减顺序安排消息的一种结构形式。界面展示的信息层级多为倒金字塔结构，重要的信息放上面，越往下信息层级越低。网页设计中还会有折线之上的运用，以前人们看报纸是折叠的，但是为了告知读书报纸展示也是有内容的，所以折叠设计时看到一些图片引导读者打开。
Apple官网的信息层级也遵循倒金字塔信息层级，上方Logo加导航，中间为最新发布的产品，下方为历史发布产品。信息重要层级依次递减。Apple官网下方露出iPhone的照片来引导用户滚动下拉浏览。
纵向模式是用户习惯自上而下滚动来浏览更多信息，当用户还未确定目标信息时，纵向视觉流能帮助用户在不需要回扫的情况下获取更多信息。如图微信APP的发现界面，用户会选择一列一列快速浏览直到找到某一目标信息后，再横向浏览细节。那么问题来了，上文中提到倒金字塔信息层级，重要的信息应该放置上方，为什么APP的Tab栏很重要却放置在界面底部，下文隐喻设计中“驾驶舱隐喻”会讲到。
X轴与Y轴组合后就形成了一个平面，所以平面设计的理论知识在此次也适用。
当我们做界面设计时，为了让界面的元素统一为一个整体时，给他们整体来个框框就形成了一个一个盒子的样式，这样更有利于组合信息。典型的设计有卡片、列表、模块化等。
在Dribbble的作品展示中，由于作品图片展示比例为4:3，为了平衡界面中的元素，常常在四个角放一些小的相关元素来平衡画面。我们来看一下R神的插画作品中大量使用了四角压边的设计技巧。
运用到界面设计中最典型的就是卡片设计，比如个人中心、银行卡、列表页面等。如图银行卡就采用卡片设计，四角放置信息，整体给人简洁大气的感觉。
四角压边在设计中是可以灵活运用的，可以把四角压边变成三角压边，两角压边。如图当四角压边的A1、B1与A2、B2位置慢慢移动至重合时，四角压边就变成了两角压边，多用于列表页。
四角压边的本质是跷跷板原理，通过调整元素让界面达到平衡。跷跷板原理本质是平衡，需要关注的是中间的一条水平线。微信列表设计中就运用了这个原理来平衡界面。在苹果的原生设计中列表之间分割线是不包含图标且一直切到最后侧。因为左边的图标视觉重量大，右边的重量小，但是通过缩短左侧的杠杆长度并增加右侧的杠杆长度来达到视觉平衡。这种设计技巧在编排设计会被大量运用。
8点网格理论来源于谷歌Material Design的设计语言，4点网格理论来源于苹果iOS的设计语言。个人还是更加喜欢iOS的4点网格，因为原子单位越小，可呈现的方式越多，可解决的问题方案也越多。8点网格可以理解为最小单位，其他使用的单位都为8的倍数。8点网格多用于DIV盒子与盒子之间的间距。图标、头像等固定尺寸的也可以使用8的倍数。
苹果和谷歌都是在定义产品系统中的度量单位，西方人一直想定义度量这个问题，其中最有名的就是勒·柯布西耶的《模度》，他的理论是以西方人的的比例结构来定义规范，并不能适用于全世界更多的人种比如东方人、非洲人。但是苹果设计团队发现世界上所有人类的手指触摸屏幕大小是一致的，最小为44pt。iOS定义了人类使用触控屏的基本度量，44pt也是4的倍率，这才是我喜欢iOS的4点网格的真正原因。
读者在看界面的时候，眼睛的视线受到画面内容的吸引，就会产生一个视觉先后的次序，将这些视觉集中点的先后依次连起来，就形成了视觉流导向。 设计师经常会考虑版面或界面上的文字是否会被阅读，实际上很多文字都不会被阅读，但是可能会被浏览。视觉眼动仪可以检测到人们如何浏览一个页面的，从找到切入点，到了解界面中信息关注的先后次序，从而调整界面元素，来引导用户去关注重要且有用的信息。常用的视觉流导向有F模式、Z模式、古腾堡图表法等。
尼尔森F型视觉模型由Jakob Nielsen于2006年提出，他指出用户在浏览界面时，视线动线会呈现宛如英文字母F的形状，这种视觉浏览模式主要包括以下三个方面：
根据尼尔森F模型，我们可以得出几个心理暗示：
Z模式是基于用户从左到右自上而下的阅读习惯，用户首先关注的上半部页面的内容，依照从头部的左边到右边，再沿着对角线浏览下一部分的中部左到中部右，循环往复的浏览模式。如图头条的文本编排从标题从左到右阅读到文本从左到右阅读。
古登堡图表法（Gutenberg Diagram）又称对角线平衡法则（Diagonal Balance），由14世纪西方活字印刷术的发明人约翰·古腾堡提出。古登堡图表将要画面显示的东西分成了四个象限：
如图小程序的授权页从Logo到允许高亮按钮就是对角线平衡构图。
Z轴设计可分为视觉度层级（单界面）、结构层级（单界面）、产品用户流程（多界面）。
视觉度层级是根据界面元素的视觉表现来进行划分浏览的先后次序。界面的视觉度表现技法有主体与背景、投影、色彩字重字号等。
界面中使用背景色是让元素向前进，背景色多为灰色且有颜色倾向，偏冷色或暖色。微信界面使用了偏冷色背景，Craft界面使用了偏暖色背景。当背景色为白色时就需要留白、线条、投影来区分层级。
界面中使用投影可以增加内容的视觉层级，之前追波流行的弥散投影也是为了增加界面视觉层级。谷歌Material Design就是运用纸张的物理投影来映射到设计系统中。在界面设计中使用投影时要思考这种技巧的保鲜时长。
色彩最典型的就是App的消息红色圆点，红色的波长最长，所以用最突出的红色来提醒用户有新动态。字重是从面积的大小衡量的，标题文字常常加字重来提升视觉。在定义组件时，鼠标悬浮、Hover的各种状态就是用颜色来区分，目的是让用户操作后有反馈的感知。
界面元素中的结构层级可以分为内容层、导航层、遮罩层、弹出层。内容层是界面内容元素的承载；导航层是位于内容之上，位置相对静止；遮罩层配合弹出层一起使用，又叫模态层；弹出层属于轻量化设计，比如消息通知、下拉菜单和加载、报错等状态提醒。
如图模态对话框是用户在完成任务时，不希望跳转页面而打断工作流程，而是用Modal对话框在一个界面上承载相应的操作。对于信息量不大，容器可展示的操作可用模态对话框。
产品的界面设计需要从概念到信息分类到信息架构，目的是方便用户快速的搜索、筛选、辨别出有用的信息。交互设计需要学习辛向阳教授的交互设计五要素：用户、行为、目标、场景、媒介。
产品的Z轴设计其实是从平面（界面）、空间（层级）、架构（关系）梳理出结构关系，但站在产品层面最重要的是信息与用户的交互设计，关注用户旅程地图中用户流程。用户流程需要多界面之间跳转，这就形成了产品的Z轴界面设计。
用户流程是用户从打开APP到完成任务关闭APP的使用全过程，包括了用户看到什么信息，做了什么事。 疫情期间每天都需要使用随申办小程序，用户流程是打开微信，进入到微信首页，下拉查看常用小程序，点击随申办，查看随申办，退出小程序。
根据用户流程优化体验，用户流程越短越好，操作流程尽量不超过5步。用户流程要顾及头尾，即用户进入到一个新界面会看到什么信息，用户成功完成任务后会跳转到哪里，或显示哪些反馈信息。这些都是最容易被遗忘的接触点。
基于用户的使用场景。以小水查找朋友圈某个朋友的信息为例，需要思考用户有哪些场景，如果知道谁发的，就会先通过找到人，然后进入其朋友圈找到信息。如果忘记谁发的呢，那只能凭记忆里在朋友圈慢慢滑动，直到找到该信息。
以上从交互设计五要素行为和场景对用户流程进行分析，还可以从用户、目标、媒介去思考如何帮用户高效的完成任务。拆解用户方法有用户画像分类、北极星指标分类、用户目标分类、用户角色分类、利益相关者等。拆解媒介的方法有竞品分析、头脑风暴、ABTest、埋点数据分析等。
上文已经讲了Z轴相关设计，为什么还要写XZ轴、YZ轴的设计呢，从X、Y、Z、XY、XZ、YZ更有逻辑性和完整性，也确定存在一小部分的案例可以解析。
Banner轮播图除了横向的X轴出场次序，还有Z轴点点一对一的当前状态。移动端受容器大小限制多为Z轴设计，Web端容器变大可以变成左右的交互设计形式。
导航栏是Z轴的视觉与交互结合，当前状态需要重点突出，视觉向前进，点击导航栏后底部的横线会有动效移动，可以侧滑导航栏选择类别，这样效率会更高；也可以侧滑下方内容切换选择。
列表侧滑是使用内嵌的布局方式，界面设计中用户习惯是先查看再操作，当容器大小放置不下可先隐藏操作按钮。QQ聊天界面侧滑内容可以引用该内容。微信消息列表侧滑出现标为未读、不显示、删除操作按钮。
YZ轴多结合界面交互一起设计，通过用户操作形成Z轴信息架构的变化。YZ轴设计多用于信息流、键盘输入等
信息流的设计多为Y轴设计，Y轴急促、紧张的情绪会让用户不停的刷信息。信息流设计中采用相似的界面结构保持统一，比如固定的头像位置，固定的操作按钮位置，标题文本形式等。微信朋友圈信息流一整块一整块的加载提高阅读效率；而抖音的视频流是一个一个加载，更注重精准推送和沉浸式的观看体验。
键盘输入也是采用YZ轴设计方式，不同场景下的键盘输入交互也有差别，微信聊天界面的键盘输入框放置在底部，每次调用键盘组件时界面会从下往上移动；而朋友圈评论时，键盘组件除了从下往上移动，还要对齐到对应评论的内容上。前端的定位技术会有所不同。
界面三重构模型中的界面可以替换成交互、前端、容器、用户、信息等，当然也可以替换成桌面端、Web、小程序、APP、B端设计等。这样就可以把中间的要素抽象成N，界面三重构模型升级为N——X轴、Y轴、Z轴，N可以为单一的内容比如界面，也可以是N=N+N比如界面加交互一起思考。简化的模型更适合微观层面的细节设计，并不适合于宏观视角的分析设计。
我们来举一个组件的例子，比如导航设计共分为二级导航，我们常规会显示出一级导航。一级导航可以从X轴、Y轴两个维度去思考，X轴的多为横向全局导航，Y轴多为侧边导航栏。当交互大兄弟来显示二级导航时可以平铺（XY）、上浮（Z）、内嵌（Z），二级导航展示方式还需要考虑容器大兄弟的意见，容器够大就可以选择平铺，容器小就展开收起的交互模式，展开就会有上浮和内嵌的两种形式。
模型抽象的N是随时发生变化，对应的界面设计形态也会发生变化，但是X轴、Y轴、Z轴的方法和设计技巧是相对不变的。只是你知道或不知道，会用或不会用的区别。产品设计中常用的两个方法是等价设计和同形异构。
等价设计是帮助用户完成任务的结果是一致的，但过程可能不同，又或者是产品的逻辑结构是一致的，但设计的外在形式有差别。
如图京东购物车的数量添加减少功能是展示出来的，直接可以添加可减少商品数量；但是淘宝购物车的数量是展示结果，修改商品数量需要点击后出现步进器组件。这两个设计形式就是等价设计，等价设计的好坏需要考虑很多因素，用户、目标、场景、手段、行为、容器、信息关系、生活方式等。存在即合理，合适最重要。
同形异构是指不同的信息、数据类型设计出相同的外在形式。微信消息列表也中有微信广告助手、服务通知、订阅号消息、文件传输助手、个人聊天、群聊天等，这些消息的数据类型、对象各不相同，可是外在的结构形式是一样的，这样做的目的是简化、统一，通过图标和头像来区分人、应用、工具的消息差异。
以上总结的界面三重构相关知识、理论、技巧都有其使用范围，那么有没有一种设计方法可以凌驾于界面三重构模型之上呢，答案是肯定的，那就是隐喻设计。
什么是隐喻设计？我们应该怎么去理解它呢？隐喻可以理解为隐含的相似性，它用想象的方式将某一物体与另一物体相联系，并把二者的特征、情感等相互结合转移。如果对隐喻设计感兴趣可以搜索我之前写过的文章《揭开隐喻设计的面纱-你不知道的隐喻设计》
隐喻设计是通过象征、类比的手法将复杂抽象的概念简明化、具象化、降低用户学习使用的成本，为用户创造清晰、明了、舒适的操作体验。产品设计具体表现在苹果的ios操作系统和谷歌的Material design。
iOS六大设计原则：AestheticIntegrity(审美完整性)、Consistency(一致性)、Direct Manipulation(直接操作)、Feedback(反馈)、Metaphors(隐喻)、User Control(用户控制)。
Metaphors(隐喻设计)当一个app的虚拟对象和动作都是对熟悉事物的隐喻时（不管基于现实世界还是数字世界），用户学习的更快；隐喻设计在iOS系统中很好的得到体现，因为用户是直接与屏幕产生物理交互的。
用户移动视图来查看更多的内容；拖拽内容；切换开关、移动滑块并且直接滚动来选取值；甚至可以像翻书或杂志一样轻快翻页。
关于隐喻设计还可以用另一个概念来表达，那就是心智模型。因为人类几千年的发展，虽然科技进步很快，外部环境也发生剧烈变化，但是人类的心智进步其实是很慢很慢的。
心智模型最早是由苏格兰心理学家苏珊·凯里在1943年提出的，是指在人们心中根深蒂固存在的, 影响人们认识世界、解释世界、面对世界, 以及如何采取行动的陈见、假设和印象。心智模型是一种内部表征, 但这种表征并不是对外部世界的完全模拟, 具备不正确性和不科学性等。因为用户心智模型存在这些不足, 所以需要了解其偏差与错误的来源, 以便今后采取适当的措施提高用户与系统的交互效率。
在产品设计的系统领域，心智模型是指人们对于产品系统的理解，用户需要了解这款产品是干嘛的、它有哪些功能、这款产品解决了我什么问题、我要如何使用该产品。每个用户将具有不同的思维模式，他们对产品或网站的进一步体验将逐渐改变和调整其思维模式。
心智模型其实是通过学习、感悟不断提升自我认知的过程，还记得我刚开始学习软件时候，如合成软件Photoshop、三维软件C4d。当我第一次接触这类软件时，感觉整个人摸不着头脑，太多的概念都不清楚，比如通道、图层样式、曲面建模、打灯光、动态图形等。踏踏实实的去学习这款软件是最有效的方式，通过不断的试错和总结，慢慢的得心应手，这样我们对于软件的心智模型就会逐渐形成。
但是有些心智是和我们生活方式、习惯、文化息息相关的。日本设计师深泽直人就提出了一种叫做无意识设计的设计理念，又称为“直觉“。其实在界面设计中也存在日常生活与线上产品的映射。所以设计师需要有好奇心、有共情、有洞见，才能很好理解设计来源于生活这句话。
X轴与Y轴的情绪可以从日常生活中找到答案，星巴克、瑞幸的店铺使用了X轴的横向排列，而在肯德基、麦当劳的店面排队使用了Y轴竖向排列的方式。我们尝试用抽象思维把它们进行图形化，可以表达的更加直观。
星巴克、瑞幸的店铺使用了X轴的横向排列，用户可以看到工作人员不停工作，哪怕需要等待一会也不会很压抑，整个体验过程会给人一种舒适、安逸、闲散。而肯德基、麦当劳的店面排队使用了Y轴竖向排列，会营造一种热闹的感觉，因为是快餐需要快速的售卖商品就需要给用户营销一种紧张急促的感觉，买完就走的即视感。
通过对日常生活和物理世界的映射，设计师在产品设计时可以考虑使用X轴和Y轴的情绪设计，比如文本采用横向排列会给用户带来一种平静、舒适的体验。APP底部的Tab栏横向排列希望用户花更多的时间浏览每个栏目的内容，这时候内容的好坏、吸引度也是重要的衡量指标。
在信息流的设计中大量采用Y轴，因为Y轴紧张、急促的感觉会让用户下意识的快速下滑，比如微信的朋友圈；抖音上滑来切换视频；直播互动通过大量评论来营销热闹氛围。
在前文中提到人阅读浏览的顺序是从左往右，从上往下的。那么应该把重要的东西放置在左边或者上边。Tab栏作为APP应用的主导航为什么却放置在界面的底部，这时候就需要用隐喻设计来解释了。就好比科学的尽头是哲学，哲学的尽头是佛学一样。
日常生活中开车、骑车，手永远是在控制方向和操作，而视线前方就是驾驶员需要浏览阅读的内容，比如行人、马路、车流等。把驾驶舱隐喻映射到产品界面中，底部Tab栏是引导用户去往哪里，上方动态变化来满足不同用户对不同内容的需求。
在线下学校的教室里，老师提出问题学生们举手回答的场景，抽象一层其实是一个提问者、多个回答者的逻辑，是一对多的关系。知乎问答界面就采用了教室的问答隐喻设计，一个问题多个回答。
在电影院看电影时，屏幕在正前方，很多人共同观看一个屏幕。其实也是一对多的关系。B站的直播界面平台，也是数以万计的人共同观看一个直播，下面的评论弹幕映射电影院的欢声笑语。
协同办公领域，在会议室开会是再寻常不过了，会议室开会时能同时看到同事的面部表情，每个同事都可以投屏进行共享会议内容。Zoom的视频会议软件采用了线下会议隐喻设计，Zoom视频会议支持多人视频讨论，每个人都可以共享屏幕进行实时分享内容。
互联网行业才短短十几年，但人类的日常生活却已经演化了几千年。好的生活方式和习惯会慢慢的保留下来。当设计产品时遇到问题没有方向时，不妨停下脚步看看人们在日常生活中是如何运作？能不能从生活中吸取灵感。
界面三重构给设计师提供一个崭新视角，相关的知识、理论、技巧还不完备。设计师可以根据自己的经验和阅历进行迭代。从用户体验五要素的视角去看，界面三重构算是从结构和表现层进行挖掘设计的可能性，偏微观层面的设计。在实际运用中需要结合用户、信息、交互、界面、前端、场景、流程等多维度思考。
作者：水手哥 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
随着C端市场饱和与数字化的浪潮下，实体经济、ToB 、ToG的产业再次迎来了它的曙光。视频动效的作品占比也已超过C端界面设计，相信今年视频动效作品占比还会再次提升。
追波年度最佳作品来自大家最熟悉的UI8团队中的Tran Mau Tri Tam ✪，作者来自越南西贡，最佳作品截止目前355K浏览量，2933个赞。
为什么看似平平无奇的作品却能获得追波年度最佳作品呢？既不是C端也不是纯B端的作品，更像一个网页与平面的结合体。如果去掉搜索图标、分类图标和按钮，你可以理解它就是一个平面作品，一个字体加几何形体构建的作品，为了丰富画面的层次，让画面更加的活泼采用了多彩加几何色块，让标题阅读有停顿感和呼吸感。faster底部的横线让它从标题文字中脱颖而出，这种使用线条突出重要信息的设计也是今年追波设计流行趋势之一。
MetroUI是Windows8的界面设计语言，在2010年至2013年间曾经风靡一时，那也是移动互联网的发展元年，现在国家推行实体经济、数字化带动To B 、To G 的发展元年，通过几何色块（MetroUI）实现B端产品与C端设计风格的传承与衔接，你会发现历史总是惊人的相似。最后背景结合今年最流行的微软风，毛玻璃的多彩高斯模糊渐变风，年度作品当之无愧。
最后来看下按钮的设计，正常的按钮要么文字加色块，要么左图标加右文字，它设计成左文本加右图标，更加注重信息的可读性和易读性，也体现B端设计重功能和交互体验，视觉点到为止的设计理念。
下面我们来欣赏年度最佳作品里面的流行趋势吧。
字体三原则：可读性、易识性、易读性。当你同时读一篇文言文和一篇设计文章，肯定设计文章的内容可读性更好。易识性是用在字体设计上，不能过于浮夸的改变字体骨架、形体而不易识别。易读性和每个位设计师都息息相关，因为我们都需要编排文本。当我们小时候写作文时，不会写的文字可以用拼音代替。这时候读者读到拼音时会有停顿感，更加适合用户阅读。
通过给用户制作停顿感来增加用户的易读性。可以在相关联文本后面添加图片、表情、图标来更好的理解文本内容，丰富文本内涵。比如情侣间表达爱意时会输入文本，“我爱你”、“我Love你”、“我ai你”、“我❤️你”，哪个更加会有情感共鸣呢？不言而喻，相信你心中已经有答案了。
在标题文字上添加曲线来突出重要文案是2021追波最流行的趋势之一，第一个设计目的就是突显文字，其次就是想表现铅笔真实书写的感觉。之前很多带有签名的设计中，签字的文本都是手写体的感觉，手写体对比电脑的机械字体会带有一种人文气息，也会让两者之间产生一种对比、矛盾。
除了突显文本外，曲线还有视觉引导的作用。通过视觉引导让用户按照设计师编排的顺序进行浏览界面。当然还有比这更科学的工具就是眼动仪测试，通过真实用户眼睛浏览界面显示对应的热点图。
多彩高斯渐变风是从色彩的角度来传达和丰富画面的，多彩高斯渐变风其实是从制造矛盾到平衡矛盾的过程，多彩渐变多为冷暖对比来制造画面的冲突，需要控制冷暖画面的大小来实现平衡。主流的还是以暖色突显为主。多彩渐变主要起到活跃气氛、吸引目光、平衡画面的作用。
多彩高斯渐变还可以结合轻拟物、几何图形、三维等新的组合方式去创新，给用户呈现一种更加新颖的视觉表现形式。最后我们还是要回归到内容上，为了更好的传达信息需要去设计与内容相匹配的视觉风格。
B端设计的火爆带动了B端相关模块设计，更多的人也愿意尝试B端相关模块设计，侧边栏作为产品架构中重要的导航系统，好的侧边栏设计能为用户带来更好的效率。主流侧边栏都做了展开、收起、拖拽等交互效果，也是受限于PC屏幕为展示更多数据而腾空间。侧边栏主要承担的功能有导航、分类、自定义筛选、共享、新增等。追波的B端产品设计已经不再是假大空概念设计，而是一套实用美观可落地的设计。
仪表盘设计是一个很好的隐喻，想象一下开摩托车或汽车主驾驶前面的屏幕，汽车仪表有燃油表、车速表、里程表、水温表、转速表、故障指示灯等。B端类产品后台界面的仪表盘设计也需要展示一些重要的数据和各种状态，大体分为侧标栏、导航栏、待办任务、个人信息、报表数据、消息中心、快捷入口等。当然最重要的就是报表数据，团队收益、任务进度、转化比例、新增、存量、团队工作时长等都是老板或领导关心的内容。每个公司业务不同、每个人员权限不同，自定义的仪表盘也各有差异。重要的是突显数据和业务状态，需要分层级系统性去思考和设计。
复杂的事情简单化，简单的事情标准化，标准的事情流程化，流程的事情自动化。流程设计是每一个企业核心功能和业务，可自定义的管理流程系统搭建也是B端产品设计的难点，需要对业务高度抽象，让每一个业务人员可自定义的流程才是好的流程设计。
B端C化是B端产品设计的视觉表现力慢慢往C端产品设计的视觉靠齐，国内B端产品界面设计视觉水平还有很大的提高空间。除了视觉上的提升外，由于业务的发展，B端产品也开始移动化、智能化，国内主流还是通过小程序、H5来现实B端产品C端化。
轻代码化是一种低代码赋能无代码的方式，弥补无代码拓展性差、覆盖场景少的问题。在保有无代码灵活、易用、快捷的同时，又能覆盖低代码使用场景。简单理解就是无需代码开发即可如搭积木般快速、灵活地创造属于你的个性化管理系统，轻松实现多元业务场景的数字化管理。
轻代码化将功能进行打包，升级成全局可以用的配置，技术人员配置好后，业务人员在应用编辑时直接选择使用模版，绑定对应的变量即可使用。
为什么人加色块的组合方式能流行起来？还是B端行业流行带动的。B端讲的更多的是企业对企业。企业对企业除了讲行业解决方案外，还需要传达公司的价值观、使命、愿景。人加色块的组合方式非常适合体现公司的企业文化。对于一家全球化的公司不同肤色的人物组合在一起，这种人文气息和价值观已经就不言而喻了。
当然企业也需要进行营销，抓人眼球。几千年来的遗传证明了，人的大脑对食物、性、动的东西、人脸和眼睛、危险的动物很敏感。人加色块的组合方式也具有抓人眼球营销的功能。真可谓一举两得。
这种风格更适合大公司，国内的一些手机厂商OPPO、VIVO等也会通过手机+背景+人物来体现科技与人文的结合，而对于中小型公司产品差异化和行业解决方案展现应该还是重中之重。
毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的顺应当下UI扁平化的设计趋势。苹果Mac OS Big Sur系统的图标、界面中运用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三维彩色玻璃的视频教程可以在B站搜索“透光艺术-C4D创建彩色玻璃的4个技法”，完全能满足UI设计师。当然还有一个好消息就是Mac用户可以享有OC一年免费的使用权，具体安装购买方法可以上“某宝”就可以轻松搞定，真香。
轻拟物这几年一直流行，在UI设计中趋于稳定的位置。从写实到扁平再到轻拟物，其实是设计师们一路不断探索的结果。本质就是光影对形体产生的视觉感受。在色彩中对高光、亮面、明暗交界线、暗面、反光（环境光）五个部分的处理。写实三维的图标等设计更适用于简洁的画面中，扁平等设计更适用于复杂一点的界面中，比如B端产品界面中的功能图标。轻拟物可使用的范围更广，效果更佳。Sketch、Figma软件对于渐变、高光、投影、高斯模糊处理已经非常简单且出彩。
简洁设计遵从了密斯·凡德罗的“少即是多”的设计原则，在B端产品界面中更加需要简洁设计，我们最熟悉的Sketch软件界面已经是相当的简洁了。回到现实当需求功能不断增加，产品界面的编排如何取舍，如何保证界面的简洁是设计师需要深度思考的问题？如何与上级沟通？该功能是否可做可不做？是否需要埋点用数据说话？如果只是一味竞品有我们就需要有，功能不断累加只会让界面越来越重。
几何图形和几何插画有异曲同工之妙，几何图形多为产品界面和宣传内容的抽象，产品界面的几何图形多为占位符形式，加上色彩和几何色块让其成为一个整体。B端产品视觉设计C端化的进程中，几何图形、几何色彩不失为最好的突破口，相信今年追波B端产品的视觉设计一定会更上一个台阶。
几何图形另一个场景化的地方就是品牌，作为一名UI设计师一定会经历从图标到几何图形到品牌设计的过程，品牌设计的技巧基本还是以几何图形为主，至于品牌的内涵需要更深层次的解读。掌握主流品牌设计的技巧对产品定位、品牌宣传打下扎实的基础。
暗黑模式的设计是解决在微弱环境下内容也可以有更高的可读性。随着用户夜晚及深夜使用电子设备时长增大，如何在夜晚这个特定场景下使用更加舒适。合理使用暗黑模式可以减轻眼睛疲劳，提高在夜间使用的可读性。
在设计暗黑主题时，不能为了突显视觉上的逼格，而去使用高饱和度鲜艳的色彩来突显界面的品质感。而应该把舒适度、可读性作为设计的衡量指标。Material Design给出了暗黑主题的设计准则，即正文和背景之间的对比度应至少为15.8:1。按照此标准设计，可读性都还不错。这里介绍一个插件“Stark”（Figma、Sketch、XD、Chrome插件）用来测试界面的对比度。
为什么叫模块化，而不叫组件化，组件化更多的利用原子系统从原子、分子、组织、模版、页面来快速的搭建界面，但在B端产品设计中基础组件和业务组件的搭建是以提高工作效率为前提，是否有从0到1搭建B端产品组件的经历是设计师一生中最宝贵的经验之一，它能提高设计师的系统化思维、逻辑思维和抽象思维能力。
产品模块化设计就是将产品分成几个部分，也就是几个模块，每一部分都是具有独立功能，具有一致的连接接口和一致的输入、输出接口的单元，相同种类的模块在产品族中可以重用和互换，相关模块的排列组合就可以形成最终的产品。通过模块的组合配置，就可以创建不同需求的产品，满足客户的定制需求 。
插画作为设计的一大品类，不同的插画师都有自己擅长的风格，本质是都有自己的个性，但是在产品设计中更多是需要共情、共性来讲故事，表达产品理念和价值观。这就需要插画师去尝试并探寻出适合互联网产品设计类的插画风格。设计的本质是旧元素的重新组合，插画不会过时，而是需要结合当下和产品找到最匹配的设计风格。
几何插画算是插画简化的一种表现形式，人和物的形态不再写实，而是抽象成几何图形拼凑的感觉，同时保留人物形态的神韵。加上几何色块与人物交互形态的表现，传达出简洁、科技的现代感。难点还是在人物形态的表现上，平时多练习练习速写还是很有必要的。
线面插画最近一两年非常流行，准确的说是非常适合。首先线面插画主要是由线条和块面组合而成，用块面表现人物形态时某些结构会表现不出来，这时候用线条简单勾勒后，结构就会清晰明了。其次当线面插画运用在界面上时，可以打破界面纯文字或组件化的机械和沉闷感。线面插画的风格提升画面热闹感的同时，还能保持界面的干净整洁。
界面微交互动效会让用户的体验更加精致到位。想要打造优秀的产品设计，微交互和动效设计是绕不开的，UI界面设计通过微交互反馈告知用户当前正在发生的事情，所处的状态。细微的动效更能调动用户情绪，取悦用户。C端产品微交互和动效已经很成熟了，一部分功劳来自iOS系统原生自带的效果。B端产品的微交互和动效更多还是在学习海外产品，还需要给前端工程师灌输微交互和动效的设计价值，共同打造产品体验细节。
Mg动画需要很好的节奏感、韵律，每一个场景动画都需要其中的元素进行连接变化，让转场动画更加自然，MG人物动画通过点线面的动效变化让画面更加有趣、自然，通过粒子效果让特定场景无限循环会让人更加印象深刻。
MacOS Big Sur系统图标的更新带动了三维图标的流行，三维图标的应该场景还是需要有较大留白空间的界面，因为三维图标太小后就看不到更多细节。三维图标感觉又回到了拟物化和扁平化哪个更好的问题上？设计师应该保持开放多元的视角。设计本身也在不断的演化融合，存在即合理。合适最重要，它们都会有适合自己的场景和设计价值。
为什么轻三维在界面设计中占有一席之位？一个是设计师不断追求差异化的产物。另一个是更好的表现内容，并与用户产生共鸣。轻三维的基础模型都是来自手机界面中的各种元素，比如组件、开关、按钮、占位符、图表、几何图形、图标、进度条等，这些都是用户日常使用系统软件常见的元素，通过简单的几何形体建模—打灯光—加材质—渲染—PS调色。难度系数不大但效果很出彩。第一个出彩点是模型带有厚度的倒角，结合灯光渲染的光泽是二维软件不能比拟的。第二个出彩点就是材质自由添加，特别是当下流行的毛玻璃效果，玻璃材质渲染效果更佳。第三个出彩点就是可以加局部灯光，局部的渐变色或环境光更佳出彩。
P4D是PS加C4D的设计表现技法，也是视觉设计的最后一个环节，通过PS对C4D的渲染图片进行调色，利用PS的调色技巧可以很好的解决C4D打灯光的瑕疵，还可以利用PS强大的合成功能，将渲染图片与图片素材进行合成，来表现画面的视觉度，当然三维软件比较难实现的水、粒子、烟花等效果，也可以通过PS的后期合成来实现，这也是P4D的强大之处。
卡通IP设计最近三四年技术的迭代已经慢慢的走上成熟，卡通IP也从传统的纯PS手绘技法，转到C4D建模—角色绑定—MD衣服制作—OC渲染—PS（静态）/AE（动态）调色。
卡通IP火的本质更适合做营销，相比于品牌或Slogan，卡通IP具有亲和力和画面感。随着各种手办行业大热，受互联网大厂影响下，卡通IP已经是互联网B轮以上公司的标配了。如果团队中没有这样能力的人，也可以通过绘制好二维，一套三维可以选择外包完成。
对于UI设计师来说学习是有成本的，暂时并不是必备技能，如果喜欢完全可以学习，从设计差异化的角度来看三维视觉确实有一定的竞争力。
C4D三维场景动画通过构建实物和场景模拟生活中的现实场景，会让用户体验真实感，三维软件制作动效的最大优势是通过动力学和表达式来模拟真实感，未来在AR/VR领域会有更好的发展。相对于界面动效学习成本难度也相对较大。在三维动画中C4D软件对于域、动力学还是有一定的优势。
存在即合理，趋势流行稍纵即逝，注定是不长久的，只有大浪淘沙历史遗留下来的风格才能更长久。但我们也不能不去关注，因为哪有什么所谓的创新，只不过是旧元素的重新组合，并符合当下这个时代人的审美需求。香奈儿的“时尚易逝，风格永存”大概就是这个意思吧。
作者：水手哥 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
视觉空间、字体性格、颜色情绪三个大方面来谈一下我对视觉知识的部分理解！目录如下
空间感：空间感( sense of space)是指艺术形象通过一定手法引起的类似现实空间的审美感受。艺术家通过特定的瞬间造型和空间深度的追求，使人联想到其活动、生活的环境空间。在绘画、摄摄影艺术中，形象存在于二维平面中，但通过构图、透视、线条走向、光影和色彩处理，使人感受到空间的整体性、立体性。
而在我理解总结，空间感其实就是运用各种手法，打造出画面的空间纵深感，让二维的画面变成三维，从而提升画面的品质、细节、冲击力。
我们以人物海报为例对比几张图，直观感受一下：
无空间感：
有空间感：
我们直观的可以看到，都是人物海报，下面的两张明显更有品质感。有空间感的图，画面会更高级。
那是因为空间感会让你的画面更有层次，更灵动和富有场景感。这就是空间感的有点。
空间感，其实就是打造画面纵深，让元素之间形成前后关系，那有哪些方法来打造画面纵深呢？我们总结了5个方法来分享给大家：
1.3.1 构图
富有极强透视线的构图能很直观地表现出空间感。
比如
这类
这类拥有很强透视的构图，不用做别的，光构图就能体现出很强的空间感了。
实际运用中，我们还可以利用标题文案排列出这种透视构图来打造空间感：
1.3.2 虚实
虚实分为：
1.轮廓虚实
2.颜色虚实
轮廓虚实：两个相同的元素，轮廓模糊的在空间上会感觉处于轮廓实的元素后方。
这是两个元素，放到一起就会感觉上是在同一个平面上的。没有虚实关系。
如果把其中一个圆的轮廓虚化：
是不是就会感觉出右边的会在左边的前面，拉出了前后的空间感。这就是我们的轮廓虚实了。
颜色虚实：越贴近背景色的颜色，在空间上会感觉处于后方。
还是这两个元素，如果把其中的一个颜色调成和背景贴近：
两相比较，颜色更实的飞碟，会处于颜色较浅的飞碟前面。
1.3.3 大小
越大元素会感觉越近，越小的元素感觉越远。
在实际操作中我们一般可以利用不同元素来制作这个效果。
比如这是一堆元素，如果大小都差不多，就会感觉是平铺在一起的，没有空间关系。
如果调整它们的大小， 重新摆放，通过近大远小的原理，就可以很轻易地打造出元素之间的前后关系，从而营造出空间感了。
大小对比空间再其他画面中的应用：
1.3.4 明暗对比
除了虚实、大小之外，明暗也能对比出前后关系，从而营造空间感。
通过纹理层次的明暗对比，一明一暗的对比，也能拉出前后关系。从而营造空间感。
1.3.5 穿插
利用元素相互穿插产生的前后关系，也能营造出空间感。
这是1个元素和两个圆的平铺，没有交集。
如果我给他们穿插重叠在一起：
那就能产生元素之后的叠压前后关系，从而也能营造空间感。
利用在海报中：
以上这五种方式就是我们今天分享给大家的方法啦，
在视觉海报的打造中，基本都不是只靠其中一种方法去打造空间感，而是3种，甚至5种一起运用，可以让塑造的空间感的更有层次细节和冲击力。
比如：轮廓虚实+颜色虚实+大小，或者：穿插+大小+明暗。
大家一定要灵活运用，自由组合，以画面最优效果为目标去做，不要局限在某一个框架里。
字体也有字体的性格，不同的字体会呈现出不同的字体性格特征，比如高矮胖瘦、敏捷、邪恶、可爱、优雅文艺等等等等。通过精准地对字体的结构，笔画粗细，细节调整，字体效果等的处理表现字体的差异化，使字体的性格调性，与画面内容相匹配。
2.2.1 力量感、沉稳
特点：横细竖粗/留白少/重心偏下/转折笔直
2.2.2 可爱
特点：圆润/不规则/扩张
2.2.3 优雅
弧度/纤细/重心偏高
2.2.4 活力
特点：倾斜/笔画延伸/笔画干脆，转折弯曲很少
字体还有各种各样的性格，比如魔幻、哥特、血腥、恐怖等等。
我们在做项目的时候，字体的感觉就一定要抓得准，符合整个画面的调性：
比如这种欧式哥特的画风， 字体就可以加一下哥特元素，点缀点玫瑰、藤条。
刚硬科技的画风，字体笔画就可以粗一些，添加点科技感和几何图形，营造超前科技的感觉：
植物自然的风格笔画就可以柔和一些，带有弧度，把一些画面元素图形化点缀在上面：
2.3.1 字型特点的提取
具体实操怎么做的呢？我们今天就给大家分享一个案例，看看是怎么操作的：
这是一张视觉，我们要给他做一个主标题，这个主标题的字型特点应该如何从图里提取呢？
我们要提炼出三个点出来才能知道如何去做：
1.风格
我们先分析这张图，它的一个风格是有点魔幻+复古，神话传说加西域古代的一种史诗感。
我们可以找一些神话类史诗的类似的参考看看：
特征：
1.复古
2.重心高.
3.不用那么特别复古可用衬线体变形
2.特征
这个我们可以从人物身上去提取，人物有盔甲，我们可以把盔甲的特征提取出来：
3.配色
颜色也不是乱选的，一定要和图能呼应关联起来，那颜色怎么选呢？其实画面里已经帮我们选好了配色。我们观察一下画面：
整体偏冷调，墨绿色居多。，对比色有红色和黄色。
那我们为了突出字体，又能和画面呼应，那黄色就是再好不过的选择了。
那到这我们的设计目标就比较明确了：
2.3.2 字型设计
1.基础字型：
虽然是往复古了去做，但也不是真做成甲骨文，还是结合一下使用场景，和识别度。参考中也有部分是使用宋体去变形的，所以我们可以先选一个宋体的字体出来当做基础字型。
为了保证识别度，我们可以只做部分复古。
这里我挑灵下面“火”字，因为这个字处在中间，比较显目。
2.调整重心
参考复古类型的字体重心都会往上偏移，让字体稍显长一些。
3.加入特征
（1）锋锐：默认字体上有很多圆润的地方，我们都改成尖锐的感觉。
把每一个笔画都改掉：
（2）弯曲的尖角：
图形提炼：
加入到字体当中：
字型到这里就完成啦。
（3）字体转折的厚度：
字型完成了，字体转折的厚度我可以再字体效果上去做。在笔画中间加一个层次，以明暗分隔开，以实现盔甲上这种转折的厚度：
全部加上，看下完成效果：
结合到画面中看下：
效果还是很不错的，整体风格也比较统一。
这一块就是关于字体性格的内容，我们继续往下看！
接下来我们来说下关于颜色情绪的问题！
配色感觉不对？颜色脏？配色不高级？
这些问题一直困扰着我们。应该怎么配色呢？其实颜色也是有规律可循的，这篇文章就是带给大家一些颜色方面的启发，让你了解配色的底层逻辑，从而更明确快捷地配出想要的颜色。
认识色彩饱和度的情绪：
因为不同的配色会带给观者不同的情绪感受，只有在先了解不同颜色特性的基础上才能为我们的配色指明方向。我们做出的画面想要传递什么感觉，这种感觉对应什么颜色？
只有搞懂了逻辑，在之后的工作中，才能为我们的配色方案指明方向，而不会一开始就被难住。
如果我想配一个积极热闹活泼的画面，颜色怎么配呢？ 如果想配一个温柔恬静小清新的画面颜色又该如何选择呢？他们都有什么特点，为什么会这样？往下看
3.1.1 积极活力
我们先来看几组图片
用吸管工具提取一下它们的颜色观察
我们可以看到这类海报视觉上都能给人一种热闹、动感、活力的feel。
通过颜色提取，再观察它们选色的位置，可以发现它们的的配色的纯度和饱和度都非常高。
这是为什么呢？接下来我们降低饱和度看看会发生什么：
可以很明显的感受到画面中已经失去了那种动感、热闹和活力的感觉了，整体更趋于平稳和安静。
所以，高饱和度的配色会带给观者活力，动感，热闹的情绪。常常应用于一些电商、运动品牌的视觉项目中，用来渲染or打造年轻、活力、热闹、动感等氛围。
3.1.2 温柔平静
我们再来看一组:
这一类图片就会给人一种文艺小清新的feel，这类配色和热闹、运动的感觉完全不同。
都是低饱和度高明度的颜色。所以，低饱和度的颜色会给人传达平和、放松、舒适的心情。
3.1.3 轻松休闲
这一类的图片就给人以中正休闲的感觉。饱和度都趋于中性，不过高，也不会过低。
其实原理就是在取色器里，
我们看同一张图片，给我们的感觉：
高饱和度配色给人感觉冲击力很强，具有活力，对比非常强烈。
中饱和度画面就弱了一级，视觉冲击力没那么强。画面会放松一些，适合传递休闲的感觉。
使用低饱和度的颜色时，我们看到画面更冷静了，有些高级灰的感觉。
在以往的实际工作当中，我也是先用饱和度来定画面的大情绪基调，只有大的感觉对了，后面才不会出大问题。比如像一些战斗、pk、热血类的banner，都用高饱和颜色:
我们可以来吸取他们的颜色看看：
基本都是靠右边的颜色。
而像我在做下面这种类型的banner时，就会使用到中饱和度的颜色，给人一种轻松休闲的感觉：
我们再看下他们的色域：
都是趋于中间的位置。
最后一种低饱和的颜色，像下面这种作品，就有一种文艺、清新的感觉：
再来看看他们的颜色色域
都是比较靠左的颜色。
用饱和度来定画面的大基调，还是非常好用的，可以说是屡试不爽，大家可以好好理解并且用起来！
总结：
高纯度，高饱和度的颜色，会让人感觉激动、积极、动感、醒目、记忆深刻等特点感官，常常应用于一些电商、运动品牌的视觉项目中，用来衬托年轻、活力、热闹、动感等氛围。
中饱和度的颜色饱和度和纯度都适中，显得中正平和，又不会有低饱和度那样的“平缓“，想要视觉年轻一些，但又不想饱和度那么的强烈，可以尝试选择中度的颜色。
低饱和度的颜色，会给人平和，舒适的感受，常常会结合大量无彩色一起使用，让画面传递出简约，自然，小清新文艺的感觉。
作者：菜心工作室 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
在版式设计中对比其实就是差异化。若两个元素有所不同，那就让他们截然不同，不要拖泥带水。
比如我用两个圆表达大小对比，那么下图则是拖泥带水的反面教材。
因为此图中的大小对比并不明显，看不出要强调哪个圆形，主次不明，对比含糊不清。
对比上图，此图大小对比明显，更能够有效的传递出重要信息，所以要用对比的话，就让元素差异化强烈一些。
对比的分类有很多种，比如：
除了这些还有字体类型的对比、距离对比、虚实对比、远近对比等，可以说存在差异的地方就存在对比。而在版式设计上，我们要将这种对比最大化，以达到吸引眼球、方便阅读的效果。
对比能简化画面，使版面主题更明确，更直观。
运用对比能使视觉冲击力更大，更抓人眼球。
对比使版面层级清晰，能够突出重点，从而更有效的传达信息。
通常一个作品中不会只用一种对比，而是多种对比方式组合使用的。比如上面左图用强烈的大小对比出标题与正文的层级，同时加入光影对比为主体打造立体感，更抓人眼球。右图使用方向对比与位置对比使版面更活跃，更有视觉张力。
几乎所有的作品都会用到对比原则，在设计中我们也要善用对比原则。
对齐原则是让版面中的元素有一种视觉上的联系，以此来打造一种秩序感。
此版面中没有运用对齐原则，各元素间没有联系，凌乱而没有秩序感。
使用了对齐原则之后，整个版面规整又美观，建立了一种秩序感而更利于阅读。
左对齐：版面中的元素以左为基准对齐。左对齐是最常见的对齐方式，简洁大方，利于阅读。
右对齐：版面中的元素以右为基准对齐。相对于左对齐来说不太常见，给人一种人为干预的感觉，阅读比率慢一些。
居中对齐：版面中的元素以中线为基准对齐。居中对齐给人一种严肃与正式感。
两端对齐：版面中的元素拉伸或缩放与同一元素两端对齐。两端对齐通常用于大段落文字编排中，利于阅读。
顶对齐：与左对齐相似，版面中的元素以顶部为基准对齐。
底对齐：版面中的元素以底部为基准对齐。
轴线对齐：轴线对齐是以版面中心线为对齐基准，而不是元素的中线。
除了上图的案例为轴线对齐外，下图的这几种也都是轴线对齐的形式。
轴线对齐能给人正式感，同时各个部分又富有变化，比较灵活。
对齐的作用总结下来其实只有一点，就是能够使版面统一简洁更有条理，能够引导视觉流向。
这是一个同学的名片作品，给人感觉凌乱、没有秩序，信息传达也不清晰。那么问题出在哪儿呢？
首先，绿点部分的文字大小差不多，缺乏对比，导致层级关系不分明。
其次对齐方式不统一，没有秩序感。
那我们运用两个原则修改后是什么样子呢？
我们强调名片持有人的名字，将联系方式等其余信息左对齐，LOGO与二维码则置于右边，是不是整洁规整了不少，信息的传达性更强了。
同样的，我们也可以将联系方式与二维码移到版面右边，LOGO置于左下方，同样很规整，简洁美观，利于传播。
对齐与对比的组合会有多种变化，运用好了会使版面规整美观不少。
接下来看一下修改前后的对比图。
这是某同学的周练的海报作品，可以看到她对齐是统一的左对齐，没有问题。但是画面中却缺乏对比，主次感不强。另外图片选择也不美观。
同个主题下，另外一个同学的作品：
这个同学的作业突出了主标题，对比也非常明显，其余的信息层级也有对比变化，视觉上比较丰富，统一的左对齐也非常有条理。
同样的内容与主题，对比与对齐原则应用的好坏会直接影响版面的美观性与易读性。大多数情况下，对比与对齐是缺一不可的。
当然版式设计中有四大基础原则，「对比」、「对齐」、「组合」、「重复」，一般情况下这四个基础原则都是组合使用的。「对比」与「对齐」只是一部分，「组合」与「重复」我们以后再细说吧。
作者：大猫404 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
近年来界面设计工具不断推陈出新，一些新兴的实用界面设计工具渐渐走进设计师们的视野，逐步改变着设计师的工作模式。作为互联网设计师，效率至上的工作原则敦促我们不断尝试新工具，建立新的工作模式。本文将回顾界面设计工具的发展历程，并着眼界面设计工具的发展趋势，为大家推荐一些新兴、高效的界面设计工具，涉及UI、动效设计领域，希望对大家有所帮助。
随着互联网行业的日益繁荣，界面设计领域逐渐走向成熟，界面设计工具也一直在以惊人的速度发展。界面设计工具的发展历经了三个阶段：
1. 第一阶段是最早期界面设计领域刚刚起步，设计师普遍使用PS来制作界面。但PS是一个全面的而非专门针对界面设计的工具，因此界面设计师在界面的绘制、文件的交付上都存在一定不便。
2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件，但其作为一款专门针对界面设计的工具，以其高效、小巧的优势迅速占领界面设计市场，逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺，出现了Principle、Flinto、Protopie等专门设计界面动效的工具，一般设计师都会将其搭配使用。
3. 当前阶段各种新兴设计工具如XD、Figma、Framer Web逐渐走进设计师们的视野，它们专注于界面设计领域，不断挖掘和突破Sketch的短板，为设计师们打造更良好的使用体验。
界面设计工具的发展改变着设计师们的工作方式。界面设计工具也渐渐从单一专注设计本身向云端性、协作性、通用性发展，旨在实现更高效的设计生产活动。
云端性
随着云计算的发展，界面设计工具也在逐步走向云端化。设计从本地转向云端，不再依赖于本地硬件的性能，云端的计算能力让使用性能得以提高。设计也不再受时间和空间的限制，只要有网络，设计师可以随时随地的工作，临时使用其他电脑工作时省去了安装软件、同步设计文件的麻烦。 设计文件的共享从传送本地文件给对方，变成发送链接给对方。前者耗费本地内存与下载时间，后者有网即可打开。设计工具的云端性使得设计的灵活度增强，设计效率大大提高。
协作性
注重不同工种之间的高效协作也是设计工具的一个发展趋势。新兴的设计工具（如Figma、Framer Web）试图将产品、设计、开发、测试融为一个整体，让不同工种之间可以高效讨论、同步设计方案。实现整个团队效率的最大化。利用技术降低反复沟通的成本、减少同步不一致情况的发生，扫除各工种之间的协作障碍。
通用性
今年9月Figma举办的第二届Config Europe大会，其主题是让设计和代码连接更紧密。可以看出设计工具越来越注重其通用性，设计工具不仅可以帮助设计师输出设计稿本身，而且致力于打破设计与代码之间的壁垒，降低交接成本。让设计实现变得更加轻松高效。
Figma是一款全平台通用的在线界面设计软件。2019年UXTOOLS设计工具使用报告中显示，Figma的使用率从12%增长至26%，在今年的Config Europe大会上Figma也预告了一些即将推出的功能迭代，其便捷高效的特性使其受到众多设计师的追捧，正在逐步抢占sketch的用户市场。
Figma与Sketch相比，亮点功能有哪些？
（1）Windows用户也可随心使用
与sketch只支持苹果生态系统相比，Figma最大的好处是windows用户也可以使用。他支持在Mac、windowsPC机甚至ipad上使用，理论上只要你能打开浏览器，就可以使用Figma愉快地设计。
（2）云端文件使用不卡顿，支持离线编辑
Figma创建的文件全部存储在用户的云端账户中，不占用本地内存。当文件过大时，sketch会出现卡顿现象，拖拽一个图层都会变得很困难。而Figma对本地资源的消耗很小，大文件也几乎不存在卡顿的情况。设计师们最关心的无网或若网情况下Figma的使用问题，Figma也给出了相应的解决方案。其支持离线编辑，离线时会自动把内容保存在本地，当网络恢复后自动同步到云端。
（3）一键导入sketch文件
Figma可导入Sketch文件，大大降低了文件迁移成本。如果你想迁移全部工作到Figma是十分便捷快速的。
（4）更强大的组件功能
Figma和Sketch都拥有组件功能。当原始组件更改时，复制组件就会同步变化，在这点上二者是相同的。但Figma在组件逻辑上比Sketch更进一步，复制组件可以灵活处理与原始组件的同步关系。当设计师修改复制组件的样式时，原始组件不受影响。此时二者的关联逻辑仍然存在，当再次修改原始组件，复制组件仍然会同步变化。相比于Sketch，Figma把组件做的更加灵活限制更少。
同时Figma也在不断优化其组件功能，在Config Europe大会上，Figma预告在今年11月会正式上线组件Variants功能。该功能是将一系列有关联的内容生成一个Variants组件，在使用时可以直接通过识别出来的组件属性改变组件样式。其优势在于使用组件时可以更轻松的切换所需组件的不同状态,再也不需要像在sketch中一样逐级寻找了。
如下图中的按钮组件，设计师可以将所有的按钮状态都列举出来并按层级、颜色、状态、大小命名。然后选中所有按钮将其组成一个Variants组件。
（5）与代码紧密结合
在使用sketch输出设计稿时，设计师往往需要借助蓝湖或zeplin输出标注文件。Figma则与代码紧密结合，本身自带交付功能。 其文件中的每个模块都有代码模式，只需要将开发同学的账号开通查看权限并发送链接，就可以直接在设计文件上获取标注，也可自行导出所需的CSS、ios、Android样式。
（6）一键恢复历史版本
Figma会将设计师的每一次修改存成对应的历史版本，当老板说想要某一版时，设计师只要恢复至老板想要的版本就ok啦。如果其他设计师误删除或错误修改文件，也有机会一键抢救。
（7）团队协作
团队协作功能可谓是Figma最大的核心竞争力。当几位设计师需要维护同一份设计文件时，Figma可以支持几位设计师同时在线修改，只要将文件链接分享给对方并给到相应权限（查看、编辑权限）即可。如果使用sketch，设计师一般会发送源文件给对方修改来达到协作效果。来回传输源文件不仅容易造成文件同步出错，而且有一定的下载时间成本和存储成本，相比之下Figma的优势显而易见。
除了设计师之间的协作，Figma也有效提高了设计评审的效率。与在工作群截设计图标红再描述相比，Figma的评论功能使得同事可以在设计文件中实时标注讨论方案，提高了线上评审效率。
设计师受文件本地存储的限制，在工作中把源文件给同事、设计稿给产品、切图给开发、一项简单的输出对接任务变得琐碎起来。Figma的出现打破了设计师长久以来的孤岛工作状态，设计师只需分享一个链接，同事可以修改设计稿、产品可以评审、开发可以查看界面模块的属性甚至查看代码，大大提升了设计师的工作效率。如果您的团队正在考虑更换设计工具,Figma是一个不错的选择。
Framer Web是一款在线动效设计软件，于今年5月上线正式版，相比于Framer家族的前两款产品Framer classic、Framer X, Framer Web突破了其以代码为操作核心的理念，上线的新版本对设计师来说更加易用友好。
Framer Web的核心亮点是什么？
（1）网页端全平台可用
相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑，Framer Web是一款基于浏览器的在线设计工具，因此windows用户也可以安心使用。同时个人版本免费，大大降低了设计师的使用成本。
（2）文件导入
Framer Web可通过import选项导入Sketch甚至Figma文件，可搭配Sketch和Figma快速制作高保真动效。
（3）轻松实现复杂动效
Framer一直主打利用代码实现复杂可控的交互动效,。虽然可以保证输出高质量的动效，但对于设计师们来讲十分不友好，学习成本过高。此次发布的Framer Web为了解决这一问题，增加了适合设计师使用的可视化界面控制动效，设计师可以通过Magic Motion轻松实现复杂动效。
Magic Motion与principle、keynote的动画实现原理类似。当你选择目标元素添加了交互行为后，可以在Magic Motion中选择一个过渡方式。只要两个画板中的元素名称一致且在不同面板中拥有不同的形态，那么在画板切换时该元素就会生成补间动画发生相应变化。
同时Framer也新增了一些特别的交互控制实现一些特殊动效。比如自带控件中的video，本身会有一些独特的交互行为如End、Pause、Play（播放、停止、暂停），当进行这些操作时，会触发相应的页面变化。
（4）从设计到代码
代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板，设计师还是可以在设定了动效后，通过点击顶部的handoff调出相应代码。如果你是一个需要使用代码的设计师，你仍然可以通过编辑代码实现更复杂的动效。对于设计师来说，Framer提供的丰富动效已经可以满足绝大部分诉求。绝大部分设计师已经无需再关注代码部分，通过可视化界面完全可以做出很丰富的交互效果。而Framer Web最终的野心是希望设计师通过可视化界面设计出参数化的动效，可以直接导出相应的能交付生产端的代码。目前Framer Web 已经可以实现导出相应动效代码，但导出的效果仍有待完善，只是可以导出Transiton的参数而已。
（5）高效协作
Framer Web和Figma一样，也非常注重团队协作。设计师可以将链接分享对方进行查看、编辑，方便几位设计师合作一个项目的情况。与需要反复传输文件相比，Framer Web省时省力，大大提高了设计师的工作效率。
小结
Framer Web放弃了攻占界面设计领域的策略，转而和Figma官方达成积极的战略合作，专注于做专业的动效设计软件。因此Framer Web非常适合和Figma搭配使用。随着产品策略的调整，相信在不久的将来Framer Web还会为设计师们提供更丰富、高效的动效设计功能，非常值得期待。
虽然云端化的设计工具正逐渐兴起，但sketch仍然是目前较为主流的界面设计工具。因此接下来除了为大家介绍一些可以提升工作效率的Figma插件外，也会介绍一些好用的sketch插件，大家可以根据自己的需求自行尝试体验。
3.1 Design Lint（Figma）
设计师在做较大项目时可能会绘制几十个页面，难免会存在界面丢失元素的情况。Design Lint就能帮助你解决这一问题。它可以在你工作的时候进行实时更正，检查不同界面直接的差异，包括颜色、字体、填充、半径值等样式差异并纠正错误。如果你做了一些修改，Desgn Lint也会根据你的修改实时更新。这款插件可以让你更专注于设计本身，而不用浪费时间检查不同页面的元素是否使用正确，大大提高了设计师的工作效率。
https://www.figma.com/community/plugin/801195587640428208/Design-Lint
3.2 TinyImage Compressor（Figma）
设计师在做较大项目时导出的设计稿过大，存储和传播的成本高。用这款插件最多可以比Figma默认导出的文件小90%。同时支持导出多格式文件，导出多个图片时还会自动生成一个zip压缩包。
https://www.figma.com/community/plugin/789009980664807964/TinyImage-Compressorl
3.3 Design System Organizer（Figma）
这款插件帮助设计师在设计组件系统时管理组件系统。在设计组件系统时，会遇到如图所示的：“Buttons-Small-Default...”的组织形式。该插件可以对组件进行管理、如分组、取消分组、移动、重命名。当重命名组后，该组中所有组件的名称都会随之改变，十分方便。
https://www.figma.com/community/plugin/802579985985331070/Design-System-Organizer
3.4 Juuust Handoff（Figma）
Figma本身自带交付功能，但该插件的好处是生成的是离线文件，导出的文件可直接交付开发。开发同学可以不受网络影响随时查看间距、色值等信息。
https://www.figma.com/community/plugin/830051293378016221/Juuust-Handoff
3.5 Image Optim （Sketch）
设计师在导出设计稿时有时图片过大，Image Optim可以在导出图片时压缩图片，但不会影响图片的质量。使用时需先安装app再安装Sketch插件。
https://oursketch.com/plugin/imageoptim
3.6 FontFinder（Sketch）
设计师在做较大项目时可能会绘制几十个页面，难免会存在字体使用错误的情况，Font FInder就能帮助你解决这一问题。它可以检测出文件中存在的所有字体，你可以勾选想要更改的字体就可以一键将其改成目标字体。再也不需要在几十个页面中逐个寻找更改，大大提升了工作效率。
https://oursketch.com/plugin/font-finder
3.7 Craft（Sketch）
Craft插件十分强大，其中填充功能可以大大提升设计师的效率。在设计如列表页时，设计师为了效果需要编辑不同的标题、图片，都要冥思苦想编内容。Craft可以一键填充文字，如姓名、文章、日期、邮箱、地址、国家等。不同类别下面也设置了一些分类，方便设计师选择。除此之外，Craft还可以一键填充真实不重复的照片,为设计师节省了很多时间。
https://www.invisionapp.com/craft
3.8 BaseAlign（Sketch）
Sketch自带的对齐工具对形状来说很好用，但对于文字来讲一般是文字的文本框对齐，并不是文字本身对齐。BaseAlign插件使用的是文字自身的基线对齐，这样就以保证不同大小的文字都可以对齐，设计效果更完美。
https://oursketch.com/plugin/basealign
XSHOW是一款由ISUX研发的高效设计协作平台。XSHOW连接了产品经理、开发等各个不同工种，提高了设计资源输出和分发效率。设计师将设计文件上传到XSHOW，就可以将文件链接分享给产品经理、开发等同学。产品经理在手机小程序上就可以预览方案，设计师每次更新的方案也可以直接预览。开发同学可以直接查看标注和切片。同组设计师也可以直接下载源文件、甚至查看历史迭代版本。
（1）可视化上传文件
设计师先在Sketch中安装XSHOW插件，可使用快捷键或直接点选需要上传的文件画板，接着直接选择XSHOW中的“导出”，就可直观快速的将文件上传到XSHOW。
（2）记录所有版本迭代，轻松找回第一稿
设计师每一次上传的文件都会有云端记录，设计师可以通过时间轴便捷找回历史文件，轻松找回第一稿。
（3）灵活丰富的分享权限
对于项目分享的权限，XSHOW的设置更为灵活，除了支持私密、公开、指定人或团队可见外，也可以控制权限的时效。
（1） 直观了解团队输出,组建团队展示能力空间
XSHOW除了个人使用外还可以组建团队。项目管理者可以通过XSHOW直观查看整个团队的设计稿件输出修改情况，同时可以组件团队展示能力空间。
（2）方案变更及时知道
XSHOW有记录所有版本迭代的能力，因此作为项目管理者可以及时知道团队成员对方案的修改变更，解决了团队内部有时同步不及时的问题。
（3）便捷组建项目和管理团队成员
项目管理者可以在XSHOW便捷组建项目和管理团队成员，大大提高了项目管理者的管理效率。
（1）多端查看更方便
XSHOW支持web和小程序两种沉浸式查看方案的方式。在小程序上查看方案方便合作方直观感受方案在手机上的真实效果，如果合作方身边没有电脑也可以及时查看稿件。
2. 查看历史变更
XSHOW的历史变更功能可以使合作方也及时了解方案的变更情况，大大提升了信息同步效率。
（1）便捷查看标注与管理切片
设计师将文件上传到XSHOW后，只要将链接分享给开发，开发就可以直接在线查看文件标注、下载切片。
作者：腾讯ISUX 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
按住option单击图层缩略图，视图上会只显示该图层内容（暂时性隐藏其他图层，进行其他操作依然会显现出来）
在AD中同样也是有蒙版功能的。例如下图，这三个字实在是太霸气了，我们想变怂一点，那该怎么办呢？在右侧图层面板中，按住矩形层缩略图，拖入文字层的缩略图与图层名称之间（也可以看作是缩略图层），即可完成蒙版操作。
但是要想调整文字大小，但是依然只显示矩形所在区域范围的内容呢？那么我们需要勾选上方工具栏中的【锁定子项（lock children）】按钮，在进行调整就OK了。
历史记录工具包含一个定位滑块（position），拖动滑块，可快速撤销与复原，效率很高。同时也可以点击列表的特定步骤，点击后就会回到该步骤操作。
在文件菜单栏中有个【随文档保存历史记录（save history with document）】，勾选后，保存的文件将保留历史记录。当你在历史记录中选中曾经的特定操作的情况下，进行一步新操作，则历史记录会产生一个小分支符号，分支符号代表不同的未来。例如我新建一个黄色矩形，然后将颜色调整为蓝绿色渐变。然后通过点击历史记录，回到新建黄色矩形的步骤，然后把颜色改成蓝紫色渐变，这样在填充步骤就会出现分支符号，通过点击分支可快速切换至蓝绿色渐变，可用于尝试性创作，并通过同时存在的两种结局来进行对比。
复制粘贴和复制图层操作与PS完全一致，不同的是power duplicate部分。首先，我们在画布上绘制一个矩形，然后按command J复制出一个矩形副本，将矩形副本移动到矩形的左边，然后缩放它，操作完成后按command J，在矩形副本的左边就会出现一个比矩形副本更小的矩形副本2，副本2与矩形副本的距离与矩形副本与矩形的距离相同。好，我们回到第一步，绘制一个矩形。然后按住command 拖动矩形，则会出现矩形副本，然后移动矩形副本后，按command J，同样可以达到上面的效果，我们把这个操作叫做power duplicate，也就是快速副本。PS也有同样的功能，但是操作逻辑有些许不同，AD的更为清晰一点。
在AD中，有两个图层的概念，一个叫做图层（就是普通图层，可以包括像素图层和矢量图形图层），另一个叫做像素图层。如果选中图层的状态下添加像素图层，则该像素图层会默认放置在该图层下，普通图层与组的概念类似。如果选中画板层的情况下添加像素图层，则像素图层自动创建在画板层，与其他图层同级。
2）三大角色模块（personas）
在AD中有矢量部分、像素部分、导出部分的区别。不同部分的工具区是不一样的。在矢量部分下，包括拖动矩形与钢笔绘制形状，所创建的都是矢量图层；像素部分创建出来的都是像素图层，这两者是不一样的，同时也是AD与AI的重要区别之一。
1）内置网格
与AI需要自己手动绘制等距视图网格线不同，在AD中内置了一套优秀的网格系统，可以帮助我们快速的搭建出2.5D插画需要的网格线，并且支持角度变换。在调节角度时可以预览网格线的具体效果，就这一点就足以让2.5D插画作者扔掉AI转投AD。
2）等轴测工具（isometric）
isometric工具可以帮助我们快速绘制等距视图插画。我们可以想象一下在AI中，好不容易利用旋转复制人肉做出了参考线，还需要用钢笔工具去点击参考线的交点来绘制插画的一个个立体块面。在AD中这项繁复的工作将不复存在。通过等轴测工具，我们将告别手动对齐这种令人头大的工作。
等轴测工具功能由两部分构成，上方的三个立方体表示参考线当前描述的是哪个平面，并且可以通过这三个立方体来快速切换当前平面（current plane）。
在下方平面编辑选项部分，有这样几个功能项。
在平面中编辑（重点）：在该选项选中的状态下，我们通过图形绘制工具在画布上直接就能拖动出符合参考线角度的图形，特别是在绘制圆形时简直不要太方便。
适应平面（重点）：在画布中我们通过矩形工具绘制了一个正常的矩形，横平竖直那种，然后点击【适应平面（Fit to plane）】，只听得啪的一声，矩形就被啪到参考线上了，变成等轴视图的一个部分。
在平面中翻转/旋转：这个没什么说的，就是普通的翻转旋转操作，变成了等距视图的翻转旋转操作。
相当于UI组件库，Sketch与XD都有同样的功能。
视图（view）-studio-符号(symbols)，将图形拖进去，就形成了symbols。
如果想要单独修改某一个符号，则需要点击符号面板右上方的【同步（sync）】来取消全局修改，然后单独修改某一个符号。修改后，该符号将脱离符号控制，不受符号修改影响。
选择节点工具[A]，去调整一条曲线的锚点，可以通过上方面板中的吸附（snapping）来选择各种吸附方式。
视图-参考线管理器，可打开参考线面板，已存在的参考线都会在上面显示，同时可以点击参考线的数值来修改参考线的具体位置。
因为需要时间消化的原因，我会将文章分为几部分整理，在此阶段如果有朋友感兴趣可以去Affinity官网下载试用，同时结合本文上方的链接（官网的教学视频被异次元封印了）可以更好地了解AD。再次提一下，一定要看官方教学视频，不要想凭借着自己PS、AI的基础去直接上手，AD真的不一样。
AffinityDesigner（下文都用AD表示）是Affinity系列中偏向于矢量绘制与界面设计功能的工具，其并没有能够准确对标的竞品，如果非要对标的话，可能就是Adobe Illustrator和Sketch了。Affinity系列中的另外两款作品Affinity Photo（偏向图像处理，对标Adobe Photoshop）与Affinity Publisher（印刷排版，对标Adobe InDesign）也是非常有潜力的作品，不过目前这两款还没有办法完全替代掉Adobe家族的作品。
但是AD，我觉得是可以完全有实力跟Adobe Illustrator一较高下。在用过Sketch之前，我从未感觉用PS做UI有多低效，同样，在了解AD之前，我也从来没感觉Ai有多难以忍受，顶多有些地方感觉反人类罢了。但是经过两三天的了解与试用，我立即就在App Store下单入正并抛弃了AI。
因为AD，真的有点东西。
作者：NOLeon_墨刃 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
『 写在之前 』
最近在阅读《佐藤可士和的超整理术》，书里讲述的是作者通过对空间、信息和思考的整理，来解决复杂问题，让工作变得高效。生活和工作离不开“整理”，好的设计也要从“整理”开始，组件化设计思维，也可以看做一种“整理术”。本篇文章将与大家探讨如何运用组件化设计思维去“整理”项目，并发挥更高的价值。
文章分为两个部分：
1. 组件化设计思维
2. 滴滴表单优化项目的沉淀总结：组件化思维的推动和执行
『 组件化设计思维 』
1. 什么是组件化设计思维
我们知道“分子是由原子组成的，分子分成原子，原子也可以重新组合成新的分子”。一个界面是由独立的分子组件搭建而成，分子组件由原子元件构成，这些原子可通过不同的组合方式，组成新分子组件，继而重组构成新的界面。
组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，从而提升设计效能。
2. 滴滴运用组件化带来的收益
随着滴滴业务的飞速增长，组件化为滴滴带来了一致的设计语言和工作效率上的提升，因此滴滴在组件化道路上的决心愈发坚定。选择以组件化展开设计实践，带来的变化与收益主要体现在公司、项目和个人三个维度：
2.1 公司维度
一款产品的更新迭代是依附于产品、设计、开发、测试等多个团队协作进行的，随着产品功能的完善，背后支撑的团队也在不断壮大。以运用组件化推动的产品设计与迭代，可以使团队增效，降低成本。设计师可以只用几个小时设计出几十个页面，开发人员也可以通过查看prd文档，直接调取组件代码完成需求，使得我们的生产力产生质的飞跃。在保证数量和质量的前提下，原本200人的团队，可以缩减为100人，为公司节省了人力成本。组件化能让公司以更快的速度和更低的成本开发产品，也能对产品想法快速验证。
2.2 项目维度
● 从设计方案上
对于一些适用组件化的产品形态，我们可以运用组件化思维将其“化整为零”，对需求有更规范的统筹，理清框架，建立一个可复用的组件结构并持续优化，以保证交互和视觉的一致性。
● 从工作流程上
传统的设计流程大多是同属性多角色并行的，从需求到设计，从设计到前端的工作流程会涉及到不同的设计师及不同的前端工程师。相同角色间无交集、缺乏沟通会导致大量重复性工作，增加项目周期和管理难度。
而将组件化思维贯穿其中的设计流程，带来了工作流程上的创新。我们建立了一套设计组件库来提高协同效率，大量需求均通过需求评估来判断是否需要新增或复用组件，对于组件库里已有的组件，设计师可直接调取，组合构建出新页面。对于新增组件则经过常规设计流程后，归纳沉淀并由组件委员会审核通过后方可入库，以提升后续组件扩展能力，助力产品快速更新迭代。
2.3 个人维度
利用组件化，设计师可以从低价值的机械式工作中解放出来，参与到设计创新中去，发挥更高的设计价值。
另外，在工作中运用组件化设计思维有助于设计师更完整的思考，培养全局思维的能力；也有助于我们专注于细节，提供个性化的创新方法，产出适应不同场景的最优方案。
下面用一款优秀案例来解析组件化设计思维
『 滴滴表单优化项目沉淀 』
1. 项目背景
1.1 为什么要优化表单
滴滴出行5.0版本从2016年11月上线至今，随着用户体验痛点不断增加，业务的需求逐渐多元化，我们希望对表单进行一次统一的整合梳理和升级。为未来更多业务发展提供快速支撑和拓展，同时也注重用户体验的提升。
滴滴出行作为出行服务类应用，精准的发单表达是触达用户进入服务流程的关键。每个业务在确认呼叫的节点上拥有独立的入口并满足不同的需求（如下图），确认呼叫页表单（以下简称表单）作为最重要的多功能、多信息载体，需要高效、精准的表达和流畅的体验。
1.2 跨业务共建
滴滴出行是涵盖出租车、专车、快车等多项业务在内的一站式出行平台，我们希望在保证全平台统一化的基础上，与业务寻求一种相辅相成的关系，并且在保证规范化输出的同时，展现出业务特色。在需求阶段，确定各业务接口人，收集需求，沟通评审促成各方达成一致目标。在方案执行阶段，平台设计师产出方案，与各业务线沟通并优化，1～2次循环后方案评审到最终确立。开发和测试阶段，各方验收通过后发版上线，上线后平台沉淀设计规范，完善组件库，跟踪反馈，推动体验优化形成工作流程闭环。
2. 确立设计目标
项目初始，平台设计师需从业务诉求及用户诉求两方面着手，在收集到两方需求后，对其进行归类整理并定义优先级，从而确立设计目标，制定出具体的设计策略，提炼交互框架，再深入到细节的设计。
在表单项目中，基于满足业务未来多元化及提升用户体验的需求，输出目标为：
1）兼容各业务需求，建立具有可承载多种业务共性及特性的组件能力框架；
2）主要信息及次要信息的合理化分布；
3）传递真实感及专业感，拉近用户体验共鸣。
3. 以组件化设计思维展开设计探索
有了明确的目标后，根据目标制定相应的方向策略，也便于我们在后续的设计工作中寻找发力点。和业务沟通后，明确整体方案的设计基调聚焦在“扩展性”“统一性”“逻辑性”“个性”四个方向上：
扩展性——组件化视觉表达，能够随着滴滴多场景、多业务需求的变化进行延展和扩充；
统一性——各业务信息归类统一、简化；
逻辑性——信息层级清晰，增强主焦点认知，次要信息弱化；
个性——设计个性化表达
3.1 以组件化思维进行框架探索
在方案构思阶段，我们是以组件化设计的思维方式先去全面的思考并分析问题，再进行拆解分类，最后归纳重组。
● 全面多维度分析问题
框架层：针对快、专、豪的确认呼叫表单的关键场景进行框架分析
因为业务不同，场景不同，确认呼叫这个流程触点在各业务中是具有共性和差异性的。我们重新梳理了确认呼叫页表单各业务的功能点（如下图），可见各业务表单虽有一致模块，但信息内容十分繁杂，层级区分无规律可循；操作区位置不统一，样式各异；框架的兼容性及扩展性不高。
表现层：在视觉表现层面上，也暴露了很多问题，如：不同业务的车型选择分别有各自的展示方式；价格区选中项的感知较弱且各业务的样式不统一；价格小数点展示位数不一致等等。
新增业务特性诉求：新的框架还需满足业务特性的诉求（如下图）。
● 拆解并简化
如何让新的框架既能满足越来越多的业务类型，保证体验的统一，又能体现出业务特性，平衡取舍促进产品更新迭代呢？
我们回归到本质，从以下四个方面对框架进行重新构思：
删除——去掉无用的功能点
组织——根据类别将这些功能点分解后重新划分成组
隐藏——突出主焦点的认知并隐藏次要信息
抽取——抽取共性，对比差异性
综上，即对框架进行简化，保证框架可灵活适配具有业务共性与特性的组件。
● 重组
简化后的框架几乎可以覆盖所有必要功能点，有很强的适应能力和扩充能力，可以轻松应对未来多元化的出行服务及场景。
在共性中寻找差异性：全局操作、车型与价格、发单按钮是业务共性部分，除车型／价格区和发单按钮外，其余均可显示或隐藏，可根据业务特点灵活配置。
在差异中寻找共性：车型与价格区所包含的服务选择与附属操作是业务差异部分，快车需要在一个卡片中呈现三个车型比价、需要有附属操作，专豪则需要强调车型图片的露出和服务配置。我们要找一个平衡去把这些差异点串联起来，确保用户拥有同样的感受，不仅是交互方式、动效流转，也需要关注同一层级信息的视觉表达。
3.2从框架层到表现层——从整体到细节的设计
● 视觉尝试探索
在交互框架明确后，便进入视觉设计阶段。平台设计师基于统一的的框架进行视觉风格探索，兼顾扩展性和逻辑性，同时不能忽视业务特性，从而迸发更加出彩的设计想法。设计师是界面的规划师，也是品质的把控者，大到页面布局、组件的组合方式、颜色定义，小到按钮在空间布局上的占比是否合理都要面面俱到。在这个过程中，不断打磨微调，进一步细化并且有针对性的进行动效设计，以呈现更完美的方案。
● 组件化设计的细节打磨
在方案确定的同时，将模块再次拆分成组件，组件包含不同类型、不同状态的基本元件，进行深入打磨，从而实现与设计目标的高度吻合。
● 根据组件构建页面
表单运用了组件化设计方法，建立了可承载业务共性与特性的框架。通过设计评审敲定最终方案后，提炼规范，设定组件标准，提取组合用法以覆盖各业务场景。由于业务线设计师更了解业务的需求根源及业务流程，所以由其枚举场景并输出业务遍历图。
平台与业务共建的过程，可以更好的调动业务线设计师的积极性和参与度，也能从业务的角度验证组件的扩展能力；“共建”也能更快速的将组件规范推动落地，实现组件的复用、协调与升级，是快速搭建页面、促进产品快速迭代的重要因素。
4. 项目反思
表单在 2017年10月19日 随乘客端 V5.1.16 发布，我们通过数据分析来验证表单优化的合理性。（以ios为例，分析上线一周后10月25日-10月31日的发单率和发单时长数据）
4.1 体验量化
- 新表单较老表单，发单量增加，发单率提升14.83%；
- 新表单较老表单的平均发单时间降低了2%
数据分析表明，表单的设计优化是成功的，是设计师运用组件化思维在自驱项目中的每一个环节发挥高价值的体现。
4.2 快速落地
“共建”和“组件化”是促成表单项目在短时间内达成落地目标的关键因素，平台与业务共建的工作方法也扩展运用到了更多项目中，是平台与业务之间迅速确立方案、搭建设计规范、推动体验优化和迭代的最高效路径。
4.3 设计研发一体化
不仅如此，表单优化项目取得成功，离不开“组件化设计思维”在设计全流程上的应用。我们坚信，滴滴将在组件化道路上继续前行，然而这条路任重而道远。就现状而言，我们的两个组件库——设计库和开发库仍需要分别维护，且设计和开发在沟通时成本较高。这使得我们需要创建一个能够同时面向设计师和开发人员的共享组件库，实现设计和研发一体化，让设计师面向开发，让开发贴近设计，减少设计及开发人员的额外工作量。我们设想，在设计和研发一体化的生态系统下，不论设计师或开发人员，通过搜索名称就可以从共享组件库中调取相应的组件进行设计，这些组件都有一对一的设计和开发数据，这会让工作变得十分高效。
在滴滴的未来，设计研发一体化是可以将代码实时渲染到设计软件中审阅设计的生态系统，且并不遥远。
作者：滴滴出行CDS 来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。
蓝蓝设计的小编 http://www.lanlanwork.com