潍坊UI培训
达内潍坊中心

18300268127

热门课程

设计黄金法则

  • 时间:2017-11-29
  • 发布:达内UI
  • 来源:互联网

    01. 决定项目目标

    设计性优秀的模版,需要从明确理解这个项目是什么样的开始。当你在Google Font或Typekit等网站寻找字体之前,先问问自己以下几个问题。

    项目面向的是怎样的目标层。

    用户会怎样对待这个设计。

    转换点是什么。

    这个项目适合怎样的氛围,心情。

    我需要和其他的设计、品牌相匹配吗。

    这些答案将帮助你构建你正在寻找的框架。 (这是设计项目中字体意义和氛围的指南。 )

    02. 试图找到相同的形状

    设计复数的字体组合时,字体的形状细节会影响设计的的好坏。那么,你应该如何进行正确的选择?

    首先寻找相似形状的字体吧。让我们仔细研究每种字体是圆形还是椭圆形,粗或细,高或短,对角的还是倾斜的。

    选择要用于标题和正文的字体后,将同样形状的辅助性字体组合在一起。

    让我们来确认一下各种字体的小写「o」吧。内测是圆形还是椭圆形?将[o]形状相同的字体组合在一起。

    粗的字体和细的字体在组合是没有任何问题。将粗体字或细体字与普通的字体组合在一起是个不错的想法。

    选择x字高(英文:x-height)相同的字体。

    不用担心混合各种字体风格。衬线和无衬线字体的组合也可以尝试。如果选择了一格复杂的字体,另一种字体选择简单点的会比较好。此外,使用最频繁的地方,如正文,我们还是选择一个简单的字体方便阅读。

    小心字体的倾斜度 (这时、你可以确认「o」内部的圆形。)使用多个斜体或相反方向倾斜的字体对可能会给用户的阅读带来不适,应该避免。
达内UI
    03. 为了改变尺寸设定字体的规模

    字体的粗细,尺寸是决定项目的好坏的因素之一。文字的尺寸过大会让视线停止,让人无法自然的阅读。另外,文字尺寸过小则会导致视觉疲劳,用户或许会从设计作品上移开视线。

    通过正确的设定字符大小,用户可以在内容上自由的移动。

    合适的文字尺寸是:和项目中各种各样的尺寸相对应。正文是一种,标题或小标题等有着各种各样的尺寸。这些尺寸和使用方法,必须保证在设计内具有一致性。

    通过注意以下几点,用户会更容易阅读内容。

    文字内容的尺寸,可以根据情报的重要程度来确定优先顺序。字体越大内容越重要,占用用户视觉范围的可能性就更高。

    通过缩小文字的尺寸,可以让文本阅读速度更快,能让用户用更短的时间确认内容。

    内容相关的项目使用同一种设计,让我们一起来看一看吧~

    较大的文本元素,如小标题等,可以通过分割长句来更使其容易阅读。

    04. 设置留白空间

    这种技术本身与字体无关,但是在选择字体时,设置留白的方式也很重要。

    字距,行距,跟踪,填衬这些方法,能表现出字体的美感,也有可能将他们弄的乱七八糟。

    适当运用的留白,如同对待艺术一样。由于它还取决于在实际项目中使用的字符、字体等的组合和大小,所以必须根据需要压缩字符,没有一个具体的规则。

    05. 尝试左对齐

    和其他语言一样,用户在阅读英语、日语、中文的时候,都是从左往右移动视线的,所以理想的优化主体内容可读性的方法是左对齐。

    如导航标题和Hero Header,一些文本本身就很容易阅读,所以您不必将它们对齐到左边。而对于长句子来说,您应该将它们对齐到左边。(你也可以考虑居中,但这时我们就需要注意是否会引起留白问题的可能性了。)

    06. 选择两种字体

    也许这个规则可能已经被许多人所知,让我们在设计项目中使用了两个字体吧。

    虽然很多时候都有提到,但实际上并没有太多的设计师关注这个规则。如果去确认网站或组合,可以看到有很多使用独特字体组合的项目。

    当打破这个规则的时候,我们再多想想。通过添加另一种字体,怎样才能变得更好?相反,再次检查当前选择的字体,看看是否可以用该字体的另一种样式:如粗体、细体、斜体来解决。

    07. 字体原本的设计不应该被修改

    不要去伸展,扭曲,或倾斜你的字体。如果您需要不同的字体,请尝试选择其他方法。

    字体设计师,花费了大量的时间来做一款好看的字体。如果更改字符的形状,将会损害字体的可读性。如果使用比原始尺寸更大的尺寸,放大照片时设计将会变得模糊不清。

    08. 尝试使用大量的对比

    设计师饱受困扰的一个工序是,如何在图片或背景上配置文字。这是为了区分文字内容使其更容易阅读,元素间的对比足够高的情况下才能发挥效果。

    当给文字添加阴影时,不一定会获得足够高的对比。通过调整亮度,可实现轻松阅读的对比,也有助于将普通的风格变得厚重。

    当然,也不是说只有这一种方法。有些情况下,照片中既有亮也有暗的地方的情况下,你就可以利用粗体字或细体字形成对比。

    让我们考虑选择附加文本,选择较厚的字体,并尝试在照片上叠加颜色。所有的技术都是为了突出了对比,使文本更具可读性。(此外,文字和照片的布局根据屏幕大小而变化的响应式设计,也倾向于保持对比。)

    09. 不要忘记移动端的排版

    关于网站排版的问题,移动终端的可读性是最重要的一个课题。给文字添加图案或纹理这种有趣的技术,尽管在某些桌面屏幕上进行打印或显示时不会出现问题,但对于小型设备来说效果并不理想。

    考虑这个字体该用在什么地方是必要的。(让我们根据前面介绍的字体样式比例规则3来决定每个大小屏幕的字体规格吧。)

    对于移动终端来说,字体看起来会略大一些,所以让我们把字体间距做得比桌面宽一点。通过这样做,可以有效减少用户不喜欢的移动操作,例如在阅读短句时多次滚动显示。

    10. 参考风格指南。

    当您决定要用于项目的字体想法时,让我们创建一个总结所有用法和规则的样式指南。

    首先,如果您复制了设计材料,在网页上请将其移至易于访问的位置,并在您要更改设计时使用该位置。

    完美的字体设计的关键是,统一性(英:Consistency)。

更多达内UI相关资讯,请扫描下方二维码

达内UI

上一篇:视觉设计师的定义
下一篇:404预防

马上预约七天免费体验课

姓名:

电话:

初出茅庐该怎样让自己能够快速成长

你刚安装Ps需要做的设置

日常工作中,UI设计师一般要做的事

学UI 入门阶段到底要掌握什么

选择城市和中心
贵州省

广西省

海南省

达内教育

有位老师想和您聊一聊