首頁

谷歌大刀闊斧,安卓UI將迎海量細節(jié)變更

lanlanwork 系統(tǒng)UI設計文章及欣賞

前段時間谷歌宣布,將于北京時間2025年5月14日1時(美國太平洋時間5月13日10時)舉行一場特別直播節(jié)目,名為《The Android Show:I/O Edition》。

該活動由 Android 生態(tài)系統(tǒng)總裁 Sameer Samat 主持,較原定于5月20日開幕的 Google I/O 開發(fā)者大會早了整整一周。

據(jù)谷歌介紹,此次特別節(jié)目將重點介紹Android 16系統(tǒng)的新特性及生態(tài)系統(tǒng)最新進展。

而在一周后的I/O 主題演講上,谷歌還會帶來包括全新 UX 設計語言、Android XR 擴展現(xiàn)實系統(tǒng)及車載 Gemini 應用在內(nèi)的多則Android 16訊息。

最新爆料顯示,谷歌正在對Android 進行大規(guī)模界面重新設計,包括快速設置、音量調(diào)節(jié)、狀態(tài)欄等多處細節(jié)改進。

新的狀態(tài)欄圖標和時鐘字體

其中一個明顯的視覺差異出現(xiàn)在狀態(tài)欄中,谷歌調(diào)整了 Wi-Fi、移動數(shù)據(jù)、飛行模式和電池的圖標。

Wi-Fi 和移動數(shù)據(jù)圖標現(xiàn)在是分段的,而 5G 和飛行模式圖標則更加醒目。同時,Android 的新電池圖標也更加多彩,當設備充電時呈現(xiàn)綠色背景,當電量低時變?yōu)榧t色。

文本時鐘所使用的字體發(fā)生了更微妙的變化,相較于之前字體要更大、更粗,目測更加方便用戶閱讀。

合并通知和快速設置面板

谷歌此次還增加了快速設置和通知面板合并,但保留了分割設計的許多改進,包括可調(diào)整大小的快速設置磁貼、用于 Wi-Fi 和藍牙的新一鍵切換、更有序的磁貼編輯器以及添加或刪除磁貼的一鍵快捷方式。

除此之外,它還引入了重新設計的亮度滑塊、向下箭頭(而不是向右)用于可展開的磁貼,以及之前提到的分段 Wi-Fi 圖標。

雖然基本布局相似,但外觀和感覺發(fā)生了巨大變化。這一界面不再是純黑色背景,面板下方會顯示模糊效果。

與通知區(qū)域相比,快速設置按鈕下的模糊效果較弱。當啟用淺色模式時,背景呈現(xiàn)出磨砂玻璃的外觀。在深色模式下,背景和開關(guān)切換到更深的灰色,并且兩者都應用了透明度。

更多模糊效果

除了快速設置面板,Pixel 啟動器的應用抽屜、最近應用菜單(多任務視圖)和 PIN 輸入屏幕也用上了模糊背景效果。

目前,這些區(qū)域根據(jù)系統(tǒng)主題(淺色或深色模式)使用純亮或暗灰色背景。

更簡潔緊湊的鎖屏界面

在最近發(fā)現(xiàn)的 Pixel 鎖屏布局中,谷歌將日期和天氣信息移動到時鐘下方或旁邊,將上下文信息組件移至其他位置。

此外,通知欄也變得更加緊湊??蛇x設置會在鎖屏上折疊通知,不再顯示完整的通知預覽,而是僅顯示應用圖標(確保不會遮擋壁紙)。輕觸此圖標可展開通知面板,顯示所有待處理通知。

除了上述變化,谷歌還針對全新UI進行了多處變動。但是目前暫不能確定,這些變化是否會實際應用到Android 16中,大家可以保持關(guān)注。

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

2025年UI設計的新趨勢,你不能錯過

lanlanwork 系統(tǒng)UI設計文章及欣賞

響應式與自適應設計的進階

在 2025 年,隨著智能設備種類的持續(xù)增多,從傳統(tǒng)的桌面電腦、筆記本電腦,到各式各樣的智能手機、平板電腦,甚至新興的可穿戴設備如智能手表、智能眼鏡等,用戶期望在不同設備上都能獲得一致且優(yōu)質(zhì)的體驗。響應式設計不再僅僅局限于簡單的頁面布局調(diào)整,而是在布局與交互層面實現(xiàn)更為深度的優(yōu)化。

 

在布局方面,CSS 網(wǎng)格布局(CSS Grid Layout)和彈性盒模型(Flexbox)技術(shù)得到更廣泛且深入的應用。CSS 網(wǎng)格布局允許設計師創(chuàng)建二維的網(wǎng)格結(jié)構(gòu),精確控制頁面元素在不同屏幕尺寸下的位置與大小。例如,在一個電商網(wǎng)站頁面中,通過 CSS 網(wǎng)格布局,可以使商品展示區(qū)域在桌面端以多列形式整齊排列,而在手機端自動調(diào)整為單列布局,同時保持圖片與文字信息的合理展示比例。彈性盒模型則更側(cè)重于一維布局,它能夠方便地實現(xiàn)元素的對齊、分布與自適應拉伸。在一個導航欄設計中,使用彈性盒模型可以確保導航項在不同屏幕寬度下均勻分布,且當屏幕空間不足時,自動調(diào)整導航項的顯示方式,如將部分次要導航項折疊為下拉菜單。

 

交互層面,響應式交互設計也有了新的發(fā)展。例如,手勢交互在不同設備上的一致性與適應性增強。在移動端,常見的滑動、縮放、長按等手勢操作,在可穿戴設備上也能以類似且符合設備特點的方式實現(xiàn)。在智能手表上,用戶通過簡單的左右滑動屏幕即可切換不同功能界面,這種交互方式與手機端的操作習慣相呼應,同時又適應了智能手表屏幕小、操作空間有限的特點。此外,視差滾動效果在響應式設計中也得到創(chuàng)新應用。在一些品牌宣傳網(wǎng)站中,視差滾動效果不僅能在桌面端營造出富有層次感的視覺體驗,在移動端同樣可以通過優(yōu)化,利用有限的屏幕空間展現(xiàn)獨特的視覺效果,吸引用戶注意力,引導用戶深入瀏覽頁面內(nèi)容。

極簡主義與情感化設計的融合

極簡主義設計風格在 2025 年依然盛行,但其內(nèi)涵有了新的拓展,與情感化設計深度融合。極簡主義強調(diào)去除不必要的元素,以簡潔的界面呈現(xiàn)核心內(nèi)容與功能,提升用戶操作效率。而情感化設計則關(guān)注用戶的情感需求,通過設計元素引發(fā)用戶的情感共鳴。

 

從色彩運用來看,在極簡主義的基礎上,設計師更傾向于選擇具有情感暗示的色彩。柔和的暖色調(diào)如淡橙色、淺黃色,常用于營造溫馨、友好的氛圍,在一些兒童教育類 APP 或健康養(yǎng)生類應用中較為常見,能夠讓用戶在使用過程中感受到舒適與安心。冷色調(diào)中的深藍色,因其給人專業(yè)、可靠的感覺,常被用于金融類、辦公類應用的界面設計,增強用戶對產(chǎn)品的信任感。

圖標設計也體現(xiàn)了這種融合趨勢。極簡主義的圖標造型簡潔,僅保留最能代表功能的關(guān)鍵特征。在此基礎上,通過賦予圖標一些獨特的細節(jié)或動效來傳遞情感。例如,一個音樂播放應用的播放按鈕圖標,在靜止時是一個簡潔的三角形,當用戶點擊播放時,圖標會以一種柔和的動畫效果展開,如同音樂從按鈕中流淌出來,這種微妙的動效設計增加了用戶與圖標之間的互動樂趣,引發(fā)積極的情感反饋。

文案在極簡主義與情感化設計融合中也起著重要作用。簡潔明了的文案不僅能夠準確傳達信息,還能通過語氣、措辭傳遞情感。在一個在線購物 APP 的訂單確認頁面,文案 “您的寶貝已踏上旅程,期待與您早日相見”,相比單純的 “訂單已確認”,更能讓用戶感受到購物的愉悅與期待,從情感層面提升用戶對品牌的好感度。

 

AR 與 VR 在 UI 設計中的拓展

增強現(xiàn)實(AR)與虛擬現(xiàn)實(VR)技術(shù)在 2025 年逐漸成熟,其在 UI 設計領(lǐng)域的應用場景不斷拓展。在 AR 購物領(lǐng)域,消費者通過手機或 AR 眼鏡,能夠在現(xiàn)實環(huán)境中虛擬試穿衣服、擺放家具等。例如,一家家居品牌推出的 AR 應用,用戶可以在手機上選擇心儀的家具款式,然后通過手機攝像頭將家具虛擬放置在自己家中的實際場景中,查看家具與周圍環(huán)境的搭配效果。在這個過程中,UI 設計需要考慮如何在現(xiàn)實場景中清晰地展示虛擬家具的信息,如價格、材質(zhì)、尺寸等,同時不干擾用戶對現(xiàn)實與虛擬融合場景的體驗。設計師通常會采用半透明的懸浮卡片形式展示信息,卡片的位置與大小會根據(jù)用戶的視角和操作進行動態(tài)調(diào)整,確保信息的可讀性與展示的自然性。

在 VR 虛擬展廳方面,企業(yè)可以利用 VR 技術(shù)打造沉浸式的產(chǎn)品展示空間。UI 設計在其中負責構(gòu)建導航系統(tǒng)、交互界面以及信息展示方式。用戶在虛擬展廳中通過手柄或手勢操作進行瀏覽,UI 設計需要提供直觀的導航指引,如在展廳地面設置虛擬的引導線,或者在用戶視野邊緣顯示簡潔的導航圖標,引導用戶前往不同的展示區(qū)域。當用戶靠近展品時,自動彈出詳細的產(chǎn)品介紹窗口,窗口的設計風格與虛擬展廳的整體氛圍相協(xié)調(diào),采用 3D 立體效果展示產(chǎn)品細節(jié),增強用戶的沉浸感與交互體驗。技術(shù)實現(xiàn)上,借助 Unity、Unreal Engine 等游戲開發(fā)引擎,結(jié)合 AR/VR 設備的傳感器數(shù)據(jù),實現(xiàn)精準的交互響應與逼真的視覺效果。

 

數(shù)據(jù)驅(qū)動設計的興起

數(shù)據(jù)驅(qū)動設計在 2025 年成為 UI 設計的重要趨勢。通過收集與分析用戶在產(chǎn)品使用過程中的各種數(shù)據(jù),設計師能夠深入了解用戶行為與偏好,從而精準優(yōu)化 UI 設計的各個環(huán)節(jié)。

在界面布局優(yōu)化方面,通過分析用戶的點擊熱圖數(shù)據(jù),設計師可以了解用戶在頁面上的注意力分布情況。例如,在一個新聞資訊 APP 的首頁,通過點擊熱圖發(fā)現(xiàn)大部分用戶集中點擊頁面頂部的熱門新聞區(qū)域以及特定分類標簽,而頁面底部的一些功能按鈕很少被點擊?;谶@些數(shù)據(jù),設計師可以調(diào)整界面布局,將重要的新聞內(nèi)容與常用功能放置在更易于用戶操作的位置,提高用戶獲取信息與使用功能的效率。

功能設計同樣離不開數(shù)據(jù)支持。通過用戶行為數(shù)據(jù)的分析,發(fā)現(xiàn)用戶在某個功能模塊的使用頻率較低,進一步研究發(fā)現(xiàn)是該功能的操作流程過于復雜。設計師可以根據(jù)這些數(shù)據(jù)反饋,簡化操作流程,重新設計功能交互方式。比如,在一個在線支付流程中,通過數(shù)據(jù)分析發(fā)現(xiàn)用戶在填寫支付信息環(huán)節(jié)的放棄率較高,經(jīng)過優(yōu)化,采用自動填充用戶常用支付信息、簡化支付步驟等方式,有效提高了支付成功率,提升了用戶體驗。

 

此外,數(shù)據(jù)驅(qū)動設計還體現(xiàn)在個性化推薦方面。通過收集用戶的瀏覽歷史、收藏記錄、購買行為等數(shù)據(jù),利用機器學習算法為用戶提供個性化的內(nèi)容推薦。在一個視頻播放平臺中,根據(jù)用戶的觀看偏好,為用戶推薦符合其興趣的視頻內(nèi)容,UI 設計則需要考慮如何以吸引人的方式展示這些個性化推薦內(nèi)容,如采用瀑布流布局、個性化的封面設計等,提高用戶對推薦內(nèi)容的點擊率與觀看時長。

可持續(xù)設計理念在 UI 中的體現(xiàn)

隨著環(huán)保意識的增強,可持續(xù)設計理念在 2025 年的 UI 設計中愈發(fā)重要。在資源節(jié)約方面,UI 設計注重減少數(shù)據(jù)傳輸量與能耗。例如,在圖片處理上,采用 WebP 等高效的圖片格式,相比傳統(tǒng)的 JPEG、PNG 格式,WebP 格式在保證圖片質(zhì)量的前提下,能夠大幅減少圖片文件大小,降低數(shù)據(jù)傳輸量,節(jié)省用戶的流量消耗,同時也減少了服務器的存儲與傳輸壓力。在動畫效果設計中,避免使用過于復雜、高能耗的動畫,采用簡潔且必要的動畫效果來提升用戶體驗,減少設備的電量消耗。

 

從綠色環(huán)保角度,UI 設計在色彩選擇與界面風格上也有所體現(xiàn)。大量采用自然元素的色彩,如綠色、藍色等,營造與自然和諧的視覺感受。在一些環(huán)保主題的應用中,界面設計模仿自然生態(tài)場景,如以森林、河流等為背景元素,傳達環(huán)保理念。同時,在設計中避免使用過于刺眼、鮮艷且可能對用戶視覺造成疲勞的色彩組合,減少不必要的視覺干擾,讓用戶在使用產(chǎn)品過程中感受到舒適與放松,從側(cè)面體現(xiàn)可持續(xù)設計中對用戶身心健康的關(guān)注。此外,在產(chǎn)品更新與維護方面,UI 設計考慮到版本迭代的可持續(xù)性,采用模塊化設計,方便進行局部更新與優(yōu)化,減少因整體更新帶來的資源浪費與用戶學習成本。


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

APP 設計中的色彩心理學:如何用色彩提升用戶體驗

ui設計分享達人 系統(tǒng)UI設計文章及欣賞

在數(shù)字化時代,APP 已成為人們?nèi)粘I钪胁豢苫蛉钡囊徊糠?。用戶在打開一個 APP 的瞬間,首先映入眼簾的便是其色彩搭配,而這些色彩并非只是視覺上的裝飾,它們蘊含著強大的心理暗示力量,能夠潛移默化地影響用戶的情緒、行為和對 APP 的整體感知。色彩心理學作為一門研究色彩如何影響人類心理和行為的學科,在 APP 設計領(lǐng)域發(fā)揮著關(guān)鍵作用,巧妙運用色彩心理學,能夠有效提升用戶體驗。
79.png?
色彩與情感的微妙關(guān)聯(lián)?
不同的色彩會引發(fā)用戶不同的情感反應。紅色,作為一種極具沖擊力的色彩,往往與激情、活力和緊迫感聯(lián)系在一起。在電商類 APP 中,紅色常用于限時折扣、促銷活動的按鈕和標識,能夠迅速吸引用戶注意力,激發(fā)用戶的購買欲望。例如,淘寶、京東等購物 APP 在大促期間,頁面上大量使用紅色元素,渲?
染出熱烈購物氛圍,刺激用戶下單。然而,紅色使用過度也可能帶來壓迫感和焦慮感,因此需要合理把控其使用范圍和比例。?
藍色,常被視為冷靜、信任和專業(yè)的象征。許多社交類、辦公類 APP 偏愛藍色系,如微信、釘釘?shù)?。藍色能夠讓用戶在使用過程中感到安心和放松,有助于建立用戶對 APP 的信任感。同時,藍色在視覺上具有一定的收縮性,不會對用戶造成強烈的視覺沖擊,長時間使用不易產(chǎn)生視覺疲勞,非常適合需要用戶長時間停留和操作的 APP。?
綠色代表著自然、和平與健康,在醫(yī)療健康類、環(huán)保類 APP 中應用廣泛。比如一些運動健身 APP,使用綠色為主色調(diào),傳達出積極健康的生活理念,讓用戶在使用時感受到活力與生機,激勵用戶堅持運動。此外,綠色還能緩解眼睛疲勞,為用戶帶來舒適的視覺體驗。?
黃色則給人溫暖、歡快、活潑的感覺,常用于兒童類、娛樂類 APP。像寶寶巴士系列 APP,大量運用明亮的黃色,營造出輕松愉快的氛圍,符合兒童的心理特點,能夠吸引兒童的注意力,激發(fā)他們的學習興趣和探索欲望。?
色彩對用戶行為的影響?
色彩不僅能影響用戶的情感,還能引導用戶的行為。在 APP 的界面設計中,合理運用色彩可以突出重要信息和功能按鈕,幫助用戶快速找到所需內(nèi)容,提高操作效率。例如,將主要的操作按鈕,如 “立即購買”“提交”“確認” 等設置為醒目的顏色,與背景和其他元素形成鮮明對比,能夠引導用戶的視線,促使用戶完成相應操作。?
色彩的一致性和連貫性也對用戶行為有著重要影響。當一個 APP 的色彩體系在各個頁面和功能模塊中保持一致時,用戶會更容易理解和適應 APP 的操作邏輯,減少學習成本,提升使用流暢度。相反,如果色彩搭配混亂,用戶可能會感到困惑,甚至產(chǎn)生抵觸情緒,降低對 APP 的好感度和使用頻率。
83.png?
此外,色彩還可以用于傳達反饋信息。當用戶操作成功時,通常會出現(xiàn)綠色的提示信息,傳達出積極、安全的信號;而當操作出現(xiàn)錯誤時,紅色警示信息則會引起用戶的注意,提醒用戶及時修正問題。這種通過色彩傳遞反饋的方式,能夠讓用戶更直觀地了解操作結(jié)果,增強用戶與 APP 之間的互動感。?
APP 設計中色彩運用的策略?
在 APP 設計中運用色彩心理學,需要綜合考慮多個因素。首先,要明確 APP 的定位和目標用戶群體。不同年齡段、性別、文化背景的用戶對色彩的偏好和感知存在差異。例如,年輕用戶群體可能更傾向于時尚、個性的色彩搭配,而中老年用戶則可能更喜歡簡潔、穩(wěn)重的色調(diào)。因此,在設計前進行充分的用戶調(diào)研,了解目標用戶的色彩喜好和心理需求,是打造成功 APP 色彩方案的基礎。?
其次,要結(jié)合品牌形象和產(chǎn)品特性來選擇色彩。色彩是品牌形象的重要組成部分,能夠幫助用戶快速識別和記憶品牌。例如,可口可樂的紅色、星巴克的綠色,都已成為品牌的標志性色彩,用戶看到這些顏色就能聯(lián)想到相應的品牌。對于 APP 來說,選擇與品牌形象相符的色彩,能夠強化品牌認知,提升品牌影響力。同時,色彩還應與 APP 的功能和使用場景相匹配,如夜間模式的 APP,通常會采用深色系,降低光線對用戶眼睛的刺激,提供舒適的使用環(huán)境。?
最后,要注重色彩的搭配和調(diào)和。合理的色彩搭配能夠營造出和諧、美觀的界面效果,而不當?shù)拇钆鋭t可能導致視覺沖突和審美疲勞。在進行色彩搭配時,可以運用色彩理論,如互補色、類似色、三原色等搭配原則,創(chuàng)造出富有層次感和吸引力的界面。同時,要注意控制色彩的數(shù)量和比例,避免使用過于繁雜的色彩,保持界面的簡潔和清晰。?
色彩心理學在 APP 設計中具有不可忽視的作用。通過深入了解色彩與情感、行為之間的關(guān)系,合理運用色彩搭配策略,設計師能夠打造出既美觀又實用的 APP 界面,提升用戶的使用體驗,增強用戶對 APP 的粘性和忠誠度。在未來的 APP 設計中,隨著人們對用戶體驗的要求不斷提高,色彩心理學將發(fā)揮更加重要的作用,為用戶帶來更加優(yōu)質(zhì)、舒適的數(shù)字化體驗。

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

從用戶行為分析到 APP 設計優(yōu)化:提升留存率的關(guān)鍵策略

ui設計分享達人 系統(tǒng)UI設計文章及欣賞

在移動互聯(lián)網(wǎng)競爭白熱化的當下,APP 市場早已從 “跑馬圈地” 的增量時代,邁入了 “精耕細作” 的存量時代。據(jù)統(tǒng)計,超過 70% 的 APP 在首次安裝后的三天內(nèi)就被用戶棄用,如何提升用戶留存率成為開發(fā)者和企業(yè)亟待解決的核心問題。而答案,就藏在對用戶行為的深度剖析與 APP 設計的持續(xù)優(yōu)化之中。
48.png?
精準洞察:用戶行為分析是設計優(yōu)化的基石?
用戶行為分析是通過收集、整理和解讀用戶在 APP 內(nèi)的操作數(shù)據(jù),如點擊次數(shù)、使用時長、頁面停留時間、功能使用頻率等,挖掘用戶需求與行為規(guī)律的過程。以短視頻類 APP 為例,通過分析用戶的瀏覽記錄、點贊收藏內(nèi)容,能夠精準定位用戶的興趣偏好。若發(fā)現(xiàn)大量用戶頻繁觀看美食制作視頻,APP 便可針對性地優(yōu)化首頁推薦算法,增加美食類內(nèi)容的曝光度,同時在搜索欄設置 “美食教程” 等熱門關(guān)鍵詞,方便用戶快速找到感興趣的內(nèi)容。?
除了線上數(shù)據(jù),用戶調(diào)研也是行為分析的重要手段。通過問卷調(diào)查、用戶訪談、焦點小組等方式,直接傾聽用戶的使用感受與反饋。某社交類 APP 在調(diào)研中發(fā)現(xiàn),許多用戶抱怨私信功能操作繁瑣,消息通知不夠及時。基于此,開發(fā)團隊對私信界面進行重新設計,簡化消息發(fā)送流程,并優(yōu)化通知機制,使用戶能夠更便捷地與好友溝通,有效提升了用戶活躍度與留存率。
49.png?
界面優(yōu)化:打造簡潔流暢的使用體驗?
APP 的界面設計直接影響用戶的第一印象和使用體驗。簡潔直觀的界面能夠降低用戶的學習成本,使用戶快速上手。以支付寶 APP 為例,其首頁采用模塊化設計,將高頻功能如掃碼支付、轉(zhuǎn)賬、生活繳費等置于顯眼位置,用戶無需花費過多時間尋找,即可完成操作。同時,合理運用色彩搭配與圖標設計,突出重要功能按鈕,引導用戶視線,減少操作失誤。?
交互設計的流暢性同樣至關(guān)重要。頁面跳轉(zhuǎn)、加載速度、動效設計等細節(jié)都會影響用戶的使用感受。當用戶點擊某個按鈕時,及時給予反饋,如輕微的震動或動效提示,讓用戶明確操作已被執(zhí)行。若頁面加載時間過長,可設置加載動畫或預加載機制,緩解用戶的等待焦慮。某購物 APP 通過優(yōu)化頁面加載速度,將平均加載時間從 3 秒縮短至 1 秒,用戶流失率顯著降低,留存率提升了 15%。?
功能迭代:滿足用戶不斷變化的需求?
用戶的需求并非一成不變,隨著市場環(huán)境、技術(shù)發(fā)展和用戶習慣的改變,APP 需要不斷迭代功能,保持新鮮感與競爭力。例如,隨著健康意識的提升,許多運動類 APP 除了基礎的計步、跑步記錄功能外,還新增了心率監(jiān)測、睡眠分析、飲食建議等功能,滿足用戶多元化的健康管理需求。同時,根據(jù)用戶行為數(shù)據(jù),對現(xiàn)有功能進行優(yōu)化。若發(fā)現(xiàn)某個功能的使用率較低,分析原因并進行改進,或果斷淘汰無效功能,避免界面冗余。?
個性化推薦也是提升留存率的有效策略?;谟脩舻男袨閿?shù)據(jù)和偏好,為用戶提供專屬的內(nèi)容、產(chǎn)品或服務推薦。今日頭條正是憑借強大的個性化推薦算法,根據(jù)用戶的閱讀歷史、點贊評論等數(shù)據(jù),精準推送感興趣的資訊,使用戶沉浸其中,日均使用時長不斷增加,留存率穩(wěn)居行業(yè)前列。?
情感連接:增強用戶對 APP 的歸屬感?
在功能和體驗之外,建立與用戶的情感連接,能夠讓用戶對 APP 產(chǎn)生歸屬感,從而提高留存率。通過推送個性化的節(jié)日祝福、生日問候,使用戶感受到被重視。某音樂類 APP 在用戶生日當天,為其生成專屬的生日歌單,引發(fā)用戶情感共鳴,增強了用戶與 APP 之間的情感紐帶。此外,搭建用戶社區(qū),鼓勵用戶分享使用心得、交流互動,形成良好的社區(qū)氛圍。小紅書通過用戶生成內(nèi)容(UGC)模式,吸引大量用戶分享生活經(jīng)驗、種草好物,用戶在社區(qū)中找到志同道合的朋友,對 APP 的粘性不斷提升。?
提升 APP 留存率是一個系統(tǒng)性工程,需要從用戶行為分析出發(fā),深入了解用戶需求,通過界面優(yōu)化、功能迭代和情感連接等多方面進行設計優(yōu)化。只有持續(xù)為用戶創(chuàng)造價值,提供優(yōu)質(zhì)的使用體驗,才能在激烈的市場競爭中留住用戶,實現(xiàn) APP 的長期穩(wěn)定發(fā)展。未來,隨著技術(shù)的不斷進步和用戶需求的日益多樣化,APP 設計優(yōu)化也將不斷演進,為用戶帶來更加卓越的移動互聯(lián)網(wǎng)體驗。

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


看設計公司如何玩轉(zhuǎn) UI 大屏設計新美學?

ui設計分享達人 系統(tǒng)UI設計文章及欣賞

在數(shù)字技術(shù)飛速發(fā)展的當下,UI 大屏設計早已突破單純信息展示的桎梏,逐漸演變?yōu)榧婢吖δ苄耘c藝術(shù)性的視覺盛宴。想要玩轉(zhuǎn) UI 大屏設計新美學,不僅需要緊跟時代潮流,更要敢于突破傳統(tǒng),以創(chuàng)新思維重新定義大屏設計的美學邊界。?
打破常規(guī),重塑視覺語言?
傳統(tǒng)大屏設計多以整齊劃一的布局、保守的色彩搭配為主,而新美學強調(diào)打破常規(guī),通過獨特的視覺語言傳遞個性與創(chuàng)意。在布局上,大膽采用不對稱設計、不規(guī)則幾何圖形分割界面,打破呆板的網(wǎng)格限制,為用戶帶來耳目一新的視覺沖擊。如某科技企業(yè)的展廳大屏,以流動的線條與不規(guī)則的幾何圖形構(gòu)建空間感,將數(shù)據(jù)巧妙嵌入其中,宛如一幅動態(tài)的藝術(shù)作品,既凸顯了科技感,又極具美學價值。?
色彩運用,打造視覺張力?
新美學下的色彩運用不再局限于單一主色調(diào),而是通過多樣化搭配營造強烈的視覺張力。在金融行業(yè)數(shù)據(jù)監(jiān)控大屏中,常采用深藍色與金色的搭配,深藍色沉穩(wěn)大氣,象征著金融行業(yè)的嚴謹與可靠,金色則用于突出關(guān)鍵數(shù)據(jù)和重要指標,增添高貴感與科技感,讓用戶一眼鎖定核心信息。在教育類大屏設計中,以綠色為主色調(diào),搭配柔和的淺黃色,綠色象征生機與活力,契合教育行業(yè)的蓬勃發(fā)展和對知識的追求,淺黃色營造溫馨舒適的氛圍,讓學生和教師在使用大屏時感到放松愉悅。?
嘗試高對比度色彩碰撞、漸變色彩過渡等手法,也能賦予大屏獨特魅力。例如,將深邃的克萊因藍與明亮的熒光橙相結(jié)合,克萊因藍的純粹與深邃,和熒光橙的鮮亮與跳躍形成鮮明對比,既能突出重點信息,又賦予大屏時尚與活力;又如在電商促銷大屏上,使用從紅色到橙色再到黃色的漸變色彩,營造出熱烈的購物氛圍,刺激消費者的購買欲望,同時讓整個界面充滿動態(tài)的視覺效果。
大屏2.jpg?
動態(tài)交互,增強沉浸體驗?
新美學下的 UI 大屏設計注重動態(tài)交互,通過流暢的動畫效果、實時的數(shù)據(jù)反饋,讓用戶與大屏產(chǎn)生深度互動。微交互設計成為關(guān)鍵,按鈕的彈性動畫、數(shù)據(jù)加載時的粒子特效,都能為用戶帶來沉浸式體驗。某城市規(guī)劃展示大屏,用戶通過觸摸操作,地圖上的建筑會以 3D 動畫形式 “生長” 而出,配合光影變化,生動展現(xiàn)城市發(fā)展歷程,這種動態(tài)交互讓信息傳遞更生動,也讓美學體驗更立體。
大屏3.jpg?
跨界融合,拓展美學邊界?
將不同領(lǐng)域的元素融入 UI 大屏設計,實現(xiàn)跨界融合,是新美學的又一趨勢。結(jié)合藝術(shù)、文化、時尚等元素,讓大屏設計更具內(nèi)涵與故事性。在文旅主題大屏中,融入傳統(tǒng)水墨畫元素,用數(shù)字技術(shù)將水墨暈染效果與數(shù)據(jù)可視化相結(jié)合,展現(xiàn)景區(qū)的文化底蘊與旅游數(shù)據(jù);或是將時尚秀場的動態(tài)光影效果應用于商業(yè)大屏,吸引消費者目光,提升品牌美學格調(diào)。?
玩轉(zhuǎn) UI 大屏設計新美學,需要設計師不斷突破自我,從視覺語言、交互體驗、跨界融合等多維度進行創(chuàng)新。只有這樣,才能讓 UI 大屏在發(fā)揮實用價值的同時,成為真正的美學杰作,為用戶帶來無與倫比的視覺與交互體驗。

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

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

lanlanwork 系統(tǒng)UI設計文章及欣賞

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

45.png

車載 UI 設計的獨特挑戰(zhàn)與需求

安全至上的設計準則

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

復雜環(huán)境適應性

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

硬件多樣性與適配難題

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

車載 UI 設計的關(guān)鍵要素

界面布局與導航

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

交互方式創(chuàng)新

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

視覺設計

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

車載 UI 設計的發(fā)展趨勢

個性化定制

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

智能互聯(lián)與多屏聯(lián)動

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

情感化設計

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

 

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

lanlanwrok 底部圖.png

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

用好容器類UI組件,實現(xiàn)界面空間膨脹術(shù)!

天宇 系統(tǒng)UI設計文章及欣賞

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

用戶的矛盾

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

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

信息量大、操作復雜是B端產(chǎn)品的典型特征。我們?nèi)绾伟丫哂泻裰匦畔⒑凸δ艿漠a(chǎn)品,變得對用戶來說清爽易用?

設計師就像魔術(shù)師

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》

“界面設計就是把報紙塞進火柴盒的藝術(shù)”,這個比喻真是太妙了?。ū就粱喊汛笙笱b進冰箱的藝術(shù))。怎么把報紙塞進火柴盒?變魔術(shù)嗎?其實從某種角度上看,我們設計師就是魔術(shù)師——在適當?shù)臅r機展示恰到好處的信息。

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

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

本文結(jié)構(gòu)

本文會分成兩部分。

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

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

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

下面我們正式開始吧~

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

1. 問題所在

一個單點數(shù)據(jù)關(guān)聯(lián)的信息量能有多大?看一個網(wǎng)安行業(yè)的例子:

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

可以看出,將數(shù)據(jù)建立層層關(guān)聯(lián)后,從一個單點可以衍生出來的信息是海量的、無邊的。

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

2. 設計策略

有兩個定律,跟“復雜”有關(guān)。

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

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

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

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

第三步,漸進呈現(xiàn)。這就到了設計師要用“容器類”組件來完成“空間膨脹術(shù)”的環(huán)節(jié)了。

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

3. 內(nèi)容分析

產(chǎn)品中的內(nèi)容也存在層層遞進。內(nèi)容之間的關(guān)系,常見以下兩種。

一種是從屬關(guān)系,或父子關(guān)系。

一種是關(guān)聯(lián)關(guān)系,數(shù)據(jù)以某種維度建立了關(guān)聯(lián)。

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

1. 關(guān)于容器

我們?nèi)绾斡萌萜黝怳I組件,去放置這些復雜且層層關(guān)聯(lián)的內(nèi)容?

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

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

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

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

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

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

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

這里有幾個關(guān)鍵問題,我們逐個分析:

關(guān)鍵問題一:能否分清主次。

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

關(guān)鍵問題二:是否需要對比參考。

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

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

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

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

(↑tabs的應用)

關(guān)鍵問題三:是否需要保持上下文。

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

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

關(guān)鍵問題四:是否頻繁往返。

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

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

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

關(guān)鍵問題五:是不是必須看到的。

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

3. 功能操作決策樹

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

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

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

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

4. 空間膨脹術(shù)

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

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

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

(↑案例:tabs嵌套tabs)

(↑案例:抽屜嵌套tabs)

今天的分享就到這里了

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

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

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

本文由 @杜大大杜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來自Unsplash,基于CC0協(xié)議。

該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務。

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

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

ui設計分享達人 系統(tǒng)UI設計文章及欣賞

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

一、理解美觀與實用的內(nèi)涵

(一)美觀的界面設計

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

(二)實用的界面設計

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

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

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

三、實現(xiàn)美觀與實用兼顧的方法

(一)合理的布局設計

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

(二)色彩的巧妙運用

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

(三)元素的簡潔與統(tǒng)一

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

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

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

四、案例分析

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

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

ui設計分享達人 系統(tǒng)UI設計文章及欣賞

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

一、沉浸交互,突破傳統(tǒng)藩籬

傳統(tǒng) APP 界面設計多以功能展示為主,用戶操作時如同使用獨立工具,缺乏深度體驗。而沉浸交互打破了這種局限,通過精心設計,讓用戶仿若置身于與現(xiàn)實緊密相連又獨具特色的虛擬空間。
以一款旅行 APP 為例,打開它不再是單調(diào)的景點、酒店列表,而是借助 3D 動畫、全景展示等技術(shù),瞬間將用戶 “傳送” 至目的地?;瑒悠聊?,就像漫步當?shù)亟窒铮稽c擊景點,專業(yè)語音講解隨即響起,用戶從信息被動接收者,轉(zhuǎn)變?yōu)橹鲃訁⑴c者。

二、沉浸交互的關(guān)鍵要素

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

三、沉浸交互的顯著優(yōu)勢

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

四、未來展望

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

小程序尺寸,一篇搞定

天宇

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


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

日歷

鏈接

個人資料

藍藍設計的小編 http://bouu.cn

存檔