top of page

Wireframe of 2.1 Search Result Screen

  • Whitehole Kong
  • Mar 22, 2017
  • 1 min read

Identify the proposed content, structure, functional behaviours of 2.1 Search Result Screen.

WIREFRAME AND ANNOTATIONS OF SEARCH TEXT RESULT SCREEN

Wireframe of 1.0 Home Page

  1. 100 results found The number of search result.

  2. Image The photo of wine.

  3. Clos de la Chapelle, 2010, Pommard 1er Cru Les Chanlins The name of wine.

  4. HK$ 620 The price of wine.

  5. 750ml The volume of wine.

  6. Right arrow button This button presents there will have menu after drag the item and open the details of the time after click on it.

WIREFRAME AND ANNOTATIONS OF SEARCH FULL-BODY RED RESULT SCREEN

Wireframe of Search Full-body Red Result Screen

  1. Home Navigate back to 1.0 Home screen.

  1. Full-body Red Notify the search criteria of this search result.

  2. 570 results found Display the number of search result of this search.

  3. Configure search criteria button Pull down the 2.0 Search screen for user to configure search criteria.

WIREFRAME AND ANNOTATIONS OF MENU OF LIST ITEM

Wireframe of menu of list item

  1. Compare Add the specific wine to compare list.

  2. Add Add the specific wine to cart.

WIREFRAME AND ANNOTATIONS OF COMPARE LIST

Wireframe of Compare List

  1. Wine 1, Wine 2 Solid image of wine represent there a wine added.

  2. Wine 3, Wine 4 Dotted line image represent there still have quota for compare wine.

  3. Compare Jump to 2.1.1 Compare screen to compare the wine in compare list. User can also rotate the photo anti-clockwise to open the 2.1.1 Compare screen.

Comments

bottom of page