网页设计中的破图3 法 - 海淘科技.pdf

网页设计中的破图3 法 网页设计，web design，又称为Web UI design，WUI design，WUI，是根据企业希望向浏览者传递的信 息包括产品、服务、理念、文化，进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传 物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。 网页设计中的破图3 法 什么是破? 破：行话“破画面”。 是打破规矩与常见的一种设计技巧，它类似于平面构成中的变异处理。 破图的作用  让人眼前一亮  有吸引人的视觉焦点  打破条框的约束  增加画面层次 今天我要分享的目录有 一、破图的2 种应用 二、破图的3 种方法 点破 大破 小破 _____________________________________________________________________ 破的二种应用： 一破：破常规 打破一些常见的设计形式，或整体，或细节。这些都可是“破图”的常用方式。 二破：破细节 在视觉元素与版式的局部，图像与文字的局部等，做一些突破性的处理，用于加强细节表现力、提高整体 视觉的冲击力。 破图3 种方法： 1. 点破 2. 大破 3. 小破 1、点破 点破，是设计眼前一亮作品的开始。一个立意不同的点子，能更好的引导用户体验与众不同的视觉设计， 直观且讨巧的抓住用户的眼球，使之印象深刻，真正起到视觉传达的目的性。 点，指的是设计切入点。 破，指的是前期对需求、对目的的整理和分析，通过求异的设计出发点，找到与众不同的表现形式，从而 点出整体风格的第一步。 左图：某国外矿泉水的产品专题页设计 点破视觉的切入点就是：地表深处的矿物质水。通过突出产品优势，明确告诉用户产品的与众不同之处是 什么?设计师通过整体页面设计，直观的让用户了解到产品的来源(深挖地表深处几千米矿物质水而成); 右图：中国的卫龙辣条天猫官网设计 点破视觉的切入点就是： 老乡，加入我们一起抢辣条吧。页面里各种“纲领性”的文案，鬼畜风的gif 动效，满屏清新脱俗的大字报风 格，让人感觉瞬间穿越回了60 年代。“老乡，加入我们双11 抢辣条，”模仿了史上最成功的广告，再加上 一句亲切的承诺：“全村包邮”。从文案策划到视觉表现都非常不错，打破了双11 来临前各种店铺，翻新式 的促销设计。 _____________________________________________________________________ 点破在设计中怎么用? 下面介绍3 种常见的处理手法： 1.故事的场景化 看图1: 酒类网站：点破视觉的切入点就是：设计师以霓虹灯管与造型各异的装饰元素为主，直奔主题;斑驳的肌理 背景哄托出墙面的质感与洒吧的氛围感;霓虹灯光的装饰元素扩大出现，形成独特风格;带有渐变的大字母 与清晰的产品拍摄，让用户细细品味产品特色;霓虹光的变化，是这个网站的特色之处，也是设计师抓住了 最本质元素的体现; 2 页面的故事性 看图2: 宣传官网设计 点破视觉的切入点就是：(利用视觉滚动技术还原汉堡从到封装再到体验店的过程) 页面视觉营造出一个欢快有趣的汉堡世界。 看图3: windows 一代一代的变化史 点破视觉的切入点就是(以时间的角度还原变化的时间) 从1985 年到产品蛋生 再到 蓝屏的DOS 界面(PS:当时学校用的还是win 还有版本的选择，那会的机箱还 是横着放的)，到win95 的时候 微软发布了第一代操作系统 WIN95 ，深灰色的开始菜单设计 竖着的主机 箱!1998 年的时候 增加了光驱和QUICK 一款音频、视频的软件;到2001 年的WINXP——再到2015 的 WIN10 扁平处理; 3.文案的画面感 看图4 银泰3 周年庆预热会场设计 文案以“泰给力 5 折封顶不留余力”为主，给人一种即将上演的价格战一样“惊心动魄”。设计师也正好通过 对文案的深度诠释，把整体设计构思出一种一种“引爆”的紧张感; 大破  大破是对常见设计，常见手法的另类思考。  大，指的是从整体上做大幅度的风格设计。  破，指的是打破传统的排版和布局。 下面介绍3 种常见的处理手法： 1.破布局 网页设计中的布局样式，在2013 年前大部分都以中规中矩、模版化的方框风格为主。给人比较呆板和约 束的感觉。而在此之后的几年间，逐渐的以卡片式、大色块、扁平化的设计趋势为主，在整体的布局样式 上打破早前的“方