信息扁平化

前几天曾将信息扁平化列为五条手机交互">设计原则其中之一,未查找到相关内容,个人尝试从概念、缘由和实现方法等方面分析。

概念

较少的信息层级关系,用户通过操作跳转较少的页面即能找到想要的信息。

缘由

1.信息结构以深度为主。从淘宝UED的文章中看出web注重深广度平衡:

在整个树形结构中,链接的层数被称为网页链接的深度(depth)。而在树形结构里,最底层页面包含的页面总数被称为网页链接的广度(breadth)。

但此条对于淘宝的网页和手机客户端并不适用,这两者实现的功能是:选择商品种类→找到商品→购买→付款,信息框架中最底层的界面大多扭转到付款界面,并不是正常的树型结构。此概念对于豆瓣到挺适用,网页结构是树型,首页是树根,小组中的话题、电影评论和书评是树枝;而淘宝网页是倒树型结构,热门商品、搜索入口和商品目录是树枝,付款是树根。

由于手机屏幕的限制,淘宝随身购的主界面只有选择商品和搜索商品,较弱的广度入口,信息深度更为明显。

2.每跳转一次界面,都会损失用户流量。随身购的目的在于引导用户查找到想要的商品并且支付,如完成操作要跳转5个界面比跳转7个界面的订单量会更多。

3.界面跳转比网页复杂。手机客户端中没有像面包屑那样显示路径的功能,必须一层层返回。

↑如在iPhone中查看照片,从照片返回到照片目录需要点击两次导航栏上的返回。

↑从上图的手机客户端的信息结构示意图中可以看出,从“界面C”跳转到“界面I”的路径为:C→B→A→HOME→H→I。

另外,手机客户端没有像web那样操作方便的导航方式,如目录、树状导航和面包屑等。如iPhone的照片目录与照片显示在两个界面中,在web的照片目录和照片可以显示在同一个界面中。如树状导航显示在手机界面中,会导致页面过长。

↑如在iPhone程序中使用上图的面包屑,会导致如下几个问题:

占据标题的显示空间。无法显示单个内容的状态。面包屑越多,显示区域越少,也就难以点击。难以表示用户所处信息的深度。

以上的问题与web面包屑的作用相违背的,如果担心用户容易在程序中迷失,不用“back”按钮而才采用面包屑路径,这可能就意味着用户进入深层次的信息才能找到他们想要的,这时更应该做的是减少信息的深度。

方法

↑增加tab。将并列的信息显示在同一个界面中,减少页面的跳转。

↑从“界面C”跳转到“界面I”的路径为:C→B→A→H→I。此时A是真正意义上的HOME界面,C的层次由原先的第4级变为第3级。

↑流程的快捷通道。在界面A中增加达到C的快捷方式,虽然在逻辑上C还是第4级,但是对于用户而言,C是第3级。如购买电影票的流程是:选择电影(A)→选择电影院(B)→选择场次(C),如果在A界面中显示,XX电影院正在热映《诸神之战》,点击之后直接跳转到选择场次(C)。

↑区分流程的主次。假设数据显示8成以上的用户都选择使用快捷方式,那么B就不是流程中的必要环节,而是次要的流程,那么原先第4级的C界面变为第3级。

↑提取重要信息。第3级有3个界面BFE,用户要查看这3个界面才能决定哪个界面是需要的,在逻辑上BFE是并列的,如能提取BEF的重要信息,用户在A界面就能决定选择第3级的哪个界面。假设A为选择电影界面,BEF是各个电影的放映场次及电影票价,如在A界面中即能得知BEF电影的最低票价,就能帮助用户省去对比票价的过程。这种做法并不能使得信息扁平化,BEF属于广度的信息,如能从用户的角度区分BEF的重要性,同样能压扁广度,减少点击的次数。如果用户选择了B流程,B流程也是最简单的,跳转2次界面就能完成任务,而E和F跳转4次才能完成同样的任务,那么也能实现信息扁平化的目的。

来源:http://daichuanqing.com/index.php/archives/1344

时间: 2024-09-20 17:32:08

信息扁平化的相关文章

高大上的扁平化交互设计

   确实是这样的,扁平化不仅仅是界面视觉扁平无立体感,更应该是交互体验的扁平化,信息架构的扁平化. 在进入正题之前,我们先来看一个例子,我发现有人用科幻电影中的UI 画面来和扁平化视觉相比较,他们说这是未来界面的一个发展趋势,确实这和现在的UI画面有一定的相似地方,来看一些电影画面截图.投影光感和色块的组合简洁明了,看起来很有未来感和设计感. 但是我更认为这应该是交互扁平化的代表,还记得在<谍中谍4>里面有个场景: 汤姆·克鲁斯的敞篷轿跑车与恐怖分子在迪拜的沙暴中追逐,带来了影片的高潮.我自

移动界面扁平化设计:扁平化的设计理念

文章描述:总而言之,拟物化有拟物化的优点,扁平化有扁平化的长处,只有两者相结合,才能使易用性与简洁性得到更好的体现. 如果UI 界面使用了拟物化的风格,看起来跟生活实物一模一样,你一定会有按下去的欲望;而扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想 当下 UI 设计的扁平化浪潮可谓如日中天,从微软的 Windows 8 开始,还有后来 Google 的 Android,到现在的苹果 iPhone 的 iOS,都采用了扁平化的设计理念.可是,你真的理解什么是扁平化吗?这不禁要画上一个

聊聊扁平化风潮的起与思

  编者按:火了一年的扁平化,同学们都了解清楚了吗?今天@网秦UEC 的同学从国外译过来一篇好文,从扁平化的流行缘由聊到对界面设计的影响,附有一些设计技巧和注意事项,值得一读哟. 在过去几年中,我们见证了软件和应用界面设计从3D及拟物化向扁平化和极简化的快速转变.尽管这一趋势现在已经无所不在,但我们不妨拿出一点时间来思考今天的结果是如何形成的,以及其对界面设计整体有着何种影响.另外,我还会和大家分享一些有关设计扁平化界面的小技巧和注意事项. Windows Phone 8 及 Apple iOS

2013网页设计新趋势:扁平化网页设计

文章描述:这里简单介绍下关于扁平化的概念,所谓"扁平化设计"一词所指的是抛弃那些已经流行多年的渐变.阴影.高光等拟真视觉效果,从而打造出一种看上去更"平"的界面.善于用颜色去鼓励用户探索. 随着互联网的高速发展,我们可以看到质感厚重,图层样式繁多的网站越来越少,反之各种轻质感,布局大胆.创意新颖.的网站慢慢进入了大家的视野,人类发展至今,人们的审美.时尚标准总是无时无刻不在改变,互联网也是这样,下面这篇文章将要给大家谈谈2013网页设计新风向 "扁平化设计

什么是扁平化设计?扁平化设计方案突出简洁

文章描述:扁平化设计:你在这趋势中收获了什么? 扁平化设计-这个早在多年前非常流行的设计领域-又再一次卷土重来了.许多新网站以及需要重新设计的网站都纷纷采用了扁平化设计的方案,这种趋势无论是在网页设计或者移动端的设计方面都已经蔓延开了. 随着融汇了扁平化设计美学的windows8以及新版谷歌的推出,以及其他人气网站纷纷采用这种扁平化的主题设计,这种扁平化的趋势将很有可能受到更加多的亲睐. 你是否考虑过?你能够把它运用到你的项目当中吗?这种设计方案是否能够给你带来更加轻松的工作体验? 扁平化设计具

增加网站收录之做好网站扁平化结构建设

大家好,我是沙漠.大家都知道,网站建设结构的扁平化是SEO建站技巧中要特别注意的一点,一般说网站目录层次越浅,越容易被搜索引擎抓取,也就是越容易收录.对于一般权重的中小企业型网站,按我的经验,一般超过3层百度不会抓取,如果要说高权重的网站,就算有十个层次百度一样会抓取,比如新浪搜狐,我们一般站长的网站跟搜狐新浪这样的网站没有可比性. 对于企业型网站,要做到扁平化结构一般做到以下几个方面: 第一,控制首页链接数量.一般来说网站首页是权重最高的地方,我们要好好利用.经常看到有很多企业网站的首页就是一

PPT怎么打造完美扁平化风格

  一.扁平化PPT设计之四大原则 1.亲密:相互关联的内容最好放在一起 如果叫你从左图中找到可口可乐,你能一眼看出来在哪里吗?很难.但是按照亲密性原则调整后,右图是不是更容易找到一些? 2.对齐:保证页面上的某两个元素之间对齐.(对处女座来说是小case) 对齐,这确实是一个很简单的问题,但不知道应该感到幸运还是不幸,这个世界上并不是每一个人都是处女座,能把PPT收拾干净.在做扁平化PPT时,一定要记住对齐,不然就会画虎不成反类犬. 在上面的示例中,左图的信息显得非常乱,如果信息在多一点,页面

如何打造优秀的扁平化PPT

  如何打造优秀的扁平化PPT         PPT的设计没有唯一和统一的答案,扁平化PPT也只不过是万千设计形式中的一种.用的人多了,好像就变成了趋势,本文就从零开始教你打造优秀的扁平化PPT. 现在,请点击Powerpoint,几秒的静默之后,一个空白的世界即将展开. 在动工之前我们得思考几个问题: 我要做啥?--也就是确定主题--一个扁平化的中文PPT; 内容呢?-- 跟制作扁平化的中文PPT相关的一切; 思路呢?-- 一条线顺下来,是否能够做到清晰明了? 色调呢?--暖?冷?黑白灰?五

PPT扁平化设计的8个实用小技巧

PPT扁平化设计的8个实用小技巧   扁平化是目前的主流设计风格,本文总结了扁平化设计的8个小技巧,字体.图标.排版.配色等都有提及,教程深入浅出,非常适合新手,学会可以直接拿来作海报和PPT设计. 最近帮一个师兄做一个PPT,用了几乎每个人都听说过的扁平化风格.于是趁热打铁,找了一些扁平化的作品和文章看了,自己对扁平化做一个总结,希望对你ppt抑或海报设计有所帮助. 注:此处所谈的扁平化指的是一个大的概念,将后面衍生出来所谓的"似扁平化"也包含进来. Tip 1:关于高光.渐变和投影