对于用户访客来说,网站的框架、交互逻辑等这些都是其次的,访客首先感受到的是网站视觉设计,同时通过视觉也能够直观地表达出我们所要传递的价值。因此,我们在建设网站时,一方面需要确保网站视觉设计足够优秀,另一方面需要保证视觉能够传递正确的商业价值。网站视觉设计,起码需要保证符合受众群体的基础审美。所以在深入探究之后,Pixso带你从三个维度解读大厂网站视觉设计。

网站视觉设计

1. 品牌基础:VI设计的应用

VI是品牌的视觉符号化,它可以将品牌识别系统的非可视化内容,转化为静态的视觉识别符号,包含了品牌LOGO、标准色、象征图形、标准字体等等。另外还会包含品牌核心价值和个性,不同的品牌VI是各个品牌之间形成差异化的根本原因之一。

因此,我们可以通过与品牌VI相结合的方式进行网站视觉设计。品牌VI可以有非常丰富多样的应用形式,在广泛的层面上进行直接的传播,能够在不同场景中的进行应用,让人们快速辨认出该品牌。品牌LOGO则是最具辨识度的视觉符号,通过提取LOGO中的基因,延用到我们网站中,更有助于提升品牌辨识度。我们可以从LOGO的形与色中提取元素,运用到网站的风格,颜色,icon,板式等设计上。

VI设计的应用

1.1 颜色设计

提取logo中的标准色或代表性的颜色与网站元素相呼应,是一种常见的方式。举个例子,Pixso的Logo是一个蓝紫红渐变的P字母,Pixso官网的banner以及颜色风格等,都有将Pixso的Logo的特征展现出来。在网站视觉设计中,我们可以将标准色换到标题文字、icon、控件。

访客打开网站时会很容易被这些颜色吸引,也不会感到突兀,合理运用logo颜色,可以统一网站的整体视觉,且做到突出重点与更有效地传达信息。

Pixso官网的颜色设计

1.2 ICON图标设计

icon作为网站视觉设计的重点图形,能够让访客感知品牌,精致的icon可以让表达更简单高效,要打造一套精致的icon,我们可以从识别性、规范性、整体性和品牌感四个方面着手。

Pixso官网的ICON图标设计

  • 识别性:icon的作用即是帮助访客理解网站信息,特别是在没有文字说明的情况下,icon的设计需要具备让访客快速认出的高识别度,不能让访客产生疑惑。

  • 规范性:每个icon要保持视觉大小、色彩等一致性,以及图标饱满度等细节都需遵循同一规律,例如:绘制风格是否一致,使用的圆角或直角是否统一等等。

  • 整体性:除了icon自身的设计之外,整体的设计风格要与网站基调达成一致,不同网站有不同定位,面向的目标访客群体自然有所差别,那么整个网站icon设计也不一样。

  • 品牌感:提升品牌辨识度离不开品牌感,icon设计要与品牌调性、理念相符合,传达给访客一致的感受。比如:提取品牌色、采取品牌图形作为图标设计视觉元素,从而加深访客对品牌色的感知。

icon设计中的品牌感,是将品牌VI应用到网站的关键,比如上方的那套icon,是由Pixso本身的品牌色彩和品牌调性进行网站视觉设计,应用于官网是这样的:

Pixso官网的网站视觉设计

另外,icon是网站中不可或缺的元素,充当路标,让访客能知道点击后下一步是什么,也就有明确的心理预期。如果icon按钮不够明确,访客可能会不知道下一步是要购买产品或者注册用户的步骤,并且可能直接浏览网站后就直接离开。

1.3 版式设计

版式如何融入品牌调性是很多设计师会忽略的一点,访客来浏览网站时,首先感受到的第一点是色彩,第二则是版式,也就是整体给访客的感觉。

符合品牌定位且具有辨识度的网站版式设计应该怎么做,它更需要从品牌特性中提取,无法像icon一样从品牌logo和标准色中提取元素就可以做到的,更多是一个风格化的网站视觉设计。

举个例子,Pixso是一款互联网在线协同协同软件,从Pixso的品牌VI中可以感受到互联网、高级、个性等关键词,在其官网中,我们可以看到其与众不同的板式设计,一眼就能感受出其品牌调性。

Pixso官网的板式设计

2. 平衡网站视觉设计艺术性与商业性

大多数设计师在初入职场时,都不具备商业思维,首先会经历一段自我怀疑的过程:完成一个稿件后,反反复复被要求改稿,始终无法达到上级的要求,个人价值开始逐渐模糊,沦为一介改稿工具人。在我们看来,企业网站视觉设计必须具备商业思维,也就是视觉设计需要体现其想表达商业价值,因此,在建设企业网站时,我们需要记住一下几点:

2.1 不为设计而设计

市面上有很多花里胡哨的网站,第一眼可能能够惊艳到你,但是再深入只是空洞,事实上,能够让访客长时间记住你的并非第一眼,而是其内在,也是我们一直坚持的长期主义价值。过于强调设计、艺术、创意,不仅会给网站带来开发难度,更是给访客浏览带来沉重的负担。

商业环境下,网站视觉设计的本质应该是强化产品,升华价值,实际上,设计同样需要具备产品思维,增长超人建站更是将产品思维全流程化,这种模式下,每一环都串联起来,不管是用户体验,还是价值传递都非常有利。

产品思维

2.2 重视UX用户体验

我们一直在讲网站视觉设计,视觉设计不仅是静态形式,还可以是动态形式,也就是网站上的交互动效,交互不可避免涉及到的领域就是「用户体验」。08年苹果推出AppStore,App兴起至今,用户体验就广为人知,在App的设计领域更是奉为“宗旨”,当然,在网站设计上同样如此,“以用户为本”本就是产品的关键价值,这是我们不可忽视的方面。

我们可以参考以下提高用户体验的关键因素:

  • 有用:内容能够满足需求。

  • 可用:网站的内容应该很容易被找到。

  • 可取:设计元素应该贴合情感且具备可欣赏性。

  • 可发现:网站内容容易被定位、被找到且可导航。

  • 无障碍:为有障碍的用户提供帮助。

  • 可信:网站内容应该有权威性,且值得被相信。

重点还是在于用户身上,也就访客,先前通过市场调研分析出访客画像,可以掌握对访客的审美基础和交互逻辑认知,结合起来进行网站视觉设计,当然我们也提倡尽可能简化交互,并且让网站贴合访客喜好,内容一目了然。

Pixso资源社区插画

3. 运用增长思维提高网站商业价值

增长思维作为增长超人网站建设三大思维之一,也是三大思维中最能激发网站商用价值的思维。在视觉设计当中,运用增长思维能够有效强化网站,加强网站价值。

我们需要先探讨“网站内容中哪些信息最重要?”;“传递这些信息的目的是什么?”

例如,一个促销活动版块的营销点是免费领取资料,我们需要理解:最打动访客的是资料还是“免费”,是资料的图片需要更突出还是“免费”相关文案。在商业之下,网站视觉设计也需要理解营销,也需要懂增长。

Pixso资源社区插画

4. 推荐使用在线协作网站设计工具

网站视觉设计可以被视作一种艺术形式,但与纯艺术截然不同,网站视觉设计需要建立在牢固的科学基础之上,以理性客观去审视一下这样设计是否真的能有效传递价值。Pixso是新一代设计协作工具,不仅实现了和Figma、 Sketch、Adobe XD 的无缝衔接,更基于优秀的组件变体、自动布局等特色功能,让UI设计师在线上就可以尽情自由创作。作为一款为本土设计师量身打造的国产设计工具,因其实时协作、精细化设计工具等特色功能,收获了广大使用者的喜爱。

Pixso协作功能