Visual design: The ipad's physical design

Source: Internet
Author: User
Tags interface new features reflection touch

1024x768 VS 320X480
320x480 is the screen resolution of the iphone, and 1024x768 is the screen resolution of the newly released tablet device ipad. With this set of resolution changes and the appearance of the first glimpse of the ipad, it will feel that the ipad is only a "larger version" of the ipad touch, consistent production process, even the "home" button has not been changed intact in the bottom of the screen, seems to be "jokingly" a. However, deep into the changes in interface design, the ipad program's interface does not do a simple amplification (pictured below: iphone and ipad Calendar software interface comparison)

The same calendar software, the ipad calendar program through the paper texture, layout adjustment and other changes, the overall visual impression is a can flip "notepad." Similarly, the proposed physical design has been applied to the ipad program in a wide range of applications, bringing new features and innovations to the interface. On the design of physical and chemical interface, has been in use, and accompanied by the development of graphical interface, such as interface graphics semantics, texture, texture are the embodiment of the materialization, a simple straightforward example is the button is often designed to guide the user to "press".

 

Spatial sense of Iphone/ipad interface
Broadly speaking, the entire iphoneos is also being fitted, the touch screen is flat, but we see from the touch screen is the concave and convex of a desktop world, or more like a room (pictured below), the room has its own lighting system. Continuation of the MacOS interface of the light source system, the main light is the vertical direction of 90 degrees of light, it determines the space in the object's shadow direction, reflection, reflective surface and so on;

 

They have to mention the objects in the room-the desktop icons, these rounded corners play a very important role. Compared to the General operating system table icon processing a variety of ways. IPhone OS to unify the icon style, under the "Ruthless recruit": unified round-angle processing, vertical 90-degree shadow, as well as the head of a reflection of high light. These styles, by default, are enforced by a program, which also sees a room with a relatively uniform lighting environment. Because these styles are open by default, it is convenient for the average developer to spend a small amount of effort to make the program has a relatively beautiful program icon, (note: Of course, you really think you should make your own program icons, but also can customize the style. Specifically see the iphone HMI guide How to customize the Desktop icon chapter. Iphoneos the impact of this lighting system is ubiquitous (be sure to look at the Apple platform-related design:), here is a practical example-the text effect in the button: Light and Dark buttons, in which the text processing effect is not the same, unified is the text is concave on the button. On a light-colored button, the text has a white specular reflection in the downward direction of 90 degrees, and a shadow on the Dark button with a 90-degree upward direction. Compare the following figure:

 

Quasi-object to the real
The same use is iphoneos,ipad in the physical and chemical design performance more strongly, the use of the animation process, a typical example is the use of ibook program, simulation of the user from the bookshelf to choose a book, open the book, read text, flip page number ... The whole process is casual and natural. The ipad is not "Transformers", subject to the limitations of its own hardware, it can not really become a book to read, but the advantages of the software to solve the limitations of the hardware, the use of virtual operating experience to reduce the difference in reading experience. Daily life has accumulated a lot of use of operating habits, the physical and chemical can be convenient for the experience of the transplant, as soon as you see the interface, you know roughly how to use.

 

How does im fit into things?
In the actual Qqforipad version of the interface design, the first question is, you can contact IM chat software, what is the actual object? Accumulate chat records as text materials, can make a memoir, this is also a kind of object, but sometimes instant messaging emphasis is the process of real-time chat, make a memoir is still open to discuss, the prophase is only a concept manuscript made a try; In the final surface of the main interface design, In order to create a relatively pleasant chat environment, in the details of the processing of a number of objects to try, such as the Chat tab, retaining the commonly used book tags; when you send a picture, the picture's border processing makes the picture more like a picture presented in front of you. The following figure: QQ for ipad version of the main interface design

 

Quasi-object and reality
believe that with the development of multi-touch technology and the advent of large touch-screen-related products, the design will be applied more widely, but at the same time should retain a sober: No matter how the object, the virtual experience is ultimately from the real life experience accumulation. Traditional books are still preserved, and there is a certain truth in existence:

 

Reference: Apple iphone HMI design Guide online version
http://developer.apple.com/iPhone/library/documentation/UserExperience/Conceptual/MobileHIG/



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.