如何提升界面品質(zhì)感——界面中的結(jié)構(gòu)

2022-11-28    分類： 網(wǎng)站建設(shè)

品質(zhì)感其實就是產(chǎn)品給人的一種嚴謹、專心對待的態(tài)度，同樣一本書的封面，粗糙紙的封面和細心打磨的小羊皮封面就是不同的概念。那要如何提升界面品質(zhì)感呢？

搜狗截圖20180710140253.png

01 當(dāng)前背景

今天聊些設(shè)計基礎(chǔ)部分。設(shè)計工作中，我們總會接到不同場景、不同目標(biāo)用戶的業(yè)務(wù)需求，需要不同風(fēng)格的設(shè)計方案支持，但無論是什么風(fēng)格的設(shè)計，用戶都會有一個共同訴求——“品質(zhì)感”。

02 什么是品質(zhì)感？

所謂品質(zhì)感其實就是產(chǎn)品給人的一種嚴謹、專心對待的態(tài)度，同樣一本書的封面，粗糙紙的封面和細心打磨的小羊皮封面就是不同的概念。

例如：無印良品和愛馬仕，兩者都會傳達給用戶一種“品質(zhì)感”，雖設(shè)計方向不同，但他們有一個共同的特性-對細節(jié)的深度打磨。其實品質(zhì)感，就是來源于產(chǎn)品對細節(jié)的深度考究與打磨。

blob.png

一款有品質(zhì)感的設(shè)計，隨之帶來的是用戶使用中的舒適度、好感度、信賴感。

03 界面中的品質(zhì)感

界面設(shè)計也是一樣，也會帶給用戶一種品質(zhì)感，其同樣是源于設(shè)計師對界面的每處細節(jié)的深度考究。

界面的品質(zhì)感主要來源于界面四個維度、界面中的結(jié)構(gòu)、界面中的圖形、界面中的顏色和界面中的動態(tài)，今天說如何通過結(jié)構(gòu)提升界面品質(zhì)感。

blob.png

04 界面中的結(jié)構(gòu)

界面的結(jié)構(gòu)在用戶體驗中起著重要作用，其相當(dāng)于界面設(shè)計中的“骨”，界面結(jié)構(gòu)中的細節(jié)更是會直接影響到整體設(shè)計的品質(zhì)感，那么具體結(jié)構(gòu)中的細節(jié)體現(xiàn)在哪里？

blob.png

1. 關(guān)系

信息關(guān)系包含界面中的組合、層級、分割等。

（1）組合

“物以類聚”，界面內(nèi)需明確傳達各元素間的關(guān)系。

1）輔助信息服務(wù)于主體信息

輔助信息為主體內(nèi)容的延續(xù)說明或補充操作，作用為服務(wù)于主體內(nèi)容。同一組合內(nèi)，信息間需有明確的關(guān)系與合理的順序，且輔助信息不能搶鏡。例如：朋友圈，清晰傳達關(guān)系的同時，以內(nèi)容為主的閱讀方式不會被頭像內(nèi)容干擾。

blob.png

2）關(guān)系越緊密的內(nèi)容距離應(yīng)越近

形式不變的基礎(chǔ)上，元素之間的距離越近，越易被視為同一組合。距離相同時，橫向排列的內(nèi)容接近度相對更高。

blob.png

（2）層級

界面的層級關(guān)系主要體現(xiàn)在主次、優(yōu)先級、層數(shù)。

1）主次分明、避免層級混亂

清晰的層級結(jié)構(gòu)，能讓用戶更快的獲取重要內(nèi)容，同一組合下其信息一定有主要展示和次要展示。可以通過位置、面積、顏色三個維度建立主次層級的對比度。

a. 位置

在中國，用戶的閱讀習(xí)慣為從左上至右下，所以用戶對左上區(qū)域的觀察最優(yōu)，依次為右上、左下，而右下最差。因此，左上部和上中部被稱為“好視域”。

b. 面積

信息內(nèi)容在界面內(nèi)的占比面積越大，信息越是突出。

c. 顏色

白色背景下，明度越低/飽和度越高，信息越是突出。

blob.png

2）同一組合下，有且僅能有一個最重要的內(nèi)容

當(dāng)所有的內(nèi)容都重要，也就等于所有內(nèi)容都不重要，信息的優(yōu)先級不取決于主要信息是否夠大，而是主要信息和次要信息的對比度。

blob.png

3）同一頁面，信息層級不宜過多

過多的信息層級會讓頁面變得復(fù)雜，增加用戶的理解成本。冗余的信息展示會讓界面變的凌亂瑣碎，一定程度上干擾用戶使用體驗，一般情況下界面應(yīng)控制在 3 層信息以內(nèi)。

blob.png

主次分明、優(yōu)先級明確、層級適當(dāng)會讓界面的信息傳達更清晰明確，進而增加用戶的使用中的舒適度。

（3）分割

分割是用于區(qū)分不同信息的方法，大概可以分為距離分割、線性分割、面性分割（背景色分割）、顏色分割

1）距離分割

增大兩模塊的距離達到內(nèi)容分割內(nèi)容作用，元素間的距離越遠，越不易被視為同一組合。其好處是可以省去分割元素，減少視覺層級，讓界面更干凈、明快。

blob.png

2）線性分割

線性分割是目前界面中最常用的分割方式，其優(yōu)勢是線自身“較輕”，不易干擾用戶。值得注意的是線本身不重要，不宜過度強調(diào)，應(yīng)點到為止，所以線的顏色不宜過重。

3）面性分割/背景色分割

當(dāng)處理多層級、信息復(fù)雜的場景，在單個模塊里已經(jīng)用了線性分割的情況下。可能需要更強一點的分割方式來表明模塊與模塊間的關(guān)系，這時我們可能需要面性分割方式。

這種方式像是灰色的背景上，羅列著多張卡片，能更明確的表達兩組內(nèi)容的分割感，但其缺點是會較明顯的增多界面層級。

blob.png

4）顏色分割

當(dāng)信息的表現(xiàn)形式重復(fù)性較高，容易被看混的情況下，顏色分割是更為合適的選擇。

blob.png

能起到分割作用的前提下，分割方式越輕，越不會干擾閱讀、界面越干凈。

以上可以總結(jié)為：

界面中的組合能讓信息關(guān)系更縝密；

層級能讓用戶更快的獲取重要內(nèi)容；

分割能讓用戶更清晰的區(qū)分不同模塊間關(guān)系。

2. 字體

文字字體是界面結(jié)構(gòu)中重要組成部分，文字也是多數(shù)場景下信息傳達最為準確的方法。合理的字體能夠增加用戶的閱讀體驗，提升用戶在產(chǎn)品使用中的舒適度。合理的字體包含字體的可讀性、對比度、間距。

（1）可讀性

可讀性是字體在界面中需考慮的基礎(chǔ)因素，也是首要因素。字體的的信息傳達容易需精準、明確。字形選擇包括其場景適應(yīng)和字形的適度性。

1）字形的場景適應(yīng)

由于不同的字形會帶給用戶不同的感覺，由于場景需要，我們一定情況下會選擇自定義字體。當(dāng)我們選擇不同的字體時，需要考慮字體在產(chǎn)品內(nèi)不同模塊下是否易于閱讀。

blob.png

2）字形的適度性

字體本身不宜搶鏡，隨意的、搶眼的字體一定場景下上能夠帶來足夠的氛圍感，但是長期使用會出現(xiàn)“視覺疲勞”，其原因是字體本身的設(shè)計，搶走了用戶正常在該場景下閱讀或使用的內(nèi)容和信息。

blob.png

（2）對比度

1）字號

用于區(qū)分不同層級的信息內(nèi)容，為保證信息的快速傳達，不同層級的字體需有一定的優(yōu)先級順序。

a. 界面內(nèi)的主文案/一級文案應(yīng)精簡明確。假設(shè)用戶只會在這個界面停留3、 4 秒，能夠吸引用戶繼續(xù)瀏覽是界面的就是一級信息。當(dāng)一級信息文案字數(shù)過多，會增加用戶剛進入頁面時的閱讀成本，進而降低閱讀體驗。

blob.png

b. 另外，移動端小于24px的字號應(yīng)慎重使用，雖然小的字號會讓板式更加的精致，但當(dāng)同一場景下，小于24px的文案字數(shù)偏多時，會影響用戶的正常閱讀。但可用于弱化的文字鏈、標(biāo)簽等字數(shù)少的場景。

blob.png

（2）加粗

字號相同，字體加粗也是區(qū)分不同層級信息的一種方法，當(dāng)兩信息區(qū)分度不大、界面層級過多需要減少層級的場景下，可以選擇加粗部分內(nèi)容建立輕度對比。

blob.png

（3）字色

我們畫畫的時候，時常會聽到老師說“要注意畫面的黑白灰”。在界面設(shè)計中，也是一樣，我們需注意各層級字體間的黑白灰關(guān)系。明確的畫面黑白灰關(guān)系，會讓界面變得更干凈清晰。另外，當(dāng)不同明度切換時應(yīng)保持色相/飽和度不變。

blob.png

（3）間距

在界面設(shè)計中，字間距和行間距會直接影響用戶閱讀效率。過于緊密的間距會讓字體間失去“透氣性”，根據(jù)我們正常的閱讀順序來講，字間距要小于行間距以便于每一行更易被視為一組，進而給用戶帶來更好的閱讀體驗。我們可根據(jù)文案長短，字號大小制定更適合閱讀的間距。

blob.png

字體的可讀性是字體的基礎(chǔ)，明確的字體對比度能夠讓信息層級更加清晰干凈，而合理的字間距能夠無形的提升用戶的閱讀體驗。

3. 信息對齊

對齊是界面結(jié)構(gòu)中的一部分，合理的對齊方式能夠使界面內(nèi)的信息變得更規(guī)整，內(nèi)容傳達更明確。讓元素間的關(guān)系更具節(jié)奏感。

（1）聯(lián)系性

同一組合內(nèi)的不同元素間需有明確的對齊關(guān)系，其關(guān)系能夠清晰表達不同元素間的親密性。

1）元素間的居左對齊

當(dāng)文案的字數(shù)偏多一些的場景下，居左對齊更符合用戶的閱讀習(xí)慣。

blob.png

2）元素間的居中對齊

當(dāng)內(nèi)容信息較少、或由于對齊元素形狀等因素，居中對齊可能會帶來意外的收獲與效果。

blob.png

3）界面內(nèi)的居右對齊

界面內(nèi)一般不會用居右對齊的方式來建立兩元素間的關(guān)系，但是界面內(nèi)會存在和屏幕建立右對齊關(guān)系的元素（稍微有點繞-.-），與屏幕右對齊的元素一般為主體的解釋說明以及輔助操作等。

一般情境下，當(dāng)用戶閱讀完主要內(nèi)容信息后，才會對操作類的功能有需求，如查看購買、關(guān)注、查看更多、進入下一頁面等。

blob.png

（2）統(tǒng)一性

另外，不同組建間也需要合理的建立對齊關(guān)系，同時為保持界面的簡潔性，同一界面內(nèi)建立的對齊模式不要過多。

05 總結(jié)

界面的結(jié)構(gòu)是提升界面品質(zhì)感的關(guān)鍵，而合理的信息關(guān)系、字體、對齊方式能夠界面的結(jié)構(gòu)更加完整，精致。也希望每個設(shè)計師的作品都更加的美而精致。

以上為本人的一些看法，也希望能給正在探索的你們一些觀點參考。

網(wǎng)頁題目：如何提升界面品質(zhì)感——界面中的結(jié)構(gòu)
當(dāng)前URL：http://www.bm7419.com/news38/217338.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、App開發(fā)、微信小程序、品牌網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)