如何評價微軟的 UI 設計?

很多人喜歡蘋果的 UI 設計風格,認為 iOS 和 macOS 的界面簡潔漂亮。但題主在看到了Windows 10, Outlook, Office, Xbox 的界面後認為微軟的界面設計有過之無不及 。

請問微軟的設計特點是什麼?


系統方面大家說的比較多, 就先不說了, 其實微軟一直有些 "非主流" 項目也挺有趣的.

MSN Explorer, 伴隨著 Windows XP 測試版出現, 是一款沉浸式瀏覽器, 比國內公司搶瀏覽器入口不知道早到哪裡去了, 集成了 MSN 全家桶業務, 甚至還有一些... 比如左下角的 mini 播放器.

該軟體充滿了各種那個年代的小細節, 比如安裝進度條上方揮動翅膀的 MSN 蝴蝶, 登錄時的音效... 這貨現在似乎已經無法登陸了, 不過從下圖這一個我剛截的對話框就能看出其 UI 的精美程度 (以及某些在 XP 上沒能實現的執念).

Microsoft Max, 伴隨著 Windows Vista 測試版出現, 是一款類 Picasa 的技術預覽軟體. 雖然功能很簡陋, 不過這 UI 我能舔 10 年. (該項目於 06 年被砍掉, 距今剛好 10 年).

(然後我們又能看到某些在 Vista 上沒能實現的執念...).

Zune Software, 配合 Zune 設備 (後來也曾被用於 WP 設備) 的類 iTunes 軟體. 該軟體的第 1 版只是個十分擬物化的換皮 WMP, 誰知 07 年發布的第 2 版自此驚艷了世人, 也為微軟及整個世界打下了扁平化的雞血.

(可自行對比同年的 iTunes 長什麼樣).

底紋多款可換 (知道 Office 2013 的破底紋是打哪學來的了吧...). 播放音樂時會出現下方的光, 隨節奏晃動.

該軟體現已壽終正寢, 最後版本是 4, 其 UI 已經相當成熟, 並且很可能是微軟迄今為止扁平化最成熟的軟體之一. (什麼 UWP 簡直是個笑話好嗎).

說到了 Zune Software 就不能不提 Zune HD, 這是一款介於 iPod nano / iPod touch 之間的設備. 很多人以為微軟抽 Metro UI 瘋是從 WP 7 開始, 其實正是 Zune HD 在 UI 設計上展現出的驚人可能性讓微軟產生了某些錯覺 - 他們低估了單純一個播放設備與一個智能設備之間複雜程度的差異 - 這是 WP / Windows 8 + 上各種找不著北的設計的根源.

(Windows 的 "磁貼" 為何總是那麼丑? 因為 Zune 中原始設計的 "磁貼" 主要是為圖片服務的, 而 Windows 將它改造成了為圖標服務... 其實通過上面三張圖就能看出, Zune 的全套設計都是娛樂化的, 強行商務化的過程可謂充滿曲折).Microsoft Max 與 Zune 的 UI 代表了當時微軟的兩種設計方向, 我認為並沒有孰優孰劣之分, 但如果微軟當時腳一抖選擇了另一條路, 今天的世界可能會截然不同...


領先一步的是先驅
領先兩步的很可能是先烈


個人認為微軟的三大里程碑系統WindowsXP和WindowsVista以及Windows8標誌了微軟在過去的UI設計中的幾次革新突破。
——————————————————
Win2K及之前的系統由於當時設備顯示色彩位數限制,UI設計又要做到直觀,結果就是大量灰階和藍色、各種上世紀擬物風格給人一種很經典的樣子,但「經典」的這個評價相信只是現在的人們剛剛給出的,在系統當時剛剛發布時,這些UI給人的感覺絕對是相當驚艷的。

(圖侵刪)
2001年末開始,XP時代微軟圖標設計更加美觀友好、易懂,加以精美的窗口、按鈕設計和多功能的開始菜單,和藍天白云為主題的設計風格,這讓XP更被大眾所接受。XP經歷了個人電腦的普及、多媒體的普及,它的UI設計無疑起了至關重要的推進作用。XP在剛剛發布時,嶄新的用戶界面絕對會讓當時的用戶痴迷。

之後就是2006年的Vista,從Vista開始微軟開始大筆打磨UI使其更精美並跟得上時代步伐。Aero半透明毛玻璃效果和圖標中的半透明藍綠色文件夾、藍綠色打光影的工具欄、精美的擬物大圖標等等設計使微軟的UI設計走向擬物化的最高峰。微軟在這一系統上更改了默認字體,中文開始使用微軟雅黑,配合ClearType渲染引擎,開始大幅度改善在LCD屏幕上的文字閱讀體驗,同時也解決了過去中文斜體在LCD上支離破碎的弊病。

但是在Vista出現的2006-2007年,個人電腦和各種多媒體設備硬體水平還停留在XP階段,沒有多少設備能撐得起Vista高精美界面對硬體資源的消耗,以及在XP時代大幅擴增用戶數後,微軟並沒有很好地調教Vista新NT內核對舊設備、舊軟體的兼容,因此Vista並沒有流行起來,也因「兼容差、系統卡」等當時的缺點而被詬病至今。但不得不承認,Vista的UI設計邁向了微軟擬物設計的最高點,同時Vista促進了平均硬體水平的提高。
後來,微軟給了大眾兩年緩和的時間,同時也在努力優化系統內核,精心打磨過的Windows7上市了,UI設計比起Vista由藍綠色主題變為藍色主題,任務欄更加簡潔大方,同時傳承了Vista的窗口設計和開始菜單設計。營銷戰略和Vista未變,可以看出Win7是微軟的一根救命稻草。

以上是對微軟過去的擬物化UI設計的評價,就當作是個補充。

——————————————————
2011-2012年,微軟推出Windows8,從DP(Developer Preview)到CP(Consumer Preview),再到RP(Release Preview)。相信和我一樣,當時在追版本更新時的人們都清晰地看到了微軟在UI設計上的大膽和掙扎。MetroUI在Win8 DP就已經有了雛形,儘管當時那個界面滿是BUG,各種「未完成」的感覺,但不得不承認,當時那個新穎有趣的界面很誘惑人。
印象中在Windows8 RP中窗口還有Aero半透明毛玻璃效果,但在RTM中微軟就已經放棄了。

開始菜單在Windows8前幾個預覽版中掙扎出了各種樣式,後來微軟乾脆在RTM版中刪掉了開始菜單圖標,引起升級用戶的一臉懵逼和滿腹怨氣,所以那個圖標在8.1上又回來了。不過,回來的只是那個圖標而已。
或許是微軟意識到在一個信息越來越冗雜的時代,擬物化不再適合向人們快速提供信息,又或許只是人們審美疲勞需要換個新風格,MetroUI簡潔大方的設計被許多人追捧。但微軟的步幅確實邁大了,這種未經深思熟慮的界面還需要更多的改善來提升桌面用戶的體驗,而並非就這樣擺個平板界面讓滑鼠用戶去自己戳。
不過從Windows8開始,很多軟體開始學習這種風格,很多軟體的UI設計甚至要比Win8要漂亮很多,有過之而無不及。
後來在2013年,Windows8.1推出,ModernUI界面功能更加豐富,Charm邊欄菜單也更加易用,但還是遭到大量用戶的唾棄。
為何?Windows8走得太急了,ModernUI就像是另一個生硬的系統,而微軟就是把之前的Win7拍扁了加幾處直角然後硬生生地把ModernUI粘了上去,甚至控制面板和ModernUI中的設置界面內容基本相同,系統很多常用功能也東躲西藏,沒人喜歡這種割裂的體驗。
但在當時,Surface系列平板電腦和搭載WindowsPhone88.1的Lumia系列手機給人帶來了比較理想的體驗(我是說系統操作上的體驗,不包括軟體生態),想想看,Win8更像是現在Win10中的「平板模式」
所以說,Win8時期,微軟的初期扁平化設計可以用兩個詞語概括,「簡陋生硬」。

以上是對微軟初期扁平化設計的評價。
——————————————————
Win8的扁平化設計為微軟指導了方向,甚至是給全世界計算機用戶的審美指引了方向。
如果要求一堆圖標被更多人看懂,它需要的是擬物化;而在這堆圖標讓人都已經看得懂,但如果要更快地讓人獲取到信息,即更直白、能提高整體效率,並且不把整個界面搞亂的話,它就需要扁平化(抽象)。
於是在2014年末,Windows10的雛形即預覽版出現了。從初期預覽版到RTM,再到周年更新,每一次更新,它的UI設計變化都是十分巨大的。
我個人對Windows10的評價還是很高的,Windows10更好地兼顧了桌面用戶。開始菜單的回歸,比Siri功能更強大、比Spotlight更易用的Cortana,圖標設計風格的統一,桌面端、平板端、移動端的UI設計、交互邏輯的統一甚至是UWP通用應用的出現,都讓Windows10這個系統給人提供了更多的方便。多平台的無縫銜接體驗是Win10的核心,扁平化設計也達到了微軟前所未有的成熟。
半透明效果在Win10桌面端算是回來了一半,開始菜單和通知中心的半透明效果還不錯。

以上是對Windows10的UI設計的評價。
——————————————————
所以由此看來,微軟的設計從來都是走自己的路線,雖然很任性,但總歸是把用戶體驗放在一個比較首要的位置。微軟的設計里充滿了他一步步大膽的嘗試,充滿了一處處掙扎和妥協,經過幾代系統,最終積累下的那些東西確實都是能提高工作效率的東西,UI設計也好,小功能也好,某個交互細節也好,Win10有積累,有取捨,這點已經超越macOS了。
比如macOS的Launchpad不如Windows10的開始菜單;macOS的窗口不如Windows10更友好;macOS上同一個程序比如Finder的窗口開多了,切換起來沒有Windows10方便;macOS上沒有窗口的左右停靠功能;macOS的通知中心形同虛設……小細節加起來一比,那就是天生的硬傷
我其實曾經是一個重度的macOS使用者。但自從Win10出現之後,很容易就能發現macOS正在被微軟大步超越著。即使兩年前最易用的系統是OS X,但現在,最易用的系統是Windows10。Windows10和macOS比起來,都很簡潔,但Windows10簡潔而不簡陋。在我眼裡,UI設計既簡潔又精緻,而且又能因此提高我工作效率的系統,目前看來只有Windows10。
——————————————————
總結,縱觀微軟系統史,我相信每個系統在發布當時都會給人非常驚艷的感覺,這一點毫無疑問說明微軟的外觀設計一直在跟隨時代步伐做著改變和創新。
過去擬物化時期,微軟追求的是「精美易用」。
現在扁平化時期,微軟追求的是「簡潔實用」。


個人總結微軟設計特點有:

1,對於「數字化」有執著追求;
2,非常注重對比度,像素對齊;
3,經常會嘗試新的想法,交互上比較多大變動,代與代之間的設計斷層嚴重。
4,基於「應用」層面的設計,應用和應用之間交互邏輯常常不一樣,缺乏內在聯繫或者說統一的世界觀。
5,細節粗糙,對齊,錯位,閃爍這一類問題非常不上心。

############ 講解 ################

1,對於「數字化」有執著追求;
也許正如其名字一樣,微軟是做「軟體」起家的,它從誕生起就是依附於數字化的世界,即使到今天,微軟的最重要產品依然是 Office,而 Office 的夢想就是實現「無紙化」的辦公,微軟和蘋果最大的不同,就是蘋果一直在嘗試把真實世界的經驗帶到數字世界裡面,而微軟則偏向於為數字的世界構建產品,為屏幕而設計,很多時候產品的評判標準都是以屏幕表現為基準的。

典型的表現就是爭了很多年的字體渲染問題,為了在屏幕上有最「清晰」的表現,微軟甚至覺得扭曲了字體的字形也毫無所謂。比如讓人又愛又恨的點陣宋體,到了今天,我們在windows10上依然能看到,甚至成為了適配高分屏的絆腳石

從 Windows 95 開始的這套經典主題,即使借用了現實世界的一些高光暗部等原理營造了3D的質感,屬於擬物的設計,但是實際上這些方方正正的按鈕在現實世界是不可能看到的,是一種抽象化的擬物,當然這可能是一種向硬體性能妥協的務實做法,但是這種「抽象化的擬物」,基本是 windows UI 一直以來的特點

硬體性能已經很強的 XP 時代,界面依然不會刻意去模仿現實的世界,而是創造了一種「數字化」的Style

反觀同期的 OSX,大量的水晶質感,還有塑料紋理,很深投影,液晶顯示屏等這些元素,都在喪心病狂的模仿現實世界。包括icon的設計,也在儘力的往「真實」靠攏

到了 windows 8,「數字化」達到了巔峰,可惜的是微軟在 ModernUI 完全沒有成熟的情況下就匆匆的把它推向了市場而且強制性的推廣,引發了用戶的強烈不滿。

如果說蘋果的設計是大量的借用物理世界的元素拼湊湊界面,微軟的設計就是喜歡利用現實世界的隱喻創造出各種數字化的元素,再組成界面

2,非常注重對比度,像素對齊
有了「數字化」,這個前提,對齊像素格這個行為就不難理解了,其實就和使用像素字體的出發點是一樣的,最大限度地額提高屏幕顯示的對比度。
比如你留意看,win10的系統托盤區的icon,除了整數倍的縮放,都是會對應到相應的描邊寬度的,(也就是描邊要麼是1px,要麼2px,不存在1.5px導致的虛邊的情況)

微軟甚至在UWP的設計思想里把這個列為規範,叫 「Step Scaling」

類似的例子非常多,例如win7的 Aero UI 每個窗口邊框,按鈕上很喜歡搞個1px的黑邊+1px的白邊,目的都是為了提供「直插雙眼」的超高對比度

3,經常會會嘗試新的想法,交互上比較多大變動,每一代設計之間的斷層非常嚴重。
具體表現:
比如資源管理器,95~XP時,菜單+工具欄+內容+狀態欄;到 Vista 後突然隱藏掉了標題欄,統一成了全局導航+全局搜索(改得最贊的一代),內容區配合誕生了動態命令欄;win8 後突然間又變成了 Ribbon UI,到了 win10,Ribbon 本來居中的標題欄又突然變回了左對齊……

還有各種大家詬病的「某個特性某個細節非常優秀」,然後改掉交互之後,這些細節也莫名其妙的丟失了……


4,基於「應用」層面的設計,應用和應用之間交互邏輯常常不一樣,缺乏內在聯繫或者說統一的世界觀。
這個可以理解為微軟的「開放性」,所有的界面層次的東西都應該認為應用自己來實現的,操作系統不管,沒有規範,也沒有任何審核機制,全靠開發者自覺。

實際上,沒有規則的開放最後的結果總會是災難,加上微軟一直以來喜歡「兼容」。發展到了今天,這種野蠻生長的「開放」成了 windows 發展的絆腳石了,被最多人詬病的地方,一個系統能夠看到十幾種UI。外觀不一樣,快捷鍵不一樣,交互邏輯也不一樣,一個軟體一個樣……

傳統win32,UWP,Metro…… 4個應用,能夠有4種不同的滾動條,快捷鍵的邏輯也是完全的不一樣(ribbon還算統一,都是alt激活,Metro 在win8還是有快捷鍵可以訪問基本所有功能的,到win10徹底沒轍了,UWP更加噁心,直接沒有統一的快捷鍵支持了,有沒有快捷鍵看作者心情,還好意思說什麼「統一桌面+平板+手機」),看著也是醉……

世界觀的問題在 windows 10 上倒退得非常嚴重,基本上所有的動畫設計都是「為了動而動」,動畫之間毫無邏輯可言,最小化窗口時窗口莫名奇妙的隨便往下一縮(以前都是會縮到具體的任務按鈕的),任務欄固定在右方的話通知中心會莫名其妙的從任務欄上面跨過,進入平板模式後任務視圖莫名其妙的只有一個漸隱動畫,所有的觸控手勢操作比起win8也不怎麼「跟手」,觸摸板手勢,3個手指向上是任務視圖,左右又變成了切換任務,4個手指才是切換桌面……

5,細節粗糙,詭異的對齊,錯位,閃爍這一類問題非常不上心。
比如很多不透明的邊框或者分隔線,界面換個顏色就會突然變得很突兀,滾動條也是是不透明的(8的設計規範滾動條是很漂亮的透明疊加),在深色界面上變得非常突兀,界面之間經常出現1~2像素錯位,還有元素之間經常會出現各種詭異的對齊,字體頂到元素邊緣這種現象也是隨處可見,登錄,啟動之類的界面「閃一下」的界面更加是都看習慣了。

############ 總結 ################################

單獨的去看,微軟的東西在產品級別的設計上的水平是很高的,每一代的 Office 在界面上都是很驚艷,Xbox的UI,MicrosoftBand 的界面總能讓人耳目一新,在平衡「懶惰的用戶」和「引入新功能」這件事情上,一直都做得很好。

但到了 windows 的這種平台級別設計上突然又變得莫名的短視和不作為,填了舊坑造了新坑,然後又突然又不玩了,直接「兼容一下」,繼續挖新坑。
也許是一開始就把開發者慣壞了,現在在要做標準,做規範了的時候,就變得寸步難行了吧。

也許也和微軟的工程師文化有關,整個微軟在設計上沒能產生一個靈魂級的領導人物
想到了一個詞,叫「群龍無首」

############ 原答案 ################################

微軟在設計上就是一個不拘小節花花公子吧
在界面上有很多大膽的想法,但是總感覺是玩一下,膩了,拜拜,下一個……

新想法上位 &> 原來的東西全部不要,造一個新的輪子,兼容舊輪子 &> 用戶不習慣新輪子,罵 &> 修正 A &> 用戶還罵 &> 修正 B &> 用戶習慣了 &> 新想法上位,推倒舊輪子,造新輪子 &> ……(一直輪迴)

由於新舊設計之間一般只有「兼容」的關係,每一次設計之間沒啥繼承關係,什麼統一,細節之類,基本就是0……

##################################################
先佔坑,慢慢補


6500 字長文多圖分析 Windows 10 的 UI 混亂。


前幾天剛好發布了一篇有關 Windows 10 UI 的博文,於是修改一下搬運到知乎上來:


從 2014 年 9 月 30 日微軟首次公布 Windows 10,到 2015 年 7 月 29 日微軟正式向全球發布 Windows 10 正式版,再到微軟在 2016 年 8 月 2 日開始向全球用戶推送 Windows 10 Anniversary Update,Windows 10 已經是一款有著近兩年歷史的操作系統。微軟於官網、推廣郵件和新聞稿中無不在不斷重複著 Windows 10 是「Best Windows Ever」。然而,即便 Windows 10 擁有前所未有的免費升級政策之利,至今也僅取得略超過百分之二十的全球市場佔有率。至於微軟鼓吹的「一次編譯,多處運行」的 UWP 通用應用大業,從目前 Windows 應用商店中 UWP 應用的數量看來,距離取代傳統 Windows 桌面軟體還有很長的路要走。

從各個方面看來,Windows 10 都難稱達到微軟的預期般的成功。這其中的原因無疑有用戶於舊版本系統的慣性,但也存在著微軟自身的主觀原因。


我作為一個「軟粉」,從 2014 年 10 月 1 日微軟發布 Windows 10 第一個 Technical Preview (Build 9841)開始便使用 Windows 10,熱愛 Modern UI 設計和 Universal App 理念的我自然對 Windows 10 有著極大的期望。但同時地,作為一位設計師,我能注意到 Windows 10 中許多設計上的欠考慮和粗心之處,直接造成了用戶體驗的倒退。我想這也是 Windows 10 發展情況不佳的一個隱性原因。


Design matters a lot. Windows 10 的設計是一個十分嚴重的問題。我熱愛著 Windows,也正因此,我想我更應該將心中對 Windows 10 設計的不滿表達出來。接下來,我將配合圖片列舉 Windows 10 在設計上的不足之處。

  • 鎖屏界面(Lock Screen)

鎖屏界面(左:未開啟 Windows Spotlight,右:已開啟 Windows Spotlight)

未開啟 Windows Spotlight 功能的鎖屏界面和已開啟 Windows Spotlight 功能的鎖屏界面除背景圖片外,還有許多細節上的不統一,例如右下角系統托盤圖標位置的不統一,如下圖所示:

系統托盤圖標(左:未開啟 Windows Spotlight,右:已開啟 Windows Spotlight)

顯然,右圖中的圖標位置偏上一些。

此外,時鐘的位置也有微小區別:

鎖屏時鐘(左:未開啟 Windows Spotlight,右:已開啟 Windows Spotlight)

仔細觀察的話,可以發現左圖中的時鐘位置向上偏移了一些。

再者,鎖屏時鐘和日期的字體字重也有細微區別,如下圖所示:

鎖屏時鐘和日期(上:未開啟 Windows Spotlight,下:已開啟 Windows Spotlight)

可以看出,已開啟 Windows Spotlight 功能的鎖屏界面的時鐘和日期,字體字重會偏重一些。另外,由於微軟雅黑的缺陷,這一點在中文下表現得尤其明顯。以上即是鎖屏界面中我已發現的 UI 不足。

  • 應用商店(Windows Store)

為了展開這個 UI 吐槽板塊,請先允許我在應用商店中打開 Adobe Photoshop Express 這個 App 條目,進入後界面如下:

各位且看右上方的分級標誌,我們試著按下「More」這個按鈕,我們將獲得這個結果:

點開來以後,你發現這個 App 中的分級包括「Digital Purchases」。但是,既然 Digital Purchases 也只佔一行,為什麼不直接在第一層界面就顯示出來,而是要藏在 More 下面呢?這就有些無法理解了。此外,對於這個分級標誌的 UI,我還找到了下面這個例子:

同樣的困惑:為什麼撐得下版面的字,非要讓用戶多一次點擊才能看到呢?


為了落實微軟的「Universal」精神理念,關於「More」的尷尬當然不能止步於分級標誌,我們再打開 Translator for Microsoft Edge 這個 App(Microsoft Edge 瀏覽器擴展)條目:

讓我們把目光集中到截圖右側的應用說明(App description)上,我們又看到了熟悉了「More」按鈕,讓我們點開它試試看:

由上,點開 More 以後並沒有顯示任何多出來的訊息,這個按鈕完全是多餘的……


再來看一個同樣的例子,這個 UI 是 App 頁面底部的許可權說明:

顯然,這又是一個毫無意義的 More 按鈕。然而,此處的匪夷所思還不止如此,當我們將窗口拉小時,你會發現……

剛才的「More」按鈕不見了!(此處應有黑人問號……)


然後我們再來看一下 App 評價板塊,在 Windows 應用商店的評價板塊中,可以根據應用版本和使用平台篩選評論,但是篩選的下拉菜單似乎出了一些事故……

可以看出,篩選「版本」的菜單在點開後寬度會變短並順勢使右側篩選「平台」的菜單按鈕向左平移,而篩選「平台」的菜單在點開後寬度就不會變化:

然而這並不是應用商店內所有下拉菜單的模樣,其中還有下面這種形式:這是應用商店中影視區內的某一部片子(實際上是 Les Misérables 25th Anniversary Concert),點開選擇高清/普清的下拉菜單後,菜單的寬度和之前篩選「版本」的菜單一樣詭異地出現了寬度變化,但此處它卻不會一併使其右邊的按鈕發生位移,如下圖所示:

當然,作為一個海納百川的應用商店,UI 上的槽點僅僅有這些是完全不夠的。在應用商店中的「People also like」頁面中,App 的行間距無比的大,嚴重地浪費了屏幕空間:

如果你感覺這個問題看得不明顯的話,那我們把窗口拉窄一些再看看,這樣子不合適的行距造成的空間浪費就十分明顯了:

接下來登場的是 Mouse Hover(即滑鼠移到某元素上後,顯示的灰色半透明覆蓋層)尺寸不一致的問題,第三個很明顯已經走樣了:

應用商店中條目 title 圖片大小不統一問題:

由左到右分別為:專輯頁面、電影頁面、藝術家頁面、App 頁面

我是實在不能理解為什麼專輯的封面和藝術家的頭像要比電影的海報和 App 的圖標大那麼多……

再來看看「下載與更新」頁面:

我們試著點擊每一行 App 最右邊的「Three Dots」按鈕,然而我們發現彈出的菜單僅僅只有一項「立即下載」……

我想,更明智一些的做法是直接將「立即下載」作為一個獨立的圖標取代「Three Dots」的位置。按一個按鈕然後打開一個只有一個選項的菜單實在是太令人無法接受了……


最後,還有應用商店的 price label 重複問題,App 頁面中寫了兩次價格(下圖中為 Free):

實際上,價格只需要寫在下載/購買按鈕上就足夠了。好了,關於應用商店的吐槽暫告一段落。

  • 日曆(Calendar)

首先明明頂部有空位,卻硬是要把自己塞到二級菜單里的「列印」功能……

位置和對齊讓人十分不舒服的月份切換按鈕和奇怪的位於「Today」和「Day」之間的分割豎線:

分割豎線至少也得在兩個按鈕之間的空隙居中一下吧……


令人無語的 Mouse Hover,居然沒有對齊:

日曆設置界面中點開後邊框沒有對齊的菜單:

  • 照片(Photos)

照片 App 中,標題欄的字距和其他系統原生 App 有所不同,細節可見下圖,可以發現照片 App 中的字距稍大一些:

  • Groove 音樂(Groove Music)

Groove 音樂在國際著名 Windows 粉絲網站 Windows Central 中被廣泛好評為設計得最好的系統原生 App。然而事實並不是這樣…… Groove 音樂中同樣充滿了各種 UI 槽點。


在較大尺寸的窗口中,「Your Groove」板塊下方的提示語字型大小過大,正常應該是右側的小窗口中的樣子,顯然微軟沒有做好相應式設計:

不統一的「More」:

在商店中,點擊「More」並不會彈出一個新的對話框,然而 Groove 音樂中卻彈出了新的對話框,顯得不便。


Mouse Hover 十分簡陋,簡單粗暴地使用灰色不透明遮罩,並且顯得過長了:

全屏和非全屏的「正在播放」UI 中,專輯封面大小不同,字體字重不同:

左為非全屏 UI,右為全屏 UI

仔細查看,可以看出下方(全屏)的字重偏重:

上方為非全屏 UI,下方為全屏 UI

此外,Groove 音樂中的專輯頁面中的封面圖大小也與應用商店中的不同,Groove 音樂中的小了許多(不過這才應該是正常的大小)……

  • 入門 App(Get Started)

入門 App 中的標題欄也出事了,只不過和照片 App 的字距問題不同,入門 App 有問題的是字重,通過對比,可以看出入門 App 標題欄的字重和其他系統原生 App 顯得更輕一些:

  • 設置(Settings)

設置 App 在 Windows 10 Anniversary Update 中迎來了一次較大的 design overhaul,但是在 UI 的細節上還有很大的問題。


比如,設置的第二級界面和第三級界面的標題字體的字型大小不同,此處以 Update Status(第二級界面)和 Update History(第三級界面)為例:

左為 Update Status 頁面,右為 Update History 頁面

放大來仔細看一下,可以看出右邊的字型大小比左邊的偏大:

再來看「激活」頁面,其中「更換產品密鑰」的按鈕配了一個 icon,但是這個 icon 居然是按不下去的……

箭頭所指的是滑鼠移至按鈕上時的效果,可以看出 icon 的顏色並沒有變灰,icon 是按不下去的。

說到這種左側帶有 icon 的按鈕,其設計在設置 App 中也是分裂的。以下是兩種不同的帶 icon 按鈕設計,左側的文字對齊方式是居中對齊,而右側的是頂部對齊;當滑鼠移至左側按鈕時,按鈕的文字會變灰,而對於右側的按鈕,則會有灰色的矩形 hover:

接下來是設置 App 中的搜索功能,此處我以「sign」這個關鍵詞為例子,我輸入關鍵詞並點擊顯示所有結果後,App 跳轉到了一個新的頁面,其中第一項結果周圍出現了一個藍色框,詭異的是,這個框並不會因為滑鼠點擊其他結果而消失,滑鼠點擊另一項結果只會在另一項結果上多顯示一個灰色框:

經過我後來的多次嘗試,我發現那個藍色選擇框需要用鍵盤上下來改變位置。但是此處也有一個問題,如果你用滑鼠點擊了頁面中的任意位置,不論怎麼按鍵盤的上下鍵,那個藍色框都賴在那裡不動了……


最後是「Your info」頁面,這個頭像的大小和下方字體的排版實在是太 poor 了……看起來就是從未經過 polish 的草稿的樣子:

  • 計算器(Calculator)

Windows 10 的計算器被打造成了一款嶄新的 UWP 應用,在界面和功能上都比以前的舊 Win32 桌面版本好了許多,甚至都有了自己的設置頁面,似乎可以進行很豐富的個性化:

所以讓我們點開設置按鈕看看其中有什麼選項……

???


點開「設置」以後出現了關於(About)頁面???Excuse me??? 還不如直接放一個 About 按鈕在上面……

  • 反饋中心(Feedback Hub)

微軟在 Windows 10 發布伊始時宣布了 Windows Insider 項目,允許普通的用戶註冊成為 Windows Insider,以搶先下載體驗 Windows 10 的內部測試版本,在使用的過程向微軟發送反饋,以使微軟將 Windows 10 打造為一款為最廣大消費者喜愛的操作系統,而反饋中心(Feedback Hub)則是用戶發送反饋的窗口。但是,這個 App 的製作並不如微軟所說的用心。

先來看看其漢堡菜單的設計,點開後存在極大的空間浪費:

反饋中心中含有成就系統,我們先來看看這個界面長什麼樣:

其中的成就徽章顯得十分敷衍和雞肋,正常的徽章應該是圓形的(如左側),但是因為微軟製作時的敷衍,部分徽章甚至出現了不透明的白色背景(估計是忘記保存成 PNG 格式了),看起來非常不專業:

當進入反饋列表時,上方會有篩選條件,然而,在窗口最大化的時,點擊不同條件所彈出的列表菜單的彈出方向卻不一樣:

左為點擊「Trending」後彈出的菜單,右為點擊「All Categories」後彈出的菜單

上圖中左側的案例中,菜單是從按鈕的下方彈出的,在右側的案例中,菜單則是從按鈕的左方彈出的。或許有些人會說這是因為右側的案例中的菜單項目過多,放在左側較好,但我認為在存在滾動下拉條的情況下,放在下方並無問題,況且,若我們將窗口縮小,我們將看到這樣一幅奇景:

將窗口縮小後,點擊「All Categories」後彈出的菜單也變成由下方彈出了!這種 UI 細節上的不統一,實在令人尷尬。


儘管微軟一直在吹噓 UWP 應用的相應式設計,但反饋中心的近乎廢品的相應式設計,卻為之蒙上了一層陰影,且看下面這個情況:

當把窗口繼續縮小時,漢堡菜單並不會自動縮回,且右側的界面中的搜索框已經面目全非。

  • 手機助手(Phone Companion)

手機助手這個 App 雖然雞肋,但是啟動頁面好歹也上上心吧……灰色背景配白色圖標這配色這事也只有微軟能幹的出來了:

  • 人脈(People)

只有一個欄目,毫無卵用的漢堡菜單:

  • 天氣(MSN Weather)

滾動條擋住了調整日期的按鈕:

  • 虛擬桌面(Virtual Desktop)

點擊任務欄上的虛擬桌面按鈕後,將滑鼠移至「新建桌面」按鈕,按鈕將不會有任何變化以提示按鈕狀態(不論是 hover 還是字體顏色變化):

  • 任務欄上的日曆

點擊任務欄右端的日期和時間後,在彈出的日曆面板中,即使沒有任何日程,日曆面板下方也會默認顯示大塊空白的 Agenda 面板,極大地浪費了空間,需要手動點擊收起面板以解決問題:

正確的情況應該是:按照日程的多少自動調整面板的高度。

  • OneDrive(UWP 版本)

漢堡菜單縮起和展開時,相同的 UI 元素位置有明顯的不同:

漢堡菜單展開時,幾乎所有的元素位置都明顯地下移了。


另外,在設置界面中,排版十分的簡陋,簡直是個 prototype,字都幾乎頂到 hover 的邊緣了

  • Microsoft Edge

Microsoft Edge 支持黑色主題,但其黑色主題中的地址欄顯得並為對黑色主題進行充分適配,當滑鼠移動至地址欄時,地址欄會變成突兀的白色(灰色系足矣):

  • 微軟小娜(Cortana)

當將任務欄上的 Cortana 搜索框改為圖標後,Cortana 面板中左下角會出現圖標空缺:

Cortona 面板中字體不統一,部分(離線部分)為 Segoe UI,部分(需聯網部分)為 Arial:

圖中用紅色圈出的部分使用 Segoe UI,用黃色圈出的部分使用 Arial聽歌識曲 UI 十分簡陋且不與其他場景統一,即正常進行 Cortana 語音時,Cortana 形象會居於面板中心,但聽歌識曲時卻出現在頂端;並且,聽歌識曲界面的「Cancel」和「Try again」兩個按鈕,滑鼠移至其上時都沒有視覺反饋:

  • 操作中心(Action Center)

在操作中心中,部分長文字的末端會被攔腰折斷,只顯示出半個字,然而將信息完全展開後就不會有這個問題:

操作中心中圖標顯示不統一,對於傳統的 Win32 軟體,圖標背後會多一塊主題色的背景,而對於 UWP 應用,圖標則是透明的。這個問題我在四個月前就開始不斷向微軟反應,至今仍未得到回應:

  • 開始菜單(Start Menu)

一如大家所知,開始菜單的最上方會顯示最新安裝的 App,但如果你最新安裝的 App 被 Windows 10 識別出為 4 個,你就會遇到下面這中尷尬的情況:

顯然此時第 4 個 App 完全不需要被藏在 Expand 中。


以上便是我粗略整理的 Windows 10 的 UI 細節上的眾多問題。感謝你能耐心地讀到這個地方。

一如微博上的微軟工程師 @程序員鄒欣 近來總說的「生活還要繼續」,科技並不是生活的全部。一個科技粉並不意味著需要一心沉入科技之中,站著自己的陣營,這樣或許就已經和初衷背離了。當初的我愛上 Windows,是因為 Windows Vista 中 Aero 的優雅和 Segoe UI 字體透露出的別樣的人文氣息,還有那 Windows Phone 中 Modern UI(Metro)以字體和排版為中心的簡約設計。這些都透過科技帶來人文和藝術上的美。而現如今,Windows 10 中幾乎看不到過去的優雅,這令我尤為失望。


如今,我的生活幾乎被蘋果設備所佔領,Windows 10 只存在於虛擬機和不常使用的 Windows 10 平板。macOS 擁有更優雅的界面和更統一的細節,給我帶來更好的體驗,這都是過去我在 Windows 上希望看到的。我並不後悔過去對 Windows 和微軟的喜愛,實際上,我現在依舊熱愛著,期待著未來某一天 Windows 10 能夠真正成為一款美好的操作系統,也衷心地希望微軟的 Universal 戰略能夠成功。

祝各位好運。

利益相關:
2014 年 10 月起的 Windows Insider
MacBook Air 用戶
HP ENVY 8 Note Windows 10 平板用戶
iPhone 6 用戶
Lumia 950 用戶
前 Lumia 638、Lumia 640 用戶


@Ryan Lau 說得很翔實,甚至很多東西我都沒有在我的平常使用中發現,當然也有一些觀點我不太能認同。總體來說,他的回答還是能夠比較全面地體現問題的。在看了他的回答之後,我有一種衝動,想要接著說一些什麼。那麼,let『s begin.

首先我想要亮出我的觀點,就像我在某一篇回答下回復的,即「微軟還遠遠沒有形成一套完備的規範的設計體系」。「完備」和「規範」的設計應該是什麼樣子的?我很難去給出定義,畢竟我不是什麼專業設計師。但是我們可以看一看 iOS 7+ / Material Design 這些備受好評並且在市場上取得成功的設計規範就不難發現,這些設計都定義了一整套完整的交互體驗,從比較抽象的整體理念,到界面設計風格的取向,到具體主要界面元素,包括字體、色彩、控制項、動畫、手勢等。並且,設計者可以輕鬆地以此為基礎加入一些自己的創造和修改從而能更好地滿足自己的需求,並從整體上和系統保持風格的一致。而對於 Windows 平台上的設計者來說,Windows 10 提供的還遠遠不夠。以字體為例,無論是蘋方還是思源黑體,都是設計良好、字重齊備的字體(6 種及以上)。而 Segoe UI 作為一個英文字體只有 5 種字重,微軟雅黑只有 3 種,方正等線只有 2 種,都難以堪用。尤其是考慮到 Windows 10 UWP 雄心勃勃的跨平台還需要額外考慮多種屏幕尺寸的設備和多種交互方式。很多問題微軟自己沒有想好一致的方案,並把問題拋給了開發者(也包括微軟內部不同的團隊)。

以本人非常喜歡也經常使用的兩款應用為例來說明一下問題,它們是網易雲音樂和 Camera 360. 這兩款應用都可以稱得上是良心應用,明顯是經過設計的,所以有一定的討論價值。記得網易雲音樂的設計師曾經在網上發聲說,他(們)在設計這款應用的時候遇到了一個麻煩。什麼麻煩呢?用戶在使用滑鼠的時候,單擊一首歌曲的標題傾向於「選中」,而用手指觸摸的時候卻傾向於「播放」,所以對於一次單擊事件作何反應讓他們犯了難。這是一個小問題,但是我覺得很能說明問題。再看 Camera 360 這款應用,其製作也是非常精良的。但是相信使用過它的人在讚歎之餘也會有一點奇怪,怎麼濃濃的蘋果風?實際上,Camera 360 非常遵循蘋果的設計規範,以至於如果被原樣移植到 macOS 上不會有什麼違和感。再看看手機上的情況,網易雲應用的手機版重寫了界面,和其他移動平台的設計基本一致,而 Camera 360 暫時沒有出手機版。優秀的設計是趨同的,這點我承認,但是趨同到完全照搬模仿其他平台的設計總歸是悲哀的。我想還是因為 MS 的那一套不太成熟,在美觀和實用性方面有所欠缺。

再說一個槽點,為了給觸屏優化,UWP 默認模板的傾向是比較大的控制項、間隙和字型大小。首先這和為滑鼠優化的傳統軟體形成了比較強的割裂感,其次這樣真的很醜又不實用,浪費了大量空間。網易雲音樂和 Camera 360 的解決之道是使用較小尺寸的定製控制項、間隔和字型大小,其實這樣觸摸起來沒有多大問題,但是觀感真的舒服多了。如果一定要堅持大號的界面元素,為什麼微軟不在平板模式和桌面模式中引入更為精細的 DPI 調節呢?適當縮小桌面模式下 UWP 的其他界面元素尺寸,把更多空間留給內容?亦或者是使用其他什麼更精細的方法?這個問題不大影響使用,但是背後的問題是深刻的。微軟畫了一個跨平台的大餅,但是很多細節上缺乏良好處理的先例,導致這樣開發出來的軟體有很多之前沒有過的問題需要解決,否則在品質上會有缺陷。網易雲音樂在手機上重畫界面的原因之一也在於此,解決這些問題的成本高於重繪界面(當然這也說明了 XAML 畫界面確實容易)。

為什麼這些「良心」應用都要這麼做呢?我們來看看微軟自己做的第一方應用,這些應用本應該是第三方應用學習、提取靈感的榜樣。但是,我不得不說,微軟的第一方應用真的很糟糕。不知道是叫「圖片」還是「照片」的那個默認看圖應用就是一個非常典型的例子。設計、製作粗糙,基本上沒有動畫(實際上微軟的第一方應用動畫都很少),或者動畫簡單呆板(很多是控制項自帶的動畫,這些動畫也是很貧瘠很簡單)。基本沒有手勢,圖片放大之後滑動沒有慣性效果。更為重要的是,這款軟體的功能比界面更為貧瘠。不支持一些高級的修圖也就罷了,這玩意還不支持照片內嵌 icc 文件的色彩空間轉換!小白用戶直接用這款應用查看 AdobeRGB 的照片會得到偏色的結果。如此管中窺豹,也可以得知第一方應用的糟糕了。第三方基本上從第一方應用身上學不到什麼東西。

相信有些人會說「MS 網站也有很多設計規範啊」之類的話。作為一個看過老版 《iOS 人機交互指南》的人,我個人覺得 MS 的規範在系統性方面連給蘋果提鞋都不配。《指南》基本上把開發者想得到的和想不到的很多細節都做了規範,並且這些規範大部分是適當和人性化的。而蘋果相對超前(上個世紀90年代)的 Cocoa 的界面系統設計又為良好的實現提供了可能。相比之下 WinRT XAML 直到 Anniversary Update 才提供了功能比較完備的 Composition APIs 來製作合成動畫,之前想要做一些輸入驅動動畫或者是隱式動畫是困難的。而 WPF 以及現在的 UWP XAML 都算是 MS 在對之前老舊過時的界面系統修正的嘗試,但是 WPF 有依賴 .net 和冷啟動速度的問題,UWP XAML 如上文所說還在完善中。底層界面技術的跳躍式過渡是上層體驗的割裂和不完善的一個重要原因。據說 MS 有 UWP 版 Explorer 的計劃,又是一個大坑,可見 new features 和各種 bugs 已經讓 MS 焦頭爛額,同時 MS 從來不是一家講究設計的公司,界面的細節恐怕短時間內是顧不上的了。


Airbnb (2016) :

Apple Music (2016) :

Windows Phone 7 (2010) :

(標題大字型大小,強調排版,剋制的圖片使用)

---
Apple Watch (2014) :

Windows 8 (2012) :

(左對齊/ 右對齊,圖片+ 時間)

---
iTunes 專輯牆 (2015) :

Spotify (2015) :

HTC Vive (2016) :

Zune (2008) :

(漸變、伸縮尺寸的圖片排版"磁貼")

---
以及以上所有的爸爸 :
Windows Media Center (2004) :

發出來的圖片掛了 尷尬 (知乎的問題嗎?)
本答案不在於說明哪家更好或者「抄襲」之類的問題,只是為 @Yang 的「理念超前,卻沒有品味」的前半句話打個腳註。後半句話請見 @Ryan Lau 的答案~

Source :
Zune的華麗界面,嗷嗷~
「極簡」設計正在成為移動應用設計的新趨勢 - 稀土 - 知乎專欄
https://jrjohnson1701.wordpress.com/2013/06/30/windows-8-2-what-i-would-like-to-see/


兩個問題,
1.如何評價微軟的 UI 設計?
2.微軟的設計特點?


1.如何評價微軟的 UI 設計?——只說現在的UWP

  • 從用戶操作體驗的角度出發,UWP 有進步亦有退步。UWP 的 Mobile 端操作體驗友好度遠不如 Windows Phone 7 的捲軸式縱向排列設計;具備觸摸屏的更大尺寸設備上,UWP 操作更加便捷(主要體現於應用內導航);Desktop 及 Laptop 端操作體驗有巨大進步,這一點毋庸置疑。
  • 從設計師的角度出發,UWP是更易於理解,相對而言更容易設計的。UWP 如今擁有更高的信息密度,令設計應用時的排版壓力減輕很多,更加易於設計語言的推廣;相比 Windows Phone 開啟的設計,UWP在樣式方面的變化不是很大,模塊下沉依然得到了保留等等,在易於設計師理解的同時又一次降低了設計過渡難度,大好事。此外,應用布局是相對 Windows Phone 開啟的設計而言變化較大的地方,但這個變化是更加親民的變化,UWP 如今的布局設計更加隨大流,弱化的排版讓 UWP 相比舊的設計更容易設計,為設計 Windows Phone 中文應用時的煩惱一去不復返了(此處省略一萬字)。並且多平台的通用性再次縮短了設計流程。
  • 從開發者的角度出發,略。我不是開發者,懇請大家補充。

==================

2.微軟的設計特點是什麼?——依然只說現在的UWP

官方設計文檔有詳細的回答,Microsoft design language 英文版;Microsoft 設計語言 中文版


==================


一直以來,微軟更擅長於for business的產品,區別於蘋果公司個人消費級更偏向於娛樂化的產品。

從win8到win10,移動端從wp7到wp10,微軟一直堅持扁平化設計,這對於for business 產品來說更高效便捷。也確實在全球掀起一股扁平化浪潮,大家對比褒貶不一(好像吐槽的比較多)。

不過微軟在用戶體驗上也做了不少努力,舉個例子,微軟設計師在使用文字和背景顏色的時候,要遵守4.5比1的色彩對比度(背景色和文字要對比強烈),因為考慮到了色弱和色盲用戶

先佔坑,慢慢更~


總的來說我覺得是越來越好,越來越有自己的風格。

所以我現在很不喜歡 Windows Vista 和 Windows 7 的 UI ,儘管在那個年代,有 Aero 加持相比 Windows XP 好看太多。

但是對於細節越來越不注意了,像素級別的不對齊就算了,各種風格不統一真的讓人受不了。個人認為微軟出的 UWP app 里,MSN 系列的算是最好的,但是很多普通用戶根本不去打開…

FYI 我雖然站隊方面一般是站微軟,但是我認為設計最好是谷歌家的 Material design. 自己的應用(MyerList, MyerSplash) 設計風格也有從 MD 借鑒。


理念超前,卻沒有品味。


有一天我開vs寫程序時,一個平時喜歡用蘋果的朋友湊過來看,還以為自己看到了科幻片里的鏡頭……當然,科幻指的是vs的UI和配色,至少蘋果不會走這種酷酷的路線哦。

而下圖是很久以前擺拍的,如果一個沒接觸過vs的人看到這個,也許想不到田牌的產品也能極客成這樣吧:

我感覺,田牌的UI一直都是高效的代名詞。也許沒有蘋果那樣的整潔精緻,也沒有Google不經意間的創意和俏皮,但它一直保持著一種大巧不工的風格,將自己能做到的所有功能以一種規規矩矩的操作邏輯完全展現。它好像在對著另外兩家說:別看我傻,你看我什麼都有!

而Win8的出現似乎打破了這一切,不成熟的新外殼讓UI的易用性大大倒退。幸運的是,現在Win10正在逐步挽回Win8時代的損失,而且在美觀度上也繼承了Win8的別樹一幟,拿著Win8的接力棒繼續超前時代。

最後曬一下自己的開始菜單,還有哪家的設計能像現在的Win10這樣,在保持可靠和易用的前提下實現這麼靈活的自定義呢?


謝邀。

試著分析一下,又長又亂勿怪。

1、從Win3.0至WinNT是一個時代,微軟操作系統的主要用戶是有一定編程基礎的技術人員和開發人員,基本不會面向普通用戶。那個時代(80年代末90年代初)對電腦和互聯網的需求很小,普通人根本沒有機會接觸電腦和Windows操作系統,即使接觸了也會被較高的門檻嚇到(裝個遊戲動不動都要敲很多命令)。

所以對於這個時代的用戶來說,Windows操作系統只不過是他們在命令行以外的另一種更加直觀更加便捷的操作方式。在這個時期根本沒有UI設計這個概念,不過基本的人機交互已經初見雛形。我們無法用今天對於UI界面的標準來評判那個時代的設計,那個時代Windows的偉大之處在於為後世定義了一整套人機交互標準,例如什麼是按鈕,什麼是標題欄、工具欄,滑鼠的移動和單擊,項目的選中狀態等等。雖然不複雜也不華麗,但卻較為準確的傳遞了用戶的操作反饋。

2、Win95~WinXP是一個時代,這個時代最大的變化就是Windows操作系統開始面向0基礎的普通用戶發售,與此同時「多媒體電腦」的概念也開始傳播,電腦比起上一個時代在功能方面承載了更多內容,如辦公、日常管理、音樂、影視、商業遊戲等。

因此微軟在界面設計方面也有了很大幅度的革新,為了降低普通個人用戶的學習門檻,便於操作系統推廣,微軟煞費苦心的設計了大量精緻的擬物化圖標,力求讓什麼都不懂的用戶一眼就明白這個圖標雙擊之後會發生什麼。

在交互設計方面,微軟更上一層樓,在軟體安裝、拷貝、刪除和複製的過程中,全程有滑鼠和圖標反饋,各種設計精美的進度條不僅能夠向用戶傳遞儘可能完整的信息,同時也為冗長的系統響應時間提供了一些樂趣。

開始菜單和任務欄的設計是這個階段的點睛之筆,使普通用戶不比去關注目錄和文件夾結構,不必去使用相對困難的搜索功能查找自己想要的應用,而是把所有應用和常用功能從目錄結構中剝離出來集中展示和管理,大大降低了用戶的使用門檻和使用效率。例如我老爸老媽至今弄不懂文件夾和資源管理器的作用,但卻能夠完美使用開始菜單做他們想做的事。

在這個階段,我們終於可以審視微軟在界面設計方面的一些特點。

首先應該說這個階段電腦和Windows操作系統仍然不是很普及,大部分用戶對於電腦中常見的菜單、視窗、面板、按鈕、對話框、各種狀態條和工具條的概念根本弄不懂,甚至會相互混淆。微軟為了讓用戶能夠儘快理解這些必不可少的關鍵概念,因此引入了史上最偉大的設計風格之一——擬物化設計。

從現實中常見的物品的特點中汲取靈感,映射到UI界面設計當中,儘可能呈現與現實一致的視覺效果,是微軟這個時期設計風格的主要特點之一。如下圖所示,一個普通的視窗,我們可以發現它不是扁平的,而是立體的,既有那種像自然光照射在金屬上面的明暗對比,也有自然光照射在上層面板後在下層面板上形成的投影。視窗內部就像被裁切出來一塊內容似的,旁邊有立體的邊框圍繞著,裡面才是扁平的白色背景。此外在任務欄中,當前選中的視窗的視覺效果就像一個機械按鈕被按下去一樣,沒有被選中的窗口就像一個等著被按的機械按鈕一樣凸出來。不僅是視窗,所有的按鈕、滾動條、菜單、狀態欄都採用了這種設計,力爭讓用戶快速理解桌面、視窗和視窗中內容的層次關係。

其次在配色方面,初期Windows迫於電腦顯卡和顯示器的硬體限制(256色、16位色),以及CPU和緩存的處理能力,無法使用更為鮮艷和多變的顏色。大部分顏色都是經典的紅黃藍以及視窗特有的材質灰色。此外還有一個原因,彼時微軟在操作系統方面已經是全球壟斷地位,在設計和配色方面他不需要用酷炫的設計去吸引那些缺少購買力的女性用戶和青少年用戶,而是要踏踏實實的準確傳遞交互信息,牢牢吸引住那些富裕而務實的中年男性用戶和企業用戶。

所以總結一下,這個時期(90年代~2000年左右)微軟的設計風格是一種穩定務實的擬物化設計風格,目的是清晰的傳達交互體驗。隨著用戶的普及以及硬體性能的提升,微軟也逐漸在他力所能及的範圍內增加了一些視覺特效,但顯然這些都不是微軟的首要目標。

3、Vista和Win7時代。這個時代我們會發現Windows的界面設計有了大幅提升,視覺效果與WinXP之前不可同日而語。這裡面的原因也是較為複雜的。

首先在這個時期計算機硬體性能取得了爆發性的提升,以顯卡為首的硬體隨著各大商業遊戲在電腦上的發布而逐漸走上主流配置清單。從客觀上為Windows界面的視覺體驗提升提供了基礎。

其次,彼時微軟已經在全球市場牢牢扎住腳跟,長達10年的用戶習慣培養計劃終於逐漸收到效果,提問「什麼是對話框」、「單擊和雙擊的區別是什麼」的小白用戶越來越少,大家逐步接受了微軟操作系統作為日常生活的一部分存在。於是微軟也可以有條件逐漸告別保守而陳舊的設計風格。

再有,20世紀末是信息爆炸的時代,隨著互聯網的普及,普通用戶有機會足不出戶見識來自全球優秀的設計和設計趨勢,漸進色、半透明效果、磨砂玻璃效果、抽象主義這些設計風格被越來越多的人所接受,微軟也不好意思一直抱著上世紀的設計風格不放了。

最後,微軟逐漸意識到了來自蘋果陣營的競爭壓力,隨著05年mac mini和08年mac air面世,越來越多的用戶開始使用蘋果產品,其中精美的UI設計功不可沒,大量女性用戶和青少年用戶成為蘋果的粉絲,而這些人恰恰代表了終端市場的未來。

因此,微軟急需一款產品,在界面方面能夠達到與Mac系統基本持平的顏值,另外針對越來越多的筆記本用戶進行優化。於是乎,Vista和Win7應運而生。

在設計方面採用了大量玻璃質感和半透明效果進行設計,圖標設計方面保留了擬物化設計,但比之前更為精美。整體上來看是一種更為成熟的擬物化設計風格。

在這個時期Windows有了正面的競爭對手,因此我們也可以通過對比,來看看Windows界面設計有哪些不足,所謂不足都是通過對比體現的嘛。

在我看來Windows在此時最大的不足,是由於其不清晰的市場定位引起的。Win7既要頂住來自蘋果的壓力吸引新用戶,又要不斷的吸引和留住老用戶,包括那些從上世紀90年代就開始使用Windows操作系統的50多歲的用戶,還有諸多IT更新換代緩慢的大中小傳統企業。兼顧這兩方利益之後妥協的結果,就是一個四不像,微軟把這些年積累的交互元素全都傾倒進了Win7這個操作系統,我舉兩個例子你就明白了。

3.1 滑鼠懸停效果
Win7每一個窗口中的項目甚至菜單都有選中效果和滑鼠懸停效果,即使該窗口不是活動窗口,滑鼠滑過的時候依然會觸發懸停效果,這個效果並沒有什麼實際的用途,只是告訴用戶「這裡能用滑鼠點擊」。有些項目滑鼠懸停之後會顯示狀態信息,但這些狀態信息在窗口下面的狀態欄也有顯示。誠然,狀態欄中的信息只有該項目處於選中狀態時才會顯示,而滑鼠懸停時顯示的信息不需要選中項目。但當用戶真的想看一個項目的信息的時候,是會選中項目之後立刻看狀態欄呢,還是把滑鼠懸停在圖標上等0.8秒呢?

這種設計帶來的好處是可以為用戶提供更多交互信息,操作不熟練的用戶在這些交互信息的幫助之下可以更好地使用Windows。但對於操作熟練甚至是追求界面顏值或工作效率的用戶來說,這種設計簡直就是災難,滑鼠無論指向哪裡都會有東西亮一下或跳一下,像踩地雷一樣。

這種設計不僅給人非常不穩定的感覺,而且會給用戶一種被鄙視的感覺。交互設計中很重要的一個原則是為中級用戶做好設計,因為用戶不可能永遠停留在初級,又很少有用戶能夠提升到高級,大部分用戶都是中級用戶,好的界面設計應當使初級用戶儘快過渡到中級,然後為中級用戶提供最好的體驗。Win7當中的滑鼠懸停效果確實有助於新手用戶入門,但當一個用戶已經進入中級之後,他還需要系統告訴他哪裡能點哪裡不能點嘛?就像Windows不停地在說「嘿,傻B,這個圖標能點,記住了」。

相比之下Mac系統在這方面做得好得多,大部分圖標和項目都沒有懸停效果,因為蘋果懂得,用戶知道「什麼能點什麼不能點」,如果用戶點了不能點的地方,系統會給出友善的提示,而不是像Windows一樣一直在叫喚「這裡能點」。

3.2 滾動條
Windows窗口的一個特點就是當內容高度超過窗口高度時就會顯示滾動條,滾動條的作用有兩個:1、提示用戶當前窗口位置,2、使用戶快速定位到指定位置。

只不過在今天,這兩個功能都有問題。

首先用戶需不需要一直知道當前窗口的位置?按照用戶使用Windows的操作流程來講,顯然不需要。用戶關注的永遠是內容而不是位置,只有用戶想更換位置的時候才會關注位置。在這方面蘋果顯然做的更優秀,滾動條只有在用戶滾動頁面的時候才會出現,用戶瀏覽內容的時候會立刻自動隱藏,整個界面給人非常乾淨智能的感覺,因為蘋果顯然比微軟更知道用戶想要什麼。

其次,用戶需不需要使用滾動條來快速定位?尤其是在當今80%滑鼠都有滾輪甚至不止一個滾輪的時代。Windows的邏輯是:活動窗口可以用滾輪滾動,非活動窗口中滾輪無效,但可以用滑鼠拖動滾動條定位。

關鍵是,當滑鼠點擊非活動窗口的滾動條時,這個窗口就變成活動窗口了啊,滾輪也就能用了啊,為什麼總要讓用戶多一步操作呢?必須先點擊窗口才能用滾輪。在這方面蘋果又走在了前面,根本不分窗口活動不活動,用戶滑鼠懸停在哪個窗口就可以用滾輪滾動哪個窗口。除此之外,如果世界上有那麼10%的用戶堅持想用滾動條,蘋果也很紳士的為他們保留了滾動條。

從這兩個例子我們可以看出,首先當今用戶對於操作系統「外觀」的定義已經遠遠不止配色和平面設計了,交互和微交互,能否為用戶提供貼心的體驗都成為界面設計的一部分。而在這方面,微軟還是略遜於蘋果的。其次,微軟徹底拋棄了之前呆板復古的審美,轉向更為年輕化現代化的風格。

4、Win10將開啟一個時代。微軟近幾年的日子不好過,不僅是由於前面有Mac和Linux圍追堵截,後面還有安卓和iOS步步緊逼。移動端是未來的必然趨勢,微軟心知肚明,卻苦於無力追趕,畢竟未來的移動端生態現在由蘋果和谷歌來定義,微軟只能跟在後面亦步亦趨。

但跟隨不代表等死,在界面設計方面尤其如此。Win10在界面設計方面首先緊隨當前扁平化設計的浪潮,與之前臃腫的擬物化設計徹底告別。其次,獨創了Modern UI(Metro)風格,以內容和任務為導向規劃用戶的使用體驗。

Metro風格的優勢在於,從兩個方面進一步簡化了用戶操作步驟。1是取消了開始菜單,以前用戶需要點開始菜單再選擇程序,現在直接把程序平鋪出來。2是直接可以在界面上看到內容更新,省去了用戶選擇並打開程序的步驟。從這個角度來看,Win10是完全符合當今用戶快節奏的生活的。

在配色方面,採用了跳躍感極大的色塊設計,整體布局清晰且和諧,配色年輕且時尚,這也是由微軟這幾年的定位變化,由90年代面向中青年男性和企業用戶的定位,變成現在面向青少年和女性的定位。

說完了優點該說不足了。上面說過Win7的不足在於過於保守,顧忌老用戶的體驗而忽視了年輕用戶,照顧新手用戶而忽視了中級用戶。Win10恰恰相反,轉變的步子邁的有點太大了,去年大部分用戶還在用滑鼠在一個個小文件夾里左鍵右鍵點來點去,今年突然扔給這些用戶一些足以用手指點擊的大色塊,相信大部分用戶都會不知所措吧。

當今移動端的生態是由蘋果和谷歌主導的,普通用戶已經適應了在手機和pad上看新聞和郵件,現在微軟難道想用Metro風格把這些習慣重新拉回個人電腦上?我個人認為現在電腦在日常生活中扮演的角色越來越小,那操作系統廠商就應當順應潮流,突出電腦上面的一些不可替代性任務,例如圖片處理、辦公、影視編輯、大型遊戲等需要精確操作的功能,而不是逆流而行,與移動端搶市場。

從這個角度講,我認為微軟應該單獨為移動端和電腦端設計不同的操作系統,而不是像現在這樣一稿成型。這樣不但無法帶動移動端市場,反而會逐步丟失電腦端的市場。

不過這些跟設計沒太大關係,Win10的Metro設計還是不錯的,簡潔、時尚、直觀,有不少網站都開始效仿這種設計風格。


新版 Redstone和 Redstone2效果在旗艦筆記本像xps15上 體驗不輸mac os了
國人老喜歡拿win32老應用和Mac的最新版軟體比是什麼毛病?

全新Adobe cc office2016 visual studio 2015一套下來 感覺不比mac os丑啊

無論啟動效果 過度 UI設計 明顯比mac好很多
唯一的文字渲染和高分屏比mac是硬傷


Win 10 其實很棒,越用越喜歡


微軟內部有規定,在微軟工作只能使用微軟自家軟體產品。所以微軟的設計師們就用Excel設計出了Metro UI。


減少裝飾性的內容,直接傳遞信息。

除了開始菜單,基本不會讓界面出現花花綠綠的情況。蘋果的電腦不熟悉不多說,不過可以看看iPhone還有安卓的設置應用,大部分情況,每個選項前都有一個圖標,而且通常有一個彩色底色,但是這個顏色實際上並不能代表這個選項,我想也沒什麼人記這個顏色而找到選項。

10也有,但是它就是一個簡單的圖標,不會壓過文字傳遞的信息。磁貼的底色往往因為可以代表某應用的主題色,所以是有必要的。所以我也更喜歡8的時候,系統自帶應用也有不同的底色。也可以避免開始菜單過於單調。

當然,減少了裝飾性內容,對排版的要求就越來越高,對設計師的要求也不低,但是有些第三方應用,稍微看看微軟給的設計文件也不至於弄成那樣吧。。。不過有幸的是,現在基本上各平台也有這麼個趨勢,大家某些方面在趨同是個好事

打開10240的界面,再看看現在14393的界面,進步了多少。

不懂設計,憑自己想法談談而已。


我認為win10的問題在於自身風格的不統一,控制面板和設置應該統一起來但是沒有,設置里很多選項都沒有。在桌面上右鍵和在任務欄右鍵出來的菜單反差太大。所以win10很像是win7加了一個扁平化的殼,而且是不完善的。
我覺得win10的扁平化不好看,不像android的material design看著順眼,各種色塊顯得生硬突兀。


Ui一向是撕的重災區啊


表面上看,還過得去…進入下一級之後,總覺得哪裡沒對。。。


推薦閱讀:

Smartisan OS Pre-α 版的實際上手體驗如何?
視覺設計師是怎樣讓前端工程師 100% 實現設計效果的?

TAG:設計 | 微軟Microsoft | 界面 | 用戶界面 | 平面設計 |