午夜精品久久久久久-午夜精品久久久久久91-午夜精品久久久久久久-午夜精品久久久久久久2023-国产精品亚洲精品久久成人-国产精品亚洲精品日韩动图

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

作者:菜心設計鋪
分類: 觀點/經驗
2017-06-13
4650

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

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

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

Dribbble 優秀作品.png

△  Dribbble 優秀作品

這些界面視覺上非??犰?。

當然,我從來都不否定概念稿的作用與價值,它可以為我們提供配色、形式、創意等等,但是我今天要補充的是這些概念稿沒有的東西,就是實打實在工作上需要考慮的細節。

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

1.輸入限制問題

2.輸入多行文字后的規則

3.別忘了輸入內容時會喚起鍵盤

4.記得標注鍵盤類型

1. 輸入限制問題

很多輸入框是有限制字數的(微博的140字),如果輸入框對字數有限制,而你沒有把規則告訴用戶,那用戶一定會吐糟。

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

那如何告訴用戶限制規則呢?

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

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

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

發布微博的時候.png

2. 輸入多行文字后的規則

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

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

微信聊天界面的規則.png

輸入5行文字以內,輸入框會向上撐開。

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

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

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

唱吧的聊天界面.png

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

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

3. 別忘了輸入內容時會喚起鍵盤

我們來看下面這個界面:

下面這個界面.png

起初一看沒啥問題啊,可是當真正落地的時候,就會發現,問題大大的。

當你準備輸入內容的時候,鍵盤會被調起,這時候就尷尬了,如下圖:

鍵盤.png

提交按鈕呢?

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

這就是設計師經驗不足,前期沒有考慮充分導致的結果。

這種現象還經常會出現在登錄頁面:

登錄頁面.png

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

鍵盤調起的狀態.png

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

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

4. 記得標注鍵盤類型

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

標注鍵盤類型.png

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

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

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


0
0
分享到:

0

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

推薦閱讀

×

賽事服務聯系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯系我們

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

版權信息

  移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

主站蜘蛛池模板: 日本欧美一区二区三区免费不卡 | 欧美性aaa | 婷婷亚洲综合五月天在线 | 国产精品午夜高清在线观看 | 操人视频网站 | 五月婷婷天 | 人人看人人做人人爱精品 | 模特视频一二三区 | semm亚洲欧美在线高清 | 亚洲欧美日韩一区 | 男女爱爱爽爽福利免费视频 | 91av视频在线 | 日本xxxxx黄区免费看动漫 | 欧美肉到失禁高h视频在线 欧美三级成人 | 黄乱色伦短篇小说h | 日本黄色免费在线观看 | 在线成人免费 | 91av免费在线观看 | 日本aaaa级片 | 日日躁夜夜躁狠狠天天 | 黄色一级视频欧美 | 久久久久久国产精品免费免 | 午夜剧院免费 | 九色 在线| 午夜色a大片在线观看免费 午夜色大片在线观看 | 亚洲激情综合 | 天天操天天摸天天爽 | 天天躁夜夜 | 免费观看做网站爱 | 成人a毛片在线看免费全部播放 | 久久这里精品青草免费 | 78m-78模成视频在线 | 日本a网| 久久99精品福利久久久 | 黄色录像日本 | 免费播放特黄特色毛片 | 欧美极品第1页专区 | 影音先锋五月天 | 69精品在线观看 | 亚洲精品亚洲人成毛片不卡 | 天天躁狠狠躁夜夜躁2021 |