IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

无框界面的四大优势,为你演绎一种新的设计风格

Catherine • 2017-05-10 20:03 • 交互设计

无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

文章目录[隐藏]

  • 什么是无框界面?
  • 那么卡片化呢?
  • 无框的优势?
    • 1. 掌控注意力
    • 2. 减少设计束缚
    • 3. 增加界面利用率
    • 4. 提升设计效率
  • 有何争议
    • 视觉手段减少
    • 视觉与交互的分歧
    • 同质化
  • 一个轮回
  • 总结

无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

无框界面的四大优势,为你演绎一种新的设计风格

什么是无框界面?

纵使几大设计风格已形成寡头垄断(如苹果的圆角玻璃、谷歌的层级、微软的方块……),但界面设计的进化历程才刚刚开始。

我曾在之前的《 去形式化——移动设计新趋势化》写过关于去形式化的话题。在这个新趋势中,界面上的内容越来越重要,相对的,一切与内容无关的都被大大削减。

去形式化是一张非常模糊的全景图,在演化中一些新的设计风格逐渐清晰起来,例如——无框界面。

也许你已经发现了,今年来越来越多的网站和应用,尤其是那些注重设计的,都有这样的趋势。曾经用来划分区域的边框和边线逐渐消失,然而在干净的界面上,通过距离分割,各区域的差别依旧清晰可辨。

无框界面的四大优势,为你演绎一种新的设计风格

去形式样例

那么卡片化呢?

如果你的设计思维还停留在卡片话,那就落伍了,因为无框界面的趋势下,卡片的概念被淡化。卡片与否有何重要?反正用户甚至不会察觉,他们只关心自己来这里的最终目的,界面对他们来说只是搜寻信息的手段之一罢了(如果有很好的搜索功能可用的话,说不定根本不用扫一眼界面)。

没错,卡片化的由来有它的合理性。几年前大家注意到显示屏的尺寸越来越不可预期,设计师急需一种设计手段,来让设计出的界面能够适应不同尺寸的屏幕。卡片刚好能够解决这一点,因为它将内容封装成固定的小区块,像水一样,可以放在任何比自己大的容器中。不但如此,卡片式界面还可以根据需要岁时删减卡片,以此灵活控制界面上的内容种类和数量。由此响应式界面的大环境下,卡片化这个词被越来越多地注意到。

其实无框界面与卡片化并不真正相冲,将内容分装成小区块的概念依旧还在,只是此时卡片已经完全透明,不需要看到卡片的样子了。

无框的优势?

用文字来讨论太过抽象,所以我用无框的概念优化了一个大家熟悉的有框界面。不要问我是哪个网站,哈哈~

无框界面的四大优势,为你演绎一种新的设计风格

上面的是原版界面,下面的是我修改的无框版

1. 掌控注意力

看上图的原版界面时,第一眼很有可能看到的是卡片中的边线,而不是内容。这是因为白色卡片和灰色背景的对比非常明显,而尺寸又很大,所以非常吸引注意力。而卡片中的内容,因为在卡片中挤作一团,所以很容易被忽视。

看上图中的无框版界面时,因为没有边线,只有内容,所以用户第一眼的注意力肯定是在内容上。

用户之于界面,最宝贵的莫过于注意力。因为一个产品想要提供给用户的功能是越多越好,但是用户的注意力始终只有那么一丁点。所以,掌控用户的注意力是设计师的关键使命。如果界面上摆放了过多色彩显明、吸引注意力的“装饰”,用户看到内容的几率变下降了。当然,即便有边框,还是能够通过对边框的特殊设计来控制用户的注意力不分散,但是边框越多,难度就越大。

2. 减少设计束缚

设计是连贯、统一的。一旦一个区域有了边框,其它很多地方都要加上边框与之呼应。边框一多,束缚也多。因为这意味着从此以后,不论一项要在界面上加一点什么别的东西,都要思考一下,是否需要加上边框,如果边框还分好几类,那么这时还要判断一下此处的内容适合使用哪类边框。这样设计师不自觉地给自己加了越来越多的束缚,而这些束缚,用户其实根本不care。

3. 增加界面利用率

所有的边框,可以不要边线,但是至少得要有两个边距,即内边距和外边距,这样才能保证视觉效果的舒适性。然而如果去掉边框,用距离分割内容区块,那么两个内容区块之间就只需要一个间距就好了。就算为了区分要拉大这个间距,也通常不会超过有边框情况下内外边距之和。

这样算来,无框界面的界面利用率会更高,能够在有限的空间里,摆放更多的内容。

4. 提升设计效率

前面提过的减少设计束缚,可看作是一种对设计思考效率的提升。除了思考之外,无框界面对画图效率的提升更加明显。

在画图过程中,给内容加上边框意味着每增加一块内容都要先画出边框;每修改以此内容,边框都要一并修改一次。尤其是在很多工具中,圆角、双线等特殊边框画起来相当繁琐。

有何争议

视觉手段减少

为了区分、突出、弱化某些东西,视觉上可以用N中方法解决。但是如果死守无框,这些可用的手段就减少了。但本人认为,少点套路多些真诚是这个时代的精神追求,所以大部分情况下,视觉上朴素些也挺好。但是在特殊情况下,完全不需要死守任何教条,毕竟规矩就是为了在少数情况被打破而存在的。

视觉与交互的分歧

纵使无框界面有再多易用性的有点,视觉设计师依旧可能对此无感。因为凡是强调某种风格,对视觉来说都是一种限制。而如果将无框看作对视觉设计的限制,其结果受益于易用性,视觉设计可能难以接受。很多事情难的不是增加而是减少,这种转变需要像当前乔布斯去除手机键盘一样,有一个具有全局观的决策者。

同质化

这是个严肃的课题,可以上升至哲学境界,这里只能顶多只能抛些砖角。在去除多余“装饰”之后,界面只剩下内容,这会让不同产品之间越来越相似,走到极致,甚至可能大家看起来完全一模一样都有可能。

一方面对于用户来说,这根本不是个问题。虽然用户也很享受产品提供的附加价值,但是他们并不指望产品提供观赏性和趣味性。毕竟大家平时有的是娱乐手段,使用非娱乐性产品时除了快速达到自己的目的之外别无他求。

另一方面对于产品本身来说,都想要树立自己的风格,体现自己的品牌识别性,使出浑身解数想要获得用户的额外喜爱。

在这两个方面要如何取舍?未来肯定是用户的。但界面的直接粗暴并不一定与识别性完全冲突,即便操作界面的识别性为零,也可以通过Logo、文字等手段来树立品牌形象。

从另一个角度来思考,我曾在《图形界面的末路?聊聊未来可能会流行的「对话式交互」》论证过,在不知多远的未来,人类和机器之间,很有可能已经不再需要界面来交流了。举个最接地气的例子,如果Siri可以取代iOS的一切界面,那么不要说无框界面,所有界面都没了,这是不是代表iOS这整个产品的品牌形象就丧失了?当然不是,语音的音色、语气、回答方式……有太多的东西都能让用户产生印象了。

说到这里,如果你还在担忧同质化的问题,那么另一篇文章见吧。

一个轮回

作为一个有全局观的人,我又要提一下历史了。

其实最早的人机界面是无框的——命令行,还记得吗?

无框界面的四大优势,为你演绎一种新的设计风格

命令行界面

但是,图像界面几乎一诞生就是有框的,而且早期的图形界面几乎满屏都是框。因为那时大家还只会用线来划分区块。

无框界面的四大优势,为你演绎一种新的设计风格

早期的图形界面

发展了好久,终于在一两年前,咱们学会了用色块取代边线。

无框界面的四大优势,为你演绎一种新的设计风格

 Instagram 2015

不要多久,更多的人会发现连色块都不需要就可以将内容区分开,那就真正是无框界面的时代了。

无框界面的四大优势,为你演绎一种新的设计风格

无框界面先驱们

总结

无框界面其实不过是界面风格的一种罢了,并不是包治百病的神药。糟糕的设计师,什么风格都拯救布料;而能自成一派的优秀设计师并不需要收到任何风格的局限。

即便在今天,全键盘的黑莓手机依旧在欧洲市场占据重要位置。我从不认为有框与无框之间又对错之分,只是此处做个预言,未来的世界会朝无框迈进。

 

作者:雨涵_Zoe

来源:http://www.jianshu.com/u/1008c52b0b93

本文由 @雨涵_Zoe 授权发布于人人都是产品经理,未经作者许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25165/

ioslogo交互产品产品经理无框界面用户界面设计视觉视觉设计设计设计师设计风格话题谷歌转载
赞 (0)
CatherineCatherine
0
生成海报
微信10个交互细节问题的探讨与重设计
上一篇 2017-05-10 19:01
新人入门|7个移动 UX 设计要点,提高易用性
下一篇 2017-05-10 20:55

相关推荐

  • 微信热点

    唯品会实习|面向19/18届,地点广州

    公司介绍唯品会(NYSE:VIPS)VIP.com成立于2008年,以“全球精选 正品特卖”为品牌宗旨,在中国开创了“精选品牌、深度折扣、限时抢购”的时尚特卖模式,在线销售服饰鞋包、美妆、母婴、居家、生活等全品类名品。招聘岗位商务助理(18/19届)■岗位职责:1. 负责跟进预上线商品的所有商品资料;2. 负责检查货品清单正确性、完整性、准确性、规范性,交接正确的资料给相关部门;3. 负责申请标准的档期,走档期流程并落实档期日期;4. ...

    2018-03-06
  • 打造一个平台的用户体验,从需求方和供给方入手 交互设计

    打造一个平台的用户体验,从需求方和供给方入手

    这几年做平台,我一直在思考平台的价值究竟是什么?后来我认识到:满足供需双方的需求,提供超越传统线下方式的用户体验,就是平台的价值。平台圈住的用户并不是它的价值,而是因为这个平台具备价值,所以用户愿意留在这个平台上。

    2017-05-11
  • 我花了20个小时研究3个按钮 交互设计

    我花了20个小时研究3个按钮

    真的……我没疯……“Andrew,我们做了几个很厉害的新功能,测试一下吧。”
    “好的,当然。”
    “嘿,你甚至会忍不住写篇文章来介绍的!”
    “呃……”真理:深入挖掘总是对的。真理:努力寻找方法衡量用户的体验真理:在展开真实的访谈之前,非常有必要做一下实验

    2017-05-04
  • 交互设计

    交互——浅谈“什么是好的社交产品?”

               最近密集参加了几场和社交有关的活动,引发了一些思考。就如同大部分投资人认为的一样,社交领域是一个进入门槛很低的领域,似乎任何人都可以进来试试。其实这句话的背后,有3个深层次的意义: 1. 投社…

    2015-04-05
  • 在你重新设计网页的时候考虑好用户体验 交互设计

    在你重新设计网页的时候考虑好用户体验

    在过去的几年中,网页设计和在线营销有一些奇妙的转变,具体来说,就是网页设计风格从很重的内容和关键字塞满的网页 转为 简约的设计,让用户视觉能更集中的体验。

    2017-05-27
  • 微信热点

    Axure RP 8.0软件安装教程

    软件链接:Axure RP 8(32、64位)链接:https://pan.baidu.com/s/1pMubgLl密码:0nb1软件介绍Axure RP是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效的创建原型,同时支持多人协作设计和版本控制管理。安装教程共享软件库1.点击历史信息,查看更多内容2.长按右...

    2018-03-04
  • 提问解答:如何优雅的设计APP页面 交互设计

    提问解答:如何优雅的设计APP页面

    页面框架设计只是整个产品设计中的一环,不要把眼界局限在这一环,也不要只站需求、只站在交互、只站在视觉上思考问题,从多个角度看问题,你才会学会成长。

    2017-06-08
  • 译文 | iOS 10 人机界面设计指南 (完结) 交互设计

    译文 | iOS 10 人机界面设计指南 (完结)

    iOS10发布了,苹果遵循了一切从简但又增加了一些提升用户体验的功能,比如向开发者开放了更多接口,设计者又如何跟随iOS的步伐做好产品设计呢?本文是系列文章的完结篇,enjoy~Note
    模板图片(template image)会丢弃图片本身的色彩,而采用图片视图使用的色调。请参阅UIImage中的UIImageRenderingModeAlwaysTemplate。TIP  对于多行或是多样式的文本输入,请使用文本视图。请参阅Text Views。

    2017-05-02
  • 交互设计的那些事儿 交互设计

    交互设计的那些事儿

    作者:柳强  

    2016-01-22
  • 从设计指南说起,详解Material Design体系组件 交互设计

    从设计指南说起,详解Material Design体系组件

    iOS 或 Material Design的设计指南,都是按照组件的属性来系统介绍。
    一般把Control翻译成控件,把Component翻译成组件。通俗的解释说法就是组件为多个元素组合而成,控件为单一元素。但是Material Design把我所认为的控件和组件都合为一体,统称为组件。摊手。

    2017-04-28
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress