# UI设计_日常练习存放仓库 **Repository Path**: whkwhk/ui_design ## Basic Information - **Project Name**: UI设计_日常练习存放仓库 - **Description**: 放置我学习UI界面设计作品的仓库：我不相信世界上有一蹴而就的事情，我只相信我的努力，我只相信慢慢成长，加油！ - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2021-08-08 - **Last Updated**: 2021-08-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # UI界面设计_练习项目合集 #### 介绍 放置我学习UI界面设计作品的仓库：我不相信世界上有一蹴而就的事情，我只相信我的努力，我只相信慢慢成长，加油！ # 写在前面 > 最近在学习UI界面设计，我觉得将来想走前端这条路的话，审美这方面还是要有的，我的专业是数字媒体技术，有学过UI交互设计方面的课程，那是大二上学的时候了，那会我的心思就不在学习上，就算开了这些课程，也是没有好好学，现在想想真后悔，现在我大四，距离毕业还有一年左右的时间，现在醒悟为时不晚哈哈哈，学就完了！ 今天要做一个美团的登录界面，学习大厂产品的设计思路、排版、配色等等的知识。我现在欠缺的还很多，比如配色、排版等等都是硬伤。我的模仿学习思路是： 1. 先自己构思一个页面的功能逻辑 2. 将用到的功能都列举出来（尽可能详细） 3. 将这些功能按照自己的设计思维放置在页面中 4. 对照美团界面看自己的设计中有哪些需要学习改进，以及自己没有涉及到的方面等等 5. 根据美团界面进行复刻学习（主要是练习软件操作熟练度） 6. 最后对自己的思路进行复盘整理，才能做到学有所得 # 2021.8.8_美团登陆页面练习 ## 1.页面功能的逻辑 我只分析了手机登录的功能逻辑 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8033a78450bd4de7aee1f7f990ed66e1.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70) ## 2.分析功能 共有两个页面： - 输入手机号的页面，就是主的登录页 - 输入验证码的页面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7ed818552c7d4e69b0b54aee300d5da2.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70) ## 3.按照自己的设计思维进行设计—低保真原型图 这里建议不加任何的颜色，不需要考虑任何的配色，方便后面的UI设计，主要是先把框架搭出来，非常重要！ 怎么感觉我的这个不是很好看...将就一下吧，慢慢来！ 登录页： ![在这里插入图片描述](https://img-blog.csdnimg.cn/8667ba07068f426aa8ac9599ea2ba8c6.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70) ## 4.结合美团的登录页进行改进—绘制高保真原型图 我这里先放一个美团的页面：（没有对比就没有伤害） ![在这里插入图片描述](https://img-blog.csdnimg.cn/de59f2411b304a51bb39003b206986d0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70) 接下来是我自己复刻的美团页面： ![在这里插入图片描述](https://img-blog.csdnimg.cn/4e4cfb856cbb4bcabda9cc366342ddbc.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE4MzI2MDU3,size_16,color_FFFFFF,t_70) ## 5.复盘整理 入门小白，各位大佬不喜勿喷，如果能有一些指点的话，我将感激不尽，评论区恭候您的光临~ 我有待改进的方面： - 对整体比例把握不是很好，会出现字体过大或者过小的问题，做到后面发现整个页面被占完了 - 页面的功能分析不是很全面，有些功能缺失，比如帮助、遇到问题等等 - 整体的排版布局把握不好，没有遵循一些设计原则，用户使用起来感觉不舒服 - 组件样式设计的不是很好看，呈现方式单一，整体看上去显得比较LOW（慢慢变高级） - 软件操作还不熟悉，操作起来比较慢，之前使用的是XD，现在用的软件axure 9，虽说内容差不多，但是太久没用这些软件，现在手生了，还需要多加练习 可以提升的方面： - 排版布局、配色方面知识 相关课程： [UI进阶-界面视觉设计提升（虎课网）](https://huke88.com/course/66595.html?pageType=1&key=%E6%8E%92%E7%89%88%E5%B8%83%E5%B1%80&identify=1628386286) [【配色教程】【配色-设计】色彩与配色理论(B站)](https://www.bilibili.com/video/BV19W411A7of?from=search&seid=16845495021188214482) [【色彩搭配】20集配色超高清完整版教学，零基础1套教程彻底学会用色！！（B站）](https://www.bilibili.com/video/BV1po4y117wH?from=search&seid=16845495021188214482) - 多练几次实战项目 相关课程： [UI教程丨规范化掌握APP项目UI设计实战（B站）](https://www.bilibili.com/video/BV1cD4y1D7R1?from=search&seid=12367144086858966711) [UI设计学习课程：UI界面设计案例实战教程合集（B站）](https://www.bilibili.com/video/BV1dV411Y7WK?from=search&seid=12367144086858966711) > 项目结束了并不是真的结束，之后在其他项目的学习中如果遇到对这个项目比较好的点还会来更新的，在学习中慢慢成长，在学习中慢慢迭代升级！https://gitee.com/gitee-stars/)