无从下手的界面，到底是哪些因素阻挡了你？

作为新手设计师，刚开始做界面时你有没有遇到过这些情况？做的界面似乎总是在重复一个风格，永远在参考的路上，设计的界面在电脑上感觉良好但手机预览效果却不尽人意。

要解决这些问题，我们主要要做好以下2件事。

一、汇总组件类型

二、熟记常用尺寸

汇总组件类型

我们都知道UI界面实际上就是将多个不同的组件模块按照一定的顺序排列的界面，因此对组件的整理收集就显得尤为重要。

除了要熟悉两大平台（iOS和Material Design）介绍的组件外，我们更应该有意识的的搜集汇总线上产品的各个组件(典型页面也可以进行汇总)。

我以金刚区功能入口为例，看看我们应该从哪些部分对金刚区模块进行汇总。

1.金刚区图标有哪些设计样式？适用场景是什么？

2.金刚区有哪些排版布局？适用场景是什么？

针对以上两个问题，我们就可以有规律的对金刚区模块类型进行汇总整理。

金刚区图标样式汇总图：

金刚区排版布局汇总图：

这里的形式不局限，我自己的做法是直接把搜集的组件介绍文章存到笔记(我常用的是印象笔记和有道云笔记)中，按照组件分类便于自己下次查看。自己搜集的组件就截图，按照分类存到石墨文档中。

熟记常用尺寸

知道该用组件的哪种类型后还不够，我们还需要熟记组件中常用的一些尺寸。

我还是以金刚区功能入口为例。金刚区功能入口主要是由图标和说明文字构成的，在绘制金刚区时，要考虑图标的尺寸、文字的字号、图标与文字的间距等，这些尺寸可以汇总出一个范围。

常规面型金刚区尺寸简图：

3排多层级金刚区尺寸简图：

以上图例仅做收集尺寸参考，具体范围大家可以多汇总后记住一个常用范围。

从图中我们可以看出，文字字号和间距尺寸变化不大，主要是不同类型金刚区图标尺寸的不同，因此要重点将金刚区图标的尺寸进行整理。

划重点

无从下手的界面说到底是我们对组件类型了解太少，对组件尺寸不够熟悉，即便你已经掌握了两大平台的组件规范也不要忘记搜集汇总自己常用的组件模块，除了本文提到的金刚区，还有Banner区、导航栏、按钮、图文列表、搜索页面等等。

这么多组件你有没有做好汇总整理呀？没有的话还不赶快行动起来！欢迎大家查看海盐社分类精选中的模块组件~

更多推荐

--关于我们---

UI中国 专业用户体验设计平台

新浪微博：@UI中国