做了三年设计，第一次包装作品，献丑了！

近期工作室和摩尔线程合作的一个项目，windows端的应用程序，前两天也是上了站酷首页：

设计把控：菜心
页面风格：花菜
页面延展：花菜、龙龙
3D设计：菜心
包装：璇璇

版权所有：摩尔线程
设计出品：菜心工作室

大体效果如下：

除了分享项目本身，再和大家分享一些包装时比较实用的设计点吧！

确定大体风格
包装前，我们需要结合产品属性，确定大体的包装风格，PES（摩尔线程）是一款具有科技感，且简洁的产品，那在包装时我们就可以往这些关键词中靠。
当我看到“线程”二字时，脑袋里会闪现出“线性”“方程”等理科词汇（这也是包装时应用线性做修饰的原因之一）

确定主要颜色
主要的颜色应用是结合了产品的颜色规范，将具有产品代表性的橙色融入其中，并将“无彩色”与其搭配会使整体画面更加和谐且高级。

参考

找参考

做设计时千万不能明白需求后就开始埋头动手画！而是一定要是带着“目的感”去找参考，看看别人的设计是怎么做的，他们的逻辑是怎样的，从他们的设计中可以提炼哪些比较好的点应用在我的设计中呢？带着这样的想法去找参考，不仅会找到一些很不错的细节点转换在你自己的设计当中，而且看似找参考“浪费的时间”反而会大大提高你后期包装的效率！

那么我的参考都是在哪找的呢？主要是站酷和dribbble。你可以在站酷里看看首页推荐的作品是如何包装的。在dribbble看看别人网页是如何设计的，有时网页设计的排版方式，排版风格可以很好的转化到你的作品包装当中

参考的转换

案例一：产品属性界面
起初这个页面第一版是这样的：

画面层级看起来很单，于是又找了找参考，发现参考中有一点很值得借鉴：

参考中，通过文字和小元素的结合，对画面层级起到了丰富的作用。提取出这一点后，修改出了如下版本：

大体感觉好了许多，那我们还能如何优化层级呢？改变其中一个卡片颜色，将其做成选中状态

画面层次又丰富了，这样感觉是不是舒服多了？

案例二：字体规范界面

无意中发现了这两个界面，觉得它的设计还蛮有趣，就想着和字体规范结合起来

第一版：将二十六个英文字母依次排列，选取项目名称中“PES”放置于线性方格中，凸显品牌名称。

但发现由于英文字母结构的特殊性，这样排出来，杂乱不堪。回顾参考，我们尝试将每一个英文都放进一个线性方格中。

将其放进容器中，画面整齐度确实有了明显的提升，但过多重复的信息层级堆叠在一起，使画面看起来过于冗杂且因为页面大小的有限性，在一定程度上影响到方格之间的间距，让画面显得有些拥挤。

那我们就继续浓缩字数，使其更加精简。结合画面的结构将参考中左右构图的形式转换成居中构图，然后加一些文字及小元素使画面平衡，最终得到了下图：

过多的线性会使画面看起来很“散”，相反面性会让画面显得“整”，二者的结合既可以使画面看起来整齐和谐，又可以丰富画面饱满度。

案例三：过度页面的形状

提取参考中的细节点，应用在设计当中。
当你觉得参考中有些点很有趣，可以尝试将其放进你的设计中。

很多时候我们并没有过多留意页面交界线的问题，但像参考中稍微加一个转折，会给平淡无奇的页面带来不一样的节奏感。

案例四：内容页面

合理结合参考的设计点，会让你的效率事半功倍

起初这个页面根据参考转换的并不是很好，画面节奏感也出现了问题。单独展示一个空状态页面还好，但将3个放在一起时，就会显得画面很单薄没有重点。

当你发现1个参考点无法支撑起一整张页面时，那你就再寻觅寻觅新的参考

结合自身产品风格，“取其精华”，最终此页面变成了下面这样。

这样既能很好的展现出3个空页面的状态，又不至于使画面看起来很沉闷。

案例五：产品展示页

参考中数字变大了与文字形成大小对比，我们就可以提取这一点，放在我们的参考中试试。

放大数字，将其放置于文字底部，降低其透明度，即可丰富了画面层级，又不会抢主视觉内容。

总结

1.根据产品属性确定包装主体风格
2.颜色可选取产品主色和“无彩色”相结合，会使画面更加和谐与高级
3.站酷 <首页推荐> 和 dribbble中的网页设计排版可作包装参考
4.可以通过添加小元素或者颜色对来丰富画面层级。
5.线性会使画面看起来很“散”，面性会让画面显得“整”，二者的结合既可以使画面看起来整齐和谐，又可以丰富画面饱满度。
6.包装中页面与页面的交界线也可以有小设计
7.合理结合多个参考点，会增加画面的趣味性
8.文字的对比，弱化次要层级的颜色

以上就是在做包装找参考以及转换参考时的一点小思路，希望对你有所帮助。

本文来自微信公众号“菜心设计铺”（ID：caixinshejipu）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。