![全链路UI设计:创意思维+项目实战+就业指导](https://wfqqreader-1252317822.image.myqcloud.com/cover/615/38493615/b_38493615.jpg)
1.1.2 设计软件分类
以上的产出内容涵盖了绝大多数初级UI设计师的工作,接下来要根据这些设计内容的要求来分析所要掌握的软件和知识点。设计软件基本可以分成静态软件(Photoshop、Illustrator等)和交互软件(Adobe XD、Sketch、Axure等),如图1-15所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/cut_20_6445_m.jpg?sign=1739615750-essDEejEgkDd6XLRsbtq1WP5tO9zyApT-0-2ea0b0061286cc3601050fd80aeec787)
图1-15
1.Photoshop
Photoshop(简称PS)是我们学习设计软件的起点,熟悉它的交互、功能、思路、专业名词对我们快速学会其他设计相关软件有至关重要的作用。在平面相关领域的工作中,PS也是我们必然会使用的软件。作为一款“巨无霸”软件,我们不可能在短期内学会它的所有功能,所以,有必要筛选出常用的功能模块。
(1)创建与保存
第一步就是新建文档,可以选择尺寸和分辨率,如图1-16所示。如果输出要打印的图片的话,分辨率应设置为300像素/英寸,这样打印出来图片才会清晰。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_21_0_m.jpg?sign=1739615750-0nWfust9SL8WPy71Mm8kiF08MmPosoDO-0-b725322f4a71939a697b8cb4dfd739ea)
图1-16
(2)工具栏
工具栏中有很多基础工具,其中经常用到的是移动工具、矩形选框工具和裁剪工具,如图1-17所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_21_1_m.jpg?sign=1739615750-TaP8eHZHJDHFa8O0EUCDdtGPmEghpwf4-0-7ec8919fae11daf3c26c0ab7bad873a9)
图1-17
(3)钢笔工具
钢笔工具是每个设计软件中必不可少的重要工具之一。PS中钢笔工具的使用、贝塞尔曲线的调整是让新人头痛的点,要掌握使用方法,可以在初期临摹一些图案,后期逐步原创一些造型来掌握这个工具,如图1-18所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_21_2_m.jpg?sign=1739615750-A94JFeiIxGkCPX4utQsAMATB2Lmsa1qS-0-5245645b9febadc13b5f9c419c1dd11e)
图1-18
(4)图层样式参数设置
图层样式各个选项的具体作用和对应的应用场景主要在拟物设计章节中深入讲解。通过图层样式的叠加使用,可以制作出逼真写实的图案。图层样式参数设置窗口如图1-19所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_22_0_m.jpg?sign=1739615750-NiQqVbPR8JsGvnLLRKJquvE2XOlhE5S7-0-0cc16a056efcd4ae4e45281bc64b7217)
图1-19
(5)调色功能
PS色彩相关的功能,如通道、色相调整、曲线等主要用于图片、照片的美化和调色。执行“图像”→“调整”命令,可在子菜单中选择相关功能,如图1-20所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_22_2_m.jpg?sign=1739615750-APxNjpetNE6rr6wzcQY4VevuKPLH6M5S-0-da627ca971ece3676992fdde7982eb6e)
图1-20
(6)滤镜库
滤镜库是一个艺术效果合集,里面有很多的艺术效果。执行“滤镜”→“滤镜库”命令即可调用,如图1-21所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_22_1_l.jpg?sign=1739615750-8k5QN2hyxKppZiJ6T8LBPFYxjWPcZ2Qp-0-42455272062684577b46519a7cbff43c)
图1-21
执行命令后弹出滤镜库窗口,其中有风格化、画笔描边、扭曲、素描、纹理、艺术效果等类别,选择不同效果会把原图转换成相对应的艺术风格,如图1-22所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_23_0_m.jpg?sign=1739615750-Xbs8j5EBhManLQs5yYYi0ZKXVwffsRf5-0-9b13214c38d43b3cc7d6174ce7e695e9)
图1-22
(7)布尔运算
可以对路径使用布尔运算来进行图形的绘制。在制作图标、Logo时经常用到这个功能,如图1-23所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_23_1_m.jpg?sign=1739615750-sw7yQjt6DIWK0P31LZsyLLrLuITjntZL-0-be1c37e2d9a4a8c6a5b5ac1671d265f5)
图1-23
(8)字符设置
在“字符”面板中,可以选择字符样式、大小等,如图1-24所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/cut_23_30405_m.jpg?sign=1739615750-FJMY3HoS11PvQNnesTAXr3s51CwgyQlA-0-7e07b2df6dc1e5f4651d93fdb816e59c)
图1-24
2.Adobe Illustrator
Adobe Illustrator(简称AI)是PS的“孪生兄弟”,它们看起来很像,但是应用不一样,只要熟悉了PS,AI学起来就很容易。前期只需要专注于图形和图标的设计即可。
特别提示
AI和PS的区别在于,AI里面绘制的图形都是矢量图,不会因拉伸和缩小而导致图形模糊。
(1)创建与导出
AI的关于文件创建的知识和PS一样,但是画板规则相对更复杂,应尽可能地了解清楚,并且要区分AI保存和导出的不同,如图1-25所示,直接拖动要导出的内容到“资源导出”面板中,单击“导出”按钮,选择目的路径即可。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_24_0_m.jpg?sign=1739615750-BCRy2gdknV4p44my80Yn77sM3xfm5Zfi-0-7fbc8a176ea04c974aad6c804f25f0da)
图1-25
(2)钢笔工具
AI的钢笔工具和PS差不多,如图1-26所示,但对路径的处理更完整、多样化,具有路径查找器、变形工具、操控变形工具、圆角控制器等实用功能,钢笔工具快捷键是P。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_24_1_m.jpg?sign=1739615750-XSO32lxMcmHVojLq6o1wVmHg0uLaYUlh-0-9edb6d146a9811f71b11373108aec492)
图1-26
(3)色彩填充
AI中填充颜色的方式为:画出一个形状,双击工具栏下方的色块,弹出“拾色器”窗口,选择颜色,单击“确定”按钮即可,如图1-27所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_25_1_m.jpg?sign=1739615750-gUNWKaDBNxT2MFmuqku4mNcTAeCbQFl4-0-dd2659ee97a11d1b2896aee91f8fb201)
图1-27
特别提示
互换填充色描边的快捷键是:Shift+X。
(4)画布标尺
了解AI画布相关设置,标尺工具的使用规则,可以辅助我们进行创作。图1-28所示是标尺属性的设置面板,我们可以根据需要进行设置。按快捷键Ctrl+R可以打开或关闭标尺。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_25_2_s.jpg?sign=1739615750-Dk2WRUOSZ5s8foMbaVQgF7DnZdzhbtQB-0-53ce4aa8d5ce213f3aaf70fd075e5f6a)
图1-28
3.Sketch、Adobe XD
这两款软件相对于前面两款软件难度较低,只要熟悉了PS、AI,几天时间就能上手。它们对UI设计的支持很友好,速度快,效率高,选择其中一个主攻就可以。唯一的不足是Sketch只能在苹果系统中运行。而Adobe XD则是苹果和微软系统都兼容的。两款软件图标如图1-29所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_25_0_m.jpg?sign=1739615750-GPerclveqSFWD2ggJRN9b0WRtblEreuG-0-2d061df510fefe107187d2adba960806)
图1-29
4.蓝湖、MarkMan
蓝湖和MarkMan这两款软件都是用来进行标注、切图和协作的,在了解切图相关的知识以后,只需要花一点点的时间就能学会如何使用它们,如图1-30所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_26_0_m.jpg?sign=1739615750-dPoQq4HmurwL1kVbYMW2Qut3FZKlLjlc-0-84fdfe539b1413485fc417b4f16124ce)
图1-30
蓝湖是一款产品文档和设计图的共享平台,帮助互联网团队更好地管理文档和设计图。蓝湖可以在线展示Axure文档,自动生成设计图标注,与团队共享设计图,展示页面之间的跳转关系。
MarkMan软件只能做图片标注,但是体积小,可以轻松上手。
5.Principle、Flinto(选修)
Principle和Flinto都是制作动效的软件,对动画效果要求细致的设计师用Principle制作,而页面多、大部分页面以简单跳转为主、对动效细节要求相对不高用Flinto。二者都是苹果电脑独占软件,图标如图1-31所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/image_26_1_m.jpg?sign=1739615750-R4ntiav65pH88dZc0kNugXQuhxWQvtk2-0-4be5fac61320f58922eb1eb8e3a41702)
图1-31
6.PowerPoint、Keynote
PPT和Keynote是职场必备软件,而设计师应该用得比普通人更好,可以更好地将我们的思路、设计展现给其他人。Keynote是苹果独占软件。两款软件图标如图1-32所示。
![](https://epubservercos.yuewen.com/947B6A/20259198008644706/epubprivate/OEBPS/Images/cut_26_46461_s.jpg?sign=1739615750-GrSKgskKrcWoMogtZB9nV8f4UH8h4NYD-0-a898a03abbc039da22459039464bfb91)
图1-32