ps教程_设计教程_ps素材_设计素材_小憩设计
  • 欢迎来到小憩设计!

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

时间:2020-12-09 07:22:27 作者:小憩设计 来源:网络

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

近年来,「设计规范」逐渐被「设计体系」或「设计语言」的概念重塑。基于一套架构严谨、规则统一的体系框架,产品表现层面的设计工作可以逐渐实现模块化运作,从而让视觉设计工作变得更加高效。

「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. 一致性

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

欢迎关注作者的微信公众号:「彭彭设计笔记」

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

「新手也能快速入门的设计技巧」

  • 《UI新手排版入门!最容易上手的6个排版套路》
  • 《学会这10条设计技巧,新手也可以做出合格的设计!》
  • 《新手科普文!每个设计师都该懂的栅格系统基础六要素》

================明星栏目推荐================

优优教程网: UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

相关推荐

  • 动漫风格专题之标题设计
    动漫风格专题之标题设计
    想要做一个广告标题,尤其是动漫游戏类的,真的没想象中那么容易。当你在字体库里一个个切换,最终选择到了一款很合适的字体,你以为非常完美了!但其实,你与大师的距离还......下面我们就来看看动漫风格专题之标题设计的一些案...

  • 质感创作技巧制作毛衣,玩具熊或者更多萌哒小物件~!(AI+PS教程)
    为节日主题制作应景温馨萌哒的道具,少不了绒毛玩偶织线围脖之类小物件。运用好质感技巧能让它们拥有足够的真实感,更加能让小物件生动有趣使整个画面变得满满都是萌萌哒。此篇AI+PS教程提供制作思路,让大家可以了解到质...
  • edeea3ef944d349482de
    为什么又多了一個像素?(设计经验谈)
    对于平面设计师及插画工作者来说,Illustrator是再好用不过的工具了。Illustrator 最大的优点在于可以轻易将图形量化并修改、以及可以在完成制图后再来考虑大部分的「后端」问题,比如说图档输出尺寸、分辨率等等。 但是...
  • mobeimo1
    童趣大风车(ai教程)
    以下为童趣大风车ai教程。在本教程中,你将学习如何用ai创建一个丰富多彩的螺旋桨风车。 对于初学者,你将学习如何建立一个简单的网格,以及如何创建使用基本的工具和效果。同时你将学会如何使用混合模式和外观面板中的图...
  • 画一套亮闪闪的扁平风格宝石图标第2篇(AI教程)
    接上一篇继续教大家制作不同样式切面的宝石。不过因为此教程是由完整文章分三期为大家整理翻译,很有可能因此会让部分同学感觉内容上有一些断篇儿,所以建议大家在学习之前最好回顾一下教程一的内容。传送门由此去: 画...
  • mobeimo1
    AI画个简单贝壳(AI教程)
    夏天来了,暑假来了,大海我们来了。好吧,暂时到不了海边的,先来画个贝壳沾点海风的气息吧。 1.新建一个空白文档。然后去“编辑>首选项>常规>键盘增量设为1px”以及“单位”选项卡的单位如图所示。我通常会使用这些设置,因...
  • 撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)
    撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)
    暴雪公司的作品一直是游戏精品的代表,就算你不是撸粉儿,但也一定听过他们的大名。至少就连没玩过撸啊撸的小编也听说过很多因它而生的美好情缘的故事。嘿嘿,闲扯了这么多,不过今天的主题却不是撸LOL,而是仿照LOL的UI设计风...
  • 画一套亮闪闪的扁平风格宝石图标第1篇(AI教程)
    画一套亮闪闪的扁平风格宝石图标第1篇(AI教程)
    这是一篇来自于国外网站的教程,作者一次讲了6种扁平风格的宝石图标画法,绘图思路几乎相差不多。但因为原文篇幅较长,所以小编将准备分三期与大家分享。如果喜欢的话,可以随时关注我们后继的更新。 1. 制作一个漂亮的闪...

设计教程热门

mobeimo1

童趣大风车(ai教程)

edeea3ef944d349482de

为什么又多了一個像素?(设计经验谈)


质感创作技巧制作毛衣,玩具熊或者更多萌哒小物件~!(AI+PS教程)

动漫风格专题之标题设计

撸友们,快来撸个LOL风格的字体图标吧~!COME ON!(PS+AI教程)

热门文章

ps cs6怎么抠图覆盖?

" />

ps cs6怎么抠图覆盖

ps抠图后怎么拉出来

怎么用ps软件修图?

" />

怎么用ps软件修图

怎么ps腹肌?

观察原" />

怎么ps腹肌

ps怎么取消合并的图层?

<" />

ps怎么取消合并的图层

psd格式怎么改成jpg?

" />

psd格式怎么改成jpg

ps扣出来的图怎么缩小?

<" />

ps扣出来的图怎么缩小

ps软件怎么制作1寸照片?

" />

ps软件怎么制作1寸照片

ps软件怎么扣人像部分?

<" />

ps软件怎么扣人像部分

ps怎么p身份证号码数字?

" />

ps怎么p身份证号码数字