首页 设计文章内容详情

为什么内容在UX设计中占据主导地位?

2019-11-25 162 jason
  • 距比尔·盖茨宣称“内容为王”,已将近20年了。


    他在1996年发表的第一篇文章读起来犹如一个宣言,他呼吁网站要向用户提供优质和有趣的内容,还解释了为什么一定要给内容作者提供补偿,同时他还对互联网的未来做了一些预测。

     

    尽管这篇文章预测未来可能出现路由器和视频的观点稍显过时(因为如今这些已经成为现实),但它仍然提出了一些非常有意义的观点—尤其是“内容为王”。

     

    正如盖茨本人所说,“内容”对于网站有着非常广泛的意义。

     

    内容,即页面上的任何事物 — 文本、图像、视频、广告,甚至音效。不过,更重要的意义在于你为用户提供的服务。想想你的网站给了用户什么?信息、娱乐、刺激、精神食粮,或者仅仅是让用户浪费几分钟的时间,漫无目的地寻找有趣的东西呢?




    我们知道,捍卫一条设计中最永恒的建议并不容易,但这样做并不是为了吸引注意力。我们只是认为,当大量的工作都集中在视觉设计上时,很容易忽略内容才是设计的基础。

     

    就好像建房子,在你还没有检查地基是否有裂缝之前,千万不能沉迷在室内设计中无法自拔。在本文中,我们将深入探讨我们主张设计上内容优先的4个理由 (我们最初在《Web Design for the Human Eye》中提到过)。







    首先,用户会对一个网站或产品的外在美充满信心,然后常常会在阅读内容之前通过设计判断其价值。但是,如果内容是糟糕的,设计得再好看也无法吸引他们。最终,用户将更关注内容本身,而不是设计

     

    尽管你会觉得你的目标用户们只关注内容这样很肤浅,但是他们却一次又一次地证明,没有实质性内容的网站是站不住脚的。比如,Reddit 这个网站拥有着大量的访问者,但它们的设计确实不怎么出彩。可见,用户对内容的关注度远多于设计

     

    这并不是说设计不重要,只是你需要在理解内容的基础上去做设计设计是以最简单的方式向用户呈现内容,帮助他们达成各自的目标。在这种意义上,从网站的信息架构到按钮的渐变样式等所有内容,都涵盖在设计中。

     

    你不必在没内容的情况下做设计。正如《GatherContent》所建议的,以下的这些小贴士,可以让你在内容设计中抢占先机:



    1、自己写。作为一个设计师,你不需要成为一个文案大师,但是你要对产品有一定的了解,这些知识帮助你写出来有用的文案。别担心,后期你还是可以请专业的文案帮你修改的。

     

    2、使用现有内容。如果你是对网站进行重新设计,那么借助原版本的内容文案比使用Lorem ipsum(乱数假文,类似占位文案段落)要好得多。当然,它可能与最后的内容/文案并不完全相同,但却可以为你的设计布局提供一个基本思路。

     

    3、从竞品中找。这不是首选,但在紧要关头时可以。因为你的竞争对手与你处在同一个领域,而他们网站的大部分内容可能也适用于你的网站。不过,请谨慎复制,因为可能会被对方指控为抄袭。






    你的内容定义了你的网站和用户之间的对话方式。交互往往发生于一瞬间,内容可以帮助用户采取你希望他们采取的行动。

     

    正如我们在《交互设计最佳实践》第二章节中描述到,话语本身就是交互。此外,页面上的内容和视觉效果决定了体验的节奏。在用户被迫点击页面上的任何内容之前,他们必须先要浏览和吸收信息—这个过程就蕴藏着一个持续的潜在的交互行为,而你可以通过好的内容策略掌控此行为。

     

    你是通过奇思妙想去鼓励自己冒险(也许是创造极简主义风格的布局),还是通过创建清晰的流程去召唤用户采取行动?无论是哪种方式,用户的行为方式将会因你提供内容的方式而有所不同。



    如果内容是优质的,那么你的网站将与用户建立积极而人性化的交流。不管视觉设计如何,你都应该通过内容来营造一种对话的感觉,让界面更加人性化。

     

    以交友网站Yep (右图)为例,看看高明的内容策略是如何带来令人愉快的交互设计的。当你浏览这个网站时,你会发现它信息层级非常清晰,内容也比较有趣,并且恰到好处。

     

    比如,看看Yep网站文案和视觉效果是如何吸引人的,而不只是解释产品的功能。用文案和视觉效果来说明内容的各种可能性,而不是罗列可用的活动数量和能帮用户找到多少朋友。当网站搭配简单的页面设计时,用户沉迷于简单的价值且别无选择,只能继续浏览下去以了解更多信息。




    滚动的每一部分都是另一种吸引用户向下浏览至底部的处理方式,直至行动召唤的出现。这种上瘾体验并非交互设计的偶然—它是有意识的,有计划的和高效的内容策略的产物。






    Rian van der Merwe在Elezea博客上指出,内容就像产品,而设计就像是产品的外包装。 在不了解内容的情况下进行设计,就像还不知道包装什么产品,就开始设计包装纸一样,这可能会导致一些比较严重的问题。

     

    来一起看一看,不优先考虑内容就做设计后果(我们在进行网站重设计时经常会犯的一个错误)。

     

    目前看来,左图看起来还不错,对吧? 结构和布局都很好,都可以拿去给前端开发了。 但是,当你换上实际的内容后会怎样呢?看右图就知道了。




    尽管在我们的实际案例中不需要进行重大的重新布局,但这种情况仍然凸显了将内容作为事后考虑的潜在危险。想象一下,比如,如果我们决定“用线框图将任何用户界面快速呈现”,那么最好通过图形而不是文本进行沟通。图形的形状可能与导航中的方形按钮冲突,这意味着我们需要重新思考如何对导航进行布局。

     

    最重要的是你的实际内容几乎不会和占位符具有相同的尺寸和外观。在特殊案例中,这意味着需要重新设计,如果你以内容优先的方法设计,这是完全可以避免的。

     

    此外,内容的风格—文案、图像类型等。—会影响设计风格。黑暗和凶兆的图像将会被色彩明亮的边框削弱。如果一篇文章中的个别拉引号像其他部分内容那样格式化,那么就不会有任何效果。内容和视觉设计作为界面中的相等部分必须一起工作—他们不应该单独开发,然后在项目快要结束时再硬拼凑在一起。






    移动端设计上,无论是优先设计还是优先内容,其实应该可以共存的。 杰弗里·扎德曼(Jeffrey Zeldman)认为:两者缺一不可

     

    内容优先的方法对于确定响应式设计的断点至关重要,否则,你完全是靠猜在做设计

     

    上文也提到过,如果等视觉设计完成后再去插入真实内容,通常意味着重新设计和重新布局,这还不包括你要考虑的其他技术细节。此外,除非“弱化”移动端的用户体验,否则你别无选择,因为需要简化网页端设计以适应更小的设备。

     

    就像Peter LaPage在这篇优秀的文章中指出,你需要为最小的设备设计最重要的内容,然后再以自己的方式逐步优化。这样,你就可以根据内容持续调整断点,而不仅仅根据布局来调整断点。正如David Olsen在他的博客中指出,根据内容设计的断点是可调整的,以使内容在任何设备上都能显示良好。

     

    比如,让我们看看《卫报》(下图)这个响应式网站:



    我们将从最小的断点开始,即手机视图。如图所示,以下内容供用户使用:


    • 导航优先(列出汉堡菜单中的其他导航项)

    • 主题故事

    • 次要故事可以滚动显示

    • 搜索栏

    • 天气信息


    即使在最小的屏幕上,用户也可以享受到更流畅的滚动体验。列出几个主要的导航项,比如“US”和“world”,这些微妙的操作有助于在移动设备上创建更丰富的内容体验(而不是将所有导航项都隐藏于汉堡菜单中)。

     

    让我们稍微扩展一下,复制了一个平板电脑的界面(如下图):




    现在,在平板电脑上,你有更多的屏幕空间,这决定了应该从哪里中断内容。有了更多的空间,“新闻报道”就不用折叠在“主要新闻”的二级页面里。平板电脑的布局与手机端布局应该保持一致,只是我们需要将部分次级页面的内容简单地移到主页面中。你还会注意到,在平板电脑上,广告是被放在了顶部。

     

    总的来说,平板电脑的界面视图就像是手机端视图的一个略微升级版。平板电脑视图中的内容都是手机端里面有的,而且并不会有任何在手机端视图中没出现过的“新”内容,它只是会让尽量多的项目/内容可以更直接地看到。因此,两者的体验还是比较一致的。

     

    当我们最终看到完整的桌面视图时,我们再次看到“网格容器”变宽是可以容纳更多内容的,但是,这里显示的内容在其他小型设备上是无法访问的。

     

    最后,我们看看完整的电脑界面和手机端界面,我们再次看到变宽的“网格容器”能承载更多内容,但又看一次,电脑屏幕上不会显示那些在手机端上无法访问的内容。




    更多的信息是直接获取的,但大部分导航和整体外观都基本保持了一致性。我们看到,随着屏幕尺寸的增大,用户体验实际上遵循了一个“渐进增强”的路径,而不是进行“优雅降级”。

     

    一旦你确定将移动设备作为设计尺寸,那移动优先的设计是不容易的甚至会让你感到别扭,但它无疑是确保你的所有网站内容不受设备影响的最佳方法之一。






    用户不关心你,当然他们也不关心设计。不要被“Dribbble风”所诱惑。

     

    去做用户调查,深入研究用户画像,然后找到最有助于用户实现目标的内容。他们想从你的网站得到什么?在弄清楚这些之后(只有了解后才知道),你才能用最直观的方式来规划信息体系结构。 还有,在进行视觉设计之前,不要害怕内容的新增和修改/变更。

     

    只有网站的基数建设清晰了,我们探索交互和视觉设计才有意义。否则,都只是表面工作而已,华而不实。

     

    如果您喜欢这篇文章,请随时查看免费的电子书《Web UI最佳实践》和《交互设计最佳实践》在200多页和60多个可视化案例研究中,这两本书为日常设计提供了实用的用户体验建议。









    原文链接:https://www.fastcompany.com/3054090/why-content-reigns-supreme-in-ux-design

    原文作者:JERRY CAO KAMIL ZIEBA MATT ELLIS

    译者:干杯????组—宛苏&Lucky瓶


本文转载自网络,如有侵权,请联系删除。 仅供学习 分享 欣赏 不做任何商业用途 版权归原作者所 有 如侵必删