赞助商
立即赞助

科普手册!值得新手收藏阅读的界面设计原则

UI设计3年前 (2021)更新 流光
2.3K 0 0

近年来,「设计规范」逐渐被「设计系」或「设计语言」的概念重塑。基一套架构严谨、规则统一的系框架,产品表现面的设计工以逐渐现模块化运,从而让视设计工变得更加高效。

「Design System 系列」将会从设观、设计原则、设计形式三个方向手,由深到浅、由整到分地演绎设计系对整个产品迭代程的价值和意义。有正确的设计观判断坏的标准,并结合行之有效的设计原则指引,才能定出最优的设计方案。

Robin Williams 的四基本设原则相信家都不陌,尤其平面设计领域内对它的应用更为泛。在此基础上,我结合中台产品的设计特点,将其缩写为「两对两」原则,即:对齐对比、亲密性、一致性。

个优秀设计都会应用这些设计原则,并各自是相互关联,应用某个原则情况很少。

为设计系的一部分,套设计原则也为设计践提供理论依据。章引用中台产品设计中一常见的案例,并以简洁凝练的语言,分析总结四个基原则的际应用方法和注意项。

本章纲如下:

科普手册!值得新手收藏阅读的界面设计原则

一、对齐原则

任何元素不能在页面上随意摆放,每一项应该与页面上的另一项或项存在某种视关联。即使对齐的元素空间上是相互分开的,但在水平或垂直位置上也有一条「隐形的」把它们连在一。

界面设计中,将元素进行对齐,既符合用户的认特,也能引导视流向,让用户更流畅地接收信息。

1. 左对齐

左对齐是将文信息或视元素沿垂直方向向左对齐的一种对齐方式,左有一条「隐形的」,将彼此分离的文或元素连在一。

文案类、列表类、表单类排版会常用到左对齐的方式,这能让用户顺视觉流的方向,速高效接收信息或填写表单内。

科普手册!值得新手收藏阅读的界面设计原则

2. 右对齐

右对齐与左对齐相反,右有一条「隐形的」,将文信息或视元素连在一。

表格或表单中使用右对齐,可以实速对比数小,建议数的格式保持统一。常规类数可以统一使用千符,如「1,024」;金额类数可以保留小数点后两,如「¥88.00」。

科普手册!值得新手收藏阅读的界面设计原则

3. 居中对齐

居中对齐是三种常见的对齐方式,中间有一条「隐形的」,将文信息或视元素连在一。

居中对齐会形一种式、稳重的外观。尽这一种合理的对齐方式,但界「软」的,「对齐线」的强度也较弱,所以会显得中规中矩。通常,首页的功能介绍文案以及数据、金融类型的产品界面会使用这种对齐方式。

科普手册!值得新手收藏阅读的界面设计原则

4. 两端对齐

两端对齐也称方形左右对齐,因为文信息的左右两端均对齐。

通常商品信息结算、辅明的列表场景中会使用两端对齐的方式,不仅能让横向的文案具关联性,易于用户接受信息,也能使排版显得加整严谨。

科普手册!值得新手收藏阅读的界面设计原则

二、对比原则

对比以有效地增强页面的视效果,同时也有助元素之间建立一种有组织的级结构,让用户快速识别关键信息。

需注意的,实效的对比,就应当拉元素之间的差异,差异越,对比效果越明显。

1. 字体对比

字体对比包括:衬线体无衬线体的对比,如 Georgia  PingFang;字重粗细的对比,如 Regular  Semibold;字小的对比,如 14px 与 20px;字体颜色的对比,如 #333  #999。

当界面或模块的标题字体大而粗、且颜色较深,正文字体而细、且颜色较浅,息层关系更显,字体对比效果将更理想。

科普手册!值得新手收藏阅读的界面设计原则

2. 颜色对比

颜色对比包括:色相对比,如 Red  Blue;饱度对比,如 S100  S60;明度对比,如 B100  B60。

下图中的百比堆叠面积图利用不同维度 (域)的色相对比,清晰的反应每个数值所占百比随间或类别变化的趋势,对于析变量是大数据、变数据、有序数据各个指标量占比极为有用。

科普手册!值得新手收藏阅读的界面设计原则

3. 小对比

小对比就同一画面里利用小两种元素,以小衬,或以衬小,使主体得到突出。小对比主体面积或体积两种维度的对比。

在下图的 Dialog 中,主体图片的面积相对于商品息文字的面积得最大化突出,主次更加,视觉冲击也更加烈。

科普手册!值得新手收藏阅读的界面设计原则

4. 水平与垂直对比

水平与垂直对比,指水平分布的视觉元素与垂直分布的视觉元素横纵方向的对比。

在排版上,水垂直对比可以破一呆板的排列方式,在保持对齐的基础上,丰了界面素的空间表现形式,减轻了用户的疲劳和无味。

科普手册!值得新手收藏阅读的界面设计原则

三、亲密性原则

如果信息之间关联性越高,它们之间的距离就应该越接近,从形一视觉单元;反之,则它们的距离就应该越远,从形多视觉单元。

亲密性的根本目的是实现组织性,让用户对页面结构和息层一目了然。

1. 水空间关系

为了适应不同尺寸的屏幕,同保持横向上控件的关性,因而采用栅格布局的方式来组织摆放素和控件,保证布局的灵活性。

科普手册!值得新手收藏阅读的界面设计原则

同一控件内部的素,横向间距上也会有「亲疏」之,以体现组织性。

科普手册!值得新手收藏阅读的界面设计原则

2. 垂直空间关系

复杂的页面或模块设中,纵向需使用高、中、低三种规格的间距区分信息的层级关系。基于「元间距」8px,三种规格可以 24px(高间距)、16px(中间距)、8px(低间距)。

注:纵向间距公式:y=8+8×n。其中 y 是纵向间距,8 是间距,n≥0。

科普手册!值得新手收藏阅读的界面设计原则

另外,增加「割线」等视觉素,也是有效划页面结构和息层的常用段。

科普手册!值得新手收藏阅读的界面设计原则

四、一致性原则

可以把「一致性」理解「复用」,相同的元素整界面中不断复用,复用元素可以线框、颜色、控件、文本格式、空间间距、设素。

一致性的根本目的是统一素,并增视觉效果,降低用户的学习成本,帮助用户快速识别出这些素之间的关性。

1. 线框复用

同类息的载体可以是相同粗细的线框、相同投的卡片,或是相同颜色的底面,注保持式属性值的一致,以及上下左右间距的一致。

科普手册!值得新手收藏阅读的界面设计原则

2. 颜色复用

界面设中,相同的功能提示、图表数据、文字层级、按钮、图标、分割线、背景,应使用相同的颜色,保持色彩体系的统一,避免同类型的元素使用不同颜色给用户造认知困扰。

科普手册!值得新手收藏阅读的界面设计原则

3. 控件复用

使用统一的导航、按钮、弹框、图表、选择器等控件,既以提高设计者和开者的工效率,避免重复造轮子的现象出现,又以持界面设计的一致,降低用户的理成,提高使用效率。

科普手册!值得新手收藏阅读的界面设计原则

4. 格复用

相类型、维度或级文案,应使用相展现格。注意标题、正文、辅助信息层级关系,使用统齐,让关联性高信息形成个视觉体。

科普手册!值得新手收藏阅读的界面设计原则

小结

1. 对齐

任何素都不能在页面上随摆放,每一项都应该页面上的另一项或多项存在某种视觉关。

2. 对比

对比可以有效地增页面的视觉效果,建立一种有组织的层结构,如果想让素不同,那就让它截然不同。

3. 亲密性

如果息之间关性越高,它之间的距离就应该越近,从而形成一个视觉,这有助于组织息,减少混乱。

4. 一致性

一致性的根本目的是统一素,并增视觉效果,降低用户的学习成本,帮助用户快速识别出这些素之间的关性。

注作者的微信公众号:「彭彭设计笔记」

科普手册!值得新手收藏阅读的界面设计原则

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

开始正文前先分享几个生活细节: 场景一,你正喝着饮料唱着歌,走着走着自己瞎了眼被桌角绊了一下,饮料撒一地,你恼羞成...
产品设计
@孔雅轩LineVision :一篇较为系统与全面的版式讲解,从规范化的布局形式到平面构成在用户界面设计中的应用与体现。 ...
版式布局
我们的日常生活总是会面临无数的选择,尤其是在职业生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案不仅是基于...
UI配色
这次的主题是用户引导和提示,它们都会打扰到用户,也有很多的共通点,就暂且归到一起集中聊一下。 先看一下整体内容: △...
Toast
10月份的设计圈干货合集到货了!还有2个多月的时间,今年就要结束了,现在是时候为了后面的工作,准备一点靠谱好用的工具了!...
干货合集
编者按:最新一期的设计圈干货来了!这次的干货是来自 prototypr.io 的整理。 对于设计师而言,这是一个越来越好的时代,每...
前端干货
本文针对的是从 UX 角度出发的标签系统设计,不同于数据库的标签系统设计。「标签系统」的概念来源于《信息架构:超越 web 设...
一致性原则
编者按:随着亚马逊、小米、阿里巴巴等大公司都推出了智能语音产品,如何为这类以语音交互为核心的智能产品做设计也成了一个...
交互设计