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

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

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

首頁(yè)（操縱 面板）

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

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

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

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

人員信息：常用于展示賬號(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ì)在首頁(yè)將一部分重要數(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)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能，由表單標(biāo)簽、表單域、表單按鈕組成

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

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

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

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

總結(jié)

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

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

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

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

備注：

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

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