广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

19年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

提高设计美感的 7 个小技巧--深圳网站设计公司
发布日期:2024-11-12 09:00:03 浏览次数: 813 来源:肯尼全媒体


提高设计美感的 7 个小技巧


1. 利用颜色和粗体来创建层次结构,而非使用字体大小


对于文本样式的设计,最常犯的一个错误就是依赖字体大小来控制层次结构。

我们很常听到这样的要求:

「这段文字比较重要,加大字体!」

记住,不要过于依赖字体大小,而是尝试使用颜色和字体粗细来完成相同的工作。

尝试使用三种以下的颜色进行设计:

  • 主要内容用黑色(如文章的标题)

  • 次要内容用灰色(如文章发表日期)

  • 辅助内容用浅灰色(如页脚中的版权声明)


同样,两种 font weights 足以适用于大部分 UI 设计了:

  • 大部分文本的正常粗细值(400 或 500,取决于字体)

  • 更粗号的字体(600 或 700)用于您要强调的文字

用于网页展示的一般不小于 400,他们更适合大标题,较小尺寸下阅读会很不舒服。

当然,对于那些不重要的文本(比如电影海报下的出品公司等),可以改用较淡的颜色或者较小的字体。



2. 不要在彩色背景上使用灰色字体


白色背景上使用浅灰字体是个淡化文本的好方法,那是因为降低了字体与背景的对比度。但灰色字体并不适用于彩色背景。

正确的方式应该是找寻接近背景色的文本颜色,这样才有助于创建层次结构。


两种方式:

  • 降低白色文字的不透明度

    这样可以让背景颜色「渗透」进字体,同时又不会和背景有颜色冲突


  • 挑选与背景颜色相近的字体颜色

选择与背景色调相近的颜色,并调整饱和度和亮度使其与背景更融洽。当文本背景包含图像或者其他非颜色元素时,这种方法更好。



3. 正确使用阴影


阴影效果并不是采用一大块模糊效果去仿制,而是正确地模拟现实世界中光源照射的情况。

阴影效果的设计推荐阅读『Material Design Guidelines』



4. 不要频繁使用边框(border)


当你需要进行分割操作时,尝试使用留白来创造边界感。

边框当然是区分两个页面元素的好方法,但它并不是唯一的方法,而且频繁使用边框会让页面显得很复杂凌乱。

下次可以试试这样:


  • 使用框型阴影

同样能达成效果的操作,却不容易分散用户的注意力


  • 使用两种不同的背景颜色

通常相邻元素的背景颜色略有不同就有明显的区分效果了


  • 添加更大的间距



5. 不要使用过大的图标


如果你正在使用像 Font Awesome 或者 Zondicons 这样的免费图标集,而且你设计的东西需要使用大图标,比如 landing page 的功能部分,那就需要注意了。

虽然矢量图像在放大尺寸时并不会降低图像质量,但是放大尺寸后的缺乏细节却无可辩驳,这会显得你很不专业。


如果你只有小图标,尝试将其放在另一个包含背景颜色的形状中,会更合适。

这不仅能保持原有图标处于最合适的尺寸,也能适配更大的页面。

当然,最好的方法是使用大尺寸高级图标集,如 Heroicons 或 Iconic。



6. 使用颜色边框丰富设计


提升设计美感的很讨巧的一个办法就是,给页面添加色彩鲜明的边框。

比如警告消息:


比如导航栏标签:


再比如整个页面的顶部也是可以的:



7. 并非每个按钮都需要背景颜色


其实当页面有多个可执行操作时,要注意语义设计动作带来的心理暗示。

像 Boostrap 这样的框架就会提供语义样式的菜单按钮:


比如积极语义可能就会用绿颜色按钮,而删除数据一般采用红色按钮。

语义是按钮设计的重要组成部分,但是层次结构依然是一个重要的维度。

类比金字塔结构,大多数页面通常只有一个主要操作,一些不太重要的次级操作,以及其他很少使用的三级操作。

设计这些动作时,在层次结构中传达他们的位置很重要。

  • 主要动作应该最明显。可以使用实心,高对比度的背景色。

  • 次级动作应该明确但不突出。轮廓样式或低对比的背景色是很好的选择。

  • 三级动作应该是可以被发现但不显眼的。设计为链接样式就足够了。


对于破坏性动作,是否应该都用红色呢?

这得分情况了。

如果这个动作不是页面上的主要行为,那么采用二级或三级的设计模式可能更恰当:


当这个动作是主要行为时(比如在确认对话框中),那么就应当着重强调:

优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!