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

干货!改善网页设计的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

举报

  • 相关推荐
  • AI网页版扎堆上线,华为、理想、OPPO们打的什么算盘?

    一切为了「多终端一致体验」和「用户数据闭环」。过去三年,大模型带来了对话式 AI 的全新体验,也带来了一股 Web 产品的复古潮,就连诞生于移动 APP 时代的字节跳动,都给「豆包」开发了网页版。事实上,目前几乎所有主流大模型,都开发了自己的网页版来提供大模型的对话服务。但手机厂商甚至汽车厂商,为什么也要「不务正业」开发 AI 助手的网页版?这几天,有网友�

  • 一加13s上架印度官:小屏用户的梦中情机

    一加13T手机在印度官网上架,但官方尚未公布具体发布时间。该机型对应国行版一加13T,是一款小屏旗舰手机,提供粉色和黑色两种配色,国行版另有灰色可选。配置方面搭载骁龙8 Gen3平台,配备6260mAh大电池、LPDDR5X内存和UFS4.0闪存,重量仅185g。新增游戏相机功能,支持30/15秒一键回录和3秒实况游戏截图,无需提前开启录屏。首发支持《原神》原生120帧+1.5K同开,开启超级帧率+HDR画质后仍可稳定运行。

  • 苹果AI广告具有误导性:苹果官网页面紧急调整

    苹果官网近日移除了Apple Intelligence页面的"Available Now"标识。此前广告监管部门NAD认定苹果AI广告具有误导性,因未说明部分AI功能仅限iPhone16系列使用。苹果证实将推迟发布新一代AI语音助手Siri,预计明年推出。新版Siri可访问用户邮件、消息等数据,但开发进度慢于预期。据悉苹果内部对AI进展不满,CEO库克已调整管理层,由Vision Pro负责人Mike Rockwell接管Siri业务。

  • 北京大上科技发布全球首款37Hz的13.3英寸彩色电子纸显示器——Paperlike 13K

    北京大上科技发布全球首款13.3英寸37Hz超高刷+3K超高清彩色电子纸显示器Paperlike 13K彩屏版。该产品采用新一代E Ink彩色电子纸屏幕,分辨率达3200×2400(300PPI),支持37Hz超高刷新率,画面流畅度媲美液晶屏。内置X-Color Filter原色增强算法和抗抖算法,显著提升色彩饱和度。配备自动清残影技术,提供网页/文本/图文/动态四种显示模式。产品兼顾护眼与高效体验,4月25日首发即引发抢购热潮,标志着电子纸显示技术进入"超高刷+超高清"新时代。

  • 麦德通干货分享 | 商标“申请在先”还是“使用在先”?

    正确理解和运用商标法中的“申请在先”与“使用在先”原则,对于保护企业的知识产权至关重要。两者有何不同呢,本文麦德通带大家来共同探讨!1、“申请在先”和“使用在先”的不同定义商标注册一般采用“申请在先”和“使用在先”的原则。商标申请在先:是指在相同或近似的商标申请中,谁先申请商标注册,谁就享有商标专用权,无论使用先后。假设有两个或者两�

  • 竟找不到一台打游戏好的小屏手机!李杰:一加13T来管管

    一加13T将于4月24日14:30发布,主打小屏旗舰体验。配备6.32英寸1.5K直屏,采用自研显示科学产线和P2显示芯片技术,屏幕素质行业顶级。搭载骁龙8至臻版处理器和自研风驰游戏内核,安兔兔跑分达303万,支持120帧+1.5K画质游戏体验。内置6260mAh冰川电池,首创小屏手机6000mAh+容量,同时保持185g轻薄机身。李杰表示,目前国产手机中只有OPPO/一加能打造如此顶级的小屏手机屏幕。

  • 华北将出现罕见持续性大风:局地阵风可达13

    据报道,我国将迎来一次大范围极端天气过程。中央气象台4月10日6时发布大风黄色和沙尘暴蓝色预警,中国气象局随即启动重大气象灾害三级应急响应。此次极端天气过程影响范围广、强度大,建议各地做好防风防沙、防寒保暖等应对措施,确保人民群众生命财产安全。

  • “荣昌猪小伙”13年后与谭sir重逢:称从未放弃过自己的初心

    重庆小伙马仁元13年后与曾因交通节目结缘的谭乔警官重逢。13年前马仁元因边骑三轮边看手机被谭警官拦下,在节目中他不仅宣传家乡荣昌猪,还表达了将荣昌产品推向世界的梦想。如今他仍在坚持这一梦想,虽经历困难但从未放弃初心。这次重逢不仅延续了两人友谊,也展现了坚持梦想的力量。马仁元的故事告诉我们,只要有梦想并为之奋斗,就一定能实现人生价值。

  • 小屏大魔王来了!一加13T官宣本月发布

    一加今天发布整活”视频,正式宣布一加13T本月发布。官方称其为小屏大魔王”,号称是又小、又美、又强。爆料还称一加13T将会是定价最低的骁龙8至尊版小屏旗舰,目前相近尺寸的机型普遍都在4000元以上,一加13T有望压低到4000元以内。

  • 国内设计类素材站有哪些?免费AI简历生成站推荐

    站长沙素材(sc.chinaz.com)是站长之家旗下专业设计素材平台,提供海量免费资源下载。主要功能包括:1. 丰富设计素材(图片、网页模板、PPT模板、音视频素材、商用字体);2. 实用在线工具(图片/视频/音频处理、字体生成);3. 专业设计开发教程(PS/AI/Sketch、编程语言等);4. 严格版权审核确保素材合法使用。平台特色:界面简洁、搜索高效、资源定期更新,注册用户可享收藏和历史记录功能。适合设计师、开发者等创意工作者获取资源提升工作效率。