是完美的，不是因为没有什么可以加，而是因为没有什么可以去掉。创建一个美观、易用且高效的UI界面需要时间来打磨设计细节。本文从视觉设计和情感设计两个方面来谈谈如何提升UI设计的高级感。视觉元素在互联网产品越来越成熟的今天，你会发现所有的APP都越来越相似，似乎都是用同一套模板设计的产品。而这种通用的设计会导致严重的同质化，使设计不精致，产品没有气质和品牌感。一款APP的设计是否精致、是否富有设计感，关键在于细节，这意味着我们在设计的时候，一定要从细微处入手，从多个方面去钻研如何打造出令人印象深刻的UI设计。本节总结了12个简单直观的小细节，提升设计感，一起来学习吧。1.使用颜色阴影来构建层次结构当设置UI文本样式时，最常见的错误是过度依赖字体大小差异来创建对比。简单地使用字体大小比较不足以形成对比。尝试结合颜色和字体粗细来创造更好的对比效果。每种颜色都有视觉权重，有助于在内容中建立层次结构。通过使用颜色阴影赋予元素不同的重要性。如果可以，您甚至可以使用两种或三种颜色：深灰色用于主要内容（例如标题，但不是纯黑色）灰色用于次要内容（例如产品描述）浅灰色用于次要内容（例如发布日期）同样，在UI设计中，通常两种不同的字重足以营造良好的层次感：普通字重对大部分文字（400到500，取决于字体）和对需要强调的文字字重较轻（600到700，取决于字体）在字体上）△主标题的权重为600，其他用绿点标记的文字权重为400。尽量不要让文字部分的权重低于400，因为这部分字体本身的size已经很小了，任何低于400的值都会导致可读性差。如果你还需要降低字重，那么不妨把字体颜色调浅一点，或者换成其他识别度强、字重相对较小的字体。灰色文本应在无色/彩色背景上单独处理。不要在彩色背景上使用灰色文本。在白色背景上，将黑色文本改为灰色（或在黑色背景上使用灰色文本）是淡化它的好方法。视觉效果练习。但在彩色背景下，通常有两种方法来降低与背景颜色的对比度：一是降低白色文字的不透明度；二是降低白色文字的透明度。另一种是使文本逐渐接近背景颜色而不是灰色。△左图设计师职位信息为降低不透明度的白色文字，右图为与背景色调相同的颜色。其次，对于长内容，大面积的深色粗体文字会给人一种沉重感和跳跃感。这可以通过选择深灰色(#4F4F4F)等颜色轻松解决，使文本更易于识别。2.统一色调选择一种基色，然后调整色调和颜色深度以增加平衡。设计时避免使用过多的颜色。如果您的项目允许，只需使用固定色板并将其用作通过调整基色的饱和度和亮度来增加设计一致性的简单方法。3.干净的阴影阴影是UI设计中最常用的视觉表现手法。它可以增加元素的深度，使其从背景中脱颖而出，吸引用户的眼球，同时增强画面的视觉层次感。与使用大范围的漫反射模糊阴影相比，使用细微的垂直偏移阴影更明显、更自然。它模拟了最常见的光源特性，即光线从上向下照射所产生的阴影效果。这种柔和阴影的清洁增加了画面的复杂性。如果阴影范围太小或颜色太深，位置没有偏移，而是聚集在元素周围，会使画面变平，视觉变厚，呈现出粗犷的画面。阴影不一定是黑色的。还有一个漫反射阴影，模拟元素本身投射在背景上的颜色。由于阴影与元素的色调一致，因此呈现出非常和谐的画面。在UI设计中，这种方法不宜过多使用，否则呈现出来的各种颜色组合会让人眼花缭乱。4、个性化的图标设计合格的设计师可以画出风格统一的图标，优秀的设计师可以创造出风格独特的图标。我们能否在追求尺寸、圆角、线宽、配色一致的同时，为其视觉表达增添更多创意？比如下面这组图标设计，无论是图形创新还是配色都展现了无与伦比的创意。tabbar作为一个app的全局导航起着至关重要的作用，它的设计影响着整个产品的视觉风格。通常，大部分App都采用iOS规范的设计风格（默认为灰色，选择品牌色）。这样的设计太普通太普通了。为使标签栏的图标设计精美且富有个性，可以丰富每个选中图标的视觉表现，例如为图标添加背景和表情，不仅看起来活泼有趣，还能增加用户的好感度，给人留下深刻印象。印象。3D三维图标设计是近年来的流行趋势。看起来非常精致华丽，但时间长了会造成轻微的视觉疲劳。同时，由于其结构复杂，会增加用户的认知成本。通常，它在食品配送应用中更为常见。5.Tab的设计感Tab是App设计中最常见的控件之一，源于MaterialDesign的设计规范。现在很多iOS产品都开始使用这种导航栏样式进行设计，原本属于iOS规范的segmentselector已经不那么常见了。在视觉表现上，Tab和tabbar也分为选中状态和未选中状态。它的设计相对简单。通常，一组文本标签用于通过颜色或在标签下方添加一个小横条来区分两者。地位。因为简单，但越是设计出彩越难，需要发挥极大的设计想象力，跳脱设计规范的限制，找到完美的解决方案。比如虾米音乐的Tab选中状态是一条音频波浪线，结合文字的大小对比，打造出具有设计感和产品特色的Tab。我们还可以从品牌DNA中获取灵感，用户??熟悉的品牌形象是极好的来源。从品牌形象中提炼出具有独特气质的视觉财富，如Tab选中状态下的小条，建立视觉联系，让用户有由内而外的一致感受。例如，马蜂窝品牌形象中的笑脸符号和飞猪品牌形象中的猪头都被延伸到Tab的设计中，不仅让界面在视觉上与众不同，也进一步强化了用户对品牌形象的认知。品牌形象。6.无框设计，化繁为简在UI设计中，有很多装饰元素，比如卡片的边框，列表的分割线等等，虽然边框和分割线是分隔两个元素的好方法，它们不是唯一的方式，过度使用会降低整个布局的设计感，或多或少会干扰用户的浏览视线，使信息内容失去关注度，因此可以减少不必要的装饰元素。我们可以通过以下方法来划分元素的视觉层次，使画面干净整洁：使用阴影和阴影也可以营造出一种边界感，而且比边框分割线更隐蔽，不会显得突兀或散乱用户的注意力使内容更加集中。使用不同的背景颜色来区分通常，相邻的元素只需要有微妙的背景来区分它们。所以，你需要做的就是为不同的块使用不同的背景颜色，并尝试删除分界线，因为你根本不需要它。添加额外的空白以在元素之间创建分隔不必通过线框来完成，只需添加空白来分隔它们即可。通过空白和间距对元素进行分组是UI设计中的常用技术。7.统一设计元素应用程序中的每个界面都有很多元素，那些同类元素应该保持统一的设计风格。通常情况下，个人中心标签栏中的图标是一个代表用户的人影，因此可以在显示用户头像和用户形象的界面中继续使用。如果图形具有独特的外观，如椭圆，也可以作为视觉符号，可以扩展到其他界面，成为图形或按钮的外观。这样，整个界面由统一的设计元素串联起来，给用户一种一致的一致性感。8、符合产品气质的字体选择符合产品气质的字体，既能配合产品的定位，又能向用户传达正确的情感意识。虽然默认字体可以满足大部分APP的设计需求。但是会有一个问题就是系统字体的通用性没有特点，在某些特定的情况下似乎作用不大。例如，在体育应用中，粗斜体更适合传达力量、爆发力和速度的感觉。换成系统字体后，整体感觉气势上就弱了很多。9.统一的第三方图标样式大多数应用都支持第三方登录，可以减少用户注册的时间成本。通常，第三方图标入口显示在注册登陆页面的底部，这也是设计师最常忽略的内容。很多时候，第三方图标都是直接调整到一致的大小，放在整齐的位置，而不需要重新设计。一个设计良好的应用程序不应遗漏任何细节。我们可以根据自己APP的图标风格来优化第三方图标的设计。10.寻找图片中的颜色。App中精美的图形设计能够给用户带来耳目一新的视觉享受是非常重要的。我们经常看到文字的设计风格叠加在图片的背景上。为了减少复杂的图片背景对文字的干扰，通常的做法是叠加一个半透明的黑色遮罩，让白色的文字清晰可见，但这并不是最好的办法。我们可以将图片中的主色提取出来，叠加在背景的填充色上，让文字、色块和图片融为一体，让图片变得高级、富有设计感。11.提高图片质量图片质量影响整个app的风格和用户的心情。高质量的图片给人以愉悦的视觉享受，产生美好的联想。而低质量的图片会瞬间降低app的质感。在App设计中，一张漂亮的图片从收藏到上线，需要经过裁剪、上色等过程，才能使用。哪怕是一张普通的产品图片，我们把它裁剪出来调整成统一的尺寸，加上干净的背景，立马提升了产品的美感，视觉界面也会变得美观整洁。12、卡片式设计在目前的UI界面设计中，卡片式设计已经是一种非常普遍的设计形式，有利于信息的分层和整合，划分更清晰的组织结构，实现复杂内容的简化处理，提高空间利用率。同时，卡片式设计通常非常依赖视觉元素。强烈的视觉元素只是卡片式设计的优势之一，也是提高设计质量的好方法。情感设计心理学认为，情感是人们对客观事物是否满足自己需要的态度体验。只有当产品打动了用户的心，让他产生了情感上的变化，产品才不会再冰冷。透过眼前的事物，他看到的是设计师为了他的使用体验，对每一个魔鬼细节的用心。想一想，人们就会产生喜悦、爱和幸福的情绪。情感化的设计并不轰轰烈烈，有时候只是一句文案、一张插画、一段动画就能打动人心，让用户享受愉快的体验。让设计更高级，不仅仅是视觉层面的问题。这些简单而美丽的设计细节充满了积极的情绪。是在满足产品的功能性和易用性后，对更高层次目标的追求。1、暗示性的文字语言是情感化设计最直接的武器。比起冷言冷语，拟人化的对话更能赢得用户的好感，赋予产品新的生命力。比如app的那些推送通知，因为用户每天收到的PUSH太多了，早就心安理得了！这时候就需要一个低成本高效率的PUSH文案来撩动用户的心。把原来对用户的打扰变成一种调侃，让人会心一笑。2、下拉刷新下拉刷新是用户在使用APP时经常进行的操作。下拉刷新常见的设计是图标和文字的形式。这种设计简单直观，但是没有设计感，不能引起用户的任何情感。下拉刷新是一种临时状态，丰富其设计细节不会造成与产品界面的不兼容。相反，设计丰富的下拉刷新设计更能让产品获得用户的青睐。比如uc头条下拉刷新时，会弹出一只奔跑的小鹿，暗示正在快速加载新内容，小鹿的形象延续了品牌logo。作为信息产品，内容更新的速度非常重要，奔跑的小鹿只是对此的一个比喻。用户也在这种愉快的心情中对产品产生了好感，瞬间让下拉刷新变得生动有趣。3.头像设计个人中心页面与用户信息密切相关，展示用户的头像。常见的设计是用户头像加上登录文本。此默认头像设计无法被用户识别。现在很多产品都放弃了死板的默认头像，给了用户更多的选择。赋予产品一些人格魅力，可以让产品充满活力，消除人机界面冰冷的交互，帮助用户与产品建立起友好的关系。比如美团外卖和猎评，它们各自的身份代表着产品的气质和用户的属性，给用户一种认同感。4.默认页面化解负面情绪。通常的状态是当前页面没有内容或者没有网络时页面出现。常见的设计是图标和提示文字的形式。这种简单的设计会让用户的心理产生很大的落差，陷入负面情绪。情感设计在这个时候可以发挥巨大的作用。它使用设计手段来减轻用户在看到没有内容的界面时的挫败感。设计师有很大的发挥空间。根据产品属性和品牌延伸图形，结合动态效果或插图等情感设计，可以很好地丰富页面内容。例如，平坦的空白页面呈现可爱的场景，让用户会心一笑，让产品充满乐趣。5、标签栏微动效果的情感设计越来越丰富，图标设计升级为展示动画效果。通过使用动态效果，标签栏切换不再死板。用户不再因为频繁切换页面而感到单调。精心设计的动效可以缓解用户等待时的焦虑情绪，缩短用户心理上的等待时间，让品牌更加深入人心。6、模拟用户行为如果一款产品能够模拟用户行为，将用户置于真实情境中，用户就会对产品产生深刻的认同感。比如《潮》会根据时间场景和季节变化播放不同的背景音乐来营造气氛。雨声、雷声、风声、潮汐声等，时刻让人感受到身临其境的情境。情感化设计可以拉近用户与产品的距离，更深层次地体现对人性的关怀，给人带来情感上的愉悦和感动。洞察用户行为，换位思考满足用户需求，发生情感沟通。比如你截图了一张图片，打开微信对话框会自动显示图片，提前预知你需要发送截图。又比如，很多观众习惯了在电影结尾等待彩蛋的习惯，因为很多时候他们坐在影院等彩蛋，但是没有彩蛋的时候，就只能浪费时间了徒然。当你在“淘票票”购买电影票时，你会发现在电影详情页会有彩蛋提示，告诉你该电影是否有彩蛋，彩蛋会出现在电影中的什么地方。有了这些提示信息，就没有必要浪费时间去期待不确定的彩蛋了。7、有趣的细节设计俗话说：有趣的灵魂是百万分之一。可见，有趣可以引发交流，让人产生积极的情绪。在UI设计中，一些有趣的设计是看不见的，需要用户自己去发现。当用户找到这个彩蛋时，他们会获得一种快乐和乐趣，这会增强用户探索产品的欲望。比如在电脑上打开B站鬼畜区按住返回图标10秒左右，就会打开鬼畜区新世界(⊙o⊙)（友情提示：记得去戴耳机或调小音量）其实在顶部长按“返回”10秒后，页面底部会出现一个黑框，提示“尝试输入字母，发现鬼畜的秘密”.按照提示，乖乖输入字母，幽灵动物就会出现在你的屏幕上！一些有趣的设计是明确的，目的是让用户与产品交流并产生积极的情绪。比如成为优酷视频会员，不仅可以享受丰富的影视资源，还可以让自己的ID在发弹幕时使用剧中相关角色的头像。角色扮演化身的弹幕让演讲更加身临其境。这个彩蛋的设置一方面强化了会员的尊严感和特权感，另一方面也丰富了弹幕区域的多样性，可谓一箭双雕。总的来说：UI设计的“高级感”，是指在视觉层面，要从细微处入手，打造精美丰富的设计画面；另一方面，要从情感设计入手，让用户和产品在情感上产生共鸣，获得更高层次的体验。写在最后，最好的学习方式就是总结分享每天积累的知识点，才能真正拥有。在新的一年里，希望每一位设计师都能继续保持对设计和生活的热情和热爱。希望这篇文章对你有所帮助。
