首先在之前的系統(tǒng)設(shè)置當中會有 28 個菜單選項（數(shù)量很多），同時布局方式采取直接平鋪，會在選擇上耗費的時間更長。

并且平鋪的方式，用戶需要通過圖標來對內(nèi)容進行辨別，用戶的尋找難度主要取決于你對圖標的熟悉程度。

而改版過后整體視圖為列表，這樣我們在去尋找時，會更為關(guān)注它的文字描述。

同時在頁面的歸類上，舊版本的分類主要按照軟件設(shè)置與硬件設(shè)置，將其歸為兩類。在視覺上通過分割線與背景變化，將其進行劃分。

而在新版本上，對于設(shè)置的架構(gòu)上，進行了大刀闊斧的調(diào)整。雖然在數(shù)量上同樣保持為 28 個，但是歸類上進行的重新的調(diào)整。

比如：Wi-Fi的使用非常頻繁，因此單獨從網(wǎng)絡(luò)處提出；桌面與拓展塢關(guān)聯(lián)，將屏幕保護單獨設(shè)定；節(jié)能移動到電池板塊，用戶可以通過配置電池屬性進行調(diào)整節(jié)能選項… 調(diào)整分享的多。

在分類上，目前的整個設(shè)置分為7個板塊，設(shè)置的關(guān)聯(lián)熟悉較強的模塊可以整合。模塊與模塊之間使用間距進行展現(xiàn)，視覺的辨識度會明顯更高。

心得總結(jié)

1）在平鋪的視圖當中，我們很難對信息進行大量的分類。

比如在明道云的應(yīng)用當中，這類視圖想要快速選擇，圖標更為重要，因此明道云的圖標可以提供給用戶進行自定義。

2）對于配置后臺，一定要做好對應(yīng)的分類。

因為分類的成本很低，但效果卻很好。

通過常見的用研手段了解到用戶的心里預期，這對于后續(xù)的辨別與選擇至關(guān)重要。

比如在 Coding的配置后臺當中，就會通過一個大型列表，快速將其導航展示出來，并且合理的歸類，使其使用效率異常的高。

3）在識別效率上，文字肯定會優(yōu)于圖標，因此我們設(shè)計時，也要考慮圖標與文字的平衡。提高辨識度圖標當中增加文字會是一個不錯的辦法。

二、視覺優(yōu)化

在設(shè)置的視覺上，優(yōu)化了（其實也算不上優(yōu)化）標簽的對齊方式以及層級的展示。

1. 標簽調(diào)整

關(guān)于標簽的調(diào)整，它由之前的左右布局的右對齊變?yōu)楝F(xiàn)在的左右布局的兩端對齊，兩種對齊方式它們在使用場景上是有些許不同。

1. 左右布局右對齊：適用于內(nèi)容較多，文本描述較為復雜的區(qū)域。目前在很多 B 端產(chǎn)品都還是會延續(xù)這種布局方式。同時它也會存在相應(yīng)弊端，空間占比大、標簽閱讀困難、長文本支持困難，這些都會影響它的日常使用。
2. 左右布局兩端對齊：適用于容器較小，同時內(nèi)容組件較為簡單的情況，這種做法在 B 端產(chǎn)品里面使用相對較少。

這次迭代首先是將菜單選項由平鋪變?yōu)榱斜?，在進入到二級配置表單的時候，右側(cè)表單控件明顯減少，因此由于空間的變化，使得這里的表單標簽布局需要進行調(diào)整，否則就會得到以下情況：

因此考慮兩端對齊的方式，盡可能的減少頁面空間的使用。由于兩端對齊存在兩個問題：

1. 表單整體的寬度過大時，會影響用戶的正常使用。因此蘋果設(shè)計師將整體的寬度限制在 715 px，用戶并不能進行寬度上的調(diào)整。
2. 無法承載復雜的表單。因此選擇增加一級層級，將頁面更為干凈整潔的排列。

2. 高亮狀態(tài)

在之前的表單當中，所有的可以編輯的組件，都會進行高亮顯示。

這樣的設(shè)計方式，其實與用戶能夠點擊的組件相關(guān)，比如在下圖當中，用戶在復選框后還能進行點擊操作，針對這種情況時，我們就需要在這里給出高亮來提示用戶。

改版過后，所有的配置操作都會固定在右側(cè)，因此就可以取消下拉選項的高亮，減少對用戶的直接干擾。

3. 心得總結(jié)

1. 對于表單標簽的布局，主要取決于頁面表單的容器大小，因為不同尺寸的變化，對于表單的影響也是非常巨大的。
2. 一個 B 端系統(tǒng)里面，因為空間不同，可以同時存在多種布局方式。

三、組件優(yōu)化

由于整體的布局、表單的樣式都發(fā)生了巨大的變化，所以表單整體的組件也進行了相應(yīng)的優(yōu)化。

首先在組件設(shè)計上，會力求簡單。之前很多配置設(shè)計是為了降低組件的理解成本而設(shè)計，而現(xiàn)在空間整體不夠，因此需要考慮在組件基礎(chǔ)上進行優(yōu)化調(diào)整。我們舉幾個例子：

1. 程序塢

在舊版本當中，程序塢的邏輯是：先配置大小，然后再去選擇是否要開啟放大，開啟后才會進行大小上的變化。

這種配置方式我們更容易理解，但是在組件上的邏輯體現(xiàn)就會比較復雜，并且也不夠統(tǒng)一。

在改版過后，在右側(cè)放大的滑軌上，增加一個關(guān)閉節(jié)點，也就是當用戶不開啟放大，就選擇關(guān)閉即可。

2. 顯示器配置

同樣在顯示器配置上，之前的配置方案是在左右兩側(cè)分別彈出不同的配置窗口，我們可以在不同的窗口進行編輯，每一個窗口呈現(xiàn)的是當前顯示器下的屬性配置屬性。

但由于這次的迭代窗口變小，整體設(shè)計更為簡單。因此在設(shè)計上變?yōu)橥ㄟ^頭來提示，目前所編輯的顯示器。

我猜測設(shè)計成這樣的原因有二：

1. 使用頻率不高。自己用那么久 mac，打開此頁面的次數(shù)也屈指可數(shù)，因此使用頻率不高也就導致可以適當簡化。
2. 符合這次設(shè)計理念。看完整體改版后發(fā)現(xiàn)，這次的迭代就是讓設(shè)計組件的變少，讓整體設(shè)計更收斂。雖然這種設(shè)計方式會增加用戶的理解成本，但在窗口固定的情況下，已經(jīng)是最優(yōu)解。

3. 心得

1）對于組件來說，其實很多組件并不是一成不變的。

我們能夠通過組件的具體語意，進行組件層面的隨意變化，這樣就能夠保證你的設(shè)計組件滿足不同場景的實際需求。

2）多去分析常見的組件變化，這樣能多去理解其設(shè)計原理。

對于蘋果的設(shè)計師來說，我相信這種變化一定是經(jīng)歷過很多次方案的推演的，而這一次設(shè)置的改變，其實作為我們 B 端產(chǎn)品的配置頁面，里面的很多設(shè)計邏輯我們是可以進行借鑒的，站在巨人的肩膀上，你就能走的更遠。