【青训营】- 前端只是切图仔?来学学给开发人看的UI设计(下)

简介: 于开发人来说,不单单要会写代码,有良好的用户体验思想也是非常重要的。毕竟,开发完的内容是要给用户来使用的,而不是自己随心所欲觉得哪里想添加个内容就哪里添加。因此呢,在下面的这篇文章中,将学习给开发人看的 UI 设计。一起来了解吧~

3. 文字


(1)文字的定义

文本是站点的主要内容载体;字体设计自然也是重中之重。

既然我们在讲设计体系,以一致性为目标。那么同样地,我们也要把站点所使用的字号字重等范围框定在数十个选项中。

数十个是个 magic number,大部分情况下应该都能满足。只要场景够特殊,特殊字体完全可以再加。


(2)文字的一些规范

1)文字——选项设计

相比于间距设计,字号大小我们有一个明显的适合阅读的字号范围,如 12 ~ 20px 。那么我们会更多在这个范围内设置字体选项。

来看下选项设计的10大范围,如下图所示:

1.png

但是呢,仅通过字号来设置层级,很快就会捉襟见肘。因此我们要结合字重 & 颜色(灰度),你会更加地游刃有余。

字重是 css 自带的,用好常用的 3、4 个尺度就好了。

来看一个例子:

23.png

大家可以看到,在右边的这张图当中,我们适当的使用了字重和颜色,以使得页面的内容更突出,内容更为饱和。

2)文字——对齐

不同字号大小的字体间如何对齐呢?我们应该要基于 baseline 对齐,就是文本的下边缘

baseline 是一个字符的重心;重心对齐了,用户在移动视线时就能有平稳的阅读体验

来看一个例子:

24.png

3)文字——行高

基本上,对于所有的文本设计来说,其意图都是为了保持良好的阅读体验,那么行高也不例外。

具体到设计哲学,就是:行高和字号大小大致成反比,目标是用户在视线换行时有稳定的下移体验。

25.png


4. 色彩

现在,到颜色部分了,谁不爱颜色呢?同样地,与上面一样的归纳步骤,我们来对颜色进行一个归纳。


(1)颜色选项——灰色

在你的色彩库中,应该要有10种左右的灰色来提供使用,并且这些颜色从文字到背景都用得上。如下图所示:

26.png


(2)颜色选项——主题色

大部分站点都少不了一两个贯穿全局的主题色;它出现在按钮logo背景各种修饰元素之上,是品牌的记忆元素。如下图所示:

27.png


(3)颜色选项——功能色

有一些常见的颜色,被广泛地用来表达某些固定的语义信息。

红色,传达错误信息,或提示危险操作。

黄色,表示警告。

绿色,表示一些积极的变化,以示成功或增长的信息。

如下图所示:

28.png


(4)使用色盘

前面我们准备好了这么多由深入浅的颜色,那该如何使用呢?

我们可以作为前景背景色来使用。主要标题可以用最亮的白色次要标题挑一个背景颜色的浅色版本

如下图所示:

29.png


再来看另外一种用法,即浅色背景深色前景的用法。浅色色块相较于白色背景对比度不大,适合不用过于抢夺眼球的场景。如下图所示:

30.png


(5)使用颜色的注意事项

颜色虽好,但使用不当会很容易打破页面层级的平衡。来看一个例子:

31.png

还有一种情况是,色盲的用户消费不了颜色,颜色在不同的文化中可能表示不同的含义。如下图:

32.png

大家可以看到,在上面这张图中,左上角的图是我们普通用户所看到的图,而左下角的图是色盲用户所看到的图。


5. 深度


(1)例子阐述

制造深度的技巧,八成与阴影设计有关。

深度补充了间距,从另一个维度上体现了层级。这是为什么?

这种深度的感官来自日常生活。平时我们是怎么感受平面上的深度的?答案是:自上而下的光照打

在平面上所造成的阴影。模拟这个现象,我们便可以实现网页元素的「深度」体验。

来看一个例子:

33.png

大家可以看到,在上面的这张图中,它的的光就是自上而下的光照打


(2)阴影选项

下面我们来看一些常见的阴影选项。如下图所示:

34.png

看了上面的一些常见选项后,我们现在来梳理各种大小的阴影所造成的影响。具体如下:

  • 小的阴影可以使元素略微突出,但不至于抢夺眼球。
  • 中等阴影适用于小型弹出的模块,如下拉框。
  • 最深的阴影则用于彻底地将模块与页面区分开来的场景。

如下所示:

35.png


🐾五、实用技巧


1. 图片上的层级


如果我们遇到图片上的色块斑驳不一难以找到合适的前景色。这个时候我们应该咋办哩?

比如下面这张图:

36.png

下面我们来介绍解决这种问题的几种方法。


(1)增加蒙层

我们可以通过增加蒙层,来显示图片的层级。如下图所示:

37.png


(2)给文字加阴影

除此之外呢,你可以选择给文字加上阴影。 css 可以轻松地做到,只增加文字部分的对比度,而不影响整张图片的阅读体验。

如下图所示:

38.png


2. 用户头像

不管是在什么样的 app ,我们基本上都有上传图片的环节。那么,如何使得在任何的情况下,都能够清晰地展示用户头像里面的内容会是一个问题。

我们先来看这张图:

39.png

大家可以看到,在上面的这张图中,有一些用户头像出现了空白,这样间接地会使得我们不清楚整个用户头像实际上的尺寸是多少。

由小伙伴可能会首先想到,加个 border 。但加个 border 呢,又有点差强人意了,不一定能搭配好。

有个好方法就是,加点内阴影。相当于圈用户头像的外层做边框,这就非常精巧了。

40.png


3. 强调线

有时候,我们会很喜欢把表格类的设计给加上一些边框和分界线,但是这似乎看起来 a little 土。如下左图所示:

41.png

大家可以看到,加了边框,就很像传统的 table 一样,有一点点不美观。

所以呢,如上边右图一样,我们可以用阴影或者不同的背景块来代替边框。这样,间距其实也就清晰了,所以我们也就不需要什么分界线了。


🖌️六、资源


1. 译作推荐


在上面的这篇文章中,大部分内容来自于下面这篇译作。想深入了解的同学可以进一步观看。

给开发看的 UI 设计 · 语雀


2. 书籍推荐

前面我们也稍微提到过这本书,这里推荐给大家👉写给大家看的设计书(第4版) (豆瓣)


3. tailwindcss

tailwindutility class 设计,深度实践了本文所讲的设计体系。

它的官网里面还有很多设计资源👉taildinwcss 设计框架,大家可以进一步学习查看。

同时呢,小伙伴们还可以了解来自 tailwind 作者的著作,Refactoring UI,它是本文的基础。


⛱️七、结束语


在上面的文章中,我们讲到了 UI 设计与前端的关系,同时呢,还讲到了设计中的一些功能导向,以及设计原则,设计体系。最后,我们还讲到了处理图片和表格的一些实用性技巧。

到这里,关于给开发人看的 UI 设计讲解就结束啦!希望对大家有帮助~


相关文章
|
19天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
2月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
126 3
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
92 8
|
2月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
66 1
|
2月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
3月前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
131 0
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
154 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0
|
2月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。