Bobross Project Design Guide for Android prepared by Dong Ju Shin date of preparation 06. 0. 6
0 0 0 Rule / Color Home List Contents 0 0 06 Profile Research Detail 0 08 09 Upload Login Setting 0 Popup
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 #686868 Grey #aaa Grey #ddd DarkGrey #aaa Mint #0b9b Blue #88aff Red #ffcc beige #efefe xxhdpi icon 0 Rule / Color
HOME 상단 화면 레이어 구조 그라데이션 0dp 아이콘 및 텍스트 curator pick 딤-그라데이션 그라데이션 0dp curator pick 이미지 탭 #000000 opacity 0% 그라데이션 정의 GNB Home 화면은 크게 상단의 curator pick화면과 하단의 keyword-discover-show 탭 화면으로 구성 #000000 opacity 0% 0 Home
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 0 6 8 9. 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
DISCOVER / SHOW object KEYWORD 0 0 0 8 6 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 0 0 0 8 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
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 0 8 0 6 8 8 8 8 6. 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
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 % - 0 0 text font(weight) size (dp) color. regualr. italic. bold grey grey grey 0 List
PROFILE 99 6 object name size (dp) 8. profile background image + dim layer : #000000 / 0% H : 68 0 68 8 0. 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
RESEARCH * Following / Follower 리스트나 Hot buzzler 리스트는 Person 리스트와 동일 스타일 8 8 8 6 8 8 0 0 0 0 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 0. 0. Color grey mint grey Text Font(weight) Size Color discover list style. regular. regular. bold. regular. bold grey grey grey grey grey 0 Research
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 8 8 8 8 8 6 8 6 Text Font(weight) Size Color. bold. italic. regular. regular. bold 6. regular. regular 8. regular 6 grey grey grey grey blue grey grey grey 9 8 0 06 Detail
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 8 8 8 80 Text Font(weight) Size Color. regular. regular. regular. regular grey grey grey blue FeedbackAide - generating FeedbackAide - complete 06 Detail
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
UPLOAD - IMAGE Area 9 항목과 항목 간의 간격 6 항목 제목과 입력창과의 간격 6 9 9. 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) 9 9 8 8. 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 8 8 0. 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
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
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 0 0 0 Text Font(weight) Size Color. regular. bold. regular. regular 6 08 Login
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
LOGIN Process (/) LOGIN_verification_sucess LOGIN_verification_error LOGIN_LoginRequired LOGIN_popup 08 Login
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
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. 6 6 6 YES NO 6 6. regular. regualr. regular grey blue grey. Check if you entered your E-mail address correctly.. Check your spam folder or trash folder.. It may take some time depending on the E-mail service you use. If you don t receive an E-mail from us within hours, please contact our customer service. OK If you cancel now, your feedback will be discarded. OK 0 Popup