Tag: 前端

01. 引入

“UI强调”是我自己琢磨出来的一个概念
UI强调是指对UI元素的强调，作用是向用户传达关注点信息，包括可交互性、状态变更、响应范围等。

1. 不足强调

没有充分表达关注点信息。
不足的强调，会迫使用户自发地收集信息以确认反馈或变化，带来额外的思维负担（分散注意力）。

2. 过度强调

充分但过度表达了关注点信息。
过度的强调，会给用户造成一种花哨、聒噪感，带来额外的认知负担（消耗注意力）。

3. 适当强调

充分且点到为止的表达了关注点信息。

02. 强调信息

1. 可交互性

手形
下划线
…

2. 状态变更

字色
底色
…

3. 响应范围

底色
阴影
边框
…

03. 强调原则

我的原则是

1. 可交互性自蕴含的元素，不强调其交互性

可交互性的强调一般就是用手形。

可交互性自蕴含的元素有

• 输入框（特别地，使用 cursor: text）
• 开关
• 选框
• 树形控件
• 菜单
• 标签页
• …

1. 例外：写实风格

UI风格有很多种，我毕竟也不是设计师，不了解太多。但以个人体会来说，使用最多的当属扁平风与写实风两种。
扁平风偏性冷淡，非常干净清爽简约，突出内容。适合默认鼠标这种棱角分明、机械朋克的鼠标样式。
写实风偏生活化，拟真温暖，有一种整体充盈感。是最可能使用手形的风格。

• 圆角按钮
  圆角按钮基本可以直接视为写实风。
  对于写实按钮，交互形式给一个手形，就很符合直觉、自然舒适。
• 开关、滑块
  用手指滑动开关、滑块更加符合直觉。

2. 状态变更

元素状态变更最常见的就是鼠标悬停时，成为潜在目标。
此时应当以一些形式指示这一状态变更，最常用的就是鼠标从默认型变成手形。但在很多时候，仅这一形式指示，是不够充分引发关注的。所以还需通过一些别的形式加强强调，如字色或底色变更，但注意尽量避免字色与底色同时使用。

3. 响应范围

很多时候，元素的视觉认知范围与元素的实际响应范围是不一致的。
这样的元素在不发生交互或不获得关注的时候，并没有什么问题。但是，在交互或关注时，不一致、不确切的响应范围会给用户带来困惑。

04. 个人喜好

这里夹带一点私货，我自己对UI设计的喜好是

大扁平，小写实
这样在确保整体风格清爽简约的同时，不至于太过苍白冷淡。
整体的风格如布局、色彩、字体、图标等设计使用扁平、极简风。
个别的元素如按钮、开关、滑块等使用写实风。

05. 一些例子

1. element-ui组件

待补充

2. vscode极简主义样式

待补充