인레이

2010. 10. 26. 17:16개인/글

http://kr.my.yahoo.com/


대화상자 인레이

페이지 일부분을 확장하고, 그 안에 대화상자를 보여주는 것.



ex)BBC(라지만 리뉴얼된듯 함..)

고려사항
- 오버레이로 대체도 가능하지만, 페이지 안에 삽입되는 인레이를 사용함으로서 페이지를 가리는 문제를 피할 수 있다.
  (그렇지만 이번 미투데이 개편에선 오버레이로 바뀜 왜일까?)

컨텍스트 내 인레이
- 페이지 안에서 바로 효과를 확인하면서 설정을 바꿀 수 있다.
   http://kr.my.yahoo.com/(페이지색상 변경도구)

목록 인레이
-인레이를 사용하기에 매우 적합한 곳이다. 필요할때까지 상세 정보를 숨겨 공간을 확보하고, 
  페이지에는 객괄적인 상위 정보를 더 나타내는 효과적인 방법이다.
ex)구글리더, 예시 참조

고려사항
-현재 콘텐츠에 집중할 수 있다.

아코디언:한 번에 하나씩 열기
-목록에서 한번에 한 항목씩 볼 수 있는 원리다.


아코디언:한 번에 여러 구획 보기
-병렬 콘텐츠
1. 상세 정보를 단계적으로 가려 불필요한 정보는 감춘다.
2. 전체보기 링크로 사용자가 숨은 콘텐츠를 볼 수 있도록 유도한다.
3. 자주 펼칠 필요가 없는 구획에 대해 요약 정보를 제공한다.
http://www.google.co.kr/ i google 좌메뉴

상세 정보 인레이
페이지에 있는 항목에 대해 추가 상세 정보를 제공하는 방식
http://www.google.co.kr/ i google 이미지 슬라이드 쇼

고려사항
- 부동산 사이트에서 주택에대한 섬네일을 제공함으로써 집에 대한 호기심을 자극한다

인레이와 오버레이 결합하기


콘텐츠를 페이지 내에 제공하여 사용자가 다른 곳으로 옮겨다니지 않고 한 페이지에 머물 수 있게 한다.

전통적인 방식의 탭


콘텐츠 탭
http://kr.my.yahoo.com/ (투데이 뉴스)

개인용 보조도구 탭
http://kr.my.yahoo.com/(관심서비스 바로가기)

인레이VS오버레이?
P.156

'개인 > ' 카테고리의 다른 글

이메일 레포트  (0) 2012.11.15
웹 접근성&웹 표준 완벽 가이드 부록 B  (0) 2012.02.21
시멘틱 마크업  (0) 2011.09.15
2011 디자인 레포트  (0) 2011.09.01
관계 디자인  (0) 2011.07.28