00:00 / 00:25
连播
清屏
智能
倍速
点赞2
00:00 / 06:55
连播
清屏
智能
倍速
点赞28
00:00 / 01:02
连播
清屏
智能
倍速
点赞22
原创UI|大学生校友圈首页UI设计全流程拆解 对于前段时间做的校友圈小程序从配色、金刚区图标、卡片设计、情感化设计拆解设计过程,码住慢慢看哦~ 1️⃣确定整个产品设计的配色方案 一般有两种情况,第一种是需求方提供他们需要的配色,那我们就比较省事,但是对我们的设计会有一定的局限性。 如果需求方没有明确诉求的时候,就需要设计师根据产品定位、竞品分析、设计趋势等角度来确定配色。 那我这个项目是需求方明确主色要用蓝色,但是我认为纯蓝色过于工具化、我 由此延伸出来了稍微活泼一点的蓝青色渐变色作为主色。 辅助色客户是没有明确的,所以这里就需要我来进行分析。 首先,产品定位是社区学习类应用,由此我推导出清爽、阅读高效率的关键字; 第二、目标用户是在校大学生,结合大学生的特点,我推导出年轻化、趣味性、活力这几个关键字; 第三,竞品分析,这里主要分析了客户提供的鱼泡、狐友小程序,推导出空间感、潮流感这两个关键字。 综合这三个分析结论,我确定了霁青色和爱马仕橙这两个辅助色。 2️⃣顶部设计 主要作用是品牌透传、slogan露出,帮助用户快速了解平台的主要功能。 我这里的设计灵感是来源于我们生活中的商品吊牌,都是起到说明的作用。将商品吊牌的造型和主渐变色结合起来,设计出了顶部的slogan样式。 3️⃣金刚区图标设计 根据前面确定的产品的主色调,将用色限定在冷色系为主,有紫色、蓝色、青色。最后一个橙色是用于特定的营销功能上,比如热度、排行、活动等, 再结合每一个功能提炼出关键形状,进行设计。 4️⃣课程卡片设计 我的灵感来源就是挂历和回形针纸张,设计出一个背景,再填充上内容,卡片设计就完成了,这里设计时考虑的交互就是切换的时候,翻页变化,增加产品的趣味性。 #ui设计 #3d图标 #独立设计师 #自由职业 #旅居生活
00:00 / 04:14
连播
清屏
智能
倍速
点赞30