¶
统计信息：字数 19350 阅读39分钟
UI设计 第一部分¶
原始教程链接: https://js.design/courses
00 介绍 托尼三三-设计公开课¶
提示：文档比较大，一次性加载大量图片，可能服务器返回 503 错误，可以点击链接访问原始笔记网页：https://cloud.seatable.cn/dtable/external-links/621babd7e22b4ceb88ec/
设计问题一定有底层逻辑可以去解决
及时设计推荐的一个 UI 设计课程
2024年2月系统学习
UP: 托尼三三
01 单一素材¶
排版技巧｜只有1个素材，怎么做设计？
思路1：蹭经典的流量（椰树椰汁，茅台酒，杜蕾斯等经典背景图）
思路2：如果产品很单调，那么尝试把主要的卖点显示到界面中央，这样可以突出产品本身的外形，以及产品的特点。
02 原图杂乱¶
如果客户提供的原始图片比较丑，怎么处理（例如色彩杂乱，背景杂乱）？
解决：找到客户产品的重点，以及产品主色调，把非重点部分藏起来
实例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、重复主题¶
可以把主题或者标语重复显示在空白区域
