不会设计没关系!看看这七个实用的网页UI设计小技巧!

2023-10-09 21:40

本文主要是介绍不会设计没关系!看看这七个实用的网页UI设计小技巧!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在微博看到别人转发的这篇文章,里面的每一点都觉得非常实用,就决定翻译一下,也算是给自己存个档,加深一下印象。毕竟作为一个前端页面仔,页面UI的美化也是我们的工作,而且还会经常会被要求在页面上加个这个或者加个那个,没有设计稿直接整页面也是常有的事,了解一些UI设计的基本法则还是很有必要滴~
原文链接>>>


不管喜不喜欢,每个网页开发者总是会无法避免的要面对一些视觉设计上的决策。
可能你的公司没有一个全职的设计师,你得自己随机应变一些功能上的UI设计,又或者是你可能在做自己的项目,不想让他看起来太像'另外一个Bootstrap网站'。

这时候你可能会干脆摆摆手说:“反正我永远也做不好,我又不是设计师。”但其实有很多小技巧可以提升你的项目的设计感,并且不需要你有图形设计的背景知识。

下面给大家介绍一些能够立马提升你的设计的小技巧:

使用字体的颜色和粗细来区分等级 而不是字体大小

图片描述

在做UI设计的时候有一个经常会犯的错误就是过度依赖字号大小来对文字进行级别的区分:
“这个文字重要?那就让它大一点”
“这个文字次要?那就让它小一点”
与其让字号大小承担这么多的工作,不如试试用字体粗细和颜色来做同样的事:
“这个文字重要?那就让它粗一点”
“这个文字次要?那就让它颜色浅一点”
尽量保持在2-3种颜色:

  • 用深色(不是黑色)来表示首要的内容,例如文章的标题。
  • 用更浅的灰色来表示辅助文本,例如页脚的版权信息等等。

图片描述

同样的,两种字体粗细对于UI界面来说足够了。

  • 大多数文本使用正常字体粗细(400或500,具体取决于字体)
  • 重点强调的文本使用更粗一些的字体(600或者700)

图片描述

注意,不要使用400以下的字体粗细,因为它只有在较大的字号如标题这种才有效果,在小号字体上表现的非常不明显,如果你想用更细的字来表示更次要的文本,可以使用更浅的颜色或者小一号的字体大小。

不要在彩色背景上使用灰色字体

图片描述

在白色背景下使用较浅一些的灰色来表示次要文本是一种不错的选择,但是在有颜色的背景下就不太好了。这是因为我们实际看到的灰色在白色背景下的效果是降低对比度。
要想视觉上让文本的呈现次要等级效果,应该要让文字颜色更接近背景色,而不是用灰色,以达到降低对比度的效果。
图片描述

在彩色背景下,你可以采用一下两种方式来降低对比度:

  • 降低白色字的透明度 - 适当降低字的透明度,让背景颜色稍微渗透一些,这样即达到了弱化的效果又不会与背景相互冲突。
    图片描述
  • 手动选择一个接近背景颜色的字体颜色 - 当你的背景是图形或者图片的时候,这种方式比用透明度要好,因为透明度看起来会更死板像是褪色的感觉。选择一个跟背景色的色调相同的颜色,调整饱和度和明度直到你觉得合适为止。
    图片描述

设置阴影偏移

图片描述
与其用大块的阴影模糊去强调盒子,不如使用垂直方向上的偏移量。它看起来会更加的自然,因为它模拟的是灯光从上往下照射在物体上的投射,更接近我们在现实中看到的场景。
这个小技巧同样也适用于input。
图片描述
如果你想了解更多关于阴影设计的东西,可以看看 Material Design Guidelines。

少用点边框

图片描述
当你想要在两个区块之间做分隔的时候,不要第一时间就想着用边框。当然,边框确实是很好的用来分割的方式,但是它不是唯一的方式啊,过多的使用边框会让你的设计看起来杂乱。
下次当你想用边框的时候,不妨试试下面这几个:

  • 使用盒子阴影 - 盒子阴影实现的效果和边框基本相同,但是它呈现的效果会更微妙一些,没有边框那么让人分心。
    图片描述
  • 用两种不同的背景色 - 只要给元素稍微加一点背景颜色的不同,就能呈现分割的效果了,你可以尝试去掉两个不同背景色之间的边框,其实根本不需要呢。
    图片描述
  • 增加额外空间 - 还有什么比给元素之间增加空间更能体现分隔效果的呢?制造一点空间让元素互相远离,就能很好的达到分隔效果,也不需要引入其他的UI元素。
    图片描述

不要把小图标放大

图片描述
当你在某个地方需要用到大的图标的时候(比如登录页的功能部分),你可能立马就去用免费的字体图标库如 Font Awesome 之类的,然后调整字号大小,达到你需要的效果。
但是,它们毕竟是矢量图像啊,当你放大了之后,质量不会下降吗。
当然,矢量图像即便是被放大也不会影响图像质量,但是 实际大小为16–24px的图标被放大3-4px之后,看上去会非常的不专业,缺乏细节,看上去十分笨重
图片描述
如果你只有小号的图标,可以把它包裹在一个有背景色的大色块里面,这样既不影响图标的显示效果,又能占据更大的空间。
图片描述
如果你有足够的预算,也可以使用一些额外收费的图标,比如 Heroicons 或者 Iconic。

使用鲜明的边框为平淡的设计增添色彩

图片描述
如果你不是专业的设计师,你的界面也没有也很平淡,没有优美的插图或者照片来装饰,如何为页面增添一点风味呢?
有一个效果很显著的小技巧就是为简单的页面添加粗重的边框,这样可以减少页面的乏味感。
举个栗子,比如下面这个警告条:
图片描述
再举个栗子,高亮导航栏元素:
图片描述
再再再举个栗子,为整个页面都加一个边框:
图片描述
这种方式不需要你有什么设计就能改善页面UI,让页面看起来更有设计感。
如果你不知道如何选择颜色,网上也有很多色系搭配方案可供选择,或者试试 Dripple的颜色选择,让你从传统颜色选择器无穷无尽的可能中解脱出来。

不是所有的按钮都需要背景色

图片描述
当一个页面上有很多需要用户操作的按钮时,很容易就陷入一种错误,就是完全根据语义来设计这些操作按钮的颜色。
Bootsrap框架从某种程度上鼓励了这种行为,当你引入一个button的时候,有一排不同语义的不同颜色的按钮供你选择。
图片描述
“这是一个积极的操作?用绿色按钮。”
“这个操作是删除数据?用红色按钮。”
诚然,语义也是按钮设计中必不可少的一个因素,但还有另外一个维度却被忽略了,那就是层级。
在一个页面的里面,操作按钮的层级就像金字塔一样分布,有一个最高级别的操作,和一些次要操作,以及一些不怎么使用的三次操作。操作的层级在设计按钮的时候必须明显的体现出来:

  • 首要操作必须明显 - 高对比度的背景颜色适用于这里。
  • 次要操作应该表现清晰但不用太突出- 边框样式或者低对比度的背景色适用于这里。
  • 三级次要操作应该是可被发现但不引人注目的 - 把这些操作当成 link链接的样式来处理会比较好。

图片描述

“那如果是销毁操作呢?难道不应该用红色吗?”
不一定噢!如果不是首要操作,就不需要用红色背景,用次要操作的样式即可。
图片描述
只有当销毁操作是当前首要操作的时候采用高对比度的红色背景样式,比如弹出对话框的确认取消按钮。
图片描述


怎么样,是不是看完了之后和我一样觉得很有收获捏?~( ̄▽ ̄)~*

这篇关于不会设计没关系!看看这七个实用的网页UI设计小技巧!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/175735

相关文章

快速修复一个Panic的Linux内核的技巧

《快速修复一个Panic的Linux内核的技巧》Linux系统中运行了不当的mkinitcpio操作导致内核文件不能正常工作,重启的时候,内核启动中止于Panic状态,该怎么解决这个问题呢?下面我们就... 感谢China编程(www.chinasem.cn)网友 鸢一雨音 的投稿写这篇文章是有原因的。为了配置完

python获取网页表格的多种方法汇总

《python获取网页表格的多种方法汇总》我们在网页上看到很多的表格,如果要获取里面的数据或者转化成其他格式,就需要将表格获取下来并进行整理,在Python中,获取网页表格的方法有多种,下面就跟随小编... 目录1. 使用Pandas的read_html2. 使用BeautifulSoup和pandas3.

Python ZIP文件操作技巧详解

《PythonZIP文件操作技巧详解》在数据处理和系统开发中,ZIP文件操作是开发者必须掌握的核心技能,Python标准库提供的zipfile模块以简洁的API和跨平台特性,成为处理ZIP文件的首选... 目录一、ZIP文件操作基础三板斧1.1 创建压缩包1.2 解压操作1.3 文件遍历与信息获取二、进阶技

Java字符串操作技巧之语法、示例与应用场景分析

《Java字符串操作技巧之语法、示例与应用场景分析》在Java算法题和日常开发中,字符串处理是必备的核心技能,本文全面梳理Java中字符串的常用操作语法,结合代码示例、应用场景和避坑指南,可快速掌握字... 目录引言1. 基础操作1.1 创建字符串1.2 获取长度1.3 访问字符2. 字符串处理2.1 子字

Java Optional的使用技巧与最佳实践

《JavaOptional的使用技巧与最佳实践》在Java中,Optional是用于优雅处理null的容器类,其核心目标是显式提醒开发者处理空值场景,避免NullPointerExce... 目录一、Optional 的核心用途二、使用技巧与最佳实践三、常见误区与反模式四、替代方案与扩展五、总结在 Java

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

使用Python实现获取网页指定内容

《使用Python实现获取网页指定内容》在当今互联网时代,网页数据抓取是一项非常重要的技能,本文将带你从零开始学习如何使用Python获取网页中的指定内容,希望对大家有所帮助... 目录引言1. 网页抓取的基本概念2. python中的网页抓取库3. 安装必要的库4. 发送HTTP请求并获取网页内容5. 解

Python使用DrissionPage中ChromiumPage进行自动化网页操作

《Python使用DrissionPage中ChromiumPage进行自动化网页操作》DrissionPage作为一款轻量级且功能强大的浏览器自动化库,为开发者提供了丰富的功能支持,本文将使用Dri... 目录前言一、ChromiumPage基础操作1.初始化Drission 和 ChromiumPage