IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

Catherine • 2017-05-12 06:33 • 交互设计

复古一直在流行,这也是为什么过去许多设计趋势常常会沉寂若干年之后,又再次走到潮流的最前线。今天,我们要聊的是孟菲斯设计风(Memphis Design),这种设计风格充满了80年代的特征,明亮的色彩和多样的图形与线条充斥其间,它也是近年重归流行的设计风格之一。

文章目录[隐藏]

  • 了解孟菲斯设计
  • 色彩的选取
  • 几何图形
  • 笔触和线条
  • 字体和排版
  • 结语

复古一直在流行,这也是为什么过去许多设计趋势常常会沉寂若干年之后,又再次走到潮流的最前线。今天,我们要聊的是孟菲斯设计风(Memphis Design),这种设计风格充满了80年代的特征,明亮的色彩和多样的图形与线条充斥其间,它也是近年重归流行的设计风格之一。

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

了解孟菲斯设计

孟菲斯设计是一种时髦的风格,它拥有现代设计的特征,最初是源自于纺织品的设计。有人嗜好孟菲斯设计风格,而有人则恰恰相反,一点也不适应。

这种设计趋势源自于80年代的由许多意大利室内设计师所组成的孟菲斯集团,孟菲斯设计风中涵盖了包括波普艺术、装饰艺术和80年代复古风在内的多种设计风格分支。最典型的孟菲斯设计风的案例包括 MTV 的LOGO 和 Solo Jazz Cup 的设计。

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

孟菲斯设计风最初的回归并非是网页设计领域,而是在时尚圈当中,随后海报和包装设计中越来越多的看到了孟菲斯设计风的影子,它具备远距离吸引用户注意力的特征。

孟菲斯风主要有如下几个特征:

  • 采用扁平化、矢量的元素,带有明亮、饱和度高的色彩
  • 几何图形是其中主要的元素,很少采用实际的图片或者照片
  • 其中包含大量扭曲的曲线和笔触,作为视觉线索和指引
  • 非衬线体是最受欢迎的字体选择

色彩的选取

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

黄色,蓝绿,橙色,洋红,柠檬黄,这些都是在孟菲斯设计风的作品中常见的色彩。

在孟菲斯设计中,几乎每种色彩都是明亮而鲜艳的,都带有霓虹色的质感,这些色彩的运用,旨在唤起用户对于幸福和快乐的强烈情绪,并且鼓励用户互动和参与。

孟菲斯设计风当中,几乎所有的情绪都与快乐和愉悦相关。

除了明亮的色彩之外,孟菲斯设计中还遵循一个简约的色彩模式,那就是采用黑色和白色为主色调,搭配明亮的色彩,选取最受欢迎的线条和几何图形作为载体。

几何图形

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

孟菲斯设计中充满了各种几何图形,从尖锐的元素到错综复杂的图案。无论是哪种几何图形,他们通常都显得自由随性而充满流动性,并非被栅格所限制。

其中最常见的是正方形、圆形和三角形,其他的大多都是充满手绘风格的、带有尖锐边缘的几何图形或者图案。

为了起到视觉上的强调,这些图形中许多可能会带有浓重的阴影或者明显的轮廓。

Material Design 就在孟菲斯设计风中吸取了许多经验和优点,或者说它就是更加现代的孟菲斯设计风的分支。相比Material Design,许多更“老”的孟菲斯设计风的作品中,阴影和图层的使用更接近一种“伪3D”的触感。

笔触和线条

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

厚重的笔触和线条可能是孟菲斯设计风中最具有识别度的元素。几乎所有的相关设计当中,都包含有自由随性的笔触和花纹,无论是使用计算机绘制还是手绘,它们都同样地典型。

这些元素的色彩同样采用的是典型的孟菲斯风的色彩,黑色、白色或者高饱和度的明艳色彩,这样的设计营造出来的强烈对比非常能够吸引用户的注意力。

而动画和动效能让这种老派的设计风格保持生命力。在上面的两个网页设计当中,微妙的动效是非常有意思的,让这种老派的设计看起来不会太过于扁平,也不会显得过时。

字体和排版

孟菲斯设计风:重回80年代,为网页注入迷人的设计风格

孟菲斯设计中最有意思的一点就是字体排版。也许在很多项目中都无法使用的字体都能在这里使用。

既然选择了80年代的设计风格,大胆的无衬线体、气泡风格的字体都拥有不错的效果。去寻找那些看起来锐利或者充满戏剧冲突的字体吧。

字体和排版应当和孟菲斯设计中其他的元素都保持一致的风格,因此具有明显几何特征、装饰性图案和笔触厚重的字体,都是不错的选择。

在色彩的使用上,同样不要过于保守。使用明亮的色彩,提升内容的对比度,让文字从背景中脱颖而出。

结语

如果你想寻找一种独特而充满想象的独特风格,孟菲斯设计风是一个不错的开始。无论是技术实现,还是视觉效果上,它都有着其他设计风格不具备的特色,许多非常规的设计都可以在这里找到、实现。

当你采用这种设计风格的时候,请务必记住,它的目的是要唤醒用户内心最强烈的情绪。在设计过程中,确保整体的美学特征是有趣而复古的。

 

原文作者:CARRIE COUSINS

原文地址:designshack

译者:@陈子木

译文地址:优设

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25760/

logoMaterial designPSUI产品经理动效动画字体孟菲斯设计用户经验网页设计视觉设计设计师设计风格译文
赞 (0)
CatherineCatherine
0
生成海报
百度地图:智能化设计探索,让出行更简单
上一篇 2017-05-12 05:31
至纯至简|手机百度8.0设计总结
下一篇 2017-05-12 07:21

相关推荐

  • 微信热点

    拆解【用户体验要素】

    作为产品经理不但要有能力作出产品设计和规划,更要尊重用户,作出用户体验更佳的产品【用户体验要素】告诉我们如何更好的设计出让用户体验更佳的产品方法论,那么这本书如何更好的应用到实战中,我们如何更好的将理论与实践结合呢?我们今天简单来阐述一下【用户体验要素】概论知识初识【用户体验要素】【表现层】我们所能看到的一系列的网页的元素:图片、文字、按钮等,有些图片就是图片,单纯的进行展示;有些图片或者文字有可能就是一个按钮链接,通过点击可以执行某种...

    2018-05-05
  • 交互专题

    深入研究了4款外卖APP,我做了交互优化

    作者:陈仁杰 题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。 首先,我将分析的逻辑和…

    2017-08-04
  • 微信热点

    全面提升用户体验,海尔卫玺首个智慧浴室体验店盛大开业!

    随着“智慧家庭”的概念不断深入人心。在智慧浴室空间领域,与以往用户单一追求产品的实用性相比,如今用户更倾向于将浴室打造成一个智能化、人性化的空间。基于用户对美好智慧生活的需求,海尔卫玺首个智慧浴室体验店于4月28日在上海盛大开业。开业地址:上海市浦东新区浦三路1515号同福易家丽6号楼2-108海尔卫浴专卖店卫玺智慧浴室体验店咨询热线:(021)50102530海尔卫玺智能马桶盖全系列闪耀亮相自上市以来,海尔卫玺智能马桶盖以高水准的品质...

    2018-05-04
  • 功能确定之后,如何做好UCD概念设计? 交互专题

    功能确定之后,如何做好UCD概念设计?

      功能和数据都确定下来了,接下来我们就要把功能数据给设计出来,也就是决定它们长啥样,怎么操作的。 如果说前面的分析研究、需求定义、功能数据确定是“做正确的事”,现在开始我们就要“正确地做事”,方向抓…

    2016-02-20
  • 交互干货必收 | App界面交互设计规范 交互设计

    交互干货必收 | App界面交互设计规范

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    2017-06-04
  • 微信热点

    产品学习——用户体验要素

    最近看完了这边和产品相关的书籍——《用户体验要素》,读完之后感觉这本书写的挺好。下面做了一些思维导图,做的比较详细,这样就可以当做是读书笔记了。自己的不足:1,读起来的困难是这本书翻译的不是特别好,所以为了理清楚这个本的脉络,还是花费了比预期要久的时间。2,是第一次使用xmind,在一边做思维导图,一边学习使用xmind上面花费了一些时间。3,是专注度还是不够,集中精力的时间太少了,所以做一件事的时间就会拖的太久。第一章:用户体验为什么...

    2018-02-23
  • 干货贴:To B 系统软件Web端的交互设计总结 交互设计

    干货贴:To B 系统软件Web端的交互设计总结

    文章分享了作者做了几款系统软件后的一点点总结,希望给大家的产品工作来一些参考。

    2017-05-07
  • 工业设计与交互设计的关系 从零开始学交互

    工业设计与交互设计的关系

          工业设计是一个很宽泛的概念:它的设计构思上需要考虑到产品整体外型线条、各种细节特征的相关位置、颜色、材质、音效、人因工程等;产品范围上包括杯子、电脑、交通工具等实体产品。认为「工…

    2017-08-01
  • 微信热点

    交互设计 | “综合类&艺术类”院校申请侧重点指南

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-21
  • 聊一聊常见的登录交互方式 交互设计

    聊一聊常见的登录交互方式

    现在市场上面的APP种类繁多,而登录注册的方式也有很多,下文就简单来分析一下各种登录的交互方式,谈谈自己对这些方式的见解。

    2017-05-26
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress