Discover and read the best of Twitter Threads about #设计入门
Most recents (24)
为什么用户会把小红书当做搜索引擎？
1/
这组推文挺有意思，讨论为什么小红书这样的社交APP，搜索效果反而好过传统搜索引擎谷歌，而推特也是社交APP、怎么就做不好搜索和推荐？
原推说因为谷歌不知道用户看内容时的行为，所以不知道内容好坏、难以筛选搜索结果
#设计入门
1/
这组推文挺有意思，讨论为什么小红书这样的社交APP，搜索效果反而好过传统搜索引擎谷歌，而推特也是社交APP、怎么就做不好搜索和推荐？
原推说因为谷歌不知道用户看内容时的行为，所以不知道内容好坏、难以筛选搜索结果
#设计入门
2/
说法没错，但没说更基础的问题：传统搜索之所以难用，并非搜不到，而是搜索结果太多、无法理解
搜索同样内容，谷歌得到的结果比推特多几个数量级、推特比Youtube多几个数量级、Youtube 又比小红书多几个数量级…
小红书搜索之所以比谷歌好用，根本原因是小红书搜出的结果很少，随便翻翻就看到了
说法没错，但没说更基础的问题：传统搜索之所以难用，并非搜不到，而是搜索结果太多、无法理解
搜索同样内容，谷歌得到的结果比推特多几个数量级、推特比Youtube多几个数量级、Youtube 又比小红书多几个数量级…
小红书搜索之所以比谷歌好用，根本原因是小红书搜出的结果很少，随便翻翻就看到了
3/
有很多方法来筛选搜索结果，帮用户更有效地找到结果，除了用用户行为衡量搜索结果的权重，常见方法还有：
- 让信息结构化、语义化，比如搜衣服、搜菜谱都很简单
- 增加时间、地理位置等约束条件，比如我肯定不关心印度流行什么咖啡
- 用社交图谱、兴趣图谱筛选出跟我最相关的信息
…
有很多方法来筛选搜索结果，帮用户更有效地找到结果，除了用用户行为衡量搜索结果的权重，常见方法还有：
- 让信息结构化、语义化，比如搜衣服、搜菜谱都很简单
- 增加时间、地理位置等约束条件，比如我肯定不关心印度流行什么咖啡
- 用社交图谱、兴趣图谱筛选出跟我最相关的信息
…
在所有视频网站里，为什么 HBO Max 用户评分最差
作者是著名的用户体验设计师，这是他系列设计点评之一，包括 100+ 页的 slide
文字小结部分说到了 HBO Max 的几个问题：图片太大（慢）、缺乏用户引导所需的提示、菜单居然会挡住缩略图和文字、操作流程不合理
#设计入门
builtformars.com/case-studies/h…
作者是著名的用户体验设计师，这是他系列设计点评之一，包括 100+ 页的 slide
文字小结部分说到了 HBO Max 的几个问题：图片太大（慢）、缺乏用户引导所需的提示、菜单居然会挡住缩略图和文字、操作流程不合理
#设计入门
builtformars.com/case-studies/h…
作者说的各大视频网站里，我在用或者用过其中大部分
HBO Max 一大特色是经常需要多按很多次，另外网页版的 HBO Max 永远无法直接接着上次的进度播放
Prime、Hulu、Apple 的交互设计也非常愚蠢，Netflix 和 Roku 最容易使用
当然了，相比小米电视等国产视频网站，这些美国视频网站都是可爱的小天使
HBO Max 一大特色是经常需要多按很多次，另外网页版的 HBO Max 永远无法直接接着上次的进度播放
Prime、Hulu、Apple 的交互设计也非常愚蠢，Netflix 和 Roku 最容易使用
当然了，相比小米电视等国产视频网站，这些美国视频网站都是可爱的小天使
之所以我觉得 HBO Max、Prime、Hulu、Apple 的交互设计非常愚蠢，除了本来设计就烂，另一个原因是它们适合在电脑或者 iPad 上使用，即点击为主的、可以随时点击屏幕上任何元素
Netflix 和 Roku 的交互设计，优先满足了电视遥控器的场景，即顺序着一个个往下选元素，最终操作体验出乎意料地简单、直观
Netflix 和 Roku 的交互设计，优先满足了电视遥控器的场景，即顺序着一个个往下选元素，最终操作体验出乎意料地简单、直观
为什么苹果非要设计一个手指根本够不着的 dynamic island 灵动岛交互？
也许它是未来苹果 扩展现实/XR 交互策略的一个暗示！
这是所有灵动岛文章里最有趣的一篇，作者是著名设计师，他认为苹果在最佳实践中出现颠覆，那这个颠覆很可能是其他某个领域的最佳实践
#设计入门
proofofconcept.pub/p/welcome-to-d…
也许它是未来苹果 扩展现实/XR 交互策略的一个暗示！
这是所有灵动岛文章里最有趣的一篇，作者是著名设计师，他认为苹果在最佳实践中出现颠覆，那这个颠覆很可能是其他某个领域的最佳实践
#设计入门
proofofconcept.pub/p/welcome-to-d…
作者列举苹果在产品上测试新交互范式的例子：
- 在触控板上测试 3D touch、然后引入 Watch
- 文件连续性奠定了 Universal Control 的基础
- 也许 TouchBar 是 Dynamic Island 的原型？
作者觉得灵动岛的交互不是为点击设计的，更适合 HUD 显示器，是未来 XR 交互的一部分
非常有趣的文章，推荐阅读
- 在触控板上测试 3D touch、然后引入 Watch
- 文件连续性奠定了 Universal Control 的基础
- 也许 TouchBar 是 Dynamic Island 的原型？
作者觉得灵动岛的交互不是为点击设计的，更适合 HUD 显示器，是未来 XR 交互的一部分
非常有趣的文章，推荐阅读
多聊几句帮各位设计师理解这篇文章的背景：
一般人会被灵动岛的动态效果所吸引，但动效只是交互操作的结果、相对次要，更重要的是交互操作的认知和操作的难度
苹果在这两方面，远比安卓等其他竞争对手更强大，通俗地说，苹果比谁都更善于设计小朋友、老奶奶也会用的交互方式
…
一般人会被灵动岛的动态效果所吸引，但动效只是交互操作的结果、相对次要，更重要的是交互操作的认知和操作的难度
苹果在这两方面，远比安卓等其他竞争对手更强大，通俗地说，苹果比谁都更善于设计小朋友、老奶奶也会用的交互方式
…
不知道问题里的“好用”指什么，我就展开回答吧
1，容易学、容易使用的“好用”
现在的 UI、原型设计软件的学习难度、基本功能都很相似，喜欢国产软件的话建议用 MasterGo（国产 UI 软件公司里，他们应该最有钱），需要和老外程序员、客户打交道的话，建议用 Figma
#设计入门
1，容易学、容易使用的“好用”
现在的 UI、原型设计软件的学习难度、基本功能都很相似，喜欢国产软件的话建议用 MasterGo（国产 UI 软件公司里，他们应该最有钱），需要和老外程序员、客户打交道的话，建议用 Figma
#设计入门
2，使用效果好的“好用”
现在的 UI、原型设计软件，主要功能分为设计、原型制作、协作、输出这 4 大块
原型制作、协作、输出这几块，都需要跟上下游合作，所以国产的 MasterGo、即时设计更适合国内的习惯，Figma 是事实上的国际标准
设计这个部分，效果取决于设计师、设计团队的能力，跟软件关系不大
现在的 UI、原型设计软件，主要功能分为设计、原型制作、协作、输出这 4 大块
原型制作、协作、输出这几块，都需要跟上下游合作，所以国产的 MasterGo、即时设计更适合国内的习惯，Figma 是事实上的国际标准
设计这个部分，效果取决于设计师、设计团队的能力，跟软件关系不大
3，关于“好用”，网上最流行的问题是：我学哪个软件才能成为 UI 设计师，从此收入高、饭碗无忧？
很遗憾，除非你是官二代、富二代，否则世界上并没有确保前途的 UI 软件
UI、UX 设计是一个快速发展中的行业，软件、设计方法都在不断进化，设计师保持竞争力，需要熟练掌握几个软件、并且不断尝试新软件
很遗憾，除非你是官二代、富二代，否则世界上并没有确保前途的 UI 软件
UI、UX 设计是一个快速发展中的行业，软件、设计方法都在不断进化，设计师保持竞争力，需要熟练掌握几个软件、并且不断尝试新软件
前两天在院子里种草，听了最新一期 Design Details 播客，说的两个问题都很有趣
一是问 Figma 图层应该用什么格式命名？
- NewLayerName
- New Layer Name
- New layer name
- new layer name
- NEW LAYER NAME
- new-layer-name
- new_layer_name
…
designdetails.fm/episodes/lid4i…
#一边一边 #设计入门
一是问 Figma 图层应该用什么格式命名？
- NewLayerName
- New Layer Name
- New layer name
- new layer name
- NEW LAYER NAME
- new-layer-name
- new_layer_name
…
designdetails.fm/episodes/lid4i…
#一边一边 #设计入门
我给图层（或组件、控件、元素…）命名，都是 New Layer Name 这种。这种命名方式在设计里叫做 title case，大致的规则是每个单词的首个字母大写，以往主要用在文章标题里
用于图层命名，可以方便眼睛扫描、降低阅读难度（主播二也是这个观点）
相比之下，苹果推荐 New layer name 这样更优雅的命名
用于图层命名，可以方便眼睛扫描、降低阅读难度（主播二也是这个观点）
相比之下，苹果推荐 New layer name 这样更优雅的命名
节目里讨论的第二个问题，是说新版 Gmail 界面为什么那么难看，为什么设计上丢失了很多细节，比如很烂的字体、以及非常非常丑陋的配色
我一直用第三方客户端，所以完全不知道 Gmail 改版，昨天特地看了一眼，果然丑死，感觉就像完全不懂设计的程序员，随便凑了一个界面
实例：我肯定无法使用这种软件
我一直用第三方客户端，所以完全不知道 Gmail 改版，昨天特地看了一眼，果然丑死，感觉就像完全不懂设计的程序员，随便凑了一个界面
实例：我肯定无法使用这种软件
怎么重新设计个人网站
作者是 GitLab 资深产品设计师，下图分别是升级前、后
升级目的很明确：为了扩展个人品牌，将利用网站发布更多内容，希望网站的阅读体验更好
为此做了 2 个主要升级：改进标题字体，用 Wordpress 代替 Jekyll 加快发布速度、减少维护量
#设计入门
matejlatin.com/blog/2022/08/1…
作者是 GitLab 资深产品设计师，下图分别是升级前、后
升级目的很明确：为了扩展个人品牌，将利用网站发布更多内容，希望网站的阅读体验更好
为此做了 2 个主要升级：改进标题字体，用 Wordpress 代替 Jekyll 加快发布速度、减少维护量
#设计入门
matejlatin.com/blog/2022/08/1…
不同于一般人以及多数设计师想象，个人网站也有 UX 用户体验设计，各种花哨的视觉设计、炫技的前端特效、打破定式的不规则排版…也许恰恰拖累了个人网站的 UX
同样，各种 Next.js、静态网站生成器、headless CMS…对创作者个人而言，也可能是个负担。比如作者自己维护了 3 个 Jekyll 静态网站，很痛苦
同样，各种 Next.js、静态网站生成器、headless CMS…对创作者个人而言，也可能是个负担。比如作者自己维护了 3 个 Jekyll 静态网站，很痛苦
所以作者做了一个视觉上看似变化不大、其实改进了 UX 的网站升级
而且他之前的一个作品是字体设计网站 betterwebtype.com 和同名书籍，他这篇关于网站升级的文章，花了很多篇幅介绍字体，这也符合他的个人品牌
而且他之前的一个作品是字体设计网站 betterwebtype.com 和同名书籍，他这篇关于网站升级的文章，花了很多篇幅介绍字体，这也符合他的个人品牌
UI UX 设计的微技巧，2022 年最佳技巧集锦
作者是来自英国的设计师，一直分享很容易忽视、却能改进用户体验的各种设计小技巧。比如下面几个：
- 别只用颜色表示出错了，用文字提示具体的出错原因
- 用颜色突出重要信息
- 用更细的字体时，加深文字颜色
- 别废话
#设计入门
marcandrew.me/ui-ux-micro-ti…
作者是来自英国的设计师，一直分享很容易忽视、却能改进用户体验的各种设计小技巧。比如下面几个：
- 别只用颜色表示出错了，用文字提示具体的出错原因
- 用颜色突出重要信息
- 用更细的字体时，加深文字颜色
- 别废话
#设计入门
marcandrew.me/ui-ux-micro-ti…
作者一直在分享类似的小技巧，一共有 15 集
marcandrew.me/tag/design-tip…
网上有各种图文并茂的设计小技巧，都是一个个细微的设计决策，都是用简单的图片来展示设计里的 yes 和 no
这些技巧好在很容易理解，弱在它们脱离了实际场景，变成了像菲兹定律一样有指导性、但在实际工作时很容易忘记的小概念
marcandrew.me/tag/design-tip…
网上有各种图文并茂的设计小技巧，都是一个个细微的设计决策，都是用简单的图片来展示设计里的 yes 和 no
这些技巧好在很容易理解，弱在它们脱离了实际场景，变成了像菲兹定律一样有指导性、但在实际工作时很容易忘记的小概念
这些细微的设计原则和技巧，也给设计师带来了极大的挑战：我怎么可能记住那么多信息点？我怎么知道在哪个设计的哪个环节里应该使用哪个原则和技巧？
其实解决办法很简单：不断练习，尤其是在实际项目里练习
设计原则和技巧就相当于成语，掌握成语和利用成语改善表达能力的唯一方法，就是不断说成语🤷♂️
其实解决办法很简单：不断练习，尤其是在实际项目里练习
设计原则和技巧就相当于成语，掌握成语和利用成语改善表达能力的唯一方法，就是不断说成语🤷♂️
我做设计顾问，一项服务是帮客户招聘设计师。比如确定职位和技能描述、从专业角度挑简历和作品集、远程面试
看作品集特别令人沮丧。对职业发展而言，作品集是设计师最重要的个人作品，但绝大多数人完全不会设计作品集🌑
他们总让我疑惑：如果你连自己都设计不好，怎么为公司、客户做设计
#设计入门
看作品集特别令人沮丧。对职业发展而言，作品集是设计师最重要的个人作品，但绝大多数人完全不会设计作品集🌑
他们总让我疑惑：如果你连自己都设计不好，怎么为公司、客户做设计
#设计入门
我选了几个设计个人作品集的反面例子
这是最典型的错误：为了凑数量，把低劣作品也放入作品集
负责评审作品集的人，不管是设计主管、设计总监还是我这样的设计顾问，最低限度是挺不错的设计师，都能判断设计的优劣
这一组别说是设计水准不过关，我扫一眼作品的整体配色，立刻就知道这个人不合适了
这是最典型的错误：为了凑数量，把低劣作品也放入作品集
负责评审作品集的人，不管是设计主管、设计总监还是我这样的设计顾问，最低限度是挺不错的设计师，都能判断设计的优劣
这一组别说是设计水准不过关，我扫一眼作品的整体配色，立刻就知道这个人不合适了
这种也很常见，直接把一堆设计稿输出出来
没有任何项目背景说明，也不解释自己的设计思路
ok，最低限度你让我看一下你实际的设计吧？不好意思，作品集里只有这么小的缩略图，完全看不清设计到底什么样
没有任何项目背景说明，也不解释自己的设计思路
ok，最低限度你让我看一下你实际的设计吧？不好意思，作品集里只有这么小的缩略图，完全看不清设计到底什么样
很有趣的一个小工具，搜索设置界面里的特定字符串
开发者还很细心，担心设置界面太复杂、有可能错过已经搜到的字符串，所以设计了一个 1X 放大镜，照到哪儿、哪儿的目标字符串就发光（这等于是人造了一个“隧道视觉”😂）
其实在界面里找关键词是常规需求啊，那么多狗屁软件、狗屎文案🤷♂️
#设计参考
开发者还很细心，担心设置界面太复杂、有可能错过已经搜到的字符串，所以设计了一个 1X 放大镜，照到哪儿、哪儿的目标字符串就发光（这等于是人造了一个“隧道视觉”😂）
其实在界面里找关键词是常规需求啊，那么多狗屁软件、狗屎文案🤷♂️
#设计参考
不知道开发者怎么实现的这个功能，有什么 API 能抓到界面上的文字？还是自己截屏 OCR 一下？
因为 macOS 自带的 spotlight 全局搜索还比较好用，浏览器的页面内搜索效率也很高，如果我来设计这个小工具，我想把它设计成覆盖在当面界面之上、全局的搜索功能，视野之内的文字全可以搜索💪🙌
因为 macOS 自带的 spotlight 全局搜索还比较好用，浏览器的页面内搜索效率也很高，如果我来设计这个小工具，我想把它设计成覆盖在当面界面之上、全局的搜索功能，视野之内的文字全可以搜索💪🙌
说到软件的狗屎文案，我最迫切需要的工具是强制国产 APP 和网站显示中文
国内厂家的英文翻译太烂了，包括腾讯之类的大厂。他们的很多文案特别是 UI 里缺乏上下文的文案，直接读英文完全猜不到它想说什么🌚
国内厂家的英文翻译太烂了，包括腾讯之类的大厂。他们的很多文案特别是 UI 里缺乏上下文的文案，直接读英文完全猜不到它想说什么🌚
1/
说说设计师阅读专业文章的习惯
这篇文章不但写得很精彩，其实还特别有意思。它既讨论怎么具体设计一个控件，又是在设计系统的这个大前提下讨论，不同水平的设计师能在这一篇文章里，看到不同的结论
但如果你是新手设计师，或者文章主题正好在你领域之外，很可能你看不懂这样的文章🤷♂️
#设计入门
说说设计师阅读专业文章的习惯
这篇文章不但写得很精彩，其实还特别有意思。它既讨论怎么具体设计一个控件，又是在设计系统的这个大前提下讨论，不同水平的设计师能在这一篇文章里，看到不同的结论
但如果你是新手设计师，或者文章主题正好在你领域之外，很可能你看不懂这样的文章🤷♂️
#设计入门
2/
国内的设计师依赖性比较强，喜欢看别人整理的、汇总的、分析的文章，不喜欢自己阅读、自己解读。遇到看不懂的文章，总希望有高人来解读
但是很遗憾，通常这时候跳出来的高人，要么是会写文章但平时根本不做设计的公众号小编，要么是特别会来事但也是半瓶子醋的设计师，要么就是个爱自我表现的话痨
国内的设计师依赖性比较强，喜欢看别人整理的、汇总的、分析的文章，不喜欢自己阅读、自己解读。遇到看不懂的文章，总希望有高人来解读
但是很遗憾，通常这时候跳出来的高人，要么是会写文章但平时根本不做设计的公众号小编，要么是特别会来事但也是半瓶子醋的设计师，要么就是个爱自我表现的话痨
3/
针对设计师的阅读建议：
- 自己读。阅读是个探索、思考、记录和输出的完整过程，依赖别人解读，阅读就退化成小学生背书了
- 多读。很多设计师还保留着美工的阅读习惯，只喜欢那些介绍新工具、新技巧的文章，事实上每天都有人在分享案例、经验、思路、策略…各种角度、层面的好内容
针对设计师的阅读建议：
- 自己读。阅读是个探索、思考、记录和输出的完整过程，依赖别人解读，阅读就退化成小学生背书了
- 多读。很多设计师还保留着美工的阅读习惯，只喜欢那些介绍新工具、新技巧的文章，事实上每天都有人在分享案例、经验、思路、策略…各种角度、层面的好内容
1/
这两天国内在热炒新版红绿灯（其实是 2016 年国标），跟设计有关的事，我肯定要研究一下
有几点特别有意思
一是为什么大家看不懂这些复杂的通行规则，而我一看就懂了？
因为多数人用了穷举的方式，试图记忆所有的红绿灯组合和规则。谁能一下子记得这么多抽象的、看似毫无规律的规则
#设计入门
这两天国内在热炒新版红绿灯（其实是 2016 年国标），跟设计有关的事，我肯定要研究一下
有几点特别有意思
一是为什么大家看不懂这些复杂的通行规则，而我一看就懂了？
因为多数人用了穷举的方式，试图记忆所有的红绿灯组合和规则。谁能一下子记得这么多抽象的、看似毫无规律的规则
#设计入门
2/
一般人不会用逻辑思维来分解一个设计，而是用直觉、记忆等更直接方式来学习设计
我是用的“排除法”，发现通行规则其实很简单：不是红色，就能开。网上后来传播的一句话口诀，大概也是这个意思
这种方法是在不理解逻辑的前提下，理解设计的思路
好设计最好一目了然，次一点至少能用排除法来理解
一般人不会用逻辑思维来分解一个设计，而是用直觉、记忆等更直接方式来学习设计
我是用的“排除法”，发现通行规则其实很简单：不是红色，就能开。网上后来传播的一句话口诀，大概也是这个意思
这种方法是在不理解逻辑的前提下，理解设计的思路
好设计最好一目了然，次一点至少能用排除法来理解
3/
另外呢，我是在凉爽舒适的办公室里，一边喝咖啡一边念叨“我倒要看看这帮傻逼设计师还能折腾出什么幺蛾子出来”的心态下，很放松地研究这 7 种红绿灯排列组合
如果我在44度高温下开车出门，在前面有外卖小哥、后面有人嘀我、旁边有人加塞的十字路口忽然看到这种红绿灯，当时我脑子肯定就短路了
另外呢，我是在凉爽舒适的办公室里，一边喝咖啡一边念叨“我倒要看看这帮傻逼设计师还能折腾出什么幺蛾子出来”的心态下，很放松地研究这 7 种红绿灯排列组合
如果我在44度高温下开车出门，在前面有外卖小哥、后面有人嘀我、旁边有人加塞的十字路口忽然看到这种红绿灯，当时我脑子肯定就短路了
新车里最爱显摆的触摸屏有多烂
设计师都知道汽车人机界面（HMI）里，触摸屏比实体按钮的效率差很多，最近瑞典最大的汽车媒体对比测试了不同汽车的触摸屏操作速度
结果 2005 年款物理按钮的沃尔沃操作速度最快，而上汽 MG Marvel R 最慢，比沃尔沃慢了 4 倍！
#设计入门
vibilagare.se/nyheter/physic…
设计师都知道汽车人机界面（HMI）里，触摸屏比实体按钮的效率差很多，最近瑞典最大的汽车媒体对比测试了不同汽车的触摸屏操作速度
结果 2005 年款物理按钮的沃尔沃操作速度最快，而上汽 MG Marvel R 最慢，比沃尔沃慢了 4 倍！
#设计入门
vibilagare.se/nyheter/physic…
测试项目有四个：加热座椅、调温度、除霜；调电台；重置行车电脑；把仪表盘调暗并关闭中央显示屏
司机先熟悉所有操作，然后在时速 110 公里的情况下尝试操作
最快的老款沃尔沃不足 10 秒就能完成操作，其间车子开出去 306 米
最慢的上汽 MG 需要 44.6 秒完成操作，操作完了、车子已开出 1.4 公里
司机先熟悉所有操作，然后在时速 110 公里的情况下尝试操作
最快的老款沃尔沃不足 10 秒就能完成操作，其间车子开出去 306 米
最慢的上汽 MG 需要 44.6 秒完成操作，操作完了、车子已开出 1.4 公里
由于语音控制不可靠，所以媒体没有测试语音控制功能
另外媒体还测试了司机操作时，需要向下看多大角度。观看角度越大，观看越困难，眼睛需要离开路面的时间越长，也就越不安全
最差的一款车，司机眼睛得向下看 56 度才能看到超大显示屏的底部菜单；而奔驰 GLB 设计更合理，眼睛向下看 20 度就行了
另外媒体还测试了司机操作时，需要向下看多大角度。观看角度越大，观看越困难，眼睛需要离开路面的时间越长，也就越不安全
最差的一款车，司机眼睛得向下看 56 度才能看到超大显示屏的底部菜单；而奔驰 GLB 设计更合理，眼睛向下看 20 度就行了
跟死鱼眼僵尸脸的 Metaverse 扎克伯格学什么？
脸皮厚
我做设计这么多年，围观了各种产品起落，跟踪了无数产品，接触了各种级别的创业者，也帮各种创业团队完善产品设计、品牌设计和 UX 设计，其中最厉害的创业者都有一个共性：
能把处于 0 - 1 之间的不成熟产品推向市场，然后快速改进
#设计入门
脸皮厚
我做设计这么多年，围观了各种产品起落，跟踪了无数产品，接触了各种级别的创业者，也帮各种创业团队完善产品设计、品牌设计和 UX 设计，其中最厉害的创业者都有一个共性：
能把处于 0 - 1 之间的不成熟产品推向市场，然后快速改进
#设计入门
很多程序员、销售出身的创业者都有类似特质，很多有远见的高人，也不介意尽快把 Metaverse 这么屎的产品拿出来，然后一边验证、一边优化、一边发展
设计师在这方面比较弱，总觉得设计还不够完美、还不能拿出来见人
其实对大多数设计而言，藏着掖着修改和公开地修改，除了设计师的自尊心，其他没差别
设计师在这方面比较弱，总觉得设计还不够完美、还不能拿出来见人
其实对大多数设计而言，藏着掖着修改和公开地修改，除了设计师的自尊心，其他没差别
“不完美”恰恰是一种强大的竞争手段
例如完美主义者代表之一的乔布斯，发布的第一代 iPhone 并不完美，他也没拖延上市
比如电池很弱还不能换电池，不支持拷贝黏贴，不支持后台任务（不能挂QQ），最神奇的是因为政策限制、国内版不能用 Wifi，要知道当时流量超贵、还没有 3G
例如完美主义者代表之一的乔布斯，发布的第一代 iPhone 并不完美，他也没拖延上市
比如电池很弱还不能换电池，不支持拷贝黏贴，不支持后台任务（不能挂QQ），最神奇的是因为政策限制、国内版不能用 Wifi，要知道当时流量超贵、还没有 3G
怎么从 UI 设计的角度系统地学习色彩
Adobe Spectrum 设计系统的作者，发布了“色彩和对比度”网站
这是一套关于色彩的互动指南、知识库，既有生理学、视觉、色彩空间这些偏科学的内容，也有设备、UI 和数据可视化设计等实际内容
用最系统的方式教你理解色彩
#设计入门
colorandcontrast.com/#/
Adobe Spectrum 设计系统的作者，发布了“色彩和对比度”网站
这是一套关于色彩的互动指南、知识库，既有生理学、视觉、色彩空间这些偏科学的内容，也有设备、UI 和数据可视化设计等实际内容
用最系统的方式教你理解色彩
#设计入门
colorandcontrast.com/#/
UI 设计师、UX 设计师或者人因工程师理解的“色彩”未必相同，经常从美学、心理学的色彩，一下跳到可用性、无障碍、包容性设计的色彩
“色彩和对比度”不但把这些零散的色彩知识全部集中了起来，而且在每个子页面，说明了该信息对 UI 设计的影响
部分页面可以直接调节参数，查看不同参数带来的变化
“色彩和对比度”不但把这些零散的色彩知识全部集中了起来，而且在每个子页面，说明了该信息对 UI 设计的影响
部分页面可以直接调节参数，查看不同参数带来的变化
以往就业行情比较好的时候，大公司的设计团队会组织设计师、工程师来翻译类似的文档、指南，最近的大环境下，估计就没人会来做翻译了
还是趁此机会，自己动手既补习色彩又补习英语吧😂
还是趁此机会，自己动手既补习色彩又补习英语吧😂
谷歌高管说，40% 的 Z 世代用户不再使用 Google 搜索和地图，而用 Tiktok 和 Instagram
1/
Z世代相当于国内说的 95 后、00后，没见过纸质地图的一代，在 UX 和产品设计角度，他们有些特征：
- 不喜欢输入关键词搜索
- 喜欢“视觉丰富的形式”
- 喜欢语音搜索
…
#设计入门
techcrunch.com/2022/07/12/goo…
1/
Z世代相当于国内说的 95 后、00后，没见过纸质地图的一代，在 UX 和产品设计角度，他们有些特征：
- 不喜欢输入关键词搜索
- 喜欢“视觉丰富的形式”
- 喜欢语音搜索
…
#设计入门
techcrunch.com/2022/07/12/goo…
2/
谷歌也在顺应改变，比如：
- 在谷歌地图里支持 AR 增强显示，改进 3D 地图、提供沉浸式 3D 地图
- 支持在 Google 里直接搜索 tiktok 和 instagram 视频
- 用人工智能分析视频，理解视频重点段落，用户搜索视频后可以直接跳转到重要段落
…
谷歌也在顺应改变，比如：
- 在谷歌地图里支持 AR 增强显示，改进 3D 地图、提供沉浸式 3D 地图
- 支持在 Google 里直接搜索 tiktok 和 instagram 视频
- 用人工智能分析视频，理解视频重点段落，用户搜索视频后可以直接跳转到重要段落
…
谷歌最担心的是用户搜索的入口变了，以前都是从 Google 开始搜索，现在 Google 老土了，更视觉、更互动的 Tiktok 和 IG 变成了搜索入口
其实也不奇怪，我也时不时从 Twitter 开始搜索
所以谷歌现在的努力，都是让 Google 更视觉、更互动，让它在年轻人心里重新性感起来🤷♂️
其实也不奇怪，我也时不时从 Twitter 开始搜索
所以谷歌现在的努力，都是让 Google 更视觉、更互动，让它在年轻人心里重新性感起来🤷♂️
为什么要用纯文字做设计？
设计稿类似下图，这里用文字描述了用户进行支付任务的故事，其中蓝字表示动作/行为，绿字表示动作的对象
这种脱离视觉设计模式的设计方法，比流程图更简单。优点是用户很容易理解设计、避免视觉设计带来的干扰、方便开发团队评估工作量
#设计入门 uxmag.com/articles/under…
设计稿类似下图，这里用文字描述了用户进行支付任务的故事，其中蓝字表示动作/行为，绿字表示动作的对象
这种脱离视觉设计模式的设计方法，比流程图更简单。优点是用户很容易理解设计、避免视觉设计带来的干扰、方便开发团队评估工作量
#设计入门 uxmag.com/articles/under…
作者是非常资深的 UX 设计师
我是第一次接触这种设计方法，原文把它叫 Narrative Design，直译是叙事型设计 / 说故事设计
按我的理解，之所以会有这种设计方法，主要是因为很多人看不懂流程图，比如参与设计前期调研的客户、用户，一些 PM 也不懂多泳道流程图
描述单一任务时，故事要比流程图更简单
我是第一次接触这种设计方法，原文把它叫 Narrative Design，直译是叙事型设计 / 说故事设计
按我的理解，之所以会有这种设计方法，主要是因为很多人看不懂流程图，比如参与设计前期调研的客户、用户，一些 PM 也不懂多泳道流程图
描述单一任务时，故事要比流程图更简单
另一个因素是 PM 会使用线框图
人处理图像和处理文字的方式差别很大，很多人把线框图当作 UI 稿，这会影响客户、用户和下游设计师、工程师的潜意识
很多初级 UI 设计师、UX 设计师缺乏判断力，往往不是做设计、而是在视觉上把 PM 的线框图美化一下
从这个角度说，故事也让设计师避免被线框图干扰
人处理图像和处理文字的方式差别很大，很多人把线框图当作 UI 稿，这会影响客户、用户和下游设计师、工程师的潜意识
很多初级 UI 设计师、UX 设计师缺乏判断力，往往不是做设计、而是在视觉上把 PM 的线框图美化一下
从这个角度说，故事也让设计师避免被线框图干扰
怎么发展自己的设计眼光？
分享两篇同一主题的文章
第一篇来自 facebook 的产品设计师，她是做具体设计的一线设计师
别只用 APP、要研究它们，把 APP 拆分开来分别研究。了解规则就可以打破规则，长期分析其他 APP，你将发展出产品思维，提高自己的设计能力
#设计入门
uxdesign.cc/how-to-develop…
分享两篇同一主题的文章
第一篇来自 facebook 的产品设计师，她是做具体设计的一线设计师
别只用 APP、要研究它们，把 APP 拆分开来分别研究。了解规则就可以打破规则，长期分析其他 APP，你将发展出产品思维，提高自己的设计能力
#设计入门
uxdesign.cc/how-to-develop…
怎么发展自己的设计眼光？
第二篇来自获奖的资深设计师，十几年经验的总监、导师视角
建议通过观察比你更有经验的人的工作来学习，即在设计之前就仔细观察市场上已有产品
用设计师分析性的眼光看待产品，不要下意识地还把自己当用户
掌握现有工艺之后再创新
#设计入门
uxdesign.cc/developing-an-…
第二篇来自获奖的资深设计师，十几年经验的总监、导师视角
建议通过观察比你更有经验的人的工作来学习，即在设计之前就仔细观察市场上已有产品
用设计师分析性的眼光看待产品，不要下意识地还把自己当用户
掌握现有工艺之后再创新
#设计入门
uxdesign.cc/developing-an-…
两位作者资历不同、视角也有差异，但都建议分析现有产品的设计
展开说几句。这里所说的分析设计，有几个要点：
一是客观
用户喜欢表达直觉，比如X好看、Y大一点就好了；设计爱好者、产品经理、开发工程师，也会提出貌似专业的设计建议，比如A公司处理Z功能的设计特别棒
但这些都是个人的主观感觉🤷♂️
展开说几句。这里所说的分析设计，有几个要点：
一是客观
用户喜欢表达直觉，比如X好看、Y大一点就好了；设计爱好者、产品经理、开发工程师，也会提出貌似专业的设计建议，比如A公司处理Z功能的设计特别棒
但这些都是个人的主观感觉🤷♂️
从零开始设计一套满足无障碍访问的调色板
作者是首席产品设计师
他们的数据可视化系统可用色彩太少、需要重新设计色彩系统
这个色彩系统既要避免干扰品牌色，又要能灵活地用于数据可视化，又要方便色盲和色弱用户使用，还要针对暗黑模式做调整
介绍了具体步骤
medium.com/wttj-tech/how-…
#设计入门
作者是首席产品设计师
他们的数据可视化系统可用色彩太少、需要重新设计色彩系统
这个色彩系统既要避免干扰品牌色，又要能灵活地用于数据可视化，又要方便色盲和色弱用户使用，还要针对暗黑模式做调整
介绍了具体步骤
medium.com/wttj-tech/how-…
#设计入门
作者所在公司做 HR 服务，本案例是现在设计系统里确定配色方案的典型案例
很多设计系统在确定配色方案时没有考虑数据可视化场景，只是把品牌色沿用为 UI 配色，用 UI 主配色计算出不同亮度的次要颜色（类似谷歌 material design 的做法），再加上少数辅助色…这样的配色方案单调，而难以分辨不同颜色
很多设计系统在确定配色方案时没有考虑数据可视化场景，只是把品牌色沿用为 UI 配色，用 UI 主配色计算出不同亮度的次要颜色（类似谷歌 material design 的做法），再加上少数辅助色…这样的配色方案单调，而难以分辨不同颜色
相比之下，作者描述的方案实用性更强，也保证了品牌色和 UI 色不互相干扰，满足无障碍访问、适应暗黑模式等“技术”要求
苹果为什么不看自己的设计指南？
Reddit 用户发现 Ventura 的问题：用 switch 代替了checkbox，这违背了苹果在 macOS 设计指南里写的：一般别用 switch 代替 checkbox
Switch 在视觉上比 checkbox 更重，最好用在比 checkbox 功能性更强的场合，比如用 switch 控制一组设置而不是单个设置
#设计入门
Reddit 用户发现 Ventura 的问题：用 switch 代替了checkbox，这违背了苹果在 macOS 设计指南里写的：一般别用 switch 代替 checkbox
Switch 在视觉上比 checkbox 更重，最好用在比 checkbox 功能性更强的场合，比如用 switch 控制一组设置而不是单个设置
#设计入门
reddit 的讨论：reddit.com/r/MacOS/commen…
关于 switch，苹果的设计指南其实只说了 how to 没说 why，而且苹果说 switch 的行为类似 checkbox 和 radio，这也有点奇怪
switch 来自于 iOS 年代，用在控制面板里，它更像一个开关而不是一个选项，比如切换普通模式、暗黑模式，一点 switch 就能切换成功
关于 switch，苹果的设计指南其实只说了 how to 没说 why，而且苹果说 switch 的行为类似 checkbox 和 radio，这也有点奇怪
switch 来自于 iOS 年代，用在控制面板里，它更像一个开关而不是一个选项，比如切换普通模式、暗黑模式，一点 switch 就能切换成功
而 checkbox 和 radio 最早来自表单界面，它们都是选项、一个勾选的控件，比如在“只看有头像的用户”上打勾，然后按“提交”按钮保存设置
苹果很早就在 OS 的设置里，取消了“保存”按钮，这时 checkbox 和 radio 也变成了非常轻量的开关控件
如果知道这些 why，也就理解苹果为什么不遵守自己的设计指南了
苹果很早就在 OS 的设置里，取消了“保存”按钮，这时 checkbox 和 radio 也变成了非常轻量的开关控件
如果知道这些 why，也就理解苹果为什么不遵守自己的设计指南了
还在寻找真实的 UI 控件和 UX/UI 设计模式灵感？这些地方可以找到好例子
下面这个 thread，整理了 12 个 UI 设计范例网站，它们都收集整理市面上有影响力的产品，展示这些产品真实的设计模式
这些 UI 设计都经过了市场验证，算是高级版的“大厂也是这么设计的”
#设计入门
下面这个 thread，整理了 12 个 UI 设计范例网站，它们都收集整理市面上有影响力的产品，展示这些产品真实的设计模式
这些 UI 设计都经过了市场验证，算是高级版的“大厂也是这么设计的”
#设计入门
前面那些设计模式、设计范例网站，罗列的 UI 设计都不是某种 idea。而是经过反复迭代的产品的一部分，它们背后往往都有庞大的专业设计团队。这些设计适于参考，适于市场调研和分析
相比之下，behance、dribbble 作品以设计师个人视角为主，包括大量作业、练习、飞机稿等等。这些设计更适于激发创意
相比之下，behance、dribbble 作品以设计师个人视角为主，包括大量作业、练习、飞机稿等等。这些设计更适于激发创意
怎么用音乐让飞机餐变得更美味
一直忘记分享“声音体验设计”里声音设计改变体验的故事
芬兰航空为航班上的菜式搭配了不同的音乐，用餐时听这些音乐可以改善口感😂
背后的基本原理是声音会影响人的味觉，比如飞机上的低频背景噪音，会削弱人对甜、咸的感觉，但会增强人对苦味和鲜味的感觉
#设计入门
一直忘记分享“声音体验设计”里声音设计改变体验的故事
芬兰航空为航班上的菜式搭配了不同的音乐，用餐时听这些音乐可以改善口感😂
背后的基本原理是声音会影响人的味觉，比如飞机上的低频背景噪音，会削弱人对甜、咸的感觉，但会增强人对苦味和鲜味的感觉
#设计入门
所以戴着主动降噪耳机、降低背噪，飞机餐的味道也会好点
芬兰航空的这个项目，获得了 2018 年的国际声音大奖。他们甚至针对中国乘客开发了小程序，给食物拍照，就能用人工智能自动适配最合适的就餐音乐
international-sound-awards.com/hear-the-taste/
btw：飞机巡航时机舱内气压较低，这会削弱人的嗅觉，让飞机餐更难吃🤷♂️
芬兰航空的这个项目，获得了 2018 年的国际声音大奖。他们甚至针对中国乘客开发了小程序，给食物拍照，就能用人工智能自动适配最合适的就餐音乐
international-sound-awards.com/hear-the-taste/
btw：飞机巡航时机舱内气压较低，这会削弱人的嗅觉，让飞机餐更难吃🤷♂️
怎么让吹风机的噪音减少 60%？
书里另一个例子是戴森售价 3000 元人民币的“超音速”吹风机
他们花了四年时间研究怎么减少噪音，其中的一个方法是减少电机的制造公差，以减少震动带来的噪音
因为公差实在太小，精密度达到了制造核武器的级别，所以必须获得英国政府的特别许可，才能使用高精密机床😎
书里另一个例子是戴森售价 3000 元人民币的“超音速”吹风机
他们花了四年时间研究怎么减少噪音，其中的一个方法是减少电机的制造公差，以减少震动带来的噪音
因为公差实在太小，精密度达到了制造核武器的级别，所以必须获得英国政府的特别许可，才能使用高精密机床😎
“取消”应该设计成按钮还是链接？
作者是荷兰 UX 设计顾问。他把 UI 里可点击控件粗略分为两类：
- 导航。如页面间跳转，通常以呈现为链接
- 动作。如下单支付，通常呈现为按钮
UI 中的“取消”介乎于导航和动作之间，类似于“退回”，所以表现形式应该是个链接
#设计入门
uxdesign.cc/cancel-as-a-bu…
作者是荷兰 UX 设计顾问。他把 UI 里可点击控件粗略分为两类：
- 导航。如页面间跳转，通常以呈现为链接
- 动作。如下单支付，通常呈现为按钮
UI 中的“取消”介乎于导航和动作之间，类似于“退回”，所以表现形式应该是个链接
#设计入门
uxdesign.cc/cancel-as-a-bu…
这篇文章其实很有价值
一般 UI 设计师做设计决策时，要么照搬设计模式，参考其他大厂设计；要么生搬硬套设计定律，格式塔、菲兹定律什么的；或者就是凭直觉、撞大运
如果像本文这样，从 UX 角度看 UI 设计，能找到其中的基本逻辑。以产品和使用的逻辑来设计 UI，UI 的外观和操作效果都会更理想
一般 UI 设计师做设计决策时，要么照搬设计模式，参考其他大厂设计；要么生搬硬套设计定律，格式塔、菲兹定律什么的；或者就是凭直觉、撞大运
如果像本文这样，从 UX 角度看 UI 设计，能找到其中的基本逻辑。以产品和使用的逻辑来设计 UI，UI 的外观和操作效果都会更理想
一般 UI 设计师都不知道怎么解释自己的设计意图
一方面本来就是靠直觉、自己也不知道为什么、的确没什么意图；另一方面很多 UI 设计师也不理解用户、同事的想法，设计思路不容易他们的共鸣
有时间还是得培养“抑制一下冲动、先想想为什么、然后再做设计”的好习惯
一方面本来就是靠直觉、自己也不知道为什么、的确没什么意图；另一方面很多 UI 设计师也不理解用户、同事的想法，设计思路不容易他们的共鸣
有时间还是得培养“抑制一下冲动、先想想为什么、然后再做设计”的好习惯
分享一个我做设计的神器：激光测距仪
比如我做品牌设计，要为客户设计图二那种展位（网图），我怎么确定展示区面积、展台摆放位置？我怎么知道动线走起来很舒服、不会撞到接待员？🤔
这时我会用激光测距仪，在办公室里量出和展位同样大小的空间，把它作为模拟展位、基于它做 1:1 的设计😂
#设计入门
比如我做品牌设计，要为客户设计图二那种展位（网图），我怎么确定展示区面积、展台摆放位置？我怎么知道动线走起来很舒服、不会撞到接待员？🤔
这时我会用激光测距仪，在办公室里量出和展位同样大小的空间，把它作为模拟展位、基于它做 1:1 的设计😂
#设计入门
既然可以创建 1:1 尺寸的模拟展位，当然也可以创造 1:1 大小的桌椅、1:1 大小的美女接待员…
我为了加快设计速度，都是用即时贴、不干胶带贴出物体的顶点，然后脑补一下那是方方正正的柜子、还是曲线流畅的姑娘
讲究一点的，也可以打印一个硬纸板姑娘，在模拟展位里尝试最佳效果
Anyway，要点是 1:1
我为了加快设计速度，都是用即时贴、不干胶带贴出物体的顶点，然后脑补一下那是方方正正的柜子、还是曲线流畅的姑娘
讲究一点的，也可以打印一个硬纸板姑娘，在模拟展位里尝试最佳效果
Anyway，要点是 1:1
我都要求设计师必须做 1:1 的、真实的设计
比如设计 UI，用 Figma 的 Mirror、在手机上实时查看真实效果
比如设计品牌 IP 的杯子，打印出来贴在杯子上看真实效果
比如设计两侧楼高的大广告牌，那就拍下广告牌的照片，把设计 PS 进去看效果
原理很简单：实际效果肯定不是你在设计软件里脑补的那样
比如设计 UI，用 Figma 的 Mirror、在手机上实时查看真实效果
比如设计品牌 IP 的杯子，打印出来贴在杯子上看真实效果
比如设计两侧楼高的大广告牌，那就拍下广告牌的照片，把设计 PS 进去看效果
原理很简单：实际效果肯定不是你在设计软件里脑补的那样
车载触摸屏，点击区域需要多大？
作者是德国设计师，他在车子中控台上固定一个 iPad，开车在柏林大街上溜达，请朋友坐副驾位上测试。结论：
- 有效点击区最小 80x80 px，最好 100x100
- 120x120 提升有效
- 如果够不着，多大都没戏
- 最大操作障碍是车子太摇晃
#设计入门
medium.com/snapp-automoti…
作者是德国设计师，他在车子中控台上固定一个 iPad，开车在柏林大街上溜达，请朋友坐副驾位上测试。结论：
- 有效点击区最小 80x80 px，最好 100x100
- 120x120 提升有效
- 如果够不着，多大都没戏
- 最大操作障碍是车子太摇晃
#设计入门
medium.com/snapp-automoti…
上述测试使用了 iPad 和自制的原型，出于显而易见的原因，司机必须专心开车，测试只能交给乘客来操作
由此不难想象，如果司机本人做这个测试，结果会很不一样。期待他的后续测试吧😂
这位设计师以前设计和执行过另一个测试，测试滑动/swipe 和点击，哪种操作对司机的干扰更小
由此不难想象，如果司机本人做这个测试，结果会很不一样。期待他的后续测试吧😂
这位设计师以前设计和执行过另一个测试，测试滑动/swipe 和点击，哪种操作对司机的干扰更小
忘说了，iOS HIG 建议的最小点击区域是 44x44 px，多年来一直没调整
实际产品设计中，我们一般会更关注按钮之间的间距，现在手机屏幕大、点不中的情况还好，但按钮挨着按钮导致点错的情况更多了
实际产品设计中，我们一般会更关注按钮之间的间距，现在手机屏幕大、点不中的情况还好，但按钮挨着按钮导致点错的情况更多了
