6个维度分析一个产品的设计语言

今天和大家分享一下我在体验的一款韩国APP 29CM，这款APP的设计惊艳到了我
29CM这款产品主要是以服装、购物、时尚、美妆为主，同时有一些艺术、生活方式指南的报告。
今天我将从形、色、字、构、质、动六个维度分析29CM这个产品的设计语言，希望对大家有所帮助。

1.形（图形图标）
我们可以先看下韩国PlusX设计公司给29CM做的VI设计展示，从中我们能获取一些点子。
                                                             29CM官网logo

很明显发现图形都是在同一个正方形图形中进行线段切割，利用线段和正方形，形成正负形关系进行设计，来达到设计语言的一致，给人的感受是极简的、有创意的。

图标的绘制遵循统一的设计语言、设计规范和设计感受

主界面

1.我从界面提取了图标，发现都是以2px（基于2倍图）的线条进行绘制，用户点击图标，图标由线性变成黑色填充，同时底部英文字重加粗，使得用户有明确的感知。
2.仔细的人会发现图标的粗细程度和字体的字重给用户的感受是一致的，非常巧妙的设计方式，这也是底部tab栏的体验细节。当我们做APP项目设计时也可以多参考这个方法来提升用户的感知程度，同时提高整体的用户体验。

界面的设计语言应用场景

一些界面中发现他们在标题上，会加上一根粗的线条来做一个分割，这条粗线的粗细程度和标题的字重给用户的感受是一致的、和谐的。又起到一个突出设计语言和信息层级区分的作用，非常好的一个设计语言点子，同时提取29CMlogo中的线条的DNA在界面中，使的界面更具有品牌感，提高整个产品的差异化设计。

2.色（色彩体系）
1.我从29CM产品中提取了界面的颜色，发现界面应用最多的颜色就是白色与黑色，利用黑色和白色，传达简洁的、干练的、感性的和时尚的品牌感。
2.橙色和蓝色作为点缀，橙色的点缀较多，让枯燥、简洁的页面鲜活了起来。同时橙色在重要信息、折扣和重要按钮上有明显的突出和曝光，让用户一眼能看到优惠和力度。
3.灰色有四种，利用四种灰色明度区分层级之间的关系，加强界面的层次感。

3.字（字体体系）
1.29CM选择了一款柏林字体设计师 René Bieder设计的Campton的字体。
2.Campton字体是款无衬线字体，有9种字重提供用户选择，特别在APP的产品中非常的实用，更易于界面的字体字重的调整。
3.Campton数字字体给人感受是时尚而具有识别性。
4.字体的选择需要产品的气质结合，好的数字字体和英文字体可以提高产品的品牌性与产品的差异化，例如一些金融产品的数字字体一般都是比较特别或者经过设计师设计过的。

4.形（图形图标）
1.主界界面banner占取屏幕的60%，产品更想给用户传达图片上的信息。
2.同时我发现banner的比例是4:3。主流手机摄影的照片尺寸一般都为4:3，图像来源于摄影的话，图片比例为4:3是比较合理的。常见的图片尺寸还有16:9、3:2、1:1，例如视频软件中16:9的比例很常见，我们可以根据产品的定位以及需求的不同进行调整和设计。

1.29CM图标和页面的布局是有规律的，左边安全距离是88、顶部切换tab距离中间图片56，底部标题文本距离图片28，描述文本距离横线28，图片尺寸664*664（1:1），右上角图标大小44*44，发现每一个数字都与4有关，以4的倍数作为最小单位进行倍数递增设计，形成一套规范体系来提高设计与开发的效率。
2.界面整体的呼吸感很强，间距的把控很舒适。
3.从29CM产品布局来看，会发现和市面上普遍产品不一样，左半边会预留88的安全距离，右边没有安全距离，这样的产品会显得很独特、个性的布局体验，也符合29CM的产品定位，也是形成产品差异化的一种方式。

5.质（质感与风格）
1.产品风格的定义需要从产品定位、产品气质去散发，我了解29CM涉及领域包含时尚、生活、艺术、美妆、科技购物等
2.从29CM整个产品主界面利用黑色和白色传达简洁干练、时尚的品牌感，界面风格给人感受高级、时尚、极简、布白的感受。
3.每个产品简介、新闻指南像阅读杂志一样。
4.图标的设计纤细、线条、极致的。

6.动（动画与动效）
连加载动画让人看起来简约、极致的，加载过程给用户的感受是流畅舒适的动画感受。

banner在切换的过程中，banner上的标题文字跟辅助文本有个快慢的关系，使得用户看起来是连贯的、有先后次序，而不是直接出现。同时底部橙色的线条也会跟着前进，整体具有节奏感。

总结
1.好的设计语言会给用户一个深刻的感受，每一个产品都需要有自己的产品印象和品牌的形象。
2.好的产品图片和海报设计能提高产品的设计质量。
3.在做产品设计语言我们可以形、色、字、构、质、动六个维度思考，这样我们的设计才能站住脚。
4.在做产品设计可以多考虑如何打造自己产品的差异化设计。
5.色彩、图标、字体、动画都是用户能感受到的，当我们把这几点做的更加细节、流畅，结合产品的调性，整体的体验会有质的飞跃。

最后大家有时间可以下载29CM体验体验（需要科学上网体验会更好）
感谢大家阅读，关注黄小伟设计，分享更多好的设计和作品～～～

微信公众号：黄小伟设计

Powered by Froala Editor