BBuzzArt_bobross_designGuide_android_0414

Size: px

Start display at page:

Download "BBuzzArt_bobross_designGuide_android_0414"

보현 음
7 years ago
Views:

1 Bobross Project Design Guide for Android prepared by Dong Ju Shin date of preparation

2 0 0 0 Rule / Color Home List Contents Profile Research Detail Upload Login Setting 0 Popup

3 Rule Color Android 디자인은 너비 0dp(Nexus X) 를 기반으로 작성 하위 해상도에 대한 디자인은 절충 (상단 status bar와 하단 탭 제외) 색상은 기본적으로 6가지 색상을 사용 Guideline에서는 HEX코드 대신 정해진 색상 이름을 사용 아이콘 및 버튼 이미지는 터치영역 및 배치의 용이함을 위해 여분의 공간을 포함해 제작 H = Height 0dp W = Width Ver = vertical align hor= horizental align White #ffffff Grey # Grey #aaa Grey #ddd DarkGrey #aaa Mint #0b9b Blue #88aff Red #ffcc beige #efefe xxhdpi icon 0 Rule / Color

4 HOME 상단 화면 레이어 구조 그라데이션 0dp 아이콘 및 텍스트 curator pick 딤-그라데이션 그라데이션 0dp curator pick 이미지 탭 # opacity 0% 그라데이션 정의 GNB Home 화면은 크게 상단의 curator pick화면과 하단의 keyword-discover-show 탭 화면으로 구성 # opacity 0% 0 Home

5 HOME object text -dp file (.png) size (dp) font(weight) size (dp) color. icn_lattice x. light 6 6. btn_search. icn_slide_active icn_slide_inactive. icn_slideup. btn_home_active btn_home_inactive 6. btn_feed_active btn_feed_inactive x x 0 x 0 x x. bold-italic. light-italic. bold. regular 6. regular mint grey 6 0 -dp radius : 8dp 8 0 center btn_upload_active btn_upload_inactive 8. btn_profile_active btn_profile_inactive 9. btn_setting_active btn_setting_inactive x x x 0% 각각의 리스트 스타일에 가이드 해놓음 0% 0% 0% 0% 0 Home

6 DISCOVER / SHOW object KEYWORD Brains are a bitch: Everyone has one (Except dead people of course), But not all of them work. Can I have yours? Mine seems to be temporarily Out of order. Nothing 0 0 grey opacity 0%. discover_image/show_frame Width : dp Height : 원본 비율에 따라 Max-height : 화면의 60% Min-height : 00dp. discover_caption_frame Width : dp Height : dp Weight : 0.dp Stroke color : grey object. keyword_image_frame Width : dp Height : 원본 비율에 따라 Max-height : 60dp Min-height : 00dp Radius : dp Dim layer : #000000(black) 0%. discover_video_frame text grey opacity 0% grey 0% opacity Dim layer. icn_videotype x dp. discover_writing_frame font(weight) size (dp) color. regualr height : dp fix Dim layer : grey 0% opacity 6. icn_writingtype x dp text Textbox height : 텍스트 줄 width : dp vertical _center font(weight) size (dp) color. italic. bold. regular grey grey 0 List

7 My feed - common / image type Writing type 8 object object name. Title Tab. btn_notification. myfeed_tab_top size (dp) H : 8 8 x 8 H :. Myfeed_writing_frame height : 0dp fix Dim layer : grey 0% opacity Weight : 0.dp. user_photo_small Stroke color : grey x myfeed_imagetype 6. btn_like_inactive btn_like_active. btn_feedback 게시물 간 간격 : 0dp text max H : 00dp min H : 00dp x x 0 0 text font(weight) size (dp) color. regular textbox height : 텍스트줄 width : dp vertical _center font(weight) size (dp) color. bold mint. bold grey. regular grey. italic grey. regular 0 grey 0 List

8 My feed - Feedback type 0 object name size (dp) 0. Myfeed_tab_top 다른 타입과 동일 x. icn_myfeed_feedback. myfeed feedback type image W : 화면 가로 전체 사이즈의 6% 가로 크기의 % H : 이미지 가로 사이즈의 %. myfeed feedback type caption W : 화면 가로 전체 사이즈의 % H : 번 이미지 세로 사이즈와 동일 6% (하단여백) 0 % text font(weight) size (dp) color. regualr. italic. bold grey grey grey 0 List

9 PROFILE 99 6 object name size (dp) 8. profile background image + dim layer : # / 0% H : profile user image default image : icn_user_default 8 x 8 0. about user. work/bookmark tab H : 6 H : 6 6. myfeed list 스타일과 동일 6 6 text font(weight) size (dp) color my feed list style. bold. bold 9 영역 내에서 수직수평 center align. bold. regular. regular grey 6. regular mint. regular grey 0 Profile

10 RESEARCH * Following / Follower 리스트나 Hot buzzler 리스트는 Person 리스트와 동일 스타일 Area. Search bar. Search-person bar. More bar. Title list Detail H : 8 H : H : dp / 터치 시, 새 창에서 표시 discover list style 과 동일 0 8 Object 0 Size (W x H) 6. btn_back_black. btn_clear. user_photo. btn_follow_active btn_follow_inactive. person_thumb_list 6. icn_more 8 x 8 8 x 8 0 x 0 8 x 8 0 x 0 x Line. line_search_input. line_search_section. line_search_content Size 0 x 00% x Color grey mint grey Text Font(weight) Size Color discover list style. regular. regular. bold. regular. bold grey grey grey grey grey 0 Research

11 DETAIL Area Detail. detail_tab bar. detail_content. detail_devider. detail_feedback. feedback_input_post H : 8 원본비율 유지 상단 #dadada H : dp 하단 #ebebeb H : dp 8 x 8 Object Size (W x H) 9 6. btn_back_black. btn_more. user_photo. btn_bookmark_active btn_bookmark_inactive. btn_like_large_active btn_like_large_inactive 6. btn_feedback_large. btn_feedbackaide 8 x 8 8 x 8 0 x 0 8 x 8 x 8 x 8 8 x Text Font(weight) Size Color. bold. italic. regular. regular. bold 6. regular. regular 8. regular 6 grey grey grey grey blue grey grey grey Detail

12 DETAIL - FeedbackAide FeedbackAide - step FeedbackAide - step FeedbackAide - step Object Size (W x H). icn_feedbackaide. btn_close. btn_scroll_up. btn_scroll_down 6 x 8 x 8 8 x 8 8 x Text Font(weight) Size Color. regular. regular. regular. regular grey grey grey blue FeedbackAide - generating FeedbackAide - complete 06 Detail

13 UPLOAD Area Detail. upload_expantion bar H : Object. btn_upload_image. btn_upload_video. btn_upload_writing. btn_upload_active Size (W x H) x x x x Text Font(weight) Size Color. regular grey 0 Upload

14 UPLOAD - IMAGE Area 9 항목과 항목 간의 간격 6 항목 제목과 입력창과의 간격 upload_tab bar. upload_selectimage. upload_input_active. upload_input_inactive. upload_input_note Object Detail H : 8 H : 80 color : #fff H : 0 stroke-color : grey weight : 0.dp H : 0 stroke-color : grey weight : 0.dp H : 8 stroke-color : grey/ weight : 0.dp Size (W x H) btn_close. btn_upload_image. btn_dropdown. btn_upload_confirm 8 x 8 8 x 8 0 x 0 0 x 8 radius : dp weight : 0.dp stroke -color : active - blue inactive - grey Text Font(weight) Size Color bold. regular. regular. bold. bold 6. regular. regular 8. regular 9. bold 0. bold 0 0 mint grey grey grey grey grey grey grey grey blue 0 Upload

15 UPLOAD - WRITING / VIDEO Area Detail. input_excerpt_writing. checkbox H : 80 0 x 0 inactive : grey active : blue Object Size (W x H). btn_select_bg_default. btn_select_bg_work. btn_check_active btn_check_inactive 0 x 0 0 x 0 0 x 0 0 x 0 이외부분은 upload_image 서식을 참고 0 Upload

16 LOGIN Area. backgrond Image. fb button box. rounding box Detail guide_.png / guide_.png / guide_.png 8 x 0 / color : #969f 8 x 0 / weight : dp color : Object. icn_round_slide_active icn_round_slide_inactive. icn_fb_login Size (W x H) x x Text Font(weight) Size Color. regular. bold. regular. regular 6 08 Login

17 LOGIN Process (/) LOGIN_ input LOGIN_ input_keyboard SignUp_input SignUp_input_keyboard Object Size Color. input_area. error_message_area dp dp White Red 08 Login

18 LOGIN Process (/) LOGIN_verification_sucess LOGIN_verification_error LOGIN_LoginRequired LOGIN_popup 08 Login

19 SETTING SETTING_LOGIN SETTING_GUEST SETTING_CHANGE PASSWORD Area Size(dp). Setting_content H : 8 Object Detail. on_off button default Text Font(weight) Size Color. bold. bold. regular. regular. regular grey blue red grey blue 09 Setting

20 POP UP Area. Message. Distractor Size(dp) Max-width : 0dp H : If you cancel now, your feedback will be discarded. Text Font(weight) Size Color 6 CONFIRM 6 If you cancel now, your feedback will be discarded YES NO 6 6. regular. regualr. regular grey blue grey. Check if you entered your address correctly.. Check your spam folder or trash folder.. It may take some time depending on the service you use. If you don t receive an from us within hours, please contact our customer service. OK If you cancel now, your feedback will be discarded. OK 0 Popup

Orcad Capture 9.x

Orcad Capture 9.x OrCAD Capture Workbook (Ver 10.xx) 0 Capture 1 2 3 Capture for window 4.opj ( OrCAD Project file) Design file Programe link file..dsn (OrCAD Design file) Design file..olb (OrCAD Library file) file..upd