最近公司的幾位Ui設計師,因為iPhone6【登入】按鈕的尺寸規範,討論了好幾天。於是、我開始對【登入】按鈕的尺寸進行了一番分析,希望找到一個協調意見,統一執行的方案。
【登入】按鈕的尺寸,包含按鈕的寬度,高度,圓角半徑,內部文字字號。iPhone6的尺寸是@2x的,因此每個尺寸數值,x軸座標,y軸座標都需要是2的倍數。
爭論焦點:【登入】按鈕的尺寸是多少?
協調方案:【登入】按鈕的寬度260px-710px,高度84-90px,倒圓角10px,內部文字28-34px
這裡推薦兩個尺寸分析的工具:
第1次尺寸分析如下:
這個iPhon6的【印象筆記】App的分析結果是:
- 按鈕的寬度560px,高度90px,倒圓角10px,內部文字28px
第2次尺寸分析如下:
這個iPhon6的【資料儲存】App頁面的分析結果是:
- 按鈕的寬度316px,高度90px,倒圓角10px,內部文字30px
第3次尺寸分析如下:
這個iPhon6的【登入頁面】的分析結果是:
- 按鈕的寬度710px,高度84px,倒圓角10px,內部文字34px
第4次尺寸分析如下:
這個iPhon6的【worktile】App的分析結果是:
- 按鈕的寬度260px,高度90px,倒圓角10px,內部文字34px
第5次尺寸分析如下:
這個iPhon6的【詞霸】App的分析結果是:
- 按鈕的寬度630px,高度86px,倒圓角10px,內部文字34px
第6次尺寸分析如下:
這個iPhon6的【teambition】App的分析結果是:
- 按鈕的寬度670px,高度88px,倒圓角10px,內部文字32px
總結前面6次的分析如下:
【推薦方案】:
- 按鈕的寬度260px-710px,高度84-90px,倒圓角10px,內部文字28-34px
其餘方案如下:
-
【印象筆記】:
按鈕的寬度560px,高度90px,倒圓角10px,內部文字28px
-
【資料儲存】:
按鈕的寬度316px,高度90px,倒圓角10px,內部文字30px
-
【登入頁面】:
按鈕的寬度710px,高度84px,倒圓角10px,內部文字34px
-
【worktile】:
按鈕的寬度260px,高度90px,倒圓角10px,內部文字34px
-
【詞霸】:
按鈕的寬度630px,高度86px,倒圓角10px,內部文字34px
-
【teambition】:
按鈕的寬度670px,高度88px,倒圓角10px,內部文字32px