10大优享服务
62项会员特权

如何做半透明网页设计才会显得高大上,网页设计必须get到这10个技能,请收好!

发布时间:2022-04-09 09:00:00     阅读次数:11165次     评论数:0次

  导语:快速发展的技术、千变万化的趋势、应接不暇的软件和素材,都是网页设计师需要面临的挑战。今天我们就聊聊如何做半透明网页设计才会显得高大上,网页设计必须get到这10个技能,请收好!

  如何做半透明网页设计才会显得高大上

  使用半透明元素来设计网页很美观也很需要技巧。半透明效果是指色块、文字或图片被“稀释”或者冲淡,使得颜色减淡,并且透出后方内容。

  执行到位的话,这种效果会非常震撼,能划出一块绝佳的文字展示区域,或者作为吸引注意力至图像某部分的手段。

  但是使用半透明时,设计师必须小心谨慎。这种效果很难处理得当,因为事关可读性。透明度使用错误的半透明块和文字也,会能散注意力,并且破坏整体设计效果。

  接下来看一套行为准则,附带一些半透明效果在网站上的优秀执行案例。

  通过半透明来形成对比

  选用半透明设计技巧的最大好处,是创造对比。这种效果可以让设计师通过色块、图片上的大字体或多种颜色层次来创造视觉焦点。

  半透明也可以在背景图不能很好展现上方文字时,将文字分离开来。

  使用半透明设计时尤其需要考虑对比。只有图片(或背景)和文字都可读时,半透明效果才是有意义的。当你考虑使用半透明效果时,问问自己:这是否有助于用户对图文的理解。

  避免遮挡图片的重要部分

  半透明效果不应该遮挡其下方背景或图片的重要部分。决定半透明层位置的时候,要清楚你“牺牲”了什么内容。用不同的透明度

  没有完美的透明度值。对于某些项目,80%透明度比较理想;对于其他的也许15%才是最佳选择。对每个项目采用不同的透明度。

  不要觉得半透明就能让文字更易读

  使用半透明色块来衬托文字并不意味着文字会自动变得易读。要考虑对比——半透明色块与文字、背景图与半

  透明色块两方面都要考虑。

  半透明效果用在图片、色块或文字上时,考虑文字的可读性至关重要。切记,如果设计效果致使文字难以辨认,你的信息将无从传达。

  在细节处使用半透明效果

  半透明并非只适用于网站的主体部分。这种效果在细节处也能大放异彩。

  可以考虑用半透明来展示导航工具栏,或者作为按钮和可点击元素的鼠标悬停效果。多种透明度不要使用过度。选定一种元素和透明度样式,然后使它贯穿整个网站的设计。

  不要在对比强烈的图片上放置半透明元素

  处于可读性考虑,最好避免在已经包含强烈对比的元素上使用半透明效果——比如黑白对比或色盘上的互补色。

  因为要在背景的各个部分都达到正确的效果很难,想在这类元素上使用半透明效果,除非强烈对比在你的设计中真的只起到负面作用。考虑用浅色块代替吧。

  将半透明作为一种艺术手法

  半透明不只是次要效果。可以考虑用这个效果为你的网站设计主画面。

  大尺寸半透明创造的对比、强调和视觉吸引令人震撼。

  不要将半透明作为装饰物使用

  半透明效果并非为了打破设计中的单调。把这种效果作为装饰物使用,注定会导致糟糕的设计。

  半透明效果的使用应该事先考虑和规划好。半透明不是加粗这类简单效果,处理不当看起来会很草率且不专业。

  在背景中使用半透明

  不只是设计前景元素时可用半透明效果,它也能用在背景图上。有些非常棒的半透明元素精细微妙。

  还有些半透明效果夹在图像层之间。例如Tony Chester的网站,就用了绝妙的半透明分层技巧打造了一件多维度的设计。

  不要同时运用过多半透明效果

  在每个项目中有节制地使用不同类型的半透明效果。透明度要能制造反差对比,产生视觉吸引力。这样使用过多的差异化效果,会分散用户注意力。

  在轮播图片上使用半透明元素

  半透明的使用不限于单页网站或静止网站。它在变化的图片和背景上也起作用。两种方式都可以用上半透明效果。

  在轮播图片上使用半透明,是该效果最棘手的用法之一。却也最令人印象深刻。慎重考虑多张背景图的情况。

  选用颜色和对比搭配相近的图片,这样只需一种半透明效果即可应对后方移动变换的背景。

  格外注意半透明效果与每张图的匹配程度,才能保证每张图的整体性,并创作出易辨认的照片或其他背景与文字,保持视觉统一。

  小结

  尝试半透明效果,是拓展设计技巧的一个绝妙方法。像很多其他效果一样,要有节制地使用这个技巧,并且在多种环境下实验这种设计,来确保它按你的意图运作和展现。

  半透明设计的最大挑战,是在轮播图片上使用时确保文字清晰可读,和避免半透明元素错误地遮挡下方图片。

  尝试多种透明度和使用方式——用于图片、背景、遮罩效果——来决定那种效果最适合某个项目。

  网页设计必须get到这10个技能,请收好!

  快速发展的技术、千变万化的趋势、应接不暇的软件和素材,都是网页设计师需要面临的挑战。但是撇开这些一直变化的东西,有一些基本的技能或者说能力,是设计师必须熟练掌握的,甚至需要网页设计师们闭着眼睛都能搞定相关的问题。那么,今天我们简单盘点一下网页设计师必须具备的十大基础技能吧。

  1、熟练掌握HTML/CSS代码

  不论你是不是开发者,网页开发最基本的语言HTML/CSS 你是有必要掌握的,知道如何阅读、编辑并解决问题。然而根据设计师/开发者的实际工作情况,你所需要了解的程度、范畴甚至会更广一些。

  在任何情况下,你都应该清楚样式、色彩要如何通过代码来进行控制和调整,从长远来看,这些技能是极其有用的。

  如果你想确保这一点,记得在W3Schools学习这些代码语言和使用方法。

  2、编辑图片

  在任何设计领域,好像和图片打交道的时间都不会短,绝大多数甚至是需要整天编辑处理图片。从最基本的裁剪、调色和修补,你应该能够从容地修整图片,至少你应该了解如何能够尽可能好地对图片进行优化。

  好在Digital Camera World网站提供了一套行之有效的图片处理技巧,仅需六步就可以搞定绝大多数图片的优化处理。

  3、了解印刷

  虽然你绝大多数时候可能都忙于数字化的设计,但是总会有一些设计是需要借助到印刷的。从名片到新闻稿,这些东西在设计之初就要为印刷做好准备。

  在这方面,最值得注意的还是不同媒体的分辨率和色彩的控制。举个例子,如果你将文本的色彩设置为FF0000的话,印刷出来的效果可能和你设定的有出入。对于印刷品而言,色彩使用的是CMYK(青色、品红、黄色、黑色),四色混合来实现不同的色彩印刷。

  4、书写标题

  在进行网页设计的时候,正文部分可用假文(Lorem ipsum)来作为占位符,但是标题则不能如此。当你在进行概念设计的时候,标题是视觉和内容信息的粘合剂,它不能随便找句话放那儿。

  一个合理的标题文本可以清晰地告诉客户这个地方要多大的空间,有什么样的效果,它会给客户留下清晰而持久的印象。

  目前推荐Copyblogger ,它提供了不错的文本和文案案例,你可有从这里开始。

  5、熟悉各种设备

  作为一个网页设计师,肯定要熟练地用各种数字设备来浏览网页。不同的系统、不同的设备在浏览网页这件事情上还是有差异的,所以你应当适时地离开自己最熟悉的电子设备,去尝试更多的数码设备。

  没有什么比在一个老旧的手机的小窗口上浏览网页更痛苦的事情了,但是这有时候就是实际情况,作为网页设计师的你应该对这种情况有所了解,确保自己的网页能在任何情况下都可以流畅地浏览。

  6、敢于手绘

  也许你并不是美术专业出身,但是你需要敢于用草图来传递信息。讨论中不论有什么样的想象和构思,用手绘和草图来表现能够更清晰的阐述出来。请记住,线框图和大纲才能更好地传递信息。

  你无需成为手绘大师,不用字写的非常漂亮,但是你需要敢于这么做,自信地用手勾勒出这一切,落于纸上,同人分享。

  7、使用通用框架

  在创业阶段使用常见的网页设计框架并不是什么丢人的事情,实际上,除非你真的是特别专业而强大的开发者,最好还是使用通用的框架。

  你不用重新发明轮子。一样的道理,使用通用的框架可以让别人也更好的使用你的网站和产品,如果你的网站需要最终交付给客户,那么从长远来看,用通用框架更好维护。比如Wordpress这样的系统就不错,支持广泛,功能强大。

  8、备份和打包

  网站看起来是个完善的整体,但是实际并非如此,它同样是容易损坏且脆弱的。备份网站是一门必修课。你应当了解网站系统中哪些东西比较容易损坏,多久备份一次比较合理。即使你不明白其中的道理,至少要了解哪些需要保存,备份应该备份在什么地方。

  此外,你应该了解如何将网站样式、设计相关、个性化、客户文件以及系统的关键性文件在哪里,以及如何打包它们。

  9、了解趋势

  你并不需要了解全部的网站设计和技术趋势,但是你需要适时地去了解它们。

  简单来说,重要的不是对所有趋势如数家珍,但是你至少要深入了解至少三个流行趋势,能够说明白这些设计趋势在视觉上的特征,为什么要用它们,它们的运作原理是怎样的,你为什么喜欢或者不喜欢它们,等等。多阅读设计趋势文章,你就能搞定这一点。

  10、解释设计理论

  色彩、流程、平衡、比例、间距,这些常见的设计概念你都了解了嘛?当你在进行设计项目的时候,这些概念你都应当了解并运用起来。设计并不是单纯的好看,内在的概念也原理能告诉你为什么它这样才会漂亮。理解了它们,能自己解释它们,你才能创造出平衡的美感。

  每一次向别人解释这些概念,探讨这些原理,你会对这些基础掌握的更加扎实。

  结语

  网页设计不是请客吃饭,对必备技能的扎实掌控是你走向成功必由之路。如果你对这些技能熟悉,那么能更好的做设计决策,更快更好的完成工作。如果其中有些部分做的并不太好,也不要纠结,这些基础的东西稍加努力就搞得定。

本文地址:
来源:一品威客,转载须经版权人书面授权并注明来源

留言(0

↓展开留言

该攻略尚无留言记录