本文主要介绍什么是页边距的内侧和外侧(页边距的内侧和外侧)，下面一起看看什么是页边距的内侧和外侧(页边距的内侧和外侧)相关资讯。
本文将剖析设计稿还原效果不理想的原因，以及如何实现ui设计稿的准确还原。
我们经常听到身边的设计师和开发商的一些对话，关于对齐、大小、间距等设计还原问题，经常讨论很久。有时候甚至觉得几个像素的间距有必要这么纠结。
了解设计修复
1.到底什么是设计还原？ 恢复与重建指将事物恢复到原来的状态或形状。 设计修复与设计在互联网中是指实际界面和开发后的设计稿以及设计校对之间的偏差。
2.设计还原的现状一直是设计验收不被重视。第一，设计师习惯把时间花在雕刻设计稿上，忽略了后期的设计验收。二是对自己和合作的程序员极度自信，以为对方能知道自己所有的点，会完全按照设计稿来。
不同项目类型还原程度不同:用户产品b端产品后台。对于用户产品，最好是像素级还原。
3.设计还原的意义在这个快速发展、迭代、更新的时代，互联网产品的用户体验越来越受到重视，产品设计还原已经成为工作流程中的重要一环。
我相信每个ui设计师都应该有一个梦想，前端可以100%还原设计稿。毕竟是我们努力的结果。视觉还原的水平直接取决于测试设计与开发的配合质量，不仅影响线上产品的用户体验，也影响作为产品设计最后环节的作品质量。
影响设计还原的因素采访了ui/ux设计师、前端工程师和测试工程师。深究原因，线上效果的失真率其实涉及到三个环节:设计、前端开发、测试。造成这种现象的原因如下:
1.就ui设计而言，视觉处理不规范，自由发挥，任意把界面的ui设计当画布，不顾实现难度；标注的图纸不完整，没有详细的对接文件和设计说明；沟通不到位，评审时没有讲清楚设计思路和易错点，没有考虑设计稿的扩展性和前端代码的逻辑性，反复修改，增加了fe的工作量。2.就前端开发而言，不了解设计逻辑的时间紧、任务重，就没办法一张一张地看标注图；直想，想怎么写就怎么写，反正最后都要上线，详细不详细都一样；我不 我不知道如何解决它。内倾拒绝与标准字大小结合，标准字要注意上面的标准色，突出app的重要信息，弱化次要信息。1.3图标规格
在ui界面中，带有logo属性的图形就是图标。作为ui设计中一个重要的设计模型块，产品的每一页上可能都有图标。在设计规范中，图标一般按照用途分为两类:应用图标和功能图标。
图标也要根据不同的功能需求设计成不同的状态，比如正常状态、选中状态、点击状态。
应用图标:各种应用的识别标志，以及在应用商店下载的一些应用的标志。
功能图标:最好在说明书中注明图标格式和用法。比如网页设计，可以通过iconfont管理图片，生成代码交付前端开发；如果是原生app，需要标注图标导出格式和大小。
1.4图片规格
图片作为界面设计的重要组成部分，需要标注尺寸规格，针对不同的用途分为不同的类型。
1.5控制规范
控件是指产品界面中可操作的部分，与组件有些不同。控制翻译成控制，组件翻译成组件。流行的解释是组件由多个元素组成，控件由单个元素组成。
常见的ui控件:按钮、输入框、下拉列表、下拉菜单、单选框、复选框、选项卡、搜索框、分页、切换按钮、步进器、进度条、角标等。
按钮
该按钮有五种状态:正常、点击、悬停、加载和禁用。这五种状态需要在规范中单独列出，并标注对应的按钮填充颜色、边框颜色、圆角值、按钮宽度和高度、按钮文本大小和颜色值。如果是图标按钮，除了上述参数值外，还需要标注图标和按钮文字的间距以及图标icon的大小。
输入框
用于上下居中显示单行信息输入文本，支持键盘输入和剪贴板输入文本，并对文本进行特定格式的处理:隐藏显示密码、分段显示身份证和、标注宽度和高度。
选择
选择可以分为单选和多选，也有五种不同的状态:未选中、选中、未选中悬停、选中无效、未选中无效项。规范中应显示所有的效果状态。
进度条
用于向用户显示步骤数和当前流程。
1.6默认页面
空状态页面:在空状态下显示相应页面的图标，并添加相应的向导按钮。
无网络状态:无网络连接时的提示页面。
页面404505:发生未知错误时的页面。
2.组件规范中常见的ui组件:表格、对话框、提示栏、气泡提示、日期选择器、多级选择器、标签输入框、组合框、上传等。
如果ui忽略了规范，前端很可能每次都必须手动编写代码，而不知道有可重用的组件。你写的代码越多，遗漏细节和出错的可能性就越大，导致效率越低。至关重要的是，对于未来的迭代，前端将获得另一个页面。页面修改。
2.1组件的优势
统一性:
1)整个产品不同模块的业务按照统一标准使用，提高了整个产品的视觉交互统一性，减少了开发风格，提高了开发效率。2)避免设计师自由发挥新的组件控件风格。
3)统一交互设计规则，减少用户操作的混乱，提升产品体验。
效率:
1)一组组件可以帮助设计者简单地处理产品经理的初始需求。设计师可以通过拖拽组件的与产品经理建立接口，确认和完善需求，然后进一步推广需求。节省时间，提高工作效率。
2)减少制作组件控件的时间，不需要重新定义组件，提高设计效率，把更多的时间花在流程体验和设计推广上。
连续性:
1)通过设计规范，可以在以后的更新中不断迭代，避免故障。
2)即使团队成员离开或加入，也能通过设计规范和组件库快速接手并正常工作。
2.2组件特征
多功能性:
意思是没有商业属性也足够基本和普通。每一秒参与设计的人都应该知道这个组件的功能和用途，同时，它必须是可扩展的。
灵活性:
要求组件的组合要灵活，在不同场景下相互组合能快速构建交互框架的原型图，并根据不同页面结构的变化适应新的业务需求。
选择性:
适用于多个业务或产品，在设计过程和研发过程中可以高频转换。
2.3组件分类
我们根据现有的业务场景规划未来的业务发展方向，将构件库的构件类型分为通用构件和业务构件。通用业务组件库对外封闭，在蚂蚁设计官网只能看到通用组件部分。
通用组件
指应用范围广，扩展频率高，多种服务重复使用，没有业务逻辑。一些导航栏、按钮、吐司、弹出窗口等。我们将常见组件细分为五个子类别:基本组件、导航、数据输入、数据显示和操作反馈。
业务组件
与通用组件相比，这类组件的最大特点是包含一系列业务属性，与产品功能有重叠关联，因此应用范围可能仅限于12个业务系统或特殊场景，复用频率不高。毕竟使用场景特殊有限，发布参考意义不大。
2.3.3基于组件的构建流程场景
基于组件的构造在两种情况下执行:
1)在项目建立之前组装产品，在产品0到1之前有一套组件和设计规范。设计人员可以直接应用和修改以往项目的构件库和设计规范，使项目的初步设计更加方便、省时、省力。
2)产品经历了0到1之后，产品趋于成熟，此时开始组件化。组件构建最多有六个步骤，即:梳理。分类、场景漫游、问题分析、方案设计、插件库生成、验证开发。
我将具体的基于组件的设计升级过程总结为下图:
当团队构建成组件时，下一步就是成员之间的使用。这个过程包括业务需求生成组件模板，组件模板形成页面，页面形成页面流程，页面流程形成用户体验。构件库在重建初期不可能完全可用，需要后续设计人员不断维护迭代。
3.详细标注关于设计输出，现在很多像blue lagoon、zeplin、pxcook《如何进行设计评审》。因为我觉得审查对于设计还原的意义就是前置问题。通过设计评审，可以清楚地解释修订的最大视觉变化和发展。这些修改后的布局框架变化将增加开发工作量。如果把握好这个环节，基本上是可以实现的，除了特殊情况，比如前期忽略了一些背景数据标题。
有一些细微之处需要我们特别像开发说明，也要加深他们的印象，这样才能在执行的时候减少错误。比如日常开发时，我们只明确关键的核心点和规则。我们前面走的每一步都是为了让我们更容易检查后面的还原程度，开发也更容易。比如前期基础打得不好，后期很难深入。设计师保留会议纪要(记录问题和解决方案，以及达成的共识)，会后以邮件的形式发给前端人员，并附产品和运营的复印件，保证会议内容传达到位。让设计师和前端工程师就相关问题达成一致，提高工作效率。
在紧张的发展阶段，即使我们面前的所有工作都准备好了，它 不跟我说一声，很难避免事态的发展。这时候就要积极的去回应他们，和他们一起处理问题，比如一些比较难的页面，开发效果和设计稿差别也不小。这时候开发者会切一张他们实现效果的图给你看。这时候你要仔细找问题，不要 不要强求是发展的原因，先沟通具体原因。
2.可视化演练在可视化演练中，我们可以在测试环境中比较页面和设计草稿。检查头尾位置是否完整统一，按钮样式、反馈状态、报错样式是否统一；是否有缺失的场景和状态，按照任务流程检查场景和状态，保证设计的完整性。
这里我们推荐两种可视化漫游方法:
1)let ;让我们挑毛病。
验收的时候，我们需要把开发实施后的效果截图，然后和设计稿对比。
我们可以直接把截图放在设计的最上面，降低透明度，粗略对比一下，然后就知道哪里不对了，然后具体标注需要修改的参数。
2)页面重建演练
去检查还原的时候，在chrom:的几个点。
4.1分界线
验收时要特别注意分割线。所有屏幕上的分割线都是1px，但是许多程序员没有这样做。;没有注意到这一点，或者设计师没有 开发前没有指定，所以程序员写了1pt，因为pt是1x下的单位，px是实际单位。
因此，分界线需要是 px 为了保证每个屏幕的分割线是1个像素。
下面用三个主要场景来说明分割线的标注:1。列表流；2 .进料流；3.内容块之间。
4.2预测
作为一种重要的视觉元素，阴影构成了主体元素和其他元素 弹出 从具有深度的背景中，更好地向用户呈现信息层次。常规投影和漫射阴影推荐用css代码完美实现；特殊情况下，需要提前与开发人员沟通，权衡各种方法的优缺点，选择适合项目产品的实现方法。
结合我自己的实际工作经验和与开发者的交流经验，实现漫反射投影的方法可以通过两种实现:
4.2.1切割图纸和对接开发者
虽然剪贴可以解决这个问题，但是也有一些缺点，因为如果每张卡都用剪贴的话，开发出来的包会变大，可能会出现加载慢和闪退的情况，这些体验也是很不好的。所以这个过程中的一些问题，一定要提前和开发人员、项目人员沟通。
css代码实现
一般情况下效果不错，但是遇到一些异常情况，比如形状不规则，使用的代码通常比较复杂。这时候就要提前和开发商沟通，避免后期。问题
在设计过程中，我们需要更好地了解下游工作，实现高效的沟通。不管哪种方法是对是错，关键是要知道如何去做权衡利弊并提前与开发者沟通。只要适合我们公司 并能高效还原设计稿，值得使用。
4.3文本行高度
我以素描为例。当我们设置一个70px的文本时，默认情况下sketch会将文本设置为98px的行高。文本的顶部和底部将包含某些空白像素。
如果ui没有设置行高规格，在着陆过程中会出现以下问题:
求解线的高度
最近看到一个新公式，可以同步开发根据字体大小设置行高。
设字号为x，行高= x ^ 2 ceil(x/10)，ceil()表示向上取整数l(行高)，例如:12 ^ 2 * c测试效率工具、可视化辅助工具，可以完美接入一些你已经实现的、与哆啦a梦面板中业务紧密耦合的非常用辅助工具，配合滴滴的dokit平台，功能可以扩展，接入方便，易于扩展。
4.4视觉重心校正
在设计中，为了保证界面的视觉平衡，往往不是设计软件直接准确的对齐。我们总是通过调整间距、大小或角度来填充一些负空间，以保持画面的视觉平衡。
在设计中，右箭头通常用于指示模块的入口。当我们将箭头与文本向右对齐时，箭头会更加突出。这时候我们会把它缩进1到2个像素，但是把图片切到完全没有意识到的前端之后，设计师要主动解释或者写进规范里。
会有一些需要显示logo的地方，有的是圆形的，有的是长方形的，还有的是纯文字的，大小差距挺大的。在这种情况下，我们需要限制他一个高度，在这个高度之内，根据logo本身的体积来调整图形的大小，来处理logo的视觉平衡。
5.考虑特殊场景特殊场景在设计过程中往往会被忽略，现实中遇到时意识到缺乏异常状态会很尴尬。所以在完成主要流程设计后，还必须考虑特殊场景。您可以参考以下场景来检查、优化和调整设计。
网络异常
考虑到网络的异常情况，产品通常会通过异常状态页面或交互反馈告知用户当前的异常状态以及如何解决问题(解决方案指导、刷新、吐司)。
服务器异常
衣服服务器的异常情况很少见，时间也短。通常不会提示具体原因。设计和处理方法是在新页面上显示默认页面，以文案插图的形式给用户提示和重试指导。
空态
空态是指页面中没有内容，在几种主要情况下，设计师需要根据不同的场景给出文案和插画的表达来引导用户:
没有权限，对于一些需要权限打开才能获取内容的页面；
搜索无结果，对应搜索无对应结果的空状态提示；
内容为空，如初始状态和内容清空后的状态。
内容缺失
考虑到内容缺失的显示效果，设置页面图片缺失的占用位图。
加载页面的表达式。
当考虑网络加载或数据加载时，会等待几秒钟。通常情况下，产品会有一个简单的页面占用位图形式，以减少用户等待时的焦虑。它可以是加载或刷新整个页面的效果。
6.注意模型适配的问题。设计还原的时候，最后看不同型号的适配问题。保证不同机型的界面呈现效果一致。
6.1动态视觉
手机适配的时候，很多设计师都会遇到一个问题，就是在750*1335的屏幕上做出的设计图，但是有元素可以 不适合640*1136的屏幕。因此，设计师在绘图时需要用动态的眼光来考虑问题。
知识点:在一个简单的界面中，由于界面本身的内容较少，位置的确定会更加困难，因为要考虑如何摆放不同的界面内容才能保持视觉的统一性。这时可以将界面中的信息分成不同的部分，先保证每个部分中的固定内容，再确定适应的内容。6.2固定改编内容
在一个简单的界面中，由于界面本身的内容较少，位置的确定会更加困难，因为需要考虑如何摆放不同的界面内容，以保持视觉的统一性。这时可以将界面中的信息分成不同的部分，先保证每个部分中的固定内容，再确定适应的内容。
图标或按钮
搜索框
y轴间距
一般来说，如果y轴的空间在一个类似的汇编中，那么它就是固定的，不会改变。
6.2.4图片
像这样的图片列表，或者十字形的人像或者文字，都有固定的大小，会变成间距或者数量，如下图所示:
对于更复杂的模块，快速找到上面提到的固定因子和自适应因子，不仅可以大大提高标注效率，还可以找到合适的适配方法，避免开发完成后某个模型适配效果不理想的情况。
6.3自适应内容
改编的内容也给大家整理出来了。
6.3.1角色的弹性改编
文字流是指在多行文字的情况下，文字量的变化会影响图像的页面布局和元素大小，如下图所示:
字符的弹性适应一般涉及宽度适应。宽度适应通常会使采用间距适配，即左右边距设置，中间弹性拉伸。当文本的左右两边都有内容时，我们需要指明文本的显示范围，也就是说，最多能显示几个字。这种可以达到更好的适配，也是快速适配的常用适配。
横幅
这里说的图片是指banner或feed流中的图片，适配多为自适应。界面中元素的间距和数量不变，元素的大小按比例缩放，更适合比例固定的元素，但大小随屏幕宽度变化，如下图所示:
对于更复杂的模块，快速找到上面提到的固定因子和自适应因子，不仅可以大大提高标注效率，还可以找到合适的适配方法，避免开发完成后某个模型适配效果不理想的情况。
设计还原的思维假设视觉还原真的有问题。首先要找到原因。是不是我们做得不对？还是对方没有理解你的想法？我觉得可以从以下几个方面来做。
1.提高设计输出的质量。设计团队首先要明白修改的意义，用色值和像素画出原理图和文档，做好产品原型等能让对方不纠结上手的工作。做好前期准备工作，尽可能多思考，完善设计稿，尤其是边界情况，把自己的问题留给自己，这样可能出现的设计还原问题就会大大减少。多问问开发生，就算技术真的很难实现，也不要 不要逃避或者过于固执，了解具体原因，不断积累自己的技术知识。自己的特长和努力是赢得程序员尊重的前提。只有赢得他们的尊重，你才能顺利工作。
2.提高设计师的话语权是一个复杂的课题，需要长期的努力。每个公司都会有它的实际情况，团队越大，情况越复杂。如果一个设计师团队或者个人的话语权很弱，确实会面临非常被动的局面。首先，话语权是赚来的，不是给的。想要改善被动的局面，就要认清环境，认清问题的症结，摆正自己的位置，做出努力。只有证明设计真的能解决问题，甚至带动商业价值，话语权才会逐步提升。
3.灌输完成一个任务时用户体验的重要性，最重要的是团队的思维模式是否统一。设计师关心用户体验，工程师只关心开发成本。在这个问题上没有一致意见是正常的。如果你想让所有人都认同你的观点，你必须不断地以潜移默化的影响他人。比如没事就和公司其他人聊聊产品，聊聊体验，聊聊感受，慢慢给他们灌输体验的重要性。只要你的话题有趣，有意思，没有人会拒绝和你聊。时间长了，整个团队的思维都会发生变化。
4.根据进度和优先级进行优化。设计师可以先按照优先级排列修复顺序，看看这个像素对当前产品是否重要。正在做了解产品的进度和优先级，记录所有的修复问题，自己标注优先级，做完一次给他，然后和程序员一起解决方案和时间。也可以和开发生一起探讨一个双方都能接受的清单模式，注明问题，修改建议和重要级别，并根据实际情况进行详细或简要的说明。最好是面对面交流。
5.加强团队建设和良好的团队合作氛围是有效的润滑剂。良好的合作关系就像同一战壕的战友。即使时隔多年，回想起来，应该是我们一起带头的日子。设计师要意识到自己在整个项目过程中的位置，不卑不亢，把烦恼留给自己，不推卸责任，不互相推诿，逐步建立自己的口碑和气场。
结论一个优质项目的落地，是各部门通力合作的结果。就像我们做游戏一样，后期的优质输出也需要前期优秀的辅助来铺垫。在 合作经营与管理；，灵活运用标准化、标记、走查等方法积极推进项目，既能最大程度还原设计稿，又能提高我们的协作能力和环节控制能力。
任何问题只要多沟通，就会避免很多拥堵。来自设计师 s的观点，当然希望每一篇视觉稿都100%还原，因为用户只看你的上线效果，但往往时间安排比较紧，需要一些选择。希望在有限的时间内做到最好。
在后期的视觉接受中，我们可以设身处地鞋，把自己当成程序员，站在他们的角度思考问题。什么样的验收会更方便开发和修改，减少重复返工的次数。我们愿意在验收和标记的时候花10分钟以上的时间，还会写出详细的修改意见，这样可以节省开发的时间，反过来也有助于我们降低二次验收的成本。
前端设计不仅仅是做漂亮的效果图，还要考虑程序实现的问题。
了解更多什么是页边距的内侧和外侧(页边距的内侧和外侧)相关内容请关注本站点。