全文干货:企业网站建设设计前的准备工作(网站建设方案)

企业资讯
0
作者: 汛酷网络

网站设计师最容易犯的错误?

网站最容易犯的错误就是,因为时间很赶,接到专案就开始动手做,在不知道网站目标、对象、产业特性、属性的情况下就开始设计网站,可以回想看看这些案子是不是会有大量反覆修改的状况?制作网站的时间特别的久?这些都是因为没有和客户建立共同价值观所造成,以致于彼此的想法像是处在平行时空,沟通越来越不顺,恶性循环之下,把双方的信任感慢慢消磨殆尽。


如何定义网站目标?

“达成目标才是网站建置的真正意义”,网页设计前我们得先定义网站目标,假设网站是机械产业的官方网站,我们希望网站可以“大量被搜寻且得到客户询问单”,要达成客户询问这个目标,在网站上必须提供于“有利于客户研究或审阅的各种资讯”,并突显企业的专业形象,所以网站需要的单元有:公司介绍、产品特色、产品介绍、最新消息、常见问题、目录下载(型录/技术文件)…,如果还要让网站具备排名能力,须加入文章知识(部落格),并加购SEO网站优化顾问服务。

网站设计前如何收集资料?

收集资料的第一个对象是“委託主”,没有一个人的意见会比委託主的意见更重要,这也是双方价值观校正的重要过程,可以从委託主手中得到各式各样的网站资料,包含企业识别(CI)、产品照片、公司简介、各种型录、网站受众、产业型态…,可以了解产业越多就越能设计出适合的网站,再来就是收集同产业的网站资料,整理资料后才正式开始设计。

不能依照自己的喜好做设计吗?

设计师喜欢的东西不等于“好”、“适合”,每一次的设计都必须将自己归零,设计是为了解决各种问题,不是做自己开心的,如果设计的网站无法被接受就是一个失败的设计。很多设计公司限制了修改次数,不接受批评,不接受案主意见,坚持自己的设计理念,这些都是让设计走向极端的错误方式,最棒的设计像水,可以在不同的需求容器中,将设计填满到各种需求中,让客户满意与设计品质之间取得最大的平衡。

网站设计原则

收集资料之后就正式进行网页设计工作,网站设计有几个基本原则,能依照这些设计原则去设计,网站基本就不会太差,想知道设计的网站出了什么问题,就要用以下几个设计原则,不断检视你的设计,是不是犯了这些错误?设计师不清楚自己的问题在哪,就是没有“设计病识感”,会觉得“都是别人主观的喜好”,不会觉得是自己的设计有出差错,Design(设计)这个字源自于拉丁文,有“完成计划”的意思,如果无法完成计划就是失败的设计,设计基本原则有哪些呢?马上往下看。

建置符合UX的网站设计(UI)

大部分的人以为网站外观做得美就是一个好网站(UI),但实际上网站不能只是好看更必须好用(UX),网站很炫很吸睛(UI),但是网站的各种动线与操作却很难用(UX),反之,网站很好操作(UX),但是网站的美感(UI)却令人不敢恭维(UI),UI不是UX,但两者之间却唇齿相依,缺一不可,好的网站都需要收集UX,根据UX转化成UI,呈现完美的使用者介面(网站),UI就是使用者与内容之间的连接点,而网站就是使用者介面(UI),做出一个使用者体验的好网站是需要很多步骤的。

传达单一且明确的主题

我知道你有很多资讯想一次呈现,但过多的资讯只会让人却步,如果主题只有一个,那就只需要简单几张示意图、一个标题、一段说明,视觉设计单一化有助于浏览者把目光专注放在这个主题上,如果你的网页採用了多个主题与设计元素,建议要做取捨,留下一个主题,其他就割捨吧,把想讲的内容放到其他网页并串连这些网页。

一开始就设定网站氛围

一开始就定义好网站要营造什么气氛是非常重要的事,也是设计公司常常说的“设计风格”,风格设定取决于很多条件,最主要的就是企业识别(CI)、产业特性、喜好,如果是购物网站就适合用丰富色彩以吸引目光,如果是传统制造业就适合沉稳内敛的气氛,如果是一个家具网站就需要营造和谐、温馨的气氛。网站氛围是网页设计中最难以定义的事,因为大家对氛围的感受是主观的,常用感觉去定义科技风、简约风、禅风、立体风、欢乐风…,设计师就会去设计素材营造氛围,营造风格的元素有:版型配置、形状、色彩、图案、字体、平衡感、质感…,有经验的设计师可以更快理解客户想法,会提出各种设计案例以釐清客户需求,但也不会客户说什么就设计,会有自己的想法与坚持,维持打动人心的设计初衷。

精心编排网站内容顺序

网站为了因应行动装置,发展了RWD网站设计,浏览网站都是由上而下,于是上面的第一张图就变得非常重要,这是引起兴趣的第一个视觉设计,为什么是图不是字?因为大脑处理图片的速度比文字快多了,用图片可以更快得到浏览者的目光,经过编排的网站内容,引起浏览者的高度兴趣并一路看完,就是一个成功的设计。

善用留白的技巧

《留白的设计美学》一书提到,好设计的90%取决于“留白”。留白不是真的留下空白一片,留白是指留下空间,不要把每个位置佈满资讯,让主题的图文可以更突显、更容易阅读,很多网站设计师看到画面有空位就想塞满资讯,不但无法呈现质感更让阅读产生障碍,留白应用设计的地方非常多,包含:企业识别、图文间距、表格、行距、字距、图片配置、区块间…,适时的留白设计让浏览者得以喘息、眼睛放鬆、更专注,让主题可以聚焦。留白应该空下多少?如何配置留白空间?是属较高难度需要经验的设计技巧,即使较难也不要怕留白,勇于留白才能让设计能力升级,创造更具水准的网站作品。

留白让主题更突显

配色是网站的第一印象

,配色是网站第一眼感受的东西,配色不协调马上产生违合感。网站配色通常会延续企业识别(CI)的配色策略,如果没有识别设计,就很需要网页设计师的配色辅助,色彩学是设计师必须养成的能力,胡乱配色是无法做出独特配色的网站,色彩不是只有版面、字体、表格、线条…,选择使用的照片、插图、影片也都有配色考量,颜色影响网站气氛营造,能掌握配色与用图的设计师就已经成功一半,如果对配色不擅长,建议多利用配色工具或是色票去练习配色,多看一些国外网站的配色。

维持一致的网站设计风格

网站设定了主题、风格、内容顺序、页首、页尾之后,后面的设计必须沿用这些定义,包含色彩、形状、质感、图片…等素材都必须维持一致性,让每个设计页都像是一家人,这跟企业识别系统(CIS)的逻辑是一样的,需要有系统的呈现整体感,整体感的并不是要你把相似的东西全部放在一起,有一个设计师设计家具网站,将整个网站放满家具照片,看到都疲乏了,这时候应该放上几张有趣的插画,或放上几张优惠小图,或是文章的宣传图文,就能缓和类似内容带来的烦腻感。

一致性的设计风格

不要小看网站的字体选择

网站字体用得好不好将会影响“网站质感”,强调易读性的网站,要避免使用有边线、阴影、装饰、逗趣、花俏、可爱、过度装饰的字体,如果不是直接跟图片合成的字体,要特别注意CSS字体的设定顺序,英文字体要放前面中文字体放后面,因为中文常常已经内含英文字体,为了让网站速度与效能最佳化,还是会建议使用网站内建字体,虽然不同的作业系统与浏览器会有不一样的呈现,无法统一体验,但是只要正确设定字体顺序、文字间距与留白,一样可以做到网站所需要的质感。最后,网站字体不要一大堆,最多两种字体搭配,字体阅读有整体感,善用字体大小变化与配置,也可以让区块不需要多馀的设计也能分出区域。

插图让网站视觉进化

有时候文字无法精确表达的时候,需要将资讯视觉化,这时候可以设计插图将资讯图像化,好的插图让网站更有看头,在文章段落之间插入照片或图表,可以提高阅读者的想像与理解,也会让文章更活拨有趣,但千万不要放一堆不知所云的照片或插图,使用毫无逻辑的素材是设计的大忌。至于是放图片比较好还是放插画呢?要视网站内容而定,有时候也可以用手绘稿去营造网站氛围,使用的照片、图片、插画的目的都是为了让网页更容易阅读与理解。

拍摄网站的重要照片

设计原则要善用照片与插图,但如果没有照片呢?除了购买图库的图片以外,为了呈现更好的视觉效果,建议要拍摄专属的照片,整个网站用了过多图库照片,除了缺乏整体感还会有不真实的感觉。照片(图片)是网站素材中最重要的元素,网站在怎样糟糕,有好的照片就能达到基本水准,没有好照片再好的版型、配色、文案、留白、内容顺序…,都会因为品质低落的照片,让网站变成不及格,尤其是首页形象图。好照片可以快速营造气氛,可以突显主题,有企划拍摄的照片,内容完整、光线充足、构图平衡、视角精确,简单后制就能应用到网站,照片品质不良就需要更多的后制去调整,包含校正色彩、调整色调、消除杂点、加强对比、增加曝光…,“照片是网站设计最大关键”一点都没有错。

将影片应用在网站上

有时候文字、照片、插图、表格都无法完整表现要说明的内容,就很适合拍一段影片去说明,例如:机械运作流程、食谱料理、家具安装方法…。网站可以写一套影音管理系统,也可以直接用Youtube、Vimeo崁入影音。如何拍摄影片与剪辑?如何在影片中加入各种动画? 就又是另一个专业领域,有机会再写关于影音拍摄的技巧文章,善用影片也是网站设计基本原则。

网站设计的差异在细节

除了上述提到的前置作业、基本设计原则以外,再来就是比较繁琐的设计细节介绍,要从普通设计师到高阶设计师,你必须重视设计细节,有个日系汽车广告词“专注完美,近乎苛求”网页设计工作到了一个程度,细节好坏就是跟别人最大的差异。

专属的设计风格

专业的网页设计公司一定会定位公司的设计风格,任用的设计师也会依照这个方向去执行,像APPLE的商品都有属于自己的设计风格,简单、易懂、好用、顺畅、简单配色,商品彼此之间都能找到共同的特质,网站也一样,无论是要营造什么氛围?设计什么素材?用什么照片?开什么版型?都会有一些基本原则不会改变,而这个设计风格定位将会影响整个网站的设计方向,所以选择网站设计公司的时候一定要先看设计公司的设计风格,如果连网站上的设计作品都不喜欢,真的不要勉强设计委託,让彼此都痛苦,选择喜欢的设计作品可以让设计委託更顺利。

用RWD设计网站

平面设计师跨行网站设计最常遇到的问题就是“没有网站架构概念”,原因就是平面设计不需要依照网站逻辑进行设计,但是网站设计必须依照RWD做各种排列组合,才可以顺利在手机、平板、桌机友善的显示,变换出最佳画面,RWD观念越好就能在细节上处理得更完善,才不会有RWD跑版的情况发生。

空白的实际应用

前面有提到要留白,那留白实际应用是什么呢? 举例来说像是:企业商标(LOGO)的背景与一定范围区域都是留白的,这是在保护LOGO的呈现。文字段落之间会刻意留几行空白列,制造一个无形的段落界线。还有购物网站的商品常常会去背景只留下商品以突显商品。以上三个是留白的常见案例,当然还有很多空白的意义,但几乎都不离这三个原则:创造空间感、舒适易读、提高关注力,你可以试看看。

文字编排很重要

企业网站建设中的网站不是图就是文,图片就是一张图,但文字没那么简单,文字需要编排,需要注意的事项:字距、行距、字体大小、字数、标题颜色、靠左靠右靠中、标点符号、换行字数、段落留白、编排一致性…,光是文字编排得好,就会有好的设计呈现,文字多的网站更应该重视文字边排,可以多看一些有文字编辑的网站,像是天下杂志、康健、商业週刊…,这些网站对于文字编排都具备标准化与整体感,非常值得参考。文字编排很重要,举一个文字阅读不友善的例子,很多网站文章每一行的字数都太多造成过宽,中文字数都超过50个字以上,字数超过人类的宽度可视角,看完一行要换到下一行会对不准,符合阅读的字数宽度大概是单行在45~55个中文字之间,这样的字数换行是较容易阅读的宽度。还有文章的字体行距也很重要,行距太挤难以阅读,最好的行距是字高的30%~50%之间。字体大小也要注意,字不是越大越好,字过大有粗糙感,文青网站很爱用小字表现质感,但也苦了有老花眼的长辈,文字大小应该要依据网站特性适时的微调字体,像是康健网站字体有刻意放大字体,因为网站有更多的中老年浏览者。

企业网站建设中网站设计的意义是什么?是为了形象动画?为了设计美图?为了成为网路艺术品?其实都不是,网站设计目的绝对是曝光,是为了要将“有用的资讯”呈现在网路上,透过设计让网站更容易的被接受与喜爱,进而提高网站的曝光效率,而这些逻辑恰巧跟Google的排名逻辑一致,明确的主题、良好的使用体验设计(UX)、口语化易读的文字、清楚明瞭的表格、符合主题的影片、良好的SEO架构、好用的内容管理系统(CMS),以上都必须靠设计来达成,网站设计是技术整合工作,需要扎实内功而不是花拳绣腿。如果网站的本质是内容,那应该要认真的思考网站可以帮助人们什么?受众对象是谁?应该准备什么资料满足浏览者?清楚使用者需求之后再回到设计,用设计来解决各种问题才是建置网站真正的意义。

结论

为什么这个企业网站建设的网页设计可以?这个网页设计不行?绝对不是单凭感觉与主观做评判,对于专业的设计公司来说,绝对可以具体列出设计不妥的理由,设计当然没有这么简单,但只要依循基本设计原则设计,网站绝对不会差,本文提到的项目都是“设计的基本功”,如果对于这些设计细节还不是很清楚,可以试著体会一下这些基本原则,希望对网页设计路上的你有一些帮助。