设计系统中图标细节规范问题

想问一下一个 ui 的细节问题。关于图标统一性的,一个好的设计系统,是不是允许图标出现又有线性又有面性,又有彩色的图标,线性的又可以分为 1.5 描边- 2 描边好几种。完全统一成一种感觉不太合适,不统一又会觉得是不是有点乱???所以一个好的系统的图标规范要统一到什么程度比较好。

首先这个回答没有答案,距离我上一次亲自动手做这类工作已经过去了十五年时间,我当前无法提供操作层面的答案。

“是否允许图标出现不同的风格”,是 Design System(设计系统)的颗粒度的问题。而颗粒度的问题来自系统的开放度,更来自产品本身的复杂度和产品创始人的哲学观。更细节的还与用户在具体场景中的使用情况。

我要说的是 Design System 并不是一定要做的,为什么不一定要做,因为大多数公司和产品的市场规模没有大厂那么大。比如我做了一个记账的App,只有登录和记录存钱的功能,那根本没有必要做一个 Design System 来;比如我的公司还在天使轮,甚至八字还没一撇,那也没有必要来做 Design System ;比如这个产品的方向还在摇摆,做 Design System 用处可能也不是很大,甚至不是当务之急。现在市场上能称之为 Design System 的,可能也就是那么少量的一些大厂。

因此,甚至我们在做的时候,不一定要做一个大而全的东西 ,能称作 Design System 的,我感觉当年 Yahoo 的 Design Pattern Library(DPL)有点像,淘宝在内部也做过类似的DPL。而这些DPL已经可以满足很多场景了。

也就是说, Design System 可能只是一种阶段性的名词罢了,如果你叫设计规范,设计模式库,设计资源等等都可以。微信团队的设计规范现在也在网上,他们叫“WeUI”和“品牌资源”。

话说回来,如果你要问 Design System 的颗粒度是否要更细,是否要多种?我认为这个问题是没有答案的。

如果你只是问“是不是允许图标出现又有线性又有面性,又有彩色的图标,线性的又可以分为 1.5 描边- 2 描边好几种。”

那么我的答案是:如果你允许就允许(本质上是哲学问题)。

看iOS的图标就知道了。iOS7的“扁平风格”,在原则上,是朝着更清晰识别的角度去设计的。旧式“拟物风格”的图标在这么小的屏幕上,显得拥挤不堪。而且,iOS7后的图标,不仅仅是“扁平”化,还保持了“灵性”。今天的iOS16,还把app的内部信息更进一步“往前带”。

那么iOS有规定这么多细节吗?我认为是没有的,它更多的是保持了它的设计哲学,比如:清晰,有层次,审美要完整,一致性,隐喻,用户是掌控者等等。

而如果你的产品设计“哲学”中,认为你的图标又可以这样,又可以那样,可以线性,也可以彩色,可以1.5描边也可以2描边,那依然是可以的。但如果你规定怎么样都可以的,没太多限制,那么也就意味着这个 Design System 是一个自由的产品设计系统。

可以吗?当然是可以的,游戏 minecraft 就是个例子。但尽管 minecraft 是一个在游戏中高度自由的产品,它的控件(图标等)也是有规则,有限制的,有自己的特点的。

也就是,你可以要求图标这样,也可以规定图标那样,但是你要有自己的特点,而非随意制定规则。如果1.5描边适应一些场景,而2描边在另外的场景上表现更好,那么这个 Design System 依然是好的。

有例子吗?有的,回忆下疫情期间给老人使用的“关怀版”或“大字版”(我已经删了那个app就不再下载截图了)

还有另外一个问题,也就是你在提问中多次描述的“什么是好的设计系统”?其实也是有答案的,Dieter Rams 早年提出了“好设计的10个原则”,可以去搜索。

我的意思是什么呢,你需要关注更顶层的东西,才能对细节问题有更好的判断。

夸张一些,如果我们的用户是一群老人,他们的视力不好,他们的听力不好,他们需要语音来指引,我们为什么把“图标有线性又有面性,又有彩色的图标,线性的又可以分为 1.5 描边- 2 描边好几种”这些细节问题纠结不清呢?

再往上思考的应该是:我们的用户是一群什么样的人,我们的产品处在哪个阶段,我们是不是在这个阶段做一个设计系统,我们的设计系统颗粒度要不要很细,我们的设计系统要不要容错,我们的设计系统什么时候可以更新,当出现问题的时候,我们的设计系统如何调整更新……

供你参考。

© 2022 Xiaoxiao’s Weblog. All Rights Reserved. 粤ICP备15088982号