ui界面分析案例(ui界面分析案例ppt)

发布网友 发布时间：2024-09-25 21:00

我来回答

共1个回答

热心网友 时间：2024-10-04 11:57

众所周知，UI设计师若只追求静态像素的完美呈现，而忽略动态过程的合理表达，会导致用户不能在视觉上觉察元素的连续变化，进而很难对新旧状态的更替有清晰的感知。动效是UI设计项目的最后一个步骤，所以也是最关键的能给一套设计作品，注入灵魂。

所以，UI设计师必须通过「时间点」和「空间幅度」的设计为用户建立运动的可信度，即视觉上的真实感，当用户意识到这个动作是合理的，才能更加清晰愉悦地使用产品。

很多人其实不太了解动效设计是什么，其实呢简单理解就是，从一个界面点击跳转到另外一个界面出现的动画变化的效果就是所谓的动效设计，这是在视觉界面之上给用户提供的一种另外的视觉观感。（如上图的效果）

UI设计中，动效设计其实可以是一个单独的职业，具体看用人单位，以及用人单位的需求，比如说互联网公司的设计团队，一般UI层面的动效都不会太难，UI不需要太炫的动效，所以可能会让UI/视觉给兼顾了。

还有一些是专门的UI设计公司或者工作室，先说专门的设计公司：虽然UI上动效不会太炫，但是项目多，需求比较杂，必须要一专人来负责动效；

而工作室，或者小型公司，更多的是UI/视觉/动效都是兼顾了的，所以每一个优秀的UI设计师，都应该要学习懂得UI项目中的所以流程。

下面就是我想要跟大家分享的6种最常见的UI界面动效展示效果。同时附上每一种界面动效设计的案例给大家欣赏，以便于更加清晰的对这一种界面动效的认识。

1、转场过渡

人脑灰质会对动态事物（如：移动、形变、色变等）保持敏感。在界面中加入一些平滑舒适的过渡效果，不仅能让界面显得生动，更能帮助用户理解界面前后变化的逻辑关系。

2、层级展示

现实空间里，物体存在近大远小原则，运动则会近快远慢。当界面中的元素存在不同层级时，恰当的动效可以帮助用户理清前后位置关系，以动效来体现整个系统的空间感。

3、空间扩展

在移动端界面设计中，由于有限的屏幕空间难以承载大量的信息内容，可以通过折叠、翻转、缩放等形式拓展附加内容的存储空间，以渐进展示的方式来减轻用户的认知负担。

4、聚焦关注

聚焦关注是通过元素的动作变化，提醒用户关注特点的内容信息。这种提醒方式不仅可以降低视觉元素的干扰，使界面更清爽简洁，还能在用户使用过程中，轻盈自然地吸引用户注意力。

5、内容呈现

界面内容元素按照一定的秩序规律逐级呈现，引导用户视觉焦点走向，帮助用户更好地感知页面布局、层级结构和重点内容，同时也能让整个流程更加丰富流畅，增添了界面的活力。

6、操作反馈

无论是点击、长按、拖拽、滑动等交互行为，都应该得到系统的即时反馈，将其以视觉或动效的方式展现，帮助用户了解当前系统对交互过程的响应情况，为用户带来安全感。

最后，培养UI设计师的界面动效设计能力，可以大大提高UI产品的友好度、也是提升UI设计师自身技能和设计修养的表现。

通过友好的UI动效设计案例可以降低沟通成本和打造核心竞争力，这方面我们VIP课程也会重点讲解界面动效，帮助大家成为更优秀的UI设计师，如果你是零基础也能帮助你迅速成为UI设计师。

VIP系统课程详情点击原文链接了解↓↓↓

全能UI设计师就业班，全新一期即将开班！（不能再错过高薪）

UI设计，又称UI互动设计，（英文InteractionDesign,缩写IxD或者IaD),是定义、设计人造系统的行为的设计领域。

从广义上来说，也可以认为界面设计包含交互设计，在这样的情况下，它同时还包含另外的部分例如外观设计或平面设计，简单的说，把交互设计的理念体现在UI界面上，就是UI交互设计。是一种概念的说法。

下图这种就算是UI的一种。

UI界面中实战版式技巧分析1.版面中的空间关系元素在界面版式设计中，可以运用平面设计中的结构思考方法去理解UI界面中的空间元素结构的分布对应，下面以新闻类客户端为例进行页面元素分析2.内容过多处理方法为了让阅读更有效，可以采用不同标题规格、不同编排比例或不同色底进行层次上的划分3.模块化分割方法线条分割和空间分割的区别，分割线给人一种压迫感，而空间的分割给人更加轻松的阅读感受4.如何改变版面图版率与视觉空间比重我们来看下qq音乐会员中心页面的设计，不同的等级对应不同的颜色card，运用颜色填充背景吸引用户增加界面专属比重，起到账户切换视觉的引导作用，是一个很好的设计思路5.根据主题选择配图及配色方案我们在做设计时很多时候会去追求“高级灰”、“高逼格”亦或者是“独特性”，其实更重要的是要符合产品的调性和产品对象人群，不能一味的去追求自我的“设计追求”，比如下面的2个案例就很好的表达出了产品的调性，明确的告诉用户我是做什么产品的，为什么样的人群去服务的6.画面焦点表示在画面中相对更加突出的内容，让用户在浏览产品时能够第一视觉捕捉用户的眼球；焦点是相对的，在大页面中可以是焦点，在小模块中也可以是焦点6.1页面中焦点采用模态效果的弹窗给人以不可忽视的方式出现6.2模块中的焦点我们可以看到在优酷的“我的”页面信息以卡片的形式呈现，而会员购买入口则以一种带有色彩倾向性的颜色设计，表达了其的重要性；还有优酷的首页精选的卡片中“全网独播”等角标的设计在每一个模块中都很抢眼，很容易就能够捕捉到用户的视觉重心；苹果手机自带日历中当前日期的红色选中态以绝对的焦点方式设计呈现给用户7.界面平衡平衡是版面元素上下左右比例都比较适中，给人一种稳定和平衡的视觉感受。平衡的版式设计可以让画面稳定不会产生上下比重失衡的现象，平衡的比例构图令人愉悦，而不平衡的设计会造成不稳定的分散注意力。视觉平衡是指在设计中的负元素和正元素比例相对合适，设计师的作用就是发挥元素的视觉重量的构图平衡。8.字体的选择很多时候有的设计师在做界面时候都希望全端的字体能够统一，最好的办法是嵌入文字包，但给代码包增加了负担，所以我们需要去取舍！很多国产安卓手机都有自己的系统字体，要实际调研真机效果（如差异不大非必须嵌入字体）苹果和安卓常用字体如下9.有节奏感的版式设计节奏感的设计表现形式有很多种，比较常用的是在统一的样式节奏中穿插不同的模块来使得页面的节奏感更加的跳跃和灵活，比如Medium、网易云音乐的版式设计中都运用了节奏感的设计方法跳跃的节奏感给人以活泼和时尚现代的感受，不会让画面通盘单一且枯燥的呈现给用户；灵活的节奏感也为很多付费内容提供了很好的呈现方式10.常用版心边距距离整理不同行业的边距大小不同，内容信息较多的文字类和购物类产品的边距相对较小，而很多以图片、视频和音乐为主的产品相对较大！

如何创建精致的UI界面（一）：排版篇

从本周开始，接下来时间里，会和大家分享如何创建精致的UI界面，共五部曲，为什么要做这个分享？

曾经我学习UI设计时，网上资料很多，但是参差不齐，对于新人而言，这是很痛苦的，进步慢。因此我想通过之前踩过一些坑，集合自己的工作经验，把一些知识点分享出来。

分享的最终目的是沉淀自己，同时也希望能给有想要提升排版能力的设计师带来一些帮助与启发！所以本系列文章并不一定适合所有人。

那么本周就先从排版篇幅开启……

排版是界面设计中最难的部分，也是非常重要的一部分，它以各种形式存在界面中，纯文本排版，图形文排版，图片文本排版等等，这是我们在做设计时候，经常会面临的问题。好的排版能有效地向用户传递关键的信息，同时也能提升产品使用体验。

在我们日常生活中，离不开设计排版，包括经常见到的各种广告与电影宣传海报，如果不能让用户在短时间内记住关键信息，这个设计就是失败的。因此我希望通过今天这篇文章，能够让你对排版有一些新的认识。

在界面设计中，影响排版设计的因素有很多，我总结归纳了7个维度（当然还有其他更细的，在这里就先暂时不讲），它直接影响整个排版质量，这些方法当然不是绝对，但是如果能巧妙综合得运用到界面中，能保证大部分界面设计感得以提升，当然也是需要不断刻意练习来提高的。

分别是：

下面我会集合一些案例来和大家讲解下

空间即我们常说的留白，当设计元素紧紧地聚集在一起时，界面看起来没有重点，因此需要和谐的运用它，空间的运用规则直接影响产品的性格，小空间和大空间在视觉感受上，两者完全不同，那么我们在界面设计中如何去更好的运用空间来设计排版。

有一个很好的方法就是可以运用网格去搭建空间，在平面设计中，运用得非常多，那么在用户界面中，同样也可以运用网格去搭建，下面看一个案例：

如上图作者把一个界面分为4Gird，通过搭建好的网格来进行界面中元素排版，右侧是我拆解的图（备注：网格的搭建并没有任何强制性的规定需要搭建多少列，最终的搭建列数需要根据这个产品内容复杂程度去定义的），比如：我最近在做车载HMI设计语言，同样也运用了网格，那么我会根据整个车载HMI产品复杂程度去搭建，同时也运用了几种网格配合使用。

上面两个例子我们可以发现设计师运用了大空间来设计界面，这使得整个界面呼吸感更强，更透气，因为也是娱乐类偏杂文产品，所以设计会偏艺术化一些。

韩国29cm产品是我比较喜欢的一个app，整体设计呼吸感很强，留白空间大，视觉焦点清晰。

我们都知道大的物体更吸引眼球，更容易引起我们的注意，那么在设计中，我们一般都会将重要元素放大，突出显示。

a和b那个更吸引你？

答案是a.因为a类型排版看起来很大，更具有吸引力。

上面案例中算是大小方法上运用比较好的，我们可以看出视觉层次非常清晰了。首先我能快速知道哪些重要信息，肯定是封面图，接着左上角logo,然后就是导航和标题了，最后就是针对每个内容块的一些详细文案解释。

简单示例，重要的信息一定要大，次级信息弱化。

颜色在排版设计中起着很大的作用，能起到点睛之笔，又或者为画面带来活力，又或者代表着品牌，当然我们在UI界面中字体颜色一定要慎用，因为不同颜色含义是不同的。合理恰当运用颜色，能够瞬间提升设计品质感。

上面这个web设计中，设计师通过红色来强调重要信息，同时也让灰白的画面有了些许不同之处。

对某些文本使用辅助颜色，例如链接文本，图1使用方式正确。图2将颜色大量使用在正文，严重影响视觉体验。

避免像图2那样使用对比度低的颜色。

对齐是界面设计中我们经常提到话题，也是提升界面品质感最重要的一个隐形的力量，也许有时候我们会忽略他，有时候会不经意间就没做好。

对齐的界面比不对齐的要整齐很多，视觉流也符合用户阅读习惯。

我们可以借用前面所学的网格来对齐，这样不仅设计有节奏感，同时画面很整齐美观。

我们界面设计中可以有三种思路对齐方式，当然根据业务板块去选择合适的对齐方式，三种对齐方式都有一个隐形的轴（看我标的线），然后围绕这个去排版设计，自然形成一个规则的视觉流。

上面案例中作者整体偏左对齐，这样形成以左为中心一个轴展开视觉流走向。

我们在做界面设计时候，会经常遇到有人说你的设计，要么是这边太重了，要么就是太轻了，或者这边要不加点东西进去，不然太空了，为什么？

这就是平衡定律，如果同一个环境下的物体没有保持平衡关系，我们视觉感受上是很不舒服的。

下面我们看几个例子：

图1和图2我们可以看出，图2给人第一感受就是不平衡的，整体视觉重心偏左。

上图案例，设计师通过按钮来平衡整个画面视觉重心，因为左侧内容多，如果按钮很弱或者很小，是很难平衡画面的，因此我们做界面时候，定义一些按钮大小也是非常考究的。

左边视觉界面，右边拆解原型出来，我们可以看到设计师也是通过元素合理分布使得界面整体平衡。

字体选择对界面排版非常至关重要，这也是所有界面排版中必要的一步，不同字体有不同的性格属性，我们需要根据产品来选择恰当的中英文字体。同时，也需要记住，一个产品APP界面设计中，字体最好不要超过两种

推荐一些我认为2019比较好用的英文字体，大家做概念设计时候或者提案方案包装时候是可以用到的哦（吐血推荐）。

分别是：Montserrat和Nexa字体。

分别是：Futura和Playfair_Display字体

中文好用的字体，大家应该都知道，平方字体，思源黑体，汉仪旗黑，兰亭纤黑，我就不做示例了。

终于到最后一趴了，最后这点是整个设计排版的核心之一，为什么？

如果不清晰设计目标，那么整个排版风格也许最后产出和你用户群体或者产品性格是两种类型的，不同产品风格会有不同的排版style。

比如：我们产品是奢侈品，那么整体排版设计风格一定是使用大网格，大空间去设计，字体纤细等。如果是简约现代呢？又或者母婴产品，科技产品，娱乐产品等等，每个会有一些特殊排版思路。所以了解你的设计目标，并确定设计原则。

有了这些原则与目标，那么接下来就是开始找参考，找灵感找到对应产品他们是如何排版，如何控制画面节奏感的，推荐多去使用pinterest或者behance

通过七大点排版思路，可以更好的运用在界面设计中，每个排版原则并不是独立的个体，他们之间是相辅相成的关系，比如大小离不开网格，也离不开对比，颜色等等，缺乏某些元素，那么界面就会缺失灵魂，设计产出质量并不好！

好了本期到这里结束，下期会继续和大家分享如何巧妙运用图形提高界面品质感和增强细节！

题图来自Unsplash，基于CC0协议

UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。

也就是说UI包括交互的方式，普通电脑一般都是用鼠标、键盘进行交互，现在的手机，平板电脑大多都是触控等。

操作逻辑：即用户在操作的时候每个步骤，如何去操作，这种逻辑流转的设计，使用户操作简单方便，一目了然。

界面美观就是所味的GUI，即图形用户界面设计，主要是美观的设计。一般都由美术设计师完成的。

你是项目经理、产品经理、运营或交互设计师，否遇到过这样的情境？看了UI同学的设计稿，觉得虽然满足了需求，但是就会觉得哪里别扭，又不知该怎样表达。

你是UI设计师，当去给需求讨论设计稿时，两个方选哪个产生纠结，你根据自己的设计感觉有所判断，但又不知道怎么给对方讲清楚。

这时，你可能需要这几个原理。

因为U设计虽然是展示界面效果，但它并不是纯感性、靠审美的，而是有理可依、能够分析和辨别的。

紧接着，很多人可能要问：

“为什么？”

在回答这个问题之前，请大家先思考另外一个问题：

在这里，你可以稍作停顿，先别往下看，给自己个答案之后，再继续阅读。

当然，我们不是做美学论述，你不必顾虑是否会打错，更不必回答的专业而系统，只要把你的观点或直觉的回答写下来即可。

如果你还是不知道该写出什么答案，那我们构想几个场景：

当你辛苦工作一天，忙的饭都没吃，然后饥肠辘辘的回到家里，桌子上是刚出锅的你最爱吃的饭菜，爱人给了你一个温暖的拥抱，跟TA一起坐下来品味这顿晚餐。从味蕾到心灵，是不是都是甜美的？

当你在冷风渐渐消去的春日周末去郊游，看到植物园婴黄嫩粉的花苞，映着水蓝色的天空和几朵淡淡的轻云，你闻到暖阳的气息和草木的香味儿。你觉得大自然，是不是美好的？

当你在记录片里看到支教的乡村老师，为了更多的孩子能够接受教育，而艰难度日的时候，你流下感动的眼泪。你觉得人性，是不是闪着纯良美丽的光辉？

所以，此刻你知道”什么是美“的答案了么？

这些“高效率、满足感、舒适的、愉悦的、安全的、感动的”等等享受的状态，就是美。

下面就用几个案例，来解释一下为什么UI设计是一种，创造美的科学。

大家都乘坐过电梯吧！回忆一下“拥挤的电梯”和“不拥挤的电梯”，各自会带给你什么感受？

左：拥挤的电梯：空间剩余少，氧气不足、活动不便，导致气息不畅、情绪紧张、焦虑。

右：不拥挤的电梯：足够且合适的空间，给人生理和心理上的舒适感。

从这两个场景中，我们可以充分理解到“适度空间”对人感受的重要性。这一原理体现在艺术和设计中，也可以成为“空间感、呼吸感”。比如，中国水墨画中的“留白”。

延伸到UI设计中的例子：按钮文字与边缘的间距留白处理：

一张图小结一下：

如果是下图，把表格混乱的洒落，在你在其中寻找，你会是什么情绪和心理状态呢？

如果换做这样，将表格按序号由小到大排布摆放好，让你去找尾号1102那张呢？

看着这两堆表格，你的情绪应该有着明显的不同。合理的规律和秩序能够提高效率、符合人正常的思维逻辑，能够获得更好的体验，这一点也同样体现在视觉艺术上，比如这张风景照片：

整片的草地，或者是凹凸的山峦，并不足以让我们驻足或赞叹，但当草地有了光影明暗的起伏、山峦有了节奏和规律的线条，画面才显壮丽和神奇。看山的心情是平静的，而看山川是澎湃的，群而又律，则成川。

引申到UI设计中，规律且一致的形状，会在视觉心理上更能体现，或饱满、或自在的美感：

一张图小结一下：

下周要考试，如果我搬出下图中的所有书，告诉你：这些就是考试的内容，复习吧！

你的内心一定不要太奔溃呦~

先别忙着哭。如果我再告诉你：最下面的几摞，是同类备选书籍，选或不选都随你；中间几摞呢，是扩展性读物，不作为考试核心考点；上面的几本呢，是可以带入考场开卷翻看的；而最上面的一本，才是考试要考的核心内容。

是不是开心了点呢？

还有更开心的呢！我拿出上面那边告诉你：这一本中，只有每章节的第一页，划红线的，才是这本书里的重点考点，其他的仅作为了解就好。

此刻，是不是豁然开朗~~~~~

如果把全部书搬出来，说都是参考书，大量信息而没有重点的状态，会让人产生：迷茫、不安、压力和苦恼。

划分书籍的参考重要和次要程度，能够让人获得：轻松、自信、效率、愉快、掌控感等美好的感受。

中国的传统纹样图案，就很好的利用了这一原理，复杂的线条依照主次来疏密有致的排布，花为主体叶为辅助，展现出一个图案的层次性；多而杂的叶子中，通过卷曲方向和疏密程度分出主要叶片和次要叶片，让图案虽然密集丰富，却也简洁易读。

延伸到UI界面设计中，主要体现在层级关系的区分和表达上：

小结一下：

关于购物，让我们来个真假大比拼吧~

当你想买个名牌包包，让你嫌弃仿品，欣赏正品的原因会是什么呢？

正品的感受：细节感人、喜欢、踏实、品质、尊重、荣耀、满足感或成就感。

仿品的感受：粗糙、嫌弃、凑合糊弄、欺骗、轻视，低质量、愤怒感或失落感。

同样，在绘画艺术中，要拥有打动人的感染力，细节的精致刻画是不二法宝：

延伸到UI设计中，细节的讲究和门道，也是打动人的关键。

小结一下：

假设，你的男神或女神要给你斟上一杯红酒，你会端起什么样的容器呢？

懂品味的你，应该是这个选择：

如果你用这样的容器装红酒。。。

Excuseme？该不会，左边是酱油，右边是中药吧。。。

再脑补一个场景：

如果马上召开运动会，你的伙伴穿这样的着装出场，你会作何感想？

如果，不是运动会，是去参加一个高级晚宴呢？

礼服搭配运动场：奇怪、滑稽、别扭、蠢笨、愚蠢、不适的违和感。

礼服搭配高端晚宴：优雅、品味、自信、踏实、安心，自然和谐的归属和契合感。

这就是“得体和适合”带给我们的感受，最好的可能不是美，但最得体的，会美。

视觉传达设计中，也蕴含着这个原理。比如无印良品的海报设计，无论色彩、质感、构图、还是字体设计，海报极简、自然、家居、强调舒适感的风格，就体现出品牌的禅意和自然极简主义的气质和调性。

延伸到UI设计中，色彩样式的情绪和大众认知含义，要符合产品本身的属性或用户习惯，安全和工具属性极高的支付宝，蓝色更能产生放心和冷静的情绪，让人潜意识中知道它作为金融是安全的，它作为工具是高效率的。

如果换上淘宝橙，有差强人意了，尽管淘宝色是品牌血脉：

小结一下：

OK，通过举例，大家是不是对“设计来源于生活”，有更直观的理解了呢~~

以上”“这些体现在UI或视觉设计上的原理，都不是随主观评价或个人喜好创造出来的，而是由生活中的客观现象和生活规律而产生的。这也就是为什么，在本文起始，会倡导说”UI设计是一门科学“。

对于科学，一句话的参考定义是：科学是具体的事物及其客观规则。而UI设计恰恰就是围绕着“产品界面”这个具体事物、按照“用户的行为与心理”规则而展开的一项创造性活动。所以，在UI的本质是科学。

科学主要内容是具体的世界观与具体的方法。希望大家能够理解这种设计观，并能够将其方法合理的运用，合理的创造美。

接下来的几篇文章中，我将从“图形与界面空间留白、UI界面层级分析、字体排版、图形图片处理、界面配色”几个方面，详细来讲解，如何运用以上原则，科学的分析和设计UI界面。

感谢喜欢设计的小伙伴们持续关注~

通过本文，你掌握“因好用而好看”的设计思想了吗？可以试着分析一下你手上的UI设计，它现在是科学的么？有哪些可以改善的地方呢？

欢迎留下你的思考或建议，与大家一起进步。