WSG4

• 文字及链接之语义 → 5. 网站结构 Site Structure,
• 可访问性、”首屏/信息屏”、及页面模板 → 6. 页面结构 Page Structure,
• 导航、找路及交互 → 7. 界面设计 Interface Design
• 眼球、平面、及网格系统 → 8. 图型设计 Graphic Design,
• 类型、文件格式、及替代文字 → 11. 图像 Images,
• 构图原则、制作、及散播渠道 → 12. 视频 Video,

  WSG4_05

  正确文件名称命名方式：

  “contact_us”

页面元素重要性排序：

• 第一 → 页面标题,
• 第二 → 页面顶部的主要标题,
• 第三 → 页面前几段内容,
• 第四 → 链接到其他页面的文字,
• 第五 → 页面上所有相关图形的替代文字
• 第六 → HTML文件名以及网站目录的名字,

  CMS管理系统：

  1. CMS优点的关键在于将内容与表示代码分离,
  2. WordPress和Drupal是流行的内容管理系统,
  3. 内容管理系统的主要功能之一是编辑角色形式化，并为内容创建和发布创建一个有组织的工作流。

5.1 网站的组成部分

• 文档结构： 位于页面body内的区域使用分区标签（<div>）或文本级范围（标签）来进行功能分割。例如，绝大多数Web页面都有页眉、页脚、内容和导航区域，它们全部使用可以被寻址和使用CSS进行可视样式化处理的已命名的通用<div>标签来指定。

已命名的分区和范围之所以重要的原因有哪些？

Web页面的内容会被分割成多个子区域，用来标注页面功能区的分区和范围，为特定的页面元素和各种内容提供了一个“包裹”。通常，分区和范围的命名要谨慎，每个主要的重要页面元素都应该有一个唯一的ID

1. 唯一已命名的页面元素能进行完全的程序控制及完全的样表式控制，除非页面元素有自己的名字，否则不能使用CSS和JavaSscript处理。
2. 唯一已命名的页面分区允许你对特定的页面区域和内容块更轻松地应用可视化样式，功能更强大。
3. 唯一已命名的页面会给未来留下更多的选择，这是因为新的Web内容显示设备和样式表类型都在改进，如果页面和内容都包含在一致的、系统命名的页面分区中，网站的转变会更容易。未来要将网站更改为全新的内容管理体系更容易。

WSG4_06

关于根据眼球追踪和其他研究方法对于浏览web页面的影响内容：

1. 谷歌的研究显示，在较小的移动设备上，首屏之下的变化区域的可见性低于首屏，但效果并不明显，尤其是在用户习惯于滚动浏览页面内容的较小的手机屏幕上。,
2. 谷歌进行了一项关于网页广告在不同页面位置的相对可见性的研究，并发现广告在首屏中可见性急剧下降。

面包屑导航：

1. 导航是一种用途广泛、易于理解的导航设备，在具有深度内容组织的大型站点中尤其有用。
2. 将面包屑整合进页眉顶部是最好的。
3. 面包屑导航的位置在主要导航下，在主页< h1>标题和内容之上。

页面结构的购物车、广告、侧栏列等内容：

• 很久以前，亚马逊把它的“购物车”链接放在标题的右上角，这也是所有其他购物网站现在也放在这里的地方。 不要反对这个趋势; 它是网络上最牢固的接口约定之一。
• “读者通常会忽略那些通常包含广告的屏幕区域，尤其是如果图形内容看起来像横幅广告的 话。”
• 对于各种逻辑、编辑、可达性、可显示的搜索以及常识等原因，用”h1”作为顶部的开头可以让使用者明白这一个网页是关于什么内容的。确保你的主要内容关键词是在第一个”h1”之中的。

响应网页设计围绕三个概念来进行设计的：

流式、灵活、CSS3媒体查询

“首屏”英文为：fold，

是指不滚动web网页屏幕的情况下就能被用户看到的画面，在网页上是一个很重要的过渡区，它不应低于页面600-700像素以保证在桌面端和移动端的可见性。

关于页面结构的5种最基础的布局及8种分类细项：

1. 页眉：Header；
2. 页脚：Footer；
3. 主要的内容栏：Main；
4. 左侧浏览栏：Left-scan-column；
5. 右侧浏览栏：Right-scan-column；
6. 导航和搜索：Navigation-and-search；
7. 标识及标题：Identity-and-title；
8. 导航链接：Navigation-links；
9. 选项卡\菜单导航：Tab\Menu-Navigation；
10. 当前位置路径：Breadcrumb-trail；
11. 局部导航：Local-navigation；
12. 跳转至顶部按钮：jump-to-top-button；
13. 联系人信息：Contact-information；
14. 首页链接： Home-Link

    WSG4_07

    “信息的气味”理论：

15. 链接要工作得最好，得让链接与其他元素很容易区分 (例如, 蓝色和带下划线) 。
16. 链接传达气味最强的时候，是当链接的开头短语包含关键词 (或”触发词”)，是当这关键词是描述性的和清晰的丶准确地描述他们链接到的页面。当链接中的单词在目标页上也是突出时，用户的信心就会增大。
17. 只要每次点击香味越来越强, 用户不介意点击多页，他们感觉到他们正在走向他们的目标。

企业界面程序：

• 企业社会凝聚力和共同目标—象征
• 构建清晰、易于导航的—一致性
• 一个明确和可识别的—定位

Web应用程序设计响应错误回到正轨：

提供反馈, 解释错误, 警告

交互组件的术语：

• 切换 → Toggles,
• 切换抽屉 → (Toggle) Drawers
• 切换板 → (Toggle) Panels,
• 下拉菜单 → drop-down menus
• 复选框 → checkboxes
• 组合框 → Combo box
• 单选按钮 → radio buttons
• 拖放 → drag-and-drop
• 文字输入框 → text input/area
• 选项卡 → Tabs
• 悬停 → hover,
• 捏缩放 → pinch zoom

为媒介而设计的核心要点：

• 由於用户可能出现在任何页面上，所以…. → 无死胡同頁
• 由於用户要精确及可靠信息。所以…. → 完整性和稳定性
• 由於用户不喜复杂，要即时及正确信息。所以…. → 简洁性和一致性
• 由於用户希望以尽可能最少的步骤获取信息。所以…. → 直接访问
• 由於用户不会容忍长时间的延迟。研究表明，对于大多数计算任务，超过大约是十秒的门槛，用户感到挫折。所以…. → 带宽和交互
• 由於用户想知道她在哪，有什麽选项及功能。所以…. → 反馈和对话框
• 由於用户使用的装置各类型都有。所以…. → 显示屏

路径搜索：

去哪—意向 在哪—定向 路线—决策 识别—结局

关于导航链接左右栏说法正确的是：

1. 左侧的导航列比较常见，因此所有网络用户都熟悉它们。
2. 图中所示是经典左侧导航，具有分层列表。
3. 右侧的导航栏更常被外部或更多的圆括号“相关链接”或广告主导。

   WSG4_08

   吸引眼球的影响力： 网站用户体验表明；用户对他们所看到的；上图中，页面的；最近的设计写作

行长、颜色、对比：

• 并不是所有的颜色是等价的，并不是所有的颜色组合是可替换的，尤其是对8%有一定程度的色盲的男性来说。
• 区分颜色对比主要取决于明亮度 (brightness) 和饱和度 (saturation)
• 同一照明度下多种颜色的相对亮度不一（黄色的亮度几乎是蓝色的4倍）
• 白底上的暗颜色像蓝色或红色效果较佳
• 白底上的明亮颜色像黄色会消失看不清
• 若非用渐变背景不可，请使用黑色字
• 不要在文本上单靠颜色来产生对比。

可视化平面的特征：

• 变异的 (Variable): 我们不再知道我们设计应用的领域大小甚至其物理特征。对於我们的作品的边界，我们已经失去了控制, 我们不再有这些基本的边缘边界，来指导我们的工作，来用做参考框架。
• 动态的 (Dynamic): 数字屏幕上设计成型结果是使用当下才产生的, 我们永远不能完全确定这设计成型结果是什么浏览器丶操作系统丶字体丶颜色丶或其他基础显示技术来提供支持的。
• 无处不在的 (Ubiquitous): 好消息是，我们的设计有史上最广的受众，信息显示已从办公桌解放出来，并已真正成为环境里到处可见的显示平面。设计师所拥有的是，史上最强大的丶最可塑的丶或最有用的视觉平面来创作。
• 响应性 (Responsive): 在这个多屏的世界里, 唯一合理的前进道路依赖于响应性网页设计的基础：弹性网格布局(fluid page grids)丶弹性图片/媒体 (responsive images)丶CSS3媒体查询(CSS3 media queries)，让您的设计能够智能地响应他们要出现的各类屏幕。
• 好消息是，所有的视觉设计的基本工具仍有用：字体排版丶颜色丶对比丶大小关系，甚至复杂的布局在完全响应的设计中仍好使。

Gestalt原则：

相似性 → similarity 闭合/收合/补齐结局 → closure 连续性 → continuity 相近性 → proximity

WSG4_11

网页图像：

• 使用线条丶多边形丶点丶曲线和填充效果的数学描述来创建图像，像 Adobe Illustrator (.ai) 文件。 → 矢量图,
• 是由像素 (pixels，也就是图片元素) 为基本单元所组成的细粒网格。 → 位图／点阵图 或称 光栅图,
• 单靠 css 代码在网页上的使用，可加配有阴影丶边缘丶阴影丶悬停和点击状态等等效果。 → CSS 图形,
• 以开放格式的 xml 文件类型保存的一种矢量图，直接用于网页上。 → 可伸缩矢量图形 SVG,
• 一种简便方法，把数十甚至数百个矢量符号和图标，一次以非常紧凑的形式加载至网站中。 → 图标字体

  @media查询标签：

  决定屏幕宽度, 决定显示的分辨率, 决定分辨率与显示的物理大小之间的区别

使用网页图像照片与图示：

1. 工作浏览器中的svg支持将继续改进。
2. 矢量图形可以被扩展成多个分辨率的位图jpeg或 pngs,每个尺寸都有很好的质量。这在交付的方案中很有用基于屏幕分辨率的页面图形，在这里创建1x和2x 为每一种显示屏幕优化插图的版本。
3. 项目矢量图形也可以用于打印。

矢量图：

• 当你投资于插图时，矢量图作品是特别有吸引力的，因为你可以在众多不同的媒体上使用它：网络丶APP应用丶电子书丶和印刷。,
• 反讽刺的是，像复杂的矢量插图有可能因其复杂程度，储存为SVG图形时，不会节省任何带宽。,
• 复杂矢量图因复杂而浪费带宽的话，将复杂矢量图作品转换为 jpeg 文档，以适应 1倍和2倍 (1× and 2×) 及(1× and 2×) 及示屏幕，是好方法。,
• 矢量图很少有位图（如照片）有深度或复杂度。通常只是形状的简略描述，所以文档小，下载快。,
• 矢量图像通常是简单和图解形式的，像图（graphs）丶数据图（charts）和图解（diagrams）。

  JPEG图像和压缩的特点：

  渐进式JPEG；JPEG压缩使用了一种复杂的数学技术

计算机屏幕显示：

三个RGB原色；计算机显示屏通过

JPEG格式：

JPEG图形在压缩；在JPEG格式工作时

Alt属性：

提供一个替代的文本；无法看到你图片

GIF文件：

8位图形； 256位颜色

WSG4_12

设备术语：

三脚架–tripod 照明—light 拍摄视频—Video camera 小型设备—Lavalier 采集声音—Shotgun

轻量级视频的制作需要的装备有摄像机、三脚架、麦克风、灯光：

• prosumer相机通常具有与低端专业相机相同的功能，但它比简单地翻转一个物理开关或转动一个控制盘要慢得多。,
• 视频三脚架它们带有“流线头”，可以在视频录制过程中平稳地平移和倾斜且还有一个特殊的中央摄像机支架，可以快速调平三脚架头，这对于拍摄时的场景非常重要，而且比传统的静态摄影三脚架快得多。,
• 主灯光一般为500w，补光灯 一般为250w

  采访时灯光设置：

• 在办公室采访时，直接的顶灯通常会让人们的脸不好看,
• 除了一个500瓦的灯直接指向主体，建议再设置一个250瓦的光，放在主光的对面。

  构图原则：

  圆—Rule of 长条—Strong 三角—Triangles 椭圆—Psychological

拍摄花絮等中英文匹配：

花絮—b-roll 编辑器—flexibility 取景器—viewfinder 三脚架—tripod

把摄像机和三脚架放在远离主体的位置：

在较远的距离上拍摄；把摄像机放在三脚架上

视频网站的策略 关于多渠道策略：

• 把Facebook、YouTube和Vimeo的不同优势和特性都作为整体战略，能最大限度地提高演示质量，并扩大视频观众群,
• 越来越多的视频出版商开始使用社会媒体， 他们会绕过YouTube，直接在Facebook上发布视频。,
• 把Vimeo作为一个高质量的替代方案，在你自己的网站上嵌入视频，并作为电子邮件营销和基于网络的通信活动的一部分发布新的视频内容。,
• 在YouTube上发布同样的视频，YouTube拥有更多、更多样化的观众群，YouTube内容的搜索可见性是它的优势所在。

  RWD2

  几个小黄图的：

  左中—center 全—stretch 下—flex-end 上—flex—start 预设值–stretch 有横线—baseine

  语义标签：

• 和
  元素 → 用于添加一个“展开”/“收起”部件。
• 元素 → 声明主内容区
• 元素 → 可用于引介区或“报头”。
• 元素 → 用于标记联系人信息。
• 元素 → 用于包含一个独立的内容块。
• 元素 → 用于斜体或标记出罕用的名字

• 和

• 元素 → 定义一个通用的区块
• 元素 → 表示内容中需要强调的部分。
• 元素 → 用于加粗或引人注意。

选择符规则：

• 从第三项开始，每两项选择一项 → :nth-child(2n+3)
• 表示“取反” → :not
• 选择的第一行文本目标根据视口大小不同而不同， → :first-line
• 属性选择符，以……开头 → ^=
• 选择匹配列表中最后一项 → :last-child
• 属性选择符，包含…… → *=
• 选择匹配列表中第一项 → :first-child
• CSS3 属性选择符一例 → img[alt=”sausages”]
• 选择匹配列表中奇数个 → :nth-child(odd)
• 属性选择符，以……结尾 → $=,
• 属性选择符，以使用“空格分隔的” → ~=
• 选择没有内容（包含注释而不包含空格的元素，也是空的） → :empty

CSS3高级技术特性和属性语法：

• 背景大小关键词：保持图片比例，拓展至覆盖整个元素。 → cover
• 用来叠加不同阴影特性的符号 → 空白, 阴影尺寸 或 阴影偏移（可选可省略）
• 文字阴影特效缩写值的第4个值 → spread
• 重复渐变背景（径向） → repeating-radial-gradient
• 背景径向渐变 → radial-gradient
• 背景大小关键词：保持图片比例，拓展图片让其最长边保持在元素内部。 → contain
• 用来分隔阴影特性的符号，使其会按照从底部到顶部的顺序被添加 → 逗号
• 盒阴影容许你在元素的内部或者外部创建盒状的阴影效果 → box-shadow
• 盒阴影添加了关键字以產生内阴影（可选） → inset
• 模糊距离（可选可省略），文字阴影特效缩写值的第3个值 → blu
• 背景线性渐变 → linear-gradien
• CSS滤镜 → filter
• 背景大小关键词：让图片保持其原生大小 → auto
• 文字阴影特效，是最被广泛支持的CSS3特性之一。 → text-shadow

动画属性语法：

• 规定动画何时开始 → animation-delay
• 我们可以使用animation-fill-mode覆盖这种行为。 → animation-fill-mode
• 动画关键帧 → @keyframes
• 次数。默认是 1。 → animation-iteration-count
• 周期。默认是 0。 → animation-duration
• 用于控制动画的播放和暂停。 → animation-play-state
• 规定动画名称 → animation-name

HTML5表单中的标签及属性：

• 属性，表单域中对占位符文本 → placeholder
• 元素，搭配list属性使用→ datalis
• 标签，用于搜集用户信息 → input,
• 以方便用户输入。 → autofocus,
• range、color、button和hidden类型的输入元素不能使用→ required
• 为 fieldset 元素定义标题。 → legend
• 提供自动补全功能来辅助用户输入。 → autocomplete
• 生成一组相关表单的字段。 → fieldset
• 属性，可表明该项为必填项。→ required

2D变形的中文解释：

• 沿X和Y轴对元素进行斜切（单位为度） → skew
• 按照一定角度旋转元素（单位为度） → rotate
• 可以修改变形原点。 → 此句有误
• 用来缩放元素（放大或缩小） → scale
• 在屏幕上移动元素→ translate
• 可以修改变形原点。 → transform-origin属性
• 允许你以矩阵变形来控制变形效果 → matrix

HTML的输入类型：

• 支持该特性的浏览器中生成一个颜色选择器 → type=”color”
• 支持该特性的浏览器期望输入一个数字 → type=”number”
• 支持该特性的浏览器期望输入统一资源定位符 → type=”url”
• 支持该特性的表单域期望输入一个电话号码 → type=”tel”
• 普通文本输入的表现基本一样，仅在个别浏览器中渲染得有点细微差别 → type=”search”
• 支持它的浏览器会期望用户的输入匹配电子邮箱的格式 → type=”email”

Flexbox有四个关键特性：

• 次序 → order
• 方向 → flex-direction
• 对齐（在交叉轴cross axis上） → align-items
• 弹性项 或 伸缩项 → flex-item
• 弹性，三个属性（伸展、收缩、基准）合体的简写属性 → flex
• 弹性，传给flex的第一个值 → flex-grow
• 弹性，在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。 → flex-shrink
• 弹性，传给flex的最后一个值 → flex-basis
• 对齐（在主轴main axis上） → justify-content

---