互联网产品的设计体系
读了《设计体系》这本书后,关于设计体系的一些思考。
·写在前面
伴随着互联网的发明与发展,设计师岗位不断细分,衍生出了越来越多的相关岗位。从门户网站时期的网页设计师到移动互联网时代初期的GUI视觉设计师,从UI视觉设计师到如今的体验设计师。互联网产品越来越成熟,设计师的能力也越来越全面,对于各产品设计体系的理解应扎根于心,与各岗位小伙伴一同完成产品目标。
·首先了解几个概念
“设计模式”
用于指代任何可复用的界面组成要素,包括按钮、文本框、图标、配色、字体,以及可复用的交互行为与功
能流程。
“功能性设计模式”
与行为相关。界面的实体组成要素,例如按钮、页头、表单元素、菜单等等。
“感知性设计模式”
与品牌及外观相关。界面的非实体组成要素,例如配色、字体等等,通常用于塑造界面外观,强化品牌识别
与情感关联
“设计语言”
组成产品界面的一系列具有内在关联性的设计模式,包括功能性模式与感知性模式,以及与特定平台或行业
领域高度相关的设计模式。
一、什么是互联网产品设计体系
是指服务于数字化产品设计的一系列具有内在关联性的、组织有序的设计模式与实践方法。一个完整的设计体系由“设计模式”和“实践方法”构成。
1.设计模式
“设计模式”分为“功能性设计模式”和“感知性设计模式”。主要聚焦于产品内的设计,这些具有高度内在关联性的设计模式组合构建了产品的设计语言。
2.实践方法
“实践方法”主要聚焦于协同。因为设计模式建立出来后,导致行落地到产品的设计上时由于每个个体的“心智模型”和对于图形或文字的理解不同可能会作出偏离最初“设计模式”建立的本质和初衷,所以对于有效管理设计模式,以及如何通过设计模式进行创造、提炼、共享和使用也需要形成一个共同的认识,这样才能构成一个完整的设计体系。

二、为什么需要建立设计体系
1.统一品牌认知
在业务方看来“设计体系”这只是一种概念,费力不一定讨好,为什么要花费那么多力气和时间成本去建立一套设计体系呢?
先举一个简单的栗子:

能看出这四个界面是什么产品么?
如果不靠产品下面的tab来判断,很难把这四个界面联想在一起,也不敢想象这四个界面是同一款产品,因为他们的主色调不一样,整体的设计风格也不一样,四个一级界面相互割裂,没有一套完整的设计体系去支撑。
再看看下一个栗子:

这款产品明显比上一个产品更加像一个完整的产品,每一个界面都会让你看到就联想到他的名字。没错,就是那个,你可以大声的喊出来它的名字了!
美国的科技毫无疑问是世界最发达的,他们的互联网产品设计起步也比较早,目前也更加的成熟,在硅谷有一家公司叫"Google",大家一定不陌生,Google生态体系之庞大不用我多说,从软件应用到科技产品,不同平台的设计靠着"Material design"实现高度统一。
"Material design"想必大家也不会陌生。它是一套完整严格的设计体系,通过背后的隐喻来统一设计语言,可以看到所有的规范几乎都是围绕Material的隐喻展开的。(比如:材质设计的灵感来自于物理世界及其纹理,包括它们如何反射光和投射阴影。材料表面重新构想了纸张和墨水的介质。)规范按照Google的说法是融合了用研以及认知科学的成果,很严谨,对很多地方做了量化。因为Google有Android,有Chrome OS等操作系统,用严格的设计语言来统一各个平台该上的设计效果非常有必要。

2.塑造用户认知
我们回想一下自己第一次接触一个陌生产品
首先我们会对产品从视觉上给到大脑一个第一印象或者既定印象,从而激发对产品的兴趣,然后通过视觉、触觉、听觉的一个共同的参与去深入的体验这一款产品,了解产品的逻辑,大致知道这是可以用来干什么的,进而学会使用它,并且加以利用以满足自己的需求。
在这个流程中,一套完整的设计体系可以加深并塑造产品在用户心中的认知,不断重复强调这种设计模式就可以让用户的感官在受到刺激时能够第一时间作出反应。

举一个工业产品设计的例子:“戴森”

*此图片来着网络,侵删
1.戴森的“功能性设计模式”主要体现在对性能的极致追求,相比日韩品牌虽然功能上并不够全面,戴森在设计产品的时候,会盯住商品的最根本属性,并且希望把对应的功能做到极致。戴森一直钻研气流,钻研大吸力的马达也是因为这一理念,例如在戴森在发明无尘袋吸尘器之前,其他人没有意识到不会堵塞的吸尘器才是目前吸尘器需要解决的最高优先级问题,而不是一些无关紧要的附加功能。
2.戴森的“感知性设计模式”则主要体现在全系的产品都采用金属材质搭配贯通式透明塑料件,产品通透感极强,产品肌理以及精湛的表面喷涂,磨砂处理整体设计有种未来太空感,还有经典的紫色、蓝色和灰色搭配、无叶式的设计、子弹仓式的马达外壳...凸显未来、高端的气质。
这两点共同组成了戴森产品家族化设计语言,保持功能与设计的平衡,通过源源不断的新品发布在用户的心智中反复的强调这一套设计模式,塑造戴森在用户心中的认知模型。

*此图片来着网络,侵删
近几年一些国产品牌也慢慢意识到了这一点,近期有看到“九阳”的产品设计体系的搭建,觉得也很不错。链接如下:
站酷:https://www.zcool.com.cn/work/ZNDMxOTA1MzI=.html
3.提升协作效率
设计体系提供了一系列标准化的工具和流程,可以帮助团队实现更有效、高效的完成设计工作与协作。即便只是把简单的一系列关键组建汇总在一起,也可以显著的提升协作效率,解决眼下的问题。
三、怎样建立产品的设计体系
1.确保设计目标清晰一致
首先建立体系的前期需要先制定一致的设计目标和产品目标,以及这个体系能为团队带来什么。清晰的目标可以带来方向与动力,可以帮助大家在日常工作中更快速的平衡项目之间的优先级。在时间有限的开发时间里,可以清楚的知道哪些模式是需要重点设计的,哪些是可以作为辅助功能简化,甚至去掉。
2.建立界面的体系化
建立界面的体系化工作首先需要制定设计原则,例如Google的“用户体验设计师”提到的Google十大设计原则:
1. 有用(Useful):以用户为焦点,关注他们的生活、工作和梦想。
2. 快速(Fast):争取节省每一个毫秒。
3. 简单(Simple):简洁就是力量。
4. 魅力(Engaging):能够唤起新手的好奇心,能够吸引资深用户。
5. 革新(Innovative):勇于创新。
6. 通用(Universal):全世界适用的设计。
7. 盈利(Profitable):为现行的和将来的商业模式做好安排。
8. 优美(Beautiful):外观具有视觉愉悦性,但是不会令用户分心。
9. 可信(Trustworthy):值得用户信赖。
10. 人性(Personable):加入人性化因素。
接下来定义标准化的设计模式,也就是我们常说的设计规范,设计规范(设计规范应该包括“功能性设计模式”和“感知性设计模式”两者相辅相承不可分割)组成和建立我们的设计模式库。
3.建立标准的工作流程和管理机制
为了可以更好的使用体系化的思维,团队需要制定标准的工作流程,并且体系的更新迭代也需要有一套标准的规范和指导。不仅对于界面的体系化有这种管理机制,我们还需要建立知识共享机制,确保每一位团队中的成员都能清楚的知道和了解目前项目的细节,这也是把每一个人也看作是设计体系的一部分,也有助于统一协作语言,更好的发挥设计体系的作用。
四、总结
在我看来不管是以前的工业产品设计还是如今的互联网产品设计,归根结底都是属于产品设计,产品设计不仅仅需要好看,好用,更要重视产品与品牌之前的关系,不仅需要研究用户在使用时候的感受,更要照顾到用户在使用产品以外的感受,设计体系的思维有助于我们打造出一个更加有感情有性格的产品,能够让用户全方位立体的感受到我们产品的魅力,同时也有助于我们设计师高效、高质量的输出我们的设计理念和设计思维。














































































