网页界面设计中的明暗

  现实生活中无时无处不存在着光照和阴影。你看到的每样东西都是通过光影反射形成它的形象。视觉上,光影帮助我们辨别事物,认知他们的材质、尺度和透视。

  所以如果要让我们的网页设计更加自然、有动感且真实直观,正确理解光影效果就变得非常重要。以下是助你更好利用光影的五个技巧,好好运用它们,能让你的设计更加精致,从众多的页面中脱颖而出。

  光照与阴影的原理快速剖析

  下图中,光源来自左方。高光是光照最强的部分,阴影位于距离光源最远的地方。光影的存在帮助我们感知有关物体表面材质的大量信息。


  不过你可能要问,这和网页设计有什么关系?

  如果你打算创造丰富、有质感的界面和网站,光影能助你一臂之力。如同许多传统艺术家们在绘画上对光照的运用,你也可以利用光照给你的设计以深度和视觉趣味。

  1. 使用光源

  应该说利用光照时了解光源在那里是最为重要的基本问题。光源位置决定了高光和阴影的位置(不过在网页设计中你能打破这些规则)。在Photoshop中,你可以利用图层样式中的"全局光照"保证你创造的所有光影效果的光源都在一个位置。

  控制好光源位置能够为你的页面设计创造独特气氛(即使仅仅是一个简单的线性或径向渐变也能达到效果)。光影效果还能引导视觉中心的转移。

  网络上的例子

  Campaign Monitor 使用发散光源,创造出一种日出效果。


  Icebrrg 利用光照使页面潜入水下。


  Mike Precious 使用了不止一个光源,增加了视觉趣味,而且各处都使用的是桌面台灯的光照效果。


  Deaxon 在logo后有一个微弱的光源,使页面的焦点集中在了logo上。

时间: 2024-10-27 01:46:02

网页界面设计中的明暗的相关文章

界面设计中的那些版式-图版篇

  这篇主要说一下版面和图形使用,对高手来说可能有些老生常谈,但对移动端界面设计或许会有点参考价值,用几分钟看看吧. 界面美不美,除了构图之外,另一个重要手段的就是如何处理留白,也可以理解成版率.留白就是为了凸显层次.突出内容. 手持设备屏幕较小,决定了信息显示是有限的.用户有效接受信息并不与界面内提供的信息量成正比,有的时候提供的越多,用户反而真正接受的越少.妄想满屏都是信息是不可能的.用户越来越受不了满屏的信息了. 让用户接受该接受的有效信息,是关键. 在设计界面的时候,因为内容和页面都比较

对称性交互—界面设计中的重点

对于界面设计,很多人都很好奇,实际上,在界面设计中,对称性的信息呈现方式非常普遍,信息等价并且均匀分布在规则的几何图形周边能带来和谐的比例与平衡.在交互设计过程中,让用户的操作流也以对称性的方式完成,我们称之为对称性交互(Symmetry of Interaction).比如iPhone手机的开关机过程,都是以如下流程进行: 开关机作为手机常用的一套相关操作,其设计思路也采纳了对称性交互原则,让两者遵循同样的流程进行,很容易理解和学习.事实上,大部分手机的开关机都是通过同一套流程或者同一个按键控

浅析网页界面设计——首页设计

杨科宇曾发表过一篇文章<浅析网页界面设计--首页设计>,文中为我们分享了如何进行首页的界面设计.现转载于此,供大家借鉴学习.全文如下: 首页设计,需开宗明义突出主题 开宗明义,无论是对于一篇文章.一场会议或一部专题片,还是对于一个网站来说,都是必不可少的.那么能为一个网站开宗明义的地方(标签)就是Title(标题)和Description(描述.副标题),而能够为Title和Description提供进一步诠释的就是网站的首页. 展示哪些信息 页面的重要性是建立在它所呈现信息的基础之上,反过来

圆形元素在界面设计中的运用

  圆形元素在界面设计中被广泛运用,从常见的圆形图标到圆形的头像,又或是圆形的轮廓形状.圆形是一种特殊的形状,它能够在众多几何形状中被我们快速地注意到.也正因为如此,在使用圆形元素设计界面时会有一些注意事项. 一.圆形头像 放眼望去,圆形头像已然占领了我们的手机.不妨看看下面举的这些例子,如下图所示. 从左到右依次是搜狗地图.QQ.Instagram.当然,还有很多其它的例子,就不一一列举啦.此刻,肯定有同学已经按耐不住要跳出来反驳了,微信和Facebook就不是圆形头像,不信你看下面两张图.

深聊界面设计中的动画原理

  这篇文章是关于变速过渡效果的,看似简单,但真正想让动画自然流畅,还需要深入了解动画的基本原理.今天我们将会逐步学习:基本概念.探讨加速减速,拆解缓冲曲线,最终学会运用到界面设计中. 你认为这两个球在做什么? 绿球弹跳很明显,但是红球在怎样运动?当然,它像绿球一样上下运动,落下和弹起所用的时间和绿球一样.然而,红球感觉很机械,而绿球让人感觉它确实在弹跳.为什么我们会有这种感受上的差异呢? 答案是变速过渡效果(Easing). 1. 时间和空间位移 (Timing and Spacing) 首先

网站界面设计中应该避免的六个错误

网站的界面设计是否精美决定着你的网站是不是足够吸引客户?很多设计师很迷茫,到底网站该重功能还是重设计,无法去满足所有用户的需求.下面小编为你总结了在网站界面设计中应该避免的六大错误,教你怎么留住客户. 避免程序太过复杂:必须使你的客户从打开网站到完成交易的整个过程都非常简单.安格瓦斯基表示,评估网站设计优劣时首先要站在顾客和浏览者的角度思考.从用户的角度出发,是作为一个网站最先应该考虑的.要让客户买得舒心才是最终目标. 避免全而不精:一个网站不可能面面俱到.仔细挑选要放上网的内容,精心组织,做到

移动界面设计中的渐变

  iOS7采用了色彩新鲜的渐变效果,老实说,每个设计师都应该掌握这种最简单的装饰技巧.而且渐变效果千变万化,好的渐变效果能够成就一款设计,而糟糕的渐变效果会毁了一款设计.渐变效果的好坏取决于"色彩调整"以及"整个主题的搭配度".除此之外,渐变效果还可以根据"流行色"来进行适度的调配.现在流行使用霓虹灯色彩般的渐变,让人感觉光鲜可鉴,再加上纤细简约的字体,线条简练的图标,整个界面将变得非常极简且高雅. 今天我们要探讨的可不是渐变,要探讨的是移动界

深色调网页界面设计注意事项

深色调的网站设计是比较流行的,它能营造出简洁.富有创造性的效果. 它能满足一些客户对网页设计风格的要求.然而,它并不能适用于每一个客户对网站设计风格的要求,设计师应根据实际情况而定. 尽管深色调的设计风格能做到引人注目的效果,但很多设计师不知道如果有效的使用它来打动.吸引浏览者. 深色调网页设计经常出现的问题是不易读.没有吸引力.很少打破传统的设计模式. 这片文章,我们将讨论一些如何让你的下一个深色调网页设计更能吸引.打动广大浏览者的方法和技巧,真正做到让你的设计表达你的创意. 最近的http:

ios开发中storyboard界面设计中的约束功能

首先约束的设置菜单在打开storyboard界面的[Editor -> pin -> ...]菜单中,这里面有几个功能: 设置宽度,高度: 这个作用不明显 设置两个view之间横向和丛向的距离: 设置view到superview的上下左右的间距: 设置两个view等宽,等高: 我觉的第三个功能拿来做不同尺寸自适应非常好. 看一下设置的例子,例子中我们做了两个元素等高额的约束,但是发现1处有个红点剪头,而且2处结束线是橘色,说明这个约束没有设置完毕呢,设置完毕应该是蓝色的线条.那我们点击处的剪头