It has been twenty years to apply the metaphor on Graphic User Interface and has been widely discussed in variety applications. At the time, due to the multimedia, the variety types of performance and concept usually makes the users feel disorientation and helpless. Therefore, by using the applicable metaphor to design the websites interface could have great help on catching the attention of the user and help them realize the information more easily.

This research combs out the relationship between the MGUI (Metaphor Graphic User Interface) and The Visual Scenario Based Websites by realizing the develop history of Metaphor, Graphic User Interface and Visual Scenario. Furthermore, analyze the relevant website cases by sorting The Visual Scenario Based Websites by types of metaphor. Finally, apply these concepts into the creation of real website.

The result of this research is that The Visual Scenario Based Websites is just the substantiation and visualization of a website is a space and also an extension of MGUI. What the difference is The Visual Scenario Based Websites include two levels of Metaphor, the Integral Metaphor and Object Metaphor. There are five types of The Visual Scenario Based Websites, Plane-based Metaphor, Room-based Metaphor, Landscape Metaphor, Surrealism Metaphor, Storytelling Metaphor, respectively.

Besides, the author would suggest three points through this research: (1) it would be the key issue to use suitable Metaphor and assisted with text statement to balance the perceptual experience and user operation. (2) It is not suitable to use a large size image file while designing a website by using flash software. (3) It would be much better if the language of the website could match the situation design to enhance the emotional investment.