做一份让工程师泪流满面的标注

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3460 天前的主题，其中的信息可能已经有所发展或是发生改变。

Measurement

我在知乎专栏的新po, 很想听听你们的意见（严肃脸

http://zhuanlan.zhihu.com/aegeank/20101849

标注

知乎

专栏

20 条回复 • 2015-07-09 23:14:16 +08:00

linpcha

2015-07-07 20:18:19 +08:00

从没见过这么详细的标注！！去年还看到找工作，原来去阿里了啊，赞~

aegean18sunset

2015-07-07 22:07:24 +08:00

@linpcha 哈哈对于工程师来讲真的好用吗？吗？吗？

alexapollo

2015-07-07 22:12:22 +08:00

咦，好专业，求业余时间合作=。=

yoa1q7y

2015-07-07 22:22:24 +08:00

从来不让UI做标注，PSD已经包含了所有的信息了，字号、字体、颜色、位置、大小，自己看看图层一切都明了，为啥还让UI做这些蹩脚的标注

linpcha

2015-07-07 22:35:08 +08:00

@aegean18sunset 我是产品是产品是产品……

Septembers

2015-07-07 23:02:17 +08:00

@yoa1q7y 但是某些developer不了解UXD啊

aegean18sunset

2015-07-07 23:32:22 +08:00 via iPhone

@yoa1q7y 因为我司不是所有开发人员都用 Mac，用不了/不会用 Sketch

magicolor

2015-07-07 23:38:48 +08:00

帅，被感动😹

Keinez

2015-07-08 01:29:03 +08:00

@yoa1q7y
@aegean18sunset
其实不能一概而论。大概在开发中你会遇到如下几种场合：

- Dev 会用 Photoshop / Sketch <--> Dev 不会用 Photoshop / Sketch
- Dev 很注重设计细节 <--> Dev不注重设计细节
- 项目时间很多，你有很多精力 <--> 项目时间很少，你疲于奔命

这会产生很多种组合。不是说“哦我要做 spec”或者“给你 psd 就好了不需要 spec”就能一概而论的，这是对项目和他人的不负责任。

时间少或者 Dev 设计审美不高的情况下，你应该及时反馈设计上的修正或者直接坐到他旁边。

Elethom

2015-07-08 03:34:41 +08:00

只是形式變了，你還是沒理解 RD 做事情的邏輯，所以並沒有什麼用。

比如說兩個垂直位置和高度相同的文字和圖標元素，是兩者都 top aligned 呢？還是當文字的內容增加導致高度增加時，圖標要與文字中心對齊？

再比如說一個位置標的是 10 px，那麼 10 px 是 pixel density 為多少時的 10 px 呢？為什麼不按 pt 標呢？在 pixel density 不同的屏幕上應該實現什麼樣的效果呢？

再比如說一個地方使用了 #FFA255 這個顏色，那在另一個地方使用 #FFA255 這個顏色或者它的衍生色的時候 RD 怎樣才能知道使用的是同一個顏色或者它的衍生色呢？你有沒有為 palette 製作一張 chart，給每個顏色命名並且標註清楚使用場景給 RD 呢？

這裏把我所在的一個設計討論群組中的朋友寫的比較不錯的答案給你參考一下：
http://www.zhihu.com/question/29971656/answer/46555585
雖然內容不多，但是可以給你提供一些有用的方向。

其實標註的重點根本不在「數值」，而在你的設計思想。我覺得能合作得很愉快的 RD 是，我將自己的設計思想當面或文字傳達給你，你拿著我的 PSD 或 sketch 檔自己去量。

rayps

2015-07-08 04:22:03 +08:00

https://zeplin.io
Zeplin 1.0

yimity

2015-07-08 07:41:34 +08:00 via Android

@yoa1q7y 这种还是有用的吧，每次量字体，宽高还是会费很多时间的。

leojoy710

2015-07-08 08:40:29 +08:00

@Elethom
同意
对齐方式比间距重要, 考虑实际情况比只看设计稿效果重要
给出palette并且设计也是遵循palette的定义这件事, 几个合作过的设计师都不会注重, 颜色都是随手拖的

jimbray

2015-07-08 10:30:44 +08:00

屏幕适配怎么搞？

Keinez

2015-07-08 13:10:10 +08:00 via Android

@leojoy710 一个好的 palette 是需要不断修订的，而且 palette 中修改一个元素势必影响所有已经设计好的页面，这点 Photoshop 做得并不好，很麻烦。其他工具还好些。

所以简单来说你如果看到一个很棒的 style guide 要么设计师闲的没事干要么他时间很多。

你可以有很多精力和想法，但你永远只有有限的时间。除了学会在合理的时间里做合理的事情，也要会在不合理的时间里做合理的事情。

adi

2015-07-08 13:11:37 +08:00

曾经的满屏标注参数，现在都由Sketch+Zeplin搞定...

aegean18sunset

2015-07-09 09:44:59 +08:00

@Keinez

坐在一起是正解

这次复杂的标注是在 waterfall 工作流下的妥协……

aegean18sunset

2015-07-09 09:59:06 +08:00

@rayps @adi @Elethom

昨天也正在和朋友讨论，团队足够 lean 的时候，坐在一起/当面解释细节，甚至就只是像 zeplin 这样新工具的使用，都会高效很多。但是如果公司整个是 waterfall 架构，设计师和工程师都只是被称为“资源”，疲于应付需求/业务线的调整，没法对产品追求极致，更多的就是妥协和无能为力。

谢谢 Elethom 的回复，我会认真研究（点头

Elethom

2015-07-09 14:21:38 +08:00

@aegean18sunset
Zeplin 就是一個很好的工具。你要標註的不是 xx 的位置是什麼而是 xx 的對齊方式。

waychane

2015-07-09 23:14:16 +08:00

@linpcha 听说是被@5key拉去的呢