Photoshop中网页的设计规范

时间：2023-09-26 03:00:01 | 来源：网站运营

时间：2023-09-26 03:00:01 来源：网站运营

Photoshop中网页的设计规范：亲密性在网页中主要表现为对于内容的主次关系、逻辑关系、层级关系的梳理和表达。

和其他设计作品一样，混乱的内容排版会让用户不知道从何看起，对于完全不懂设计的的客户看过 之后就会给你来一句：“我也看不出哪里不好，可就是感觉不舒服”之类的反馈，很多设计师就很 苦恼，抱怨客户也不给个明确的反馈窓见等等…

遇到这种情况我们就要反思，虽然看起来客户的这种反馈没有实质内容，可比起就说一句“不行” 的那种客户好多了，往往是我们在设计的时候忽略了内容的主次关系或者是逻辑关系造成客户阅读 时的混乱和不舒适造成的。







PS：关系越紧密的项越让他们形成一个整体，同时与周围的项又存在着某种联系，不能让他们孤立 的存在，让用户在浏览的时候能明确主次关系和逻辑关系。

对齐 Alignment

对齐在网页中主要是为了让元素和元素之间有个隐藏或者显而易见的视觉关系，和上面讲的亲密性 有着类似的效果或者在设计时同时存在相扶相依的关系，这里说一下设计的每个原则都不是独立存 在的，它们都能增强页面元素将之间的逻辑性和主次关系。

在设计时遵循对齐原则能让你的作品变得更有依的据，不会让客户说一句：“你为什么要把这个放 在这里？”这种问题塞住。





案例2-1加上了辅助线后我们看到各种不对齐和不统一，调整后看上去更整齐更容易阅读。就像我 之前说的设计要严谨，不要怪你的主管或者总监有一双钛合金狗眼，哪怕一像素也要你对齐了，其 实都是对作品的负责。







案例2-3这是一个常规的长版页面，我想说的是很多童鞋做稍微长版的页面的时候只看到眼前的那 一屏经常是往下做了之后就忘了上面的页面关系，很少整体去看页面关系。所以如果没有大局观的 话就要多回头整体看一看审视一下自己做的页面。

有的童鞋会说：“那网站怎就必须要这么做么？ ”当然不是，举这个例子是让你了解当你没有能力 做那种高端设计的时候这样的思路起码能让你有个良好的习惯做出一个干净整洁的页面。有心的童 鞋可以看看那些高端的网站，优秀的设计其实都是有规律可循的。







重复 & 对比 Repetition & Contrast

重复的原则在网页中是某些网页元素的重复或者是网页结构的延续，包括配色等等。

有的网站首页酷炫，但是到了内页后经常给用户一种跳转到了另一个或者多个网站的感觉，我们不 仅要注意首页的页面统一，点击到内页后也要保持首内页风格的统一。

在设计层面重复本身也是平面构成的一种，重复的元素和形象可以给人一种和谐与秩序的美感，同 时我们也可以进行差异性处理，在重复的结构中做一个差异的点（视觉重点），可以突出页面的重 点，在网页中常用于banner图的制作。







对比在设计中是十分有效抓住眼球的手段，能高效的进行信息传达。对比的手法有很多，除了上面 的元素之间的对比，还有比如色彩、留白、落差、特写等等方式方法这里就不一一举例了。

这里把重复和对比放在一起讲，是因为之前说过设计的四个原则往往都是互相影响同时存在的，独 自存在的时候很少见。

大家能在上面的案例看到亲密性和对齐的存在么？

总结

遵循基本的设计原则可以让我们在新手阶段做出的作品更严谨，更容易快速的入门，但不代表高端 优秀的设计就可以抛弃这个设计原则了。大部分的商业作品熟练运用这几个原则就可以做出比较成 熟的首页效果图了，当然还有其他要重要的方面，咱们以后接着讲。

设计是一个制造矛盾解决矛盾的过程，可能我们现阶段做的没有那么理想，但是这都是循序渐进的 过程，要有质的飞越还是需要一定蚩的积累，只要你简坚持下来总会有收获，前提是你是否知道你 在做什么。

关于上一期得到了一些反馈，比如

有的同学反馈说HTML5的页面已经可以控制渐变的适应了，在这里感谢反馈，同时如果你们做的不是HTML5的页面，那还是要注意下的。毕竟HTML5在中小企业建站的使用中还不普遍。

注意事项：

网页上的阴彩和渐变可以有但是要考虑切图制作的便利，如果没有必要尽可能的不要斜面拉渐变或 者是渐变交锚。

举个栗子：

感谢你的阅读

还有什么实用技巧，可以在下方进行评论!

我会一一进行整理，然后继续更新。

需要领取更多资料、教程或者软件阔以加下学习交流君羊哟！(6516+34667)