火星网校
UI设计须掌握的7个设计技巧
发布时间：2024-01-24 13:20:25 浏览量：244次
大家在日常的计中，都不可避免地遇到需要做出视觉设计决策的情况，这个时候，我们可以通过一些技巧来提升你的设计
以下是可以用来改善设计的七个设计小技巧
01、用颜色和字体粗细区分层次
在UI设计的过程中，设计师有时候会太过依赖字体的大小来控制设计的主次结构。
比如这段文字很重要，因此字体要大这段文字比较次要，因此文字要小
设计画面的主次结构中，决定文字字体大小的时候不能单单只看内容，而是要放到整个设计当中去考量与思考，因为有对比才产生画面中的主次之分。
- 在颜色的选择上，我们可以使用3种颜色来进行主次的区
- 标题 / 重要的内文信息，通过以加粗的样式呈现
- 辅助信息 / 次要信息，通常以较细的字体呈现
02、不要在彩色背景上使用灰色字
在白色背景上使用浅灰色的文本色是弱化它的好方法，但是在彩色的背景上并不好，因为我在白色上看到浅灰色的字其实是降低了对比度，所以被弱化。
在日常设计中，使文本色更接近背景颜色实际上有助于创建层次结构。
在处理彩色背景时，有两种方法可以减少对比度:
1、 减少白色文本的不透明度
使用白色文字，降低不透明度。这样可以让背景色渗透一点，在不与背景冲突的情况下降低文本的强调度。
2. 根据背景颜色手动选择一种颜色
当你的背景是一幅图像或图案时，或者当降低不透明度使文本感觉太枯燥或被洗掉时，使用手动选择效果会更好。
03、抵消阴影
不要使用很大的阴影模糊和扩展值来让阴影更明显，尝试添加一个垂直（Y值）的偏移量。这样让它看起来更自然，因为它模拟了一个光源从上面照下来，就像在真实世界中受到光源投影的样子。
这适用于嵌入阴影，比如下图的输入框的阴影:
04、使用更少的边界
当你需要在两个元素之间创建分隔时，请尽量避免设计触及边界。
虽然边框是区分两个元素的好方法，但这并不是唯一的方法，使用太多边框会让您的设计感觉繁忙和混乱。
下次当你发现自己要到设计边界时，不妨试试下面的方法:
1. 使用方框阴影
阴影可以很好地勾勒元素的轮廓，就像描边的边框一样，但阴影可以更真实贴近现实的物理情况，在不分散注意力的情况下实现相同的目标。
2. 使用两种不同的背景颜色
给相邻的元素稍微不同的背景颜色，并尝试把线条去除。
3.添加额外的间距
除了简单地增加元素之间的分离之外，还有什么更好的方法来区分不用的区域呢?在不引入任何新元素的情况下，将组块之间的距离拉大，可以帮助我们区分开不用的内容。
05、不要过度放大没有细节的图标
我们经常会在一些icon网站上下载一些icon来使用，有时候因为画面需要，我们会将他们放大到很大的尺寸，直到可以填充满你需要的画面。因为他们都是矢量的icon，所以我们可以无线把他们放大。
虽然矢量图像的质量不会随着尺寸的增大而下降，但是当你把它们放大到原来的3倍或4倍时，16-24px绘制的图标看起来就不那么专业了。缺乏细节。
如果你只有小图标，可以尝试着把它们包围在另一个形状，给形状一个背景色
这样可以使实际图标更接近其预期大小，同时仍然填充更大的空间。
06、 为边框添加一条色彩
如何使一个简单的设计更加彩色呢？下面这个简单的技巧可以给到你答案，那就是在界面的某些部分添加色彩鲜艳的边框，这样可以使界面不这么乏味平淡，增添色彩。
例如，在警告消息的旁边:
突出显示活动导航项:
整个布局的顶部:
在你的设计中添加一个彩色矩形并不需要任何的思考，它可以让你的视觉高更加出彩在色彩的选择上，可以使用公司的品牌色或者辅助色。
07、 不是每个按钮都需要背景色
当用户可以在一个页面上执行多个操作时，很容易陷入基于按钮含义来定义按钮颜色的陷阱
Bootstrap这样的框架鼓励你这样做，当你添加一个新按钮时，它会给你一个语义风格的菜单供你选择:
这是一个确定按钮，因此按钮要设计成绿色
这是一个删除的按钮，因为需要设计成红色
按钮的文案是决定按钮设计的重要组成部分，但还有一个更重要的维度通常容易被遗忘:层次结构。
页面上的每个动作都位于一个重要的结构关系之中。大多数页面只有一个真正的主操作按钮、两个不太重要的次要操作按钮和很少使用的第三个操作按钮。
在设计这些操作按钮时，理清楚它们在层次结构中的位置非常重要。
1、主要按钮应该是显而易见的。纯色、高对比度的背景色在这里效果非常好。2、次要按钮应明确，但不应突出。轮廓样式或低对比度的背景色都是不错的选择。3、三级按钮应该是可发现的，但不应该太突兀。将这些操作样式化为链接通常是最好的方法。
“那么删除和退出等按钮?它们不应该总是红色的吗?”
答案是不一定的!如果删除或退出按钮不是页面上的主要操作，那么最好对其进行次要或三级按钮处理。
如下图，当时删除按钮作为界面的主要按钮和动作时，才需对它进行设计。
感谢你的阅读，希望对大家有帮助
本文由「像素有毒」公众号翻译撰写,转载请注明出处，谢谢
热门课程推荐
热门资讯
-
怎样可以提升你的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设计培训班的学费价格以及学习内容。
最新文章
