App單個頁面的最佳文字框個數是多少個?,app文字框個數

來源:互聯網
上載者:User

App單個頁面的最佳文字框個數是多少個?,app文字框個數

【1】、不同大小的手機螢幕,對應的App每頁最佳文字框個數,是不同的。

【1.1】如果是iPhone4的螢幕尺寸,解析度為640x960px的時候, 文字框個數最大值為:2個文字框

【計算公式】

第 一步、(960px螢幕總高度)-(40px的電量條高度)-(88px的頂部條高度)-(88px的下一步按鈕的高度)-(鍵盤高度 520px)=224px的文字框高度; 第二步、(224px的總文字框高度)/(88px單個文字框高度)=2.5個文字框≈2個文字框

【基本尺寸】

40px是電量條的高度;

44px的高度是普通螢幕可點擊高度的最小值;

iPhone4是高清屏,所以可點擊高度的最小值為88px;

即,可以點擊的單個文字框的高度最小值為88px。

鍵盤高度為520px;分析鍵盤高度,是為了防止鍵盤彈起的時候,遮擋了文字框。

【1.2】如果是如果是iPhone5的螢幕尺寸,解析度為640x1136px的時候,

文字框個數最大值為:4個文字框

【計算公式】

第一步、(1136px螢幕總高度)-(40px的電量條高度)-(88px的頂部條高度)-(88px的下一步按鈕的高度)-(鍵盤高度520px)=400px的文字框高度;

第二步、(400px的總文字框高度)/(88px單個文字框高度)=4.5個文字框≈4個文字框

【1.3】如果是如果是iPhone6的螢幕尺寸,解析度為750x1334px的時候, 文字框個數最大值為:6個文字框

【計算公式】

第一步、(1334px螢幕總高度)-(40px的電量條高度)-(88px的頂部條高度)-(88px的下一步按鈕的高度)-(鍵盤高度520px)=598px的文字框高度;

第二步、(598px的總文字框高度)/(88px單個文字框高度)=6.8個文字框≈6個文字框

【綜上所述】考慮到支援小螢幕iPhone4的手機,文字框個數的最佳範值是小於2個;

類似尺寸的Android螢幕,參考上述計算公式,即可算出對應文字框個數最大值。

【2】、從避免鍵盤遮擋文字框的角度來看,滑動鍵盤和打字鍵盤是不同的。

如所示

左邊是【打字鍵盤】,沒有可以點擊【完成】輸入的按鈕,如果是3個文字框:那麼需要上下滑動,才可以點擊下一步按鈕。為了不需要上下滑動,一個App的頁面,文字框個數的最大值是2個。

右 邊是【滑動鍵盤】,點擊有效期間文字框示,彈出的滑動鍵盤上有可以點擊的【完成】的按鈕,如果最後一個文字框是類似【有效期間】的可以彈出滑動鍵盤,有【完 成】的按鈕,那麼最後一個文字框,在點擊【完成】按鈕之後,就可以出現【下一步】的按鈕了。也就是鍵盤,就不會遮擋文字框了。在最後一個文字框是類似【有 效期】文字框,可以彈出滑動鍵盤的時候,一個App的頁面,文字框個數的最大值可以是3個。

【3】、最後一個文字框,是否是簡訊驗證碼的輸入框。

如所示

左圖只有1個文字框,右圖有4個文字框。【左圖】VS【右圖】,右圖的缺點有3個:

一是,【右圖】因為文字框超過2個,所以鍵盤彈起時會遮擋文字框,需要不斷上下滑動,才可以完成輸入;

二是,【右圖】的提示文字和文字框,呈現出文字在上,文字框在下的兩行相片順序,實在是浪費了螢幕的高度。如果文字在左,文字框在右的一行相片順序,那就可以節省使用螢幕的高度了;

三 是,【右圖】的手機號文字框和簡訊驗證碼放在同一頁,使用者需要在填完手機號之後,點擊一次【擷取驗證碼】才可以發送驗證碼簡訊,而左圖在只有一個簡訊驗證 碼的文字框的情況下,使用者跳轉到這個頁面的時候,簡訊驗證碼就在跳轉的一瞬間,就發送到手機上了,為使用者節省了點擊一次【擷取驗證碼】的時間。

【綜上所述】如果文字框是簡訊驗證碼的輸入框,那麼文字框個數的最佳值是1個。

來源於近乎;近乎源碼:http://www.jinhusns.com/Products/Download/?type=xcj

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.