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

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實的服務(wù)了近萬家客戶,成為眾多世界500強、集團和上市公司的長期合作伙伴!
優(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ù)型、信息門戶型、DIY體驗、720全景展廳及3D虛擬仿真)、移動端應(yīng)用(手機站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)、微信小程序定制開發(fā)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。