做有章可循的设计

最近几个大公司相继换 Logo 了。而吸引我的除了 Logo 本身,更多的是它们背后的故事。讲故事是一种很好的传达方式,代入感强,能在梳理思考过程的同时,也让我们更容易理解新设计的由来。刚巧最近我们也在做一些新的设计尝试,一个中心思想就是“让设计有章可循”,有了主线索,再做其他的延展就会自然而然,设计师好下手,做出来的东西用户也看得明白,不用每次都解释新概念。

我把近期有代表性的“故事”整理在一起,作为学习资料,我的想法随后再逐渐展开。

Google

google

能够适配更多终端是此次改变设计元素的重要思想之一,从原来有衬线的印刷体,变得圆润,同时也显得更年轻了一些。个人认为 Dots 的设计最为巧妙,很好的利用了那几个圆点的变化,来表达各种交互状态。

查看原文:Evolving the Google Identity


Medium

1-L4saF6QgK44lr8YR_l4c0A

我挺喜欢这组发散的。设计探索就是这样,得放的开,有理由的放。哪怕没有最终被用到 Logo 上,也产生出许多有关联的想法,它们用于广告、海报、运营、周边等等,从这个过程里我们也看到了很多可能。

查看原文:The Story Behind Medium’s New Logo


500px

500px

当下最高质量的图片社区非 500px 莫属,最近也更新了 Logotype 和 Mark 。通过对 500px 文字的变形,他们把它变成了取景器里的对焦过程。一切跟摄影相关,这就是主线。

查看原文:Meet the new 500px


Starbucks

starbucks-iconography

这套专为 Android 设计的 icon 利用了原生素材,在此基础上融入星巴克最有标识性的元素来贯穿:星星和围裙,同时App的用色也以暖黑和暖灰来烘托氛围。

查看原文:Starbucks Android Material Design (这篇是讲设计方法的)


从现在开始,管理你的设计,别让看似亮点繁多的创意和功能,毁了你的产品设计。让设计有章可循,对设计师是好事,对用户而言更是。

响应式Web设计:50实例与实践

Responsive Web Design: 50 Examples and Best Practices
Designmodo.com版权所有
作者:Adrian
译者:UCD翻译小组波希米亚
原文地址:http://designmodo.com/responsive-design-examples/

译者序:当我看到这篇文章的时候,还好发布的时间不算太早,主题很对我的胃口,因为我的Blog已经这么做了。但这篇总结的很全面,提到了一个新的名词“响应式Web设计”,作为Web内容应该去更加灵活的呈现在不同的终端上。这让我想起了之前写的一篇文章《未来我们只需要浏览器》,随着智能手机和各种Pad的发展,内容终端终究会发生改变,Web展现需要去适应这种趋势,并带来优秀的阅读体验。

响 应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化。再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏。当然,让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了。这种特殊的设计形式就被成为“响应式Web设计”。

响应式Web设计与传统的设计方式截然不同,开发人员(特别是新手)必须要理解它的优势和弊端。这篇文章正是为大家揭示一些实例的。(这里介绍一个叫“Media Queries”的网站,里面介绍了更多实例和演示)

数据表格是响应式Web设计的经典使用情景,实现它的想法与传统的设计理念有很大不同。数据表格默认很宽,当你要查看它全貌时,你得缩小表格,但这时字会变 的很小,很难去阅读。然而当你想看清楚上面的字时,就不得不再把表格放大,这时要查看完整表格就得横滚加纵滚。这么阅读表格也太KB了。或许重新格式化表格或以饼图形式展现是种解决方案。再不然,你可以弄一个迷你图,即使在窄屏幕里它也能适应。

更多

用户体验案例研究:设计微博应用

UX Case Study: Designing a user-focused web app
Brian Cray版权所有
作者:Brian Cray
译者:UCD翻译小组波希米亚
原文地址: http://briancray.com/2010/01/26/ux-case-study-designing-user-focused-web-app/

这篇文章记录了Nearby Tweets改版的完整设计过程。Web开发者和商家期望借此获取些灵感。用户则更有兴趣找寻这些设计中所蕴藏的东西。当然,我希望能在文章结尾了解到你的想法和反馈!OK,我们开始吧。

故事的起因是这样地…

这一切开始于对Nearby Tweets的第一次迭代,目的是让当地的人与人、商家与商家之间能够通过一种简单的形式相互取得联系。

但产品开发向来不可能十全十美,只有不断迭代——产品好坏取决于用户认可。因此,借Uservoice的机会得尽我所能快地跟用户接触。通过Uservoice,用户可以针对Nearby Tweets的改版进行投票。

更多

用Google建立自己的CDN

似乎性能优化永远都是属于门户网站的事儿,与咱们小民无关?!
这种想法在网络技术高速发展的今天,似乎有点落伍了。如果你是专业从事互联网的技术人员,甚至是负责优化公司网站的专家,自己的小站也别忘记适当地优化一下.

好像只有雅虎的人平时谈论这个问题比较多,是因为雅虎发明了YSlow和一套检验网站性能的机制?如果你使用的是Firefox,可以安装YSlow,来查看自己网站的性能,根据提示进行优化.总结一下,作为个站,可以做的优化工作大概这么几个:

  1. 使用更少的HTTP请求;
  2. 使用CDN
  3. 把CSS放在页面顶部(放<head>里)
  4. 把JS放在页面底部(紧跟着放</body>前就行)

更多

一个提高了近10%转化率的改进

今天看了篇关于Web Form Design的成功案例,虽然讲的事情很简单,但总结了一些方法,翻译过来做个原始积累吧,以后写东西举例子时也好有个典型可以引用。下面是译文:

如果回顾一下Sampa的注册表单,到现在它已经经历过4-5个不同的版本了。一度我们要询问您15个问题。在那之后,我们先是与当地的一位用户体验专家对此进行一些简化,而后又通过与一家波特兰用户体验公司的合作,将其变的更简,现在我们只剩8个填写项了:

  1. 姓名
  2. 电子邮箱
  3. 确认电子邮箱
  4. 密码
  5. 确认密码
  6. 同意使用条例
  7. 你希望的网站地址(形如:b3inside.sampa.com
  8. CAPTCHA (挑战码)

先来看下这个网站的注册表单截图:

更多