之前我們針對即時設(shè)計做了一些分析和個人的改版，以公開課的形式輸出。這兩天我們完善了下，再以圖文的形式放出，幫助大家更好得理解我們的改版思路。

想看公開課視頻的同學(xué)可以點擊這里：B端交互設(shè)計改版 - 即時設(shè)計交互框架，跳轉(zhuǎn)觀看。視頻+圖文，效果更好～

在前幾篇交互的干貨分享中，我們講過交互包含了 3 個層級，從大到小分別是：框架、流程、組件。

如果要針對一個項目或者頁面做交互的改版和優(yōu)化，就一定要遵循從上級到下級，從宏觀到細節(jié)的設(shè)計流程。所以，框架設(shè)計勢必成為我們設(shè)計的第一個步驟。

而以優(yōu)化為目的的交互設(shè)計，就需要關(guān)注兩個要素，業(yè)務(wù)目標(biāo)和用戶體驗。

業(yè)務(wù)目標(biāo)就是產(chǎn)品要實現(xiàn)什么商業(yè)目的，解決哪些問題，在這個基礎(chǔ)上才會形成后面的產(chǎn)品功能和頁面內(nèi)容。

用戶體驗則是在這個目標(biāo)下被動形成的使用感受，多數(shù)情況下業(yè)務(wù)目標(biāo)是不以用戶想法為轉(zhuǎn)移的，B 端交互設(shè)計就是要在滿足業(yè)務(wù)目標(biāo)的前提下，盡可能降低對用戶體驗的損害。

要輸出一套完整的交互方案，就需要有效的解決問題，這需要我們根據(jù)一個合理的流程來進行輸出，而不是等到需要解釋的時候再看圖說話編一套出來。

業(yè)務(wù)分析要通過自己推導(dǎo)和對功能的逆推而來，繪制業(yè)務(wù)流程圖和交互流程圖是必要的工作。

而在體驗方面，我并不建議一言不合就展開用戶調(diào)研，開始做訪談和問卷，但凡自己能操作得到，就一定要先自己去真實使用，總結(jié)使用的體驗和思路。

這次的優(yōu)化案例 ?“即時設(shè)計客戶端”，我也以自己的視角和使用體驗來進行調(diào)整。畢竟不是大面積的用戶研究分析，所以大家要關(guān)注的是前后改動的原因和推導(dǎo)邏輯。

如果有問題感受和我不同的，可以在下方留言做討論。

我們的改版主要針對產(chǎn)品的框架層，因為不是真實改版，所以我只挑選其中四個頁面作為主要的分析對象，并拆解它們包含的組件內(nèi)容進行分析。

主頁問題：

問題1：導(dǎo)航欄的結(jié)構(gòu)不夠清晰，資源廣場太遠影響操作效率

問題2：標(biāo)簽欄刷新的位置看起來像刷新所有內(nèi)容，右側(cè)的空間比較浪費

問題3：星標(biāo)的位置和默認(rèn)隱藏不方便正常使用

問題4：窗口響應(yīng)過程中的文件卡片自適應(yīng)過程非常不流暢

團隊頁面問題：

問題5：頂部欄和標(biāo)題新建模塊太復(fù)雜，影響操作效率

問題6：新建的按鈕和操作重復(fù)，沒有必要全部露出

設(shè)計頁面問題：

問題7：默認(rèn)文件名位置太難找，不符合常規(guī)使用習(xí)慣

問題8：頁面整體的結(jié)構(gòu)、細節(jié)和起始頁面差距較大，切換過程不舒適

問題9：插件窗口是懸浮狀態(tài)，關(guān)閉后再次打開的過程很繁瑣

預(yù)覽頁面問題：

問題10：打開預(yù)覽后很難找到返回的方式

問題11：頁面樣式和設(shè)計頁面太接近，無法有效區(qū)分

其它問題：

問題12：資源廣場打開后是新建標(biāo)簽，標(biāo)簽類型和其它文件不一致

問題13：從標(biāo)簽返回主頁不記錄剛才打開的位置重新刷新了

問題14：有若干的視覺元素前后不一致，或者類型沒有做區(qū)分

以上是總結(jié)的一些簡單的問題，這些問題大家可以自己去使用和感受一下是否也有相同的困擾。定位出問題，那么下面就要進入我們的改版環(huán)節(jié)了。

篇幅關(guān)系，我就用比較簡單的方法來展示改版后的案例和細節(jié)，大家可以自己進行思考和判斷。

初始頁面調(diào)整：

1.合并我的關(guān)注、最近打開成為我的工作臺?

2.劃分成3個分組的選項，將關(guān)注文件移入導(dǎo)航區(qū)域?

3.資源廣場上移，入口更清晰，打開無需跳轉(zhuǎn)到其它頁面?

4.更改導(dǎo)航類型的圖標(biāo)，優(yōu)化整體的識別性

5.優(yōu)化刷新按鈕，和標(biāo)簽欄合并，明確刷新的對象和作用?

6.搜索、公告、更多操作右移合理利用對應(yīng)空間?

7.主頁標(biāo)簽記錄打開位置，點擊后依舊返回之前位置不刷新回工作臺

團隊頁面調(diào)整：

1.添加文件按鈕右移，不和上方標(biāo)簽的添加“打架”?

2.將原文的更新、下載、通知位置移走，讓頂部更簡潔簡單?

3.將標(biāo)題上移節(jié)省下方的空間，讓頁面更簡潔

4.頁面型跳轉(zhuǎn)放到上方居中切換?

5.篩選類內(nèi)容放到下放以標(biāo)簽形式切換?

6.優(yōu)化文件夾顯示，無論什么狀態(tài)都包含3張圖（包含占位圖）

整體柵格和響應(yīng)優(yōu)化：

1.?柵格的斷點應(yīng)用與花瓣類似（解釋起來比較麻煩）

2.單卡片尺寸不做響應(yīng)適配，保持一致尺寸，或只適配寬度不影響高度

設(shè)計頁面調(diào)整：

1.調(diào)整工具欄默認(rèn)狀態(tài)和分組?

2.優(yōu)化右側(cè)顯示模式和相關(guān)的樣式呈現(xiàn)

3.將一般操作消息置于右上角，可以疊加最多3條記錄?

4.將需要確認(rèn)的通知置于頁面中上部，方便用戶查看操作

插件展示調(diào)整：

1.啟用插件面板則右側(cè)默認(rèn)顯示一個簡化插件列表?

2.點擊插件可以展開詳細面板，需要點擊后才關(guān)閉?

3.可以點擊展開其它插件，插件列表寬隨該插件寬變動

前后頁面統(tǒng)一和區(qū)分：

1.所有頁面標(biāo)簽下的頂部欄統(tǒng)一規(guī)格 ??演示頁面標(biāo)題往中間放

2.主頁和設(shè)計頁面的左側(cè)寬度保持統(tǒng)一

3.演示頁面的左側(cè)欄目懸浮和外部做出區(qū)分

以上就是我針對即時全局框架的改版，因為基于我個人的喜好和認(rèn)知，所以這些改動 ——?都可能是不合理的。

不管我們制定出什么交互的方案，最終還是要受到開發(fā)成本和用戶偏好影響。前者需要在時間、技術(shù)、人力成本制約下做判斷，后者則需要經(jīng)過一定數(shù)量的用戶調(diào)研和反饋才能做最終的選擇。

交互設(shè)計就是一個不斷發(fā)現(xiàn)問題，想辦法解決，再發(fā)現(xiàn)新的問題，再修改原來方案的過程……

希望本次分享對大家有幫助，后面做好的原型內(nèi)容，會在我們的社群中發(fā)布。

本周我們還會有B端公開課在B站開播，鎖定直播間：25601492，我們待會見！