New Form Factors Design Sprint Playbook

通常起兴都是“然并卵”的一堆废话,那也要说。兲朝有 e-Greatwall 可以理解,但连一些纯设计纯技术类的网址也屏蔽,真是大局域网里设计/技术人员的悲哀。谷歌不听话,于是孩子、水、盆全部挡出去,岂不知多少由谷歌统领业界的设计规范、编程规范和前沿的理论理念,墙内的臣民都不得而知?

现在做网站,多数已经是手机版为先了,电脑版甚至可有可无。不管 Native App 和 Web App 怎么争论,HTML5 已经肆虐在各个为快速迭代开发而疯狂加班的团队中。快速的迭代并不意味着只是一味的片面的“快”就好,再快也要有章法。

下面转发谷歌的 Design Sprint Playbook

design-sprint

What is a design sprint?
Google Ventures developed an intensive 5-day Product Design Sprint to help their portfolio companies get started, get unblocked, and develop new directions for their products and services (see goo.gl/v9hnvG). Their design sprints are inspired by the iterative, time-bounded, and user-focused aspects of Agile Development and Design Thinking.

We adapted their methodology to teach our design principles for new form factors and enable participants to practice them immediately. In just under 3 hours, we cover each of the stages that Google Ventures practiced over the course of 5 days: Understand and Define, Diverge, Decide, Prototype, and Validate.

Why a design sprint?
Designing for any new form factor is hard. With new wearable form factors like Android Wear, you aren’t scaling down your mobile UI and porting it to a smaller screen; you are designing new paradigms for computing. Each of these devices introduce a new way for humans to interact with technology, and a new way for technology to interact with and respond to the user’s world.

After our own experiences using and building for new form factors we developed design principles and UX best practices for development. We use Design Sprints to teach these design principles in a hands-on, collaborative way.

What happens at a design sprint?
This sprint is simply a series of steps that alternately flare and focus. We’ll start by expanding our understanding of the space by learning the design philosophy of this new form factor. Then, we’ll focus on a specific challenge and user. After that, we’ll explore all the possible solutions to this problem in the diverge step; this is the brainstorming phase. We’ll focus again by deciding on one solution to explore in depth. We’ll then prototype ways that idea can manifest. Finally, we’ll validate the design by presenting one manifestation to a larger group and get feedback.

For more, download the below PDF files:
http://liuriting.com/doc/Google-DesignSprint-NewFormFactors.pdf (0.5M)
http://liuriting.com/doc/Google-DesignSprintMethods.pdf
(10M)

Enjoy :)

双 11 未到,胜负已出 Winner of 11.11 Shopping War

眼看 11 月 11 日就要到了,这算是无节假日的 11 月唯一的一个节日了。电商大佬们想尽办法弄出点摩擦和声响,用抢注双十一商标的噱头,拉拢着视线。快递公司们盘算着,双 十一期间会有五亿件快递,每件涨一分钱,那就…… 当当也赶紧更换 Logo 以摆脱书生气。每一个电商的首页都默默地吆喝着自己的货,有的井然有序,有的绚丽多彩,而有的却吆喝得不那么漂亮。大促打响之前,单从淘宝京东苏宁当当的首页 UI 上,基本上就看出了胜负。

导航的淡化与回归

顶部横向导航的在淘宝首页已经淡化成无底色的一组链接,原本夺目的橙色让给了各个图标和按钮,更绚丽的色彩留给了轮播图和各品牌 Logo。左侧的纵向导航冠以“淘宝特色服务”,以主题市场、特色购物和优惠促销分为三块,原来鼠标划过弹出大片的子分类消失了,而是点击“更多”跳转锚点到细类区块。很多消费者进入首页,多数习惯是一边滚动一边看,而弹出菜单需要鼠标划过才能显示,这样就增加了鼠标来回的路线和页面滚动时停顿的次数,同时触屏设备没有鼠标划过效果。看似淘宝的导航不酷了,但赢得的是更简单更直观的浏览体验。

其它电商依然保留头部导航的底色,但百分百通栏宽度的做法逐渐弃用。一是,在超大屏下看,导航两侧会显得异常突兀;二是,某些浮动元素叠加时,视觉混乱。

nav-comparison

首页图片的用量

淘宝最少,京东其次,再次苏宁和当当。进入当当首页,从第二屏开始一直到第七、八屏,扑面而来的是满屏的标注着“抢抢抢”(抢购)和“杀杀杀”(秒杀)的商品图片。有人看着热闹,有人看了想逃。恍惚间,这是一张电子版的促销单页吗?我们理解当当急切地表达“我们不光卖书”的心情,但请稍稍高大上一些。从 1F 到 11F,图片的布局样式多达五六种,用户的视觉惯性不断地被调整着,让人很难沉下心连贯地看下去。苏宁首页用的图片也不少,但每个主题区块的布局是协调一致的,视觉的重点始终放在左侧和上部,用户滚动到下一屏后,可以很快地定位哪些是主推。

screenshot-homepage-taobaoscreenshot-homepage-jdscreenshot-homepage-suningscreenshot-homepage-dangdang

整体布局的主线

不得不再提黄金分割点。我们拍照片的时候,有三分法,焦点的位置基本就是黄金分割点的位置,这样拍出的照片才有文艺范儿。放到网页的布局中,从哪里做大的分割才能恰到好处,窄处不挤,宽处不疏?淘宝首页细类区块的中轴线选在了整个页面宽度的黄金分割点处,苏宁首页每类产品区块中的促销大图也放在了整个页面宽度的黄金分割点处。而京东放在了正中,当当似乎没有主线。

screenshot-golden-ratio-taobaoscreenshot-golden-ratio-suning

文字的措词与排版

淘宝首页那么多字,为什么不乱,反倒能很顺畅地看下去?除了自上而下对齐之外,就是四字措词法。引领每个细类的类名基本都是四个字,符合国人的措词习惯朗朗上口,视觉上整齐划一。仔细品味,如果有少于四个字的措词,通常都是字数少的门类在上,这样整体稳重,不会头重脚轻,也不会长长短短参差不齐。苏宁首页的图和字都不少,为什么也不乱呢?因为有规律:图片都在右下,文字都在左上,同行顶对齐,同列左对齐。好像整个商场所有的价格标签,位置统一,商品摆放统一。浏览者看起来自然不累。反观当当首页,单单一个折扣的标注就已经七零八落了,更不用提各元素的内边距、外边距、行距和字间距了。

typography-taobao

苏宁首页(部分)
typography-suning

当当首页(部分)
typography-dangdang

细节决定胜负,胜负已出。淘宝不愧是老大;京东还需继续努力,东哥不要整日泡奶茶;苏宁,有板有眼,下了功夫,所以 O2O 大有起色;而当当,不要再像新 Logo 那样萌呆萌呆的了,赶紧觉醒。

从 Google Inbox 窥探 Material Design 的应用 Insights into Material Design from Google Inbox

终于得以安装体验堪称替代 Gmail 的 Google Inbox。从抓屏的几个图,可以深刻感受到 Material Design 的气息。

screenshot-google-inbox-01screenshot-google-inbox-02screenshot-google-inbox-03screenshot-google-inbox-04screenshot-google-inbox-05screenshot-google-inbox-06screenshot-google-inbox-07screenshot-google-inbox-08

黄金分割点

进入 App 的首屏,简洁到了无法再去除任何一个元素的地步。用黄金分割点验证下,果不其然,视觉的重心正好落在 Logo 和 Inbox 之间。底部的 SIGN IN 链接,没有强化成按钮的外观,只用非常浅的灰色线条做间隔和蓝色字体做提示,有突出而未喧宾夺主。

screenshot-google-inbox-insight-01

视觉的主线

手机屏幕很小,如何充分利用每一个空间展现更多的内容,成为对手机 App UI 设计师的挑战。而 Google Inbox 的很多界面却大块的留白,比如菜单图标和文字之间会多出一些空白,而不是紧靠在以图标为中心的矩形边缘。这样做的目的,除了与下一屏(列表页)保持视觉主线位置的一致之外,我个人的理解是,为拼写更长的语言而考虑,法语、俄语、西班牙语、希腊语等的单词较英语会长很多,如果文字过于向左靠齐图标,整屏的左侧就会显得拥挤和沉重,而多出一些间隔,图文分离相对远些,便于识别阅读的同时,视觉上亦达到一定的平衡。

screenshot-google-inbox-insight-03screenshot-google-inbox-insight-02

阴影的层次

从 iOS 绚丽的拟物化设计,到后来走向另一个极端的扁平化设计,Material Design 走在了两者之间,靠扁平化设计近一些的位置。纯粹的扁平化风格,一定程度上让元素之间失去了逻辑上的层次。Google Inbox 中通过阴影来强调时空感:顶部导航的阴影告诉用户这是一级目录,下面提示信息的阴影告诉用户这是浮动于主体内容之上的警示,而每个按时间聚合的邮件区块底部的阴影告诉用户向下是更旧的信息。

screenshot-google-inbox-09screenshot-google-inbox-10

动画的逻辑

动画的运用在 Google Inbox 绝对不是为了酷。当用户要查看详细内容时,屏幕从点击处上下滑动分开,好像撕开一个信封。看完返回时,上下两半屏幕动态返回合并,又回到用户刚刚点击时的位置。这种体验让用户有很好的方位感,功能虽多但 App 的主线始终围绕着 Inbox 里的邮件列表。

Material Design 强调以内容为核心,如无必要,勿增实体。设计的本质回归到内容本身,文字即设计中的元素,围绕文字的设计一定程度上代表了整个 App 的行业特色和格调气质,字体大小、颜色深浅的变化代表了内容的层次级别和主次重要性。留白,给用户足够的视觉上的 comfort zone。阴影,让区块和功能在时间和空间上有了关联。而动画,则成为移动版的“主/详细”页别有洞天的切换方式。

谷歌“本质设计”规范的图标免费下载 Free Material Design Icons

从前段时间谷歌和 Adobe 同时发布近百种语言的免费“思源字体” 我们就应感知到点什么。字体设计得不瘟不火,比通常的系统中文字体要胖有质感,比微软的雅黑要瘦,多些空灵,总之做设计的人不排斥,就是相当不错的了。

noto-free-font.png

谷歌岂止于此?从“本质设计 Material Design” 规范的推广,我们真真切切感受到谷歌要统一和引领新设计趋势的野心。在这个规范中,我们也真真切切感受到谷歌的努力和细节的把控。哪怕一个小小的图标,最好也按照我设计的来。

Material Design Icons 的简介中,我们甚至可以看到 iOS 字样,建议 iOS App 的开发者也来用这套图标:

Today, Google Design are open-sourcing 750 glyphs as part of the Material Design system icons pack. The system icons contain icons commonly used across different apps, such as icons used for media playback, communication, content editing, connectivity, and so on. They’re equally useful when building for the web, Android or iOS.

Action Icons
material-design-icons-action

Device Icons
material-design-icons-device

Image Icons
material-design-icons-image

免费下载地址:https://github.com/google/material-design-icons/releases/download/1.0.0/material-design-icons-1.0.0.zip

是不是感觉有点太国际范儿了,需要找点中国特色的?当然有,从阿里妈妈这里 www.iconfont.cn 免费下载中国系的类“本质设计”的图标吧。虽然有购物车,但不收费。

互联网金融 App 的免费 PSD 模板 UI Kit of Finance App

Finance_App_UI_Kit

互联网金融可谓热门,手机 App 相关的十个招聘里有九个都是招互联网金融方面的。小小的手机界面如何通过布局和颜色给用户留下简单专业安全的印象,成为首要的考虑。

这里为大家找到的一套免费的互联网金融 App 的 PSD 模板,颜色搭配专业而不沉闷,图标活泼而不花俏,重点突出,层次分明。值得研习一番 :)

点这里下载:Finance_App_UI_Kit (解压密码:www.LiuRiting.com)

source: https://dribbble.com/shots/1497501-Finance-app-UI-Kit-Freebies

iPhone 6 和 iPhone 6 Plus 免费 PSD 原型图 Free iPhone 6 & plus Mockup PSD

iPhone6-mockup

这年头,谈互联网,必移动互联。谈手机,必 iPhone 6 噗辣死。手机 App 的发布怎能缺少 iPhone 6 原型图的包装?下面就是奉献给设计师们的 19 款免费的 PSD 图:

http://yadi.by/en/cream/iPhone6

https://dribbble.com/shots/1722842-iPhone-6-Plus-mock-up-free-sketch

https://dribbble.com/shots/1722311-iPhone-6-6-B-W-Freebies

http://www.designbolts.com/2014/09/11/free-vector-apple-iphone-6-mockup-in-ai-eps-format/

https://dribbble.com/shots/1722139-Freebie-Vector-iPhone-6-Mockup

https://dribbble.com/shots/1722076-Free-iPhone-6-4-7-inch-Template-PSD

https://dribbble.com/shots/1721575-iPhone-6-6-Plus

http://marvelapp.github.io/devices.css/ (这个赞!)

https://dribbble.com/shots/1720249-iPhone-6-6-Plus-Wireframe-sketch-Freebie

https://dribbble.com/shots/1720186-iPhone-6-Scalable-Mockups-3-4

https://dribbble.com/shots/1719983-iPhone-6-6-Plus-sketch-Freebie

https://dribbble.com/shots/1719876-iPhone-6-for-Sketch

https://dribbble.com/shots/1719471-Iphone-6-free-mock-up

https://dribbble.com/shots/1717398-iPhone-6-Scalable-Mockups-4-7

https://dribbble.com/shots/1719940-iPhone-6-Free-PSD-Mockup

https://dribbble.com/shots/1718744-iPhone-6-Flat-Sketch-Freebie-AI

https://www.behance.net/gallery/19654953/iPhone-6-PSD-Mockup

https://dribbble.com/shots/1718642-iPhone-6-Mock-Up-PSD

https://dribbble.com/shots/1719093-Mini-iPhone-6-free-PSD

做设计的小伙伴们,赶紧下载用到手机 UI Mockup 上吧,保证逼格飙升 :)

(如果上面某些链接打不开,请翻墙)