当前位置:首页>ps入门教程>ps基础教程>设计知识>教程内容

实用UI设计法则(下)(3)

来源:medium 作者:36kr 学习:4840人次

Ubuntu(上图)——字体偏粗,对于有些 app 来说太张扬了,但是对于大多数 app 来说还是不错的。在Google Fonts(www.google.com)上可以找到。

实用UI设计法则(下)

Open Sans——非常易于辩读,是一款很流行的字体,用在正文非常合适,在Google Fonts(www.google.com)上也能找到。

实用UI设计法则(下)

Bebas Neue——适合作标题,都是大写字母,在?Fontfabric?(http://fontfabric.com)上能找到,这个网站上还有一些 Bebas Neue 的应用实例。

实用UI设计法则(下)

Montserrat——只有两种粗细,但也足够了。是 Gotham 和 Proximate Nova 最好的免费替代品,但不如那两种好。在Google Fonts(www.google.com)上能找到。

实用UI设计法则(下)

Raleway——适合作标题,但不适合用于正文。有一个极细的版本(上图没有展现),在Google Fonts(www.google.com)可以找到。

实用UI设计法则(下)

Cabin——在Google Fonts(www.google.com)可以找到。

实用UI设计法则(下)

Lato——在Google Fonts(www.google.com)可以找到。

实用UI设计法则(下)

PT Sans——在Google Fonts(www.google.com)可以找到。

实用UI设计法则(下)

Entypo Social——一个社交网络图标集,在Entypo.com上能找到。

这里还有其它一些资源:

Beautiful Google web fonts——有Google Fonts的运用实例,我经常在这里找灵感。FontSquiirrel——收集了不少可以免费商用的好字体。Typekit——如果你用Adobe Creative Cloud(也就是用Photoshop或Illustrator等),你就可以从Typekit中获得包括Proximate Nova在内的大量字体。

法则7:像艺术家一样偷师

我第一次坐下来试着设计按钮、图标、弹窗等各个 app 元素时,我感到我对于什么是“好”知之甚少。但是我也很幸运,我并不需要完全设计全新的 UI,因为有很多优秀的作品可以借鉴。

下面列出一些资源,肯定会对你的设计非常有用 (按照重要性从高到低排列)

1. Dribbble

这个专为设计师而做的网站集合了网上最好的 UI 设计作品,在 Dribbble 上你能找到几乎各种类型的案例。

你可以关注一下我的dribbble作品集(https://dribbble.com/erikdkennedy)。下面是其他一些推荐给你关注的人:

Victor Erixon:

有着非常明显的个人风格,非常厉害。他的作品很漂亮、简洁,扁平设计。他做 UI 设计师已经 3 年了,是这方面数一数二的人才。

实用UI设计法则(下)

Focus Lab

这些人是 Dribbble 中的名人,他们的作品非常多样化,绝对是一流的。

实用UI设计法则(下)

Cosmin Capitanu

他是个通才,做出来的东西很疯狂,有未来感,但又不太花哨。他用色非常棒,但并不只专注做 UX 设计的。

实用UI设计法则(下)

2. Flat UI Pinboard

这里面有一些特别棒的手机 UI 设计,你能找到很多精美的 UI 设计实例。

实用UI设计法则(下)

3. Pttrns

这里面有大量 app 截屏,它的一大好处在于,它是按照 UX 模式分类的,因此,你在搜索你手头正在做的这一类作品时非常方便。

实用UI设计法则(下)

我坚定地认为每个艺术家初期都该像鹦鹉一样,不断的模仿和学习,直到能把顶尖的作品模仿得惟妙惟肖,然后再开始找到自己的风格,引领新的潮流。

所以,像个艺术家一样偷师吧!

想偷得好,还得有技巧呦!

总结

我之所以写这篇文章,是因为我很遗憾自己当初在学 UI 设计时,没有这样的教程。我希望这篇文章能帮到你。如果你是一名 UX 设计师,在画好框架和线框图之后,做出个漂亮的实物模型吧。如果你是一名开发者,把你下一个项目做得更美观一些吧。

UI 设计的学习不可能一蹴而就,而是需要不断地观察、模仿并且和他人交流。以上是到目前为止我所学到的,我也会保持着初学者的心态,继续前进。

学习 · 提示

  • 一定要打开PS,跟着教程做一遍,做完的图到这交作业:提交作业
  • 建议练习时,大家自己找素材,尽量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到论坛发帖提问:新手求助
  • 加官方微信,随时随地,想学就能学:ps_bbs,或扫右侧二维码!
  • 关注我们学更多,每天都有新教程:新浪微博 抖音视频 微信小程序
- 发评论 | 交作业 -
最新评论
暂无评论,交个作业支持一下吧~

关注大神微博加入>>

网友求助,请回答!