本周观察 #8 (2019-03-01)

UX

1、几个知名网站 10 年来的变化

列举了谷歌、Youtube、亚马逊等国际知名网站 10 年前与现在的首页变化。

2、使用 CSS Grid 的正确方式

CSS Grid 是一种比较新的强大的排版方式,本文介绍了一些使用 CSS Grid 排版的最佳实践。

1) 使用命名,而不是编号

举例来说,就是类似下面这样:

.container {
    display: grid;
    grid-template-columns: [sidebar] 1fr [content] 2fr;
}

.content {
    grid-column: content;
}

这样的好处一是可读性更高,二是便于扩展,当你要加一个新的列时,不用修改 .content 类。

2) 使用 fr 单位

fr%vw 等单位不同,它对应的是没有被其他组件占用的空间。使用 fr 单位可读性更好,同时可以少一些计算。

3) 不要用栅格系统

如 Boottstrap 等框架很流行使用栅格系统,将页面分为 n 个栅格,然后页面组件在这些栅格之间对齐展示。有 CSS grid 之后,其实可以更简洁优雅地实现原来栅格系统的功能,因此可以不再使用栅格系统。

3、为“人”设计,而不是为“用户”设计

这篇文章探讨了用户体验设计的一些思想。作者认为好的(good)产品与伟大的(great)产品之间的差别就是用户体验(UX),但是,我们应该改变视角,不能片面地只为“用户”设计,而是要针对“人”做设计。

简单来说,你需要思考的是一个用你的产品的“人”的目标是什么,比如他想成为一位医生,或者想成为一个更好的家长。然后,再思考你的产品能给他的目标提供什么样的支持。

技术

1、使用 CSS-in-JavaScript

这是 styled-components 的作者 mxstbr 亲自写的文章,解释了他为什么喜欢 CSS-in-JS 这种方式。

所谓 CSS-in-JS,看起来类似这样:

import styled from 'styled-components'

const Title = styled.h1`
  color: palevioletred;
  font-size: 18px;
`

const App = () => (
  <Title>Hello World!</Title>
)

作者认为,这样的代码组织形式有很多好处,比如:

  • 能增加自己的信心,让自己在添加、修改或者删除 CSS 时避免意外影响,也能避免无用的死代码
  • 维护时轻松很多
  • 增强团队协作,避免通用 CSS 代码库的各种问题,开发迅速,新手也能保证一定质量
  • 高性能,初始化时只需要发送必须的 CSS 给用户
  • 支持动态样式

当然,这些好处其他 CSS 工具多少也支持,但是作者认为 CSS-in-JS 有这样一个额外优点:让你做对的事容易,做错的事难(甚至不可能)。

工具/库

1、micromodal

一个小巧的在页面上显示模态对话框的库,支持无障碍(ARIA)访问。

2、react-joyride

一个 React 版的向导库,即在页面上显示那种新用户或新功能引导提示的工具。

3、TextHighlighter

一个高亮选中文本的 JS 库,可以指定选中颜色,实现类似荧光笔在页面文本上划线高亮标记的效果。

4、Summernote

一个使用简单的富文所见即所得编辑器,使用简单,功能也比较简单,基于 jQuery。

5、web-parser

传入一个页面的 URL,以结构化的方式返回该页面中有意义的部分,比如标题、作者、正文等,可用于页面的正文抓取。简单免费。

6、cleave.js

格式化 Input 输入框的 JS 库,比如输入银行卡号时自动隔几位加一个空格,输入日期时自动在年月日之间添加分隔符等等。

7、Worldview

一个轻量级可扩展的 2D 及 3D 场景渲染库,基于 React 及 regl。看 demo 很炫酷。

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s