The Research On Web User Interface Development Based Responsive Model Technology

The increasing availability of new types of interaction platforms raises a number of issues for designers and developers. There is a need for new methods and tools to support development of web user interface, which can be accessed through a variety of devices.There is a solution that named Responsive Web Design. It can create web user interface with usability and rich experience for different screen sizes. But the method make designers and developers focus on UI implementation and the development process is not unified and modeling. These factors lead to be high error rate and inefficient, it’s also non reusability. Model-Based Web User Interface Design (MBUID) method can be rapid developing user interface. But MBUID don’t introduce use context information. So the user interface developed by MBUID couldn’t be usability and rich experience. So how to improve the web user interface with rich experience for mobile users and have a short development cycle to adapt the mobile app rhythm.This paper posed a solution about web user interface development:web user interface development based on responsive model. It aims at the problem of web UI screen size adaption. This paper posed responsive model that modeling and abstracting RWD. Responsive Model consists of responsive rule, responsive schema and device context. Then we reference the MBUID and introduce responsive model in it. This paper introduce four user interface models and transformation between them:task model, abstract responsive interface model, concrete responsive interface model and final responsive web user interface, four stages. Firstly we analysis the user goal and task to get task model. Then get abstract responsive interface model from task model.By transformation we get concrete responsive interface model with concrete platform and implement technology and got two description files:user interface description files and responsive action description files. Finally we got responsive web user interface on the running time. The final user interface can adjust the interface layout on different devices.