UI界面设计 1、个人中心界面设计要点 个人中心界面设计.pptxVIP

UI界面设计 视频教程 主讲教师：计算机与传媒系 冯 艳 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 第 十五 节 个人中心界面设计 提 纲 按钮的制作 1、个人中心界面设计要点 2、 个人中心界面设计格 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1、个人中心界面设计要点 1.1 UI设计概念 个人中心一般位于底部标签栏的第四个标签位置，有的应用叫“我的”。 个人中心是应用中所有功能点的集合入口，也可以理解为是一种快速的帮助中心。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1、个人中心界面设计要点 1.1 UI设计概念 在社交应用中，个人中心和个人主页是两种界面。个人主页是别人看到我的主页页面，个人中心是自己看到自己的主页页面。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1、个人中心界面设计要点 1.1 UI设计概念 个人中心一般由头像、个人信息和功能模块3个部分组成。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1、个人中心界面设计要点 1.1 UI设计概念 （1）头像区域：一般由圆形和圆角矩形两种形式。 圆形适合展示真人头像，能聚焦内容，显得饱满。 会员中心的头像面积比较大，能很好的展示头像效果，所以 会员中心绝大多数采用圆形头像设计。 设计方案一： 头像居中放置，头像背景采用模糊加深色遮罩，也可以用固定 的深色背景。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1、个人中心界面设计要点 1.1 UI设计概念 设计方案二： 电商类应用的个人中心，可采用头像居左设计的方式，这样可以节省很多空间，因为电商类个人中心包含大量的功能，因此需要尽可能在一屏中展示更多的内容。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1、个人中心界面设计要点 1.1 UI设计概念 （2）个人信息 在社交类应用里包含粉丝、发布的文章和照片等与个人相关的信息。在电商类应用中包含订单相关信息，如待付款、待发货、待评价等。 设计方案： 文字+数字的形式，且数字加粗着重显示，这是一种最简单、直接的表现形式。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1、个人中心界面设计要点 1.1 UI设计概念 （3）功能模块 功能模块是整个应用的功能入口聚合。 设计方案一： 一般通用的方式是使用表单形式来表达功能。 设计方案二： 在需要使用的功能6个或8个时可以选择以图标的形式表达。 如图：功能数为奇数时，由于图标不能左右对称，会不美观， 此时建议选用表单式。 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 2、个人中心界面设计 1.1 UI设计概念 设计流程分析 重庆电讯职业学院 计算机与传媒系 主讲教师：冯艳 1.1 UI设计概念 谢 谢 第 十五 节 个人中心界面设计