csdn 用户 蚂蚁翘大象_用户界面设计师房间里的大象

csdn 用户 蚂蚁翘大象

Once upon a time, an educated eye detected a new trend in UI designs, particularly, in Dribbble. It was a conceptual proposition, not an actual design for a customer or an app. Trying to explain the characteristics of this new trend, a new word emerged: neumorphism.

从前,有教养的人发现了UI设计的新趋势,尤其是在Dribbble中 。 这是一个概念性主张,而不是针对客户或应用程序的实际设计。 为了解释这种新趋势的特征,出现了一个新词:同态 。

Several articles, stories, and posts have been published around the first educated eye that point to it — Michal Malewicz. The texts are about how-tos or tutorials to reproduce the style in design, to criticize or correct the lack of accessibility, or to debate the scope of the trend or style.

围绕着第一个受过良好教育的眼睛Michal Malewicz发表了几篇文章,故事和帖子。 这些文字是关于如何重现设计中的样式,批评或纠正缺乏可访问性的方法或讨论趋势或样式范围的方法指南或教程。

Everybody in UI/UX design has seen neumorphism—and even used it—but nobody has formally defined it. This article is about the elephant in the room.

UI / UX设计中的每个人都看到过变态,甚至使用过,但是没有人正式定义它。 本文是关于房间里的大象的。

缺乏对亚态的定义 (The lack of a definition for neumorphism)

No precise definition was offered, only a demonstrative one: this is neumorphism, look at the influence of skeuomorphism with a fresh and modern approach.

没有提供精确的定义,只是一个说明性的定义:这是同种同态,用一种新颖而现代的方法观察拟态的影响。

Image for post
Alexander PlyutoAlexander Plyuto设计的一切开始

But there was no intentional definition — what makes a design neumorphic?

但是,没有故意的定义 -是什么使设计变态?

For that kind of definition we usually specify the genus or family which the word defined belongs, and the differentia to the other objects within the genus.

对于这种定义,我们通常指定所定义单词所属的或科,以及与该内其他对象的区别

The classic example is this: A triangle is a plane figure that has 3 straight bounding sides. The genus or the set which the triangle belongs is “plane figures”. What makes it different to other plane figures is that “has 3 straight bounding sides”.

经典示例如下:三角形是具有3个笔直边界的平面图形。 三角形所属的或集合是“平面图形”。 与其他平面图不同的是“具有3个笔直的边界边”。

So, what is the genus of neumorphism? A style? A look? A framework? A library? A design? I think it is clear that we are talking about a style. Or to be more specific, a UI design style.

那么,什么是态呢? 风格? 看看? 一个框架? 图书馆? 设计? 我认为很明显,我们正在谈论一种风格。 更具体地说,是一种UI设计风格。

Ergo, in a definition of neumorphism, the genus is a UI design style. We have the first part.

因此,在定义同态时, 是UI设计风格。 我们有第一部分。

The next question is “what is different in this UI design style?”. That’s where the emergence of a new concept in any knowledge field becomes interesting and relevant.

下一个问题是“这种UI设计风格有何不同?”。 这就是在任何知识领域出现新概念都变得有趣和相关的地方。

And this is also why it’s important a written definition. In design, as in any visual art, it is too easy to define something just pointing to it. Examples — and their descriptions — are not definitions. I love design and visual arts, but this is one of their limits.

这也是为什么它是一个书面定义很重要的原因。 在设计中,就像在任何视觉艺术中一样,定义指向它的东西太容易了。 示例(及其描述)不是定义。 我喜欢设计和视觉艺术,但这是他们的局限之一。

(The lack of an intensional definition is the reason why this article doesn’t use illustrative examples or pictures — except for the one you already saw above and the elephant. I’m trying to avoid the temptation to look at an example of the concept instead of understanding the concept. If you are late to the topic of neumorphism, follow the links.)

(缺乏内涵的定义是本文不使用示例性示例或图片的原因-除了您在上面已经看到的示例和图片之外。我试图避免尝试着迷于概念的示例)而不是理解这个概念。如果您对神经变态的话题迟到了,请点击以下 链接 。)

类比超现实主义 (The analogy to surrealism)

As I said before, new concepts are as important as necessary, even if they are not well defined at the beginning, or they fail to encompass reality at the end. Concepts construct knowledge and develop understanding and learning.

正如我之前说过的,即使新概念在开始时定义不清,或者在最后没有包含现实,新概念也是如此。 概念建构知识, 发展理解和学习 。

The concept of neumorphism ignited a discussion about issues related to UI design and new trends that were resting in our minds and needed some trigger to be expressed.

变形的概念引发了关于UI设计和新趋势的讨论,这些问题一直存在于我们的脑海中,需要表达一些触发条件。

The specific UI design designed as neumorphism can have variations and different points of view. It doesn’t have to be well defined or with a determined technique.

设计为神经变态的特定UI设计可能会有变化和不同的观点。 它不一定要很好地定义或采用确定的技术。

The same happens in fine arts. Surrealism is a good example. Even when it was defined through a “manifesto” by André Breton, we can find surrealist art before it was defined as such. And sometimes it is difficult to establish if a piece of art is surrealist, dadaist, or if it just has an influence.

美术领域也是如此。 超现实主义就是一个很好的例子。 即使通过安德烈·布雷顿(AndréBreton)的“宣言”对它进行定义,我们也可以在它被定义之前找到超现实主义艺术。 有时很难确定一件艺术品是超现实主义,达达主义还是仅具有影响力。

For André Breton could be easy to point to written examples or describe paintings. But it's not. He wrote definitions:

对于安德烈·布雷顿(AndréBreton)而言,可以轻松地指出书面实例或描述绘画。 但事实并非如此。 他写了定义:

“Surrealism, n. Pure psychic automatism, by which one proposes to express, either verbally, in writing, or by any other manner, the real functioning of thought. Dictation of thought in the absence of all control exercised by reason, outside of all aesthetic and moral preoccupation.” *

“超现实主义,n。 纯粹的心理自动主义,人们提议用这种语言自动地以口头,书面或其他任何方式表达思想的真实功能。 在没有所有审美和道德关注的情况下,在没有理性控制的情况下进行思想听写。” *

This is important because surrealism is not about writing or painting dreams but writing or painting as if you were dreaming, without control, for no reason, automatically. In other words, you can’t define a surrealist painting by watching it, you have to know how it was painted. You need context and intention.

这很重要,因为超现实主义不是在写作或绘画梦,而是在写作或绘画,就像您在做梦一样,没有理由,没有理由,自动地。 换句话说,您无法通过观看来定义超现实主义绘画,必须知道它是如何绘画的。 您需要背景和意图。

我们为什么需要一个概念? (Why do we need a concept?)

The most important approach to neumorphism is as a concept.

变态最重要的方法是作为一个概念。

  • Concepts are maps of reality.

    概念是现实的地图。
  • Concepts are very important in the development of knowledge.

    概念在知识的发展中非常重要。
  • Concepts help to have a common language among professionals.

    概念有助于在专业人员之间使用通用语言。
  • Concepts try to clarify the past and point to the future.

    概念试图澄清过去并指向未来。
  • Concepts can be organized hierarchically, allowing categories and classification.

    可以按层次结构组织概念,从而可以进行分类和分类。
  • Concepts allow comparison and reflection.

    概念允许比较和反思。
  • Concepts generate discussion.

    概念引发讨论。

New concepts emerge when there is something new in reality and we don’t have a word to define it. Like any map, a concept is not the reality either pretends to be it. In the era of satellite photography we perhaps forget that a map is constantly updating, not just because reality changes but because we always find differences.

当现实中有新事物出现时,就会出现新概念,而我们无话可说。 像任何地图一样,概念也不是真实的。 在卫星摄影时代,我们也许会忘记地图在不断更新,这不仅是因为现实在变化,而且因为我们总是会发现差异。

A hypothesis is a concept to be proof. A system is a concept expressed in its intrinsic networks and relations. A framework is a concept in the aim to help us go through the unknown — as a tourist map.

假设是要证明的概念。 系统是用其固有的网络和关系表达的概念。 框架是一个概念,旨在帮助我们穿越未知的世界-作为旅游地图。

In Aristotelian logic, a concept has a definitional structure and a list of features. But in Wittgenstein a concept is a prototype with specific properties that members of a class tend to possess — a family resemblance. A concept doesn’t have to be deterministic but prototypical.

在亚里士多德逻辑中,一个概念具有定义结构和一系列特征。 但是在维特根斯坦,概念是原型,具有类成员倾向于拥有的特殊属性- 家庭相似 。 概念不一定是确定性的,而是原型的。

The “user experience” is now a concept. It has a special meaning in a special field. It has several definitions depending on who is defining, but the general idea is the same for everyone. The concept of UX helps us to map humans, emotions, attitudes, affections, products, systems, services, and their interactions.

现在,“用户体验”是一个概念。 它在特定领域中具有特殊含义。 它有几个定义,具体取决于谁在定义,但总体思路对每个人都是相同的。 UX的概念有助于我们绘制人类,情感,态度,情感,产品,系统,服务及其交互的地图。

There are big and complex concepts like “surrealism” or “user experience”. Not all concepts are the same in magnitude or entanglement.

有一些大而复杂的概念,例如“超现实主义”或“用户体验”。 并非所有概念的大小或纠缠都相同。

“Skeuomorphism” is a simpler and smaller concept. Even so, we can see the recent UI made by a designer, for example, and tell her or tell him “it looks s little skeuomorphic”, and s/he is going to understand what we mean. We can even argue if that is bad or good for the user.

“拟态”是一个更简单,更小的概念。 即使这样,我们仍然可以看到例如设计师最近制作的UI,并告诉她或告诉他“它看起来有点像拟人”,他/他将理解我们的意思。 我们甚至可以争论这对用户是好还是坏。

那么,什么是同态? (So, what is neumorphism?)

Let’s try to define neumorphism. Like any definition of a new concept, it’s a working hypothesis.

让我们尝试定义同态。 像任何新概念的定义一样,这是一个可行的假设。

1.As we have established, neumorphism is a UI design style.

1.正如我们已经建立的,神经变态是一种UI设计风格。

2. In UI design we have a genealogy of styles. Design has fluctuated between skeuomorphism, abstraction, minimalism, and functionalism.

2.在UI设计中,我们有样式的家谱。 设计已在拟态,抽象,简约和功能主义之间波动。

3. Even in the last three, there is a tendency to use a previous reference — for practical, functional, and convenient reasons.

3.即使在后三个中,出于实用,功能和方便的原因,也倾向于使用以前的参考。

4. There is no “pure design” or design from “zero” because design needs to be understood since we start using it. Design needs previous reference. Art is different: it can propose something new to the grade and risk being unintelligible.

4.没有“纯设计”或“零设计”,因为自从我们开始使用它以来,就需要理解设计。 设计需要先前的参考。 艺术是不同的:它可以为年级提出一些新的建议,并且存在难以理解的风险。

5. Newness in design is aesthetic but it’s also a way to call for attention. Getting attention is important for a new product but it’s also important to trigger consciousness and learning for users.

5.设计的新颖性是美学的,但这也是引起注意的一种方式。 获得关注对于新产品很重要,但对于用户来说,激发意识和学习也很重要。

6. Designers and people involved in UX design are always looking for new forms of presentation, but as soon as we see a new kind of UI we immediately find the previous reference or references. When we are too involved in something, we tend to see new things and think “it looks like X”, or “it looks like a mix of X and Y”.

6.从事UX设计的设计人员和人员一直在寻找新的表示形式,但是一旦我们看到一种新的UI,我们便会立即找到以前的一个或多个参考。 当我们过多地参与某些事物时,我们倾向于看到新事物并认为“它看起来像X”或“它看起来像X和Y的混合体”。

7. If some person involved in UX and UI design calls something “new”, it is because s/he didn’t find an obvious previous reference. If in addition to calling it new, s/he requires a new word, it’s because s/he is dealing with something new in reality — in some grade, at least.

7.如果涉及UX和UI设计的人员称某事为“新”,那是因为他/她没有找到明显的先前参考。 如果他/她除了要称其为新词之外,还需要一个新词,这是因为他/他正在处理现实中的新事物,至少在某种程度上。

8. According to Michal Malewicz, neumorphism is a style that uses or resembles part of skeuomorphism but with a more fresh and modern look. Alexander Plyuto, the designer in Dribbble, called his proposition “skeuomorph”, perhaps because of the texture reference. But the resemblance to skeuomorphism is not clear in all the examples by Plyuto or Malewicz. What is visible in all is the soft texture.

8.根据米哈尔·马列维奇(Michal Malewicz)的说法,神经变态是一种使用或类似于拟态的一部分的样式,但外观更为新鲜和现代。 Dribbble的设计师Alexander Plyuto称他的命题为“ skeuomorph ”,这可能是因为其纹理参考。 但是,在Plyuto或Malewicz的所有示例中,都不清楚与拟态相似。 可见的是柔软的质地。

“The main benefit of this style is the “freshness” (at least for as long as it lasts). It brings that “new feel” to the interface and make it stand out. It can also be mixed with other styles, so it’s not overwhelmingly “soft extruded plastic” everywhere.”*

“这种风格的主要好处是“新鲜”(至少持续了很长时间)。 它为界面带来了“新感觉”,并使其脱颖而出。 它也可以与其他样式混合使用,因此并没有到处都压倒性地“软挤出塑料”。 *

The fact that it looks “soft extruded plastic” doesn’t make it skeuomorphic. A card in Material Design looks like paper or cardboard but that doesn’t make Material Design skeuomorphic.

它看起来像“软质挤出塑料”,但这并不使它成为类同。 “材料设计”中的卡片看起来像纸或纸板,但不会使“材料设计”成为拟态。

9. Ergo, the resemblance to skeuomorphism is functional, not aesthetical, or technical. Skeuomorphism is not relevant in neumorphism.

9.因此,与拟态相似是功能性的,而不是美学或技术上的。 类同态与中同性无关。

10. If the main and only characteristic of neumorphism was the “soft extruded plastic” look, we were in front of a minor style. But no. There is more.

10.如果说同质性的主要和唯一特征是“软挤压塑料”外观,那么我们处于次要风格的前面。 但不是。 还有更多。

11. Don’t forget the “new feel” part of the description. And, more important, let’s rescue the description of the technique and intention in neumorphism that Michal Malewicz establishes in one of his recent articles about it.

11.不要忘记描述中的“新感觉”部分。 而且,更重要的是,让我们对米歇尔·马列维奇(Michal Malewicz)在其最近的一篇文章中建立的有关同态的技术和意图进行描述。

“It’s like building a UI from play-doh. It forms itself nicely, is soft to the touch (figuratively) and is supposedly non-toxic, but you shouldn’t eat it.[…] We should smile a bit more, play with our play-doh and sometimes — just sometimes — twist the concept of the interface towards something new.”*

“这就像从play-doh构建UI一样。 它形成的很好,触感柔软(似),无毒,但您不应食用它。[…]我们应该多微笑一点,与我们的玩偶一起玩,有时-有时-将界面的概念转向新事物。” *

12. The essence of neumorphism is more in the newness than in the morph. Its essence is more in the intention and the technique. And by technique I mean the process, the how, the context and intension, not the step-by-step tutorial.

12.同质性的本质在于新颖性,而不是形态。 它的本质更多地在于意图和技术。 我所说的技术是指过程,方法,上下文和内涵,而不是分步教程。

13. André Breton defined surrealism as an intention and a way to create. Neumorphism can be defined in the same terms — for logical reasons, not because it can be compared to surrealism as an art.

13.安德烈·布雷顿(AndréBreton)将超现实主义定义为意图和创造方式。 出于逻辑上的原因,可以用相同的术语来定义神经网络,并不是因为可以将它与超现实主义作为一种艺术进行比较。

14. New, playful, and fresh are subjective. But so “psychic automatism” or “dictation of thought”. To recognize new styles in design or art you usually need an educated eye that knows the context and intention.

14.新的,好玩的和新鲜的是主观的。 但是“心理自动主义”或“思想命令”如此。 要识别设计或艺术中的新样式,您通常需要受过良好教育的,了解上下文和意图的眼睛。

15. Putting it all together:

15.放在一起:

Neumorphism is any UI design style that playfully proposes and brings freshness and new feel to the interface twisting the concept of the interface itself towards something new or different to previous references.

Neumorphism是任何一种UI设计风格,它都会巧妙地提出建议并为界面带来新鲜感和新感觉,从而将界面本身的概念转向与以前的参考文献不同的事物。

一个简单但重要的概念 (A simple but important concept)

Like any other field, first is a new object and its application, then, the experts point to it, define it, and build a concept or a theory.

像其他任何领域一样,首先是一个新的对象及其应用,然后,专家指出,定义它并建立概念或理论。

The relationship between humans and electronic interfaces was born in the pragmatics of engineering and software design. In the process, some experts were defining and building the new concepts that became human-computer interaction, usability, user-centered design, user experience, affordances, stages of action, etc.

人机界面和电子界面之间的关系源于工程和软件设计的实用性。 在此过程中,一些专家正在定义和构建新概念,这些新概念已成为人机交互,可用性,以用户为中心的设计,用户体验,能力,行动阶段等。

Neumorphism might be a small or simple concept and not a big or a complex one — at the moment is just about UI design styles. But it deserves the denomination as a concept and to have an intensional definition and not just a demonstrative or descriptive one.

神经态可能是一个很小或简单的概念,而不是一个大或复杂的概念-目前仅涉及UI设计风格。 但是,它应该将其命名为一个概念,并具有内涵的定义,而不仅仅是说明性或描述性的定义。

UI design — and perhaps UX design — needs playfully propositions, freshness, new feels, twisting the concept of the interface, and looking towards something new or different from previous references.

UI设计(可能还有UX设计)需要有趣的主张,新鲜感,新的感觉,扭曲的界面概念以及与以前的参考文献有所不同的新事物。

UI design needs neumorphism.

UI设计需要同态。

翻译自: https://uxdesign.cc/neumorphism-is-the-elephant-in-the-ui-designers-room-ae2c2cafe0e9

csdn 用户 蚂蚁翘大象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/275241.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试官问发布订阅模式是在问什么?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步。本文来自 simonezhou 小姐姐投稿的第八期笔记。面试官常问发布订阅、观察者模式&#…

figma下载_不用担心Figma中的间距

figma下载重点 (Top highlight)I spend way too much time caring about spacing when designing interfaces and building design systems. You are probably no stranger to the constant 1 px and 8 px nudging, continuous checking of the bottom or in-between space for…

【建议收藏】面试官贼喜欢问的 32+ vue 修饰符,你掌握几种啦?

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步。前言vue简洁好用体现在很多个地方,比如其内置了32修饰符,可以很…

知识管理系统Data Solution研发日记之一 场景设计与需求列出

在平时开发的过程中,经常会查找一些资料,从网上下载一些网页,压缩格式文件到自己的电脑中,然后阅读。程序有别于其他行业的一个特征是,所有的资料,数据,压缩文件,只用于产生可以工作…

shields 徽标_我们如何准确地记住著名徽标的特征和颜色?

shields 徽标The logos of global corporations like Apple, Starbucks, Adidas, and IKEA are designed to create instant brand associations in the minds of billions who see them every day. But how accurately can we remember the features and colors of these famo…

面了三次字节,他的一些感悟

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行了三个多月,大家一起交流学习,共同进步。今天分享一篇小K投稿的字节面试记录,这是他第三次面字节了,之前…

解决Wireshark安装Npcap组件失败

2019独角兽企业重金招聘Python工程师标准>>> 解决Wireshark安装Npcap组件失败 从Wireshark 3.0开始,Npcap取代Winpcap组件,成为Wireshark默认的网卡核心驱动。由于该组件属于驱动程序,所以安装时候容易被杀毒/防火墙软件拦截&…

adobe清理工具_Adobe终于通过其新的渐变工具实现了这一点-UX评论

adobe清理工具的Photoshop (Photoshop) UX:用户体验: At first glance, the UX looks okay; it’s pretty clear. The user gets to know how to use this tool right away. The color palette is located above, and the gradient down below. The diamond betwee…

新手向:前端程序员必学基本技能——调试JS代码

1前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,已进行三个月了,大家一起交流学习,共同进步。想学源码,极力推荐之前我写的《学习源码整体架构系列》 包含jQuery、un…

iOS开发ApplePay的介绍与实现

1、Apple Pay的介绍 Apple Pay官方1.1 Apple Pay概念 Apple Pay,简单来说, 就是一种移动支付方式。通过Touch ID/ Passcode,用户可使用存储在iPhone 6, 6p等之后的新设备上的信用卡和借记卡支付证书来授权支付; 它是苹果公司在2014苹果秋季新…

mes建设指南_给予和接受建设性批评的设计师指南

mes建设指南Constructive criticism, or more plainly, feedback, plays a crucial role in a designer’s job. Design is an iterative process, so we are often either asking for feedback on our own work or dishing it out to a fellow designer.建设性的批评&#xff…

面试官:请实现一个通用函数把 callback 转成 promise

1. 前言大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与,或者在公众号:若川视野,回复"源码"参与,每周大家一起学习200行左右的源码,共同进步。已进行…

java中filter的用法

filter过滤器主要使用于前台向后台传递数据是的过滤操作。程度很简单就不说明了,直接给几个已经写好的代码: 一、使浏览器不缓存页面的过滤器 Java代码 import javax.servlet.*;import javax.servlet.http.HttpServletResponse;import java.io.IOExcept…

open-falcon_NASA在Falcon 9上带回了蠕虫-其背后的故事是什么?

open-falconYes, that’s right. The classic NASA “worm” logo is back! An image of the revived NASA worm logo was released on Twitter by NASA Administrator Jim Bridenstine as well as press release on the NASA.gov website. NASA explained that original NASA …

听说你对 ES6 class 类还不是很了解

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与。前言在ES5中是原型函数,到了ES6中出现了"类"的概念。等同于是ES5的语法糖,大大提升了编写代码的速度,本文只讲一些常用的&…

一篇文章带你搞懂前端面试技巧及进阶路线

大家好,我是若川。最近有很多朋友给我后台留言:自己投了不少简历,但是收到的面试邀请却特别少;好不容易收到了大厂的面试邀请,但由于对面试流程不清楚,准备的特别不充分,结果也挂了;…

小屏幕 ui设计_UI设计基础:屏幕

小屏幕 ui设计重点 (Top highlight)第4部分 (Part 4) Welcome to the fourth part of the UI Design basics. This time we’ll cover the screens you’ll likely design for. This is also a part of the free chapters from Designing User Interfaces.欢迎使用UI设计基础知…

RabbitMQ指南之四:路由(Routing)和直连交换机(Direct Exchange)

在上一章中,我们构建了一个简单的日志系统,我们可以把消息广播给很多的消费者。在本章中我们将增加一个特性:我们可以订阅这些信息中的一些信息。例如,我们希望只将error级别的错误存储到硬盘中,同时可以将所有级别&am…

不用任何插件实现 WordPress 的彩色标签云

侧边栏的标签云(Tag Cloud)一直是 WordPress 2.3 以后的内置功能,一般直接调用函数wp_tag_cloud 或者在 Widgets 里开启即可,但是默认的全部是一个颜色,只是大小不一样,很是不顺眼,虽然可以用 S…

随时随地能写代码, vscode.dev 出手了

大家好,我是若川。最近组织了源码共读活动,感兴趣的可以加我微信 ruochuan12 参与。今天偶然看到了 VSCode 官方发布了一条激动人心的 Twitter,vscode.dev[1] 域名上线了!image-20211021211915942新的域名 vscode.dev[2] 它是一个…