上一章 登录页面的设计

综合型主页设计

UX百科编辑部2023-12-19 发布
4986人在学·11条笔记
收藏

综合型主页即国内主流 APP 登录后的第一个页面,往往名字也叫发现、探索、推荐页面。

它主要的作用,就是聚合产品相关的功能、服务、信息,让用户可以在这个页面进入想去的页面,或者被推荐的内容吸引并停留、点击。

后者对该页面的设计起到更关键的作用,所以首页的内容往往非常多,聚合了大量的信息和组件。想要完成这类首页的设计,就要先在框架中确定这个页面内所包含的组件模块有哪些,以及每个模块内包含的对应信息字段。

最常用的几个模块包括搜索栏、广告轮播图、快速入口、瓷片区、信息流,这样的布局一定不会陌生:

当然,不同的项目主页的内容和信息不同,包含的组件自然不一样,比如下面这些常见应用的首页组件和顺序:

要确定包含哪些组件和顺序,就是产品和体验部分的问题,不在这里多做介绍。先假设内容和顺序的问题都解决了,那么下一步就要开始正式的设计过程了。

虽然上面提到的组件都是前面解释过的,原则上只要按前面的组件设计思路逐一设计,就可以完成整个页面的视觉。但在学习的初期,这种做法并不适用,因为会造成组件样式不一,放在一起非常别扭。所以要先对整体因素做出确认,再定义细节的样式。

整体因素包括下面这些:

  • 页边距:页面的左右边距
  • 组件上下间距:组件和组件的间距
  • 模块标题:如果带模块标题的话对应文字规格
  • 标题和内容间距:标题和所属内容的间距
  • 组件内边距:组件内部的间距大小

将这些数值确定出来,再开始后续的设计,才能确保整个主页设计的统一性,下面是完成后的原型效果。

除了宏观的参数外,文字的应用尽量只使用 5 种以内的规格,色彩除了主色外没有特殊的必要也可以不加辅助色,通过装饰性图标、图片来提升色彩的层次和丰富性,下面即完成后的效果。

首页的设计值的进行大量有针对性的练习,因为它通常是整个项目设计的起点,决定了后续页面的设计风格和走向。而新手的误区主要在过度设计上,主页的展示效果是由里面包含的内容所决定,花更多的时间在前期框架和全局要素的制定上才能获得更好的结果。

课后作业

下面是两个首页的设计案例,视觉效果并不理想。

本次的练习,就是用你们前面所学的知识,对下面两个页面进行重新设计实现更好的效果。

4986人在学·11条笔记
收藏
已学会
20人已学会
下一篇动态列表页面设计
动态列表页面是用于展示动态的用户动态的页面类型,通过聚合动态的信息流,让用户可以流畅、沉浸的浏览其它用户发布的动态。 常见的动态列表包含两种,单列和双列模式,单列的展示信息会更多但浏览效率较低,多列的则展示信息较少但浏览效率较高。多数情况下一个应用只用一种动态列表类型,但部分应用会用两种。 动态列表...
本章笔记
仅看自己
logo
木可杨发布于 2024-05-16
将这些数值确定出来,再开始后续的设计,才能确保整个主页设计的统一性,下面是完成后的原型效果。
页边距:页面的左右边距 组件上下间距:组件和组件的间距 模块标题:如果带模块标题的话对应文字规格 标题和内容间距:标题和所属内容的间距 组件内边距:组件内部的间距大小
回复
sumi发布于 2024-03-11
先确定相关间距
整体因素包括下面这些: 页边距:页面的左右边距 组件上下间距:组件和组件的间距 模块标题:如果带模块标题的话对应文字规格 标题和内容间距:标题和所属内容的间距 组件内边距:组件内部的间距大小
回复
sumi发布于 2024-03-11
首页的作用,也是设计的目标
聚合产品相关的功能、服务、信息,让用户可以在这个页面进入想去的页面
回复
凯尔队长发布于 2024-03-05
首页是整个项目页面的起点,决定了后续页面的设计风格,但要多花时间在前期的框架和全局要素上。
首页的设计值的进行大量有针对性的练习,因为它通常是整个项目设计的起点,决定了后续页面的设计风格和走向。而新手的误区主要在过度设计上,主页的展示效果是由里面包含的内容所决定,花更多的时间在前期框架和全局要素的制定上才能获得更好的结果。
回复
凯尔队长发布于 2024-03-05
为保证统一性,先预设一些参数辅助一下
先假设内容和顺序的问题都解决了,那么下一步就要开始正式的设计过程了。 虽然上面提到的组件都是前面解释过的,原则上只要按前面的组件设计思路逐一设计,就可以完成整个页面的视觉。但在学习的初期,这种做法并不适用,因为会造成组件样式不一,放在一起非常别扭。所以要先对整体因素做出确认,再定义细节的样式。 整体因素包括下面这些: 页边距:页面的左右边距 组件上下间距:组件和组件的间距 模块标题:如果带模块标题的话对应文字规格 标题和内容间距:标题和所属内容的间距 组件内边距:组件内部的间距大小
回复
凯尔队长发布于 2024-03-05
确认好包含哪些模块及相应的字段,快速绘制产品原型图~~~
想要完成这类首页的设计,就要先在框架中确定这个页面内所包含的组件模块有哪些,以及每个模块内包含的对应信息字段。
回复