欢迎光临
我们一直在努力

UI 设计干货丨怎么让你设计一次通过审核?

当你设计完一个项目提交审核时常常会遇到这样的情况:

客户说:“这块内容不突出将图标在大一点吧”

老板说:“这个界面没有问题,但是总感觉缺点什么,不够大气”

总监说:“这个界面太平,没有对比,没有层次”

面对这样的反馈,很多同学表示不可理解,明明自己觉得设计已经很完美了,他们为什么还这样说,按照他们说的方式去修改,结果越改越丑,不但总监那边过不了,老板、客户频频提出修改意见。

为什么会出现这样的问题呢?

1、从客户角度来说,他并没有学过设计,在设计上不能提出专业的建议,但是他知道产品需要突出什么内容,因此他对你说这个图标放大点的反馈时,可能真实目的是为了突出某个部分的内容;

2、从老板角度来说,老板一般看得比较多,但是不一定懂设计,因此他只能提出抽象的问题,具体什么地方有问题也说不上来,其实他和客户一样觉得整个界面没有重点,不吸引人;

3、从总监角度来说,总监往往有技术总监和设计总监,不管那种因为平时看得比较多,因此都可以提出一些专业的反馈。正如总监说的其实就是我们的界面中缺少对比,导致整个界面没有重点、没有层次、没有吸引力。

运用对比让你的界面可以让界面更加清晰和有层次感,而层次感是观众接受信息并理解它们的顺序。一旦设计作品吸引了观众的视线,观众以适当的顺序漫游于作品之中,这点是关键的。即他们能理解哪些是最重要的信息,哪些是次要的等等。对比是设计具有丰富层次感的关健。

在UI设计中如何运用对比提高界面的层次感呢?

对比就是避免页面上的元素过于相似,我们可以通过位置对比、间距对比、颜色对比、文字对比、形状对比、大小对比等六个方面来设计。

位置对比

通过位置可以让我们清楚的知道哪些模块优先级高,哪些模块优先级次之。根据人的视线遵循F模型,也就是从左往右、从上到下其关注度将逐渐减弱,因此在设计时我们可以将优先级高的和重要的放在靠前的位置。如下图所示:

以天猫个人主页为例,顶部的个人信息区由于是用户进来首先要清楚的知道是谁的账户,因此其优先级最高,我的订单尽管是用户经常操作的区域,其重要性高,但是优先级次之。

以天猫首页为例,其模块从上到下,分别是搜索模块、功能入口模块、Banner、运营入口等,搜索模块由于是全局搜索,其优先级最高,功能入口是首页的核心优先级次之,Banner是收入的来源,但相对功能入口来说优先级在次之。

间距对比

间距分块内间距和块外间距。一个物体周围留白越多,就越容易吸引用户的注意力。从信息层级的角度来说,级别越高的内容间距越大。因为越重要的内容就要吸引用户越多的注意力,因此为了更好的进行区分,块内间距都是小于块外间距的。如下图所示:

以大众点评为例,块外间距为左图红色部分的间距都为60px,块内间距为蓝色块24px,当块外距离大于块内距离就能够很好的拉开的层次。

以转转为例,块外间距为64px,块内间距为36px,同样通过对比能够很清晰的知道哪些内容是哪个模块。

颜色对比

颜色是最容易感知到的对比方式,这是一个很容易出效果的方式,在使用中我们可以通过色相、明暗、饱和度上进行对比。其多用在按钮、重要文字、导航、背景板中。如下图所示:

以咕咚为例,导航、悬浮按钮、标签栏的选中均用了绿色进行强调对比,告诉用户绿色是可以点击的;另外界面中还加入了一些小红点、红色标签告诉用户红色的标签是强调,想让用户知道的。

以淘票票为例,按钮、引导提示、标签栏选中均用了红色进行强调对比,很容易引起用户的注意,让用户看一眼就知道如何操作。

文字对比

文字在界面中占有很重的比例,文字对比设计很大程度决定了界面的效果,文字对比主要有文字大小、粗细对比,通过对比可以使文字排版更清晰,更利于阅读。如下图所示:

以知乎为例,列表中一眼可看出标题,因为其字号最大为34px #333,介绍文字未加粗为28px #666,其他的辅助文字为26px #999,其通过文字大小、加粗、字体颜色等让文字更有可读性。

以36氪为例,在列表中最先看到的就是价格和标题,其标题采用加粗36px #333,让用户在查找信息时一目了然,通过价格文字通过加粗 36px 蓝色让价格突出,而不太重要的介绍文字采用28px #999进行弱化。

形状对比

大部分形状可以分为几何形状(椭圆形、三角形、圆形等)和有机形状(液态形状和自然启发的形状)两大类。规整的几何形状可以和有机形状的曲线等不对称线条形成很好的对比。如下图所示:

以ofo和摩拜为例,扫码按钮它们分别采用圆型和椭圆置于页面底部,进入界面就能够看到这个醒目的位置。

大小对比

大小对比是众多对比中最常用,也是大众最为知道的对比方式,在设计时只要将元素的尺寸拉大,我们的眼睛自然会注意大的元素。多用于按钮、文字的对比中。如下图所示:

以ofo为例,其扫码按钮采用较大,几乎占了界面的三分之一,相比于界面其他内容,该按钮较为突出,比较适用于ofo室外的场景。

以得到为例,注册领取按钮和播放按钮,虽然其样式都是颜色+投影,但是注册领取按钮更大,因此在使用中更吸引用户注意。

1、位置对比:在设计时根据F模型,可以将优先级高的模块放到靠前的位置。

2、间距对比:级别越高的内容间距越大,块内间距都是小于块外间距的。

3、颜色对比:当我们需要突出某个内容时,我们可以通过色相、明暗、饱和度拉开和其他信息的对比。其多用在按钮、重要文字、导航、背景板中。

4、文字对比:文字对比主要有文字大小、粗细对比。

5、形状对比:为了突出某个按钮或内容,在形状的设计上也可区别于其他内容样式。

6、大小对比:为了突出某个内容,最简单的方式就是将元素尺寸拉大。

学UI设计到华南电脑学校——

UI精品课程内容

美术素养:

学习三大构成、透视原理、光影表现、视觉分割原理

学习结构素描、明暗素描、速写表现、手绘技法

学习色彩原理、色彩搭配、色彩心理学

学习UI设计手绘表现,包括UI设计概论、UI设计手绘基础、UI设计材质表现、UI基本元素表现、UI图标设计、Web UI设计、APP UI设计

学习PC、Android、IOS、WP、IPad设计规范,完成Web和APP低保真方案设计及手绘稿出图、商业设计手绘、POP创意手绘

软件技能:

掌握Photoshop软件、CorelDRAW软件、Illustrator软件、InDesign软件、Dreamweaver软件、Flash软件、Axure软件等设计软件。

专业知识:

GUI设计理论和实训:平面设计、字体设计、图形创意、版式设计、配色设计、VI设计、平面设计工作流程、印前设计理论、印刷基础知识、广告材料介绍、装订工艺流程和规范、成本核算与报价、商业广告设计与制作

品牌策划理论:广告策划、文化创意、文案写作、系统UI设计、会展活动策划、企业全案设计、广告营销学

广告摄影理论:广告摄影拍摄基础、广告摄影精细分类物体拍摄操作、广告摄影其他创意型拍摄操作

WUI设计理论和实训:网站建设流程、网页设计理论、网页制作基础、站点规划设计、网页版式布局、网页配色设计、W3C网页切图规范与技巧

MUI设计理论和实训:移动终端设计概论、扁平化设计理论、信息可视化设计理论、思维导图、智能手机APP界面设计、交互式原型设计、交互式动效设计、UE用户体验研究。

▶咨询更多信息◀

电脑专业

预约报名

赞(42)
分享到: 更多

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址