文章来源：

作为技术、小白在转产品的时候，需要先从大的方向了解产品，以下内容可以帮助大家从广义上了解产品设计。

关于网页设计的

【产品美学】：色彩、结构、交互

【场景】

【行为心理学】

数据分析-sql技术基础

一、产品美学（工艺设计）

1.比例与尺度

黄金比、黄金矩形：

根号比、根号矩形：根号，12345，倒数

2.统一与变化

确定在整个产品中，某个元素是统一属性值的：功能与形态统一‘、产品比例尺度统一、产品线性风格统一、色彩效果、质感、

变化：加强对比，强调重点部位；通过形状、排列、色彩、材质

3.均衡与对称

考虑方面：产品形态、色彩轻重、材质轻重，支点、装饰

对称给人安全感

4.稳定与轻巧

相关因素“”支撑面大小、中心高低，视觉中心、色彩轻重、装饰形式、形体分割

5.对比与调和

形态、线型、色彩、材质、虚实、体量

6.节奏与韵律

连续、渐变、交错、起伏

二、产品美学（网页设计）

1、色彩

  参考链接 https://wenku.baidu.com/view/7051f38c294ac850ad02de80d4d8d15abe230095.html

2.结构

一栏，两栏，三栏

在博客等记事、编辑为主的网站里，有时候会把主要内容区域放置在最右侧栏位，左侧并排放置两个辅助区域。例如印象笔记网页版、简书网站的写文章页面。

此外，随着更多响应式网页的尝试，不少产品在手机端、平板电脑、个人电脑等终端为了达到一致体验，在解决多设备显示的问题上，跨页面实现两栏式、或者三栏式不失为一种不错的解决方式。

http://www.woshipm.com/pd/633363.html

截图：

3.交互

交互详解：https://wenku.baidu.com/view/d42cc8db33687e21af45a9fa.html

截图：

其他文章参考--
1）交互面观 http://baijiahao.baidu.com/s?id=1603061570597044846&wfr=spider&for=pc

2）关于小图标icon的交互设计：关于icon的动画交互：http://www.woshipm.com/ucd/1648715.html

待学习---文章中提到的principle 做交互的教程     http://principleux.com/principle-chinese-document/#Drivers

3）交互提升：反馈、提醒、引导、激励
文章内提到的几个案例很有意思：http://www.woshipm.com/pd/1649492.html

截图

4）抽屉式导航 http://www.woshipm.com/ucd/92222.html

三、产品设计之——场景

产品设计，就是解决特定用户在具体场景下的需求。

1、如何写一篇场景分析的文章   例子：币乎场景分析    http://www.woshipm.com/pd/994894.html

待关注--梁宁-得到

《思考，快与慢》

2、场景考虑与优化例子：http://www.woshipm.com/pmd/951977.html

取票机的购买保险功能，涉及到支付场景，实际并不符合整体取票场景的流程

3.场景设计面观 中高级进阶能力训练必备：http://www.woshipm.com/pd/946503.html

四、行为心理学

https://baijiahao.baidu.com/s?id=1589810055162730027&wfr=spider&for=pc
https://www.36kr.com/p/5129430