[ux series] 1b - 12 standard screen layouts

Download [UX Series] 1b - 12 standard screen layouts

Post on 21-Feb-2017

321 views

Category:

Design

3 download

Embed Size (px)

TRANSCRIPT

FileNewTemplate

12 standard screen patternsVu Phuong Hoang2015/08

1

1. Master/DetailMaster part is used to navigateDetail part displays information

Used for:Displaying more information while staying in the same page

2

1. Master/Detail

3

1. Master/Detail

4

1. Master/Detail

Elevate iPhone App of the Year 2014

5

1. Master/Detail

6

1. Master/Detail

7

1. Master/Detail

8

1. Master/Detail

9

1. Master / Detail

10

1. Master / Detail

11

1. Master / Detail

12

2. Column BrowseSimilar to Master / Detail patternMultiple entry points

Used for:Browsing nested data

13

2. Column Browse

14

2. Column Browse

15

2. Column Browse

16

2. Column Browse

17

2. Column Browse

18

2. Column Browse

19

3. Search / ResultTop part are criteriasBottom part are items meeting those criterias

Used for:Searching

20

3. Search / Result

21

3. Search / Result

22

3. Search / Result

23

3. Search / Result

24

4. Filter DatasetUse filtering controls to refine dataset

Used for:Narrowing down search results

25

Search / Result VS. Filter DatasetSearch / Result: Start with blank state (can be customized)Add result based on criterias later

Filter Dataset:Start with full listRemove items based on criterias later

26

4. Filter Dataset

27

4. Filter Dataset

28

4. Filter Dataset

29

4. Filter Dataset

30

4. Filter Dataset

31

4. Filter Dataset

32

4. Filter Dataset

33

5. FormsSet of inputs to collect data

No body likes filling forms -> must be designed carefully

Should tell some rules about desiging forms34

5. Forms

35

5. Forms

36

5. Forms

37

5. Forms

38

5. Forms

39

6. Palette / CanvasSet of floating windows which can be dragged anywhere

Used for:DesigningDrawing diagrams

Should tell some rules about desiging forms40

6. Palette / Canvas

Should tell some rules about desiging forms41

6. Palette / Canvas

Should tell some rules about desiging forms42

6. Palette / Canvas

Should tell some rules about desiging forms43

6. Palette / Canvas

Should tell some rules about desiging forms44

6. Palette / Canvas

Should tell some rules about desiging forms45

7. DashboardSummarize key data in graphs

Used for:Providing summary at a glance

Should tell some rules about desiging forms46

7. Dashboard

Should tell some rules about desiging forms47

7. Dashboard

Should tell some rules about desiging forms48

7. Dashboard

Should tell some rules about desiging forms49

7. Dashboard

Should tell some rules about desiging forms50

7. Dashboard

Should tell some rules about desiging forms51

8. SpreadsheetEditable data table

Used for:Quick scanningQuick editting (in bulk)

Should tell some rules about desiging forms52

8. Spreadsheet

Should tell some rules about desiging forms53

8. Spreadsheet

Should tell some rules about desiging forms54

8. Spreadsheet

Should tell some rules about desiging forms55

9. WizardMulti-steps process

Used for:Guiding user through a complicated workflow

Should tell some rules about desiging forms56

9. Wizard

Should tell some rules about desiging forms57

9. Wizard

Should tell some rules about desiging forms58

9. Wizard

Should tell some rules about desiging forms59

10. Parallel PanelsAlso known as Accordion

Used for:Displaying chunks of independent tools / information

Should tell some rules about desiging forms60

10. Parallel Panels

Should tell some rules about desiging forms61

10. Parallel Panels

Should tell some rules about desiging forms62

11. Interactive ModelUser interacts directly with UI elements displaying information

Used for:Providing easy way for user to try different methods

Should tell some rules about desiging forms63

11. Interactive Model

Should tell some rules about desiging forms64

11. Interactive Model

Should tell some rules about desiging forms65

11. Interactive Model

Should tell some rules about desiging forms66

11. Interactive Model

Should tell some rules about desiging forms67

11. Interactive Model

Should tell some rules about desiging forms68

12. Blank StateHelpful tips or placeholders for user when he doesnt have data

Used for:Showing user where to go next

Should tell some rules about desiging forms69

12. Blank State

Should tell some rules about desiging forms70

12. Blank State

Should tell some rules about desiging forms71

12. Blank State

Should tell some rules about desiging forms72

12. Blank State

Should tell some rules about desiging forms73

12. Blank State

Should tell some rules about desiging forms74

12. Blank State

Should tell some rules about desiging forms75