基于正點原子觸摸屏ui設計

定義? (Defining ?)

The golden number, or “phi” in reference to the sculptor Phidias, is equal to 1/2(√5+1) or about 1.618.

相對于雕刻家菲迪亞斯而言，黃金數或“ phi”等于1/2(√5+ 1)或約1.618。

?的簡短歷史 (A short history of ?)

The discovery of the golden section dates back to antiquity and its definition has been enriched over the centuries, including the Middle Ages.

黃金分割的發現可以追溯到上古，其定義在包括中世紀在內的多個世紀中都得到了豐富。

The major contributions to mathematical research on the golden section are those of Euclid, Thales and Pythagoras, but it is undoubtedly to Fibonacci that we owe the most significant advances with his Liber Abaci, a work in which we discover the famous Fibonacci sequence, an arithmetic sequence in which the ratio of one figure to the previous one is equal to ?:

對黃金分割數學研究的主要貢獻是歐幾里得，泰雷茲和畢達哥拉斯的研究，但是毫無疑問，斐波那契最重要的進步歸功于他的Liber Abaci，這項工作使我們發現了著名的斐波那契數列，一種算術一個數字與上一個數字的比率等于?的序列：

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987

0、1、1、2、3、5、8、13、21、34、55、89、144、233、377、610、987

The expression “golden section” is a legacy of Leonardo da Vinci, who used the expression “sectio aurea” (golden section) to refer to what Luca Pacioli called divine proportion, or Kepler’s “jewel of geometry”.

“黃金分割”一詞是達芬奇(Leonardo da Vinci)的遺產，萊昂納多·達·芬奇(Leonardo da Vinci)使用“黃金分割”(sectio aurea)一詞指盧卡·帕喬利(Luca Pacioli)所稱的神圣比例，即開普勒的“幾何珠寶”。

金色矩形的流行 (Popularity of the golden rectangle)

Even if the aesthetic qualities of the golden rectangle seem to be unanimously agreed upon, let’s keep in mind that it is questionable. It was in order to assess the aesthetic qualities of the Golden Rectangle by facts that Gustav Fechner, a German psychologist, conducted tests in 1874. He presented his subjects with 10 white rectangles on a black background, ranging in size from f=1 to f=2.5, each of equal area. To test his hypothesis that the golden rectangle, here f=1.62, would naturally be preferred by his panel (which was composed of people of both sexes, chosen without discriminating factors), he asked each person to choose a most popular rectangle, then a least popular rectangle. The results showed a preference for the golden rectangle, as the following results show:

即使似乎一致同意了金色矩形的美學品質，但請記住，這是有問題的。 為了通過事實評估黃金矩形的美學品質，德國心理學家古斯塔夫·費希納(Gustav Fechner)于1874年進行了測試。他向被攝對象展示了10個黑色背景上的白色矩形，大小從f = 1到f = 2.5，每個面積相等。 為了檢驗他的假設，即小組成員自然會首選此處為f = 1.62的金色矩形(由男女兩性組成，選擇時不帶歧視性因素)，他要求每個人選擇一個最受歡迎的矩形，然后選擇一個最不流行的矩形。 結果顯示偏愛金色矩形，如下結果所示：

Gustav Fechner asked each person to choose a most popular rectangle, then a least popular rectangle.古斯塔夫·費希納(Gustav Fechner)要求每個人選擇一個最受歡迎的矩形，然后再選擇一個最受歡迎的矩形。 Results of the Gustav Fechner study.Gustav Fechner研究的結果。

Since Fechner, many other researchers have re-tested the same hypothesis under different conditions. If in general the golden rectangle remains the favourite, it should be noted that this preference is rarely very marked, and never precisely on the golden ratio.

自費希納(Fechner)以來，許多其他研究人員在不同條件下重新檢驗了相同的假設。 如果一般來說，黃金矩形仍然是最喜歡的，應該注意的是，這種偏好很少被非常明顯地標記出來，并且永遠不會精確地位于黃金比例上。

?的幾何結構 (Geometric structures of ?)

Contrary to popular belief, there is not just one golden rectangle strictly speaking. There is a rectangle whose ratio of the largest side to the smallest side is equal to ?. However, other constructions are possible:

與普遍的看法相反，嚴格說來，不只是一個金色矩形。 有一個矩形，其最大邊與最小邊之比等于。 但是，其他構造也是可能的：

There is not just one golden rectangle strictly speaking.嚴格來講，不僅有一個金色矩形。

Among the non-rectangular shapes, the most popular are the regular convex pentagon and the regular star pentagon, or pentagram, in the shape of a five-pointed star. Two polyhedra, drawn from regular convex pentagons, are also famous among the geometric structures relating to the golden section: the dodecahedron and the icosahedron:

在非矩形形狀中，最受歡迎的是五角星形的規則凸五邊形和規則星形五邊形或五角星形。 在與黃金分割有關的幾何結構中，從規則的凸五邊形繪制的兩個多面體也很著名：十二面體和二十面體：

Regular convex pentagon and regular star pentagon, or pentagram, in the shape of a five-pointed star.五角星形的規則凸五邊形和規則星形五邊形或五角星形。

There are of course many other structures related to the golden section, such as spirals and triangles.

當然，還有許多與黃金分割有關的其他結構，例如螺旋形和三角形。

Image source圖片來源

自然界中?的存在 (Presence of ? in nature)

As for the presence of the golden section in nature, many examples are already known: sunflowers, pine cones, shells, arrangement of leaves around a flower stalk, or petals distributed in 5 points… Form golden spirals, logarithmic spirals formed from the golden section. In the same way, some crystals, whose atoms are arranged in a pentagonal pattern, are built from the golden section.

關于自然界中黃金分割的存在，已經知道很多例子：向日葵，松果，貝殼，花莖周圍的葉子排列或散布在5個點上的花瓣……形成黃金螺旋，由黃金分割形成的對數螺旋。 以同樣的方式，從金黃色部分開始構建一些晶體，這些晶體的原子排列成五邊形。

It should be remembered here that nature has two ways of producing natural phenomena from the golden section:- by posing as a structure a pentagon, regular decagon or golden rectangle;- by arranging the elements in a sequence of numbers similar to that of Fibonacci.

這里應該記住，自然有兩種從黃金分割產生自然現象的方法：-通過將五邊形，規則十邊形或黃金矩形擺放為結構；-通過將元素排列成類似于斐波那契的數字序列。

These two ways of producing elements from the golden ratio are the two ways we are gonna explore for creating an interface design from golden ratio.

這兩種從黃金比例生成元素的方法是我們將要探索的兩種從黃金比例創建界面設計的方法。

神話與現實 (Myths and realities)

In order not to mystify the golden section, let us recall that while it is present in many of nature’s creations, so that a divine character has sometimes been given to this irrational number, thus making it the key to universal architecture, it should be noted that many other numbers structure the elements of nature. Scientists and mathematicians who have looked for a common structure for all the elements that make up our universe through the golden section must have been sceptical. This does not prevent mathematicians of all times from appreciating the mysterious properties of this number, nor designer-creators from making it a reference of natural aesthetics.

為了不使黃金分割變得神秘，讓我們回顧一下，盡管它存在于自然界的許多創造物中，所以有時會賦予這個非理性數字以神性，因此使其成為通用建筑的關鍵，但應注意許多其他數字構成了自然元素。 科學家和數學家一直對通過黃金分割構成我們宇宙的所有元素尋求共同結構感到懷疑。 這并不能阻止數學家一直欣賞這個數字的神秘特性，也不能阻止設計師創造者將其作為自然美學的參考。

建筑與設計中的幾何 (Geometry in architecture and design)

圍繞designed設計的作品 (Works designed around ?)

In the course of history, the golden section has very often been used to structure works of an artistic, or at least aesthetic, nature. This use of the golden section has taken many different forms, with each creator or designer using it as he or she wished, without necessarily applying a defined process of use.

在歷史的過程中，黃金分割經常被用來構造具有藝術性或至少是審美性質的作品。 黃金分割的這種使用采用了多種不同的形式，每個創建者或設計師都可以按自己的意愿使用它，而不必應用定義的使用過程。

帕臺農神廟 (The Parthenon)

A typical example is that the Parthenon went so far as to give its name to a variant of the golden rectangle. The relationship of the Parthenon to the Golden Section becomes evident once a golden rectangle is superimposed on the fa?ade of the building.

一個典型的例子是帕臺農神廟(Parthenon)甚至將其名稱賦予了金色矩形的一個變體。 一旦在建筑物的外墻上疊加了金色矩形，帕臺農神廟與黃金分割的關系就很明顯。

The fa?ade of the Parthenon is designed from a basic golden rectangle. The sub-divisions of the rectangle are used to arrange the architectural elements.帕臺農神廟的立面由基本的金色矩形設計而成。 矩形的細分用于布置建筑元素。

基普斯金字塔 (The Pyramid of Cheops)

Another example of the use of the golden section in the design of a major work is that it is not as easy to distinguish as in the design of the Parthenon. In order to find the golden section in the structure of the Great Pyramid of Giza, the geometry of the pyramid must be traced:

在主要作品的設計中使用黃金分割的另一個例子是，它不像帕特農神廟的設計那樣容易區分。 為了在吉薩大金字塔的結構中找到黃金分割，必須跟蹤金字塔的幾何形狀：

Golden ratio in the Pyramid of Cheops基普斯金字塔中的黃金比例

Thus it appears that the golden ratio is a key to the design of the pyramid.

因此，似乎黃金分割率是金字塔設計的關鍵。

音樂與詩歌 (Music and poetry)

Many composers of music or poetry have also been bitten by the Golden Number. Because music is a series of notes structured in intervals, it has not escaped some people’s attention that these intervals may follow a pattern dictated by the golden section. The golden ratio is thus found in the 2/1 and 3/2 ratios, present in the two-beat, three-beat and four-beat rhythms. The ratio 5/3 is found in the five-beat measures. We also find the values of the Fibonacci suite.

許多音樂或詩歌的作曲家也被黃金編號咬了。 由于音樂是按間隔排列的一系列音符，因此這些間隔可能遵循黃金分割部分所指定的模式，這并未引起人們的注意。 因此，黃金比率以2拍，3拍和4拍節奏出現在2/1和3/2比率中。 在五次拍子中可以找到比率5/3。 我們還找到了斐波那契套件的值。

The same applies to poetry, where the rhythm of the verses follows a mathematical pattern, an arithmetic structure, some of which have given the golden section as a key. This is the case of the famous poem Le Serpent qui danse, written by Charles Baudelaire. It is a poem in quatrains of 8 and 5 syllables in crossed rhymes. We find in this rhythm in 8 and 5 the golden proportion, as well as values from the Fibonacci suite :

詩歌也是如此，詩歌的節奏遵循一種數學模式和一種算術結構，其中一些以黃金分割為關鍵。 這就是查爾斯·鮑德萊爾(Charles Baudelaire)所著的著名詩《大蛇》(Le Serpent qui danse)的例子。 這是一首用八首和五首音節的四首韻律的詩歌。 在8和5的節奏中，我們發現黃金比例以及斐波那契套件中的值：

Your eyes, where nothing is revealed 8Sweet and bitter, 5Are two cold jewels where 8Gold with iron. 5

你的眼睛，什么都沒有顯示8甜酸和苦澀，5是兩個冰冷的珠寶，8G含鐵。 5

Your eyes, where nothing is revealed,

你的眼睛，什么都沒有透露出來，

Sweet or bitter,

甜或苦，

Are two cold jewels where

是兩個冰冷的寶石嗎

Gold with iron.

金與鐵。

(Charles Baudelaire, The Dancing Serpent)

(查爾斯·鮑德萊爾，跳舞的蛇)

在設計過程中使用關鍵指標 (Using a Key Figure in the Design Process)

勒·柯布西耶的模數 (Le Corbusier’s Modulor)

It took the famous architect Le Corbusier nearly twenty years to finalize and patent his Modulor, the key to a measurement system adapted to human morphology and inspired by historical mathematical research on the golden ratio. Intended to design architectures fully adapted to the human body, the Modulor disregards the metric system and the system of feet and inches. “The Modulor is a measurement tool derived from human stature and mathematics. A man with his arm raised provides at the determining points of space occupation, the foot, the solar plexus, the head, the fingertips, the arm being raised, three intervals which generate a golden section, known as Fibonacci. On the other hand, mathematics offers the simplest as well as the strongest variation of a value: the single, the double, the two golden sections. “(Le Corbusier, Le Modulor: test on a harmonic measurement on a human scale universally applicable to architecture and mechanics). From this example, in which geometry and arithmetic are at the service of design work, we must retain the approach that consists in systematizing design according to a mathematical key, a ratio of proportion. Here Le Corbusier relies on 3 reference keys (navel: 1.13; standing man: 1.83; standing man with arm raised: 2.26) which are linked by the ratio of proportion that is the golden ratio. From these 3 keys derive the measures he needs to design living spaces. Like other creators and designers, Le Corbusier based his architecture on a scheme dictated by the golden ratio.

著名的建筑師勒·柯布西耶(Le Corbusier)花了近二十年的時間才完成了他的Modulor并為其申請了專利，該模塊是適應于人體形態的測量系統的關鍵，并受到了關于黃金比例的歷史數學研究的啟發。 旨在設計完全適合人體的架構，Modulor忽略了公制和英尺和英寸的系統。 “ Modulor是一種衍生自人類身高和數學的??測量工具。 一個舉起手臂的人在空間占領的決定點上提供了腳，太陽叢，頭部，指尖，舉起的手臂的三個間隔，這三個間隔產生了黃金分割，稱為斐波那契。 另一方面，數學提供了值的最簡單也最強的變化：單，雙，兩個黃金分割。 “(Le Corbusier，Le Modulor：在普遍適用于建筑和機械的人類規模上進行諧波測量的測試)。 從這個幾何和算術為設計工作服務的示例中，我們必須保留一種方法，該方法包括根據數學鍵(比例比例)對設計進行系統化。 在這里，勒·柯布西耶(Le Corbusier)依靠3個參考鑰匙(肚臍：1.13；站立的人：1.83；站立并舉起手臂的人：2.26)，它們通過比例比例(即黃金比例)鏈接在一起。 從這三個關鍵中得出他設計居住空間所需的措施。 像其他創作者和設計師一樣，勒·柯布西耶(Le Corbusier)的建筑基于黃金分割率決定的方案。

File source檔案來源

在界面設計中使用? (Using ? in interface design)

將金色矩形作為結構擺放 (Posing as a structure a golden rectangle)

This is the simplest way to apply the golden section to a design: draw a basic golden rectangle and then the circumscribed golden spiral. From the internal cut-out of the golden rectangle, the interface elements can be arranged according to this cut-out. A common idea is that in such a design, the focus is naturally on the target of the golden spiral, but as far as I know it have not been proven:

這是將黃金分割應用于設計的最簡單方法：先繪制基本的黃金矩形，然后再畫外接金螺旋。 從金色矩形的內部切口中，可以根據該切口布置接口元素。 一個常見的想法是，在這樣的設計中，焦點自然是在金色螺旋的目標上，但據我所知，尚未證明：

From the internal cut-out of the golden rectangle, the interface elements can be arranged.從金色矩形的內部切口可以布置接口元素。

用制作UI設計系統 (Making a UI design system from ?)

以類似于斐波那契的數字順序排列元素 (Arranging the elements in a sequence of numbers similar to that of Fibonacci)

First of all, let’s make one thing clear: there is no objective way to apply the golden ratio to any design. How the golden section is used and how the geometry of a design is built around it depends solely on the will of the designer.

首先，讓我們澄清一件事：沒有客觀的方法將黃金分割率應用于任何設計。 黃金分割部分的使用方式以及如何圍繞該黃金分割部分構建設計完全取決于設計者的意愿。

In my case, I choose to apply the golden section not as a layer on which the elements of the design are to be arranged, but as a visual rhythm defined by an arithmetic sequence similar to that of Fibonacci.

就我而言，我選擇不將黃金分割部分用作設計元素所在的圖層，而是應用由類似于斐波那契的算術序列定義的視覺節奏。

從頭開始：內容 (Starting with the start: content)

We start our design from the content, in this case the text. The idea is to take as a base the height of the html text we are going to use. From this height, we can define a line-height value using the golden section. To do this, it is convenient to multiply the height of the html by ?, quite simply:

我們從內容(在本例中為文本)開始設計。 這個想法是以我們將要使用的html文本的高度為基礎的。 從這個高度，我們可以使用黃金分割區定義線高值。 為此，將html的高度乘以is很方便，非常簡單：

Line height calculation with golden ratio.用黃金比例計算線高。

line-height=html height*?

line-height = html高度*?

For more informations about the use of ? in typography: https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a

有關在印刷術中使用?的更多信息： https : //medium.com/@zkareemz/golden-ratio-62b3b6d4282a

如果html對象的高度固定 (If the html object has a fixed height)

It is technically complicated to really apply ? to a design system, for one simple reason: the limitations of the CSS3 language. More precisely, a design system truly built from ? would need a lot of javascript to be developed. Indeed, it would require to adjust the measures of each interface element individually, and our goal is to systematize. However, we can trick ourselves into applying ? to our design system while optimizing the resulting code. To do this, we have to assume that our interface elements have either a fixed height or width. In the following examples, we assume that our html element has a fixed height. In the design of my design system, I conveniently set a padding-left and padding-right equal to the height of the html content of the element under consideration.

真正將?應用于設計系統在技術上很復雜，原因很簡單：CSS3語言的局限性。 更準確地說，真正由built構建的設計系統將需要開發許多JavaScript。 確實，這將需要單獨調整每個界面元素的度量，而我們的目標是系統化。 但是，我們可以誘騙自己在設計系統中應用while，同時優化結果代碼。 為此，我們必須假設我們的界面元素具有固定的高度或寬度。 在以下示例中，我們假設html元素的高度固定。 在設計系統的設計中，我方便地將padding-left和padding-right設置為與所考慮元素的html內容的高度相等。

When I create my design system, I chose to base it on the height of a content text element, here named c. From this measure c, we can extrapolate the values with which we will build our grid. To do so, we reproduce the logic of the Fibonacci sequence but starting from our key measure c:

在創建設計系統時，我選擇將其基于內容文本元素的高度，此處為c。 根據度量c，我們可以推斷將用來構建網格的值。 為此，我們從關鍵度量c開始重現斐波納契數列的邏輯：

Derivatives of c in arithmetic sequence.c的算術序列導數。

Note that adding two consecutive values gives the following value in the arithmetic sequence.

注意，兩個連續的值相加得出算術序列中的以下值。

Once this is done, we build the html block linked to our text element, here a button. The padding values are derived from the extrapolated values of c. Now, from the height of this button, we can determine the values in the same logic of the Fibonacci sequence:

完成此操作后，我們將構建鏈接到文本元素(此處為按鈕)的html塊。 填充值是從c的外推值得出的。 現在，從該按鈕的高度，我們可以按照斐波那契數列的相同邏輯來確定值：

Derivatives of hl in arithmetic sequence. These values will be used to determine the margins of the element.hl的算術序列導數。 這些值將用于確定元素的邊距。

From the height of html c, we have extrapolated all the padding measures and margin of the knob:

從html c的高度，我們推斷出所有填充量和旋鈕的邊距：

Low density information padding and margin calculation.低密度信息填充和邊距計算。

Low density:

低密度：

padding-top & padding-bottom=content height/? ;

padding-top＆padding-bottom =內容高度/?;

margin-top=button height/?^2

margin-top =按鈕高度/?^ 2

margin-right=button width/?

右邊距=按鈕寬度/?

The result seems satisfactory to me. What do you think?

結果對我來說似乎令人滿意。 你怎么看？

如果界面需要高密度的信息 (If the interface requires a high density of information)

From experience, it is often necessary to vary the density of information on a page, especially when developing interfaces for business software containing tables and many possible actions. In this case, we can densify our button by choosing more or less advanced values on our value sequence. For example, instead of calculating c/?, we will calculate c/?2 or c/?3, etc. Conversely, we can flare our block by calculating c*?2, c*?3, etc.

根據經驗，通常有必要改變頁面上信息的密度，特別是在為包含表和許多可能動作的商業軟件開發界面時。 在這種情況下，我們可以通過在值序列中選擇或多或少的高級值來使按鈕致密。 例如，我們將計算c /?2或c /?3等，而不是計算c /?。相反，我們可以通過計算c *?2，c *?3等來擴展我們的代碼塊。

High density information padding and margin calculation.高密度信息填充和邊距計算。

High density:

高密度

padding-top & padding-bottom=content height/? ^2;

padding-top＆padding-bottom =內容高度/?^ 2;

margin-top=button height/?^3

margin-top =按鈕高度/?^ 3

margin-right=button width/?^2

margin-right =按鈕寬度/?^ 2

限制html對象的高度和最小寬度 (Limitation of the height and minimum width of an html object)

Of course, not all measurements given to the interface elements can be relative. Every interface has constraints, starting with the minimum height and width that an interactive element must have in order to be used comfortably on a touch screen. For my part, I set this value at 40*40px. Thus, some of my elements cannot simply be entrusted to the Golden Number; it is necessary to check that these constraints are respected.

當然，并非所有提供給界面元素的測量值都是相對的。 每個界面都有約束條件，從交互元素必須具有的最小高度和寬度開始，以便舒適地在觸摸屏上使用。 就我而言，我將此值設置為40 * 40px。 因此，我的某些要素不能簡單地托付給黃金數字。 有必要檢查這些約束是否得到遵守。

其他可用比例 (Other usable ratios)

And if you don’t appreciate the aesthetics offered by this use of the golden section, why not try using another function value? Here are some examples of buttons made with different values than ?:

并且，如果您不喜歡黃金分割的使用所帶來的美感，為什么不嘗試使用另一個函數值呢？ 這是一些用不同于values的值制作的按鈕的示例：

Different button sizes with different ratios applied.應用了不同比例的不同按鈕大小。

當今的設計系統 (The design system today)

With this method I made a full design system based on golden ratio. I am using this design system today in my professional productions, for both B2C and B2B products, with the large and small density information system.

通過這種方法，我制作了一個完整的基于黃金比例的設計系統。 今天，在我的專業產品中，無論是B2C和B2B產品，還是大密度和小密度信息系統，我都使用此設計系統。

As exemple, here are some components of my golden ratio based design system.例如，以下是基于黃金分割率的設計系統的一些組件。

Voir la version fran?aise

Voir la版本法語

翻譯自: https://uxdesign.cc/design-system-based-on-the-golden-ratio-ui-%C9%B8-e45eb98655cb

基于正點原子觸摸屏ui設計

總結

以上是生活随笔為你收集整理的基于正点原子触摸屏ui设计_基于黄金比例ui％C9％B8的设计系统的全部內容，希望文章能夠幫你解決所遇到的問題。

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