웹 페이지 모형을 디자인하기위한 표준 너비가 있습니까?
예 아니요 어쩌면?
옛날 옛적에 (아래 참조) 웹 디자인은 대부분의 화면에 합리적으로 맞는 단일 뷰를 만들려고 시도했습니다. 지난 5 년 동안, RWD (Responsive Web Design)의 채택으로이 기능이 크게 변경되었습니다.
RWD는 장치의 크기에 관계없이 모든 장치 에 합리적으로 잘 맞도록 디자인하는 디자인 원칙입니다 .
웹 개발에서 미디어 쿼리는 종종 여러 가지 요소에 따라 웹 페이지에 다양한 스타일 세트를 적용하는 데 사용됩니다. 몇 가지 일반적인 요소는 다음과 같습니다.
- 현재 화면 너비
- 현재 화면 높이
- 장치 폭
- 장치 높이
- 장치 방향
스타일은 특정 화면 크기를 대상으로 할 수 있으므로 특정 범위를 대상으로하는 여러 디자인 모음을 만드는 것은 드문 일이 아닙니다.
명확하게하기 위해, "표준"이 설정되어 있지 않습니다. "디자이너는 이러한 사이징 지침에 따라 디자인을 만들어야합니다"라고 말하는 관리 기관이나 조직은 없습니다.
그러나 웹 개발 산업은 유기적으로 반복적으로 발생하는 일련의 일반적인 중단 점을 생각해 냈습니다.
일반적인 중단 점은 현재 화면 너비에 대한 것이며 일반적으로 다음과 같습니다.
단위 px
- 320
- 480
- 768
- 1024
- 1200
- 1600 년
이 특정 숫자의 이유는 꽤 평범합니다. 오리지널 아이폰의 화면 크기는 320 × 480입니다. 오리지널 iPad의 화면 크기는 768 × 1024입니다. 1600x1200은 더 큰 화면 해상도에 일반적입니다.
이러한 중단 점 중 일부 또는 전부에서 목업을 보는 것이 일반적이지만 중간 디자인 변곡점을 보여주는 특정 페이지를 여러 번 렌더링해야하는 것도 일반적입니다.
너비가 768 픽셀 인 누적 항목을 표시하는 유동 너비 구성 요소에는 항목이 두 개의 열로 전환 된 900 픽셀에 대한 디자인이 포함되어야합니다. 이러한 중개 중단 점에 대해 많은 디자인 세트를 제공해야하는 경우, 모형에 나머지 페이지를 포함시키지 않고 개별 구성 요소를 설계하고 구성 요소별로 구성 요소가 변경되는 중단 점을 표시하는 것이 좋습니다.
또한 특정 UI 구성 요소가 누락되거나 중단 점 사이에 일치하지 않는 일반적인 디자인 함정을 피하는 데 도움이됩니다.
다음은 후손을 위해 유지하고있는이 답변의 이전 버전이지만 얼마 동안 관련이 없었습니다.
아무도 아직 이것을 언급하지 않은 것에 놀랐습니다.
구글은 멋진 개발 도구를 가지고 있습니다
귀하의 질문에만 대답하십시오.
현재 동향에 대한 몇 가지 메모가 있습니다.
현재 대다수의 사용자는 1024x600 (태블릿 / 넷북) 이상의 해상도를 가지고 있습니다. 당신은 24px스크롤 막대 를 제거해야한다는 것을 기억해야합니다 . 높이에 관해서 : 웹 사용자는 마우스의 스크롤 휠에 익숙해 져 세로 스크롤에 매우 능숙합니다. 초기 높이는 주로 첫인상에 중요합니다.
사용자는 가로로 스크롤하는 데 능숙하지 않으므로 레이아웃을 1000px보다 크게 만드는 것은 권장되지 않습니다.
또한 더 큰 화면을 가진 많은 사용자 는 웹 브라우저에 전체 화면 을 사용하지 않습니다 . 특히 Windows 7에는 간단한 끌어서 놓기 기능이 포함되어있어 화면 절반에 창을 놓을 수 있습니다.
요약해서 말하자면:
- 1000px 이상의 정적 너비를 피하십시오
- 1024x600에서 첫인상이 멋지게 보이도록하십시오
- 주름 아래에 내용물을 떨어 뜨리는 것을 두려워하지 마십시오.