平台型门户网站首页设计总结V1.0
说明:本文总结的是平台型门户网站的首页面设计经验,平台型网站重在撮合各方。还有一类是针对单一产品的门户设计,这种就是为了让用户购买这个产品,在设计上侧重点会有所不同,后续再逐步梳理。
设计目标
1. 说明清平台,是什么。考虑清楚,平台的定位、做什么领域的什么事儿。
2. 吸引住用户,有什么。平台面向什么角色,他们关注什么,平台给他们提供有什么价值、利益点。
3. 能试用功能,怎么用。比如能注册、登录;比如联系客服;比如能登录就试用体验。
设计要点
一、内容上,进行清晰划分
一般都有的:平台简介、平台优势、平台提供的服务(即什么产品/功能)、注册登录入口......
其他可以展示的:动态新闻、使用帮助、优秀案例、合作伙伴......
二、结构上,遵循三区布局
按照顶部菜单、内容区、底部区三层进行布局设计。
顶部菜单重点显示平台logo、名称和各项菜单,提供注册、登录入口。
底部区一般是公安网备号、copyright声明、友情链接、运营二维码、建设单位、技术支持单位等。
其中内容区为重点,一般包括banner和要展现的其他各项内容。
三、形式上,使用多变图文
背景分层
1. 顶部导航,白色背景。
2. 内容区,灰色或白色背景或灰白交替,要用浅色,加上一些同色系图片配蒙版做背景比较加分。
3. 底部区,一般是深色,黑色背景。
交互适度
整个页面滚动查看,单项内容按需选择静态展现、页签切换、图片轮播、卡片悬停等交互方式。
图文结合
(一)叠层
图片作为底层背景,上层是文字,banner位置这样用得多。
(二)并列
卡片式并列图文
图片式并列
(三)左右侧
一侧是图片或插图,一侧是文字或框文
一侧是文字页签切换,一侧是图文
(四)上下侧
上侧是文字页签,下侧是卡片或列表式图文
一些经验
1. 设计步骤,大致明确展现内容,就开始动手做,复用积累的组件,找合适的素材,找参考案例,尽快做起来,然后迭代优化。
2. 整体交互,门户一般以信息展现为主,用户登录后进入业务平台(打开新页签或原页签页面内容按登录后布局展现),可能就会涉及到操作和流程。
3. 图片搜集,使用iconfont查图标和插画,使用islide、觅图网搜背景图,背景图要清晰。
4. 首页背景,一般就是白色和灰色两种背景。
5. 内容宽度,宽度在1440以内,保障各类屏幕都能显示全内容。
6. 页面配色,颜色不会配,就用一个颜色的配色。
7. 元素间距,行间距等空隙留大一些,看着舒服,不要太挤、太窄。
平台型门户参考案例
附图:
优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!
优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、DIY体验、720全景展厅及3D虚拟仿真)、移动端应用(手机站、APP开发)、微信定制开发(微信官网、微信商城、企业微信)、微信小程序定制开发等一系列互联网应用服务。