2010年代的Web设计趋势会继续存在吗?

披露: 您的支持有助于保持网站的正常运行!我们会为此页面上推荐的某些服务收取推荐费.


2018年网页设计趋势

在万维网成立之初,网站管理员经常使用各种可能的效果:动态的gif,闪烁的文本和自动播放的midid吸引了您浏览的每个网站的注意.

尽管互联网的狂野前沿令人兴奋且具有革命性,但诸如带图案的背景上的红色文字之类的趋势在人们眼中或用户友好性上并不容易.

幸运的是,自网络诞生以来,我们已经走了很长一段路。自从我们过去经常听尖叫的拨号调制解调器连接以来,我们用来上网的技术已经发生了发展,但我们的手指交叉,没有人通过拿起固定电话将您踢下线.

Web设计人员也必须不断发展以跟上不断变化的技术。在过去的几十年中,设计趋势的浪潮已经过去和消失,其发展趋势是将注意力集中在用户的体验上。如今,设计师比以往任何时候都更加注重简约性,可读性和易用性.

但是,尽管情况在不断改善,但即使趋势似乎有所改善,也总是存在错误的转弯和陷阱。无限滚动可能有助于显示更多信息,并使访问者在页面上的停留时间更长,但是当尝试查看网站页脚时,用户感到沮丧.

固定元素的普及是可以理解的:您希望将重要信息保持在访问者的眼前。但是,如果这些共享按钮开始阻止您的页面内容,则可能适得其反。 Web设计师应该紧跟潮流,但也要利用自己的创造力为此类问题提出创新的新解决方案.

当谈到今年的趋势时,我们无法断定哪些创新会获胜并保持下去,哪些会在现在的10或20年后被人们嘲笑。根据2014年网页设计趋势的细分,您可以自己决定哪些趋势值得继续,哪些应该被抛在后面。.

网页设计趋势

时代设计:2014年网页设计趋势

从90年代初期开始,网络已经发生了翻天覆地的变化,在网站加载后,我们看到了疯狂的颜色和字体以及自动播放的音乐。如今的网络采用了更加简约的方法,旨在简化和提高用户友好性。您可以期望在2014年看到更多.

响应式设计

  • 响应式设计意味着网站会自动调整以适应正在查看的屏幕的大小.
    • 随着人们远离传统的计算机屏幕,这对于网页设计至关重要.
      • 现在有90%的美国成年人拥有手机
      • 58%的美国成年人现在拥有智能手机
        • 60%的手机所有者使用他们的手机连接到Internet
      • 现在有42%的美国成年人拥有平板电脑
  • 响应式网页设计涉及多种灵活性:
    • 版面
      • 一切都是按比例大小而不是像素大小.
    • 图片
      • 一切都是按关系大小而不是像素大小.
    • CSS查询
  • 响应式设计的示例包括:
    • com
    • com
    • com
  • 创建自己的响应模板或购买现有的响应框架.
    • 示例包括:
      • 业力
      • 阿瓦达
      • 拥抱
  • 优点:
    • 减少维护:一个站点,而不是多个站点来设计和维护.
    • 更好的搜索引擎优化(SEO):一个站点意味着一组URL,这使SEO更易于管理.
    • 无需担心您的网站是否与持续投放市场的数十种新设备兼容.
  • 缺点:
    • 实施可能需要比预期更长的时间.
    • 技术仍在发展.
    • 由于图像只是按比例缩小而不是调整大小,因此可能会对页面加载时间产生负面影响,从而使访问者不安.

更多滚动

2014年,由于实现起来非常容易,我们将看到更多滚动内容.

  • 视差滚动:允许网站背景以与页面其余部分不同的速度移动.
    • 示例:美国国家航空航天局展望
    • 优点:
      • 可以用动画来吸引游客
      • 引导用户采取行动
      • 鼓励访问者在浏览整个页面时停留在页面上的时间更长
    • 缺点:
      • SEO受到热捧是因为只有一组元信息
      • 单个页面上的大量数据会减慢页面加载时间,这可能会导致用户沮丧
  • 水平滚动:从左到右滚动,而不是上下滚动.
    • 示例:2012年世界野生动物基金会地球一小时
    • 优点:
      • 允许设计师在屏幕上容纳更多内容.
    • 缺点:
      • 用户可能没有意识到他们必须滚动到侧面,或者可能不想滚动到侧面以获得完整的体验.
  • 无限滚动:在用户滚动时加载页面内容
    • 示例:Facebook新闻提要
    • 优点:
      • 浏览速度更快
      • 与触控设备良好互动
      • 内容公开:无限滚动会同时公开新旧内容,从而使较旧的内容具有更长的“保存期限”。
    • 缺点:
      • 导航:
        • 用户无法滚动到特定内容或将其添加为书签,因此需要重新从顶部开始.
        • 无限滚动不会告诉用户要遍历多少数据.
      • 以用户为中心:当您离开滚动条时,您将回到顶部,而不是上一个参考点,这使用户更难以专注于他们在做的事情/阅读的内容.

文字少

  • 我们将看到更多的设计围绕着图片,图标和视频,而不是繁琐的文字设计.
    • com的字数少于10个字,并且要求用户观看视频以了解如何使用该应用.
    • com的主页导航栏中带有一小段文字和一些单词.
    • The-Studio.co.il仅包含少量文字和图片.
  • 优点:
    • 更复杂的网页设计
  • 缺点:
    • 难以使网站设计符合508
      • 508合规性是指使无法以传统方式访问Internet的残障人士符合Web标准.

平面用户界面

  • 平面用户界面(UI)是指注重功能而非风格的设计.
    • 使元素看起来更像它们的名字.
    • 一切都旨在:
      • 明晰
      • 简单
    • 这意味着删除:
      • 暗影
      • 渐变色
      • 斜边
      • 感言
  • 我们已经在以下位置看到它:
    • Windows 8
    • 苹果iOS 7
    • WordPress 3.8
  • 平面设计与拟态设计相反.
    • 拟态设计使用视觉细节使一件事看起来像另一件事.
      • 示例:在汽车内饰中使用木板
  • 优点:
    • 简单的用户界面
    • 使用明亮/大胆的颜色可增强心情
    • 专注于出色的排版
    • 视觉效果清晰干净
  • 缺点:
    • 可用性问题:人们可能并不总是知道单击或触摸的位置以进行交互.
    • 调色板可能难以匹配:您使用的颜色越多,正确匹配它们就越困难.
    • 弱字体设计变得更容易发现.
    • 整体设计看起来太简单.

固定内容

  • 这是指页面元素,例如导航栏或用户滚动时停留在页面上的内容部分.
    • ca允许水平滚动,同时侧边栏导航保持不变.
    • net在网站左侧设有固定位置的社交媒体栏,允许用户在栏保持原位的情况下滚动浏览内容.
  • 优点:
    • 可用性优势:用户可以轻松找到所需的内容.
  • 缺点:
    • 固定内容可能浪费滚动空间.
    • 某些固定元素(例如导航栏)可能难以转换为移动环境.

资料来源

  • 移动技术简介– pewinternet.org
  • 响应式网页设计:它是什么以及如何使用–编码.smashingmagazine.com
  • 什么是响应式网页设计? – smallbiztrends.com
  • 17,389网站模板和主题,价格低至$ 3 – themeforest.net
  • 响应式网页设计的利与弊– business2community.com
  • 什么是视差网页设计? –定义,提示 & 注意事项– unleashed-technologies.com
  • NASA:前景– nasaprospect.com
  • 世界自然基金会的食品故事– asset.wwf.org.uk
  • 无限滚动并不适用于每个网站– nngroup.com
  • 超越无限!无限滚动的利与弊–启发式网站
  • Snapchat – snapchat.com
  • 工作室– the-studio.co.il
  • 更少的文字更多的多媒体–网站设计的新方法– designmodo.com
  • 失物招领处–映射页– howto.gov
  • 什么是平面设计? – gizmodo.com
  • 平面设计的利与弊– designmodo.com
  • 2014年18种关键Web设计趋势– econsultancy.com
  • 固定导航栏:优点和缺点– awwwards.com
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map