UI 设计
只需要基本的知识提高 UI 审美
留白
第一个设计基础是空间留白,也被称为负空间。顾名思义,它是页面上元素之间的空间
被压缩在没有留白的页面上的元素不仅看起来没有吸引力,而且难以浏览和阅读
可以通过多种方式调整留白,包括填充、边距和行高。通过查看下图了解有效留白带来的不同
对齐
对齐确保每个元素相对于其他元素正确放置的过程,例如通过对其列在页面上保持向下对齐
对比
在构建页面或应用程序时也要考虑对比度,这一点很重要。对比度是页面上相邻显示的颜色之间的差异
对比度差的页面很难阅读,并且元素也不突出。对比度差的页面具有良好对比度的页面不仅看起来更好,而且更加用户友好和具有高可访问性
比例
比例也是用户界面的重要组成部分,所以请仔细考虑每个元素的大小。例如元素相对于页面应该足够大(因此没有大的间隙)。同样,标题等有较高重要性的元素应大于重要性较小的元素
版式
版面设计对 UI 也有很大的影响。有很多方法可以调整这个设置,包括字体选择、字体大小、对齐方式、字母间距、行高、字体样式、颜色和对比度等。
通常,在一个页面上使用不超过 2 个字体系列,并确保不同的方面可以协同工作,以建立重要性的顺序。这就是所谓的视觉层次结构
颜色
最先影响用户体验的 UI 设计是颜色。颜色心理学认为着每种颜色都对某些人产生了意义——例如红色可以表示危险,而白色可以表示清洁和宁静
但是要注意颜色。含义会因为文化差异而改变,因此在选择颜色时,请务必进行研究并考虑目标受众
同样要记住,太多的颜色会造成不良的 UI,并且你选择使用的颜色应该互补。根据经验,将相同色调的较浅或较暗的变体彼此相邻,一般不会出错。只需看看下面两张图的对比,是不是第一张很辣眼睛
视觉层次
UI 的某些元素比其他元素更重要。视觉层次结构使我们可以确立这种重要性
可以用位置、对比度、颜色、比例、样式或以上各项的组合来完成此操作
极简设计
设计遵循“少即是多”的设计理念,用极少的色彩和极少的形象去简化画面,有以下原则:
- 大量留白:留白能够营造平和感,能够创建视觉焦点
- 用网格系统规整元素:可以让简约的设计更加富有条理,赋予信息和元素以条理和有序感
- 扁平化元素:目前设计的主流,在精神内核上和极简主义保持一致
- 简化配色:选取一种到两种提高色贯穿整个设计,在色彩上追求平和,舒缓,内敛之感
- 使用可读性高的字体:确保用户能够快速扫视
- 保持简单:少即是多这个规则始终适用,尽可能剥离纯装饰性设计,确保核心内容一目了然
参考资料
- 动静之美 Sketch 移动 UI 与交互动效设计详解