1.5 网页UI的设计风格
在制作每一个网页时，都需要根据行业、用户、场景等因素确定网页设计形式，其中需要了解的有网页设计风格、网页配色和页面元素等内容。首先来了解一下网页的设计风格。
网页的设计风格多种多样，读者在了解了每种设计风格的含义与特点之后，再结合业务需要来最终确定网页产品的设计方案。
1.5.1 拟物化风格
拟物化风格要求网页中的一些元素在外观上模拟真实物体的材质、质感、细节、阴影和光亮等特征，并且要求网页中的人机交互也模拟现实中的互动方式。
虽然拟物化的风格设计可以向浏览者传达丰富的人性化感情，但拟物化本身就是约束，在网页设计上过多使用，会限制功能本身的设计。图1-29所示为早期的拟物化风格的网页UI。
图1-29 早期的拟物化风格的网页UI
提示
在扁平化风格流行之前，主流的设计风格是拟物化风格。在拟物化风格盛行的时候，网页中主打产品或者主流模块都有一些类似的设计美学，比如使用一些立体、内阴影和外阴影等特效。刚开始看到这些界面元素的时候，大多数浏览者会觉得惊艳，但是看久了就会觉得不过如此。另外，拟物化风格有一定的排他性，如果将网页中的图标设置成拟物化风格，各个图标的风格就不能统一，会让浏览者觉得网页UI非常混乱。
1.5.2 扁平化风格
扁平化风格的核心设计思想是去除冗余、厚重和繁杂的装饰效果，具体的表现是去掉了网页元素中多余的透视、纹理、渐变及3D等特效，这样可以让“信息”本身重新作为核心凸显出来。同时在设计元素上，需要强调元素的抽象、极简和符号化特征。如图1-30所示为扁平化风格的网页UI。
图1-30 扁平化风格的网页UI（1）
扁平化风格并不意味着完全去掉设计元素的立体效果。左侧网页中的六边形有一定的立体效果和透视角度，使网页效果更具美感。同时，扁平图形可以更加清晰地反映模块的功能。
在众多的扁平化风格设计中，iOS系统的页面元素以简单和纯色为主进行设计，微软的网页设计则以单色和极简的抽象矩形色块为主，它们的特点是大字体、极简和现代感十足。图1-31所示为扁平化风格的网页UI。
图1-31 扁平化风格的网页UI（2）
既然是扁平化风格，那么它的总体趋势还是以简单和最少化为主。扁平化风格设计主要有5个要点，分别是极简、贴切、圆角、中性和鲜明的对比。
提示
扁平化风格诞生于2008年，由Google公司提出，代表作品是移动端的iOS 7.0及以上版本、微软的Metro UI和Windows 8。
1.5.3 极简化风格
极简化风格的设计特点是追求极致简约的呈现效果，并且不接受违反这一形态的任何事物，消除作品对用户的压迫力，追求形式上的简单极致、思想上的优雅。图1-32所示为极简化风格的网页UI。
图1-32 极简化风格的网页UI
极简化风格被越来越多的设计师认可并采用，不仅因为它的界面简单、整洁，便于用户理解和操作，还因为它在提升网页的加载速度、页面屏幕兼容度和用户体验愉悦度等方面的作用巨大。
1.5.4 3D风格
3D风格是在扁平化风格之上，增加了少量的3D效果。这样可以为网页添加灵动性，如果再添加一些非扁平化元素，也可以给网页UI带来原本缺乏的维度感和纵深感。图1-33所示为3D风格的网页UI。
图1-33 3D风格的网页UI
这里所说的3D风格不是使浏览者感到身在3D环境中，而是运用少量的3D效果，使网页UI显得更加灵动，同时提升主体的视觉吸引力。
1.5.5 插画风格
插画风格的特点是网页元素圆润、呆萌、可爱、有趣和简洁，网页元素也可以是演变的线框图和Q版卡通画等。插画风格多种多样，其中一种网页UI如图1-34所示。
图1-34 插画风格的网页UI
提示
插画是一种常用于网页设计中的媒介，它可以打破疏离与沉闷，创造轻巧、灵动的质感，从而使网页UI变得温和、亲近和可爱。在网页中使用插画的目的是将文字内容、故事或思想以视觉化的方式呈现，使文字表达得更加清晰和生动。
1.5.6 低多边形风格
低多边形风格的设计特点是网页元素具有立体感和科技感，大概率下元素为三角形，面又多又小。这些多边形元素可以将浏览者的情绪进行高度渲染，同时搭配柔光效果，给浏览者带来不一样的心理暗示。
设计者可以使用多色元素，将三角形进行分割，每个小三角形的颜色，可以取自原多色元素的相应位置。图1-35所示为低多边形风格的网页UI。
图1-35 低多边形风格的网页UI
低多边形风格又被称为Low Poly风格。Low Poly原是3D建模中使用的术语，意思是使用相对较少的点、线、面来制作低精度模型。
提示
多边形本身是中性元素，它是色彩的天然载体。当设计者想要设计一个由强色彩主导的网页UI时，首选的网页元素是多边形。
1.5.7 无边框风格
无边框风格是指没有使用各类边框的网页设计，这里所说的边框是指任何类型的装饰性容器，它通过去掉这些装饰性容器来加强网页基本内容的设计感。图1-36所示为无边框风格的网页UI。
图1-36 无边框风格的网页UI（1）
通过运用大图，将有着同等层级的内容用同一种表现方式表现，提升了产品的格调，体现了简洁不简单的设计理念。爱彼迎官方网站将有规律的内容通过卡片和大图的方式展现，页面无一根分割线，简洁大方易识别。
例如，注重图片质量和排版布局，将网页中的图片进行最原始的放置，从而提升网页整体因无装饰性容器的视觉表现。图1-37所示为无边框风格的网页UI。
图1-37 无边框风格的网页UI（2）
以大图为主，图片本身就可以切割。例如，有些网页在发布图片时，会选择让用户对图片进行裁切。内容有规律，留白间距上下的内容最好是相对一致的、重复的和紧密联系的，这样用户浏览时就会有意识地将其划分为一组。在一般情况下，小众产品的网页功能相对比较简单，这样的产品比较适合使用无边框风格。
1.5.8 纵向分割风格
纵向分割风格的设计特点是将屏幕一分为二，甚至是分为多栏。在网页UI设计中使用纵向分割风格设计可以方便呈现不同的信息，制造左右对比的效果，同时划分网页的有效区域，方便用户进行快速选择和视觉聚焦。图1-38所示为纵向分割风格的网页UI。
图1-38 纵向分割风格的网页UI
提示
纵向居中分割页面：使用纵向线分割页面时，分割线居中就等于均等分割页面，当视觉偏向左边时，页面会更具有母性，即内向型。相反，如果视觉偏向右边，页面则更具有父性，即外向型。
纵向分割且左侧面积大：当页面被纵向分割时，左右排列的内容就会具备一种包含时间的隐喻。左侧面积较大时，会表现出回首过去、经典的感觉，或者暗含过去的属性。
纵向分割且右侧面积大：右侧面积较大时，就会显得更加外向和具有攻击性，有种面向未来的感觉。因此这种分割布局会呈现出一种前进的感觉。
横向居中分割页面：横向居中的分割线，会将页面分成上下两个均匀部分，这种布局方式同样具有时间性，上部代表未来，下部代表过去。当核心信息放在上半部分时，就会呈现一种明确的指引性。横向分割且上部面积大：上部面积较大时，上部所带来的压力感会让页面显得稳定、平和，在时间性方面，会呈现出对未来的希望和期待感。
横向分割且下部面积大：下部面积较大的网页布局，靠下部分的内容会自然而然成为视觉的重心，给浏览者带来一种压抑的感觉，更容易展现出权威性和经典感。
对四周进行切割居中布局：将四周均匀切割后，留白会使居中的视觉元素更加引人注意，自然而然就会使人更加聚焦，这种分割方式非常适合在呈现特定内容的时候使用。
1.5.9 超级头版风格
超级头版风格的设计特点是在网站首页上使用尺寸超大且美观精致的banner来表现网页主题。因为这个超级头版集合了设计师对产品的精华总结，所以这是网站将最重要的主体内容展示给用户看的表现。图1-39所示为超级头版风格的网页UI。
图1-39 超级头版风格的网页UI
提示
在以往的网页设计中，各种网站都喜欢使用轮播图片的效果。虽然这种设计方式在许多网站的首页上仍然适用，但正在逐渐失去吸引力。取而代之的是采用核心区域或元素，也就是主题图或者超级头版来装饰网页UI。