网页设计【视觉篇】-课件

网页设计：从界面布局到视觉表现基础篇界面交互篇视觉表现篇综合案例篇视觉表现篇视听元素网页视觉设计要点网页视觉风格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是一家数字媒体设计公司，其官网采用了复古风格，混搭的英文手写体和无衬线字体，仿报纸的版式布局、版画风格的插画再加上经典的黑白配色，让复古也变得既有韵味又时尚。波西米亚文学网选用了复古的视觉表现，旨在为对波西米亚文学感兴趣的人群宣传波西米亚的文化魅力。泛黄的明信片、被腐蚀的硬币被错落有致的叠放在一起，作旧的色调弥漫出复古的韵味。Jolly duck是一家经营彩旗制作及古董瓷器收藏的网站，其官网用一副聚餐的插画作为背景，其复古的绘画风格，低纯度的色调使得整个网站既有历史感又不失时尚。8.5.1 中式传统风格特点 8.5 中式传统风格 中式传统风格是指以中国的传统文化为基础，研究该民族的视觉欣赏习惯和视觉审美心理，使其网页设计展现出独特的艺术个性。传统风格的网页设计适合应用于以传统文化和艺术为主题的网站中，面向的目标用户是知识分子或喜欢古典设计风格的人。8.5.2 应用及分析故宫博物馆官网选取了如意纹、这是一种吉祥寓意纹样，雷纹，以连续的方折回旋形线条构成的几何图案，以二方连续的形式展开，烘托主题纹饰。页面以画轴的形式展现给用户。8.6.1 立体风格的特点 8.6 立体风格 立体风格就是通过光影、重叠的表现手法及最新的H5技术等，将传统的二维网页的设计成三维立体效果。如今很多设计师尝试通过深度视觉来创作出拥有立体效果的网页作品，颠覆网页平面、静止的形象，令网站界面变得更有趣，拥有更好的用户体验。8.6.2 应用及分析gardener and marks网是一个提供室内设计及延伸服务的网站。网站以房间的一面墙作为背景营造了开阔的视觉享受，而各种家具摆放的前后位置及靠近的物体间的投影让整个页面立体感倍增。Limbus设计工作室的官网也采用了立体风格，透过二维的显示器，我们看到界面已经被分割成了多个立面空间。背景是一个白色的三维空间，网站运用了javascript技术让一个小人还在其中穿梭，而全局导航感觉浮在这个空间之上，且文字与图片用阴影分开其前后关系，感觉创意无限。rainforest guardians网是一个公益类型的网站，它呼吁大家保护热带森林。当打开首页就被热带雨林的鸟瞰图所震撼，拖拽鼠标或滑动鼠标滚轴还能任意调整角度并走进雨林的某个部落。