恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
设计师必须知道的 | WEB品牌官网设计进阶知识
0.0°
2019-05-22 原创文章 教程 举报 3276 28 16 2

一个好的国际品牌网站,可以向全世界的用户展示企业的风采、产品、服务等信息,在全球范围内强化品牌形象,增加更多的销售机会。同时,还可以收集用户的需求、解决部分售后问题。既然建立一个高端大气上档次国际品牌官网,可以带来如此多的益处,我们应该如何打造呢?


Image title



一、品牌网站的结构


做网站和写文章一样,也是从结构开始构思的,第一章节写什么,第二章节写什么……最后一章写什么;网站的一级页面(首页)展示哪些内容,二级页面展示哪些内容,三级页面展示哪些内容,大的框架定好之后,再针对每个页面进行细节设计。


Image title


由于互联网中信息量极其庞大,为了向用户展示更多有价值的信息,搜索引擎会优先抓取每个网站中相对重要的页面(即权重较高的页面),页面的权重按照一级页面> 二级页面> 三级页面> 四级页面> …… 依次往后递减。页面层级越高,用户的到达率越低,因此网站的层级不宜设计得过深,清晰的网站结构可以帮助用户快速获取所需信息。



二、导航


品牌网站的导航是需要精心设计的,好的导航是用户的指路牌,它总是能带领用户去到想去的页面。


1.主导航


下拉的图文并茂的导航是首选,普通的文字导航不够直观,图片可以让用户感受到产品的外形和颜色,搭配文字使用容易形成记忆,发挥视觉锤语言钉的效果。


Image title



2.面包屑导航


面包屑导航的概念来源于一个有趣童话故事,迷路的小孩利用撒下的面包屑追溯回家的路。面包屑导航可以让用户了解当前所处的网站位置,以及当前页面在整个网站中的位置。面包屑导航一般出现在网站的主导航下面或者网站底部导航的上面。


Image title


3.网站底部导航


或许有人会有疑问,网站的顶部已经有导航了,为什么底部还要再设计一个呢?

其实,网站的底部导航是很有必要的。相较于顶部导航,底部导航是全部铺开的,当我们浏览到网站底部的时候,可以直接切换到想去的页面,十分便捷。


4.网站地图


当用户找不到想要的页面的时候,有两种方法,一种方法是使用站内搜索,还有一个就是查看网站地图,因为网站地图是整个网站的最详细的目录。同时,网站地图清晰的结构,有利于搜索引擎抓取及收录。



三、内部链接


有些网站的页面很多,但是产品经理、设计师在设计页面的时候,没有将这些页面联系起来,从而出现了网页孤岛。孤岛页面带来的不良影响是,如果当前页面做得平平淡淡,没有用户需要的信息,用户会离开网站。


网站页面的关键词内链密度建议保持在6%~8%之间,在当前页面平平淡淡或者十分吸引人的时候,可以引导用户点击关键词内链,去更多的页面,让用户在网站里流连忘返。

一般内链的设计方法为:同类产品推荐、查看所有产品/文章、上一个产品/文章、下一个产品/文章以及各类导航等。


Image title


 

四、网站首页


使用大图片或者全屏背景的网页设计已经成为一种趋势,这样的网页设计风格备受各大品牌的欢迎,因为这样的设让网页外观看起来非常的简约大方。


一般情况下,国际品牌官网的设计规范和风格调性是总部规定好的,不同国家和地区在遵循统一规范的情况下进行本土化设计和运营,因为每个地区售卖的产品、代言人、促销活动等都是具有差异化的。


如下图所示:兰蔻中国和兰蔻德国的网站框架及设计风格一致,但banner图中的代言人和产品是有差异的,符合兰蔻品牌本土化的战略。


Image title



五、产品列表页面


产品列表页的设计可以根据跨国公司的产品线来设计,如果产品线多、产品型号多,就可以设计成具有筛选功能的产品列表页。用户可以根据不同的品类、型号、价格、功能、参数去选择想要的产品。


如果产品型号少,则可以参考苹果国际品牌官网的做法,为Mac、iPad、iPhone、Watch、Music5条产品线的产品,分别设计产品类目页。


以iPhone的产品列表页为例,这个页面展示了:iPhone X、iPhone 8、机型比较、Apple Pay 刷公交功能、增强现实功能、iOS12、iPhone焕新计划、iPhone配件等,这些都是与iPhone产品相关的内容——新产品、新功能、活动、配件信息。


Image title


在自家网站的GA谷歌分析中,笔者发现机型比较功能(产品比较功能)的使用率很高,确实根据字面上的意思我们看不出来iPhone X和iPhone 8的区别,但是有了产品比较功能,用户可以一目了然的看出两个产品之间的差异。对于具有选择困难症的用户来说,这无疑可以辅助他们进行购买决策。


产品比较功能需要产品经理和设计师针对产品的卖点和参数进行筛选,通过竞品调研、用户需求分析等方法,找出用户感兴趣的比较项。


Image title



六、产品详情页


产品详情页是设计的重中之中,因为用户是通过详情页来了解产品,那么我们如何来提高商品详情页的购买转化率呢?


高质量的精修产品图片、产品视频、抓人的文案、阅读舒适的排版……这些都提升页面的转化率的制胜法宝。那么,如果展示的是同一品类的产品,比如扫地机器人,我们应该怎样通过设计去体现不同型号的价格呢?


我们可以通过扫地机器人的家居场景进行区分,左边的画面使用了品质感更高的深色系家居环境,明显价值感更强,右边选择的是现代简欧风格,更适合年轻的用户。

之前,万堂老师给我们做企业培训的时候讲到一个案例:




有些天猫女装,让漂亮的女模特穿着自己家的衣服在游艇上、私人飞机旁摄影,通过用户向往的生活,勾起用户的购买欲望。


这其实也是通过高端场景的营造来提升产品的品质感,增加产品的附加价值。


Image title



商品详情页由大量的视频、图片和文字组成,整个页面的文件往往都很大,打开网页时需要加载很久,我们应该如何解决呢?


必须对图片进行压缩处理,既要文件小(每张图片不超过100kb),又要保持清晰,渐进式图片是最好的选择。渐进式图片带来的好处是——让用户还没有下载完图片,就可以看到最终图像的大致轮廓,一定程度上可以提升用户体验。


Image title



优化前:打开网页时,图片是一条一条加载出来的,看不到图片的全貌。


Image title


优化后:打开网页时,图片可以全部展示出来,渐渐的从模糊到清晰,网站加载速度快时,根本察觉不到模糊的状态。


Image title



七、从哪里购买


当用户通过官网了解到品牌的信息和产品的信息,决定购买的时候,我们需要引导他们进行购买,优化购买体验,可以提高产品的购买转化率。


有些国际品牌官网是具有电商购买功能的,有些没有。建设和维护一套全球的电商系统的成本是十分高昂的,而且现在很多用户习惯在亚马逊、天猫之类的第三方平台购买。

本文研究的是国际品牌不带电商功能的情况下,如何引导用户进行线上和线下的购买。


导航上:


通过如何购买和购物车icon引导用户进入如何购买的网页,网页中展示品牌在该地区的所有线上店铺的购买link,线下店铺通过地图功能引导。


Image title



商品详情页:


立即购买按钮,可以链接到对应的第三方店铺,如该产品在亚马逊的购买页面。



售后页面:


售后做的好,可以促进用户的产品复购率及分享率。一般官网可以提供售后电话、在线售后聊天软件、售后邮箱、AI售后机器人、说明书、如何使用视频、FAQ等功能。官网上自助的售后服务,可以帮助一大部分的用户解决问题,节约了大量的人力成本。



搜索页面:


有目的性的用户一般会使用搜索功能,比如他想了解某型号的产品,在使用的过程中遇到了问题等等,这些都可以通过搜索功能得到答案。


在设计搜索功能之初,我们就需要制定好搜索规则:



—全站的文字都是可以搜索的;



—针对搜索结果进行分类,可以分为产品类、资讯类、售后类等;



—搜索框内关键词推荐;



—搜索结果为0时,推荐项设置,预留联系方式,方便进一步解决用户问题。




图字分离& 语言包:


国际品牌官网的大部分是由图片和文字组成的,建议图片和文字分离,不要把文字做到图片上,而是将文字放在代码里。这样不仅有利于SEO搜索引擎的爬取,也有利于语言包的制作。

作为专业的国际化网站,需要支持几十种语言。我们的做法是,总部准备标准版的英文文案,翻译社统一翻译成多国语言,然后由当地市场部同事进行审核优化,最后,将优化好的多国语言包交由IT同事开发上传。



聆听用户的声音:


通过网站的在线反馈功能、用户搜索的内容、GA网站数据分析可以收集到用户的需求,定期的收集和分析用户的需求,进行官网的迭代优化,这是一个持续的过程。


Image title



本文是从产品经理和设计师的角度出发去打造一个国际品牌官网,官网上线前还需要进行域名购买、服务器租用、前后端开发、SEO优化、官网内容上传等事项,需要开发同事、SEO专业机构以及各地区子公司官网运营人员的大力的支持。这些不属于本文的研究范畴。


至此,一个高端大气上档次的国际品牌官网完成。




更新:2019-05-22

收藏

28人已收藏

  • 1

    作品

  • 6

    粉丝

  • 40

    关注

    猜你喜欢

      2019-05-22 原创文章 教程 举报 3276 28 16 2

      设计师必须知道的 | WEB品牌官网设计进阶知识

      0.0°

      你确定要举报设计师必须知道的 | WEB品牌官网设计进阶知识

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年03月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      16
      28
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录