浅谈UI强调

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极简主义样式

待补充

WordPress使用笔记

*一些形式记法:     1.字符实体的表示均只显示其代号部分。       #1.写博客文章时的语法     在WordPress主界面侧边栏/文章/写文章/「文本」区域中打字写作时,

1.使网页正确显示空格     WordPress以html格式保存写作内容,所以任何位于一段文本首尾的空格在保存发布后都会被删去。要使网页显示这些空格,使用字符实体空格;或使用段落样式文本首行缩进。     半字符宽空格:ensp    (en-space)     全字符宽空格:emsp    (em-space)
2.使网页正确显示换行     WordPress在保存写作内容为html时,会将任意连续的<br>删减为一个,所以无法使用多个<br>来添加多行。要使网页显示多个换行,使用字符实体非断行空格(仅在WP中被编译为新行,在html中这就是个普通空格);或在<br>和<br>间插入空格字符。显然第一种更简单。     非断行空格:nbsp    (no-break-space)
3.在定义了样式的段落中换行     WordPress将文本中的回车换行编译为一个新的<p>。要在内容中换行且不脱离已定义的段落样式,在回车换行处使用<br>连接。

我的第一篇博客文章

欢迎来到嘎三胡,这是我的第一篇博客文章。

前些天刚刚把网站搭建好,今天很初步的编辑、美化了下网站首页和结构。虽然还在为全站结构规划中,不过觉得无论如何先写一篇博文,给自己营造一种我的网站建设有进度推进的幻觉。

说实话一时也想不到有什么好写的东西,就先瞎聊聊吧。(毕竟这个网站“嘎三胡”就是瞎聊聊的意思嘛哈哈)

先谈谈想要开个博客的初衷吧,其实有点惭愧,是要为自己在浑浑噩噩的度日中挣扎一把。

我这人吧自小就比较孤僻冷漠,自卑悲观,或许是受成长的背景所影响。小时候家里管教严,放不开说话做事;后来家里富裕了,爸妈又一下子强将我送到更上层的人群环境中,我就总是有种疏离感,难以融入。彼时还是中学时期,心智也不成熟,不会处理这种负面情绪,可能慢慢就形成了一种负性信念。令人难受的是,我这颗聪明的脑袋,在理性上能深刻认识自己的问题,但感性上又总无法贯彻行动。每天拉拉扯扯纠纠结结,持续躺尸,偶尔诈起。日子就这样浑浑噩噩地混过来了,幸而在某一次的挣扎下,突然下了决心要给自己建个博客。

乘着这股冲动的劲,周末在学校找了个空教室,花了一整天,从网上搜集教程,买域名、买主机到WordPress建站,一气呵成,畅快淋漓。初入门难,等这一套都完成下来,似乎也就那么一回事,想来日后可以作一篇文章总结下建站流程,既是干货技术指导,还能充个文章数,甚好。

文章估计不会更地太勤,毕竟上海人嘛讲个“腔调”,不能什么乱七八糟的都往上贴对吧。那显然不是因为人懒。
其实初中毕业后,基本上我就没怎么正经写过作文了,所以文笔这东西,我姑且这么一写,大家也就随意这么一看。当然有功夫我一定还是多练习提升的。

再聊聊我对网站初步的设计吧。目前完整的总规划并没有,但是主页的菜单结构是确定了的,将来应该也不会改。主页菜单项中:主页,即回到主页;文章,即博客文章部分;专栏,系列文章;资源,是我收集的文档、文件、链接之类乱七八糟的资源,作存取与分享之用;工作室,测试自己写的各种程序的地方。

来访的朋友都是我胡某人的贵宾,欢迎瞎聊。

搭嘎一道嘎三胡,呀嘿~