你的设计,讲理么?—— 细数APP设计中的18个细节(1)

前言

 

“设计绝不是简单的排列组合与简单地再编辑,它应当充满着价值和意义,去说明道理,去删繁就简,去阐明演绎,去修饰美化,去赞美褒扬,使其有戏剧意味,让人们信服你所言……” 

 

    ——图形设计大师Paul Rand(保罗·兰德)

 

 
在过去的十年里,智能手机和平板电脑的飞速发展使移动办公逐渐变成了可能。今天,不管从性能方面还是人机交互方面来看,智能手持设备都已经可以胜任工业现场的使用要求,甚至在某些方面已经超越了传统的设备操作方式,为工业领域带来了人机交互革命,智能手持设备已经真正成为了生产力工具。

 

作为工业自动化领域定制软件解决方案的领导者,美名软件当然不会落后于时代。从2015年开始,我们陆续为不同客户开发了数个工业App,涉及多个应用领域,积累了丰富的经验。我们的UI设计师为大家带来了这篇分享,图文并茂地讲述了美名软件对完美细节的追求。

 

今天这篇文章主要从设计的细节原则谈起,总结了一些APP设计中有助提高APP设计质量却易被忽略的细节点,掌握这些细节,让你的每一个元素界面都有理有据,让你的设计更加更精致。

 

那么有哪些设计中的细节被你忽略了呢?让我们一起来看看这些细节你都把握住了吗。

 

 

以下内容授权转自:黑马青年

01

统一的图标设计风格

 
 
 

图标设计在整个APP设计中是比重较大的板块之一,图标设计风格有:线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。无论我们选择何种表现形式的图标都请保持统一性,相同的模块采用一种风格的表现形式,如果是线性图标就保持一致的描边数值。

 

图标在配色上面也要保持有规律的统一,采用相同颜色是比较常用的配色方式。如果你采用不同色相的配色方式,要保持整体的配色协调,不要出现饱和度、明度反差过大的配色而影响整体的视觉协调。

 

 

 
 

 

 

图标大小的视觉平衡

02

 
 

同一个界面出现多个图标时,我们需要保持整体的视觉平衡。并非是所有图标都采用相同的尺寸就能达到平衡,由于图标的体量不同,相同尺寸下不同体量的图标视觉平衡也不相同,例如相同尺寸的正方形会比圆形显得大。因此,我们需要根据图标的体量对其大小做出相应的调整。

 

 

 
 

03

 

优化你的分割线

 
 
 

界面设计中往往细节的处理最容易被忽略,根据界面配色的不同,我们在分割线色彩的选择上面也要做出相应的调整。由于分割线的作用是区分上下信息层级和界面装饰,配色的表现力要低于文字信息的力度,通常我们会选择浅色而否定深色,这样界面会更加简洁通透。深色的分割线要慎用,除非在一些特定的产品场景下。

 

 

 
 

 

 

不要过度装饰,让界面更简洁

04

 
 

设计需要准确的把握“度”,过度的设计会干扰信息的传达。减少不必要的设计元素,让信息脱引而出,整个界面将会更加简洁清爽,也不会分散用户的注意力。

 

 

 
 

 

05

图片比例&视平线的统一性

 
 
 

在人物展示的设计中,如果并列出现多个人物形象,为了保持视觉平衡我们需要调整并列图片的大小比例,就像所有角色都是在相同焦距下拍摄的。在人物上下位置的调整上面我们要尽量控制视平线的方向,让他们的眼睛处于相同的位置左右。

 

 

 
 

 

 

控制好界面中的配色数量

06

 
 

一个界面中出现3种左右的配色是相对比较容易把控的,如果超过3种以上的配色,是非常考验设计师功底的,如果颜色的处理不到位就会出现五彩斑斓的“视觉盛宴”。

在选择配色组合时,使用相似色的配色方案可以使颜色更加协调和交融;如果希望更鲜明地突出某些元素,对比色是不错的选择。无论选择何种配色方案,都要控制好界面中的配色比重,使信息传达不受干扰。

 

 

 
 

07

 

合理的进行设计对比

 
 
 

通过对比可以让信息模块更加独立,界面层级关系更加丰富。案例中以不同的背景颜色区分不同的信息模块,提升了整个界面的节奏感。颜色的选择可以是同色系中不同明度的梯度表现,也可以选择不同色相的穿插搭配。

 

 

 
 

 

 

明确表达图标的含义

08

 
 

去掉图标文案之后界面会显得更“逼格”,可是你确定用户能看懂图标表达的含义吗?我们在进行界面设计时,图标是为了辅助说明文案所传达的信息,如果去掉文案信息,那么需要图标本身带有很强的信息传达能力,确保用户能正确的识别。

 

 

 
 

 

09

正确的表达按钮属性

 
 
 

按钮的设计必须要清晰准确的传达出当前状态,不能为了视觉效果而带给用户错误的判断,例如深灰色的按钮用户会理解为是禁用状态而放弃点击。

通过按钮的颜色、大小、风格等来引导用户进行操作,需要强化的就要做得突出,不要整个界面都处于主次不明的状态,分散用户的注意力,削弱了界面需要传达的主旨。

 

 

 
 

 

Doris

今天先到这里,休息一下吧,我们下期再见!

 
 

下期预告

 
 

10、正确处理文字排版的层级关系

11、线条与色块分割的合理运用

12、要提前预估信息呈现的最大值

13、运用提示符提高用户的阅读效率

14、信息布局符合阅读习惯

15、相同界面下圆角&直角的统一性

16、设计表达的一致性

17、别把网页的习惯带到APP设计中

18、让表单设计更简洁

 

 

 

联系方式
苏州美名软件有限公司
中国江苏苏州工业园区
金鸡湖大道1355号
国际科技园二期C303
215021
电话:+86(0)512 68075718
业务咨询:转1009,1054
市场合作:转1006
传真:+86(0)512 68075728
联系我们!
info-cn@mm-software.com
微信公众号