2020年のUIトレンド Neumorphism(ニューモルフィック) = New + Skeuomorphism

Medium

How UI trends reach for inspiration into the real world and …

DribbbleやInstagramで最近話題となっている2020年、令和の新UI「Neumorphism」

New+Skeuomorphism = Neumorphism とのこと。

Neumorphism Designはどんなデザイン?

マテリアルデザインは、影を使って立体的に表しているのに対して

ニューモルフィックデザインは、押し出されるデザイン。

マテリアルデザインのように浮いているわけではない。個人的にはエンボス加工に近い気がする。

この投稿をInstagramで見る

UX Choice(@uxchoice)がシェアした投稿

 

Neumorphismのメリット・デメリットは?

この投稿をInstagramで見る

rudityas(@rudityas)がシェアした投稿

メリット

新しいこと

web2.0のリアル感のあるデザインから、フラットデザイン、Androidはマテリアルデザインと変化していきました。

去年から新しくNeumorphismがでてきたことで、2020年のデザインのトレンドになる可能性は高いです。

フラットやマテリアルのような標準になるかはどうでしょう。

デメリット

アクセシビリティ

実際にNeumorphism UIにすることで、アクセシビリティがどうなるかがわかっていない。

例えば当初のフラットデザインは曖昧なフラットでBad UIの代表例にもなっていた。

Neumorphism UI も正しく理解して使わないと、アクセシビリティが悪くなる可能性が高い。

ただ単に、かっこいいからNeumorphismにすると、マテリアルデザインにもありますが、ありえない現実離れしたデザインになったりします。

でも、うまく使えば、押したくなるUIでもある。

 

実装の仕方・コーディング

image.png

一応、例として↑がありますが、個人的には再現し切れていない気がします。

今年はNeumorphism のReactやVueのCSSフレームワークあたりがでてきそう。

今後のNeumorphismが楽しみ☺️

Instagram

インスタやDribbbleをみるといろんなデザインをシェアしている人がいるので、参考にしてみましょう

この投稿をInstagramで見る

to Inspire(@ui.designed)がシェアした投稿

この投稿をInstagramで見る

Dev Geeks(@devgeeksco)がシェアした投稿

この投稿をInstagramで見る

Ranjani Ramanathan(@rr_designerspace)がシェアした投稿

 


Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658