产品设计术与器:界面设计7个实用设计技巧

  每个Web开发人员,都不可避免地遇到需要做出视觉设计决策的情况,也许你工作的公司没有一个全职设计师,你需要自己实现一个新功能的UI。或者,也许你正在攻克一个编外项目,并希望它看起来比「另一个Bootstrap站点」更好。

  对UI文本进行样式设计时常犯的一个错误是过于依赖字体大小来控制层次结构。

  不要将所有繁重的工作都留在字号上,而是尝试使用颜色或字重来实现相同效果。

  UI设计上远离字重不超过400的字体 ,他们可以用在大标题上,但在较小的字号下不易于阅读。如果您正在考虑使用较轻的重量来淡化某些文字,请改为使用较浅的颜色或较小的字体。

  使文本变为浅灰色,是在白色背景上淡化它的好方法,但在彩色背景上看起来并不太好。这是因为我们实际看到白色灰色的效果是对比度降低,使文本更接近背景色实际上有助于创建层次结构,而不是使它变成浅灰色。

  使用白色文字并降低不透明度,这可以让背景颜色渗透一点点,以不与背景冲突的方式减弱文字。

  当您的背景是图像或图案时,或者当减少不透明度会使文字感觉过于枯燥或不适应时,这会比减少不透明度效果更好。

  不要使用较大的模糊和扩散值来使框阴影更明显,请添加垂直偏移。它看起来更自然,因为它模拟了像我们以前在现实世界中看到的那样从上方照射下来的光源。

  如果您有兴趣了解更多关于阴影设计的知识,google的“材料设计指南”是一本很棒的入门指南。

  当你需要在两个元素之间创建分隔时,虽然边框是区分两个元素的好方法,但它们并不是唯一的方法,而使用它们太多会让你的设计变得拥挤和混乱。

  盒子阴影在绘制像边框这样的元素方面做得非常出色,但是可以更加微妙并且完成相同的目标而不会让人分心。

  通常只需将相邻元素的背景颜色略有不同,就可以在它们之间进行区分。如果您已经在边框上使用不同的背景颜色,请尝试删除边框,你可能不需要它。

  将事物划分得更远,是一种在不引入任何新UI的情况下,创建元素组之间区别的好方法。

  如果你正在设计一些可能使用一些大图标的东西(比如:可能是着陆页上的“功能”部分),你可能会本能地采用一个像Font Awesome或Zondicons这样的免费图标集,并且调整大小直到它们符合你的需求。

  虽然矢量图像在增加尺寸时质量不会降低,但是在16-24像素绘制的图标,在将它们放大3倍或4倍的预期尺寸时,会显得非常不专业。他们缺乏细节,并总是感觉不成比例的“矮胖”。

  这可以让您保持实际的图标更接近其预期的尺寸,同时仍然填充更大的空间。如果您有预算,也可以使用专门用于较大尺寸的高级图标集,如:Heroicons或Iconic。

  如果您不是平面设计师,那么您如何将其他设计从美丽的摄影或色彩丰富的插图中,获得的那种视觉风格添加到您的用户界面中?

  一个可以产生巨大差异的简单诀窍是,在界面的某些部分添加色彩鲜明的重音边框,否则会感觉有点平淡。例如:在提示消息的旁边。

  简单的为您的界面添加一个彩色矩形,不需要任何平面设计专业天才,但却可以使您的网站更具有“设计感”。

  尝试从Dribbble的颜色搜索等受限调色板中进行选择,以避免被传统颜色选择器的无穷可能性所淹没。

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

  语义是按钮设计的重要组成部分,但是还有一个更重要的维度被人们遗忘:层次结构。

  网页上的每个动作都位于重要的某处,大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及几个很少使用的操作。

  不必要!如果消极行为不是页面上的主要行为,那么给它一个二级或按钮治疗可能会更好。

  在当负面行为实际上是界面中的主要行为时,(如在确认对话框中)采用大的,红色的和粗体的样式: