前言
在做页面设计时你是否有过这样的时刻:在参考一些应用时,有些是这么做的,有些是那么做的;这个时候尤其是新手,内心可能会无比纠结;好不容易下定注意选其中一种作为自己应用的参考时,在设计评审时又可能会遭到产品经理和开发同学的质疑,为什么这样做?为什么不那么做?谁谁家的APP就是那么做的等等,那么这时候你可能又会妥协说:“嗯,那样也行”,因为你没有认真思考过你所选的“最优方案”的最优理由是什么?相似方案中有什么差异?它们的优缺点是什么?是否贴合你所设计的产品等。
如果你思考了这些问题,就算在遭到别人质疑的时候,也能为对方分析讲解你的看法和理由,那么这个时候他们也就会更加认同你的方案和观点。
下面就APP界面设计中3个常见的“纠结点”来展开分析我的理解,希望这些分析理解能对还在纠结的你有所启发。
1、必填项的星号可以用别的颜色吗?
2、表单填写的信息到底是居左显示还是居右显示?
3、表单页面需要有保存按钮吗?
一、必填项的星号可以用别的颜色吗?
建议是:最好不要
必填项星号:一般位于必填信息项的前面,用于提醒用户此项为需要重点关注的必填信息。
首先它的作用是为了提醒用户这个是必填项,一般用红色星号表示,一是比较醒目,再一个这是一个用户共同认可的标示(星号+红色才是必填符号)。现在有些应用为了契合APP的主色,把必填星号颜色设计成了别的颜色,但如果用其他颜色的话,不同用户可能会有不一样的理解,例如一个app的主色为绿色,前面必填星号也是绿色,先不说不同用户会不会有不同的理解,站在产品本身可能就没有很好的向用户传达出这里比较重要,需要关注的意思。也就没有达到不到提醒用户的意思。
二、表单填写的信息到底是居左显示还是居右显示?
建议是:分情况;信息少、提示类(辅助信息)居右显示。功能填写类信息与左侧标题隔开固定间距居左显示。
下面我们看几个界面:
界面1:列表填充的信息是居右显示(灰色小字);
此类信息一般为提示类或下级页面的主要信息展示,一般内容较简单,目的是辅助说明、提示
界面2:列表的填充信息是居左显示(跟前面信息项隔开固定间距)
一般为表单填写信息类页面,需要用户输入一些内容以完成任务的操作,输入的内容需要用户重视,该部分填充的内容为页面的主要信息。居左展示1、能很好的与左面的信息标题联系起来、方便对内容的阅读理解 2、遵循大众从左到右的浏览习惯,方便用户检查填写的信息 3、由于标题和右侧的信息距离(界面2中A)是固定的,同时右侧信息也有一个基准线的左对齐位置(界面2中C),符合格式塔心理学中人倾向于固定视觉流的浏览模式,此时浏览效率也就最高。
界面3:列表的填充信息是居右显示(折行时也是居右折行)
这么设计的目的主要是为了让界面视觉上显得左右平衡;由于浏览时需要跟左侧的信息标题联系起来,当内容少时(标题在最左边,信息在最右边),视觉距离上离得较远,阅读时不能很好的连接;当右侧信息较多时居右折行,这时折行信息的浏览就产生了视觉差(界面3中的D), 这里的视觉差可以理解为每次用户换行浏览信息时,主内容左侧的位置是不固定的,尤其是页面内容较多时,用户浏览起来就易产生疲劳感,操作效率较低,同时也违背了大众的浏览习惯。
界面4:填写类信息是居左显示,选择类是居右显示
这类界面是两种形式的结合,在这个界面里填写项信息居左显示,选择类信息居右显示;我的建议是没太必要:1、人的浏览习惯还是从左至右,固定的浏览模式效率是最高的 2、有的居左右的居右,视觉上也会感觉比较凌乱。
三、表单页面需要有保存按钮吗?
建议是:设置类不需要,功能操作类需求。
有些同学分不清可操作表单页面什么该有保存/提交按钮,什么情况下不需要;这就说到前段时间在公司接到产品的一个需求,需求里的操作表单里全部没有按钮,就是当前页面操作完成后,直接点击左上角的返回,之前的操作就被保存了;需求交给我时还特意给我说了这点,“操作页面就不要保存按钮了,我看iOS系统页面就是这么做的”,到这我想说的是我们在参考别人的设计时,不能只是看到表面的东西,要理解并分析别人这么做的理由什么?用户在用的时候是基于什么样的场景?有什么利弊?下面就这个问题简单谈下我的理解:
先来看下面两张图,第1个操作界面没有保存按钮,第2个操作界面有保存按钮,为什么?真的是个人喜好决定的吗?它俩一样吗?
页面操作是否需要保存/提交按钮,我的理解是以下几点作为判断依据:
其实判断标准很简单,就是它是不是一个完整的功能/任务操作页,需要有各种校验判断,需要有一定的逻辑性和必须性。
总结:
还是那句话,在做页面设计时,不要只看到表象的层面、盲目跟随;要结合产品功能和设计目的来考虑最佳的设计方案,我们产品的服务对象是“人”,那么就要结合大众的认真和对人的理解(心理学)的角度去分析考虑问题;
还有一点很重要,如果没有更好的设计方案(且这个设计方案是经过验证的),就不要轻易的去改变大众已经形成固定模式的认知习惯,在你看来这是一个创新,但在用户的角度看来这有可能是一个“不友好”的设计。