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

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

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

   晋小彦(腾讯 TGI 高级视觉设计师,美女设计师一枚):抄现实是我们在设计中最直接也是常用的一种方法,它顾名思意就是抄袭现实中存在的物体。因为其结果直接与主题相关联,所以抄现实的方法可以让视觉整体,主题突出。它将抽像的主题通过实体的事物表达出来,并以之做为内容信息的承载体,从而在第一视觉上直观的体现了核心内容并突出主题。

腾讯美女设计师教你如何抄现实 三联
wps_clip_image-804

  这里所指的现实是任何可以被我们认知的可视的物体

wps_clip_image-3160
pp6

  选择物,是对主题视觉表现的选择。主题有抽像和具像。具像的主题一般比较好把握,如棒球比赛,我们很自然的选择棒球或球场做为主视觉。如果一些间接或者抽像的主题比如安全选择盾牌、压力测试选择压力表等,这些都需要我们发挥一定的想像。

  下面我们来一起看看这一颗棒球的网页变形记。

wps_clip_image-21970

  在还未翻到下一页前,你可以想像一下,假如这个棒球是一个网页,它会是什么样的?你会保留它的哪些特征让它看起来依然是一个棒球而非篮球,你会如何让它的形态和内容结合,你会如何利用它的形态关系使你的内容更有层次。给自己一分钟时间,不许翻页剧透。

  步骤分解

  STEP 1:减法

  为了不使形态干扰到网页内容的表现,通常情况下,我们会先对物的形态进行简化,使其在保留特征的同时更适合之后内容的安置。简化的步骤有两个:

  1.特征的提练,如案例中的棒球,它的特征有两个,一个是圆形的轮廓代表是一个球体,另一个是红色的缝线,代表它是一个棒球而非足球或篮球。

  2.审查删除重复的描述。特征提炼后,在保留棒球特征的情况下,我们选择去掉其中一根缝线,为信息腾出更多可操作的空间。

wps_clip_image-16587

  STEP 2:分块

  分块也便根据物的形态对网页的信息内容进行规划。主要有三个关键点。

  1.对信息进行消化。在充分的理解信息对之后的排版和信息调整有很大的帮助。这时也可以和需求方进行沟通对信息进行微调或收纳。

  2.在吃透信息后,我们就可以开始正式的分块,分块是一个逐层深入由粗到细的过程。

  3.分块完成后,我们结合造型进行一定的信息和造型微调。

wps_clip_image-28051

  STEP 3:加法

  进行加法前,网页大致的雏形已经出来了,之后加法的工作主要有三个。

  1.具体内容的填充

  2.气氛和视觉的补充,让整体效果更真实,如前景的人物添加始棒球的主题更明确,运动感更强。

  3.特征的还原和细节补充。不得不承认信息高于装饰。在确保信息的完整性后,我们在不干扰信息呈现的情况下还原一些原来删去的细节,如背景缝线的还原,选择了低透明低饱合的浅灰色,让棒球更真实。

wps_clip_image-14177

  当我们浏览这个页面时,强视觉冲击力的棒球大效果映入眼帘。简单的视觉扫描我们便立刻了解了这个专题的核心主题。结构清晰、主题明确,视觉强烈。这就是我们抄现实带来的直接而有效的视觉效果。

  总结

  抄现实的过程是利用现实物的原型来装载网页的信息内容,”抄现实”就像旧公寓改造,倘若我们将”抄现实”想像成一个旧公寓改造工程,假定我们和房子原主人有着不同的生活习惯,我们就需要拆墙,重新划分功能区,重新装修装饰。也正如我们”抄现实”的方法:减法、分块、加法。下面我们来具体看看它们的相通之处。

wps_clip_image-17348

  1.减法

  首先根据我们的生活需要,我们会选择一个形态大小合适的房子。这个房子要满足居住人的基本功能需求,整体的改造也需要核算在可操控的成本范围,选定房子后我们可能会先拆去原先的分割的围墙,方便我们不受限制的设计出更贴合现有需求的空间。网页设计也是一样,原先的细节经常是束缚我们想像和内容设置的枷锁。当然我们也不能无限制的拆墙,保留梁柱和承重墙是必需的,这也便是我们”抄现实”网页设计方法中提到的特征,房子必需还是房子,抄袭的事物必需能被识别,这是删减的底线。总而言之我们归纳为三点,一、选房要合适,选对房可以为后面的工作节省最大的成本。二、拆墙越干净操作的自由度越高,同时也要考虑重建的成本。三拆墙不能毁梁柱,保留梁柱和保留物的征一样重要,没有了它们,不论房子还是现实物都将不复存在。

  2.分块

  在功能划分前,我们必需再梳理一遍自己的生活需求,这正如我们在进行网页分区前所要做的信息消化。比如我们希望一个更大的洗浴间,或者希望将客厅娱乐与卧室一体化,这时候我们可以在房子的基本大轮廓内,结合管道的基本设置进行空间的重新划分。分块的这个步骤主要是解决功能性问题。满足功能需要才使我们一切行为变得有意义。网页设计中的这些信息内容就如同我们住家的吃喝拉撒睡,这些是最重要的。

  3.加法

  与分块解决的功能性问题相比较起来,加法解决的则是填充和装饰的问题。在做完分区并完善好了基础装修之后,我们就可以陆续将我们的生活用品搬进房子,配置家电、沙发什么的。这也正如我们网页设计中的内容填充。如果时间和金钱充裕我们可以购买符合自己个性的装饰物,调整灯光气氛等,让我们的生活环境看起来更有情趣也正如使我们的网页看起来更生动一样。它是一种锦上添花,它可以为你的视觉加分,但切忌过于繁重而影响到了功能的使用,必竟家不是博物馆,网页信息传播才是最重要的。

pp7

  一个主题,我们可以有多种的联想,并呈现出不同的设计表现。关于春节的联想有很多,欢聚、团圆、红包、鞭炮、礼花、祝福。制作前,我们的设计结果有着多种的可能性。下面我们看看三个关于春节的案例,它们选择了不同的抄袭对像,为我们呈现了不同的春节视觉。

wps_clip_image-6129

  这是一个春节活动大盘点主题页面,页面由六个活动组成,每个活动只呈现其活动名称和时间,内容并不多。这里作者引用了春节团圆的联想,选择了团圆桌来作为抄袭对像。每个活动为圆桌上的一个成员席位。红黄色的桌子和蓝色的纹理背景,让颜色饱满,年味儿十足。

  1. 减法:减法不仅仅包括细节上的删减,也包括角度变换和视觉替代,这些都依据实际网页的信息量而定。这个案例改变了圆桌的日常视觉角度,转以俯视的角度替代,俯视角度给内容摆放留下足够空间,并能以最均衡的方式呈现六个席位的活动信息。

  2. 分块:圆桌分为六个成员席,每个席位代表一个活动。主SLOGAN视觉安置在圆桌中间的转盘上,其它的按钮和补充说明信息置于圆桌之外的区域。

  3. 加法:在基础内容填充完整后,作者在桌上加入了筷子,进入按钮使用酱碟来装载。近景模糊的绿叶加入,使画面有了前后的景深关系,也让红绿色彩的搭配更加饱满。

wps_clip_image-22803

  这是一个DNF的黑钻推广、订制和续费的页面,黑钻是针对DNF的VIP用户开设的游戏特权图标,在这里,作者选择了黑钻的形态作为整体的网页视觉载体。主题明确而直观。

  1. 减法:在选定黑钻为专题的抄袭物后,作者开始通过减法删去黑钻的立体切面光泽,保留了钻石的外轮廓和黑色。把”黑”和”钻”有效的提炼出来。