中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

上篇文章介紹了系統整體框架的結構，以及相關案例，主要是針對系統的外層框架布局，那么今天這篇文章就要介紹系統正文內容區怎么來分析和設計的，對不同的內容分類，介紹參考案例以及各種類型的內容適用于何種場景。

內容區分類

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

首頁（控制面板）

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

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

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

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

詳細信息：常用于文章詳情或單獨的圖文詳情信息。

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

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

表格：以表格的形式組織整理信息/數據的展現方式

根據其樣式功能的不同又可以細分為基礎表格、可操作表格和個性化表格。

基礎表格：只做信息/數據展示

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

個性化表格：在基礎表格的基礎上將數據圖表、操作功能等內容相互結合做成個性化表格。

圖表：數據統計信息的圖形化展示，常用于對于系統或者模塊總體信息的綜述展示

大部分有系統數據統計的網站會在首頁將一部分重要數據信息以圖表的形式進行展示。分為：數據綜述、數據圖表、個性化。

數據綜述：常用在界面首屏，展示系統/模塊最終要的數據統計信息；

數據圖表，以圖表的形式展現展示；（圖表可參考echart）

個性化，多個圖表整合

表單表單：在網頁中主要負責數據采集功能，由表單標簽、表單域、表單按鈕組成

本章介紹：基本表單、向導表單、編輯器。

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

向導表單：多步驟的處理表單，常用于注冊、辦件等復雜流程中，提升交互的效率。

編輯器，圖文編輯器，常用于信息發布、回復帖子等場景

總結

以上就是首頁（控制面板）的介紹，此處只是提供一些常規面板的設計方案，你可以使用這些面板，調整面板大小、信息、位置自由組成你所需要的首頁。當然本文只是介紹了總結了我自己在設計設計時的基本思路對系統首頁元素的解構，可以給你們作為參考，真正設計系統首頁的時候還需要設計師根據實際業務需求來進行分析和個性化設計。

當遇到系統模塊較少或者系統已某個功能為主的需求時，首頁可以不以控制面板的樣式展現，可以直接對應功能模塊的詳情頁，這也就是我們下一節要介紹的內容區（詳情頁）設計。

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

備注：

文章是我的不專業總結，如有遺漏和疏忽請在評論區指出；

文章中部分界面截圖內容來自網絡，如有侵權，請及時聯系我進行處理。

相關閱讀：

如何快速搭建系統原型（一）

作者：Tom王，菜鳥交互設計師一枚，2年未滿的產品交互設計經驗，2年電商APP運營經驗。

本文由 @Tom王 原創發布于人人都是產品經理。未經許可，禁止轉載。