xinyin025/learn.lianglianglee.com
1
0
Fork 0
mirror of https://github.com/zhwei820/learn.lianglianglee.com.git synced 2025-09-26 21:26:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
3d6528675a
learn.lianglianglee.com/专栏/左耳听风/089 程序员练级攻略（2018）：UIUX设计.md.html
by931 08120ee33c fix img & index.html & .md.html
2022-08-14 03:40:33 +08:00

703 lines
48 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<!-- saved from url=(0046)https://kaiiiz.github.io/hexo-theme-book-demo/ -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<link rel="icon" href="/static/favicon.png">
<title>089 程序员练级攻略（2018）：UIUX设计.md.html</title>
<!-- Spectre.css framework -->
<link rel="stylesheet" href="/static/index.css">
<!-- theme css & js -->
<meta name="generator" content="Hexo 4.2.0">
</head>
<body>
<div class="book-container">
<div class="book-sidebar">
<div class="book-brand">
<a href="/">
<img src="/static/favicon.png">
<span>技术文章摘抄</span>
</a>
</div>
<div class="book-menu uncollapsible">
<ul class="uncollapsible">
<li><a href="/" class="current-tab">首页</a></li>
</ul>
<ul class="uncollapsible">
<li><a href="../">上一级</a></li>
</ul>
<ul class="uncollapsible">
<li>
<a href="/专栏/左耳听风/000 开篇词 洞悉技术的本质，享受科技的乐趣.md.html">000 开篇词 洞悉技术的本质，享受科技的乐趣</a>
</li>
<li>
<a href="/专栏/左耳听风/001 程序员如何用技术变现（上）.md.html">001 程序员如何用技术变现（上）</a>
</li>
<li>
<a href="/专栏/左耳听风/002 程序员如何用技术变现（下）.md.html">002 程序员如何用技术变现（下）</a>
</li>
<li>
<a href="/专栏/左耳听风/003 Equifax信息泄露始末.md.html">003 Equifax信息泄露始末</a>
</li>
<li>
<a href="/专栏/左耳听风/004 从Equifax信息泄露看数据安全.md.html">004 从Equifax信息泄露看数据安全</a>
</li>
<li>
<a href="/专栏/左耳听风/005 何为技术领导力.md.html">005 何为技术领导力</a>
</li>
<li>
<a href="/专栏/左耳听风/006 如何拥有技术领导力.md.html">006 如何拥有技术领导力</a>
</li>
<li>
<a href="/专栏/左耳听风/007 推荐阅读：每个程序员都该知道的事.md.html">007 推荐阅读：每个程序员都该知道的事</a>
</li>
<li>
<a href="/专栏/左耳听风/008 Go语言，Docker和新技术.md.html">008 Go语言，Docker和新技术</a>
</li>
<li>
<a href="/专栏/左耳听风/009 答疑解惑：渴望、热情和选择.md.html">009 答疑解惑：渴望、热情和选择</a>
</li>
<li>
<a href="/专栏/左耳听风/010 如何成为一个大家愿意追随的Leader？.md.html">010 如何成为一个大家愿意追随的Leader？</a>
</li>
<li>
<a href="/专栏/左耳听风/011 程序中的错误处理：错误返回码和异常捕捉.md.html">011 程序中的错误处理：错误返回码和异常捕捉</a>
</li>
<li>
<a href="/专栏/左耳听风/012 程序中的错误处理：异步编程和最佳实践.md.html">012 程序中的错误处理：异步编程和最佳实践</a>
</li>
<li>
<a href="/专栏/左耳听风/013 魔数 0x5f3759df.md.html">013 魔数 0x5f3759df</a>
</li>
<li>
<a href="/专栏/左耳听风/014 推荐阅读：机器学习101.md.html">014 推荐阅读：机器学习101</a>
</li>
<li>
<a href="/专栏/左耳听风/015 时间管理：同扭曲时间的事儿抗争.md.html">015 时间管理：同扭曲时间的事儿抗争</a>
</li>
<li>
<a href="/专栏/左耳听风/016 时间管理：投资赚取时间.md.html">016 时间管理：投资赚取时间</a>
</li>
<li>
<a href="/专栏/左耳听风/017 故障处理最佳实践：应对故障.md.html">017 故障处理最佳实践：应对故障</a>
</li>
<li>
<a href="/专栏/左耳听风/018 故障处理最佳实践：故障改进.md.html">018 故障处理最佳实践：故障改进</a>
</li>
<li>
<a href="/专栏/左耳听风/019 答疑解惑：我们应该能够识别的表象和本质.md.html">019 答疑解惑：我们应该能够识别的表象和本质</a>
</li>
<li>
<a href="/专栏/左耳听风/020 分布式系统架构的冰与火.md.html">020 分布式系统架构的冰与火</a>
</li>
<li>
<a href="/专栏/左耳听风/021 从亚马逊的实践，谈分布式系统的难点.md.html">021 从亚马逊的实践，谈分布式系统的难点</a>
</li>
<li>
<a href="/专栏/左耳听风/022 分布式系统的技术栈.md.html">022 分布式系统的技术栈</a>
</li>
<li>
<a href="/专栏/左耳听风/023 分布式系统关键技术：全栈监控.md.html">023 分布式系统关键技术：全栈监控</a>
</li>
<li>
<a href="/专栏/左耳听风/024 分布式系统关键技术：服务调度.md.html">024 分布式系统关键技术：服务调度</a>
</li>
<li>
<a href="/专栏/左耳听风/025 分布式系统关键技术：流量与数据调度.md.html">025 分布式系统关键技术：流量与数据调度</a>
</li>
<li>
<a href="/专栏/左耳听风/026 洞悉PaaS平台的本质.md.html">026 洞悉PaaS平台的本质</a>
</li>
<li>
<a href="/专栏/左耳听风/027 推荐阅读：分布式系统架构经典资料.md.html">027 推荐阅读：分布式系统架构经典资料</a>
</li>
<li>
<a href="/专栏/左耳听风/028 编程范式游记（1）- 起源.md.html">028 编程范式游记（1）- 起源</a>
</li>
<li>
<a href="/专栏/左耳听风/029 编程范式游记（2）- 泛型编程.md.html">029 编程范式游记（2）- 泛型编程</a>
</li>
<li>
<a href="/专栏/左耳听风/030 编程范式游记（3） - 类型系统和泛型的本质.md.html">030 编程范式游记（3） - 类型系统和泛型的本质</a>
</li>
<li>
<a href="/专栏/左耳听风/031 Git协同工作流，你该怎样选.md.html">031 Git协同工作流，你该怎样选</a>
</li>
<li>
<a href="/专栏/左耳听风/032 推荐阅读：分布式数据调度相关论文.md.html">032 推荐阅读：分布式数据调度相关论文</a>
</li>
<li>
<a href="/专栏/左耳听风/033 编程范式游记（4）- 函数式编程.md.html">033 编程范式游记（4）- 函数式编程</a>
</li>
<li>
<a href="/专栏/左耳听风/034 编程范式游记（5）- 修饰器模式.md.html">034 编程范式游记（5）- 修饰器模式</a>
</li>
<li>
<a href="/专栏/左耳听风/035 编程范式游记（6）- 面向对象编程.md.html">035 编程范式游记（6）- 面向对象编程</a>
</li>
<li>
<a href="/专栏/左耳听风/036 编程范式游记（7）- 基于原型的编程范式.md.html">036 编程范式游记（7）- 基于原型的编程范式</a>
</li>
<li>
<a href="/专栏/左耳听风/037 编程范式游记（8）- Go 语言的委托模式.md.html">037 编程范式游记（8）- Go 语言的委托模式</a>
</li>
<li>
<a href="/专栏/左耳听风/038 编程范式游记（9）- 编程的本质.md.html">038 编程范式游记（9）- 编程的本质</a>
</li>
<li>
<a href="/专栏/左耳听风/039 编程范式游记（10）- 逻辑编程范式.md.html">039 编程范式游记（10）- 逻辑编程范式</a>
</li>
<li>
<a href="/专栏/左耳听风/040 编程范式游记（11）- 程序世界里的编程范式.md.html">040 编程范式游记（11）- 程序世界里的编程范式</a>
</li>
<li>
<a href="/专栏/左耳听风/041 弹力设计篇之“认识故障和弹力设计”.md.html">041 弹力设计篇之“认识故障和弹力设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/042 弹力设计篇之“隔离设计”.md.html">042 弹力设计篇之“隔离设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/043 弹力设计篇之“异步通讯设计”.md.html">043 弹力设计篇之“异步通讯设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/044 弹力设计篇之“幂等性设计”.md.html">044 弹力设计篇之“幂等性设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/045 弹力设计篇之“服务的状态”.md.html">045 弹力设计篇之“服务的状态”</a>
</li>
<li>
<a href="/专栏/左耳听风/046 弹力设计篇之“补偿事务”.md.html">046 弹力设计篇之“补偿事务”</a>
</li>
<li>
<a href="/专栏/左耳听风/047 弹力设计篇之“重试设计”.md.html">047 弹力设计篇之“重试设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/048 弹力设计篇之“熔断设计”.md.html">048 弹力设计篇之“熔断设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/049 弹力设计篇之“限流设计”.md.html">049 弹力设计篇之“限流设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/050 弹力设计篇之“降级设计”.md.html">050 弹力设计篇之“降级设计”</a>
</li>
<li>
<a href="/专栏/左耳听风/051 弹力设计篇之“弹力设计总结”.md.html">051 弹力设计篇之“弹力设计总结”</a>
</li>
<li>
<a href="/专栏/左耳听风/052 区块链技术 - 区块链的革命性及技术概要.md.html">052 区块链技术 - 区块链的革命性及技术概要</a>
</li>
<li>
<a href="/专栏/左耳听风/053 区块链技术 - 区块链技术细节 - 哈希算法.md.html">053 区块链技术 - 区块链技术细节 - 哈希算法</a>
</li>
<li>
<a href="/专栏/左耳听风/054 区块链技术 - 区块链技术细节 - 加密和挖矿.md.html">054 区块链技术 - 区块链技术细节 - 加密和挖矿</a>
</li>
<li>
<a href="/专栏/左耳听风/055 区块链技术 - 去中心化的共识机制.md.html">055 区块链技术 - 去中心化的共识机制</a>
</li>
<li>
<a href="/专栏/左耳听风/056 区块链技术 - 智能合约.md.html">056 区块链技术 - 智能合约</a>
</li>
<li>
<a href="/专栏/左耳听风/057 区块链技术 - 传统金融和虚拟货币.md.html">057 区块链技术 - 传统金融和虚拟货币</a>
</li>
<li>
<a href="/专栏/左耳听风/058 管理设计篇之分布式锁.md.html">058 管理设计篇之分布式锁</a>
</li>
<li>
<a href="/专栏/左耳听风/059 管理设计篇之配置中心.md.html">059 管理设计篇之配置中心</a>
</li>
<li>
<a href="/专栏/左耳听风/060 管理设计篇之边车模式.md.html">060 管理设计篇之边车模式</a>
</li>
<li>
<a href="/专栏/左耳听风/061 管理设计篇之服务网格.md.html">061 管理设计篇之服务网格</a>
</li>
<li>
<a href="/专栏/左耳听风/062 管理设计篇之网关模式.md.html">062 管理设计篇之网关模式</a>
</li>
<li>
<a href="/专栏/左耳听风/063 管理设计篇之部署升级策略.md.html">063 管理设计篇之部署升级策略</a>
</li>
<li>
<a href="/专栏/左耳听风/064 性能设计篇之缓存.md.html">064 性能设计篇之缓存</a>
</li>
<li>
<a href="/专栏/左耳听风/065 性能设计篇之异步处理.md.html">065 性能设计篇之异步处理</a>
</li>
<li>
<a href="/专栏/左耳听风/066 性能设计篇之数据库扩展.md.html">066 性能设计篇之数据库扩展</a>
</li>
<li>
<a href="/专栏/左耳听风/067 性能设计篇之秒杀.md.html">067 性能设计篇之秒杀</a>
</li>
<li>
<a href="/专栏/左耳听风/068 性能设计篇之边缘计算.md.html">068 性能设计篇之边缘计算</a>
</li>
<li>
<a href="/专栏/左耳听风/069 程序员练级攻略（2018）：开篇词.md.html">069 程序员练级攻略（2018）：开篇词</a>
</li>
<li>
<a href="/专栏/左耳听风/070 程序员练级攻略（2018）：零基础启蒙.md.html">070 程序员练级攻略（2018）：零基础启蒙</a>
</li>
<li>
<a href="/专栏/左耳听风/071 程序员练级攻略（2018）：正式入门.md.html">071 程序员练级攻略（2018）：正式入门</a>
</li>
<li>
<a href="/专栏/左耳听风/072 程序员练级攻略（2018）：程序员修养.md.html">072 程序员练级攻略（2018）：程序员修养</a>
</li>
<li>
<a href="/专栏/左耳听风/073 程序员练级攻略（2018）：编程语言.md.html">073 程序员练级攻略（2018）：编程语言</a>
</li>
<li>
<a href="/专栏/左耳听风/074 程序员练级攻略：理论学科.md.html">074 程序员练级攻略：理论学科</a>
</li>
<li>
<a href="/专栏/左耳听风/075 程序员练级攻略（2018）：系统知识.md.html">075 程序员练级攻略（2018）：系统知识</a>
</li>
<li>
<a href="/专栏/左耳听风/076 程序员练级攻略（2018）：软件设计.md.html">076 程序员练级攻略（2018）：软件设计</a>
</li>
<li>
<a href="/专栏/左耳听风/077 程序员练级攻略（2018）：Linux系统、内存和网络.md.html">077 程序员练级攻略（2018）：Linux系统、内存和网络</a>
</li>
<li>
<a href="/专栏/左耳听风/078 程序员练级攻略（2018）：异步IO模型和Lock-Free编程.md.html">078 程序员练级攻略（2018）：异步IO模型和Lock-Free编程</a>
</li>
<li>
<a href="/专栏/左耳听风/079 程序员练级攻略（2018）：Java底层知识.md.html">079 程序员练级攻略（2018）：Java底层知识</a>
</li>
<li>
<a href="/专栏/左耳听风/080 程序员练级攻略（2018）：数据库.md.html">080 程序员练级攻略（2018）：数据库</a>
</li>
<li>
<a href="/专栏/左耳听风/081 程序员练级攻略（2018）：分布式架构入门.md.html">081 程序员练级攻略（2018）：分布式架构入门</a>
</li>
<li>
<a href="/专栏/左耳听风/082 程序员练级攻略（2018）：分布式架构经典图书和论文.md.html">082 程序员练级攻略（2018）：分布式架构经典图书和论文</a>
</li>
<li>
<a href="/专栏/左耳听风/083 程序员练级攻略（2018）：分布式架构工程设计.md.html">083 程序员练级攻略（2018）：分布式架构工程设计</a>
</li>
<li>
<a href="/专栏/左耳听风/084 程序员练级攻略（2018）：微服务.md.html">084 程序员练级攻略（2018）：微服务</a>
</li>
<li>
<a href="/专栏/左耳听风/085 程序员练级攻略（2018）：容器化和自动化运维.md.html">085 程序员练级攻略（2018）：容器化和自动化运维</a>
</li>
<li>
<a href="/专栏/左耳听风/086 程序员练级攻略（2018）：机器学习和人工智能.md.html">086 程序员练级攻略（2018）：机器学习和人工智能</a>
</li>
<li>
<a href="/专栏/左耳听风/087 程序员练级攻略（2018）：前端基础和底层原理.md.html">087 程序员练级攻略（2018）：前端基础和底层原理</a>
</li>
<li>
<a href="/专栏/左耳听风/088 程序员练级攻略（2018）：前端性能优化和框架.md.html">088 程序员练级攻略（2018）：前端性能优化和框架</a>
</li>
<li>
<a class="current-tab" href="/专栏/左耳听风/089 程序员练级攻略（2018）：UIUX设计.md.html">089 程序员练级攻略（2018）：UIUX设计</a>
</li>
<li>
<a href="/专栏/左耳听风/090 程序员练级攻略（2018）：技术资源集散地.md.html">090 程序员练级攻略（2018）：技术资源集散地</a>
</li>
<li>
<a href="/专栏/左耳听风/091 程序员面试攻略：面试前的准备.md.html">091 程序员面试攻略：面试前的准备</a>
</li>
<li>
<a href="/专栏/左耳听风/092 程序员面试攻略：面试中的技巧.md.html">092 程序员面试攻略：面试中的技巧</a>
</li>
<li>
<a href="/专栏/左耳听风/093 程序员面试攻略：面试风格.md.html">093 程序员面试攻略：面试风格</a>
</li>
<li>
<a href="/专栏/左耳听风/094 程序员面试攻略：实力才是王中王.md.html">094 程序员面试攻略：实力才是王中王</a>
</li>
<li>
<a href="/专栏/左耳听风/095 高效学习：端正学习态度.md.html">095 高效学习：端正学习态度</a>
</li>
<li>
<a href="/专栏/左耳听风/096 高效学习：源头、原理和知识地图.md.html">096 高效学习：源头、原理和知识地图</a>
</li>
<li>
<a href="/专栏/左耳听风/097 高效学习：深度，归纳和坚持实践.md.html">097 高效学习：深度，归纳和坚持实践</a>
</li>
<li>
<a href="/专栏/左耳听风/098 高效学习：如何学习和阅读代码.md.html">098 高效学习：如何学习和阅读代码</a>
</li>
<li>
<a href="/专栏/左耳听风/099 高效学习：面对枯燥和量大的知识.md.html">099 高效学习：面对枯燥和量大的知识</a>
</li>
<li>
<a href="/专栏/左耳听风/100 高效沟通：Talk和Code同等重要.md.html">100 高效沟通：Talk和Code同等重要</a>
</li>
<li>
<a href="/专栏/左耳听风/101 高效沟通：沟通阻碍和应对方法.md.html">101 高效沟通：沟通阻碍和应对方法</a>
</li>
<li>
<a href="/专栏/左耳听风/102 高效沟通：沟通方式及技巧.md.html">102 高效沟通：沟通方式及技巧</a>
</li>
<li>
<a href="/专栏/左耳听风/103 高效沟通：沟通技术.md.html">103 高效沟通：沟通技术</a>
</li>
<li>
<a href="/专栏/左耳听风/104 高效沟通：好老板要善于提问.md.html">104 高效沟通：好老板要善于提问</a>
</li>
<li>
<a href="/专栏/左耳听风/105 高效沟通：好好说话的艺术.md.html">105 高效沟通：好好说话的艺术</a>
</li>
<li>
<a href="/专栏/左耳听风/106 加餐 谈谈我的“三观”.md.html">106 加餐 谈谈我的“三观”</a>
</li>
<li>
<a href="/专栏/左耳听风/107 结束语 业精于勤，行成于思.md.html">107 结束语 业精于勤，行成于思</a>
</li>
</ul>
</div>
</div>
<div class="sidebar-toggle" onclick="sidebar_toggle()" onmouseover="add_inner()" onmouseleave="remove_inner()">
<div class="sidebar-toggle-inner"></div>
</div>
<script>
function add_inner() {
let inner = document.querySelector('.sidebar-toggle-inner')
inner.classList.add('show')
}
function remove_inner() {
let inner = document.querySelector('.sidebar-toggle-inner')
inner.classList.remove('show')
}
function sidebar_toggle() {
let sidebar_toggle = document.querySelector('.sidebar-toggle')
let sidebar = document.querySelector('.book-sidebar')
let content = document.querySelector('.off-canvas-content')
if (sidebar_toggle.classList.contains('extend')) { // show
sidebar_toggle.classList.remove('extend')
sidebar.classList.remove('hide')
content.classList.remove('extend')
} else { // hide
sidebar_toggle.classList.add('extend')
sidebar.classList.add('hide')
content.classList.add('extend')
}
}
function open_sidebar() {
let sidebar = document.querySelector('.book-sidebar')
let overlay = document.querySelector('.off-canvas-overlay')
sidebar.classList.add('show')
overlay.classList.add('show')
}
function hide_canvas() {
let sidebar = document.querySelector('.book-sidebar')
let overlay = document.querySelector('.off-canvas-overlay')
sidebar.classList.remove('show')
overlay.classList.remove('show')
}
</script>
<div class="off-canvas-content">
<div class="columns">
<div class="column col-12 col-lg-12">
<div class="book-navbar">
<!-- For Responsive Layout -->
<header class="navbar">
<section class="navbar-section">
<a onclick="open_sidebar()">
<i class="icon icon-menu"></i>
</a>
</section>
</header>
</div>
<div class="book-content" style="max-width: 960px; margin: 0 auto;
overflow-x: auto;
overflow-y: hidden;">
<div class="book-post">
<p id="tip" align="center"></p>
<div><h1>089 程序员练级攻略（2018）：UIUX设计</h1>
<p>上面的技术都讲完了，前端还有一个很重要的事就是设计。作为前端人员，我们有必要了解现在的一些知名且流行的设计语言或是一些设计规范或是设计方法，学习它们的设计思想和方法，有助于我们拓宽眼界、与时俱进。我并不觉得这些内容是设计师要学习的，如果你要成为一个前端程序员，那么学习这些设计上的东西可以让你有更好的成长空间。</p>
<p>对于学习设计的新手来说，推荐看看 <a href="https://blog.nicolesaidy.com/7-steps-to-become-a-ui-ux-designer-8beed7639a95">7 steps to become a UI/UX designer</a> ，这是一篇很不错的让新手入门的文章，非常具有指导性。首先，你得开始学习设计的一些原则和套路，如配色、平衡、排版、一致性等。还有用户体验的 4D 步骤——Discover、Define、Develop 和 Delivery。然后，开始到一些网站上找灵感。接下来，是到不同的网站上读各种文章和资源，开始学习使用设计工具，最后是找人拜师。此外，其中还链接了其它一些不错的文章、网站、博客和工具。我认为，这篇文章是一篇很不错的设计师从入门到精通的练级攻略。</p>
<p>虽然有这么一个速成的教程，但我觉得还是应该系统地学习一下，所以有了下面这些推荐。</p>
<h1>图书和文章推荐</h1>
<p>先推荐几本书。</p>
<ul>
<li><a href="https://book.douban.com/subject/1827702/">Don’t Make Me Think</a> ，这是我看的第一本和设计相关的书。这本书对我的影响也比较深远。这本书践行了自己的理论，整本书短小精悍，语言轻松诙谐，书中穿插大量色彩丰富的屏幕截图、趣味丛生的卡通插图以及包含大量信息的图表，使枯燥的设计原理变得平易近人。</li>
<li><a href="https://book.douban.com/subject/5394309/">Simple and Usable Web,Mobile,and Interaction Design</a> ，中文版译名为《简约至上》。本书作者贾尔斯（Giles）有 20 多年交互式设计的探索与实践。提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约至上的终极策略，讲述了为什么应该站在主流用户一边，以及如何从他们的真实需求和期望出发，简化设计，提升易用性。</li>
<li><a href="https://book.douban.com/subject/6792322/">Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules</a> ，中文版译名为《认知与设计：理解 UI 设计准则》。这本书语言清晰明了，将设计准则与其核心的认知学和感知科学高度统一起来，使得设计准则更容易在具体环境中得到应用。涵盖了交互计算机系统设计的方方面面，为交互系统设计提供了支持工程方法。不仅如此，这也是一本人类行为原理的入门书。</li>
<li><a href="https://book.douban.com/subject/25716088/">Designing Interfaces: Patterns for Effective Interaction Design</a> ，中文版译名为《界面设计模式》。这本书开篇即总结了 &quot; 与人有关 &quot; 的各类问题，为读者提供了界面设计总体思路上的指引，帮助读者举一反三。然后，收集并分析了很多常用的界面设计模式，帮助读者理解在实现级别的各种常用解决方案，将它们灵活地运用到自己的设计中。</li>
</ul>
<p>除了上面的这几本书，还有下面的这几篇文章也是很不错的，推荐一读。</p>
<ul>
<li><a href="https://uxplanet.org/the-psychology-principles-every-ui-ux-designer-needs-to-know-24116fd65778">The Psychology Principles Every UI/UX Designer Needs to Know</a> ，这篇文章讲述了 6 大用户界面用户体验设计的心理学原则。</li>
<li><a href="https://blog.figma.com/18-designers-predict-ui-ux-trends-for-2018-2d04d41361c6">18 designers predict UI/UX trends for 2018</a>， 我倒不觉得这篇文章中所说的 UI/UX 是在 2018 年的趋势，我反而觉得，这 18 条原则是指导性的思想。</li>
<li><a href="https://medium.com/thinking-design/the-evolution-of-ui-ux-designers-into-product-designers-623e4e7eaab3">The Evolution of UI/UX Designers Into Product Designers</a> ，这篇文章是 Adobe 公司的一篇博客，其在回顾整个产品设计的演化过程中有一些不错的思考和想法，并提供了一些方法论。</li>
</ul>
<h1>原子设计（Atomic Design）</h1>
<p>在 2013 年网页设计师布拉德·弗罗斯特（Brad Frost）从化学中受到启发：原子（Atoms）结合在一起，形成分子（Molecules），进一步结合形成的生物体（Organisms）。布拉德将这个概念应用在界面设计中，我们的界面就是由一些基本的元素组成的。</p>
<p>乔希·杜克（Josh Duck）的 &quot;HTML 元素周期表 &quot; 完美阐述了我们所有的网站、App、企业内部网、hoobadyboops 等是如何由相同的 HTML 元素组成的。通过在大层面（页）和小层面（原子）同时思考界面，布拉德认为，可以利用原子设计建立一个适应组件的动态系统。</p>
<p>为什么要玩原子设计，我认为，这对程序员来说是非常好理解的，因为这就是代码模块化重用化的体现。于是，你就是要像搭积木一样开发和设计网页，当你把其模块化组件化了，也更容易规范整体的风格，而且容易维护……这些都意味着你可以更容易地维护你的代码。所以，这个方法论导致了 Web 组件化的玩法。这是设计中非常重要的方法论。</p>
<p>关于这个设计方法论，你可以阅读一下下面这几篇文章。</p>
<ul>
<li><a href="https://www.jianshu.com/p/13e87bf4f857">Atomic Design 原子设计┃构建科学规范的设计系统</a></li>
<li><a href="https://medium.com/uxeastmeetswest/網頁設計-atomic-design簡介及工作實例-42e666358d52">网页设计：Atomic Design 简介及工作实例</a></li>
</ul>
<p>但是，真正权威的地方还是布拉德·弗罗斯特的电子书、博客和实验室，可以从中获取更多的信息。</p>
<ul>
<li><a href="http://atomicdesign.bradfrost.com/">电子书：Atomic Design by Brad Frost</a> 是布拉德·弗罗斯特写的一本书。</li>
<li><a href="http://bradfrost.com/blog/post/atomic-web-design/">博　客：Atomic Design</a> 是布拉德·弗罗斯特的博客。</li>
<li><a href="http://patternlab.io/">实验室：Pattern lab</a> 是布拉德·弗罗斯特依照这个设计系统所建立的一套工具，可以前往 Pattern Lab 的 <a href="https://github.com/bradfrost/patternlab">GitHub</a> 来试试 Atomic design。</li>
</ul>
<p>接下来是关于这个设计方法和 React.js 框架的几篇文章。</p>
<ul>
<li><a href="https://codeburst.io/atomic-design-with-react-e7aea8152957">Atomic Design with React</a></li>
<li><a href="https://medium.com/@yejodido/atomic-components-managing-dynamic-react-components-using-atomic-design-part-1-5f07451f261f">Atomic Components: Managing Dynamic React Components using Atomic Design</a></li>
</ul>
<h1>设计语言和设计系统</h1>
<p>下面来介绍一下设计语言和设计系统。</p>
<h2>Fluent Design System</h2>
<p><a href="https://fluent.microsoft.com/"><strong>Fluent Design System</strong></a> 中文翻译为流畅设计体系，是微软于 2017 年开发的设计语言。流畅设计是 Microsoft Design Language 2 的改版，其中包含为所有面向 Windows 10 设备和平台设计的软件中的设计和交互的指导原则。</p>
<p>该体系基于五个关键元素：光感、深度、动效、材质和缩放。新的设计语言包括更多对动效、深度及半透明效果的使用。过渡到流畅设计体系是一个长期项目，没有具体的完成目标，但是从创作者更新以来，新设计语言的元素已被融入到个别应用程序中。它将在未来的 Windows 10 秋季创作者更新中更广泛地使用，但微软也表示，该设计体系不会在秋季创作者更新内完成。</p>
<p>微软于 2017 年 5 月 11 日的 Microsoft Build 2017 开发者大会上公开了该设计体系。</p>
<ul>
<li><a href="https://channel9.msdn.com/Events/Build/2017/B8100">What’s new and coming for Windows UI: XAML and composition</a> ，从概念上讲了一下 Fluent Design System 的各个部分。</li>
<li><a href="https://channel9.msdn.com/Events/Build/2017/B8066">Introducing Fluent Design</a> ，介绍了 Fluent Design System 的各个部分。</li>
</ul>
<p>还有 Build 2018 上的一些微软的 YouTube 分享。</p>
<ul>
<li><a href="https://www.youtube.com/watch?v=AnqwdPgVXAI">Fluent Design: Evolving our Design System : Build 2018</a></li>
<li><a href="https://www.youtube.com/watch?v=dMq8CMIE1xU">Microsoft Build 2018 - Fluent Design System Demo</a></li>
<li><a href="https://www.youtube.com/watch?v=pUuHSuCnDGE">Microsoft Build 2018 - Fluent Design System Evolution</a></li>
<li><a href="https://www.youtube.com/watch?v=DKvkRfQD8Yg">Fluent Design System inside of Microsoft: Office : Build 2018</a></li>
</ul>
<h2>Material Design</h2>
<p><a href="https://material.io/"><strong>Material Design</strong></a> 中文翻译为质感设计，或是材质设计、材料设计。这是由 Google 开发的设计语言。扩展于 <a href="https://en.wikipedia.org/wiki/Google_Now">Google Now</a> 的 &quot; 卡片 &quot; 设计，Material Design 基于网格的布局、响应动画与过渡、填充、深度效果（如光线和阴影）。设计师马蒂亚斯·杜阿尔特（Matías Duarte）解释说：&quot; 与真正的纸张不同，我们的数字材质可以智能地扩大和变形。材质具有实体的表面和边缘。接缝和阴影表明组件的含义。&quot;Google 指出他们的新设计语言基于纸张和油墨。</p>
<p>Material Design 于 2014 年的 Google I/O 大会上发布（参看 <a href="https://www.youtube.com/watch?v=97SWYiRtF0Y&amp;feature=youtu.be">Google I/O 2014 - Material witness: How Android material applications work</a>）。其可借助 v7 appcompat 库用于 Android 2.1 及以上版本，几乎支持所有 2009 年以后制造的 Android 设备。随后，Material Design 扩展到 Google 的网络和移动产品阵列，提供一致的跨平台和应用程序体验。Google 还为第三方开发人员发布了 API，开发人员可将质感设计应用到他们的应用程序中。</p>
<p>除了到 <a href="https://material.io/">官网</a> 学习 Material Design，你还可以访问 <a href="http://design.1sters.com/">Material Design 中文版</a> 来学习。</p>
<p>另外，Wikipedia 上有一张 <a href="https://en.wikipedia.org/wiki/Comparison_of_Material_Design_implementations">Material Design 实现的比较表</a>，供你参考。</p>
<p>下面是几个可供你使用的 Material UI 的工程实现。</p>
<ul>
<li><a href="https://www.getmdl.io/">Material Design Lite</a> ，这是 Google 官方的框架，简单易用。</li>
<li><a href="https://materializecss.com/">Materialize</a> ，一组类似于 Bootstrap 的前端 UI 框架。</li>
<li><a href="https://material-ui.com/">Material-UI</a> 是基于 Google Material Design 的 React 组件实现。</li>
<li><a href="https://www.muicss.com/">MUI</a> 是一个轻量级的 CSS 框架，遵循 Google 的 Material Design 设计方针。</li>
</ul>
<h2>其它公司</h2>
<p>接下来再来推荐其它几家公司的设计语言。</p>
<ul>
<li><a href="https://developer.apple.com/design/">苹果公司的设计指南</a>，在这个网站有苹果的各种设备的设计规范和指导，一方面可以让你的 App 能和苹果的 UI 融合在一起，另一方面，你也可以从中看到苹果的审美和思维方式。</li>
<li><a href="https://www.ibm.com/design/language/">IBM 公司的设计语言</a> ，我们总觉得 IBM 公司是一家比较传统的没有新意的公司，但是并不是这样的。IBM 公司的这个设计语言的确比较出众。所以，在这里推荐一下。</li>
<li><a href="https://www.lightningdesignsystem.com/">Salesforce 公司的 Lightning Design System</a> ，是在 Salesforce 生态系统中用于创建统一 UI 的设计模式、组件和指南的集合，是一个企业级的产品。</li>
<li><a href="http://facebook.design/">Facebook Design - What’s on our mind?</a> ，Facebook 的设计师们收集的一系列的文章、视频和资源。很不错哦。</li>
</ul>
<h2>动画效果设计</h2>
<p>我认为，要了解 Web 动画效果设计的第一步，最好的地方是 <a href="https://codepen.io/">CodePen</a>。这个网站不只是让人分享 HTML、CSS 和 JavaScript 代码的网站。其中也有很多分享样例都和动画效果有关。这个网站可以让你对动画效果有一些感性认识，当然还有代码供你参考。</p>
<p>接下来，我们要了解动画效果设计的一些方法。基本上来说，动画设计都会受 &quot;<a href="https://en.wikipedia.org/wiki/12_basic_principles_of_animation">动画的 12 项基本法则</a> &quot; 的影响，这个方法论源自于迪士尼动画师奥利·约翰斯顿（Ollie Johnston）和弗兰克·托马斯（Frank Thomas）在 1981 年所出的《The Illusion of Life: Disney Animation》一书。这些法则已被普遍采用，至今仍与制作 3D 动画法则有关联。这里还有一篇文章 “<a href="https://www.creativebloq.com/advice/understand-the-12-principles-of-animation">Understand the 12 principles of animation</a>” 是对这个法则的解读和理解。</p>
<p>除此之外，还有几个动画设计指南和相关文章供你参考和学习。</p>
<ul>
<li><a href="https://blog.prototypr.io/6-animation-guidelines-for-ux-design-74c90eb5e47a">6 Animation Guidelines for UX Design</a>。这是 Prototypr 公司的一个指南，其中主要指出，动画效果不是为了炫配，而是能让你的 UI/UX 能活起来，自然，不消耗时间，并且是生动故事型的动画效果。其中还推荐了如下几篇很不错的文章。
<ul>
<li><a href="https://medium.com/@pasql/transitional-interfaces-926eb80d64e3">Transitional Interfaces</a></li>
<li><a href="https://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship">UI Animation and UX: A Not-So-Secret Friendship</a></li>
<li><a href="https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5">Invisible animation</a></li>
<li><a href="https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc">Creating Usability with Motion: The UX in Motion Manifesto</a></li>
</ul>
</li>
<li><a href="http://alistapart.com/article/designing-interface-animation">Designing Interface Animation</a> ，这篇文章同样说明，任何一个小动画都是要讲一个微故事的，而且这些微故事会和你的品牌和产品理念相融合。动画会给人更深的印象，让人们更容易记住你。这篇文章主要是讲品牌动画。</li>
<li><a href="https://www.freepik.com/blog/animation-principles-in-motion-design/">Animation principles in motion design</a> ，这篇文章有点像设计模式，给了一些动画效果的套路和演示。</li>
<li><a href="https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc">Creating Usability with Motion: The UX in Motion Manifesto</a></li>
<li><a href="http://alistapart.com/article/integrating-animation-into-a-design-system">Integrating Animation into a Design System</a></li>
<li>Great UI/UX Animations 是设计师丹尼尔（Daniel）收集的一些很不错的动画，可以给你一些灵感。
<ul>
<li><a href="https://fromupnorth.com/mixed-ui-ux-animations-4d7a22f9ab7">Great UI/UX Animations 第一组</a></li>
<li><a href="https://fromupnorth.com/great-ui-ux-animations-3e9a0baa336f">Great UI/UX Animations 第二组</a></li>
</ul>
</li>
</ul>
<h1>相关资源</h1>
<p>下面分享一下 UI/UX 设计的相关资源。文章资源主要有以下这些。</p>
<h2>文章资源</h2>
<ul>
<li><a href="http://webdesignernews.com/">Web Designer News</a> ，一个文章聚合的网站。除此之外，还有两个文章聚合网站，你也可以订阅。一个是<a href="https://www.designernews.co/">Designer News</a> ，另一个是 <a href="https://www.reddit.com/r/web_design/">Reddit Web Design</a>。</li>
<li><a href="http://blog.marvelapp.com/">Marvel Blog</a> ，Marvel 团队的博客。</li>
<li><a href="http://thenextweb.com/section/creative/">The Next Web</a> ，内容主要涵盖国际技术新闻、商业和文化等多个方面。</li>
<li><a href="https://medium.com/design">Medium - Design</a> ，Medium 现在已经成为一个好文章的集散地了，这个地方必去。</li>
<li><a href="http://smashingmagazine.com/">Smashing Magazine</a> ，这个地方是给专业的 Web 设计师和程序员的。不但有设计还有 HTML、CSS 和 JavaScript 等各种资源。</li>
<li><a href="https://www.sitepoint.com/design-ux/">Sitepoint</a> ，这个网站上也有很多不错的给 Web 前端程序员和设计师看的文章（当然，给程序员看的有点简单了，我觉得更像是让设计师来学写程序的网站）。</li>
</ul>
<h2>设计收集</h2>
<p>接下来推荐一些优秀设计的聚集地。</p>
<ul>
<li><a href="http://awwwards.com/">Awwwards</a> ，这个网站给一些设计得不错网站的评分，在这里你可以看到很多设计不错的网站。</li>
<li><a href="http://onepagelove.com/">One Page Love</a> ，就是一个单页的网页设计的收集。</li>
<li><a href="http://inspired-ui.com/">Inspired UI</a> ，移动 App 的设计模式。</li>
<li><a href="https://www.behance.net/">Behance</a>，这个地言有很不错的很有创意的作品。</li>
<li><a href="https://dribbble.com/">Dribbble</a> ，这应该是设计师都知道也都爱去的网站。除了你可以看到一些很不错的作品外，你还可以在这里看到很多不错的设计师。</li>
<li><a href="https://uimovement.com/">UI Movement</a> ，也是个设计的收集网站，上面有很多很不错的 UI 设计，大量的动画。虽说会像抖音一样，让你不知不觉就看了好几小时，但是它比抖音让你的收获大多了。</li>
</ul>
<h1>小结</h1>
<p>总结一下今天的内容。我并不认为 UI/UX 设计这些内容只是设计师要学习的，如果你要成为一个前端程序员，那么学习这些设计上的东西可以让你有更好的成长空间。首先，我推荐了一些图书和文章，让你更好地了解经典的设计原则和指导思想。</p>
<p>然后介绍了原子设计，以及深入学习和理解这一设计方法论的图书、文章和其他相关资源。最后分享了当下主流和知名公司中在用的设计语言和设计系统，并给出了大量的学习资源，推荐了一些优秀设计的聚集地。相信通过学习这些内容，你在 UI/UX 设计方面不仅能收获方法，还能获得非常多的灵感。</p>
<p>下篇文章是程序员练级攻略 2018 版高手成长篇的最后一篇，我将推荐大量有价值的技术资源，这些内容将会为你后续的学习和成长提供很大的助力。敬请期待。</p>
</div>
</div>
<div>
<div style="float: left">
<a href="/专栏/左耳听风/088 程序员练级攻略（2018）：前端性能优化和框架.md.html">上一页</a>
</div>
<div style="float: right">
<a href="/专栏/左耳听风/090 程序员练级攻略（2018）：技术资源集散地.md.html">下一页</a>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="off-canvas-overlay" onclick="hide_canvas()"></a>
</div>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon='{"rayId":"709978a289533cfa","version":"2021.12.0","r":1,"token":"1f5d475227ce4f0089a7cff1ab17c0f5","si":100}' crossorigin="anonymous"></script>
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NPSEEVD756"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-NPSEEVD756');
var path = window.location.pathname
var cookie = getCookie("lastPath");
console.log(path)
if (path.replace("/", "") === "") {
if (cookie.replace("/", "") !== "") {
console.log(cookie)
document.getElementById("tip").innerHTML = "<a href='" + cookie + "'>跳转到上次进度</a>"
}
} else {
setCookie("lastPath", path)
}
function setCookie(cname, cvalue) {
var d = new Date();
d.setTime(d.getTime() + (180 * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires + ";path = /";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
}
return "";
}
</script>
</html>
Reference in New Issue View Git Blame Copy Permalink