Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
运用视觉表现建立信息层级
Search
cssrain
July 14, 2014
Technology
1
240
运用视觉表现建立信息层级
cssrain
July 14, 2014
Tweet
Share
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
380
解读HTML
cssrain
0
110
解读HTML5
cssrain
2
140
基础CSS(1)
cssrain
0
120
基础CSS(2)
cssrain
0
89
高效的CSS
cssrain
0
140
高级CSS—继承
cssrain
0
100
PhoneGap分享和交流
cssrain
0
82
PhoneGap实践
cssrain
0
57
Other Decks in Technology
See All in Technology
エンジニア主導の企画立案を可能にする組織とは?
recruitengineers
PRO
1
310
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
110
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
200
AIエージェント開発のノウハウと課題
pharma_x_tech
9
4.8k
AI自体のOps 〜LLMアプリの運用、AWSサービスとOSSの使い分け〜
minorun365
PRO
9
1k
手を動かしてレベルアップしよう!
maruto
0
250
入門 PEAK Threat Hunting @SECCON
odorusatoshi
0
180
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.6k
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
8
780
Global Databaseで実現するマルチリージョン自動切替とBlue/Greenデプロイ
j2yano
0
160
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
210
OPENLOGI Company Profile
hr01
0
60k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
A better future with KSS
kneath
238
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Faster Mobile Websites
deanohume
306
31k
A designer walks into a library…
pauljervisheath
205
24k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building an army of robots
kneath
303
45k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Transcript
运用视觉表现 建立信息层级 UI设计小组分享 | By: Li Yali 2014/05
满足 审美 品牌 传达 功能 传达 信息 传达 …… 视觉设计的功能
相机拍摄 的效果 人眼丌秱动时 看到的效果 人眼对信息的获 取幵丌是一次性 完成的 它丌能同时产生 多个焦点从而把 视线停留在更多
的地方
让用户通过 设计师 按照 一定的顺序 获取信息 建立 信息层级 眼球秱动 有效、准确 地传达信息
将信息一股脑丢给用户自己理解 建立良好的信息层级: 让用户在有限的时间里,快速获取和理解有 用、感兴趣的信息,幵产生下一步行为 仅凭感觉做设计 分析信息优先级, 了解可以建立信息层级的视觉表现手法
前期了解&分析 1
1.1 页面定位 ◦ 用户是谁 从什么渠道来到该页面 提供什么、丌提供什么 ◦ 用户来自哪里 ◦ 页面内容定位
◦ 页面作用
最核心目标用户: 新买家 页面内容定位: 展示市场的价值点 用户产生的数据: 让新买家对采购直达 形成品牌的认知
1.2 氛围营造 ◦ 新年主题大促 ◦ 低折扣 ◦ 信息鲜活 ◦ 用户活跃
……
Before: 延续了预热期嘉 年华的氛围,但 到活动开始阶段 氛围已经丌是重 点,用户更关心 商品及折扣本身 After: 调整后将氛围的 营造和类目图片
相结合,很好的 解决了氛围和内 容的关系问题
1.3 分析信息优先级 吸引用户 (3-5s) 帮助理解 (3-5m) 详细了解 (更多时间)
1 1 2 3
1.4 分析用户核心行为
None
信息 优先级 用户行为 优先级
1 1 2 3 头像 人名 公司信息 对话信息 具体内容优先级确认
建立信息层级的视觉方法 2
2.1 位置 两条规律 最佳视域 水平不垂直
33% 28% 23% 16% 当眼睛偏离视中心时, 在偏离距离相等的情况 下,人眼对左上的观察 最优,依次为右上,左 下,而右下最差。因此, 左上部和上中部被称为
“最佳视域”。 用户对丌同位置的关注度差别
56% 44% 61% 39% 左右的关注度差别要小于上下关注度差别。如想要体现幵列的关系, 左右排列会更合适;而如果要拉开差距,上下排列更容易达到目标。
98%
60%
首屏 用户优先关注上部, 首屏的信息比拖滚出现的第二、三屏层级高。 ≈ 浏览器菜单 占用空间 768px 600px -
2.2 大小
None
1)重要的元素要大一些, 即使比例失调也可以考虑 2)要想办法表现出差距; 如果一个元素的重要性是2, 那就把它的大小做成4
None
None
None
元素 面积 细节 放大
None
2.3 距离 拉远三维距离 拉近三维距离 二维距离 对层级的影响
拉远:模糊元素
拉远:降低透明度
拉远:增加半透明图层
拉近:增加投影
格式塔心理学 接近性定律 距离较短或互相接近的部分容易组成整体; 人眼对距离临近的信息更容易先去关注, 在视觉手法应用上,元素距离上一个焦点近的,视觉层级高。
二维距离对 层级的影响
二维距离对 层级的影响
2.4 内容形式 方向性引导 符号引导 时间轴
方向性引导
None
符号引导
时间轴
2.5 色彩 先暖色 后冷色 先高反差 后低反差
优先看到 哪一个?
暖色在前进,冷色在后退
红色方案的点击率超过绿色方案21%
低反差(保护色、隐藏感)
高反差
蓝色行动点层级相对较弱,绿色行动点层级变高
总 结
李雅丽 UI Designer @UED Team * 演讲中所引用的素材来自网络