• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 更受欢迎 更具创造性的深底色网页设计实例

更受欢迎 更具创造性的深底色网页设计实例

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含受欢迎,创造性,网页设计等相关知识,佚名 希望在学习及工作中可以帮助到您

深底色风格的页面设计很受欢迎,它可以创造出别致优雅、极富创造力的效果。

深底色设计适用于许多网站类型,但并非所有。这种风格应该在恰当的条件下使用。

虽然深底色风格可以带来视觉冲击力,但是很多设计师并不知道如何有效地表现他们,取得的效果往往适得其反。失败的设计会导致可读性差,难以吸引用户,无法使用传统的设计元素等问题。

所以在这里,我们将讨论一些深底色页面设计的要素,以便让你的下一次设计更受欢迎,更具创造性。

最新的调查表示,47%的受访者首选浅底色的设计, 主要原因是基于可读性。大多数人不喜欢阅读深色背景上的亮色文字,那样眼睛容易疲劳从而导致不适的阅读体验。

相比之下,10%的受访者倾向于深底色的网站,另外36%的认为将取决于网站类型而定。

那什么是正确的答案呢?虽然每个人都有自己的观点,但既然有如此高比例的用户可以忍受深底色的页面设计,有时甚至是他们的首选。我们作为网页设计师必须了解如何为我们自己和客户创建更有效的深底色设计。同时我们必须相信深底色风格可以增加其可读性和友好性。

使用更多的空白

在这里或许我们应该称之为“空黑”。

有效地利用空白,在任何设计中都是重要的,对于深底色风格而言更必不可少。

深色的设计令人感到“沉重”,拥挤的布局会加重这种感受。 看看一些流行的深底色设计,可以注意到他们运用了大量的空白。

网站 Black Estate 陈列了互联网上优秀的深底色页面设计,它本身也是一个值得关注的卓越设计。 其设计中运用了大量的空白,还有独到之处:有效地在某些重要元素旁边使用空白。

首先,用户会第一眼看见的元素——logo,旁边有大量的空白。 然后用户会注意到主内容区和右侧的酒瓶。 如你所见,空白完美地反衬出了内容区的主标题和酒瓶上的文字。

BlackEstate

在Tictoc的设计中,精选内容及相关图片配合大片的空白共同构成。随着页面下移,我们可以发现空白越来越少,这样我们的注意力就会转移到缩展示的内容。

其关键是:空白可以逐步引导用户到页面底部

黑色背景增加了设计的纵深感。 网站非常依赖设计中的空白,配合黑色背景制造出来的创意效果,页面才如此吸引人。

TicToc

网站 Mark Dearman的布局中应用了大量对称分布的空白。

每个内容区块间的空白提供了足够的呼吸空间,在用户视线浏览到下一区块前,提供很好的休息点。大量的空白是深底色设计中必不可少的,它能够令布局简洁,突出重要的元素,令整体外观更优雅。

MarkDearman

您可能想查找下面的文章:

  • 更受欢迎 更具创造性的深底色网页设计实例

相关文章

  • 2018-08-237种不同类别对比,小程序和APP相比还有多大差别?
  • 2018-08-23为何前期的发现阶段是网页设计最关键的环节?
  • 2018-08-23UI 新手福利!iOS系统图标栅格系统全方位解密
  • 2017-08-06最佳网页宽度及其兼容实现方法
  • 2018-08-23看不见的用户体验,教你学会用数据丈量它!
  • 2017-08-06从四个方面谈谈Web标准的价值所在 附思维导图
  • 2017-09-11git版本控制工具基础知识
  • 2018-08-23高手进阶技巧!6招帮你用设计抓住用户的心
  • 2018-08-23上亿人使用的QQ iPad版「斗图神器」原来是这么设计出来的!
  • 2017-08-06对于图片社交网站UI应用的对比分析(图)

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 看似愚蠢的YouTube 可跳过广告,背后有哪些精妙无比的设计?
    • 高手课堂!3招搞定数字元素在Banner及专题页设计中的运用
    • 用frameset实现复杂的页面布局技巧小结
    • 实用干货!如何进行一场高质量的UI设计评审?
    • 用一个实战案例,帮你学习今年最火的服务设计思维
    • 常用的几个单页应用程序网站分享
    • 如何培养组件化设计思维?来看阿里设计师的经验总结!
    • 对话腾讯设计师:微信车票背后的设计故事
    • 高手经验!25个步骤让你成为一个优秀设计师
    • 资深交互设计师经常强调的「场景」到底是什么?

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有