有时候，标注不一定是确切的“值”

这篇文章是个人的工作经验和观点，不代表标准立场。

同行可互相讨论，共同进步。

今天我们聊UI设计中的标注环节，以下是一个页面中的一个控件，我们的目标是对其标注。

在这里，我们关注“奖金优化”这个按钮，并对它进行讨论。

如上图：

“它不过就是一个按钮嘛，直接切下它，丢给程序员就行”。这也许是你心中的OS，是的，这是最快捷的做法。

也许你也会对每一个这样的按钮进行标注，我们抛开弥散阴影，如下图标注70*24

但是，如果说一整套app页面里会出现很多这样的按钮，但是按钮的文字个数却不一定，那如何办，你把这所有的按钮都切图出来嘛？如果有100个，1000的按钮呢？

------------华丽的分割线-------------

如上图，我们抛开弥散阴影，单独讨论按钮本身尺寸：

在我的工作中，我只用对其标注“高度24”。

然而宽度呢？

宽度是auto！是由其中的     文字宽度+文字距离左边的内边距+文字距离右边的内边距     共同构成。

这里有点类似于web中的padding-left，padding-right。

如果你这样做，其实我个人认为更利于扩展。比如你可以由此去适应各种情况的按钮

(哪怕你的按钮中还有一个图标，你只用交给程序员这个 线性图标的图片，并标注图标与文字之间的间距即可)

最后千万别忘了,无论你用哪种方式，按钮至少是有 常规 和 按下 两种状态的！！

------------华丽的分割线-------------

我们再看下一个案例：

(由于保密协议，我将图中的有效信息都用乱字代替)

在每一个页面中，都是许多个蓝色方框模块从上往下排列而成。那么我们关注蓝色方框模块，在蓝色方框模块中，我们今天着重聊绿色方框模块。

在我的工作中，我会对这类页面有如下的处理。

1. 我一定会在横向320的画布上排版，因为这是大众手机中宽度的最小可能性。

   
   

从最小的320排版，是看看在这种情况下，会不会发生拥挤的情况，如果这种情况，不严重，而且在你的眼睛里(因为你是设计师)，它可行的，那就是靠谱的。

从三个页面来看，这些选择按钮是在变化着的。屏幕的宽度也是在变化的(这一点很重要)。

也许你会对每一个选择按钮进行尺寸的标注，如下图中。这样做，我认为还是不具有扩展性，自由性。

2.标注好图中的所有尺寸间隔，留下选择性按钮的宽度不标注(如果按钮里只有一行文字，那按钮的高度也可固定)。

图中的的三种选择性按钮的宽度XYZ，可如此获得

X=(当前屏幕宽度-“让球”字体宽度-16-16-8-8-8-8-30)/3

Y=(当前屏幕宽度-16-16-8-8)/3

Z=(当前屏幕宽度-16-16-8)/2

这样做来，可以推断出的结果是：

无论手机屏幕如何变宽，图中的所有尺寸都是固定的，选择性按钮之间的间隔是固定的，而只有选择性按钮的宽度在随着屏幕的变大而是适当变大。

文章的最末，大家猜猜：这些选择性按钮宽度会不会变小，造成很拥挤？

关注我的个人公众号

公众号回复：拥挤不拥挤

即可获得答案。