断点延线

每周文章推荐 / chrome、动效速度、纪念碑谷

整合一下每周看到的觉得有意思的内容，UI/UX相关。

可能包括蛮旧的文章。

---

每周整理 - 0923

#### 文章

Unboxing Chrome

https://medium.com/@san_toki/unboxing-chrome-f6af7b8161a2

对chrome的omnibox（地址输入栏）进行redesign。

过程严谨、考究。与品牌相联系是一个亮点。

1. 需求出发：为什么需要redesign？

Because hidden inside this box was the world’s most sophisticated, secure, search and rendering engine for the web.

改变全世界认为“这样就行”的看法。可以更好。

2. omnnibox的历史发展：text entry box -> address bar -> omnibox；功能一步步细化。

In fact, our omnibox was designed to be invisible to honor our core value, “content, not chrome.” A principle I liked so much, it’s actually one of the reasons I joined. 

专注于内容本身而不是浏览器

to protect the sacred space between the user and the content — not to seek attention.  

不吸引注意力

3. 尝试与场景测试：多达2000多种，不同的模式/主题/屏幕

4. 统一并尽量减少文字颜色数

5. 出第一版样式表（v1 sticker sheet）

6. 加速考虑视觉方案

7. 与品牌相联系 - 决定使用圆头矩形

关联内容：

• https://www.blog.google/products/chrome/redesigning-chrome-interview-chromes-lead-designer/  

  chrome redesign 访谈

• https://dev.chromium.org/user-experience

  更多关于chromium的内容

• https://www.blog.google/products/chrome/chrome-dino/ chrome 

  小恐龙的相关访谈

The ultimate guide to proper use of animation in UX

https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9

1. 持续时间与速度

• PC端交互动效的速度处于200到500毫秒间

• 移动端速度200-300ms

• 穿戴式设备速度150-200ms

• 列表项的出现持续20-25ms

2. 不同缓动（ease）的使用场景

3. 交互动效的编排顺序：

• 列表次序，表格对角线出现

• 次级动效不增加界面焦点（在主动效结束后才开始）

• 非等比例缩放时，路径弧线；等比例缩放时，路径直线

• 对于占满某方向-展开的动效，应先占满再展开

• 模块移动时，同级时不互相重叠；需要重叠时需要层级差

#### 没做笔记的文章(?)

• https://www.uber.design/case-studies/rebrand-2018 

  Uber rebrand

• https://medium.muz.li/the-surprising-inspiration-behind-monument-valleys-most-beautiful-levels-c2e8d8f3810e

  纪念碑谷设计灵感来源

• https://medium.muz.li/designing-notifications-for-applications-3cad56fecf96

  通知的设计

#### 工具

• https://www.ikonate.com/#content 

  一套在线的线性icon，可调描边方式/宽度

#### 灵感

• https://roppongi15th.estnation.co.jp/ 

  鼠标追踪动效超有意思的

• https://www.eventstudio.jp/ 

  内容出现的动效超级可爱的

• https://loveiko.com/ 

  使用了3D物件