本文圍繞 “如何做好 UI 設(shè)計” 展開，分享了一系列相關(guān)要點

前段時間谷歌宣布，將于北京時間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 設(shè)計語言、Android XR 擴展現(xiàn)實系統(tǒng)及車載 Gemini 應(yīng)用在內(nèi)的多則Android 16訊息。

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

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

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

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

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

合并通知和快速設(shè)置面板

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

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

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

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

更多模糊效果

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

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

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

此外，通知欄也變得更加緊湊。可選設(shè)置會在鎖屏上折疊通知，不再顯示完整的通知預(yù)覽，而是僅顯示應(yīng)用圖標(biāo)（確保不會遮擋壁紙）。輕觸此圖標(biāo)可展開通知面板，顯示所有待處理通知。

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

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

響應(yīng)式與自適應(yīng)設(shè)計的進階

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

 

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

 

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

極簡主義與情感化設(shè)計的融合

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

 

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

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

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

 

AR 與 VR 在 UI 設(shè)計中的拓展

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

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

 

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

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

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

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

 

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

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

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

 

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

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

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

安全至上的設(shè)計準(zhǔn)則

復(fù)雜環(huán)境適應(yīng)性

硬件多樣性與適配難題

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

界面布局與導(dǎo)航

交互方式創(chuàng)新

視覺設(shè)計

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

個性化定制

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

情感化設(shè)計

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

用戶的矛盾

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

用戶被自己想要的信息淹沒了。他會說：“這根本沒法看，也沒法用，你們的設(shè)計太爛了。”

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

設(shè)計師就像魔術(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è)計就是把報紙塞進火柴盒的藝術(shù)”，這個比喻真是太妙了！（本土化：把大象裝進冰箱的藝術(shù)）。怎么把報紙塞進火柴盒？變魔術(shù)嗎？其實從某種角度上看，我們設(shè)計師就是魔術(shù)師——在適當(dāng)?shù)臅r機展示恰到好處的信息。

做到這三點挑戰(zhàn)，產(chǎn)品經(jīng)理只會不斷升值

好的產(chǎn)品經(jīng)理是很稀缺的，懂用戶、懂商業(yè)、懂?dāng)?shù)據(jù)的產(chǎn)品經(jīng)理走出互聯(lián)網(wǎng)，依然是搶手貨。相反，如果只做簡單傳話、低效執(zhí)行、淺層思考的產(chǎn)品經(jīng)理，恐怕走不過未來3-5年的洪流。

查看詳情 >

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

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

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

本文會分成兩部分。

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

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

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

下面我們正式開始吧~

PART 1：定位問題、設(shè)定策略

1. 問題所在

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

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

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

我們當(dāng)然不能把這全家桶一整個砸給用戶呀，用戶會被砸暈的。那我們該怎么做？

2. 設(shè)計策略

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

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

處理復(fù)雜，我們一般有哪些辦法呢。

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

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

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

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

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組件，去放置這些復(fù)雜且層層關(guān)聯(lián)的內(nèi)容？

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

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

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

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

值得注意的是，有一些組件在當(dāng)前頁面內(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間反復(fù)橫跳，讓有限的短期記憶承受巨大壓力。

（↑案例：蘋果手機參數(shù)對比）

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

（↑tabs的應(yīng)用）

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

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

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

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

這個一般由任務(wù)類型決定，即當(dāng)前操作是“主線任務(wù)”還是“支線任務(wù)”。

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

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

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

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

3. 功能操作決策樹

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

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

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

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

4. 空間膨脹術(shù)

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

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

（↑案例：抽屜嵌套抽屜）

（↑案例：tabs嵌套tabs）

（↑案例：抽屜嵌套tabs）

今天的分享就到這里了

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

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

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