忠于品牌,精于技术

在考虑web页面布局的时候,或者后期与UI、前端同事沟通的时候,经常会被问到“这个页面是定宽页面还是全屏页面?”“针对大小屏幕这个页面如何适配?”“这个页面是使用浏览器的滚动条还是页面内滚动?”本文作者分享了自己的解决方法。

文/冬瓜一号

一、页面宽度:定宽页面or全屏页面?

采用定宽或者全屏。而大部分网站,是需要根据页面内容,才能决定是使用定宽还是全屏。

1.定宽页面

目前市场上,笔记本常见的屏幕分辨率为1366*768;台式机常见分辨率有1440*900、1920*1080。市场上可能遇到的最低分辨率为1280*768,比如投影仪或者其他设备(其他更小的屏幕可暂不考虑)。

为了保证在小屏下,内容可查看完整,因此目前常用的定宽页面尺寸是1200px,实际可能会根据所展示的内容,页面导航,页面其他元素,页面所要适配的终端等,进行调整。比如,简书首页的宽度为960px;京东订单详情为1210px。

定宽页面常用于:详情,图片,字段并不多的列表,内容流等。

定宽页面虽然可以免去屏幕适配的烦恼,但是对于有些内容,可能会感觉在大屏下显得过于小气,体验并不好,比如图片。而站酷在这一点上,处理的比较好,可以借鉴。当屏幕宽度大于 1600 时,采用 1400 的定宽;当屏幕小于1600,使用 1150 的宽,同时图片大小也会发生改变。(注:淘宝和京东的商品列表页也采用了类似的处理方式)

2.全屏页面

全屏页面指,除了页面左右两侧的边界,页面中的内容会随着屏幕大小而撑满。但是为了保证页面内容正常显示,一般会设定最小的适配宽度,页面低于该宽度不再设配,页面出现横向滚动条。

全屏页面常用于:网站宣传页、采用左侧导航的管理类网站、字段很多的列表页、需要全屏查看的看板页、使用瀑布流的页面,或者页面中有用户需要可视区域更大才可方便操作的元素,比如地图轨迹等。

对于全屏页面,需要考虑,当屏幕变大或者变小时如果适配。一般常用的适配方式有:

  • 根据屏幕大小等比例放大(或者根据不同的屏幕设定不同的放大/缩小比例);

  • 根据屏幕大小拉宽元素,元素高度不变(大屏下,可能会导致元素比例变形,视觉效果不佳);

  • 根据屏幕大小,增加/减少每行显示的内容多少(多数适合于页面内容为网格布局的情况);

  • 使用bootstrap等框架,采用响应式布局(根据屏幕大小,改变大小的同时改变元素排版方式)。

具体采用哪种适配方式,需根据页面内容,以及内容在大小屏幕下的显示情况,以及整个网站所使用的框架等进行选择。

二 页面高度

当页面内容超出页面高度时,是采用页面滚动条,还是模块内滚动?

页面滚动条适合于内容流的页面。这种页面,页面底部固定或底部无其他元素。另外,这种滚动方式需与‘返回顶部’按钮配合使用。当数据需要分页时,多采用滚动分页。

模块内滚动,常用于操作需固定在顶部/底部的页面。当页面中有多个模块需要内滚动或者模块被分割的较小时,需考虑在小屏下每个模块的可视区域是否过小而无法进行操作。当数据需要分页时,多采用翻页分页。

如下示例:由于在 1366 的屏幕下,内容的显示高度除去浏览器的高度以及网站导航的高度,可能只有 650 左右,导致可视区域过小影响用户体验。因此整个页面的布局可能需要重新调整。

三 总结

设计页面时,需特别注意,屏幕大小对页面的影响。否则,会导致整个页面的交互布局需重新设计。另外,具体使用哪种方式,需权衡各自的利弊,最大程度保证大小屏幕下,用户的体验不受影响。

Learn more

作者 : Tubik Studio 

2018 年时间过半,通过过去的 6 个月的观察,其实我们已经可以对于 2018 年的整个 UI 领域的设计趋势有了一个更为清晰的判断,也是推出这篇文章比较合理的时机。今天,我们一起来回顾一下,过去的半年当中,UI设计领域当中的一些流行趋势。

1. 全屏背景图片

如今的全屏背景确实是最广泛的设计趋势之一,无论是使用照片还是经过特别渲染的可视化效果,均是在此范围以内。这种方法无论是在视觉上,还是在情绪上都非常的吸引人。此外,它能够让所有的布局元素具有强烈的整体感。

这是 Big City Guide 的着陆页设计,背景采用的是柏林当地的著名建筑,使得整体显得优雅,信息量也足够丰富。

而这个室内设计工作室的首页,也同样采用了全屏的设计,大量的原创建模而构建出来的彩色场景所营造的背景,很好的凸显了工作室本身的性质和特点。

2. 多个可交互图层

UI设计师一直在探索各种实验性的设计,而如今就有越来越多的设计师开始在网页中加入多个叠加的可交互的图层,让用户可以同网页进行复杂的交互。相比之下,单纯的滚动浏览就显得很原始了。

这个拯救海洋为主题的网站就是这样做的。当轮播图变化的时候,其他的两个交互层也会随之而变化。另外,这种设计当中有一个分支,就是图片填充式排版,图片甚至视频被作为纹理和素材填充到文本当中,有的是静态的,有的会随着交互而移动。

3. 自定义插画

自定义插画一直广泛存在于网页和 UI设计当中,不过如今的网页和 UI 中的自定义插画会更加成熟,在可用性、直观性、隐喻和信息传达上,有着更加突出的特点。图片和插画本身会提升整个设计的可访问性,插画和文本的互相支撑,让整个设计更加统一。

自定义插画让网站的价值感得到了增强,不仅在美学上赋予网站和内容的一致感,而且在内容上显得更加突出。

add_color_illustration_tubik.jpg

就像这副插画,它是为文章《UI设计当中的3C要素:色彩,对比和内容》所设计的,这篇文章中的三个关键词分辨是色彩、对比度和内容,而这个是选取颜色作为核心的语义元素,并且非常贴合主题地选取了绘画作为插画内容的主体。在细节配色上,强烈的色彩对比又贴合了对比度这一关键词。

4. 故事和角色设计

越来越多的网站和 APP 开始试图将专门的角色/吉祥物融入到整个设计当中来,借助视觉化的插画、视频、文本甚至图标和细节来展示故事,营造氛围,传递信息,表达情绪,采用更加贴合当前语境的方式,将内容形象生动地传达给用户。这是故事和角色的优势所在。拟人化的形象能够更容易让用户产生联想,和现实世界勾连起来,承载情绪。在设计上,角色的设计也能够在视觉上,让页面更加活泼。

 

5. 分屏式设计

分屏式设计本身很早就出现过,只不过不如最近出现的这么频繁,开始广泛地出现在不同的设计作品当中。首先,分屏式设计可以很好地契合当前的响应式设计,另一方面,它本身可以在一致的设计下承载不同的内容,设计师可以在不同的色彩和布局之下,探索各种可能性。通过分屏式设计,设计师能够更好地呈现网页内容本身的二元性。

这个着陆页是为一个约会应用所设计的,采用了倾斜式的分屏设计,视觉元素和文本通过对角线分割开来,呼应之下相互依存,又保持着一致性。

6. 大胆的排版

大胆而引人瞩目的排版同样在如今的网页和 APP 当中广泛地存在,甚至于在绝大多数的情况下,它是作为最关键的视觉设计元素而存在。设计师会非常在意这些文本和排版的可读性和易读性,排版的层次结构和字体的选择,始终都是每个 UI设计师最在意的问题。

同样的,上面提到过的 Big City Guide 这个案例当中,文本字体排版被作为整个视觉中最引人瞩目的部分而拿出来。精细的裁切和大胆的选取让文本和背景元素很好地融入到一起,充满协调感和紧密的设计感。

Upper 这个应用程序的设计同样是简约的,其中并没有使用太过于独特的插画或者图形,相反,文字排版在整个 APP 的设计当中,发挥着举足轻重的作用。

7. 无按钮UI

虽然按钮仍然是目前 UI设计中最重要的元素之一,但是我们发现越来越多的设计开始在实验性的 UI 交互案例当中,开始使用无按钮的 UI 了。这种设计在节省空间的同时,采用了手势驱动式的交互,而不是点击。

这是我们的团队所制作的一个百科全书类的 APP 的概念设计,提供各种交互式的信息图表,数据和交互都采用滑动来实现的,没有加入任何按钮。

不过,绝大多数的情况下,设计师还是要倚靠按钮来进行设计的。

8. 活泼大胆的色彩

配色同样是设计师最为在意的事情之一。现如今,UI设计师从之前所追求的微妙的配色,完全过渡到对于活泼大胆的色调的追求上来了。无论是深色系配色还是浅色系配色,总会试图让配色方案尽量出彩。越来越多的设计师开始将传统的技术和创新的配色组合到一起,试图营造出更加富有表现力的视觉体验。

这是一款音乐新闻类应用的的概念设计,这款配色极为鲜亮的应用当中,囊括了包括歌词、音乐新闻和音乐测试等新鲜有趣的内容。整个 APP 给人很强的原创感,这很大程度上得益于配色和几何图形的运用。当用户在屏幕上滑动浏览的时候,图形、色彩和图标的变化,会非常抓人眼球。

9. 强化参与度的UI动画

UI界面动效是目前当之无愧的热点。虽然仍然有许多设计师会认为动效的必要性不强,动画可能会让界面变的更加复杂,但是就目前来看,动效确实对于整个交互体验有明显的提升,甚至于逐渐有成为设计中不可或缺的一部分的趋势。因此,设计师和开发者开始通力协作,试图找到在现代网页中实现有效又体验优异的动效的方法。动效和微交互搭配在一起,可以快速地为用户建立反馈,使得导航和交互变得更加直观。所有的这些,都能够强化 UI 的参与度。

这是一个用来帮助用户跟踪每天的消费,管理收支的 APP 的概念设计。采用深色系的配色和高识别度的字体,让整个设计的可读性更强也更加沉稳,动效的加入则让整个 APP 更加富有生命力,让用户感觉上更加舒适。

 

10. 带有超大图片背景的着陆页

着陆页是许多网站的重要组成部分,使用超大背景图片能够让着陆页更加引人瞩目,创造出更加富有特色的视觉。在情绪和氛围的传递上,超大图片的功能会显得非常的突出,在着陆页这样的页面当中,效果更加拔群。着陆页当红的超大图片同时可以满足多个需求:

  • 吸引用户的注意力

  • 直观的传递信息

  • 强化风格

  • 创建主题,营造氛围

  • 展示核心的特征,凸显项目属性

这就是为什么如今设计师会如此的青睐这种着陆页的设计。

下面是名为 HeartBeat 的舞蹈学院的着陆页设计。简约的布局之下,搭配带有动效的舞蹈人物背景,通过舞者的超大图片来吸引对舞蹈感兴趣的年轻人的兴趣,营造情感吸引力。

11. 海报样式的页面

海报的设计始终都是非常强调视觉吸引力的,海报式的网页和 APP 的视觉设计,同样也是强调视角、排版和气氛。选择正确的图片、时尚的排版,让布局和风格更加抓人眼球,从而达到吸引用户的目的。

Tasty Burger 这个应用程序的着陆页就是如此:通过富有表现力的字体来强化视觉,用令人垂涎的配色和美食来营造情感吸引力,凸显视觉主体的布局让用户不会错过关键的信息。

12. 实验性的配色和布局

实验性的设计从来都没有消失过,设计师努力在平庸和普遍的设计当中探索新鲜原创的配色和截然不同的布局。因为,不管怎么讲,有效的实验性配色不仅仅是因为它有着创造力,这种配色常常能够产生令人惊讶的效果,在同样的配色理论和色彩心理学中,探索出真正有趣的组合。

这个名为 The Gourmet 的网站,是一个销售草药和香料的电商网站,用户界面的布局和配色都非常的创新,这种实验性的布局在动效的加持下,营造出和其他网站截然不同的时尚感。

13. 个性化的用户体验

我们能在过去的 6 个月当中看到越来越多,逐渐成熟的个性化用户体验设计 ,设计师开始为用户提供更多的功能,这些功能都是基于用户的个人需求,提供足够宽广的自定义的空间。

Perfect Recipe 这个健康类的 APP,就能够为用户提供个性化的健康的食谱。因为每个用户的情况各不相同,有的需要健身,有的需要增重,有的需要减肥,不同的人不同需求之下必然需要完全个性化的定制,而这个应用就是为了应对这样的需求,来为用户提供真正可靠的、可信的服务。

结语

如今的设计趋势呈现出一种多样性,这得益于设计师的探索精神,而同时,不同的趋势之间还呈现出一种内在的关联性,这很大程度上源于设计师对于体验和创意的不懈追求。将设计趋势总结出来,另外一个好处在于,为正在设计的你提供设计思路。

 

 


Learn more

设计是艺术的延伸,艺术发展有自己的时间线,最近很多大热的设计风格在年龄上其实算是老奶奶了,本文根据时间脉络梳理了一下这个设计风格。

在做每一个项目或者产品时,都需要根据行业、用户、场景等确定网页或者系统的页面设计,需要了解的有网页设计风格、主题色与配色、页面元素等。

设计风格也有潮流趋势,你了解了每种设计风格的含义与内容后,才能够结合业务来确定你的产品最终采取的方案。

设计是艺术的延伸,艺术发展有自己的时间线,最近很多大热的设计风格在年龄上其实算是老奶奶了,根据时间脉络梳理一下这个设计风格,形成全面的设计认知,和公司的设计同事交流起来能够得心应手、语言相通,掌握一些设计的专业术语与良好审美,也算是产品的必修课。

一 、波普艺术

诞生时间: 20 世纪 50 年代中期

诞生地点:英国

艺术特点:明快突出的色彩、强烈的对比、很强的视觉冲击、表现方式丰富。

二、极简艺术

诞生时间: 1960 年

艺术特点:追求极致简约的呈现效果,并且不接受任何违反这一形态的任何事物,消除作品对观者的压迫力,追求形式上的简单极致、思想上的优雅。

三、孟菲斯艺术

诞生时间: 1981 年

诞生地点:意大利米兰

艺术特点:构图上打破横平竖直的线条,采用波形曲线,曲面和直线,平面的组合;在色彩上常常故意打破配色规律,喜欢用一些明快、风趣、彩度高的明亮色调,特别是粉红、粉绿等鲜艳的色彩;由点,线,面等细小的几何形体做趣味的装饰设计。反对当时非常流行的极简风格和单调冷峻的现代主义。

四、超写实艺术

诞生时间: 20 世界末

诞生地点:美国

艺术特点:真实、场景化、空间感。

五、蒸汽波艺术

诞生时间: 2010 年

诞生地点:最早兴起于日本

艺术特点:常见元素:古典雕塑、(Lo-Fi)低保真效果、Windows95 窗口样式、绿色植物、文字(常见日语文字)。随意、粗糙、制作蒸汽波作品无需画技,把喜欢的元素拼贴在一起即可。

六、MBE插画风格

诞生时间: 2015 年

诞生地点:法国设计师创建

艺术特点:圆润、呆萌、可爱有趣、简洁,演变自线框图Q版卡通画,多种插画风格中的一种。

七、Low Poly风格(低多边形风格)

诞生时间: 1996 年

艺术特点:立体、科技感、三角形,低细节,面又多又小,高度渲染,经常配以柔光效果,把多色元素,用三角形分割,每个小三角形的颜色,取自原多色元素的相应位置。起源于三维游戏中的计算机建模。

八、拟物化设计(skeuomorphism)

代表作品:iOS7. 0 以下,Android、以及iOS7. 0 以下时代的大部分app、锤子。

艺术特点:

  • 界面:模拟真实物体的材质、质感、细节、光亮等;

  • 交互:人机交互也拟物化,模拟现实中的交互方式。传达了丰富的人性化的感情,拟物化本身就是个约束,会限制功能本身的设计。

九、扁平化设计

诞生时间: 2008 年

代表作品:iOS7. 0 及以上,微软的Metro UI,Phone8,Windows8。

诞生地点:谷歌提出

艺术特点:核心意义是:去除冗余、厚重和繁杂的装饰效果。具体表现在去掉了多余的透视、纹理、渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来。同时在设计元素上,则强调了抽象、极简和符号化。简单纯色的简单组合(iOS系)、单色极简的抽象矩形色块(微软系)、大字体、光滑、现代感十足。

十、长阴影设计(Long Shadow Design)

诞生时间: 2013 年

艺术特点:长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常采用角度为 45 度的投影,给对象添加了一份立体感。长阴影快速发展为流行的设计趋势,并经常被应用到扁平设计方案的对象。

这些阴影特别之处在于它们也是扁平的,网页设计师使用没有阴影、渐变的颜色来生成阴影。目前,长阴影设计主要用于较小的对象和元素,如:图标。

十一、3D风格

艺术特点:少量3D效果增加网页灵动性,在扁平化设计上,添加一些非扁平元素,给网站带来了原本缺乏的维度感。

十二、无边框风格

诞生时间:诞生时间不确定, 2017 年流行。

艺术特点:无边框风格是指那些避免使用各类边框的网页设计,这里的边框是指任何类型的装饰性容器,通过去掉这些装饰性容器,加强基本内容的设计感,比如:图片质量和排版布局,从而提升整体因无装饰性容器的视觉表现。

十三、黑板/现实桌面风格

艺术特点:黑板或者现实桌面作为背景元素,不多见,但是设计的好的话,很出彩。

十四、纵向分割

艺术特点:将屏幕一分为二甚至是多栏,在网页设计中使用新鲜的分屏式设计可以方便呈现不同的信息,创造对比,同时划分有效区域,方便用户进行快速选择和视觉聚焦。

十五、超级头版

艺术特点:取代轮播幻灯片,在首页上使用尺寸超大、迷人的精美Banner,而这个超级头版汇聚了对产品的精华总结,从而将网站最重要的内容展示给用户。

十六、像素艺术

艺术特点:强调的是一种风格,具有清晰的轮廓、明快的色彩,不受约束的风格。

十七、极繁风格

诞生时间:17~ 18 世纪

代表作品:巴洛克、洛可可

艺术特点:重复的元素,填充整个页面,裁剪和拼贴设计,大胆地运用色彩和图案来完成百分百吸人眼球的设计。

十八、欧普艺术

诞生时间: 1955 年

诞生地点:法国

艺术特点:被称为“光效应艺术”和“视幻艺术”,“会动”的幻觉图片,内容通常是线条、形状、色彩的周期组合或特殊排列,利用垂直线、水平线、曲线的交错,以及圆形、弧形、矩形等等形状的并置,引起观赏者的视觉错觉,以强烈的刺激性和新奇感致胜。

十九、抽象设计

诞生时间: 20 世纪初成为一种审美准则。

艺术特点:美感内容借由形体、线条、色彩的形式组合或结构来表现。有时抽象艺术的主题是真实存在的,但由于过分风格化、模糊化、重叠覆盖或分解至基本的形式,以至于难以辨认原貌。

设计本身是一个历史绵长的丰富的艺术表达世界之一,设计分为平面设计、环艺设计、工业设计、建筑设计、服装设计、网页设计等,设计风格与形式取决于设计应用的场景和艺术风格本源,这个世界里的内容极其丰富,抓住一条脉络可以深挖下去,我们根据脉络培养审美即可。

我们在进行产品建设中,网页UI设计有集美貌与才华于一身的UI设计师来做,实现有集美貌与才华于一身的前端工程师来做。

但是作为产品汪,对于整体的页面风格还需要有一定的认知,能够根据UI设计师需要的设计需求来收集用户需求与数据、应用场景、产品本身特质,在网页设计上也不能一味追求潮流,而是要综合自己产品的实际情况与行业产品气质进行选择。

欢迎拍砖,一起进步。

Learn more

近期发现多家抄袭广漠官网的同行网站,特说明情况如下:

1、感谢同行们对广漠的认可,但我们并不认可这种抄袭行为。

2、广漠传播官网设计、文案和案例等均为广漠原创,请相关同行停止侵权行为,共同维护行业发展。

抄袭较为严重的相关网站截图说明(其他部分抄袭者不再例举):

1、北京云企悦
http://www.yunqiyue.com
除案例栏目外全部沿用广漠官网设计

 

2、深圳橙米科技有限公司
http://www.szchengmi.com
除LOGO外全部抄袭


 

3、大连SVVSV
http://www.svvsv.com
除LOGO外全部抄袭


 

4、广东柚子网络科技有限公司
http://www.gdyouzi.cn
除案例栏目外基本沿用广漠官网设计



以下是设计元素或文案抄袭公司

1、佛山源创力科技有限公司 http://www.yuancl.com/
2、苏州亿企搜 http://www.cn-sem.cn/
3、北京德尔普网络 http://www.hompy.cn/  http://www.zlsjwhcm.com/  http://www.top3w.net/  http://www.wuhannets.com/ http://www.0596top.com/
4、大连SVVSV网络  http://www.svvsv.com
5、苏州互众网络  http://www.ehuzo.cn/
6、佛山亿优网络  http://www.fsyyseo.com/
7、贵阳匹飞科技  http://www.pifei.net/about.html
8、南通万嘉科技  http://www.daoyutech.com/
9、无锡远诺科技  https://www.wxyuannuo.com/about/

Learn more

2014年下半年,微信帮助捧火了HTML5小游戏,自此国内各行各业开始对HTML5保持持续高涨的关注。接着的2015年是国内HTML5行业迅速发展的一年,在媒体大肆渲染“互联网寒冬”之际,HTML5作品的生产数量和传播广度却居高不下,为寒冬增添一把柴火。

如图,根据百度指数对关键词“HTML5”搜索趋势结果,2015年“HTML5”的指数约是2014年的1.5倍;而HTML5的简单说法“H5”在2015年的检索量是前一年的2倍多,直逼“HTML5”。
 

2015年,国内HTML5的传播仍以移动端为主,但简单的翻页这种低层次的设计已经不再适应大部分受众的需求,HTML5平台也开始由简单的工具应用逐步转型。其中,发展得比较快的是面向商企用户的iH5,自主研发引擎,并于2015年年底添加即时通讯功能和线上交易机制。

为什么是HTML5?
 

Web应用开发新标准

HTML5,第五版超文本标记语言,于2014年10月由万维网联盟(W3C)发布为正式推荐标准。它是HTML自1991年问世以来,最具变革价值的技术规范,历经多年修订与完善才制定完成。

过去,Web开发面临两种困境:

(1)不少人质疑Flash的安全性等问题,却找不到替代它的合适插件;

(2)工程师们抱怨PC端和移动端应用的多次开发,仍旧得为微软、苹果、安卓等系统设计不同方案。

而HTML5提供了良好的解决方案。与JavaScript、CSS等紧密结合后,HTML5能使浏览器不需要类似Flash的插件也能实现桌面应用的交互效果,它的跨平台可用性更令应用的一次开发成为可能。

如上图,Youtube使用HTML5的video元素进行标记后,网页不需要第三方插件就能播放音视频等。因此,HTML5的兴起具有非常深远的意义,它已经从简单的标记语言化身为Web应用开发的先驱。
 

HTML5应用现状

从硬件角度来看,国内手机和平板两种移动设备应用最广,PC端次之,紧接着是电视和游戏设备。

从软件角度来看,桌面浏览器对HTML5的支持高于移动浏览器,最高可达95%;而从整体上而言,移动浏览器对HTML5的支持却优于桌面浏览器。

HTML5具有较好的浏览器向后兼容性,开发者能对浏览器不支持的情形设计各种各样的回退方案。因此,HTML5页面的实际显示性能与开发者、制作平台密切相关。

2015年,越来越多公司在HTML5品牌推广上进行布局。6至7月份起,鸡汤、自媒体等个人作品呈下降趋势,商企用户作品则保持高速增长。在商业需求的驱动下,HTML5页面设计的目的性更强,获得最好传播效果的基本是经过一定时间策划,在团队操作下有针对性地进行投放的企业案例。

相对应地,原有HTML5平台也进行了大面积升级。从平台性质而言,HTML5平台可分为轻营销模板类、功能引擎类和基础工具类三种,分别以易企秀、白鹭引擎和iH5为代表。
 

三类HTML5平台的特点如下——

(1)轻营销模板类:提供类似PPT页面切换的HTML5制作工具,通常面向C端(个人)用户,部分为B端(企业)用户。该类平台的数量较大,只适用于轻度营销,所能提供的页面动态效果局限于翻页。

(2)功能引擎类:提供HTML5网页的开发引擎,通常面向B端用户。该类平台主要提供基于Canvas(画布)的游戏引擎,适用于轻游戏的开发,依赖于开发者。

(3)基础工具类:提供用于页面交互的HTML5可视化编辑工具,主要面向B端用户,部分为C端用户。该类平台只有iH5,采用自主研发的闭源引擎,应用领域广泛,涵盖轻度营销、重度营销、媒体电商内容应用、视频、动画、游戏等方面。

与浏览器多采用谷歌开源引擎的状况相近,国内HTML5平台基本使用国内外开源框架或引擎。但和浏览器面向网页内容显示,只需提供高性能的技术支持不同,HTML5平台面向的是HTML5制作或开发,需要对网页质量负责。因此,使用开源框架或引擎意味着这些HTML5平台进一步拓展业务会比较被动,容易面临同质化的困境。
 

三类HTML5平台的对比

因为整体上移动端浏览器对HTML5的支持优于PC端,2015年HTML5平台主要面向移动端网页的制作和开发。

如上表,三种HTML5平台以PC网站、APP和软件三种形式提供制作或开发工具,成品为网页或HTML5源码。由表可见:

(1)轻营销模板类HTML5平台只能做轻度营销,能实现翻页等简单动效,分为场景展示、电子出版和动画制作三种。如下图为易企秀桌面编辑界面,该类平台最大的共同点在于工具结构以页面为基础,与软件PowerPoint架构相近,能通过增减页面、使用功能组件和点击快捷菜单来调整内容。

(2)功能引擎类HTML5平台的用户专指性很强,主要是有开发经验的技术人员。下图为Egret Wing软件设计师视图下的基本架构,使用HTML5引擎把基础代码流程化,再借助第三方集成开发环境Adobe Air构建可视化工具,就能通过让用户使用软件组件来简化开发过程。

(3)基础工具类HTML5平台提供底层交互型产品,开发目的、设计原理和实现思路都以交互为基础,国内只有iH5。iH5于2015年9月上线,提供HTML5制作工具、工具培训和作品交易等服务。它本质上封装了DOM(文档对象模型)引擎的一个集成开发环境,使用者以设计师为主,适合广告公司、大型媒体公司和公司市场部等使用。

如上图,iH5提供的是舞台、屏幕、页面、多媒体素材、事件、数据库等对象组件,而不是构建好的模块组件。在提供可视化编辑的前提上,它最大程度还原了HTML5页面的开发过程,具有较高的拓展性。由于提供底层交互功能,它的应用领域较广泛,能用于微信推广、网站建设、轻游戏设计、轻APP开发和视频交互等多个方面。

同样是HTML5规范,对HTML5技术与性能的取舍成为国内HTML5平台工具定位和提供服务的差别所在。
 

HTML5行业发展的趋势

伴随着HTML5兴起的是Flash的没落,HTML5能打败在多媒体领域称霸多年的Flash,除了移动设备的跨平台性和较好的多媒体支持外,它的应用范围也广于Flash。比如,Flash动画作品的复用性极低,基本没有模板市场,而HTML5却能作为基础填充材料,用来制作报纸图文等模板。

参考Flash发展的演化路径并结合HTML5的新特性,HTML5近几年会在重度内容、网页游戏、垂直领域解决方案和内容直接填充四个方面有所突破。

(1)内容往重度化方向发展。

重度营销并不完全意味着大项目、高预算、长周期、大团队,而是相对轻度营销以用户生产内容为主,它更注重专业内容的生产。在用户对页面交互能力和HTML5拓展功能的要求提高之际,轻度营销的市场份额会逐渐降低,往重度营销内容转化。

(2)网页游戏往交互游戏方向发展。

尽管HTML5游戏具备无需下载、包含社交属性、开发成本低等优势,但如果没有充分利用HTML5的新特性,加强移动游戏的交互能力,它很难在游戏市场中异军突起。由此,网页游戏未来更有可能结合HTML5优良的通信功能,往跨屏互动等交互特征更明显的形式发展。

(3)垂直领域解决方案往在线应用方向发展。

与HTML5行业密切相关的垂直行业主要包括在线教育、电商和流媒体三种类型。

以世界最大的在线课程平台Coursera为例,授课视频即使用HTML5实现“课间小测”。如下图,在Coursera网站上,当视频播放到特定节点时会出现与课程相关的问题,提供用户选择答案,记录答题情况并反馈答题结果。

(4)传媒业往内容直接填充方向发展。

国内HTML5制作工具基本都提供模板服务,这与HTML5网页较强的复用性有关。网页基础架构设计完成后,修改源码中各元素的参数便能替换素材、改变对象属性,因此HTML5网页能用于制作基础填充材料。在HTML5模板的帮助下,新媒体内容能通过应用母版进行编辑,用户只需后期进行图文内容的替换,因此很有可能成为传媒业转型的契机。

反观国内不同类型的HTML5平台,只有以HTML5提供的新特性为根本,着眼于底层交互才可能适应各行各业对网页开发的需求。因此,基于HTML5元素和属性进行设计的基础工具,未来更有机会占领尽可能多的市场份额。

Learn more

Google上周发布了一篇官方博文,表示Chrome从今年9月开始将全面禁止Flash的后台加载功能。如若此项计划得以实行,那么Google在“去Flash化”的道路上又将前行一步。

实际上,Chrome对Flash的态度一直不太友好。针对用户们的卡顿反馈,Google先是默认关闭了NPAPI插件,随后又禁止了Flash的自动播放功能,而到了今年年底,Flash将成为需要手动操作才能顺利加载的插件之一。除此之外,VR日报还注意到IE和Safari等主流浏览器也正在剥离Flash的控制,Amazon、Facebook、Youtube更是从广告和视频业务下手,相继排除了这项技术的引入。由此来看,Flash在活了21个年头之后看来是要寿终正寝了。

与之相对的是,VR网页则在新的标准下得以建立,进一步排除了对于Flash的依赖。由此促成的新形式编码和流媒体直播等服务的需求,可能间接的砍了Flash最后一刀。浏览器巨头Mozilla早已投身WebVR的制作,试图实现VR网页的标准化。而那些抛弃Flash的“罪魁祸首”,如今都在VR领域中发力,全景视频和直播、VR广告的变革,这些无不影响着Flash的昔日地位。

不过,Flash本身就是基于老旧浏览器而打造的产品。即使经历了数次迭代,也无法逃离生命末期的宿命,而VR的出现可能恰恰成为了技术交替的一个契机。

VR作为新的平台,开发商更愿意建立统一的标准

Flash在PC平台的盛行可能要得益于自己的通用性,由于每个网页的编码技术有所差异,而业内的标准又一直悬而未定,这项技术才能在这20年间成为富媒体的主流形式。然而随着新标准的出现,VR网页已经不需要再沿用原来的Flash模式了。

2014年10月份,W3C(万维网联盟)发布了正式的HTML5标准,这项标准从规划到出台整整耗去了8年的时间。W3C的首席执行官Jeff Jaffe博士随后表示:“Web已经进入了相对稳定的阶段,而统一的模式则需要所有人的帮助。”

全新的VR平台同时也是新标准的绝佳练兵场。Chrome和Mozilla率先做出了表率,他们试图完成VR网页和浏览器的标准化,并在今年早些时候完成了WebVR API的1.0版本。WebVR API不但统一了VR网页的渲染和显示标准,而且还规范了不同硬件之间的操作差异,除此之外还能对桌面和移动平台实行兼容。

Google随后在WebVR的标准上进行了跟进,并制作了一个名为“VR Shell”的内核,允许用户在佩戴VR头显的状态下也能浏览普通的网页。由于传统网页的编码和形式相对混乱,VR Shell目前还不太稳定,但Google也在加紧完善这个内核,以便WebVR在过渡期内能被大众所接受。

不过,某些独立的系统可能会采取自己的“Web VR”模式,Samsung为Gear VR开发的虚拟现实浏览器就是一个例子,但它同样也是基于新的标准打造。而Safari目前虽然还不支持VR网页,但鉴于苹果对于Flash一贯的不待见态度,Safari VR的未来也可想而知。

对于全新的VR网页来说,页面设计和浏览器开发商完全可以使用H5新出台的标准来统一口径。

为了保障移动VR的性能,H5可能是个更好的选择

Flash的稳定性和性能功耗一直为人所诟病,Flash Player的运行失效对于很多人来说可能已经是家常便饭了。早期浏览器的设计由于偏向一体化,Flash在“挂彩”的同时也会引起整个浏览器卡死。

Chrome的分离结构,在某种程度上也是鉴于Flash的不良反馈。在分离设计下,由于每个程序之间相对独立,浏览器就不会受到Flash Player失效的影响,Safari、Firefox随后在10.6和3.6.4版本中也加入了类似的功能。除此之外,调用Flash Player还伴随着巨大的CPU与内存的性能损耗,PC有时候运行起来都相当吃力。

Flash将死,VR可能砍了它最后一刀

Flash虽然在PC端盛行过很长一段时间,但它从未赢得过移动端的青睐,由于移动VR的受众对视频和直播有着一定的需求,这两个问题也将在移动VR中被无限放大。针对CPU性能不足的状况,Flash Player在10.1版本之后加入了硬解功能,利用GPU来减少视频的耗用资源。

硬件解码缓解了性能不足的窘境,但同时又带来了一个新的问题。Flash Player作为网页和硬件的中间层,在夹杂了硬解之后将会大大增加移动端的耗电量。而大部分移动VR本身就有电量和性能不足的症结,Flash此时将会显得更加不适用。

由于各个浏览器有着不同的解码格式(Opera和Firefox支持OGG模式,而Safari和IE9支持H.264,只有Chrome全部支持),因此H5不能在传统的网页中发挥功效。但在WebVR统一标准的帮助下,H5对于移动VR来说可能是个更好的选择。

Html5通过视频标签能够直接定义JS的播放方式,不需要再外挂一层Flash Player,基本上保证了VR浏览器的稳定性。而排除了中间层的两次解码,移动VR的整体耗电量也会小上很多。

Flash在PC平台的富媒体优势,在VR中将被改变

富媒体是一种在Web中通过图形、音频、视频进行交互的方法,Flash曾在传统网页端口有着巨大的富媒体优势,主要体现在网页游戏、弹窗(插页)广告上。

得益于独立统一的特性,Flash最初吸引了一大批具有富媒体经验的开发者,这也为它统治网页生态打好了基础。而随着2010年前后网页游戏和社交游戏的盛行,以及Facebook和Zynga等巨头的帮助,Flash逐渐加固了自己的主导地位。

Flash将死,VR可能砍了它最后一刀

然而,这些内容在VR中都需要作出大幅度的改变。撇开网页游戏的退潮趋势不说,佩戴VR设备进行网页游戏本来就是一种变扭的交互形式。虽然Cocos 3D和白鹭等网页游戏开发引擎已经相继加入了VR模块,但短时间内还很难有成品产出,未来以何种模式出现也仍然值得我们去商榷。

除此之外,VR中的广告形式一直是个悬而未定的难题。依目前的发展趋势来看,Banner、弹窗、插页等形式的Flash广告已经不可取了。在VR日报看来,VR广告对媒介的依赖逐渐变小,转而需求更强的感官冲击。一部分开发商甚至为了单独的广告而打造了游戏形式的Demo体验,这些都是Flash所无法办到的事情。而基于VR网页的H5开发社区一旦成型,Flash在传统富媒体上的应用也将被逐渐取代。

Adobe本身可能也已经意识到了Flash正在日落西山,它们早前就终止了完成度高达80%的ActionScript4.0和AVM3.0项目,随后也裁掉了整个中国研发中心。围绕着Html5和Flash的攻防战也即将结束,虚拟现实将是一个崭新的开始。

Learn more

我们正处在移动互联网快速发展的时代,智能手机和平板也越来越普及,有些人甚至都到了没有智能手机或平板就无法过活的地步。智能手机和平板的普及,也就意味着越来越多的用户会通过移动设备访问互联网。

通过移动设备访问互联网的用户或多或少都有过这样的经历:有些网站压根就没有针对移动设备的网站,哪怕是有,大多都是不够“移动友好”,阅读体验完全跟不上传统的 Web 版本;而且在不同的移动设备上,浏览体验也是大相径庭,让很多用户大为苦恼。

根据相关数据统计,到 2015 年,移动互联网的用户数量将会超过桌面用户。除了智能手机之外,使用平板电脑甚至是电视机进行上网的用户也在持续增加。在这种形势下,怎样让网站尽量兼容各种类型的设备,并确保良好的用户体验,这将是越来越重要的问题。

俗话说,只要有需求,就会有解决需求的办法。基于前文提到的背景和情况,响应式网页设计(Responsive Web Design)应运而生。

那么,什么是响应式网页设计?响应式网页设计是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。换句话说,页面应该有能力去自动响应用户的设备,这样,就可以不必为不断到来的新设备做专门的版本设计和开发了。毫不夸张地说,响应式网页设计这个概念就是为移动互联网而生的!

说完了响应式网页设计这个概念,下面我们再来谈一谈它在具体生活中的实际应用。常言道,民以食为天,前段时间风靡全国的纪录片《舌尖上的中国》瞬间腐蚀了被食品安全所压抑的中国人“吃”的欲望,撩拨了美食大国所铸就的根深蒂固的美食情结。

《舌尖上的中国》播出后,引发了各地网友对美食的疯狂追逐,很多吃货纷纷开始到处搜罗美食,餐饮业自然而然就成了众多受益对象之一。

移动互联网时代到来之前,人们只能通过家里的电脑进行上网搜寻或者听人介绍哪里有好吃的美食。而现在,搜罗美食,首选工具就是智能手机等移动设备。此前,据 Google 的调查资料显示,在今年情人节,62% 的餐馆搜索都是通过移动设备进行的。这种数据其实并不让人感到意外,相信大多数消费者都有过用手机等移动设备查找餐馆的经历。

以上的资料,对于餐馆或者其他不够“移动友好”的网站来说,的确值得他们深思。因为通过移动设备来查找餐馆的消费者越来越多,现如今,餐馆不但要有特色的美食,还要有足够“友好”的移动网站让吃货们能找寻到,这样才能带来客源。

还是前面提到的那句老话,只要有需求,就会有解决需求的办法。目前就有一家名为 QuickFire的网站成功利用响应式网页设计,专门针对各大餐馆推出了这样的服务——建立网站并对餐馆的最新动态做定期更新,更重要的是网站可以兼容任何移动设备,不论屏幕大小、分辨率高低,都能给用户带来最佳的体验。

以上只是简单介绍了响应式网页设计在实际生活中的成功应用,其实响应式网页设计适合各个领域各个行业。因为我们都知道,网站的生命力就是流量,随着越来越多的用户通过移动设备访问互联网,响应式网页设计已经成为大势所趋。

鉴于很多设计师还不熟悉响应式网页设计的概念,也许它在短期内还无法普及开来。但是可以肯定的说,为了使各种尺寸的屏幕及移动终端可以访问到更多站点,响应式网页设计将会被越来越多的移动终端推向主流。

Learn more

相信设计师们或多或少都遇见过这样的情况:一个客户雇佣你进行某项工作,举个栗子,让你设计一个网站。听起来很正常是不是?但是当你真正开始工作之后,估计你会经历不少或无力或尴尬的“呵呵”时刻,而最终,当你严格按照客户的要求将设计改了108遍之后,看到眼前的这个最终成果,在客户说出那句令你彻底傻脸和懵逼的“咦,要不咱们还是用回第一版吧”之前,你很有可能只想说“卧槽这到底是个什么鬼啊”。

 

注意,当你频繁听到下面这些句式,请保持警惕:

1)客户的新想法、新指示像雨后春笋般冒个不停“嘿,我表哥刚跟我出了个好主意,咱们把标题设置成会旋转会发光的怎么样?” “你看,我表哥觉得咱们还是用XXX字体比较好,看着多炫啊。”

2)不断要求你重新设计,把已有的logo和口号推倒、调整一百遍还嫌少

“我知道刚刚让你调整过网站的原色。。。但是我们能不能再调整一下,就用纯黑背景加一抹亮蓝色。。。”

“这句口号不行啊,突出不了咱们网站的情怀呀。。。”

3)客户试图干预整个项目的进程

“你能不能给我做10个网站首页出来,这样我才能选一个最喜欢的呀。”

4)客户对于网站的功能并没有一个明确的理解

举个栗子:

客户:咱们能不能在网站底部加一个捐赠功能的按钮?

设计师:为啥?

客户:因为我看别的网站主页上就有啊,我觉得加上还挺好看的。

设计师: 。。。(卒)

如果挨个罗列这些句式,简直三天三夜都说不完。

但是,说出这些不是为了吐槽或逗乐的,重点是当类似的情形真的发生了,到底要如何解决。往轻了说,一旦你开始妥协,这就是滚雪球一样的效果,会浪费你更多的时间(甚至金钱);往重了说,这是客户根本就不信任你的工作能力。

所以,到底要如何才能把客户的品味掰过来呢?

请跟着我念:我才是专家我才是专家我才是专家啊!

当然,不要直接冲着客户大声嚷嚷这句话,这不是咒语,你嚷嚷一百遍也是没有用的,让我们来讨论一下如何用春风化雨般意味深长的方式在不知不觉中把客户的品味给掰到正轨上来吧。

首先,回顾一下你和客户之间的合约

请相信,你和客户之间的合约绝对是个“磨人的小妖精”,只要你愿意,它可以有着近乎荒谬的重要性。

举个栗子,如果客户要求你做出某些修改,你可以先回顾一下合约上明确约定的“可交付成果”,然后你可以:

1)“嘿, 你看。。。这里。。。这些并不在我们合约规定的范围之内啊。。。”

2)如果你愿意进行这些修改,你可以说,“嗯,这些修改都是可行的,但是你需要为此额外支付XXX元。”

当人们听到“额外支付”这句话之后,很容易就会撤回之前刚说过的“我有一个非常赞的点子”。这样一来,要么他们不再坚持让你修改,要么你进行修改然后得到额外的报酬,怎么看都是双赢的局面啊。

但是,这只适用于你和客户之间的合约内容足够明确的情况,如果合约没有这么详细呢,只说一句“哼,我不改不改就不改”可是不能让客户满意的。不要着急,请继续往下看。  

其次,你需要坚持自己的主张

要记得,在这个项目面前,你才是内行,是专家,是权威。你应该很清楚(还是以网站为例)这个项目的最终目标是什么,而如果客户要求你修改的地方其实不利于达成最终的项目目标,那么你就有责任有义务为客户解释、说明这一点,以你专家和权威的身份。

当然,很有可能,客户会有合理的理由要求你进行某项修改(而这项修改其实并不利于项目本身),所以你要准备先听取他们的“合理理由”,然后准备驳回之。不要优柔寡断犹豫不决,把项目彻底搞清楚,一锤定音,拒绝无底线扯皮。

以及,你需要适时地打击对方

当然,这里不是要求你卷起袖子跟人干架的。

在你确定要坚持自己的主张之后,面对客户的“不正当修改要求”,你可以利用自己娴熟的专业技能或写方案或绘草图或建模型来告诉客户,如果按照他们的要求修改,整个设计会被毁成什么样子。

奇怪的地方在于,客户们也会感到激动——如果能有一个与项目相关的新鲜视角把他们拉出无休止的“修改圈”的话。如果客户喜欢这个新方案,那么他们自然不会继续要求你进行修改,而如果他们还是不满意,还是坚持要求修改,请返回上面两条。

或者,你还是把客户炒了吧

如果综合考虑了客户和项目的实际情况之后,你发现坚持自己的主张没有用,想要用自己的专业技能折服对方也没有用,那么你可以考虑把客户炒了。 这样做很困难,尤其是对于新晋的自由设计师来说。

但是,这样至少比不久之后人们指着某一份设计作品说“快看,这设计真傻×”要好一点吧。

Learn more

早在2013年iOS7发布以来,扁平化设计就轰动了互联网世界。从那以后,它就持续发扬光大,并且发展出数量惊人的变种。

随着带有扁平化色彩的Google Material design规范的推出、卡片式设计的广泛采用、还有排山倒海的极简化趋势——似乎在可预见的未来,扁平化设计会成为主宰风格。

正如2015与2016年的网页设计趋势一书所描述的,扁平化设计正在进化:

“最初的扁平化设计是严格的扁平,极少有强调,注重极简设计。近来我们则看到了更多吸引眼球的元素,例如阴影与着色的暗示。尽管纯粹的扁平主义者会反对,但设计圈接纳了它,它与其他流行的设计模式能够有效结合。”

以往波澜不兴的风格发生突变,引发了一连串有趣的问题。

如果它是如此的流行,那如何与众不同地将它运用在自己作品中呢?你要的是扁平化设计,而不是平淡无奇。巧妙的运用,与粗劣的复制,这之间有何区别?

本文讲的正是这个。我们看看扁平化是如何进化的,怎样能使你的设计引领潮流。

 

长投影

我们所谈论的设计应当是扁平的,但阴影能产生纵深感,虽然这似乎有点违反直觉。

但这些细微元素能为设计增添一丝情调,又不至于太引人注目。实际上,他们仍然可以算作留白的一部分,虽然他们从技术上说确实是一种视觉元素。

毕竟,没有光哪来阴影?

更重要的是,长投影为画面增加了一种反差元素,使得整个视觉体验变得有吸引力。要达到想要的效果,甚至投影都不必那么长。

请看:

image04

柔和的色彩和短投影呈现出一种美妙的视觉元素,并不会抢了页面导航和主要信息的风头。请留意这些阴影如何令画面明亮起来。也使得图像仿佛脱离了页面。投影、扁平化的内容区域、还有柔和色彩这三者的结合,与网站上的动画元素融合得非常好。

说到颜色,应该很容易引出我们下一项扁平化特性。

色彩运用:鲜明色彩与辅助色

色彩是扁平化设计的重要能力之一。

明亮、积极的色调,成就了许多扁平化的设计,用以弥补视觉表现力上的欠缺。扁平化设计中的投影装饰,看起来跃然纸上,为设计增添了鲜活和动感。这与其他动态视觉元素能够很好配合,例如视觉差滚动和CSS动画。

image07

而且,这些明亮的色彩能作为一种辅助色,用在柔和的背景上。这似乎成为了一种标准的未来趋势。就像这样:

image06

深色背景上的亮色图片绝对足够给人留下深刻印象。强烈对比的视觉元素,更是与如今的扁平化趋势形成完美的配合。通过简单或夸张的手法来突出事物,其中也包括字体。

Web Design Book of Trends 2015-2016

简单/夸张的字体

如今的“扁平”字体通常由单一字体组成,或者是两种非常接近的字体。这一点造就了易读、易辨识且默默无闻的字体。这正是关键所在。

你不希望字体分散注意力。如果字母带有过多的风格与个性,就会阻碍用户的阅读流程。

image01

最好的做法是“隐形的设计”,换句话说,就是做出让用户不会注意到的设计。因为每当他们留意设计,就会丧失沉浸式的体验。

当然,你也可以走另一个极端。在处理极简式界面时,你得调整所加入的元素。在空白背景上使用大的粗体字,可以为界面的文案营造出独特的语境。如果界面没有其他任何视觉元素,你就必须呈现出某种美感,而且能用的也只有字体和颜色。

image00

幽灵按钮

要做到漫不经心——甚至如空气般透明——那我们就得花点功夫来谈谈幽灵按钮。

你能一眼就找出下图中的幽灵按钮吗?它们并不显眼,这正是关键。透明按钮给用户一种暗示,导航项未必会从下层的视觉重点上抢夺注意力。

image02

结论

总而言之,扁平化设计的元素与其演化的成果,全在于吸引注意力。

无论是使用浮夸的背景或焦点图等视觉元素,还是极力克制,只用文字或导航提示——背后思想都是相同的。使用少量元素,按照极简方式排布,在页面上创造出对比,正确引导用户的注意力。

扁平化是潮流中的先行者。究其原因,是因为设计师能够通过各种方式,在简单的界面内体现多层次的复杂性。

我预料扁平化设计会作为一种趋势,求新求变,持续演进。同时保持最核心的简洁,使它引领潮流。

Learn more

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

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

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

一、超高逼格(放大看)

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

二、充满个性(缩小看)

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

7lj20151125

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

6lj20151125

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

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

三、品牌感强(看首屏)

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

5lj20151125

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

四、符号运用(看细节)

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

4lj20151125

几个国外to B网站的图标

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

3lj20151125

AWS 首页部分位置

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

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

四、元素呼应(看联系)

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

2lj20151125

Cloudera首页三个部分的对比

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

1lj20151125

Basho各网页截图对比

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

五、更新速度(看变化)

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

hb20151125 (1)

Foundation首屏前后对比

hb20151125 (2)

Foundation首屏图标前后对比

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

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

 


Learn more