界面清单-帮你打开设计思路

界面清单（interface inventories）也就是把自己将要做的组件、模块都列出来找到参考并截图分类，方便打开自己的设计思路、统一设计风格。

 

问题的开始

在开始我刚开始后台设计的时候，因为有了像 Ant Design，Element等这些优秀的团队所贡献的规范指导，刚开始后台搭建的时候往往会觉得很简单，但是随着后台项目所涉及的功能增加，使用其他平台现成的组件进行照搬根本就没办法解决自己现在的问题，而此时项目往往已经开始了一段时间了，现在再重新做实在有些来不及，只能各种寻找类似的组件搭建出一个令自己不是很满意的界面。

图片来源于网络

怎么去解决这样的困境呢？在学习原子设计（Atomic Design）的时候，里面所讲述列界面清单的方法一定会对你有所帮助。

 

准备工作

制作一个界面清单会产生许多的截图，选择你常用的工具就行。我通常会用 Sketch 进行排列。

工具使用什么都行，主要看它是否利于截图的查看和分类整理。

图片来源《Atomic Design》

 

列出清单

在开始前，你需要尽可能多的把自己要做的项目中的界面元素尽可能全的列举出来。你可以先从大的类别开始，还记得原子设计中之前说过的界面的构成元素么？

原子、分子、有机体、模版、页面

 

原子是在构成页面时最基本和最小的单位，，例如：颜色、文字、图标、分割线等。我们将几个原子组合起来便形成了分子，也就是在页面中所出现相对简单的组件例如：按钮、输入栏、导航栏、搜索框等。当原子和分子组合排列就会得到有机体，它是界面中相对复杂的组件。而模版就是将上面提到过的原子、分子、有机体都排列组合起来，将它们分层放置在布局中。最后将真实的数据、状态应用到模版中去，就形成了我们所使用的页面。

图片来源《Atomic Design》

 

从大的类别开始然后往下拆分，比如你可以试着从这些方面入手：

• 通用组件：在整个系统中通用的组件，如页眉，页脚等。
• 导航：头部导航，页脚导航，分页导航等，只要是能用于用户界面导航的任何东西。
• 图像：logo的摆放，首页大图的铺开方式，用户头像，缩略图，背景，在界面中显示的任何其他类型的图像模式。
•  图标：不同的风格或者是你之后会用到的特殊行业的图标，不管是首页、上传、确定、发现、搜索等等。
• 表单：输入，文本区域，选择菜单，复选框，开关，单选按钮，滑块和其他一切形式的用户输入。
• 按钮：主要按钮，次要按钮，大按钮，小按钮，禁用按钮，活动，加载，甚至看起来像文本链接的按钮。
• 标题：有 h1 ， h2 ， h3 ， h4 ， h5 ， h6和排版标题的变体。
• 列表：列表类型的格式是以无序的，有序的，定义，项目符号，编号，线框表，条纹表，或任何组元素呈现的。
• 媒体：视频播放器，音频播放器和其他多媒体元素。
• 第三方组件：窗口小部件，内部框架，对话框，分享，任何未在你的域名上托管的组件。
• 广告：所有的广告类型和尺寸。
• 消息：警示，成功，错误，警告，验证，加载，弹出窗口，工具提示等。
• 颜色：收集界面中呈现的所有种类的颜色。
• 交互动效：如移动，淡化，抖动，转换或闪烁的任何UI元素，截图不方便的话可以选择录屏。
• 交互式组件：折叠面板，Tab标签，轮播图，和其他具有移动部件的功能模块。

以上所列举的并不是固定的，开始分类的时候一定要注意好好理解项目，根据你要做的项目来制定清单列表。当你所需要的清单都完成了之后，你就要好好审视一下：有哪些样式保留，哪些应该去除，哪些样式可以合并？哪些参考是我们可以使用的组件模式，哪些组件是可以借鉴的？有没有可以优化的交互方式，或者哪些交互可以用在自己的项目中？

各个按钮的样式和状态  来源《Atomic Design》

 

审视完界面清单以后，就要准备选出自己需要用到的模块和组件好复用在自己的界面设计中。这一个过程就像是搭乐高积木一样，收集、整理、组装。

图片来源《Atomic Design》

 

注意事项

很多时候我们去找参考，素材找的越多越不知道自己要做什么。这时候一定要记得回想一下我们刚开始所设定的风格规则，想想我们是要用卡片的还是描边的，是间距大的还是紧凑的。边找素材边提醒自己：这个界面虽然好看，但它不符合我开始设定的规则。

图片来源于网络

 

还有就是一定要注意时间，不要贪多！大致看一眼参考和自己设定的风格一样就可以留下来不要想其他。每一个类别花40-70 分钟就已经够了。截图的时候你可以试着给自己设定一个闹钟，后面我们还会对截图进行筛选所以不要在这一步花太多时间。

图片来源于网络

 

关于界面清单

在我们刚开始学习美术的时候，都是从临摹开始的，没有一开始就选择进行创作的。通过临摹一点一点的打牢基础，有了扎实的基础才进行下一步的学习。

我觉得设计也是一样的，没有说突然间有了快速设计界面的方法，罗马不是一夜建成的一步一步来，看下别人用的什么方法和样式，尤其对于 UI设计来说借鉴成熟的设计模式能让你成长的更快。刚开始制作界面清单的时候会比较困难，但你坚持下去从现有的截图中找到规律，为你后面构建一个完善的界面打下牢固的基础。

图片来源于网络

 

参考文献：

https://wenku.baidu.com/view/53a0322759fb770bf78a6529647d27284b7337a3.html《原子设计》

 

原文地址：
海盐社（公众号）

作者：刘清