给互联网设计师和设计爱好者的简报分享

2019-03-01 本文已影响1476人 Susurratescape

这是 Facebook 工程师 Alex Kotliarskyi 和他两位小伙伴联合做的小游戏。 Alex 发现并不是所有的工程师和设计师都会注意到设计细节，但是他相信设计细节可以带来巨大的影响，带着这样的信念做出这款非常考眼力的小测试。

小游戏分为三个等级：简单→中等→困难，从字体、字重、配色、对齐等各种细节考验。困难模式会有1像素的视觉偏差，非常考验设计师的眼力，设计师可以好好玩一玩。

国外有不少编程学习的网站例如codecademy、Coursera，国内也有网易云课堂，不过编程和英文是两个不可分割的部分，有能力的话尽量还是纯英文学习比较好。

如果你想学习基础的前端知识，那只要你把这个 App 打通关就行。 Lrn中的英文也比较简单，不用担心看不懂。通勤途中点几下就能轻轻松松学习编程。

Google UX 总监做了个美其名曰「产品设计三板斧」的文档「Product Excellence」，介绍了这三把斧子：

针对的：集中于目标用户的特定关键需求

必要的：解决问题所需的功能集

卓越的：特别注意那些大大超过预期的关键优势

直观的：即使是第一次使用，也让用户感觉熟悉且易于理解，容易上手成为「专家」

和谐的：与其他工具无缝集成到人们的日常生活中

尊重的：留意用户的时间、期望、隐私

强健的：有典型的可靠性、可访问性和响应性

精心的：每一个细节都是有意为之的，对整体都有贡献

美妙的：让人愉悦并建立自信的现代美学

没读这篇文章之前，相信你可能不知道 Chrome 有超过20,000种交互使用场景、使用了超过95种不同的灰色阴影、在4种设计规范（谷歌规范、Material、Android UI、Chrome 品牌元素）中保持平衡。

去年8月份 Chrome 迎来了自己10周岁生日，与此同时 Google 的设计师们也完成了对 Chrome 的重新设计，也给我们带来这篇文章，分享背后的设计故事，希望大家可以从中学习。

主要有以下几个看点：

Chrome 的设计原则：Content, not 'Chrome'

为速度而设计

为了让你更快地进行认知处理，删除没用的视觉元素

打破间距规范，平衡 icon 与热区

搜索地址栏的「半圆矩形形状」&「灰色底色」背后的设计支撑

为了巧妙地强化 Chrome 品牌，设计师从 Google、Chrome、Android logo 中抽象出「圆形」，再结合品牌形状、Frank Stella 赛道系列的速度暗示，最终确定输入框的形状是「半圆矩形」

输入框采用描边的方法会导致信息层级不明显、隐身模式不太兼容的问题；采用投影的效果，会有沉重的偏离中心的感觉；如果干脆什么都不要，那重要的 URL 信息就像是随意放置的样子，淹没在大量信息中

采用底色的方式就可以解决信息层级、各种模式兼容的问题，而用灰色则是综合考量浏览效率、可读性、相关视觉规范而决定的