如何提升UI设计的高级感?来看高手的深入分析!

                2021-12-31

                如何提升UI设计的高级感?来看高手的深入分析!

                完美,不是因为没有什么可以增加,而是没有什么可以减少。

                创建美观、可用和高效的 UI 界面需要花费时间进行设计细节的打磨,本文从视觉和情感化设计两个方面来说说如何提升 UI 设计的高级感。

                视觉元素

                在互联网产品日趋成熟的今天,你会发现所有的 App 越来越像,似乎是同一套模版设计出来的产品。而这种普适化的设计会导致同质化严重,使得设计不精致,产品没有气质和品牌感。一个 App 设计是否精致,是否富有设计感,在于它的细节,这就意味着我们在进行设计的时候,要从细微之处着手,从多方面去钻研如何创造出打动人心的 UI 设计。本节总结了 12 个简单直观的提升设计感的小细节,一起来学习。

                1. 使用颜色深浅构建层次结构

                在对 UI 文本进行样式控制的时候,最常见的错误莫过于过度依赖字体大小差异来营造对比。单纯使用字体大小对比,所营造的对比并不够,尝试结合色彩和字重来营造更好的对比效果。

                每种颜色都有一个视觉权重,这有助于在内容中建立层次结构。通过使用颜色的深浅,为元素赋予不同的重要性。如果可以的话,你甚至可以采用两到三种颜色:

                • 主要内容使用深灰色(诸如标题,但是不要用纯黑)

                • 次要内容使用灰色(比如商品介绍)

                • 辅助性内容采用浅灰色(比如发布日期)



                2. 统一色调

                选择一种基础色,再调整色调和颜色深浅来增加均衡。设计时避免用过多的颜色。如果项目允许,只需使用固定的色板,通过调整基础色的饱和度和明度,利用这种简单的方式为设计增加一致性。

                3. 干净的阴影

                阴影是 UI 设计中最常见的视觉表现手法,它可以增加元素的深度,使其从背景中脱颖而出,引起用户的注意力,同时也能增强画面的视觉层次感。相比于采用大范围的扩散模糊阴影,使用微妙的垂直偏移阴影效果更明显,更自然,它模拟了最常见的光源特征,光线从上往下照下来所营造的阴影效果。

                4. 个性的图标设计

                合格的设计师能够绘制风格统一的图标,而优秀的设计师能够创造风格独特的图标。我们能否在追求大小一致,圆角一致,线宽一致和配色一致的同时,为它的视觉表现力加入更多的创意呢?例如下面这组图标设计,无论是在图形上的创新,还是颜色搭配上都呈现出无与伦比的创意。

                5. Tab 的设计感

                Tab 是 App 设计中最常见的控件之一,它源自 Material Design 的设计规范。现在很多 iOS 产品当中也开始使用这种导航栏样式来进行设计,而原本属于 iOS 规范当中的分段选择器变得不那么常见了。

                在视觉表现形式上,Tab 和标签栏同样也分为选中态和未选态,它的设计较为简单,通常是使用一组文字标签,通过颜色或在标签下加上小长条来区分两者的状态。因为它简单,却越难设计出彩,要发挥极大的设计想象力,跳脱出设计规范的限制,才能找到完美的方案。例如虾米音乐的 Tab 选中态是一段音频波线,再配合文字的大小对比,一个富有设计感又符合产品特征的 Tab 就被创造出来了。


                6. 无框设计 去繁从简

                在 UI 设计中,有许多的装饰元素,如卡片的边框、列表的分割线等,虽然边框,分割线是分隔两个元素的好办法,但是它不是唯一的方法,使用过多会让整个布局的设计感降低,或多或少都会干扰用户浏览的视线,让信息内容失去注意力,因此可以减少不必要的装饰元素。我们可以通过以下几个方法来划分元素的视觉层次,让画面变得干净,整齐:

                使用阴影

                阴影同样可以营造出边界感,而且相比边框分割线更加微妙,并不会显得突兀,不会分散用户的注意力,让内容更聚焦。

                7. 统一设计元素

                在 App 中的每一个界面都有许多元素,那些同类的元素应保持统一的设计样式。通常个人中心的标签栏图标是一个人形剪影,它代表着用户,因此可以在展示用户头像和用户形象的界面中延续使用。如果图形拥有独特的外观,如椭圆矩形,也可以作为视觉符号的一种,延续到其他界面中,成为图形或按钮的外观。这样,整个界面就被统一的设计元素联系起来了,给用户始终如一的一致感。


                8. 符合产品气质的字体

                选择符合产品气质的字体,可以与产品的定位相吻合,传递给用户正确的情感意识。虽然默认字体可以满足大多数 App 的设计需求。但会出现一个问题就是,系统字体的普适性并没有什么特色,在一些特定的情境下就显得收效甚微。例如在运动类 App 中更适合粗壮的斜体来传递力量、爆发力、速度的感觉,换成系统字体后,整体感觉在气势上就变弱了很多。

                9. 第三方图标风格统一

                大多数 App 都支持三方登陆,他可以减轻用户注册的时间成本。通常是在注册登陆页的底部展示第三方图标入口,这也是设计师最常忽略的内容,往往是直接将第三方图标调整一致大小和摆放整齐位置,没有针对它们再设计。一个设计精致的 App 不应漏过任何的细节,我们可以以自家 App 的图标风格为依据,对第三方图标进行优化设计。


                10.  图片中寻找色彩

                App 中优美的图文设计,能带给用户如沐春风的视觉享受,它非常重要。我们经??吹轿淖值釉谕计尘吧系纳杓蒲?,为了减少复杂图片背景对文字的干扰,通常的做法是叠加半透明度的黑色蒙版,让白色文字清晰可见,但这不是最优的办法。我们可以从图片中提取主色调用于叠加背景的填充色,这样就使文字、色块和图片融入到一起了,画面变得高级和富有设计感。


                11. 提高图片质量

                图片的质量影响着整个 App 的格调和用户的情绪,高品质的图片给人愉悦的视觉享受,产生美好的联想。而低品质的图片会瞬间拉低 App 的质感。在 App 设计中,一张漂亮的图片从收集到上线,需要经过裁剪,调色等过程才能被使用。即使是普通的商品图片,我们将它抠图后调整成统一大小,再加上干净的背景,就能立刻提升商品的美感,界面视觉也会变得美观、整洁。

                12. 卡片式设计

                现在的 UI 界面设计中,卡片式设计已经是一种非常常见的设计形式,它有利于信息分层和整合,划分出更加清晰的组织结构,实现复杂内容的简化处理,提高空间利用率。同时卡片式设计通常很依赖视觉元素,很强的视觉元素正是卡片式设计的一种优势,也是提升设计品质感的良方。


                情感化设计

                心理学认为,情感是人对客观事物是否满足自己的需求而产生的态度体验。只有当产品触及到用户的内心时,使他产生情感的变化,那么产品便不再冷冰冰,他透过眼前的东西,看到的是设计师为了他的使用体验,对每一个魔鬼细节的用心琢磨,人们会产生愉快、喜爱和幸福的情感。情感化设计并不是轰轰烈烈,有时候仅仅一句文案、一幅插图、一个动画就能打动人心,使用户获得愉悦的使用体验。让设计变得高级不仅仅是视觉层面,这些简单而美好的设计细节充满了积极情绪,它是满足产品的功能性和易用性之后,追求更高层次的目标。


                更多新闻

                3D图标越来越流行,UI设计领域要变天了?
                2022 年,UI设计师最值得跟进的新趋势「极光风」
                3分钟帮你快速了解UI设计全流程
                2021年UI设计软件到底该用哪个?来看这篇全面盘点!
                武夷山恿度化妆品有限公司 深圳市 龙火科技有限公司| 测试仪器有限公司| 山东智展有限公司| 郑州市汇高文化传播有限公司| 北京恒辉国际会展有限公司| 广州凯杰团队科技有限公司| 澳兰斯健康产业有限公司| 济宁硕通工矿设备有限公司| 广州环鑫网络技术有限公司| 杭州月半湾实业有限公司| 卷板机床有限公司| http://www.brainmotes.com http://www.outdoorinbox.com http://www.scrub-a-home.com