Pages - UI Design

The UI design section of Evoke allows for the design of Pages that will be used in your App. It is structured by a WhatYouSeeIsWhatYouGet (WYSIWYG) image of the screen on the left and a series of tabs, on the right, that assist with the structuring of the page. the following provides detailed reference information regarding the configurations options for Pages and Building a Page provides an example of how to go about putting a new App Page together.
The General tab, within Pages, is structured into 3 sections. the first two provide configuration settings for the currently selected Segment and the Data Content of that Segment; the third section provides configuration settings for the currently displayed page design.
Additional information regarding Segments is available in the General section.
The Adjust area is where you can add, remove or adjust segments. The Adjust (Managing Segments) page provides detailed information regarding the options in the adjust tab.
Segment headers are usually used to provide information about a data segment. Headers can have an ellipsis menu that allows for both navigation and access to the Evoke Click Actions. Adding, adjusting and defining actions and navigation for headers is detailed further in Headers.
The spacing section, in the Pages area, is used to provide specific spacing settings for segments, data and other screen components on the current Page design. Please refer to spacing for further details.
The colors section is used to define the colors for various segment components. If colors were set in a theme they can be redefined for each device type/device operating system for the specific page. Please refer to Colors for further details.
The navigation section, in the Pages area, is used to provide navigation to other Pages within the app, as selected by the user from menus. Please refer to navigation for more information.
Adaptations are what adjusts each page to accommodate the screen size and shape that the App is running on. They also allow you to alter the look and feel of a Page to suit the requirements of your App. Click here to review the full details regarding the use of Adaptations.