前端也要学习基本的UI设计原则与实践套路

简介: 有的人可能说,我是技术研发人员,UI的事情我们团队内会有别的人去操心这个,我只管技术即可。在一天之前,我也是这么觉得的,但是我前些日子听了字节的《给开发看的UI设计》这节课后,觉得一个前端工程师也是要具备一定的UI设计能力的。依赖市面上的组件库已经不能让产品维持在好用的状态了,还需要将一些设计元素添加进去,才能让我们开发的作品,达到一个更好的层次,给与用户最好的体验。你的团队可能没有UI同学,也可能有UI同学,但是不一定专业,他们经常会是外包人员,UI给出的设计稿通常只是静态文件,是某一交互切面的,很多的交互细节都体现不出来,在大厂中,许多的B端产品是没有专职UI角色的,前端可能要

前言

有的人可能说,我是技术研发人员,UI的事情我们团队内会有别的人去操心这个,我只管技术即可。

在一天之前,我也是这么觉得的,但是我前些日子听了字节的《给开发看的UI设计》这节课后,觉得一个前端工程师也是要具备一定的UI设计能力的。

依赖市面上的组件库已经不能让产品维持在好用的状态了,还需要将一些设计元素添加进去,才能让我们开发的作品,达到一个更好的层次,给与用户最好的体验。

你的团队可能没有UI同学,也可能有UI同学,但是不一定专业,他们经常会是外包人员,UI给出的设计稿通常只是静态文件,是某一交互切面的,很多的交互细节都体现不出来,在大厂中,许多的B端产品是没有专职UI角色的,前端可能要对产品最终呈现出的形态负责。

设计中最重要的事情------交付功能

工具:最好用的白板------excaildraw

我们只需要简单粗略的设计大框就可以,设计细节可以后面在补充,在设计UI的时候永远不要忘了,我们归根结底还是要以实现需求,功能优先。

可以使用别的设计工具去画原型图(figma),但是我觉得作为开发人员,简简单单的就可以,一切以方便为主

要设计简单的、完整的功能

以MVP版本功能来作为设计目标

  • MVP:Minimum Viable Product,最简化可实行产品

所谓先让游戏开始,我们开发在做设计的时候,优先把主要场景设计完成,有迅速迭代能力就可以了,正所谓不需要太多花里胡哨,保持结构简单,功能完整就好。

设计原则

设计原则------层级

层级------是我们可能唯一要关心的原则

层级区分,更是我们最需要掌握的原则和技巧。

  • 一个产品要好用,就要让用户很容易的抓住展品重点
  • 在重点里,用户能自在地进入沉浸式阅读,和使用的转台
  • 当用户想探索其他内容时,ta能轻松的识别网站的次要板块还有哪些,焦点能迅速转义,并迅速沉浸
  • 辅助提示信息,精确而又不会打扰各主要板块的呈现

设计原则------一致性

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

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

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

设计原则------《写给大家看的设计书》

简单介绍一下《写给大家看的设计书》四原则:

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

这四个原则其实就对应着上面的一致性和层级。

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

设计体系

设计体系------布局

最基本的布局技巧,内容居中放。

多列布局:

  • 主要内容弹性收缩(可以有最小宽度),次要列固定宽度

设计体系------间距

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

间距------多留白

这是一个技巧:安排元素时先大大的留空,要从松到紧的调试间距。

间距是远比色块、边框、分界线之类的更适合用来表达关联关系的工具。值得多加练习运用。

设计体系------文字

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

设计体系------色彩

谁人不喜色彩?

你选择的色彩库要有10种左右的灰色度供你使用(黑-->白),要有主题色,功能色等。

要学会使用色盘,来微调,使得你的颜色对用户使用的影响更好

注意事项:

  • 颜色虽好,使用不当会打破页面层级平衡
  • 色盲消费不了颜色
  • 颜色在不同文化中可能有不同的含义

设计体系------深度

深度的感官来源于生活,类似于光照的效果,来打造一种层级。

就是我们常用的阴影感

实用技巧

实用技巧------图片上的层级

图片上的色块斑驳不一,难以找到合适的前景色。咋办?

  • 增加蒙层,对比度不就上来了。
  • 可以给文字加上阴影,增加文字部分的对比度,不影响整张图片。

实用技巧------明晰的用户头像

上传头像的场景,如何清晰的展示内容?

  • 加点内阴影

实用技巧------干掉分界线

阴影可以替代边框,不通的背景色块也可以。

间距清晰的话,也就不需要分界线了。

最后

听完了这节课真的觉得挺有用的,虽然说讲的是设计理念,没有一丝css代码在其中,可是我觉得我的css能力上升了一个层面~

最后留下这份笔记,留给以后的自己进行梳理,也顺便分享出来给更多的前端小伙伴们,让更多之前与我一样的人了解到,前端也要懂UI。

相关文章
|
1月前
|
缓存 前端开发 JavaScript
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
|
15天前
|
编解码 前端开发 开发者
探索无界:前端开发中的响应式设计深度实践与思考###
本文将带你领略响应式设计的精髓,一种超越传统页面布局限制的设计策略,它要求开发者以灵活多变的思维,打造能够无缝适应各种设备与屏幕尺寸的Web体验。通过深入浅出的讲解、实际案例分析以及技术实现细节的探讨,本文目的是激发读者对于响应式设计深层次的理解与兴趣,鼓励在实际应用中不断创新与优化。 ###
60 10
|
29天前
|
编解码 前端开发 开发者
前端开发中的响应式设计实践
前端开发中的响应式设计实践
|
1月前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
64 4
|
1月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
49 4
|
26天前
|
编解码 前端开发 UED
探索无界:前端开发中的响应式设计哲学与实践####
本文不拘泥于传统摘要的框架,而是以一种对话的方式,引领读者踏入响应式设计的奇妙世界。想象一下,互联网如同一片浩瀚的海洋,而网页则是航行其中的船只。在这片不断变化的海域中,如何让我们的“船只”既稳固又灵活地适应各种屏幕尺寸和设备?这正是响应式设计的魅力所在。通过深入浅出的探讨,我们将一同揭开它背后的哲学思想与实战技巧,让你的网页在任何设备上都能展现出最佳姿态。 ####
21 0
|
29天前
|
前端开发 JavaScript API
现代前端框架中的响应式编程实践
现代前端框架中的响应式编程实践
36 0
|
2月前
|
人工智能 资源调度 数据可视化
【AI应用落地实战】智能文档处理本地部署——可视化文档解析前端TextIn ParseX实践
2024长沙·中国1024程序员节以“智能应用新生态”为主题,吸引了众多技术大咖。合合信息展示了“智能文档处理百宝箱”的三大工具:可视化文档解析前端TextIn ParseX、向量化acge-embedding模型和文档解析测评工具markdown_tester,助力智能文档处理与知识管理。
|
2月前
|
小程序 开发者 UED
支付宝小程序UI/UX设计原则与最佳实践
支付宝小程序UI/UX设计原则与最佳实践
92 6
|
1月前
|
缓存 监控 前端开发
前端开发中的性能优化:策略与实践
前端开发中的性能优化:策略与实践