輸入框的設計 | 金額輸入框如何設計更友好

31 評論 17106 瀏覽 56 收藏 6 分鐘

前言:隨著互聯(lián)網(wǎng)+的概念流行,互聯(lián)網(wǎng)金融也逐漸成為大家耳熟能詳?shù)脑~語,市面上相關的產(chǎn)品也是層出不窮,從2014年開始,在余額寶的引領下的各種寶類APP,以及P2P、基金、股票都開發(fā)了各自的APP產(chǎn)品,那么問題來了,怎樣設計出更加友好的金額輸入框呢?下面我談談我的經(jīng)驗與方法。

設計金額輸入框時,交互設計師要思考用戶在使用過程中遇到的問題。比如數(shù)字顯示時,很多金融APP設計時都沿用了千分位分隔符的樣式。當你輸入這樣1,260,018,301金額,你能第一眼看出是什么數(shù)量級的金額嗎?是不是有些吃力?甚至有時我們輸入14,345時,也會從后向前,以個、十、百、千、萬……,進行定位處理一下。你是不是也有同感呢?估計你并沒有感覺到千位分隔符帶來的方便,反而感覺它在里面干擾視線,增加了閱讀的難度。

還有些APP的金額輸入框,沒有做千分位分隔符的提示,那就更不利于用戶感知自己到底輸入的是什么數(shù)量級了。

IMG_1509

掌上基金的買基金頁面

IMG_1513

微眾銀行的轉(zhuǎn)入頁面

先說說“千位分隔符”的來歷,它是一個舶來品,它其實就是數(shù)字中的逗號。依西方的習慣,人們在數(shù)字中加進一個符號,以免因數(shù)字位數(shù)太多而難以看出它的值。所以人們在數(shù)字中,每隔三位數(shù)加進一個逗號,也就是千位分隔符,其目的是為了更加容易認讀出數(shù)值。

那么為什么是以三位為一段,而不是其他位數(shù)呢?這是因為英文里沒有“萬”“億”,只有“千(thousand)” “百萬(million)” “十億(billion)”,而這三個計數(shù)單位是以千進制的,如:10^3 thousand = 1 million ;10^3 million = 1 billion ,以三位為一段對一個長數(shù)字進行分隔,能一眼看出它有幾個billion、幾個million 和幾個thousand,千位分隔符就是這么產(chǎn)生的。但是,千位分隔符在中國不適用。中國人自從引進阿拉伯數(shù)字以來,也遇到了長數(shù)(數(shù)位較多的數(shù)字)閱讀上困難,為了閱讀、識認的方便,不知道從什么時候從西方引進了千位分隔符,但這個純西方的玩意兒并不服中國的水土。

還有些APP會有大寫金額的提示,但是大寫金額都是繁體字,較長且不利于閱讀,你可是試試讀一下這個金額:70,820,036 柒仟零捌拾貳萬零叁拾六元整 是不是也很吃力?那么怎么解決這些問題呢?

為此,我的設計方案是這樣的(注:如果大家有更好的方案歡迎交流):

當用戶輸入的金額超過千時,出現(xiàn)最高分位提示,每多輸入一位,最高分位隨之增加。我設計的兩個金融相關的APP均采用了該種樣式。

463978517800708027

 

好買儲蓄罐APP存活期頁面

2-3立即購買-2

匯付理財APP的投資頁面

另外,還有一個方法也可以解決這個問題,那就是使用萬分位分隔符(資料里看來的),1,260,018,301 改用萬位分隔符,即為: 12,6001,8301 我們一眼就能看出它有三個數(shù)級,分別有12(個)億、6001(個)萬和8301(個)個。若把“個”去掉,連起來讀就是:12億6001萬8301。怎么樣,還需要個、十、百、千、萬地取數(shù)數(shù)位嗎? 但是很可惜還沒有在中國實行。如果以后采用了萬分位分隔符,也就不存在我上面所說的問題了。

關于金融APP的交互設計,我還會不斷總結和更新,先以此為例開個頭吧!

 

本文由匯付金融首席交互設計師 @柴維英 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請關注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 談談我的想法,要具體考慮用戶使用轉(zhuǎn)賬的這個場景,大額轉(zhuǎn)賬的人群占比是多少,個人認為只有當數(shù)據(jù)達到千萬級會出現(xiàn)對于自己輸入的金額認知困難,如果大多數(shù)人轉(zhuǎn)賬數(shù)額都是6位數(shù)以下,這樣去設計會不會屬于過度設計,反而會給用戶帶來信息干擾

    來自四川 回復
  2. 我覺得直接在輸入欄隔壁顯示淺色的金額大寫就可以了,兩者兼得而且更加直觀

    來自廣東 回復
  3. 第一個方案很直觀,但或者可以用蘋果鍵盤的的輸入方式來實現(xiàn);
    第二個方案不是很簡易,因為千分位已經(jīng)是全球的一種數(shù)字顯示習慣,如果引入萬分位,會打亂大部分用戶的數(shù)字校驗習慣,理解成本反而會更高

    來自廣東 回復
    1. 很贊同您的說法

      來自上海 回復
  4. 這么多年,我一直沒有適應過來千分位。。。。

    來自臺灣 回復
  5. 可不可以再增加一個字段?就是金額中文小寫。比如上面顯示投資金額1500,下面就顯示一千五百元整。

    來自廣東 回復
    1. 一千五百元整,其實讀起來也有些費時間,不夠直觀

      來自上海 回復
  6. 看到1,260,018,301 ,我第一反應是個、十、百、千、、、這樣來數(shù)的,好糾結!
    比較喜歡文章提到的這個方法,希望以后實施吧,畢竟我們中國人都是這樣子的,嘿嘿
    “另外,還有一個方法也可以解決這個問題,那就是使用萬分位分隔符(資料里看來的),1,260,018,301 改用萬位分隔符,即為: 12,6001,8301 我們一眼就能看出它有三個數(shù)級,分別有12(個)億、6001(個)萬和8301(個)個。若把“個”去掉,連起來讀就是:12億6001萬8301?!?/p>

    來自廣東 回復
    1. 這篇文章真的不錯

      來自北京 回復
    2. 是 ??

      來自廣東 回復
    3. 謝謝贊同

      來自上海 回復
  7. 匯付理財APP的投資頁面,這個頁面是5W的金額,但是我第一反映:哦,數(shù)字是50 單位是萬,50萬,妥妥的。再一看不對,是5W。

    來自上海 回復
    1. 是那個逗號的問題

      來自上海 回復
    2. 是的,主要是那個逗號干擾了

      來自廣東 回復
  8. 當用戶要看清一連串的數(shù)字是多少錢的時候,點擊金額文本框的同時顯示其對應的中文釋義。這樣也不會造成占屏幕的空間,也可以很直觀的知道金額。

    來自福建 回復
  9. 國內(nèi)產(chǎn)品,萬分位就足夠了;國際產(chǎn)品,可以根據(jù)用戶所在的國家來確定使用千分位還是萬分位。如果是我,暫時不會考慮顏色。我寧愿把金額的字體弄得更大1-2號。

    來自廣東 回復
    1. 如果只是把金額字體弄大,我們對金額數(shù)量級的感知還是沒有解決

      來自上海 回復
    2. 看清楚再回復吧,別斷章取義;我前面那一大段話你是直接無視了么

      來自廣東 回復
    3. 可惜萬分位沒有實行啊

      來自上海 回復
  10. 你需要考慮國際化方案

    來自江蘇 回復
    1. 我覺得有千分位,國際化就完成了

      來自上海 回復
  11. 用顏色區(qū)分就行了吧。 千以上,每增加一位變一個顏色。由淺入深,長期使用后就對顏色有一種敏感度,看到紅色就知道是千萬級。習慣是無意識狀態(tài)下,用戶體驗應該是最好的。人類只要思考,就會覺得麻煩,只有習慣能跳過思考。

    來自北京 回復
    1. 顏色!機智!

      來自湖北 回復
    2. 用顏色區(qū)分,確實可以減少頁面的干擾,不過需要培養(yǎng)用戶習慣,而且需要約定俗成的顏色來標明,不如文字來的直觀些

      來自上海 回復
    3. 對的,這個得實際情況實際處理。
      一般來說,感性優(yōu)于理性。感性不用思考,理性需要邏輯過程。

      來自北京 回復
  12. 加一個關聯(lián)顯示框:七千零八十二萬零十六元整。缺點是占用了一部分屏幕面積。 ??

    來自北京 回復
  13. 不錯,萬分位好像實行起來就不用愁了

    來自江蘇 回復
    1. 可惜沒有實行

      來自上海 回復
  14. 中國老是把外國那一套學過來,自己的東西都給忘了。

    來自北京 回復
  15. 表示小學時候老師是教的萬分位分隔符

    來自北京 回復
    1. 是嗎?我倒沒印象呢

      來自上海 回復