网站首页如何设计？6个形象官网与个人博客案例分析
网站首页如何设计？6个形象官网与个人博客案例分析
在当今数字化时代，一个精心设计的网站首页对于提升品牌形象和用户体验至关重要。本文将通过多个实际案例，深入分析如何设计一个既专业又吸引人的网站首页，并提供具体的实施步骤。
前言
经常有经营博客的朋友询问，我的网站是否需要首页？我认为首页是重要的，可以想象首页就是家里的玄关，当有客人到你家时，会拥有的第一感受。
我们常见的博客首页，又或是说博客的默认首页，会是有很多则的文章，按照时间排序。这样的首页会有一个小问题，也就是当你的文章数量多时，读者会没办法快速知道网站中有哪些的主题；而如果想要让读者更加认识自己，大多也只能透过侧边栏的自我介绍。
所以这这时候首页的设计就非常重要，可以经过完善的页面信息安排，让读者清楚你的主题，也知道你是谁，以及你的合作/服务方式，在提升专业感之余，也提升个人品牌的信任度。
以我的「温研创意」为例：原先只有博客文章分类页面（左图），后续我设计了右图的首页，让读者想找我做设计服务时，可以更清楚知道服务的项目，以及能观察作品风格是否与客户心所中想的契合，整体而言能够对我的品牌有更快速的认识。
首页可以放哪些信息？
会询问首页可以放哪些信息的人，大多是刚开始经营，文章内容还不多，不知道可以在首页上放哪些内容，以下是我列出最常见的首页内容，给不知道该放哪些信息的人作参考：
1. 品牌介绍
在网站的开始可以用简短的方式撰写品牌的介绍，或者是放上品牌的一句 Slogan，主要是能带出品牌的核心理念，让读者更加认识你。
2. 电子邮件
如果你有在经营电子报，希望大家来订阅你的信件，可以在首页最上方让大家直接输入你的姓名、信箱，让读者知道你是有在经营，建议可以放在首页的最上方或最下方，可以方便读者订阅邮件
3. 主题介绍
我喜欢在首页的开头，使用图示的方式简单地介绍经营主题，让读者知道主要的经营方向，对大家对你的网站有一个初步的认识，总共有 3 个信息：
- 图示：选择具代表性的图示，增加辨识度，也丰富网站上的视觉
- 标题：写上标题说明，赋予图示名称
- 简介：可使用 2 至 3 行说明文，建议统一字数，让排版更一致
4. 自我介绍
可以让读者清楚知道所观看的文章作者是由谁撰写，也能加深读者的黏着度，主要的信息内容有：
- 形象照片：可以放上一张与品牌主题相辅的形象照，来凸显自己的专业度。
- 标题说明：可以写上 150 字的简单自我介绍，让大家都用最快的時間认识你。
5. 精选文章
可以选择几篇最经典的文章，让读者一进首页优先阅读，以下是文章基本信息：
- 文章封面：可以制作一张能勾起读者想要阅读的封面照
- 标题说明：写上文章的标题，来吸引读者阅读的动力
- 内容简介：可以简单写上 2 至 3 行说明，让读者知道这篇主要的内容方向
- 功能按钮：放上按钮，让读者知道这篇是可以点选阅读
6. 联络我们
可以在首页的最下方放上联络信息，让想与你合作的厂商，清楚知道如何联络你，每个人习惯的联络方式都不同，以下是 5 种最常使用的联络信息：
- 电子邮件：放上一个专属于这个品牌的电子邮件，让读者能联络你
- 电话/传真：可以放上电话、传真的号码，提供客户使用
- LINE 官方：放上 LINE 官方账号的链接 (我自己本身是使用这项联络方式，使用之前可以先到LINE 官方申请)
- 表单填写：如果服务内容比较多元，可以使用表单填写方式
- 地址：通常有具体地点的公司会嵌入地图，让厂商可以到府拜访。如果有经常挂号信件的需求，也可以直接让客户知道寄件地址，避免来回沟通浪费太多时间。
7. 合作厂商
如果你已经有合作伙伴，可以将厂商的标志放上首页，对后续想一同合作的伙伴提高信任度。
8. 心得评论
如果你的网站有提供服务，可以请客户提供售后的心得，作为一种见证，来增加后续客户的信赖度。
个人品牌网站案例分析
以下是我经手过的案子，分别解析不同主题的创作者，在首页上会有哪些不同之处：
案例一：「DR.DEAN处方笺」
DR.DEAN主要是以学习、创作为两大主题，在内容上也非常的丰富，文章的数量也是相当的惊人，而每週也会写一篇电子邮件分享给他的读者，所以在文字量比较重的创作者上，要如何安排首页呢？
分析一：
DR.DEAN主要有在经营电子邮件，所以在网站的一开始就放上了输入订阅框，让想订阅的人，直接可以找到，而作者本人也是一位简约个性的，在设计上给他简单且符合色调的视觉插图。
首页的最上方就可以看到电子邮件的订阅框，原因是因為这个品牌的经营模式，是靠「内容口碑营销」，也就是大多会认识这个品牌的人，都是因为作者的内容被转载，或是朋友之间的互相分享，所以很多人搜索这个网站都是要订阅作者最新内容，也就是如此，才會将订阅框放在最明显的位置，让浏览者在一进入网站时就能看见并做出行动。
而在订阅框的下方，則是加上了简短的品牌简介及标语，一样是进入网站就能看到 (不用往下滑动)，让第一次来到网站的人，也能马上知道这个网站想传递怎么样的理念，间接影响是否要在上方进行内容的订阅。
而在首页的最下方也有放上了订阅框，原因是当读者浏览网站到最下方，大致了解品牌后，想订阅时就可以直接订阅，并不需要再将滑鼠移至最上方，这也是对于使用者体验的友善。
分析二：
由于站主的文章数量非常多，如果全部都放在首页中，会过于拢长，导致于读者没有耐心继续读下去。所以这邊的设计就是使用 3 篇文章作为最基本的呈现，再以文章分类标签来进行收纳，每切换一个标签时，都会有多篇新文章显示，不仅可以让呈现多主题，也能让排版维持简约。
站主有两个社群，而若要让读者清楚知道两者的不同，但又隶属于同一品牌，就可以使用像下图这样的设计，利用相同线框，但不同风格的社群封面视觉，有效解决读者不好辨识的问题，整体画面也不会太过突兀。
案例二：「慢活夫妻」
慢活夫妻主要经营 Youtube 频道，也有出版著作「慢富」，平時会透过电子报的方式与读者分享最新消息。以下分享如何把这么多信息，排列在首页上：
分析一：
在首页的一开始，就放了慢活夫妻的大头照，呼应了品牌名称，并且结合了品牌 LOGO 的框线，让一般的生活照融入整题的风格之中，也將他们主要经营的电子邮件，放在首页的一入口，让想订阅的读者可以立即订阅。
而下方询问读者「你有这些烦恼吗？」直接点出大家的疑问，如果你也对于这些问题感到困扰，那你就會是慢活夫妻的受眾，这就是运用了销售页面的小技巧，让经营者可以避免不屬於自己的受眾，让内容更精準。
分析二：
慢活夫妻有出一本书「慢富」，将它放在首页上，增加品牌的專業与信任性。一般在营销上会放上一张商品照片，不过这样子太过单调，我们可以加上情境，像是使用放置书本的架子，让画面更有真实在現場购书的感受，也能抓住读者的眼球。
分析三：
最主要的 Youtube 频道，设计了一个模拟的搜索框，将频道名称以及最让人熟悉的开场白，输入在白色框里，让还不知道有这频道的读者，马上能将频道名称记在脑海里。
这个想法来自於，有观察到大部分的人，观看 Youtube 影片的习惯，除了浏览自己订阅的频道，以及靠首页推播影片外，就是使用搜索的方式，尤其搜索行为又常见於要找特定领域的內容时。
所以针对这个使用者习惯，特别设计一个搜索框，将频道名称以及 Slogan 写出来，让浏览者知道如果要在 Youtube 上找寻投资理财相关的內容，可以直接利用搜索框搜索特定的关键字。
案例三：「领先时代」
领先时代主要以数位工具的内容开始的经营部落格，后續也有了自己的小团队，而创办人老K也是很著名的 Notion 讲师，并开立线上课程及训练营。以下说明他的首页设计：
分析一：
在首页的一入口，设计了一座以老 K 名字「K」岛，岛上他的夥伴们，让读者先感受到品牌的氛围。 在经营个人品牌我認為最重要的是，本身的个性思维，这也会是读者最喜歡觀看的一部分原因，所以可以在网站的一开始给予強烈獨特的风格，特别能凸顯品牌給人的感受。
分析二：
领先时代是以写高效数位工具的内容为主，但其实还有其他开箱、创业等內容，所以运用图示点出 5 个主要的主题，让读者更清楚知道经营的方向。
而在主题的下方，还有最主要的「Notion 數位工作術」线上课程及线上训练营，特别在下方设定主要的产品，让有需求的人点选购买。
至於為什麼不是先放课程封面，再放主题图示？原因是课程封面的視覺较抢眼，如果先放置的话，就容易抢走比較不明顯的主题图示，让使用者在快速浏览时容易不小心忽略。
而這整个区塊也可以清楚说明网站的经营主题，以及引導大家最主要的课程产品。
公司形象官网案例分析
以下找了三家完全不同风格的公司形象首页，分别点出很不错的可以参考的设计：
案例一：「welly SEO」
这是一家专门做网站搜索引擎优化的公司，以公司性质来说，我非常喜歡他们设计上的简洁与专业，直接将专业的服务项目展现，以下是首页上我认为可以参考的优点：
分析一：
首页的开头就有一个最明显的「联络我们」的按钮，直接让有需求的客户知道如何联络，在下方搭配小窗口的专案合作影像画面，接着再将实际的服务数据告诉客户，一进站就让我感受到满满的專業度。
通常为了让网站更好阅读，我们会将资料视觉化，原因是人脑对于图像的敏锐程度会大于文字，而影片则是大于文字与图像，这是源於人最原始的时候都只能藉由画面来做生存上的判断，所以在绝大部份的情况下，影像能够让人有最深刻的感受与记忆。
他们还有一点很厉害的是「配色」，可以观察他们整个品牌的配色只有黑色、白色、黄色，而整个画面的重点处全部都使用「黄色」来展示，完美点出所有想要让读者观看的重点。
分析二：
在前面已经得到了信賴感后，将页面滑动到中间时，并告诉我「为什么要做 SEO？」原先还在疑惑的同时，彷彿有读心术直接解决了我的疑问，并且使用图像的方式让读者更好理解。
我认为这样的图示非常的贴心，也是我前面提到的资料视觉化，将比较专业不好理解的知识，利用懒人包的图示来说明，不仅传递了知识，也在视觉画面上，增添亮點。
分析三：
不仅如此，这个区塊的编排，像是先告诉我我的专业，在与你说明我与他人的不同之处，也很有巧思的运用表格来与其他公司做比较，让对于这领域比较陌生的客户来说，可以有更多的认识。
案例二：「简讯设计」
简讯设计是一家非常多元的公司，不仅有数位整合营销、社群经营、动态设计、网站设计、自媒体曝光合作、群众集资顾问等多项的服务，以下是我认为在首页上非常特别的设计：
分析一：
简讯设计的官网首页最特别的是浏览方式不是上下滑动，而是往右滑动，有一种在看展览的感受，而他们开的头页，是先带领大家看他们的作品。
向右滑动的官网一般会在艺文、展览、潮牌等重量的视觉网站上看见，因为这种设计方式，能讓读者比较是以「纯视觉图像观赏」的角度去浏览网站。 這裡分享一位「产品设计师 Eduardo del Fraile」他就是运用高质感、高光影來展現他的作品，当我们在浏览他的网站时，就像是在欣赏美丽的橱窗。
我认为这样的网站设计是对于自己的品牌非常有自信，很大胆地突破，來增加浏览者的记忆。也确实，这个网站让我在三年多前第一次看到，就记忆至今。
分析二：
通常在介绍自家服务时，一般常见会使用小图示列点说明，而简讯设计是使用插图小动画的模式，营造出团队在协作的情境，让客户能想象他们团队的向心力。
除了有厉害的动画外，整体排版也运用了 2D 空间的設計，很真实地呈现团队的日常，让客户能够有所想象，毕竟像是这种一条龙式的接案公司，最重要就是要让客户有极高的信任度。
案例三：「诚品」
说到诚品大家感受一定是质感的看書环境，在首页的设计上，整体也与实际的感受一致，以下点出 2 个首页上运用的小技巧：
分析一：
一进首页，能够有在现场的感受，並不只是因为放上现场的实际画面，而是因为人们在进入诚品时，总是会放慢脚步，慢慢找到一个属于自己的小空间。而在现场的实际照片上，就运用这种慢慢推进的方式，來呈现整体的氛围，让人有身临其境的感受。
分析二：
在首页最下方，使用高质感的实体照片呈现每一个经营项目，直接把现场氛围带给读者。 虽然只是一张图片，不过也与最前面的图片做相呼应的效果，将滑鼠碰触到图片会有往前慢慢移动的特效。
整体首页虽然简单，但运用了简单的小技法，带出高雅的质感，也与诚品的经营理念一致：
「诚」，是一份诚恳的心意，一份执着的关怀；
「品」，是一份专业的素养，一份严谨的选择。
所以网站的首页有时候也不用过多文字，反而是要去思考自己想营造怎么样的品牌感受。
如何用 WordPress 制作首页
以下是如何在 WordPress 上制作网站首页的简单步骤说明，更详细的教学我都有附在每个步骤中：
step 1
用心智图规划网站架构
在设计网站之前先别急着编辑页面，可以先思网站需要哪些区块内容，我建议用 Xmind 心智图规划网站架构。
step 2
画出网站首页的线框图
接着，将规划好的网站架构，利用黑白的色块，画出首页的网站线框图。
step 3
用设计工具发想网站首页视觉
画完线框图后会开始设计网站视觉，如果你暂时还没有视觉上的想法，除了能去Pinterest等平台找灵感，也可以使用Canva 等设计平台发想网站视觉。(若是已经画面的构想也可以直接到步驟四)
在製作前，也建议将网站品牌色一同规划，结合整體的視覺風格。
step 4
开启 Elementor 制作首页
如果你是使用 WordPress 架设网站，可以下载 Elementor，它是一款编辑网站页面的工具，能够将前面规划的页面视觉，实际制作到网站中。
我有写了一篇完整的Elementor 教学，你可以作为参考，将首页完成。
结论：抓住首页的核心目的
网站上的设计都沒有标准答案，最重要的还是抓住每个页面的核心目的，再针对该目的去进行设计。
以首页来说，主要目的就是要让读者能在最短的时间内，对你有个印象，所以设计上可能会更重视：
- 品牌理念的呈现
- 品牌价值的说明
- 专业与信任度具像化
只要抓住每个页面的核心目的，就能够在设计上有更多变化的同时，同样与读者做到有效的沟通。
如果你还不确定是否要找网页设计师合作，可以参考我這篇的分析：製作网站需要找设计师吗？专业设计师分析给你听