宁波IT培训
美国上市IT培训机构
0574-87236644
如何有效标注才能高度还原设计稿？（二）
- 时间：2019-04-09 09:35
- 发布：宁波达内培训
- 来源：网络
- 分享到：
二、组件间距
常见的的设计标注文件中，组件间距大致可以分为两种：
页边距
内容块之间的间距
2.1、页边距
指内容到屏幕边缘的距离，也叫安全距离。
同时，在36氪的界面中还可发现一个小细节：右侧图标并没有贴着安全区域。这是因为在图标尺寸较小的情况下，为了保证其易点击性，会在其四周填入空白像素，使可点击热区面积大于图标的视觉尺寸。（如下图）
在设计的过程中，我们应该使用常用的页边距，如32px、30px、24px、20px。
同时需保持所有界面中页边距的一致性，减少和开发人员的沟通成本。
2.2、内容块间距
主要分为两种：块外间距和块内间距。
通常情况下，会根据格式塔中的“相近原则”，使块内间距小于块外间距，保证内容块的亲密性以及块与块之间的分隔感。（如下图）
我们先着重来说说块外间距。
在开发过程中，开发人员往往需要使用模块开发，这时就需要用到块外间距。在标注块外间距的时候，需要设计师和开发人员保持思维的统一，这样才能保证页面的还原度。
如何使用块外间距进行页面搭建呢？一般来说，常见的有四种方法：
1. 给定间距，自上而下进行适配。这种方式容易导致下面布局拥挤，不常用。
2. 给定间距，从上下向中间方向适配。一般可以基本做到适配各个尺寸，但容易出现布局不协调的现象。
以上两种方法不是很好用，基本已淘汰。
3. 确定各元素中心点位于画板的比例位置，按比例确定位置。这个方法可以完美适配出优美的布局。（如下图）
4. 把画板分割成几块，所有元素在各个区域居中。
这是最符合开发思维的适配方案，也是还原效果比较好的适配方案。
具体的做法是固定上下区域，中间间隔区域自适应。单独划分的区域可以直接给定高度数值，或者给定比例。（如下图）
3和4是比较常用的高度适配方法，尤其是第4种，酷狗和QQ音乐都是采用第4种方法进行适配。（如下图）
块内间距的标注涉及到文字、图标等内容会在后面章节进行说明，此处省略。
总而言之，为了避免设计师和开发人员在间距上产生问题，一方面在设计的过程中，我们保持统一性，减少出现大量不同间距数值的情况，让开发人员在写页面的时候更顺畅、效率更高。
另一方面我们需要在标注的时候关注开发人员所需要的内容，理解开发思维，与他们统一思路。
2.3、组件间距标注的注意点
在设计的过程中，我们常使用以下方法来规范间距：
2.3.1、 定义最小单位网格，如4px、6px、8px等；
2.3.2、设置常用间距：如最小单位为4px的情况下，常用间距设置为：8、16、24等4的倍数。
一稿适配时，面对不同尺寸机型，使用4px网格换算之后都是整数倍，这样我们的视觉元素就不会因为适配而变形模糊。而常用间距使用最小单位网格的倍数设置，可以保证视觉元素的精准，使设计变得有理有据，也便于开发人员实现还原，降低沟通成本。
比如：能使用16的时候，就避免使用18或者20，但是也要依据实际情况进行动态调整。做到尽量“克制”，避免过多的间距让开发人员在还原的过程中产生不必要的麻烦。
1.4、组件间距的标注方法
关于内容间距的标注，在与开发人员对接的过程中，目前有两种主流方式：
2.4.1、进行手动标注，需要与开发人员沟通标注其关注的要点；
2.4.2、设计师利用插件工具一键导出所有标注，比如：蓝湖；
预约申请免费试听课
Copyright © Tedu.cn All Rights Reserved 京ICP备08000853号-56 达内时代科技集团有限公司 版权所有
选择城市和中心
北京
内蒙古
山东省
江苏省
上海
湖南省
江西省
贵州省
广西省
广东省
海南省
台湾