• Không có kết quả nào được tìm thấy

refactoring ui.pdf


Academic year: 2023

Chia sẻ "refactoring ui.pdf"

Xem thêm ( Trang)

Văn bản

If the navigation bar is at the top of the page, you are making a mistake. Before you design a few features, you don't even have the information you need to decide how the navigation should work.

Detail comes later

Hold the color

By designing in grayscale, you're forced to use spacing, contrast, and size to do all the heavy lifting. It's a little more challenging, but you end up with a clearer interface with a strong hierarchy that's easy to enhance with color later.

Don’t over-invest

Don’t design too much

Work in cycles

You're getting frustrated trying to figure this thing out using just a design tool and your imagination. Build the real thing as soon as possible so your imagination doesn't have to do all the hard work.

Be a pessimist

The thing is, a comment system without attachments would still be better than a no comment system, but since you planned to include it from day one, you have nothing to post. Build a simple version first and you'll always have something to lean on.

Choose a personality

Font choice


While it's not super practical to try to pick colors using just psychology - a lot of it is just about what looks good on you - it can be useful to think about when you're trying to understand why you think one color is the right fit.

Border radius


Words are everywhere in a user interface, and choosing the right ones is just as (if not more) important than choosing the right color or font.

Deciding what you actually want

Limit your choices

Define systems in advance

It's a little more work up front, but it's worth it—it'll save you a ton of decision-making fatigue.

Designing by process of elimination

When building such systems, you only have to go through the effort of choosing initial values ​​once, instead of every time you design a new part of the user interface. When you're limited to a set of options that all look noticeably different, choosing the best one is easy.

Systematize everything

If one of the outer options looks best, do another comparison with that option as the "middle" value and make sure there is no better choice. You don't need to define all of these things upfront, just make sure you approach design with a systems-focused mindset.

Hierarchy is Everything

Not all elements are equal

Size isn’t everything

Stay away from font weights below 400 for interface work - they can work for large headlines, but are too hard to read at smaller sizes.

Don’t use grey text on colored backgrounds

Making the text closer to the background color is what actually helps create hierarchy, not making it light gray. Handpicking a color in this way makes it easy to reduce the contrast without the text looking washed out.

Emphasize by de-emphasizing

Labels are a last resort

You might not need a label at all

Combine labels and values

When you can combine labels and values ​​into one unit, it's much easier to give each piece of data meaningful style without sacrificing clarity.

Labels are secondary

Minimize the tag by making it smaller, reducing the contrast, using a lighter font, or a combination of all three.

When to emphasize a label

Simply using a darker color for the label and a slightly lighter color for the value is often sufficient.

Separate visual hierarchy from document hierarchy

A lot of the time, section titles seem more like labels than headings - they're supporting content, they shouldn't steal all the attention. Don't let the element you use influence how you choose to style it - choose elements for semantic purposes and style them as you need to create the best visual hierarchy.

Balance weight and contrast

Using contrast to compensate for weight

A simple and effective way to do this is to lower the contrast of the icon by giving it a softer color. Reducing the contrast works like a counterbalance, making heavier elements feel lighter even though the weight hasn't changed.

Using weight to compensate for contrast

Semantics are secondary

Secondary actions should be clear but not prominent. Outline styles or less contrasting background colors are great options. Tertiary actions should be visible but unobtrusive. Designing these actions as links is usually the best approach.

Destructive actions

Layout and Spacing

Start with too much white space

White space should be removed, not added

A better approach is to start by giving something a lot of space, then remove it until you're happy with the result. You might think you'd end up with a lot of white space this way, but in practice, what might seem like "a little too much" when focusing on an individual element ends up being closer to "enough" in the context of a complete UI.

Dense UIs have their place

Establish a spacing and sizing system

A linear scale won’t work

Defining the system

The values ​​at the small end of the scale should start out pretty close together and gradually space more apart as you get further up the scale.

Using the system

A spacing and sizing system will help you create better designs, with less effort, in less time.

You don’t have to fill the whole screen

You don't need to make everything full-width just because something else (like your navigation) is full-width. Give each element only the space it needs – don't make something worse just to make it match something else.

Shrink the canvas

Thinking in columns

This makes the design more balanced and consistent without compromising the optimal width of the form itself.

Don’t force it

Grids are overrated

Not all elements should be fluid

If you make the screen wider, the sidebar also gets wider, taking up space that could be better used by the main content area. In this situation, it makes much more sense to give the sidebar a fixed width that is optimized for its content.

Don’t shrink an element until you need to

Instead of sizing elements like this based on a grid, give them a maximum width so they don't get too big, and force them to shrink only when the screen gets smaller than that maximum width. Don't be a slave to the grid - give your components the space they need and don't make any compromises until absolutely necessary.

Relative sizing doesn’t scale

For example, on small screens, say you reduce the size of your main copy to 14px to keep line length in check. That's only 1.5-1.7x the size of the 14px body copy - a completely different relationship than what made sense on desktop screens.

Relationships within elements

This means that there is no real relationship at all, and that there is no real benefit in trying to define the head size relative to the body copy size. Let go of the idea that everything has to scale proportionally – giving yourself the freedom to refine things independently makes it much easier to design for multiple contexts.

Avoid ambiguous spacing

At best, the user has to work harder to interpret the user interface, and at worst, it means accidentally placing the wrong data in the wrong field. When you rely on whitespace to connect a group of elements, always make sure there is more space around the group than there is inside it - interfaces that are difficult to understand always look worse.

Designing Text

Establish a type scale

Choosing a scale

Browsers all handle subpixel rounding a bit differently, so it's best to avoid fractional sizes if you can. This approach can work well if you're defining a type scale for long-form content like an article, but for interface design the leaps you get from using a modular scale are often a bitto limitation.

Avoid em units

If you give an element a font size of 1.25em (20px by default), inside that element 1em is now equal to 20px. This means that if you give one of the nestedelements a font size of .875em, the actual calculated font size is 17.5px, not a value from your type scale.

Use good fonts

Play it safe

Ignore typefaces with less than five weights

Optimize for legibility

Trust the wisdom of the crowd

Steal from people who care

Developing your intuition

Keep your line length in check

Dealing with wider content

Baseline, not center

When you align mixed font sizes relative to their baseline, you take advantage of the alignment reference your eyes already perceive. The result is a simpler, cleaner look than what you get if you center two pieces of text and offset their baselines.

Line-height is proportional

Accounting for line length

When lines of text are spaced too close, it's easy to finish reading a line of text at the right edge of a page and then jump all the way back to the left edge, unsure of which line is next. The further your eyes have to jump horizontally to read the next line, the easier it is to lose your place.

Accounting for font size

Line height and font size are inversely proportional - use a larger line height for small text and a shorter line height for large text.

Not every link needs a color

Instead, emphasize most links in a more subtle way, such as simply using a heavier font weight or darker color. If you have links in your UI that are really helpful and aren't part of the main path a user takes through the app, consider adding an underline or just changing the color on the fly.

Align with readability in mind

Don’t center long form text

But if something is longer than two or three lines, it will almost always look better left-aligned. Not only will it fix the alignment problem, but it will make your design feel more stable as well.

Right-align numbers

Hyphenate justified text

Justified text works best in situations where you're trying to mimic a printed look, perhaps for an online magazine or newspaper. Even then, left-aligned text works fine too, so it's really just a matter of preference.

Use letter-spacing effectively

Tightening headlines

Improving all-caps legibility

Working with Color

Ditch hex for HSL

Without saturation, hue is irrelevant - rotating the hue when saturation is 0% doesn't actually change the color at all. 0% lightness is pure black, 100% lightness is pure white, and 50% lightness is a pure color at the given hue.


You need more colors than you think

What you actually need

As with gray, you need a variety (5-10) of lighter and darker shades to choose from. If you're building something where you need to use color to distinguish or categorize similar elements (like lines in a graph, events in a calendar, or labels in a project), you might need even more bold colors.

Define your shades up front

Choose the base color first

There's no real scientific way to do this, but for primary and accent colors, a good rule of thumb is to pick a shade that would work well as a button background.

Finding the edges

Start with a color that matches the shade of your base color, and adjust the saturation and lightness until you're satisfied.

Filling in the gaps

What about greys?

It’s not a science

Don’t let lightness kill your saturation

It's subtle but little details like this add up, especially when a color is applied to a large part of a UI.

Use perceived brightness to your advantage

But what's interesting here is that perceived brightness doesn't just change linearly from darkest to lightest shade—instead, there are three distinct local minima (red, green, and blue) and three maxima local (yellow, cyan and magenta).

Changing brightness by rotating hue

While this works to lighten or darken a color, you often lose some of the color's intensity—the color also appears closer to white or black, not just lighter or darker. Of course you can also combine these approaches, getting some of the brightness by adjusting the tint and some by adjusting the light.

Greys don’t have to be grey

Color temperature

If you don't, those shades will look a little washed out compared to the grays that are closer to 50% lightness. How much you want to saturate your gray is entirely up to you - just add a little if you just want to tilt the temperature slightly, or increase it if you want the interface to lean heavily in one direction or the other.

Accessible doesn’t have to mean ugly

Flipping the contrast

Rotating the hue

The color is still there to support the text, but it's much less in your face and doesn't interfere with as much other action on the page. Since some colors are lighter than others, one way to increase contrast without getting close to white is to rotate the hue toward a lighter color such as cyan, magenta, or yellow.

Don’t rely on color alone

Creating Depth

Emulate a light source

Light comes from above

In this case, it's clear that the panels are set, as there's a shadow at the top, indicating that the lip above is blocking the light, and the bottom is lighter, indicating it's facing up.

Simulating light in a user interface

Manually select a lighter color instead of using semi-transparent white for best results - simply overlaying white can suck up the saturation of the base color. Then you have to consider the fact that the raised element will prevent some of the light from reaching the area below the element.

Don’t get carried away

Use shadows to convey elevation

Large shadows are ideal for modal dialogs, where you really want to capture the user's attention:.

Establishing an elevation system

Combining shadows with interaction

Don't think about the shadow itself, think about where you want the element to sit on the z-axis and assign it a shadow accordingly.

Shadows can have two parts

Using two of these shadows gives you a lot more control than you would with a single shadow; you can keep the larger shadow nice and subtle while standing still.

Accounting for elevation

Even flat designs can have depth

Creating depth with color

Using solid shadows

Overlap elements to create layers

Overlapping images

Working with Images

Use good photos

Tài liệu tham khảo

Tài liệu liên quan

After investigating which factors make it more likely that regulatory information is easily accessible we also would like to know if more access to regulatory information goes

I love this film because when I watch it I feel very glad, feeling like returned to my childhood.. Jerry is very scare

Intel IT recognizes that employees want access to information and applications anytime, anywhere, enabling them to work in more flexible and productive ways.. These resources

- By the end of the lesson, students will be able to use the question “What weather do you like?” to talk about your favorite weather and contrast it with2. “What’s the

A happy song might appear to make an angry person angrier, yet it is not the music itself that is creating the anger; rather it is the positive effect of the music.. The angry

I would like to be an architect in the future because I want to be design big houses for my town.. I think it is an

You could make better progress if you (attend) class regularly.. If I (know) his telephone number, I'd give it

Because a business card is so small, you want to make sure you don’t try to include too much information.. It is also very important for it to be eye catching, otherwise the person you

Refactoring UI: Hierarchy is Everything Try and stick to two or three colors: ● A dark color for primary content like the headline of an article ● A grey for secondary content like