tailieunhanh - UI SOFTWARE ARCHITECTURE

Action popup triggered from distinct visual target. Minimally disruptive to screen context. Actions are straightforward. Fast & fun. Recommendation. DO use when items have competing internal targets. DO present only the for most important and obvious actions. DO use when the item doesn’t have a meaningful detail view. DON’T use in contexts which support multiple selection | UI SOFTWARE ARCHITECTURE Topics Visual structure Model-view-controller View hierarchy Observer Android design pattern Visual structure Clarity Consistency Hierarchy Balance Grids Contrast Textures Evaluating Clarity Directs the eye Provides balance through its use Strengthens impact of message Allows eye to rest between elements of activity Increases legibility, clarifies hierarchy Used to promote simplicity and “elegance” Clarity Economy of Visual Elements Minimize borders, heavy outlining, section boundaries Use white space instead Reduce clutter Minimize the number of controls Clarity via White Space White space Principle: Consistency Be consistent in every aspect: In layout, color, images, icons, typography, text Within screen, across screens Stay within metaphor everywhere Platform may have a style guide – follow it! Inconsistency Result when local and global designs aren’t balanced Color Palette conflict Conflict between local and global design . | UI SOFTWARE ARCHITECTURE Topics Visual structure Model-view-controller View hierarchy Observer Android design pattern Visual structure Clarity Consistency Hierarchy Balance Grids Contrast Textures Evaluating Clarity Directs the eye Provides balance through its use Strengthens impact of message Allows eye to rest between elements of activity Increases legibility, clarifies hierarchy Used to promote simplicity and “elegance” Clarity Economy of Visual Elements Minimize borders, heavy outlining, section boundaries Use white space instead Reduce clutter Minimize the number of controls Clarity via White Space White space Principle: Consistency Be consistent in every aspect: In layout, color, images, icons, typography, text Within screen, across screens Stay within metaphor everywhere Platform may have a style guide – follow it! Inconsistency Result when local and global designs aren’t balanced Color Palette conflict Conflict between local and global design Principle: Hierarchy What are the relative “levels” of importance? What should the user see first? Second? Hierarchy What are the relative “levels” of importance? Typographical Hierarchy Typographical Hierarchy plus Indentation Principle: Grids Western world Start from top left Allows eye to parse display more easily Grids (Hidden) horizontal and vertical lines to help locate window components Align related things Group items logically Grids: Examples Grid Alignment Grid: the invisible, underlying structure of a site Grid: essential – you must use one Grid Aligment Grid Alignment Grids Help locate window components Align related things Group items logically Minimize number of controls, reduce clutter Grid Example Principles: Contrast Pulls you in Guides your eyes around the interface Supports skimming Take advantage of contrast to guide user through hierarchy of information; add focus; or to energize an interface with “texture” Can be used to .