ant-design/docs/resource/reference.md

# 文献素材

- order: 1
- category: 1

---

在进行模式、组件和语言的整理中，《About Face 4》、《Web 界面设计》、《界面设计模式》、《写给大家看的设计书》、《设计心理学》、《Web表单设计：点石成金的艺术》等书籍给了我们很多的启示，帮助我们节约了大量时间，并成功克服了很多困难。如果想了解更多设计相关的内容，建议你去阅读这些非常棒的书籍。

<a target="_blank" href="http://book.douban.com/subject/26642302/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/PeeRQQIGQJCswxe.png">
  <span class="resource-card-content">
    <span class="resource-card-title">About Face 4</span>
    <span class="resource-card-description">作者: Alan.cooper</span>
    <span class="resource-card-description">出版社: 电子工业出版社</span>
  </span>
</a>
<a target="_blank" href="http://book.douban.com/subject/3821157/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/CoojVXLtoWrUSmI.png">
  <span class="resource-card-content">
    <span class="resource-card-title">Web界面设计</span>
    <span class="resource-card-description">作者: Bill Scott / Theresa Neil</span>
    <span class="resource-card-description">出版社: 电子工业出版社</span>
  </span>
</a>
<a target="_blank" href="http://book.douban.com/subject/25716088/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/oRxdwgZMwfEFeJa.png">
  <span class="resource-card-content">
    <span class="resource-card-title">界面设计模式</span>
    <span class="resource-card-description">作者: Tidwell,J.</span>
    <span class="resource-card-description">出版社: 电子工业出版社</span>
  </span>
</a>
<a target="_blank" href="http://book.douban.com/subject/3323633/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/SNdJVyZaZwdwJmr.png">
  <span class="resource-card-content">
    <span class="resource-card-title">写给大家看的设计书</span>
    <span class="resource-card-description">作者: Robin Williams</span>
    <span class="resource-card-description">出版社: 人民邮电出版社</span>
  </span>
</a>
<a target="_blank" href="http://book.douban.com/subject/26102860/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/txGrSvGFMTTrwjY.png">
  <span class="resource-card-content">
    <span class="resource-card-title">设计心理学 1</span>
    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
    <span class="resource-card-description">出版社: 中信出版社</span>
  </span>
</a>
<a target="_blank" href="http://book.douban.com/subject/26424688/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/cZQyAARFxzaKEOG.png">
  <span class="resource-card-content">
    <span class="resource-card-title">设计心理学 3</span>
    <span class="resource-card-description">作者: 唐纳德•A•诺曼</span>
    <span class="resource-card-description">出版社: 中信出版社</span>
  </span>
</a>
<a target="_blank" href="http://book.douban.com/subject/4886100/" class="resource-card">
  <img src="https://os.alipayobjects.com/rmsportal/moeFnnuXrputdag.png">
  <span class="resource-card-content">
    <span class="resource-card-title">Web表单设计：点石成金的艺术</span>
    <span class="resource-card-description">作者: Luke Wroblewski</span>
    <span class="resource-card-description">出版社: 清华大学出版社</span>
  </span>
</a>

<style>
.resource-card {
  max-width: 350px;
  width: 40%;
  height: 130px;
  border: 1px solid #e9e9e9;
  border-radius: 6px;
  font-size: 12px;
  color: #777;
  display: inline-block;
  margin: 20px 40px 10px 0;
  vertical-align: middle;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.resource-card:hover {
  box-shadow: 0 1px 4px rgba(64,64,64,.2);
}

.resource-card:hover .resource-card-title {
  color: #2db7f5;
}

.resource-card.disabled {
  opacity: 0.45;
  pointer-events: none;
}

.resource-card img {
  display: inline-block;
  vertical-align: middle;
  width: 64px;
  margin: 0 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.resource-card-content {
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 106px;
}

.resource-card-title {
  display: block;
  font-size: 16px;
  color: #666;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1;
  margin-bottom: 8px;
}

.resource-card-description {
  display: block;
  color: #999;
}
</style>