设计目标

design goal 

1. 说明清平台，是什么。考虑清楚，平台的定位、做什么领域的什么事儿。

1. Explain what the platform is. Think carefully about the positioning of the platform and what fields and tasks it does.

2. 吸引住用户，有什么。平台面向什么角色，他们关注什么，平台给他们提供有什么价值、利益点。

2. What is there to attract users. What roles are the platform aimed at, what are their concerns, and what value and benefits the platform provides to them.

3. 能试用功能，怎么用。比如能注册、登录；比如联系客服；比如能登录就试用体验。

3. Can you try out the function and how to use it. For example, being able to register and log in; For example, contacting customer service; For example, if you can log in, try the experience.

设计要点

Design points

一、内容上，进行清晰划分

1、 Clear division of content

一般都有的：平台简介、平台优势、平台提供的服务（即什么产品/功能）、注册登录入口......

Generally available: platform introduction, platform advantages, services provided by the platform (i.e. what products/functions), registration and login portal

其他可以展示的：动态新闻、使用帮助、优秀案例、合作伙伴......

Other things that can be displayed: dynamic news, user assistance, excellent cases, partners

二、结构上，遵循三区布局

2、 Structurally, following a three zone layout

按照顶部菜单、内容区、底部区三层进行布局设计。

Layout design according to the top menu, content area, and bottom area on three levels.

顶部菜单重点显示平台logo、名称和各项菜单，提供注册、登录入口。

The top menu highlights the platform logo, name, and various menus, providing registration and login entry points.

底部区一般是公安网备号、copyright声明、友情链接、运营二维码、建设单位、技术支持单位等。

The bottom area is usually the backup number of the public security network Copyright statement, friendly link, operation QR code, construction unit, technical support unit, etc.

其中内容区为重点，一般包括banner和要展现的其他各项内容。

The focus is on the content area, which generally includes banners and other content to be displayed.

三、形式上，使用多变图文

3、 Formally, use diverse graphics and text

背景分层

Background layering

1. 顶部导航，白色背景。

1. Top navigation with a white background.

2. 内容区，灰色或白色背景或灰白交替，要用浅色，加上一些同色系配蒙版做背景比较加分。

2. In the content area, with a gray or white background or alternating gray and white, a light color should be used, and some same color matching masks should be added for background comparison and bonus points.

3. 底部区，一般是深色，黑色背景。

3. The bottom area is generally dark with a black background.

交互适度

Moderate interaction

整个页面滚动查看，单项内容按需选择静态展现、页签切换、轮播、卡片悬停等交互方式。

Scroll through the entire page and select interactive methods such as static display, tab switching, carousel, and card hovering for individual content as needed.

图文结合

Combining graphics and text

（一）叠层

（1） Stacking

作为底层背景，上层是文字，banner位置这样用得多。

As the underlying background, the upper layer is text, The banner position is used more often like this.

（二）并列

（2） Parallel

卡片式并列图文

Card style parallel graphics and text

式并列

Equation parallel

（三）左右侧

（3） Left and right sides

一侧是或插图，一侧是文字或框文

One side is an illustration, and the other side is text or box text

一侧是文字页签切换，一侧是图文

On one side is the text tab switch, and on the other side is the graphic text

（四）上下侧

（4） Upper and lower sides

上侧是文字页签，下侧是卡片或列表式图文

The upper side is a text tab, and the lower side is a card or list style graphic text

一些经验

Some experiences

1. 设计步骤，大致明确展现内容，就开始动手做，复用积累的组件，找合适的素材，找参考案例，尽快做起来，然后迭代优化。

1. Design steps, roughly clarify the presentation content, start working on it, reuse accumulated components, find suitable materials, find reference cases, start as soon as possible, and then iterate and optimize.

2. 整体交互，门户一般以信息展现为主，用户登录后进入业务平台（打开新页签或原页签页面内容按登录后布局展现），可能就会涉及到操作和流程。

2. Overall interaction, portals generally focus on information display. After users log in, they may enter the business platform (by opening a new tab or displaying the content of the original tab page according to the layout after login), which may involve operations and processes.

3. 搜集，使用iconfont查图标和插画，使用islide、觅图网搜背景图，背景图要清晰。

3. Collect and use iconfont to search for icons and illustrations, and use islide and search for background images online. The background images should be clear.

4. 首页背景，一般就是白色和灰色两种背景。

4. The background of the homepage is usually white and gray.

5. 内容宽度，宽度在1440以内，保障各类屏幕都能显示全内容。

5. The content width should be within 1440, ensuring that all types of screens can display full content.

6. 页面配色，颜色不会配，就用一个颜色的配色。

6. Page color matching. If the colors do not match, use a color matching method.

7. 元素间距，行间距等空隙留大一些，看着舒服，不要太挤、太窄。

7. Leave more space between elements, lines, etc. for a comfortable look, and avoid being too crowded or narrow.