這篇文章是個人的工作經驗和觀點，不代表標準立場。

同行可互相討論，共同進步。

今天我們聊UI設計中的標注環(huán)節(jié)，以下是一個頁面中的一個控件，我們的目標是對其標注。

在這里，我們關注“獎金優(yōu)化”這個按鈕，并對它進行討論。

如上圖：

“它不過就是一個按鈕嘛，直接切下它，丟給程序員就行”。這也許是你心中的OS，是的，這是最快捷的做法。

也許你也會對每一個這樣的按鈕進行標注，我們拋開彌散陰影，如下圖標注70*24

但是，如果說一整套app頁面里會出現很多這樣的按鈕，但是按鈕的文字個數卻不一定，那如何辦，你把這所有的按鈕都切圖出來嘛？如果有100個，1000的按鈕呢？

------------華麗的分割線-------------

如上圖，我們拋開彌散陰影，單獨討論按鈕本身尺寸：

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

然而寬度呢？

寬度是auto！是由其中的     文字寬度+文字距離左邊的內邊距+文字距離右邊的內邊距     共同構成。

這里有點類似于web中的padding-left，padding-right。

如果你這樣做，其實我個人認為更利于擴展。比如你可以由此去適應各種情況的按鈕

(哪怕你的按鈕中還有一個圖標，你只用交給程序員這個 線性圖標的圖片，并標注圖標與文字之間的間距即可)

最后千萬別忘了,無論你用哪種方式，按鈕至少是有 常規(guī) 和 按下 兩種狀態(tài)的！！

------------華麗的分割線-------------

我們再看下一個案例：

(由于保密協議，我將圖中的有效信息都用亂字代替)

在每一個頁面中，都是許多個藍色方框模塊從上往下排列而成。那么我們關注藍色方框模塊，在藍色方框模塊中，我們今天著重聊綠色方框模塊。

在我的工作中，我會對這類頁面有如下的處理。

1. 我一定會在橫向320的畫布上排版，因為這是大眾手機中寬度的最小可能性。

   
   

從最小的320排版，是看看在這種情況下，會不會發(fā)生擁擠的情況，如果這種情況，不嚴重，而且在你的眼睛里(因為你是設計師)，它可行的，那就是靠譜的。

從三個頁面來看，這些選擇按鈕是在變化著的。屏幕的寬度也是在變化的(這一點很重要)。

也許你會對每一個選擇按鈕進行尺寸的標注，如下圖中。這樣做，我認為還是不具有擴展性，自由性。

2.標注好圖中的所有尺寸間隔，留下選擇性按鈕的寬度不標注(如果按鈕里只有一行文字，那按鈕的高度也可固定)。

圖中的的三種選擇性按鈕的寬度XYZ，可如此獲得

X=(當前屏幕寬度-“讓球”字體寬度-16-16-8-8-8-8-30)/3

Y=(當前屏幕寬度-16-16-8-8)/3

Z=(當前屏幕寬度-16-16-8)/2

這樣做來，可以推斷出的結果是：

無論手機屏幕如何變寬，圖中的所有尺寸都是固定的，選擇性按鈕之間的間隔是固定的，而只有選擇性按鈕的寬度在隨著屏幕的變大而是適當變大。

文章的最末，大家猜猜：這些選擇性按鈕寬度會不會變小，造成很擁擠？

關注我的個人公眾號

公眾號回復：擁擠不擁擠

即可獲得答案。