如何快速搭建系統(tǒng)原型(一)
本文是我對現(xiàn)階段學習和接觸到的系統(tǒng)項目總結(jié),將系統(tǒng)界面各部分模塊化/組件化,編寫了系統(tǒng)通用交互方案,旨在幫助交互設(shè)計師、項目經(jīng)理通過通用方案可以根據(jù)項目需求快速搭建合適的系統(tǒng)界面。
背景
最近負責了多個系統(tǒng)的交互設(shè)計工作,在設(shè)計的過程中遇到了一些問題:界面布局應該怎么設(shè)計,這個功能怎么放,首頁要放什么內(nèi)容、這邊放這些功能合適嗎、彈窗展示是否合適……設(shè)計好了又發(fā)現(xiàn)需要個性化,開發(fā)成本較高,標準版不支持。
所以,我想有沒有一套方案,可以幫助我,幫助設(shè)計師、項目經(jīng)理快速的搭建系統(tǒng)的原型方案;也可以后續(xù)運用到標準版的迭代中。我們交互設(shè)計制作原型經(jīng)常會使用Axure 中的組件(元件)通過組合成為各類產(chǎn)品原型,那么是不是我可以通過分析結(jié)構(gòu)系統(tǒng)的界面設(shè)計,將系統(tǒng)各個功能模塊分解出來,作為一個元件來呈現(xiàn),然后用這些元件來搭建各類系統(tǒng)。只要改變元件大小、元件布局、交互細節(jié)就可以做出各種個性化同時適合客戶需求的系統(tǒng)原型了。
界面結(jié)構(gòu)
本文只是對常規(guī)系統(tǒng)作分析,一些很個性化程度很高的系統(tǒng)(例如視頻監(jiān)控、大數(shù)據(jù)展示系統(tǒng)等)不做具體的分析和介紹。
首先,以百度云盤為例,我們可以看到一個系統(tǒng)頁面根據(jù)不同的功能作用分為以下模塊:系統(tǒng)名稱/logo、主導航、賬號信息、消息/工具、內(nèi)容區(qū)等功能區(qū)域;
接下來,我會總結(jié)這些模塊的主要功能作用和常用交互方式,并介紹一些設(shè)計案例,并整理成原型組件,后續(xù)通過這些組件就可以搭建你想要的系統(tǒng)界面了。
系統(tǒng)名稱/logo
(1)說明
一般位于界面左上角,標識系統(tǒng)的名稱和logo,也有加上sloga或結(jié)合背景圖片來凸顯系統(tǒng)特性的。
(2)交互
點擊logo區(qū)域返回到系統(tǒng)首頁。
(3)案例
主導航
(1)說明
主導航作為系統(tǒng)模塊或者功能導航,從用戶的瀏覽習慣視線從左往右和從上往下,所以主導航常放在左側(cè)和頂部,所以根據(jù)導航位置我把系統(tǒng)常用框架分為兩類:左側(cè)導航布局、頂部導航布局(具體的樣式介紹放到最后的框架綜述)。
(2)交互
點擊跳轉(zhuǎn)到對應的導航模塊,也可以點擊展開多級欄目。
(3)案例
賬號信息
(1)說明
用戶登錄賬號相關(guān)信息
(2)交互
- 點擊跳轉(zhuǎn)到用戶中心
- 切換賬號
- 注銷/退出賬號
- 移入展開個人中心相關(guān)操作(個人信息、設(shè)置、賬號密碼……)
(3)案例
消息/工具
(1)說明
主要展示系統(tǒng)的常用工具,包括搜索、消息、注銷/退出、幫助等等功能,常以圖標或者文字的形式展現(xiàn);這些功能放置的位置和和賬號信息結(jié)合穿插排布在頂部。
(2)交互
根據(jù)不同的功能有對應不同的交互方式,例如搜索可輸入,點擊查詢搜索結(jié)果,注銷點擊后退出系統(tǒng)返回登錄頁面……
(3)案例
內(nèi)容區(qū)
(1)說明
主要分為首頁和詳情頁面,首頁或者叫控制面板(dashboard)主要是各類組件(數(shù)據(jù)、列表、表單等等)相互組合而成,就是將系統(tǒng)最主要的功能優(yōu)先在首頁有個快速展示也作為快捷入口;詳情頁對應的是各個模塊的功能操作頁面,具體需要根據(jù)不同的欄目需求來設(shè)計。
(內(nèi)容區(qū)的內(nèi)容和系統(tǒng)需求相關(guān),會在后續(xù)章節(jié)中對內(nèi)容區(qū)進行總結(jié)分析)
(2)案例
OK,那簡單介紹了系統(tǒng)界面的幾個組成部分,那么我們現(xiàn)在就是通過這個部分不同的組合就可以組成各種各樣個性化的系統(tǒng)框架樣式了。因為主導航欄是最主要的功能模塊,所以我又分為兩類:左側(cè)導航、頂部導航。
左側(cè)導航:最常見,現(xiàn)在最流行的導航位置設(shè)計方案
(1)左側(cè)導航(含標簽欄,標簽欄同瀏覽器標簽頁功能,方便用戶打開多個欄目頁面進行切換)
(2)左側(cè)導航(主導航整合賬號信息)
(3)左側(cè)導航(導航和內(nèi)容區(qū)同步滾動)
(4)左側(cè)導航(右側(cè)全部是內(nèi)容,適用于導航、工具較少的情況)
頂部導航
頂部導航常用于網(wǎng)站導航的設(shè)計,系統(tǒng)中如果主導航的模塊較少也可以放在頂部,提高空間利用率。
(1)頂部導航
(2)頂部導航(單獨導航欄)
以上是一些系統(tǒng)界面布局樣式,但是界面布局不限于這些結(jié)構(gòu),你可以設(shè)計的時候可以模塊組件自由搭配,組件間不一定要區(qū)分的很明顯,組成適合你的項目的系統(tǒng)界面框架。
這次只是介紹了框架的構(gòu)成和一些簡單的案例,教導了大家如何來搭建一個簡單的系統(tǒng)界面框架。詳細的制作一個首頁界面、詳細的界面內(nèi)容區(qū)域的功能模塊設(shè)計還需要更多細節(jié),所以在下一節(jié)會介紹各類組件,包括首頁的面板和詳情頁的各類列表、彈窗、內(nèi)容的各類樣式等等,方便大家更好的了解系統(tǒng)原型搭建的方式。
小結(jié)
作為一個正式作為交互設(shè)計師一年多的菜鳥來說,第一次編輯這種分享類的文檔。沒接受過系統(tǒng)的專業(yè)的學習,所有學到的知識都是來源于各種產(chǎn)品設(shè)計類相關(guān)的網(wǎng)站分享的文章。所以,第一次分享更多的還是報著學習的目的,邏輯話術(shù)上肯定還有很多問題,分析的也很片面,講的也很啰嗦,所以如果本文有各種問題,請各位童鞋不吝指出,謝謝。
后續(xù)還會一直分享自己的設(shè)計心得的,會一直堅持寫下去的。
原型演示地址:http://1q779b.axshare.com
備注:
文章是我的不專業(yè)總結(jié),如有遺漏和疏忽請在評論區(qū)指出;
文章中部分界面截圖內(nèi)容來自網(wǎng)絡,如有侵權(quán),請及時聯(lián)系我進行處理。
作者:Tom王,菜鳥交互設(shè)計師一枚,2年未滿的產(chǎn)品交互設(shè)計經(jīng)驗,2年電商APP運營經(jīng)驗。
本文由 @Tom王 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
源文件可以分分享嗎
哇,對于更菜鳥的我來說真的很棒啦!感謝分享~
贊贊贊
我們是給內(nèi)部人員和合作伙伴使用的內(nèi)部系統(tǒng),所以為了節(jié)約成本,開發(fā)用easyUI,只需要產(chǎn)品畫出草圖即可,對開發(fā)來說最重要的是需求邏輯規(guī)則……
能共享rp文件嗎? ??
總結(jié)的挺到位的,我也交互入行兩年了,收藏學習了,哈哈,正想去魔都發(fā)展
新人~最近正在優(yōu)化后臺,學習了~
建議剛?cè)腴T用Axure,雖然上手比mokplus慢一點點,但是用久了會發(fā)現(xiàn)功能比想象中強大一些~~ 對之后跳各種不同公司也有好處,基本都通用啦?? 當然,做久了以后,選擇自己最順手的即可~
我一直在想哪里有教人做系統(tǒng)界面的教程。剛?cè)胄械男氯?,接到操作系統(tǒng)的任務,有些方~謝謝
http://theventurebank.com/u/136538 人人有大神專門有分享這方面的內(nèi)容,也有個人網(wǎng)站可以下載資料,你可以看一下。這個比我自己分析的要專業(yè)多了。
最近在優(yōu)化后臺,非常感謝這篇文章
還是很淺顯的,能幫助您就好 ??
非常感謝!
能幫到你就很開心,第一次寫,還有不完善的地方, 多多指教。 ??
很詳細 邏輯感也很不錯 感謝分享 期待更多更深入的分享 謝謝
謝謝支持,自己第一次寫,寫的還是很不夠深入,只能給大家做個參考
贊 ??
謝謝支持
是提供原型嘛?
文末加了演示鏈接:http://1q779b.axshare.com,可以先看一下,詳細的還在不斷更新中
可以分享下菜單嗎?
還在整理中,后續(xù)文章會放出原型演示的鏈接的
支持作者
謝謝 ?? 感動
自頂一下 ??