Your SlideShare is downloading. ×
Cheese Components Design basic+ v1.1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cheese Components Design basic+ v1.1

601
views

Published on

Cheese Components Design basic+ v1.1

Cheese Components Design basic+ v1.1

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
601
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Cheese! [H9] Framework Component Design Basic+ Version 1.2 2010-10-22
  • 2. © 2010 H9 Design Co.,Ltd. All rights reserved History NO. Date Ver. File List 01 10.09.28 [H9]Framework_Components.pptx 02 10.10.07 1.0 [H9]Framework_Components design_basic+_V1.0_1007.pptx -Basic component가이드 분리 -Glow, Flat Style 의 두 가지로 Theme제공 03 10.10.22 1.1 [H9]Framework_Components design_basic+_v1.1_1022.pptx - Component 통합 (Glow, Flat Style반영) -기본 Cheese Theme제공, Optimized가능하도록 구조 제공
  • 3. © 2010 H9 Design Co.,Ltd. All rights reserved 기존의 기본 component 스타일은 이미지를 주로 사용하여, 코드의 변경으로 디자인의 변경이 불가하였다. App의 내용에 맞는 컬러와 디자인은 Identity를 위해서 중요하니 만큼, 기본으로 제공되어지는 Components의 실 사용 빈도는 낮을 것으로 예상되었다. 이에, 기본의 Basic에서 한 단계 나아가, 이미지가 아닌 코드로 제공되는 범위를 확대하여, 간단한 코드 변경만으로도 새로운 Theme를 구현할 수 있도록 하는 Basic+ Component를 제공하고자 한다. Component Design Basic+ Intro.
  • 4. © 2010 H9 Design Co.,Ltd. All rights reserved 1. Basic Component구조를 하나로 통합하여 제공. 옵션을 통하여 각각의 Component 속성 조절 가능 < Structure example> Scene BG 이미지 Glow List 옵션. (생략 시 Flat한 화면) List line Title BG image 옵션. (생략 시 Flat한 화면) Title glow Text + + + + + 옵션. (이미지 변경 가능) 옵션. (이미지 변경 가능) 옵션. (폰트 컬러 변경 가능) Cheese basic component
  • 5. © 2010 H9 Design Co.,Ltd. All rights reserved Cheese Theme + simple optimized Cheese Framework Main Target: 일반 개발자 일반 개발자들을 위해 이미 만들어져 있는 Theme중 선택 가능하도록 한다. Main Target: 내부 개발자 간단한 코드 수정으로, CP의 요구사 항을 충족시킬 수 있는 개발환경을 만 들어 준다. Main Target: 디자이너 원하는 디자인의 반영이 가능하도록 지원해주는 Framework를 제공한다. Optimized Cheese에서 제공하는 기본 Theme type중 선택 +원하는 부분 변경 가능 각각의 컴포넌트 디자인 상세 변경 가능 2. 아래와 같이, 크게 두 가지 방향으로 사용자에게 제공, 상황에 맞는 활용 가능 Cheese basic component
  • 6. © 2010 H9 Design Co.,Ltd. All rights reserved 1. 다양한 기본 Theme중 선택 (8개의 기본 Theme제공예정) *기본 Theme에 대해서는 기본구조가 동일하여, 디자인 변경 시 색과 이미지 속성만 지정하여 주면 되므로 지속적으로 업데이트 가능합니다. 2. 추가 디자인 변경 필요 시, 세부 사항 수정 ex)기본으로 Type3을 선택 후, CP요구사항으로 Title에 CP Logo를 넣어야 할 경우 Title영역만 추가 수정 가능하다. Cheese Theme+ simple optimized + ■ 동일한 구조에서 옵션을 변경하여 만든 다양한 Theme Type1 Type2 Type3 Type4 Type5 Type6 추가예정 Cheese basic component
  • 7. © 2010 H9 Design Co.,Ltd. All rights reserved 내부 디자인 및 CP요구사항 적극반영 가능 **세부 속성이 변경 가능한 구조로 되어 있기 때문에, 디자이너 및 CP에서 지정한 색상, 이미지에 대하여 적극 반영 가능하다. 각 Component 구성요소 변경 가능한 옵션 정의 Component Component 변경 적용 예시 Cheese basic component Optimized
  • 8. © 2010 H9 Design Co.,Ltd. All rights reserved Scene component BG 480X800px Image (Opacity) 원하는 이미지 사용, 해당 이미지의 opacity조정가능 Color 색상 변경가능 구성 example ■ BG이미지 변경시 ■ BG color적용, Gradation제외, font color 변경
  • 9. © 2010 H9 Design Co.,Ltd. All rights reserved Title component Text Large: 40pt Normal:36pt Small: 32pt Font color 색상 변경가능 None Text사용하지 않을 수 있음 Gradation 고정 Image Cheese제공 이미지 None Gradation사용하지 않을 수 있음 Pattern 고정 Image Cheese제공 이미지 None Pattern 사용하지 않 을 수 있음 Title Shape Square round Title BG 480X54px Shadow 6px Image 원하는 이미지 사용 가능 Color 색상 변경가능 example ■ Image only ■ Gradation제외, font color 변경 ■ Image적용, Gradation제외 구성 ■ Image only, Title Shape_round
  • 10. © 2010 H9 Design Co.,Ltd. All rights reserved Tab_Style1: icon+Text component Text 24pt Font color 색상 변경가능 Focused Text Font color 색상 변경가능 Gradation 고정 Image Cheese제공 이미지 None Gradation사용하지 않을 수 있음 Icon 52x52 px Image 이미지 변경 가능 Opacity 투명도 조정 가능 More Tab image Color Tab의 개수에 따라 이미지 사용 색상 변경 가능 Divider line Opacity 투명도 조정 가능 Number 개수 조절 가능 Focused Tab BG Color 색상 변경가능 Tab BG 480X100px Image (image opacity) 원하는 이미지 사용 가능, 해당 이미지 투 명도 조정가능 Color 색상 변경가능 example 구성 4개이상 4개 3개 2개 ■ Gradation제외, Tab BG 컬러 변경
  • 11. © 2010 H9 Design Co.,Ltd. All rights reserved Tab_Style2: Text only component 구성 Text 26pt Font color 색상 변경가능 Focused Text Font color 색상 변경가능 Gradation 고정 Image Cheese제공 이미지 None Gradation사용하지 않을 수 있음 More Tab image Color Tab의 개수에 따라 이미지 사용 색상 변경 가능 Divider line Opacity 투명도 조정 가능 Number 개수 조절 가능 Focused Tab BG Color 색상 변경가능 Tab BG 480X80px Image 원하는 이미지 사용 가능 Color 색상 변경가능 *Tab의 갯수에 따른 정책은 앞 장과 동일
  • 12. © 2010 H9 Design Co.,Ltd. All rights reserved Page Control component Text 34pt Font color 색상 변경가능 Gradation 고정 Image Cheese제공 이미지 None Gradation사용하지 않을 수 있음 Arrow icon Color 색상 변경가능 Page control BG 480X48px Shadow 6px Image 원하는 이미지 사용 가능 Color 색상 변경가능 example 구성 ■ BG color변경 ■ BG, font, arrow icon color 변경 Gradation제외
  • 13. © 2010 H9 Design Co.,Ltd. All rights reserved Sub Title component example ■ BG color변경 ■ font color 변경 구성 Text Large: 30pt Normal:28pt Small: 32pt Font color 색상 변경가능 Title BG 480X40px Color 색상 변경가능
  • 14. © 2010 H9 Design Co.,Ltd. All rights reserved List: Text only_1line, 2line component Text 38pt Font color 색상 변경가능 Sub Text 30pt Font color 색상 변경가능 Line 1px ( list높이: 106px) color Black/ white None line 사용하지 않을 수 있음 List Gradation 고정 Image Cheese제공 이미지 None Gradation사용하지 않을 수 있음 example ■ BG이미지 변경시 ■ BG color적용, Gradation제외, font color 변경 구성
  • 15. © 2010 H9 Design Co.,Ltd. All rights reserved List: Text only_3line component Text 36pt Font color 색상 변경가능 Sub Text 26pt Font color 색상 변경가능 Line 1px ( list높이: 130px) color Black/ white None line 사용하지 않을 수 있음 List Gradation 고정 Image Cheese제공 이미지 None Gradation사용하지 않을 수 있음 example 구성 ■ BG이미지 변경시 ■ BG color적용, Gradation제외, font color 변경
  • 16. © 2010 H9 Design Co.,Ltd. All rights reserved List: Effect 구성 Focused Text Font size는 list와 동 일한 사이즈를 사용 한다. Font color 색상 변경가능 Focused Gradation 고정 Image Gradation사용하지 않을 수 있음 None Focused color color 색상 변경가능 component example ■ Gradation사용하지 않음 ■ Focused color변경
  • 17. © 2010 H9 Design Co.,Ltd. All rights reserved List: Icon+Text component List와 동일한 구성+Icon추가 Icon 52x52 px Image 아이콘 이미지 변경 가능 example ■ Icon Image변경 구성
  • 18. © 2010 H9 Design Co.,Ltd. All rights reserved List: Image+Text component example ■ 이미지 Size변경 구성 List와 동일한 구성+Image추가 Image 2line Default: 80x80 3line Default: 108x108 Size 이미지 사이즈 변경 가능
  • 19. © 2010 H9 Design Co.,Ltd. All rights reserved List: Accordion component example 구성 List와 동일한 구성+ Accordion arrow color 색상 변경가능 Accordion Button color 색상 변경가능 Accordion text color 색상 변경가능 Accordion List line color 색상 변경가능 Accordion List BG color 색상 변경가능 opacity 투명도 조절 가능 ■ button, List color변경
  • 20. © 2010 H9 Design Co.,Ltd. All rights reserved Image: Effect Effect Overlay Reflection fade out Image only Outline Round boundary Shadow
  • 21. © 2010 H9 Design Co.,Ltd. All rights reserved Dialogue: Input component Item Text 30px Font color 색상 변경가능 Input Text 34pt Font color 색상 변경가능 Input Field Color 색상 변경가능 Outline color 색상 변경가능 Line 1px ( list높이: 115px) color Black/ white None line 사용하지 않을 수 있음 example ■ Input field color, Input text color변경 구성 *위의 요소 이외의 기본구성은 List와 동일
  • 22. © 2010 H9 Design Co.,Ltd. All rights reserved Dialogue: Input: Effect component Input Text 34pt Font color 색상 변경가능 Input Field Color 색상 변경가능 Outline color 색상 변경가능 구성 ■ Normal ■ Press ■ Dim ■ Focus
  • 23. © 2010 H9 Design Co.,Ltd. All rights reserved Dialogue: Value Setting component example ■ Item Text color, Value Text color, Setting icon color 변경 Item Text 30px Font color 색상 변경가능 Value Text 38pt Font color 색상 변경가능 Setting icon Color 색상 변경가능 Line 1px ( list높이: 115px) color Black/ white None line 사용하지 않을 수 있음 구성 *위의 요소 이외의 기본구성은 List와 동일 *Press시 Effect는 List와 동일
  • 24. © 2010 H9 Design Co.,Ltd. All rights reserved Option_Style1 Back icon Color 색상 변경가능 Option Text Font color 색상 변경가능 Divider line Color 색상 변경가능 Option BG 35px, Shadow: 위로 5px Color 색상 변경가능 구성component 1개 2개 3개 3개+
  • 25. © 2010 H9 Design Co.,Ltd. All rights reserved Option_Style2 component Panel bar icon Color 색상 변경가능 Panel bar BG 35px, Shadow: 위로 5px Color 색상 변경가능 Option Text 30pt Font color 색상 변경가능 Divider line Color 색상 변경가능 Option BG 70px, Shadow: 위로 5px Color 색상 변경가능 구성 1개 2개 2개+ 6개
  • 26. © 2010 H9 Design Co.,Ltd. All rights reserved Button component Button Text 36pt Font color 색상 변경가능 Gradation 고정 Image Gradation사용하지 않을 수 있음 None Button Color 색상 변경가능 구성 example ■ Button, text color변경 ■ Gradation제외
  • 27. © 2010 H9 Design Co.,Ltd. All rights reserved component Button: Effect 구성 ■ Normal ■ Press ■ Dim Button Text 36pt Font color 색상 변경가능 Gradation 고정 Image Gradation사용하지 않을 수 있음 None Button Color 색상 변경가능 Press Gradation만 적용시 Press Color 함께 적용시
  • 28. © 2010 H9 Design Co.,Ltd. All rights reserved Checkbox component 구성 Check mark Color 색상 변경가능 Checkbox outline Color 색상 변경가능 None Checkbox 고정 Image Cheese제공 이미지example ■ check mark color변경
  • 29. © 2010 H9 Design Co.,Ltd. All rights reserved Radio Button component example ■ select color변경 구성 Select Color 색상 변경가능 Radio button outline Color 색상 변경가능 None Radio button 고정 Image Cheese제공 이미지
  • 30. © 2010 H9 Design Co.,Ltd. All rights reserved On/Off Button component 구성 On Color 색상 변경가능 Off 고정 Image Cheese제공 이미지 component 구성 On 고정 Image Cheese제공 이미지 Off 고정 Image Cheese제공 이미지 ■ Style1. ■ Style2.
  • 31. © 2010 H9 Design Co.,Ltd. All rights reserved Delete Button component 구성 Delete button 고정 Image Cheese제공 이미지
  • 32. © 2010 H9 Design Co.,Ltd. All rights reserved Scroll component 구성 Scroll Color 색상 변경가능
  • 33. © 2010 H9 Design Co.,Ltd. All rights reserved Pop up component Pop up Title Text 36pt Font color 색상 변경가능 None Pop up text 고정 Image Gradation사용하지 않을 수 있음 None Pop up BG outline Color 색상 변경가능 Pop up BG Shadow: 10px Color 색상 변경가능 구성 example
  • 34. © 2010 H9 Design Co.,Ltd. All rights reserved Busy indicator component Busy indicator image Color 색상 변경가능 Image Cheese제공 이미지 중 선택 Pop up BG outline Color 색상 변경가능 Pop up BG Shadow: 10px Color 색상 변경가능 구성 ■ Style1. ■ Style2. ■ Style3.
  • 35. Address | Homepage | Phone | 2308 Dossier-Vit Bldg., 1328-7 Seocho-dong, Seocho-gu, Seoul 137-070, Korea. http://h9design.co.kr +82(0)2.521.0518 Thank you!

×