形式感+:网页视觉设计创意拓展与快速表现(txt+pdf+epub+mobi电子书下载)


发布时间:2020-07-19 00:34:58

点击下载

作者:晋小彦

出版社:清华大学出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

形式感+:网页视觉设计创意拓展与快速表现

形式感+:网页视觉设计创意拓展与快速表现试读:

前言

写这份前言的时候,我并不太确定这本书是否能够出版。不论结果如何,都十分感谢策划大成的鼓励,让我一直坚持整理完成。

2011年6月因为几篇关于“快速打造网页形式感”的系列文章得到了许多同行的关注,大成在站酷上找到了我,并无写书经验的我,设想着只需简单地将几篇现有文章集合成册就可以交差,于是便欣然答应了,但后来发现,完善工作并不比最初的起稿来得容易……

首先,对于网页设计来说,不论是技术还是审美都是一个不断更新迭代的过程,当时认为不错的作品现在看起来并不十分有特色。特别是对专题的形式感来说,布局的形式感在于它的出其不意,如果使用过于频繁也便失去了它的效果。

其次,由于个人作品的限制,许多案例的方法上值得举证,但终合评定上来说,它不算是一个完美的作品。

第三,话语空间,网络上的文章如果发现问题,发布后也能及时更正,而纸质出版是一次性的成稿,出版后的修正难度就很大。

还有,在整理过程中,不断出现新的想法,所以不断添加新的内容,逐渐发现,原来在网络上与大家分享的文章在本书中所占的比例,几乎可以忽略不计了……

最重要的一点,纸质出版物的图片版权比网络文章限定更多,在案例的选择上也谨小慎微。加上日常工作的压力,这一系列问题也让我在写作过程中多次打了退堂鼓。到这里,还是想再次感谢大成一直的鼓励。

老编大成的插队回复:感谢小彦的信任,不过不认同“没编辑就没这本书”的说法,只不过大家都觉得出版这本书是件有意义的事情,并肩作战到底罢了。从编辑这个门外人来看,国内网页视觉设计与10年前相比,已经有了翻天覆地的变化,很多网页作品的视觉设计、体验设计已经是国际一流水准,但是目前国内原创网页设计图书还大都停留在10年前的水平上,远远落后与我们的当前设计真实水准,个中缘由这里不深究。老编认为,这本书是13年策划生涯中遇到的最好的一本网页视觉设计书,设计是前沿的设计,文笔是通透的文笔,作者小彦文武双全,德才兼备,这本书,错不了。

一定要先看看这里

为了能够更好地定位和阅读本书,在大家阅读正文之前,先啰嗦两句。网页设计包含着很多方面的内容:网页前端开发、网页平面设计、界面UI设计、软件使用、用户体验……本书作为一本速食的网页设计技法手册,它很难覆盖所有的网页设计领域。单从视觉设计来分,就包含了:UI设计、网页图标设计、平面设计、色彩搭配、PS技能表现等等。而这本书主要对哪些内容进行了介绍,它又适合怎样的人群呢?

为什么就谈形式

一是行业分工的细化。网页设计师从早年的综合性工作中分化出来,形成了相对独立的专业岗位,网页设计也不再是单纯的软件应用,它衍生出了许多独立的研究方向,而形式感的表现则成为视觉设计师在主要日常工作之一。这也预示着网页设计行业的“改版”。只有在专业领域上更强,才能强强合作从而帮助其他具体产品的展示、营销、盈利等。

其次随着时代的发展,网页设计更接近于一门艺术。网页技术的发展为网页视觉艺术提供了更灵活和宽阔的表现空间,而视觉表现上的需求也推动着网页技术进一步发展。

网络带宽和硬件的发展为网页提供了使用更大图片、动画甚至视频的权利,而这些也为视觉设计师提供了更多表现的空间,并以此来帮助网页信息在快速阅读的今天占有一席之地。与此同时,用户对网页使用的经验沉淀,让视觉无需花更多的表现向用户告知基础交互行为,因此也可以余下更多的精力回到视觉形式上来,运用色彩和结构来更好地为网页信息服务。

当然矛盾是持续存在的,旧规矩的打破也预示着新规矩的开始。面对信息的泛滥,如何引起用户对当前信息的关注,网页的第一视觉在其中显得尤为重要,它同样需要形式表现的疏导和刺激。

另外多终端用户屏幕(主要是各种移动设备,手机、平板等)的出现,它让网页视觉设计师不得不重新定义原有的视觉规范。这些变化都趋使着设计师对新形式的渴望与进一步的探索,让我们一起来迎接吧。

我是一个被圈养的网页设计师

圈养当然不是什么光荣的称号,但它标志着一个设计师的独立开发和制作能力。

圈养的设计师,大多处于分工细致的制作环境,我们首先抛开后台和前端的程序开发(因为设计和程序的分工是大部分网页设计团队的基础架构)。除此之外,一个圈养型的设计师团队,它拥有一个需求交互策划,将抽象的产品目标转化成具体活动内容,并绘制成简易的网页交互稿,网页设计通过交互稿进行页面设计。

其次在圈养的团队中,产品一般有一个原画团队,虽然这些原画并不直接服务于网页设计(它们可能是产品开发过程中的草稿原画文件),但还是给网页视觉表现带来很大的帮助。

第三,还可能有一个动画制作团队,帮助实现网页设计上的动画需求。在一些设计团队,Flash动画设计和页面设计是由同一个设计师完成的。另外,对于一些大型的门户平台类网站可能还会配有专业的用户体验和调研专员或小组等等。

除了以上几个大的分工之外,一些网页设计团队还有会编辑,在网页设计和程序开发完成后负责上传具体的资料内容。

在最初工作的几年,我也经历过设计、动画、切片三位一体的人生。在一些团队里,新来的毕业生或实习的同学会专门负责抠图、改尺寸等工作,为主设计师节省了大量的时间,当然我也同样经历过那个每日只改尺寸的设计生活。就像每个发型师都得从洗头小弟干起……好啦,我们是设计师不是洗剪吹啦,不过话说回来,现在光剪个脑袋要你个590的也不是没有,就看我们是如何定位和看待自己的手艺啦,扯远了,回来回来。

话说这些受得住大团队圈养的主儿,一般有一定的实力,因为大团队提供着丰厚的资源,也给出了许多标准化的限定,所以有人说圈养的设计师在一些制作的独立性和创意的狼性上不如一些野生派的优秀设计师。这点我们并不否认,但圈养的方式还是成为了大部分企业的常态架构,因为它为产品的网页设计带来了可控的便捷。而大部分的设计就业者也处于这样一个有一定基础分工的设计团队中。而如何在圈养的团队中生存得更好,让我们的设计在众多的标准中脱颖而出,或许本书的一些小小方法能够对同样属于圈养的同胞有所帮助。当然,本书的读者不仅限于“圈养”设计师,“野生动物”同样适用!

这不是一本高大全的教科书

本书内容不涉及任何网页前端程序开发或PS操作步骤,也没有精深复杂的平面构成和色彩搭配理论。这是一本速食的设计创意与技巧手册。当然我们很难承诺仅通过本书便马上能从菜鸟转身成网页设计大师。我们应当尊重高大全的理论基础,也相信所有的成功都不是一蹴而就的。本书可以帮助有一定基础的网页设计初学者或在职者,在遇到设计创意瓶颈时,能够在较短的时间内解决设计上的创意和视觉形式感的问题。不论是应对紧急的工作需求或是求职面试都能够给观者一个新颖的视觉表现。

这是一剂速效救心丸,行气活血、祛瘀止痛。你在为网页视觉的平淡无奇感到困扰嘛?你在为大量的专题需求感到疲惫嘛?你正处于每个月那几天的创意瓶劲期嘛?圈圈叉医院佟主任,专注治创二十载,为您推荐!本书将我们日常设计思路与网页技术和审美发展结合,并将方法形象地归纳,入口易、剂量小、起效快,谁用谁知道……好了好了,再开玩笑就要被开除了,我发誓要好好写书认真做人的。

如果一定要为本书做个比喻的话,“速效救心丸”这个称号应该合适。它并非复杂而长期的理论慢性治疗,它是实际工作实践的经验总结,它针对我们日常遇到的现实问题并提出解决方案。

由于个人的工作类型和经验的限制,书中还是有许多不完善的地方,欢迎各路同仁指正拍砖,当然,为了不被乱砖拍死,我先为自己竖几道结界防身,以备不时耍赖之需。

日常的活动专题更需要形式感

在解释专题页面这个概念之前,我们先来了解一下网站的分类,因为一个网站到底是重信息索引、重交互体验还是重视觉表现必须依网站的类型而定,不同的网站类型侧重点是有区别的。从网站功能上,它分为门户站、平台站、品牌站、专题站等。

▪ 门户站负责产品资讯建设,它拥有对搜索引擎的友好表现和完好的内容支持,它相对更注重资料的索引。

▪ 平台站就像一个网络市集,不论是用户端还是产品端都可以在这里传播资讯,并进行频繁的互动,它相对更注重用户的交互体验。

▪ 品牌站则像外交官,它主要通过视觉包装传达产品概念,随着技术的发展,Flash、HTML5、视频、多媒体因其生动的展示形式成为了品牌站的主要表现手段,对于品牌站的建设来说,设计师在创意和视觉表现上都有极大的空间。

▪ 专题活动站作为精准营销的重要形式,为产品的针对性推广做出了巨大贡献,早年受到带宽的影响表现形式较为单一,现在真正揭开了广告的本来面目,强烈的视觉表现成为了它最重要的特征。它就像战争中的突击队,精准、迅猛、有力!

门户站、平台站、品牌站根据产品的结点更换频繁,多为半年、一年甚至两三年更换一次。而活动专题因为服务于产品活动,所以上站时间都相对较短,多为一个星期到一个月左右,但在数量上较其他类型的网站相对更多。如一款进入稳定期的游戏产品,它的专题页面一个月的数量通常在4~8个左右,公测的攻坚期则更甚,通常每天同时在线的活动在五到十个左右。所以专题页面的设计是在职设计师最常遇到的网页设计类型。

我们知道专题的设计是通过它的精准、迅猛、有力来服务于营销活动并最终服务于产品的,所以这就需要设计师在处理这些日常专题时主题要突出、设计速度要快、视觉要惊艳。这也便是本书这十个方法所要解决的问题。本书以视觉设计中的形式感为主线,不以网站的索引设计或用户的交互体验设计为主线,是因为每个类型的网站设计的侧重点不同。关于网页的索引设计或是交互体验设计,不是本书的讲述重点,好好把视觉形式表现技巧说清晰也算是笔者有限能力下的小小愿望。

这本书适合我吗?

因为工作和资源的关系,书中动手制作的案例多是游戏网页,但赏析部分的案例类型较多元化。思路与方法可以举一反三、灵活运用,所以它们同样适用于其他产品的专题网页设计,一些思路和方法甚至适用于广告和海报等视觉设计。

所以本书的读者是网页设计师,包含狭义的、广义的、“圈养”的、“野生”的,以及网站开发其他环节需要了解网页视觉设计的人员(如用户体验设计师、前端页面开发人员等)。

作品不甚完美,权当抛砖引玉。网页设计随着带宽的提高以及技术的革新,表现形式也在不断变化,加以每个人对美丑评定不一,如果从多维度来评定书中的案例,它们可能不能算是完美作品,这里就当是为了说明技巧和方法进行的尝试“抛砖”。由于时间的关系,一些较早期的作品也多少有些不够成熟或不符合当前流行趋势的地方也请大家多体谅,如果这些方法能够为大家拓展思路并借此“引玉”也便是我莫大的荣幸了。

终于唠叨完了,算是能够比较安心地和您一同翻书打开话茬了。

版权声明

为了顺利展开主题,本书在编写过程中参考了并截取了部分国内外著名网站的功能和效果,在此感谢原作者的创意和设计为本书提供了参考。由于部分内容来源于互联网,因此无法一一查明原创作者,无法一一准确列出出处,敬请谅解。如有内容引用了贵机构、贵公司或您个人的作品或技术资料却没有注明出处,欢迎及时与出版社或作者本人联系,我们将会在博客或相关媒体中予以说明、澄清或致歉,并会在下一版中予以更正及补充。

特别鸣谢

感谢所在团队腾讯TGideas一直以来的培养和帮助,书中有许多经验分享也来源于集体的智慧和团队成员间相互的灵感激发。此外十分感谢我们的Leader李若凡为团队成员争取了更多的话语权和设计空间,才使我们有机会不断突破设计的局限,让网站设计表现更加生动,并让设计有效地辅助产品的发展。也感谢每一位TGideas的成员,努力工作拼命玩,是大家的工作态度,也是团队给设计师和设计作品最好的礼物。导读

你可能已经注意到本书大体的结构,每个方法的架构基本一致,它分为“说说、想想、看看、做做”四个部分对方法进行诠释、解构、分析、尝试,在阅读过程中大家可以留心,或根据自己的需要进行针对性的翻阅。

四个结构的样式如下。序

网页形式感与专业主义“形式感”在近两年的网页视觉设计圈子中大概是最常出现的词汇之一。

关于小彦的这本书的书名,许多朋友谈起时会说,是否带有一些类似“形式主义、形式化”的贬意色彩,在感受上相对偏主观?其实就“形式感”这个词的本意来说,它的确是由主观意识出发的设计表现,然而任何一种输出和表达都是经过个人的意识和知识梳理形成的,从一定意义上讲,不论是谈形式设计还是谈体验设计,其实都是根据主观认识而最终输出的形式表现,不同的只是正确的形式和不够正确的形式。

何谓正确的形式?如何能更接近正确的形式?专业的网页视觉形式关联了整体营销的需要、信息内容的传达和网页技术的更新以及审美标准的变化。书中的几个方法论综合了这些基础要素,并将其通过易理解、可操作的表达方式进行整理输出。因此,“形式感”作为视觉评定的第一感受,逐渐成为了设计师们在日常工作交流中的常用词汇。“形式感”一词的广泛使用,在另一方面是基于网页设计专业化分工的,网页设计在最初的类计算机学科的基础上延伸出了它独有的艺术性、体验性、互动性等专业体系。它伴随着“网页视觉设计师”这一职业称谓成为了艺术类分支中最常用到的沟通词汇。从一定意义上讲,网页视觉“形式感”的出现也标志着网页视觉设计的进一步专业化。与此同时,我们也期待着网页视觉设计在整个网络化浪潮中有更多优秀的、惊艳的形式表现。

记得在两年前,我们的设计作品在行业内具备了一定的影响力,因为行业属性的缘故,关注用户体验的同时,团队在形式感打造方面经常有出色的内容产出,欣喜之余,也开始考虑如何能把这些出色的设计经验沉淀下来,形成方法论,长久、良性的支持团队工作,同时进一步提升团队效率。

带着这个目的,便拉上团队骨干小彦一起探讨这个问题,让人惊讶的是,小彦针对形式感打造方法的计划早已启动,并已经归纳了一些可行的设计方法,于是我们利用两个月的时间,进行反复的碰撞,收集了大量行业资料,并结合实战项目,完成了打造形式感课程的内部开发,后来成为了团队的招牌课程,获得了腾讯学院、互动娱乐事业群学习组织、腾讯设计通道等组织颁发的优秀课程奖。这些方法吸收并结合了摄影、建筑、绘画等知识,将常见的形式感打造方法用深入浅出的方式进行了说明,使得运营、策划、美术相关工作人员都能够简单有效地理解设计方法。部分技巧发布在互联网后,也受到很多相关从业人员的学习和认可。

得知这些方法会成为纸质书出版后,首先很感激出版社对于我们专业能力的认可,更感谢这其中的关键角色小彦,她能够在方法沉淀的过程中,针对其内容进行反复迭代与优化,并追求尽善尽美的专业态度。

设计是一门需要手脑并用的学科,没有深刻的洞察和理论支撑而单纯追求形式感会显得如此浅薄,其奥义在于真正投入思考与执行,这是大前研一所强调的“不断学习,不断思考,不断总结”的专业主义精神,也是设计工作独特的魅力所在。—— 腾讯游戏官方设计团队TGideas 设计总监 李若凡

网页设计“速效救心丸”

这几天花了点时间看完了《形式感+》这本书 ,这是一本关于网页设计的教程,一本别具一格风格的书。抛弃死板的教材模式,以一种轻松愉快的方式讲解网页设计理论、方法与案例,有一种吸引力使我看下去。更能贴近读者想要获取的方法、知识点,而不是阐述某种理论,此书值得一看。这剂网页设计的“速效救心丸”确实能在你创意枯竭、审美疲劳、设计瓶颈的时候好好补上一口回神气。像雾霾天出现的一股清风,身处沙漠时手握的一支纯净水,当身为网页设计师的你身陷无的放矢的苦恼中时,请翻翻这本书,也许会产生头脑风暴,也许就能把杂乱的思绪理顺,总之相信你确实会收获不小。

当前的网页设计水准较10年前已经是翻天覆地的变化,相比现在的网页设计水准,针对网页设计的教科书远远跟不上脚步,正是因为缺少像作者这样,用平实的言语、条理得当的顺序、贴近时代的案例,生动演绎了一场网页设计的艺术制造历程。《形式感+》是本速食书,这本书把设计理论和网站视觉设计的各种细节一一对应,具有很强的可操作性。它也许不会让你阅读完立刻成为网页设计的大师,但通过“说、想、看、做”这几点出发,通过生动地举例比拟,绘制了一张通向成功网页设计的地图,让读者在这条道路上走得踏实,眼前尽是明媚光景,既有“柳暗花明又一村”的惊喜,更有“停车坐爱枫林晚”的惬意。

设计服务于用户,用户体验是关键,如果一个网站设计不能让用户通过轻松愉快地点击获取信息,那么,这个网站便不够完美,看完这本工具书,你会从视觉角度了解个中缘由,这本书,值得细细品味。—— Idsea Brand上海洋滔品牌设计公司创意总监、总经理弄号家居品牌创始人李海滔

网页设计是艺术亦是科学

優れたデザインとは、多くの要素を整理しシンプルにまとめあげること。

ウェブデザインはアートであるとともに科学でもある。柔軟なビジュアル表現とともに、実践用のノーハウがある。

この本に、シャオイエンさんは気前よく長年のウェブデザイン経験から得た思考と心得をシェアした。

若いデザイナーとして、彼女が芸術家の柔軟さと科学家の整理力を同時に持っていると感じた。デザインを志す人はこの元気満々な書によって、中国最新のウェブデザインの発想法にも接触できると思う。

中文翻译:

我一向认为,优秀设计乃是将众多要素整合归纳成要点的产物。

网页设计既是一门艺术亦是一门科学,它有其灵活的视觉表现形式,同时可以有一套应用于实战的方法论。

在这里,小彦慷慨地和大家分享了她从多年网页设计经验中所收获的思考与心得。

作为一个年轻设计师,我认为艺术家的百变灵动和科学家的善于归纳都在她身上得以体现,相信有志于设计的人通过这本充满朝气的书,也能接触到国内最新的网页设计思维。——广东省广博报堂广告有限公司 总经理近藤充佳(MITSUYOSHI KONDO)推荐

团队联合推荐

腾讯游戏从10年前的默默无闻到目前占据整个中国游戏市场半壁江山,这来自于整个研发团队和发行团队对产品各个细节层面的追求及坚持,而支撑我们一直以饱满的热情继续下去的,往往正是最初时单纯的对游戏行业或专业的执着和热爱。很高兴今天看到小彦作为我们众多设计师中的典型代表,在自身的学习摸索过程中而总结的这样一本书,它从设计创意技巧、理论、案例乃至设计师的自身价值定位等层面层层解析,汇聚了小彦从业以来在游戏页面视觉设计方面的个人经验所在及设计师的价值感悟,定能给予期望踏入网页设计领域的新人或者是其他设计领域的资深从业者非常多的帮助和共鸣(从我本人来说,我所从事的游戏类界面设计工作,在阅读该书以及和小彦的交流过程中获取到非常多共通的设计法则和创意启发),相信能成为设计师桌边的常用必备书籍之一!同时期望能带动国内设计领域的经验分享氛围,共同创建更加良性、自由、诚恳的设计交流环境,将腾讯游戏的影响力扩展至整个行业领域!—— 腾讯互动娱乐业务系统QQ游戏产品部 (GDC) 设计总监刘刚(manrana)

推荐奋斗在设计第一线的小伙伴们工作之余仔细研读,书里都是笔者的亲身经验和心血,很有诚意。—— 腾讯用户研究与体验设计部(CDC) 总经理 陈妍(Enya)

作者新锐的想法非常及时,在国内网页设计环境大同的情况下,需要更多不同的声音,更多新锐的创意!—— 腾讯电商用户体验设计部(ECD)总经理 刘轶(rayliu)

小彦透过自己的细微观察和个人经验分析,整理成独特的方法论与众同乐,令人鼓舞。国内需要更多像她那样主动推动设计的传道人!—— 腾讯社交用户体验设计(ISUX)总经理 Jonathan Wong

媒体联合推荐

小彦之前在站酷发表的系列设计文章受到了设计师的热情追读,这次成书后,更是进一步系统化地规整了内容。没有枯燥的理论知识,只有好学好用的私家绝招。虽然名为形式感,但其中包含了从思考方式到实现手段的全流程引导。读者完全可以举一反三,掌握到流行的设计手法,并把它们立刻应用到日常工作中。代表小彦在站酷的百万人气和粉丝们,向奋战在网页设计一线的设计师们推荐。—— 站酷网 主编 纪晓亮

书中的几篇干货文章优设网曾推荐过,吸引了很多网页设计师的追捧学习。作者对网页形式分析独到,语言深入浅出,是一本有趣而实用的设计书。—— 优设网 优设哥《形式感》一书由浅入深地向大家讲述了一些网页设计的方法和理念,并且例举了作者自己积累的优秀案例。以设计师的亲身经历向大家言传身教,这是一件很了不起的事情,因为这同时证明了作者在网页设计这行久经沙场却仍然屹立不倒,并依然具备大步流星的正能量。如果我还是当年那个为设计稿而苦恼的设计师,那么,我一定不会错过这本书。—— 优艺客 创始人 韩雪冬

相比较,这是一本我更建议广大准网页设计师看一看的书,书中很多精彩的表现手法和实例,对于当前技术和想法的提高有很大帮助, 对于那些正处在瓶颈期,却苦于无法突破的设计师也非常适用。网页设计发展瞬息万变,也包罗万象,设计师不应刻意追求某种固定或流行的形式,适合的、感觉对了才最重要,《形式感+》一书贴切、生动地阐述了这一理念。—— 网页设计师联盟 主编 江六八

友情推荐

这本书是对网页设计日常工作经验的提炼和点化,语言形式轻松,入口易消化,功效快速直接,对于网页视觉设计的从业者来说相当合适阅读。—— 巨人网络副总裁 彭程

书中许多网页版式方法结合了现代网络技术的发展,越过传统的边界,走过固化的禁区,是一本有前瞻性的设计书,强烈推荐!—— 漫画家 郭斯特

虽然我不是做网页的,但是好的思路往往放之各类设计领域皆可用。里面的许多视觉表现创意和形式对于设计来说都是互通互用的,值得一读。—— 青年导演 蒙青

简单实用的工具书,朴实的语言让我很容易就可以看懂……—— 知名职业画师 阮佳

我很喜欢作者以简单、幽默的语言来表达对于设计的理解,让我对网页设计有了更深层次的领悟,无论是内行还是外行都能在这本书中汲取到自己想要学习的内容而得到提高。—— 知名职业画师 周觉先

本书的网页设计方法充分将内容和视觉融会贯通,对于品牌视觉表现和网站策划来说也有很不错的启发性。—— Google品牌经理 李大鹏

设计是一件需要包容的事,心灵的空间有限,物质的欲望太满就容不下更多美感。三年前第一次见到小彦的时候,我就因为她干净的内心和五彩斑斓的思想力而震惊。作为本书的第一个读者,我相信你将会有和我一样的阅读体会:因为纯净的世界观,你的心会装下整个世界的设计感。—— 腾讯游戏产品经理 陈静

打造视觉形式感是每个游戏推广视觉包装设计师必由之路,也是能否第一时间吸引玩家眼球的必要手段,每个人都有自己的方法。而书中介绍的几大方法论,通过实战案例详尽介绍了作者对各种形式感的理解以及如何实践,效果立竿见影。—— 腾讯高级视觉设计师 蔡望东

这书是在高强度工作环境下提取出来的,是有效提高页面设计效果的经验精华。—— 腾讯高级视觉设计师 高立

十个提升网页设计形式感问题的有趣方法。每一个都通过“说、想、看、做”四部分配合详尽案例,以轻松的行文风格为我们娓娓道出。作者将其丰富的实战经验分享给广大设计师,以解决实际工作中遇到创意思维枯竭、作品表现力平淡的问题,是一本能让设计师释放无尽灵感的好书。—— 空中网艺术总监 吴黄溪01抄现实抄现实是我们在设计中最直接也是常用的一种方法,它顾名思义就是抄袭现实中存在的事物。因为其结果直接与主题相关联,所以抄现实的方法可以让视觉显得更整体,主题更突出。它将抽像的主题通过实体表达出来,并以之做为内容信息的载体,从而在第一视觉上直观地体现了核心内容并突出主题。说说就是抄袭现实中的物体

简单意义上说就是眼前所能见到的一切事物,正如你现在手中的书本、手指、桌上的台灯、水杯。这些生活中的事物通常具有丰富的形态和其延展的情感意义,我们可以利用它们来表达一些特定的主题,所以当我们接到一个要表现的主题时可以通过它的生活原貌来激发灵感。这里所指的现实是任何可以被我们认知的可视的物体一粒棒球的网页变形记想想抄现实的三步骤:减法、分块、加法

让我们暂且抛开主题,就一个物体可以如何变成网页而言,它有两个关键点:第一是现实事物转换成网页载体过程中的形态取舍,如何让观者既能辨识出抄袭的物体,又能够给未来信息留下足够的自由排版空间;第二是信息内容与形态载体的结合和排版,如何让信息内容完整的、有条理的排布到形态载体中。

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

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

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

给自己一分钟时间,不许翻页剧透。减法 STEP 1

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

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

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

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

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

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

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

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

▪ 具体内容的填充。

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

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

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

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

减法

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

分块

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

加法

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

下面我们通过“减法、分块、加法”这三个步骤来欣赏和分析一些网页案例。在关注大的方法的同时,也可以学习它们的创意思路以及对于细节的处理方式。我们还可以关注近似主题的不同抄袭目标,以及相同抄袭目标的不同表达方式。

一个主题,我们可以有多种的联想,并呈现出不同的设计表现。

关于节日的联想有很多:欢聚、美食、红包、鞭炮、礼花、祝福。

制作前,我们的设计结果有着多种可能性。

下面我们看看三个关于节日的案例,它们选择了不同的抄袭对像,为我们呈现了不同的节日视觉。

右图是一个春节活动大盘点主题页面,页面由六个活动组成,每个活动只呈现其活动名称和时间,内容并不多。这里作者引用了节日团圆的联想,选择了团圆桌来作为抄袭对像。每个活动为圆桌上的一个成员席位。红黄色的桌子和蓝色的纹理背景,让颜色饱满、年味儿十足。(1)减法:减法不仅仅包括细节上的删减,也包括角度变换和视觉替代,这些都依据实际网页的信息量而定。这个案例改变了圆桌的日常视觉角度,以俯视的角度替代,俯视角度给内容摆放留下足够空间,并能以最均衡的方式呈现六个席位的活动信息。(2)分块:圆桌分为六个成员席,每个席位代表一个活动。主SLOGAN视觉安置在圆桌中间的转盘上,其他按钮和补充说明信息置于圆桌之外的区域。(3)加法:在基础内容填充完整后,在桌上加入了筷子,进入按钮用酱碟来装载。近景由于模糊绿叶的加入,使画面有了前后的景深关系,也让红绿色彩的搭配更加饱满。

这是一个韩国甜椒闲暇活动大盘点页面, PMANG在节日里将公司各种游戏活动齐聚一堂为玩家献上了节日大餐,与上个案例一样也选择了节日聚餐的概念,但由于信息量的不同,这个网页选择了盘子做为活动内容的载体,近似的主题近似的抄袭对象却呈现了不同的视觉结果。(1)减法:这里同样采用的是俯视角度,在此基础上作者还省略了桌子的表现,这种省略为后面大量的菜盘创造了更大的空间,同时也突出了承载活动的菜盘。(2)分块:这个页面以菜盘做为基础分块单位。由于信息量较多,这种纵向规则的菜盘排列方式较之上个案例的圆桌方式有了更大的可延续性,为随时可能增加的大量活动做好准备。(3) 加法:配上筷子、酱碟、小花等活跃气氛,空盘、实物菜品盘的加入增强了真实的气氛,缓解了过于拥挤的信息量,也让菜盘排列更加工整。

这是韩国C9的圣诞节专题,同样是节日,这里选择了祝福的联想,利用信件来承载和传达活动信息。主视觉是一个红色的信封套,内容则通过拆叠展开的信纸来承载。信纸的延续性设计良好,信息承载量大。LOGO位置摆放相当精巧,圆形的LOGO造型正好替代了西方信件的封口油泥,西式的祝福气氛得到了点睛。红绿的色彩搭配契合主题。抄现实的整体表现延续性好并且直观。

这是一个DNF的黑钻推广、订制和续费的页面,黑钻是针对DNF的VIP用户开设的游戏特权图标,在这里,作者选择了黑钻的形态作为整体的网页视觉载体,主题明确而直观。(1)减法:在选定黑钻为专题的抄袭物后,作者开始通过减法删去黑钻的立体切面光泽,保留了钻石的外轮廓和黑色。把“黑”和“钻”有效的提炼出来。(2)分块:根据页面内容和黑钻的轮廓线,作者通过与其外形相平行吻合的斜线进行分区,在这个部分我们可以看到作者对右侧表格的精巧优化。(3)加法:空间分块和进行内容的填充完成后,作者加入了左侧低胸手持红酒杯的游戏人物以及写实的黑钻,将黑钻的尊贵的身份交待完整,底部的人物图形的小提示和右下方的宝箱图片对多余的空间进行了填充也让页面更加完整和深动。

这是一个赛车游戏的活动专题,这个专题由多个活动共同组成,它通过参加活动获得积分,积分累计由少到多,并且在不同的积分结点都有不同的奖品,页面利用赛车游戏的赛道将整体活动贯穿一体,并通过赛道表现了获得奖品的先后历程。很好地将虚拟的里程碑概念通过现实赛道的方式表现出来,既配合了活动内容又结合了游戏主题的表现。微透视的赛道表现也将画面的空间感和赛车的速度感表现出来,让银白色的网页设计简约而不简单,视觉存在感强,并充满看点。通过这个案例我们也可以看到抄现实的表现不仅是现实物体的简单抄袭,也包含了对现实物体的形态概念的提取,赛道地图也正是这种概念特征提取的表现。

一个足球主题页面,选择的对像近似先前案例中的棒球,但由于内容的不同,信息排布的方式类似于之前的节日案例,抄袭对象的选择不仅需要考虑到主题的联想,也要同时关注信息的承载与后期的排版,这个案例就很好地利用了足球的实体造型,完美地安放了五个活动。视觉完整,主题突出。

这是一个棒球游戏的抽奖主题页面,它模拟了儿时在盒子里抽奖的画面,充满了童趣和游戏的快乐。它虽然也是一个棒球的游戏页面,但主题侧重点不同,抄现实的对象也就不同。这里突出了抽奖主题的活动,棒球运动则通过草地及背景上的棒球和球棒来体现。

之前的案例基本只有一个核心活动,而这个案例则是由两个相对并列的活动组成:一个是以游戏筹码桌为主视觉的部分,是一个抽牌得积分筹码的活动;另一个是以手持写字板为主视觉的是一个签到活动,通过签到获得积分和奖励。它通过两个关联的承载体将两个活动串联在一起。我们可以想象它们是在同一个空间里的故事,玩游戏得积分,然后再去管理员那里签到获得积分。视觉表现的情境感强,即使看不懂文意也能通过视觉和游戏经验来读懂大致的活动内容。另外这个页面大到活动主体的游戏扑克,小到按钮和提示都用到抄现实的表现方式。内容设置精巧,主题突出、视觉整体性良好,

这是一个解除密码锁的活动页面,只要打开仓库的大门,成功解除密码锁的玩家就可以获得奖品。这个页面的抄现实表现主要集中在仓库大门和解密板上,大门的平面为信息排版提供了空间,钢铁的质感对应科技化的密码锁,看起来真实并充满挑战,门把手、开门转盘、压力表等元素的加入让大门的表现更加生动。

这是一个抽奖活动,但作者将它依附于拆弹情境。题材与上个主

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载