设计稿提案方案华视影视改版

华视影视官方网站设计方案

赛博网景

2015.0121设计目标目标访客欧美影视行业网站港台影视行业网站内地影视行业网站华视首页设计稿分析设计目标

?1、色彩丰富、时尚年轻、国际化2、多屏合一3、数据管理目标访客

?1、圈里人（导演、演员等）2、圈外人（投资者）3、大众访客欧美影视行业网站华纳兄弟网址：/优点：logo视觉识别力强，图标颜色清新靓丽；缺点：非响应式设计，布局常规，无亮点；美国全国广播公司NBC网址：/优点：响应式布局，扁平化UI设计；缺点：部分内容视觉效果重复，引起视觉疲劳；HBO电视网网址：/#/优点：一屏显示，布局简约，大背景全屏视觉，展示效果开阔丰满；美国福克斯广播公司FOX网址：/优点：logo颜色随banner切换变化，右侧固定显示，左侧全屏切换，打破常规布局；米拉麦克斯网址：/优点：配色简洁，页面留白恰到好处；港台影视行业网站英皇娱乐网址：/缺点：布局混乱无重点，非响应式设计，风格老旧；寰亞傳媒网址：/可以完整的浏览页面的全部内容，但在宽屏设备上显示略显局促；内地影视行业网站华谊兄弟网址：/整体较简洁，但信息内容压缩罗列，破坏了整体视觉美感，logo使用混乱；海润影视网址：/整体布局无亮点，UI风格老化，文字信息较多且拥挤；新丽传媒网址：/布局无亮点，logo与整体不融；光线传媒网址：/只有简单的信息罗列，布局混乱无重点。华视首页设计稿分析方案一{你看到的灰白}

点击查看高清效果图纯扁平化，极简的设计风格灰色主体色，引用标志色作为整体色调的点缀色标志及标题居中显示，焦点突出，浏览流畅。logo居中显示，强化品牌形象，浏览体验更加流畅；一级菜单布局简洁，隐藏了不必要的信息；banner自适应显示，增加互动效果；鼠标滑过，剧照平滑右移并覆盖遮罩弱化图片，强调文字信息；艺人照片圆形化处理，结合目前设计流行趋势，区别于其他布局的方块化，避免重复；照片去色处理，渲染整体色调；资讯部分采用视差滚动效果，时间顺序感强，打破常规布局；合作伙伴的logo去色化处理，响应整体色调；网页的底部用大片深灰色叠加图片的形式，增加透气感，同时加重页面底部重量，平衡整体页面；方案二{趋光而行}

点击查看高清效果图页面布局紧凑，却不失整体风格酷炫；配色大胆，对比鲜明。通过亮色与暗色的对比，凸显影视剧网站的特点。黄色色块与线条结合运用，划分布局，使内容调理清晰；导航左侧分布，方便自适应布局；扁平化的小图标增加页面趣味感；有趣灵活的hover效果交互，鼠标滑过，剧照图片由无彩度变为高饱和度的彩色图片，信息对应出现；新闻资讯部分排版与背景图案协调，增加流畅感；方案三{黑色基因}

点击查看高清效果图页面方块磁贴紧密排列构成，响应式设计,从视觉体验的角度，为用户带来轻松、愉悦的美感；采用黑色和高冷的灰色，用最简单的方式表现最纯粹的视觉，更加有感染力。用户鼠标悬停在图片上时，图片由灰度照片恢复饱和度成全彩图片，同时呈现标题；菜单默认呈收起状态，画面的更多信息呈现的是影片的信息，通过影视剧的罗列，形成一种视觉的冲击力；当我们看惯色彩绚丽、对比鲜明的网页之后，静下来，回归最自然的状态，运用单纯的色彩，会有不一样的体会和感悟。点击菜单按钮，整个页面用程序实现整体的翻转效果，色调变暗，重点突出左边的菜单栏；有效的突出品牌高端大气的形象。方案四{无限延伸}

点击查看高清效果图导航右侧分布；主色调高级灰；剧照图片全屏显示，多终端响应式设计。大色块分割网页内容；大背景全屏视觉，交互和文字信息较为简单，图片尺寸根据屏宽大小自适应，效果更加开阔丰满。在视觉中心加上华视logo，更加强调品牌形象。利用纤细线框，将内容很好的分割，页面简洁而大方又不失品质；这种设计在确保功能性的同时，给人一种纤细的视觉美感。视差滚动效果；杂志化排版分格；大色块分割网页内容；方案五{星路过的晚上}

点击查看高清效果图logo居中显示；深色作为网站主体色；用高饱和度的色块分割来划分页面内容；亮色和暗色对比，营造出酷炫的氛围。导航背景提取logo颜色；banner图降低了色彩饱和度，点击即可播放视频；颜色活跃，对比强烈；分割流的排版布局，错落有致，使页面更加灵活；信息内容展示全面。方案六{平行主义}

点击查看高清效果图首页单屏显示，扁平化的设计风格，大图流设计；核心导航左边显示，重心突出；大部分导航在隐藏后整个视觉主打banner图，视觉冲击力强。二级菜单黑色半透明弹出叠加在banner图上，视觉差效果明显；点击右侧箭头，滑出更多信息菜单，banner图叠加点阵效果变暗，突出主要信息；通过适当留白和纤细线条，划分右侧区域内容；白色的背景提亮整体页面。点击艺人经纪，弹出部分艺人照片，信息简单明了；查看列表和关闭按钮组合颜色对比强烈，图标和文字结合，增加了页面灵活性；整体页面线条和色块的结合，使得各个内容之间排列错落有致；点击项目推介，弹出影视剧信息，鼠标滑过，剧照平滑右移并覆盖遮罩弱化图片，强调文字信息；方案七{潘达盒子怪}

点击查看高清效果图首页单屏显示，扁平