04 设计风格

设计风格

叙事

34

叙事方式

MEXC 的视觉叙事分为两类:

以产品为核心的表达

聚焦平台能力与功能特性,风格以信息准确、专业严谨为主,旨在提升专业度与可信度。

以品牌为核心的表达

围绕品牌概念与品牌故事展开,与品牌调性及品牌声音高度关联。

信息化

启发

专业

进取

真实

虚构

设计风格

插图

35

插图

设计风格

设计风格

原则

插图

36

设计原则

3D 图形是品牌传播的重要组成部分,请遵循以下设计原则:

高品质 精细的质感、高清的画质,呈现高级感。

直接 图形须直指主题,避免抽象化表达。

聚焦 蓝色专用于需要强调和突出的元素,使重要信息一目了然。

简洁 注重干净的形态、克制的装饰元素、简洁的视觉呈现,最大程度降低视觉噪音。

设计风格

设计风格

插图

插图

37

材料

MEXC 的 3D 材质体系以金属和玻璃为核心,通过银灰色金属与蓝色磨砂玻璃的组合,呈现精致、高品质的质感。

蓝色磨砂玻璃

蓝色磨砂玻璃

蓝色玻璃用于需要强调和突出的元素。品牌蓝代表 MEXC,天蓝代表无限机遇,天蓝比例须控制在 5%~10% 之间。

蓝色玻璃用于需要强调和突出的元素。品牌蓝代表 MEXC,天蓝代表无限机遇,天蓝比例须控制在 5%~10% 之间。

银灰色金属

银灰色金属

金属材质象征稳定与力量,传递专业感。金属表面采用哑光处理(低反射),呈现高品质视觉体验。

金属材质象征稳定与力量,传递专业感。金属表面采用哑光处理(低反射),呈现高品质视觉体验。

材料配比

材料配比

玻璃材质比例控制在 20%~40% 之间。

玻璃材质比例控制在 20%~40% 之间。

Base Color

Base Color

Material

Material

Frosted glass


Silver-gray metal - Main


Silver-gray metal - Stripe


Silver-gray metal - Sub

Frosted glass


Silver-gray metal - Main


Silver-gray metal - Stripe


Silver-gray metal - Sub

#18AFEB~#0057FF


#E4E6EC


#E4E6EC


#A0A7B2

#18AFEB~#0057FF


#E4E6EC


#E4E6EC


#A0A7B2

0.22


0.15


0.2


0.1


0.22


0.15


0.2


0.1


1.38


0.1


0.1


0.1

1.38


0.1


0.1


0.1

Roughness

Roughness

IOR

IOR

设计风格

设计风格

插图

插图

38

玻璃材质的使用

在 MEXC 的视觉体系中,蓝色用于突出并辅助主要内容,将视觉焦点引导至画面核心。蓝色玻璃应应用于需要强调的关键元素,切勿用于非必要的装饰性元素。

玻璃中的天蓝色高光象征 MEXC 的无限机会,天蓝比例控制在 5%~10% 之间,避免大面积渐变使画面显得复杂。

1

1

物体本身使用蓝色玻璃材质(全部或局部),直接应用,用于突出和强调。

物体本身使用蓝色玻璃材质(全部或局部),直接应用,用于突出和强调。

2

Glass material is not applicable to the item.

Blue glass is used on items that brings attention to important contents.

2

物体本身不适用玻璃材质,以蓝色玻璃辅助元素引导视线,聚焦重要内容。

两种玻璃应用

两种玻璃应用

设计风格

设计风格

插图

插图

39

画幅规范

视觉应用分为3种格式:

大、中、小。

视觉丰富度取决于画幅尺寸,大尺寸画面可承载更丰富的叙事内容,建议加入品牌图形强化品牌关联。小尺寸画面应尽量精简元素,优先保证清晰度。


典型场景:Hero Banner

元素数量:≤ 4

背景:情境背景

设计重点:叙事,氛围营造,画面效果




典型场景:Hero Banner

元素数量:≤ 4

背景:情境背景

设计重点:叙事,氛围营造,画面效果




典型场景:媒体海报

项目:≤ 3

背景:无

设计重点:信息传递,品牌一致性


典型场景:媒体海报

项目:≤ 3

背景:无

设计重点:信息传递,品牌一致性


典型场景:活动 Banner 插画
元素数量:1~2,≤3

背景:无

设计重点:识别度,直接表达


典型场景:活动 Banner 插画
元素数量:1~2,≤3

背景:无

设计重点:识别度,直接表达

Satke USDT to earn BTC

Satke USDT to earn BTC

Unlock up to

600% APR

Unlock up to

600% APR

1/7

1/7

Redeem points for a Swiss trip

Redeem points for a Swiss trip

Share $500K VIP Rewards

Share $500K VIP Rewards

Join

Join

示例:

示例:

示例:

示例:

示例:

示例:

设计风格

设计风格

插图

插图

40

品牌图形

当 3D 图形需要与品牌产生关联时,可使用以Logo形状为基础的底座图形。Logo底座设计象征 MEXC 坚实、稳定的平台属性。

请根据使用场景合理运用品牌图形,尤其在需要突出品牌属性的场合。独立设计时,不得改变标志的形状。

当 3D 图形需要与品牌产生关联时,可使用以Logo形状为基础的底座图形。Logo底座设计象征 MEXC 坚实、稳定的平台属性。

请根据使用场景合理运用品牌图形,尤其在需要突出品牌属性的场合。独立设计时,不得改变标志的形状。

设计风格

插图

41

3D 字符

MEXC 可将数字或符号作为 3D 图形使用。数字须采用 Barlow 字体,符号则是经过专项设计的功能性视觉元素。3D 图形的厚度不得超过其高度的 10%。

3D 图形的厚度不得超过其高度的 10%。

数字

数字

Barlow

Barlow

符号

符号

设计风格

插图

42

误用

以下为 3D 图形的禁止行为:

使用高反光材料

使用高反光材料

将蓝色用于非必要/次要元素

将蓝色用于非必要/次要元素

使用圆润或"可爱风"3D 建模风格

使用圆润或"可爱风"3D 建模风格

暗淡、神秘或诡异的视觉风格

暗淡、神秘或诡异的视觉风格

街头涂鸦或城市破败风格

街头涂鸦或城市破败风格

透明或半透明的玻璃材料

透明或半透明的玻璃材料

材质色调/色相使用有误

材质色调/色相使用有误

纹理过于复杂或色彩繁多

纹理过于复杂或色彩繁多

设计风格

图标

43

图标

Size:24px

bonus

Stroke size:2px

设计风格

设计风格

图标

图标

44

图标

图标设计须保持简洁、干净、信息准确,避免过度复杂化。在缩小尺寸后须检查图标是否仍清晰可辨。

标准规格:尺寸 24px · 描边粗细 2px

图标设计须保持简洁、干净、信息准确,避免过度复杂化。在缩小尺寸后须检查图标是否仍清晰可辨。

标准规格:尺寸 24px · 描边粗细 2px

设计风格

设计风格

影像

影像

45

影像

设计风格

设计风格

影像

影像

46

原则

影像的核心在于捕捉真实的人文时刻与生活场景。以下原则应贯穿始终:

真实 影像应还原真实状态,避免刻意摆拍、过度修图及表演性姿态。

清晰聚焦 画面简洁直接,突出主体,排除干扰元素,核心信息须一目了然。

有序 保持画面整洁、结构清晰、有条不紊,避免杂乱和信息过载,传递专业感与信任感。

影像的核心在于捕捉真实的人文时刻与生活场景。以下原则应贯穿始终:

真实 影像应还原真实状态,避免刻意摆拍、过度修图及表演性姿态。

清晰聚焦 画面简洁直接,突出主体,排除干扰元素,核心信息须一目了然。

有序 保持画面整洁、结构清晰、有条不紊,避免杂乱和信息过载,传递专业感与信任感。

真实

真实

影像应还原真实状态,避免刻意摆拍、过度修图及表演性姿态。

影像应还原真实状态,避免刻意摆拍、过度修图及表演性姿态。

清晰聚焦

清晰聚焦

画面简洁直接,突出主体,排除干扰元素,核心信息须一目了然。

画面简洁直接,突出主体,排除干扰元素,核心信息须一目了然。

有序

有序

保持画面整洁、结构清晰、有条不紊,避免杂乱和信息过载,传递专业感与信任感。

保持画面整洁、结构清晰、有条不紊,避免杂乱和信息过载,传递专业感与信任感。

设计风格

设计风格

影像

影像

47

影像风格

秉承影像原则,采用信息优先的中性风格,真实还原状态与质感,传递专业感与可信度。

自然 光线均匀、干净、合理,避免戏剧性或霓虹灯光,不使用重度滤镜或噪点效果,保持真实自然的视觉感受。

中性 画面清晰直接,以中性色调为主,仅在强调关键内容时使用品牌蓝。

简洁 构图干净,留有充足的留白空间,突出结构感与秩序感。

秉承影像原则,采用信息优先的中性风格,真实还原状态与质感,传递专业感与可信度。

自然 光线均匀、干净、合理,避免戏剧性或霓虹灯光,不使用重度滤镜或噪点效果,保持真实自然的视觉感受。

中性 画面清晰直接,以中性色调为主,仅在强调关键内容时使用品牌蓝。

简洁 构图干净,留有充足的留白空间,突出结构感与秩序感。

自然

自然

光线均匀、干净、合理,避免戏剧性或霓虹灯光,不使用重度滤镜或噪点效果,保持真实自然的视觉感受。

光线均匀、干净、合理,避免戏剧性或霓虹灯光,不使用重度滤镜或噪点效果,保持真实自然的视觉感受。

中性

中性

画面清晰直接,以中性色调为主,仅在强调关键内容时使用品牌蓝。

画面清晰直接,以中性色调为主,仅在强调关键内容时使用品牌蓝。

简洁

简洁

构图干净,留有充足的留白空间,突出结构感与秩序感。

构图干净,留有充足的留白空间,突出结构感与秩序感。

设计风格

设计风格

影像

影像

48

品牌形象

品牌影像中可融入 MEXC 蓝,以强化品牌关联。整体保持中性色调为主,品牌色仅用于点缀关键信息。

服装

服装

蓝色服装塑造强烈视觉冲击力与品牌识别度,传递权威与沉稳。

蓝色服装塑造强烈视觉冲击力与品牌识别度,传递权威与沉稳。

配饰

配饰

蓝色配饰增添细腻点缀,整体造型和谐统一,提升质感而不显张扬。

蓝色配饰增添细腻点缀,整体造型和谐统一,提升质感而不显张扬。

道具

道具

蓝色道具强化叙事感与视觉层次,引导观者视线,运用色彩心理学提升画面表现力。

蓝色道具强化叙事感与视觉层次,引导观者视线,运用色彩心理学提升画面表现力。

墙体

墙体

蓝色墙面营造沉稳、专业的空间氛围,适用于办公或宁静生活场景。


蓝色墙面营造沉稳、专业的空间氛围,适用于办公或宁静生活场景。


室内软装

室内软装

蓝色家具增添空间层次与现代优雅感,在中性环境中成为视觉焦点。


蓝色家具增添空间层次与现代优雅感,在中性环境中成为视觉焦点。


户外氛围

户外氛围

蓝色设计元素构建时尚、前瞻的户外空间,在休闲与现代感之间找到平衡。

蓝色设计元素构建时尚、前瞻的户外空间,在休闲与现代感之间找到平衡。

设计风格

设计风格

影像

影像

49

人像

作为全球化平台,MEXC 的人像摄影体现职业、族裔、地区与文化的多元性,同时传递自信、专业与积极向上的精神面貌。

人像摄影须保持高度真实感,人物的外形、造型、姿态与动作须与其职业或角色定位相符,确保画面传达清晰、准确的信息。

设计风格

设计风格

影像

影像

50

误用

以下为摄影使用的禁止行为:

画面中缺失品牌主色调

夸张或不自然的面部表情

过度艺术化或视觉干扰强烈的场景

夸张的棚拍布光

色彩过多相互争抢注意力

使用双色调处理

使用流行滤镜或比例失真效果

抽象或无法辨识的画面内容

设计风格

设计风格

视频

视频

51

视频

设计风格

设计风格

视频

视频

52

原则

视频内容同样分为产品导向型与品牌导向型,摄影与插图的指导原则同样适用于视频创作。

逻辑 逻辑优先于视觉效果,每一处转场都须有明确目的,确保用户清楚地理解内容发生的缘由。

连贯 保持流畅的视觉节奏,自然过渡,避免突兀剪切、画面碎片化或不协调的剪辑。

节奏 节奏稳健可控,避免过度渲染戏剧感,以助于理解为目标,而非追求视觉刺激。

逻辑

逻辑

逻辑优先于视觉效果,每一处转场都须有明确目的,确保用户清楚地理解内容发生的缘由。

逻辑优先于视觉效果,每一处转场都须有明确目的,确保用户清楚地理解内容发生的缘由。

连贯

连贯

保持流畅的视觉节奏,自然过渡,避免突兀剪切、画面碎片化或不协调的剪辑。

保持流畅的视觉节奏,自然过渡,避免突兀剪切、画面碎片化或不协调的剪辑。

节奏

节奏

节奏稳健可控,避免过度渲染戏剧感,以助于理解为目标,而非追求视觉刺激。

节奏稳健可控,避免过度渲染戏剧感,以助于理解为目标,而非追求视觉刺激。

设计风格

设计风格

视频

53

叙事方式

视频内容须优先保证高效传达,确保清晰直接。避免冗长的铺垫或不必要的情感烘托,核心信息应尽早呈现。整体节奏紧凑、逻辑清晰,帮助用户快速获取关键信息。

产品导向型


情境:真实

重点:信息准确、高效传达

语气:专业、可信赖、理性


产品导向型


情境:真实

重点:信息准确、高效传达

语气:专业、可信赖、理性


产品导向型


情境:真实

重点:信息准确、高效传达

语气:专业、可信赖、理性


产品导向型


情境:真实

重点:信息准确、高效传达

语气:专业、可信赖、理性


设计风格

设计风格

视频

54

视觉规范

视觉画面须严格遵循插图与摄影规范,确保品牌识别的一致性。

视频内容须优先保证信息准确,并遵循 MEXC 蓝的使用规范:蓝色用于强调、突出和支撑关键信息。

设计风格

设计风格

视频

55

文字动画

文字动画须服务于信息传达,确保可读性与语意的准确传递。

避免影响可读性或破坏信息连贯性的动效,如旋转、弹跳或散射效果;禁止使用与内容含义相冲突的动画效果。

位移与透明度动画

位移与透明度动画

打字机效果

打字机效果

扫光效果

扫光效果

1

1

2

2

3

3

禁止旋转动画

禁止旋转动画

禁止弹跳动画

禁止弹跳动画

禁止使用与内容语意相冲突的动效

禁止使用与内容语意相冲突的动效

设计风格

设计风格

视频

56

音效与配乐

音乐 须配合视觉节奏,具有韵律起伏,避免杂乱或分散注意力,整体流畅自然。

音效 增强沉浸感,突出关键动作或场景,为视频增添精致的质感,避免画面显得平淡干涩。

Sample of audio

Sample of audio

Sample of sound




Sample of sound




设计风格

设计风格

视频

57

误用

以下为视频创作的禁止行为:

视频中缺失品牌识别元素

视频中缺失品牌识别元素

不符合品牌视觉风格

不符合品牌视觉风格

使用与内容语意相冲突的动画效果

使用与内容语意相冲突的动画效果

过度营销化、节奏煽情、视觉过度刺激

过度营销化、节奏煽情、视觉过度刺激

DESIGN

中文