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

超全面!UI设计中的字体配色方法总结

作者: 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含UI配色,经验分享,配色理论等相关知识,希望在学习及工作中可以帮助到您

王M争: 今天来给大家分享产品设计中文字配色的一些知识点。要给文字配色,首先我们要知道你的产品(界面)中有哪些文字。在这里,我将产品中的文字主要分为以下四种:标题类、正文类、提示类和交互类。

标题类

首先来说标题类,标题,顾名思义要让用户在短时间内了解界面的大致内容,讲究简洁明了。在app中,标题类一般有的顶部栏标题,底部栏标题,列表标题、表单标题等。

给标题类文字配色相对来说比较简单,选项比较少,我们一般只会使用深灰色或者企业色。因为标题虽然很重要,但是也不能过于抢眼。

而根据重要性程度我们可以把标题分为不同的等级,一般来说,层级越低的标题颜色越浅。深浅的搭配可以给你的界面带来意想不到的效果。

例如,微信中的好友列表和聊天界面中,用户名和聊天记录的文字颜色深浅正好是反过来的。这个其实也很好理解,好友列表中用户关注的是好友是谁,而到了聊天界面用户更关注的是好友说了什么。所以这里用深浅不同的文字来帮助用户加以区分。

我们可以看下使用同样的配色的效果,感受一下不同。

我不太建议给标题使用企业色,因为你要调整企业色的饱和度来区分不同的等级,个人觉得这样不太合理。

此外如果标题体系过于繁杂,仅从颜色深浅已经无法让用户从视觉上进行识别。我们还可以用字号来帮助完成区分,事实上现在大多数产品都是通过字号的不同来完成等级区分的。

正文类

正文类文字是给用户提供详细说明和解释的,正文类文字要比标题类要浅一些。一是因为用户对于正文都不太感兴趣,很少去读,我们没有必要在这里使用配色来吸引他们的注意力。其二,因为正文字数一般比较多,过于花哨的配色会使整个界面显得凌乱,造成主次不分。

提示类

提示类文字顾名思义就是要给用户以引导和提示。这个就意味着提示类文字要足够的显眼,如果用户都注意不到你,还怎么提示呢?

提示类文字一个主要用途就是给用户展示当前的状态。

我们来设想一个场景,你在一个理财平台上购买了一款理财产品。不同的时间段会有不同的状态。你看到这款理财产品收益率不错,投了3000元,这时的状态是“确认中”;过了几天这个产品开始起息就进入了“起息中”状态;又过了一段时间,你临时有事急需要用钱,就把产品转让给别人,又会依次进入“转让中”和“转让成功”。不同的状态我们在设计上给用户加以区分来帮助用户进行更好的识别。一般常见的方法就是使用不同的配色来进行区分,但是这个是适用于产品状态较少的情况。如果你的产品状态过多,每一个状态都配以一款颜色的话,那么整个界面就会显得很乱。

最常见的状态就是成功和失败,一般来说在用户心中都默认为绿色和红色了。当然现在把企业色作为成功也很常见。这里就会出现一个问题,如果你的产品主色调恰好是红色,这个时候就可能会引起用户混淆。

交互类

接下来,我们来谈谈交互类文字。交互类文字,简单来说就是能够让用户完成点击操作的文字。交互类文字设计的首要目标是让用户觉得你的文字是可以点击的。主要的办法有三个:

1.使用配色

目前来说用户觉得带有颜色的字体都是可以点击的,比如企业色。

当然如果你觉得界面中企业色出现的过于频繁,你还可以使用蓝色。蓝色在配色领域绝对是万金油型的,不管你的产品界面主色系是什么,用户一看到蓝色文字就会明白是可以点击的。

2.icon

文字加icon的组合也可以让用户产生点击的欲望。以知乎为例,左边的帖子用户只能看到答者和内容简介,这里的点赞和评论都是纯文字,用户无法直接进行点赞,但是点击进去以后,是icon和文字的样式,这里用户是可以直接进行点赞,评论,打赏和收藏。

ps.大家有没有注意到上面我只提到不能点赞,没说不能评论,其实是可以评论的。知乎里一个帖子的字数都是比较多的,用户只看到简介就点赞或者评论没有什么意义。后来我又去看了简书,发现简书是不支持用户在没有看完文章的情况下就支持点赞和评论的。

所以我不知道知乎这么做是出于什么考虑,反正我是没弄明白。

3.行为召唤语句

我们会遇到一些情况,不能使用配色,也不能使用icon样式。例如,登录界面中,我们希望用户的注意力在登录按钮上,所以下方的“忘记密码”和“快速注册”我们要进行弱化。弱化了还能让用户认为你是可点击的吗?当然可以,只要你的文字行为召唤一点,多使用动词就可以了。

交互类文字和按钮

其实我一直觉得设计师应该对每一个设计组件(元素)都做到充分了解。因为设计师的工作就是把那些元素以一种合理的方式放在一个界面(画布)里。所以你必须要了解他们。这里给大家推荐一个网站设计组件,里面一些基本组件都有。

回到主题上来,交互类文字和按钮其实有很多共同点。首先它们都支持点击跳转,也都可以展示状态的切换。交互类文字与按钮相比更加的轻量化,适用于极简风格设计。但是按钮也有自己的优势,按钮可以展示复杂的动效。

欢迎关注作者的微信公众号:「王M争」

================明星栏目推荐================

优优教程网: UiiiUiii.com?是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao..com

优设大课堂

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

  • 浅色还是深色?教你选择合适的界面配色方案!
  • UI配色这件事情,可以指望这6个实用技巧
  • 讲真,这可能是目前最全的在线配色工具合集了
  • 学会给配色做减法,让你的设计更加高端!
  • 超全面!UI设计中的字体配色方法总结
  • 看似简单的单色配色,需要这些技巧帮你玩转
  • 在配色这件事情上,总会有一些有趣且有用的小技巧
  • 这5个色彩进阶技巧,能帮你创造更优质的网页用户体验
  • 看过那么多UI 配色指南,这篇可能是最全面的(附大量实例)

相关文章

  • 2018-08-23想做好产品功能,不妨试试这个「亲亲原则」
  • 2018-08-23UI新手必备!iOS+Android的切图与标注方法
  • 2018-08-23用AE做的动效,都能在App中实现了?
  • 2017-08-065个响应式设计不值得搞的原因(图文)
  • 2018-08-23用标签代替文件夹!教你更高效的图片素材管理术
  • 2017-08-06引入CSS的方式有哪些?link和@import的有何区别应如何选择
  • 2018-08-23想要做好用户调研,你要学会这九种定量用户研究的方法
  • 2018-08-23免费下载!谷歌携手Adobe推出超好看的的思源宋体(7种字重)
  • 2018-08-23不懂服务设计?看看它的演变历史你就知道了!
  • 2018-08-23让PM无言以对!可能是最专业的交互设计流程

文章分类

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

最近更新的内容

    • 网易云音乐产品负责人:如何做好用户研究的?(上)
    • 想成为UX 设计师,该学习哪些很重要的技巧?
    • 腾讯的设计到底好在哪?高手是从这3个维度分析的!
    • 固定在网页右侧的浮动层实现代码
    • 超全面的移动端顶部栏设计分析
    • 顶尖高手的经验!Facebook的产品设计师是如何思考的(二)
    • 让APP中内容呈现更友好易用的5种常见导航设计模式
    • 前端性能优化—前端工程师不得不说的痛
    • 你知道url中的特殊符号含义么(比看篇)
    • 没经验没思路?最常用的电商Banner 设计方法都在这

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

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