当前位置: 首页 >文章 > 如何让我们的设计变精致
收藏
分享

如何让我们的设计变精致

举报酸梅干超人酸梅干超人发布于 2019-01-045620阅读66点赞4评论
关于 UI 设计需要注意的细节讨论,不一次把所有列举出来,我们就先围绕一件事展开,那就是——“对比”。...

关于 UI 设计需要注意的细节讨论,不一次把所有列举出来,我们就先围绕一件事展开,那就是——“对比”。

抛开产品和交互问题,能让我们觉得精致好看的界面,都离不开 “对比” 的应用,这也是整个产品设计中最重要的视觉问题,而缺乏对比的设计,看起来乏善可陈,毫无吸力,比如下图案例:

想要做好界面中的对比,可以从下面几个方面入手:

  • 形式

  • 色彩

  • 文字

  • 层级

下面,用一个课程中的学生作业作为讲解对象,如何通过对比的方式来提升设计的质感。

什么是形式呢,就是组件在相同功能和元素下,排版、视觉的呈现方式。形式的对比,就是在一个页面中,不同组件呈现方式上是否能行成差异性,让页面看起来更丰富多元化。

分析上方的案例,组件之间并没有拉开差异性,尤其在详情页中,剧情简介和观众影评,影人和剧照,设计形式接近一致,这就是一个不好的开端。

再看看拥有一样问题的设计案例:

仔细点观察,就会发现作为飞机稿不是图片、颜色用得花哨就够的,组件缺少差异性,设计感就完全无法体现,如果还没法理解,就再看看下面几个案例,是不是就没有形式强行重复的尴尬,表现得更合理:

所以针对作业中的问题,我们在这个基础上进行完善,第一步要做的就是在形式上做出区分。所以我们可以通过以下几个思路来调整第一页:

  • 头部分类和下方上映和即将上映过于近似,控件形式上需要作出区分

  • 图片太多,模块左右边缘都是图片,导致看上去呆板,要减少图片出现的面积

  • 底部新闻部分不能继续使用大图模式要作出调整


第二页的调整上,主要在下半部分:

  • 演员和剧照应该有明显的差异化

  • 评论和上方的简介不一样看起来文本信息完全一致

通过原型上的调整,就可以把得到一个初步改版的样式,各个组件之间保证足够的差异和识别性,可以观察看看是不是比原来的页面更合理了。



色彩对比,是很关键的对比,色彩决定作品的第一印象。那么如何为色彩做出对比呢?无非就是鲜艳对比浅色、深色对比亮色、暖色对比冷色,不用特意套用配色的理论,用比较直观的感受判断就可以。

开始配色的过程,首先是确定主色和背景色,原图中的棕色主色和白色背景色,搭配起来的效果给我们的感受并不强烈,所以我对原色的棕色做一定范围的调整。

然后把主色添加到原型中,并为相关的一些元素添加合适的辅助色。先看第一页添加后的效果。

然后我们再为原型增加配图,这里要重点关注,以 “作品” 角度切入的话,配图也是整个界面元素的一部分,包括它使用的色彩。如果一个界面中出现了多出需要应用配图的话,那么不同的模块配图使用起来的风格和色彩,也应该有一定的对比,而不是全部采用一种风格的。比如下面这个错误的案例:

所以根据这个原则,我们加入配图后再看看效果:

如果头部我们用了色彩主体比较强烈的配图,那么在下方就应该用比较平淡简约的,做出明确的对比。

在第二页中也应用一样的方法,那么思路如下:

  • 头部作为权重最高的组件颜色要更突出

  • 头部背景和封面的颜色应该具有更大对比性,并能让文字更容易识别

  • 头部、剧照图片较丰富,所以在影人和用户头像中应该用更简单的配图

整体增加配图后的效果:

到这里已经有了大致的设计效果,已经可以明显感觉到比之前的设计有更好的提升,但是,对比不是到这里就结束了,我们接着往下做。

文字对比是最容易被忽视的细节,很多设计师都认为只要看得清就行,样式变化越少越好,这是非常错误的思路。

文字样式的多少主要取决于文字的类型和需要重点体现的内容数量,而不是没有理由的精简到最少。例如看一篇排版成熟的期刊或是论文,其中标题、副标题、正文、引用、标注等格式,都会有不同的文字样式帮助我们区分,如果重头到尾出现的所有文字都应用一样的格式,那么就毫无可读性。

文字的对比,主要通过以下几个属性表现:

  • 大小

  • 字重

  • 色彩

即越重要的文字字号越大、字重越高、色彩越深,权重越低的则反之。

回到我们的案例,在原型阶段,其实我已经对文字做出了简单的对比处理,下面我们要进一步细化这个步骤。

修改的分析大致如下:

  • 要将分类作为权重最高的文字表现,所以模块标题不应该比它更显眼

  • 多段文本比标题类文字权重低一级,可以统一它们的样式并比标题稍弱

  • 注释类文字比多段文本再弱一级,用较低的灰度

  • 为评分、点赞数、展开等有“特殊性”的文本增加色相

然后我们可以看看下面修改前后的对比:

(左图为修改前,右图为修改后)

通过正确细化文字的对比以后,就能真正让页面精致起来,具备丰富的细节。当然,对于文字的权重安排和思考根据不同的思路和产品需求会得到不同的样式结果,但绝对不能忽略这个过程。


最后一个,就是层级的对比。这么命名实际上比较拗口,它就是元素在 Y 轴上的高度,即元素的投影应用,比如谷歌官方的解释。


投影的使用既是视觉样式,也是一个用来制造景深的技巧。只要在一个扁平的界面中,为任何一个元素添加了投影,那么这个界面就存在了上下的空间关系,处于上方的元素就会得到凸显,例如苹果官方应用中的案例:

既然是空间关系,就要有前后的落差对比,我们要为最重要的元素增加投影,而不是把它当成设计风格进行统一的设置,所有元素都带投影,就没有了对比,可看性也会大打折扣。

所以,在这些页面中,需要突出的元素分析如下:

  • 首页头部广告图层级要高于下方其它元素,作为优先级最高吸引用户的入口

  • 详情页头部电影海报要进行凸显,和背景拉开层次

  • 详情页底部评论对影片重要性教高,为社区原创内容,也需要突出

最后,我们就可以得到下方完整的效果:



最后,我们再对比一遍修改以后的案例和之前的案例,看看更细致的增加了对比以后,有哪些提升:

诚然,这次的修改主要只针对在原作框架上的小范围调整,没有完全翻新,会受到很大的局限,但也足以让我们的设计变得更精致和具备可看性!

多做总结并进行对比的训练,就可以很快的帮助大家掌握上面所讲的几个知识点。本次讨论的内容就到这里,后面还会增加其它分析,谢谢观看。


4条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,481人)

【4月】趣味MG动画制作训练营
距离开班仅剩12天31人已报名
【4月】零基础手绘插画训练营
距离开班仅剩12天59人已报名
电商海报设计训练营
距离开班仅剩40天23人已报名
猜你喜欢
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了48,550
并提交了249份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证