手機圖標ui設(shè)計尺寸：ui設(shè)計app圖標尺寸規(guī)范

時間：2023-06-02 09:18:01 | 來源：網(wǎng)站運營

時間：2023-06-02 09:18:01 來源：網(wǎng)站運營

手機圖標ui設(shè)計尺寸：ui設(shè)計app圖標尺寸規(guī)范：手機圖標ui設(shè)計尺寸：ui設(shè)計app圖標尺寸規(guī)范你都了解了嗎？作為一個UI設(shè)計，想要自己的頁面符合使用習(xí)慣，符合標準這些你必須知道，手機圖標ui設(shè)計尺寸：ui設(shè)計app圖標尺寸規(guī)范如果還有不知道的，快來和龐姿姿一起背！背不下來就收藏，用的時候拿出來看看~




原型設(shè)計尺寸

1、 iPhone6的界面布局是：屏幕是4.7英寸的，設(shè)計稿的大小為375x667px

☆ 狀態(tài)欄(status bar)：就是電量條，其高度為：20px；

☆ 導(dǎo)航欄(navigation)：就是頂部導(dǎo)航，有線其高度為：45px；沒有線高度就是44px；

☆ 主菜單欄(submenu，tab)：就是標簽欄，底部導(dǎo)航，其高度為：46px；

2、狀態(tài)欄每一項尺寸

☆ 信號格：5*5

☆wifi圖片：11*9

☆ 鎖：11*11

☆ 導(dǎo)航：8*8

☆ 電量：22*9

☆ 閃電：5*8

☆ 狀態(tài)欄中的文字：10px

3、關(guān)于iPhone6的圖標的尺寸：

☆ 頂部導(dǎo)航欄的圖標尺寸為16x16px左右，底部標簽欄的圖標尺寸為23 x 23px左右。

4、關(guān)于iPhone6的文字的尺寸：

☆ 導(dǎo)航欄的文字大小最大值是14px，底部標簽欄的圖標下方的文字大小為10px。

☆ 內(nèi)容區(qū)域的文字大小是：10px, 12px，14px，16px。

5、關(guān)于顏色

① 文字黑色：#282828

② 文字深灰色：#656565

③ 文字淺灰色：#989898

④ 邊框淺灰色：#C3C3C3

⑤ 背景淡灰色：#f2f2f2

⑥ 按鈕背景純白色：#ffffff

6、在iPhone6設(shè)計稿中，界面元素之間的常用距離，親密距離：10px；疏遠距離：15px。

A、疏遠距離：比如，所有元素距離手機屏幕最左邊的距離。

B、親密距離：比如，左邊圖標與右邊文字之間的距離。

【綜上所述】iPhone6的原型規(guī)范如下：

1、iPhone6手機模型尺寸：429x881px

2、界面尺寸布局：滿屏尺寸375x667px

3、高度電量條高度20px，導(dǎo)航欄高度44px，標簽欄高度46px；

4、各區(qū)域圖標大小導(dǎo)航欄圖標16px，底部標簽欄圖標23px；

5、各區(qū)域文字大小電量條-文字10px，導(dǎo)航欄-文字14px，標簽欄-文字10px；

6、常用的文字大小：16px，14px，12px，10px；

7、常用的顏色：背景淺灰色：#f2f2f2, 文字深黑色： #323232，邊框色深灰：#CCCCCC；

8、常用可點擊區(qū)域的高度（比如搜索區(qū)域）：28px；

9、單行文字的背景框的高度：44px，雙行則為：88px，三行則為：132px；

10、常用間距：親密距離：10px；疏遠距離：15px，其它距離：5px，22px等；




相信通過以上內(nèi)容，大家已經(jīng)對手機圖標手機圖標ui設(shè)計尺寸：ui設(shè)計app圖標尺寸規(guī)范有了初步的答案。有什么問題可以隨時留言評論，看見就會回復(fù)。了解更多關(guān)于UI設(shè)計學(xué)習(xí)方法、小技巧以及行業(yè)相關(guān)信息，可以添加關(guān)注我，我非常愿意為新手小白分享從事UI設(shè)計5年來的一些經(jīng)驗和感受。