基于正點(diǎn)原子觸摸屏ui設(shè)計(jì)

定義? (Defining ?)

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

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

?的簡(jiǎn)短歷史 (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.

黃金分割的發(fā)現(xiàn)可以追溯到上古，其定義在包括中世紀(jì)在內(nèi)的多個(gè)世紀(jì)中都得到了豐富。

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 ?:

對(duì)黃金分割數(shù)學(xué)研究的主要貢獻(xiàn)是歐幾里得，泰雷茲和畢達(dá)哥拉斯的研究，但是毫無(wú)疑問(wèn)，斐波那契最重要的進(jìn)步歸功于他的Liber Abaci，這項(xiàng)工作使我們發(fā)現(xiàn)了著名的斐波那契數(shù)列，一種算術(shù)一個(gè)數(shù)字與上一個(gè)數(shù)字的比率等于?的序列：

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”.

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

金色矩形的流行 (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:

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

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

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.

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

?的幾何結(jié)構(gòu) (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:

與普遍的看法相反，嚴(yán)格說(shuō)來(lái)，不只是一個(gè)金色矩形。 有一個(gè)矩形，其最大邊與最小邊之比等于。 但是，其他構(gòu)造也是可能的：

There is not just one golden rectangle strictly speaking.嚴(yán)格來(lái)講，不僅有一個(gè)金色矩形。

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:

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

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

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

當(dāng)然，還有許多與黃金分割有關(guān)的其他結(jié)構(gòu)，例如螺旋形和三角形。

Image source圖片來(lái)源

自然界中?的存在 (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.

關(guān)于自然界中黃金分割的存在，已經(jīng)知道很多例子：向日葵，松果，貝殼，花莖周圍的葉子排列或散布在5個(gè)點(diǎn)上的花瓣……形成黃金螺旋，由黃金分割形成的對(duì)數(shù)螺旋。 以同樣的方式，從金黃色部分開(kāi)始構(gòu)建一些晶體，這些晶體的原子排列成五邊形。

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.

這里應(yīng)該記住，自然有兩種從黃金分割產(chǎn)生自然現(xiàn)象的方法：-通過(guò)將五邊形，規(guī)則十邊形或黃金矩形擺放為結(jié)構(gòu)；-通過(guò)將元素排列成類似于斐波那契的數(shù)字序列。

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.

這兩種從黃金比例生成元素的方法是我們將要探索的兩種從黃金比例創(chuàng)建界面設(shè)計(jì)的方法。

神話與現(xiàn)實(shí) (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.

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

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

圍繞designed設(shè)計(jì)的作品 (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.

在歷史的過(guò)程中，黃金分割經(jīng)常被用來(lái)構(gòu)造具有藝術(shù)性或至少是審美性質(zhì)的作品。 黃金分割的這種使用采用了多種不同的形式，每個(gè)創(chuàng)建者或設(shè)計(jì)師都可以按自己的意愿使用它，而不必應(yīng)用定義的使用過(guò)程。

帕臺(tái)農(nóng)神廟 (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.

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

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.帕臺(tái)農(nóng)神廟的立面由基本的金色矩形設(shè)計(jì)而成。 矩形的細(xì)分用于布置建筑元素。

基普斯金字塔 (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:

在主要作品的設(shè)計(jì)中使用黃金分割的另一個(gè)例子是，它不像帕特農(nóng)神廟的設(shè)計(jì)那樣容易區(qū)分。 為了在吉薩大金字塔的結(jié)構(gòu)中找到黃金分割，必須跟蹤金字塔的幾何形狀：

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

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

因此，似乎黃金分割率是金字塔設(shè)計(jì)的關(guān)鍵。

音樂(lè)與詩(shī)歌 (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.

許多音樂(lè)或詩(shī)歌的作曲家也被黃金編號(hào)咬了。 由于音樂(lè)是按間隔排列的一系列音符，因此這些間隔可能遵循黃金分割部分所指定的模式，這并未引起人們的注意。 因此，黃金比率以2拍，3拍和4拍節(jié)奏出現(xiàn)在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 :

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

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

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

Your eyes, where nothing is revealed,

你的眼睛，什么都沒(méi)有透露出來(lái)，

Sweet or bitter,

甜或苦，

Are two cold jewels where

是兩個(gè)冰冷的寶石嗎

Gold with iron.

金與鐵。

(Charles Baudelaire, The Dancing Serpent)

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

在設(shè)計(jì)過(guò)程中使用關(guān)鍵指標(biāo) (Using a Key Figure in the Design Process)

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

File source檔案來(lái)源

在界面設(shè)計(jì)中使用? (Using ? in interface design)

將金色矩形作為結(jié)構(gòu)擺放 (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:

這是將黃金分割應(yīng)用于設(shè)計(jì)的最簡(jiǎn)單方法：先繪制基本的黃金矩形，然后再畫(huà)外接金螺旋。 從金色矩形的內(nèi)部切口中，可以根據(jù)該切口布置接口元素。 一個(gè)常見(jiàn)的想法是，在這樣的設(shè)計(jì)中，焦點(diǎn)自然是在金色螺旋的目標(biāo)上，但據(jù)我所知，尚未證明：

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

用制作UI設(shè)計(jì)系統(tǒng) (Making a UI design system from ?)

以類似于斐波那契的數(shù)字順序排列元素 (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.

首先，讓我們澄清一件事：沒(méi)有客觀的方法將黃金分割率應(yīng)用于任何設(shè)計(jì)。 黃金分割部分的使用方式以及如何圍繞該黃金分割部分構(gòu)建設(shè)計(jì)完全取決于設(shè)計(jì)者的意愿。

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.

就我而言，我選擇不將黃金分割部分用作設(shè)計(jì)元素所在的圖層，而是應(yīng)用由類似于斐波那契的算術(shù)序列定義的視覺(jué)節(jié)奏。

從頭開(kāi)始：內(nèi)容 (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:

我們從內(nèi)容(在本例中為文本)開(kāi)始設(shè)計(jì)。 這個(gè)想法是以我們將要使用的html文本的高度為基礎(chǔ)的。 從這個(gè)高度，我們可以使用黃金分割區(qū)定義線高值。 為此，將html的高度乘以is很方便，非常簡(jiǎn)單：

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

line-height=html height*?

line-height = html高度*?

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

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

如果html對(duì)象的高度固定 (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.

真正將?應(yīng)用于設(shè)計(jì)系統(tǒng)在技術(shù)上很復(fù)雜，原因很簡(jiǎn)單：CSS3語(yǔ)言的局限性。 更準(zhǔn)確地說(shuō)，真正由built構(gòu)建的設(shè)計(jì)系統(tǒng)將需要開(kāi)發(fā)許多JavaScript。 確實(shí)，這將需要單獨(dú)調(diào)整每個(gè)界面元素的度量，而我們的目標(biāo)是系統(tǒng)化。 但是，我們可以誘騙自己在設(shè)計(jì)系統(tǒng)中應(yīng)用while，同時(shí)優(yōu)化結(jié)果代碼。 為此，我們必須假設(shè)我們的界面元素具有固定的高度或?qū)挾取?在以下示例中，我們假設(shè)html元素的高度固定。 在設(shè)計(jì)系統(tǒng)的設(shè)計(jì)中，我方便地將padding-left和padding-right設(shè)置為與所考慮元素的html內(nèi)容的高度相等。

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:

在創(chuàng)建設(shè)計(jì)系統(tǒng)時(shí)，我選擇將其基于內(nèi)容文本元素的高度，此處為c。 根據(jù)度量c，我們可以推斷將用來(lái)構(gòu)建網(wǎng)格的值。 為此，我們從關(guān)鍵度量c開(kāi)始重現(xiàn)斐波納契數(shù)列的邏輯：

Derivatives of c in arithmetic sequence.c的算術(shù)序列導(dǎo)數(shù)。

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

注意，兩個(gè)連續(xù)的值相加得出算術(shù)序列中的以下值。

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:

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

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

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.低密度信息填充和邊距計(jì)算。

Low density:

低密度：

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

padding-top＆padding-bottom =內(nèi)容高度/?;

margin-top=button height/?^2

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

margin-right=button width/?

右邊距=按鈕寬度/?

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

結(jié)果對(duì)我來(lái)說(shuō)似乎令人滿意。 你怎么看？

如果界面需要高密度的信息 (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.

根據(jù)經(jīng)驗(yàn)，通常有必要改變頁(yè)面上信息的密度，特別是在為包含表和許多可能動(dòng)作的商業(yè)軟件開(kāi)發(fā)界面時(shí)。 在這種情況下，我們可以通過(guò)在值序列中選擇或多或少的高級(jí)值來(lái)使按鈕致密。 例如，我們將計(jì)算c /?2或c /?3等，而不是計(jì)算c /?。相反，我們可以通過(guò)計(jì)算c *?2，c *?3等來(lái)擴(kuò)展我們的代碼塊。

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

High density:

高密度

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

padding-top＆padding-bottom =內(nèi)容高度/?^ 2;

margin-top=button height/?^3

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

margin-right=button width/?^2

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

限制html對(duì)象的高度和最小寬度 (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.

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

其他可用比例 (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 ?:

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

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

當(dāng)今的設(shè)計(jì)系統(tǒng) (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.

通過(guò)這種方法，我制作了一個(gè)完整的基于黃金比例的設(shè)計(jì)系統(tǒng)。 今天，在我的專業(yè)產(chǎn)品中，無(wú)論是B2C和B2B產(chǎn)品，還是大密度和小密度信息系統(tǒng)，我都使用此設(shè)計(jì)系統(tǒng)。

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

Voir la version fran?aise

Voir la版本法語(yǔ)

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

基于正點(diǎn)原子觸摸屏ui設(shè)計(jì)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。