（三）案例

主導(dǎo)航

(一) 說(shuō)明

主要導(dǎo)航是系統(tǒng)模塊或功能導(dǎo)航。 根據(jù)用戶(hù)的瀏覽習(xí)慣，視線是從左到右、從上到下，所以主導(dǎo)航往往放在左側(cè)和頂部。 因此，我將系統(tǒng)常用的框架按照導(dǎo)航位置分為兩類(lèi)：左側(cè)導(dǎo)航布局和頂部導(dǎo)航布局（具體風(fēng)格介紹留待最后的框架回顧）。

(2)互動(dòng)

單擊 跳轉(zhuǎn)至相應(yīng)的導(dǎo)航模塊，或單擊 展開(kāi)多級(jí)欄目。

（三）案例

帳戶(hù)信息

(一) 說(shuō)明

用戶(hù)登錄賬戶(hù)相關(guān)信息

(2)互動(dòng)

（三）案例

新聞/工具

(一) 說(shuō)明

主要顯示系統(tǒng)常用的工具，包括搜索、消息、注銷(xiāo)/退出、幫助等功能codejock 界面布局，常以圖標(biāo)或文字的形式顯示； 這些功能的放置以及賬戶(hù)信息都穿插在頂部。

(2)互動(dòng)

不同的功能對(duì)應(yīng)不同的交互方式。 例如，您可以輸入搜索，點(diǎn)擊查詢(xún)搜索結(jié)果，注銷(xiāo)點(diǎn)擊退出系統(tǒng)返回登錄頁(yè)面……

（三）案例

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

(一) 說(shuō)明

主要分為首頁(yè)和詳情頁(yè)。 主頁(yè)或控制面板（）主要由各種組件（數(shù)據(jù)、列表、表單等）組成。 就是優(yōu)先考慮系統(tǒng)最重要的功能，并在首頁(yè)快速展示。 快速進(jìn)入； 詳情頁(yè)面對(duì)應(yīng)各個(gè)模塊的功能操作頁(yè)面，需要根據(jù)不同的欄目需求進(jìn)行設(shè)計(jì)。

（內(nèi)容區(qū)內(nèi)容與系統(tǒng)需求相關(guān)，后續(xù)章節(jié)將對(duì)內(nèi)容區(qū)進(jìn)行總結(jié)分析）

（二）案例

好了，簡(jiǎn)單介紹了系統(tǒng)界面的幾個(gè)組成部分，現(xiàn)在我們可以通過(guò)這些部分的不同組合，形成各種個(gè)性化的系統(tǒng)框架風(fēng)格。 因?yàn)橹鲗?dǎo)航欄是最重要的功能模塊，所以我把它分為兩類(lèi)：左側(cè)導(dǎo)航和頂部導(dǎo)航。

左側(cè)導(dǎo)航：最常見(jiàn)也是現(xiàn)在最流行的導(dǎo)航位置設(shè)計(jì)方案

（1）左側(cè)導(dǎo)航（包括標(biāo)簽欄，其功能與瀏覽器標(biāo)簽頁(yè)相同，方便用戶(hù)打開(kāi)多個(gè)欄目頁(yè)面并進(jìn)行切換）

（2）左側(cè)導(dǎo)航（主導(dǎo)航集成賬戶(hù)信息）

（3）左側(cè)導(dǎo)航（導(dǎo)航和內(nèi)容區(qū)同時(shí)滾動(dòng)）

（4）左側(cè)導(dǎo)航（右側(cè)全是內(nèi)容，適合導(dǎo)航和工具較少的情況）

頂部導(dǎo)航

頂部導(dǎo)航常用于網(wǎng)站導(dǎo)航的設(shè)計(jì)。 如果系統(tǒng)中主要導(dǎo)航模塊較少，可以將其放置在頂部，以提高空間利用率。

(1)頂部導(dǎo)航

（2）頂部導(dǎo)航（單獨(dú)的導(dǎo)航欄）

以上是一些系統(tǒng)界面布局樣式，但界面布局并不限于這些結(jié)構(gòu)。 設(shè)計(jì)時(shí)可以自由搭配模塊組件。 組件不必明確區(qū)分即可形成適合您項(xiàng)目的系統(tǒng)接口框架。

這次我只是介紹了框架的結(jié)構(gòu)和一些簡(jiǎn)單的案例，教大家如何搭建一個(gè)簡(jiǎn)單的系統(tǒng)界面框架。 主頁(yè)界面的詳細(xì)制作以及界面內(nèi)容區(qū)的詳細(xì)功能模塊設(shè)計(jì)需要更多的細(xì)節(jié)，所以下一節(jié)我們將介紹各個(gè)組件，包括主頁(yè)面板和各種列表、彈窗、詳情頁(yè)的內(nèi)容。 類(lèi)樣式等codejock 界面布局，讓大家更好的理解如何構(gòu)建系統(tǒng)原型。

概括

作為一個(gè)做了一年多交互設(shè)計(jì)師的菜鳥(niǎo)，這是我第一次編輯這樣的分享文檔。 我從未接受過(guò)任何系統(tǒng)的專(zhuān)業(yè)學(xué)習(xí)，所學(xué)到的所有知識(shí)都來(lái)自于各個(gè)產(chǎn)品設(shè)計(jì)相關(guān)網(wǎng)站上分享的文章。 所以，第一次分享的目的更多是為了學(xué)習(xí)的目的。 邏輯和言語(yǔ)肯定有很多問(wèn)題，分析也很片面，解釋也很啰嗦。 因此，如果本文有任何問(wèn)題，請(qǐng)隨時(shí)提問(wèn)。 指出，謝謝。

以后我會(huì)繼續(xù)分享我的設(shè)計(jì)經(jīng)驗(yàn)，也會(huì)繼續(xù)寫(xiě)下來(lái)。

作者：Tom Wang是一名新秀交互設(shè)計(jì)師，擁有不到2年的產(chǎn)品交互設(shè)計(jì)經(jīng)驗(yàn)和2年的電商APP運(yùn)營(yíng)經(jīng)驗(yàn)。

如有侵權(quán)請(qǐng)聯(lián)系刪除！