移動界面尺寸!安卓720*1280界面尺寸規範參考

2021-01-11 站長之家

今天25學堂的老譚童鞋跟大家繼續分享720*1080的界面設計尺寸規範。

主要講解 屏幕分辨:1280×720像素(720P)  APP界面設計規範。

這樣的手機又vivo智能收款機、三星Galaxy A5、華為榮耀等手機。

這樣的手機屏幕尺寸是:5寸        即屏幕對角線是5英寸。

計算方法:1280平方+720平方=2156800,結果再開平方=1468.6048,再÷5,=293.72點每英寸。

在1280*720px的解析度下,1dp=2px             所有的尺寸具體請參照:Device Metrics

但是  不是所有每一個5英寸的手機的解析度都是720*1280,也有1920*1080的。切記。

720*1280 即xhdpi  相對於hdpi是2倍。同等於ios 蘋果6的切圖的2倍圖。是可以通用的。

在android規範中對於導航欄、工具欄等的尺寸沒有明確的規定。

第一部分:720*1280的布局規範

根據48dp原則,以及一些主流的android應用的截圖分析,總結一下尺寸要求:

狀態欄高度: 50 px

導航欄、操作欄高度: 96 px=48dp x 2

主菜單欄高度: 96 px

內容區域高度: 1038 px (1280-50-96-96=1038)

Android最近出的手機都幾乎去掉了實體鍵,把功能鍵移到了屏幕中,高度也和菜單欄一樣為:96 px

第二部分:  圖標和字體大小(來自官方規範文檔)

a、啟動圖標(home頁或app列表頁) 整體大小為48 x 48 dp  沒有空白的區域的完整圖標。  當然也可以是 包含空白區域的圖標等於48DP.

同時大家需要看下這個圖:48dp代表了觸摸的範圍:

b、操作欄圖標,代表用戶在app中可以使用到的最重要的圖標

整體大小為32 x 32 dp ,圖形實際區域為 24 x 24 dp

c、小圖標/場景圖標,提供操作或特定項目的狀態。

比如gmail app的星型標記、一些內容展開收起用到的向下向上的圖標等。整體大小為16 x 16 dp ,圖形實際區域為 12 x 12 dp 。

d、通知圖標

如果app有通知,要提供一個有新通知時顯示在狀態欄的通知圖標。整體大小為24 x 24 dp ,圖形實際區域為 22 x 22 dp 。

註:android規範提供的尺寸單位是dp,若設計稿尺寸設為720 x 1280 ,圖標大小需在規範要求的尺寸數字上乘以2。比如操作欄圖標32 x 32 dp ,則設計稿上應該是64 x 64 px 。

e、字體大小

Android規範中的要求如下:

前面提到Android開發中的字號單位是sp,而換算關係是 sp*ppi/160 = px 。所以720 x 1280尺寸的設計稿上,字體大小可選擇為 24px 、28px 、32px 、36px ,主要根據文字的重要程度來選擇,特殊情況下也可能選擇更大或更小的字體。

f、其他尺寸要求

通常把48dp作為可觸摸的UI元件的標準。 APPUI設計中的48dp定律原則

為什麼要用48dp呢?一般來說,48dp轉化為一個物理尺寸約9毫米。通常建議目標大小為7-10毫米,以方便用戶手指能準確並且舒適觸摸目標區域。

如果你設計的元素高和寬至少48dp,你就可以保證:

(1)觸摸目標絕不會比建議的最低目標(7mm)小,無論在什麼屏幕上顯示。

(2)在整體信息密度和觸摸目標大小之間取得了一個很好的平衡。

另外,每個UI元素之間的空白通常是8dp 。

第三部分、android的按鈕和彈出層的設計規範參考。

在720 x 1280 px 的設計稿上,有兩個按鈕(比如登錄、註冊)並排一行放置,按鈕尺寸最小範圍均為240 x 80 px ,換算為android開發單位就是 120 x 40 dp 。

這一次就跟大家分享這些,如有錯誤之處,歡迎隨時在下面留言。這樣只是成熟案例下的參考設計因素。

相關焦點

  • 小尺寸最佳選擇 Kindle HDX 7評測體驗
    兩年前,800*480低分屏充斥小尺寸平板市場,主流機型為1024*600;去年,谷歌發布Nexus7 初代帶來了新的標準,1280*800成為了各家OEM競逐的焦點。而到了2013年,又是谷歌為我們帶來了新的標準,Nexus 7二代的屏幕解析度為1920*1200。而筆者今天為大家帶來的這款Kindle Fire HDX 7,同樣也配備了這塊目前7英寸平板當中最高規格的屏幕。
  • 移動看片神器 八款熱門小尺寸平板推薦
    移動看片神器 八款熱門小尺寸平板推薦視覺新體驗看片首選 聯想平板S8    聯想平板S8採用的是8英寸華碩 Fonepad 7(FE7530CXG)上市時間2014年08月產品定位娛樂平板電腦,手機平板電腦作業系統Android4.4處理器架構X86架構處理器技術英特爾芯平板處理器型號Intel Atom Z3530處理器主頻1.33GHz處理器核心四核心系統內存1GB存儲容量8GB存儲介質eMMC存儲擴展支持Micro SD(TF)卡,最大支持64GB屏幕尺寸7英寸屏幕解析度1280x800
  • 黃金分割在界面設計中的應用
    二、運用黃金分割線構圖畫面長寬比不同,黃金分割線位置也不同,這裡我們列舉常用的長寬比尺寸4:3/3:2/16:9/1:1。在移動端主流尺寸中,iOS尺寸使用750*1334,安卓尺寸使用1080*1920,這倆個尺寸正好等同於一倍圖375*667的比例。不同長寬比的畫面我們按照0.618:1的比例,一個畫面可以切割出4條黃金分割線,上分割線/下分割線/左分割線/右分割線。我們在實際構圖怎麼利用黃金分割線快速排版?
  • 理論尺寸和參考尺寸知多少
    可使用TED定義的:1、要素的公稱形狀與尺寸;2、理論正確要素;3、要素的局部位置與尺寸,包括局部被測要素;4、被測要素的延伸長度;5、兩個或多個公差帶的相對方向;6、基準目標相對位置與方向,包含可移動基準目標;7、公差帶相對於基準或基準體系的相對位置與方向;8、公差帶寬度的方向
  • 窗戶尺寸規範標準 這才是正確的尺寸
    在房屋中窗戶通風及採光是極其重要的,那窗戶尺寸是多少才是合適的呢?下面為大家介紹窗戶尺寸規範標準及一般房屋窗戶尺寸供參考。一、窗戶尺寸規範標準窗戶尺寸規範中,規定窗戶玻璃高=勾光企尺寸-7cm窗扇玻璃寬=上下方尺寸-0.8cm亮窗玻璃寬=(上下滑尺寸-7cm)/2 亮窗玻璃高=中柱+1.2cm三扇上下方長(用四支勾企)=(上下滑長-10.5cm)/3三扇上下方長(用四支全企)=(上下滑長-12.6cm)/3四扇不帶中封=(
  • 這裡有手機 QQ 剛誕生的界面,以及接下來 10 年的界面進化圖
    QQ 手機版一直到 2003 年才誕生,第一個手機 QQ 版本的界面是這樣的:當時還是功能機時代,主要以塞班系統為主,整個界面非常簡潔,只能滿足基本的聊天需求。下圖是 2004 的界面:下圖是 2005 年的樣子,登錄界面顯示「移動QQ」,界面大幅變化,起碼支持多標籤頁顯示了:
  • 如何利用網格系統科學地打造APP界面?
    目前,網格系統已經廣泛地運用在雜誌、平面設計、網頁設計、移動端界面設計之中。為什麼要學習網格系統?例如下圖,設計師A和B都各自遵循一套尺寸規範去搭建頁面,但是設計結果給人的感覺卻完全不一樣。因此,擁有一套統一的網格系統,就能保證設計師們的產出具有高度的一致性、規律性,合作起來更加地高效。
  • 4.6吋720p屏+1200萬 雙核索尼LT28h評測
    如果問及2012年哪些手機廠商給我們留下的印象最深,那麼索尼移動一定是其中之一。自從Xperia家族崛起後,我們可以明顯的看出索尼移動在產品設計上的改變,方方正正的外觀也讓用戶真正領略了何為整齊劃一。雖然擁有眾多Xperia產品,但是每一款產品都有著自己的獨特之處。
  • 固/氣界面上的電化學反應機理、量子尺寸效應、超冷原子的相干操控...
    在原子尺度上理解反應機理,尤其是確定反應的決速步驟,對於更好的從分子和原子層面設計更高效穩定的界面,起著關鍵的作用。在這個報告中,我將以氧氣/摻雜氧化鈰界面的氧還原反應為例,介紹我們建立的一套具有普適性的,用於研究界面上電化學反應微觀機理的理論模型和實驗方法:通過獨立的控制氣相氧分壓和固相中的氧化學勢,我們成功的分離了界面兩側的反應驅動力;利用基於同步輻射的近常XPS和XAS技術,我們得到了界面上的化學成分和表面電勢;利用我們建立的動力學模型,我們將Butler-Volmer方程中的參數和反應的微觀機理聯繫起來,
  • SolidWorks工作界面(零件建模篇)
    SolidWorks軟體介紹——零件建模界面初識當我們在剛接觸到SolidWorks這款建模軟體的時候,首先最需要了解的就是軟體各個功能的位置以及每個功能的具體作用。尤其是使用頻率最高的「零件建模」工作界面的各個功能/命令的設置以及使用。
  • 《Valorant》界面翻譯 中英文對照界面最全合集
    大廳界面:  鍵盤控制界面:  匹配界面:  視角調整界面:cid=720、<<  以上是關於《Valorant》中英文對照界面翻譯合集的整理,希望對大家有幫助。 責任編輯:白銀天使
  • 為觸屏手機而設計:拇指操作的「熱區/死角」與「控制項尺寸」
    單手拇指操作和雙手食指操作對於控制項尺寸的設計要求又有什麼差異?一、研究背景觸屏手機界面設計的背景與挑戰挑戰1:發展時間短,國內外的研究都尚處在探索階段,充滿未知和不確定。時至今日,不過4年時間,以蘋果設計團隊為先驅國內外相關研究領域,包括觸摸的手勢、觸屏界面的規範、觸摸的可用性研究等等,都還處在探索階段,這也意味著有很多現有的東西都是建立在猜測和嘗試基礎上的,他們的成熟度也是有待時間檢驗的。這些東西包括國外的期刊文獻和圖書,甚至是蘋果app開發官網上的信息、設計原則。
  • 分析Google、微軟、蘋果設計規範的異同點
    結合material design由來的原因再看其內容從圖形、動效到基礎控制項,明顯能分析出material design更希望通過規範去解決Android平臺設計碎片化的問題,保證設計風格的一致性。所以在規範的詳細描述中,不論是界面還是控制項都給出詳細的尺寸規範,希望設計師們遵循這些規範,從而保證設計的一致性。
  • 參考尺寸與公差累積
    對於這樣的一些尺寸,剛接觸圖紙的新人朋友會有一些困惑:這篇文章將從上面三個角度,來分別地進行討論。對於尺寸與公差的文章,我們少不了用圖紙的形式來表述問題,這樣更加清晰,也更能說明問題,看下圖:圖1:參考尺寸 1:在一些圖紙上,完整地標註了某個尺寸,也完整地標註了公差;可是,在另外一個視圖上,該部位的尺寸又重複地出現了。
  • 贈送3米HDMI線 開博爾K730i售價1280元
    ×720@60P)HD MPEG2 MP/HL,ISO,IFO,VOB,TS(最高1920×1080@30P/60I或1280×720@60P)HD MPEG4 SP/ASP,Xvid(最高1920×1080@30P/60I或1280×720@60P)H.264 BP@L3,MP@L4.1,HP@L4.1(最高1920×1080@30P/60I或1280×720@60P)
  • 安卓智能體驗 瑞珀M4高清機報價899元
    安卓系統是全球增長最快,最優秀的移動智能系統,搭載安卓系統的高清機,提供給人們智能化的娛樂生活。瑞珀M4就是一款採用了安卓2.3智能系統的高清播放機,這款產品目前的報價為899元,喜歡這款產品的朋友不妨多多關注。
  • 谷歌Chrome安卓版測試全新共享界面:二維碼和截圖來了
    IT之家1月21日消息 分享是各大網際網路應用的基礎功能之一,而谷歌在Chrome瀏覽器安卓測試版中引入了新的共享界面來優化分享體驗。目前,根據外媒Android Police的報導,Chrome瀏覽器(Android版)正在引入自定義共享界面,這個界面會在傳統的Android共享菜單之前顯示。新的共享菜單當前隱藏在chrome:// flags的標誌後面。
  • 界面設計方法(1):界面的概念與分類
    編輯導語:對於很多軟體工程師來說,工作內容都與界面設計有很大的關聯。而界面設計的本質又是業務功能的設計,基於此,作者在本篇文章中,從數據分類、業務功能分類以及界面分類這三個方面,為我們詳細地說明了界面設計方法,希望能夠對你有所幫助。
  • 前瞻手遊產業全球周報第18期:《英雄聯盟》手遊界面曝光 界面設計...
    近日,LOL手遊組官微曝光了一組LOL手遊的截圖,從選英雄界面,匹配遊戲界面以及遊戲中操作界面都有截圖展出,總體上界面設計與端遊一致。《特種部隊:重置版》將於明年上線近日,《特種部隊》開發商DragonFly公開了《特種部隊》IP為基礎的2款新作。其中,《特種部隊:重置版》將同時上線PC和手遊平臺,計劃於2020年第二季度上線。