午夜勾魂曲-午夜福利自怕-午夜福利在线观看6080-午夜福利院电影-国产精品毛片AV久久97-国产精品麻豆高潮刺激A片

首頁

表盤設(shè)計(jì)分享【一】

杰睿 設(shè)計(jì)資源

0bea951f32f9ca9d51675197c681577c.jpg

8cd1d0f8382224270c1eff7b82da4b4c.jpg

633f3d9c9f83e736d861afe2d428c110.jpg

859b302bd0daa2efe3a2dbfc6b69497f.jpg

44320e08d38b3268bd8b5b0c8975ee46.jpg

 

在數(shù)字產(chǎn)品設(shè)計(jì)中,響應(yīng)式設(shè)計(jì)早已成為連接功能與體驗(yàn)的關(guān)鍵路徑。智能手表的表盤,作為最核心的信息承載區(qū),正在向“可感知、可適配、可延展”的方向不斷演進(jìn)。而我們將其類比為“數(shù)字卡片”,正是因?yàn)槎咴谠O(shè)計(jì)邏輯上的高度契合:都追求信息層級(jí)的清晰展現(xiàn)、內(nèi)容與場(chǎng)景的靈活適配,以及操作的直觀反饋。

卡片設(shè)計(jì)以模塊化、結(jié)構(gòu)清晰、響應(yīng)靈活著稱,能在不同屏幕與使用場(chǎng)景中自如調(diào)度內(nèi)容展示方式。而智能手表的表盤設(shè)計(jì)同樣需要在極小的顯示空間內(nèi),精準(zhǔn)傳遞時(shí)間、健康、通知等多維度信息。通過響應(yīng)式設(shè)計(jì)的引入,表盤可以根據(jù)環(huán)境光線、使用者習(xí)慣、交互狀態(tài)等動(dòng)態(tài)變化,自動(dòng)調(diào)整元素的排布與表現(xiàn)形式,實(shí)現(xiàn)“信息即所需,界面即交互”。

例如,在運(yùn)動(dòng)狀態(tài)下表盤可自動(dòng)突出心率與步數(shù);而在夜間,它又能切換為更具護(hù)眼性的低亮模式。這種“感知上下文”的能力,讓表盤從一個(gè)靜態(tài)的界面,變?yōu)橐粋€(gè)貼近用戶、主動(dòng)適應(yīng)的智能卡片。

響應(yīng)式的表盤設(shè)計(jì),不僅提高了使用效率,更拓展了產(chǎn)品體驗(yàn)的邊界。它像一張隨時(shí)變化的數(shù)字卡片,安靜卻聰明地陪伴在你腕間,把復(fù)雜的系統(tǒng)邏輯轉(zhuǎn)化為可感知的溫柔細(xì)節(jié)。

 

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

如何通過單個(gè)視覺組件將信息可視化

杰睿 設(shè)計(jì)資源

WechatIMG25.jpg

WechatIMG26.jpg

WechatIMG27.jpg

WechatIMG28.jpg

 

單個(gè)視覺組件實(shí)現(xiàn)信息可視化,并非簡(jiǎn)單的圖形替代文字,而是通過視覺語法構(gòu)建信息的傳遞路徑,讓接收者以最低認(rèn)知成本獲取核心內(nèi)容。?
以最基礎(chǔ)的柱狀圖為例,若僅展示單一數(shù)據(jù)維度,確實(shí)顯得單薄。但通過優(yōu)化設(shè)計(jì),它能承載更豐富的信息:柱體高度對(duì)應(yīng)數(shù)值大?。ɑA(chǔ)信息),柱體顏色飽和度區(qū)分?jǐn)?shù)據(jù)可信度(附加維度),柱體頂部的小三角標(biāo)記同比增長(zhǎng)率是否為正(關(guān)聯(lián)指標(biāo))。這三個(gè)設(shè)計(jì)元素共同作用,使一個(gè)柱狀圖既能呈現(xiàn)具體數(shù)值,又能說明數(shù)據(jù)質(zhì)量與增長(zhǎng)態(tài)勢(shì),信息密度提升卻未增加理解難度。?
視覺組件的有效性,取決于信息層級(jí)的清晰劃分。像儀表盤的設(shè)計(jì),指針指向的刻度是核心信息(當(dāng)前值),表盤顏色分區(qū)(綠色、黃色、紅色)界定正常、預(yù)警、危險(xiǎn)區(qū)間(判斷標(biāo)準(zhǔn)),指針末端的細(xì)微抖動(dòng)表示數(shù)據(jù)采集的實(shí)時(shí)性(動(dòng)態(tài)屬性)。這種設(shè)計(jì)讓觀者先捕獲核心數(shù)值,再通過輔助視覺元素理解數(shù)值所處的語境,符合人類認(rèn)知的遞進(jìn)規(guī)律。?
關(guān)鍵在于找到數(shù)據(jù)間的內(nèi)在關(guān)聯(lián)性,并轉(zhuǎn)化為可感知的視覺關(guān)聯(lián)。例如用樹狀圖展示公司組織架構(gòu)時(shí),方塊面積對(duì)應(yīng)部門人數(shù)(數(shù)量關(guān)系),方塊間的距離表示協(xié)作頻率(關(guān)聯(lián)強(qiáng)度),方塊顏色表示績(jī)效等級(jí)(評(píng)價(jià)維度)。三個(gè)視覺變量相互配合,一個(gè)組件就能說清 “有多少人”“協(xié)作如何”“表現(xiàn)怎樣” 三個(gè)層面的信息,且這些信息通過空間布局形成有機(jī)整體,而非孤立存在。?
優(yōu)質(zhì)的單個(gè)視覺組件,是在有限視覺空間內(nèi)建立信息的有序結(jié)構(gòu),讓每個(gè)視覺元素都承擔(dān)明確的信息傳遞功能,既不冗余也不缺失,實(shí)現(xiàn) “一圖抵千言” 的精準(zhǔn)傳達(dá)。
 
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

信息架構(gòu)設(shè)計(jì) | 全球?qū)Ш?、上下文?dǎo)航、本地導(dǎo)航的區(qū)別是什么?

杰睿 設(shè)計(jì)思維

“導(dǎo)航系統(tǒng)并不是單一的工具,而是由多個(gè)互補(bǔ)的導(dǎo)航方式組成。” ——《信息架構(gòu):超越Web設(shè)計(jì)》
 
在信息架構(gòu)里,導(dǎo)航系統(tǒng)不止一種。
我們常說的“導(dǎo)航”,其實(shí)包含了三個(gè)維度:全球?qū)Ш健⑸舷挛膶?dǎo)航、本地導(dǎo)航
如果你把網(wǎng)站當(dāng)成城市地圖,三者的區(qū)別就像
 
全球?qū)Ш剑℅lobal Navigation) 相當(dāng)于城市主干道。
總是在頁面的顯著位置(如頂部、側(cè)邊),無論用戶在哪一頁都可見。 
作用:提供站點(diǎn)的整體結(jié)構(gòu)輪廓,保證“不會(huì)迷路”。
舉個(gè)例子:你在電商平臺(tái)首頁、商品頁、購(gòu)物車頁,都能看到頂部的“首頁 / 分類 / 購(gòu)物車 / 我的”。
 
 
本地導(dǎo)航(Local Navigation) 像是某個(gè)商圈里的路標(biāo)。
 它只在特定區(qū)域內(nèi)出現(xiàn),展示該部分的子頁面結(jié)構(gòu)。
 作用:幫助用戶在當(dāng)前模塊內(nèi)自由切換,不跳出當(dāng)前上下文。
比如你點(diǎn)進(jìn)“具體單件商品”后,在側(cè)邊出現(xiàn)同商品分類就是本地導(dǎo)航。
 上下文導(dǎo)航(Contextual Navigation) 像是你在某家咖啡店里看到“附近的甜品推薦”。
 它不是常駐的,而是出現(xiàn)在特定內(nèi)容中,基于語義提供額外鏈接。
作用:提供延伸閱讀、關(guān)聯(lián)信息,拓寬用戶探索路徑。
對(duì)“單件產(chǎn)品”的批注延展,這就是上下文導(dǎo)航。
“全球?qū)Ш綆椭脩舳ㄎ徽军c(diǎn)結(jié)構(gòu),本地導(dǎo)航指導(dǎo)區(qū)域內(nèi)部的瀏覽,上下文導(dǎo)航則引導(dǎo)語義關(guān)聯(lián)的跳轉(zhuǎn)。”
 
如何為你的產(chǎn)品選對(duì)導(dǎo)航層級(jí)?
信息量不大? 全部用全球?qū)Ш郊纯伞?/div>
內(nèi)容分區(qū)明確? 加上本地導(dǎo)航提升效率。
內(nèi)容密集豐富? 增設(shè)上下文導(dǎo)航,增強(qiáng)探索體驗(yàn)。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan
 

用戶體驗(yàn)中的神經(jīng)設(shè)計(jì):認(rèn)知科學(xué)如何幫助我們打造更佳的界面

杰睿 用戶研究

通過 AI 輔助創(chuàng)建的圖像

說實(shí)話,我們大多數(shù)人在設(shè)計(jì)屏幕時(shí)并不會(huì)考慮人腦。我們關(guān)注的是布局、間距和顏色。但事實(shí)是:設(shè)計(jì)并非發(fā)生在屏幕上——而是發(fā)生在用戶的大腦中。這就是神經(jīng)設(shè)計(jì)的用武之地。

神經(jīng)設(shè)計(jì)就是運(yùn)用認(rèn)知心理學(xué)和神經(jīng)科學(xué)來構(gòu)建直觀、輕松甚至略帶愉悅的界面。我之前并沒有學(xué)過神經(jīng)科學(xué),但自從我開始了解大腦的運(yùn)作方式后,我的設(shè)計(jì)方式就徹底改變了。

以下是我所學(xué)到的知識(shí) — — 有真實(shí)的例子、用戶體驗(yàn)法則和一些你可能想看看的書籍精華。

1. 大腦是懶惰的(好的方面)

我們的大腦天生就具有節(jié)能的本能。這意味著人們幾乎總是會(huì)選擇阻力最小的路徑。當(dāng)你的用戶界面過于復(fù)雜或選項(xiàng)過多時(shí),大腦就會(huì)說:“不行。”

記住??硕?/span>

提供的選擇越多,做出決定所需的時(shí)間就越長(zhǎng)。

想想谷歌的主頁只是一個(gè)標(biāo)志和一個(gè)搜索欄。這并非偶然——它的設(shè)計(jì)是為了減少認(rèn)知負(fù)荷。

Google.com

您可以做什么:

  • 確定主要行動(dòng)的優(yōu)先級(jí)
  • 保持表單簡(jiǎn)短(就像 Typeform 那樣)
  • 刪除無用的元素

2.人們先看到,后思考

設(shè)計(jì)首先是情感驅(qū)動(dòng),其次是邏輯驅(qū)動(dòng)。這意味著色彩、布局甚至動(dòng)畫都能在第一秒就建立信任。

讓我們來看一個(gè)例子:Duolingo 的應(yīng)用程序使用友好的插圖、有趣的語氣,以及一些感覺像大腦“拍拍背”一樣的小獎(jiǎng)勵(lì)。它降低了學(xué)習(xí)新語言的情感障礙。

圖片來源——匹茲堡雜志

以下是Susan Weinschenk 所著《神經(jīng)網(wǎng)絡(luò)設(shè)計(jì)》一書中的一條重要建議:

“我們不會(huì)做出合乎邏輯的決定。我們會(huì)做出情緒化的決定,然后用邏輯來證明其合理性。”

您可以做什么:

  • 使用溫暖、友好的設(shè)計(jì)語言
  • 讓入職培訓(xùn)感覺像是手把手指導(dǎo),而不是測(cè)驗(yàn)
  • 添加微妙的動(dòng)作,使操作感覺靈敏(就像Apple在 iOS 中使用彈跳或淡入淡出一樣)

3.熟悉的感覺很好

大腦喜歡模式。當(dāng)用戶看到自己熟悉的事物時(shí),他們會(huì)感到安全,并且能夠掌控一切。

記住雅各布定律

用戶大部分時(shí)間都花在其他網(wǎng)站上。因此,他們期望你的產(chǎn)品也能以同樣的方式運(yùn)作。

讓我們看一些例子:Instagram 的底部標(biāo)簽欄、亞馬遜的購(gòu)物車圖標(biāo)Gmail 的撰寫按鈕——它們都遵循常見的視覺隱喻,以減少學(xué)習(xí)曲線。

您可以做什么:

  • 遵循原生平臺(tái)慣例
  • 使用常見的圖標(biāo)和術(shù)語(除非您是 Zara,否則不要將購(gòu)物車稱為“我的包”)
  • 除非有充分理由,否則避免不必要的改造

4.記憶很短暫——真的非常短暫

認(rèn)知科學(xué)告訴我們,用戶的工作記憶中一次只能記住大約4個(gè)條目。因此,如果你的應(yīng)用依賴于用戶記憶指令,那么它注定會(huì)失敗。

“米勒定律”來了

一般人的短期記憶只能保留 7 件(正負(fù) 2 件)物品。

真實(shí)案例:你有沒有嘗試填寫表單,但錯(cuò)誤信息只有在提交后才會(huì)顯示,而你卻忘了哪個(gè)字段出了什么問題?這簡(jiǎn)直就是記憶噩夢(mèng)。

您可以做什么:

  • 將任務(wù)分解成小的、可管理的步驟(例如Airbnb 的分步主機(jī)設(shè)置
  • 使用內(nèi)聯(lián)驗(yàn)證
  • 保持標(biāo)簽靠近輸入(不要讓用戶滾動(dòng)或猜測(cè))

5.反饋=安全

大腦會(huì)不斷檢查:這有效嗎? 我能控制嗎?如果用戶界面沒有響應(yīng)輸入,用戶就會(huì)感到不確定——即使后臺(tái)一切正常。

用戶體驗(yàn)法則:反饋循環(huán)原則

人們需要立即得到反饋來了解其行為的結(jié)果。

例如,Slack在消息發(fā)送時(shí)會(huì)顯示“正在發(fā)送…”的動(dòng)畫和勾號(hào)。這能建立信任,尤其是在快速對(duì)話中。

您可以做什么:

  • 顯示加載狀態(tài)、成功消息或錯(cuò)誤提示
  • 允許用戶撤消操作(如 Gmail 的“撤消發(fā)送”)
  • 動(dòng)畫過渡到信號(hào)系統(tǒng)狀態(tài)

如果你想深入了解,可以參考以下書籍推薦

以下幾本書確實(shí)幫助我將神經(jīng)科學(xué)和用戶體驗(yàn)聯(lián)系起來:

  • Susan Weinschenk 的《神經(jīng)網(wǎng)絡(luò)設(shè)計(jì)》 ——超級(jí)易讀,示例豐富
Susan Weinschenk 的《神經(jīng)網(wǎng)絡(luò)設(shè)計(jì)》
  • Susan Weinschenk 撰寫的《每個(gè)設(shè)計(jì)師都需要知道的關(guān)于人的 100 件事》 ——設(shè)計(jì)師的最愛
蘇珊·溫申克 (Susan Weinschenk) 的《每個(gè)設(shè)計(jì)師都需要了解的關(guān)于人的 100 件事》
  • 史蒂夫·克魯格的《別讓我思考》 ——雖然不是神經(jīng)科學(xué),但完全符合大腦的行為方式
史蒂夫·克魯格的《別讓我思考》
  • 唐納德·諾曼的《設(shè)計(jì)心理學(xué)》 ——以人為本的設(shè)計(jì)思維的經(jīng)典見解
唐納德·諾曼的《設(shè)計(jì)心理學(xué)》

好的用戶體驗(yàn)不僅僅是讓事物看起來美觀。它在于理解人腦的運(yùn)作方式,并圍繞此進(jìn)行設(shè)計(jì)。神經(jīng)設(shè)計(jì)提醒我們,我們?cè)O(shè)計(jì)的不是屏幕,而是思維中的體驗(yàn)

當(dāng)我們做得好的時(shí)候,一切都會(huì)順利。

所以下次調(diào)整布局或重新設(shè)計(jì)流程時(shí),問問自己:
現(xiàn)在什么對(duì)大腦來說最容易?
這個(gè)問題比任何花哨的工具都更能幫助我做出更好的決策。

……

 

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

如何用ChatGPT的新圖像生成器創(chuàng)建UI(4o)

杰睿 設(shè)計(jì)資源

ChatGPT 是否有可能生成 UI?

我之前測(cè)試過幾次,但結(jié)果卻令人失望。

下面是我兩個(gè)月前在一份時(shí)事通訊中分享的一個(gè)例子。

升級(jí)前通過 ChatGPT 生成

它看上去太卡通了,不太實(shí)用。

然而,上周,OpenAI 推出了一個(gè)重大更新,所以我決定再次嘗試。

根據(jù)我的提示,我能夠生成更好的UI模型。我甚至可以根據(jù)自己的需求創(chuàng)建多個(gè)設(shè)計(jì)選項(xiàng):

通過 ChatGPT 生成

今天,我將向你們展示我進(jìn)行的實(shí)驗(yàn)、我使用的提示以及過程中的一些驚喜和收獲。

讓我們開始吧。

背景

OpenAI 宣布,現(xiàn)在可以使用 GPT-4o 在 ChatGPT 中生成高質(zhì)量圖像,而不是使用較舊的 DALL·E 模型。

它更擅長(zhǎng)遵循指令,并且可以更好地呈現(xiàn)圖像中的文本。

上周,許多人嘗試將照片轉(zhuǎn)換成人工智能藝術(shù)作品——這就是吉卜力風(fēng)格藝術(shù)潮流流行的原因。

我也嘗試過:

通過 ChatGPT 生成

但在網(wǎng)上看到很多有趣的藝術(shù)作品后,我想:

如果我可以使用 ChatGPT 生成對(duì)產(chǎn)品設(shè)計(jì)師真正有用的 UI 會(huì)怎么樣?

實(shí)驗(yàn)就是從這里開始的。

實(shí)驗(yàn)

1. 創(chuàng)建詳細(xì)的提示

我使用 ChatGPT 來幫助我生成我想要的 UI 的詳細(xì)提示。

# 為名為“SkillVerse - 熱門微課程”的應(yīng)用設(shè)計(jì)一個(gè)簡(jiǎn)潔、現(xiàn)代的移動(dòng) UI 界面(iOS 風(fēng)格)。布局應(yīng)遵循以下結(jié)構(gòu)化部分。## 1. 狀態(tài)欄(頂部)- **樣式**:標(biāo)準(zhǔn) iOS 布局(頂部安全區(qū)域)---## 2. 標(biāo)題部分- **居中標(biāo)志**:“SkillVerse”  - **字體**:中等粗細(xì),小尺寸  - **顏色**:藍(lán)色文本  ---## 3. 特色課程輪播(水平滾動(dòng))- **風(fēng)格**:具有圓角和柔和陰影的可滑動(dòng)卡片  - **卡片**:    -**卡 1**      - 標(biāo)題:**動(dòng)態(tài)設(shè)計(jì)簡(jiǎn)介**      - 字幕:*4 月 2 日開始*      - 視覺:動(dòng)畫縮略圖    -**卡 2**      - 標(biāo)題:《自由職業(yè)者精通 Excel》      - 字幕:*3 月 31 日開始*      - 視覺:生產(chǎn)力圖標(biāo)  ---## 4. 導(dǎo)航標(biāo)簽-**標(biāo)簽**:    - **趨勢(shì)**(活躍,**粗體標(biāo)簽**帶有**藍(lán)色下劃線**)    - 受到推崇的    - 已注冊(cè)    - 已保存  ---## 5. 過濾行- **過濾器(下拉菜單)**:    - **過去 7 天**(基于時(shí)間)    - **所有主題**(類別)    - **所有級(jí)別**(難度)  ---## 6. 熱門課程列表- **布局**:可重復(fù)課程項(xiàng)目的垂直堆疊:  - **左**:圓形縮略圖    - **中心**:      - 課程名稱      - 級(jí)別(例如,初學(xué)者、中級(jí)等)    - **右**:保存圖標(biāo)  - **底部**:入學(xué)人數(shù) + 趨勢(shì)(例如,入學(xué)人數(shù) 2.4k,+12%)   ---## 7. 底部導(dǎo)航欄-**標(biāo)簽**:  - **主頁**(活動(dòng),突出顯示顏色)    - 搜索    - 活動(dòng)    - 輪廓  - **風(fēng)格**:    - 下方有標(biāo)簽

然后我將其粘貼到 ChatGPT 中的新聊天窗口中,然后單擊“生成”圖標(biāo)。

2. 生成代碼支持的 UI

令人驚訝的是,ChatGPT 在右側(cè)打開了一個(gè)額外的面板,觸發(fā)了它的 Canvas 功能。然后它開始生成代碼。

這立刻讓我想起了克勞德的神器功能。

ChatGPT 的屏幕截圖

然后我點(diǎn)擊了右上角的“預(yù)覽”按鈕。

生成了響應(yīng)式、代碼支持的 UI。

ChatGPT 的屏幕截圖

看起來很有趣,但似乎不如克勞德那么精確/精致。

3. 要求提供視覺模型

由于我的目的只是生成一個(gè)圖像(一個(gè)可視化模型)而不是一個(gè)代碼支持的 UI,因此我請(qǐng)求后續(xù)提示來糾正它:

創(chuàng)建一個(gè)可視化模型。而是一個(gè)視覺模型。

結(jié)果如下:

通過 ChatGPT 生成

結(jié)果出乎意料地好,尤其是與 ChatGPT (DALL·E) 之前生成的版本相比。這是一個(gè)巨大的提升。

測(cè)驗(yàn):你能在上述 AI 生成的 UI 中找到多少個(gè)拼寫錯(cuò)誤?:)

4. 要求縮小用戶界面

盡管用戶界面看起來不錯(cuò),但我仍然對(duì)圖像截?cái)喔械接悬c(diǎn)困擾,所以我問了:

頂部和底部看起來有點(diǎn)截?cái)?。您能?UI 縮小 20% 左右,讓它整體更小一些嗎?頂部底部看起來有點(diǎn)截?cái)?。您能?UI 縮小20%左右, 讓它整體更小一些嗎?

結(jié)果如下:

通過 ChatGPT 生成

看起來不錯(cuò)!

5. 要求生成設(shè)計(jì)選項(xiàng)

然后我開始更有創(chuàng)意了……我想,如果我讓它生成多個(gè)設(shè)計(jì)方案供我參考會(huì)怎么樣?那會(huì)更有幫助!

所以我寫了這個(gè):

創(chuàng)建三個(gè)設(shè)計(jì)選項(xiàng)。使用相同的核心內(nèi)容,但根據(jù)以下描述改變布局、UI 元素和視覺重點(diǎn):選項(xiàng) 1. 大膽且引人入勝- 優(yōu)先考慮視覺沖擊力和品牌表達(dá)選項(xiàng) 2. 功能強(qiáng)大且快速- 優(yōu)先考慮速度、清晰度和生產(chǎn)力- 緊湊的用戶界面,卡片更小,信息層次更密集選項(xiàng)3.個(gè)性化和溫暖- 優(yōu)先考慮聯(lián)系、信任和個(gè)性化- “為你推薦”輪播,包含人工智能策劃的課程建議- 社會(huì)證明(頭像、徽章、朋友活動(dòng))- 添加“社區(qū)”選項(xiàng)卡,用于同行共享內(nèi)容

結(jié)果如下:

通過 ChatGPT 生成

再次,我對(duì) GPT-4o 圖像生成能力的提升感到震驚。

雖然這三個(gè)選項(xiàng)看起來仍然非常相似,但如果仔細(xì)觀察,就會(huì)發(fā)現(xiàn)一些小細(xì)節(jié) - 例如“搜索”圖標(biāo)、社交證明和副本 - 試圖使每個(gè)版本都與其他版本區(qū)分開來。

不過,結(jié)果肯定還有改進(jìn)的空間。例如,由于一張圖片中包含了大量信息,ChatGPT 的精度開始下降。你可能會(huì)注意到,部分文本變得無法識(shí)別/扭曲。

6. 將設(shè)計(jì)轉(zhuǎn)換為 Figma 文件

接下來,作為一個(gè)有趣的測(cè)試,我使用Codia AI 的插件根據(jù) ChatGPT 生成的視覺模型生成 Figma 設(shè)計(jì)。

Figma 中的屏幕截圖

所有組件(包括文本)都可以在 Figma 中編輯。

它使用的字體系列是 Intel。

好得可怕。

如果我想進(jìn)行更改,這使我能夠自定義 UI 模型。

最后的想法

ChatGPT 生成 UI 視覺模型的能力是一個(gè)巨大的提升。與之前版本相比,它提供了更高的精度和對(duì)提示的遵循性。

話雖如此,速度還是有點(diǎn)慢,準(zhǔn)確率還有待提高。有時(shí)圖像生成到一半就停止了;有時(shí)結(jié)果很隨機(jī),而且與指令不完全一致。

當(dāng)我要求 ChatGPT 根據(jù)設(shè)計(jì)選項(xiàng)創(chuàng)建 3D 模型時(shí),事情變得有點(diǎn)扭曲和奇怪——但還不算太糟。

通過 ChatGPT 生成

不管怎樣,這已經(jīng)是一次很棒的升級(jí)了。我現(xiàn)在能生成以前無法生成的東西了。

這一切都在 ChatGPT 聊天窗口內(nèi)完成。多么方便???

我非常興奮并希望未來會(huì)有更好的升級(jí)。

設(shè)計(jì)不再具有顛覆性。我們還能重新找到設(shè)計(jì)靈感嗎?

杰睿 行業(yè)趨勢(shì)

黑色田野上的復(fù)古未來主義插圖。現(xiàn)代雕塑和雕像,超現(xiàn)實(shí)的幾何形狀,線框,賽博朋克元素和透視網(wǎng)格。流行迷幻科技風(fēng)格的抽象矢量插圖。
作者:Martyshova

是的。我們想知道為什么產(chǎn)品設(shè)計(jì)界這么多人都走到了崩潰的邊緣?我想說,我不認(rèn)為設(shè)計(jì)已死。只是我覺得我們迷失了方向。

2023年,Airbnb首席執(zhí)行官布萊恩·切斯基(Brian Chesky)曾說過: “設(shè)計(jì)師必須有勇氣。”說實(shí)話,我們過去確實(shí)很有勇氣。一種無所畏懼的自信,一種打破現(xiàn)狀的近乎瘋狂的喜悅。“驚喜與愉悅”、“精益求精,保持簡(jiǎn)潔”一直是我多年來領(lǐng)導(dǎo)設(shè)計(jì)團(tuán)隊(duì)的座右銘。

我陷入了以收入為中心、癡迷于圖案設(shè)計(jì)的陷阱。

然而,不知何故,在某個(gè)時(shí)刻,也許是在無休止的會(huì)議、OKR、業(yè)務(wù)目標(biāo)和盈利報(bào)告的催促下;又或許是因?yàn)楣緝?nèi)部不斷邊緣化設(shè)計(jì)——這種自信消失了。我們從協(xié)作型的搖滾明星變成了解決問題的小齒輪,再變成了生存主義者。因?yàn)楝F(xiàn)在機(jī)器來了。

觀察氛圍

多年來,我本著脆弱的精神,陷入了以收益為中心、癡迷于圖案設(shè)計(jì)的陷阱。DS 是一種令人興奮的、以特定價(jià)格點(diǎn)進(jìn)行設(shè)計(jì)的方法。讓我們?nèi)?chuàng)造收益!讓我們?nèi)?yōu)化利潤(rùn)!讓我們快速實(shí)現(xiàn)各種創(chuàng)意!我們?yōu)槭裁匆趹?yīng)該創(chuàng)新的時(shí)候重復(fù)造輪子呢?

聽起來很熟悉?
這就像個(gè)兔子洞。我和同事們聊過,大家都覺得,

  • 為什么每次想到 ux/ui 設(shè)計(jì)我都會(huì)感到沮喪,盡管我對(duì)它充滿熱情?
  • 為什么我對(duì)當(dāng)前的設(shè)計(jì)和產(chǎn)品方法感到沮喪,即使它有效?(是嗎?)
  • 為什么盡管我熱愛我所做的事情,但我的創(chuàng)造力卻不再因工作而得到滿足?
  • 為什么懷念互聯(lián)網(wǎng)的狂野西部時(shí)代,盡管它充滿了模糊性?
  • 盡管設(shè)計(jì)無處不在,但它已經(jīng)消亡了嗎?

如果我們用設(shè)計(jì)系統(tǒng)的方法錄制一張專輯,每首歌在技術(shù)上都是完美的,但它們聽起來本質(zhì)上都一樣。哪個(gè)用戶會(huì)因?yàn)榉磸?fù)聽這首歌而受到啟發(fā)呢?我們自己的設(shè)計(jì)故事已經(jīng)支離破碎了。

我們很多產(chǎn)品設(shè)計(jì)人員都生活在艾維所說的“企業(yè)議程已將設(shè)計(jì)和創(chuàng)新的重點(diǎn)從目標(biāo)轉(zhuǎn)移到利潤(rùn)”的境地。追求收益令人精疲力竭。創(chuàng)造性的故障排除被誤認(rèn)為是創(chuàng)造力。基于卡班板混亂和閃電般快速發(fā)布的產(chǎn)品經(jīng)理微觀管理的壓力。MVP 地獄景象。毫無結(jié)果的 A/B 測(cè)試,因?yàn)槔嫦嚓P(guān)者不理解。整體創(chuàng)新解決方案被所謂的“安全”的快速解決方案扼殺。而這一切都是有代價(jià)的。靈感更少,活力更少,友善更少,壓力更大。更多的自我限制。更多的模仿。更多千篇一律、復(fù)雜而扁平的用戶體驗(yàn)。等等。

轉(zhuǎn)變

過去一周,我的觀點(diǎn)與多年來形成的理念發(fā)生了轉(zhuǎn)變。我最近去一家大型游戲公司面試領(lǐng)導(dǎo)職位,面試的主題是如何創(chuàng)造收入。這才是整個(gè)團(tuán)隊(duì)最關(guān)心的問題。他們沒有考慮用戶需求,也沒有考慮他們正在構(gòu)建的工作和體驗(yàn)的樂趣。這些從未被討論過。

這真的讓我很困擾。非常困擾。這不是我第一次遇到這種情況。我一次又一次地發(fā)現(xiàn),出現(xiàn)了兩件事:

  • 在大多數(shù)設(shè)計(jì)文化中,設(shè)計(jì)的樂趣和喜悅是不存在的
  • 人類基于價(jià)值觀的行為優(yōu)先于人類情感

我們大多數(shù)人都在無意識(shí)中直接促成了這一點(diǎn)。我們甚至沒有意識(shí)到這一點(diǎn)。然而,要論證人類首先是情感實(shí)體,這并不需要太多說服力。我們能夠立即感知和感受事物,然后再運(yùn)用邏輯,這與人類的進(jìn)化直接相關(guān)。然而,我們的設(shè)計(jì)方法在很多方面都缺乏這種能力。

(我在這篇文章中只關(guān)注設(shè)計(jì)的作用。但科技領(lǐng)域其他角色的出現(xiàn),以及流水線投資回報(bào)率驅(qū)動(dòng)的 IDEO 方法,無疑導(dǎo)致了設(shè)計(jì)優(yōu)先級(jí)的下降,不再以用戶感受為重點(diǎn)。)

我們需要重新進(jìn)行重大的直覺選擇并重新感受事物。

我是如何開始轉(zhuǎn)變的?

有兩件事無疑產(chǎn)生了最大的影響。

- 新的 Google Material DS “發(fā)送”按鈕
。-

采訪喬納森·艾維。

 

兩者都重點(diǎn)討論了“歡樂與喜悅”和“火花”的設(shè)計(jì)。

谷歌界面的更新打破了所有固有規(guī)則,打造了獨(dú)特的數(shù)字體驗(yàn)。他們抓住了機(jī)會(huì),用數(shù)據(jù)驗(yàn)證了這一可能性,最終他們的努力讓用戶參與度提升了4倍。

Jony 在Stripe大會(huì)上的采訪非常鼓舞人心。如果你今年需要看一部作品來了解設(shè)計(jì)對(duì)我們這個(gè)瞬息萬變的世界的重要性,那非看不可。他讓設(shè)計(jì)回歸了它的本源,那就是那神奇的“火花”。

當(dāng)我思考這些時(shí),我發(fā)現(xiàn)偉大的設(shè)計(jì)中存在著一些更具體的事情——顛覆。

如果您今年關(guān)注一件事以了解為什么設(shè)計(jì)對(duì)于我們這個(gè)不斷變化的世界如此重要,那就是它了。

在數(shù)字體驗(yàn)的早期,沒有數(shù)據(jù),沒有關(guān)鍵績(jī)效指標(biāo) (KPI),也沒有流水線式的技術(shù)開發(fā)方法。當(dāng)時(shí)的設(shè)計(jì)純粹是為了品牌價(jià)值、功能和實(shí)驗(yàn)。我們有兩個(gè)代碼庫:HTML 和 Flash。工作的多樣性令人興奮。網(wǎng)站以及最終的原生應(yīng)用都易于使用,易于導(dǎo)航,沒有算法,非常人性化。

我們也只是想打造一些我們的朋友和同事會(huì)談?wù)摰姆浅?岬臇|西。

設(shè)計(jì)團(tuán)隊(duì)和工程團(tuán)隊(duì)圍坐在一起,討論他們想要構(gòu)建的目標(biāo),并在整個(gè)過程中不斷合作。如同合作伙伴一樣。一份簡(jiǎn)單的路線圖充滿了宏大的想法和雄心壯志。方法是什么?“我想要一個(gè)能夠?qū)崿F(xiàn)_____的酷炫解決方案,因?yàn)槲蚁胱鯻____。”

我們受到的啟發(fā)是(用艾維的話來說)“設(shè)計(jì)一些能夠推動(dòng)物種發(fā)展的東西”,“為人類服務(wù)”。我們也只是想打造一些非常酷的東西,讓我們的朋友和同事談?wù)摗?/span>

有些品牌正在瘋狂地顛覆這個(gè)領(lǐng)域。比如Acorn和Airbnb。但當(dāng)突破設(shè)計(jì)界限的設(shè)計(jì)如此罕見時(shí),這對(duì)任何人來說都不是好兆頭。什么時(shí)候突破設(shè)計(jì)界限的設(shè)計(jì)非常罕見,這對(duì)任何人來說都不是好兆頭。

最新的顛覆者

人工智能。

我們正為此瘋狂。長(zhǎng)期以來,我們一直謹(jǐn)慎行事,構(gòu)建一套設(shè)計(jì)方法論式的設(shè)計(jì)系統(tǒng),結(jié)果卻事與愿違。我和其他人一樣,也為自己的謹(jǐn)慎行事感到內(nèi)疚。不到五年,產(chǎn)品設(shè)計(jì)將不再像過去十五年那樣存在。這原本是一個(gè)令人恐懼的前景,直到我直面恐懼。

想想看,不用再構(gòu)建模式庫了。不用再花費(fèi)無數(shù)時(shí)間迭代數(shù)據(jù)和最佳實(shí)踐。不用再熬夜撰寫和設(shè)計(jì)戰(zhàn)略方案了。這可不是設(shè)計(jì),而是繁重的工作。說真的,讓機(jī)器來做吧。

我可以重新做我最擅長(zhǎng)的事,運(yùn)用我的智慧、想象力和經(jīng)驗(yàn)來推動(dòng)事情發(fā)展。當(dāng)然可以。報(bào)名吧。我就是來干這個(gè)的。

設(shè)計(jì)會(huì)發(fā)生什么?

我們不再打破常規(guī)。我們遵循著基于指標(biāo)和績(jī)效的群體思維美學(xué)。我們各自為政,各自為政,各自為政。我們用耗時(shí)的方法來構(gòu)思創(chuàng)意。我們迷失在迭代的泥沼中。我們沒有逼迫自己打破常規(guī)。

如果我們退一步,縱觀設(shè)計(jì)的全局,就會(huì)發(fā)現(xiàn)我們所做的最偉大的設(shè)計(jì),其核心都是“顛覆性”。敢于創(chuàng)新,敢于思考。它不斷嘗試新事物,探索新的視野。然而,我們對(duì)這門學(xué)科的內(nèi)在部分卻感到厭惡。

我不知道“幸運(yùn)眷顧勇者”這句話是誰說的。

我的一個(gè)使命就是讓它重新回到我們的世界。

回去工作。

讓我們打破思維定勢(shì)。

讓我們都做些史詩般的事。

 

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

2026 年影響設(shè)計(jì)的 5 個(gè) UX/UI 趨勢(shì)

杰睿 行業(yè)趨勢(shì)

計(jì)發(fā)展日新月異——轉(zhuǎn)瞬即逝,你就會(huì)落后。把握設(shè)計(jì)的發(fā)展方向是成功的一半。以下根據(jù)目前的發(fā)展情況,概述了五大可能在 2026 年占據(jù)主導(dǎo)地位的 UX/UI 趨勢(shì)。

上周,我在一個(gè)熙熙攘攘的共享辦公空間里畫界面時(shí),一位剛接觸 Figma 的學(xué)生設(shè)計(jì)師朋友湊過來問我:
“你是怎么跟上這些變化的?”
這句話深深地觸動(dòng)了我。多年從事設(shè)計(jì)行業(yè),我明白了:洞察潮流才能保持敏銳。以下是我關(guān)注的領(lǐng)域。

1. 人工智能驅(qū)動(dòng)的個(gè)性化做得好

我現(xiàn)在用的新聞應(yīng)用會(huì)根據(jù)我的閱讀習(xí)慣,根據(jù)文章的長(zhǎng)度和深度來篩選文章。無需手動(dòng)調(diào)整——它就能滿足我的需求。

  • 以我的播客應(yīng)用程序?yàn)槔涸缟喜シ哦虅?,晚上播放深入訪談,這一切都是因?yàn)樗粉櫫宋业牧?xí)慣。

設(shè)計(jì)的任務(wù)是打造一個(gè)能夠?qū)W習(xí)且不會(huì)讓用戶感到害怕的系統(tǒng)。通過人工智能實(shí)現(xiàn)的個(gè)性化應(yīng)該像一個(gè)樂于助人的朋友,而不是一個(gè)跟蹤狂。關(guān)鍵在于平衡智能自動(dòng)化和用戶控制。

2. 游戲之外的增強(qiáng)現(xiàn)實(shí)

AR 正在擺脫游戲的桎梏。想象一下一款家居維修應(yīng)用:它將虛擬的架子投射到廚房墻上,讓你四處走動(dòng),看看它們是否合適。

  • 這不是空談,它能解決實(shí)際問題。無論是家具采購(gòu)、裝修翻新還是培訓(xùn)培訓(xùn),AR 都能讓決策更清晰。

到2026年,AR設(shè)計(jì)將成為標(biāo)桿。還在覺得它只是個(gè)噱頭嗎?是時(shí)候重新思考了,否則你就錯(cuò)失良機(jī)了。

照片由XR ExpoUnsplash上拍攝

3. 人工智能作為設(shè)計(jì)師的助手

人工智能工具正在徹底改變我的工作流程。最近,我請(qǐng)一位人工智能工具為一個(gè) SaaS 項(xiàng)目快速設(shè)計(jì)圖標(biāo)——一分鐘內(nèi)就得到了 10 個(gè)方案,全部符合 WCAG 標(biāo)準(zhǔn),并且符合品牌形象。

  • 它并沒有搶走我的工作;它讓我可以自由地完善用戶流程并應(yīng)對(duì)人工智能無法觸及的挑戰(zhàn)。

真正的問題并非AI能否設(shè)計(jì),而是我們?nèi)绾闻c它合作,將項(xiàng)目推向新的高度。不妨把它想象成一位由你掌控全局的智能助手。

4. 包容性設(shè)計(jì)將改變游戲規(guī)則

我吃過不少苦頭才明白這一點(diǎn):為“普通”用戶設(shè)計(jì)是失敗的。在一個(gè)項(xiàng)目中,我重新設(shè)計(jì)了一個(gè)移動(dòng)應(yīng)用的注冊(cè)表單,因?yàn)槲乙庾R(shí)到它對(duì)于手抖的人來說太笨重了。

  • 重新設(shè)計(jì)后,一位視力低下的用戶表示:“第一次我不需要放大。”額外的好處是:每個(gè)人都覺得它更流暢,而不僅僅是目標(biāo)群體。

到2026年,包容性設(shè)計(jì)將不再只是一張紙,而將成為一項(xiàng)競(jìng)爭(zhēng)優(yōu)勢(shì)。滿足多元化需求,打造人人喜愛的產(chǎn)品。

5. 輕松結(jié)賬

上周末,我通過一個(gè)應(yīng)用程序預(yù)訂了一張餐廳餐桌——甚至都沒注意到我已經(jīng)付款了。指紋驗(yàn)證,我的常用設(shè)置自動(dòng)應(yīng)用,搞定了。

  • 最好的結(jié)賬方式融合了速度和信任:生物識(shí)別、智能默認(rèn)和清晰的確認(rèn)以避免任何壓力。

設(shè)計(jì)的作用是減少摩擦,同時(shí)保持用戶的控制力。設(shè)計(jì)的目的是讓日常操作感覺安全,而不是草率。

 

蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

蘭亭妙微 軟件開發(fā)與電子病歷醫(yī)療界面設(shè)計(jì)服務(wù)

杰睿 隨筆的一些文章

 

 
 
蘭亭妙微作為專業(yè)的軟件開發(fā)公司,在行業(yè)深耕 16 年,由清華團(tuán)隊(duì)全程主導(dǎo)技術(shù)與設(shè)計(jì)方向,積累了扎實(shí)的行業(yè)經(jīng)驗(yàn)。在 QT 軟件開發(fā)領(lǐng)域,我們的技術(shù)團(tuán)隊(duì)成員平均擁有 8 年以上相關(guān)工作經(jīng)歷,熟悉 QT 框架的各類功能模塊與開發(fā)技巧,能夠根據(jù)企業(yè)不同的業(yè)務(wù)場(chǎng)景,定制開發(fā)穩(wěn)定可靠的桌面應(yīng)用程序。從需求溝通階段的功能梳理,到技術(shù)方案設(shè)計(jì)時(shí)的架構(gòu)搭建,再到開發(fā)過程中的代碼編寫與測(cè)試優(yōu)化,每個(gè)環(huán)節(jié)都有嚴(yán)格的質(zhì)量把控標(biāo)準(zhǔn),確保交付的軟件在運(yùn)行效率與穩(wěn)定性上符合客戶預(yù)期。
設(shè)計(jì)服務(wù)方面,我們兼具用戶體驗(yàn)設(shè)計(jì)公司與界面設(shè)計(jì)公司的雙重優(yōu)勢(shì)。在高端網(wǎng)站設(shè)計(jì)業(yè)務(wù)中,團(tuán)隊(duì)會(huì)先深入了解企業(yè)的品牌文化、核心業(yè)務(wù)與目標(biāo)用戶群體,結(jié)合市場(chǎng)流行趨勢(shì)與實(shí)用功能需求,打造既符合品牌調(diào)性又適配多終端的網(wǎng)站。從首頁的視覺呈現(xiàn)到內(nèi)頁的信息架構(gòu),從交互邏輯的順暢性到加載速度的優(yōu)化,都經(jīng)過細(xì)致打磨,助力企業(yè)通過線上平臺(tái)有效展示自身形象。在 B 端界面設(shè)計(jì)與 APP 界面設(shè)計(jì)中,始終以用戶體驗(yàn)為核心考量,通過前期的用戶行為調(diào)研與業(yè)務(wù)流程分析,合理規(guī)劃界面的信息層級(jí)與操作路徑,讓復(fù)雜的功能模塊變得條理清晰,提升用戶的操作效率。
在醫(yī)療健康領(lǐng)域,我們尤其在電子病歷醫(yī)療數(shù)據(jù)分析界面設(shè)計(jì)上積累了豐富經(jīng)驗(yàn)。設(shè)計(jì)過程中,團(tuán)隊(duì)會(huì)與醫(yī)護(hù)人員、醫(yī)療信息管理人員進(jìn)行多輪溝通,深入了解臨床工作流程、數(shù)據(jù)記錄規(guī)范與分析需求。針對(duì)電子病歷中大量的文字信息、檢查數(shù)據(jù)與診療記錄,采用分類標(biāo)簽、數(shù)據(jù)可視化圖表等設(shè)計(jì)方式,讓醫(yī)護(hù)人員能夠快速定位關(guān)鍵信息。同時(shí),考慮到醫(yī)療工作的嚴(yán)謹(jǐn)性,在界面的操作反饋、數(shù)據(jù)校驗(yàn)等細(xì)節(jié)上做了特殊處理,減少誤操作的可能性,讓醫(yī)療信息的錄入、查詢與分析過程更加高效便捷。
秉持 “敬事而信,德智兼修” 的企業(yè)理念,16 年來我們已服務(wù)過超 300 家來自金融、醫(yī)療、工業(yè)、教育等多個(gè)行業(yè)的客戶,完成 640 多個(gè)不同類型的項(xiàng)目,在設(shè)計(jì)與開發(fā)領(lǐng)域積累了良好的口碑。
 
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

以冷靜包容的視角審視蘋果史上最激進(jìn)的 UI 變革

杰睿 隨筆的一些文章

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

等級(jí)制度決定一切——學(xué)會(huì)控制人們首先看到的內(nèi)容

杰睿 設(shè)計(jì)思維

什么是視覺層次?
視覺層次結(jié)構(gòu)是指設(shè)計(jì)元素按重要性優(yōu)先排列和呈現(xiàn)的方式。它回答了一個(gè)關(guān)鍵問題:用戶應(yīng)該首先看到什么?
通過控制用戶瀏覽頁面的方式,我們影響他們的理解和行為。有效的層級(jí)結(jié)構(gòu)確保最關(guān)鍵的元素(例如主要操作、關(guān)鍵信息或?qū)Ш剑┟摲f而出,而次要細(xì)節(jié)則保持輔助性但不引人注目。
為什么層次結(jié)構(gòu)在 UI 設(shè)計(jì)中很重要?
人們不會(huì)閱讀界面——他們只會(huì)瀏覽。研究表明,用戶只需 3-5 秒就能對(duì)設(shè)計(jì)形成看法。結(jié)構(gòu)良好的視覺層次有助于:
突出顯示主要操作(例如注冊(cè)按鈕、特色產(chǎn)品)
明確哪些內(nèi)容重要,哪些內(nèi)容次要(例如,標(biāo)題和正文)
通過避免過多的選擇來減輕認(rèn)知負(fù)擔(dān)
通過使導(dǎo)航直觀來提高可用性
如果沒有明確的層次結(jié)構(gòu),用戶會(huì)感到迷茫、沮喪或不確定下一步該做什么——從而導(dǎo)致更高的跳出率和更低的參與度。
視覺層次的核心原則
為了創(chuàng)建強(qiáng)大的視覺層次,設(shè)計(jì)師會(huì)結(jié)合使用多種技術(shù)來自然地引導(dǎo)視線。以下是最強(qiáng)大的工具:
規(guī)模:確立重要性最直接的方式
較大的元素自然會(huì)首先吸引注意力。此原則適用于排版、按鈕、圖像和其他 UI 組件。
示例:粗體、超大標(biāo)題比較小的副標(biāo)題更能吸引注意力。
專業(yè)提示:使用尺寸遞增 — — 最大尺寸用于主要操作,中等尺寸用于次要信息,最小尺寸用于第三級(jí)細(xì)節(jié)。
顏色與對(duì)比度:用戰(zhàn)略色調(diào)引導(dǎo)焦點(diǎn)
高對(duì)比度的顏色可以突出重點(diǎn),而柔和的色調(diào)則會(huì)逐漸淡入背景。
示例:鮮紅色的“立即購(gòu)買”按鈕在中性背景下顯得格外突出。
專業(yè)提示:每個(gè)屏幕的強(qiáng)調(diào)色限制為 1-2 種,以避免視覺噪音。
字體粗細(xì)與風(fēng)格:構(gòu)建信息流
字體粗細(xì)(粗體、中等、常規(guī))和樣式(襯線、無襯線、斜體)有助于區(qū)分內(nèi)容級(jí)別。
示例:粗體標(biāo)題、中等大小的副標(biāo)題和常規(guī)正文創(chuàng)建了清晰的閱讀路徑。
專業(yè)提示:使用一致的類型比例(例如,H1,H2,H3)以獲得更好的可讀性。
間距和對(duì)齊:組織內(nèi)容,確保清晰
空白(或負(fù)空間)與元素本身一樣重要——它可以防止混亂并將相關(guān)項(xiàng)目分組。
示例:部分之間的間距越大,不同的主題就越分散,而緊密的間距則連接相關(guān)元素(如標(biāo)簽及其輸入字段)。
專業(yè)提示:使用一致的邊距和填充來創(chuàng)造節(jié)奏和平衡。
放置:利用自然的掃描模式
在從左到右的語言(如英語)中,用戶通常以 F 模式或 Z 模式掃描,從左上角開始。
示例:關(guān)鍵操作(如“注冊(cè)”按鈕)通常放置在右上角或中心,以實(shí)現(xiàn)最大可見度。
專業(yè)提示:將關(guān)鍵元素放置在眼睛首先自然看到的位置。
現(xiàn)實(shí)世界中強(qiáng)大的視覺層次示例
Spotify
使用粗體標(biāo)題突出顯示播放列表和專輯。
對(duì)比色使 CTA(如“播放”按鈕)脫穎而出。
軌道之間一致的間距提高了可讀性。
Instagram
大型、居中的圖標(biāo)引導(dǎo)導(dǎo)航。
高對(duì)比度的個(gè)人資料操作(關(guān)注、消息)脫穎而出。
空格將帖子分開,以提供干凈、集中的提要。
多鄰國(guó)
超大按鈕鼓勵(lì)互動(dòng)。
頂部的進(jìn)度條營(yíng)造出一種成就感。
顏色編碼的反饋(綠色代表正確,紅色代表錯(cuò)誤)強(qiáng)化學(xué)習(xí)。
如何提高你的視覺層次技能
如果您想像專業(yè)人士一樣掌握視覺層次結(jié)構(gòu),請(qǐng)按照以下方法升級(jí):
研究熱門應(yīng)用——分析領(lǐng)先產(chǎn)品(例如 Airbnb、Apple 或 Notion)的布局結(jié)構(gòu)。
 對(duì)比前后效果——重新設(shè)計(jì)現(xiàn)有 UI,了解層級(jí)變化如何影響可用性。
使用 Figma 練習(xí)——在實(shí)際項(xiàng)目中嘗試不同的尺寸、對(duì)比度和間距。
最后的想法
優(yōu)秀的視覺層次結(jié)構(gòu)不僅僅關(guān)乎美觀,更關(guān)乎功能性、清晰度和用戶控制。當(dāng)用戶能夠立即了解應(yīng)該查看的位置和操作時(shí),他們會(huì)更加投入,更快地完成轉(zhuǎn)化,并享受體驗(yàn)。
通過掌握層次結(jié)構(gòu),您不僅可以設(shè)計(jì)更好的界面,還可以設(shè)計(jì)更好的體驗(yàn)。
蘭亭妙微(www.gerard.com.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

日歷

鏈接

個(gè)人資料

存檔

主站蜘蛛池模板: 色小姐av | 妇女bbbbb撒尿正面视频 | 96sao精品视频在线观看 | 五月婷婷导航 | 一区二区免费视频 | 永久免费的av在线电影网无码 | 日本中文字幕有码 | 欧美性极品 | 岛国av在线免费观看 | 少妇高潮惨叫久久久久久 | 亚欧色视频| 国产97在线 | 中文 | 91av蜜桃| 国产精东天美av影视传媒 | 日本中文亲子偷伦 | 五月色婷婷俺来也在线观看 | 在线中出| 精品欧美小视频在线观看 | 久久精品国产亚洲77777 | 中国少妇xxxx做受自拍 | 久久精品人妻少妇一区二区三区 | 亚洲一区二区三区免费视频 | 国精产品一品二品国精在线观看 | 欧美人与禽zozzo视频 | 亚洲婷婷av | 亚洲国产理论片在线播放 | 秋霞特色aa大片 | 国产精品久久久天天影视 | 97人人揉人人捏人人添 | 中文字幕不卡一区 | 69精品 | 国产婷婷成人久久av免费高清 | 男人和女人做爽爽视频 | 免费看一级黄色大全 | 国产高清小视频 | 亚洲人成网站18禁止 | 国产精品久久久久77777按摩 | 中文无套内谢少妇视频 | 一级大毛片 | 亚洲欧洲自拍拍偷精品 美利坚 | 亚洲精品成人网 | 综合天堂av久久久久久久 | 久久久国产99久久国产久灭火器 | 性欧美videos 另类喷潮 | 污视频大全 | 亚洲免费国产 | 日本美女视频一区 | aaaaav| 激情网五月天 | 97超碰在线免费 | 国产精品岛国久久久久久久久红粉 | av中文字幕亚洲 | 欧美日韩精品在线观看视频 | 99草在线视频 | 亚洲黄色精品 | 九一九色国产 | 中文无码人妻有码人妻中文字幕 | 国产三级视频在线 | 国产欧美日韩三级 | 一区二区在线免费 | 尹人色 | 国产欧美精品一区二区三区四区 | 射久久| 丰满的女人性猛交 | av在线中文 | 精品国产乱码久久久久久蜜臀 | 韩国精品一区二区三区四区 | 中国一级特黄真人毛片 | 亚洲视频一区 | 中文字幕免费在线看线人动作大片 | 国产真实交换配乱吟91 | 国产综合图片 | 91蜜桃视频| 国产精品69av | 欧美亚洲精品suv一区 | 越南性受xxx精品 | 久久av老司机精品网站导航 | 久久视频精品在线 | 最新国产精品亚洲 | 国产亚洲欧美在线观看 | 天天弄天天模 | 99热九九这里只有精品10 | 亚洲国产伊人 | 二色av| 天天爽夜夜爽夜夜爽 | 亚精区在二线三线区别99 | 久久综合狠狠色综合伊人 | 在线观看成年人视频 | 人与嘼av免费 | 岛国二区三区 | 国产精品免费视频一区二区 | 一区二区三区国产视频 | 挺进邻居丰满少妇的身体 | 国产九色在线播放九色 | 五月婷婷丁香激情 | 黄桃av无码免费一区二区三区 | 久久国产加勒比精品无码 | 国产欧美一区二区三区在线 | 中文字幕观看视频 | 中国美女囗交视频免费看 | 男女视频久久 | 欧美日韩一二 | a免费毛片| 国产一二三区免费视频 | 中国免费毛片 | 国产天堂亚洲国产碰碰 | 国产免费播放 | 国产69精品久久久久久妇女迅雷 | 国产精品女同一区二区久久夜 | 男人综合网 | 91热爆在线 | 麻豆久久久久久久 | 97国产精品一区二区 | 四虎影视永久免费观看在线 | 午夜精品久久久久久久久 | 国内精品久久久久影视 | 国产精品一区二区久久久 | 在线成人亚洲 | 国产专区av | 黄色小视频在线免费看 | 日本韩国在线 | 久久免费国产精品 | 青青青操 | 国产精品久久久久久影视 | 亚洲激情小视频 | 香港黄色网 | 美国免费黄色片 | 五月综合激情婷婷六月色窝 | 人妻av一区二区三区精品 | 亚洲欧美国产高清va在线播放 | 成人影片麻豆国产影片免费观看 | 久久精品久久久久久久 | 少妇光屁股影院 | 亚洲成a人片在线观看日本 国产精品无码成人午夜电影 | 成人免费在线视频网站 | 日日噜噜夜夜狠狠久久蜜桃 | 亚洲色图在线视频 | 欧洲女人性行为视频 | 中文字幕第2页 | 7788色淫网站免费观看 | 日韩国产小视频 | 在线观看免费一区 | a级毛片在线看日本 | 国产中文字幕av | 亚洲综合在线免费 | 极品美女啪啪 | 开心五月激情综合婷婷色 | 亚洲乱码国产乱码精品精乡村 | 国产日| 国产一区二区在线播放视频 | 黑人粗一硬一长一进一爽一a级 | 黄色av免费看 | 另类激情亚洲 | 日韩字幕 | 国产一区二区三区又黄又爽 | 欧美成人在线免费视频 | 国产乱了真实在线观看 | 一区二区不卡在线 | 亚洲男人天堂网 | 国产日韩精品一区二区三区在线 | 男女一级黄色 | 在线aaa| 久久精品国产乱子伦 | 97碰碰碰免费公开在线视频 | 亚洲天堂成人av | 欧美一级欧美三级在线观看 | 毛片大全免费 | 盗摄中年夫妇啪啪免费观看 | 黄色av网址在线观看 | 久久久久久夜精品精品免费啦 | a∨av白浆导航 | 三级视频久久 | 久久亚洲中文字幕精品一区 | 69视频免费在线观看 | 91在线观看视频 | 国产精品无码无片在线观看 | 久久疯狂做爰流白浆xx | 久久这里只有精品8 | 成人午夜激情影院 | 在线免费小视频 | 日韩av在线网站 | 国产吃瓜黑料一区二区 | 最新国产视频 | 狠狠色噜噜狠狠狠狠777米奇 | 色男人的天堂 | 免费久久网站 | 国产精品农村妇女白天高潮 | 青青草无码精品伊人久久 | 夜夜高潮天天爽欧美国产亚洲一区 | 永久黄色网址 | 四虎影视8848hh | 疯狂做受xxxx欧美肥白少妇 | 免费无码黄网站在线观看 | 精品国产一区二区三区护卡密 | 精品成人免费一区二区在线播放 | 五月天狠狠操 | 男人女人黄 色视频免费 | 精品无码av一区二区三区 | 波多野42部无码喷潮 | 黑人巨大无码中文字幕无码 | 91精品国产综合久久久密臀九色 | 久久久精品人妻一区二区三区四 | 国产不卡视频一区二区三区 | 高清欧美性猛交xxxx黑人猛交 | 日本美女动态图 | 一区二区三区四区免费 | 成人午夜小视频 | 日本一区免费视频 | 国产三级短视频 | 特大黑人巨交性xxxx | 日韩国产大片 | 国产精品一区免费看8c0m | 日本丰满大乳hd | 久久毛片一区二区三区 | 麻豆影视在线播放 | 亚洲欧美午夜 | 国产卡一卡二卡三 | 你懂的日韩 | 亚洲a麻豆乱潮 | 日本在线h | 操在线视频 | 日韩成人av免费在线观看 | jzzijzzij亚洲农村妇女 | 日韩精品毛片 | 夜夜嗷| 日本精品视频在线播放 | 日韩精品视频在线观看一区二区 | 国产精品毛片av在线看 | 欧美色图一区二区三区 | 日日夜夜干 | 伊人成综合网 | 中文字幕在线观看日本 | 99精品国产兔费观看久久 | 窝窝午夜色视频国产精品破 | 亚洲一区二区蜜桃 | av资源在线免费观看 | 天天色天天艹 | 成人一区二区三区视频在线观看 | 色欧美综合| 特级毛片爽www免费版 | 国产成人精品视频一区二区不卡 | 欧美日韩国产一级 | 国产激情久久久久 | 性久久久久久久久久 | 黄色视屏软件 | 中文字幕亚洲情99在线 | 2015www永久免费观看播放 | 欧美一区亚洲二区 | 国产精品久久久久久久蜜臀 | 爱情岛论坛亚洲品质自拍网址 | 黄色小视频网站免费 | 青青草免费视频在线播放 | 国产精品51 | 麻豆精品91| 亚洲爽爆av | 欧美日韩成人免费看片 | 中文字幕第一页在线 | 精品国产乱码久久久久久浪潮 | 91精品国产综合久久精品性色 | 午夜黄色剧场 | 亚洲精品久久久久久久蜜桃 | 中文精品欧美无线码一区 | 国产女人被狂躁到高潮小说 | 亚洲欧美激情精品一区二区 | 五月天婷婷缴情五月免费观看 | 99精品久久久久久中文字幕 | 美国黄色一级视频 | 99久久综合 | 性一交一黄一片 | va在线视频 | 亚洲愉拍99热成人精品 | 免费人成在线观看网站 | 欧美日韩一区二区精品 | 一区二区三区入口 | 国产一级80毛片古装片 | 爱情岛论坛亚洲品质自拍视频 | 成人理伦片免费 | 九九热com| 亚洲精品久久久蜜夜影视 | 国产精品偷伦免费观看视频 | 黄色视网站 | 99久热在线精品视频成人一区 | 日操操| 国产精品伦一区二区三区在线观看 | 少妇啪啪av一区二区三区 | 九九久久99 | 午夜影院免费体验区 | 午夜看片在线观看 | 欧美性猛交xx | 大岛优香中文av在线字幕 | 夹得我好紧好爽日出了水视频 | 国语对白做受xxxxx在线中国 | 色偷偷av一区二区三区 | 麻豆视频在线免费观看 | 成人在线超碰 | 激情综合图区 | 久久91精品久久久久清纯 | 久久超碰精品 | 四虎国产精品成人永久免费影视 | 青青草在线视频免费观看 | 亚洲欧美日韩综合俺去了 | 国产成人精品一区二区三区视频 | 蜜臀aⅴ精品一区二区三区 蜜臀aⅴ一区二区三区 | 国产精品岛国久久久久 | 成人区人妻精品一区二区不卡 | 天天看天天摸天天操 | 亚洲中文字幕无码一区在线 | 国产精品视频1区 | 91精品久久久久久久久中文字幕 | 日韩在线一 | 欧美激情3p | 亚洲精品黄色 | 九九爱爱视频 | 国产日韩欧美在线观看视频 | 在线综合视频 | 国产女主播户外勾搭野战 | 少妇粉嫩小泬喷水视频www | 暴力调教一区二区三区 | 五月激情五月婷婷 | 黄色一级视屏 | 欧美又大又色又爽aaaa片 | 日本a级黄绝片a一级啪啪 | 爱爱视频免费看 | 无码国产色欲xxxx视频 | 国产毛片毛片毛片毛片毛片 | 欧美激情一区二区三区四区 | 北条麻妃一区二区三区在线 | 日本黄动漫 | a免费网站免费观看 | 天干天干天啪啪夜爽爽99 | 国产精品嫩 | 精品欧洲av无码一区二区14 | 狠狠的干性视频 | 欧美精品一区二区视频在线观看 | 日日橹狠狠爱欧美视频 | 欧美日韩一区二区三区四区在线观看 | 国产精品区在线 | 国产香蕉视频在线播放 | 操碰视频在线 | 亚洲国产人午在线一二区 | 国产午夜精品av一区二区麻豆 | 污片免费看 | 少妇夜夜爽夜夜春夜夜高潮 | 性高湖久久久久久久久 | 亚洲欧美一二三区 | 国产日韩久久久久 | 午夜久久剧场 | 吃奶呻吟打开双腿做受在线视频 | 暴力强奷美女孕妇视频 | 九九re6热在线视频精品66 | 久久国产福利 | 亚洲人体视频 | 亚洲国产毛片aaaaa无费看 | 国产三级精品一区二区三区视频 | 亚洲精品无码国产片 | 国产福利视频在线观看 | 丁香五香天综合情 | 久久久久久99av无码免费网站 | 在线观看福利视频 | 欧美日韩精品一区二区三区不卡 | 87福利视频 | 久久欧| 少妇激情一区二区三区视频小说 | 18禁美女黄网站色大片免费看 | 无码国产精品一区二区免费式直播 | 国产精品免费网站 | 亚洲精品国精品久久99热 | 国产午夜精品理论片a级探花 | 一级片成人 | av一区二区三区在线观看 | 亚洲日韩国产二区无码 | 91香蕉在线视频 | 色77777| 久久久久久久久久久动漫 | 国产福利91精品一区二区三区 | 日韩欧美一级在线 | 亚洲永久视频 | 亚洲成a人v欧美综合天堂 | 日韩高清亚洲日韩精品一区 | 一级α片免费看刺激高潮视频 | 日韩中文字幕亚洲 | 国内精品伊人久久久久av | 日本欧美www视频网站 | 玩弄放荡人妻少妇系列视频 | 亚洲精品美女视频 | 国产精久久久久 | 啪啪av | 日本一道高清一区二区三区 | 好吊操这里只有精品 | 国产精品免费大片 | 激情偷乱人伦小说视频在线 | 欧美性生交xxxxx久久久 | 免费又黄又裸乳的视频 | 99在线播放 | 日韩无 | 久久久久久三区 | 日韩在线视 | 精品国产福利一区二区 | 亚欧在线免费观看 | 成年人午夜影院 | 92国产精品午夜福利 | 手机在线免费看av | 久久久亚洲国产精品麻豆综合天堂 | 亚洲高清在线观看 | 夜夜躁狠狠躁夜躁2021鲁大师 | 福利在线免费 | 制服.丝袜.亚洲.中文.综合懂色 | 亚洲精品图片一区15p | 国产精品区一区二区三在线播放 | 国产精品成人va在线播放 | 中国挤奶哺乳午夜片 | 国产后入清纯学生妹 | 国产全肉乱妇杂乱视频1 | 国产精成人品免费观看 | 曰韩毛片 | 亚洲日本va中文字幕久久 | 伦伦影院午夜理论片 | 午夜熟女插插xx免费视频 | 亚洲乱码中文字幕 | 伊人一区| 成人黄色在线看 | 欧美成人三级在线观看 | 无码人妻精品一区二区三区蜜桃 | 日韩新片王网 | 国产又粗又大又长 | 国产免费一区二区三区在线能观看 | 中文字幕精品久久久久 | 五月天在线观看 | 国产99久久久久久免费看农村 | 国产一区日韩二区欧美三区 | 性久久久 | 国产亚洲精品久久久91 | 香蕉在线影院 | 韩国三级丰满少妇高潮 | 国产 欧美 视频一区二区三区 | 国产精品资源 | jlzzjlzz欧美大全 | 最新亚洲人成无码网www电影 | 国产一区二区日本欧美精品久久久 | 中文字幕无码视频手机免费看 | 国产在线视频一区二区三区 | 午夜888 | 99视频在线 | 久久免费精彩视频 | 久久综合第一页 | 国产精品美女一区二区三区四区 | 在线看亚洲十八禁网站 | 天堂√最新版中文在线地址 | www色五月com| 久久97| 色婷婷a| 成人国产一区二区三区精品 | 视频区图片区小说区 | 国产69精品麻豆 | 性丰满白嫩白嫩的hd124 | 免费看片啪啪tv | 伊人av中文av狼人av | 把女邻居弄到潮喷的性经历 | 4438五月天| 欧美性色黄大片人与善 | 亚洲精品动漫成人3d无尽在线 | 天天射天天干天天插 | 国内精品九九久久精品 | 老司机成人永久免费视频 | 国产不卡毛片 | 亚洲爱婷婷色婷婷五月 | 99精品视频在线看 | 国产69精品久久久久孕妇大杂乱 | 中文字幕永久免费视频 | 在线国产小视频 | 男人的天堂中文字幕 | 亚洲欧美一区二区三区孕妇 | 久久99国产精一区二区三区 | 亚洲另类交 | 亚洲午夜18毛片在线看 | 亚洲成人a v | 91精品国产色综合久久不卡蜜臀 | 少妇高潮久久77777 | 日本少妇又色又爽又高潮看你 | 中文字幕观看在线 | 中国人妻被两个老外三p | 国产无套喷白浆在线播放 | 亚洲综合毛片 | 九九超碰| 国产精品久久欧美久久一区 | 136fldh福利微拍acg | 欧美黑吊大战白妞 | 色噜噜狠狠狠狠色综合久 | 久久影视中文字幕 | 伊人天天操 | 农村少妇无套内谢粗又长 | 国产美女黄色片 | 国产精品片一区二区三区 | 日本少妇高潮叫床声一区二 | 乱码av| 99综合久久| 揉着我的奶从后面进去视频 | 成人区精品一区二区 | 中文字幕三区 | 亚洲精品国产一区二区精华液 | 草免费视频 | 亚洲日本国产精品 | 他揉捏她两乳不停呻吟动态图 | 亚洲精品一区二三区 | 在线观看国产福利 | 亚洲熟妇无码乱子av电影 | 亚洲精品性视频 | 亚洲国色天香卡2卡3卡4 | 一区二区三区欧美在线 | 久久久久av综合网成人 | 暖暖av在线 | 97爱爱视频 | 中文字幕乱码亚洲精品一区 | 欧美做爰性生交视频 | 92精品 | 国产乱码卡一卡2卡三卡四 国产精品国产三级国产专区53 | 中国少妇xxxx做受视频 | 日韩欧美黄色大片 | 成年丰满熟妇午夜免费视频 | 日韩一二三四区 | 男女吻胸做爰摸下身 | 国产区小视频 | 人人妻人人澡人人爽欧美一区 | www.欧美色图.com | 美丽姑娘免费观看在线观看 | 午夜视频久久久 | 亚洲成av人片在线播放无码 | 夜夜爽妓女8888视频免费观看 | ,亚洲人成毛片在线播放 | 亚精区在二线三线区别99 | 国产成人久久精品流白浆 | 91国内在线观看 | 欧美片一区二区 | 精品一区二区三区在线播放 | 94久久国产乱子伦精品免费 | 精产国品一二三区 | 国产一级大黄 | 色爱综合网 | 东京热无码av一区二区 | 国产一级手机毛片 | 国产精品久久久久久52avav | 日本精品视频在线观看 | 一区二区久久 | 亚洲国产一区二区视频 | 国产视频手机在线观看 | 国产午夜精品一区二区 | 77777亚洲午夜久久多人 | 美日韩在线 | 午夜久久久久久 | 97人人澡人人爽人人模亚洲 | 制服丝袜在线看 | 人妻 偷拍 无码 中文字幕 | 亚洲专区路线二 | 亚洲成a人片777777久久 | 噜噜噜亚洲色成人网站 | 在线观看免费福利 | 欧美精品一区二区精品久久 | av怡红院 | 蜜臀久久99精品久久久 | 精品国产一区二区三区四区在线 | 娇小性xxxxx极品娇小小说 | 东北农村老女人乱淫视频毛片 | 国产精品久免费的黄网站 | 欧美一二三四成人免费视频 | 国产伦精品一区二区三区免费 | 中文字幕超清在线免费 | 五月色婷 | 免费一级做a爰片性视频 | 好色先生视频污 | 欧美影院在线 | 毛片网站在线 | 午夜视频网址 | 青青草视频网站 | 国产特黄大片aaaa毛片 | 亚洲午夜久久久精品一区二区三区 | 男人天堂av网站 | 7x7x7x人成影视| 玖玖在线观看视频 | 特级毛片www | 中文字幕在线视频第一页 | 成人毛片区 | 九九热这里有精品 | 丝袜美腿中文字幕 | 国产午夜免费视频 | 亚洲欧美一区在线 | 亚洲成人不卡 | 中午日产幕无线码1区 | 国产无线乱码一区二三区 | av中文字幕av | 亚洲欧美日韩精品色xxx | 色情久久久av熟女人妻网站 | 香蕉一级片 | 精品无码久久久久久国产 | 婷婷狠狠爱| 国产大学生自拍视频 | 韩国美女视频黄是免费 | 男人添女荫道口喷水 | 一区二区三区视频免费 | 亚洲欧美成人一区 | 欧美专区视频 | 欧美日韩精品乱国产 | 无码爆乳护士让我爽 | 先锋影音男人 | 亚洲男人的天堂在线 | 亚洲色播永久网址大全 | 有一婷婷色 | 黄色三级视频网站 | 中国少妇的呻吟xvideos | 欧美天天爽 | 国产一区精品在线 | 夜色毛片永久免费 | 丁香激情综合 | 国精产品99永久一区一区 | 日本一区二区三区视频免费看 | 99久久夜色精品国产亚洲1000部 |