基本的能力
- 依据设计稿（PSD 或 Sketch）及交互要求，利用 JavaScript、HTML 和 CSS 等技术将设计稿高保真转换为网页的能力。
审查设计稿
友好性
- 有哪些地方的设计对开发不友好的地方
- 是否存在展示缺陷（是否考虑按钮或标签文字数量的溢出情况）？
- 是否开发成本高或者根本无法实现？
设计稿的排版布局及内容构成
- 全局理解页面的设计细节、排版布局及内容构成
- 利用模块化的思想将设计稿解构成一个个组件，并明确每一个组件的可复用性，包括可复用的范围。
跨页面可复用组件
- Header - 顶部导航
- Footer - 底部信息
当前页面可复用组件
- 设计稿审查的过程中，如何将内容模块按照合适的颗粒度抽离成为组件，并确定其可复用性及复用范围
团队内通用的审查清单
- 确定设计稿的开发友好性（是否有还原成本高或无法还原的地方）
- 确定一些特殊的元素是否有合理的边界处理（如文案超出外层容器的边界怎么办）
- 确定页面的框架结构（Layout）
- 确定跨页面可复用的组件（Site Component）
- 确定当前页面可复用的组件（Page Component）
切图
在PS中使用Extract Assets
Extract Assets具备的功能
- 将 PSD 中的图层或图层组导出为一个或多个的图像资源
- 导出 JPG、PNG、GIF 或 SVG 类型的图像资源
- 为所有图像资源设置 1x、2x 等多分辨率的版本
- 预览每个图像资源
- 轻松将图像资源导出到你首选的文件夹中
- 确保每当 PSD 发生变化时，被导出的资源都能得到自动更新
使用步骤
-
1、Photoshop中，启用Extract Assets生成图像资源
image.png
image.png
-
2、打开 PSD 文件，勾选如下配置
image.png
- 3、更改图层或图层组的名字为适当的文件格式扩展名（.jpg、.png 或 .gif 等）
- 4、资源生成器默认会在 PSD 的同一层目录下创建 assets 文件夹，如图
切图工作就完成了！切图只需要简单的三步
- 打开 PSD 文件
- 打开 「生成 > 图像资源」
- 更改图层或图层组的文件名
Extract Assets 进阶
- 1、从一个图层或图层组中生成多个资源，请用半角逗号分隔该图层或图层组的名称
music.png, music.jpg, music_on.png
- 2、图像资源保存到子文件夹中
子文件夹/music.png
- 3、指定图像品质和大小参数
-
a、默认情况下， JPEG 资源会以 90% 品质生成， PNG 资源会以 32 位图像生成， GIF 资源则会以基本 Alpha 透明度生成
image.png
- b、添加所需的输出品质作为资源名称的后缀：jpg(1-10) 或者 jpg(1-100%)，例如：
-
music.jpg5
music.jpg50%
- c、添加所需的输出图片大小（相对大小或者支持的单位：px, in, cm 和 mm）作为该资源名称前缀。Photoshop 会相应的缩放图像，例如：
200% music.png
240x300 music.png
为资源指定默认位置
可以为生成的资源指定文件的默认位置，例如想将图层导出到 hi-res/ （存放二倍图，并加上 @2x 的后缀），lo-res/ 存放缩小 50% 的图标，可进行如下配置：
- A. 创建空图层
- B. 更改空图层的名称为default hi-res/@2x + 50% lo-res/
Export Artboards, Layers, and more
- Photoshop CC 2015 版本之后添加了 Artboards 功能，有点类似Sketch里面的 Artboards。
- 右键点击所需要导出的图层或图层组，点击弹出菜单中的Export As或导出为即可
PS 动作切图
-
用Extract Assets切图存在一个问题，它只能切画布范围内的资源，超出画布的部分会直接被裁减掉，如下图：
image.png
-
想切完整的图片该怎么办？建议用原始的「导出图层」的方式来切图，步骤如下：
1、右键点击图层或图层组
2、选择转换为智能对象
3、编辑内容
4、导出图片
image.png
-
通过 PS 的动作切图，可以得到如下结果：
image.png
CSS
BEM 命名规范
- BEM 的意思就模块（Block）、元素（Element）、修饰符（Modifier）
1、Block - 模块，名字的单词之间用-符号连接
2、Element - 元素，模块中的子元素，用__符号连接
3、Modifier - 修饰符，表示父元素或子元素的其他形态，用--符号连接
<!-- S Search Bar 模块 -->
<div class="search-bar">
<input class="search-form__input"/>
<!-- / input 输入框子元素 -->
<button class="search-form__button"></button>
<!-- / button 搜索按钮子元素 -->
</div>
<!-- E Search Bar 模块 -->
- 配合SCSS代码
// 以下是 SCSS 代码
.search-bar {
&__input { ... }
&__button { ... }
}
姓氏命名法
<div class="app_market_answer">
<div class="app_market_secheader"></div>
<div class="app_market_answer_list">
<div class="app_market_answer_item">
<div class="app_market_answer_itop"></div>
<div class="app_market_answer_imid"></div>
<a href="javascript:;" class="app_market_answer_ibtn">去围观</a>
</div>
</div>
</div>
- 例如app_market可以看成是「复姓」，我们有时候为了书写便利，可以将两个单词的首字母结合在一起形成一个新的「单姓」，如am
- ClassName 的命名应该尽量精短、明确，以英文单词命名，且全部字母为小写，避免意义不明的缩写
- 单词之间统一使用下划线 _ 或 - 连接
- 学习 BEM 的思想，参考使用姓氏命名法规范
- 定义样式模块，提高代码的可复用性
兼容性测试
- 页面在各个浏览器中，以及不同分辨率下是否能正常显示（HTML / CSS 兼容性）
- 网页的功能是否能在各个浏览器中正常使用（JavaScript 兼容性）
IE 、Android 低版本浏览器也会有较多的问题
兼容性的基本原则
- 渐进增强与平稳退化
- 在低端浏览器能够保持可用性和可访问性，然后再渐进增强，逐步增加功能及优化用户体验。
遇到兼容性问题，可以按如下步骤处理
- 确认触发的场景：什么浏览器，什么版本，什么情况下触发的问题，做到稳定复现。
- 找出问题原因：是什么问题导致的，具体表现如何？
- 确定解决办法：参考现成的解决方案，如哪些属性不能使用以及相应的 Hack 处理
- 收集兼容性处理方法，积累成文档
页面骨骼框架
盒模型
-
HTML 文档中的每个元素都可以被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为标准盒模型
image.png
- margin（外边距）、border（边框）、padding（内边距）、content（内容区域）
- IE 浏览器下，IE 没有使用标准盒模型。它们认为的元素宽度width计算公式如下
元素宽度 = width + padding + border
盒子总宽度 = 元素宽度 + margin
- 盒子宽度
盒子总宽度 = width + padding + border + margin
box-sizing
- CSS3 中新增了一个盒模型的计算方式：box-sizing
box-sizing: content-box | padding-box | border-box;
默认值：content-box
- 将盒模型设置成border-box，添加如下规则：
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
- 设置成border-box之后的盒子宽度计算公式如下：
盒子总宽度 = width
不管margin + border + padding + content-width大于还是小于元素宽度width，
盒子的总宽度始终固定为width。
布局
- 普通文档流布局 (display: block、display: inline)
- 元素之间按照从左到右，从上到下的顺序排列。
- 浮动布局(float:左右浮动、脱离普通文档流)
- 如果想避免浮动布局遮盖普通布局的情况，可以考虑使用清除浮动。
- 绝对布局(position: absolute)
- 脱离文档流,其定位是参考祖先元素中position为非static值的第一个元素。
- 弹性布局(display:flex)
是一个完整的模块，而不是一个单一属性，其中有的属性是设置在父元素上，有些则是设置在子元素上,传统的布局是建立在块级元素和行内元素的文本流上，那么 Flex 布局就是建立在flex-flow的轴方向上的 - 网格布局(display:grid)
是用于制定行与列的二维 CSS 布局方法，可以将页面分割成数个主要的区域，或者用来定义组件内部元素间的大小、位置和图层之间的关系。
语义化
-
HTML 语义化就是根据具体的内容，选择合适的标签进行代码的编写，这样既能便于开发者阅读和维护，也能让搜索引擎的爬虫更好地识别
image.png
网友评论