• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

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

  • 381 views
Uploaded on

应用场景及语义

应用场景及语义

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
381
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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