Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

原子设计:如何设计组件系统 #1913

Merged
merged 5 commits into from
Jul 25, 2017
Merged

Conversation

H2O-2
Copy link
Contributor

@H2O-2 H2O-2 commented Jul 18, 2017

Issue:#1873

@ColaDaddyz
Copy link
Contributor

@sqrthree 认领校对

@linhe0x0
Copy link
Member

@zhangfe 好的呢 🍺

@linhe0x0
Copy link
Member

@zhangfe 不要忘了来校对哈。

Copy link
Contributor

@ColaDaddyz ColaDaddyz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sqrthree 我这边差不多了


Nowadays, digital products must be able to exist across any and all devices, screen sizes, and mediums at the same time:
现在的数字产品需要同时存在于任何的设备,屏幕尺寸和媒介上:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

如今,数字产品需要同时适用于任何的设备,屏幕尺寸和媒介。


By keeping this in mind and by being inspired by Modular Design, Brad Frost formulated the method of Atomic Design, in which everything begins with the smallest element of the interface: the atom. This metaphor allows us to understand what we are creating and especially how we are going to create it.
依据以上原则以及模块化设计的启发,Brad Frost 构想出了从最小的界面元素:原子,着手的原子设计方法。这个巧妙的比喻让我们理解了我们到底在创作什么,以及应该如何创作它。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

依据以上原则以及模块化设计的启发 => 依据以上原则以及受到模块化设计的启发
以及应该如何创作它 => 尤其是如何创作它


It took me several months and some concrete projects before gaining an idea of what “designing in atomic” really meant and what that was going to change in my everyday life as a designer.
在花了几个月的时间并且做了几个实打实的项目之后,我才终于对「原子设计方式」的内在含义,以及它将会如何改变我的设计师之路,有了些了解。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

以及它将会如何改变我的设计师之路,有了些了解 => 以及它将会如何改变我的设计师之路有了些许了解


It gathers teams around a shared vision. The components are easy to reuse, edit and combine together so that the evolutions of the product will be simpler. And as for smaller projects… Well, every small project could one day become a big project, no?
这种方式可以统一团队的视野。组件易于重复使用、编辑和组合,使得项目的成长变得简单。至于小的项目嘛... 每个小项目总有一天都可能成为大项目,不是吗?
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

重复使用 => 复用
使得项目的成长变得简单 => 因此项目的发展变得更加简单


I see Atomic Design as a slightly different approach to interface design but one which can make a great impact in the end.
我把原子设计看作一种尽管只是略有不同却最终可以带来巨大影响的界面设计方式。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我认为原子设计只是对界面设计做出的很小的改变,但是最终它带来了巨大的影响

Copy link
Contributor Author

@H2O-2 H2O-2 Jul 19, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这样是不是更好点:我认为原子设计对界面设计方法只做出了很小的改变,但最终却带来了巨大的影响
@zhangfe


My vision of the perfect shared library would be the following; a single library which would feed the designers and the developers at the same time:
我理想中完美的共享库是这样的:一个可以同时满足设计师和开发者需求的单一的库:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

单一这里有些多余了


The [Gretel agency](http://gretelny.com/work/netflix/), for example, made some remarkable work on the Netflix identity:
比如 [Gretel agency](http://gretelny.com/work/netflix/)Netflix 的品牌识别做了些出色的工作。
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

比如 Gretel agency 就为 Netflix 的品牌识别做了些出色的工作:


What really frightens designers who begin creating a system of components is to have to make components which are connected to nothing … Obviously, we aren’t going to create a shopping basket component if there is no purchase element in our product! That wouldn’t make any sense!
最让那些构建组件系统的设计师们胆寒的莫过于创建与什么都不关联的组件 ... 很显然,我们不会在没有购物功能的产品里设计购物车组件的!这完全不合常理!
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

最让那些构建组件系统的设计师们胆寒的 => 让那些构建组建系统的设计师们最胆寒的

We want to focus on an action, not a specific screen
We are going to focus on the action which we want our user to do and on the components that are needed to accomplish this action. The number of screens will then vary, according to the context: maybe we’ll need half of the screen on desktop to display this component versus 3 consecutive screens on smartphone…
我们应该侧重于一个行为,而不是某个特定的界面
我们会把注意力集中在某个我们希望用户去实践的行为以及它所需要的组件上。界面数量则会根据用户环境变化:也许在台式电脑上我们只需半个界面,智能手机却需要三个连续的界面来显示某个组件...
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

实践 => 感觉这里用 操作 好一些


We can at last, just like developers, have our own style guides and build entire systems around these style guides. A modification to an atom of our system will automatically reverberate across all the components which use this atom:
我们终于可以像开发者一样拥有自己的风格指南(style guide)并围绕它构建整个组件系统了。对系统中一个原子的微调就会波及所有使用它的组件:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

波及 => 自动反映到

@linhe0x0
Copy link
Member

@H2O-2 可以先根据第一位校对者调整了哈。

@H2O-2
Copy link
Contributor Author

H2O-2 commented Jul 21, 2017

@zhangfe @sqrthree 谢谢校对~ 一校完成

@leviding
Copy link
Member

校对认领 @sqrthree

@linhe0x0
Copy link
Member

@leviding 妥妥哒 🍻

Copy link
Member

@leviding leviding left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@H2O-2 @zhangfe @sqrthree 校对完成

@@ -3,224 +3,226 @@
> * 原文作者:[Audrey Hacq](https://uxdesign.cc/@audreyhacq)
> * 译文出自:[掘金翻译计划](https://github.com/xitu/gold-miner)
> * 本文永久链接:[https://github.com/xitu/gold-miner/blob/master/TODO/atomic-design-how-to-design-systems-of-components.md](https://github.com/xitu/gold-miner/blob/master/TODO/atomic-design-how-to-design-systems-of-components.md)
> * 译者:
> * 译者:[H2O-2](https://github.com/H2O-2)
> * 校对者:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


It gathers teams around a shared vision. The components are easy to reuse, edit and combine together so that the evolutions of the product will be simpler. And as for smaller projects… Well, every small project could one day become a big project, no?
这种方式可以统一团队的视野。组件易于复用、编辑和组合,使得项目的发展变得简单。至于小的项目嘛... 每个小项目总有一天都可能成为大项目,不是吗?
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这种方式可以统一团队的视野 => 这种方式可以统一团队的视角

视角合适不?


I also think that, contrary to popular belief, the Atomic Design methodology is not just for web projects … Quite the opposite in fact! I was able to introduce Atomic Design into a personal project (an iOS app for cleaning your address book named [TouchUp](https://itunes.apple.com/fr/app/touchup/id1128944336?mt=8)) and the developer with whom I worked really appreciated this approach. It saved us a lot of time when we wanted to quickly develop and iterate the product.
和大部分人的认知相左的是,我认为原子设计方法并不只适用于网络相关的项目 ... 事实上截然相反!我成功地在一个个人项目中(一个叫做 [TouchUp](https://itunes.apple.com/fr/app/touchup/id1128944336?mt=8)) 的 iOS 应用,可以清理你的地址簿)引入了原子设计,而且与我合作的开发者非常欣赏这种方式。当我们想快速开发并迭代产品的时候,它帮了大忙。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

事实上截然相反!=> 事实上也与大多数人认为的截然相反!

And thanks to a strong identity, we feel that we have all the material to release our first atoms: colors, typographic choices, forms, shadows, spaces, rhythms, animations principles…
Netflix 的视觉语言:有力度、辨识度高且易于扩展
多亏了强有力的品牌识别,我们会觉得已经有充足的材料发布最初的一系列原子了:色彩,字体选择,表单,阴影,空白,节奏,动画原则
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

品牌识别 => 品牌辨识度


The [Gretel agency](http://gretelny.com/work/netflix/), for example, made some remarkable work on the Netflix identity:
比如 [Gretel agency](http://gretelny.com/work/netflix/) 就为 Netflix 的品牌识别做了些出色的工作。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

品牌识别 => 品牌辨识度上

Copy link
Contributor Author

@H2O-2 H2O-2 Jul 23, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的品牌识别是一个设计上的专有名词,可以参考http://wiki.mbalib.com/wiki/%E5%93%81%E7%89%8C%E8%AF%86%E5%88%AB

@leviding

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

学习了

Enrich the system by making round trips between the already existing components and new features
The first components will help to create the first screens, and the first screens will help to create new components in the system or to change the existing ones.
通过在已经存在的组件和新功能间循环往复来充实组件系统
最初的组件可以帮我们创建出最初的界面,接着最初的界面又会帮我们在系统中创造新的组件或改变已有的组件。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

接着最初的界面又会帮我们在系统中创造新的组件或改变已有的组件。=> 接下来,最初的界面又会帮我们在系统中创造新的组件,或改变已有的组件。

Transforming a specific component into a generic one
Having anticipated these variations is going to allow me then to use this component to create other ones:
把一个特定组件转变为通用组件
预见到这些变形后,我可以从这个组件创建出其他的组件:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

我可以从这个组件创建出其他的组件:=> 我可以在这个组件基础上,创建出其他的组件:


This is the way we’ll refine the brand identity, develop components and verify that the system works.
这就是我们改进品牌识别,开发组件以及检验组件系统正常运作的方法。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这就是我们改进品牌识别 => 这就是我们改提高品牌辨识度


![](https://cdn-images-1.medium.com/max/800/1*gczpHM7chfldsdtvr7Umtw.png)

All of our components are linked to our atoms. And as everything is connected, we are going to be able to easily make modifications on a part of the system and verify the repercussion on the rest of the system!
我们所有的组件都与原子相连。因此我们将可以轻松地更改部分组件系统,并观察这种更改对其余系统部分的副作用!
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

对其余系统部分的副作用!=> 对系统其余部分的副作用!


Here again, we now have tools which allow us to really work in a team around a common system.
在这里又一次,已经有可以让我们围绕一个共同的系统进行团队协作的工具了。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在这里又一次,已经有可以让我们围绕一个共同的系统进行团队协作的工具了。=> 现在又有了可以让我们围绕一个共同的系统,进行团队协作的工具了。

Here again 可不可以不翻译?

@H2O-2
Copy link
Contributor Author

H2O-2 commented Jul 23, 2017

@leviding @sqrthree 谢谢校对~ 二校完成

Copy link
Member

@linhe0x0 linhe0x0 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

有一丢丢小细节问题需要调整下哈。辛苦啦


Until recently, we designed all the screens of a product, and then we cut it into small components to make specifications or UI Kits:
直到最近,我们仍会单独设计产品的每一个界面,然后把它们裁剪成小组件,以此来创建设计规格或UI套件(UI Kits):
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


![](https://cdn-images-1.medium.com/max/800/1*yyN6Ki0646UcFLsDabUShw.jpeg)

Today: we start from atoms and we build the rest from there
We have thus not only an “air de famille” between all the screens, but also a system which offers infinite design possibilities!
现如今:我们从原子开始并且用原子构建
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句话后面加一个空行吧,另外注意句末的标点符号。


![](https://cdn-images-1.medium.com/max/800/1*Piomy-9oNTP0yT3VcmKH4w.png)

Netflix visual language: strong, recognizable and easy to build upon
And thanks to a strong identity, we feel that we have all the material to release our first atoms: colors, typographic choices, forms, shadows, spaces, rhythms, animations principles…
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

英文没有删除哟

And thanks to a strong identity, we feel that we have all the material to release our first atoms: colors, typographic choices, forms, shadows, spaces, rhythms, animations principles…
Netflix 的视觉语言:有力度、辨识度高且易于扩展
多亏了强有力的品牌识别,我们会觉得已经有充足的材料发布最初的一系列原子了:色彩,字体选择,表单,阴影,空白,节奏,动画原则
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『色彩,字体选择,表单,阴影,空白,节奏,动画原则』中应使用顿号,并以句号结尾。


![](https://cdn-images-1.medium.com/max/800/1*3OFaoY-yLYdgPmO8AhejmQ.jpeg)

Before : we deconstructed screens to make components
One of the problem was that the components created in this way were not generic and they weren’t dependent on each other. The reuse of components was thus very limited: our design system was restrictive.
之前:我们解构界面来制作组件
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

注意句末的标点符号。

Copy link
Contributor Author

@H2O-2 H2O-2 Jul 25, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的文字是图片下面的注释文字,原文就是没有句号的,应该加还是不加呢?下面几个都是一样的问题。@sqrthree

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

还是加上吧,标题之外的中文的表达一般都是要带结束符号的吧。嗯,还有注意和下面的一行直接要加个空行,不然 Markdown 解析时会解析到一行。


![](https://cdn-images-1.medium.com/max/800/1*nn-NcMuzv6VdV3hpgvc7AQ.png)

Possible variations of a generic component
This work is necessary if we want our system to be both reusable and rich at the same time.
通用组件的可能变形
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句话后面加一个空行吧,另外注意句末的标点符号。


![](https://cdn-images-1.medium.com/max/800/1*LXu8lJ-poM3d6TD3g6y2uw.gif)

We have to anticipate the fluid behavior of our components
We can also imagine that a component can be totally different in a context or in another.
我们需要预测组件的流体行为
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句话后面加一个空行吧,另外注意句末的标点符号。


![](https://cdn-images-1.medium.com/max/800/1*LXu8lJ-poM3d6TD3g6y2uw.gif)

We have to anticipate the fluid behavior of our components
We can also imagine that a component can be totally different in a context or in another.
我们需要预测组件的流体行为
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句话后面加一个空行吧,另外注意句末的标点符号。


Of course, there are programs like Sketch or Figma which allow us to create shared styles and to mutualize the similar components but I’m sure that we are going to see a lot more in the next few years.
当然,现在已经有可以让我们创建共享样式并使相似组件相互关联的软件了, 例如 Sketch Figma。但是我确信在接下来的几年内会出现更多这样的软件。
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

『使相似组件相互关联的软件了』这句后面的逗号应改为全角符号。


![](https://cdn-images-1.medium.com/max/800/1*xAMdhevJ8lLRMxO_yLljZg.gif)

All components are linked to the atoms
We realize very quickly how the modification of a component can affect the whole system.
所有组件都与原子相连
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这句话后面加一个空行吧,另外注意句末的标点符号。

@H2O-2
Copy link
Contributor Author

H2O-2 commented Jul 25, 2017

@sqrthree 更改完毕,谢谢~

@linhe0x0 linhe0x0 merged commit 91b72c8 into xitu:master Jul 25, 2017
@linhe0x0
Copy link
Member

已经 merge 啦~ 快快麻溜发布到掘金专栏然后给我发下链接,方便及时添加积分哟。

@H2O-2
Copy link
Contributor Author

H2O-2 commented Jul 26, 2017

@H2O-2 H2O-2 deleted the translate branch July 30, 2017 18:06
cdadar pushed a commit to cdadar/gold-miner that referenced this pull request Dec 8, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants