Apple 스타일의 아름다운 슬라이더. Apple 스타일 CSS 버튼 Apple 스타일 디자인

많은 고객들이 미래 사이트에 대한 소망을 설명하면서 “우리는 Apple 스타일의 무언가를 원합니다!”라고 간결하게 표현합니다. 그들의 의견으로는 그러한 답변은 수행자에게 포괄적인 정보를 제공하고 즉시 "i"에 점을 찍고 모호성을 제거해야 합니다. 그러나 실제로는 모든 것이 더 복잡합니다. 결국 새로운 태블릿, 단순한 흰색 iPhone 상자 또는 Apple 웹 사이트 자체의 프레젠테이션과 같은 Apple 스타일의 모든 것이 사람에게 깊은 인상을 줄 수 있습니다. 그리고 가장 공격적인 것은 아마도 "Apple 스타일로 하세요"라고 말하는 것인데, 클라이언트 자신은 그것이 실제로 무엇을 의미하는지 알지 못합니다. 결국 자신에게 기대되는 것이 무엇인지 알지 못하는 불행한 수행자는 어떻게 됩니까?

그것을 알아 내려고합시다!

사과 원칙

Apple의 접근 방식은 매우 간단한 원칙을 기반으로 합니다. 모든 작업 영역을 수행하지 않고는 진정한 고품질 제품을 만들 수 없습니다. 모든 것은 최고 수준에서 이루어져야 합니다. 새 휴대폰이 출시되면 놀라운 화면 품질과 저렴한 가격거친 몸에 균열이 있고 거대한 광고판에 광고 슬로건의 철자가 틀리면.

"글쎄, 우리는 카피 라이팅을 절약했습니다. 우리는 텍스트가 아니라 전화를 판매합니다."라고 대다수는 생각할 것입니다.

하지만 그게 전부야! Apple의 관점에서 볼 때 iPod을 구입하기 위해 힘들게 번 돈을 쓰기 전에도 자사 제품을 소유한 경험이 나타나므로 이 사슬에는 중요하지 않은 요소가 없습니다. 이것은 기술뿐만 아니라 포장뿐만 아니라 광고, 쇼케이스, 웹사이트, 사이트의 텍스트입니다. 여기에는 사소한 요소가 없습니다. 그리고 "포장 자체가 전체 이야기를 할 수 있습니다." 따라서 "애플 스타일"에 대해 가장 먼저 이해해야 할 것은 모든 작업 영역에 대한 세심한주의입니다.

Apple 제품의 두 번째 중요한 특징은 우아한 단순함입니다. 그녀는 Apple에서 매우 중요한 역할을 합니다.

“우리는 왜 단순함이 좋다고 생각합니까? 사물을 다룰 때 우리가 그것을 관리하고 있다는 느낌을 받는 것이 중요하기 때문입니다."

세 번째 중요한 기능은 세부 사항입니다. 전환 애니메이션, 사운드, 볼륨을 조정할 때 들리는 딸깍 소리, 페이지를 스크롤할 때의 부드러움 등 Apple 제품을 사용하면서 눈에 띄지 않지만 일상적인 편안함을 주는 모든 작은 것들 , 훨씬 더.

그러나 지금까지 설명한 모든 것은 제품과 관련된 것입니다. 우리의 원래 예에서 우리는 웹사이트를 만드는 것에 대해 이야기하고 있었습니다. 이러한 접근 방식을 웹 디자인에 어떻게 적용합니까? 이 질문에 답하기 위해 Apple 웹 사이트를 살펴보고 Apple 웹 사이트에서 사용하는 문체 트릭을 이해하려고 합니다.

구혼

사진 및 일러스트레이션

Apple의 웹사이트를 방문하면 가장 먼저 눈에 들어오는 것은 고품질의 제품 사진입니다. 사실, 나는 이 사진들이 "와우!" 방문자에게. 모두 크고 밝으며 같은 스타일로 만들어졌으며 모든 세부 사항을 볼 수 있습니다.

사진의 마법. 일부에 따르면 - "모서리가 둥근 일반 블록"이지만 그러한 사진에서는 감탄할 만합니다.

경쾌함과 순수함

다음 요점은 경쾌한 것입니다. 페이지의 모든 요소는 매우 편안하고 자유롭습니다. 흰 바탕콘텐츠 영역은 가벼움을 줍니다. 그리고 전체 페이지가 무너지는 느낌이 없도록 밝은 프레임의 밝은 회색 배경으로 수집됩니다.

글꼴

Apple은 제목에 두 개의 Adobe Myriad 서체와 표준 macOS X 글꼴인 Lucida Grande만 사용합니다. 두 서체 모두 전체적으로 미니멀한 스타일만을 유지하는 소박하고 현대적인 세리프 서체입니다. 분명히 말해서, 고품질에 대한 열망은 여기에도 존재합니다. 사이트의 큰 헤드라인이 모든 조건에서 아름답게 보이도록 하려는 열망 때문에 Apple은 텍스트가 아닌 비문에 이미지를 사용합니다.

스티브 잡스 역시 애플의 글꼴 덕분에 경건한 태도를 취했습니다. 대학을 졸업한 후 서예 강의를 비롯한 다양한 과정을 수강했습니다.

둥근 모서리

또한 사이트에는 유명한 (그들이 없으면 얼마나 많이!) 둥근 모서리가 있습니다. 그들은 말 그대로 도처에 있습니다! 솔직히 말해서, 때때로 iPhone은 둥근 모서리를 사용하는 전통을 계속하기 위해 발명된 것 같습니다.

둥근 모서리는 휴대폰 케이스, 애플리케이션 아이콘, 홈 버튼 등 어디에나 있습니다.

효과

다음 아이템 역시 유명한 아쿠아 렌즈와 그라데이션 효과입니다. 최근에는 사이트의 수가 눈에 띄게 감소했습니다. 그들은 종종 특정 요소를 강조하는 데 사용됩니다.

애플 웹사이트의 메인 메뉴. 유명한 Aqua 스타일에 대한 찬사 - Scott Forstall의 사임 이후 미니멀리즘은 점점 더 스켈레모피즘과 캐러멜 효과를 지배합니다.

콘텐츠

Apple은 사이트의 내용, 텍스트 및 프레젠테이션에 그다지 주의를 기울이지 않았습니다. 흥미로운 기능은 이 사이트의 주요 제품이 제품이기 때문에 많은 사람들에게 사랑받는 "회사 소개" 섹션이 없는 것으로 간주될 수 있습니다.

현대 효과

점점 더 사이트에서 애니메이션 또는 기타 유사한 효과를 사용하기 시작했습니다. 이러한 효과는 역학을 추가하고, 새로운 관점에서 이점을 보여주거나, 부품 작동 방식을 이해하는 데 도움이 됩니다.

그리고 그게 다야?

분명히 이 접근 방식을 모든 사이트에 무차별적으로 사용할 수는 없습니다. 프레젠테이션 또는 판촉 사이트에 속합니다. 그리고 가장 중요한 것은 시각적 지침에 의해서만 안내되는 스타일을 반복할 수 없다는 것입니다. 사이트는 완전하고 완전한 제품이며, 각 단계의 창작은 사랑과 아이디어로 높은 수준에서 수행되어야 합니다.

단계 중 하나만 개발하지 못하면 "애플 스타일"의 깨지기 쉬운 마법이 즉시 파괴됩니다.

위에서 설명한 기술을 사용하면 아름답고 깔끔하고 현대적인 디자인을 만드는 데 도움이 되지만 유능한 텍스트를 작성하고 필요한 수량비디오 프레젠테이션 및 고품질 사진 만들기.

Apple 컬트는 아무도 무관심하지 않으며 Apple의 인기를 뒷받침하는 핵심 요소 중 하나는 독특한 디자인입니다. 캘리포니아에서 Apple이 디자인한 디자이너는 디자이너가 제품을 예술품처럼 취급한다는 것을 분명히 보여줍니다.



캘리포니아 쿠퍼티노 - 11월 16일 Apple은 "Designed by Apple in California"라는 제목의 새 하드커버 책을 출시한다고 발표했습니다. iMac(1998)부터 Apple Pencil(2015)까지 20년간의 디자인 혁신이 회사의 과거 및 현재 제품 사진 450장에 담겨 있습니다. 이 책은 스티브 잡스를 추모하기 위해 8년 동안 만들어졌습니다.


조니 아이브(Jony Ive)는 “인류를 위해 중요한 것을 창조한다는 아이디어는 처음부터 스티브에게 동기를 주었습니다. 이 생각은 Apple이 미래로 나아가는 우리의 이상이자 목표입니다.”라고 Jony Ive가 말했습니다.



"Designed by Apple in California"는 완전히 다른 분야의 많은 디자인 팀과 전문가 간의 긴밀한 협력의 결과입니다. 그들 모두는 이 책이 사람들에게 Apple 제품이 어떻게 그리고 왜 만들어지고 존재하는지에 대한 이해를 줄 것이라는 희망을 공유합니다. 모든 사진은 Andrew Zuckerman이 "고의적으로 겸손한 스타일"로 묘사한 기술로 촬영되었습니다. 사진은 완성된 제품 자체뿐만 아니라 디자인 과정의 세부 사항을 보여줍니다.



이 책은 디자인에 관한 책이지만 디자이너 자신, 창작 과정, 제품 개발에 관한 책은 아닙니다. Apple 디자인의 스타일, 이미지 및 이념을 객관적으로 반영합니다. 많은 제품이 너무 명확하고 단순하며 논리적이어서 합리적인 대안이 없습니다. 각 장치에 대해 제작된 악기의 디자인도 고려됩니다.

"디자이너로서 우리는 미래에 살고 있고, 이미 한 일을 사랑하고, 아직 하지 않은 일에 집착합니다."



"우리가 20년 동안 함께 일하면서 배운 가장 중요한 것 중 하나는 서로의 말을 경청할 필요가 있다는 것입니다. 가장 밝은 아이디어는 종종 아주, 아주 조용히 말하는 사람들에 의해 주어지기 때문입니다."




캘리포니아에서 애플이 디자인한 책은 두 가지 형식의 한정판 책입니다. 소형(25.9 x 32.4cm)이 $199, 대형(33 x 40.6cm)이 $299입니다. 특수 제작된 종이에 무광 은도금 처리된 특수 컬러로 인쇄되어 있습니다. 미국, 호주, 영국, 독일, 홍콩, 한국, 프랑스, ​​일본, 대만의 Apple.com 및 일부 Apple Store에서만 독점 판매됩니다.

옛날 옛적에 Apple은 간단하고 이해하기 쉬운 제품을 디자인하는 능력으로 유명했습니다. 그녀는 사용자가 사용할 수 있는 작업과 선택 방법을 직관적으로 이해할 수 있는 그래픽 인터페이스의 챔피언이었습니다. 이런 저런 작업을 마친 후 사람들은 항상 이해할 수 있는 피드백을 받았고 결과가 기대에 미치지 못하면 모든 것을 취소할 수 있는 기회를 가졌습니다.

그러나 이 모든 것이 끝났다. Apple 제품이 이제 훨씬 더 매력적으로 보인다는 사실에도 불구하고 이 외부의 아름다움에는 대가가 따랐습니다. 좋은 디자인의 기본 원칙인 명확성, 피드백, 복구 등은 사라졌습니다.

시각적 우수성을 추구하기 위해 Apple 팀은 너무 작고 얇은(낮은 대비와 결합된) 글꼴을 만들어 정상적인 시력을 가진 사람도 읽을 수 없었습니다. 그들은 개발자 자신도 기억할 수 없는 모호한 제스처와 우리 대부분이 존재하지 않는 훌륭한 기능을 많이 만들었습니다.

제품, 특히 Apple의 운영 체제인 iOS 기반 제품 모바일 기기더 이상 수십 년 전에 개발된 잘 알려진 잘 정립된 설계 원칙을 따르지 않습니다. 실험적 과학과 상식을 바탕으로 한 이러한 원칙은 컴퓨터 기술의 힘을 여러 세대에 개방했으며 명확성과 사용 용이성으로 인해 Apple 제품에 대한 탁월한 명성을 얻었습니다.

불행히도 Apple은 이제 이러한 아이디어를 단계적으로 없애고 있습니다. iOS 및 Mac OS X용 디자인 가이드에는 여전히 유사한 개념이 포함되어 있지만 회사 내부에서는 대부분이 전혀 실행되지 않습니다. 애플은 길을 잃었고 이제는 스타일과 외모에 집중함으로써 한때 경쟁과의 싸움에서 비장의 카드였던 가치를 희생하여 행동하고 있습니다.

애플은 디자인을 파괴하고 있다.더구나 그들의 행동은 아름다운 포장지에 좋은 디자인이 있다는 것을 다시 한번 믿게 만듭니다. 그러나 이것은 그렇지 않습니다! 디자인은 사고 방식입니다. 먼저 청중의 근본적인 요구를 정의한 다음 제품과 서비스로 고객을 만족시킵니다. 이 분야에서는 개발자가 사람, 기술, 사회 및 비즈니스를 이해해야 합니다.

아름다운 물건을 만드는 것은 현대 디자인의 작은 부분에 불과합니다. 오늘날 이 업계의 전문가들은 도시, 교통 시스템 또는 의료 시설 설계와 같은 문제를 해결하기 위해 노력하고 있습니다. 그러나 Apple은 인터페이스의 기능, 명확성 및 사용 용이성을 해치더라도 디자이너의 유일한 임무는 사물을 아름답게 만드는 것이라는 오래된 구식 아이디어를 계속해서 강화하고 있습니다.

애플, 당신은 항상 리더였습니다. 왜 지금 그렇게 자기 중심적인 행동을 하는 겁니까? 그러나 더 중요한 것은 왜 Google이 최악의 사례를 모두 따릅니까?

그렇습니다. 한때 Apple이 손쉬운 상호 작용으로 유명해지자 이해하기 쉽고 인상적인 특성을 지닌 컴퓨터와 응용 프로그램은 아무런 지침 없이도 사용할 수 있었습니다. 모든 거래를 쉽게 감지하고 모든 작업을 취소 및 수정할 수 있으며 시스템은 사용자가 한 일을 항상 이해할 수 있도록 자세한 피드백을 제공했습니다. 사용자들은 Apple 기기의 기능에 대해 열광했으며 Apple의 디자인 지침과 원칙은 강력하고 대중적이며 영향력이 있었습니다.

그러나 회사가 첫 번째 iPhone 및 태블릿의 도입과 함께 제스처 인터페이스로 전환했을 때 경영진은 이전에 따랐던 많은 핵심 원칙을 의도적으로 포기했습니다. 더 이상 행동의 증거는 없습니다. 우리는 한심한 스크랩만 남습니다. 피드백... 왜요? Apple은 시각적 단순성과 우아함을 향한 급진적인 발걸음을 내디뎠습니다. 따라서 Apple 솔루션의 학습 용이성, 유용성 및 생산성에 큰 타격을 입혔습니다.

고객이 사용하고 배우기 어려운 배송 시스템을 구현하기 시작했지만 너무 늦고 돈이 이미 송금되기 전까지 사람들이 이러한 문제를 인식하지 못하기 때문에 포기했습니다. 그러나 그때조차도 장치의 단점에 대해 "내가 그렇게 어리석지 않았다면 ...".

오늘날의 iPhone 및 iPad는 시각적 단순성에 관한 논문입니다. 사랑스러운 글꼴. 불필요한 단어, 기호 또는 메뉴가 없는 깔끔한 레이아웃. 많은 사람들이 텍스트를 읽을 수 없다는 것은 중요하지 않습니다. 하지만 그는 잘생겼다.

한 설문 조사에서 한 여성은 Apple의 보조 도구를 사용하여 읽기 쉽도록 작은 글꼴을 크고 고대비로 만들어야 한다고 주장했습니다. 그러나 그녀는 또한 응용 프로그램의 많은 섹션에서 이 옵션으로 인해 글꼴이 너무 커서 텍스트가 화면에 맞지 않는다고 불평했습니다. 그녀가 시력 문제가 없었다는 사실을 감안할 때, Apple이 더 얇은 획과 시각적 대비가 적은 글꼴 유형으로 전환하기 전에 그녀는 동일한 텍스트를 쉽게 읽을 수 있었을 것입니다.

수백만 명의 사용자가 제품을 사용하는 과정에서 한계를 느끼게 만드는 디자인 철학은 무엇입니까? Apple은 대부분의 사람들이 스마트폰을 사용하고 열등한 라벨을 붙이지 않고 텍스트를 읽을 수 있도록 스마트폰을 디자인할 수 있습니다.

더 나쁜 것은 보조 도구가 때때로 화면의 텍스트에 맞지 않기 때문에 Apple 회사가 의존하는 바로 그 아름다움을 파괴하고 있다는 것입니다. 폰트가 조금 있었다면 큰 폭, 더 높은 콘트라스트와 약간 덜 앤티앨리어싱이 있었다면 Apple은 아름다움뿐만 아니라 가독성도 유지했을 것입니다.

취소가 거부되었습니다. 그리고 무슨 일이 일어났는지 아십니까? 많은 불만이 접수되어 반품되었습니다. 이 기능약간 다른 형식으로: 작업을 취소하려면 휴대폰이나 태블릿을 세게 흔들기만 하면 됩니다. 그러나 취소는 보편적으로 구현되지 않았으며 장치를 흔들어야 알 수 있었습니다. 더욱이 기능이 작동하지 않는 경우 사용자는 문제가 무엇인지 알지 못했습니다. 가제트가 충분히 흔들리지 않았거나이 특정 상황에 대해 취소가 제공되지 않았습니다.

터치 스크린, 특히 상대적으로 작은 장치활성 링크나 버튼이 실수로 터치되면 잘못될 수 있는 많은 것들이 있습니다. 이러한 무작위 터치는 사용자를 새로운 목적지로 안내합니다. 이러한 실수를 제거하는 표준적이고 간단한 방법은 "뒤로" 버튼을 사용하는 것입니다. Android OS에서 실행되는 스마트폰에서 이 기능은 항상 사용할 수 있는 범용 컨트롤러로 내장되어 있지만 Apple에서는 사용하지 않습니다. 왜요? 알려지지 않은. 버튼이나 메뉴 사용을 피하려고 합니까? 결과적으로 그들은 깨끗하고 우아해집니다. 모습그러나 이 시각적 단순성은 인터페이스에 복잡성을 더하기 때문에 기만적입니다.

Apple은 일부 위치에 뒤로 화살표를 배치하지만 모든 곳에서 사용할 수 있는 Android와 달리 실행 취소 및 뒤로 버튼은 개발자의 재량에 따라 구현됩니다. Apple을 포함한 모든 사람이 이러한 기능을 구현하는 것은 아닙니다.

화면에 포인터가 없을 때 스와이프 방법, 손가락 수, 화면 터치 빈도 또는 시간을 사람이 어떻게 알 수 있습니까? 사람들은 친구에게서 이러한 제스처에 대해 듣거나 "지시 사항을 읽거나"(존재하지 않음) 완전히 무작위로 발견함으로써 이러한 제스처를 기억해야 합니다.

"애플" 제품은 아름답고 매력적입니다! 그렇기 때문에 어려움을 겪을 때 사용자는 스스로를 비난하는 경향이 있습니다. 이는 Apple에게는 좋은 일이지만 고객에게는 완전히 불공정합니다.

좋은 디자인은 시각적으로 눈에 띄고 사용하기 즐거워야 합니다. 그러나 Nice를 사용하려면 장치가 이해하기 쉽고 사용자 친화적이어야 합니다. 이해, 통제, 쾌락을 느끼게 하는 기본적인 심리학적 원칙을 따라야 합니다. 여기에는 명확성, 피드백, 적절한 표시, 제약 조건의 적절한 사용 및 물론 작업을 취소하는 기능이 포함됩니다. 이러한 기본적인 디자인 개념은 미래의 UX 전문가에게 먼저 설명되며, Apple이 이러한 교육에 참여했다면 그들은 실패했을 것입니다.

더 매력적이지만 사용하기 더 어렵습니다.

올바른 설계 방법론을 피하면 어떤 결과가 생길 수 있습니까? 더 높은 유지 관리 및 지원 비용. 그리고 궁극적으로 Apple의 단순한 인터페이스를 공개적으로 칭찬할 수 있지만 동시에 모든 기능을 사용할 수 있을 만큼 충분히 똑똑하기를 희망하면서 다른 브랜드의 전화 비용을 절약할 수 있는 불행한 고객의 "탈퇴"입니다.

이 경우 컴퓨터를 마스터할 수 없었지만 이제 태블릿과 같은 기술 장치를 쉽게 사용하는 조부모에 대한 이야기는 관련이 없습니다. 그들이 새로운 기술을 어느 정도 마스터했는지 생각해보십시오. 예, 제스처 장치, 태블릿 및 휴대폰은 초기 사용에 대한 임계값이 낮지만 고급 기능(예: 하나의 이메일에 세 장의 사진 보내기, 특정 텍스트 서식 지정 또는 여러 다른 작업의 결과 결합)을 마스터하는 것은 훨씬 더 어렵습니다. 기존 컴퓨터에서 이러한 작업과 기타 여러 작업을 수행하는 것이 훨씬 쉽고 효율적일 수 있습니다.

새로운 세대 소프트웨어매력과 처리 능력을 향한 거대한 도약을 이루면서 동시에 사용하기 더 어려워졌습니다.

이 문제는 Apple에만 국한되지 않습니다. 구글지도또한 같은 방식으로 진화하고 각 반복마다 더 혼란스러워집니다. 안드로이드도 마찬가지입니다. Microsoft의 Windows 8 운영 체제는 위에서 설명한 많은 문제를 해결하는 제스처 기반 장치를 위한 다소 영리한 설계를 가지고 있지만 생산성을 위해 설계된 데스크탑에 필요한 다른 작업 스타일을 통합할 수는 없습니다.

그래서 문제가 무엇입니까? 디자인이 여러 버전으로 생성된다는 사실은 각 분야에 여러 종류가 있기 때문에 정확히 동일합니다. 소프트웨어를 만들 때 수석 프로그래머가 반드시 대화형 프로그래밍을 이해하는 것은 아니며 커널 개발자는 통신 코딩에 대해 전혀 알지 못할 수 있습니다. 반면 심리학에 익숙한 인터랙션 디자이너는 개념 모델, 명확성 및 이해도의 원리를 알고 있는 반면 정보학 전문가에게는 이것이 "어두운 숲"입니다. 그러나 디자인 전문가는 인터랙티브 디자인이 웹사이트를 의미한다고 생각하는 경향이 있으며 프로그래밍과 인간-컴퓨터 상호 작용의 복잡성을 이해하지 못하는 경우가 많습니다.

이것이 중요합니다. 왜냐하면 완벽하게 명확해 보이는 인터페이스를 사용하지 못하기 때문입니다. 이는 첨단 기술 제품이 사용성과 유용성 모두에서 퇴보하고 있기 때문에 중요합니다.

문제가 발생했습니까?

Nielsen Norman Group 파트너 중 한 명인 Bruce Tognazzini는 Apple 초기에 Steve Jobs와 함께 일했습니다. 사용성 전문가(Donald Norman)는 Jobs가 떠난 직후 회사에 합류했으며 1996년 Steve가 복귀한 후 회사를 떠났습니다. 그들은 사용하기 쉽고 직관적인 제품(Apple이 설명서가 필요하지 않다고 정말로 자랑했을 때)에서 설명서와 함께 제공되지 않지만 여전히 자주 필요한 오늘날의 기기로의 전환을 보지 못했습니다.

잡스가 복귀하기 전에 애플은 사용자 경험, 엔지니어링, 마케팅의 세 가지 요소를 염두에 두고 제품 개발에 접근했다고 밝혔습니다.

오늘날 Apple은 더 이상 제품을 명확하고 유용하게 만들려고 하지 않습니다. 대신 그녀는 윤리적인 방식으로 디자인합니다. 불행히도 인간-컴퓨터 상호 작용 및 인간 요인에 대한 과학 저널의 연구에서 알 수 있듯이 시각적으로 단순한 모양이 사용 편의성으로 이어지지는 않습니다.

Apple은 중요한 컨트롤을 숨기거나 제거하여 제품의 복잡성을 의도적으로 숨깁니다. 버튼 하나로 컨트롤러보다 더 간단할 수 있는 것은 무엇입니까? 예, 이것은 매우 간단한 솔루션이지만 하나의 버튼으로 특정 모드를 제공하지 않는 한 시스템 사용 옵션이 극도로 제한됩니다. 도움을 받으면 컨트롤을 다른 시간에 다른 값으로 설정할 수 있지만 이는 사용자를 혼란스럽게 하고 오류를 발생시킵니다.

또는 하나의 컨트롤러에 여러 개의 숨겨진 기능, 버튼(또는 터치 스크린)은 한 손가락, 두 손가락 또는 세 손가락으로 터치할 때 한 번, 두 번 또는 세 번 눌렀을 때 다른 작업을 수행할 수 있습니다. 또는 주어진 방향으로 주어진 수의 손가락을 주어진 횟수만큼 사용하여 " 환경 설정»Macintosh에서 Apple 마우스 또는 트랙패드에서 터치 및 제스처 값의 선택(및 차이점)을 탐색합니다.

단순한 모양은 제어를 더 복잡하고, 더 임의적이며, 더 암기하고, 다양한 오류에 취약하게 만들 수 있습니다. 사실, Lisa와 Macintosh 컴퓨터의 초창기에 Apple은 "No Modes"라는 슬로건으로 인도되었습니다. 모드를 제거하는 유일한 방법은 전용 컨트롤러를 사용하는 것이며 각 컨트롤러는 항상 같은 작업을 수행해야 합니다.

모드의 원리와 단순함의 외양과 실제 단순함 사이의 균형은 대화형 디자인의 초등 과정에서 배웁니다. 그러나 왜 Apple은 이 지식을 적용하고 싶어하지 않습니까?

모든 현대 컴퓨터 회사는 개발자를 위한 사용자 인터페이스 가이드를 제작합니다. Apple은 이러한 매뉴얼을 처음으로 제작했으며, 훌륭하고 이해하기 쉬운 디자인의 원칙에 대한 훌륭한 설명 역할을 했습니다. Apple 휴먼 인터페이스 지침의 초기 버전은 Bruce Tognasini가 1978년에 작성했습니다. 1987년 출시 당시(1985-1986년) 제작에 2년이 걸렸을 때 현대 인터페이스의 모든 핵심 원칙이 통합되었습니다. 스티브 잡스가 1996년에 회사로 돌아왔을 때에도 여전히 시행되었습니다.

Apple 개념의 완전한 세트는 Macintosh 인터페이스의 기본 원리를 연구한 Tognasini 프로젝트의 결과였습니다. 그 전에는 UI 개발에 관련된 소수의 사람들에게만 알려졌습니다. 이 가이드를 작성하면서 신입사원 교육이 훨씬 수월해졌고 매킨토시 제품 개발자도 크게 증가하기 시작했습니다.

팀은 원칙을 만들기 위해 새로 형성된 PCI(인간-컴퓨터 상호 작용) 커뮤니티의 연구에 크게 의존했습니다. 주요 초점은 1980년대 초 PCI 회의 논문과 1986년 Norman과 Stephen Draper가 편집한 User Centered System Design이라는 책에 나타난 샌디에이고 캘리포니아 대학교의 Donald Norman과 그의 학생들의 작업이었습니다. .

이러한 기본 사항은 사람들이 사용하는 기계가 아니라 사람들의 필요, 욕구 및 능력을 반영한다는 점에 유의하는 것이 중요합니다. 1980년대 초반과 마찬가지로 오늘날의 인터페이스에 적용되며 사용자가 진화할 때까지 그대로 유지됩니다.

Apple의 현재 iOS 개발자 가이드는 많은 관련 원칙을 설정하고 있지만 강조점은 여전히 ​​단순함(특히 외관상 단순함)과 사용자 만족도 및 전반적인 즐거움입니다. 이러한 속성은 중요한 역할을 하지만 결정적인 것은 아닙니다.

보다 구체적으로 지침은 개발자에게 시각적 커뮤니케이션이 충분히 정교하다는 것을 14배 이상 상기시킵니다. 디자인은 가능한 한 깨끗하고 단순해야 하지만 필요한 프롬프트를 제거하여 달성해서는 안 됩니다. 디자이너가 필요한지 어떻게 알 수 있습니까? 알려진 유일한 방법은 사용자 테스트를 통하는 것입니다. 그러나 인터페이스 매뉴얼은 사용성 테스트에 대해 무엇을 말할 수 있습니까?

이것은 정말 좋은 생각입니다. Apple이 제안하는 소수의 동료가 아니라 예상 구매 고객을 대표하는 사람들과 함께 테스트를 실행해야 합니다.

Apple의 독창적인 디자인 원칙은 명확하고 배우기 쉽고 기능적인 시스템을 만드는 것의 중요성을 강조합니다. 그러나 그 과정에서 회사는 항상 추구해 왔던 핵심 기반을 잃어버렸습니다. 아래 이미지는 Apple 지침의 기본 원칙이 시간이 지남에 따라 어떻게 발전해 왔는지 보여줍니다.

이 표는 1995년부터 2015년까지 Apple의 사용자 인터페이스 지침의 발전을 설명합니다. 운영 체제 iOS를 관리하는 원칙은 보다 전통적인 OS X에 대한 2015년 지침 왼쪽에 있습니다.

보시다시피, 인지된 안정성과 모덜리스는 2008년 이후 어느 시점에 사라졌습니다. 명시적이고 예상되는 행동에 대한 감사와 함께 iOS로 이동하면서 용서와 정신적 모델이 사라졌습니다. See-and-Point는 iOS 4의 도입과 함께 2010년 후반에 iOS 가이드에서 제거되었습니다. 중요한 요소그러나 2015년에는 중요합니다. 이와 함께 은유와 사용자 제어가 여러 위치를 잃고 롤다운되었습니다.

누락된 원칙

iOS에서 완전히 또는 부분적으로 무시되는 가장 중요한 원칙은 명확성, 피드백, 회복, 일관성 및 성장 장려입니다.

명쾌함

명확성 또는 시스템을 보고 제안된 모든 작업을 즉시 찾아내는 능력은 항상 Apple 디자인 성공의 핵심 요소였습니다. 초기 단계에서는 사용 가능한 모든 작업이 사용자에게 표시되는 버튼, 아이콘 또는 메뉴 항목의 형태로 표시되었기 때문에 이 원칙을 "보고 가리키기"라고 했습니다. 해당 개체를 한 번 클릭합니다.

간단히 말해서 명확성은 사람들이 외울 필요가 없도록 인터페이스를 보다 가시적이고 이해하기 쉬운 요소로 채우는 것을 포함합니다. 기존 PC의 메뉴는 이 아이디어를 완벽하게 따릅니다. 레이블이 지정된 아이콘도 있습니다. 태그가 지정되지 않은 아이콘은 대부분 실패하지만 상호 작용에 대한 힌트가 부족합니다. 명확성은 Apple 가이드에서 더 이상 언급되지 않습니다.

피드백

피드백과 그 "친구" 피드포워드를 통해 사람은 수행된 작업 후에 무슨 일이 일어났는지 알거나 작업이 선택되면 어떤 일이 일어날지 이해할 수 있습니다.

사람들은 자신의 행동의 효과를 측정하기 위해 지속적인 피드백 흐름에 의존합니다. 현실 세계에서는 자동으로 피드백을 받지만 가상 세계에서는 디자이너가 생각했을 때만 피드백이 발생합니다. 피드백이 없으면 사용자는 시스템 내에서 자신의 현재 상태를 확신하지 못할 수 있으며 어떠한 책임도 느끼지 않을 것입니다.

회복

실수가 발생합니다. 복구의 원칙은 작업을 완료하는 것처럼 작업을 취소하기 쉬워야 한다는 것입니다. 비하라고 하는 것은 현재의 매뉴얼과 위의 표에서도 사라졌다. 복구는 1974년 Xerox Corporation의 Palo Alto Research Center(PARC)에서 발명된 "실행 취소" 버튼을 사용하여 구현되었으며 아마도 Warren Teitelman일 것입니다. 아시다시피 Lisa와 Macintosh 컴퓨터는 PARC의 초기 개발에서 기본 구조를 차용했습니다. Apple은 Xerox로부터 권리를 샀습니다.

실행 취소 명령은 다시 실행 버튼을 사용하여 취소할 수 있습니다. 실행 취소 및 다시 실행은 사람들이 자신의 실수를 고칠 뿐만 아니라 새로운 것을 더 자유롭게 실험하는 데 도움이 됩니다.

실행 취소는 사용자가 콘텐츠를 복원할 수 있도록 했으며 뒤로 버튼은 내비게이션 시스템의 이전 위치로 돌아갈 수 있게 해주는 도우미 명령이었습니다. 독창적인 그래픽 인터페이스는 탐색을 제거하여 백업의 필요성을 제거했습니다. 대신 모든 문서와 도구가 사용자에게 전달되었습니다. 브라우저와 iOS는 사람들이 모달 화면으로 이어지는 전환의 미로를 헤매던 초기 탐색 인터페이스에서 파생된 것입니다.

인터넷 탐색 시스템을 지원하는 브라우저는 사용자가 여행의 과거 단계로 돌아갈 수 있도록 뒤로 버튼을 제공합니다. IOS는 그런 일반적인 도구를 제공하지 않으므로 예를 들어 앱 내에서 실수로 링크를 클릭하면 탈출 경로를 제공하지 않고 Safari나 Youtube 또는 다른 곳으로 안내합니다. 뒤로 및 앞으로 버튼은 인터페이스가 우발적인 전환에 대해 사용자를 용서하고 처벌하지 않도록 iOS에서 표준이어야 합니다.

일관성

대부분의 현대 사용자는 여러 장치를 가지고 있지만 이러한 작업은 다양한 가제트종종 겹칩니다. 같은 기기 내에서도 Apple은 일관성을 깨는 데 성공했습니다. iPhone을 회전하면 키보드 레이아웃이 변경되고, iPad를 회전하면 홈 화면의 아이콘이 예측할 수 없는 방식으로 재배열됩니다.

일관성은 여전히 ​​지침에 나열되어 있지만 이 원칙은 거의 준수되지 않습니다. Magic Mouse는 트랙패드와 다르게 작동하며 컨트롤은 iPhone 또는 태블릿에서 사용되는 제스처와 다릅니다. 왜요? 이러한 모순은 일반적으로 디자이너가 동료와 아이디어를 교환하지 않고 고립되어 작업할 때 나타납니다.

성장 촉진

좋은 디자인은 사람들이 기본을 마스터하는 즉시 새롭고 더 도전적인 작업을 수행하여 배우고 성장하도록 장려합니다. Snapshot 애호가는 사진 작가가 되기 위해 진화하고, 블로그 작가는 블로거가 되며, 아이들은 프로그래밍에 손을 대고 궁극적으로 컴퓨터 공학 분야에서 경력을 쌓기 위해 노력합니다. 수십 년 동안 Apple의 고무적인 성장 필수 원칙사용자가 항상 받아 들인 것입니다.

친애하는 독자 여러분 안녕하세요! 웹 디자인과 웹 개발은 매우 빠르게 발전하고 있습니다. 매일 우리는 온라인 생활을 보다 생산적이고 편리하게 만드는 애플리케이션이나 새로운 서비스 등 점점 더 많은 신제품을 보게 됩니다. 그리고 웹 디자인은 "아티스트"(디자이너)의 재능과 기술에 의해서만 제한되는 무한한 공간입니다. 그럼 오늘 이야기를 하자면 더 적은 CSS 스타일 작성을 단순화하는 동적 스타일 마크업 언어입니다.

LESS란 무엇입니까?

LESS는 CSS 추가 기능입니다. 이는 모든 CSS 코드가 LESS 유효하지만 추가 LESS 요소는 다음에서 작동하지 않음을 의미합니다. 간단한 CSS암호. 기존 CSS가 이미 실행 가능한 LESS 코드이므로 새로운 기술에 진입하기 위한 문턱을 낮춥니다.

LESS는 많은 유용한 동적 속성을 추가합니다. 변수, 연산, 요소 및 믹스인을 소개합니다. 스타일시트를 모듈식으로 작성하는 기능은 많은 번거로움을 덜어줍니다.

LESS를 사용하면 스타일을 훨씬 쉽게 작성할 수 있습니다. 예를 들어, 믹스인을 사용하여 인수를 취할 수 있는 함수와 같은 것을 만듭니다. 믹신- 속성 중 하나의 값으로 클래스 이름을 포함하기만 하면 클래스의 모든 속성을 다른 클래스에 포함할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11

둥근 모서리(@radius: 5px)(
경계 반경: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
#헤더 (
.둥근 모서리;
}
#바닥글(
.둥근 모서리(10px);
}

컴파일된 CSS는 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10

#헤더 (
테두리 반경: 5px;
-웹킷 테두리 반경: 5px;
-moz-border-radius: 5px;
}
#바닥글(
테두리 반경: 10px;
-웹킷 테두리 반경: 10px;
-moz-border-radius: 10px;
}


prefix-free.js 라이브러리를 다운로드하고 index.html에 연결합니다.

< script src= "prefix-free.js" type= "text/javascript" >

이렇게 하면 준비가 완료되고 Apple.com 스타일의 메뉴 만들기로 바로 진행됩니다.

HTML 마크업

메뉴 마크업은 매우 간단합니다. 메뉴는 순서가 없는 목록을 기준으로 만들어집니다. HTML 편집기를 열고 다음 코드를 붙여넣습니다.

1
2
3
4
5
6
7
8
9

적은 스타일

이 섹션에서는 LESS 언어로 메뉴 코드를 작성하기 시작합니다. 쓰기와 LESS 구문 모두에서 프로그래밍을 처음 접하는 사람들을 위해 걱정하지 마십시오. 명확하게 하기 위해 모든 것을 선반에 올려 놓을 것입니다. 아마도 누군가는 이 사이트 스타일 작성 방식을 좋아할 것입니다. 왜냐하면 그것이 실제로 더 생산적이기 때문입니다.

메뉴가 어떤 구성 요소로 구성되는지 살펴보겠습니다.

위의 스크린샷에서 볼 수 있듯이 Apple.com 탐색에는 다음과 같은 6가지 주요 부분이 있습니다.

  • 그림자가 사용됩니다.
  • 국경;
  • 메뉴 항목 사이의 구분 기호;
  • 배경의 그라디언트.
  • 마우스 호버에 대한 흐림 효과;
  • 메뉴 텍스트입니다.

작성된 스타일을 사용하는 두 가지 방법이 있습니다.

  • 결정적 시기

중요한:첫 번째 방법을 사용할 때 less.js 라이브러리가 연결되기 전에 styles.less가 연결되도록! 연결하는 것도 기억해야 합니다. 접두사 없는.
따라서 스타일의 연결은 다음과 같습니다.

1
2
3
4
5


이 공유
저작권 2021. shongames.ru. 기계적 인조 인간. 운영 체제. 멀티미디어. 소셜 네트워크. 악기. 코덱. 제도법. 판권 소유.