Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

网站全局性设计——图标图示

572 views

Published on

应用场景及语义

Published in: Design
  • Be the first to comment

  • Be the first to like this

网站全局性设计——图标图示

  1. 1. 网站全局性 整理及解决 — 形符号设计问题 图
  2. 2.  什么要做符号 范?为 规  什么是符号 / 形符号图  形符号的核心功能、核心原图 则  网站中 形符号的使用情况图  情景 类语义归  形符号使用原图 则 & 范规 Contents
  3. 3. Why? 我 先来看看案例们
  4. 4. 些符号都表 什么意思这 达 ?
  5. 5. 情况是 的,我 都猜 了 ?实际 这样 们 对 吗
  6. 6. 什么有的没猜 ?为 对
  7. 7. 什 是符号么 / 形符号图  符号:  形符号:图 符号是指代一定意 的意象或指称一定 象的 ,来源于 定或者 定俗成。义 对 标识 规 约 符号可以是 形 像、文字 合,也不妨是声音信号、建筑造型,甚至可以是一图 图 组 思想文化、一个 事人物。种 时 以 形作 意象的符号。图 为
  8. 8. 形符号的核心功能图 快速表意 定俗成约 形化图
  9. 9. 形符号的核心原图 则  用 的第一反 是 的户 应 对 —— 符合 、 定和生活习惯 约 经验  用 的第一反 很快户 应 —— 形易 ,意象和意 性强图 识别 义关联  用 的第二、三反 很少户 应 —— 没有 ,不用犹豫歧义
  10. 10. 网站中 形符号的使用情况图
  11. 11. 首页 + 搜索
  12. 12. Detail
  13. 13. 后台
  14. 14. 行业
  15. 15. … …
  16. 16. 问题  用 景很多应 场  不一致  有的有歧义
  17. 17. 通 符号原过图标 则 & 范来解决规
  18. 18. 形符号原图 则 & 范的核心思想规 尊重 ,延 ,通 一致形成习惯 续习惯 过 习惯 注: 我 不追求 正 ,通 一致形成的 就是正 。们 绝对 确 过 习惯 确 我 基于 有的情况和理解形成一致。们 现
  19. 19. 形符号原图 则 & 范的制定思路规 先 使用情景中的 行 类,对 语义进 归 再做符号的辨析和 定规
  20. 20. 形符号的情境图 语义归类 1. 吸引 焦点,引 或排列内视觉 领 容 2. 示、 藏更多内容显 隐 3. 方向指引( 、位置、序列)逻辑 4. 效果预览 出浮弹 层 原地折叠 最大最小化折叠 折渐进 叠 形折树 叠
  21. 21. 形符号在 五 情境下的 用图 这 种语义 应 规则 1. 吸引 焦点,引 或排列内容视觉 领 大家先来想想,你 得 原 是什么?觉 设计 则应该
  22. 22. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用原 :则 1. 吸引 焦点,引 或排列内容视觉 领 1 ) 形 ,一目了然。不包含 信息和图 简单 复杂 复杂逻辑 2 ) 保 符号不包含任何 作确 该 动 语义 3 ) 通常用于相 内容的 起点 ,如文字内容的左关 视线 处 侧
  23. 23. 形符号在 五 情境下的 用图 这 种语义 应 规则 文字内容 文字内容 文字内容 使用 范:规 1. 吸引 焦点,引 或排列内容视觉 领 ●文字内容 ■文字内容建 使用议 不要使用 文字内容
  24. 24. 形符号在 五 情境下的 用图 这 种语义 应 规则 案例 明:说 1. 吸引 焦点,引 或排列内容视觉 领
  25. 25. 形符号在 五 情境下的 用图 这 种语义 应 规则 2. 示、 藏更多内容 —— 出浮显 隐 弹 层 大家再来想想 .. ….
  26. 26. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用原 :则 2. 示、 藏更多内容 —— 出浮显 隐 弹 层 1 ) 符号可以作为独立控件,也可作为控件中的 形元素图 ;但要确 保 符号的可 区域是该 视 可交互的 2 ) 符号通常情况下位于已有内容的 点 ,如已有内容的右视线终 处 侧 3 )符号是否做状 翻 要根据具体情况决定,多余的状 化有态 转 态变 时 会 生不必要的干产 扰 4 ) 出浮 不要遮 已有内容弹 层 挡
  27. 27. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用 范:规 文字内容 文字内容建 使用议 不要使用 2. 示、 藏更多内容 —— 出浮显 隐 弹 层 文字内容
  28. 28. 形符号在 五 情境下的 用图 这 种语义 应 规则 2. 示、 藏更多内容 —— 出浮显 隐 弹 层 案例 明:说
  29. 29. 形符号在 五 情境下的 用图 这 种语义 应 规则 2. 示、 藏更多内容 —— 原地折显 隐 叠 again.. ….
  30. 30. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用原 :则 2. 示、 藏更多内容 —— 原地折显 隐 叠 1 ) 符号 表 将要 生的状 和将要 化的方向语义 达 发 态 变 2 ) 符号要根据折 情况翻 的状 ,如收起 是加号,叠 转为对应 态 时 折 是 号叠时 减 3 ) 折 后 面其他内容需要做相 化,避免互相遮叠 页 应变 挡
  31. 31. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用 范:规 文字内容建 使用议 不要使用 2. 示、 藏更多内容 —— 原地折显 隐 叠 文字内容 文字内容 文字内容 最大最小折叠 折渐进 叠 形折树 叠
  32. 32. 形符号在 五 情境下的 用图 这 种语义 应 规则 2. 示、 藏更多内容 —— 原地折显 隐 叠 案例 明:说 折渐进 叠 形折树 叠 最大最小折叠
  33. 33. 形符号在 五 情境下的 用图 这 种语义 应 规则 3. 方向指引( 、位置、序列)逻辑 Again and again.. ….
  34. 34. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用原 :则 1 ) 符号表 上的 ,空 位置的 化,或者一 元素达逻辑 递进 间 变 组 间 的序列 化变 2 ) 符号一般作 控件的 助符号使用,不独立承担交互 ,为 辅 职责 除非已有相 的文字 明关 说 3. 方向指引( 、位置、序列)逻辑
  35. 35. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用 范:规 Go to 建 使用议 常见错误 3. 方向指引( 、位置、序列)逻辑 回到 部顶 移到右边 更多内容 更多内容 更多内容
  36. 36. 形符号在 五 情境下的 用图 这 种语义 应 规则 案例 明:说 3. 方向指引( 、位置、序列)逻辑 Go
  37. 37. 形符号在 五 情境下的 用图 这 种语义 应 规则 4. 效果预览 One more last.. ….
  38. 38. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用原 :则 4. 效果预览 1 ) 符号明 表 用 交互后将要 生的状 ,且形式 ,不包确 达 户 发 态 简单 含复杂逻辑 2 ) 符号通常情况位于已有内容的 点 ,如已有内容的右视线终 处 侧
  39. 39. 形符号在 五 情境下的 用图 这 种语义 应 规则 使用 范:规 站外 接链建 使用议 常见错误 4. 效果预览 站外 接链
  40. 40. 形符号在 五 情境下的 用图 这 种语义 应 规则 案例 明:说 4. 效果预览
  41. 41. 以控件 度的 表格维 归类 ● ■ 形符号图 语义 典型情景案例 吸引 焦点,引 或排列内容视觉 领 示、 藏更多内容 – 出显 隐 弹 方向指引( 、位置、序列)逻辑 效果预览 示、 藏更多内容 – 折 – 最大最小显 隐 叠 示、 藏更多内容 – 折 – 形显 隐 叠 树 示、 藏更多内容 – 折 –显 隐 叠 渐进
  42. 42. THANKS!

×