网站页面设计需要遵循什么原则及网站页面设计技巧与整体思路

　　导语：现在，计算机和网络已经深入到了我们生活中的方方面面，也已经成了生活中不可缺少的一部分，网络成了我们获取知识和信息的一种便捷工具，现在的网民也在不断的增多，所以我们就说说：网站页面设计需要遵循什么原则，网站页面设计的技巧，网站页面设计的流程。

　　一、网站页面设计需要遵循什么原则

　　1、网页排版布局

　　网站主页面的内容、网站栏目、各个页面都要放什么内容等等的排列布局，是整个网站设计之前首先就要策划好的。这些都要根据网站的内容主次、行业的网站设计特点、与企业的服务特性来设计。

　　在设计网页排版的时候，切忌不要把大量的信息都堆积到一个页面上，会给人一种混乱的感觉。而在设计栏目的时候数量上也不能设计太多，最佳数量在5~9个之间，多了会让人有选择困难症。如果企业网站的信息、产品数量实在太多，最好也要进行分组处理。比如男装女装都统归到服装里，行李箱背包挎包等都归到箱包里，后面的可进行再细分。

　　2、适应不同浏览设备

　　网站页面设计要以用户为导向，站在用户的立场去设计网站。而每个浏览网站的用户所使用的设备其实都是不一样的，在计算机配置、网络情况、显示器、浏览器等都不相同。同一个网站在不同的浏览器上的浏览效果可能都是不一样的，可能在一个浏览器上没有问题的网站在另外一个网站就有各种问题，如视频打不开等。

　　所以在进行网站页面设计的时候，就要兼顾不同的设备浏览情况，各个设备都测试无误后，网站才能投入使用。

　　3、兼顾双端展示

　　随着移动互联网的发展，移动端网站的搭建也逐渐成为了网站建设中的重点。如果只注重PC端页面的效果，而手机端打开后有图片失帧、乱码和排版混乱的情况，对企业的宣传会造成极大的不利影响。现在有很多网站搭建技术能够兼顾PC端和手机端，如自适应网站和响应式网站。在进行网站页面设计的时候，也要兼顾PC端和手机端的显示差别。

　　4、简单易操作

　　很多人在进行网站页面设计的时候为了显示更加高超的技术会设计出更加复杂的操作功能。但是要知道浏览网站的用户都是不一样的，用户与用户之间的学识、对互联网的了解程度不尽相同。网站页面设计要遵循以用户为导向的原则，没必要设计很复杂的操作。

　　5、文本链接为主

　　网站的打开速度是影响网站质量的因素之一。而大量的图片与视频会严重拖慢网站的打开速度，这都会考验用户的耐心。其实看文字和图片会比看视频的速度更快，一个视频的介绍看完要花将近一分钟，而浏览文本可能十几秒就完成了。

　　国外的用户浏览更习惯于浏览图片，而依照国内的浏览习惯，图片需要配上文字才能了解得更加详细。

　　6、和谐一致性

　　除了主页面外，网站还有很多的单独分页面。在设计网站分页面的时候，要注意分页面的设计风格要与主页面风格相一致，设计成一组的风格，看起来要属于同一个网站。严禁为了突出风格，而出现“混搭风”。

　　二、网站页面设计的技巧

　　1、结构的一致性：我们知道，网站的统一性在网站营销中占重要地位，而网站结构是网站风格统一的重要手段，包括网站布局、文字排版、装饰性元素出现的位置、导航的统一、图片的位置等等，到国外著名的电子商务网站浏览，你会发现这些网站结构惊奇的一致性，所不同的是色彩或内容，在结构的一致性中，我们要强调网站标志性元素的一致性，即网站或公司名称、网站或企业标志、导航及辅助导航的形式及位置、公司联系信息等，这种方式是目前网站普遍采用的结构，一方面减少设计、开发的工作量，同时更有利于以后的网站维护与更新。

　　2、色彩的一致性：方式是保持站点主体色彩的一致，只改变局部色块，优点是一个独特色彩的网站会给人留下很深刻的印象，因为人的视觉对色彩要比布局更敏感，更容易在大脑中形成记忆符号。在色彩的一致性中，我们强调的是如果企业有自身的CI形象，最好在互联网中沿袭这个形象，给观众网上网下一致的感觉，更有利于企业形象的树立。一个建议是选取一两种主要色彩，几种辅助色彩。

　　3、利用导航取得统一：导航是网站的一项重要组成部分，一个出色的富有企业特性的导航将会给人留下深刻的印象，比如将标志的形态寓于导航之中，或将导航设计在整个网站布局之中等等不一而足，花点力气在导航上，也会设计出一个出色的站点。

　　4、特别元素的一致性：在网站设计中，个别具有特色的元素(如标志、象征图形、局部设计等)重复出现，也会给访问者留下深刻印象。比如网站结构在某一点上的变化，由直线变为圆弧、暗色点缀的亮色、色彩中的补色等等。

　　5、利用图像取得统一： 网页中的图像在使用上一定要甚之又甚，尤其是一些动画，网页中充斥着各种可有可无的动画，而这些动画根本与本企业内容无关!认真检查网页中的动画，将没用的删掉!这里我们所说的利用图像取得统一，决不是在每页中放置几个动画!而是作为网站结构一部分的局部图像，根据网页内容的不同，配以相应的图像或动画，从而给浏览者形成页面的连续性。

　　6、利用背景取得统一：从技术上而言，网页背景包括背景色和背景图像两种，一般来说，我们并不提倡使用背景图像，而使用背景色或色块。原因很明显，第一，下载速度，背景色的下载速度忽略不计，而背景图像就得根据图像字节大小下载了，这里需要说明的是，如果你的背景图像比较深，那么最好将背景色置为深色调(默认的背景色是白色)，这样在等待浏览器下载背景图片的时候前面的浅色文字可以很容易阅读，因为如果有背景色，浏览器先将其下载，然后下载背景图片;第二，显示效果，经常看到国内一些网站设有背景图像，或者是公司的厂房、办公大楼，或者是产品图片，甚至是某某人物的照片，使得前面的文字很难辨认!给人一种很不舒服的感觉，让人无法停留。

　　三、网站页面设计的整体思路

　　1. 确定页面的类型

　　首先，要先考虑对方需要的属于什么类型的页面。 针对不同类型的页面，我们在布局之前的时思路和侧重点都是不一样的。

　　导航型页面：侧重用户路径引导和流量分发，往往会带有较强的运营性质。单纯的入口型与以核心内容入口，这两种方式的选择可以根据强弱需求的不同来选择。

　　消费型页面：侧重让用户能深度沉浸的浏览页面内容，如京东商品列表页，花瓣瀑布流内容页。

　　任务型页面：侧重让用户顺畅高效的完整一系列操作，达到某个明确目的，如订入住酒店页面。

　　2. 前期分析思路

　　“在公司中作为职能部门的UED团队，需要站在用户的角度思辨业务，通过服务内部客户进而服务我们的最终用户,用网页设计专业帮助业务成功，与业务一起成长”。 阿里的五导家ThinkFlow就提出过·这样的理论。

　　(1)挖掘业务本质需求

　　了解项目概况和目标

　　a. 为什么会产生这样的需求?目标是什么?(一定要深问，可参考“五个为什么分析法”)

　　b. 业务方针对目标提出的解决方案是什么，具体是怎么想的?是否还有想要解决的问题没想好方案的?

　　c. 该业务经验性的特点有哪些?是否有数据或报告。比如，产品/品类特色是什么，何种内容转化高点击好…

　　b. 业务后续规划的蓝图是怎样的?

　　大概的方向如上，具体的小问题可以在沟通的时候细化出来，通过这些问题，我们能对项目方向有个基本了解。

　　挖掘业务本质

　　有的网页设计师到上一步就开始着手操作怎么设计网页了，其实这样是不合理的，容易让设计思路停留在语言描述的浅层次，设计功能浮于浅层需求，就会出现后续的解决方案有一定的限制性，很难达到客户的本质需求。所以如果要避免这个问题，就需要设计师在沟通时进行深层次的思考，内容可以贴合以下方向。

　　a. 定位的主要目标用户群体是谁?选取得是否合理?为他们带来的核心价值是什么?为公司带来的核心价值是什么?

　　b. 整个业务流程是怎样的?盈利模式是什么?

　　c. 市场/行业情况怎么样?未来的趋势呢?

　　d. 竞争对手是谁?我们跟竞争对手相比核心竞争力在哪里?

　　c. 我们的核心策略方向是否真的有效，发力重点是否合理?

　　(2)理解用户诉求

　　在前面的目标用户分析的基础上，我们要占到用户的真正诉求，通过了解用户的品牌和产品，来体会和理解体会用户真正的痛点和深层次的需求。

　　某家居用品商要制造一款家用钻孔机，继续往下深挖用户诉求：

　　“用户需要的并不是一台钻孔机，他们需要的是墙上有几个孔”

　　“用户需要的并不是墙上的几个孔，他们需要的是墙上显示家人照片”

　　“用户需要的并不是挂了照片的墙，他们需要的是一个更温馨生动的家”

　　聚焦到最深层次的需求，也许到最后你的产品从一台传统的钻孔机变成了嵌在墙上的一个电子相册，说不定还能自动更新、可交互~~ 不管最后的形态是怎样的，这样的需求探究是有助于直达真正的需求，且接近客户满意度的一个很好的途径。

　　a. 用户角色+场景穷举，再结合业务的核心价值(业务诉求分析时已经得出)对进行优先级排序，获得典型场景。

　　b. 用户需求&痛点收集，可参考KANO模型(基本型需求、期望型需求和兴奋型需求)判断痛点待解决的级别。

　　c. 定位用户诉求背后的潜在诉求。(“我要找到靠谱的网页设计师帮我网页设计房子”— >“我想实现理想中的生活方式”)

　　d. 用户体验地图，结合数据分析和用户意见反馈(适用于整个流程分析)

　　e. 同理心地图

　　获取方式更多样，比如：直接找类似用户访谈; 潜入用户圈子看他们在说什么，记录下来(社区圈子、问答平台)，follow资深型用户; 看用户对竞品的评价和吐槽;后台用户意见反馈收集整理… 通过这些手段，基本上能有一个比较生动的用户形象呈现在你面前了，这时候就可以回到最后的输出：

　　典型用户场景(包含用户关注点和用户痛点)

　　用户主要诉求和潜在诉求

　　(3)网页设计目标确定

　　当业务诉求与用户诉求都已经明确之后，我们会发现事情渐渐变得明朗起来。拿着市场需求和用户需要以及业务原本的需求来对一对，市场趋势和用户需要也更加明确。

　　此时，我们已经可以判断之前需求方提的目标是否合理，如果有补充和调整就可以提出跟需求方进行商量了，而且此时的商量应该是有理有据的，一般情况下，给出收集的实际情况，需求方应该会给出判断，是否可以作为本期目标或其他阶段的目标。

　　经过沟通，可以提炼出业务目标：

　　通过「某策略」，帮助用户实现「某价值」，以完成「价值变现」

　　如“通过「让用户方便有趣地展示家庭相册」，帮助用户实现「家的温馨感」，以完成「更大的市场占有率」”。

　　业务目标中，判断网页设计这一步可以完成的是什么，这便是网页设计目标。比如以上案例，网页设计目标就可以定为1.让用户方便的展示家庭相册 2.让用户在展示的过程中获得更多乐趣。

　　(4) 解决方案发散与收敛

　　解决方案的发散关键在于要紧扣网页设计目标，同时又不脱离用户角色。可把网页设计目标具象化成几个关键词，比如周期性回访、加强信任感、新客转化…等，然后围绕具体问题具体发散解决方案。

　　核心问题聚焦-发散分析。依据分析得出的网页设计目标和网页设计策略，围绕得出的结论点来不断细分和发散。

　　细分用户类型和场景分析。如：细分新老客、带目的1的用户和目的2的用户，他们的用户场景和具体诉求。

　　按流程步骤分析。当涉及页面流程较长时，可以找到用户几个关键的流程节点，使用渐进流程节点分析，如下方案例分析买手机的用户：

　　AICDA五步分析：引起注意——产生兴趣——建立信任——刺激欲望——促使行动。这套分析思路比较适用于营销活动类的页面。

　　更多可参考的方法：

　　– 头脑风暴/无声头脑风暴

　　– 用户行为理论分析

　　– 五个WHY分析

　　– 用户体验地图

　　– 服务蓝图

　　– SWOT分析

　　进行完发散之后，就可以跟业务方进行一轮沟通评估，通过评估的基本就可以留下作为最后要落地的解决方案了~~ 具体评判维度可参考以下2点，

　　可行性评估，运营成本、开发可实现性

　　价值评估，判断最能辅助目标达成的方案、投入产出比

　　(5)解决方案落地到页面中