还在为网页的视觉效果而发愁?《形式感》教你如何一小时出图

《形式感》 作者:晋小彦

在说这本书之前,先来说说一个小插曲。刚拿到这本书的时候我是满怀期待的以为又可以看到很多不同的设计理念,可当我粗略地翻了翻之后心里突然嘎噔一下,里面的配图全是与游戏类网页相关的案例。当时我就在考虑还要不要继续看,因为我是一个B端设计师,平时的工作几乎不会接触到任何与游戏相关的设计工作,就在我纠结的时候朋友的一句话解决了我的顾虑“无论是什么样的书你要学习的是思路与方法,举一反三灵活运用才是真理,你管它看起来是不是你工作需要的”。没错,虽然这本书可能介绍的案例与我的工作毫不相干,但是学习并灵活运用里面的方法才是真正的目的,于是我就开始了这本书的阅读时刻。

《形式感》这本书不是一本高大上的教科书,不涉及任何网页前端开发或PS操作步骤,也没有精深复杂的平面构成和色彩搭配理论,这是一本速食的设计创意技巧手册。它是一本以很直接的方式教你如何设计来快速解决视觉上的各种问题。

本书总共有十个主要模块外加三章附录,主模块以说说、想想、看看、做做四个方面和大量案例来解释不同的设计方法该如何运用。接下来我们来具体聊聊我认为这十个模块中非常有用的五种设计方法


01.抄现实

抄现实是我们在设计中最直接也是最常用的一种方法,它顾名思义就是抄袭现实中存在的事物,将抽象的主题通过实体表达出来,并以之作为内容信息的载体,可以在第一视觉上直观地体现核心内容并突出主题。

在抄现实的实施中有三个主要步骤:

减法:提炼物体特征,审查删除重复的描述。

分块:对信息进行消化。在吃透信息后将信息由粗到细进行分块。分块完成后,结合造型进行一定的信息和造型微调。

加法:具体的内容填充。气氛和视觉的补充。特征的还原和细节的补充。


02.圆、方、三角

圆形,方形和三角是网页造型结构中的精髓元素归纳,即使再丰富生动的物体也可以由它们组成。利用圆,方,三角可以:

1.打破习惯性思路

2.理性把握主线情感

3.变幻灵活


03.断臂之美

因为残缺,所以有了与众不同的故事和特点,它的主题性和目标性比起完美的东西显得更加强烈。断臂的方法是通过去掉局部、选取局部以及替换局部来突出核心思想,让特别的视角和画面带给观众更强烈的感受。

去掉局部:去掉局部是在原先完整的整体上,为了更好的突出、说明事物的特征和主题而删去了其中一部分,它为主题的表现排除了视觉干扰,使中心更加明确。

选取局部:选取局部通常是因为这个部分是特征的集中表现,它的独立存在可以代表并放大整体的中心思想,使主题更加明确,情感更加集中。

替换局部:替换局部是使用更能表现主题的事物来替代特定的局部,从而使主题突出。替换事物的独立风格与原有整体结合后,特征更明显,引发更多的延伸思考。


04.欲擒故纵

在设计过程中,我们周围经常会充斥着这样的声音:再大一点,颜色再明亮一点,我们需要更炫的效果...通常在这种情况下我们很容易的使用加法,进行放大加粗提亮,导致整个画面充满了重点, 充满了重点也就意味着毫无重点。所以面对需求的时候我们需要一个逆向的设计思维。突出并不意味着只能增强,我们也可以通过减弱来获得。

加法:在原有的设计基础上,增加、突出、放大、强化某个特定的部分使其突出。

减法:通过减少、缩小、弱化其他部分使得某个特定的部分得到突出

满:“满”的目的本身是希望用户能够看到并吸收更多信息,但呈现并不表示会被看到,而看到也不代表会被记住。

空:留白可以带给信息更好的阅读性,也为设计带来更高的品质感。往往“空”对内容的吸收率更高。


05.乾坤大挪移

在时间短、没点子、没创意、又要快速捕捉眼球的时候怎么办?使用乾坤大挪移通过对页面整体的旋转和平移可以快速改变视觉效果,它打破了正常网页的视觉习惯,吸引了观众的注意力。

旋转:

整体旋转 — 背景与内容一起旋转。为了兼容性和可阅读性,背景和内容同时旋转的角度尽量不要超过15度。

背景旋转 — 旋转背景,信息内容保持不变。这种旋转方式既可以产生旋转的视觉形式感,又可以保证文字信息的阅读性,是推荐和常用的方式。

综合旋转 — 根据内容结构进行有选择的旋转。

平移:将原有网页信息内容往左侧或者右侧平行移动,使页面产生不稳定的状态,然后在这种与常见方式不同的不平衡的布局中寻找更新鲜的创意和表现方式。


以上就是我认为非常有用的五种设计方式。但是无论是哪种设计方式都需要在实践中更多的去尝试、运用,才能够找出最适合的效果。

本书还有三章附录,主要说了一些与产品相关的内容,或许它与设计方法无关,但是其中有这么一句话我很喜欢:“设计师是一个协助产品和项目策划通过视觉表现将产品信息传递给目标用户的传话人。也许有人觉得视觉传话人的定义是否降低了一个设计师的地位和影响力,但是在团队合作的关系中,每个人都把握和衔接着工作传递中不可或缺的一环,能够放下身段并真正帮助团队,有效服务于产品的设计师才能最终拥有话语权和影响力。”

最后,感谢我的那位朋友让我没有错过这么一本好书,所以现在我要运用这本书里的技巧去做图了。那么你要和我一起么?

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,378评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,356评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,702评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,259评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,263评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,036评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,349评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,979评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,469评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,938评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,059评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,703评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,257评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,262评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,501评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,792评论 2 345