设为首页
收藏本站
搜索
热搜:
Java
Python
UI
人工智能
Web
影视特效
抖音
网络营销
运营
本版
文章
帖子
群组
用户
登陆
注册
首页
Portal
互联网资讯
视频教程
技术社区
BBS
IT培训
学历提升
快速发布
个人中心
今日签到
私信列表
消息中心
搜索全站
课程咨询
返回顶部
大内高手社区
›
技术社区
›
UI设计论坛
›
这些实用的排版技巧,能让你的设计更细致 ...
玫瑰黑糖
关注Ta
发帖数
24
粉丝
1
此人很懒,什么也没有留下
[UI设计论坛]
APP导航栏设计分析(下):5种设计样式
[UI设计论坛]
APP导航栏设计分析(上):4种交互状态
[UI设计论坛]
三步教你提升B端表单设计的用户体验(一)
[UI设计论坛]
好的单选框设计具备哪些特质?
阅读作者更多精彩帖子
热门问答
更多热门问答
1
淘宝客注册流程步骤
22263人围观,发布于2021-09-26
1
APP运营核心要点有哪些
20663人围观,发布于2022-07-08
0
了解运营
13055人围观,发布于2021-09-18
0
网站的 TDK基本格式
12214人围观,发布于2021-09-23
0
SEO优化中网站地图在的主要作用
13510人围观,发布于2022-01-13
0
快速提高网站SEO优化排名的方法
16445人围观,发布于2022-01-13
技术文章
更多技术文章
告别“限速”,个人网盘进入云时代
2022-12-28
长难任务设计指南,必须收藏!
2022-12-28
新消费,走进「韧性时代」
2022-12-28
营销技能:营销4P之外,还有这些经典理论
2022-12-28
实例分享 | 社区产品编辑器的设计开发要点
2022-12-28
产品经理方法论——流程与审批流的区别
2022-12-27
返回列表
这些实用的排版技巧,能让你的设计更细致
[复制链接]
玫瑰黑糖
Lv.2
显示全部楼层
发表于 2022-7-14 14:09:15
|
阅读模式
今天分享的是「排版技巧」。页面的排版很灵活,但在排版时我们不单单要考虑视觉上的好看,还要考虑使用上的体验。将页面中的内容和元素通过合理的方式方法进行排版,保证重点内容突出而且容易阅读是首要目的。这次总结一些在页面排版和布局中需要注意的技巧,掌握这些容易上手的排版技巧能够大力提升设计效率。
邻近性
邻近性是指页面中有关联的元素比其他元素的距离更近。页面中的内容或元素按照邻近性分组,比按照形状或者颜色分组更直观。
相似性
同一页面中表达相同功能的元素,通过相同的形状表示。相似性是视觉上相似元素的组合,通常通过大小、形状和颜色来区分。
相似的元素会表现出相似的行为,比如下图右边的选项中,都使用了一致的单选框,更利于用户做出选择。
连续性
现在很多移动端产品都采用feed流的形式,可以无限加载内容,用户怎么滑都滑不到底。这样的场景下就要考虑feed流内容的连续性,通过将内容进行合理地对齐,保证阅读上的连续性。
对齐的作用除了可以让页面的内容看起来更整齐,还能够下意识地影响用户的浏览视线和阅读顺序。比如F型和Z型视觉动线,通过不同的对齐排版方式来引导用户的视线。
闭合性
闭合性是通过排版布局元素自身的边距以及元素间的间距,来减少用户的认知负荷。现在流行的卡片式布局就用到了这个原则,通过将元素整合到一个卡片中,合理安排元素的间距来达到整齐的效果。
共同命运
具有相同概念的元素需要设计为具有相同的行为。当元素沿同一方向移动时,它们被识别为同一级别的元素。比如在手机中有时候会看到横向排版的内容,这些内容处于用一个层级,用户左右滑动来观看。
前景和背景
设计使前景和背景清晰区分。当我们的视线感知到元素重叠时,会根据焦点分别识别前景和背景。
为了减少混乱,可以使用深色蒙版或者弹窗阴影来分离前景和背景。当页面中有弹窗跳出,通常背景会有一层深色的遮罩,以此来突出弹窗中的内容。
分组
当我们想把不同类别的内容进行分组时,可以添加线条或背景来区分。
聚集在同一区域的元素被看做为属于同一板块的元素,因此这些内容需要与其他元素有明显的区别。常用的方法是改变背景的颜色或者在背景中插入图片,让这个板块的内容和其他内容有强烈的对比。
单位
设定有效设计的最小单位。要在多个倍数(如1.5x 2x)中使用设计元素,使用可以整除的偶数。
其中,8点网格系统被广泛使用,它可以将主显示器的整个像素除以一个整数。但是8点网格并不能适用于所有的设计,比如iOS的375和750的屏幕尺寸。
网格
网格是一种高效设计的工具,通过定义一个大的框架来进行元素排版。网格系统易于构建,而且能提供一致的视觉节奏,非常适合应用在日常的设计工作中。
屏幕尺寸
设计的时候要考虑移动设备的屏幕尺寸问题。就iOS而言,手机机型都是固定的,因此主要基于旗舰机型的尺寸进行设计。
【免责声明】本文部分系转载,文章来源于公众号Clip设计夹 ,作者大Clip设计夹,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请在30日内与联系我们,我们会予以更改或删除相关文章,以保证您的权益!
本帖子中包含更多资源
您需要
登录
才可以下载或查看,没有帐号?
立即注册
x
回复
使用道具
举报
发布主题
返回列表
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
返回顶部
返回列表