A career path into digital design is often winding, meaning many practitioners come from adjacent fields as diverse as graphic design, web development, research, or even anthropology. As a result, two people working in a similar role may have a very different professional background, experience, set of skills and approach to solving design problems.

進入數字設計的職業道路通常是曲折的，這意味著許多從業者來自相鄰領域，包括圖形設計，網絡開發，研究甚至人類學。 結果，兩個工作相似的人可能具有截然不同的專業背景，經驗，一套技能和解決設計問題的方法。

Digital designers who come from broader creative disciplines like graphic design or visual communications might be pumping out stunning user interfaces worthy of millions of Dribbble admirations. But, on closer inspection, these interfaces often reveal functionality flaws that come from the lack of understanding of some of the fundamental principles of digital design:

來自圖形設計或視覺傳達等更廣泛的創意學科的數字設計師可能會抽出令人贊嘆的用戶界面，這些功能值得Dribbble贊嘆不已。 但是，仔細檢查后，這些接口通常會發現功能缺陷，這些缺陷是由于對數字設計的一些基本原理缺乏理解而引起的：

1.數字接口同時存在于各種規模 (1. Digital interfaces exist in every size at once)

Designers used to the constraints of printed page formats often struggle with the fluidity of the web. True, you will be working on artboards that have fixed sizes and designing for a small number of targeted devices, but, in reality, your interface will exist in every size at once (mind-blowing, right?). This means you should always think about how it will respond to even the smallest changes in the browser width, making sure it looks (and works) its best in every size.

習慣于打印頁面格式約束的設計人員經常在網絡的流動性中掙扎。 沒錯，您將使用固定大小的畫板并為少量目標設備進行設計，但實際上，您的界面會同時存在于各種大小中(令人振奮，對嗎？)。 這意味著您應該始終考慮一下它將如何響應瀏覽器寬度的最小變化，以確保它在各種尺寸下都看起來(并工作)最佳。

2.網絡的基礎 (2. The building blocks of the web)

Much like the Great Pyramid of Giza, most web interfaces consist of blocks that are stacked, or nested inside one another. For instance, your website homepage may consist of three blocks stacked on top of each other — header, main content and footer. The header hosts two further blocks — navigation and hero banner — and navigation in turn contains your company logo and menu. There is a number of principles that define how these blocks look and behave, which we will discuss shortly.

就像吉薩大金字塔一樣，大多數Web界面都由相互堆疊或嵌套的塊組成。 例如，您的網站首頁可能包含三個相互疊放的塊-頁眉，主要內容和頁腳。 標頭包含另外兩個塊-導航和英雄橫幅-導航又包含公司徽標和菜單。 有許多原則定義了這些塊的外觀和行為，我們將在稍后討論。

This, of course, is a greatly simplified description of the web, but thinking of your interface in this way will save you from having random elements floating in midair with no apparent logic behind them.

當然，這是對Web的極大簡化，但是以這種方式考慮界面將使您避免在空中漂浮隨機元素而背后沒有明顯的邏輯。

3.家庭事務 (3. Family matters)

The hierarchical relationships between nested blocks are best understood through the family analogy. The outer block (container) is a parent to all the blocks (items) that are nested within it — its children. Much like in the real world, these children inherit some properties from their parents, which can be overwritten later.

通過類比可以最好地理解嵌套塊之間的層次關系。 外部塊(容器)是嵌套在其中的所有塊(項)(其子元素)的父級。 就像現實世界中一樣，這些孩子從父母那里繼承了一些財產，以后可以覆蓋。

4.留意空白 (4. Be intentional about your whitespace)

To avoid having an interface that looks like a shelve of boxes in an Amazon warehouse, you can use margins and padding to add some whitespace. These concepts are not unique to the web, but here is where they truly reveal their full potential. Unlike a printed page that allows you to scatter elements around at random and call the rest whitespace, the digital interface doesn’t tolerate a vacuum, so to achieve “nothing” you have to fill it with “something” — margins and padding.

為了避免在亞馬遜倉庫中有一個看起來像是一堆盒子的界面，您可以使用邊距和填充來添加一些空白。 這些概念并不是網絡獨有的，但在這里它們真正發揮了其全部潛力。 與允許您隨機散布元素并調用其余空白的打印頁面不同，數字界面不能容忍真空，因此要實現“無”功能，您必須在其中填充“某些內容”(邊距和填充)。

5.沖頂 (5. Race to the top)

The concept of content alignment will be familiar to most designers. While horizontal alignment on the web works pretty much as it does in print, vertical alignment is much less straightforward. By default, the blocks of your web interface stack from the top down and because the page height depends on its content, you can’t simply place your heading in the center of it and call it a job done. As a result, vertical alignment is often controlled with top and bottom margins and padding, which can be relative for maximum adaptability. More on that in the next point.

內容對齊的概念對于大多數設計師來說都是熟悉的。 雖然網絡上的水平對齊與打印中的對齊幾乎一樣，但垂直對齊卻不那么簡單。 默認情況下，Web界面的塊是從上到下堆疊的，并且由于頁面的高度取決于其內容，因此您不能簡單地將標題放在其中心并將其稱為完成的工作。 因此，通常使用頂部和底部頁邊距和填充來控制垂直對齊，這對于最大適應性而言可能是相對的。 接下來的更多內容。

6.相對論 (6. The theory of relativity)

You need to specify the size and position of each element, but measurements can be absolute or relative (recommended). For instance, instead of a fixed-width cover image, you can set it to fill the available width. Smaller items (children) can take a percentage of available space (say, 33.33% for a three-column grid) or be restricted to specific size brackets. The font scale should also be set in relative units (rem), so it scales up and down proportionally.

您需要指定每個元素的大小和位置，但是測量可以是絕對的或相對的(建議)。 例如，您可以將其設置為填充可用寬度，而不是固定寬度的封面圖像。 較小的物品(兒童)可能占用一定百分比的可用空間(例如，三列網格為33.33％)，或者被限制在特定的尺寸范圍內。 字體比例也應以相對單位(rem)設置，因此它按比例縮放。

A lot of these decisions lie with developers who translate fixed grids and font sizes into relative systems, but this is an area where designers can and should have their input. For example, if you want a button to maintain the same size or scale depending on the font size or the width of a card it is nested within, you need to communicate this to developers.

這些決定中有很多取決于開發人員，他們將固定的網格和字體大小轉換為相關的系統，但這是設計人員可以并且應該獲得其輸入的領域。 例如，如果您希望按鈕根據字體大小或嵌套在其中的卡片的寬度保持相同的大小或比例，則需要將此按鈕告知開發人員。

From my experience, this step is most often overlooked in the design-to-development handover process because we typically submit static images and leave developers to find and interpret the patterns. Giving clear instructions about how the interface should behave removes ambiguity and means that what was designed gets built.

根據我的經驗，此步驟在設計到開發的移交過程中經常被忽略，因為我們通常會提交靜態圖像，而讓開發人員去尋找和解釋模式。 給出有關接口應如何操作的明確說明可以消除歧義，這意味著可以設計出所需的東西。

7.您不擁有自己的設計 (7. You don’t own your designs)

This point is the hardest for many designers to swallow. Unlike an artwork hanging on a gallery wall that can be admired from afar but not touched, the interface you designed is made to be used (and abused). You may have got everything looking just right on your artboard, but once the interface gets built, you have no control over how its viewed. For example, someone might be using a browser that doesn’t support your chosen font or wishes to display all fonts at twice their intended size, and there is absolutely nothing you can do to stop them (nor should you). In this situation, the interface may not look the way you intended it to, but it still needs work. And it needs to work well.

這是許多設計師最難理解的。 與懸掛在畫廊墻壁上的藝術品可以從遠處欣賞卻無法觸摸一樣，您設計的界面被設計為可以使用(和濫用)。 您可能已經在畫板上看到了一切，但是一旦構建了界面，就無法控制其外觀。 例如，某人可能使用的瀏覽器不支持您選擇的字體，或者希望以兩倍于其預期大小的字體顯示所有字體，因此您絕對無法采取任何措施來阻止它們(也不應該)。 在這種情況下，界面可能看起來不像您預期??的那樣，但仍需要工作。 它需要運作良好。