与其让界面扁平不如让信息层级扁平

摘要: 如果UI 界面使用了拟物化的风格,看起来跟生活实物一模一样,你一定会有按下去的欲望;而扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想

当下 UI 设计的扁平化浪潮可谓如日中天,从微软的 Windows 8 开始,还有后来 Google 的 Android,到现在的苹果 iPhone 的  iOS,都采用了扁平化的设计理念。可是,你真的理解什么是扁平化吗?这不禁要画上一个大大的问号。

bianpinghua01

在开篇之前,我先来卖个关子:我更喜欢拟物化的界面风格,和扁平化的设计思想。(请揣摩这句话)

很多人眼中的扁平化 UI 设计就是:界面被设计成扁的平的,并且无立体感的。仅仅是这些吗?有这些就够了吗?

bianpinghua02

如果 UI 界面使用了拟物化的风格,那么意味着人们对产品使用的学习成本大大降低,老少皆会用,因为界面看起来跟生活实物一模一样,看到界面中拟物风格的按钮,你一定会有按下去的欲望。如果是“扁平”的按钮呢?抱歉,你一定会听到很多抱怨:啊,原来这个还能点???

在继续阅读本文之前,请先欣赏一张拟物风格的 UI 设计图:

拟物化的 UI 设计

这个界面很明显是用户在注册时会见到的,左侧有一个信封样子的输入框,并且右侧有一个“注册”的按钮,当你输完邮箱账号并点击注册以后,你会发现,这信封被塞了进去,塞到哪里去呢?一定是网站当中了,而且注册完又马上显示 Hello, Alex )) 以表示对用户的欢迎。

不得不对这种设计感到赞叹,实在太精妙了,看到这个信封被投了进去,让人有一种被接受了的愉悦感,让人感觉到非常的自然,非常的舒适,马上就对这个网站产生好感。

不是每个人都有丰富的电子产品的使用经历,所以,缺乏这些经历的人初次使用该产品的时候,就会更倾向于点击那些拟物化的按钮,因为,人生来如此,用手“按”得如此自然,如此舒心;而“扁平”的按钮则会让那些没有电子产品使用经历的老人或者儿童感到迷惑,这个能按吗?啊!原来这个还真能按!或许对于我们这些电子产品熟客来说,这个按钮可以点已经是常识之中的事了,但是过度扁平的界面会让人感到疑惑,增加人的反应时间。因此,拟物化图标设计势在必行。

ios6a

那么扁平化呢?我们应该抛弃吗?请注意,在之前一段当中,我没有用到“扁平化”这三个字,而是用“扁平”二字代替。这有什么区别吗?…… 有的!“扁平”二字特指的是视觉上图标或者界面的扁平,像在张白纸上做设计一样,没有任何的立体感;而“扁平化”这三个字呢?这正是今天要讲的主题:扁平化是一种内在的设计思想

扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。

NLAC64

什么是减少信息层级?

相信有用过智能手机的用户都知道,手机中每天都要用到的应用有:天气、时钟、日期信息、电池电量等。在不考虑桌面小部件的前提下,你是否有想过,为什么我想看个天气必须点开这个图标以后才能看得到;为什么我想看下今天是几号星期几还必须点开那个应用才行?像这样的抱怨不在少数,看个电池电量的具体数值(百分比)为什么还要进入应用以后才能看到,为什么不能直接显示在图标上?我认为,图标不仅仅是应用程序本身的入口,更是一个信息的载体,这点 Windows 8 的磁贴做得很好。

win8.1_start

怎么减少信息层级?

直接把天气、时间、日期、电量等信息直接显示在图标上就是一种减少信息层级的方式,表面上这种做法是减轻用户的工作量,实质上这是对用户的一种关怀,而用户是能够感受到这种关怀的。进而用户给设计者带来的回报是:用户把这款产品推荐给更多的人,好的用户体验口口相传,最终你的用户会越来越多,从而你的收入也会越来越多。

以上这个例子仅仅是减少信息层级的一种体现而已,其实还有更多。

如 Windows 8 中的磁贴,它直接将所需展示的信息直接显示在磁贴上,这样我们可以不用点进去就可以看到一些重要的信息。

bianpinghua_win8

今后的 UI 设计方向将会更倾向于一种拟物化与扁平化相结合的设计风格。从外观上看,界面是拟物的,但是实际使用中可以感受到信息层级的减少,以及化繁为简带来的愉悦感。

前几年苹果  iOS 的拟物设计风格,在业界引起轩然大波,各家纷纷效仿,于是有了当时拟物化的电子世界;而最近几年,微软 Windows 8 扁平化的设计风格,亦在业界引起不小的波动,Android 甚至 iOS 都开始效仿,于是有了现在扁平的界面风格;而在将来,亦不是拟物化的 UI 独霸天下,也不是扁平化的界面称霸武林,而是一种拟物化风格与扁平化思想相结合的 UI 设计笑傲江湖。

Geo_Tagging_Bigger

总而言之,拟物化有拟物化的优点,扁平化有扁平化的长处,只有两者相结合,才能使易用性与简洁性得到更好的体现。

本文系作者 BEE_翼帆远航 授权钛媒体发表,并经钛媒体编辑,转载请注明出处、作者和本文链接
分享到:

第一时间获取TMT行业新鲜资讯和深度商业分析,请在微信公众账号中搜索「钛媒体」或者「taimeiti」,或用手机扫描左方二维码,即可获得钛媒体每日精华内容推送和最优搜索体验,并参与编辑活动。

评论(16

  • 陈小葱Shona 陈小葱Shona 2013-07-15 14:39 via weibo

    外行表示真心不懂[晕]

    0
    0
    回复
  • 苏醒沫 苏醒沫 2013-07-15 13:16 via weibo

    转发微博

    0
    0
    回复
  • 好的镜哥哥 好的镜哥哥 2013-07-15 13:11 via weibo

    “我更喜欢拟物化的界面风格,和扁平化的设计思想。”揣摩揣摩~

    0
    0
    回复
  • 给力帮出国认真的姚老师 给力帮出国认真的姚老师 2013-07-09 18:31 via weibo

    亲,无意中看到了亲的微博,亲的打算出国留学吧.首先祝亲能够顺利去自己的Dream School.亲,如果有任何留学问题,可以随时问我的.我们是很有特色的给力帮,3年前首个在淘宝上做留学中介.和淘宝购物一样,亲的offer到了签证下了,再发货再付款,亲再好评.而且最低600元全套申请一所.爱你

    0
    0
    回复
  • dodobird dodobird 2013-07-08 07:39 via pc

    若非是Mac OS X下的封闭字体,Hiragino Sans GB完全有可能成为中文界的Helvetica,结果又被微软雅黑这个中文界的Arial抢了市场。:]

    0
    0
    回复
  • dodobird dodobird 2013-07-08 07:38 via pc

    其实虽然中国大陆的工设理念相对来说稍微落后那么一点点,可是我们对于潮流的追赶是很迅速的。我不得不说微软雅黑的强制使用,让许多人发现除却宋体之外,中文字体还有另外一种可能,还是很让我欣慰的。不过迄今为止我见过的最优秀的中文字体依然是一款APPL的字体,Mac OS X下面由字游工房设计,与北京汉仪一同开发的Hiragino Sans GB。

    0
    0
    回复
  • dodobird dodobird 2013-07-08 07:32 via pc

    所以APPL摒弃Skeuomorphism不是没有道理的,毕竟伊一向以工设界领头羊所著称于世。Jobs死后,Forstall也因为iOS Maps的丑闻而退职,因此应该说APPL内部flatties们终于赢了,在Jon Ive的带领下用色彩渐变,基础形状,以及极端抽象来把苹果带入Post-skeuomorphic时代。自从Sam Moreau用极简的Piet Mondrian一样的色块在Windows 8里实现了自己Swedish design的梦想和“纯粹像素”的野心,Jon Ive推出了自己对于同样设计思想的诠释,实在不能理解为什么还有人会在为Skeuomorphism伤心,回到21世纪来吧。:]

    0
    0
    回复
  • dodobird dodobird 2013-07-08 07:24 via pc

    Skeuomorphism是Jobs在世的时候和Forstall共同确定的iOS界面风格。采用Skeuomorphic UI是在苹果内部也有争议的(比如硬件的工设灵魂Jon Ive就极其厌恶这种风格的设计,而苹果的UI顶级设计师当中也有两个派系,你甚至都可以从iOS内建的APP界面风格中看出是谁设计的)采用Skeuomorphic UI在现在的问题是许多年轻用户从来没有见过他们试图模拟的物体,比如reel-to-reel tape recorder,在年轻人(00后)当中是没有太多人接触过的(他们都用CD了)。

    0
    0
    回复
  • Jazzcat-ss Jazzcat-ss 2013-07-07 14:46 via weibo

    [鼓掌]真棒!

    0
    0
    回复
  • 华大11软三 华大11软三 2013-07-07 14:13 via weibo

    回复@BEE_翼帆远航:膜拜大神。。。大家交流交流IT这方面感觉挺好的。

    0
    0
    回复

Oh! no

您是否确认要删除该条评论吗?

分享到微信朋友圈