界面布局样式有哪些?如何快速制作好看的网页设计

Post 110 of 929

界面布局样式指,用于区分信息内容,层次版式设计的具体方式。懂得总结和了解常用的界面布局样式,能让设计师快速做好决定,选择合适的设计方式。

界面布局样式有哪些?

样式一:卡

利用“卡”设计界面,对应的就是现在流行的的“卡片式设计”,如:App Store的Today页面。

卡片式设计的三大优势:

① 灵活性

例如:IInstagram 的“推荐用户”模块,利用横向滑动的卡片设计,打破订阅信息垂直展示得限制,从而展示更多信息。

界面布局样式有哪些?如何快速制作好看的网页设计

 

② 操作性

例如:支付宝卡包利用模仿物理世界真实的银行卡设计,利用用户已有的银行卡查看习惯,让用户快速理解和查看已绑定的银行卡。

 

界面布局样式有哪些?如何快速制作好看的网页设计

③ 趣味性

例如:探探是一款陌生人社交软件,其主打就是左滑不喜欢,右滑喜欢的体验,凸显自己在同类型软件中的体验差异化,用户的感受更加新鲜有趣。

 

界面布局样式有哪些?如何快速制作好看的网页设计

卡片设计的缺陷:

虽然卡片设计经常呈现出比较好的视觉效果,但如果设计不好就会导致浪费空间,降低效率。

样式二:线

线,就是APP设计中最常见的分割线,在分割线当中可以分为两类:

① 贯穿式:线长度贯穿屏幕,左右边距为零,增强被分割信息的独立性。

 

界面布局样式有哪些?如何快速制作好看的网页设计

② 内嵌式:线的左右边距留有空隙,有助于信息阅读的流畅性。

 

界面布局样式有哪些?如何快速制作好看的网页设计

分割线设计的缺陷:

界面设计中,分割线设计是界面当中最常用的元素,基本所有APP是没有界面中一条线都不用的产品。尽管如此,使用分割线设计时应注意是否应该使用,和使用时线的颜色,粗细。

样式三:间距

利用「间距」设计界面,对应的是现在流行的「无框设计」,也就是不用分割线,纯粹用间距实现信息的排版。常见的间距排版主要有两类:

① 图片为王

例如: Instagram,爱彼迎,红板报等都是以图片为主,而图片本身的边缘具备分隔的作用。

 

界面布局样式有哪些?如何快速制作好看的网页设计

② 内容少且有规律

例如:轻芒的「分类页」和「类别首页」,分类页只有一种板式,并横向排版展示,且类别首页只有一屏信息。

界面布局样式有哪些?如何快速制作好看的网页设计

卡,线,间距都是产品设计中非常基础的元素,设计师掌握和了解这三个基础元素的实用性,对于版面布局就能驾轻就熟。

This article was written by admin

MENU
網頁設計公司