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

相关推荐

  • 交互设计

    好的产品经理是什么样的?

    互联网界自从出了几个大神级的产品之后,产品背后的产品经理被捧红了,一时间产品经理成了诸多行业从业者追求的目标,每个人都期望有一天也能做出一个很牛的产品来,这种影响导致了很多刚毕业的学弟学妹,都认为产…

    2014-11-12
  • 译文 | 在UX设计中利用色彩影响情绪 交互设计

    译文 | 在UX设计中利用色彩影响情绪

    颜色是我们观察事物的第一认知,是最能触动我们感官的视觉元素。颜色可以激发我们的联想,刺激我们的情绪。在设计中,颜色的合理运用一直是个很重要的课题。现在就让本篇文章带你认识每种颜色的独特作用和如何运用在UX设计之中吧。

    2017-05-25
  • 提高交互技能点,一些常见移动端交互方法 交互设计

    提高交互技能点,一些常见移动端交互方法

    “在PC上常出现的下拉菜单,在移动端上都是用什么交互来实现的”,将最近项目里碰到的情况总结一下。

    2017-05-30
  • 交互设计七大定律之Tesler's Law 泰思勒定律(复杂性守恒定律)

      最近在整理交互设计七大定律,发现了这篇老文,内容很精彩,翻译下与大家分享。 最近在整理交互设计七大定律,文章要系统的看。 目录:【交互设计七大定律】关于交互设计法则“除非有更好的选择,否则就遵从…

    交互设计 2015-08-27
  • 微信热点

    Axure产品原型在手机上运行的完整教程

    图1 模拟丁香园的高保真原型在一般的开发工作之前,我们通常会设计产品原型,大部分为axure绘制的线框图作为产品的PRD文档,供UI和开发进行前期工作,但是有的时候客户、领导想在开发之前,看到产品的概貌,就必须做产品的高保真原型进行模拟,这时如果做出来的原型能运行在手机端,那再好不过,如图1(注:上图是仿照丁香园的家庭用药,做的一个高保真原型,算是免费给丁香园打广告,是不是考虑给我点广告费?哈哈)。原型制作软件有挺多,不过个人使用之后,...

    2018-03-06
  • 90后消费者对广告无感!90后心理研究PPT分享 交互设计

    90后消费者对广告无感!90后心理研究PPT分享

      大部分企业的中高管人员都是90前出生的一代,很多CEO和传统大企业的高管,很可能还是80前。他们出生和成长的年代,根本没有手机或者互联网,接受的教育以及文化熏陶,和当下最有潜力的消费主力,也就是90后…

    2015-02-02
  • 微信热点

    房屋建造实例映射出的用户体验原则

    来源:摩客专访(公众号)翻译:Tangerine设计构架如何在创造吸引人的应用程序时产生更好的情感影响?设计理念并不是某一领域—专门为某个具有一定需求的人群提供解决方案的专业人士独有的。我们在任何地方都能看到设计,但我们总是把注意力集中在某些我们觉得有需求的领域。在过去的几年里,我一直担任一名用户体验设计师。而我从来没想过类似这样的话题,直到最近我住进一家旅店。房子是如何建造的房屋是我们的基本需求之一。我们根据我们的需求以及预算来建造房...

    2018-03-12
  • 交互设计

    成为设计师不是不可能!

      前言:本文译自国外高质量问答社区Quora,原文作者Karen X. Cheng,原是微软Excel的项目经理,后通过自学转型成为设计师。她讲述的自学过程详实细致且条理有序,读完会发现与想象中的大不一样,对于想自学设…

    2015-04-01
  • 商业模式驱动视频互动设计:手淘的视频就该这么玩儿 交互设计

    商业模式驱动视频互动设计:手淘的视频就该这么玩儿

    当商业目标和设计碰撞在一起之后,商业模式使设计的目标更明确,而设计能为商业模式带来更好的体验。

    2017-05-16
  • 微信热点

    交互设计中的视觉基础-格式塔理论

    爱UI小课堂今天从交互设计开始Interaction design交互设计师是一个理性与感性相结合的职业,既要有严谨的逻辑思维能力还要有良好的审美能力,所要具备的知识涉及方方面面,格式塔理论作为视觉设计的基础知识也是交互设计师必备知识之一。20世纪初奥地利及德国心理学家创立了一套视觉感知的格式塔理论,格式塔理论是我们在心不在焉与没有引入反思的现象学状态时的知觉的最终结果,强调经验和行为的整体性。这个理论为用户界面设计准则提供了相关的基础...

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

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