Cheese Components Design basic+ v1.1

Cheese!
[H9] Framework
Component Design Basic+
Version 1.2
2010-10-22

© 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가능하도록 구조 제공

기존의 기본 component 스타일은
이미지를 주로 사용하여, 코드의 변경으로 디자인의 변경이 불가하였다.
App의 내용에 맞는 컬러와 디자인은 Identity를 위해서 중요하니 만큼,
기본으로 제공되어지는 Components의 실 사용 빈도는 낮을 것으로 예상되었다.
이에,
기본의 Basic에서 한 단계 나아가,
이미지가 아닌 코드로 제공되는 범위를 확대하여,
간단한 코드 변경만으로도 새로운 Theme를 구현할 수 있도록 하는 Basic+ Component를 제공하고자 한다.
Component Design Basic+
Intro.

1. Basic Component구조를 하나로 통합하여 제공.
옵션을 통하여 각각의 Component 속성 조절 가능
< Structure example>
Scene BG
이미지
Glow List
옵션.
(생략 시 Flat한 화면)
List line Title BG
image
옵션.
(생략 시 Flat한 화면)
Title glow Text
+ + + + +
옵션.
(이미지 변경 가능)
옵션.
(이미지 변경 가능)
옵션.
(폰트 컬러 변경 가능)
Cheese basic component

Cheese Theme
+ simple optimized
Cheese Framework
Main Target:
일반 개발자
일반 개발자들을 위해 이미 만들어져
있는 Theme중 선택 가능하도록 한다.
Main Target:
내부 개발자
간단한 코드 수정으로, CP의 요구사
항을 충족시킬 수 있는 개발환경을 만
들어 준다.
Main Target:
디자이너
원하는 디자인의 반영이 가능하도록
지원해주는 Framework를 제공한다.
Optimized
Cheese에서 제공하는
기본 Theme type중 선택
+원하는 부분 변경 가능
각각의 컴포넌트 디자인 상세 변경 가능
2. 아래와 같이, 크게 두 가지 방향으로 사용자에게 제공,
상황에 맞는 활용 가능

1. 다양한 기본 Theme중 선택 (8개의 기본 Theme제공예정)
*기본 Theme에 대해서는 기본구조가 동일하여,
디자인 변경 시 색과 이미지 속성만 지정하여 주면 되므로 지속적으로 업데이트 가능합니다.
2. 추가 디자인 변경 필요 시, 세부 사항 수정
ex)기본으로 Type3을 선택 후, CP요구사항으로 Title에 CP Logo를 넣어야 할 경우 Title영역만 추가 수정 가능하다.
Cheese Theme+ simple optimized
+
■ 동일한 구조에서 옵션을 변경하여 만든 다양한 Theme
Type1 Type2 Type3 Type4 Type5 Type6
추가예정

내부 디자인 및 CP요구사항 적극반영 가능
**세부 속성이 변경 가능한 구조로 되어 있기 때문에,
디자이너 및 CP에서 지정한 색상, 이미지에 대하여 적극 반영 가능하다.
각 Component 구성요소
변경 가능한 옵션 정의
Component
Component
변경 적용 예시
Optimized

Scene
component
BG
480X800px
Image
(Opacity)
원하는 이미지 사용,
해당 이미지의
opacity조정가능
Color 색상 변경가능
구성
example
■ BG이미지 변경시
■ BG color적용, Gradation제외, font color 변경

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 원하는 이미지 사용
가능
example
■ Image only
■ Gradation제외, font color 변경
■ Image적용, Gradation제외
구성
■ Image only, Title Shape_round

Tab_Style1: icon+Text
component
Text
24pt
Focused Text Font color 색상 변경가능
않을 수 있음
Icon
52x52 px
Image 이미지 변경 가능
Opacity 투명도 조정 가능
More Tab image Color Tab의 개수에 따라
이미지 사용
색상 변경 가능
Divider line Opacity 투명도 조정 가능
Number 개수 조절 가능
Focused Tab BG Color 색상 변경가능
Tab BG
480X100px
Image
(image opacity)
원하는 이미지 사용
가능, 해당 이미지 투
명도 조정가능
example
구성
4개이상
4개
3개
2개
■ Gradation제외, Tab BG 컬러 변경

Tab_Style2: Text only
component 구성
Text
26pt
Focused Text Font color 색상 변경가능
않을 수 있음
More Tab image Color Tab의 개수에 따라
이미지 사용
색상 변경 가능
Divider line Opacity 투명도 조정 가능
Number 개수 조절 가능
Focused Tab BG Color 색상 변경가능
Tab BG
480X80px
가능
*Tab의 갯수에 따른 정책은 앞 장과 동일

Page Control
component
Text
34pt
않을 수 있음
Arrow icon Color 색상 변경가능
Page control BG
480X48px
Shadow 6px
가능
example
구성
■ BG color변경
■ BG, font, arrow icon color 변경
Gradation제외

Sub Title
component
example
■ BG color변경
■ font color 변경
구성
Text
Large: 30pt
Normal:28pt
Small: 32pt
Title BG
480X40px

List: Text only_1line, 2line
component
Text
38pt
Sub Text
30pt
Line
1px
( list높이: 106px)
color Black/ white
None line 사용하지 않을
수 있음
List Gradation 고정 Image Cheese제공 이미지
않을 수 있음
example
구성

List: Text only_3line
component
Text
36pt
Sub Text
26pt
Line
1px
color Black/ white
수 있음
List Gradation 고정 Image Cheese제공 이미지
않을 수 있음
example
구성

List: Effect
구성
Focused Text
Font size는 list와 동
일한 사이즈를 사용
한다.
Focused Gradation 고정 Image Gradation사용하지
않을 수 있음
None
Focused color color 색상 변경가능
component
example
■ Gradation사용하지 않음
■ Focused color변경

List: Icon+Text
component
List와 동일한 구성+Icon추가
Icon
52x52 px
Image 아이콘 이미지 변경
가능
example
■ Icon Image변경
구성

List: Image+Text
component
example
■ 이미지 Size변경
구성
List와 동일한 구성+Image추가
Image
2line Default:
80x80
3line Default:
108x108
Size 이미지 사이즈 변경
가능

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변경

Image: Effect
Effect
Overlay
Reflection
fade out
Image only
Outline
Round boundary
Shadow

Dialogue: Input
component
Item Text
30px
Input Text
34pt
Input Field Color 색상 변경가능
Outline color 색상 변경가능
Line
1px
color Black/ white
수 있음
example
■ Input field color, Input text color변경
구성
*위의 요소 이외의 기본구성은 List와 동일

Dialogue: Input: Effect
component
Input Text
34pt
Input Field Color 색상 변경가능
Outline color 색상 변경가능
구성
■ Normal
■ Press
■ Dim
■ Focus

Dialogue: Value Setting
component
example
■ Item Text color, Value Text color, Setting
icon color 변경
Item Text
30px
Value Text
38pt
Setting icon Color 색상 변경가능
Line
1px
color Black/ white
수 있음
구성
*위의 요소 이외의 기본구성은 List와 동일
*Press시 Effect는 List와 동일

Option_Style1
Back icon Color 색상 변경가능
Option Text Font color 색상 변경가능
Divider line Color 색상 변경가능
Option BG
35px,
Shadow: 위로 5px
구성component
1개
2개
3개
3개+

Option_Style2
component
Panel bar icon Color 색상 변경가능
Panel bar BG
35px,
Shadow: 위로 5px
Option Text
30pt
Divider line Color 색상 변경가능
Option BG
70px,
Shadow: 위로 5px
구성
1개
2개
2개+
6개

Button
component
Button Text
36pt
Gradation 고정 Image Gradation사용하지
않을 수 있음
None
Button Color 색상 변경가능
구성
example
■ Button, text color변경
■ Gradation제외

component
Button: Effect
구성
■ Normal
■ Press
■ Dim
Button Text
36pt
Gradation 고정 Image Gradation사용하지
않을 수 있음
None
Button Color 색상 변경가능
Press
Gradation만 적용시
Press
Color 함께 적용시

Checkbox
component 구성
Check mark Color 색상 변경가능
Checkbox outline Color 색상 변경가능
None
Checkbox 고정 Image Cheese제공 이미지example
■ check mark color변경

Radio Button
component
example
■ select color변경
구성
Select Color 색상 변경가능
Radio button
outline
None
Radio button 고정 Image Cheese제공 이미지

On/Off Button
component 구성
On Color 색상 변경가능
Off 고정 Image Cheese제공 이미지
component 구성
On 고정 Image Cheese제공 이미지
Off 고정 Image Cheese제공 이미지
■ Style1.
■ Style2.

Delete Button
component 구성
Delete button 고정 Image Cheese제공 이미지

Scroll
component 구성
Scroll Color 색상 변경가능

Pop up
component
Pop up Title Text
36pt
None
Pop up text 고정 Image Gradation사용하지
않을 수 있음
None
Pop up BG outline Color 색상 변경가능
Pop up BG
Shadow: 10px
구성
example

Busy indicator
component
Busy indicator
image
Image Cheese제공 이미지
중 선택
Pop up BG outline Color 색상 변경가능
Pop up BG
Shadow: 10px
구성
■ Style1.
■ Style2.
■ Style3.

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!

Cheese Components Design basic+ v1.1

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Cheese Components Design basic+ v1.1