响应式网页设计(二)

响应式网页设计(二)

---

目录

• 响应式网页设计(二)
  • 以 UI 设计角度切入响应式设计该注意的细节
    • 动线设计: 并非 所有PC内容 都要全部塞到 移动网页内
    • 断电时机: 设计多栏式布局的必备概念
    • 点击范围: 设计让人好点选的元素
    • 少即是多: 避免信息爆炸
    • 设备特性: 使用者行为 touch, hover
    • 断点元素: 只有手机才会显示的功能与 Layout 切换
    • 软件辅助: 检测响应式网站断点工具
    • 练习
  • 断点规划
    • 响应式无法让所有屏幕解析度都最优化
    • 遵循 80/20 原则, 先兼容热门的浏览器
    • 为什么要考虑 Mobile First 与 Desktop First 优先的网页布局
  • 响应式表格与表单设计
    • 响应式表格设计
    • pure.css
      • 透过 button 说明 网页元素的设计
  • 响应式图形设计
    • img 自适应的两种方式
    • img 的 css reset
    • 2倍(3倍)图, 了解一下? 2倍图
    • SVG
    • 图片压缩
  • 常见响应式选单设计
    • 常见样式
    • 多栏多列式设计细节
  • 注意事项
    • media 写在一起还是隔离
    • 请不要写死高度!!!
  • 练习

---

相关阅读

• 响应式网页设计(一)
• 响应式网页设计(二)

---

以 UI 设计角度切入响应式设计该注意的细节

动线设计: 并非 所有PC内容 都要全部塞到 移动网页内容

• 动线设计: 引导用户操作
• 在手机上 把不重要 PC 的东西隐藏, 优先 用户体验

断电时机: 设计多栏式布局的必备概念

• 以文字行数为例
  • 行数太多 眼睛来回摆
  • 行数太少 换行太快, 阅读节奏不好

点击范围: 设计让人好点选的元素

• 移动端
  • 需要考虑元素是否太拥挤
  • 手指点选范围 大约44px (研究表明)
  • IOS 的界面设计上 label 高度也是 44px

少即是多: 避免信息爆炸

• pc

  • 新闻
    • 缩图
    • 标题
    • 局部内文
    • 其他说明

• 手机上如果全部放上, 内容就密密麻麻了, 细心不清楚

  • 只呈现
    • 缩图
    • 标题

设备特性: 使用者行为 touch, hover

• 手机上没有 hover
• 例如, 菜单
  • 在PC上通常使用 hover 切换菜单
  • 在手机上 使用 touch 切换

断点元素: 只有手机才会显示的功能与 Layout 切换

• 汉堡选单

  • 通常只在手机上使用

• 如果在PC上 还隐藏选单, 用户可能会质疑, 老是要我点一下才能看到选单!!!

• 桌面版

  • 选单为水平排列
  • 隐藏汉堡选单

• 移动版

  • 选单为垂直排列
  • 显示汉堡选单

.navbar-menu > li {
  display: inlline-block;
}
.button-toggle {
  display: none;
}

@media screen and (max-width: 768px) {
  .nav-var-menu {
    display: none;
  }
  .nav-var-menu.active {
    diaplay: block;
  }
  .nav-var-menu > li {
    display: block;
  }
  .button-toggle {
    display: inline-block;
  }
}

软件辅助: 检测响应式网站断点工具

• 收集 响应式网站 https://mediaqueri.es/
• chrome 插件 能检测网页使用了那些断点 Responsive Inspector Reloaded

练习

• 使用 UI设计的标准 去看网页, 找出网页的缺点
  • 动线设计: 并非 所有PC内容 都要全部塞到 移动网页内容
  • 断电时机: 设计多栏式布局的必备概念
  • 点击范围: 设计让人好点选的元素
  • 少即是多: 避免信息爆炸
  • 设备特性: 使用者行为 touch, hover
  • 断点元素: 只有手机才会显示的功能与 Layout 切换

---

断点规划

响应式无法让所有屏幕解析度都最优化

遵循 80/20 原则, 先兼容热门的浏览器

浏览器市场份额数据

为什么要考虑 Mobile First 与 Desktop First 优先的网页布局

• Mobile First

  • 手机页面会比较灵活
  • 向PC兼容的话会发现好多样式需要覆盖
  • 目前电商在移动端使用比较多的话, 童话村那个都在手机开始做起

• Desktop First

  • 手机页面会差
  • 代码量是差不多
  • 主要还是看用户群体

• 常见 PC 解析度断点设计

  • 960, 1000, 1280

---

响应式表格与表单设计

响应式表格设计

• 使用类名操作, 在移动端隐藏

@media (max-width: 569px) {
  .m-none {
    display: none;
  }
}

• 依然要显示所有, 左右滚动
  • 文字可能会被挤压成一行, 定宽解决

@media (max-width: 569px) {
  .container {
    overflow-x: auto;
  }
  .order {
    width: 768px;
  }
}

pure.css

• 文件后缀的含义
  • button.css 完整的样式
  • button-min.css 压缩过的
  • button-core.css 兼容代码. 让核心代码更简洁, 没那么脏
    • 有针对一些浏览器去做一些 hack
  • button-nr.css 没有响应式
  • ... 分的很细, 还有好多...

透过 button 说明 网页元素的设计

• button-core.css
  • 先做css reset 让表单元素的表现一致

.pure-button {
    /* Structure */
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    box-sizing: border-box;
}
/* ... 还有个别 浏览器的调整 */

• buttons.css
  • 代码都有备注好, 可以了解到, 代码是怎样 渐进增强的
  • 类名的设计 .pure-button-hover 比如说想保持 hover状态就可以直接加上类名
  • 其他功能, 禁止点击, 点击时候的样式, 都有考虑到很多因素

.pure-button {
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}
.pure-button-hover,
.pure-button:hover,
.pure-button:focus 

• 使用方法
  • 有时候会觉得插件的自带类名太冗长了, 直接修改源码的类名

.btn {
    font-family: inherit;
    font-size: 100%;
    padding: 0.5em 1em;
    color: #444; /* rgba not supported (IE 8) */
    color: rgba(0, 0, 0, 0.80); /* rgba supported */
    border: 1px solid #999;  /*IE 6/7/8*/
    border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
    background-color: #E6E6E6;
    text-decoration: none;
    border-radius: 2px;
}
.btn-hover,
.btn:hover,
.btn:focus 

• 类名的设计, 分工明确
  • pure-button 只负责清除浏览器自带样式(消除浏览器差异)
  • pure-button-primary 只添加颜色 (方便维护)

---

响应式图形设计

img 自适应的两种方式

img {
  width: 100%;
}
img {
  max-width: 100%;
}

• width: 100% 依据父元素的宽度, 能无限延伸, 可能出现马赛克
• max-width: 100% 如果父元素的宽度比图片宽度大, 图片不会继续变大

img 的 css reset

img {
  max-width: 100%;
  height: auto;
}

2倍(3倍)图, 了解一下? 2倍图

• 2倍图可以防止 移动端显示不会出现糊掉的现象
• 移动端使用小图, 可以不让图片适应, 保持图片的清晰度.

SVG

• iconfinder
• SVG 矢量图片, 放大不会出现锯齿

图片压缩

• tinypng

---

常见响应式选单设计

常见样式

• 一般选单设计
• 一列式设计
• 汉堡选单设计
• Off canvas选单设计

注意: 选单的切换尽量不要让页面移动, 因为会消耗CPU

多栏多列式设计细节

• 留意 320px 的支援, 选单文字过多有可能破坏布局
  • 16px * 20个字 = 320px (但是还有留白)
  • 考虑到选单对称

注意事项

media 写在一起还是隔离

• 按组别分离

请不要写死高度!!!

---

练习

• 网页版设计稿
• 被墙了, 需要科学上网本地版设计稿