在微博上看到别人转发的这篇文章，觉得里面的每一点都很有用，所以决定翻译一下，也算是给自己存个档，加深一下印象。毕竟作为前端页面男孩，页面UI的美化也是我们的工作，经常会被要求在页面上加这个加那个。没有设计稿直接完成页面也很常见。了解一些UI设计网站的基本规则还是很有必要的~原文链接>>>不管你喜不喜欢，每个Web开发者总会不可避免地面临一些视觉设计决策。也许你的公司没有专职设计师，你必须自己即兴创作一些功能性的UI设计，或者你正在做自己的项目，不希望它看起来太像“只是另一个Bootstrap站点”.在这一点上，你可能只是挥挥手说，“反正我永远做不到，我又不是设计师。”但实际上有很多技巧可以改进你的项目设计，并且不需要你有平面设计知识的背景。这里有一些技巧可以立即改进您的设计：使用字体颜色和粗细来区分等级而不是字体大小。做UI设计时经常犯的错误之一就是过于依赖字体大小来优化文本。级别的区分：“这个文本很重要？让它变大”“这个文本是次要的？让我们把它变小”不要让字体大小做这么多工作，尝试对字体粗细和颜色做同样的事情：“这个文本是重要的？那就加粗一点”“这段文字是次要的？那就加淡一点”尽量保持2-3种颜色：用深色（不是黑色）来表示主要内容，比如文章的标题。次要文本使用浅灰色，例如页脚中的版权信息等。另外，两种字体粗细足以用于UI界面。对大多数文本使用正常字体粗细（400或500，取决于字体），对高度强调的文本使用较重的字体（600或700）注意，不要使用低于400的字体粗细，因为它只适用于较大的字体大小如标题，有效，小字体很不显眼。如果你想用更细的字来表示不太重要的文本，你可以使用更浅的颜色或更小的字体。不要在彩色背景上使用灰色字体为辅助文本使用浅灰色在白色背景上很好，但在彩色背景上就不太好了。这是因为我们在白色背景上实际看到的灰色效果会降低对比度。要使文字在视觉上呈现出次要的层次，文字颜色应该更接近背景色，而不是灰色，以达到降低对比度的效果。在彩色背景上，可以采用以下两种方法降低对比度：降低白色文字的透明度——适当降低文字的透明度，让背景色渗透一点，这样可以起到弱化的效果在不与背景冲突的情况下实现。手动选择接近背景颜色的字体颜色-当您的背景是图形或图像时，这比使用透明效果更好，后者看起来更生硬和褪色。选择与背景色色调相同的颜色，并调整饱和度和亮度，直到它看起来适合您。设置阴影偏移与其强调带有大阴影模糊的框，不如使用垂直偏移。看起来会更自然，因为它模拟了光线从上往下在物体上的投射，更接近我们在现实中看到的场景。这个小技巧也适用于输入。如果您想了解更多关于阴影设计的信息，请查看MaterialDesignGuidelines。使用更少的边框当您想要在两个块之间进行划分时，不要立即想到边框。当然，边界确实是一个很好的划分方式，但不是唯一的方式。过度使用边框会让你的设计看起来凌乱。下次您想使用边框时，可以尝试以下几种方法：使用框阴影-框阴影实现与边框基本相同的效果，但它们比边框更微妙、更不易分散注意力。使用两种不同的背景色-只需为元素添加稍微不同的背景色即可产生分割效果，您可以尝试去除两种不同背景色之间的边框，完全没有必要。添加额外空间-有什么比在元素之间添加空间更好的分离方式呢？创造一点空间让元素彼此远离，可以在不引入其他UI元素的情况下达到很好的分离效果。小图标不要做大当你需要在某个地方使用大图标时（比如登录页面的功能部分），你可能会立即使用一个免费的字体图标库，比如FontAwesome，然后调整字体大小，以达到预期的效果。然而，它们毕竟是矢量图像。放大时，质量不会降低。当然，矢量图像可以在不影响图像质量的情况下放大，但实际大小为16-24px并放大3-4px的图标看起来非常不专业，缺乏细节，看起来很笨重。如果你只有一个小图标，可以用大色块包起来，加上背景色，这样既不会影响图标的显示效果，但也会占用更多的空间。如果您有预算，还可以付费使用图标，例如Heroicons或Iconic。为具有锐利边框的平淡设计增添色彩如果您不是专业设计师，并且您的界面平淡无奇，没有漂亮的插图或照片来装饰，您如何为您的页面增添一点风味？一个非常有效的小技巧是为简单的页面添加粗边框，这可以使页面不那么乏味。举个栗子，比如下面这个警告栏：再举个栗子，高亮导航栏元素：再举个栗子，给整个页面加一个边框：这样你就不需要任何设计来改进页面UI，让页面看起来更有设计感。如果不知道怎么选色，网上也有很多配色方案可以选择，或者试试Dripple的选色，让你摆脱传统选色器的无限可能。并非所有按钮都需要背景颜色。当一个页面上有很多按钮需要用户操作时，很容易陷入一个误区，那就是完全根据语义来设计这些操作按钮的颜色。Bootsrap框架在某种程度上鼓励这种行为。当你引入一个按钮时，有一排不同语义和不同颜色的按钮供你选择。“这是主动行动吗？使用绿色按钮。”“这个动作是删除数据吗？使用红色按钮。”诚然，语义也是按钮设计中的一个重要因素，但还有一个维度被忽视了，那就是层次结构。在一个页面中，操作按钮的层次呈金字塔状分布，有最高层的操作，一些次级的操作，还有一些用得不多的三级操作。在设计按钮时，动作的层次结构必须很明显：主要动作必须很明显——高对比度的背景色在这里起作用。次要操作应该清晰但不要太突出-边框样式或低对比度背景颜色在这里起作用。第三次要操作应该是可发现的但不引人注目-将这些操作视为链接会很好。“那如果是毁灭行动呢？不应该是红色的吗？”不必要！如果不是初级操作，则不需要使用红色背景，只需使用次级操作的样式即可。仅当销毁操作是当前主要操作时才使用高对比度的红色背景样式，例如弹出对话框的确认和取消按钮。怎么样，看完之后有没有和我一样有收获的感觉呢？~(￣▽￣)~*
