公司網站主頁設計的思路和方法

2019.04.28

网页設計，是以视觉設計为主的工作。
一个网页被設計出来，是给人用，给人看的。要好看（简洁）、要好用（高级）这才是一个設計师需要反复考虑的。视觉+交互，是网页設計师的核心竞争力。
其中“视觉設計”的依据，源于前面的策划和交互設計。最后出具的“视觉設計稿”得符合品牌定位，满足生产运营，以及用户需求，这是网页設計师必修的基本功
前端制作，是以前端代碼爲主。
前端制作在流程上，是在视觉設計之后。这部分工作基本上是由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+ |

400-7808-893 / 010-64913142 我想要個更針對我需求的方案

上一篇文章：公司網站建設web开发要注意的问题下一篇文章：餐饮美食網站建設方案分析

看過此文章的人也看過

日韩一级一片