1. 兔课网
  2. 资讯
  3. UI设计教程
  4. 圆形元素在界面设计中的运用技巧

圆形元素在界面设计中的运用技巧

3482人阅读 2020-06-30 收藏

圆形元素在界面设计,中被广泛使用,从普通的圆形图标到圆头肖像或圆形轮廓形状。圆是一种特殊的形状,在许多几何形状中可以很快被注意到。也正因为如此,在使用圆形元素设计界面时需要考虑一些问题。环顾 一、圆形头像,圆头图像已经占据了我们的手机。让我们看看下面的例子,如下图所示。

圆形元素在界面设计中的运用 三联

从左到右是搜狗地图、QQ、Instagram。当然,还有许多其他的例子,更不用说它们了。这时,一定有一些学生忍不住跳出来反驳。微信和脸书不是圆头的。如果你不相信我,请看下面两张图片。

d1df56a455f56ac7256cb095c8b4.jpg

在正方形和圆形之间,是对是错,请继续看下面的细目。1.无论用户将头像用于圆形头像还是方形头像,最终结果都是头像。使用头像的目的主要是作为个人身份的象征。与其他用户不同,它有许多特性,如用户名、用户ID和用户头像。在这些选择中,头像是最方便快速识别和记忆的,特别是对于英俊的男人和漂亮的女人。此外,还有一部分通过头像来展示他们的个性。例如,漂亮的女人通常用她们自己的性感自拍作为头像来展示她们的魅力,或者用卡通人物或图像作为头像来展示她们的艺术气息,或者用崇拜作为头像来表达她们的爱或崇拜。2.随着智能手机的日益普及,人们拍照的门槛越来越低,越来越多的用户使用自拍照片作为头像。照片的内容五花八门,比如人、风景、花草、宠物。即使它是一张正常人的照片,背景也会混合许多其他元素,如下图所示。

5cf056a456106ac7256cb020a2c8.jpg

尽管第一张照片中人物的背景模糊不清,但背景仍然非常凌乱,一些弱对比色很容易抓住用户的视线。第二张照片中的角色是配角,豪华轿车是真正的主角。这种类型的自拍并不少见。在第三张照片中,人物拍摄的光影是无序的,背景内容是有意曝光的。意图很明显。此外,用户手机质量和拍照水平不一致,拍照质量也不均衡。当这些照片被用作头像时,人物不是被突出显示而是被弱化了。尽管智能手机的屏幕越来越大,但当它在界面上集中显示时,每个化身仍然很小。3.方形头像和圆形头像之间的区别可以通过两个比较图表来说明,如下图所示。

5d5c56a456266ac7256cb013db0c.jpg

左图显示的是一个方头,右图显示的是一个圆头。通过比较,我们可以发现以下几点:一、圆头人像可以更好地帮助用户聚焦脸部。虽然左边的图形可以完整地呈现人物特征,但是有许多令人不安的信息,比如背景中的灯光、门柱和屏幕。相比之下,右图更清晰地显示了人物的面部特征,如圆脸、漂亮的瞳孔和假睫毛。在之前的分析中,还提到了手机拍摄的照片质量参差不齐。在这种现实情况下,圆形头像更有利于忽略照片的背景,提高头像的识别效率。严格地说,左边的图片不能被称为头像,而是图片。原因很简单。头像应该自然地显示“头”,而左边的头像只占不到图片的四分之一。从这个角度来看,很明显正确的画面更合适。当选择照片作为头像时,如果照片是圆形的,用户更愿意选择脸部的照片作为头像;如果是方形的,用户相对来说更随意,通常会拍全幅或半幅照片。如果你不相信我,你可以打开你的微信,看看你朋友的头,或者向前滑动看看前面的图片。在日常生活中,我们看到的大多数相框都是方形的,但是圆形相框很少,因为大多数照片都是方形的。因此,使用圆形轮廓来表示头像可以快速地将其从照片中区分出来,并变得更加突出。当然,使用圆形轮廓作为化身还有其他原因,比如技术进步。在早期,由于CSS和其他技术的不成熟,处理圆角和圆角非常麻烦,现在要容易得多。 二、圆形的icon在应用程序的用户界面设计中,我们经常看到一排排圆形图标,如下图所示。

fc6956a4564232f875520ff01b89.jpg

上图中,前两个是美团和淘宝。在设计,上有两排水平的圆形图标。最后一张图片是搜狗地图的服务标签页,你可以发现还有垂直排列的圆形图标。在这里,我们必须回答两个问题:1。为什么用圆圈?2.为什么用圆形代替矩形?第一个问题很容易回答。每个功能入口的图标是不同的。如果圆形轮廓被去掉,它会很乱。每个人都知道一个圆是一个封闭的形状,添加一个圆可以削弱图标的差异,使它们更规则,看起来更清新和统一。同时,它还显示了每个图标在功能上的平等地位,不会因为图标的特殊形状而产生偏差。在回答第二个问题之前,先回到圆和正方形的基本特征,圆:运动、曲线、运动、敏捷、流动的正方形:静止、直线、规则、严肃、理性。与正方形相比,圆形更灵活,不那么僵硬和严肃。因此,不难理解为什么用圆代替矩形。第二,圆圈可以使图标在正方形页面中突出。你不认为这些圆形图标在页面上很突出吗?原因很简单。我们的大多数手机屏幕是方形的,界面中的大多数元素也是方形的。此时,一个小圆圈自然会在界面中形成焦点,这将在后面的分析中看到。除了这个表单之外,还有一些单个的圆形图标浮动在页面的底部,它们通常执行返回顶部的操作。搜狗网的圆和方就像太极中的阴和阳,它们是相互平等的,无穷无尽的。圆和方的巧妙结合可以使页面生动活泼,同时可以更好地引导功能,如下图所示。

ebb456a4567032f875520fafc8f5.jpg

第一张图片是谷歌手机地图,位置右上角的旅行模式图标被正方形临时图层分成两部分。从功能上来说,旅行模式是下一步,它不属于临时层的内容,所以把它放在右上角更合适。从用户界面的角度来看,圆形和方形的结合使得圆形更加突出和显眼;同时,圆圈放置在右上角,页面不那么死板,但使页面生动活泼。第二张图片是愉快贷款,它使这个金融项目脱颖而出,打破了页面单调的布局。第三幅图是厨房故事。整个页面在左右两边居中,作者的头像在现实中居中。它分割页面并起到连接作用。在这一页中,设计,循环元素通常不是独立存在的,而是与其他元素共存并相互包容的。在寻找好的视觉效果的同时,我们也应该找出页面元素之间的关系,这样设计制作的才是真正好的设计三、圆形和方形的结合结合真实的物体,并借用圆形的轮廓来创造页面的收尾。让我们向您展示一些栗子,如下图所示。a29156a4568e6ac7256cb0899d80.jpg

第一张图片展示了网易云音乐的播放界面。圆形轮廓与记录一致。虽然它占据了页面的主要空间,但它使整个页面具有文学性和艺术性。第二张图片显示的是搜索轻松贷款的账户页面。可用的余额是瓶装水的设计。平衡越高,水就上升得越高。同时,它还会产生摇晃的效果,使页面同时生动起来。第三张图片显示了乐东丽的主页。步数越多,笔画进度条越多,深色变得越温暖。与现实生活中的仪表盘相对应,渐变的颜色与圆圈相匹配,使页面变得基本清晰,具有很大的视觉冲击力。可以发现,在使用圆形元素时,我们应该注意页面的平衡,比如左右对齐和上下对齐。为了确保页面的平衡和新鲜,在圆形元素的周围通常会保留更多的空白。这些都是使用循环元素时要注意的事情

相关文章推荐

UI设计需要学哪些内容?
兔课网:新手如何零基础开始学习交互设计?
设计新手如何用PS制作金盾图标
UI设计好学吗?零基础参加UI培训会不会很难?
没有基础可以学习UI设计吗?,学UI设计要什么基础,主要学什么软件?
ui有哪些课程比较重要?,UI值不值得学习?
请问可以自学平面设计吗?
男生适合学UI设计专业吗?,UI设计培训课程是哪些?
UI的工作和就业前景怎么样?,做UI工作真的加班很严重吗?
现在学计算机有前途吗?,学UI的就业前景如何?

特别推荐

上一篇>> UI设计教程:从效果图到UI切图的技巧

下一篇>> 一个完整的UI设计流程是怎样的?

新人大礼包

1
咨询客服
平面设计零基础学习交

交流Q群

微信公众号
返回顶部