亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

進階高級設計師!幫你做能落地的界面設計之輸入框

作者:菜心設計鋪
2017-06-13
4792

很多新人朋友由于工作經(jīng)驗少,常常會心理沒底,因為對一些工作上的設計細節(jié)并不了解,不過沒關系,以后菜心會多分享一些關于工作上的細節(jié)經(jīng)驗,希望對大家有所幫助。

很多新人朋友由于工作經(jīng)驗少,常常會心理沒底,因為對一些工作上的設計細節(jié)并不了解,不過沒關系,以后菜心會多分享一些關于工作上的細節(jié)經(jīng)驗,希望對大家有所幫助。

我們常常會看到網(wǎng)上有很多同學做一些概念稿:

Dribbble 優(yōu)秀作品.png

△  Dribbble 優(yōu)秀作品

這些界面視覺上非常酷炫。

當然,我從來都不否定概念稿的作用與價值,它可以為我們提供配色、形式、創(chuàng)意等等,但是我今天要補充的是這些概念稿沒有的東西,就是實打?qū)嵲诠ぷ魃闲枰紤]的細節(jié)。

今天就拿一個簡單的輸入框來舉例,看看我們在界面實際落地的時候需要注意哪些內(nèi)容,大綱如下:

1.輸入限制問題

2.輸入多行文字后的規(guī)則

3.別忘了輸入內(nèi)容時會喚起鍵盤

4.記得標注鍵盤類型

1. 輸入限制問題

很多輸入框是有限制字數(shù)的(微博的140字),如果輸入框?qū)ψ謹?shù)有限制,而你沒有把規(guī)則告訴用戶,那用戶一定會吐糟。

比如微信公眾號(移動端)的后臺回復,有一次我回復用戶的問題,打了200多個字,最后發(fā)現(xiàn)字數(shù)已經(jīng)超過限制,無法發(fā)送,這個體驗就很不好,因為在打字過程中沒有接收到任何超過字數(shù)限制的提示。

那如何告訴用戶限制規(guī)則呢?

微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字,如下圖:

微信個性簽名會在輸入框.png

發(fā)布微博的時候,會在右下角告訴你已經(jīng)輸入多少文字,如果超過140字后,數(shù)字的顏色會變成橙色,起到警示作用,如下圖:

發(fā)布微博的時候.png

2. 輸入多行文字后的規(guī)則

對于輸入框,當文字只輸入一行的時候,不會有什么問題,但輸入多行的時候,如果你不給出規(guī)則,那開發(fā)哥哥一定會罵你不專業(yè)。

所以當輸入多行文字時,我們一定要考慮清楚如何顯示,我們來看看微信聊天界面的規(guī)則:

微信聊天界面的規(guī)則.png

輸入5行文字以內(nèi),輸入框會向上撐開。

文字超過5行,輸入框大小就不會變動了,5行以上的文字會被遮擋住。

但微信這里有個細節(jié)體驗不是很好,因為遮擋住的內(nèi)容一點都看不見了。

我們來看唱吧的聊天界面:

唱吧的聊天界面.png

被擋住的文字會露出半行,讓用戶知道,哦,原來上面還有字。(不過唱吧的輸入框有點小氣)

以上就是放輸入多行文字的細節(jié),大家在工作的時候一定要注意。

3. 別忘了輸入內(nèi)容時會喚起鍵盤

我們來看下面這個界面:

下面這個界面.png

起初一看沒啥問題啊,可是當真正落地的時候,就會發(fā)現(xiàn),問題大大的。

當你準備輸入內(nèi)容的時候,鍵盤會被調(diào)起,這時候就尷尬了,如下圖:

鍵盤.png

提交按鈕呢?

原來是被鍵盤擋住了,現(xiàn)在即使你想把提交按鈕往上提,空間也不夠,因為上面兩個輸入框已經(jīng)把空間占滿了。

這就是設計師經(jīng)驗不足,前期沒有考慮充分導致的結(jié)果。

這種現(xiàn)象還經(jīng)常會出現(xiàn)在登錄頁面:

登錄頁面.png

這么登錄布局本身是沒有問題的,但是你需要多考慮一種鍵盤調(diào)起的狀態(tài),因為鍵盤調(diào)起來的時候登錄按鈕會被擋住,成本就稍微高了一些,這就是為什么大部分登錄頁是這樣布局的:

鍵盤調(diào)起的狀態(tài).png

因為鍵盤有沒有被喚起,頁面的布局是不用變的。

當然這里也不是說那種形式更好,而是提醒大家要考慮好細節(jié)。

4. 記得標注鍵盤類型

現(xiàn)在大家都知道,輸入內(nèi)容會喚起鍵盤,而鍵盤分為很多種類型,比如中文鍵盤、數(shù)字鍵盤、英文鍵盤,如果在輸出設計稿的時候?qū)︽I盤類型沒有標注,開發(fā)哥哥就會使用默認鍵盤,這樣就有可能造成一些降低體驗的問題,例如:

標注鍵盤類型.png

如果你不標注使用純數(shù)字鍵盤,默認的中英文鍵盤就會被喚起,給用戶帶來不必要的麻煩。

所以鍵盤類型一定要記得標注哦,如果需要自定義鍵盤,還需要將自定義鍵盤樣式提供出來,不過開發(fā)成本就會高一些,所以要謹慎使用。

以上這四個點都是菜心以前經(jīng)驗不足時踩過的坑,希望大家看完之后能有所啟發(fā),多去研究研究界面落地的細節(jié),不過有朋友會問了,沒有工作經(jīng)驗,怎么去知道這些細節(jié)呀?


0
0
分享到:

0

喜歡他,就推薦他上首頁吧^_^

推薦閱讀

×

賽事服務聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話:18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國家大學科技園東區(qū)9號樓2層

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網(wǎng)安備 41019702002261號

亚洲视频在线一区二区三区_色婷婷AV一区二区三区浪潮_亚洲综合无码精品一区二区三区_高清精品一区二区三区一区

      9000px;">

          成人污视频在线观看| 4438亚洲最大| 亚洲成人先锋电影| 亚洲欧美二区三区| 国产调教视频一区| 日韩一级免费观看| 欧美精品三级日韩久久| 99r国产精品| jiyouzz国产精品久久| 国内外成人在线| 青娱乐精品视频| 亚洲高清在线视频| 亚洲另类在线制服丝袜| 亚洲精选视频免费看| 亚洲欧美区自拍先锋| 亚洲制服丝袜在线| 亚洲va中文字幕| 午夜免费久久看| 日本中文在线一区| 蜜桃精品视频在线| 国产乱码一区二区三区| 国产激情一区二区三区四区 | 欧美视频一区二| 欧美中文字幕亚洲一区二区va在线 | 日韩三级精品电影久久久| 日韩一区二区精品葵司在线 | 97精品电影院| 91成人在线观看喷潮| 欧美一级一区二区| 国产欧美日韩三级| 亚洲国产日韩精品| 国产在线国偷精品产拍免费yy| 国产一区二区三区观看| 99r精品视频| 日韩一区二区三区四区| 中文字幕的久久| 婷婷国产v国产偷v亚洲高清| 国内一区二区在线| 欧美三区在线观看| 国产婷婷一区二区| 亚洲国产一区二区三区青草影视 | 国产亚洲精品免费| 亚洲福中文字幕伊人影院| 免费人成网站在线观看欧美高清| 激情五月播播久久久精品| av一区二区三区在线| 在线播放中文一区| 国产精品乱码一区二区三区软件| 亚洲综合另类小说| 黑人巨大精品欧美一区| 99vv1com这只有精品| 欧美一区二区日韩| 亚洲欧美综合在线精品| 日本午夜精品视频在线观看 | 欧美丰满少妇xxxxx高潮对白| 久久久久久久性| 夜夜嗨av一区二区三区网页| 九一久久久久久| 欧美男人的天堂一二区| 自拍偷自拍亚洲精品播放| 丝袜诱惑亚洲看片 | 在线播放中文一区| 自拍偷自拍亚洲精品播放| 日韩av成人高清| 色就色 综合激情| 欧美激情一区二区三区全黄| 美腿丝袜亚洲三区| 欧美在线视频全部完| 国产精品的网站| 精品一区二区三区免费| 欧美理论在线播放| 亚洲黄色性网站| 91丝袜美腿高跟国产极品老师| 26uuu成人网一区二区三区| 日韩国产欧美一区二区三区| 欧美在线免费观看视频| 亚洲精品视频一区二区| av在线不卡观看免费观看| 久久免费的精品国产v∧| 蜜桃精品视频在线| 欧美xxxxxxxxx| 精品一区二区三区视频在线观看| 日韩亚洲欧美在线| 精品一区免费av| 久久婷婷国产综合国色天香| 韩国v欧美v日本v亚洲v| 久久精品无码一区二区三区| 精品午夜久久福利影院| 久久久久亚洲综合| 国产成人高清在线| 国产精品日日摸夜夜摸av| 国产91丝袜在线播放| 国产精品三级电影| 91黄色激情网站| 亚洲国产一区二区a毛片| 91精品婷婷国产综合久久 | 成人午夜免费视频| 国产精品久久久久影院老司| 91色在线porny| 午夜天堂影视香蕉久久| 精品福利二区三区| 国产69精品久久777的优势| 亚洲国产成人自拍| 91久久一区二区| 秋霞成人午夜伦在线观看| 久久夜色精品国产噜噜av| 成人激情av网| 洋洋av久久久久久久一区| 91精品国产欧美一区二区18 | 亚洲欧美怡红院| 欧美日韩精品高清| 国产精品夜夜嗨| 亚洲永久精品国产| 日韩午夜av电影| 99re视频精品| 老司机精品视频一区二区三区| 久久久无码精品亚洲日韩按摩| 99久久精品国产精品久久| 日本不卡的三区四区五区| 国产欧美日韩一区二区三区在线观看 | 99在线精品一区二区三区| 亚洲一级二级在线| 久久综合中文字幕| 欧美在线免费观看视频| 国产成人啪免费观看软件| 亚洲国产精品久久一线不卡| 久久久无码精品亚洲日韩按摩| 欧美三电影在线| 国产91丝袜在线播放0| 午夜电影久久久| 中文字幕高清不卡| 精品少妇一区二区三区日产乱码 | 国产在线精品一区二区三区不卡| 亚洲日本乱码在线观看| www久久久久| 777xxx欧美| 不卡av在线网| 国产真实乱偷精品视频免| 亚洲一区日韩精品中文字幕| 国产午夜精品一区二区三区嫩草 | 国产精品毛片大码女人| 日韩精品资源二区在线| 欧美怡红院视频| 9色porny自拍视频一区二区| 国产在线精品视频| 蓝色福利精品导航| 日韩av网站免费在线| 亚洲午夜电影在线观看| 亚洲天堂a在线| 国产精品国产三级国产aⅴ无密码| 日韩欧美电影一二三| 欧美日韩国产成人在线91| 91成人免费网站| 在线精品视频免费播放| 91精品福利在线| av不卡免费电影| 成人ar影院免费观看视频| 国产传媒一区在线| 国模少妇一区二区三区| 看电视剧不卡顿的网站| 麻豆成人在线观看| 日本美女视频一区二区| 蜜臀av一区二区三区| 强制捆绑调教一区二区| 美女一区二区三区| 精品亚洲免费视频| 国产美女娇喘av呻吟久久| 国产剧情在线观看一区二区| 国产一区二区成人久久免费影院| 九九在线精品视频| 高清视频一区二区| 91色综合久久久久婷婷| 欧美亚洲综合网| 欧美一区二区三区人| 欧美大尺度电影在线| 欧美成人vps| 欧美国产一区在线| 亚洲女与黑人做爰| 亚洲动漫第一页| 久久成人免费日本黄色| 国产精品一区二区黑丝| 99久久99久久精品免费观看| 在线观看91精品国产入口| 欧美在线观看视频一区二区三区| 91传媒视频在线播放| 日韩欧美国产综合一区| 国产精品你懂的在线欣赏| 一区二区三区在线视频播放| 亚洲二区视频在线| 激情成人午夜视频| 97精品国产露脸对白| 91精品国产综合久久小美女| 久久婷婷色综合| 一区二区欧美视频| 国产一区二区三区免费播放| 91日韩在线专区| 精品电影一区二区| 亚洲欧美二区三区| 蜜臀av一区二区| 色哟哟国产精品免费观看|