赏析2017年度高端网站设计模板主题集简易网页设计教程你也可以做到

2017-12-10 03:34 Author: Chris Song

做网站设计可以没有天赋，但是一定要多看多实战。今天我们一起分享我从业13+年网页设计得到的一些心得，希望对刚刚入行做网页设计的同学有帮助。接下来我将会以经典案例的讲解方式来展开。

当我们的设计稿出来后，通常得到的来自无论设计总监，同事，还是顾客，反馈通常是2种结果。“哇，这一稿设计很有感觉！”“不错！很有设计感！”“这个版式很大气，很有创意”。除了这种反馈，另一种则是“说不出来哪里不好，就是没有什么感觉”“你们的设计稿没有特色”“太简单了，我都可以做出来”“画面有点脏，不够干净简洁呢”“不够高大上，不够国际化”云云...

其实，不管他们说的是哪一种，其实归根起来，说的很可能就是我们的布局版式设计过于正统，还有就是视觉最聚焦的地方没有经过精心思考、策划和设计，以至于从宏观上看整个设计稿，表现平平，从细节上看，也只是简单的对齐排列，没有层次感，没有灵动的设计元素和组合。而其他方面，例如配色配图及功能模块比例，甚至内容呈现时的交互都非常别致，整体上看也很有品牌的统一调性，但是就是少了点出彩的东西，所以过稿率大打折扣。

针对这些问题，我们今天通过一些经典案例来简单讲解一下，我们可以在往后的项目中尝试着这样去做，看看过稿率和高频率是不是可以大幅度提升。

犹抱琵琶半遮面

在网页界面设计上的犹抱琵琶半遮面，说的就是通过内容之间的互相错位或者简单遮挡，来营造一种神秘感，产生层次感。灵动的东西，就是不按常规出牌的东西。

优秀网页设计经典案例之一

Root Studio

这种设计技巧在印刷品上早有应用，但最近在网页或移动端界面上应用变得越来越多。这种设计手法好像明显违反了我们熟知的设计法则，故意用视觉元素把字体的一部分给挡了起来，但却看起来格外有设计感。

采用这个设计手法的意图是打破我们经常说的关于可阅读性，但能快速和读者建立连接的规则。毫无疑问，要用好这个技巧是有难度的，但如果执行得好的话能产生很有冲击力的视觉效果。

采用这个遮挡手法时务必注意：

1.重点是画面里得其他部分要尽可能的简洁，这样用户不会被眼花缭乱的设计给弄迷糊了。

2.在响应式页面上，要适当减少遮挡（这是很容易犯错的一个点，有时在桌面端效果非常好，但在移动端确出现错误）。

案例分析：

Root Studio的这个例子就做得很好。看的第一眼就被这大面积的纯色和长颈鹿挡住了一步部分的字体给吸引住了。这里的要点在于，即使这个字体被挡住了之后不妨碍我们知道这是个什么字母。因为设计的时候考虑了字体的尺寸还有长劲鹿的位置，所以这部分文字依旧还有很高的可读性。

优秀网页设计经典案例之二

Simply Chocolate

加上一些立体效果能让画面里的元素显得更跳脱一些，拉近与观众的距离感。在一些情况下，把字体作为背景是个不错的选择。

通过这样的处理，底下的文字从单纯的可阅读内容变成了更具装饰性的元素，整个画面从而变得更有层次感（感兴趣的小伙伴可以去它们网站看看他们这个系列的其他设计）。

采用这个表现手法时注意：

要确保上面的物体不要过分遮挡下面的字体，也要避免遮挡后变成另外一个字母的情况。

案例分析：

Simply Chocolate这个案例就做得很好。原因在于本身底下的文字是简单易懂的单词，字体也设置得非常大；同时上面的物件大小适中，而且物体上还有同样的单词。

降低对比度

这种风格说白了是对字体和其他元素之间关系的思考，所以你把字体和其他的背景元素的对比程度降低也能出效果。

注意事项：

1.这个地方又是难度比较高的，因为要把握好这个对比度，保证文字可读性。

2.当画面上有更显眼的文字的时候，这些降低了对比度的文字可以作为一种微妙的视觉补充。当用户看完那些高对比的文字，再自然地把视线转移到这上面来。

3.画面内容本身也是这个风格在这里奏效的原因。“Anew”和洁白的餐盘也是有较高关联性的，所以低对比度对于理解的影响又减少了一些。

案例分析：

在上面这个Anew的例子里，右上角对于品牌的描述身在这个情景下比品牌的名字本身要重要一些，于是被设计师凸显了出来。画面想要给观众传达“rooftop+test kitchen”这个重要概念，所以设计得更显眼，但用户同时也还是能识别出logo底下那个对比度比较低的“Anew”。

忘掉布局的规则

在一些情况下，只是进入到文字的栅格内而不是直接覆盖到字体上也有不错的效果。

案例分析：

North Street 这个例子就看似打破了秩序，中间那条线紧紧地挨着旁边那段文字，但画面却不显得混乱和细碎（整个网站基本上都沿用了这个设计元素）。这是由于大面积的留白，整个画面的视觉变得很简单；字体的粗细也刚刚好能把那条打破布局规则的细线衬到背景里去。

大部分观众可能没有留意到，设计师用画面里另一条细线在导航那里故技重施了一下。

首页首屏需要指定展示大标题文字时

这种技巧比较适用于粗大的而且简洁的字体。

小的文字的可利用空间不足，而且在使用这个技巧的时候，文字的遮挡最好能形成一个创意，这种在小文字上是比较难实现。所以由于创意和可读性的因素，这种技巧比较适用于大的文字。

案例分析：

这些文字通常用的是易于阅读的无衬线字体，有着中等的粗细程度，并且还有大的字碗和字怀（编者注：字怀就是字母所包含的内部空间，无论是否封闭，也就是字碗的内部区域。比如H或者n两个竖画之间的空间；字碗是字母中弯曲的圆形区域，如大写字母O或者小写字母e，字碗可以是闭合的也可以是开口的）。这样覆盖在上面的元素才有充分的施展空间。细瘦或者压缩的字体是不适合的，花哨和复杂的字体因为可读性的问题也是不适合的。

首屏大横纹上下功夫，区分下方的辅助信息

Janko At Warp Speed