上篇文章介紹了系統(tǒng)整體框架的結(jié)構(gòu)，以及相關(guān)案例，主要是針對(duì)系統(tǒng)的外層框架布局，那么今天這篇文章就要介紹系統(tǒng)正文內(nèi)容區(qū)怎么來分析和設(shè)計(jì)的，對(duì)不同的內(nèi)容分類，介紹參考案例以及各種類型的內(nèi)容適用于何種場(chǎng)景。

內(nèi)容區(qū)分類

內(nèi)容區(qū)域指的是正文內(nèi)容區(qū)域（如下圖），根據(jù)該區(qū)域不同的使用場(chǎng)景和作用我分為了首頁和詳情頁兩大類。首頁一般是指系統(tǒng)首頁或者模塊首頁，常需要個(gè)性化設(shè)計(jì)；詳情頁一般是查看/操作頁面，常以列表、表單、信息詳情的形式展現(xiàn)。接下來首先介紹首頁的設(shè)計(jì)思路。

首頁（控制面板）

我再瀏覽系統(tǒng)交互案例的時(shí)候看了很多外國(guó)系統(tǒng)動(dòng)效，發(fā)現(xiàn)他們都把首頁都叫做“控制面板”（dashboard）。我理解作為一個(gè)控制面板，首頁的作用就是控制整個(gè)系統(tǒng)，控制系統(tǒng)中所有的欄目/模塊，那么首頁就是由控制這些模塊的“面板”組織而成。如下圖：

那其實(shí)我們要設(shè)計(jì)首頁，就是把系統(tǒng)各個(gè)子模塊簡(jiǎn)化成一個(gè)個(gè)小面板，再按照模塊的優(yōu)先級(jí)等原則進(jìn)行布局展示就行了。是不是感覺設(shè)計(jì)首頁很簡(jiǎn)單，那么真正的難度在于不同的系統(tǒng)不同的功能模塊我們?cè)趺窗堰@些模塊簡(jiǎn)化成一個(gè)個(gè)面板。我將這些面板分為四種類型：信息、表格、圖表、表單：

信息：展示信息，又可以分為列表信息、詳細(xì)信息、人員信息、消息等

列表信息：展示多條列表信息，常用于新聞信息列表、排行、文章標(biāo)題列表等。

詳細(xì)信息：常用于文章詳情或單獨(dú)的圖文詳情信息。

人員信息：常用于展示賬號(hào)信息。

消息：常用于展示短信消息或者人員留言等信息；

表格：以表格的形式組織整理信息/數(shù)據(jù)的展現(xiàn)方式

根據(jù)其樣式功能的不同又可以細(xì)分為基礎(chǔ)表格、可操作表格和個(gè)性化表格。

基礎(chǔ)表格：只做信息/數(shù)據(jù)展示

可操作表格，可以對(duì)表格進(jìn)行編輯、刪除、新增、排序等操作。

個(gè)性化表格：在基礎(chǔ)表格的基礎(chǔ)上將數(shù)據(jù)圖表、操作功能等內(nèi)容相互結(jié)合做成個(gè)性化表格。

圖表：數(shù)據(jù)統(tǒng)計(jì)信息的圖形化展示，常用于對(duì)于系統(tǒng)或者模塊總體信息的綜述展示

大部分有系統(tǒng)數(shù)據(jù)統(tǒng)計(jì)的網(wǎng)站會(huì)在首頁將一部分重要數(shù)據(jù)信息以圖表的形式進(jìn)行展示。分為：數(shù)據(jù)綜述、數(shù)據(jù)圖表、個(gè)性化。

數(shù)據(jù)綜述：常用在界面首屏，展示系統(tǒng)/模塊最終要的數(shù)據(jù)統(tǒng)計(jì)信息；

數(shù)據(jù)圖表，以圖表的形式展現(xiàn)展示；（圖表可參考echart）

個(gè)性化，多個(gè)圖表整合

表單表單：在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能，由表單標(biāo)簽、表單域、表單按鈕組成

本章介紹：基本表單、向?qū)П韱?、編輯器?/p>

基本表單，基本的數(shù)據(jù)輸入等操作，常用于登錄、設(shè)置、信息輸入等場(chǎng)景。

向?qū)П韱危憾嗖襟E的處理表單，常用于注冊(cè)、辦件等復(fù)雜流程中，提升交互的效率。

編輯器，圖文編輯器，常用于信息發(fā)布、回復(fù)帖子等場(chǎng)景

總結(jié)

以上就是首頁（控制面板）的介紹，此處只是提供一些常規(guī)面板的設(shè)計(jì)方案，你可以使用這些面板，調(diào)整面板大小、信息、位置自由組成你所需要的首頁。當(dāng)然本文只是介紹了總結(jié)了我自己在設(shè)計(jì)設(shè)計(jì)時(shí)的基本思路對(duì)系統(tǒng)首頁元素的解構(gòu)，可以給你們作為參考，真正設(shè)計(jì)系統(tǒng)首頁的時(shí)候還需要設(shè)計(jì)師根據(jù)實(shí)際業(yè)務(wù)需求來進(jìn)行分析和個(gè)性化設(shè)計(jì)。

當(dāng)遇到系統(tǒng)模塊較少或者系統(tǒng)已某個(gè)功能為主的需求時(shí)，首頁可以不以控制面板的樣式展現(xiàn)，可以直接對(duì)應(yīng)功能模塊的詳情頁，這也就是我們下一節(jié)要介紹的內(nèi)容區(qū)（詳情頁）設(shè)計(jì)。

原型演示地址：http://1q779b.axshare.com

備注：

文章是我的不專業(yè)總結(jié)，如有遺漏和疏忽請(qǐng)?jiān)谠u(píng)論區(qū)指出；

文章中部分界面截圖內(nèi)容來自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)及時(shí)聯(lián)系我進(jìn)行處理。

相關(guān)閱讀：

如何快速搭建系統(tǒng)原型（一）

作者：Tom王，菜鳥交互設(shè)計(jì)師一枚，2年未滿的產(chǎn)品交互設(shè)計(jì)經(jīng)驗(yàn)，2年電商APP運(yùn)營(yíng)經(jīng)驗(yàn)。

本文由 @Tom王 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。