搜索
免费下载
设计灵感
设计规范
👑
充值会员
流体渐变
渐变配色
色彩搭配
注册
登录
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
APP设计
原型demo
GUI
小程序界面
网页UI
网页设计
原型demo
软件设计
字体下载
衬线字体
非衬线字体
圆角字体
手写字体
网页字体
图标字体
书法字体
交互动效
加载loading
转场动效
ICON图标
面性图标
线性图标
拟物图标
2.5D图标
卡通图标
像素图标
按钮图标
多色图标
活动图标
插图/插画
扁平化插画
多彩渐变插画
2.5D插画
样机贴图
手机样机
名片样机
动画样机
电脑样机
笔记本样机
穿戴设备样机
UI作品样机
设计导航
首页
探索
素材分类
AI绘画
AI工具导航
素材专辑
UI设计
网页UI
字体下载
交互动效
ICON图标
插图/插画
样机贴图
设计导航
经验 | 如何提升信息编排的设计感?
搜UI
>
文章/作品
>
设计教程
>
设计规范
© 共享素材,请勿商用
举报
[db:内容描述]
版式
UI教学
发布时间:2020-05-26
关注
海报当中的日期,可能没主标题那么显眼,但也不能忽视,除标题外的一些小信息同理,一个小细节的美观同样会影响整个版面的设计。你是否还是拿到设计文案不分析?不思考?直接复制黏贴就往画面放呢?下面用实际例子来讲解一下,海报中日期编排的多种可能性。
1563167020000114a.png
(68.53 KB, 下载次数: 0, 售价: 6 U点)
信息编排,并不是将文案直接复制粘贴就可以了,在这里,设计师需要对信息进行刻画,在易于阅读与识别的同时还要具有观赏性,让受众愿意去阅读并且记住它。话不多说,我们直接来看,一个简单的信息编排的多种可能性。以下面一段文字为例,下方编排是最为平常的一段文字,但怎么把这段文字编排的具有设计感,同时也利于阅读,则需要设计师去对他进行美化。
1563167031000b3b1.png
(34.57 KB, 下载次数: 0, 售价: 2 U点)
· 01 ·采用编排中的左对齐方式(右对其同理)进行编排是较为平常的编排方式。将“年月日”字眼信息缩小,采用大小对比增强信息之间的跳跃率,在视觉上让版面更加活泼。
1563167042000b062.png
(38.36 KB, 下载次数: 0, 售价: 6 U点)
· 02 ·采用编排中的左对齐方式(右对其同理),弱化不太重要的信息。在这将年份与小标题缩小,突出日期,增强版面的对比时重点。将月份信息换成“·”和加入连接线,让画面更加简约和利于阅读。
15631670530002eb5.png
(42.63 KB, 下载次数: 0, 售价: 1 U点)
· 03 ·和上方一样,将月份字眼替换成符号“/”,同时注明是周几,这样能让阅读者更清晰的知道时间的具体信息。将年份信息放在连接线上,让年份和连接线一样起到连接的作用,同时还能引起阅读者的注意。
1563167065000d1ae.png
(40.67 KB, 下载次数: 0, 售价: 1 U点)
· 04 ·把周几的信息替换成英文,将“至”换成符号?进行体现,在我们阅读的时候会自然的从左至右进行阅读,将信息这样处理还可以丰富信息编排的细节感。
15631670780007e68.png
(40.57 KB, 下载次数: 0, 售价: 1 U点)
· 05 ·选取具有跳跃感的字体,让画面更具韵律感,还可以把周几信息编排在日期下方当中,明确具体时间,同时让版面层次更加丰富。
1563167087000e6b5.png
(45.08 KB, 下载次数: 0, 售价: 3 U点)
· 06 ·去除年份,除非特定活动一定需要年份,除外的话可以删减年份,突出具体时间,将日期和具体周几进行突出,周一至周日连接处采用“横线”进行连接,除小编题外两端对齐,让版面看起来更加饱满。
15631670960008cd5.png
(44.86 KB, 下载次数: 0, 售价: 1 U点)
· 07 ·将小标题突出,分成两行,下方放置日期,若版面右上方感觉空洞,可以缩小年份放置此处。
15631671090006154.png
(48.04 KB, 下载次数: 0, 售价: 2 U点)
· 08 ·将信息在视觉上处理成大概一样的字重,小标题分成两行进行编排后放置年份下方,日期信息可以竖排进行摆放,添加倒三角符号指引读者从上至下阅读。
15631671190001543.png
(48.33 KB, 下载次数: 0, 售价: 4 U点)
· 09 ·同样是竖向阅读,可以弱化小标题和年份,突出日期;为了增加画面的层次,将月份稍稍缩小,放大日期,日期采用上下编排方式,并用“/”符号放至中间进行区隔,指引读者从上至下阅读。
156316712900061b8.png
(39.76 KB, 下载次数: 0, 售价: 4 U点)
· 10 ·两边对齐,将小标题分两段缩小,若字数不够导致右上空间不足,可以将年份放置此处,随后将日期放到小标题下方进行对齐;日期中间可以采用连接线或者倒三角等符号或小文字进行区隔,以便于读者阅读。
1563167138000a5fc.png
(37.63 KB, 下载次数: 0, 售价: 3 U点)
-总结 -文字编排是为了让读者更好的进行阅读和享受阅读过程,编排方式远不止这简单的几种,方法只是开阔我们的思维,灵活运用所学的知识才是最重要的。
UI教学作品
经验 | 如何提升信息编排的设计感?相关作品
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
其他设计规范
最新素材
其他设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
收藏
设计规范
Load More
最新素材
收藏
像素图标
收藏
原型demo
收藏
APP设计
收藏
原型demo
收藏
面性图标
收藏
线性图标
收藏
线性图标
收藏
多色图标
Load More