《Mobile Design that Doesn’t Suck手机产品设计》由会员分享，可在线阅读，更多相关《Mobile Design that Doesn’t Suck手机产品设计（67页珍藏版）》请在金锄头文库上搜索。
1、Paul Trani paultrani,Mobile Design that Doesnt Suck,Adobe Flash Platform Evangelist L and Layers Magazine author Adobe Certified Instructor Art school graduate,Live,Work,Love,Ride,Play,Paul Trani,Why Should I Care?,Dont Get Caught,“Mobile Internet Usage Will be a Boon to Consumers and Some Compani
2、es Will Likely Win Big While Many Will Wonder What Just Happened.”Barbera Ballard, author Designing Mobile User Experience,Mobile Usage,U.S. Mobile Web Usage Grew 110% Last Year Bigger than desktop browsing in 5 years http:/ Study: Adidas,Because Ugly Doesnt Sell,Most Common Mobile Design Mistakes,1
3、 of 5,Most Common Mobile Design Mistakes,No Mobile SiteNot Understanding the UserLack of ContextLack of Understanding Mobile TechnologyLack of Design Fundamentals,No Mobile Site,1 of 5,Dont Make Me Work,Create, Dont Convert,Not Understanding the User,2 of 5,Who are the users? Anyone who interacts wi
4、th content on their phone. (What phones?)Men and women between 16-35.,The User,The User,Where are they? Design for all environments and account for screen glare.,Development,When will they interact? During idle periods of time. Design for 1 minute tasks. Make navigation shallow and easy.,The User,?,
5、The User,?,?,How are they holding it? Design fro portrait and landscape.,The User,Why will they use your app? Valuable, appropriate content.,Content,Content,(But have a link to the full site),Lack of Context,3 of 5,Lack of Context,Proper Context,Neglecting Mobile Technology,4 of 5,Mobile Device Cons
6、traints,Processing power of a computer 8 years ago Screen 1/3 the size,=,Mobile Device Constraints,Optimization,Use bitmaps over vectorsAvoid, if possible:FiltersTransparencyBlend modesPerspective distortion,Additional Capabilities,Using Capabilities,Click for more info? Swipe for additional items?
7、Pinch to zoom? GPS for nearby stores?,Lack of Proper Design,5 of 5,Elements of Successful Design,Use Existing Design Standards,Use Existing Design Standards,Leverage Real World Metaphors,The UKs Most Popular Handheld,Leverage Real World Metaphors,Elements of Successful Design,Its about leading the e
8、ye,Elements of Successful Design,Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Wheel, Color Choices, Meaning,Elements of Successful Design,Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Whe
9、el, Color Choices, Meaning,GRID,Start with a,Grid Structure,Divide the page into a grid The eye naturally follows an “F” shape,One Column? Two?,PLACEMENT,44,Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.,Placement,Native Keyboard Placement,SIZE MATTERS,Make it la
10、rge, then make it larger.,Size Matters,Mobilize, dont miniaturize Design for real hand sizes,“Miniaturizing treats the mobile environment and technology as a subset of the desktop environment.” Barbara Ballard,Design for Real Hand Sizes,The average fingertip is 3x larger than the hand cursor Make yo
11、ur buttons 3x larger Then make them even larger,45x45px,15x15px,SPACE,Implies importance, elegance, and professionalism.,Space,Dont try to be great, try to be invisible,“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” Antoine de Saint-Exuper
12、y,Space,WalMart,Target,Elements of Successful Design,Layout Grid, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Wheel, Color Choices, Meaning,Choose a font that fits the subject Dont use more than three font-face Flash,“Typography has one plain duty before
13、it and thats to convey information in writing.” Emil Ruder, Founder of Basel School of Design,Typography,San-serif lack Serifs and are considered modern Understand type anatomy Understand type measurements,Choosing a Font,ContrastSizeHierarchy,Focus on Clarity,Elements of Successful Design,Layout Gr
14、id, Golden Ratio, Space, Balance, Hierarchy, Direction,Typography Serif vs. Sans,Color Color Wheel, Color Choices, Meaning,Use color to create hierarchy, dominance, and balance Consistent use of a few colors makes a more cohesive design,“Use color to emphasize importance, not decorate a page.” Alexa
15、nder White,Color,Color,Choose colors using The Color Wheel Warm colors bring elements forward Cool colors move elements back Find contemporary colors using Kuler,Flash Player 10.1,Additional Capabilities,In the Browser,Beyond the Browser,planning,We want to sell you stuff you dont need.,Resources, www.bytearray.org http:/www.RIA http:/ http:/,
