왜 여러 색상으로 인터페이스를 정의합니까? 하나의 주색만 있는데, 인터페이스 계층과 중요한 정보를 잘 표현하여 좋은 시각 효과를 나타낼 수 있습니까? 사실 그렇습니다. IOS7 이 발표됨에 따라 정보 계층을 표현하기 위해 단순한 레벨과 일치하는 회색조를 사용하는 독특한 주요 색조 스타일의 디자인이 점점 더 많아지고 있습니다. 하지만 더 많은 색상을 사용하지는 않습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
카타르의 항공사
카타르 항공사는 이런 디자인 사례입니다. 전체 인터페이스는 제목 표시줄에서 탭 페이지, 작업 버튼에서 힌트 정보 (검은색, 흰색, 회색 제외) 에 이르기까지 분홍색의 주요 색조를 사용합니다. 이런 깔끔한 배색 스타일은 오히려 좋은 메시지 전달 역할을 하며 시각적 표현력이 뛰어나다. 디자이너의 콘텐츠 조판에 대한 기교는 정말 가산점이다.
가독성은 빨간색 주색으로 디자인되었으며, 프롬프트 메시지의 배경색, 선형 버튼 및 아이콘조차도 빨간색 주색을 사용하며 인터페이스와 LOGO 는 완전히 같은 색계에 있습니다. Vivino 는 진한 파란색과 연한 파란색으로 구분된 파란색 주요 색조 디자인을 사용합니다. Eidetic 는 키 조작 버튼이 주황색으로 강조 표시되고 정보 아이콘이 진한 주황색과 밝은 오렌지색으로 표시되는 오렌지색 주색 디자인을 사용합니다.
유일한 주요 색조 설계 방법은 휴대폰 앱의 미니멀리스트 디자인을 통해 중복 정보의 간섭을 줄이고 사용자가 주체 정보 획득에 집중할 수 있도록 하는 것입니다. (윌리엄 셰익스피어, Northern Exposure (미국 TV 드라마), Northern Exposure (미국 TV 드라마)
둘째, 다색 | 초색
유일한 주톤과 대비되는 것은 메드롱을 비롯한 다색 스타일이다. 왜 내가 내 제품에 주색을 정의한다면 다색은 주톤이 될 수 없을까? 따라서 페이지마다 서로 다른 정보 블록이 다색으로 설계되어 있으며, 동일한 인터페이스의 일부 부분도 다색 대비를 사용할 수 있으며, 이로 인해 훌륭한 디자인이 많이 생겨났습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 페이지명언)
유니클로 제작된 RECIPE 는 눈에 띄는 디자인 사례입니다. 응용 프로그램 전체에 다양한 색상의 디자인 스타일이 통합되어 있습니다. 탭 페이지를 전환하거나 내용 블록을 스크롤하는 경우 다른 주제 색상이 변경됩니다. 색상을 전환하면 페이드 인 효과가 있어 자연스럽게 전환할 수 있습니다. RECIPE 의 토마토 시계 타이머 모듈은 시간에 따라 아름다운 음식 배경 음악을 재생하는 동시에 다른 테마 색상을 전환합니다. 주체 색이 바뀌면서 모든 전경 문안과 그림이 이 색계로 바뀌고 고화질의 음식 사진까지 더해져 시각과 청각의 이중 즐거움이다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) RECIPE 는 정말 20 13 에서 얻을 수 없는 우수한 디자인입니다.
Peek Calendar, EveryWeather, Harmony 는 모두 다색 목록의 디자인 사례입니다. 지금 유행이 유행하고 있는지 모르겠는데 Clear 에서 다시 일어서세요. 밝은 다색으로 정보를 구분하면 확실히 두드러진 역할을 할 수 있어 시각적으로 매우 눈에 띈다.
하지만 구글 키프의 컬러 카드와 같은 일부 콘텐츠 기반 앱의 경우 적용되지 않을 수 있습니다. 이는 실제로 콘텐츠 읽기에 역효과를 줄 수 있습니다. (윌리엄 셰익스피어, Northern Exposure (미국 TV 드라마), 콘텐츠명언) 백도운메모장 제 1 판 디자인도 다색이지만 나중에 기억해야 할 단어가 많다는 점을 감안하면 좋은 문자 읽기 체험을 제공하기 위해 다색 디자인을 회백색의 마이크로텍스처 디자인으로 바꿨다.
셋째, 데이터 시각화 | 데이터 시각화
정보 렌더링과 관련하여 점점 더 많은 app 가 데이터 및 차트 정보의 시각화를 시도하고 있어 인터페이스뿐만 아니라 더욱 직관적인 원형 차트, 파이 차트, 선 차트, 막대 차트 등 다양한 표현을 할 수 있습니다. 겉으로는 그리 어렵지 않지만, 만약 정말로 실현된다면, 배후의 복잡성은 과소평가할 수 없다.
Nice Weather 는 온도 변화를 그래프로, Jawbone UP 은 히스토그램으로 매일의 완성을 나타내고, PICOOC 는 선 그래프로 매일의 체중과 체지방 변화를 나타낸다. 데이터 시각화를 통해 휴대폰 앱은 더 작은 화면 공간에서 콘텐츠를 보다 입체적으로 전시할 수 있다.
넷째, 카드 | 카드
카드도 널리 사용되는 디자인 언어이다. 이 카드의 디자인이 Metro 의 타일에서 유행했는지, 아니면 Pinterest 의 폭포에서 유행했는지 연구할 수 없다. 간단히 말해서, 구글의 모바일 제품 설계가 완전히 빗겨졌다는 것을 알 수 있습니다.
음, 웹측조차도 이런 통일된 디자인 언어를 답습하고 있습니다. 구글 검색 경험 책임자가 주도하는 디자인 언어의 통일된 업그레이드라고 합니다.
Luvocracy 의 카드 흐름은 정보 자체를 강조하고, 큰 그림과 제목으로 사용자를 끌어들이며, 끝없는 브라우징 경험을 강화하고, 사용자가 계속 스크롤하도록 유도한다. Google Now 의 카드는 더욱 맞춤화되고 개인화됩니다. 일부 카드는 사용자 교육에 사용되고, 일부 카드는 날씨를 알리는 데 사용되고, 일부 카드는 연락처 목록을 렌더링하는 데 사용되며, 일부 카드는 할 일을 표시하는 데 사용됩니다. 서로 다른 카드는 너비와 패턴이 통일된 카드를 따라 개발 설계를 진행한다. 카드 간의 독립성을 보장할 뿐만 아니라 서비스와 업무의 통일된 설계도 보장합니다. Shazam 은 재미있는 카드 스타일로 앨범과 노래를 선보였다.
동사 (verb 의 약자) 내용은 왕 | 내용 1 위다
Artsy 의 사진 폭포는 정보 블록을 구분하기 위해 선과 면을 전혀 사용하지 않고 내용 자체를 사용하여 조판하기 때문에 사용자는 그림 내용에 더 집중할 수 있습니다. 프리즘은 글꼴 조판을 사용하여 가능한 한 내용을 앞에 두고 아이콘과 작업을 약화시켜 사용자가 내용 읽기에 더 많은 관심을 기울일 수 있도록 합니다. 포터 씨는 제품의 사진, 이름, 가격을 직접 이용해 디자인해 사용자가 제품 자체에 집중할 수 있도록 했다.
여섯째, 원형 | 원형 디자인의 사용
프로토타입은 가장 편안한 모양이다. 특히 각종 상자로 가득 찬 휴대폰 화면에서 동글한 모양을 넣으면 활발한 분위기와 호감을 즉시 높일 수 있다. 한 가지 흥미로운 현상은 아이폰의 전화 접속 숫자 키보드가 처음에는 직사각형으로 설계되었고, iOS7 까지 반복하면 원형이 되어 전통 전화에 대한 경의를 표하거나 인터페이스의 부드러움을 높였다고 할 수 있다는 것이다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), Northern Exposure (미국 TV 드라마) 물론 그에 따라 원의 실제 터치 면적도 처리해야 한다. 클릭 영역이 원형으로 설계되었기 때문에 클릭 정확도를 낮추지 마십시오. 이는 미관과 사용 편의성 향상에 영향을 줄 수 있습니다.
Beats Music 은 좋아하는 라벨을 원형으로 디자인해 일반 목록과 직사각형 라벨보다 훨씬 좋고 재미와 탐구성이 있다. Movse 의 일일 단계 수와 칼로리는 원으로 운반되며 데이터 시각화와 핵심 정보 시각화를 위한 최상의 사례입니다. Tumblr 는 만들려는 콘텐트 유형을 선택하고 마스크+원형 옵션 버튼을 설계하여 선택 초점이 명확하고 딱딱하지 않도록 합니다.
일곱. 큰 시야 배경 | 더 큰 시야 이미지 배경
배너를 사용한 사진을 배경으로 하는 것도 올해의 트렌드가 되거나, 전체 APP 의 배경이나 콘텐츠 블록의 배경으로 시각적 표현과 APP 의 정서적 요소를 풍부하게 한다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 일부 정보나 조작이 화면에 떠 있다. 이 디자인 방식은 서체와 조판 디자인에 대한 요구가 더 높고, 난이도가 더 높지만, 분위기를 렌더링하기 매우 쉽다.
두 가지 스타일의 넓은 시야 배경 이미지도 있습니다. 비밀과 식기실 전체와 같습니다. 콘텐츠 블록에서 넓은 시야 배경 이미지를 사용하면 이미지를 통해 분할할 수 있다는 장점이 있지만, 어려운 점은 이미지 모자이크의 효과가 반드시 좋은 것은 아니며 획, 공백 등의 디자인 수단으로 모자이크를 최적화해야 할 수도 있다는 것입니다.
다른 하나는 Vsco, 플린크, 민디, 음파와 같습니다. 전체 화면 배경도는 상태 표시줄까지 열어 프론트 데스크에서 콘텐츠 조판, 탐색, 조작을 수행합니다. 장점은 디자인이 활발하다는 것이다. 모든 친구들은 이런 스타일을 기획설계라고 부르는데, 이는 자연으로 돌아가는 디자인 수법을 뜻한다. 하지만 위험은 분명합니다. 즉, 전경의 정보 레이아웃 디자인은 실제로 매우 도전적입니다. 색채가 밝은 배경은 주의를 너무 많이 방해하여 전경의 텍스트 내용을 가독성이 약하게 만들 수 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 도전명언) 따라서 명확한 버튼으로 중요한 작업을 구분하고, 문자를 읽는 것은 배경 이미지와 명확하게 반전해야 합니다. 그렇지 않으면 반투명한 마스크 위에 떠 가독성 문제를 해결할 수 있습니다.
마지막으로, 20 14 가 인상 깊었던 7 가지 디자인 언어는 독특한 주색, 다색, 데이터 시각화, 카드, 콘텐츠 지향, 재활용 애플리케이션, 와이드 필드 배경도입니다. 사실, 새로운 디자인 스타일을 갖는 것은 어렵고, 또한 끊임없이 윤회하는 과정이다. 내용을 강조하기 위해 APP 는 얇고 가벼운 방향으로 디자인했지만 언젠가는 원래의 무거운 질감 모방 디자인을 뒤엎을 것이라고 보장할 수는 없습니다.