响应式网页设计案例分享,详细解析多终端产品

日期:2019-09-23编辑作者:凤凰平台登录-摄影

最近为了团队能做好产品首页设计,我研究了很多国外to B类的相关产品设计。发现国外这类设计作品在整体水准上比国内高了不止一个档次(国内to B产品起步较晚,在设计方面的研究几乎空白),而这种差距和设计技法没有太多关系,更多的是对产品个性的把握和传达。

随着智能终端的多样化和快速普及,越来越多的产品都面临着多终端的挑战。那么视觉设计师应该如何去把控好多终端产品的设计?如何让多终端的产品做到具备一致的品牌识别性?这是我想跟大家一起探讨的话题。首先对于一致一词,本人诠才末学,只能说是在自己目前的层次上去解释这词,请不吝赐教,相信探讨完后会让我更上一个层次。

具有实验精神的设计师们遇到的一个问题是追求网页的独特与新奇时牺牲了用户体验。我们可以努力的方向就是找到两者之间的平衡点。

标准化的和可预见的设计总有其一席之地。事实上,这类网页是大部分内容类网页在各类终端屏幕上展现的最可能的解决方案。即便如此,我们仍然应该不时地发挥创意思维打破规则,因为网页设计从来就是科技、艺术与设计交叉融合的领域。

凤凰平台登录 1

什么是视觉一致性?

阿里妈妈MUX2015-07-12**

△ 国外一些to B 产品的首页设计

一致,即整体、统一。在我看来,它与对比是形成了互斥的矛盾关系,但两者同时也是相辅相成的。因为两者的和谐存在,才能形成所谓的美感。物质形态如果在形成中缺少了对比那会显得枯燥乏味,如果缺少了一致也会显得杂乱无章,所以两者是不可或缺,但需要调和。所以说,美就像是走在钢索上的人,两边都是陷阱,要走下去就必须保持两边的平衡。

响应式设计让网页设计失去灵魂了吗?我们能否既让网页是响应式的,同时又拥有灵魂?

以上是我随便找的几个产品的首页截图,大家感受下。总的来说,国外设计有以下几个特点:

笼统上讲,视觉一致性就是通过视觉层次、比例、颜色、质感、排版等在设计上达到一致性。我们也可以从生活中找到些体现一致性的例子,而视觉一致性可以提高产品所塑造的品牌形象,一定程度上减少用户的认知成本。

· 我们得到的

一、超高逼格(放大看)

凤凰平台登录 2

栅格系统、流动布局成为标配给我们带来了很多好处:

所谓高端大气上档次,可能也就是这样了吧。由于我不是专业做视觉设计的,所以也很难说出其中的原因,相信视觉设计师会从不同的角度讲出很多门道。

好比你进去LouisVuitton的店铺时,你不可能会看到有Chanel或者其他品牌风格的包包罗列在里面吧,LouisVuitton同一个系列的包,从手提包到肩包到行李箱,虽然产品上略有不同,但它们的细节和气质都是一致的,标识图形、埃尔泽菲尔字体以及颜色已经形成了其品牌的识别符号。甚至其衍生产品也都保留着LV独有的气质。

1、用户在使用网页时感到熟悉、轻松;

二、充满个性(缩小看)

凤凰平台登录 3

2、制作原型(相对)快速、简便;

我认为个性是中外设计最大的区别:中国的设计师比较注重是否满足客户需求,是否符合产品定位,是否美观和谐,细节是否够精致;国外的设计师除此之外,还非常注重整体感和产品个性的表达:每个网站风格看起来都非常的与众不同,你很难找到看起来非常雷同的设计,而国内设计雷同的网站比比皆是。

我不是一个网游爱好者,但对游戏界面略有研究。当你在玩2D的阿拉德欧式风格的游戏,途中突然弹出一个3D的很唯美的又带有东方古典风的广告弹窗,肯定会觉得很不和谐吧。当你使用游戏中的充值币时,细心点你会发现消耗充值币的动画与消耗游戏币、消耗体力等消耗类的动画效果是一致的。其实每一款好的游戏界面都必须做到相关元素一致性、风格一致性、色彩搭配一致性等,这样才会给用户带来好的体验。

3、建站技术的高度标准化;

凤凰平台登录 4

凤凰平台登录 5

4、快速的布局可以节约成本;

国外to B 产品首页缩小后,依然可以快速辨认

凤凰平台登录,还有就是你常看到的系列广告,他们系列感也是可以通过好些方式(画面表现手法,内容板式,slogan的位置等)来体现出视觉一致性,让用户可以直观出同一个产品的系列广告。

5、严格的网格布局促成了响应式设计;

凤凰平台登录 6

言归正传,视觉设计师如何把控好多终端产品的设计? 首先各终端的设计师必须要有同一个设计策略和了解产品的大局观,在处理各种系统之间细微的差别时,负责各终端的设计师必须保持紧密沟通,保证在不同设备和平台上(甚至在各个端发展的不同阶段)建立一个平衡点,并同时也能利用、发挥起不同平台的优势,让产品在不同终端有其最好的呈现。 当然这些都只是前提,具体我概括出了几点:

这些标准化和组合技术带来了巨大的价值,无数的个人和小企业使用这样简单、吸引人(但不独特)的网页设计与世界分享他们的

国内to B产品首页缩小后,辨认较困难

  1. 品牌色

品牌并从中获益,然而这只是故事的一个方面。

比如上图所示,国外的to B产品首页辨识度较高,即使缩小后,我依然可以轻松辨认出是哪一家的网站。而国内的to B产品(我找的都是国内顶级的大公司或行业知名公司)首页缩小后,辨识比较困难(尽管我对这些网站都很熟悉)。

凤凰平台登录 7

凤凰平台登录 8

三、品牌感强(看首屏)

色彩是每款成功产品使用的最主要的手段之一,它是最容易吸引用户的,成功的产品往往都是会巧妙的运用它独有的品牌色。利用色彩刺激用户的视觉,增强对产品的记忆力,让色彩在用户的脑海中形成一种强势的语言。

· 我们失去的

国外网站让我感受最深刻的,是对品牌的塑造和表现力(第一屏非常重要)。Basho的传统日式风格,Docker的海洋主题,Foundation长两只角的小萌兽,Heroku的紫色+干练线条,Cloudera的抽象图形及色彩运用等等,都给我留下了深刻的印象。

目前市场上存在不少成功互联网产品的品牌色让用户记忆犹新。比如说Evernote的生命绿,腾讯的科技蓝,Path的激情红,Facebook的安全蓝,Yahoo的智慧紫。。。这些产品是如何让用户记住他们的颜色?当然,不可否认设计师下的功夫。

这些设计都开始变得如此相似。

凤凰平台登录 9

当初Facebook的设计师选用这种象征力量、可靠的蓝色,最主要是因为创办人Mark Zuckerberg是红绿色盲,只能辨认出蓝色,所以成就今天Facebook经典的品牌色。无论是在官网、移动应用程序、LOGO、各类弹窗、按钮、图标、线条,甚至连某些样式的投影都夹杂着细微的蓝色投影,巧妙的被运用在Facebook中。

· 网页设计雷同的原因

对色彩、图形、设计元素的大胆想象及运用,在不拘一格之间又形成了默契的行业共性。共性中充满个性,是国外to B网站给我的整体感觉。而这种专业及个性的表达,建立在对品牌的深刻理解及创造发挥上。这是目前国内的设计师比较欠缺,并且不够重视的地方。国内的设计师往往接到需求,看看竞品就开始设计了。正是这个关键环节的缺失,造成了设计结果的差异。

除了品牌色需要被大范围的运用在产品的各个角落上,还需要有一些辅助色来适当的搭配,才不会显得单调。而大多数用户的记忆是有限的,绝不能给产品增添乱七八糟的辅助色来模糊用户对产品品牌色的认知。所以无论是在哪个平台,品牌色以及辅助色需要一致,但有些时候因为一些因素的干扰,还是需要看具体情况再对品牌色或辅助色进行细微的调整,以达到最贴切的状态,不赞成设计师一眛为了追求一致而一致。

1. 版式布局(LAYOUT)

四、符号运用(看细节)

  1. 色彩比例

版式布局的局限性是网页设计缺乏变化最突出与明显的的原因之一。去除颜色,动画,视差滚动等等这类效果,你会看到一些基本布局统治了网页设计。

很多to B网站的图标也具有这个特征:共性中充满个性。比如Palantir(知名大数据网站,估值达200亿美金)的图标类似原子的运动轨迹;Heroku的一组图标外形全是六边形;Foundation的图标出现了我们熟悉的网格线和尺寸标记,意味着严谨缜密;Basho的两组图标分别运用了传统水纹元素及折纸元素,向世界宣告这是一个来自亚洲的网站。通过统一符号的延展运用,既突出了品牌感觉,又让人感到独具匠心,妙不可言。这样的网站你怎么可能记不住呢?

凤凰平台登录 10

凤凰平台登录 11

凤凰平台登录 12

用户在体验产品时,色彩比例会是用户首先可以直观到的内容之一,如果说在多终端的各种界面上色彩比例视觉上给人印象是均匀的话,即使人们在观察不同的终端界面时,也会觉得视觉已达到了一致性。但有的时候多终端并没有达到色彩比例一致性时,其实是因为设计师缺少在空间上对颜色与颜色间色彩差异的度量,这样会导致色彩比例在多终端上呈现的准确性。因此,在色彩比例的计算上不能简单的根据颜色的具体比例来定义,而要根据设计师火眼精睛的辨别能力来辨别出大致的颜色比例。

2. 响应式设计(RESPONSIVE WEB DESIGN)

几个国外to B网站的图标

  1. 材质

终端设备变多导致网页设计必须保证跨设备的用户体验良好。

再看AWS,无处不在的曲线分割元素让很多人记住了它的页面,即使有些人很讨厌这种风格。

凤凰平台登录 13

基础的、可变宽、可折叠栅格系统使响应式网页的设计过程更简单(相比版式设计更灵活的网页)从而解决跨设备问题。

凤凰平台登录 14

材质的增添使产品更显丰富,让产品显得更加个性化。 精美的Wunderlist在设计上确实下足了功夫,这也是它一直受欢迎的原因之一。在各终端中都运用了一致的木块材质作为其背景,与LOGO上布条纹理形成呼应,简约又别具一格的材质风格,给产品加分不少。材质的一致是很有必要的,至于有没必要全平台都使用材质,这个得看各个平台的需要和设计师的设计思路,比如Evernote,在iPhone、iPad、Mac和Android都使用了黛蓝色的小颗粒材质,PC和Web却没有这个材质的出现,但并不显得唐突。

3. 框架( FRAMEWORKS )

AWS 首页部分位置

4.排版

Bootstrap与Foundation的流行导致许多设计师直接套用一模一样的代码库、布局、甚至风格。

当然,品牌符号(与品牌含义相关的特定元素符号)与网站整体的品牌设定是分不开的。比如Palantir可能是想强调精尖科技,Heroku想通过六边形强调稳定和科技(六边形类似化学元素符号),Foundation想强调严谨,Basho想强调日本的传统文化,AWS想强调云计算的弹性、灵活等等。

凤凰平台登录 15

4. 制作原型的工具与过程( PROTOTYPING TOOLS AND PROCESSES )

所以这里有一个小技巧:明确你的产品想突出的感觉,设定与之相符合的元素符号并在适合的位置反复出现,个性感和品牌感就会呼之欲出,设计质量立刻提升一个台阶。

版式的一致性可以很好的将用户在体验各终端产品时来感知该产品无意识地传达给用户的一致性体验。好比上面这款Pinterest的产品,它是全球最大的图片社交分享网站。Pinterest采用的是瀑布流的形式来展现图片内容,无需用户翻页,新的图片不断自动加载在页面底端,让用户不断的发现新的图片。这种独具风格的版式在各终端上都能很好的体现出该产品的特点。除此之外,有的产品还可以通过文字的左/右对齐,大小字号字体的穿插等的版式设计来将多终端的设计统一起来。

多数原型制作工具鼓励甚至迫使你使用标准的符合网格布局的方方正正的元素。

四、元素呼应(看联系)

5.图标

凤凰平台登录 16

看看Cloudera吧,首页不同部分(首页三屏中不同部分的截图对比)的关联是不是感觉很像是电影中的隐藏剧情般引人入胜呢?黄、蓝、绿三种颜色的不同处理方式(交融、分离、叠加)构成了整体页面既统一、个性、又有巧妙联系的视觉语言。

凤凰平台登录 17

5. 高质量的免费照片与图像(HIGH-QUALITY FREE PHOTOS AND GRAPHICS)

凤凰平台登录 18

图标这块我认为各个平台需要达成一致性,图标的太多样化即不利于产品品牌形象的发展,也会消耗不必要的资源,如果产品是在快速发展的情况下,图标达成一致不仅不会影响整体美观也提高了效率。 Google的图标一直在引领着潮流,新版的图标遵循着化繁为简的原则,避免了图标太过喧宾夺主而干扰到用户的注意力。这里我找了些Google的图标作为例子。

免费好用的图片库成了设计师可以轻松获得的资源,还有图标、字体、样式等等。

Cloudera首页三个部分的对比

6.品牌辅助图形

凤凰平台登录 19

再看看Basho,无处不在的呼应:不管是图形、元素还是图标,并且不同页面风格也高度统一。

凤凰平台登录 20

6. 设计趋势(DESIGN TRENDS)

凤凰平台登录 21

在设计一款产品的多终端界面时,有的时候不妨将该产品品牌的象征符号、图形、字体等元素结合起来设计,这样使得用户产生对该品牌有一定的品牌认知外也可以体现出多终端的视觉一致性。像上面举例的优衣库例子,该品牌的LOGO主要是一个红色的方形,佐藤可士和在设计这个品牌时所定义的品牌符号就有方形的红色块,红色字等,而在优衣库多终端的设计时适当的将红色,方块等元素的加入,也是一个不错的体现多终端视觉一致性的方式。

设计师的所见所闻影响了他们的设计,网页设计将这一点充分放大了。结果就是许多设计师从同样的网站获得灵感,追赶同样的潮流。

Basho各网页截图对比

7.图层样式

7. 你和我

元素呼应对设计师的要求非常高,需要静下心来去思考、尝试以及创新。首先需要对产品有很深入的理解,然后在此基础上大胆想象及发挥,产出产品的个性关键词,再通过一些专业方法赋予灵感,设定设计主题(品牌感强),然后通过反复试错以及细节推敲,逐渐明晰品牌符号的运用(符号运用)及关联方式(元素呼应)以及表达手法,最后得到充满个性、超高逼格的作品。

凤凰平台登录 22

上面所列的工具和资源都是很有价值的,关键在于我们使用的方式。

五、更新速度(看变化)

由于移动端与PC端的分辨率大小不一,相同元素的图层样式一般会差不多,这样视觉上给人的感觉才是一致的。举个简单例子,就像在手机上我们经常会给字体添加两像素的高光效果,增强样式的效果,但在PC上可能就会换成一像素的高光效果,这样反而显得精致些。所以不同平台相同元素的样式需要遵循一致性,而这里说的一致性是需要根据不同平台做一些微调整。

· 如何挑战现状 - 一些例子

由于我平时经常分析这些优秀的网站,所以我发现,每隔几个月,这些网站就会有明显的变化。而分析这些网站前后的对比,对我了解网站设计趋势有很大的帮助。另外我也从中明白,再好的网站,也需要不断更新迭代;而不是固守优秀成果,不思进取。这点对设计师来说非常的重要。

近一年关于Twitter的改版和一些新闻的报道可以看出Twitter越来越重视一致性的问题。这里我简单列举Twitter在其Web版和Android上样式的处理,从整体上看TAB切换的视觉表现是保持一致的,但设计师在根据不同平台而做了一些细微的调整,比如色值的差异、内阴影的差异和一像素分割线的差异等。

1. 让布局变得奇怪

凤凰平台登录 23

8.画风

Phases Magazine:)

Foundation首屏前后对比

凤凰平台登录 24

Phases Magazine的版式设计不同寻常,如果你觉得这样的设计很奇怪,那正是这个网站设计者想要达到的效果,与众不同。

凤凰平台登录 25

多终端的设计有些也会通过一些独特的画风来体现视觉的一致性,而各式各样的画风,它不但是视觉传达的方式,更重要的是信息传播的载体,是运用图像对所表达的内容做出艺术化的解释,出色的画风能准确的抓住和控制用户群的注意力。插图可以应用在各式各样的方法中,给产品带来不同的感受。把艺术完美的融入品牌中,Dropbox是最具代表性的例子之一。

凤凰平台登录 26

Foundation首屏图标前后对比

Dropbox的创始人Houston曾经分享时说过他们产品中的所有插图其实都是他的高中同学画的,而且不是美术专业,无心插柳也好,有意栽培也好,正是因为这种火柴人风格和简单的蜡笔配色,形成了今天Dropbox的一大亮点。纵观整个产品,这种简约、友好、个性及现代风格的插图一直出现在手机上的闪屏、PC上的引导页、官网、运营中,向用户传递了Dropbox的精神,并引领后者轻松愉快的了解 Dropbox。

Curious Space:)

比如Foundation最近做了一次设计改版。在这次改版中,文案和品牌内核没有发生变化(还是两个角的小萌兽,还是之前的图标内容),只是设计风格改变了。从中可以看出品牌内核的重要性及稳定性。新的设计风格更加现代、简洁(新版图标外沿依然有和头图呼应的品牌符号,截图可能看不清楚)。

或许难免有人会提出"只有量身打造的衣服,才是最贴身的"的论点。当然不可否认,尺寸颜色、材质可以有所区别,但最主要还是要告诉用户:这是一个牌子的衣服。只要保证了这个前提,设计师当然可以针对不同用户群去设计不同款式的衣服。所以跨多终端的产品也要针对不同平台去做最合适的设计,这就考究设计师是否对产品本身的视觉语言和品牌识别有足够的了解。

Curious

最后,大家一定想更加具体的了解设计高逼格、有个性、品牌感强的产品设计方法及流程,如果有兴趣的话请关注我下一篇文章。另外我相信,这些方法也同样适用于to C的产品。如果你能理解我所讲的思维及方法,设计质量一定会有突飞猛进的提升。

这里我们需要搞清楚如何让一致性的视觉设计提供好的体验,而不是一昧的追求统一,我认为必须在具体场景下去更好地运用和遵循这个原则。 如果说一致是全局的,那对比就是局部的。跨终端的一致需要找到一个平衡点,过多会显得奇异、格格不入,而我们更需要的是在差异中寻找一致,需要针对各终端的具体情况去考量,看需要怎样的一个方式来统一该产品多终端的视觉一致性。当然这些都只是个人的一些想法和思路,可以当作以后在推动此类一致性设计的一些参考。

Space的想法与Phases

Magazine差不多,网站的滚动和断点设置合理,体验良好,同时在交互的过程中有一些小惊喜,比如鼠标hover住的图片会被置于顶层,logo的字母部分会随着滚动改变位置,最终变为整齐的两行文字,自然地变成导航栏的logo。

凤凰平台登录 27

凤凰平台登录 28

凤凰平台登录 29

Le Temps Dun Trajet:)

凤凰平台登录 30

这个网站也是一个有趣的例子,它没有采用标准网格,但是排布没有让人感觉到分散,而有一种有意识的安排。

当鼠标hover到一张静态图片时,图片会变成一小段影片并放大,整个版式也会发生有趣的变化。(去网站实际体验一下~)

2. 不使用方块元素

Built By Buffalo:)

Built By Buffalo是一个个人作品集网页,在宽屏下设计师使用六边形代替了方块元素,而在窄屏下才使用方块元素。

凤凰平台登录 31

凤凰平台登录 32

Anakin Design Studio:)

巨大的蒙版字设计大胆, 令人印象深刻,在对作品的展示部分也没有选择简单的方块缩略图,而是在缩略图中使用留白造成形状的变化。

凤凰平台登录 33

Fixate:)

For Better Coffee :http://forbetter.coffee

这两个网页使用了看似复杂的插画元素,这些插画元素与极简化的趋势形成了鲜明的对比,给品牌带来了独特的个性。

For Better Coffee以一颗咖啡豆变成一杯咖啡的历程将整个滚动下拉贯穿起来。

凤凰平台登录 34

Happy Fun Corp :http://happyfuncorp.com

HappyFunCorp网页的导航是由一整个首页插画形成的,看上去有点古怪。用户点击游乐场的一个部分时,那部分场景就会放大。

凤凰平台登录 35

3. 不同的体验

Vasilis Van Gemert :http://vasilis.nl

Vasilis Van Gemert的个人网页让每个菜单相互看上去重叠,并且每次进入网页时色彩主题都会不同,主要二级页面也是一样。

凤凰平台登录 36

凤凰平台登录 37

4. 创建一个独特的视觉主题

另一个让网页看上去独特的方法就是为整个页面设定一个有趣的主题,制定了这个框架就可以跳出传统的UI样式。

当然,这类设计并不适合所有类型的网页;但是,对于活动宣传与小公司的网页是行之有效的。

http://2015.dconstruct.org/

这个网页采用了复古的未来主义风格,它很好的证明了响应式设计可以不那么平淡

凤凰平台登录 38

· 风格独特的网页的问题

具有实验精神的设计师们遇到的一个问题是追求网页的独特与新奇时牺牲了用户体验。我们可以努力的方向就是找到两者之间的平衡点。

· 网页设计不死

标准化的和可预见的设计总有其一席之地。事实上,这类网页是大部分内容类网页在各类终端屏幕上展现的最可能的解决方案。

即便如此,我们仍然应该不时地发挥创意思维打破规则,因为网页设计从来就是科技、艺术与设计交叉融合的领域。

本文由凤凰平台登录发布于凤凰平台登录-摄影,转载请注明出处:响应式网页设计案例分享,详细解析多终端产品

关键词:

凤凰平台登录:哪些医治面部粉刺,中医怎么样

中外古今但凡用来形容美貌的女生的辞藻,无不例外都与肌肤有关,可是一旦脸上冒出几颗粉刺痘痘来找麻烦的话,那又...

详细>>

何以安排欧式大气高等化妆品包装设计,本土壤

如何设计欧式大气高端化妆品包装设计? 我国日化产品市场竞争格局及发展趋势分析 近几年,儿童化妆品品类炒得很...

详细>>

简单3招把相机对焦到无限远

很多时候我们也要利用「无限远」的对焦来拍摄,特别是拍摄风景类的作品,例如是夜景、星空、银河,甚至是北极...

详细>>

Photoshop制作梦幻的火焰蜻蜓,塑造旧照片卷页效

创制旧照片卷页效果 Phtoshop实战:构建旧照片卷页效果来源:it168有人喜好新鲜的东西,也可以有人欢悦怀旧的事物,旧...

详细>>