ux设计_ux的冒险

ux设计

UX历险记-第2部分 (Adventures in UX — Part 2)

This week I’ve been studying up on Visual Design and Branding basics, progressing through the course of the same name produced by creative course platform SuperHi. I’ve come across a few tips I’d like to share which I think are extraordinarily useful. Now, I’m speaking as someone who didn’t go to a university to study Graphic Design (my degree instead was in Illustration), so I’m unsure as to how many “Duh! Everybody knows that!” reactions this is likely to cause. I have, however, worked for the last four and half-ish years as a Graphic Designer for a few companies and I found these tips to be some pretty tasty jazz.

本周，我一直在研究视觉设计和品牌基础知识，并逐步完成由创意课程平台SuperHi制作的同名课程。 我遇到了一些我想分享的技巧，这些技巧我认为非常有用。 现在，我是作为没有上大学学习平面设计的人说话的(我的学位是插图学的)，所以我不确定到底有多少“杜！ 每个人都知道！” 可能引起的React。 但是，在过去的四年半里，我曾在几家公司担任平面设计师，而我发现这些技巧可以说是相当不错的爵士乐。

Anyway, enough gabbling on my part, here are some tips for designing websites and apps. The tips covered focus around designing with Figma, though their fundamental essence is universal. Figma is a free professional design program that works through your browser.

无论如何，就我而言，这是足够的赌博，这里有一些设计网站和应用程序的技巧。 这些技巧涵盖了围绕Figma进行设计的重点，尽管它们的基本本质是通用的。 Figma是一个免费的专业设计程序，可通过您的浏览器运行。

Figma homepage Figma主页的屏幕截图

1)设计像素的相关倍数以在间距文本元素时保持视觉一致性。 (1 ) Design in related multiples of pixels for visual consistency when spacing text elements.)

Consistent use of white space between objects can help to set visual style and reading rhythm for all of your components (page sections, tiles, cards, etc.). It can also be used as a style guide for making new components. While not only setting a style for one project, this measurement system can be used universally as a branding tool for all of your work, generating a consistent visual aesthetic.

始终如一地使用对象之间的空白可以帮助您设置所有组件(页面部分，图块，卡片等)的视觉样式和阅读节奏。 它也可以用作制作新组件的样式指南。 该测量系统不仅可以为一个项目设置样式，还可以普遍用作您所有工作的品牌工具，从而产生一致的视觉美感。

During my experimentation I used a system based on multiples of 8 pixels* (8, 16, 24, 32… etc.) as this was the example system used by the course I had enrolled on. However, you can choose any set of multiples depending on your own sense of aesthetics as a Designer. You will need to bear in mind that the important thing here is limiting yourself to using one scale per project for a cohesive design (only multiples of 5, or 8, or whatever number you choose). You’re not going to get that sense of unity between all the components if you switch up the measuring system you use for different pages and components. Furthermore, these measurement systems can be applied to pretty much anything and everything: layout grid; type sizes; icon stroke weight; icon spacing; margins; padding…

在实验期间，我使用了基于8像素*(8、16、24、32等)的倍数的系统，因为这是我所注册课程所使用的示例系统。 但是，您可以根据自己作为设计师的审美意识来选择任何一组倍数。 您将需要牢记，这里的重要事情是限制您自己为每个项目使用一个比例进行内聚设计(仅5或8的倍数，或者您选择的任何数字)。 如果您切换用于不同页面和组件的测量系统，您将不会在所有组件之间获得统一感。 而且，这些测量系统几乎可以应用于所有事物：布局网格；布局网格；布局和布局。 字体大小； 图标笔划粗细； 图标间距； 利润; 填充…

*Edit: Google and Apple both prefer designers to use an 8pt grid system when designing everything from typography and icons to layouts for device applications. This Medium article by Vitsky explains why, it also goes on to provide an amazing wealth of related information, so please do check it out. Choosing your own system of multiples is still a valid suggestion to try out particularly when it comes to type-size though as with icons, and visual rhythm of the layout, it is strongly suggested you base your line heights on the 8pt grid system.

*编辑：Google和Apple都希望设计师在设计从排版和图标到设备应用程序布局的所有内容时都使用8pt网格系统。 Vitsky在 这篇中型文章中 解释了原因，并继续提供了惊人的大量相关信息，因此请务必进行检查。 选择自己的倍数系统仍然是一个有效的建议，尤其是在涉及字号时，尽管像图标一样，以及布局的视觉节奏，还是强烈建议您尝试行高基于8pt网格系统。

2)首先设计类型系统，然后再设计其他任何东西 。 (2) Create a type system first before designing anything else.)

I mean it, stop pushing shapes around and pay attention. Before doing this you will need to pick the typefaces you’re going to use for your project. You should try to limit the selection to two, or three at most — remember, each typeface has all those nifty font weights to help you with variation.

我的意思是，不要再四处推挤形状并注意。 在执行此操作之前，您将需要选择将用于项目的字体。 您应该尝试将选择限制为最多两个或三个–请记住，每个字体都具有所有这些漂亮的字体粗细来帮助您进行变化。

When building websites there are 6 values for header text (headers, sub-headers, section titles, etc.) available to us in the code. These are numbered H1 to H6. H1 is the largest size of header that will appear in your project, with H6 being the smallest. Additionally, you will need a size for body copy, a smaller body copy size for when you need to fit text into tiles or cards, and sizes/styles for navigation links for nav, body hyperlinks, footer and any tags that may appear within components as labels.

建立网站时，代码中提供了6个标题文本值(标题，子标题，栏目标题等)。 这些编号为H1至H6。 H1是将出现在您的项目中的头文件的最大大小，H6是最小的。 此外，您将需要一个用于正文复制的大小，一个较小的正文复制大小，用于当您需要将文本放入图块或卡片中时所需的大小，以及用于导航，正文超链接，页脚和组件中可能出现的任何标签的导航链接的大小/样式作为标签。

There are sites you can use to help you put together your type system*, such as type-scale.com. Unfortunately, there is no one-stop shop approach to determining type scaling as it’s all down to the typefaces you choose. However, bear this tip in mind to make life a little easier. A good rule of thumb for setting line height is between 1.2 and 1.5 times (x) the type size, depending on the typeface selected. In Figma you can achieve these values by simply clicking on a text box and in the right hand design properties pane click into the entry field for line height and type 120% or 150% as you desire. Modify as you wish to find a value you feel more comfortable with. Increasing line height will help with legibility up to a certain point, beyond which you move into inhibiting territory where the gaps between the text cause the lines to feel floaty and disconnected as a cohesive grouping. As another rule of thumb you will usually find that by increasing the type size you will also need to decrease the line height. This is vice versa for small text. You may find that the lines of text need a little more separation from each other to help with readability.

您可以使用一些网站来帮助您组合类型系统*，例如type-scale.com 。 不幸的是，没有一站式的方法来确定类型缩放，因为这完全取决于您选择的字体。 但是，请记住此提示，以使生活更轻松。 根据所选字体的不同，设置线条高度的良好经验法则是字体大小的1.2到1.5倍。 在Figma中，您只需单击一个文本框即可获得这些值，然后在右侧设计属性窗格中，单击输入行高，然后根据需要输入120％或150％。 根据需要进行修改，以找到自己更喜欢的值。 增加行高将有助于提高清晰度，直到超过特定点为止，您将移入禁止区域，在该区域内文本之间的间隙会导致行感觉浮动并作为粘性分组断开连接。 作为另一个经验法则，通常会发现，通过增加字体大小，还需要减小行高。 反之亦然。 您可能会发现文本行之间需要更多的分隔以提高可读性。

So… hold on, we were talking about making a type system, not line height. What gives? Here’s the trick, you can use similar values from 1.01 upwards to create your type system, if you look at type-scale.com some nice values which create a decent array of diminishing sizes from your H1 (let’s say set at a size of 72 pixels) are Major Third — 1.250 and Perfect Fourth — 1.333, slap bang in the sweet spot zone between the 1.2 and 1.5 value range for tweaking line height.

所以……等等，我们正在谈论的是创建一个字体系统，而不是行高。 是什么赋予了？ 这是诀窍，如果您查看type-scale.com ，则可以使用1.01以上的相似值来创建类型系统，如果一些不错的值可以从H1创建一个大小逐渐减小的体面数组(比如说设置为72的大小)像素)分别是“大三分”(1.250)和“完美四分”(1.333)，在调整点线高度的1.2和1.5值范围之间的最佳点区域有拍击声。

Hey, that’s a lot of numbers, I get it. So here it is basically. To make your type system make a text box and type in a few words in the typeface you want to use for headers. Make that type a size you would want to use as the biggest size on your website or app, let’s say 72 pixels. Now duplicate that text box (copy and paste) and drag it below the first, or hit alt and drag the box for a duplicate. All you have to do now is pick a number between 1.2 and 1.5, in this case we will go with 1.3 (what type-scale.com calls a Perfect Fourth, rounded down to the nearest single decimal place). Now divide 72 by 1.3. Stop, you don’t need a calculator. Make sure your text box is selected and go into the design properties pane on the right hand side of the screen in Figma. Click into the type size entry field making sure the cursor sits at the end of the number and type /1.3, now hit enter or return, and that’s it. Figma does all the calculation for you. Now it’s just a process of repeating the steps. Duplicate the text box, drag it down, resize it by the same value, 1.3. The results will return numbers with multiple decimal places. There’s nothing wrong with using numbers with lots of decimal places in your measurements. For my own designing I feel that rounding text sizes up or down to one or two decimal places is much simpler to work with (1.3, or, 1.33 rather than 1.33333). You may ask yourself “I want a H3 larger than this”, which is totally fine. Bop it up or down in size a few pixels depending on your judgement — this is your design, alter the system how you will, do it your way. When you have 6 boxes of descending type sizes step back and brush off your hands, you’re done.

嘿，有很多数字，我明白了。 所以这里基本上是。 为了使您的打字系统成为一个文本框，并在您要用作标题的字体中输入一些单词。 使该类型成为您要用作网站或应用程序上最大尺寸的尺寸，例如72像素。 现在，复制该文本框(复制并粘贴)并将其拖到第一个文本框下方，或者按alt并将其拖到副本框中。 您现在要做的就是选择一个介于1.2和1.5之间的数字，在这种情况下，我们将使用1.3( type-scale.com称之为完美四度，四舍五入到最接近的小数点后一位)。 现在将72除以1.3。 停止，您不需要计算器。 确保已选中您的文本框，然后进入Figma屏幕右侧的设计属性窗格。 单击进入类型大小输入字段，确保光标位于数字的末尾并键入/1.3，现在按回车或返回，仅此而已。 Figma为您完成所有计算。 现在，这只是重复步骤的过程。 复制文本框，将其向下拖动，并用相同的值1.3调整其大小。 结果将返回带有多个小数位的数字。 在测量中使用带有很多小数位的数字没有错。 对于我自己的设计，我认为将文本大小四舍五入到一个或两个小数位要容易得多(1.3或1.33而不是1.33333)。 您可能会问自己“我想要一个大于此的H3”，这完全没问题。 根据您的判断将其放大或缩小几个像素-这是您的设计，更改系统方式，按自己的方式进行。 当您有6个递减大小的盒子时，退后一步并刷掉双手，就完成了。

If you want more of a difference in the scaling between sizes increase the decimal value (e.g. 1.4, 1.5), if however you desire a more subtle scaling lower the decimal value (1.2, 1.1). Keep in mind that if you want to do this you will have to start over from the beginning with the largest type size (H1) making fresh duplicates as you scale down to have a type system of related scaling, but you get what I’m saying). And that’s it.

如果要在大小之间的缩放比例上有更大的差异，请增加小数点(例如1.4、1.5)，但是，如果需要更细微的缩放比例，则减小小数点(1.2、1.1)。 请记住，如果要执行此操作，则必须从头开始，使用最大的字号(H1)从头开始制作新副本，同时按比例缩小以具有相关比例的类型系统，但是您会得到说)。 就是这样。

Now, here are some quick pointers for the rest of the elements you may want reference sizes for. The Internet standard for body copy is 16 pixels but in contemporary designs these sizes generally bump up to around 18, 20, or in some cases 22 pixels to aid in accessibility, as a boost to readability. Small body copy is usually sized within a few pixels of the main body type size. Links for navs and footers are usually capitalised. To help match capitalised links with body size to ensure they don’t unbalance the design, resize them until they feel more balanced (not too big or small). You may find lightening the shade of links may also help when you’re later finessing the type hierarchy within the components.

现在，这是一些您可能需要参考尺寸的其余元素的快速指针。 人体复制的互联网标准为16像素，但在现代设计中，这些尺寸通常会增加到18、20左右，有时甚至达到22像素，以帮助实现可访问性，从而提高可读性。 小主体副本的大小通常在主体类型大小的几个像素之内。 导航和页脚的链接通常使用大写。 为了使大写链接与主体大小匹配，以确保它们不会使设计不平衡，请调整它们的大小，直到感觉更平衡为止(不要太大或太小)。 当您稍后在组件中细化类型层次结构时，您可能会发现减轻链接的阴影可能也会有所帮助。

If the size of the link text is pulling attention away from where it needs to be, e.g. from headers, copy, imagery or call-to-action, then that’s probably a good sign you need to reduce the size a bit. Hyperlinks for the body copy can be identified by simply giving them a unique colour, or shade, and using this consistently across the project. This is to ensure that hyperlinks are discernible from their surroundings, encouraging interaction. Try to limit the use of colour in your project so that these elements stand out and are not confused for any other element. Depending on the colours and/or shade you have selected there may well be people with colour blindness or a visual impairment that could struggle to see it. Keep this in mind for when you’re conducting user testing.

如果链接文本的大小将注意力从标题，标题，副本，图像或号召性用语中转移出来，那么这可能是一个好兆头，您需要稍微减小大小。 正文副本的超链接可以通过简单地为其赋予唯一的颜色或阴影，并在整个项目中一致地使用它来进行标识。 这是为了确保可以从周围环境中识别出超链接，从而鼓励交互。 尝试限制项目中颜色的使用，以使这些元素脱颖而出，并且不会与其他任何元素混淆。 根据您选择的颜色和/或阴影，可能会有色盲或视力障碍的人难以看清它。 在进行用户测试时，请记住这一点。

To round-off this tip (phew!) here are a few words of advice. Try to keep your hands away from letter spacing. Your biggest text may need the spacing decreased and your capitalised links may benefit from a slight widening of their spacing. Try to avoid going in and arbitrarily editing the letter spacing for every little thing. Limit the fiddling to where it is necessary. When you have your type system ready add it to the Text Styles of your Figma document for ease of applying to you design.

为了完善这个技巧(phe！)，这里有几点建议。 尝试使您的手远离字母间距。 最大的文本可能需要减小间距，大写的链接可能会因间距稍宽而受益。 尽量避免进入并随意编辑每个小东西的字母间距。 将摆放限制在必要的地方。 准备好字体系统后，将其添加到Figma文档的“文本样式”中，以便于应用到设计中。

*Edit: in addition to type-scale.com I’ve come across a plugin called Font Scale which is easily found browsing the plugins list inside Figma. It does the same job as typescale, looks and functions very similarly and allows you to have a customisable type system generated instantly direct to your Figma project. Awesome! For those looking for more please also check out the extremely useful tool Gridlover.

*编辑：除了type-scale.com外，我还遇到了一个名为Font Scale的插件，可以在Figma内的插件列表中轻松找到它。 它的功能与Typescale相同，外观和功能非常相似，并允许您直接将可定制的类型系统生成到Figma项目中。 太棒了！ 对于那些寻求更多帮助的人，还请查看非常有用的工具Gridlover 。

3)灰度设计。 (3) Design in greyscale.)

As soon as you have your type system, create a palette of swatches. Use the H/S/L colour selector and start by choosing a black. Pick a very dark grey over a pure black as the contrast with pure black, especially against white, is very sharp and it can unbalance your design (since you’re most likely starting things off with a blank white frame). When you do this steer clear of picking a completely desaturated shade. Instead, choose a colour with a small amount of hue to create a palette which is softer on the eye and visually pleasing. Next, make a shape, make it the black you’ve chosen, duplicate it, increase the lightness value by say ten, then repeat. For each new duplicate add another 10, or whatever increment you chose, and carry on making duplicates until you end up with white. Add these swatches to the colour library in Figma for ease of use when building your design.

一旦有了类型系统，就创建一个色板调色板。 使用H / S / L颜色选择器并从选择黑色开始。 在纯黑色上选择非常深的灰色，因为与纯黑色(尤其是白色)的对比非常鲜明，并且可能使您的设计失去平衡(因为您很有可能从空白的白色边框开始)。 执行此操作时，请避免选择完全饱和的阴影。 取而代之的是，选择一种具有少量色相的颜色来创建调色板，使其在眼睛上更柔和，视觉上也令人愉悦。 接下来，制作一个形状，使其成为您选择的黑色，复制它，将亮度值增加10，然后重复。 对于每个新的重复项，再添加10个或您选择的任何增量，然后继续进行重复项，直到最终得到白色。 将这些色板添加到Figma中的颜色库中，以便在构建设计时易于使用。

Hopefully these tips will provide some guidance for preparing your next design project and may help reduce some of the fear of staring at a blank canvas wondering where to start. Until next time folks!

希望这些技巧将为准备下一个设计项目提供一些指导，并可能有助于减轻一些盯着一块空白画布想知道从哪里开始的担心。 直到下一次乡亲们！

翻译自: https://uxdesign.cc/adventures-in-ux-cb2e7ad88506

ux设计