BRANDinLABS品牌癮網站是由Labsology法博思品牌顧問公司所經營維護

洞悉网页设计的流程与眉角

Written by

  网页设计只需要一位设计师就能完工?或是挑出网页版型就等于完成了网页设计,之后就能期待上线后产生效益吗?其实不然,网页设计是需要很多位专业的人员,共同进行前期规划、讨论,并携手UX(User Experience/使用者体验)设计师与UI(User Interface/使用者接口)设计师共同合作产出的设计。

因此,网页设计有着本身存在的规格与运作模式,才能让网页在上线后发挥效用,下图是网页设计的架构流程图,而以下将探讨流程图中,需要特别注意的“五个眉角”,并让设计过程中更能有效率的完成。

 

【眉角一】客户网站需求

首先要确认网站存在的“目的”为何,是为了增加商品曝光率或是为了建构品牌形象等,而当目的产出后就能开始进行下一步的网站“定位”,此阶段必需详细沟通探讨包含竞品分析、网站风格喜好、主力商品等定位,由于网站的竞争非常激烈,所以做好“定位”是为了在切入市场时能做出区隔,借此站上有利的位置,也就是所谓的差异化。

我们以“科技部特色领域研究中心”网页设计做为案例并加以描述说明,网站目的是为了推广包含生科医农、工程技术、自然科学、设科人文等多元特色领域研究中心的资讯,以及各个学校研究中心所执行的研究领域,所以将网站定位为提供特色领域研究的集中点,让使用者透过这个平台找到想要的资讯,以达到网站上线的效益。如此一来,透过讨论出网站的“目的”再清楚找到“定位”后,就能开始进行整理网页设计的内容。

【眉角二】网站资讯内容

当网站确认目地跟定位后,就要开始思考到底要将那些资讯放上去。如果把网站想成是一家店的橱窗,准备规划出能引人注目的装潢摆设来进行设计,就更容易知道那些讯息、商品适合放上去,并且依据“目标对象”来整理规划上架的资讯。

文案资料

包含基本的公司介绍内容,例如公司简介、历史沿革、重要事件、营业项目、产品特色、服务据点、连络方式等等,此外,企业的LOGO、标准色、视觉识别系统等相关形象资料,也是网页设计重要的参考依据。当统整出上述资料后,就要以目标对象为思考出发点,针对不同行业的目标对象就会有不一样的行销方式,所以,设计出符合他们所期待看到的资讯,就会是第一优先考量的重点。

图片、影片资料

图片是网站的灵魂,这是很贴切实际的形容。比起文字,图片更能吸引到使用者的注意,这也是IG(Instagram)会风靡全球的主因,当我们看到时尚网站上美到梦幻的人物照片,也同时在心里提高了服装的价值。

每当看完网站上的美食照片,总会有股想大快朵颐的冲动,就更加清楚了解网站在设计图片上的用心程度。如果是贩卖商品网站,焦点就在所贩售的物件上,而商品最终呈现的效果将大大决定销售量,由此可见,若能请到专业摄影师协助构图拍摄商品,将最完美的一面呈现给目标对象,是比单纯文字描述更能达到事倍功半的效益。

当直播时代来临,目标对象关注影片的喜好程度,也是重点考量之一,因此影片是能创造高关注度的效果,所以透过适切且简洁有力的影片是能产生1 1的效益。换句话说,如果商品本身需要透过介绍来做使用说明,运用影片教学更能提升友善度,因此,思考善用影片的优势是能让网站持续加分的。

【眉角三】建构网站思维

网页设计是由UX设计师与UI设计师共同完成,但在建构网站思维阶段是由UX设计师先行负责网页优化的工作,并且站在使用者的立场,了解对方的需求与浏览网页的习惯,并规划出最容易使用该网站的行为模式,只要设计得够出色,使用者再次造访的机率将大大提升。

有价值的讯息才上架

当资料已准备齐全,就是跟UX设计师沟通讨论如何开始网页设计的阶段。根据统计指出,一般使用者并不会停留在无法找到相关资讯的网站太久,因此把公司最重点的讯息展示给使用者是很关键的,或者也能透过期望带给使用者对该网站有什么样的第一印象,来设定讯息上架的规划方向。

此外,也能透过UX设计师对同类型网站的调查研究,从而判断出最适合上架的资讯,比如说网站除了美图吸引人之外,若主打价格,折价前后的价钱比对,就是使用者最想知道的重要资讯。

构思网站地图与网页热点

网站地图是指网页上每一个页面如何互相连结,通常UX设计师会先构思资讯适合放在哪一个页面上,并研究出如何引导使用者点击后,能快速得到他想要的资讯,同时也会根据浏览者使用网页习惯的“Z字法则”来做眼球移动的路线规划,一般都是从左看到右、从上看到下的眼球移动浏览方式。甚至是能在网站上线后,运用“热点侦测技术”,得知网页上那些区块是使用者最常观看与点击的地方,从而规划出重点区,以利未来行销的运作。

架构网站Wireframe

UX设计师在规划完网站的浏览者体验优化后,就会开始描绘网页的线框图(Wireframe),也就是把网页雏形透过线条描绘出来。下图是科技部特色领域研究中心的网站wireframe,能清楚看到网页上各个色块要摆放的内容,通常网页画面左上角就是使用者第一眼会注意看的黄金位置,所以这个位置都是放上企业LOOG或企业名,以便使用者清楚自己正在浏览的网站名称。再来会采用区块大小的呈现方式,借此引导使用者分办出该优先注目的位置,例如主打的商品或重点讯息会放在最显眼的banner位置,借此增加点击率,而网站的主要服务与内容会依序放在banner位置的下方,如此一来,就可达到网页排列优先级后的效果与效益。

因此,只要清楚分类出优先级以及需要上架的有价值内容,就能完整规画出网站wireframe,当UX设计师规画出来后,UI设计师就能照着此架构设计出网页的画面。

规划行动装置版网页

又称为响应式网页设计(Responsive web design)且通常被缩写成RWD,是指在手机上呈现出的网页画面,更是近年来网页设计必备的技术。随着使用者运用手机上网浏览网页的比例逐年增加,UX设计师为了让使用者有更好的浏览体验,会在规划网站时,也将其纳入重点考量之一。下图是科技部特色领域研究中心的手机版网页,因为使用手机是由上往下滑看的浏览习性,所以网页讯息需采用上下整理排列的组合,借此让使用者更快找到他要的讯息内容。

【眉角四】进行网页设计

当UX设计师规划完网站整体的wireframe(网站线框图)与浏览体验优化后,接下来就是跟UI设计师沟通讨论如何进行网页视觉设计的风格。若说UX设计师是网站的“策略师”,那UI设计师就是网站的“美学师”,此阶段就是透过UI设计师的巧手,打造出独一无二的网页设计风格。

根据业种型态与目标对象 决定网站的色彩风格

当一家商店营业前,首先会思考店内的“风格”,不同的行业有不同的基本风格,确立基本风格后,就会开始思索来店的族群,可能会是年轻人、学生、上班族、主管、专业人士等等,再透过目标对象来决定店面需要改变的装潢风格,借此吸引他们到店内消费。

建立网站也是同样的道理,UI设计师会先将“色彩”做为网页“风格”的分类依据,若是美食网站基本风格一定是暖色系,而红黄橙这三个色彩,几乎是与餐饮类的网站画上等号,除非是卖冰品或是海鲜鱼类才会使用冷色调的蓝色,而绿色最常出现在自然健康类的网站,科技与金融产业网站最常使用蓝色,紫色则是代表着神祕或高贵的网站,此外,最具代表女性网站色彩就是粉红色。

下图是科技部特色领域研究中心的网页设计,因为是科技、智慧、先进的风格,所以采用“蓝色”为主色调,在图片上也以蓝色调为选择依据,并加入渐层蓝的底色营造出科技智慧的特色,如此一来,就能让浏览者先入为主的认定网站属性,也因为视觉风格的设计,让网站更具吸睛力。

由此得知,UI设计师会根据业种型态来选择色彩,并运用色彩建立不同的网页风格,因此,根据公司本身的产业类别,挑选出合适的色彩,透过色彩的影响力来吸引目标对象,借此增加网页浏览率。

网页影响力来自于图片

网页上的图片直接决定了网站的质感,图片不仅是网页的灵魂,更是代表着视觉上好不好看,且最能吸引使用者注目的重要物件。除此之外,图片也有着辅助说明的作用,能与文字内容达到相辅相成的效果,当使用者看到图片是能直接联想到所要述说的内容。下图是科技部特色领域研究中心网页的banner,若能挑选极具吸引力的图片,并搭配精准文字的说明,就能借此提高浏览者观看的时间,并可能创造更高的点击率。

由此可见,图片对于网页有着举足轻重的因素,因此,UI设计师挑选图片的美学至关重要,若说一张图片就能决定整个网站的成败也不为过。

设计按钮上的关键文字

网页上的“按钮”是决定点击率的重要物件,当使用者在网页看到类似按钮的物件时,就会将其联想成是能够点击的物件,所以UX设计师会依照使用者的习惯,在按钮上做好文字导引,借此吸引使用者点击进入下一页。例如在网站上的按钮文字,可设计成“只限今天错过不再”或是“网站达人不藏私推荐”等等,增加使用者想点击入内一探究竟的欲望,再交由UI设计师去设计成引人注目的按钮颜色与外观。

所以,若能在网页上规划好按钮的位置,就能让使用者迅速找到点击重点,更能减少蒐寻资料的时间,让网站的浏览率持续提升。

【眉角五】持续行销经营

当网站上线后,就是要开始思考如何将网站行销到目标客群上,以达到架设网站的目标。而根据目标客群就能选择运用Line@、FB(Facebook)、IG(Instagram)等app软件,首先,Line是目前使用人数相当广的即时通讯软件,几乎不分年龄层且天天会使用到,而Line@生活圈更能达到即时传递资讯,若能把Line@生活圈中的群组伙伴引导到网站上,就是可观的行销效益。

FB在使用上的年龄层偏高,约介于25岁到34岁的使用者居多,而40、50岁的朋友也是爱用者,若目标客群的年龄层偏高,可考虑透过FB的贴文与资讯分享,抓住他们习惯上FB浏览的习惯。IG在使用上的年龄层偏低,以年轻人为主力的社群媒体,而限时动态的影片与贴文再加上照片滤镜效果,都是年轻族群喜欢的方式,所以,若目标客群的年龄层偏低,只要根据IG的使用方式,打造出吸睛的内容,就能抓住他们的目光。

结论

在网络的世代,做好网页设计只是第一步,后续针对网页所规划的经营方式与行销手法,还有让使用者更快找到网站的SEO优化(搜寻引擎最佳化),以及透过运用GA(Google Analytics)的网站数据分析工具,彻底了解使用者是如何进到网站,如此一来,才能让网站长久经营发展下去。

 

参考文献:

UI UX设计是什么?用9个提高网站转换率的方法告诉你

网页设计Checklist:10个网站首页必备的内容元素

我要请设计公司制作网站,我该如何准备资料?

我该准备哪些资料给网页设计公司?-爱贝斯网页设计公司

作者:林仲翔
原文连结:https://mymkc.com/article/content/23283
  •  
  •  
  •  
  •  
  •  
  •  
  •  
文章分類:
品牌管理 · 品牌设计

Leave a Comment