B端产品是很容易交互设计不一致的，随着多平台陆续融合为一个平台，暴露的问题就越发明显，因此改变现状便迫在眉睫，此时保证交互设计的一致性就是我们重点要考虑的问题。
目前有很多较火的组件平台，例如：Ant Design 、Element等。由于公司内部一些原因，前端开发会直接使用组件库，没有规范的约束，随意使用组件也是导致平台体验不佳的一点。
由于产品上线后，售后组、业务组经常会反映一些关于体验相关问题，有时只是单一模块进行迭代、改版、完善而遗漏了与它相关联的其他模块，便会影响全局感观。
此时会有人产生疑问，明明平台现存很多样式问题，功能交互不统一，为什么首要不是先快速建立设计规范文档？
因为在没有设计一定量的设计稿之前，所有规范都是华丽的泡泡！前期在设计阶段会遇到很多具体场景化的问题，根据不同的场景会不停的修改，还有多方评审来达到最优方案。此时的设计稿处在极不稳定的时期，自然而然也没什么规范文档可言，因此现阶段要做的工作是找到重点模块进行设计稿基础搭建。
当然设计师在做设计时一定要有全链路的思考和拆解问题的能力，不能局限于单个需求，钻入牛角尖。毕竟B端产品体量大，功能模块多，系统耦合度高，交互设计文档又是一个全局概念，这最基础也是最重要的第一步是非常考验设计师的。
重点模块功能搭建好设计稿以后，可以先让产品稳定发展一段时间。当团队对产品初期有了一定熟悉程度，此时就很适合创建自己的交互设计规范了。
把控视觉统一，减少重复出图，提高效率。在公司有多个设计师协同工作时，可保证体验、设计、交互等等的统一性。
提高设计稿的还原度，根据规范中组件使用情况建立公共组件库，提高复用率，减少返工，极大的提高开发效率。
在画原型图遵循交互设计规范以及排版格式会减少开发在看原型图和设计稿之间产生歧义，当然产品原型图不需要精致，只需按照规定规范中的交互制定即可。
通用组件通过测试后，以后将不在花时间在测试组件交互上，避免了重复工作。
B端最重要的设计原则就是效率优先，保证效率的前提是组件一致，交互及时反馈，以及合理的使用场景。
因此设计交互规范不仅仅只是颜色、文字以及一个个组件的展示，这样的文档对产品、测试毫无意义。规范是由基础容器盒子+组件库+交互状态+正确使用场景组成，在规范中每一项都应标注清楚。
思路：将原子【文字、颜色、控制器等】组合成分子【状态提示、数据展示、数据录入等】最终组合成元素【不同的容器页面、弹窗、抽屉、卡片等】一个一个的元素互相搭配，组成完整的基础平台。
在设计过程中，设计师需要建立适配的概念，根据具体情况进行适配，以及考虑哪些区块需要动态布局。中台系统的用户的主流分辨率为 1920*1080、1440*900 和 1366*768，一般常用画板1440进行区块动态适配。
栅格宽度：建议栅格系统的网格大小选定8作为栅格系统的原子单位，目前主流设计屏幕分辨率在水平以及垂直方向都可以被8整除，使用8作为最小原子足够适配。
水槽宽度：根据业务可自定义水槽的值。比如8、16、24、32、40等，经过实践经验，正常情况下，水槽宽度为24时，视觉效果最佳。
非常规设计时：不需要死板的坚持传统栅格系统，根据设计场景可自行修订。
顶部导航栏高度计算范围公式：48+8n。
侧边栏宽度计算范围公式：200+8n。
界面最大可达显示器最大值，侧边导航为定宽，右侧内容随栅格变化而变化。
为保持视觉、交互一致性，统一容器范围。容器是用来收纳原子、分子的，理论上信息不应该超出容器。
以有遮罩基本弹窗为例子进行分析，包括视觉+交互。开发可根据弹窗盒子创建基础容器组件，像素级也可帮助测试进行校准。产品及设计可根据使用场景规范自身，在制作原型以及设计稿时正确使用组件。
按钮用于开始一个即时操作。通常分为基础按钮（分为主按钮、次按钮）、图标按钮、文字按钮、图标+文字按钮，在不同场景下使用不同的按钮达到最佳交互效果。
基础按钮应用广泛，较多人分析这种场景。所以下面主要分享一下图标+文字按钮的基础规范以及使用场景。
录入类由输入框、选择器、单选框、多选框等多种控件组成，基础交互包括（默认、悬浮、点击、失效四种状态）
不同的控件相互组合成信息页、表单页、问卷页等。
基础输入框包括（标题+输入框）根据不同场景有多种情况，下面仅列出交互场景，具体视觉标注不再展示。
平台中反馈机制是非常重要的设计，能及时提醒用户当前操作是否成功，或是失败在哪里，因此不同的场景需要特定的反馈提示。
反馈提示包括（警告提示、全局提示、通知提示、气泡确认框提示、以及tips提示）
下面仅列出交互场景，具体视觉标注不再展示。
文字、颜色、间距、圆角相当于元素中的原子，完整的界面正是由这些原子一点一点组合而成，承载着最基础但也是最重要的一部分，因此规范也要更详细。
产出文档是否能真正落地需要来自多方评审包括产品、技术、测试等，尽量从多角度、全方位来进行审核。
投入开发前，多方评审，各抒己见达到最优方案。
投入开发后，若要优化修改定稿部分，需再次拉通会议讨论，结合当前实际情况将历史问题一次性解决到位，避免遗漏再次造成不统一。
由于篇幅原因，规范只是展开个别案例进行分析。
最终需要落地实现才是最重要的一步，所以我们还有很长的路要走。也要不断进行思考与总结，如何让一致性设计规范更符合设计原则和业务场景～
原文地址：站酷
作者：食文貘
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
在人机互动过程中，用户与界面的每一次互动都是一次加载过程。加载设计对于使用者来说是非常影响体验的一个方面，后台复杂的数据计算时间、网络状况不好都有可能造成等待时间长而带来焦虑，今天就让我们好好来聊下加载，以及怎么让加载的体验变得更好。
加载指的是用户在客户端发出一个指令后，直到出现反馈结果时，中间这段时间内计算机完成的一系列执行动作，所以只要你在App中操作请求更多数据那就不可避免有加载。
根据一份调查得出，用户能够忍受加载的最长时间在：3到8秒。8秒是一个临界值。但现在的高速互联网真是把我们宠坏了，如果一个页面的加载时间超过4秒，可能会被用户直接退出，除非Ta一定要打开那个页面。
这里有个很重要的数据叫跳出率，在谷歌的一项调查中就已经发现：
1-3 秒的加载时间跳出率提高了 32%。
1-5 秒的加载时间跳出率提高了 90%。
1-6 秒的加载时间跳出率提高了 106%。
为了降低用户等待的焦虑，获得更好的用户体验，我们必须让用户知道我们正在努力加载，同时要让加载更有趣来分散用户等待的注意力。
首先我们要先了解以下这些App中最常见的加载场景，也就是那些发出指令后应用需要长时间处理的加载过程。
下拉刷新（请求最新数据）+上滑加载（请求更多数据）
▲ins_下拉和上滑
当你在多个App中切换使用时，超过一定时间间隔就需加载数据。
▲系统后台切回
当应用出现异常关闭、应用闪退等情况重新启动app，需要进行数据加载。
▲App启动加载
页面加载新的数据，涉及原生跳原生或者H5页面。
▲Moo音乐_页面跳转
在特定的时间内页面自动进行数据刷新，例如每天0点更新排行，大部分用在运营或跟时间相关的场景。
▲番茄小说_排行定时更新
通讯类社交的App都采用实时推送机制，不需要用户手动操作也能接收到最新的数据。
▲Quack社交聊天
加载器是最早被使用的方式，适用于快速加载，这也是使用率最高的一种。
▲旋转菊花记载
然而这种加载器有个缺点就是无法告知用户需要等多久，Nielsen Norman早在1993年就提到响应时间和loading动画，“如果计算机无法提供快速响应，则应该以百分比的形式向用户提供持续反馈。”【Myers 1985 论文，“计算机-人机界面百分比进度指标的重要性”】
所以加载器和进度条成了黄金组合，适用于长时间（10秒或更长）的加载过程，显示一个操作将花费多长时间以及目前所处的状态，通常有线性进度、百分比、直观数字等。
▲Cream M.
▲Gleb Kuznetsov✈
▲有道乐读、哔哩哔哩漫画
在此基础上加载器也开始往趣味/品牌化发展，使用情感化加载动画，可以让等待过程变得轻松、愉悦。Tips：搭建符合目标用户群体的生活场景，能拉近与用户之间的距离。
▲摩拜单车
▲ARCADE STUDIO
吸引用户的眼球，感觉时间会过得更快一点，短暂忘记等待的过程。
▲Markus Magnusson
▲DeeKay
▲RWDS
通过品牌logo或产品相关的图形呈现在界面上，将品牌基因融入整个Loading动画中。
▲Medium
▲有道乐读
▲ 开言
加载器和进度条这一组合有很多变体，可以应用在不同的页面位置：
当前页面内容需一次性加载完成后才能显示内容，这是页面加载最原始的状态。当页面元素较多时，内容呈现的等待时间会变得很长，一旦时间太久要给予提示。
当用户执行某个操作时，为了防止用户继续操作导致数据加载失败，则用Toast的样式来提示正在加载。在画面中间出现提示框，有时会加上黑色透明底盖在画面中间，这种情况一般除了返回上一级的操作可点，其他操作将受到限制。
可以是在顶部或底部栏上，告知用户等待的时间长度，让用户有一定的心理预期。
通过手势操作，快速加载和更新当前页面的内容。
在特定位置进行加载，功能指示更明确，避免用户反复操作。
加载器这种方式相对比较简单，但也会阻断用户的其他操作，用户只能等待加载完成才能继续操作。会给人的感觉时间较长，且对于加载出来的页面没有任何预期。
那什么时候是需要中断用户操作呢？主要有以下两种情况可以作为判断：
1-当前的操作未成功，则接下来的操作或结果也无法显示，例如：启动App、手机支付、渲染滤镜等；
2-当前的操作本身不能与其他操作同步进行，需停留在当前界面保证操作完成，例如：扫描、迁移资料、实时翻译等。
如果中断时间较短可以使用toast加载提示，时间较长则建议用专门的单页且有可取消的按钮来提示加载过程，以引起用户的重视。
· 适用性广
· 拓展性强（趣味性及品牌宣传）
占位符分布加载就是当界面中图文同时存在时，如果获取完所有信息才显示所耗费的时间是很长的，因此为了缩短用户等待的时间，会选择优先加载快的元素（文字），慢的元素（图片视频等）则用其他的方式占位，最终等待加载全部完成。较为适合feed或瀑布流模式。
分步加载的好处是在等待加载的时间里用户可以看到相关的文字内容，不会像空白页加载或Toast加载，只能默默地等待加载的过程。
将图片用灰色或灰色图（对开发更易用）来代替，中性灰在界面中不会抢风头，在暗黑模式中也适用。
▲灰色色值（例如#EFEFEF）或灰色图片
▲Youtube
在灰色图上加入品牌元素也是不错的方式，例如logo或吉祥物IP，将品牌人格化、情感化，辅助企业向用户传达产品的气质特征，在各类产品中广泛运用。
▲Moo音乐、有道乐读
通过程序提取面积较大的主色调，并设置几种符合产品调性的默认色，以防取色失败。需保证色彩库的颜色高级耐看，饱和度不要太高，不然很刺眼反倒引起到不好的体验。
▲Behance、Apple Music
▲Google Search
模糊图像也称为模糊技术，渲染图像的一个低质量版本，然后过渡到高质量版本，初始图像的像素和 kB 都很小。为了去除伪影，图像会被放大和模糊。
▲Behance、Unsplash
• 良好的阅读性；
• 准确区分已加载和尚未加载的内容
骨架加载就是先加载UI布局框架，再加载框架中的内容，细节通常按照骨架轮廓（也称为占位UI）、文本、图像的顺序出现。通过这种方式直观地提前让用户知道整个界面的架构，并营造出一种渐进的感觉，使用户感知加载稳定且速度快，提高了产品的体验感。
“Skeleton Screens”这个词最早出现在Luke Wroblewski 的文章中，Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持，LinkedIn、Instagram、Facebook 和 Google 等大公司都在使用骨架屏幕，通过将被动等待变为主动等待。
被动等待是指你只是坐在那里无所事事，看着加载器转了一圈又一圈。积极等待是当你在等待时做一些感觉像是进步的事情。骨架加载通过在每次屏幕更新时为用户提供新信息来鼓励主动等待。
通过这种方式，骨架屏幕将焦点从您等待的时间量上移开，并将其放在您面前发生的实际进度证明上，从而使加载过程感觉更快。当它显示已加载的内容和剩余的内容时，它允许用户构建准确的UI界面期望。
▲Medium手机版
▲Medium网页版
实现骨架屏幕时，请确保占位符 UI 大部分准确表示最终 UI 的外观。否则，就会在期望与现实之间产生差距。
▲夸克
LinkedIn 最近开始使用 Skeleton Screens 进行加载，骨架屏幕转移了用户的注意力。它使人们专注于进度，而不是等待时间。
▲Linkin
骨架加载提升了加载界面的速度进度，这种速度反馈表现的更加友好并减少了不确定性，如果加载时间比预期的要长，也可以在骨架之前短暂地显示一个加载器，这应该会为你争取更多时间来完成加载。
• 显示UI骨架布局
• 优先加载文字；
• 加载图像（或主颜色）质量较低的版本；
• 再在后台加载高质量图像；
• 淡入高质量图像，取代之前的低质量图像。
• 感知更快的加载速度
• 清晰的可视化进度指示
预加载就是用户浏览当前页面时就预加载下一级所有列表的文字内容，当用户点击进入已加载的页面就感受不到等待，在无网络情况下也能进行正常的阅读，在阅读文字的时候再进行图片或视频的加载（相反地则叫懒加载，进入页面时再加载数据）。但是这种方式会增加客户端和服务器的负载，也会占用一定的网络带宽。
根据不同的网络状况选择不同的数据加载方案，最常见就是用在音乐/视频/下载更新等占用比较大流量的产品，当判断用户处于3G/4G或网络卡断的情况下，为了既让用户使用流畅也不浪费流量，会自动切换至低速低画质；而处于Wi-Fi条件下，会优先选择高清或高质量进行播放。
▲哔哩哔哩
也就是离线加载，通过现有Wifi资源将服务器内容缓存到本地，无网络或是弱网环境下读取缓存加载。可以解决无网或弱网情况下数据获取的问题，会占用本地的存储空间，以及后续的缓存处理需要考虑。
加载时间过长可能会损害你的网站的整体用户体验。如果加载的速度很慢会导致用户点击多次，这时我们需给用户一个明确的提示“网站正在发生的事情是什么，提供适当的视觉反馈”，加载失败后最重要的是给出解决方案，让用户可再尝试或寻求帮助。请记住，提供反馈是良好的交互设计和积极的用户体验。
▲哔哩哔哩漫画、闲鱼
▲Dribbble
在过去，设计良好有趣的加载器是我们所能做的最好的事情，而现在，渐进式加载成为值得考虑的替代方案，它加快了等待时间感知，还清晰地呈现了UI布局并建立用户预期。但这并不意味着不继续思考更好的加载方案，期待未来出现更好的交互体验。
一个好的加载应当具备以下特征：
1 让用户知道应用程序正在运行，给出大致的等待时间，简单的进度条或更数字视觉化的方式；
2 告诉用户等待的原因，在处理什么动作表明软件并没有崩溃而是处理请求；
3 有趣的动画内容来吸引注意力，让等待变得可以忍受；
4 加入品牌，让用户在等待的过程中加深品牌印象，形成品牌感知；
5 尽量使用非中断式加载，降低等待的心理感知时长。
原文地址：站酷
作者：_阿丹a_
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
iOS作为UI/UE设计的风向标，一直是行业的引领者，不管你愿不愿意承不承认，他的每一次更新变化总能带动UI设计行业的一些大大小小的变革，并且产生更多的追随者，比如当年的iOS7开始的扁平化设计风格，对后续设计风格的影响直到现在已经7年了。
在最近半年，iOS在UI设计风格上最大的变革莫过于DarkMode（深色模式），在DarkMode之前，我们熟悉的UI界面往往都是浅白色界面为主，而从iOS13开始正式使用了DarkMode，界面突然可以变深色了，苹果官方说这样设计可以让眼睛更舒服的长时间阅读，为革命保护视力，而且更加省电增长续航，具体结果我们不得而知，需要科学家们去验证了，但是对于我们设计师来说带来的挑战就是要“黑白无常”了。
其实DarkMode从测试版算起已经差不多推出了有半年的时间了，一些知名的APP产品早已经有了自己的兼容方案，同时iOS原生界面也给了我们很多最佳实践案例，按道理大家对于DarkMode的设计方式方法应该已经掌握了差不多了，但直到这几天微信正式推出了自己的DarkMode兼容方案，才发现对DarkMode的探索还需要设计师们多多努力。谨以此文表达一下自己的观点，不妥之处敬请海涵。
列表试图（TableView）是iOS中最常见的界面组件，一般常见于设置与栏目列表页面
iOS设置界面的浅色模式和深色模式看起来都非常协调。
下面我们看看微信发现页面，这个页面和iOS设置是很相似的。
如果单独看微信发现页面的浅色模式实际效果还是不错的。
但是直接转换到深色模式下就感觉突然差的很多了，甚至可以说是有点难看，这次微信真的做了一次黑天鹅？
到底是什么原因让微信发现页面在深色模式下视觉体验如此之差呢？
我们不妨将两个功能布局都相似的深色进行放在一起进行一下比较
在色彩这块在这两个页面中微信和iOS基本保持一致，四层灰度设计能更好的保持页面整体干净整洁且层次分明，但是被A背景色上，微信的背景色选择了黑色偏绿的颜色，应该是微信设计师还是想体现出产品的标志色原色。
文字的颜色也较iOS略微深一点，但是在整体上影响并不大。
看来在主要色彩上并没有什么问题，那么为什么微信这个界面与iOS界面比起来视觉上要感觉差一些呢？
下面来看一下图标
图标上的差别主要在于线宽与外框，微信采用无外框统一线宽的线形图标，iOS采用的是有外框剪影图标。
我们我们把图标进行互换会怎么样呢？
观察到了吗？别看错了！
是的，我把故意位置做了对调，左边是iOS，右边是微信。替换图标后的微信明显加分不少，整个界面都整齐多了，而iOS换了图标后明显变得不够整齐了，潦草很多。
那么结论是微信的无框线性图标在深色模式下兼容有问题？是的的确如此。但是等一下，还有一些细节你注意到吗？换了图标的微信界面和之前的iOS界面比起来明显还是有点不够整齐，为什么呢？
来我们回过头来从细节再看一下iOS界面。
我们按照这个思路把刚才微信替换图标界面再排序一下！
界面视觉体验明显整齐了很多是不是！
为什么细线图标和无框图标会在深色背景表现不够好，而在浅色背景下就没问题呢？
是不是所有的UI都会存在这样的问题呢？
我们再来看一些例子：
看来结论是一样的，线性图标在深色背景下的表现都是差强人意，反观带框图标适应性很强，浅色和深色模式下均能良好的适配，我来分析一下原因。
当年伽利略用望远镜往天上看，发现木星比金星大，换成肉眼看后金星则比木星大。他认为是眼睛的某种视觉特性造成了这种现象。
德国物理学家赫尔曼把这种错觉称为辐照错觉，就是说在黑暗背景下，亮度越高的物体看起来面积越大。
再来看一张图片
哪个圆圈看起来更大，显然是黑色背景下的白色圆形，实际上这只是一种错觉，所有圆圈是一样大。
光亮刺激会使得神经元产生非线性放大作用，导致刺激比实物本身看起来更大，白色圆形更亮，所以看起来更大一些。
线性图标是用线条勾画图案达到隐喻效果，一般线粗是2px~6px像素。
设计师在设计时候都是以最终视觉作为参考，而设计稿本身多是浅色背景，所以在浅色背景的映衬下图标视觉会显得稍大，视觉基本是平衡的，假如设计是4px而呈现出的效果其实是6px左右。
是不是觉得哪里有点不对了？按照这个逻辑黑色背景下白色线图标不应该是视觉更大、更明显吗？
我们还需要考虑一个因素，那就是色彩，之前的几个界面案例的线性图标都是彩色的，特别是黑色背景下，不同色彩的图标放在一起，会有明显的忽大忽小的感觉，会让界面感觉非常凌乱。
是不是感觉黄色最大，红色的最小？但是其实是一样的，这还是相同形状的，要是图标形状不同感受会更明显
看一个实际中的例子：
由于都是单色线性图标，在浅色和深色下表现还都不错的，但是单色图标略显界面单调，并不太建议这么设计。
毫无疑问，未来的UI场景需要适配多背景色风格，图标除了具备好看隐喻之外，更需要具备抗干扰性
带框图标是一个不错的解决方法，大胆预测带框图标会将成为未来一段时间图标设计主流！
1：深色模式中灰度色阶在一个界面最多可分为四层。
2：为了适配深色模式，今后有框图标将会成为图标设计风格主流。
3：同样为了适配深色模式，细线图标将会被淘汰，剪影和粗线图标会流行起来。
4：图标除了个体设计上用心，在排列上也会极大影响到页面的整合视觉，光谱排列法是个不错的选择。
原文地址：站酷
作者：残酷de乐章
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
关于 Big Sur 的新图标的讨论很多，很多都在激烈争论。人们对苹果公司没有将完全扁平设计引入 Mac 感到松了一口气，但分歧并未停止。有些人认为这引领一种新的图标表现方式，而有些人则认为这是丑到了天际。
但苹果的设计就是这样，不管你你喜不喜欢，过一段时间他总会流行起来。就像iPhone11刚面世时，背面的摄像头组被无数人吐槽一样，而现在这个设计已经成了高端机的标板。
大家还能想起来UI扁平化设计已经流行了多少年了吗？
从2013年6月11日苹果发布iOS7算起，现在已经将近8年了，这8年时间扁平化像飓风一般席卷了整个UI设计圈，一夜间几乎所有的APP UI都被拍扁了。
其中以Instagram的换标作为扁平盛行时代的里程碑
但扁平化设计的确已经一统江湖太久了，人们似乎已经有点厌倦了。其实设计风格就是这样，并没有绝对的好与不好，只要审美不疲劳，就可以继续流行下去，至于流行多久我们经常会用一个词去形容---耐看度。
扁平化带给我们的是画面的轻盈和设计的高效率，但是缺点也是明显的，场景表现过于单一的问题，设计感体现较为有限，于是很多设计师都在尝试用新的设计风格替代或者进化现在的扁平化设计风格，今天我们就来探讨一下新拟物背景下3D与平面的结合设计，能在UI中擦出什么样的火花。
2014年我的作品-Cache
https://www.zcool.com.cn/work/ZMjY1OTEwMA==.html
现在这样的风格会被我们称之为重度拟物风格，他不好看了？技术落后了吗？当然不是！只是目前不流行了！
他的特点是强调光影对比与物理质感，色彩都会比较偏“暗”，而且伴随设计的往往是难和慢！刻画一个细节需要很久，在强调设计效率组件化的今天，这种费时又难学的设计方法必然不会成为主流。
当前的UI流行趋势是强调高饱和的色彩搭配（在没有光影细节之下也只有色彩可以玩了），这种风格明显也不符合趋势，被“淘汰”也就难免了。
从设计角度上解析，图标主要是由四方面构成：构图+光影+色彩+纹理
而拟物风格图标在这四方面更加强调构图、光影和纹理，而色彩则是更多去搭配纹理质感，所以你看到多数拟物风格图标在质感上很棒，但是色彩却没有那么丰富。
说到新的拟物风格，这只是一个概念，也有称之为轻拟物，轻偏平，这里并没有通用的称呼和预设的设计方法，一切的UI设计风格都是为产品本身服务，如果新的设计风格能让产品整体体验得到“提升”，哪怕这种提升只是成功获取到了用户的注意力，那这个设计就是有价值的。
所以当下如果你的产品中想要吸引目光就要有点与众不同的东西，要么是独门的功能，要么就是吸晴的设计。
显然扁平的彩色图标现在已经达不到这个效果了，而以前的拟物又显得有点过时，在这种时代背景下，新的风格必然就会被碰撞出来。
于是乎我们就会看到以下的一些大厂“创新”，你不止能看到轻拟物设计，还能看到“实物”设计......
不得不说，各位设计师们还真是拼了...
“哪怕这种提升只是成功获取到了用户的注意力，那这个设计就是有价值的。”没毛病！各位加油！
当然苹果BigSur带给我们的图标设计创新更加有趋势意义，这种3D+平面的设计组合方法更加能给我们一些设计启迪和思考，并且这种3D图标与之前的拟物风格有着明显的视觉区别
我用3D重构了一个计算器icon，以此为例来进行分解，如下：
与2D设计方法设计图标一致，都是先勾画图形（建模），然后填色、加材质和灯光，但不同的是在3D环境下，这一切都比2D环境下简单了，而且视觉效果更佳，整体画面感更佳立体，质感更加饱满，并且根据渲染器的参数调节和材质质感的不同，即使是在同一模型下，也能制造出很多种不同的视觉体验。
图标背板的选择上，由于选择了3D作为主体表现，3D背板过于抢视线，图标为了突出主体而非背景，建议使用2D平面背板与3D前景图标进行结合。
3D设计图标的确有一些天然的优势，特别是在质感和光感的表达准确度上，是绝对超过2D的。
但是2D图标在一些风格的设计也是很难替代的，比如线性图标和渐变风格图标。
3D设计的确可以提升UI整体的视觉氛围，并且现在在一些APP中已经可以看到小范围3D案例了（比如支付宝），但是多是以插画的形式出现，其实与产品UI还是有一定距离的。
未来3D设计一定会是UI中大展身手，但是目前的常见的3D设计软件实在是太庞大了，我与许多3D行业的同行聊天的时候，大家普遍的认知是现在的3D软件（包括C4D）的实际最佳场景依然是动画设计，UI的中的3D属于非常轻量级的，用现在主流的3D设计软件做UI应用案例，有点用巡航导弹打蚊子的感觉，而且这个蚊子还是距离一米以内。这有点像当年的PS来做UI，虽然可以完成但是效率不高，学习曲线也高，于是Sketch和Figma这样的产品顺理成章的取代了PS在UI界的地位。
当然趋势不可避免，效率也会提升，且方法总是有的，降低门槛，提升效率一直是我们的追求！
原文地址：站酷
作者：残酷de乐章
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
如果你是一位经验丰富的设计师，你应该会同意这个观点：从他人的作品中获取到灵感并不算偷窃他人的作品。这是属于在对设计进行深入研究呀，这也属于一种设计模式呀，而且还遵守设计规范呢。所以，当然要以用户们所熟悉的那些模式来创造出可用性界面。
不过，有的设计师则会认为，过于遵守设计规范，而且，经常性的从他人的作品中获取灵感的话，自己本身的创造能力就会下降，这就导致了这样一个结果——一天下来，你的所有APP都长一个样。
从交互设计的角度看，我们会发现一个问题。什么问题呢？
习惯性的去应用一些所谓的最好的设计模式，可能会让你觉得Google，Facebook，Instagram或者说其他的一些你最喜欢的APP总是做的非常棒，你会觉得，他们的设计目标和你自己的设计目标并没啥差别，但是，人家成功了，而你的作品却失败了。所以，这里推荐一些被公认为是(至少曾经被公认为)最好的设计模式，可能在你第一次看来，这些设计模式也就那样。
1、隐藏导航
关于汉堡图标，已经有不下于50万的文章来争论它了。如果你一篇都未曾读过，试着去读一两篇吧。其实，简单说来，这些文章讨论的主题更主要的是这个图标里所隐含的那些导航，而不是这个图标自身。
上面图片这样的设计对于设计师来说其实是很有吸引力的，而且简直太方便了。根本不用担心屏幕大小的限制，只需要这样一个图标，然后，把所有的导航全部塞进这个可以上下滚动的东西里，然后，让他默认隐藏。就这样，就这么简单。
但是，实验证明，与完全隐藏导航相比，适当的展示出一些导航能够更多的增加用户的依赖度和满意程度，甚至为你带来更多的收入。所以说，现在的好多大公司的播放器都抛弃了以前的汉堡图标，将最常用的一些导航一直显示给了用户。
如果说你的导航比较复杂，那么，请在考虑优先级的基础上适当地隐藏导航。
2、图标，随处可见的图标
由于移动端的屏幕大小限制，许多无脑的设计师为了节省空间，在任何只要能够使用图标替换的文本域，都使用了图标。大家都这样想，象形文字或者图标占的空间又少，不需要额外的转换，而且，人们都很熟悉这些图标，难道不是这样吗？所以，每一个APP都这样做了。
设计师们将上面的那种假设放在脑海里，于是，有的时候，他们将实用性的功能蕴含在了图标里面，但事实上，那个图标是难以识别的。比如，你能猜到在下图的Instagram里的这个图标点击之后能够发送什么信息吗？
或者说，假如你从来没用过谷歌翻译，那么，你会期待下图的这个图标实现什么样的功能呢？
你总是假设你的用户们非常熟悉那些抽象的图标，或者说，你总以为用户们会花大量的时间去研究和学习你的这个图标的含义。这是一个很普遍性的错误，很多设计师都会犯这个错误。
Bloom.fm上让人觉得迷糊的标签栏
如果说你曾经设计过一个需要一个弹出框来解释从而提高可用性的图标，那么，即使你的用户们会不管怎么样都能了解它，你的这个做法也是错误的。
当然，并不是说你在设计中就一点都不使用图标。你的用户们熟悉大量的图标，这些图标中，有很大一部分都是能够代表普通的功能的，比如搜索，播放视频，邮件，设置等等。(但是，用户们可能不会很确定当他们点击一个心形图标的时候，会发生什么。)
一些能够被大多数用户所识别的图标并且被认为是通用的
对于复杂的和抽象的图标，在显示的时候，应该总是在旁边加上一个文本来进行说明。这样，你的图标才是真正有用的。同时，还能够提高菜单的可发现性，也能够为你的APP添加漂亮的触感和个性。
Pixelmator的导航
对于基本的功能，可以使用图标来展现；但是，对于复杂的功能，就需要使用文本来说明了。(如果你要使用图标的话，要时常性的做可用性测试)
3、基于手势的导航操作
当苹果公司在2007年发布了iPhone的时候，多指触控技术就成为了人们关注的主流技术，用户们发现他们不仅可以在屏幕上进行点击，还可以进行放大，缩小和左右轻扫。
手势在设计们的圈子中流行了起来，许多的APP都围绕着手势操作来进行设计。
Clear里的手势操作
就像隐藏的导航栏和使用图标代替文本一样，手势看起来似乎能够为设计师节约一些屏幕空间。(“屏幕上不应该有删除按钮的存在，人们只需要向左或者向右轻扫就可以进行删除了。我们会决定怎么操作的。”)
关于手势，你首先需要知道的是，手势是不可见的。人们需要记住它们，就像汉堡菜单的例子一样。如果你隐藏了一个选项，那么，用到那个选项的人就会越少。
另外，手势存在着与图标相同的问题：众所周知的手势有点击，放大，上下滚动，同时，每个APP也有那些需要慢慢发现和学习的手势。
不幸的是，触屏界面的设计仍然是一个新的领域，在各个APP中，大多数手势还不标准和统一。一个很简单的手势，比如左右轻扫，在各种各样的邮件APP中可能都会大相径庭。
在Apple的Mail APP中，向右轻扫，显示出了“标记为未读”的选项
同样的手势，在Mail Box中，就表示将邮件存档
或者说，想一想，摇晃你的手机，在两个APP中，也会有两种不同的含义。在iOS中表示撤销，在Google Maps中表示发送反馈信息。
永远都要记住，手势是隐藏的操作，人们不得不去记住它们。对于你的用户，这需要大量的努力。如果你是一个发起人，也许你可以让全世界的向右轻扫的含义都一样——但是，只有当它是你APP的概念设计里必不可少的一个部分的时候。
4、新手引导
新手引导，最近很火的一个话题，适用于用户第一次与APP打交道的时候。在很多情况下，这个简单的方式能够在一个透明的覆盖层上为用户展示一些标记来解释界面元素。
dcovery APP里的新手引导
为什么说这是一个很烂的解决方案呢？因为许多用户都会跳过你的介绍，他们想做的就是赶紧使用这个APP。即使他们注意到了你的这些标记，当他们把这个关掉的时候，这些所谓的教程也被他们忘得一干二净了(尤其是当屏幕上挤满了信息的时候)。最后说一句重要的，在你的屏幕上添加这些引导的标记，并不会提高APP的易用性，记住下面这句话：
原图翻译：用户界面就和讲笑话一样，如果这个笑话还需要解释才能明白的话，那么，这也不是一个好笑话。
对于你的用户来说，新手引导也许可以使用其他的方式来设计的更加有用。比如Slack这个APP，使用第一屏来创建一个用户场景。简单的介绍一下他们自己，着重于利益而不是屏幕上的功能。
留住你的第一批用户的一个更有效的方法就是逐步的引导。比如Duolingo，他没有向用户们解释这个APP是如何工作的，而是促使人们做一个指定语言的快速测试(甚至不需要登录)，因为用户们可以在做测试的过程中了解到这个APP是如何使用的。同时，这也是展示这个APP的价值的一个更有影响力的方法。
记得住左右轻扫的手势在Apple的Mail APP里和在MailBox里的不同吗？看看他们的逐步引导是如何做的：用户们在开始使用APP之前，必须在APP所提供的一个练习场景里尝试使用这个APP里的每一个手势。
在你准备在一个半透明的覆盖层上设计你的引导标记的时候，停下来好好想想第一次使用你的APP的用户会有写什么样的经历。关注一下使用环境，通常情况下，有更好的方法来欢迎你的用户们。
5、充满了创造力，但是并不直观的空白状态
很多没有经验的设计师很容易忽略APP的空白状态。但是，从一个APP的整体用户体验上来说，这是一个很重要的方面。
有的时候，设计师们把错误信息和空白状态的界面当作一块展示他们创造力的画布。
比如下面这张Google Photo的空白状态界面：
第一眼看去，简直太棒了不是吗？一个漂亮的矢量图加上完全符合设计规范的布局。
但是，再看一下，就会觉得有写奇怪的东西了：
・这块屏幕里什么收藏也没有，但为什么这里会有一个那么显眼的搜索按钮呢？难道是想让用户在什么都没有的界面里搜索什么？
・第二个很显眼的元素就是这个矢量图，很明显不可以点击(虽说会有很多人去尝试点击)。
・屏幕上的提示说，我应该找到在顶部的那个超级不起眼的“＋”标志。为什么这个提示自己不包含一个添加按钮呢？就像是在说“点击继续按钮来继续”
总而言之，上面这个空白屏幕没有能够帮助用户理解用户所在的这个环境：
・什么是收藏？他们为什么有用呢？
・为什么我什么都没有呢？
・我可以做些什么吗？(我应该做什么？)
当需要创造力时，越少有时会越有用。下面这个空白状态屏在可用性上就做的十分完美。(先让我们忽略那个“现在就点击下面这歌按钮吧”的引导提示)
在Lootsy里的空白状态屏
记住，空白状态(类似于网页里的404页面)并不只是美感和品牌特色。在可用性上，他们更为重要。要让空白状态更为直观。
多问多想
不要说我是错的：设计模式和最佳的实践仍然是你的好伙伴。但是要知道，APP和用户是不一样的：在一个APP里能够适用的方案，在你自己的APP里，也许就一点不适用。这不是一个通用方案就能解决的事情。另外，你永远不可能知道为什么一个APP会以某种方式来设计。
自己要多想想，多设计，多研究。
衡量，测试，验证——如果能够做得更好，就不要害怕打破设计规范。
作者： 郑小小莊
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
交互输出文档的作用
文档这个东西，我们又爱又恨，爱的是它能够记录并且在工作中让大家高效的协调合作，恨的就是很多人对文档嗤之以鼻非常敷衍，以至于文档不但没有起到它应有的作用，反而成为了一个不负责任的借口。所以一份合格或者优秀的交互输出文档对于一个项目的流转以及团队的配合来说是至关重要的。交互文档的主要利益相关者通常是以下几个角色：交互、产品、开发、UI
交互
首先优秀的交互文档必须在交互组内部进行过审核，包括一致的撰写标准和模式的使用，一个比较规范的交互设计组对于交互的撰写标准也是有严格的规范的，以及在什么情况使用什么交互模式还有组件库的调用都会有详细的说明，那么你的交互输出文档就必须满足团队设定的规范。
其次对于其他交互设计师来说，你的设计方案中是否会出现其他人负责的模块，那么在评审的时候需要同步，虽然交互输出文档对于其他交互来说不是直接受益人，但是在团队同步过程中也是非常重要的。
产品
每个公司对于文档的要求和规则不一样。小公司可能没有交互设计这个岗位，那么可能产品连prd文档也没有，仅仅只是一个简易的需求说明文档，就更不用说针对交互规则的说明文档了。
很多有完善规模和流程的团队不仅会有详细的需求说明文档也有很完善的交互说明文档。我们首先要明确的一点是那么多文档最后是给谁看的，一共在项目中会有多少文档产生。
通常产品经理会在项目初期做一份prd文档（Product-RequirementDocument，需求说明文档），这个prd文档主要是给业务方、交互和开发看的，在这个文档中需要包含一些业务规则以及交互规则，所以交互的输出文档是需要和产品的prd文档合并的。
当然如果你是一位很有自驱力的人，那么你可以自己推进需求并落地，一个人就可以完成prd文档的撰写和需求的落地了。
开发
特别想给各位提个醒，在开发需求评审的过程中，请一定记住你们评审的目的，开发同学也要注意，请把重点放在需求是否能实现以及开发相关的地方即可，请不要考虑为什么要这样做，或者你觉得应该怎么设计，一旦进入了开发对需求和设计的评头论足那么这个会议效率就相当低下。专业的事情就交给专业的人去做吧，可以私下讨论但不要在评审会上各抒己见。
交互输出文档对于开发的作用就是，开发可以更好的还原该功能中交互的跳转以及逻辑，所以我们尽量把交互规则写明白写详细，比如按钮在press和default时候是否样式会有变化，或者页面转场的方向，这都是一些细节，减少不必要的低效沟通。你会发现有些时候为什么开发总是来问一些规则，就是因为文档中没有描述准确，所以开发和交互都需要花时间去同步这个细节。
所以这个也非常考验交互设计师对需求文档撰写的功底，并不是图片文字随意摆放就可以的。和开发合作时也是一项内部的体验设计，你把文档写好了，开发看起来也舒服，满意度也高。如果是一堆文案，连基本的对齐都没做到的话，谁来看都会看不下去。
UI
交互输出文档对于UI来说，作用就非常简单了，但是这里也会碰到问题，那就是交互同学只需要把信息的层次表示出来即可，千万不要画到连视觉同学都没有发挥余地的程度。所以为什么现在UXD体验设计那么火，就是因为交互和UI其实重合度是很高的，只要有智能化组件库和工具做支撑，那么在交互和UI的设计流程中，时间就会大大降低。
交互输出文档的内容
在这里，我们就将整个prd文档的内容给大家分享一下，不仅仅是交互需要输出的部分。因为一个高阶的交互是需要能够独自产出prd文档的。然后不同的公司对与文档的要求也是不同，大家做参考即可。
一份基础的prd文档主要由这几部分组成（其实就是这个需求的来源以及推导过程和如何落地的说明）：
1.项目概要
a.需求背景
这个是一个项目最重要的部分，可以说背景没有搞清楚，后面都可以不用做。这个指的就是我们做这个需求的价值和原因。比如我们app中业务方（运营）需要做一个扫一扫功能，那么这个功能首先我们就从业务价值和用户价值两个方面去评估，根据对业务方的沟通之后我们发现扫一扫功能将会在周年庆的时候通过物流包裹上的二维码，让用户进行扫码参与活动这样的玩法。
所以这个需求对于业务方来说是一个转化手段，通过扫码参与活动-领券-消费，确实是一个不错的玩法，但是大家如果只盯着眼前的问题或许就不够了，比如当周年庆结束之后这个功能还有什么用，他在以后的规划中的存在是怎样的。在所有的包裹中印上活动的二维码这个时间周期和成本有多大。
其次，对于用户来说，扫一扫并不是帮助他们解决了某个问题，而是我做了一个东西，同时搭配着这个功能让你们去使用，对用户来说是一个很可有可无的功能，如果线下包裹上的二维码破损了也是非常影响体验并且是不可控的。那么综上所述，既然要做一个临时的活动用其他的方式会不会更好？
所以在这个文档中的第一步，首先就是要确定需求的背景、价值，也就是说，你这个需求是怎么来的，比如再来讲我们一个店铺的优化项目，在这个项目中，首先我们必须在评审的时候说清楚我们为什么要对其进行优化和改版，一定是出现了或者我们定义到了某个比较严重的问题，这边大家对我们app业务可能不是很了解我就简单说了，就是个人中心和店铺营销场景重合过多，并且卖家的同时可以买和卖两个场景存在，所以店铺页通过我们的数据分析和用户的访谈我们发现了一些机会点，以及我们必须突出一个核心场景让用户有明确的分辨。
另外就是背景的描述也可以带上你的调研结果和分析，比如之前我们做首页优化，我们观察了近5个月的数据，都呈现下降的趋势，所以之后有进行了一系列的访谈和用户体验地图分析才有了这个需求的背景产生。
b.需求目标
目标很好理解，就是我们希望通过这次需求迭代达到一个什么成果，比如我们之前做过一次整体的体验优化改版，那么我们的目标就是减少用户的流程跳失、提升整体体验满意度、提高用户的任务转化率，其中我们做了一个商品关注的功能，由于是限时特价商品所以是限量的，在规定时间进行抢购，为了让用户的使用场景统一我们打算在应用内做一个商品关注功能，所以在这个需求的初期，我们对这个功能的目标和预期是提升xx百分比的转化，提高x%比的gmv，提高用户对关注商品下单的效率和满意度，之前很多用户想要购买商品需要自己在手机端设置闹钟，不方便。所以这个功能的一个目标就是解决用户场景迁移的问题。设定目标之后，就是为了在上线后对其进行复盘和数据跟踪还有用户跟踪。
可以用一句话来描述：针对什么用户在什么场景下解决用户的什么问题，达到什么目的？
c.需求范围
需求范围也相当于范围层，指的就是在该需求中我们需要做哪些相关功能以及功能涉及面。举个例子，之前说的扫一扫功能，不同的产品定位对于扫一扫功能的要求也是不同的，比如说微信在扫一扫功能中承载了：扫一扫、相册、封面、街景、翻译、手电筒等诸多功能，再比如淘宝，有扫一扫（ar、拍立淘）、相册、历史、帮助、手电，这说明了不同产品对扫一扫功能有不一样的要求，所以在需求范围内我们需要把本次需要做的功能进行描述，并且该功能是否影响其他功能的使用和对整个产品的影响范围。并且我们也会讲所需要的功能进行拆解和优先级拆分，在表格中编辑。
d.调研分析
调研分析其实就是为我们第一步背景和价值做准备，由于汇报方案和评审，或者在项目推进时，我们需要有相应的论据来支撑我们方案的客观性，所以在这一板块中输出的结论就非常重要，比如之前的首页改版，经过用户研究小组的访谈和数据分析得出相关的结论，通过埋点找到相应板块的点击数据和异常点，然后再进行一系列的问卷和访谈研究，找到结果，都是为了辅助项目的背景以及在评审中大家对需求价值的灵魂拷问。由于数据和调研结果比较敏感就不过多放了。
e.版本日志
日志是一个非常重要的组成部分，做过开发的同学都知道log 的重要性，当我们跑不通的时候我们都会去检查log，然后多测试几遍可能就找到问题所在了，其实我们的版本日志的作用也是这样，但是一个是对自己来说可以记录自己的工作过程，还有思路的变化，第二就是对外，包括和需求方的讨论，会议的纪要等。
要注意的是会议纪要在备注中需要详细说明，以做证据。同时也要邮件通知相关人员和负责人。可能有些公司还会放一些评审记录，比如各部门负责人对方案和需求的建议，业务方和技术负责人的一些建议也会放在项目概要中，而这个prd文档也可通过内部服务器进行实时更新和保存，如svn。方便大家对需求的进度和迭代有一个直观的追踪。
f.项目成员
这个就不用多说了，产品、运营、交互、视觉、开发各司其职，照相馆人员即可，就不至于当项目开始进行了人员分配还没到位就尴尬了。
2.需求方案设计
a.业务、任务、界面流程图
有些同学不是特别明白业务流程图和任务流程图的区别，这边给大家简单介绍一下
业务流程图：
意思就是在这个需求系统中，相关利益者的业务关系，任务信息的流向的一个图标。比如这个简单的例子，用户在点外卖这个场景中，相关的利益者有用户、店家、外卖员三者，那么当用户开始触发流程后，这3者在这个流程中就会各司其职，而业务流程图也很明显的告诉大家所有联动者的指责和流程走向。
任务流程图：
用户在具体执行某一个任务时候的工作流程，以及其核心任务的操作步骤，比如在登录注册这个任务中，用户需要进行一系列的操作，在这个流程中用户的操作引发的系统判断需要详细说明。
界面流程图：
界面之间的跳转关系和路径，在这个流程图中，我们不需要吧详细的说明写上，只需要将需求中涉及到的页面跳转进行叙述即可。
b.相关说明和规则
接下来就要开始我们交互文档最为关键的部分了，如何书写交互说明，以及交互说明应该包含的内容。
1.全局思考
在做交互方案也就是我们画原型的时候会思考一些问题：
a.整体思考
1.信息架构是否容易理解，信息分类是否合理，比如我们的信息架构是否采用了用户容易理解的，市面上常用的信息架构。
2.信息层级和路径是否合理，不一定要最简，但是要高效，信息的优先级是否放置准确，信息组织是否具有相关性、逻辑性。
3.主题是否清晰，3秒内告诉“我”在哪里，并且可以做什么
4.方案的延展和后续功能规划的可扩展性
b.用户权限
根据不同用户的权限对该需求进行检查，比如普通用户、vip用户、内外网用户、游客用户，在登录未登录时候对需求内功能的使用是否有影响
c.登录方式
用户登录和注册、终端的兼容，不同方式注册的用户是否需要补填相关信息等等
d.流程
1.该需求中的功能流程是否和其他类似或者相同功能流程保持一致性；
2.逆向流程和非正常流程的思考有没有完全；
3.流程的闭环有没有做好；页面跳转的方式是否合理；
4.中断后的恢复状态如何呈现；
5是否保留原信息等等
2.内容、状态和显示
a.内容的获取来源
例如下方的图片为例，banner的图片来源和发现feed流的图片来源肯定是不同的，那么就要写清楚，图片或者数据的来源是来自于用户的上传还是系统后台的配置获取；并且获取的方式是如何的，是需要手动下啦刷新还是切换页面自动刷新，还是设定时间自动刷新。
字段、图标是从接口获取还是前端写死，以及气泡展示的规则等等。另外一张图片可能用在多个地方，而可能呈现的尺寸不同，所以在涉及到相关图片使用时要注意剪裁规则和图片的来源。
b.缓存机制
图片以及一些资源通常我们需要对其进行缓存，有些同学不清楚什么是缓存，缓存是在计算机上的一个原始数据的复制集，一般来说需要缓存的内容是通过浏览产生的，包括图片以及cookie等，浏览过的视频和广告也会被缓存。同时在不同的网络环境下缓存的时间标准也不同，无网络那肯定只能读取缓存文件，wifi环境下缓存时间可设置的短一些，而流量环境下时间就可以设置的偏长。
c.状态
状态大家都应该都会写，主要包含的就是初始状态（冷启动无缓存第一次进入）、空状态（无任何内容比如空的购物车）、常规状态、异常状态（网络中断、接口报错）还有过期状态等
d.显示
数据和内容的极限值，最大和最小，比如粉丝和关注的数量，小于1万人则显示完整的数量，大于等于1万小于11000则显示1万，大于11000小于12000则显示1.1万，这样的方式。另外包括标题极限为一行显示，超过部分的显示规则。敏感信息、错误提示以及超时的信息提示。金额的格式使用¥xxx还是xxx元，小数点保留的规则。日期的显示格式是xxxx年xx月xx日还是xxxx-xx-xx还是xxxx/xx/xx等等
3.反馈、提示、手势
反馈和提示的样式有很多种，一般反馈指的是用户对某一个控件进行触发后获得的反馈，比如按钮按下的反馈，以及之后收到的反馈，是进行跳转还是给用户提示，采用的是模态还是非模态的提示。比如点击关注某个人的按钮后会提示关注成功，比如退出某个图文编辑会二次确认是否退出，再比如抖音长按后出现的3个操作反馈，还有支付成功后的动效提示、恶意多次操作后的提示等等
如果有手势交互也需要说明，比如滑动后内容置顶、拖拽、左右轻扫的tab滑动、重按的3dtouch等等
4.加载
使用模态还是非模态，如果是模态加载请尽量使用情感化设计来减少用户焦虑。如果是非模态，根据信息呈现和体验采用分步加载还是预加载还是智能加载。如果是分布加载就选择先加载资源较小的内容，再加载图片，可以先将图片模糊化粗渲染给用户呈现，包括在浏览信息流的时候的分页加载也是可以的。如果更智能化一些也可以预判用户的行为进行内容加载，例如当用户在某个图文前停留时间达到某个值后就预先给用户加载里面的内容。
加载的全局方式在方案中需要考虑，页面加载、下啦刷新等等，需要统一。
5.环境、设备与场景
a.不同设备、厂商的不同版本
都会影响到方案的落地和用户体验这个要非常注意。比如一些交互控件我们在6、iphonex和大屏幕尺寸上使用起来效果很好，但是小屏幕的时候这个交互控件显得就很难受，所以需要仔细斟酌用户的使用情况。另外还有横竖凭情况的交互方案是否兼容、是否需要与其他硬件进行兼容。
b.白天和晚上是否需要做不同的风格设计，以及在是否需要给用户遮挡隐私的功能。
6.文案
文案这点很多设计师都忽略了，你们有没有听说过一个叫文案设计师的岗位。其实文案在我们产品设计中是非常重要的。首先一个产品的文案对应的语气和产品调性也是相关的，就好比我们说产品有它自己的性格一样，另外文案的使用直接就影响用户对该信息的理解，比如一个对话框的文案是：确定退出吗？下面会有两种不同的选择，一个确定，一个是退出，大家觉得哪个比较好？还有就是不加“吗”，就变成了：确定退出？这样描述出来的语言给人感觉很冰冷，甚至有一些威胁。
所以首先我们的文案是否有温度，和产品的个性是否相匹配。其次文案的表述是否准确和通俗易懂，比如你告诉程序员一句话，帮我去菜市场买西瓜，如果有西红柿，帮我买两个，你会带什么东西回家？程序员版：if（看到西红柿）西瓜等于2；else 西瓜=1。buy 西瓜。条件：看见西红柿 执行命令：买两个西瓜一语道破版：其实吧，看到西红柿呢是卖两个西瓜的触发条件…没看到就买一个西瓜，看到就买两个西瓜。所以这里出现的不仅仅是程序员的思维和我们的差异化，也说明了一句话没有表述清楚所带来的问题是很大的。
另外就是文案用语的一致性，在整个产品同样的场景中，我们需要统一文案用语。
7.常见控件
具体见下方列表
8.撰写方式
作为一个设计师，不管是否在做视觉，我们都需要对文档有一个美化意识，如果你的文档非常凌乱，那么在别人眼里就会觉得你是一个比较粗心大意，不够负责任的人，所以我们尽量在做交互输出文档的时候也画的美观一些。
目录
首先在目录的撰写时候要进行分类，通常我做的时候会对该需求以页面父子集关系进行创建，父集为核心页面，子集为其下的相关子页面，这样页面的流转和归属关系就不会搞错。
说明
在撰写规则与说明时可以通过标签法进行标签说明的撰写方式，同样在视觉上保持美观，对比与对齐的运用，具体该写什么东西上面已经说明就不赘述了。除了交互规则以外，高阶的交互设计或者产品经理还需要补充业务规则，比如排序、商品抓去规则、权重、算法、活动规则等等这里就不展开说了。
总结
文档的形式有非常多种，针对不同的公司和产品也需要作出相应的调整，能够满足需求和方便协作，目的就达到了，我们并不希望过多的时间花在文档的撰写上，而是希望大家在做设计时多思考业务，本次分享就到这里啦～
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
前段时间一直在做运营类设计，banner在其中占了较大比重，为此就想写一篇阶段性总结。其中部分观点参考了相关视频教程和文章，设计新手一枚，如有不足还请大家海涵。
banner由以下五部分组成：版式，字体，颜色，背景，点缀。我就针对这几点做些具体分析。
关于版式
大家发现没有，大体上banner版式可分为两种：1、图文左右排版 2、文字居中
在工作中我接触图文左右排版的机会较多，因此今天着重分析下。
图文左右排版
当banner中需要包含具体的素材，如某位大咖，某件产品时，一般会选择左右排版。并且图文比例约为6：4（接近0.618的黄金比例）。
关于为何文字部分要大于图片部分，我做了如下分析：如果banner中只有某位大咖、某件产品，而没有文字衬托，用户就不会知道banner想表达的什么。
如下图，banner中只有一位拉大提琴的中年外国男子，人们会猜测这男子的个人专辑发布了？他是谁？所以，通过图片用户只能对信息有个大致了解。
相反，如果把banner中图片部分遮去，而只保留文字部分。人们能够获取的关键词有：5首电影歌曲、回忆过往的。因此即使没有配图，文字也能将信息精准地带给用户，文字所占比例应当比图片多些。这也就解释了为何大部分左右排版的banner都是文字占比大于图片。
banner中有些文字放左边，有些放右边，这有什么区别呢？
下图中第一个banner是关于欧美电影歌曲的，右侧可布局拉琴的男子，也可配电影片段，还可放正在播音的留声机。第二张banner同样如此。
下面两图均是图左字右的banner，第一张《首席医官》，特指这本书。
第二章奥运冠军陈一冰求婚——除了他没别人了。
说了这么多，总结出图右字左和图左字右的区别了吗？图片在右，配图内容比较模糊；图片在左，配图内容比较清晰。由于人们习惯的阅读顺序是从左到右，左边放什么意味着用户会先看到什么。当图片信息清晰时图片放左，先用特定配图吸引用户目光，再加以具体的文字阐述就更正常不过了。而如果把含义不清的配图放左左边，用户得看到右边的文字部分才能获得banner想传递的内容，这会导致用户接收信息时间增加。
2、文字居中
在工作中我没怎么接触过文字居中的排版方式，因此很抱歉没法做太多的剖析。印象中电商比较喜欢此类排版，也许是文字放在正中的位子，底下可以放许多产品？
版式中大小标题的比例
发现没？大小标题比例约为2：1。其实这和一级标题，二级标题是同个道理，我们在设计banner时总希望用户能把banner上的文字看全，但又不希望大小标题混在一起主次不清，因此在排版合理，用户能看清字的综合考虑下，大小标题比例约为2：1。（其实小标题太小运营们也会怼的）
关于字体
banner中常用的字体有三种：衬线体（serif）、非衬线体（sans-serif）、书法体（cursive）
都说字体有各自的性格，衬线体笔画有粗细之分，它模仿的是中国古代字体和古代碑文上的字体，因此衬线体能给人古典，文艺的感觉，适合用于文艺气息或与女子的相关设计。
非衬线体笔画简洁，笔画较粗，体现现代，简约的特性，适合用于苍劲有力，与男子相关的设计。
书法体源自中国古代，能体现中国文化和挥洒墨水的豪气，适用于文艺主题和金戈铁马般的豪迈主题。
ps：商用字体需要注意版权！！！这点很重要
关于颜色
在生活中，色彩心理学对人们对颜色的认知有很大的影响。
黑色：黑色是一种代表品质、权威、稳重、时尚的色彩，同时也含有冷漠、悲伤、防御的消极情感。
白色：传递一种简单、纯真、高雅、精致、信任、开放、干净、畅快、朴素的情感。
灰色：代表睿智、老实、执着、严肃、压抑的色彩。
红色：传递喜庆、自信、斗志、权威、性感的情感。
绿色：是自然界中最常见的颜色，代表生命力、青春、希望、宁静、和平、舒适、安全的情感。
蓝色：是三原色中的一种，代表永恒、灵性、清新、自由、放松、舒适、宁静、商务。
紫色：是一种代表优雅、浪漫、高贵、时尚、神秘、梦幻、灵性、创造性的颜色。
黄色：代表阳光、青春、活力、时尚、尊贵、年轻轻快、辉煌、希望的颜色。
因此在设计中选择主色调也要遵从如上:point_up_2:。
例如活泼年轻的内容可选择纯度较高的蓝绿色、绿色等作为主色调。
文艺类内容则适合饱和度不高，偏向白色这类能让人平静的色彩。
关于颜色的搭配，我一般会在花瓣上找些主题相近的banner作参考。
此外推荐几个配色网站：
https://coolors.co/browser/latest/1
https://color.adobe.com
https://uigradients.com
关于点缀
大约有3种。椭圆点缀，圆角矩形点缀，实物点缀。圆形圆角矩形点缀可适当加些渐变和阴影。
为了不让实物点缀太过抢眼，可以适当做些弱化，比如降低透明度或是做些模糊处理。
关于背景
大约有3种。
纯色背景，实物背景，材质背景。根据画面的需要可以选择合适的底图。
作者： 夜夜yue
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
总结：看了这么多手痒痒了吗？此时此刻，打开ps做个banner练练手呗~~~~
如果你想设计出卓越，高效和流畅的用户界面，就请参考Ben Shneiderman的“界面设计的八大黄金法则” 。苹果，谷歌和微软设计的产品都反映了Shneiderman的法则，这些行业巨头制定的用户界面指南都包含Shneiderman黄金法则中的特征，而这些公司的热门界面设计则是法则的视觉体现。本文将告诉你如何整合8大黄金法则来改进你的工作。
界面设计的八大黄金法则
Ben Shneiderman（生于1947年8月21日）是美国马里兰大学人机交互实验室的计算机科学家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其热门书“设计用户界面：有效的人机交互策略（Designing the User Interface: Strategies for Effective Human-Computer Interaction）”中介绍了界面设计的八个黄金法则：
一致性
当你在设计类似的功能和操作时，可以利用熟悉的图标，颜色，菜单的层次结构，行为召唤，用户流程图来实现一致性。规范信息表现的方式可以减少用户认知负担，用户体验易懂流畅。一致性通过帮助用户快速熟悉产品的数字化环境从而更轻松地实现其目标。
常用用户使用快捷操作
随着使用次数的增加，用户需要有更快的完成任务的方法。例如，Windows和Mac为用户提供了用于复制和粘贴的键盘快捷方式，随着用户更有经验，他们可以更快速，轻松地浏览和操作用户界面。
提供有用信息的反馈
用户每完成一个操作，需要系统给出反馈，然后用户才能感知并进入下一步操作。反馈有很多类型，例如声音提示，触摸感，语言提示，以及各种类型的组合。对于用户的每一个动作，应该在合理的时间内提供适当的，人性化的反馈。如设计多页问卷时应该告诉用户进行到哪个步骤，要保证让用户在尽量少受干扰的情况下得到最有价值的信息。
作者/版权持有人：Google，Inc. 版权条款和许可：合理使用
Windows Media Player设计师应该牢记Ben Shneiderman的第三个黄金法则：提供有用信息的反馈。体验不佳的错误消息通常会只显示错误代码，对用户来说这毫无意义。作为一名好的设计师，你应该始终给用户以可读和有意义的反馈。
设计流程需要设计一个完结
不要让你的用户猜来猜去，告诉他们其操作会引导他们到哪个步骤。例如，用户在完成在线购买后看到“谢谢购买”消息提示和支付凭证后会感到满足和安心。
提供简洁的错误操作的解决方案
用户不喜欢被告知其操作错误。设计时应该尽量考虑如何减少用户犯错误的机会，但如果用户操作时发生不可避免的错误，不能只报错而不提供解决方案，请确保为用户提供简单，直观的分步说明，以引导他们轻松快速地解决问题。例如，用户在填写在线表单时忘记填写某个输入框时，可以标记这个输入框以提醒用户。
允许撤销操作
设计人员应为用户提供明显的方式来让用户恢复之前的操作，无论是单次动作，数据输入还是整个动作序列后都应允许进行返回操作，正如Shneiderman在他的书中所说：
“这个功能减轻了焦虑，因为用户知道即便操作失误，之前的操作也可以被撤销，鼓励用户去大胆放手探索。”
给用户掌控感
设计时应考虑如何让用户主动去使用，而不是被动接受，要让用户感觉他们对数字空间中一系列操作了如指掌，在设计时按照他们预期的方式来获得他们的信任。
减少短时记忆负担
人的记忆力是有限的，我们的短时记忆每次最多只能记住五个东西。因此，界面设计应当尽可能简洁，保持适当的信息层次结构，让用户去再认信息而不是去回忆。再认信息总是比回忆更容易，因为再认通过感知线索让相关信息重现。例如，我们经常发现选择题比简答题更容易，因为选择题只需要我们对正确答案再认，而不是从我们的记忆中提取。被彭博商业周刊称为“世界上最具影响力的设计师之一”的Jakob Nielsen发明了几种可用性研究方法，包括启发式评估。信息再认而非回忆就是Nielsen界面设计10种可用性启发式原则之一。
了解苹果的设计如何整合Shneiderman的8大黄金法则
苹果整合Shneiderman的八项黄金法设计出成功的产品，他们从Mac到移动设备设计都取得了巨大的成功，他们以产品设计的一致性，直观而美丽为荣。苹果的iOS人机界面指南也告诉我们他们的设计团队如何应用Shneiderman的设计原则。
1. 一致性
“一致性”和“感知的稳定性”在Mac OS的设计中体现得淋漓尽致。不管是80年代的版本，还是现在的版本，Mac OS菜单栏设计都包含一致的图形元素。
作者/版权持有人：StockSnap.io 版权条款和许可：CC0
作者/版权持有人：StockSnap.io 版权条款和许可证：CC0
随着时间的推移，Mac OS的外观有很大变化，Mac OS菜单栏设计都保持一致。
2. 快捷操作
如前所述，Mac允许用户使用各种键盘快捷键，使用频率高的包括复制和粘贴（Command-X和Command-V）以及截图（Command-Shift-3）。
作者/版权持有人：StockSnap.io 版权条款和许可证：CC0
Mac允许用户键盘快捷方式操作实现通常需要鼠标、触控板或其他输入设备才能完成的操作。
3. 有用信息反馈
当用户点击Mac桌面上的文件时，该文件会“突出显示”，这是视觉反馈的一个很好的示例。另外，当用户拖动桌面上的文件夹时，他们可以看到在按住鼠标时，文件夹显示被移动的状态。
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
4. 操作流程的设计
当用户将软件安装到Mac OS时，提示信息的屏幕显示用户当前的安装步骤。
作者/版权持有人：Google，Inc. 版权条款和许可：合理使用
5. 错误操作的解决方案
在软件安装过程中，如果发生错误，用户将收到友好的提示信息。提供复杂的解决方案，或用户难以理解的解决方案，或只报错不提供解决方案，都是极大影响用户体验，使用户沮丧的关键原因。根据错误操作的严重程度，区分何时使用小的，不会影响用户操作的提醒，以及何时使用大的，侵入式提醒。但当错误操作发生时，请谨慎选择正确的语气和正确的语言提醒用户操作错误。
作者/版权持有人：Google，Inc. 版权条款和许可：合理使用
Mac OS通过显示一个温和的提示消息向用户解释出现了什么错误操作及其原因。另外，解释这是由于自己的安全偏好选择，进一步向用户保证，告诉他们一切在掌控范围内。
作者/版权持有人：Manutencaonet Blogspot 版权条款和许可：CC BY 3.0
Windows系统中这个非常不友好的提示信息使用“fatal（后果严重的）”和“terminated（被终止）”字样。这样的负面的，不友好的言语肯定会吓倒大多数用户！
6. 允许撤销操作
当用户在安装过程中提供信息时发生错误，允许他们重新回到上一步，而不必重新开始。
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
7. 给用户掌控感
让用户有权选择是继续运行程序还是退出程序，Mac的活动监视器允许用户在程序意外崩溃时“强制退出”。
作者/版权持有人：Euphemia Wong 版权条款和许可：合理使用
8. 减少短时记忆负荷
由于人类短时记忆每次只能记住5个东西，所以苹果iPhone屏幕底部的主菜单区域中只能放置4个及以下的应用程序图标，这个设计不仅涉及对记忆负荷的考虑，还考虑了不同版本一致性问题。
作者/版权持有人：Brian Voo 版权条款和许可：合理使用
作者/版权持有人：Pixabay 版权条款和许可证：CC0
工作表：如何将Shneiderman的8项黄金法则应用于你的界面设计
作为设计师，你的工作是创建直观，精美和流畅的用户界面设计，让用户感到轻松和满意。下面这个工作表可以帮你把上述这些规则应用于你的设计中。
工作表的PDF格式下载链接: https://pan.baidu.com/s/1nvp1EKp 密码: mjq7
从Mac和PC到移动设备甚至是虚拟现实，以及将来可能出现的任何互动科技，只要你的设计涉及到人与界面之间的交互，这八大规则在设计过程中至关重要，不容忽视，现在就用这个工作表学习如何将它应用到你的设计中吧。
作者： oftodesign
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
以下内容主要分成两大部分，第一是聊聊响应式和自适应的区别和原理，以及我们应该如何去设计响应式界面；第二部分也是比较关键的B端系统设计的核心，B端设计中台完整构建过程的具体步骤，以及应用到的格式塔原则，和命名的一些注意事项，内容较多，大家可以根据上述目录来选择性阅读。
简单概括多端兼容设计的发展史，最早是桌面端，比如桌面的一些应用；后来出现了移动端，针对移动端大家用的都是WAP，指一种无线应用协议，大家在用手机浏览一些网站，会把网站翻译成一种低流量的浏览方式，比如去掉图片大图，只剩全文字，因为当时网络不好，早在3G和2G时代移动端用的都是WAP；在2008年之后出现了响应式，也就是做一套代码可以兼容三端（网页、移动端、iPad）设备，在发展的同时也遇到很多问题，但响应式同时也遇到了很多问题；于是又出现了自适应，指不同的设备打开不同的页面进行自适应，自适应能增加效率，但需要增加工作量；2017年以后直到现在看到最常用的就是渐进式，类似完整的像在使用一个APP。这是多端兼容设计的整体的发展。
可以理解成用户在手机、电脑、ipad打开同一个界面，所呈现的界面是一样的。需要考虑移动端设计和网页端怎么通过一套代码进行兼容。
自动布局算是响应式的一种，但平时看到很多响应式其实并不是真正的响应式，而是自动布局，因为界面在不同的设备用的是不同的模板，当我们用电脑打开呈现的是一套模板，而用手机打开则是另外一套模板，这种看起来是响应式，其实不是。因为当我在开发者模式下调节不同设备展示时，就会发现，其实是换了一个网址来根据不同的设备进行自适应的，而真正的响应式是不需要刷新的，在拖小窗口的时候就会变成手机端的那个样子。
渐进式布局是近几年比较新起的，这种布局设计，很像一个网站或者本身它就是一个网站，但用起来就像一个APP一样，看到这里大家很容易相到，小程序就是渐进式布局得一种，小程序明显是一个网页，但通过技术的一些嵌入和一些接口或者缓存的方式的操作，让用户在使用的时候感觉小程序就是一个APP，但核心技术还是web网页。
响应式的原理是通过定位的方式来做响应式的各种开发，需要在页面中至少标出这十个点：中心点，上下左右点，上左上右点和下左下右点，这几个点其实就代表了做响应式和做布局相应的位置。这样可能大家不容易理解，其实结合figma来看，这些点对应的就是这样（如下图），在figma中的布局点。设计师通过调节图形的布局点，可以做到在页面拉伸时，让想动的元素跟随变化，不动的元素静止不动，这就是响应式的原理。换言之，我们做响应式布局的原理也就是通过figma或者sketch中的布局约束这个功能来实现的。
01、响应式
如下图是响应式的优点和缺点。响应式其实就是只开发一套页面，这个页面兼容三端。虽然做了响应式，但如何响应是需要设计师去设计的。比如我们设计了一个移动端界面，然后全部做好对应的自动布局，再进行页面拉伸，内容随之会发生变化，比如当拉伸到1024*768的时候，也就是iPad的尺寸，就会发现局部在设计上有些不合实际情况，这时就需要设计师在对应尺寸的设计稿上进行内容上的微调，比如按钮不可能那么长，就把按钮设计的短一点。当继续进行拉伸到1440网页的宽度时，然后再酌情针对网页尺寸的呈现样式，局部进行尺寸的调整，比如文字和按钮被拉伸到网页版都需要居中对齐，电脑端的样式就需要设计师重新排版了。
通常在B端系统，设计师需要做响应式设计时，往往是从大往小做设计，这也取决于这个B端产品是否需要进行移动端的设计，《B端设计总概二》中提到过什么情况下进行设计B端移动端。如果需要设计B端移动端，就需要我们将网页改成移动端设计，比如B端的侧边栏导航在拉伸到移动端时，就会变成用一个折叠悬浮的iocn来替代等等这样设计上的改变。在figma中，做三端拉伸时候，可以用断点插件来进行演示，通过对断点插件的设置，就可以完美的看到页面在三端不同情况的适配呈现，断点插件用来做演示非常方便。
02、自适应
如下图是自适应的优点和缺点，其实就是一个项目开发三个页面，分别做定制设计，网页端、移动端和Ipad端。
我们都知道2021年也就是今年是我国新基建的元年，十四五规划2035远景目标里提到重点发展传统企业数字化转型，尤其是今年我们设计师更能深刻体会，C端和B端已经是完全两个不同的行业，C端发展近十年，已经很难再做到创新上的突破，该做的功能和创新都已经做了，而B端这片蓝海才刚刚开始发力，很多企业也都在考虑B端系统的搭建，降本提效率成了很多公司新的指标，因此数字化转型重点在于B端系统探索，B端重点在于中台的搭建！设计师通过设计中台，构建出基本的业务类型，再分类到业务中，构建出不同的业务界面，所以设计中台非常关键，很多公司经常会用这两个系统去构建，Antdesign和Elemnet就是设计中台，我们会发现用Antdesign可以做出很多的系统，那怎么进行设计中台的设计呢？和我们设计师有什么样的关联度呢？带着这个问题，我们深度探索B端设计中台的落地！
概念：中台是互联网的术语，一般应用于大型企业，中国互联网的变革永远是从大型互联网开始，大型互联网公司引发了技术的变革，这也是中台的兴起，一般指搭建一个灵活快速应对变化的架构，快速实现前端提的需求，避免重复建设，达到提高工作效率目的。
作用：降本提效。如果没有组件库，普通设计师一天最多做十个页面，再多就不太可能了，如果有组件化得产生，一天可以做一百个左右的界面。在面对B端系统这样几千个页面的巨大的工作量前，组件库的作用尤为重要。但如果落地，就需要前端工程师的密切配合，因为设计师设计的组件只是一个样式，而前端需要把组件进行代码化，所以组件一定是代码化的，也就是说只有代码化的组件才是真正的组件。所以视觉组件的复用，和前端代码的复用，可以大大提高设计师的工作效率。
基本库指的是一些色彩系统、字体系统、图标系统、栅格系统、间距系统等等，之所以强调系统两个字，有系统就要统一规则和统一规范，然后进行调用应用在系统中的各个地方，比如我们想调用一个颜色，不是去随选用一个颜色，应该严格的从色彩系统中去调用，如果系统组件库里没有这个颜色，我们也绝对不可以使用，可以先用替代色做或者根据业务再进行补充颜色进组件库为了后续的调用，这是一种比较严谨的使用方式。所以在建立组件库的时候我们要考虑全面，组件库中如果没有相应的组件，我们应该试着反推一下，是否要加进组件库中去，来进行系统的调用。在做中台的过程中，我们一直使用Antdesign，我们对组件的名称，组件的分类其实一点都不陌生，其实Antdesign也在借鉴国外的Bootstrap组件库（大家感兴趣可以下载Bootstrap组件库进行查看），所以并不是Antdesign组件库形成了一定的规则，它也是在沿用别人的规则，而这些规则也需要不断的有大公司去继承出来，所以慢慢衍生出来现在这样的组件库，那中台设计，首先要搭建基本库，把基本库里的基础一些系统搭建好后，我们继续去做扩展库。
如下图，扩展库中包含了很多内容，比如分了四类，导航系统，数据录入，数据展示和反馈系统。其中导航系统又包含了，面包屑导航、下拉菜单、导航菜单、顶部导航等等，包括后面的数据录入、数据展示、反馈系统也包含了很多内容。我们做这样的扩展库，也不需要做成像Antdesign的组件库里包含的那么多，或者和新出得字节Arco组件库，因为它们面向的是系统级的解决方案，各行各业都可以用它，它面向的是一个大系统，也许我们只涉及到了其中的20%，因为也没有一个系统能用到它所有的组件，所以我们自己在设计组件库的时候，一定是按照我们自己项目的范围去做组件库，而不是做一个大而全的，大而全的组件库对我们也没有意义。它们做的是公共平台，而我们要做的是一个专属平台。
形成完基本库和扩展库后，第三步是建立方法库。方法库告诉我们的是什么时候用，比如我做了一个多选框，这个多选框应该什么时候用，是不是只要遇见一个选择就去用多选框，肯定不是，应该加以说明什么时候用这个多选框。类似于是组件的设计说明。
最后再做一个案例库，最佳实践库，具体组件什么时候用我们知道了，接着案例库就是在告诉我们应该如何正确的使用，或者说的方法是什么。比如标签的左对齐和右对齐，这种情况都对，什么时候用顶对齐，什么时候用左对齐，什么时候用右对齐呢？那么根据眼动仪实验数据数据来看，并且结合给出一些工作中业务中的最佳实践得案例放进去，给使用的人去做指引。
所以设计师做的事情，不仅仅是应用组件库和创造组价库，还应该指导其他设计师，指导开发人员在去复用每个页面组件的的时候，应该怎么正确的使用，这也是在B端设计中一个关键的环节，同时我们的视觉系统一定也是和业务有关联度的，所以在B端中做设计一定也不会脱离业务去做，我们一定要联系到实际的业务场景中，这个业务场景指的就是业务和视觉的结合，在做C端的时候，业务场景一定不会比B端多，C端的业务场景大多是定制化的业务场景，它要求的是个性化，不要求通用，尽量得个性化，比如图标、按钮、页面，而B端需要统一化，中台组件库的落地，可以大大提高设计师的工作效率和开发人员的协同效率，严谨的调用组件使用组件，可以使得系统页面保持高度的一致。
如图1：可以看出纵列的关系更紧密，因为纵间距小于行间距。
如图2：可以看出行间距大于列间距，它得横向关系更加紧密。通过图中这样的视觉设计为什么会感觉间距更加紧密呢？这属于用户心理学的应用，如果元素相邻的更近，元素之间的关系就会更加的紧密。
如图3：如果元素相邻的关系都是保持一样的，那么它们的关系是相对对等的。
由此可以得出结论，如果相邻的关系越近，它们的关联度就越近，如果相邻的越远，它们的关联度就越远。
应用案例：如图4卡片中得标题和内容，设计中把标题和内容进行区分，所以我们会做大量的留白，这样的留白就会让信息结构具有层次感，层次感就是指它们信息结构的关联度，如果想让它们有关联度，就让它们距离近一点不要做区分，如果不想让它们有关联度，或者关联度出现一个等级的区分，那么就可以加一条线，让它们之间的关联度分隔开。这就是格式塔接近性的应用。
如图5：如果去区分右边的形状，通常我们会根据形状进行区分，因为人的潜意识会认为相似的形状会更有相关的分类性。这就是格式塔中的相似性原则。
应用案例：如果文字的标题大小是保持一致的，包括它有统一的大小，统一的色彩，统一的字号，那系统中的其他同样功能的地方，都应该用统一的文字，这就是格式塔相似性的应用，比如图标也是一样，只有用了相似的图形大小，相似的颜色，在相同的位置，用相同的图标进行表达，图标之间的设计才具有相似性。
如图6：可以看到有一个L，是主体与背景进行了区分，如果在设计的时候让L看的更加明显，我们采用的办法就是将主体的色彩或者形状变的更加独特，或者将背景的颜色变得更加分明，这样就可以做到那个L看的更加明显。这就是主题与背景区分原则。
应用案例：比如警告弹出，可以用色彩去区分，目标就是让用户看的更加得清晰，当警告的时候给用户一个警告的信息，当成功的时候给用户一个成功的信息。还有类似对话框的弹出，采用背景变暗和加阴影的方式，都使用到了格式塔的主体与背景变化关系的原理。因此应用在我们设计系统中，前景和背景进行区分的时候，我们就可以通过色彩进行区分，色彩的区分要保持统一，比如背景色彩透明度50%同时加一些背景模糊，其他的背景也需要保持一致，阴影也是一样，如果把阴影放在一个平面上，距离平面越近，它得阴影越短，距离平面越远，它得阴影越长，这也是阴影的层级关系。
如图7：可以看出这是一个四分之一的圆形。
如图8：这个图可以看出是一个五角星。
封闭性应用案例：当一个形状被另外一个形状或者被另外一个色彩阻断的时候，并不影响人们对这个形状额外得认知，一定会脑补出另外一个形状，这个原则和我们UI的关系是什么呢？比如一个loading，半圆一直在旋转，或者图表中的圆占比，我们就可以判断出谁大谁小，谁多谁少，判断出当前的进程和位置，封闭性原则通常应用在图标的设计，图表的设计和步骤条的设计中。
如图9：可以看出用一些简单得形状来体现，其中三角形具有明显的指向性，三角形箭头指向右边，上面五个是一组，可以看出它们具有连续性；另外一组三角形箭头指向右下角，可以看出它们是连续的一组。不同的形状会有连续性，箭头也特别有指向性，这就是为什么返回和前要进放在不同的位置，当我们的数据需要有连续的时候，我们也要使用相似的形状来表达，这就是连续性原则的应用。
同理如图10：连续性一定是要有连续等阶的变化，从左上角开始，向下和向右我们可以看出有明显的颜色连续等阶变化，通过色彩的透明度也可以做到连续性。
很多公司或者不同公司有不同的命名方式，这个需要和团队开发提前做沟通，主要以方便开发习惯操作为主，如果不命名也不能非得说成是错误的，命名可以理解成是一件锦上添花的事情，因为一切都以效率优先，命名自然会影响工作效率，通常情况，组件的命名可以分成组件的名称、级别、尺寸、状态，这样的命名顺序来进行，这样命名开发使用也比较方便，因为是按照了开发的统一规则来进行命名的。如图所示：
当英文不好的时候，推荐大家记常用组件英文名，以及常用状态名、级别名、内部名、尺寸名和位置名，那这些英文也几乎涵盖了工作中80%的英文词汇，收藏记忆哦~
至此B端系统设计总概系列为终结篇，回顾第一篇主要内容是如何正确设计组件库，B端业务调研的具体过程步骤，以及视觉规范的建立，可以看出第一篇属于B端设计的方法论或者设计指导，也是为开展B端设计前的一些准备工作；回顾第二篇总概主要内容是如何设计表单、表格、图标、仪表盘这些经常用到的设计难点，第二篇更加讲究设计落地过程中遇到的疑难杂症，专业技法；回顾当前总概三，主要内容就是中台规范的建立和自适应、响应式适配的难点，主要是成系统的B端设计步骤。我们都知道B端市场刚刚打开，而且当下对B端设计师的需求还远远不能满足我国现代化建设，数字化推进这么的大市场，作为UIUX，更早的拓宽一条路是我们当下必要的选择，谢谢阅读，祝愿各位2022乘风破浪，B端设计学有所成，如虎生翼！
转载请注明：站酷
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com
