腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

微信邦

作者：晋小彦

腾讯互动娱乐 高级设计师

《形式感+》设计出版物作者

《设计药电》网络电台主播

电台旗下三个栏目：《设计蛋白粉》、《设计微颗粒》、《设计交流电》

《形式感+》内容不涉及任何网页前端程序开发或PS操作步骤，也没有精深复杂的平面构成和色彩搭配理论。希望通过分享帮助有一定基础的网页设计初学者或在职者，在遇到设计创意瓶颈时，能够在较短的时间内解决设计上的创意和视觉形式感的问题，不论是应对紧急的工作需求或是求职面试都能够给观者一个新颖的视觉表现。

🍂

以下为正文

说说——因为残缺而拥有了令人震撼的美

“断臂手术”是一种推翻正常视觉习惯以达到情感集中并强化视觉冲击力的方法。非常规视觉效果会带给人们情感上的不平衡从而产生冲动，专题的营销特性决定了设计上需要这种强烈的情感和冲动，它不能像致辞一般隐晦或一团和气，它需要有立场。断臂手术的方法则通过去掉局部、选取局部以及替换局部来突出核心思想，让特殊的视角和画面带给观众更强烈的感受。

（文中部分图片来源于网络，如涉及任何版权问题，请联系腾讯游戏学院）

罗丹和断臂维纳斯

罗丹有一部伟大的作品"巴尔扎克"，它也是一具残缺的塑像。雕像的造型很别致：“巴尔扎克”披着睡衣，双手叠合在胸前，昂着硕大的脑袋，两眼注视着前方。

罗丹在完成这尊塑像时，叫了几个学生来一起欣赏。一个学生指着雕像的双手说："老师，这手像极了！我从来也没见过雕得这么完美的手呢。"然而，这句赞美的话使罗丹皱起了眉头，他沉思了一会，突然举起一把斧头，将那双"完美的手"砍了下来。学生们都疑惑不解，但罗丹却神色严峻地说道："这双手太突出了。既然这双手已经有了自己的生命，那就不再属于这个雕像的整体了。

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

也许罗丹是为了顾全大局的整体性，而砍下了雕像的双臂，也许是因为它的特立独行而选择独立的空间，不论如何这样一份残缺使雕像本身更具故事性和震撼力，引人思索。

想想——去掉局部、选取局部、替换局部

因为残缺，它有了与众不同的故事和特点，它的主题性和目标性比起完美的东西显得更加强烈。有时候，我甚至相信：只有残缺的东西才是美丽的。

去掉局部

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

去掉局部是在原先完整的整体上，为了更好地突出、说明事物的特征和主题而删去了其中某一部分，它为主题的表现排除了视觉干扰，使中心更加明确。去掉局部和选取局部在某些情况下是相对而言的。但两者都可以作为一种独立的思路而存在。

选取局部

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

选取局部通常因为选取的这个部分是特征的集中表现，它的独立存在能代表并放大整体的中心思想，使主题更加明确，情感更加集中。起到以少见多，以小见大的功效。

替换局部

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

替换局部是使用更能表现主题的事物来替代特定的局部，从而使主题突出。局部的替换一方面可以打破观者的习惯性视觉，另一方面替换事物的独立风格与原有整体结合后，特征更加明显，引发更多的延伸思考。

去掉局部、选取局部、替换局部都是通过不同途径和手法来放大特征的方法，为人们排除干扰、选择重点。电影镜头和海报中也时常用到这样的断臂局部描写，当我们习惯了处在某种环境之下，因为它的习惯性使我们的行为不会经过大脑的思考只凭借潜意识进行，但如果我们换了一个视角，变换了处境，我们的思维又会再一次活跃起来。这也是断臂手术的功效之所在。

看看——那些未露面的视觉强化了情感的重心

下面我们来一起浏览一下经过断臂手术的页面，它们通过去掉局部、选择局部、替换局部等思路突出了主思想和核心情绪。赏析的过程中主要思考其思路和方法。

去掉局部

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

这是一个收集勋章的活动。页面去掉了人物的头部和下半身，保留了配戴勋章人物的胸部来表达这个主题，因为它的独立存在能放大整个主题中心，比起一个配戴勋章但却完整的人物形像来说显得更为有效。

选取局部

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

战神，即使不露出全脸，我们也能深刻感受并认出角色的形像，另外通过放大角色的脸部特征，使角色的精神显得更为犀利。整个网页以白底为主，并无其它装饰，却使战神的核心特征深入人心。

替换局部

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

眼力够好，睡觉也能拿到奖品，这是活动的主题。这里用放大的纸片眼睛替换正常的眼睛。突破了常规的视觉习惯，点明主题，让人耳目一新。

做做——《第九大陆》神秘站

设计的方法多种多样，条条道路通罗马，从结果来看，它可能从圆方三角的路上过来，也可以是根据“超”现实的思路得出的，但是掌握不同方式可能让我们拥有更多的操作空间。下面我们选择一个日常最常见的礼包主题，通过“断臂“方法为之动手术，放弃完整，寻找独特视角。

《第九大陆》神秘站

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”

需求分析

这是游戏《第九大陆》测试的神秘站交互，当页面的浏览数到达1000000时就开启测试，而1000000也是站点的神秘数字。需求方希望宣传的氛围带有一定的神秘感，并突出1000000这个数字。

我们必需给玩家体现游戏即将开测的强有力气场，却又留有犹抱琵琶半遮面的悬念，另外还需要突出1000000这样一个数字。

于是我们利用“断臂手术”的方法进行了以下的设计。

设计分解

STEP 1：置入主体

1000000的数字是这个神秘站的主要信息，而战士角色是这次神秘测试使用的主形像。我们将必需使用到的那个大视觉先置入页面中。

STEP 2：断臂处理

为了让视觉不同于常规，并能体现出神秘的气息，我们仅保留了战士的腿部，产生了犹抱琵琶半遮面的神秘效果。并在其脚下画上一个概念的弧形地球表示大陆，产生一种开启和占领第九大陆的意味，并与《第九大陆》的游戏主题相关联。

STEP 3：信息排布

大致的创意和布局确定之后，我们便可以开始载入其它的一些信息，并确定它们的位置。由于这个页面信息比较少，所以后期的信息排布也相对简单自由一些。信息确定完整后就可以开始正式的细化了。

页面展示

腾讯游戏学院：设计丨游戏网页设计中的“断臂手术”