?? UI设计的7条“规则”【二】- 设计教程- 福建站长站 潮汕一霸
福建网址 | 会员中心 | 我要投稿 | RSS
您当前的位置:首页?>?设计?>?设计教程

UI设计的7条“规则”【二】

时间:2014-12-03 21:15:35??来源:ui.cn??评论:

大家翘首以盼的下篇新鲜出炉啦!不过,推荐你先看一下上篇哟。

我们谈论的这些设计规则适用于那些未受过艺术教育的人,只要把握好这几点,同样能够设计出简洁干净的界面。

规则如下:

1.让光影自然

2.层次优先

3.充分留白

4.学习在图片上添加文字

5.使用多种文本样式

6.选择适合的字体

7.像艺术家一样寻找灵感

第四条:学习在图片上添加文字

要做到完美的图文并茂,我只有五条好上手的方法,现在都教给你。另外,还可以再送你一条小窍门。

如果你想成为一个优秀的UI设计师,你肯定得学会如何在图片上添加文字,并且它们变得更加吸引人。关于这一点,每一个优秀UI设计师都可以做得非常好,但是一般的UI设计师就差一点——或者根本就做不到。也许你做的真的很差,但是你掌握了我教你的这些方法之后,你就会有很大的进步。

方法一:直接把文字放在图片上

虽然我很不喜欢这种简单粗暴的方法,但是它确实是一个在技术上很容易实现的方法,而且看上去也不赖。

网页设计 潮汕一霸设计教程 UI设计 如何设计潮汕一霸

Otter?Surfboards 看起来时尚,值得收藏,但是阅读上有困难。

这种方法有必要的使用条件:

1.图片要暗,而且不能有太多的对比色。

2.文字必须是白色的——我估计你可能会努力地找同样简洁的反例,但是这种例子真的太少了,真的。

3.给和屏幕一样大小的图片上加文字的时候,应该把文字居中放置,这样可以保证它的易读性。

学会了吗?非常好。千万别擅自更改规则,现在你已经入门了。

我做专业项目的时候,从来不会像这样简单粗暴的直接把文字摆在图片上,即使它真的是一个非常好操作的方法。也就是说,还可以有更好的方法,但是会更难。

网页设计 潮汕一霸设计教程 UI设计 如何设计潮汕一霸

Aquatilis——非常值得参考的潮汕一霸

方法二:给图片加一个通透的颜色图层

最早在图片上加文字的方法应该就是 给图片加一个通透的颜色图层了。如果原始图片太亮了,你可以试着给整个图片加一个半透明的黑色图层。

这有一个流行的例子以供参考:

Upstart潮汕一霸在 图片上面加了一层35%不透明度的黑色图层。

如果你使用Firebug(一款火狐浏览器插件)移除黑色覆盖层,你可以看到原始的图片非常亮,而且图片和文字在颜色方面有太多冲突,这些都让文字变得很难阅读。但是如果加上覆盖层,一切的问题就都消失了。

这个方法对小图同样好用。

来自于charity:water潮汕一霸的小图

另外,虽然黑色的覆盖层非常好用,适 用的图片范围也很广,但是你也可以尝试去使用其他颜色的覆盖层。

方法三:给文字加一个底色块

这个方法非常简单也非常好操 作——在一个大小适中的黑色矩形框上添加白色的文本。如果你的覆盖层和文本颜色的对比度足够,那你也可以直接在图片的下方添加文字。

Miguel?Oliva?Marquez设计的 Modern?Honolulu在iPhone上的客户端。

你也可以加点颜色,但是要加的恰当。

Mark?Conlan设计的Now?in?pink

赞一个
返回首页
返回首页
上一篇:提升用户体验:从情景出发的可用性设计 下一篇:UI设计的7条“规则”【一】

最新图文
为什么你爱用的 App,都用卡片式设计?
为什么你爱用的 App,都用卡片式设计?
探探和 Linkedin 都在用的卡片设计,怎样才给你好的体验?
探探和 Linkedin 都在用的卡片设计,怎样
站长推荐