Adaptive layout
-
Upload
g1sh -
Category
Technology
-
view
119 -
download
2
description
Transcript of Adaptive layout
![Page 1: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/1.jpg)
A
V1
FEBRUARY 11, 2010
Adaptive Layout Design
![Page 2: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/2.jpg)
A
Adaptive Layout Design
Levels of adaptation
2
Platform Variations Layout Variations Component Variations
![Page 3: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/3.jpg)
A
Platform Variations
![Page 4: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/4.jpg)
Confidential and Proprietary. Do not distribute.A
Platform Variations
Content
4
Teasure Island-
Part I.The old bucanner.
I saw the best minds of my generation destroyed by madness, starving hysterical naked, dragging themselves through the negro streets at dawn looking for an angry fix, angelheaded hipsters burning for the ancient heavenlyconnection to the starry dynamo in the machinery of night,who poverty and tatters and hollow-eyed and high sat up smoking
In the supernatural darkness ofcold-water flats floating across the tops of cities contemplating jazz,who bared their brains to Heaven under the El and saw oham.
Treasure Island
I saw the best minds of my generation destroyed by madness, starving hysterical naked, dragging themselves through the negro streets at dawn looking for an angry fix, angelheaded hipsters burning for the ancient heavenlyconnection to
Story Design
![Page 5: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/5.jpg)
A
Platform Variations
Screen sizes
5
Tablet SmartphonesDesktop Mobile Phones
15 inch 9.7 inch 3.5 inch 2 inches
![Page 6: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/6.jpg)
A
Platform Variations
Resolution
6
iPhone Droid
![Page 7: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/7.jpg)
A
Platform Variations
UI Guidelines and Conventions
7
![Page 8: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/8.jpg)
A
Layout Variations
![Page 9: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/9.jpg)
A
Layout Variations
Document
9
Direction Fixed Variable (by content)
HeadlineLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies cursus neque, nec molestie felis consectetur vel. Quisque ornare turpis nisi. Praesent consequat aliquet tortor eget convallis. Vivamus fermentum lacus ac dolor condimentum elementum. Curabitur lobortis, diam quis luctus posuere, felis velit hendrerit orci, in aliquam nisi libero sed tellus. Suspendisse in ipsum ut velit suscipit pharetra. Nulla metus dolor, ornare id interdum et, ultrices vitae neque. Integer lacus turpis, vestibulum eget porttitor et, bibendum nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis sem vitae libero pharetra ac ornare odio condimentum. Sed cursus elit vitae urna mollis eget adipiscing ligula tempus.
HeadlineLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies cursus neque, nec molestie felis consectetur vel. Quisque ornare turpis nisi. Praesent consequat aliquet tortor eget convallis. Vivamus fermentum lacus ac dolor condimentum elementum. Curabitur lobortis, diam quis luctus posuere, felis velit hendrerit orci, in aliquam nisi libero sed tellus. Suspendisse in ipsum ut velit suscipit pharetra. Nulla metus dolor, ornare id interdum et, ultrices vitae neque. Integer lacus turpis, vestibulum eget porttitor et, bibendum nec nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis sem vitae libero pharetra ac ornare odio condimentum. Sed cursus elit vitae urna mollis eget adipiscing ligula tempus.
![Page 10: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/10.jpg)
A
Layout Variations
Grid based expansion
10
![Page 11: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/11.jpg)
Confidential and Proprietary. Do not distribute.A
Layout Variations
Grid Based Layout
11
![Page 12: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/12.jpg)
Confidential and Proprietary. Do not distribute.A
Layout Variations
Grid Based Layout
11
Baseline - Fixed
Columns - Variable
Rows - Variable
Gutters/Gaps - Fixed
![Page 13: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/13.jpg)
A
Layout Variations
Positioning
12
Attached to border
Full width/height
Inheritance
![Page 14: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/14.jpg)
A
Layout Variations
Proportions
13
80px 30%
Pixels Percentage
![Page 15: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/15.jpg)
A
Layout Variations
Proportions
13
80px 30%
Value is !xed/de!ned
70%
Value can be left empty
Pixels Percentage
![Page 16: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/16.jpg)
A
Layout Variations
Proportions
13
80px 30%
80px ?? 30% ??
Value is !xed/de!ned
70%
Value can be left empty
Pixels Percentage
![Page 17: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/17.jpg)
A
Layout Variations
Proportions
13
80px 30%
80px ?? 30% ??
Left takes precedence All sections are de!ned
Value is !xed/de!ned
70%
Value can be left empty
Pixels Percentage
![Page 18: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/18.jpg)
A
Layout Variations
Proportions
13
80px 30%
80px ?? 30% ??
Left takes precedence All sections are de!ned
Value is !xed/de!ned
70%
Value can be left empty
Pixels Percentage
50% 50%
Align to center
![Page 19: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/19.jpg)
A
Cropping a label:
Expandable text
UI specific line break rules:
Certain phrases can’t be split on line breaks. For example, “Chapter 5” and “6 mm” should always be together.
PRESENTATION TITLE
Text and Typography
14
This is a label that is too...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie sem ut nibh porta molestie. Phasellus dolor ... more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie sem ut nibh porta molestie. Phasellus dolor purus, pellentesque vel imperdiet et, egestas vel nunc. Nunc sem ante, commodo eu commodo sit amet, luctus nec mauris. Nunc eu justo ut libero elementum varius.Less
![Page 20: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/20.jpg)
Component Variations
![Page 21: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/21.jpg)
A
Component Variations
Layout
16
CompositeSimpleScale 9 Constrains
![Page 22: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/22.jpg)
A
Conditional StatesComponent Variations
17
![Page 23: Adaptive layout](https://reader034.fdocuments.net/reader034/viewer/2022051412/54c839cc4a795904308b45cd/html5/thumbnails/23.jpg)
The end.