출처 : https://medium.com/@barisertufan/2020s-new-ui-trend-neumorphism-is-here-5979190ad20
medium.com
그러나 또 다른 단기 추세입니까?
신경성이란 무엇입니까? 신경성 디자인이란 무엇입니까?
Neumorphism은 새로운 사용자 인터페이스 트렌드에 대한 새로운 단어입니다. 발음하기 어려운 단어이므로 일부 사람들은 Soft UI도 말합니다.
“Neumorphic”이라는 단어의 근원부터 시작합시다. 두 단어의 조합입니다. Neu 및 Morphic : Neu : New + Morphic : 특정 형태 또는 형태를 갖는 Morphous의 변형입니다. 이 단어는 Skeu morphic 이라는 오래된 인터페이스 디자인 트렌드에서도 사용되었습니다 .
이 트렌드의 첫 번째 느낌 : 평평하지만 현실적. 세부 사항 : UI 요소 (단추, 카드, 입력 필드, 그래프, 상자 등)와 배경 간 소프트 전환.
왜 뉴 모피 즘이 빛을 발하는가?
이를 이해하려면 UI 트렌드의 역사를 조금 살펴 봐야합니다. (걱정하지 말고 간략하게 설명하겠습니다)
역사 전반에 걸친 UI 트렌드 :
- 1995–2002 : 텍스트 기반 HTML (클릭 가능한 버튼으로 충분)
- 2003–2010 : 웹 2.0 (어두운 시간)
- 2010–2012 : Skeuomorphic 디자인 (현실주의에 충실 , iOS에 인기를 얻음 )
- 2012–2014 : 평면 디자인 (Windows 8 및 iOS7)
- 2014–2019 : 머티리얼 디자인 + 모션 (Google 디자인 시스템)
- 2017–2019 : 제로 UI
- 2019 년 말 ~ 현재 : 뉴 모픽 디자인
참고 : 나는 이것이 시각적 인 정체성이 발견 한 정확한 날짜는 아니지만 그들이 유행하는 기간이라는 것을 알고 있습니다. 메신저를 비난하지 마십시오.
이 새로운 트렌드는 실제로 대부분의 오래된 트렌드를 묶습니다.
- 거의 Skeuomorphic 디자인과 같은 소재 느낌과 사실감을 느낄 수 있습니다
- 평평한 디자인으로 편평함과 반복성이 있습니다
- 머티리얼 디자인과 비슷한 움직임과 그림자가 있습니다.
그러나 최종 제품은 모든 제품과 다릅니다.
개인 참고 사항 : 또한 점토 모형 도 신경성 디자인 프로세스를 시작 했다고 생각합니다 . 그들은 또한 매우 매끄럽고 거의 물질을 느낄 수 있습니다 :)
인터넷의 대다수 의견 : UI의 다음 큰 트렌드 인 Cool AF.
내 의견 : 쿨 AF이지만 더 이상의 의견은 끝났습니다. 계속 읽으십시오.
Sketch에서 Neumorphic 디자인을 만드는 방법은 무엇입니까? 또는 다른 디자인 소프트웨어.
간단한 4 단계로 알려드립니다 :
1- 배경색을 선택하십시오. 우리가 가정 해 봅시다 회색을 예를 들어.
2- 기본 디자인 요소 (사각형, 정사각형, 원, 별 등)를 색상으로 만듭니다 : 배경이있는 동일한 회색
3- 첫 번째 그림자 적용 x : -10 y : -10 흐림 효과 : 20 스프레드 : 0 색상 : 밝은 회색
4- 두 번째 그림자 적용 x : 10 y : 10 흐림 : 20 스프레드 : 0 색상 : 진한 회색
MazePixel 의 공짜에서 SS
그게 다야! 당신은 당신의 자신의 수제 신경성 버튼이 있습니다.
보다 시각적 인 설명을 위해이 트렌드를 사용하는 트릭을 보여주는 비디오가 있습니다!
드리블에서 뉴 모픽 디자인의 가장 좋은 예 :
간단한 음악 플레이어 에 의해 필립 Legierski
피트니스 장치 응용 프로그램 에 의해 세르지 미
화이트 스큐 모프 스타일 된 쇼핑 앱 에 의해 트리 부반 Suthar
Neumorphic 온도 조절기 에 의해 앤드류 Millen는
예약 구독 앱 📖 에 의해 아리엘 Jedrzejczak
우리는 또한 광고 나 로고 디자인과 같은 다른 디자인 매체에서 이러한 추세를보기 시작했습니다. 예, 삼성 갤럭시 새로운 로고 공개 캠페인에 대해 이야기하고 있습니다.
긴 비디오 링크 (매우 긴)
웹 사이트 또는 앱에 Neumorphic 디자인을 적용하는 방법은 무엇입니까?
가능한 두 가지 방법이 있습니다.
1- PNG로 작성하여 개발자에게 전달하십시오.
특정 UI 요소에서 시각적 품질을 망칠 확률 : 0.
다른 페이지 크기의 UI 버그를 처리해야 할 확률 : 9000 이상!
2- 개발자에게 문의하십시오. 그들은 항상 그것을 만드는 방법을 찾을 수 있습니다!
솔직히 말해서 개발자가 무엇을하는지 모르고 이 힘을 알고 있습니다. 개발자가 말한다면,이 작업을 수행 할 수 없습니다. 이는 현재 시간 제한에서 수행 할 수 없음을 의미합니다. 코드 조각을 찾아서 그들을 도와주세요. 많은 온라인 표본이 있습니다. 이 경우,이 멋진 웹 사이트를 찾았습니다 : https://neumorphism.io/
이 방법으로 UI가 잘못 보일 확률 : 0
그 웹 사이트
완전한 개인 의견 :
UI는 정보를 쉽게 얻을 수있는 도구입니다. 내용은 실제 정보이며 UI를 사용하면 순서, 계층 및 가독성을 만들 수 있습니다.
미묘한 UI는 사용자에게 숨겨져 있지만 콘텐츠 뒤에 수많은 시스템이 구축되어 있기 때문에 실제로 도달하기 어려운 대상입니다.
내 의견 : 시대를 초월한 디자인을 유지하려면 불필요한 모든 요소를 숨기고 사용자와 직접하십시오. 가능한 한 단순해야합니다 (수년 동안 효과가 있었고 앞으로 몇 년 동안 효과가있을 것입니다).
고유 한 UI 요소로 강화 된 사이트와 앱은 빠르게 증가하지만 결국 새로운 트렌드가이를 대체 할 것입니다.
나는 현재이 트렌드를 좋아하는데,이 스크린이 더 단단하고 무겁고 매끄럽게 느껴지지만 1 년 이상 지속될 것이라고 생각하지 않습니다.
TLDR, Neumorphic은 사실적이고 평평한 접근 방식을 결합합니다. 그것을 가지고 45도 각도로 그림자 1 빛 1 어둠과 함께 재생합니다. 아니요, 영원히 지속되지는 않습니다.
DesignQuokka :) : 당신의 디자인 게임의 상단에 따라
감사합니다!
'PRODUCTDESIGN_UXUI > 관련자료' 카테고리의 다른 글
| 최고의 디자인 핸드 오프 도구 중 8 가지 (0) | 2020.04.22 |
|---|---|
| 친숙하고 가볍고 일관된 UI 디자인을 달성하는 방법 (0) | 2020.04.21 |
| 대시 보드 디자인의 10 가지 규칙(10 Rules of Dashboard Design) (0) | 2019.12.10 |
| Why UX taught me to embrace conflict ( UX가 갈등을 받아들이도록 가르친 이유 / 출처 : medium) (0) | 2019.07.16 |
| 7 Worst UX Mistakes Limiting Your Growth(성장 제한하는 7가지 최악의 UX 실수/ 출처 : sitepoint) (0) | 2019.07.15 |