提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
以下内容由摹客的小伙伴儿翻译,希望能为你带来一丢丢启发~ 摹客不仅仅为你提供优质快捷的设计工具和平台,我们也是设计干货的分享者。
了解摹客戳这里哦:https://idoc.mockplus.cn/idoc
以下是严肃的正文~
每个Web开发人员都不可避免地遇到需要做出视觉设计决策的情况,无论他们喜欢与否。
也许你所在的公司没有全职设计师,需要自己做新功能的UI。 或者也许你正在做一个兼职项目,你希望它看起来比另一个Bootstrap网站更好。
举起手来说:“我永远都不能让这看起来很好,我不是艺术家!”是很容易的。但事实证明,你可以用很多技巧来提升你的工作水平,而不需要平面设计的专业背景。
小编为你带来七个用来改善设计的简单办法。
1.利用颜色和字重来创建层次结构而不是用文本大小
样式UI文本的一个常见错误是过分依赖字体大小来控制层次结构。
“这个文字很重要吗?让它变大些。”
“这个文字是次要的吗?让它变小些。”
不要仅仅将所有繁重的工作留在字体大小上,而是尝试使用颜色或字重来完成同样的工作。
“这个文字很重要吗?让它粗一些。”
“这个文字是次要的吗?把颜色调浅一些。”
尝试并保持两至三种颜色:
● 主体内容要保持深色(但不是黑色)(如文章标题)
● 二级内容要保持灰色(如文章发布日期)
● 辅助内容要保持浅灰色(比如是页脚中的版权声明)
同样的,两种字重通常足以用于UI作品:
● 正文的标准字重(400或500,具体取决于字体)
● 着重文本较粗的字重(600或700)
UI界面要远离400以下的字重; 它们可以用于大标题,但是在较小的尺寸下难以阅读。 如果你正在考虑使用较轻的字重来弱化某些文本,请使用较浅的颜色或较小的字体大小。
2.不要在彩色背景上使用灰色文本
使文本变成浅灰色是在白色背景上去强调它的好方法,但它在彩色背景上看起来并不美观。
那是因为我们实际上在白色上看到灰色的效果,在对比度上是减弱了的。
使文本更接近背景颜色实际上有助于创建层次结构,而不是使其变为浅灰色。
使用彩色背景时,有两种方法可以降低对比度:
1.减少白色文本的不透明度
使用白色文本并降低不透明度。 这样可以让背景颜色稍微渗透,以不与背景冲突的方式去强调文本。
2.手工挑选基于背景颜色的颜色
当背景是图像或图案时,或者当降低不透明度使文本感觉太钝或褪色时,手工挑选基于背景颜色的颜色比降低不透明度更好。
选择与背景色同色调的色彩,调整饱和度和亮度,直到它看起来是ok的。
3、补偿阴影
不使用较大的模糊和展开值来使对话框阴影更明显,而是添加垂直偏移。
它看起来更自然,因为它模拟了一个从顶部照射下来的光源,就像我们在现实世界中习惯看到的一样。
这个原则同样也适用于Bootstrap Well或者是表格输入上使用的插入阴影:
4.少使用边框
当你需要在两个元素之间创建间距时,尽量忍住马上安排边框。
虽然边框是区分两个元素的好方法,但它们却不是唯一的方法,使用太多边框可能会让你的设计忙碌和混乱。
下一次当你找到边界时,请尝试以下其中一个想法:
1)使用边框阴影
边框阴影可以很好地勾勒边框那样的元素,精妙地达到目的并且不会分散用户注意力。
2)使用两种不同的背景颜色
通常只需要为相邻元素提供略微不同的背景颜色即可区分它们。 如果已经使用了除边框之外的其他背景颜色,请尝试删除边框,你可能并不需要它。
3)增加额外的间距
有什么更好的方法来创建元素之间的间距而不是简单增添间距? 在不引入任何新UI的情况下将元素间隔得更远是创建元素组之间区别的好方法。
5.不要放大那些注定小的图标
如果你正在设计一些可以使用一些大图标的东西(比如登陆页面的“功能”部分),你可能会本能地获得一个像Font Awesome或Zondicons这样的免费图标集,然后提升尺寸直到满足你的需求。
毕竟它们是矢量图像,所以如果增加尺寸,质量不会受到影响吗?
虽然矢量图像在增加尺寸时不会降低质量,但是当你将它们放大到预期尺寸的3倍或4倍时,以16-24px绘制的图标看起来永远不会非常专业。 他们缺乏细节,总觉得不成比例地“矮胖”。
如果你有小图标,请尝试将它们包含在另一个形状中,并为形状提供背景颜色:
这可以使实际图标更接近其预期大小,同时仍然可以填充更大的空间。
如果有预算的话,还可以使用设计用于较大尺寸的高级图标集,例如Heroicons或Iconic。
6.使用重边框为单调的设计添加颜色
如果你不是一名平面设计师,你如何在你的UI中添加那些其他设计从美丽的摄影或彩色插图中获得的视觉效果?
一个可以产生重大影响的简单技巧是为界面的某些部分添加色彩鲜艳的边框,否则会感觉有点乏味。
例如,在警告消息的旁边:
…或强调当前激活导航选项:
......甚至在整个布局的顶部:
在UI里添加一个彩色矩形不太需要什么平面设计天赋,它可以大大有助于使您的网站更富有“设计感”。
挑选颜色很难? 尝试从Dribbble的颜色搜索等有限的调色板中进行选择,以避免被传统颜色选择器的无限可能性所淹没。
7.并非每个按钮都需要背景颜色
当用户可以在页面上执行多个操作时,很容易陷入纯粹基于语义设计这些操作的陷阱。
像Bootstrap这样的框架通过提供一个语义样式菜单来鼓励这一点,无论何时添加新按钮,都可以选择:
“这是一个积极的操作吗? 将按钮设为绿色。”
“这会删除数据吗? 将按钮设为红色。”
语义是按钮设计的一个重要部分,但是有一个更常见的重要维度:层次结构。
页面上的每个操作都位于重要度金字塔的某个位置。 大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及一些很少使用的三级操作。
在设计这些操作时,在层次结构中传达它们的位置非常重要。
● 主要操作应该是明显的。 单一,高对比度的背景色非常适合。
● 次要操作应该清楚但不突出。 轮廓样式或较低对比度的背景颜色是很好的选择。
● 三级操作应该是可发现的,但不引人注目。 像链接一样设置这些操作通常是最好的方法。
“破坏性的操作怎么样,他们不应该总是红色吗?”
其实没必要的! 如果破坏性操作不是页面上的主要操作,则最好给它进行二级或三级按钮处理。
当负面操作实际上是界面中的主要操作时,保留较大,红色和粗体样式,就像在确认对话框中一样:
摹客还有新消息和你分享:
【摹客福利】
智能标注,一键切图,告别手工,PS,Sketch和Adobe XD全平台插件支持,摹客iDoc邀你体验,戳https://idoc.mockplus.cn/get-idoc,注册后输入体验码 ui.cn 即可免费升级协作版。
【摹客大赛】
设计你心目中的校园社交APP,报名即送价值199元的设计大礼包,助力你比赛,报名入口:https://idoc.mockplus.cn/ux_2018
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册