頁(yè)面的細(xì)節(jié)設(shè)計(jì)小結(jié)

4 評(píng)論 11892 瀏覽 131 收藏 9 分鐘

作為一個(gè)剛?cè)胄袃赡甑漠a(chǎn)品經(jīng)理,其實(shí)感覺(jué)自己還有許多要學(xué)習(xí)和進(jìn)步的地方。之前自己也算是做過(guò)一些案例,犯了許多錯(cuò)誤,所以為了后來(lái)人不走我這條歪路,今天和大家新人分享一下自己的一些頁(yè)面設(shè)計(jì)的一些經(jīng)驗(yàn)。

五個(gè)基本原則

頁(yè)面設(shè)計(jì)所需要遵循的最基本的5個(gè)基本原則:

  1. 設(shè)計(jì)的需求要從實(shí)際需求出發(fā),不要獨(dú)立于市場(chǎng)和運(yùn)營(yíng)去做設(shè)計(jì)。
  2. 每個(gè)頁(yè)面最好能夠完成獨(dú)立的一個(gè)子功能模塊,不要將邏輯打的太過(guò)散亂,一個(gè)功能放在多個(gè)頁(yè)面。
  3. 設(shè)計(jì)要遵從懶漢原則,提高用戶使用的便捷性,降低用戶使用壁壘和成本,要把用戶當(dāng)“懶人”。
  4. 從人性的角度考慮出發(fā),站在用戶角度做設(shè)計(jì),學(xué)會(huì)尊重使用你APP的用戶。
  5. 要考慮到頁(yè)面在各個(gè)情況下的表現(xiàn)形式,幫助開(kāi)發(fā)人員界定邊際。

以下舉兩種類型的頁(yè)面中的一些問(wèn)題來(lái)闡述一下這些原則在實(shí)際設(shè)計(jì)中的體現(xiàn)。

一、負(fù)責(zé)收集用戶數(shù)據(jù)的界面

1、設(shè)計(jì)用戶輸入頁(yè)面的時(shí)候需要考慮到哪些點(diǎn)?(原則2,3,4)

(1)輸入字符的長(zhǎng)度限制

(2)輸入內(nèi)容中是否必須包含某些字符,是否不能包含某些字符。(建議直接在下方就用灰字提示,不要輸完以后才Toast提示)

(3)根據(jù)輸入內(nèi)容的給出恰當(dāng)?shù)妮斎敕绞剑ū热缡鞘褂妹魑倪€是暗文)

(4)根據(jù)輸入內(nèi)容彈出相應(yīng)的虛擬鍵盤(比如輸手機(jī)號(hào)的輸入框就可以彈出純數(shù)字鍵盤,而不是混合鍵盤)

(5)輸入的內(nèi)容如果不符合要求需要給用戶提示。

2、設(shè)計(jì)個(gè)人信息完善頁(yè)面的時(shí)候需要注意什么?(原則1,3)

當(dāng)下許多APP在用戶注冊(cè)界面會(huì)因?yàn)檫\(yùn)營(yíng)和市場(chǎng)的需要,會(huì)強(qiáng)制用戶補(bǔ)全一些個(gè)人信息,比如性別,年齡,出生日期,所在區(qū)域,工作崗位,興趣愛(ài)好等等。這就是在設(shè)計(jì)頁(yè)面之前要事先和相關(guān)部門溝通好一些非功能性需求,而不是自己一個(gè)人埋頭造車。

另外,很多初學(xué)者在一聽(tīng)到要這要那的信息之后,就一股腦的全部丟在一個(gè)界面讓用戶填寫了,須不知這其實(shí)是非常危險(xiǎn)的舉動(dòng),用戶可能就會(huì)因?yàn)檫@個(gè)龐大的個(gè)人信息收集頁(yè)面而被你嚇得流失了。所以,這種情況就要將這個(gè)個(gè)人信息收集的頁(yè)面從原先的一個(gè)頁(yè)面拆解成多個(gè)界面,幫助用戶平緩渡過(guò),防止用戶流失。這樣即完成了其他部門的要求,也不會(huì)給用戶帶來(lái)太大的使用成本。

當(dāng)然,這些多個(gè)頁(yè)面的設(shè)計(jì)仍然要遵從懶漢原則,要注意盡量讓用戶使用起來(lái)感到便捷,也就是說(shuō)能自動(dòng)填充的就不要用點(diǎn)擊選擇,能用點(diǎn)擊選擇的就不要用手動(dòng)輸入。要把用戶當(dāng)成“懶”人。

3、重要信息在輸入的時(shí)候需要注意哪些?(原則3,4)

我們所說(shuō)的重要信息一般指的是用戶后期修改起來(lái)成本很高的數(shù)據(jù)或者會(huì)影響之后操作的數(shù)據(jù)。比如:密碼。

密碼的輸入最尷尬的就是讓用戶只輸入一次,并且還只是暗文顯示,全是********。(這內(nèi)容輸入以后用戶的第一反應(yīng)就是,我輸入的內(nèi)容到底是不是就是我要的內(nèi)容啊,咋辦,還是刪了一個(gè)一個(gè)字母慢慢輸入吧。不管你們是不是這樣的,反正我是這樣的)

所以一般我們會(huì)采用兩種方式,一種是暗文輸入顯示,后面加上明暗文顯示開(kāi)關(guān);第二種是輸入兩次暗文密碼進(jìn)行確認(rèn)。(其實(shí)還有一種直接明文顯示,這個(gè)感覺(jué)安全度不夠。個(gè)人偏向暗文輸入后加開(kāi)關(guān))

4. 用戶輸入內(nèi)容不符合要求的時(shí)候,該如何處理?(原則3,4)

Step1:提示用戶錯(cuò)誤

一般采用點(diǎn)擊后使用Toast的提示方式或者在輸入框下方直接用紅字提示這兩種方式。(個(gè)人觀點(diǎn):我比較喜歡直接在界面中直接提示,而不是提交之后再用Toast的提示,感覺(jué)事后判斷對(duì)用戶不夠友好)

Step2:讓用戶重新輸入

這邊就希望焦點(diǎn)能夠自己聚焦到發(fā)生錯(cuò)誤問(wèn)題的輸入框中,而不是還要用戶再去手動(dòng)點(diǎn)一下輸入框。另外,如果輸入內(nèi)容不是很多,建議可以幫助用戶刪除之前的內(nèi)容,而不是將錯(cuò)誤信息保留。(Attention?。。。∪绻情L(zhǎng)文本輸入,比如什么詳情之類的,用戶輸入了幾十個(gè)字的,你就不要幫著刪除了,用戶會(huì)罵人的)

二、負(fù)責(zé)展示用戶所需數(shù)據(jù)的界面

1、元件區(qū)域和展示內(nèi)容長(zhǎng)度的矛盾(原則5)

首先需要考慮的是展示頁(yè)面每個(gè)元件最大的展示字?jǐn)?shù),就是上限值,還要考慮不同機(jī)型的適配問(wèn)題,別整天拿個(gè)大屏手機(jī)來(lái)做模板。拿我自己為例(黑自己一下下,項(xiàng)目就不說(shuō)了,說(shuō)了你們也不知道,知道了也不會(huì)去下載)

原先界面是長(zhǎng)這樣的,由于上下還有很多文字,所以造成了很多內(nèi)容堆積到了一起,給用戶造成了閱讀壓力,所以想了想要把一些內(nèi)容切分出來(lái)。后來(lái)改成這樣。。。。。。。。

啊,界面變得好看了很多,不再是堆字了,看著不是那么累了,但是。。。。

我會(huì)告訴你內(nèi)容顯示不下了嗎!原來(lái)活動(dòng)區(qū)域我就寫了三個(gè)字,XX市。但是突然和我說(shuō)要變成XX省XX市XX區(qū),完全不夠了好嗎。截止日期在小屏手機(jī)上面顯示也換行了,我的天。

所以,一定要考慮每個(gè)元件需要顯示的元素的長(zhǎng)度啊,還有適配。

2、異常情況VS正常情況(原則5)

注意考慮到界面多種狀態(tài)下的表現(xiàn)內(nèi)容,比如:

數(shù)據(jù)方面:

  1. 當(dāng)前后臺(tái)有數(shù)據(jù)時(shí)
  2. 當(dāng)前后臺(tái)無(wú)數(shù)據(jù)時(shí)

網(wǎng)絡(luò)方面:

  1. 當(dāng)前有網(wǎng)絡(luò)鏈接
  2. 當(dāng)前無(wú)網(wǎng)絡(luò)鏈接

后臺(tái)處理方面:

  1. 數(shù)據(jù)庫(kù)查詢返回正常狀態(tài)
  2. 數(shù)據(jù)庫(kù)查詢返回異常狀態(tài)

設(shè)計(jì)頁(yè)面的時(shí)候要將所有的情況考慮進(jìn)去,而不是只考慮正常的流程,幫助開(kāi)發(fā)人員去處理好邊際問(wèn)題。

以上原則也只是自己在這幾年摸索總結(jié)出來(lái)的內(nèi)容,很不完善,也有很多不足的地方,希望能和大家共勉。

 

本文由 @Chris 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 看你那個(gè)圖我還以為是設(shè)計(jì)師寫的呢,還奇怪哪有這么負(fù)責(zé)任的射機(jī)濕呢

    來(lái)自廣東 回復(fù)
  2. 不錯(cuò),很有用

    來(lái)自重慶 回復(fù)
  3. 寫的挺到位,對(duì)新人很有幫助,希望能多產(chǎn)!給作者瘋狂打call! ??

    來(lái)自北京 回復(fù)
    1. 謝謝!我也在學(xué)習(xí)摸索階段,一起進(jìn)步吧。

      來(lái)自江蘇 回復(fù)