휴대폰 UI 를 디자인하는 방법, 그림-25 학당
1, 메인스트림 128x72, 8x48, 64x48, 48x32 및 다양한 비주류 해상도와 같은 다양한 복잡한 해상도에 맞게 조정해 보십시오.
2, .9 신기 png
3, PNG24+jpg
4, 대화형 컨트롤은 가능한 최소 작동 크기 이상이어야 합니다. Android 사양은 48dp
5, 그림의 시각적 요소는 가능한 파일 중앙에 있습니다 따라서, 친구들은 컷팅의 매력을 무시해서는 안 된다!
APP 컷의 기본 요소 디자인
1, 버튼 디자인
1, 실제로 클릭할 수 있는 영역은 최대한 커야 합니다. 적어도 한 손가락의 폭보다 작지 않아야 합니다. 그러면 클릭률이 높아야 합니다. 그렇지 않으면' 클릭이 민감하지 않다' 는 느낌이 들 것입니다. 물론 진짜는 아닙니다. (사용자는 이러한 이유에 관계없이 사용자를 위해 많이 고려할 수 있습니다.)
2, RadioButton, CheckBox 의 경우 최소한 세 가지 상태의 그림 (정상, 클릭, 선택) 이 나와야 합니다. 편의를 위해 두 개의 그림 (정상, 선택) 만 나올 수 없는 경우도 있습니다. 이런 상황은 클릭하는 과정에서도' 반응이 둔하다' 는 느낌을 가지고 있다. 왜냐하면 클릭 상태에서는 그림을 바꾸지 않았기 때문이다.
2, 조판된 디자인 < P > 은 전체적인 디자인에 사용할 수 있는 것이 아니라 사용, 실용성을 고려해야 한다. 내 자신의 경험은 이렇다.
1, 클릭이나 기타 이벤트에 응답하려는 부분은 가능한 화면 주위의 테두리와 일정한 거리를 유지해야 합니다. 만약 네가 이 부분을 화면 가장자리에 놓아야 한다면, 조작 영역을 확대하는 것이 가장 좋다. 화면 가장자리를 클릭하는 것은 그리 유용하지 않기 때문이다. (장치가 보호대를 추가하면 화면 가장자리가 어려울 수 있다.), 적어도 내가 사용한 테두리가 있는 장치, 즉 화면 가장자리에서 직접 손으로 점을 찍는 경우는 대부분 점이 없는 것이다. (윌리엄 셰익스피어, 윈도, 스크린명언) (윌리엄 셰익스피어, 윈도, 스크린명언)
2, 배경 및 내용의 대비가 꼭 맞아야 합니다. 미술의 기초가 있는 사람으로서 모두 이것을 알고 있지만, 디자인 할 때 이런 실수를 하는 경우가 많다. 너의 디자인은 반드시 사용 환경을 고려해야 한다, 예를 들면 햇빛 아래서. 대비가 부족하면 강한 빛 환경에서 사용하기 어렵고 배경과 내용이 어우러져 구별하기 어렵다.
3, 대화상자를 최대한 적게 사용하십시오. 특히 웹 페이지에는 많은 대화 상자가 있습니다. 시간이 지남에 따라 사람들은 대화 상자에 반감을 갖게 됩니다. (적어도 저는 그렇게 생각합니다.) 더 좋은 방법으로 힌트를 줄 수 있는 경우 대화 상자를 사용하지 않도록 하십시오. 꼭 사용할 수 없는 경우에는 인터페이스가 두 곳을 넘지 않도록 하는 것이 좋습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 성공명언) 항상 대화 상자의 응용을 연주하고, 결국 튕기는 것은 사용자이다.
4, 인터페이스가 깔끔합니다. 두 가지 의미가 있습니다. 하나는 인터페이스가 수행하는 기능이 명확하고 간결하며, 다른 하나는 같은 종류의 작업이 가능한 한 하나의 인터페이스에서 수행된다는 것입니다. 이 두 가지 점에서 충돌이 있는 것 같지만, 그렇지 않습니다. 인터페이스가 간결하고 기능적으로 통일되지 않는다면 이 디자인은 디자인을 재설계하는 것이 가장 좋습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 예를 들어, 사용자 정보 입력 기능의 첫 번째 인터페이스는 사용자 이름 입력, 암호를 완료하고 확인 후 두 번째 인터페이스로 들어가 아바타를 설정합니다. 이와 같은 인터페이스의 개인은 너무 자질구레하다고 생각한다. 모두 사용자 정보를 완성하는 기능이므로 하나의 인터페이스로 설계할 수 있습니다. 이렇게 하면 전체 기능을 더욱 촘촘하게 만들 수 있고, 하나의 인터페이스를 적게 사용하면 더욱 간결하게 할 수 있다.
5, 특정 애니메이션을 사용합니다. 애니메이션을 이용한 인터페이스의 과잉은 더욱 부드럽고 친근함을 느끼게 한다. 현재 응용이 너무 많고, 게다가 기능이 강하기 때문에, 너의 응용은 눈에 띄어야 한다. 그러면 반드시 남달라야 한다. 때로는 간단한 애니메이션이 너의 응용 프로그램을 더욱 빛나게 할 때가 있다.
6, 전체 배치. 저는 전문 미공이 아니지만 훌륭한 앱을 많이 봤는데 발언권이 있을 거예요. ᄏᄏ 우수한 앱 중 일부는 * * * 같은 곳이니, 이제 요약해 보겠습니다. 어떤 이유에서든 인터페이스에서 좌우 레이아웃의 심각한 불균형을 피해야 하며, 의도적으로 비대칭적인 아름다움으로 디자인된 것도 있다. 예를 들어, 인터페이스의 맨 아래 열에 가로로 조판된 버튼이 두 개 있다면, 이 두 버튼은 전체적으로 중심에 있는 것이 가장 좋다. 만약 왼쪽이나 오른쪽이라면 좌우 불균형이 있는 느낌이 있다. 왼쪽이나 오른쪽이 가볍거나 왼쪽이 가볍고 오른쪽이 무거울 때, 일부분이 비어 있는 것 같다.
7, 화면 맞춤. 안드로이드 개발에서 가장 골치 아픈 문제 중 하나는 화면 적응 문제, 하드웨어 공급업체가 너무 많고 화면 크기가 너무 많다는 것이다. 좋은 앱은 가능한 한 많은 화면에 맞춰야 한다. UI 디자인 과정에서 화면이 넓어지고, 높아지고, 좁아지고, 짧아지는 과정에서 UI 가 어떻게 맞춰져야 하는지 고려해야 한다. 전반적으로 화면의 적응은 전체 레이아웃을 변경하지 않는다는 원칙이 있습니다. 즉, 레이아웃은 변경되지 않고 도면을 신축하는 것입니다 (핵심은 신축하는 방법입니다). 화면 적응도 사실 약간의 경험입니다. 천천히 깨달으세요. ᄏ
3, APP 디자인 요소 컷아웃 방법 < P > APP 컷아웃을 진행하기 전에 다음과 같은 6 가지 작업을 수행해야 합니다.
1, 클라이언트와 기술 소통이 잘 되고, 서로 다른 프레임워크로 구현될 때 그림이 다르게 절단됩니다. 예를 들어, Tabbar 는 배경을 함께 잘라야 하는지, 아니면 icon 을 단독으로 투명하게 만드는지, 문자를 투리에 넣을지 뒤에 넣을지 등을 예로 들 수 있다. (윌리엄 셰익스피어, 윈스턴, 독서명언)
2, icon 가장자리만 잘라서는 안 되는 작은 icon 버튼이 있습니다. 최종 구현을 고려할 때 이 그림을 버튼으로 만들어 사용자와 상호 작용하는 것입니다. 따라서 사용자가 더 나은 점을 보장할 수 있도록 클릭할 수 있는 그림이 88×88 이상일 수 있도록 투명한 가장자리를 더 남겨야 합니다.
3, 개인의 강박증, PNG24 를 사용할 수 있다면 PNG32 를 사용하지 않고, PNG8 을 사용할 수 있다면 PNG32 를 사용하지 않는다. Fireworks 를 사용하여 크기를 최적화합니다.
4, 보이는 그래픽을 변경하지 않고 클릭 영역을 늘려야 하는 그림입니다. 그런 다음 그림을 자를 때 보이는 그래픽 주위에 1 픽셀의 투명도를 추가하는 것이 좋습니다. 이는 스트레칭을 확대하기 위해 보이는 영역의 이미지 왜곡을 생성하지 않기 위해서입니다.
5, 컷아웃의 높이. 문자 모깎기 테두리 배경과 같은 일반적인 배경 그림의 경우 그림을 자를 때는 효과도에서 얼마나 높이 깎을 수 있는 것이 아니라 일반화를 위해 한 줄의 문자 높이만 자르면 됩니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언) 그러나 이것은 절대적이지 않습니다. 정확하게 잘라야 할 높이 H = Paddingtop+Textheight+Paddingbottom, 배경에 상대적인 문자의 위쪽 여백+한 줄의 문자 높이+배경에 상대적인 문자의 아래쪽 여백입니다.
6, 컷아웃의 너비. 만약 공통된 배경도라면, 그의 폭은 효과도에서 그가 가장 작은 폭이어야 한다. 즉, 이 배경은 여러 곳에서 사용될 수 있으니 가장 작은 너비를 취하면 된다. 더 귀찮은 것은 전체 화면을 깔 때, 이렇게 하면 네가 만든 효과도의 와이드폭을 봐야 하기 때문에, 효과도를 만들 때는 작은 화면의 효과도를 만드는 것이 가장 좋다. 9 번 그림을 신축하고 압축할 수 있지 않냐고 묻는 사람이 있는데, 왜 가장 작은 폭을 참고해야 하나요? 개인적인 경험에 따르면 큰 그림이 화면이 작은 경우 점 9 그림에서 늘어나는 부분이 더 어둡게 변하는 것으로 나타났다.