网页设计视觉篇3.pptVIP

标题: 字体: 微软雅黑粗体 字号: 32-36pt 颜色: 主题蓝色 副标题: 字体: 微软雅黑 字号: 24pt 颜色: 主题灰色 网页设计：从界面布局到视觉表现 基础篇 界面交互篇 视觉表现篇 综合案例篇 视觉表现篇 视听元素 网页视觉设计要点 网页视觉风格 8. 网页视觉风格 8.1 简约风格 8.2 影像风格 8.3 手绘风格 8.5 中式传统风格 8.6 立体风格 8.7 拼贴风格 8.4 复古风格 8.网页视觉风格 一个网站的视觉风格能反应网站性质、产品特征，能为用户愉悦感，帮助他们与产品间建立信任。本章将目前流行的网页视觉风格分为了简约、影像、手绘、复古、立体、拼贴六种风格，并结合大量的案例分析了各个风格的特点及应用场景。 8.1.1简约风格的特点 8.1 简约风格 简约设计是将设计回归本质的一种设计理念。简约并是对内容的简单删减，而是提炼设计精华，满足美观实用的本质诉求。在网页中，简约的设计，往往具清晰的页面结构、简单的交互操作等特征，在满足传递信息的同时，从视觉体验的角度，为用户带来轻松、愉悦的美感。 简约风格的设计由于内容展示较少，用于小型创意领域机构的官网较多，而电子商务类网站较少。 8.1.2应用及分析 一些媒体传播机构尤其亲睐简约风格，如意大利Bake就是一个跨媒体的传播机构， 其官网只用了简单的字母与图形作为设计元素，用有限的图形文字向用户传达出无限的想象；而单一的桔红单色系配色让人能立马记住其企业形象。 细腻的摄影与简约风格也仿佛天生是一对。如Thomassteibl是一家奥地利的婚纱摄影机构，其官网就十分简洁清爽。即便是婚纱样片的列表页也是甄选了九种，精简的内容与极简的形式高度统一。 尽管简约风格目前商业应用中还不太广泛，但仍有少数高端的小型商城选择了简约风格。 8.2.1 影像风格的特点 8.2 影像风格 影像包含了图片、视频两大元素。影像风格的网站界面特点是依赖大面积影像作品作为素材。网站在运用影像素材中有时采用清晰、写实的影像，而有时则是采用虚化或模糊的影像，具体使用哪种表现形式还是参考网站的主题而定。 8.2.2 应用及分析 Sanissimo是一家墨西哥食品企业的网站，虽然只有一个页面，却是综合使用影像元素与滚动视频差技术，将影像风格的魅力展现得淋漓尽致。第一屏左侧是模糊的静态视频背景，右侧则是清晰的食品。当鼠标向下滚动，则可以看到之前左侧模糊的静态视频开始播放，完美演绎了食物的诱惑。 Eva是一个移动社交应用，其官网首页以一个循环播放的视频作为一整个背景，静止的APP图片反而应用则显得格外突出。随后大量的图片在视觉上营造出分享视频的趣味性和娱乐性。 8.3.1 手绘风格的特点 8.3 手绘风格 手绘风格不同于常规的框架式网站设计，追求的是一种活泼随性的自由，整个页面更显得跳跃，多用于游戏或是儿童社区的网站设计中，但也有很多设计工作室或是设计师使用手绘风格来描述自己的日常生活或工作。 8.3.2 应用及分析 设计师Syster个人网站是典型的手绘风格。清新不失细节的水彩、轻松而自然的手写体、再配以柔和的色彩将该设计师亲切、注重作品品质的特性表现的十分到位。 jacquico是一家蛋糕机构，其官网中以大量厨房中的蛋糕制作工具作为网站的图形元素，手绘的线描表现形成独特的识别度，突出了其蛋糕品牌的真实性与独特性。该网站还采用了使用javascript 脚本实现的动态及拖拽效果，手绘搭配拖拽动态使得整个网站都鲜活起来。 Artattackk是一家创意公司,其官网轻松活泼的手绘卡通图形感觉将用户带入了创意无限的世界。再配上H5动效，体现出该品牌的年轻与活力。 Tfreak是一家涂鸦设计机构，其官网就是直接将涂鸦绘画作品搬上了网站，用户一旦进入网站就能感受到浓浓的涂鸦魅力。充满创意性的手绘字体亦字亦图，不规则的图形色块都彰显了无穷的视觉张力。 8.4.1 复古欧美风格的特点 8.4 复古西方风格 复古风格并非一味的模仿传统元素，而是将古代元素适当结合现代元素旨兴起古代元素的新风尚。复古西方风格往往借助西方古典文化中适合且别致的图形影像、文字字体、版式、配色等视听元素来反映古代的社会习俗 ，文化风尚等，从而表现出品牌在思想内容和艺术形式方面的追求高品质格。 8.4.2 应用及分析 Ride是一家数字媒体设计公司，其官网采用了复古风格，混搭的英文手写体和无衬线字体，仿报纸的版式布局、版画风格的插画再加上经典的黑白配色，让复古也变得既有韵味又时尚。 波西米亚文学网选用了复古的视觉表现，旨在为对波西米亚文学感兴趣的人群宣传波西米亚的文化魅力。泛黄的明信片、被腐蚀的硬币被错落有致的叠放在一起，作旧