什么是瓷片区
由运营板块拼接而成，视觉上像一块块瓷片，灵活性高。适用于各种运营模式，具有较高的转化率
卡片布局
瓷片的外容器排版
单行
优点：节省屏效，日常营销为重点业务留白
缺点：坑位有限，三个以上时营销氛围设计受限
左右排列
优点：主次层级清晰，适合作为功能入口
缺点：坑位越多，越影响营销氛围；推行者需具备与各业务沟通的能力，协调入口之间的平衡
上下排列
优点：个数不受限，易塑造氛围感
缺点：高信噪比
图文排版
瓷片区的常见排版通常用：满版型、上下分割型、左右分割型、中轴型、倾斜型
满版型
以图片为吸引点，充斥整个瓷片区，文本内容居左排版为主，常见旅游、电竞、资讯类
上下分割型
版面分为上下两部分，分别配置文字或图片，常见上文下多图的形式，符合常规的阅读顺序，该场景下图片更易引起用户兴趣，常见电商类
左右分割型
版面分割成左右两部分，分别配置文字或图片，常见左文右图的形式，该场景下，文本偏理性，具有直观的表述能力；图片偏感性，辅助文本信息点缀模块。常见资讯类、产品入口等
中轴型
常见垂直排列，信息更集中有活力
倾斜型
版面主体倾斜排列，常见对角线式形式。能承载更多的信息内容，页面层级也更活跃
配图风格
常见类型有两种：实物与插画
实物类
优点：识别性高、更直观、可复用、设计效率高，个性化推荐更精准
缺点：对图片素材要求较高，个性化服务需要开发资源
插画类
优点：创意性强、可塑性强、具有趣味性、易形成品牌调性
缺点：抽象图形不直观，复用性低，绘制耗时，不易做个性化
Tips：设计师要牢记，设计时思考延展性和平台风格如何为业务（运营、产品、技术）赋能，但长期影响CTR（点击率）一定是由业务内容决定，避免背锅。
文章来源：UI中国 作者：七月七咸
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
前段时间在年终总结会上，产品经理向设计团队提出了一个问题：怎么证明你的设计是有价值的？如何衡量验证Ui、UX的设计效果？
很多人都认为，公司的业绩取决于产品和运营，和设计师关系不大，甚至有些公司想取消年终绩效。那么，改如何判断设计结果是否好坏，设计产生的影响又该怎样被量化？
我相信回复肯定是：可以通过数据来找到答案。
但又会有新的问题出现：需要哪些数据可以验证设计效果？又该怎样通过数据来判断设计的效果究竟是好是坏？
满意度
简单来说是用来衡量用户对产品服务和体验的整体满意程度。我们都知道，要提高满意度，要满足很多个条件，比如产品功能、运行速度等。这里我们分两个维度，用户体验质量和产品目标。
1）用户体验质量
用户体验指标可以从净推荐值（NPS）来衡量，净推荐值意为用户是否愿意将产品推荐给身边人的指标。净推荐值是有一个公式：NPS值=推荐者所占比例-批评者比例。
9-10分（推荐者）：活跃度很高的用户
7-8分（被动者）：对产品满意但忠诚度不高的用户
0-6分（批评者）：对产品不满意的用户
还可以通过反馈，来收集功能或界面的问题反馈比例，更直观的评估用户操作过程中的感受反馈，来进一步优化迭代。
降低用户的学习成本也能提高体验质量，通俗的讲，就是用户对产品接受度和使用成本的高低，更偏向于产品和交互层面。
2）产品目标
简单来说，就是希望产品上线以后，会达到什么样的结果。
例如一个列表筛选功能，其核心目标是为了让用户在多维度混合排列里找到自己想要的目标群。
当用户筛选后，找到了想要的信息且进入了目标页面，说明指标已成功；反之没找到想要的结果，中断了操作流程，说明任务失败。以此为依据，通过是否完成的维度来进行衡量，确定筛选按钮到任务界面的UV转化率。
结合上面的用户体验质量，来验证设计需要注意哪些方面，关注哪些数据来达到目的。
活跃用户数
通常观察日活（DAU）和月活（MAU）就可以。活跃用户数用于衡量产品的用户粘性，便于了解产品一段时间的用户情况，了解产品的用户变化趋势。
日活（DAU）：一个用户一天通过相同的渠道多次访问产品，DAU仍只算一个；
月活（MAU）：在一月内多次访问产品，MAU仍只算一个。
日活越高，说明有刚需的忠实用户越多。月活越高，说明新增的用户越多，但未必是忠实用户。当然，活跃度的高低也需要根据用户的停留时长有一定的联系。如果只是打开产品而并没有使用，其实这个数据的意义并不是很大。
用户留存率
一般是衡量产品或功能的新用户增长程度，对产品或功能的新用户占比。这对于新产品或新功能特别有用。
提取数据的一般周期为1日、7日或者30日。日留存率通常用来衡量产品粘性；周留存率通常用于判断产生的忠实用户数；月留存率通常用于衡量版本迭代的效果。
如果产品做了更新迭代，并且提升了月留存率，而其他变量没有变化时，说明此次迭代很成功。所以通过留存率可以很直观的判断产品的用户粘性是上升还是下降。同时老用户的留存率也需要关注，好的更新迭代不仅可以留住新用户，还可以唤醒“沉睡用户”。
完成率
衡量流程设计的合理性，通常用于产品中主要任务流程的内容，这里单指设计中操作流程的顺畅度。
完成率是产品设计中重要的指标之一，完成率越高，产品的操作体验就越好。
最后
数据只是有效验证的方法之一，并不是万能的。就如调查问卷一样，都会有一定的局限性和不确定性，数据能明确看到结果，但不能说明具体原因，只能作为支撑来验证设计师的想法或决定，但无法代替设计直觉、用户研究和设计可用性。
文章来源：站酷 作者：UX设计帮
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当看到一个产品的视觉效果时，我们通常能很快地判断出它是吸引人的还是哪儿有点不对劲。但是，很少有人能接着说出来为什么这样设计的原因。
本文定义了影响UX的5条实用法则：
1. 比例
2. 视觉层级
3. 平衡
4. 对比
5.格式塔原则
遵循以下5条设计法则可以创造出全面周到的视觉效果，推动用户的参与度并提高可用性。
01 比例
定义：比例原则是指在布局中使用相对大小来展示设计元素的重要性和层级的优先关系。
正确使用此原理最简单的方式是，最重要的设计元素的尺寸要比不重要的元素大。原因很简单，大的事物更能引起用户的注意。在停车场中，当前所在停车区域往往会突出显示，这样做的目的是加深用户的记忆，方便回来取车。
良好的视觉设计通常使用不超过三种不同的尺寸。拥有一系列大小不同的设计元素，不仅能在排版上创造出多样性，而且还能在页面上建立视觉层级结构。
确保最大程度地强调设计中最重要的部分，帮助用户理解如何使用它。例如在Medium中，热门文章在视觉上比其他文章更大。
02 视觉层级
定义：视觉层级的原理是指在布局中，按照元素的重要性排序来引导用户的注意力。
视觉层级可以通过比例，颜色，间距，位置和其他各种信号的变化来实现。同时它也控制用户最终的体验。如果很难确定页面布局的具体位置，则很可能是其布局缺少清晰的视觉层级。
要创建清晰的视觉层级结构，请使用2–3种字体大小来向用户展示页面最重要的信息。或者对重要的内容使用明亮的颜色标注，对次要内容使用柔和的颜色。在Medium中，标题、副标题、正文具有清晰的视觉层级，文章每部分的字体大小都和其重要性相对应。
比例的大小也可以帮助定义视觉层级，因此可以针对不同设计元素进行各种比例的组合，一般的设计经验是包含大、中、小三种设计组件。Uber中的视觉层级结构就很清晰。地图和输入框对半分开，输入框上的灰色的背景引导用户进行下一步操作。
03 平衡
定义：平衡原则是指对设计元素进行满意的排列和比例设置。当屏幕两侧存在分布相同（不一定对称）的视觉元素时，就会达到平衡。在设计时元素所占的面积在创建平衡时也很重要，而不仅仅是元素的数量。
平衡的布局可以是：
对称：元素相对于中心线对称分布
不对称：元素相对于中心线不对称分布
径向：元素从中心的公共点放射分布
在设计中使用什么样的布局取决于想要传达的内容。对称的布局安静而稳定，例如The Hub Style Exploration的界面展现了稳定的对称布局。
不对称的布局是动态的并且引人入胜，创造了一种活力和动感。Nike的设计布局，显示出与品牌相称的具有运动感的不对称的布局。
而径向的布局始终将用户的注意力引向视觉中心，Brathwait手表在径向上保持平衡，所以注意力立即被吸引到表盘的中心。
04 对比
定义：对比原理别。是指将视觉上不同的元素并列排布，以传达这些元素不同的功能类别。换句话说，对比为用户提供了不同对象在大小或颜色上的明显差异。
对比原则通常利用颜色来进行分辨。例如，在UI设计中红色通常代表删除，而绿色代表同意或继续。换句话说，对比为用户提供了不同对象在大小或颜色上的明显差异。
通常在UX中说起对比度，我们会想到文字与其背景之间的对比。有时设计人员会故意降低文字的对比度，用来表示不太重要的内容。
但是在降低文字对比度的同时文字的可读性也会降低，这会导致用户无法看清文字内容。在Greenhouse Juice的包装上，瓶身上文字的可读性取决于果汁的颜色。在深色果汁瓶身上文字对比强，可读性比较好，但是浅色果汁瓶身上的文字几乎无法识别。
05 格式塔原理
定义：格式塔原理解释了人类如何简化和组织由许多元素组成的复杂图像，通过下意识的将各个部分安排到一个有组织的系统中，而不是将它们解释为一系列不同的元素。
格式塔原理指出了我们倾向于感知整体而不是个体元素。在NBC徽标中，中间空白处并没有孔雀，但我们的大脑却能自动填补空缺的部分，感觉到孔雀的存在。
在Uber的注册页面中，字段标签靠近其相应的文本框，这样能轻松理解需要在哪些文本框中输入信息。
总结
除了使某些东西看起来“漂亮”之外，理解和利用这些法则还有助于：
1. 增加可用性。遵循这些视觉设计原则能够设计出易于使用的页面布局。
2. 激发积极情感。美好的事物会引发积极的情绪。美学-可用性效应表明，当人们发现外观上具有吸引力的设计时，可能会对设计的可用性更宽容。
3. 增强品牌认知度。强大的视觉系统可以帮助建立用户对产品的信任和兴趣。
文章来源：站酷 作者：Clippp
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
当你为你的项目创建有效的，可访问的，漂亮的ui时，只需要最小的调整来帮助快速改善你的设计。 努力创造。在这篇简短且易于理解的指南中，我收集了一些容易放置的内容。在实践中，这些小技巧可以毫不费力地帮助你改善你的设计，还有用户体验。
希望你喜欢！
用微妙的边界定义。
使用多重阴影或非常微妙的边界（只是一个阴影比你的实际影子）周围的某些元素可以使这些元素出现
更清晰，更清晰，帮助你避免那些看起来泥泞的阴影。
标题给一个更好的光学范围。减少长格式正文的字母间距？这是一个大大的“不”。但对于标题……我要说“是”!
你的标题很可能会比他们的标题更大，更重。相比于正文，字母之间的间距有时会出现视觉上更大，这并不是你想要的。减少字母间距，只是少量，可以使你的标题视觉平衡，更易于阅读，通常更赏心悦目。
为了一致性，确保你的图标具有相同的视觉风格。确保它们拥有相同的视觉风格;同样的重量，要么填满，要么秒变了。不要混搭。
只使用一种字体就很好。在设计时，使用单一字体是绝对没问题的，这样做实际上可以帮你产生更强、更持久的结果。忽略“总是使用两种字体”最小值的人群。使用以下组合重量，大小和颜色，你仍然可以产生完美的可接受的结果。虽然只有一个单独的字体。
留白是UI设计朋友。大胆的使用。适度的留白，即使是少量的白色物质，但要使用得当。能让你的设计透气，而且看起来更光亮。
创建长篇内容？给20 pt试试。对于长形式的内容（即微博文章，项目描述等等），试着这样做20pt(甚至更多一点)为你的文本字号。当然，这取决于所选择的字体，但大多数流行的字体在20pt时效果得很好，并带来更好的阅读体验当你的用户面对一堵文字墙的时候。18pt太过时了。
使用字体比例定义一个适合的字体大小集。使用字体比例可以帮助您轻松、实用地定义一组字体大小。顾名思义，Type Scale基于一个比例因子(比如1.25)工作的。从一个基本字体大小(18px)和乘(或除)它与缩放因子得到的字体大小要么更高(即;H₁，H₂等)，或较低层次(即;标题、按钮等)字体比例将帮助你产生看起来和谐的文本字号集。因为他们的大小根据设定的固定比例增加和减少。
选择一个基本颜色，然后使用色彩和色调增加均匀性。你猜怎么着?你不必总是用大量的颜色填充你的设计。如果项目允许，简单地使用一个有限的调色板选择一个基地颜色，然后使用你选择的颜色的色调和阴影可以增加一致性以最简单的方式来改变你的设计。
改善用户登录的体验。记住拇指规则。允许用户在任何时候跳过您的移动应用程序上线序列，并且放置跳过链接在拇指容易触及的位置。只是一个简单的调整，可以为你的用户提供更好的体验……
记住，拇指仍然是主宰！
你的影子来自其中一个光源对吧？确保你的影子总是来自一个光源。这是一个简单的错误，但它可以让你的设计看起来更抛光且统一。记住，我们不是生活在一个拥有一千个太阳的国度里。
使用更好的字体组合，效率会很很快。当你想要提高你的字体组合技巧的时候，当面对1000个字体选择，只是去寻找对应的自己集合，效率会快很多。
文字和图像与一个微妙的覆盖。根据文本可能放置在图像上方的位置，您可以选择尝试，并测试完整的图像覆盖，或更微妙的(从下到上，或从上到下)渐变叠加，以实现两者之间的简单对比。为了在你的文本之间形成良好的对比，不要太复杂的内容和图片。
太多就会导致用户体验不合格。尽量只在标题和小段落中使用中心文字。对于几乎所有其他内容，保持文本左对齐。你的用户会感谢你的你。
当选择一个多用途的文字，尽量找一个大量权重。你搜索的字体有很多选择吗？重量、风格？如果你打算在你的一些项目中使用它，请尝试并确保它是这样做的。只有一种重量或样式。不行的。如果可以的话，我建议你避开这些。当然也有例外，某些项目会要求“只有一种风格”
更精致的字体，但对于绝大多数项目，你想要的字体再多一点就能…嗯…选择。即使你决定只使用两种或三种重量或风格，希望你在设计过程的后期需要更多的空间。
想要创造更容易理解的界面，对吧？把你的文字调暗在光亮的背景上。在浅色背景下工作时，不要让你的文本太亮。
当涉及到长形式的内容时，某些常规的粗细字体仍然可以看。但太重了，在屏幕上会很僵硬。你可以很容易地解决这个问题，选择一些像深灰色（即#4F4F4F）的基调，把文字往下写，让眼睛更容易看。
总是通过icon最突出的内容。你认为这是常识，对吗？我并不觉得。通过使用色彩对比度做区分，尺寸和标签，确保尽可能突出。如果可以的话，不要总是只依赖图标。如果可以使用文本标签，那就使用它们，让用户更好地理解。
当你的字体变小时，请增加行高，以达到更好的通用性。这同样适用于当你的字体大小增加。简单地降低行高。
使用x-height来测试字体的可读性。基本上，x-height是一个小写字母' x '相对于大写字母高度 (T)的相同字体。如果你的字体有一个大的x高，通常有助于更好地阅读，特别是在使用长形式的正文文本。另一种确定字体可读性，并缩小范围的方法如果你有一些无法选择的字体，可以做这个测试，比较来自特定字体的三个字符：大写字母I，小写的L和数字1。
当设计一个在应用程序内部使用的菜单时，确保提供最多经常使用的动作（例如：上传图像，添加文件等)最突出的屏幕上。
颜色-从你的图像中选择，会给你的产品带来生命。简单地从你的产品图片中选择颜色，然后应用各种色调。你选择的颜色阴影到你的背景，文字，图标或更多，可以添加。你的设计具有丰富的视觉趣味和个性。
基于字体的x坐标，设置您的线高度。不同x高的字体需要不同的行高测量，实现文本行之间的正确分隔。即使你可能有两种字体相同的字体大小(即：18px)它们的x的高度可以有很大的不同，这在选择正确的线的种类起着很大的作用高度来实现。
突出最重要的元素。通过使用字体大小，权重，颜色和布局的组合，可以很轻松的突出UI中最重要的元素。只是很简单，但微妙的调整，让用户体验更好一点。
操作错误的时候，添加一个额外的视觉辅助。在用户刚刚采取的操作附近添加一个错误消息可以是简单的形式，但很有帮助，当他们填写任何形式的表格时额外的视觉辅助。
尝试在移动端创建慷慨的热区。当为移动设备设计时，尝试创建足够大的可点击区域，是好的。对于只包含文本的按钮和链接来说，这是很有挑战性的，尽可能使用带有标签的图标。
以下是iOS和Android的最小推荐点击区域：
44 x 44pt用于iOS
48x48dp用于Android
在短标题上尽量使用全大写。如果你想在标题上使用全大写，请确保它们在任何时候都很短。有可能，最好是一行。将它们用于较长的文本是不好的。和之前的技巧一样，在标题中添加少量的字母间距。能让他们呼吸顺畅，而且视觉效果更好。
在轻文本和图像之间，保持可接受的对比度。一定要确保浅色的文字在浅色的背景下是清晰的。简单地应用一个稍微不透明的背景在你的文本后面将保持这些元素之间的对比度很好。
看看这些很棒的字体，用在标题非常好的。发现他们真的很适合标题，设计感很强。（我没有推广费用，请放心用）
看看这些很棒的字体，用于长文本是非常好的，强烈推荐使用。（我仍然没有任何推广费）。
标题和正文。当你想实现一个好的垂直节奏，以及一个强大的视觉之间，需要对文本元素排版、间距作设计。我见过许多设计，最常见的是在文章列表中，它们已经被应用标题的上下空白相等，这样就失去了这种联系在它下面有正文。在这种情况下，我总是会给我的标题更多的顶部边距，而在底部，标题和下面的内容之间的连接是更强，有良好的垂直节奏，视觉层次保留在所有的文章之间。
对于下载指标，试着去做尽可能提供信息。对于用户，尝试使具有信息性的下载指示符对用户很友好。你可以通过使用颜色来实现这一点，用百分数来显示当前进度，一个简单的图标，让他们可以在任何地方取消下载时间。
如果你能保持标题简短，简洁……“想做就做”。
如果可以，如果合适的话，保持标题简短，时髦，切中要点。而不是“这是你的风格，你的方式”，简单地使用像这样的“你的风格。你的方式。”人们会浏览，保持这些标题简短有力有助于他们更快地消化中的信息。
记住，这种方式可能会让人感觉很突然，你需要考虑一下你所从事的项目类型，以及目标受众来决定方法是合适的，相对于更标准的格式。
正确的设计“声音”。在项目中处理文本时，选择正确的字体将影响就像你说话的声音一样。要大声，要柔和，要友好，要正式，要有趣。每一种字体都有自己独特的声音，关键在于找到合适的字体你正在做的项目的声音。当你刚接触字体时，这似乎是一项艰巨的任务，所以不要害怕从类似的项目中获得灵感，并从这些项目中汲取灵感它们有助于影响你的决定，并提高你的理解什么是合适的。
你的正文，并提高可读性处理正文文本，并试图找到合适的行长度可能有点平衡。对于一个单独的列页面，45到75个字符被普遍认为是满意的行长度，而行长度为66个字符(包括字母和空格)被发现是最佳位置。当然，字体大小和行高在决定可读性时也起着重要作用，但是对于行长，保持在45到75个字符之间，就会更好了。
偶尔使用纯装饰的幽灵文字也可以，但要保留阅读的问题。屏幕上的大部分文本内容应该坚持可用性最佳的做法是没有问题的。但有时，希望添加纯出于装饰目的的文本，我们不希望所有的设计都落入乏味。如果没有元素会以任何方式影响用户体验，那么出于装饰的原因，插入奇怪的元素是可以的。
使用户界面中的元素彼此区分。按钮、通知，ui中两个独立但重要的元素。如果可以的话，总是试着确保你的用户能够快速地将它们区分开来，轻松扫描您的网站或应用程序。按钮，在大多数情况下，将优先，所以确保他们是最突出的。项目在屏幕上，并很容易区分其他元素。
只是一些细微的阴影，你所需要的。我们都喜欢阴影，对吧？它们可以作为微妙又很强大的视觉线索，在您的设计中使用要适度。现实世界中的阴影，在大多数情况下几乎是不可察觉的，而且所以你应该在ui中模仿这种行为。放下沉重和黑暗的阴影并降低不透明度，以实现一些的东西更微妙和栩栩如生。
使用全部大写？选择适合的字体，能够达到光学清晰度。在你的设计中适度使用“全部大写”是很好的。选择一个合适的字体与行高和较重的字重，使用户的光学清晰度。
让面包屑脱颖而出，易于为用户解释。面包屑无处不在，经常用于内容丰富的网站，通过最小的调整，你可以确保用户能够快速定位他们在一个网站上的位置以及他们可能需要去的其他地方。如果用户已经通过使用跳转到网站的某个深度，这一点尤其有用。
使用高度饱和的颜色?试一试用浅色调来缓和气氛或者阴凉处。高度饱和的颜色(明亮的蓝色、红色、绿色等)可以让网站看起来很棒，但是当过度使用时，它们会使使用者的眼睛疲劳，主要是在使用的时候的文字内容。尽可能使用时要适度，并尽量与柔和的颜色搭配颜色或色调变化)的饱和颜色，以避免可怕的眼睛疲劳。使用这种方法还可以直接注意到饱和的色彩和使最重要的内容前面和中心，与更柔和的颜色采取较少突出角色，让用户的眼睛休息一下。记住，在选择颜色时，可读性和可访问性应该是最优先的。
在ui中使用已建立的图标，为了避免给用户造成混淆。在你的设计中添加图标时，试着选择一个有代表性的已建立的图标。不要选择一个能传达正确含义和功能的图标否则会引起困惑，成为用户的认知障碍。不要在这些图标上过于叛逆。
在众多经过尝试和测试的设计原则中，这里有一个是帮助您为用户生成更清晰的ui的关键。接近只是确保相关设计元素放置在一起的过程，表明彼此之间的关系，这有助于加快用户的认知。
4pt基线网格+ 8pt网格=单一网格。当使用类型时，8点网格旁边使用4点基线
可以为你的设计带来更和谐的垂直节奏。您需要对齐您的类型到基线网格4，使用的行高值为4的倍数（16、20、24、28等）
为什么4？我发现在过去使用特定的文本大小时，按8的倍数缩放是不太合适。
减少标题上的行高是很好的。与长形式的主体文本不同，它需要足够的行高，以便折行易读。标题的推荐行高通常约为1至1.3倍。
选颜色有困难计划吗？在颜色上进行类比论。类似的颜色，也被称为相邻或相邻的色调，是其中之一最和谐的配色方案，可以大大帮助你，如果你有很难挑选出搭配得很好的颜色。由三原色、二原色和三原色组成的一组相邻的色调帮助您创建一个简单的，颜色方案快速。当你需要快速将颜色调和到混合中时，可以使用类似的方法。
在你的设计中尽量提高信噪比。你可以在你的设计中通过最大化信号来实现清晰和可用性最小化噪声，从而产生高信噪比。您可以通过确保提供相关信息(信号)来实现这一点有效，不相关的信息(噪声)被减少或完全删除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式说话。语气吗？尝试所有小写字母。使用较重的字体和大写会显得有点正式和夸张。试着选择全小写和较轻的字体。在处理特定项目时，使用类似全小写的拷贝可以呈现更非正式的、可接触的信息。记住要在图像之间使用某种颜色叠加与文字达到较强的对比。
当使用类型时，元素不需要尖叫“看看我!”一直如此但他们确实需要一个平衡的等级制度。只需通过重量、大小和颜色进行细微的调整就可以实现这一点。这样做可以让用户扫描并找到必要的元素，避免在过程中产生任何混淆。
养肥了，字体大小为最佳易读性。当设置暗色文字与浅色背景，选择一个更轻的粗细。但是…反过来说:浅色文字>深色背景。最好是看一下增加一点字体重量，特别是对于长表单副本。以最佳的易读性为目标，避免让用户的眼睛疲劳。
试着为你要呈现的内容选择合适的字体。用户是精明的，有一种直观的感觉，当内容与他们交谈当它不是。正确的字体选择是至关重要的，使您的内容讲给他们直率和情感的水平。
你是否使用全大写的短行文本？嗯…这是一个好主意，增加这些字母之间的间距，以达到更好的用户的易读性。这样做使单词更容易阅读和处理，因为字母更多彼此区分。字母之间的间距只要稍微增加一点就可以。
打开这些错误消息，您的表格有帮助。在使用表单时，请尝试并确保错误消息得到解释。出了什么问题，如何补救。总是让用户了解情况，即使是像常规一样常见的事情的形式。让这些错误消息有用，不要让您的用户蒙昧。
试着向用户保证在加载过程中会发生一些的事情你的应用程序。显示应用程序元素的框架可以帮助你快速沟通布局和确保用户正在发生一些事情。系统状态可见性是一个重要的原则要遵循，并允许用户知道发生了什么。不要让用户从一开始玩猜谜游戏。
告诉用户将要做什么如果他们应用了某个动作。在应用特定的操作之前，总是尝试并详细地告知用户可以有结果。这尤其适用于具有不可逆转后果的行为，如删除某些东西。让用户知道将要发生什么，并在此之前要求他们进行确认。他们就会按下那个标有“删除”的红色大按钮。
随着体验设计的持续发展，行业内各领域的体验设计质量都有了很大的提升，并且各个竞品之间的差距越来越小。而更高的界面细节设计质量不仅是各个大厂产品体验设计的追求，也是我们拉开竞品差距的关键一环。我们平时可能阅读了很多理论知识文章，但往往在实际工作中却较少运用。学习掌握理论基础知识固然是很重要的，但在设计执行时掌握设计技巧也更能提升工作的效率和质量。那么在设计执行层遇到问题有没有一些立竿见影的解决方案呢？本篇文章分别从视觉、内容和交互三个角度总结了十个界面细节设计点，希望可以帮助你遇到问题时另辟蹊径，延伸更好的设计思路。
在封面和背景图设计的场景中，我们为了让封面上的信息能够更容易看清，通常会在文字下添加一层黑色半透明或者渐变蒙层，但你有想过这个蒙层可以不止是黑色的吗？
在设计社区话题详情顶部背景图时，我们采用封面图模糊处理后作为背景图的方案，为保证信息能够清晰显示会在背景上加一个深色半透明蒙层。当用纯黑色作为蒙层时浅色背景可能会显得很脏，这时可以改用深灰色让背景看起来不会太脏，加入深灰色可以减弱部分背景的黑色让背景图看起来更加柔和。下图左边是用黑色#000000、30%不透明度，右边是深灰#333333、30%不透明度。可以看出右边方案的效果明显更清爽一些。当然更好的方案是通过客户端拾取背景图颜色后生成对应色相的深色蒙层，但这个方案设计相对比较复杂。需要制定一系列拾色和生成对应色值的规范，并且开发成本偏高。有条件的话也可以考虑应用。
界面中使用圆角设计更能让用户感到亲和力和舒适感，所以运用场景也非常广泛。除了比较常见的封面、卡片、按钮等等圆角的使用场景，在一些细节的处理运用圆角也能提升设计品质。比如下图中头像和背景图的衔接处、按钮和底栏背景的相交缺口处如果运用常规的切割边角就比较尖锐，会略显生硬。
而添加了圆角处理后视觉上会更加柔和更协调，对比一下前后的方案不难发现圆角的效果更胜一筹。不要看只是一点很小的细节，其实也体现了设计师对细节的细心追求，用户看了也会体会到设计师的用心。
另外再介绍一下我个人在sketch中快速绘制这类圆角衔接的方法。以下图为例，首先头像的圆形描边需要单独画一个白色的圆形图层，而不能直接在头像上添加描边。然后把圆形图层和白色矩形图层设为联集，再将图层路径合并。然后在两个衔接处的两边各添加一个锚点，注意两个锚点和衔接点的距离一定要相等，这个距离决定了圆角的大小，可以根据需要来调整。之后把衔接点的锚点类型改为“笔直”，再给这个锚点添加圆角半径。这样衔接点的圆角绘制就完成啦。另外运用布尔运算来画出圆角也是可以的，具体方法可以根据个人习惯来选择。
我们在页面取色时经常会给背景色和阴影等结合场景带有一些颜色倾向，以达到更舒适的视觉效果，其实这个方法也适用于文字。为了提升效率，我们习惯了在选择字色时使用一套设计规范里的颜色，比如#333333、#999999等等。但是个别的特殊模块我们是可以根据实际情况调整以获得更好的视觉效果的。比如下面这个案例是一个热帖榜单的入口模块，为了提高信息层级让页面更有活力，这里选择用浅黄色作为背景。如果使用规范的字色与背景的结合会相对不太协调，这里选择字色时就可以让文字颜色和背景颜色带有相同的色相，选用高饱和度低明度的颜色，并且次级信息同时可以带一点不透明度。让整个模块视觉更统一，信息与背景更融合。
类似这样的场景其实还有很多，有时我们也不必拘泥于设计规范中，适当的根据模块定制化一些细节可以达到更好的视觉效果。
我们经常会遇到一个页面中有多个同级图标排列的情况，不管是用宫格排列或是列表排列都需要每个图标整齐有序、尺寸统一。但实际情况下不可能每个图标尺寸都完全统一。一般这种情况我们可以给每个图标统一添加一个相同尺寸的矩形图层作为背景板，将背景板隐藏后再整体编组，这样一来就能保证每个图标所在的组都是相同的尺寸就能统一对齐了。
然鹅，我们有时会遇到一些不规则形状图标，尺寸是奇数甚至是带小数的。这种情况图标如果要在背景板上完全居中，我们可以打开首选项中的图层项，关闭契合像素功能，然后可以拖动图标或者用对齐功能让图标与背景板对齐。不要忽略这一两个像素的差别，这些微小的细节往往决定了界面设计的严谨和精致程度。
另外，我们可以根据情况灵活调整图标在背景板中的位置，例如左右箭头图标为了与页面其他内容边距对齐，可以将图标贴合背景板左右两边。这样就能减少后期开发还原调整的工作量，提高工作效率。
标题信息在界面设计中使用频率非常高，而在设计过程中我们可能会忽略极限字数的情况，导致开发还原时实际效果不理想。下面以一个案例来分享一下标题极限值的处理方法。
在腾讯动漫社区改版中设计话题详情页的标题时，产品规划标题的字数为12个字符，在右边有看漫画按钮的情况下是显示不完全的。这个情况就要考虑设计极限值的显示方案。常规的方案有：1、显示不完全时后面显示“...”；2、换行显示。考虑到详情页需要将标题完全展示，所以方案一不可行。而方案二在单行和双行两种情况下视觉效果不好统一。最终经过思考决定使用方案三：标题显示不全时左右滚动展示，可以在保证视觉统一同时显示完整的标题。
同样的，在很多情况下我们由于空间受限无法展示完整信息时，这个方案也不失为一个很好的选择。
在页面设计工作中我们有时会遇到信息容器边界固定，而容器内信息可以滑动的情况。例如下图中顶部导航和音乐播放的歌词页面，这种场景下一般容器边界不会做明显的界限，如果内容在边界处是直接被裁切的话体验的感受就会比较割裂。我们可以尝试更好的解决方案，在容器边界增加渐变过渡，这样信息在边缘的过渡就变得柔和，页面整体更协调。
这种渐变的过渡的应用场景还有很多，比如浏览简介或者文章时，需要隐藏部分内容并提供展开阅读全文的操作。利用渐变过渡也能隐喻还有未完全展示的内容，降低用户的理解成本并且也能够让用户有心理预期。
另外在sketch上呈现这种渐变过渡也很方便，如果背景是纯色的话可以在边界处添加一个与背景色相同颜色的色块，然后给色块添加添加不透明度从0～100的渐变，这个方法比较简单。如果遇到背景复杂的情况，也可以绘制一个和容器相同大小的矩形，在矩形边缘添加不透明度从0～100的渐变，然后建立蒙版把信息剪切到矩形中。
至于开发实现的方案还是要和开发哥哥具体沟通，确保用最便捷的方案还原出最好的效果。
动态流是我们非常常见的样式，是分发用户生产内容的主要载体之一。主要包含了用户信息、文字、图片和视频等内容。一般情况支持九张图片或一个视频，在有多张图片时，可以如下图做成宫格的样式适配，每张图片截取中间的正方形部分。
而只有一张图片或者视频时，为了保证图片和视频的预览效果，通常会做大尺寸的预览图，而图片的宽高尺寸并不固定，所以只截取中间方形的方案并不能满足要求，我们要根据这个情况做单独的适配方案。首先我们要设定一个裁切的比例，比如我们取竖图最小裁剪宽高比为2:3，横图最大裁剪宽高比为3:2（这里的宽高比并不是固定的，可以根据实际需要自己定义比例，采用4:3、16:9等比例都是可以的）。这样当图片宽高比小于2:3时，我们可以把图片中间区域按宽高2:3裁剪出来；图片宽高大于2:3并且小于3:2时可以按原图比例预览；而图片宽高大于3:2时，把图片中间区域按宽高3:2裁剪出来。另外要注意要给图片设置最大高度，否则图片高度太高会减少页面信息承载量，降低阅读效率，相应的也要限制最大宽度，否则会使图片规则不统一，从而页面适配效果不协调。
同样的，这个规则也适用于视频，由于全面屏手机占比越来越高，这些手机拍摄的视频大多是19:9、20:9的宽高比例，相比视频常用的16:9的比例更加细长，所以横屏视频可以统一裁剪为16:9比例，而竖屏视频可以裁剪为9:16比例。
动态流图片适配的核心是制定一个适配的规范来保证阅读的舒适度和效率。而这个规范并不是恒定的，可以根据自身平台需要来制定，以上仅作为一个示例供参考哦。
随着沉浸式设计的趋势，很多页面会采用无标题栏的设计。例如下图的个人中心页面，顶部利用背景图来渲染品牌氛围。但是这类无标题栏页面的上滑交互普遍有个缺陷，就是如果未经处理上滑后内容会与顶部电池条者是置顶的按钮位置重叠。这种类似“穿帮”的情况给用户的体验就是设计处理不够严谨。然而这种交互细节也是可以优化改善的。
优化的原理也很简单，就是在上滑过程中添加一个标题栏来分割页面内容，从而让内容和顶部元素不重叠。标题栏可以随上滑高度改变不透明度，以达到柔和的过渡从而实现丝滑的交互体验。
类似的处理方案在各大平台也有较为广泛的应用。
在用户体验发展的趋势中，无论是交互的反馈或者是图片、信息等都趋于由静态向动态发展。常规的静态图片承载的信息相对有限，所以在有限的载体内让内容动起来展示更大的信息量不失为一个很好的选择。
在旧版本的iOS12系统中有一个视图选择的功能，用户在这个页面可以选择标准视图和放大视图，并且有三张图可以滑动展示不同场景下两个选项的差异，但是这个方案需要来回切换标签和滑动图片来对比差异，效率很低。而在之后改版的iOS13系统中，这三张静态图被替换成了两张动图，轮流切换三个场景的页面，用户不需要再滑动图片就能更加直观的对比两个选项的差异。这个小改动不仅可以让图片展示更多的信息，还能减少用户的操作成本提升操作上的体验，让阅读效率更高。
类似的延展应用场景也有很多，例如新功能引导动画、动态banner等等。其实原理都是一样的，在常规静态图的基础上优化为动态图，不仅能增加信息的承载量，提高阅读效率，也能让页面更有活力。
为了满足运营的需要，我们有时会在多同级个图标或者按钮中突出其中的一个。例如下图的分享弹窗，想要在多个分享途径中突出微信的图标，但同时又要保证图标风格的一致性，这时就可以利用微动效来达到强调的效果。
而微动效的落地形势也有很多种，下面抛砖引玉介绍几种简单高效的方案。
可以看到添加了微动效后不仅可以达到强调某一个对象的目的，同时也能保证每个图标风格的统一，微动效也让页面更活泼有灵性，不失为一举多得的方案。
微动效的形势当然不局限于上面几种，大家也可以发散思维，创造更多有创意的方案。
文章来源：站酷 作者：腾讯动漫TCD
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
于B端，我想刚开始很多同学就直接拿Ant Design套套界面，因为公司要求并不高，随后字节Arco Design也推出了对应的模版和规范，能让我们快速作出一个不出错的方案。
但是随着公司对B端越来越重视，这些模版显然就太烂大街了。公司、市场的要求显然不止于此，我们的设计追求也不止于此。
那么我们如何才能摆脱套模版，提高界面的精致度，提升界面的交互体验呢？
其实很简单，王阳明先生告诉我们知行合一，知是行之始行是知之成。我们如何才能提升B端界面端精致度？
第一，需要知道什么是好的设计；
第二，需要不断的去实践去练习，缺一不可。
本文先和大家谈谈知的层面，提高我们的眼界，下面就和大家分享一些不错的B端产品，大家有时间可以去慢慢体验。
PS：作为B端设计师，一定要去多拆解竞品，多研究好的产品，别面试的时候，面试官问你研究的B端产品是什么，你只知道阿里云、腾讯云、百度云哦！
1、Hubspot
做B端的同学，尤其是做CRM的同学应该都知道Salesforce，他是全球最大的 CRM（客户关系管理） 工具公司。
Hubspot同样是提供客户管理相关的应用，虽然成立相对Salesforce晚，但是在市场上也占有一席之地。
从设计的角度来看，他的界面风格更加简洁舒适，从体验上来看和国内的CRM系统完全不同，其体验更加自然和舒适。
这种风格大家看了有没有觉得很熟悉呢？
大家在去看看 GoDoddy , Airbnb ，Zillow,是不是发现风格有一点类似，大家可以对比国内产品去拆解下他们的交互细节有什么不同，完成同样的任务他们采用的方案有何不同，相信你会有很多的收获。
国外的界面看着总让人觉得很舒适，仅仅是因为克制的设计、中性灰使用得好吗？当然不是，是因为英文本身就是图形化的文字。
如果翻译成中文，你会发现好像不是特别理想。
这个样子拿给领导过稿，怕是分分钟被拍死，因此我们还是需要多看看国内优秀的产品。
2、神策
神策的设计，我想B端的朋友不陌生吧，国内产品中他的设计一直是我们的参考对象。
不同于其他产品，他的体验门槛比较低，注册后就可以去体验他的demo，也没有试用期限，参考对象从可视化报表，到界面交互均能找到参考。
不过当你参考一次后发现，做出来的界面怎么还是少了一些灵魂，虽然界面风格上了一个台阶，但为什么用户还是觉得产品难用。
3、项目管理类
这里不得不和大家推荐项目管理类产品了，这类产品是专门给互联网公司的开发团队使用，他们都是专业用户，同时这些都是提高他们工作效率的工具，因此这些产品投入的成本更高，优化得更好，拆解他们的产品，就是直接观看高手的成长之路。
Jira
Jira是Atlassian公司出品的一款事务管理软件，JIRA的界面效果交互都非常不错。大型互联网公司如LinkedIn、Facebook、eBay等内部都在使用Jira。
同时他也是国内项目管理类产品的学习研究对象，因此大家可以通过文章、B站、界面截图，自己申请体验等方式全面的进行体验。
同时也可借助群的力量，调研下有使用Jira的小伙伴，看看他们在使用中有什么问题，下面是我收集Jira网页版和本地配置版的问题截图，这些都来自不同角色的真实体验，会更有分析的价值。（这部分截图涉及到公司的数据，同时数量多不太方便打码，就不分享给大家了。）
当然国内的项目管理类产品也得去看，我们要对比哪里做得好，哪里还需要改进。国内的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，这些产品不管从视觉还是体验都非常不错，大家一定要去体验。
5、文档管理类产品
通过不断对竞品进行拆解，你已经不是当初那个小白了，你的行业认知，方案设计能力应该赶超了一大波人。
成长的同时，又发现你设计的界面，不太精致，少了些温度，这时候推荐你看文档管理类产品。
WPS
第一个和大家推荐的是WPS，界面简洁，配色舒适。 
飞书
在管理类的软件中，不得不提飞书的管理界面，从设计到使用体验，他给我的感觉终于不是那么千遍一律，用组件库搭建起来的感觉。
他开始有了温度，开始注重品牌感的打造，用户的引导，符合品牌调性的插画。
对一些体验的细节进行优化，比如传统的编辑都是放在页面顶部，它采用了离光标更近的位置。 
根据菲兹定律，光标当前的位置和目标位置的距离D越短，所用的时间越短，具体好不好用，欢迎大家在评论区留言哦。
6、概念稿
到这时候如果你觉得线上的产品太禁锢思维，那么推荐你看看dribbble、behance，搜索data、web、dashboard等关键词，去看看有没有新的灵感。
我的花瓣收集了一部分，如果不嫌弃，可以去看看，顺藤摸瓜应该可以找到很多不错的设计。
图片标题
7、画重点
如何提升B端界面的精致度？
第一，要知道什么是好的设计，多拆解国内外优化的B端产品。
第二，多在工作中时间，有时间多做ABC方案，锻炼自己的方案设计能力，多踩一些坑，时刻保持学习能力，慢慢就成长了。
文章来源：UI中国 作者：风筝KK
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
原文地址：站酷
作者：孔雅轩LineVision
转载请注明：学UI网》你的设计有依据吗？详解用户体验设计中的规律与逻辑
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
每个产品都有核心的用户体验，这基本上是它存在的原因。它解决了人们所面临的问题，而且为他们提供有意义的价值。关键内容和功能的组合代表了核心的用户体验。要查找你的产品核心用户体验，就要问自己一个问题：“客户需要完成哪些最常见和最重要的任务？”在你用于产品的每个渠道上支持这些核心任务的本质至关重要。例如，Uber的核心用户体验是任何时间随叫随到。无论屏幕尺寸如何，此功能都能在每个设备上正常工作实现这一目的。
预约出租车是Uber用户最重要的任务。用户可以使用Apple Watch完成此任务。图片来源： Techcrunch
尽管存在大量不同屏幕尺寸的设备，但绝对不能定位各个设备，可以根据用户可能关注的任务定义产品的设备组。最常见的设备组是：
移动手机
平板电脑
台式电脑
智能电视
智能手表
不同的设备组在不同的上下文中提供不同的服务：用户根据他们正在查看的屏幕的类型参与不同的交互模式。例如，手机主要用于微任务，并且具有较短的用户会话。平板电脑主要用于内容消费，目前不被视为大多数人的工作工具。在了解各种设备类型的基本上下文的假设对于构建一个好的用户体验是至关重要。
确定产品的核心用户体验后，选择一组你希望支持的设备组，你需要调整每个组的体验（对于每个上下文的使用）。上下文的设计在不同设备组设计时尤为重要。
第一，并非所有功能都在所有设备上都有意义。你需要确定你的产品在多个设备组中使用的不同场景，并设计适合每个场景的体验。例如，通常移动用户比电脑用户想要的不同于产品。以 Evernote为例，可以在多台设备上使用流行的笔记本产品。其电脑版本针对内容消费进行了优化：
用于电脑版本的Evernote应用程序被优化用于阅读文本和查看媒体。
而移动版本是针对拍摄笔记、照片和捕获音频进行了优化的：
Evernote了解移动环境：它利用设备功能，并提供快速保存想法的方式（添加文本笔记，捕获照片或设置提醒）。
第二，不同的屏幕允许不同的输入法。以触摸输入为例。在设计具有触摸输入（移动手机和智能手机）的设备时，设计师会犯的几个常见错误包括：
小的点击目标。点击目标（如CTA按钮）必须具有足够大的尺寸。通常至少7毫米是足够的，但最好使用10mm触摸目标尺寸。
图片来源：UXMag
将项目过于紧密地放在一起。你应该考虑点击目标的大小以及它们之间的间距，因为间距有助于分离控件，并给你的用户界面提供呼吸的空间。建议的间距至少为23pt以防止输入错误。
按钮之间的间距
使用悬停状态。但在触摸屏上，没有“悬停”。
历史上，设计师一直从事大屏幕到小屏幕的设计工作，这意味着第一个也是主要设计是为了完整的电脑桌面视图（它具有最多的功能）。只有电脑桌面设计完成后才移植到移动设备和其他设备组。但当设计电脑桌面时，我们通常面临“厨房水槽”问题：许多功能被添加到产品中，特别是当涉及多个利益相关者时。这并不奇怪，，当你有很多不动产时，添加功能是比较容易。实践经验清楚地表明，最好使用移动方法进行设计，并通过与用户相关的最小屏幕创建应用程序。
当你首先设计相关屏幕的最小尺寸时，它会强制你决定最重要的。一段时间后，你将采用同样的方法仔细选择产品的其他版本，无论是电脑桌面设备，平板电脑还是电视。
在大多数情况下，手机将是相关屏幕的最小尺寸。如果可穿戴设备对你很重要，那么你将需要考虑具有更小分辨率的微型屏幕。
想想大屏幕以及小屏幕，给大屏幕和小屏幕提供同样的注意力：
不只是缩小设计，使其适合那些大屏幕。充分利用你可以使用的额外空间。
图片来源：Wikipedia
确保图像不会因为屏幕尺寸的放大而失去质量。
左：低质量图像。右：正确的分辨率。
考虑大屏幕细节。每个设备组都有自己的不同。例如，电视屏幕的设计被称为“设计10英尺体验”，因为从沙发的距离来看，与电脑桌面屏幕相比，屏幕上元素的明显尺寸明显更小。
电视的用户界面元素应大于电脑桌面。图片来源：Samsung
一致的体验意味着应用程序及其在所有屏幕尺寸上的体验都是相似的。无论设备如何，一致的用户体验是成功的全通道用户体验的关键组成部分之一：
对未来与产品的交互设定期望，并建立用户信心。
一致的体验使得你的产品在其他设备上与用户的交互更容易。
你可以将它们视为相同体验的方面，而不是将设计定制到越来越多的屏幕和设备中。例如，Google搜索应用在所有设备上提供相同的搜索体验。
当设计和功能一致时，用户可以在他们选择的设备上更快更有效地完成任务。
跨不同设备组创建无缝体验对你的用户非常重要。人们可以自由地在设备之间来回移动，完成任务，或当他们从设备转移到另一设备时，他们期望他们的产品和服务与他们一起转移。这意味着用户不必考虑他们正在使用的设备，环境的变化或上下文的变化，并且可以依赖于设备良好的功能性和独立于设备的易用性。
大多数人如何走过他们的一天，他们访问的主要屏幕。图片来源：Intercom
根据使用情况，你可能希望确保每个设备上的内容消耗量同步。以Apple Music为例：你可以在Mac上设置播放列表，并在iPhone上即时播放，也可以开始听iPhone上的歌曲，当你转到电脑桌面时，你将被拍摄回到你在iPhone上。
Apple Music可以很好地处理多个设备的同步。
在测试环境中有效的并不总是在现实世界中。在实际设备上为实际用户运行可用性测试，你可以在发布之前发现用户体验的问题并解决它。
在设计多个屏幕和设备时，最好的策略是保持最终的用户体验。作为用户体验设计师，你必须评估产品的使用时间，位置和方式，以评估用户的最佳体验。无论你的内容是什么尺寸的屏幕，用户都希望在各种设备之间获得流畅的体验。
原文地址：ADOBE BLOG
译文地址：UI中国
作者：Nick Babich
译者：SKYUI
转载请注明：学UI网》在不同屏幕和设备上创建用户体验设计的8个步骤
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
传统动画注重理论基础以及扎扎实实的基本功，并且是艺术学院必修课，宫崎骏的早期的动画就是传统的手绘动画。每一张都是纯手绘的作品，所以我们看到宫崎骏的动画会有完全不同于纯工业的动画的感觉。
这里我们只针对我们互联网产品设计讲一下交互动效的应用场景，我总结了以下七大应用场景，分别是图标动画、界面交互、插画动效、HUD大屏、汽车系统、项目包装、品牌宣传等等。
优秀的动效可以帮我们解决产品设计中的很多问题，可以从用户体验的五大要素来进行价值的拆解：
战略层本质上来说大部分设计师其实是接触不到的，当然接触不到战略并不能代表我们不需要了解，作为设计师我们必须了解公司对产品的战略定位以及期望，也必须要了解用户的目标和心理预期。战略层是整个产品的核心也是底层，所以单纯来讲，动画在这一层面上可以发挥的余地是是不多的，因为更多的这一层更加关注意识形态的战略思考。
范围层是通过战略思考来思考明确产品的大概功能和内容，有很多产品的功能复杂，交互繁重，内容很多，在这种情况下动效就派上了用场，我们可以尝试通过动效来解决内容过载，优化交互模块，扩展产品内容功能范围。
这一层主要确定产品的功能结构以及层级，主要设计用户如何快速，准确的触达某个界面完成某个任务，要考虑用户体验地图，用户整个的任务路径，简单来说就是用户要做什么事情，如何做，做完之后应该干什么，如果能对动效巧妙的运用，就可以做到引导用户，练习上下流程的作用，降低用户理解成本，提搞产品的操作效率，提高产品的可用性和易用性。
从这一层开始，UI设计师接触的内容逐渐多了起来，大家也会更加熟悉工作的内容以及范围，这一层主要体现在优化页面布局，确定元素摆放位置，涉及到具体的信息、界面、导航设计等等。通过利用格式塔，栅格，设计语言等方法确定产品功能具体页面内容布局，我们可以通过动效来进行辅助设计，例如强化元素的位置、颜色、大小，优化页面的切换、跳转的流畅度以及自然度等等。
表现层具体涉及到视觉、听觉、触觉的体验设计，也是做为视觉设计师、UI设计师发挥最多的一层，在表现层动效的展现形式会多种多样，这里不展开讲解，大家应该都明白。在表现层加入适当的动画能够提升产品趣味性，加强用户与产品的情感链接，增加用户对产品的友好度。
5G时代已经到来，5G的普世将会为科技发展带来更多的可能性，众所周知5G的速度是4G的百倍，那么意味着我们的设计的动画会加载的更快，动画文件的大小限制将会被打破，另外也可以在某些领域的产品内设计更复杂更酷炫的动画。
它是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门新的技术科学。该领域的研究包括机器人、语言识别、图像识别、自然语言处理和专家系统等。在我们日常生活中运用的包括不限于人机对弈、模式识别、自动工程、知识工程等等。所以未来在这些领域内，我们能参与到的动画设计必然会更多样，形式也会更丰富，挑战也会更大。可能会不断有新的动画形式以及设计方法被创造出来，让我们拭目以待。
是20世纪发展起来的一项全新的实用技术。虚拟现实技术囊括计算机、电子信息、仿真技术于一体，其基本实现方式是计算机模拟虚拟环境从而给人以环境沉浸感。随着社会生产力和科学技术的不断发展，各行各业对VR技术的需求日益旺盛，VR技术也取得了巨大进步，并逐步成为一个新的科学技术领域。相信在未来的工作中必然会慢慢的接触到VR界面设计以及动画设计，并且我相信未来会逐渐的变成主流。
参考资料
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
俗话说，“有样学样（Monkey see, monkey do）”，包括人类在内的灵长类动物都擅长模仿。这个词表示无意识镜像或模仿我们周边人行为的状态。根据我们在产品方面的经验，我们进行的互动具有亲密性和即时性。
你有没有试过听了朋友说的话之后又说给对方听？这是变色龙效应的完美例子。
指由于之前受某一刺激的影响而使得之后对同一刺激的知觉和加工变得容易的心理现象。我们半夜三更看了电视的恐怖电影之后，跟看喜剧相比，屋子里面听到的任何吱吱声或者噪音更有可能让你毛骨悚然、心惊肉跳。
启动效应会塑造我们对环境的行为和反应，而且往往是有效的捷径，让我们可以迅速做出决定。这也是一种有效的说服工具，已经广泛应用到产业的营销和广告领域。
德国精神病学家和儿科医生海德维希·冯·雷斯托夫（Hedwig von Restorff）在1933年提出的理论。冯·雷斯托夫有一次实验，涉及到让受试者观看一系列相似的物品。结果他发现，如果其中某个很特别的话，那么相比其他物品，受试者就更容易回忆起这件物品。
冯·雷斯托夫效应又叫做隔离效应（isolation effect），或者新奇效应（novelty effect），其预测是当存在多个相似的对象时，跟其他有所不同的那个最有可能被记住。
该理论由赫尔曼·艾宾浩斯（Herman Ebbinghaus，著名的艾宾浩斯遗忘曲线也是他的发现）提出。它描述了序列中项目的位置是如何影响回忆的准确性的。
这种效应是指记忆材料在系列位置中所处的位置对记忆效果发生的影响，包括首因效应和近因效应。系列开头的材料比系列中间的材料记得好叫首因效应或者首位效应；系列末尾的材料比系列中间的材料记得好叫近因效应或新近效应。
用户往往最容易记住系列中的第一项和最后一项。
把最重要的信息放到开始和结尾。把最不重要的信息放在中间，这是吸引用户注意力的高效方法。
在格式塔原理之下，派生出了很多的其他原理。我们会在下面进行简要讨论：
在设计周围留白，从而创造出一块大于其各个部分之和的区域。用最简单的措辞来说，格式塔理论是基于这样一种思想，即人脑会下意识地把各个部分组织成一个系统，从而创造出一个整体而不是一系列的离散元素，通过这样来简化和组织包含有很多元素的复杂图像或者设计。我们的大脑天生就是为了看清结构和模式，从而更好的理解我们生活的环境而构造出来的。
在格式塔里面，相似的元素不管彼此是否靠近也会在视觉上进行分组。分组可以按颜色、形状或大小进行。相似性可用来将可能彼此不相邻的东西联系在一起。
不管实际画出来的线条如何，人眼在观看线条的时候都会按照最平滑的路径想象。当目标是引导访客的眼睛朝特定方向看时，这种连续性会是很有价值的工具。
这条原理反映的是人会把设计或图像缺失的部分自行脑补，创建出一个整体来。或者说得简单点，在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到复杂的形状。
这条原理是指元素之间的距离如何。在UX设计当中，运用相邻性是为了让用户将某些事物组合到一起。通过把它们放在一起，用户就会感觉它们是相关的。
跟闭合原理类似，这条也利用了负空间。我们的大脑会区分出图像前景的对象。设计师如果想要突出某个焦点时，用这条这真的很方便。
这条原理是指，沿同一个方向移动的元素本身会被视为一组。如果我们看到一群鸟朝特定的方向飞行，我们就会把它们组合在一起，并将它们看作是单个刺激物。
指在一个人的工作记忆使用的脑力综合。是指你为了完成任务需要消耗的脑力。
认知负荷是表示处理具体任务时加在学习者认知系统上的负荷的多维结构。
以英国心理学家威廉·埃德蒙·希克（William Edmund Hick）命名，其理论指出当选项增加时，下决定的时间也增加。一个人做出决定所需的时间取决于他或她可以选择的选项数。因此，如果选择的数量增加，则做出决定的时间将对数增加。
决策所需的时间随着选项的数量和复杂性增加而增加。
这条定律规定，任意一点移动到目标中心位置所需时间与该点到目标的距离和大小有关，距离越大时间越长，目标越大时间越短。
获得目标所需的时间取决于到目标的距离以及目标的大小。
可以利用这条定律来影响互动按钮的转化率，尤其是用手指操作的移动设备上的设计，可以把希望互动的按钮设计得更大一点，把不希望用户点击的按钮设计得小一点，更难点中一点。用户任务/注意区域与任务相关的按钮之间的距离应尽可能的短。
这条指的是用户往往会认为有吸引力的产品更实用。大家往往会相信看起来更好的东西用起来也会更好——就算实际上效率和效能并没有提高。
用户往往会把美观的设计看作是更实用的设计。
对视觉设计的积极情绪反应会让他们对可用性方面的小问题更加宽容。
这一理论是由心理学家佩维奥（Paivio）提出来的，他强调在信息的贮存、加工与提取中，语言与非语言的信息加工过程是同样重要的。佩维奥（1986）指出：“人的认知是独特的，它专用于同时对语言与非语言的事物和事件的处理。”利用双重编码系统可以让用户更容易记住我们网站上的重要内容。
我们会根据你对现实世界的体验和感知为脑中想到的文字建立视觉形象。一想到“体育”，我们的大脑就会自动想到球的形象，运动员的形象。通过将文字跟图像配对，可以更容易记住东西。
我们一般不会用价值数千美元的眼动追踪软件或者脑电图来判断设计是不是有效。但是5秒测试是个强大工具，用它就可以确定你的设计是不是一看就明白。
所谓5秒测试，就是让受试者观看网站或应用5秒钟，然后回答有关主题和设计的问题。如果用户的答案或者留下的印象跟你的设想不一样，那就说明设计没有达到原先的目的，需要继续改进。
这条原理来自罗伯特·西奥迪尼（Robert Cialdini）的著名著作《影响力：说服心理学》（Influence: The Psychology of Persuasion），里面列举了类似互惠、一致性、社会认同，权威以及稀缺性等原理。
这些原理往往决定了我们在社会当中的行为方式，我们可以用它们来识别人类行为。
互惠：这条原理是说人都不喜欢亏欠别人。如果别人给了他们什么东西的话，他们应该会觉得有责任给予一定程度的回报。提供免费的电子书，博客文章，播客或其他免费内容，然后换取用户提供的电子邮件地址，这就是现实生活当中互惠的好例子。
权威：权威这条原理说的是我们大多数人都意识到自己没办法在每一件事情上都是专家。我们最好的选择是依靠专家的证词。所以，我们允许专家和任何特定议题的“权威”人士影响我们。大家往往会对高水平的专家和权威人物的话言听计从，因为觉得他们值得信赖。如果跟成功公司能扯上关系的话就会经常被提及，好建立一定程度的尊重和可信性。
一致性：这条原理说的是大家一般都希望自己行为跟自己的决策过程保持一致。西奥迪尼曾经进行过一项研究，他让两组志愿者挨家挨户去询问房主愿不愿意在自家前面的草坪上立一块写着“小心驾驶”的大广告牌。
第一组的做法就是简单粗暴直接上门问。而第二组是先做一个初访，请求房主在他们前面的草坪放一块很小的标志牌，“做一位安全的驾驶员。”
结果第二组的成功率高出450％。这就是（承诺与）一致的一个例子，因为房主会觉得自己有义务在这种情况下保持一致性。
社会认同：大家未必总能知道自己为什么会这么做。大家是不是都在跳舞？如果是的话会有更多的人跟着跳。大家是不是都在看那个视频吗？是的话会更多人会点击它。是不是每个人都在买你的产品吗？是的话，你想拦都拦不住。在电子商务的实践当中，我们使用的网站会社会认同（比方说点评、评论和推荐）来吸引其他用户，并引导他们做出购买决定。亚马逊有“购买这个的客户也购买了那个”的提示，希望强化你跟商品的关联性，让用户认为“如果别人需要它的话，那我也需要它”。
稀缺性：在塑造行为的原理方面，这是我的最爱之一。稀缺性原理是说，如果东西有限的话，大家就会更想得到它。能得到的人越少，吸引的人就越多。
为什么有的商店会推出限量版服装？这就是原因，这样可以吸引更多的顾客。
变化盲视（Change Blindness）：指观察者不能探测物体或情景所发生变化的现象。
记忆未必永远可靠。我们对信息的存储方式会被我们的想法、感知信念以及周围环境所重构。
我们的工作记忆能力大概就只有10到15秒，一次只能记住3到4个东西。
研究表明，大家往往会制造出错误的记忆，要么会记住了没有发生过的事情，要么就是记得的东西跟实际不一样。由于记忆具有提示性和可塑性，所以根据大脑的习惯或心智模式来进行设计就非常重要，因为这样会更容易记住。
尽可能为用户提供帮助和反馈，并提供撤销选项，以减少用户犯错时的沮丧情绪。让体验个性化，好迎合我们用户的喜好。
单纯呈现效应是指图片、符号、数字、声音等外部刺激信息只要经常暴露在人面前，就能增加人们对其喜欢程度的现象。这种社会心理会发生在我们所有人身上，我们在不连续的时间段内见到某人的次数越多，我们觉得这个人讨人喜欢或迷人的可能性就越高。这种效应有时候又被叫做熟悉定律。
了解单纯呈现效应及其机制，会让你在转化率优化的工作中具备重大优势。更多的呈现会带来熟悉感，进而带来舒适感，从而让转化率优化整体上得到显著改进。
色彩也是影响人的选择和行为的主要因素之一。我们经常会发现儿童玩具颜色鲜艳，女孩玩具往往是粉红色的。这方面研究的主要思想是色彩对用户的感知有很大的影响。
所以，作为设计师我们应选择能够传递含义与正确信息的色彩。
红色。跟热情、强烈或攻击性的感觉关联。同时是好和不好的感受，比如爱、自信、热情、愤怒等的象征。
橙色。充满活力的暖色，给人以兴奋的感觉。
黄色。幸福的色彩。象征着阳光、喜悦和温暖。
绿色。大自然的色彩。给人以来平静和新生的感觉。另外，也可能用来表示经验不足。
蓝色。一般用来表示企业形象。往往表现出冷静的感觉，但是作为一种冷色，也跟距离与悲伤有关。
紫色。由于很多国王都穿紫色的衣服，所以长期以来就与皇室和财富联系在一起。紫色也是代表神秘与魔力的颜色。
黑色。这种颜色有很多含义。往往跟悲剧和死亡相关联。可以代表着未解之谜。可以是传统的，也可以是现代的。一切都取决于怎么用，以及跟哪些颜色一起用。
白色。意味着纯洁和纯真，以及完整性和清晰度。
我们一般是从大脑负责本能的部分得到这种反应，本能反应的速度比我们的意识要快得多。本能反应会导致我们用了一下产品后就爱上了它。这些反应植根于我们的DNA之中，所以很容易预测。
作为设计师我们就是要通过设计制造出视觉上极其出色的美感印象。为什么一个东西在用户眼里好看，以及为什么他们是我们的目标受众，他们的需求是什么，这些都不难猜测。
用户体验设计的概念根植于认知和行为心理学，那是人类与机器交互的蓝图。当然，本文仍还没有涵盖到所有的设计心理学原理。但是，作为设计师，我们还需要观察和理解最终用户，并且加深对用户的理解与共鸣。在产品开发过程中，了解用户的互动、行为和情感可以增加更多的价值。
原文地址：追波范儿（公众号）
作者：terechen
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com