交互小细节(2)

总结一些在实际工作当中遇到的交互小细节,希望对你有所帮助。

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个数据是向下对齐的,虽然离散且分隔较远,但从用户感知来讲,一条线段形成了,模块也就无形中做了区分。

另外,左图数据居中对齐的方式浪费了两边的空间,优化后数据模块的高度变短,首屏能腾出更多的空间。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 179,156评论 25 708
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,422评论 4 61
  • 建立一条新的TCP连接时,甚至是在发送任意数据之前,TCP软件之间会交换一系列的IP分组,对连接的有关参数进行沟通...
    钱塘阅读 2,623评论 0 0
  • 一、目标:2017年轻松赚到20万,同时拍摄完3部电影作品 动机和愿景: 愿我现在及过去所有种下的有关财富的种子早...
    易江南从心出发阅读 245评论 0 0
  • 我调到这个网点时间不长,和各位师傅交往的也并不深入,尤其是在我们这样的行业,由于各种各样的原因,年轻的,年长...
    丁香香香阅读 430评论 3 2

友情链接更多精彩内容