When you face the two extreme screen sizes of your phone's screen and your desktop monitor, the question comes naturally.Some designers have started from the Angle of dynamic begin their design, but the vast majority of designers still set out to design from static page: select a fixed width and height, draw the corresponding sketch or visual draft.
This leads to a few questions: what size does your development team prioritize?What is the size of the high fidelity visual script first delivered by the design team?From a technical constraints point of view, you should give priority to what equipment.It is recommended to start with the most basic "extreme" size of the user and recommend the minimum and maximum of the current (2015) common devices:
320568px(iPhone5 in previous years, because it is the retina screen, we designed it according to 72dpi, but the display of the iPhone5 is actually 144px, so we gave this design size.As a UI designer, you should be aware of the problem of @2x and @3x)1600 x 1000px(common size of desktop displays).Of course, your users may actually be slightly different, with a little research to determine "extreme cases.""When you start a responsive web project, start with the most common and minimal design of the user."
When you face the smallest screen, you need to present the most important content on the small screen, and how to select it is a very difficult thing.But when it comes to the big screen, what you're thinking about is quite the opposite: how do you display content that is too wide to be readable?How do you select elements to avoid such problems?Finally, in the face of two different size of the interface, you need to think about them way of input involved, the smallest are often touch screen and virtual keyboard on the screen, the biggest screen, most of the time is one of the traditional keyboard mouse.Perhaps the most important thing here is that you need to pick two interface sizes at a time, rather than the traditional screen design, and then complete the rest.Designers and developers are divided on this issue, and the impact on the follow-up is very large.
2. Discuss the content layout between different breakpoints.
In the design of the daily web-pages, everyone for static wireframes betting so much attention, but when doing the responsive design, should always keep in mind that the layout of the page is flowing.This means that most of the pages that your web users experience are "intermediate".Therefore, you must consider every adjustment and change in layout design as the screen size changes.For example, when the screen size gets smaller, text content needs to shrink, and the image of the mashup is narrowed down to the column.Try not to "assume" or "speculate" with your development team on the issues that can, should, and shouldn't.Be proactive in identifying this information and reach a consensus with your co-workers before they do too much.For complex layout changes, it is a wise choice to draw a block diagram or sketch in advance.For less important features, a short discussion or email notification is sufficient.
3. Prepare for the processing strategy of picture material.
A picture in a responsive web page is usually composed of a set of images of different sizes.For example, the big picture on the top of my personal website is composed of six pictures, with different resolutions and sizes, so that different devices can match the corresponding pictures.The format and size of the images often creates a gap between the designers and developers within the team.You can use PNG, you can also use JPG, and icon fonts and SVG will also work well on the web.That is, there is no right answer: what is more depends on the available content and the resources themselves.But the important thing is that you have to agree on the format and stick to it.In addition, you may also want to delve into a common picture size system for different projects.
But for modern responsive web design, this is just a starting point.Now you need at least two sets of pictures, one for the average PPI screen and one for the high PPI retina display.A more complete responsive web page, with more requirements for atlas and material, more subdivision, more targeted.Try not to save the filtering decision for the response image format to the end of the project.At the very least, you have to make a basic distinction between the different pixel density screens.Read the article on srcset carefully, or use tools like Picturefill to ensure cross-browser support.If you feel overwhelmed, start small.Gradually adjusting the image element's srcset attribute is a good start. In the process, you will gradually see the response of the web page more and more reliable.
4. Start thinking from basic elements and use modular design.
The responsive Web Design process is deeply influenced by Brad Frost's Atomic Web Design and Jonathan Snook's SMACSS.Both frameworks rely on small, reusable infrastructure to achieve a powerful network architecture.
Therefore, in the process of handover to developers, I will give priority to small and reusable components, because they can bring the same user experience and visual effects to different platforms.This consistency is easier to digest for the development team.Also, the reusability of the widgets between different pages is very strong, so if you design an efficient set of solutions, there will be a lot of use in the future.Imagine that you are designing a registration page with a big title, a high resolution image, and a form.Since the web page is responsive, all of these elements vary in size as the device and screen change.In the early stages of project development, you should work with the development team to finalize the details of the page.What does it look like?What kind of validation mechanism is used?If you want to enter a form, how to match the touch screen and the traditional key mouse.
5. Let developers give feedback on visual and experience design.
Some designers do not allow developers to participate or provide feedback in product design meetings, usability design sessions, and other communication links.This kind of laissez-faire is wrong.It is important to know that experienced developers also have a wealth of knowledge in the fields of product, experience and design.Let them participate in these links and make the product more mature.The front end and the designer overlap more in skills.
More and more designers are starting to write their own code, and developers are getting used to making fast prototypes, block diagrams and, in private, catch up with aesthetics and design knowledge.The emergence of responsive web design has increased the overlap between the two occupations, exacerbating this trend.Although no designer's title hangs on the developer's head, they can often speak surprising and thought-provoking designs.
沒有留言:
張貼留言