恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
打造出色 UI 的 7 个法则(上)
0.0°
2018-07-18 好文转载 经验/观点 原作者: 赖信涛 举报 1021 3 2 0

这篇文章不是理论研究,只讲实际的应用。文章里不会出现黄金分割,也不会提什么色彩理论,只有我从失败和不断的磨练中学到的东西。

学习是十分困难的,因为自己在没有基础的情况的很难找到一套系统的学习流程,一些设计当中的设计思维和注意事项你也不知道,所以有对UI感兴趣,想做这一行的朋友,应该要选择一个好的网络课程或者来实体班培训,很多网络言论对培训评价很低,这种一棒子打死一群人的看法是错误的,就好比一些言论说专科大学与本科大学能力是一样的,机会靠自己把握,不要让时间消磨了自己的爱好

序言

首先,明确一点,这篇文章并不适用于所有的人,而是为以下人群准备的:

那些想要在开发产品时设计出好看UI的开发者。 想要让自己的作品集更出彩的UX设计师,或是想要做出更精美的UI和UX的设计师。

如果你上过艺术学校,或者已经是一个UI设计师了,你可能会觉得这篇文章比较无趣,而且观点都是错的,甚至会让你感觉不舒服。没关系,你的批评没有错,把网页关掉继续做你的事吧。

我曾是一名不懂UI的UX设计师,我喜欢设计UX,但是没过多久我便意识到做出精美的界面是多么有必要:

我的作品集看起来很糟糕,显得我的思考和工作过程很差劲。

找我做UX咨询的客户更喜欢有能力呈现作品的人,而不是只会画方框和箭头的人。 我能去给早期的创业团队工作吗?明显不能。

我也有一些理由来安慰自己:我不知道美学的糟粕是什么,我主修工程专业,因此做出来的东西很不美观也无可厚非。

最后,我学习了app的美学,同样我也学会冷静、努力地分析创意,而且毫不羞愧地去临摹好的作品。如果我在一个UI项目上花了10个小时,那么只有1个小时是有效的,其他的9个小时却是在失败中学习。我拼命地Google、Pinterest、Dribbble 里面找可以临摹的东西。

这篇文章就是这些失败所总结的“法则”。

因此,我想对那些新人说:我现在擅长UI设计,那是因为不断的分析,而不是突然领悟到美与平衡。

这篇文章不是理论研究,只讲实际的应用。文章里不会出现黄金分割,也不会提什么色彩理论,只有我从失败和不断的磨练中学到的东西。比如:柔道的发展源于日本武术和哲学思想。上柔道课时,除了过招,你还能学到能量、气息与和谐之类的东西。以色列格斗与此不同,它是由20世纪30年代的犹太人发明的,那时犹太人正处于纳粹人的压迫之中。其中没有艺术,在以色列格斗术的课上,你会学到怎么用笔和书本去袭击别人的眼睛。这就是荧屏上的以色列格斗术。

法则如下:

光线要由上往下

黑白优先 增加空白的空间 处理好图片上的文字 突出与淡化文本 只用优秀字体 像艺术家那样偷师

 

1:光线要由上往下

阴影对于我们所见到的UI元素意义重大。

或许这就是我们在学习UI设计的过程中最为重要的非明显事物。光线来自天空,光线总来自于天空,因此从下面产生的光就显得很诡异。

当光线来自于天空时,它会照亮食物的顶部,在下面产生阴影。上面部分颜色浅,下面部分颜色深。光纤由上到下照到脸上很自然,如果反过来话就很瘆人:

Image title

当然,UI设计也是如此。正如我们五官下都有些许阴影,在任何一个UI元素下方你都能找到阴影。我们的屏幕是平的,但是我们可以采用艺术手段让它看起来是3D的。

Image title

拿按钮来举例。即便是相对“扁平化”的按钮,依然能看到一些光线变化的细节:

未按下去的按钮底边更暗,光线没有照到那里。

这种未按下去的按钮上半部比下半部更亮,这是因为在它模仿了一个稍微弯曲的表面。当你将面前的镜子倾斜来看镜中的太阳时,表面会反射出比太阳投射还要多的光。 未按下去的按钮有微妙的阴影,在放大的图中可能会更清楚。 按下去的按钮虽然底部比上部更暗,但是整体都是暗的,这是因为它处于屏幕的平面上,阳光不容易照到。有人会说,在现实生活中按下去的按钮更暗,那是因为我们的手挡住了光线。

仅仅一个按钮就有4种不同的光线变化,重点就在这里。现在,我们将这种手法用到别的地方。

Image title

这里有一组ios6的“勿扰模式”和“通知”设置,现在来看看会有多少种光线的变化。

在控制面板的上边缘有一小块阴影。

“开启”滑动槽也有阴影。 在“开启”滑动槽的下半部分反射了光线。 这些按钮是突出的,看到了在它们上半部分边缘的光线没?因为是与光源垂直的,接收了大量的光,折射到了你的眼睛里。 因为光线角度问题,分割线处出现了阴影。

Image title

通常会内凹的元素:

文本输入框

按下的按钮 滑动槽 单选框(未选中的) 复选框

通常会通常会外凸的元素:

按钮(未按下的)

滑动按钮 下拉控件 卡片 被选中后的单选按钮 弹出消息

了解了这些之后,你就会在很多地方发现这一法则。恭喜你入门了!

等等,那扁平化设计呢?

ios7引发了科技界对“扁平化设计”的追求。也就是说图标是扁平化的,不再模仿外凸或内凹,而是只有线条和单一颜色的形状。

Image title

我很喜欢,干净、整洁的风格,但我不认为这是一种长久的趋势。通过光纤的微妙变化来模拟3D的效果很自然,但是无法被完全取代。

在不久的将来,我们很可能会看到半扁平的UI(这也是我推荐你们要深入学习的设计)。我把它叫做“flatty design”,依然干净、简洁,但是会有一些阴影,有轻点、滑动和点击操作的提示。

Image title

现在,Google在各个产品上推行他们的Material Design语言,这是一种统一的视觉语言,其核心部分就是模仿物理世界。

Material Design的说明展示了它如何运用不同的阴影区表现不同的层次。

Image title

这也是我所认同的类型。

它使用了真实世界的元素来传达信息,关键在于:细微。

你不能说它没有模仿现实世界,但它也不是2006年的网页风格。没有纹理,没有梯度,没有光泽。

Image title

我认为“Flatty”是未来的方向。扁平化?早晚会过时的。

Image title

2:黑白优先

在上色前用灰度模式可以简化大多数视觉设计的复杂元素,还能让你专注于空间和元素的布局。

UX设计师现在都喜欢“移动优先”,这就意味着你要先考虑如何在手机上显示页面,然后再考虑在超清Retina显示屏上的显示效果。

这种限制很好,它能理清思路。先解决复杂的问题(在小屏幕上显示),然后再解决简单的问题(在大屏幕上的可用性)。

有个类似的限制:设计黑白优先级。先从复杂的问题入手,使app美观易用,但不要借助颜色,最后再有目的地上色。

Image title

这种方法能让app保持“干净”、“简洁”。加入过多的颜色会使丢失干净、整洁的效果。“黑白优先”的原则能促使你关注空间、尺寸和布局的问题。这些是在设计干净、简洁的页面时首要考虑的问题。

Image title

Image title

下面来看“黑白优先”法则不适用的几个例子。比如运动、卡通等具有鲜明特色设计就需要一个能够将颜色运用到极致的设计师。然而大部分app并没有这样鲜明的特点,只要保持干净和简洁就好。那些色彩绚丽的颜色被公认是很难的。

Image title

所以,还是用“黑白优先”原则。

第二步:如何上色

最简单的上色方法是只加一种颜色。

Image title

给灰度模式增加一种颜色可以简单快速地吸引注意力。

Image title

你可以进一步,灰色基础加上两种颜色,或是同意色调的多种颜色。

实践中的颜色是什么色调?

网页中主要用的是十六进制RGB表。最好不要管这些,RGB不是好的颜色设计框架。大多数采用的是HSB模式(相似的有为HSV或HSL)。

HSB比RGB更符合我们平常看待颜色的方式,而且你也可以预测HSB的变化是如何影响我们所看到的颜色的。

如果你对此不熟悉,可以参考《设计师配色宝典!教你从零开始学配色》

Image title

通过调整单一色相的饱和度和亮度,你可以生成多种颜色——深色、浅色、背景色、强调的地方和吸引人的地方,但是这不会扎眼。只用一种或两种色调的颜色是强调和淡化元素却不把设计搞得一团糟的最好方法。

Image title

关于颜色的其他建议

颜色是视觉设计中最复杂的部分。从负复杂的理论和长期的实践中,我得出了一些好的建议:

小贴士:

不要使用纯黑色,在现实世界中是几乎没有纯黑色的,调整不同的饱和度,尤其是阴影部分的饱和度,能够给你的设计提高丰富程度。此外,饱和的灰色更加接近现实世界。 Adobe Color CC:寻找/调整和创建颜色组合的最佳工具。 在Dribbble通过颜色搜索:寻找与某颜色搭配的最好方法,实用性比较好。如果你已经决定了使用一种颜色,可以看看世界顶级设计师是如何给那种颜色配色的。

 

3:增加空白空间

留出一些空间,使UI看起来由设计感。

在法则2中,我提到“黑白优先”的原则能促使设计者先考虑空间和排版,再考虑颜色和美观。现在就来看看空间和排版吧。

如果你编写过HTML,那么你就会对HTML在网页上的默认排版比较熟悉。基本上所有的东西都会堆在屏幕上,字体、行距都很小,在段落之间小的间隔,但不是很多。段首至段尾也就100px或是10000px的距离。

Image title

从美学上来讲,这很难看。如果你想设计一个好看的UI,你就需要留出大量的空间,有时可能更多。

留白空间,HTML和CSS

如果你和我以前一样,习惯用CSS来调整布局的话,那么你应该从此改正过来,因为这种方法下留白空间不是默认状态。要试着把留白空间作为默认状态,添加各种页面元素。

我认为这是人们依然在素描的重要因素。

从空白页面开始意味着从留白空间开始。

从一开始就想好边距和间距,从未修饰过的HTML页面开始意味着从内容开始。

Image title

Image title注意左侧的菜单栏。菜单条目的行间距是文字的两倍,字号是12px。再看看列表项,在文字“PLAYLISTS”和下划线之间有15px的空白。它比字体本身都还要高!也就是说,在列表之间有25px的距离。侧边栏的文字之间也有很大的空间,我们会很自觉就留意到这个多余的空间,将不同的元素有机的组合在一起。

很显然,留白的空间能够将混乱的节目做得美观简洁,比如论坛Image title

有很多人认为,维基百科的新页面删除了很多功能,但是你不能否认这是我们学习的一个好的案例。

在行之间留出空间。 在元素之间留空间。 在各组元素之间留空间。

分析一下哪些是可行的。

好了,以上就是第1部分的内容,感谢阅读!

在第2部分我将讲解剩下的4条法则。

4.处理好图片上的文字
5.突出与淡化文本
6.只用优秀字体
7.像艺术家那样偷师

感谢大家的阅读

朵朵需要大家的关注与支持

想学习UI的以及,想转行到UI的,感兴趣学习的加Q群:740187290

















更新:2018-07-18

收藏

3人已收藏

朵朵的UI

今天要比明天好,今天要比明天努力

  • 19

    作品

  • 19

    粉丝

  • 0

    关注

  • 界面视觉设计要素 – 字体篇
  • 【U小白】这些排版技巧你都知道?(一)
  • UI小白必须要掌握的美术基础
  • ps写实计算机教程
相关标签
设计经验ui

    猜你喜欢

      2018-07-18 好文转载 经验/观点 原作者: 赖信涛 举报 1021 3 2 0

      打造出色 UI 的 7 个法则(上)

      0.0°

      你确定要举报打造出色 UI 的 7 个法则(上)

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年07月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      2
      3
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录