京品吉橡胶强人线缆有限公司

网站改版:利用Material Design复杂响应式设计

2015-04-22  来源:人人都是产品经理  我有话说  收藏本文

2011年,Gmail邮箱的按钮变得更加扁平化。2012年,Google引入分层的卡片设计,使用更多的空白和精心设计的层次排版结构。经历了几年的迭代和提炼,Google寻找到了一种可以贯通的理论体系,即把系统内的各种设计都规范成一种变形的纸片,并套用现实中纸墨的物理模型进行交互,这就是2014年Google I/O大会隆重发布的Material Design。

Material Design提出了平面像素的Z轴概念,通过纸片在物理世界中形态的抽象和提炼,定义了各种信息层级和常用状态的表达方式,并详细讲解了各个细节的处理方法,就像一本考试大纲,囊括了产品中常用的UI细节,甚至一些UX细节。这里并不赘述,想看详细的Design Guide请点击这里(http://www.google.com/design/spec/material-design/introduction.html)。

如果说UX和UI的展现,是连接产品与用户的纽带,那么产品的UX以及UI应从产品的核心逻辑延展并且推演而来。如果说产品的核心逻辑或者技术的实现难易会成为设计展现的限制,那么UX和UI应是在各种限制下所权衡出的最优解。而Material Design则像是架桥说明或者权衡出的通用解,对于众多产品做以参考。

既然是通用大纲,那么抛开产品仅谈设计,难免会停留于“通用”层面,而利用Material Design进行实战的案例,网上也多是app的一些设计尝试。恰好在近期的工作学习中,接手一个响应式web站点的改版设计,以下三点分享如何实现复杂响应式站点的Material Design。

一、清晰轻量的产品逻辑

奥卡姆剃须刀法则同样在产品架构设计中适用,越简单的架构越有利于产品的生长。清晰轻量的产品逻辑,会减少用户的负担感,从而提高交互上的效率和愉悦感。

分析Material Design,会发现Google归纳了两类复杂内容信息的层级关系,分别是Card和Tile(List 以及其他相似定义属于同类的内容信息层级),其他定义多用于UI结构及细节。其中,Google定义Card是一种多功能信息的聚合入口,信息层级应较高,体现在Z轴应高于其他信息,视觉上有阴影表现并加以圆角处理。而tile(或同类信息列表)则是(同类或相关)信息的模块展现,信息层级应较低,体现在Z轴应略低于其他信息,视觉上应无阴影表现不加圆角处理。其结果是从视觉层面让产品对象更高效、更简单,同时也更具物理世界的“真实感”。

materialdesign教程 materialdesign 响应式站点

最近接手的项目是Gekec.com的全站改版。Gekec(革客)是Geek和Maker交集,喜欢革新,喜欢技术范儿、新潮的科技消费品,喜欢自己动手创造产品,Gekec.com也就是这类人的聚集地,整个产品囊括电商、资讯(或h5宣传)、拆机、以及社区讨论等各种功能,改版前逻辑复杂,功能繁多。改版开始之初,笔者了解到革客群体时,便认为理性加浓重Geek味道的Google风格或许是最适合Gekec.com的视觉体系,然而复杂的产品逻辑不能给用户带来高效的交互体验和愉悦的使用感受,视觉上也并不能很好的通过Material Design推演并且变化,所以梳理出清晰、轻量且方便视觉统一的产品逻辑成为第一任务。

Gekec.com的产品全功能在此并不赘述,Product Feature全部为达成宜家式的体验式设计,经过梳理可以归纳成三层,首层为体验层(多入口的首页封面)、第二层为货架层(包括商城模块、拆机模块、体验模块)、第三层为详细、操作层;

materialdesign教程 materialdesign 响应式站点

如上图,轻量的产品结构即可方便设计的推演。例如其中第一层可以通过H5灵活排版做产品全方位体验,第二层与第三层的关系即可利用Material Card和Tile表现。Card表达了全部信息的聚合和入口,tile则表现同类信息的罗列。从card跳转到最终页应有一种卡片展开的体验。

materialdesign教程 materialdesign 响应式站点

二、适宜UI推演的响应办法

在产品逻辑清晰简洁的基础上,一套适宜Material Design变化的全尺寸响应办法就成为复杂响应式网页设计的核心内容,响应办法能够直接决定功能模块的响应逻辑以及UI的变化。实际操作中,响应办法的确定主要就是确定栅格和占比。

1)栅格

网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

在Gekec.com的项目中,经历产品功能模块的梳理,笔者使用了12栅格系统,目的是能够满足2、3、4、6的页面等分。注:具体栅格系统的建立应因产品和设计所决定,栅格系统并不是万能的,而确定的栅格系统可以为整个响应式设计做规范性参考。

2)占比

A.占比

如上文说,12栅格约束网页的内容区,而网页的内容往往并不占据屏幕的全部宽度,而是在两侧留有间隙,营造空间感。由于屏幕的限制,这种空间感在移动端设备显得更加重要,如图,然而强加固定的margin pixel会使得12栅格占比不定,难以控制设计效果。

materialdesign教程 materialdesign 响应式站点

所以占比应是12栅格宽度对应屏幕的比值,即:

12栅格宽度X占比=屏幕宽(临界点)

优秀而巧妙的占比确定可以让网页设计呈现在各个主流屏幕上均是100%像素。

这里简单解释一下,若一个200px宽的元素在1200px宽的屏幕上,其占比为16.67%,同样的逻辑,到1024px的屏幕上这个占比16.67%的元素即占据了170.67px,这样的情况下,某一个物理像素无法占据100%,在完美主义的设计师眼里,是无法接受的事情。而巧妙的占比,可以让元素在各个主流屏幕占据100%像素,完美展现设计意图。

B.临界点

临界点(breakpoint)是指响应式网页发生布局变化的关键点,如“当屏幕宽度小于480px时加载...样式,当宽度在480px- 600px之间时加载…样式”。响应式网页理论上有无数种尺寸,我们不可能也没有必要为每个尺寸都去做设计,需要做的是选定几个临界点做设计,在两个临界 点之间是延续上一个临界点的布局。

临界点确认总体目的就是为了保证页面在手机(屏幕很小)、平板(屏幕中等)、PC(屏幕大)上加载相应的样式,然而经验较少的设计师往往会苦恼一个问题,那就是高像素的手机屏幕和低像素的平板屏幕应如何处理。例如设计师会担心1080p的手机加载大屏幕页面,或者720p的平板加载小屏幕页面。

但需要注意的是,响应式网页不同于APP的屏幕适配。网页是沉浸于浏览器的产品,浏览器所启动的屏幕像素才可以被认为是临界点的参考点,为此,笔者做了一些测试,如下表,可以看出不少1080p手机在浏览器中仅启动360px,而神奇的ipad无论是不是retina屏幕,无论是不是mini,均显示1024x768px 。

materialdesign教程 materialdesign 响应式站点

materialdesign教程 materialdesign 响应式站点

从上表可以看出,许多担心其实并不需要。综上,在Gekec.com的项目中,笔者为达到多数主流屏幕100%像素的追求,即需达到内容区在主流屏幕临界点的占比可以被12等分,进而获得12栅格,即:

12的公倍数X占比=主流屏幕尺寸

项目中经历了一些测试和取舍,最终确定占比为93.75%,临界点为1280px、1024px、768px和320px。

具体为:

1280px<=screen,占比93.75%,12栅格在典型屏(1280px)宽1200px

1024px<=screen<1280px,占比93.75%,12栅格在典型屏(1024px)宽960px

768px<=screen<1024px,占比93.75%,12栅格在典型屏(768px)宽700px

320px<=screen<768px,占比93.75%,12栅格在典型屏(320px)宽300px

materialdesign教程 materialdesign 响应式站点

materialdesign教程 materialdesign 响应式站点

materialdesign教程 materialdesign 响应式站点

materialdesign教程 materialdesign 响应式站点

如上图的占比划分,页面元素可以完成灵活、规范的响应。可以以此作为整个产品的响应办法,在此基础之上,可以对Material Design进行全面的推演。

(责编:如斯)
 1/2    1 2 下一页 尾页
阅读  次  |  打印  |  关闭
匿名评论

用微信扫一扫

新网巢