持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情
今天我们设计一个UI软件界面，具体一下设计流程，以及产品的logo制作
目录
分析企业产品项目 功能 特性 使用群体 项目定位 一杯奶茶logo制作 首页logo展示图 产品Logo缩略图 一杯奶茶企业UI界面设计 启动页 引导页 首页和菜单栏界面 登录和个性化设置界面 产品列表页 产品详情页 产品支付界面 产品支付成功界面
一.分析产品项目
在产品经理处获得原型图也叫低保真图，UI设计师对其进行功能，特性，使用群体和项目定位等的系统分析才能进行UI创作，UI设计是一个系统，并不是简单的一个logo一个图标或者说是一个界面，它是运用之前所有的综合起来的一个设计项目，设计项目必须要和设计经理的目标项目方向一致，不能有所偏差，这个需要和设计经理进行沟通
功能
“一杯奶茶”是一个奶茶平台拥有线下和线上双重市场，是一个为了迎合用户喜好创办的企业，在这里说的功能其实是在手机上UI界面的各个图标的功能和布局，主要分为首页布局，订单布局，分类布局，我的主页面板布局。
首页布局主要的功能是推荐各种奶茶的型号每种型号有不同的推荐。系统分类要放在分类面板中，首页布局主要是推荐各种产品，以及用户经常浏览的产品种类型号，来确定今后对此用户推荐的产品型号。
特性
奶茶产品特性主要分为三个模块，特征和特点，三个就是对产品的一些具体介绍，可以说是详情页的原文吧！详情页主要是对产品的介绍最为重要，UI设计视觉方面的需求是次要的，其次，在奶茶产品特性方面，可以在介绍产品时突出强调制作的历史，发源地。就像特仑苏一样着重强调了在哪里生产的生产历史有多么悠久，奶源多么纯正，这样才会给产品带来正面的影响力度。人们会奔着绿色健康的理念去买价格昂贵的，对身体有益处的品质，更高的产品，这是对当下物质生活能够满足的情况下，这种对健康绿色的需求里面才会诞生，迎合了当下的市场氛围，所以才会有许多进口超市，海外贸易的商场，都是国外发现了这个商机在提高产品品质后扩大市场的体现。奶源的发源地一般都是在牧场和草原，蒙古国就是一个奶源非常丰富的国家
使用群体
用户群体十分广泛，有学生消费群体，小资本消费群体，高端消费群体，还有一些情侣和儿童的消费群体，其中学生和小资本消费群体占绝大多数，普通家庭一般都属于小资本消费群体，有些奶茶店甚至把学生消费群体作为主流消费群体，为了迎合学生的消费理念，制作各种符合学生口味的产品，除此之外，一些大型公司会奖励员工方面面，奶茶作为奖品给予企业员工，这样奶茶就走了商务途径，成为了商务顾客的消费品，高端消费一般都是企业统一购买或者是学校等大面积统一购买的都属于是商务类型消费，其他的正常个体购买都属于是生活消费，提高个体购买力度那就是要提升产品的知名度，产品品质，来使产业的市场回头率升高，奶茶的消费群体大多数来自个体购买力较强的消费群体，用户群体大多数是年轻人，具有新时代潮流
项目定位
奶茶项目定位主要分为几个内容，市场定位，顾客定位，选址定位，对自身投资实力，管理能力的定位，这些是在创业规划中需要做好的定位，在UI界面设计中就不一一赘述
二.一杯奶茶logo制作
用Illustrator软件制作一杯奶茶logo图标，主要分为首页展示图标和左上角产品Logo缩略图，有些UI设计的界面需要做更多尺寸的logo，这个小程序比较简单，只要做两个，有一些大的企业的网上平台，不仅会在微信小程序中，还会有自己的APP，这些图标看似一致，但并不一样，需要每一个重新制作，而且要符合大小尺寸标准准
首页logo展示图
首先Adobe Illustrator 2022，新建A4纸张
在视图菜单下找到透视网格命令，选择两点透视选项，它会新建一个下面这样的透视网格，为什么选他呢？因为他是研中心轴左右对称的
用钢笔工具，在网格的交点画出左右对称的杯子图形，用选择工具微调，用第二个直接选择工具（白色箭头）按住ctrl+A，就能看到每个端点，里面有一个白色的圆圈，将白色圆圈往里拖，边缘就会形成一条弧线
在之前全选的状态下，就会使四个角都变成圆角，按住shift用第二个直接选择工具双击路径，会有把手出现，可以微调把手，按住alt用直接选择工具拖曳，是直接复制一个，此外，按住ctrl用直接选择工具拖曳是移动，在最顶端的白色正方形上有双向箭头那里就是缩放。如果是在选择工具状态下，按住ctrl会切换成直接选择工具，单机路径上两点也会掉出把柄
接下来我们要剪切一段线段，一开始我是根据，形状生成工具做的，首先画三个矩形，一个一个调整它们的旋转方向角度，用形状生成工具，合并矩形内两个空间，就可以删掉中间的线段，再用形状生成工具，合并杯子和矩形两个空间
最后用直接选择工具框选外面的线段，就可以删除。在透视网格的作用下删除的线段两边是存在透视的，不完全水平。
其实还有一种更简单的做法，那就是转曲，选中他，在对象中，选择路径命令，选择轮廓化边缘，就可以转曲了。这就已经是一根曲线，不是路径，可以用橡皮擦擦掉，切口也可以自己凭手感做出来
如果没有将路径转为曲线，他会把一个闭合路径视为一个形状，用橡皮擦擦除的是形状的一片面积，不是线段
这里想要把线段剪断，和刚才的方法差不多，首先是吸管和杯盖，习惯是由矩形工具画出来的，采用直接选择工具，选择上面两个端点，鼠标单击其中的一个端点，按住shift拖动就可以斜切，然后用形状生成工具，把吸管的空间和杯盖的空间合并。用同样的方法画出小矩形，用直接选择工具，选择上面的锚点将它斜切，然后选中这两个需要合并的空间，用形状生成工具，就可以合并了，最后，优选择工具，把画好的铺助矩形删掉
如果遇到这种需要把杯子外面的黑色去除，可以用剪切蒙版做
剪切蒙版是什么呢？你只要记住，你选中的两个交集，就是最终的结果，做法就是把这个矩形复制一个在原位粘贴
然后用直接选择工具，把它缩放到一定程度，点击左下角的那个锚点，双击它，按住鼠标不放，再按住shift拖动，就可以更改单个锚点的位置
这一步是填色，如果已经转曲了，那就重新绘制一个，没有描边的色块，如果是路径，那就复制这个路径，在原位粘贴，去描边填色，再移动适当的距离
最后导入文案，用矩形工具在杯子正中间画一个不填充任何颜色有描边嗯矩形，Ctrl+A全选，用形状生成工具，把中间的合并，最后把描边删除，就可以删掉杯子中间的部分空间。
产品logo展示
产品Logo缩略图
将上面的logo下边文案删除，整体缩小，它可以放在UI界面上
三.一杯奶茶企业UI界面设计
UI设计界面是手机端APP的，手机播放视图，不同的手机屏幕大小也会有所不同，那么UI设计师是不是要根据每一个手机的型号和屏幕大小，去逐一的制作同一张图片呢？当然不用那么麻烦，我们设计师，要做的是视觉效果，后台还有开发，屏幕适配问题是由他们来解决的。开发中用的是逻辑像素，作为设计师，只要选一套基础的逻辑像素，进行制作，出一套设计稿就行，开发再根据不同手机的逻辑像素和倍率来适配，这里就是A4纸的大小。
启动页
首次使用APP会弹出启动页，小程序也会有启动页，这一个页面非常重要首先就是留给客户对这个产品的第一印象，一定要潮流和美观，这个页面只会显示几秒钟，之后便会跳转到引导页。所以启动页要非常整洁，有很多APP的启动页，都是把自己的logo放的很大或者是横排或者竖排的标语，企业的营销理念等等，一般都是放图标和企业产品的名称。
启动页要确保在不同分辨率的屏幕上足够清晰，图标logo在启动液中一般位于画面的正中间，也有的会做一些动画效果，或者是放插画图片等，启动页大概会显示3到5秒，也有一些会在七八秒左右就会跳转到引导页，还有一些需要自己手动滑动到下一个启动页把所有启动页翻完，才会进入引导页。
引导页
引导页呢，主要是指引用户使用，一般会在首次打开APP时加载出来，后续打开APP便会自动跳过引导页，它的作用主要是帮助用户熟悉它的控件以及各类图标的功能，让用户更快的找到自己需要的应用功能，相当于是一个说明书吧！有的引导页呢，是一张也有的是多张，多张就是每一张介绍一个功能，然后通过用户阅读完此功能的作用后，点击我知道了进入下一个引导页熟悉下一个控件，引导页一般会在3到5张左右
有很多APP的引导页，适以插画的形式表现，也有的是直接用摄影图片表现的，其作用都是吸引用户的注意力，一般在一些比较潮流的APP上都会用插画，如果是知识类型的比较冷静的不潮流的APP会用一些图片来表示，就比如背单词的各种软件，它上面的插画很少基本上都是摄影出来的图片进行加工后的产物，可以说，各有各的优点。还有哔哩哔哩的引导页或者加载的页面，他就是创建了一个动态卡通形象，给人第一眼的感觉就是这个APP是以动漫为主的剪辑平台，哔哩哔哩一开始就是一个二次元平台，据说创立他的人就是一群为了初音未来二次元动漫的和一群热爱这位二次元歌星的人聚在一起创办的二次元平台，所以虽然哔哩哔哩后面有一些教学其他的视频，但这并不动摇哔哩哔哩的设计初衷，他依旧是为二次元诞生的，所以他的卡通形象和企业设计初衷没有脱离关系。设计UI时主要要紧扣企业的文化和设计理念，随着时代的发展就算后面脱离了原有的企业理念也是随时代发展后的产物，并不脱离企业最初的设计初衷。
首页和菜单栏界面
首页的设计取决于产品的类型，要包含常见的控件，比如搜索框导航栏，首页是用户通网APP各功能的起点，是让用户能够访问到软件各个功能模块的重要界面，主要就是种类和菜单，一般是上面四个，下面四个子类别，上面四个可以是首页，活动，排行榜等等，下面四个可以是工具（分类），订单，消息/购物车，主页（我的）
登录和个性化设置界面
登录是创建APP属于你自己的个人账号，有的APP是在启动液之前就会弹出一个单独的面板，让你创建个人账号或者登录，也有的是可以进去之后自己在我的里面自行创建，不过创建个人账号的界面都是一致的，这个页面有两个输入框，用来输入账号和密码，还有一个确认扭以及注册按钮有些还会有验证码登录方式切换其他方式登录界面的文字按钮发送验证码的文字按钮等等
产品列表页
这个页面是通过首页的分类工具导航通道进入的产品菜单列表分类界面，可以通过这里快速找到你想要的奶茶种类，相当于是在不同界面构建的标签，在这里统一罗列出来，通过点击标签传送到对应的位置，产品的后面应该还有一个行为召唤按钮就是购物车或者是收藏之类的可以直接点击后面的图标加入到购物车里
产品详情页
产品详情页，如果是其他产品，比如电机，电子数码等他们的产品详情页会有一些介绍，但是奶茶的产品详情页主要要体现奶茶的美，它的味道，所以一般是以海报为主
产品支付界面
产品支付成功界面
