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

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

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

△ ?Dribbble 優秀作品

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

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

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

1.輸入限制問題

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

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

4.記得標注鍵盤類型

1. 輸入限制問題

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

我們來看下面這個界面：

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

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

提交按鈕呢？

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

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

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

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

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

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

4. 記得標注鍵盤類型

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

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

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

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

歡迎關注作者的微信公眾號：「菜心設計鋪」

「提升用戶體驗細節的好文合集」

1. 《刀刀必中！UI設計師非學不可的十大易用性原則》
2. 《有圖有案例！125個提升網頁可用性的優化小技巧（一）》
3. 《有圖有對比！125個提升網頁可用性的優化小技巧（二）》
4. 《有圖有案例！125個提升網頁可用性的優化小技巧（三）》

【優設網 原創文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備：http://hao.uisdc.com