起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識頁面的細節設計小結
作為一個剛入行兩年的產品經理，其實感覺自己還有許多要學習和進步的地方。之前自己也算是做過一些案例，犯了許多錯誤，所以為了后來人不走我這條歪路，今天和大家新人分享一下自己的一些頁面設計的一些經驗。
五個基本原則
頁面設計所需要遵循的最基本的5個基本原則：
- 設計的需求要從實際需求出發，不要獨立于市場和運營去做設計。
- 每個頁面最好能夠完成獨立的一個子功能模塊，不要將邏輯打的太過散亂，一個功能放在多個頁面。
- 設計要遵從懶漢原則，提高用戶使用的便捷性，降低用戶使用壁壘和成本，要把用戶當“懶人”。
- 從人性的角度考慮出發，站在用戶角度做設計，學會尊重使用你APP的用戶。
- 要考慮到頁面在各個情況下的表現形式，幫助開發人員界定邊際。
以下舉兩種類型的頁面中的一些問題來闡述一下這些原則在實際設計中的體現。
一、負責收集用戶數據的界面
1、設計用戶輸入頁面的時候需要考慮到哪些點？（原則2，3，4）
（1）輸入字符的長度限制
（2）輸入內容中是否必須包含某些字符，是否不能包含某些字符。（建議直接在下方就用灰字提示，不要輸完以后才Toast提示）
（3）根據輸入內容的給出恰當的輸入方式（比如是使用明文還是暗文）
（4）根據輸入內容彈出相應的虛擬鍵盤（比如輸手機號的輸入框就可以彈出純數字鍵盤，而不是混合鍵盤）
（5）輸入的內容如果不符合要求需要給用戶提示。
2、設計個人信息完善頁面的時候需要注意什么？（原則1，3）
當下許多APP在用戶注冊界面會因為運營和市場的需要，會強制用戶補全一些個人信息，比如性別，年齡，出生日期，所在區域，工作崗位，興趣愛好等等。這就是在設計頁面之前要事先和相關部門溝通好一些非功能性需求，而不是自己一個人埋頭造車。
另外，很多初學者在一聽到要這要那的信息之后，就一股腦的全部丟在一個界面讓用戶填寫了，須不知這其實是非常危險的舉動，用戶可能就會因為這個龐大的個人信息收集頁面而被你嚇得流失了。所以，這種情況就要將這個個人信息收集的頁面從原先的一個頁面拆解成多個界面，幫助用戶平緩渡過，防止用戶流失。這樣即完成了其他部門的要求，也不會給用戶帶來太大的使用成本。
當然，這些多個頁面的設計仍然要遵從懶漢原則，要注意盡量讓用戶使用起來感到便捷，也就是說能自動填充的就不要用點擊選擇，能用點擊選擇的就不要用手動輸入。要把用戶當成“懶”人。
3、重要信息在輸入的時候需要注意哪些？（原則3，4）
我們所說的重要信息一般指的是用戶后期修改起來成本很高的數據或者會影響之后操作的數據。比如：密碼。
密碼的輸入最尷尬的就是讓用戶只輸入一次，并且還只是暗文顯示，全是********。（這內容輸入以后用戶的第一反應就是，我輸入的內容到底是不是就是我要的內容啊，咋辦，還是刪了一個一個字母慢慢輸入吧。不管你們是不是這樣的，反正我是這樣的）
所以一般我們會采用兩種方式，一種是暗文輸入顯示，后面加上明暗文顯示開關；第二種是輸入兩次暗文密碼進行確認。（其實還有一種直接明文顯示，這個感覺安全度不夠。個人偏向暗文輸入后加開關）
4. 用戶輸入內容不符合要求的時候，該如何處理？（原則3，4）
Step1：提示用戶錯誤
一般采用點擊后使用Toast的提示方式或者在輸入框下方直接用紅字提示這兩種方式。（個人觀點：我比較喜歡直接在界面中直接提示，而不是提交之后再用Toast的提示，感覺事后判斷對用戶不夠友好）
Step2：讓用戶重新輸入
這邊就希望焦點能夠自己聚焦到發生錯誤問題的輸入框中，而不是還要用戶再去手動點一下輸入框。另外，如果輸入內容不是很多，建議可以幫助用戶刪除之前的內容，而不是將錯誤信息保留。（Attention！?。。∪绻情L文本輸入，比如什么詳情之類的，用戶輸入了幾十個字的，你就不要幫著刪除了，用戶會罵人的）
二、負責展示用戶所需數據的界面
1、元件區域和展示內容長度的矛盾（原則5）
首先需要考慮的是展示頁面每個元件最大的展示字數，就是上限值，還要考慮不同機型的適配問題，別整天拿個大屏手機來做模板。拿我自己為例（黑自己一下下，項目就不說了，說了你們也不知道，知道了也不會去下載）
原先界面是長這樣的，由于上下還有很多文字，所以造成了很多內容堆積到了一起，給用戶造成了閱讀壓力，所以想了想要把一些內容切分出來。后來改成這樣。。。。。。。。
啊，界面變得好看了很多，不再是堆字了，看著不是那么累了，但是。。。。
我會告訴你內容顯示不下了嗎！原來活動區域我就寫了三個字，XX市。但是突然和我說要變成XX省XX市XX區，完全不夠了好嗎。截止日期在小屏手機上面顯示也換行了，我的天。
所以,一定要考慮每個元件需要顯示的元素的長度啊，還有適配。
2、異常情況VS正常情況（原則5）
注意考慮到界面多種狀態下的表現內容，比如：
數據方面：
- 當前后臺有數據時
- 當前后臺無數據時
網絡方面：
- 當前有網絡鏈接
- 當前無網絡鏈接
后臺處理方面:
- 數據庫查詢返回正常狀態
- 數據庫查詢返回異常狀態
設計頁面的時候要將所有的情況考慮進去，而不是只考慮正常的流程，幫助開發人員去處理好邊際問題。
以上原則也只是自己在這幾年摸索總結出來的內容，很不完善，也有很多不足的地方，希望能和大家共勉。
本文由 @Chris 原創發布于人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
看你那個圖我還以為是設計師寫的呢，還奇怪哪有這么負責任的射機濕呢
不錯，很有用
寫的挺到位，對新人很有幫助，希望能多產！給作者瘋狂打call！ ??
謝謝！我也在學習摸索階段，一起進步吧。