通過(guò)全新的WIN 10設(shè)計(jì)語(yǔ)言,我看到了將來(lái)桌面客戶端風(fēng)向標(biāo)的5個(gè)特點(diǎn)
不單是視覺扁平,交互層級(jí)也更加扁平啦~
前不久,國(guó)外媒體曝光幾張Win 10的全新設(shè)計(jì)語(yǔ)言的截圖,把我給看嗨了(畢竟筆者是設(shè)計(jì)Windows 軟件出身的老UI設(shè)計(jì)師?。?/p>
于是我搜索了下這幾張截圖的相關(guān)信息,發(fā)現(xiàn)微軟有一個(gè)開展了一年多的項(xiàng) —— Project NEON,它的任務(wù)就是開發(fā)Windows新的設(shè)計(jì)語(yǔ)言(類似于設(shè)計(jì)實(shí)驗(yàn)室,大膽的做各種概念設(shè)計(jì),大公司就是好,還有這種項(xiàng)目部門~~)
這次的新設(shè)計(jì),相對(duì)于目前正在使用的Microsoft Design Language 來(lái)說(shuō),更加的大膽了,這些大膽既體現(xiàn)在交互層面也體現(xiàn)在視覺層面上。
(Groove 界面)
(Outlook 界面)
比較有趣的是曝光出的截圖界面有兩張都是來(lái)自微軟自家音樂(lè)播放器界面Groove。筆者發(fā)現(xiàn)一個(gè)特點(diǎn):很多設(shè)計(jì)師都喜歡拿音樂(lè)或者是視頻播放界面來(lái)作為設(shè)計(jì)的突破口??赡芤?yàn)檫@些界面在設(shè)計(jì)的時(shí)候確實(shí)容易出效果的原因吧,有各種漂亮的封面,操作按鈕不需要特意解釋都已經(jīng)深入人心了,而且基本天天接觸,想法自然比較多。
看完這幾張截圖不知你有什么想法,或者說(shuō)發(fā)現(xiàn)了什么東西沒有?
將來(lái)桌面客戶端風(fēng)向標(biāo)的特點(diǎn)
筆者大致發(fā)現(xiàn)了以下幾個(gè)特點(diǎn),這或許是將來(lái)桌面客戶端的一個(gè)風(fēng)向標(biāo)。
1. 弱化標(biāo)題欄和菜單欄
傳統(tǒng)的Windows 窗口由標(biāo)題欄、菜單欄、工具欄、側(cè)邊欄、工作區(qū)域、狀態(tài)欄組成。我們?cè)O(shè)計(jì)軟件的時(shí)候基本也是遵循這幾個(gè)模板進(jìn)行交互布局。讓我們簡(jiǎn)單回顧一下Windows的標(biāo)準(zhǔn)窗口~
(Windows xp窗口)
(Windows 7窗口)
(windows 10窗口)
通過(guò)上面幾個(gè)大版本的窗口截圖對(duì)比,不難發(fā)現(xiàn)Windows 一直在想辦法讓界面更輕(只是Win 7由于整個(gè)設(shè)計(jì)語(yǔ)言是玻璃質(zhì)感,但整體還是要比XP 時(shí)期輕很多的)。Win 10 的標(biāo)題欄和菜單欄更是結(jié)合了在一起~
2. 進(jìn)一步簡(jiǎn)化層級(jí),使操作進(jìn)一步扁平化
無(wú)論是XP 還是Win 10,我們其實(shí)都可以看成是三個(gè)板塊(下圖),而新的設(shè)計(jì)語(yǔ)言將三個(gè)層級(jí)簡(jiǎn)化為兩個(gè)層級(jí),通過(guò)左右(有點(diǎn)類似于iPad 的App 交互)展現(xiàn)任務(wù)和對(duì)應(yīng)任務(wù)的結(jié)果。
(iPad 概念設(shè)計(jì))
3. 強(qiáng)化內(nèi)容可讀性
應(yīng)該說(shuō)以內(nèi)容為導(dǎo)向進(jìn)行設(shè)計(jì)一直以來(lái)是metro遵循的守則吧~大標(biāo)題、醒目的顏色等。
4.目標(biāo)導(dǎo)向設(shè)計(jì),讓界面更加干凈和高效
只在觸發(fā)到某個(gè)任務(wù)時(shí)才展現(xiàn)相關(guān)操作,這樣就不用把所有的功能按鈕都羅列出來(lái),使界面更加Clean,操作更加的渾然天成.
5. 弱質(zhì)感帶來(lái)的高級(jí)感
說(shuō)到這個(gè)“毛玻璃”質(zhì)感~最開始應(yīng)該確實(shí)是微軟先弄出來(lái)的,當(dāng)時(shí)候Vista的出現(xiàn),還確實(shí)是讓眼前一亮的~只是過(guò)去的設(shè)計(jì)太粗糙了,那么粗的描邊、那么亮的內(nèi)發(fā)光,那么黑的陰影… 并且那個(gè)毛玻璃效果不夠“毛”,而且純屬裝飾,沒有什么實(shí)際用處。
(Win7界面)
然而比較搞笑的是,自家發(fā)明的毛玻璃效果被競(jìng)爭(zhēng)對(duì)手蘋果抄了去,而且青出于藍(lán),這讓微軟情何以堪啊。據(jù)說(shuō)微軟將這個(gè)毛玻璃效果正式命名為Acrylic(亞克力),在系統(tǒng)中會(huì)呈現(xiàn)出三種形態(tài):Side-Nav(側(cè)邊欄) Acrylic、Background(背景) Acrylic、In-App(應(yīng)用內(nèi)) Acrylic。
(Metro的理念)
好吧,以上就是我看了這些圖的基本感受,當(dāng)然都屬于個(gè)人想法,也可能這些理念現(xiàn)在已經(jīng)有了,或者是不夠明顯罷了(主要是我用Mac用太久了,偶爾看回Windows 好有親切感),有不對(duì)的地方望見諒。
據(jù)各種傳言都表示 Project NEON 開發(fā)的這套設(shè)計(jì)語(yǔ)言將會(huì)出現(xiàn)在 2017 年秋季正式推送升級(jí)的 Windows 10 Redstone 3 上,也許廣大 Windows 粉絲只要再耐心等待一段時(shí)間,就能看見更全面的 Project NEON 設(shè)計(jì)成果。
其實(shí)我看了這幾張圖覺得曝光的太少了,于是我又跑去各種搜索國(guó)外大神的概念設(shè)計(jì)。嘿嘿,還真被我搜到了不少,下面分享給大家,超贊的。
作者:俊宏,UI設(shè)計(jì)師,曾是迅雷設(shè)計(jì)經(jīng)理,帶領(lǐng)團(tuán)隊(duì),負(fù)責(zé)迅雷桌面相關(guān)UI設(shè)計(jì);目前在深圳百度,帶團(tuán)隊(duì),負(fù)責(zé)國(guó)際化兩個(gè)產(chǎn)品的業(yè)務(wù)。信仰——專注和堅(jiān)持。
來(lái)源:微信公眾號(hào)【折騰先生】
本文由 @俊宏 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
- 目前還沒評(píng)論,等你發(fā)揮!