需要时显示 设计不是简单就行而是不能复杂

  近几年移动平台风生水起,APP多得数不胜数,交互方式也是遍地开花,相信大家都玩过那么几个让人惊艳的APP。大家看到的亮点或是转场够炫、或是拟物得恰到好处、又或是突破性的操作方式,但我认为“需要时显示”也是许多设计中的精妙之笔,是设计师应遵循的原则之一。

  需要时显示

  首先谈谈“需要时显示”这个概念,记忆中这句话有2个出处:

  Extras on Demand. -《Designing Interfaces》

  摘抄:让80%的使用情形更容易,而剩下的20%至少是可能达到的(需要用户稍做努力)。


  Only Show What I Need When I Need It. -《Android Design-Design Principle》

  摘抄:当一下子看到太多东西时,人们容易受打击。将任务和信息分解成小的、可消化的片段。隐藏当前非必须的选项,并指导人们如何走下去。


  两个出处,一个贯穿全书,一个作为操作系统的规范,可见这句话的分量。

  举个例子

  说到这里,我忍不住要举个非常喜欢的案例-ALKAQUA矿泉水。不知道有多少同学在超市看到过这瓶水,反正它惊艳了我的时光…


  整个瓶身只有LOGO,净含量等信息,配上胶囊状的形态,看上去非常简洁,气质优雅。

  但这还不是高潮,真正的高潮是在转动瓶身时的那一刹那,我被折服了。


  关于此水的详细介绍用极小的字体印在了背面,而又恰好地利用水的折射放大了文字。

  画外音:我们为什么要转动瓶身了?一定是在寻找!那么当你要找它时,它就恰到好处地出现在你眼前,没有早一步,也没有晚一步,刚巧赶上了。

  为什么“需要时显示”

  在我看来,“需要时显示”能成为设计原则并不是不无道理:

  1.页面承载更多信息

  自从人类记录事物的方式从壁画到罗马人的“codex”页后,内容就变得有了边界。移动设备的兴起,使我们传统意义上的“页”变得越来越小,更加地需要隐藏使界面承载更多的信息!

  2.使界面变得优雅

  排版上认为,界面的优雅在于合适的留白,让人的视线可以得到喘息。就像批发市场对比奢侈品店的陈列,拥堵、嘈杂总给人一种低档、庸俗的感觉,而宽敞的空间总让人觉得从容、闲适。功能的隐藏释放了空间,使我们的界面变得优雅。

  3.核心任务/信息更清晰

  页面所有的设计应该为其核心任务服务,隐藏不必要的信息,核心信息才会相对清晰和凸显,这是对用户最好的指引。

  4.打动用户

  精妙的“功能出场”如同ALKAQUA的说明那样,在我们真正需要时给予我们,这样的设计能与用户产生思维上的互动,让人瞬间感动。

  正题:如何“需要时显示”

  “需要时显示”其实讲的是2点:

  1.暂时不需要的功能要隐藏起来。

  2.被隐藏的功能要能被发现。

  第1点许多人已经探讨过了,我们可以通过聚拢、压缩等方式来进行。这里需要探讨的是第2点——如何让用户发现功能,或者说是“功能可见性”的问题。

  换句话说,设计师定义了页面中隐藏了某些功能,但用户需要通过非常规手段才能发现,这个实在不是好的设计。(ps:这里需要考虑功能到底有多生僻,本篇暂不做讨论)


  功能可见性

  功能可见性,其实说得是“如何让用户发现功能”的问题。

  最直接的形式是给用户一个可视信号:这里有东西。当然形式可以是直白的也可以是暗示性的、甚至可以通过社会性的影响。

  但如果不给出信号的话,用户也可以:

  1.通过学习发现。

  2.被动地发现。

  3.不用发现,它已经出现了。

  于是我们就有了这样一个框架:


  语义符号

  1.蓄意性语义符号

  蓄意性语义符号指的是有意识地创建和布置好的语义符号,简单点说就是有明确意义的实体信息,比如路口的指示牌等。

  蓄意性语义符号是界面语言中最常见、最易被感知的信号,比如各种箭头、按钮、icon等。我们常用下箭头表示有浮层或可伸展,i按钮查看imformation信息,用“+”表示可展开等。

  Path中的“+”则代表了一类“添加”操作的集合,google play中应用的介绍用“v”表示了下方有更多信息。


  2.附带性语义符号

  附带性语义符号指的是生活中行为和事件意料之外的副产品,简单点说就是暗示性的实体信息,比如人的影子,这是一个人存在于一个光源前面的附加效果,也暗示着人的存在。与蓄意性符号不同的是,它们表面上都不带任何意义。

  早些年使用乐phone时的一个交互,让我记忆深刻。这里的光作为某个未知物的附带性产物(想想街头转角处的人影),被用户所察觉,它暗示着这里有东西。


  QQ提醒的交互也非常有意思,点击底部的冠形部分,会弹出一个圆形菜单,冠形本身并没有什么明确意义,它仅仅暗示它是不完整的形态。


  3.界面隐喻

  附带性语义符号中有个特殊的类型是必须提及的,也是设计师最乐于关注的,那就是隐喻。

  修辞上认为隐喻是通过比较两个好像无关的事物,制造的一种修辞的转义。而设计中的隐喻往往借助拟物化来产生附带性的信息,但并不是单纯地拟物,而是通过与现实物的类比,对界面语言进行转义,让材质、阴影、形状等形成新的意义。就像众所周知的:触屏界面的基础就是卡片式的隐喻,iOS的解锁就是插锁的隐喻等。

  Flava中的一个操作相信用过的人都会有印象。撕边纸的操作让人联想到了卷纸,而卷纸则隐喻着该界面可以滚动,操作后果不其然。


  另一个较经典的案例是ios6中地图的折角,按照现实的隐喻,这里是可以翻起的。


  4.社会性语义符号

  如何吃不熟悉的食物或使用不熟悉的餐具?看看别人怎么做。

  穿越雪地该走哪条路?跟着脚印走。

  人群、社会、其他人都有许多共享的信息,当这些可以被我们解读时,它就是社会性的语义符号。

  在path如何评论一张图?当然你可以点击右上角的笑脸符号,但其实也可以点击下排的笑脸后侧的空白处。从社会语义的角度来说,大家在这里评论过,那我也应该也可以由此参与评论,就像在雪地里沿着脚印就能找到出路一样。


  当有评论时你也许会发现更多:点击下排笑脸后侧和点击下排评论出现的页面是不一样的。

  我是这样理解的:点击空白区就像是要加入其中,而点击评论则是查看详情。

  其实以上分析基于我的猜测,但如果真是这样,path这里就会有点儿瑕疵,点击空白区应该出现的是“选择表情”,而不是“添加评论”。

  不可感知的可见性

  当然我们也碰到过许多没有符号线索的情况,即是在界面上找不到任何相关元素。对于这样的交互,要么用户可以学习到,要么我们就让功能像彩蛋一样被发现,又或者用户需要时它已经在场了。

  1.引导式可见

  要让用户发现功能,最简单的方式就是教育。我们可以对新用户进行引导,那用户使用前就能知道功能的存在了,尽管这样很暴力。


  谁知道点“友加”的标题可以查看更多功能?但有了引导,用户表示“真心懂了”…


  另一种颇为推崇的引导是利用转场,它基于一个认知前提“从哪里进入,即可从哪里退出”的反推。即是一个物体怎么离开界面,它也可以通过相同的方式进入到界面。

  Paper选择画笔后工具栏会从边界滑出,然后我们得从边界手势滑入才能再次打开工具栏。没看到它缩下去的转场,还真不知道怎么弄出来。


  2.彩蛋式可见

  彩蛋式可见其实也是用户的一种学习,但这种学习是被动的,用户通过有目的或无目的的尝试发现功能。无可否认ios的撤销输入就是系统里最大的彩蛋,但它要通过很艰难的认知才能发现,当我第一次从裤袋摸出手机发现撤销确认时,琢磨了很久这玩意哪儿来的。


  Naver首页顶部继续下滑时会出现几个功能,但不同于微博的是,这里的阻尼很大!


  当用户找不着功能或进行游荡时,通过一些简单的操作如点、双击、滑动等就能发现功能,岂不是令人大喜过望。

  QQ music 3.0中点击封面就会出现更多功能,这里的学习成本就非常小(面积够大)。


  3.任务时可见

  这里要说的是我认为的最精彩的一种设计,它需要理解功能特性及用户的行为,然后像ALKAQUA的说明一样,自然地出现。

  iOS的搜索栏就是这样,在用户搜索之前并不需要知道确认、清除这些操作在哪里,甚至都不需要知道有没有。但当点击输入框后,它就很可能会被用到了,于是它刚好出现了。


  twitter的刷新是其影响力最大的操作之一,其实用户的心理模型上本没有“刷新”这个概念,而是由于种种原因不能做到即时刷新,那么刷新操作应该出现在哪里?本质上刷新的诉求并不是reload,而是update,对于用户来说这意味着向页面上方索取,索取到当前信息的边界后再要索取的话自然就得刷新。


  Path时间戳的设计也类似,大部分时候时间戳是帮助事件在时间轴上定位,当我们想看清图片时它又隐藏了。如果真的对事件的时间感兴趣时,你知道它就在那里。


  打完收工

  对于移动app设计中的空间讨论其实有不少先行者,我的同事listy在《移动设计空间节省之道》中也做了深入的探讨,我表示受益良多。

  对于复杂的界面,我们不是要让它变得空白才好,而是需要有效地管理它,本文所讨论的“需要时显示”即是有效管理的途径之一。

  跳开less is more,我更喜欢一句话:设计不是简单就行,而是不能复杂。

  参考文献

  1.《Designing interfaces》

  2.《The Elements of Graphic Design》

  3.《设计心理学2:如何管理复杂》

  4.《Android Design-Design Principle》

  http://developer.android.com/design/get-started/principles.html

  5.《卡片、页与卷轴》

  http://apple4.us/2012/02/card-pagination-scroll-lawrence-column-for-blogweekly.html

  6.《移动设计空间节省之道》

  http://cdc.tencent.com/?p=5339

  本文出自Tencent CDC Blog,转载时请注明出处。

时间: 2024-11-01 17:19:30

需要时显示 设计不是简单就行而是不能复杂的相关文章

需要时显示——论App中的功能可见性

近几年移动平台风生水起,APP多得数不胜数,交互方式也是遍地开花,相信大家都玩过那么几个让人惊艳的APP.大家看到的亮点或是转场够炫.或是拟物得恰到好处.又或是突破性的操作方式,但我认为"需要时显示"也是许多设计中的精妙之笔,是设计师应遵循的原则之一. 需要时显示 首先谈谈"需要时显示"这个概念,记忆中这句话有2个出处: Extras on Demand. -<Designing Interfaces> 摘抄:让80%的使用情形更容易,而剩下的20%至少

c++-一个简单的C++练习,运行时显示“vector iteration incompatible&amp;amp;quot;。

问题描述 一个简单的C++练习,运行时显示"vector iteration incompatible". array ar = { 0 1 1 2 3 5 8 13 21 55 89 }; vector vec(ar.begin() ar.end()); auto it = vec.begin(); while (it != vec.end()) { if (*it % 2) vec.erase(it); else it++; } for (auto i : vec) cout &l

7种方式玩转信息可视化中的时间线设计

导读:时间常常被认为是一种主观的体验,然而在可视化的表达中,时间却成为了结构化维度.时间帮助我们构建稳健而直观的框架,使我们更好地建立事件间的联系. 按照时间线的方式阐述信息已经广泛应用于企业传播.营销的各个领域.从小扎.雷总介绍新产品,到日常做年报.里程碑事件的PPT,我们都能发现时间线的身影.或许你和我一样抱有疑惑:怎样才能将时间线用得出彩?那么今天我们不妨看看以下七种有意思的时间线设计. 时间线的构成 要玩转时间线,首先我们需要了解其四方面的构成元素: 1.描述时间的轨迹或路径:我们以何种

JS实现类似QQ好友头像hover时显示资料卡的效果

一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果 hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE html>

设计-简约而不简单

本文来自hxfirefox,他是笔者在某国内大型企业提供敏捷XP咨询项目的内部教练.本文也是由他交给笔者帮助review,同时也授权发布在笔者的博客中. 原文地址为:直接不等于简单. 码农的博弈 了解XP(极限编程)的人都知道,XP有一项实践叫做简单设计(simple design),站在这项实践对立面的是过度设计.当我们从客户价值的中心视角去审视那些我们遇到过的过度设计,自然而然就会得出一个结论: "又TM被那些美其名曰项目经理和程序员的孙子们给忽悠了,这些功能我其实都用不到,但我还花了这么多

c++-CString类型(汉字)转换为wchar_t类型时显示的为乱码

问题描述 CString类型(汉字)转换为wchar_t类型时显示的为乱码 如题,从编辑框中提取汉字,取出为CString类型的,将此变量转换为wchar____t类型的变量,显示出来为乱码,但是当输入的为英文字母时,显示的就是正确的,不知道问题出现在哪里,求大神指点 ! 部分程序: 解决方案 最简单的将你的工程设置为Unicode编码的. 解决方案二: 如何从 wchar_t * 转换为其他字符串类型 解决方案三: _tsetlocale(LC_ALL, _T("chs")); //

VC/MFC 当鼠标移到控件上时显示提示信息

VC/MFC 当鼠标移到控件上时显示提示信息 ToolTip是Win32中一个通用控件,MFC中为其生成了一个类CToolTipCtrl,总的说来其使用方法是较简单的,下面讲一下它的一般用法和高级用法.  一般用法步骤:   添加CToolTipCtrl成员变量 m_tt.   在父窗口中调用EnableToolTips(TRUE);   在窗口的OnCreate(或者其他适当的位置)中向ToolTip中添加需要显示Tip的子窗口,并同时指定相应的显示字串CToolTipCtrl::AddToo

基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)_javascript技巧

一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE ht

解决Visual Studio 2005 无法显示设计视图的方法_实用技巧

Visual Studio 2005 无法显示设计视图的解决方法 你们有没有碰到过这样的情况,在用VS2005开发的时候,点击设计视图没有用,怎么点击都看不到设计页面,前段时间为这个被这个问题郁闷了好久,一直的解决方法都只是重新安装,VS2005那么庞大,每次重新安装都要花费我很长的时间,后来在在网上找解决的办法,功夫不负有心人总让让我找到了,现在我把解决办法写下来,大家碰到这样的问题就不用再这么辛苦了. 首先你要确定你的HTML代码没有问题,因为在Visual Studio 2005 中内置的