程序员练级攻略:UI/UX设计

学习设计新手, 7 steps to become a UI/UX designer

学习设计的一些原则和套路,如配色、平衡、排版、一致性等。

用户体验的 4D 步骤——Discover、Define、Develop 和 Delivery。

到一些网站上找灵感。

开始学习使用设计工具。

图书和文章推荐

  • Don’t Make Me Think ,这本书践行了自己的理论,整本书短小精悍,语言轻松诙谐,书中穿插大量色彩丰富的屏幕截图、趣味丛生的卡通插图以及包含大量信息的图表,使枯燥的设计原理变得平易近人。
  • Simple and Usable Web,Mobile,and Interaction Design ,中文版译名为《简约至上》。本书作者贾尔斯(Giles)有 20 多年交互式设计的探索与实践。提出了合理删除、分层组织、适时隐藏和巧妙转移这四个达成简约至上的终极策略,讲述了为什么应该站在主流用户一边,以及如何从他们的真实需求和期望出发,简化设计,提升易用性。
  • Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules ,中文版译名为《认知与设计:理解 UI 设计准则》。这本书语言清晰明了,将设计准则与其核心的认知学和感知科学高度统一起来,使得设计准则更容易在具体环境中得到应用。涵盖了交互计算机系统设计的方方面面,为交互系统设计提供了支持工程方法。不仅如此,这也是一本人类行为原理的入门书。
  • Designing Interfaces: Patterns for Effective Interaction Design ,中文版译名为《界面设计模式》。这本书开篇即总结了“与人有关”的各类问题,为读者提供了界面设计总体思路上的指引,帮助读者举一反三。然后,收集并分析了很多常用的界面设计模式,帮助读者理解在实现级别的各种常用解决方案,将它们灵活地运用到自己的设计中。

推荐几篇文章。

原子设计(Atomic Design)

在 2013 年网页设计师布拉德·弗罗斯特(Brad Frost)从化学中受到启发:原子(Atoms)结合在一起,形成分子(Molecules),进一步结合形成生物体(Organisms)。布拉德将这个概念应用在界面设计中,我们的界面就是由一些基本的元素组成的。

乔希·杜克(Josh Duck)的“HTML 元素周期表”完美阐述了我们所有的网站、App、企业内部网、hoobadyboops 等是如何由相同的 HTML 元素组成的。通过在大层面(页)和小层面(原子)同时思考界面,布拉德认为,可以利用原子设计建立一个适应组件的动态系统。

关于这个设计方法论,可以阅读一下下面这几篇文章。

布拉德·弗罗斯特的电子书、博客和实验室,可以从中获取更多的信息。

接下来是关于这个设计方法和 React.js 框架的几篇文章。

设计语言和设计系统

下面来介绍一下设计语言和设计系统。

Fluent Design System

Fluent Design System 中文翻译为流畅设计体系,是微软于 2017 年开发的设计语言。流畅设计是 Microsoft Design Language 2 的改版,其中包含为所有面向 Windows 10 设备和平台设计的软件中的设计和交互的指导原则。

该体系基于五个关键元素:光感、深度、动效、材质和缩放。新的设计语言包括更多对动效、深度及半透明效果的使用。

微软于 2017 年 5 月 11 日的 Microsoft Build 2017 开发者大会上公开了该设计体系。

还有 Build 2018 上的一些微软的 YouTube 分享。

Material Design

Material Design 中文翻译为质感设计,或是材质设计、材料设计。这是由 Google 开发的设计语言。扩展于 Google Now 的“卡片”设计,Material Design 基于网格的布局、响应动画与过渡、填充、深度效果(如光线和阴影)。设计师马蒂亚斯·杜阿尔特(Matías Duarte)解释说:“与真正的纸张不同,我们的数字材质可以智能地扩大和变形。材质具有实体的表面和边缘。接缝和阴影表明组件的含义。”Google 指出他们的新设计语言基于纸张和油墨。

Material Design 于 2014 年的 Google I/O 大会上发布(参看 Google I/O 2014 - Material witness: How Android material applications work)。其可借助 v7 appcompat 库用于 Android 2.1 及以上版本,几乎支持所有 2009 年以后制造的 Android 设备。随后,Material Design 扩展到 Google 的网络和移动产品阵列,提供一致的跨平台和应用程序体验。Google 还为第三方开发人员发布了 API,开发人员可将质感设计应用到他们的应用程序中。

除了到 官网 学习 Material Design,还可以访问 Material Design 中文版 来学习。

另外,Wikipedia 上有一张 Material Design 实现的比较表,供你参考。

下面是几个 Material UI 的工程实现。

  • Material Design Lite ,这是 Google 官方的框架,简单易用。
  • Materialize ,一组类似于 Bootstrap 的前端 UI 框架。
  • Material-UI 是基于 Google Material Design 的 React 组件实现。
  • MUI 是一个轻量级的 CSS 框架,遵循 Google 的 Material Design 设计方针。

其它公司

接下来再来推荐其它几家公司的设计语言。

动画效果设计

要了解 Web 动画效果设计的第一步,最好的地方是 CodePen。这个网站不只是让人分享 HTML、CSS 和 JavaScript 代码的网站。其中也有很多分享样例都和动画效果有关。

动画的 12 项基本法则 ,这个方法论源自于迪士尼动画师奥利·约翰斯顿(Ollie Johnston)和弗兰克·托马斯(Frank Thomas)在 1981 年所出的《The Illusion of Life: Disney Animation》一书。这些法则已被普遍采用,至今仍与制作 3D 动画法则有关联。这里还有一篇文章 “Understand the 12 principles of animation” 是对这个法则的解读和理解。

除此之外,还有几个动画设计指南和相关文章供你参考和学习。

相关资源

下面分享一下 UI/UX 设计的相关资源。文章资源主要有以下这些。

文章资源

设计收集聚集地

  • Awwwards ,这个网站给一些设计得不错网站的评分,可以看到很多设计不错的网站。
  • One Page Love ,就是一个单页的网页设计的收集。
  • Inspired UI ,移动 App 的设计模式。
  • Behance,这个地言有很不错的很有创意的作品。
  • Dribbble ,除了可以看到一些很不错的作品外,还可以在这里看到很多不错的设计师。
  • UI Movement ,也是个设计的收集网站,上面有很多很不错的 UI 设计,大量的动画。

极客时间-左耳听风-程序员攻略-UI/UX设计的更多相关文章

  1. 极客时间-左耳听风-程序员攻略-异步I/O模型和Lock-Free编程

    异步 I/O 模型 异步 I/O 模型其中的设计模式或是解决方法可以借鉴到分布式架构上来. 史蒂文斯(Stevens)在<UNIX 网络编程>一书 6.2 I/O Models 中介绍了五 ...

  2. 极客时间-左耳听风-程序员攻略-Linux系统、内存和网络

    程序员练级攻略:Linux系统.内存和网络 Linux 系统相关 Red Hat Enterprise Linux 文档 . Linux Insides ,GitHub 上的一个开源电子书,其中讲述了 ...

  3. 极客时间-左耳听风-程序员攻略-Java底层知识

    Java 字节码相关 字节码编程,也就是动态修改或是动态生成 Java 字节码.Java 的字节码相当于汇编,其中的一些细节. Java Zone: Introduction to Java Byte ...

  4. 【ARTS】01_33_左耳听风-201900624~201900630

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  5. 【ARTS】01_21_左耳听风-201900401~201900407

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  6. 【ARTS】01_20_左耳听风-20190325~20190331

    zz## ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 ...

  7. 【ARTS】01_19_左耳听风-20190318~20190324

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  8. 【ARTS】01_18_左耳听风-20190311~20190317

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  9. 【ARTS】01_17_左耳听风-20190304~20190310

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

随机推荐

  1. css3多列布局瀑布流加载样式

    看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...

  2. SQL:自增主键的获取@@IDENTITY 和 SCOPE_IDENTITY 的区别

    @@IDENTITY 返回当前会话所有作用域的最后一个ID SCOPE_IDENTITY() 返回当前作用域的最后一个ID 返回上面语句执行后产生的自增主键,这个是目前最可靠的方式: insert i ...

  3. sql server 存储过程 output 和return的使用 方法,详解

    SQL Server目前正日益成为WindowNT操作系统上面最为重要的一种数据库管理系统,随着 SQL Server2000的推出,微软的这种数据库服务系统真正地实现了在WindowsNT/2000 ...

  4. JAVA的选择结构(二)

    1.switch选择结构:                        语法:                            switch (key) {                   ...

  5. 后台(一)vue+element-ui (按需加载)

    vue init webpack    项目名称 npm install axios                    //先安装! npm install --save axios vue-ax ...

  6. [HNOI2011]括号修复 / [JSOI2011]括号序列

    传送门 Solution 一道题花费了两天的时间-- 在大佬@PinkRabbit的帮助下,终于AC了,感动-- 首先,我们考虑一个括号序列被修改成合法序列需要的次数: 我们需要修改的其实是形如... ...

  7. 去掉 webstorm 灰色的数据类型提示

  8. Tkinter 之Label标签

    一.参数说明 语法 作用 Label(window,text=‘xxxxx’) 需要在界面显示的Label标签内容 Label(window,text=‘xxxxx’,height=2) 组件的高度( ...

  9. 数据结构——KMP算法

    算法介绍 KMP算法是一种改进的字符串匹配算法,由D.E.Knuth,J.H.Morris和V.R.Pratt提出的,因此人们称它为克努特—莫里斯—普拉特操作(简称KMP算法).KMP算法的核心是利用 ...

  10. win7下如何根据端口号杀掉进程

    点击windows左下窗口图标按钮.   输入cmd   输入netstat -ano后回车.   左边箭头指向端口号,右边箭头指向为这个端口号对应的进程号pid,我们记下pid号   我们以2001 ...