新拟态设计

您所在的位置:网站首页 新拟态kwgt 新拟态设计

新拟态设计

2024-06-25 15:14:24| 来源: 网络整理| 查看: 265

该篇转自我的公众号【产品秘阁】:新拟态设计

一、起源 

在2019年11月5日,Dribbble一位设计师Alexander Plyuto发布的作品。 

 

在该风格之前,产品普遍是扁平化风格,扁平化设计意味着将界面中所有元素做扁平处理,其特征是:去高光、去渐变、去阴影。

二、什么是新拟态

首先了解“拟态化”,它用于描述界面对象,反映了现实世界中的对象 对应到数字界面中的显示方式。此设计概念利用了用户对实际对象现有认知和思维,该设计风格让用户无需花费额外时间学习新的界面,当UI元素与显示世界类似物结合时,可以减轻用户的认知负担。

新拟态风格与扁平化风格完全相反,可以理解成“加高光、加渐变、加阴影”,其原理是为界面的UI元素赋予真实感。原生名词有几种叫法:Neumorphism/soft UI,翻译过来就是“新拟态”/软UI,是一种具有流线感的设计风格,介于扁平与投影之间。

三、新拟态特点

| 图片源自Dribble @Alexander Plyuto

新拟态风格特征:

①投影和高光的明暗形成了立体的“浮雕”效果,元素呈现有厚度感但又柔和的边缘,无纹理的拟物风。

②克制的色彩使用;

③整个界面中的元素只有一个光源照射。作者预设了一个光源,靠近光源的部分更亮,反之更暗。图片中作品的光源固定位置是从左上角向右下照射,即受光面在左上,故元素的左上 和 右下投影呈对比;

④元件与背景采用相近色。无论界面是浅色模式还是暗色模式,各个模式下的颜色对比度很低,整体视觉上非常柔和、甚至是模糊,易引起视觉疲劳;

⑤视觉上按钮状态采用“选中状态下按钮是凹进去的,未选中时是凸出来的”方式。对于选中状态,图片中作品的元素做了内阴影的处理方式,同时,选中状态的元素统一采用与未选中状态相反的光源。

常见样式较简单,有时也会采用渐变手法表现元件质感。此处笔者通过PPT制作了简单的效果图。常见样式:

添加渐变的样式:

Photoshop也可以实现该效果,双击图层,对“投影”进行设置:

转自公众号【产品秘阁】:新拟态设计

四、新拟态的局限性

新拟态意味着界面与实际事物的类似,但需要谨慎运用。新拟态风格的柔和特征也有很明显的缺点,即弱清晰度。故在设计时为了让层级在视觉上更清晰,会增加一些渐变描边等处理方式。

以此我们延伸一下该风格的局限性:

①弱清晰度;新拟态对视力低下、失明、色盲的用户来说,可辨识性较差。而产品设计需要尊重无障碍设计1。

②尺度把握相比扁平风格更难。

例如 元件投影的轻重把控,太轻的投影不利于用户快速找到目标、太重的投影则容易让界面显得很脏;如果一定要用新拟态设计产品,则需要将元素通过增加渐变描边的方式提高识别度,便于信息传递;

③不够明了的视觉层级关系。新拟态风格的元素具有漂浮、脱颖而出的特点,元素会在一个界面空间竞争,对于用户而言很难理解界面中的视觉层次以及信息层级关系,造成页面混乱。

当页面缺少信息层级关系时,会影响到用户的决策过程,如果同一个页面出现多个可操作性内容,但信息层级关系模糊,容易使用户在当前页面/流程中的某一步产生困惑,最终可能导致错误操作;

④新拟态具有一定的隐喻性。即 它会引导用户点击或者会让人认为这是一个功能按钮。例如 一款产品在界面中仅有一个新拟态卡片展现,那么用户容易被引导对卡片进行点击这一交互行为。但也许该卡片仅仅用于展示卡片内容,此时新拟态卡片的设计问题就显露出来了。

工具推荐:https://neumorphism.io/#55b9f3

五、新拟态的适用性

前面讲述了新拟态风格的局限性,接下来了解下该风格的适用性。没错,虽然它的缺陷多且明显,但也有适用的产品。例如 目前市面上该风格多用于工具类产品(工具型产品具有“场景固定、需求明确、产品黏性相对较低”的特点,例如 笔记类、天气类、时钟类、遥控类),工具类产品相对固定,也无需过多的运营内容,更容易把控,因此视觉风格上的发挥空间更大;

新拟态风格设计需要注意:复杂页面或者复杂控件中,要谨慎使用新拟态风格;混合使用,考虑风格兼容问题;新拟态的隐喻性需要考量,避免用户误解;考虑该风格对残障人士的影响以及在特殊场景下的实用性。

转自公众号【产品秘阁】:新拟态设计



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭