5个热门技巧帮您轻松搭建一个优雅得体的网站

发布日期:2017-06-21
浏览次数:53
  
 
优秀的编码能力和伟大的设计总是相辅相成的。不幸的是具备一般视觉设计技巧的设计师总是认为自己缺少与生俱来的一些"神力"。换句话说,人们普遍认为一个人要么生来就具有超然的审美能力,要么天生就没有。这是依靠后天的努力无法获取的。我实在无法认同这样的观点。简单想一下:如果你在5岁时就停止了书写,那么你后面的书写可能就会很糟糕。艺术和设计也是一样。如果你很早就放弃了设计练习,那么你是很难掌握这种能力的。不过,任何时候开始学习都不会太晚。事实上,客观来说,当一个人越成熟时,他在学习新事物上也会更加容易。
如果你希望通过找寻一些技巧让网站设计更加成功,这篇文章绝对是你的不二之选。在这有5种有关网站设计的准则,掌握了它们,你可以有效避免丑陋的设计(或者说让网站没有那么丑)。
 
 
 

1. 使用负空间 (Negative space)

大多数网站设计师很容易忽略一些能够增加间距的CSS属性,比如外边距、内边距、行高等。因此我们在设计完成的页面上,很容易看见这样的现象:文本通常紧靠着边框,文本之间没有足够的间距,行与行之间也没有空白。下面就是一个栗子,下图的第一个文本框和第二个文本框形成了鲜明的对比,第一个文本框中文字贴紧边框,也没有设置行距,而第二个文本框就给人一种精心设计的感觉,访客在阅读时也会更加舒服。
 
 
在艺术设计和摄影领域里,各种设计元素之间区域就被称为“负空间”。这听上去可能有点专业,不过它在其他领域中的叫法你肯定听过,那就是"留白"。负空间可以让读者迅速识别设计的不同部分, 这也能够提高文本的可读性。
 
 

使用建议:

  • 确保文本有充分的呼吸空间。文本的四周应该设置合适的内边距,绝对不能紧挨着元素的边缘。
  • 注意框内框的布局。如果页面元素是通过边框而不是外边距来区别的话,很容易出现大量边框嵌套的情况。所以,当你下次想要添加边框区分元素时,不妨考虑使用一些外边距。
  • 额外福利:尝试在元素的底部添加一些额外的空间。有时这在视觉上会有提升感还会让这些元素在页面上看起来更突出。艺术家在打磨作品通常也会使用这个视觉技巧。
 
其实只要简单用好空白,你在网页设计上已经比其他的网站开发者强不少了。
 
 
 

2. 通过不同值来建立对比

音乐中有个概念叫强弱法,当你演唱完一首歌的音调轻柔的部分,然后演唱强音,那么强音会听上去更加响亮,反之亦然。在网站设计方面也是一个道理。如果一个网页上的所有字体都是加粗的,那么加粗就一点意义都没有了。
 
 
上图中的字母是音乐强度的不同,从左到右依次为:弱、中弱、中强、强。而在设计中,你可以通过使用光与暗的颜色来调整视觉冲击力。上图底部的灰度图也被称为值尺度。
 
 "值"是一个术语,用于描述一种颜色的亮度或暗度。当一个浅色和一个深色放在一起时,它就形成了一个对比。对比可以帮助访客了解信息的不同重要程度。例如,一个表单元素的说明文字可能没有一个表单的标签重要,那么这些说明文字你就应该使用一种更小的字体,或者使用灰色字体来修饰,而不是粗黑体。如果你在表单标签上用黑色粗体字给出了一个电子邮件,你可能需要在后面添加一些说明文字,让访客知道你不会滥用他们的信息。这些补充说明的文字并没有那么重要,所以你应该使它们比其它的文字更"低调"些。如下图,当你在Treehouse 网站上编辑个人信息时,你可以为你自己输入一个特定的URL。其中黑色标识的文本是你的唯一标识符,而URL其余部分使用浅色,可以让你知道你的网址最终是什么样的。
 
 
在网站设计中,我们不仅仅需要注意文本的突出程度,还要确认设计中亮色和暗色的搭配,以让访客可以轻松识别出设计中的各个元素。这是一种有用的视觉工具,因为相对于识别出不同颜色的差异,人眼更易于识别出不同的对比度值的差异。
 
 

使用建议:

  • 与测试代码一样,你也应该测试下设计。在发布下一个更新版本的设计时,先看下它的测试效果。如果一眼看过去你能很快感知到最暗区域和最亮区域,那就没有什么问题。但如果所有的元素看上去都是同样的灰度,那么就需要增加一些对比色。对比色可以很好的区分网站中各个设计元素。
  • 给网页截个图,并用图像编辑工具(如Photoshop)来调整(灰度的)曲线和级别值。有时你也许会在无意之间发现简单的CSS调整就可以做出更好的设计。
 
几乎在各种形式的设计中,初学者往往认为所有的元素都应该很突出,不顾一切提高"值"。其实不然,"值"的降低有时候更是成熟的一种表现,而且有助于突出网站中最重要的部分。
 
 
 

3. 使用纹理增加多样性

现实世界中的大多数事物都不是完全平坦光滑的。纹理可以给界面带来多样性。即便你不打算通过拟真设计模拟一个逼真的表面,在某些位置添加一点纹理也是比较好的做法。有关纹理的灵感无处不在,纸上、金属上、石头上、设置是块状的文字。大部分时候,一点点的随意的纹理便足以让你的设计从其他平淡无趣的页面中脱颖而出。纹理可以给平凡无奇的事物赋予丰富的个性和厚重的历史感(见下图)。
 
 
 

使用建议:

  • 纹理可以增加视觉丰富度,并且可以让页面看上去更有深度。
  • 如果你在网站中使用渐变或者过渡色,那你最好在上面加一些纹理,这会减少色差,让不同色彩更容易融合。CSS3 的多重背景样式就能轻易实现这一点。
  • 使用CSS3的分层背景使得纹理的文件尺寸不需要很大。你可以画一个小的方块(大概256*256就够了),填充一些杂色,然后背景采用平铺(css中允许repeat)。这样实现图片的复用。
 
 
 

4. 形状设计

在网页设计方面,我们一直强调"内容为皇",也因此我们很容易忽视形状这种艺术元素。事实上,世界上存在着大量的各种二维图形,但HTML 和 CSS 却相当倾向于矩形。事实上,"盒子模型”就是一个需要掌握的最重要的 CSS 概念之一。当你淹没在代码中,试图去获取一个数据库连接程序开始工作,或者努力调整背景的放置位置时,你很容易忘掉一些最基本的东西--形状。非矩形形状可以引起访客对重要页面的足够关注下图就是ios系统中使用类似箭头的返回按钮的栗子,这种形状能够引起用户的注意,起到交互的作用。
 
 
虽然我们的设计工具最开始是为了矩形而设计的,但这并不意味着我们不能打破规则,制作出一些其他的形状。
 
 

为什么要使用不同的形状:

  • 生活中很多物体都是用矩形设计的,比如电视机,桌子,房子等等。不管你有没有意识到,相比矩形,弯曲的或不规则的形状往往更能起到突出的作用。如果你无法使用颜色、色彩对比或让一个设计元素变得更大突出一个元素,那么你可以尝试使用一种特别的形状。
  • 优秀的肖像设计或 Logo 设计可以使用一个简单的形状,苹果公司或迪尼斯公司的 logo都是很好的栗子。图标或 logo的设计通常都是从纯黑色的图形开始的,阴影或其他色彩可以或许再添加上去。
  • 附加提示:如果你想要提高网站的用户转化率,而访客迟迟不点击行为引导按钮,你可以尝试改变一下CTA按钮的形状(比如,用一个箭头状的按钮而不是矩形的)。也许刚开始看上去可能有点不习惯,没准能够获得更多的关注哦!
 
顺便提一句,永远不要让现有的工具禁锢了你的想象力。设计为先,想好设计以后再看看怎样可以实际落实贯彻下去。
 
 
 

5. 视觉平衡

在你花时间调节像素、调整页面细节之前,你还有一件重要的事情要做,那就是纵览全局,看看网站是否实现了视觉上的平衡。视觉平衡这个概念比较复杂,很难用言语讲明白,但它是一种可以很快开发出来的直觉能力。以梵高的《星空》为例,他实现了左侧沉重黑影和右侧地平线的平衡,上空的明亮和独特形状也与下面的空白相对。
 
视觉平衡是考察网站布局的一种方式,它是指一片区域的元素数量相对于另一区域上的视觉加权数。我们必须了解视觉平衡的重要性,不平衡的页面会带来一种糟糕的紧张感。虽然在极少数情况下,我们可以有意的调整视觉平衡营造一种紧张的氛围(比如恐怖电影的网站),大部分网站在实际应用都要避免视觉的不平衡。通常情况下观察和认定一个页面是否左重右轻(或右重左轻)是比较容易的,可能就是相对于另一区域这边的元素更多、对比效果更强、着色更密等。考虑一下上下区块的平衡度也十分重要,尽管这垂直滚动的网站页面上,这可能没有水平方向的平衡那么重要。
 
The Starry Night
 
 

使用建议:

  • 在页面的正中间画一条竖直的线,察两侧的元素是否平衡。当然,设计时不可能做到完成的对称相等,只要内容等看上去差不多就好。
  • 试下将页面倒过来看看。如此一来你就不会盯着上面的文本和想搞明白上面的UI组件有什么用。相反,这时你就会忍不住关心上面的大部分页面元素是否布局合理。要是还有疑问,你也可以将这一条与上面的技巧一起用。
 
 
 

结论

以上这些基本的原理和原则会使设计变得更加得容易。它们可能不会给你带来化腐朽为神奇的效果,但却能有助于你创建一些舒适得体的网页。如果你还有一些实用的技巧,欢迎留言!
 
 
出自:开源中国社区 Oschina.net
 
 

登录后即可发表评论,立即登录.