qt ui指針和本類對象

重點 (Top highlight)

第1部分 (Part 1)

So you’re thinking about becoming a UX/UI designer, but are afraid to start? Don’t worry. It’s easier than you think. You only need a solid foundation and a lot of dedication. I can’t help you with the latter, so let’s focus on the former.

因此，您正在考慮成為UX / UI設計人員，但又害怕開始嗎？ 不用擔心 它比您想象的要容易。 您只需要堅實的基礎和很多奉獻精神。 對于后者，我無能為力，所以讓我們專注于前者。

This is going to be a part of a larger series of stories, based on the free chapters of Designing UI book. I tried to divide it into easy to digest chunks. Enjoy!

根據Designing UI book的免費章節，這將是更大系列故事的一部分。 我試圖將其劃分為易于消化的塊。 請享用！

如何創建圖像？ (How are the images created?)

Whether you’re making a low-fidelity wireframe, or a fully finalised, beautiful UI design, you’ll be using shapes and objects in a design tool of your choice. You can even use Keynote or Powerpoint to get familiar with shapes and their relations, and then do the transition to Sketch, Figma, Adobe XD or others.

無論是制作低保真線框，還是完成最終確定的精美UI設計，都將在您選擇的設計工具中使用形狀和對象。 您甚至可以使用Keynote或Powerpoint熟悉形狀及其關系，然后過渡到Sketch ， Figma ， Adobe XD或其他。

All currently available UI design tools work by manipulating vector shapes. That means that all you see is represented by numbers that define it. It also means the object can be stretched and enlarged without losing any quality — it simply makes the numbers bigger and re-creates it again.

當前所有可用的UI設計工具都可以通過操縱矢量形狀來工作。 這意味著您所看到的全部由定義它的數字表示。 這也意味著可以拉伸和放大該對象而不會損失任何質量-它只是使數字更大并重新創建它。

If you’re planning to design interfaces, be prepared that most of the time, it will be about moving various rectangular objects around. Rectangles are the most popular shape (right before ellipses) in all the interfaces.

如果您打算設計界面，請在大多數時候做好準備，這將是圍繞移動各種矩形對象。 矩形是所有界面中最流行的形狀(橢圓形之前)。

The general idea of UI design is about moving rectangles around in just the right way.

UI設計的一般思想是以正確的方式移動矩形。

UI design is about moving rectangles around. And the skill is all in knowing HOW to move them, WHERE and most importantly WHY.

UI設計是關于移動矩形。 而技能就是知道如何移動它們，在哪里，最重要的是為什么。

盒子模型 (The box model)

The Box model is the most basic way of defining a digital interface object both in design and in code. Most of the design we do works according to the box model, so it’s essential to get to know it well.

Box模型是在設計和代碼中定義數字接口對象的最基本方法。 我們所做的大多數設計都是根據盒子模型進行的，因此對它的了解非常重要。

It consists of four main elements:

它包含四個主要元素：

• Fill
  填
• Border
  邊境
• Outer margin
  外邊距
• Inner margin
  內緣

Fill should be pretty self-explanatory. It’s the background of our element. It can be a solid color, a gradient, an image or a mix of all of these.

填充應該很不言自明。 這是我們元素的背景。 它可以是純色，漸變，圖像或所有這些的混合。

Border is an outline around our object. We will dive into all the different kinds of borders in the next stories from this series.

邊框是圍繞我們對象的輪廓。 在本系列的下一個故事中，我們將深入探討所有不同類型的邊界。

Outer margin (often just called “margin”) is the area outside of our object. It allows us to position it with enough safe space concerning everything around it. It’s the blue area outside our rectangle.

外邊距 (通常稱為“邊距”) 是我們物體之外的區域。 它使我們能夠為周圍的一切放置足夠的安全空間。 這是矩形外部的藍色區域。

The inner margin is also called padding — this may come in handy when talking to developers. It means the more extensive it is, the bigger the safe area inside the object becomes. In the example above, it’s the darker area inside our colorful rectangle.

內部空白也稱為填充 -與開發人員交談時可能會派上用場。 這意味著范圍越廣，物體內部的安全區域就越大。 在上面的示例中，它是我們彩色矩形內較暗的區域。

定義屬性 (Defining properties)

尺寸 (Size)

Width and height (in points) define the size of an object. In most cases, we use W and H for short. As it’s a two-dimensional space, the width is a scale on the horizontal axis, while the height is a scale on a vertical one.

寬度和高度(以磅為單位)定義對象的大小。 在大多數情況下，我們簡稱W和H。 因為是二維空間，所以寬度是水平軸上的刻度，而高度是垂直軸上的刻度。

For short, points are not the same as pixels. The resolutions and pixel-densities are a topic for another article, so to keep it short: Points are vector representation of pixels, that are dependant on the resolution. On modern, very pixel-dense displays 1 point can be 4 pixels or more. The reason for this is to have large enough elements, but also give them enough sharpness and precision.

簡而言之，點與像素不同。 分辨率和像素密度是另一篇文章的主題，因此請盡量簡短：點是像素的矢量表示，取決于分辨率。 在現代的像素密集型顯示器上，1點可以是4像素或更多。 這樣做的原因是要有足夠大的元素，但還要給它們足夠的清晰度和精度。

The width and height are always of the smallest possible rectangular box that can contain the object — even if the object itself has an irregular shape.

寬度和高度始終是可能包含該對象的最小矩形框，即使該對象本身具有不規則形狀也是如此。

位置 (Position)

The position of the object is a set of numbers on the X and Y axis, defined by the artboard that contains it. The X is the position on the horizontal axis, while the Y is the position on the vertical one.

對象的位置是X和Y軸上的一組數字，由包含它的畫板定義。 X是水平軸上的位置，而Y是垂直軸上的位置。

Ok, that’s easy for a square. But how about a circle? Or some random blob? Irregular objects positions are the position of their bounding box that contains the actual shape within.

好的，對于廣場來說很容易。 但是圓呢？ 還是一些隨機斑點？ 不規則對象的位置是其邊界框的位置，其中包含實際形狀。

角度 (Angle)

Angle defines the rotation of our object going clockwise — the default being 0°. Rotation can also be a negative number. It’s worth remembering that a -15° rotation is the same as 360°-15°, which equals 345°.

角度定義了對象順時針旋轉的角度-默認值為0°。 旋轉也可以是負數。 值得記住的是，-15°旋轉與360°-15°相同，等于345°。

In order to have a consistent interface, it’s best not to rotate objects by hand, but instead enter the right angle from the keyboard as it is way more precise than manually turning the object point by point.

為了擁有一致的界面，最好不要手動旋轉對象，而應通過鍵盤輸入直角，因為與手動逐點旋轉對象相比，此方法更加精確。

If we Flatten the object (there’s a button that “does it”), it resets the angle to 0, but it is still rotated — only the new perspective becomes the base for further rotation.

如果我們展平對象(有一個“執行它”的按鈕)，它將角度重置為0，但仍會旋轉-只有新的透視圖才成為進一步旋轉的基礎。

Rotating circles will of course yield no visible result, unless they are filled with a gradient or a photo.

旋轉的圓圈當然不會產生可見的結果，除非它們充滿漸變或照片。

邊框半徑 (Border radius)

Many studies show, that rounded shapes are considered more friendly than sharp ones. To define the level of roundness, we use a property known as border radius (sometimes corner-radius).

許多研究表明，圓形比鋒利的形狀更友好。 為了定義圓度，我們使用一個稱為邊界半徑(有時為圓角半徑)的屬性。

A border-radius is a number. Just like the width and height, it’s also presented in points. The larger that number, the larger the roundness of the corners of our shape. You can use it for all of the edges at once or set them individually.

邊界半徑是一個數字。 就像寬度和高度一樣，它也以磅表示。 該數字越大，形狀拐角的圓度越大。 您可以一次將其用于所有邊緣，也可以分別設置。

In general, even slightly rounded corners (between 2 and 6p) are considered more friendly than sharp ones (of 0 p). However, it’s good to have consistency in the roundness. The grid base unit that we select should define the border-radius. It should also match its surroundings.

通常，即使是稍微倒圓的角(介于2和6p之間)也被認為比尖的角(0 p)更友好。 但是，最好保持圓度一致。 我們選擇的網格基本單位應定義邊界半徑。 它也應該與周圍環境匹配。

Different border radii in the same object can make a great button if it also matches the brand guidelines (i.e., the logo also has a similar pattern).

如果同一對象上的不同邊框半徑也符合品牌準則(即徽標也具有相似的圖案)，則可以制作一個精美的按鈕。

If you decide to make your buttons that way, remember to be consistent with them across all the screens.

如果決定以這種方式制作按鈕，請記住在所有屏幕上都與它們保持一致。

下一步是什么？ (What’s next?)

Thanks for getting this far! Hope you’re on your way to making some shapes!

感謝您的幫助！ 希望您正在制作一些形狀！

This has been the 1st part of the series. Check out Part 2

這是該系列的第一部分。 查看 第2部分

I will cover fills, borders, shadows, blurs and more in the next stories from the series.📕 You can also DOWNLOAD this chapter as a free PDF here. I wrote a whole 📘 420+ page ebook on designing UI’s. 👨🏻?💻 By day I work at HYPE4.com

在本系列的下一個故事中，我將介紹填充，邊界，陰影，模糊等內容。📕 您也可以在此處以免費PDF格式下載本章。 我寫了整本420 英鎊的電子書來設計UI 。 💻白天我在HYPE4.com工作

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/all-you-need-to-know-about-ui-design-shapes-and-objects-619c13a8523c

qt ui指針和本類對象

總結

以上是生活随笔為你收集整理的qt ui指针和本类对象_您需要了解的有关UI设计的形状和对象的所有信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。