如何设计一个“好看”的网站
为什么“好看”我加上引号呢,因为好看这个词太主观,不同的人,审美不同,对好看的理解也不一样,也没有一个统一的标准来衡量。
所以,没办法给出一个准确的定义。
但是对网站却有是有一系列的标准和要求的,例如用户体验、视觉、功能性及技术实现,综合性很强。
我也只能抛砖引玉,简单分享一个网站从规划到上线的全过程。
Ⅰ 在开始建立一个网站之前,首先要明确的目标与受众
1、明确定义网站的目标:明确建立网站的目的,例如展示作品、销售产品、提供资讯或者是用户互动。
2、了解目标受众:分析网站用户的兴趣、使用习惯、文化 背景、用户年龄等信息
3、分析同行业竞品,研究同行网站的优点和不足,找到差异化竞争点。
目标与受众确定之后,就要开始规划网站结构。
Ⅱ 规划网站结构
1.首先是信息架构:
确定主要页面(首页、关于我们、联系方式、资讯/博客、隐私 条款等)
设计导航结构(设计清晰的导航菜单,方便用户快速找到所需内容)
【可以通过树状结构或者是思维导图的方式,规划页面层级】
2.其次基于营销考虑:
在设计网站时,还要考虑到用户旅程,模拟用户进入网站到完成目标的完整路径。 根据用户旅程,来优化网站交互,减少操作复杂性。
在信息架构阶段,还需要考虑到是否采用响应式设计,确保网站在多设备下都能完整良好显示。在设计上,优先考虑移动设计,设计好小屏幕布局,再拓展到大屏幕。以我们行业来举例,完成以上内容,就完成了WordPress的搭建、菜单的设置。
Ⅲ 进行视觉设计
这也是出问题最多的地方
视觉设计主要有四点:
一、色彩搭配
二、字体选择
三、网站布局
四、视觉元素
下面我们详细说明
一、色彩搭配
1、首先确定色调(根据目标受众来选择色调),一般使用 1-2 种主色调,2-3中辅助色,保持色彩对比度方便用户阅读。
2、参考品牌色及行业风格(例如科技商务行业一般使用蓝色、时尚行业一般采用黑白色)
二、字体选择
1、选择2-3种字体(采用衬线体和无衬线体搭配)
2、确保字体大小统一(例如标题小三、正文16px、行距1.5倍等)
3、如出现中文,推荐使用思源字体
字体选择原则:提升可读性
三、网站布局
1、采用网格系统(960.gs)
2、保持页面内容对齐
3、增加留白,避免页面过于拥挤,突出重点内容
4、遵循F型或Z型阅读模式,引导用户视线
四、视觉元素
1、使用高质量图片或视频,优化加载速度(WebP格式)
2、添加微交互(页面过渡变化动画、鼠标移动点击动画)
3、保持一致性(图标、按钮、图像风险、面包屑导航、字体所有风格统一)
以上内容完成之后,
最少可以得到一个不难看的网站。
网站申请联盟账号和AdSense是没有太大问题的
如果网站还想做更多的加分项,可以进一步做
【用户体验优化】
Ⅳ 用户体验优化
用户体验优化可以从4个方向入手:
一、导航设计
二、速度优化
三、可访问性优化
四、CTA优化
下面我们详细说明:
一、导航设计
1、使用固定的导航栏,确保用户随时可以点击导航
2、提供面包屑导航,方便用户定位
3、提供搜索或tag功能,方便用户检索
二、速度优化
1、优化图片和代码,减少http请求
2、使用CDN加速资源
3、使用Google站长工具,检测网站加载速度,确保网站能在3秒内完成加载
三、可访问性
1、尽量使网站支持屏幕阅读器(对SEO友好)
2、提供高对比度模式(方便视觉障碍用户)
3、键盘导航友好
四、CAT优化
1、设计醒目的按钮(如“立即购买”“联系客服”)使用动词引导用户
2、放置在显眼位置,可以设计为随页面滚动,固定显示。

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。