• <center id="sm46c"></center>
  • <dfn id="sm46c"></dfn>
  • <strike id="sm46c"></strike>
  • <cite id="sm46c"><source id="sm46c"></source></cite>
    • <strike id="sm46c"><source id="sm46c"></source></strike>
      <option id="sm46c"></option>
      国产精品天天看天天狠,女高中生强奷系列在线播放,久久无码免费的a毛片大全,国产日韩综合av在线,亚洲国产中文综合专区在,特殊重囗味sm在线观看无码,中文字幕一区二区三区四区在线,无码任你躁久久久久久老妇蜜桃

      首頁

      從優秀到卓越的 UI 動畫技巧 改善 UI 微交互的實用建議。

      杰睿 設計資源

      使標簽中的內容滑動。

      將顯示縮放圖像
      左側的內容淡入淡出。右側的內容隨標簽滑動。

      連接卡片的共享元素。

      將顯示縮放圖像
      左側的內容會打開一個新的屏幕并向上滑動。右側的卡片會展開并填滿整個屏幕。

      在您的內容中使用級聯效果。

      將顯示縮放圖像
      左邊的卡片通過滑動和淡入出現。右邊的卡片具有相同的動畫,但每張卡片都有短暫的延遲。

      使內容將其他元素推開。

      將顯示縮放圖像
      左側的動畫在其他內容之上進行動畫處理。右側的動畫隨著內容的擴展而將其推出。

      使菜單在上下文中顯示。

      將顯示縮放圖像
      左側菜單從下方飛入。右側菜單從創建它的操作展開。

      使用按鈕來顯示不同的狀態。

      將顯示縮放圖像
      左側的按鈕顯示指示狀態的文本。右側的按鈕使用容器來顯示不同的事件。

      引起對重要事物的關注。

      將顯示縮放圖像
      左側的示例使用顏色和位置來突出元素。右側的示例使用微妙的動畫來吸引用戶的注意力。

      結論

      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

      ? 審美積累 | Misso 工作平臺設計賞析

      杰睿 設計資源

      信息密度高,也可以呼吸感十足。
      今天分享一組我非常喜歡的 Web UI 作品——Misso 工作效率平臺設計。項目來自 BEHANCE 上的 Dotcode Studio,主打 B 端 SaaS 場景,設計在視覺和信息組織之間達成了很好的平衡。
      這組設計最吸引我的是**「信息密度與視覺節奏的平衡」**。它大量使用網格和卡片進行內容分區,同時通過圓角、灰階配色和輕量圖標,削弱了B端界面的壓迫感。
      核心亮點:
      • 主色冷靜理性,大量留白讓復雜信息不擁擠
      • 字體層級明確,搭配簡潔圖標強化指向性
      • 模組化卡片設計,兼容多種信息類型、適配響應式場景
      • 微交互動效自然,增強可用性但不喧賓奪主
      使用感受:
      這類視覺風格在“效率類”工具平臺中非常常見,但 Misso 的版本尤其**“親切”**,不像傳統 B 端那么冷峻??梢宰鳛?CRM、任務管理、數據看板等平臺的風格參考。
      適用場景建議:
      適合 B 端 Web 產品、數據儀表盤、工作流工具等高信息密度的頁面,特別適合希望在「專業感」與「友好性」之間找到平衡的產品團隊。
      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

      以冷靜包容的視角審視蘋果史上最激進的 UI 變革

      杰睿 隨筆的一些文章

      蘋果自 2013 年發布 iOS 7 以來,在 UI 設計上做出了最大膽的嘗試,當時他們放棄了擬物化設計和隱藏紋理,轉而采用扁平化設計。多年過去了……擬物化并隱藏紋理,以支持扁平化設計。多年過去了……
      在這次深入探討中,我們將揭秘 Liquid Glass 究竟是真正的創新,還是僅僅一種光鮮亮麗的復古風。設計師可以從這種轉變中汲取哪些經驗教訓?在光鮮亮麗的背后,是否隱藏著新的、可采用的 UI 模式?這種視覺上的飛躍是否仍然具有包容性?
      “我們把屏幕上的按鈕做得如此好看,讓你忍不住想舔舔它們。” ——史蒂夫·喬布斯
      這句話并非偶然出現。在 iOS 26 中,蘋果似乎正在重現其 Aqua 時代的魅力——沒錯,我也曾被 MacOS 上那些光滑、“可舔”的屏幕氣泡所吸引。如今,這種致敬風格回歸——經過重新命名和重構——我們來認識一下 Liquid Glass?;蛘邞撜f……Lick-quid Glass。
      液態玻璃——這是蘋果對其全新數字元物質的稱呼,它為一個全新的視覺時代……或者至少是下一代 iOS 系統奠定了基調。但它不僅僅是一個閃亮的新款套件——它就像一種與系統共存、呼吸和響應的材質。
      它能彎曲光線,在觸摸下變形,并流暢地適應環境。沒錯,屏幕再次帶來令人愉悅的體驗。在一般設計中,“視覺盛宴”指的是能夠立即吸引注意力并帶來美感的視覺效果或物體。但這種美感背后隱藏著一種微妙的平衡。美學-可用性效應表明,即使功能本身沒有任何改變,我們通常也會認為有吸引力的界面更易用。我之前就寫過關于“內心愉悅”的文章。
      顯然,蘋果不僅僅是在裝飾界面——他們還將視覺享受融入到功能之中,這正是我們對現代操作系統的期望。但在深入探討細節之前,讓我們先徹底解決視覺聯想的問題。
      該圖像由 Oleg Safranov 使用 AI 生成,并經過了一些后期制作
      在像《少數派報告》這樣的科幻電影中,我們看到了漂浮在半空中的透明界面——或許這是邁向增強現實未來的一步。然而,盡管蘋果的Vision Pro可能真正將界面定位為空間層,但在其他現有設備上,這種錯覺并不完全成立。好吧,智能眼鏡仍在醞釀之中,當它們真正到來時,像這樣的半透明界面或許最終會找到真正的歸宿。
      也就是說,這些玻璃狀的 UI 元素在動態視頻背景或滾動頁面上看起來令人驚嘆——這已經是一種享受。
      該圖像由 Oleg Safranov 使用 AI 生成,并經過了一些后期制作
      我決定尋找液態玻璃元素能給用戶帶來的聯想,并聽到過類似的想法:“光滑的硬糖”、“果凍”、“肥皂滴”、“半透明的粘液”或“閃亮的軟糖塊”。圓潤、粘稠的液體外觀讓人聯想到粘稠的物質。
      有一段時間,我無法確切地定義這個界面讓我想起了什么,然后我突然明白了。就像一滴融化的(仍然清澈的)蠟燭還沒有完全凝固,就已經開始變得渾濁和半透明。它仍然柔軟,仍然溫暖,仍然略帶粘稠——但它已經開始成形了。iOS 26 中的“液態玻璃”也喚起了類似的視覺感受:介于流動性和脆弱的穩定性之間,不斷變換著它的存在感。
      蘋果強調,Liquid Glass 通過透鏡效應(光線穿過材料時發生彎曲、折射和聚焦)在視覺上呈現出獨特的質感。 蘋果設計團隊表示,這種效果在現實世界中是可以直觀識別的:就像一滴水如何聚焦陽光,或者放大鏡如何在視覺上拉近物體一樣。
      圖片來源:Apple.com / WWDC 2025 演示文稿
      如今,同樣的原理也融入到了界面設計中。不同于 iOS 7 磨砂面板(至今仍可見)帶來的背景虛化效果,液態玻璃能夠動態彎曲光線,如同現實世界中的半透明或半透明材質。因此,界面元素輪廓清晰,卻又不失輕盈。它們仿佛漂浮在內容之上——存在感十足,卻又不會分散注意力。
      蘋果建議不要堆疊此類元素,也不要到處使用液態玻璃效果,這樣界面才能與下方的扁平內容區分開來。我正在撰寫一篇深入探討全新液態玻璃設計系統和指南的文章——敬請期待。
      據蘋果公司介紹,這種透鏡效果有助于分離界面各層,從而營造自然的深度和層次感。這是一種更微妙的分離形式:不是陰影,而是微光。陰影仍然存在,但它們變得更加動態,模擬了界面水滴在內容上方移動或被移動時的起伏。此外,它們會隨著UI元素的大小而變得更加豐富。
      “Islandy”界面
      蘋果顯然更注重內容,并減少界面,這就是為什么我們可以看到界面部分變得更加緊湊和通透。
      一個突出的例子是 Safari,它的導航欄不再緊貼屏幕,而是懸浮在屏幕上方。通常,我們確實會看到更多懸浮按鈕或按鈕組,而不是緊密的導航欄。這無疑是視覺上的勝利,但也給設計師帶來了更多工作——現在你不僅要考慮靜態布局,還要考慮這些元素如何在不同狀態下隨上下文變化。
      圖片(gif)來源:Apple.com / WWDC 2025 演示文稿
      玻璃島有時會變成裝飾性的糖果,完全透明看起來很光滑,但它在繁忙的背景下會掙扎:紋理扭曲和混合,導致可讀性和對比度問題。
      歷史已經出現過這種情況。在 iOS 7 中,蘋果在透明度和細字體方面做得過頭了。這個方向很大膽,但到了 iOS 7.1(2014 年 3 月),他們開始有所收斂:添加了“降低透明度”的開關,提高了對比度,并恢復了純色背景以恢復可讀性。
      “輔助功能”設置的屏幕截圖
      是的,我們可以改進和定制外觀,使其更易用、更易于訪問,但它真的符合包容性的理念嗎?我們將在本文后面討論這個問題。
      界面感覺如此流暢、自然,并且不斷運動,以至于對一些用戶來說,它近乎不穩定:按鈕會變形為上下文菜單,元素在觸摸下像黏液一樣伸展,所有這些都伴隨著邊緣照明、光學畸變和閃爍的高光。對許多人來說,它可能看起來很動感。但對另一些人來說,它可能會讓人感到不知所措或迷失方向,尤其是對那些對運動敏感的人來說。這就是為什么像“減少運動”這樣的系統級選項仍然至關重要。
      蘋果是否真正聽取過意見?
      縱觀歷史,蘋果的每一次新品發布都會引起軒然大波,尤其是當它標志著視覺或技術層面的重大變革時。作為設計師,當這些變革影響到整個操作系統的設計語言時,我們尤其興奮。
      我至今仍記得 iOS 7 帶來的激動:視覺上的徹底革新讓你的 iPhone 煥然一新。那時候,如果你想要一個全新的界面,通常得買個新設備或者扔掉舊設備,但單是這次更新就讓你的手機看起來煥然一新。盡管它引發了大眾的強烈不滿——畢竟,熟悉才能帶來舒適感。iOS 的早期版本試圖通過模仿現實世界,讓用戶沉浸在熟悉的氛圍中——因此才有了那么多木質紋理和真實物體的模仿。
      這次,我選擇了等待。我看著各種反應紛至沓來——更多的是憤怒,更少的贊揚,以及鋪天蓋地的表情包。我給了它大約兩周的時間。既不是要抨擊它,也不是要美化它。因為設計評論的意義不在于破壞或奉獻,對吧?它關乎平衡。我想看看蘋果如何回應第一波反饋(在 Beta 2 中,他們已經調整了模糊和對比度),當然,我也想聽聽我的設計社區的意見,總結一下大家的反饋,然后再與我自己的進行比較。
      很難找到愿意捍衛玻璃方法的人,但特別是Darren Yeo 的文章證明,可以用較少的情感來分析事物,這更多地反映了批判性思維,而不是消極的反應。
      我記得亨利·福特曾經說過:“如果我問顧客想要什么,他們會告訴我一匹跑得更快的馬。”人們不知道自己想要什么,除非你把東西展示給他們看。—— 史蒂夫·喬布斯
      用UI代替AI?投資者和用戶都表示失望——他們期待的是AI,而不是一個精致或徹底改造的UI。因此,股東訴訟Tucker訴Apple Inc.等)如今成為頭條新聞,指控蘋果夸大了在上屆WWDC上發布的Apple Intelligence的功能。該訴訟聲稱蘋果缺乏整合AI的切實計劃,并認為在真正的AI功能遲遲未能推出的情況下,設計更新只是“空洞的花言巧語”。
      但公平地說,設計也是一種創新。如果蘋果真的帶來了一場視覺革命,這本身就可以算作一次突破。從設計師的角度來看,這不僅僅是“光鮮亮麗”——而是數字界面體驗和行為方式的轉變,無論是現在還是未來。
      蘋果的決策(即使是那些備受爭議的決策)往往會在整個行業引發連鎖反應。無論受到贊揚還是批評,它們都奠定了行業基調。我們一次又一次地看到,競爭對手最終也采用了類似的模式和整體風格。
      活力島——在你意想不到的地方。圖片來源:www.gizchina.com
      蘋果:“這是新界面。” 某公司:“給我兩個小時。”圖片來源:https://9gag.com/gag/awyYm9D
      我們知道,蘋果不止一次承受了眾怒——而且每一次,他們都證明了自己的舉動是經過深思熟慮的,既服務于現有的生態系統,也服務于未來的產品。如果今天他們正在構建無縫的跨設備體驗,并定義統一的設計語言,那么明天我們就會看到更廣闊的前景。
      其他公司推出了什么
      蘋果并非唯一一家試圖塑造設計未來的公司。讓我們來看看其他公司是如何做的,重點關注谷歌的 Material Expressive 和 Airbnb 的精致設計語言。
      有些設計師覺得這些圖標“過度渲染”。圖片來源:www.airbnb.com
      Airbnb 的重新設計在設計界引發了褒貶不一的評價。一方面,專業人士對帶有動態效果的新圖標(即所謂的“Lava” 3D 圖標格式)贊不絕口,稱其為“ UI 的一次大膽變革”和“圖標行為的重新定義”。這些圖標以 3D 微視頻的形式呈現,顯得生動、流暢、動感十足……而且……富有立體感。但當它們靜止不動時,是不是感覺像是回到了 CorelDRAW 時代?
      我的第一反應是,Airbnb 新圖標的復雜性感覺像是對 AI 生成圖像的直接回應。Michal Malewicz證實了我的話:https://www.youtube.com/shorts/3k3V-0dbRe8
      如今,工具讓圖標的細節和紋理更加豐富(之后還能通過AI動畫制作),設計師們幾乎被迫跟上時代的步伐,不僅在創造力上,還在Cinema 4D、Blender和非AI工具的幫助下,在復雜性上不斷提升。當視覺的豐富變得毫不費力時,極簡主義突然感覺……不夠華麗。
      然而,社區反饋,尤其是在Reddit上的反饋,凸顯了執行過程中的矛盾。一位用戶指出:“圖標看起來像插圖,而不是可操作的菜單項。”
      暫時無法在飛書文檔外展示此內容
      好的,讓我們來看看 Google 帶來了哪些新東西。 借助 Material 3 Expressive,Google 引入了超越傳統緩和曲線的運動物理系統。該系統采用基于彈簧的物理驅動運動,使交互感覺更自然、響應更靈敏、更生動。它仍然是一個生動的扁平化設計,但現在配備了全新的彈簧,在運動中熠熠生輝。
      動效再次成為視覺語言的決定性力量。對于設計師來說,這標志著一個重大轉變:動效不再僅僅是裝飾——它已成為核心設計元素。無論是通過基于彈簧的動態效果還是流體透鏡,界面如今都“感覺”生動活潑,并以符合我們身體預期的方式做出響應。谷歌利用 2D 動效為 UI 注入情感深度,而蘋果則更傾向于沉浸式的 3D/空間交互。
      平板時代終結了嗎?
      隨著 iOS 26 的截圖曝光,人們開始將其與Windows Vista進行比較:半透明面板、光澤反射、柔和陰影以及豐富的光影效果。它在 2007 年給人一種未來感,但也因耗電和給性能不足的硬件帶來過重負擔而臭名昭著。
      圖片來源:wikipedia.org
      設計師們創造了“Frutiger Aero”這個術語——一種復古未來主義的美學風格,以漸變、鏡頭光暈和超拋光玻璃表面而聞名。它融合了 Aero(不要與 Aqua 混淆)的視覺風格和 Frutiger 字體的清晰度,定義了 2000 年代中期整個 UI 文化時代。
      看似Liquid Glass擁有相同的視覺DNA,但意圖卻截然不同。Vista用玻璃般的鍍鉻裝飾了靜態UI。而iOS 26則將界面變成了一個互動式表面。這不僅僅是視覺造型——而是一種計算材質,能夠根據光線、運動和環境進行調整。Vista的UI只是閃爍的光澤,而Liquid Glass則能彎曲光線。Aero只是懸浮在空中,而Liquid Glass則能彎曲。如此這般,材質的光芒與榮耀交織——諷刺的是,盡管名字如此,但蘋果讓它感覺比谷歌的UI更“Material”。
      當然,iOS 26 繼承了玻璃態主義,并對其進行了進一步的改進。玻璃態主義本身可以看作是新擬態主義的一個子集,它借鑒了新擬態主義使用深度來定義交互的理念。我個人很欣賞使用 Z 軸來構建分層的空間界面。
      玻璃態技術的核心似乎是追求隱形。但一旦疊加了邊緣光、背景扭曲和毛玻璃效果,屏幕很快就會顯得雜亂無章,讓人分心,眼睛疲勞的速度比預想的要快。
      在很多地方,這簡直就是認知超負荷和可讀性低下的噩夢。玻璃折射需要一定的透明度才能達到最佳效果,而這種透明度會讓一半的背景顯得格格不入。
      這句話出自總是愛諷刺的米哈爾·馬勒維茨(我最喜歡的作家之一),他聲稱自己創造了“玻璃態”一詞。
      話雖如此,Liquid Glass 給人的感覺確實優雅。而且,就像所有大膽的設計革新一樣,一周后你可能就不再注意到它了。但如果視覺上的“驚艷”消退,雜亂感依然存在……我們需要時間來觀察它的效果。
      蘋果公司要求不要將玻璃堆疊在一起。圖片來源:Apple.com / WWDC 2025 演示文稿
      我們見證的只是一種新的視覺風格,還是扁平化設計的緩慢衰落?極簡主義 vs. “實體感”……非扁平化的極簡主義?光線、深度、動感、透明度——所有這些元素共同作用,讓界面感覺更生動、更真實。
      液態玻璃并不排斥極簡主義,而是增加了視覺……嗯,觸覺?“視覺觸覺” ——可以這么說嗎?
      扁平化設計會如此出乎意料地過時嗎?不會。但人們的期望正在轉變,習慣了這種新界面的用戶將開始要求一種更加感官驅動的體驗。
      Android,你走吧?
      設計變得計算化?
      “Liquid Glass” 標志著我們——界面/用戶體驗/產品設計師,以及開發者——的深刻轉變。長期以來,我們一直將設計系統視為 UI 模式、組件、指南、字體,有時還有動畫的集合。但蘋果表明,一致性不再僅僅關乎對齊和間距。
      一切始于材料本身的一致性——它的響應性、粘度以及在光線和壓力下的表現。在液態玻璃中,材料的一致性成為設計一致性的基礎。界面的彎曲、反應和適應方式成為統一設計語言的一部分——不僅體現在外觀上,還體現在它的行為和響應方式上。
      這種新型數字超材料不僅外觀獨特,其作用如同一種反應靈敏的物質,甚至如同活體。它不僅通過外觀,更通過運動傳遞靈活性和觸覺反饋。它不再僅僅是視覺上的一致性,而是計算上的一致性。
      說到這里,我們以前經常聽到蘋果公司談論計算攝影,相機不僅能捕捉世界,還能通過圖層、濾鏡和算法來解讀和計算?,F在,計算設計似乎正在興起。
      圖片來源:Apple.com / WWDC 2025 演示文稿
      液態玻璃并非一次性渲染,而是持續計算。它能夠動態適應光線、內容和環境,實時響應周圍環境和用戶輸入。這種材質會彎曲、折射和反應;它的每一個細節都經過多層計算:高光、陰影、色調亮度表面圖形
      這改變了游戲規則:界面不再僅僅是布局,而是行為。
      設計師和開發者不再專注于靜態的界面元素——我們正在塑造實時的、響應式的內容。
      暫時無法在飛書文檔外展示此內容
      Figma X 帳戶的預告片——它可以像應用效果一樣簡單嗎?
      然而,作為一名實踐型設計師,我并不喜歡現在用 Figma(或 Framer)構建高保真原型意味著需要通過疊加樣式和調整背景模糊來模擬效果。扁平化設計讓我們免去了這種麻煩。當然,Liquid Glass 的預制 UI 套件已經面世(之后還會有更多),但為了在逼真的數字環境中令人信服地呈現產品,我們現在還必須處理計算量巨大的視覺效果,這不可避免地會加重項目的負擔,更不用說最終的界面了。
      蘋果告誡設計師不要過度使用液態玻璃。然而,我們已經看到一些早期概念(例如全玻璃的 Spotify 或 Instagram 重新設計)濫用并過度使用了這些玻璃面板,將優雅變成了“視覺盛宴”。
      圖片來源:Apple.com / WWDC 2025 演示文稿
      蘋果顯然希望新版能夠快速流暢地推出。他們已經為我們無縫過渡到 Liquid Glass 做好了準備。設計師們已經提供了指南,甚至還有Icon Composer等工具來幫助應用適應新風格。對于 SwiftUI 開發者來說,只需編寫 .buttonStyle(.glass) 即可輕松上手——一行代碼即可將 Liquid Glass 應用到你的界面。我將在下一篇文章中深入探討官方指南。
      硬件能跟上 Liquid Glass 的步伐嗎?
      乍一看,玻璃界面可能只是一層視覺效果。但嘗試復制它,你很快就會意識到挑戰的規模。一位嘗試重現這種效果的 Android 開發者分享了以下內容:
      說實話,我真不知道蘋果是怎么做到的。在嘗試模仿之后(使用 AGSL 著色器——作者注),我對液態玻璃產生了全新的敬意。我猜他們也用了著色器——只是更加精妙。蘋果花了數年時間打造一個可以實現這一功能的系統。安卓系統還沒達到這個水平。也許小米或其他中國品牌會找到解決辦法。但在我們找到開源解決方案之前,在安卓系統上實現真正的玻璃形態仍然遙不可及。
      這不僅僅是令人驚艷的動畫,更是材質行為、光照、觸覺反饋和實時著色器協調一致的系統。Liquid Glass 需要強大的性能、精準的操控……以及理想的 120Hz ProMotion 顯示屏才能真正閃耀。
      圖片來源:Apple.com / WWDC 2025 演示文稿
      在 Reddit 上,一次這樣的嘗試(這次是在網絡環境中)遭遇了嚴重的限制:
      我們發現瀏覽器支持有限,這迫使我們不得不使用一些不太理想的解決方法。隨著時間的推移,WebKit 引入了 backdrop-filter CSS 屬性,但它仍然是性能殺手——瀏覽器每次滾動時都必須重新計算模糊效果。也許 Apple 已經在其設備上對此進行了優化,但我強烈建議任何在 Apple 以外的平臺上構建 Liquid Glass 設計的人都進行徹底的性能測試。
      看來,蘋果的硬件和軟件的緊密結合再次為其帶來了優勢。
      半透明還是透明?讓我們來聊聊無障礙
      如今,蘋果 經常被譽為包容性設計的領導者,但這種聲譽是隨著時間的推移逐漸積累起來的。在上世紀八九十年代,視力受損人士幾乎沒有內置的輔助功能。他們不得不依賴 Echo II 等第三方屏幕閱讀器——而且即使是這些閱讀器也并不總是能正常工作。雖然 Windows 用戶受益于 JAWS 和 Window-Eyes 等更成熟的工具,但蘋果卻落后了。他們在輔助功能方面的首次重大嘗試——OS X 10.2 Jaguar 中的Universal Access——漏洞百出且不可靠。
      直到 OS X 10.4 Tiger 和 iPhone 3GS 的推出,一個新時代才開啟:VoiceOver被集成到系統中,盲文顯示器也得到了支持,縮放功能也成為原生功能。2013 年,蒂姆·庫克表示:“當我們致力于讓設備無障礙時,投資回報率 (ROI) 并不重要。我們這樣做是因為這是公平且正確的。”
      圖片來源:Apple.com / WWDC 2025 演示文稿
      在 WWDC 上,Apple 強調了其對無障礙功能的承諾。他們推出了輔助訪問等功能,方便認知障礙用戶使用,并展示了一系列新工具:眼動追蹤、車輛運動提示、個人語音、實時語音、桌面放大鏡、盲文訪問等等。此外,App Store 中推出的無障礙營養標簽也體現了他們向更高透明度邁進的決心。Apple 將此視為一項重要的組織優先事項:“無障礙是我們一切工作的一部分”,并通過專門的 WWDC 會議、實踐實驗室和持續的推廣活動來強化這一點。
      我將在下一篇文章中深入探討 Apple 在 WWDC 2025 中推出的無障礙更新。
      與所有擔憂相反, WWDC 25 上發布的新內容有很多值得探索的地方,其中只有一個亮點:蘋果現在允許用戶僅使用眼睛來控制他們的 iPhone 或 iPad——由于內置的眼動追蹤技術,不需要額外的硬件。
      但看著Liquid Glass,卻有一種令人不安的似曾相識的感覺。蘋果或許又一次陷入了困境:視覺上的愉悅可能會掩蓋視力受限用戶的需求。
      iOS 26 beta 2 已經帶來了一些改進。圖片來源:9to5google.com(左)和 macrumors.com(右)。
      蘋果提供了調整“液態玻璃”外觀的選項——降低透明度、增強對比度或減弱動態效果。任何人都可以隨時在設置中修復這個問題。這很有幫助。但這也暴露了一個更深層次的問題。
      圖片來源:Apple.com / WWDC 2025 演示文稿
      在包容性設計中,用戶不應該為了查看界面而調整設置。好的設計默認就具有包容性,無需切換、濾鏡或疊加層。Liquid Glass 賦予用戶更多控制權,這值得稱贊。但它也提醒我們:可訪問性并非一項額外功能,而是一條底線。視覺上的愉悅永遠不應以犧牲清晰度為代價,尤其是在我們討論視覺障礙時。
      對于普通用戶來說,Liquid Glass 或許只是一種炫目的設計噱頭。但專業設計社區卻對此有不同的看法。熟悉WCAG(Web 內容可訪問性指南)的人會從包容性的視角來看待這類界面。
      根據指南,常規文本的最小對比度應該是4.5:1 ,對嗎?但是,如果背景本身是一個不斷移動的半透明層——模糊并滲透到其下方的所有內容,會發生什么?
      蘋果提供了動態圖形顏色反轉功能,以便根據背景調整按鈕對比度。但在實際應用中,此功能在較為靜態的場景中并不總是有效——例如,在通知中,我們已經看到過不僅對比度極低,而且全白的情況。
      “好的設計是無形的。” ——迪特·拉姆斯
      但它也不應該是不可讀的。我相信我們會看到修復的。
      圖片來源:Apple.com / WWDC 2025 演示文稿
      液態玻璃模仿了現實世界的透鏡效應——蘋果設計團隊自己也指出了液滴如何彎曲光線,或者透鏡如何拉近物體。但如果這真的像透鏡一樣,為什么它不像真正的透鏡那樣翻轉遠處物體的圖像呢?好吧,我想我可能有點過度分析了。
      在 iOS 26 中,由液態玻璃鑄造而成的按鈕表現有所不同——為了營造更清晰的狀態,這種扭曲會以奇怪的方式扭曲背景,繪制出令人分心的圖案。這既缺乏視覺說服力,也缺乏光學準確性。這些扭曲會造成視覺噪音,讓眼球充斥著毫無用處的圖案。隨著時間的推移,這種壓力會逐漸累積,使界面感覺更像是視覺混亂,而非精致的致敬之作。
      最后——如果有人只是不喜歡玻璃表面怎么辦?無論是完全透明還是部分透明,單色還是飽和色,這個新界面可能感覺就像他們從未要求安裝的視覺“皮膚”。而且,它沒有“恢復平面”的開關。
      蘋果是不是徹底扼殺了扁平化設計?或許并非完全如此——但他們確實讓界面變得生動活潑,更具沉浸感。這是產品,是戰略,是設計創新……才是賣點。是產品、是策略、是設計創新……才是銷售的關鍵。
       
      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

      14 個邏輯驅動的 UI 設計技巧,助您改善任何界面

      杰睿 設計思維

      設計用戶界面絕非易事。布局、間距、字體和顏色的選擇數不勝數,很容易讓人不知所措。而當你考慮可用性、可訪問性和用戶心理等因素時,挑戰只會越來越大。
      但好消息是,UI 設計其實沒那么復雜。從事產品設計師二十多年,我發現我的大部分視覺和交互設計決策都遵循一套清晰的邏輯準則。這些準則并非源于藝術天賦或直覺,而是直截了當的指導原則。
      當然,創意天賦固然有用,但很多讓界面直觀、包容、賞心悅目的元素絕對是可以學習的。擁有結構化的方法能讓你做出明智、一致的設計選擇。如果沒有它,你基本上只能依靠反復試驗來讓事情“看起來正確”。
      最好的學習方法是什么?實踐出真知。那就讓我們深入探討一些實用的 UI 設計技巧吧。
      修復示例界面的 UI 設計技巧
      以下設計是一個社區博客平臺的個人資料頁面。第一個示例是原始設計。第二個示例是快速應用一些邏輯驅動的 UI 設計技巧的結果。
      即使你沒有太多的UI設計經驗,你大概也能看出最初的設計感覺不太“對勁”。這是因為它包含許多設計缺陷,可能會對可用性產生負面影響。你可能已經發現了其中一些。
      現在,讓我們逐步了解改進原始設計的過程,并使用這些 UI 設計技巧逐步解決每個問題:
      根據元素之間的密切關系來劃分空間
      界面元素之間的間距大小應取決于元素之間的關聯程度。關聯程度越高的元素通常應該靠得更近,以顯示它們的關聯性。不相關的元素之間應留出更多空間來分隔。
      以這種方式使用間距是將信息拆分成更小組別的最有效方法之一。如果你將每個組想象成一個矩形,你會注意到界面是由許多小矩形套在更大的矩形中構成的。首先在最內側的矩形上應用較小的間距,然后隨著向外移動,逐漸增加矩形之間的間距。
      確定界面元素之間的理想間距可能是一項令人沮喪且耗時的任務。有無數的選項可供選擇。與其一次一個像素地反復嘗試,不如創建一組簡單的預定義間距選項,以便更快地做出決策。
      設置簡單 T 恤尺寸的間距選項,以 8 點為增量。這也稱為使用 8 點網格,因為所有界面元素最終都會與一系列以 8 點為間隔的垂直和水平輔助線對齊。對于更詳細的界面,您可以使用 4 點為增量,以便更好地控制。
      與排版比例尺類似,間距選項應該隨著元素尺寸的增大而相應增大。這可以確保間距與較大的界面元素成比例。
      在我們的示例中,無論矩形之間的關聯程度如何,它們之間都只使用了預定義的超小間距 (8pt) 和小間距 (16pt)。這會導致設計看起來雜亂、擠壓,并且難以理解。根據元素之間的關聯程度增加間距有助于清晰地區分和分組內容。
      以下是應用預定義間距選項之前和之后的示例。
      2.確保界面元素具有 3:1 的對比度
      對比度是衡量兩種顏色之間感知亮度差異的指標。它以 1:1 到 21:1 之間的比例表示。例如,黑色背景上的黑色文本對比度最低,為 1:1;而白色背景上的黑色文本對比度最高,為 21:1。有很多工具和Figma 插件可以幫助你測量色彩對比度,我最喜歡的是Web AIM 在線對比度檢查工具Figma Contrast 插件。
      為了確保視障人士能夠清晰地查看界面細節,請至少滿足Web 內容無障礙指南 (WCAG) 2.1 AA 級色彩對比度要求。這意味著,表單字段和按鈕等用戶界面元素的對比度至少需要達到 3:1。
      在我們的示例中,圖標和按鈕的對比度太低。低對比度按鈕的風險在于,視力較差的人可能無法識別它們是按鈕,因為他們看不清按鈕的形狀。為按鈕添加對比度足夠的邊框,可以提高可訪問性。按鈕的淺灰色背景填充也被移除,這樣人們就不會誤認為它們處于禁用狀態或非活動狀態。圖標的低對比度問題可以通過使用深灰色輕松解決。
      使用單個主按鈕執行最重要的操作
      對于大多數網站或應用項目,您需要設置三個按鈕權重來指示操作的重要性:主要、次要和第三級。根據界面的復雜程度,您可能還需要較小或較大的按鈕尺寸。
      以下按鈕樣式熟悉易用,且具有清晰的視覺層次,并非僅僅依賴于顏色。它們并非設計按鈕樣式的唯一方法,但卻是一種安全的選擇。了解更多按鈕設計技巧,以避免常見錯誤。
      主按鈕的目的是突出顯示界面上最重要的操作。這有助于人們了解下一步該做什么才能完成他們的任務。
      使用主按鈕的指南:
      如果界面上沒有最重要的操作,請對這些操作使用二級或三級按鈕。
      避免在屏幕上使用多個主要按鈕。它們會爭奪注意力,并導致用戶對下一步操作感到困惑。
      在我們的示例中,我們假設“關注”操作是最重要的,并將其作為主要按鈕。
      確保按鈕具有足夠的目標尺寸
      與大目標相比,小目標更難點擊或觸摸。對于運動控制能力受損的人,或者單手用拇指握住手機的人來說尤其如此。
      嘗試并遵循以下準則,以確保按鈕(和其他交互元素)具有足夠的目標尺寸:
      按鈕尺寸至少為 48pt x 48pt。這與 8pt 網格對齊,并且略大于 WCAG 建議的 44pt x 44pt。
      使常用按鈕更大,以提高效率并避免錯過它們。
      按鈕之間至少間隔 8pt,以防止人們誤按錯誤的按鈕。
      在我們的示例中,兩個按鈕的目標尺寸已經足夠,但仍有足夠的空間來加寬按鈕。由于還有空間,您可以加寬按鈕以增加其目標尺寸。
      5.確保重要內容可見
      人們不會使用他們看不到的東西。將內容隱藏在交互式菜單后面是保持界面簡潔簡潔的便捷方法,但這存在風險,因為有些人可能會忽略這些內容。如果空間允許,請盡量確保重要的內容和操作在需要時清晰可見。
      在我們的示例中,操作隱藏在交互式菜單中,以幫助簡化設計。雖然看起來簡潔明了,但存在一些風險,可能會讓用戶錯過這些操作。由于需要留出空間來顯示“分享”和“收藏”這兩個操作,因此請將它們顯示出來,以確保用戶不會錯過。
      減少大文本的字母間距
      讓大標題看起來更好的一個小技巧是減小字母間距(字母之間的空間)。減小字母間距的程度取決于字體和大小,但通常情況下,文本越大,減小字母間距的幅度就越大。
      這是因為許多字體設計用于長篇正文的小字號閱讀。它們被稱為“正文型”字體,字母間距較大,以便在小字號下更易辨認。對于“顯示型”字體,您可能不需要減小字母間距,因為它們設計用于大字號,通常字母間距較小。
      在我們的例子中,人名的字母間距減小了,以提高美觀度。
      不要僅僅依賴顏色作為指標
      不要僅僅依靠顏色來傳達含義或區分視覺元素,因為視力低下或色盲的人可能無法看到指示符。使用其他視覺提示來區分界面元素。
      在我們的示例中,有兩個地方可能會令人困惑。讓我們來更清楚地解釋一下。
      如果您查看文章列表上方的 3 個標簽頁,可能不太容易看出“文章”是被選中的標簽頁。這是因為標簽頁的顏色差異非常細微,用于指示選中狀態。在選中的標簽頁上添加下劃線有助于使其更加清晰。
      同樣,在底部導航中,我們采用了微妙的顏色變化來區分所選圖標和其他圖標。為了更加明顯,所選圖標被填充了顏色。
      盡量避免使用多重對齊
      使用的對齊類型越多(左對齊、右對齊或居中對齊),界面看起來就越復雜、越混亂。我們的眼睛在移動時,為了跟上每種對齊方式,不得不更加費力。當界面中的一個小組件或部分使用多種不同的對齊方式時,這一點尤為突出。
      堅持單一對齊方式(或盡可能少的對齊方式)有助于簡化界面,使其看起來更整潔。
      在我們的示例中,標簽頁居中對齊,而頁面上的大多數其他元素則左對齊。這種混合對齊方式增加了不必要的復雜性,導致認知負荷(使用界面所需的腦力)略有增加。將標簽頁左對齊有助于保持界面整潔。
      確保文本對比度為 4.5:1
      為了幫助確保有視力障礙的人能夠清晰地閱讀文本,它需要滿足以下 WCAG 2.1 AA 級對比度要求:
      小文本(18px 及以下)需要至少 4.5:1 的對比度。
      大文本(粗體字重 18px 以上或常規字重 24px 以上)需要至少 3:1 的對比度。
      在我們的示例中,未選中選項卡上的小文本對比度不足。使用較深的灰色可以提供足夠的對比度。
      10.考慮移除容器以簡化界面
      將信息分解成更小的相關元素組有助于構建和組織界面,讓人們更快、更容易地理解和記憶。
      您可以使用以下方法對相關元素進行分組:
      將相關元素放在同一容器中
      空間相關元素緊密相連
      使相關元素看起來相似
      將相關元素對齊成一條連續的線
      使用容器是分組界面元素最有效的視覺提示,但它可能會造成不必要的混亂。尋找機會使用其他分組方法,它們通常更巧妙,有助于簡化設計。
      在我們的示例中,每篇文章周圍的容器是不必要的,因為已經使用了多種其他分組方法。移除容器還可以為內容騰出更多空間。
      僅使用常規和粗體字體
      雖然某種字體有很多種粗細,但這并不意味著你需要在 UI 設計中全部使用它們。使用過多不同的粗細會給界面帶來干擾和混亂,也會使統一使用每種粗細變得更加困難。
      僅使用常規和粗體字重,保持設計系統簡潔明了。某些字體提供半粗體選項,如果粗體字重過重,可以使用半粗體代替。
      快速使用提示:
      使用粗體字體來強調標題。
      對于其他較小的文本,請使用常規字體粗細。
      如果您決定使用非常細或粗的字體,請將它們保留用于標題和較大的文本,因為它們在較小的尺寸下可能難以閱讀。
      在我們的示例中,文章詳情使用了三種不同的字體粗細。即使“超細”和“細”字體粗細的對比度高于所需的 4.5:1,但某些用戶仍然可能難以閱讀這些字符。將字體粗細增加到“常規”有助于提高可讀性并簡化設計。文章標題使用“半粗體”有助于使其脫穎而出。
      僅使用兩種字體粗細即可得到以下設計。我們正在應用 UI 設計技巧,目前進展順利,但仍有一些問題需要解決。
      12.保持一致
      UI設計的一致性意味著相似的元素在外觀和工作方式上保持一致。這不僅應該體現在您的產品中,也應該體現在其他成熟產品中。這種可預測的功能可以提高可用性并減少錯誤,因為用戶無需不斷學習其工作原理。
      在我們的示例中,每篇文章的照片都有尖角,與按鈕和圖標的柔和圓角不匹配。將照片的角弄圓有助于創建更一致的視覺語言。你可能認為像這樣的小細節不會帶來太大的變化,但它們加在一起,就能讓設計看起來“恰到好處”。
      不要混淆極簡主義和簡單性
      極簡并不意味著簡單。設計師傾向于極簡界面,因為它們看起來美觀簡潔。極簡界面元素和樣式較少,但理解和使用起來并不一定簡單。
      極簡界面通常會顯得模糊或令人困惑,因為它們缺乏良好可用性所需的關鍵細節。簡化不僅僅是減少。刪除或隱藏太多內容可能會損害可用性。你需要確保沒有刪除關鍵信息或細節。
      在我們的示例中,底部導航圖標看起來簡潔明了,但它們的含義清晰嗎?可能并非每個人都清楚。在圖標上添加文本標簽有助于確保人們能夠理解它們的含義,尤其是那些使用屏幕閱讀器(一種使用語音或盲文向盲人描述界面的軟件)的用戶。
      平衡圖標和文字
      當將圖標與文本配對時,請嘗試確保它們具有相似的視覺突出性,以獲得更加平衡和有凝聚力的外觀。
      在我們的示例中,底部導航欄中的圖標和文字略微不平衡。圖標和文字顏色相同,但圖標更粗更大,使其更加突出。將文字加深可以增強其突出度,使其與圖標保持平衡。將文字對比度提高到至少 4.5:1 也能確保視力不佳的用戶也能輕松閱讀。
      我們做到了!
      僅憑一些簡單的UI設計技巧,我們就能夠識別并解決示例界面中的一系列問題。當然,您可以根據需要進一步調整視覺風格,使其更貼合特定的品牌個性。不過,在本例中,我們專注于確?;驹瓌t的正確性。
      我希望你開始明白,UI 設計并不需要讓人感到不知所措。雖然它有時看起來像是一門只有天賦異稟的人才能掌握的神秘藝術,但許多優秀的界面設計都植根于清晰、合乎邏輯的指導原則,就像你在這里學到的那些一樣。
      依靠客觀指導而非主觀意見,設計直觀、易用且視覺精美的界面會更加輕松(且快捷)。你越多地運用這些 UI 設計技巧,它們就越能自然而然地融入你的設計流程。以它們為基礎,勇于探索、實驗,并在此基礎上進一步激發你的創造力。
       
      蘭亭妙微(www.li-bodun.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan
       

      交互設計思維的流程

      濤濤 交互設計及用戶體驗

      在設計一個優秀的互聯網產品時,設計流程往往分為幾個階段,每個階段都有清晰的目標和方法。這不僅幫助我們找到真正的用戶需求,也確保設計思路清晰、可執行。下面,我們用簡單易懂的方式來講解整個設計流程。

      交互設計是什么?有什么用?

      濤濤 交互設計及用戶體驗

      交互設計( interaction design, IXD ),從字面上來說,交互即為相互作用相互影響,設計即為理解與傳達。在互聯網產品中,交互設計對用戶體驗產生很大的影響。本文將圍繞交互設計進行分析,與你分享。

      UI設計的深度解讀:從理念到實踐的全面剖析

      濤濤 設計管理與成長

      在數字化時代,用戶界面(UI)設計已成為連接用戶與產品不可或缺的橋梁。它不僅僅是屏幕上的視覺呈現,更是用戶體驗(UX)的核心組成部分,影響著用戶的認知、情感及行為。UI設計不僅僅是美化界面,更是一種通過精心策劃的視覺與交互元素,引導用戶高效、愉悅地完成任務的藝術與科學的結合。本文將從UI設計的理念、原則、流程、趨勢以及實踐技巧等多個維度,對其進行深度解讀。

      每個公司都需要自己的產品體驗報告

      濤濤 交互設計及用戶體驗

      當產品體驗報告不再是 PPT 里的靜態文檔,而成為實時迭代的決策引擎,傳統五要素模型正經歷三維進化:

      Tesla Model 3 用戶體驗設計測評總結

      濤濤 交互設計及用戶體驗

      Tesla Model 3 在智能化與極簡設計上表現突出,但導航與語音功能的短板、安全隱患(無 HUD)仍需優化,物理按鍵的取舍是未來迭代的關鍵爭議點。

      日歷

      鏈接

      個人資料

      藍藍設計的小編 http://www.li-bodun.cn

      存檔

      主站蜘蛛池模板: 国偷自产av一区二区三区| 中国性欧美videofree精品| 达州市| 亚洲九九视频| 欧美疯狂性受xxxxx另类| 亚洲综合电影小说图片区| 亚洲国产果果在线播放在线| 在线精品国产成人综合| 黎城县| 国产欧美亚洲精品第一页| 无码av在线a∨天堂毛片| 国产精品99| 免费观看四虎精品国产地址| 亚洲男人第一av天堂| 黑森林福利视频导航| 亚洲国产精品一区二区高清无码久久 | 四虎影视久久久免费观看| 五月丁香综合缴情六月小说| 超碰97人人做人人爱少妇| 精品夜夜澡人妻无码av| 国产成人精品免费久久久久 | www插插插无码视频网站| 亚洲中文字幕av在天堂| 人妻互换精品一区二区| 亚洲人成网站观看在线观看| 色综合色综合久久综合频道| 九九热在线视频精品免费| 免费无码国产v片在线观看 | 日夜啪啪一区二区三区| 国产又色又爽又黄刺激的视频| 日韩av日韩av在线| 91老熟女老人国产老太| 国产伦精品一区二区三区照片91| 成人片在线看无码不卡| 漂亮人妻被中出中文字幕| 日日噜噜夜夜爽爽| 国产特色一区二区三区视频| 亚洲国产精品一二三四区| 无码中文字幕加勒比高清| 和黑人中出一区二区三区| 国产乱子伦60女人的皮视频|