公司网站主页设计的思路和方法

资料来源：网络整理时间：2023/3/21 5:34:02 共计：3564 浏览

分享数：2

网页设计，是以视觉设计为主的工作。
一个网页被设计出来，是给人用，给人看的。要好看（简洁）、要好用（高级）这才是一个设计师需要反复考虑的。视觉+交互，是网页设计师的核心竞争力。
其中“视觉设计”的依据，源于前面的策划和交互设计。最后出具的“视觉设计稿”得符合品牌定位，满足生产运营，以及用户需求，这是网页设计师必修的基本功
前端制作，是以前端代码为主。
前端制作在流程上，是在视觉设计之后。这部分工作基本上是由WEB前端工程师来完成的，工程师通常会运用到HTML、CSS、以及JavaScript、Jquery等网页前端代码，来重构网页设计师的“视觉设计稿”，以及交互动画等。

“前端工程师”出了要配合网页设计师外，还要配合做后端工程师，做好网页端的数据收集处理等工作。但要牢记自己的岗位职责和学习重点，在没有认清“视觉设计”前，要当心自己是不是越位到前端开发的坑里去了。

网页设计应该有更多的思索在里面，每一个元素都是思索的产儿，而不是随意的点缀。当然，感性的爆发也必不可少，因为她是艺术，是商业化了的艺术、技术化了的艺术。

1、一个表达清晰、显示突出的CTA（行为激发）

本篇文章所提到的所有诀窍中最重要的一点就是，你的主页上应该有一个非常清晰明了的CTA（行为激发）。如果你能为这个CTA设计一种独特、抓人眼球的呈现形式则会锦上添花。此举目的在于让那些浏览主页的用户清楚地知道企业对他们的要求，希望他们做什么。页面内容不要过多，以免用户感到困惑。国外的Marketing Inc和AWeber公司的着陆页是非常值得大家参考借鉴的例子。

2、能够抓人眼球的图片

好的图片对于主页设计来说至关重要。我就在自己的博客主页上添加了一张长图片，这张图片让我的博客显得更加与众不同，上面所提到的所有网站也都非常擅长利用图片来吸引读者。特别是Chris Ducker（上面第二个案例），他是图片使用方面的专家，他将自己的照片放在网站主页上，照片中他的目光注视着网页上的信息栏和CTA，意在表示自己希望大家能够响应，用户往往会受到图片的暗示，注意力顺着他的目光看向右边，然后进行相应的动作，最终完成转化。

3、移动响应差异化

毋庸多说，移动设备的使用率超过了PC端，作为营销人员我们不得不重视这块新的蛋糕。由于显示屏幕和使用场景的不同，我们应将二者差别对待，我所说的差别不仅体现在文字大小、图片多少上，还在整个网页的设计思路和功能优化上。例如，我不会在移动端的网站上推销BlueHost（蓝色主机，是一款非常受欢迎的美国主机）的产品，因为在移动端，用户不太会注册完成购买。认真观察上述提到的六个网站在移动端和PC端上的不同，你会发现他们在移动端上省略掉了哪些功能和要素。

4、精心设计品牌风格

上述提到的六个主页都有一个相同点，即每个网站都有自己非常独特、突出的品牌风格。颜色、字体、排版、图片都高度和谐一致，各个要素都在为同一个营销目标服务。做到这点并不容易，但是如果做好了就更能让人感受到网站的专业性，从而提高转化率。如果你想让用户留下自己的邮箱、电话号码、信用卡等个人信息，你就必须让他们对你产生信任。提高专业程度能够增强用户对你的信任。因此，我们必须要做到网站不存在任何安全漏洞，保障用户的信息不会泄露。

5、概述产品优点（而非详细地罗列用户能得到什么）

营销界有一句名言：你应该专注于Benefits（用户能得到的好处）而不是features（你产品的特性）。这句话是说，你不需要在主页上将所有用户可以获得的东西全部具体地列出来，你要做的是给用户一些概念性的东西，告诉用户他们将会获得怎样的用户体验，会达成怎样的目标。例如，在Bodybuilding.com的主页上，他们打出了“改变你生活”这样一句话，而不是罗列你可以选择的健身项目。这就是语言的艺术。

6、提供吸引人的奖励

几乎所有优秀的主页都会为用户采取一些措施，以此诱惑、鼓励用户注册或者浏览更多的信息。Chris Ducker网站上，当用户注册网站完成某项任务之后，网页就会出现一个圆点记号，记录你的成就。这往往让用户很难忽视。

7、时间的敏感性

看一看Marketing Inc的主页，你会看到页面上有一个时钟，显示离下一场在线研讨会的召开还有多久。这种做法能够引起读者轻微的紧张感——当他们知道时间越来越少时他们就会产生一种紧迫感，从而采取行动。如果在主页上加上一个让人们产生时间紧迫感的要素，你就会看到注册人数大大增加。

8、稀缺性

Neil Patel举办的在线研讨会通常都有人数的限制。和时间紧迫感的原理一样，机会的稀缺性会让人们害怕丧失机会，从而促使人们快速做出决定采取行动。这种意识源自于远古时代，那个时候食物和住所是稀缺资源——当我们感到得不到这些资源的时候大脑就会发送信号让我们尽快采取行动来获取资源。

9、社会认同

社会认同在健身行业已经被广泛应用，他们多采用“健身前和健身后”的对比照片来让人信服，树立社会认同。这种做法简单又有效。Bodybuilding.com的主页上就可以看出这一点，看到别人健身取得的效果后你也会忍不住点击注册按钮，自己也来上几套训练。记住，你在主页上所举的例子必须是真实的，虚假信息在有些国家是违法的（更别说不合情理了）。如果这样做之后你的注册人数仍然没有增长，那么尝试着把你客户取得的证书或者企业的荣誉、奖励放在网站上。

10.背书担保

最近，我借鉴了Chris Ducker的一个做法，就是在选择性输入栏的下方标注我的博文曾经被哪些杂志期刊网站所转载。通过这种方式，证明我的文章是被广泛认可的，从而让新读者产生信任，消除他们留下联系方式时的不安和疑惑。要知道大多数用户都非常重视自己的个人隐私和信息安全。当企业要采取以上的方法对主页进行优化的时候，我建议你注意对优化前后的营销效果进行具体对比分析，看看所采取的措施是否真正有利于转化率的提高。在其他人身上有效的方法，放到你的企业身上不一定能成功。

网站设计制作一个好的主页的方法；
看到这里，你是不是开始羡慕别人的网站怎么能够设计地这么好？当你刚开始准备重新设计主页时，很容易陷入“主题单一”的误区。你花费在创造内容方面的时间越久，你就越没有精力扩展用户邮箱列表，越没有精力和读者互动，越没有精力优化网页设计。此时你有三种出路：

1.自己设计主页，聘请程序员进行网页编码

如果你擅长美工，那么就自行设计一个新的主页，然后聘请专业的WordPress程序员为你编码。当然前提是你擅长美工，知道怎么利用各种插件来达到最好的效果，否则我不建议你采取这个做法。

2.聘请一个网页设计师

有大把优秀的网页设计师供你选择，他们是WordPress方面的专家，可以帮助你设计一个全新的、漂亮的主页。如果你希望你的主页可以更加个性化更加独树一帜，你的要求比较多的话，那么花费相对的也就比较多，可能需要几万块，但是如果你要求比较少，只是希望能够请一个人帮你重新优化主页的话，只需要花费少量预算就可以了——如果你能找到一个收费比较低的程序员来实现主页的话，花费就更少了。

3.购买新的主题

最后一种选择是最便宜最省事，而且可能，是效果最好的。那就是直接购买新主题。WordPress上提供许多主题供用户选择，这些主题都是经过设计师的精心设计，卖点就在于通过优化主页为博客主带来更多的转化率。

网页设计中常用字体；

1.网页设计中的英文字体，一般有以下五类：

serif（衬线）
sans-serif（无衬线）
monospace（等宽）
fantasy（梦幻）
cuisive（花体）
网页设计中最常见的无衬线字体

在常见的两种字体风格中，衬线体的笔划感太”过”，不是特别的商业。随着瑞士设计风格的大力推广，无衬线字体变得愈发流行起来。

建议: 个人认为 Tahoma 以及 Verdana 字符编码效果最好，适用于多种环境
Arial

字体族科：Arial, “Helvetica Neue”, Helvetica

变体:

Arial：有时称为Arial Regular以便与Arial Narrow区别，其包括Arial、Arial Italic（斜体）、Arial Bold（粗体）、Arial Bold Italic（粗斜体）和Arial Unicode MS
Arial Black：此字体的特色在于其笔画相当的粗，包含Arial Black、Arial Black Italic（斜体）
Arial Narrow：为Arial的细瘦版本，包含Arial Narrow Regular、Arial Narrow Bold（粗体）、Arial Narrow Italic（斜体）和Arial Narrow Bold Italic（粗斜体）
Arial Rounded：包含Arial Rounded Bold（粗体），此字体可在微软韩文字体Gulim找到

Avant Garde

字体族科包括: “Avant Garde”, Avantgarde, “Century Gothic”, CenturyGothic, “AppleGothic”;

Calibri

字体族科包括: Calibri, Candara, Segoe, “Segoe UI”, Optima, Arial,;
Calibri，一种无衬线字体，为微软Microsoft Office 2007套装软件的默认字体，取代先前Microsoft Word的默认字体Times New Roman以及PowerPoint、Excel和Outlook的默认字体Arial。
Calibri是搭发布于微软Windows Vista六种英文ClearType字体的其中一种，是Microsoft Word默认字体的第一个无衬线字体，先前则是使用Times New Roman为默认字体。

Candara

字体族科包括: Candara, Calibri, Segoe, “Segoe UI”, Optima, Arial

Candara是一种无衬线字体，为字型设计师Gary Munch为微软所开发，附带于Windows Vista中发行

Franklin Gothic Medium

字体族科包括: “Franklin Gothic Medium”, “Franklin Gothic”, “ITC Franklin Gothic”, Arial, sans-serif;

Futura

字体族科包括：: Futura, “Trebuchet MS”, Arial;

Futura灵感来自包豪斯，继包豪斯的设计理念，设计师保罗伦纳1924年至1926年首次创建Futura。虽然伦纳是不是包豪斯的成员，但是他赞同其很多观点，他认为现代的字体应该表达出现代模式，而不是成为过去字体的延续。Futura商业授权发行于1927年，由鲍尔型铸造厂投产。

Helvetica

字体族科包括: “Helvetica Neue”, Helvetica, Arial;

Helvetica被视作现代主义在字体设计界的典型代表。按照现代主义的观点，字体应该”像一个透明的容器一样”，使得读者在阅读的时候专注于文字所表达的内容，而不会关注文字本身所使用的字体。由于这种特点的存在，使得Helvetica适合用于表达各种各样的信息，并且在平面设计界获得了广泛的应用。

Optima

字体族科包括: Optima, Segoe, “Segoe UI”, Candara, Calibri, Arial;

奥普蒂玛体（Optima）是一款英文无衬线体。最初是为德国著名字体设计师赫尔曼·察普夫为法兰克福的D. Stempel AG foundry公司在1952年至1955年左右设计的。

Tahoma

字体族科包括: Tahoma, Verdana, Segoe;

Tahoma是一个十分常见的无衬线字体，字体结构和Verdana很相似，其字符间距较小，而且对Unicode字集的支持范围较大。

网页设计中最常见的衬线字体

衬线字体再纸媒中使用较多，在纸张上的显示效果更加。但是在屏幕上（尤其是小屏幕上），显示效果不是那么的好。但是依然有很多设计师喜好用衬线字体，主要多用于标题，让标题看起来更与众不同。
Baskerville

字体族科包括: Baskerville, “Baskerville Old Face”, “Hoefler Text”, Garamond, “Times New Roman”;

Big Caslon

字体族科包括: “Big Caslon”, “Book Antiqua”, “Palatino Linotype”, Georgia;

Bodoni MT

字体族科包括: “Bodoni MT”, Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”;

Cambria

字体族科包括: Cambria, Georgia, serif;

Cambria是搭载于微软Windows Vista、Microsoft Office 2007和Microsoft Office 2008 for Mac等软件的一个衬线字体，其字符间距和比例相当的平均，对角和垂直方向的笔画和衬线比较粗，而水平向的衬线比较细，强调笔画的末笔。

Didot

font-family: Didot, “Didot LT STD”, “Hoefler Text”, Garamond, “Times New Roman”;

Georgia

字体族科包括: Georgia, Times, “Times New Roman”;

Georgia是一种衬线字体，为著名字型设计师马修·卡特（Matthew Carter）于1993年为微软所设计的作品，具有在小字下仍能清晰辨识的特性，可读性十分优良。其命名发想自一份小报报道在美国佐治亚州发现外星人头颅的测试性头条。

一个网页设计者的分析能力远比创意来的重要。总之设计出好的网页需要注意多方面；

界面弱化
　　一个好的界面设计它的界面是弱化的，它突出的是功能，着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。
要让访客在0.5秒内就能把握网站的行业性质，1秒内就知道该从哪个地方开始使用这个网站，能点一次的，绝不点第二次。当然上面说的是大多数功能性网站，对于宣传展示性网站，诸如加特效的或Flash网站，可能就不得不花哨一些，但不能太过分。网站不是动画片，在效率越来越高，社会心理越来越浮躁的中国，人们的耐心越来越小，心理承受能力越来越低。效果可以体现意境，点到为止。

模块化和可修改性强
　　模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。这里就涉及一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。
无论是架构还是模块或图片，都要考虑可修改性强。举个简单的例子，logo、按钮等，很多人喜欢制作图片，N个按钮就是N张图片。如果只做3-5类按钮的背景图片，然后用在网页代码里打上文字，那么修改起来就简单了，让程序员自己改字就可以了。然而网页显示的字体是带有锯齿的，一般即能清晰又保证美观的字体字号有几类：宋体 12px | 宋体 12px 粗体 | 宋体 14px | 宋体 14px 粗体 | 黑体 20px | verdana 9px | Arial Black 12px+ |

TAG标签耗时：0.029561996459961 秒

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：公司网站建设web开发应注意的问题 | ·下一条：餐饮美食网站建设方案分析