页面的细节设计小结

　　作为一个刚入行两年的产品经理，其实感觉自己还有许多要学习和进步的地方。之前自己也算是做过一些案例，犯了许多错误，所以为了后来人不走我这条歪路，今天和大家新人分享一下自己的一些页面设计的一些经验。

　　

　　五个基本原则

　　页面设计所需要遵循的最基本的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!!!!如果是长文本输入，比如什么详情之类的，用户输入了几十个字的，你就不要帮着删除了，用户会骂人的)

　　

　　二、负责展示用户所需数据的界面

　　1、元件区域和展示内容长度的矛盾(原则5)

　　首先需要考虑的是展示页面每个元件最大的展示字数，就是上限值，还要考虑不同机型的适配问题，别整天拿个大屏手机来做模板。拿我自己为例(黑自己一下下，项目就不说了，说了你们也不知道，知道了也不会去下载)

　　

　　原先界面是长这样的，由于上下还有很多文字，所以造成了很多内容堆积到了一起，给用户造成了阅读压力，所以想了想要把一些内容切分出来。后来改成这样。。。。。。。。

　　

　　啊，界面变得好看了很多，不再是堆字了，看着不是那么累了，但是。。。。

　　我会告诉你内容显示不下了吗!原来活动区域我就写了三个字，XX市。但是突然和我说要变成XX省XX市XX区，完全不够了好吗。截止日期在小屏手机上面显示也换行了，我的天。

　　所以,一定要考虑每个元件需要显示的元素的长度啊，还有适配。

　　2、异常情况VS正常情况(原则5)

　　注意考虑到界面多种状态下的表现内容，比如：

　　数据方面：

　　当前后台有数据时

　　当前后台无数据时

　　网络方面：

　　当前有网络链接

　　当前无网络链接

　　后台处理方面:

　　数据库查询返回正常状态

　　数据库查询返回异常状态

　　设计页面的时候要将所有的情况考虑进去，而不是只考虑正常的流程，帮助开发人员去处理好边际问题。

　　以上原则也只是自己在这几年摸索总结出来的内容，很不完善，也有很多不足的地方，希望能和大家共勉。

*请认真填写需求信息，我们会在24小时内与您取得联系。