如何选择UI 界面布局样式？来看丁香园设计师的总结！
扫一扫 
扫一扫 
扫一扫 
扫一扫
大海一直鼓励自己多总结，多积累，多分享，最近看到一篇大牙的文章，对于不要盲从趋势，总结的特别好，于是有感而发，在此基础上，做了一些拓展衍生。 什么是界面布局样式？ 界面布局样式是指用于区分信息内容，层次的版式设计的具体方式。 总结和了解目前常用的界面布局样式，可以让设计师快速决策，选择合适的设计方式。 界面布局样式有哪些？
一、卡利用「卡」设计界面，对应的是现在流行的「卡片式设计」，比如：APP Store 的 Today 页面。 大海将从以下 3 点描述卡片设计的优势：
1. 灵活性示例如下，分别是 Instagram，知乎，微博的首页。
Instagram 的「推荐用户」模块，知乎的「知乎书店」模块，微博的「问答」模块，都利用了可以横向滑动的卡片设计，打破了订阅流信息垂直展示的限制，从而展示更多的信息。 2. 信息区分信息类型 示例如下，分别是天猫，严选，微信读书的个人中心截图。
这三个「个人中心」的设计，都利用卡片设计，对不同类型的信息进行了区分和归整。
时间 示例如下，分别是 APP Store，微信公众号，微博的截图。
这三个设计，都把复杂的内容信息，用卡片设计的形式，按照时间维度进行了整理和排序。 3. 操作性和趣味性示例如下，分别是支付宝，ZUO，探探的截图。
卡片是一种模拟物理世界的设计形式，拥有可操作隐喻，可以被覆盖、堆叠、移动、划去。
4. 卡片设计的反例自从 iOS 11 之后，卡片设计的趋势就被推向了高潮。设计网站上有很多卡片式设计作品出现。 卡片设计经常会呈现出比较好的视觉效果，但是卡片设计用的不好，会导致浪费空间，降低效率。 示例如下：是大海从 dribbble 上找来的设计，通讯录的设计利用了卡片设计。 当用户需要寻找联系人时，呈「Z字型」阅读曲线，远没有微信通讯录的「直线型」阅读效率高。
二、线「线」指的是 APP 设计中最常见的「分割线」，在分割线当中可以分为两类：
1. 贯穿式「贯穿式」是指，线长度贯穿屏幕，左右边距为零。贯穿式分割线可以让被分割的信息的独立性变强。 示例如下：分别是豆瓣的首页，网易云音乐的动态截图。
两者的共同点是，每一块信息的内容较多，关联性弱。需要用贯穿式分割性，让每一个信息内容，更加独立。 2. 内嵌式「内嵌式」是指，线的左右边距留有空隙。内嵌式分割线，可以有助于信息阅读的流畅性。 示例如下：分别是 APP Store 今日主题的列表页，36Kr 的个人中心页面。
贯穿式和内嵌式经常是同时使用的，如下图：网易严选的填写订单页面。
图中列表「商品合计」「运费」是相对关联性较强的，因此这两者之间用了内嵌式分割线。「我要开发票」和它们之间是相对独立的，因此使用贯穿式分割线。 3. 分割线设计的反例分割线设计是界面当中最常用的元素，大海看了这么多 APP，截了这么多图，都没有发现界面中一根线都没有使用的产品。 分割线设计要注意是否应该使用，以及使用时线的颜色，粗细。 下图中：知乎的「个人中心」，来源于网络的日历设计。
知乎：线的颜色用的过重，导致当看到这个页面时，会感受到满眼都是线。改进方法有两种：把线改细，改淡；把列表文字改重。总结下来就是拉开文字和线的对比。 日历：日期本身的排版已经把信息区分的比较明显，此时不需要使用分割线。假设 「亲密」 「对比」 「重复」 足以让信息得到区分，不使用分割线，可以让你的设计，更加透气简洁。 三、间距利用「间距」设计界面，对应的是现在流行的「无框设计」，不用分割线，纯粹用间距实现信息的排版。 大海将从以下2点描述其适用性：
1. 图片为主示例如下：分别是 Instagram，爱彼迎，红板报的界面截图。这些页面中，均以图片为主。图片本身的边缘具备分隔作用。
2. 内容少且有规律示例1：爱彼迎的「故事页面」和「搜索结果页」，两者都只有2种信息版式。内容少且有规律。
示例2：轻芒的「分类页」和「类别首页」，分类页只有一种版式，并横向排版展示。类别首页只有一屏信息。
总结卡，线，间距都是页面当中基础元素，希望本篇文章可以帮助设计师掌握和了解这3个基础元素的适用性。在设计执行中，更加风驰电掣，如沐春风。 欢迎关注作者的微信公众号：「花厂设计招待所」
图片素材作者：Dennis Cortés 「App 设计实战案例」
手机扫一扫，阅读下载更方便˃ʍ˂ |
@版权声明
1、本网站文章、帖子等仅代表作者本人的观点，与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样，并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络，仅用作展示，如有侵权请联系站长！QQ: 13671295。
最新评论
