2022-06-28 分類: 網(wǎng)站建設(shè)
很多新人朋友由于工作經(jīng)驗少,常常會心理沒底,因為對一些工作上的設(shè)計細(xì)節(jié)并不了解,不過沒關(guān)系,以后菜心會多分享一些關(guān)于工作上的細(xì)節(jié)經(jīng)驗,希望對大家有所幫助。
我們常常會看到網(wǎng)上有很多同學(xué)做一些概念稿:
△ Dribbble 優(yōu)秀作品
這些界面視覺上非??犰?。
當(dāng)然,我從來都不否定概念稿的作用與價值,它可以為我們提供配色、形式、創(chuàng)意等等,但是我今天要補(bǔ)充的是這些概念稿沒有的東西,就是實打?qū)嵲诠ぷ魃闲枰紤]的細(xì)節(jié)。
今天就拿一個簡單的輸入框來舉例,看看我們在界面實際落地的時候需要注意哪些內(nèi)容,大綱如下:
1.輸入限制問題
2.輸入多行文字后的規(guī)則
3.別忘了輸入內(nèi)容時會喚起鍵盤
4.記得標(biāo)注鍵盤類型
很多輸入框是有限制字?jǐn)?shù)的(微博的140字),如果輸入框?qū)ψ謹(jǐn)?shù)有限制,而你沒有把規(guī)則告訴用戶,那用戶一定會吐糟。
比如微信公眾號(移動端)的后臺回復(fù),有一次我回復(fù)用戶的問題,打了200多個字,最后發(fā)現(xiàn)字?jǐn)?shù)已經(jīng)超過限制,無法發(fā)送,這個體驗就很不好,因為在打字過程中沒有接收到任何超過字?jǐn)?shù)限制的提示。
那如何告訴用戶限制規(guī)則呢?
微信個性簽名會在輸入框的右下角告訴你還可以輸入多少字,如下圖:
發(fā)布微博的時候,會在右下角告訴你已經(jīng)輸入多少文字,如果超過140字后,數(shù)字的顏色會變成橙色,起到警示作用,如下圖:
對于輸入框,當(dāng)文字只輸入一行的時候,不會有什么問題,但輸入多行的時候,如果你不給出規(guī)則,那開發(fā)哥哥一定會罵你不專業(yè)。
所以當(dāng)輸入多行文字時,我們一定要考慮清楚如何顯示,我們來看看微信聊天界面的規(guī)則:
輸入5行文字以內(nèi),輸入框會向上撐開。
文字超過5行,輸入框大小就不會變動了,5行以上的文字會被遮擋住。
但微信這里有個細(xì)節(jié)體驗不是很好,因為遮擋住的內(nèi)容一點(diǎn)都看不見了。
我們來看唱吧的聊天界面:
被擋住的文字會露出半行,讓用戶知道,哦,原來上面還有字。(不過唱吧的輸入框有點(diǎn)小氣)
我們來看下面這個界面:
起初一看沒啥問題啊,可是當(dāng)真正落地的時候,就會發(fā)現(xiàn),問題大大的。
當(dāng)你準(zhǔn)備輸入內(nèi)容的時候,鍵盤會被調(diào)起,這時候就尷尬了,如下圖:
提交按鈕呢?
原來是被鍵盤擋住了,現(xiàn)在即使你想把提交按鈕往上提,空間也不夠,因為上面兩個輸入框已經(jīng)把空間占滿了。
這就是設(shè)計師經(jīng)驗不足,前期沒有考慮充分導(dǎo)致的結(jié)果。
這種現(xiàn)象還經(jīng)常會出現(xiàn)在登錄頁面:
這么登錄布局本身是沒有問題的,但是你需要多考慮一種鍵盤調(diào)起的狀態(tài),因為鍵盤調(diào)起來的時候登錄按鈕會被擋住,成本就稍微高了一些,這就是為什么大部分登錄頁是這樣布局的:
因為鍵盤有沒有被喚起,頁面的布局是不用變的。
當(dāng)然這里也不是說那種形式更好,而是提醒大家要考慮好細(xì)節(jié)。
現(xiàn)在大家都知道,輸入內(nèi)容會喚起鍵盤,而鍵盤分為很多種類型,比如中文鍵盤、數(shù)字鍵盤、英文鍵盤,如果在輸出設(shè)計稿的時候?qū)︽I盤類型沒有標(biāo)注,開發(fā)哥哥就會使用默認(rèn)鍵盤,這樣就有可能造成一些降低體驗的問題,例如:
如果你不標(biāo)注使用純數(shù)字鍵盤,默認(rèn)的中英文鍵盤就會被喚起,給用戶帶來不必要的麻煩。
所以鍵盤類型一定要記得標(biāo)注哦,如果需要自定義鍵盤,還需要將自定義鍵盤樣式提供出來,不過開發(fā)成本就會高一些,所以要謹(jǐn)慎使用。
以上這四個點(diǎn)都是菜心以前經(jīng)驗不足時踩過的坑,希望大家看完之后能有所啟發(fā),多去研究研究界面落地的細(xì)節(jié),不過有朋友會問了,沒有工作經(jīng)驗,怎么去知道這些細(xì)節(jié)呀?
分享標(biāo)題:落地界面設(shè)計之輸入框
網(wǎng)站鏈接:http://m.rwnh.cn/news4/172604.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供品牌網(wǎng)站制作、服務(wù)器托管、網(wǎng)站制作、App開發(fā)、網(wǎng)站策劃、網(wǎng)站設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容