# 科技爱好者周刊（第 169 期）：五菱汽车的产品设计

这里记录每周值得分享的科技内容，周五发布。

本杂志开源（GitHub: [ruanyf/weekly](https://github.com/ruanyf/weekly)），欢迎提交 issue，投稿或推荐科技内容。

周刊讨论区的帖子[《谁在招人？》](https://github.com/ruanyf/weekly/issues/1870)，提供大量程序员就业信息，欢迎访问或发布工作/实习岗位。

## 封面图

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072902.jpg)

上海中环的一根高架柱子上面，画着一匹巨大的斑马。（[via](https://www.facebook.com/groups/alashanghaining/permalink/10160047667453465)）

## 本周话题：五菱汽车的产品设计

很多年前，我就知道五菱汽车。大学时，一个广西同学去了那里就业，从此我就记住了，柳州有一家汽车厂。

当年，它很不起眼，主要生产面包车。据说，模仿的是日本三菱面包车，连牌子和名字都模仿了人家。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072601.jpg)

但是后来，这家公司逐渐摆脱了模仿，开始生产原创的家用轿车，发展得越来越好，成了全国知名品牌。尤其是近两年的几个车型，简直令人刮目相看。

宝骏 E300。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072602.jpg)

宏光 Mini EV。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072603.jpg)

皮卡和房车。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072606.jpg)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072605.jpg)

这些车的造型和外观设计，十分新颖和别致，完全原创，明显有一套自己的设计语言，非常吸引眼球。

要知道，它们都是低价车，定价几乎是同类车的下限，房车十几万，其他车几万块，配置都很低端。这就是我觉得不简单的地方， **明明是廉价货，可是看上去一点都不廉价，反而有点气派。**

举例来说，很多年轻人，尤其是女性，购买五菱宏光 Mini EV，作为代步车。但它的配置和价格，跟有一些四轮的老年代步车差不多。那些老年代步车让人觉得很简陋，年轻人几乎不可能购买，但是五菱重新设计和包装以后，就打开了市场。这就是厉害的产品设计。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072812.jpg)

**把廉价的东西做得很廉价，那不叫本事； 把廉价的东西做得很轻盈，那才叫本事。**  

所谓“轻盈”，就是简单优雅，在物质上节省材料和能源，在精神上追求自由。廉价的东西，原来只能吸引低端的顾客；做得轻盈以后，就能吸引到高收入的顾客。

我觉得，五菱汽车是一个好例子，值得软件开发者学习，怎么把产品做得简单而不简陋，轻盈而不笨重。

## Vue 3 和 React 17 的源码比较

React 和 Vue 是国内最流行的两个前端框架，孰优孰劣的争论，就从来没有停息过。只要有人提一句：“我觉得 A 比 B 更好”，下面肯定就是一堆回帖。

> - “ Vue 只适合小项目，大项目扛不起来”
> - “ React 组件太复杂，代码组织乱！“
> - “ Vue好上手，岗位多”
> - “ 大厂基本都用 React，不用 Vue ”

其实大可不必，它们各有特点，都能解决前端开发的问题，你只要选择更适合自己风格的那种就可以了。这就像不同品牌的汽车，都能开到目的地，只是你开起来顺不顺手而已。

不过，这两个框架的对比和争论，并非全无意义。

> 1、React 和 Vue 各自的特点是常见的面试题。  
> 2、技术选型时，必须对各个框架都非常了解。  
> 3、通过对比，有助于领悟一些前端的本质东西，比如算法、工程化方法、规范等等，可以帮你构建技术壁垒，保持核心竞争力。

本周的课程资料，就是两大框架的对比 **《Vue 3.0 和 React 17 源码剖析比较》**  资料包。它从框架原理开始讲起，分析各自的设计思路，再到现实业务场景的适用性，最后抽象二者的底层实现，层层递进，帮你掌握这两个框架的异同。

下面就是资料包的主要内容。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072814.jpg)

它比较适合前端入门不久、对主流框架还不够熟悉的同学。可以帮助学习者掌握 Vue3 和 React17 设计思路和面试技巧，也能对比框架生态，了解技术选型方法论，探究框架原理。

资料包由国内著名培训机构“开课吧”提供，编写者大圣老师（盛鑫晶）是前百度、360 的前端架构师，精通 Vue 和 React 开发，也是 Vue 3.0 源码的贡献者。

主办方为了推广品牌，现在向周刊读者赠送这个资料包。微信扫描下方二维码，就可以免​费领取。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072815.jpg)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072816.jpg)

扫描后，记得添加助​教老师微信。当天，老师就会把资料包发给你，数量不多，欢迎扫码领取。

## 科技动态

1、[闪烁灯光的代码](https://80.lv/articles/valve-reused-the-code-for-flickering-lights-in-alyx-22-years-later/)

有人发现，2020年发布的游戏 Alyx，里面地下室的闪烁灯光，跟1998年发售的《半条命》是一样的，说明它们使用的是同样的代码。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070306.jpg)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070307.jpg)

大家仔细看下面的[游戏视频](https://v.qq.com/page/p/i/v/p3256qp06iv.html)，两者闪烁灯光的模式和频率完全一样。

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=p3256qp06iv" allowFullScreen="true" width="600" height="674"></iframe>

它的代码实现，是使用一个字符串`mmamammmmmammamamaaamammma`表示灯光亮度变化的顺序，a 表示暗，m 表示亮。这个技巧最早是1996年 John Carmack 在雷神之锤（Quake）里使用的。

2、[奥运村的遥控器](https://twitter.com/lawanda50/status/1416979481651150849)

加拿大网球运动员来到东京参加奥运会，住进奥运村后，就遇到了麻烦。空调遥控器竟然只有日文，完全看不懂，她只好在网上发文求助。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072402.jpg)

网友纷纷给她出主意，用手机翻译软件拍照就可以了。但是，这件事反映了组委会的疏漏，以及空调厂家的设计完全没有考虑外国用户。

3、[沼气摩托车](https://www.notechmagazine.com/2021/07/inventor-harvests-methane-gas-from-ditches-and-ponds-to-power-his-moped.html)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071407.jpg)

一个荷兰艺术家将一辆二手摩托车，改建成使用沼气（主要成分甲烷）作为燃料。摩托车的尾部挂了一个大瓶子，用来存储沼气。

加气时，需要使用一个特殊装置，到池塘和沟渠去收集有机物质分解或腐烂所释放的甲烷。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071408.jpg)

收集8个小时的沼气，可以行驶20公里。这个项目的主要目的，是为了提醒公众环境保护。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071409.jpg)

4、[交通信号灯](https://www.fastcompany.com/90655753/the-traffic-light-gets-a-dazzling-21st-century-makeover)

1914年，美国城市克利夫兰安装了人类第一个交通信号灯，从那时到现在，基本样子没变过。一家俄罗斯设计公司，最近提出了新的信号灯设计。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072101.jpg)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072102.jpg)

这种信号灯就是一整块液晶面板，通过背景色的变化，来提示红灯、黄灯和绿灯，并用勾、叉和感叹号等辅助符号，加强注意力。

它还会显示剩余的秒数，以及绿灯时可通行的道路走向。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072105.jpg)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072103.jpg)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072104.jpg)

5、

[《纽约时报》](https://www.nytimes.com/2021/07/19/technology/tiktok-resumes-jobs.html)报道，越来越多的美国年轻人拍一段自己的短视频，放在 TikTok 上面求职，请求看到的人转发。

这比 A4 纸的简历效果好多了，值得借鉴。大家完全可以在简历上印一个自己视频的二维码。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072001.jpg)

6、[3D 打印的汽车配件](https://www.motor1.com/news/513312/ford-maverick-3d-print-accessories/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071905.jpg)

福特公司在美国新发布的 Maverick 皮卡汽车，车内的大量配件都没有提供实物，而是提供了 STL 源码文件，让车主自己去 3D 打印，有一点“毛坯车”的意思。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071906.jpg)

可以打印的配件包括杯架、储物箱、垃圾桶、绳索组织器、挂袋的双钩、座椅下的储物隔板等等。福特公司说，还会发布更多可 3D 打印的配件。

这样做有几个好处，一是降低了车辆的出厂价格，二是用户可以根据自己的喜好，决定打印哪些配件，以及使用什么材质。另外，外部厂商也可以根据公开的接口，生产第三方配件。

7、

一位设计师[提出](https://twitter.com/neilsardesai/status/1416527160794361868)，浏览器的窗口标签应该可以改变位置，放置在浏览器的左右两侧，就像活页夹一样。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071801.jpg)

我觉得，这种设计对宽屏幕显示器很有意义。

## 文章

1、[JavaScript 新增的运算符](https://wangdoc.com/es6/operator.html)（中文）

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071001.jpg)

本文介绍 ES6 的后续标准为 JavaScript 新增的七个运算符，其中包括最新的 ES2021 标准增加的三个运算符。

2、[软件未来的10个预测](https://blog.container-solutions.com/10-predictions-for-the-future-of-computing)（英文）

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071101.jpg)

一个云计算专家预测软件未来的10个变化，可以当作一家之言看看。

3、[如何向美国政府索取入境照片](https://arstechnica.com/tech-policy/2015/02/how-i-requested-my-photographs-from-the-department-of-homeland-security/)（英文）

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071303.jpg)

外国人每次进入美国时，需要拍照并扫描指纹。根据美国法律，可以向美国政府索取这些信息的副本。本文记录作者是怎么做的。

4、[Haskell 语言入门第一步](https://blog.kalvad.com/haskell-series-part-1/)（英文）

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071304.jpg)

这篇文章介绍怎样动手尝试 Haskell 语言，并写一个简单函数，内容清晰易懂 。

5、[关于微控制器的知识](https://blog.toit.io/what-you-need-to-know-about-microcontrollers-5fabd6d5b019)（英文）

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071405.jpg)

当代计算机越做越小，符合冯诺依曼架构的全套计算装置，已经可以做进一块芯片了，这种芯片式的计算机称为“微控制器”。本文介绍微控制器的基本知识。

6、[最糟糕的音量控制界面](https://uxdesign.cc/the-worst-volume-control-ui-in-the-world-60713dc86950)（英文）

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071414.jpg)

本文收集各种极其难用的音量控制界面设计，有点恶作剧性质，比如上图。

7、[JS 脚本如何正确检测用户的设备](https://multilogin.com/why-mimicking-a-device-is-almost-impossible/)（英文）

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062803.jpg)

用户经常使用伪装的 User-Agent 标头，隐藏自身的信息。本文给出了各种思路，如何用 JS 脚本，正确检测用户的上网设备。

8、[Suspense 和 React.lazy() 用法示例](https://dev.to/collegewap/code-splitting-in-react-using-react-lazy-and-loadable-components-3o54)（英文）

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062901.jpg)

React 16.6 版本引入了 Suspense 组件，用于生成动态加载元素的过渡效果。本文给出了一个完整的示例，介绍它配合 React.lazy() 的用法。

## 工具

1、[Orbit](https://orbit.kiwi/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071502.jpg)

一个 React 的组件库，由旅游网站 Kiwi.com 设计，带有旅游休闲的风格。

2、[Feed me up, Scotty!](https://feed-me-up-scotty.vincenttunru.com/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070704.jpg)

这个工具使用 CSS 选择器，从任意页面提取想要的内容，通过 GitHub Actions，自动生成该页面的 RSS。

3、[transfer.sh](https://transfer.sh/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070705.jpg)

这个开源工具允许自己架设服务，从命令行分享文件给其他人，也可以直接使用官方的在线版。

4、[MoviePy](https://github.com/Zulko/moviepy)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072204.jpg)

一个视频编辑的 Python 库，可以方便地编写脚本，进行各种视频操作，基于 ffmpeg。

5、[Ampache](https://ampache.org/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072704.jpg)

一个开源的流媒体服务器，允许远程访问托管的音频和视频文件，有点类似于 Plex。

6、[Mobian](https://mobian-project.org/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072701.jpg)

手机版的 Debian 系统，可以安装在指定型号的手机上，现在支持一加 6 和 Poco F1。

7、[push-bot](https://github.com/tans/push-bot)

一个基于 wechaty 的微信推送机器人，可以用脚本向微信推送消息。（[@tans](https://github.com/ruanyf/weekly/issues/1856) 投稿）

8、[织信](https://www.informat.cn/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072711.jpg)

一个面向企业用户的低代码平台，帮助企业不用写代码，就能搭建管理系统、业务平台、企业官网等，有免费使用的版本。（[@hopper20](https://github.com/ruanyf/weekly/issues/1866) 投稿）

## 资源

1、[网络迷踪](https://chao.fun/f/84?time=1627397908906)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072710.jpg)

炒饭社区的一个板块，网友上传照片（比如上图），请求帮助找出这是在哪里拍的。（[@cijianzy](https://github.com/ruanyf/weekly/issues/1858) 投稿）

2、[Mac 电脑如何设置开发环境（2021版）](https://www.swyx.io/new-mac-setup-2021/)（英文）

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021070716.jpg)

一个程序员买了新的 Mac 电脑，用于全栈开发。他详细记录了，如何将这台电脑设置成开发环境。

3、[微软 Rust 语言初学者教程](https://www.youtube.com/playlist?list=PLlrxD0HtieHjbTjrchBwOVks_sr8EVW1x)

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062501.jpg)

微软公司推出 Rust 语言视频教程，一共35讲，每一讲都是几分钟的短视频，存放在 Youtube 上面。

4、[Pitch Deck Hunt](https://www.pitchdeckhunt.com/)

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021071002.jpg)

创业公司向投资者和用户介绍自己的 PPT，叫做 Pitch Deck。该网站收集了150多家著名公司早期的 Pitch Deck，可以用来当作模板。

## 图片

1、[地下小镇](https://www.businessinsider.com/inside-coober-pedy-australias-underground-town-2016-1)

澳大利亚南部内陆有一个名叫库伯佩迪（Coober Pedy）的小镇。它最初是一个蛋白石矿场，现在已经停止开采了。

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062007.jpg)

该镇的夏季地表温度接近50摄氏度，为了躲避酷暑，许多居民都搬到地下的矿洞里面居住，已经有100年历史了。

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062002.jpg)

当地的地面上，到处都是烟囱和通气孔。

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062003.jpg)

人们则是在地下安家，客厅、卧室、厨房，一应俱全。

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062004.jpg)

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062005.jpg)

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062006.jpg)

酒吧、教堂、商店、旅馆、娱乐设施等也在地下，整个小镇可以都在地下运作，不到地面活动。

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062008.jpg)

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062009.jpg)

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062010.jpg)

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021062011.jpg)

2、[自动合影机](https://www.reddit.com/r/Damnthatsinteresting/comments/o7brim/this_really_cool_system_to_take_a_picture_with/)

美国达拉斯牛仔队的体育场里，有一个自动合影机，球迷可以挑选自己喜欢的体育明星合影，非常酷。

我预感，国内很快就会出现类似的机器。

<iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=v3255t75g3f" allowFullScreen="true" width="600" height="800"></iframe>

## 文摘

1、[一个人可以有多少个朋友？](https://kottke.org/21/06/the-circles-of-friendship)

英国人类学家罗宾·邓巴（Robin Dunbar）提出过著名的“邓巴数”的概念。

![](https://cdn.beekka.com/blogimg/asset/202107/bg2021072901.jpg)

他认为，由于人类大脑的容量，一个人能够保持的友谊关系是有限的，平均大约为150人。大脑认知功能比较强的人，会有更多一点的朋友。

下图就是他的理论。

![](https://cdn.beekka.com/blogimg/asset/202106/bg2021061705.jpg)

（1）你最贴心的朋友，平均是1.5个，很可能是你的伴侣。

（2）你的亲密朋友大约是5个，如果你遇到困难，他们会放下一切来支持你。

（3）你的至交平均是15个，他们是你的主要社交伙伴，你足够信任他们，会想着跟他们一起吃饭、旅行，交流生活经验。

（4）你熟悉的朋友是50个，如果你在家里举办周末大烧烤，会邀请他们。

（5）你的普通朋友是150个，你举行婚宴的时候，他们会参加。

（6）你认识的人大约是500个，路上见到，会打招呼。

（7）你记得住名字的人是1500个。

（8）你对脸有印象的人是5000个。

之所以会有这些层，是因为一个人的社交时间和精力是有限的。你不得不选择，如何分配这些时间，与哪些人共度。

他还有其他一些推论。

（1）一般来说，内向的人在每一层的朋友数，都比外向的人少。

（2）与一个陌生人成为好朋友，大约需要相处200个小时。

（3）随着年龄的增长，朋友关系变得越来越难以建立，每一层的朋友数字都会下降。

（4）坠入爱河会让你减少两个好朋友。

## 言论

1、

年轻时，我犯的最大错误，就是没有及时离职。我以为我必须向公司证明自己，然后再离开，但这其实没有任何意义。你不欠雇主任何东西，不必向雇主证明任何事情。他们对你丝毫没有忠诚度，对你做对或做错、是聪明还是愚蠢，毫不在意。

把时间用在你最终不会引以为豪的东西上面，是一件可怕的事情，浪费了你在地球上的短暂旅程。

-- [Hacker News 读者](https://news.ycombinator.com/item?id=27565815)

2、

新手作家追求写得聪明，专业作家追求写得清晰，大师追求引起读者灵魂的共鸣。

-- [David Perell](https://twitter.com/david_perell/status/1409610371527233539)

3、

上周俄罗斯西北部的气温高达35度以上，持续了好几天，那个地方在北极圈里面，晚上太阳几乎不下山，没日没夜的高温暴晒，简直是对人的折磨。

-- [Hacker News 读者](https://news.ycombinator.com/item?id=27694136)

4、

创业者要做两件事：第一件是弄清楚要做什么，第二件就是去做。

但是，大多数创业者不认为第一件事很重要，如果花费一天时间思考，试图更好地理解一个问题，他往往觉得那一天是浪费掉的，没有行动力。

-- [《动作要快，但要先了解问题》](https://jacobobryant.com/blog/understand/)

## 历史上的本周

2020年（第 118 期）：[高考志愿怎么填](https://www.ruanyifeng.com/blog/2020/07/weekly-issue-118.html)

2019年（第 66 期）：[创业不是零和游戏](https://www.ruanyifeng.com/blog/2019/07/weekly-issue-66.html)

2018年（第 15 期）：[周刊的内容从何而来？](https://www.ruanyifeng.com/blog/2018/07/weekly-issue-15.html)

## 订阅

这个周刊每周五发布，同步更新在[阮一峰的网络日志](http://www.ruanyifeng.com/blog)和[微信公众号](http://weixin.sogou.com/weixin?query=%E9%98%AE%E4%B8%80%E5%B3%B0%E7%9A%84%E7%BD%91%E7%BB%9C%E6%97%A5%E5%BF%97)。

微信搜索“阮一峰的网络日志”或者扫描二维码，即可订阅。

![](https://cdn.beekka.com/blogimg/asset/202103/bg2021030402.jpg)

（完）

