武汉大学《用户体验设计》姜婷婷-Chapter 8 Speical topic - interface design.pdfVIP

Chapter 8 Special topic: interface design User Experience Design Tingting Jiang, Ph.D. {tij@whu.edu.cn} Interface design Selecting the right interface elements for the task the user is trying to accomplish and arranging them on the screen in a way that will be readily understood and easily used. Art of attention manipulation Interface design patterns ✣ Interface element layout ✣ Actions and commands ✣ Forms and controls Interface element layout ✣ Visual framework ✣ Titled sections ✣ ✣ Center stage ✣ Module tabs ✣ Responsive enabling ✣ Grid of equals ✣ Collapsible panels ✣ Movable panels Interface element layout Design each page to use the same basic layout, colors, and stylistic elements, but give the design enough flexibility to handle varying page content. Interface element layout Center stage Put the most important part into the largest subsection of the page; cluster secondary tools and content around it in smaller panels. Interface element layout Grid of equals Arrange content items in a grid or matrix. Each item should follow a common template, and each item’s visual weight should be similar. Interface element layout Titled sections Define separate sections of content by giving each one a visually strong title, separating the sections visually, and arranging them on the page. Interface element layout Module tabs Put modules of content into a small tabbed area so that only one module is visible at a time, allowing users to click