用扁平化的界面设计吸引用户

在传统的网页开发乃至现在针对移动设备所做的设计,复杂炫目的效果对产品而言未必是一个好的选择。

  尤其在移动设备上,过于复杂的效果非但很少能为应用吸引用户,反而时常让用户在视觉上产生疲劳,对产品界面中最基本的功能产生认知上的障碍。因此我们在设计中就需要参考“扁平化”的美学。UI界面设计

  什么是扁平化设计

  在实际当中,“扁平化设计”一词所指的是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,从而打造出一种看上去更“平”的界面。北京UI设计

  

  Layervault的设计师Allen Grinshtein曾经在HackerNews的一篇文章当中说:

  “长久以来,网站的界面风格似乎都在遵从着同一种设计美学,大家都在用斜面、渐变、阴影一类的效果来突出界面元素的质感。对于设计师们来说,制作这类‘可爱’的元素简直变成了行规甚至是荣誉。不过对于我们,以及为数不多的其他一些设计师来说,这种惯用的方式并非一定正确。”后台管理界面设计

  去Layervault看上几眼,四处转转,你会发现他们所追求的这种于简约当中体现出的视觉美感。看到我们一直以来习惯了的那些视觉风格正在越来越多的网站和移动应用产品中被潜移默化的颠覆着,也是蛮有意思的事情。下面是其他一些例子:北京UI设计

  Squarespace

  

  新版的Squarespace几乎完全采用了扁平化的视觉风格,只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现,其实他们的产品在功能逻辑上还是蛮复杂的,但这一切都隐含在简约直白的界面背后,你真的可以从中隐约感受到其设计团队付出的心血。软件界面设计

  相关阅读:简洁至上的Web设计 – 创意要素及设计技巧

  Facebook

  

  另外一个大家所熟悉的例子就是Facebook了。

  “Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色,至少我们可以说这种设计风格对于Facebook来说是完全适用的。” - Ian Storm Taylor(Segment.io)后台管理界面设计

  Rdio

  

  Rdio最新版本的网站及产品界面中都采用了很彻底的最小化、扁平化的设计风格,你很难找到使用了阴影、渐变等效果的界面元素。北京UI设计

  相关阅读:最小化可用性设计

  Nest

  

  我曾经作为前端工程师参与过Nest的网站开发,现在依然记得他们的设计师对扁平风格的热情追求。在他们的网站中,实际的产品及相关的应用环境照片作为“真实”元素融入到扁平风格的媒介载体(网站本身)当中,虚实结合,让访问者可以很容易的将注意力聚焦在产品上,而不会被网站界面上的视觉元素所干扰。

  Beforweb

  译者小站乱入…译者@C7210注

  对拟物化的逆袭

  正如20世纪建筑界当中的极简主义运动,扁平化设计风格的逐渐兴起也可以被看作是对多年以来过度设计、过度雕琢的界面风格的逆袭;尤其是最近一段时间,苹果一直以来的拟物风格被诟病的蛮犀利的。

  

  Wikipedia对拟物化(“仿制品”、“Skeuomorph”)的定义是:

  原有物件中某些必需的形式在新的设计中已不再必要,但新设计仍模仿旧有形式,以使新的外观让人感觉熟悉和亲切。

  举个例子,我们通常会为界面当中的按钮添加渐变和投影效果,因为现实当中的按钮就是具有这些视觉特征的,即使这些效果对于界面元素的功能来说没有任何实际意义。又譬如有些天气方面的应用会使用温度计的形式来展示气温;在现实世界中,这种实体的存在是必需的,而在应用软件当中,温度计的形象则纯粹是装饰性的。

  日历应用当中皮革质地的设计元素是必需的吗?如果按钮上不使用3D质感,用户是否还知道它们可以被点击?有多少装饰性的元素是真正必要的?界面设计公司

  “在现实生活中,当按钮被按下时,你可以清楚的感受到它的弹性,但在桌面设备或移动设备的显示屏上,你无法感觉到这种物理回馈。看上去是实体的东西却无法让人感受到实体本该具有的反馈效应,至少对我来说这是一种很蹩脚的、不符合预期的体验。” – Allan Yu (svpply / eBay)

  形式服务于功能

  20世纪建筑界的极简主义运动当中提出了一些著名的口号,包括“形式服务于功能(form follows function)”、“少即是多(less is more)”等等,直到今天我们依然会谈到这些。此外,我个人非常喜欢米开朗基罗在被问到他是怎样创作大卫雕像时回答的:

  “很简单。我只要凿去多余的石头,留下有用的。”

  对于界面设计来说,也是同样的道理;37signals的家伙们在这方面的本事是有目共睹的。要在实际当中卓有成效的实现扁平化风格的设计美学,作为设计师,我们本质上最需要关注的是产品功能如何运作,而不仅仅是考虑视觉呈现方面的问题。

  扁平还是拟物?只是个选择的问题

  至少我没有见到任何研究报告表明拟物风格的按钮会带来更多的点击量。的确,有足够多的理论和实践结论可以证明在视觉上能产生更强对比效果的交互元素可以更好的引起用户的注意,但我相信,在某些上下文环境中,一个扁平化的橘色按钮所带来的对比效应会高于具有凸起质感的按钮。所以,上下文,也就是具体产品的具体界面环境,是这里的一个关键要素。我们来看看其他设计师的一些看法:

  “这件事和时装时尚有些类似。当某种风格被全面普及之后,作为设计师,要想脱颖而出,你就得反其道而行之。” – Cemre Güngör (Branch)

  “如果有人告诉你‘拟物化是不好的设计’,这就相当于在说‘紫色是丑陋的颜色’,没有任何意义。” – Sacha Greif

  “为什么要在没有任何实际证据的情况下贬低某种设计风格,同时抬高另外一种?忽略产品的实际功能与整体体验而单纯追求某种设计风格,这并不是一件令人兴奋和愉悦的事。” – Geoff Steams (YouTube)

  设计的好坏不是“美学”可以决定的

  对设计风格的选取最终还是要取决于具体产品的实际情况。在我个人看来,相比于拟物化而言,扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。

  无论采用怎样的风格,优秀的界面设计都需要遵从一些共通的设计原则:

  一致性

  通过具有一致性的设计模式及视觉风格,为用户建立起完整一致的心智模型,使产品更加易用,提升整体体验。

  对比

  通过对配色、尺寸和布局的调整,使可点击的界面元素在视觉上与其他元素形成鲜明的对比。

  布局

  可以尝试使用960gs一类的网格布局为界面设定视觉规范,使用户的视线可以跟随内容本身所界定出的路径自然的移动,增强界面的视觉平衡。

  层级化

  最重要的东西要比相对次要的东西更容易被看到。关于这个话题我可以写一整篇文章出来,简单的说,就是在界面设计中着重突出那些与核心功能与常见用例相关的交互元素,而将其他操作元素置于次要位置,这可以使界面得到最有针对性的优化和简化。

  “我个人的经验是,无论扁平化还是拟物化都没什么所谓,最重要的是界面能够让用户在最短的时间内清楚的识别出信息和功能的层级关系,并且很容易的知道接下来应该做什么。” – Caroline Keem

  目标用户

  不同类型的用户所青睐的界面风格也有所不同。建筑、设计、时尚等领域的用户可以更好的拥抱扁平化风格,而其他更加“普通”的用户则更容易接受相对传统的拟物化界面。

  反馈

  当点击行为发生时,要立刻向用户提供清晰明确的视觉反馈。动画过渡效果就是一种比较常见的反馈方式,例如在用户执行操作后,使用旋转图标提示用户系统正在进行响应。

  推荐阅读:为用户的成功操作提供正面反馈

  降低“摩擦力”

  无论采用怎样的视觉风格,都要使界面尽量简化,减少用户完成目标所需执行的操作,打造更加流畅的交互体验。任何一点障碍或额外的步骤都会提高操作成本,增加功能的复杂度,进而降低转化率。

  相关阅读:表单设计与转化率的提升

  鼓励探索

  了解目标用户有可能对产品进行哪些方面的探索。一旦他们习惯了产品的界面与基础功能,并开始向“高级用户”的阶段进发时,要为他们的探索和学习行为进行必要的指引与“奖励”回馈。北京UI设计

  原型

  无论风格如何,界面形式都取决于实际的功能。好的设计方案离不开产品前期的规划工作,特别是通过草图或线框原型进行的探索。识别出最核心的用例需求,使用原型不断尝试和验证,为接下来的界面设计工作打下坚实的基础。

  “扁平化风格的逐渐盛行固然有它的道理,但本质上它只是设计美学当中的一种;与仿古、高光、金属质感、木质等视觉效果相同,对视觉风格的选择必须以良好的信息架构及交互模式为基础。”

获取更多更新的行业资讯请关注微信公众平台:蓝蓝设计

用扁平化的界面设计吸引用户,布布扣,bubuko.com

时间: 2024-12-18 22:57:52

用扁平化的界面设计吸引用户的相关文章

扁平化网页的设计方法-页面空间的运用

这两年的时间内扁平化网页越来越受到大部分人的喜爱,很多企业也想向这方面发展,在扁平化的设计中有一个重要的项目就是页面上空间的运用,今天我们就给大家讲讲网站设计中扁平化网站的设计技巧.        当一个元素使用不对称的空间,它对周围的其他元素.它会显得更加有活力,如果你设计一个网页,一个链接或按钮的要求比别人更多的关注领域是特别有帮助的. 今天我们要仔细看看不对称表示通过对比,间距和布局.我们观察对比思考,如何关注空间的驱动器. 不对称也可以关注内部关系如图像缩略图或文本对齐.例如,一个图像画

关于扁平化界面风格的设计美学讨论

这是一篇关于视觉方面的小文章,关于扁平化与拟物化风格的讨论.有不少朋友来发表各自的看法,说明这确实是大家都蛮关心的设计问题.大家的观点虽然不同,但都有一定的道理,都能看出发表论调的设计师的思考和激情.有人说了你怎么这么没节操呢,你到底觉得哪种好?我要说的是,在我看来这个事情里的的确确不应该存在哪个强于哪个的争议,因为它根本就不是个非黑即白非美即丑泾渭分明的问题:脱离了实际产品的上下文环境,脱离了产品功能与目标用户群类型之间的关联,所谓好与不好的命题压根就不成立. 说的具体些,远的不讲,单说Bef

扁平化设计美学探讨

“扁平化设计”的使用正逐渐成为网页和UI设计近期的大趋势,同时也是时下的一个热门话题,各种探讨和学习研究纷至沓来.鉴于我本身一直钟情于极简主义,所以扁平化设计中的美学对我极有启发,特别是在近期对QuoteRobot(我在2010年与他人共同完成的一个提案书写应用)进行重新设计时. 在本篇文章中,我将与大家探讨什么是扁平化设计,并审视其他设计师对扁平化设计的看法,然后为大家提供一些能用于自己设计工作的小建议. 什么是扁平化设计? 从实践角度说,扁平化设计就是指不采用近几年流行的渐变.像素完美阴影和

扁平化设计

扁平化概念的核心意义是:去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽象.极简和符号化. 例如:Windows.Mac OS.iOS.Android等操作系统的设计已经往“扁平化设计”发展.其设计语言主要有Material Design.Modern UI等. 扁平化的设计,尤其是手机的系统直接体现在:更少的按钮和选项,这样使得UI界面变得更加干净整齐,使用起来格外简洁,

关于扁平化视觉设计趋势的一些小分享

本文来自网易云社区 作者:刘戈 作为视觉设计师来说,能设计出一款赏心悦目.走在设计潮流前线而又有自己品牌设计基因的产品是每个人心目中的追求.如果提到当今移动产品UI设计风格趋势时,相信不少设计师心目中的答案是扁平化设计.无可否认,在2013年扁平化设计风格全面普及以来至今,扁平化依旧是移动产品设计的主流方向,但众多产品使用扁平化设计的同时会使得产品之间的视觉差异越来越小,设计师如何把自己的产品设计做得与众不同,让自己产品于同类竞品中脱颖而出就变得尤为关键,这要求设计师时刻要保持设计上的创新,而创

扁平化网站建设

扁平化的网站结构是以简单为精髓,突出内容重点为主,减少或者去掉页面的装饰效果,用抽象.极简以及符号化来代替网站酷炫的展示方式,让页面看起来更为干净美观.但是无论页面的设计是以哪种方式实现,它都是围绕着更好的用户体验来进行的,再好的设计方式若使用不当造成用户体验不佳,一切都是白搭. 各种智能手机,平板电脑等设备的不断变化和进步,利用网站扁平化设计更受到追捧,它最大的优势在于:可以让页面在各类屏幕上展示时更加清晰,适应性强的特点不受屏幕尺寸的影响,显示内容简单.直接,减少视线上的混淆,且占据资源少.

26款能够吸引用户的 iPhone App 界面设计

在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文章 创意设计:折叠效果在移动App中的应用 45套新鲜出炉的精美 PSD 网页设计素材 分享15套免费的扁平化界面设计素材下载 设计前沿:30款超级精美的iOS图标欣赏 40款 iPhone 和 iPad 应用程序图标设计 设计来源 设计来源 设计来源 设计来源 设计来源 设计来源 设计来源 设计来

android扁平化界面设计—在android中使用Font-Awesome

Font-Awesome 是为Bootstrap设计的一个图标集合字体,里面包含了300多个常用图标.使用Font-Awesome还具有如下优点: 1.减少了图标的绘制工作 2.适合扁平化界面设计 3.图标的大小和颜射可以在代码中自己设置,颜射不固定,可变性大 4.减小了APK的大小 Font-Awesome的使用方式: 到http://fortawesome.github.io/Font-Awesome/下载Font-Awesome字体,目前最新版本是4.3.0然后解压压缩包,将Fonts文件

网站扁平化设计对于用户和搜索引擎的好处在哪里

个人官网:www.duomiluo.net 当我们访问一个网站的时候,都想最好最快的找到自己所要的信息,如果是一个内容少的网站还好,但是对于一个有一万的页面的网站来说,想迅速的达到自己所需的内容,对于网站结构的设计就会由所要求了,不仅对于用户,对于搜索引擎也是一样的. 扁平化设计,能够很好的提高网站的搜索友好性,从首页开始点击,应该最多三次点击就可以到达方可所需的内容页面 如下图: 但如果网站是如下图的 结构设计的话,找到所需要的内容可能需要很多次点击: 例如我们可以看看 新浪网,这么一个庞大数