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

首頁

2025年UI/UX趨勢

lanlanwork 系統UI設計文章及欣賞

2025 年,數字設計領域會有很多新機會,這都得靠創新來推動。設計師們現在越來越大膽,敢打破傳統套路,設計出的東西不僅要實用,還得有吸引力,能真正打動人。

比如,會有更多 3D 元素加入設計里,讓用戶感覺更真實、更沉浸;還有很多設計會把 “方便用戶” 和 “拉近人際距離” 放在首位,不再只追求技術炫酷,而是更關注用戶的實際需求和情感感受。

那么我們來看一下有哪些趨勢~

1、分區設計(便當格):像整理抽屜一樣規劃界面

你有沒有過這樣的體驗?打開一個 APP,信息像 “亂燉” 一樣堆在一起,找半天找不到重點。

2025 年的設計師學會了 “斷舍離”

就像日式便當盒把飯菜分成不同格子,現在設計師也把網頁或 APP 界面分成多個 “小格子”,每個格子放不同功能或內容(比如數據、圖片、文字)。

好處:信息更清晰,用戶一眼就能看出重點,而且設計師可以靈活排列,讓頁面既整齊又好看。

比如有的網站用這種格子展示不同模塊,重要內容更突出,干擾少。

分區設計技巧:格子的大小、間距、邊框都有講究!重要內容的格子更大、邊框更粗,次要信息的格子更 “低調”,就像媽媽給你裝便當,愛吃的菜永遠擺在最顯眼的位置。

以前網頁里的 3D 圖像是 “擺件”,現在它們會 “互動” 了!

3D 效果不是新鮮事,但現在更厲害:能互動、能沉浸!

比如網頁里的物體可以 360 度旋轉,虛擬試穿衣服、查看產品細節,甚至結合 AR/VR 讓你感覺身臨其境。

現在手機和瀏覽器性能更強了,3D 元素加載更快,甚至能在低配設備上流暢運行,設計師可以大膽用毛茸茸的 3D 圖標、會 “呼吸” 的動態按鈕(比如按鈕按下時像真的被按下去一樣凹陷)。

好處:畫面更立體、有趣,用戶體驗像在真實世界互動,不再是死板的圖片和文字。

圖片網站鏈接:https://kevinhilgendorf.com/

圖片網站鏈接:https://labs.chaingpt.org/

3、動態排版:文字會 “講故事” 了

字體不再老老實實不動,而是會 “跳舞”:大小變化、顏色漸變、跟著用戶操作移動,甚至根據內容情緒調整動畫(比如錯誤提示字體變紅閃爍,成功提示變綠飄動)。

好處:吸引注意力,傳遞品牌個性,比如讓標題動起來,用戶一眼就被抓住。

文字不再是 “死板的符號”,而是會 “表演” 的演員,我們可以做一些交互創意方面的案例假設

案例1:一個新聞網站的標題 “今日熱點”,當你滾動頁面時,“熱點” 兩個字會像火苗一樣跳動,吸引你點擊;電商網站的 “限時折扣” 按鈕,文字會從左到右 “跑馬燈” 式滾動,仿佛在喊 “快看我!”。

案例2:社交媒體 APP 的評論區,當有人給你發 “生日快樂”,“生日快樂” 這幾個字會飄出彩色 confetti(紙屑),還會放大縮小;如果收到一條提醒 “網絡連接失敗”,文字會變成紅色,輕微抖動,像在著急地告訴你 “出問題啦”。

案例3:未來的動態字體甚至能根據你的輸入語氣自動調整!比如你在聊天框里輸入 “氣死我了!”,發送后文字會變成紅色,扭曲變形,模擬 “憤怒” 的情緒;輸入 “哈哈哈哈哈”,文字會笑著上下彈跳,自帶喜感。

圖片網站鏈接:https://wodniack.dev/

圖片網站鏈接:https://romaingranai.xyz/

4、模糊 & 顆粒效果:給界面加一層 “溫柔濾鏡”

背景不再是純色或簡單漸變,而是加了 “濾鏡”:有的模糊像柔光,有的帶顆粒感像老照片,讓界面更有層次和溫度。

好處:不搶主內容的風頭,卻能增加細膩的質感,讓用戶覺得界面更精致、有 “呼吸感”。

想象一下:你的屏幕不再是冰冷的玻璃,而是像磨砂質感的燈罩,透著柔和的光 ——

例如:一個閱讀 APP 的背景,不是純灰色,而是帶點模糊的淺灰,像隔著一層薄霧,文字浮在上面更突出,眼睛看久了也不累;

短視頻 APP 的點贊按鈕背后,有淡淡的顆粒感,像老電影膠片,點擊時還會有輕微的 “沙沙” 聲,復古又治愈。

例如:有些網站的光標變成了半透明的小圓圈,移動時會在背景留下淡淡的拖影,像在雪地上踩出腳印;

購物車圖標點擊時,周圍會升起細小的顆粒,像撒了一把金粉,讓操作更有 “儀式感”。

現代人看膩了 “完美到反光” 的數字界面,這種帶點 “不完美” 的質感,反而讓人感覺親切,像摸到了真實的紙張或布料。

圖片網站鏈接:https://breadzine.com/

5、暗色模式:從 “暗黑冷酷” 到 “深夜暖燈”

以前的暗色模式是 “純黑配白字”,刺眼又冰冷,現在設計師給它加了 “柔光濾鏡”:

不是純黑背景配白字那種刺眼的暗模式,而是柔和的 “低對比度暗調”:比如深灰配淺灰,帶點淡淡光影,像傍晚的光線一樣舒服。

好處:保護眼睛,減少視覺疲勞,還營造出高級、安靜的氛圍,比傳統暗模式更溫馨。

顏色更溫柔:比如微信的暗色模式,背景不是純黑,而是深海軍藍,文字是淺灰色,圖標帶一點淡金色光澤,晚上刷手機像在暖黃色的臺燈下看書,不刺眼還很高級。

場景化設計:一個助眠 APP 的低光模式,界面會模擬 “月光效果”,背景有淡淡的云層陰影,按鈕像夜空中的星星一樣微微閃爍,配合白噪音,讓你還沒開始冥想就先放松下來。

保護眼睛更貼心:低對比度設計減少視覺疲勞,尤其適合長時間用手機的上班族、學生黨,再也不用擔心晚上刷手機 “亮瞎眼”。

圖片網站鏈接:https://www.chromatique.studio/

圖片網站鏈接:https://dribbble.com/shots/24281290-Kenn-Food-Processor-Landing-Page

圖片網站鏈接:https://silverdrive.nl/

6、UX文案:界面里的 “貼心小助手”

你有沒有被 APP或網站 的 “謎之提示” 搞懵過?比如 “操作異常,請重試”—— 到底哪里異常?現在設計師開始 “說人話” 了

按鈕上的字、提示信息、錯誤提醒…… 這些細節文字越來越重要。比如 “提交” 改成 “確認發布”,錯誤提示寫 “網絡好像斷了,點擊重試” 而不是冷冰冰的 “錯誤 404”。

好處:讓用戶知道該做什么,減少操作困惑,就像有個小助手在旁邊輕聲指導。

按鈕文案更具體:以前 “提交” 按鈕,現在改成 “確認并發布動態”,你一下就知道點了之后會發生什么;購物車的 “結算” 按鈕變成 “去支付(含 3 件商品)”,清楚告訴你當前購物車數量。

錯誤提示會 “安慰人”:當你登錄密碼輸錯,不再是 “密碼錯誤”,而是 “密碼好像不對哦,是不是字母大小寫搞錯了?試試找回密碼吧~”,帶點 emoji 和親切感,讓你不煩躁。

空狀態會 “引導”:比如一個筆記 APP 的空白頁,不再是冷冰冰的 “暫無筆記”,而是畫著一個小臺燈,配文 “點擊新建筆記,開始記錄今天的小確幸吧~”,鼓勵你行動起來。

圖片網站鏈接:https://clickup.com/

圖片網站鏈接:https://www.headspace.com/

7、生物識別:靠 “臉” 吃飯,告別密碼焦慮

不用記復雜密碼了!指紋、人臉、語音識別越來越普及,甚至未來可能用眼動或神經信號驗證。比如手機刷臉解鎖、支付時掃指紋,又快又安全。

好處:再也不怕忘記密碼,登錄像 “本能反應” 一樣自然。 

你還記得自己設過多少個密碼嗎?郵箱、銀行、社交軟件……2025 年,你只需要 “露個臉”

“掃個指紋”:

生活場景:早上上班,刷臉打開公司門禁;午休用指紋支付買咖啡;晚上回家,虹膜識別解鎖手機,全程不用輸密碼。甚至連銀行 APP 轉賬,看一眼攝像頭就能確認身份,安全又快捷。

默默驗證更省心:有些 APP 會 “偷偷” 驗證你 —— 比如你常用手機的手勢是右手拇指解鎖,系統會記錄你的握持姿勢,當檢測到左手拿手機且指紋不符時,自動觸發安全提醒,不用你手動操作,安全藏在細節里。

特殊場景:比如戴著手套不方便指紋解鎖?未來的可穿戴設備可能支持 “靜脈識別”,通過血管紋路確認身份,下雨天、運動時也能輕松解鎖。

圖片網站鏈接:https://dribbble.com/shots/23201694-Face-id

8、可穿戴設備設計:從 “戴在身上” 到 “長在身上”

智能手表不再是 “縮小版手機”,而是更懂你的 “貼身伙伴”:

智能手表、VR 眼鏡、健康手環等設備的設計越來越難:屏幕小,怎么讓用戶操作方便?

比如用手勢滑動、語音命令,甚至靠眨眼控制;還要考慮戴著舒服(輕、貼合手腕)、續航久、適應各種場景(運動時防水,強光下看得清)。

小屏幕大講究:比如一個運動手表,跑步時屏幕自動切換成 “極簡模式”,只顯示配速、心率、里程,字體超大,你 glancing(掃一眼)就能看清;當你停下來休息,屏幕會慢慢顯示更詳細的數據,像個貼心教練。

交互方式創新:VR 眼鏡不再靠手柄操作,你眨眨眼就能切換菜單,點點頭就能確認;智能手環檢測到你睡眠不好,早上會震動提醒 “昨晚睡眠質量一般,今天記得多喝水哦”,還會同步調整手機的屏幕亮度,幫你緩解疲勞。

場景化適配:比如滑雪專用智能眼鏡,強光下自動調暗鏡片,檢測到你加速滑行時,界面只顯示速度和路線,避免分心;潛水手表接觸到水時,自動鎖定屏幕防止誤觸,浮出水面后又恢復正常。

圖片網站鏈接:https://inspect-ar.com/en/

圖片網站鏈接:https://dribbble.com/shots/18628321-Fitness-Smart-Watch-UI

2025 年的設計趨勢:“以人為本”

界面不再只追求好看,還要讓用戶用得爽、有情感共鳴:分區清晰、3D 互動、動態字體吸引眼球,模糊背景和低光模式讓眼睛舒服;UX 寫作和生物識別減少操作麻煩,可穿戴設備更懂用戶的使用場景。

設計師們正在打破常規,讓數字產品不僅 “能用”,還 “好用”“愛用”,甚至讓你覺得 “這東西懂我!”作者:圖片版權歸原作者所有來源:

參考文章

https://medium.com/codeart-mk/ux-ui-trends-2025-818ea752c9f7

本文由人人都是產品經理作者【南設】,微信公眾號:【南設】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

題圖來自Unsplash,基于 CC0 協議。

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

在實際項目中保持 UI 設計一致性的方法?

lanlanwork 系統UI設計文章及欣賞

在實際項目里,UI 設計的一致性至關重要,它能打造連貫的用戶體驗,強化品牌認知。借鑒高手優化 UI 界面的思路,可從以下方面著手。?
14.png
  1. 構建完善的設計規范?
  • 明確視覺元素標準:高手在優化 UI 時,注重色彩、字體、圖標等元素的和諧統一。項目中,需精準定義主色、輔助色及其使用場景,如高手會用黑色平衡過多亮色,我們可規定電商 APP 主色用于關鍵操作按鈕,輔助色點綴信息提示。字體方面,確定標題、正文的字體、字號與字間距,像優化案例規范文本樣式提升可讀性。圖標也應風格一致,如線性、填充圖標分別用于特定功能,且尺寸、顏色統一。?
  • 規范布局與排版:參考高手梳理頁面布局的做法,建立清晰的布局規則。利用柵格系統規劃元素位置,確定導航欄、內容區比例。不同頁面類型,如列表頁、詳情頁,制定專屬布局模板,確保結構相似,方便用戶熟悉操作流程。同時,規范文本排版,統一對齊方式、段落間距,提升信息展示的條理性。?
  1. 組件化管理與復用?
  • 打造可復用組件庫:高手將重復元素設計成組件,提高效率與一致性。項目中,把輸入框、按鈕、彈窗等常用元素轉化為組件,每個組件具備明確功能與樣式,在不同頁面復用,像登錄頁、注冊頁的輸入框組件保持一致,減少設計與開發工作量。?
  • 實時更新與維護組件庫:項目推進中,依據需求變化與反饋,及時優化組件。如發現按鈕點擊效果不明顯,統一調整樣式與交互效果,確保所有使用該按鈕組件的頁面同步更新,維持一致性。?
  1. 強化團隊協作與溝通?
  • 設計與開發緊密配合:設計與開發團隊要密切溝通,開發人員依據設計規范實現界面,遇到問題及時反饋。如開發時發現某個組件在特定設備顯示異常,雙方共同協商,依據規范調整,保證線上效果與設計稿一致。?
  • 建立跨部門溝通機制:涉及市場、產品等多部門項目,需定期溝通設計方向與細節。市場部門反饋品牌形象需求,產品經理明確功能調整,設計師據此優化設計,確保各環節設計一致性。?
  1. 持續進行用戶測試與反饋收集?
  • 開展多階段用戶測試:項目不同階段邀請用戶測試,觀察其操作習慣與對界面的反應。若多數用戶在特定頁面操作困惑,可能是布局或交互不一致問題,及時依據規范優化。?
  • 依據反饋優化設計:收集用戶反饋意見,梳理與設計規范相關問題,如用戶反映圖標表意不明,參考規范重新設計,確保所有相關圖標更新,持續提升 UI 設計一致性與用戶體驗。

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

遵循 UI 設計原則:打造卓越用戶體驗的基石

lanlanwork 系統UI設計文章及欣賞

在數字化產品充斥生活每個角落的當下,用戶界面(UI)設計的優劣直接決定了產品的成敗。一套行之有效的 UI 設計原則,如同建筑藍圖一般,指引著設計師打造出易用、美觀且符合用戶期待的界面,為用戶帶來卓越的體驗。?
 
簡潔性原則:化繁為簡,聚焦核心?
簡潔性是 UI 設計的基石原則之一。它意味著去除一切不必要的元素,讓界面清晰明了,用戶能迅速理解和操作。以蘋果公司的產品界面為例,無論是 iOS 系統的手機桌面,還是 Mac 電腦的應用程序界面,都秉持著簡潔理念。在 iOS 系統中,主屏幕上的圖標設計簡潔直觀,僅通過簡單的圖形就能傳達應用功能。系統自帶的郵件應用,界面布局干凈,收件箱、發件箱等核心功能模塊一目了然,用戶無需復雜學習,就能輕松上手進行郵件的收發操作。這種簡潔設計不僅降低了用戶的認知負擔,更提升了操作效率,避免因界面繁雜而導致用戶迷失或產生挫敗感。?
 
一致性原則:統一體驗,建立信任?
一致性原則要求在整個產品的 UI 設計中,保持元素、交互和視覺風格的統一。從按鈕的樣式、顏色,到菜單的布局、操作方式,一致性貫穿始終。例如,微信在不同平臺(手機端、電腦端)以及不同功能模塊(聊天界面、朋友圈、公眾號閱讀界面等)都維持了高度的一致性。在聊天界面中,發送消息按鈕始終位于輸入框右側,且樣式、顏色固定;點贊、評論等操作在朋友圈和公眾號文章下的交互方式也完全一致。這種一致性讓用戶無論在何種設備、何種場景下使用微信,都能快速適應,減少學習成本,同時也強化了用戶對產品的熟悉感和信任感,塑造了統一且穩定的品牌形象。?
 
可讀性原則:清晰呈現,保障理解?
可讀性確保用戶能夠輕松閱讀界面上的文字內容。這涉及到字體選擇、字號大小、顏色對比度等多個方面。在一款新聞資訊類 APP 中,為了適應不同用戶的閱讀習慣和視覺需求,設計師精心挑選了簡潔易讀的字體,并根據屏幕尺寸和使用場景設置了多種字號選項。同時,嚴格把控文字與背景的顏色對比度,保證在各種光線條件下文字都清晰可辨。比如,在白天模式下,采用黑色文字搭配白色背景,對比度高,閱讀舒適;而在夜間模式,切換為白色文字搭配深色背景,既保護用戶眼睛,又不影響文字可讀性。清晰的文字呈現能讓用戶高效獲取信息,增強對產品的好感度。?
 
可訪問性原則:包容多元,服務全體?
可訪問性原則旨在確保所有用戶,無論是否存在身體殘障或其他特殊情況,都能平等使用產品。例如,為視障用戶提供屏幕閱讀器支持,這要求 UI 設計中的所有元素都具備準確的標簽描述,方便屏幕閱讀器識別并向用戶傳達信息。在圖片較多的電商 APP 中,每張商品圖片都添加了詳細的文字描述,以便視障用戶了解商品特征。對于行動不便的用戶,UI 設計要保證操作區域足夠大,操作手勢簡單易執行。一些智能電視的 UI 設計,遙控器操作界面的按鈕圖標大且間隔合理,用戶無需精準操作,就能輕松點擊選擇所需功能,真正做到讓產品惠及每一位用戶。?
 
反饋原則:實時溝通,增強互動?
反饋原則讓用戶在操作界面時能及時得到系統回應,知曉操作結果。當用戶點擊一個按鈕,按鈕會立即出現短暫的變色或微動畫效果,告知用戶操作已被接收;在文件上傳過程中,進度條實時顯示上傳進度,讓用戶了解任務進展。以支付寶的支付流程為例,用戶完成支付操作后,頁面會迅速彈出支付成功的提示框,并伴有簡短的音效反饋,同時顯示支付金額、交易時間等詳細信息。這種及時、明確的反饋機制增強了用戶與界面的互動感,讓用戶對操作充滿信心,避免因不確定而產生焦
 
慮情緒,提升了整體用戶體驗的流暢性?
UI 設計原則是打造優質用戶界面的核心準則。遵循簡潔性、一致性、可讀性、可訪問性和反饋等原則,設計師能夠構建出易用、高效且包容的數字產品界面,滿足用戶需求,贏得用戶信賴,助力產品在激烈的市場競爭中脫穎而出,在用戶心中留下深刻而美好的印象。
 

lanlanwrok 底部圖.png

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

車載 UI 設計:駛向智能出行新體驗

lanlanwork 系統UI設計文章及欣賞

在當今科技飛速發展的時代,汽車早已不再僅僅是一種交通工具,而是逐漸演變成一個集出行、娛樂、辦公等多功能于一體的智能移動空間。在這個轉變過程中,車載 UI(用戶界面)設計發揮著舉足輕重的作用,它不僅直接影響駕駛者與車輛之間的交互體驗,更是衡量汽車智能化水平的關鍵指標。

45.png

車載 UI 設計的獨特挑戰與需求

安全至上的設計準則

駕駛過程中,安全始終是首要考量因素。這就要求車載 UI 設計必須簡潔明了,信息呈現直觀易懂,最大程度減少駕駛者的視覺負擔和操作復雜度。例如,導航信息應突出關鍵路線指引,避免過多無關細節干擾視線;常用功能按鈕需布局合理,方便駕駛者在不轉移過多注意力的情況下進行操作。與手機、平板等設備不同,車載 UI 的操作不能依賴于長時間的視覺聚焦和精細的手指操作,因為這可能導致駕駛者分心,危及行車安全。

復雜環境適應性

車載環境具有特殊性,光照條件變化大,從明亮的戶外陽光直射到昏暗的地下停車場;同時,車輛行駛過程中的震動也可能影響屏幕顯示和操作的穩定性。因此,車載 UI 設計在色彩選擇上傾向于高對比度、高飽和度的顏色,以確保在各種光照條件下信息都能清晰可見。在一些強光環境下,深色背景搭配淺色文字的設計能有效減少反光,提高可讀性。針對震動問題,UI 設計需要保證操作區域足夠大,且操作反饋明確,防止誤操作。

硬件多樣性與適配難題

汽車市場上存在眾多不同品牌、型號的車輛,其車載屏幕的尺寸、分辨率、比例各不相同。從常見的 10 寸左右中控屏到一些豪華車型的超大尺寸屏幕,從傳統的 16:9 屏幕比例到新興的超寬屏比例,車載 UI 設計需要適應這些復雜的硬件環境。而且,與手機等設備相對統一的系統平臺不同,車載系統有安卓、Linux 等多種,甚至部分車企還有自主研發的系統,這進一步增加了 UI 設計的適配難度,需要設計師充分考慮不同系統的特性和限制。

車載 UI 設計的關鍵要素

界面布局與導航

合理的界面布局是車載 UI 設計的基礎。常見的布局方式有上下兩欄、左右兩欄等,以便清晰劃分不同功能區域。重要信息,如車速、剩余油量、導航指引等,通常置于屏幕顯眼位置,方便駕駛者快速獲取。導航系統作為車載 UI 的核心功能之一,其設計要簡潔直觀,具備清晰的路線規劃展示和實時路況提醒功能。例如,一些先進的車載導航 UI 會以 3D 地圖形式呈現,結合 AR 增強現實技術,將導航指引與現實道路場景融合,讓駕駛者更直觀地理解行駛方向。

交互方式創新

隨著技術的發展,車載 UI 的交互方式日益多樣化。除了傳統的觸摸操作,語音交互逐漸成為主流。駕駛者通過簡單的語音指令,就能完成導航設置、音樂播放、電話撥打等操作,解放雙手,提高駕駛安全性。手勢控制也開始應用于部分高端車型,駕駛者可以通過簡單的揮手、握拳等手勢實現界面切換、音量調節等功能,為駕駛帶來更多便利。一些車載 UI 還支持眼動追蹤交互,根據駕駛者的視線焦點智能調整界面顯示內容,實現更個性化、高效的交互體驗。

視覺設計

視覺設計賦予車載 UI 獨特的風格與魅力。色彩搭配方面,要綜合考慮品牌形象、駕駛環境和用戶心理。例如,豪華品牌可能會采用沉穩、高雅的色調來體現品質感;而年輕時尚的品牌則可能運用活潑、鮮明的色彩吸引目標用戶。圖標設計需簡潔明了、具有高度辨識度,即使在快速掃視的情況下,駕駛者也能準確理解其含義。同時,適當運用動畫和過渡效果可以提升界面的動態感和操作流暢性,但要注意避免過于復雜和炫目的動畫,以免分散駕駛者注意力。

車載 UI 設計的發展趨勢

個性化定制

現代消費者追求個性化,車載 UI 設計也不例外。未來,駕駛者將能夠根據自己的喜好,自由定制界面主題、布局、顏色等元素,打造獨一無二的車載交互空間。通過學習駕駛者的使用習慣和偏好,車載系統還能實現智能推薦,如根據常聽的音樂類型自動推薦新歌,根據行駛路線習慣提供個性化的導航建議,讓駕駛體驗更加貼合個人需求。

智能互聯與多屏聯動

車聯網技術的發展使車載 UI 與智能手機、智能家居等設備的互聯互通成為現實。駕駛者可以在車內無縫連接手機,同步電話、短信、日程等信息,甚至可以通過車載 UI 遠程控制家中的智能設備,實現真正的智能生活一體化。同時,多屏聯動趨勢愈發明顯,中控屏、儀表盤、抬頭顯示等多個屏幕之間信息共享、協同工作。例如,導航信息可以在儀表盤和中控屏上同時顯示,重要警示信息則通過抬頭顯示直接投射在駕駛者前方視野中,提高信息獲取效率。

情感化設計

情感化設計旨在通過 UI 元素引發駕駛者的情感共鳴,提升用戶與車輛之間的情感連接。這可能體現在界面的色彩、圖標、動畫等細節上,營造出溫馨、舒適、愉悅的駕駛氛圍。比如,在駕駛者完成一段長途駕駛后,車載 UI 彈出一個帶有鼓勵話語和溫馨動畫的界面,給予駕駛者心理上的慰藉;或者在特殊節日,UI 界面自動切換為相應的節日主題,增添駕駛樂趣。

 

車載 UI 設計正處于快速發展與變革的時期,它不斷適應技術進步和用戶需求的變化,致力于為駕駛者打造更加安全、便捷、個性化且富有情感的駕駛體驗。在未來的智能出行時代,優秀的車載 UI 設計將成為汽車品牌競爭的重要優勢,引領人們駛向更加美好的出行未來。
 

lanlanwrok 底部圖.png

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

用好容器類UI組件,實現界面空間膨脹術!

天宇 系統UI設計文章及欣賞

為了避免出現用戶所想看的信息被其他海量信息所淹沒的情況,設計師或者產研團隊需要思考如何做好信息收納,讓擁有厚重信息和功能的產品變得簡單清爽且易用。這篇文章里,作者就梳理了如何利用好容器類UI組件達成這一目標的策略,一起來看。

用戶的矛盾

如果你問用戶他需要什么,他的回答大概率是“我全都要”。但是如果你把他想要的東西全都展示在頁面上,會發生什么?

用戶被自己想要的信息淹沒了。他會說:“這根本沒法看,也沒法用,你們的設計太爛了。”

信息量大、操作復雜是B端產品的典型特征。我們如何把具有厚重信息和功能的產品,變得對用戶來說清爽易用?

設計師就像魔術師

My dad once told me that graphic design is the art of fitting a newspaper inside a matchbox, and I would say a lot of interface design is the same.

——Tess Gadd《UX cheat sheet: Preview and full display》

“界面設計就是把報紙塞進火柴盒的藝術”,這個比喻真是太妙了!(本土化:把大象裝進冰箱的藝術)。怎么把報紙塞進火柴盒?變魔術嗎?其實從某種角度上看,我們設計師就是魔術師——在適當的時機展示恰到好處的信息。

而我們用到的道具,就是容器類UI組件。區別于其他類型的組件(比如輸入框下拉框),容器類組件就像收納盒,也就是用來收納信息和操作的。

咱們今天就來探索一下,如何利用好容器類UI組件,完成“空間膨脹術”,把報紙絲滑地塞進火柴盒。

本文結構

本文會分成兩部分。

  • 第一部分:尋找到問題所在,探索出恰當的設計策略。
  • 第二部分:針對設定好的設計策略,提煉出“容器類”組件使用決策樹。

這個決策樹不限于提供以下價值:

  • 幫助設計師們在設計過程中高效決策,提升設計效率;
  • 幫助產研團隊在討論中快速達成一致、減少內耗;
  • 提升匯報時的說服力,獲得干系人支持。

下面我們正式開始吧~

PART 1:定位問題、設定策略

1. 問題所在

一個單點數據關聯的信息量能有多大?看一個網安行業的例子:

安全管理的目標是要確保資產安全。用戶要做的,首先是要清點資產,資產分類分級和業務信息是資產自身屬性。另外,資產本身會存在一系列漏洞,漏洞也有分類分級以及修復過程數據。如果漏洞被利用,就會產生威脅告警,而告警也存在分類分級及處置過程數據。

可以看出,將數據建立層層關聯后,從一個單點可以衍生出來的信息是海量的、無邊的。

我們當然不能把這全家桶一整個砸給用戶呀,用戶會被砸暈的。那我們該怎么做?

2. 設計策略

有兩個定律,跟“復雜”有關。

這兩個定律告訴我們一個道理:復雜,不會讓用戶覺得更好用,甚至增加了不必要的內耗。

處理復雜,我們一般有哪些辦法呢。

第一步,先刪除多余的部分。就好比我們整理房間時,先挑出垃圾和閑置。

第二步,把物品歸類。被子和被子疊在一起,衣服和衣服掛在一起,書本放在書架上。總之,不能都堆到床上。

第三步,漸進呈現。這就到了設計師要用“容器類”組件來完成“空間膨脹術”的環節了。

漸進呈現的設計理論有點像C4模型。C4模型是一種軟件架構可視化方法。它的獨特之處,就是從宏觀到微觀,設置了多個焦距,來層層遞進。

3. 內容分析

產品中的內容也存在層層遞進。內容之間的關系,常見以下兩種。

一種是從屬關系,或父子關系。

一種是關聯關系,數據以某種維度建立了關聯。

PART 2:容器,以及如何使用容器

1. 關于容器

我們如何用容器類UI組件,去放置這些復雜且層層關聯的內容?

以下是我們常見的容器類UI組件。

這些組件都可以用來收納,但是它們的特征差異也是巨大的,不能隨意混用。

我從“復雜度高低”和“關聯性強弱”這兩個坐標維度來劃分出四個象限,展示這幾個容器的特征。

左下角這里基本是空的,為什么?因為這個是按照組件的最大潛力來擺放的,高維度可以兼容低維度。

值得注意的是,有一些組件在當前頁面內,而有些在浮層中。浮層在空間Z軸上有高度,視覺表現為有投影。

容器可以展示信息,也可以用來承載操作。我們把這兩個場景分開考慮。首先,我們從信息展示場景開始,分析如何選擇容器。

2. 信息展示容器的決策樹

這里有幾個關鍵問題,我們逐個分析:

關鍵問題一:能否分清主次。

這個問題很難。用戶可能說“這個內容我需要”,但“需要”這個詞存在極大的灰度空間,我們要判斷“需要”是多“重要”,需要從這幾個維度去分析。

關鍵問題二:是否需要對比參考。

如果需要對比參考,不能使用tabs(選項卡)。因為tabs組件存在“排他性”——只有選中tab的子內容是展示的,未選中的tabs下的內容是被隱藏的。

以購物為例,用戶在對幾款產品進行對比挑選時,期望在一個界面同時看到幾款產品的參數和價格等。如果把產品數據放入各tab中,用戶就得在tab間反復橫跳,讓有限的短期記憶承受巨大壓力。

(↑案例:蘋果手機參數對比)

當然,如果沒有對比參考的需求,我們可以考慮把內容歸類到不同tabs下。在使用tabs組件時要確保內容分類合理、標簽文案簡潔易懂。這樣用戶才能理解并愿意探索。

(↑tabs的應用)

關鍵問題三:是否需要保持上下文。

有這樣一個場景:上級單位對多個下屬單位進行考核,打分有一定主觀性,需要參考其他單位得分。如果跳轉新頁面進行打分操作,就會斷開原有上下文的關系,影響用戶操作流暢性。

需要保持上下文的場景中,應避免迫使用戶離開父級頁面,建議在原頁面或浮層中呈現更多信息。

關鍵問題四:是否頻繁往返。

這個一般由任務類型決定,即當前操作是“主線任務”還是“支線任務”。

在主線任務場景中,用戶持續前進。比如網購商品,用戶在選購商品-確認地址-付費-下單完成···等步驟中環環前行。這時建議使用原頁面跳轉的方式。

支線任務完成后,一般要回歸主任務,也就是存在“往返”,就像從小路回歸到大路上。比如清理郵箱:用戶閱讀處理完一封未讀郵件后返回未讀列表,繼續處理下一條。在這里,“閱讀并處理一條郵件”是支線任務,“”清理郵箱”是主線任務。建議給“支線任務”新開標簽頁處理。

關鍵問題五:是不是必須看到的。

當前信息對用戶來說是否重要且關鍵?模態是較為“強勢”的交互模式。原則上,界面態度保持禮貌克制,以免打擾到用戶。

3. 功能操作決策樹

并不是所有容器都適合放置表單操作——部分容器因“排他性”的特征,會隱藏部分信息,可導致用戶遺漏重要操作。

我們一般將操作分成兩類:

  • 一類是需要用戶提交信息的,例如填寫表單,一般由用戶喚起。
  • 一類是接收和確認系統信息,一般由系統發起。

我們可以按照表單的體量,或者信息的重要及關鍵程度,選擇相應的UI組件。

4. 空間膨脹術

容器組件的的神奇之處是可以多次嵌套和疊加,創造出更多空間。

但注意保持信息體量和層級之間的平衡,避免過多嵌套和疊加,讓用戶在多個容器中迷失方向。

(↑案例:抽屜嵌套抽屜)

(↑案例:tabs嵌套tabs)

(↑案例:抽屜嵌套tabs)

今天的分享就到這里了

感謝讀到最后的讀者們,就用一句話來結束今天的分享吧~

設計一件東西時,總是要在更大的環境中考慮它——房間里的一把椅子、房子里的房間、環境中的房子、城市規劃中的環境。

——埃里爾·沙里寧 (1873–1950),芬蘭建筑師

本文由 @杜大大杜 原創發布于人人都是產品經理。未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

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

提升ToB系統用戶體驗:頁面跳轉設計的藝術與實踐

天宇 系統UI設計文章及欣賞

在 ToB 系統中,跳轉場景的合理分類和設計對用戶體驗至關重要。不同的跳轉方式(如當前頁刷新或新開標簽頁)直接到影響用戶的操作效率和系統性能。本文將從分類、設計建議以及用戶體驗的角度,深入探討如何優化 B 端系統中的跳轉場景。

競品廠商

一、金蝶

1.1. 金蝶·云星辰截圖

金蝶云·星辰聚焦小型企業在線經營和數字化管理,,提供財務云、稅務云、進銷存云、訂貨商城、費用報銷等SaaS服務,支持小型企業拓客開源、智能管理、實時決策,是一款適合小微型企業的云端財務進銷存管理軟件

1.1.1. 工作臺

1.1.2. 目錄頁

1.1.3. 列表頁

1.1.4. 新建頁

1.1.5. 詳情頁

1.1.6. 待辦待閱

1.1.7. 幫助系統

1.1.8. 系統后臺配置

1.2. 金蝶·云星空截圖

金蝶云星空是金蝶面向事業部制、多地點、多工廠等運營協同與管控型企業及集團公司,提供的一個通用ERP服務平臺

1.2.1. 工作臺

1.2.2. 列表頁

1.2.3. 新建頁

1.2.4. 詳情頁

1.2.5. 待辦帶閱

二、致遠

致遠的智能表單管理系統,因權限不夠,只有部分頁面;但依然可以看到其結構,也是系統內 Tab 頁簽跳轉

2.1. 工作臺

2.2. 后臺配置

三、MK·PaaS

四、泛微

4.1. 項目管理

4.1.1. 列表頁

4.1.2. 新建頁

4.1.3. 詳情頁

4.1.4. 待辦待閱

4.1.5. 幫助系統

4.1.6. 系統后臺配置

直接菜單切換,無跳轉(前臺應用配置,不需要跳轉頁面)

從用戶端進入后臺配置,新開頁簽

4.2. 公文管理

4.2.1. 列表頁

4.2.2. 新建頁

4.2.3. 詳情頁

五、TDesign騰訊企業設計體系

騰訊的企業設計體系中,也包含了這一層設計規則(功能)

六、總結

1. 頁面跳轉的場景

在 ToB 系統中,在不同場景下頁面的跳轉對于用戶體驗至關重要。不同的跳轉方式,直接影響到用戶的操作效率和系統性能。

從用戶操作角度,可以將頁面的跳轉分為三類「操作流程類」「信息查詢」「系統配置類」(端到端如 PC 端到移動端,不在此次討論范圍)

1.1 操作流程跳轉

用戶在系統中進行的具體操作,用戶執行某個任務或業務流程,如數據的創建、編輯、審批等。通常目標是推進某個操作流程的完成。

場景:如新建或編輯某數據,收到待辦審批某流程等

1.2 信息查詢與查看類跳轉

當用戶需要查詢、查看或分析系統內的數據和信息時,需要從一個頁面跳轉到另一個頁面,以獲取更多的詳細信息或進行更深入的分析。

場景:如打開某數據查看詳情,從工作臺查看詳細報表進行數據分析,查看操作歷史或日志記錄等

1.3 系統配置與管理跳轉

涉及系統設置、用戶權限管理、插件配置等功能的跳轉,通常由管理員或有權限的用戶執行,用于配置和管理系統的運行環境和用戶權限。如管理員需要從用戶管理頁面跳轉到權限設置頁面

場景:如打開后臺系統,配置系統參數或用戶權限

注:第三方系統跳轉、子域名跳轉屬于功能類特殊場景,已涵蓋在下方業務場景中

以上三種分類涵蓋了基本的頁面跳轉場景,但不夠具體,現按照以下具體場景,對競品的跳轉方式展開對比分析(注:彈窗屬于模態,不在此次范圍之內)

2. 頁面跳轉方式對比

跳轉方式名稱太長,簡稱為:

  1. 新開 Tab:新開瀏覽器 Tab 頁簽
  2. 系統 Tab:系統內置 Tab 頁簽
  3. 菜單跳轉:以菜單形式進行切換,如左側導航
  4. 當前頁刷新:在當前頁面,直接刷新內容

致遠的系統沒有體驗到完整的,只體驗到部分「智能表單管理系統」

3. 頁面跳轉對比總結

1)在同一個平臺或系統內的信息,沒有其他特殊情況時,最好不要新開瀏覽器 Tab 頁簽,這點泛微和金蝶保持了統一,都沒有新開瀏覽器 Tab 頁簽;

  • 泛微使用「抽屜」的形式;
  • 金蝶使用「系統內 Tab 頁簽」的形式;
  • 而 MK 以「****」為主,保持了自己的風格;

2)跳轉后臺系統、或其他子系統、子域名或第三方平臺時,這時可以新開「瀏覽器 Tab 頁簽」,展示其獨立完整信息結構

如幫助系統,有些幫助以文檔、視頻或論壇的形式存在,使用獨立頁簽可以很好的呈現其完整性;這點「MK」「金蝶」「泛微」都做到了統一;

4. 關于系統內/外跳轉的場景分析

4.1 適合系統外跳轉的場景

4.1.1. 跨系統跳轉

  • 跳轉目的與用戶意圖:用戶可能在不同業務系統之間切換,完成更復雜的業務操作。
  • 用戶角色與權限:跨系統的跳轉通常涉及不同權限的管理,需要保證用戶的訪問控制。
  • 適合新開標簽頁:跨系統跳轉時,為了避免用戶在回到原系統時迷失上下文,新開標簽頁是較為合理的選擇。

4.1.2. 二級域名跳轉

  • 跳轉目的與用戶意圖:用戶通常在同一組織的不同子系統之間切換,處理不同的業務需求。
  • 用戶角色與權限:每個二級域名子系統可能對應不同的用戶角色和權限管理,需要確保用戶身份和數據的一致性。
  • 適合新開標簽頁:二級域名跳轉建議新開標簽頁,以便用戶在處理完相關業務后能快速回到原系統。

4.1.3. 第三方集成跳轉

  • 跳轉目的與用戶意圖:用戶在系統中使用集成的第三方服務,通常涉及外部供應商或合作伙伴的系統。
  • 用戶角色與權限:第三方系統的操作可能需要特定的用戶角色或權限,確保這些權限在跳轉時無縫傳遞。
  • 適合新開標簽頁:跳轉到第三方系統時,新開標簽頁能夠使用戶在完成操作后輕松返回原系統。

4.2 適合系統內跳轉的場景

4.2.1. 頁面內跳轉

  • 跳轉目的與用戶意圖:通常用于細分任務,例如從概覽到詳細設置。用戶期望在同一頁面內快速找到所需內容。
  • 用戶角色與權限:所有用戶角色都適用,尤其是在配置或設置頁面中。
  • 適合當前頁系統內Tab頁簽:頁面內的內容切換適合使用當前頁來保持用戶的注意力。

4.2.2. 模塊間跳轉

  • 跳轉目的與用戶意圖:用于在不同功能模塊之間切換,用戶期望在不同模塊中完成不同的業務操作。
  • 用戶角色與權限:不同角色的用戶可能在不同模塊中有不同的權限。例如,管理員有訪問所有模塊的權限,而普通用戶可能僅限于特定模塊。
  • 適合當前系統內Tab頁簽:在模塊間跳轉時保持用戶上下文的一致性,有助于用戶在完成一個操作后快速進入下一個操作。

4.2.3. 流程間跳轉

  • 跳轉目的與用戶意圖:通常用于多步驟的業務流程,用戶期望順利完成每一步操作。
  • 用戶角色與權限:不同角色可能負責流程中的不同步驟,確保每個角色在合適的時機進入流程的對應步驟。
  • 適合當前頁系統內Tab頁簽:保持流程的連續性和用戶的操作連貫性。

1.2.4. 系統設置與管理跳轉

  • 跳轉目的與用戶意圖:用戶通常在此場景中調整系統的配置或管理系統用戶。
  • 用戶角色與權限:主要適用于管理員角色,需要明確區分不同角色的管理權限。
  • 適合當前頁系統內Tab頁簽:設置和管理類操作通常需要用戶集中注意力,在當前頁有助于用戶保持在特定任務上的聚焦。

5. 跳轉方式的優缺點

5.1 新開Tab頁簽

傳統的網頁瀏覽都是新開瀏覽器標簽頁的形式,實現內容的并行獨立展示,從而避免跳轉和返回的問題

優點:實現內容的并行、且獨立展示,從而避免跳轉和返回的問題;可以保證用戶并行操作,方便信息間的對比、參考;適合獨立子系統,完整呈現系統內容

缺點:打開頁簽太多時會很耗性能,造成卡頓;也會造成用戶迷路,找不到之前的內容

5.2 系統內 Tab 頁簽

在當前頁內,新增一行 tab,來承載內容

優點:系統內 Tab 頁,頁面是相互獨立的、互不干涉的,多窗口自由切換,并且信息保留在系統內部,用戶的視覺動線相對集中,交互操作成本更低

缺點:標簽頁欄屬于框架層級,會影響原有的頁面結構;且始終都會占據頁面位置,會進一步壓縮屏幕縱向有效空間;在整體的統一性上,也需要綜合考慮使用

5.3. 抽屜

一般從右側劃出抽屜浮層,來承載內容

優點:在當前頁面出現的抽屜浮層,可以避免頁面頻繁跳轉、以及頻繁返回帶來的頁面刷新導致用戶效率下降的問題

缺點:會遮擋一部分上文內容,無法會看;且抽屜寬度有限,無法承載更多內容信息(不過有些抽屜支持放大/縮小 可以避免這個問題)

最后補兩句

ToB 的頁面跳轉方式,應遵循完善的業務規則和使用邏輯,不能一刀切選擇一種方式(如一直新開瀏覽器 Tab 頁簽)。最好允許用戶自定義跳轉方式,如在系統設置中提供選項,讓用戶選擇某些操作是當前頁刷新還是新開標簽頁。這有助于滿足不同用戶的偏好,提高系統的靈活性和用戶滿意度。

在需要新開多個標簽頁的場景中,需要考慮瀏覽器的性能表現和用戶設備的資源消耗。可以通過優化加載速度、減少頁面資源占用等方式來提升用戶體驗。

清晰的跳轉反饋、完善的路徑和返回機制

而無論是當前頁刷新還是新開Tab頁簽、系統內 Tab 頁簽,系統都應在跳轉后給予用戶明確的反饋。比如加載進度條、操作成功提示等,讓用戶始終知道自己的操作狀態。在復雜的跳轉路徑中,設計面包屑導航、返回按鈕或快捷鍵,有助于用戶快速找到跳轉路徑并返回到之前的操作頁面,避免跳轉迷失。

通過完善的業務規則和使用邏輯,靈活地結合用戶行為分析和個性化設置,有助于提升系統的整體用戶體驗。在實際應用中,還需時刻關注系統性能,確保在多標簽頁和多終端跳轉的情況下,依然能保持流暢的用戶體驗。

本文由 @宇相 原創發布于人人都是產品經理。未經作者許可,禁止轉載

題圖來自Unsplash,基于CC0協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

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

高效 PC 端界面設計,如何兼顧美觀與實用?

ui設計分享達人 系統UI設計文章及欣賞

在數字化時代,PC 端軟件和應用程序無處不在,無論是辦公、娛樂還是學習,我們都離不開它們。一個優秀的 PC 端界面設計,不僅要美觀,讓用戶賞心悅目,更要實用,能夠高效地幫助用戶完成各種任務。那么,如何在設計中兼顧美觀與實用呢?本文將為你一一揭曉。

一、理解美觀與實用的內涵

(一)美觀的界面設計

美觀的界面設計并非僅僅是視覺上的好看,它涉及到色彩的協調搭配、元素的合理布局以及風格的統一。色彩能夠營造出不同的氛圍,比如藍色常給人專業、可靠的感覺,適合辦公類軟件;而橙色則充滿活力,常用于娛樂類應用。合理的元素布局可以引導用戶視線,讓重要信息一目了然。統一的風格則能增強界面的整體感和品牌辨識度。

(二)實用的界面設計

實用的界面設計重點在于用戶操作的便捷性和功能的高效實現。操作流程應簡潔明了,避免繁瑣的步驟。例如,文件保存功能應能讓用戶快速找到并完成保存動作。同時,界面要能準確傳達功能信息,讓用戶無需過多思考就能明白每個按鈕或菜單的作用。

二、平衡美觀與實用的難點

在實際設計中,平衡美觀與實用并非易事。有時為了追求美觀,可能會采用一些復雜的設計元素或獨特的布局,這可能會增加用戶理解和操作的難度,影響實用性。反之,如果過于注重實用,界面可能會顯得單調乏味,缺乏吸引力。比如,一些辦公軟件為了追求功能的全面展示,界面堆滿了各種圖標和菜單,導致用戶眼花繚亂,降低了使用效率。

三、實現美觀與實用兼顧的方法

(一)合理的布局設計

采用簡潔清晰的布局結構,如常見的 “F” 型或 “Z” 型布局。“F” 型布局符合用戶從左到右、從上到下的閱讀習慣,適用于信息展示較多的界面;“Z” 型布局則更適合引導用戶關注重要信息。同時,要合理劃分界面區域,將相關功能模塊放在一起,減少用戶的操作路徑。

(二)色彩的巧妙運用

選擇合適的色彩搭配,避免過于刺眼或沖突的顏色組合。一般來說,主色調不宜超過三種,以一種主色調為主,搭配一兩種輔助色。同時,要考慮色彩對用戶情緒和注意力的影響。比如,在閱讀類應用中,采用柔和的色調可以減輕用戶眼睛的疲勞;而在警示類信息中,使用醒目的紅色來引起用戶的注意。

(三)元素的簡潔與統一

界面元素要簡潔明了,避免過多的裝飾和復雜的圖案。圖標設計應具有明確的表意,讓用戶一看就懂。同時,保持界面元素風格的統一,包括字體、圖標、按鈕等,這樣可以增強界面的整體感和專業性。

(四)用戶反饋與迭代優化

在設計過程中,要充分收集用戶的反饋意見。通過用戶測試,了解用戶在使用過程中遇到的問題和需求,根據反饋對界面進行迭代優化。不斷調整和改進,才能使界面設計在美觀與實用之間找到最佳的平衡點。

四、案例分析

以某知名辦公軟件為例,其界面設計簡潔大方,采用了經典的藍色調,給人專業、可靠的感覺。布局上,將常用功能如新建、打開、保存等放在顯眼位置,方便用戶操作。同時,通過簡潔的圖標和清晰的菜單,讓用戶能夠快速找到所需功能。在不斷收集用戶反饋后,該軟件持續優化界面,如調整某些功能的位置,使其操作更加便捷,同時也保持了界面的美觀性。
高效 PC 端界面設計中,美觀與實用并非相互矛盾,而是相輔相成的。通過合理的布局設計、巧妙的色彩運用、簡潔統一的元素以及不斷的用戶反饋與迭代優化,我們完全可以打造出既美觀又實用的 PC 端界面,為用戶帶來更好的使用體驗。
 

沉浸交互,APP 界面設計新視界

ui設計分享達人 系統UI設計文章及欣賞

 
在移動互聯網蓬勃發展的今天,APP 已滲透到生活的各個角落。從日常社交到工作辦公,從休閑娛樂到學習求知,各類 APP 琳瑯滿目。在這激烈的競爭中,融入沉浸交互理念的 APP 界面設計,正成為吸引并留住用戶的核心競爭力。

一、沉浸交互,突破傳統藩籬

傳統 APP 界面設計多以功能展示為主,用戶操作時如同使用獨立工具,缺乏深度體驗。而沉浸交互打破了這種局限,通過精心設計,讓用戶仿若置身于與現實緊密相連又獨具特色的虛擬空間。
以一款旅行 APP 為例,打開它不再是單調的景點、酒店列表,而是借助 3D 動畫、全景展示等技術,瞬間將用戶 “傳送” 至目的地。滑動屏幕,就像漫步當地街巷;點擊景點,專業語音講解隨即響起,用戶從信息被動接收者,轉變為主動參與者。

二、沉浸交互的關鍵要素

  1. 視覺沉浸:精美的界面是吸引用戶的敲門磚。高清圖片、協調的色彩搭配與流暢動畫,共同營造出逼真且極具吸引力的視覺環境。攝影類 APP 在圖片展示時采用全屏高清,并搭配細膩光影,讓用戶仿若置身拍攝現場。
  1. 聽覺沉浸:合適的音效能強化沉浸感。游戲 APP 中逼真的環境音效與緊張背景音樂,能讓玩家迅速投入;冥想類 APP 里舒緩的自然音效,如潺潺流水、悠悠鳥鳴,幫助用戶放松身心,沉浸其中。
  1. 操作沉浸:簡潔、流暢且符合用戶習慣的操作流程至關重要。短視頻 APP 用戶只需上下滑動就能瀏覽視頻,簡單便捷,無需思索操作步驟,便可沉浸于內容海洋。

三、沉浸交互的顯著優勢

  1. 提升用戶體驗:豐富有趣的交互體驗,大幅提高用戶滿意度與忠誠度。
  1. 增強用戶粘性:用戶沉浸其中,更愿投入時間,APP 的使用時長和打開頻率隨之增加。
  1. 助力品牌塑造:獨特的交互設計使 APP 在競品中脫穎而出,塑造鮮明品牌形象,讓用戶記憶深刻。

四、未來展望

隨著 VR、AR 等技術的成熟,沉浸交互在 APP 界面設計中的應用將更加廣泛深入。未來,我們或許能通過手機參加虛擬演唱會,足不出戶游覽全球博物館。
沉浸交互為 APP 界面設計開拓了新視野,讓 APP 從單純的工具,轉變為充滿無限可能的體驗平臺。開發者與設計師應持續探索創新,將沉浸交互發揮到極致,為用戶帶來更多精彩。

小程序尺寸,一篇搞定

天宇 系統UI設計文章及欣賞

很多工作了幾年的設計師依然搞不懂小程序畫布創建依據和適配邏輯,所以今天針對這個問題,做一篇簡單的分享,來對這種基礎知識點做個掃盲。
首先小程序之所以叫小程序,因為它不是在手機、電腦系統上運行的應用(Native),而是在微信里運行的應用。也就是說,微信本身有套系統,而小程序的設計要遵循的是微信的設計規范,而不是蘋果、安卓、微軟的設計規范。
小程序尺寸,一篇搞定
 
 
這么做的原因是為了讓開發者只用一套代碼,就能在所有平臺、系統上的微信運行,并展示出相同的效果。這個邏輯和網頁類似,不管你在什么平臺還是系統只要安裝了瀏覽器,就可以讀取相同的網頁,而不用針對不同平臺寫一套全新的代碼出來。
雖然小程序主要在移動端運行,它的設計理念會盡量貼合原生應用,多數控件、組件、交互的設計方式一樣,但系統不同必然會導致細節上的差異,而界面的畫布就是最大的問題。
首先小程序官方創建了一套自己的語言,WXML、WXSS、WXS,分別對應網頁前端的 HTML、CSS、JavaScript。控制尺寸、樣式的語言是 WXSS,而它的使用的尺寸單位是 rpx。
rpx 不是厘米、像素這樣的物理單位,也不是移動端會用的 pt、dp、sp 這樣的矢量單位,而是一個很特殊的“
變種單位
”。
微信系統在渲染界面時,固定了移動端視圖窗口為 750rpx。不管你在蘋果還是安卓系統,用的是無劉海小屏 iPhoneSE 還是新款 iPhone15 破兒麥克斯,都使用 750rpx 渲染。
換句話說,
rpx 的長度即 —— 屏幕的 1/750
這是個比較抽象的概念,移動端使用矢量單位,是為了在屏幕變大的同時擴大畫布尺寸,提升顯示容量,所以有了適配原則,組件的應用自動布局適應空間的變化。
但是小程序不一樣,微信采用了最簡單粗暴的模式 —— 等比縮放。在不同尺寸的屏幕中,直接縮放內容來填滿窗口。比如下面是使用 iPhone13、iPhone15promax、Mac 端截圖的同一個小程序界面。
小程序尺寸,一篇搞定
 
 
如果我們把它們縮放成一樣的寬相互疊加,會發現元素大小是一樣的(Mac 端字體和移動端有差異,所以有一定寬度差異,但是字號相同)。
小程序尺寸,一篇搞定
 
 
但正常的移動端應用,使用自動布局而不是等比放大,覆蓋到一起是不會重疊的,比如下面 13 和 15promax 中同一張 APP 界面截圖的疊加。
小程序尺寸,一篇搞定
 
 
所以,微信的畫布就是 750rpx 寬適配到所有移動端屏幕,但高度會根據比例調整,畢竟不同屏幕的長寬比不一樣。
小程序尺寸,一篇搞定
 
 
再進一步分析,750 這個數值哪來的呢?一看就知道是 iPhone 早期和低端設備的實際分辨率,即 375 的 2x 數值。雖然現在移動端設計已經從 375 過渡到 390 再更新到目前的 393,但小程序依舊使用375。
原因和之前響應式分享中提到的一樣 ——
往大適配容易,往小適配難
現在市場上還保留數量可觀的 375 設備,以微信的角色和體量就勢必要兼容它們。既然兼容它們,那
設計和渲染就以兼容的最小畫布為準向上放大
,而沒有向下縮小的顧慮,這可以最大保證兼容性和可用性。
用 375 規格的設備去創建畫布是沒有問題的,不管你是使用 iPhone SE 還是 iPhone Mini 為標準都可以。
小程序尺寸,一篇搞定
 
 
因為系統用的 750rpx,所以原則上使用 750*1334 或 750*1624 畫布創建最佳,但實際情況還是有出路。因為官方組件庫用的是 375 寬....
小程序尺寸,一篇搞定
 
 
這又涉及到現實情況的考慮,畢竟設計是設計,開發是開發。在設計過程中我們往往會用其它應用設計好的素材,尤其一些大廠應用,小程序就是 APP 的翻版。如果把畫布做成 750 意味著素材得全部重調一遍,和重做差不多,而且參數和設計師習慣不同,會出很多錯誤。
所以,正常創建小程序的畫布使用常規的 375 畫布即可。而在進入開發階段,程序員可以直接在即時、 Figma、藍湖的標注設置中使用 2x 的倍率,既可以獲得 rpx 的具體數值。
這是個隱患問題,建議盡量在設計前和你們的前端程序員核對一遍懂不懂的如何換算數值,創建 375 是否有阻力,如果一定強調要用 750,你再自己展開后續的對線,誰贏了聽誰的……
除了標準移動端畫布外,還有個非常鬼畜的地方,就是組件庫內有個 Half-screen Dialog,里面的組件用的是 414 寬。這數值是 iPhone 8 Plus/ XS Max  的規格,總不能還特意去支持這些古代大屏吧?
414 是小程序在電腦端啟動時使用的規格,未經適配的小程序在電腦端的窗口就是固定的 414*736 。
小程序尺寸,一篇搞定
 
 
小程序尺寸,一篇搞定
 
 
用 736 這個高也和兼容小屏幕有關就不展開了,且小程序在電腦端也可以使用響應式的適配,只是這個需求實在太少,所以也不在這里多做介紹,感興趣的可以自己研究官方規范。
 
最后,我自己當 AI 做總結
  •  
    小程序使用 rpx 作為寬度單位
  •  
    移動端小程序使用 750rpx 渲染
  •  
    rpx 長度是移動端屏幕的 1/750
  •  
    小程序適配不同手機屏幕的方式是根據寬度等比縮放
  •  
    創建小程序設計畫布使用 375*667 或 375*812
  •  
    小程序在電腦端上會放大成 414*736
  •  
    電腦端調用的原生組件和移動端不同


作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZMTYzOTY3Ng==.html
來源:站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。
 

日歷

鏈接

個人資料

藍藍設計的小編 http://www.gerard.com.cn

存檔

主站蜘蛛池模板: 日韩在线 无码 精品 | 国产人妻人伦精品熟女麻豆 | 久久午夜一区二区 | 草民电影网午夜伦理电影网 | 中文字幕永久在线观看 | 网址在线观看你懂我意思吧免费的 | 狠狠插影院 | 夜夜骑夜夜欢 | 亚洲高清在线视频 | 激情午夜307 | 善良的小峓子2在钱中文版女主角 | 最近日本MV字幕免费观看在线 | 亚洲mv在线观看 | 色偷偷爱偷偷要 | 亚洲欧洲自拍偷拍 | 国产高潮久久精品AV无码 | 91精品乱码一区二区三区 | 国产午夜视频 | 久久国产一区二区三区 | 国产原创剧情麻豆在线 | 尤物久久99国产综合精品 | 麻豆久久国产亚洲精品超碰热 | 日本xxx在线观看免费播放 | 日产2021免费一二三四区在线 | 国产成年网站v片在线观看 国产成年人在线观看 | 桃花论坛POWERED2019 | 色一情一乱一伦一区二区三区 | 97成人碰碰在线人妻少妇 | 日本邪恶全彩工囗囗番海贼王 | 久久国产精品麻豆AV影视 | 欧美性猛交XXXX乱大交极品 | 国产人成精品综合欧美成人 | 97精品国偷拍自产在线 | 甜涩性爱下载 | 忘忧草在线影院www日本 | 日韩视频中文在线一区 | 久久综合色悠悠 | 在线视频 国产 日韩 欧美 | 精品一成人岛国片在线观看 | 蜜桃成熟时2电影免费观看d | 伊人大香线蕉影院在线播放 |