Break Point。

What I learnt from 30 ideas in 30 days

一种交互能力的锻炼方式:每天想出一个解决问题的方法。

After all, getting started is more important than being right (link) and I’ve got the time to learn from potential failures. 

...

By asking “what if it were easier” it enables you to get rid of any preconceptions or biased (to an extent) and solve the problem in the most pragmatic way possible.


7 Basic Rules for Button Design

Button设计,包括辨识度、留白、正确的位置、效果明确、大小合适(移动端)、反馈。

Generally, the more time needed for users to decode the UI the less usable it becomes for them.

...

They use previous experience and visual signifiers to clarify the meaning of the UI object. That’s why it so important to use appropriate visual signifiers (such as size, shape, color, shadow, etc.) to make the element look like a button. 

...

Mobile users don’t have such opportunity. To understand whether an element is interactive or not users have to tap on it — there’s no other way to check the interactivity.

...

Your ability to interpret clickability signifiers aren’t the same as your users’ because you know what each element in your own design is intended to do.

...

Here are a few examples of buttons that are familiar to most users:

  • Filled button with square borders

  • Filled button with rounded corners

  • Filled button with shadows

  • Ghost button

...

The amount of whitespace near the button makes it easier (or harder) for users to understand whether it’s an interactive element or not.

...

With a standard layout, users will easily understand the purpose of each element — even it’s a button without strong signifiers. 

...

Users should clearly understand what happens when they click on a button. 

...

Always try to make the primary action button more prominent.

...

MIT Touch Lab study found that averages for finger pads are between 10–14mm and fingertips are 8–10mm. This makes 10mm x 10mm a good minimum touch target size.

...

When you provide too many options, your users end up doing nothing.

...

Based on the type of operation, this might be either visual or audio feedback.


10 inspiring splash screen designs

启动页的设计:品牌性+有趣。

A splash screen is a screen which appears when you open an app on your mobile device.

...

Whereas there are other splash screens, like Medium and Etsy, which incorporate fun, relevant and bespoke illustrations that fit in perfectly with the brand and reinforce their identity.

...

  • Keep it free from unnecessary distraction

  • Don’t use multiple colors or logos

  • Use animation sparingly


Being a UX design intern in 2018

有些关于市场的讨论。不过重点还是在于“经历”,不管是失败的还是成功的,学习到东西都是有用的。

Even the smallest feature is a huge win and if given the chance as a UX intern you will learn to take the failures as lessons more than a win.

...

New design models like agile or lean methods are based around more than pure design so getting to grips with product strategy or sales is a must.

...

Larger organisations are keen of taking and educating interns more than ever as they have embraced young designers as the future. Smaller organisations or start ups will embrace interns on a different level but still one with an equal worth.


I am in love with colors and design

一眼看去是老生常谈的色彩心理学,但其实用数据告诉你蓝色就是大家的最爱(摊手)

有一个观点很有意思,关于“贵的颜色”和生动的颜色。

The color is a universal language that can be used to communicate with different cultures, values, and ideas. The color directly communicates with humans and create an emotional impact.

...

Most of the time the only feeling that I get from a modern color is how expensive the product is going to be.

...

In this research, the majority of the people from the 22 countries have selected blue as the most liked color and orange as a least favorite color. 

...

The designers nowadays try to bring up these really bright colors into the design. They are using the word “Vibrant” to create a much more meaningful sense to it. Vibrant colors are a powerful set of colors that can provide a strong set of emotions, set a mood to the users and influence the users to conduct a certain action or create attention towards something that is happening at the moment.

...

The designer uses a single color in the background and uses the tones of the colors in the other place of the application or the website.

...

Usually, they cover the background image with a bright color and create an emotional factor towards their users.

...

duotone is quite easy to use and create and able to create a better experience for the users as well.


Desktop prototyping

虽然是个KIT推广但强调了PC端设计与其它的不同……非全屏下需要考虑和桌面的视觉兼容性。

What’s special about desktop design is that we can’t predict what the user’s screen will look like — messy desktops, noisy wallpapers, hundreds of Chrome tabs, the list goes on.

Despite knowing that most desktops are cluttered and full of distractions, I’m so often guilty of presenting my work as if it were on display at the MoMA.

...

While it’s great to present work in a sanitized format, it’s also important to remember that those scenarios don’t actually exist. In fact, a user’s environment is usually a busy, distraction-prone space.

...

What happens before, during, or after a user interacts with an interface is almost as important as the actual interface.


Call for Attention. UI Design Tips on CTA Buttons.

CTA超全攻略(不是)理论性的东西挺多的……

To make the sufficient system, it’s vital to pay attention to all the details.

...

A new article is devoted to the type called call-to-action (CTA) buttons covering their essence, role in the intuitive navigation and the importance of business goals.

...

its major aim is to induce people to take certain actions that present a conversion for a particular page or screen, for example purchase, contact, subscribe etc.

...

Apple says that CTAs in mobile UI should be at least 44Х44 pixels, while Microsoft recommends 34Х26 pixels.

...

To make the buttons even more noticeable it’s vital to choose sufficient color and shape

...

there are several popular scanning patternsfor web pages, among which “F” and “Z” patterns.

  • F-pattern is the most common for web pages with big amount of content such as blogs, news platforms.

  • Z-pattern is a typical model of scanning for landing pages or websites not loaded with copy and not requiring scrolling down the page, which means that all the core data is visible in the pre-scroll area.

...

To be more specific, microcopy includes buttons and menu copy, error messages, security notes, terms and conditions, as well as any kind of instructions on product usage.


5 ways to achieve better accessibility in UI design

如题,讲的就是无障碍设计。

Boldface and underlined links are more likely to be picked up on by users who skim read, or users with low vision.


Illustration Identities Are Our Thing

插画也需要设计规范:确定的方式、包含的内容、制定流程、输出文档。

Our work is centered around the notion that illustration can be an identity system in itself.

...

We talk about the strengths of each of these assets and see how illustration can fill in a hole. We distill these objectives into a list of goals.

...

We take all this into account and we survey current illustration/design trends and dig into other markets that parallel the goals set by the brand audit.

...

We begin with a small project that was defined earlier in the project brief. Ideally this initial project will encompass a range of illustrations common to the brand. 

...

This creation process allows us to highlight the details we will need to document in style guides and rules.

...

We create comprehensive documentation that catalogs all these visual choices. This guide is given to the client so future designers and illustrators can create new artwork that is aligned with the illustration identity.


Designing a better notification experience for iOS

一个完整的redesign过程……包括发现问题、思考解决方式、尝试不同的方案、反馈。

As humans we get used to things, even if it’s not well designed.

...

I’ve tried to look at dozens of different variations and ways to go about solving the problem for the sake of making sure the solution is as simpleintuitiveand familiar as possible. 


评论

© 断点延线 | Powered by LOFTER