如何巧妙恰当地隐藏界面的设计?

 

  一句话总结:你刚好不经意地出现,而这正是隐藏的意义。

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

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

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

  一、不常变的设置:

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

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


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


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


  二、指向外部目标

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

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


  豆瓣电台的分享:


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

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


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


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


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

  一、细微处——优雅恰好的提示

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

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


  二、渐进的提示

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

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


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

  三、扫视/泛读的提示

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

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

时间: 2024-07-30 13:58:54

如何巧妙恰当地隐藏界面的设计?的相关文章

如何巧妙恰当地隐藏界面的设计

  产品经理说:给它加上这个,这个,还有这个.设计师无奈摊手:就巴掌那么大的地方,怎么可能把这么多功能一股脑塞进去?这就考验到设计师的界面隐藏功夫了,特别是信息过载的今天,这个完全是必备技,今天腾讯的 Viconia 同学分享了他的隐藏技能总结,从入门到必杀都有,来学习吧! 一句话总结:你刚好不经意地出现,而这正是隐藏的意义. 在这个信息爆炸的社会里,信息过载已成为常态,为了提升用户使用效率,处理界面的信息层次是每个设计师都要面对的重要一课.这篇短文想聚焦的话题是界面中的"隐藏".在界

网站制作流程及界面交互设计研究探讨

交互|设计 很多朋友希望,我能把我做网站的一些流程及经验跟大家分享一下,最近刚好做一次内部培训,所以稍微整理了一下,这些只是针对网页初学者,具有一定平面设计水平的人,对HTML不是很了解,他们可能只是想做一个个人主页而已,所以整体还是趋向于传统的表格布局,这里有很多都是一些我个人刚开学时自己摸索的经验,所以可能不是很专业,但是绝对是比较容易入门的,我一直有这种思想,你只有塌进来了,你才可能往更高的地方爬,我想当初如果没有这段的学习,现在我也不会明白什么W3C,什么CSS,什么ASP,什么XML,

js实现卡片式项目管理界面UI设计效果_javascript技巧

这是一款非常有创意的卡片式项目管理界面UI设计效果.该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息. 该项目管理界面还提供了一个全屏的导航菜单,用户可以通过右上角的汉堡包图标来触发全屏菜单. 使用方法HTML结构 该卡片式项目管理界面的HTML结构分为3个部分:.cd-nav-trigger是全屏菜单的触发按钮,nav.cd-primary-nav是全屏导航菜单,.cd-projects-contai

一些UI界面与设计使用的元素

文章描述:UI界面设计中的工具,软件,网站等. 都是一些UI界面与设计使用的元素,软件,网站等.内容很丰富,适合网页设计师,用户体验设计师,界面设计师,产品设计师,JS前段开发,手机产品设计,ipad产品设计等使用 Lumzy Lumzy是一个网站应用和原型界面制作工具.使用Lumzy,您可以轻松创建UI模型并即时发送到客户电脑中. Lumzy还具有团队协作编辑工具. Mockingbird 百舌鸟是一个在线工具,它使您轻松地创建UI界面模型,预览UI,并可以共享你的版面编排效果图. The P

界面交互设计文档是什么文档 该怎么编写?

文档是什么文档 该怎么编写?-vc编写人机交互界面"> 离开交互圈已经有段时间了.但由于博客还在,还是能够偶尔收到一些邮件,上周有位同学问我:我在求职,我看到很多招聘说明上需要交互设计师编写界面交互设计文档,请问界面交互设计文档是什么文档?怎么编写呢? 这让我想起来2009年自己在项目里也大力推行过交互说明文档(在下文中,简称为DRD),格式倒没什么限制,交互设计师自己写到界面上也行,单独文档成文也行,总之就是让交互设计师能够将界面承载不了的信息通过文档沉淀下来,降低项目里的沟通成本和风险

Android用户注册界面简单设计_Android

本文实例为大家分享了Android用户注册界面的设计,供大家参考,具体内容如下 I. 实例目标 设计一个用户注册界面,在其中要使用到一些基础控件,如 文本框.编辑框.按钮.复选框等控件 II. 技术分析 首先在布局文件中使用控件的标记来配置所需要的各个控件,然后在 主Activity中获取到该控件,给其添加监听器来监听其操作,最后在控制台输出所操作的内容. III. 实现步骤 在Eclipse中创建 Android项目,名称为 TestUserRegister .设计一个用户注册界面,在其中要使

app界面怎么设计比较好看一些呢,我的这个像电话本

问题描述 app界面怎么设计比较好看一些呢,我的这个像电话本 这个是我做的界面,和电话本一模一样,这个还是主页面,感觉如果用户一进来看到这个 界面可能体验就不怎么好,大家说应该怎么设计一下比较好呢,暂时不加功能了,什么侧滑 扫一扫不加了 解决方案 如何设计android比较好的界面 解决方案二: 可以上面依旧是搜索框,然后下边不放所有联系人,只放置顶联系人,既快捷查找页面也不会显得太乱. 解决方案三: 可以上面依旧是搜索框,然后下边不放所有联系人,只放置顶联系人,既快捷查找页面也不会显得太乱.

用户名 密码-VC++ 6.0 登录界面的设计,求救!!

问题描述 VC++ 6.0 登录界面的设计,求救!! VC++ 6.0 中用对话框来设计用户登录界面,怎么来完成用户名.密码的设计??并且用户名.密码都有默认值??? 解决方案 新建一个对话框,在上面画上两个static两个文本框,两个按钮默认值可以从文件中读取.要完整代码请采纳. 解决方案二: void CMyApp1Dlg::OnOK() { // TODO: Add extra validation here this->UpdateData(); if (m_eu == "&quo

link环境下制作一款《订餐软件》,菜单的追加合并修改界面的设计思路是什么?

问题描述 link环境下制作一款<订餐软件>,菜单的追加合并修改界面的设计思路是什么? link环境下制作一款<订餐软件>,菜单的追加合并修改界面的设计思路是什么? 解决方案 用一个List<T>保存菜单,然后用concat函数合并两个菜单,如果要去掉重复,就用union