設計目標

design goal 

1. 說(shuō)明清平臺，是什么?？紤]清楚，平臺的定位、做什么領(lǐng)域的什么事兒。

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

2. 吸引住用戶(hù)，有什么。平臺面向什么角色，他們關(guān)注什么，平臺給他們提供有什么價(jià)值、利益點(diǎn)。

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. 能試用功能，怎么用。比如能注冊、登錄；比如聯(lián)系客服；比如能登錄就試用體驗。

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.

設計要點(diǎn)

Design points

一、內容上，進(jìn)行清晰劃分

1、 Clear division of content

一般都有的：平臺簡(jiǎn)介、平臺優(yōu)勢、平臺提供的服務(wù)（即什么產(chǎn)品/功能）、注冊登錄入口......

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

其他可以展示的：動(dòng)態(tài)新聞、使用幫助、優(yōu)秀案例、合作伙伴......

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

二、結構上，遵循三區布局

2、 Structurally, following a three zone layout

按照頂部菜單、內容區、底部區三層進(jìn)行布局設計。

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

頂部菜單重點(diǎn)顯示平臺logo、名稱(chēng)和各項菜單，提供注冊、登錄入口。

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

底部區一般是公安網(wǎng)備號、copyright聲明、友情鏈接、運營(yíng)二維碼、建設單位、技術(shù)支持單位等。

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.

其中內容區為重點(diǎn)，一般包括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

整個(gè)頁(yè)面滾動(dòng)查看，單項內容按需選擇靜態(tài)展現、頁(yè)簽切換、輪播、卡片懸停等交互方式。

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

一側是文字頁(yè)簽切換，一側是圖文

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

（四）上下側

（4） Upper and lower sides

上側是文字頁(yè)簽，下側是卡片或列表式圖文

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

一些經(jīng)驗

Some experiences

1. 設計步驟，大致明確展現內容，就開(kāi)始動(dòng)手做，復用積累的組件，找合適的素材，找參考案例，盡快做起來(lái)，然后迭代優(yōu)化。

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. 整體交互，門(mén)戶(hù)一般以信息展現為主，用戶(hù)登錄后進(jìn)入業(yè)務(wù)平臺（打開(kāi)新頁(yè)簽或原頁(yè)簽頁(yè)面內容按登錄后布局展現），可能就會(huì )涉及到操作和流程。

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查圖標和插畫(huà)，使用islide、覓圖網(wǎng)搜背景圖，背景圖要清晰。

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. 首頁(yè)背景，一般就是白色和灰色兩種背景。

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

5. 內容寬度，寬度在1440以?xún)?，保障各?lèi)屏幕都能顯示全內容。

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

6. 頁(yè)面配色，顏色不會(huì )配，就用一個(gè)顏色的配色。

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

7. 元素間距，行間距等空隙留大一些，看著(zhù)舒服，不要太擠、太窄。

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