技术开发 频道

每个开发人员都应该知道五个设计技巧

  3. 使用纹理增强设计感

  真实世界中的绝大多数东西都并非是完全平整光滑的。纹理会给你的界面带来多样性。即使你没有尝试使用拟物化(skueomorphism)来复制真实的表面,在不同的地方添加一些纹理也不失为一个好主意。纹理的灵感来源四处都是,纸张,金属,石头,都行。甚至连大块的文字也可以被认为是纹理化的。通常一点随机的噪点就能够把你的设计和其他那些平庸乏味的设计区分开来。

  纹理能够让平淡无奇的对象变得具有自身的特点和生命力。

  一些关于纹理的建议:

  无论是象征意义上还是字面上,纹理都可以添加视觉上的丰富程度,同时还能让页面开起来更有深度。

  如果你使用了渐变,或者许多细致的颜色过渡,那么你真的应该在顶部使用一些轻度的纹理,因为这样可以减少颜色的条带效应(Banding),让颜色过渡得更自然。CSS3中的Multiple backgounds 可以轻松实现这一点。

  在CSS3里面使用多层背景也意味着能以最小的文件大小来实现纹理化。你可以用一个充满噪点的小方形重复来填充整个页面。然后,你还可以把这个小方块用到其他很多地方去。

  4. 千万别忽略了形状的使用

  在网页设计中,最容易被忽略的艺术元素就是形状。世界上二维的形状似乎有很多,但是在HTML和CSS 的世界里面更倾向于矩形。事实上,盒模型是CSS中需要掌握的最重要的概念。当你埋头写代码,正在试图连接一个数据库,或者正在调整背景的合适位置的时 候,很容易就会将这样基础的东西抛掷脑后。在页面中,非矩形可以让重要元素吸引足够的注意力。

  iOS中的这个箭形的返回键不但吸引力注意力,而且还能表达按钮实际功用。

  我为什么怂恿你使用形状:

  很多物体都是以矩形为基础设计的:电视机,桌子,房间,等等。即使你没有下意识去注意他们,弯曲的和不规则的对象更容易吸引眼球。试一试用独特的形状来代替像用颜色,明暗配合,或者简单地让元素在页面中显得更大这样的方法。

  一个设计优秀的图标或者LOGO就可以被看作一个简单的形状,比如说苹果索尼公司的LOGO一样。在设计图标和LOGO的时候,第一步从一个纯粹的黑色形状开始。然后就可以自由发挥,添加任何颜色,任何形状。

  额外建议:如果你在你的WebAPP中试图增加交互,但是访问者却不去点击你得按钮,试试使用不同的形状来进行A/B测试,例如,尝试用箭头来替代矩形按钮。或许刚刚开始的时候,看起来会有点别扭,但是这样可能能够吸引足够注意力。

  相似的,永远不要让工具限制了你的想象力。先天马行空的大胆设计,然后再逐步做减法把那些真的对用户有帮助的设计挑选出来。

  5. 寻找平衡

  在你花数小时时间去安排像素点进行页面细节设计之前,回过头去看看整体效果是很重要的。视觉平衡是用直接的语言很难传达的一个东西,但是又是一种能够被很快培养起来的才能。

  在《星夜》中,梵高在画面的右边使用了一条上升的水平线来平衡左边的暗色形状。新月的光亮和独特形状控制住了右上角,和左下角的暗色空白相呼应。

  平衡是思考设计构图和布局的一种方式。它是指在整个设计中不同区域的视觉重量的不同分布。正确应用这一点是很重要的:不平衡的页面会让人产生紧张感。在极少的情况下,你可以应用平衡来有意地制造紧张,比如为恐怖电影设计的网站,但是在大多数网页应用中,都应该避免这种情况的产生。

  让页面具有平衡感的几点建议

  画出一直延伸到页面中部一条垂直的线。是不是现在觉得这一边比页面的另一边看起来多了一些东西?设计不需要是对称的,但是至少左右应该有相同的比重。

  从上到下浏览页面。这样可以阻止你的眼睛去阅读文本,解释UI小部件的作用。相反,你应该去关注页面中的大多数元素的堆放位置。如果你还不是很确定的话,也可以和第一点结合起来。

  总结

  这些基本的元素和原则让你能够更容易地理解设计。他们当然不能赋予你某种神秘的艺术特异功能,但是却能够帮助你制作出一些优雅的页面。如果你还有一些类似的建议的话,我也很乐意从评论中看到。

0
相关文章