您现在的位置: 万盛学电脑网 >> 程序编程 >> 网页制作 >> 交互设计 >> 正文

腾讯美女设计师教你乾坤大挪移

作者:佚名    责任编辑:admin    更新时间:2022-06-22

   时间短、没点子、没创意,又要快速捕抓眼球,怎么办?

  对页面整体进行旋转和平移是快速改变视觉是快速有效的方法.它打破了正常的网页视觉习惯,吸引了观众的注意力。

  说说 —— 旋转和平移

        小编推荐:

 

  腾讯美女设计师教你如何抄现实

  腾讯美女设计师教你欲擒故纵

 

腾讯美女设计师教你乾坤大挪移 三联
乾坤大挪移

  如果每天要面对着巨大的需求量,难免有创意枯竭的时候,如果有一些相对讨巧的办法,能够不受主题限制,当然是再好不过的,这时候,我们不防试试这简单的小办法。

乾坤大挪移

  旋转和平移,这是针对整个页面的大版式而言的,到底会造成怎样一种效果,我们继续往下看。

乾坤大挪移

  图一:一张优质的稳定的摄影图片。

  图二:旋转后的不稳定构图使图片显得活泼动感而有趣。

  图三:重心右移,打破对称的构图增强了画面的紧张感。

  这种最快速改变视觉结构的简单方式,可以快速的运用于网页中吗?

乾坤大挪移

  图一:我们正常的页面版式,居中对齐,稳定整齐,稍显呆板。

  图二:画面中心旋转30度。

  图三:整体画幅向右平移。

  看起来似乎可以这么干,但它也将给我们带来其它一些细节上的难题。

  想想 —— 整体旋转、背景旋转、综合旋转

乾坤大挪移
乾坤大挪移

  旋转适合的页面及其产生的效果

  旋转打破了画面横平竖直的呆板,旋转后的视觉更加轻松活跃,旋转构成的斜线条也可以产生运动和速度感,所以许多运动的、刺激的、具有速度感的主题适合直接旋转处理,另外运动、速度衍生出年轻的、时尚的之类主题也可以适用,轻微的旋转也可以使画面更贴近于自然的生活状态,增强真实性与亲切感。但在开始旋转设计改造之前,一定会有人产生这样的疑惑。

乾坤大挪移

  旋转可能会给我们带来以下一些问题

  1.信息量的限制

  由于旋转的构图,斜线与面边面框最终会有一个交界点,可能导致信息不能无限制的延续

  2.排版的限制

  由于旋转的形式需要整体的配合,而有部分素材无法配合旋转就会比较花时间去归纳处理。

  3.浏览舒适性问题

  由于角度倾斜,打破了习惯性视觉在提神的同时也会给浏览造成一定的困难和不舒适。

  这些都是我们需要注意和解决的问题,带着这些问题,我们一起来看看旋转的一些潜规则。

乾坤大挪移

  在斜排布时注意几个要点,以免影响阅读。

  1.非内容必要原因。文字尽量保持一定规律排布对齐。

  2.非内容必要原因。并列内容尽量使用同一变换角度。

  3.图三为正确的变换方式

  在简单的图示下,这些错误看起来显而易见,但在实际的操作中,由于多种因素的干扰我们往往忽视这些问题。

  在排版过程中无论如何我们都要尽量让依造某一规律对齐,在画幅已旋转的情况下更应该保持理性。旋转基本可以分为以下几种类。

乾坤大挪移

  1.整体旋转:

  背景和内容一起旋转,需要注意两条边缘线,一是保持旋转的边缘线整齐,另外也要注意旋转后的内容不能超出1000宽度。为了兼顾信息的阅读性,背景和内容的同时旋转的角度尽量不要超过15度。

  2.背景旋转:

  背景旋转,信息内容保持不变。这种旋转即可以产生旋转的视觉形式感,又可以保证文字信息的阅读性,是比较推荐和常用的方式。但信息排版同样也受到斜线的1000宽度的限制,在具体操作中需要进行细节的调整。

  3.综合旋转:

  根据内容结构进行有选择的部分旋转。通常选择内容文字较少的SLOGAN跟随背景一同旋转共同达到旋转的形式感。信息量较多的正文保持水平不变,以方便阅读。这种方式也是经常被使用到。

  PS:黄底为1000宽度的内容面积、蓝底为背景面积、白色虚线为1000宽度标准线、SLOGAN(主视觉标题))、文字、圆泡泡(图素)图片组成简易的网页示意图、透明背景为增阔的信息面积。(对于1024用户的最大网页宽度的定义,不同的公司有不同的标准,通常是在1000~1004范围,为了美观,设计上通常可多保留一些外边距。)

  看看 —— 歪脑袋让世界与众不同

乾坤大挪移

  一、整体旋转

乾坤大挪移

  这是”一句话小说”征文比赛的活动页面,作者用手写的方式来表达,通过小小的旋转把手写的轻松状态体现出来,增强页面的亲和力。整体旋转可以减小旋转的角度,以保证信息的阅读性。

  二、背景旋转

乾坤大挪移

  我们可以看到这个页面的文字信息基本保持着水平的状态。黑色与白色的背景的斜切面构成了整体的形式感。黑白的对比和贯穿页面头尾斜线条都让页面的视觉产生了强烈的视觉冲击力。不过在大刀阔斧的形式感设计背后,文字的排版还需要小心斟酌处理。这个页面统一采用了右对齐的方式。左侧文字的排版也恰好与斜线相契合。这需要我们在制作过程中对内容进行一定的编排和修整,以使其整体看起来更加舒适。

  三、综合旋转

乾坤大挪移
乾坤大挪移

  这两个页面排版形式相近,它们都选择了头部SLOGAN旋转的形式,并把SLOGAN和正文明确分割开以避免角度的不同造成的阅读干扰,信息量较大的正文置于下面保持水平。这样的方式让页面形式感和阅读性并存。

  做做——QQ 西游却桥难

乾坤大挪移

  一、QQ西游难之鹊桥难

乾坤大挪移

  需求分析:

  这是《QQ西游》新版本发布的广告落地专题,新版本的名字叫”鹊桥难”,而这个版本也将结合七夕这样一个节日时间点正式发布。”鹊桥相会”也成为了画面的主要视觉。

  传统思路:

  说起鹊桥相会或者七夕,我们的第一直观画面大致是以下两种类型,剪影的男女相会,脚下踩着一座桥,亦或是穿着情侣套装的男女相拥,身后云彩朵朵……对于一些没有情侣套装的游戏人物,有时只能将两只目露胸光的,喔打错字,是凶光,目露凶光饱含杀气的的男女主角硬是凑成了佳人一对。不过素材的限制有时也是比较无奈的,暂时抛开素材的问题,想想我们如何在这种传统表现手法的基础上让自己的网页稍显特别呢?

乾坤大挪移
乾坤大挪移