详解APP页面的结构布局—UI入门须知

(一般UI的设计稿,均是以iOS 750X1334px的尺寸去设计的,所以以下均是该尺寸下的举例)

一、布局

(1)布局是页面的框架基础,一致的布局结构能够增强体验的统一性,给用户带来连贯的使用感受,为保证统一而明快的用户体验,布局应保持简单、清晰、合理,即尽可能减少复杂布局的使用。

(2)页面中的不同内容,通常是垂直分布,从上到下依次进行排列,内容与内容相邻时有两种情况,一是内容无间距直接相连,二是内容有间距,间距通常为20px,通常不同的内容需要以间距进行区分,但若某些元素本身带有效果,可以有效区分不同内容,则无需呈现间距,比如有时首页的宫格导航自带阴影,故该页面的内容无需间距。

(3)页面由不同内容组成,通常以通栏呈现,为了使页面美观而不紧凑,一般情况下,页面中的内容与页面左右边界留白距离统一为32px,在某些特殊情况,页面内容需要通栏呈现,或通栏呈现并等分内容,此时页面左右允许不留白,例如底部导航。

(4)页面层级,现有新版手机的页面可以分为背景层、内容层、悬浮层、弹出层四个层级。

背景层,位于最底层,不展示任何内容,一般作为内容层中不同内容的间距,颜色我一般是#eeeeee;

内容层,位于背景层上方,展示页面常规内容的层级,我常用背景色有蓝色(#09b6f2)、白色(#ffffff)、浅蓝色(#f4f8fb)、浅蓝灰色(#ecf1f5) 、浅灰色(#f8f8f8)五种,蓝色背景通常展示强调内容,为保持视觉美观,可配合使用其它蓝色系的色彩使用,白色和浅蓝色背景通常展示普通内容,一般情况下优先使用白色背景,浅蓝灰色背景通常展示辅助内容;

悬浮层,位于内容层上方,展示重要内容(通常为操作按钮)的层级,固定出现在当前屏幕的某个位置,该层级在设计样式上应使用阴影;

弹出层,位于悬浮层上方,用于临时遮盖内容层、悬浮层的全部内容,展示操作过程中需要临时凸显的内容,覆盖范围为当前屏幕,该层常用于呈现弹出框。

二、结构

首页一般主要由以下几个区块组成,但不限于以下几个区块,可根据具体需求增加新内容,如下图所示;

(1)状态栏

(2)标题栏

(3)信息展示区

(4)推荐区

(5)底部导航栏

0

评论0

站点公告

 

AI创作与绘画大师,国内版chatGPT在线版本免费使用哦

点击打开: https://ai.uiya.cn

   
显示验证码
没有账号?注册  忘记密码?

社交账号快速登录

微信扫一扫关注
如已关注,请回复“登录”二字获取验证码