欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

10个实用小技巧,让你的设计细节更高级

发布时间:2018:03:21 13:29:40 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1211个文字,预计阅读时间4分钟
导语
本文记录了国外大神在工作中对于一些UI细节的经验总结,仔细阅读,相信会有一些收获!

  本文记录了国外大神在工作中对于一些UI细节的经验总结,仔细阅读,相信会有一些收获!本文共计3029词,阅读大约需要10分钟。

  以下是译文全文:

  我猜想我们大多数人都是从了解一点UI,或者根本不了解的情况下开始从事设计的。但即使开始时我们并没什么优势,我们仍然想方设法的通过众多设计书籍和文章来了解颜色,排版,布局等方面的知识。因此,在本文中,我将分享我从不同设计师那里学到的和在设计用户界面时学到的东西,还包括我自己的一些新发现。声明:以下的“不好的”示例并不一定意味着它们是错误的。这只是我们从良好的设计方案改进到更优秀方案的基础。

  1. 让重要的文字更加突出

  当文字需要分清层次结构时,单纯使文字变大来强调通常不能解决问题,就像下面的问题一样:

  

10个实用小技巧,让你的设计细节更高级

 

  文字的层次结构不只是小和大的关系,它需要文字在大小、字重和颜色三个方面进行正确的组合,形成对比,对比度越大越好。(译者注:我认为对比度也不能太大,合适即可。)

  

10个实用小技巧,让你的设计细节更高级

 

  那么如何设计更好的对比呢?

  1、不要使用一种字重不同字体大小的方式来建立对比和层次。

  2、相反,把主要内容加粗加深,把次要内容变细变淡(不太重要的)。

  3、创建三种不同的文字颜色,从深色到浅色(参见下面的示例)。通常我使用我设计的基础颜色作为正文文字颜色。

  4、不要害怕使用大的字体比例(例如:24px标题、16px正文、10px标签等)。更大的字体比例=更好的对比。

  5、打开网站Modularscale在线计算器可以用来创建更好的字体层次。

  记住,对比度=大小+字重+颜色。

  6、最后,一定要回头再检查下它的对比。可以使用这个计算器来检查它的可读性。

  

10个实用小技巧,让你的设计细节更高级

 

  上图是我常用的基本色,我把深色用来做大标题,把浅色用来作为辅助内容。

  2. 不要使用多种复杂的颜色值

  不要在你的颜色选择器上下移动,只是为了选择一些深色色值,这样做会让你的工作变得复杂。

  我们都知道使用黑色文字颜色(#000)会给读者眼睛造成疲劳,因此我们的替代方案是用比较暗的颜色。使用不同透明度的黑色作为解决方案,而不是去用复杂的十六进制颜色值。

  

10个实用小技巧,让你的设计细节更高级

 

  在我上面的实例中,我使用黑色作为主要颜色(#000),并根据其应用的位置(如主要内容,次要内容等)降低其透明度。

  3. 用数学方法理解颜色

  我们大多数人都会喜欢合适的颜色组合,每当我们看到一个精彩的配色时,我们都会问自己:“他们是怎么做到的?”(就像下面的那幅图)

  

10个实用小技巧,让你的设计细节更高级

 

  图片来源: momoandspirits

  直到我了解到,理解色彩不仅仅是对那些从一开始就有设计天赋的人,在色相,饱和度,亮度(HSB)上做简单的加减法也会达到一些神奇的效果(我们将使用HSB代替RGB)。你可以轻易的就摆脱单调的白色背景,把它变成像毕加索的作品一样,就像下面的例子:

  

10个实用小技巧,让你的设计细节更高级

 

  那么HSB的加减法在哪里体现呢?

  

10个实用小技巧,让你的设计细节更高级

 

  理解两种颜色模式的方法

  实际上有两种方法,我们可以看到,两个选项都有相同的基础颜色#B9F4BC(圆圈背景),但在文件夹和条带颜色上有不同。在我们开始的时候,请记住第一个数字对应于色相,其次是饱和度,最后是亮度。

  选项A

  

10个实用小技巧,让你的设计细节更高级

 

  选项A

  在选项A中,我们可以看到色相值123在全部形状(圆、文件夹、条带)上始终未变,而饱和度和亮度则都发生了变化。

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:如何输出一份专业优秀的交互文档?

下一篇:中后台产品的表单设计,看这一篇就够了(附原型规范)

  • 18893 文章总数
  • 2300035访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信