(一般UI的设计稿,均是以iOS 750X1334px的尺寸去设计的,所以以下均是该尺寸下的举例)
一、布局
(1)布局是页面的框架基础,一致的布局结构能够增强体验的统一性,给用户带来连贯的使用感受,为保证统一而明快的用户体验,布局应保持简单、清晰、合理,即尽可能减少复杂布局的使用。
(2)页面中的不同内容,通常是垂直分布,从上到下依次进行排列,内容与内容相邻时有两种情况,一是内容无间距直接相连,二是内容有间距,间距通常为20px,通常不同的内容需要以间距进行区分,但若某些元素本身带有效果,可以有效区分不同内容,则无需呈现间距,比如有时首页的宫格导航自带阴影,故该页面的内容无需间距。
(3)页面由不同内容组成,通常以通栏呈现,为了使页面美观而不紧凑,一般情况下,页面中的内容与页面左右边界留白距离统一为32px,在某些特殊情况,页面内容需要通栏呈现,或通栏呈现并等分内容,此时页面左右允许不留白,例如底部导航。
(4)页面层级,现有新版手机的页面可以分为背景层、内容层、悬浮层、弹出层四个层级。
背景层,位于最底层,不展示任何内容,一般作为内容层中不同内容的间距,颜色我一般是#eeeeee;
内容层,位于背景层上方,展示页面常规内容的层级,我常用背景色有蓝色(#09b6f2)、白色(#ffffff)、浅蓝色(#f4f8fb)、浅蓝灰色(#ecf1f5) 、浅灰色(#f8f8f8)五种,蓝色背景通常展示强调内容,为保持视觉美观,可配合使用其它蓝色系的色彩使用,白色和浅蓝色背景通常展示普通内容,一般情况下优先使用白色背景,浅蓝灰色背景通常展示辅助内容;
悬浮层,位于内容层上方,展示重要内容(通常为操作按钮)的层级,固定出现在当前屏幕的某个位置,该层级在设计样式上应使用阴影;
弹出层,位于悬浮层上方,用于临时遮盖内容层、悬浮层的全部内容,展示操作过程中需要临时凸显的内容,覆盖范围为当前屏幕,该层常用于呈现弹出框。
二、结构
首页一般主要由以下几个区块组成,但不限于以下几个区块,可根据具体需求增加新内容,如下图所示;
(1)状态栏
(2)标题栏
(3)信息展示区
(4)推荐区
(5)底部导航栏
评论0