创造华丽 UI 的 7 个规则（Part 2） #3939

xujunjiejack · 2018-06-04T01:05:47Z

创造华丽 UI 的7个规则（Part 2）

译文翻译完成，resolve #3862

# 创造华丽 UI 的7个规则（Part 2）

maoqyhz · 2018-06-04T04:45:58Z

@leviding 校对认领

fanyijihua · 2018-06-04T04:46:04Z

@maoqyhz 好的呢 🍺

maoqyhz

前半部分问题较多，后半部分翻译的较好。
文中多斜体字请根据规范改成粗体。
有些地方表达可以再正式一点，口语化太多。可参考一下小点的review。

maoqyhz · 2018-06-04T04:59:44Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-## A guide to visual aesthetics, written by a nerd
+## 通往视觉美感的指南， 出自于一个技术宅之手


通往视觉美感的指南，出自于一个技术宅之手 => 一部由技术宅编写通往视觉审美的指南

maoqyhz · 2018-06-04T05:03:21Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-This is the second part in a two-part series. You should read the [first part first](https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-1.md).
+这是这个系列的第二部分。你需要阅读[第一部分](https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-1.md).


可增加过渡。=> 这是该指南的第二部分，在此之前，你需要阅读第一部分。

maoqyhz · 2018-06-04T05:10:33Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-We’re talking about rules for designing **clean and simple UI** without needing to attend art school in order to do so.
+我们在讨论如何不去上美术学院就设计**简单又干净的 UI**。


我们在讨论如何不去上美术学院就设计简单又干净的 UI。 => 我们正在讨论不需要去艺术学院就读就可以设计出简洁UI的规则

maoqyhz · 2018-06-04T05:11:22Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-Here are the rules:
+下面是这些规则：


表达可简洁些，例如“规则如下：”

maoqyhz · 2018-06-04T05:14:49Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md

+3.  添加更多的空白 （查看[部分1](https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-1.md)
+4.  学习把文字覆盖在图片上的方法
+5. 让文字显露 — 或者隐没 
+6. 用好看的字体 


用好看的字体 => 仅使用优秀的字体

maoqyhz · 2018-06-04T06:18:13Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-I don’t think I’ve ever used text directly on top of an image for any professional project, and it’s really mentioned here as a sort of “control” method. That being said, it’s possible to do to _really_ cool effect— but be careful.
+我不认为我在任何一个专业的项目里直接把文字覆盖到图片上。这个方法是作为一个需要很好控制力的方法，就是说当你操作得小心的时候，这个方法是可以制造出 _非常_ 酷的效果的。


就是说当你操作得小心的时候，这个方法是可以制造出非常_酷的效果的。=> 这种方法可能可以产生非常酷炫的效果，但使用的时候需要小心。

maoqyhz · 2018-06-04T06:20:18Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-#### Method 1: Overlay the whole image
+#### 方法 1：把整个图片上加一个图层


=> 方法1：文本覆盖整个图片

maoqyhz · 2018-06-04T06:27:35Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


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

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

-You can also use the out-of-focus area of a photo as the blur. But beware— this method is not as dynamic. If your image ever changes, make sure the text is always over the blurry bits.
+你也可以用照片里虚化的背景作为模糊化的店。但是请注意-这个办法并不好使。不过如果你的图片变过了，你得确定这些文字一直都是在模糊化的区域里。


“的店”多余

maoqyhz · 2018-06-04T06:28:14Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-The floor fade is when you have an image that **subtly fades towards black at the bottom, and then there’s white text written over it**. This is an ingenious method, and I have no idea who did it before Medium, but that’s where I first noticed it.
+底部逐渐变深这个方法指的是你把图片的**靠近底部的地方逐渐变黑，然后接着把白字填在上面**。这是个非常天才的办法。我在看到Medium之前都没想到过。


ingenious 可译为“巧妙”

maoqyhz · 2018-06-04T06:30:55Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-#### Up-pop and down-pop
+#### 弹高和压下


这里属于专有名词，可以不翻译

maoqyhz · 2018-06-04T06:39:45Z

@xujunjiejack @leviding 已校对完成。初次校对，不足之处请指出，谢谢。

leviding · 2018-06-09T08:12:29Z

@xujunjiejack 可以修改了

整合了校对意见的版本

xujunjiejack · 2018-06-10T18:08:55Z

@leviding commit了最后的版本

leviding · 2018-06-11T06:55:19Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md

@@ -2,409 +2,408 @@
 > * 原文作者：[Erik D. Kennedy](https://medium.com/@erikdkennedy?source=post_header_lockup)
 > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner)
 > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-2.md](https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-2.md)
-> * 译者：
-> * 校对者：
+> * 译者：xujunjiejack


译者和校对者信息是以链接的形式加，不是单单的文字。

leviding

@xujunjiejack 大概看了下，还存在格式问题，根据以浙江教程的格式要求修改下吧。

例如中英文数字之间的空格，逗号句号前后不加空格，英文斜体而翻译成中文应该是加粗等等。

leviding · 2018-06-11T06:55:35Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md


-We’re talking about rules for designing **clean and simple UI** without needing to attend art school in order to do so.
+我们正在讨论可以让你不需要去上美术学院就可以设计**简洁UI**的规则。


中英文之间空格

leviding · 2018-06-11T06:55:49Z

TODO1/7-rules-for-creating-gorgeous-ui-part-2.md

-5.  **Make text pop— and un-pop**
-6.  **Only use good fonts**
-7.  **Steal like an artist**
+1. 光线来自天空。（查看[部分1](https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-1.md)


中文和数字之间空格

仔细过了遍排版，请再过目下，有问题再指出。

xujunjiejack · 2018-06-16T00:19:10Z

@leviding 仔细过了下排版，请再过目遍下。thx

leviding · 2018-06-16T05:35:52Z

@xujunjiejack 存在大量格式问题，译文中每两行就有一行有格式问题，数量太多无法校对，我直接修改了，你对照我的 commit 记录和译者教程重新认真看一边，以后这些是自己要避免的。

@maoqyhz 格式问题也是校对者的职责之一（如果太多的话可以向我反馈，让译者修改之后再认真校对一遍）。这些在译者教程里都写了，再抽空认真看下吧。

leviding · 2018-06-16T05:36:27Z

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

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

# 创造华丽 UI 的7个规则（Part 2）

92e0c17

# 创造华丽 UI 的7个规则（Part 2）

fanyijihua added the 校对认领 label Jun 4, 2018

leviding changed the title ~~# 创造华丽 UI 的7个规则（Part 2）~~ 创造华丽 UI 的7个规则（Part 2） Jun 4, 2018

leviding added the 设计 label Jun 4, 2018

leviding mentioned this pull request Jun 4, 2018

创造华丽 UI 的 7 个规则（Part 2） #3862

Closed

leviding changed the title ~~创造华丽 UI 的7个规则（Part 2）~~ 创造华丽 UI 的 7 个规则（Part 2） Jun 4, 2018

fanyijihua added the 正在校对 label Jun 4, 2018

maoqyhz suggested changes Jun 4, 2018

View reviewed changes

Update 7-rules-for-creating-gorgeous-ui-part-2.md

e6b5e97

整合了校对意见的版本

leviding added the 标注待管理员 Review label Jun 11, 2018

leviding reviewed Jun 11, 2018

View reviewed changes

leviding added the enhancement 等待译者修改 label Jun 11, 2018

Update 7-rules-for-creating-gorgeous-ui-part-2.md

807dfdb

仔细过了遍排版，请再过目下，有问题再指出。

修正格式问题

b8bef64

leviding approved these changes Jun 16, 2018

View reviewed changes

leviding merged commit 97f243e into xitu:master Jun 16, 2018

leviding added 翻译完成 and removed enhancement 等待译者修改标注待管理员 Review 校对认领正在校对 labels Jun 16, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

创造华丽 UI 的 7 个规则（Part 2） #3939

创造华丽 UI 的 7 个规则（Part 2） #3939

xujunjiejack commented Jun 4, 2018 •

edited by leviding

Loading

maoqyhz commented Jun 4, 2018

fanyijihua commented Jun 4, 2018

maoqyhz left a comment

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz Jun 4, 2018

maoqyhz commented Jun 4, 2018

leviding commented Jun 9, 2018

xujunjiejack commented Jun 10, 2018

leviding Jun 11, 2018

leviding left a comment

leviding Jun 11, 2018

leviding Jun 11, 2018

xujunjiejack commented Jun 16, 2018

leviding commented Jun 16, 2018

leviding commented Jun 16, 2018


		## A guide to visual aesthetics, written by a nerd
		## 通往视觉美感的指南，出自于一个技术宅之手


		This is the second part in a two-part series. You should read the [first part first](https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-1.md).
		这是这个系列的第二部分。你需要阅读[第一部分](https://github.com/xitu/gold-miner/blob/master/TODO1/7-rules-for-creating-gorgeous-ui-part-1.md).


		We’re talking about rules for designing clean and simple UI without needing to attend art school in order to do so.
		我们在讨论如何不去上美术学院就设计简单又干净的 UI。


		I don’t think I’ve ever used text directly on top of an image for any professional project, and it’s really mentioned here as a sort of “control” method. That being said, it’s possible to do to _really_ cool effect— but be careful.
		我不认为我在任何一个专业的项目里直接把文字覆盖到图片上。这个方法是作为一个需要很好控制力的方法，就是说当你操作得小心的时候，这个方法是可以制造出 _非常_ 酷的效果的。


		#### Method 1: Overlay the whole image
		#### 方法 1：把整个图片上加一个图层


		The floor fade is when you have an image that subtly fades towards black at the bottom, and then there’s white text written over it. This is an ingenious method, and I have no idea who did it before Medium, but that’s where I first noticed it.
		底部逐渐变深这个方法指的是你把图片的靠近底部的地方逐渐变黑，然后接着把白字填在上面。这是个非常天才的办法。我在看到Medium之前都没想到过。


		We’re talking about rules for designing clean and simple UI without needing to attend art school in order to do so.
		我们正在讨论可以让你不需要去上美术学院就可以设计简洁UI的规则。

创造华丽 UI 的 7 个规则（Part 2） #3939

创造华丽 UI 的 7 个规则（Part 2） #3939

Conversation

xujunjiejack commented Jun 4, 2018 • edited by leviding Loading

创造华丽 UI 的7个规则（Part 2）

maoqyhz commented Jun 4, 2018

fanyijihua commented Jun 4, 2018

maoqyhz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maoqyhz commented Jun 4, 2018

leviding commented Jun 9, 2018

xujunjiejack commented Jun 10, 2018

Choose a reason for hiding this comment

leviding left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

xujunjiejack commented Jun 16, 2018

leviding commented Jun 16, 2018

leviding commented Jun 16, 2018

xujunjiejack commented Jun 4, 2018 •

edited by leviding

Loading