在數(shù)字技術(shù)飛速發(fā)展的今天，虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）技術(shù)正成為我們?nèi)粘Ｉ詈凸ぷ髦性絹碓街匾囊徊糠?。這些技術(shù)的崛起不僅改變了我們與數(shù)字世界互動(dòng)的方式，也為界面設(shè)計(jì)師帶來了前所未有的挑戰(zhàn)和機(jī)遇。從沉浸式的虛擬世界到與現(xiàn)實(shí)環(huán)境的互動(dòng)，VR和AR的界面設(shè)計(jì)越來越成為人們關(guān)注和欣賞的焦點(diǎn)。

 

一流的VR和AR界面設(shè)計(jì)不僅僅是技術(shù)的展示，更是對(duì)人類感官和認(rèn)知的深刻理解。它融合了藝術(shù)、科學(xué)和人性化設(shè)計(jì)的元素，創(chuàng)造出令人驚嘆的用戶體驗(yàn)。在這個(gè)領(lǐng)域，創(chuàng)意和創(chuàng)新是推動(dòng)力，而美學(xué)和功能性則是不可或缺的核心。

 

在VR界面設(shè)計(jì)中，沉浸感是關(guān)鍵。通過巧妙地利用視覺、聽覺和觸覺等感官，設(shè)計(jì)師可以讓用戶身臨其境地體驗(yàn)虛擬世界。從精美的視覺效果到流暢的動(dòng)畫過渡，每一個(gè)細(xì)節(jié)都能夠增強(qiáng)用戶的沉浸感和參與感。與此同時(shí)，良好的導(dǎo)航和交互設(shè)計(jì)也是不可或缺的，它們能夠引導(dǎo)用戶在虛擬空間中自由探索，同時(shí)保持舒適和方便。

 

而在AR界面設(shè)計(jì)中，融合現(xiàn)實(shí)和虛擬的邊界成為了設(shè)計(jì)師的挑戰(zhàn)。如何將數(shù)字信息與現(xiàn)實(shí)場(chǎng)景完美融合，成為了設(shè)計(jì)的核心問題。一流的AR界面設(shè)計(jì)能夠通過智能識(shí)別和定位技術(shù)，將數(shù)字內(nèi)容無縫集成到用戶周圍的環(huán)境中，為用戶提供豐富的信息和沉浸式的體驗(yàn)。同時(shí)，個(gè)性化和互動(dòng)性也是AR界面設(shè)計(jì)的重要方面，它們可以增強(qiáng)用戶的參與感和情感共鳴。

 

總的來說，VR和AR界面設(shè)計(jì)正在成為數(shù)字時(shí)代的新風(fēng)向標(biāo)，它不僅僅是技術(shù)的展示，更是對(duì)人類感官和認(rèn)知的深刻挖掘。通過創(chuàng)新的設(shè)計(jì)理念和前沿的技術(shù)應(yīng)用，設(shè)計(jì)師們正在探索未來的邊界，為用戶帶來前所未有的體驗(yàn)和樂趣。隨著技術(shù)的不斷進(jìn)步和應(yīng)用場(chǎng)景的擴(kuò)大，我們有理由期待，VR和AR界面設(shè)計(jì)將在未來繼續(xù)展現(xiàn)出更加令人驚嘆的美與力量。

 

#VR界面設(shè)計(jì)欣賞 #AR界面設(shè)計(jì)#UI設(shè)計(jì)#界面設(shè)計(jì)公司#UI設(shè)計(jì)公司

多看多學(xué)“法則”其實(shí)往往是在鞏固一種思維模式和思考   方向，而這些我們裝在腦中的   東西往往比法則本身更有價(jià)值。

飯搭子是餓了么APP平臺(tái)上線的一款好友之間分享飲食數(shù)據(jù)的玩法，基于智能ai的行業(yè)趨勢(shì)下結(jié)合新技術(shù)風(fēng)口，結(jié)合平臺(tái)屬性通過營(yíng)養(yǎng)數(shù)據(jù)分享的切入點(diǎn)，帶動(dòng)小圈子提頻，實(shí)現(xiàn)引流價(jià)值；此外，高頻用戶訪問出現(xiàn)瓶頸，希望做用戶提頻，帶動(dòng)用戶增量；餓了么的社交好友體系待完善，通過新玩法的探索進(jìn)一步沉淀用戶數(shù)據(jù)，反哺到互動(dòng)玩法乃至整個(gè)平臺(tái)的生態(tài)圈。

暗色模式（Dark Mode）的興起是一個(gè)逐漸發(fā)展的過程，它涉及到技術(shù)進(jìn)步、用戶體驗(yàn)優(yōu)化以及設(shè)計(jì)趨勢(shì)的變化。

隨著iOS 13在2019年的發(fā)布，暗色模式開始成為用戶關(guān)注的焦點(diǎn)；在用戶體驗(yàn)方面，設(shè)計(jì)者們考慮到了環(huán)境光線與屏幕亮度的匹配問題，暗色模式可以有效減少視覺疲勞；在實(shí)際使用中，用戶發(fā)現(xiàn)暗色模式在光線較暗的環(huán)境中更為舒適，這也促使了暗色模式的普及和發(fā)展。

暗色模式在UI設(shè)計(jì)中的重要性體現(xiàn)在改善視覺舒適度、節(jié)省電量以及提供個(gè)性化選擇上，其普及程度隨著用戶需求和技術(shù)發(fā)展不斷提升。

 

 

 

一、定義及其在UI設(shè)計(jì)中的表現(xiàn)形式

1.暗色模式的定義

  暗色模式是一種低光用戶界面（UI）設(shè)計(jì)，也稱為深色模式，是一種用戶界面設(shè)計(jì)選項(xiàng)，它使用較深的顏色方案和背景，通常為黑色或深灰色，以減少屏幕亮度并提供更舒適的視覺體驗(yàn)。

iOS 13 亮色模式（左）與暗色模式（右）的對(duì)比

 

2.暗色模式的定義

(1).暗色模式在UI設(shè)計(jì)中的表現(xiàn)形式

設(shè)計(jì)師需要為暗色模式創(chuàng)建一個(gè)新的調(diào)色板，這通常意味著降低顏色的飽和度，以適應(yīng)深色背景。同時(shí)，避免使用純黑作為主色調(diào)背景，而是選擇接近純黑的深灰色，以確保閱讀體驗(yàn)的舒適性和可讀性。

亮色/暗色模式下主色需要進(jìn)行調(diào)整

 

(2).對(duì)比度控制

暗色背景與文本顏色之間的對(duì)比度應(yīng)該控制在WCAG2.0AA級(jí)標(biāo)準(zhǔn)以上，以保證內(nèi)容的清晰度和易讀性。對(duì)于彩色元素，也需要適當(dāng)調(diào)整飽和度，確保整體色彩之間的對(duì)比度符合無障礙標(biāo)準(zhǔn)。

達(dá)到/未達(dá)到WCAG2.0AA標(biāo)準(zhǔn)的視覺效果對(duì)比

 

(3).視覺元素區(qū)分

在暗色模式下，設(shè)計(jì)師需要特別注意視覺元素的區(qū)分，通過足夠的對(duì)比度來保證文字和圖形的清晰可見。這不僅僅是簡(jiǎn)單的顏色反轉(zhuǎn)，而是一種“弱光”主題的設(shè)計(jì)思考，旨在優(yōu)化用戶在低光環(huán)境下的視覺體驗(yàn)。

亮色模式中的按鈕在暗色模式中顯得太跳躍

 

二、歷史回顧及發(fā)展脈絡(luò)

1.命令行界面時(shí)代

在早期的計(jì)算機(jī)系統(tǒng)中，如DOS和Linux，終端通常使用暗色模式，這是因?yàn)樵缙诘腃RT顯示器存在閃爍問題，暗色背景能夠減少視覺疲勞，并提供較高的對(duì)比度。

Linux的終端界面

 

2.個(gè)人電腦時(shí)代

隨著個(gè)人電腦的普及，圖形用戶界面（GUI）逐漸成為標(biāo)準(zhǔn)，此時(shí)大多數(shù)操作系統(tǒng)和應(yīng)用程序采用了亮色模式，以模仿紙張的顏色并減少CRT顯示器的眩光。

Windows2000的GUI

 

3.移動(dòng)設(shè)備時(shí)代

智能手機(jī)和平板電腦的興起帶來了OLED等先進(jìn)顯示技術(shù)，這些設(shè)備的小屏幕和高分辨率使得暗色模式再次變得實(shí)用和流行，特別是在節(jié)省電量和減少眼睛疲勞方面。

iOS13的暗色模式

 

4.操作系統(tǒng)時(shí)代

近年來，各大操作系統(tǒng)開始正式支持暗色模式。例如，Windows 10在2018年的更新中引入了暗色應(yīng)用模式，macOS和iOS隨后也推出了可以根據(jù)時(shí)間或環(huán)境自動(dòng)切換的暗色模式。

Windows10的暗色模式

 

三、設(shè)計(jì)趨勢(shì)中暗色模式的地位

暗色模式在當(dāng)前設(shè)計(jì)趨勢(shì)中占據(jù)重要地位，以其減輕眼睛疲勞、節(jié)省電量和聚焦內(nèi)容的優(yōu)勢(shì)受到青睞。它不僅適應(yīng)低光環(huán)境，還提供美學(xué)上的新探索，響應(yīng)了用戶對(duì)舒適性和個(gè)性化選擇的需求。隨著技術(shù)發(fā)展和設(shè)計(jì)創(chuàng)新，暗色模式已成為現(xiàn)代界面設(shè)計(jì)不可或缺的一部分。許多頂級(jí)品牌和應(yīng)用程序，如WhatsApp、Instagram、Google、Facebook等，都已經(jīng)引入暗色模式設(shè)計(jì)，這表明暗色模式已經(jīng)成為了一種廣泛接受的設(shè)計(jì)趨勢(shì)。

從左往右依次為：WhatsApp、Instagram、Google、Facebook

 

 

一、用戶體驗(yàn)層面

1.提高閱讀舒適度

(1).對(duì)比度和可讀性

在相同的對(duì)比度條件下，淺背景上的黑字比深背景上的淺色字閱讀效果更好。這表明，優(yōu)化對(duì)比度是提高閱讀舒適度的關(guān)鍵因素之一。

淺背景上深字與深背景上淺字的視覺對(duì)比

 

(2).用戶偏好和滿意度

一項(xiàng)針對(duì)用戶對(duì)暗色模式的使用體驗(yàn)的調(diào)查顯示，與默認(rèn)的白底模式相比，用戶在使用暗色模式時(shí)報(bào)告了更低的視覺疲勞和更高的滿意度。斯?。⊿loan）的一項(xiàng)研究在1977年就報(bào)告說，如果更多的光線通過混濁的透鏡到達(dá)眼睛，則出現(xiàn)畸變的可能性更大，即暗模式對(duì)視力障礙者更好。

對(duì)于長(zhǎng)時(shí)間從事屏幕工作的人來說，暗色模式對(duì)眼睛更加友好

 

2.減少視覺疲勞

(1).人眼生理特性

暗色模式能減少屏幕發(fā)出的光線，這有利于減少眼睛疲勞和不適，特別是在低光環(huán)境下，人眼的虹膜會(huì)打開以接受更多光線，而暗色模式提高了減少的光源，減少了對(duì)眼睛的刺激。

亮/暗環(huán)境下瞳孔大小的變化

 

(2).藍(lán)光輻射減少

人們通過長(zhǎng)期研究發(fā)現(xiàn)短波可見光，即紫光和藍(lán)光對(duì)眼底視網(wǎng)膜有相當(dāng)程度的破壞作用， 而人們通常把這種可見光波長(zhǎng)中高能量波段(400- 470nm)對(duì)視網(wǎng)膜的損壞現(xiàn)象稱為“藍(lán)光傷害現(xiàn)象”。 還有研究關(guān)注了暗色模式對(duì)藍(lán)光輻射的影響。由于暗色模式降低了屏幕的整體亮度，因此也減少了藍(lán)光的輻射。

可見光波段分布

 

二、設(shè)備電池壽命

1.降低屏幕功耗

在OLED屏幕上，每個(gè)像素都是獨(dú)立發(fā)光的，當(dāng)顯示黑色時(shí)，相關(guān)的像素點(diǎn)會(huì)關(guān)閉，從而不消耗能量。這意味著，顯示大面積黑色內(nèi)容的暗色模式能夠顯著減少屏幕的能量消耗。

OLED屏幕發(fā)光原理

 

2.實(shí)際省電效果

以 Google 測(cè)試數(shù)據(jù)為例，OLED 屏幕的 Pixel 手機(jī)在時(shí)間段內(nèi)啟用深色模式并在使用地圖導(dǎo)航時(shí)保持屏幕最大亮度，手機(jī)的電量消耗下降了 63%。

Google的測(cè)試數(shù)據(jù)

 

三、降低屏幕功耗

1.促進(jìn)睡眠

對(duì)于晚上喜歡在床上閱讀或工作的用戶來說，暗色背景有助于降低屏幕亮度，減少對(duì)褪黑素分泌的干擾，也有助于減少藍(lán)光對(duì)睡眠周期的影響，從而幫助用戶更快入睡并提高睡眠質(zhì)量。

OPPO手機(jī)暗色模式廣告

 

2.減少眩光

眩光是明亮的屏幕和低光環(huán)境之間惱人的對(duì)比現(xiàn)象，對(duì)眼睛具有一定的影響并造成眼部不適。暗色模式通過使用深色背景和亮色文字，整體降低了屏幕的亮度，這樣在光線較亮的環(huán)境中，屏幕的亮光與周圍暗環(huán)境的對(duì)比度降低，從而減少了屏幕反射光線對(duì)眼睛的刺激，降低不適。

有眩光與無眩光的顯示器對(duì)比

 

四、打造沉浸式體驗(yàn)

1.減少視覺干擾

暗色模式提高了一種無干擾的工作環(huán)境，有助于他們專注于手頭的任務(wù)，特別是在進(jìn)行寫作、編碼或其他需要集中注意力的活動(dòng)時(shí)，暗色模式能夠減少視覺干擾。

暗色模式為視覺設(shè)計(jì)提供了更大的對(duì)比度，使得界面元素更為突出。這種高對(duì)比度不僅有利于內(nèi)容的戰(zhàn)士，也增強(qiáng)了用戶的視覺聚焦，讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進(jìn)行游戲時(shí)，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗(yàn)。

編碼軟件一般默認(rèn)暗色界面，有利于專注工作

 

2.增強(qiáng)視覺聚焦

暗色模式為視覺設(shè)計(jì)提供了更大的對(duì)比度，使得界面元素更為突出。這種高對(duì)比度不僅有利于內(nèi)容的戰(zhàn)士，也增強(qiáng)了用戶的視覺聚焦，讓用戶更容易沉浸于應(yīng)用或游戲的環(huán)境中。特別是在觀看視頻或進(jìn)行游戲時(shí)，暗色背景能夠使色彩更為鮮明，提升用戶的視覺體驗(yàn)。

作者：阿琳01
來源：站酷

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司

銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

當(dāng)你打開一個(gè)頁面，首先映入眼簾的是豐富多樣的內(nèi)容和信息。如何在有限的空間內(nèi)，既保證內(nèi)容的完整性，又讓用戶能夠輕松理解和瀏覽，這背后的奧秘就在于頁面分割。今天，我們就來一起

探討頁面分割的藝術(shù)與技巧

，看看它是如何為你的設(shè)計(jì)增添魅力，提升用戶體驗(yàn)的。

 

在設(shè)計(jì)中，頁面分割不僅僅是一種技術(shù)手段，更是一種藝術(shù)表現(xiàn)。它如同一位細(xì)心的畫師，巧妙地運(yùn)用線條、色彩、空白等元素，

將頁面內(nèi)容劃分為一個(gè)個(gè)清晰、有序的區(qū)域。

通過這些分割，用戶能夠更快速地找到所需信息，更輕松地理解頁面內(nèi)容，從而享受到更加愉悅的閱讀體驗(yàn)。

 

頁面分割的魅力在于其

多樣性和靈活性

。不同的頁面可以采用不同的分割方式，如線條分割、卡片分割、留白分割等，以滿足不同的設(shè)計(jì)需求和用戶習(xí)慣。同時(shí)，頁面分割也需要根據(jù)內(nèi)容的實(shí)際情況進(jìn)行合理調(diào)整，既要保證信息的完整性，又要避免過度分割帶來的混亂感。

 

在本文中，我們將一起探討頁面分割的原則、技巧和應(yīng)用實(shí)例。我們將學(xué)習(xí)如何運(yùn)用不同的分割方式來優(yōu)化頁面布局，提升用戶體驗(yàn)。同時(shí)，我們還將分享一些成功的頁面分割案例，以激發(fā)你的設(shè)計(jì)靈感，為你的界面設(shè)計(jì)注入新的活力。

 

分享目錄：

一、分割的常見樣式

二、線性分割

三、卡片分割

四、留白分割

五、總結(jié)

 

 

線性分割：

通過使用線條來劃分頁面的不同區(qū)域，以達(dá)到組織內(nèi)容、引導(dǎo)用戶視線和提升整體美觀度的目的。這種分割方式簡(jiǎn)單明了，能夠清晰地展現(xiàn)出頁面內(nèi)容的層次和結(jié)構(gòu)。

 

卡片分割：

卡片式設(shè)計(jì)是一種流行的界面分割方法，通過將內(nèi)容劃分為獨(dú)立的卡片或區(qū)塊，使用戶能夠更清晰地理解信息。每個(gè)卡片通常包含相關(guān)的內(nèi)容，如文本、圖片或按鈕，以便用戶快速瀏覽和交互。

 

留白分割：

主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），自然地將信息進(jìn)行分組。這種留白的方式能夠?yàn)轫撁嬖黾雍粑?，降低視覺噪音，使設(shè)計(jì)看起來更簡(jiǎn)潔。

 

 

近年來，設(shè)計(jì)趨勢(shì)從

“卡片式設(shè)計(jì)”轉(zhuǎn)向了“去線化設(shè)計(jì)”，

即傾向于使用留白分割而非過多的線條分割，以實(shí)現(xiàn)更為簡(jiǎn)潔清晰的界面效果。設(shè)計(jì)師在選擇分割方式時(shí)，應(yīng)

優(yōu)先考慮留白分割，其次是線性分割，最后是卡片分割

。這個(gè)選擇順序反映了設(shè)計(jì)界的一般原則，即在不影響信息傳達(dá)的前提下，盡可能保持設(shè)計(jì)的簡(jiǎn)潔性。

 

 

線性分割的定義：

線性分割設(shè)計(jì)是一種在視覺設(shè)計(jì)中使用的技巧，它使用線條、邊框或細(xì)線等元素來劃分、區(qū)分或連接頁面上的不同內(nèi)容區(qū)域。這種設(shè)計(jì)手法主要用于

提高頁面內(nèi)容的可讀性和組織性，幫助用戶更好地理解和瀏覽頁面信息。

 

線性分割設(shè)計(jì)具有以下優(yōu)勢(shì)：

 

1.劃分區(qū)域：

線性分割可以將頁面劃分為不同的區(qū)域或模塊，使得每個(gè)區(qū)域的內(nèi)容更加清晰、有序。這有助于用戶快速定位和瀏覽所需的信息，提高閱讀效率。

 

2.區(qū)分內(nèi)容：

線性分割可以用來區(qū)分不同類型的內(nèi)容，如文本、圖片、圖表等。通過線性分割，可以將這些內(nèi)容進(jìn)行分組或歸類，使得頁面更加整潔、有序。

 

3.引導(dǎo)視線：

線性分割可以引導(dǎo)用戶的視線，幫助他們更好地理解頁面內(nèi)容。通過合理的線性分割設(shè)計(jì)，可以突出顯示重要的信息或元素，引導(dǎo)用戶關(guān)注到關(guān)鍵內(nèi)容。

 

4.增強(qiáng)層次感：

線性分割可以增強(qiáng)頁面的層次感，使得頁面內(nèi)容更加豐富、有深度。通過不同樣式的線性分割，可以區(qū)分不同的信息層級(jí)，幫助用戶更好地理解頁面結(jié)構(gòu)和內(nèi)容關(guān)系。

 

使用原則：

在使用分割線時(shí)，我們應(yīng)遵循一些原則，以確保其有效地幫助用戶理解頁面的組成，同時(shí)避免過度使用帶來的視覺干擾。

 

1.分割線應(yīng)當(dāng)微妙而不過于顯眼。

它們?cè)诓季种袘?yīng)該容易被用戶注意到，但又不應(yīng)成為焦點(diǎn)，以免分散用戶的注意力。

 

2.分割線應(yīng)被視為次要的元素。

只有在留白等其他設(shè)計(jì)手法無法有效起到分割作用時(shí)，才考慮使用分割線。它們應(yīng)當(dāng)是布局中的輔助工具，而不是主導(dǎo)元素。

 

3.謹(jǐn)慎使用分割線。

過度使用分割線可能會(huì)導(dǎo)致頁面顯得混亂和復(fù)雜。相反，我們應(yīng)該用分割線來創(chuàng)建信息分組，而不是簡(jiǎn)單地分割每一個(gè)條目。通過審慎而恰當(dāng)?shù)厥褂梅指罹€，我們可以有效地提升頁面的可讀性和用戶體驗(yàn)。

圖片來源于參考文章

 

線性分割三種類型：

通欄分割線、內(nèi)嵌分割線和中間分割線。

 

1.通欄分割線（Full-bleed Dividers）：

通欄分割線通常橫跨整個(gè)頁面寬度，用于分隔彼此完全獨(dú)立的內(nèi)容區(qū)域。這種分割線在視覺上非常顯著，能夠清晰地劃分出不同的內(nèi)容區(qū)塊，使用戶能夠迅速區(qū)分不同部分的信息。通欄分割線通常用于區(qū)分文章、產(chǎn)品列表、服務(wù)介紹等獨(dú)立的內(nèi)容區(qū)域。

 

2.內(nèi)嵌分割線（Inset Dividers）：

內(nèi)嵌分割線通常位于內(nèi)容區(qū)域內(nèi)部，用于分隔有錨點(diǎn)（如頭像、圖標(biāo)等）的相關(guān)內(nèi)容。這些錨點(diǎn)可以是圖片、符號(hào)或小的圖形元素，它們與分割線一起，幫助用戶更好地理解和區(qū)分內(nèi)容。內(nèi)嵌分割線常用于列表、卡片式布局、時(shí)間線等場(chǎng)景中，用于展示有關(guān)聯(lián)但不同類別的信息。

 

3.中間分割線（Middle Dividers）：

中間分割線位于兩個(gè)內(nèi)容區(qū)域之間，用于分隔無錨點(diǎn)的相關(guān)內(nèi)容。這種分割線通常比通欄分割線更細(xì)，更注重于在視覺上劃分空間，而不是強(qiáng)調(diào)內(nèi)容的獨(dú)立性。中間分割線常用于文本段落之間、列表項(xiàng)之間或不同功能區(qū)域之間，以提供清晰的結(jié)構(gòu)和層次。

 

 

在大多數(shù)情況下，當(dāng)信息層級(jí)較為簡(jiǎn)單（即信息層級(jí)≤2）時(shí)，使用分割線進(jìn)行信息分割是一種有效的方法。然而，實(shí)際上，

如果留白間距足夠大，我們也可以使用留白來達(dá)到類似的效果

。通過增大留白間距，我們可以創(chuàng)造出清晰的視覺區(qū)域劃分，使得信息之間的界限更加明確。

 

與分割線相比，足夠大的留白間距可以避免多余的線性元素干擾，讓整體視覺效果更加清爽。這樣的設(shè)計(jì)選擇有助于提升用戶的閱讀體驗(yàn)，使用戶更加輕松地理解和消化信息。

 

因此，在

信息層級(jí)較簡(jiǎn)單的情況下，我們可以靈活地選擇使用分割線或留白來進(jìn)行信息分割

。通過調(diào)整留白間距，我們可以達(dá)到與分割線相似的效果，同時(shí)保持整體設(shè)計(jì)的簡(jiǎn)潔和清晰。

 

 

為了提升屏效

，我們希望在一屏內(nèi)展示盡可能多的信息。在這種情況下，分割線的設(shè)計(jì)顯得尤為重要，因?yàn)樗鼈兡軌?/div>

有效地劃分信息區(qū)域，使內(nèi)容更加清晰、易于理解。

 

通過使用分割線，我們可以

將較多的信息條理化

，使得用戶能夠更快速地找到所需的內(nèi)容。與沒有分割線的布局相比，使用分割線能夠

顯著提高信息的可讀性和可理解性。

 

在相同的信息布局下，分割線能夠?qū)⑿畔^(qū)域明確地劃分開來，

防止信息之間產(chǎn)生混淆或交叉

。這種劃分不僅使得每個(gè)信息塊更加獨(dú)立，而且提高了信息之間的對(duì)比度，使用戶能夠更輕松地識(shí)別和區(qū)分不同的信息。

 

因此，當(dāng)我們的目標(biāo)是提高屏效并展示大量信息時(shí)，分割線的設(shè)計(jì)是一個(gè)關(guān)鍵要素。通過合理地使用分割線，我們可以確保信息布局更加清晰、有序，從而提高用戶的閱讀效率和滿意度。（如下圖）

 

 

線性分割在移動(dòng)端頁面設(shè)計(jì)中的應(yīng)用場(chǎng)景廣泛，尤其是在

需要清晰劃分信息模塊時(shí)

。如微信的聊天列表中，線性分割被用來區(qū)分不同的消息條目。每條消息之間通過一條細(xì)線進(jìn)行分隔，使得每條消息清晰可辨，方便用戶快速瀏覽和定位到特定的消息。

 

線性分割還常用在各類

App的信息提示

中，如果有多條消息需要展示，線性分割可以用來

區(qū)分不同的消息組

。例如招商銀行APP中，當(dāng)用戶收到多條未讀消息時(shí)，每條消息之間可以通過線性分割進(jìn)行區(qū)分，使得每條消息清晰可辨，方便用戶逐一查看和處理。

 

在APP

需要用戶填寫信息和設(shè)置的表單頁面中

，線性分割可以用來區(qū)分不同的輸入字段或信息區(qū)域。這有助于用戶更清晰地了解需要填寫的信息，提高表單的填寫效率和準(zhǔn)確性，比如站酷的設(shè)置頁面（如下圖）

 

 

 

 

 

 

卡片分割的定義：

卡片分割設(shè)計(jì)主要通過將內(nèi)容或功能區(qū)域劃分成獨(dú)立的“卡片”來進(jìn)行信息展示和組織。每個(gè)卡片通常包含相關(guān)的內(nèi)容或功能，并且與其他卡片通過一定的間距或線性分隔進(jìn)行區(qū)分。

 

卡片分割設(shè)計(jì)具有以下優(yōu)勢(shì)：

 

1.內(nèi)容封裝：

卡片分割設(shè)計(jì)將相關(guān)內(nèi)容或功能封裝在一個(gè)獨(dú)立的卡片內(nèi)，使得每個(gè)卡片成為一個(gè)獨(dú)立的信息單元。這有助于保持頁面內(nèi)容的清晰和整潔，方便用戶瀏覽和理解。

 

2.明確邊界

：每個(gè)卡片通常具有明確的邊界，通過邊框、陰影或間距等元素來區(qū)分不同的卡片。這種邊界的存在使得每個(gè)卡片在視覺上相對(duì)獨(dú)立，方便用戶進(jìn)行區(qū)分和識(shí)別。

 

3.靈活布局：

卡片分割設(shè)計(jì)具有很高的靈活性，可以根據(jù)需要自由調(diào)整卡片的大小、位置和排列方式。這使得設(shè)計(jì)師可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣來靈活調(diào)整卡片的布局，以達(dá)到最佳的視覺效果。

 

4.強(qiáng)調(diào)重點(diǎn)：

通過不同的視覺處理手法，如改變卡片的顏色、大小或樣式等，可以突出顯示重要的卡片或內(nèi)容。這有助于吸引用戶的注意力，引導(dǎo)他們關(guān)注到關(guān)鍵信息。

 

卡片的基本構(gòu)成：

卡片是一個(gè)獨(dú)立的主題性容器，旨在將內(nèi)容和操作組合在一起。它可以包含多種元素，如容器、縮略圖、標(biāo)題、副標(biāo)題、富媒體、輔助文字、按鈕和圖標(biāo)按鈕等。這些元素并非必須全部存在，而是根據(jù)具體需求進(jìn)行選擇和配置。無論選擇哪些元素，它們都會(huì)以易于掃描和操作的形式整齊地放置在卡片上。這種設(shè)計(jì)使得卡片成為一個(gè)靈活且高效的信息展示工具，適用于各種場(chǎng)景和應(yīng)用。

 

 

卡片分割常見的類型：

卡片分割可分為

通欄卡片

和

非通欄卡片

 

1、通欄卡片：

其特點(diǎn)是卡片占據(jù)整個(gè)頁面寬度，沒有左右邊距。通欄卡片的設(shè)計(jì)可以提高布局的靈活性，使得頁面內(nèi)容更加寬敞和大氣。同時(shí)，通欄卡片也可以更好地突出展示單條內(nèi)容，引導(dǎo)用戶的視線，提高閱讀效率。

 

2.非通欄卡片：

與通欄卡片相比，它會(huì)在卡片的左右兩側(cè)留有邊距，不完全占據(jù)整個(gè)頁面寬度。這種設(shè)計(jì)方式可以使得頁面內(nèi)容更加有層次感和組織性，同時(shí)也有利于突出顯示某些關(guān)鍵信息。

 

 

通欄卡片

通欄卡片相較于非通欄卡片，其設(shè)計(jì)特點(diǎn)在于去除了左右兩端的留白，僅保留上下邊距，從而提供了更大的展示空間。這種設(shè)計(jì)使得卡片內(nèi)的內(nèi)容能夠占據(jù)整個(gè)頁面寬度，進(jìn)一步增強(qiáng)了內(nèi)容的視覺沖擊力。在通欄卡片中，卡片與背景的關(guān)系通常通過一條背景色塊來抽象表現(xiàn)，這種簡(jiǎn)潔的處理方式避免了過多的視覺元素干擾，使得頁面整體看起來更加整潔和統(tǒng)一。

 

通欄卡片可以被視為在極簡(jiǎn)列表式和傳統(tǒng)卡片式設(shè)計(jì)之間的一種折中選擇。它繼承了卡片式的分層方式和強(qiáng)交互性，使得用戶能夠輕松地瀏覽和交互頁面內(nèi)容。如下圖微博“關(guān)注”、微信“發(fā)現(xiàn)”頁面。

 

 

非通欄卡片

非通欄卡片

通常采用帶圓角的設(shè)計(jì)形式

，這種設(shè)計(jì)不僅賦予卡片一種柔和、圓潤(rùn)的視覺效果，還增強(qiáng)了用戶的視覺舒適度。結(jié)合陰影效果以及四周的邊距，非通欄卡片巧妙地形成頁面留白，使得整體設(shè)計(jì)層次感更加豐富。

 

通過巧妙的投影設(shè)計(jì)以及前后顏色的精準(zhǔn)設(shè)定，非通欄卡片成功地讓內(nèi)容與背景之間

產(chǎn)生視覺空間感

，進(jìn)一步強(qiáng)化了內(nèi)容的立體感和層次感。這種設(shè)計(jì)技巧不僅提升了卡片的視覺吸引力，還使得用戶在瀏覽頁面時(shí)能夠更加輕松地

區(qū)分和聚焦關(guān)鍵信息

。

 

在頁面設(shè)計(jì)中，非通欄卡片的應(yīng)用范圍十分廣泛。無論是用于展示文章、產(chǎn)品、圖片還是其他類型的內(nèi)容，非通欄卡片都能夠通過其獨(dú)特的視覺效果和設(shè)計(jì)元素，為用戶帶來更加舒適、美觀的視覺體驗(yàn)。同時(shí)，非通欄卡片還具有良好的

適應(yīng)性和靈活性

，可以根據(jù)不同的設(shè)計(jì)需求和用戶習(xí)慣進(jìn)行定制和調(diào)整，滿足不同場(chǎng)景下的應(yīng)用需求。如下圖夸克“夸克日?qǐng)?bào)”、APP Store“首頁”

 

 

選擇使用通欄分割線還是卡片分割，主要取決于你的設(shè)計(jì)目標(biāo)和內(nèi)容需求。以下是三個(gè)參考建議，幫助你做出更好的選擇：

 

1.當(dāng)內(nèi)容已有自然分割線時(shí)：

如果你的主題內(nèi)容本身就已經(jīng)有明確的分割線，比如列表項(xiàng)、段落分隔等，那么采用非通欄分割會(huì)是一個(gè)好選擇?？ㄆ梢郧逦亟缍總€(gè)內(nèi)容塊，使主題信息層次更加分明，提高用戶的閱讀效率。

 

2.當(dāng)內(nèi)容類型多樣且占據(jù)較大空間時(shí)：

如果單個(gè)主題內(nèi)部包含了多種類型的內(nèi)容，如文字、圖片、視頻等，且這些內(nèi)容在垂直方向上占據(jù)了較大的空間（例如，內(nèi)容長(zhǎng)度超過屏幕高度的一半），使用非通欄分割會(huì)更加合適。卡片能夠有效地圈定內(nèi)容范圍，為用戶提供一個(gè)明確的視覺邊界，幫助他們更好地理解和消化信息。

 

3.當(dāng)需要增強(qiáng)橫向空間感時(shí)：

如果你希望擴(kuò)展頁面的橫向空間，或者暗示用戶可以橫向滑動(dòng)頁面查看更多內(nèi)容，那么非通欄卡片會(huì)是更好的選擇。非通欄卡片的設(shè)計(jì)能夠利用橫向內(nèi)容連續(xù)性原則，幫助用戶建立頁面可以橫向滑動(dòng)的意識(shí)，從而提升頁面的互動(dòng)性和用戶體驗(yàn)。如下圖知乎“發(fā)現(xiàn)”、站酷“推薦”。

 

 

卡片分割更適合圖文混排

卡片分割設(shè)計(jì)以其獨(dú)特的布局方式，成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內(nèi)容統(tǒng)一呈現(xiàn)在一個(gè)界面中，

實(shí)現(xiàn)了內(nèi)容的多樣性與統(tǒng)一性的結(jié)合

。這種設(shè)計(jì)不僅讓單屏區(qū)域能夠顯示更多內(nèi)容，還通過合理的空間劃分，確保了文字和圖片之間的和諧共存，既維持了視覺的一致性，又

巧妙地平衡了文字和圖片的視覺強(qiáng)度

。因此，在需要同時(shí)呈現(xiàn)多種內(nèi)容和媒介的場(chǎng)景中，卡片分割無疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁”

 

 

 

 

 

 

留白分割的定義：

留白分割是目前設(shè)計(jì)的主流趨勢(shì)，越來越多的產(chǎn)品在使用留白分割設(shè)計(jì)。留白分割主要通過增加間距的方式，利用人的視知覺原理（接近法則：人的大腦會(huì)傾向于把彼此靠近的元素視為一組），將信息進(jìn)行自然的視覺分組。

 

留白分割具有以下優(yōu)勢(shì)：

 

1.突出重點(diǎn)信息：

通過增加間距，可以將關(guān)鍵信息與其他內(nèi)容區(qū)分開來，使用戶更容易注意到。

 

2.提高可讀性：

適當(dāng)?shù)牧舭卓梢允刮淖只驁D形元素之間的界限更清晰，減少視覺干擾，從而提高用戶的閱讀效率。

 

3.增強(qiáng)設(shè)計(jì)感：

留白可以為設(shè)計(jì)增加呼吸感，避免元素過于擁擠，使整體布局更加和諧、美觀。

 

當(dāng)元素之間的間距保持均勻時(shí)，整個(gè)視覺呈現(xiàn)會(huì)顯得平衡且協(xié)調(diào)，大腦默認(rèn)為一個(gè)整體。然而，一旦元素的橫向和縱向間距發(fā)生變化，我們的大腦會(huì)

基于接近性法則

，本能地將距離較近的元素視為一個(gè)整體或群組，這就是留白分割。（如下圖）

 

 

留白分割在

有規(guī)律且卡片樣式較多

的頁面中表現(xiàn)尤為突出，在有大量卡片樣式的頁面中，每個(gè)卡片通常都包含一定的信息。通過留白分割，可以清晰地劃分每個(gè)卡片的信息區(qū)域，使用戶更容易區(qū)分和閱讀每個(gè)卡片的內(nèi)容，增加呼吸感，避免元素過于擁擠，從而提高整體的可讀性。例如下圖中主流的音樂類App

 

 

相反，如果在沒有規(guī)律且頁面內(nèi)容較多的情況使用留白分割，則會(huì)使頁面雜亂無章。比如下圖咸魚的“廣場(chǎng)”界面feed流中，圖片從1～9張都有的情況下，使用留白分割，頁面就會(huì)變得雜亂，影響視覺效果。而脈脈則采用了卡片式分割樣式，頁面模塊則相對(duì)清晰很多。

 

 

 

 

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。

關(guān)鍵詞：UI咨詢、UI設(shè)計(jì)服務(wù)公司、軟件界面設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、用戶體驗(yàn)公司、高端網(wǎng)站設(shè)計(jì)公司、銀行金融軟件UI界面設(shè)計(jì)、能源及監(jiān)控軟件UI界面設(shè)計(jì)、氣象行業(yè)UI界面設(shè)計(jì)、軌道交通界面設(shè)計(jì)、地理信息系統(tǒng)GIS UI界面設(shè)計(jì)、航天軍工軟件UI界面設(shè)計(jì)、醫(yī)療行業(yè)軟件UI界面設(shè)計(jì)、教育行業(yè)軟件UI界面設(shè)計(jì)、企業(yè)信息化UI界面設(shè)計(jì)、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

作者：King_LBJ
鏈接：https://www.zcool.com.cn/article/ZMTYxMDk2NA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

 

 

1.  

   觀察研究：深入觀察用戶在實(shí)際生活中的行為、習(xí)慣和需求，理解他們的真實(shí)需求和痛點(diǎn)。這需要設(shè)計(jì)師具備敏銳的觀察力和同理心，能夠設(shè)身處地地站在用戶的角度思考問題。
2.  

   用戶調(diào)研：通過問卷、訪談等方式，直接獲取用戶的反饋和建議。這有助于了解用戶的期望、偏好和顧慮，進(jìn)一步揭示他們的心智模式。
3.  

   競(jìng)品分析：研究市場(chǎng)上類似產(chǎn)品的設(shè)計(jì)，理解其滿足用戶需求的優(yōu)點(diǎn)和不足。通過競(jìng)品分析，可以洞察用戶在不同產(chǎn)品間的選擇和行為模式，從而深入理解他們的心智模式。

1.  

   明確目標(biāo)用戶：了解目標(biāo)用戶的心智模式，根據(jù)他們的需求和行為習(xí)慣進(jìn)行產(chǎn)品設(shè)計(jì)。這有助于確保產(chǎn)品功能、交互和視覺設(shè)計(jì)等方面符合用戶的內(nèi)在期望。
2.  

   優(yōu)化用戶體驗(yàn)：基于用戶的心智模式，優(yōu)化產(chǎn)品的使用流程。例如，通過合理的信息架構(gòu)、易于理解的交互設(shè)計(jì)和符合用戶直覺的視覺語言，提升產(chǎn)品的易用性和用戶體驗(yàn)。
3.  

   創(chuàng)新設(shè)計(jì)：通過深入了解用戶的心智模式，發(fā)現(xiàn)潛在的需求和痛點(diǎn)，為產(chǎn)品設(shè)計(jì)帶來創(chuàng)新點(diǎn)。這有助于創(chuàng)造出真正解決用戶問題的產(chǎn)品，提升市場(chǎng)競(jìng)爭(zhēng)力。
4.  

   迭代優(yōu)化：在產(chǎn)品發(fā)布后，持續(xù)收集用戶反饋，了解用戶在使用過程中的感受和體驗(yàn)。根據(jù)用戶的反饋和行為數(shù)據(jù)，不斷優(yōu)化產(chǎn)品設(shè)計(jì)和用戶體驗(yàn)，以滿足用戶不斷變化的心智模式。