火星网校
UI设计小技巧
发布时间：2024-04-03 11:49:36 浏览量：162次
一、不会过度依赖字体大小去区分等级，而是恰当的使用粗细和颜色。
1.重要的就让它粗一点，次要就颜色浅一点
2.尽量保持在2-3种颜色：
用深色（不是黑色）来表示首要的内容，例如文章的标题。用更浅的灰色来表示辅助文本，例如页脚的版权信息等等。
3.两种字体粗细对于UI界面来说足够了。
大多数文本使用正常字体粗细（400或500，具体取决于字体），重点强调的文本使用更粗一些的字体（600或者700）
注意的是：不要使用400以下的字体粗细，因为它只有在较大的字号如标题这种才有效果，在小号字体上表现的非常不明显，如果你想用更细的字来表示更次要的文本，可以使用更浅的颜色或者小一号的字体大小。
二、不要在彩色背景上使用灰色字体
在白色背景下使用较浅一些的灰色来表示次要文本是一种不错的选择，但是在有颜色的背景下就不太好了。这是因为我们实际看到的灰色在白色背景下的效果是降低对比度。要想视觉上让文本的呈现次要等级效果，应该要让文字颜色更接近背景色，而不是用灰色，以达到降低对比度的效果。
在彩色背景下，你可以采用一下两种方式来降低对比度：
1.降低白色字的透明度 - 适当降低字的透明度，让背景颜色稍微渗透一些，这样即达到了弱化的效果又不会与背景相互冲突。
2.手动选择一个接近背景颜色的字体颜色。当你的背景是图形或者图片的时候，这种方式比用透明度要好，因为透明度看起来会更死板像是褪色的感觉。选择一个跟背景色的色调相同的颜色，调整饱和度和明度直到你觉得合适为止。
三、设置阴影偏移
与其用大块的阴影模糊去强调盒子，不如使用垂直方向上的偏移量。它看起来会更加的自然，因为它模拟的是灯光从上往下照射在物体上的投射，更接近我们在现实中看到的场景。这个小技巧同样也适用于input。
如果你想了解更多关于阴影设计的东西，可以看看 Material Design Guidelines。
四、少用点边框
当你想要在两个区块之间做分隔的时候，不要第一时间就想着用边框。当然，边框确实是很好的用来分割的方式，但是它不是唯一的方式啊，过多的使用边框会让你的设计看起来杂乱。
下次当你想用边框的时候，不妨试试下面这几个：
1. 使用盒子阴影 - 盒子阴影实现的效果和边框基本相同，但是它呈现的效果会更微妙一些，没有边框那么让人分心。
2. 用两种不同的背景色 - 只要给元素稍微加一点背景颜色的不同，就能呈现分割的效果了，你可以尝试去掉两个不同背景色之间的边框，其实根本不需要呢。
3. 增加额外空间 - 还有什么比给元素之间增加空间更能体现分隔效果的呢？制造一点空间让元素互相远离，就能很好的达到分隔效果，也不需要引入其他的UI元素。
五、不要把小图标放大
当你在某个地方需要用到大的图标的时候（比如登录页的功能部分），你可能立马就去用免费的字体图标库如 Font Awesome 之类的，然后调整字号大小，达到你需要的效果。
矢量图像即便是被放大也不会影响图像质量，但是 实际大小为16–24px的图标被放大3-4px之后，看上去会非常的不专业，缺乏细节，看上去十分笨重。
如果你只有小号的图标，可以把它包裹在一个有背景色的大色块里面，这样既不影响图标的显示效果，又能占据更大的空间。
如果你有足够的预算，也可以使用一些额外收费的图标，比如 Heroicons 或者 Iconic。
六、使用鲜明的边框为平淡的设计增添色彩
如果你不是专业的设计师，你的界面也没有也很平淡，没有优美的插图或者照片来装饰，如何为页面增添一点风味呢？
有一个效果很显著的小技巧就是为简单的页面添加粗重的边框，高亮导航栏元素，这样可以减少页面的乏味感。
这种方式不需要你有什么设计就能改善页面UI，让页面看起来更有设计感。
如果你不知道如何选择颜色，网上也有很多色系搭配方案可供选择，或者试试 Dripple的颜色选择，让你从传统颜色选择器无穷无尽的可能中解脱出来。
七、不是所有的按钮都需要背景色
当一个页面上有很多需要用户操作的按钮时，很容易就陷入一种错误，就是完全根据语义来设计这些操作按钮的颜色。Bootsrap框架从某种程度上鼓励了这种行为，当你引入一个button的时候，有一排不同语义的不同颜色的按钮供你选择。
诚然，语义也是按钮设计中必不可少的一个因素，但还有另外一个维度却被忽略了，那就是层级。
在一个页面的里面，操作按钮的层级就像金字塔一样分布，有一个最高级别的操作，和一些次要操作，以及一些不怎么使用的三次操作。操作的层级在设计按钮的时候必须明显的体现出来：
首要操作必须明显 - 高对比度的背景颜色适用于这里。次要操作应该表现清晰但不用太突出- 边框样式或者低对比度的背景色适用于这里。三级次要操作应该是可被发现但不引人注目的 - 把这些操作当成 link链接的样式来处理会比较好。
如有侵权，请联系删除
原文转自
https://www.cnblogs.com/PeriHe/p/9717091.html
热门课程推荐
热门资讯
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
-
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
-
10. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
