工作和生活中不缺乏美和创意,正因为小而美的设计,撑起丰富多彩的业务场景,阿里巴巴1688UED2014全年外观专利66件,发明专利22件,我们致力做有情怀的设计,洞见于新,巧思于行!

触动人心的设计

1、做设计为什么还需要看数据?

很多设计师从来不看数据,要么是因为没有数据可看,要么是根本不想看,但是也一样把设计做的很好啊!设计本来就是有感性的一面,为什么非得要和数据扯上关系呢?我们不妨先看看设计的本质是什么。设计不同于纯粹的艺术,艺术源于艺术家对现实的观察和思考,以及对这种观察和思考的自我表达;设计天生就是为别人在做事情,纵然同样需要观察和思考,但是这种观察和思考不是为了表现设计师的自我,而是为了更好地服务于某个用户群,因而设计师了解用户就变得非常重要。尤其是要了解用户的目标、行为、态度等相关的情况,我们这里说的数据其实也就是对用户的目标、行为、态度等情况的量化,因此,通过对这些数据的分析,我们可以更好地挖掘用户的需求,进而为用户提供更好地体验。

简单点说,设计是服务于用户的,了解用户才能更好地做设计,数据是了解用户的一种途径。

2、数据在项目中的作用有哪些?

要了解这个作用,我们先回到设计师看数据的主要场景,总结起来无外乎两类:一个是因为项目的需求,通过数据的论证,让设计走得更从容,有理有据,而不是设计师自己的YY;另外一个是日常监测的需求,自己做的产品,总要知道大概有多少人在用,使用的情况如何,用户的行为和预期是否一致。也就是说要了解你的设计被使用的情况,否则你怎么知道设计的好不好,是不是达到了设计目标,是不是真的帮助用户解决了问题。

先来分析下项目中看数据的场景。几乎整个设计的过程都可能会用到数据,概括起来可以把这个过程切分成三部分:

设计前数据帮你发现问题:所有设计开始之前的研究和分析,都是为了更明确用户的需求,明确为什么要做这个设计?从业务的角度来看,这个产品对公司有何价值,此次设计要达到什么目的;从用户的角度来看,这个产品对用户有何价值,此次设计要为用户解决什么问题;在了解业务诉求和用户诉求的过程中,我们难免要用到数据,这个阶段,数据的作用就是为了“发现问题”,看看设计可以解决什么问题,从而更佳明确设计的目标。

当然具体的工作中,多数设计师都比较纠结,既要考虑业务诉求,又要考虑用户诉求,如果这两者不能完全匹配的时候,我们该咋办,是两者的相加吗?还是我们就只考虑用户诉求,对业务诉求看看就行了。我个人的理解是,现实工作中我们都不是在追求最完美的设计,更多的是在做平衡,如果是一个用户型的产品,比如偏向于为用户提供某个功能的平台,本身就是完全从用户的角度出发,通过为用户提供功能帮助用户解决问题的,应该向用户诉求靠拢多一些;如果是一个商业型的产品,比如偏向于为用户提供某些内容的平台,那么在为用户提供主动查找的入口的同时,可以适度的向着业务发展需求倾斜,做适度的业务层面的引导;当然这个也不是绝对的,往往同一个平台,同一个产品,在不同的发展阶段也有不同的需求,如果是一个全新的产品,业务的生存就变得格外重要,这个时候设计应该多一些考虑业务诉求,先帮助业务生存,否则,这个产品都要挂了,还怎么为用户提供服务呢?

当然,好的设计师总是能在业务和用户之间找到巧妙的平衡,找到二者的交集,举个例子,假如这个产品这个阶段就是要做用户规模,而用户诉求是享受个性化的服务,看似完全不关的两个诉求,实际上我们完全可以通过更好的个性化服务提升用户满意度,获得好的用户口碑,再间接地借助用户口碑提升产品的用户规模,这二者之间并不是完全的不相干,更多的时候看能否找到他们的关联性,抓住阶段性的设计目标。

通过一个具体的例子看看如何利用数据来发现问题?数据代表的是用户的目标、行为和态度,但是单独看一个数字是没办法发现问题的,数据的对比是最简单有效地手段。我们知道交易关系买家所产生的交易对1688网站有着非常重要的意义,我们想提升交易关系型买家的交易体验,但是不知道从何入手,因此做了大量的数据分析。交易关系买家是通过什么方式找到老卖家?不同路径的转化率如何?不同用户查找方式与转化率有什么差异?

首先,通过用户群的细分,我们发现,交易关系买家通过搜索支付订单转化率是搜索整体支付订单转化率的2倍。因此,在搜索结果中增加老买 家标签,方便找到老卖家。

此外,我们还发现,普通会员、1-2星会员等级,是提升交易关系交易的关键用户。 通过以上的数据分析,我们找到了目前主要的一些问题,围绕着这些问题,后续做了优化方案。

设计中数据帮你判断思路:因为设计师的个人经验不同,创造性思维不同,因此不同的设计师面对同一个问题,解决方案也很可能差别较大,即便是同一个设计师也会想到不同的解决方案,到底哪个方案更合适,有些情况下数据可以给你参考意见,为你提供“判断思路”,协助你做决策;条条大路通罗马,但是哪一条路才是当前最合适的呢?

通过一个具体的例子看看如何利用数据来判断思路?有一个批发类的电商网站(1688.com)的频道首页(ye.1688.com),我们发现用户的转化率很低,就去研究了数据,然后结合了对典型用户做的用户访谈的结论,最后发现转化率底的原因其实很简单,这个频道的首页入口主要是来源于整个网站的首页,而整个网站的首页是一个全行业品类的页面,用户如果是女装行业的买家,她从一个全品类的首页点击一个链接进入另一个全品类的页面,再艰难的找到女装这个类目,再点击进入List页面查看商品,这个路径是非常深的,那么怎么解决这个问题呢?那就是要避免做女装的用户从网站首页进入这个频道之后还要再次选择女装类目,才能看到女装的商品!

解决这个问题的思路有哪些?可以在网站首页增加入口,让用户直接点击女装类目进入频道首页,给用户展示女装商品;可以在用户进入频道首页之后,根据行业偏好的个性化数据来推荐商品,推荐的不准确,用户也可以去定制;到底哪个更靠谱?两个思路各有利弊,鉴于前一个思路需要有外部依赖,要改动网站首页,所以我们内心都很期望后一个思路能跑通,但是怎么知道这个思路行不行?首先我们需要知道行业的个性化推荐能覆盖多大的人群,又有多少的人愿意去定制行业偏好?

对于普通的网站来说这个可能是一个不够明确的问题,但是1688.com是一个会员用户早就过亿的B类电商网站,有着如此庞大的用户规模,较高的用户覆盖率,这就意味着对用户行为数据的积累,再者B类的用户有一个显著地特征就是在一个较长的时间里,行业的偏好相对比较稳定,如果是一个主营女装的买家,那么她的偏好一般会以女装为主,不会超出服装的范围,最多会有少量的服装周边配套的采购。

如上图,通过行业偏好的个性化算法,我们追踪了一段时间来访这个频道首页(ye.1688.com)的用户数据,我们发现大约2/3的用户是有着非常明确的行业偏好的,那么这基本可以断定做行业偏好的个性化推荐是靠谱的!但是剩下的1/3用户愿意去定制行业偏好吗?我们当时因为时间原因,无法直接从这1/3无明确偏好的用户中去判断他们是否愿意定制偏好,但是通过整个用户群的问卷抽样调查发现,大约3成的用户表示定制行业偏好是很好的服务,基于这些情况,我们判定基于行业偏好的个性化推荐能够解决绝大部分用户的行业偏好问题,提升了内容的相关性。这个方案最终上线后,实际上有大约10%的人真正找到定制入口并且产生了定制行为,70%的人不用定制,实现了默认的精准推荐。

设计后数据帮你验证方案:我们的设计方案到底做的好不好呢?衡量标准就是看设计方案是否能够达成设计目标?这也需要数据来量化,通常会用GSM的模型来支撑设计的验证。G(Goal)设计目标、S(Signal)现象信号、M(Metric)衡量指标,所谓的设计目标,就是要确定设计要达成什么结果,要解决什么问题;衡量指标,我们不能凭空猜想,必须建立在设计目标的基础上,先假设设计目标会实现,那么会出现什么现象或信号呢?列举出所有的现象或信号,选择我们可以监控的到的,然后对这个现象或信号产品进行量化,自然就得到了衡量指标,但是指标的波动幅度往往要依赖经验来定。

比如说,某个产品的设计目标是通过设计的引导,让更多的买家产生购买,想象一下,如果设计目标实现了,会有什么现象呢?可能会有更多的人有购买意愿,看了商品详情页,点击了购买按钮等等,最终也产生了购买,那么,衡量指标是哪个?设计只是改变了商品信息的呈现方式,并不能改变商品本身的质量或背后的服务,所以我们应该重点考察设计是否强化了引导,提升了购买意愿,是否激发了用户进一步了解的行为,主要是指浏览行为,最典型的就是到达了商品列表页或者商品详情页等,量化的结果就是看又进一步行为的用户的比例;

通过一个具体的例子看看如何利用数据来验证你的设计方案是否达成设计目标。曾经有一个找产地的功能模块,我们在设计前进行了调研,用户告诉我们他们需要找产地,而且比较习惯于用地图来找产地,我们欣喜若狂,照着这个方向做了个产地直达的楼层,我们坚信用户告诉我们的肯定是对的!但是这样的设计真的能达到帮助用户高效找产地的需求吗?来看下面的数据分析。

用户的目标不是要找产地吗?还告诉我们用地图找产地很符合他们的习惯呢?为什么上线后,用户却不怎么使用这个版块???我看到这个数据非常的意外,一时之间根本摸不着头脑,后来再去看了看这个板块的热力图,一下子恍然大悟。通过数据分析得出,地图纵然符合用户习惯,但是才这么狭小的地图上进行如此复杂的操作,其效率是非常底下的,因此将地图找产地的功能保留下来,只是不作为默认的方式,采用了按照热门的、区域的、附近的、可搜索的、地图的方式综合承载,最后取得了较好的效果!

3、如何利用数据做日常监控?

作为一个设计师,你的作品上线后,有多少人用?这些用户是谁?有什么特征?用户具体是怎么在使用你的产品的?你的设计是否还有优化的空间?如何才能为用户打造更好的使用体验?怎么才能知道这些数据好不好,有没有问题呢?主要是靠比较、靠经验,靠对这个产品长期跟进产生的直觉,只有在对这个产品非常熟悉的前提下,你才有可能对数据的变化给予比较靠谱的解读。

日常监控中用于发现问题的主要手段就是做数据的对比,但是如何具体的作对比呢?主要有三种最常用的最简单的对比方式:a、横向比较,和类似的产品去比较,看相对的状况,进而推测出自身是否存在问题;b、纵向比较,和自己的过去比较,看看从历史的发展规律中是否能得到某些启发,主要是看自身的变化趋势;c、用户细分,这个就是把用户按照不同的分析需要,拆分来之后来看数据,看看各个群体之间的差异在哪里,有没有一部分用户和其他用户表现出不同的行为,进而找到问题所在。当然除了这三种常用的对比之外,我们还可以做一些配套的定性研究,进而把问题搞得更透彻。一些统计学的工具有时候也能起到作用,比如说用SPSS做数据的因子分析、聚类分析等等,也可以有一些意想不到的收获。

4、数据不是核心价值,你才是!

说了这么多,我并不是要强调数据有多么的万能,但是在互联网领域,任何一个具有一定用户量的的产品,你都不得不去了解数据,这些数据中有一些是宏观的,作为设计师我们可以当做是背景知识,应该去了解了解,但是设计师更多的是应该关注用户的目标、行为和态度等相关的数据,关注那些微观的、和用户、和设计方案息息相关的数据,这样才能更好的了解我们的用户,了解用户对我们的设计方案的反馈,以帮助我们更好的发挥自身的价值!

响应式导航的设计模式

responsive_nav_patterns

本文翻译至 Brad Frost 的博客文章:[Responsive Navigation Patterns][2]

以下是正文:

在大屏幕上,导航置顶或导航居左是两种典型的设计模式,然而,这两种模式在小屏幕上却遭遇挑战。在响应式设计日渐流行的今天(译者注:其实已经流行了好几年了),我们更有必要重新审视针对小屏幕环境下的导航设计模式。这些通过移动设备访问的页面导航,必须既方便用户快速访问,又不能过于突出。

以下,我列出了 7 种常见的响应式导航的设计模式,它们分别是:

  1. 置顶(或“放任自流”)
  2. 页脚锚点
  3. 菜单选择
  4. 开关
  5. 侧滑
  6. 置底
  7. 彻底隐藏

上述每种设计模式都各有利弊,大家在选择导航设计方案时,需要根据项目的实际情况作出判断。

置顶(或“放任自流”)

![置顶(或“放任自流”)的案例][3]

将导航置顶或让导航随布局任意流动(放任自流)是一种最简单的导航实现方式。正是由于这种易于实现的方式,它也成为了当下许多响应式网页的“标配”。

优点

  • 易于实现:在大屏幕和小屏幕上的实现方式一致
  • 不依赖 JavaScript:这样就最大程度上保证了兼容性
  • 无需打破原有 CSS 样式
  • 无需打乱内容本来的顺序:这种方式保证了它是完完全全的流体布局,无需一丁点的人为干预

缺点

  • 占用空间:高度问题在移动端是核心问题。Luke 在自己的书中表达的“内容优先,导航其次”是典型的移动端网页体验。我们都期望用户能够以最快的速度获取内容,这久意味着我们需要移除导航以确保用户关注的焦点始终保持在核心信息上。而当导航高度过大,导致屏幕内的核心信息无法展示的时候,就会引起用户的疑惑。如下图,当我们打开一个页面时,整个屏幕都被导航占据,用户无法获取有效信息。 ![置顶导航在小屏幕上自动折行显示][2]
  • 扩展性差:当你的导航刚好在一行内展示时,若要再添加章节的时候会出现什么情况呢?如果客户突然要求再增加一个名为“产品和服务”的导航类目呢?或者将导航标题翻译成其他语言后导致字符长度的变化呢?这些情况都会破坏原有的设计方案。
  • 粗手指:导航全挤在一起,粗手指心急如焚,怎么点也点不到自己想要访问的导航链,这样就增加了误操作的几率(不适合小屏幕上通过手指进行点击操作)
  • 跨设备的问题:不同设备渲染的方式各异,在 iPhone 上很棒的页面或许在其它平台上表现得很糟糕。 ![不同设备上渲染的差异][3]

案例
* [Yiibu][4]
* [Trent Walton][5]
* [Tim Kadlec][6]
* [Ethan Marcotte][7]
* Brad Frost Web

相关资料
Height Matters by @andmag Don’t Let Your Menu Take Over by @StuRobson

页脚锚点

http://bradfrost.com/wp-content/uploads/2012/02/grey.png

在页面头部只保留一个去底部的锚点,将导航放在页脚是一种讨巧的做法。它节省了头部宝贵的空间,同时又满足了访问导航的需求。

优点: 容易实现:页眉锚点,导航置底,没有比这更简单的了! – 不依赖 JavaScript:这意味着更少的测试和更好的浏览器支持 CSS 改动小:由于采用了绝对或固定位置,将底部导航移到大屏幕的顶部简直太容易了

缺点: 用户迷惑:快速跳转至页脚这一动作容易让用户迷惑 缺乏优雅:这样说很奇怪(译者也有同感),但我(作者)认为类似开关的交互方式更性感一些。这种采用锚点跳转的方式虽然实用,但不优雅,相比那些经过精心设计的移动端应用的交互方式而言太过粗糙。

案例
Grey Goose Contents Magazine Bagcheck (I know it’s not responsive, but it’s where the technique was popularized)

相关资料
A Simple, Responsive, Mobile First Navigation Mobile First Book

菜单选择

http://bradfrost.com/wp-content/uploads/2012/02/nav-vil.png

将导航收纳在一个选择菜单的控件当中是一个不错的方式。它避免了导航置顶所占用的屏幕空间。

优点 腾出了足够的空间:一个选择菜单无论是在横向或纵向上都特别省空间 符合用户习惯:相比置底的方式,用户更习惯导航被放置在页面头部 容易辨认:下拉菜单的控件样式十分显眼,及其容易发现 支持本地化的交互方式:由于采用标准控件,使得操作十分本地化,这种本地化是指对设备自身属性的支持,比如,在触摸设备上能够通过点击操作,而在轨迹球上支持滚动操作;

缺点 样式不统一:不同浏览器会呈现不同样式的下拉菜单 可能会让用户困惑:大部分用户只在填写表单时才会看见下拉菜单,而将下拉菜单用作导航,担心用户一下子无法理解 下拉菜单内容的处理方式比较奇怪:因为在下拉菜单中,子项目会自动缩进,这样虽然可用,但从视觉上看十分混乱; 可能会依赖浏览器调用 JavaScript

案例: TinyNav by @viljamis Convert a Menu to a Dropdown for Small Screens Progressive and Responsive Navigation Responsive Menu

相关资料: Viljami Salminen Retreats 4 Geeks Five Simple Steps Performance Marketing Awards

开关

http://bradfrost.com/wp-content/uploads/2012/02/nav-starbucks.png

开关的实现方式类似页脚锚点,但不是点击跳转至页脚,而是点击后将菜单区域滑动展开。同样也是比较容易实现的设计模式。

优点 易于理解:相较于页脚锚点突然间的跳转,开关这种是位置不变的交互方式更容易让用户接受 交互更优雅(相比跳转而言) 拓展性强:你唯一要做的就是在PC端隐藏开关,在适当的断点处显示它,这一切的一切都能通过 CSS 来实现

缺点 动画可能不够平滑:Android 对于动画的支持一直不好,因此,可能得到你想要的效果 非常依赖 JavaScript:正因为打开开关的动画需要 JavaScript 来实现,所以它的兼容性不太好(作者的黑莓设备就不支持);

案例 Starbucks Mobile Web Best Practices Twitter Bootstrap

相关资源 FlexNav A Responsive Design Approach for Navigation, Part 1 by@filamentgroup

侧滑导航

http://bradfrost.com/wp-content/uploads/2012/02/nav-obama.png

侧滑是在 Facebook 的大力推广下流行起来的。之所以叫抽屉源于它的交互动效,当点击菜单按钮后,导航模块会像抽屉一样从页面边缘滑动出现。

优点 空间充裕:因为从边缘滑出,这些内容被理解为在底层或屏幕外的无限区域内 好看:简洁就是美,而且动画效果惊艳

缺点 小众:与其他简单的设计模式比起来,从侧面滑动展开导航栏的效果需要若干复杂的动画来实现,这样就将一些低端设备挡在门口。因此,如果你的项目是面向大众而设计的,需要谨慎。 适配性不好: 这种模式仅适合移动设备,在大屏幕上的表现并不好(也没有必要)。 可能存在迷惑:当我(作者)第一次看到 Facebook 采用这种设计时,我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)

案例 Barack Obama

相关资料 A Plea for Progressive Enhancement

只在页脚放置导航

只在页脚放置导航和页脚锚点类似,只是它不在页眉放置锚点。这种模式的理念是内容优先、导航其次。 这种方式需要用户将页面滑动至底部才能看见导航

优点: 容易实现 兼容性(无需 JavaScript) CSS 改动小:由于采用了绝对或固定位置,将底部导航移到大屏幕的顶部简直太容易了

缺点: 难以发现:无论在大屏或小屏上都很难发现页脚会有导航; 难以使用:移动端用户需要不断滚动页面至底部,才能使用页脚导航,十分不便

相关案例: Pears Fray

彻底隐藏

将导航隐藏,得到最大化的空间

这种设计模式遵循了该法则:不要惩罚那些通过移动端访问你网站的用户。 移动端用户到底想得到或不想要哪些信息仍旧是个谜。移动端用户会做任何桌面端用户都会做的事情,因此,仅针对移动端用户提供某些核心功能是很有必要的。

优点: 屌爆了(原文 Sexy as hell 求大神信达雅的翻译)

完美的利用有限的屏幕空间

对于移动端设备有很大优势,只用向下滑动就能查看更多

缺点: 去掉了针对移动端用户的核心功能或内容 将链接或内容隐藏的做法并不好。响应式的鼓吹者认为这种做法会导致移动端页面与桌面端形成内容上的差异,以及体验上的灾难。

增加页面额外的开销 使用命令 display: none 仅能在页面上隐藏该元素。页面的代码、图片或别的文件依旧在后台下载,这最终导致了页面访问缓慢。

难以维护 两个完全分离的导航体系将成为后期维护时的负担

可能存在迷惑 移动端用户向下滑动页面来刷新列表时,并不会意识到 当我(作者)第一次看到 Facebook 采用这种设计时,我还以为页面出错了呢!在屏幕右侧露出一些信息对于我本人而言还是很奇怪的(纯属作者个人看法)

相关案例: Authentic Jobs rourkery.com A previous version of the Obama responsive sit 相关资源: Media Query and Asset Tests

结语

移动导航就像你真正的朋友一样:彼此需要,但又给彼此空间;而那些假装跟你很要好的朋友总是在你需要的时候消失(当你需要导航的时候找不到)或者占据你的个人空间而让你抓狂(比如:擦,从我床上滚下去);因此,针对响应式导航进行设计,需要在访问的便携性和空间上做一个平衡。

01 在设计运营类需求时,我们采用的比较常规的设计形式是先设计一个漂亮的头图然后再将信息内容进行排版填充,当遇到页面中的文字元素比较繁冗时,大量内容的堆砌不仅很容易让用户浏览时产生疲劳,而且设计师在这个过程中也会容易陷入在传统框框里无法突破,在设计时感到枯燥乏味、越做越无趣。平时采集设计灵感时我们会注意到现在很多优秀的运营设计已经不仅仅局限于常规的形式,而是越来越注重整体画面给用户带来的更多愉悦感及融入感。怎样突破常规,让页面在形式及情感上更吸引用户是我们设计师值得思考的问题。

什么样的设计形式能更有趣、更容易打动用户?运营设计主要表现手法之一就是通过制造情景来渲染主题气氛。对“情景”的理解一层指场景、环境;氛围有了,那试试再增加一些情绪上的感染和共鸣把,“情景”的另一层就是指人物,情节,景物唤起人的情绪和内心境界。制造情景体验一方面是把页面信息放置到贴近生活的真实环境中,让画面符合主题并且非常直观,另一方面能引导用户展开想象,唤起某种记忆,让用户有身临其境的感受。

用户不仅作为一个看客,还能以第一人物的视角参与到画面中,让用户迅速置身场景中,带动情绪,引发用户兴趣去完成后续操作。这里总结出一些打造情景体验的具体方法及例子帮助大家去设计更有意思的运营页面:

02 空间感的渲染能让人更有“身临其境”的感觉,这种方式主要根据主题模拟真实场景,再通过整体透视的构图使画面呈现立体空间感,增加画面冲击力强,一下子吸引把用户代入到氛围中。我们来看几个例子: f1b526899771c5bc73175dcf19723b42fad4a5fa37d8e7-sl1IKu_fw658 088816d3b9db391b9a7f45adf0ffde218f3a339773c92-RVWqba_fw658副本副本

以上的例子都通过空间打造增加画面代入感,画面的气氛和现实生活中的场景极其相似,用户很容易被吸引到气氛中。需要注意的是这种立体场景的搭建对素材及整体层次的控制力要求比较高,在设计的时候需要先搭建大的画面关系,再往里头添细节和内容,同时也要注意不要让场景抢了内容的视觉焦点,在适当的时候还需要做些减法。

03 不同于上面提到的逼真空间搭建方法,这种设计方式虽然也是选取现实存在的对象,但是需要提炼一个可以将内容信息巧妙的融合串联的承载容器构建出主体轮廓,然后再将内容填充到轮廓里面。这种形式能够让用户一眼就能了解到一些信息,同时又能贴合主题很好地传达情景氛围,让页面生动更有趣味性,特别适合一些节日主题的运营页面。 5077dac3ea7dee103ef37f9464326d7041974e7a1b117d-iHuvLr_fw658副本 0d269c480df4b003df7c424cdca56de86035b09f203eda-pDFfmy副本副本

把内容放到盒子里或者一封情书中,顿时就产生了亲切感,抽象的主题通过实体显性化地表达出来,第一眼就能明白主题。这种方法需要选取合适的现实元素并对其高度概括,注意将形状尽量精简强调,避免太具象,适当地舍弃一些繁琐的、不必要的元素,以免影响阅读的内容。

04 除了还原真实场景,角度的不同也会呈现不一样的形式和感受,千篇一律的规则视角会难免让页面显得单调平庸。不妨试试模拟真实生活中的视角,我们来看几个例子: b58a4d7ad8c94c8393dd88017a78b66568fc1d0865f97-h82bVk_fw658 11054IZ5-1

这些例子往往是我们生活中很熟悉的情景却容易被忽略,工作中俯视看到正在写作的区域,对页面的倾斜还原最真实的状态;吃饭时关注自己盘子中食物的角度,亲切的视觉感受令人置身其中,感染力非常强。同样的元素主题往往变换一下画面视角的方式能巧妙的打破常规构图的呆板并不落俗套,让页面轻松活跃。同时真实的场景一下次拉近了和用户的距离,也很容易和用户内心产生共鸣。不过变换角度可能不太适合文字正常阅读,要注意文字排版保证流量的舒适性。

05 我们常常看到很多电影海报的设计中会截取某部分的方式作为的重心集中表现,最大化也是最突出,以小见大来引起注意,同时“犹抱琵琶半遮面”的方式制造更多悬念,引起观众兴趣及思考。具体运用在运营设计中又是怎么做的呢?我们来看几个例子来体会其中的设计思路。 518f2701c8473e2dc35d01ec77e07488ed2c5a9010be58-Bg82jV_fw658 bdc815cf6b602fdb13e271a43fd2e8f4f84da8866ca8e-U7fvZ0_fw658

以上的例子都是通过截取局部来吸引眼球,这种某个局部特征被放大强调的方式推翻我们常规的视觉习惯从而让感情集中强化,视觉充满神秘感瞬间抓住了用户的眼球,页面的目的也就达到了。这种方法可以多从电影、摄影中借鉴手法,通过特殊的视角打造出精彩的画面。

06 制造页面中情景体验主要通过还原现实场景再加以艺术化的表达来增强页面的整体气氛,让用户不用去阅读文字就能很快明白这是个跟主题相关的页面,代入感极强,能比较直观获取信息;同时拟物具象的方式也减少了用户认知成本,亲和的设计形式在情感上给用户更多情共鸣。当然这种方式需要设计师日常要注意观察生活中的细节,多联想与各场景相关的事物,不一定需要靠素材的堆积也能打造出动人的页面一击击中用户。

运营设计现在越来越注重个性、趣味性以及视觉冲击力,页面的形式和技巧也是多种多样,以上总结的方法希望能帮助大家在设计遭遇瓶颈时找寻一些解决思路。设计师需要时刻灵活创新汲取灵感,才能够避免按习惯性的思维去设计,不断创造出新的视觉表现。当然还有更重要的是运用方法多多进行实践转化成自己的东西,才能得到能力上的有更大地提高。

从2012年开始到2014年,各大家对Web设计的趋势预测中,都提到响应式设计;2015年网页设计趋势预测中,响应式仍在继续。这个经历了几年依然大热的响应式,在过去的几年里,快速巩固了自己的地位,并掀起了一股网页设计新标准的浪潮。这里本人基于一些资料文献及自己的陋见,谈谈响应式设计的一些现状和趋势。

源起

2010年5月,伊桑.马科特(Ethan Marcotte)在“A List Apart”写了一篇开创性的文章(题为“Responsive Web Design” ),他利用三种已有的工具:流动布局(fluid grids)、媒介查询(media queries)和弹性图片(scalable images)创建了一个在不同分辨率屏幕下都能漂亮地显示的网站。 Ethan Marcotte力劝设计师们要去利用那些Web独有的特性去进行设计: “我们可以将不同联网设备上众多的体验,当作是同一网站体验的不同侧面来对待,而不要为每种设备进行单独剪裁而使得设计彼此断开,这才是我们前进的方向。虽然我们已经能够设计出最佳的视觉体验,但还要把基于标准的技术也嵌入到我们的设计中去,这样才能使得我们的设计不仅灵活,而且还能适应渲染它们的各种媒介。” Ethan Marcotte证明了一种在多种设备上都能提供卓越体验的方法的存在,而且这一方法不会忽视不同设备的差异,也不会强调设计师的控制权,而是选择了顺其自然并拥抱Web的灵活性。

这里简单介绍下上面的提到的三个概念:流动布局(fluid grids)、媒介查询(media queries)和弹性图片(scalable images)原本都是指现有的一些技术手段,但在做响应式设计研究的过程中,这些概念还是有更广泛的意义,设计师也应该有所了解:

  1. 流动布局:原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念:在响应式设计的布局中,不再以像素(px)作为唯一单位,而是采用百分比或者混合百分比、像素为单位,设计出更具灵活性的布局方式。
  2. 媒介查询:媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询,可以获取到设备及设备的特性,并给出求同存异的方案,从而解决之前在单纯的布局设计中遗留的问题。
  3. 弹性图片:伴随布局的弹性,图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。个人认为弹性图片是Ethan Marcotte提出设计产品时提出的概念,我们在后续的研究中可以以图片为典型,扩大研究范围:除了图片,还应该包括图标、图表、视频等信息内容的响应方式研究。

盛行

响应式设计的概念从提出至今,一直不断蔓延扩散,并得到各方认可的主要原因:

  1. 外部环境:快速增长且日趋加剧的可联网设备的多样化,让现今已不再有标准的屏幕尺寸;
  2. 自身特色:严格定义的响应式一般是指响应式Web设计,而Web凭借其特有的灵活性和可塑性,可以适应各种尺寸和配置的设备,可以无处不在。
  3. 内部需求:响应式设计概念一提出,各大网站及平台都希望能够采用这秉一应万的模式,可以更灵活地去适配更多设备,尤其是现在移动设备大爆棚的时代。

当然也并不是所有的情况都理所应带应该采用响应式设计,那么什么情况下更适合采用响应式呢?

  1. 你想节约成本地去适应更多场景:> 资源都是有限的,但总是希望能利用有限的资源去获得更大的价值。虽然比起开发设计一个普通的网站来说,要打造一个响应式站点,所需要的人力和时间资源都会有所增加,但比起为不同设备分别打造多个版本的成本还是要低很多;从维护的角度来说,也会轻松很多。
  2. 你并不清楚要设计开发的全新产品更适合哪个场景:> 与其通过预测挑选核心设备再进行分别设计,倒不如先花些心思将网站打造得更具弹性,使其在各种设备中都拥有尽可能优秀体验。因为在各方面都未知都情况下,做预测会加剧过程风险,使得结果存在巨大的挑战性。
  3. 你希望网站可以兼容未来的新设备:> 新的设备层出不穷,与其被动地进行更新维护,不如主动应万变,成为响应式。 当然这里只是说更适合,其实个人认为只要项目资源和时间允许,基本上大部分网站都可以去尝试实现响应式;而对于初次尝试响应式设计的,也可以从“简单浏览型页面”开始。

模式

目前大多网站中选择成为响应式的设计模式主要有两种:

  1. 基于设备:通过主流设备的类型及尺寸来确定布局断点(break point),设计多套样式,再分别投射到响应的设备。
  2. 内容优先:根据内容的可读性、易读性作为确定断点(break point)的标准,即在对内容进行布局设计的时候,可以无视设备,有内容决定何时需要采用不同的呈现方式。

个人还是倾向内容优先的方式,这是真正符合响应式设计核心策略的模式,也是对未来友好的方式。 从过去基本上是基于pc的几个尺寸,选择最佳的标准尺寸去设计页面;到现在移动设备已经玲琅满目,同时电视、穿戴设备也慢慢开始起来,已经不再有固定的尺寸;未来,将是更加无法预知的设备环境;那么什么才是王道呢?——就是内容本身! 变化总是来得快且狠,我们要做的就是抓住那根可以贯通全局的线!

在内容优先的策略中,有三点思维模式可以贯穿整个响应式设计的过程:

  1. 忘记设备:因为我们不知道用户会用什么样的设备来访问网站,因此,我们必须尽可能地把所有情况都囊括进来;所有的东西(布局、组件等)都能与不同类型的设备和平台相兼容。
  2. 优雅降级:虽然这个概念一开始是技术实现上对新的特性在老的浏览器上无法很好实现时的折中做法,但在此仅想表达在对布局做弹性设计时,内容从宽到窄的变化呈现,必须经过重重筛选,留存最核心的内容块。这种模式非常适合对已存在的pc页面产品进行响应式设计改造。
  3. 渐进增强:此概念是在Steven在2003年的SXSW活动上提出的。在本质上来说,就是把优雅降级倒过来:先创建一个基本体验,侧重让内容以一种简介的方式来展现;之后,在保证基本体验的前提下,开始着手做有关显示的布局和交互。而在此,也借用来说明下对于响应式设计的内容策略中,内容从窄到宽的变化呈现中,可以让内容的丰富度也相应地有所增加。这种模式与移动优先策略是相匹配的。

当然,目前响应式也是有存在各种争论的,也许你有一个很好的理由不用响应式网页设计?但我想没人会说,“让我们摆脱响应式设计吧”,而实际上,越来越多的网站选择成为响应式。2014年如此,2015年也还是会继续,因为这已经不是种趋势,而怡然是种常态了。

未来的路

虽然响应式设计的优势和趋势已被普遍认可,但目前响应式设计的模式的普及还是有很多难题需要突破:

  1. 响应式图片:目前弹性图片的做法主要是:缩放、剪裁、分条件加载等实现方法本质上都只是一个技巧,只是治标不治本地掩盖了问题,并未真正完美地实现图片的弹性。
  2. 跨端的交互:在响应式设计中,我们不仅要需要考虑桌面用户的使用习惯,还必须兼顾不同尺寸的手持设备。比如在桌面端无尽优雅的Hover,在移动端却是无比糟糕的体验,如何“求同存异”,让各端体验均能最佳,还是需要继续深入探究的。
  3. 性能:性能估计是在响应式开发中最大的痛,按条件加载、隐藏或显示什么内容,都会比单一条件判断的代码结构来的繁琐,并影响体验及维护。尤其是移动性能上,更多样的设备具有更加复杂的使用环境,如何识别设备,并让设备在不同环境均能良好体验,也是一根硬骨头。
  4. 合作流程:响应式设计远远不止是一种简单的设计策略,它为Web项目带来的是一整套全新的、完整的方法,还应该包括一种新的、可以更好地利用这一模式的工作流程。

最后,我想说下响应式体现的是一种高度适应性的设计思维模式。在响应式设计探究的道路上,响应式本身不是唯一目的,基于任意设备对页面内容进行完美规划的设计策略及工作流程应该是我们更大的课题~

9 还记得那年的中秋节,我们捐过半盒月饼,我们成打成打的团购,不知道今年的月亮还是不是那么圆,你们期待吗? 1 记得多回家看看,小得时候,父母为我们付出了很多,安静下来的时候,我们总会沉浸到无忧无虑小时候的欢乐中,现在,偶尔,会悲伤吗? 2 现在学校劳动节好像真的会组织小朋友去种树了,我们那时候,每年老师都说要种树,大家高兴了半天,结果都是在各自的包干区扫地拖地擦玻璃,你们是吗? 3 “清明时节雨纷纷,路上行人欲断魂,借问酒家何处有,牧童遥指杏花村”…这个大家都会背吧,那…你们扫墓了吗,春游了吗,吃团粑粑了吗? 4 那个叫屈原的古人,到底跳没跳江,我不知道,但是吃粽子大家都知道,一个吃货的世界就是你能想到的粽子馅儿他有,你想不到的馅儿他还会有! 5 国庆节嘛~其实基本上都是天安门口在放鞭炮,吹口哨,外加几百个解放军叔叔走步调,为什么大家都这么happy呢,因为有7天假期丫。 6 至于圣诞节,那跟我们更是没啥关系,可是越没关系,就越显得你高大上,有木有,都说不能“闭门造车窝里搞,冲出亚洲融入洋人才算翘”~~ 7 以上文字纯属歪歪,还请大家把注意力放在我们用心营造的画面里,感受这一刻,感动在路上… 8 愿你们喜欢我们的作品,愿我们合作更愉快~ 欢迎来滨江园区6-4用户体验部来参观我们的黑板报。