大家好,欢迎来到 Slidecent,
见字如面,我是林利蒙。
又到了喜闻乐见的改稿环节,这次的案例依旧是全文字型:
关于腾讯医典的产品介绍页。
如果是你,会如何设计呢?简单思考几秒钟
好,时间到。我猜你可能在思考怎么让它变得更美。比如去哪里找医疗图片、图标、使用怎样的配色、字体等。
如果被我说中了,那么恭喜你发现宝藏,这篇文章一定会对你大有启发(建议收藏)。
其实在我看来,大段文字的设计可以用 3 步法搞定:分析文案、结构设计、视觉表达。(常看文章的你一定对这老 3 样并不陌生)
01
分析分案
设计的第一步不是美,而是理解内容
通读一遍后,可以按逻辑将文案分为 2 部分:
定义与功能。当然,有时文字较长,初学者不太容易理解文案逻辑。
分享一个小技巧:删减文案,仅保留主谓宾:
这时再观察句式:
定义:XXX 是什么
功能:XXX 为 XXX 提供了 XXX
是不是更清晰了呢?当然这种程度的拆解是远远不够的,还需进一步细化:
定义部分
将文案按照信息层级划分,提升辨识性:
关于“定义”,建议保留原始文案,不做拆解。因为定义多数是一段相对凝练的话,每个字都是包含信息的。
功能部分
功能 1:
大段文字不易快速理解功能。试着找出关键信息,并用图示表示信息间的关系。
图示的含义:医疗信息多是专业晦涩的,但是腾讯医典可以用生动地形式(问答、视频、咨询、漫画等)来呈现,让受众更好理解。
功能 2:
当文案中出现大量并列词汇时,掐头去尾就能看清内容的本质:
一句话总结就是:腾讯医典可以为用户提供 XXXXX 服务
整合版
最后,我们将上述几部分拼接起来,就构成了一页完整的设计初稿:
相比于原稿的全文字,这版的信息呈现更为直观(先不谈美化)。但有一个新的问题:各部分之间相互独立,较为零散。
虽然以并列的形式排版并没有问题,但这样太普通了,缺少挑战。
02.
结构设计
之所以觉得散,是因为缺少一条清晰的逻辑主线,将信息串联起来
在此,我找到了这样一根“线”:
它可以将所有信息串起来。当然你也可以自行挖掘其他的,合理即可。
接着细化结构,将其余文案补齐:
就得到了一页逻辑清晰的片子。
03.
视觉表达
在保证逻辑正确的基础上,把美感提上去
设计稿 V1
直接上我的第一版完成稿:
不知道你看完后的反应是怎样的呢?(欢迎来留言区交流看法)
相信直接拿来用是没有问题的,逻辑清晰、设计在线。但是呢,它还是成为了飞机稿。
原因很简单:版面没有得到利用,绝大部分信息都在画面中心,显得杂乱拥挤。
设计稿 V2
于是我放大了圆环,将中心的信息拉开了:
看起来好了很多,但是左上和右上仍有空缺。于是索性将圆环去掉:
呼吸感出来了。但由于缺少了圆环的连接,圆球是散乱的。如果是你会如何优化呢?
没错,那就是找一条“线”将圆环重新串起来:
同时加入插画素材填补下方空缺,整体感强了不少。
此时又有了一个新的问题:由于圆球是分散的,信息也随之分散了,不利于阅读。
设计稿 V3
于是,我找到了一个折中的方案,利用六边形将各项服务锁定在一个个格子中:
文案相对集中了,六边形也呼应了医疗中的分子结构,多出来的图形也象征服务众多,一举多得。
至此,大体的样式就设计完成了,开始给画面注入细节灵魂。
首先升华插画素材,将其配色、比例、复杂度等进行了多维度统一:
会更契合页面风格。
同时还可以加入“哭脸”和“笑脸”表情包烘托情绪:
因为表情包会比单纯的图标更具感染力。
最后再做一点细节调整,完成:
终稿
看下前后效果对比:
你觉得可以打几分呢?
其实相比于美化,更重要的是设计思维。
每一步设计都需要通过试错去尝试,以下为各种飞机稿:
本文来自微信公众号:Slidecent (ID:Slidecent),作者:林利蒙