Tags: Design, front end
The introduction of
I was about to take a look at something when I realized…
Wow, this browser-consuming home page has been updated for me!
Still remember the first few times to open Taobao, full screen GIF and a variety of other dynamic effect of the leadership painting taobao UI home page, is really:
Compared to the original UI, the style is very simple, the content is concise, prominent, and can be located at a glance to the desired elements.
By moving the cursor over the categories on the left, we can see a nicer list:
The previous list of small text, irrelevant information saturation high interference, not easy to locate the list finally no! Celebrate! ๐ ๐
However, except for the home page, there seems to be no other place to modify the UI.
simplicity
There is more and more minimalistic design in mobile UI interfaces, and even in computers.
The popularity of minimalist design is due in large part to its design and development friendliness, which not only makes applications load faster (in most cases), but also makes them more compatible with different screens. At the same time, more and more users are turning to minimalist designs.
The minimalist UI is not only beautiful, it’s also great in terms of usability: it’s easy to immerse the user, it’s easy to navigate, and it’s visually powerful.
UI design styles are becoming more and more concise
I don’t know if you’ve noticed, but when we open up a variety of common applications, it’s impossible to tell the difference in the layout if you don’t look closely. From shopping mall apps to video apps to reading apps, the design of each application is very similar.
Creamy white background, creamy white interactive buttons, creamy white text box.
These UI controls are very precise and time-sensitive. This contemporary style of page design may seem boring at first glance, but there’s a point to it.
After all, when apps of the same type copy similar logical interactions and visual elements from each other, we’re actually less likely to make mistakes. For example, when we open an app to share our account, we unconsciously place our finger in the lower right corner of the screen, ready to tap the navigation bar…
In my own opinion, it seems that first Apple, MUJI, then Google, GitHub, Dianping, and then Baidu are spreading the popularity of profiles. In my third or fourth year of studying FE, I was imitating the MUJI design. Have to say, Muji UI design is really very nice ฯ(‘ nation-ยด)ฯ.
Even Baidu eventually changed its tune:
And that retro QQ mailbox? Thinking of it, I really want to make fun of this license code garbage design…
But the old UI has been changed to a new one (wx.mail.qq.com), and the new accounts don’t seem to have to switch back…
What is the difference?
From an interface design perspective, what’s the biggest difference in terms of UI between software 10 years ago and software today?
Probably older software had a few menus and buttons in almost every corner. Just look at a few older government websites.
It is said that recently the education system of Tianhe District government in Guangzhou city wants to update the marking, marking and student file system, but I don’t know how the effect will be. Anyway, not long ago, it was chaotic, UI blocked each other, and one page had many functions and was difficult to operate…
While the current software is very concise, most of the pages are only focused on a content, more in line with the way people think. Flatness is in vogue these days, and simplicity is good. Indeed, with each additional option, the cost of learning doubles for the user. (Although I still find Windows 7 pretty good…)
Is simplicity really the only strategy?
Most of the time, it is, and it keeps us from messing around with the functionality.
But there are plenty of exceptions.
MacOS has a bunch of bells and whistles, like the Magnification lens, and even the Dock is redundant to me most of the time.
A good interactive logic can solve everything!
Command + Space โ +, type an application keyword such as Ch and press Enter to immediately open a browser.
Or Command + Tab โ + โน to invoke the list of currently running applications and simply select them.
Or, if the application type is editing, if a page has only a few functions, it is really thin!
However, in the face of most of the design draft problems, it seems that simple and concise design, is the simplest solution?
What should we do?
1. Remove useless elements
In our design, every element should have its own meaning. And in the minimalist design, every element should be the existence of purpose, pertinence, without redundant, useless elements.
Therefore, a minimalist design should keep only the components that are absolutely necessary.
For example, should a page on a shopping site highlight links in the body of the page?
Is that necessary?
2. Visual focus
It’s easy to understand that the smaller the screen, the easier it is for the user to focus on the message you’re trying to convey. The more salient your message is, the more likely users will focus on it first.
In the case of Apple pages, most of us will find that the images are very large, and the text is really small compared to:
(Is there any big guy willing to sponsor one ~)
The visual design revolves around the content. This is designed to make the message clearer, eliminate distractions, and make it easier for users to focus on the core content. Because our attention, as humans, shifts from visual focus to less important information.
For example, I first focus on the background image in the picture above, then I see a Pro in place, and I’m intrigued, so I go on to read the description.
Therefore, clearer information hierarchy will make the content easier to understand.
3. Simple and matching color schemes
Simplifying your color scheme can go a long way to improving your user experience; too much color can have a negative impact on a minimalist design. However, limiting the number of colors doesn’t mean that you can only use black and white tones and don’t need other colors.
Minimalist color schemes are all about using the necessary colors to help you build your visual system. Such as monochrome color matching. Monochrome color scheme is one of the most commonly used color schemes in minimalist design. Monochromatic color matching refers to the main color and secondary color in a unified hue, this color matching method often gives a person a very consistent page feeling.
In particular, the color schemes must match and be consistent.
Don’t have one color match here and one color match there!!
Here’s a Color tool to introduce first, Google Material Design: Material Color tool
Matching and consistent color schemes give the user a unified impression, such as pink – cute, blue – technology, that we can understand. Another example is iMessage, which colors messages according to the time of the message.
4. Use bold white space
White space (also called negative) is the space of elements on a page. Although some people think white space is a waste of the screen, it is very important in the design.
Too many elements on a page without white space can make the page look crowded and make it harder for users to find information.
Breath-filled layouts are a common element of minimalist design, and almost a necessary component. White space means to leave space, it doesn’t have to be white. In the minimalist design, the presence of white space makes the visual focus more prominent. In addition, it also creates a sense of space and area throughout the design, presenting the overall framework and layout.
Such as Google home page, huge white, direct point out the theme => you give me to click on the search box to search, don’t blind!
HMM… A little ugly at 1920×1920 resolution…
Now most of the set-top box, TV are embedded with the Android system after the magic, and even can say, the measure of domestic magic system is the boot page and home page.
Full screen? All kinds of popovers?
That’s not a big deal!
conclusion
To be honest, looking at some of the outdated forum UI, it’s really annoying.
Most of them have too many focuses, too few focuses, as if every element is a focus.
They should have moved with The Times!
Design is not a metaphysical science, but really a subject that requires us to pay. From layout to interaction. A good design, is the best advertising, can generate the strongest user engagement. Your application doesn’t have to be huge, it doesn’t have to be great, and most of the time, a 50% performance difference is enough to ignore in a normal scenario.
What are our standards for downloading apps?
Can only see the effect picture!
What’s the rudest way to optimize a design?
Simple design, I think.