A design to show the main items and related items of main



  • At present, my project display the main and related items separately in multiple interfaces, and use the combobox in the related item interface to filter the sub items of the main.
    However, such an interface layout still seems to be cumbersome and uncomfortable, and when there are many main items, ComboBox filter is obviously not a good idea.
    Are there any better layouts or UI improvement suggestions?

    The core requirement is to display the fields of these items, and can view the fields of the sub items related to it by selecting the main item.

    (ps: These items are can be add/modify/delete, just omitted on mockup)



  • There are a couple of ways to lay out such information, one factor that would certainly make a difference is what device are you designing this for - mobile /desktop or something else.

    For desktop web apps, common layout patterns that can solve this problem are:

    1. Accordion Layout : https://semantic-ui.com/modules/accordion.html#/examples

    2. Mater-Detail Layout : http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns

    3. Column View (this is what I see in your illustration): http://designingwebinterfaces.com/designing-web-interfaces-12-screen-patterns




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2