设计风格 | “孟菲斯”UI设计

引言:1981年,意大利设计师Ettore Sottsass在米兰组建了一个叫"孟菲斯"的设计团体。他们的目标很明确:反对一切"正确"的设计规则。冷峻的极简主义统治了整个70年代,所有人都在追求"少即是多"。孟菲斯说:不,多即是多。色彩不需要和谐,图形不需要对称,装饰不需要理由。四十多年后,这场叛逆运动意外地在UI设计领域找到了最大的舞台。当极简风格让所有App长得一样时,孟菲斯用高饱和撞色、几何图形自由组合、粗黑描边,成了打破同质化最锋利的工具。它不是怀旧,不是复古潮,而是一套经过验证的视觉策略——在用户手指滑动速度越来越快的今天,用0.5秒抓住注意力,比什么都重要。

 

 

01

Nate Tate — 孟菲斯风格ICON设计

Design by:Nate Tate

Nate Tate在一个商业客户项目中,设计了一整套完整的孟菲斯风格图标系统,是孟菲斯美学在UI图标领域最具代表性的实践之一。整套ICON以粗黑色描边勾勒几何轮廓,内部填充高饱和的粉红、粉绿、亮黄、玫红等对比色块,完全脱离拟物风格,用孟菲斯标志性的装饰性和趣味性让功能性图标变得活泼吸睛。

 
设计风格 | “孟菲斯”UI设计

设计风格 | “孟菲斯”UI设计

设计风格 | “孟菲斯”UI设计
 
在色彩策略上,Nate Tate大胆打破常规配色法则。传统UI图标追求和谐统一,而他反其道而行——将艳俗的粉红与粉绿并置,亮黄与玫红碰撞,制造出强烈的视觉冲击力。这种"反配色学"的手法正是孟菲斯风格的核心主张:色彩不需要服从规则,只需要服从直觉。每一个图标都像一个微型的孟菲斯装置艺术品,几何图形自由组合,点、线、面交错分布。
 
设计风格 | “孟菲斯”UI设计

 
在图形语言上,圆形、三角形、正方形被拆解重组,以不规则的方式排列。图标不再只是功能标识,更成为画面中的装饰元素。粗黑描边的运用是关键——它在多色混搭中起到"锚定"作用,避免画面因色彩过多而陷入混乱,同时强化了孟菲斯风格标志性的"漫画感"。

02

Creative Market — 孟菲斯风格模板设计

Design by:Creative Market 设计团队 


Creative Market官方推出的孟菲斯风格设计模板,是孟菲斯UI语言的标准化示范,也是全球设计师学习孟菲斯风格的最常用参考资源之一。这套模板将孟菲斯风格拆解为可复用的四层结构,让复杂的美学体系变成了可操作的设计工具。

 

设计风格 | “孟菲斯”UI设计
设计风格 | “孟菲斯”UI设计
 
第一层是背景纹理:彩色几何形状+线性纹理+波点填充,构成画面的底色。第二层是立体点缀:多种几何形状组合,多用黑色描边,多彩色搭配,烘托空间感。第三层是撞色搭配:明快风趣的中高饱和度对比色和邻近色,制造视觉焦点。第四层是文案层:粗体无衬线字体,配合几何色块,确保信息清晰可读。
设计风格 | “孟菲斯”UI设计
设计风格 | “孟菲斯”UI设计

 

这套模板的价值在于它证明了孟菲斯风格可以被"系统化"。很多人认为孟菲斯是"随便乱堆色彩和图形",但Creative Market的模板展示了孟菲斯背后的逻辑:色彩有主次、图形有层级、描边有功能。每一层都有明确的视觉任务,组合在一起才形成孟菲斯特有的"热闹但有序"的效果。

 

 

03

Peter Judson — 城市街景孟菲斯插画(UI应用)

Design by:Peter Judson

Peter Judson将城市街景以孟菲斯艺术形式重新演绎,创作了一系列扁平化、极简几何化的城市插画,被广泛应用于App启动页、空状态页面和运营H5中。他的作品用圆形、矩形、菱形等几何图形组合成建筑与人物,高饱和色彩随意碰撞,为UI注入了手工感和艺术气质。
 
设计风格 | “孟菲斯”UI设计

设计风格 | “孟菲斯”UI设计

Peter Judson的孟菲斯插画有三个显著特征。第一,几何化简化:真实的城市街景被拆解为最基本的几何形状——方形代表建筑、圆形代表树木和行人、三角形代表屋顶,所有元素都经过高度抽象,但依然可识别。第二,色彩大胆:他使用粉红、粉绿、亮黄、玫红等孟菲斯标志性配色,与真实城市的灰色调形成强烈反差,制造出一种"童话城市"的超现实感。第三,黑色粗描边:所有图形都有清晰的黑色轮廓线,这让插画在不同尺寸的屏幕上都能保持清晰度,同时强化了孟菲斯的装饰感。

设计风格 | “孟菲斯”UI设计

设计风格 | “孟菲斯”UI设计

这类插画在UI中的应用场景非常广泛。App启动页用它替代传统的品牌Logo展示,让用户在打开App的第一秒就感受到品牌的趣味性;空状态页面用它替代"暂无数据"的冷冰文字,把用户的挫败感转化为欣赏一幅小画的愉悦感;运营H5用它作为背景或分隔元素,提升页面的视觉丰富度。

 

 

分享到: 文章二维码
© 版权声明

暂无评论

您必须登录才能参与评论!
暂无评论...