English 字幕

← Responsive Design - Developing Android Apps


Showing Revision 15 created 05/24/2016 by Udacity Robot.

  1. So now we have the wireframes
    implemented for both screens.
  2. But what does it look like on the tablet?
  3. Well, unfortunately, when we
    take the phone UI
  4. and stretch it out on a tablet,
    it doesn't look that great.
  5. There's a lot of empty white space here.
  6. We could better take advantage
    of this screen real estate
  7. by showing more useful information.
  8. For example, why do these details
    need to be a tap away
  9. when they could just as easily
    fit on this screen?
  10. And, furthermore, if the user
    wants to look through
  11. the full list of forecasts,
    their eyes must go like this,
  12. which is an unpleasant
    reading experience.
  13. If we want the user to read some content,
    we should keep the width narrower,
  14. so that they can scan it quickly.
  15. These considerations are part
    of responsive design.
  16. Responsive design means
    designing your app
  17. by keeping in mind
    that it'll be used across
  18. a range of different device screen sizes.
  19. How do we do that,
    and what does it mean to build
  20. for larger screen devices like tablets.
  21. Well, I can show you some examples of how
    apps adapt using multi-pane layouts.
  22. In the Android Design Guide,
    there's a section on multi-pane layouts.
  23. One technique is to combine
    multiple views together.
  24. For example, in the People app,
    you have the contact list
  25. and the contact card
    for additional details.
  26. On the tablet, we can
    put them side by side.
  27. This is also known
    as the MasterDetailFlow.
  28. This is the master list
    and this is the detail pane.
  29. In the settings app,
    we have another example.
  30. The column width adjust
    based on the available screen width.
  31. In the calendar app, we have panels,
    and they stack vertically
  32. in the portrait orientation,
  33. but horizontally
    in the landscape orientation.
  34. There also a couple of other examples
    that you can look through as well.
  35. If you want more information
    on designing for tablets
  36. or responsive design in general,
    you can check out the links below
  37. for more details.
  38. In this course, we're learning
    how to build up the phone UI first,
  39. and then the tablet UI.
  40. But in reality, when we're designing it,
    we thought about responsive design
  41. from day one.
  42. When you're building your own app,
    it'sbad practice to just completely
  43. design and build your phone app
    and then start to brainstorm
  44. about the tablet UI.
  45. That's because the tablet UI often
    has an impact on the phone design,
  46. as well as the architectural
    decisions made here.