한 페이지 웹 사이트 디자인 유행에 어떤 변화가 있습니까?


10

나는 람, 한 페이지에 자신의 모든 콘텐츠를 넣어 웹 사이트의 유입 본적 이 사이트를 . Smashing Magazine에서 볼 수있는 일부 목록의 사이트 조차도이 작업을 수행합니다 ( 사이트는 백 사이트처럼 보이며 대부분이 사이트를 사용합니다).

프로그래머 로서이 스타일은 버그가 있습니다 (여러 가지 이유로 유지 보수, SEO, 로딩 시간 등을 포함하여 대부분 기술적이지는 않지만). 그러나 더 중요한 것은 왜 그것이 인기가 있었는지 궁금합니다. 처음부터 디자이너?


2
와! 나는 아직 그것을 보지 못했지만-나는 그것을 정말로 싫어합니다.
Farray

첫 번째 링크의 효과를 parralax 라고합니다 . 몇몇 사이트는 필연적으로 자신의 경우에 적합한 지 여부에 대해 생각하지 않고 "I WANT ONE OF THOSE"라고 말하는 많은 사람들에게 세련되게 (예 : 가장 유명한 Nike Better World ) 이어졌습니다. 다양한 주제에 걸쳐 많은 콘텐츠에 대해 고정 된 상단 읽기 순서가 합법적 인 경우가 있고 점프 링크 내비게이션 도구가 좋은 경우에는 효과가 있습니다.
user56reinstatemonica8

답변:


9

관련된 두 가지 추세가 있습니다.

첫 번째는 간단한 사이트를 갖는 경향입니다. 브로셔 사이트 인 경우 4 개의 별도 페이지가 필요하지 않을 수 있습니다. 하나의 스크롤 페이지가 사용, 탐색 및 유지 관리가 더 쉽습니다. 많은 iPhone 앱 사이트가이 모델을 사용합니다. 많은 소기업도 마찬가지입니다. 많은 사이트에서이 혜택을 누릴 수 있습니다.

또 다른 추세는 Flash 개발자가 마침내 HTML, jQuery 및 AJAX를 발견하고 여전히 기존의 Flash 모델 인 '하나의 파일 = 하나의 사이트'를 생각하고 있다는 것입니다. 이는 한 페이지의 데이터 / 상호 작용으로 압축 된 콘텐츠가 많은 대규모 사이트라는 점에서 첫 번째 추세와 다릅니다. 알다시피,이 방법에는 올바른 코드로 극복 할 수는 있지만 모든 종류의 단점이 있습니다 (URL 변경 / 북마크 가능, Google은 콘텐츠를 탐색 할 수 있으며로드 시간은 AJAX를 통해 관리되는 등).


3

한 페이지 사이트의 가장 좋은 아이디어 중 하나는 더 많은 이야기 가 있다는 것입니다. 내가 생각할 수있는 가장 좋은 예는 이 페이지입니다 : 참여 / 결혼식 초대 사이트. 이것은 놀라운 사이트이며 여러 가지 이유로 작동합니다. 하나는 모든 것이 잘 어울립니다. 일련의 페이지에 걸쳐 동일한 영향을 미치지는 않습니다.

원래 IE9를 과시하기 위해 만들어진데모스토리 텔링 에 관한 것 입니다. 그림책과 거의 같지만 페이지를 넘기는 대신 스크롤합니다. 그리고 그것 때문에 정말 매끄럽고 시원합니다. 비즈니스 사이트를 만드는 데 실제로 실용적이지는 않지만 한 페이지 분위기가 유용한 이유 중 하나를 강조합니다.

또한 내용이 많지 않은 작은 페이지 에서도 작동 합니다 . 결혼했을 때 한 페이지 사이트에 모든 정보가 담겨 있었기 때문에 한 페이지에서 다른 페이지로 이동하는 데 필요한 콘텐츠가 충분하지 않았습니다. 한 페이지 사이트를 구축하고 유지하는 것이 더 쉬웠으며로드 시간은 실제로 문제가되지 않았습니다.

비즈니스와 관련해서는 더 어려운 사례라고 생각합니다. Google이 Nexus 휴대 전화를 출시했을 때 기억에 남는 예라고 생각했습니다. 한 페이지 사이트에서했던 것입니다. 그들이 태블릿을 출시하고 Q를 발표 한 이후로 더 이상 그렇게 좋아하지 않으므로 연결할 수 없지만 모든 것을 한곳에서 보는 것이 정말 깔끔했습니다. 당신은 클릭을 감소 하고 만들 더 몰입 경험을 .

코딩 근육을 구부리거나 트렌드를 활용하려는 사람들의 사례를 많이 볼 수 있다고 생각합니다. 그러나 이것은 디자인 세계에서 항상 발생합니다. 사이트의 목적을 고려할 때 테이블에 보관하고 적절한 경우 사용하십시오!


2

이것에 대한 단점이 있습니다 (내가 생각할 수있는 것만!). Ctrl+를 사용하여 검색하려는 경우 F모든 내용이 한 페이지에 있으므로 한 번에 전체 웹 사이트를 검색 할 수 있습니다 (내용을 검색 할 수 있다고 가정) .

나는 그것이 "사용자가 더 많은 콘텐츠를 요구하지 말고 단지 그들에게 제공하라"는 개념에서 비롯된 것이라고 생각합니다. Google, Twitter 등과 같이 아래로 스크롤하면 더 많은 결과를 자동으로 제공합니다.

2008 년부터 " Aza Raskin의 GoogleTech 강연에서 "클릭하지 마십시오 "를 볼 가치가 있습니다.

전체 대화는 매우 흥미롭지 만 여기 관련된 비트는 29 분에 시작됩니다. 여기에서 그는 Firefox를 해킹하여 모든 브라우저 탭을 하나의 연속 세로 스크롤 페이지로 가져옵니다.

이것이 현재보고있는 것의 전조인지 궁금합니다.


1

두 단어 : 사용자 경험.

기본 포트폴리오 사이트에서는 사용자가 여러 페이지를 클릭하여 내용이 단순하고 간단 할 경우 제공해야하는 내용을 볼 필요가 없습니다.

더 구체적으로 말하면, 행동 유도는 단수입니다. 사이트의 목표가 "나를 고용하십시오"인 경우 사이트 맵이 불필요하게 복잡 할 때 사이트가 비생산적 일 수 있습니다.

편집 : 아래 몇 가지 예 ...

http://joelglovier.com/

http://pixelightcreative.com/

http://www.tinybigstudio.com/

http://www.charleselena.com.au/

http://joshhemsley.com/

http://www.digitallabs.tv/


2
나는 그들 모두가 아래로 스크롤 할 수 있다면 이것에 더 동의 할 것이지만, 그것은 일반적인 기능이나 의도가 아닙니다. 여러 스크롤이 옆으로 움직이고, 많은 스크롤이 스크롤 가능하다는 증거를 보이지 않으며 실제로 는 여러 페이지처럼 보이 도록 설계되어 이론을 창 밖으로 내 보냅니다.
Shauna

Shauna, 나는 가로 스크롤 사이트에 익숙하지만 나는 당신이 언급하는 다른 사이트에 익숙하지 않다. 그러나 나는 당신이 내 머리 꼭대기에서 이야기하고있는 사람들 중 6 명을 지적 할 수 있습니다. (위의 편집 참조)
Joel Glovier

1

SEO 관점에서 한 페이지 웹 사이트 디자인은 유행이다.

특히 경쟁이 치열한 비즈니스 배경에서 작업 할 때 SEO 성능을 저하시킬 수 있습니다. 나는 그래픽 디자이너가 이것을 거의 고려하지 않는다는 것을 알고 있으며, 반면에 클라이언트는 SEO에 대한 지식이 충분하지 않지만 SEO 전문가에게 물어 보면 같은 말을 할 것입니다.

내 팁? SEO 전문가에게 키워드 조사를 요청하고 웹 사이트 구조에 대한 개요를 제공하십시오.

Search Engine Land에서 더 많은 것을 읽을 수 있습니다.이 사람들은 SEO를 잘 알고 있습니다.) https://searchengineland.com/single-page-websites-seo-182506


0

평균적인 짧은 주목 범위의 뷰어가 머무르는 귀중하고 귀중한 영역 인 모든 것을 "접은 곳의 위쪽"으로 가져 오려는 시도 인 것 같습니다. 다양한 유용성 연구에 따르면 사람들은 "중요한"것을 거기에 두려고합니다. 이 디자이너는 "모든 것이 중요하다"고 생각한 것 같습니다.


나를 방해하는 것은 내가 본 사이트의 수입니다. 여기에 내가 나는 그들이 있었기 때문에 아래 3 분의 1 정도의 길에 대해 그것을 포기, 언급 된 스매싱 매거진 목록 중 하나입니다 모두 그런를 : smashingmagazine.com/2011/04/19/...
쇼나

0

사람들이 웹 사이트를 읽도록하기 위해 최신의 눈길을 끄는 트릭을 사용하는 것 이상이라고 생각하지 않습니다.

예를 들어 @Shauna의 링크 된 기사에있는 Nike 사이트를 생각해보십시오. 솔직히 달리기 신발 디자인과 같은 운동화 광고에 많은 혁신이 남아 있습니까? 이 컨텐츠는 시차를 원하는 경우 브로셔 나 Flash에 쉽게 배치 할 수 있습니다. 대신 Flash의 부담 없이 새로운 탐색 체계의 결과로 멋진 시차 효과를 추가 할 수 있습니다 .

Smashing Magazine 웹 사이트에 표시된 사이트를 생성하는 방법을 보여주는 HTML5 / CSS 자습서가 있다고 생각하기까지합니다.


downvote? 그래, 그건 공평 했어 내 최고의 답변 중 하나가 아닙니다. 글을 쓸 때 조금 펀치 스러웠습니다.
Philip Regan

어깨를 으 I 하다이 사이트에서 공감할만큼 충분한 담당자가 없기 때문에 나는 그렇지 않았다.
Shauna

나는 당신이 좋은 곳에서 오는 것처럼 보이기 때문에 그것을 취소하는 공감대를주었습니다.)
thomasrutter

0

실제로 연결 한 첫 번째 항목 (드리프트 바)에는 멋진 요소가 있다고 생각합니다.

메뉴 링크 중 하나를 실제로 클릭 할 때까지는 의미가 없었습니다. 이제 애니메이션이 전체 아이디어의 단일 원동력이라는 것을 알았습니다. 오래된 뽀빠이 또는 디즈니 만화와 같은 오래된 학교 3 비행기 카메라 효과입니다.

해당 페이지의 스크롤 가능성은 실수이거나 제거 할 수없는 기능이라고 생각합니다.


0

한 가지 문제는 고객들에게 인기가 있다는 것입니다! 이 사이트는 새로 출시 된 제품에 대한 플래시 마이크로 사이트 시대로 거슬러 올라갑니다. 시차는 현재이 작업을 수행하고있는 것 같습니다. 제품 마이크로 사이트의 경우 실제로는 만족스럽고 실제로 콘텐츠가있는 사이트의 경우 적합하지 않습니다. 또 다른 문제는 디자이너들이 최신 유행을 보여주는 경향이 있으며 인기있는 새로운 유행 기술로 웹 사이트를 갖는 것이 유익 해 보일 수 있다는 것입니다. 위의 모든 것은 비슷한 사이트에서 인터넷을 다루고 있습니다.


0

제목에서 귀하의 질문에 거의 답변했다고 생각합니다. 즉, 유행입니다.

몇 년 전에 Javascript (그리고 AJAX)가 나타 났고 사람들이 모든 종류의 멋진 작업을 수행했을 때와 마찬가지로 Jquery와 CSS 2/3에 대한 지원이 개선되었으며 브라우저에서의 렌더링 속도가 향상되어 새로운 방식으로 완전히 새로운 실험이 시작되었습니다. 오래된 브라우저로 인해 과거에는 실용적이지 않은 사이트를 배치하는 것입니다.

그러나 CSS, Javascript 및 AJAX와 마찬가지로 유행은 성숙하고 부드러워지며 시간이 지남에 따라 더 연마되고 즐겁고 유용 해집니다. 첫 번째 예 는 미친 듯이 분리 된 스크롤링으로 두통을 유발하는 것입니다 ( 예를 들어 시작시 "갤러리"를 누르면). 나의 겸손한 견해로는 그것이 너무 멀리 가고 정상과의 이별을 정당화하기에 충분한 경험이 아닙니다. 이것은 유사한 기술을 사용하는 모든 사이트가 나쁘다는 것을 의미하지는 않습니다.

디자이너가 새로운 기술로 새로운 일을하는 방법을 실험하는 것이 중요합니다. 나는 이것이 결코 시도되어서는 안된다고 잠시 제안하지 않을 것이다. 그러나 그것은 실험적입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.