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
MIMEと文字コードの闇
hirachan
2
1.4k
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
110
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.4k
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.8k
Охота на косуль у древних
ashapiro
0
120
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
200
2025/3/1 公共交通オープンデータデイ2025
morohoshi
0
100
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1k
わたしがEMとして入社した「最初の100日」の過ごし方 / EMConfJp2025
daiksy
14
5.3k
クラウド食堂とは?
hiyanger
0
120
JAWS FESTA 2024「バスロケ」GPS×サーバーレスの開発と運用の舞台裏/jawsfesta2024-bus-gps-serverless
ma2shita
3
270
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
A Tale of Four Properties
chriscoyier
158
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
We Have a Design System, Now What?
morganepeng
51
7.4k
Optimizing for Happiness
mojombo
376
70k
Navigating Team Friction
lara
183
15k
Adopting Sorbet at Scale
ufuk
74
9.2k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
260
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
51k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
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 * 演讲中所引用的素材来自网络