笔记!7个技巧让你的UI界面更具设计感

用户头像
深圳/新媒体设计师/7年前/469浏览
笔记!7个技巧让你的UI界面更具设计感

UI设计7个小技巧细节,让你的作品更具设计感!

1、用颜色和字重而非大小来创造层次结构。


undefined


在设计UI字体样式时,一个常见的错误是过于依赖于字体大小来控制您的层次结构。

“这些文字重要吗?试试做大一点”

“这些文字是二级的吗?试试做小一点”

不要把所有繁重的工作都留给字体大小,尝试使用颜色或字体权重来做同样的工作。

“这是文字重要吗?试试做显眼一点。”

“这些文字是二级的吗?试试把颜色做淡一点”

试着坚持用两到三种颜色:

主要内容的用深色(但不是纯黑色,如文章标题)

次要内容用灰色(如文章发表的日期)

辅助内容用浅灰色(可能是页脚的版权声明)


undefined


类似地,两个字体权重通常足以用于UI工作:

大多数的文本采用正常的字重(400到500,具体取决于字体)

对于需要强调的文字采用较重的字重(600到700,具体取决于字体)


undefined


应当尽量不要让正文部分字重低于400,因为这一部分字体字体本身尺寸已经较小,低于400会使得可读性不佳。如果你依然需要降低字重,那么不妨让字体色彩更浅一点,或者替换成其他识别度较强、字重相对较小的字体。




2、不要在有色背景上使用灰色的文本


undefined


在白色背景下,将黑色的文本改成灰色,是不错的淡化其视觉效果的做法,但是在彩色背景下这么做,则是另外一回事。

实际上,让白色背景下文本由黑变灰实际上是达到降低对比度的效果。

但是在彩色背景下,想要降低对比度是应该让文本逐步接近背景色,而不是改为灰色。


undefined



想要降低和背景色之间的对比,通常有两种方法:

a、降低白色文本的不透明度

降低不透明度,能够让背景的颜色透过来一些,以一种不冲突的方式降低前景文字和背景之间的对比度。


undefined



b、基于背景色手工挑选文本的颜色

当背景是图像或者图案的时候,半透明的文本会影响可读性,这个时候最好是基于背景主色调来挑选相应的文本色。


undefined
选择与背景颜色相同的颜色,调整饱和度和亮度,直到它看起来合适。





3、偏移阴影


undefined
不要使用大的模糊和扩展值来让box阴影更加明显,而是采用添加一个垂直的偏移量。



这样它看起来更自然,因为它模拟了从上面照下来的光源,就像我们习惯在现实世界里看到的那样。这适用于嵌入的阴影,比如表单输入框:


undefined
如果你有兴趣了解更多关于阴影设计的知识, Material Design Guidelines 是一个很好的入门指南。




4、尽量少用边框


undefined


不要一谈到在两个元素之间创建分隔时,就想到使用边框。

虽然边界是区分两个元素的好方法,但它们不是唯一的方法,而且使用太多的边框会让你的设计变得繁杂和混乱。



下次当你发现自己想要使用边框时,不妨试试下面的方法:

a. 用一个边框阴影


undefined
边框阴影能起到和边框一样描绘轮廓的作用, 但它可以更精细,也可以实现相同的目标,而不会让人分心。



b. 用两种不同的背景颜色


undefined


给相邻的元素设置稍微不同的背景颜色,通常可以在它们之间创建区别。如果您已经使用不同的背景颜色并添加了边框,请尝试删除边框,你可能不需要它。


c. 增加额外的空间间距


undefined


有什么更好的方法来创建元素之间的间隔,而不是简单地增加间隔?增大间隔是一种很好的方法,可以在不引入任何新UI的情况下创建元素组之间的区别。



5、不要把小图标放大


undefined


如果你正在设计一些可以使用一些大图标的东西(比如可能是登陆页面的“功能”部分),你可能会直接地获取一个免费的图标集,比如“ Font Awesome  ”或“ Zondicons”,并增加尺寸以符合你的需求。

毕竟它们是矢量图像,所以如果你增加尺寸,质量不会受到影响。

虽然矢量图像在增加尺寸的时候不会降低质量,但是当你把它们的尺寸放大到原来的3倍或4倍时,16-24px的图标就会显得很不专业了。他们缺乏细节,而且总是感觉不成比例的“敦厚”。


undefined


如果你只有小图标,试着把它们围成另一个形状,然后给它一个背景色:


undefined


这样可以使实际的图标更接近其预期的大小,同时仍可以填充较大的空间。

如果你有预算,你也可以使用一个高级图标集设计用于更大的尺寸,像Heroicons 或者 Iconic




6、给平淡的设计增加颜色强调边框


undefined


如果你不是一名平面设计师,你如何在你的UI中获得一些视觉天赋,犹如其他设计师从美丽的摄影或彩色插图中获得那样呢?

一个简单的小窍门就是给你的界面添加色彩缤纷的强调色,否则你会觉得有点乏味。


例如,在警告信息的一侧:


undefined



或者强调被点击的导航栏项目


undefined



或者整个版面的顶部:


undefined


不需要任何图形设计天赋来为你的UI添加一个彩色的矩形,它可以让你的网站感觉更具设计感。

很难选择颜色?尝试从一个已有的调色板中选择,比如Dribbble’s color search,以避免被传统颜色选择器的无限可能性所淹没。




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


undefined


当用户可以在页面上执行多个操作时,很容易陷入那些纯粹基于语义操作的设计陷阱里。

像BootStrap 这样的框架就让设计师按照语境和语义来进行选择:


undefined


“这是一个积极的操作?让这个按钮设置成绿色的吧。”

“这是否是要删除数据?那么将按钮设置为红色的吧。

的确,语义和按钮本身的设计息息相关,但是还有更重要的维度被忽略了,那就是层次结构。

网页上每个操作其实都位于整个交互金字塔的某个位置。绝大多数的页面其实只有一个主要操作,搭配一些不太重要的次要操作,以及为数不多的几个三级操作。

在设计这些交互的时候,通过层次结构来呈现这些交互的重要性是很重要的设计环节。

主要操作应该很明显。采用实色、高对比度的按钮是很有必要的。

次要操作应该明显,但是不突出,采用幽灵按钮或者和背景对比度较低的色彩是比较合理的。

三级操作应该是可被发现,但是不明显的,他们最好被设计为链接。


undefined



“破坏性的交互所涉及的按钮难道不应该是红色的么?”

没必要!如果破坏性的交互所涉及到的按钮不是主要操作的话,让它按照次要操作甚至三级操作的按钮来设计就好了。


undefined



保存大的、红色的和大胆的样式,因为当这个消极的动作实际上是界面中的主要动作,比如在一个确认对话框中:


undefined




12
阅读原文
|
举报
|
26
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】体育icon
智能家居中心 简约 UI设计组件库
【新年UI图标】珠宝icon
【新年UI图标】影音icon
【新年UI图标】活动icon
新能源APP应用UIKit
UI 登录界面设计模板包
钱包ui模板
【新年UI图标】礼物/活动icon
户外旅行飞机情侣假日出行
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新拟态风格 UI设计组件库
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
UI界面 组件
3D卡通UI界面图标可爱插画免扣素
盲盒APP UI设计
科技医疗透明柜UI界面设计
UI通用设计素材1
【新年UI图标】旅行icon
【新年UI图标】积分icon
我的钱包-UI界面设计-app
3D渐变流体抽象矢量UI背景图
高级表盘系列UI源文件
你可能喜欢
大家都在看
登录注册