Lesson 4: Know Your Tools

Lesson 4: Know Your Tools

“差劲的人👎才抱怨工具”真是个渣观点，牛x的人如果被工具妨碍也会怪工具。烂工具会妨碍工作。

本课的目标是：充分熟悉你的工具，达到不用思考工具而能专注于工作的程度。

Article 1: Towards A Retina Web

支持多种屏幕尺寸和像素密度

Device Pixels

设备像素（物理像素）是设备最小的物理显示单元。每个像素有自己的颜色和亮度。像素间距小到一定程度，人眼在自然观测距离就感知不到了，这时候就是 full image 了，苹果拿 Retina 来形容它。

屏幕密度（screen density）通常用每英寸像素数（PPI, Pixels Per Inch）表示。

CSS Pixels

CSS Pixel是为了在不同显示设备上保持显示效果一致而使用的抽象单位。使用设备独立像素（DIP, Device-Independent Pixels）表示。

<div height="200" width="300"><div>

在标准密度显示设备上，1 CSS pixel 等于 1 device pixel，这个会以 200 * 300 device pixels 显示。在两倍像素密度设备上，为了保持同样的物理尺寸，会显示成 400 * 600 device pixels。

Bitmap Pixels

Bitmap Pixel 是位图（PNG, JPG, GIF, etc）存储数据的最小单元。每个 bitmap pixel 包括如何显示的数据，包括位置和颜色（有些图片格式每个像素都保存额外数据，例如透明度；有些格式通过 alpha channel 整体控制）。

位图的所有 bitmap pixels 决定了它自身的大小，此外，显示在 web 上时它还会被指定一个抽象大小（CSS pixels）。浏览器会在渲染的时候基于 CSS 指定的宽高来挤压或者拉伸图片，虽然能保证现实的物理大小一致，但会丢失细节。

适配位图在不同设备上显示效果的几种方式，及其优劣

几种方法各有优劣，都不完美。

SVG（Scalable Vector Graphics）

复杂图像的 svg 很大，比如要显示一张照片？

Icon Fonts

有些全面而且高质量的 icon fonts 能满足绝大多数需求。但是这同时也意味之，你可能要为寥寥几个 icon fonts 而引入一个巨大的字符集。可以考虑自己定义一个 icon fonts 集。

改变单个图标需要重新生成整个 icon fonts 集。

Favicons

chrome 和其他一些浏览器会把网站的 Favicons 作为生成的桌面快捷方式的图标，所以把它也 Retain 了吧。

Shot: What can you do in a single Photoshop layer?

Constraints force us to think laterally and find creative solutions.
限制迫使我们横向思考，找到创造性的解决方案。

< TODO >

Article 2: Colour Management and UI Design

不同设备显示颜色不一致，特别是当色彩空间（color space）不一致时，特别难调。比如想在 RGB 和 CMYK 下一致。

同一块屏幕还可能会采用不同的色彩方案（display profile），比如我的苹果本

所以默认情况下，PS 里的 #FF0000 可能实际上显示成了 #FF1122 —— PS 中指定色值FF0000，但是用工具取色的时候却是 #FF1122。这就是色彩方案不一致造成的。

如何保持图像的颜色到处都一样？
如何保持图像的颜色和 HTML、CSS、code 生成的颜色一致？
这里有对于 ps、ai 的具体设置步骤。

每个 .psd 文件都有一个 color profile 独立于存储每个像素颜色的数据的 color data 之外。
使用 Assign Profile 改变彩色方案时只是改变了 color profile, 所以虽然显示效果改变了，但是用来保存每个像素颜色的数据还跟之前一样。
使用 Convert to Profile 不仅改变 color profile，还尝试通过改变 color profile 保持相同的显示效果。

所以就像从写代码时候要注意字符集一样，设计的时候注意颜色方案（特别是像从 ai 导入素材到 ps 这种操作）。

tips

有工具可以实时地在手机、pad 上预览设计稿的效果，如果发现在这些设备上的显示效果跟你做设计的电脑上不一样，改起来很省时间。

Article 3: How Designers Can Help Developers

设计和程序虽然一起工作，但是互相都很神秘。

可维护、可理解的 psd。

使用 Photoshop 的一些建议：

  1. 版本控制（或者通过合理的文件名来处理多个版本）。一个满是各种版本资源的文件夹，吐……
  2. 分好layers。通过控制图层显／隐输出不同的状态，而不是直接改掉有用的东西。
  3. 给你的图层起个意义明确的名字。
  4. 使用分组组织图层，并且分组要符合直觉。
  5. 删掉不去要的图层。用不着的旧版本的、模版的、临时的副本等等。
  6. 使用“图层复合（Layer Comps）”。简单地说就是就是把一些图层的可见性、位置、样式等状态保存下来，方便几组状态之间的切换。
  7. 尽可能使用矢量图。

如何帮助开发者：

  1. Snap to whole pixels。次像素渲染会毁了你的设计。
  2. 使用 RGB 模式。因为开发用的就是这个。
  3. 切好图。
  4. 注意字体。你有很多字体，但是不同的设备、操作系统预置的字体可能跟你的不一样。
  5. 尽可能模拟目标平台的文字渲染方式。比如把 ps 的文字抗锯齿参数设置得和目标平台一样。
  6. 注意设计稿的尺寸。特别是对 app 来说，屏幕上还有状态栏、虚拟按键之类的。
  7. 使用不同平台的“风格”。不同平台不同的 ui 风格、交互习惯，别跟它们太割裂。而且不可能一套设计能适用于所有目标平台（除非目标平台就一个……）。
  8. 横竖屏分别设计。禁止横屏也比直接把竖屏拉伸作为横屏好。
  9. 不同尺寸分别设计。手机、平板、电脑尺寸和操作不一样，都要思考如何设计，何况它们的使用场景也不同。
  10. 使用真正（至少合理）的数据填充设计稿。
    • 尝试可能的文本长度，不要随便写一段。
    • 实际情况下有些数据可能是没有的。比如用户头像。
  11. 说到本地化（localisation）的时候，一般人都想到文本，但是设计师要想到 布局（layout） 。和英语相比，亚洲语言可能只需要 50% 的空间就能表达同样的意思，而欧洲语言可能要比英语还长 50%（要特别注意 按钮 和 帮助文本）。而且不同语言为了显示效果，字号也可能要不同。

Blog: Learn Photoshop's Secrets

< TODO >
这个博客有很多 Photoshop 的技巧。

Community: Sign up for Graphic Design Stack Exchange

< TODO >
像 Stack Overflow 一样，设计师用 Graphic Design Stack Exchange。

posted @ 2016-01-07 13:57  shang1jk  阅读(218)  评论(0)  编辑  收藏  举报