网页动态设计案例分析

　　第五章 案例分析

　　简洁主义风格深受用户的追捧。近年来，部分网站的网页设计采用简洁大方的版面，其中以欧美为代表的"化繁为简"的网页设计风格逐渐掀起潮流，我们称之为"极简主义".

　　由于受到国际设计潮流的辐射影响，近年来，在出版设计、包装设计、服装设计等领域掀起日式风格的极简主义、人文素材、装饰设置等风潮。人们对手持设备的关注度在这些年来不断上升，原因在于人们浏览网站的渠道不断拓展，同时也指引了小尺度屏幕电子设备实现精简化设计的转变。例如苹果公司的电子产品凭借其简单大方、精巧设计的风格深受用户喜爱，指导设计新思潮。网站的专业性不断提高，人们不再盲目寻找多个网站完成事情，而是选择专注一个网站把事情尽量做得完美，因此，精简的设计发展空间弹性不断变大。

　　设计师的图片设计效果、情景气氛创造等往往能反映出设计师对极简主义的理解。这里所指的简单并不是通过对元素的增加或减少来达到美化目的，不仅仅为了简单了设计，而是根据设计师对页面的把握程度利用取舍原则实现最佳表达效果。设计师的作品贯彻自己独特的风格，能够展现个人对美的理解，其设计的页面必定是细节和画面布局恰当，整体色调和谐。

　　极简主义风格设计最适合用于多图网站页面设计。

　　极简主义的网页设计，如图5-2-2,使网页摆脱以往一个内容一个网页链接的状况，使所有内容简单呈现在用一个页面上，利用分屏布局使画面呈现简洁大气的效果。随着极简主义的兴起，掀起了单页网站的潮流。为了赢得更多用户的喜爱，许多人性化简单趣味的元素被添加到网站中，贯彻了设计者对网站设计的独特设计感，使网站摆脱以往单调乏味的设计，取而代之的是饱含趣味的设计。

　　推特网站的小鸟 LOGO 给用户留下了深刻印象，受到了大众的喜爱，成为其他网站 logo 设计争先模仿的对象。出现这种现象的原因有以下几点：第一，中小型的服务网站不断涌现，第二，蝴蝶效应现象。

　　第三，设计师在网页设计上做出了极大突破，打破了以往只注重网页设计规范性、整体性的情况，取而代之的是根据的用户情感需要，设计出带有灵性和趣味性的网站，满足用户的情感需要，赢得用户的支持和信赖。第四，网页设计呈现出多种类多方面的发展局面。

　　下图利用自然素材营造一种自然活泼的气氛，打破了以往页面设计带来的枯燥感，凭借高饱和度的用色搭配，使画面带有亲切感和清新气息，带动用户的愉快情绪。

　　传统设计对设计师的影响网页设计这种新兴设计领域在继承传统设计的精华同时也在与时俱进不断发展。在网站的页面版式布局方面，设计师从传统的设计中追求突破，目的是为了寻找更好的表达方式，杂志版式的布局至09年起受到热烈追捧，许多大型新闻网站不断寻求变化吸引用户，其中杂志版式布局中的Wordpress Themes最为设计者喜爱。以times媒体网站页面设计为例，其网站的版式布局融入了传统媒体网站设计的精华，产生出新的设计亮点，例如标题的大小强大主次、竖排版式布局等等。这些改变不仅仅是对传统媒体网站的精华传承，还表达了一种敢于融合创造的精神。

　　相比国外，国内多数网站采用信息量集中的页面版式设计，横向分布区块，缺乏画面动感。

　　由此可见，国外的网站设计更趋于简单设计，趋于将页面内容推向二级频道，使网页简洁大气，版式布局具有一定的引导性，画面的舒畅感使用户增加对其的阅读兴趣。国内的媒体网站信息量过于集中，这是由于商业广告的价值差距所造成的，其次，页面的引索模式使用户的随意阅读感减少，阅读兴趣大大降低。国内的网站布局难以通过生搬硬套国外网站布局寻求突破，原因在于我国的网站信息量集中以及浏览模式难以改变。

　　国外的网站设计借鉴传统网站设计模式，除此之外，还借鉴了着名的栅格系统（Grid System），栅格系统是传统的版式设计表现手法之一。栅格系统是利用规范性元素和几何元素形成版式，其诞生到运用时间已有300年。实际上，传统的栅格系统被运用到网页设计系统中，不仅仅作为一种设计工具，还代表了一般大众的审美标准。

　　无论是继承还是突破此标准，都是一种进步。

　　风格的独特性带来的影响。

　　网站设计的趋势众说纷纭，有人认为大多数设计者所认为的设计潮流是网站设计的大方向，有人则认为营运 Top100的网站才是网站设计的发展趋势。但是，这两种说法都不是绝对正确的，涉及多种因素，营运 Top100的网站未能代表设计上的趋势，而最为保守的说法就是，它们极有可能为了巩固地位而不愿意冒风险。但是，这些网站多少影响了大部分用户的审美标准。尽管大部分设计师愿意尝试接受风格上的突破，但是对于个人风格设计和商业化设计上的取舍，他们的选择却很难一致。具有代表性的设计方向与个体的个性化小众设计相互影响，因此，我们不能忽视那些受人喜爱的小众设计。然而小众设计大多存在于博客和 Profile 站。以下所提及的涉及小众网站中的几点在一定程度上影响了部分大众网站的设计。

　　采用更大的标题、更突出的标识以及更大的 header 区更利于加深用户的记忆，更大的 header 区相比于更多的内容，更利于用户对品牌形象加深。

　　背景添加适合的纹理线条许多年前，有部分设计者将纹理线条添加至页面背景中，但产生了浮夸的效果，这是由于美化手段不够成熟。现今设计师将纹理线条融入服装电子商城页面，利用成熟的美化手段如水泥纹理美化，低调展现其独特风格。

　　利用页面 footer 部分以下为设计者将部分内容放在网页的 footer 部分，此设计借鉴了博客的网页设计。

　　吸引用户眼球，必须注重页面设计格调设计者利用心理学和视觉对比效果，指引用户了解产品，这点大多数运用在与商业销售有联系的网站设计上。更引人注目的高质量图片和标志被运用在商家希望得到用户留意的方面上。苹果网站的设计体现出其专业性和创新性，能直接吸引消费者的眼球，苹果风格受到众多应用 APP 设计者竞相模仿。

　　苹果4发布时苹果网站首页突出产品，去掉与产品无关的信息，更直观表达出产品的优势，紧紧捉住消费者的眼球：

　　不难发现消费类型网站更趋于向消费者展现高质量的产品图片，直观吸引消费者的眼球，打动消费者的心。

　　近年来，电子商务网站开始流行起高质量的产品摄影图片直接罗列在页面上，精心挑选的抠底图片配上简洁线条背景，无疑能打动消费者的心。Slideshow 的应用也越来越普及，实际上 Slideshow趋于在图片中添加恰当的信息，使用户在阅读中更容易接受信息，加强阅读的流畅体验。

　　页面中利用可视化图表，更直接表达数据，使用户更加深入了解其内容，因此，这种方式也受到普及应用。

　　高效交互交互在网站设计中有着举足轻重的地位，因此大部分设计师侧重强调网站中的交互，目的是为了使用户更关注界面，但是也会因为过度关注局部细节导致整体上的设计失败。过于集中的交互信息会引起用户反感，恰当分配信息，避免造成过度交互的情况尤为重要。设计师将会完善信息结构避免过度交互，利用上下文菜单隐藏收藏反馈意见。交互的设计风格开始向简洁自然风格转变。

　　coda.co.za 的网站交互反馈设计效果自然简洁。

　　以下是鼠标滑动至某张 CD 时，通过隐藏右侧 CD 显示某张 CD 的信息，这种反廊设计更具有阅读流程感。

　　近年来，快捷键能够在网页浏览过程中被使用，快捷键在网页浏览中的使用提高了用户的阅读效率，提高了用户的阅读兴趣，同时也为部分视力不好以及没法使用鼠标的用户提供简单快捷的操作方法。

　　国内的网站设计师相对与国外设计师，对于网站设计的改变并没有太多革命性创新，这也是由多种因素所导致这种情况的出现。

　　与此同时，国内许多设计师生搬硬套国外设计师的创新理念，例如Templates 概念被国内设计师生搬硬套，这种情况不仅仅是给国内设计界带来不良的风气，更是无形中摧毁业界从业者的劳动价值。

　　为了使网页更具有活力，更能捉住用户的眼球。根据上述分析，不难发现国内网站的设计上缺乏美感，在拥有完善的网页功能的前提下，增强网站的设计美感。

　　为网站添加美感的同时也要遵循一定的美化准则，恰当利用多元化的美化形式，为网页增添光彩，提高了更多用户的阅读效率，帮助网站树立形象。下面展现各种美化方式，并且说明如何利用这些美化方式为网站增添光彩，以此解决审美不足所造成的网页设计问题。

　　设计行业受到科学技术的影响，使更多的设计师拥有更多的创造空间。更多的公司和设计团队在设计方面融入了自己的创意，摆脱了以往单一的网页设计局面。在跟随时代设计潮流步伐的同时，探究当今网页设计的发展状况。

　　1. 个性化排版。

　　在个性化排版方面，现代网页设计者更趋向于字体个性化的发展，利用自己设计的个性化字体代替以往规范性的字体，增加网页的独特性，更多的设计师融入自己独特的风格设计页面，这也是作为一名个性化排版热衷者所希望看到的趋势。设计字体服务的网站随之产生，部分网站在帮助客户设计个性化字体的同时仍然保留其印刷风格，例如"Stuff and Nonsense"网站。

　　2. 扁平化设计。

　　在十大趋势中，我们提及到模仿现实事物，把手机元素设计得更贴近真实，这种设计我们称之为"借壳"设计。"扁平化"的极简主义往往把设计的焦点放在应用的用户体验情况以及应用在实际中的运行效果，而不是仅仅关注在图标的精美程度以及形象设计上，这种设计实际上是与"拟物化"的设计理念相反的。

　　Apple 公司将"扁平化"的极简主义设计理念运用到其所有的产品设计中。Apple 公司为行业的设计提供了总体方向，因此，电子产品的设计趋势都开始模仿 iOS7的"扁平化"设计理念，网络设计也兴起"扁平化"潮流。

　　利用大背景图片是网络设计中最为流行的方式。

　　大背景图片（large hero areas）一般是指整个图片铺满屏幕，配上几句简单的文字。网站首页一般利用大背景图片。大型背景图片的清晰程度有所不同，有的采用模糊的图片，有的则使用高清图片。曾经风靡一时的幻灯片插件被大背景图片替代，幻灯片的滚动显示无法适用于现代社会中，而大背景图片则更能吸引用户的眼球。

　　4. 移植手机阅读体验。

　　随着社会发展，人们对手机设备产生更多依赖，交互网页设计跟随社会的脚步，开始关注手机的交互网页设计效果。手机设备将会成为人们日后浏览网页的重要方式，因此，设计师所设计的网站在手机屏幕上的显示效果将会受到特别关注，同时手机屏幕的大小尺寸也将会成为设计师在网站设计过程中所要考虑的因素之一。

　　除此之外，凭借带有滚动设计的"网站"为读者提供邮件订阅服务，同时加快网站加载速度，大大增强用户体验程度，添加社交媒体功能开拓更多潜在用户。

　　视频在网站设计中显示出绝对优势，假设用户面前有一段视频和中文内容介绍，大部分用户都会选择视频了解内容。尽管视频插件受到网络流量的限制，但是网络硬件的发展使其得到逐渐普及应用，网络视频相比文本所传递的信息量更为丰富，而且随着社会的发展，网络视频制作成本越来越低，网络视频与社交网站相互兼容，因此，网络视频将会越来越普及运用在网站设计中。

　　6.长滚动网页。

　　现代网络页面设计更趋于页面两侧留白，原因是人们习惯利用手机的滚动页面方式去获取信息，导致网络设计受到其阅读方式的影响。前几年的下拉式网页不受用户待见，但是随着手机用户的不断增多，这种阅读方式越来越普遍。除此之外，阅读内容排版上也跟能让读者接受。为了使用户更方便浏览长网页，国内部分网站设有"点击返回页面最上端"功能。事实上，用户普遍都只是向下拉网页，不考虑网页的实际长度。

　　7. 简单配色。

　　人们审美需求的变化体现在网页设计的配色方案中。为了遵循"网站配色简单化"的概念，同色系网站设计已经成为设计主要内容，其颜色限制至职能用1到2种配色。

　　上述图例只采用了一种配色，简单用色的趋势逐渐明显，但也并不是所有网站都只采用一到两种颜色，部分网站设计上忽略用户，之间使用黑白设计或者黑白渐变过渡，有的网站在网站中只添加一部分色彩达到吸引用户注意力的效果。

　　8. 内容简化。

　　2014年，社交互动网站出现了新的突破，采用简洁有力的短信息发表自己的观点，我们称之为"King Content".缩短的信息内容采用推特风格令用户更容易接受。现今网络中很少出现多于250字的内容介绍，人们更趋于快速浏览的阅读方式。

　　9.弃用分栏模式。

　　网站摒弃分栏模式展示内容，采取单栏模式显示内容将会成为趋势，通常博客会采用这种单栏模式，但是越来越多的网站整合内容，使用单栏模式。这种更为简单的网络设计，使所展现的内容更具条理性，同时能使读者的视觉体验效果良好。

　　这种单栏设计网站的优势在于能将分散的内容整理集合在一个页面上，大大提高了读者的阅读效率，使用户能更好的浏览内容。

　　10. 修图。

　　网站的插图是网站的亮点之一，为了使网站插图更具有个人风格，可以采用 Instagram、ps 等美图软件，通过滤镜效果、层次叠加以及锐化图像等使图片更具有不一样的效果。

　　比如上图中的 Seattle Cider 公司大背景图，采用了滤镜效果调色，营造异国乡村效果，更多的图片将会通过美图秀秀等美图软件进行适度美化被设计者利用到网站设计中。

　　11. 异类设计元素。

　　为了加强图片的张力，新生网站还会采用各种元素混合搭配成一种独特的网站风格。HTML5插件为网站设计增添趣味。其他新奇元素必将在未来逐一向我们展示以满足我们的视觉需求。

　　网站设计师对网站的设计要把握尺度，不能过度扩张，要适当留白美化网站的画面感。网站设计师的审美要有一定的标准，因为如果不能很好的把握画面的取舍标准，网站的画面感将会因为过于简单而失去风格，变得庸俗。

　　现今，更多的设计者在寻求能够打动用户深层次需求的灵感。

　　他们针对用户的情感需求，在设计中融入自己的情感，更好的与用户产生共鸣。为了实现与用户的互动，设计者摆脱以往陈旧单一的设计风格，逐步网趣味性的网页设计方向发展，取悦用户。比如，推特的形象深入人心，其小鸟 logo 功不可没。

　　在网站的页面版式布局方面，设计师从传统的设计中追求突破，目的是为了寻找更好的表达方式，杂志版式的布局至 09 年起受到热烈追捧。这种网络设计的突破，使网页简洁大气，用户在阅读过程中感受到画面的舒畅性，从而增加对其的阅读兴趣。

　　有人认为大多数设计者所认为的设计潮流是网站设计的大方向，有人则认为营运 Top100 的网站才是网站设计的发展趋势。站在专业的业界人士的立场上看，用户的体验度是否良好才是衡量网站是否成功的标准之一。假设在没有了解用户的阅读习惯以及审美标准的前提下设计网站，即使内容再丰富也同样不能吸引用户。