腾讯ISUX
isux.tencent.com
社交用户体验设计
在运营专题高效设计法（上）中，我们一起探讨了项目分析的四个步骤，从项目目标到用户人群，进行分析洞察得出设计执行方向的策略。在设计执行版块中介绍了【高效构图】、【高效色彩】的方法与技巧，接下来继续跟随我探讨【字体】与【延展】的高效设计方法。
字体设计是在创作运营设计中重要的组成部分，也是互联网行业从事设计所最重要的基础要素。运用装饰手法来美化文字，增强视觉效果，提高作品的诉求和赋予版面的审美价值。但创作一款字体需要花费较大的时间成本，那么在我们节奏较快的运营设计中，如何高效地创作一款适合项目主题并且符合设计审美的字体呢？我总结出了四套设计方法：字库造字、矩形造字、钢笔造字、手绘造字。首先在开始创作字体之前，需要了解基本的造字流程，同样也分为四个步骤：![]()
分析：根据“项目分析”得出的设计策略，对“活动标题”或“主题文案”进行字体分析得出适合的风格方向，收集相关主题案例资料，辅助创作。创作：使用变化、裁剪、装饰、添加等方法进行创作表达主题风格寓意。塑造：添加颜色、特效、装饰物、背景，置入使用场景，搭配辅助文案验证其效果。了解了造字的基本流程，设计师还需完善好电脑里的字库，对字体厂商需要保持好奇、敏感以及尊敬。利用现有字库字体，进行有主题的字体改造、笔画添加、笔画删减、或重新组合的方法。分为：嫁接、删减、替代三种不同的方法，适应不同的创作方向。嫁接：根据主题进行针对性的设计修饰，在横、竖、撇、捺的笔画端点或字体的衬线部分出进行添加，通过“多”出来的细节，让字体符合项目主题。比如：添加刚直硬朗的装饰让字体变得有力量，添加尖锐三角装饰让字体变得尖锐等…删减：删减与嫁接是相对应的，在保证字体识别度的前提下，对笔画进行断笔、删除、裁剪；或者将笔画的某一个局部断开，让字体存在残缺之美。替代：在原字体的基础上，删减某处或多处笔画，再用其他形式进行代替，可以是另一种字体笔画替代或是图形创意的添加。利用矩形、方形、平行四边形进行拼接方法字体设计，选取一款适合的字体作为基础骨架，根据主题需要进行拉伸变形（高、矮、胖、瘦）再将“矩形”元素在骨架上拼接设计。Tips：在使用矩形造字法的过程中，需要遵循字体的粗细原则（字体在字体笔画结构简单的情况下，可以用同样粗细的矩形来拼接，但是字体为较复杂大笔画结构时可以遵循以下五个原则：横细竖粗、副细主粗、内细外粗、密细疏粗、交叉变细）分析：该字体是QQ空间12周年的一款广告字体，需要运用在运营活动、品牌广告等一系列的地方。品牌纹样的方形搭配以及构成形式，需要一款偏方块字体来进行搭配。
![]()
搭建：结合方形品牌纹样，选取了结构比较方正硬朗结实的“造字工房版黑”字体来作为字体骨架。
![]()
创作：根据搭建的版黑字体骨架将字体进行“矩形再造”，使用“断笔处理”增强设计感。设计过程中调整笔画粗细、端点以及角度。
![]()
塑造：利用矩形造字的五大原则，进行最终的完稿调整。以及运用同样的原理，输出了整套的文案字库来适应QQ空间12周年项目中所有运用。
![]()
完稿后，将其他文案字体也进行了同样的创作设计，适用在品牌广告、运营活动当中。利用“钢笔工具”来设计字体的笔画，通过字体的相连、相减、圆滑达到设计感符合项目主题。分析：QQ空间直播平台推出的栏目，会让合作艺人来进行直播、互动。需要整个主题字有节目感、时尚感、娱乐性、亲民性等特点。
![]()
搭建：运用手绘的形式来进行基础搭建，在草图形式上大概画出字体造型，需表达粗细、笔画、曲线、组合形式等。
![]()
创作：在软件里用钢笔工具画出笔画、曲线、以及圆角半径和线条粗度，进行字体编排组合，添加“播放”相关创意的图形。
![]()
塑造：继续调整字的大小与结构，置入使用场景，确定最终描边粗度，添加色彩、效果、质感让主题文字表述得更为形象生动。
这类字体本身带有手绘痕迹，清新别致，利用笔刷直接在软件里写出的字体，随性自由，使用场景广泛，但对设计师的字体基础和书法功底要求很高。这种方法当然因人而异，根据设计师的书法功底，也有不同的做法，可以直接书写，也可以使用一款字库字体作为骨骼框架，在其基础上进行手绘创作。QQ空间直播版本宣传，UGC直播场景，用直播来给好友分享此时此刻的心情、感受、画面。采用了手绘体、手记体形式可以增添直播场景中的即时感。最后，按其方法继续延展出其他两组字体，覆盖更多的直播场景中的故事……
经过构图、色彩、字体的设计执行基本完成顶部为视觉风格的创意构图，接下来就开始进入设计延展的设计。好的设计延展，可让活动变得加分添彩。那么如何高效地进行设计延展部分呢？分为“表现方式”与“设计方法”两个部分来进行设计。
表现方式我们可以从最基础的，点、线、面的形式进行拆分，来辅助设计延展。点：网格布局、线性布局、随机布局、半调化以及粒子组合。![]()
线：线性排列、面化、结构化、粗细混合以及异性组合。![]()
将表现方式进行设计再创作可分为：拆分、释义、联想、重构的方法。将品牌logo主体，拆分为多个简约的图形元素作为辅助图形进行延展。案例：《Buchanan》从Buchanan的品牌logo中拆分出图形元素进行重新排列，组合新的品牌元素（数字、图形）结合品牌色进行设计延展。案例：《QGC》是QQ游戏嘉年华的简称，是一年一度QQ游戏平台的赛事盛宴，为了更好的突出QQ游戏的品牌创作了机甲战鹅来演绎QGC的专属形象，在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周年之际设计团队发起把每一个业务、部门进行图形创作，利用重构法进行延展设计，表达出每个子品牌、业务、部门的不同的性格、特性以及职能。以上高效的创作方法与技巧，希望对大家后续的设计工作中有所帮助，为了项目的准确性，需要多与你的合作伙伴、需求方进行反复沟通；明确了项目目标、用户人群，进行创意、洞察得出指导项目的设计策略进行高效的设计执行。通过《星联赛》案例来复盘一次完整的运营需求设计步骤。首先从需求目标入手，电竞行业近年来可谓炙手可热，用户玩家都以观众的身份投身于电竞项目，能以选手身份在电竞比赛中竞技的人其实凤毛麟角，许多玩家都会幻想成为一名电竞选手征战电竞比赛。《星联赛》洞察了玩家草根的电竞梦，希望能承办实现每个玩家心中电竞梦想的比赛，全民体验电竞的乐趣。不同于普通的运营活动，星联赛项目启动后，第一步，需为整个活动设立品牌logo，将QQ空间logo与“Victory”进行结合创造“胜利五星”的图形，象征每位玩家角逐胜利的雄心壮志，寓意很贴切电竞比赛，也容易让用户联想到QQ空间。在进行创作logo字体设计时，也提炼出的“V”和“三角”元素运用在字体中。为了贴合电竞比赛紧张激情氛围，将心跳波动的元素与“星联赛”字体结合。活动单色反白logo确定之后，我们继续塑造logo的质感，三角形作为背景衬托整个《星联赛》logo。在选取配色的时候，考虑到电竞比赛也是体育竞技的一环，在「星联赛」筹备同时，亚运会也将电子竞技项目正式纳入了亚运会表演项目，所以我们选取了象征胜利荣耀的金色与红色来诠释星联赛的体育竞技属性。确定好logo设计后，我们进入构图的创作，主KV的构图风格需与logo呼应，同时它也将奠定界面的视觉设计延展基调。为此创作了三个方向的概念稿：一是插满各种游戏道具的武器星球；二是结合“铁王座”的梗，设计一个游戏道具打造的至尊王座；三是由游戏中的元素共同组成的胜利之门。最终选择了和logo外形更加适配的倒三角形“胜利之门”这一方案作进一步细化。3D白模阶段，同样运用了打散重组的方式，将几款游戏的元素集结到主体模型中；王者荣耀的水晶塔、武器、翅膀；两侧部分为QQ飞车中的赛车模型，下半部分则是出和平精英中的各类枪械。主视觉整体的色彩搭配，沿用logo的配色，象征胜利荣耀的金色与红色来诠释星联赛的体育竞技属性。背景搭配宇宙深邃的蓝色来突出Cyperpunk三角金属门，希望通过这种三维虚拟的表现形式第一时间抓住用户眼球，增强画面对用户的感染力，添加蓝色与红色的对比进行竞技对抗。活动中有大量图片展示（如每款游戏的轮播图、赛事和战队精彩视频回放、积分商城奖品展示、浮层等）这都是需要我们利用起来强化品牌感的位置，也可以打造活动细节，提升项目视觉品质。以《星联赛》首页轮播图为例，运用logo中提炼出的“V”元素，延续整个活动传达出的品牌感受，结合偏游戏感拟物化的视觉表现，搭配金色，雕琢细节，强化质感，贯穿到整个延展设计中。活动详情页是对具体游戏相关数据展示，头部运用等边三角形元素对logo加以修饰，结合本款游戏的CG原画，增强页面的游戏感和竞技感。战队详情页主要展示本战队的排名、战绩、参赛场次等数据烘托战队竞赛氛围。
游戏《王者荣耀》、《QQ飞车》以及《和平精英》，在icon的设计中体现出每款游戏特点的同时还要与星联赛整体的视觉调性保持一致，首先提取游戏中具有代表性的元素，分别来代表：报名玩家、参赛战队、对战场次。图形以三角形为基础，添加质感，折角由45°角相切而成，三角边框协调图标之间的平衡感，确保图标体量感统一。
最后，希望本文介绍的方法可以帮助大家的设计创作提升效率速度。
以下ISUX文章，你可能也感兴趣
▽
3D动画片设计揭秘
那些欲罢不能的实用工具
![]()
感谢阅读，以上内容均由腾讯ISUX团队原创设计，以及腾讯ISUX版权所有，转载请注明出处，违者必究，谢谢您的合作。注明出处格式：
文章来自公众号：
腾讯ISUX
( https://isux.tencent.com/articles/efficent-design2）
![]()