UI设计

00 介绍托尼三三-设计公开课

提示：文档比较大，一次性加载大量图片，可能服务器返回 503 错误，可以点击链接访问原始笔记网页：https://cloud.seatable.cn/dtable/external-links/621babd7e22b4ceb88ec/

设计问题一定有底层逻辑可以去解决

及时设计推荐的一个 UI 设计课程

2024年2月系统学习

UP: 托尼三三

哔哩哔哩课程链接：https://www.bilibili.com/video/BV1uw411S77u/?spm_id_from=333.788&vd_source=2d5bdee7ea59486ed4aa4a9b10020224

01 单一素材

排版技巧｜只有1个素材，怎么做设计？

思路1：蹭经典的流量（椰树椰汁，茅台酒，杜蕾斯等经典背景图）

思路2：如果产品很单调，那么尝试把主要的卖点显示到界面中央，这样可以突出产品本身的外形，以及产品的特点。

02 原图杂乱

链接：https://www.bilibili.com/video/BV1Qz4y1T7V5/?spm_id_from=333.788&vd_source=2d5bdee7ea59486ed4aa4a9b10020224

如果客户提供的原始图片比较丑，怎么处理（例如色彩杂乱，背景杂乱）？

解决：找到客户产品的重点，以及产品主色调，把非重点部分藏起来

实例1：找到用户的特出特点，以及蓝色，把其他部分使用蓝色块隐藏起来，并增加产品说明

实例2：使用渐变色，藏起非重点

实例3：如果用户给的原图颜色比较杂，可以直接使用单色滤镜处理全图，然后突出产品重点特点。

注意，不同的颜色给人的感觉不一致，选择适合的产品主题色，全局的主题色尽量保持一致。

03 设计稿没有重点

如果客户的图片没有重点，或者重点比较多，主次不均衡，怎么处理？

1、使用大小对比

例如客户给的特点是多个特点和广告语，那么修改后的设计稿，就要提现“霸气汉堡”和实际的大型汉堡的图片。其他特点就忽略掉，这样重点更突出。

2、使用结构对比：

例如原始图片中全部狗狗显示，修改后只展示狗头，其他部分去掉。同时把上面和下面使用纯色遮盖，文字和背景色的区分度更明确。

3、使用模糊对比

如果背景杂乱，可以使用2中的纯色，也可以使用3中的渐变色或者模糊进行处理，突出文字和视觉效果

04 图片处理

5个常用的图片处理技巧

1、如果是图文设计，很多是左右布局（这种是常规布局，也符合设计逻辑）；当然可以把文字做成很大的，然后和主题层次突出，这样就能实现更突出的重点对比效果。

2、如果做出的效果重点不突出，可以巧妙使用分割线，手动创造突变线，然后一侧纯色，另一侧是背景，这样可以突出产品位置，以及左侧纯色覆盖的文字。

3、色块：如果产品（沙发）很单调，背景色如果是单一纯色或者渐变过渡，也是很单调的。这是可以使用色块进行区分重点和文字部分。

如果文字比较多，可以使用大小和层级进行区分，以及背景色块。

如果产品简单（相机），可以手动加一个背景色，避免单调的产品效果。

05 设计感到疲惫和创意枯竭？AI 优化

现在 APP 和各种网页的经典设计布局，已经基本成型，很多产品有了固定的 UI 交互。

例如登录界面，购物网站，短视频网站，都是固定的交互和布局，普通公司想做出别具一格的新交互很难，也大大增加了用户的学习成本。

这样也促进了 AI 的发展（大量的成熟产品，可以训练很多的模型），给几个提示词，既可以生成一系列的基础设计稿。目前 AI 可以搭建基础的设计模型，对于复杂的交互逻辑还是比较欠缺（按照现在发展速度，很快就有了）

AI 的发展，势必会取代很多低端程序员，低端 UI 设计师，低端会计，高端的岗位还是需要的。

对于本职岗位，AI 工具的使用，可以简化初始的开发过程，不需要考虑细枝末节等问题。

目前及时设计使用了 AI 快速生成设计稿，这个对于自己很有帮助。

06 完全陌生的行业需求怎么办？

本次分析三个问题：

1、完全陌生的行业怎么设计？

如果是完全陌生的行业，最好先参考已有产品的效果（同行业大量的落地效果，而不仅仅是完全的设计稿飞机图）

完全设计图：花瓣网、站酷网、Pinterest、Dribbble

同行业落地产品图：UI notes https://uninotes.com, uiii clubs https://uiii.club/apps 这就是实际 APP 的截图

2、如何避免设计出错？

及时设计中支持真机测试，可以在不同的终端中演示实际的效果图

3、设计效果怎么展现给客户？

样机 mockup

07 设计稿很平淡，如何提升视觉冲击力？

设计黑话：平——就是设计稿很平淡

先根据产品类型，分析需要什么样的设计稿？平淡还是喧闹？需要突出产品特点。

左侧的设计稿比较平和，右侧的设计稿比较冲击。左侧的字体字号范围不大，色彩主要使用渐变色，没有明显反差，显得比较平和。投策设计稿颜色突变比较多，文字突变也比较多，给人一种视觉的冲击力。这里不能直接评价这两个设计稿哪个好，需要看具体的使用场景。

视觉效果冲击力很低，可以通过三个方案优化

1、放大重点+层级叠层

这里把产品+宣传语放大，然后不同图层叠层，形成对比，更有垂直的效果

2、主题倾斜+色块对比

主题倾斜（对应文字布局倾斜）会更有冲击力

3、几何+蒙版

使用几何色块可以突出重点宣传语，使用蒙版去掉背景色中杂乱的效果

08 AI 推进了设计行业发展

目前 AI 技术 GPT 生成文本，midjourney 生成图片，sora 生成视频，得到很多的关注，使用很多。通过关键词或者自然语言描述就能生成结果。

国内的文心一言，站酷，及时设计等也推出了生成文本，生成设计稿等功能（部分付费）。

1、AI 能取代设计师吗？目前不会取代设计师，可以提高设计师的效率，辅助设计师（类似 PS 工具不会取代设计师，让设计门槛更低了）技术发展让入门门槛更低，会取代初级设计师（只会使用工具的设计师）。很多场景复杂性高，或者频繁改版比较高，所以也需要一定的人工改图等。

2、AI 能提高效率吗？可以提高效率，根据客户需求，生成大量概念稿。然后根据实际需求进行微调，还需要人来处理。AI 可以完成 90% 的工作，剩余 10% 的工作还需要人工处理。

09 设计中神奇的大与小

使用文字图片的大小对比，可以突出重点，或者诱导客户的行为（付费）

例如下面几个图片，使用大小对比，特出重点和产品

大小对比可以突出产品特点，但是不应该阻挡客户正常阅读

这里就是诱导客户选择（普通订阅或者关闭很小，优惠订阅很大）这种在抖音快手短视频中使用很多

想付费很简单，想关闭或者查看用户权限就很小

10 如何用200%的效率完成一个作品集封面

如果需要做一个作品集（个人简历中展示）那么不一定要多么花哨的效果，主要提现内容。

类比，自己的在线个人简历，也可以以 iframe 的形式，插入自己的作品和效果。

或者一个网站入口放各种demo，另一个页面以 iframe 的形式插入这部分 demo，就是自己实时的作品集。

11 原来基础渐变，让设计变得这么高级

如果设计稿比较单调（没有层次感），可以使用渐变色填充文字或者图案，形成不同的层级，这样比单纯的一个层级要更多层次。

当然，渐变的范围不要太大，通常是白色到灰色的文本渐变，或者一种颜色到另一种颜色的渐变。在同一个图片中，主体还是纯色，渐变可以设置在不同图案衔接的地方。

当然要避免使用 PS 中七个色阶的渐变，效果很奇怪。

12 原来渐变这么轻松就能搞定

渐变是设计中很重要的部分。如果主体比较复杂，那么背景使用纯色最好。如果主体比较单调，背景可以使用渐变。

主要介绍四种渐变

0 基础：色板知识

一个颜色可以分成四个区域，饱和度和明度变化如下，不同区域对应不同的效果和感情色彩，使用在不同场景

1、清新：20岁姑娘淡妆

2、明艳：20岁姑娘浓妆

3、稳重：40岁女士淡妆

4、复古：40岁女士浓妆

1、两个颜色的渐变

如何选择一个颜色？从色板中分析四个区域，先分析场景的特征，然后选择合适的主题色

如何选择两个颜色？从色环上选择。两个颜色的取色范围角度不同，那么实现的效果不同。通常取60以内的最好。

我们可以看到，30-60比较稳重，90、180就比较突变，这样需要背景色和主体内容颜色不冲突。默认选择0-30-60就好。

2、一个颜色明度的渐变

3、一个颜色纯度的渐变

4、多个颜色弥散渐变

这个颜色，个人觉得实际效果不是很好，不容易把握。

下面给出两个网站可以直接生成弥散渐变的图片，或者使用 PS AI 作图。

如果使用弥散渐变，那么主要内容颜色应该醒目单一。如果主要内容就很复杂，那么加上弥散渐变就容易混乱。

13 人再多也不怕！群像设计别再害怕

群像设计：设计稿的主题是多个人，每个人还有特定的标题（例如电影的海报，有多个主演和特点，形态肤色颜色不同，比较难以处理）

原则：弱化人物差异性，强化设计统一性

1、常规思路

使用相同的外框

人物大小相同

图片去色（如果人物肤色差别比较大，可选，灰色人物有风险）

例如下面两个设计稿中，设置了相同的边框（背景色）然后把人物单独抠出来，避免背景色，大小调节的基本一致。每个人的名称和头衔可以以渐变或者纯色块放在人物下方，达到设计整体一致性。

2、突破常规思路

在第一种思路基础上，可以把边框设置成不同的尺寸，任务也可以不完全放在边框内部，有一部分突出边框。或者使用不同的图层叠放人物，突出人物的重点和对比。

3、躲猫猫设计

在前两种的基础上，可以把人物放在一个曲线（撕纸）或者一个块级区域，这样可以达到很好的视觉效果。

14 设计总是很空，如何快速解决

如果设计界面内容比较少，如何达到很充实，但是不乱的效果？

1、延伸细节

可以在基础产品的细节，例如增加相同的纹理和相同的颜色，让界面整体效果充满。

2、背景虚化

可以选择主要产品内容，然后作为背景，然后进行虚化页面，这样可以让背景不空旷，也不会妨碍主要产品和宣传

3、复制和放大主要特征

不影响效果的情况下，放大产品的某个特点，实现重点明确，界面较满的效果

4、重复主题

可以把主题或者标语重复显示在空白区域

15 震惊！模糊的设计也可以这么好看的吗

模糊的三个作用：

1、设计稿主要部分通常是清晰的，使用模糊淡化背景，引导客户，突出重点

2、模糊表示运动和速度

3、给单调的背景增加柔和，生成背景

16 客户觉得我的设计不够酷炫？

5个网站链接都在这，可以做出炫酷的效果 1. blobmixer：https://blobmixer.14islands.com/ 2. Ribbons 2：https://codepen.io/tsuhre/full/BYbjyg 3. Stars-Emmision：https://wangyasai.github.io/Stars-Emmision/ 4. Silk：http://weavesilk.com/ 5. gradienta：https://gradienta.io/shattered-feelings/