初级网页设计案例（初级网页设计案例分析）

本文目录一览：

• 1、9个视觉惊艳的网页设计思路(一)
• 2、分享网页设计的案例分析
• 3、25款独特且走心的“关于我们”页面设计
• 4、案例解析,UI设计中的视觉引导技法!
• 5、用文字作为主体排版的15个网页设计案例

9个视觉惊艳的网页设计思路(一)

如此一来，将可以大大的减少页面的读取时间和改善网页的性能。 保持干净和简单（即：简洁） 一个好的网页设计不光只是看起来好看而已，还要是用户友好型的。

网页设计中最重要的原则之一就是一个网页中不能有超过两种字体。寻找好看的字体也是一个项目的重要组成部分，但我想提醒你的是，你永远不要在同一个网页中使用两种以上的字体。选择字体的原则是让用户容易阅读，尤其是对于有很多字的页面。

第靠前、无边框设计。无边框设计在近几年比较流行，在设计页面的时候，将页面中的风格线、边框删掉，用间距来代替的一种设计方法。无边框设计一般是以大图为主，图片本来就是一种分割元素。

始终记住商业目标产品背后总有商业目标的支撑。为了达到这个目标，设计团队需要梳理出哪些UI元素更为重要，根据他们的角色排优先级，比如在电子商务网站上的所有元素各自都有他们的任务。

把事情简单化 可读性是关键。你绝对不想过度使用书法字体，以至于读者几乎无法弄清楚你所写的字。事实上，使用标准字体可以更好地吸引读者，因为大多数人都熟悉它们。

分享网页设计的案例分析

1、绿色+白色+暗红色 如下图所示，主色调、辅色调HSB模式的数值可看出，主色调与辅色调是同一种色，只是在明度上有所不同，让页面多了些空间感、层次感。由于绿色本身的特性，所以整个网页看起来很清爽舒适。

2、网页设计的风格多种多样，但插图风永远不过时。插图可以让设计师尽情地表现他们自己丰富的创造力和想象力，将插图运用于设计之中也会使网页变得更具有趣味性。

3、图形化 图标可以发挥各种各样的作用，指示作用，装饰，甚至作为纹理都可以。这个案例中，设计师用小图标来搭建问号，告知用户他们所寻找的内容并不在此。

4、而这一点上，与小编经常使用的一款名为Mockplus的原型工具，不断追求更快，更简单地设计，制作，测试，分享和迭代网页或软件应用原型的设计理念是不谋而合的。Mockplus对你创建简约而极具魅力的网页设计非常有用。

25款独特且走心的“关于我们”页面设计

1、Anakin 的关于我们页面同样是让用户填写联系信息，不过在表单的设计上更加独特，并没有专门的表单，而是使用占位符提示用户各个位置需要填写的内容，贴心、直觉，也非常走心。

2、要设计结构化的页面，栅格总是你最好的朋友。Urban Influence 的关于我们页面使用栅格来组织整个页面的信息，需要展示的内容，让用户输入的部分，装饰性的部分和展示用的地图，都界限分明地分布在页面上。

3、Mike Kus 的“关于我们”的页面设计采用了独特的双色配色，前景色是黄色，背景色是红色，双色搭配的优势在于它极强的凝聚力，这样的风格通常厚重而复古，而且可以很好地强化品牌色给人的感觉。

4、关于我们页面的设计原则 关于我们页面是让网站访客能联系你，以及了解公司团队成员的一个重要入口，在此，我整理了9个创建优秀关于我们页面的设计原则，适合新手学习/查漏补缺。

5、引导用户行为 当用户浏览了你的关于页面后，不妨给他们一个继续跟你的站点发生点什么的选项。

6、·针对关于我们页面和行为召唤按钮等进行个性化设计 作品展示页应当精准地反映产品和服务本身，同时应该保持足够的清爽和直观，将令访客分心的元素尽量去除。著名的预构建主题网站 Be Theme 就是清爽直观这一特色的完美呈现。

案例解析,UI设计中的视觉引导技法!

一个好的UI设计师通常有很多技能，比如图标设计、美术设计、交互设计、网页设计、动态设计等，涉及移动端、PC端、多媒体端等多个领域。

线条： 视觉引导 与数学不同，设计中的线条可以有宽度和深度。 实际上，这种视觉元素构成了它们中最通用的元素，因为它可以显示许多其他形状、图案和纹理。可以用线条来引导我们的眼睛看向某些事物，或者把事物彼此分开。

封闭法则。当我们看到一幅残缺的图像，我们就会脑补上它的全貌。这样的表达方式往往会被用于LOGO的设计，同样会被用于界面设计。接近性法则。在眼睛里可以看到相邻内容，这样就可以减轻阅读内容所带来的压力。

案例：比如在设计按钮的时候，会做实心按钮、水晶按钮、幽灵按钮、文字按钮、图标按钮，根据层次的不同来引导用户的操作流程。

用文字作为主体排版的15个网页设计案例

Fino Par黑色的背景也挡不住一个吃货的心。餐厅大名在整个页面用特殊字体居中显示，悉尼的这家餐厅网页设计也是吊足了食客的胃口。浏览网页 NFB/Interactive这里有另一种摇滚风格排版是与一个怪异的音频添加到网站的整体氛围。

Degordian这个网站充分运用了对比强烈的大背景和具有冲击力字体（Futura）的组合（这也是目前网站设计的一个大趋势），网站另一个值得称赞的地方是它用的正文字体：Merriweather。

这个网站的排版设计可以称得上上一石二鸟。别具一格的排版设计绝对称得上独特，它不仅展现内容还作为标识而存在，此外它还具有导航的功能。

听起来玄乎，不如看看别人家的案例来的直观。 0 醒目的色彩和鲜亮的配色 严格的色彩搭配和醒目的色调选取，使得Rook 的“关于我们”页面的设计看起来简单而突出。醒目的金色贯穿整个设计，从LOGO到图像、排版都保持着一致性。