如何快速搭建系統(tǒng)原型（二）：內(nèi)容區(qū)（首頁）設(shè)計(jì)

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

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

首頁（操縱 面板）

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

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

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

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

人員信息：常用于展示賬號信息。

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

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

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

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

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

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

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

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

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

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

個性化，多個圖表整合

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

本章介紹：基本表單、向?qū)П韱巍⒕庉嬈鳌?

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

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

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

總結(jié)

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

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

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

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

備注：

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

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