作为互联网产品,网站扮演着举足轻重的角色。它既需要满足用户视觉上的艺术体验,又不可忽略通过其所传递给用户的正确商业价值。因此,网站视觉设计该如何平衡艺术与商业价值?又需要掌握哪些商业网站的设计思维?

相信网站视觉设计的重要性大家应该都清楚,对于访客来说,网站的框架、交互逻辑等这些都是其次的,访客首先感受到的是网站的视觉设计,同时通过视觉也能够直观地表达出我们所要传递的价值。因此,我们在建设网站时,一方面需要确保网站的视觉效果足够优秀,另一方面需要保证视觉能够传递正确的商业价值。

网站视觉设计需要平衡艺术与商业。

艺术与商业的本质其实是感性与理性,两者之间没有绝对的好与坏,相辅相成才是发挥价值的关键。

企业以盈利为目的,其网站不可避免也附带了商业属性,甚至是网站本身就是为了商业而创造出来的,其商业价值占比也更重。但人类作为视觉动物,视觉感受对于访客来说尤为重要,视觉上的演绎比起网站其他内容,更会影响网站的可信度,因此,网站的视觉起码需要保证符合受众群体的基础审美。

我们常见的企业网站存在着一个严重的问题,缺乏品牌辨识度,假如你把左上角的品牌LOGO遮住,你可能完全看不出这是那家公司的官网,又或者把左上角的品牌LOGO替换一下,就成了别家公司的企业官网,这是网站严重缺乏品牌视觉识别所导致,这种网站无法让访客记住其品牌,更无法在访客心里占领一席之地。

品牌基础VI设计的应用是最基础也是最容易忽视的细节,它不仅是存在于初期建站,更是在网站迭代中,持续保持企业网站差异化的关键。

如何设计一个高辨识度的网站?VI(视觉识别系统)是品牌的视觉符号化,是品牌识别中最具传播力和感染力的部分,它可以将品牌识别系统的非可视化内容,转化为静态的视觉识别符号,它包含了品牌LOGO、标准色、象征图形、标准字体等等。另外还会包含品牌核心价值和个性,不同的品牌VI是各个品牌之间形成差异化的根本原因之一。

因此,我们可以通过与品牌VI相结合的方式进行设计,品牌VI可以有非常丰富多样的应用形式,在广泛的层面上进行直接的传播,能够在不同场景中的进行应用,让人们快速辨认出该品牌。

品牌LOGO则是最具辨识度的视觉符号,通过提取LOGO中的基因,延用到我们网站中,更有助于提升品牌辨识度。我们可以从两个维度来提取:1. LOGO的“形”。

首先,我们可以通过提取logo的形状作为网站视觉设计中的「视觉符号」,也可以参考VI手册中的「象征图形」进行延展,提取logo外形结构做成相应的icon或是动效等,是logo元素的直观体现。

举个例子,天虹的logo是一抹橙色极简的彩虹形状,天虹企业简介的Banner以及每个页面的底部导航,都有将Logo这一特征延展出来的图形设计。

这种方法需要我们很好地提取logo中的部分结构,或根据造型转变为动效、icon等,这样在网页中的融入感是十分可观。

2. LOGO的“色”。

提取logo中的标准色或代表性的颜色与网页元素相呼应,也是一种常见的方式。将Logo颜色通过网站中的文字、页面板式、icon设计表现出来,这是很好的一种呼应方法。

比如:绿色是绿革的标志性颜色。打开绿革官网,可以清晰直观地看到绿革将logo中的两种绿色元素,融入到网站界面UI中,需要突出的文案也会运用这两种绿色去做表达和强调。

在网站设计中,我们可以将标准色换到标题文字、icon、控件。访客打开网站时会很容易被这些颜色吸引,也不会感到突兀,合理运用logo颜色,可以统一网站的整体视觉,且做到突出重点与更有效地传达信息。

品牌VI在网站设计中的应该如何应用?品牌VI的应用常见的方式就是在icon图标的设计上,icon作为网站的重点图形,能够让访客感知品牌,精致的icon可以让表达更简单高效,要打造一套精致的icon,我们可以从识别性、规范性、整体性和品牌感四个方面着手。

icon设计中的品牌感是将品牌VI应用到网站的关键,比如上方的那套icon,是由乐逍遥网站设计根据英威腾本身的品牌色彩和品牌调性进行设计,应用于官网是这样的:另外,icon是网站中不可或缺的元素,充当路标,让访客能知道点击后下一步是什么,也就有明确的心理预期。

如果icon按钮不够明确,访客可能会不知道下一步是要购买产品或者注册用户的步骤,并且可能直接浏览网站后就直接离开。

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

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

举个例子,这是一家高端的共享办公室服务企业,从他们的品牌VI中可以感受到高端、轻奢、个性等关键词,在其官网中,我们可以看到其与众不同的板式设计,一眼就能感受出其品牌调性。

除了静态的图形设计,品牌VI也可以融入网站动效,利用品牌LOGO的设计元素和结构,进行设计的动效,可以让整个网站更有品牌风格。

一个好的动效是能够满足网站功能的表达,强化品牌特质,而不是只追求表面炫酷花哨的效果。

在网站视觉设计中,品牌VI的应用不仅能够形成区别于同行的差异化,为品牌赋能,还能通过规范化的VI应用,提高访客对其品牌的信任度。

品牌的基础VI设计应用于网站是我们的常规操作,但要注意细节,别忽视了其作为网站基础的重要性,对于网站视觉设计,我们在保证基础设计无误的情况下,需要深入到思维上,一个网站的设计看似简单,像是色调、排版,都是设计师的基础功夫,但是要真正做到一个优质的网站,其实并没有想象中那么容易。

开头我们有提到:视觉设计如何平衡艺术与商业?大多数设计师在初入职场时,都不具备商业思维,首先会经历一段自我怀疑的过程:完成一个稿件后,反反复复被要求改稿,始终无法达到上级的要求,个人价值开始逐渐模糊,沦为一介改稿工具人。

在我们看来,企业网站的视觉设计必须具备商业思维,也就是视觉设计需要体现其想表达商业价值,因此,在建设企业网站时,我们需要记住一下几点。

不为设计而设计不是将艺术“一棒敲死”,也并非抛弃创新创意,而是应该更注重于强化产品,给满足需求的产品力加持。

市面上有很多花里胡哨的网站,第一眼可能能够惊艳到你,但是再深入只是空洞,事实上,能够让访客长时间记住你的并非第一眼,而是其内在,也是我们一直坚持的长期主义价值。

过于强调设计、艺术、创意,不仅会给网站带来开发难度,更是给访客浏览带来沉重的负担。

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

设计需要理解功能目的,为什么策划这个功能?如何通过设计让访客使用更顺畅?如何让访客爱上这个功能?这都是设计需要不断探讨和思考的问题。这时设计与产品之间通过产品思维进行联动,能够确保核心目标一致、步调一致,真正创造出一个有价值网站。

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

我们可以参考以下提高用户体验的关键因素:网站的视觉设计一方面需要服务于内部,另一方面则服务于用户,内部指的是内部需求,比如上级、老板等他们的视觉审美,这是不可避免的,其中平衡的技巧在这里就不过多讲解了。

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

举个例子,儿童教育服务的品牌网站,在惯性思维中,大多数人会将其设计得更偏向儿童向,迎合儿童的喜好,但是,真正浏览这个网站的访客其实是父母,因此,从偏向儿童向的思路开始就是错误的,这也是很多企业建设网站的时候会掉入的误区,了解用户是设计不可缺少的一步。

增长思维作为增长建设三大思维之一,也是三大思维中最能激发网站商用价值的思维。

在视觉设计当中,运用增长思维能够有效强化网站,加强网站价值。

我们需要先探讨“网站内容中哪些信息最重要?”,“传递这些信息的目的是什么?”例如,一个促销活动版块的营销点是免费领取资料,我们需要理解:最打动访客的是资料还是“免费”,是资料的图片需要更突出还是“免费”相关文案。

在商业之下,设计也需要理解营销,也需要懂增长。

视觉动线是指人们在阅读时,视觉移动时所形成的方向路径。

早在十多年前,用户体验专家雅各布·尼尔森博士提到“人们很少逐字阅读网页,相反,他们扫描页面,挑选单个单词和句子”。

正是如此,人们在阅读的时候才会形成几种常见的视觉动线规律。

基于这两种常见的视觉动线,我们在做网站的板式设计时,可以更合理地策划视觉动线。

其好处不仅能够帮助访客快速阅读,快速获取信息,提升用户体验,还可以帮助我们引导访客阅读预设的信息,高效传递高价值信息,提高营销效率。

视觉层次应该很好理解,即人们在阅读时,能从视觉中感受到信息的层次,优秀的视觉层次能够非常高效地引导。

访客内容,并且通过信息的优先级设计能更直观地帮助我们传网站达成相应的数据指标。

比如下面两个示例:视觉动线可以作为网站整体的板式设计思路,而视觉层次则是单个版块的设计方向,版块的视觉层级设计应分为三层:第一层:访客扫一眼就能理解整个版块的主要内容;第二层:访客通过仔细浏览能够获取关键内容;第三层:访客想深入了解可以查看更多,引导深入。

通过上述三层,即能有效实现我们增长的目的,常见的设计技巧为:通过「大小」、「色彩」、「重量」形成信息之间的层级对比,建立信息优先级。

除此之外,我们在策划一些网站转化路径时,还涉及到了「CTA 行动号召按钮」的设计,这在网站的增长思维中常见的应用,我们必须确保CTA足够显眼、突出、目标清晰,常规技巧包括:颜色对比、放置显眼位置、层级引导、文案简洁清晰。

通过这两个基础的设计理论以及增长思维的结合,我们可以延伸出很多合理的设计思路,形成有理有据的设计语言,有了方法论才是真正的有效设计,而非“摸瞎过河”。

网站的视觉设计可以被视作一种艺术形式,但与纯艺术截然不同,网站的视觉设计需要建立在牢固的科学基础之上,以理性客观去审视一下这样设计是否真的能有效传递价值。

视觉设计的本质是什么?很多人认为只是单纯的美,或者无非就是关于审美的答案。其实,这种理解是十分表象的,大多数人并没有理解视觉设计的根本价值。

视觉设计是网站的一个重要层面,网站作为互联网产品,则其视觉设计的本质是价值传递,我们一直以增长思维和产品思维与视觉设计相融合,就是为了实现高效传递高价值信息。

访客通过对视觉信息的感知,来决定自己行为。当我们从信息的角度去理解视觉设计时,可以打破惯性思维对我们的限制,因为视觉设计是一个由抽象信息转换为图像信息的过程,理解这层道理才能真正打造出一个具有高颜值和高价值的网站。

综上所述,以上就是乐逍遥网站设计介绍网站设计需要掌握哪些思维,网站配色和网站内容规划,希望可以帮助到对此感兴趣的朋友们更好的理解和加深对网站建设开发的印象,共同促进网站开发技术的学习与稳固,助力优质网站的崛起。

网站作为互联网产品如何平衡艺术与商业,网站设计需要掌握哪些思维?相关推荐

  1. 互联网产品初期需求确定与数据库模型设计——基于Visio和Xmind

    很多互联网产品有个共性,就是其业务核心在数据库中,各种客户端包括网页.桌面.手机App,本质上只是将数据库中的数据,按照一定的结构和组织呈现在用户面前. 因此对于一款互联网产品的初期开发,数据库模型的 ...

  2. 互联网产品经理(PM)的工作内容和职责

    互联网产品经理的角色和职责在不同的互联网公司会存在一定差异,但是一些关键职责是任何一个产品经理都应承担的,下面我们按照产品阶段将互联网产品经理的职责整理为一下五个方面: 一.市场调研及用户研究 即研究 ...

  3. 如何规划设计一款成熟的互联网产品?

    想要开发一款成熟的互联网产品至少,需要以下7个设计流程. 产品的构想阶段: 观察生活 观察生活,原创的产品创意一般来源于生活中事物的观察和思考,比如在美团.饿了么一类的外卖平台出现之前,就有外卖行为, ...

  4. 个人网站如何转型为商业网站

    网站没有价值,商业化就无从谈起.一个网站的价值,主要体现在以下三方面:     1: 规模性(量):网站必须已经具备了一定的规模,包括一定量的内容(页面数),或一定量的用户,或一定量的问量人数; 2: ...

  5. 如何制作个人商业网站

    利用个人商业网站生财也是SOHO一族发家致富的重要途径.虽然现在很多网络公司都破产倒闭了,但是中国几千万网民构成的网络虚拟市场也给了我们巨大的商机,眼光独到的人总能在里面找到赚钱的门道,CARBOY. ...

  6. 外贸网站如何合理搭配色彩——摘自外贸宝-外贸网站建设

    简单而美丽的色彩往往使人心情愉悦,在外贸网站制作的初期网站选择什么样的主色调也是很重要的内容,因为网站的美观直接影响到国外买家在购物过程中的用户体验,网站设计的漂亮可增加买家对网站的友好度和信任感,不 ...

  7. 做一个商业网站要多少钱?

    经常看到有人问:做一个商业网站要多少钱? 有人说要几十万!有人说要几万! 有人说要几千! 还有人说要几百! 到底哪个是真的?徽剑的回答就是这些都是真的.我们来看下: 1) 最简单的建设方式:买一个虚拟 ...

  8. 互联网产品 从设计到运营 这中间提高需要关注的网站

    互联网产品 从设计到运营 这中间提高需要关注的网站 https://github.com/edagarli/resourcecollects

  9. 产品必备技能(三):互联网数据分析师、产品经理和运营常用数据网站合集

    文章目录 中国互联网络消息中心 百度指数 阿里指数 腾讯大数据 友盟+ DCCI互联网数据中心 艾瑞咨询 TalkingData 易观 App Store App Annie APPDUU 清源火眼 ...

最新文章

  1. 每三个数换行 用C语言表示,关于换行符:使用fscanf()读取每行3个数字的文件,为什么“%d%d%d%* c”和“%d%d%d”一样好?...
  2. java基础(二) 自增自减与贪心规则
  3. SLAM学习--帝国理工学院机器人课程slam部分讲义(附下载链接)
  4. Android中GC的触发时机和条件
  5. CCF201604-2 俄罗斯方块
  6. 【深度学习】Batch Normalization详解
  7. 要把AI建在赤道上的华为,为何用全栈全场景方案打响第一枪
  8. 面向对象——类设计(六)——算法类
  9. 使用bottle进行web开发(9):文件上传;json传递
  10. “酸碱体质理论”是个骗局
  11. c语言输入字符计算器,C语言编写简单计算器
  12. Windows 10 使用Easy Sysprep V5 新版封装软件的图文封装教程
  13. 如果判断小米MIUI的NFC权限、后台弹出界面权限是否禁用
  14. AttributeError: module ‘hanlp.utils.rules‘ has no attribute ‘tokenize_english‘
  15. 如何写好一个2Take1 Lua - 初步认识Lua
  16. 小学计算机社团活动安排,小学计算机社团活动计划
  17. html把一张图片动态的代码,AI不仅会P图了,还能让照片“动起来”!
  18. 机器学习中的L1和L2正则化项
  19. Javascript 设计模式之外观模式【讲师辅导】-曾亮-专题视频课程
  20. 洛谷P2345 MooFest G

热门文章

  1. 面试官说“一开始工资不会给你太高,你可以接受吗?” 怎么怼回去??
  2. 微服务化与DDD—分层架构、洋葱架构、六边形架构 架构设计
  3. 模态振型的一些概念解释
  4. 关于计算机与网络导论的论文,计算机科学导论论文
  5. python打开网页并输入数据_使用Python登陆网站读取表格数据
  6. CHERRY G80-8113 软硬编程教程
  7. ieee 754四字节转浮点数c语言实现,IEEE-754标准浮点数,十六进制与十进制转换方法(附C代码)...
  8. 计算机专业c语言用的软件,计算机C语言模拟练习
  9. 如何实现基于微信小程序的人脸识别
  10. echarts 3D地图点击事件