首先我們要先理解一個(gè)概念： 什么是交互框架？ （主要是指互聯(lián)網(wǎng)產(chǎn)品）
框架是整個(gè)或部分系統(tǒng)的可重用設(shè)計(jì)，表現(xiàn)為一組抽象構(gòu)件及構(gòu)件實(shí)例間交互的方法。
這是官方的定義，翻譯成人話就是搭建一個(gè)產(chǎn)品能夠使其可拓展，規(guī)范化，有條理，可快速迭代優(yōu)化的方法。好像還是不好理解，讓我們舉一個(gè)通俗易懂的例子：假如我現(xiàn)在有個(gè)空房子，我要重新改造它，那么我首先要考慮的就是其房間結(jié)構(gòu)（ 也就是框架 ），比如我要設(shè)計(jì)幾個(gè)臥室，幾個(gè)客廳，分別占多大面積，在什么位置等等（ 信息架構(gòu) ）；然后還要考慮如何設(shè)計(jì)門和窗戶，怎么能夠在不同房間互通（ 導(dǎo)航方式 ）；接著再思考每個(gè)房間里面分別需要怎么布局，分別需要哪些家居和電器，具體在什么位置（ 頁面結(jié)構(gòu) ）；然后再不停的細(xì)分下去，直到考慮全每個(gè)細(xì)節(jié)，那么一個(gè)產(chǎn)品完整的框架就基本上搭建出來了~
理解了框架的概念后，可能我們還是會(huì)有疑問： 為什么要做框架設(shè)計(jì)？
還是上面房子的例子，假如我不考慮房間布局，隨心所欲地將我的家具和電器到處擺放，我將臥室放在房子的最里面， 我需要依次穿過客廳、廚房、洗手間才能到到達(dá)；我將馬桶放在臥室，把床放在客廳，把廚具放在洗手間，把衣柜放在陽臺(tái)，把洗衣機(jī)放在廚房……各位可以想象一下你的房子要是要被設(shè)計(jì)成這樣你還想住嗎？同理，一個(gè)框架結(jié)構(gòu)混亂的產(chǎn)品你的用戶也是不會(huì)用的。但凡在行業(yè)里有些影響力的互聯(lián)網(wǎng)產(chǎn)品，其產(chǎn)品的框架和結(jié)構(gòu)必定是由產(chǎn)品和設(shè)計(jì)人員精心思考并設(shè)計(jì)過的。框架是一個(gè)產(chǎn)品的骨骼和經(jīng)脈，它是一個(gè)產(chǎn)品能用與否的基礎(chǔ)所在，所以在開始產(chǎn)品設(shè)計(jì)之前先進(jìn)行框架結(jié)構(gòu)的梳理是非常非常重要的!
那么對(duì)于交互框架： 我們又該如何去思考和設(shè)計(jì)呢？
我將其總結(jié)為3個(gè)步驟：
步驟1：信息架構(gòu)
對(duì)于產(chǎn)品和設(shè)計(jì)來說，這個(gè)詞肯定是不陌生的，那么信息架構(gòu)是個(gè)什么東西呢？
這就是某app產(chǎn)品的信息架構(gòu)圖，通過不同級(jí)別的分類，將其所有的功能點(diǎn)展示出來的一個(gè)功能信息框架圖。一般來說這種架構(gòu)圖主要是由產(chǎn)品產(chǎn)出，而有些比較專業(yè)的交互前期也會(huì)參與其中，下面還是以設(shè)計(jì)房子為案例來探究一下信息架構(gòu)到底該怎么做。
首先我們要想清楚房子有幾個(gè)房間，分別需要哪些家居和設(shè)備（收集需求）
收集完需求后，我們需要開始對(duì)需求進(jìn)行整理和分類，這里整理的規(guī)則可以參考卡片分類法和卡諾模型：
整理完成后最后產(chǎn)出信息架構(gòu)圖：
信息架構(gòu)完成后并沒有結(jié)束，你還需進(jìn)一步思考： 還有沒有其他問題呢？有沒有漏掉的功能？功能分類有沒有問題？這個(gè)框架拓展性如何？結(jié)構(gòu)是否足夠扁平？ 等等……如果不考慮清楚那么就很有可能會(huì)出現(xiàn)馬桶被擺放在臥室這種情況了。
當(dāng)信息架構(gòu)確定好了之后開始思考第二步：
步驟2：導(dǎo)航
導(dǎo)航就像是房子里面的門，是貫穿整個(gè)產(chǎn)品的入口，導(dǎo)航做的好的能讓用戶快速達(dá)到目標(biāo)，導(dǎo)航做的不好會(huì)讓用戶迷失在茫茫的信息海洋中不知所措，目前在app業(yè)內(nèi)主要的導(dǎo)航模式有3種： 選項(xiàng)卡式導(dǎo)航、抽屜式導(dǎo)航和跳板式導(dǎo)航。
選項(xiàng)卡導(dǎo)航： iOS上又叫Tab bar，典型代表像淘寶、微信，這類產(chǎn)品相對(duì)體量較大，產(chǎn)品結(jié)構(gòu)和流程邏輯也都較為復(fù)雜多變；
抽屜式導(dǎo)航： 代表如滴滴、摩拜等，這類產(chǎn)品都有一個(gè)很共性的特點(diǎn)就是“單線程”，即用戶目標(biāo)明確，操作流程單一，屬于“強(qiáng)流程，弱框架”的類型；
跳板式導(dǎo)航： 也叫9宮格式導(dǎo)航，典型代表如美圖，這類產(chǎn)品也有著比較鮮明的特點(diǎn)“多線程單流程”，即功能入口較多（一般5個(gè)以上），操作流程單一，常用于美圖類產(chǎn)品和一些B端類產(chǎn)品。
雖說不同的產(chǎn)品形態(tài)決定了其不同的導(dǎo)航模式，然而業(yè)內(nèi)幾乎90%的app都是采用選項(xiàng)卡導(dǎo)航，選項(xiàng)卡式導(dǎo)航的確擁有非常顯著的優(yōu)勢：結(jié)構(gòu)簡潔清晰，操作便捷，拓展性強(qiáng)，穩(wěn)定性好，確實(shí)是很多app首選的導(dǎo)航模式，然而并非一概而論，你所選擇的導(dǎo)航一定是跟你的產(chǎn)品類型和框架結(jié)構(gòu)相互關(guān)聯(lián)的，滴滴采用抽屜式導(dǎo)航而非選項(xiàng)卡導(dǎo)航是由其產(chǎn)品本身屬性所決定，豆瓣一刻的導(dǎo)航采用抽屜式是因?yàn)楸旧懋a(chǎn)品框架結(jié)構(gòu)較為簡單的原因。所以采用什么導(dǎo)航方式要靈活變通，沒有最好的只有最適合的，比如下面3個(gè)例子：
片刻 使用的是駝式導(dǎo)航，是選項(xiàng)卡導(dǎo)航的一種變形，強(qiáng)化了某一個(gè)重要或高頻繁操作的功能，多用于博客類，直播類app中；
好奇心日?qǐng)?bào) 用了一種很罕見的懸浮導(dǎo)航，至于為什么會(huì)這么做，各位可以自己去思考；
Hyperlapse 更是大膽，它根本就沒有導(dǎo)航，這個(gè)產(chǎn)品全身上下就只有一個(gè)功能。
結(jié)合自己產(chǎn)品類型和框架結(jié)構(gòu)，靈活選擇導(dǎo)航，不要拘泥于形式，多嘗試多思考，總會(huì)發(fā)現(xiàn)最合適的那個(gè)。
完成導(dǎo)航設(shè)計(jì)后，來到最后一個(gè)步驟：
步驟3：頁面結(jié)構(gòu)
頁面結(jié)構(gòu)即頁面布局，是針對(duì)單個(gè)頁面不同控件和元素的布局展示關(guān)系，就像房子的房間大小位置都設(shè)計(jì)好了，那么接下來就考慮每個(gè)房間里面該怎么添置家居了，比如臥室里面的床，衣柜，臺(tái)燈，空調(diào)等等這些東西該怎么布置，分別放在什么方位，具體占多大位置，這樣擺有什么影響等等，房間里面布局的好壞影響空間的運(yùn)用，也影響了房間的美觀整潔和整個(gè)房子的格局風(fēng)格， 同理，頁面的布局好壞就決定了用戶的使用和閱讀體驗(yàn)，決定了整個(gè)產(chǎn)品的調(diào)性和品位，最終影響了產(chǎn)品的轉(zhuǎn)化。
那么一個(gè)優(yōu)秀的頁面布局具備哪些特點(diǎn)呢？
1、主次分明，結(jié)構(gòu)清晰
結(jié)構(gòu)清晰的頁面各個(gè)元素和控件處理的非常得當(dāng)，相反結(jié)構(gòu)混亂的用戶的關(guān)注沒有焦點(diǎn)，看了很長時(shí)間都不知道你的頁面想表達(dá)什么，也不知道該如何操作，下面看兩個(gè)例子：
12306的首頁結(jié)構(gòu)看起來似乎毫無層次感，頁面結(jié)構(gòu)就像是隨意的信息排列，再看看智行的首頁，卡片式結(jié)構(gòu)視覺焦點(diǎn)更清晰，信息的排版和布局也更有層次感。
2、化繁為簡，引導(dǎo)清晰
特別是移動(dòng)端產(chǎn)品，手機(jī)屏幕尺寸有限，如何在最短的時(shí)間里吸引用戶的眼球， 設(shè)計(jì)師需要做的是做減法，刪除干擾用戶的不必要的內(nèi)容，強(qiáng)化核心的操作流程，快速引導(dǎo)用戶達(dá)成目標(biāo)。
讓我們?cè)倏匆幌律厦?2306的首頁，可以發(fā)現(xiàn)它的查詢頁面包含了出發(fā)點(diǎn)、目的地、出發(fā)日期、出發(fā)時(shí)間、席位、車次篩選和添加乘客。也就是說，用戶需要瀏覽這些信息后然后再進(jìn)行一步步的操作選擇，等這些全部設(shè)置好了之后估計(jì)票早都搶完了，而智行就機(jī)智了很多，它將出發(fā)時(shí)間，席位，添加乘客等非重要信息進(jìn)行了刪減，就連車次篩選也只是用了開關(guān)設(shè)置，所以大大提升了用戶的查詢效率。操作指引方面，出發(fā)時(shí)間是一個(gè)非常重要的必填操作，智行對(duì)于時(shí)間選擇有比較強(qiáng)的引導(dǎo)，而12306的出發(fā)時(shí)間根本看不出來是可以點(diǎn)擊操作的。
3、操作方便
這里操作方便更多適用于移動(dòng)端，特別是現(xiàn)在手機(jī)尺寸普遍越來越大，用戶單手操作越來越困難，所以我們?cè)谠O(shè)計(jì)頁面結(jié)構(gòu)布局的時(shí)候也是要考慮到人體工程學(xué)的，特別是某些特殊場景使用的app，比如地圖類應(yīng)用，用戶使用場景多在戶外（步行、騎行、公交車），用戶單手操作的場景非常之多，如下圖所示：
左圖是用戶單手操作的觸摸區(qū)域圖，從圖中可以看出界面的左上區(qū)域?qū)儆谟|摸困難區(qū)，下方是舒適觸摸區(qū)， 所以在處理頁面信息布局的時(shí)候就可以考慮將重要展示類信息放在頁面的頭部和中部，而需要操作類的控件和按鈕可以考慮放在下方用戶容易操作到的區(qū)域。
我們?cè)倏从覉D，是高德的首頁，我們可以看到高德的頭部有個(gè)搜索框，是屬于重要按鈕控件，然而卻放在了頭部用戶難操作的區(qū)域，那么高德當(dāng)然也意識(shí)到了這個(gè)問題，于是乎他們?cè)陧撁娴牡撞糠帕艘粋€(gè)“路線”入口，能夠讓用戶在單手操作的情況下同樣也能快速完成路線查詢。
其實(shí)關(guān)于頁面結(jié)構(gòu)，設(shè)計(jì)師們要考慮的點(diǎn)很多，也不僅僅單純地用幾個(gè)點(diǎn)就能完全涵蓋進(jìn)去的，不同的產(chǎn)品屬性會(huì)決定其框架和導(dǎo)航，也決定了其頁面的展示布局，比如網(wǎng)易新聞和淘寶的信息展示方式就完全不同，一個(gè)是瀏覽，一個(gè)是逛，兩者間的使用場景和用戶心理是完全不一樣的。即使是同一屬性的產(chǎn)品其頁面結(jié)構(gòu)和布局也是千差萬別的，比如下面4個(gè)例子：
雖然都是互聯(lián)網(wǎng)金融產(chǎn)品，也都是展示首頁，然而可以看到每個(gè)產(chǎn)品的首頁展示形態(tài)完全不同，有的主推產(chǎn)品和收益，有的引導(dǎo)登錄購買，有的主推運(yùn)營活動(dòng)，有的主打社區(qū)互動(dòng)， 究其背后形態(tài)各異的原因跟其產(chǎn)品定位與運(yùn)營策略有重要的關(guān)聯(lián)，設(shè)計(jì)師們分析產(chǎn)品的時(shí)候不僅僅需要從設(shè)計(jì)本身出發(fā)，還要思考更多背后潛在的原因，從而達(dá)到真正意義上的“閉環(huán)”。
好了說了這么多，最后總結(jié)一下，產(chǎn)品交互框架設(shè)計(jì)需要經(jīng)歷的3個(gè)步驟：
信息架構(gòu)： 功能需求的篩選與分類，根據(jù)不同權(quán)重和屬性進(jìn)行級(jí)別的劃分；
導(dǎo)航模式： 根據(jù)產(chǎn)品屬性和產(chǎn)品架構(gòu)來選擇最為合適的導(dǎo)航方式；
頁面結(jié)構(gòu)： 結(jié)構(gòu)主次分明、結(jié)構(gòu)清晰、引導(dǎo)明確以及操作方便是一個(gè)優(yōu)秀的頁面結(jié)構(gòu)的必要條件。
框架是死的，人是活的，設(shè)計(jì)的思維大多都是發(fā)散的，合適的方法論確實(shí)能夠在關(guān)鍵的時(shí)候提供思考的方向，但不可固步自封，設(shè)計(jì)師需要不停地學(xué)習(xí)、思考、交流、總結(jié)、創(chuàng)新，因?yàn)檫@才是設(shè)計(jì)本身最重要的意義~
本文轉(zhuǎn)載自網(wǎng)絡(luò)，版權(quán)歸原作者所有！
文章轉(zhuǎn)載請(qǐng)保留網(wǎng)址：http://cctvsc.cn/news/industry/1837.html
