很多新人伴侶由于工作經(jīng)驗(yàn)少，常常會心理沒底，因?yàn)閷σ恍┕ぷ魃系脑O(shè)計(jì)細(xì)節(jié)并不了解，不過不妨，以后菜心會多分享一些關(guān)于工作上的細(xì)節(jié)經(jīng)驗(yàn)，希望對大家有所幫手。

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

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

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

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

很多輸入框是有限制字?jǐn)?shù)的（微博的140字），如果輸入框?qū)ψ謹(jǐn)?shù)有限制，而你沒有把規(guī)則告訴用戶，那用戶必然會吐糟。

好比微信公眾號（移動端）的后臺回復(fù)，有一次我回復(fù)用戶的問題，打了200多個字，最后發(fā)現(xiàn)字?jǐn)?shù)已經(jīng)超過限制，無法發(fā)送，這個體驗(yàn)就很欠好，因?yàn)樵诖蜃诌^程中沒有接收到任何超過字?jǐn)?shù)限制的提示。

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

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

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

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

所以當(dāng)輸入多行文字時(shí)，我們必然要考慮清楚如何顯示，我們來看看微信聊天界面的規(guī)則：

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

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

但微信這里有個細(xì)節(jié)體驗(yàn)不是很好，因?yàn)檎趽踝〉膬?nèi)容一點(diǎn)都看不見了。

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

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

以上就是放輸入多行文字的細(xì)節(jié)，大家在工作的時(shí)候必然要注意。

我們來看下面這個界面：

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

當(dāng)你準(zhǔn)備輸入內(nèi)容的時(shí)候，鍵盤會被調(diào)起，這時(shí)候就尷尬了，如下圖：

提交按鈕呢？

本來是被鍵盤擋住了，現(xiàn)在即使你想把提交按鈕往上提，空間也不夠，因?yàn)樯厦鎯蓚€輸入框已經(jīng)把空間占滿了。

這就是設(shè)計(jì)師經(jīng)驗(yàn)不足，前期沒有考慮充分導(dǎo)致的結(jié)果。

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

這么登錄布局自己是沒有問題的，但是你需要多考慮一種鍵盤調(diào)起的狀態(tài)，因?yàn)殒I盤調(diào)起來的時(shí)候登錄按鈕會被擋住，成本就稍微高了一些，這就是為什么大部分登陸頁是這樣布局的：

因?yàn)椴还苕I盤有沒有被喚起，頁面的布局都不消改變。

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

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

如果你不標(biāo)注使用純數(shù)字鍵盤，默認(rèn)的中英文鍵盤就會被喚起，給用戶帶來不須要的麻煩。

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

標(biāo)簽：九江 東營 林芝 烏魯木齊 鹽城