如何成为网页设计达人呢(如何成为网页设计达人呢知乎)

办公百科2024-08-08 18:02:11未知

如何成为网页设计达人呢(如何成为网页设计达人呢知乎)

  对于网页设计,有时候不仅仅是UI设计师的任务,有时候还可能是Web开发人员的任务,在进行网页设计时,很容易就陷入了设计的瓶颈,尤其是当自己的设计被一次又一次的打回,而自己痛苦地在电脑桌前表示,“我永远都不能让这看起来很好!”但事实证明,你可以用很多技巧来提升你的工作水平。在设计中,避免使用400以下的字体粗细; 它们可以用于大标题,但是在较小的尺寸下会变得难以阅读。如果你正在考虑使用较细的字体来减弱某些文本,请使用较浅的颜色或较小的字体大小。

  不要在彩色背景上使用灰色文字
  
  在白色背景上,使文本变成浅灰色是强调它的好方法,但这个颜色的字体在彩色背景上看起来并不那么友好。那是因为我们实际上在白色背景上看到灰色字体的会产生降低对比度的效果。而使文本更接近背景颜色实际上有助于创建层次结构,而不是使其变为浅灰色。
  
  使用彩色背景时,有两种方法可以降低对比度:
  
  1.减少白色文本的不透明度
  
  使用白色文本并降低不透明度。这样可以让背景颜色稍微渗透,以不与背景冲突的方式去强调文本。
  
  2.手工挑选基于背景颜色的颜色
  
  当背景是图像或图案时,或者当降低不透明度使文本感觉太钝或褪色时,这比减少不透明度更好。选择与背景颜色相同的颜色,调整饱和度和亮度,直到它看起来正确。
  
  改善阴影的样式
  

  不使用较大的模糊和展开值来使框阴影更明显,而是添加垂直偏移。它看起来更自然,因为它模拟了一个从上面照射下来的光源,就像我们以前在现实世界中看到的一样。
  
  这适用于您可能在井或表格输入上使用的插入阴影:
  
  使用较少的边框
  

  当你需要分离两个元素时,尝试避免突然看到边框。虽然边框是区分两个元素的好方法,但它们不是唯一的方法,使用太多边框可能会让你的设计感到繁杂和混乱。
  
  当你下次需要解决方法时时,请尝试以下其中一个想法:
  
  1.使用box shadow
  
  box shadow可以很好地实现像边框元素那样的功能,但也可以更精细,并且实现相同的目的而不会分散注意力。
  
  2.使用两种不同的背景颜色
  
  通常只需要为相邻元素提供略微不同的背景颜色即可区分它们。如果您已经使用了除边框之外的其他背景颜色,请尝试删除边框; 你可能不需要它。
  
  3.增加额外的间距
  
  有什么更好的方法来分离元素,而不只是简单地隔开?将事物间隔得更远是不引入任何新UI的情况下创建元素组之间区别的好方法。
  
  不要放大那些小图标
  
  如果你正在设计一些可以使用一些大图标的东西(比如登陆页面的“功能”部分),你可能会本能地使用免费图标集,然后放大尺寸直到满足你的需求。但是它们是矢量图像,如果增加尺寸,难道质量不会受到影响吗?
  这使您可以使实际图标更接近其预期大小,同时仍然可以填充更大的空间。如果您有预算,您还可以使用设计用于较大尺寸的高级图标集,当然是要钱的那种。
  
  用有色彩的重点边框改善平淡的设计
  
  如果你不是一名平面设计师,你如何在你的设计中添加那些从美丽的摄影或彩色插图中获得的视觉效果?一个可以产生重大影响的简单技巧是为界面的某些部分添加色彩鲜艳的边框,否则会感觉有点乏味。
  
  并非每个按钮都需要背景颜色
  
  当用户可以在页面上执行多个操作时,很容易陷入纯粹基于语义设计这些操作的陷阱。无论何时添加新按钮,都可以选择:语义是按钮设计的一个重要部分,但是有一个更常见的重要维度:层次结构。
  
  页面上的每个操作都位于重要金字塔的某个位置。大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及一些很少使用的三级操作。
  
  在设计这些操作时,在层次结构中传达它们的位置非常重要。主要行动应该是明显的。坚固,高对比度的背景色在这里工作得很好。次要行动应该清楚但不突出。轮廓样式或较低对比度的背景颜色是很好的选择。三级行动应该是可发现的,但不引人注目。像链接一样设置这些操作通常是最好的方法。
  
  最重要的是保存大,红色和粗体样式,以便当负面操作实际上是界面中的主要操作时,就像在确认对话框中一样:

本文标签: 网页设计  标签  简介  

相关推荐

猜你喜欢

大家正在看