赞助商
立即赞助

腾讯重磅干货:运营专题高效设计法(下)

字体设计3年前 (2021)发布 流光
2.6K 0 0

在《营专题效设计方法-上篇》中,我们一起探讨了项目分析的个步骤,从项目目标到户人群,进行分析洞察得设计执行方向的策略。在设计执行版中介绍了「效构图」、「效色彩」的方法与技巧,接来继续跟随我探讨「字体」与「延展」的效设计方法。

高效字体

字体设计是在创作运营设计中重的组部分,也互联网行业从事设所重的基础素。运用装饰手法化文字,增强视觉效果,提高作品的诉求赋予版面的审价。但创作一款字体需花费较的时间本,那么我们节奏较的运营设中,如何高效创作一款合项目主题并且符合设审的字体呢?我总结出了四套设方法:字库造字、矩形造字、钢笔造字、手绘造字。

腾讯重磅干货:运营专题高效设计法(下)

首先始创作字体之,需了解基本的造字流程,同样也分四骤:

腾讯重磅干货:运营专题高效设计法(下)

  • 析:根据「项目析」得出的计策略,对「活动标题」或「主题文案」进行字体析得出适的风格方向,收集相关主题案例资料,辅助创作。
  • 搭:利用库体或手绘来搭该体骨架。
  • 创作:使用变化、裁剪、装饰、添加方法行创作表达主题风格意。
  • 塑:添颜色、特效、物、背景,置入使场景,搭配辅助案验证效果。

了解了造字的基本流程,设师还需完善好电脑里的字库,对字体厂商需保持好奇、敏感以及尊敬。

接来将介绍种字体设计的效方法:

1. 字库造字

利现有字库字体,进行有题的字体改、笔画添、笔画删减、或重组合的方法。分为:嫁接、删减、替代种同的方法,适应同的创作方向。

腾讯重磅干货:运营专题高效设计法(下)

嫁接:根据题进行针对性的设计修,在横、竖、撇、捺的笔画端点或字体的衬线分进行添,通过「多」来的细节,字体符合项目题。如:添直硬朗的字体变得有量,添尖锐角字体变得尖锐等…

腾讯重磅干货:运营专题高效设计法(下)

删减:删减与嫁接是相对应的,在保证字体识别的前,对笔画进行断笔、删除、裁剪;或者将笔画的某一个断开,字体存在残缺之美。

腾讯重磅干货:运营专题高效设计法(下)

替代:在原字体的基础上,删减某处或多处笔画,再他形式进行代替,可是另一种字体笔画替代或是图形创意的添。

腾讯重磅干货:运营专题高效设计法(下)

2. 矩形造字

利用矩形、方形、平行四形行拼接方法字体设,选取一款合的字体作基础骨架,根据主题需行拉伸变形(高、矮、胖、瘦)再将「矩形」元素骨架拼接设。

腾讯重磅干货:运营专题高效设计法(下)

Tips:使用矩形造字法的过程中,需遵循字体的粗细原则(字体字体笔画结构简单的况下,可以用同样粗细的矩形拼接,但字体较复杂笔画结构时可以遵循以下五原则:横细竖粗、副细主粗、内细外粗、密细疏粗、交叉变细)

案例:《肆青春》

分析:该字体 QQ 空 12 年款广告体,需要运用在运活动、品广告等系列地。品纹样形搭配以及构成形,需要款偏块体来进搭配。

腾讯重磅干货:运营专题高效设计法(下)

搭:结合形品纹样,选取了结构比较正硬朗结实「造工房版黑」体来作为体骨架。

腾讯重磅干货:运营专题高效设计法(下)

创作:根据搭版黑体骨架将体进「矩形再造」,使用「断笔处理」增强设计感。设计过程调笔画粗细、端以及度。

腾讯重磅干货:运营专题高效设计法(下)

塑造:利用矩形造五大原则,进最终完稿调。以及运用样原理,输出了套文案库来适应 QQ 空 12 年项目所有运用。

腾讯重磅干货:运营专题高效设计法(下)

完稿后,将其他文案体也进了样创作设计,适用在品广告、运活动。

腾讯重磅干货:运营专题高效设计法(下)

3. 钢笔造字

利用「钢笔工」来计字体的笔画,通过字体的相、相减、圆滑达计符项目主题。

案例:《空间大咖秀》

析:QQ 空间直播推出的栏目,会让作艺人来进行直播、互动。需要整个主题字有节目、尚、娱性、亲性等点。

腾讯重磅干货:运营专题高效设计法(下)

搭建:运用绘的形式来进行基础搭建,草图形式上,大概画出字体造型,需表达粗细、笔画、曲线、组形式等。

腾讯重磅干货:运营专题高效设计法(下)

创作:在软件用钢笔工画出笔画、曲线、以及圆角半径和线条粗度,进行字体编排组,添加「播放」相关创的图形。

腾讯重磅干货:运营专题高效设计法(下)

塑造:继续调整字的大结构,置入使用景,确定最终描边粗度,添加色彩、效果、质让主题文字表述的更为形象生动。

腾讯重磅干货:运营专题高效设计法(下)

4. 手绘造字

类字身带有手绘痕迹,清新别致,用笔刷直接在软件里写出的字,随自由,使用场泛,但对设计师的字基础和书法功底要求很高。种方法当因人而异,根据设计师的书法功底,也有不同的做法,以直接书写,也以使用一款字库字为骨骼框架,在其基础上进行手绘创。

案例:《QQ空间直播版宣传》

QQ 空间直播版宣传,UGC 直播场,用直播来给分享此时此刻的心情、感受、画面。采用手绘、手形式以增添直播场中的即时感。

腾讯重磅干货:运营专题高效设计法(下)

腾讯重磅干货:运营专题高效设计法(下)

腾讯重磅干货:运营专题高效设计法(下)

腾讯重磅干货:运营专题高效设计法(下)

最后,按其法继续延展出其他两组体,覆盖更多播场景故事……

腾讯重磅干货:运营专题高效设计法(下)

高效延展

经过构图、色彩、字体的计执行基本完成顶部为视觉风格的创构图,下来就开始进入计延展的计。好的计延展,可让活动变得加添彩。那如何高效地进行计延展部呢?为「表现方式」「计方法」个部来进行计。

腾讯重磅干货:运营专题高效设计法(下)

1. 表现方式

表现方式我们以从最基础的,点、、面的形式进行拆分,来辅助设计延展。

点:网格布局、线性布局、随机布局、半调化以及粒组。

腾讯重磅干货:运营专题高效设计法(下)

线:线性排列、面化、结构化、粗细混以及异性组。

腾讯重磅干货:运营专题高效设计法(下)

面:拼、叠加、伪3D、Alpha、层化。

腾讯重磅干货:运营专题高效设计法(下)

2. 设计方法

将表现方式进行设计创分为:拆分、释义、联想、重构的方法。

拆分法

将品牌 logo 主,拆分为个简约的图形元素为辅助图形进行延展。

案例:《Buchanan》从 Buchanan 的品牌 logo 的中拆出图形素进行重新排列,组新的品牌素(数字、图形)结品牌色进行计延展。

腾讯重磅干货:运营专题高效设计法(下)

案例:《QGC》是 QQ 游戏嘉年的简称,是一年一度 QQ 游戏的赛事盛宴,为了更好的突出 QQ 游戏的品牌创作了机甲战鹅来演绎 QGC 的专属形象,在 logo 的字体计、以及辅助图形创作上中也同提取了高达的机甲素进行计延展。

腾讯重磅干货:运营专题高效设计法(下)

释义法

结合品牌释意或形象,衍伸出种关联图形元素为辅助图形进行设计延展。

案例:《COP25》这款气候变化大会的品牌创是从不同气、气候的征提取的素进行的 logo 创作,辅助图形也是根据气、气候的各种形进行的重组搭配创作。

腾讯重磅干货:运营专题高效设计法(下)

案例:《QQ20周年 · 大会员预热》空企鹅探索科作为本次 20 周年的品牌理念,来寓新的程碑。在进行运营活动计,希望继续延展探索宇宙的概念。用深蓝色宇宙银河作为整个主活动的背景承托氛围。主视觉使用了 Cyperpunk 动画效果,延展计中按钮和边框色图形上也效仿科中未来 UI 效果,化整个活动的科未来受。

腾讯重磅干货:运营专题高效设计法(下)

联想法

总结品牌图形特征,通相似形代表品牌主题,进行设计延展

案例:《TEDx Koenigsallee》从 X 的变化进行图形创作,形成有序的 X,成为辅助图形进行品牌计延展。

腾讯重磅干货:运营专题高效设计法(下)

案例:《Qzone 12th》从 QQ 空间的 logo 出发,围绕星星造型计延展出不同的图形。注入最有记忆点的品牌色,纹的多性也映射出用户青春故事的多性。

腾讯重磅干货:运营专题高效设计法(下)

重构法

总结品牌图形特征,通相似形代表品牌主题符号。

案例:《黄钻 10 周年》从 logo 从中提取「10」和「黄钻」素来进行计创作,使用重构法重新对黄钻的权进行归纳。会以及其的延展图形(游戏、直播、情侣空间、行、个性化等)继续沿用 10 字的造型进行重构延展。

腾讯重磅干货:运营专题高效设计法(下)

案例:《腾讯  20 周年》腾讯公旗下已经有数百种产品服和组织机构,在 20 周年之际计队发起把每一个业、部门进行图形创作,利用重构法进行延展计,表达出每个品牌、业、部门的不同的性格、性以及职能。

腾讯重磅干货:运营专题高效设计法(下)

以上高效的创作方法巧,希望对大家后续的计工作中有所帮助,为了项目的准确性,需要多你的作伙伴、需求方进行反复沟通;确了项目目标、用户人群,进行创、洞察得出指导项目的计策略进行高效的计执行。

3. 案例应用

通过《星赛》案例来复盘一次完整的运营需求计步骤。首先从需求目标入,竞行业近年来可谓炙可热,用户玩家都以观众的身投身于竞项目,能以选身在竞比赛中竞的人其实毛麟角,许多玩家都会幻想成为一名竞选征战竞比赛。《星赛》洞察了玩家草根的竞梦,希望能承实现每个玩家心中竞梦想的比赛,全体验竞的趣。

腾讯重磅干货:运营专题高效设计法(下)

构图-logo

不同普通的运营活动,星联赛项目启动,一步,需为整个活动设立品牌 logo,将 QQ 空间 logo 与「Victory」进行结合创造「胜星」的图形,象征每位玩家角逐胜的雄心壮志,寓意很贴切电竞比赛,也容易让用户联想到 QQ 空间。

腾讯重磅干货:运营专题高效设计法(下)

字体-logo

在进行创作 logo 字体设计时,炼的「V」和「角」元素在字体中。为了贴合电竞赛紧张激情氛围,将心跳波的元素与「星联赛」字体结合。

腾讯重磅干货:运营专题高效设计法(下)

色彩-logo

活动单色反白 logo 确之后,我们继续塑造 logo 的质感,三角形作背景衬托整《星联赛》logo。选取配色的时候,考虑到电竞比赛也体育竞技的一环,「星联赛」筹备同时,亚运会也将电子竞技项目式纳入了亚运会表演项目,所以我们选取了象征胜利荣耀的金色与色诠释星联赛的体育竞技属性。

腾讯重磅干货:运营专题高效设计法(下)

构图-主视觉

确定好 logo 设计后,我们进入构图创作,主 KV 构图风格需与 logo 呼应,时它也将奠定界视觉设计延展基调。为此创作了三个概念稿:是插满各游戏具武球;是结合「铁王座」梗,设计个游戏具打造至尊王座;三是由游戏元素共组成胜利。

腾讯重磅干货:运营专题高效设计法(下)

最终选择了和 logo 形更加适配倒三形「胜利」这案作进步细化。3D 白模阶段,样运用了打散组,将几款游戏元素结到主体模型;王者荣耀晶塔、武、翅膀;两侧部分为 QQ 飞赛模型,下半部分则是出和平精英各类枪械。

腾讯重磅干货:运营专题高效设计法(下)

色彩-主视觉

主视觉整体的色彩搭配,沿用 logo 的配色,象征胜利荣耀的金色红色来诠释星赛的体育竞属性。背景搭配宇宙深邃的蓝色来突出Cyperpunk 三角金属门,希望通过这种三维虚拟的表现形式第一间抓住用户眼球,增画面对用户的染力,添加蓝色红色的对比进行竞对抗。

腾讯重磅干货:运营专题高效设计法(下)

腾讯重磅干货:运营专题高效设计法(下)

延展-

中有大量图片展示(如每款游戏的轮播图、赛事和战队精彩视频放、积分商城奖展示、浮层等)这都是需要我们利起来强牌感的位置,可打细节,升项目视觉质。《星联赛》首页轮播图为例, logo 中炼的「V」元素,延续整个传达的牌感受,结合偏游戏感拟物的视觉表现,搭配金色,雕琢细节,强质感,贯穿到整个延展设计中。

腾讯重磅干货:运营专题高效设计法(下)

腾讯重磅干货:运营专题高效设计法(下)

腾讯重磅干货:运营专题高效设计法(下)

活动详情页是具体游戏相关数据展示,头部运用等边三形元素 logo 加以饰,结合本款游戏 CG 原画,增强页游戏感和竞技感。战队详情页主要展示本战队排名、战绩、参赛场等数据烘托战队竞赛氛围。

腾讯重磅干货:运营专题高效设计法(下)

腾讯重磅干货:运营专题高效设计法(下)

游戏《者荣耀》、《QQ飞车》以及《和英》,在 icon 的计中体现出每款游戏点的同还要星赛整体的视觉调性保持一致,首先提取游戏中有代表性的素,别来代表:报名玩家、参赛战队、对战次。图形以三角形为基础,添加质,折角由 45° 角相切而成,三角边框协调图标之间的衡,确保图标体量统一。

最后,希望本文介绍法可以帮助大家设计创作提升效率速度。

欢迎关注「腾讯ISUX」的公众:

腾讯重磅干货:运营专题高效设计法(下)

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

Hey,guys~ 今天这篇文章的主题与运营活动相关,个人总结一款完善的运营活动设计,主要可分为 4 大步骤:策划-执行-跟进-复盘...
互动设计
相较于 QQ 频繁的更新频率与对新功能新尝试的包容度,「微信」的更新就显得保守许多。毕竟作为一款日活超 10 亿的国民 App,...
微信
项目背景 春节作为极富中国特色的传统佳节,承载了丰厚的历史文化底蕴。为了让传统文化得以继承和发扬,今年的 QQ 春节活动搭...
QQ
做运营设计六年+,在此总结出一些小经验跟大家分享,应该能够帮到进阶中的你。 一、前言 选材(25)+背景(25)+文案设计(40...
Banner设计
借着近期乘车码相关业务版本迭代的成果产出,本文复盘了过程中的设计工作,将设计体验的思考与经验重新梳理成体系,建立可指...
产品设计
情感化设计已经不是一个新概念,唐纳德·诺曼在《情感化设计》一书中,清晰地阐述了情感化设计的重要地位与作用。现阶段,同类...
微云
相信很多经验不足的设计童鞋都有这种情况:拿到一个项目需求,不知首先从哪里入手,埋头就做,做一步想一步,没有一套比较保...
LOGO 设计
互联网的产品视觉设计师又分为界面视觉设计师和运营视觉设计师,那么,这两者有何区别呢? 随着时代进步,互联网的发展让我...
界面设计