M菌

杨绛先生的父亲有一次问杨绛:“阿季,三天不让你看书,你怎么样?”

她说:“不好过。”

“一星期不让你看书呢?”

她说:“一星期都白活了。”

父亲笑了,说“我也这样。”

阅读,即是一种本能,也是一种生活。有这样一本书,能给你视听触味嗅的体验,赐你探索世界的好奇心。它就是“立体书”。就现在,翻开它,让它带着你去冒险吧~

 

什么是立体书

立体玩具书简称立体书,泛指书页中加入可动机关或透过书页展开立体纸艺的书籍。世界通用的立体书专有名词被称为“POP-UP”

640

《Kellogg’s Story Book》 – additive studios

 

640 (1)

《Goldsmiths – Stand out to Future Employers》 – Sam Pierpoint

 

立体书的种类和样式

翻:最普及最基本的技术,翻开就有立体纸艺跃然纸上。

640 (2)

《Creative Pop Up South Indian Wedding Invite Design》 – Atma Studios

 

折叠插页:不增加立体书页,却能纳入更多内容与纸艺表现作用,就好像文章中的标注。

zhedieye gif
《The Huxtaburger Book》 – A Friend of Mine

 

拉:可以从地板运动迅速变身为花式体操的变脸专家。

640 (3)

《Personal Holiday Card #3》 – Joseph Veazey

 

旋转木马:转动着欣赏,转景书。

640 (4)

《Alice in Wonderland》 – Macmillan

 

隧道书 :多层景片一前一后平行且间隔排列,再以类似手风琴的百褶结构串联,观赏时必须将书本往后拉伸,通过多层次景片构成的景深产生立体透视的效果。

《Книга Загадка-Разгадка / Riddle-Answer book / 2014》 - Natalia Yugay

《Книга Загадка-Разгадка / Riddle-Answer book / 2014》
– Natalia Yugay

《Hermès - La nature au galop》 - Coney Leung

《Hermès – La nature au galop》
– Coney Leung

 

投影剧场: 光的照射产生影的造型。

《More from Hari & Deepti's Line of Backlit Paper》 - Sculptures

《More from Hari & Deepti’s Line of Backlit Paper》
– Sculptures

 

案例欣赏

https://imgcache.qq.com/tencentvideo_v1/player/TPout.swf?max_age=86400&v=20140714

LACOSTE L!VE作为新生代品牌,代表着一种年轻的态度,充满活力的穿衣风格。结合了LACOSTE经典元素与街头艺术,特立独行,充满个性。这本pop-up使用了以上所述的几个形式,通过新鲜有趣的freestyle传递够年轻够活力的时尚理念。

 

立体书形式的应用

对于咱们设计师来说,不能光想着玩呀,得想着这么好看有趣的东西怎么应用到实际工作中去si不si~

立体书的形式应用在banner、字体、海报、h5等设计上会有意想不到的效果!!不信你看!

摄影师谭硕作品《《时尚芭莎》 7月刊 美妆鲜货》

摄影师谭硕作品《《时尚芭莎》 7月刊 美妆鲜货》

Lush Cosmetics - Set Design

Lush Cosmetics – Set Design

 

SKU设计摆放:将产品置于“隧道”空间形式的纸艺之上,一层层边缘一条条流动的曲线,将产品气质衬托开来。

箱包pc端

箱包pc端

 

Banner设计:使用前后叠加素材的隧道感形式,与人物形成反差,人物像是走进了童话世界,画面丰富配色和谐。

640 (11)

圣诞购物

POP-UP KITCHEN: Food on Canvas

POP-UP KITCHEN: Food on Canvas

 

海报设计:(上)画面主体居中,加以有前后关系的“纸片”做点缀。(下)字体与元素穿插,部分隐藏部分显露,给人意想不到的叠加关系。

640 (13)

 

H5设计–火影剧场版(腾讯):主体为轮回的父子情。使用立体书carousel的形式360度转动着看。这种旋转也体现了“轮回”的主题。原理上使用电动转盘,插上纸雕片,在灯光的照射下,圆盘的转动形成若隐若现的光影动摇效果。将色彩-动感-力度-音乐-节奏融为一体。

640 (14)

 

https://imgcache.qq.com/tencentvideo_v1/player/TPout.swf?max_age=86400&v=20140714

 

H5设计–大孩子童话(京东):京东618与迪士尼合作,用立体书形式奉上几处关于大孩子的童话。一镜到底的艺术表现,加上立体纸的创意贴合,这支h5把每个人带入迪士尼的经典童话中。细节上注意了书本翻页给用户带来的听觉感受,不同故事的不同翻页声音更加赋予用户的想象力,感受“大孩子童话”。

 

立体书形式在设计中的应用实践

在参考了上述案例之后,想在设计上做尝试。

主题:限时抢1000元礼包(开机图)

场景:梦幻红包星球

构思:构图上采用文案居中形式,元素上选择红包金币等表现主题,颜色上参考时下流行的微渐变风格。在处理完中间部分主视觉后,发现四周部分太空,过于简单。在考虑到不影响主体又要丰富画面的情况下,想到使用peepshow的层次感纸艺元素点缀在四周,最终达到想要的画面效果。

640 (15)

 

立体书形式在设计中的应用总结

关键词:多层次,空间感

形式:隧道书、旋转木马

隧道书:立体纸艺元素与画面相结合,前后叠加创造空间感。设计时有些将主体物前置于元素之前,有些镶嵌在元素里,有些则将主体物部分压住,产生丰富的层次感。

旋转木马:常用于动态场景(h5、gif等)来实现。用户在关注到前景的同时也能注意到远景,这种近大远小,前实后需的画面很容易将用户带入其中。若是加上光源,画面更有梦幻神秘的意境。

使用场景:一般作为主体以外的元素存在。目的为了突出主体物;丰富装饰画面;光源和投影营造氛围(神秘、梦幻等)。

技法:PS-效果-添加投影;C4D

立体书是平面造型与立体造型的结合,平面造型的立体化,两者有很多共同元素:点、线、面、构成、空间、阴影、透视、形态、色彩、肌理、材质等。其中平面造型主要表现点线面三元素所营造的二维空间感,立体造型则延至上下左右前后等各个角度的三元立体感。在实际工作中,针对无动效的画面更加注重视觉体验,而有动效的画面则强调三维空间给人带来的多种感官体验。在创意构思中除了从立体书的形式上考虑分类,还可以从其内容进行发散思维。比如:历史题材类、自然类、人文艺术类、童话故事类、电影周边类等等。大家感兴趣的可以尝试实践哦~

 

原文地址:网易UEDC(公众号)

作者:蔡雨苏

201705041493939771

 

 

 

 

 

 

转载请注明:学UI网 » 浅谈立体书形式在设计中的应用

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.xueui.cn ”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.xueui.cn” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.xueui.cn” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.xueui.cn” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@xueui.cn,也可以找各个群的管理】

 
你可能喜欢的:
腾讯设计师:互联网金融体验设计方法总结腾讯设计师:互联网金融体验设计方法总结
设计思考:B端产品的6条交互设计经验设计思考:B端产品的6条交互设计经验
通过微信Android和iOS版看两大系统差异通过微信Android和iOS版看两大系统差异
标签栏ICON的设计与应用标签栏ICON的设计与应用
三分钟搞清iPhone X 设计尺寸和适配三分钟搞清iPhone X 设计尺寸和适配
组件化设计思维 – 从规范到工具的构建与探索组件化设计思维 – 从规范到工具的构建与探索
版式设计:主要元素提取版式设计:主要元素提取
云计算交互设计师的必备知识!云计算交互设计师的必备知识!
腾讯设计师:浅谈小红点的设计腾讯设计师:浅谈小红点的设计
腾讯设计师:一款产品的诞生记--解决菲佣汇款问题腾讯设计师:一款产品的诞生记--解决菲佣汇款问题