編者按:據(jù)傳Win 10會(huì)在今年秋季迎來大改版,是一門全新的設(shè)計(jì)語言。這篇結(jié)合Windows 多年的變化和曝光的截圖,聊聊未來的設(shè)計(jì)趨勢。
注:前兩天優(yōu)設(shè)一篇好文被新浪微博產(chǎn)品副總轉(zhuǎn)發(fā),聊的也是設(shè)計(jì)趨勢喲:《2017年流行的UI風(fēng)格,可能是你從未聽過的「無框界面」》
歡迎關(guān)注作者的微信公眾號(hào)「折騰先生」,他的好文合集:
- 《PS教程!手把手教你繪制萌萌噠的小鳥卡通形象》
- 《PS教程!手把手教你制作沖擊力超強(qiáng)的美漫風(fēng)格海報(bào)》
- 《省時(shí)高效!7個(gè)資深設(shè)計(jì)師常用的PS實(shí)用技巧》
正文
前不久,國外媒體曝光幾張Win 10的全新設(shè)計(jì)語言的截圖,把我給看嗨了(畢竟筆者是設(shè)計(jì)Windows 軟件出身的老UI設(shè)計(jì)師?。?/p>
于是我搜索了下這幾張截圖的相關(guān)信息,發(fā)現(xiàn)微軟有一個(gè)開展了一年多的項(xiàng) —— Project NEON,它的任務(wù)就是開發(fā)Windows新的設(shè)計(jì)語言(類似于設(shè)計(jì)實(shí)驗(yàn)室,大膽的做各種概念設(shè)計(jì),大公司就是好,還有這種項(xiàng)目部門~~)
這次的新設(shè)計(jì),相對(duì)于目前正在使用的Microsoft Design Language 來說,更加的大膽了,這些大膽既體現(xiàn)在交互層面也體現(xiàn)在視覺層面上。
(Groove 界面)
(Outlook 界面)
比較有趣的是曝光出的截圖界面有兩張都是來自微軟自家音樂播放器界面Groove。筆者發(fā)現(xiàn)一個(gè)特點(diǎn):很多設(shè)計(jì)師都喜歡拿音樂或者是視頻播放界面來作為設(shè)計(jì)的突破口??赡芤?yàn)檫@些界面在設(shè)計(jì)的時(shí)候確實(shí)容易出效果的原因吧,有各種漂亮的封面,操作按鈕不需要特意解釋都已經(jīng)深入人心了,而且基本天天接觸,想法自然比較多。
看完這幾張截圖不知你有什么想法,或者說發(fā)現(xiàn)了什么東西沒有?
筆者大致發(fā)現(xiàn)了以下幾個(gè)特點(diǎn),這或許是將來桌面客戶端的一個(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)行交互布局。讓我們簡單回顧一下Windows的標(biāo)準(zhǔn)窗口~
(Windows xp窗口)
(Windows 7窗口)
(windows 10窗口)
通過上面幾個(gè)大版本的窗口截圖對(duì)比,不難發(fā)現(xiàn)Windows 一直在想辦法讓界面更輕(只是Win 7由于整個(gè)設(shè)計(jì)語言是玻璃質(zhì)感,但整體還是要比XP 時(shí)期輕很多的)。Win 10 的標(biāo)題欄和菜單欄更是結(jié)合了在一起~
2. 進(jìn)一步簡化層級(jí),使操作進(jìn)一步扁平化
無論是XP 還是Win 10,我們其實(shí)都可以看成是三個(gè)板塊(下圖),而新的設(shè)計(jì)語言將三個(gè)層級(jí)簡化為兩個(gè)層級(jí),通過左右(有點(diǎn)類似于iPad 的App 交互)展現(xiàn)任務(wù)和對(duì)應(yīng)任務(wù)的結(jié)果。
(iPad 概念設(shè)計(jì))
3. 強(qiáng)化內(nèi)容可讀性
應(yīng)該說以內(nèi)容為導(dǎo)向進(jìn)行設(shè)計(jì)一直以來是metro遵循的守則吧~大標(biāo)題、醒目的顏色等。
4.目標(biāo)導(dǎo)向設(shè)計(jì),讓界面更加干凈和高效
只在觸發(fā)到某個(gè)任務(wù)時(shí)才展現(xiàn)相關(guān)操作,這樣就不用把所有的功能按鈕都羅列出來,使界面更加Clean,操作更加的渾然天成.
5. 弱質(zhì)感帶來的高級(jí)感
說到這個(gè)“毛玻璃”質(zhì)感~最開始應(yīng)該確實(shí)是微軟先弄出來的,當(dāng)時(shí)候Vista的出現(xiàn),還確實(shí)是讓眼前一亮的~只是過去的設(shè)計(jì)太粗糙了,那么粗的描邊、那么亮的內(nèi)發(fā)光,那么黑的陰影... 并且那個(gè)毛玻璃效果不夠“毛”,而且純屬裝飾,沒有什么實(shí)際用處。
(Win7界面)
然而比較搞笑的是,自家發(fā)明的毛玻璃效果被競爭對(duì)手蘋果抄了去,而且青出于藍(lán),這讓微軟情何以堪啊。據(jù)說微軟將這個(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ì)語言將會(huì)出現(xiàn)在 2017 年秋季正式推送升級(jí)的 Windows 10 Redstone 3 上,也許廣大 Windows 粉絲只要再耐心等待一段時(shí)間,就能看見更全面的 Project NEON 設(shè)計(jì)成果。
其實(shí)我看了這幾張圖覺得曝光的太少了,于是我又跑去各種搜索國外大神的概念設(shè)計(jì)。嘿嘿,還真被我搜到了不少,下面分享給大家,超贊的。
歡迎關(guān)注作者的微信公眾號(hào):折騰先生
「2017年,設(shè)計(jì)師不得不看的趨勢好文」
- 設(shè)計(jì)師轉(zhuǎn)型丨《2017年設(shè)計(jì)師該如何轉(zhuǎn)型?來看阿里UED掌門人的演講!》
- 流行色運(yùn)用丨《玩轉(zhuǎn)草木綠!在這里了解2017的年度潘通流行色》
- UI 設(shè)計(jì)風(fēng)格丨《2016年最火的對(duì)話式UI,2017年會(huì)走向何處?》
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱:yuan@uisdc.com】
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺(tái),專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書:史上最全的設(shè)計(jì)師圖書導(dǎo)航:http://hao.uisdc.com/book/。
設(shè)計(jì)微博:擁有粉絲量180萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ,歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航:全球頂尖設(shè)計(jì)網(wǎng)站推薦,設(shè)計(jì)師必備導(dǎo)航:http://hao.uisdc.com
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場,未經(jīng)允許不得轉(zhuǎn)載。
發(fā)評(píng)論!每天贏獎(jiǎng)品
點(diǎn)擊 登錄 后,在評(píng)論區(qū)留言,系統(tǒng)會(huì)隨機(jī)派送獎(jiǎng)品
2012年成立至今,是國內(nèi)備受歡迎的設(shè)計(jì)師平臺(tái),提供獎(jiǎng)品贊助 聯(lián)系我們
AI輔助海報(bào)設(shè)計(jì)101例
已累計(jì)誕生 753 位幸運(yùn)星
發(fā)表評(píng)論
↓ 下方為您推薦了一些精彩有趣的文章熱評(píng) ↓