恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
韩国29CM产品设计语言分析
98.9°
2022-11-30 原创文章 经验/观点 举报 26656 89 91 5

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

更新:2022-11-30

收藏

89人已收藏

评分:

完整度:5星

启发性:4星

勤奋性:4星

排版布局:4星

推荐:
作者从形、色、字、构、质、动六个维度分析29CM这个产品的设计语言,很全面,加油~

黄小伟

每天都要加油

  • 12

    作品

  • 137

    粉丝

  • 63

    关注

  • 3D主题设计!
  • 喜茶小程序产品设计体验分析
  • 爱彼迎产品设计体验分析
  • Instagram的视觉体验分析

    猜你喜欢

      2022-11-30 原创文章 经验/观点 举报 26656 89 91 5

      韩国29CM产品设计语言分析

      98.9°

      你确定要举报韩国29CM产品设计语言分析

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2022年11月30日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      91
      89
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录