短短几年内，网页设计领域就焕然一新。 现在，全球范围内活跃的设计师比以往任何时候都多，他们都在研究创新的项目创意。 这些趋势背后的概念是通过专业的图形设计师开发的。
您可能需要数月甚至数年才能完全了解构建用户界面的技术。 您需要考虑页面元素的大小和位置，以及文本和标签的可读性。 借助少量的空闲时间，您可以探索一种极简主义的方法， 以更少的内容来构建网站并减少混乱。 即使到那时，也要考虑许多其他设计技术。
在本指南中，我将一些现代的用户界面设计技术与可下载和使用的免费赠品配对使用。 我希望这将为那些对构建图形/网页设计的职业感兴趣的人提供一些动力。 甚至专业的网页设计师也可能会发现其中一些趋势对您的下一个项目很有帮助。
练习完整模板
如果您具有从头开始设计自己的布局的技能，则无需从模板开始。 另一方面，从完整的设计开始，再到更精细的细节，初学者可能会感觉更舒适。
对于投资组合，主页，博客和许多其他类别，有一些完整的PSD网站模板的出色免费下载。 这些是入门的理想设计，以使您熟悉“常规” Web布局。 每个网站对页面元素都有不同的需求，您必须确定哪些项目很重要。
这是Martin Fabricius设计的PSD示例，称为“ AppCivilization”。 该布局适用于设计移动应用程序和网站的创意工作室。 在底部，您会发现一个小应用程序图标面板，显示在投资组合中。 您还会注意到整个设计在水平方向上分为页眉，顶部幻灯片放映，主要内容和深色页脚。
设计登陆页面
让我们看看同样由Martin设计的另一个免费赠品。 下一个示例是登录页面，您可以使用该页面来销售任何类型的产品。 通常，这些是可以由用户下载的数字商品，即应用程序，照片，图标，模板等。
但是他设计的最好之处在于，它对于初学者来说非常灵活。 标头仍然使用带有大图像的顶部导航，但值得注意的是，预期的用户操作有所不同。 他有一个很大的“买它！” 按钮位于折叠上方。 在产品着陆页上，这比jQuery幻灯片更引人注意。
另一个很棒的UI技术是页面中间显示的小型iPhone功能。 Martin包括iPhone预览图，App Store按钮和一小部分主要功能。 当访客在寻找产品详细信息时，您无法比通过格式化列表简化一切。
更多模板：
这是我们通过时发布的几个免费PSD模板：
您可能还会对以下这些内容感兴趣：
主站点导航
菜单和按钮只是用于构建更大页面元素的工具。 不可否认，您网站的主要导航功能具有非常重要的意义。 您需要它，以便可以通过移动用户可能的后备方法轻松访问您的站点。
下面是带有拼接纹理效果的超酷导航栏。 高亮样式可以表现为深色框或指向页面内容的向下提示。 多年来，这种风格一直很突出，并且在正确的环境下看起来很棒。
原始来源– 下载
另一个类似的免费赠品是Edi Gil设计的这种带纹理的标题导航 。 我非常喜欢第二个导航栏同时包含链接列表和一些其他页面按钮的方式。 您需要向访问者提供辅助链接，使他们可以在网上找到您的个人资料。
替代菜单样式
除了典型的水平导航栏外，还可以考虑其他样式的设计。 垂直链接可以分为不同的子标题，从而为页面内容留出更多空间。
每个标题均根据所选对象进行扩展和折叠。 此外，该设计还允许在每个类别的右侧放置少量计数器。 最好将其填写为博客导航，以计算每个主题下提交的帖子数。
导航技巧/教程：
清洁Web表单
互联网的现代时代远非静态的聚会场所。 用户每天都在不断共享信息并相互交流。 大多数文本和媒体共享是通过Web表单进行管理的。
我们应该仅看几个示例，说明如何设计外观简洁的表单输入和按钮。 您的元素的设计可以大大地邀请您的访客实际使用它们。 反过来，这也可以建立您的网站信誉并获得更多的浏览量。
登录字段
有一些很棒的登录表单PSD检出示例。 通过WP Scientist进行的这次免费登录拥有您所有的标准要素。 登录/密码的两个输入字段，一个提交按钮和用于管理会话cookie的复选框。
如果您可以通过jQuery实现效果，则此设计模型是完美的。 右上角的箭头使您想到了弹出式窗口设置。 这是一种出色的技术，可以通过隐藏表单直到用户单击注册链接来节省网站空间。
设计师Gil Huybrecht可以免费下载以下表格。 他使用了类似的图案，带有颗粒状的背景和纸张纹理。 我特别喜欢Gil的设计是“过大”的元素。 登陆整个页面的登录表单要友好得多。 用户可以轻松地看到他们正在键入的内容，并且混乱程度更低。
如果您有使用CSS3的前端开发经验，那么将图形转换为代码非常容易。 您甚至可以为按钮和输入字段实现选定的外部发光效果和圆角。
联络人
您几乎可以在每个网站上找到的另一种形式是联系表单。 通常，这将包括发件人姓名，电子邮件和邮件内容的字段。
以下免费赠品是使用自定义纹理和图标的绝佳示例。
该设计还使用占位符文本而不是标签。 这意味着在第一次加载表单时，每个字段都设置有默认值（例如：您的姓名）。 但是，当您开始键入时，占位符会清除，而是显示您的内容。 所有符合标准的浏览器都将支持此效果，并且可以节省页面空间。
另一个很棒的免费赠品是由才华横溢的Jonno Riekwel设计的此选项卡式联系表单 。 这种设计更加简单，并且在每个输入上方都具有标签。 对于需要通过公司不同部门发送消息的大型企业或初创公司来说，这是一个很好的解决方案。
联系表格教程：
丝带和横幅
仅在6或7年前，流行的设计趋势就开始出现圆角现象。 现在，我们在投影和边角色带方面走得更远。
原始来源– 下载
其中一些元素可以用作设计要点，例如评论计数器或博客的发布日期。 上面缝合的功能区非常适合您想要吸引访问者注意的项目组合或项目页面。 您也可以尝试使用类似的垂直功能区 ，将设计从顶部插入。
这些微小的页面效果确实可以大大改善布局。 参观者会注意到，并会喜欢这些审美趣味。 但是请考虑一下，小角带只是这种设计趋势的一部分。
此外，全幅横幅设计已在树立品牌知名度方面大受欢迎。 您可以在徽标，导航，主页甚至特色博客文章中使用这些内容。 具有良好的设计功能实际上几乎是无限的。
包角
另一种非常特殊的功能区横幅效果是通过将设计包装在页面角周围来执行的。 这将使您的页面具有3D效果，并且功能区缠绕在您网站的顶部。
下面的设计100％免费下载，可用于您自己的项目构想。 您可以看到这将如何吸引访客的注意，以及这种趋势为何变得如此疯狂。 注意不要过度使用标语。 总体而言，这些效果会非常令人讨厌，就像旧的“ web 2.0”光泽/镜面效果一样。
用按钮设计
除了超链接，您还可以通过按钮最大程度地吸引访问者。 这些页面项可以在jQuery和Ajax调用的帮助下执行任何操作，除了您还可以使用按钮链接到静态内容，例如免费赠品下载！
下面是由Matt Gentile设计的UI套件，它不仅包含按钮。 他的PSD设置对于希望通过渐变和纹理构建相似形式的初学者而言非常理想。 通常，您会在UI套件中找到质量更高的按钮，而不是单个PSD。
如何创建变体
当您花时间练习这些技术时，随着时间的推移，您将需要创建许多不同的样式。 这可能会导致在不同的项目和布局之间切换相似的按钮。 一个很好的例子是设计师Robert van Klinken提供的乳白色按钮设置。
原始来源–下载
原始的三个按钮中的每个按钮都有不同的渐变样式，但悬停状态和活动状态看起来很相似。 在Photoshop中工作时，必须在渐变之间匹配颜色或将颜色移动到效果层上。 有了这种了解，您甚至可以构建自己的按钮免费赠品集供下载！
原始来源– 下载
木材+纸张纹理
当您需要提高基本布局设计的趣味性时，您将不得不采用更加巧妙的方法。 如果可以通过CSS背景或设置宽度的内容正确实现纹理，则始终欢迎使用纹理。 我见过的两种最受欢迎的纹理是木材和白纸。
记事本的想法确实很简单，但是它可以作为用户界面元素的一部分，也可以融入整个布局中，成为一个很酷的品牌设计。 但是，纸张本身并不总是看起来最好，而另一种纹理可能有助于样式的融合。这是更详细的木质纹理可以发挥作用的地方。
图像将突出显示，并包裹在外壳中，看起来很棒。 纹理的整个概念是给您的网站一种特定的感觉或情感。 木主题可以唤起家庭和自然感。 Jeremiah Wingett甚至提供了一个很棒的木制Web UI套件供下载。 如果您有创造力，请尝试将一些自己的纹理放在一起，看看它们在基于Web的环境中的表现。
结论
最好的网页设计师是那些每天练习并且永远不会让自己的失败影响最终目标的设计师。 您必须做出响应，并从成功尝试和失败尝试中Swift反弹。 本指南中的技巧和免费赠品应该是开始学习如何为Web项目构建不同页面概念的良好起点。 我们想在后期讨论区中阅读您对此事的想法。
89
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
