做交互设计10年，我为何转岗到产品经理？
常见的B端卡片组件，应该怎么设计才可以达成更好的传播效果、传递更清晰、更完善的视觉体验？在本篇文章里，作者就结合具体案例，对B端卡片组件设计进行了技巧拆解，一起来看看吧，或许会对你有所启发。
B端设计的过程中，并不是所有元素抄一抄别人的，从组件库里引用下就完事了，而是要经过具体组织并设计。尤其在一些特殊的组件中，是可以去表现设计水平，提升项目整体视觉质量的，而不是让它们看起来非常的枯燥乏味。
这次，我们的改版主要就围绕在B端常见的卡片组件中，通过3个以前提交过的作业，来分享如何设计B端的卡片。
三个改版案例我们都遵循相同的设计方式和顺序：
在该案例中，卡片作为页面的核心对象，视觉重心不够突出，且内容的权重没有得到有效的表现，订单标识只有一个的情况反复强调对识别卡片没有任何帮助，且卡片占比过大，没必要的浪费页面空间。
所以，重构它的结构时，重点突出标题弱化标签，将卡片拆分成标题、信息、操作三个栏，让信息的呈现更简洁直观。
然后再具体优化内容和细节，对重要信息突出，固定的标题字段弱化。
最后，再根据主色的需要填充色彩进去即可。
这个案例也是设计得比较有问题的，但是忽略掉全局组件的粗糙，卡片部分的设计也是很多作品案例中的常见问题，要素过多，没有主次，在列表化的展示中，根本没办法很好的识别相关的内容和关注到有效的信息，会被淹没在繁复的字段内容中。
所以，我们用相同的方法作下区分，将内容分为上中下三个栏。
然后再对字段做权重的划分，虽然字段信息很多，但值得被突出的要素不多，企业名和数据是卡片中最重要的信息，一个用于识别卡片，一个用于查看核心的指标。
最后，再完成样式的补全即可，只在星级和用户职位上增加色彩。
问题和前面还是一样，内容很零碎，所有要素都强调，于是就没有重点。所以，下面对它们进行改版，这次因为数据项不再是重点，卡片的目标不是用来查看数据而是用于检索进入到下级页面的，所以只分了两栏。
然后，再对权重进行强调，查看详情是这里面最重要的元素，图片则没有太大的意义仅仅是点缀所以缩小。
最后，再完成相应色彩的添加和图片的填充，完成最终的视觉效果。
这三个改版都用了很简单的修改方式，通过理解卡片的作用、字段信息，对它进行信息分区，然后填入相关的字段并做出权重划分，最后再用颜色为不同的要素加权。
只要掌握这样的设计思路，做绝大多数卡片都不会有阻力，只会纠结于应该用哪套样式更合适。
因为时间关系只做了很简单的调整，没去做多套大跨度的样式变更，同时套进原图环境没做整体的处理，所以还有很多升级优化的空间，理解这个感觉即可。
作者：酸梅干超人；
本文由 @超人的电话亭 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash ，基于 CC0 协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
编辑导读：动效效果是一个功能性元素，而不仅仅是一个装饰。本文作者介绍了五个交互动效效果，水平视差滚动效果、动画搜索栏交互、提交按钮启动信息、页面间的分页动画、用粘性元素展开卡片，希望对你有帮助。
设计一个带有动效效果和转场效果的用户界面，是为另一个手机应用规划一个更好的用户体验的好方法。在一个注意力持续时间短暂的世界里，动画-微交互是刺激用户参与的好方式。
这就是为什么 Airbnb最近推出Lottie–它是一个“新开源工具，可以轻松为本地应用程序添加动效效果”像Lottie项目表明了，为应用程序和网站增加用户体验，其中添加动画作为一个新元素越来越重要。
就像所有放入界面中的元素并与之交互的过程一样，动效效果也是一个功能性元素，而不仅仅是一个装饰。动效效果在用户界面应该坚持一个恰到好处的处理，而背后设置始终需要有一个明确的目的。当动效效果是锦上添花而不是美中不足时，用户体验会更流畅。
以下是介绍的交互动效效果：
视差效果在数字系统设计中可以同时用于垂直面和水平面。视差效果首次应用是在视频游戏，数十年后它进入了网页设计应用中，然后渐渐的又进入了移动应用程序，使用静态或缓慢移动的背景图像与快速移动的前景图像，创建一个多层次的3D滚动效果。这使用户体验更加身临其境，以其微妙之处吸引用户。为什么这会让人眼前一亮-
一起看一下在设计原则中的两个视差滚动效果实例。
手机游戏武器卡：
Weapon cards by Hassan Mahmud
视差效果最佳位置之一是在移动应用程序或网站上水平或垂直滚动卡片，体验最流畅环节的感受，是在最后部分的一张卡片。类似于iphone在你滚动到特定列表的末尾时引入的橡皮筋效应。
耐克APP促销卡：
Nike promotional cards by Jardson Almeida
这个例子是耐克APP概念创作的视差滚动效果，来促进即将到来的产品发布。
这个设计通过突出前景元素—- 鞋子—- 将其提升了一个层次，从而超越了背景卡片的边缘。这个效果弥补滚动时发生的背景颜色改变。正如你看到的例子，精心制作的视差互动效果可以很容易帮助你从产品群中脱颖而出并为你的访客建立一个好的印象。不要认为视差是纯粹的装饰，像你使用的其他技术一样，它应该为你的用户增加真正有价值的体验方式被融合。
但是，需要注意的是在视差效应范围内过多的运动可能会对那些患有前庭疾病的人造成伤害。运动错觉和深度错觉可能导致眩晕或者迷失方向感，请切记这些设计准则：
搜索栏是用户在移动应用程序或网页设计中最常见的图形元素之一。在这种类型的动画中，界面通常只有一个搜索图标，当你点击它搜索输入字段时会显示一个弹性动画。通过在搜索元素中添加一个微妙的动画，设计师可以实现两个基本目标:
让我们看一下这个交互的例子：
Search transform by Alex Pronsky
这个设计展示了放大镜（搜素栏）作为圆形图标，点击该图标时它会有动效，变成药丸形状的搜索框。这是一个非常轻量级的交互设计，在 Principle 上只需要不到5个页面就可以实现，并且在开发应用程序或网站时也同样简单。
用户填写表单或在应用程序中进行某些选择按下提交按钮之后就会出现这个动画。一个应用程序首次启动并且所有序缓存和数据都被提取时，启动(Splash) 动画也会被使用。启动动画通常包括 logo 和应用程序的名称，通常会在应用程序打开前在屏幕上出现片刻。为什么这会让人眼前一亮-
让我们来看一个交互式启动画面的例子：
Submit splash screen by Khai
这个设计是用户在应用程序中完成提交交互之后的展示的动画。当数据被发送到数据库时，弹跳球创建了一个有趣的体验，接下来的勾号向用户提供反馈，告诉用户的操作是成功的，这是一个重要的体验实现。以下是启动画面时要遵循的一些最佳的方法：
分页是一系列相互连接且内容相似的页面，需要注意的是即使页面中某一部分的内容可以分为不同的页面，我们仍然将这个概念定义为分页。其优点包括3个：更容易的导航、更好的用户体验、更流畅的购买过程。通常用在电子商务网站。
让我们来看一个分页组件的例子，它可以在各个部分之间滑动并且可以通过动画创建一个令人愉快的用户体验：
Pagination by André Gonçalves
当用户在不同部分之间切换时，它创造了一种流畅的用户体验。它可以用在应用程序中用户可以在各个部分之间快速滑动。例如浏览电子商务网站中的产品图片、阅读教育应用程序中的不同部分信息，或者按照步骤创建食品应用程序的配方。
在用户界面设计中，卡片列表是一个易于展示信息快的方法。借鉴现实世界中使用实物卡片记忆和组织信息的方法ーー例如抽屉卡或便利贴ーー卡片列表显示一系列卡片，每张卡片包含一小部分信息。因此，设计的真正的难点在于平衡信息的传递方式，而不是让使用者不知所措。
用户应该得到一个清晰的图片并准确传达信息，如果用户选择深入浏览时，可以选择扩展信息和更深入的展示。保持卡片展开的连续性、流动性应是平顺且感觉就像是一个连接在一起的感觉。
像上面所有的交互一样，看一个交互设计的例子：
MVMT concept by Lukas Guschlbauer
这个设计是用在一个电子商务的应用程序，购买手表显示卡的项目。主要的信息如价格和等级需要显示在每张卡片。扩展卡片可以显示额外的信息，例如使用特点和推荐。在消费购买决策时，这款手表的粘性扩展视图创造了一个更好的体验。直观的使用和-正确的操作-通常美学上也是令人舒适的。扩展卡片列表可以构建响应式布局设计，也是提高可用性的绝佳方案。目的是提高浏览内容或者信息量大的应用程序。
作者：Samarth Zalte
本文由@木之 翻译发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
大脑在处理和组织看到的信息时会使用一套快捷方法，了解这些方法是设计成功的关键要素。本文介绍了十一条有效的设计准则，用形象的图解帮助读者更好地理解设计准则在设计工作中的运用，帮助你利用这些方法更快捷地开展设计。适合关注产品设计的小伙伴阅读。
感知力是大脑将不同的信息连接和组织成一个连贯整体的机制。例如我们将相似的对象分组并连接起来，能够轻松地区分出不属于该组的对象。
大脑在处理和组织看到的信息时会使用一套快捷方法，了解这些方法是设计成功的关键要素。
在UI设计时，我们应该有意识地运用感知力，用足够的事实来验证设计，有依有据地解释为什么这个图形元素要这样设计？背后的原因是什么？
提升感知力有助于清晰地解释设计方案，避免常见的设计错误，引导我们将设计做得更好、更容易理解！
彼此靠近的元素会被自动理解为一组。把它们的位置放得更远，会给人一种这些元素是完全独立的个体的印象。
在UI设计中，可以利用邻近原则将相似的界面元素组合在一起，把控总体布局。
邻近规则适用于主导航、卡片、按钮、内容和图标等。我们还可以使用适当的留白将不同的元素进一步分开，创建一个层级更清晰的界面结构，以此来帮助用户浏览和理解不同类型的信息。
邻近原则是直接影响界面可用性的基本规则之一。如果随意控制元素的位置和间距，有可能会让整个产品变得混乱和难以理解。
视觉上相似的元素会被视为同一组，视觉上不同的元素，大脑会下意识将其视为单独的元素。
利用相似性可以来定义界面的特征，例如颜色、形状、尺寸、纹理或空间位置等。最容易区分的是颜色相似，其次是尺寸和形状相似。
如果一个元素和界面中其他的元素都不同，无法融入到其他元素组中，那么这个元素就会变得非常显眼。
我们可以利用这种差异化的效果来突出一些具有引导性或者功能性的元素，例如登录按钮或者加入购物车按钮等。
一组不相连的元素组合在一起，我们会下意识地自动补充这些元素之间的空白，得到一个完整的、可识别的形状。
闭合原则有多种不同的用法。例如一个虚线箭头，我们会填补空白并把这些点连接在一起，得到一条完整的线段。
闭合原则还有助于识别抽象的图标形状并赋予更多的含义。在图标设计中，为了避免信息过载，大多数图标的设计都很简洁，更方便用户理解。
运用闭合原则的经典案例包括用不同虚线构成的IBM标志、利用正负形空间组合而成的WWF熊猫标志。
UI界面中的元素一旦有对称性，就会产生秩序感，我们很快就能看到并理解这种形式。
我们天生喜欢对称的物体。对称排列的元素在视觉上更令人舒服，也更美观。
可能有人觉得对称设计过于呆板，这种想法在平面广告或视觉设计中可能正确，但在UI设计中对称布局是相当重要且实用的界面排版形式。
对称布局让设计更容易理解，也更友好，缺乏对称会导致界面混乱，不知道该关注哪个元素。当然，如果想让某个模块突出展示，也可以尝试打破对称性，这样不对称的元素就能在界面中脱颖而出。
界面中沿着同一条线对齐的元素会被认为属于同一组。
在浏览界面时，视线会第一时间寻找最顺畅的视觉动线。这也解释了为什么在使用连续性原则时，需要确保直线(或曲线)是均匀和可预测的。
线条越均匀，生成的形状越容易被用户正确识别。
连续性有助于界面保持上下垂直滚动时的节奏，相似的内容应始终保持对齐。如果某个元素打破了这种连续性，我们的浏览节奏会被打乱，浏览速度也会变慢。
当下的UI设计中，流行带有圆角的卡片和按钮效果。其中的一个原因是我们对于直角的处理速度稍慢，视线需要停顿并旋转90度，而更圆滑的导角效果能帮助我们的视线更快地转换。
按相同方向、以相同速度运动的元素被认为是一组。
在设计轮播、下拉列表、过渡动画等场景时，共同命运原则会很有帮助。例如我们的视线既跟随轮播图水平移动，还跟随下拉列表向下展开。
根据希克定律，可供的选择数量应该有限制。有太多东西可供选择可能会导致用户迷失方向，做出判断的时间加长，甚至会感到压力。
米勒定律提到，大脑处理信息的能力与认知负荷有直接的关系。我们大脑一次能处理的信息量大约是7个对象。对象数量越多，处理它们所需的时间就越长。
在设计时，尽量不要超过七个选项，为了获得最好的体验，应尽量将选项保持在4-5个。这意味着需要控制主导航数量、按钮数量、下拉选项和轮播图数量等。
当需要用户做选择时，最好能突出显示最受欢迎或最推荐的选项，帮助用户更快做出决策。
我们能够本能地区分界面中的图形元素和背景。
界面由不同类型和样式的图层组成，每个图层都有不同的层次结构。
为了避免层次结构混淆，我们需要清楚地定义界面的所有元素。背景不需要设计设计的太花哨，有可能会抢夺用户对主要内容的注意力。
辅助内容和功能不需要太明显，并且需要与主要内容在设计上做出区分。
可以使用对比关系、位置关系和阴影等方法帮助用户区分内容和背景。
用户通常认为具有视觉吸引力(美观)的产品更实用。
根据这个原则，流行、对称、美观的界面会对用户产生更积极的影响。如果视觉效果给人足够好的第一印象，用户可能会忽略一些可用性问题。
审美可用性的基础在于具有一定的可用性，之后才会起作用。如果产品本身的功能就很糟糕，那么再美观的界面也无济于事。
高质量、美观的界面有助于建立用户信任。相反一个看起来混乱的设计会让用户感到不靠谱。即使用户不能确切说出界面视觉的问题，但他们也会觉得这个产品有风险或者不正规。
高质量的UI设计对于银行类、金融类和医疗类产品来说尤为重要，尤其是在需要用户提供个人信息或涉及交易的使用场景中。
我们最容易记住一组当中的第一个和最后一个元素。
将最重要的内容或元素放在每组的第一个或最后一个，吸引用户注意力，方便高频操作。而次要的内容操作频率相对较低，则放到中间位置。
例如在构建导航、下拉列表等场景中，将重要的操作放到首位。
在一组看起来相似的元素中，我们总是会记住与其余元素不匹配的那个元素。
在UI设计中，隔离效应意味着将界面中重要的内容或关键的操作在视觉上与众不同。
最典型案例是界面中的CTA(号召性用语)按钮。通过改变CTA按钮的颜色、尺寸等，与界面中的其他按钮区分开来，第一时间引起用户的注意。
专栏作家
作者：Clippp，每周精选设计文章，专注分享关于产品、交互、UI视觉上的设计思考。
本文原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
在互联网领域中，人机之间的互动过程就是交互。交互也有一些可预测的、重复出现的规律，作者总结了其中常见的七种C端交互模式，可以提高大家的工作效率，分享给大家。
前段时间有个产品童鞋，他刚加我就问了一大串问题。
什么是模式（Pattern）？什么是模版（Template）？这两个概念有什么区别？
作为一个热心好学、乐于助人的产品仔，我当然和他畅聊了一个多小时，顺便总结下聊天内容。
你是不是也经常在生活工作中，碰到类似“行为模式、设计模式、语言模式、文档模版、表格模版”等名词。
但又搞不清它们有什么区别，搞懂了又有什么用？
别急，我们花几分钟，先来唠唠什么是模式。
可预测、重复出现的现象或规律，通过归纳总结，就变成了某一种模式。
我们的生活中，就有许多模式的影子。
比如常见的商业模式、营销模式、行为模式、数学模式、语言模式等。
举个例子：
简单说下行为模式，它分为了“习惯模式、消费模式、学习模式”等等。
苦逼打工仔普遍的消费模式，一般是工作日花钱少，到了周末都爱到商场逛街和购物。
但又有特例，我有个朋友就特别宅，他只喜欢在上班的时候，摸鱼逛淘宝下单，简直离谱~
掌握模式，有什么用？
当你掌握了模式的概念，并尝试在生活中使用，相信你一定能感受到这 7 个好处。
我们试着再举个例子，加深下对模式的理解，顺便学学交互设计。
什么是交互？
简单来说，交互指的是在互联网领域中，人、机之间的一系列互动过程。
我还提炼了 3 种常见模式（简单反馈、数据操作、业务判断），比较粗糙凑合也能用。
现在试着再系统总结下，我常用的 7 种 C 端交互模式，主要有：导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式。
学完就能用，赶紧卷起来~
有人就问了，还有更多交互模式吗？
确实可以有，等我有时间再编几个。。
话说回来，如果是一些特别复杂的业务规则，可能会涉及到 N 个交互模式的任意组合。
常见的导航模式有按钮组合、标签菜单、宫格布局、列表视图等。
导航模式的主要作用是，告知用户当前在网站的位置，以及接下来到哪些页面，这有点像地图 APP。
上面这张图中，包含了几种导航组件呢？
搜索，是各大电商 APP 常见的交互模式。
搜索模式允许用户输入关键词，然后系统返回搜索结果。
打个比方，这有点像在 Navicat 中写了一段 SQL 查询。
SELECT id, name, age
FROM users
WHERE age > 18
这段 SQL 的作用是，查询大于 18 岁的用户信息，包含序号、名称、年龄。
常见的反馈模式组件，涉及了对话框、吐司提示、气泡提示等。
反馈模式用的比较多的场景是，告知用户一些信息或提示，比如“输入密码错了、展示订单取消的注意事项”等。
输入模式主要用于新数据创建，例如淘宝下单时，你新增了一个收货地址。
打开美团叫个外卖，整个订单创建流程，也是输入模式。
有很多人可能会把输入模式和编辑模式搞混。
区别它们的一个方法是，交互流程涉及新数据创建，还是改旧数据。
改数据的话，那就是编辑模式。
我们在看到一些干货文章，或好用的小程序想要转发给朋友，那就要用到分享模式。
分享模式可以很简单，也可以往复杂了做，看产品阶段去实现。
引导模式和反馈模式有点像，都是展示特定的内容。
那怎么分辨它们呢？
以设计师视角来看，反馈模式需要用户触发，系统被动显示。
而要让用户特别关注的信息，那就是引导模式。
模式，即抽象的规律。——好夕雷
说了这么多概念和例子，你是不是对模式的认知更清晰了呢？
模式运用在产品领域，就有了这 7 种交互模式，分别是“导航模式、搜索模式、反馈模式、输入模式、编辑模式、分享模式、引导模式”。
如果学会了模式，那么无论生活还是工作，相信你一定能轻松应对、事半功倍。
本文由 @好夕雷 原创发布于人人都是产品经理，未经许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
这些是一些创新和不同寻常的B端系统界面设计思路，可以根据具体的业务需求和用户群体的特点进行定制和调整。希望这些思路能够为您带来新的灵感和想法！
前面的文章我们分享了交互设计思维，这篇文章，我们来看看用户目标与交互目标。交互设计的核心，就是帮用户拆解这些目标并找到最优路径，让他们觉得“这事儿没那么难”。
在交互设计中，用户的目标可以理解为他们希望通过使用产品完成的事情。换句话说，就是用户打开你的产品时“心里想要达成的事”。这个目标可能是很直接的，比如在外卖App上订一份喜欢的午餐；也可能是抽象的，比如通过一款学习软件提升自己的外语水平。无论目标是什么，用户都期望在操作的过程中高效、顺畅且愉快地达成目标。
交互设计的核心，就是帮用户拆解这些目标并找到最优路径，让他们觉得“这事儿没那么难”。比如，如果用户的目标是查找一条航班信息，设计师需要确保他们可以快速找到搜索入口，并在最短的时间内完成查询，而不是在复杂的页面中迷路。
除了完成任务，用户还有情感上的目标，比如体验愉悦感、安全感或满足感。举个例子，当用户在付款时，他们的功能性目标是完成支付，而情感性目标可能是确认交易安全或者支付方式简单快捷。这就是为什么很多支付产品会在完成支付后弹出一个愉快的提示动画，比如一个小勾或一个成功的笑脸——它不仅告诉用户任务完成了，还让他们感到一种心理上的正反馈。
因此，交互设计思维的本质是站在用户的视角去思考：他们想要完成什么，他们需要如何完成，以及我们如何让这个过程变得简单、高效和愉悦。满足用户目标，才是设计的成功所在。
在交互设计中，产品不仅是帮助用户完成任务的工具，更是一个信息传递的媒介。那么，产品需要传递的信息到底是什么呢？简单来说，就是**“我是什么”“我能做什么”“你现在在哪儿”“接下来该怎么做”**这几大核心信息。
首先，产品需要明确地告诉用户“我是什么”。比如，你打开一个外卖App，页面上醒目的美食图片和“搜索餐厅”的提示，就在告诉你，这个App的核心功能是帮助你找到食物并下单。如果用户对产品的功能感到困惑，那设计就失去了它的基础价值。
接着，产品要传递“我能做什么”的信息。也就是说，用户需要很清楚地知道，这个产品能为他们提供哪些服务，或者有哪些功能可以用。比如在拍照App中，用户可能会关心是否有滤镜或编辑功能。设计师要通过直观的界面布局和易识别的图标来传递这些功能信息，避免用户四处寻找。
再来是“你现在在哪儿”。用户在使用产品的过程中，需要随时了解自己在操作流程中的位置，比如是刚开始填写订单信息，还是已经进入支付环节。这种清晰的路径感，可以通过导航栏、进度条等设计元素来实现，让用户有一种“掌控感”。
最后，也是最重要的，产品需要告诉用户“接下来该怎么做”。交互设计的一个关键点，就是要引导用户完成操作，避免他们卡在某一步不知所措。例如，当用户填写表单时，如果某项信息漏填了，产品需要用清晰的提示信息，比如红色边框或弹窗，告诉用户哪里需要修正。通过明确的反馈，用户会感到流程是流畅的，而不是无头绪的。
总结来说，产品传递的信息是为了让用户明白自己的位置、了解操作步骤、感受到控制感和安全感。一个设计得当的产品，会像一位贴心的向导，不断用合适的方式传递这些信息，让用户有条不紊地完成目标，同时享受使用的过程。
在交互设计中，找到用户目标与产品目标之间的平衡点就像搭建一座桥——一边是用户的需求和期望，另一边是产品的商业目标和核心价值。设计的任务，就是让这座桥既稳固又通畅，让用户愿意通过产品实现他们的目标，同时产品也能达成自己的目标。
总结来说，设计师的职责是成为用户和产品目标之间的“调解员”，用设计语言找到两者的共赢点。一个成功的设计，不仅能让用户满意，还能帮助产品实现长远的发展目标。这种平衡并不容易，但通过不断洞察、尝试和优化，就能让产品和用户之间建立起良性连接。
本文由 @ DesignLink 原创发布于人人都是产品经理。未经作者许可，禁止转载
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务
编辑导语：设计师如何创建一个大放异彩的UI？好的UI设计不仅是让软件变得有个性有品位，还要让软件的操作变得舒适简单、自由，充分体现软件的定位和特点。本文详细地给大家整理了UI设计的四大原则。一起来看看吧。
是什么让一个好的 UI 设计易于阅读？是什么让用户轻松浏览？设计师如何创建一个大放异彩的UI？用户界面是任何软件产品的关键部分。
好的UI设计，用户甚至会忽略它。
如果做得不好，会成为用户使用产品路上的绊脚石。
为了更高效地设计能满足用户使用的UI，大多数设计师都遵循界面设计原则。
本期我们就带你了解UI设计四大原则！
为了创建视觉美学UI通常有以下这些小规则：
阴影是告诉我们正在查看哪些用户界面元素的宝贵线索。
当光从天而降时，它照亮事物的顶部并在其下方投下阴影。
事物的顶部较轻，底部较暗。UI 也是如此。
就像我们所有面部特征的所有底面都有小阴影一样，几乎每个 UI 元素的底面都有阴影。
我们的屏幕是平面的，但细节设计会让屏幕上几乎所有东西看起来都是立体的。
在添加颜色之前进行灰度设计可以简化视觉设计中最复杂的元素，这样设计师可以专注于间距和布局元素。
首先设计黑白。从更难的问题开始，让应用程序在各个方面都美观且可用，但不需要颜色的帮助，最后再添加颜色。
这是让应用程序看起来“干净”和“简单”的可靠的简单方法。在太多地方有太多颜色是往往容易搞砸设计。
而在此之后，向灰度站点添加一种颜色可以简单有效地吸引眼球。
通过修改单一色调的饱和度和亮度，可以生成多种颜色——深色、浅色、背景、强调色、引人注目的颜色，但这样不会让人眼花缭乱。
使用一种或两种基本色调中的多种颜色是突出或中和元素且不会使设计混乱的可靠方法。
为了使 UI 看起来很有设计感，需要增加很多喘息的空间。
空白是构成出色视觉布局的最容易被忽视和未充分利用的元素之一。
很多时候，空白被视为空白空间，因此浪费了屏幕空间。
空格对于制作更好和简化的布局是必要的，因为它最终使用户专注于本来打算看到的内容。大量的空白可以使一些杂乱的界面看起来简单又容易吸引人。
强调是一种策略，是想要将观众的注意力吸引到特定的设计元素上。这可能是内容区域、图像、链接或按钮等。
我们看到大多数设计领域都会注重焦点的创建，包括建筑、景观设计和时装设计。
为了通过视觉元素传递给用户信息并导航准确，不让用户迷失方向，通常有以下几点规则：
始终以尽可能少的步骤和屏幕为目标。
使用诸如底部工作表和模式窗口之类的覆盖来压缩数据并减少应用程序的占用空间。同时，确保自主和独立的方式组织信息。可以将将任务和子任务组合在一起。
重要的是，不要将子任务隐藏在用户想不到的页面上。根据清晰且合乎逻辑的分类组织屏幕及其内容。
同样，始终将完成任务所需的步骤数量减少到最小值。
当只需要一两个操作时，不要让用户经历繁琐的点击障碍。三击规则是最实用的 UI 设计原则之一，它指出用户应该能够通过在应用程序内的任何位置单击不超过 3 次来实现任何操作或访问他们需要的任何信息。
最重要的是，永远不要要求用户重新输入他们已经提供的信息。这可能让用户扔掉他们的设备，直接放弃使用。
这条原则涉及直观的布局和清晰的信息标签。浏览应用程序不应以任何方式令人困惑，即使初次使用的用户也是如此。
相反，对界面的探索应该是有趣的，并在不知不觉中舒适地学会。
确保页面架构简单、合乎逻辑且有清晰的标示。
用户永远不应该怀疑他们在软件中的位置，也不应该不断思考才能确定如何到达他们想去的位置。
良好的视觉组织提高了可用性和易读性，使用户能够快速找到他们正在寻找的信息并更有效地使用界面。
设计布局时，避免一次在屏幕上显示太多信息。构建网格系统设计以避免视觉混乱。
应用内容组织的一般原则，例如将相似的项目组合在一起、对项目进行编号以及使用标题和提示文本。
简化视觉认知，让用户能尽快“认识”界面，图形元素符合用户对真实世界的联想，更符合用户对于界面的惯性认知。
在 UI 设计中使用隐喻可以让用户在现实世界和数字体验之间建立联系。
好的隐喻会与用户脑海中真实世界的过去体验产生强烈的联系。隐喻常用于使不熟悉的事物变得熟悉。
以桌面上的回收站为例，它包含已删除的文件——但它不是真正的垃圾箱，它以一种可以帮助用户更轻松地理解概念的方式进行可视化表示。
在为 UI 选择隐喻时，选择能够让用户掌握概念模型最精细细节的隐喻。
例如，在询问用于支付处理的信用卡详细信息时，可以参考现实世界的实体卡作为示例。
视觉设计要让用户感受到是用户在控制界面，而不是被界面所控制。
用户应该始终能够快速回溯他们正在做的任何事情。这允许用户探索产品而不必担心失败，当用户知道错误可以很容易地撤消时，这鼓励了对不熟悉的选项的探索。
相反，如果用户必须对他们采取的每一个动作都非常小心，这会导致探索速度变慢且令人不安。
当用户错误地选择系统功能时，“撤消”会非常有用。在这种情况下，撤消功能用作“紧急出口”，允许用户离开不需要的状态。
例如，当用户意外删除电子邮件时，Gmail 的通知消息带有撤消选项。
不同技能水平的用户应该能够与不同水平的产品进行交互。不要为了新手或临时用户的易于使用的界面而牺牲专家用户。
相反，要尝试针对不同用户的需求进行设计，因此，用户是专家还是新手并不重要。
添加教程和解释等功能对新手用户非常有帮助。
一旦用户熟悉了产品，用户就会寻找快捷方式来加快常用操作的速度。
设计师应该让有经验的用户使用快捷方式，从而为他们提供快速路径。
作者：格格学姐
本文由 @空两格 授权发布于人人都是产品经理。未经许可，禁止转载。
题图来自 Pexels，基于CC0协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
在B端产品设计中，中后台UI设计规范的建立对于提升设计效率、保证用户体验一致性以及优化开发流程至关重要。本文从设计规范的意义、原子设计理论、后台设计系统搭建以及Design Token应用实践四个方面，详细总结了B端中后台设计的要点和方法，供大家参考学习。
今天从以下4个方面，结合7年B端设计工作经验，为大家分享原子设计理论和中后台设计系统搭建的应用实践。
分别站在整个产品设计研发流程中各个角色的不同角度，在工作中可能会有以下“抱怨时刻”：
由此，体现出搭建设计规范的作用和意义：
① 产品侧
⼀个产品不同分⽀多个团队完成的时候，可以保证产品团队使⽤同⼀份设计规范快速完成产品原型设计。保证可复⽤模块的交互体验的⼀致性。
② 设计侧
通过设计规范去解决⼤部分需求，极⼤提⾼效率解放双⼿，让设计师能去做⼀些更发挥创意和想象⼒的设计。
③ 开发侧
形成开发资产，可以提升研发效率，降低维护成本。开发⼯程师⽆需再重复开发同⼀个组件，只需要去组件库⾥调⽤即可，配合业务逻辑，⾼效完成界⾯开发，做到开箱即⽤。
④ 测试侧
标准化的设计规范，是测试⼈员最喜欢看到的。例如，设计规范规定弹窗 footer 区按钮组居右，那么测试⼈员只要测到不居右，就可以给产品提优化建议了。
设计规范中具像化的环节是设计组件化，最早可以追溯到⼯业⾰命时期，福特创造的流⽔线⽣产⽅式。福特将汽⻋分解成零部件，再把零部件模块化组装，这⼀创举极⼤的提⾼了⽣产效率。
根据资料显示，T型⻋是世界第⼀款⼤量使⽤通⽤零部件，并进⾏⼤规模流⽔线装配的汽⻋。这种⽅式极⼤地提⾼了T型⻋⽣产效率，降低了⽣产成本。
1914年，福特已经可以做到93分钟⽣产⼀辆汽⻋，⽽同期其他所有汽⻋⼚商的⽣产能⼒总和也不及于此。
到了1920年代，T型⻋的价格甚⾄降到300美元⼀辆（问世之初T型⻋的售价仅需850美元，⽽同期的竞争对⼿则通常为2000-3000美元⼀辆）。
原子设计理论最初来源于化学领域，这一点从名字可以听出来。在化学中，所有的物体都是由原⼦构成，原⼦组合构成分⼦，分⼦组合构成有机物，最终形成了宇宙万物。
2013年前端⼯程师 Brad Forst将此理论运⽤在界⾯设计中，形成⼀套设计系统，包含 5 个层⾯：原⼦、分⼦、组织、模板、⻚⾯。当公司的业务产品逐渐扩⼤时，我们就需要制定⼀套完整的设计系统，提升设计和开发的协作效率，统⼀所有设计师的输出物。
总之，将设计拆分成⼀些基本元素，例如⼀个按钮、⼀个弹窗，再根据业务需求、产品逻辑重新组装，形成最终的产品，这就是原⼦设计理论（组件化设计），区别于整体设计制造的⼀种新的⼯作流程。
原⼦是物质的基础组成部分，是构成设计系统的最基础元素。
在界⾯中以「元素」的形式存在，例如：颜⾊、⽂字、图标、分割线、间距、圆⻆、阴影等。
色彩体系
中后台产品的⾊彩体系主要分为3类：品牌⾊、功能⾊、中性⾊。
B端网站体现理性和效率特性，往往会使中性色占据九成以上，应用在背景、边框、文本和分割线。下图为颜色定义示例（考虑暗色模式）。
文字体系
B端产品的⽂字系统设计⽬标：增强阅读体验、提升信息获取效率，字体是体系化界⾯设计中最基本的构成之⼀。
字体的⼤⼩、字重、⾊彩区分体现界⾯信息的层级关系。
下图为字阶应用规范示意：
阴影、圆角、线条
阴影：在B端界⾯中，有些特殊的元素会使⽤到阴影，从阴影中我们可以看出物体距离平⾯的⾼度，距离平⾯越⾼的物体阴影越⼤；
圆角：从直⻆到圆⻆给⼈带来从严谨冰冷到柔和亲切的⼼理感受，在B端界⾯ 中，常⽤2-8px圆⻆；
线条：分割模块及辅助定位。
在界⾯中，分⼦是按照规律组合起来的元素，如：按钮、搜索框、选择器等。
以按钮为例，⽂字、⾊块、图标和间距这些抽象的原⼦产⽣关联组合成分⼦：图标、⽂字传达含义；颜⾊、圆⻆传递特性；间距、尺⼨定义规范。
分⼦+原⼦组合成更复杂和可拓展的组织（区块组件），如搜索区、卡⽚列表区、表单区、数据统计区等。
由原⼦+分⼦+组织构成的更复杂更具拓展性的模块，构成了典型⻚⾯模板，如列表⻚、详情⻚、异常⻚、Dashboard等。模板在设计系统中承载的作⽤就是保证设计⽅案在原型各阶段的⼀致性，专注⻚⾯底层架构，并⾮具体⻚⾯。
带业务逻辑的场景案例，如标注场景、权限管理、详情设置等，将⻚⾯模板填充真实的⽂字、图⽚后形成⻚⾯，即带交互逻辑的⾼保真原型图，真实内容使设计系统有了“⽣命” 。
虽然通过设计规范可以对产研流程提效，但在开发还原中还是会经常遇到⼀些棘⼿的问题。
开发还原准确度难以保证，走查几轮还有有细节问题没有修复；
领导要求开发暗色模式，或者客户要求换一套主题色，找到替换的工作量巨大；
设计一处变更，涉及多个页面模块，维护工作量大。
为了解决和优化上述的问题，Design Token 应运⽽⽣。它可以解决产品设计和开发过程中的细节、变更和⻛格⼀致性的问题，有效提⾼产研团队设计质量和协作效率。
“Token”原本的意思是“令牌，指令”，与 Design 连在⼀起指“设计变量”。在⼯程逻辑中⽤于⽤户身份与服务器端进⾏验证，⽽在设计体系中，Design Token 则可以简单理解为封装的视觉样式参数。它通过规定样式参数，并通过⼀套符合设计师、⼯程师理解的统⼀的命名规则，为这些样式参数的定义名称。
Design Token优势
设计语义更易理解：帮助设计师和开发建⽴统⼀语⾔，设计⽅案更加⼀致。从下到上的Design Token命名思路。
主题⽪肤⼀键替换：主题⽪肤的替换可以⽤在两个维度，⼀是浅⾊模式和暗⾊模式的替换，⼆是不同品牌⾊之间的替换。我们可以将不同主题的同⼀个场景下的颜⾊使⽤同⼀个 Token 命名，达到⼀键换肤的效果适配不同客户⽅案。
设计变更⾼效维护：替代传统⼯作流⼀键替换效果。例如修改二级文本的颜色，传统工作流需要先修改设计规范，修改设计稿，然后输出给开发，开发逐一更新代码，完成后提交给设计师进行走查验收。而当使用Token之后，只需要更新Token参数，就可以直接导出JSON给开发，一键自动更新。提高效率不止一点点。
设计效果精准还原：代码编辑器⾃动化提示颜⾊选择，如不正确则产⽣报错。
总结一下使用Token开发的优势：
第一步：提炼token元素；
第二步：定义命名规则；
第三步：整理Design Token资产表；
第四步：开发与应用。
接下来具体说说如何为Design Token命名，命名方式目前并没有绝对统一的要求，不过有一定的逻辑规则，可以由设计师找前端开发一起商量出一个都能通俗易懂便于理解的命名规则，
举个例子：
1.Token名称由大到小排序，中间用“-”分隔；
2.Token前缀可自定义添加公司简称，如“–el-xx” 、“–ant-xx”、“–td-xx”。
为了更好的统一规范，应用Token，建议成熟的互联网公司设计团队搭建自己的低代码平台。一键更换主题，尽在指尖。
以上就是从四个方面归纳的B端设计规范定义和总结，希望对你有所帮助！
本文由人人都是产品经理作者【Clippp】，原创/授权 发布于人人都是产品经理，未经许可，禁止转载。
题图来自Unsplash，基于 CC0 协议。
兰亭妙微(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。我们建立了一个微信群，每天分享国内外优秀的设计，有兴趣请加入一起学习成长，咨询及进群请加蓝小助微信ben_lanlan
蓝蓝设计的小编 http://www.lanlanwork.com
