Douban 웹사이트 디자인에서 웹사이트 재구성에 대해 이야기하기_CSS/HTML

douban.com은 div+css를 매우 교묘하게 적용하고 색상 사용, 사진 최소화 등을 통해 웹사이트 페이지를 신선하고 쾌적하게 만들 뿐만 아니라 웹페이지 크기를 최대한 압축합니다. 따라서 액세스 효율성이 극대화됩니다.

처음 douban.com을 읽었을 때 마치 '독서' 잡지를 손에 들고 읽는 듯한 느낌이 들었습니다. 매우 우아하고 약간 책 같은 느낌이 나는 것 같았습니다. 우리 모두는 중국식 웹사이트에서 강간당하는 데 익숙하며, 이것이 웹사이트이고 그래야만 한다고 생각합니다. 의심할 여지 없이 많은 사람들이 douban.com을 처음 볼 때 그의 웹사이트의 단순함에 감동을 받을 것입니다. , 그리고 그들의 눈은 빛날 것입니다! 왜 그럴까요? douban.com의 웹사이트 디자인을 살펴보고 그가 어떻게 하는지 살펴보겠습니다.

1. div+css 페이지 기술을 사용합니다. "웹사이트 재구성"이라는 책이 번역된 이후로 이 레이아웃 방법은 사람들의 마음 속에 깊이 뿌리내리기 시작했습니다. 말할 수 있는 이점은 많지 않습니다. org에서 자세히 알아보세요). 그러나 web2.0의 필수 요소라고 할 수 있습니다.

2. 컬러 블록 배경을 사용하여 전체 내용을 강조합니다. 중요한 색상은 연한 분홍색, 연한 파란색, 흰색 배경으로 매우 산뜻합니다.

3. douban.com의 핵심은 책, 음악, 영화 및 사용자(그룹)이며 모두 썸네일을 사용하며 사용자(그룹)의 썸네일은 더 작습니다. 처음 3개의 인터넷 사진은 일반적으로 더 보기 좋고 더 커야 합니다. 후자는 업로드하여 더 작은 사진으로 디자인하면 사진이 더 좋아 보일 수 있습니다.

4. 위 내용 외에도 두반은 사진에 인색한 경우가 거의 없습니다. 이용자는 댓글이나 게시물을 게시하는 경우에도 사진을 게시할 수 없습니다. 이것의 이점은 매우 분명합니다. 사용자는 텍스트에 집중할 수 있고 그림은 웹 사이트의 핵심과 관련되어 관련 없는 내용을 생성하지 않습니다. 게다가 웹사이트 접속 속도도 매우 빠르다.

5. 어떤 페이지든 동일한 레이아웃이 사용됩니다. 레이아웃은 상단-중간-하단 접근 방식을 채택합니다. 상단은 탐색이고, 중간은 2열 형식으로, 왼쪽에는 페이지의 핵심 콘텐츠가 있고, 오른쪽에는 보조 및 관련 기능과 정보가 있으며, 아래에는 사이트 탐색이 있습니다. 모든 내비게이션에도 사진이 없습니다.

6. Douban은 스타일 시트를 독창적으로 사용합니다. 링크 선택은 진한 파란색으로 강조 표시되고, 클릭은 주황색으로 강조 표시되고, 삭제는 진한 빨간색으로 강조 표시되며, 책/음악/영화는 진한 빨간색으로 강조 표시됩니다. 설명 및 사이트 북마크 아이콘은 녹색, 추천 별은 빨간색, 나머지는 영원한 검정색입니다. 전체 색상 팔레트는 녹색뿐만 아니라 파란색과 빨간색 음영을 중심으로 진행됩니다. 두반의 로고와 잘 어울리고 코디가 참 잘 되더라구요.

7. 버튼을 거의 사용하지 않는데 버튼이 너무 적기 때문에 다 사용하지 않는 것이 낫다고 판단했습니다!

8. Douban의 페이지 길이는 매우 짧습니다. 보통 2페이지에서 3페이지를 넘지 않습니다. 나는 페이지가 너무 길면 사용자를 초조하게 만들 수 있으므로 2~3페이지가 최선의 선택이라고 항상 믿어왔습니다. 이렇게 긴 페이지가 있는 이유는 포털 웹사이트가 더 많은 광고 위치를 원하기 때문입니다. 모든 웹사이트에 이것이 필요한 것은 아닙니다.

9. 광고, Douban은 화려한 광고 공간을 제공하지 않는다는 점에서 다른 웹 사이트와 다릅니다. 현재는 Google 텍스트 광고와 "독서" 및 "독자"에 대한 텍스트 광고만 제공할 것으로 생각됩니다. 앞으로는 기존의 사진과 플래시 광고가 제공된다면 사이트 전체가 바뀔 것입니다.

10. 팝업 창을 사용하지 마세요. 처음에는 익숙하지 않았습니다. 나중에 조사해 보니 웹 사이트의 청중이 대부분 독서, 음악을 좋아하는 사람들이라는 것을 알았습니다. , 영화 등을 감상할 수 있으므로 사용자가 최대한 경로를 따라가도록 하는 것이 좋습니다. 그러므로 팝업창이 없는 것에 익숙하지 않은 분들은 실제로 두반에 오랫동안 정착하지 못할 수도 있고, 더우반의 핵심 사용자가 될 수도 없을 것이라고 생각합니다.

일반적으로 douban.com은 div+css를 매우 능숙하게 사용하며 색상 사용, 사진 최소화 등을 통해 웹 사이트 페이지를 신선하고 쾌적하게 만들 뿐만 아니라 웹 페이지를 최대한 압축합니다. .크기로 인해 액세스 효율성이 극대화됩니다. 페이지에 정크 정보가 거의 없기 때문에 Google 검색은 매우 효율적이며, 각 페이지의 관련성은 전체 사이트를 검색 로봇에게 매우 친숙하게 만듭니다. UI 레이아웃 측면에서 전체 웹사이트는 통일된 레이아웃을 갖고 있어 사용하기 매우 쉽고 사용자가 길을 잃기 쉽지 않습니다. Douban의 UI 철학은 Python을 사용하는 개발자와도 관련이 있을 수 있다고 생각합니다. Python은 들여쓰기를 통한 기능적 논리의 빠른 배열과 Python 자체의 단순성이 결합되어 매우 간단하고 명확합니다. 이런 관점에서 Douban의 레이아웃은 Python 프로그램의 배열로 볼 수 있고, Douban의 철학은 Python의 철학으로도 볼 수 있습니다.

도우반 웹사이트 스타일이 어떤 장르에 속하는지 따진다면, 도우반은 구글의 미니멀리스트 스타일에 속해야 한다고 생각합니다. 물론 카피라고는 할 수 없죠! 지난 2년간 유럽과 미국에서 카피한 커머셜 스타일은 마치 큰 컬러 블록, 큰 그림, 큰 그림이 있는 한국의 플래시 템플릿을 복사하는 것과 같습니다. Google의 단순함에는 단순성(페이지 탐색을 포함한 충분한 기능), 사용 용이성(간단한 상호작용 및 UI로 시작), 배려심(사용자 심리에 가깝습니다), 집중(비즈니스 자체에 기반함)이라는 네 가지 핵심 요소가 있다고 생각합니다. 이를 바탕으로 자신의 웹사이트 산업 특성을 더하면 국내 웹2.0 웹사이트 재구축의 가능성이 있다는 뜻일까요?