web设计中有哪些好用的小技巧

2023-08-0408:59:59网页设计Comments2,132 views字数 1293阅读模式

作者:Marc Andrew文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

译者:蓝建杭文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

做界面设计时,往往细节决定成败。好的细节往往可以起到“四两拨千斤”的作用,让你的设计档次大幅提升。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

今天我们就来看看web设计中有哪些好用的小技巧吧~文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

留白也是一种设计元素,用好它

不要过度堆砌你的设计,让你的设计和用户有“呼吸空间”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

留白是与排版、颜色和图像同样重要的设计元素,它可以清晰传达你的网站或 app 的信息,并为用户带来更好的用户体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

如果你有很多的屏幕空间可用,并不代表你需要把每一寸空间都填满。用好留白,就像其他的设计元素一样。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

web设计中有哪些好用的小技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

(用好留白,不要让每一寸空间都堆满信息内容)

在浅色文本和图片间保持合适的对比度

始终要检查浅色文本在较浅的图片背景下是否清晰可读。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

有时候简单给你的文字加一个略微不透明的深色背景,就可以使这些元素保持一个很好的对比度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

这也使你可以在深色和浅色图片之间快速切换,而不用去改变字体颜色。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

web设计中有哪些好用的小技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

(用略微深色的不透明背景,保持浅色文本和图片的对比度,使文本更易读)

为你的标题和正文打造完美的垂直韵律

当想要在设计中实现出色的垂直韵律和文本元素之间稳固的视觉层级,就需要将边距处理得当。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

我看过许多的设计,特别是文章列表,标题的上下页边距是相同的,这样就导致了其与下面的正文失去了联系。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

这种情况下,我总是会给标题留出更多的上边距,而下边距则稍短一些。这样使得标题与下方的正文的联系更加紧密,列表中所有的文章也能保持良好的垂直韵律和视觉层级。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

web设计中有哪些好用的小技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

(利用上下边距的差异,来打造垂直韵律和层级)

根据使用的文本块大小,调节合适的行高

并非所有的行高都是相同的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

当处理不同大小的文字块时,你需要根据实际找到最合适的行高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

例如,对于大段的文字,增加一些行高可以让用户的眼睛更容易分辨一行的结尾和下一行的开头,可以在更大的段落中顺畅移动。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

如果文本段落较短(只有3-4行),行的长度也短,可以继续用标准的行高或者略微减小一些,不用担心可读性问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

调整行高,使其最适应文本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

web设计中有哪些好用的小技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

(大段落适当增加行高,小段落适当降低行高)

保持文字调色板的简洁,只使用色调和阴影

如果项目允许,没必要认为非得用许多不同的文本颜色才能很好地表达信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

对有些人来说,尤其在没有项目规范的情况下,找到能很好搭配的颜色组合是一件困难的事文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

你是可以尝试使用主色调的浅色或深色变体。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

web设计中有哪些好用的小技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

(保持颜色的简洁,找到合适的颜色搭配不是一件易事)

用好亲密性原则

亲密性原则是指彼此相关的项应当靠近,归组在一起。这一原则可以帮助你为用户创造更清晰的用户界面。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

当运用亲密性原则时,可以确保有关系的设计元素被放在一起,这又可以反过来表明它们之间的关系,有助于提升用户在使用网站或 app 时的认知速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

web设计中有哪些好用的小技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

(把有关系的元素放在一起,好让它们被认为是一组的)

投影,用得含蓄点

在设计中巧妙地应用投影可以达到很强的视觉提示作用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

但记住,投影在现实世界中大部分时间是很难被注意到的。因此在你的界面中也应该遵循并复现这种情况。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

当在界面中使用阴影时,请用得淡一些,用得含蓄一些,要不然宁肯不要使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

web设计中有哪些好用的小技巧文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

(投影只要淡淡一些就足够了)

希望以上一些小小的技巧可以帮助你认识到,其实只要花一些小小的调整,就可以让设计达到很好的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/sheji/52556.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/sheji/52556.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定