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

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

而改版過(guò)后整體視圖為列表，這樣我們?cè)谌ふ視r(shí)，會(huì)更為關(guān)注它的文字描述。

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

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

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

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

心得總結(jié)

1）在平鋪的視圖當(dāng)中，我們很難對(duì)信息進(jìn)行大量的分類。

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

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

因?yàn)榉诸惖某杀竞艿?，但效果卻很好。

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

比如在 Coding的配置后臺(tái)當(dāng)中，就會(huì)通過(guò)一個(gè)大型列表，快速將其導(dǎo)航展示出來(lái)，并且合理的歸類，使其使用效率異常的高。

3）在識(shí)別效率上，文字肯定會(huì)優(yōu)于圖標(biāo)，因此我們?cè)O(shè)計(jì)時(shí)，也要考慮圖標(biāo)與文字的平衡。提高辨識(shí)度圖標(biāo)當(dāng)中增加文字會(huì)是一個(gè)不錯(cuò)的辦法。

二、視覺(jué)優(yōu)化

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

1. 標(biāo)簽調(diào)整

關(guān)于標(biāo)簽的調(diào)整，它由之前的左右布局的右對(duì)齊變?yōu)楝F(xiàn)在的左右布局的兩端對(duì)齊，兩種對(duì)齊方式它們?cè)谑褂脠?chǎng)景上是有些許不同。

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

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

因此考慮兩端對(duì)齊的方式，盡可能的減少頁(yè)面空間的使用。由于兩端對(duì)齊存在兩個(gè)問(wèn)題：

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

2. 高亮狀態(tài)

在之前的表單當(dāng)中，所有的可以編輯的組件，都會(huì)進(jìn)行高亮顯示。

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

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

3. 心得總結(jié)

1. 對(duì)于表單標(biāo)簽的布局，主要取決于頁(yè)面表單的容器大小，因?yàn)椴煌叽绲淖兓?，?duì)于表單的影響也是非常巨大的。
2. 一個(gè) B 端系統(tǒng)里面，因?yàn)榭臻g不同，可以同時(shí)存在多種布局方式。

三、組件優(yōu)化

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

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

1. 程序塢

在舊版本當(dāng)中，程序塢的邏輯是：先配置大小，然后再去選擇是否要開(kāi)啟放大，開(kāi)啟后才會(huì)進(jìn)行大小上的變化。

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

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

2. 顯示器配置

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

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

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

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

3. 心得

1）對(duì)于組件來(lái)說(shuō)，其實(shí)很多組件并不是一成不變的。

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

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

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