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

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

1.png🖼️序言


对于开发人来说,不单单要会写代码,有良好的用户体验思想也是非常重要的。毕竟,开发完的内容是要给用户来使用的,而不是自己随心所欲觉得哪里想添加个内容就哪里添加。

因此呢,在下面的这篇文章中,将学习给开发人看的 UI 设计。一起来了解吧~


🎨 一、背景


在讲解本文之前,先给大家抛个问题:前端为何要学习基本的 UI 设计原则和实践套路呢?


1. 想做一个好的作品

  • 入行前端的同学,有不少小伙伴是被其「所见即所得」的开发体验所吸引;此外,就是能够开发一款自己有用、爱用的应用出来,并分享给其他人使用。
  • 而现在市面上,已经有足够多的课程,能够让前端以「全栈」的姿态独立开发一款能用的产品出来。但当页面模块变得复杂起来时,仅仅依赖一些 UI 组件库,已经不能让产品维持在「好用」的状态。
  • 追求极致的「全栈」定义,或许应当包含「设计」的角色。


2. 没有专业UI

  • 你的团队里可能会有 UI 角色,但不一定专业;
  • UI 给出的设计稿,许多时候只是静态的、仅体现某一交互切面的;
  • 很多交互体验细节,只有在前端摆弄一个 Button 的位置和多场景状态时,才能被捕捉到;
  • 在大厂里,许多 B 端产品时没有专职 UI 的角色的;前端可能要对产品最终呈现出的形态负责。


🧵二、功能导向


1. 设计中最重要的事


功能导向可以说是设计中最重要的事了,可以说,把功能做好,或许是最重要的设计原则。


2. 例子阐述


我们来看一个例子:

下面先看 Google 近20年来首页的变迁,从左到右,分别是1998、2005、2015年,如下图所示:

2.png

现在,我们来看2021年的,如下图所示:

3.png

大家可以看到,从一开始的内容堆叠,到最后的只显示一个搜索框,把用户最想要的内容显示出来了。或许,这就是功能导向的一个典型例子。


2. 简约设计


有了功能基础之后,我们就可以来画原型了,那么这里我想要介绍的是一些简单的创作工具。

我们可以选择像纸、笔或者excalidraw这样可以立刻上手的工具是比较好的。糙一点的设计笔触可以让你不会过于追求完美,或者说是过于「追求设计」。

我们应该要迅速把框架搭好了,设计细节可以后面再补充。说白了,「功能优先」始终贯穿在设计 & 开发流程中。

当然,你也可以使用如 figmaAxure 之类的更专业的原型设计工具。但作为开发,建议先使用最基本的笔触和组件,克制使用颜色设计简单的、完整的功能优先关注功能。

4.png


3. 设计简单的、完整的功能


我们在进行功能设计时,要先以 MVP 版本功能来作为设计目标。所谓 MVP ,即 Minimum Viable Product ,即最简化可实行产品。

我们来看一个例子:

  • 一个联系人列表,是否要考虑超过 2000人的展示情况?如何优化交互?
  • 数据不存在时,根据不同的错误情况,应该如何准备错误信息展示,和用户引导?
  • 一个图片上传模块,其复制粘贴、拖拽、 点击选择文件上传,这些路径是否 MVP 版本都要做,是否都要先做好布局和引导设计?
  • 在开局期间,我们要时刻提醒自己,优先把用户关键路径上的主流场景设计完成,迅速迭代其基本具有的能力。
  • 这就好比开发一个游戏,我们总想着游戏各种花式的玩法。但我们在开发前应该先考虑的点是,如何先让游戏开始,这就是最简单的功能。让游戏开始了,我们才能给后面的内容迭代和升级。

来看一个留言功能,如下图所示:

5.png

大家可以看到,短短几句话,简明扼要的概括出来最完整的功能,把 MVP 的内容给体现出来了。


🧶三、设计原则


1. 层级


(1)层级是什么

  • 层级,是你可能唯一需要关心的原则。
  • 一个产品要好用,就要让用户很容易地,抓到产品重点
  • 在重点里,用户能自在地进入沉浸式阅读、和使用的状态;
  • 当用户想探索其他内容时,ta 能轻松地识别网站的次要板块还有哪些,焦点能迅速转移,并迅速沉浸;
  • 辅助提示信息,精确而又不会打扰各主要模块的呈现。


(2)举例阐述

比如,大家可以来看下面这两个网站。你觉得那张图片展示了更好的阅读体验呢?

6.png

7.png

相信很多小伙伴内心的答案都是第二张图片。在第一张图片当中,内容没有怎么体现出分层,而是一整张图片黑黑白白的,也不知道哪里是重点。而在第二章图片中,明显上面蓝色方框内的内容第一眼就抓住了用户的眼球,很清晰的让用户了解到这张图的用意在哪。

所以你说,哪一张的阅读体验更好呢?


2. 一致性


(1)定义

所谓一致性,指的是用户在站点的各个角落,观察到颜色、间距、阴影、位置、字体和字重的应用,且都在一套有限的框架里,一套能够迅速建立亲切感的框架内。

什么意思呢?


(2)举例阐述

以飞书文档为例,我们来进行一个说明:

当页面中,主要的交互视觉元素都采用同一主题色(图中为蓝色)来表示时,用户可以迅速知道:

  • 页面中有哪些元素是可交互的
  • 我需要的提示信息在哪

8.png


再比如下面这张图:

9.png

在这张图中,表单中 label 和输入框之间、以及输入项之间有序且固定的间距,可以帮助用户迅速识别当前填写的表单项是什么内容、以及稳定地将视线移动到下一个表单项上。


(3)总结

通过上面的例子,相信大家对设计的一致性也有了一定的了解。

所以,能否克制,且重复精确地运用着拟定好的设计体系,会在方方面面上影响着一个站点的质感,同时这也是体现专业性的考量

看下面这张图:

10.png


3. 番外 - 《写给大家看的设计书》

这里给大家补充一本书 ——《写给大家看的设计书》,这本书应该是不少人的设计启蒙书。

在这里,我简单介绍下《写给大家看的设计书》四大原则:

  • 对比: 如果两个元素内涵不同,请让它们截然相同;
  • 重复: 设计的视觉要素应当在整个作品中重复出现;
  • 亲密性: 彼此关联的元素应当靠近和放置在一起;
  • 对齐: 任何元素都不能随意安放,应当总是与另外至少一个元素有视觉上的关联。

11.png


这四大原则,就与前面我们总结的两大原则相呼应上了。来看下具体的关联:

  • 层级,就是亲密性+对比的目标。让用户抓重点、切视线,又快又稳。
  • 一致性,就是对齐+重复,克制用户视线所感受的尺度,迅速与网站设计语言建立熟悉感。

书中还有更多关于四原则的解释和其他排版设计的技巧,这里也推荐给大家延伸阅读。


🧷四、设计体系


1. 布局


(1)居中放

我们先来介绍一个最基本的布局技巧,内容居中放。

如果你是遵循「功能导向」,边开发基础能力边设计迭代的开发过程,那么前期你的功能应当是比较简单的。单列式的居中布局,应该能满足你的需求。

比如像下面这样:

12.png

很多场景下,居中放也是很有意义的。除非大屏浏览是你的核心场景,不然一般来说,你的内容宽度应该在 600 ~ 800px 之间,类似一本书的宽度。

像下面这:

13.png


(2)多列布局

多列布局的核心也是保持内容的一个合适宽度维持可读性

一般规则是:主要内容列弹性收缩(可以有最小宽度),次要列固定宽度。

如下图所示:

14.png


2. 间距


(1)间距的定义

保证元素间有基本的间距,是最基本的设计技巧。

如下图所示:

15.png


(2)间距的一些规范

现在我们来看一些关于间距的规范。

1)间距——选项

基于 4px 的倍数,设计出数十种间距的选项。如下图所示:

16.png

现在,我们来说明一下这十种设计选项的一些具体内容:

  • 设计体系,除了满足「一致性」原则以外,它同时也是帮设计者提前设计好选项
  • 有了这些选项,我们在具体场景中可以逐个尝试,来试出最优解
  • 比起每次都拍脑门决策,现在变成在选项里调优,能极大地加快设计的步伐

来看一个 button 的例子:

17.png

18.png大家可以看到,我们把图标以 4px 的倍数进行增长,慢慢地变得越来越饱和,越来越好看。基于 4px 的选项,我们是不是就更加加快了我们的设计步伐了呢。


观察这数十种间距的选项,我们可以发现这是一个类似指数增长的图表📈。这是因为两个相邻间距,在大尺度上,要比小尺度里拉的更开,才能在视线里体现出间距的差距

我们用一张图来比较一下大小尺度里的区别:


大家先看左边的内容,在小尺度里, 4px 的差距就是 20% 的增幅;再看右边的内容,右图 500px 的尺度中, 20px 的增长只有提升 4% 的效果。

2)间距——多留白些

这是一个间距设计技巧:安排元素时建议先大大的留空,也就是「从松到紧」来调试间距。如下图所示:

19.png


我们来对上面这组图进行一个比较。

由紧到松类型👇

先来看一张图:

20.png

这张图是由紧到松,那么你的思维是「尝试把无关的元素拉开」,而且是「从整体到局部」的 方向,这就不太好操作。

举个例子:

你想先拉开每个段落间距 10px,再调段落内标题与内容的间距 4px,但发现拉的不够开;这时要回过头将段落间间距拉到 20px,这样段落内才好安排 10px 的间距……

由松到紧类型👇

先来看一张图:

1.png

由松到紧,这就简单一些:关注的是「哪些元素相关」,把它们拉在一起,然后是「从局部到整体」调优。

一般来说,偏松也比偏紧好。从一开始就留些空间吧。

3)间距——表达关联关系

  • 除了方便阅读,间距也是最合适表达关联关系的工具。
  • 如下图所示,图中的间距差异设计,表明了每个章节的起点,以及标题与段落的关联性

21.png

  • 同时,如下图所示,挨得太紧的行高和列表项间距,会让用户难以判断阅读时的停顿点在哪,当前列表项是否已经结束。
  • 间距是远比色块边框分界线之类的更适合用来表达关联关系的工具。值得多加练习运用。

22.png



相关文章
|
20天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
29天前
|
前端开发 JavaScript 安全
揭秘!前端大牛们如何高效解决跨域问题,提升开发效率!
【10月更文挑战第30天】在Web开发中,跨域问题是一大挑战。本文介绍前端大牛们常用的跨域解决方案,包括JSONP、CORS、postMessage和Nginx/Node.js代理,对比它们的优缺点,帮助初学者提升开发效率。
53 4
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
94 8
|
2月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
67 1
|
2月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
|
2月前
|
人工智能 前端开发 测试技术
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
本文介绍了 GPT-4 如何成为前端开发者的“神队友”,让开发变得更加高效愉快。无论是需求到代码的自动生成、快速调试和性能优化,还是自动化测试和技术选型,GPT-4 都能提供极大的帮助。通过智能生成代码、捕捉 BUG、优化性能、自动化测试生成以及技术支持,GPT-4 成为开发者不可或缺的工具,帮助他们从繁重的手动任务中解脱出来,专注于创新和创意。GPT-4 正在彻底改变开发流程,让开发者从“辛苦码农”转变为“效率王者”。
38 0
探索前端与 AI 的结合:如何用 GPT-4 助力开发效率
|
2月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
133 0
|
2月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
32 0
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
156 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
45 0