按关键词阅读：
文章图片
文章图片
文章图片
文章图片
在学习Web开发的同时 ， 我们大多数人没有太多的设计经验或与UI设计师的接触 。 因此 ， 这里有11种易于应用的UI设计基础知识 ， 可使你的项目看起来既时尚又现代 。
1、保持一致
在上半图中 ， 你可以看到图标具有不同的样式和颜色：
- 日历图标具有一些绿色和灰色轮廓 。
- 锁定图标周围有一个实心的红色圆圈 ， 白色填充 ， 没有轮廓 。
- 竖起大拇指具有黑色细轮廓和流畅的线条 。
在底部图像中 ， 图标看起来来自相同的图标集 。 它们都有一个简单的深灰色轮廓 ， 仅此而已 。 图标也具有相同的高度和宽度 。
在底部的图像中 ， 文本和图标保持左对齐 。 我也可以将文本居中 ， 然后将每个图标放在中心 。 两者都很好-一致性是关键 。
经验法则是将任何较长的表单文本（例如博客文章）左对齐 ， 因为它更易于阅读 。 对于较短的文本 ， 可以左对齐或居中 。
2、使用高质量的图片
【前端开发|方便于前端开发工程师的11个简单UI设计技巧】如果你的网站面向的人群是少儿 ， 那你可以相对的使用剪贴图 。 但是现在使用类似的东西看起来显得很low 。
可以从https://www.unsplash.com完全免费下载专业图片并在你的项目中使用 。
3、对比
如果背景较浅 ， 请使用深色文字 。 如果颜色较深 ， 请使用浅色文字 。 很简单 。 我在网站上经常看到的一个问题是 ， 很多人使用彩色图像作为带有亮点和暗点的背景 ， 然后在顶部绘制一些文字 。 通常很难阅读 。
解决方案：
- 使用图像覆盖层 ， 例如 ， 如果你使用的是浅色文本 ， 则在图像上放置深色覆盖层（使用 rgba的背景色为半透明的div） ， 并降低不透明度以使图像的外观变暗并使光亮文字更清晰 。 请记住 ， 为文本提供比覆盖图更高的z-index ， 使其位于顶部！
- 选择如上图所示的图像 ， 在该图像上有一个漂亮的一致的彩色部分来放置你的文本 。
4、空格
在顶部图像中 ， 顶部的“ SomeCompany”徽标左侧的空间少于最右侧的导航链接右侧的空间 。 在底部 ， 我们可以看到空间大致相等 。
顶部图片中的文字段落局促在距离标题和号召性用语按钮太近的位置 。 在底部 ， 它有更多的呼吸空间 。
我们还可以看到 ， 标题比徽标更接近段落 。 密切相关的东西应该靠在一起……但不要紧紧的靠在一起 。
5、视觉层次结构–大小很重要技巧4中的图像可能吸引了你的目光 。 这显然更吸引你的注意 ， 颜色也可以引起注意 ， 例如“SomeCompany”按钮 。
一个常见的错误是使导航徽标太大 ， 或者导航链接在颜色上显得过于突出 。
我们希望用户将注意力集中在内容上 ， 而不是徽标和导航链接上 。
6、一种字体就可以了！
只使用一种字体就可以了 。 无需太复杂 。 只需避免使用“ Times new Roman”（已被过度使用）和“ Comic sans”（其看起来就很奇怪！？） 。
Nunito ， Helvetica或sans serif是非常漂亮的现代字体 。
如果你的设计看起来有点无聊 ， 你仍然可以使用第二种字体作为标题 。
对于字体大小 ， 段落通常使用18px至21px 。
7、色彩和阴影
使用几种颜色 。 太多的颜色看起来很嘈杂且不专业 ， 尤其是在你不知道自己在做什么的情况下 。 把事情简单化 。
选择一种基本颜色 ， 然后使用色调（添加白色）和阴影（添加黑色）进行变化 。
然后为应该突出的区域选择一种主要的“号召性用语”颜色 。 查看“互补配色方案” 。分页标题#e#
8、圆与锐
尖角和边缘会引起您的注意 。 想一想演讲泡沫中最尖锐的部分 。
我们可以用这些知识做什么？修整按钮的角 。 你为什么要引起人们注意按钮的各个角落？
9、边框是如此
在网络的旧时代 ， 无处不在 。 如今 ， 最好不要大量使用它们-通常看起来更干净 。 边框看起来有些矫kill过正 。
显然 ， 它们不会完全成为边框 ， 它们对于分隔事物仍然很有用 。 只是不要让它们太厚和引人注意 。
10、不要在导航栏链接下划线
这是一个很老的网站 。 没有它们 ， 看起来更干净 。
在鼠标悬停和键盘焦点上加下划线/更改颜色或大小 ， 以实现辅助功能 。
你仍应在文本正文中对链接加下划线 ， 以实现良好的可访问性-这很明显它们是链接 。 只是要避免在非链接文本下划线 。
11、下载设计软件我曾经开始编写一个项目 ， 但几乎没有我想要的样子的计划 。 我花了很长时间才对元素的颜色和位置进行反复尝试编码 。
你可以使用设计软件更快地遍历想法 。 现在 ， 我使用AdobeXD（免费）只是将它们拖放到位 ， 并迅速准备好一个好的设计以进行编码 。 Figma也很受欢迎 ， 但并非免费 。
如果你喜欢这篇文章 ， 可以关注我以得到新帖子
谢谢阅读！
来源：(前端一零仙人)
【】网址：/a/2021/0221/kd728402.html
标题：前端开发|方便于前端开发工程师的11个简单UI设计技巧
