• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
[Msd11]mobile interfacedesign03
 

[Msd11]mobile interfacedesign03

on

  • 371 views

 

Statistics

Views

Total Views
371
Views on SlideShare
224
Embed Views
147

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 147

http://msd2013.jylee6977.com 147

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    [Msd11]mobile interfacedesign03 [Msd11]mobile interfacedesign03 Presentation Transcript

    • http://msd2013.jylee6977.com/tcKGIT 2013 SPRING CLASS @ JYLEEMobileServiceDesignCLASS11 MOBILE DESIGN 03
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcApp Design Process(after service strategy)IDEA WIREFRAME DESIGNINGInformation Architecture(IA)  User Interface Design(UI)  Graphic User Interface Design(GUI)  Sourcing(XML)
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcApp Design Process(after service strategy)Information Architecture(IA)  User Interface Design(UI)  Graphic User Interface Design(GUI)  Sourcing(XML)내용 정의누구에게.어떤 방식으로.어떤 순으로뼈대마네킹 설정.옷의 방식/형태 설정스킨옷의 질감 및 패턴 선정옷의 다양한 요소 선정적용적용된 옷을 토대로 공정옷을 만드는 순서
    • MobileServiceDesignAndroid UI Overview00. Android UI
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : UI Principle01. Home, All Apps, and RecentHome All Apps Recent
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : UI Principle02. System Bars1. Status Bar2. Navigation Bar3. Combined Bar
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : UI Principle03. Notifications
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : UI Principle04. Common App UI1. Main Action Bar2. View Control3. Content Area4. Split Action Bar
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : UI Principle04. Common App UI1. Main Action Bar2. View Control3. Content Area4. Split Action Bar
    • MobileServiceDesignAndroid GUI Style00. Android UI
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style01. Devices and Display1. Be Flexible2. Optimized Layout3. Asset for allTo work in the base standard(normal size and MDPI)Multi-pane Layout
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style02. ThemeGmail in Holo Light Setting in Holo Dark Setting in Holo light withDark Action Bar API Guildeline : http://developer.android.com/guide/topics/ui/themes.html
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style03. Touch FeedbackStates
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style03. Touch FeedbackCommunication BoundariesGesture로 인한 결과를 희미하게표시하여, 사용자 입력에 대한 결과 예시화더 이상의 줄이나 데이터가 없을때 (최종/최상단 리스트)바운더리를 표현함으로써, 끝에 왔음을 표현
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and GridSpace ConsiderationGesture로 인한 결과를 희미하게표시하여, 사용자 입력에 대한 결과 예시화
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and GridSpace Consideration API Guildeline : http://developer.android.com/training/basics/supporting-devices/platforms.html
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and GridSpace Consideration API Guildeline : http://developer.android.com/guide/practices/screens_support.html
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and GridSpace Consideration API Guildeline : http://developer.android.com/guide/practices/screens_support.html• Screen Size (small, normal, large, xlarge)• Screen Density (ldpi, mdpi, hdpi, xdpi)• Orientation• Resolution px = dp * (dpi / 160)• Density independent pixelxlarge screens are at least 960dp x 720dplarge screens are at least 640dp x 480dpnormal screens are at least 470dp x 320dpsmall screens are at least 426dp x 320dp
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and GridDensity Independence API Guildeline : http://developer.android.com/guide/practices/screens_support.html
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and GridDensity Independence API Guildeline : http://developer.android.com/guide/practices/screens_support.html
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and Grid48dp RhymeSpacing between each UI element is8dp.** Touchable UI Component = 7-10mm (48dp)
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style04. Metrics and Grid48dp Rhyme
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style05. Typography
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style05. TypographyType ColorType ScaletextColorPrimary / textColorSecondary.textColorPrimaryInverse /textColorSecondaryInverse.
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style06. Color#33B5E5 #AA66CC #99CC00 #FFBB33 #FF4444AndroidColor
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style07. IconogrphySize & ScaleLauncher icons on a mobile devicemust be 48x48 dp.Launcher icons for display onGoogle Play must be512x512pixels.ProportionFull asset, 48x48 dpStyleUse a distinct silhouette. Three-dimensional, front view, with aslight perspective as if viewed fromabove, so that users perceive somedepthLauncher
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style07. IconogrphySize & ScaleAction bar icons for phonesshould be 32x32 dp..ProportionFull asset, 32x32 dpOptical square, 24x24 dpStylePictographic, flat, not too detailed, with smoothcurves or sharp shapes. If the graphic is thin,rotate it 45° left or right to fill the focal space.The thickness of the strokes and negative spacesshould be a minimum of 2 dp.Action BarColors: #333333Enabled: 60% opacityDisabled: 30% opacityColors: #FFFFFFEnabled: 80% opacityDisabled: 30% opacity
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style07. IconogrphySize & ScaleSmall icons should be 16x16dp.ProportionFull asset, 16x16 dpOptical square, 12x12 dpStyleNeutral, flat, and simple. Filled shapes are easierto see than thin strokes. Use a single visualmetaphor so that a user can easily recognizeand understand its purpose.Small / Contextual IconsColor
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style07. IconogrphySize & ScaleNotification icons must be 24x24dpProportionFull asset, 24x24 dpOptical square, 22x22 dpStyleKeep the style flat and simple, using the samesingle, visual metaphor as your launcher iconNotification IconsColor
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style08. Writing Style• Keep it brief. Be concise, simple and precise. Start with a 30 character limit (including spaces), anddont use more unless absolutely necessary.• Keep it simple. Pretend youre speaking to someone whos smart and competent, but doesntknow technical jargon and may not speak English very well. Use short words, active verbs, andcommon nouns.• Be friendly. Use contractions. Talk directly to the reader using second person ("you"). If your textdoesnt read the way youd say it in casual conversation, its probably not the way you shouldwrite it. Dont be abrupt or annoying and make the user feel safe, happy and energized.• Put the most important thing first. The first two words (around 11 characters, including spaces)should include at least a taste of the most important information in the string. If they dont, startover.• Describe only whats necessary, and no more. Dont try to explain subtle differences. They willbe lost on most users.• Avoid repetition. If a significant term gets repeated within a screen or block of text, find a way touse it just once
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style08. Writing Style
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAndroid UI : GUI Style08. Writing Style
    • MobileServiceDesignHow to design?01. Let’s Do Interface Design
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?01. Design Tools
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?02. Icon DesignLogo<App Icon<ResourcesLogo Icon Resource매우 단순함 단순함 복잡함단독사용가능 App의 특징을 나타냄 조합하여 사용강한 인상 식별로 이용 사용하기에 불편하지 않음정보량이 적음 어느 정보의 정보를 담음 정보를 담는 경우 많음표현의 제약이 많음 사이즈의 제약이 많음 제약 거의 없음폭 넓은 용도 Launcher, Google Play App 내부에서만 사용가치를 지님 App의 가치에 의존 App안에서만 가치
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?02. Icon Design2, 3가지 색으로 분위기 결정대상을 요소로 분리하여 보자기능을 시사하는 아이콘의 효과
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?02. Icon DesignStyleClean and contemporarySimple and iconic• Android Launcher icons are caricatural in nature; youricons should be highly simplified and exaggerated, sothat they are appropriate for use at small sizes. Your iconsshould not be overly complicated.• Try featuring a single part of an application as asymbolic representation of the whole (for example, theMusic icon features a speaker).• Consider using natural outlines and shapes, bothgeometric and organic, with a realistic (but neverphotorealistic) rendering.• Your icons should not present a cropped view of a largerimage.Tactile and textured:• non-glossy, textured material
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?02. Icon DesignSize and PositioningLauncher icon dimensions for high-density (hdpi)screens:• Full Asset: 72 x 72 px• Icon: 60 x 60 px• Square Icon: 56 x 56 pxLauncher icon dimensions for medium-density (mdpi)screens:• Full Asset: 48 x 48 px• Icon: 40 x 40 px• Square Icon: 38 x 38 pxLauncher icon dimensions for low-density (ldpi)screens:• Full Asset: 36 x 36 px• Icon: 30 x 30 px• Square Icon: 28 x 28 pxldpi (120 dpi) mdpi (160 dpi) hdpi (240 dpi) xhdpi (320 dpi)Launcher IconSize36 x 36 px 48 x 48 px 72 x 72 px 96 x 96 px
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?02. Icon DesignMaterials and colorsit appear to be sculpted from some real-worldmaterial.Icons should not use more than one primary colorper icon, if possible.The icons should not be over-saturated.The highlight colors palette are recommended
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?02. Icon DesignEffects1 Lighting:Top-litusing appropriate lighting details2 Drop shadow:#000000, 75% opacityangle 90°distance 1pxsize 3px3 Textures: Tactile, appear to use real-world materials
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : How to Design?02. Icon Designhttp://www.iconspedia.com/search/android/http://ntt.cc/2010/08/04/350-fresh-and-elegant-free-icons-for-android.html
    • MobileServiceDesignDesign Style Guide01. Let’s Do Interface Design
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide01. Color SchemeOnline Color Palette Generator
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide01. Color SchemePoint Color로고, 리스트 등에 들어가는 아이콘, 아이콘과 함께 이용되는 텍스트등의 직관적으로 눈에 띄는 곳에 사용되는 컬러Sub Color여러 컨트롤(버튼, 리스트, 텍스트)들의 배경으로 이용되거나 메인컬러를 돋보이게 만드는 부수적인 컬러Main Color :아이콘, 스플래시 이미지, 상단 타이틀(혹은 중심이 되는 탭바)로 이용되는 어플리케이션을 대표하는 컬러Color Use경쾌하고 산뜻함
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide01. Color SchemeColor Use중후함
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide01. Color SchemeColor Use직관적/유연함
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide02. Texture and PatternPattern LibrariesDo it yourself
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide02. Texture and PatternPattern Generator
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide02. Texture and PatternTexture LibraryLost and Taken Graphic Riverwegraphics Free textures for layers Digital Camera WorldTexture Gen FBrushGraphic ManiaShizoo Texture Palace Mayang
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide03. Type Face서체 활용방안1. Android 기본 서체 활용2. 무료 Font Embed3. 이미지로 활용서체 기본 양식Title체Sub Title 체본문체인용/강조/기타 체
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide03. Type Face서체 활용방안1. Android 기본 서체 활용2. 무료 Font Embed3. 이미지로 활용Droid sansDroid serifDroid mono다음체 : 나눔체 : 뫼비우스체서울체 : 바른돋음/바탕체Font Club: Cute Font윤고딕/명조 시리즈산돌고딕 시리즈
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide03. Type Face부드러운 주제에는 서울 한강체나눔명조 같은 명조체가 좋고,대화형 내용에는 나눔손글씨붓또는나눔손글씨펜이 재미를 더해준다01.부드러운주제
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide03. Type Face나눔고딕 EB나눔고딕 LIGHT핵심나머지제목본문다음 SB다음 REGULAR02.핵심과 나머지, 제목과 본문
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLet’s Design : Style Guide03. Type Face03.앱의 성격과 사용자에 따라 목소리를 만들어보자그녀의 자전거가 내 가슴 속으로 들어왔다.침대는 가구가 아닙니다. 과학입니다.부자되세요.막 입어도 일년 된 듯한 옷,십 년을 입어도 일 년된 듯한 옷고객이 우선이다.
    • MobileServiceDesign2013 UI Trends02. Trend Report
    • http://msd2013.jylee6977.com/tcLaser focusContext sensitive navigationCollapsed contentContent chunkingLong pages100% BG imageResponsive Web DesignFixed-Position NavigationCircular design elementsjQuery/CSS3/HTML5 InteractionRibbons & Banner & BadgeDesign StyleCustom Font FacesUsabilityRetro styleContentSimple landing pagesGrid SystemTile (brick) LayoutInfographicsCSS TransparencyMinimalism SkeuomorphismUI Design Trend Map
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcAuthentically Digital, Flat UIMicrosoft 가 주도하는 심플하고 디지털 환경에 최적화된 UI 디자인 스타일 (일명 Metro UI)디지털 환경에 익숙해진 사용자의 멘탈 모델을 고려하여 정보 및 기능을 쉽게 표현/그룹핑 할 수 있는 기하학적인 메타포를 적절히 활용1Minimalismwww.corporateriskwatch.comwww.designworkplan.comwww.informationarchitects.jp
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcReal MetaphorApple Design Philosophy 가 반영된 UI 스타일아날로그 메타포의 시각 요소나 그 밖의 요소 (Transition, sound)등을 UI에 적용하여 익숙한 경험 제공Skeuomorphism2
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcFor Seamless ExperienceHTML 5와 CSS 3를 기반으로 구현되는 최근 Web page 구현의 핵심 Trend.모든 종류의 브라우저, 플랫폼에서 사이즈와 사용환경을 막론하고 동일한 컨텐츠 경험을 제공하기 위한 웹기술 기반 디자인 트렌드Responsive Designhttp://mediaqueri.es/http://sk.co.kr/mainpage.aspx#http://www.cj.co.kr/2
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcBack to BasicsResponsive web이 UI 구현의 핵심 트렌드이제 그리드 원칙을 준수하지 않는 컨텐츠 레이아웃은 사용자에게 불쾌감Grid Systemhttp://goldengridsystem.com/http://bohemianalps.com/tools/grid/4
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcDynamic grid layout정보 단위를 하나의 시각 단위로 디자인 하게 되면정보 갱신 및 열람, 정렬, 검색 등이 용이하며 특히 제스처 기반으로 작동하는 모바일에서 유용Tile (brick) Layouthttp://pinterest.com/http://wedpics.com/5
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcChanges of intros철저한 사용자 분석을 통해 실제 사용하는 최소한의 기능과 최소한의 컨텐츠 만 배치한 랜딩 페이지Simple landing pageshttp://www.hongkiat.com/blog/beautiful-landing-pages/6
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcInstant behavior사용자가 수행해야 할 Task를 혼동하지 않도록 직관적으로 인식시키는 UI 컨트롤Laser focus7
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcContext Cognition사용자의 사용 맥락을 기반으로 활성화/비활성화가 자동으로 설정되사용자가 해당 맥락에서 필요로 하는 기능을 적절하게 표시하는 맥락 기반 User InterfaceContext sensitive navigation8
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcResponsive disclosure단계별로 정보의 구조를 노출하면서 사용자가 자연스럽게 정보 구조를 인지하고현재 수행할 수 있는 업무를 파악할 수 있게 하는 UI 컨트롤Collapsed contenthttp://webcloud.se/jQuery-Collapse/9
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tc고정영역 네비게이션손쉬운 Navigation을 위해 Navigation 관련 구성요소를 페이지 이동이나 Scroll 여부와 관계 없이고정적으로 표시 하는 UI 컨트롤 유형. Floating 방식 Navigation이나 Remote UI 등Fixed-Position Navigation10
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tc스크롤이 훨씬 편하고 유용할 때가 있습니다. 아주 많이..잘 분류된 컨텐츠를 한 페이지에 길게 배치하여 스크롤 기반으로 브라우징 할 수 있게 컨텐츠를 배치하는 것이사용자에게 훨씬 긍정적인 경험을 제공. 특히 모바일.Long pages11
    • MobileServiceDesign2013 UI Style Trends02. Trend Report
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcUnique Object Metaphor사각형의 비주얼 메타포에서 벗어나 원형의 메타포를 활용하는 디자인 스타일.일상적인 디자인이 아니라 보다 유니크 한 느낌을 주고 싶을 때 적절히 활용 가능Circular design elements1
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tc최근 Modern Web 이라고 통칭하는 디자인 트렌드에서 자주 사용하는 비주얼 메타포 유형.Ribbons & Banner & BadgeUnique Object Metaphor2
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcLarge photo backgrounds비주얼을 중시하는 브랜드나 서비스의 경우 브라우저를 가득 채우는High Quality의 이미지를 활용100% BG image3
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcSimple하고 Futuristic 한 스타일에 지쳤을 때애플의 스큐어몰피즘과는 다르게레트로 한 이미지 자체를 유니크 한 감성을 표현하기 위한 디자인 요소로 활용하는 스타Retro stylewww.sensisoft.comwww.custom-design.ch www.level2d.comwww.targetscope.comDesign Style4
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tc폰트로 표현하는 IdentityAdobe typekit이나 구글 웹 폰트 등 유니크한 웹폰트 수급이 원활해 짐에 따라폰트로 기업 및 서비스 아이덴티티를 적극적으로 표현하거나 폰트 자체를 비주얼 메타포로 활용Custom Font Faces1
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tc데이터를 아름답게 표현하는 방법기존에는 수치를 기반으로 한 대량의 정보를 한 화면에 표시해서 일정한 해독 능력을 갖춘 사용자들에게 ‘전달’만 했다면Infographic를 통해 대량의 정보/컨텐츠를 효과적으로 표현하는 방법Infographics1
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tc세련된 컨텐츠 표현 기법약간의 퍼블리싱 기술만으로 굉장히 세련되면서 레이어 개념으로 배치되는 컨텐츠 디자인CSS Transparencyhttp://tympanus.net/codrops/2012/11/26/using-transparency-in-web-design-dos-and-donts/5
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcMinimalism 표현 형태Flat Design6Flat UI InspirationsFlat UI Guide
    • MobileServiceDesignhttp://msd2013.jylee6977.com/tcMinimalism 표현 형태In a few word6
    • MobileServiceDesign2013 Mobile GUI02. Trend Report
    • http://msd2013.jylee6977.com/tcFlat Interface
    • http://msd2013.jylee6977.com/tc
    • MobileServiceDesignFOR NEXT WEEK1. Style Guideline2. Check Site for Resources