上周公開課通過直播分享了一個桌面端軟件交互設(shè)計的過程和思路，目前錄播已經(jīng)上傳，感興趣的同學(xué)可以抓緊時間查看（過陣子會下架）。

但有些細節(jié)內(nèi)容用直播是不好展示的，以及一些細節(jié)沒有做完。

所以今天用圖文的形式，完整整理一篇案例分享出來。

首先介紹這次的案例，是我鍵盤上屏幕的專用控制軟件，用于控制屏幕的啟動、關(guān)閉，以及主題、展示數(shù)據(jù)等等。

軟件本身包含的東西不多，主要3個獨立的窗口組成，如下圖：

再進一步解釋，這個屏幕和展示的內(nèi)容，是用于展示電腦機箱的硬件數(shù)據(jù)，比如CPU的當(dāng)前頻率、顯卡的溫度、內(nèi)存占用率等等。至于具體要展示哪些硬件和數(shù)據(jù)，可以在這個軟件中設(shè)置。

也可以在這個軟件中使用主題編輯器，根據(jù)自己的喜好和創(chuàng)意制作一款全新的主題，包括自定義背景圖，展示數(shù)據(jù)，展示文字信息等。

這些功能其實一點也不復(fù)雜，但是軟件本身的交互卻非常的難用，操作起來非常的痛苦，初次使用很難理解這些操作的邏輯和作用（具體要看錄播里的演示，不然講不完）。

既然要對它進行重構(gòu)，那么重點就不是用專業(yè)的思路來分析現(xiàn)在的交互有什么問題，也不是直接打開設(shè)計軟件畫原型，而是把它當(dāng)一個新的產(chǎn)品來設(shè)計。那么就要根據(jù)一個新產(chǎn)品的交互設(shè)計流程來走。

其中，需求分析是所有交互設(shè)計中最重要的一步，我們要搞清楚產(chǎn)品中包含的具體功能有哪些，以及包含哪些關(guān)鍵的字段數(shù)據(jù)，還要總結(jié)可以收集到的所有產(chǎn)品邏輯出來。

所以第一步，就是整理產(chǎn)品的功能地圖和產(chǎn)品地圖，理解這個產(chǎn)品中主要的功能有哪些，以及目前的信息和結(jié)構(gòu)層級。

在我的課程或建議中，都建議不管產(chǎn)品經(jīng)理自己有沒有畫這些思維導(dǎo)圖，你都得自己重畫一遍。重要的并不是你畫完的結(jié)果，而是畫它的過程，就是加深對產(chǎn)品本身理解的過程，你會發(fā)現(xiàn)很多光靠看別人畫好的思維導(dǎo)圖絕對發(fā)現(xiàn)不了的細節(jié)。

而這個產(chǎn)品中，最重要的信息內(nèi)容就是要展示的數(shù)據(jù)，且這些數(shù)據(jù)內(nèi)容不少。原設(shè)計中在主題編輯器的設(shè)備和子項可以找到這些信息，要先選擇設(shè)備然后再查看對應(yīng)的子項，整理得即不合理又不直觀。

所以為了便于后續(xù)的方案推進，就要重新梳理一遍包含的核心字段內(nèi)容。在原來的劃分中，設(shè)備的條狀圖、弧形圖其實就是統(tǒng)計圖表中的百分比條形圖和環(huán)形圖，對數(shù)據(jù)的展示可以只展示文本，也可以展示圖表格式。所以對字段的格式整理不需要用數(shù)據(jù)庫的格式，而是整理在表現(xiàn)層的格式。

主要包含：百分比值、整數(shù)、小樹、條形圖、環(huán)形圖、時間、文本，七種展示樣式。對應(yīng)的字段和大致規(guī)則如下表格所示。

進一步了解產(chǎn)品的邏輯：

-?每個字端在展示中只能添加一次，但是很多電腦中硬件對象不是唯一的，所以需要指定具體硬件

-?屏幕運行需要推送主題數(shù)據(jù)到硬件，所以運行過程中不能實時更改參數(shù)和關(guān)聯(lián)硬件

-?軟件不能直接生成導(dǎo)出主題文件，所以即使創(chuàng)建新主題也要從老主題中打開后重新編輯

-?……

然后，再做出一定的用戶研究分析。還是那句話，很多前期分析的用戶研究，不一定有條件做大范圍的真實調(diào)研和統(tǒng)計，沒那個時間也沒那個精力。

你必須根據(jù)自己對產(chǎn)品的理解去構(gòu)建用戶的目標(biāo)和使用場景，然后分析用戶的痛點在哪里。還在草案中的產(chǎn)品要靠經(jīng)驗自己腦補，而可以直接用到的產(chǎn)品是最容易的，因為你自己就可以以用戶的身份來帶入到使用場景中。所以我總結(jié)了三種用戶的使用場景和相關(guān)訴求：

再根據(jù)這些場景總結(jié)目前的操作流程：

這些信息的整理分析雖然不是直接上手做交互，但是是后續(xù)輸出交互方案的必要條件，交互要解決的就是怎么把這些信息組織起來并讓用戶有效的操作。

下面，我們就可以進入具體的交互設(shè)計階段了。

制作交互方案時，有個非常重要的標(biāo)準(zhǔn)，就是你能不能脫離原來的界面（不看它），或者不找任何參考可以完成需求中所需的交互。如果做不到，就證明要不然你對需求的分析不夠徹底，不知道自己應(yīng)該做什么，另一方面就在與你的交互基礎(chǔ)過于薄弱，連最基礎(chǔ)的交互方式、組件應(yīng)用都沒辦法應(yīng)用出來。

因為，很多設(shè)計在做交互方案的時候往往一直盯著老版，或者產(chǎn)品經(jīng)理的原型來做，這樣做出來的東西肯定還在原來的框架里打轉(zhuǎn)，導(dǎo)致原來的問題完全沒被解決。要不然就是花大量時間找參考，又找不到一模一樣的，然后陷入死循環(huán)。

所以我對交互設(shè)計技能入門的核心評判標(biāo)準(zhǔn)，就是 ——?根據(jù)需求可以獨立輸出完整可行的交互方案。

下面，就來分享下交互的制作過程，首先是啟動主頁：

我將頁面拆分成左右兩個大的模塊，將原來的設(shè)置窗口合并到左側(cè)區(qū)域，預(yù)設(shè)獨立做到做上交，作為操作中使用最頻繁，且最重要的控件，將亮度調(diào)節(jié)和旋轉(zhuǎn)進行右移，讓屏幕操作本身和預(yù)覽區(qū)域關(guān)聯(lián)更緊密，更符合親密邏輯。

左上角的主題選擇交互做了一定的調(diào)整，就是展開后選擇主題窗口不自動關(guān)閉，需要點擊確認按鈕才能實現(xiàn)主題的切換。原因就是如果為了預(yù)覽主題效果（和切換字體看效果類似），打開下拉菜單選擇后關(guān)閉再打開重復(fù)的操作是非常低效且麻煩的，最好的做法是無縫一個個切換過去，選中自己想要的再關(guān)閉。

第二就是為主題的設(shè)置做分類，分類標(biāo)題可以選擇展開或者收起。因為自定義信息數(shù)量自定義，更多設(shè)置包含的內(nèi)容也不少，所以左側(cè)的空間可以進行上下的滾動。

接著優(yōu)化主題編輯頁面，原設(shè)計中，主題編輯頁默認為空，需要導(dǎo)入主題后才可以進行編輯。

所以首先優(yōu)化流程，點擊必須先選擇要打開的主題文件，然后才能進入編輯模式。同時將編輯頁改成左中右三個模塊。

因為在編輯狀態(tài)中，基本的邏輯就是選中并展示對應(yīng)的字端，然后調(diào)整它在畫布中的位置，修改它的屬性值，這和我們?nèi)粘Ｓ玫脑O(shè)計軟件很接近。

將內(nèi)容進一步完成以后，效果如下。

其中左側(cè)就是要展示的字端列表，將原本折疊且非常不直觀的字端內(nèi)容一次性羅列出來，方便我們挑選要放的數(shù)據(jù)，以及檢查哪些已經(jīng)啟動了。

選中后右側(cè)的屬性設(shè)置會根據(jù)字端的類型做出對應(yīng)的變化。字段的設(shè)置包含文本、條形圖、環(huán)形圖三種類型差異，而原設(shè)計中把所有屬性參數(shù)全部羅列出來，不管當(dāng)前字段包不包含這些設(shè)置。同時，將原本顯示和隱藏的按鈕改成多選框，勾選即顯示，反之隱藏。

在原設(shè)計中，選中左側(cè)的數(shù)據(jù)類型畫布不會有選中的提示，所以這里也要做出調(diào)整，讓選中的數(shù)據(jù)可以在畫布中高亮標(biāo)識出來。

最后就是保存主題的流程，原有設(shè)計中的保存主題需要在表單中填寫主題名，而優(yōu)化中把主題名的輸入放在點擊保存后的彈窗中，通過在彈窗內(nèi)輸入保存完成主題的創(chuàng)建。

這些基本的樣式創(chuàng)建完成后，就要對整體的交互方案進行自查，有沒有操作的漏洞，或者邏輯的錯誤。而最重要的，就是有沒有滿足前面提到的用戶在不同場景中的訴求（痛點）。

檢查完成后，就可以輸出具體的交互說明文檔了。

這種簡單的項目就要用簡單的方式輸出，不需要寫一份很復(fù)雜的文檔出來。尤其是作為設(shè)計師的話，交互方案確認后要立馬展開視覺部分的設(shè)計。

還要額外提一點，就是所有交互方案的最佳展現(xiàn)形式，是要以最終設(shè)計稿為標(biāo)準(zhǔn)的。前期交互方案用原型是為了做的快，輸出起來簡單。但是最終的設(shè)計稿不一定和原型的布局、交互完全一致，在設(shè)計過程中調(diào)整方案是非常普遍的情況，如果最后設(shè)計稿和交互說明不能完全匹配，那么原來的交互文檔就失去閱讀價值。

最后，再看看前后版本的對比。

結(jié)尾

以上就是本次交互輸出過程的對應(yīng)展示，特地挑選一個非典型的案例做講解，就是為了讓大家更好的理解交互方案是怎么從前期分析到完整輸出的。

如果從圖例無法理解原產(chǎn)品交互問題和缺陷的話，建議看一看視頻前期的操作解析。

目前我們在下一期B端課程還會重點優(yōu)化交互部分的課程，進一步強調(diào)如何在B端中完成交互方案的輸出，提高作為B端設(shè)計師的競爭力。

想要變強的同學(xué)可以掃描下方二維碼咨詢課程了。

我們下篇再賤～