020-29815005
预约专线时间:09:00-23:59

APP四类页面样式设计

新闻来源:优漫本站 日期:2023-03-29
在设计过程中,在新设计一个页面时,会遇到一个基本的问题,我的页面背景应该是底色?页面的要素怎么组合展现才能达到更好的展现美观度,贴合业务需要,实现更高的转化率?

   在设计过程中,在新设计一个页面时,会遇到一个基本的问题,我的页面背景应该是底色?页面的要素怎么组合展现才能达到更好的展现美观度,贴合业务需要,实现更高的转化率?

APP四类页面样式设计


  基于上面的问题,梳理了几种较好的常见的页面设计样式。

  白底条目式

  样式要点

  背景:整体以白色为底。

  要素:以条目化黑字内容为主。每个条目中一般不同信息的文字颜色以黑灰两色区别,让用户快速解读页面,获取焦点。

  分割:每个条目之间最好不用分割。整个页面中需要少量的灰色要素做分割。比如筛选的灰色按钮,比如灰色的分割线。以便于对整体页面进行解读。

  整体页面明亮,有活力,更有品质

  展示信息内容多

  适用场景

  适用于信息较多的列表页,比如消息列表、通讯录人员列表等。

  适用于详情页等其他大部分页面。

  灰底条目式

  样式要点

  背景:以灰色作为背景。

  要素:背景之上主要呈现白底黑字条目化的信息内容。注意条目一般要进行分组展现,避免每条条目直接都有较大的分割,否则整体不协调。

  条目组之间用灰色背景自然隔离,注意宽度要较宽一些。有些情况在灰色背景上可以展示分组的标题。

  组内的条目之间用灰色线进行分割,宽度一般为1

  展示的信息多,实用

  适用场景

  适用于信息需要编辑的页面

  如果APP整体都是条目化的样式,一般为了保持一致性,可以在模块的首页、列表页面等情况下使用。其他大多数场景不推荐使用。

  灰底卡片式

  应用最为常见最频繁的一种样式。

  具体样式

  背景:页面整体以灰色作为背景

  要素:在此之上以呈现白底黑字的卡片内容为主,卡片可加阴影也可以不加。

  分割:灰色背景即为分割。

  减少了线条或者边框的使用,展示美观

  适用场景

  模块首页的应用入口,比如我的,工作台首页都比较常见。

  信息列表的展示页,比如详情页分组(即分卡片)展示信息要素。

  简要信息的编辑页,比如详情编辑页中,要编辑的内容较少时可以使用。

  对于有着强烈的就业意愿的同学们来说,广州优漫动游教育长期班提供的周到的就业服务更是不容错过哦,优漫会为同学们提供校园招聘会、就业推荐、面试辅导等渠道,帮助同学们增加就业选择,从而提升就业几率。与其担心培训机构效果好不好、能不能就业,不妨现在就行动起来投入学习,坚持不懈的努力会为你证明的哦~