Mac 設置的迭代,讓我學(xué)到了什么

2 評論 3098 瀏覽 11 收藏 12 分鐘

許多用戶(hù)在調整電腦設置時(shí)可能都會(huì )感到“頭疼”,因為有些設置可能隱藏的位置很深,操作上的難,一定程度上調高了用戶(hù)的操作門(mén)檻。而這篇文章里,作者發(fā)現新版本的 macOS Sonoma 的系統設置有了巨大變化,那么這樣的變化背后,有沒(méi)有哪些設計邏輯或思維值得借鑒呢?

想要調整電腦當中的設置,對很多用戶(hù)來(lái)說(shuō)非常頭疼。因為無(wú)論是 Windows 又或者是 macOS ,整體的體驗都不算好。

比如在 Windows 系統當中,我們調整設置,有的需要到屬性里面;有的會(huì )在設置當中;還有的在控制面板藏著(zhù),所以每一次調整都需要打開(kāi)百度,找到對應的教程才行,這樣明顯門(mén)檻太高。

我最近剛好更新了新版本的 macOS Sonoma ,由于我是從 Big Sur 直接更新的,發(fā)現這次系統設置的發(fā)生巨大變化。因此今天就來(lái)聊聊這個(gè)變化背后的原因,并且帶入到 B 端產(chǎn)品里面,講一講如何將蘋(píng)果設計師的思維運用到我們日常的設計當中。

一、合理分類(lèi)

新版本與舊版本最大的區別就是將展示形式由平鋪變?yōu)榱斜?/strong>。在網(wǎng)上很多人在說(shuō)這個(gè)原因背后是延續 iOS 的設計思路,但我會(huì )有些不同的意見(jiàn)。

首先在之前的系統設置當中會(huì )有 28 個(gè)菜單選項(數量很多),同時(shí)布局方式采取直接平鋪,會(huì )在選擇上耗費的時(shí)間更長(cháng)。

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

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

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

而在新版本上,對于設置的架構上,進(jìn)行了大刀闊斧的調整。雖然在數量上同樣保持為 28 個(gè),但是歸類(lèi)上進(jìn)行的重新的調整。

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

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

心得總結

1)在平鋪的視圖當中,我們很難對信息進(jìn)行大量的分類(lèi)。

比如在明道云的應用當中,這類(lèi)視圖想要快速選擇,圖標更為重要,因此明道云的圖標可以提供給用戶(hù)進(jìn)行自定義。

2)對于配置后臺,一定要做好對應的分類(lèi)。

因為分類(lèi)的成本很低,但效果卻很好。

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

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

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

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

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

1. 標簽調整

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

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

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

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

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

2. 高亮狀態(tài)

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

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

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

3. 心得總結

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

三、組件優(yōu)化

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

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

1. 程序塢

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

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

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

2. 顯示器配置

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

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

我猜測設計成這樣的原因有二:

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

3. 心得

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

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

2)多去分析常見(jiàn)的組件變化,這樣能多去理解其設計原理。

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

專(zhuān)欄作家

CE青年,微信公眾號:CE青年,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。專(zhuān)注B端設計領(lǐng)域,一個(gè)2B行業(yè)的2B設計師。

本文原創(chuàng )發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載。

題圖來(lái)自Unsplash,基于CC0協(xié)議。

該文觀(guān)點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。

更多精彩內容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 布局那個(gè),好細節。贊同

    來(lái)自陜西 回復
  2. 站在巨人的肩膀上,你就能走的更遠。非常認同作者的觀(guān)點(diǎn)!

    來(lái)自廣東 回復