2020-11-26 13:42:58 阅读(164)
在做UI界面时,我们经常需要看到很多产品进行竞争产品分析、市场研究,无论是交互逻辑还是设计细节,都占据了设计师的时间成本,这里我分析整理了一些常用的实际战斗设计技巧,帮助您节省一些收集数据的时间,希望帮助设计师提高设计质量和效率!1.在界面布局设计中,布局中的空间关系元素可以利用平面设计中的结构思维方法来理解UI界面中空间元素结构的分布对应性。以下是页面元素分析的新闻客户端为例。2.为了使阅读更有效,可以使用不同的标题规格、不同的排列比例或不同的颜色背景。3.模块化分割方法的线条分割和空间分割之间的差异,分割线给人一种压迫感,空间的分割给人一种更容易阅读的感觉。4.如何改变布局图的版本率和视觉空间的比例?让我们来看看qq音乐会员中心页面的设计。不同的等级对应不同的颜色卡片,使用颜色填充背景吸引用户增加界面的独家比例,并在账户切换视觉方面发挥指导作用,这是一个很好的设计理念。5.根据主题选择配图和配色方案。我们在设计时经常追求「高级灰」、「高逼格」亦或者是「独特性」,事实上,更重要的是,我们应该符合产品的基调和产品对象的人群,而不是盲目追求自我「设计追求」,例如,以下两个案例很好地表达了产品的调性,并清楚地告诉用户我在做什么产品,6.图片焦点表示图片中相对更突出的内容,使用户在浏览产品时能够第一视觉捕捉用户的注意力;焦点是相对的,可以是大页面的焦点,也可以是小模块的焦点页面的焦点,我们可以看到优酷的焦点「我的」页面信息以卡片的形式呈现,会员购买入口以色彩倾向的色彩设计表达其重要性;优酷首页选择的卡片中也有「全网独播」等角标的设计在每个模块中都非常引人注目,很容易捕捉到用户的视觉焦点;苹果手机以绝对焦点的方式向用户设计了当前日期的红色选择。界面平衡是指布局元素上下左右比例相对适中,给人一种稳定平衡的视觉感觉。界面平衡是指布局元素的上、下、左、右比例相对适中,给人一种稳定和平衡的视觉感觉。平衡的布局设计可以使图片稳定,不会产生上下比例失衡。平衡的比例构图令人愉悦,而不平衡的设计会导致不稳定的分散注意力。视觉平衡是指设计中负元素与正元素的比例相对合适,设计师的作用是发挥元素视觉重量的构图平衡。8.字体的选择。很多时候,一些设计师希望在制作界面时统一整个字体。最好的方法是嵌入文本包,但这增加了代码包的负担,所以我们需要选择。许多国内Android手机都有自己的系统字体。有必要调查真实机器的效果(如果差异不大,则必须嵌入字体)。苹果和Android的常用字体如下。9.有节奏感的布局设计有多种节奏感的设计表达形式。更常用的是在统一的风格节奏中穿插不同的模块,使页面的节奏感更加跳跃和灵活,比如Medium、网易云音乐的布局设计采用节奏感的设计方法。跳跃的节奏感给人一种活泼、时尚、现代的感觉,不会让画面单一枯燥地呈现给用户;灵活的节奏感也为许多付费内容提供了很好的呈现方式。10.不同行业的常用版本,内容信息和购物产品相对较小,许多图片、视频和音乐产品相对较大,我整理了常用参数,方便设计师查看和参考,不需要每次测量许多产品11。多端思维布局设计,根据平台特点的布局设计,我们发现很多产品的移动终端布局设计会不同于Web终端网页的Feeed流布局设计结构。如果是,你会这样排版吗?事实上,这种布局设计是有原因的。首先,移动终端通常使用文本标题来吸引人们的注意力,而图片在移动终端上显示较小,因此许多图片的清晰度和内容呈现不够清晰。第二,与移动终端不同,网页终端的图片很大,可以起到很好的作用,也正是因为网页终端的呈现空间很大,所以当标题相对较短时,如果仍然遵循移动终端的结构,然后标题和图片之间会有空白,导致视觉浏览不连贯,这就是为什么不同平台的布局不同。12.布局中色彩的对比应用主要包括经典的三种——纯度对比、色相对比、明暗对比。如果界面设计师掌握了这三种常用的对比技术,他们可以在界面设计中灵活自如地创造出良好的色彩对比纯度对比。我们可以看到,在这种情况下,进度条采用低纯度蓝色和高纯度蓝色和绿色制作色彩对比,形成层次对比。使图片非常有活力的明暗对比图片的主要背景颜色左侧为白色,右侧调整为黑色,通过色彩亮度对比可以显示整个界面的层次感,使整体感觉呈现简单和高质量的风格(现在许多产品适合深色模式,可以向用户展示两种用户体验)如何使用五个步骤,快速设计优秀的深色模式?深色主题是应用界面设计的最新趋势。阅读文章>>不难看出,与整个界面的主色调相比,颜色是以绿色为基础的。橙色在绿色中的应用非常鲜明,形成了强烈的对比,让用户清楚地知道这是一个强大的引导入口。13.图片布局率的有效利用。当我们在网上购物时,我们通过图片的第一印象获得更多的产品,因此,图片在购物网站上的比例可以尽可能适合自己的产品特征,使布局设计更好;常见的图片尺寸为16:9、4:3、3:2、1:1、2:1、1:0.618(黄金比例),如淘宝、京东的产品图片,在有限的空间内,正方形比例的呈现是最大的空间展示;优酷采用16:9的比例更符合人眼浏览视频的习惯。14.界面设计中布局设计的软硬关系,以突出功能或布局「活跃性」必要时,必须添加一些元素来衬托,此时不妨尝试以下软硬搭配方法,能起到很好的效果。曲线和圆角使界面通过曲线和圆角变得更加「柔和」,例如,在以下产品顶部位置的背景层处理中,通过使用柔和的弧线,整个画面不那么僵硬。在界面设计中,我们经常在图片上添加icon,因为我们确保界面元素的存在,而不失去质量,此时,通过增加过渡蒙古层的效果,可以增加icon,这不仅可以保证功能,还可以保证美观。线性浮层通过线性设计技术风格图片和功能入口,是一种清晰的界限「生硬」设计方法,让界面感觉刚硬强烈15.「高级感」布局设计有一种高级感的布局设计,采用大留白和大卡片的布局设计,突出整个产品的气质,使产品独特,如以下三种产品,使用卡模块化设计,内容突出少量文本使用颜色重量对比和修改句子,再加上高质量的图片,使整个界面非常先进。16.差异化布局设计方法设计工作,常用的方法,主要目的是实现同类功能入口,发挥脱颖而出的效果,典型的代表是增加动画效果或角标等装饰设计。例如,在品多多的入口中增加了icon的动态效果和角标的动态效果设计。红包的表现手法特别用于新人专属场所,使元素移动;在蘑菇街的入口处,直播入口的头像被动态设计,增加了视觉引导。以上是我在实战中为您整理的常用布局设计技巧,希望对大家有所帮助,提高自己的设计能力和水平。这里还是希望同学们对文章进行点赞和关注,留言区评论。在这里,我仍然希望学生们能表扬和关注这篇文章,并在留言区发表评论。让文章中的知识点从更多的角度融入到实际工作中。
以上就是关于保姆式分享:提高UI质感的小技巧的相关介绍,更多保姆式分享:提高UI质感的小技巧相关内容可以咨询我们或者浏览页面上的推荐内容。我们将让你对保姆式分享:提高UI质感的小技巧有更深的了解和认识。
推荐阅读
最新文章
猜你喜欢以下内容:
一 客户顾问-张三 一