中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

蘋(píng)果的Vision Pro發(fā)布之后，隨之而來(lái)的討論之一，就有如何才能在新的計(jì)算平臺(tái)上做好相應(yīng)設(shè)計(jì)。在本篇文章里，作者就從icon設(shè)計(jì)、UI設(shè)計(jì)、顏色和字體等四個(gè)維度，對(duì)VisionOS設(shè)計(jì)原則進(jìn)行了深度解讀，一起來(lái)看看吧。

今天想和大家聊聊UI方面的設(shè)計(jì)規(guī)范和原則。新的計(jì)算平臺(tái)帶來(lái)了新的設(shè)計(jì)原則，需要你提前做好準(zhǔn)備。

或許短期內(nèi)你不會(huì)涉及到新平臺(tái)的具體設(shè)計(jì)，但設(shè)計(jì)底層邏輯都是相通的，從蘋(píng)果的這些設(shè)計(jì)思想中，一樣可以學(xué)以致用到你的現(xiàn)在項(xiàng)目中。

蘋(píng)果這次發(fā)布會(huì)后，我也去網(wǎng)上搜了下，大部分人對(duì)這個(gè)產(chǎn)品在軟件UI上的視覺(jué)印象，最直觀的記憶點(diǎn)就是毛玻璃。

它的學(xué)名是叫類(lèi)玻璃柔光材質(zhì)，在設(shè)計(jì)中也叫玻璃擬態(tài)?？梢灶A(yù)見(jiàn)的是，在接下來(lái)的XR中會(huì)是一個(gè)主導(dǎo)地位的設(shè)計(jì)趨勢(shì)。

從設(shè)計(jì)理念來(lái)看，喬布斯一直追求一種極致簡(jiǎn)約的風(fēng)格，這種簡(jiǎn)約除了體現(xiàn)在產(chǎn)品設(shè)計(jì)上，連店面設(shè)計(jì)上也體現(xiàn)出高水平的協(xié)同。其中，玻璃擬態(tài)風(fēng)格貫穿了整個(gè)蘋(píng)果系列，甚至統(tǒng)一到了線下實(shí)體店。

蘋(píng)果的設(shè)計(jì)不止步與玻璃擬態(tài)，其System UI同樣具備很多值得學(xué)習(xí)借鑒的優(yōu)秀設(shè)計(jì)原則。

如何分析設(shè)計(jì)風(fēng)格？我將從Icon設(shè)計(jì)、UI設(shè)計(jì)、顏色以及字體4個(gè)維度，由表及里的思考它的設(shè)計(jì)以及對(duì)我們后續(xù)設(shè)計(jì)的啟發(fā)。

一、圖標(biāo)設(shè)計(jì)

在主場(chǎng)景和其他界面上的應(yīng)用圖標(biāo)設(shè)計(jì)和系統(tǒng)圖標(biāo)設(shè)計(jì)，整體上能看到蘋(píng)果設(shè)計(jì)體系下的高度一致性。

由于應(yīng)用圖標(biāo)的效果看起來(lái)和其他平臺(tái)有些不一樣，所以Apple官方也有給出了它的設(shè)計(jì)流程。

從分解過(guò)程中能發(fā)現(xiàn)，基本上還是按2D的設(shè)計(jì)方法去做，只不過(guò)為了加強(qiáng)它的深度感，配合眼動(dòng)的交互效果。通過(guò)圖層分層來(lái)體現(xiàn)它的3D層次感，把圖標(biāo)分為至多3個(gè)層：一個(gè)背景層和2個(gè)前景層。

然后，把分層的圖標(biāo)切圖放進(jìn)蘋(píng)果圖標(biāo)系統(tǒng)里，VisionOS就能自動(dòng)對(duì)圖層進(jìn)行圓形裁切和增加玻璃材質(zhì)。

從蘋(píng)果分享出來(lái)的設(shè)計(jì)效果和設(shè)計(jì)流程拆解，我從中思考了關(guān)于VisionOS圖標(biāo)設(shè)計(jì)的8個(gè)最主要的設(shè)計(jì)原則，原則具備通用性和可借鑒，在其他項(xiàng)目中很多也是可以用上的。

這些設(shè)計(jì)原則可以幫助我們更好的在XR中進(jìn)行設(shè)計(jì)，包括：

• 熟悉感
• 跟隨眼動(dòng)
• 一致性
• 清晰性
• 深度感
• 易讀性
• 平衡性
• 模組化

下面我也逐一和你分享要如何思考和應(yīng)用這些設(shè)計(jì)原則幫助我們自己的設(shè)計(jì)。

1. 熟悉感

熟悉感，這個(gè)設(shè)計(jì)原則旨在降低用戶(hù)學(xué)習(xí)成本，尤其對(duì)于新設(shè)備來(lái)說(shuō)，這一點(diǎn)尤其重要。

雖然是全新的空間計(jì)算設(shè)備，但仍然保留了很多我們熟知的設(shè)計(jì)手法和元素。

不論是對(duì)于用戶(hù)來(lái)說(shuō)，還是專(zhuān)業(yè)的設(shè)計(jì)師或開(kāi)發(fā)者來(lái)說(shuō)，都有一種熟悉感，便于普通用戶(hù)和專(zhuān)業(yè)用戶(hù)上手。

就像我們?cè)谧銎渌a(chǎn)品的設(shè)計(jì)改版一樣，斷層的變化會(huì)讓用戶(hù)不知所措，無(wú)端增加用戶(hù)的學(xué)習(xí)成本。

很多用戶(hù)習(xí)慣和認(rèn)知，經(jīng)過(guò)這么多年的互聯(lián)網(wǎng)產(chǎn)品的推廣與應(yīng)用，已經(jīng)被教育地相當(dāng)成熟，所以在蘋(píng)果這里的設(shè)計(jì)也應(yīng)用了這一原則。

應(yīng)用圖標(biāo)的延續(xù)

2. 跟隨眼動(dòng)

新的圓形應(yīng)用圖標(biāo)更適合眼動(dòng) ，兼容了全新的眼動(dòng)交互，交互動(dòng)效上更符合人類(lèi)直覺(jué)的設(shè)計(jì)。在熟知的2D設(shè)計(jì)方法上新增了3D效果，以圖層的分離突出這種設(shè)計(jì)新形式。

圖標(biāo)在動(dòng)畫(huà)和角度上都會(huì)跟隨用戶(hù)的眼睛。雖然為了讓用戶(hù)對(duì)新的圖標(biāo)有熟悉感，但在延續(xù)性的基礎(chǔ)上也做了一些新的變化。把圖標(biāo)的背板做了從矩形到圓形的變化。

圓形相較于之前的圓角矩形，更容易讓用戶(hù)眼神聚焦。

當(dāng)用戶(hù)的眼睛看向圖標(biāo)時(shí)，圖標(biāo)也會(huì)給與用戶(hù)角度和分層的變化，再通過(guò)投影和高光進(jìn)行空間感的強(qiáng)化。

這就像是你看向朋友，然后朋友也會(huì)對(duì)你回眸一笑，符合用戶(hù)的功能訴求和情感訴求。

3. 一致性

在iOS13之前，當(dāng)把系統(tǒng)圖標(biāo)放在一起看時(shí)，從設(shè)計(jì)專(zhuān)業(yè)上看會(huì)有不少問(wèn)題。比如線面穿插也就算了，粗細(xì)也各不相同，在視覺(jué)上的一致性其實(shí)并不算嚴(yán)謹(jǐn)。這些問(wèn)題在后續(xù)的更新中也得到了優(yōu)化。

但其實(shí)就算看最新的系統(tǒng)，也依然會(huì)有線面組合的情況，哪怕在一個(gè)控制中心也會(huì)有這樣的不一致。

是蘋(píng)果不用心做視覺(jué)嗎？它的策略到底是什么？我覺(jué)得其實(shí)是蘋(píng)果一直在做取舍和平衡。

蘋(píng)果對(duì)于一致性的理解是功能的一致性高于視覺(jué)的一致性，識(shí)別的效率性，系統(tǒng)級(jí)的圖標(biāo)永遠(yuǎn)是為了更好的服務(wù)于用戶(hù)。

比如手機(jī)上計(jì)算器和相機(jī)的應(yīng)用圖標(biāo)，映射到系統(tǒng)級(jí)圖標(biāo)時(shí)，保持了最大程度上的一致性，都應(yīng)用了面型圖標(biāo)，雖然這與系統(tǒng)全局的一致性相比就弱一些。

4. 清晰性

熟悉的隱喻。當(dāng)一個(gè)圖標(biāo)使用了一個(gè)不熟悉的隱喻，它很難被理解。圖標(biāo)在發(fā)展歷史中，抽象的符號(hào)被反復(fù)使用，逐漸標(biāo)準(zhǔn)化，從而建立了共同的理解。

比如像下面這個(gè)例子，從左到右，圖標(biāo)的清晰度是越來(lái)越差的，因?yàn)閳D標(biāo)所代表的含義越來(lái)越復(fù)雜，不容易被理解。

圖標(biāo)被設(shè)計(jì)最成功的情況是不僅對(duì)一群人來(lái)說(shuō)很容易理解，且在不同文化，年齡和背景下都是通用的。Apple icon大多用到了非常熟悉的隱喻，它很容易被理解。在vision OS中，這種清晰性得到了繼承。

5. 深度感

系統(tǒng)通過(guò)增加陰影和高光來(lái)體現(xiàn)各層之間的深度感并使用上層的 Alpha 通道打造3D感外觀，增強(qiáng) App 圖標(biāo)的視覺(jué)維度。

深度感是XR場(chǎng)景特有的設(shè)計(jì)，利用多圖層設(shè)計(jì)出3D層次感。在vision os這里的深度感是為了強(qiáng)化圖標(biāo)帶來(lái)的反饋，提升易用性。

6. 易讀性

恰當(dāng)?shù)丶?xì)節(jié)和對(duì)比度易于閱讀。保持圖標(biāo)簡(jiǎn)潔，左邊的圖標(biāo)比較復(fù)雜，反而表達(dá)的含義是不易讀的，右側(cè)提煉后的圖標(biāo)會(huì)有更高的易讀性。

在XR中，因?yàn)橛薪鼒?chǎng)和遠(yuǎn)場(chǎng)的關(guān)系，圖標(biāo)中的縫隙也需要注意，縫隙太小會(huì)造成易讀性降低。

圖標(biāo)的對(duì)比度也需要注意，使用透明度的圖層后造成對(duì)比度較小，造成圖標(biāo)不易讀。

7. 平衡性

圖標(biāo)視覺(jué)平衡，對(duì)齊視覺(jué)元素。以眼睛檢查，用戶(hù)的感受為準(zhǔn)。蘋(píng)果不允許圖標(biāo)中心物件太靠近底板邊緣。

圖標(biāo)的平衡性非常重要，為了確保每個(gè)圖標(biāo)視覺(jué)平衡，需要在視覺(jué)上對(duì)齊元素。

在播放這個(gè)圖標(biāo)中，三角形雖然在數(shù)字上對(duì)齊了，但眼睛告訴我們并不平衡。三角形較寬的部分感覺(jué)比較“重”，使得它好像在向左傾斜。

就像字體設(shè)計(jì)師做精細(xì)的調(diào)整來(lái)設(shè)計(jì)字體視覺(jué)平衡一樣。不能單純的相信嚴(yán)謹(jǐn)?shù)臄?shù)字，最終要以人的感受為主。

8. 模組化

蘋(píng)果把應(yīng)用圖標(biāo)的設(shè)計(jì)做成了模組化，利用2D設(shè)計(jì)流程和底層3D模組效果，降低制作成本。一個(gè)優(yōu)先的設(shè)計(jì)必須兼顧到商業(yè)，服務(wù)好整個(gè)生態(tài)是優(yōu)秀設(shè)計(jì)的必要條件。

圖標(biāo)不僅要對(duì)用戶(hù)友好，對(duì)生產(chǎn)端也需要友好，某種程度上生產(chǎn)端也是用戶(hù)，他們也需要好的體驗(yàn)，這樣整個(gè)生態(tài)系統(tǒng)才會(huì)是良性發(fā)展。

在制作上仍然保留了很多我們熟知的設(shè)計(jì)手法和元素，使得內(nèi)容生產(chǎn)的成本降低，把盡可能多的效果進(jìn)行組件化，比如投影，玻璃材質(zhì)等這些復(fù)雜的效果用程序?qū)懙搅讼到y(tǒng)層。

除了自身的內(nèi)容生產(chǎn)成本較低，在第三方應(yīng)用兼容上也非常方便易用，能盡可能地讓更多生產(chǎn)用戶(hù)入局設(shè)計(jì)。

二、UI設(shè)計(jì)

接下來(lái)我們一起來(lái)看看UI界面的設(shè)計(jì)，我截取了最有代表性的一些UI設(shè)計(jì)。

蘋(píng)果官方也給出了它們的UI組件庫(kù)，包括sketch和figma源文件。

分析發(fā)現(xiàn)它的制作流程，使用軟件，甚至連尺寸大小都和2D手機(jī)上的設(shè)計(jì)保持了一致性，這進(jìn)一步降低了內(nèi)容制作和遷移成本，把一些復(fù)雜的效果進(jìn)行剝離，在系統(tǒng)級(jí)上進(jìn)行添加。

關(guān)于UI，也按前面的分析框架總結(jié)出了8個(gè)最主要的設(shè)計(jì)原則，包括：

• 熟悉感
• 突出內(nèi)容
• 以人為中心
• 空間感
• 深度感
• 自適應(yīng)
• 易讀性
• 模組化

可以看到有不少是和圖標(biāo)設(shè)計(jì)相類(lèi)似的。

1. 熟悉感

通過(guò)延續(xù)熟悉的設(shè)計(jì)方法，降低用戶(hù)的學(xué)習(xí)成本。在UI元素排布上，能看到Mac和手機(jī)的布局在visionOS中得到了統(tǒng)一和延續(xù)。

2. 突出內(nèi)容

把界面中的操作和內(nèi)容分開(kāi)，保證內(nèi)容顯示最大化。

這個(gè)設(shè)計(jì)在XR場(chǎng)景中是一個(gè)比較創(chuàng)新的設(shè)計(jì)方案，因?yàn)樗膱?chǎng)景會(huì)比在PC或手機(jī)中的顯示范圍會(huì)大的多，如果把操作欄和內(nèi)容都放在同一個(gè)界面中，可能會(huì)造成操作欄過(guò)大，干擾內(nèi)容不說(shuō)還會(huì)不方便操作。

在Safari中，導(dǎo)航欄與網(wǎng)頁(yè)分開(kāi)，讓網(wǎng)頁(yè)成為焦點(diǎn)。

3. 以人為中心

減少用戶(hù)移動(dòng)幅度，提升舒適性。

內(nèi)容設(shè)計(jì)在布局上盡量居中，比如在Safari中，當(dāng)人們想要一次看到他們所有的標(biāo)簽時(shí)，蘋(píng)果將它們展開(kāi)成一個(gè)網(wǎng)格。以配合人們的視野。標(biāo)簽按比例縮小，這樣它們就不會(huì)離中心太遠(yuǎn)，而兩側(cè)的標(biāo)簽向內(nèi)，這樣更容易閱讀。

玻璃材質(zhì)的運(yùn)用，降低了用戶(hù)心理壓力，提升掌控感與舒服度。為什么這么說(shuō)？玻璃材質(zhì)讓人們對(duì)周?chē)h(huán)境有更多的掌控力，能清楚的知道自己所處的位置，并讓UI適應(yīng)不同的照明條件。

考慮到用戶(hù)心理，太多不透明的窗口會(huì)讓人感覺(jué)狹窄，讓界面感覺(jué)沉重。這個(gè)在MR場(chǎng)景中的設(shè)計(jì)非常關(guān)鍵。

4. 空間感

通過(guò)透明、光照環(huán)境和陰影效果，打造很強(qiáng)的空間感。比如在移動(dòng)窗口時(shí)，窗口變得更加透明，很棒的小細(xì)節(jié)。

當(dāng)看電影的時(shí)候，環(huán)境光照會(huì)發(fā)生變化，調(diào)光是一種簡(jiǎn)單而有力的最大化空間的方法，即使電影可能會(huì)重疊在物理房間里，調(diào)暗也能幫助人們專(zhuān)注于內(nèi)容。

UI窗口會(huì)投射出陰影，讓用戶(hù)覺(jué)得界面似乎就真實(shí)的擺放在空間中，更直觀自然。

3D相冊(cè)設(shè)計(jì)，通過(guò)邊緣模糊，制造空間感。

5. 深度感

通過(guò)對(duì)界面進(jìn)行分層，利用深度創(chuàng)建層次結(jié)構(gòu)和引導(dǎo)用戶(hù)關(guān)注。

盡管控件很小，依然能一眼就看出它是能控制電影的。如果把控件放在電影屏幕上，它們會(huì)顯得太大，會(huì)干擾內(nèi)容。

操控元素可以保持小，但仍然比遠(yuǎn)處的大物件具有視覺(jué)優(yōu)先權(quán)。

元素之間輕微的深度利于引導(dǎo)用戶(hù)的注意力，當(dāng)一個(gè)模態(tài)出現(xiàn)時(shí)，窗口會(huì)稍微向后推以引起用戶(hù)的注意。

換句話說(shuō)，用戶(hù)需要聚焦的窗口距離并沒(méi)有發(fā)生改變。這樣在觀感上更為舒適，無(wú)需在窗口變換是反復(fù)聚焦。

6. 自適應(yīng)

UI能適配不同內(nèi)容大小，自由伸縮。沒(méi)有固定的界面尺寸，按內(nèi)容大小進(jìn)行最合適的默認(rèn)尺寸設(shè)計(jì)。

這里的默認(rèn)尺寸設(shè)計(jì)需要結(jié)合人因的研究，具體多大才是合適的，可能和手機(jī)和PC端是不同的。

一般來(lái)說(shuō)，在MR場(chǎng)景中中心視野最好，重要的內(nèi)容優(yōu)先放中間。用戶(hù)的視野在場(chǎng)景中也比較寬，橫向的布局可能會(huì)更好一些。

7. 易讀性

合適的對(duì)比度易于閱讀，這里的一些對(duì)比度策略是按mac和手機(jī)OS上的類(lèi)似的WCAG標(biāo)準(zhǔn)來(lái)做的。更多的建議可以去蘋(píng)果的設(shè)計(jì)規(guī)范中查看。

8. 模組化

蘋(píng)果也把UI這里的設(shè)計(jì)進(jìn)行了模組化，按2D設(shè)計(jì)流程+系統(tǒng)級(jí)玻璃材質(zhì)+動(dòng)態(tài)光影變化+投影。

同圖標(biāo)一樣，也是把簡(jiǎn)單的設(shè)計(jì)流程留給了生成者，把其他各種復(fù)雜的效果做到了系統(tǒng)層，然后可以自動(dòng)添加這些效果。

這樣做保持了系統(tǒng)的風(fēng)格一致性和可控的設(shè)計(jì)品質(zhì)。相對(duì)于安卓端的百花齊放，apple這邊是其獨(dú)有的優(yōu)勢(shì)。

三、字體設(shè)計(jì)

字體設(shè)計(jì)，由于在玻璃材質(zhì)可能會(huì)導(dǎo)致字體的可讀性變差，所以蘋(píng)果也做了一些規(guī)范限定。在字體上也繼續(xù)沿用了蘋(píng)果字體，只不過(guò)在把普通應(yīng)用遷移到vision OS上時(shí)，需要加粗一號(hào)。

比如在手機(jī)上是Regular字體，那么在vision OS中就用加粗一號(hào)用Medium。

在XR中，對(duì)字體加粗的目的就在于可以給到用戶(hù)更高的易讀性。

因?yàn)樵赬R的環(huán)境中，毛玻璃需要兼容各種不同亮度環(huán)境，為了保證其可讀性，蘋(píng)果還專(zhuān)門(mén)對(duì)文字的顯示做了動(dòng)態(tài)變化。

在不同環(huán)境下，文字的亮度會(huì)動(dòng)態(tài)變化，通過(guò)實(shí)時(shí)調(diào)節(jié)文字的亮度，確保文字清晰易讀。

開(kāi)了動(dòng)態(tài)效果：

沒(méi)有使用：

在蘋(píng)果vision os中，官方給到的文字色彩是白色，然后通過(guò)不同亮度來(lái)體現(xiàn)層次變化。如果你要對(duì)文字自定義顏色，盡量別用到文字上，而是通過(guò)改變文字的容器來(lái)實(shí)現(xiàn)顏色變化，不然易讀性會(huì)有問(wèn)題。

四、顏色設(shè)計(jì)

蘋(píng)果也給出了系統(tǒng)級(jí)推薦的色彩體系，我也對(duì)這些色彩進(jìn)行了分析，大部分的色彩飽和度都比較高，當(dāng)然有一些顏色也進(jìn)行了校準(zhǔn)，飽和度略低一些。

顏色的豐富性是為了保證在各個(gè)場(chǎng)景下，都有合適的顏色可以選用，因?yàn)槭窍到y(tǒng)級(jí)的顏色，需要保證足夠的通用性。

五、設(shè)計(jì)啟發(fā)

蘋(píng)果對(duì)設(shè)計(jì)進(jìn)行了重新思考，但其實(shí)好的設(shè)計(jì)原則是具備通用性的，在新平臺(tái)中提到的這些原則，是不是都是我們熟知的一些設(shè)計(jì)原則？

在設(shè)計(jì)的時(shí)候需要多去思考設(shè)計(jì)背后的原因，比如想想蘋(píng)果為什么在這里會(huì)選擇毛玻璃效果？那是因?yàn)樵贛R場(chǎng)景下，毛玻璃解決了3D關(guān)鍵問(wèn)題：

• 讓用戶(hù)時(shí)刻對(duì)自己的位置有掌控感
• 能適配各種真實(shí)復(fù)雜光照環(huán)境
• 半透明讓用戶(hù)避免封閉感

優(yōu)秀的設(shè)計(jì)，其背后一定是它設(shè)計(jì)的理由的，優(yōu)秀的設(shè)計(jì)也一定是有意義的。

想清楚其原因，從中就能發(fā)現(xiàn)規(guī)律，并指導(dǎo)自己后續(xù)的設(shè)計(jì)，避免犯錯(cuò)。