火星网校
7个UI设计小技巧— 今天你get了吗?
发布时间：2024-01-24 17:44:11 浏览量：235次
对于新手ui设计师或前端来说，也许你所在的公司没有牛逼的UI设计师，或者是需要前端自己进行UI界面的视觉优化。
你肯定崩溃的说：“我又不是设计师，我做成这样已经很不错了！”但事实证明我们可以不需要更多艺术背景也可以用很多小技巧来提升你的设计水平。
以下UI设计种的七个小技巧：
一、使用字体的颜色和粗细来创建界面层次结构
一般我们所看到的UI样式文本都是用字体的大小来控制界面层次结构。
1颜色：
“这个文字很重要吗？让我们更大胆。”
“这个文字是次要的吗？让我们用浅色。”
尝试并使用两种或三种颜色：
主要内容的深色（但不是黑色）（可以是#333）
二级内容的灰色（可以是#666）
辅助内容的浅灰色（可以是#999 ddd 等）
2粗细：
两种字体的粗细通常足以应付日常UI工作：
正常字体的粗细（很多正文的选择）
强调的文本可以使用更粗的字体（很多标题字体的选择）
二、不要在彩色背景上使用灰色文字
我们经常会在白色背景下用浅灰色的字体，但如果是彩色背景下用浅灰色的字体，并不好看。
那是因为白色、灰色的使用使对比度降低。
而文本更接近背景颜色实际上有助于创建层次结构，而不是使字体变为浅灰色。
使用彩色背景时，有两种方法可以降低对比度：
1.降低白色文本的不透明度
使用白色文本并降低不透明度。这样可以使背景颜色稍微渗透，以不与背景冲突的方式去强调文本。
2.自行选择基于背景颜色的文本颜色
当背景是图像或图案时，或者当降低不透明度使文本感觉太钝或褪色时，这比减少不透明度更好。
选择与背景色调相同的颜色，调整饱和度和亮度，直到它看起来不错。
三、去掉阴影
不是使用较大的模糊和展开值来使框阴影更加明显，而是添加垂直偏移。
它看起来更自然，因为它模拟了从上面照射下来的光源，就像我们以前在现实世界中看到的一样。
这适用于可能在表格输入上使用的插入阴影：
四、不要使用太多的边框
虽然使用边框可以更好的区分两个元素，但它并不是唯一的方法，我们可以使用其他的办法来实现：
1.使用边框阴影
边框阴影可以很好地勾勒出像边框一样的元素，它可以更精细并实现相同的目标而不会分散注意力。
2.使用两种不同的背景颜色
我们可以为相邻元素提供稍微不同的背景颜色使它们之间进行区分。
3.增加额外的间距
有什么更好的方法来创建元素之间的分离而不是简单地增加分离？我们可以创建元素组。
五、不要删掉那些小的图标
选择图标的时候，虽然都是矢量的文件，我们增加尺寸，质量不会受到影响，但是当我们将它们拉到预期尺寸的3倍或4倍时，以16-24px绘制的图标看起来永远不会非常专业。他们缺乏细节，总是感到不成比例的“矮胖”。
如果已经获得了小图标，可以将它们包含在另一个形状中。
这可以使实际图标更接近其预期大小，同时仍然填充更大的空间。
六、使用重点边框为平淡的设计增添色彩
一个简单技巧是在界面的某些部分添加色彩鲜艳的边框
例如，在警告消息的旁边：
...或突出显示活动导航项：
......甚至在整个布局的顶部：
它不需要任何图形设计人才来为您的UI添加彩色矩形，它可以大大有助于使你的网站更“设计”。
七、并非每个按钮都需要背景颜色
当用户可以在页面上执行多个操作时，我们可以区分不同的按钮。
像Bootstrap这样的框架通过语义样式菜单来做，无论何时添加新按钮，都可以选择：
“这是一个积极的行动吗？将按钮设为绿色。”
“这会删除数据吗？将按钮设为红色。”
语义是按钮设计的一个重要部分，但是有一个更常见的重要维度：层次结构。
页面上的每个操作都位于重要金字塔的某个位置。大多数页面只有一个真正的主要动作，一些不太重要的次要动作，以及一些很少使用的三级动作。
在设计这些操作时，在层次结构中传达它们的位置非常重要。
主要行动应该是明显的。坚固，高对比度的背景色可以在这里使用。
次要行动应该清楚但不突出。轮廓样式或较低对比度的背景颜色是很好的选择。
三级行动应该是可发现的，但不引人注目。像链接一样设置这些操作通常是最好的方法。
“破坏性的行动怎么样，他们不应该总是变红吗？”
不必要！如果破坏性操作不是页面上的主要操作，则最好为其提供二级或三级按钮处理。
保存大，红色和粗体样式，以便当负面操作实际上是界面中的主要操作时，就像在确认对话框中一样：
以上这些技能，你get到了吗？
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
