H5基础开发流程

2020-09-16 本文已影响0人 ZoranLee

基本的能力

依据设计稿（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

http://beach-inc.com/works/

H5基础开发流程

基本的能力

审查设计稿

友好性

设计稿的排版布局及内容构成

跨页面可复用组件

当前页面可复用组件

团队内通用的审查清单

切图

在PS中使用Extract Assets

Extract Assets具备的功能

使用步骤

切图工作就完成了！切图只需要简单的三步

Extract Assets 进阶

为资源指定默认位置

可以为生成的资源指定文件的默认位置，例如想将图层导出到 hi-res/ （存放二倍图，并加上 @2x 的后缀），lo-res/ 存放缩小 50% 的图标，可进行如下配置：

Export Artboards, Layers, and more

PS 动作切图

CSS

BEM 命名规范

姓氏命名法

兼容性测试

兼容性的基本原则

遇到兼容性问题，可以按如下步骤处理

页面骨骼框架

盒模型

box-sizing

布局

语义化

猜你喜欢

热点阅读