首页 > 业界 > 关键词 > 网页设计最新资讯 > 正文

干货!改善网页设计的13个实用技巧

2021-04-25 08:45 · 稿源:站长视界公众号

声明:本文来自于站长之家旗下公众号 站长视界(ID:chinazshijie),作者:站长资讯。

页面设计好坏直接决定了用户的浏览体验,那么在网页设计过程中需要注意哪些问题呢?

本文站长之家将跟大家分享改善网页设计实用技巧,废话不多说,直接进入正文。

图片

1、在有文字的照片上使用颜色覆盖

‍在网页设计中,有时候不得不处理一些糟糕的图片。尝试将它们处理成背景纹理而不是主要焦点元素,通过在半不透明的设置上叠加品牌颜色。通过提高对比度,使覆盖文本更具可读。比如下面的例子中,给文本添加了一个深蓝色的阴影来进一步增强对比度。

图片

2、不要过度使用负空间

设计师似乎喜欢运用负空间,网上也有很多人会建议使用更多的负空间。但是当元素之间存在过多的负空间时,人们的视线就会陷入空洞中,元素之间的连贯性就会被打断。

图片

3、“废话少说”

要知道,很多人是没有耐心去看页面一大串文字的,这意味着你的网页只有很少的时间来吸引别人的注意力。因此,页面内容一定要精简,并且要突出重点,“废话少说”。

图片

4、即使只有文本的布局也要有视觉吸引力

登陆页面的纯文本部分可能很难设计,尤其是如果你没有机会或资源来使用插图、图像或照片优化页面。

这时候,可以利用品牌颜色和展示细节上下功夫,以提升视觉设计效果。

图片

5、小图标,大插图

图标固然很重要,但是应该给予合理的展示。有的元素更适合做“配角”,如果把它们放大,你得到的只是一个糟糕的效果。

比如让图标作为标题的“配角”,标题文本内容无疑会更突出,展示更为合理。

图片

6、减少字母间距

我们有很多方法可以使用字母间距来微妙地改进排版,但如果你没有丰富的排版经验,坚持在所有大写标题上增加一点字母间距。在句子大小写文本中增加额外的字母间距会产生可读性问题,也会破坏字体设计的自然节奏。

图片

7、在常见问题( FAQ)部分注意长度

常见问题部分很多网页重要组成部分,最佳行长度在45到75个字符之间,包括空格和标点符号。

图片

8、展示社会价值

在这个例子中,真正的价值主张隐藏在一个几乎不会被注意到的副标题中。

这时候,可以通过添加真实用户的面孔来增加社会证明的真实性。

图片

9、没有人喜欢字体很小的文本

在这个例子中,在CSS中使用了可变的网页排版,创建了主体副本为11px、导航链接9px。

浏览器默认的16px字体大小现在已经有20年的历史了——使用为屏幕设计的现代字体,开始处文本的大小应当设置在18-20px之间。

图片

10、运用几率法则

让页面布局包含元素个数为奇数。如果需要展示4个要点,试着将其中2个点结合在一起,用3个点展示。

如果这很难实现,那就优先考虑最重要的观点,去掉最弱的。

在如下例子所示的布局中,要看四个要点,会让人感觉认知超负荷。

图片

11、尽可能缩减文本

在可能的情况下尽可能合并并减少文本内容。在标题和副本之间创建大小的对比来提高视觉层次,当你有很多内容需要展示,那就使用负空间来创造清爽的体验。

图片

12、利用亮色强调重点

大面积使用亮色会产生对比度失衡的问题,可能达不到突出文本内容的目的。对于较小的元素,如按钮,可能需要尽量避免白色文本。

图片

13、检查灰色文本的对比度

‍使用灰色文本是在文本元素之间创建层次结构的流行做法。但这通常会因为缺乏足够对比度,使得文本的可读性变差。使用一些在线工具来检查对比度,如果你需要建立一个更清晰的视觉层次,可以增加字体大小的对比度。

图片

以上就是改善网页设计的13个技巧,希望能对你有所帮助。

注:文章由站长之家编译自uxplanet

这篇文章对你有价值吗?

  • 相关推荐
  • 大家在看
  • 名创优品被设计师举报抄袭 设计师回应:一场美丽的误会

    日前,有设计师在网上反映称,自己去年设计的图案,被名创优品用在帽子上,但并未经过自己允许。该事件发酵没过多久,上述设计师@李棟00便在其个人社交平台发文称:“纯属一场美丽的误会~感谢@名创优品,的处理态度,点赞,大家多多支持中国企业哦!”事实上,这已经不是名创优品首次陷入抄袭风波。此前,名创优品创办的NOME曾与一个叫NǒME的品牌撞Logo、撞广告牌,由此导致两家公司展开了一场商标争夺战。2018年11月,名创优品?

  • 世界级设计奖项加身,添可智能产品再获德国iF设计

    近日,世界顶级设计大奖德国iF设计奖结果正式出炉,凭借极致设计与创新实力,添可智能料理机CHIERE ONE和智能随手吸PURE ONE Mini S5双双获奖。这也是添可在荣获红点奖、美国IDEA奖之后获得的又一世界级设计大奖。德国iF设计奖与德国红点设计奖、美国IDEA奖并称为世界三大设计奖。本届iF设计奖共有来自52个国家/地区的近10,000份提案,竞争之大可见一斑。从近万件作品中脱颖而出,获得98名全球顶尖评委的一致认可,添可智能料理机?

  • 微软发布重新设计的面向Android设备的Bing应用

    微软近日在Google Play Store上发布了Bing搜索应用的重大更新。在这次新的更新中,微软完整地重新设计了Bing应用,并推出了新的主页和一些改进。你可以在下面找到Bing应用中可用的完整功能列表:新主页:查看热门新闻,随时跟踪关注的话题,并快速访问微软功能搜索:获得搜索结果以及更多COVID追踪器:监测最新的病例数、趋势、新闻和疫苗信息天气:查看今天和未来一周的天气预报视觉搜索:用手机相机拍图或上传图片进行搜索体育:

  • 8个实用小技巧,提升icon设计的细节

    图标是UI页面中最关键的部分之一。它是一种视觉语言,代表信息、内容并揭示功能背后的含义。图标应该使用简单的视觉隐喻,让用户快速理解和识别。

  • 当贝激光投影X3荣获2021德国iF设计奖,创新设计引人瞩目!

    近日,德国iF设计奖公布了奖项名单,当贝激光投影X3以及当贝智慧盒子A1 Pro凭借独一无二的设计理念,从众多参选作品中脱颖而出,荣获本次2021德国iF设计奖!iF设计奖创立于1953年,该奖是由德国历史最悠久的工业设计机构——汉诺威工业设计论坛每年定期举办的。德国iF国际设计论坛每年评选iF设计奖,它以“独立、严谨、可靠”的评奖理念闻名于世,象征着彰显创新设计力量的卓越设计成就,旨在提升大众对于设计的认知,有“产品设计界的奥斯卡

  • 美的美居App荣获iF设计大奖

    近日,2021年德国iF设计大奖隆重揭晓,美的IoT倾力打造的智慧生活服务平台美的美居App6.0版本在来自全球52个国家和地区的近万份提案中脱颖而出,斩获iF设计大奖,再次展现了美的集团在智能家居领域的强大实力。 自1953年创办以来,德国iF设计奖距今已有68年历史,凭借“独立、严谨、可靠”的评奖理念,德国iF设计奖已成为全球最具专业性和影响力的工业设计奖项之一,与德国红点奖、美国IDEA奖并称为“世界三大设计奖”,并有着“产

  • 英国政府拟议的物联设计安全”法也将涵盖智能手机

    据外媒TechCrunch报道,英国政府周二表示,智能手机将被纳入计划中的“设计安全”法的范围,旨在加强消费者设备的安全。英国政府在对立法计划咨询的回应中宣布了这一消息,该计划旨在解决长期以来与物联网(IoT)相关的一些最松懈的安全做法。英国政府早在2018年就推出了物联网设备制造商的安全守则--但即将出台的立法旨在以一套具有法律约束力的要求为基础。部长们在2019年公布了一项法律草案--政府重点关注物联网设备,如网络摄?

  • 微软推新站:让你用上名人设计的Surface皮肤

    微软今天推出了一个名为“WeAreOriginalByDesign”的网站,能够帮助你找到适合 Surface 的原创皮肤设计。目前该网站提供了 7 款皮肤,除了“Robot Camo”是来自于 Dbrand 之外,其他的皮肤都是由名人或者有影响力的人设计的。这 6 款皮肤是由前 NFL 球员 Martellus Bennett、摄影师 Brooke Shaden、赛车手 Collete Davis、DJ HAPA、厨师 Fabio Viviani 和艺术家 Marcus Rivero 设计的。现在你访问该网站,可以从列表中选择你的 Sur

  • 如何减少设计中的认知负荷,带来更好的用户体验?

    ​当我们的大脑接收的信息超过了上限, 就会减慢大脑信息处理的效率。认知负荷很多时候不可避免, 作为设计师的我们应该寻找设计方法来减轻用用户使用产品时的认知负荷, 来帮助用户更便捷地使用产品。

  • 小米MIX手机宣布回归,或采用卷轴屏或折叠屏设计

    小米在预热海报中表示会跟大家「展开聊聊」,这或许暗示全新小米MIX将采用卷轴屏或折叠屏设计。据了解,距离小米MIX系列的上一款作品 MIX Alpha 发布已经过去了两年半的时间,而且这款概念机最终并没有真正发售。而上一款产品小米MIX3则是更早的2018年10月发布的,这也是小米 MIX 系列的第四款产品。

  • 价值超3亿!被盗的新MacBook Pro设计图纸曝光

    日前,苹果代工厂广达电脑遭遇黑客攻击,对方盗走了包含MacBook Pro图纸在内的机密文件数据等,并勒索广达在4月27日前支付5000万美元(约合3.2亿元)的款项,否则赎金继续翻倍。其中几张图纸已经被REvil在暗网公布,涉及新一代MacBook Pro。图纸资料显示,新一代MacBook Pro的确如传言那样,配备了MagSafe磁吸充电口、SD卡槽、HDMI接口、3个雷电3、1个USB-C等,并且取消了C面键盘上方的那一排TouchBar触控条。泄露文档中,产品型号

  • 网页排名在3-5,如何快速排名到百度首页?

    ​在SEO你问我答群里,我们总是会讨论一些SEO相关的问题,由浅入深,相关的话题都会涉及,近期有一部分小伙伴发现,当网站的某一部分关键词排名进入到前3-5页的时候,很难在突破,进入到首页。

  • 小米启用新Logo 设计界沸腾了 友调侃官一行代码搞定

    昨晚,小米公司宣布开始启用新Logo,开始升级品牌识别系统。新Logo方正变圆滑,这样的大师设计,有很多网友质疑,称雷军被骗了,劝小米直接报警…

  • 日本设计大师原研哉操刀!小米新Logo勋章限量预售

    在3月底小米举行的春季新品发布会上,小米正式公布了小米新Logo。全新Logo由日本国际著名设计大师原研哉操刀设计,原研哉表示,新Logo融入了设计师对于“Alive”设计理念的思考。具备“超椭圆”数学之美的小米新LOGO,不再局限于画面的一角,仿佛有了生命。值得一提的是,小米新Logo勋章将于今日上午10:00限量预售。勋章采用与新Logo一致的外观方案,正面为弧形设计,除了用于收藏,还可佩戴在衣物上。小米官方表示,这枚小米新Lo

  • 新截图确认:Windows 10将获得新圆角UI设计

    在微软看来,他们目前一个主要任务就是,调整Windows 10的外形设计。在Windows 10及其各种官方应用中,微软从未停止测试新的用户界面设计。目前在系统方面微软正积极推进圆角设计,而 Windows Terminal 或许是首款获得圆角变化的 Windows 10应用程序。这些变化会在即将到来的Windows 10 21H2功能更新中和大家见面。从微软内部员工分享的截图中可以看到,Windows Terminal应用的边缘已经启用了圆角设计,整体上看起来更加的圆润。目

  • 小米携手国际知名设计师原研哉公布新logo

    在今日的小米DAY2发布会上,小米正式公布了全新LOGO。该LOGO为小米品牌视觉融入东方哲学的思考,是国际知名设计师原研哉与小米携手,从“科技与生命的关系”出发,提出全新的设计理念。

  • HTC Vive Air在尚未发布但已获得iF设计

    虽然我们仍不时会看到HTC智能手机的发布,但这家公司早已将重心转移到了VR耳机市场。今天早些时候,一个iF产品设计奖列表向世界展示了下一款Vive VR耳机,它的目标人群是健身爱好者。HTC Vive AirHTV Vive Air被描述为一款虚拟健身VR耳机,灵感来源于运动鞋,采用高强度训练制成。HTC发布了一份官方声明,确认Vive Air目前仍然只是一个概念产品,据此前消息这款耳机可能会在5月11日至12日举行的Vivecon 2021上发布。

  • QingStor 对象存储架构设计及最佳实践(下)

    作者:对象存储研发团队5. 海量小文件优化实践接下来谈谈 QingStor 对象存储对海量小文件场景的优化。为什么需要对海量小文件进行优化呢?海量小文件是很多存储产品中都是比较难以应对的问题,其难点主要体现在几个方面:第一,小文件非常多的时候,会导致很多随机读写,相比于顺序读写,随机读写的性能会差很多。第二,小文件在底层资源利用率比较低。如何理解?小文件最终存储时落到磁盘上,大多数时候底层都是采用文件系统存储?

  • 腾讯一项名为“游戏手柄”的外观设计专利公开

    今天腾讯一项名为“游戏手柄”的外观设计专利正式公开,这个手柄专利详细信息显示,本外观设计产品用于游戏娱乐。

  • 杭州亚运会发布引导标识,大鹏教育带你分析这些设计

    近日,杭州亚运会发布了引导标识。引导标识对场馆进行了功能的分区,能帮助观众快速找到看台和座位。可以说是控制人、车流线管理,加强赛会景观和气氛营造的必要工具。今天,大鹏教育就带大家一起分析这些设计,希望对你的设计灵感有帮助。大鹏教育,学我想学,找到生活的热情杭州亚运会这套标识系统是由中国美术学院设计艺术学院视觉传达系教师团队领衔设计的,在色彩上与亚运会主色调“虹韵紫”一致。这套标识系统的基础元素设计

  • 热门标签