隐藏为了适时出现

  在这个信息爆炸的社会里,信息过载已成为常态,为了提升用户使用效率,处理界面的信息层次是每个设计师都要面对的重要一课。这篇短文想聚焦的话题是界面中的“隐藏”。在界面设计中,隐藏不是为了和用户躲猫猫,而是为了让用户更好地聚焦在重要内容上,降低界面信噪比,提升信息传达效率。

  笔者以前经常玩的D&D,非常喜欢其中的盗贼(Rogue)角色,潜行在黑暗中,伺机致命一击。一个好的隐藏设计,是否也能和盗贼的背刺一样给力呢?我们先来看看隐藏的技能发动条件。

  其实这项技能的领域很宽,在固定和特定的情况下都能施展拳脚。首先看看在固定情况下的运用吧。固定包括两种:不常变设置引向外部目标

  1.不常变的设置:

  固定不变的位置或功能,在相对不重要、操作频率不高或一次性设置时,合理组织信息后就能隐藏了。

  如ebay或apple的账户信息、个人任务等都可以归属在固定模块“My eBay”下:

  amazon那从a到z 丰富的类目导航,被隐藏在左侧logo下方。全站它都在老地方静候展示的时机:

  整站的固定位置始终能找到它,隐藏既保持认知一致,也节约了空间:

  1. 指向外部目标

  这种隐藏多考虑到外部分享平台数量多、常有变动增减,全部展示,界面设计更复杂;不常变的设置是绝对固定,指向外部目标是相对固定。

  新浪微博的和豆瓣电台的点点点中,都隐藏了各种外部分享渠道:

  豆瓣电台的分享:

  目前为止,前面提的隐藏都是隐藏次要信息。难道rogue的本事就这点?别急,接着要说的特定情况下,“隐藏” 将一改绿叶角色,展示进阶技能。像一个高级rogue,只在该出场时亮相,漂亮的出手背刺甚至打出爆击,将隐藏技发挥致极。

  与内容无关,在特定的阅读场景下,适时地提示了chrome插件的隐藏选词翻译:

  Apple官网注册ID,逐字段填写时,输入框会适时弹出tips来提示用户,符合要求的Apple ID包含这三项内容:

  并根据输入过程中的具体情况提示问题点、待完成或特殊要求,都是针对性的提示,根据目标现状出手,是成功rogue必备的素质。适时地提示隐藏的信息,大幅提升表单填写效率:

  针对进阶技能rogue还有一套精准背刺技巧:做好完全隐藏适时提示,其实也容易:给轻量化的线索或提示,寻求进阶技请看过来:

  1. 细微处,优雅\恰好的提示

  既然隐藏,如果提示过强、大或显,就违背了隐藏的初衷,显得技拙,轻一点才不打扰到用户的任务进程,所以提示要细微,要适当。

  众所周知的PS工具栏右下的小三角,就优雅地邀请用户在使用中根据需要探索更多功能:

  1. 渐进的提示

  配合任务操作进程,为用户逐步揭开隐藏的面纱,才是有效的提示。

  在Pinterest右上角message弹框输入前,很轻量的视觉提示:To后请输入字符;随着输入动作,出现下一步选择用什么渠道发送的提示:

  之前apple.com 注册即时校验提示,也是渐进提示的有效应用。

  1. 扫视/泛读的提示

  不经意间用户快速扫描时,用小小的力就能撬动关注。rogue不是拼尽全力的肉盾,巧力是最适合的。

  相比数字气泡,小红点足够引起用户扫视时的聚焦,如Giles Colborne提出“把标签放哪里比把标签做多大重要得多”:

  1. 聚焦/专注任务时的提示

  这是潜行rogue即将触到背刺目标的最给力动作:专注目标,适时出现。通常都是聚焦任务时,给出针对性强的操作提示。

  来LinkedIn中inbox的前提是:查阅新信息或处理之前条目。

  总揽整个信息列表时,除新旧信息区别外都均衡罗列;一旦聚焦具体条目时,鼠标动作恰好地hover出相应的操作提示:

  看到Path的加号提示时,自然明了是新增信息;点触后沿袭之前的逻辑:提示可选择条目分类或关闭:

  常按图片时,猜测是对图片内容有兴趣,接着了相关的提示。上下滚动浏览时,右侧会提示出发布顺序的时间信息:

  evernote的标签过滤大概从未告诉过你,它能推荐除当前信息标签外,还所属其他的标签列表给你;根据设置了多个标签的关联性,提示并速推关联性强的条目,高效地找出之前收集的资料:

  最后,是再熟悉不过的iPhone几乎应用到所有IOS版本的搜索,完全隐藏,没有线索。在未找到而“抓狂乱滑”时,搜索框悄然而至,并递出的键盘提示输入想找的信息;输入时,又适时提示:可以快速换个词,或从推荐项目中选取;还有根据触屏的特质,轻点其他区域取消这次召唤:

  结语,隐藏的各项技能说差不多了,设计工作中,做到成功的隐藏,打出rogue的致命一击,是设计平衡观下的最佳解法。有效的隐藏是为了适时的出现。潜心进阶技能,做最给力的设计解决方案,相信一击中的,在不久就会得到:)

时间: 2024-12-12 05:53:19

隐藏为了适时出现的相关文章

移动端 input 获取焦点后弹出带enter(类似于搜索,确定,前往)键盘,以及隐藏系统键盘

一:调出系统带回车键的键盘 在项目中经常有输入框,当输入完成后点击确定执行相应的动作.但是有些设计没有确定或者搜索按钮,这就需要调用系统键盘,点击系统键盘的确定后执行相应动作. 但是单纯的input是无法实现的,要想调出带回车的键盘必须把input放在form表单里面才可以,并且得加上action(一定要加),下面是个简单的例子. <form action class="search" onsubmit="return false;"> <i cl

SQL Server Pivot 隐藏group

SQL Server行列转换隐藏group Pivot有一个隐藏的Group 分组, 除了Pivot column 和value列,其他列作为分组 Example: IF NOT EXISTS(SELECT * FROM sys.tables where name = 'Pivot_test') CREATE TABLE Pivot_test ( id1 int, id2 int, Pivot_column varchar(50), value char(50) ) insert into Pi

隐藏Title

Activity继承对象不同隐藏有所不同,分为ActionBarActivity和Activity两种. getSupportActionBar().hide(); 用于ActionBarActivity中 requestWindowFeature(Window.FEATURE_NO_TITLE); 用于Activity中 并且在配置清单文件中 android:theme="@android:style/Theme.NoTitleBar" 也不适用于ActionBarActivity

jsp页面做文件上传时遇到要根据登陆名按钮显示或隐藏的情况

项目遇到的情况要根据登陆的角色不同显示或隐藏按钮,因为之前没有遇到过 所以有些不知道怎么下手,百度解决了 方法如下: document.getElementById("#anniu").hide() <button id="anniu">隐藏按钮</button>

点击区域外隐藏该区域,event.stopPropagation()

event.stopPropagation() Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event. 点击区域外隐藏该区域Example: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta content="chars

javascript页面详细信息的显示和隐藏

页面详细信息的显示和隐藏 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <script type="text/javascript"> function show_detail(detail){ var p=document.getElementById('p'); if(detail.open){ p.style.

android ListView条目中TextView隐藏到显示时的测量

觉得ExpendableListView挺好用,但是就是代码复杂了点,我一时半会理解不了,于是就直接自己写个效果来实现.先来看一下expendableListView中展开的动画效果: 然后我模仿此效果,建立如下的item布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent" andr

巨丑巨简陋的一个Javascript显示隐藏菜单

<!DOCTYPE html> <html> <head> <title></title> <style type="text/css">       #div1{width:100px;             height:500px;             background: aqua;}     li{list-style-type: none;        margin-left: 0px;   

第一个app-进阶:1、让EditText屏蔽软键盘仍能光标闪动:2、EditText 的inputType参数类型(密码方式-隐藏显示、只允许输入数字等等)

EditText屏蔽软键盘后,光标消失问题 开始我有个需求:屏蔽系统软键盘 于是找到并使用这个方法: //edit_text1.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出//edit_text2.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出//edit_text3.setInputType(InputType.TYPE_NULL); //屏蔽软键盘弹出 让三个EditText都成功地没有软键盘弹出. 后来我