인터페이스 디자인이 어디가 좋을까요? 앱의 인터페이스 디자인 프로세스는 어떻게 만들어졌나요?
사진의 합리적인 사용, 명확한 정보 수준, 편안한 색상 조화는 전체 APP 의 아름다움을 높여 전체 제품 경험에 가산점을 줄 수 있다.
성공적인 제품, 시각 수준은 일부분에 불과하지만, 자격을 갖춘 UI 디자이너로서 우리가 해야 할 일은 이 부분을 최대한으로 만드는 것이다. (존 F. 케네디, 성공명언)
그림, 텍스트, 색상, 아이콘, 공백 등의 차원을 통해 APP 디자인을 해부하여 미세한 세부 사항을 찾아봅시다. 다른 사람보다 1px 의 세부 사항을 많이 개선하면 APP 디자인이 더욱 정교해질 것입니다.
카탈로그
1, 사진, 한 사람의 옷차림 취향을 좋아해요.
2, 텍스트, 나는 단지 요점이 어디에 있는지 알고 싶다.
3, 색상, "색상" 플래너가되는 법;
아이콘, 그림에서 그림까지 얼마나 멀리;
5. 공백으로 남겨두고, 나는 충분한 공간만 있으면 된다.
주체
1, 사진, 한 사람의 옷차림 취향을 좋아해요.
사진은 APP 에서 흔히 볼 수 있으며, 그림의 표현과 품질은 제품에 대한 사용자의 감각 경험에 영향을 미칩니다.
그림의 위치는 한 사람의 복장 취향과 같다. 옷차림 스타일에 따라 다른 사람들이 당신에 대해 다른 판단을 내리고 다른 사회적 속성 라벨을 붙일 수 있다.
이제 앱 디자인에서 주목해야 할 요점들을 살펴보고, 그림 비율, 일관성, 화질, 진실성 등을 분석해 보겠습니다.
1. 1, 화면 비율의 초점은 무엇입니까?
비율이 다른 그림은 서로 다른 정보 주제를 전달한다. 제품 속성에 따라 그에 맞는 그림 비율을 선택하여 전체 프레임 레이아웃을 수행합니다.
메인스트림 앱을 체험해 보면 1: 1, 4:3, 16:9,/kloc-0 과 같은 일반적인 사진 비율을 발견할 수 있다
우리는 또한 재래식 비율을 깨는 디자인을 발견할 것이다. 우리는 그들의 성격을 분석하고 자신의 제품의 특징을 결합해야 자신의 앱 디자인에 합리적으로 사용할 수 있다.
1: 1 바디의 존재 강조.
1: 1 의 화면 비율은 일반적인 디자인 배율로, 이 가로세로비를 사용하면 구도를 더 쉽게 단순화하고 바디의 존재를 부각시킬 수 있습니다.
제품 전시, 아바타, 클로즈업 전시 등의 장면, 특히 전자업체 앱에서 자주 사용됩니다.
4.3 이미지 콤팩트, 구도가 용이합니다.
4:3 화면 비율은 이미지를 더욱 촘촘하게 하고 구도가 쉬워 디자이너가 발휘할 수 있게 한다. 휴대폰 화면 용량이 작기 때문에 전체 화면으로 표시할 때 비율은 App 의 디자인과 레이아웃에 큰 공간을 차지합니다.
16:9 영화 장면 효과
16:9 의 화면 비율은 영화 장면과 같은 효과를 나타낼 수 있으며 가로 구도에 많이 사용됩니다. 가장 널리 사용되는 사이즈표 중 하나로 사용자에게 광범위한 경험을 제공할 수 있습니다.
Tencent 비디오, 넷이즈 클라우드 뮤직 등과 같은 많은 영화 및 TV 엔터테인먼트 앱 디자인에서 널리 사용되고 있습니다.
황금비율을 껴안다
황금 비율은 피라미드의 진주와 같다. 더 가까울수록 더 매력적이고, 그렇지 않으면 매력이 약해진다. (아리스토텔레스, 니코마코스 윤리학, 지혜명언) 16: 10 의 화면 비율이 가장 가깝습니다.
X:≤Y 폭포 설계
X:≤Y 는 폭포 설계를 나타내며 폭이 고정되어 있으며 최대값 사이의 높이를 사용자 정의할 수 있습니다. 이 설계 방법은 일부 사용자가 명확한 목적을 가지고 있지 않고 가능한 많은 정보를 얻는 것을 좋아할 때만 사용됩니다.
X:≤Y 의 화면 비율에 대한 높이 제어는 화면의 표시 가능 영역을 초과하지 않도록 주의하십시오. 예를 들어 750x 1334px 디자인의 꽃잎망의 최대 높이는 848px 입니다.
이미지 축척 선택 방법:
A. 상품의 특징을 충분히 보여줄 수 있는 사진의 비율을 선택해 상품전시의 효과를 근거로 한다.
B, 제품 기질에 따라 제품 콘텐츠 기질에 맞는 사진 전시 비율을 선택하세요.
C, 제품 특성에 따라 적절한 공통 비율을 선택하십시오.
D. 레이아웃 유연성에 따라 특정 배율 값을 정의합니다.
E 분석 → 휴식 → 혁신, 일정한 법칙이나 심미 관념에 부합하는 비례 가치를 창조하다.
1.2, 일관된 화면 비율
제품 특성에 따라 적절한 그림 표시 비율을 결정할 때 전체 레이아웃과 그림 분포에 따라 동일한 그림 표시 비율을 사용할 수 있는 레이아웃을 규정해야 합니다.
시각 효과와 상호 작용 형식을 보장하는 경우, 동일한 주제를 동일한 비율로 서로 다른 페이지에 렌더링하는 것이 가장 좋습니다. 이렇게 하면 시각적 표현의 일관성을 유지할 수 있을 뿐 아니라 사후 운영 유지에 편리할 수 있습니다.
1.3, 화질 향상.
점점 더 많은 제품이 그림의 품질에 초점을 맞추기 시작했습니다. 예를 들어, 인터넷 YEATION 은 제품 사진의 촬영과 처리에 대한 엄격한 규정이 있어 제품의 기질을 높이고 사용자를 감동시키기 위한 것이다.
우리가 설계할 때, 가장 좋은 그림으로 우리의 디자인 원고를 받쳐주어야 한다. 그림의 품질은 전체 인터페이스의 스타일에 영향을 줍니다.
많은 파트너들은 사진이 운영 후기에 올라와서 내 디자인 원고가 아무리 예뻐도 소용없다고 생각할 것이다. 이 문제에 대한 나의 견해는 다음과 같다.
A. 최고의 디자인 출력은 디자이너 특기의 구현이다.
B. 의사결정권자에게 최상의 효과를 보여주고, 그의 디자인 능력에 대한 인상을 높인다.
C. 작동 가능한 시각적 사양을 개발하여 화면 품질을 제어함으로써 화면에 대한 시각적 추구를 엄격하게 제어할 수 있습니다.
D. 당신의 태도는 당신에게 행운을 가져다 줄 것입니다.
1.4, 실제 복원 그림
앞서 언급한 화질의 중요성을 언급하지만 시각 효과를 위해 주제와 무관한 사진을 선택할 수도 없고, 이로 인해 의사결정권자를 오도할 수도 있다.
우리는 그림의 품질을 향상시킬 수 있지만, 그림의 실제 복원을 보장하여 당신의 디자인 작품을 더욱 사실적이고 합리적으로 만들 필요가 있습니다.
일부 본토 제품 디자인에서는 외국 사진 소재를 사용할 때 신중히 대해야 한다. 예를 들어, 사건의 모델 이미지, 문안 정보의 전파는 국내 장면에 더 편향되어 있습니다.
외국의 모델 소재를 사용하면 좀 높을 수 있지만 제품 장면을 실제로 복원할 수는 없어 의사결정자에게 잘못된 인식을 전달할 수 있다.
2, 본문, 나는 열쇠가 어디에 있는지 알고 싶다.
문자 디자인의 계층적 감각은 정보의 효율적인 전달을 결정합니다. 텍스트 정보의 계층적 처리는 사용자가 정보를 얻고 제품에 대한 사용자의 운영 효율성을 높이는 데 도움이 됩니다.
2. 1, 텍스트 정보의 계층 적 차별화
대화형 프로토타입 또는 기타 요구 사항 문서를 얻을 때 사용자가 전달되는 정보를 신속하게 수집하고 이해할 수 있도록 텍스트의 정보 계층을 효과적으로 구분해야 합니다.
텍스트 정보는 중요한 정보, 보조 정보, 보조 정보 등으로 간단히 나눌 수 있습니다. 문자 조판에서는 정보 간의 계층 관계를 명확하게 정리하여 사용자의 전반적인 경험을 높여야 합니다.
글꼴 크기, 색상, 공백, 계층 구조 등을 처리합니다. , 동일한 속성을 가진 정보를 분류하여 전체 정보에 명확한 우선 순위와 계층 구조를 부여합니다.
전체 인터페이스의 시각적 균형을 이루기 위해 설계자는 문자를 시각적으로 표현할 때 문자 스타일 사용을 줄여야 하며 문자 정보를 강조하기 위해 너무 많은 표현 스타일을 사용해서는 안 됩니다.
2.2 정보 제공의 최대 가치를 추정합니다.
우리가 인터페이스를 설계할 때 초급 디자이너는 종종 문자 정보의 최대 가치를 간과하고 자신의 습관에 따라 완벽한 레이아웃을 만드는 경우가 많습니다.
마지막으로, 내가 테스트 단계에 들어갔을 때, 나는 왜 내가 예상했던 것보다 훨씬 많은 정보가 있는지 알게 되었다. 이때 재작업이 일어나 전체 제품 개발 진도에 위험을 초래할 수 있다.
2.3, 디자인을 위해 힌트를 잘 활용하십시오.
일부 문자 정보가 큰 인터페이스 설계에서는 사용자가 정보를 보다 효율적으로 얻을 수 있도록 전체 시각 효과에 따라 적절한 힌트를 선택합니다.
많은 초급 디자이너들은 상호 작용 프로토타입을 지나치게 따르며, 대규모 워드 프로세싱에 지나치게 캐주얼하고, 상호 작용 프로토타입만 미화하고, 사용자 경험의 능동성이 부족한 경우가 많다.
제품 상호 작용을 설계할 때 제품 또는 상호 작용이 시각적 관점에서 정보를 빗질하고 배치할 수 없는 경우가 있습니다. 우리는 당신이 더 잘할 수 있다고 생각하는 것을 최적화하기 위해 자신의 특기를 사용해야 하며, 제품 과정 전반에 걸쳐 전문성을 확립할 수도 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언)
주로 숫자, 글자, 그래픽, 색상 블록 등이 있습니다. 정보 수준을 효과적으로 구분할 수 있는 한.
3, 색상, 어떻게 "색상" 플래너가 될 수 있습니까?
색채는 가장 직관적인 느낌을 주며, 성격에 따라 색채를 배합하여 서로 다른 감정을 전달한다. 배색에는 몇 가지 방법이 있지만 감성적인 판단도 있다.
비주얼 디자이너로서, 우리는 이성적인 방법과 기교를 배워야 하며, 자신의 미적 능력을 향상시키기 위해 우수한 작품을 끊임없이 감상할 필요가 있다.
3. 1, 색상 기본 사항
색상은 비컬러 시리즈와 컬러 시리즈로 나뉩니다. 비컬러 시리즈는 흰색, 검은색, 다양한 음영의 회색입니다. 색상은 빨강, 오렌지, 노랑, 녹색, 청록색, 파랑, 보라색 등의 색상을 말한다.
3.2, 색상 라이브러리 구축
초급 디자이너로서, 우리는 색채 배합에 대한 통제가 그다지 안정적이지 않다. 생산성을 높이기 위해 다양한 요구를 충족하기 위해 합리적인 방법으로 다양한 색상 라이브러리를 구축해야 합니다.
다음은 여러분이 참고할 수 있도록 자주 사용하는 몇 가지 방법입니다. 색상을 수집하는 방법에는 여러 가지가 있습니다. 우리는 자신에게 맞는 몇 가지만 파악하면 된다. 습관을 들이고 오래 버티면 한 가지 방법만 사용해도 많은 것을 얻을 수 있다. (윌리엄 셰익스피어, 햄릿, 습관명언)
A. 다양한 app 를 통해 색상을 수집합니다.
여러 분야의 APP 를 체험하고, 다양한 분야의 APP 톤 선택을 만들어 후기 프로젝트 설계의 기초를 다졌다. 주색분류에 따라
레드 시리즈: 넷이즈 클라우드 뮤직, JD.COM, 넷이예아틴, 넷이코알라 등 문예, 패션, 기술, 귀여움 등 제품 기질에 따라 분류할 수도 있다.
B. Dribbble 을 통해 색상 수집
Dribbble 에는 각 작품의 오른쪽에 배색 파일이 있습니다. 훌륭한 작품을 발견하면, 배색 서류를 수집하는 습관을 길러야 한다.
C. 사진 작품을 통해 색상 수집
우수한 사진 작품을 통해 색채를 수집하는 것도 일반적인 방법 중 하나이다.
수집 방법:
Photoshop 그림 열기 → 웹 형식으로 저장 → GIF 형식 선택 → 색상 선택 8→ 색상표에서 색상 블록 두 번 클릭 → 색상 피커.
D. 모자이크를 통해 색상 수집
Photoshop 필터를 사용하면 같은 색상의 색상 조합을 수집하는 데 특히 적합한 훌륭한 작품이나 사진 사진의 색상 조합을 얻을 수 있습니다.
수집 방법:
Photoshop 그림 열기 → 필터 → 픽셀화 → 모자이크 → 셀 크기 설정.
E. 영화에서 색상 수집
나는 모두가 블록버스터를 보는 것을 좋아한다고 믿는다. 이 영화가 사람들의 추앙을 받을 수 있는 것은 분명 배울 만한 요소가 너무 많을 것이다.
신경질적인 디자이너로서, 우리 뉴런을 자극하는 훌륭한 영화 장면은 절대 놓칠 수 없다.
3.3, 미적 개선, 지각 적 판단 강화.
배색 능력은 이성적인 방법으로 향상시킬 수 있지만 감성적인 판단도 있다. 배색상의 미묘한 차이는 종종 감정적인 판단이다.
우리는 끊임없이 사진, 그림, 디자인 작품 등을 감상하고, 자신의 심미를 전면적으로 높여야 자신의 감성적 판단을 지속적으로 강화할 수 있다.
UI 디자이너로서 인터페이스 디자인에만 집중할 수는 없습니다. 그래픽 작품, 사진 그림, 영화 애니메이션, 수공예 제작, 스포츠 엔터테인먼트의 모든 변화를 체험하고 생활을 세심하게 체험할 수 있다.
3.4, 분석 습관 개발
좋은 배색 능력을 가지려면 쌓는 과정이 중요하다. 우리는 우수한 작품을 보고, 색채 조화의 대비 관계, 색고리에서의 색채의 위치 관계, HSB 값 간의 관계 등을 분석해야 한다.
끊임없는 분석 총결산만이 점차 자신의 사고방식을 형성하고 다른 배색에 대한 통제력을 높일 수 있다.
분석의 습관은 색채뿐만 아니라 레이아웃, 문자 정보 처리, 아이콘 디자인 스타일, 간격 등에 대한 지속적인 분석이 필요하다. 우수한 작품의 법칙을 파악해야만 자신의 표준 습관을 형성할 수 있다.
4. 아이콘, 그리는 법을 알기까지 얼마나 남았나요?
아이콘은 APP 디자인의 점정필로 문자 메시지를 전달하는 데 도움이 될 뿐만 아니라 정보 전달체로 효율적으로 식별할 수 있습니다. 아이콘도 인터페이스 장식의 역할을 하여 인터페이스의 전반적인 미관을 높인다.
많은 초급 디자이너들은 아이콘의 중요성을 무시하고 웹사이트에서 소재를 다운로드하여 재사용하는 습관을 길렀다. 이런 습관이 형성되면, 그들은 점차 자신의 일의 동력을 잃고 자료 다운로드를 원한다. 몇 년 동안 일한 후에, 그들은 곧 자신의 병목에 부딪힐 것이다.
아이콘 디자인에 대한 디자이너의 태도와 통제력은 다른 디자이너와의 격차를 좁히는 요인 중 하나가 될 것이다.
아이콘 디자인에는 여러 단계가 있습니다. 다운로드 재사용 → 실습 설계 → 표준 설계 → 브랜드 유전자에 통합됩니다. 당신은 지금 어느 단계에 속합니까?
4. 1, 다운로드 재사용
다운로드 재사용은 새로 입사한 많은 디자이너들이 익숙한 작업 방식 중 하나이다. 소프트웨어 기술, 디자인 기술, 창작 능력 등에 대한 자신의 부족으로 인해 창작에서 표준까지 자격을 갖춘 아이콘 디자인을 완성할 수 없습니다.
단점: 아이콘 디자인 스타일과 디테일 처리가 완전히 일치하지 않는 이런 습관은 일단 길러지면 점차 손재주를 잃는다.
4.2, 실습 설계
디자인을 추구하는 대부분의 디자이너들에게는 아이콘 디자인의 중요성을 인식하고 제품 특징과 함께 통일된 아이콘을 그립니다.
주: 아이콘 디자인 스타일에는 선형 아이콘, 채우기 아이콘, 평면 아이콘, 평면 아이콘, 손으로 그린 아이콘, 준 물리적 아이콘이 포함됩니다.
우리가 어떤 표현을 선택하든, 디자인 시에는 스타일의 통일을 유지해야 한다. 아이콘의 크기가 다르기 때문에 크기에 따라 아이콘의 시각적 균형도 다르다. 예를 들어, 같은 크기의 사각형은 원형보다 큽니다.
따라서 아이콘 볼륨에 따라 아이콘 크기를 조정해야 합니다.
4.3, 표준 설계
디자이너가 스스로 손을 대는 습관을 길렀을 때, 당신의 진보를 축하합니다. 이 습관을 유지하다. 소프트웨어 기술이 성숙함에 따라 우리는 자신의 무작위성을 엄격하게 통제하고 표준 사양을 사용하여 아이콘을 설계해야 한다.
표준 설계를 바탕으로 자신의 창의력을 충분히 발휘하는 것이 반드시 표준에 국한되는 것은 아니지만, 전체적인 본질은 설계 사양에 부합해야 한다.
4.4, 브랜드 유전자에 통합
아이콘 디자인의 차별화가 점차 흐려지고 있다. 많은 기능이 비슷한 상황에서 아이콘의 스타일링 디자인도 비슷하다. 디자인에 더 중점을 둔 많은 제품들도 자신의 브랜드 유전자에 따라 아이콘을 사용자 정의하기 시작했다.
브랜드 유전자가 있는 아이콘 디자인은 브랜드 식별성이 뛰어나 독특한 시각적 차별화를 형성할 수 있을 뿐만 아니라 제품에 대한 사용자의 기억도 높일 수 있다.
5. 공백으로 남겨두고, 나는 충분한 공간만 있으면 된다.
A. 제품에 필요한 방안과 당신이 완벽하다고 생각하는 방안을 비교하는 비교 원고를 설계한다.
B. 이렇게 처리한 우수한 사례를 선별하여 성공 사례로 제품이 당신의 방안을 받아들이도록 설득하다.
C. 사용자 테스트를 수행하고, 일부 대상 사용자를 선택하여 체험하고, 사용자의 내면에서 최적의 방안을 설계한다.
설계 요약
1. 화면 비율이 다르면 제품 특성에 따라 합리적으로 선택할 수 있습니다.
2. 디자인에서 그림의 비율을 일관되게 유지하여 시각적 표현을 일관되게 할 뿐만 아니라 사후 운영 및 유지 관리에 편리함을 제공합니다.
3. 그림의 품질을 높여 디자인 작품의 미감을 높이는 동시에 그림의 실제 복원을 보장합니다.
4. 문자조판에는 정보의 계층, 최대 정보 용량, 교묘한 사용힌트 등에 주의해야 한다.
5. 지속적으로 색상 라이브러리를 구축하고 풍부하게하는 습관을 개발하십시오.
6. 심미 향상, 감성 판단 강화, 분석 습관 형성
7. 아이콘 디자인 경험의 여러 부분: 다운로드 재사용 → 실습 디자인 → 표준 디자인 → 브랜드 유전자에 통합
8. 적절한 공백은 더 편안한 경험을 줄 수 있다.