总结一些在实际工作当中遇到的交互小细节,希望对你有所帮助。
1、tab与二级界面
tab页可以放很多元素,按钮、列表、搜索框、banner位等,如果点击tab页的某一元素,且做跳转,那么跳转后的二级界面不应再显示tab。
如上图所示,如果点击跳转后的界面显示tab,违反了“ 移动端一个界面只完成一个任务”的原则。tab的作用是为了让用户在浏览时方便切换,而点击跳转后,tab的使命已经完成,界面的首要任务变成让用户专注于二级界面,此时影响首要任务的tab就不应再显示。
而且,如果在二级界面时用户切换到tab2,再切换回来,界面如何显示?如果显示一级界面,需要用户再浏览、点击,才能到原先的二级界面;如果保留原先的二级界面,用户可能会忘了一级界面的存在,从而对tab作为导航的确定性产生疑惑:为什么这个tab下的界面变来变去的?
举个反例,知乎的Android端,底部的“我的 ”tab,二级界面就是显示tab的,如下图所示
不知道知乎团队的设计思路是怎么样的,反正作为用户来讲,相当不习惯。
2、格式塔原理的实践
格式塔原理是排版的重要理论依据,有接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运等原则,每个原则的具体阐述与应用推荐看《写给大家看的设计书》。刚工作的时候,就是因为看了这本书,PPT排版技能突飞猛进。。。在产品的原型设计过程中,也会遇到排版问题,尤其是数据比较多的情况下。
如上图所示,左边是优化前的界面,为了区分上下2个模块,UI尝试过色块、线段等手段,但都不是非常满意。其实这里可以用到格式塔原理中的连续性原理,即是说我们的视觉倾向于感知连续的形式而不是离散的碎片。打个比方,桌上摆着10个桔子,把它们连起来是一条直线,我们眼睛看这10个桔子就会认为它们组成了一条线,而不是单独的一个个点。
界面上的数据也是离散的,点状分布,如果通过数据的排列形成一条无形的线段让用户感知到,岂不是更好?如右图所示,“28000.00”、“+00.00”、“06.12更新”,这3个数据是向下对齐的,虽然离散且分隔较远,但从用户感知来讲,一条线段形成了,模块也就无形中做了区分。
另外,左图数据居中对齐的方式浪费了两边的空间,优化后数据模块的高度变短,首屏能腾出更多的空间。