设计经验.
深入解析微软Office新版图标设计
最近微软Office把Word、Excel、PPT这些常用软件的图标重新进行了设计。新图标流畅的形状和多彩的渐变色,立刻吸引了我的注意。 微软上一次大规模更新Office的图标还是2018年,当时采用的是“扁平化”风格,线条直愣愣的看着特别规整。这次的新设计完全不一样,重点就俩字:流畅。通过图标设计风格的更新迭代,我们也能透视在AI时代产品是如何演变的,为我们的设计提供新思路~ 一、新图标风格解析 1. 形状更柔和 新图标的造型比之前更简洁,同时边角都做了圆角处理,还加了叠加效果,不像之前那么“锋利”。早期的图标设计缺乏视觉深度和质感,新的图标设计风格更现代化,看着更有层次感。 例如更新后的Word图标(右)主体部分由四个模块简化成了三个模块,提高了在小尺寸下的清晰度。通过新旧对比图能够清晰的看到,新的的Word图标在保持熟悉感的同时,简化了视觉体验,使其变得简单易用。 2. 颜色更鲜活 新的图标设计更注重颜色对比度,每个图标都加入了渐变效果,同时还保留了各自的特色。比如Word仍是蓝色系,但从一种蓝过渡到浅紫、浅粉;Excel从深绿变浅绿;PPT则是从橙红慢慢变成黄色。 渐变色的搭配…
苹果2025发布会结束,快来看看设计规范更新了哪些内容!
苹果的秋季发布会不痛不痒的开启和结束了,在手机部分更新了 iPhone17 和 17pro 系列,发布了名为 iPhone Air 的新产品,同时砍掉了 Plus 产品线(气抖冷)。 虽然对于这次更新除了脏话我没什么好评价的,但从 UI 设计的角度出发,我们就必须要关注新设备带来的 UI 影响有哪些。 所以下面,我们简单分享一遍在本次发布会后,新创建的 UI 设计项目,应该使用什么样的设计规范? 更多iOS 设计分析: 一、主流 iPhone 屏幕规格说明 UI 设计的第一步是创建画布,而创建画布所用的参数,是根据要面向的设备类型决定的,所以我们首先要了解市面上流行哪些硬件设备,以及它们对应的规格是什么。 今年更新的主要设备和屏幕规格如下: 最小的异类 16e 可以充分理解成是果农用来销库存的产品,还在使用已经被淘汰的刘海屏,已经不是我们关注的对象。而胶囊屏经过多年的迭代已经成为目前的主流设备,且可以预见的是未来两三年的主流设备也是胶囊。 值得注意的是,本次更新中 17pro 和 17 采用了相同的屏幕尺寸和规格,也就是使用了一样的画布。而这个尺寸和上代的 16pro 是相同的(16…
设计经验!帮你完整掌握流行的BentoUI设计风格
本文来分享下近期比较流行的 Bento UI 或者说 Bento Box 设计风格,以及一个设计小案例实操。 一、这是什么风格? Bento Box(便当盒)源自日本,指的是一餐被分成各个组成部分并装在盒子里的饭盒。而由此命名的 Bento UI 或者说 Bento Box 设计风格,是通过将用户界面划分为明确的部分或区块,类似于传统的便当盒中的隔层,它为内容呈现提供了结构化和有组织的布局。 不管是微软的 Metro UI,苹果的宣传片和网页,以及近期比较火的另一种设计风格“Linear 风”的 Linear 官网中,都可以看到 Bento Box 风格的身影。 二、风格特点 上文提到,Bento Box 设计风格是一种以传统日本便当盒为灵感的设计风格,就像便当的隔层一样,将界面划分为多个隔间,通常结合“卡片”的表现形式,因此具有以下特点: 1. 分隔的布局 Bento Box 设计风格通过明确的分隔和隔层来组织界面。每个隔层通常用于放置特定的内容、功能或模块,使界面具有结构性和组织性。 2. 清晰的分类 通过将不同类型的内容或功能放置在各自的隔层中,实现了内容的清晰分类。这样,用户可…
【练习篇】动态 SVG 径向渐变动画
前言: 前段时间看到这种动态SVG渐变效果看上去很舒服,今天抽出来时间试了一下,看着还不错。文章中没有放GIF图片,试了一下太掉帧了,直接放了静态图片了,想看效果的自己建一个index.html试一下就行。 话不多说直接上图和代码 演示图: 一个简单的HTML页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>漫川演示页面</title> <style> body { margin: 0; padding: 0; overflow: hidden; } svg { width: 100%; height: 100%; position: absolute; z-index: -1; } @media (max-width: 768px) { svg { width: 100vw; height: 100vh; position: absolute; z-index: -1; } } /* 添…